@northlight/ui 2.26.0 → 2.27.0

package/dist/umd/northlight.cjs

@@ -3997,91 +3997,94 @@
       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 = {
@@ -8913,17 +8916,24 @@
       }
     return target;
   };
-  function getComponents() {
-    return {
-      Menu: (props) => /* @__PURE__ */ React.createElement(react.Box, { "data-testid": "select-menu-wrapper-test-id" }, /* @__PURE__ */ React.createElement(chakraReactSelect.chakraComponents.Menu, __spreadValues$12({}, props), props.children)),
-      DropdownIndicator: (props) => props.selectProps.icon ? /* @__PURE__ */ React.createElement(chakraReactSelect.chakraComponents.DropdownIndicator, __spreadValues$12({}, props), /* @__PURE__ */ React.createElement(Icon$1, { as: props.selectProps.icon })) : /* @__PURE__ */ React.createElement(chakraReactSelect.chakraComponents.DropdownIndicator, __spreadValues$12({}, props)),
-      Option: (props) => props.selectProps.customOption ? /* @__PURE__ */ React.createElement(chakraReactSelect.chakraComponents.Option, __spreadValues$12({}, props), props.selectProps.customOption(props.data)) : /* @__PURE__ */ React.createElement(chakraReactSelect.chakraComponents.Option, __spreadValues$12({}, props)),
-      MultiValueContainer: (props) => props.selectProps.customTag ? /* @__PURE__ */ React.createElement(chakraReactSelect.chakraComponents.MultiValueContainer, __spreadValues$12({}, props), props.selectProps.customTag(props.data)) : /* @__PURE__ */ React.createElement(chakraReactSelect.chakraComponents.MultiValueContainer, __spreadValues$12({}, props)),
-      Control: (_a) => {
-        var _b = _a, { children } = _b, props = __objRest$R(_b, ["children"]);
-        return props.selectProps.leftComponent ? /* @__PURE__ */ React.createElement(chakraReactSelect.chakraComponents.Control, __spreadValues$12({}, props), /* @__PURE__ */ React.createElement(react.HStack, { w: "full", pl: "2" }, props.selectProps.leftComponent, /* @__PURE__ */ React.createElement(react.HStack, { w: "full", justify: "space-between" }, children))) : /* @__PURE__ */ React.createElement(chakraReactSelect.chakraComponents.Control, __spreadValues$12({}, props), children);
-      }
-    };
+  function getComponents(components) {
+    return ramda.merge(
+      {
+        Menu: (props) => /* @__PURE__ */ React.createElement(react.Box, { "data-testid": "select-menu-wrapper-test-id" }, /* @__PURE__ */ React.createElement(chakraReactSelect.chakraComponents.Menu, __spreadValues$12({}, props), props.children)),
+        DropdownIndicator: (props) => props.selectProps.icon ? /* @__PURE__ */ React.createElement(chakraReactSelect.chakraComponents.DropdownIndicator, __spreadValues$12({}, props), /* @__PURE__ */ React.createElement(Icon$1, { as: props.selectProps.icon })) : /* @__PURE__ */ React.createElement(chakraReactSelect.chakraComponents.DropdownIndicator, __spreadValues$12({}, props)),
+        Option: (props) => props.selectProps.customOption ? /* @__PURE__ */ React.createElement(chakraReactSelect.chakraComponents.Option, __spreadValues$12({}, props), props.selectProps.customOption(props.data)) : /* @__PURE__ */ React.createElement(chakraReactSelect.chakraComponents.Option, __spreadValues$12({}, props)),
+        MultiValueContainer: (props) => props.selectProps.customTag ? /* @__PURE__ */ React.createElement(chakraReactSelect.chakraComponents.MultiValueContainer, __spreadValues$12({}, props), props.selectProps.customTag(props.data)) : /* @__PURE__ */ React.createElement(chakraReactSelect.chakraComponents.MultiValueContainer, __spreadValues$12({}, props)),
+        Control: (_a) => {
+          var _b = _a, {
+            children
+          } = _b, props = __objRest$R(_b, [
+            "children"
+          ]);
+          return props.selectProps.leftComponent ? /* @__PURE__ */ React.createElement(chakraReactSelect.chakraComponents.Control, __spreadValues$12({}, props), /* @__PURE__ */ React.createElement(react.HStack, { w: "full", pl: "2" }, props.selectProps.leftComponent, /* @__PURE__ */ React.createElement(react.HStack, { w: "full", justify: "space-between" }, children))) : /* @__PURE__ */ React.createElement(chakraReactSelect.chakraComponents.Control, __spreadValues$12({}, props), children);
+        }
+      },
+      components || {}
+    );
   }
 
   var __defProp$11 = Object.defineProperty;
@@ -9987,7 +9997,15 @@
       }
     return a;
   };
-  const EditableControls = ({ size }) => {
+  const mapEditableVariantsToButtonSubmitVariants = {
+    brand: "brand",
+    default: "success"
+  };
+  const mapEditableVariantsToButtonCancelVariants = {
+    brand: "ghost",
+    default: "danger"
+  };
+  const EditableControls = ({ size, variant = "default" }) => {
     const {
       getSubmitButtonProps,
       getCancelButtonProps
@@ -9999,7 +10017,7 @@
       __spreadValues$O({
         "aria-label": "Cancel",
         sx: button,
-        variant: "danger"
+        variant: mapEditableVariantsToButtonCancelVariants[variant]
       }, getCancelButtonProps()),
       /* @__PURE__ */ React.createElement(Icon$1, { sx: icon, as: icons.XCloseSolid })
     ), /* @__PURE__ */ React.createElement(
@@ -10007,7 +10025,7 @@
       __spreadValues$O({
         "aria-label": "Save",
         sx: button,
-        variant: "success"
+        variant: mapEditableVariantsToButtonSubmitVariants[variant]
       }, getSubmitButtonProps()),
       /* @__PURE__ */ React.createElement(Icon$1, { sx: icon, as: icons.CheckDuo })
     )) : /* @__PURE__ */ React.createElement(
@@ -10055,12 +10073,14 @@
       size = "md",
       value: inputValue,
       onSubmit,
-      leftItem
+      leftItem,
+      variant = "default"
     } = _b, rest = __objRest$E(_b, [
       "size",
       "value",
       "onSubmit",
-      "leftItem"
+      "leftItem",
+      "variant"
     ]);
     const [value, setValue] = React.useState(inputValue);
     const { input, preview } = react.useMultiStyleConfig("EditableText", { size, value });
@@ -10089,7 +10109,7 @@
           size,
           sx: input
         }
-      ), /* @__PURE__ */ React.createElement(react.InputRightElement, { sx: { width: "min-content" } }, /* @__PURE__ */ React.createElement(EditableControls, { size })))
+      ), /* @__PURE__ */ React.createElement(react.InputRightElement, { sx: { width: "min-content" } }, /* @__PURE__ */ React.createElement(EditableControls, { size, variant })))
     );
   };
 
@@ -12252,7 +12272,8 @@
       customTag = null,
       isClearable = false,
       value,
-      icon
+      icon,
+      components
     } = _b, rest = __objRest$l(_b, [
       "options",
       "isMulti",
@@ -12266,7 +12287,8 @@
       "customTag",
       "isClearable",
       "value",
-      "icon"
+      "icon",
+      "components"
     ]);
     const handleChange = useSelectCallbacks({
       onChange,
@@ -12276,7 +12298,7 @@
       value: ramda.is(Array, value) ? value : []
     });
     const customComponents = React.useMemo(
-      () => getComponents(),
+      () => getComponents(components),
       []
     );
     const prevOptions = React.useRef(
@@ -13828,10 +13850,28 @@
       }
     return target;
   };
+  const { Option: ChakraOption } = chakraReactSelect.chakraComponents;
   const customComponents = {
     Option: (_a) => {
       var _b = _a, { children } = _b, props = __objRest(_b, ["children"]);
-      return /* @__PURE__ */ React.createElement(chakraReactSelect.chakraComponents.Option, __spreadValues$1({}, props), /* @__PURE__ */ React.createElement(React.Fragment, null, props.data.isCreation ? /* @__PURE__ */ React.createElement(react.Flex, { mr: 3, width: 1.5, mb: 0.5, justifyContent: "center", alignItems: "center" }, /* @__PURE__ */ React.createElement(Icon$1, { mb: "4px", as: icons.PlusSolid, color: "brand" })) : /* @__PURE__ */ React.createElement(react.Box, { mr: 3, width: 1.5 }), children));
+      return /* @__PURE__ */ React.createElement(ChakraOption, __spreadValues$1({}, props), props.data.isCreation && /* @__PURE__ */ React.createElement(
+        react.Flex,
+        {
+          mr: 3,
+          width: 1.5,
+          mb: 0.5,
+          justifyContent: "center",
+          alignItems: "center"
+        },
+        /* @__PURE__ */ React.createElement(Icon$1, { as: icons.PlusSolid, color: "brand" })
+      ), !props.data.isCreation && /* @__PURE__ */ React.createElement(react.Box, { mr: 3, width: 1.5 }), /* @__PURE__ */ React.createElement(
+        react.Text,
+        {
+          color: props.data.isCreation ? "text.brand" : "text.default",
+          fontWeight: props.data.isCreation ? "semibold" : "normal"
+        },
+        children
+      ));
     }
   };
 
@@ -13854,70 +13894,67 @@
     return a;
   };
   var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+  const CREATION_OPTION_VALUE = "add_field";
   const CreatableSelectDropdown = ({
     standardOptions,
     initialPlaceholder = "Select or create...",
-    addOptionPlaceholder = "Enter text...",
+    addOptionPlaceholder = "Select or create...",
     creationOption = {
-      label: "Add option...",
-      value: "Add option...",
+      label: "Add field",
+      value: CREATION_OPTION_VALUE,
       isCreation: true
     },
     onOptionChange,
-    width = "100%",
     variant = "outline",
     defaultValue,
     value,
     menuPlacement = "bottom"
   }) => {
-    const initialSelectedOption = React.useMemo(
-      () => {
-        var _a, _b;
-        if (!ramda.isNil(value)) {
-          return (_a = standardOptions.find((option) => option.value === value)) != null ? _a : null;
-        }
-        if (!ramda.isNil(defaultValue)) {
-          return (_b = standardOptions.find((option) => option.value === defaultValue)) != null ? _b : null;
-        }
-        return null;
-      },
-      [value]
-    );
-    const [selectedOption, setSelectedOption] = React.useState(initialSelectedOption);
-    const [newOptionText, setNewOptionText] = React.useState("");
+    const [selectedOption, setSelectedOption] = React.useState(() => {
+      var _a, _b;
+      const targetValue = (_a = value != null ? value : defaultValue) != null ? _a : null;
+      return targetValue ? (_b = standardOptions.find((option) => option.value === targetValue)) != null ? _b : null : null;
+    });
     const [newOptionPlaceholder, setNewOptionPlaceholder] = React.useState(initialPlaceholder);
     const [createdOptions, setCreatedOptions] = React.useState([]);
+    const [createNewOption, setCreateNewOption] = React.useState(false);
+    const [addFieldInputValue, setAddFieldInputValue] = 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 checkIfNewOptionTextExistsInOptions = (string, options) => ramda.any((option) => ramda.toLower(option.value) === string, options);
+    const handleCreateOption = (newOptionTextString) => {
+      setCreateNewOption(true);
+      if (ramda.isEmpty(ramda.trim(newOptionTextString))) {
+        return;
       }
-    });
-    const handleInputChange = (newValue) => {
-      setNewOptionText(newValue);
-    };
-    const handleCreateOption = () => {
-      const newOptionTextLower = newOptionText.toLowerCase();
-      const newOptionExists = standardOptions.some((option) => option.value.toLowerCase() === newOptionTextLower);
-      if (!newOptionExists) {
-        const newOption = { label: newOptionText, value: newOptionText };
-        setCreatedOptions((currentCreatedOptions) => [...currentCreatedOptions, newOption]);
+      const newOptionTextLower = ramda.toLower(newOptionTextString);
+      const newOptionExistsInStandardOptions = checkIfNewOptionTextExistsInOptions(newOptionTextLower, standardOptions);
+      const newOptionExistsInCreatedOptions = checkIfNewOptionTextExistsInOptions(
+        newOptionTextLower,
+        createdOptions
+      );
+      if (!newOptionExistsInCreatedOptions && !newOptionExistsInStandardOptions) {
+        const newOption = {
+          label: newOptionTextString,
+          value: newOptionTextString
+        };
+        setCreatedOptions((currentCreatedOptions) => [
+          ...currentCreatedOptions,
+          newOption
+        ]);
         setSelectedOption(newOption);
         onOptionChange(newOption);
       }
-      setNewOptionText("");
       setNewOptionPlaceholder(initialPlaceholder);
     };
     const handleChange = (newValue, _actionMeta) => {
       const option = newValue;
-      if (option === null) {
+      if (newValue == null ? void 0 : newValue.isCreation) {
+        setCreateNewOption(true);
+      }
+      if (option == null) {
         return;
       }
       if (isCreationOption(option)) {
@@ -13925,14 +13962,10 @@
       } else {
         setNewOptionPlaceholder(initialPlaceholder);
       }
-      setSelectedOption(option);
-      onOptionChange(option);
-    };
-    const handleKeyDown = (event) => {
-      if (event.key === "Enter" && newOptionText) {
-        handleCreateOption();
-        event.preventDefault();
+      if (option.value !== CREATION_OPTION_VALUE) {
+        setSelectedOption(option);
       }
+      onOptionChange(option);
     };
     const combinedOptions = [...standardOptions, ...createdOptions];
     const customOptions = [
@@ -13941,13 +13974,36 @@
       }),
       ...combinedOptions
     ];
-    return /* @__PURE__ */ React.createElement(react.Box, { ref }, /* @__PURE__ */ React.createElement(
+    return /* @__PURE__ */ React.createElement(react.Box, { ref, w: "sm", maxW: "full" }, createNewOption && /* @__PURE__ */ React.createElement(
+      EditableText,
+      {
+        value: addFieldInputValue,
+        startWithEditView: true,
+        onChange: (v) => {
+          setAddFieldInputValue(v);
+        },
+        submitOnBlur: false,
+        onCancel: () => {
+          setAddFieldInputValue("");
+          setCreateNewOption(false);
+        },
+        onSubmit: (v) => {
+          handleCreateOption(v);
+          setCreateNewOption(false);
+        },
+        variant: "brand",
+        sx: {
+          minWidth: "100%",
+          width: "100%"
+        }
+      }
+    ), !createNewOption && /* @__PURE__ */ React.createElement(
       chakraReactSelect.CreatableSelect,
       {
         menuPlacement,
         chakraStyles: __spreadProps(__spreadValues({}, customSelectStyles), {
           container: (provided) => __spreadProps(__spreadValues({}, provided), {
-            width
+            width: "100%"
           }),
           option: (provided, { isSelected }) => __spreadValues(__spreadValues({}, provided), isSelected && {
             color: "black"
@@ -13958,11 +14014,11 @@
         value: selectedOption,
         onChange: handleChange,
         isMulti: false,
-        onInputChange: handleInputChange,
-        onKeyDown: handleKeyDown,
-        onCreateOption: handleCreateOption,
+        onCreateOption: (v) => {
+          setCreateNewOption(true);
+          setAddFieldInputValue(v);
+        },
         placeholder: newOptionPlaceholder,
-        inputValue: newOptionText,
         useBasicStyles: true,
         variant
       }
@@ -14645,6 +14701,10 @@
     enumerable: true,
     get: function () { return chakraReactSelect.CreatableSelect; }
   });
+  Object.defineProperty(exports, 'selectChakraComponents', {
+    enumerable: true,
+    get: function () { return chakraReactSelect.chakraComponents; }
+  });
   Object.defineProperty(exports, 'useController', {
     enumerable: true,
     get: function () { return reactHookForm.useController; }