@digital-ai/dot-components 2.7.3 → 2.7.4

package/lib/components/time-picker/TimePicker.d.ts

@@ -1,6 +1,7 @@
-import { FocusEvent, ReactNode } from 'react';
+import { FocusEvent, KeyboardEvent, ReactNode } from 'react';
 import { FieldChangeHandlerContext } from '@mui/x-date-pickers/internals';
 import { CommonProps } from '../CommonProps';
+import { DatePickerKeydownContext } from '../date-picker';
 export interface TimePickerProps extends CommonProps {
     /** 12h/24h view for hour selection clock. Default is `true`. */
     ampm?: boolean;
@@ -8,6 +9,8 @@ export interface TimePickerProps extends CommonProps {
     autoFocus?: boolean;
     /** The default value. Use when the component is not controlled. */
     defaultValue?: string;
+    /** If `true`, popper's paper will not be wrapped with ClickAwayListener. */
+    disableClickAwayListener?: boolean;
     /** If `true`, the open picker button will not be rendered (renders only the field). */
     disableOpenPicker?: boolean;
     /** If `true`, the picker and text field are disabled. */
@@ -31,10 +34,14 @@ export interface TimePickerProps extends CommonProps {
     onAccept?: (value: string) => void;
     /** A function that should be executed when the input loses focus */
     onBlur?: (event: FocusEvent<HTMLInputElement | HTMLTextAreaElement, Element>) => void;
+    /** Callback fired when the `Cancel` button is clicked. */
+    onCancel?: () => void;
     /** Callback fired when the value changes. */
     onChange?: (value: string, context: FieldChangeHandlerContext<string>) => void;
     /** Callback fired when the popup requests to be closed. Use in controlled mode (see `open`). */
     onClose?: () => void;
+    /** A function that should be executed when key is pressed from input or popper */
+    onKeyDown?: (e: KeyboardEvent<HTMLElement>, contextEnum: DatePickerKeydownContext) => void;
     /** Callback fired when the popup requests to be opened. Use in controlled mode (see `open`). */
     onOpen?: () => void;
     /** Control the popup or dialog open state. */
@@ -45,10 +52,10 @@ export interface TimePickerProps extends CommonProps {
     readOnly?: boolean;
     /** If true, the label is displayed as required and the input element will be required. */
     required?: boolean;
-    /** The selected value. Used when the component is controlled. */
+    /** The selected value. Used when the component is controlled.  Time in ISO 8601 format, ie: HH:mm */
     value?: string;
 }
-export declare const DEFAULT_PICKER_TIME_FORMAT = "hh:mm";
-export declare const DEFAULT_TIME_FORMAT = "hh:mm A";
+export declare const DEFAULT_PICKER_TIME_FORMAT = "HH:mm";
+export declare const DEFAULT_TIME_FORMAT = "HH:mm";
 export declare const DEFAULT_TIME = "01:00";
-export declare const DotTimePicker: ({ ampm, ariaLabel, autoFocus, className, "data-testid": dataTestId, defaultValue, disableOpenPicker, disabled, error, format, fullWidth, helperText, hideActionButtons, inputId, inputName, label, onAccept, onBlur, onChange, onClose, onOpen, open, persistentLabel, readOnly, required, value, }: TimePickerProps) => JSX.Element;
+export declare const DotTimePicker: ({ ampm, ariaLabel, autoFocus, className, "data-testid": dataTestId, defaultValue, disableOpenPicker, disableClickAwayListener, disabled, error, format, fullWidth, helperText, hideActionButtons, inputId, inputName, label, onAccept, onBlur, onCancel, onChange, onClose, onKeyDown, onOpen, open, persistentLabel, readOnly, required, value, }: TimePickerProps) => JSX.Element;

package/lib/components/time-picker/TimePicker.stories.d.ts

@@ -1,6 +1,6 @@
 import { ComponentMeta, Story } from '@storybook/react';
 import { TimePickerProps } from './';
-declare const _default: ComponentMeta<({ ampm, ariaLabel, autoFocus, className, "data-testid": dataTestId, defaultValue, disableOpenPicker, disabled, error, format, fullWidth, helperText, hideActionButtons, inputId, inputName, label, onAccept, onBlur, onChange, onClose, onOpen, open, persistentLabel, readOnly, required, value, }: TimePickerProps) => JSX.Element>;
+declare const _default: ComponentMeta<({ ampm, ariaLabel, autoFocus, className, "data-testid": dataTestId, defaultValue, disableOpenPicker, disableClickAwayListener, disabled, error, format, fullWidth, helperText, hideActionButtons, inputId, inputName, label, onAccept, onBlur, onCancel, onChange, onClose, onKeyDown, onOpen, open, persistentLabel, readOnly, required, value, }: TimePickerProps) => JSX.Element>;
 export default _default;
 export declare const Default: TimePickerProps;
 export declare const WithAutoFocus: any;
@@ -10,7 +10,7 @@ export declare const WithError: any;
 export declare const WithCustomTimeFormat: any;
 export declare const WithFullWidth: any;
 export declare const WithPersistentLabel: any;
-export declare const With24HourFormat: any;
+export declare const With12HourFormat: any;
 export declare const WithReadOnly: any;
 export declare const WithHelperText: any;
 export declare const WithRequiredOption: any;
@@ -21,3 +21,4 @@ export declare const WithControlledMode: Story<TimePickerProps>;
 export declare const WithHourFormatPicker: Story<TimePickerProps>;
 export declare const WithOutsideTimeSetter: Story<TimePickerProps>;
 export declare const WithChangeOnBlur: Story<TimePickerProps>;
+export declare const WithConditionalRendering: Story<TimePickerProps>;

package/lib/components/time-picker/TimePicker.stories.styles.d.ts

@@ -2,7 +2,9 @@ export declare const timePickerWithControlledModeClassName = "dot-time-picker-wi
 export declare const timePickerWithHourFormatPickerClassName = "dot-time-picker-with-hour-format-picker";
 export declare const timePickerWithOutsideTimeSetterClassName = "dot-time-picker-with-outside-time-setter";
 export declare const timePickerWithBlurClassName = "dot-time-picker-with-blur";
+export declare const timePickerWithConditionalRenderingClassName = "dot-date-picker-with-conditional-rendering";
 export declare const StyledTimePickerWithControlledMode: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const StyledTimePickerWithHourFormatPicker: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const StyledTimePickerWithOutsideTimeSetter: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const StyledTimePickerWithChangeOnBlur: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const StyledTimePickerWithConditionalRendering: import("styled-components").StyledComponent<"div", any, {}, never>;

package/lib/components/time-picker/utils/helpers.d.ts

@@ -14,3 +14,5 @@ export declare const getPopperButtonTabIndex: (index: number, isSelected: boolea
 export declare const getDaytimeButtonTabIndex: (currentDaytime: Daytime, selectedDaytime?: string) => number | undefined;
 export declare const getSelectedDaytime: (dateTime?: Dayjs) => string;
 export declare const getTimePickerButtonType: (selectedDaytime: string) => ButtonType;
+export declare const checkIfOpenPropDefined: (open: boolean | null | undefined) => boolean;
+export declare const getDaytimeButtonType: (daytimeSelected: string) => "primary" | "text";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@digital-ai/dot-components",
-  "version": "2.7.3",
+  "version": "2.7.4",
   "private": false,
   "license": "SEE LICENSE IN <LICENSE.md>",
   "contributors": [