@flodesk/grain 5.10.0 → 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/icon.js

@@ -21,9 +21,7 @@ import PropTypes from 'prop-types';
 import React, { forwardRef } from 'react';
 import styled from '@emotion/styled';
 import { types } from '../types';
-var Wrapper = styled.span(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: block;\n  width: ", ";\n  color: ", ";\n\n  svg {\n    display: block;\n    height: ", ";\n    ", "\n"])), function (p) {
-  return getColor(p.color);
-}, function (p) {
+var Wrapper = styled.span(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: block;\n  color: ", ";\n\n  svg {\n    display: block;\n    height: ", ";\n    ", "\n"])), function (p) {
   return getColor(p.color);
 }, function (p) {
   return getIconSize(p.size);

package/es/components/select.js

@@ -38,7 +38,7 @@ function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) r
 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, { useState } from 'react';
+import React, { useState, forwardRef, Fragment } from 'react';
 import styled from '@emotion/styled';
 import { Icon, Box, Text } from '.';
 import { IconChevronDown } from '../icons';
@@ -46,13 +46,14 @@ import { Listbox } from '@headlessui/react';
 import { getColor, getRadius } from '../utilities';
 import { types } from '../types';
 import { fieldXPadding, MenuCard, MenuCardItem, textBoxHeight, transitions } from '../foundational';
-var SelectButtonWrapper = styled(Listbox.Button)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  ", ";\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  appearance: none;\n  border: none;\n  background: ", ";\n  padding: 0 ", ";\n  min-height: ", ";\n  border-radius: ", ";\n  font: inherit;\n  color: inherit;\n  cursor: pointer;\n  width: 100%;\n  text-align: left;\n\n  &:hover {\n    background: ", ";\n  }\n"])), transitions, getColor('fade1'), fieldXPadding, textBoxHeight, getRadius('s'), getColor('fade2'));
-
-var SelectButton = function SelectButton(_ref) {
+var DefaultTriggerButton = styled.button(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  ", ";\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  appearance: none;\n  border: none;\n  background: ", ";\n  padding: 0 ", ";\n  min-height: ", ";\n  border-radius: ", ";\n  font: inherit;\n  color: inherit;\n  cursor: pointer;\n  width: 100%;\n  text-align: left;\n\n  &:hover {\n    background: ", ";\n  }\n"])), transitions, getColor('fade1'), fieldXPadding, textBoxHeight, getRadius('s'), getColor('fade2'));
+var DefaultTrigger = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var children = _ref.children,
       props = _objectWithoutProperties(_ref, _excluded);
 
-  return /*#__PURE__*/React.createElement(SelectButtonWrapper, props, /*#__PURE__*/React.createElement(Text, {
+  return /*#__PURE__*/React.createElement(DefaultTriggerButton, Object.assign({
+    ref: ref
+  }, props), /*#__PURE__*/React.createElement(Text, {
     hasEllipsis: true,
     weight: "medium"
   }, children), /*#__PURE__*/React.createElement(Box, {
@@ -60,7 +61,7 @@ var SelectButton = function SelectButton(_ref) {
   }, /*#__PURE__*/React.createElement(Icon, {
     icon: /*#__PURE__*/React.createElement(IconChevronDown, null)
   })));
-};
+});
 
 var SelectRoot = function SelectRoot(_ref2) {
   var props = Object.assign({}, _ref2);
@@ -76,9 +77,10 @@ export var Select = function Select(_ref3) {
       _ref3$menuAlign = _ref3.menuAlign,
       menuAlign = _ref3$menuAlign === void 0 ? 'left' : _ref3$menuAlign,
       _ref3$menuWidth = _ref3.menuWidth,
-      menuWidth = _ref3$menuWidth === void 0 ? '100%' : _ref3$menuWidth;
+      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];
@@ -92,7 +94,9 @@ export var Select = function Select(_ref3) {
     as: SelectRoot,
     value: selectedOption,
     onChange: handleChange
-  }, /*#__PURE__*/React.createElement(SelectButton, null, selectedOption), /*#__PURE__*/React.createElement(Listbox.Options, {
+  }, /*#__PURE__*/React.createElement(Listbox.Button, {
+    as: Fragment
+  }, trigger ? trigger(selectedOption) : /*#__PURE__*/React.createElement(DefaultTrigger, null, selectedOption.content)), /*#__PURE__*/React.createElement(Listbox.Options, {
     menuAlign: menuAlign,
     menuWidth: menuWidth,
     as: MenuCard
@@ -100,21 +104,24 @@ export var Select = function Select(_ref3) {
     return /*#__PURE__*/React.createElement(Listbox.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: active,
+        isDisabled: option.isDisabled
+      }, option.content);
     });
   })));
 };
 Select.propTypes = {
   options: PropTypes.array,
-  defaultOption: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
+  defaultOption: PropTypes.object,
   onChange: PropTypes.func,
   menuAlign: PropTypes.oneOf(['left', 'right']),
-  menuWidth: types.dimension
+  menuWidth: types.dimension,
+  trigger: PropTypes.func
 };

package/es/components/text-button.js

@@ -4,7 +4,7 @@ import "core-js/modules/es.object.define-properties.js";
 import "core-js/modules/es.object.keys.js";
 import "core-js/modules/es.array.index-of.js";
 import "core-js/modules/es.symbol.js";
-var _excluded = ["children", "isDisabled", "icon"];
+var _excluded = ["children", "isDisabled", "icon", "iconPosition"];
 
 var _templateObject;
 
@@ -17,27 +17,35 @@ function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) r
 function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
 
 import { Icon } from '../components';
-import React from 'react';
+import React, { forwardRef } from 'react';
 import styled from '@emotion/styled';
 import PropTypes from 'prop-types';
 import { ClearButtonBox } from '../foundational';
-var Wrapper = styled(ClearButtonBox)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  padding: 0 8px;\n  gap: 8px;\n"])));
-export var TextButton = function TextButton(_ref) {
+var Wrapper = styled(ClearButtonBox)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  padding: 0 8px;\n  gap: 8px;\n\n  .buttonIcon {\n    ", ";\n  }\n"])), function (p) {
+  return p.iconPosition === 'right' && "order: 1";
+});
+export var TextButton = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var children = _ref.children,
       isDisabled = _ref.isDisabled,
       icon = _ref.icon,
+      _ref$iconPosition = _ref.iconPosition,
+      iconPosition = _ref$iconPosition === void 0 ? 'left' : _ref$iconPosition,
       props = _objectWithoutProperties(_ref, _excluded);
 
   return /*#__PURE__*/React.createElement(Wrapper, Object.assign({
     disabled: isDisabled,
-    icon: icon
+    icon: icon,
+    iconPosition: iconPosition,
+    ref: ref
   }, props), icon && /*#__PURE__*/React.createElement(Icon, {
-    icon: icon
+    icon: icon,
+    className: "buttonIcon"
   }), children && children);
-};
+});
 TextButton.propTypes = {
   children: PropTypes.node,
   icon: PropTypes.node,
+  iconPosition: PropTypes.oneOf(['left', 'right']),
   onClick: PropTypes.func,
   isDisabled: PropTypes.bool
 };

package/es/foundational/index.js

@@ -4,7 +4,7 @@ import "core-js/modules/es.object.define-properties.js";
 import "core-js/modules/es.object.keys.js";
 import "core-js/modules/es.array.index-of.js";
 import "core-js/modules/es.symbol.js";
-var _excluded = ["children", "isSelected", "isActive", "icon"];
+var _excluded = ["children", "isSelected", "isActive", "isDisabled", "icon"];
 
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6;
 
@@ -43,22 +43,30 @@ 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  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 (_ref4, ref) {
-  var children = _ref4.children,
-      isSelected = _ref4.isSelected,
-      isActive = _ref4.isActive,
-      icon = _ref4.icon,
-      props = _objectWithoutProperties(_ref4, _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,
     isActive: isActive,
     isSelected: isSelected,
+    isDisabled: isDisabled,
     style: {
       background: isActive ? getColor('overlay') : undefined
     },
@@ -68,6 +76,7 @@ export var MenuCardItem = /*#__PURE__*/forwardRef(function (_ref4, ref) {
     hasEvenBoundary: true
   }), /*#__PURE__*/React.createElement(Box, {
     width: "100%",
+    minWidth: "0px",
     tag: "span"
   }, /*#__PURE__*/React.createElement(Text, {
     hasEllipsis: true

package/package.json

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