@northlight/ui 2.38.3 → 2.39.0

package/dist/es/northlight.d.ts

@@ -295,6 +295,286 @@ declare const SelectField: <T extends Option<string>, K extends boolean = false>
     onChange?: ((option: K extends true ? react_select_dist_declarations_src_types.MultiValue<T> | undefined : react_select_dist_declarations_src_types.SingleValue<T> | undefined, event: react_select.ActionMeta<T>) => void) | undefined;
 } & React__default.RefAttributes<HTMLDivElement>) => React__default.ReactElement<any, string | React__default.JSXElementConstructor<any>> | null;
 
+interface SortableSelectProps<T extends Option> extends Omit<SelectProps<T, true>, 'isMulti'> {
+    /** The currently selected options */
+    value?: T[] | string[];
+    /** Callback when the order or selection changes */
+    onChange?: (selected: MultiValue<T>, event: ActionMeta<T>) => void;
+}
+/**
+ * SortableSelect component that provides drag-and-drop reordering for multi-select options.
+ * It is built on top of the Select component with @dnd-kit integration.
+ *
+ * Drag-and-drop reordering.
+ * Supports both string arrays and option objects as values.
+ * Preserves order from value prop (not options order).
+ * Works seamlessly with react-hook-form.
+ * All Select component props and styling supported.
+ *
+ * @see Select
+ * @see MultiSort
+ * @see Draggable
+ * @see {@link https://northlight.dev/reference/sortable-select}
+ *
+ * @example (Example)
+ * ## Basic Usage with String Array
+ * (?
+ * +
+ * const MyComponent = () => {
+ *   const [selected, setSelected] = useState(['USD', 'EUR', 'GBP'])
+ *
+ *   const currencyOptions = [
+ *     { label: 'US Dollar', value: 'USD' },
+ *     { label: 'Euro', value: 'EUR' },
+ *     { label: 'British Pound', value: 'GBP' },
+ *     { label: 'Japanese Yen', value: 'JPY' },
+ *   ]
+ *
+ *   return (
+ *     <SortableSelect
+ *       options={currencyOptions}
+ *       value={selected}
+ *       onChange={(value) => setSelected((value || []).map(v => v.value))}
+ *       placeholder="Select currencies"
+ *     />
+ *   )
+ * }
+ *
+ * render(<MyComponent />)
+ * ?)
+ *
+ * @example (Example)
+ * ## Usage with Option Objects
+ * (?
+ * +
+ * const MyComponent = () => {
+ *   const [selected, setSelected] = useState([
+ *     { label: 'Apple', value: 'apple' },
+ *     { label: 'Banana', value: 'banana' }
+ *   ])
+ *
+ *   const fruitOptions = [
+ *     { label: 'Apple', value: 'apple' },
+ *     { label: 'Banana', value: 'banana' },
+ *     { label: 'Cherry', value: 'cherry' },
+ *     { label: 'Date', value: 'date' },
+ *   ]
+ *
+ *   return (
+ *     <SortableSelect
+ *       options={fruitOptions}
+ *       value={selected}
+ *       onChange={(value) => setSelected(value || [])}
+ *     />
+ *   )
+ * }
+ *
+ * render(<MyComponent />)
+ * ?)
+ *
+ * @example (Example)
+ * ## React Hook Form Integration
+ * _Use with react-hook-form for controlled form state with reordering_
+ * (?
+ * +
+ * const tagOptions = [
+ *   { label: 'React', value: 'react' },
+ *   { label: 'TypeScript', value: 'typescript' },
+ *   { label: 'JavaScript', value: 'javascript' },
+ *   { label: 'Node.js', value: 'nodejs' },
+ * ]
+ *
+ * const MyFormFields = () => {
+ *   const { setValue } = useFormContext()
+ *   const selectedTags = useWatch({ name: 'tags' })
+ *
+ *   const handleChange = (value, actionMeta) => {
+ *     const tags = (value || []).map(v => v.value)
+ *     setValue('tags', tags, {
+ *       shouldDirty: true,
+ *       shouldValidate: true,
+ *     })
+ *   }
+ *
+ *   return (
+ *     <SortableSelect
+ *       name="tags"
+ *       options={tagOptions}
+ *       value={selectedTags}
+ *       onChange={handleChange}
+ *     />
+ *   )
+ * }
+ *
+ * const MyForm = () => (
+ *   <Form
+ *     initialValues={{ tags: ['react'] }}
+ *     onSubmit={(values) => console.log(values)}
+ *   >
+ *     {() => <MyFormFields />}
+ *   </Form>
+ * )
+ *
+ * render(<MyForm />)
+ * ?)
+ *
+ * @example (Example)
+ * ## Handling Different Actions
+ * (?
+ * +
+ * const MyComponent = () => {
+ *   const [selected, setSelected] = useState(['red'])
+ *
+ *   const options = [
+ *     { label: 'Red', value: 'red' },
+ *     { label: 'Green', value: 'green' },
+ *     { label: 'Blue', value: 'blue' },
+ *   ]
+ *
+ *   const handleChange = (value, actionMeta) => {
+ *     const { action, removedValue, option } = actionMeta
+ *
+ *     switch (action) {
+ *       case 'select-option':
+ *         console.log('Added:', option)
+ *         break
+ *       case 'remove-value':
+ *         console.log('Removed:', removedValue)
+ *         break
+ *       case 'clear':
+ *         console.log('Reordered:', value?.map(v => v.value))
+ *         break
+ *     }
+ *
+ *     setSelected((value || []).map(v => v.value))
+ *   }
+ *
+ *   return (
+ *     <SortableSelect
+ *       options={options}
+ *       value={selected}
+ *       onChange={handleChange}
+ *     />
+ *   )
+ * }
+ *
+ * render(<MyComponent />)
+ * ?)
+ *
+ * @example (Example)
+ * ## Customizing Selected Options
+ * _Customize the appearance of selected option pills while keeping drag functionality_
+ * (?
+ * +
+ * const MyComponent = () => {
+ *   const [selected, setSelected] = useState(['js', 'ts'])
+ *
+ *   const options = [
+ *     { label: 'JavaScript', value: 'js' },
+ *     { label: 'TypeScript', value: 'ts' },
+ *     { label: 'Python', value: 'py' },
+ *     { label: 'Rust', value: 'rust' },
+ *   ]
+ *
+ *   return (
+ *     <SortableSelect
+ *       options={options}
+ *       value={selected}
+ *       onChange={(value) => setSelected((value || []).map(v => v.value))}
+ *       components={{
+ *         MultiValueLabel: (props) => (
+ *           <HStack spacing={1} px={2}>
+ *             <Icon as={Code} />
+ *             <Text>{props.children}</Text>
+ *           </HStack>
+ *         )
+ *       }}
+ *       chakraStyles={{
+ *         multiValue: (styles) => ({
+ *           ...styles,
+ *           backgroundColor: 'purple.100',
+ *           borderRadius: 'full',
+ *         }),
+ *       }}
+ *     />
+ *   )
+ * }
+ *
+ * render(<MyComponent />)
+ * ?)
+ *
+ * @example (Example)
+ * ## With Custom Tag Component
+ * _Use customTag prop for simpler customization_
+ * (?
+ * +
+ * const customTag = ({ label }) => (
+ *   <HStack spacing={1} px={2} py={1} bg="blue.50" borderRadius="md">
+ *     <Badge colorScheme="blue" variant="solid" fontSize="xs">NEW</Badge>
+ *     <Text fontSize="sm" fontWeight="medium">{label}</Text>
+ *   </HStack>
+ * )
+ *
+ * const MyComponent = () => {
+ *   const [selected, setSelected] = useState(['react'])
+ *
+ *   return (
+ *     <SortableSelect
+ *       options={[
+ *         { label: 'React', value: 'react' },
+ *         { label: 'Vue', value: 'vue' },
+ *         { label: 'Angular', value: 'angular' },
+ *       ]}
+ *       value={selected}
+ *       onChange={(value) => setSelected((value || []).map(v => v.value))}
+ *       customTag={customTag}
+ *     />
+ *   )
+ * }
+ *
+ * render(<MyComponent />)
+ * ?)
+ *
+ * @example (Example)
+ * ## Disabled State
+ * (?
+ * <SortableSelect
+ *   options={[
+ *     { label: 'Admin', value: 'admin' },
+ *     { label: 'Editor', value: 'editor' },
+ *     { label: 'Viewer', value: 'viewer' },
+ *   ]}
+ *   value={['viewer']}
+ *   onChange={(value) => console.log('Changed:', value)}
+ *   isDisabled={true}
+ *   placeholder="Select items (disabled)"
+ * />
+ * ?)
+ *
+ * @example (Example)
+ * ## With Styling
+ * (?
+ * <SortableSelect
+ *   options={[
+ *     { label: 'Apple', value: 'apple' },
+ *     { label: 'Banana', value: 'banana' },
+ *     { label: 'Orange', value: 'orange' },
+ *     { label: 'Pear', value: 'pear' },
+ *   ]}
+ *   value={['apple', 'banana']}
+ *   onChange={(value) => console.log('Changed:', value)}
+ *   colorScheme="blue"
+ *   chakraStyles={{
+ *     multiValue: (styles) => ({
+ *       ...styles,
+ *       backgroundColor: 'red.100',
+ *     }),
+ *   }}
+ * />
+ * ?)
+ */
+declare const SortableSelect: <T extends Option<string>>({ value, onChange, components: customComponents, options, ...rest }: SortableSelectProps<T>) => JSX.Element;
+
 declare const getMatchingValue: <T extends Option<string>, K extends boolean>(value: (K extends true ? string[] | T[] : string | T | null) | undefined, options: react_select.OptionsOrGroups<T, react_select.GroupBase<T>> | undefined) => T | T[] | undefined;
 
 interface TagsInputProps<T> extends Omit<SelectProps<T, true>, 'value' | 'formatCreateLabel' | 'isValidNewOption' | 'onAdd' | 'onRemove' | 'leftIcon' | 'icon' | 'customOption'> {
@@ -4574,4 +4854,4 @@ declare const theme: Record<string, any>;
 declare const tottTheme: Record<string, any>;
 declare const camphouseLightTheme: Record<string, any>;
 
-export { Accordion, AccordionButton, AccordionItem, AccordionPanel, Alert, AlertProps, AlertVariants, AspectRatio, AsyncError, AsyncErrorProps, Avatar, AvatarBadgeProps, AvatarGroup, AvatarGroupProps, AvatarProps, Badge, BasicOption, Blinker, BlinkerProps, Blockquote, BodyType, Button, ButtonProps, ButtonVariants, Capitalized, Carousel, Checkbox, CheckboxField, CheckboxFieldGroupProps, CheckboxFieldProps, CheckboxGroupField, CheckboxProps, CheckboxVariants, ChildrenType$1 as ChildrenType, Clickable, ClickableProps, ClipboardInput, ClipboardInputProps, Collapse, CollapseProps, Color, ColorButtonProps, ColorGrade, ColorPicker, ColorPickerField, ColorPickerFieldProps, ColorPickerProps, ColorShades, ColorsExpandButtonProps, ComboPicker, ComboPickerField, ComboPickerFieldProps, ComboPickerOption, ComboPickerProps, ComboPickerValue, ConfirmDeleteModalProps, CreatableSelectDropdown, CurrentTheme, CustomContainerPropsType, CustomElementType, CustomFlipButtonProps, CustomFlipButtonPropsType, CustomTheme, DatePicker, DatePickerField, DatePickerFieldProps, DatePickerLocaleWrapper, DatePickerProps, DateRange, DateRangePicker, DateRangePickerField, DateRangePickerFieldProps, DateRangePickerProps, DragAndDrop, DragHandle, DragHandleProps, DragItem, DragItemProps, Draggable, DraggableProps, DropZone, DropZoneProps, Droppable, DroppableProps, DurationType, EditableControlsProps, EditableProps, EditableSizes, EditableText, EditableVariant, 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, FormattedNumberInputField, FormattedNumberInputFieldProps, FormattedNumberInputPreset, FormattedNumberInputProps, H1, H2, H3, H4, H5, H6, HeadingProps, HeadingType, Icon, IconButton, IconButtonProps, IconProps, InputFieldProps, IntentButton, Label, LabelProps, LabelSizes, LabelType, Lead, ListenersType, LoadingBar, MaskedTextInput, MaskedTextInputProps, MediatoolThemeProvider, MediatoolThemeProviderProps, Menu, MenuProps, MenuVariants, Message, Modal, ModalBase, ModalBody, ModalBooleans, ModalProps, ModalSizes, MultiFileList, MultiFileListProps, MultiFilePicker, MultiFilePickerField, MultiFilePickerFieldProps, MultiFilePickerProps, MultiFileUploader, MultiFileUploaderProps, MultiItemType, MultiSort, MultiSortProps, NotificationIconButton, NotificationIconButtonProps, NumVal, NumValType, NumberInput, NumberInputField, NumberInputFieldProps, NumberInputProps, NumberInputSizeProps, NumberInputStepperProps, OffsetType, Option, OrganizationLogo, OrganizationLogoProps, OverflowGroup, OverflowGroupProps, OverflowIndicatorProps, P, PProps, PaneDivider, PaneItem, PinInput, PinInputProps, PinSize, PinSizeTuple, PinVariant, Popover, PresetOptions, ProgressBar, ProgressBarProps, Radio, RadioFieldGroupProps, RadioFieldProps, RadioGroup, RadioGroupField, RadioGroupProps, RadioProps, ResizeHandle, 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, StatusPin, StatusPinProps, Step, StepList, StepListProps, StepPanel, StepPanelProps, StepProps, StepStack, Steps, StepsProps, StylizedType, Switch, SwitchField, SwitchFieldProps, SwitchProps, TabPanel, TabPanelProps, Table, TableProps, Tabs, TabsProps, Tag, TagGroup, TagGroupProps, TagProps, TagsInput, TagsInputProps, TextField, TextFieldProps, TextInputFormatter, TextSizeProps, Textarea, TextareaField, TextareaFieldProps, TextareaProps, Tiny, Toast, ToastProps, Toolbox, ToolboxContent, ToolboxContentProps, ToolboxFooter, ToolboxFooterProps, ToolboxHeader, ToolboxHeaderProps, ToolboxProps, Tooltip, TransitionDirection, UseFormReturn, UseSelectCallbacksProps, UseToastOptions, addAlpha, advancedParseFloat, camphouseLightTheme, clamp, createDebounceFunctionInstance, getChildrenWithProps, getConsistentRandomColorFromString, getContrastColor, getFieldError, getInitials, getMatchingValue, getShades, highlight, luminosity, ring, theme, tottTheme, trimFormValues, useArrowFocus, useCurrentTheme, useDebounce, useDidUpdateEffect, useLoadingMessage, useOutsideRectClick, useOverflowGroup, useResizeWidth, useScreenSize, useScrollToBottom, useSelectCallbacks, useSetValueRefreshed, useToast };
+export { Accordion, AccordionButton, AccordionItem, AccordionPanel, Alert, AlertProps, AlertVariants, AspectRatio, AsyncError, AsyncErrorProps, Avatar, AvatarBadgeProps, AvatarGroup, AvatarGroupProps, AvatarProps, Badge, BasicOption, Blinker, BlinkerProps, Blockquote, BodyType, Button, ButtonProps, ButtonVariants, Capitalized, Carousel, Checkbox, CheckboxField, CheckboxFieldGroupProps, CheckboxFieldProps, CheckboxGroupField, CheckboxProps, CheckboxVariants, ChildrenType$1 as ChildrenType, Clickable, ClickableProps, ClipboardInput, ClipboardInputProps, Collapse, CollapseProps, Color, ColorButtonProps, ColorGrade, ColorPicker, ColorPickerField, ColorPickerFieldProps, ColorPickerProps, ColorShades, ColorsExpandButtonProps, ComboPicker, ComboPickerField, ComboPickerFieldProps, ComboPickerOption, ComboPickerProps, ComboPickerValue, ConfirmDeleteModalProps, CreatableSelectDropdown, CurrentTheme, CustomContainerPropsType, CustomElementType, CustomFlipButtonProps, CustomFlipButtonPropsType, CustomTheme, DatePicker, DatePickerField, DatePickerFieldProps, DatePickerLocaleWrapper, DatePickerProps, DateRange, DateRangePicker, DateRangePickerField, DateRangePickerFieldProps, DateRangePickerProps, DragAndDrop, DragHandle, DragHandleProps, DragItem, DragItemProps, Draggable, DraggableProps, DropZone, DropZoneProps, Droppable, DroppableProps, DurationType, EditableControlsProps, EditableProps, EditableSizes, EditableText, EditableVariant, 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, FormattedNumberInputField, FormattedNumberInputFieldProps, FormattedNumberInputPreset, FormattedNumberInputProps, H1, H2, H3, H4, H5, H6, HeadingProps, HeadingType, Icon, IconButton, IconButtonProps, IconProps, InputFieldProps, IntentButton, Label, LabelProps, LabelSizes, LabelType, Lead, ListenersType, LoadingBar, MaskedTextInput, MaskedTextInputProps, MediatoolThemeProvider, MediatoolThemeProviderProps, Menu, MenuProps, MenuVariants, Message, Modal, ModalBase, ModalBody, ModalBooleans, ModalProps, ModalSizes, MultiFileList, MultiFileListProps, MultiFilePicker, MultiFilePickerField, MultiFilePickerFieldProps, MultiFilePickerProps, MultiFileUploader, MultiFileUploaderProps, MultiItemType, MultiSort, MultiSortProps, NotificationIconButton, NotificationIconButtonProps, NumVal, NumValType, NumberInput, NumberInputField, NumberInputFieldProps, NumberInputProps, NumberInputSizeProps, NumberInputStepperProps, OffsetType, Option, OrganizationLogo, OrganizationLogoProps, OverflowGroup, OverflowGroupProps, OverflowIndicatorProps, P, PProps, PaneDivider, PaneItem, PinInput, PinInputProps, PinSize, PinSizeTuple, PinVariant, Popover, PresetOptions, ProgressBar, ProgressBarProps, Radio, RadioFieldGroupProps, RadioFieldProps, RadioGroup, RadioGroupField, RadioGroupProps, RadioProps, ResizeHandle, 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, SortableSelect, SortableSelectProps, Spinner, SpinnerProps, SplitPane, SplitPaneProps, StatusPin, StatusPinProps, Step, StepList, StepListProps, StepPanel, StepPanelProps, StepProps, StepStack, Steps, StepsProps, StylizedType, Switch, SwitchField, SwitchFieldProps, SwitchProps, TabPanel, TabPanelProps, Table, TableProps, Tabs, TabsProps, Tag, TagGroup, TagGroupProps, TagProps, TagsInput, TagsInputProps, TextField, TextFieldProps, TextInputFormatter, TextSizeProps, Textarea, TextareaField, TextareaFieldProps, TextareaProps, Tiny, Toast, ToastProps, Toolbox, ToolboxContent, ToolboxContentProps, ToolboxFooter, ToolboxFooterProps, ToolboxHeader, ToolboxHeaderProps, ToolboxProps, Tooltip, TransitionDirection, UseFormReturn, UseSelectCallbacksProps, UseToastOptions, addAlpha, advancedParseFloat, camphouseLightTheme, clamp, createDebounceFunctionInstance, getChildrenWithProps, getConsistentRandomColorFromString, getContrastColor, getFieldError, getInitials, getMatchingValue, getShades, highlight, luminosity, ring, theme, tottTheme, trimFormValues, useArrowFocus, useCurrentTheme, useDebounce, useDidUpdateEffect, useLoadingMessage, useOutsideRectClick, useOverflowGroup, useResizeWidth, useScreenSize, useScrollToBottom, useSelectCallbacks, useSetValueRefreshed, useToast };