@ssa-ui-kit/core 2.1.1 → 2.2.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/DatePicker/hooks/useDatePicker.d.ts +3 -0
- package/dist/components/DatePicker/styles.d.ts +9 -0
- package/dist/components/DatePicker/types.d.ts +10 -1
- package/dist/components/DateRangePicker/DateRangePicker.d.ts +2 -0
- package/dist/components/DateRangePicker/constants.d.ts +7 -0
- package/dist/components/DateRangePicker/index.d.ts +1 -0
- package/dist/components/DateRangePicker/types.d.ts +41 -0
- package/dist/components/Drawer/DrawerCloseButton.d.ts +5 -0
- package/dist/components/Drawer/DrawerContent.d.ts +3 -0
- package/dist/components/Drawer/DrawerHeader.d.ts +4 -0
- package/dist/components/Drawer/DrawerOverlay.d.ts +4 -0
- package/dist/components/Drawer/DrawerPortal.d.ts +2 -0
- package/dist/components/Drawer/DrawerProvider.d.ts +8 -0
- package/dist/components/Drawer/DrawerRoot.d.ts +6 -0
- package/dist/components/Drawer/DrawerTitle.d.ts +4 -0
- package/dist/components/Drawer/index.d.ts +2 -0
- package/dist/components/Drawer/index.parts.d.ts +7 -0
- package/dist/components/Drawer/useDrawer.d.ts +48 -0
- package/dist/components/Field/index.d.ts +1 -1
- package/dist/components/FiltersMultiSelect/FiltersMultiSelect.d.ts +1 -1
- package/dist/components/FormHelperText/types.d.ts +1 -1
- package/dist/components/Input/InputBase.d.ts +2 -0
- package/dist/components/Input/types.d.ts +2 -0
- package/dist/components/Typeahead/Typeahead.context.d.ts +1 -1
- package/dist/components/Typeahead/useTypeahead.d.ts +1 -1
- package/dist/components/index.d.ts +2 -0
- package/dist/index.js +1080 -302
- package/dist/index.js.map +1 -1
- package/dist/types/emotion.d.ts +1 -0
- package/package.json +3 -3
|
@@ -16,6 +16,9 @@ export declare const useDatePicker: ({ dateMin, dateMax, name, defaultValue, for
|
|
|
16
16
|
calendarViewDateTime: DateTime<boolean> | undefined;
|
|
17
17
|
maskInputRef: import("react").MutableRefObject<HTMLInputElement>;
|
|
18
18
|
calendarType: CalendarType;
|
|
19
|
+
lastChangedDate: Date | undefined;
|
|
20
|
+
luxonFormat: string;
|
|
21
|
+
safeOnChange: (newDateTime?: DateTime) => void;
|
|
19
22
|
setCalendarType: import("react").Dispatch<import("react").SetStateAction<CalendarType>>;
|
|
20
23
|
setCalendarViewDateTime: import("react").Dispatch<import("react").SetStateAction<DateTime<boolean> | undefined>>;
|
|
21
24
|
setDateTime: import("react").Dispatch<import("react").SetStateAction<DateTime<boolean> | undefined>>;
|
|
@@ -10,16 +10,25 @@ export declare const DaysViewCell: import("@emotion/styled").StyledComponent<{
|
|
|
10
10
|
} & {
|
|
11
11
|
isCalendarDateNow: boolean;
|
|
12
12
|
isCalendarDateSelected: boolean;
|
|
13
|
+
isCalendarFirstDateSelected?: boolean;
|
|
14
|
+
isCalendarSecondDateSelected?: boolean;
|
|
15
|
+
isHighlighted: boolean;
|
|
13
16
|
}, {}, {}>;
|
|
14
17
|
export declare const YearsViewCell: import("@emotion/styled").StyledComponent<{
|
|
15
18
|
theme?: import("@emotion/react").Theme;
|
|
16
19
|
as?: React.ElementType;
|
|
17
20
|
} & {
|
|
18
21
|
isCalendarYear: boolean;
|
|
22
|
+
isCalendarFirstDateSelected?: boolean;
|
|
23
|
+
isCalendarSecondDateSelected?: boolean;
|
|
24
|
+
isHighlighted: boolean;
|
|
19
25
|
}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
|
|
20
26
|
export declare const MonthsViewCell: import("@emotion/styled").StyledComponent<{
|
|
21
27
|
theme?: import("@emotion/react").Theme;
|
|
22
28
|
as?: React.ElementType;
|
|
23
29
|
} & {
|
|
24
30
|
isCalendarMonth: boolean;
|
|
31
|
+
isCalendarFirstDateSelected?: boolean;
|
|
32
|
+
isCalendarSecondDateSelected?: boolean;
|
|
33
|
+
isHighlighted: boolean;
|
|
25
34
|
}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
|
|
@@ -6,15 +6,24 @@ export type DatePickerProps = {
|
|
|
6
6
|
name: string;
|
|
7
7
|
label?: string;
|
|
8
8
|
format?: 'mm/dd/yyyy' | 'dd/mm/yyyy';
|
|
9
|
+
isOpenToggle?: boolean;
|
|
9
10
|
maskOptions?: Parameters<typeof useMask>[0];
|
|
10
11
|
openCalendarMode?: 'icon' | 'input' | 'both';
|
|
11
|
-
inputProps?: InputProps
|
|
12
|
+
inputProps?: Partial<InputProps>;
|
|
12
13
|
value?: string;
|
|
13
14
|
defaultValue?: string;
|
|
14
15
|
dateMin?: string;
|
|
15
16
|
dateMax?: string;
|
|
16
17
|
disabled?: boolean;
|
|
17
18
|
helperText?: string;
|
|
19
|
+
showCalendarIcon?: boolean;
|
|
20
|
+
lastChangedDate?: Date;
|
|
21
|
+
highlightDates?: {
|
|
22
|
+
enabled: boolean;
|
|
23
|
+
mode: 'dateFrom' | 'dateTo';
|
|
24
|
+
otherDate: Date | null;
|
|
25
|
+
};
|
|
26
|
+
safeOnChange?: (date?: DateTime) => void;
|
|
18
27
|
onChange?: (date?: Date) => void;
|
|
19
28
|
onOpen?: () => void;
|
|
20
29
|
onClose?: () => void;
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
export declare const DEFAULT_MASK_FORMAT = "mm/dd/yyyy";
|
|
2
|
+
export declare const DEFAULT_MASK = "__/__/____";
|
|
3
|
+
export declare const MONTHS: string[];
|
|
4
|
+
export declare const DATE_MIN = "01/01/1900";
|
|
5
|
+
export declare const DATE_MAX = "01/01/2150";
|
|
6
|
+
export declare const OUT_OF_RANGE = "The date is out of the defined range";
|
|
7
|
+
export declare const INVALID_DATE = "Invalid date";
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export * from './DateRangePicker';
|
|
@@ -0,0 +1,41 @@
|
|
|
1
|
+
import { Dispatch, SetStateAction } from 'react';
|
|
2
|
+
import { DateTime } from 'luxon';
|
|
3
|
+
import { DatePickerProps } from '../DatePicker/types';
|
|
4
|
+
import { FieldContextValue } from '../Field/FieldProvider';
|
|
5
|
+
export type LastFocusedElement = 'from' | 'to';
|
|
6
|
+
export type DateRangePickerProps = Omit<DatePickerProps, 'isOpenToggle' | 'value' | 'defaultValue' | 'onChange'> & {
|
|
7
|
+
value?: [string | undefined, string | undefined];
|
|
8
|
+
defaultValue?: [string, string];
|
|
9
|
+
status?: FieldContextValue['status'];
|
|
10
|
+
onChange?: (dates?: [Date | null, Date | null]) => void;
|
|
11
|
+
onOpen?: () => void;
|
|
12
|
+
onClose?: () => void;
|
|
13
|
+
onError?: (date: unknown, error?: string | null) => void;
|
|
14
|
+
onMonthChange?: (date: Date) => void;
|
|
15
|
+
onYearChange?: (date: Date) => void;
|
|
16
|
+
onBlur?: React.FocusEventHandler<HTMLInputElement>;
|
|
17
|
+
};
|
|
18
|
+
export type DateRangePickerContextProps = Omit<DateRangePickerProps, 'dateMin' | 'dateMax'> & {
|
|
19
|
+
inputFromRef?: React.ForwardedRef<HTMLInputElement | null>;
|
|
20
|
+
isOpen: boolean;
|
|
21
|
+
calendarType: CalendarType;
|
|
22
|
+
inputValue?: string;
|
|
23
|
+
dateTime?: DateTime;
|
|
24
|
+
calendarViewDateTime?: DateTime;
|
|
25
|
+
dateMinParts: number[];
|
|
26
|
+
dateMaxParts: number[];
|
|
27
|
+
dateMinDT: DateTime;
|
|
28
|
+
dateMaxDT: DateTime;
|
|
29
|
+
formatIndexes: {
|
|
30
|
+
day: number;
|
|
31
|
+
month: number;
|
|
32
|
+
year: number;
|
|
33
|
+
};
|
|
34
|
+
lastFocusedElement: LastFocusedElement;
|
|
35
|
+
setLastFocusedElement: Dispatch<SetStateAction<LastFocusedElement>>;
|
|
36
|
+
setCalendarViewDateTime: Dispatch<SetStateAction<DateTime | undefined>>;
|
|
37
|
+
setDateTime: Dispatch<SetStateAction<DateTime<boolean> | undefined>>;
|
|
38
|
+
setIsOpen: Dispatch<SetStateAction<boolean>>;
|
|
39
|
+
setCalendarType: Dispatch<SetStateAction<CalendarType>>;
|
|
40
|
+
};
|
|
41
|
+
export type CalendarType = 'days' | 'months' | 'years';
|
|
@@ -0,0 +1,5 @@
|
|
|
1
|
+
import { ButtonProps } from '../Button/types';
|
|
2
|
+
export interface DrawerCloseButtonProps extends ButtonProps {
|
|
3
|
+
children?: React.ReactNode;
|
|
4
|
+
}
|
|
5
|
+
export declare const DrawerCloseButton: import("react").ForwardRefExoticComponent<DrawerCloseButtonProps & import("react").RefAttributes<HTMLButtonElement>>;
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
import { UseDrawerStore } from './useDrawer';
|
|
2
|
+
export interface DrawerContextValue {
|
|
3
|
+
store: UseDrawerStore;
|
|
4
|
+
}
|
|
5
|
+
export declare const DrawerProvider: ({ children, value, }: {
|
|
6
|
+
value: DrawerContextValue;
|
|
7
|
+
children: React.ReactNode;
|
|
8
|
+
}) => import("react").FunctionComponentElement<import("react").ProviderProps<DrawerContextValue | null>>, useDrawerContext: () => DrawerContextValue;
|
|
@@ -0,0 +1,6 @@
|
|
|
1
|
+
import { UseDrawerStore } from './useDrawer';
|
|
2
|
+
export interface DrawerProps {
|
|
3
|
+
children: React.ReactElement;
|
|
4
|
+
store?: UseDrawerStore;
|
|
5
|
+
}
|
|
6
|
+
export declare const Drawer: ({ children, store: controlledStore }: DrawerProps) => import("@emotion/react/jsx-runtime").JSX.Element | null;
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
export { Drawer as Root } from './DrawerRoot';
|
|
2
|
+
export { DrawerOverlay as Overlay } from './DrawerOverlay';
|
|
3
|
+
export { DrawerPortal as Portal } from './DrawerPortal';
|
|
4
|
+
export { DrawerContent as Content } from './DrawerContent';
|
|
5
|
+
export { DrawerHeader as Header } from './DrawerHeader';
|
|
6
|
+
export { DrawerTitle as Title } from './DrawerTitle';
|
|
7
|
+
export { DrawerCloseButton as CloseButton } from './DrawerCloseButton';
|
|
@@ -0,0 +1,48 @@
|
|
|
1
|
+
import { OpenChangeReason } from '@floating-ui/react';
|
|
2
|
+
export type Position = 'left' | 'right' | 'top' | 'bottom';
|
|
3
|
+
export type UseDrawerOptions = {
|
|
4
|
+
opened?: boolean;
|
|
5
|
+
duration?: number;
|
|
6
|
+
defaultOpened?: boolean;
|
|
7
|
+
dismissable?: boolean;
|
|
8
|
+
position?: Position;
|
|
9
|
+
title?: string;
|
|
10
|
+
withCloseButton?: boolean;
|
|
11
|
+
onOpenChange?: (open: boolean, event?: Event, reason?: OpenChangeReason) => void;
|
|
12
|
+
};
|
|
13
|
+
export declare const useDrawer: ({ opened, duration, defaultOpened, dismissable, position, title, withCloseButton, onOpenChange, }?: UseDrawerOptions) => {
|
|
14
|
+
opened: boolean;
|
|
15
|
+
dismissable: boolean;
|
|
16
|
+
position: Position;
|
|
17
|
+
duration: number;
|
|
18
|
+
floatingContext: {
|
|
19
|
+
x: number;
|
|
20
|
+
y: number;
|
|
21
|
+
placement: import("@floating-ui/react").Placement;
|
|
22
|
+
strategy: import("@floating-ui/react").Strategy;
|
|
23
|
+
middlewareData: import("@floating-ui/react").MiddlewareData;
|
|
24
|
+
isPositioned: boolean;
|
|
25
|
+
update: () => void;
|
|
26
|
+
floatingStyles: React.CSSProperties;
|
|
27
|
+
open: boolean;
|
|
28
|
+
onOpenChange: (open: boolean, event?: Event, reason?: OpenChangeReason) => void;
|
|
29
|
+
events: import("@floating-ui/react").FloatingEvents;
|
|
30
|
+
dataRef: React.MutableRefObject<import("@floating-ui/react").ContextData>;
|
|
31
|
+
nodeId: string | undefined;
|
|
32
|
+
floatingId: string | undefined;
|
|
33
|
+
refs: import("@floating-ui/react").ExtendedRefs<import("@floating-ui/react").ReferenceType>;
|
|
34
|
+
elements: import("@floating-ui/react").ExtendedElements<import("@floating-ui/react").ReferenceType>;
|
|
35
|
+
};
|
|
36
|
+
interactions: import("@floating-ui/react").UseInteractionsReturn;
|
|
37
|
+
transition: {
|
|
38
|
+
isMounted: boolean;
|
|
39
|
+
status: "initial" | "open" | "close" | "unmounted";
|
|
40
|
+
};
|
|
41
|
+
title: string | undefined;
|
|
42
|
+
withCloseButton: boolean;
|
|
43
|
+
portalNode: HTMLElement | null;
|
|
44
|
+
setFloating: ((node: HTMLElement | null) => void) & ((node: HTMLElement | null) => void);
|
|
45
|
+
setPortalNode: import("react").Dispatch<import("react").SetStateAction<HTMLElement | null>>;
|
|
46
|
+
toggle: (open?: boolean) => void;
|
|
47
|
+
};
|
|
48
|
+
export type UseDrawerStore = ReturnType<typeof useDrawer>;
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { UseFormReturn } from 'react-hook-form';
|
|
2
|
+
import { FieldProps } from '../index';
|
|
2
3
|
import { InputProps } from '../Input/types';
|
|
3
|
-
import { FieldProps } from '../Field';
|
|
4
4
|
import { SelectedFilter, UseFiltersMultiSelectStore } from './useFiltersMultiSelect';
|
|
5
5
|
export interface FiltersMultiSelectProps extends Pick<FieldProps, 'status' | 'disabled'> {
|
|
6
6
|
children: React.ReactNode;
|
|
@@ -1,4 +1,6 @@
|
|
|
1
1
|
export declare const InputBase: import("@emotion/styled").StyledComponent<{
|
|
2
2
|
theme?: import("@emotion/react").Theme;
|
|
3
3
|
as?: React.ElementType;
|
|
4
|
+
} & {
|
|
5
|
+
showBorders: boolean;
|
|
4
6
|
}, import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, {}>;
|
|
@@ -22,6 +22,8 @@ export interface InputProps extends Partial<Pick<UseFormReturn, 'register' | 'co
|
|
|
22
22
|
errorTooltip?: string;
|
|
23
23
|
successTooltip?: string;
|
|
24
24
|
showHelperText?: boolean;
|
|
25
|
+
showStatusIcon?: boolean;
|
|
26
|
+
showBorders?: boolean;
|
|
25
27
|
helperText?: string;
|
|
26
28
|
maxLength?: number;
|
|
27
29
|
errors?: FieldError;
|
|
@@ -20,7 +20,7 @@ export declare const TypeaheadContext: React.Context<{
|
|
|
20
20
|
inputName: string;
|
|
21
21
|
inputValue: string;
|
|
22
22
|
validationSchema: Record<string, unknown> | undefined;
|
|
23
|
-
status: "error" | "
|
|
23
|
+
status: "error" | "success" | "basic";
|
|
24
24
|
placeholder: string | null | undefined;
|
|
25
25
|
options: React.ReactElement<any, string | React.JSXElementConstructor<any>>[] | undefined;
|
|
26
26
|
useFormResult: UseFormReturn<FieldValues, any, undefined>;
|
|
@@ -19,7 +19,7 @@ export declare const useTypeahead: ({ name, isOpen: isInitOpen, initialSelectedI
|
|
|
19
19
|
inputName: string;
|
|
20
20
|
inputValue: string;
|
|
21
21
|
validationSchema: Record<string, unknown> | undefined;
|
|
22
|
-
status: "error" | "
|
|
22
|
+
status: "error" | "success" | "basic";
|
|
23
23
|
placeholder: string | null | undefined;
|
|
24
24
|
options: React.ReactElement<any, string | React.JSXElementConstructor<any>>[] | undefined;
|
|
25
25
|
useFormResult: import("react-hook-form").UseFormReturn<import("react-hook-form").FieldValues, any, undefined>;
|
|
@@ -71,6 +71,8 @@ export * from './CardList';
|
|
|
71
71
|
export * from './Checkbox';
|
|
72
72
|
export * from './CollapsibleNavBar';
|
|
73
73
|
export * from './DatePicker';
|
|
74
|
+
export * from './DateRangePicker';
|
|
75
|
+
export * from './Drawer';
|
|
74
76
|
export * from './Field';
|
|
75
77
|
export * from './Filters';
|
|
76
78
|
export * from './FiltersMultiSelect';
|