@7shifts/sous-chef 2.1.1 → 2.1.2

package/dist/forms/MultiSelectField/MultiSelectField.d.ts

@@ -15,7 +15,9 @@ declare type Props<T> = {
     placeholder?: string;
     disabled?: boolean;
     closeOnSelect?: boolean;
+    /** When the user opens the menu, if this prop is `true`, it will scroll the page into to the menu view (if its content falls under a scroll). It is recomended to disable this behaviour when using the `MultiSelectField` inside a modal. */
+    menuShouldScrollIntoView?: boolean;
 };
 /** Component to make possible choose from a predefined options. */
-declare const MultiSelectField: <T extends unknown>({ name, id: inputId, value, options, onChange, onBlur, CustomOption: UserCustomOption, label, caption, error, placeholder, disabled, closeOnSelect }: Props<T>) => JSX.Element;
+declare const MultiSelectField: <T extends unknown>({ name, id: inputId, value, options, onChange, onBlur, CustomOption: UserCustomOption, label, caption, error, placeholder, disabled, closeOnSelect, menuShouldScrollIntoView }: Props<T>) => JSX.Element;
 export default MultiSelectField;

package/dist/forms/SelectField/SelectField.d.ts

@@ -18,7 +18,9 @@ declare type Props<T> = {
     /** Use a prefix for things like currency symbols (“$”, “¥”, “£”) or icons. */
     prefix?: React.ReactNode;
     asToolbarFilter?: boolean;
+    /** When the user opens the menu, if this prop is `true`, it will scroll the page into to the menu view (if its content falls under a scroll). It is recomended to disable this behaviour when using the `SelectField` inside a modal. */
+    menuShouldScrollIntoView?: boolean;
 };
 /** Component to make possible choose from a predefined options. */
-declare const SelectField: <T extends unknown>({ name, id: inputId, value, options, onChange, onBlur, CustomOption: UserCustomOption, SelectedOptionPrefix, label, caption, error, placeholder, disabled, prefix, asToolbarFilter }: Props<T>) => JSX.Element;
+declare const SelectField: <T extends unknown>({ name, id: inputId, value, options, onChange, onBlur, CustomOption: UserCustomOption, SelectedOptionPrefix, label, caption, error, placeholder, disabled, prefix, asToolbarFilter, menuShouldScrollIntoView }: Props<T>) => JSX.Element;
 export default SelectField;

package/dist/index.js

@@ -239,8 +239,8 @@ var updateMisalignedOverlay = function updateMisalignedOverlay(overlayPosition,
   if (overlayPosition.left > arrowPosition.left) {
     left = arrowPosition.left - ARROW_MARGIN;
   } else if (overlayPosition.left + tooltipRectPosition.width < arrowPosition.left + ARROW_WIDTH) {
-    left = arrowPosition.left - tooltipRectPosition.width + ARROW_WIDTH + ARROW_MARGIN;
-  }
+      left = arrowPosition.left - tooltipRectPosition.width + ARROW_WIDTH + ARROW_MARGIN;
+    }
 
   return _extends({}, overlayPosition, {
     left: left
@@ -1807,9 +1807,6 @@ var IconGrinBeam = function IconGrinBeam(props) {
     "data-testid": "icon-grin-beam",
     style: getIconStyles(props)
   }, props), React__default.createElement("path", {
-    fill: "#fff",
-    d: "M0 0h20v20H0z"
-  }), React__default.createElement("path", {
     d: "M4.746 9.676a.335.335 0 0 0 .375-.145l.383-.664c.31-.535.774-.844 1.27-.844s.96.309 1.27.844l.383.664c.085.145.25.184.375.145a.314.314 0 0 0 .23-.324c-.133-1.645-1.298-2.79-2.258-2.79S4.65 7.707 4.516 9.352a.317.317 0 0 0 .23.324Zm6.452 0a.335.335 0 0 0 .375-.145l.383-.664c.31-.535.774-.844 1.27-.844s.96.309 1.27.844l.383.664c.085.145.25.184.375.145a.314.314 0 0 0 .23-.324c-.133-1.645-1.299-2.79-2.258-2.79-.96 0-2.125 1.145-2.258 2.79a.317.317 0 0 0 .23.324Zm3.766 2.855c-1.218.38-3.029.594-4.964.594-1.935 0-3.746-.215-4.964-.594a.662.662 0 0 0-.617.121.62.62 0 0 0-.213.579c.37 2.148 3.354 3.644 5.798 3.644s5.423-1.496 5.798-3.645a.624.624 0 0 0-.213-.578.66.66 0 0 0-.625-.12ZM10 15.625c-1.411 0-3.105-.637-3.972-1.574 2.319.422 5.63.422 7.948 0-.871.937-2.565 1.574-3.976 1.574ZM10 .312C4.476.313 0 4.649 0 10s4.476 9.688 10 9.688S20 15.351 20 10 15.524.312 10 .312Zm0 18.125c-4.802 0-8.71-3.785-8.71-8.437 0-4.652 3.908-8.438 8.71-8.438 4.802 0 8.71 3.786 8.71 8.438 0 4.652-3.908 8.438-8.71 8.438Z",
     fill: "currentColor"
   }));
@@ -4607,7 +4604,9 @@ var MultiSelectField = function MultiSelectField(_ref) {
       placeholder = _ref.placeholder,
       disabled = _ref.disabled,
       _ref$closeOnSelect = _ref.closeOnSelect,
-      closeOnSelect = _ref$closeOnSelect === void 0 ? false : _ref$closeOnSelect;
+      closeOnSelect = _ref$closeOnSelect === void 0 ? false : _ref$closeOnSelect,
+      _ref$menuShouldScroll = _ref.menuShouldScrollIntoView,
+      menuShouldScrollIntoView = _ref$menuShouldScroll === void 0 ? true : _ref$menuShouldScroll;
   var controllers = useMultiSelectFieldControllers({
     name: name,
     id: inputId,
@@ -4645,6 +4644,18 @@ var MultiSelectField = function MultiSelectField(_ref) {
           CustomComponent: UserCustomOption
         }, props));
       } : Select.components.Option
+    },
+    menuShouldScrollIntoView: menuShouldScrollIntoView,
+    menuPlacement: menuShouldScrollIntoView ? 'bottom' : 'auto',
+    menuPosition: menuShouldScrollIntoView ? 'absolute' : 'fixed',
+    closeMenuOnScroll: function closeMenuOnScroll(e) {
+      if (menuShouldScrollIntoView || !e.target) {
+        return false;
+      }
+
+      var target = e.target;
+      var isScrollingTheMenu = typeof target.className === 'string' && target.className.includes('MenuList');
+      return !isScrollingTheMenu;
     }
   }));
 };
@@ -4753,7 +4764,9 @@ var SelectField = function SelectField(_ref) {
       disabled = _ref.disabled,
       prefix = _ref.prefix,
       _ref$asToolbarFilter = _ref.asToolbarFilter,
-      asToolbarFilter = _ref$asToolbarFilter === void 0 ? false : _ref$asToolbarFilter;
+      asToolbarFilter = _ref$asToolbarFilter === void 0 ? false : _ref$asToolbarFilter,
+      _ref$menuShouldScroll = _ref.menuShouldScrollIntoView,
+      menuShouldScrollIntoView = _ref$menuShouldScroll === void 0 ? true : _ref$menuShouldScroll;
   var controllers = useSelectFieldControllers({
     name: name,
     id: inputId,
@@ -4796,6 +4809,18 @@ var SelectField = function SelectField(_ref) {
           CustomPrefixComponent: SelectedOptionPrefix
         }, props));
       } : Select.components.Control
+    },
+    menuShouldScrollIntoView: menuShouldScrollIntoView,
+    menuPlacement: menuShouldScrollIntoView ? 'bottom' : 'auto',
+    menuPosition: menuShouldScrollIntoView ? 'absolute' : 'fixed',
+    closeMenuOnScroll: function closeMenuOnScroll(e) {
+      if (menuShouldScrollIntoView || !e.target) {
+        return false;
+      }
+
+      var target = e.target;
+      var isScrollingTheMenu = typeof target.className === 'string' && target.className.includes('MenuList');
+      return !isScrollingTheMenu;
     }
   })));
 };