@flodesk/grain 5.11.1 → 5.11.2

package/es/components/autocomplete.js

@@ -34,7 +34,7 @@ import "core-js/modules/es.array.map.js";
 function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
 
 import PropTypes from 'prop-types';
-import React, { forwardRef, useState } from 'react';
+import React, { forwardRef, Fragment, useState } from 'react';
 import styled from '@emotion/styled';
 import { Icon, Box, Text } from '.';
 import { IconChevronDown } from '../icons';
@@ -69,6 +69,19 @@ var EmptyState = function EmptyState() {
   }, "No results"));
 };
 
+var ExpandIcon = function ExpandIcon() {
+  return /*#__PURE__*/React.createElement(Box, {
+    right: fieldXPadding,
+    position: "absolute",
+    top: "0px",
+    bottom: "0px",
+    margin: "auto",
+    height: "fit-content"
+  }, /*#__PURE__*/React.createElement(Icon, {
+    icon: /*#__PURE__*/React.createElement(IconChevronDown, null)
+  }));
+};
+
 export var Autocomplete = function Autocomplete(_ref3) {
   var options = _ref3.options,
       defaultOption = _ref3.defaultOption,
@@ -79,7 +92,7 @@ export var Autocomplete = function Autocomplete(_ref3) {
       menuWidth = _ref3$menuWidth === void 0 ? '100%' : _ref3$menuWidth,
       placeholder = _ref3.placeholder;
 
-  var _useState = useState(defaultOption ? defaultOption : ''),
+  var _useState = useState(defaultOption),
       _useState2 = _slicedToArray(_useState, 2),
       selectedOption = _useState2[0],
       setSelectedOption = _useState2[1];
@@ -96,8 +109,9 @@ export var Autocomplete = function Autocomplete(_ref3) {
   };
 
   var filteredOptions = query === '' ? options : options.filter(function (option) {
-    return option.toLowerCase().includes(query.toLowerCase());
+    return option.value.toLowerCase().includes(query.toLowerCase());
   });
+  var noResults = !Boolean(filteredOptions.length);
   return /*#__PURE__*/React.createElement(Combobox, {
     as: Root,
     value: selectedOption,
@@ -109,17 +123,11 @@ export var Autocomplete = function Autocomplete(_ref3) {
     onChange: function onChange(event) {
       return setQuery(event.target.value);
     },
-    placeholder: placeholder
-  }), /*#__PURE__*/React.createElement(Box, {
-    right: fieldXPadding,
-    position: "absolute",
-    top: "0px",
-    bottom: "0px",
-    margin: "auto",
-    height: "fit-content"
-  }, /*#__PURE__*/React.createElement(Icon, {
-    icon: /*#__PURE__*/React.createElement(IconChevronDown, null)
-  }))), /*#__PURE__*/React.createElement(Combobox.Options, {
+    placeholder: placeholder,
+    displayValue: function displayValue(option) {
+      return option && option.content;
+    }
+  }), /*#__PURE__*/React.createElement(ExpandIcon, null)), /*#__PURE__*/React.createElement(Combobox.Options, {
     menuAlign: menuAlign,
     menuWidth: menuWidth,
     as: MenuCard
@@ -127,20 +135,22 @@ export var Autocomplete = function Autocomplete(_ref3) {
     return /*#__PURE__*/React.createElement(Combobox.Option, {
       key: index,
       value: option,
-      as: React.Fragment
+      as: Fragment,
+      disabled: option.isDisabled
     }, function (_ref4) {
       var active = _ref4.active,
           selected = _ref4.selected;
       return /*#__PURE__*/React.createElement(MenuCardItem, {
         isSelected: selected,
-        isActive: active
-      }, option);
+        isActive: !option.isDisabled && active,
+        isDisabled: option.isDisabled
+      }, option.content);
     });
-  }), !Boolean(filteredOptions.length) && /*#__PURE__*/React.createElement(EmptyState, null)));
+  }), noResults && /*#__PURE__*/React.createElement(EmptyState, null)));
 };
 Autocomplete.propTypes = {
   options: PropTypes.array,
-  defaultOption: PropTypes.string,
+  defaultOption: PropTypes.object,
   onChange: PropTypes.func,
   menuAlign: PropTypes.oneOf(['left', 'right']),
   menuWidth: types.dimension

package/es/components/select.js

@@ -80,7 +80,7 @@ export var Select = function Select(_ref3) {
       menuWidth = _ref3$menuWidth === void 0 ? '100%' : _ref3$menuWidth,
       trigger = _ref3.trigger;
 
-  var _useState = useState(defaultOption || ''),
+  var _useState = useState(defaultOption || {}),
       _useState2 = _slicedToArray(_useState, 2),
       selectedOption = _useState2[0],
       setSelectedOption = _useState2[1];

package/es/foundational/index.js

@@ -43,21 +43,24 @@ export var MenuCard = styled.ul(_templateObject5 || (_templateObject5 = _taggedT
   var menuAlign = _ref3.menuAlign;
   return "".concat(menuAlign, ": 0;");
 });
-var MenuItemWrapper = styled.li(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  display: grid;\n  grid-auto-flow: column;\n  grid-template-columns: ", ";\n  ", ";\n  ", ";\n  align-items: center;\n  justify-content: start;\n  list-style: none;\n  padding: 0 12px;\n  min-height: ", ";\n  cursor: pointer;\n  border-radius: ", ";\n  appearance: none;\n"])), function (p) {
+var MenuItemWrapper = styled.li(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  display: grid;\n  grid-auto-flow: column;\n  grid-template-columns: ", ";\n  ", ";\n  ", ";\n  ", ";\n  align-items: center;\n  justify-content: start;\n  list-style: none;\n  padding: 0 12px;\n  min-height: ", ";\n  border-radius: ", ";\n  appearance: none;\n"])), function (p) {
   return p.hasIcon ? 'auto 1fr' : '1fr auto';
 }, function (p) {
   return (p.hasIcon || p.isSelected) && 'gap: 8px';
 }, function (_ref4) {
   var isDisabled = _ref4.isDisabled;
   return isDisabled && "color: ".concat(getColor('contentDisabled'));
+}, function (_ref5) {
+  var isDisabled = _ref5.isDisabled;
+  return !isDisabled && "cursor: pointer;";
 }, textBoxHeight, getRadius('s'));
-export var MenuCardItem = /*#__PURE__*/forwardRef(function (_ref5, ref) {
-  var children = _ref5.children,
-      isSelected = _ref5.isSelected,
-      isActive = _ref5.isActive,
-      isDisabled = _ref5.isDisabled,
-      icon = _ref5.icon,
-      props = _objectWithoutProperties(_ref5, _excluded);
+export var MenuCardItem = /*#__PURE__*/forwardRef(function (_ref6, ref) {
+  var children = _ref6.children,
+      isSelected = _ref6.isSelected,
+      isActive = _ref6.isActive,
+      isDisabled = _ref6.isDisabled,
+      icon = _ref6.icon,
+      props = _objectWithoutProperties(_ref6, _excluded);
 
   return /*#__PURE__*/React.createElement(MenuItemWrapper, Object.assign({
     ref: ref,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@flodesk/grain",
-  "version": "5.11.1",
+  "version": "5.11.2",
   "description": "Flodesk design system",
   "module": "es/index.js",
   "author": "Flodesk",