@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.
Files changed (30) hide show
  1. package/dist/components/DatePicker/hooks/useDatePicker.d.ts +3 -0
  2. package/dist/components/DatePicker/styles.d.ts +9 -0
  3. package/dist/components/DatePicker/types.d.ts +10 -1
  4. package/dist/components/DateRangePicker/DateRangePicker.d.ts +2 -0
  5. package/dist/components/DateRangePicker/constants.d.ts +7 -0
  6. package/dist/components/DateRangePicker/index.d.ts +1 -0
  7. package/dist/components/DateRangePicker/types.d.ts +41 -0
  8. package/dist/components/Drawer/DrawerCloseButton.d.ts +5 -0
  9. package/dist/components/Drawer/DrawerContent.d.ts +3 -0
  10. package/dist/components/Drawer/DrawerHeader.d.ts +4 -0
  11. package/dist/components/Drawer/DrawerOverlay.d.ts +4 -0
  12. package/dist/components/Drawer/DrawerPortal.d.ts +2 -0
  13. package/dist/components/Drawer/DrawerProvider.d.ts +8 -0
  14. package/dist/components/Drawer/DrawerRoot.d.ts +6 -0
  15. package/dist/components/Drawer/DrawerTitle.d.ts +4 -0
  16. package/dist/components/Drawer/index.d.ts +2 -0
  17. package/dist/components/Drawer/index.parts.d.ts +7 -0
  18. package/dist/components/Drawer/useDrawer.d.ts +48 -0
  19. package/dist/components/Field/index.d.ts +1 -1
  20. package/dist/components/FiltersMultiSelect/FiltersMultiSelect.d.ts +1 -1
  21. package/dist/components/FormHelperText/types.d.ts +1 -1
  22. package/dist/components/Input/InputBase.d.ts +2 -0
  23. package/dist/components/Input/types.d.ts +2 -0
  24. package/dist/components/Typeahead/Typeahead.context.d.ts +1 -1
  25. package/dist/components/Typeahead/useTypeahead.d.ts +1 -1
  26. package/dist/components/index.d.ts +2 -0
  27. package/dist/index.js +1080 -302
  28. package/dist/index.js.map +1 -1
  29. package/dist/types/emotion.d.ts +1 -0
  30. 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['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,2 @@
1
+ import { DateRangePickerProps } from './types';
2
+ export declare const DateRangePicker: ({ format, openCalendarMode, name, label, value, defaultValue, ...rest }: DateRangePickerProps) => import("@emotion/react/jsx-runtime").JSX.Element;
@@ -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,3 @@
1
+ export declare const DrawerContent: import("react").ForwardRefExoticComponent<{
2
+ children: React.ReactNode;
3
+ } & import("react").RefAttributes<HTMLDivElement>>;
@@ -0,0 +1,4 @@
1
+ export interface DrawerHeaderProps extends React.HTMLAttributes<HTMLDivElement> {
2
+ children?: React.ReactNode;
3
+ }
4
+ export declare const DrawerHeader: import("react").ForwardRefExoticComponent<DrawerHeaderProps & import("react").RefAttributes<HTMLDivElement>>;
@@ -0,0 +1,4 @@
1
+ import { FloatingOverlayProps } from '@floating-ui/react';
2
+ export declare const DrawerOverlay: ({ children, ...props }: {
3
+ children?: React.ReactNode;
4
+ } & FloatingOverlayProps) => import("@emotion/react/jsx-runtime").JSX.Element;
@@ -0,0 +1,2 @@
1
+ import { FloatingPortal } from '@floating-ui/react';
2
+ export declare const DrawerPortal: ({ children, ...props }: React.ComponentProps<typeof FloatingPortal>) => import("@emotion/react/jsx-runtime").JSX.Element;
@@ -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,4 @@
1
+ export interface DrawerTitleProps extends React.HTMLAttributes<HTMLHeadingElement> {
2
+ children?: React.ReactNode;
3
+ }
4
+ export declare const DrawerTitle: import("react").ForwardRefExoticComponent<DrawerTitleProps & import("react").RefAttributes<HTMLHeadingElement>>;
@@ -0,0 +1,2 @@
1
+ export * as Drawer from './index.parts';
2
+ export { useDrawer, UseDrawerOptions } from './useDrawer';
@@ -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,4 +1,4 @@
1
- export * as default from './index.parts';
1
+ export * as Field from './index.parts';
2
2
  export { type FieldRootProps as FieldProps } from './FieldRoot';
3
3
  export { type FieldLabelProps } from './FieldLabel';
4
4
  export { type FieldControlProps } from './FieldControl';
@@ -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;
@@ -2,6 +2,6 @@ import { CommonProps } from '../../types/emotion';
2
2
  export interface FormHelperTextProps extends CommonProps {
3
3
  children: React.ReactNode;
4
4
  role?: string;
5
- status?: string;
5
+ status?: 'error' | 'success' | 'basic' | 'custom';
6
6
  disabled?: boolean;
7
7
  }
@@ -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" | "basic" | "success";
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" | "basic" | "success";
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';