@flodesk/grain 11.22.5 → 11.23.0

package/es/components/arrange/index.js

@@ -1,22 +1,10 @@
-import "core-js/modules/es.object.keys.js";
-import "core-js/modules/es.array.index-of.js";
-import "core-js/modules/es.symbol.js";
-import "core-js/modules/es.object.define-property.js";
-import "core-js/modules/es.array.filter.js";
-import "core-js/modules/es.object.to-string.js";
-import "core-js/modules/es.object.get-own-property-descriptor.js";
-import "core-js/modules/web.dom-collections.for-each.js";
-import "core-js/modules/es.object.get-own-property-descriptors.js";
-import "core-js/modules/es.object.define-properties.js";
-import "core-js/modules/es.object.assign.js";
-var _excluded = ["children", "gap", "columnGap", "rowGap", "alignItems", "justifyItems", "justifyContent", "alignContent", "columns", "rows", "autoFlow", "className", "style"];
+const _excluded = ["children", "gap", "columnGap", "rowGap", "alignItems", "justifyItems", "justifyContent", "alignContent", "columns", "rows", "autoFlow", "className", "style"];
 
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
 import "core-js/modules/es.regexp.exec.js";
 import "core-js/modules/es.string.replace.js";
 import "core-js/modules/es.string.trim.js";
-import "core-js/modules/es.array.concat.js";
 
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
@@ -35,50 +23,49 @@ import { Box } from '../box';
 import styles from './styles.module.css';
 import { BreakpointsContext } from '../breakpoints-provider';
 import { jsx as ___EmotionJSX } from "@emotion/react";
-export var Arrange = /*#__PURE__*/forwardRef(function (_ref, ref) {
-  var children = _ref.children,
-      gap = _ref.gap,
-      columnGap = _ref.columnGap,
-      rowGap = _ref.rowGap,
-      _ref$alignItems = _ref.alignItems,
-      alignItems = _ref$alignItems === void 0 ? 'center' : _ref$alignItems,
-      justifyItems = _ref.justifyItems,
-      _ref$justifyContent = _ref.justifyContent,
-      justifyContent = _ref$justifyContent === void 0 ? 'start' : _ref$justifyContent,
-      alignContent = _ref.alignContent,
-      columns = _ref.columns,
-      rows = _ref.rows,
-      _ref$autoFlow = _ref.autoFlow,
-      autoFlow = _ref$autoFlow === void 0 ? 'column' : _ref$autoFlow,
-      className = _ref.className,
-      style = _ref.style,
+export const Arrange = /*#__PURE__*/forwardRef((_ref, ref) => {
+  let {
+    children,
+    gap,
+    columnGap,
+    rowGap,
+    alignItems = 'center',
+    justifyItems,
+    justifyContent = 'start',
+    alignContent,
+    columns,
+    rows,
+    autoFlow = 'column',
+    className,
+    style
+  } = _ref,
       props = _objectWithoutProperties(_ref, _excluded);
 
-  var propClassName = className ? className : '';
-  var propStyle = style ? style : {};
-  var breakpoints = useContext(BreakpointsContext);
-  var sharedProps = {
-    gap: gap,
-    columnGap: columnGap,
-    rowGap: rowGap,
-    alignItems: alignItems,
-    justifyItems: justifyItems,
-    justifyContent: justifyContent,
-    alignContent: alignContent,
+  const propClassName = className ? className : '';
+  const propStyle = style ? style : {};
+  const breakpoints = useContext(BreakpointsContext);
+  const sharedProps = {
+    gap,
+    columnGap,
+    rowGap,
+    alignItems,
+    justifyItems,
+    justifyContent,
+    alignContent,
     autoFlow: !columns ? autoFlow : undefined
   };
-  var attributes = generateAttributes({
+  const attributes = generateAttributes({
     styleProps: _objectSpread({
-      columns: columns,
-      rows: rows
+      columns,
+      rows
     }, sharedProps),
     classNameProps: _objectSpread({}, sharedProps),
-    breakpoints: breakpoints
+    breakpoints
   });
 
-  var styleAttributes = _objectSpread(_objectSpread({}, attributes.styles), propStyle);
+  const styleAttributes = _objectSpread(_objectSpread({}, attributes.styles), propStyle);
 
-  var classAttributes = "".concat(attributes.classNames, " ").concat(propClassName, " ").concat(styles.arrange).trim().replace(/\s+/g, ' ');
+  const classAttributes = "".concat(attributes.classNames, " ").concat(propClassName, " ").concat(styles.arrange).trim().replace(/\s+/g, ' ');
   return ___EmotionJSX(Box, _extends({
     ref: ref,
     className: classAttributes,

package/es/components/autocomplete.js

@@ -1,27 +1,5 @@
-import "core-js/modules/es.object.keys.js";
-import "core-js/modules/es.array.index-of.js";
-import "core-js/modules/es.symbol.js";
-import "core-js/modules/es.symbol.description.js";
-import "core-js/modules/es.symbol.iterator.js";
-import "core-js/modules/es.array.iterator.js";
-import "core-js/modules/es.string.iterator.js";
+const _excluded = ["options", "value", "onChange", "isCreatable", "onCreate", "menuPlacement", "menuWidth", "menuMaxHeight", "menuZIndex", "placeholder", "label", "hint", "menuItemsHaveEllipsis", "hasPortal", "hasError", "errorMessage", "searchField"];
 import "core-js/modules/web.dom-collections.iterator.js";
-import "core-js/modules/es.array.slice.js";
-import "core-js/modules/es.array.from.js";
-import "core-js/modules/es.regexp.exec.js";
-var _excluded = ["options", "value", "onChange", "isCreatable", "onCreate", "menuPlacement", "menuWidth", "menuMaxHeight", "menuZIndex", "placeholder", "label", "hint", "menuItemsHaveEllipsis", "hasPortal", "hasError", "errorMessage", "searchField"];
-
-function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
-
-function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
-
-function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
-
-function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
-
-function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
-
-function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 
 function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
 
@@ -29,13 +7,6 @@ function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) r
 
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
-import "core-js/modules/es.object.assign.js";
-import "core-js/modules/es.array.filter.js";
-import "core-js/modules/es.object.to-string.js";
-import "core-js/modules/es.array.includes.js";
-import "core-js/modules/es.string.includes.js";
-import "core-js/modules/es.array.find.js";
-import "core-js/modules/es.array.map.js";
 import PropTypes from 'prop-types';
 import React, { forwardRef, Fragment, useMemo, useRef, useState } from 'react';
 import { Icon, Box, Text } from '.';
@@ -48,8 +19,8 @@ import { FloatingPortal } from '@floating-ui/react-dom-interactions';
 import { Global } from '@emotion/react';
 import { getColor, getRadius } from '../utilities';
 import { jsx as ___EmotionJSX } from "@emotion/react";
-var Trigger = /*#__PURE__*/forwardRef(function (_ref, ref) {
-  var props = Object.assign({}, _ref);
+const Trigger = /*#__PURE__*/forwardRef((_ref, ref) => {
+  let props = Object.assign({}, _ref);
   return ___EmotionJSX(Box, _extends({
     ref: ref
   }, props, {
@@ -57,77 +28,63 @@ var Trigger = /*#__PURE__*/forwardRef(function (_ref, ref) {
   }));
 });
 
-var EmptyState = function EmptyState() {
-  return ___EmotionJSX(Box, {
-    paddingY: "s",
-    paddingX: "12px"
-  }, ___EmotionJSX(Text, {
-    color: "content2"
-  }, "No results"));
-};
+const EmptyState = () => ___EmotionJSX(Box, {
+  paddingY: "s",
+  paddingX: "12px"
+}, ___EmotionJSX(Text, {
+  color: "content2"
+}, "No results"));
 
-var ExpandIcon = function ExpandIcon() {
-  return ___EmotionJSX(Box, {
-    right: "fieldPaddingX",
-    position: "absolute",
-    top: "0px",
-    bottom: "0px",
-    margin: "auto",
-    height: "fit-content"
-  }, ___EmotionJSX(Icon, {
-    icon: ___EmotionJSX(IconChevronDown, null)
-  }));
-};
+const ExpandIcon = () => ___EmotionJSX(Box, {
+  right: "fieldPaddingX",
+  position: "absolute",
+  top: "0px",
+  bottom: "0px",
+  margin: "auto",
+  height: "fit-content"
+}, ___EmotionJSX(Icon, {
+  icon: ___EmotionJSX(IconChevronDown, null)
+}));
 
-var getFilteredOptions = function getFilteredOptions(query, options, searchField) {
+const getFilteredOptions = (query, options, searchField) => {
   if (query === '') return options;
-  return options.filter(function (option) {
-    return option[searchField].toLowerCase().includes(query.toLowerCase());
-  });
+  return options.filter(option => option[searchField].toLowerCase().includes(query.toLowerCase()));
 };
 
-var getShowGroupTitle = function getShowGroupTitle(index, option, filteredOptions) {
-  var firstOptionHasTitle = index === 0 && option.groupTitle;
-  var titleChanged = index > 0 && option.groupTitle !== filteredOptions[index - 1].groupTitle;
+const getShowGroupTitle = (index, option, filteredOptions) => {
+  const firstOptionHasTitle = index === 0 && option.groupTitle;
+  const titleChanged = index > 0 && option.groupTitle !== filteredOptions[index - 1].groupTitle;
   return firstOptionHasTitle || titleChanged;
 };
 
-var menuItemStyles = "\n  .autocompleteMenuItem {\n    display: flex;\n    gap: 8px;\n    align-items: center;\n    list-style: none;\n    padding: 4px 12px;\n    min-height: var(--grn-textBoxHeight);\n    border-radius: ".concat(getRadius('s'), ";\n    appearance: none;\n\n    &.hasPreContent {\n      padding-left: 0;\n    }\n  }\n\n  .autocompleteMenuItemText {\n    flex-grow: 1;\n\n    &.hasEllipsis {\n      white-space: nowrap;\n      overflow: hidden;\n      text-overflow: ellipsis;\n    }\n  }\n");
-export var Autocomplete = function Autocomplete(_ref2) {
-  var options = _ref2.options,
-      value = _ref2.value,
-      onChange = _ref2.onChange,
-      isCreatable = _ref2.isCreatable,
-      onCreate = _ref2.onCreate,
-      _ref2$menuPlacement = _ref2.menuPlacement,
-      menuPlacement = _ref2$menuPlacement === void 0 ? defaultProps.menuPlacement : _ref2$menuPlacement,
-      menuWidth = _ref2.menuWidth,
-      _ref2$menuMaxHeight = _ref2.menuMaxHeight,
-      menuMaxHeight = _ref2$menuMaxHeight === void 0 ? defaultProps.menuMaxHeight : _ref2$menuMaxHeight,
-      menuZIndex = _ref2.menuZIndex,
-      placeholder = _ref2.placeholder,
-      label = _ref2.label,
-      hint = _ref2.hint,
-      _ref2$menuItemsHaveEl = _ref2.menuItemsHaveEllipsis,
-      menuItemsHaveEllipsis = _ref2$menuItemsHaveEl === void 0 ? true : _ref2$menuItemsHaveEl,
-      _ref2$hasPortal = _ref2.hasPortal,
-      hasPortal = _ref2$hasPortal === void 0 ? true : _ref2$hasPortal,
-      hasError = _ref2.hasError,
-      errorMessage = _ref2.errorMessage,
-      _ref2$searchField = _ref2.searchField,
-      searchField = _ref2$searchField === void 0 ? 'content' : _ref2$searchField,
+const menuItemStyles = "\n  .autocompleteMenuItem {\n    display: flex;\n    gap: 8px;\n    align-items: center;\n    list-style: none;\n    padding: 4px 12px;\n    min-height: var(--grn-textBoxHeight);\n    border-radius: ".concat(getRadius('s'), ";\n    appearance: none;\n\n    &.hasPreContent {\n      padding-left: 0;\n    }\n  }\n\n  .autocompleteMenuItemText {\n    flex-grow: 1;\n\n    &.hasEllipsis {\n      white-space: nowrap;\n      overflow: hidden;\n      text-overflow: ellipsis;\n    }\n  }\n");
+export const Autocomplete = _ref2 => {
+  let {
+    options,
+    value,
+    onChange,
+    isCreatable,
+    onCreate,
+    menuPlacement = defaultProps.menuPlacement,
+    menuWidth,
+    menuMaxHeight = defaultProps.menuMaxHeight,
+    menuZIndex,
+    placeholder,
+    label,
+    hint,
+    menuItemsHaveEllipsis = true,
+    hasPortal = true,
+    hasError,
+    errorMessage,
+    searchField = 'content'
+  } = _ref2,
       props = _objectWithoutProperties(_ref2, _excluded);
 
-  var _useState = useState(''),
-      _useState2 = _slicedToArray(_useState, 2),
-      query = _useState2[0],
-      setQuery = _useState2[1];
+  const [query, setQuery] = useState('');
 
-  var handleCreatableChange = function handleCreatableChange(option) {
+  const handleCreatableChange = option => {
     if (onCreate) {
-      var isCreatableOption = !options.find(function (item) {
-        return item.value === option.value;
-      });
+      const isCreatableOption = !options.find(item => item.value === option.value);
 
       if (isCreatableOption) {
         onCreate(option);
@@ -138,7 +95,7 @@ export var Autocomplete = function Autocomplete(_ref2) {
     onChange(option);
   };
 
-  var handleChange = function handleChange(option) {
+  const handleChange = option => {
     if (isCreatable) {
       handleCreatableChange(option);
     } else {
@@ -146,39 +103,27 @@ export var Autocomplete = function Autocomplete(_ref2) {
     }
   };
 
-  var filteredOptions = getFilteredOptions(query, options, searchField);
-  var isShowCreateOption = isCreatable && query.length > 0;
-  var noResults = !Boolean(filteredOptions.length) && !isShowCreateOption;
-  var fieldMarginTop = label || hint ? 'betweenFormControlAndLabel' : undefined;
-  var selectedOption = useMemo(function () {
-    return options.find(function (option) {
-      return option.value === value;
-    });
-  }, [options, value]);
-  var newOption = useMemo(function () {
-    return {
-      value: query,
-      content: query
-    };
-  }, [query]);
-
-  var _useMenuPosition = useMenuPosition({
-    menuWidth: menuWidth,
-    menuPlacement: menuPlacement
-  }),
-      reference = _useMenuPosition.reference,
-      floating = _useMenuPosition.floating,
-      floatingStyles = _useMenuPosition.floatingStyles;
-
-  var OptionsRoot = hasPortal ? FloatingPortal : Fragment;
-  var preContentRef = useRef(null);
-
-  var _useState3 = useState(0),
-      _useState4 = _slicedToArray(_useState3, 2),
-      preContentWidth = _useState4[0],
-      setPreContentWidth = _useState4[1];
-
-  React.useEffect(function () {
+  const filteredOptions = getFilteredOptions(query, options, searchField);
+  const isShowCreateOption = isCreatable && query.length > 0;
+  const noResults = !Boolean(filteredOptions.length) && !isShowCreateOption;
+  const fieldMarginTop = label || hint ? 'betweenFormControlAndLabel' : undefined;
+  const selectedOption = useMemo(() => options.find(option => option.value === value), [options, value]);
+  const newOption = useMemo(() => ({
+    value: query,
+    content: query
+  }), [query]);
+  const {
+    reference,
+    floating,
+    floatingStyles
+  } = useMenuPosition({
+    menuWidth,
+    menuPlacement
+  });
+  const OptionsRoot = hasPortal ? FloatingPortal : Fragment;
+  const preContentRef = useRef(null);
+  const [preContentWidth, setPreContentWidth] = useState(0);
+  React.useEffect(() => {
     if (preContentRef.current) {
       setPreContentWidth(preContentRef.current.offsetWidth);
     }
@@ -189,9 +134,11 @@ export var Autocomplete = function Autocomplete(_ref2) {
     as: "div",
     value: selectedOption || '',
     onChange: handleChange
-  }, props), function (_ref3) {
-    var open = _ref3.open;
-    var hasPreContent = selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.preContent;
+  }, props), _ref3 => {
+    let {
+      open
+    } = _ref3;
+    const hasPreContent = selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.preContent;
     return ___EmotionJSX(React.Fragment, null, label && ___EmotionJSX(Combobox.Label, {
       as: FieldLabel
     }, label), hint && ___EmotionJSX(FieldHint, null, hint), ___EmotionJSX(Box, {
@@ -212,20 +159,14 @@ export var Autocomplete = function Autocomplete(_ref2) {
     }, selectedOption.preContent), ___EmotionJSX(Combobox.Input, {
       as: InputField,
       autoComplete: "off",
-      onChange: function onChange(event) {
-        return setQuery(event.target.value);
-      },
+      onChange: event => setQuery(event.target.value),
       placeholder: placeholder,
-      displayValue: function displayValue(option) {
-        return option && option.content;
-      },
+      displayValue: option => option && option.content,
       paddingRight: "32px",
       paddingLeft: !open && hasPreContent ? "".concat(preContentWidth + 8, "px") : undefined,
       hasError: hasError
     }), ___EmotionJSX(ExpandIcon, null)), ___EmotionJSX(OptionsRoot, null, ___EmotionJSX(MenuCardTransition, {
-      afterLeave: function afterLeave() {
-        return setQuery('');
-      }
+      afterLeave: () => setQuery('')
     }, ___EmotionJSX(Combobox.Options, {
       static: true,
       className: "grn-context",
@@ -236,8 +177,8 @@ export var Autocomplete = function Autocomplete(_ref2) {
       zIndex: menuZIndex,
       style: floatingStyles,
       isDisabled: !open
-    }, filteredOptions.map(function (option, index) {
-      var showGroupTitle = getShowGroupTitle(index, option, filteredOptions);
+    }, filteredOptions.map((option, index) => {
+      const showGroupTitle = getShowGroupTitle(index, option, filteredOptions);
       return ___EmotionJSX(Fragment, {
         key: index
       }, showGroupTitle && ___EmotionJSX(MenuGroupTitle, {
@@ -246,13 +187,15 @@ export var Autocomplete = function Autocomplete(_ref2) {
         value: option,
         as: Fragment,
         disabled: option.isDisabled
-      }, function (_ref4) {
-        var active = _ref4.active;
-        var isDisabled = option.isDisabled;
-        var isSelected = option.value === value;
-        var isActive = !option.isDisabled && active;
-        var hasEllipsis = menuItemsHaveEllipsis;
-        var hasPreContent = option.preContent;
+      }, _ref4 => {
+        let {
+          active
+        } = _ref4;
+        const isDisabled = option.isDisabled;
+        const isSelected = option.value === value;
+        const isActive = !option.isDisabled && active;
+        const hasEllipsis = menuItemsHaveEllipsis;
+        const hasPreContent = option.preContent;
         return ___EmotionJSX("li", {
           className: hasPreContent ? 'autocompleteMenuItem hasPreContent' : 'autocompleteMenuItem',
           style: {
@@ -272,9 +215,11 @@ export var Autocomplete = function Autocomplete(_ref2) {
       }));
     }), isShowCreateOption && ___EmotionJSX(React.Fragment, null, filteredOptions.length > 0 && ___EmotionJSX(MenuItemDivider, null), ___EmotionJSX(Combobox.Option, {
       value: newOption
-    }, function (_ref5) {
-      var active = _ref5.active;
-      var isActive = active;
+    }, _ref5 => {
+      let {
+        active
+      } = _ref5;
+      const isActive = active;
       return ___EmotionJSX("li", {
         className: "autocompleteMenuItem",
         style: {