@ssa-ui-kit/core 2.3.0 → 2.4.0

package/dist/components/DatePicker/types.d.ts

@@ -6,7 +6,6 @@ export type DatePickerProps = {
     name: string;
     label?: string;
     format?: 'mm/dd/yyyy' | 'dd/mm/yyyy';
-    isOpenToggle?: boolean;
     maskOptions?: Parameters<typeof useMask>[0];
     openCalendarMode?: 'icon' | 'input' | 'both';
     inputProps?: Partial<InputProps>;
@@ -23,7 +22,6 @@ export type DatePickerProps = {
         mode: 'dateFrom' | 'dateTo';
         otherDate: Date | null;
     };
-    safeOnChange?: (date?: DateTime) => void;
     onChange?: (date?: Date) => void;
     onOpen?: () => void;
     onClose?: () => void;
@@ -48,6 +46,7 @@ export type DatePickerContextProps = Omit<DatePickerProps, 'dateMin' | 'dateMax'
         month: number;
         year: number;
     };
+    safeOnChange?: (date?: DateTime) => void;
     setCalendarViewDateTime: Dispatch<SetStateAction<DateTime | undefined>>;
     setDateTime: Dispatch<SetStateAction<DateTime<boolean> | undefined>>;
     setIsOpen: Dispatch<SetStateAction<boolean>>;

package/dist/components/DateRangePicker/DateRangePicker.d.ts

@@ -1,2 +1,2 @@
 import { DateRangePickerProps } from './types';
-export declare const DateRangePicker: ({ format, openCalendarMode, name, label, value, defaultValue, ...rest }: DateRangePickerProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const DateRangePicker: ({ format, openCalendarMode, showCalendarIcon, ...rest }: DateRangePickerProps) => import("@emotion/react/jsx-runtime").JSX.Element;

package/dist/components/DateRangePicker/DateRangePickerContext.d.ts

@@ -0,0 +1,2 @@
+import { DateRangePickerContextProps } from './types';
+export declare const DateRangePickerContext: import("react").Context<DateRangePickerContextProps>;

package/dist/components/DateRangePicker/DateRangePickerProvider.d.ts

@@ -0,0 +1,2 @@
+import { DateRangePickerProps } from './types';
+export declare const DateRangePickerProvider: ({ children, ...rest }: React.PropsWithChildren<DateRangePickerProps>) => import("@emotion/react/jsx-runtime").JSX.Element;

package/dist/components/DateRangePicker/components/Calendar.d.ts

@@ -0,0 +1 @@
+export declare const DatePickerCalendar: () => import("@emotion/react/jsx-runtime").JSX.Element;

package/dist/components/DateRangePicker/components/Content.d.ts

@@ -0,0 +1 @@
+export declare const DatePickerContent: () => import("@emotion/react/jsx-runtime").JSX.Element;

package/dist/components/DateRangePicker/components/DatesListWrapper.d.ts

@@ -0,0 +1,10 @@
+export declare const DatesListWrapper: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+} & {
+    avatarSize?: number;
+    direction?: string;
+    alignItems?: string;
+} & import("../../..").CommonProps & import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & {
+    theme?: import("@emotion/react").Theme;
+}, {}, {}>;

package/dist/components/DateRangePicker/components/DaysView.d.ts

@@ -0,0 +1 @@
+export declare const DaysView: () => import("@emotion/react/jsx-runtime").JSX.Element;

package/dist/components/DateRangePicker/components/Header.d.ts

@@ -0,0 +1 @@
+export declare const Header: () => import("@emotion/react/jsx-runtime").JSX.Element;

package/dist/components/DateRangePicker/components/MonthsSwitch.d.ts

@@ -0,0 +1 @@
+export declare const MonthsSwitch: () => import("@emotion/react/jsx-runtime").JSX.Element | null;

package/dist/components/DateRangePicker/components/MonthsView.d.ts

@@ -0,0 +1 @@
+export declare const MonthsView: () => import("@emotion/react/jsx-runtime").JSX.Element;

package/dist/components/DateRangePicker/components/Trigger.d.ts

@@ -0,0 +1 @@
+export declare const Trigger: () => import("@emotion/react/jsx-runtime").JSX.Element;

package/dist/components/DateRangePicker/components/TriggerInput.d.ts

@@ -0,0 +1,6 @@
+import { MouseEventHandler } from 'react';
+export declare const TriggerInput: ({ datepickerType, withPopover, onClick, }: {
+    datepickerType: "from" | "to";
+    withPopover?: boolean;
+    onClick: MouseEventHandler<HTMLInputElement>;
+}) => import("@emotion/react/jsx-runtime").JSX.Element;

package/dist/components/DateRangePicker/components/YearsView.d.ts

@@ -0,0 +1 @@
+export declare const YearsView: () => import("@emotion/react/jsx-runtime").JSX.Element;

package/dist/components/DateRangePicker/components/index.d.ts

@@ -0,0 +1,9 @@
+export * from './Trigger';
+export * from './Calendar';
+export * from './Content';
+export * from './MonthsSwitch';
+export * from './Header';
+export * from './DaysView';
+export * from './MonthsView';
+export * from './YearsView';
+export * from './DatesListWrapper';

package/dist/components/DateRangePicker/constants.d.ts

@@ -5,3 +5,4 @@ export declare const DATE_MIN = "01/01/1900";
 export declare const DATE_MAX = "01/01/2150";
 export declare const OUT_OF_RANGE = "The date is out of the defined range";
 export declare const INVALID_DATE = "Invalid date";
+export declare const FULL_DATE_LENGTH = 10;

package/dist/components/DateRangePicker/helpers/ClassnameArray.d.ts

@@ -0,0 +1,3 @@
+export declare class ClassnameArray extends Array<string> {
+    toggle(className: string, condition: boolean): this;
+}

package/dist/components/DateRangePicker/helpers/index.d.ts

@@ -0,0 +1 @@
+export * from './ClassnameArray';

package/dist/components/DateRangePicker/hooks/index.d.ts

@@ -0,0 +1,3 @@
+export * from './useDateRangePicker';
+export * from './useDatePickerMask';
+export * from './useRangeHighlighting';

package/dist/components/DateRangePicker/hooks/useDatePickerMask.d.ts

@@ -0,0 +1,10 @@
+import { DateRangePickerProps } from '../types';
+export declare const useDatePickerMask: ({ maskOptions, formatIndexes, dateMinParts, dateMaxParts, }: Pick<DateRangePickerProps, "maskOptions"> & {
+    formatIndexes: {
+        day: number;
+        month: number;
+        year: number;
+    };
+    dateMinParts: number[];
+    dateMaxParts: number[];
+}) => import("react").MutableRefObject<HTMLInputElement>;

package/dist/components/DateRangePicker/hooks/useDateRangePicker.d.ts

@@ -0,0 +1,40 @@
+import { DateTime } from 'luxon';
+import { CalendarType, DateRangePickerProps, DateTimeTuple } from '../types';
+export declare const useDateRangePicker: ({ dateMin, dateMax, name: _name, format, maskOptions, isOpenState, defaultValue, onOpen, onClose, onError, onChange, ...rest }: DateRangePickerProps & {
+    isOpenState?: boolean;
+}) => {
+    formatIndexes: {
+        day: number;
+        month: number;
+        year: number;
+    };
+    dateMinParts: number[];
+    dateMaxParts: number[];
+    dateMinDT: DateTime<true> | DateTime<false>;
+    dateMaxDT: DateTime<true> | DateTime<false>;
+    dateTime: DateTimeTuple;
+    inputValueFrom: any;
+    inputValueTo: any;
+    calendarViewDateTime: [DateTime<boolean> | undefined, DateTime<boolean> | undefined];
+    maskInputRef: import("react").MutableRefObject<HTMLInputElement>;
+    calendarType: CalendarType;
+    lastChangedDate: [Date | undefined, Date | undefined];
+    luxonFormat: string;
+    lastFocusedElement: "from" | "to";
+    nameFrom: string;
+    nameTo: string;
+    currentIndex: number;
+    currentCalendarViewDT: DateTime<boolean>;
+    isOpen: boolean;
+    status: "error" | "success" | "basic" | undefined;
+    inputFromRef: ((instance: HTMLInputElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | null;
+    inputToRef: ((instance: HTMLInputElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | null;
+    setIsOpen: import("react").Dispatch<import("react").SetStateAction<boolean>>;
+    handleSetIsOpen: (open: boolean) => void;
+    setLastFocusedElement: import("react").Dispatch<import("react").SetStateAction<"from" | "to">>;
+    safeOnChange: (newDateTime?: DateTime) => void;
+    setCalendarType: import("react").Dispatch<import("react").SetStateAction<CalendarType>>;
+    setCalendarViewDateTime: import("react").Dispatch<import("react").SetStateAction<[DateTime<boolean> | undefined, DateTime<boolean> | undefined]>>;
+    setDateTime: import("react").Dispatch<import("react").SetStateAction<DateTimeTuple>>;
+    handleBlur: import("react").FocusEventHandler<HTMLInputElement>;
+};

package/dist/components/DateRangePicker/hooks/useRangeHighlighting.d.ts

@@ -0,0 +1,10 @@
+import { DateTime } from 'luxon';
+export declare const useRangeHighlighting: () => {
+    handleDateHover: (currentDT: DateTime | null) => void;
+    getClassNames: (currentDT: DateTime, { isCalendarFirstDateSelected, isCalendarSecondDateSelected, }: {
+        isCalendarFirstDateSelected: boolean;
+        isCalendarSecondDateSelected: boolean;
+    }) => string[];
+    isHighlightDate: (currentDT: DateTime) => boolean;
+    hoveredDate: DateTime<boolean> | null;
+};

package/dist/components/DateRangePicker/styles.d.ts

@@ -0,0 +1,34 @@
+export declare const DaysViewCell: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+} & {
+    avatarSize?: number;
+    direction?: string;
+    alignItems?: string;
+} & import("../..").CommonProps & import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & {
+    theme?: import("@emotion/react").Theme;
+} & {
+    isCalendarDateNow: boolean;
+    isCalendarDateSelected: boolean;
+    isCalendarFirstDateSelected?: boolean;
+    isCalendarSecondDateSelected?: boolean;
+    isHighlighted: boolean;
+}, {}, {}>;
+export declare const YearsViewCell: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+} & {
+    isCalendarYear: boolean;
+    isCalendarFirstDateSelected?: boolean;
+    isCalendarSecondDateSelected?: boolean;
+    isHighlighted: boolean;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const MonthsViewCell: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+} & {
+    isCalendarMonth: boolean;
+    isCalendarFirstDateSelected?: boolean;
+    isCalendarSecondDateSelected?: boolean;
+    isHighlighted: boolean;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;

package/dist/components/DateRangePicker/types.d.ts

@@ -1,12 +1,27 @@
-import { Dispatch, SetStateAction } from 'react';
+import { Dispatch, MouseEventHandler, SetStateAction } from 'react';
 import { DateTime } from 'luxon';
-import { DatePickerProps } from '../DatePicker/types';
+import { useMask } from '@react-input/mask';
 import { FieldContextValue } from '../Field/FieldProvider';
+import { InputProps } from '../Input/types';
 export type LastFocusedElement = 'from' | 'to';
-export type DateRangePickerProps = Omit<DatePickerProps, 'isOpenToggle' | 'value' | 'defaultValue' | 'onChange'> & {
+export type DateRangePickerProps = {
+    name: string;
+    label?: string;
+    format?: 'mm/dd/yyyy' | 'dd/mm/yyyy';
+    isOpenState?: boolean;
     value?: [string | undefined, string | undefined];
     defaultValue?: [string, string];
+    maskOptions?: Parameters<typeof useMask>[0];
+    openCalendarMode?: 'icon' | 'input' | 'both';
+    inputProps?: Partial<InputProps>;
     status?: FieldContextValue['status'];
+    dateMin?: string;
+    dateMax?: string;
+    disabled?: boolean;
+    helperText?: string;
+    showCalendarIcon?: boolean;
+    triggerClassname?: string;
+    calendarClassname?: string;
     onChange?: (dates?: [Date | null, Date | null]) => void;
     onOpen?: () => void;
     onClose?: () => void;
@@ -15,13 +30,20 @@ export type DateRangePickerProps = Omit<DatePickerProps, 'isOpenToggle' | 'value
     onYearChange?: (date: Date) => void;
     onBlur?: React.FocusEventHandler<HTMLInputElement>;
 };
+export type DateTimeTuple = [DateTime | undefined, DateTime | undefined];
 export type DateRangePickerContextProps = Omit<DateRangePickerProps, 'dateMin' | 'dateMax'> & {
-    inputFromRef?: React.ForwardedRef<HTMLInputElement | null>;
+    nameFrom: string;
+    nameTo: string;
     isOpen: boolean;
+    currentCalendarViewDT: DateTime;
+    currentIndex: number;
+    calendarViewDateTime: DateTimeTuple;
     calendarType: CalendarType;
-    inputValue?: string;
-    dateTime?: DateTime;
-    calendarViewDateTime?: DateTime;
+    inputValueFrom?: string;
+    inputValueTo?: string;
+    inputFromRef: React.ForwardedRef<HTMLInputElement | null>;
+    inputToRef: React.ForwardedRef<HTMLInputElement | null>;
+    dateTime: DateTimeTuple;
     dateMinParts: number[];
     dateMaxParts: number[];
     dateMinDT: DateTime;
@@ -32,9 +54,13 @@ export type DateRangePickerContextProps = Omit<DateRangePickerProps, 'dateMin' |
         year: number;
     };
     lastFocusedElement: LastFocusedElement;
+    lastChangedDate?: [Date | undefined, Date | undefined];
+    safeOnChange?: (date?: DateTime) => void;
     setLastFocusedElement: Dispatch<SetStateAction<LastFocusedElement>>;
-    setCalendarViewDateTime: Dispatch<SetStateAction<DateTime | undefined>>;
-    setDateTime: Dispatch<SetStateAction<DateTime<boolean> | undefined>>;
+    handleToggleOpen: MouseEventHandler<HTMLButtonElement | HTMLInputElement>;
+    handleSetIsOpen: (open: boolean) => void;
+    setCalendarViewDateTime: Dispatch<SetStateAction<DateTimeTuple>>;
+    setDateTime: Dispatch<SetStateAction<DateTimeTuple>>;
     setIsOpen: Dispatch<SetStateAction<boolean>>;
     setCalendarType: Dispatch<SetStateAction<CalendarType>>;
 };

package/dist/components/DateRangePicker/useDateRangePickerContext.d.ts

@@ -0,0 +1 @@
+export declare const useDateRangePickerContext: () => import("./types").DateRangePickerContextProps;

package/dist/components/DateRangePicker/utils/dates.d.ts

@@ -0,0 +1,11 @@
+export declare const getDaysForCalendarMonth: (date?: Date) => Date[];
+export declare const getWeekDays: () => string[];
+export declare const getYearsList: (props?: {
+    yearsFrom?: number;
+    yearsCount?: number;
+}) => number[];
+export declare const processDate: (dateParts: {
+    month: string;
+    day: string;
+    year: string;
+}, yearMin: number, yearMax: number) => boolean;

package/dist/components/DateRangePicker/utils/index.d.ts

@@ -0,0 +1 @@
+export * from './dates';

package/dist/components/FormHelperText/types.d.ts

@@ -4,4 +4,5 @@ export interface FormHelperTextProps extends CommonProps {
     role?: string;
     status?: 'error' | 'success' | 'basic' | 'custom';
     disabled?: boolean;
+    'data-testid'?: string;
 }