@flodesk/grain 5.10.0 → 5.11.0

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,7 +77,8 @@ 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 || ''),
       _useState2 = _slicedToArray(_useState, 2),
@@ -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)), /*#__PURE__*/React.createElement(Listbox.Options, {
     menuAlign: menuAlign,
     menuWidth: menuWidth,
     as: MenuCard
@@ -100,7 +104,7 @@ export var Select = function Select(_ref3) {
     return /*#__PURE__*/React.createElement(Listbox.Option, {
       key: index,
       value: option,
-      as: React.Fragment
+      as: Fragment
     }, function (_ref4) {
       var active = _ref4.active,
           selected = _ref4.selected;
@@ -116,5 +120,6 @@ Select.propTypes = {
   defaultOption: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
   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

@@ -68,6 +68,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.0",
   "description": "Flodesk design system",
   "module": "es/index.js",
   "author": "Flodesk",