@northlight/ui 2.8.0 → 2.9.0

package/dist/ts/types.d.ts

@@ -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
@@ -2439,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 element was added */
-    onChange?: (option: MultiValue<T> | SingleValue<T>, event: ActionMeta<T>) => void;
+    onChange?: (option: K extends true ? MultiValue<T> : SingleValue<T>, event: ActionMeta<T>) => void;
     onAdd?: (val: unknown) => void;
     onRemove?: (val: unknown) => void;
     /** Used for accessibility */
@@ -2457,15 +2457,14 @@ interface SelectProps<T> extends Omit<Props<T, boolean, GroupBase<T>>, 'onChange
     /** 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;
 };
 
 /**
@@ -2591,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;
 
@@ -3538,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: MultiValue<T> | SingleValue<T>, 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 {
@@ -3551,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 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, 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, 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 };

package/dist/umd/northlight.js

@@ -1605,7 +1605,7 @@
     onChange,
     onAdd,
     onRemove,
-    isMulti,
+    isMulti = false,
     value
   }) => {
     const items = React.useRef(value);
@@ -1694,6 +1694,17 @@
     }, []);
   };
 
+  const useScreenSize = () => {
+    const screenSizes = react.useMediaQuery(["(min-width: 1280px)", "(min-width: 1024px)"]);
+    if (screenSizes[0]) {
+      return "lg";
+    }
+    if (screenSizes[1]) {
+      return "md";
+    }
+    return "sm";
+  };
+
   function Field({
     name,
     label,
@@ -5331,7 +5342,7 @@
     (_a, ref) => {
       var _b = _a, {
         defaultOptions = [],
-        isMulti = false,
+        isMulti,
         customOption = null,
         customTag = null,
         sx = {},
@@ -10841,7 +10852,7 @@
   function Select(_a) {
     var _b = _a, {
       options,
-      isMulti = false,
+      isMulti,
       onChange = ramda.identity,
       onAdd = ramda.identity,
       onRemove = ramda.identity,
@@ -12993,6 +13004,7 @@
   exports.useLoadingMessage = useLoadingMessage;
   exports.useOutsideRectClick = useOutsideRectClick;
   exports.useOverflowGroup = useOverflowGroup;
+  exports.useScreenSize = useScreenSize;
   exports.useScrollToBottom = useScrollToBottom;
   exports.useSelectCallbacks = useSelectCallbacks;
   exports.useSetValueRefreshed = useSetValueRefreshed;