@northlight/ui 2.27.1 → 2.27.3

package/dist/es/northlight.d.ts

@@ -1,9 +1,9 @@
-import { AccordionProps, AccordionButtonProps, AccordionPanelProps, AccordionItemProps, StackDirection, AvatarProps as AvatarProps$1, AlertProps as AlertProps$1, AspectRatioProps, StackProps, BadgeProps, ButtonProps as ButtonProps$1, CheckboxProps as CheckboxProps$1, IconButtonProps as IconButtonProps$1, PopoverProps, BoxProps, InputProps, CenterProps, FlexProps, TagProps as TagProps$1, IconProps as IconProps$1, SystemStyleObject, HeadingProps as HeadingProps$1, TextProps, FormLabelProps as FormLabelProps$1, Heading, Text, ModalProps as ModalProps$1, ResponsiveValue, MenuProps as MenuProps$1, NumberInputProps as NumberInputProps$1, PinInputProps as PinInputProps$1, ProgressProps, RadioProps as RadioProps$1, RadioGroupProps as RadioGroupProps$1, SpinnerProps as SpinnerProps$1, SwitchProps as SwitchProps$1, TableProps as TableProps$1, TabsProps as TabsProps$1, TabPanelProps as TabPanelProps$1, TextareaProps as TextareaProps$1, UseToastOptions as UseToastOptions$1, TooltipProps, FadeProps as FadeProps$1, ScaleFadeProps as ScaleFadeProps$1, SlideProps as SlideProps$1, SlideFadeProps as SlideFadeProps$1, CollapseProps as CollapseProps$1, ModalBodyProps, TabListProps, TabProps, LinkProps, GridProps, GridItemProps, EditableProps as EditableProps$1 } from '@chakra-ui/react';
+import { AccordionProps, AccordionButtonProps, AccordionPanelProps, AccordionItemProps, Icon as Icon$1, StackDirection, AvatarProps as AvatarProps$1, AlertProps as AlertProps$1, AspectRatioProps, StackProps, BadgeProps, ButtonProps as ButtonProps$1, CheckboxProps as CheckboxProps$1, IconButtonProps as IconButtonProps$1, PopoverProps, BoxProps, InputProps, CenterProps, FlexProps, TagProps as TagProps$1, IconProps as IconProps$1, SystemStyleObject, HeadingProps as HeadingProps$1, TextProps, FormLabelProps as FormLabelProps$1, Heading, Text, ModalProps as ModalProps$1, ResponsiveValue, MenuProps as MenuProps$1, NumberInputProps as NumberInputProps$1, PinInputProps as PinInputProps$1, ProgressProps, RadioProps as RadioProps$1, RadioGroupProps as RadioGroupProps$1, SpinnerProps as SpinnerProps$1, SwitchProps as SwitchProps$1, TableProps as TableProps$1, TabsProps as TabsProps$1, TabPanelProps as TabPanelProps$1, TextareaProps as TextareaProps$1, UseToastOptions as UseToastOptions$1, TooltipProps, FadeProps as FadeProps$1, ScaleFadeProps as ScaleFadeProps$1, SlideProps as SlideProps$1, SlideFadeProps as SlideFadeProps$1, CollapseProps as CollapseProps$1, ModalBodyProps, TabListProps, TabProps, LinkProps, GridProps, GridItemProps, EditableProps as EditableProps$1 } from '@chakra-ui/react';
 export { AbsoluteCenter, AccordionButtonProps, AccordionIcon, AccordionIconProps, AccordionItemProps, AccordionPanelProps, AccordionProps, AlertDescription, AlertDialog, AlertDialogBody, AlertDialogCloseButton, AlertDialogContent, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, AlertIcon, AlertTitle, AspectRatioProps, BadgeProps, Box, BoxProps, BreadcrumbItem as Breadcrumb, BreadcrumbLink, BreadcrumbSeparator, Breadcrumb as Breadcrumbs, ButtonGroup, Card, CardBody, CardFooter, CardHeader, Center, Modal as ChakraModal, CheckboxGroup, Circle, CircularProgress, CircularProgressLabel, CloseButton, Code, Container, Divider, Drawer, DrawerBody, DrawerCloseButton, DrawerContent, DrawerFooter, DrawerHeader, DrawerOverlay, Editable, EditableInput, EditablePreview, Flex, FormControl, FormErrorMessage, FormHelperText, Grid, GridItem, HStack, Heading, Hide, Highlight, Image, Input, InputAddon, InputGroup, InputLeftAddon, InputLeftElement, InputRightAddon, InputRightElement, Kbd, Link, LinkBox, LinkOverlay, List, ListIcon, ListItem, MenuButton, MenuCommand, MenuDivider, MenuGroup, MenuIcon, MenuItem, MenuItemOption, MenuList, MenuOptionGroup, ModalCloseButton, ModalContent, ModalFooter, ModalHeader, NumberDecrementStepper, NumberIncrementStepper, OrderedList, PinInputField, PopoverAnchor, PopoverArrow, PopoverBody, PopoverCloseButton, PopoverContent, PopoverFooter, PopoverHeader, PopoverTrigger, Portal, RangeSlider, RangeSliderFilledTrack, RangeSliderMark, RangeSliderThumb, RangeSliderTrack, Show, SimpleGrid, Skeleton, SkeletonCircle, SkeletonText, Slider, SliderFilledTrack, SliderMark, SliderThumb, SliderTrack, Spacer, Stack, StackDivider, StackProps, Stat, StatArrow, StatGroup, StatHelpText, StatLabel, StatNumber, TabIndicator as StepIndicator, TabPanels as StepPanels, Tab, TabIndicator, TabList, TabPanels, TableBodyProps, TableCaption, TableCaptionProps, TableCellProps, TableColumnHeaderProps, TableContainer, TableContainerProps, TableFooterProps, TableHeadProps, TableRowProps, TagCloseButton, TagLabel, TagLeftIcon, TagRightIcon, Tbody, Td, Text, Tfoot, Th, Thead, Tr, UnorderedList, VStack, VisuallyHidden, VisuallyHiddenInput, Wrap, WrapItem, keyframes, useBoolean, useBreakpoint, useBreakpointValue, useClipboard, useControllableProp, useControllableState, useDisclosure, useEditable, useEditableControls, useEditableState, useInterval, useMediaQuery, useMergeRefs, useNumberInput, useOutsideClick, usePrefersReducedMotion, useRadio, useRadioGroup, useTab, useTabs, useTheme, useToken } from '@chakra-ui/react';
-import { Props, GroupBase, MultiValue, SingleValue, ActionMeta, MenuListProps, SelectInstance, ChakraStylesConfig } from 'chakra-react-select';
+import { Props, GroupBase, MultiValue, SingleValue, ActionMeta, MenuListProps, SelectInstance, ChakraStylesConfig, CreatableSelectComponent } from 'chakra-react-select';
 export { AsyncCreatableSelect, AsyncSelect, Select as ChakraReactSelect, CreatableSelect, MultiValue, SingleValue, chakraComponents as selectChakraComponents } from 'chakra-react-select';
 import * as React$1 from 'react';
-import React__default, { ComponentType, Ref, ChangeEvent, InputHTMLAttributes, ReactNode, ReactElement, RefObject, MutableRefObject, EffectCallback, DependencyList, MouseEvent as MouseEvent$1 } from 'react';
+import React__default, { ComponentProps, ComponentType, Ref, ChangeEvent, InputHTMLAttributes, ReactNode, ReactElement, RefObject, MutableRefObject, EffectCallback, DependencyList, MouseEvent as MouseEvent$1 } from 'react';
 import * as react_hook_form from 'react-hook-form';
 import { RegisterOptions, FieldValues, UseFormReturn as UseFormReturn$1, SetValueConfig, FieldPath, Control, ControllerRenderProps, UseFormProps, FieldError, Merge, FieldErrorsImpl } from 'react-hook-form';
 export { useController, useFieldArray, useForm, useFormContext, useFormState, useWatch } from 'react-hook-form';
@@ -122,6 +122,7 @@ interface Option<T extends string = string> {
     label: string;
     value: T;
     isCreation?: boolean;
+    icon?: ComponentProps<typeof Icon$1>;
 }
 interface SelectProps<T, K extends boolean> extends Omit<Props<T, K, GroupBase<T>>, 'onChange' | 'value' | 'isMulti'> {
     /** Whatever is currently selected by the select will be controlled by value prop, if value is
@@ -1068,7 +1069,7 @@ interface IntentButtonProps extends CenterProps {
  */
 declare const IntentButton: ({ icon, timeout, ringColor, onTimeout, tooltipText, "aria-label": ariaLabel, ...rest }: IntentButtonProps) => JSX.Element;
 
-interface ToolboxProps extends Omit<FlexProps, 'direction'> {
+interface ToolboxProps extends Omit<FlexProps, 'direction' | 'zIndex'> {
     isResizable?: boolean;
     isOpen: boolean;
     /** where the toolbox pops in from */
@@ -1083,6 +1084,7 @@ interface ToolboxProps extends Omit<FlexProps, 'direction'> {
     autoFocus?: boolean;
     /** limit the sizing of the toolbox */
     resizeLimit?: 'half' | 'full';
+    zIndex?: number;
 }
 interface ToolboxHeaderProps extends FlexProps {
     onClose?: () => void;
@@ -1132,7 +1134,7 @@ interface ToolboxFooterProps extends FlexProps {
  }
  * ?)
  */
-declare const Toolbox: ({ isResizable, isOpen, children, direction, shouldPush, size, onClose, autoFocus, resizeLimit, ...rest }: ToolboxProps) => JSX.Element;
+declare const Toolbox: ({ isResizable, isOpen, children, direction, shouldPush, size, onClose, autoFocus, resizeLimit, zIndex, ...rest }: ToolboxProps) => JSX.Element;
 
 /**
  * @see Toolbox
@@ -4139,10 +4141,11 @@ interface StepStackProps extends StackProps {
 */
 declare const StepStack: ({ children, spacing, rowHeight, stepCircleAlignment, stepCircleMarginTopPx, ...rest }: StepStackProps) => JSX.Element;
 
-interface CreationOption extends Option {
+interface CreationOption<T extends string = string> extends Option<T> {
     isCreation: boolean;
 }
-interface CreatableSelectDropdownProps<T extends string = string> {
+type CreationOptionValue = 'add_field';
+interface CreatableSelectDropdownProps<T extends string = string> extends ComponentProps<CreatableSelectComponent> {
     /**
      * 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).
@@ -4152,7 +4155,7 @@ interface CreatableSelectDropdownProps<T extends string = string> {
      * 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) => void;
+    onOptionChange: (option: Option<T | CreationOptionValue>) => void;
     /**
      * Optional placeholder text displayed when no option is selected and the dropdown is not focused.
      * Defaults to 'Select or create...' if not provided.
@@ -4169,7 +4172,7 @@ interface CreatableSelectDropdownProps<T extends string = string> {
      * 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;
+    creationOption?: CreationOption<CreationOptionValue>;
     /**
      * Optional CSS width property value for the dropdown container.
      * Specify the width of the dropdown. Defaults to '100%' if not provided.

package/dist/es/northlight.js

@@ -8295,7 +8295,8 @@ const Toolbox = (_a) => {
     size = "sm",
     onClose,
     autoFocus = true,
-    resizeLimit = "full"
+    resizeLimit = "full",
+    zIndex = coreZIndex.overlay
   } = _b, rest = __objRest$$(_b, [
     "isResizable",
     "isOpen",
@@ -8305,7 +8306,8 @@ const Toolbox = (_a) => {
     "size",
     "onClose",
     "autoFocus",
-    "resizeLimit"
+    "resizeLimit",
+    "zIndex"
   ]);
   const { container } = useMultiStyleConfig$1("Toolbox", { size });
   const newChildren = getChildrenWithProps(
@@ -8346,7 +8348,7 @@ const Toolbox = (_a) => {
         style: {
           height: container.h,
           width: adjustableWidth,
-          zIndex: coreZIndex.overlay
+          zIndex
         }
       },
       /* @__PURE__ */ React.createElement(
@@ -13888,7 +13890,7 @@ var __objRest$1 = (source, exclude) => {
   return target;
 };
 const { Option: ChakraOption } = chakraComponents;
-const customComponents = {
+const getCustomComponents = () => ({
   Option: (_a) => {
     var _b = _a, { children } = _b, props = __objRest$1(_b, ["children"]);
     return /* @__PURE__ */ React.createElement(ChakraOption, __spreadValues$1({}, props), props.data.isCreation && /* @__PURE__ */ React.createElement(
@@ -13910,7 +13912,7 @@ const customComponents = {
       children
     ));
   }
-};
+});
 
 var __defProp = Object.defineProperty;
 var __defProps = Object.defineProperties;
@@ -14079,7 +14081,7 @@ const CreatableSelectDropdown = (_a) => {
           color: "black"
         })
       }),
-      components: customComponents,
+      components: getCustomComponents(),
       options: customOptions,
       value: selectedOption,
       onChange: handleChange,