@flodesk/grain 5.9.0 → 5.9.1

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, { useState } from 'react';
+import React, { forwardRef, useState } from 'react';
 import styled from '@emotion/styled';
 import { Icon, Box, Text } from '.';
 import { IconChevronDown } from '../icons';
@@ -52,12 +52,14 @@ var Root = function Root(_ref) {
   }));
 };
 
-var Trigger = function Trigger(_ref2) {
+var Trigger = /*#__PURE__*/forwardRef(function (_ref2, ref) {
   var props = Object.assign({}, _ref2);
-  return /*#__PURE__*/React.createElement(Box, Object.assign({}, props, {
+  return /*#__PURE__*/React.createElement(Box, Object.assign({
+    ref: ref
+  }, props, {
     position: "relative"
   }));
-};
+});
 
 var EmptyState = function EmptyState() {
   return /*#__PURE__*/React.createElement(Box, {
@@ -70,9 +72,14 @@ var EmptyState = function EmptyState() {
 export var Autocomplete = function Autocomplete(_ref3) {
   var options = _ref3.options,
       defaultOption = _ref3.defaultOption,
-      onChange = _ref3.onChange;
-
-  var _useState = useState(defaultOption || {}),
+      onChange = _ref3.onChange,
+      _ref3$menuAlign = _ref3.menuAlign,
+      menuAlign = _ref3$menuAlign === void 0 ? 'left' : _ref3$menuAlign,
+      _ref3$menuWidth = _ref3.menuWidth,
+      menuWidth = _ref3$menuWidth === void 0 ? '240px' : _ref3$menuWidth,
+      placeholder = _ref3.placeholder;
+
+  var _useState = useState(defaultOption ? defaultOption : ''),
       _useState2 = _slicedToArray(_useState, 2),
       selectedOption = _useState2[0],
       setSelectedOption = _useState2[1];
@@ -89,7 +96,7 @@ export var Autocomplete = function Autocomplete(_ref3) {
   };
 
   var filteredOptions = query === '' ? options : options.filter(function (option) {
-    return option.value.toLowerCase().includes(query.toLowerCase());
+    return option.toLowerCase().includes(query.toLowerCase());
   });
   return /*#__PURE__*/React.createElement(Combobox, {
     as: Root,
@@ -98,11 +105,11 @@ export var Autocomplete = function Autocomplete(_ref3) {
   }, /*#__PURE__*/React.createElement(Combobox.Button, {
     as: Trigger
   }, /*#__PURE__*/React.createElement(Input, {
-    autocomplete: "off",
+    autoComplete: "off",
     onChange: function onChange(event) {
       return setQuery(event.target.value);
     },
-    placeholder: "Start typing"
+    placeholder: placeholder
   }), /*#__PURE__*/React.createElement(Box, {
     right: fieldXPadding,
     position: "absolute",
@@ -113,11 +120,13 @@ export var Autocomplete = function Autocomplete(_ref3) {
   }, /*#__PURE__*/React.createElement(Icon, {
     icon: /*#__PURE__*/React.createElement(IconChevronDown, null)
   }))), /*#__PURE__*/React.createElement(Combobox.Options, {
+    menuAlign: menuAlign,
+    menuWidth: menuWidth,
     as: Menu
   }, filteredOptions.map(function (option, index) {
     return /*#__PURE__*/React.createElement(Combobox.Option, {
       key: index,
-      value: option.value,
+      value: option,
       as: React.Fragment
     }, function (_ref4) {
       var active = _ref4.active,
@@ -125,13 +134,13 @@ export var Autocomplete = function Autocomplete(_ref3) {
       return /*#__PURE__*/React.createElement(MenuItem, {
         isSelected: selected,
         isActive: active
-      }, option.content);
+      }, option);
     });
   }), !Boolean(filteredOptions.length) && /*#__PURE__*/React.createElement(EmptyState, null)));
 };
 Autocomplete.propTypes = {
   options: PropTypes.array,
-  defaultOption: PropTypes.object,
+  defaultOption: PropTypes.string,
   onChange: PropTypes.func,
   menuAlign: PropTypes.oneOf(['left', 'right']),
   menuWidth: types.dimension

package/es/components/select.js

@@ -45,8 +45,8 @@ import { IconChevronDown } from '../icons';
 import { Listbox } from '@headlessui/react';
 import { getColor, getRadius } from '../utilities';
 import { types } from '../types';
-import { Menu, MenuItem } from '../foundational';
-var SelectButtonWrapper = styled(Listbox.Button)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  appearance: none;\n  border: none;\n  background: ", ";\n  padding: 0 var(--grn-fieldXPadding);\n  min-height: var(--grn-textBoxHeight-m);\n  border-radius: ", ";\n  font: inherit;\n  color: inherit;\n  cursor: pointer;\n  width: 100%;\n  text-align: left;\n"])), getColor('fade1'), getRadius('s'));
+import { fieldXPadding, Menu, MenuItem, 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 children = _ref.children,
@@ -78,7 +78,7 @@ export var Select = function Select(_ref3) {
       _ref3$menuWidth = _ref3.menuWidth,
       menuWidth = _ref3$menuWidth === void 0 ? '240px' : _ref3$menuWidth;
 
-  var _useState = useState(defaultOption || {}),
+  var _useState = useState(defaultOption || ''),
       _useState2 = _slicedToArray(_useState, 2),
       selectedOption = _useState2[0],
       setSelectedOption = _useState2[1];
@@ -92,13 +92,13 @@ export var Select = function Select(_ref3) {
     as: SelectRoot,
     value: selectedOption,
     onChange: handleChange
-  }, /*#__PURE__*/React.createElement(SelectButton, null, selectedOption.content), /*#__PURE__*/React.createElement(Listbox.Options, {
+  }, /*#__PURE__*/React.createElement(SelectButton, null, selectedOption), /*#__PURE__*/React.createElement(Listbox.Options, {
     menuAlign: menuAlign,
     menuWidth: menuWidth,
     as: Menu
-  }, options.map(function (option) {
+  }, options.map(function (option, index) {
     return /*#__PURE__*/React.createElement(Listbox.Option, {
-      key: option.id,
+      key: index,
       value: option,
       as: React.Fragment
     }, function (_ref4) {
@@ -107,13 +107,13 @@ export var Select = function Select(_ref3) {
       return /*#__PURE__*/React.createElement(MenuItem, {
         isSelected: selected,
         isActive: active
-      }, option.content);
+      }, option);
     });
   })));
 };
 Select.propTypes = {
   options: PropTypes.array,
-  defaultOption: PropTypes.object,
+  defaultOption: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
   onChange: PropTypes.func,
   menuAlign: PropTypes.oneOf(['left', 'right']),
   menuWidth: types.dimension

package/es/foundational/index.js

@@ -23,6 +23,7 @@ import { Box, Icon, Text } from '../components';
 import { IconCheck } from '../icons';
 import { forwardRef } from 'react';
 export var fieldXPadding = '12px';
+export var textBoxHeight = '40px';
 export var transitions = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  transition: ", ";\n\n  &:hover {\n    transition: ", ";\n  }\n\n  &:active {\n    transition: 0s;\n  }\n"])), getTransition('slow'), getTransition('fast'));
 export var ClearButtonBox = styled.button(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  ", ";\n  --grn-borderColor-active: var(--grn-color-fade5);\n\n  appearance: none;\n  border: 1px solid transparent;\n  padding: 0;\n  font-family: inherit;\n  font-size: inherit;\n  cursor: pointer;\n  font-weight: ", ";\n  border-radius: ", ";\n  height: var(--grn-clearButtonHeight-m);\n  background-color: transparent;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n\n  &:hover {\n    background-color: var(--grn-color-backgroundOverlay);\n  }\n\n  &:active {\n    border-color: var(--grn-borderColor-active);\n    outline-color: var(--grn-borderColor-active);\n    background-color: transparent;\n  }\n\n  &:disabled {\n    color: ", ";\n    cursor: default;\n    border-color: transparent;\n\n    &:hover {\n      background-color: transparent;\n    }\n  }\n"])), transitions, getWeight('medium'), getRadius('s'), getColor('contentDisabled'));
 export var fieldStyles = function fieldStyles(_ref) {

package/package.json

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