@northlight/ui 2.24.2 → 2.24.4

package/dist/es/northlight.d.ts

@@ -118,9 +118,9 @@ interface InputFieldProps {
 }
 
 type Size$1 = 'sm' | 'md' | 'lg';
-interface Option {
+interface Option<T extends string = string> {
     label: string;
-    value: string;
+    value: T;
 }
 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
@@ -275,9 +275,9 @@ render(<CustomSelect />);
  * />
  * ?)
 */
-declare const Select: <T extends Option, K extends boolean = false>(props: SelectProps<T, K> & React__default.RefAttributes<SelectInstance<T, K, GroupBase<T>>>) => React__default.ReactElement<any, string | React__default.JSXElementConstructor<any>> | null;
+declare const Select: <T extends Option<string>, K extends boolean = false>(props: SelectProps<T, K> & React__default.RefAttributes<SelectInstance<T, K, GroupBase<T>>>) => React__default.ReactElement<any, string | React__default.JSXElementConstructor<any>> | null;
 
-declare const SelectField: <T extends Option, K extends boolean = false>(props: SelectProps<T, K> & Omit<InputFieldProps, "isMulti"> & {
+declare const SelectField: <T extends Option<string>, K extends boolean = false>(props: SelectProps<T, K> & Omit<InputFieldProps, "isMulti"> & {
     direction?: _chakra_ui_layout_dist_stack_stack_utils.StackDirection | undefined;
     name: string;
     label: string;
@@ -285,7 +285,7 @@ declare const SelectField: <T extends Option, K extends boolean = false>(props:
     isRequired?: boolean | undefined;
 } & React__default.RefAttributes<HTMLDivElement>) => React__default.ReactElement<any, string | React__default.JSXElementConstructor<any>> | null;
 
-declare const getMatchingValue: <T extends Option, K extends boolean>(value: (K extends true ? string[] | T[] : string | T) | undefined, options: react_select.OptionsOrGroups<T, react_select.GroupBase<T>> | undefined) => T | T[] | undefined;
+declare const getMatchingValue: <T extends Option<string>, K extends boolean>(value: (K extends true ? string[] | T[] : string | T) | 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'> {
     value?: MultiValue<T>;
@@ -4137,12 +4137,12 @@ declare const StepStack: ({ children, spacing, rowHeight, stepCircleAlignment, s
 interface CreationOption extends Option {
     isCreation: boolean;
 }
-interface CreatableSelectDropdownProps {
+interface CreatableSelectDropdownProps<T extends string = string> {
     /**
      * 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[];
+    standardOptions: Option<T>[];
     /**
      * A callback function that is called whenever the selected option changes.
      * This function receives the newly selected "Option" object as its only argument.
@@ -4180,7 +4180,7 @@ interface CreatableSelectDropdownProps {
     /**
      * Value of the initially selected option.
      */
-    initialValue?: string;
+    initialValue?: T;
 }
 
 /**
@@ -4251,7 +4251,7 @@ interface CreatableSelectDropdownProps {
  * }
  * ?)
  */
-declare const CreatableSelectDropdown: ({ standardOptions, initialPlaceholder, addOptionPlaceholder, creationOption, onOptionChange, width, variant, initialValue, }: CreatableSelectDropdownProps) => JSX.Element;
+declare const CreatableSelectDropdown: <T extends string = string>({ standardOptions, initialPlaceholder, addOptionPlaceholder, creationOption, onOptionChange, width, variant, initialValue, }: CreatableSelectDropdownProps<T>) => JSX.Element;
 
 declare const useDebounce: <T>(value: T, delay: number) => T;
 

package/dist/es/northlight.js

@@ -1,4 +1,4 @@
-import { Accordion as Accordion$1, AccordionButton as AccordionButton$1, AccordionPanel as AccordionPanel$1, AccordionItem as AccordionItem$1, useInterval, useMediaQuery, useToken as useToken$1, Box, useMultiStyleConfig, chakra, Alert as Alert$2, AspectRatio as AspectRatio$1, forwardRef, useStyleConfig, Icon as Icon$2, Heading, Text, FormLabel as FormLabel$1, VisuallyHidden, HStack, Badge as Badge$2, Spinner as Spinner$2, Button as Button$2, Checkbox as Checkbox$2, FormControl, Stack, FormErrorMessage, Flex, IconButton as IconButton$1, Popover as Popover$1, useDisclosure, useBoolean, PopoverTrigger, PopoverContent, PopoverHeader, PopoverBody, SimpleGrid, SlideFade as SlideFade$1, keyframes, extendTheme, Table as Table$2, Thead, Tbody, Tr, Select as Select$2, PopoverAnchor, InputGroup, InputRightElement, Link as Link$1, Tooltip as Tooltip$2, VStack, Circle, Center, Fade as Fade$1, ScaleFade as ScaleFade$1, Slide as Slide$1, Collapse as Collapse$1, Portal, CloseButton as CloseButton$1, Radio as Radio$2, RadioGroup as RadioGroup$1, Tag as Tag$2, TagLabel, TagRightIcon, useEditableControls, useEditableState, Editable, InputLeftElement, Input as Input$1, EditablePreview, EditableInput, Modal as Modal$2, ModalOverlay, ModalContent, ModalCloseButton, ModalBody as ModalBody$1, ModalHeader, Slider, SliderTrack, SliderFilledTrack, SliderThumb, ModalFooter, Progress, Image as Image$1, ChakraProvider, Menu as Menu$2, NumberInputStepper as NumberInputStepper$1, Divider, NumberIncrementStepper, NumberDecrementStepper, NumberInput as NumberInput$2, NumberInputField as NumberInputField$1, PinInput as PinInput$2, Switch as Switch$2, TabPanel as TabPanel$1, Tabs as Tabs$2, Textarea as Textarea$2, useToast as useToast$1, TagLeftIcon, AlertTitle, AlertDescription, Tab, TabList, useClipboard, Grid, GridItem } from '@chakra-ui/react';
+import { Accordion as Accordion$1, AccordionButton as AccordionButton$1, AccordionPanel as AccordionPanel$1, AccordionItem as AccordionItem$1, useInterval, useMediaQuery, useToken as useToken$1, Box, useMultiStyleConfig, chakra, Alert as Alert$2, AspectRatio as AspectRatio$1, forwardRef, useStyleConfig, Icon as Icon$2, Heading, Text, FormLabel as FormLabel$1, VisuallyHidden, HStack, Badge as Badge$2, Spinner as Spinner$2, Button as Button$2, Checkbox as Checkbox$2, FormControl, Stack, FormErrorMessage, Flex, IconButton as IconButton$1, Popover as Popover$2, useDisclosure, useBoolean, PopoverTrigger, PopoverContent, PopoverHeader, PopoverBody, SimpleGrid, SlideFade as SlideFade$1, keyframes, extendTheme, Table as Table$2, Thead, Tbody, Tr, Select as Select$2, PopoverAnchor, InputGroup, InputRightElement, Link as Link$1, Portal, Tooltip as Tooltip$2, VStack, Circle, Center, Fade as Fade$1, ScaleFade as ScaleFade$1, Slide as Slide$1, Collapse as Collapse$1, CloseButton as CloseButton$1, Radio as Radio$2, RadioGroup as RadioGroup$1, Tag as Tag$2, TagLabel, TagRightIcon, useEditableControls, useEditableState, Editable, InputLeftElement, Input as Input$1, EditablePreview, EditableInput, Modal as Modal$2, ModalOverlay, ModalContent, ModalCloseButton, ModalBody as ModalBody$1, ModalHeader, Slider, SliderTrack, SliderFilledTrack, SliderThumb, ModalFooter, Progress, Image as Image$1, ChakraProvider, Menu as Menu$2, NumberInputStepper as NumberInputStepper$1, Divider, NumberIncrementStepper, NumberDecrementStepper, NumberInput as NumberInput$2, NumberInputField as NumberInputField$1, PinInput as PinInput$2, Switch as Switch$2, TabPanel as TabPanel$1, Tabs as Tabs$2, Textarea as Textarea$2, useToast as useToast$1, TagLeftIcon, AlertTitle, AlertDescription, Tab, TabList, useClipboard, Grid, GridItem, useOutsideClick } from '@chakra-ui/react';
 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';
@@ -2429,7 +2429,7 @@ var __spreadValues$1P = (a, b) => {
     }
   return a;
 };
-const Popover = (props) => /* @__PURE__ */ React.createElement(Popover$1, __spreadValues$1P({ isLazy: true }, props));
+const Popover$1 = (props) => /* @__PURE__ */ React.createElement(Popover$2, __spreadValues$1P({ isLazy: true }, props));
 
 const ColorsExpandButton = ({
   onClick,
@@ -2565,7 +2565,7 @@ const ColorPicker$1 = (_a) => {
     onChange(color);
   };
   return /* @__PURE__ */ React.createElement(Box, { "data-testid": "color-picker-test-id" }, /* @__PURE__ */ React.createElement(
-    Popover,
+    Popover$1,
     __spreadValues$1O({
       isOpen,
       onClose,
@@ -5732,6 +5732,15 @@ const Badge = {
   }
 };
 
+const Popover = {
+  parts: ["popper"],
+  baseStyle: {
+    popper: {
+      zIndex: "popover"
+    }
+  }
+};
+
 var components = /*#__PURE__*/Object.freeze({
   __proto__: null,
   Alert: Alert,
@@ -5772,6 +5781,7 @@ var components = /*#__PURE__*/Object.freeze({
   P: P,
   PaneDivider: PaneDivider$1,
   PinInput: PinInput$1,
+  Popover: Popover,
   Radio: Radio$1,
   Select: Select$1,
   Small: Small,
@@ -6690,7 +6700,7 @@ const DatePicker = (props) => {
   );
   const togglePopup = () => state.setOpen(!state.isOpen);
   return /* @__PURE__ */ React.createElement(
-    Popover,
+    Popover$1,
     {
       isOpen: state.isOpen,
       onClose: () => state.setOpen(false),
@@ -7243,7 +7253,7 @@ const DateRangePicker = (props) => {
     state.setOpen(false);
   };
   return /* @__PURE__ */ React.createElement(
-    Popover,
+    Popover$1,
     {
       isOpen: state.isOpen,
       onClose: handleClose,
@@ -7276,7 +7286,7 @@ const DateRangePicker = (props) => {
         icon: /* @__PURE__ */ React.createElement(Icon$1, { as: XCloseSolid })
       }
     ))),
-    state.isOpen && /* @__PURE__ */ React.createElement(PopoverContent, __spreadProps$d(__spreadValues$1o({}, dialogProps), { ref, w: "max-content" }), /* @__PURE__ */ React.createElement(FocusScope, { contain: true, restoreFocus: true }, /* @__PURE__ */ React.createElement(
+    /* @__PURE__ */ React.createElement(Portal, null, state.isOpen && /* @__PURE__ */ React.createElement(PopoverContent, __spreadProps$d(__spreadValues$1o({}, dialogProps), { ref, w: "max-content" }), /* @__PURE__ */ React.createElement(FocusScope, { contain: true, restoreFocus: true }, /* @__PURE__ */ React.createElement(
       RangeCalendar,
       __spreadProps$d(__spreadValues$1o({}, calendarProps), {
         resetDate,
@@ -7285,7 +7295,7 @@ const DateRangePicker = (props) => {
         fiscalStartDay: fiscalStartDay || 0,
         isClearable
       })
-    )))
+    ))))
   );
 };
 
@@ -13848,18 +13858,35 @@ const CreatableSelectDropdown = ({
   onOptionChange,
   width = "100%",
   variant = "outline",
-  initialValue = ""
+  initialValue
 }) => {
   const initialSelectedOption = useMemo(
-    () => standardOptions.find(
-      (option) => option.value === initialValue
-    ) || null,
+    () => {
+      var _a;
+      if (isNil(initialValue)) {
+        return null;
+      }
+      return (_a = standardOptions.find((option) => option.value === initialValue)) != null ? _a : null;
+    },
     []
   );
   const [selectedOption, setSelectedOption] = useState(initialSelectedOption);
   const [newOptionText, setNewOptionText] = useState("");
   const [newOptionPlaceholder, setNewOptionPlaceholder] = useState(initialPlaceholder);
   const [createdOptions, setCreatedOptions] = useState([]);
+  function isCreationOption(option) {
+    return option && typeof option.isCreation === "boolean";
+  }
+  const ref = useRef(null);
+  useOutsideClick({
+    ref,
+    handler: () => {
+      if (isCreationOption(selectedOption)) {
+        setSelectedOption(initialSelectedOption);
+        setNewOptionPlaceholder(initialPlaceholder);
+      }
+    }
+  });
   const handleInputChange = (newValue) => {
     setNewOptionText(newValue);
   };
@@ -13875,9 +13902,6 @@ const CreatableSelectDropdown = ({
     setNewOptionText("");
     setNewOptionPlaceholder(initialPlaceholder);
   };
-  function isCreationOption(option) {
-    return option && typeof option.isCreation === "string";
-  }
   const handleChange = (newValue, _actionMeta) => {
     const option = newValue;
     if (option === null) {
@@ -13885,11 +13909,10 @@ const CreatableSelectDropdown = ({
     }
     if (isCreationOption(option)) {
       setNewOptionPlaceholder(addOptionPlaceholder);
-      setSelectedOption(null);
     } else {
       setNewOptionPlaceholder(initialPlaceholder);
-      setSelectedOption(option);
     }
+    setSelectedOption(option);
     onOptionChange(option);
   };
   const handleKeyDown = (event) => {
@@ -13901,11 +13924,11 @@ const CreatableSelectDropdown = ({
   const combinedOptions = [...standardOptions, ...createdOptions];
   const customOptions = [
     __spreadProps(__spreadValues({}, creationOption), {
-      icon: /* @__PURE__ */ React.createElement(Icon$1, { as: PlusSolid, color: "brand" })
+      icon: /* @__PURE__ */ React.createElement(Icon$2, { as: PlusSolid, color: "brand" })
     }),
     ...combinedOptions
   ];
-  return /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ React.createElement(Box, { ref }, /* @__PURE__ */ React.createElement(
     CreatableSelect,
     {
       chakraStyles: __spreadProps(__spreadValues({}, customSelectStyles), {
@@ -13929,8 +13952,8 @@ const CreatableSelectDropdown = ({
       useBasicStyles: true,
       variant
     }
-  );
+  ));
 };
 
-export { Accordion, AccordionButton, AccordionItem, AccordionPanel, Alert$1 as Alert, AspectRatio, AsyncError, Avatar$1 as Avatar, AvatarGroup, Badge$1 as Badge, Blinker$1 as Blinker, Blockquote$1 as Blockquote, Button$1 as Button, Capitalized$1 as Capitalized, Carousel, Checkbox$1 as Checkbox, CheckboxField, Clickable, ClipboardInput, Collapse, ColorPicker$1 as ColorPicker, ColorPickerField, CreatableSelectDropdown, CustomTheme, DatePicker, DatePickerField, DateRangePicker, DateRangePickerField, DragAndDrop, DragHandle, DragItem, Draggable, DropZone, Droppable, EditableText, Fade, FastGrid, FastList, Field, FilePicker, FilePickerField, FlipButton$1 as FlipButton, FlipButtonGroup, FlipButtonGroupField, Form, FormLabel, FormattedNumberInput, FormattedNumberInputField, H1$1 as H1, H2$1 as H2, H3$1 as H3, H4$1 as H4, H5$1 as H5, H6$1 as H6, Icon$1 as Icon, IconButton, IntentButton, Label$1 as Label, Lead$1 as Lead, LoadingBar, MaskedTextInput, MediatoolThemeProvider, Menu, Modal, ModalBase, ModalBody, MultiFileList, MultiFilePicker, MultiFilePickerField, MultiFileUploader, MultiSort, NotificationIconButton, NumVal$1 as NumVal, NumberInput, NumberInputField, OrganizationLogo, OverflowGroup, P$1 as P, PaneDivider, PaneItem, PinInput, Popover, ProgressBar, Radio, RadioGroup, RadioGroupField, ResizeHandle, ScaleFade, SearchBar, SearchBarField, Select, SelectField, Slide, SlideFade, Small$1 as Small, Sortable, SortableContainer, SortableItem, SortableList, Spinner$1 as Spinner, SplitPane, StatusBlock, StatusPin, Step, StepList, StepPanel, StepStack, Steps, Switch, SwitchField, TabPanel, Table, Tabs, Tag, TagGroup, TagsInput, TextField, Textarea, TextareaField, Tiny$1 as Tiny, Toast, Toolbox, ToolboxContent, ToolboxFooter, ToolboxHeader, Tooltip, 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$1 as Alert, AspectRatio, AsyncError, Avatar$1 as Avatar, AvatarGroup, Badge$1 as Badge, Blinker$1 as Blinker, Blockquote$1 as Blockquote, Button$1 as Button, Capitalized$1 as Capitalized, Carousel, Checkbox$1 as Checkbox, CheckboxField, Clickable, ClipboardInput, Collapse, ColorPicker$1 as ColorPicker, ColorPickerField, CreatableSelectDropdown, CustomTheme, DatePicker, DatePickerField, DateRangePicker, DateRangePickerField, DragAndDrop, DragHandle, DragItem, Draggable, DropZone, Droppable, EditableText, Fade, FastGrid, FastList, Field, FilePicker, FilePickerField, FlipButton$1 as FlipButton, FlipButtonGroup, FlipButtonGroupField, Form, FormLabel, FormattedNumberInput, FormattedNumberInputField, H1$1 as H1, H2$1 as H2, H3$1 as H3, H4$1 as H4, H5$1 as H5, H6$1 as H6, Icon$1 as Icon, IconButton, IntentButton, Label$1 as Label, Lead$1 as Lead, LoadingBar, MaskedTextInput, MediatoolThemeProvider, Menu, Modal, ModalBase, ModalBody, MultiFileList, MultiFilePicker, MultiFilePickerField, MultiFileUploader, MultiSort, NotificationIconButton, NumVal$1 as NumVal, NumberInput, NumberInputField, OrganizationLogo, OverflowGroup, P$1 as P, PaneDivider, PaneItem, PinInput, Popover$1 as Popover, ProgressBar, Radio, RadioGroup, RadioGroupField, ResizeHandle, ScaleFade, SearchBar, SearchBarField, Select, SelectField, Slide, SlideFade, Small$1 as Small, Sortable, SortableContainer, SortableItem, SortableList, Spinner$1 as Spinner, SplitPane, StatusBlock, StatusPin, Step, StepList, StepPanel, StepStack, Steps, Switch, SwitchField, TabPanel, Table, Tabs, Tag, TagGroup, TagsInput, TextField, Textarea, TextareaField, Tiny$1 as Tiny, Toast, Toolbox, ToolboxContent, ToolboxFooter, ToolboxHeader, Tooltip, 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 };
 //# sourceMappingURL=northlight.js.map