@7shifts/sous-chef 3.68.0 → 3.70.0-beta.0

package/dist/index.modern.js

@@ -6215,6 +6215,9 @@ var SelectField$1 = {
 	createOption: "Create option",
 	createButton: "Create"
 };
+var PillSelectField$1 = {
+	enterOption: "Enter an option"
+};
 var HintModal$1 = {
 	dontShowAgainLabel: "Don't remind me again"
 };
@@ -6256,6 +6259,7 @@ var en = {
 	PaginationControls: PaginationControls$1,
 	AsyncSelectField: AsyncSelectField$1,
 	SelectField: SelectField$1,
+	PillSelectField: PillSelectField$1,
 	HintModal: HintModal$1,
 	Calendar: Calendar$1,
 	Card: Card$1,
@@ -10215,6 +10219,9 @@ function CustomOption(_ref) {
   const {
     UserCustomOption
   } = props.selectProps.componentsProps;
+  if (!UserCustomOption) {
+    return null;
+  }
   return React__default.createElement(components.Option, _extends({}, props), React__default.createElement(UserCustomOption, _extends({}, props), children));
 }
 
@@ -10396,7 +10403,7 @@ function CustomMenu(_ref) {
     });
   };
   const onCreateButton = () => {
-    if (textFieldRef.current && textFieldRef.current.value.trim() !== '') {
+    if (textFieldRef.current && textFieldRef.current.value.trim() !== '' && onCreate) {
       onCreate(textFieldRef.current.value);
       textFieldRef.current.value = '';
       setShowFooter(false);
@@ -10503,7 +10510,6 @@ const useSelectField = _ref => {
       }
       return !isScrollingTheSelectMenu(e.target);
     },
-    // Used to pass props to the custom components inside `components`
     componentsProps: {
       testId,
       UserCustomOption,
@@ -11097,7 +11103,7 @@ const TextFieldElement = (_ref, ref) => {
 };
 const TextField = forwardRef(TextFieldElement);
 
-var styles$j = {"pill-select-field":"_Yti6k","pill-select-field__custom-input":"_JXakU"};
+var styles$j = {"pill-select-field":"_Yti6k","pill-select-field__creating-input":"_dw-VP","pill-select-field__custom-input":"_JXakU","pill-select-field__add-new-input":"_MsKVV","pill-select-field__creating-custom-input":"_ZxEwG","pill-select-field__removable-icon":"_Odw1V"};
 
 const useMultiSelectFieldControllers = ({
   name,
@@ -11143,6 +11149,67 @@ const useMultiSelectFieldControllers = ({
   return controllers;
 };
 
+/** CreatableOption element for PillSelectField. */
+const CreatableOption = ({
+  name,
+  createOptionLabel,
+  onCreate,
+  testId
+}) => {
+  const __ = useTranslation('PillSelectField');
+  const [isCreatingOption, setIsCreatingOption] = useState(false);
+  const [newOptionLabel, setNewOptionLabel] = useState('');
+  const createOption = () => {
+    if (onCreate) {
+      onCreate(newOptionLabel);
+    }
+    setNewOptionLabel('');
+    setIsCreatingOption(false);
+  };
+  return React__default.createElement(React__default.Fragment, null, !isCreatingOption && React__default.createElement("div", {
+    key: 'pill-select-field-create-option',
+    className: styles$j['pill-select-field']
+  }, React__default.createElement("button", {
+    "data-testid": testId ? `${testId}-create-option` : undefined,
+    className: styles$j['pill-select-field__add-new-input'],
+    onClick: () => {
+      setIsCreatingOption(true);
+      setNewOptionLabel('');
+    }
+  }, React__default.createElement(IconPlus, {
+    size: "small"
+  }), createOptionLabel)), isCreatingOption && React__default.createElement("div", {
+    key: 'pill-select-field-creating-option',
+    className: styles$j['pill-select-field']
+  }, React__default.createElement("input", {
+    className: styles$j['pill-select-field__creating-input'],
+    name: `${name}-pill-select-field-creating-option`,
+    id: 'pill-select-field-creating-option',
+    type: "text",
+    autoFocus: true,
+    "data-testid": testId ? `${testId}-creating-option` : undefined,
+    value: newOptionLabel,
+    onChange: e => setNewOptionLabel(e.target.value),
+    onBlur: () => {
+      createOption();
+    },
+    onClick: createOption,
+    onKeyDown: e => {
+      if (e.key === 'Enter') {
+        createOption();
+      } else if (e.key === 'Escape') {
+        setIsCreatingOption(false);
+        setNewOptionLabel('');
+      }
+    }
+  }), React__default.createElement("span", {
+    className: styles$j['pill-select-field__creating-custom-input']
+  }, !newOptionLabel && React__default.createElement(Text, {
+    as: "body",
+    color: "grey-300"
+  }, __('enterOption')), !!newOptionLabel && newOptionLabel)));
+};
+
 /** PillSelectField form element. */
 const PillSelectField = ({
   name,
@@ -11154,7 +11221,10 @@ const PillSelectField = ({
   caption,
   error,
   disabled,
-  testId
+  testId,
+  onCreate,
+  onRemoveOption,
+  createOptionLabel
 }) => {
   const controllers = useMultiSelectFieldControllers({
     name,
@@ -11171,9 +11241,28 @@ const PillSelectField = ({
     caption,
     error: controllers.error
   };
+  const RemoveButton = ({
+    option
+  }) => {
+    const handleClick = () => {
+      if (controllers.value) {
+        var _controllers$value;
+        controllers.onChange((_controllers$value = controllers.value) == null ? void 0 : _controllers$value.filter(o => o.value !== option.value));
+      }
+      if (option.isRemovable && onRemoveOption) {
+        onRemoveOption(options.filter(x => x.value !== option.value));
+      }
+    };
+    return React__default.createElement("button", {
+      className: styles$j['pill-select-field__removable-icon'],
+      onClick: handleClick
+    }, React__default.createElement(IconTimes, {
+      size: "small"
+    }));
+  };
   return React__default.createElement(Field, _extends({}, fieldProps), React__default.createElement(Inline, {
     flexWrap: "wrap",
-    space: 12
+    space: 8
   }, options.map((option, key) => {
     const selectedItemIndex = (controllers.value || []).findIndex(val => val.value === option.value);
     const isChecked = selectedItemIndex >= 0;
@@ -11202,7 +11291,14 @@ const PillSelectField = ({
       }
     }), React__default.createElement("span", {
       className: styles$j['pill-select-field__custom-input']
-    }, option.label));
+    }, option.label, option.isRemovable && React__default.createElement(RemoveButton, {
+      option: option
+    })));
+  }), createOptionLabel && React__default.createElement(CreatableOption, {
+    name: name,
+    testId: testId,
+    onCreate: onCreate,
+    createOptionLabel: createOptionLabel
   })));
 };
 
@@ -11657,6 +11753,7 @@ const MultiSelectField = ({
     onBlur: controllers.onBlur,
     isMulti: true,
     closeMenuOnSelect: _closeOnSelect,
+    // @ts-expect-error Used to pass props to the custom components inside `components`
     componentsProps: {
       testId,
       UserCustomOption,
@@ -11741,7 +11838,7 @@ const AsyncSelectField = _ref => {
       options
     }) => {
       var _ref$current;
-      if (ref.current && inputValue !== (ref == null || (_ref$current = ref.current) == null ? void 0 : _ref$current['state']['inputValue'])) {
+      if (ref.current && inputValue !== (ref == null || (_ref$current = ref.current) == null ? void 0 : _ref$current['inputRef']['value'])) {
         return;
       }
       if (!hasFirstLoadPerformed) {