@fluentui/react-timepicker-compat 0.0.1

package/CHANGELOG.md

@@ -0,0 +1,14 @@
+# Change Log - @fluentui/react-timepicker-compat
+
+This log was last generated on Thu, 04 Jan 2024 09:47:54 GMT and should not be manually modified.
+
+<!-- Start content -->
+
+## [0.0.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-timepicker-compat_v0.0.1)
+
+Thu, 04 Jan 2024 09:47:54 GMT
+
+### Patches
+
+- undefined ([PR #30199](https://github.com/microsoft/fluentui/pull/30199) by yuanboxue@microsoft.com)
+- feat: release compat package ([PR #30201](https://github.com/microsoft/fluentui/pull/30201) by yuanboxue@microsoft.com)

package/LICENSE

@@ -0,0 +1,15 @@
+@fluentui/react-timepicker-compat
+
+Copyright (c) Microsoft Corporation
+
+All rights reserved.
+
+MIT License
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the ""Software""), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED _AS IS_, WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
+Note: Usage of the fonts and icons referenced in Fluent UI React is subject to the terms listed at https://aka.ms/fluentui-assets-license

package/README.md

@@ -0,0 +1,38 @@
+# @fluentui/react-timepicker-compat
+
+**React Timepicker components for [Fluent UI React](https://react.fluentui.dev/)**
+
+These are not production-ready components and **should never be used in product**. This space is useful for testing new components whose APIs might change before final release.
+
+TimePicker offers a control that’s optimized for selecting a time from a drop-down list or using free-form input to enter a custom time.
+
+## Usage
+
+To import Timepicker:
+
+```js
+import { TimePicker } from '@fluentui/react-timepicker-compat';
+```
+
+### Examples
+
+```jsx
+<TimePicker />
+```
+
+# Compat component
+
+## What makes a compat component?
+
+A compat component is a component taken from v8 and partially updated with the v9 toolset while keeping its original functionality and most of the original API surface. The most noticeable change being the removal of all v8 dependencies and using only v9 dependencies. While this is a good first step, this is not the final v9 component. We are working on a fully fleshed v9 replacement that will follow all v9 patterns and conventions.
+
+## How publishing the package will be handled
+
+Compat components are not added in the `@fluentui/react-components` package suite. Instead, these components should be imported from their respective package as shown above. In contrast with components that live in `@fluentui/react-components`, compat components are to be released as `0.x.x` and there won't be an unstable release (`beta/alpha`) before this release. This is due to the way we will handle versioning for changes, allowing for breaking changes when necessary.
+
+### Versioning for changes
+
+We will take a similar approach as v0 where we will follow this pattern:
+
+- `breaking change (major)`: Since this is a compat component, we will allow breaking changes if absolutely necessary. To accommodate for this, we will denote those changes as a minor version in semver, i.e. `0.(change will be reflected here).x`.
+- `minor and patch`: These changes will be reflected in the patch version in semver as `0.x.(change will be reflected here)`.

package/dist/index.d.ts

@@ -0,0 +1,147 @@
+import type { ComboboxProps } from '@fluentui/react-combobox';
+import type { ComboboxSlots } from '@fluentui/react-combobox';
+import type { ComboboxState } from '@fluentui/react-combobox';
+import type { ComponentProps } from '@fluentui/react-utilities';
+import type { ForwardRefComponent } from '@fluentui/react-utilities';
+import * as React_2 from 'react';
+import type { SelectionEvents } from '@fluentui/react-combobox';
+import type { SlotClassNames } from '@fluentui/react-utilities';
+
+/**
+ * Formats a Date object into a time string based on provided options.
+ *
+ * @param date - The Date object to be formatted.
+ * @param options - Formatting options. It has two properties:
+ *      1. hourCycle (default: undefined): Determines if the time format should be 12-hour or 24-hour.
+ *      2. showSeconds (default: false): Determines if the seconds should be included in the formatted string.
+ * @returns Formatted time string based on the given options.
+ *
+ * @example
+ * const date = new Date(2023, 9, 6, 23, 45, 12);
+ * 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
+ */
+export declare function formatDateToTimeString(date: Date, { hourCycle, showSeconds }?: TimeFormatOptions): string;
+
+declare 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;
+
+declare type TimeFormatOptions = {
+    /**
+     * A string value indicating whether the 12-hour format ("h11", "h12") or the 24-hour format ("h23", "h24") should be used.
+     * - 'h11' and 'h23' start with hour 0 and go up to 11 and 23 respectively.
+     * - 'h12' and 'h24' start with hour 1 and go up to 12 and 24 respectively.
+     * @default undefined
+     */
+    hourCycle?: 'h11' | 'h12' | 'h23' | 'h24' | undefined;
+    /**
+     * If true, show seconds in the dropdown options and consider seconds for default validation purposes.
+     */
+    showSeconds?: boolean;
+};
+
+/**
+ * TimePicker Compat component
+ */
+export declare const TimePicker: ForwardRefComponent<TimePickerProps>;
+
+export declare const timePickerClassNames: SlotClassNames<TimePickerSlots>;
+
+/**
+ * Error types returned by the `onValidationResult` callback.
+ */
+export declare type TimePickerErrorType = 'invalid-input' | 'out-of-bounds' | 'required-input';
+
+/**
+ * TimePicker Props
+ */
+export declare type TimePickerProps = Omit<ComponentProps<Partial<ComboboxSlots>, 'input'>, 'children' | 'size'> & Pick<ComboboxProps, 'appearance' | 'defaultOpen' | 'defaultValue' | 'inlinePopup' | 'onOpenChange' | 'open' | 'placeholder' | 'positioning' | 'size' | 'value' | 'mountNode' | 'freeform'> & TimeFormatOptions & {
+    /**
+     * Start hour (inclusive) for the time range, 0-24.
+     */
+    startHour?: Hour;
+    /**
+     * End hour (exclusive) for the time range, 0-24.
+     */
+    endHour?: Hour;
+    /**
+     * Time increment, in minutes, of the options in the dropdown.
+     */
+    increment?: number;
+    /**
+     * The date in which all dropdown options are based off of.
+     */
+    dateAnchor?: Date;
+    /**
+     * Currently selected time in the TimePicker.
+     */
+    selectedTime?: Date | null;
+    /**
+     * Default selected time in the TimePicker, for uncontrolled scenarios.
+     */
+    defaultSelectedTime?: Date;
+    /**
+     * Callback for when a time selection is made.
+     */
+    onTimeChange?: (event: TimeSelectionEvents, data: TimeSelectionData) => void;
+    /**
+     * Customizes the formatting of date strings displayed in dropdown options.
+     */
+    formatDateToTimeString?: (date: Date) => string;
+    /**
+     * In the freeform TimePicker, customizes the parsing from the input time string into a Date and provides custom validation.
+     */
+    parseTimeStringToDate?: (time: string | undefined) => TimeStringValidationResult;
+};
+
+export declare type TimePickerSlots = ComboboxSlots;
+
+/**
+ * State used in rendering TimePicker
+ */
+export declare type TimePickerState = ComboboxState & Required<Pick<TimePickerProps, 'freeform' | 'parseTimeStringToDate'>> & {
+    /**
+     * Submitted text from the input field. It is used to determine if the input value has changed when user submit a new value on Enter or blur from input.
+     */
+    submittedText: string | undefined;
+};
+
+export declare 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.
+     */
+    selectedTime: Date | null;
+    /**
+     * The display text for the selected option. For freeform TimePicker it can also be the value in user input.
+     */
+    selectedTimeText: string | undefined;
+    /**
+     * The error type for the selected option.
+     */
+    errorType: TimePickerErrorType | undefined;
+};
+
+export declare type TimeSelectionEvents = SelectionEvents | React_2.FocusEvent<HTMLElement>;
+
+declare type TimeStringValidationResult = {
+    date: Date | null;
+    errorType?: TimePickerErrorType;
+};
+
+/**
+ * Create the state required to render TimePicker.
+ *
+ * The returned state can be modified with hooks such as useTimePickerStyles_unstable,
+ * before being passed to renderTimePicker_unstable.
+ *
+ * @param props - props from this instance of TimePicker
+ * @param ref - reference to root HTMLElement of TimePicker
+ */
+export declare const useTimePicker_unstable: (props: TimePickerProps, ref: React_2.Ref<HTMLInputElement>) => TimePickerState;
+
+/**
+ * Apply styling to the TimePicker slots based on the state
+ */
+export declare const useTimePickerStyles_unstable: (state: TimePickerState) => TimePickerState;
+
+export { }

package/lib/TimePicker.js

@@ -0,0 +1 @@
+export * from './components/TimePicker/index';

package/lib/TimePicker.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["TimePicker.ts"],"sourcesContent":["export * from './components/TimePicker/index';\n"],"names":[],"mappings":"AAAA,cAAc,gCAAgC"}

package/lib/components/TimePicker/TimePicker.js

@@ -0,0 +1,15 @@
+import * as React from 'react';
+import { useTimePicker_unstable } from './useTimePicker';
+import { useTimePickerStyles_unstable } from './useTimePickerStyles.styles';
+import { renderCombobox_unstable, useComboboxContextValues } from '@fluentui/react-combobox';
+import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';
+/**
+ * TimePicker Compat component
+ */ export const TimePicker = /*#__PURE__*/ React.forwardRef((props, ref)=>{
+    const state = useTimePicker_unstable(props, ref);
+    const contextValues = useComboboxContextValues(state);
+    useTimePickerStyles_unstable(state);
+    useCustomStyleHook_unstable('useTimePickerCompatStyles_unstable')(state);
+    return renderCombobox_unstable(state, contextValues);
+});
+TimePicker.displayName = 'TimePicker';

package/lib/components/TimePicker/TimePicker.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["TimePicker.tsx"],"sourcesContent":["import * as React from 'react';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useTimePicker_unstable } from './useTimePicker';\nimport { useTimePickerStyles_unstable } from './useTimePickerStyles.styles';\nimport type { TimePickerProps } from './TimePicker.types';\nimport { renderCombobox_unstable, useComboboxContextValues } from '@fluentui/react-combobox';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\n/**\n * TimePicker Compat component\n */\nexport const TimePicker: ForwardRefComponent<TimePickerProps> = React.forwardRef((props, ref) => {\n  const state = useTimePicker_unstable(props, ref);\n\n  const contextValues = useComboboxContextValues(state);\n\n  useTimePickerStyles_unstable(state);\n  useCustomStyleHook_unstable('useTimePickerCompatStyles_unstable')(state);\n\n  return renderCombobox_unstable(state, contextValues);\n});\n\nTimePicker.displayName = 'TimePicker';\n"],"names":["React","useTimePicker_unstable","useTimePickerStyles_unstable","renderCombobox_unstable","useComboboxContextValues","useCustomStyleHook_unstable","TimePicker","forwardRef","props","ref","state","contextValues","displayName"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAE/B,SAASC,sBAAsB,QAAQ,kBAAkB;AACzD,SAASC,4BAA4B,QAAQ,+BAA+B;AAE5E,SAASC,uBAAuB,EAAEC,wBAAwB,QAAQ,2BAA2B;AAC7F,SAASC,2BAA2B,QAAQ,kCAAkC;AAE9E;;CAEC,GACD,OAAO,MAAMC,2BAAmDN,MAAMO,UAAU,CAAC,CAACC,OAAOC;IACvF,MAAMC,QAAQT,uBAAuBO,OAAOC;IAE5C,MAAME,gBAAgBP,yBAAyBM;IAE/CR,6BAA6BQ;IAC7BL,4BAA4B,sCAAsCK;IAElE,OAAOP,wBAAwBO,OAAOC;AACxC,GAAG;AAEHL,WAAWM,WAAW,GAAG"}

package/lib/components/TimePicker/TimePicker.types.js

@@ -0,0 +1 @@
+import * as React from 'react';

package/lib/components/TimePicker/TimePicker.types.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["TimePicker.types.ts"],"sourcesContent":["import * as React from 'react';\nimport type { ComboboxSlots, ComboboxState, ComboboxProps, SelectionEvents } from '@fluentui/react-combobox';\nimport type { ComponentProps } from '@fluentui/react-utilities';\n\nexport type Hour =\n  | 0\n  | 1\n  | 2\n  | 3\n  | 4\n  | 5\n  | 6\n  | 7\n  | 8\n  | 9\n  | 10\n  | 11\n  | 12\n  | 13\n  | 14\n  | 15\n  | 16\n  | 17\n  | 18\n  | 19\n  | 20\n  | 21\n  | 22\n  | 23\n  | 24;\n\n/**\n * Data structure for rendering options in the TimePicker.\n */\nexport type TimePickerOption = {\n  /**\n   * The Date object associated with the option.\n   */\n  date: Date;\n\n  /**\n   * A unique identifier for the option.\n   */\n  key: string;\n\n  /**\n   * The display text for the option within the Combobox dropdown.\n   */\n  text: string;\n};\n\n/**\n * Error types returned by the `onValidationResult` callback.\n */\nexport type TimePickerErrorType = 'invalid-input' | 'out-of-bounds' | 'required-input';\n\nexport type TimeStringValidationResult = {\n  date: Date | null;\n  errorType?: TimePickerErrorType;\n};\n\nexport type TimePickerSlots = ComboboxSlots;\n\nexport type TimeSelectionEvents = SelectionEvents | React.FocusEvent<HTMLElement>;\nexport type TimeSelectionData = {\n  /**\n   * The Date object associated with the selected option. For freeform TimePicker it can also be the Date object parsed from the user input.\n   */\n  selectedTime: Date | null;\n  /**\n   * The display text for the selected option. For freeform TimePicker it can also be the value in user input.\n   */\n  selectedTimeText: string | undefined;\n  /**\n   * The error type for the selected option.\n   */\n  errorType: TimePickerErrorType | undefined;\n};\n\nexport type TimeFormatOptions = {\n  /**\n   * A string value indicating whether the 12-hour format (\"h11\", \"h12\") or the 24-hour format (\"h23\", \"h24\") should be used.\n   * - 'h11' and 'h23' start with hour 0 and go up to 11 and 23 respectively.\n   * - 'h12' and 'h24' start with hour 1 and go up to 12 and 24 respectively.\n   * @default undefined\n   */\n  hourCycle?: 'h11' | 'h12' | 'h23' | 'h24' | undefined;\n\n  /**\n   * If true, show seconds in the dropdown options and consider seconds for default validation purposes.\n   */\n  showSeconds?: boolean;\n};\n\n/**\n * TimePicker Props\n */\nexport type TimePickerProps = Omit<ComponentProps<Partial<ComboboxSlots>, 'input'>, 'children' | 'size'> &\n  Pick<\n    ComboboxProps,\n    | 'appearance'\n    | 'defaultOpen'\n    | 'defaultValue'\n    | 'inlinePopup'\n    | 'onOpenChange'\n    | 'open'\n    | 'placeholder'\n    | 'positioning'\n    | 'size'\n    | 'value'\n    | 'mountNode'\n    | 'freeform'\n  > &\n  TimeFormatOptions & {\n    /**\n     * Start hour (inclusive) for the time range, 0-24.\n     */\n    startHour?: Hour;\n\n    /**\n     * End hour (exclusive) for the time range, 0-24.\n     */\n    endHour?: Hour;\n\n    /**\n     * Time increment, in minutes, of the options in the dropdown.\n     */\n    increment?: number;\n\n    /**\n     * The date in which all dropdown options are based off of.\n     */\n    dateAnchor?: Date;\n\n    /**\n     * Currently selected time in the TimePicker.\n     */\n    selectedTime?: Date | null;\n\n    /**\n     * Default selected time in the TimePicker, for uncontrolled scenarios.\n     */\n    defaultSelectedTime?: Date;\n\n    /**\n     * Callback for when a time selection is made.\n     */\n    onTimeChange?: (event: TimeSelectionEvents, data: TimeSelectionData) => void;\n\n    /**\n     * Customizes the formatting of date strings displayed in dropdown options.\n     */\n    formatDateToTimeString?: (date: Date) => string;\n\n    /**\n     * In the freeform TimePicker, customizes the parsing from the input time string into a Date and provides custom validation.\n     */\n    parseTimeStringToDate?: (time: string | undefined) => TimeStringValidationResult;\n  };\n\n/**\n * State used in rendering TimePicker\n */\nexport type TimePickerState = ComboboxState &\n  Required<Pick<TimePickerProps, 'freeform' | 'parseTimeStringToDate'>> & {\n    /**\n     * Submitted text from the input field. It is used to determine if the input value has changed when user submit a new value on Enter or blur from input.\n     */\n    submittedText: string | undefined;\n  };\n"],"names":["React"],"mappings":"AAAA,YAAYA,WAAW,QAAQ"}

package/lib/components/TimePicker/index.js

@@ -0,0 +1,5 @@
+export * from './TimePicker';
+export * from './TimePicker.types';
+export * from './useTimePicker';
+export * from './useTimePickerStyles.styles';
+export { formatDateToTimeString } from './timeMath';

package/lib/components/TimePicker/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["index.ts"],"sourcesContent":["export * from './TimePicker';\nexport * from './TimePicker.types';\nexport * from './useTimePicker';\nexport * from './useTimePickerStyles.styles';\nexport { formatDateToTimeString } from './timeMath';\n"],"names":["formatDateToTimeString"],"mappings":"AAAA,cAAc,eAAe;AAC7B,cAAc,qBAAqB;AACnC,cAAc,kBAAkB;AAChC,cAAc,+BAA+B;AAC7C,SAASA,sBAAsB,QAAQ,aAAa"}

package/lib/components/TimePicker/timeMath.js

@@ -0,0 +1,169 @@
+function isValidDate(date) {
+    return !isNaN(date.getTime());
+}
+/**
+ * Converts a Date object to a string key.
+ */ export function dateToKey(date) {
+    if (!date) {
+        return '';
+    }
+    if (!isValidDate(date)) {
+        return 'invalid';
+    }
+    return date.toISOString();
+}
+/**
+ * Converts a string key back to a Date object.
+ * Returns undefined for keys that don't represent valid dates.
+ */ export function keyToDate(key) {
+    if (key === '' || key === 'invalid') {
+        return null;
+    }
+    const date = new Date(key);
+    return isValidDate(date) ? date : null;
+}
+/**
+ * Formats a Date object into a time string based on provided options.
+ *
+ * @param date - The Date object to be formatted.
+ * @param options - Formatting options. It has two properties:
+ *      1. hourCycle (default: undefined): Determines if the time format should be 12-hour or 24-hour.
+ *      2. showSeconds (default: false): Determines if the seconds should be included in the formatted string.
+ * @returns Formatted time string based on the given options.
+ *
+ * @example
+ * const date = new Date(2023, 9, 6, 23, 45, 12);
+ * 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
+ */ export function formatDateToTimeString(date, { hourCycle, showSeconds } = {}) {
+    return date.toLocaleTimeString(undefined, {
+        hour: 'numeric',
+        hourCycle,
+        minute: '2-digit',
+        second: showSeconds ? '2-digit' : undefined
+    });
+}
+/**
+ * Get the start date anchor based on the provided parameters.
+ * @example
+ * const date = new Date(2023, 9, 6); // October 6, 2023
+ * getStartAnchorDate(date, 5);       // Returns a date for October 6, 2023, 05:00:00
+ */ export function getDateStartAnchor(dateAnchor, startHour) {
+    const startDate = new Date(dateAnchor);
+    startDate.setHours(startHour, 0, 0, 0);
+    return startDate;
+}
+/**
+ * Get the end date anchor based on the provided parameters.
+ * @example
+ * const date = new Date(2023, 9, 6); // October 6, 2023
+ * getEndAnchorDate(date, 5, 10);     // Returns a date for October 6, 2023, 10:00:00
+ * getEndAnchorDate(date, 10, 5);     // Returns a date for October 7, 2023, 05:00:00 (next day due to hour conditions)
+ */ export function getDateEndAnchor(dateAnchor, startHour, endHour) {
+    const endDate = new Date(dateAnchor);
+    if (startHour > endHour || endHour === 24) {
+        endDate.setDate(endDate.getDate() + 1);
+    }
+    endDate.setHours(endHour === 24 ? 0 : endHour, 0, 0, 0);
+    return endDate;
+}
+/**
+ * Generates an array of Date objects between two given Date anchors.
+ *
+ * @param dateStartAnchor - The starting Date anchor.
+ * @param dateEndAnchor - The ending Date anchor.
+ * @param increment - The minute increment between each Date in the resulting array.
+ * @returns - An array of Date objects.
+ *
+ * @example
+ * const start = new Date(2023, 0, 1, 10, 0); // Jan 1, 2023 10:00:00 AM
+ * const end = new Date(2023, 0, 1, 11, 0);   // Jan 1, 2023 11:00:00 AM
+ * getTimesBetween(start, end, 15);      // Returns array with Dates [10:00, 10:15, 10:30, 10:45]
+ */ export function getTimesBetween(dateStartAnchor, dateEndAnchor, increment) {
+    if (increment <= 0) {
+        // eslint-disable-next-line no-console
+        console.error('Increment value should be a positive number.');
+        return [];
+    }
+    const result = [];
+    const startDate = new Date(dateStartAnchor);
+    while(startDate < dateEndAnchor){
+        result.push(new Date(startDate));
+        startDate.setMinutes(startDate.getMinutes() + increment);
+    }
+    return result;
+}
+const REGEX_SHOW_SECONDS_HOUR_12 = /^((1[0-2]|0?[0-9]):([0-5][0-9]):([0-5][0-9])\s([AaPp][Mm]))$/;
+const REGEX_HIDE_SECONDS_HOUR_12 = /^((1[0-2]|0?[0-9]):[0-5][0-9]\s([AaPp][Mm]))$/;
+const REGEX_SHOW_SECONDS_HOUR_24 = /^([0-1]?[0-9]|2[0-4]):[0-5][0-9]:[0-5][0-9]$/;
+const REGEX_HIDE_SECONDS_HOUR_24 = /^([0-1]?[0-9]|2[0-4]):[0-5][0-9]$/;
+/**
+ * Calculates a new date from the user-selected time string based on anchor dates.
+ * Returns an object containing a date if the provided time string is valid, and an optional string indicating the type of error.
+ *
+ * @param time - The time string to be parsed (e.g., "2:30 PM", "15:45:20").
+ * @param dateStartAnchor - The start anchor date.
+ * @param dateEndAnchor - The end anchor date.
+ * @param timeFormatOptions - format options for the provided time string.
+ * @returns An object with either a 'date' or an 'errorType'.
+ *
+ * @example
+ * Input: time="2:30 PM", dateStartAnchor=2023-10-06T12:00:00Z, dateEndAnchor=2023-10-07T12:00:00Z, options={hourCycle: 'h12', showSeconds: false}
+ * Output: { date: 2023-10-06T14:30:00Z }
+ *
+ * Input: time="25:30"
+ * Output: { errorType: 'invalid-input' }
+ *
+ * Input: time="1:30 AM", dateStartAnchor=2023-10-06T03:00:00Z, dateEndAnchor=2023-10-07T03:00:00Z, options={hourCycle: 'h12', showSeconds: false}
+ * Output: { date: 2023-10-07T01:30:00Z, errorType: 'out-of-bounds' }
+ */ export function getDateFromTimeString(time, dateStartAnchor, dateEndAnchor, timeFormatOptions) {
+    if (!time) {
+        return {
+            date: null,
+            errorType: 'required-input'
+        };
+    }
+    const { hourCycle, showSeconds } = timeFormatOptions;
+    const hour12 = hourCycle === 'h11' || hourCycle === 'h12';
+    // Determine the regex based on format
+    const regex = hour12 ? showSeconds ? REGEX_SHOW_SECONDS_HOUR_12 : REGEX_HIDE_SECONDS_HOUR_12 : showSeconds ? REGEX_SHOW_SECONDS_HOUR_24 : REGEX_HIDE_SECONDS_HOUR_24;
+    if (!regex.test(time)) {
+        return {
+            date: null,
+            errorType: 'invalid-input'
+        };
+    }
+    const timeParts = /^(\d\d?):(\d\d):?(\d\d)? ?([ap]m)?/i.exec(time);
+    if (!timeParts) {
+        return {
+            date: null,
+            errorType: 'invalid-input'
+        };
+    }
+    const [, selectedHours, minutes, seconds, amPm] = timeParts;
+    let hours = selectedHours;
+    // Adjust for 12-hour time format if needed
+    if (hour12 && amPm) {
+        if (amPm.toLowerCase() === 'pm' && +hours !== 12) {
+            hours = (+hours + 12).toString();
+        } else if (amPm.toLowerCase() === 'am' && +hours === 12) {
+            hours = '0';
+        }
+    }
+    const adjustedDate = new Date(dateStartAnchor);
+    adjustedDate.setHours(+hours, +minutes, seconds ? +seconds : 0);
+    // Adjust to the next day if the selected time is before the anchor time
+    if (adjustedDate < dateStartAnchor) {
+        adjustedDate.setDate(adjustedDate.getDate() + 1);
+    }
+    if (adjustedDate >= dateEndAnchor) {
+        return {
+            date: adjustedDate,
+            errorType: 'out-of-bounds'
+        };
+    }
+    return {
+        date: adjustedDate
+    };
+}

package/lib/components/TimePicker/timeMath.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["timeMath.ts"],"sourcesContent":["import type { TimeFormatOptions, TimeStringValidationResult } from './TimePicker.types';\n\nfunction isValidDate(date: Date): boolean {\n  return !isNaN(date.getTime());\n}\n\n/**\n * Converts a Date object to a string key.\n */\nexport function dateToKey(date: Date | null): string {\n  if (!date) {\n    return '';\n  }\n  if (!isValidDate(date)) {\n    return 'invalid';\n  }\n  return date.toISOString();\n}\n\n/**\n * Converts a string key back to a Date object.\n * Returns undefined for keys that don't represent valid dates.\n */\nexport function keyToDate(key: string): Date | null {\n  if (key === '' || key === 'invalid') {\n    return null;\n  }\n  const date = new Date(key);\n  return isValidDate(date) ? date : null;\n}\n\n/**\n * Formats a Date object into a time string based on provided options.\n *\n * @param date - The Date object to be formatted.\n * @param options - Formatting options. It has two properties:\n *      1. hourCycle (default: undefined): Determines if the time format should be 12-hour or 24-hour.\n *      2. showSeconds (default: false): Determines if the seconds should be included in the formatted string.\n * @returns Formatted time string based on the given options.\n *\n * @example\n * const date = new Date(2023, 9, 6, 23, 45, 12);\n * formatDateToTimeString(date);                         // Returns \"23:45\" in CET\n * formatDateToTimeString(date, \\{ showSeconds: true \\});  // Returns \"23:45:12\" in CET\n * formatDateToTimeString(date, \\{ hourCycle: 'h12', showSeconds: true \\}); // Returns \"11:45:12 PM\" in CET\n */\nexport function formatDateToTimeString(date: Date, { hourCycle, showSeconds }: TimeFormatOptions = {}): string {\n  return date.toLocaleTimeString(undefined, {\n    hour: 'numeric',\n    hourCycle,\n    minute: '2-digit',\n    second: showSeconds ? '2-digit' : undefined,\n  });\n}\n\n/**\n * Get the start date anchor based on the provided parameters.\n * @example\n * const date = new Date(2023, 9, 6); // October 6, 2023\n * getStartAnchorDate(date, 5);       // Returns a date for October 6, 2023, 05:00:00\n */\nexport function getDateStartAnchor(dateAnchor: Date, startHour: number): Date {\n  const startDate = new Date(dateAnchor);\n  startDate.setHours(startHour, 0, 0, 0);\n  return startDate;\n}\n\n/**\n * Get the end date anchor based on the provided parameters.\n * @example\n * const date = new Date(2023, 9, 6); // October 6, 2023\n * getEndAnchorDate(date, 5, 10);     // Returns a date for October 6, 2023, 10:00:00\n * getEndAnchorDate(date, 10, 5);     // Returns a date for October 7, 2023, 05:00:00 (next day due to hour conditions)\n */\nexport function getDateEndAnchor(dateAnchor: Date, startHour: number, endHour: number): Date {\n  const endDate = new Date(dateAnchor);\n  if (startHour > endHour || endHour === 24) {\n    endDate.setDate(endDate.getDate() + 1);\n  }\n  endDate.setHours(endHour === 24 ? 0 : endHour, 0, 0, 0);\n  return endDate;\n}\n\n/**\n * Generates an array of Date objects between two given Date anchors.\n *\n * @param dateStartAnchor - The starting Date anchor.\n * @param dateEndAnchor - The ending Date anchor.\n * @param increment - The minute increment between each Date in the resulting array.\n * @returns - An array of Date objects.\n *\n * @example\n * const start = new Date(2023, 0, 1, 10, 0); // Jan 1, 2023 10:00:00 AM\n * const end = new Date(2023, 0, 1, 11, 0);   // Jan 1, 2023 11:00:00 AM\n * getTimesBetween(start, end, 15);      // Returns array with Dates [10:00, 10:15, 10:30, 10:45]\n */\nexport function getTimesBetween(dateStartAnchor: Date, dateEndAnchor: Date, increment: number) {\n  if (increment <= 0) {\n    // eslint-disable-next-line no-console\n    console.error('Increment value should be a positive number.');\n    return [];\n  }\n\n  const result: Date[] = [];\n\n  const startDate = new Date(dateStartAnchor);\n  while (startDate < dateEndAnchor) {\n    result.push(new Date(startDate));\n    startDate.setMinutes(startDate.getMinutes() + increment);\n  }\n\n  return result;\n}\n\nconst REGEX_SHOW_SECONDS_HOUR_12 = /^((1[0-2]|0?[0-9]):([0-5][0-9]):([0-5][0-9])\\s([AaPp][Mm]))$/;\nconst REGEX_HIDE_SECONDS_HOUR_12 = /^((1[0-2]|0?[0-9]):[0-5][0-9]\\s([AaPp][Mm]))$/;\nconst REGEX_SHOW_SECONDS_HOUR_24 = /^([0-1]?[0-9]|2[0-4]):[0-5][0-9]:[0-5][0-9]$/;\nconst REGEX_HIDE_SECONDS_HOUR_24 = /^([0-1]?[0-9]|2[0-4]):[0-5][0-9]$/;\n\n/**\n * Calculates a new date from the user-selected time string based on anchor dates.\n * Returns an object containing a date if the provided time string is valid, and an optional string indicating the type of error.\n *\n * @param time - The time string to be parsed (e.g., \"2:30 PM\", \"15:45:20\").\n * @param dateStartAnchor - The start anchor date.\n * @param dateEndAnchor - The end anchor date.\n * @param timeFormatOptions - format options for the provided time string.\n * @returns An object with either a 'date' or an 'errorType'.\n *\n * @example\n * Input: time=\"2:30 PM\", dateStartAnchor=2023-10-06T12:00:00Z, dateEndAnchor=2023-10-07T12:00:00Z, options={hourCycle: 'h12', showSeconds: false}\n * Output: { date: 2023-10-06T14:30:00Z }\n *\n * Input: time=\"25:30\"\n * Output: { errorType: 'invalid-input' }\n *\n * Input: time=\"1:30 AM\", dateStartAnchor=2023-10-06T03:00:00Z, dateEndAnchor=2023-10-07T03:00:00Z, options={hourCycle: 'h12', showSeconds: false}\n * Output: { date: 2023-10-07T01:30:00Z, errorType: 'out-of-bounds' }\n */\nexport function getDateFromTimeString(\n  time: string | undefined,\n  dateStartAnchor: Date,\n  dateEndAnchor: Date,\n  timeFormatOptions: TimeFormatOptions,\n): TimeStringValidationResult {\n  if (!time) {\n    return { date: null, errorType: 'required-input' };\n  }\n\n  const { hourCycle, showSeconds } = timeFormatOptions;\n  const hour12 = hourCycle === 'h11' || hourCycle === 'h12';\n\n  // Determine the regex based on format\n  const regex = hour12\n    ? showSeconds\n      ? REGEX_SHOW_SECONDS_HOUR_12\n      : REGEX_HIDE_SECONDS_HOUR_12\n    : showSeconds\n    ? REGEX_SHOW_SECONDS_HOUR_24\n    : REGEX_HIDE_SECONDS_HOUR_24;\n\n  if (!regex.test(time)) {\n    return { date: null, errorType: 'invalid-input' };\n  }\n\n  const timeParts = /^(\\d\\d?):(\\d\\d):?(\\d\\d)? ?([ap]m)?/i.exec(time);\n  if (!timeParts) {\n    return { date: null, errorType: 'invalid-input' };\n  }\n\n  const [, selectedHours, minutes, seconds, amPm] = timeParts;\n  let hours = selectedHours;\n\n  // Adjust for 12-hour time format if needed\n  if (hour12 && amPm) {\n    if (amPm.toLowerCase() === 'pm' && +hours !== 12) {\n      hours = (+hours + 12).toString();\n    } else if (amPm.toLowerCase() === 'am' && +hours === 12) {\n      hours = '0';\n    }\n  }\n\n  const adjustedDate = new Date(dateStartAnchor);\n  adjustedDate.setHours(+hours, +minutes, seconds ? +seconds : 0);\n\n  // Adjust to the next day if the selected time is before the anchor time\n  if (adjustedDate < dateStartAnchor) {\n    adjustedDate.setDate(adjustedDate.getDate() + 1);\n  }\n\n  if (adjustedDate >= dateEndAnchor) {\n    return { date: adjustedDate, errorType: 'out-of-bounds' };\n  }\n\n  return { date: adjustedDate };\n}\n"],"names":["isValidDate","date","isNaN","getTime","dateToKey","toISOString","keyToDate","key","Date","formatDateToTimeString","hourCycle","showSeconds","toLocaleTimeString","undefined","hour","minute","second","getDateStartAnchor","dateAnchor","startHour","startDate","setHours","getDateEndAnchor","endHour","endDate","setDate","getDate","getTimesBetween","dateStartAnchor","dateEndAnchor","increment","console","error","result","push","setMinutes","getMinutes","REGEX_SHOW_SECONDS_HOUR_12","REGEX_HIDE_SECONDS_HOUR_12","REGEX_SHOW_SECONDS_HOUR_24","REGEX_HIDE_SECONDS_HOUR_24","getDateFromTimeString","time","timeFormatOptions","errorType","hour12","regex","test","timeParts","exec","selectedHours","minutes","seconds","amPm","hours","toLowerCase","toString","adjustedDate"],"mappings":"AAEA,SAASA,YAAYC,IAAU;IAC7B,OAAO,CAACC,MAAMD,KAAKE,OAAO;AAC5B;AAEA;;CAEC,GACD,OAAO,SAASC,UAAUH,IAAiB;IACzC,IAAI,CAACA,MAAM;QACT,OAAO;IACT;IACA,IAAI,CAACD,YAAYC,OAAO;QACtB,OAAO;IACT;IACA,OAAOA,KAAKI,WAAW;AACzB;AAEA;;;CAGC,GACD,OAAO,SAASC,UAAUC,GAAW;IACnC,IAAIA,QAAQ,MAAMA,QAAQ,WAAW;QACnC,OAAO;IACT;IACA,MAAMN,OAAO,IAAIO,KAAKD;IACtB,OAAOP,YAAYC,QAAQA,OAAO;AACpC;AAEA;;;;;;;;;;;;;;CAcC,GACD,OAAO,SAASQ,uBAAuBR,IAAU,EAAE,EAAES,SAAS,EAAEC,WAAW,EAAqB,GAAG,CAAC,CAAC;IACnG,OAAOV,KAAKW,kBAAkB,CAACC,WAAW;QACxCC,MAAM;QACNJ;QACAK,QAAQ;QACRC,QAAQL,cAAc,YAAYE;IACpC;AACF;AAEA;;;;;CAKC,GACD,OAAO,SAASI,mBAAmBC,UAAgB,EAAEC,SAAiB;IACpE,MAAMC,YAAY,IAAIZ,KAAKU;IAC3BE,UAAUC,QAAQ,CAACF,WAAW,GAAG,GAAG;IACpC,OAAOC;AACT;AAEA;;;;;;CAMC,GACD,OAAO,SAASE,iBAAiBJ,UAAgB,EAAEC,SAAiB,EAAEI,OAAe;IACnF,MAAMC,UAAU,IAAIhB,KAAKU;IACzB,IAAIC,YAAYI,WAAWA,YAAY,IAAI;QACzCC,QAAQC,OAAO,CAACD,QAAQE,OAAO,KAAK;IACtC;IACAF,QAAQH,QAAQ,CAACE,YAAY,KAAK,IAAIA,SAAS,GAAG,GAAG;IACrD,OAAOC;AACT;AAEA;;;;;;;;;;;;CAYC,GACD,OAAO,SAASG,gBAAgBC,eAAqB,EAAEC,aAAmB,EAAEC,SAAiB;IAC3F,IAAIA,aAAa,GAAG;QAClB,sCAAsC;QACtCC,QAAQC,KAAK,CAAC;QACd,OAAO,EAAE;IACX;IAEA,MAAMC,SAAiB,EAAE;IAEzB,MAAMb,YAAY,IAAIZ,KAAKoB;IAC3B,MAAOR,YAAYS,cAAe;QAChCI,OAAOC,IAAI,CAAC,IAAI1B,KAAKY;QACrBA,UAAUe,UAAU,CAACf,UAAUgB,UAAU,KAAKN;IAChD;IAEA,OAAOG;AACT;AAEA,MAAMI,6BAA6B;AACnC,MAAMC,6BAA6B;AACnC,MAAMC,6BAA6B;AACnC,MAAMC,6BAA6B;AAEnC;;;;;;;;;;;;;;;;;;;CAmBC,GACD,OAAO,SAASC,sBACdC,IAAwB,EACxBd,eAAqB,EACrBC,aAAmB,EACnBc,iBAAoC;IAEpC,IAAI,CAACD,MAAM;QACT,OAAO;YAAEzC,MAAM;YAAM2C,WAAW;QAAiB;IACnD;IAEA,MAAM,EAAElC,SAAS,EAAEC,WAAW,EAAE,GAAGgC;IACnC,MAAME,SAASnC,cAAc,SAASA,cAAc;IAEpD,sCAAsC;IACtC,MAAMoC,QAAQD,SACVlC,cACE0B,6BACAC,6BACF3B,cACA4B,6BACAC;IAEJ,IAAI,CAACM,MAAMC,IAAI,CAACL,OAAO;QACrB,OAAO;YAAEzC,MAAM;YAAM2C,WAAW;QAAgB;IAClD;IAEA,MAAMI,YAAY,sCAAsCC,IAAI,CAACP;IAC7D,IAAI,CAACM,WAAW;QACd,OAAO;YAAE/C,MAAM;YAAM2C,WAAW;QAAgB;IAClD;IAEA,MAAM,GAAGM,eAAeC,SAASC,SAASC,KAAK,GAAGL;IAClD,IAAIM,QAAQJ;IAEZ,2CAA2C;IAC3C,IAAIL,UAAUQ,MAAM;QAClB,IAAIA,KAAKE,WAAW,OAAO,QAAQ,CAACD,UAAU,IAAI;YAChDA,QAAQ,AAAC,CAAA,CAACA,QAAQ,EAAC,EAAGE,QAAQ;QAChC,OAAO,IAAIH,KAAKE,WAAW,OAAO,QAAQ,CAACD,UAAU,IAAI;YACvDA,QAAQ;QACV;IACF;IAEA,MAAMG,eAAe,IAAIjD,KAAKoB;IAC9B6B,aAAapC,QAAQ,CAAC,CAACiC,OAAO,CAACH,SAASC,UAAU,CAACA,UAAU;IAE7D,wEAAwE;IACxE,IAAIK,eAAe7B,iBAAiB;QAClC6B,aAAahC,OAAO,CAACgC,aAAa/B,OAAO,KAAK;IAChD;IAEA,IAAI+B,gBAAgB5B,eAAe;QACjC,OAAO;YAAE5B,MAAMwD;YAAcb,WAAW;QAAgB;IAC1D;IAEA,OAAO;QAAE3C,MAAMwD;IAAa;AAC9B"}