@northlight/ui 2.28.0 → 2.28.2

package/dist/umd/northlight.cjs

@@ -1,8 +1,8 @@
 (function (global, factory) {
-  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@chakra-ui/react'), require('react'), require('chakra-react-select'), require('ramda'), require('@react-aria/focus'), require('react-hook-form'), require('@chakra-ui/system'), require('@northlight/tokens'), require('@northlight/icons'), require('@hookform/resolvers/joi'), require('@react-aria/checkbox'), require('@react-aria/radio'), require('@react-aria/utils'), require('@react-stately/radio'), require('@react-stately/checkbox'), require('@chakra-ui/theme-tools'), require('@react-aria/datepicker'), require('@react-stately/datepicker'), require('@internationalized/date'), require('@react-aria/button'), require('@react-aria/i18n'), require('@react-stately/calendar'), require('@react-aria/calendar'), require('react-router-dom'), require('@chakra-ui/clickable'), require('framer-motion'), require('@dnd-kit/core'), require('@dnd-kit/utilities'), require('@dnd-kit/sortable'), require('@dnd-kit/modifiers'), require('react-window'), require('react-virtualized-auto-sizer'), require('react-avatar-editor'), require('react-number-format'), require('react-input-mask')) :
-  typeof define === 'function' && define.amd ? define(['exports', '@chakra-ui/react', 'react', 'chakra-react-select', 'ramda', '@react-aria/focus', 'react-hook-form', '@chakra-ui/system', '@northlight/tokens', '@northlight/icons', '@hookform/resolvers/joi', '@react-aria/checkbox', '@react-aria/radio', '@react-aria/utils', '@react-stately/radio', '@react-stately/checkbox', '@chakra-ui/theme-tools', '@react-aria/datepicker', '@react-stately/datepicker', '@internationalized/date', '@react-aria/button', '@react-aria/i18n', '@react-stately/calendar', '@react-aria/calendar', 'react-router-dom', '@chakra-ui/clickable', 'framer-motion', '@dnd-kit/core', '@dnd-kit/utilities', '@dnd-kit/sortable', '@dnd-kit/modifiers', 'react-window', 'react-virtualized-auto-sizer', 'react-avatar-editor', 'react-number-format', 'react-input-mask'], factory) :
-  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.northlight = {}, global.react, global.React, global.chakraReactSelect, global.ramda, global.focus, global.reactHookForm, global.system, global.tokens, global.icons, global.joi, global.checkbox$1, global.radio$1, global.utils, global.radio, global.checkbox, global.themeTools, global.datepicker, global.datepicker$1, global.date, global.button, global.i18n, global.calendar$1, global.calendar, global.reactRouterDom, global.clickable, global.framerMotion, global.core, global.utilities, global.sortable, global.modifiers, global.reactWindow, global.AutoSizer, global.AvatarEditor, global.reactNumberFormat, global.InputMask));
-})(this, (function (exports, react, React, chakraReactSelect, ramda, focus, reactHookForm, system, tokens, icons, joi, checkbox$1, radio$1, utils, radio, checkbox, themeTools, datepicker, datepicker$1, date, button, i18n, calendar$1, calendar, reactRouterDom, clickable, framerMotion, core, utilities, sortable, modifiers, reactWindow, AutoSizer, AvatarEditor, reactNumberFormat, InputMask) { 'use strict';
+  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@chakra-ui/react'), require('react'), require('chakra-react-select'), require('ramda'), require('@react-aria/focus'), require('react-hook-form'), require('@chakra-ui/system'), require('@northlight/tokens'), require('@northlight/icons'), require('@hookform/resolvers/joi'), require('@react-aria/checkbox'), require('@react-aria/radio'), require('@react-aria/utils'), require('@react-stately/radio'), require('@react-stately/checkbox'), require('@chakra-ui/theme-tools'), require('@react-aria/datepicker'), require('@react-stately/datepicker'), require('@internationalized/date'), require('@react-aria/button'), require('@react-aria/i18n'), require('@react-stately/calendar'), require('@react-aria/calendar'), require('react-router-dom'), require('@chakra-ui/clickable'), require('framer-motion'), require('@dnd-kit/core'), require('@dnd-kit/utilities'), require('@dnd-kit/sortable'), require('@dnd-kit/modifiers'), require('react-window'), require('react-virtualized-auto-sizer'), require('react-avatar-editor'), require('react-number-format'), require('react-input-mask'), require('yafu')) :
+  typeof define === 'function' && define.amd ? define(['exports', '@chakra-ui/react', 'react', 'chakra-react-select', 'ramda', '@react-aria/focus', 'react-hook-form', '@chakra-ui/system', '@northlight/tokens', '@northlight/icons', '@hookform/resolvers/joi', '@react-aria/checkbox', '@react-aria/radio', '@react-aria/utils', '@react-stately/radio', '@react-stately/checkbox', '@chakra-ui/theme-tools', '@react-aria/datepicker', '@react-stately/datepicker', '@internationalized/date', '@react-aria/button', '@react-aria/i18n', '@react-stately/calendar', '@react-aria/calendar', 'react-router-dom', '@chakra-ui/clickable', 'framer-motion', '@dnd-kit/core', '@dnd-kit/utilities', '@dnd-kit/sortable', '@dnd-kit/modifiers', 'react-window', 'react-virtualized-auto-sizer', 'react-avatar-editor', 'react-number-format', 'react-input-mask', 'yafu'], factory) :
+  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.northlight = {}, global.react, global.React, global.chakraReactSelect, global.ramda, global.focus, global.reactHookForm, global.system, global.tokens, global.icons, global.joi, global.checkbox$1, global.radio$1, global.utils, global.radio, global.checkbox, global.themeTools, global.datepicker, global.datepicker$1, global.date, global.button, global.i18n, global.calendar$1, global.calendar, global.reactRouterDom, global.clickable, global.framerMotion, global.core, global.utilities, global.sortable, global.modifiers, global.reactWindow, global.AutoSizer, global.AvatarEditor, global.reactNumberFormat, global.InputMask, global.yafu));
+})(this, (function (exports, react, React, chakraReactSelect, ramda, focus, reactHookForm, system, tokens, icons, joi, checkbox$1, radio$1, utils, radio, checkbox, themeTools, datepicker, datepicker$1, date, button, i18n, calendar$1, calendar, reactRouterDom, clickable, framerMotion, core, utilities, sortable, modifiers, reactWindow, AutoSizer, AvatarEditor, reactNumberFormat, InputMask, yafu) { 'use strict';
 
   var __defProp$2q = Object.defineProperty;
   var __getOwnPropSymbols$2q = Object.getOwnPropertySymbols;
@@ -13932,26 +13932,26 @@
   var __propIsEnum = Object.prototype.propertyIsEnumerable;
   var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
   var __spreadValues = (a, b) => {
-    for (var prop in b || (b = {}))
-      if (__hasOwnProp.call(b, prop))
-        __defNormalProp(a, prop, b[prop]);
+    for (var prop2 in b || (b = {}))
+      if (__hasOwnProp.call(b, prop2))
+        __defNormalProp(a, prop2, b[prop2]);
     if (__getOwnPropSymbols)
-      for (var prop of __getOwnPropSymbols(b)) {
-        if (__propIsEnum.call(b, prop))
-          __defNormalProp(a, prop, b[prop]);
+      for (var prop2 of __getOwnPropSymbols(b)) {
+        if (__propIsEnum.call(b, prop2))
+          __defNormalProp(a, prop2, b[prop2]);
       }
     return a;
   };
   var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
   var __objRest = (source, exclude) => {
     var target = {};
-    for (var prop in source)
-      if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
-        target[prop] = source[prop];
+    for (var prop2 in source)
+      if (__hasOwnProp.call(source, prop2) && exclude.indexOf(prop2) < 0)
+        target[prop2] = source[prop2];
     if (source != null && __getOwnPropSymbols)
-      for (var prop of __getOwnPropSymbols(source)) {
-        if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
-          target[prop] = source[prop];
+      for (var prop2 of __getOwnPropSymbols(source)) {
+        if (exclude.indexOf(prop2) < 0 && __propIsEnum.call(source, prop2))
+          target[prop2] = source[prop2];
       }
     return target;
   };
@@ -14040,7 +14040,7 @@
       onOptionChange(option);
     };
     const combinedOptions = React.useMemo(
-      () => [...standardOptions, ...createdOptions],
+      () => yafu.uniqBy(ramda.prop("value"), [...standardOptions, ...createdOptions]),
       [standardOptions, createdOptions]
     );
     const customOptions = [
@@ -14056,55 +14056,64 @@
         setSelectedOption(newSelectedOption);
       }
     }, [value, combinedOptions]);
-    return /* @__PURE__ */ React.createElement(react.Box, { ref, w: "sm", maxW: "full" }, createNewOption && /* @__PURE__ */ React.createElement(
-      EditableText,
+    return /* @__PURE__ */ React.createElement(
+      react.Box,
       {
-        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,
-      __spreadValues({
-        menuPlacement,
-        chakraStyles: __spreadProps(__spreadValues({}, customSelectStyles), {
-          container: (provided) => __spreadProps(__spreadValues({}, provided), {
+        ref,
+        w: "full",
+        borderRadius: "none"
+      },
+      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,
+        __spreadValues({
+          menuPlacement,
+          chakraStyles: __spreadProps(__spreadValues({}, customSelectStyles), {
+            container: (provided) => __spreadProps(__spreadValues({}, provided), {
+              width: "100%"
+            }),
+            option: (provided, { isSelected }) => __spreadValues(__spreadValues({}, provided), isSelected && {
+              color: "black"
+            })
           }),
-          option: (provided, { isSelected }) => __spreadValues(__spreadValues({}, provided), isSelected && {
-            color: "black"
-          })
-        }),
-        components: getCustomComponents(),
-        options: customOptions,
-        value: selectedOption,
-        onChange: handleChange,
-        isMulti: false,
-        onCreateOption: (v) => {
-          setCreateNewOption(true);
-          setAddFieldInputValue(v);
-        },
-        placeholder: newOptionPlaceholder,
-        useBasicStyles: true,
-        variant
-      }, restProps)
-    ));
+          components: getCustomComponents(),
+          options: customOptions,
+          value: selectedOption,
+          onChange: handleChange,
+          isMulti: false,
+          onCreateOption: (v) => {
+            setCreateNewOption(true);
+            setAddFieldInputValue(v);
+          },
+          placeholder: newOptionPlaceholder,
+          useBasicStyles: true,
+          variant
+        }, restProps)
+      )
+    );
   };
 
   Object.defineProperty(exports, 'AbsoluteCenter', {