@digital-ai/dot-components 2.5.5 → 2.6.1

package/lib/components/index.d.ts

@@ -34,6 +34,7 @@ export type { progressColorOptions, progressVariantOptions, ProgressProps, } fro
 export type { FileItemProps, FileUploadError, FileUploadProps, ListItemFile, MappedFile, MappedListItemFile, } from './file-upload';
 export type { LinearProgressColor, LinearProgressProps, LinearProgressVariant, } from './linear-progress';
 export type { DatePickerLocale, DatePickerProps, FieldChangeHandlerContext, } from './date-picker';
+export type { TimePickerProps } from './time-picker';
 export { DotAccordion } from './accordion/Accordion';
 export { DotActionToolbar } from './action-toolbar/ActionToolbar';
 export { DotAlertBanner } from './alert-banner/AlertBanner';
@@ -81,6 +82,7 @@ export { DotSidebar } from './sidebar/Sidebar';
 export { DotSkeleton } from './skeleton/Skeleton';
 export { DotSnackbar, DotSnackbarContainer, DotSnackbarProvider, useDotSnackbarContext, } from './snackbar';
 export { DotSplitButton } from './split-button/SplitButton';
+export { DotStepper } from './stepper/Stepper';
 export { DotProgressButton } from './progress-button/ProgressButton';
 export { DotSwitch } from './switch';
 export { DotHeaderRow, DotTable, DotTablePagination, DotTableActions, DotTableAction, } from './table';
@@ -94,4 +96,5 @@ export { DotTruncateWithTooltip } from './truncate-with-tooltip';
 export { DotDraggableList } from './draggable-list';
 export { DotLinearProgress } from './linear-progress';
 export { DotDatePicker } from './date-picker';
+export { Daytime, DotTimePicker, mockScrollIntoView } from './time-picker';
 export { CreateUUID } from './createUUID';

package/lib/components/input-form-fields/common.styles.d.ts

@@ -1,3 +1,4 @@
 import { Theme } from '@mui/material';
 export declare const formHelperTextRootStyles: (theme: Theme) => import("styled-components").FlattenSimpleInterpolation;
 export declare const adornmentIconStyles: () => import("styled-components").FlattenSimpleInterpolation;
+export declare const pickerInputStyles: (theme: Theme) => import("styled-components").FlattenSimpleInterpolation;

package/lib/components/sidebar/Sidebar.stories.d.ts

@@ -2,7 +2,7 @@ import { ComponentMeta, Story } from '@storybook/react';
 import { SidebarProps } from './Sidebar';
 declare const _default: ComponentMeta<({ appLogo, appLogoSmall, ariaLabel, backItem, brandDesc, children, className, collapsable, "data-testid": dataTestId, displayAppLogo, displayBrand, goBack, navItems, nestedListType, onCollapseChange, open, title, titleAvatarProps, width, }: SidebarProps) => JSX.Element>;
 export default _default;
-export declare const Default: Story<SidebarProps>;
-export declare const WithReactRouter: Story<SidebarProps>;
-export declare const WithTooltipsWhenCollapsed: Story<SidebarProps>;
-export declare const WithBackItem: Story<SidebarProps>;
+export declare const Default: Story;
+export declare const WithReactRouter: Story;
+export declare const WithTooltipsWhenCollapsed: Story;
+export declare const WithBackItem: Story;

package/lib/components/sidebar/Sidebar.stories.data.d.ts

@@ -2,7 +2,7 @@ import { MouseEvent } from 'react';
 import { ListItemProps } from '../list/utils/models';
 export declare const childElement: JSX.Element;
 export declare const getNavigationItems: (isSelected: (key: number) => boolean, handleClick: (key: number) => void) => ({
-    startIconId: string;
+    startIcon: JSX.Element;
     onClick: import("@storybook/addon-actions").HandlerFunction;
     items: ({
         text: string;
@@ -24,7 +24,6 @@ export declare const getNavigationItems: (isSelected: (key: number) => boolean,
         selected?: undefined;
     })[];
     text: string;
-    startIcon?: undefined;
     endIconId?: undefined;
     selected?: undefined;
     divider?: undefined;
@@ -44,7 +43,6 @@ export declare const getNavigationItems: (isSelected: (key: number) => boolean,
     })[];
     startIcon: JSX.Element;
     text: string;
-    startIconId?: undefined;
     onClick?: undefined;
     endIconId?: undefined;
     selected?: undefined;
@@ -55,16 +53,14 @@ export declare const getNavigationItems: (isSelected: (key: number) => boolean,
     onClick: (_event: MouseEvent) => void;
     selected: boolean;
     text: string;
-    startIconId?: undefined;
     items?: undefined;
     divider?: undefined;
 } | {
     text: string;
     divider: boolean;
-    startIconId?: undefined;
+    startIcon?: undefined;
     onClick?: undefined;
     items?: undefined;
-    startIcon?: undefined;
     endIconId?: undefined;
     selected?: undefined;
 } | {
@@ -72,17 +68,15 @@ export declare const getNavigationItems: (isSelected: (key: number) => boolean,
     onClick: (_event: MouseEvent) => void;
     selected: boolean;
     text: string;
-    startIconId?: undefined;
     items?: undefined;
     endIconId?: undefined;
     divider?: undefined;
 } | {
     divider: boolean;
-    startIconId?: undefined;
+    startIcon?: undefined;
     onClick?: undefined;
     items?: undefined;
     text?: undefined;
-    startIcon?: undefined;
     endIconId?: undefined;
     selected?: undefined;
 })[];

package/lib/components/stepper/Stepper.d.ts

@@ -0,0 +1,60 @@
+import { MouseEvent, KeyboardEvent, ReactNode } from 'react';
+import { CommonProps } from '../CommonProps';
+import { CssCellProps } from '../css-grid/CssCell';
+export declare const defaultCellProps: CssCellProps;
+export declare type StepperOrientation = 'horizontal' | 'vertical';
+export declare type StepsPosition = 'left' | 'right';
+export interface StepProps extends CommonProps {
+    /** if set to `true` the step will display a checkmark icon */
+    completed?: boolean;
+    /** will be displayed in the right-hand side of the step */
+    content?: ReactNode;
+    /** will be displayed below the label of the step */
+    description?: ReactNode;
+    /** if set to `true` the step will be completely disabled */
+    disabled?: boolean;
+    /** if set to `true` the step will display a error icon and color */
+    error?: boolean;
+    /** if set to `true`, content will take half of the width, otherwise it takes full width by default */
+    halfWidthContent?: boolean;
+    /** if specified, the icon will be used for the step instead of the default icon */
+    iconId?: string;
+    /** order of the step in the list */
+    id: number;
+    /** determines if the step is currently in progress */
+    inProgress?: boolean;
+    /** displays the step title */
+    label: string;
+    /** function that is called when the step is clicked */
+    onClick?: () => void;
+    /** callback function that is called when the step is completed */
+    onComplete?: () => void;
+    onError?: (isValid: boolean) => void;
+}
+export interface StepperProps extends CommonProps {
+    /** determines the `id` of the step which is active */
+    activeStep?: number;
+    /** final content displayed after the last step is completed */
+    finalContent?: ReactNode;
+    /** initial content displayed before any step is active, ie when `activeStep` is 0 */
+    initialContent?: ReactNode;
+    /** if passed, will overwrite the default "next" button text */
+    nextButtonText?: string;
+    /** if set to `true`, the "next" button will be disabled */
+    nextStepDisabled?: boolean;
+    /** function that is called if the "previous" button is clicked */
+    onBack?: () => void;
+    /** function that is called if the "cancel" button is clicked */
+    onCancel?: (event: MouseEvent<Element> | KeyboardEvent<Element>) => void;
+    /** function that is called when all steps are finished and the "submit" button is clicked */
+    onSubmit?: () => void;
+    /** orientation of the stepper */
+    orientation?: StepperOrientation;
+    /** array of steps to be displayed */
+    steps: StepProps[];
+    /** determines where to display the array of steps */
+    stepsPosition?: StepsPosition;
+    /** if passed, will overwrite the default "submit" button text */
+    submitButtonText?: string;
+}
+export declare const DotStepper: ({ activeStep, ariaLabel, className, "data-testid": dataTestId, finalContent, initialContent, nextButtonText, nextStepDisabled, onBack, onCancel, onSubmit, orientation, steps, stepsPosition, submitButtonText, }: StepperProps) => JSX.Element;

package/lib/components/stepper/Stepper.stories.d.ts

@@ -0,0 +1,10 @@
+import { ComponentMeta, Story } from '@storybook/react';
+import { StepperProps } from './Stepper';
+declare const _default: ComponentMeta<({ activeStep, ariaLabel, className, "data-testid": dataTestId, finalContent, initialContent, nextButtonText, nextStepDisabled, onBack, onCancel, onSubmit, orientation, steps, stepsPosition, submitButtonText, }: StepperProps) => JSX.Element>;
+export default _default;
+export declare const Default: Story<StepperProps>;
+export declare const WithStepDescription: Story<StepperProps>;
+export declare const WithHorizontalOrientation: Story<StepperProps>;
+export declare const WithErrorStep: Story<StepperProps>;
+export declare const WithInitialAndFinalContent: Story<StepperProps>;
+export declare const WithStepperListOnRightSide: Story<StepperProps>;

package/lib/components/stepper/Stepper.stories.data.d.ts

@@ -0,0 +1,80 @@
+export declare const demoSteps: ({
+    content: string;
+    completed: boolean;
+    iconId: string;
+    id: number;
+    label: string;
+    halfWidthContent?: undefined;
+    inProgress?: undefined;
+} | {
+    content: JSX.Element;
+    halfWidthContent: boolean;
+    id: number;
+    inProgress: boolean;
+    label: string;
+    completed?: undefined;
+    iconId?: undefined;
+} | {
+    content: JSX.Element;
+    id: number;
+    label: string;
+    completed?: undefined;
+    iconId?: undefined;
+    halfWidthContent?: undefined;
+    inProgress?: undefined;
+})[];
+export declare const withErrorStep: ({
+    content: string;
+    completed: boolean;
+    iconId: string;
+    id: number;
+    label: string;
+    halfWidthContent?: undefined;
+    inProgress?: undefined;
+} | {
+    content: JSX.Element;
+    halfWidthContent: boolean;
+    id: number;
+    inProgress: boolean;
+    label: string;
+    completed?: undefined;
+    iconId?: undefined;
+} | {
+    content: JSX.Element;
+    id: number;
+    label: string;
+    completed?: undefined;
+    iconId?: undefined;
+    halfWidthContent?: undefined;
+    inProgress?: undefined;
+} | {
+    content: string;
+    error: boolean;
+    id: number;
+    label: string;
+})[];
+export declare const withStepDescription: ({
+    content: string;
+    description: string;
+    completed: boolean;
+    iconId: string;
+    id: number;
+    label: string;
+    disabled?: undefined;
+} | {
+    content: JSX.Element;
+    description: string;
+    id: number;
+    label: string;
+    completed?: undefined;
+    iconId?: undefined;
+    disabled?: undefined;
+} | {
+    content: JSX.Element;
+    description: JSX.Element;
+    disabled: boolean;
+    id: number;
+    label: string;
+    completed?: undefined;
+    iconId?: undefined;
+})[];

package/lib/components/stepper/Stepper.styles.d.ts

@@ -0,0 +1,11 @@
+export declare const rootClassName = "dot-stepper";
+export declare const stepListClassName = "dot-stepper-list";
+export declare const contentClassName = "dot-stepper-content";
+export declare const StyledStepper: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const StepContentWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const StepDescription: import("styled-components").StyledComponent<({ ariaLabel, className, "data-testid": dataTestId, children, component, noMarginBottom, noWrap, variant, }: import("../typography/Typography").TypographyProps) => JSX.Element, any, {}, never>;
+interface StyledStepActionsContainerProps {
+    displayCancelButton?: boolean;
+}
+export declare const StepActionsContainer: import("styled-components").StyledComponent<"div", any, StyledStepActionsContainerProps, never>;
+export {};

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

@@ -0,0 +1,48 @@
+import { ReactNode } from 'react';
+import { FieldChangeHandlerContext } from '@mui/x-date-pickers/internals';
+import { CommonProps } from '../CommonProps';
+export interface TimePickerProps extends CommonProps {
+    /** 12h/24h view for hour selection clock. Default is `true`. */
+    ampm?: boolean;
+    /** If `true`, the `input` element is focused during the first mount. */
+    autoFocus?: 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. */
+    disabled?: boolean;
+    /** If true, the label will be displayed in an error state. */
+    error?: boolean;
+    /** Format of the time when rendered in the input(s). Defaults to localized format based on the used `views`. */
+    format?: string;
+    /** If true, the input will take up the full width of its container */
+    fullWidth?: boolean;
+    /** The helper text content. */
+    helperText?: ReactNode;
+    hideActionButtons?: boolean;
+    /** Identifies the input element and also used to create label "for" and helper text id attribute */
+    inputId: string;
+    /** The name of input element */
+    inputName?: string;
+    /** The label content. */
+    label?: string;
+    /** 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;
+    /** Callback fired when the popup requests to be opened. Use in controlled mode (see `open`). */
+    onOpen?: () => void;
+    /** Control the popup or dialog open state. */
+    open?: boolean;
+    /** If true, the label will be persistently displayed outside the field */
+    persistentLabel?: boolean;
+    /** If true, the input will be read-only. */
+    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. */
+    value?: string;
+}
+export declare const DEFAULT_PICKER_TIME_FORMAT = "hh:mm";
+export declare const DEFAULT_TIME_FORMAT = "hh:mm A";
+export declare const DEFAULT_TIME = "01:00";
+export declare const DotTimePicker: ({ ampm, ariaLabel, autoFocus, className, "data-testid": dataTestId, disableOpenPicker, disabled, error, format, fullWidth, helperText, hideActionButtons, inputId, inputName, label, onChange, onClose, onOpen, open, persistentLabel, readOnly, required, value, }: TimePickerProps) => JSX.Element;

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

@@ -0,0 +1,20 @@
+import { ComponentMeta, Story } from '@storybook/react';
+import { TimePickerProps } from './';
+declare const _default: ComponentMeta<({ ampm, ariaLabel, autoFocus, className, "data-testid": dataTestId, disableOpenPicker, disabled, error, format, fullWidth, helperText, hideActionButtons, inputId, inputName, label, onChange, onClose, onOpen, open, persistentLabel, readOnly, required, value, }: TimePickerProps) => JSX.Element>;
+export default _default;
+export declare const Default: TimePickerProps;
+export declare const WithAutoFocus: any;
+export declare const WithDisableOpenPicker: any;
+export declare const WithDisabledOption: any;
+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 WithReadOnly: any;
+export declare const WithHelperText: any;
+export declare const WithRequiredOption: any;
+export declare const WithOpenedTimePopper: any;
+export declare const WithControlledMode: Story<TimePickerProps>;
+export declare const WithHourFormatPicker: Story<TimePickerProps>;
+export declare const WithOutsideTimeSetter: Story<TimePickerProps>;

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

@@ -0,0 +1,6 @@
+export declare const timePickerWithControlledModeClassName = "dot-time-picker-with-controlled-mode";
+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 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>;

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

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+export declare const rootClassName = "dot-time-picker";
+export declare const containerClassName = "dot-time-picker-container";
+export declare const StyledTimePickerContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const StyledTimePicker: import("styled-components").StyledComponent<(<TDate>(props: import("@mui/x-date-pickers").TimePickerProps<TDate> & import("react").RefAttributes<HTMLDivElement>) => JSX.Element) & {
+    propTypes?: any;
+}, any, {}, never>;

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

@@ -0,0 +1,3 @@
+export { Daytime } from './utils/models';
+export { mockScrollIntoView } from '../../testing-utils/scroll-into-view-mock';
+export * from './TimePicker';

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

@@ -0,0 +1,11 @@
+import dayjs, { Dayjs } from 'dayjs';
+import { Daytime } from './models';
+export declare const getDayjsUtcDate: (value: string, timeFormat?: string) => dayjs.Dayjs;
+export declare const createNumbersArray: (length: number, offset?: number) => number[];
+export declare const getHoursForTimePicker: (hasDaytimeSelection: boolean) => number[];
+export declare const getMinutesForTimePicker: () => number[];
+export declare const checkIfAm: (currentTime: Dayjs) => boolean;
+export declare const calculateTimeForHourSelection: (is12hourFormat: boolean, selectedHour: number, currentTime: Dayjs) => Dayjs;
+export declare const calculateTimeForDaytimeSelection: (currentTime: Dayjs, selectedDaytime: Daytime) => Dayjs;
+export declare const calculateHourBasedOnTimeFormat: (time: Dayjs, is12hourFormat: boolean) => number;
+export declare const getSelectedHourButtonIndex: (selectedHour: number, is12HourFormat: boolean) => number;

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

@@ -0,0 +1,4 @@
+export declare enum Daytime {
+    AM = "AM",
+    PM = "PM"
+}

package/lib/testing-utils/intersection-observer-mock.d.ts

@@ -0,0 +1 @@
+export declare const mockIntersectionObserver: () => void;

package/lib/testing-utils/scroll-into-view-mock.d.ts

@@ -0,0 +1 @@
+export declare const mockScrollIntoView: (scrollIntoViewMock: typeof jest.fn) => void;

package/package.json

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