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

package/dist/esm/hooks/useGenerateItems.js

@@ -0,0 +1,102 @@
+import * as React from "react";
+import React2, { useMemo } from "react";
+import { uid } from "uid";
+import { Search } from "@elliemae/ds-icons";
+import {
+  ICON_ITEM,
+  SEPARATOR,
+  BUTTON,
+  SEARCH_BOX,
+  COMBO_BOX,
+  MiniToolbarButton,
+  MiniToolbarSeparator,
+  MiniToolbarSearchBox,
+  MiniToolbarIcon,
+  MiniToolbarComboBox
+} from "../Components/outOfTheBox";
+import { ToolbarShortcut } from "../Components/ToolbarShortcut";
+import { MiniToolbarSearchButton } from "../Components/outOfTheBox/SearchBox";
+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 /* @__PURE__ */ React2.createElement(MiniToolbarSeparator, null);
+    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__ */ React2.createElement(ToolbarShortcut, {
+      key: `${instanceUID}-shortcut-${index}`,
+      Component,
+      shortcutProps,
+      sharedProps,
+      ContextualRegion,
+      contextualRegionProps
+    });
+  }), [instanceUID, items]);
+  const dropdownMenuItems = useMemo(() => items.map((item, index) => {
+    const { component, sharedProps, dropdownComponentProps } = item;
+    const dropdownItem = {};
+    const { Icon, color, label, onClick } = {
+      ...sharedProps,
+      ...dropdownComponentProps
+    };
+    if (component === SEPARATOR)
+      dropdownItem.type = "separator";
+    else {
+      dropdownItem.id = `${instanceUID}-dropdown-${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__ */ React2.createElement(Icon, {
+        color
+      });
+    } else if (component === SEARCH_BOX) {
+      dropdownItem.leftAddon = /* @__PURE__ */ React2.createElement(Search, {
+        color
+      });
+    } else if (component === COMBO_BOX) {
+      dropdownItem.type = "subMenu";
+      dropdownItem.label = label;
+      dropdownItem.subItems = sharedProps.options.map((option, index2) => {
+        option.id = `${instanceUID}-option-${index2}`;
+        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
+};
+//# sourceMappingURL=useGenerateItems.js.map

package/dist/esm/hooks/useGenerateItems.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/hooks/useGenerateItems.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useMemo } from 'react';\nimport { uid } from 'uid';\nimport { Search } from '@elliemae/ds-icons';\nimport {\n  ICON_ITEM,\n  SEPARATOR,\n  BUTTON,\n  SEARCH_BOX,\n  COMBO_BOX,\n  MiniToolbarButton,\n  MiniToolbarSeparator,\n  MiniToolbarSearchBox,\n  MiniToolbarIcon,\n  MiniToolbarComboBox,\n} from '../Components/outOfTheBox';\nimport { ToolbarShortcut } from '../Components/ToolbarShortcut';\nimport { MiniToolbarSearchButton } from '../Components/outOfTheBox/SearchBox';\nimport { GeneratedDropdownItemT, MiniToolbarItemT } from '../index.d';\n\nconst useGenerateItems = (items: MiniToolbarItemT[]): [React.ReactElement[], GeneratedDropdownItemT[]] => {\n  const instanceUID = useMemo(() => uid(6), []);\n\n  const shortcutItems = useMemo(\n    () =>\n      items\n        .filter((item) => item.hasShortcut || item.component === SEARCH_BOX || item.contextualRegion)\n        .map((item, index) => {\n          const { component, shortcutComponent, shortcutProps, sharedProps, contextualRegion, contextualRegionProps } =\n            item;\n\n          let Component;\n          let ContextualRegion;\n\n          if (component === SEPARATOR) return <MiniToolbarSeparator />;\n          if (component === BUTTON) Component = MiniToolbarButton;\n          else if (component === ICON_ITEM) Component = MiniToolbarIcon;\n          else if (component === COMBO_BOX) Component = MiniToolbarComboBox;\n          else if (component === SEARCH_BOX) {\n            if (item.hasShortcut) {\n              Component = MiniToolbarSearchButton;\n            }\n            ContextualRegion = MiniToolbarSearchBox;\n          }\n          if (!ContextualRegion) {\n            ContextualRegion = contextualRegion;\n          }\n          if (!Component) {\n            Component = shortcutComponent;\n          }\n\n          return (\n            <ToolbarShortcut\n              key={`${instanceUID}-shortcut-${index}`}\n              Component={Component}\n              shortcutProps={shortcutProps}\n              sharedProps={sharedProps}\n              ContextualRegion={ContextualRegion}\n              contextualRegionProps={contextualRegionProps}\n            />\n          );\n        }),\n    [instanceUID, items],\n  );\n\n  const dropdownMenuItems = useMemo(\n    () =>\n      items.map((item, index) => {\n        const { component, sharedProps, dropdownComponentProps } = item;\n        const dropdownItem: GeneratedDropdownItemT = {};\n\n        const { Icon, color, label, onClick } = {\n          ...sharedProps,\n          ...dropdownComponentProps,\n        };\n\n        if (component === SEPARATOR) dropdownItem.type = 'separator';\n        else {\n          dropdownItem.id = `${instanceUID}-dropdown-${index}`;\n          dropdownItem.onClick = () => onClick(item);\n          dropdownItem.label = label;\n          dropdownItem.onKeyDown = (e: React.KeyboardEvent) => {\n            if (e.key === 'Enter' || e.key === ' ') {\n              onClick(item);\n            }\n          };\n        }\n\n        if (component === ICON_ITEM) {\n          dropdownItem.leftAddon = <Icon color={color} />;\n        } else if (component === SEARCH_BOX) {\n          dropdownItem.leftAddon = <Search color={color} />;\n        } else if (component === COMBO_BOX) {\n          dropdownItem.type = 'subMenu';\n          dropdownItem.label = label;\n          dropdownItem.subItems = sharedProps.options.map((option, index) => {\n            option.id = `${instanceUID}-option-${index}`;\n            option.onClick = () => dropdownComponentProps.onSelectMenuItem(option);\n            option.onKeyDown = (e: React.KeyboardEvent) => {\n              if (e.key === ' ' || e.key === 'Enter') {\n                dropdownComponentProps.onSelectMenuItem(option);\n              }\n            };\n            return option;\n          });\n        }\n\n        return dropdownItem;\n      }),\n    [instanceUID, items],\n  );\n\n  return [shortcutItems, dropdownMenuItems];\n};\n\nexport { useGenerateItems };\n"],
+  "mappings": "AAAA;ACAA;AACA;AACA;AACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAYA;AACA;AAGA,MAAM,mBAAmB,CAAC,UAAgF;AACxG,QAAM,cAAc,QAAQ,MAAM,IAAI,IAAI;AAE1C,QAAM,gBAAgB,QACpB,MACE,MACG,OAAO,CAAC,SAAS,KAAK,eAAe,KAAK,cAAc,cAAc,KAAK,kBAC3E,IAAI,CAAC,MAAM,UAAU;AACpB,UAAM,EAAE,WAAW,mBAAmB,eAAe,aAAa,kBAAkB,0BAClF;AAEF,QAAI;AACJ,QAAI;AAEJ,QAAI,cAAc;AAAW,aAAO,qCAAC,sBAAD;AACpC,QAAI,cAAc;AAAQ,kBAAY;AAAA,aAC7B,cAAc;AAAW,kBAAY;AAAA,aACrC,cAAc;AAAW,kBAAY;AAAA,aACrC,cAAc,YAAY;AACjC,UAAI,KAAK,aAAa;AACpB,oBAAY;AAAA;AAEd,yBAAmB;AAAA;AAErB,QAAI,CAAC,kBAAkB;AACrB,yBAAmB;AAAA;AAErB,QAAI,CAAC,WAAW;AACd,kBAAY;AAAA;AAGd,WACE,qCAAC,iBAAD;AAAA,MACE,KAAK,GAAG,wBAAwB;AAAA,MAChC;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA;AAAA,MAIV,CAAC,aAAa;AAGhB,QAAM,oBAAoB,QACxB,MACE,MAAM,IAAI,CAAC,MAAM,UAAU;AACzB,UAAM,EAAE,WAAW,aAAa,2BAA2B;AAC3D,UAAM,eAAuC;AAE7C,UAAM,EAAE,MAAM,OAAO,OAAO,YAAY;AAAA,SACnC;AAAA,SACA;AAAA;AAGL,QAAI,cAAc;AAAW,mBAAa,OAAO;AAAA,SAC5C;AACH,mBAAa,KAAK,GAAG,wBAAwB;AAC7C,mBAAa,UAAU,MAAM,QAAQ;AACrC,mBAAa,QAAQ;AACrB,mBAAa,YAAY,CAAC,MAA2B;AACnD,YAAI,EAAE,QAAQ,WAAW,EAAE,QAAQ,KAAK;AACtC,kBAAQ;AAAA;AAAA;AAAA;AAKd,QAAI,cAAc,WAAW;AAC3B,mBAAa,YAAY,qCAAC,MAAD;AAAA,QAAM;AAAA;AAAA,eACtB,cAAc,YAAY;AACnC,mBAAa,YAAY,qCAAC,QAAD;AAAA,QAAQ;AAAA;AAAA,eACxB,cAAc,WAAW;AAClC,mBAAa,OAAO;AACpB,mBAAa,QAAQ;AACrB,mBAAa,WAAW,YAAY,QAAQ,IAAI,CAAC,QAAQ,WAAU;AACjE,eAAO,KAAK,GAAG,sBAAsB;AACrC,eAAO,UAAU,MAAM,uBAAuB,iBAAiB;AAC/D,eAAO,YAAY,CAAC,MAA2B;AAC7C,cAAI,EAAE,QAAQ,OAAO,EAAE,QAAQ,SAAS;AACtC,mCAAuB,iBAAiB;AAAA;AAAA;AAG5C,eAAO;AAAA;AAAA;AAIX,WAAO;AAAA,MAEX,CAAC,aAAa;AAGhB,SAAO,CAAC,eAAe;AAAA;",
+  "names": []
+}

package/dist/esm/index.d.js

@@ -0,0 +1,2 @@
+import * as React from "react";
+//# sourceMappingURL=index.d.js.map

package/dist/esm/index.d.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../scripts/build/transpile/react-shim.js"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n"],
+  "mappings": "AAAA;",
+  "names": []
+}

package/dist/esm/index.js

@@ -0,0 +1,9 @@
+import * as React from "react";
+import { MiniToolbar, MiniToolbarWithSchema } from "./Components/MiniToolbar";
+import { ToolbarItemWithSchema } from "./propTypes";
+export {
+  MiniToolbar,
+  MiniToolbarWithSchema,
+  ToolbarItemWithSchema
+};
+//# sourceMappingURL=index.js.map

package/dist/esm/index.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/index.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "export { MiniToolbar, MiniToolbarWithSchema } from './Components/MiniToolbar';\nexport { ToolbarItemWithSchema } from './propTypes';\n"],
+  "mappings": "AAAA;ACAA;AACA;",
+  "names": []
+}

package/dist/esm/propTypes.js

@@ -0,0 +1,40 @@
+import * as React from "react";
+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
+};
+//# sourceMappingURL=propTypes.js.map

package/dist/esm/propTypes.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/propTypes.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { PropTypes, describe } from 'react-desc';\n\nconst outOfTheBoxType = PropTypes.oneOf([\n  'ds-button',\n  'ds-icon-item',\n  'ds-separator',\n  'ds-search-box',\n  'ds-combo-box',\n]).description('out-of-the-box toolbar components');\n\nconst toolbarItemProps = {\n  component: PropTypes.oneOfType([\n    outOfTheBoxType,\n    PropTypes.element,\n  ]).description('Main component').isRequired,\n  hasShortcut: PropTypes.bool\n    .description(\n      'Whether to include the component as a shortcut in the toolbar or not',\n    )\n    .defaultValue(false),\n  shortcutComponent: PropTypes.element.description(\n    'Component to render as a shortcut in the toolbar',\n  ),\n  shortcutProps: PropTypes.object.description('Shortcut component props'),\n  dropdownComponentProps: PropTypes.object.description(\n    'Dropdown component props',\n  ),\n  sharedProps: PropTypes.object.description(\n    'Props shared by shortcut component and dropdown component',\n  ),\n  contextualRegion: PropTypes.element.description(\n    'Component that can be rendered as an adjacent region to the shortcut component',\n  ),\n  contextualRegionProps: PropTypes.object.description(\n    'Contextual region component props',\n  ),\n};\n\nconst itemPropTypes = PropTypes.shape(toolbarItemProps).description(\n  'Items props',\n);\n\nconst overflowButtonPropTypes = {\n  ariaLabel: PropTypes.string,\n  buttonType: PropTypes.oneOf(['secondary', 'text']),\n  style: PropTypes.object,\n};\n\nconst miniToolbarProps = {\n  items: PropTypes.arrayOf(itemPropTypes).description('Array of items')\n    .isRequired,\n  overflowButtonProps: PropTypes.shape(overflowButtonPropTypes).description(\n    'Overflow button props',\n  ),\n};\n\nconst ToolbarItem = () => null;\n\nconst ToolbarItemWithSchema = describe(ToolbarItem);\nToolbarItemWithSchema.propTypes = toolbarItemProps;\nexport { ToolbarItemWithSchema, miniToolbarProps };\n"],
+  "mappings": "AAAA;ACAA;AAEA,MAAM,kBAAkB,UAAU,MAAM;AAAA,EACtC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,GACC,YAAY;AAEf,MAAM,mBAAmB;AAAA,EACvB,WAAW,UAAU,UAAU;AAAA,IAC7B;AAAA,IACA,UAAU;AAAA,KACT,YAAY,kBAAkB;AAAA,EACjC,aAAa,UAAU,KACpB,YACC,wEAED,aAAa;AAAA,EAChB,mBAAmB,UAAU,QAAQ,YACnC;AAAA,EAEF,eAAe,UAAU,OAAO,YAAY;AAAA,EAC5C,wBAAwB,UAAU,OAAO,YACvC;AAAA,EAEF,aAAa,UAAU,OAAO,YAC5B;AAAA,EAEF,kBAAkB,UAAU,QAAQ,YAClC;AAAA,EAEF,uBAAuB,UAAU,OAAO,YACtC;AAAA;AAIJ,MAAM,gBAAgB,UAAU,MAAM,kBAAkB,YACtD;AAGF,MAAM,0BAA0B;AAAA,EAC9B,WAAW,UAAU;AAAA,EACrB,YAAY,UAAU,MAAM,CAAC,aAAa;AAAA,EAC1C,OAAO,UAAU;AAAA;AAGnB,MAAM,mBAAmB;AAAA,EACvB,OAAO,UAAU,QAAQ,eAAe,YAAY,kBACjD;AAAA,EACH,qBAAqB,UAAU,MAAM,yBAAyB,YAC5D;AAAA;AAIJ,MAAM,cAAc,MAAM;AAE1B,MAAM,wBAAwB,SAAS;AACvC,sBAAsB,YAAY;",
+  "names": []
+}

package/dist/esm/styles.js

@@ -0,0 +1,33 @@
+import * as React from "react";
+import styled from "styled-components";
+import { DSButton } from "@elliemae/ds-button";
+const Container = styled.ul`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: fit-content;
+  padding: 0 6px;
+`;
+const Separator = styled.span`
+  height: 24px;
+  width: 1px;
+  margin: 6px;
+  border-left: 1px solid #bbb;
+`;
+const Item = styled.li`
+  display: flex;
+  margin: 6px;
+  cursor: pointer;
+`;
+const StyledButton = styled(DSButton)`
+  &:not(:focus) {
+    border-color: transparent;
+  }
+`;
+export {
+  Container,
+  Item,
+  Separator,
+  StyledButton
+};
+//# sourceMappingURL=styles.js.map

package/dist/esm/styles.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/styles.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import styled from 'styled-components';\nimport { DSButton } from '@elliemae/ds-button';\n\nconst Container = styled.ul`\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: fit-content;\n  padding: 0 6px;\n`;\n\nconst Separator = styled.span`\n  height: 24px;\n  width: 1px;\n  margin: 6px;\n  border-left: 1px solid #bbb;\n`;\n\nconst Item = styled.li`\n  display: flex;\n  margin: 6px;\n  cursor: pointer;\n`;\n\nconst StyledButton = styled(DSButton)`\n  &:not(:focus) {\n    border-color: transparent;\n  }\n`;\n\nexport { Container, Separator, Item, StyledButton };\n"],
+  "mappings": "AAAA;ACAA;AACA;AAEA,MAAM,YAAY,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAQzB,MAAM,YAAY,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAOzB,MAAM,OAAO,OAAO;AAAA;AAAA;AAAA;AAAA;AAMpB,MAAM,eAAe,OAAO;AAAA;AAAA;AAAA;AAAA;",
+  "names": []
+}

package/package.json

@@ -1,59 +1,62 @@
 {
   "name": "@elliemae/ds-mini-toolbar",
-  "version": "2.3.0-next.3",
+  "version": "3.0.0-alpha.0",
   "license": "MIT",
   "description": "ICE MT - Dimsum - MiniToolbar",
-  "module": "./esm/index.js",
-  "main": "./cjs/index.js",
-  "types": "./types/index.d.ts",
+  "files": [
+    "dist"
+  ],
+  "module": "./dist/esm/index.js",
+  "main": "./dist/cjs/index.js",
+  "types": "./dist/types/index.d.ts",
   "exports": {
     ".": {
-      "import": "./esm/index.js",
-      "require": "./cjs/index.js"
+      "import": "./dist/esm/index.js",
+      "require": "./dist/cjs/index.js"
     },
     "./styles": {
-      "import": "./esm/styles.js",
-      "require": "./cjs/styles.js"
+      "import": "./dist/esm/styles.js",
+      "require": "./dist/cjs/styles.js"
     },
     "./propTypes": {
-      "import": "./esm/propTypes.js",
-      "require": "./cjs/propTypes.js"
+      "import": "./dist/esm/propTypes.js",
+      "require": "./dist/cjs/propTypes.js"
     },
     "./hooks/useGenerateItems": {
-      "import": "./esm/hooks/useGenerateItems.js",
-      "require": "./cjs/hooks/useGenerateItems.js"
+      "import": "./dist/esm/hooks/useGenerateItems.js",
+      "require": "./dist/cjs/hooks/useGenerateItems.js"
     },
     "./Components/ToolbarShortcut": {
-      "import": "./esm/Components/ToolbarShortcut.js",
-      "require": "./cjs/Components/ToolbarShortcut.js"
+      "import": "./dist/esm/Components/ToolbarShortcut.js",
+      "require": "./dist/cjs/Components/ToolbarShortcut.js"
     },
     "./Components/outOfTheBox/Separator": {
-      "import": "./esm/Components/outOfTheBox/Separator.js",
-      "require": "./cjs/Components/outOfTheBox/Separator.js"
+      "import": "./dist/esm/Components/outOfTheBox/Separator.js",
+      "require": "./dist/cjs/Components/outOfTheBox/Separator.js"
     },
     "./Components/outOfTheBox/SearchBox": {
-      "import": "./esm/Components/outOfTheBox/SearchBox.js",
-      "require": "./cjs/Components/outOfTheBox/SearchBox.js"
+      "import": "./dist/esm/Components/outOfTheBox/SearchBox.js",
+      "require": "./dist/cjs/Components/outOfTheBox/SearchBox.js"
     },
     "./Components/outOfTheBox": {
-      "import": "./esm/Components/outOfTheBox/index.js",
-      "require": "./cjs/Components/outOfTheBox/index.js"
+      "import": "./dist/esm/Components/outOfTheBox/index.js",
+      "require": "./dist/cjs/Components/outOfTheBox/index.js"
     },
     "./Components/outOfTheBox/IconItem": {
-      "import": "./esm/Components/outOfTheBox/IconItem.js",
-      "require": "./cjs/Components/outOfTheBox/IconItem.js"
+      "import": "./dist/esm/Components/outOfTheBox/IconItem.js",
+      "require": "./dist/cjs/Components/outOfTheBox/IconItem.js"
     },
     "./Components/outOfTheBox/ComboBox": {
-      "import": "./esm/Components/outOfTheBox/ComboBox.js",
-      "require": "./cjs/Components/outOfTheBox/ComboBox.js"
+      "import": "./dist/esm/Components/outOfTheBox/ComboBox.js",
+      "require": "./dist/cjs/Components/outOfTheBox/ComboBox.js"
     },
     "./Components/outOfTheBox/Button": {
-      "import": "./esm/Components/outOfTheBox/Button.js",
-      "require": "./cjs/Components/outOfTheBox/Button.js"
+      "import": "./dist/esm/Components/outOfTheBox/Button.js",
+      "require": "./dist/cjs/Components/outOfTheBox/Button.js"
     },
     "./Components/MiniToolbar": {
-      "import": "./esm/Components/MiniToolbar.js",
-      "require": "./cjs/Components/MiniToolbar.js"
+      "import": "./dist/esm/Components/MiniToolbar.js",
+      "require": "./dist/cjs/Components/MiniToolbar.js"
     }
   },
   "repository": {
@@ -61,22 +64,22 @@
     "url": "https://git.elliemae.io/platform-ui/dimsum.git"
   },
   "engines": {
-    "npm": ">=7",
-    "node": ">=14"
+    "pnpm": ">=6",
+    "node": ">=16"
   },
   "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"
+  "jestSonar": {
+    "sonar56x": true,
+    "reportPath": "reports",
+    "reportFile": "tests.xml",
+    "indent": 4
   },
   "dependencies": {
-    "@elliemae/ds-button": "2.3.0-next.3",
-    "@elliemae/ds-dropdownmenu": "2.3.0-next.3",
-    "@elliemae/ds-form": "2.3.0-next.3",
-    "@elliemae/ds-icons": "2.3.0-next.3",
-    "@elliemae/ds-system": "2.3.0-next.1",
+    "@elliemae/ds-button": "3.0.0-alpha.0",
+    "@elliemae/ds-dropdownmenu": "3.0.0-alpha.0",
+    "@elliemae/ds-form": "3.0.0-alpha.0",
+    "@elliemae/ds-icons": "3.0.0-alpha.0",
+    "@elliemae/ds-system": "3.0.0-alpha.0",
     "react-desc": "~4.1.3",
     "uid": "~2.0.0"
   },
@@ -93,7 +96,12 @@
   },
   "publishConfig": {
     "access": "public",
-    "directory": "dist",
-    "generateSubmodules": true
+    "typeSafety": false
+  },
+  "scripts": {
+    "dev": "cross-env NODE_ENV=development node ../../scripts/build/build.mjs --watch",
+    "test": "node ../../scripts/testing/test.mjs",
+    "lint": "node ../../scripts/lint.mjs",
+    "build": "cross-env NODE_ENV=production node ../../scripts/build/build.mjs"
   }
 }

package/cjs/Components/MiniToolbar.js

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

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

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

@@ -1,25 +0,0 @@
-'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;