@northlight/ui 2.7.1 → 2.9.0

package/dist/es/northlight.d.mts

@@ -9,9 +9,9 @@ import { RadioGroupState } from '@react-stately/radio';
 import { CSSObject } from '@emotion/react';
 import { DateValue } from '@internationalized/date';
 import { AriaDatePickerProps, AriaDateRangePickerProps } from '@react-aria/datepicker';
-import { Props, GroupBase, ActionMeta, ChakraStylesConfig, SelectInstance, MenuListProps, MultiValue, SingleValue } from 'chakra-react-select';
+import { Props, GroupBase, ActionMeta, ChakraStylesConfig, SelectInstance, MultiValue, SingleValue, MenuListProps } from 'chakra-react-select';
 export { AsyncCreatableSelect, AsyncSelect, Select as ChakraReactSelect, CreatableSelect } from 'chakra-react-select';
-import { DndContextProps, UseDroppableArguments, UseDraggableArguments, UniqueIdentifier, CollisionDetection, SensorDescriptor, SensorOptions } from '@dnd-kit/core';
+import { DndContextProps, UseDroppableArguments, UseDraggableArguments, UniqueIdentifier, CollisionDetection, SensorDescriptor, SensorOptions, Modifiers } from '@dnd-kit/core';
 export * from '@dnd-kit/core';
 import { UseSortableArguments, SortingStrategy, SortableContextProps } from '@dnd-kit/sortable';
 export * from '@dnd-kit/sortable';
@@ -994,7 +994,7 @@ interface SearchBarOptionType {
     value: any;
 }
 type CustomElementType<T extends SearchBarOptionType> = ((props: T) => JSX.Element) | null;
-interface SearchBarProps<T extends SearchBarOptionType> extends Omit<Props<T, boolean, GroupBase<T>>, 'onChange' | 'value'> {
+interface SearchBarProps<T extends SearchBarOptionType, K extends boolean = false> extends Omit<Props<T, boolean, GroupBase<T>>, 'onChange' | 'value'> {
     value?: T | T[];
     onChange?: (val: any, event: ActionMeta<T>) => void;
     onAdd?: (val: unknown) => void;
@@ -1006,14 +1006,14 @@ interface SearchBarProps<T extends SearchBarOptionType> extends Omit<Props<T, bo
     closeMenuonSelect?: boolean;
     defaultOptions?: T[];
     sx?: ChakraStylesConfig<any>;
-    isMulti?: boolean;
+    isMulti?: K;
     customOption?: CustomElementType<T>;
     customTag?: CustomElementType<T>;
     loadOptions?: ((query: string) => Promise<T[]>) | null;
     onSearchInputChange?: (input: string) => void;
     icon?: ComponentType<any>;
 }
-interface SearchBarFieldProps<T extends SearchBarOptionType> extends Omit<SearchBarProps<T>, 'onChange'>, InputFieldProps {
+interface SearchBarFieldProps<T extends SearchBarOptionType, K extends boolean = false> extends Omit<SearchBarProps<T, K>, 'onChange'>, InputFieldProps {
     onChange?: (val: T | T[], event: ActionMeta<T>) => void;
     direction?: StackDirection;
     name: string;
@@ -1022,9 +1022,9 @@ interface SearchBarFieldProps<T extends SearchBarOptionType> extends Omit<Search
     isRequired?: boolean;
 }
 
-declare const SearchBar: <T extends SearchBarOptionType>(props: SearchBarProps<T> & React__default.RefAttributes<SelectInstance<T, boolean, GroupBase<T>>>) => React__default.ReactElement<any, string | React__default.JSXElementConstructor<any>> | null;
+declare const SearchBar: <T extends SearchBarOptionType, K extends boolean = false>(props: SearchBarProps<T, K> & React__default.RefAttributes<SelectInstance<T, K, GroupBase<T>>>) => React__default.ReactElement<any, string | React__default.JSXElementConstructor<any>> | null;
 
-declare const SearchBarField: <T extends SearchBarOptionType>({ name, label, direction, isMulti, isRequired, validate, isClearable, onChange: onChangeCallback, inputLeftElement, inputRightElement, ...rest }: SearchBarFieldProps<T>) => JSX.Element;
+declare const SearchBarField: <T extends SearchBarOptionType, K extends boolean = false>({ name, label, direction, isMulti, isRequired, validate, isClearable, onChange: onChangeCallback, inputLeftElement, inputRightElement, ...rest }: SearchBarFieldProps<T, K>) => JSX.Element;
 
 /**
  * Context used for all drag and drop components
@@ -1078,6 +1078,8 @@ interface SortableListProps<T> {
     disableDrag?: boolean;
     /** callback, passes the dragged item and it's old / new index after a drag, */
     onMovedItem?: ({ item, oldIndex, newIndex }: MovedItemType<T>) => void;
+    /** Read: https://docs.dndkit.com/api-documentation/modifiers#restricting-motion-to-an-axis */
+    modifiers?: Modifiers;
 }
 interface MultiSortProps<itemKeys extends string | number | symbol> {
     children?: ChildrenType$1;
@@ -1387,7 +1389,7 @@ the default behaviour of the rendered component instead of the dragging,
  *
  *
  */
-declare function SortableList<T>({ children, items, collisionDetection, createKey, strategy, onChange, onMovedItem, displayOverlay, sensors, dblClickThreshold, disableDrag, }: SortableListProps<T>): JSX.Element;
+declare function SortableList<T>({ children, items, collisionDetection, createKey, strategy, onChange, onMovedItem, displayOverlay, sensors, dblClickThreshold, disableDrag, modifiers, }: SortableListProps<T>): JSX.Element;
 
 /**
  * Used with multi sort to render a sortable list inside a droppable
@@ -1779,6 +1781,9 @@ declare const IconButton: (props: IconButtonProps & React__default.RefAttributes
 type ModalSizes = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | '4xl' | '5xl' | '6xl' | 'full' | 'huge';
 interface ModalProps extends ModalProps$1 {
     size?: ModalSizes;
+    /** If true then the modal will never unmount but only hide when closing,
+     * stayMountedOnClose is false by default */
+    stayMountedOnClose?: boolean;
 }
 
 interface CompressionType {
@@ -2434,12 +2439,12 @@ interface Option {
     label: string;
     value: string;
 }
-interface SelectProps<T> extends Omit<Props<T, boolean, GroupBase<T>>, 'onChange' | 'value'> {
+interface SelectProps<T, K> extends Omit<Props<T, boolean, GroupBase<T>>, 'onChange' | 'value' | 'isMulti'> {
     /** Whatever is currently selected by the select will be controlled by value prop */
     value?: Option | Option[];
     /** Take a look at the second argument, the event,
-     *  for info as to which specific elmeent was added */
-    onChange?: (val: any, event: ActionMeta<T>) => void;
+     *  for info as to which specific element was added */
+    onChange?: (option: K extends true ? MultiValue<T> : SingleValue<T>, event: ActionMeta<T>) => void;
     onAdd?: (val: unknown) => void;
     onRemove?: (val: unknown) => void;
     /** Used for accessibility */
@@ -2449,16 +2454,17 @@ interface SelectProps<T> extends Omit<Props<T, boolean, GroupBase<T>>, 'onChange
     loadingList?: ComponentType<MenuListProps<T, boolean, GroupBase<T>>> | undefined;
     /** Custom icon that will be put to the faremost right of the component */
     icon?: ComponentType<any>;
+    /** Custom icon that will be put to the faremost left of the component */
+    leftIcon?: ComponentType<any>;
     customOption?: ((option: T) => JSX.Element) | null;
+    isMulti?: K;
 }
-type SelectFieldProps<T, K extends boolean = false> = Omit<SelectProps<T>, 'onChange' | 'isMulti'> & Omit<InputFieldProps, 'isMulti'> & {
-    onChange?: (val: K extends true ? T[] : T, event: ActionMeta<T>) => void;
+type SelectFieldProps<T, K extends boolean = false> = SelectProps<T, K> & Omit<InputFieldProps, 'isMulti'> & {
     direction?: StackDirection;
     name: string;
     label: string;
     validate?: RegisterOptions;
     isRequired?: boolean;
-    isMulti?: K;
 };
 
 /**
@@ -2584,7 +2590,7 @@ render(<CustomSelect />);
  * />
  * ?)
 */
-declare function Select<T extends Option>({ options, isMulti, onChange, onAdd, onRemove, isLoading, loadingList, 'data-testid': testId, customOption, customTag, value, icon, ...rest }: SelectProps<T>): JSX.Element;
+declare function Select<T extends Option, K extends boolean = false>({ options, isMulti, onChange, onAdd, onRemove, isLoading, loadingList, 'data-testid': testId, customOption, customTag, value, icon, ...rest }: SelectProps<T, K>): JSX.Element;
 
 declare function SelectField<T extends Option, K extends boolean = false>({ name, label, options, direction, isMulti, isRequired, validate, isClearable, onChange: onChangeCallback, inputLeftElement, inputRightElement, ...rest }: SelectFieldProps<T, K>): JSX.Element;
 
@@ -3076,7 +3082,8 @@ declare const AsyncError: ({ message, ...rest }: AsyncErrorProps) => JSX.Element
  * @see {@link https://northlight.dev/reference/modal}
  *
  * */
-declare const Modal: ({ isCentered, children, ...rest }: ModalProps) => JSX.Element;
+declare const ModalBase: ({ isCentered, children, ...rest }: ModalProps) => JSX.Element;
+declare const Modal: ({ stayMountedOnClose, isOpen, ...rest }: ModalProps) => JSX.Element;
 
 /**
  * The context provider for handling state of components wrapped in field
@@ -3530,11 +3537,11 @@ declare const useArrowFocus: (columns: number) => {
     focusLast: (opts?: _react_aria_focus.FocusManagerOptions | undefined) => _react_types_shared.FocusableElement;
 };
 
-interface UseSelectCallbacksProps<T> extends Omit<Props<T, boolean, GroupBase<T>>, 'onChange' | 'value'> {
-    onChange: (val: unknown, event: ActionMeta<T>) => void;
+interface UseSelectCallbacksProps<T, K extends boolean = false> extends Omit<Props<T, boolean, GroupBase<T>>, 'onChange' | 'value'> {
+    onChange: (option: K extends true ? MultiValue<T> : SingleValue<T>, event: ActionMeta<T>) => void;
     onAdd: (val: unknown) => void;
     onRemove: (val: unknown) => void;
-    isMulti: boolean;
+    isMulti?: boolean;
     value: T | T[];
 }
 interface BasicOption {
@@ -3543,11 +3550,13 @@ interface BasicOption {
 }
 type SelectActionMeta<T> = ActionMeta<T>;
 
-declare const useSelectCallbacks: <T extends BasicOption>({ onChange, onAdd, onRemove, isMulti, value, }: UseSelectCallbacksProps<T>) => (val: MultiValue<T> | SingleValue<T>, event: ActionMeta<T>) => void;
+declare const useSelectCallbacks: <T extends BasicOption, K extends boolean = false>({ onChange, onAdd, onRemove, isMulti, value, }: UseSelectCallbacksProps<T, K>) => (val: K extends true ? MultiValue<T> : SingleValue<T>, event: ActionMeta<T>) => void;
+
+declare const useOutsideRectClick: (ref: MutableRefObject<HTMLElement | null>, callback: (event: MouseEvent | TouchEvent) => void) => void;
 
-declare const useOutsideRectClick: (ref: MutableRefObject<HTMLElement | null>, callback: () => void) => void;
+declare const useScreenSize: () => "sm" | "md" | "lg";
 
 declare const theme: Record<string, any>;
 declare const tottTheme: Record<string, any>;
 
-export { Accordion, AccordionButton, AccordionItem, AccordionPanel, Alert, AlertProps, AlertVariants, AspectRatio, AsyncError, AsyncErrorProps, Avatar, AvatarBadgeProps, AvatarGroup, AvatarGroupProps, AvatarProps, Badge, BasicOption, Blinker, BlinkerProps, BlockVariant, BlockVariantColorTuple, Blockquote, BodyType, Button, ButtonProps, ButtonVariants, Capitalized, Carousel, Checkbox, CheckboxField, CheckboxFieldProps, CheckboxProps, CheckboxVariants, ChildrenType, Clickable, ClickableProps, ClipboardInput, ClipboardInputProps, Collapse, CollapseProps, Color, ColorButtonProps, ColorGrade, ColorPicker, ColorPickerField, ColorPickerFieldProps, ColorPickerProps, ColorShades, ColorsExpandButtonProps, ConfirmDeleteModalProps, CurrentTheme, CustomContainerPropsType, CustomElementType, CustomFlipButtonProps, CustomFlipButtonPropsType, CustomTheme, DatePicker, DatePickerField, DatePickerFieldProps, DatePickerProps, DateRange, DateRangePicker, DateRangePickerField, DateRangePickerFieldProps, DateRangePickerProps, DragAndDrop, DragHandle, DragHandleProps, DragItem, DragItemProps, Draggable, DraggableProps, DropZone, DropZoneProps, Droppable, DroppableProps, DurationType, EditableControlsProps, EditableProps, EditableSizes, EditableText, Fade, FadeProps, FastGrid, FastGridProps, FastList, FastListProps, Field, FieldErrorType, FieldProps, FileEditorModalProps, FileFormat, FileIconButtonProps, FileItemProps, FilePicker, FilePickerField, FilePickerFieldProps, FilePickerProps, FileWithSizeAndType, FileWithSrcNameType, FileWithType, FlipButton, FlipButtonGroup, FlipButtonGroupField, FlipButtonGroupFieldProps, FlipButtonGroupProps, FlipButtonProps, Form, FormBody, FormLabel, FormLabelProps, FormProps, FormattedNumberInput, FormattedNumberInputProps, H1, H2, H3, H4, H5, H6, HeadingProps, HeadingType, Icon, IconButton, IconButtonProps, IconProps, InputFieldProps, Label, LabelProps, LabelSizes, LabelType, Lead, ListenersType, MaskedTextInput, MaskedTextInputProps, MediatoolThemeProvider, MediatoolThemeProviderProps, Message, Modal, ModalBooleans, ModalProps, ModalSizes, MultiFileList, MultiFileListProps, MultiFilePicker, MultiFilePickerField, MultiFilePickerFieldProps, MultiFilePickerProps, MultiFileUploader, MultiFileUploaderProps, MultiItemType, MultiSort, MultiSortProps, NotificationIconButton, NotificationIconButtonProps, NumberInput, NumberInputField, NumberInputFieldProps, NumberInputProps, NumberInputSizeProps, NumberInputStepperProps, OffsetType, Option, OrganizationLogo, OrganizationLogoProps, OverflowGroup, OverflowGroupProps, OverflowIndicatorProps, P, PProps, PaneDivider, PaneItem, PinInput, PinInputProps, PinSize, PinSizeTuple, PinVariant, ProgressBar, Radio, RadioFieldGroupProps, RadioFieldProps, RadioGroup, RadioGroupField, RadioGroupProps, RadioProps, ScaleFade, ScaleFadeProps, SearchBar, SearchBarField, SearchBarFieldProps, SearchBarOptionType, SearchBarProps, Select, SelectActionMeta, SelectField, SelectFieldProps, SelectProps, SetValueOptionsType, Slide, SlideFade, SlideFadeProps, SlideProps, Small, Sortable, SortableContainer, SortableContainerProps, SortableItem, SortableItemProps, SortableList, SortableListProps, Spinner, SpinnerProps, SplitPane, SplitPaneProps, StatusBlock, StatusBlockProps, StatusPin, StatusPinProps, Step, StepList, StepListProps, StepPanel, StepPanelProps, StepProps, StepStack, Steps, StepsProps, StylizedType, Switch, SwitchField, SwitchFieldProps, SwitchProps, TabPanel, TabPanelProps, Tabs, TabsProps, Tag, TagGroup, TagGroupProps, TagProps, TextField, TextFieldProps, TextInputFormatter, TextSizeProps, Textarea, TextareaField, TextareaFieldProps, TextareaProps, Tiny, Toast, ToastProps, Toolbox, ToolboxContent, ToolboxContentProps, ToolboxFooter, ToolboxFooterProps, ToolboxHeader, ToolboxHeaderProps, ToolboxProps, TransitionDirection, UseFormReturn, UseSelectCallbacksProps, UseToastOptions, addAlpha, advancedParseFloat, createDebounceFunctionInstance, getChildrenWithProps, getContrastColor, getFieldError, getInitials, getShades, highlight, luminosity, ring, statusIconMap, theme, tottTheme, trimFormValues, useArrowFocus, useCurrentTheme, useDebounce, useLoadingMessage, useOutsideRectClick, useOverflowGroup, useScrollToBottom, useSelectCallbacks, useSetValueRefreshed, useToast };
+export { Accordion, AccordionButton, AccordionItem, AccordionPanel, Alert, AlertProps, AlertVariants, AspectRatio, AsyncError, AsyncErrorProps, Avatar, AvatarBadgeProps, AvatarGroup, AvatarGroupProps, AvatarProps, Badge, BasicOption, Blinker, BlinkerProps, BlockVariant, BlockVariantColorTuple, Blockquote, BodyType, Button, ButtonProps, ButtonVariants, Capitalized, Carousel, Checkbox, CheckboxField, CheckboxFieldProps, CheckboxProps, CheckboxVariants, ChildrenType, Clickable, ClickableProps, ClipboardInput, ClipboardInputProps, Collapse, CollapseProps, Color, ColorButtonProps, ColorGrade, ColorPicker, ColorPickerField, ColorPickerFieldProps, ColorPickerProps, ColorShades, ColorsExpandButtonProps, ConfirmDeleteModalProps, CurrentTheme, CustomContainerPropsType, CustomElementType, CustomFlipButtonProps, CustomFlipButtonPropsType, CustomTheme, DatePicker, DatePickerField, DatePickerFieldProps, DatePickerProps, DateRange, DateRangePicker, DateRangePickerField, DateRangePickerFieldProps, DateRangePickerProps, DragAndDrop, DragHandle, DragHandleProps, DragItem, DragItemProps, Draggable, DraggableProps, DropZone, DropZoneProps, Droppable, DroppableProps, DurationType, EditableControlsProps, EditableProps, EditableSizes, EditableText, Fade, FadeProps, FastGrid, FastGridProps, FastList, FastListProps, Field, FieldErrorType, FieldProps, FileEditorModalProps, FileFormat, FileIconButtonProps, FileItemProps, FilePicker, FilePickerField, FilePickerFieldProps, FilePickerProps, FileWithSizeAndType, FileWithSrcNameType, FileWithType, FlipButton, FlipButtonGroup, FlipButtonGroupField, FlipButtonGroupFieldProps, FlipButtonGroupProps, FlipButtonProps, Form, FormBody, FormLabel, FormLabelProps, FormProps, FormattedNumberInput, FormattedNumberInputProps, H1, H2, H3, H4, H5, H6, HeadingProps, HeadingType, Icon, IconButton, IconButtonProps, IconProps, InputFieldProps, Label, LabelProps, LabelSizes, LabelType, Lead, ListenersType, MaskedTextInput, MaskedTextInputProps, MediatoolThemeProvider, MediatoolThemeProviderProps, Message, Modal, ModalBase, ModalBooleans, ModalProps, ModalSizes, MultiFileList, MultiFileListProps, MultiFilePicker, MultiFilePickerField, MultiFilePickerFieldProps, MultiFilePickerProps, MultiFileUploader, MultiFileUploaderProps, MultiItemType, MultiSort, MultiSortProps, NotificationIconButton, NotificationIconButtonProps, NumberInput, NumberInputField, NumberInputFieldProps, NumberInputProps, NumberInputSizeProps, NumberInputStepperProps, OffsetType, Option, OrganizationLogo, OrganizationLogoProps, OverflowGroup, OverflowGroupProps, OverflowIndicatorProps, P, PProps, PaneDivider, PaneItem, PinInput, PinInputProps, PinSize, PinSizeTuple, PinVariant, ProgressBar, Radio, RadioFieldGroupProps, RadioFieldProps, RadioGroup, RadioGroupField, RadioGroupProps, RadioProps, ScaleFade, ScaleFadeProps, SearchBar, SearchBarField, SearchBarFieldProps, SearchBarOptionType, SearchBarProps, Select, SelectActionMeta, SelectField, SelectFieldProps, SelectProps, SetValueOptionsType, Slide, SlideFade, SlideFadeProps, SlideProps, Small, Sortable, SortableContainer, SortableContainerProps, SortableItem, SortableItemProps, SortableList, SortableListProps, Spinner, SpinnerProps, SplitPane, SplitPaneProps, StatusBlock, StatusBlockProps, StatusPin, StatusPinProps, Step, StepList, StepListProps, StepPanel, StepPanelProps, StepProps, StepStack, Steps, StepsProps, StylizedType, Switch, SwitchField, SwitchFieldProps, SwitchProps, TabPanel, TabPanelProps, Tabs, TabsProps, Tag, TagGroup, TagGroupProps, TagProps, TextField, TextFieldProps, TextInputFormatter, TextSizeProps, Textarea, TextareaField, TextareaFieldProps, TextareaProps, Tiny, Toast, ToastProps, Toolbox, ToolboxContent, ToolboxContentProps, ToolboxFooter, ToolboxFooterProps, ToolboxHeader, ToolboxHeaderProps, ToolboxProps, TransitionDirection, UseFormReturn, UseSelectCallbacksProps, UseToastOptions, addAlpha, advancedParseFloat, createDebounceFunctionInstance, getChildrenWithProps, getContrastColor, getFieldError, getInitials, getShades, highlight, luminosity, ring, statusIconMap, theme, tottTheme, trimFormValues, useArrowFocus, useCurrentTheme, useDebounce, useLoadingMessage, useOutsideRectClick, useOverflowGroup, useScreenSize, useScrollToBottom, useSelectCallbacks, useSetValueRefreshed, useToast };