@elliemae/ds-mini-toolbar 3.4.3-rc.1 → 3.4.4-rc.0

package/dist/cjs/index.d.js

@@ -13,7 +13,10 @@ var __copyProps = (to, from, except, desc) => {
   }
   return to;
 };
-var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target, mod));
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 var index_d_exports = {};
 module.exports = __toCommonJS(index_d_exports);

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

@@ -2,6 +2,6 @@
   "version": 3,
   "sources": ["../../src/index.d.tsx", "../../../../scripts/build/transpile/react-shim.js"],
   "sourcesContent": ["import React from 'react';\n\ntype SvgIconSizeType = 'xxs' | 'xs' | 's' | 'm' | 'l' | 'xl' | 'xxl';\ntype SvgIconColorType =\n  | ['neutral', '900']\n  | ['neutral', '500']\n  | ['neutral', '0']\n  | ['danger', '900']\n  | ['warning', '600']\n  | ['success', '900']\n  | ['brand-primary', '600'];\n\ntype SharedProps = {\n  options?: Record<string, unknown>[];\n  onClick?: (item: MiniToolbarItemT) => void;\n  Icon?: React.ComponentType<Record<string, unknown>>;\n  label?: string;\n} & Record<string, unknown>;\n\ntype ShortcutProps = {\n  style?: React.CSSProperties;\n} & Record<string, unknown>;\n\ntype ContextualRegionProps = {\n  position?: 'left' | 'right';\n  isOpen: boolean;\n} & Record<string, unknown>;\n\ntype DropdownComponentProps = {\n  onClick?: (item: MiniToolbarItemT) => void;\n  label?: string;\n  Icon?: React.ComponentType<Record<string, unknown>>;\n  color?: SvgIconColorType;\n  onSelectMenuItem: (option: Record<string, unknown>) => void;\n} & Record<string, unknown>;\n\ntype OverflowButtonProps = {\n  ariaLabel?: string;\n  style?: React.CSSProperties;\n  buttonType?: 'secondary' | 'text';\n};\ninterface DefaultIconItemProps {\n  Icon: React.ComponentType<{ size: SvgIconSizeType; color: SvgIconColorType }>;\n  size?: SvgIconSizeType;\n  color?: SvgIconColorType;\n  onClick?: (item: MiniToolbarItemT) => void;\n  ariaLabel?: string;\n  style?: React.CSSProperties;\n}\n\ntype MiniToolbarIconItemPropsT = DefaultIconItemProps & Record<string, unknown>;\n\ntype MiniToolbarButtonPropsT = { ariaLabel: string } & Record<string, unknown>;\n\ninterface MiniToolbarItemT {\n  component: 'ds-button' | 'ds-icon-item' | 'ds-separator' | 'ds-search-box' | 'ds-combo-box' | React.ReactElement;\n  hasShortcut?: boolean;\n  shortcutComponent?: React.ReactElement;\n  shortcutProps?: ShortcutProps;\n  dropdownComponentProps?: DropdownComponentProps;\n  sharedProps?: SharedProps;\n  contextualRegion?: React.ReactElement;\n  contextualRegionProps?: ContextualRegionProps;\n  [key: string]: unknown;\n}\n\ninterface ToolbarShortcutPropsT {\n  Component: React.ComponentType<Record<string, unknown>>;\n  shortcutProps: ShortcutProps;\n  sharedProps: SharedProps;\n  ContextualRegion: React.ComponentType<Record<string, unknown>>;\n  contextualRegionProps: ContextualRegionProps;\n}\n\ninterface MiniToolbarPropsT {\n  items: MiniToolbarItemT[];\n  overflowButtonProps?: OverflowButtonProps;\n}\n\ntype GeneratedDropdownItemT = {\n  id?: string;\n  label?: string;\n  onClick?: (item: MiniToolbarItemT) => void;\n  onKeyDown?: (e: React.KeyboardEvent) => void;\n  leftAddon?: React.ReactElement;\n  subItems?: Record<string, unknown>[];\n  type?: 'separator' | 'subMenu';\n};\n\nexport {\n  MiniToolbarIconItemPropsT,\n  MiniToolbarButtonPropsT,\n  MiniToolbarItemT,\n  ToolbarShortcutPropsT,\n  MiniToolbarPropsT,\n  GeneratedDropdownItemT,\n};\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;AAAA;AAAA;ACAA,YAAuB;",
+  "mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;ACAA,YAAuB;",
   "names": []
 }

package/dist/cjs/index.js

@@ -17,7 +17,10 @@ var __copyProps = (to, from, except, desc) => {
   }
   return to;
 };
-var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target, mod));
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 var src_exports = {};
 __export(src_exports, {

package/dist/cjs/index.js.map

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

package/dist/cjs/propTypes.js

@@ -17,7 +17,10 @@ var __copyProps = (to, from, except, desc) => {
   }
   return to;
 };
-var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target, mod));
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 var propTypes_exports = {};
 __export(propTypes_exports, {
@@ -39,15 +42,29 @@ const toolbarItemProps = {
     outOfTheBoxType,
     import_ds_utilities.PropTypes.element
   ]).description("Main component").isRequired,
-  hasShortcut: import_ds_utilities.PropTypes.bool.description("Whether to include the component as a shortcut in the toolbar or not").defaultValue(false),
-  shortcutComponent: import_ds_utilities.PropTypes.element.description("Component to render as a shortcut in the toolbar"),
+  hasShortcut: import_ds_utilities.PropTypes.bool.description(
+    "Whether to include the component as a shortcut in the toolbar or not"
+  ).defaultValue(false),
+  shortcutComponent: import_ds_utilities.PropTypes.element.description(
+    "Component to render as a shortcut in the toolbar"
+  ),
   shortcutProps: import_ds_utilities.PropTypes.object.description("Shortcut component props"),
-  dropdownComponentProps: import_ds_utilities.PropTypes.object.description("Dropdown component props"),
-  sharedProps: import_ds_utilities.PropTypes.object.description("Props shared by shortcut component and dropdown component"),
-  contextualRegion: import_ds_utilities.PropTypes.element.description("Component that can be rendered as an adjacent region to the shortcut component"),
-  contextualRegionProps: import_ds_utilities.PropTypes.object.description("Contextual region component props")
+  dropdownComponentProps: import_ds_utilities.PropTypes.object.description(
+    "Dropdown component props"
+  ),
+  sharedProps: import_ds_utilities.PropTypes.object.description(
+    "Props shared by shortcut component and dropdown component"
+  ),
+  contextualRegion: import_ds_utilities.PropTypes.element.description(
+    "Component that can be rendered as an adjacent region to the shortcut component"
+  ),
+  contextualRegionProps: import_ds_utilities.PropTypes.object.description(
+    "Contextual region component props"
+  )
 };
-const itemPropTypes = import_ds_utilities.PropTypes.shape(toolbarItemProps).description("Items props");
+const itemPropTypes = import_ds_utilities.PropTypes.shape(toolbarItemProps).description(
+  "Items props"
+);
 const overflowButtonPropTypes = {
   ariaLabel: import_ds_utilities.PropTypes.string,
   buttonType: import_ds_utilities.PropTypes.oneOf(["secondary", "text"]),
@@ -55,7 +72,9 @@ const overflowButtonPropTypes = {
 };
 const miniToolbarProps = {
   items: import_ds_utilities.PropTypes.arrayOf(itemPropTypes).description("Array of items").isRequired,
-  overflowButtonProps: import_ds_utilities.PropTypes.shape(overflowButtonPropTypes).description("Overflow button props")
+  overflowButtonProps: import_ds_utilities.PropTypes.shape(overflowButtonPropTypes).description(
+    "Overflow button props"
+  )
 };
 const ToolbarItem = () => null;
 ToolbarItem.displayName = "ToolbarItem";

package/dist/cjs/propTypes.js.map

@@ -2,6 +2,6 @@
   "version": 3,
   "sources": ["../../src/propTypes.tsx", "../../../../scripts/build/transpile/react-shim.js"],
   "sourcesContent": ["import { PropTypes, describe } from '@elliemae/ds-utilities';\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;\nToolbarItem.displayName = 'ToolbarItem';\nconst ToolbarItemWithSchema = describe(ToolbarItem);\nToolbarItemWithSchema.propTypes = toolbarItemProps;\nexport { ToolbarItemWithSchema, miniToolbarProps };\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,0BAAoC;AAEpC,MAAM,kBAAkB,8BAAU,MAAM;AAAA,EACtC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,CAAC,EAAE,YAAY,mCAAmC;AAElD,MAAM,mBAAmB;AAAA,EACvB,WAAW,8BAAU,UAAU;AAAA,IAC7B;AAAA,IACA,8BAAU;AAAA,EACZ,CAAC,EAAE,YAAY,gBAAgB,EAAE;AAAA,EACjC,aAAa,8BAAU,KACpB,YACC,sEACF,EACC,aAAa,KAAK;AAAA,EACrB,mBAAmB,8BAAU,QAAQ,YACnC,kDACF;AAAA,EACA,eAAe,8BAAU,OAAO,YAAY,0BAA0B;AAAA,EACtE,wBAAwB,8BAAU,OAAO,YACvC,0BACF;AAAA,EACA,aAAa,8BAAU,OAAO,YAC5B,2DACF;AAAA,EACA,kBAAkB,8BAAU,QAAQ,YAClC,gFACF;AAAA,EACA,uBAAuB,8BAAU,OAAO,YACtC,mCACF;AACF;AAEA,MAAM,gBAAgB,8BAAU,MAAM,gBAAgB,EAAE,YACtD,aACF;AAEA,MAAM,0BAA0B;AAAA,EAC9B,WAAW,8BAAU;AAAA,EACrB,YAAY,8BAAU,MAAM,CAAC,aAAa,MAAM,CAAC;AAAA,EACjD,OAAO,8BAAU;AACnB;AAEA,MAAM,mBAAmB;AAAA,EACvB,OAAO,8BAAU,QAAQ,aAAa,EAAE,YAAY,gBAAgB,EACjE;AAAA,EACH,qBAAqB,8BAAU,MAAM,uBAAuB,EAAE,YAC5D,uBACF;AACF;AAEA,MAAM,cAAc,MAAM;AAC1B,YAAY,cAAc;AAC1B,MAAM,wBAAwB,kCAAS,WAAW;AAClD,sBAAsB,YAAY;",
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,0BAAoC;AAEpC,MAAM,kBAAkB,8BAAU,MAAM;AAAA,EACtC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,CAAC,EAAE,YAAY,mCAAmC;AAElD,MAAM,mBAAmB;AAAA,EACvB,WAAW,8BAAU,UAAU;AAAA,IAC7B;AAAA,IACA,8BAAU;AAAA,EACZ,CAAC,EAAE,YAAY,gBAAgB,EAAE;AAAA,EACjC,aAAa,8BAAU,KACpB;AAAA,IACC;AAAA,EACF,EACC,aAAa,KAAK;AAAA,EACrB,mBAAmB,8BAAU,QAAQ;AAAA,IACnC;AAAA,EACF;AAAA,EACA,eAAe,8BAAU,OAAO,YAAY,0BAA0B;AAAA,EACtE,wBAAwB,8BAAU,OAAO;AAAA,IACvC;AAAA,EACF;AAAA,EACA,aAAa,8BAAU,OAAO;AAAA,IAC5B;AAAA,EACF;AAAA,EACA,kBAAkB,8BAAU,QAAQ;AAAA,IAClC;AAAA,EACF;AAAA,EACA,uBAAuB,8BAAU,OAAO;AAAA,IACtC;AAAA,EACF;AACF;AAEA,MAAM,gBAAgB,8BAAU,MAAM,gBAAgB,EAAE;AAAA,EACtD;AACF;AAEA,MAAM,0BAA0B;AAAA,EAC9B,WAAW,8BAAU;AAAA,EACrB,YAAY,8BAAU,MAAM,CAAC,aAAa,MAAM,CAAC;AAAA,EACjD,OAAO,8BAAU;AACnB;AAEA,MAAM,mBAAmB;AAAA,EACvB,OAAO,8BAAU,QAAQ,aAAa,EAAE,YAAY,gBAAgB,EACjE;AAAA,EACH,qBAAqB,8BAAU,MAAM,uBAAuB,EAAE;AAAA,IAC5D;AAAA,EACF;AACF;AAEA,MAAM,cAAc,MAAM;AAC1B,YAAY,cAAc;AAC1B,MAAM,4BAAwB,8BAAS,WAAW;AAClD,sBAAsB,YAAY;",
   "names": []
 }

package/dist/cjs/styles.js

@@ -17,7 +17,10 @@ var __copyProps = (to, from, except, desc) => {
   }
   return to;
 };
-var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target, mod));
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 var styles_exports = {};
 __export(styles_exports, {

package/dist/cjs/styles.js.map

@@ -2,6 +2,6 @@
   "version": 3,
   "sources": ["../../src/styles.tsx", "../../../../scripts/build/transpile/react-shim.js"],
   "sourcesContent": ["import { styled } from '@elliemae/ds-system';\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", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,uBAAuB;AACvB,uBAAyB;AAEzB,MAAM,YAAY,wBAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAQzB,MAAM,YAAY,wBAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAOzB,MAAM,OAAO,wBAAO;AAAA;AAAA;AAAA;AAAA;AAMpB,MAAM,eAAe,6BAAO,yBAAQ;AAAA;AAAA;AAAA;AAAA;",
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,uBAAuB;AACvB,uBAAyB;AAEzB,MAAM,YAAY,wBAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAQzB,MAAM,YAAY,wBAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAOzB,MAAM,OAAO,wBAAO;AAAA;AAAA;AAAA;AAAA;AAMpB,MAAM,mBAAe,yBAAO,yBAAQ;AAAA;AAAA;AAAA;AAAA;",
   "names": []
 }

package/dist/esm/Components/MiniToolbar.js

@@ -1,12 +1,13 @@
 import * as React from "react";
-import React2, { useState, useCallback } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useState, useCallback } from "react";
 import { describe } from "@elliemae/ds-utilities";
 import { DSDropdownMenu } from "@elliemae/ds-dropdownmenu";
 import { MoreOptionsVert } from "@elliemae/ds-icons";
 import { StyledButton, Container } from "../styles";
 import { miniToolbarProps } from "../propTypes";
 import { useGenerateItems } from "../hooks/useGenerateItems";
-const Elipsis = /* @__PURE__ */ React2.createElement(MoreOptionsVert, {
+const Elipsis = /* @__PURE__ */ jsx(MoreOptionsVert, {
   color: ["brand-primary", "600"],
   size: "m"
 });
@@ -21,26 +22,30 @@ const MiniToolbar = ({ items, overflowButtonProps }) => {
     }
   }, []);
   const { ariaLabel, style, buttonType = "secondary" } = overflowButtonProps || {};
-  return /* @__PURE__ */ React2.createElement(Container, {
+  return /* @__PURE__ */ jsxs(Container, {
     role: "toolbar",
-    "data-testid": "ds-mini-toolbar"
-  }, shortcutItems, /* @__PURE__ */ React2.createElement(DSDropdownMenu, {
-    "data-testid": "ds-mini-toolbar__dropdown-menu",
-    isOpen: isDropdownMenuOpen,
-    onSelectMenuItem: closeDropdownMenu,
-    onClickOutsideMenu: closeDropdownMenu,
-    options: dropdownMenuItems,
-    triggerComponent: /* @__PURE__ */ React2.createElement(StyledButton, {
-      "aria-label": ariaLabel,
-      "data-testid": "ds-mini-toolbar__elipsis",
-      size: "m",
-      style,
-      buttonType,
-      onClick: openDropdownMenu,
-      onKeyPress: openDropdownMenuKeyPress,
-      leftIcon: Elipsis
-    })
-  }));
+    "data-testid": "ds-mini-toolbar",
+    children: [
+      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,
+          buttonType,
+          onClick: openDropdownMenu,
+          onKeyPress: openDropdownMenuKeyPress,
+          leftIcon: Elipsis
+        })
+      })
+    ]
+  });
 };
 MiniToolbar.propTypes = miniToolbarProps;
 MiniToolbar.displayName = "MiniToolbar";

package/dist/esm/Components/MiniToolbar.js.map

@@ -2,6 +2,6 @@
   "version": 3,
   "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/Components/MiniToolbar.tsx"],
   "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useState, useCallback } from 'react';\nimport { describe } from '@elliemae/ds-utilities';\nimport { DSDropdownMenu } from '@elliemae/ds-dropdownmenu';\nimport { MoreOptionsVert } from '@elliemae/ds-icons';\nimport { StyledButton, Container } from '../styles';\nimport { miniToolbarProps } from '../propTypes';\nimport { useGenerateItems } from '../hooks/useGenerateItems';\nimport { MiniToolbarPropsT } from '../index.d';\n\nconst Elipsis = <MoreOptionsVert color={['brand-primary', '600']} size=\"m\" />;\n\nconst MiniToolbar = ({ items, overflowButtonProps }: MiniToolbarPropsT): React.ReactElement => {\n  const [shortcutItems, dropdownMenuItems] = useGenerateItems(items);\n  const [isDropdownMenuOpen, setIsDropdownMenuOpen] = useState<boolean>(false);\n\n  const closeDropdownMenu = useCallback(() => setIsDropdownMenuOpen(false), []);\n  const openDropdownMenu = useCallback(() => setIsDropdownMenuOpen(true), []);\n  const openDropdownMenuKeyPress = useCallback((e) => {\n    if (e.key === ' ') {\n      setIsDropdownMenuOpen(true);\n    }\n  }, []);\n\n  const { ariaLabel, style, buttonType = 'secondary' } = overflowButtonProps || {};\n\n  return (\n    <Container role=\"toolbar\" data-testid=\"ds-mini-toolbar\">\n      {shortcutItems}\n      <DSDropdownMenu\n        data-testid=\"ds-mini-toolbar__dropdown-menu\"\n        isOpen={isDropdownMenuOpen}\n        onSelectMenuItem={closeDropdownMenu}\n        onClickOutsideMenu={closeDropdownMenu}\n        options={dropdownMenuItems}\n        triggerComponent={\n          <StyledButton\n            aria-label={ariaLabel}\n            data-testid=\"ds-mini-toolbar__elipsis\"\n            size=\"m\"\n            style={style}\n            buttonType={buttonType}\n            onClick={openDropdownMenu}\n            onKeyPress={openDropdownMenuKeyPress}\n            leftIcon={Elipsis}\n          />\n        }\n      />\n    </Container>\n  );\n};\n\nMiniToolbar.propTypes = miniToolbarProps;\nMiniToolbar.displayName = 'MiniToolbar';\nconst MiniToolbarWithSchema = describe(MiniToolbar);\nMiniToolbarWithSchema.propTypes = miniToolbarProps;\n\nexport { MiniToolbar, MiniToolbarWithSchema };\n"],
-  "mappings": "AAAA;ACAA;AACA;AACA;AACA;AACA;AACA;AACA;AAGA,MAAM,UAAU,qCAAC;AAAA,EAAgB,OAAO,CAAC,iBAAiB,KAAK;AAAA,EAAG,MAAK;AAAA,CAAI;AAE3E,MAAM,cAAc,CAAC,EAAE,OAAO,0BAAiE;AAC7F,QAAM,CAAC,eAAe,qBAAqB,iBAAiB,KAAK;AACjE,QAAM,CAAC,oBAAoB,yBAAyB,SAAkB,KAAK;AAE3E,QAAM,oBAAoB,YAAY,MAAM,sBAAsB,KAAK,GAAG,CAAC,CAAC;AAC5E,QAAM,mBAAmB,YAAY,MAAM,sBAAsB,IAAI,GAAG,CAAC,CAAC;AAC1E,QAAM,2BAA2B,YAAY,CAAC,MAAM;AAClD,QAAI,EAAE,QAAQ,KAAK;AACjB,4BAAsB,IAAI;AAAA,IAC5B;AAAA,EACF,GAAG,CAAC,CAAC;AAEL,QAAM,EAAE,WAAW,OAAO,aAAa,gBAAgB,uBAAuB,CAAC;AAE/E,SACE,qCAAC;AAAA,IAAU,MAAK;AAAA,IAAU,eAAY;AAAA,KACnC,eACD,qCAAC;AAAA,IACC,eAAY;AAAA,IACZ,QAAQ;AAAA,IACR,kBAAkB;AAAA,IAClB,oBAAoB;AAAA,IACpB,SAAS;AAAA,IACT,kBACE,qCAAC;AAAA,MACC,cAAY;AAAA,MACZ,eAAY;AAAA,MACZ,MAAK;AAAA,MACL;AAAA,MACA;AAAA,MACA,SAAS;AAAA,MACT,YAAY;AAAA,MACZ,UAAU;AAAA,KACZ;AAAA,GAEJ,CACF;AAEJ;AAEA,YAAY,YAAY;AACxB,YAAY,cAAc;AAC1B,MAAM,wBAAwB,SAAS,WAAW;AAClD,sBAAsB,YAAY;",
+  "mappings": "AAAA,YAAY,WAAW;ACAvB;AAAA,SAAgB,UAAU,mBAAmB;AAC7C,SAAS,gBAAgB;AACzB,SAAS,sBAAsB;AAC/B,SAAS,uBAAuB;AAChC,SAAS,cAAc,iBAAiB;AACxC,SAAS,wBAAwB;AACjC,SAAS,wBAAwB;AAGjC,MAAM,UAAU,oBAAC;AAAA,EAAgB,OAAO,CAAC,iBAAiB,KAAK;AAAA,EAAG,MAAK;AAAA,CAAI;AAE3E,MAAM,cAAc,CAAC,EAAE,OAAO,oBAAoB,MAA6C;AAC7F,QAAM,CAAC,eAAe,iBAAiB,IAAI,iBAAiB,KAAK;AACjE,QAAM,CAAC,oBAAoB,qBAAqB,IAAI,SAAkB,KAAK;AAE3E,QAAM,oBAAoB,YAAY,MAAM,sBAAsB,KAAK,GAAG,CAAC,CAAC;AAC5E,QAAM,mBAAmB,YAAY,MAAM,sBAAsB,IAAI,GAAG,CAAC,CAAC;AAC1E,QAAM,2BAA2B,YAAY,CAAC,MAAM;AAClD,QAAI,EAAE,QAAQ,KAAK;AACjB,4BAAsB,IAAI;AAAA,IAC5B;AAAA,EACF,GAAG,CAAC,CAAC;AAEL,QAAM,EAAE,WAAW,OAAO,aAAa,YAAY,IAAI,uBAAuB,CAAC;AAE/E,SACE,qBAAC;AAAA,IAAU,MAAK;AAAA,IAAU,eAAY;AAAA,IACnC;AAAA;AAAA,MACD,oBAAC;AAAA,QACC,eAAY;AAAA,QACZ,QAAQ;AAAA,QACR,kBAAkB;AAAA,QAClB,oBAAoB;AAAA,QACpB,SAAS;AAAA,QACT,kBACE,oBAAC;AAAA,UACC,cAAY;AAAA,UACZ,eAAY;AAAA,UACZ,MAAK;AAAA,UACL;AAAA,UACA;AAAA,UACA,SAAS;AAAA,UACT,YAAY;AAAA,UACZ,UAAU;AAAA,SACZ;AAAA,OAEJ;AAAA;AAAA,GACF;AAEJ;AAEA,YAAY,YAAY;AACxB,YAAY,cAAc;AAC1B,MAAM,wBAAwB,SAAS,WAAW;AAClD,sBAAsB,YAAY;",
   "names": []
 }

package/dist/esm/Components/ToolbarShortcut.js

@@ -1,5 +1,6 @@
 import * as React from "react";
-import React2, { useRef, useEffect } from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useRef, useEffect } from "react";
 import { Item } from "../styles";
 const ToolbarShortcut = (props) => {
   const { Component, shortcutProps, sharedProps, ContextualRegion, contextualRegionProps } = props;
@@ -25,17 +26,28 @@ const ToolbarShortcut = (props) => {
       clearTimeout(timerRight.current);
     };
   }, [isOpen, leftRef, rightRef]);
-  return /* @__PURE__ */ React2.createElement(React2.Fragment, null, isOpen && position === "left" && /* @__PURE__ */ React2.createElement(Item, null, /* @__PURE__ */ React2.createElement(ContextualRegion, {
-    innerRef: leftRef,
-    ...contextualRegionProps
-  })), Component && /* @__PURE__ */ React2.createElement(Item, {
-    style
-  }, /* @__PURE__ */ React2.createElement(Component, {
-    ...mergedProps
-  })), isOpen && position === "right" && /* @__PURE__ */ React2.createElement(Item, null, /* @__PURE__ */ React2.createElement(ContextualRegion, {
-    innerRef: rightRef,
-    ...contextualRegionProps
-  })));
+  return /* @__PURE__ */ jsxs(Fragment, {
+    children: [
+      isOpen && position === "left" && /* @__PURE__ */ jsx(Item, {
+        children: /* @__PURE__ */ jsx(ContextualRegion, {
+          innerRef: leftRef,
+          ...contextualRegionProps
+        })
+      }),
+      Component && /* @__PURE__ */ jsx(Item, {
+        style,
+        children: /* @__PURE__ */ jsx(Component, {
+          ...mergedProps
+        })
+      }),
+      isOpen && position === "right" && /* @__PURE__ */ jsx(Item, {
+        children: /* @__PURE__ */ jsx(ContextualRegion, {
+          innerRef: rightRef,
+          ...contextualRegionProps
+        })
+      })
+    ]
+  });
 };
 export {
   ToolbarShortcut

package/dist/esm/Components/ToolbarShortcut.js.map

@@ -2,6 +2,6 @@
   "version": 3,
   "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/Components/ToolbarShortcut.tsx"],
   "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useRef, useEffect } from 'react';\nimport { Item } from '../styles';\nimport { ToolbarShortcutPropsT } from '../index.d';\n\nconst ToolbarShortcut = (props: ToolbarShortcutPropsT): React.ReactElement => {\n  const { Component, shortcutProps, sharedProps, ContextualRegion, contextualRegionProps } = props;\n  const leftRef = useRef<HTMLElement | null>(null);\n  const rightRef = useRef<HTMLElement | null>(null);\n  const timerLeft = useRef<ReturnType<typeof setInterval> | null>(null);\n  const timerRight = useRef<ReturnType<typeof setInterval> | null>(null);\n\n  const { position = 'left', isOpen = false } = contextualRegionProps || {};\n  const { style } = shortcutProps || {};\n\n  const mergedProps = {\n    ...sharedProps,\n    ...shortcutProps,\n  };\n\n  useEffect(() => {\n    if (isOpen && leftRef.current) {\n      timerLeft.current = setTimeout(() => leftRef.current.focus(), 200);\n    }\n    if (isOpen && rightRef.current) {\n      timerRight.current = setTimeout(() => rightRef.current.focus(), 200);\n    }\n\n    return () => {\n      clearTimeout(timerLeft.current);\n      clearTimeout(timerRight.current);\n    };\n  }, [isOpen, leftRef, rightRef]);\n\n  return (\n    <>\n      {isOpen && position === 'left' && (\n        <Item>\n          <ContextualRegion innerRef={leftRef} {...contextualRegionProps} />\n        </Item>\n      )}\n      {Component && (\n        <Item style={style}>\n          <Component {...mergedProps} />\n        </Item>\n      )}\n      {isOpen && position === 'right' && (\n        <Item>\n          <ContextualRegion innerRef={rightRef} {...contextualRegionProps} />\n        </Item>\n      )}\n    </>\n  );\n};\n\nexport { ToolbarShortcut };\n"],
-  "mappings": "AAAA;ACAA;AACA;AAGA,MAAM,kBAAkB,CAAC,UAAqD;AAC5E,QAAM,EAAE,WAAW,eAAe,aAAa,kBAAkB,0BAA0B;AAC3F,QAAM,UAAU,OAA2B,IAAI;AAC/C,QAAM,WAAW,OAA2B,IAAI;AAChD,QAAM,YAAY,OAA8C,IAAI;AACpE,QAAM,aAAa,OAA8C,IAAI;AAErE,QAAM,EAAE,WAAW,QAAQ,SAAS,UAAU,yBAAyB,CAAC;AACxE,QAAM,EAAE,UAAU,iBAAiB,CAAC;AAEpC,QAAM,cAAc;AAAA,IAClB,GAAG;AAAA,IACH,GAAG;AAAA,EACL;AAEA,YAAU,MAAM;AACd,QAAI,UAAU,QAAQ,SAAS;AAC7B,gBAAU,UAAU,WAAW,MAAM,QAAQ,QAAQ,MAAM,GAAG,GAAG;AAAA,IACnE;AACA,QAAI,UAAU,SAAS,SAAS;AAC9B,iBAAW,UAAU,WAAW,MAAM,SAAS,QAAQ,MAAM,GAAG,GAAG;AAAA,IACrE;AAEA,WAAO,MAAM;AACX,mBAAa,UAAU,OAAO;AAC9B,mBAAa,WAAW,OAAO;AAAA,IACjC;AAAA,EACF,GAAG,CAAC,QAAQ,SAAS,QAAQ,CAAC;AAE9B,SACE,4DACG,UAAU,aAAa,UACtB,qCAAC,YACC,qCAAC;AAAA,IAAiB,UAAU;AAAA,IAAU,GAAG;AAAA,GAAuB,CAClE,GAED,aACC,qCAAC;AAAA,IAAK;AAAA,KACJ,qCAAC;AAAA,IAAW,GAAG;AAAA,GAAa,CAC9B,GAED,UAAU,aAAa,WACtB,qCAAC,YACC,qCAAC;AAAA,IAAiB,UAAU;AAAA,IAAW,GAAG;AAAA,GAAuB,CACnE,CAEJ;AAEJ;",
+  "mappings": "AAAA,YAAY,WAAW;ACAvB;AAAA,SAAgB,QAAQ,iBAAiB;AACzC,SAAS,YAAY;AAGrB,MAAM,kBAAkB,CAAC,UAAqD;AAC5E,QAAM,EAAE,WAAW,eAAe,aAAa,kBAAkB,sBAAsB,IAAI;AAC3F,QAAM,UAAU,OAA2B,IAAI;AAC/C,QAAM,WAAW,OAA2B,IAAI;AAChD,QAAM,YAAY,OAA8C,IAAI;AACpE,QAAM,aAAa,OAA8C,IAAI;AAErE,QAAM,EAAE,WAAW,QAAQ,SAAS,MAAM,IAAI,yBAAyB,CAAC;AACxE,QAAM,EAAE,MAAM,IAAI,iBAAiB,CAAC;AAEpC,QAAM,cAAc;AAAA,IAClB,GAAG;AAAA,IACH,GAAG;AAAA,EACL;AAEA,YAAU,MAAM;AACd,QAAI,UAAU,QAAQ,SAAS;AAC7B,gBAAU,UAAU,WAAW,MAAM,QAAQ,QAAQ,MAAM,GAAG,GAAG;AAAA,IACnE;AACA,QAAI,UAAU,SAAS,SAAS;AAC9B,iBAAW,UAAU,WAAW,MAAM,SAAS,QAAQ,MAAM,GAAG,GAAG;AAAA,IACrE;AAEA,WAAO,MAAM;AACX,mBAAa,UAAU,OAAO;AAC9B,mBAAa,WAAW,OAAO;AAAA,IACjC;AAAA,EACF,GAAG,CAAC,QAAQ,SAAS,QAAQ,CAAC;AAE9B,SACE;AAAA,IACG;AAAA,gBAAU,aAAa,UACtB,oBAAC;AAAA,QACC,8BAAC;AAAA,UAAiB,UAAU;AAAA,UAAU,GAAG;AAAA,SAAuB;AAAA,OAClE;AAAA,MAED,aACC,oBAAC;AAAA,QAAK;AAAA,QACJ,8BAAC;AAAA,UAAW,GAAG;AAAA,SAAa;AAAA,OAC9B;AAAA,MAED,UAAU,aAAa,WACtB,oBAAC;AAAA,QACC,8BAAC;AAAA,UAAiB,UAAU;AAAA,UAAW,GAAG;AAAA,SAAuB;AAAA,OACnE;AAAA;AAAA,GAEJ;AAEJ;",
   "names": []
 }

package/dist/esm/Components/outOfTheBox/Button.js

@@ -1,7 +1,7 @@
 import * as React from "react";
-import React2 from "react";
+import { jsx } from "react/jsx-runtime";
 import { DSButton } from "@elliemae/ds-button";
-const MiniToolbarButton = (props) => /* @__PURE__ */ React2.createElement(DSButton, {
+const MiniToolbarButton = (props) => /* @__PURE__ */ jsx(DSButton, {
   ...props,
   "aria-label": props.ariaLabel,
   "data-testid": "ds-mini-toolbar__shortcut"

package/dist/esm/Components/outOfTheBox/Button.js.map

@@ -2,6 +2,6 @@
   "version": 3,
   "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/Components/outOfTheBox/Button.tsx"],
   "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport { DSButton } from '@elliemae/ds-button';\n\nconst MiniToolbarButton = (props: Record<string, unknown>): React.ReactElement => (\n  <DSButton {...props} aria-label={props.ariaLabel} data-testid=\"ds-mini-toolbar__shortcut\" />\n);\n\nexport { MiniToolbarButton };\n"],
-  "mappings": "AAAA;ACAA;AACA;AAEA,MAAM,oBAAoB,CAAC,UACzB,qCAAC;AAAA,EAAU,GAAG;AAAA,EAAO,cAAY,MAAM;AAAA,EAAW,eAAY;AAAA,CAA4B;",
+  "mappings": "AAAA,YAAY,WAAW;ACAvB;AACA,SAAS,gBAAgB;AAEzB,MAAM,oBAAoB,CAAC,UACzB,oBAAC;AAAA,EAAU,GAAG;AAAA,EAAO,cAAY,MAAM;AAAA,EAAW,eAAY;AAAA,CAA4B;",
   "names": []
 }

package/dist/esm/Components/outOfTheBox/ComboBox.js

@@ -1,7 +1,7 @@
 import * as React from "react";
-import React2 from "react";
+import { jsx } from "react/jsx-runtime";
 import { DSComboBox2 } from "@elliemae/ds-form";
-const MiniToolbarComboBox = (props) => /* @__PURE__ */ React2.createElement(DSComboBox2, {
+const MiniToolbarComboBox = (props) => /* @__PURE__ */ jsx(DSComboBox2, {
   ...props
 });
 export {

package/dist/esm/Components/outOfTheBox/ComboBox.js.map

@@ -2,6 +2,6 @@
   "version": 3,
   "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/Components/outOfTheBox/ComboBox.tsx"],
   "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport { DSComboBox2 } from '@elliemae/ds-form';\n\nconst MiniToolbarComboBox = (props: Record<string, unknown>): React.ReactElement => <DSComboBox2 {...props} />;\n\nexport { MiniToolbarComboBox };\n"],
-  "mappings": "AAAA;ACAA;AACA;AAEA,MAAM,sBAAsB,CAAC,UAAuD,qCAAC;AAAA,EAAa,GAAG;AAAA,CAAO;",
+  "mappings": "AAAA,YAAY,WAAW;ACAvB;AACA,SAAS,mBAAmB;AAE5B,MAAM,sBAAsB,CAAC,UAAuD,oBAAC;AAAA,EAAa,GAAG;AAAA,CAAO;",
   "names": []
 }

package/dist/esm/Components/outOfTheBox/IconItem.js

@@ -1,14 +1,14 @@
 import * as React from "react";
-import React2 from "react";
+import { jsx } from "react/jsx-runtime";
 import { StyledButton } from "../../styles";
 const MiniToolbarIcon = (props) => {
   const { Icon, size, color, onClick, ariaLabel, style, buttonType = "secondary" } = props;
-  return /* @__PURE__ */ React2.createElement(StyledButton, {
+  return /* @__PURE__ */ jsx(StyledButton, {
     "aria-label": ariaLabel,
     buttonType,
     onClick,
     style,
-    leftIcon: /* @__PURE__ */ React2.createElement(Icon, {
+    leftIcon: /* @__PURE__ */ jsx(Icon, {
       size,
       color
     }),

package/dist/esm/Components/outOfTheBox/IconItem.js.map

@@ -2,6 +2,6 @@
   "version": 3,
   "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/Components/outOfTheBox/IconItem.tsx"],
   "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport { StyledButton } from '../../styles';\nimport { MiniToolbarIconItemPropsT } from '../../index.d';\n\nconst MiniToolbarIcon = (props: MiniToolbarIconItemPropsT): React.ReactElement => {\n  const { Icon, size, color, onClick, ariaLabel, style, buttonType = 'secondary' } = props;\n\n  return (\n    <StyledButton\n      aria-label={ariaLabel}\n      buttonType={buttonType}\n      onClick={onClick}\n      style={style}\n      leftIcon={<Icon size={size} color={color} />}\n      data-testid=\"ds-mini-toolbar__shortcut\"\n    />\n  );\n};\n\nexport { MiniToolbarIcon };\n"],
-  "mappings": "AAAA;ACAA;AACA;AAGA,MAAM,kBAAkB,CAAC,UAAyD;AAChF,QAAM,EAAE,MAAM,MAAM,OAAO,SAAS,WAAW,OAAO,aAAa,gBAAgB;AAEnF,SACE,qCAAC;AAAA,IACC,cAAY;AAAA,IACZ;AAAA,IACA;AAAA,IACA;AAAA,IACA,UAAU,qCAAC;AAAA,MAAK;AAAA,MAAY;AAAA,KAAc;AAAA,IAC1C,eAAY;AAAA,GACd;AAEJ;",
+  "mappings": "AAAA,YAAY,WAAW;ACAvB;AACA,SAAS,oBAAoB;AAG7B,MAAM,kBAAkB,CAAC,UAAyD;AAChF,QAAM,EAAE,MAAM,MAAM,OAAO,SAAS,WAAW,OAAO,aAAa,YAAY,IAAI;AAEnF,SACE,oBAAC;AAAA,IACC,cAAY;AAAA,IACZ;AAAA,IACA;AAAA,IACA;AAAA,IACA,UAAU,oBAAC;AAAA,MAAK;AAAA,MAAY;AAAA,KAAc;AAAA,IAC1C,eAAY;AAAA,GACd;AAEJ;",
   "names": []
 }

package/dist/esm/Components/outOfTheBox/SearchBox.js

@@ -1,23 +1,23 @@
 import * as React from "react";
-import React2 from "react";
+import { jsx } from "react/jsx-runtime";
 import { Search } from "@elliemae/ds-icons";
 import { DSSearchBox } from "@elliemae/ds-form";
 import { StyledButton } from "../../styles";
 const MiniToolbarSearchButton = (props) => {
   const { size, color, onClick, ariaLabel, style, buttonType = "secondary" } = props;
-  return /* @__PURE__ */ React2.createElement(StyledButton, {
+  return /* @__PURE__ */ jsx(StyledButton, {
     "aria-label": ariaLabel,
     buttonType,
     onClick,
     style,
-    leftIcon: /* @__PURE__ */ React2.createElement(Search, {
+    leftIcon: /* @__PURE__ */ jsx(Search, {
       size,
       color
     }),
     "data-testid": "ds-mini-toolbar__shortcut"
   });
 };
-const MiniToolbarSearchBox = (props) => /* @__PURE__ */ React2.createElement(DSSearchBox, {
+const MiniToolbarSearchBox = (props) => /* @__PURE__ */ jsx(DSSearchBox, {
   clearable: true,
   showIcon: false,
   ...props

package/dist/esm/Components/outOfTheBox/SearchBox.js.map

@@ -2,6 +2,6 @@
   "version": 3,
   "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/Components/outOfTheBox/SearchBox.tsx"],
   "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable react/prop-types */\nimport React from 'react';\nimport { Search } from '@elliemae/ds-icons';\nimport { DSSearchBox } from '@elliemae/ds-form';\nimport { StyledButton } from '../../styles';\nimport { MiniToolbarIconItemPropsT } from '../../index.d';\n\nconst MiniToolbarSearchButton = (props: MiniToolbarIconItemPropsT): React.ReactElement => {\n  const { size, color, onClick, ariaLabel, style, buttonType = 'secondary' } = props;\n\n  return (\n    <StyledButton\n      aria-label={ariaLabel}\n      buttonType={buttonType}\n      onClick={onClick}\n      style={style}\n      leftIcon={<Search size={size} color={color} />}\n      data-testid=\"ds-mini-toolbar__shortcut\"\n    />\n  );\n};\n\nconst MiniToolbarSearchBox = (props: Record<string, unknown>): JSX.Element => (\n  <DSSearchBox clearable showIcon={false} {...props} />\n);\n\nexport { MiniToolbarSearchButton, MiniToolbarSearchBox };\n"],
-  "mappings": "AAAA;ACCA;AACA;AACA;AACA;AAGA,MAAM,0BAA0B,CAAC,UAAyD;AACxF,QAAM,EAAE,MAAM,OAAO,SAAS,WAAW,OAAO,aAAa,gBAAgB;AAE7E,SACE,qCAAC;AAAA,IACC,cAAY;AAAA,IACZ;AAAA,IACA;AAAA,IACA;AAAA,IACA,UAAU,qCAAC;AAAA,MAAO;AAAA,MAAY;AAAA,KAAc;AAAA,IAC5C,eAAY;AAAA,GACd;AAEJ;AAEA,MAAM,uBAAuB,CAAC,UAC5B,qCAAC;AAAA,EAAY,WAAS;AAAA,EAAC,UAAU;AAAA,EAAQ,GAAG;AAAA,CAAO;",
+  "mappings": "AAAA,YAAY,WAAW;ACAvB;AAEA,SAAS,cAAc;AACvB,SAAS,mBAAmB;AAC5B,SAAS,oBAAoB;AAG7B,MAAM,0BAA0B,CAAC,UAAyD;AACxF,QAAM,EAAE,MAAM,OAAO,SAAS,WAAW,OAAO,aAAa,YAAY,IAAI;AAE7E,SACE,oBAAC;AAAA,IACC,cAAY;AAAA,IACZ;AAAA,IACA;AAAA,IACA;AAAA,IACA,UAAU,oBAAC;AAAA,MAAO;AAAA,MAAY;AAAA,KAAc;AAAA,IAC5C,eAAY;AAAA,GACd;AAEJ;AAEA,MAAM,uBAAuB,CAAC,UAC5B,oBAAC;AAAA,EAAY,WAAS;AAAA,EAAC,UAAU;AAAA,EAAQ,GAAG;AAAA,CAAO;",
   "names": []
 }

package/dist/esm/Components/outOfTheBox/Separator.js

@@ -1,7 +1,7 @@
 import * as React from "react";
-import React2 from "react";
+import { jsx } from "react/jsx-runtime";
 import { Separator } from "../../styles";
-const MiniToolbarSeparator = () => /* @__PURE__ */ React2.createElement(Separator, {
+const MiniToolbarSeparator = () => /* @__PURE__ */ jsx(Separator, {
   "data-testid": "ds-mini-toolbar__separator"
 });
 export {

package/dist/esm/Components/outOfTheBox/Separator.js.map

@@ -2,6 +2,6 @@
   "version": 3,
   "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/Components/outOfTheBox/Separator.tsx"],
   "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport { Separator } from '../../styles';\n\nconst MiniToolbarSeparator = (): React.ReactElement => (\n  <Separator data-testid=\"ds-mini-toolbar__separator\" />\n);\n\nexport { MiniToolbarSeparator };\n"],
-  "mappings": "AAAA;ACAA;AACA;AAEA,MAAM,uBAAuB,MAC3B,qCAAC;AAAA,EAAU,eAAY;AAAA,CAA6B;",
+  "mappings": "AAAA,YAAY,WAAW;ACAvB;AACA,SAAS,iBAAiB;AAE1B,MAAM,uBAAuB,MAC3B,oBAAC;AAAA,EAAU,eAAY;AAAA,CAA6B;",
   "names": []
 }

package/dist/esm/Components/outOfTheBox/index.js.map

@@ -2,6 +2,6 @@
   "version": 3,
   "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/Components/outOfTheBox/index.tsx"],
   "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "export { MiniToolbarButton } from './Button';\nexport { MiniToolbarIcon } from './IconItem';\nexport { MiniToolbarSearchBox } from './SearchBox';\nexport { MiniToolbarSeparator } from './Separator';\nexport { MiniToolbarComboBox } from './ComboBox';\n\nexport const ICON_ITEM = 'ds-icon-item';\nexport const SEPARATOR = 'ds-separator';\nexport const BUTTON = 'ds-button';\nexport const SEARCH_BOX = 'ds-search-box';\nexport const COMBO_BOX = 'ds-combo-box';\n"],
-  "mappings": "AAAA;ACAA;AACA;AACA;AACA;AACA;AAEO,MAAM,YAAY;AAClB,MAAM,YAAY;AAClB,MAAM,SAAS;AACf,MAAM,aAAa;AACnB,MAAM,YAAY;",
+  "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,yBAAyB;AAClC,SAAS,uBAAuB;AAChC,SAAS,4BAA4B;AACrC,SAAS,4BAA4B;AACrC,SAAS,2BAA2B;AAE7B,MAAM,YAAY;AAClB,MAAM,YAAY;AAClB,MAAM,SAAS;AACf,MAAM,aAAa;AACnB,MAAM,YAAY;",
   "names": []
 }

package/dist/esm/hooks/useGenerateItems.js

@@ -1,5 +1,6 @@
 import * as React from "react";
-import React2, { useMemo } from "react";
+import { jsx } from "react/jsx-runtime";
+import { useMemo } from "react";
 import { uid } from "uid";
 import { Search } from "@elliemae/ds-icons";
 import {
@@ -18,82 +19,87 @@ 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);
+  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__ */ 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,
+        shortcutProps,
+        sharedProps,
+        ContextualRegion,
+        contextualRegionProps
+      }, `${instanceUID}-shortcut-${index}`);
+    }),
+    [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 === 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);
+      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);
           }
         };
-        return option;
-      });
-    }
-    return dropdownItem;
-  }), [instanceUID, items]);
+      }
+      if (component === ICON_ITEM) {
+        dropdownItem.leftAddon = /* @__PURE__ */ jsx(Icon, {
+          color
+        });
+      } else if (component === SEARCH_BOX) {
+        dropdownItem.leftAddon = /* @__PURE__ */ jsx(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 {