@7shifts/sous-chef 2.3.2 → 2.3.6

package/dist/index.js

@@ -393,7 +393,9 @@ var TooltipOverlay = function TooltipOverlay(_ref) {
   }, []);
   var tooltipRectPosition = tooltipRef === null || tooltipRef === void 0 ? void 0 : (_tooltipRef$current = tooltipRef.current) === null || _tooltipRef$current === void 0 ? void 0 : _tooltipRef$current.getBoundingClientRect();
   var position = calculatePosition(placement, anchorPosition, tooltipRectPosition);
-  return React__default.createElement(Portal, null, React__default.createElement("div", null, React__default.createElement("div", {
+  return React__default.createElement(Portal, null, React__default.createElement("div", {
+    role: "tooltip"
+  }, React__default.createElement("div", {
     ref: tooltipRef,
     style: _extends({}, position.overlay, {
       zIndex: Z_INDEX_LAYERS.TOOLTIP
@@ -429,6 +431,7 @@ var Tooltip = function Tooltip(_ref, forwardedRef) {
       header = _ref.header,
       extraClass = _ref.extraClass,
       onClose = _ref.onClose,
+      onVisibleChange = _ref.onVisibleChange,
       children = _ref.children;
   var checkIsMounted = useIsMounted();
   var internalRef = React.useRef(null);
@@ -440,6 +443,11 @@ var Tooltip = function Tooltip(_ref, forwardedRef) {
 
   var isFocusingOnTooltip = React.useRef(false);
   var isFocusingOnAnchor = React.useRef(false);
+  React.useEffect(function () {
+    if (isVisible && !header && !overlay) {
+      setIsVisible(false);
+    }
+  }, [isVisible, header, overlay]);
 
   var updateOverlayVisibility = function updateOverlayVisibility(shouldShow) {
     setIsVisible(shouldShow);
@@ -447,6 +455,10 @@ var Tooltip = function Tooltip(_ref, forwardedRef) {
     if (!shouldShow) {
       onClose === null || onClose === void 0 ? void 0 : onClose();
     }
+
+    if (onVisibleChange) {
+      onVisibleChange(shouldShow);
+    }
   };
 
   var onAnchorFocusIn = function onAnchorFocusIn() {
@@ -1801,6 +1813,25 @@ var IconGavel = function IconGavel(props) {
 
 IconGavel.displayName = 'IconGavel';
 
+var IconGif = function IconGif(props) {
+  return React__default.createElement("svg", Object.assign({
+    viewBox: "0 0 20 20",
+    xmlns: "http://www.w3.org/2000/svg",
+    "data-testid": "icon-gif",
+    style: getIconStyles(props)
+  }, props), React__default.createElement("path", {
+    d: "M18.096 2.85H1.906c-.79 0-1.43.64-1.43 1.429v11.428c0 .79.64 1.429 1.43 1.429h16.19c.789 0 1.428-.64 1.428-1.429V4.28c0-.79-.64-1.429-1.428-1.429Z",
+    stroke: "currentColor",
+    strokeWidth: 0.952,
+    fill: "none"
+  }), React__default.createElement("path", {
+    d: "M7.124 12.541c.876 0 1.592-.373 2.087-.93V9.715H6.804v.785h1.524v.785c-.23.22-.686.457-1.204.457-1.006 0-1.753-.777-1.753-1.836 0-1.074.747-1.836 1.753-1.836a1.64 1.64 0 0 1 1.318.678l.724-.42c-.404-.578-1.052-1.05-2.042-1.05-1.478 0-2.667 1.028-2.667 2.628 0 1.592 1.189 2.636 2.667 2.636Zm3.907-.099V7.36h-.892v5.082h.892Zm1.971 0V10.24h2.538v-.785h-2.538v-1.31h2.59V7.36h-3.481v5.082h.891Z",
+    fill: "currentColor"
+  }));
+};
+
+IconGif.displayName = 'IconGif';
+
 var IconGift = function IconGift(props) {
   return React__default.createElement("svg", Object.assign({
     viewBox: "0 0 20 20",
@@ -2462,6 +2493,21 @@ var IconSort = function IconSort(props) {
 
 IconSort.displayName = 'IconSort';
 
+var IconStarSolid = function IconStarSolid(props) {
+  return React__default.createElement("svg", Object.assign({
+    viewBox: "0 0 20 20",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    "data-testid": "icon-star-solid",
+    style: getIconStyles(props)
+  }, props), React__default.createElement("path", {
+    d: "M8.944 1.591 6.602 6.34l-5.239.763C.423 7.24.047 8.398.73 9.06l3.79 3.694-.897 5.217c-.16.943.832 1.65 1.664 1.209l4.687-2.464 4.686 2.463c.832.438 1.826-.265 1.664-1.208l-.896-5.217 3.79-3.694c.681-.663.305-1.821-.635-1.958l-5.239-.763-2.341-4.748c-.42-.846-1.635-.857-2.058 0Z",
+    fill: "currentColor"
+  }));
+};
+
+IconStarSolid.displayName = 'IconStarSolid';
+
 var IconStar = function IconStar(props) {
   return React__default.createElement("svg", Object.assign({
     viewBox: "0 0 20 20",
@@ -2861,7 +2907,7 @@ var IconWrench = function IconWrench(props) {
 
 IconWrench.displayName = 'IconWrench';
 
-var styles$6 = {"item":"_3DlpO","clickable":"_2jPpF","selected":"_NS-B9","item-column":"_3ENNn","actions":"_1FTaE"};
+var styles$6 = {"item":"_3DlpO","selected":"_NS-B9","clickable":"_2jPpF","item-column":"_3ENNn","actions":"_1FTaE"};
 
 var ResourceTableRow = function ResourceTableRow(_ref) {
   var _classnames;
@@ -3178,7 +3224,7 @@ var useDataTableContext = function useDataTableContext() {
   return context;
 };
 
-var styles$9 = {"item":"_1d8Ci","clickable":"_thFcO","selected":"_3tb7U","item-column":"_OTcMc","item-column--default-padding":"_lNHQ8","item-column--right-align":"_13YLe","item-column--vertical-border":"_1rrRr","actions":"_azbIG"};
+var styles$9 = {"item":"_1d8Ci","selected":"_3tb7U","clickable":"_thFcO","item-column":"_OTcMc","item-column--default-padding":"_lNHQ8","item-column--right-align":"_13YLe","item-column--vertical-border":"_1rrRr","actions":"_azbIG"};
 
 var DataTableRow = function DataTableRow(_ref) {
   var _classnames;
@@ -3366,7 +3412,7 @@ var DataTable = function DataTable(_ref) {
       numberOfRows: numberOfRows,
       hasVerticalBorders: hasVerticalBorders
     }
-  }, React__default.createElement("div", null, React__default.createElement(DataTableHeader, {
+  }, React__default.createElement("div", null, columns && React__default.createElement(DataTableHeader, {
     columns: columns,
     onSort: onSort,
     showActionMenu: showActionMenu
@@ -3426,7 +3472,7 @@ var DataTableCell = function DataTableCell(_ref) {
   var _useDataTableContext = useDataTableContext(),
       columns = _useDataTableContext.columns;
 
-  var column = (_columns$columnIndex = columns[columnIndex]) != null ? _columns$columnIndex : null;
+  var column = (_columns$columnIndex = columns === null || columns === void 0 ? void 0 : columns[columnIndex]) != null ? _columns$columnIndex : null;
   var isRightAligned = column ? column.isRightAligned : false;
   return React__default.createElement("div", {
     className: classnames((_classnames = {}, _classnames[styles$b['data-table-cell--right-aligned']] = isRightAligned, _classnames), styles$b['data-table-cell'])
@@ -3453,49 +3499,33 @@ var getFormikState = function getFormikState(name, formik) {
     return null;
   }
 
-  if (Object.keys(formik.values).includes(name)) {
-    return {
-      error: formik.touched[name] ? formik.errors[name] : undefined,
-      value: formik.values[name]
-    };
-  }
+  var formikPath = getFormikArrayPath(name);
 
-  var formikArray = getFormikArrayPath(name);
+  if (formikPath.length === 0) {
+    return null;
+  }
 
-  if (formikArray) {
-    var _formik$touched, _formik$touched$array, _formik$touched$array2, _formik$errors, _formik$errors$arrayN, _formik$errors$arrayN2, _formik$values, _formik$values$arrayN, _formik$values$arrayN2;
+  var formikLatestLevel = formikPath.reduce(function (acc, path) {
+    var _acc$touched, _acc$error, _acc$value;
 
-    var arrayName = formikArray.arrayName,
-        itemIndex = formikArray.itemIndex,
-        fieldName = formikArray.fieldName;
     return {
-      error: (_formik$touched = formik.touched) !== null && _formik$touched !== void 0 && (_formik$touched$array = _formik$touched[arrayName]) !== null && _formik$touched$array !== void 0 && (_formik$touched$array2 = _formik$touched$array[itemIndex]) !== null && _formik$touched$array2 !== void 0 && _formik$touched$array2[fieldName] ? (_formik$errors = formik.errors) === null || _formik$errors === void 0 ? void 0 : (_formik$errors$arrayN = _formik$errors[arrayName]) === null || _formik$errors$arrayN === void 0 ? void 0 : (_formik$errors$arrayN2 = _formik$errors$arrayN[itemIndex]) === null || _formik$errors$arrayN2 === void 0 ? void 0 : _formik$errors$arrayN2[fieldName] : undefined,
-      value: (_formik$values = formik.values) === null || _formik$values === void 0 ? void 0 : (_formik$values$arrayN = _formik$values[arrayName]) === null || _formik$values$arrayN === void 0 ? void 0 : (_formik$values$arrayN2 = _formik$values$arrayN[itemIndex]) === null || _formik$values$arrayN2 === void 0 ? void 0 : _formik$values$arrayN2[fieldName]
+      touched: (_acc$touched = acc.touched) === null || _acc$touched === void 0 ? void 0 : _acc$touched[path],
+      error: (_acc$error = acc.error) === null || _acc$error === void 0 ? void 0 : _acc$error[path],
+      value: (_acc$value = acc.value) === null || _acc$value === void 0 ? void 0 : _acc$value[path]
     };
-  }
-
-  return null;
-};
-
-var getFormikArrayPath = function getFormikArrayPath(name) {
-  if (!name.includes('[')) {
-    return false;
-  }
-
-  var _name$split = name.split('['),
-      arrayName = _name$split[0],
-      missingSplit = _name$split[1];
-
-  var _missingSplit$split = missingSplit.split('].'),
-      itemIndex = _missingSplit$split[0],
-      fieldName = _missingSplit$split[1];
-
+  }, {
+    touched: formik.touched,
+    error: formik.errors,
+    value: formik.values
+  });
   return {
-    arrayName: arrayName,
-    itemIndex: itemIndex,
-    fieldName: fieldName
+    error: formikLatestLevel.touched ? formikLatestLevel.error : undefined,
+    value: formikLatestLevel.value
   };
 };
+var getFormikArrayPath = function getFormikArrayPath(name) {
+  return name.split(/[^a-zA-Z0-9]/).filter(Boolean);
+};
 
 var useFieldControllers = function useFieldControllers(_ref) {
   var name = _ref.name,
@@ -3695,9 +3725,9 @@ var DataTableEditableCell = function DataTableEditableCell(_ref) {
       columns = _useDataTableContext.columns,
       numberOfRows = _useDataTableContext.numberOfRows;
 
-  var column = (_columns$columnIndex = columns[columnIndex]) != null ? _columns$columnIndex : null;
+  var column = (_columns$columnIndex = columns === null || columns === void 0 ? void 0 : columns[columnIndex]) != null ? _columns$columnIndex : null;
   var isRightAligned = column ? column.isRightAligned : false;
-  var numberOfColumns = columns === null || columns === void 0 ? void 0 : columns.length;
+  var numberOfColumns = (columns === null || columns === void 0 ? void 0 : columns.length) || 0;
   var isTopLeftCell = columnIndex === 0 && rowIndex === 0;
   var isTopRightCell = columnIndex === numberOfColumns - 1 && rowIndex === 0;
   var isBottomLeftCell = columnIndex === 0 && rowIndex === numberOfRows - 1;
@@ -3739,6 +3769,187 @@ var DataTableEditableCell = function DataTableEditableCell(_ref) {
   }))));
 };
 
+var useSelectFieldControllers = function useSelectFieldControllers(_ref) {
+  var name = _ref.name,
+      inputId = _ref.id,
+      value = _ref.value,
+      _onChange = _ref.onChange,
+      _onBlur = _ref.onBlur,
+      error = _ref.error;
+
+  var _useFormContext = useFormContext(),
+      formik = _useFormContext.formik;
+
+  var id = useFieldId({
+    name: name,
+    id: inputId
+  });
+  var controllers = {
+    id: id,
+    error: error,
+    value: value,
+    onChange: function onChange(option) {
+      return _onChange && _onChange(option);
+    },
+    onBlur: function onBlur(option) {
+      return _onBlur && _onBlur(option);
+    }
+  };
+  var formikState = getFormikState(name, formik);
+
+  if (formik && formikState) {
+    controllers = _extends({}, controllers, {
+      error: error ? controllers.error : formikState.error,
+      value: value ? controllers.value : formikState.value,
+      onChange: function onChange(option) {
+        if (_onChange) {
+          _onChange(option);
+        }
+
+        formik.setFieldValue(name, option);
+      },
+      onBlur: function onBlur(option) {
+        if (_onBlur) {
+          _onBlur(option);
+        }
+
+        formik.setFieldTouched(name);
+      }
+    });
+  }
+
+  return controllers;
+};
+
+var getSelectStyles = function getSelectStyles(_ref) {
+  var _ref$wrapToNextLine = _ref.wrapToNextLine,
+      wrapToNextLine = _ref$wrapToNextLine === void 0 ? false : _ref$wrapToNextLine;
+  return {
+    valueContainer: function valueContainer(base) {
+      return Object.assign({}, base, {
+        flexWrap: wrapToNextLine ? 'wrap' : 'nowrap'
+      });
+    },
+    container: function container(base, state) {
+      return Object.assign({}, base, {
+        flex: '1',
+        fontFamily: FONT_FAMILY,
+        minWidth: '64px',
+        background: state.isDisabled ? GREY100 : WHITE,
+        ':hover': {
+          backgroundColor: GREY100
+        },
+        position: 'initial'
+      });
+    },
+    control: function control(base, state) {
+      return Object.assign({}, base, {
+        color: state.isDisabled ? GREY400 : GREY500,
+        boxShadow: 'none',
+        fontSize: '14px',
+        cursor: 'pointer',
+        background: 'none',
+        outline: '1px solid',
+        outlineColor: GREY300,
+        borderRadius: '4px',
+        border: 'none'
+      });
+    },
+    indicatorSeparator: function indicatorSeparator() {
+      return {
+        display: 'none'
+      };
+    },
+    placeholder: function placeholder(base, state) {
+      return _extends({}, base, {
+        color: state.isDisabled ? GREY300 : GREY400,
+        marginRight: 0,
+        position: 'static',
+        transform: 'initial',
+        overflow: 'hidden',
+        textOverflow: 'ellipsis',
+        whiteSpace: 'nowrap'
+      });
+    },
+    singleValue: function singleValue(base, state) {
+      return Object.assign({}, base, {
+        color: state.isDisabled ? GREY400 : null,
+        marginRight: 0,
+        position: 'static',
+        transform: 'initial',
+        overflow: 'hidden',
+        textOverflow: 'ellipsis',
+        whiteSpace: 'nowrap'
+      });
+    },
+    dropdownIndicator: function dropdownIndicator(base) {
+      return Object.assign({}, base, {
+        color: GREY400,
+        padding: '8px'
+      });
+    },
+    option: function option(base, state) {
+      return Object.assign({}, base, {
+        backgroundColor: state.isDisabled ? null : state.isSelected ? EGGPLANT200 : state.isFocused ? GREY100 : WHITE,
+        color: state.isDisabled ? GREY400 : GREY500,
+        cursor: state.isDisabled ? 'default' : 'pointer',
+        fontFamily: FONT_FAMILY,
+        fontSize: '14px'
+      });
+    },
+    group: function group(base) {
+      return Object.assign({}, base, {
+        fontFamily: FONT_FAMILY
+      });
+    },
+    menu: function menu(base) {
+      return _extends({}, base, {
+        zIndex: Z_INDEX_LAYERS.MENU,
+        minWidth: '164px'
+      });
+    },
+    menuPortal: function menuPortal(base) {
+      return _extends({}, base, {
+        zIndex: Z_INDEX_LAYERS.MENU
+      });
+    }
+  };
+};
+
+var ToolbarSelect = function ToolbarSelect(_ref) {
+  var name = _ref.name,
+      value = _ref.value,
+      options = _ref.options,
+      onChange = _ref.onChange,
+      onBlur = _ref.onBlur,
+      placeholder = _ref.placeholder,
+      disabled = _ref.disabled,
+      prefix = _ref.prefix;
+  var controllers = useSelectFieldControllers({
+    name: name,
+    value: value,
+    onChange: onChange,
+    onBlur: onBlur
+  });
+  return React__default.createElement(AffixContainer, {
+    prefix: prefix
+  }, React__default.createElement(Select__default, {
+    inputId: controllers.id,
+    options: options,
+    isDisabled: disabled,
+    value: controllers.value,
+    placeholder: placeholder,
+    styles: getSelectStyles({}),
+    menuPortalTarget: document.body,
+    onChange: controllers.onChange,
+    onBlur: controllers.onBlur,
+    components: {
+      Option: Select.components.Option,
+      Control: Select.components.Control
+    }
+  }));
+};
+
 var styles$h = {"form--standard-size":"_3CaV0"};
 
 var Form = function Form(_ref) {
@@ -4498,7 +4709,7 @@ var PasswordField = function PasswordField(_ref) {
   }))));
 };
 
-var getSelectStyles = function getSelectStyles(_ref) {
+var getSelectStyles$1 = function getSelectStyles(_ref) {
   var isInvalid = _ref.isInvalid,
       _ref$asToolbarFilter = _ref.asToolbarFilter,
       asToolbarFilter = _ref$asToolbarFilter === void 0 ? false : _ref$asToolbarFilter,
@@ -4672,7 +4883,7 @@ var MultiSelectField = function MultiSelectField(_ref) {
     value: controllers.value,
     placeholder: placeholder,
     noOptionsMessage: typeof noOptionsMessage === 'function' ? noOptionsMessage : defaultNoOptionsMessage,
-    styles: getSelectStyles({
+    styles: getSelectStyles$1({
       isInvalid: hasError,
       wrapToNextLine: true
     }),
@@ -4704,58 +4915,6 @@ var MultiSelectField = function MultiSelectField(_ref) {
   }));
 };
 
-var useSelectFieldControllers = function useSelectFieldControllers(_ref) {
-  var name = _ref.name,
-      inputId = _ref.id,
-      value = _ref.value,
-      _onChange = _ref.onChange,
-      _onBlur = _ref.onBlur,
-      error = _ref.error;
-
-  var _useFormContext = useFormContext(),
-      formik = _useFormContext.formik;
-
-  var id = useFieldId({
-    name: name,
-    id: inputId
-  });
-  var controllers = {
-    id: id,
-    error: error,
-    value: value,
-    onChange: function onChange(option) {
-      return _onChange && _onChange(option);
-    },
-    onBlur: function onBlur(option) {
-      return _onBlur && _onBlur(option);
-    }
-  };
-  var formikState = getFormikState(name, formik);
-
-  if (formik && formikState) {
-    controllers = _extends({}, controllers, {
-      error: error ? controllers.error : formikState.error,
-      value: value ? controllers.value : formikState.value,
-      onChange: function onChange(option) {
-        if (_onChange) {
-          _onChange(option);
-        }
-
-        formik.setFieldValue(name, option);
-      },
-      onBlur: function onBlur(option) {
-        if (_onBlur) {
-          _onBlur(option);
-        }
-
-        formik.setFieldTouched(name);
-      }
-    });
-  }
-
-  return controllers;
-};
-
 var styles$q = {"custom-control":"_1cDCR"};
 
 var _excluded$4 = ["children", "CustomPrefixComponent"];
@@ -4840,7 +4999,7 @@ var SelectField = function SelectField(_ref) {
     value: controllers.value,
     placeholder: placeholder,
     noOptionsMessage: typeof noOptionsMessage === 'function' ? noOptionsMessage : defaultNoOptionsMessage,
-    styles: getSelectStyles({
+    styles: getSelectStyles$1({
       isInvalid: hasError,
       asToolbarFilter: asToolbarFilter
     }),
@@ -5873,6 +6032,7 @@ exports.IconFlag = IconFlag;
 exports.IconFourDotsCircle = IconFourDotsCircle;
 exports.IconFourSquares = IconFourSquares;
 exports.IconGavel = IconGavel;
+exports.IconGif = IconGif;
 exports.IconGift = IconGift;
 exports.IconGrinBeam = IconGrinBeam;
 exports.IconGripVertical = IconGripVertical;
@@ -5911,6 +6071,7 @@ exports.IconSitemap = IconSitemap;
 exports.IconSlidersH = IconSlidersH;
 exports.IconSort = IconSort;
 exports.IconStar = IconStar;
+exports.IconStarSolid = IconStarSolid;
 exports.IconStickyNoteLines = IconStickyNoteLines;
 exports.IconStopwatch = IconStopwatch;
 exports.IconStrikethrough = IconStrikethrough;
@@ -5958,6 +6119,7 @@ exports.TextAreaField = TextAreaField;
 exports.TextField = TextField;
 exports.TimeField = TimeField;
 exports.Toggle = Toggle;
+exports.ToolbarSelect = ToolbarSelect;
 exports.Tooltip = Tooltip$1;
 exports.WeekField = WeekField;
 //# sourceMappingURL=index.js.map