@elliemae/ds-mini-toolbar 2.3.0-next.3 → 3.0.0-alpha.0

package/esm/hooks/useGenerateItems.js

@@ -1,125 +0,0 @@
-import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
-import _jsx from '@babel/runtime/helpers/esm/jsx';
-import 'core-js/modules/esnext.async-iterator.map.js';
-import 'core-js/modules/esnext.iterator.map.js';
-import 'core-js/modules/esnext.async-iterator.filter.js';
-import 'core-js/modules/esnext.iterator.constructor.js';
-import 'core-js/modules/esnext.iterator.filter.js';
-import 'core-js/modules/esnext.async-iterator.for-each.js';
-import 'core-js/modules/esnext.iterator.for-each.js';
-import { useMemo } from 'react';
-import { uid } from 'uid';
-import { Search } from '@elliemae/ds-icons';
-import { SEARCH_BOX, SEPARATOR, BUTTON, ICON_ITEM, COMBO_BOX } from '../Components/outOfTheBox/index.js';
-import { ToolbarShortcut } from '../Components/ToolbarShortcut.js';
-import { MiniToolbarSearchButton, MiniToolbarSearchBox } from '../Components/outOfTheBox/SearchBox.js';
-import { MiniToolbarSeparator } from '../Components/outOfTheBox/Separator.js';
-import { MiniToolbarButton } from '../Components/outOfTheBox/Button.js';
-import { MiniToolbarIcon } from '../Components/outOfTheBox/IconItem.js';
-import { MiniToolbarComboBox } from '../Components/outOfTheBox/ComboBox.js';
-
-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(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 = useMemo(() => uid(6), []);
-  const shortcutItems = useMemo(() => items.filter(item => item.hasShortcut || item.component === SEARCH_BOX || item.contextualRegion).map((item, index) => {
-    const {
-      component,
-      shortcutComponent,
-      shortcutProps,
-      sharedProps,
-      contextualRegion,
-      contextualRegionProps
-    } = item;
-    let Component;
-    let ContextualRegion;
-    if (component === SEPARATOR) return _MiniToolbarSeparator || (_MiniToolbarSeparator = /*#__PURE__*/_jsx(MiniToolbarSeparator, {}));
-    if (component === BUTTON) Component = MiniToolbarButton;else if (component === ICON_ITEM) Component = MiniToolbarIcon;else if (component === COMBO_BOX) Component = MiniToolbarComboBox;else if (component === SEARCH_BOX) {
-      if (item.hasShortcut) {
-        Component = MiniToolbarSearchButton;
-      }
-
-      ContextualRegion = MiniToolbarSearchBox;
-    }
-
-    if (!ContextualRegion) {
-      ContextualRegion = contextualRegion;
-    }
-
-    if (!Component) {
-      Component = shortcutComponent;
-    }
-
-    return /*#__PURE__*/_jsx(ToolbarShortcut, {
-      Component: Component,
-      shortcutProps: shortcutProps,
-      sharedProps: sharedProps,
-      ContextualRegion: ContextualRegion,
-      contextualRegionProps: contextualRegionProps
-    }, "".concat(instanceUID, "-shortcut-").concat(index));
-  }), [instanceUID, items]);
-  const dropdownMenuItems = useMemo(() => items.map((item, index) => {
-    const {
-      component,
-      sharedProps,
-      dropdownComponentProps
-    } = item;
-    const dropdownItem = {};
-
-    const {
-      Icon,
-      color,
-      label,
-      onClick
-    } = _objectSpread(_objectSpread({}, sharedProps), dropdownComponentProps);
-
-    if (component === SEPARATOR) dropdownItem.type = 'separator';else {
-      dropdownItem.id = "".concat(instanceUID, "-dropdown-").concat(index);
-
-      dropdownItem.onClick = () => onClick(item);
-
-      dropdownItem.label = label;
-
-      dropdownItem.onKeyDown = e => {
-        if (e.key === 'Enter' || e.key === ' ') {
-          onClick(item);
-        }
-      };
-    }
-
-    if (component === ICON_ITEM) {
-      dropdownItem.leftAddon = /*#__PURE__*/_jsx(Icon, {
-        color: color
-      });
-    } else if (component === SEARCH_BOX) {
-      dropdownItem.leftAddon = /*#__PURE__*/_jsx(Search, {
-        color: color
-      });
-    } else if (component === 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];
-};
-
-export { useGenerateItems };

package/esm/index.d.js

@@ -1 +0,0 @@
-

package/esm/index.js

@@ -1,2 +0,0 @@
-export { MiniToolbar, MiniToolbarWithSchema } from './Components/MiniToolbar.js';
-export { ToolbarItemWithSchema } from './propTypes.js';

package/esm/propTypes.js

@@ -1,30 +0,0 @@
-import { PropTypes, describe } from 'react-desc';
-
-const outOfTheBoxType = 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: PropTypes.oneOfType([outOfTheBoxType, PropTypes.element]).description('Main component').isRequired,
-  hasShortcut: PropTypes.bool.description('Whether to include the component as a shortcut in the toolbar or not').defaultValue(false),
-  shortcutComponent: PropTypes.element.description('Component to render as a shortcut in the toolbar'),
-  shortcutProps: PropTypes.object.description('Shortcut component props'),
-  dropdownComponentProps: PropTypes.object.description('Dropdown component props'),
-  sharedProps: PropTypes.object.description('Props shared by shortcut component and dropdown component'),
-  contextualRegion: PropTypes.element.description('Component that can be rendered as an adjacent region to the shortcut component'),
-  contextualRegionProps: PropTypes.object.description('Contextual region component props')
-};
-const itemPropTypes = PropTypes.shape(toolbarItemProps).description('Items props');
-const overflowButtonPropTypes = {
-  ariaLabel: PropTypes.string,
-  buttonType: PropTypes.oneOf(['secondary', 'text']),
-  style: PropTypes.object
-};
-const miniToolbarProps = {
-  items: PropTypes.arrayOf(itemPropTypes).description('Array of items').isRequired,
-  overflowButtonProps: PropTypes.shape(overflowButtonPropTypes).description('Overflow button props')
-};
-
-const ToolbarItem = () => null;
-
-const ToolbarItemWithSchema = describe(ToolbarItem);
-ToolbarItemWithSchema.propTypes = toolbarItemProps;
-
-export { ToolbarItemWithSchema, miniToolbarProps };

package/esm/styles.js

@@ -1,17 +0,0 @@
-import styled from 'styled-components';
-import DSButton from '@elliemae/ds-button';
-
-const Container = /*#__PURE__*/styled.ul.withConfig({
-  componentId: "sc-18ftw1x-0"
-})(["display:flex;align-items:center;justify-content:center;width:fit-content;padding:0 6px;"]);
-const Separator = /*#__PURE__*/styled.span.withConfig({
-  componentId: "sc-18ftw1x-1"
-})(["height:24px;width:1px;margin:6px;border-left:1px solid #bbb;"]);
-const Item = /*#__PURE__*/styled.li.withConfig({
-  componentId: "sc-18ftw1x-2"
-})(["display:flex;margin:6px;cursor:pointer;"]);
-const StyledButton = /*#__PURE__*/styled(DSButton).withConfig({
-  componentId: "sc-18ftw1x-3"
-})(["&:not(:focus){border-color:transparent;}"]);
-
-export { Container, Item, Separator, StyledButton };