@northlight/ui 2.25.1 → 2.26.1

package/dist/es/northlight.d.ts

@@ -1,7 +1,7 @@
 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';
 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';
-export { AsyncCreatableSelect, AsyncSelect, Select as ChakraReactSelect, CreatableSelect, MultiValue, SingleValue } 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 * as react_hook_form from 'react-hook-form';
@@ -4181,7 +4181,11 @@ interface CreatableSelectDropdownProps<T extends string = string> {
     /**
      * Value of the initially selected option.
      */
-    initialValue?: T;
+    defaultValue?: T;
+    /**
+     * Selected value.
+     */
+    value?: T;
     /**
      *
       Default placement of the menu in relation to the control. 'auto'
@@ -4220,6 +4224,7 @@ interface CreatableSelectDropdownProps<T extends string = string> {
  *           standardOptions={someOptions}
  *           onOptionChange={setArtist}
  *           width="300px"
+ *           value={artist ? artist.value : undefined}
  *         />
  *         {artist && artist.value !== 'Add option...' && (
  *           <H3 py={8}>The best artist is: {artist.label}</H3>
@@ -4232,7 +4237,7 @@ interface CreatableSelectDropdownProps<T extends string = string> {
  *           standardOptions={someOtherOptions}
  *           onOptionChange={setElement}
  *           width="300px"
- *           initialValue="technique"
+ *           value={element ? element.value : undefined}
  *         />
  *         {element && element.value !== 'Add option...' && (
  *           <H3 py={8}>
@@ -4258,7 +4263,7 @@ interface CreatableSelectDropdownProps<T extends string = string> {
  * }
  * ?)
  */
-declare const CreatableSelectDropdown: <T extends string = string>({ standardOptions, initialPlaceholder, addOptionPlaceholder, creationOption, onOptionChange, width, variant, initialValue, menuPlacement, }: CreatableSelectDropdownProps<T>) => JSX.Element;
+declare const CreatableSelectDropdown: <T extends string = string>({ standardOptions, initialPlaceholder, addOptionPlaceholder, creationOption, onOptionChange, width, variant, defaultValue, value, menuPlacement, }: CreatableSelectDropdownProps<T>) => JSX.Element;
 
 declare const useDebounce: <T>(value: T, delay: number) => T;
 

package/dist/es/northlight.js

@@ -2,7 +2,7 @@ import { Accordion as Accordion$1, AccordionButton as AccordionButton$1, Accordi
 export { AbsoluteCenter, AccordionIcon, AlertDescription, AlertDialog, AlertDialogBody, AlertDialogCloseButton, AlertDialogContent, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, AlertIcon, AlertTitle, Box, 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, Stat, StatArrow, StatGroup, StatHelpText, StatLabel, StatNumber, TabIndicator as StepIndicator, TabPanels as StepPanels, Tab, TabIndicator, TabList, TabPanels, TableCaption, TableContainer, 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 React, { useState, useEffect, useRef, isValidElement, cloneElement, Children, createContext, useContext, forwardRef as forwardRef$1, useImperativeHandle, memo, useMemo, useCallback } from 'react';
 import { CreatableSelect, chakraComponents, AsyncSelect, Select as Select$3 } from 'chakra-react-select';
-export { AsyncCreatableSelect, AsyncSelect, Select as ChakraReactSelect, CreatableSelect } from 'chakra-react-select';
+export { AsyncCreatableSelect, AsyncSelect, Select as ChakraReactSelect, CreatableSelect, chakraComponents as selectChakraComponents } from 'chakra-react-select';
 import { isNil, last, map, prop, difference, replace, split, path, T, identity, any, isEmpty, init, append, ifElse, gt, always, defaultTo, take, inc, dec, forEach, is, trim, keys, values, equals, omit, mergeAll, merge, toLower, find, times, add, has, not, all, filter, test, indexOf, remove, insert, intersection, findIndex, concat, head, match, length, propEq } from 'ramda';
 import { useFocusManager, FocusScope, useFocusRing } from '@react-aria/focus';
 import { useForm, FormProvider, useFormContext, Controller } from 'react-hook-form';
@@ -4034,91 +4034,94 @@ const NumberInput$1 = {
     radii: borderRadius,
     borders: borderWidth,
     opacity
-  }, isReadOnly }) => ({
-    root: {
-      borderRadius: borderRadius.input.outline
-    },
-    field: {
-      minWidth: sizing["44"],
-      paddingInlineStart: spacing["padding-inline"].input.default,
-      paddingInlineEnd: spacing["padding-inline"].input.default,
-      WebkitPaddingStart: spacing["padding-inline"].input.default,
-      WebkitPaddingEnd: spacing["padding-inline"].input.default,
-      color: color.text.default,
-      bg: color.background.input["outline-default"],
-      borderWidth: borderWidth.input.default,
-      borderColor: color.border.input.default,
-      paddingRight: spacing.paddingRight["number-input"].field,
-      _hover: {
-        bg: color.background.input["outline-hover"],
-        borderColor: color.border.input["default-hover"]
-      },
-      _focusVisible: {
-        bg: color.background.input["outline-focus"],
-        borderColor: color.border.input.focus,
-        boxShadow: `0 0 0 1px ${color.border.textarea.focus}`
-      },
-      _invalid: {
-        bg: color.background.input["outline-error"],
-        borderColor: color.border.input.error,
-        boxShadow: `0 0 0 1px ${color.border.input.error}`
-      },
-      _disabled: {
-        bg: color.background.input["outline-disabled"],
-        opacity: opacity.input.disabled,
-        borderColor: color.border.input.disabled
+  }, isReadOnly, minWidth, minW }) => {
+    var _a;
+    return {
+      root: {
+        borderRadius: borderRadius.input.outline
       },
-      _readOnly: {
-        _focusVisible: {
-          borderColor: color.border.input.readonly,
-          boxShadow: "none"
-        },
-        _hover: {
-          borderColor: color.border.input.readonly
-        }
-      }
-    },
-    stepperGroup: {
-      width: "auto",
-      paddingRight: spacing.paddingRight["number-input"].stepper
-    },
-    stepper: {
-      _first: {
-        border: "none",
-        borderTopRightRadius: borderRadius["input-stepper"].default,
-        borderRadius: borderRadius["input-stepper"].default,
-        bg: color.background["input-stepper"].default,
-        opacity: isReadOnly ? opacity.input.disabled : "auto",
+      field: {
+        minWidth: (_a = minWidth != null ? minWidth : minW) != null ? _a : sizing["44"],
+        paddingInlineStart: spacing["padding-inline"].input.default,
+        paddingInlineEnd: spacing["padding-inline"].input.default,
+        WebkitPaddingStart: spacing["padding-inline"].input.default,
+        WebkitPaddingEnd: spacing["padding-inline"].input.default,
+        color: color.text.default,
+        bg: color.background.input["outline-default"],
+        borderWidth: borderWidth.input.default,
+        borderColor: color.border.input.default,
+        paddingRight: spacing.paddingRight["number-input"].field,
         _hover: {
-          bg: isReadOnly ? "none" : color.background["input-stepper"].hover
+          bg: color.background.input["outline-hover"],
+          borderColor: color.border.input["default-hover"]
         },
-        _active: {
-          bg: color.background["input-stepper"].active
+        _focusVisible: {
+          bg: color.background.input["outline-focus"],
+          borderColor: color.border.input.focus,
+          boxShadow: `0 0 0 1px ${color.border.textarea.focus}`
+        },
+        _invalid: {
+          bg: color.background.input["outline-error"],
+          borderColor: color.border.input.error,
+          boxShadow: `0 0 0 1px ${color.border.input.error}`
         },
         _disabled: {
-          bg: color.background["input-stepper"].disabled,
-          color: color.icon["input-stepper"].disabled
+          bg: color.background.input["outline-disabled"],
+          opacity: opacity.input.disabled,
+          borderColor: color.border.input.disabled
+        },
+        _readOnly: {
+          _focusVisible: {
+            borderColor: color.border.input.readonly,
+            boxShadow: "none"
+          },
+          _hover: {
+            borderColor: color.border.input.readonly
+          }
         }
       },
-      _last: {
-        border: "none",
-        bg: color.background["input-stepper"].default,
-        borderBottomRightRadius: borderRadius["input-stepper"].default,
-        borderRadius: borderRadius["input-stepper"].default,
-        opacity: isReadOnly ? opacity.input.disabled : "auto",
-        _hover: {
-          bg: isReadOnly ? "none" : color.background["input-stepper"].hover
-        },
-        _active: {
-          bg: color.background["input-stepper"].active
+      stepperGroup: {
+        width: "auto",
+        paddingRight: spacing.paddingRight["number-input"].stepper
+      },
+      stepper: {
+        _first: {
+          border: "none",
+          borderTopRightRadius: borderRadius["input-stepper"].default,
+          borderRadius: borderRadius["input-stepper"].default,
+          bg: color.background["input-stepper"].default,
+          opacity: isReadOnly ? opacity.input.disabled : "auto",
+          _hover: {
+            bg: isReadOnly ? "none" : color.background["input-stepper"].hover
+          },
+          _active: {
+            bg: color.background["input-stepper"].active
+          },
+          _disabled: {
+            bg: color.background["input-stepper"].disabled,
+            color: color.icon["input-stepper"].disabled
+          }
         },
-        _disabled: {
-          bg: color.background["input-stepper"].disabled,
-          color: color.icon["input-stepper"].disabled
+        _last: {
+          border: "none",
+          bg: color.background["input-stepper"].default,
+          borderBottomRightRadius: borderRadius["input-stepper"].default,
+          borderRadius: borderRadius["input-stepper"].default,
+          opacity: isReadOnly ? opacity.input.disabled : "auto",
+          _hover: {
+            bg: isReadOnly ? "none" : color.background["input-stepper"].hover
+          },
+          _active: {
+            bg: color.background["input-stepper"].active
+          },
+          _disabled: {
+            bg: color.background["input-stepper"].disabled,
+            color: color.icon["input-stepper"].disabled
+          }
         }
       }
-    }
-  })
+    };
+  }
 };
 
 const NotificationIconButton$1 = {
@@ -8950,17 +8953,24 @@ var __objRest$R = (source, exclude) => {
     }
   return target;
 };
-function getComponents() {
-  return {
-    Menu: (props) => /* @__PURE__ */ React.createElement(Box, { "data-testid": "select-menu-wrapper-test-id" }, /* @__PURE__ */ React.createElement(chakraComponents.Menu, __spreadValues$12({}, props), props.children)),
-    DropdownIndicator: (props) => props.selectProps.icon ? /* @__PURE__ */ React.createElement(chakraComponents.DropdownIndicator, __spreadValues$12({}, props), /* @__PURE__ */ React.createElement(Icon$1, { as: props.selectProps.icon })) : /* @__PURE__ */ React.createElement(chakraComponents.DropdownIndicator, __spreadValues$12({}, props)),
-    Option: (props) => props.selectProps.customOption ? /* @__PURE__ */ React.createElement(chakraComponents.Option, __spreadValues$12({}, props), props.selectProps.customOption(props.data)) : /* @__PURE__ */ React.createElement(chakraComponents.Option, __spreadValues$12({}, props)),
-    MultiValueContainer: (props) => props.selectProps.customTag ? /* @__PURE__ */ React.createElement(chakraComponents.MultiValueContainer, __spreadValues$12({}, props), props.selectProps.customTag(props.data)) : /* @__PURE__ */ React.createElement(chakraComponents.MultiValueContainer, __spreadValues$12({}, props)),
-    Control: (_a) => {
-      var _b = _a, { children } = _b, props = __objRest$R(_b, ["children"]);
-      return props.selectProps.leftComponent ? /* @__PURE__ */ React.createElement(chakraComponents.Control, __spreadValues$12({}, props), /* @__PURE__ */ React.createElement(HStack, { w: "full", pl: "2" }, props.selectProps.leftComponent, /* @__PURE__ */ React.createElement(HStack, { w: "full", justify: "space-between" }, children))) : /* @__PURE__ */ React.createElement(chakraComponents.Control, __spreadValues$12({}, props), children);
-    }
-  };
+function getComponents(components) {
+  return merge(
+    {
+      Menu: (props) => /* @__PURE__ */ React.createElement(Box, { "data-testid": "select-menu-wrapper-test-id" }, /* @__PURE__ */ React.createElement(chakraComponents.Menu, __spreadValues$12({}, props), props.children)),
+      DropdownIndicator: (props) => props.selectProps.icon ? /* @__PURE__ */ React.createElement(chakraComponents.DropdownIndicator, __spreadValues$12({}, props), /* @__PURE__ */ React.createElement(Icon$1, { as: props.selectProps.icon })) : /* @__PURE__ */ React.createElement(chakraComponents.DropdownIndicator, __spreadValues$12({}, props)),
+      Option: (props) => props.selectProps.customOption ? /* @__PURE__ */ React.createElement(chakraComponents.Option, __spreadValues$12({}, props), props.selectProps.customOption(props.data)) : /* @__PURE__ */ React.createElement(chakraComponents.Option, __spreadValues$12({}, props)),
+      MultiValueContainer: (props) => props.selectProps.customTag ? /* @__PURE__ */ React.createElement(chakraComponents.MultiValueContainer, __spreadValues$12({}, props), props.selectProps.customTag(props.data)) : /* @__PURE__ */ React.createElement(chakraComponents.MultiValueContainer, __spreadValues$12({}, props)),
+      Control: (_a) => {
+        var _b = _a, {
+          children
+        } = _b, props = __objRest$R(_b, [
+          "children"
+        ]);
+        return props.selectProps.leftComponent ? /* @__PURE__ */ React.createElement(chakraComponents.Control, __spreadValues$12({}, props), /* @__PURE__ */ React.createElement(HStack, { w: "full", pl: "2" }, props.selectProps.leftComponent, /* @__PURE__ */ React.createElement(HStack, { w: "full", justify: "space-between" }, children))) : /* @__PURE__ */ React.createElement(chakraComponents.Control, __spreadValues$12({}, props), children);
+      }
+    },
+    components || {}
+  );
 }
 
 var __defProp$11 = Object.defineProperty;
@@ -12289,7 +12299,8 @@ const Select = forwardRef$1((_a, ref) => {
     customTag = null,
     isClearable = false,
     value,
-    icon
+    icon,
+    components
   } = _b, rest = __objRest$l(_b, [
     "options",
     "isMulti",
@@ -12303,7 +12314,8 @@ const Select = forwardRef$1((_a, ref) => {
     "customTag",
     "isClearable",
     "value",
-    "icon"
+    "icon",
+    "components"
   ]);
   const handleChange = useSelectCallbacks({
     onChange,
@@ -12313,7 +12325,7 @@ const Select = forwardRef$1((_a, ref) => {
     value: is(Array, value) ? value : []
   });
   const customComponents = useMemo(
-    () => getComponents(),
+    () => getComponents(components),
     []
   );
   const prevOptions = useRef(
@@ -13903,18 +13915,22 @@ const CreatableSelectDropdown = ({
   onOptionChange,
   width = "100%",
   variant = "outline",
-  initialValue,
+  defaultValue,
+  value,
   menuPlacement = "bottom"
 }) => {
   const initialSelectedOption = useMemo(
     () => {
-      var _a;
-      if (isNil(initialValue)) {
-        return null;
+      var _a, _b;
+      if (!isNil(value)) {
+        return (_a = standardOptions.find((option) => option.value === value)) != null ? _a : null;
       }
-      return (_a = standardOptions.find((option) => option.value === initialValue)) != null ? _a : null;
+      if (!isNil(defaultValue)) {
+        return (_b = standardOptions.find((option) => option.value === defaultValue)) != null ? _b : null;
+      }
+      return null;
     },
-    []
+    [value]
   );
   const [selectedOption, setSelectedOption] = useState(initialSelectedOption);
   const [newOptionText, setNewOptionText] = useState("");