@digital-ai/dot-components 2.5.2 → 2.5.4

package/lib/components/app-switcher/utils/helpers.d.ts

@@ -10,7 +10,7 @@ export declare const daiAppsHeaderMenuItem: (count?: number) => {
     children: JSX.Element;
     key: string;
 };
-export declare const sectionHeaderMenuItem: (title: string, count: number, showEmpty?: boolean) => {
+export declare const sectionHeaderMenuItem: (title: string, count: number, showEmpty?: boolean, showCount?: boolean) => {
     children: JSX.Element;
     key: string;
 };
@@ -19,7 +19,7 @@ export declare const createTopLevelMenuItem: (url: string, logo: string, title:
 export declare const createAppTypeLabel: (appTypeName: string, logo: string, appProps: MenuItemProps[]) => JSX.Element;
 export declare const getInstanceStateText: (application: {
     instance_state?: number;
-}) => "Production instance" | "Non-production instance";
+}) => "Production" | "Non-production";
 export declare const sortRecentAppInstancesFn: (a: RecentAppInstance, b: RecentAppInstance) => number;
 export declare const sortAppInstancesFn: (a: Partial<ApplicationModel>, b: Partial<ApplicationModel>) => number;
 export declare const RECENT_INSTANCES_KEY = "dot-app-switcher-recent-app-instances";

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

@@ -0,0 +1,68 @@
+import { 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 './';
+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. */
+    autoFocus?: boolean;
+    /** If `true`, the popover or modal will close after submitting the full date. */
+    closeOnSelect?: boolean;
+    /** If `true`, the open picker button will not be rendered (renders only the field). */
+    disableOpenPicker?: boolean;
+    /** If `true`, disable values before the current date for date components, time for time components and both for date time components. */
+    disablePast?: boolean;
+    /** If `true`, the picker and text field are disabled. */
+    disabled?: boolean;
+    /** If `true`, 'Clear' button will be displayed in the calendar popper. `True` by default. */
+    displayClearButton?: boolean;
+    /** If `true`, the week number will be display in the calendar. */
+    displayWeekNumber?: boolean;
+    /** If true, the label will be displayed in an error state. */
+    error?: boolean;
+    /** Calendar will show more weeks in order to match this value. Put it to 6 for having fix number of week in Gregorian calendars */
+    fixedWeekNumber?: number;
+    /** Format of the date 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;
+    /** 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;
+    /** Locale for the date library you are using */
+    locale?: DatePickerLocale;
+    /** Callback fired when the value is accepted. */
+    onAccept?: (value: string) => 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;
+    /** Callback fired when the error associated to the current value changes. */
+    onError?: (error: string, value: string) => 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;
+    /**
+     * If `true`, days outside the current month are rendered:
+     * - if `fixedWeekNumber` is defined, renders days to have the weeks requested.
+     * - if `fixedWeekNumber` is not defined, renders day to fill the first and last week of the current month.
+     * - ignored if `calendars` equals more than `1` on range pickers.
+     */
+    showDaysOutsideCurrentMonth?: boolean;
+    /** The selected value. Used when the component is controlled. */
+    value?: string;
+}
+export declare const DotDatePicker: ({ ariaLabel, autoFocus, className, closeOnSelect, "data-testid": dataTestId, disableOpenPicker, disablePast, disabled, displayWeekNumber, displayClearButton, error, fixedWeekNumber, format, fullWidth, helperText, inputId, inputName, label, locale, onAccept, onChange, onClose, onError, onOpen, open, persistentLabel, readOnly, required, showDaysOutsideCurrentMonth, value, }: DatePickerProps) => JSX.Element;

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

@@ -0,0 +1,20 @@
+import { ComponentMeta, Story } from '@storybook/react';
+import { DatePickerProps } from './';
+declare const _default: ComponentMeta<({ ariaLabel, autoFocus, className, closeOnSelect, "data-testid": dataTestId, disableOpenPicker, disablePast, disabled, displayWeekNumber, displayClearButton, error, fixedWeekNumber, format, fullWidth, helperText, inputId, inputName, label, locale, onAccept, onChange, onClose, onError, onOpen, open, persistentLabel, readOnly, required, showDaysOutsideCurrentMonth, value, }: DatePickerProps) => JSX.Element>;
+export default _default;
+export declare const Default: DatePickerProps;
+export declare const WithHelperText: any;
+export declare const WithError: any;
+export declare const WithPersistentLabel: any;
+export declare const WithReadOnly: any;
+export declare const WithDisabledPast: any;
+export declare const WithDisabledPicker: any;
+export declare const WithDisabledOption: any;
+export declare const WithDisplayedWeekNumber: any;
+export declare const WithCustomDateFormat: any;
+export declare const WithRequiredOption: any;
+export declare const WithDaysOutsideOfCurrentMonth: any;
+export declare const WithFullWidth: any;
+export declare const WithoutClearButton: any;
+export declare const WithControlledMode: Story<DatePickerProps>;
+export declare const WithLocaleConfiguration: Story<DatePickerProps>;

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

@@ -0,0 +1,4 @@
+export declare const datePickerWithControlledModeClassName = "dot-date-picker-with-controlled-mode";
+export declare const datePickerWithLocaleClassName = "dot-date-picker-with-locale";
+export declare const StyledDatePickerWithControlledMode: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const StyledDatePickerWithLocale: import("styled-components").StyledComponent<"div", any, {}, never>;

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

@@ -0,0 +1,11 @@
+/// <reference types="react" />
+export declare const rootClassName = "dot-date-picker";
+export declare const containerClassName = "dot-date-picker-container";
+export declare const rectanglePickersDayClassName = "dot-rectangle-pickers-day";
+export declare const StyledDatePickerContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const StyledDatePicker: import("styled-components").StyledComponent<(<TDate>(props: import("@mui/x-date-pickers").DatePickerProps<TDate> & import("react").RefAttributes<HTMLDivElement>) => JSX.Element) & {
+    propTypes?: any;
+}, any, {}, never>;
+export declare const StyledPickersDay: import("styled-components").StyledComponent<(<TDate>(props: import("@mui/x-date-pickers").PickersDayProps<TDate> & import("react").RefAttributes<HTMLButtonElement>) => JSX.Element) & {
+    propTypes?: any;
+}, any, {}, never>;

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

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

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

@@ -0,0 +1,38 @@
+export interface DatePickerLocale {
+    formats?: {
+        L: string;
+        LL: string;
+        LLL: string;
+        LLLL: string;
+        LT: string;
+        LTS: string;
+        l: string;
+        ll: string;
+        lll: string;
+        llll: string;
+    };
+    meridiem?: (hour: number, minute: number, isLowercase: boolean) => string;
+    months?: string[];
+    monthsShort?: string[];
+    ordinal?: (n: number) => string;
+    relativeTime?: {
+        M: string;
+        MM: string;
+        d: string;
+        dd: string;
+        future: string;
+        h: string;
+        hh: string;
+        m: string;
+        mm: string;
+        past: string;
+        s: string;
+        y: string;
+        yy: string;
+    };
+    weekStart?: number;
+    weekdays?: string[];
+    weekdaysMin?: string[];
+    weekdaysShort?: string[];
+    yearStart?: number;
+}

package/lib/components/index.d.ts

@@ -33,6 +33,7 @@ export type { CharactersLimit, InlineEditProps } from './inline-edit';
 export type { progressColorOptions, progressVariantOptions, ProgressProps, } from './progress';
 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 { DotAccordion } from './accordion/Accordion';
 export { DotActionToolbar } from './action-toolbar/ActionToolbar';
 export { DotAlertBanner } from './alert-banner/AlertBanner';
@@ -92,4 +93,5 @@ 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 { CreateUUID } from './createUUID';

package/lib/components/input-form-fields/InputText.d.ts

@@ -4,9 +4,9 @@ export declare const DELAY_MS = 300;
 export declare type endAdornmentIconType = 'warning' | 'error' | 'check';
 export interface InputTextProps extends InputProps {
     /** The HTML autocomplete property to pass along to the input tag. Used for
-    controlling autofill behavior in forms. This property follows this HTML spec:
-    https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#autofill
-    **/
+     controlling autofill behavior in forms. This property follows this HTML spec:
+     https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#autofill
+     **/
     autoComplete?: string;
     endAdornmentTooltip?: string;
     /** If true, the input will use debounce functionality. **/

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

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

package/lib/theme-provider/ThemeProvider.d.ts

@@ -19,6 +19,7 @@ declare module '@mui/material/LinearProgress' {
 }
 declare module '@mui/material/styles/createPalette' {
     interface Palette {
+        layer: LayerPaletteColorOptions;
         purple?: PaletteColorOptions;
     }
     interface PaletteOptions {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@digital-ai/dot-components",
-  "version": "2.5.2",
+  "version": "2.5.4",
   "private": false,
   "license": "SEE LICENSE IN <LICENSE.md>",
   "contributors": [
@@ -29,6 +29,7 @@
     "@emotion/styled": "^11.10.4",
     "@mui/material": "^5.2.5",
     "@mui/styles": "^5.2.3",
+    "@mui/x-date-pickers": "^6.0.1",
     "jwt-decode": "^3.1.2",
     "react-dropzone": "^11.4.2",
     "react-grid-layout": "^1.3.4",