feat(TimePicker-compat): stable release

apps/public-docsite-v9/package.json

@@ -38,7 +38,7 @@
     "@fluentui/react-search-preview": "*",
     "@fluentui/react-motion-preview": "*",
     "@fluentui/react-teaching-popover-preview": "*",
-    "@fluentui/react-timepicker-compat-preview": "*",
+    "@fluentui/react-timepicker-compat": "*",
     "@griffel/react": "^1.5.14",
     "@microsoft/applicationinsights-web": "^3",
     "react": "17.0.2",

apps/vr-tests-react-components/package.json

@@ -65,7 +65,7 @@
     "@fluentui/react-text": "*",
     "@fluentui/react-textarea": "*",
     "@fluentui/react-theme": "*",
-    "@fluentui/react-timepicker-compat-preview": "*",
+    "@fluentui/react-timepicker-compat": "*",
     "@fluentui/react-toast": "*",
     "@fluentui/react-tooltip": "*",
     "@fluentui/react-toolbar": "*",

apps/vr-tests-react-components/src/stories/TimePicker.stories.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { ComponentMeta } from '@storybook/react';
 import { Steps, StoryWright } from 'storywright';
-import { TimePicker } from '@fluentui/react-timepicker-compat-preview';
+import { TimePicker } from '@fluentui/react-timepicker-compat';
 
 export default {
   title: 'TimePicker compat',

change/@fluentui-react-timepicker-compat-44d079da-05f8-4e7e-ad30-fc70601e7267.json

@@ -0,0 +1,7 @@
+{
+  "type": "minor",
+  "comment": "Stable release",
+  "packageName": "@fluentui/react-timepicker-compat",
+  "email": "yuanboxue@microsoft.com",
+  "dependentChangeType": "patch"
+}

change/@fluentui-react-timepicker-compat-preview-8dca177c-555d-4973-8aa1-5ea98786788c.json

@@ -0,0 +1,7 @@
+{
+  "type": "minor",
+  "comment": "Deprecate preview package. Use @fluentui/react-timepicker-compat instead.",
+  "packageName": "@fluentui/react-timepicker-compat-preview",
+  "email": "yuanboxue@microsoft.com",
+  "dependentChangeType": "patch"
+}

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

@@ -13,19 +13,19 @@ import * as React_2 from 'react';
 import type { SelectionEvents } from '@fluentui/react-combobox';
 import type { SlotClassNames } from '@fluentui/react-utilities';
 
-// @public
+// @public @deprecated
 export function formatDateToTimeString(date: Date, { hourCycle, showSeconds }?: TimeFormatOptions): string;
 
-// @public
+// @public @deprecated
 export const TimePicker: ForwardRefComponent<TimePickerProps>;
 
-// @public (undocumented)
+// @public @deprecated (undocumented)
 export const timePickerClassNames: SlotClassNames<TimePickerSlots>;
 
-// @public
+// @public @deprecated
 export type TimePickerErrorType = 'invalid-input' | 'out-of-bounds' | 'required-input';
 
-// @public
+// @public @deprecated
 export type TimePickerProps = Omit<ComponentProps<Partial<ComboboxSlots>, 'input'>, 'children' | 'size'> & Pick<ComboboxProps, 'appearance' | 'defaultOpen' | 'defaultValue' | 'inlinePopup' | 'onOpenChange' | 'open' | 'placeholder' | 'positioning' | 'size' | 'value' | 'mountNode' | 'freeform'> & TimeFormatOptions & {
     startHour?: Hour;
     endHour?: Hour;
@@ -38,28 +38,28 @@ export type TimePickerProps = Omit<ComponentProps<Partial<ComboboxSlots>, 'input
     parseTimeStringToDate?: (time: string | undefined) => TimeStringValidationResult;
 };
 
-// @public (undocumented)
+// @public @deprecated (undocumented)
 export type TimePickerSlots = ComboboxSlots;
 
-// @public
+// @public @deprecated
 export type TimePickerState = ComboboxState & Required<Pick<TimePickerProps, 'freeform' | 'parseTimeStringToDate'>> & {
     submittedText: string | undefined;
 };
 
-// @public (undocumented)
+// @public @deprecated (undocumented)
 export type TimeSelectionData = {
     selectedTime: Date | null;
     selectedTimeText: string | undefined;
     errorType: TimePickerErrorType | undefined;
 };
 
-// @public (undocumented)
+// @public @deprecated (undocumented)
 export type TimeSelectionEvents = SelectionEvents | React_2.FocusEvent<HTMLElement>;
 
-// @public
+// @public @deprecated
 export const useTimePicker_unstable: (props: TimePickerProps, ref: React_2.Ref<HTMLInputElement>) => TimePickerState;
 
-// @public
+// @public @deprecated
 export const useTimePickerStyles_unstable: (state: TimePickerState) => TimePickerState;
 
 // (No @packageDocumentation comment for this package)

packages/react-components/react-timepicker-compat-preview/src/components/TimePicker/TimePicker.cy.tsx

@@ -1,3 +1,4 @@
+/* eslint-disable deprecation/deprecation */
 import * as React from 'react';
 import { mount as mountBase } from '@cypress/react';
 

packages/react-components/react-timepicker-compat-preview/src/components/TimePicker/TimePicker.test.tsx

@@ -1,3 +1,4 @@
+/* eslint-disable deprecation/deprecation */
 import * as React from 'react';
 import { render, fireEvent } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';

packages/react-components/react-timepicker-compat-preview/src/components/TimePicker/TimePicker.tsx

@@ -1,3 +1,4 @@
+/* eslint-disable deprecation/deprecation */
 import * as React from 'react';
 import type { ForwardRefComponent } from '@fluentui/react-utilities';
 import { useTimePicker_unstable } from './useTimePicker';
@@ -8,6 +9,7 @@ import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';
 
 /**
  * TimePicker Compat component
+ * @deprecated use \@fluentui/react-timepicker-compat
  */
 export const TimePicker: ForwardRefComponent<TimePickerProps> = React.forwardRef((props, ref) => {
   const state = useTimePicker_unstable(props, ref);

packages/react-components/react-timepicker-compat-preview/src/components/TimePicker/TimePicker.types.ts

@@ -1,3 +1,4 @@
+/* eslint-disable deprecation/deprecation */
 import * as React from 'react';
 import type { ComboboxSlots, ComboboxState, ComboboxProps, SelectionEvents } from '@fluentui/react-combobox';
 import type { ComponentProps } from '@fluentui/react-utilities';
@@ -51,6 +52,7 @@ export type TimePickerOption = {
 
 /**
  * Error types returned by the `onValidationResult` callback.
+ * @deprecated use \@fluentui/react-timepicker-compat
  */
 export type TimePickerErrorType = 'invalid-input' | 'out-of-bounds' | 'required-input';
 
@@ -59,9 +61,18 @@ export type TimeStringValidationResult = {
   errorType?: TimePickerErrorType;
 };
 
+/**
+ * @deprecated use \@fluentui/react-timepicker-compat
+ */
 export type TimePickerSlots = ComboboxSlots;
 
+/**
+ * @deprecated use \@fluentui/react-timepicker-compat
+ */
 export type TimeSelectionEvents = SelectionEvents | React.FocusEvent<HTMLElement>;
+/**
+ * @deprecated use \@fluentui/react-timepicker-compat
+ */
 export type TimeSelectionData = {
   /**
    * The Date object associated with the selected option. For freeform TimePicker it can also be the Date object parsed from the user input.
@@ -94,6 +105,7 @@ export type TimeFormatOptions = {
 
 /**
  * TimePicker Props
+ * @deprecated use \@fluentui/react-timepicker-compat
  */
 export type TimePickerProps = Omit<ComponentProps<Partial<ComboboxSlots>, 'input'>, 'children' | 'size'> &
   Pick<
@@ -160,6 +172,7 @@ export type TimePickerProps = Omit<ComponentProps<Partial<ComboboxSlots>, 'input
 
 /**
  * State used in rendering TimePicker
+ * @deprecated use \@fluentui/react-timepicker-compat
  */
 export type TimePickerState = ComboboxState &
   Required<Pick<TimePickerProps, 'freeform' | 'parseTimeStringToDate'>> & {

packages/react-components/react-timepicker-compat-preview/src/components/TimePicker/index.ts

@@ -2,4 +2,5 @@ export * from './TimePicker';
 export * from './TimePicker.types';
 export * from './useTimePicker';
 export * from './useTimePickerStyles.styles';
+// eslint-disable-next-line deprecation/deprecation
 export { formatDateToTimeString } from './timeMath';

packages/react-components/react-timepicker-compat-preview/src/components/TimePicker/timeMath.test.ts

@@ -1,3 +1,4 @@
+/* eslint-disable deprecation/deprecation */
 import {
   dateToKey,
   keyToDate,

packages/react-components/react-timepicker-compat-preview/src/components/TimePicker/timeMath.ts

@@ -43,6 +43,8 @@ export function keyToDate(key: string): Date | null {
  * formatDateToTimeString(date);                         // Returns "23:45" in CET
  * formatDateToTimeString(date, \{ showSeconds: true \});  // Returns "23:45:12" in CET
  * formatDateToTimeString(date, \{ hourCycle: 'h12', showSeconds: true \}); // Returns "11:45:12 PM" in CET
+ *
+ * @deprecated use \@fluentui/react-timepicker-compat
  */
 export function formatDateToTimeString(date: Date, { hourCycle, showSeconds }: TimeFormatOptions = {}): string {
   return date.toLocaleTimeString(undefined, {

packages/react-components/react-timepicker-compat-preview/src/components/TimePicker/useTimePicker.tsx

@@ -1,3 +1,4 @@
+/* eslint-disable deprecation/deprecation */
 import * as React from 'react';
 import {
   elementContains,
@@ -29,6 +30,8 @@ import {
  *
  * @param props - props from this instance of TimePicker
  * @param ref - reference to root HTMLElement of TimePicker
+ *
+ * @deprecated use \@fluentui/react-timepicker-compat
  */
 export const useTimePicker_unstable = (props: TimePickerProps, ref: React.Ref<HTMLInputElement>): TimePickerState => {
   const {

packages/react-components/react-timepicker-compat-preview/src/components/TimePicker/useTimePickerStyles.styles.ts

@@ -1,8 +1,12 @@
+/* eslint-disable deprecation/deprecation */
 import { makeStyles, mergeClasses } from '@griffel/react';
 import type { SlotClassNames } from '@fluentui/react-utilities';
 import type { TimePickerSlots, TimePickerState } from './TimePicker.types';
 import { useComboboxStyles_unstable } from '@fluentui/react-combobox';
 
+/**
+ * @deprecated use \@fluentui/react-timepicker-compat
+ */
 export const timePickerClassNames: SlotClassNames<TimePickerSlots> = {
   root: 'fui-TimePicker',
   input: 'fui-TimePicker__input',
@@ -18,6 +22,7 @@ const useStyles = makeStyles({
 
 /**
  * Apply styling to the TimePicker slots based on the state
+ * @deprecated use \@fluentui/react-timepicker-compat
  */
 export const useTimePickerStyles_unstable = (state: TimePickerState): TimePickerState => {
   const styles = useStyles();

packages/react-components/react-timepicker-compat-preview/src/index.ts

@@ -1,3 +1,4 @@
+/* eslint-disable deprecation/deprecation */
 export {
   TimePicker,
   timePickerClassNames,

packages/react-components/react-timepicker-compat-preview/stories/TimePicker/TimePickerControlled.stories.tsx

@@ -1,3 +1,4 @@
+/* eslint-disable deprecation/deprecation */
 import * as React from 'react';
 import { Field, makeStyles } from '@fluentui/react-components';
 import { TimePicker, TimePickerProps, formatDateToTimeString } from '@fluentui/react-timepicker-compat-preview';

packages/react-components/react-timepicker-compat-preview/stories/TimePicker/TimePickerDefault.stories.tsx

@@ -1,3 +1,4 @@
+/* eslint-disable deprecation/deprecation */
 import * as React from 'react';
 import { Field, makeStyles } from '@fluentui/react-components';
 import { TimePicker, TimePickerProps } from '@fluentui/react-timepicker-compat-preview';

packages/react-components/react-timepicker-compat-preview/stories/TimePicker/TimePickerFreeformCustomParsing.stories.tsx

@@ -1,3 +1,4 @@
+/* eslint-disable deprecation/deprecation */
 import * as React from 'react';
 import { Field, makeStyles } from '@fluentui/react-components';
 import { TimePicker, TimePickerProps } from '@fluentui/react-timepicker-compat-preview';

packages/react-components/react-timepicker-compat-preview/stories/TimePicker/TimePickerFreeformWithErrorHandling.stories.tsx

@@ -1,3 +1,4 @@
+/* eslint-disable deprecation/deprecation */
 import * as React from 'react';
 import { Field, FieldProps, makeStyles } from '@fluentui/react-components';
 import { TimePicker, TimePickerErrorType, TimePickerProps } from '@fluentui/react-timepicker-compat-preview';

packages/react-components/react-timepicker-compat-preview/stories/TimePicker/TimePickerWithDatePicker.stories.tsx

@@ -1,3 +1,4 @@
+/* eslint-disable deprecation/deprecation */
 import * as React from 'react';
 import { Field, makeStyles } from '@fluentui/react-components';
 import { DatePicker, DatePickerProps } from '@fluentui/react-datepicker-compat';

packages/react-components/react-timepicker-compat-preview/stories/TimePicker/index.stories.tsx

@@ -1,3 +1,4 @@
+/* eslint-disable deprecation/deprecation */
 import { TimePicker } from '@fluentui/react-timepicker-compat-preview';
 
 import descriptionMd from './TimePickerDescription.md';

packages/react-components/react-timepicker-compat/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fluentui/react-timepicker-compat",
-  "version": "0.0.1",
+  "version": "0.0.2",
   "description": "Fluent UI TimePicker Compat Component",
   "main": "lib-commonjs/index.js",
   "module": "lib/index.js",