@7shifts/sous-chef 3.68.0 → 3.69.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,
@@ -11097,7 +11101,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 +11147,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 +11219,10 @@ const PillSelectField = ({
   caption,
   error,
   disabled,
-  testId
+  testId,
+  onCreate,
+  onRemoveOption,
+  createOptionLabel
 }) => {
   const controllers = useMultiSelectFieldControllers({
     name,
@@ -11171,9 +11239,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 +11289,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
   })));
 };