@digital-ai/dot-components 2.7.2 → 2.7.4

package/lib/components/auto-complete/AutoComplete.stories.d.ts

@@ -1,10 +1,11 @@
 import { ComponentMeta, Story } from '@storybook/react';
 import { AutoCompleteOption, AutoCompleteProps } from './AutoComplete';
 import { AutoCompleteWithRenderOption } from './Autocomplete.stories.data';
-declare const _default: ComponentMeta<(<T extends AutoCompleteOption>({ ListboxComponent, actionItem, ariaLabel, autoFocus, className, "data-testid": dataTestId, defaultValue, dense, disabled, disablePortal, endAdornmentTooltip, error, filterSelectedOptions, freesolo, group, helperText, inputId, inputRef, label, loading, maxHeight, multiple, onBlur, onChange, onClose, onInputChange, onOpen, open, options, persistentLabel, placeholder, readOnly, renderOption, renderTags, required, size, value, warning, }: AutoCompleteProps<T>) => JSX.Element)>;
+declare const _default: ComponentMeta<(<T extends AutoCompleteOption>({ ListboxComponent, actionItem, ariaLabel, autoFocus, className, "data-testid": dataTestId, defaultValue, dense, disabled, disablePortal, endAdornmentTooltip, error, filterSelectedOptions, freesolo, checkIfOptionDisabled, group, helperText, inputId, inputRef, label, loading, maxHeight, multiple, onBlur, onChange, onClose, onInputChange, onOpen, open, options, persistentLabel, placeholder, readOnly, renderOption, renderTags, required, size, value, warning, }: AutoCompleteProps<T>) => JSX.Element)>;
 export default _default;
 export declare const Default: any;
 export declare const WithActionItem: any;
+export declare const WithDisabledItems: any;
 export declare const WithCustomActionItem: Story<AutoCompleteProps>;
 export declare const WithAsyncLoad: Story<AutoCompleteProps>;
 declare type AutoCompleteWithRenderOptionProps = AutoCompleteProps<AutoCompleteWithRenderOption>;

package/lib/components/date-picker/DatePicker.d.ts

@@ -1,8 +1,9 @@
-import { FocusEvent, ReactNode } from 'react';
+import { FocusEvent, KeyboardEvent, ReactNode } from 'react';
 import { PickersDayProps } from '@mui/x-date-pickers';
 import { FieldChangeHandlerContext } from '@mui/x-date-pickers/internals';
 import { CommonProps } from '../CommonProps';
 import { DatePickerLocale } from './';
+import { DatePickerKeydownContext } from './utils/models';
 export declare const RectanglePickersDay: (pickersDayProps: PickersDayProps<unknown>) => JSX.Element;
 export interface DatePickerProps extends CommonProps {
     /** If `true`, the `input` element is focused during the first mount. */
@@ -57,6 +58,8 @@ export interface DatePickerProps extends CommonProps {
     onClose?: () => void;
     /** Callback fired when the error associated to the current value changes. */
     onError?: (error: string, value: string) => 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. */
@@ -74,7 +77,7 @@ export interface DatePickerProps extends CommonProps {
      * - ignored if `calendars` equals more than `1` on range pickers.
      */
     showDaysOutsideCurrentMonth?: boolean;
-    /** The selected value. Used when the component is controlled. */
+    /** The selected value. Used when the component is controlled. Date in ISO 8601 format, ie: YYYY-MM-DD  */
     value?: string;
 }
-export declare const DotDatePicker: ({ ariaLabel, autoFocus, className, closeOnSelect, "data-testid": dataTestId, defaultValue, disableOpenPicker, disablePast, disablePortal, disabled, displayWeekNumber, displayClearButton, error, fixedWeekNumber, focusInputOnPopperOpened, format, fullWidth, helperText, inputId, inputName, label, locale, maxDate, minDate, onAccept, onBlur, onChange, onClose, onError, onOpen, open, persistentLabel, readOnly, required, showDaysOutsideCurrentMonth, value, }: DatePickerProps) => JSX.Element;
+export declare const DotDatePicker: ({ ariaLabel, autoFocus, className, closeOnSelect, "data-testid": dataTestId, defaultValue, disableOpenPicker, disablePast, disablePortal, disabled, displayWeekNumber, displayClearButton, error, fixedWeekNumber, focusInputOnPopperOpened, format, fullWidth, helperText, inputId, inputName, label, locale, maxDate, minDate, onAccept, onBlur, onChange, onClose, onError, onKeyDown, onOpen, open, persistentLabel, readOnly, required, showDaysOutsideCurrentMonth, value, }: DatePickerProps) => JSX.Element;

package/lib/components/date-picker/DatePicker.stories.d.ts

@@ -1,6 +1,6 @@
 import { ComponentMeta, Story } from '@storybook/react';
 import { DatePickerProps } from './';
-declare const _default: ComponentMeta<({ ariaLabel, autoFocus, className, closeOnSelect, "data-testid": dataTestId, defaultValue, disableOpenPicker, disablePast, disablePortal, disabled, displayWeekNumber, displayClearButton, error, fixedWeekNumber, focusInputOnPopperOpened, format, fullWidth, helperText, inputId, inputName, label, locale, maxDate, minDate, onAccept, onBlur, onChange, onClose, onError, onOpen, open, persistentLabel, readOnly, required, showDaysOutsideCurrentMonth, value, }: DatePickerProps) => JSX.Element>;
+declare const _default: ComponentMeta<({ ariaLabel, autoFocus, className, closeOnSelect, "data-testid": dataTestId, defaultValue, disableOpenPicker, disablePast, disablePortal, disabled, displayWeekNumber, displayClearButton, error, fixedWeekNumber, focusInputOnPopperOpened, format, fullWidth, helperText, inputId, inputName, label, locale, maxDate, minDate, onAccept, onBlur, onChange, onClose, onError, onKeyDown, onOpen, open, persistentLabel, readOnly, required, showDaysOutsideCurrentMonth, value, }: DatePickerProps) => JSX.Element>;
 export default _default;
 export declare const Default: DatePickerProps;
 export declare const WithHelperText: any;
@@ -24,8 +24,4 @@ export declare const WithMinMaxDates: Story<DatePickerProps>;
 export declare const WithLocaleConfiguration: Story<DatePickerProps>;
 export declare const WithChangeOnBlur: Story<DatePickerProps>;
 export declare const WithOpenedPopperInControlledMode: Story<DatePickerProps>;
-export interface TaskDateViewContentProps {
-    date: string;
-}
-export declare const TaskDateViewContent: ({ date }: TaskDateViewContentProps) => JSX.Element;
 export declare const WithConditionalRendering: Story<DatePickerProps>;

package/lib/components/date-picker/index.d.ts

@@ -1,3 +1,5 @@
 export type { FieldChangeHandlerContext } from '@mui/x-date-pickers/internals';
 export type { DatePickerLocale } from './utils/models';
+export { DatePickerKeydownContext } from './utils/models';
+export { checkIfValidDate } from './utils/helpers';
 export * from './DatePicker';

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

@@ -0,0 +1,5 @@
+import { DatePickerKeydownContext } from './models';
+import { KeyboardEvent } from 'react';
+/** This returns a `boolean` indicating whether the Day.js object contains a valid date or not. */
+export declare const checkIfValidDate: (date: string, format?: string) => boolean;
+export declare const getContextEnumBasedOnTarget: (event: KeyboardEvent<HTMLElement>, inputElement: HTMLInputElement | null, contextEnum: DatePickerKeydownContext) => DatePickerKeydownContext;

package/lib/components/date-picker/utils/models.d.ts

@@ -36,3 +36,8 @@ export interface DatePickerLocale {
     weekdaysShort?: string[];
     yearStart?: number;
 }
+export declare enum DatePickerKeydownContext {
+    Input = 0,
+    PickerButton = 1,
+    Popper = 2
+}

package/lib/components/index.d.ts

@@ -96,7 +96,7 @@ export { DotPopper } from './popper';
 export { DotTruncateWithTooltip } from './truncate-with-tooltip';
 export { DotDraggableList } from './draggable-list';
 export { DotLinearProgress } from './linear-progress';
-export { DotDatePicker } from './date-picker';
+export { DatePickerKeydownContext, DotDatePicker, checkIfValidDate, } from './date-picker';
 export { Daytime, DotTimePicker, mockScrollIntoView } from './time-picker';
 export { DotClickAwayListener } from './click-away-listener';
 export { CreateUUID } from './createUUID';

package/lib/components/inline-edit/InlineEdit.d.ts

@@ -20,6 +20,8 @@ export interface InlineEditProps extends CommonProps {
     readOnly?: boolean;
     /** If true, when starting edit it will select all text in the input */
     selectTextOnEdit?: boolean;
+    /** If true and readOnly is false when component loads, start as editable */
+    startEditable?: boolean;
     /** tab order for the inline edit */
     tabIndex?: number;
     /** Tooltip text displayed on hover */
@@ -32,4 +34,4 @@ export interface InlineEditProps extends CommonProps {
 /**
  * @experimental This component is still in development
  */
-export declare const DotInlineEdit: ({ ariaLabel, bindings, charactersLimit, className, "data-testid": dataTestId, fullWidth, hideActionButtons, name, onChange, onEditStateChange, readOnly, selectTextOnEdit, tabIndex, tooltip, typography, value, }: InlineEditProps) => JSX.Element;
+export declare const DotInlineEdit: ({ ariaLabel, bindings, charactersLimit, className, "data-testid": dataTestId, fullWidth, hideActionButtons, name, onChange, onEditStateChange, readOnly, selectTextOnEdit, startEditable, tabIndex, tooltip, typography, value, }: InlineEditProps) => JSX.Element;

package/lib/components/inline-edit/InlineEdit.stories.d.ts

@@ -1,6 +1,6 @@
 import { ComponentMeta, Story } from '@storybook/react';
 import { InlineEditProps } from './InlineEdit';
-declare const _default: ComponentMeta<({ ariaLabel, bindings, charactersLimit, className, "data-testid": dataTestId, fullWidth, hideActionButtons, name, onChange, onEditStateChange, readOnly, selectTextOnEdit, tabIndex, tooltip, typography, value, }: InlineEditProps) => JSX.Element>;
+declare const _default: ComponentMeta<({ ariaLabel, bindings, charactersLimit, className, "data-testid": dataTestId, fullWidth, hideActionButtons, name, onChange, onEditStateChange, readOnly, selectTextOnEdit, startEditable, tabIndex, tooltip, typography, value, }: InlineEditProps) => JSX.Element>;
 export default _default;
 export declare const Default: Story<InlineEditProps>;
 export declare const WithCharactersLimit: any;
@@ -10,6 +10,7 @@ export declare const WithoutActionButtons: any;
 export declare const WithTooltip: any;
 export declare const WithSaveError: Story<InlineEditProps>;
 export declare const WithCustomTypography: Story<InlineEditProps>;
+export declare const WithStartEditable: any;
 export declare const WithSingleBinding: any;
 export declare const WithMultipleBindings: Story<InlineEditProps>;
 export declare const WithSelectOnEdit: any;

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.2",
+  "version": "2.7.4",
   "private": false,
   "license": "SEE LICENSE IN <LICENSE.md>",
   "contributors": [