@superdispatch/ui-lab 0.46.0 → 0.47.0

package/dist-node/index.js

@@ -867,7 +867,111 @@ var DescriptionLineItem = /*#__PURE__*/react.forwardRef((_ref, ref) => {
 if (process.env.NODE_ENV !== "production") DescriptionLineItem.displayName = "DescriptionLineItem";
 DescriptionLineItem.displayName = 'DescriptionLineItem';
 
-var _excluded$5 = ["disabled", "children", "hintText", "startIcon", "fallback", "accept", "maxSize", "maxFiles", "onDropRejected", "onDropAccepted"];
+function CloseIcon(props) {
+  return /*#__PURE__*/jsxRuntime.jsx(core.SvgIcon, _objectSpread(_objectSpread({}, props), {}, {
+    viewBox: "0 0 6 6",
+    style: {
+      width: '6px',
+      height: '6px'
+    },
+    children: /*#__PURE__*/jsxRuntime.jsx("path", {
+      fillRule: "evenodd",
+      clipRule: "evenodd",
+      d: "M3.72278 2.99999L5.91671 0.806074L5.19396 0.0833282L3.00004 2.27725L0.80612 0.0833282L0.083374 0.806076L2.27729 2.99999L0.083374 5.19391L0.80612 5.91666L3.00004 3.72274L5.19396 5.91666L5.91671 5.19392L3.72278 2.99999Z",
+      fill: ui.Color.Dark100
+    })
+  }));
+}
+
+var _excluded$5 = ["value", "onChange", "TextFieldProps"];
+var MultipleFieldText = /*#__PURE__*/styled__default(core.TextField).withConfig({
+  displayName: "EmailAutocomplete__MultipleFieldText",
+  componentId: "SD__sc-126rmmq-0"
+})(["&{width:100%;margin-top:8px;overflow:hidden;}&& .MuiAutocomplete-inputRoot{flex-direction:column;align-items:flex-start;width:100%;gap:8px;& .MuiAutocomplete-input{width:100%;}}"]);
+var EmailAutocomplete = /*#__PURE__*/react.forwardRef((_ref, ref) => {
+  var {
+      value,
+      onChange: _onChange,
+      TextFieldProps
+    } = _ref,
+    props = _objectWithoutProperties(_ref, _excluded$5);
+  function handleDelete(index) {
+    var filteredOrders = value === null || value === void 0 ? void 0 : value.filter((_item, fieldIndex) => fieldIndex !== index);
+    void (_onChange === null || _onChange === void 0 ? void 0 : _onChange(filteredOrders, 'remove-option'));
+  }
+  return /*#__PURE__*/jsxRuntime.jsx(lab.Autocomplete, _objectSpread(_objectSpread({}, props), {}, {
+    ref: ref,
+    multiple: true,
+    freeSolo: true,
+    filterSelectedOptions: true,
+    disableClearable: true,
+    value: value,
+    filterOptions: _filterOptions => {
+      return _filterOptions.filter(option => option !== '');
+    },
+    onChange: (event, selectedValue) => {
+      var keyboardEvent = event;
+      var lastElement = selectedValue[selectedValue.length - 1];
+      if (keyboardEvent.key === 'Backspace') {
+        var removeLatesElement = value === null || value === void 0 ? void 0 : value.filter((_, index) => index < value.length - 1);
+        _onChange === null || _onChange === void 0 ? void 0 : _onChange(removeLatesElement, 'remove-option');
+      } else if (keyboardEvent.key === 'Enter' && lastElement) {
+        _onChange === null || _onChange === void 0 ? void 0 : _onChange([...(value || []), lastElement], 'select-option');
+      } else if (lastElement) {
+        var emails = lastElement.split(',').map(item => item.replace(' ', ''));
+        _onChange === null || _onChange === void 0 ? void 0 : _onChange(emails, 'select-option');
+      } else {
+        _onChange === null || _onChange === void 0 ? void 0 : _onChange(selectedValue, 'select-option');
+      }
+    },
+    renderTags: items => {
+      return /*#__PURE__*/jsxRuntime.jsx(ui.Inline, {
+        space: "xxsmall",
+        children: items.map((option, index) => {
+          return /*#__PURE__*/jsxRuntime.jsx(ui.Tag, {
+            color: "grey",
+            variant: "subtle",
+            children: /*#__PURE__*/jsxRuntime.jsxs(ui.Inline, {
+              space: "xxsmall",
+              children: [/*#__PURE__*/jsxRuntime.jsx(uiLab.TextBox, {
+                wrapOverflow: true,
+                color: "primary",
+                children: option
+              }), /*#__PURE__*/jsxRuntime.jsx(core.IconButton, {
+                size: "small",
+                onClick: () => {
+                  handleDelete(index);
+                },
+                children: /*#__PURE__*/jsxRuntime.jsx(CloseIcon, {})
+              })]
+            })
+          }, index);
+        })
+      });
+    },
+    renderInput: params => /*#__PURE__*/jsxRuntime.jsx(MultipleFieldText, _objectSpread(_objectSpread(_objectSpread({}, params), TextFieldProps), {}, {
+      multiline: true,
+      minRows: 2,
+      variant: "outlined",
+      fullWidth: true,
+      InputProps: _objectSpread(_objectSpread(_objectSpread({}, TextFieldProps === null || TextFieldProps === void 0 ? void 0 : TextFieldProps.InputProps), params.InputProps), {}, {
+        startAdornment: params.InputProps.startAdornment
+      }),
+      placeholder: "Enter individual emails on each line or separate them with comma (,)",
+      onChange: event => {
+        var text = event.target.value.replace(/,/g, '');
+        var hasCommaOrSpace = /,|\s/.test(event.target.value);
+        if (hasCommaOrSpace && text.trim() !== '') {
+          _onChange === null || _onChange === void 0 ? void 0 : _onChange([...(value || []), text.trim()], 'select-option');
+        }
+      }
+    }))
+  }));
+});
+if (process.env.NODE_ENV !== "production") EmailAutocomplete.displayName = "EmailAutocomplete";
+EmailAutocomplete.displayName = 'EmailAutocomplete';
+
+var _excluded$6 = ["disabled", "children", "hintText", "startIcon", "fallback", "accept", "maxSize", "maxFiles", "onDropRejected", "onDropAccepted"];
 function toBytes(input, unit) {
   if (unit === 'gb') return input * (1 << 30);
   if (unit === 'mb') return input * (1 << 20);
@@ -936,7 +1040,7 @@ var FileDropZone = /*#__PURE__*/react.forwardRef((props, ref) => {
       onDropRejected: _onDropRejected,
       onDropAccepted: _onDropAccepted
     } = props,
-    dropzoneProps = _objectWithoutProperties(props, _excluded$5);
+    dropzoneProps = _objectWithoutProperties(props, _excluded$6);
   return /*#__PURE__*/jsxRuntime.jsx(react.Suspense, {
     fallback: fallback,
     children: /*#__PURE__*/jsxRuntime.jsx(Dropzone, _objectSpread(_objectSpread({}, dropzoneProps), {}, {
@@ -1133,7 +1237,7 @@ var FlagList = /*#__PURE__*/react.forwardRef((_ref2, ref) => {
 });
 if (process.env.NODE_ENV !== "production") FlagList.displayName = "FlagList";
 
-var _excluded$6 = ["variant", "showHelpIcon", "endAction", "children"];
+var _excluded$7 = ["variant", "showHelpIcon", "endAction", "children"];
 var IconContainer = /*#__PURE__*/styled__default.div.withConfig({
   displayName: "FlagListItem__IconContainer",
   componentId: "SD__sc-o5bqru-0"
@@ -1193,7 +1297,7 @@ var FlagListItem = /*#__PURE__*/react.forwardRef((_ref7, ref) => {
       endAction,
       children
     } = _ref7,
-    rest = _objectWithoutProperties(_ref7, _excluded$6);
+    rest = _objectWithoutProperties(_ref7, _excluded$7);
   return /*#__PURE__*/jsxRuntime.jsxs(BannerListContainer, _objectSpread(_objectSpread({}, rest), {}, {
     ref: ref,
     $variant: variant,
@@ -1210,7 +1314,7 @@ var FlagListItem = /*#__PURE__*/react.forwardRef((_ref7, ref) => {
 });
 if (process.env.NODE_ENV !== "production") FlagListItem.displayName = "FlagListItem";
 
-var _excluded$7 = ["color", "target", "rel"],
+var _excluded$8 = ["color", "target", "rel"],
   _excluded2$2 = ["children", "linkComponent"];
 var DefaultLinkComponent = /*#__PURE__*/react.forwardRef((_ref, ref) => {
   var {
@@ -1218,7 +1322,7 @@ var DefaultLinkComponent = /*#__PURE__*/react.forwardRef((_ref, ref) => {
       target = '_blank',
       rel = 'noreferrer noopener'
     } = _ref,
-    props = _objectWithoutProperties(_ref, _excluded$7);
+    props = _objectWithoutProperties(_ref, _excluded$8);
   return /*#__PURE__*/jsxRuntime.jsx(core.Link, _objectSpread(_objectSpread({}, props), {}, {
     ref: ref,
     rel: rel,
@@ -1264,7 +1368,7 @@ function useNavbarContext() {
   return react.useContext(NavbarContext);
 }
 
-var _excluded$8 = ["active", "hasBadge"];
+var _excluded$9 = ["active", "hasBadge"];
 var StyledBottomNavigation = /*#__PURE__*/styled__default(core.BottomNavigation).withConfig({
   displayName: "NavbarBottomBar__StyledBottomNavigation",
   componentId: "SD__sc-9z6v3k-0"
@@ -1308,7 +1412,7 @@ function NavbarBottomBar(_ref) {
           active,
           hasBadge
         } = _ref2,
-        item = _objectWithoutProperties(_ref2, _excluded$8);
+        item = _objectWithoutProperties(_ref2, _excluded$9);
       return /*#__PURE__*/react.createElement(StyledBottomNavigationAction, _objectSpread(_objectSpread({}, item), {}, {
         key: item.value,
         icon: hasBadge ? /*#__PURE__*/jsxRuntime.jsxs(IconWrapper, {
@@ -1668,7 +1772,7 @@ function Navbar(_ref) {
   });
 }
 
-var _excluded$9 = ["title", "subtitle", "children"];
+var _excluded$a = ["title", "subtitle", "children"];
 var StyledTypography = /*#__PURE__*/styled__default(core.Typography).withConfig({
   displayName: "NavbarAvatar__StyledTypography",
   componentId: "SD__sc-19q2zd0-0"
@@ -1679,7 +1783,7 @@ function NavbarAvatar(_ref) {
       subtitle,
       children
     } = _ref,
-    props = _objectWithoutProperties(_ref, _excluded$9);
+    props = _objectWithoutProperties(_ref, _excluded$a);
   var {
     isNavbarExpanded
   } = useNavbarContext();
@@ -1889,7 +1993,7 @@ var SidebarContainer = /*#__PURE__*/react.forwardRef((_ref, ref) => {
 });
 if (process.env.NODE_ENV !== "production") SidebarContainer.displayName = "SidebarContainer";
 
-var _excluded$a = ["onClick", "children"];
+var _excluded$b = ["onClick", "children"];
 function SidebarBackButton(_ref) {
   var {
       onClick: _onClick,
@@ -1897,7 +2001,7 @@ function SidebarBackButton(_ref) {
         fontSize: "small"
       })
     } = _ref,
-    props = _objectWithoutProperties(_ref, _excluded$a);
+    props = _objectWithoutProperties(_ref, _excluded$b);
   var isCollapsed = ui.useCollapseBreakpoint('sm');
   var {
     openSidebar
@@ -2275,6 +2379,7 @@ exports.Container = Container;
 exports.DescriptionItem = DescriptionItem;
 exports.DescriptionLineItem = DescriptionLineItem;
 exports.DottedLine = DottedLine;
+exports.EmailAutocomplete = EmailAutocomplete;
 exports.FileDropZone = FileDropZone;
 exports.FileListItem = FileListItem;
 exports.FlagList = FlagList;