@northlight/ui 2.22.2 → 2.24.0

package/dist/es/northlight.d.ts

@@ -32,6 +32,8 @@ import { Props as Props$1 } from 'react-input-mask';
 import { NumericFormatProps } from 'react-number-format';
 import { Schema } from 'joi';
 import { UseClickableProps } from '@chakra-ui/clickable';
+import { Option as Option$1 } from '@northlight/ui';
+import { Variant } from 'chakra-react-select/dist/types/types';
 import * as _react_types_shared from '@react-types/shared';
 import * as _react_aria_focus from '@react-aria/focus';
 
@@ -3345,7 +3347,7 @@ declare const useToast: (defaultOpts?: UseToastOptions) => (opts?: UseToastOptio
 type TooltipVariants = 'success' | 'warning' | 'error' | 'info' | 'danger' | 'ai' | 'default' | 'ghost';
 interface OurTooltipProps extends TooltipProps {
     variant?: TooltipVariants;
-    description?: string;
+    description?: React.ReactNode;
     hasIcon?: boolean;
 }
 
@@ -3368,6 +3370,29 @@ interface OurTooltipProps extends TooltipProps {
  *    >
  *      <Badge>NOICON</Badge>
  *    </Tooltip>
+ *    <Tooltip
+ *      hasIcon={ false }
+ *      description={
+ *        <Box>
+ *          <Text>
+ *            Some text
+ *          </Text>
+ *          <UnorderedList>
+ *            <ListItem>
+ *              List item 1
+ *            </ListItem>
+ *            <ListItem>
+ *              List item 2
+ *            </ListItem>
+ *            <ListItem>
+ *              List item 3
+ *            </ListItem>
+ *          </UnorderedList>
+ *        </Box>
+ *      }
+ *    >
+ *      <Badge>With JSX content</Badge>
+ *    </Tooltip>
  * </HStack>
  * ?)
  *
@@ -4110,6 +4135,125 @@ interface StepStackProps extends StackProps {
 */
 declare const StepStack: ({ children, spacing, rowHeight, stepCircleAlignment, stepCircleMarginTopPx, ...rest }: StepStackProps) => JSX.Element;
 
+interface CreationOption extends Option$1 {
+    isCreation: boolean;
+}
+interface CreatableSelectDropdownProps {
+    /**
+     * An array of "Option" objects that represents the initial options available in the dropdown.
+     * Each "Option" object must have a "label" and a "value" property (both strings).
+     */
+    standardOptions: Option$1[];
+    /**
+     * A callback function that is called whenever the selected option changes.
+     * This function receives the newly selected "Option" object as its only argument.
+     */
+    onOptionChange: (option: Option$1) => void;
+    /**
+     * Optional placeholder text displayed when no option is selected and the dropdown is not focused.
+     * Defaults to 'Select or create...' if not provided.
+     */
+    initialPlaceholder?: string;
+    /**
+     * Optional placeholder text displayed when the dropdown is
+     * focused and the user is prompted to create a new option.
+     * Defaults to 'Enter text...' if not provided.
+     */
+    addOptionPlaceholder?: string;
+    /**
+     * Optional "Option" object representing the option to create a new item within the dropdown.
+     * This option is typically displayed at the top of the dropdown list.
+     * Defaults to "{ label: 'Add option...', value: 'Add option...' }" if not provided.
+     */
+    creationOption?: CreationOption;
+    /**
+     * Optional CSS width property value for the dropdown container.
+     * Specify the width of the dropdown. Defaults to '100%' if not provided.
+     */
+    width?: string;
+    /**
+     * An optional string that determines the overall styling of the select field.
+     * Accepted values are 'outline', 'filled', 'flushed', or 'unstyled'.
+     * The default value is 'outline'.
+     *
+    */
+    variant?: Variant;
+    /**
+     * Value of the initially selected option.
+     */
+    initialValue?: string;
+}
+
+/**
+ * A dropdown component that allows users to select a value from given options
+ * or create a new one if it doesn't exist.
+ * @see {@link https://northlight.dev/reference/creatable-select-dropdown}
+ *
+ * @example (Example)
+ * (?
+ * () => {
+ *   const [artist, setArtist] = useState(null);
+ *   const [element, setElement] = useState({ label: 'Technique', value: 'technique' })
+ *   const someOptions = [
+ *     { label: 'Scooter', value: 'scooter' },
+ *     { label: 'Snoop Doggy Dogg', value: 'snoop-dogg' },
+ *   ];
+ *
+*   const someOtherOptions = [
+ *     { label: 'Vision', value: 'vision' },
+ *     { label: 'Technique', value: 'technique' },
+ *     { label: 'Expression', value: 'expression' }
+ *   ];
+ *
+ *   return (
+ *     <VStack gap={10} alignItems={"flex-start"}>
+ *       <Box align="left">
+ *         <H1>Basic example</H1>
+ *         <H3>Select the best artist</H3>
+ *         <CreatableSelectDropdown
+ *           standardOptions={someOptions}
+ *           onOptionChange={setArtist}
+ *           width="300px"
+ *         />
+ *         {artist && artist.value !== 'Add option...' && (
+ *           <H3 py={8}>The best artist is: {artist.label}</H3>
+ *         )}
+ *       </Box>
+ *       <Box align="left">
+ *         <H1>Pre-selected option</H1>
+ *         <H3>What is the quintessential element of an exceptional artisan?</H3>
+ *         <CreatableSelectDropdown
+ *           standardOptions={someOtherOptions}
+ *           onOptionChange={setElement}
+ *           width="300px"
+ *           initialValue="technique"
+ *         />
+ *         {element && element.value !== 'Add option...' && (
+ *           <H3 py={8}>
+ *             {element.value === 'vision' && (
+ *               'The artist\'s vision shapes their creative world.'
+ *             )}
+ *             {element.value === 'technique' && (
+ *               'Technique is the legacy\'s bedrock.'
+ *             )}
+ *             {element.value === 'expression' && (
+ *               'Expression communicates the artist\'s inner voice.'
+ *             )}
+ *             {element.value !== 'vision' &&
+ *                element.value !== 'technique' &&
+ *                element.value !== 'expression' && (
+ *               'Absent the selection of legitimate alternatives.'
+ *              )}
+ *           </H3>
+ *         )}
+ *       </Box>
+ *     </VStack>
+ *   );
+ * }
+ * ?)
+ */
+declare const CreatableSelectDropdown: ({ standardOptions, initialPlaceholder, addOptionPlaceholder, creationOption, onOptionChange, width, variant, initialValue, }: CreatableSelectDropdownProps) => JSX.Element;
+
 declare const useDebounce: <T>(value: T, delay: number) => T;
 
 declare const useLoadingMessage: (prefix?: string, delay?: number) => string;
@@ -4174,4 +4318,4 @@ declare const useResizeWidth: ({ stationaryEdge, minWidthPx, maxWidthPx, default
 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, 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, StatusBlock, StatusBlockProps, 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, clamp, createDebounceFunctionInstance, getChildrenWithProps, getContrastColor, getFieldError, getInitials, getMatchingValue, getShades, highlight, luminosity, ring, statusIconMap, 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, 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, CreatableSelectDropdown, 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, 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, StatusBlock, StatusBlockProps, 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, clamp, createDebounceFunctionInstance, getChildrenWithProps, getContrastColor, getFieldError, getInitials, getMatchingValue, getShades, highlight, luminosity, ring, statusIconMap, theme, tottTheme, trimFormValues, useArrowFocus, useCurrentTheme, useDebounce, useDidUpdateEffect, useLoadingMessage, useOutsideRectClick, useOverflowGroup, useResizeWidth, useScreenSize, useScrollToBottom, useSelectCallbacks, useSetValueRefreshed, useToast };