feat(react-timepicker-preview): add TimePicker component

apps/public-docsite-v9/package.json

@@ -34,6 +34,7 @@
     "@fluentui/react-storybook-addon-export-to-sandbox": "*",
     "@fluentui/react-storybook-addon-playground": "*",
     "@fluentui/react-timepicker-compat": "*",
+    "@fluentui/react-timepicker-preview": "*",
     "@fluentui/recipes": "*",
     "@fluentui/theme-designer": "*",
     "@griffel/react": "^1.5.32",

change/@fluentui-react-shared-contexts-86b3b89d-8deb-4322-8cbb-f6a32f60bb11.json

@@ -0,0 +1,7 @@
+{
+  "type": "minor",
+  "comment": "feat: add useTimePickerStyles_unstable to CustomStyleHooksContext",
+  "packageName": "@fluentui/react-shared-contexts",
+  "email": "vgenaev@gmail.com",
+  "dependentChangeType": "patch"
+}

packages/react-components/react-shared-contexts/library/etc/react-shared-contexts.api.md

@@ -207,6 +207,7 @@ export const CustomStyleHooksContext_unstable: React_2.Context<Partial<{
     useTextareaStyles_unstable: CustomStyleHook;
     useTextStyles_unstable: CustomStyleHook;
     useTimePickerCompatStyles_unstable: CustomStyleHook;
+    useTimePickerStyles_unstable: CustomStyleHook;
     useToastBodyStyles_unstable: CustomStyleHook;
     useToastContainerStyles_unstable: CustomStyleHook;
     useToasterStyles_unstable: CustomStyleHook;
@@ -404,6 +405,7 @@ export type CustomStyleHooksContextValue_unstable = Partial<{
     useTextareaStyles_unstable: CustomStyleHook;
     useTextStyles_unstable: CustomStyleHook;
     useTimePickerCompatStyles_unstable: CustomStyleHook;
+    useTimePickerStyles_unstable: CustomStyleHook;
     useToastBodyStyles_unstable: CustomStyleHook;
     useToastContainerStyles_unstable: CustomStyleHook;
     useToasterStyles_unstable: CustomStyleHook;
@@ -601,6 +603,7 @@ export const CustomStyleHooksProvider_unstable: React_2.Provider<Partial<{
     useTextareaStyles_unstable: CustomStyleHook;
     useTextStyles_unstable: CustomStyleHook;
     useTimePickerCompatStyles_unstable: CustomStyleHook;
+    useTimePickerStyles_unstable: CustomStyleHook;
     useToastBodyStyles_unstable: CustomStyleHook;
     useToastContainerStyles_unstable: CustomStyleHook;
     useToasterStyles_unstable: CustomStyleHook;

packages/react-components/react-shared-contexts/library/src/CustomStyleHooksContext/CustomStyleHooksContext.ts

@@ -186,6 +186,7 @@ export type CustomStyleHooksContextValue = Partial<{
   useTextareaStyles_unstable: CustomStyleHook;
   useTextStyles_unstable: CustomStyleHook;
   useTimePickerCompatStyles_unstable: CustomStyleHook;
+  useTimePickerStyles_unstable: CustomStyleHook;
   useToastBodyStyles_unstable: CustomStyleHook;
   useToastContainerStyles_unstable: CustomStyleHook;
   useToasterStyles_unstable: CustomStyleHook;

packages/react-components/react-timepicker-preview/library/bundle-size/TimePicker.fixture.js

@@ -0,0 +1,7 @@
+import { TimePicker } from '@fluentui/react-timepicker-preview';
+
+console.log(TimePicker);
+
+export default {
+  name: 'TimePicker',
+};

packages/react-components/react-timepicker-preview/library/config/tests.cjs

@@ -1 +1,3 @@
 /** Jest test setup file. */
+
+require('@testing-library/jest-dom');

packages/react-components/react-timepicker-preview/library/cypress.config.ts

@@ -0,0 +1,3 @@
+import { baseConfig } from '@fluentui/scripts-cypress';
+
+export default baseConfig;

packages/react-components/react-timepicker-preview/library/etc/react-timepicker-preview.api.md

@@ -4,6 +4,150 @@
 
 ```ts
 
+import type { BaseComboboxState } from '@fluentui/react-combobox';
+import { ComboboxContextValues as TimePickerContextValues } from '@fluentui/react-combobox';
+import type { ComboboxProps } from '@fluentui/react-combobox';
+import { ComboboxSlots as TimePickerSlots } from '@fluentui/react-combobox';
+import type { ComboboxState } from '@fluentui/react-combobox';
+import type { ComponentProps } from '@fluentui/react-utilities';
+import type { DistributiveOmit } from '@fluentui/react-utilities';
+import type { EventData } from '@fluentui/react-utilities';
+import type { EventHandler } from '@fluentui/react-utilities';
+import type { ForwardRefComponent } from '@fluentui/react-utilities';
+import type { JSXElement } from '@fluentui/react-utilities';
+import * as React_2 from 'react';
+import type { SlotClassNames } from '@fluentui/react-utilities';
+
+// @public
+export function formatDateToTimeString(date: Date, { hourCycle, showSeconds }?: TimeFormatOptions): string;
+
+// @public
+export function getDateEndAnchor(dateAnchor: Date, startHour: number, endHour: number): Date;
+
+// @public
+export function getDateFromTimeString(time: string | undefined, dateStartAnchor: Date, dateEndAnchor: Date, timeFormatOptions: TimeFormatOptions): TimeStringValidationResult;
+
+// @public
+export function getDateStartAnchor(dateAnchor: Date, startHour: number): Date;
+
+// @public
+export function getTimesBetween(dateStartAnchor: Date, dateEndAnchor: Date, increment: number): Date[];
+
+// @public
+export type Hour = 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24;
+
+// @public
+export type HourCycle = 'h11' | 'h12' | 'h23' | 'h24';
+
+// @public
+export const renderTimePicker_unstable: (state: TimePickerBaseState, contextValues: TimePickerContextValues) => JSXElement;
+
+// @public (undocumented)
+export type TimeFormatOptions = {
+    hourCycle?: HourCycle | undefined;
+    showSeconds?: boolean;
+};
+
+// @public
+export const TimePicker: ForwardRefComponent<TimePickerProps>;
+
+// @public
+export type TimePickerBaseProps = DistributiveOmit<TimePickerProps, 'appearance' | 'size'>;
+
+// @public
+export type TimePickerBaseState = DistributiveOmit<TimePickerState, 'appearance' | 'size'>;
+
+// @public (undocumented)
+export const timePickerClassNames: SlotClassNames<TimePickerSlots>;
+
+// @public
+export type TimePickerComboboxProps = Pick<ComboboxProps, 'clearable' | 'freeform' | 'onBlur' | 'onOpenChange'>;
+
+// @public
+export type TimePickerComboboxState = Pick<BaseComboboxState, 'root' | 'input' | 'listbox' | 'expandIcon' | 'clearIcon' | 'value' | 'getOptionById' | 'activeDescendantController'>;
+
+// @public
+export type TimePickerCommitData = Pick<TimePickerOnChangeData, 'value' | 'displayValue' | 'errorType'>;
+
+// @public (undocumented)
+export { TimePickerContextValues }
+
+// @public
+export type TimePickerErrorType = 'invalid-input' | 'out-of-bounds' | 'required-input';
+
+// @public
+export type TimePickerOnChangeData = {
+    value: Date | null;
+    displayValue: string | undefined;
+    errorType: TimePickerErrorType | undefined;
+} & (EventData<'click', React_2.MouseEvent<HTMLElement>> | EventData<'keydown', React_2.KeyboardEvent<HTMLElement>> | EventData<'blur', React_2.FocusEvent<HTMLElement>>);
+
+// @public
+export type TimePickerOption = {
+    date: Date;
+    key: string;
+    text: string;
+};
+
+// @public
+export type TimePickerProps = Omit<ComponentProps<Partial<TimePickerSlots>, 'input'>, 'children' | 'size' | 'value' | 'defaultValue' | 'onChange'> & Pick<ComboboxProps, 'appearance' | 'clearable' | 'defaultOpen' | 'freeform' | 'inlinePopup' | 'mountNode' | 'onOpenChange' | 'open' | 'placeholder' | 'positioning' | 'size'> & TimePickerTimeProps;
+
+// @public
+export type TimePickerSelection<TComboboxProps> = TimePickerTimeState & {
+    comboboxProps: TComboboxProps;
+    options: TimePickerOption[];
+    clearIconRef: React_2.RefObject<HTMLSpanElement | null>;
+    commitValue: (event: TimePickerOnChangeData['event'], data: TimePickerCommitData) => void;
+};
+
+// @public (undocumented)
+export { TimePickerSlots }
+
+// @public
+export type TimePickerState = ComboboxState & TimePickerTimeState;
+
+// @public
+export type TimePickerTimeProps = TimeFormatOptions & {
+    startHour?: Hour;
+    endHour?: Hour;
+    increment?: number;
+    dateAnchor?: Date;
+    value?: Date | null;
+    defaultValue?: Date | null;
+    onChange?: EventHandler<TimePickerOnChangeData>;
+    formatDateToTimeString?: (date: Date, options: TimeFormatOptions) => string;
+    parseTimeStringToDate?: (time: string | undefined) => TimeStringValidationResult;
+};
+
+// @public
+export type TimePickerTimeState = Required<Pick<TimePickerProps, 'freeform' | 'parseTimeStringToDate'>> & {
+    committedText: string | undefined;
+};
+
+// @public
+export type TimeStringValidationResult = {
+    date: Date | null;
+    errorType?: TimePickerErrorType;
+};
+
+// @public
+export const useTimePicker_unstable: (props: TimePickerProps, ref: React_2.Ref<HTMLInputElement>) => TimePickerState;
+
+// @public
+export const useTimePickerBase_unstable: (props: TimePickerBaseProps, ref: React_2.Ref<HTMLInputElement>) => TimePickerBaseState;
+
+// @public
+export const useTimePickerComboboxState_unstable: <TState extends TimePickerComboboxState>(comboboxState: TState, selection: Pick<TimePickerSelection<unknown>, "clearIconRef" | "freeform" | "parseTimeStringToDate" | "commitValue" | "committedText">) => TState & TimePickerTimeState;
+
+// @public
+export const useTimePickerContextValues_unstable: (state: TimePickerBaseState) => TimePickerContextValues;
+
+// @public
+export const useTimePickerSelection_unstable: <TComboboxProps extends TimePickerComboboxProps>(props: TimePickerTimeProps & Omit<TComboboxProps, "value" | "defaultValue" | "onChange">) => TimePickerSelection<TComboboxProps>;
+
+// @public
+export const useTimePickerStyles_unstable: (state: TimePickerState) => TimePickerState;
+
 // (No @packageDocumentation comment for this package)
 
 ```

packages/react-components/react-timepicker-preview/library/package.json

@@ -21,9 +21,13 @@
   },
   "license": "MIT",
   "dependencies": {
+    "@fluentui/keyboard-keys": "^9.0.9",
+    "@fluentui/react-combobox": "^9.17.8",
+    "@fluentui/react-field": "^9.5.6",
+    "@fluentui/react-icons": "^2.0.245",
     "@fluentui/react-jsx-runtime": "^9.4.7",
     "@fluentui/react-shared-contexts": "^9.26.4",
-    "@fluentui/react-theme": "^9.2.2",
+    "@fluentui/react-tabster": "^9.26.19",
     "@fluentui/react-utilities": "^9.27.0",
     "@griffel/react": "^1.5.32",
     "@swc/helpers": "^0.5.1"
@@ -55,5 +59,8 @@
       "major",
       "prerelease"
     ]
+  },
+  "devDependencies": {
+    "@fluentui/scripts-cypress": "*"
   }
 }

packages/react-components/react-timepicker-preview/library/src/TimePicker.ts

@@ -0,0 +1,26 @@
+export {
+  TimePicker,
+  renderTimePicker_unstable,
+  timePickerClassNames,
+  useTimePickerBase_unstable,
+  useTimePickerComboboxState_unstable,
+  useTimePickerContextValues_unstable,
+  useTimePickerSelection_unstable,
+  useTimePickerStyles_unstable,
+  useTimePicker_unstable,
+} from './components/TimePicker/index';
+export type {
+  TimePickerBaseProps,
+  TimePickerBaseState,
+  TimePickerComboboxProps,
+  TimePickerComboboxState,
+  TimePickerCommitData,
+  TimePickerContextValues,
+  TimePickerOnChangeData,
+  TimePickerProps,
+  TimePickerSelection,
+  TimePickerSlots,
+  TimePickerState,
+  TimePickerTimeProps,
+  TimePickerTimeState,
+} from './components/TimePicker/index';