@atlaskit/datetime-picker 12.0.0 → 12.1.2

package/dist/types/components/{DatePicker.d.ts → date-picker.d.ts}

@@ -5,89 +5,139 @@ import { CalendarRef } from '@atlaskit/calendar';
 import { LocalizationProvider } from '@atlaskit/locale';
 import { ActionMeta, IndicatorComponentType, IndicatorProps, OptionType, ValueType } from '@atlaskit/select';
 import { Appearance, SelectProps, Spacing } from '../types';
-export interface Props extends WithAnalyticsEventsProps {
+export interface DatePickerBaseProps extends WithAnalyticsEventsProps {
     /**
-      Set the appearance of the picker.
-  
-      `subtle` will remove the borders, background, and icon.
-  
-      **NOTE:** Appearance values will be ignored if styles are parsed through `selectProps`.
+     * Set the appearance of the picker.
+     *
+     * `subtle` will remove the borders, background, and icon.
+     *
+     *NOTE:** Appearance values will be ignored if styles are parsed through `selectProps`.
      */
     appearance?: Appearance;
-    /** Set the picker to autofocus on mount. */
+    /**
+     * Set the picker to autofocus on mount.
+     */
     autoFocus?: boolean;
-    /** The default for `isOpen`. Will be `false` if not provided. */
+    /**
+     * The default for `isOpen`. Will be `false` if not provided.
+     */
     defaultIsOpen?: boolean;
-    /** The default for `value`. */
+    /**
+     * The default for `value`.
+     */
     defaultValue?: string;
-    /** An array of ISO dates that should be disabled on the calendar. This does not affect what users can type into the picker. */
+    /**
+     * An array of ISO dates that should be disabled on the calendar. This does not affect what users can type into the picker.
+     */
     disabled?: string[];
     /**
-      A filter function for disabling dates on the calendar. This does not affect what users can type into the picker.
-  
-      The function is called with a date string in the format `YYYY-MM-DD` and should return `true` if the date should be disabled.
+     * A filter function for disabling dates on the calendar. This does not affect what users can type into the picker.
+     *
+     * The function is called with a date string in the format `YYYY-MM-DD` and should return `true` if the date should be disabled.
      */
     disabledDateFilter?: (date: string) => boolean;
-    /** The latest enabled date. Dates after this are disabled on the calendar. This does not affect what users can type into the picker. */
+    /**
+     * The latest enabled date. Dates after this are disabled on the calendar. This does not affect what users can type into the picker.
+     */
     maxDate?: string;
-    /** The earliest enabled date. Dates before this are disabled on the calendar. This does not affect what users can type into the picker. */
+    /**
+     * The earliest enabled date. Dates before this are disabled on the calendar. This does not affect what users can type into the picker.
+     */
     minDate?: string;
-    /** The icon shown in the picker. */
+    /**
+     * The icon shown in the picker.
+     */
     icon?: IndicatorComponentType<OptionType>;
     /**
-      The id of the field. Currently, react-select transforms this to have a `react-select-` prefix, and an `--input` suffix when applied to the input. For example, the id `my-input` would be transformed to `react-select-my-input--input`.
-  
-      Keep this in mind when needing to refer to the ID. This will be fixed in an upcoming release.
+     * The id of the field. Currently, react-select transforms this to have a `react-select-` prefix, and an `--input` suffix when applied to the input. For example, the id `my-input` would be transformed to `react-select-my-input--input`.
+     *
+     * Keep this in mind when needing to refer to the ID. This will be fixed in an upcoming release.
      */
     id?: string;
-    /** Props to apply to the container. **/
+    /**
+     * Props to apply to the container.
+     */
     innerProps?: React.AllHTMLAttributes<HTMLElement>;
-    /** Set if the picker is disabled. */
+    /**
+     * Set if the picker is disabled.
+     */
     isDisabled?: boolean;
-    /** Set if the picker is open. */
+    /**
+     * Set if the picker is open.
+     */
     isOpen?: boolean;
-    /** The name of the field. */
+    /**
+     * The name of the field.
+     */
     name?: string;
-    /** The aria-label attribute associated with the next-month arrow. */
+    /**
+     * The aria-label attribute associated with the next-month arrow.
+     */
     nextMonthLabel?: string;
-    /** Called when the field is blurred. */
+    /**
+     * Called when the field is blurred.
+     */
     onBlur?: React.FocusEventHandler<HTMLInputElement>;
-    /** Called when the value changes. The only argument is an ISO time or empty string. */
+    /**
+     * Called when the value changes. The only argument is an ISO time or empty string.
+     */
     onChange?: (value: string) => void;
-    /** Called when the field is focused. */
+    /**
+     * Called when the field is focused.
+     */
     onFocus?: React.FocusEventHandler<HTMLInputElement>;
-    /** A function for parsing input characters and transforming them into a Date object. By default parses the date string based off the locale. */
+    /**
+     * A function for parsing input characters and transforming them into a Date object. By default parses the date string based off the locale.
+     */
     parseInputValue?: (date: string, dateFormat: string) => Date;
-    /** A function for formatting the date displayed in the input. By default composes together [date-fn's parse method](https://date-fns.org/v1.29.0/docs/parse) and [date-fn's format method](https://date-fns.org/v1.29.0/docs/format) to return a correctly formatted date string. */
+    /**
+     * A function for formatting the date displayed in the input. By default composes together [date-fn's parse method](https://date-fns.org/v1.29.0/docs/parse) and [date-fn's format method](https://date-fns.org/v1.29.0/docs/format) to return a correctly formatted date string.
+     */
     formatDisplayLabel?: (value: string, dateFormat: string) => string;
-    /** The aria-label attribute associated with the previous-month arrow. */
+    /**
+     * The aria-label attribute associated with the previous-month arrow.
+     */
     previousMonthLabel?: string;
-    /** Props to apply to the select. This can be used to set options such as placeholder text.
-     *  See [the `Select` documentation for further information](/components/select). */
+    /**
+     * Props to apply to the select. This can be used to set options such as placeholder text.
+     *  See [the `Select` documentation for further information](/components/select).
+     */
     selectProps?: SelectProps;
     /**
-      The spacing for the select control.
-  
-      Compact is `gridSize() * 4`, default is `gridSize * 5`.
+     * The spacing for the select control.
+     *
+     * Compact is `gridSize() * 4`, default is `gridSize * 5`.
      */
     spacing?: Spacing;
-    /** The ISO time used as the input value. */
+    /**
+     * The ISO time used as the input value.
+     */
     value?: string;
-    /** Set if the picker has an invalid value. */
+    /**
+     * Set if the picker has an invalid value.
+     */
     isInvalid?: boolean;
-    /** Hides icon for dropdown indicator. */
+    /**
+     * Hides icon for dropdown indicator.
+     */
     hideIcon?: boolean;
-    /** Format the date with a string that is accepted by [date-fn's format function](https://date-fns.org/v1.29.0/docs/format). */
+    /**
+     * Format the date with a string that is accepted by [date-fn's format function](https://date-fns.org/v1.29.0/docs/format).
+     */
     dateFormat?: string;
-    /** Placeholder text displayed in input */
+    /**
+     * Placeholder text displayed in input
+     */
     placeholder?: string;
-    /** Locale used to format the date and calendar. See [DateTimeFormat](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/DateTimeFormat). */
+    /**
+     * Locale used to format the date and calendar. See [DateTimeFormat](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/DateTimeFormat).
+     */
     locale?: string;
     /**
      * A `testId` prop is provided for specified elements, which is a unique string that appears as a data attribute `data-testid` in the rendered code, serving as a hook for automated tests
      *  - `{testId}--container` wrapping element of date-picker
      *  - `{testId}--calendar--container` nested calendar component
-     **/
+     */
     testId?: string;
     /**
      * Start day of the week for the calendar.
@@ -101,7 +151,7 @@ export interface Props extends WithAnalyticsEventsProps {
      */
     weekStartDay?: 0 | 1 | 2 | 3 | 4 | 5 | 6;
 }
-declare type DatePickerProps = typeof datePickerDefaultProps & Props;
+declare type DatePickerProps = typeof datePickerDefaultProps & DatePickerBaseProps;
 interface State {
     isOpen: boolean;
     /**
@@ -109,9 +159,12 @@ interface State {
      * This variable defines whether the default onSelectBlur or onSelectFocus
      * events should behave as normal
      */
+    isFocused: boolean;
     clearingFromIcon: boolean;
     value: string;
-    /** Value to be shown in the calendar as selected.  */
+    /**
+     * Value to be shown in the calendar as selected.
+     */
     selectedValue: string;
     view: string;
     inputValue: string;
@@ -168,6 +221,7 @@ declare class DatePicker extends Component<DatePickerProps, State> {
         inputValue: any;
         isOpen: boolean;
         value: string;
+        isFocused: boolean;
         clearingFromIcon: boolean;
         selectedValue: string;
         view: string;
@@ -190,7 +244,7 @@ declare class DatePicker extends Component<DatePickerProps, State> {
     refCalendar: (ref: CalendarRef | null) => void;
     handleInputChange: (inputValue: string, actionMeta: {}) => void;
     getContainerRef: (ref: HTMLElement | null) => void;
-    getSubtleControlStyles: (isOpen: boolean) => {
+    getSubtleControlStyles: () => {
         border: string;
         backgroundColor: string;
         padding: string;

package/dist/types/components/{DateTimePicker.d.ts → date-time-picker.d.ts}

@@ -3,63 +3,99 @@ import React from 'react';
 import { WithAnalyticsEventsProps } from '@atlaskit/analytics-next';
 import { SelectProps } from '@atlaskit/select';
 import { Appearance, Spacing } from '../types';
-import { Props as DatePickerProps } from './DatePicker';
-import { Props as TimePickerProps } from './TimePicker';
-export interface Props extends WithAnalyticsEventsProps {
+import { DatePickerBaseProps as DatePickerProps } from './date-picker';
+import { TimePickerBaseProps as TimePickerProps } from './time-picker';
+export interface DateTimePickerBaseProps extends WithAnalyticsEventsProps {
     /**
      * Set the appearance of the picker.
      *
      * `subtle` will remove the borders and background.
      */
     appearance?: Appearance;
-    /** Set the picker to autofocus on mount. */
+    /**
+     * Set the picker to autofocus on mount.
+     */
     autoFocus?: boolean;
-    /** The default for `value`. */
+    /**
+     * The default for `value`.
+     */
     defaultValue?: string;
     /**
      * The id of the field. Currently, react-select transforms this to have a `react-select-` prefix, and an `--input` suffix when applied to the input. For example, the id `my-input` would be transformed to `react-select-my-input--input`.
      * Keep this in mind when needing to refer to the ID. This will be fixed in an upcoming release.
      */
     id?: string;
-    /** Props to apply to the container. **/
+    /**
+     * Props to apply to the container. *
+     */
     innerProps?: React.AllHTMLAttributes<HTMLElement>;
-    /** Set if the field is disabled. */
+    /**
+     * Set if the field is disabled.
+     */
     isDisabled?: boolean;
-    /** The name of the field. */
+    /**
+     * The name of the field.
+     */
     name?: string;
-    /** Called when the field is blurred. */
+    /**
+     * Called when the field is blurred.
+     */
     onBlur?: React.FocusEventHandler<HTMLInputElement>;
-    /** Called when the value changes and the date / time is a complete value, or empty. The only value is an ISO string or empty string. */
+    /**
+     * Called when the value changes and the date / time is a complete value, or empty. The only value is an ISO string or empty string.
+     */
     onChange?: (value: string) => void;
-    /** Called when the field is focused. */
+    /**
+     * Called when the field is focused.
+     */
     onFocus?: React.FocusEventHandler<HTMLInputElement>;
-    /** The ISO time that should be used as the input value. */
+    /**
+     * The ISO time that should be used as the input value.
+     */
     value?: string;
-    /** Set if users can edit the input, allowing them to add custom times. */
+    /**
+     * Set if users can edit the input, allowing them to add custom times.
+     */
     timeIsEditable?: boolean;
-    /** Set if the picker has an invalid value. */
+    /**
+     * Set if the picker has an invalid value.
+     */
     isInvalid?: boolean;
-    /** DEPRECATED - This is here only for backwards compatibility and doesn't do anything. It will be removed in the next MAJOR. */
-    hideIcon?: boolean;
-    /** Format the date with a string that is accepted by [date-fns's format function](https://date-fns.org/v1.29.0/docs/format). */
+    /**
+     * Format the date with a string that is accepted by [date-fns's format function](https://date-fns.org/v1.29.0/docs/format).
+     */
     dateFormat?: string;
-    /** Props applied to the `DatePicker`. */
+    /**
+     * Props applied to the `DatePicker`.
+     */
     datePickerProps?: DatePickerProps;
-    /** Props applied to the `TimePicker`. */
+    /**
+     * Props applied to the `TimePicker`.
+     */
     timePickerProps?: TimePickerProps;
-    /** Function used to parse datetime values into their date, time and timezone sub-values. **/
+    /**
+     * Function used to parse datetime values into their date, time and timezone sub-values. *
+     */
     parseValue?: (dateTimeValue: string, date: string, time: string, timezone: string) => {
         dateValue: string;
         timeValue: string;
         zoneValue: string;
     };
-    /** [Select props](/components/select) to pass onto the `DatePicker` component's `Select`. This can be used to set options such as placeholder text. */
+    /**
+     * [Select props](/components/select) to pass onto the `DatePicker` component's `Select`. This can be used to set options such as placeholder text.
+     */
     datePickerSelectProps?: SelectProps<any>;
-    /** [Select props](/components/select) to pass onto the `TimePicker` component's `Select`. This can be used to set options such as placeholder text. */
+    /**
+     * [Select props](/components/select) to pass onto the `TimePicker` component's `Select`. This can be used to set options such as placeholder text.
+     */
     timePickerSelectProps?: SelectProps<any>;
-    /** The times shown by the `TimePicker`. */
+    /**
+     * The times shown by the `TimePicker`.
+     */
     times?: Array<string>;
-    /** The format that times are displayed in. Values should be those accepted by [date-fns's format function](https://date-fns.org/v1.29.0/docs/format). */
+    /**
+     * The format that times are displayed in. Values should be those accepted by [date-fns's format function](https://date-fns.org/v1.29.0/docs/format).
+     */
     timeFormat?: string;
     /**
      * The spacing for the select control.
@@ -67,16 +103,18 @@ export interface Props extends WithAnalyticsEventsProps {
      * Compact is `gridSize() * 4`, default is `gridSize() * 5`.
      */
     spacing?: Spacing;
-    /** Locale used for formatting dates and times. See [DateTimeFormat](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/DateTimeFormat). */
+    /**
+     * Locale used for formatting dates and times. See [DateTimeFormat](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/DateTimeFormat).
+     */
     locale?: string;
     /**
      * A `testId` prop is provided for specified elements, which is a unique string that appears as a data attribute `data-testid` in the rendered code, serving as a hook for automated tests
      *  - `{testId}--datepicker--container` wrapping element of date-picker
      *  - `{testId}--timepicker--container` wrapping element of time-picker
-     **/
+     */
     testId?: string;
 }
-declare type DateTimePickerProps = typeof dateTimePickerDefaultProps & Props;
+declare type DateTimePickerProps = typeof dateTimePickerDefaultProps & DateTimePickerBaseProps;
 interface State {
     active: 0 | 1 | 2;
     dateValue: string;
@@ -155,7 +193,7 @@ declare class DateTimePicker extends React.Component<DateTimePickerProps, State>
     render(): JSX.Element;
 }
 export { DateTimePicker as DateTimePickerWithoutAnalytics };
-declare const _default: React.ForwardRefExoticComponent<Pick<Pick<Omit<DateTimePickerProps, keyof WithAnalyticsEventsProps>, "testId" | "hideIcon" | "value" | "dateFormat" | "timeFormat" | "parseValue"> & Partial<Pick<Omit<DateTimePickerProps, keyof WithAnalyticsEventsProps>, "appearance" | "innerProps" | "autoFocus" | "defaultValue" | "id" | "isDisabled" | "isInvalid" | "name" | "onBlur" | "onChange" | "onFocus" | "spacing" | "locale" | "times" | "timeIsEditable" | "datePickerProps" | "timePickerProps" | "datePickerSelectProps" | "timePickerSelectProps">> & Partial<Pick<{
+declare const _default: React.ForwardRefExoticComponent<Pick<Pick<Omit<DateTimePickerProps, keyof WithAnalyticsEventsProps>, "testId" | "value" | "dateFormat" | "timeFormat" | "parseValue"> & Partial<Pick<Omit<DateTimePickerProps, keyof WithAnalyticsEventsProps>, "appearance" | "innerProps" | "autoFocus" | "defaultValue" | "id" | "isDisabled" | "isInvalid" | "name" | "onBlur" | "onChange" | "onFocus" | "spacing" | "locale" | "times" | "timeIsEditable" | "datePickerProps" | "timePickerProps" | "datePickerSelectProps" | "timePickerSelectProps">> & Partial<Pick<{
     appearance: string;
     autoFocus: boolean;
     isDisabled: boolean;
@@ -175,5 +213,5 @@ declare const _default: React.ForwardRefExoticComponent<Pick<Pick<Omit<DateTimeP
     times: string[];
     spacing: string;
     locale: string;
-}, never>> & React.RefAttributes<any> & import("@atlaskit/analytics-next").WithContextProps, "testId" | "appearance" | "innerProps" | "autoFocus" | "defaultValue" | "hideIcon" | "id" | "isDisabled" | "isInvalid" | "name" | "onBlur" | "onChange" | "onFocus" | "spacing" | "locale" | "value" | "dateFormat" | "key" | "analyticsContext" | "times" | "timeIsEditable" | "timeFormat" | "datePickerProps" | "timePickerProps" | "datePickerSelectProps" | "timePickerSelectProps" | "parseValue"> & React.RefAttributes<any>>;
+}, never>> & React.RefAttributes<any> & import("@atlaskit/analytics-next").WithContextProps, "testId" | "appearance" | "innerProps" | "autoFocus" | "defaultValue" | "id" | "isDisabled" | "isInvalid" | "name" | "onBlur" | "onChange" | "onFocus" | "spacing" | "locale" | "value" | "dateFormat" | "key" | "analyticsContext" | "times" | "timeIsEditable" | "timeFormat" | "datePickerProps" | "timePickerProps" | "datePickerSelectProps" | "timePickerSelectProps" | "parseValue"> & React.RefAttributes<any>>;
 export default _default;

package/dist/types/components/{TimePicker.d.ts → time-picker.d.ts}

@@ -7,71 +7,112 @@ interface Option {
     label: string;
     value: string;
 }
-export interface Props extends WithAnalyticsEventsProps {
+export interface TimePickerBaseProps extends WithAnalyticsEventsProps {
     /**
-      Set the appearance of the picker.
-  
-      `subtle` will remove the borders, background, and icon.
-  
-      **NOTE:** Appearance values will be ignored if styles are parsed through `selectProps`.
+     * Set the appearance of the picker.
+     * `subtle` will remove the borders, background, and icon.
+     *
+     * __NOTE:__ Appearance values will be ignored if styles are parsed through `selectProps`.
      */
     appearance?: Appearance;
-    /** Set the picker to autofocus on mount. */
+    /**
+     * Set the picker to autofocus on mount.
+     */
     autoFocus?: boolean;
-    /** The default for `isOpen`. */
+    /**
+     * The default for `isOpen`.
+     */
     defaultIsOpen?: boolean;
-    /** The default for `value`. */
+    /**
+     * The default for `value`.
+     */
     defaultValue?: string;
-    /** DEPRECATED - Use locale instead. Function for formatting the displayed time value in the input. By default parses with an internal time parser, and formats using the [date-fns format function]((https://date-fns.org/v1.29.0/docs/format)). */
+    /**
+     * A function for formatting the displayed time value in the input. By default parses with an internal time parser, and formats using the [date-fns format function]((https://date-fns.org/v1.29.0/docs/format))
+     */
     formatDisplayLabel?: (time: string, timeFormat: string) => string;
-    /** The id of the field. Currently, react-select transforms this to have a `react-select-` prefix, and an `--input` suffix when applied to the input. For example, the id `my-input` would be transformed to `react-select-my-input--input`. Keep this in mind when needing to refer to the ID. This will be fixed in an upcoming release. */
+    /**
+     * The id of the field. Currently, react-select transforms this to have a `react-select-` prefix, and an `--input` suffix when applied to the input. For example, the id `my-input` would be transformed to `react-select-my-input--input`. Keep this in mind when needing to refer to the ID. This will be fixed in an upcoming release.
+     */
     id?: string;
-    /** Props to apply to the container. **/
+    /**
+     * Props to apply to the container. *
+     */
     innerProps?: React.AllHTMLAttributes<HTMLElement>;
-    /** Set if the field is disabled. */
+    /**
+     * Set if the field is disabled.
+     */
     isDisabled?: boolean;
-    /** Set if the dropdown is open. Will be `false` if not provided. */
+    /**
+     * Set if the dropdown is open. Will be `false` if not provided.
+     */
     isOpen?: boolean;
-    /** The name of the field. */
+    /**
+     * The name of the field.
+     */
     name?: string;
-    /** Called when the field is blurred. */
+    /**
+     * Called when the field is blurred.
+     */
     onBlur?: React.FocusEventHandler<HTMLElement>;
-    /** Called when the value changes. The only argument is an ISO time or empty string. */
+    /**
+     * Called when the value changes. The only argument is an ISO time or empty string.
+     */
     onChange?: (value: string) => void;
-    /** Called when the field is focused. */
+    /**
+     * Called when the field is focused.
+     */
     onFocus?: React.FocusEventHandler<HTMLElement>;
     parseInputValue?: (time: string, timeFormat: string) => string | Date;
-    /** Props to apply to the select. */
+    /**
+     * Props to apply to the select.
+     */
     selectProps?: SelectProps<any>;
     /**
-      The spacing for the select control.
-  
-      Compact is `gridSize() * 4`, default is `gridSize * 5`.
+     * The spacing for the select control.
+     *
+     * Compact is `gridSize() * 4`, default is `gridSize * 5`.
      */
     spacing?: Spacing;
-    /** The times shown in the dropdown. */
+    /**
+     * The times shown in the dropdown.
+     */
     times?: string[];
-    /** Set if users can edit the input, allowing them to add custom times. */
+    /**
+     * Set if users can edit the input, allowing them to add custom times.
+     */
     timeIsEditable?: boolean;
-    /** The ISO time that should be used as the input value. */
+    /**
+     * The ISO time that should be used as the input value.
+     */
     value?: string;
-    /** Set if the picker has an invalid value. */
+    /**
+     * Set if the picker has an invalid value.
+     */
     isInvalid?: boolean;
-    /** Hides icon for dropdown indicator. */
+    /**
+     * Hides icon for dropdown indicator.
+     */
     hideIcon?: boolean;
-    /** Time format that is accepted by [date-fns's format function](https://date-fns.org/v1.29.0/docs/format). */
+    /**
+     * Time format that is accepted by [date-fns's format function](https://date-fns.org/v1.29.0/docs/format).
+     */
     timeFormat?: string;
-    /** Placeholder text displayed in input. */
+    /**
+     * Placeholder text displayed in input.
+     */
     placeholder?: string;
-    /** Locale used to format the time. See [DateTimeFormat](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/DateTimeFormat). */
+    /**
+     * Locale used to format the time. See [DateTimeFormat](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/DateTimeFormat).
+     */
     locale?: string;
     /**
      * A `testId` prop is provided for specified elements, which is a unique string that appears as a data attribute `data-testid` in the rendered code, serving as a hook for automated tests:
      *  - `{testId}--container` wrapping element of time-picker
-     **/
+     */
     testId?: string;
 }
-declare type TimePickerProps = typeof timePickerDefaultProps & Props;
+declare type TimePickerProps = typeof timePickerDefaultProps & TimePickerBaseProps;
 interface State {
     isOpen: boolean;
     /**
@@ -141,7 +182,9 @@ declare class TimePicker extends React.Component<TimePickerProps, State> {
     onChange: (v: {
         value: string;
     } | null, action?: ActionMeta<OptionType> | undefined) => void;
-    /** Only allow custom times if timeIsEditable prop is true  */
+    /**
+     * Only allow custom times if timeIsEditable prop is true
+     */
     onCreateOption: (inputValue: any) => void;
     onMenuOpen: () => void;
     onMenuClose: () => void;

package/dist/types/index.d.ts

@@ -1,7 +1,7 @@
-export { default as DatePicker } from './components/DatePicker';
-export type { Props as DatePickerProps } from './components/DatePicker';
-export { default as TimePicker } from './components/TimePicker';
-export type { Props as TimePickerProps } from './components/TimePicker';
-export { default as DateTimePicker } from './components/DateTimePicker';
-export type { Props as DateTimePickerProps } from './components/DateTimePicker';
+export { default as DatePicker } from './components/date-picker';
+export type { DatePickerBaseProps as DatePickerProps } from './components/date-picker';
+export { default as TimePicker } from './components/time-picker';
+export type { TimePickerBaseProps as TimePickerProps } from './components/time-picker';
+export { default as DateTimePicker } from './components/date-time-picker';
+export type { DateTimePickerBaseProps as DateTimePickerProps } from './components/date-time-picker';
 export type { Appearance, Spacing } from './types';

package/dist/types/internal/{FixedLayer.d.ts → fixed-layer.d.ts}

@@ -1,8 +1,10 @@
 import React from 'react';
-interface Props {
-    /** A ref to the container that the content should be layered around for height calculation
+interface FixedLayerProps {
+    /**
+     * A ref to the container that the content should be layered around for height calculation
      * purposes. This must be an ancestor element as component does not attach the layered content around
-     * the ref itself. */
+     * the ref itself.
+     */
     containerRef: HTMLElement | null;
     /**
      * The content to render in the layer.
@@ -15,7 +17,7 @@ interface Props {
     /**
      * A `testId` prop is provided for specified elements, which is a unique string that appears as a data attribute `data-testid` in the rendered code, serving as a hook for automated tests
      *  - `{testId}--popper-container` wrapping element of time-picker
-     **/
+     */
     testId?: string;
 }
 /**
@@ -23,7 +25,7 @@ interface Props {
  * Scroll is locked outside the layer to prevent the layered content from detaching from the
  * container ref.
  */
-export default class FixedLayer extends React.Component<Props> {
+export default class FixedLayer extends React.Component<FixedLayerProps> {
     update: () => void;
     componentDidUpdate(prevProps: any): void;
     render(): JSX.Element;

package/extract-react-types/date-picker-props.tsx

@@ -1,5 +1,5 @@
-import { Props } from '../src/components/DatePicker';
+import { DatePickerBaseProps } from '../src/components/date-picker';
 
-export default function DatePickerProps(props: Props) {
+export default function DatePickerProps(props: DatePickerBaseProps) {
   return null;
 }

package/extract-react-types/datetime-picker-props.tsx

@@ -1,5 +1,5 @@
-import { Props } from '../src/components/DateTimePicker';
+import { DateTimePickerBaseProps } from '../src/components/date-time-picker';
 
-export default function DateTimePickerProps(props: Props) {
+export default function DateTimePickerProps(props: DateTimePickerBaseProps) {
   return null;
 }

package/extract-react-types/time-picker-props.tsx

@@ -1,5 +1,5 @@
-import { Props } from '../src/components/TimePicker';
+import { TimePickerBaseProps } from '../src/components/time-picker';
 
-export default function TimePickerProps(props: Props) {
+export default function TimePickerProps(props: TimePickerBaseProps) {
   return null;
 }