@7shifts/sous-chef 2.12.0 → 2.13.0

package/dist/forms/AsyncSelectField/AsyncSelectField.d.ts

@@ -1,8 +1,10 @@
 import type { Props as SelectProps } from '../SelectField/SelectField';
 import { AsyncSelectOptions } from './types';
 declare type Props<T> = {
-    /** It is a function that takes the input search as parameter and returns a Promise with all the options and if there are more options to load. */
+    /** It is a function that takes the input search as parameter and returns a Promise with all the options and if there are more options to load. If it brings all the options on the first load, it won't call the `loadOptions` to perform the search. */
     loadOptions: (inputValue: string) => Promise<AsyncSelectOptions<T>>;
+    /** It fires `loadOptions` again if this key value changes. Used when it depends on other fields to load its options */
+    key?: string | number;
 } & Omit<SelectProps<T>, 'options'>;
 /**
  * Component to make possible choose from async options. It looks exactly as the [SelectField](./?path=/docs/forms-selectfield--default) but, this one handle asynchronous options.

package/dist/icons/components/IconReply.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+import { IconSize } from '../types';
+declare type Props = {
+    size?: IconSize;
+    color?: string;
+} & React.SVGProps<SVGSVGElement>;
+declare const IconReply: {
+    (props: Props): JSX.Element;
+    displayName: string;
+};
+export default IconReply;

package/dist/icons/components/index.d.ts

@@ -91,6 +91,7 @@ export { default as IconPlus } from './IconPlus';
 export { default as IconPrint } from './IconPrint';
 export { default as IconQuestionCircle } from './IconQuestionCircle';
 export { default as IconRepeat } from './IconRepeat';
+export { default as IconReply } from './IconReply';
 export { default as IconSearch } from './IconSearch';
 export { default as IconSignOut } from './IconSignOut';
 export { default as IconSitemap } from './IconSitemap';

package/dist/index.js

@@ -2509,6 +2509,21 @@ var IconRepeat = function IconRepeat(props) {
 
 IconRepeat.displayName = 'IconRepeat';
 
+var IconReply = function IconReply(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-reply",
+    style: getIconStyles(props)
+  }, props), React__default.createElement("path", {
+    d: "m.788 9.854 5.893 6.161c.828.866 2.307.288 2.307-.926v-2.94c5.17.06 7.335.56 6.067 5.058-.28.988.852 1.749 1.663 1.156 1.115-.815 2.985-2.665 2.985-5.845 0-5.729-5.175-6.731-10.715-6.798V2.77c0-1.215-1.48-1.79-2.307-.926L.788 8.003a1.34 1.34 0 0 0 0 1.851Zm.775-1.11 5.893-6.161a.268.268 0 0 1 .461.185v4.018c5.26 0 10.714.374 10.714 5.732 0 2.49-1.339 4.09-2.545 4.972 1.719-6.093-2.43-6.418-8.169-6.418v4.017a.268.268 0 0 1-.461.186L1.563 9.114a.267.267 0 0 1 0-.37Z",
+    fill: "currentColor"
+  }));
+};
+
+IconReply.displayName = 'IconReply';
+
 var IconSearch = function IconSearch(props) {
   return React__default.createElement("svg", Object.assign({
     viewBox: "0 0 20 20",
@@ -3219,7 +3234,7 @@ var getLocalTranslation = function getLocalTranslation(key) {
 
   if (translationParts.length > 1) {
     var literal = translationParts[1];
-    return literal.charAt(0).toUpperCase() + literal.slice(1).toLowerCase().replaceAll('_', ' ');
+    return literal.charAt(0).toUpperCase() + literal.slice(1).toLowerCase().replace(/_/g, ' ');
   }
 
   return key;
@@ -5293,14 +5308,55 @@ var AsyncSelectField = function AsyncSelectField(_ref) {
       hasMoreOptionsFirstLoad = _useState2[0],
       setHasMoreOptionsFirstLoad = _useState2[1];
 
+  var _useState3 = React.useState(false),
+      hasFirstLoadPerformed = _useState3[0],
+      setHasFirstLoadPerformed = _useState3[1];
+
+  var _useState4 = React.useState(null),
+      localOptions = _useState4[0],
+      setLocalOptions = _useState4[1];
+
+  var ref = React.useRef(null);
+
+  var handleInternalSearch = function handleInternalSearch(inputValue, callback) {
+    if (!localOptions) {
+      return;
+    }
+
+    var filteredOptions = localOptions.filter(function (option) {
+      return option.label.toLowerCase().includes(inputValue.toLocaleLowerCase());
+    });
+    callback(filteredOptions);
+  };
+
   var handleLoadOptions = function handleLoadOptions(inputValue, callback) {
     if (hasMoreOptions) {
       setHasMoreOptions(false);
     }
 
-    return loadOptions(inputValue).then(function (_ref2) {
+    if (localOptions) {
+      handleInternalSearch(inputValue, callback);
+      return;
+    }
+
+    loadOptions(inputValue).then(function (_ref2) {
+      var _ref$current;
+
       var hasMore = _ref2.hasMore,
           options = _ref2.options;
+
+      if (ref.current && inputValue !== (ref === null || ref === void 0 ? void 0 : (_ref$current = ref.current) === null || _ref$current === void 0 ? void 0 : _ref$current['state']['inputValue'])) {
+        return;
+      }
+
+      if (!hasFirstLoadPerformed) {
+        setHasFirstLoadPerformed(true);
+
+        if (!hasMore) {
+          setLocalOptions(options);
+        }
+      }
+
       setHasMoreOptions(hasMore);
 
       if (hasMoreOptionsFirstLoad === undefined) {
@@ -5308,7 +5364,6 @@ var AsyncSelectField = function AsyncSelectField(_ref) {
       }
 
       callback(options);
-      return options;
     });
   };
 
@@ -5332,9 +5387,9 @@ var AsyncSelectField = function AsyncSelectField(_ref) {
     cacheOptions: false,
     defaultOptions: true,
     loadOptions: lodashEs.debounce(handleLoadOptions, 500, {
-      leading: true,
-      trailing: false
-    })
+      leading: true
+    }),
+    ref: ref
   }))));
 };
 
@@ -6904,6 +6959,7 @@ exports.IconPlus = IconPlus;
 exports.IconPrint = IconPrint;
 exports.IconQuestionCircle = IconQuestionCircle;
 exports.IconRepeat = IconRepeat;
+exports.IconReply = IconReply;
 exports.IconSearch = IconSearch;
 exports.IconSignOut = IconSignOut;
 exports.IconSitemap = IconSitemap;