@elliemae/ds-mini-toolbar 2.3.0-alpha.8 → 2.3.0-next.10

package/cjs/Components/MiniToolbar.js

@@ -0,0 +1,70 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _jsx = require('@babel/runtime/helpers/jsx');
+require('core-js/modules/web.dom-collections.iterator.js');
+var react = require('react');
+var reactDesc = require('react-desc');
+var DSDropdownMenu = require('@elliemae/ds-dropdownmenu');
+var dsIcons = require('@elliemae/ds-icons');
+var styles = require('../styles.js');
+var propTypes = require('../propTypes.js');
+var useGenerateItems = require('../hooks/useGenerateItems.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
+var DSDropdownMenu__default = /*#__PURE__*/_interopDefaultLegacy(DSDropdownMenu);
+
+const Elipsis = /*#__PURE__*/_jsx__default["default"](dsIcons.MoreOptionsVert, {
+  color: ['brand-primary', '600'],
+  size: "m"
+});
+
+const MiniToolbar = _ref => {
+  let {
+    items,
+    overflowButtonProps
+  } = _ref;
+  const [shortcutItems, dropdownMenuItems] = useGenerateItems.useGenerateItems(items);
+  const [isDropdownMenuOpen, setIsDropdownMenuOpen] = react.useState(false);
+  const closeDropdownMenu = react.useCallback(() => setIsDropdownMenuOpen(false), []);
+  const openDropdownMenu = react.useCallback(() => setIsDropdownMenuOpen(true), []);
+  const openDropdownMenuKeyPress = react.useCallback(e => {
+    if (e.key === ' ') {
+      setIsDropdownMenuOpen(true);
+    }
+  }, []);
+  const {
+    ariaLabel,
+    style,
+    buttonType = 'secondary'
+  } = overflowButtonProps || {};
+  return /*#__PURE__*/_jsx__default["default"](styles.Container, {
+    role: "toolbar",
+    "data-testid": "ds-mini-toolbar"
+  }, void 0, shortcutItems, /*#__PURE__*/_jsx__default["default"](DSDropdownMenu__default["default"], {
+    "data-testid": "ds-mini-toolbar__dropdown-menu",
+    isOpen: isDropdownMenuOpen,
+    onSelectMenuItem: closeDropdownMenu,
+    onClickOutsideMenu: closeDropdownMenu,
+    options: dropdownMenuItems,
+    triggerComponent: /*#__PURE__*/_jsx__default["default"](styles.StyledButton, {
+      "aria-label": ariaLabel,
+      "data-testid": "ds-mini-toolbar__elipsis",
+      size: "m",
+      style: style,
+      buttonType: buttonType,
+      onClick: openDropdownMenu,
+      onKeyPress: openDropdownMenuKeyPress,
+      leftIcon: Elipsis
+    })
+  }));
+};
+
+const MiniToolbarWithSchema = reactDesc.describe(MiniToolbar);
+MiniToolbarWithSchema.propTypes = propTypes.miniToolbarProps;
+
+exports.MiniToolbar = MiniToolbar;
+exports.MiniToolbarWithSchema = MiniToolbarWithSchema;

package/cjs/Components/ToolbarShortcut.js

@@ -0,0 +1,72 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+require('core-js/modules/esnext.async-iterator.filter.js');
+require('core-js/modules/esnext.iterator.constructor.js');
+require('core-js/modules/esnext.iterator.filter.js');
+require('core-js/modules/esnext.async-iterator.for-each.js');
+require('core-js/modules/esnext.iterator.for-each.js');
+var _jsx = require('@babel/runtime/helpers/jsx');
+var _defineProperty = require('@babel/runtime/helpers/defineProperty');
+var react = require('react');
+var styles = require('../styles.js');
+var jsxRuntime = require('react/jsx-runtime');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
+var _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_defineProperty);
+
+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; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty__default["default"](target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+const ToolbarShortcut = props => {
+  const {
+    Component,
+    shortcutProps,
+    sharedProps,
+    ContextualRegion,
+    contextualRegionProps
+  } = props;
+  const leftRef = react.useRef(null);
+  const rightRef = react.useRef(null);
+  const timerLeft = react.useRef(null);
+  const timerRight = react.useRef(null);
+  const {
+    position = 'left',
+    isOpen = false
+  } = contextualRegionProps || {};
+  const {
+    style
+  } = shortcutProps || {};
+
+  const mergedProps = _objectSpread(_objectSpread({}, sharedProps), shortcutProps);
+
+  react.useEffect(() => {
+    if (isOpen && leftRef.current) {
+      timerLeft.current = setTimeout(() => leftRef.current.focus(), 200);
+    }
+
+    if (isOpen && rightRef.current) {
+      timerRight.current = setTimeout(() => rightRef.current.focus(), 200);
+    }
+
+    return () => {
+      clearTimeout(timerLeft.current);
+      clearTimeout(timerRight.current);
+    };
+  }, [isOpen, leftRef, rightRef]);
+  return /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
+    children: [isOpen && position === 'left' && /*#__PURE__*/_jsx__default["default"](styles.Item, {}, void 0, /*#__PURE__*/jsxRuntime.jsx(ContextualRegion, _objectSpread({
+      innerRef: leftRef
+    }, contextualRegionProps))), Component && /*#__PURE__*/_jsx__default["default"](styles.Item, {
+      style: style
+    }, void 0, /*#__PURE__*/jsxRuntime.jsx(Component, _objectSpread({}, mergedProps))), isOpen && position === 'right' && /*#__PURE__*/_jsx__default["default"](styles.Item, {}, void 0, /*#__PURE__*/jsxRuntime.jsx(ContextualRegion, _objectSpread({
+      innerRef: rightRef
+    }, contextualRegionProps)))]
+  });
+};
+
+exports.ToolbarShortcut = ToolbarShortcut;

package/cjs/Components/outOfTheBox/Button.js

@@ -0,0 +1,29 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+require('core-js/modules/esnext.async-iterator.filter.js');
+require('core-js/modules/esnext.iterator.constructor.js');
+require('core-js/modules/esnext.iterator.filter.js');
+require('core-js/modules/esnext.async-iterator.for-each.js');
+require('core-js/modules/esnext.iterator.for-each.js');
+var _defineProperty = require('@babel/runtime/helpers/defineProperty');
+require('react');
+var DSButton = require('@elliemae/ds-button');
+var jsxRuntime = require('react/jsx-runtime');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_defineProperty);
+var DSButton__default = /*#__PURE__*/_interopDefaultLegacy(DSButton);
+
+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; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty__default["default"](target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+const MiniToolbarButton = props => /*#__PURE__*/jsxRuntime.jsx(DSButton__default["default"], _objectSpread(_objectSpread({}, props), {}, {
+  "aria-label": props.ariaLabel,
+  "data-testid": "ds-mini-toolbar__shortcut"
+}));
+
+exports.MiniToolbarButton = MiniToolbarButton;

package/cjs/Components/outOfTheBox/ComboBox.js

@@ -0,0 +1,25 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+require('core-js/modules/esnext.async-iterator.filter.js');
+require('core-js/modules/esnext.iterator.constructor.js');
+require('core-js/modules/esnext.iterator.filter.js');
+require('core-js/modules/esnext.async-iterator.for-each.js');
+require('core-js/modules/esnext.iterator.for-each.js');
+var _defineProperty = require('@babel/runtime/helpers/defineProperty');
+require('react');
+var dsForm = require('@elliemae/ds-form');
+var jsxRuntime = require('react/jsx-runtime');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_defineProperty);
+
+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; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty__default["default"](target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+const MiniToolbarComboBox = props => /*#__PURE__*/jsxRuntime.jsx(dsForm.DSComboBox2, _objectSpread({}, props));
+
+exports.MiniToolbarComboBox = MiniToolbarComboBox;

package/cjs/Components/outOfTheBox/IconItem.js

@@ -0,0 +1,36 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _jsx = require('@babel/runtime/helpers/jsx');
+require('react');
+var styles = require('../../styles.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
+
+const MiniToolbarIcon = props => {
+  const {
+    Icon,
+    size,
+    color,
+    onClick,
+    ariaLabel,
+    style,
+    buttonType = 'secondary'
+  } = props;
+  return /*#__PURE__*/_jsx__default["default"](styles.StyledButton, {
+    "aria-label": ariaLabel,
+    buttonType: buttonType,
+    onClick: onClick,
+    style: style,
+    leftIcon: /*#__PURE__*/_jsx__default["default"](Icon, {
+      size: size,
+      color: color
+    }),
+    "data-testid": "ds-mini-toolbar__shortcut"
+  });
+};
+
+exports.MiniToolbarIcon = MiniToolbarIcon;

package/cjs/Components/outOfTheBox/SearchBox.js

@@ -0,0 +1,55 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+require('core-js/modules/esnext.async-iterator.filter.js');
+require('core-js/modules/esnext.iterator.constructor.js');
+require('core-js/modules/esnext.iterator.filter.js');
+require('core-js/modules/esnext.async-iterator.for-each.js');
+require('core-js/modules/esnext.iterator.for-each.js');
+var _defineProperty = require('@babel/runtime/helpers/defineProperty');
+var _jsx = require('@babel/runtime/helpers/jsx');
+require('react');
+var dsIcons = require('@elliemae/ds-icons');
+var dsForm = require('@elliemae/ds-form');
+var styles = require('../../styles.js');
+var jsxRuntime = require('react/jsx-runtime');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_defineProperty);
+var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
+
+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; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty__default["default"](target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+const MiniToolbarSearchButton = props => {
+  const {
+    size,
+    color,
+    onClick,
+    ariaLabel,
+    style,
+    buttonType = 'secondary'
+  } = props;
+  return /*#__PURE__*/_jsx__default["default"](styles.StyledButton, {
+    "aria-label": ariaLabel,
+    buttonType: buttonType,
+    onClick: onClick,
+    style: style,
+    leftIcon: /*#__PURE__*/_jsx__default["default"](dsIcons.Search, {
+      size: size,
+      color: color
+    }),
+    "data-testid": "ds-mini-toolbar__shortcut"
+  });
+};
+
+const MiniToolbarSearchBox = props => /*#__PURE__*/jsxRuntime.jsx(dsForm.DSSearchBox, _objectSpread({
+  clearable: true,
+  showIcon: false
+}, props));
+
+exports.MiniToolbarSearchBox = MiniToolbarSearchBox;
+exports.MiniToolbarSearchButton = MiniToolbarSearchButton;

package/cjs/Components/outOfTheBox/Separator.js

@@ -0,0 +1,19 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _jsx = require('@babel/runtime/helpers/jsx');
+require('react');
+var styles = require('../../styles.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
+
+var _Separator;
+
+const MiniToolbarSeparator = () => _Separator || (_Separator = /*#__PURE__*/_jsx__default["default"](styles.Separator, {
+  "data-testid": "ds-mini-toolbar__separator"
+}));
+
+exports.MiniToolbarSeparator = MiniToolbarSeparator;

package/cjs/Components/outOfTheBox/index.js

@@ -0,0 +1,26 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var Button = require('./Button.js');
+var IconItem = require('./IconItem.js');
+var SearchBox = require('./SearchBox.js');
+var Separator = require('./Separator.js');
+var ComboBox = require('./ComboBox.js');
+
+const ICON_ITEM = 'ds-icon-item';
+const SEPARATOR = 'ds-separator';
+const BUTTON = 'ds-button';
+const SEARCH_BOX = 'ds-search-box';
+const COMBO_BOX = 'ds-combo-box';
+
+exports.MiniToolbarButton = Button.MiniToolbarButton;
+exports.MiniToolbarIcon = IconItem.MiniToolbarIcon;
+exports.MiniToolbarSearchBox = SearchBox.MiniToolbarSearchBox;
+exports.MiniToolbarSeparator = Separator.MiniToolbarSeparator;
+exports.MiniToolbarComboBox = ComboBox.MiniToolbarComboBox;
+exports.BUTTON = BUTTON;
+exports.COMBO_BOX = COMBO_BOX;
+exports.ICON_ITEM = ICON_ITEM;
+exports.SEARCH_BOX = SEARCH_BOX;
+exports.SEPARATOR = SEPARATOR;

package/cjs/hooks/useGenerateItems.js

@@ -0,0 +1,134 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _defineProperty = require('@babel/runtime/helpers/defineProperty');
+var _jsx = require('@babel/runtime/helpers/jsx');
+require('core-js/modules/esnext.async-iterator.map.js');
+require('core-js/modules/esnext.iterator.map.js');
+require('core-js/modules/esnext.async-iterator.filter.js');
+require('core-js/modules/esnext.iterator.constructor.js');
+require('core-js/modules/esnext.iterator.filter.js');
+require('core-js/modules/esnext.async-iterator.for-each.js');
+require('core-js/modules/esnext.iterator.for-each.js');
+var react = require('react');
+var uid = require('uid');
+var dsIcons = require('@elliemae/ds-icons');
+var index = require('../Components/outOfTheBox/index.js');
+var ToolbarShortcut = require('../Components/ToolbarShortcut.js');
+var SearchBox = require('../Components/outOfTheBox/SearchBox.js');
+var Separator = require('../Components/outOfTheBox/Separator.js');
+var Button = require('../Components/outOfTheBox/Button.js');
+var IconItem = require('../Components/outOfTheBox/IconItem.js');
+var ComboBox = require('../Components/outOfTheBox/ComboBox.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_defineProperty);
+var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
+
+var _MiniToolbarSeparator;
+
+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; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty__default["default"](target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+const useGenerateItems = items => {
+  const instanceUID = react.useMemo(() => uid.uid(6), []);
+  const shortcutItems = react.useMemo(() => items.filter(item => item.hasShortcut || item.component === index.SEARCH_BOX || item.contextualRegion).map((item, index$1) => {
+    const {
+      component,
+      shortcutComponent,
+      shortcutProps,
+      sharedProps,
+      contextualRegion,
+      contextualRegionProps
+    } = item;
+    let Component;
+    let ContextualRegion;
+    if (component === index.SEPARATOR) return _MiniToolbarSeparator || (_MiniToolbarSeparator = /*#__PURE__*/_jsx__default["default"](Separator.MiniToolbarSeparator, {}));
+    if (component === index.BUTTON) Component = Button.MiniToolbarButton;else if (component === index.ICON_ITEM) Component = IconItem.MiniToolbarIcon;else if (component === index.COMBO_BOX) Component = ComboBox.MiniToolbarComboBox;else if (component === index.SEARCH_BOX) {
+      if (item.hasShortcut) {
+        Component = SearchBox.MiniToolbarSearchButton;
+      }
+
+      ContextualRegion = SearchBox.MiniToolbarSearchBox;
+    }
+
+    if (!ContextualRegion) {
+      ContextualRegion = contextualRegion;
+    }
+
+    if (!Component) {
+      Component = shortcutComponent;
+    }
+
+    return /*#__PURE__*/_jsx__default["default"](ToolbarShortcut.ToolbarShortcut, {
+      Component: Component,
+      shortcutProps: shortcutProps,
+      sharedProps: sharedProps,
+      ContextualRegion: ContextualRegion,
+      contextualRegionProps: contextualRegionProps
+    }, "".concat(instanceUID, "-shortcut-").concat(index$1));
+  }), [instanceUID, items]);
+  const dropdownMenuItems = react.useMemo(() => items.map((item, index$1) => {
+    const {
+      component,
+      sharedProps,
+      dropdownComponentProps
+    } = item;
+    const dropdownItem = {};
+
+    const {
+      Icon,
+      color,
+      label,
+      onClick
+    } = _objectSpread(_objectSpread({}, sharedProps), dropdownComponentProps);
+
+    if (component === index.SEPARATOR) dropdownItem.type = 'separator';else {
+      dropdownItem.id = "".concat(instanceUID, "-dropdown-").concat(index$1);
+
+      dropdownItem.onClick = () => onClick(item);
+
+      dropdownItem.label = label;
+
+      dropdownItem.onKeyDown = e => {
+        if (e.key === 'Enter' || e.key === ' ') {
+          onClick(item);
+        }
+      };
+    }
+
+    if (component === index.ICON_ITEM) {
+      dropdownItem.leftAddon = /*#__PURE__*/_jsx__default["default"](Icon, {
+        color: color
+      });
+    } else if (component === index.SEARCH_BOX) {
+      dropdownItem.leftAddon = /*#__PURE__*/_jsx__default["default"](dsIcons.Search, {
+        color: color
+      });
+    } else if (component === index.COMBO_BOX) {
+      dropdownItem.type = 'subMenu';
+      dropdownItem.label = label;
+      dropdownItem.subItems = sharedProps.options.map((option, index) => {
+        option.id = "".concat(instanceUID, "-option-").concat(index);
+
+        option.onClick = () => dropdownComponentProps.onSelectMenuItem(option);
+
+        option.onKeyDown = e => {
+          if (e.key === ' ' || e.key === 'Enter') {
+            dropdownComponentProps.onSelectMenuItem(option);
+          }
+        };
+
+        return option;
+      });
+    }
+
+    return dropdownItem;
+  }), [instanceUID, items]);
+  return [shortcutItems, dropdownMenuItems];
+};
+
+exports.useGenerateItems = useGenerateItems;

package/cjs/index.d.js

@@ -0,0 +1,2 @@
+'use strict';
+

package/cjs/index.js

@@ -0,0 +1,12 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var MiniToolbar = require('./Components/MiniToolbar.js');
+var propTypes = require('./propTypes.js');
+
+
+
+exports.MiniToolbar = MiniToolbar.MiniToolbar;
+exports.MiniToolbarWithSchema = MiniToolbar.MiniToolbarWithSchema;
+exports.ToolbarItemWithSchema = propTypes.ToolbarItemWithSchema;

package/cjs/propTypes.js

@@ -0,0 +1,35 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var reactDesc = require('react-desc');
+
+const outOfTheBoxType = reactDesc.PropTypes.oneOf(['ds-button', 'ds-icon-item', 'ds-separator', 'ds-search-box', 'ds-combo-box']).description('out-of-the-box toolbar components');
+const toolbarItemProps = {
+  component: reactDesc.PropTypes.oneOfType([outOfTheBoxType, reactDesc.PropTypes.element]).description('Main component').isRequired,
+  hasShortcut: reactDesc.PropTypes.bool.description('Whether to include the component as a shortcut in the toolbar or not').defaultValue(false),
+  shortcutComponent: reactDesc.PropTypes.element.description('Component to render as a shortcut in the toolbar'),
+  shortcutProps: reactDesc.PropTypes.object.description('Shortcut component props'),
+  dropdownComponentProps: reactDesc.PropTypes.object.description('Dropdown component props'),
+  sharedProps: reactDesc.PropTypes.object.description('Props shared by shortcut component and dropdown component'),
+  contextualRegion: reactDesc.PropTypes.element.description('Component that can be rendered as an adjacent region to the shortcut component'),
+  contextualRegionProps: reactDesc.PropTypes.object.description('Contextual region component props')
+};
+const itemPropTypes = reactDesc.PropTypes.shape(toolbarItemProps).description('Items props');
+const overflowButtonPropTypes = {
+  ariaLabel: reactDesc.PropTypes.string,
+  buttonType: reactDesc.PropTypes.oneOf(['secondary', 'text']),
+  style: reactDesc.PropTypes.object
+};
+const miniToolbarProps = {
+  items: reactDesc.PropTypes.arrayOf(itemPropTypes).description('Array of items').isRequired,
+  overflowButtonProps: reactDesc.PropTypes.shape(overflowButtonPropTypes).description('Overflow button props')
+};
+
+const ToolbarItem = () => null;
+
+const ToolbarItemWithSchema = reactDesc.describe(ToolbarItem);
+ToolbarItemWithSchema.propTypes = toolbarItemProps;
+
+exports.ToolbarItemWithSchema = ToolbarItemWithSchema;
+exports.miniToolbarProps = miniToolbarProps;

package/cjs/styles.js

@@ -0,0 +1,29 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var styled = require('styled-components');
+var DSButton = require('@elliemae/ds-button');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
+var DSButton__default = /*#__PURE__*/_interopDefaultLegacy(DSButton);
+
+const Container = /*#__PURE__*/styled__default["default"].ul.withConfig({
+  componentId: "sc-18ftw1x-0"
+})(["display:flex;align-items:center;justify-content:center;width:fit-content;padding:0 6px;"]);
+const Separator = /*#__PURE__*/styled__default["default"].span.withConfig({
+  componentId: "sc-18ftw1x-1"
+})(["height:24px;width:1px;margin:6px;border-left:1px solid #bbb;"]);
+const Item = /*#__PURE__*/styled__default["default"].li.withConfig({
+  componentId: "sc-18ftw1x-2"
+})(["display:flex;margin:6px;cursor:pointer;"]);
+const StyledButton = /*#__PURE__*/styled__default["default"](DSButton__default["default"]).withConfig({
+  componentId: "sc-18ftw1x-3"
+})(["&:not(:focus){border-color:transparent;}"]);
+
+exports.Container = Container;
+exports.Item = Item;
+exports.Separator = Separator;
+exports.StyledButton = StyledButton;

package/esm/Components/MiniToolbar.js

@@ -0,0 +1,60 @@
+import _jsx from '@babel/runtime/helpers/esm/jsx';
+import 'core-js/modules/web.dom-collections.iterator.js';
+import { useState, useCallback } from 'react';
+import { describe } from 'react-desc';
+import DSDropdownMenu from '@elliemae/ds-dropdownmenu';
+import { MoreOptionsVert } from '@elliemae/ds-icons';
+import { Container, StyledButton } from '../styles.js';
+import { miniToolbarProps } from '../propTypes.js';
+import { useGenerateItems } from '../hooks/useGenerateItems.js';
+
+const Elipsis = /*#__PURE__*/_jsx(MoreOptionsVert, {
+  color: ['brand-primary', '600'],
+  size: "m"
+});
+
+const MiniToolbar = _ref => {
+  let {
+    items,
+    overflowButtonProps
+  } = _ref;
+  const [shortcutItems, dropdownMenuItems] = useGenerateItems(items);
+  const [isDropdownMenuOpen, setIsDropdownMenuOpen] = useState(false);
+  const closeDropdownMenu = useCallback(() => setIsDropdownMenuOpen(false), []);
+  const openDropdownMenu = useCallback(() => setIsDropdownMenuOpen(true), []);
+  const openDropdownMenuKeyPress = useCallback(e => {
+    if (e.key === ' ') {
+      setIsDropdownMenuOpen(true);
+    }
+  }, []);
+  const {
+    ariaLabel,
+    style,
+    buttonType = 'secondary'
+  } = overflowButtonProps || {};
+  return /*#__PURE__*/_jsx(Container, {
+    role: "toolbar",
+    "data-testid": "ds-mini-toolbar"
+  }, void 0, shortcutItems, /*#__PURE__*/_jsx(DSDropdownMenu, {
+    "data-testid": "ds-mini-toolbar__dropdown-menu",
+    isOpen: isDropdownMenuOpen,
+    onSelectMenuItem: closeDropdownMenu,
+    onClickOutsideMenu: closeDropdownMenu,
+    options: dropdownMenuItems,
+    triggerComponent: /*#__PURE__*/_jsx(StyledButton, {
+      "aria-label": ariaLabel,
+      "data-testid": "ds-mini-toolbar__elipsis",
+      size: "m",
+      style: style,
+      buttonType: buttonType,
+      onClick: openDropdownMenu,
+      onKeyPress: openDropdownMenuKeyPress,
+      leftIcon: Elipsis
+    })
+  }));
+};
+
+const MiniToolbarWithSchema = describe(MiniToolbar);
+MiniToolbarWithSchema.propTypes = miniToolbarProps;
+
+export { MiniToolbar, MiniToolbarWithSchema };