@elliemae/ds-toolbar 3.15.0 → 3.16.0-next.10

package/dist/esm/DSToolbarV2.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/DSToolbarV2.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable react/prop-types */\nimport React, { useCallback, useMemo, useState } from 'react';\nimport {\n  useMemoMergePropsWithDefault,\n  useValidateTypescriptPropTypes,\n  useGetGlobalAttributes,\n  describe,\n} from '@elliemae/ds-utilities';\nimport { uid } from 'uid';\nimport { DSToolbarV2Context } from './DSToolbarV2Context';\nimport { DSToolbarV2Schema, defaultProps } from './react-desc-prop-types';\nimport { StyledToolbarWrapper } from './styled';\nimport type { DSToolbarT, DSToolbarItemT } from './react-desc-prop-types';\nimport { DSToolbarName } from './DSToolbarDefinitions';\n\nconst DSToolbarV2: React.ComponentType<DSToolbarT.Props> = (props) => {\n  const propsWithDefaults = useMemoMergePropsWithDefault(props, defaultProps);\n\n  useValidateTypescriptPropTypes(propsWithDefaults, DSToolbarV2Schema, DSToolbarName);\n\n  const { alignment, withDepth, compact, innerRef, children } = propsWithDefaults;\n\n  const globalsProps = useGetGlobalAttributes(propsWithDefaults);\n\n  const toolbarUid = useMemo(() => globalsProps.id ?? `ds-toolbar-${uid()}`, []);\n\n  const [itemReferences, setItemReferences] = useState({});\n  const [dndDraggingItem, setDndDraggingItem] = useState('');\n\n  const registerReference = useCallback(\n    (itemId: string, ref: React.MutableRefObject<DSToolbarItemT.RenderHTMLElementT>) => {\n      setItemReferences((prevItemReferences) => ({ ...prevItemReferences, [itemId]: ref }));\n    },\n    [setItemReferences],\n  );\n\n  const ctx = useMemo(\n    () => ({ toolbarUid, registerReference, itemReferences, dndDraggingItem, setDndDraggingItem }),\n    [dndDraggingItem, itemReferences, registerReference, toolbarUid],\n  );\n\n  return (\n    <DSToolbarV2Context.Provider value={ctx}>\n      <StyledToolbarWrapper\n        role=\"toolbar\"\n        data-testid=\"ds-toolbar-wrapper\"\n        id={toolbarUid}\n        alignItems=\"center\"\n        justifyContent={alignment === 'left' ? 'flex-start' : 'flex-end'}\n        withDepth={withDepth}\n        gutter=\"xxs2\"\n        compact={compact}\n        ref={innerRef}\n        {...globalsProps}\n      >\n        {children}\n      </StyledToolbarWrapper>\n    </DSToolbarV2Context.Provider>\n  );\n};\n\nDSToolbarV2.propTypes = DSToolbarV2Schema;\n\nDSToolbarV2.displayName = DSToolbarName;\nconst DSToolbarV2WithSchema = describe(DSToolbarV2).description('Toolbar');\nDSToolbarV2WithSchema.propTypes = DSToolbarV2Schema;\n\nexport { DSToolbarV2, DSToolbarV2WithSchema };\n"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable react/prop-types */\nimport React, { useCallback, useMemo, useState } from 'react';\nimport {\n  useMemoMergePropsWithDefault,\n  useValidateTypescriptPropTypes,\n  useGetGlobalAttributes,\n  describe,\n} from '@elliemae/ds-props-helpers';\nimport { uid } from 'uid';\nimport { DSToolbarV2Context } from './DSToolbarV2Context.js';\nimport { DSToolbarV2Schema, defaultProps } from './react-desc-prop-types.js';\nimport { StyledToolbarWrapper } from './styled.js';\nimport type { DSToolbarT, DSToolbarItemT } from './react-desc-prop-types.js';\nimport { DSToolbarName } from './DSToolbarDefinitions.js';\n\nconst DSToolbarV2: React.ComponentType<DSToolbarT.Props> = (props) => {\n  const propsWithDefaults = useMemoMergePropsWithDefault(props, defaultProps);\n\n  useValidateTypescriptPropTypes(propsWithDefaults, DSToolbarV2Schema, DSToolbarName);\n\n  const { alignment, withDepth, compact, innerRef, children } = propsWithDefaults;\n\n  const globalsProps = useGetGlobalAttributes(propsWithDefaults);\n\n  const toolbarUid = useMemo(() => globalsProps.id ?? `ds-toolbar-${uid()}`, []);\n\n  const [itemReferences, setItemReferences] = useState({});\n  const [dndDraggingItem, setDndDraggingItem] = useState('');\n\n  const registerReference = useCallback(\n    (itemId: string, ref: React.MutableRefObject<DSToolbarItemT.RenderHTMLElementT>) => {\n      setItemReferences((prevItemReferences) => ({ ...prevItemReferences, [itemId]: ref }));\n    },\n    [setItemReferences],\n  );\n\n  const ctx = useMemo(\n    () => ({ toolbarUid, registerReference, itemReferences, dndDraggingItem, setDndDraggingItem }),\n    [dndDraggingItem, itemReferences, registerReference, toolbarUid],\n  );\n\n  return (\n    <DSToolbarV2Context.Provider value={ctx}>\n      <StyledToolbarWrapper\n        role=\"toolbar\"\n        data-testid=\"ds-toolbar-wrapper\"\n        id={toolbarUid}\n        alignItems=\"center\"\n        justifyContent={alignment === 'left' ? 'flex-start' : 'flex-end'}\n        withDepth={withDepth}\n        gutter=\"xxs2\"\n        compact={compact}\n        ref={innerRef}\n        {...globalsProps}\n      >\n        {children}\n      </StyledToolbarWrapper>\n    </DSToolbarV2Context.Provider>\n  );\n};\n\nDSToolbarV2.propTypes = DSToolbarV2Schema;\n\nDSToolbarV2.displayName = DSToolbarName;\nconst DSToolbarV2WithSchema = describe(DSToolbarV2).description('Toolbar');\nDSToolbarV2WithSchema.propTypes = DSToolbarV2Schema;\n\nexport { DSToolbarV2, DSToolbarV2WithSchema };\n"],
   "mappings": "AAAA,YAAY,WAAW;AC2CjB;AA1CN,SAAgB,aAAa,SAAS,gBAAgB;AACtD;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,WAAW;AACpB,SAAS,0BAA0B;AACnC,SAAS,mBAAmB,oBAAoB;AAChD,SAAS,4BAA4B;AAErC,SAAS,qBAAqB;AAE9B,MAAM,cAAqD,CAAC,UAAU;AACpE,QAAM,oBAAoB,6BAA6B,OAAO,YAAY;AAE1E,iCAA+B,mBAAmB,mBAAmB,aAAa;AAElF,QAAM,EAAE,WAAW,WAAW,SAAS,UAAU,SAAS,IAAI;AAE9D,QAAM,eAAe,uBAAuB,iBAAiB;AAE7D,QAAM,aAAa,QAAQ,MAAM,aAAa,MAAM,cAAc,IAAI,KAAK,CAAC,CAAC;AAE7E,QAAM,CAAC,gBAAgB,iBAAiB,IAAI,SAAS,CAAC,CAAC;AACvD,QAAM,CAAC,iBAAiB,kBAAkB,IAAI,SAAS,EAAE;AAEzD,QAAM,oBAAoB;AAAA,IACxB,CAAC,QAAgB,QAAmE;AAClF,wBAAkB,CAAC,wBAAwB,EAAE,GAAG,oBAAoB,CAAC,SAAS,IAAI,EAAE;AAAA,IACtF;AAAA,IACA,CAAC,iBAAiB;AAAA,EACpB;AAEA,QAAM,MAAM;AAAA,IACV,OAAO,EAAE,YAAY,mBAAmB,gBAAgB,iBAAiB,mBAAmB;AAAA,IAC5F,CAAC,iBAAiB,gBAAgB,mBAAmB,UAAU;AAAA,EACjE;AAEA,SACE,oBAAC,mBAAmB,UAAnB,EAA4B,OAAO,KAClC;AAAA,IAAC;AAAA;AAAA,MACC,MAAK;AAAA,MACL,eAAY;AAAA,MACZ,IAAI;AAAA,MACJ,YAAW;AAAA,MACX,gBAAgB,cAAc,SAAS,eAAe;AAAA,MACtD;AAAA,MACA,QAAO;AAAA,MACP;AAAA,MACA,KAAK;AAAA,MACJ,GAAG;AAAA,MAEH;AAAA;AAAA,EACH,GACF;AAEJ;AAEA,YAAY,YAAY;AAExB,YAAY,cAAc;AAC1B,MAAM,wBAAwB,SAAS,WAAW,EAAE,YAAY,SAAS;AACzE,sBAAsB,YAAY;",
   "names": []
 }

package/dist/esm/DSToolbarV2Context.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/DSToolbarV2Context.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import type { MutableRefObject } from 'react';\nimport { createContext } from 'react';\nimport type { DSToolbarItemT } from './react-desc-prop-types';\ninterface IDSToolbarV2Context {\n  registerReference: (uid: string, ref: MutableRefObject<DSToolbarItemT.RenderHTMLElementT>) => void;\n  itemReferences: Record<string, MutableRefObject<DSToolbarItemT.RenderHTMLElementT>>;\n  toolbarUid: string;\n  dndDraggingItem: string;\n  setDndDraggingItem: React.Dispatch<React.SetStateAction<string>>;\n}\n\nexport const DSToolbarV2Context = createContext<IDSToolbarV2Context>({\n  registerReference: () => null,\n  itemReferences: {},\n  toolbarUid: '',\n  dndDraggingItem: '',\n  setDndDraggingItem: () => {},\n});\n"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import type { MutableRefObject } from 'react';\nimport { createContext } from 'react';\nimport type { DSToolbarItemT } from './react-desc-prop-types.js';\ninterface IDSToolbarV2Context {\n  registerReference: (uid: string, ref: MutableRefObject<DSToolbarItemT.RenderHTMLElementT>) => void;\n  itemReferences: Record<string, MutableRefObject<DSToolbarItemT.RenderHTMLElementT>>;\n  toolbarUid: string;\n  dndDraggingItem: string;\n  setDndDraggingItem: React.Dispatch<React.SetStateAction<string>>;\n}\n\nexport const DSToolbarV2Context = createContext<IDSToolbarV2Context>({\n  registerReference: () => null,\n  itemReferences: {},\n  toolbarUid: '',\n  dndDraggingItem: '',\n  setDndDraggingItem: () => {},\n});\n"],
   "mappings": "AAAA,YAAY,WAAW;ACCvB,SAAS,qBAAqB;AAUvB,MAAM,qBAAqB,cAAmC;AAAA,EACnE,mBAAmB,MAAM;AAAA,EACzB,gBAAgB,CAAC;AAAA,EACjB,YAAY;AAAA,EACZ,iBAAiB;AAAA,EACjB,oBAAoB,MAAM;AAAA,EAAC;AAC7B,CAAC;",
   "names": []
 }

package/dist/esm/deprecated/DSToolbar.js

@@ -2,12 +2,13 @@ import * as React from "react";
 import { jsx } from "react/jsx-runtime";
 import { useRef } from "react";
 import { aggregatedClasses } from "@elliemae/ds-classnames";
-import { describe, PropTypes, mergeRefs } from "@elliemae/ds-utilities";
-import decorateToolbarChildren from "./decorateToolbarChildren";
-import Item from "./ToolbarItem";
-import ToolbarGroup from "./ToolbarGroup";
-import Divider from "./ToolbarDivider";
-import { useKeyboardNavigation } from "./hooks/useKeyboardNavigation";
+import { mergeRefs, useDeprecateComponent } from "@elliemae/ds-utilities";
+import { describe, PropTypes } from "@elliemae/ds-props-helpers";
+import decorateToolbarChildren from "./decorateToolbarChildren.js";
+import Item from "./ToolbarItem.js";
+import ToolbarGroup from "./ToolbarGroup.js";
+import Divider from "./ToolbarDivider.js";
+import { useKeyboardNavigation } from "./hooks/useKeyboardNavigation.js";
 const blockName = "toolbar";
 const ToolbarContainer = aggregatedClasses("div")(blockName, null, ({ withDepth, alignment, size }) => ({
   "without-depth": !withDepth,
@@ -24,6 +25,7 @@ const DSToolbar = ({
   size = "normal",
   ...otherProps
 }) => {
+  useDeprecateComponent({ componentName: "ds-toolbar", version: "TBD Date: 2023 Q3" });
   const containerRef = useRef(null);
   const { handleOnKeyDown } = useKeyboardNavigation({ containerRef, autoFocusOnMount });
   return /* @__PURE__ */ jsx(

package/dist/esm/deprecated/DSToolbar.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/deprecated/DSToolbar.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useRef } from 'react';\nimport { aggregatedClasses } from '@elliemae/ds-classnames';\nimport { describe, PropTypes, mergeRefs } from '@elliemae/ds-utilities';\nimport decorateToolbarChildren from './decorateToolbarChildren';\nimport Item from './ToolbarItem';\nimport ToolbarGroup from './ToolbarGroup';\nimport Divider from './ToolbarDivider';\nimport { useKeyboardNavigation } from './hooks/useKeyboardNavigation';\n\nconst blockName = 'toolbar';\n\nconst ToolbarContainer = aggregatedClasses('div')(blockName, null, ({ withDepth, alignment, size }) => ({\n  'without-depth': !withDepth,\n  [alignment]: !!alignment,\n  [size]: size,\n}));\n\nconst DSToolbar = ({\n  containerProps = {},\n  innerRef,\n  withDepth = true,\n  alignment = 'right', // left || right\n  autoFocusOnMount = true,\n  children = [],\n  size = 'normal',\n  ...otherProps\n}) => {\n  const containerRef = useRef<HTMLDivElement | null>(null);\n\n  const { handleOnKeyDown } = useKeyboardNavigation({ containerRef, autoFocusOnMount });\n\n  return (\n    <ToolbarContainer\n      {...containerProps}\n      {...otherProps}\n      classProps={{ withDepth, alignment, size }}\n      innerRef={mergeRefs(innerRef, containerRef)}\n      onKeyDown={handleOnKeyDown}\n    >\n      {decorateToolbarChildren(children)}\n    </ToolbarContainer>\n  );\n};\n\nconst toolbarProps = {\n  containerProps: PropTypes.object.description('Set of Properties attached to the main container'),\n  withDepth: PropTypes.bool.description('Shows a shadow rear the toolbar').defaultValue(true),\n  alignment: PropTypes.oneOf(['right', 'left'])\n    .description('Aligns the toolbar to the left or right')\n    .defaultValue('right'),\n  size: PropTypes.oneOf(['normal', 'compact']).description('Toolbar size').defaultValue('normal'),\n  autoFocusOnMount: PropTypes.bool\n    .description('Wheter to focus the component when it mounts or not')\n    .defaultValue(true),\n  children: PropTypes.oneOfType([PropTypes.array, PropTypes.func, PropTypes.node]).description('Toolbar items')\n    .isRequired,\n  innerRef: PropTypes.object.description('Ref to the Toolbar container element'),\n};\n\nDSToolbar.propTypes = toolbarProps;\nDSToolbar.displayName = 'DSToolbar';\nconst ToolbarWithSchema = describe(DSToolbar);\nToolbarWithSchema.propTypes = toolbarProps;\n\nexport { DSToolbar, Item as ToolbarItem, ToolbarGroup, Divider as ToolbarDivider, ToolbarWithSchema };\n\nexport default DSToolbar;\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACgCnB;AAhCJ,SAAgB,cAAc;AAC9B,SAAS,yBAAyB;AAClC,SAAS,UAAU,WAAW,iBAAiB;AAC/C,OAAO,6BAA6B;AACpC,OAAO,UAAU;AACjB,OAAO,kBAAkB;AACzB,OAAO,aAAa;AACpB,SAAS,6BAA6B;AAEtC,MAAM,YAAY;AAElB,MAAM,mBAAmB,kBAAkB,KAAK,EAAE,WAAW,MAAM,CAAC,EAAE,WAAW,WAAW,KAAK,OAAO;AAAA,EACtG,iBAAiB,CAAC;AAAA,EAClB,CAAC,YAAY,CAAC,CAAC;AAAA,EACf,CAAC,OAAO;AACV,EAAE;AAEF,MAAM,YAAY,CAAC;AAAA,EACjB,iBAAiB,CAAC;AAAA,EAClB;AAAA,EACA,YAAY;AAAA,EACZ,YAAY;AAAA,EACZ,mBAAmB;AAAA,EACnB,WAAW,CAAC;AAAA,EACZ,OAAO;AAAA,KACJ;AACL,MAAM;AACJ,QAAM,eAAe,OAA8B,IAAI;AAEvD,QAAM,EAAE,gBAAgB,IAAI,sBAAsB,EAAE,cAAc,iBAAiB,CAAC;AAEpF,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACH,GAAG;AAAA,MACJ,YAAY,EAAE,WAAW,WAAW,KAAK;AAAA,MACzC,UAAU,UAAU,UAAU,YAAY;AAAA,MAC1C,WAAW;AAAA,MAEV,kCAAwB,QAAQ;AAAA;AAAA,EACnC;AAEJ;AAEA,MAAM,eAAe;AAAA,EACnB,gBAAgB,UAAU,OAAO,YAAY,kDAAkD;AAAA,EAC/F,WAAW,UAAU,KAAK,YAAY,iCAAiC,EAAE,aAAa,IAAI;AAAA,EAC1F,WAAW,UAAU,MAAM,CAAC,SAAS,MAAM,CAAC,EACzC,YAAY,yCAAyC,EACrD,aAAa,OAAO;AAAA,EACvB,MAAM,UAAU,MAAM,CAAC,UAAU,SAAS,CAAC,EAAE,YAAY,cAAc,EAAE,aAAa,QAAQ;AAAA,EAC9F,kBAAkB,UAAU,KACzB,YAAY,qDAAqD,EACjE,aAAa,IAAI;AAAA,EACpB,UAAU,UAAU,UAAU,CAAC,UAAU,OAAO,UAAU,MAAM,UAAU,IAAI,CAAC,EAAE,YAAY,eAAe,EACzG;AAAA,EACH,UAAU,UAAU,OAAO,YAAY,sCAAsC;AAC/E;AAEA,UAAU,YAAY;AACtB,UAAU,cAAc;AACxB,MAAM,oBAAoB,SAAS,SAAS;AAC5C,kBAAkB,YAAY;AAI9B,IAAO,oBAAQ;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable eslint-comments/no-unlimited-disable */\n/* eslint-disable */\n// eslint-disable-next-line @typescript-eslint/ban-ts-comment\n// @ts-ignore\nimport React, { useRef } from 'react';\nimport { aggregatedClasses } from '@elliemae/ds-classnames';\nimport { mergeRefs, useDeprecateComponent } from '@elliemae/ds-utilities';\nimport { describe, PropTypes } from '@elliemae/ds-props-helpers';\nimport decorateToolbarChildren from './decorateToolbarChildren.js';\nimport Item from './ToolbarItem.js';\nimport ToolbarGroup from './ToolbarGroup.js';\nimport Divider from './ToolbarDivider.js';\nimport { useKeyboardNavigation } from './hooks/useKeyboardNavigation.js';\n\nconst blockName = 'toolbar';\n\nconst ToolbarContainer = aggregatedClasses('div')(blockName, null, ({ withDepth, alignment, size }) => ({\n  'without-depth': !withDepth,\n  [alignment]: !!alignment,\n  [size]: size,\n}));\n\nconst DSToolbar = ({\n  containerProps = {},\n  innerRef,\n  withDepth = true,\n  alignment = 'right', // left || right\n  autoFocusOnMount = true,\n  children = [],\n  size = 'normal',\n  ...otherProps\n}) => {\n  useDeprecateComponent({ componentName: 'ds-toolbar', version: 'TBD Date: 2023 Q3' });\n\n  const containerRef = useRef<HTMLDivElement | null>(null);\n\n  const { handleOnKeyDown } = useKeyboardNavigation({ containerRef, autoFocusOnMount });\n\n  return (\n    <ToolbarContainer\n      {...containerProps}\n      {...otherProps}\n      classProps={{ withDepth, alignment, size }}\n      innerRef={mergeRefs(innerRef, containerRef)}\n      onKeyDown={handleOnKeyDown}\n    >\n      {decorateToolbarChildren(children)}\n    </ToolbarContainer>\n  );\n};\n\nconst toolbarProps = {\n  containerProps: PropTypes.object.description('Set of Properties attached to the main container'),\n  withDepth: PropTypes.bool.description('Shows a shadow rear the toolbar').defaultValue(true),\n  alignment: PropTypes.oneOf(['right', 'left'])\n    .description('Aligns the toolbar to the left or right')\n    .defaultValue('right'),\n  size: PropTypes.oneOf(['normal', 'compact']).description('Toolbar size').defaultValue('normal'),\n  autoFocusOnMount: PropTypes.bool\n    .description('Wheter to focus the component when it mounts or not')\n    .defaultValue(true),\n  children: PropTypes.oneOfType([PropTypes.array, PropTypes.func, PropTypes.node]).description('Toolbar items')\n    .isRequired,\n  innerRef: PropTypes.object.description('Ref to the Toolbar container element'),\n};\n\nDSToolbar.propTypes = toolbarProps;\nDSToolbar.displayName = 'DSToolbar';\nconst ToolbarWithSchema = describe(DSToolbar);\nToolbarWithSchema.propTypes = toolbarProps;\n\nexport { DSToolbar, Item as ToolbarItem, ToolbarGroup, Divider as ToolbarDivider, ToolbarWithSchema };\n\nexport default DSToolbar;\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACuCnB;AAnCJ,SAAgB,cAAc;AAC9B,SAAS,yBAAyB;AAClC,SAAS,WAAW,6BAA6B;AACjD,SAAS,UAAU,iBAAiB;AACpC,OAAO,6BAA6B;AACpC,OAAO,UAAU;AACjB,OAAO,kBAAkB;AACzB,OAAO,aAAa;AACpB,SAAS,6BAA6B;AAEtC,MAAM,YAAY;AAElB,MAAM,mBAAmB,kBAAkB,KAAK,EAAE,WAAW,MAAM,CAAC,EAAE,WAAW,WAAW,KAAK,OAAO;AAAA,EACtG,iBAAiB,CAAC;AAAA,EAClB,CAAC,YAAY,CAAC,CAAC;AAAA,EACf,CAAC,OAAO;AACV,EAAE;AAEF,MAAM,YAAY,CAAC;AAAA,EACjB,iBAAiB,CAAC;AAAA,EAClB;AAAA,EACA,YAAY;AAAA,EACZ,YAAY;AAAA,EACZ,mBAAmB;AAAA,EACnB,WAAW,CAAC;AAAA,EACZ,OAAO;AAAA,KACJ;AACL,MAAM;AACJ,wBAAsB,EAAE,eAAe,cAAc,SAAS,oBAAoB,CAAC;AAEnF,QAAM,eAAe,OAA8B,IAAI;AAEvD,QAAM,EAAE,gBAAgB,IAAI,sBAAsB,EAAE,cAAc,iBAAiB,CAAC;AAEpF,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACH,GAAG;AAAA,MACJ,YAAY,EAAE,WAAW,WAAW,KAAK;AAAA,MACzC,UAAU,UAAU,UAAU,YAAY;AAAA,MAC1C,WAAW;AAAA,MAEV,kCAAwB,QAAQ;AAAA;AAAA,EACnC;AAEJ;AAEA,MAAM,eAAe;AAAA,EACnB,gBAAgB,UAAU,OAAO,YAAY,kDAAkD;AAAA,EAC/F,WAAW,UAAU,KAAK,YAAY,iCAAiC,EAAE,aAAa,IAAI;AAAA,EAC1F,WAAW,UAAU,MAAM,CAAC,SAAS,MAAM,CAAC,EACzC,YAAY,yCAAyC,EACrD,aAAa,OAAO;AAAA,EACvB,MAAM,UAAU,MAAM,CAAC,UAAU,SAAS,CAAC,EAAE,YAAY,cAAc,EAAE,aAAa,QAAQ;AAAA,EAC9F,kBAAkB,UAAU,KACzB,YAAY,qDAAqD,EACjE,aAAa,IAAI;AAAA,EACpB,UAAU,UAAU,UAAU,CAAC,UAAU,OAAO,UAAU,MAAM,UAAU,IAAI,CAAC,EAAE,YAAY,eAAe,EACzG;AAAA,EACH,UAAU,UAAU,OAAO,YAAY,sCAAsC;AAC/E;AAEA,UAAU,YAAY;AACtB,UAAU,cAAc;AACxB,MAAM,oBAAoB,SAAS,SAAS;AAC5C,kBAAkB,YAAY;AAI9B,IAAO,oBAAQ;",
   "names": []
 }

package/dist/esm/deprecated/ToolbarDivider.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/deprecated/ToolbarDivider.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { aggregatedClasses } from '@elliemae/ds-classnames';\n\nconst blockName = 'toolbar';\n\nconst ToolbarDivider = aggregatedClasses('div')(blockName, 'divider');\n\nToolbarDivider.displayName = 'ToolbarDivider';\n\nexport default ToolbarDivider;\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,yBAAyB;AAElC,MAAM,YAAY;AAElB,MAAM,iBAAiB,kBAAkB,KAAK,EAAE,WAAW,SAAS;AAEpE,eAAe,cAAc;AAE7B,IAAO,yBAAQ;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable eslint-comments/no-unlimited-disable */\n/* eslint-disable */\n// eslint-disable-next-line @typescript-eslint/ban-ts-comment\n// @ts-ignore\nimport { aggregatedClasses } from '@elliemae/ds-classnames';\n\nconst blockName = 'toolbar';\n\nconst ToolbarDivider = aggregatedClasses('div')(blockName, 'divider');\n\nToolbarDivider.displayName = 'ToolbarDivider';\n\nexport default ToolbarDivider;\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACIvB,SAAS,yBAAyB;AAElC,MAAM,YAAY;AAElB,MAAM,iBAAiB,kBAAkB,KAAK,EAAE,WAAW,SAAS;AAEpE,eAAe,cAAc;AAE7B,IAAO,yBAAQ;",
   "names": []
 }

package/dist/esm/deprecated/ToolbarGroup.js

@@ -2,7 +2,7 @@ import * as React from "react";
 import { jsx } from "react/jsx-runtime";
 import PropTypes from "prop-types";
 import { aggregatedClasses } from "@elliemae/ds-classnames";
-import decorateToolbarChildren from "./decorateToolbarChildren";
+import decorateToolbarChildren from "./decorateToolbarChildren.js";
 const blockName = "toolbar-group";
 const ToolbarGroupContainer = aggregatedClasses("div")(blockName, null, ({ space }) => ({
   [`space-${space}`]: !!space

package/dist/esm/deprecated/ToolbarGroup.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/deprecated/ToolbarGroup.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport PropTypes from 'prop-types';\nimport { aggregatedClasses } from '@elliemae/ds-classnames';\nimport decorateToolbarChildren from './decorateToolbarChildren';\n\nconst blockName = 'toolbar-group';\n\nconst ToolbarGroupContainer = aggregatedClasses('div')(blockName, null, ({ space }) => ({\n  [`space-${space}`]: !!space,\n}));\n\nconst ToolbarGroup = ({ children, size, space = 0 }) => (\n  <ToolbarGroupContainer classProps={{ space }}>{decorateToolbarChildren(children, { size })}</ToolbarGroupContainer>\n);\n\nToolbarGroup.propTypes = {\n  children: PropTypes.any,\n  size: PropTypes.number,\n  space: PropTypes.number,\n};\n\nexport default ToolbarGroup;\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACYrB;AAXF,OAAO,eAAe;AACtB,SAAS,yBAAyB;AAClC,OAAO,6BAA6B;AAEpC,MAAM,YAAY;AAElB,MAAM,wBAAwB,kBAAkB,KAAK,EAAE,WAAW,MAAM,CAAC,EAAE,MAAM,OAAO;AAAA,EACtF,CAAC,SAAS,UAAU,CAAC,CAAC;AACxB,EAAE;AAEF,MAAM,eAAe,CAAC,EAAE,UAAU,MAAM,QAAQ,EAAE,MAChD,oBAAC,yBAAsB,YAAY,EAAE,MAAM,GAAI,kCAAwB,UAAU,EAAE,KAAK,CAAC,GAAE;AAG7F,aAAa,YAAY;AAAA,EACvB,UAAU,UAAU;AAAA,EACpB,MAAM,UAAU;AAAA,EAChB,OAAO,UAAU;AACnB;AAEA,IAAO,uBAAQ;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable eslint-comments/no-unlimited-disable */\n/* eslint-disable */\n// eslint-disable-next-line @typescript-eslint/ban-ts-comment\n// @ts-ignore\nimport React from 'react';\nimport PropTypes from 'prop-types';\nimport { aggregatedClasses } from '@elliemae/ds-classnames';\nimport decorateToolbarChildren from './decorateToolbarChildren.js';\n\nconst blockName = 'toolbar-group';\n\nconst ToolbarGroupContainer = aggregatedClasses('div')(blockName, null, ({ space }) => ({\n  [`space-${space}`]: !!space,\n}));\n\nconst ToolbarGroup = ({ children, size, space = 0 }) => (\n  <ToolbarGroupContainer classProps={{ space }}>{decorateToolbarChildren(children, { size })}</ToolbarGroupContainer>\n);\n\nToolbarGroup.propTypes = {\n  children: PropTypes.any,\n  size: PropTypes.number,\n  space: PropTypes.number,\n};\n\nexport default ToolbarGroup;\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACgBrB;AAXF,OAAO,eAAe;AACtB,SAAS,yBAAyB;AAClC,OAAO,6BAA6B;AAEpC,MAAM,YAAY;AAElB,MAAM,wBAAwB,kBAAkB,KAAK,EAAE,WAAW,MAAM,CAAC,EAAE,MAAM,OAAO;AAAA,EACtF,CAAC,SAAS,UAAU,CAAC,CAAC;AACxB,EAAE;AAEF,MAAM,eAAe,CAAC,EAAE,UAAU,MAAM,QAAQ,EAAE,MAChD,oBAAC,yBAAsB,YAAY,EAAE,MAAM,GAAI,kCAAwB,UAAU,EAAE,KAAK,CAAC,GAAE;AAG7F,aAAa,YAAY;AAAA,EACvB,UAAU,UAAU;AAAA,EACpB,MAAM,UAAU;AAAA,EAChB,OAAO,UAAU;AACnB;AAEA,IAAO,uBAAQ;",
   "names": []
 }

package/dist/esm/deprecated/ToolbarItem.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/deprecated/ToolbarItem.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useState } from 'react';\nimport PropTypes from 'prop-types';\nimport { useFocusGroupWithState } from '@elliemae/ds-shared';\nimport { DSButtonV2 } from '@elliemae/ds-button';\nimport { PopperPositions as Position } from '@elliemae/ds-popper';\n\nconst ToolbarItem = ({ icon, labelText, menu = undefined, containerProps = {}, ...otherProps }) => {\n  const [ref, setRef] = useState(null);\n\n  useFocusGroupWithState(ref);\n  const btn = (\n    <DSButtonV2 {...otherProps} buttonType=\"icon\" innerRef={(r) => setRef(r)} labelText={labelText} {...containerProps}>\n      {icon}\n    </DSButtonV2>\n  );\n  if (menu) {\n    return React.cloneElement(menu, {\n      ...menu.props,\n      placement: Position.BOTTOM_END,\n      triggerComponent: btn,\n    });\n  }\n  return btn;\n};\n\nToolbarItem.displayName = 'ToolbarItem';\n\nToolbarItem.propTypes = {\n  icon: PropTypes.element,\n  labelText: PropTypes.string,\n};\n\nexport default ToolbarItem;\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACWnB;AAXJ,OAAOA,UAAS,gBAAgB;AAChC,OAAO,eAAe;AACtB,SAAS,8BAA8B;AACvC,SAAS,kBAAkB;AAC3B,SAAS,mBAAmB,gBAAgB;AAE5C,MAAM,cAAc,CAAC,EAAE,MAAM,WAAW,OAAO,QAAW,iBAAiB,CAAC,MAAM,WAAW,MAAM;AACjG,QAAM,CAAC,KAAK,MAAM,IAAI,SAAS,IAAI;AAEnC,yBAAuB,GAAG;AAC1B,QAAM,MACJ,oBAAC,cAAY,GAAG,YAAY,YAAW,QAAO,UAAU,CAAC,MAAM,OAAO,CAAC,GAAG,WAAuB,GAAG,gBACjG,gBACH;AAEF,MAAI,MAAM;AACR,WAAOA,OAAM,aAAa,MAAM;AAAA,MAC9B,GAAG,KAAK;AAAA,MACR,WAAW,SAAS;AAAA,MACpB,kBAAkB;AAAA,IACpB,CAAC;AAAA,EACH;AACA,SAAO;AACT;AAEA,YAAY,cAAc;AAE1B,YAAY,YAAY;AAAA,EACtB,MAAM,UAAU;AAAA,EAChB,WAAW,UAAU;AACvB;AAEA,IAAO,sBAAQ;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable eslint-comments/no-unlimited-disable */\n/* eslint-disable */\n// eslint-disable-next-line @typescript-eslint/ban-ts-comment\n// @ts-ignore\nimport React, { useState } from 'react';\nimport PropTypes from 'prop-types';\nimport { useFocusGroupWithState } from '@elliemae/ds-shared';\nimport { DSButtonV2 } from '@elliemae/ds-button';\nimport { PopperPositions as Position } from '@elliemae/ds-popper';\n\nconst ToolbarItem = ({ icon, labelText, menu = undefined, containerProps = {}, ...otherProps }) => {\n  const [ref, setRef] = useState(null);\n\n  useFocusGroupWithState(ref);\n  const btn = (\n    <DSButtonV2 {...otherProps} buttonType=\"icon\" innerRef={(r) => setRef(r)} labelText={labelText} {...containerProps}>\n      {icon}\n    </DSButtonV2>\n  );\n  if (menu) {\n    return React.cloneElement(menu, {\n      ...menu.props,\n      placement: Position.BOTTOM_END,\n      triggerComponent: btn,\n    });\n  }\n  return btn;\n};\n\nToolbarItem.displayName = 'ToolbarItem';\n\nToolbarItem.propTypes = {\n  icon: PropTypes.element,\n  labelText: PropTypes.string,\n};\n\nexport default ToolbarItem;\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACenB;AAXJ,OAAOA,UAAS,gBAAgB;AAChC,OAAO,eAAe;AACtB,SAAS,8BAA8B;AACvC,SAAS,kBAAkB;AAC3B,SAAS,mBAAmB,gBAAgB;AAE5C,MAAM,cAAc,CAAC,EAAE,MAAM,WAAW,OAAO,QAAW,iBAAiB,CAAC,MAAM,WAAW,MAAM;AACjG,QAAM,CAAC,KAAK,MAAM,IAAI,SAAS,IAAI;AAEnC,yBAAuB,GAAG;AAC1B,QAAM,MACJ,oBAAC,cAAY,GAAG,YAAY,YAAW,QAAO,UAAU,CAAC,MAAM,OAAO,CAAC,GAAG,WAAuB,GAAG,gBACjG,gBACH;AAEF,MAAI,MAAM;AACR,WAAOA,OAAM,aAAa,MAAM;AAAA,MAC9B,GAAG,KAAK;AAAA,MACR,WAAW,SAAS;AAAA,MACpB,kBAAkB;AAAA,IACpB,CAAC;AAAA,EACH;AACA,SAAO;AACT;AAEA,YAAY,cAAc;AAE1B,YAAY,YAAY;AAAA,EACtB,MAAM,UAAU;AAAA,EAChB,WAAW,UAAU;AACvB;AAEA,IAAO,sBAAQ;",
   "names": ["React"]
 }

package/dist/esm/deprecated/decorateToolbarChildren.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/deprecated/decorateToolbarChildren.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { cloneElement } from 'react';\n\nexport default (children, extraProps = {}) =>\n  React.Children.map(\n    children,\n    (component) =>\n      component\n        ? cloneElement(component, {\n            ...extraProps,\n            ...component.props,\n            className: `${component.props.className} toolbar-item`,\n          })\n        : component,\n    null,\n  );\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACAvB,OAAOA,UAAS,oBAAoB;AAEpC,IAAO,kCAAQ,CAAC,UAAU,aAAa,CAAC,MACtCA,OAAM,SAAS;AAAA,EACb;AAAA,EACA,CAAC,cACC,YACI,aAAa,WAAW;AAAA,IACtB,GAAG;AAAA,IACH,GAAG,UAAU;AAAA,IACb,WAAW,GAAG,UAAU,MAAM;AAAA,EAChC,CAAC,IACD;AAAA,EACN;AACF;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable eslint-comments/no-unlimited-disable */\n/* eslint-disable */\n// eslint-disable-next-line @typescript-eslint/ban-ts-comment\n// @ts-ignore\nimport React, { cloneElement } from 'react';\n\nexport default (children, extraProps = {}) =>\n  React.Children.map(\n    children,\n    (component) =>\n      component\n        ? cloneElement(component, {\n            ...extraProps,\n            ...component.props,\n            className: `${component.props.className} toolbar-item`,\n          })\n        : component,\n    null,\n  );\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACIvB,OAAOA,UAAS,oBAAoB;AAEpC,IAAO,kCAAQ,CAAC,UAAU,aAAa,CAAC,MACtCA,OAAM,SAAS;AAAA,EACb;AAAA,EACA,CAAC,cACC,YACI,aAAa,WAAW;AAAA,IACtB,GAAG;AAAA,IACH,GAAG,UAAU;AAAA,IACb,WAAW,GAAG,UAAU,MAAM;AAAA,EAChC,CAAC,IACD;AAAA,EACN;AACF;",
   "names": ["React"]
 }

package/dist/esm/deprecated/hooks/useKeyboardNavigation.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/deprecated/hooks/useKeyboardNavigation.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import type React from 'react';\nimport { useRef, useEffect, useCallback } from 'react';\n\ninterface useKeyboardNavigationT {\n  containerRef: React.MutableRefObject<HTMLDivElement | null>;\n  autoFocusOnMount: boolean;\n}\n\n// Toolbar should not allow to use Tab/Shift+Tab to navigate between ToolbarItems.\n// Tab/Shift+Tab should be only used once to enter the whole controller.\n// Toolbars should be only navigable with Arrows to follow correct a11y.\n// https://www.w3.org/TR/wai-aria-practices/examples/toolbar/toolbar.html\n\nexport const useKeyboardNavigation = ({ containerRef, autoFocusOnMount }: useKeyboardNavigationT) => {\n  const allChildrenButtonRef = useRef<NodeListOf<HTMLButtonElement> | null>(null);\n\n  useEffect(() => {\n    if (containerRef.current) {\n      allChildrenButtonRef.current = containerRef.current.querySelectorAll('button');\n      // allChildrenButtonRef.current.forEach((button, index) => {\n      //   if (index !== 0) {\n      //     button.setAttribute('tabindex', '-1');\n      //   }\n      // });\n    }\n\n    if (autoFocusOnMount) {\n      setTimeout(() => allChildrenButtonRef.current?.[0].focus());\n    }\n\n    // return () => {\n    //   allChildrenButtonRef.current?.forEach((button, index) => {\n    //     if (index !== 0) {\n    //       button.setAttribute('tabindex', '');\n    //     }\n    //   });\n    // };\n  }, [autoFocusOnMount]);\n\n  const handleOnKeyDown = useCallback((e) => {\n    if (allChildrenButtonRef.current) {\n      const lastButton = allChildrenButtonRef.current[allChildrenButtonRef.current?.length - 1];\n      const firstButton = allChildrenButtonRef.current[0];\n\n      if (e.key === 'ArrowRight') {\n        e.preventDefault();\n        if (e.target !== lastButton) {\n          e.target.nextSibling.focus();\n        } else {\n          firstButton.focus();\n        }\n      }\n      if (e.key === 'ArrowLeft') {\n        e.preventDefault();\n        if (e.target !== firstButton) {\n          e.target.previousSibling.focus();\n        } else {\n          lastButton.focus();\n        }\n      }\n    }\n  }, []);\n\n  return {\n    handleOnKeyDown,\n  };\n};\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACCvB,SAAS,QAAQ,WAAW,mBAAmB;AAYxC,MAAM,wBAAwB,CAAC,EAAE,cAAc,iBAAiB,MAA8B;AACnG,QAAM,uBAAuB,OAA6C,IAAI;AAE9E,YAAU,MAAM;AACd,QAAI,aAAa,SAAS;AACxB,2BAAqB,UAAU,aAAa,QAAQ,iBAAiB,QAAQ;AAAA,IAM/E;AAEA,QAAI,kBAAkB;AACpB,iBAAW,MAAM,qBAAqB,UAAU,GAAG,MAAM,CAAC;AAAA,IAC5D;AAAA,EASF,GAAG,CAAC,gBAAgB,CAAC;AAErB,QAAM,kBAAkB,YAAY,CAAC,MAAM;AACzC,QAAI,qBAAqB,SAAS;AAChC,YAAM,aAAa,qBAAqB,QAAQ,qBAAqB,SAAS,SAAS;AACvF,YAAM,cAAc,qBAAqB,QAAQ;AAEjD,UAAI,EAAE,QAAQ,cAAc;AAC1B,UAAE,eAAe;AACjB,YAAI,EAAE,WAAW,YAAY;AAC3B,YAAE,OAAO,YAAY,MAAM;AAAA,QAC7B,OAAO;AACL,sBAAY,MAAM;AAAA,QACpB;AAAA,MACF;AACA,UAAI,EAAE,QAAQ,aAAa;AACzB,UAAE,eAAe;AACjB,YAAI,EAAE,WAAW,aAAa;AAC5B,YAAE,OAAO,gBAAgB,MAAM;AAAA,QACjC,OAAO;AACL,qBAAW,MAAM;AAAA,QACnB;AAAA,MACF;AAAA,IACF;AAAA,EACF,GAAG,CAAC,CAAC;AAEL,SAAO;AAAA,IACL;AAAA,EACF;AACF;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable eslint-comments/no-unlimited-disable */\n/* eslint-disable */\n// eslint-disable-next-line @typescript-eslint/ban-ts-comment\n// @ts-ignore\nimport type React from 'react';\nimport { useRef, useEffect, useCallback } from 'react';\n\ninterface useKeyboardNavigationT {\n  containerRef: React.MutableRefObject<HTMLDivElement | null>;\n  autoFocusOnMount: boolean;\n}\n\n// Toolbar should not allow to use Tab/Shift+Tab to navigate between ToolbarItems.\n// Tab/Shift+Tab should be only used once to enter the whole controller.\n// Toolbars should be only navigable with Arrows to follow correct a11y.\n// https://www.w3.org/TR/wai-aria-practices/examples/toolbar/toolbar.html\n\nexport const useKeyboardNavigation = ({ containerRef, autoFocusOnMount }: useKeyboardNavigationT) => {\n  const allChildrenButtonRef = useRef<NodeListOf<HTMLButtonElement> | null>(null);\n\n  useEffect(() => {\n    if (containerRef.current) {\n      allChildrenButtonRef.current = containerRef.current.querySelectorAll('button');\n      // allChildrenButtonRef.current.forEach((button, index) => {\n      //   if (index !== 0) {\n      //     button.setAttribute('tabindex', '-1');\n      //   }\n      // });\n    }\n\n    if (autoFocusOnMount) {\n      setTimeout(() => allChildrenButtonRef.current?.[0].focus());\n    }\n\n    // return () => {\n    //   allChildrenButtonRef.current?.forEach((button, index) => {\n    //     if (index !== 0) {\n    //       button.setAttribute('tabindex', '');\n    //     }\n    //   });\n    // };\n  }, [autoFocusOnMount]);\n\n  const handleOnKeyDown = useCallback((e) => {\n    if (allChildrenButtonRef.current) {\n      const lastButton = allChildrenButtonRef.current[allChildrenButtonRef.current?.length - 1];\n      const firstButton = allChildrenButtonRef.current[0];\n\n      if (e.key === 'ArrowRight') {\n        e.preventDefault();\n        if (e.target !== lastButton) {\n          e.target.nextSibling.focus();\n        } else {\n          firstButton.focus();\n        }\n      }\n      if (e.key === 'ArrowLeft') {\n        e.preventDefault();\n        if (e.target !== firstButton) {\n          e.target.previousSibling.focus();\n        } else {\n          lastButton.focus();\n        }\n      }\n    }\n  }, []);\n\n  return {\n    handleOnKeyDown,\n  };\n};\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACKvB,SAAS,QAAQ,WAAW,mBAAmB;AAYxC,MAAM,wBAAwB,CAAC,EAAE,cAAc,iBAAiB,MAA8B;AACnG,QAAM,uBAAuB,OAA6C,IAAI;AAE9E,YAAU,MAAM;AACd,QAAI,aAAa,SAAS;AACxB,2BAAqB,UAAU,aAAa,QAAQ,iBAAiB,QAAQ;AAAA,IAM/E;AAEA,QAAI,kBAAkB;AACpB,iBAAW,MAAM,qBAAqB,UAAU,GAAG,MAAM,CAAC;AAAA,IAC5D;AAAA,EASF,GAAG,CAAC,gBAAgB,CAAC;AAErB,QAAM,kBAAkB,YAAY,CAAC,MAAM;AACzC,QAAI,qBAAqB,SAAS;AAChC,YAAM,aAAa,qBAAqB,QAAQ,qBAAqB,SAAS,SAAS;AACvF,YAAM,cAAc,qBAAqB,QAAQ;AAEjD,UAAI,EAAE,QAAQ,cAAc;AAC1B,UAAE,eAAe;AACjB,YAAI,EAAE,WAAW,YAAY;AAC3B,YAAE,OAAO,YAAY,MAAM;AAAA,QAC7B,OAAO;AACL,sBAAY,MAAM;AAAA,QACpB;AAAA,MACF;AACA,UAAI,EAAE,QAAQ,aAAa;AACzB,UAAE,eAAe;AACjB,YAAI,EAAE,WAAW,aAAa;AAC5B,YAAE,OAAO,gBAAgB,MAAM;AAAA,QACjC,OAAO;AACL,qBAAW,MAAM;AAAA,QACnB;AAAA,MACF;AAAA,IACF;AAAA,EACF,GAAG,CAAC,CAAC;AAEL,SAAO;AAAA,IACL;AAAA,EACF;AACF;",
   "names": []
 }

package/dist/esm/deprecated/index.js

@@ -1,6 +1,6 @@
 import * as React from "react";
-export * from "./DSToolbar";
-import { default as default2 } from "./DSToolbar";
+export * from "./DSToolbar.js";
+import { default as default2 } from "./DSToolbar.js";
 export {
   default2 as default
 };

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/deprecated/index.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable import/export */\nexport * from './DSToolbar';\n\nexport { default } from './DSToolbar';\n"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable import/export */\nexport * from './DSToolbar.js';\n\nexport { default } from './DSToolbar.js';\n"],
   "mappings": "AAAA,YAAY,WAAW;ACCvB,cAAc;AAEd,SAAS,WAAAA,gBAAe;",
   "names": ["default"]
 }

package/dist/esm/index.js

@@ -1,9 +1,9 @@
 import * as React from "react";
-export * from "./deprecated";
-import { default as default2 } from "./deprecated";
-export * from "./DSToolbarV2";
-export * from "./DSToolbarItemV2";
-export * from "./DSToolbarSeparatorV2";
+export * from "./deprecated/index.js";
+import { default as default2 } from "./deprecated/index.js";
+export * from "./DSToolbarV2.js";
+export * from "./DSToolbarItemV2.js";
+export * from "./DSToolbarSeparatorV2.js";
 export {
   default2 as default
 };

package/dist/esm/index.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/index.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "export * from './deprecated';\nexport { default } from './deprecated';\nexport * from './DSToolbarV2';\nexport * from './DSToolbarItemV2';\nexport * from './DSToolbarSeparatorV2';\n"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "export * from './deprecated/index.js';\nexport { default } from './deprecated/index.js';\nexport * from './DSToolbarV2.js';\nexport * from './DSToolbarItemV2.js';\nexport * from './DSToolbarSeparatorV2.js';\n"],
   "mappings": "AAAA,YAAY,WAAW;ACAvB,cAAc;AACd,SAAS,WAAAA,gBAAe;AACxB,cAAc;AACd,cAAc;AACd,cAAc;",
   "names": ["default"]
 }

package/dist/esm/package.json

@@ -0,0 +1,7 @@
+{
+  "type": "module",
+  "sideEffects": [
+    "*.css",
+    "*.scss"
+  ]
+}

package/dist/esm/react-desc-prop-types.js

@@ -1,5 +1,5 @@
 import * as React from "react";
-import { globalAttributesPropTypes, PropTypes } from "@elliemae/ds-utilities";
+import { globalAttributesPropTypes, PropTypes } from "@elliemae/ds-props-helpers";
 const defaultItemProps = {
   render: () => {
   },

package/dist/esm/react-desc-prop-types.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/react-desc-prop-types.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { globalAttributesPropTypes, PropTypes } from '@elliemae/ds-utilities';\n\nexport declare namespace DSToolbarT {\n  export interface Props {\n    alignment?: 'left' | 'right';\n    withDepth?: boolean;\n    compact?: boolean;\n    innerRef?: React.MutableRefObject<HTMLDivElement>;\n    children: React.Component<DSToolbarItemT.Props>;\n  }\n}\n\nexport declare namespace DSToolbarItemT {\n  export type RenderHTMLElementT =\n    | HTMLButtonElement\n    | HTMLInputElement\n    | HTMLTextAreaElement\n    | HTMLSelectElement\n    | HTMLOptionElement;\n  export interface Props {\n    render: (props: { innerRef: React.MutableRefObject<HTMLElement>; tabIndex: number }) => JSX.Element;\n    isFirstItem?: boolean;\n  }\n}\n\nexport const defaultItemProps = {\n  render: () => {},\n  isFirstItem: false,\n};\n\nexport const defaultProps = {\n  alignment: 'right',\n  withDepth: true,\n  compact: false,\n};\n\nexport const DSToolbarV2Schema = {\n  ...globalAttributesPropTypes,\n  alignment: PropTypes.oneOf(['right', 'left'])\n    .description('Whether to align the content left or right')\n    .defaultValue('right'),\n  withDepth: PropTypes.bool.description('Whether to add a box-shadow to the container').defaultValue(true),\n  compact: PropTypes.bool.description('Whether you want the compact version of the toolbar').defaultValue(false),\n  innerRef: PropTypes.oneOfType([PropTypes.func, PropTypes.object]).description('Reference to attach to the wrapper'),\n};\n\nexport const DSToolbarItemV2Schema = {\n  ...globalAttributesPropTypes,\n  render: PropTypes.func.isRequired.description('render function').defaultValue(() => {}),\n  isFirstItem: PropTypes.bool\n    .description(\n      'If true the item will have tab index 0 to be the first element focusable by keyboard on the page load',\n    )\n    .defaultValue(false),\n};\n"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { globalAttributesPropTypes, PropTypes } from '@elliemae/ds-props-helpers';\n\nexport declare namespace DSToolbarT {\n  export interface Props {\n    alignment?: 'left' | 'right';\n    withDepth?: boolean;\n    compact?: boolean;\n    innerRef?: React.MutableRefObject<HTMLDivElement>;\n    children: React.Component<DSToolbarItemT.Props>;\n  }\n}\n\nexport declare namespace DSToolbarItemT {\n  export type RenderHTMLElementT =\n    | HTMLButtonElement\n    | HTMLInputElement\n    | HTMLTextAreaElement\n    | HTMLSelectElement\n    | HTMLOptionElement;\n  export interface Props {\n    render: (props: { innerRef: React.MutableRefObject<HTMLElement>; tabIndex: number }) => JSX.Element;\n    isFirstItem?: boolean;\n  }\n}\n\nexport const defaultItemProps = {\n  render: () => {},\n  isFirstItem: false,\n};\n\nexport const defaultProps = {\n  alignment: 'right',\n  withDepth: true,\n  compact: false,\n};\n\nexport const DSToolbarV2Schema = {\n  ...globalAttributesPropTypes,\n  alignment: PropTypes.oneOf(['right', 'left'])\n    .description('Whether to align the content left or right')\n    .defaultValue('right'),\n  withDepth: PropTypes.bool.description('Whether to add a box-shadow to the container').defaultValue(true),\n  compact: PropTypes.bool.description('Whether you want the compact version of the toolbar').defaultValue(false),\n  innerRef: PropTypes.oneOfType([PropTypes.func, PropTypes.object]).description('Reference to attach to the wrapper'),\n};\n\nexport const DSToolbarItemV2Schema = {\n  ...globalAttributesPropTypes,\n  render: PropTypes.func.isRequired.description('render function').defaultValue(() => {}),\n  isFirstItem: PropTypes.bool\n    .description(\n      'If true the item will have tab index 0 to be the first element focusable by keyboard on the page load',\n    )\n    .defaultValue(false),\n};\n"],
   "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,2BAA2B,iBAAiB;AAyB9C,MAAM,mBAAmB;AAAA,EAC9B,QAAQ,MAAM;AAAA,EAAC;AAAA,EACf,aAAa;AACf;AAEO,MAAM,eAAe;AAAA,EAC1B,WAAW;AAAA,EACX,WAAW;AAAA,EACX,SAAS;AACX;AAEO,MAAM,oBAAoB;AAAA,EAC/B,GAAG;AAAA,EACH,WAAW,UAAU,MAAM,CAAC,SAAS,MAAM,CAAC,EACzC,YAAY,4CAA4C,EACxD,aAAa,OAAO;AAAA,EACvB,WAAW,UAAU,KAAK,YAAY,8CAA8C,EAAE,aAAa,IAAI;AAAA,EACvG,SAAS,UAAU,KAAK,YAAY,qDAAqD,EAAE,aAAa,KAAK;AAAA,EAC7G,UAAU,UAAU,UAAU,CAAC,UAAU,MAAM,UAAU,MAAM,CAAC,EAAE,YAAY,oCAAoC;AACpH;AAEO,MAAM,wBAAwB;AAAA,EACnC,GAAG;AAAA,EACH,QAAQ,UAAU,KAAK,WAAW,YAAY,iBAAiB,EAAE,aAAa,MAAM;AAAA,EAAC,CAAC;AAAA,EACtF,aAAa,UAAU,KACpB;AAAA,IACC;AAAA,EACF,EACC,aAAa,KAAK;AACvB;",
   "names": []
 }

package/dist/esm/useToolbarItemHandlers.js

@@ -1,6 +1,6 @@
 import * as React from "react";
 import { useCallback, useContext } from "react";
-import { DSToolbarV2Context } from "./DSToolbarV2Context";
+import { DSToolbarV2Context } from "./DSToolbarV2Context.js";
 const findInCircularList = (list, from, criteria, step = 1) => {
   for (let i = (from + step + list.length) % list.length; i !== from && from > -1; i = (i + step + list.length) % list.length) {
     if (criteria(list[i]))

package/dist/esm/useToolbarItemHandlers.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/useToolbarItemHandlers.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { useCallback, useContext } from 'react';\nimport { DSToolbarV2Context } from './DSToolbarV2Context';\n\nconst findInCircularList = (\n  list: Element[],\n  from: number,\n  criteria: (item: Element) => boolean,\n  step = 1,\n  // eslint-disable-next-line max-params\n): number => {\n  for (\n    let i = (from + step + list.length) % list.length;\n    i !== from && from > -1;\n    i = (i + step + list.length) % list.length\n  ) {\n    if (criteria(list[i])) return i;\n  }\n  return from; // return same item\n};\n\nexport const useToolbarItemHandlers = (\n  toolbarItemId: string,\n): {\n  onKeyDown: React.KeyboardEventHandler;\n  onFocus: React.FocusEventHandler;\n} => {\n  const { toolbarUid, itemReferences, setDndDraggingItem } = useContext(DSToolbarV2Context);\n\n  const onFocus: React.FocusEventHandler = useCallback(() => {\n    setDndDraggingItem(toolbarItemId);\n  }, [setDndDraggingItem, toolbarItemId]);\n\n  const onKeyDown: React.KeyboardEventHandler = useCallback(\n    (e) => {\n      const toolbarItems = [...document.querySelectorAll(`#${toolbarUid} .ds-toolbar-item`)];\n      let nextToolbarItemIndex = -1;\n      const toolbarItemIndex = toolbarItems.findIndex((domElem) => domElem.id === toolbarItemId);\n\n      const criteria = (item: Element) => {\n        const ref = itemReferences[item.id];\n\n        return !ref.current.disabled;\n      };\n\n      if (['ArrowLeft', 'ArrowRight'].includes(e.code)) {\n        nextToolbarItemIndex = findInCircularList(\n          toolbarItems,\n          toolbarItemIndex,\n          criteria,\n          e.code === 'ArrowLeft' ? -1 : 1,\n        );\n      } else if (e.code === 'Home') {\n        nextToolbarItemIndex = 0;\n      } else if (e.code === 'End') {\n        nextToolbarItemIndex = toolbarItems.length - 1;\n      }\n\n      if (nextToolbarItemIndex >= 0 && nextToolbarItemIndex < toolbarItems.length) {\n        e.preventDefault();\n        e.stopPropagation();\n        const ref = itemReferences[toolbarItems[nextToolbarItemIndex].id];\n        if (ref.current) ref.current.focus();\n      }\n    },\n    [toolbarUid, toolbarItemId, itemReferences],\n  );\n\n  return { onKeyDown, onFocus };\n};\n"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { useCallback, useContext } from 'react';\nimport { DSToolbarV2Context } from './DSToolbarV2Context.js';\n\nconst findInCircularList = (\n  list: Element[],\n  from: number,\n  criteria: (item: Element) => boolean,\n  step = 1,\n  // eslint-disable-next-line max-params\n): number => {\n  for (\n    let i = (from + step + list.length) % list.length;\n    i !== from && from > -1;\n    i = (i + step + list.length) % list.length\n  ) {\n    if (criteria(list[i])) return i;\n  }\n  return from; // return same item\n};\n\nexport const useToolbarItemHandlers = (\n  toolbarItemId: string,\n): {\n  onKeyDown: React.KeyboardEventHandler;\n  onFocus: React.FocusEventHandler;\n} => {\n  const { toolbarUid, itemReferences, setDndDraggingItem } = useContext(DSToolbarV2Context);\n\n  const onFocus: React.FocusEventHandler = useCallback(() => {\n    setDndDraggingItem(toolbarItemId);\n  }, [setDndDraggingItem, toolbarItemId]);\n\n  const onKeyDown: React.KeyboardEventHandler = useCallback(\n    (e) => {\n      const toolbarItems = [...document.querySelectorAll(`#${toolbarUid} .ds-toolbar-item`)];\n      let nextToolbarItemIndex = -1;\n      const toolbarItemIndex = toolbarItems.findIndex((domElem) => domElem.id === toolbarItemId);\n\n      const criteria = (item: Element) => {\n        const ref = itemReferences[item.id];\n\n        return !ref.current.disabled;\n      };\n\n      if (['ArrowLeft', 'ArrowRight'].includes(e.code)) {\n        nextToolbarItemIndex = findInCircularList(\n          toolbarItems,\n          toolbarItemIndex,\n          criteria,\n          e.code === 'ArrowLeft' ? -1 : 1,\n        );\n      } else if (e.code === 'Home') {\n        nextToolbarItemIndex = 0;\n      } else if (e.code === 'End') {\n        nextToolbarItemIndex = toolbarItems.length - 1;\n      }\n\n      if (nextToolbarItemIndex >= 0 && nextToolbarItemIndex < toolbarItems.length) {\n        e.preventDefault();\n        e.stopPropagation();\n        const ref = itemReferences[toolbarItems[nextToolbarItemIndex].id];\n        if (ref.current) ref.current.focus();\n      }\n    },\n    [toolbarUid, toolbarItemId, itemReferences],\n  );\n\n  return { onKeyDown, onFocus };\n};\n"],
   "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,aAAa,kBAAkB;AACxC,SAAS,0BAA0B;AAEnC,MAAM,qBAAqB,CACzB,MACA,MACA,UACA,OAAO,MAEI;AACX,WACM,KAAK,OAAO,OAAO,KAAK,UAAU,KAAK,QAC3C,MAAM,QAAQ,OAAO,IACrB,KAAK,IAAI,OAAO,KAAK,UAAU,KAAK,QACpC;AACA,QAAI,SAAS,KAAK,EAAE;AAAG,aAAO;AAAA,EAChC;AACA,SAAO;AACT;AAEO,MAAM,yBAAyB,CACpC,kBAIG;AACH,QAAM,EAAE,YAAY,gBAAgB,mBAAmB,IAAI,WAAW,kBAAkB;AAExF,QAAM,UAAmC,YAAY,MAAM;AACzD,uBAAmB,aAAa;AAAA,EAClC,GAAG,CAAC,oBAAoB,aAAa,CAAC;AAEtC,QAAM,YAAwC;AAAA,IAC5C,CAAC,MAAM;AACL,YAAM,eAAe,CAAC,GAAG,SAAS,iBAAiB,IAAI,6BAA6B,CAAC;AACrF,UAAI,uBAAuB;AAC3B,YAAM,mBAAmB,aAAa,UAAU,CAAC,YAAY,QAAQ,OAAO,aAAa;AAEzF,YAAM,WAAW,CAAC,SAAkB;AAClC,cAAM,MAAM,eAAe,KAAK;AAEhC,eAAO,CAAC,IAAI,QAAQ;AAAA,MACtB;AAEA,UAAI,CAAC,aAAa,YAAY,EAAE,SAAS,EAAE,IAAI,GAAG;AAChD,+BAAuB;AAAA,UACrB;AAAA,UACA;AAAA,UACA;AAAA,UACA,EAAE,SAAS,cAAc,KAAK;AAAA,QAChC;AAAA,MACF,WAAW,EAAE,SAAS,QAAQ;AAC5B,+BAAuB;AAAA,MACzB,WAAW,EAAE,SAAS,OAAO;AAC3B,+BAAuB,aAAa,SAAS;AAAA,MAC/C;AAEA,UAAI,wBAAwB,KAAK,uBAAuB,aAAa,QAAQ;AAC3E,UAAE,eAAe;AACjB,UAAE,gBAAgB;AAClB,cAAM,MAAM,eAAe,aAAa,sBAAsB;AAC9D,YAAI,IAAI;AAAS,cAAI,QAAQ,MAAM;AAAA,MACrC;AAAA,IACF;AAAA,IACA,CAAC,YAAY,eAAe,cAAc;AAAA,EAC5C;AAEA,SAAO,EAAE,WAAW,QAAQ;AAC9B;",
   "names": []
 }

package/dist/types/DSToolbarItemV2.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import type { DSToolbarItemT } from './react-desc-prop-types';
+import type { DSToolbarItemT } from './react-desc-prop-types.js';
 declare const DSToolbarItemV2: React.ComponentType<DSToolbarItemT.Props>;
-declare const DSToolbarItemV2WithSchema: import("@elliemae/ds-utilities/dist/types/props-helpers/propTypes/types").DocumentedReactComponent<DSToolbarItemT.Props>;
+declare const DSToolbarItemV2WithSchema: import("@elliemae/ds-props-helpers/dist/types/propTypes/types.js").DocumentedReactComponent<DSToolbarItemT.Props>;
 export { DSToolbarItemV2, DSToolbarItemV2WithSchema };

package/dist/types/DSToolbarV2.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import type { DSToolbarT } from './react-desc-prop-types';
+import type { DSToolbarT } from './react-desc-prop-types.js';
 declare const DSToolbarV2: React.ComponentType<DSToolbarT.Props>;
-declare const DSToolbarV2WithSchema: import("@elliemae/ds-utilities/dist/types/props-helpers/propTypes/types").DocumentedReactComponent<DSToolbarT.Props>;
+declare const DSToolbarV2WithSchema: import("@elliemae/ds-props-helpers/dist/types/propTypes/types.js").DocumentedReactComponent<DSToolbarT.Props>;
 export { DSToolbarV2, DSToolbarV2WithSchema };

package/dist/types/DSToolbarV2Context.d.ts

@@ -1,5 +1,5 @@
 import type { MutableRefObject } from 'react';
-import type { DSToolbarItemT } from './react-desc-prop-types';
+import type { DSToolbarItemT } from './react-desc-prop-types.js';
 interface IDSToolbarV2Context {
     registerReference: (uid: string, ref: MutableRefObject<DSToolbarItemT.RenderHTMLElementT>) => void;
     itemReferences: Record<string, MutableRefObject<DSToolbarItemT.RenderHTMLElementT>>;

package/dist/types/deprecated/DSToolbar.d.ts

@@ -1,6 +1,6 @@
-import Item from './ToolbarItem';
-import ToolbarGroup from './ToolbarGroup';
-import Divider from './ToolbarDivider';
+import Item from './ToolbarItem.js';
+import ToolbarGroup from './ToolbarGroup.js';
+import Divider from './ToolbarDivider.js';
 declare const DSToolbar: {
     ({ containerProps, innerRef, withDepth, alignment, autoFocusOnMount, children, size, ...otherProps }: {
         [x: string]: any;
@@ -13,17 +13,17 @@ declare const DSToolbar: {
         size?: string | undefined;
     }): JSX.Element;
     propTypes: {
-        containerProps: import("@elliemae/ds-utilities/dist/types/props-helpers/propTypes/types").ReactDescT;
-        withDepth: import("@elliemae/ds-utilities/dist/types/props-helpers/propTypes/types").ReactDescT;
-        alignment: import("@elliemae/ds-utilities/dist/types/props-helpers/propTypes/types").ReactDescT;
-        size: import("@elliemae/ds-utilities/dist/types/props-helpers/propTypes/types").ReactDescT;
-        autoFocusOnMount: import("@elliemae/ds-utilities/dist/types/props-helpers/propTypes/types").ReactDescT;
-        children: import("@elliemae/ds-utilities/dist/types/props-helpers/propTypes/types").ReactDescT;
-        innerRef: import("@elliemae/ds-utilities/dist/types/props-helpers/propTypes/types").ReactDescT;
+        containerProps: import("@elliemae/ds-props-helpers/dist/types/propTypes/types.js").ReactDescT;
+        withDepth: import("@elliemae/ds-props-helpers/dist/types/propTypes/types.js").ReactDescT;
+        alignment: import("@elliemae/ds-props-helpers/dist/types/propTypes/types.js").ReactDescT;
+        size: import("@elliemae/ds-props-helpers/dist/types/propTypes/types.js").ReactDescT;
+        autoFocusOnMount: import("@elliemae/ds-props-helpers/dist/types/propTypes/types.js").ReactDescT;
+        children: import("@elliemae/ds-props-helpers/dist/types/propTypes/types.js").ReactDescT;
+        innerRef: import("@elliemae/ds-props-helpers/dist/types/propTypes/types.js").ReactDescT;
     };
     displayName: string;
 };
-declare const ToolbarWithSchema: import("@elliemae/ds-utilities/dist/types/props-helpers/propTypes/types").DocumentedReactComponent<{
+declare const ToolbarWithSchema: import("@elliemae/ds-props-helpers/dist/types/propTypes/types.js").DocumentedReactComponent<{
     [x: string]: any;
     containerProps?: {} | undefined;
     innerRef: any;

package/dist/types/deprecated/index.d.ts

@@ -1,2 +1,2 @@
-export * from './DSToolbar';
-export { default } from './DSToolbar';
+export * from './DSToolbar.js';
+export { default } from './DSToolbar.js';

package/dist/types/index.d.ts

@@ -1,5 +1,5 @@
-export * from './deprecated';
-export { default } from './deprecated';
-export * from './DSToolbarV2';
-export * from './DSToolbarItemV2';
-export * from './DSToolbarSeparatorV2';
+export * from './deprecated/index.js';
+export { default } from './deprecated/index.js';
+export * from './DSToolbarV2.js';
+export * from './DSToolbarItemV2.js';
+export * from './DSToolbarSeparatorV2.js';