@elliemae/ds-toolbar 3.1.0-next.2 → 3.1.0-next.20

package/dist/esm/DSToolbarItemV2.js

@@ -14,28 +14,57 @@ var __spreadValues = (a, b) => {
     }
   return a;
 };
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
 import * as React from "react";
 import React2, { useContext, useMemo, useRef } from "react";
+import {
+  describe,
+  useMemoMergePropsWithDefault,
+  useValidateTypescriptPropTypes,
+  useGetGlobalAttributes
+} from "@elliemae/ds-utilities";
 import { uid } from "uid";
 import { DSToolbarV2Context } from "./DSToolbarV2Context";
 import { StyledToolbarItem } from "./styled";
 import { useToolbarItemHandlers } from "./useToolbarItemHandlers";
-const DSToolbarItemV2 = ({ render }) => {
-  const { registerReference } = useContext(DSToolbarV2Context);
+import { defaultItemProps, DSToolbarItemV2Schema } from "./react-desc-prop-types";
+const DSToolbarItemV2 = (props) => {
+  const propsWithDefaults = useMemoMergePropsWithDefault(props, defaultItemProps);
+  useValidateTypescriptPropTypes(propsWithDefaults, DSToolbarItemV2Schema);
+  const { render, isFirstItem } = propsWithDefaults;
+  const _a = useGetGlobalAttributes(propsWithDefaults), { id } = _a, restGlobals = __objRest(_a, ["id"]);
+  const { registerReference, activeItem } = useContext(DSToolbarV2Context);
   const ref = useRef(null);
   const toolbarItemId = useMemo(() => {
-    const id = `ds-toolbar-item-${uid()}`;
-    registerReference(id, ref);
-    return id;
+    const id2 = `ds-toolbar-item-${uid()}`;
+    registerReference(id2, ref);
+    return id2;
   }, [registerReference, ref]);
+  const tabIndex = useMemo(() => activeItem === toolbarItemId || !activeItem && isFirstItem ? 0 : -1, [activeItem, isFirstItem, toolbarItemId]);
   const handlers = useToolbarItemHandlers(toolbarItemId);
-  return /* @__PURE__ */ React2.createElement(StyledToolbarItem, __spreadValues({
+  return /* @__PURE__ */ React2.createElement(StyledToolbarItem, __spreadValues(__spreadValues({
     id: toolbarItemId,
     "data-testid": "ds-toolbar-item",
     className: "ds-toolbar-item"
-  }, handlers), render({ innerRef: ref }));
+  }, handlers), restGlobals), render({ innerRef: ref, tabIndex }));
 };
+DSToolbarItemV2.propTypes = DSToolbarItemV2Schema;
+DSToolbarItemV2.displayName = "DSToolbarItemV2";
+const DSToolbarItemV2WithSchema = describe(DSToolbarItemV2).description("Toolbar Item");
+DSToolbarItemV2WithSchema.propTypes = DSToolbarItemV2Schema;
 export {
-  DSToolbarItemV2
+  DSToolbarItemV2,
+  DSToolbarItemV2WithSchema
 };
 //# sourceMappingURL=DSToolbarItemV2.js.map

package/dist/esm/DSToolbarItemV2.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/DSToolbarItemV2.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable react/prop-types */\nimport React, { MutableRefObject, useContext, useMemo, useRef } from 'react';\nimport { uid } from 'uid';\nimport { DSToolbarV2Context } from './DSToolbarV2Context';\nimport { StyledToolbarItem } from './styled';\nimport { useToolbarItemHandlers } from './useToolbarItemHandlers';\n\ninterface ToolbarItemProps {\n  render: (props: { innerRef: MutableRefObject<HTMLElement> }) => JSX.Element;\n}\n\nexport const DSToolbarItemV2: React.ComponentType<ToolbarItemProps> = ({ render }) => {\n  const { registerReference } = useContext(DSToolbarV2Context);\n  const ref = useRef(null);\n\n  const toolbarItemId = useMemo(() => {\n    const id = `ds-toolbar-item-${uid()}`;\n    registerReference(id, ref);\n    return id;\n  }, [registerReference, ref]);\n\n  const handlers = useToolbarItemHandlers(toolbarItemId);\n\n  return (\n    <StyledToolbarItem id={toolbarItemId} data-testid=\"ds-toolbar-item\" className=\"ds-toolbar-item\" {...handlers}>\n      {render({ innerRef: ref })}\n    </StyledToolbarItem>\n  );\n};\n"],
-  "mappings": ";;;;;;;;;;;;;;;;AAAA;ACCA;AACA;AACA;AACA;AACA;AAMO,MAAM,kBAAyD,CAAC,EAAE,aAAa;AACpF,QAAM,EAAE,sBAAsB,WAAW,kBAAkB;AAC3D,QAAM,MAAM,OAAO,IAAI;AAEvB,QAAM,gBAAgB,QAAQ,MAAM;AAClC,UAAM,KAAK,mBAAmB,IAAI;AAClC,sBAAkB,IAAI,GAAG;AACzB,WAAO;AAAA,EACT,GAAG,CAAC,mBAAmB,GAAG,CAAC;AAE3B,QAAM,WAAW,uBAAuB,aAAa;AAErD,SACE,qCAAC;AAAA,IAAkB,IAAI;AAAA,IAAe,eAAY;AAAA,IAAkB,WAAU;AAAA,KAAsB,WACjG,OAAO,EAAE,UAAU,IAAI,CAAC,CAC3B;AAEJ;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable react/prop-types */\nimport React, { useContext, useMemo, useRef } from 'react';\nimport {\n  describe,\n  useMemoMergePropsWithDefault,\n  useValidateTypescriptPropTypes,\n  useGetGlobalAttributes,\n} from '@elliemae/ds-utilities';\nimport { uid } from 'uid';\nimport { DSToolbarV2Context } from './DSToolbarV2Context';\nimport { StyledToolbarItem } from './styled';\nimport { useToolbarItemHandlers } from './useToolbarItemHandlers';\nimport { defaultItemProps, DSToolbarItemV2Schema } from './react-desc-prop-types';\nimport type { DSToolbarItemT } from './react-desc-prop-types';\nconst DSToolbarItemV2: React.ComponentType<DSToolbarItemT.Props> = (props) => {\n  const propsWithDefaults = useMemoMergePropsWithDefault(props, defaultItemProps);\n\n  useValidateTypescriptPropTypes(propsWithDefaults, DSToolbarItemV2Schema);\n  const { render, isFirstItem } = propsWithDefaults;\n  const { id, ...restGlobals } = useGetGlobalAttributes(propsWithDefaults);\n  const { registerReference, activeItem } = useContext(DSToolbarV2Context);\n  const ref = useRef(null);\n  const toolbarItemId = useMemo(() => {\n    const id = `ds-toolbar-item-${uid()}`;\n    registerReference(id, ref);\n    return id;\n  }, [registerReference, ref]);\n\n  const tabIndex = useMemo(\n    () => (activeItem === toolbarItemId || (!activeItem && isFirstItem) ? 0 : -1),\n    [activeItem, isFirstItem, toolbarItemId],\n  );\n\n  const handlers = useToolbarItemHandlers(toolbarItemId);\n  return (\n    <StyledToolbarItem\n      id={toolbarItemId}\n      data-testid=\"ds-toolbar-item\"\n      className=\"ds-toolbar-item\"\n      {...handlers}\n      {...restGlobals}\n    >\n      {render({ innerRef: ref, tabIndex })}\n    </StyledToolbarItem>\n  );\n};\n\nDSToolbarItemV2.propTypes = DSToolbarItemV2Schema;\n\nDSToolbarItemV2.displayName = 'DSToolbarItemV2';\nconst DSToolbarItemV2WithSchema = describe(DSToolbarItemV2).description('Toolbar Item');\nDSToolbarItemV2WithSchema.propTypes = DSToolbarItemV2Schema;\n\nexport { DSToolbarItemV2, DSToolbarItemV2WithSchema };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;ACCA;AACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAMA;AACA;AACA;AACA;AACA;AAEA,MAAM,kBAA6D,CAAC,UAAU;AAC5E,QAAM,oBAAoB,6BAA6B,OAAO,gBAAgB;AAE9E,iCAA+B,mBAAmB,qBAAqB;AACvE,QAAM,EAAE,QAAQ,gBAAgB;AAChC,QAA+B,4BAAuB,iBAAiB,GAA/D,SAAuB,IAAhB,wBAAgB,IAAhB,CAAP;AACR,QAAM,EAAE,mBAAmB,eAAe,WAAW,kBAAkB;AACvE,QAAM,MAAM,OAAO,IAAI;AACvB,QAAM,gBAAgB,QAAQ,MAAM;AAClC,UAAM,MAAK,mBAAmB,IAAI;AAClC,sBAAkB,KAAI,GAAG;AACzB,WAAO;AAAA,EACT,GAAG,CAAC,mBAAmB,GAAG,CAAC;AAE3B,QAAM,WAAW,QACf,MAAO,eAAe,iBAAkB,CAAC,cAAc,cAAe,IAAI,IAC1E,CAAC,YAAY,aAAa,aAAa,CACzC;AAEA,QAAM,WAAW,uBAAuB,aAAa;AACrD,SACE,qCAAC;AAAA,IACC,IAAI;AAAA,IACJ,eAAY;AAAA,IACZ,WAAU;AAAA,KACN,WACA,cAEH,OAAO,EAAE,UAAU,KAAK,SAAS,CAAC,CACrC;AAEJ;AAEA,gBAAgB,YAAY;AAE5B,gBAAgB,cAAc;AAC9B,MAAM,4BAA4B,SAAS,eAAe,EAAE,YAAY,cAAc;AACtF,0BAA0B,YAAY;",
   "names": []
 }

package/dist/esm/DSToolbarV2.js

@@ -19,41 +19,43 @@ var __spreadValues = (a, b) => {
 var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
 import * as React from "react";
 import React2, { useCallback, useMemo, useState } from "react";
-import { useValidateTypescriptPropTypes } from "@elliemae/ds-utilities";
-import { describe } from "react-desc";
+import {
+  useMemoMergePropsWithDefault,
+  useValidateTypescriptPropTypes,
+  useGetGlobalAttributes
+} from "@elliemae/ds-utilities";
+import { describe } from "@elliemae/ds-utilities";
 import { uid } from "uid";
 import { DSToolbarV2Context } from "./DSToolbarV2Context";
-import { DSToolbarV2Schema } from "./props";
+import { DSToolbarV2Schema, defaultProps } from "./react-desc-prop-types";
 import { StyledToolbarWrapper } from "./styled";
 const DSToolbarV2 = (props) => {
-  const { alignment, withDepth, compact, innerRef, children } = props;
-  useValidateTypescriptPropTypes(props, DSToolbarV2Schema);
+  const propsWithDefaults = useMemoMergePropsWithDefault(props, defaultProps);
+  useValidateTypescriptPropTypes(propsWithDefaults, DSToolbarV2Schema);
+  const { alignment, withDepth, compact, innerRef, children } = propsWithDefaults;
+  const globalsProps = useGetGlobalAttributes(propsWithDefaults);
   const toolbarUid = useMemo(() => `ds-toolbar-${uid()}`, []);
   const [itemReferences, setItemReferences] = useState({});
+  const [activeItem, setActiveItem] = useState("");
   const registerReference = useCallback((itemId, ref) => {
     setItemReferences((prevItemReferences) => __spreadProps(__spreadValues({}, prevItemReferences), { [itemId]: ref }));
   }, [setItemReferences]);
+  const ctx = useMemo(() => ({ toolbarUid, registerReference, itemReferences, activeItem, setActiveItem }), [activeItem, itemReferences, registerReference, toolbarUid]);
   return /* @__PURE__ */ React2.createElement(DSToolbarV2Context.Provider, {
-    value: { toolbarUid, registerReference, itemReferences }
-  }, /* @__PURE__ */ React2.createElement(StyledToolbarWrapper, {
+    value: ctx
+  }, /* @__PURE__ */ React2.createElement(StyledToolbarWrapper, __spreadValues({
     role: "toolbar",
     "data-testid": "ds-toolbar-wrapper",
     id: toolbarUid,
     alignItems: "center",
     justifyContent: alignment === "left" ? "flex-start" : "flex-end",
     withDepth,
-    cols: React2.Children.map(children, () => ["auto"]),
     gutter: "xxs2",
     compact,
     ref: innerRef
-  }, children));
+  }, globalsProps), children));
 };
 DSToolbarV2.propTypes = DSToolbarV2Schema;
-DSToolbarV2.defaultProps = {
-  alignment: "right",
-  withDepth: true,
-  compact: false
-};
 DSToolbarV2.displayName = "DSToolbarV2";
 const DSToolbarV2WithSchema = describe(DSToolbarV2).description("Toolbar");
 DSToolbarV2WithSchema.propTypes = DSToolbarV2Schema;

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 { useValidateTypescriptPropTypes } from '@elliemae/ds-utilities';\nimport { describe } from 'react-desc';\nimport { uid } from 'uid';\nimport { DSToolbarV2Context } from './DSToolbarV2Context';\nimport { DSToolbarV2Schema } from './props';\nimport { StyledToolbarWrapper } from './styled';\ninterface ToolbarProps {\n  alignment?: 'left' | 'right';\n  withDepth?: boolean;\n  compact?: boolean;\n  innerRef?: React.MutableRefObject<HTMLDivElement>;\n}\n\nconst DSToolbarV2: React.ComponentType<ToolbarProps> = (props) => {\n  const { alignment, withDepth, compact, innerRef, children } = props;\n\n  useValidateTypescriptPropTypes(props, DSToolbarV2Schema);\n\n  const toolbarUid = useMemo(() => `ds-toolbar-${uid()}`, []);\n\n  const [itemReferences, setItemReferences] = useState({});\n\n  const registerReference = useCallback(\n    (itemId: string, ref: React.MutableRefObject<HTMLElement>) => {\n      setItemReferences((prevItemReferences) => ({ ...prevItemReferences, [itemId]: ref }));\n    },\n    [setItemReferences],\n  );\n\n  return (\n    <DSToolbarV2Context.Provider value={{ toolbarUid, registerReference, itemReferences }}>\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        cols={React.Children.map(children, () => ['auto'])}\n        gutter=\"xxs2\"\n        compact={compact}\n        ref={innerRef}\n      >\n        {children}\n      </StyledToolbarWrapper>\n    </DSToolbarV2Context.Provider>\n  );\n};\n\nDSToolbarV2.propTypes = DSToolbarV2Schema;\nDSToolbarV2.defaultProps = {\n  alignment: 'right',\n  withDepth: true,\n  compact: false,\n};\nDSToolbarV2.displayName = 'DSToolbarV2';\nconst DSToolbarV2WithSchema = describe(DSToolbarV2).description('Toolbar');\nDSToolbarV2WithSchema.propTypes = DSToolbarV2Schema;\n\nexport { DSToolbarV2, DSToolbarV2WithSchema };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;AAAA;ACCA;AACA;AACA;AACA;AACA;AACA;AACA;AAQA,MAAM,cAAiD,CAAC,UAAU;AAChE,QAAM,EAAE,WAAW,WAAW,SAAS,UAAU,aAAa;AAE9D,iCAA+B,OAAO,iBAAiB;AAEvD,QAAM,aAAa,QAAQ,MAAM,cAAc,IAAI,KAAK,CAAC,CAAC;AAE1D,QAAM,CAAC,gBAAgB,qBAAqB,SAAS,CAAC,CAAC;AAEvD,QAAM,oBAAoB,YACxB,CAAC,QAAgB,QAA6C;AAC5D,sBAAkB,CAAC,uBAAwB,iCAAK,qBAAL,GAA0B,SAAS,IAAI,EAAE;AAAA,EACtF,GACA,CAAC,iBAAiB,CACpB;AAEA,SACE,qCAAC,mBAAmB,UAAnB;AAAA,IAA4B,OAAO,EAAE,YAAY,mBAAmB,eAAe;AAAA,KAClF,qCAAC;AAAA,IACC,MAAK;AAAA,IACL,eAAY;AAAA,IACZ,IAAI;AAAA,IACJ,YAAW;AAAA,IACX,gBAAgB,cAAc,SAAS,eAAe;AAAA,IACtD;AAAA,IACA,MAAM,OAAM,SAAS,IAAI,UAAU,MAAM,CAAC,MAAM,CAAC;AAAA,IACjD,QAAO;AAAA,IACP;AAAA,IACA,KAAK;AAAA,KAEJ,QACH,CACF;AAEJ;AAEA,YAAY,YAAY;AACxB,YAAY,eAAe;AAAA,EACzB,WAAW;AAAA,EACX,WAAW;AAAA,EACX,SAAS;AACX;AACA,YAAY,cAAc;AAC1B,MAAM,wBAAwB,SAAS,WAAW,EAAE,YAAY,SAAS;AACzE,sBAAsB,YAAY;",
+  "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} from '@elliemae/ds-utilities';\nimport { describe } 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 } from './react-desc-prop-types';\n\nconst DSToolbarV2: React.ComponentType<DSToolbarT.Props> = (props) => {\n  const propsWithDefaults = useMemoMergePropsWithDefault(props, defaultProps);\n\n  useValidateTypescriptPropTypes(propsWithDefaults, DSToolbarV2Schema);\n\n  const { alignment, withDepth, compact, innerRef, children } = propsWithDefaults;\n\n  const globalsProps = useGetGlobalAttributes(propsWithDefaults);\n\n  const toolbarUid = useMemo(() => `ds-toolbar-${uid()}`, []);\n\n  const [itemReferences, setItemReferences] = useState({});\n  const [activeItem, setActiveItem] = useState('');\n\n  const registerReference = useCallback(\n    (itemId: string, ref: React.MutableRefObject<HTMLElement>) => {\n      setItemReferences((prevItemReferences) => ({ ...prevItemReferences, [itemId]: ref }));\n    },\n    [setItemReferences],\n  );\n\n  const ctx = useMemo(\n    () => ({ toolbarUid, registerReference, itemReferences, activeItem, setActiveItem }),\n    [activeItem, 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 = 'DSToolbarV2';\nconst DSToolbarV2WithSchema = describe(DSToolbarV2).description('Toolbar');\nDSToolbarV2WithSchema.propTypes = DSToolbarV2Schema;\n\nexport { DSToolbarV2, DSToolbarV2WithSchema };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;AAAA;ACCA;AACA;AAAA;AAAA;AAAA;AAAA;AAKA;AACA;AACA;AACA;AACA;AAGA,MAAM,cAAqD,CAAC,UAAU;AACpE,QAAM,oBAAoB,6BAA6B,OAAO,YAAY;AAE1E,iCAA+B,mBAAmB,iBAAiB;AAEnE,QAAM,EAAE,WAAW,WAAW,SAAS,UAAU,aAAa;AAE9D,QAAM,eAAe,uBAAuB,iBAAiB;AAE7D,QAAM,aAAa,QAAQ,MAAM,cAAc,IAAI,KAAK,CAAC,CAAC;AAE1D,QAAM,CAAC,gBAAgB,qBAAqB,SAAS,CAAC,CAAC;AACvD,QAAM,CAAC,YAAY,iBAAiB,SAAS,EAAE;AAE/C,QAAM,oBAAoB,YACxB,CAAC,QAAgB,QAA6C;AAC5D,sBAAkB,CAAC,uBAAwB,iCAAK,qBAAL,EAAyB,CAAC,SAAS,IAAI,EAAE;AAAA,EACtF,GACA,CAAC,iBAAiB,CACpB;AAEA,QAAM,MAAM,QACV,MAAO,GAAE,YAAY,mBAAmB,gBAAgB,YAAY,cAAc,IAClF,CAAC,YAAY,gBAAgB,mBAAmB,UAAU,CAC5D;AAEA,SACE,qCAAC,mBAAmB,UAAnB;AAAA,IAA4B,OAAO;AAAA,KAClC,qCAAC;AAAA,IACC,MAAK;AAAA,IACL,eAAY;AAAA,IACZ,IAAI;AAAA,IACJ,YAAW;AAAA,IACX,gBAAgB,cAAc,SAAS,eAAe;AAAA,IACtD;AAAA,IACA,QAAO;AAAA,IACP;AAAA,IACA,KAAK;AAAA,KACD,eAEH,QACH,CACF;AAEJ;AAEA,YAAY,YAAY;AAExB,YAAY,cAAc;AAC1B,MAAM,wBAAwB,SAAS,WAAW,EAAE,YAAY,SAAS;AACzE,sBAAsB,YAAY;",
   "names": []
 }

package/dist/esm/DSToolbarV2Context.js

@@ -3,7 +3,10 @@ import { createContext } from "react";
 const DSToolbarV2Context = createContext({
   registerReference: () => null,
   itemReferences: {},
-  toolbarUid: ""
+  toolbarUid: "",
+  activeItem: "",
+  setActiveItem: () => {
+  }
 });
 export {
   DSToolbarV2Context

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 { createContext, MutableRefObject } from 'react';\n\ninterface IDSToolbarV2Context {\n  registerReference: (uid: string, ref: MutableRefObject<HTMLElement>) => void;\n  itemReferences: Record<string, MutableRefObject<HTMLElement>>;\n  toolbarUid: string;\n}\n\nexport const DSToolbarV2Context = createContext<IDSToolbarV2Context>({\n  registerReference: () => null,\n  itemReferences: {},\n  toolbarUid: '',\n});\n"],
-  "mappings": "AAAA;ACAA;AAQO,MAAM,qBAAqB,cAAmC;AAAA,EACnE,mBAAmB,MAAM;AAAA,EACzB,gBAAgB,CAAC;AAAA,EACjB,YAAY;AACd,CAAC;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { createContext, MutableRefObject } from 'react';\n\ninterface IDSToolbarV2Context {\n  registerReference: (uid: string, ref: MutableRefObject<HTMLElement>) => void;\n  itemReferences: Record<string, MutableRefObject<HTMLElement>>;\n  toolbarUid: string;\n  activeItem: string;\n  setActiveItem: React.Dispatch<React.SetStateAction<string>>;\n}\n\nexport const DSToolbarV2Context = createContext<IDSToolbarV2Context>({\n  registerReference: () => null,\n  itemReferences: {},\n  toolbarUid: '',\n  activeItem: '',\n  setActiveItem: () => {},\n});\n"],
+  "mappings": "AAAA;ACAA;AAUO,MAAM,qBAAqB,cAAmC;AAAA,EACnE,mBAAmB,MAAM;AAAA,EACzB,gBAAgB,CAAC;AAAA,EACjB,YAAY;AAAA,EACZ,YAAY;AAAA,EACZ,eAAe,MAAM;AAAA,EAAC;AACxB,CAAC;",
   "names": []
 }

package/dist/esm/deprecated/DSToolbar.js

@@ -31,14 +31,13 @@ var __objRest = (source, exclude) => {
 };
 import * as React from "react";
 import React2, { useRef } from "react";
-import { describe, PropTypes } from "react-desc";
 import { aggregatedClasses } from "@elliemae/ds-classnames";
-import { FocusGroupProvider } from "@elliemae/ds-shared";
-import { mergeRefs } from "@elliemae/ds-utilities";
+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";
 const blockName = "toolbar";
 const ToolbarContainer = aggregatedClasses("div")(blockName, null, ({ withDepth, alignment, size }) => ({
   "without-depth": !withDepth,
@@ -64,17 +63,12 @@ const DSToolbar = (_a) => {
     "size"
   ]);
   const containerRef = useRef(null);
-  return /* @__PURE__ */ React2.createElement(FocusGroupProvider, {
-    autoFocusOnMount,
-    getContainer: () => containerRef.current,
-    keyBindings: {
-      Tab: "next"
-    },
-    orientation: "horizontal"
-  }, /* @__PURE__ */ React2.createElement(ToolbarContainer, __spreadProps(__spreadValues(__spreadValues({}, containerProps), otherProps), {
+  const { handleOnKeyDown } = useKeyboardNavigation({ containerRef, autoFocusOnMount });
+  return /* @__PURE__ */ React2.createElement(ToolbarContainer, __spreadProps(__spreadValues(__spreadValues({}, containerProps), otherProps), {
     classProps: { withDepth, alignment, size },
-    innerRef: mergeRefs(innerRef, containerRef)
-  }), decorateToolbarChildren(children)));
+    innerRef: mergeRefs(innerRef, containerRef),
+    onKeyDown: handleOnKeyDown
+  }), decorateToolbarChildren(children));
 };
 const toolbarProps = {
   containerProps: PropTypes.object.description("Set of Properties attached to the main container"),

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 { describe, PropTypes } from 'react-desc';\nimport { aggregatedClasses } from '@elliemae/ds-classnames';\nimport { FocusGroupProvider } from '@elliemae/ds-shared';\nimport { mergeRefs } from '@elliemae/ds-utilities';\nimport decorateToolbarChildren from './decorateToolbarChildren';\nimport Item from './ToolbarItem';\nimport ToolbarGroup from './ToolbarGroup';\nimport Divider from './ToolbarDivider';\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(null);\n  return (\n    <FocusGroupProvider\n      autoFocusOnMount={autoFocusOnMount}\n      getContainer={() => containerRef.current}\n      keyBindings={{\n        Tab: 'next',\n      }}\n      orientation=\"horizontal\"\n    >\n      <ToolbarContainer\n        {...containerProps}\n        {...otherProps}\n        classProps={{ withDepth, alignment, size }}\n        innerRef={mergeRefs(innerRef, containerRef)}\n      >\n        {decorateToolbarChildren(children)}\n      </ToolbarContainer>\n    </FocusGroupProvider>\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;ACAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA,MAAM,YAAY;AAElB,MAAM,mBAAmB,kBAAkB,KAAK,EAAE,WAAW,MAAM,CAAC,EAAE,WAAW,WAAW,WAAY;AAAA,EACtG,iBAAiB,CAAC;AAAA,GACjB,YAAY,CAAC,CAAC;AAAA,GACd,OAAO;AACV,EAAE;AAEF,MAAM,YAAY,CAAC,OASb;AATa,eACjB;AAAA,qBAAiB,CAAC;AAAA,IAClB;AAAA,IACA,YAAY;AAAA,IACZ,YAAY;AAAA,IACZ,mBAAmB;AAAA,IACnB,WAAW,CAAC;AAAA,IACZ,OAAO;AAAA,MAPU,IAQd,uBARc,IAQd;AAAA,IAPH;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA;AAGA,QAAM,eAAe,OAAO,IAAI;AAChC,SACE,qCAAC;AAAA,IACC;AAAA,IACA,cAAc,MAAM,aAAa;AAAA,IACjC,aAAa;AAAA,MACX,KAAK;AAAA,IACP;AAAA,IACA,aAAY;AAAA,KAEZ,qCAAC,kEACK,iBACA,aAFL;AAAA,IAGC,YAAY,EAAE,WAAW,WAAW,KAAK;AAAA,IACzC,UAAU,UAAU,UAAU,YAAY;AAAA,MAEzC,wBAAwB,QAAQ,CACnC,CACF;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", "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;ACAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA,MAAM,YAAY;AAElB,MAAM,mBAAmB,kBAAkB,KAAK,EAAE,WAAW,MAAM,CAAC,EAAE,WAAW,WAAW,WAAY;AAAA,EACtG,iBAAiB,CAAC;AAAA,EAClB,CAAC,YAAY,CAAC,CAAC;AAAA,EACf,CAAC,OAAO;AACV,EAAE;AAEF,MAAM,YAAY,CAAC,OASb;AATa,eACjB;AAAA,qBAAiB,CAAC;AAAA,IAClB;AAAA,IACA,YAAY;AAAA,IACZ,YAAY;AAAA,IACZ,mBAAmB;AAAA,IACnB,WAAW,CAAC;AAAA,IACZ,OAAO;AAAA,MAPU,IAQd,uBARc,IAQd;AAAA,IAPH;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA;AAGA,QAAM,eAAe,OAA8B,IAAI;AAEvD,QAAM,EAAE,oBAAoB,sBAAsB,EAAE,cAAc,iBAAiB,CAAC;AAEpF,SACE,qCAAC,kEACK,iBACA,aAFL;AAAA,IAGC,YAAY,EAAE,WAAW,WAAW,KAAK;AAAA,IACzC,UAAU,UAAU,UAAU,YAAY;AAAA,IAC1C,WAAW;AAAA,MAEV,wBAAwB,QAAQ,CACnC;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/ToolbarGroup.js.map

@@ -2,6 +2,6 @@
   "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')(\n  blockName,\n  null,\n  ({ space }) => ({\n    [`space-${space}`]: !!space,\n  }),\n);\n\nconst ToolbarGroup = ({ children, size, space = 0 }) => (\n  <ToolbarGroupContainer classProps={{ space }}>\n    {decorateToolbarChildren(children, { size })}\n  </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;ACAA;AACA;AACA;AACA;AAEA,MAAM,YAAY;AAElB,MAAM,wBAAwB,kBAAkB,KAAK,EACnD,WACA,MACA,CAAC,EAAE,YAAa;AAAA,GACb,SAAS,UAAU,CAAC,CAAC;AACxB,EACF;AAEA,MAAM,eAAe,CAAC,EAAE,UAAU,MAAM,QAAQ,QAC9C,qCAAC;AAAA,EAAsB,YAAY,EAAE,MAAM;AAAA,GACxC,wBAAwB,UAAU,EAAE,KAAK,CAAC,CAC7C;AAGF,aAAa,YAAY;AAAA,EACvB,UAAU,UAAU;AAAA,EACpB,MAAM,UAAU;AAAA,EAChB,OAAO,UAAU;AACnB;AAEA,IAAO,uBAAQ;",
+  "mappings": "AAAA;ACAA;AACA;AACA;AACA;AAEA,MAAM,YAAY;AAElB,MAAM,wBAAwB,kBAAkB,KAAK,EACnD,WACA,MACA,CAAC,EAAE,YAAa;AAAA,EACd,CAAC,SAAS,UAAU,CAAC,CAAC;AACxB,EACF;AAEA,MAAM,eAAe,CAAC,EAAE,UAAU,MAAM,QAAQ,QAC9C,qCAAC;AAAA,EAAsB,YAAY,EAAE,MAAM;AAAA,GACxC,wBAAwB,UAAU,EAAE,KAAK,CAAC,CAC7C;AAGF,aAAa,YAAY;AAAA,EACvB,UAAU,UAAU;AAAA,EACpB,MAAM,UAAU;AAAA,EAChB,OAAO,UAAU;AACnB;AAEA,IAAO,uBAAQ;",
   "names": []
 }

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

@@ -0,0 +1,42 @@
+import * as React from "react";
+import { useRef, useEffect, useCallback } from "react";
+const useKeyboardNavigation = ({ containerRef, autoFocusOnMount }) => {
+  const allChildrenButtonRef = useRef(null);
+  useEffect(() => {
+    if (containerRef.current) {
+      allChildrenButtonRef.current = containerRef.current.querySelectorAll("button");
+    }
+    if (autoFocusOnMount) {
+      setTimeout(() => allChildrenButtonRef.current?.[0].focus());
+    }
+  }, [autoFocusOnMount]);
+  const handleOnKeyDown = useCallback((e) => {
+    if (allChildrenButtonRef.current) {
+      const lastButton = allChildrenButtonRef.current[allChildrenButtonRef.current?.length - 1];
+      const firstButton = allChildrenButtonRef.current[0];
+      if (e.key === "ArrowRight") {
+        e.preventDefault();
+        if (e.target !== lastButton) {
+          e.target.nextSibling.focus();
+        } else {
+          firstButton.focus();
+        }
+      }
+      if (e.key === "ArrowLeft") {
+        e.preventDefault();
+        if (e.target !== firstButton) {
+          e.target.previousSibling.focus();
+        } else {
+          lastButton.focus();
+        }
+      }
+    }
+  }, []);
+  return {
+    handleOnKeyDown
+  };
+};
+export {
+  useKeyboardNavigation
+};
+//# sourceMappingURL=useKeyboardNavigation.js.map

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

@@ -0,0 +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 React, { 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;ACAA;AAYO,MAAM,wBAAwB,CAAC,EAAE,cAAc,uBAA+C;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/react-desc-prop-types.js

@@ -0,0 +1,49 @@
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+import * as React from "react";
+import { globalAttributesPropTypes, PropTypes } from "@elliemae/ds-utilities";
+const defaultItemProps = {
+  render: () => {
+  },
+  isFirstItem: false
+};
+const defaultProps = {
+  alignment: "right",
+  withDepth: true,
+  compact: false
+};
+const DSToolbarV2Schema = __spreadProps(__spreadValues({}, globalAttributesPropTypes), {
+  alignment: PropTypes.oneOf(["right", "left"]).description("Whether to align the content left or right").defaultValue("right"),
+  withDepth: PropTypes.bool.description("Whether to add a box-shadow to the container").defaultValue(true),
+  compact: PropTypes.bool.description("Whether you want the compact version of the toolbar").defaultValue(false),
+  innerRef: PropTypes.oneOfType([PropTypes.func, PropTypes.object]).description("Reference to attach to the wrapper")
+});
+const DSToolbarItemV2Schema = __spreadProps(__spreadValues({}, globalAttributesPropTypes), {
+  render: PropTypes.func.isRequired.description("render function").defaultValue(() => {
+  }),
+  isFirstItem: PropTypes.bool.description("If true the item will have tab index 0 to be the first element focusable by keyboard on the page load").defaultValue(false)
+});
+export {
+  DSToolbarItemV2Schema,
+  DSToolbarV2Schema,
+  defaultItemProps,
+  defaultProps
+};
+//# sourceMappingURL=react-desc-prop-types.js.map

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

@@ -0,0 +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 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;ACAA;AAmBO,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,iCAC5B,4BAD4B;AAAA,EAE/B,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,iCAChC,4BADgC;AAAA,EAEnC,QAAQ,UAAU,KAAK,WAAW,YAAY,iBAAiB,EAAE,aAAa,MAAM;AAAA,EAAC,CAAC;AAAA,EACtF,aAAa,UAAU,KACpB,YACC,uGACF,EACC,aAAa,KAAK;AACvB;",
+  "names": []
+}

package/dist/esm/styled.js

@@ -1,14 +1,14 @@
 import * as React from "react";
-import styled from "styled-components";
+import { styled } from "@elliemae/ds-system";
 import Grid from "@elliemae/ds-grid";
 const StyledToolbarWrapper = styled(Grid)`
   background-color: ${(props) => props.theme.colors.neutral["000"]};
 
-  min-height: ${(props) => props.compact ? "28px" : "40px"};
+  min-height: ${(props) => props.compact ? "28px" : "36px"};
   max-height: ${(props) => props.theme.space.xxl};
 
   padding: 0 ${(props) => props.theme.space.xxs};
-
+  grid-auto-flow: column;
   box-shadow: ${(props) => !props.withDepth ? "none" : "0 1px 5px 0 rgb(0 0 0 / 13%), 0 2px 4px 0 rgb(0 0 0 / 20%)"};
 `;
 const StyledToolbarItem = styled(Grid)``;

package/dist/esm/styled.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/styled.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import styled from 'styled-components';\nimport Grid from '@elliemae/ds-grid';\n\nexport const StyledToolbarWrapper = styled(Grid)`\n  background-color: ${(props) => props.theme.colors.neutral['000']};\n\n  min-height: ${(props) => (props.compact ? '28px' : '40px')};\n  max-height: ${(props) => props.theme.space.xxl};\n\n  padding: 0 ${(props) => props.theme.space.xxs};\n\n  box-shadow: ${(props) => (!props.withDepth ? 'none' : '0 1px 5px 0 rgb(0 0 0 / 13%), 0 2px 4px 0 rgb(0 0 0 / 20%)')};\n`;\n\nexport const StyledToolbarItem = styled(Grid)``;\n\nexport const StyledSeparator = styled(Grid)`\n  height: 30px;\n  width: 1px;\n  background-color: ${(props) => props.theme.colors.neutral[200]};\n`;\n"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { styled } from '@elliemae/ds-system';\nimport Grid from '@elliemae/ds-grid';\n\nexport const StyledToolbarWrapper = styled(Grid)`\n  background-color: ${(props) => props.theme.colors.neutral['000']};\n\n  min-height: ${(props) => (props.compact ? '28px' : '36px')};\n  max-height: ${(props) => props.theme.space.xxl};\n\n  padding: 0 ${(props) => props.theme.space.xxs};\n  grid-auto-flow: column;\n  box-shadow: ${(props) => (!props.withDepth ? 'none' : '0 1px 5px 0 rgb(0 0 0 / 13%), 0 2px 4px 0 rgb(0 0 0 / 20%)')};\n`;\n\nexport const StyledToolbarItem = styled(Grid)``;\n\nexport const StyledSeparator = styled(Grid)`\n  height: 30px;\n  width: 1px;\n  background-color: ${(props) => props.theme.colors.neutral[200]};\n`;\n"],
   "mappings": "AAAA;ACAA;AACA;AAEO,MAAM,uBAAuB,OAAO,IAAI;AAAA,sBACzB,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ;AAAA;AAAA,gBAE5C,CAAC,UAAW,MAAM,UAAU,SAAS;AAAA,gBACrC,CAAC,UAAU,MAAM,MAAM,MAAM;AAAA;AAAA,eAE9B,CAAC,UAAU,MAAM,MAAM,MAAM;AAAA;AAAA,gBAE5B,CAAC,UAAW,CAAC,MAAM,YAAY,SAAS;AAAA;AAGjD,MAAM,oBAAoB,OAAO,IAAI;AAErC,MAAM,kBAAkB,OAAO,IAAI;AAAA;AAAA;AAAA,sBAGpB,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ;AAAA;",
   "names": []
 }

package/dist/esm/useToolbarItemHandlers.js

@@ -2,12 +2,15 @@ import * as React from "react";
 import { useCallback, useContext } from "react";
 import { DSToolbarV2Context } from "./DSToolbarV2Context";
 const useToolbarItemHandlers = (toolbarItemId) => {
-  const { toolbarUid, itemReferences } = useContext(DSToolbarV2Context);
+  const { toolbarUid, itemReferences, setActiveItem } = useContext(DSToolbarV2Context);
+  const onFocus = useCallback(() => {
+    setActiveItem(toolbarItemId);
+  }, [setActiveItem, toolbarItemId]);
   const onKeyDown = useCallback((e) => {
     const toolbarItems = [...document.querySelectorAll(`#${toolbarUid} .ds-toolbar-item`)];
     let nextToolbarItemIndex = -1;
+    const toolbarItemIndex = toolbarItems.findIndex((domElem) => domElem.id === toolbarItemId);
     if (["ArrowLeft", "ArrowRight"].includes(e.code)) {
-      const toolbarItemIndex = toolbarItems.findIndex((domElem) => domElem.id === toolbarItemId);
       nextToolbarItemIndex = toolbarItemIndex + (e.code === "ArrowLeft" ? -1 : 1);
     } else if (e.code === "Home") {
       nextToolbarItemIndex = 0;
@@ -22,7 +25,7 @@ const useToolbarItemHandlers = (toolbarItemId) => {
         ref.current.focus();
     }
   }, [toolbarUid, toolbarItemId, itemReferences]);
-  return { onKeyDown };
+  return { onKeyDown, onFocus };
 };
 export {
   useToolbarItemHandlers

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\nexport const useToolbarItemHandlers = (\n  toolbarItemId: string,\n): {\n  onKeyDown: React.KeyboardEventHandler;\n} => {\n  const { toolbarUid, itemReferences } = useContext(DSToolbarV2Context);\n\n  const onKeyDown: React.KeyboardEventHandler = useCallback(\n    (e) => {\n      const toolbarItems = [...document.querySelectorAll(`#${toolbarUid} .ds-toolbar-item`)];\n      let nextToolbarItemIndex = -1;\n\n      if (['ArrowLeft', 'ArrowRight'].includes(e.code)) {\n        const toolbarItemIndex = toolbarItems.findIndex((domElem) => domElem.id === toolbarItemId);\n        nextToolbarItemIndex = toolbarItemIndex + (e.code === 'ArrowLeft' ? -1 : 1);\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 };\n};\n"],
-  "mappings": "AAAA;ACAA;AACA;AAEO,MAAM,yBAAyB,CACpC,kBAGG;AACH,QAAM,EAAE,YAAY,mBAAmB,WAAW,kBAAkB;AAEpE,QAAM,YAAwC,YAC5C,CAAC,MAAM;AACL,UAAM,eAAe,CAAC,GAAG,SAAS,iBAAiB,IAAI,6BAA6B,CAAC;AACrF,QAAI,uBAAuB;AAE3B,QAAI,CAAC,aAAa,YAAY,EAAE,SAAS,EAAE,IAAI,GAAG;AAChD,YAAM,mBAAmB,aAAa,UAAU,CAAC,YAAY,QAAQ,OAAO,aAAa;AACzF,6BAAuB,mBAAoB,GAAE,SAAS,cAAc,KAAK;AAAA,IAC3E,WAAW,EAAE,SAAS,QAAQ;AAC5B,6BAAuB;AAAA,IACzB,WAAW,EAAE,SAAS,OAAO;AAC3B,6BAAuB,aAAa,SAAS;AAAA,IAC/C;AAEA,QAAI,wBAAwB,KAAK,uBAAuB,aAAa,QAAQ;AAC3E,QAAE,eAAe;AACjB,QAAE,gBAAgB;AAClB,YAAM,MAAM,eAAe,aAAa,sBAAsB;AAC9D,UAAI,IAAI;AAAS,YAAI,QAAQ,MAAM;AAAA,IACrC;AAAA,EACF,GACA,CAAC,YAAY,eAAe,cAAc,CAC5C;AAEA,SAAO,EAAE,UAAU;AACrB;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { useCallback, useContext } from 'react';\nimport { DSToolbarV2Context } from './DSToolbarV2Context';\n\nexport const useToolbarItemHandlers = (\n  toolbarItemId: string,\n): {\n  onKeyDown: React.KeyboardEventHandler;\n  onFocus: React.FocusEventHandler;\n} => {\n  const { toolbarUid, itemReferences, setActiveItem } = useContext(DSToolbarV2Context);\n\n  const onFocus: React.FocusEventHandler = useCallback(() => {\n    setActiveItem(toolbarItemId);\n  }, [setActiveItem, 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      if (['ArrowLeft', 'ArrowRight'].includes(e.code)) {\n        nextToolbarItemIndex = toolbarItemIndex + (e.code === 'ArrowLeft' ? -1 : 1);\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;ACAA;AACA;AAEO,MAAM,yBAAyB,CACpC,kBAIG;AACH,QAAM,EAAE,YAAY,gBAAgB,kBAAkB,WAAW,kBAAkB;AAEnF,QAAM,UAAmC,YAAY,MAAM;AACzD,kBAAc,aAAa;AAAA,EAC7B,GAAG,CAAC,eAAe,aAAa,CAAC;AAEjC,QAAM,YAAwC,YAC5C,CAAC,MAAM;AACL,UAAM,eAAe,CAAC,GAAG,SAAS,iBAAiB,IAAI,6BAA6B,CAAC;AACrF,QAAI,uBAAuB;AAC3B,UAAM,mBAAmB,aAAa,UAAU,CAAC,YAAY,QAAQ,OAAO,aAAa;AAEzF,QAAI,CAAC,aAAa,YAAY,EAAE,SAAS,EAAE,IAAI,GAAG;AAChD,6BAAuB,mBAAoB,GAAE,SAAS,cAAc,KAAK;AAAA,IAC3E,WAAW,EAAE,SAAS,QAAQ;AAC5B,6BAAuB;AAAA,IACzB,WAAW,EAAE,SAAS,OAAO;AAC3B,6BAAuB,aAAa,SAAS;AAAA,IAC/C;AAEA,QAAI,wBAAwB,KAAK,uBAAuB,aAAa,QAAQ;AAC3E,QAAE,eAAe;AACjB,QAAE,gBAAgB;AAClB,YAAM,MAAM,eAAe,aAAa,sBAAsB;AAC9D,UAAI,IAAI;AAAS,YAAI,QAAQ,MAAM;AAAA,IACrC;AAAA,EACF,GACA,CAAC,YAAY,eAAe,cAAc,CAC5C;AAEA,SAAO,EAAE,WAAW,QAAQ;AAC9B;",
   "names": []
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elliemae/ds-toolbar",
-  "version": "3.1.0-next.2",
+  "version": "3.1.0-next.20",
   "license": "MIT",
   "description": "ICE MT - Dimsum - Toolbar",
   "files": [
@@ -86,40 +86,40 @@
     "reportFile": "tests.xml",
     "indent": 4
   },
-  "scripts": {
-    "dev": "cross-env NODE_ENV=development node ../../scripts/build/build.mjs --watch",
-    "test": "node ../../scripts/testing/test.mjs",
-    "lint": "node ../../scripts/lint.mjs",
-    "dts": "node ../../scripts/dts.mjs",
-    "build": "cross-env NODE_ENV=production node ../../scripts/build/build.mjs"
-  },
   "dependencies": {
-    "@elliemae/ds-button": "3.1.0-next.2",
-    "@elliemae/ds-classnames": "3.1.0-next.2",
-    "@elliemae/ds-grid": "3.1.0-next.2",
-    "@elliemae/ds-icons": "3.1.0-next.2",
-    "@elliemae/ds-popper": "3.1.0-next.2",
-    "@elliemae/ds-shared": "3.1.0-next.2",
-    "@elliemae/ds-system": "3.1.0-next.2",
-    "@elliemae/ds-utilities": "3.1.0-next.2",
+    "@elliemae/ds-button": "3.1.0-next.20",
+    "@elliemae/ds-classnames": "3.1.0-next.20",
+    "@elliemae/ds-grid": "3.1.0-next.20",
+    "@elliemae/ds-icons": "3.1.0-next.20",
+    "@elliemae/ds-popper": "3.1.0-next.20",
+    "@elliemae/ds-shared": "3.1.0-next.20",
+    "@elliemae/ds-system": "3.1.0-next.20",
+    "@elliemae/ds-utilities": "3.1.0-next.20",
     "prop-types": "~15.8.1",
-    "react-desc": "~4.1.3",
     "uid": "2.0.0"
   },
   "devDependencies": {
-    "@testing-library/jest-dom": "~5.16.2",
-    "@testing-library/react": "~12.1.2",
+    "@testing-library/jest-dom": "~5.16.4",
+    "@testing-library/react": "~12.1.3",
     "@testing-library/user-event": "~13.5.0",
-    "styled-components": "~5.3.3"
+    "styled-components": "~5.3.5"
   },
   "peerDependencies": {
     "lodash": "^4.17.21",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
-    "styled-components": "^5.3.3"
+    "styled-components": "^5.3.5"
   },
   "publishConfig": {
     "access": "public",
     "typeSafety": false
+  },
+  "scripts": {
+    "dev": "cross-env NODE_ENV=development node ../../scripts/build/build.mjs --watch",
+    "test": "node ../../scripts/testing/test.mjs",
+    "lint": "node ../../scripts/lint.mjs",
+    "dts": "node ../../scripts/dts.mjs",
+    "build": "cross-env NODE_ENV=production node ../../scripts/build/build.mjs",
+    "checkDeps": "npx -yes ../ds-codemods check-missing-packages --projectFolderPath=\"./\" --ignorePackagesGlobPattern=\"\" --ignoreFilesGlobPattern=\"**/test-ables/*,**/tests/*\""
   }
-}
+}

package/dist/cjs/props.js

@@ -1,34 +0,0 @@
-var __create = Object.create;
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getProtoOf = Object.getPrototypeOf;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __export = (target, all) => {
-  for (var name in all)
-    __defProp(target, name, { get: all[name], enumerable: true });
-};
-var __copyProps = (to, from, except, desc) => {
-  if (from && typeof from === "object" || typeof from === "function") {
-    for (let key of __getOwnPropNames(from))
-      if (!__hasOwnProp.call(to, key) && key !== except)
-        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
-  }
-  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 __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-var props_exports = {};
-__export(props_exports, {
-  DSToolbarV2Schema: () => DSToolbarV2Schema
-});
-module.exports = __toCommonJS(props_exports);
-var React = __toESM(require("react"));
-var import_react_desc = require("react-desc");
-const DSToolbarV2Schema = {
-  alignment: import_react_desc.PropTypes.oneOf(["right", "left"]).description("Whether to align the content left or right").defaultValue("right"),
-  withDepth: import_react_desc.PropTypes.bool.description("Whether to add a box-shadow to the container").defaultValue(true),
-  compact: import_react_desc.PropTypes.bool.description("Whether you want the compact version of the toolbar").defaultValue(false),
-  innerRef: import_react_desc.PropTypes.oneOfType([import_react_desc.PropTypes.func, import_react_desc.PropTypes.object]).description("Reference to attach to the wrapper")
-};
-//# sourceMappingURL=props.js.map

package/dist/cjs/props.js.map

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../src/props.tsx", "../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import { PropTypes } from 'react-desc';\n\nexport const DSToolbarV2Schema = {\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", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,wBAA0B;AAEnB,MAAM,oBAAoB;AAAA,EAC/B,WAAW,4BAAU,MAAM,CAAC,SAAS,MAAM,CAAC,EACzC,YAAY,4CAA4C,EACxD,aAAa,OAAO;AAAA,EACvB,WAAW,4BAAU,KAAK,YAAY,8CAA8C,EAAE,aAAa,IAAI;AAAA,EACvG,SAAS,4BAAU,KAAK,YAAY,qDAAqD,EAAE,aAAa,KAAK;AAAA,EAC7G,UAAU,4BAAU,UAAU,CAAC,4BAAU,MAAM,4BAAU,MAAM,CAAC,EAAE,YAAY,oCAAoC;AACpH;",
-  "names": []
-}

package/dist/esm/props.js

@@ -1,12 +0,0 @@
-import * as React from "react";
-import { PropTypes } from "react-desc";
-const DSToolbarV2Schema = {
-  alignment: PropTypes.oneOf(["right", "left"]).description("Whether to align the content left or right").defaultValue("right"),
-  withDepth: PropTypes.bool.description("Whether to add a box-shadow to the container").defaultValue(true),
-  compact: PropTypes.bool.description("Whether you want the compact version of the toolbar").defaultValue(false),
-  innerRef: PropTypes.oneOfType([PropTypes.func, PropTypes.object]).description("Reference to attach to the wrapper")
-};
-export {
-  DSToolbarV2Schema
-};
-//# sourceMappingURL=props.js.map