@7shifts/sous-chef 3.68.0 → 3.69.0

package/dist/index.js

@@ -6070,6 +6070,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"
 };
@@ -6111,6 +6114,7 @@ var en = {
 	PaginationControls: PaginationControls$1,
 	AsyncSelectField: AsyncSelectField$1,
 	SelectField: SelectField$1,
+	PillSelectField: PillSelectField$1,
 	HintModal: HintModal$1,
 	Calendar: Calendar$1,
 	Card: Card$1,
@@ -10931,7 +10935,7 @@ var TextFieldElement = function TextFieldElement(_ref, ref) {
 };
 var TextField = React.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"};
 
 var useMultiSelectFieldControllers = function useMultiSelectFieldControllers(_ref) {
   var name = _ref.name,
@@ -10979,6 +10983,72 @@ var useMultiSelectFieldControllers = function useMultiSelectFieldControllers(_re
   return controllers;
 };
 
+/** CreatableOption element for PillSelectField. */
+var CreatableOption = function CreatableOption(_ref) {
+  var name = _ref.name,
+    createOptionLabel = _ref.createOptionLabel,
+    onCreate = _ref.onCreate,
+    testId = _ref.testId;
+  var __ = useTranslation('PillSelectField');
+  var _useState = React.useState(false),
+    isCreatingOption = _useState[0],
+    setIsCreatingOption = _useState[1];
+  var _useState2 = React.useState(''),
+    newOptionLabel = _useState2[0],
+    setNewOptionLabel = _useState2[1];
+  var createOption = function createOption() {
+    if (onCreate) {
+      onCreate(newOptionLabel);
+    }
+    setNewOptionLabel('');
+    setIsCreatingOption(false);
+  };
+  return React__default["default"].createElement(React__default["default"].Fragment, null, !isCreatingOption && React__default["default"].createElement("div", {
+    key: 'pill-select-field-create-option',
+    className: styles$j['pill-select-field']
+  }, React__default["default"].createElement("button", {
+    "data-testid": testId ? testId + "-create-option" : undefined,
+    className: styles$j['pill-select-field__add-new-input'],
+    onClick: function onClick() {
+      setIsCreatingOption(true);
+      setNewOptionLabel('');
+    }
+  }, React__default["default"].createElement(IconPlus, {
+    size: "small"
+  }), createOptionLabel)), isCreatingOption && React__default["default"].createElement("div", {
+    key: 'pill-select-field-creating-option',
+    className: styles$j['pill-select-field']
+  }, React__default["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: function onChange(e) {
+      return setNewOptionLabel(e.target.value);
+    },
+    onBlur: function onBlur() {
+      createOption();
+    },
+    onClick: createOption,
+    onKeyDown: function onKeyDown(e) {
+      if (e.key === 'Enter') {
+        createOption();
+      } else if (e.key === 'Escape') {
+        setIsCreatingOption(false);
+        setNewOptionLabel('');
+      }
+    }
+  }), React__default["default"].createElement("span", {
+    className: styles$j['pill-select-field__creating-custom-input']
+  }, !newOptionLabel && React__default["default"].createElement(Text, {
+    as: "body",
+    color: "grey-300"
+  }, __('enterOption')), !!newOptionLabel && newOptionLabel)));
+};
+
 /** PillSelectField form element. */
 var PillSelectField = function PillSelectField(_ref) {
   var name = _ref.name,
@@ -10990,7 +11060,10 @@ var PillSelectField = function PillSelectField(_ref) {
     caption = _ref.caption,
     error = _ref.error,
     disabled = _ref.disabled,
-    testId = _ref.testId;
+    testId = _ref.testId,
+    onCreate = _ref.onCreate,
+    onRemoveOption = _ref.onRemoveOption,
+    createOptionLabel = _ref.createOptionLabel;
   var controllers = useMultiSelectFieldControllers({
     name: name,
     id: inputId,
@@ -11006,9 +11079,31 @@ var PillSelectField = function PillSelectField(_ref) {
     caption: caption,
     error: controllers.error
   };
+  var RemoveButton = function RemoveButton(_ref2) {
+    var option = _ref2.option;
+    var handleClick = function handleClick() {
+      if (controllers.value) {
+        var _controllers$value;
+        controllers.onChange((_controllers$value = controllers.value) == null ? void 0 : _controllers$value.filter(function (o) {
+          return o.value !== option.value;
+        }));
+      }
+      if (option.isRemovable && onRemoveOption) {
+        onRemoveOption(options.filter(function (x) {
+          return x.value !== option.value;
+        }));
+      }
+    };
+    return React__default["default"].createElement("button", {
+      className: styles$j['pill-select-field__removable-icon'],
+      onClick: handleClick
+    }, React__default["default"].createElement(IconTimes, {
+      size: "small"
+    }));
+  };
   return React__default["default"].createElement(Field, _extends({}, fieldProps), React__default["default"].createElement(Inline, {
     flexWrap: "wrap",
-    space: 12
+    space: 8
   }, options.map(function (option, key) {
     var selectedItemIndex = (controllers.value || []).findIndex(function (val) {
       return val.value === option.value;
@@ -11039,7 +11134,14 @@ var PillSelectField = function PillSelectField(_ref) {
       }
     }), React__default["default"].createElement("span", {
       className: styles$j['pill-select-field__custom-input']
-    }, option.label));
+    }, option.label, option.isRemovable && React__default["default"].createElement(RemoveButton, {
+      option: option
+    })));
+  }), createOptionLabel && React__default["default"].createElement(CreatableOption, {
+    name: name,
+    testId: testId,
+    onCreate: onCreate,
+    createOptionLabel: createOptionLabel
   })));
 };