@northlight/ui 2.24.2 → 2.24.4

package/dist/umd/northlight.cjs

@@ -2392,7 +2392,7 @@
       }
     return a;
   };
-  const Popover = (props) => /* @__PURE__ */ React.createElement(react.Popover, __spreadValues$1P({ isLazy: true }, props));
+  const Popover$1 = (props) => /* @__PURE__ */ React.createElement(react.Popover, __spreadValues$1P({ isLazy: true }, props));
 
   const ColorsExpandButton = ({
     onClick,
@@ -2528,7 +2528,7 @@
       onChange(color);
     };
     return /* @__PURE__ */ React.createElement(react.Box, { "data-testid": "color-picker-test-id" }, /* @__PURE__ */ React.createElement(
-      Popover,
+      Popover$1,
       __spreadValues$1O({
         isOpen,
         onClose,
@@ -5695,6 +5695,15 @@
     }
   };
 
+  const Popover = {
+    parts: ["popper"],
+    baseStyle: {
+      popper: {
+        zIndex: "popover"
+      }
+    }
+  };
+
   var components = /*#__PURE__*/Object.freeze({
     __proto__: null,
     Alert: Alert,
@@ -5735,6 +5744,7 @@
     P: P,
     PaneDivider: PaneDivider$1,
     PinInput: PinInput$1,
+    Popover: Popover,
     Radio: Radio$1,
     Select: Select$1,
     Small: Small,
@@ -6653,7 +6663,7 @@
     );
     const togglePopup = () => state.setOpen(!state.isOpen);
     return /* @__PURE__ */ React.createElement(
-      Popover,
+      Popover$1,
       {
         isOpen: state.isOpen,
         onClose: () => state.setOpen(false),
@@ -7206,7 +7216,7 @@
       state.setOpen(false);
     };
     return /* @__PURE__ */ React.createElement(
-      Popover,
+      Popover$1,
       {
         isOpen: state.isOpen,
         onClose: handleClose,
@@ -7239,7 +7249,7 @@
           icon: /* @__PURE__ */ React.createElement(Icon$1, { as: icons.XCloseSolid })
         }
       ))),
-      state.isOpen && /* @__PURE__ */ React.createElement(react.PopoverContent, __spreadProps$d(__spreadValues$1o({}, dialogProps), { ref, w: "max-content" }), /* @__PURE__ */ React.createElement(focus.FocusScope, { contain: true, restoreFocus: true }, /* @__PURE__ */ React.createElement(
+      /* @__PURE__ */ React.createElement(react.Portal, null, state.isOpen && /* @__PURE__ */ React.createElement(react.PopoverContent, __spreadProps$d(__spreadValues$1o({}, dialogProps), { ref, w: "max-content" }), /* @__PURE__ */ React.createElement(focus.FocusScope, { contain: true, restoreFocus: true }, /* @__PURE__ */ React.createElement(
         RangeCalendar,
         __spreadProps$d(__spreadValues$1o({}, calendarProps), {
           resetDate,
@@ -7248,7 +7258,7 @@
           fiscalStartDay: fiscalStartDay || 0,
           isClearable
         })
-      )))
+      ))))
     );
   };
 
@@ -13811,18 +13821,35 @@
     onOptionChange,
     width = "100%",
     variant = "outline",
-    initialValue = ""
+    initialValue
   }) => {
     const initialSelectedOption = React.useMemo(
-      () => standardOptions.find(
-        (option) => option.value === initialValue
-      ) || null,
+      () => {
+        var _a;
+        if (ramda.isNil(initialValue)) {
+          return null;
+        }
+        return (_a = standardOptions.find((option) => option.value === initialValue)) != null ? _a : null;
+      },
       []
     );
     const [selectedOption, setSelectedOption] = React.useState(initialSelectedOption);
     const [newOptionText, setNewOptionText] = React.useState("");
     const [newOptionPlaceholder, setNewOptionPlaceholder] = React.useState(initialPlaceholder);
     const [createdOptions, setCreatedOptions] = React.useState([]);
+    function isCreationOption(option) {
+      return option && typeof option.isCreation === "boolean";
+    }
+    const ref = React.useRef(null);
+    react.useOutsideClick({
+      ref,
+      handler: () => {
+        if (isCreationOption(selectedOption)) {
+          setSelectedOption(initialSelectedOption);
+          setNewOptionPlaceholder(initialPlaceholder);
+        }
+      }
+    });
     const handleInputChange = (newValue) => {
       setNewOptionText(newValue);
     };
@@ -13838,9 +13865,6 @@
       setNewOptionText("");
       setNewOptionPlaceholder(initialPlaceholder);
     };
-    function isCreationOption(option) {
-      return option && typeof option.isCreation === "string";
-    }
     const handleChange = (newValue, _actionMeta) => {
       const option = newValue;
       if (option === null) {
@@ -13848,11 +13872,10 @@
       }
       if (isCreationOption(option)) {
         setNewOptionPlaceholder(addOptionPlaceholder);
-        setSelectedOption(null);
       } else {
         setNewOptionPlaceholder(initialPlaceholder);
-        setSelectedOption(option);
       }
+      setSelectedOption(option);
       onOptionChange(option);
     };
     const handleKeyDown = (event) => {
@@ -13864,11 +13887,11 @@
     const combinedOptions = [...standardOptions, ...createdOptions];
     const customOptions = [
       __spreadProps(__spreadValues({}, creationOption), {
-        icon: /* @__PURE__ */ React.createElement(Icon$1, { as: icons.PlusSolid, color: "brand" })
+        icon: /* @__PURE__ */ React.createElement(react.Icon, { as: icons.PlusSolid, color: "brand" })
       }),
       ...combinedOptions
     ];
-    return /* @__PURE__ */ React.createElement(
+    return /* @__PURE__ */ React.createElement(react.Box, { ref }, /* @__PURE__ */ React.createElement(
       chakraReactSelect.CreatableSelect,
       {
         chakraStyles: __spreadProps(__spreadValues({}, customSelectStyles), {
@@ -13892,7 +13915,7 @@
         useBasicStyles: true,
         variant
       }
-    );
+    ));
   };
 
   Object.defineProperty(exports, 'AbsoluteCenter', {
@@ -14680,7 +14703,7 @@
   exports.PaneDivider = PaneDivider;
   exports.PaneItem = PaneItem;
   exports.PinInput = PinInput;
-  exports.Popover = Popover;
+  exports.Popover = Popover$1;
   exports.ProgressBar = ProgressBar;
   exports.Radio = Radio;
   exports.RadioGroup = RadioGroup;