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

package/esm/Components/ToolbarShortcut.js

@@ -0,0 +1,63 @@
+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 _jsx from '@babel/runtime/helpers/esm/jsx';
+import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
+import { useRef, useEffect } from 'react';
+import { Item } from '../styles.js';
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+
+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 ToolbarShortcut = props => {
+  const {
+    Component,
+    shortcutProps,
+    sharedProps,
+    ContextualRegion,
+    contextualRegionProps
+  } = props;
+  const leftRef = useRef(null);
+  const rightRef = useRef(null);
+  const timerLeft = useRef(null);
+  const timerRight = useRef(null);
+  const {
+    position = 'left',
+    isOpen = false
+  } = contextualRegionProps || {};
+  const {
+    style
+  } = shortcutProps || {};
+
+  const mergedProps = _objectSpread(_objectSpread({}, sharedProps), shortcutProps);
+
+  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__*/jsxs(Fragment, {
+    children: [isOpen && position === 'left' && /*#__PURE__*/_jsx(Item, {}, void 0, /*#__PURE__*/jsx(ContextualRegion, _objectSpread({
+      innerRef: leftRef
+    }, contextualRegionProps))), Component && /*#__PURE__*/_jsx(Item, {
+      style: style
+    }, void 0, /*#__PURE__*/jsx(Component, _objectSpread({}, mergedProps))), isOpen && position === 'right' && /*#__PURE__*/_jsx(Item, {}, void 0, /*#__PURE__*/jsx(ContextualRegion, _objectSpread({
+      innerRef: rightRef
+    }, contextualRegionProps)))]
+  });
+};
+
+export { ToolbarShortcut };

package/esm/Components/outOfTheBox/Button.js

@@ -0,0 +1,20 @@
+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 _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
+import 'react';
+import DSButton from '@elliemae/ds-button';
+import { jsx } from 'react/jsx-runtime';
+
+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 MiniToolbarButton = props => /*#__PURE__*/jsx(DSButton, _objectSpread(_objectSpread({}, props), {}, {
+  "aria-label": props.ariaLabel,
+  "data-testid": "ds-mini-toolbar__shortcut"
+}));
+
+export { MiniToolbarButton };

package/esm/Components/outOfTheBox/ComboBox.js

@@ -0,0 +1,17 @@
+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 _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
+import 'react';
+import { DSComboBox2 } from '@elliemae/ds-form';
+import { jsx } from 'react/jsx-runtime';
+
+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 MiniToolbarComboBox = props => /*#__PURE__*/jsx(DSComboBox2, _objectSpread({}, props));
+
+export { MiniToolbarComboBox };

package/esm/Components/outOfTheBox/IconItem.js

@@ -0,0 +1,28 @@
+import _jsx from '@babel/runtime/helpers/esm/jsx';
+import 'react';
+import { StyledButton } from '../../styles.js';
+
+const MiniToolbarIcon = props => {
+  const {
+    Icon,
+    size,
+    color,
+    onClick,
+    ariaLabel,
+    style,
+    buttonType = 'secondary'
+  } = props;
+  return /*#__PURE__*/_jsx(StyledButton, {
+    "aria-label": ariaLabel,
+    buttonType: buttonType,
+    onClick: onClick,
+    style: style,
+    leftIcon: /*#__PURE__*/_jsx(Icon, {
+      size: size,
+      color: color
+    }),
+    "data-testid": "ds-mini-toolbar__shortcut"
+  });
+};
+
+export { MiniToolbarIcon };

package/esm/Components/outOfTheBox/SearchBox.js

@@ -0,0 +1,45 @@
+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 _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
+import _jsx from '@babel/runtime/helpers/esm/jsx';
+import 'react';
+import { Search } from '@elliemae/ds-icons';
+import { DSSearchBox } from '@elliemae/ds-form';
+import { StyledButton } from '../../styles.js';
+import { jsx } from 'react/jsx-runtime';
+
+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 MiniToolbarSearchButton = props => {
+  const {
+    size,
+    color,
+    onClick,
+    ariaLabel,
+    style,
+    buttonType = 'secondary'
+  } = props;
+  return /*#__PURE__*/_jsx(StyledButton, {
+    "aria-label": ariaLabel,
+    buttonType: buttonType,
+    onClick: onClick,
+    style: style,
+    leftIcon: /*#__PURE__*/_jsx(Search, {
+      size: size,
+      color: color
+    }),
+    "data-testid": "ds-mini-toolbar__shortcut"
+  });
+};
+
+const MiniToolbarSearchBox = props => /*#__PURE__*/jsx(DSSearchBox, _objectSpread({
+  clearable: true,
+  showIcon: false
+}, props));
+
+export { MiniToolbarSearchBox, MiniToolbarSearchButton };

package/esm/Components/outOfTheBox/Separator.js

@@ -0,0 +1,11 @@
+import _jsx from '@babel/runtime/helpers/esm/jsx';
+import 'react';
+import { Separator } from '../../styles.js';
+
+var _Separator;
+
+const MiniToolbarSeparator = () => _Separator || (_Separator = /*#__PURE__*/_jsx(Separator, {
+  "data-testid": "ds-mini-toolbar__separator"
+}));
+
+export { MiniToolbarSeparator };

package/esm/Components/outOfTheBox/index.js

@@ -0,0 +1,13 @@
+export { MiniToolbarButton } from './Button.js';
+export { MiniToolbarIcon } from './IconItem.js';
+export { MiniToolbarSearchBox } from './SearchBox.js';
+export { MiniToolbarSeparator } from './Separator.js';
+export { MiniToolbarComboBox } from './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';
+
+export { BUTTON, COMBO_BOX, ICON_ITEM, SEARCH_BOX, SEPARATOR };

package/esm/hooks/useGenerateItems.js

@@ -0,0 +1,125 @@
+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

@@ -0,0 +1 @@
+

package/esm/index.js

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

package/esm/propTypes.js

@@ -0,0 +1,30 @@
+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

@@ -0,0 +1,17 @@
+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 };

package/package.json

@@ -1,62 +1,59 @@
 {
   "name": "@elliemae/ds-mini-toolbar",
-  "version": "2.3.0-alpha.8",
+  "version": "2.3.0-next.2",
   "license": "MIT",
   "description": "ICE MT - Dimsum - MiniToolbar",
-  "files": [
-    "dist"
-  ],
-  "module": "./dist/esm/index.js",
-  "main": "./dist/cjs/index.js",
-  "types": "./dist/types/index.d.ts",
+  "module": "./esm/index.js",
+  "main": "./cjs/index.js",
+  "types": "./types/index.d.ts",
   "exports": {
     ".": {
-      "import": "./dist/esm/index.js",
-      "require": "./dist/cjs/index.js"
+      "import": "./esm/index.js",
+      "require": "./cjs/index.js"
     },
     "./styles": {
-      "import": "./dist/esm/styles.js",
-      "require": "./dist/cjs/styles.js"
+      "import": "./esm/styles.js",
+      "require": "./cjs/styles.js"
     },
     "./propTypes": {
-      "import": "./dist/esm/propTypes.js",
-      "require": "./dist/cjs/propTypes.js"
+      "import": "./esm/propTypes.js",
+      "require": "./cjs/propTypes.js"
     },
     "./hooks/useGenerateItems": {
-      "import": "./dist/esm/hooks/useGenerateItems.js",
-      "require": "./dist/cjs/hooks/useGenerateItems.js"
+      "import": "./esm/hooks/useGenerateItems.js",
+      "require": "./cjs/hooks/useGenerateItems.js"
     },
     "./Components/ToolbarShortcut": {
-      "import": "./dist/esm/Components/ToolbarShortcut.js",
-      "require": "./dist/cjs/Components/ToolbarShortcut.js"
+      "import": "./esm/Components/ToolbarShortcut.js",
+      "require": "./cjs/Components/ToolbarShortcut.js"
     },
     "./Components/outOfTheBox/Separator": {
-      "import": "./dist/esm/Components/outOfTheBox/Separator.js",
-      "require": "./dist/cjs/Components/outOfTheBox/Separator.js"
+      "import": "./esm/Components/outOfTheBox/Separator.js",
+      "require": "./cjs/Components/outOfTheBox/Separator.js"
     },
     "./Components/outOfTheBox/SearchBox": {
-      "import": "./dist/esm/Components/outOfTheBox/SearchBox.js",
-      "require": "./dist/cjs/Components/outOfTheBox/SearchBox.js"
+      "import": "./esm/Components/outOfTheBox/SearchBox.js",
+      "require": "./cjs/Components/outOfTheBox/SearchBox.js"
     },
     "./Components/outOfTheBox": {
-      "import": "./dist/esm/Components/outOfTheBox/index.js",
-      "require": "./dist/cjs/Components/outOfTheBox/index.js"
+      "import": "./esm/Components/outOfTheBox/index.js",
+      "require": "./cjs/Components/outOfTheBox/index.js"
     },
     "./Components/outOfTheBox/IconItem": {
-      "import": "./dist/esm/Components/outOfTheBox/IconItem.js",
-      "require": "./dist/cjs/Components/outOfTheBox/IconItem.js"
+      "import": "./esm/Components/outOfTheBox/IconItem.js",
+      "require": "./cjs/Components/outOfTheBox/IconItem.js"
     },
     "./Components/outOfTheBox/ComboBox": {
-      "import": "./dist/esm/Components/outOfTheBox/ComboBox.js",
-      "require": "./dist/cjs/Components/outOfTheBox/ComboBox.js"
+      "import": "./esm/Components/outOfTheBox/ComboBox.js",
+      "require": "./cjs/Components/outOfTheBox/ComboBox.js"
     },
     "./Components/outOfTheBox/Button": {
-      "import": "./dist/esm/Components/outOfTheBox/Button.js",
-      "require": "./dist/cjs/Components/outOfTheBox/Button.js"
+      "import": "./esm/Components/outOfTheBox/Button.js",
+      "require": "./cjs/Components/outOfTheBox/Button.js"
     },
     "./Components/MiniToolbar": {
-      "import": "./dist/esm/Components/MiniToolbar.js",
-      "require": "./dist/cjs/Components/MiniToolbar.js"
+      "import": "./esm/Components/MiniToolbar.js",
+      "require": "./cjs/Components/MiniToolbar.js"
     }
   },
   "repository": {
@@ -64,16 +61,22 @@
     "url": "https://git.elliemae.io/platform-ui/dimsum.git"
   },
   "engines": {
-    "pnpm": ">=6",
-    "node": ">=16"
+    "npm": ">=7",
+    "node": ">=14"
   },
   "author": "ICE MT",
+  "scripts": {
+    "dev": "cross-env NODE_ENV=development && node ../../scripts/build/build.js -w",
+    "prebuild": "exit 0",
+    "predev": "exit 0",
+    "build": "node ../../scripts/build/build.js"
+  },
   "dependencies": {
-    "@elliemae/ds-button": "2.3.0-alpha.8",
-    "@elliemae/ds-dropdownmenu": "2.3.0-alpha.8",
-    "@elliemae/ds-form": "2.3.0-alpha.8",
-    "@elliemae/ds-icons": "2.3.0-alpha.8",
-    "@elliemae/ds-system": "2.3.0-alpha.8",
+    "@elliemae/ds-button": "2.3.0-next.2",
+    "@elliemae/ds-dropdownmenu": "2.3.0-next.2",
+    "@elliemae/ds-form": "2.3.0-next.2",
+    "@elliemae/ds-icons": "2.3.0-next.2",
+    "@elliemae/ds-system": "2.3.0-next.1",
     "react-desc": "~4.1.3",
     "uid": "~2.0.0"
   },
@@ -90,12 +93,7 @@
   },
   "publishConfig": {
     "access": "public",
-    "typeSafety": false
-  },
-  "scripts": {
-    "dev": "cross-env NODE_ENV=development && node ../../scripts/build/build.js -w",
-    "prebuild": "exit 0",
-    "predev": "exit 0",
-    "build": "node ../../scripts/build/build.js"
+    "directory": "dist",
+    "generateSubmodules": true
   }
 }

package/types/Components/MiniToolbar.d.ts

@@ -0,0 +1,21 @@
+/// <reference path="../../../../../shared/typings/react-desc.d.ts" />
+import React from 'react';
+import { MiniToolbarPropsT } from '../index.d';
+declare const MiniToolbar: {
+    ({ items, overflowButtonProps }: MiniToolbarPropsT): React.ReactElement;
+    propTypes: {
+        items: import("react-desc").PropTypesDescValue;
+        overflowButtonProps: {
+            defaultValue(arg: import("react-desc").ReactDescPossibleDefaultValues): {
+                deprecated: import("react-desc").PropTypesDescValidator;
+            };
+            isRequired: import("react-desc").PropTypesDescValue;
+        };
+    };
+};
+declare const MiniToolbarWithSchema: {
+    (props?: unknown): JSX.Element;
+    propTypes: unknown;
+    toTypescript: () => import("react-desc").TypescriptSchema;
+};
+export { MiniToolbar, MiniToolbarWithSchema };

package/types/Components/ToolbarShortcut.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { ToolbarShortcutPropsT } from '../index.d';
+declare const ToolbarShortcut: (props: ToolbarShortcutPropsT) => React.ReactElement;
+export { ToolbarShortcut };

package/types/Components/outOfTheBox/Button.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+declare const MiniToolbarButton: (props: Record<string, unknown>) => React.ReactElement;
+export { MiniToolbarButton };

package/types/Components/outOfTheBox/ComboBox.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+declare const MiniToolbarComboBox: (props: Record<string, unknown>) => React.ReactElement;
+export { MiniToolbarComboBox };

package/types/Components/outOfTheBox/IconItem.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { MiniToolbarIconItemPropsT } from '../../index.d';
+declare const MiniToolbarIcon: (props: MiniToolbarIconItemPropsT) => React.ReactElement;
+export { MiniToolbarIcon };

package/types/Components/outOfTheBox/SearchBox.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+import { MiniToolbarIconItemPropsT } from '../../index.d';
+declare const MiniToolbarSearchButton: (props: MiniToolbarIconItemPropsT) => React.ReactElement;
+declare const MiniToolbarSearchBox: (props: Record<string, unknown>) => JSX.Element;
+export { MiniToolbarSearchButton, MiniToolbarSearchBox };

package/types/Components/outOfTheBox/Separator.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+declare const MiniToolbarSeparator: () => React.ReactElement;
+export { MiniToolbarSeparator };

package/types/Components/outOfTheBox/index.d.ts

@@ -0,0 +1,10 @@
+export { MiniToolbarButton } from './Button';
+export { MiniToolbarIcon } from './IconItem';
+export { MiniToolbarSearchBox } from './SearchBox';
+export { MiniToolbarSeparator } from './Separator';
+export { MiniToolbarComboBox } from './ComboBox';
+export declare const ICON_ITEM = "ds-icon-item";
+export declare const SEPARATOR = "ds-separator";
+export declare const BUTTON = "ds-button";
+export declare const SEARCH_BOX = "ds-search-box";
+export declare const COMBO_BOX = "ds-combo-box";

package/types/hooks/useGenerateItems.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { GeneratedDropdownItemT, MiniToolbarItemT } from '../index.d';
+declare const useGenerateItems: (items: MiniToolbarItemT[]) => [React.ReactElement[], GeneratedDropdownItemT[]];
+export { useGenerateItems };