@elliemae/ds-toolbar 3.22.0-next.25 → 3.22.0-next.30

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (47) hide show
  1. package/dist/cjs/index.js +1 -3
  2. package/dist/cjs/index.js.map +3 -3
  3. package/dist/esm/index.js +1 -3
  4. package/dist/esm/index.js.map +3 -3
  5. package/dist/types/index.d.ts +1 -3
  6. package/package.json +15 -14
  7. package/dist/cjs/DSToolbarDefinitions.js +0 -38
  8. package/dist/cjs/DSToolbarDefinitions.js.map +0 -7
  9. package/dist/cjs/DSToolbarItemV2.js +0 -79
  10. package/dist/cjs/DSToolbarItemV2.js.map +0 -7
  11. package/dist/cjs/DSToolbarSeparatorV2.js +0 -38
  12. package/dist/cjs/DSToolbarSeparatorV2.js.map +0 -7
  13. package/dist/cjs/DSToolbarV2.js +0 -84
  14. package/dist/cjs/DSToolbarV2.js.map +0 -7
  15. package/dist/cjs/DSToolbarV2Context.js +0 -44
  16. package/dist/cjs/DSToolbarV2Context.js.map +0 -7
  17. package/dist/cjs/react-desc-prop-types.js +0 -70
  18. package/dist/cjs/react-desc-prop-types.js.map +0 -7
  19. package/dist/cjs/styled.js +0 -55
  20. package/dist/cjs/styled.js.map +0 -7
  21. package/dist/cjs/useToolbarItemHandlers.js +0 -82
  22. package/dist/cjs/useToolbarItemHandlers.js.map +0 -7
  23. package/dist/esm/DSToolbarDefinitions.js +0 -8
  24. package/dist/esm/DSToolbarDefinitions.js.map +0 -7
  25. package/dist/esm/DSToolbarItemV2.js +0 -54
  26. package/dist/esm/DSToolbarItemV2.js.map +0 -7
  27. package/dist/esm/DSToolbarSeparatorV2.js +0 -8
  28. package/dist/esm/DSToolbarSeparatorV2.js.map +0 -7
  29. package/dist/esm/DSToolbarV2.js +0 -59
  30. package/dist/esm/DSToolbarV2.js.map +0 -7
  31. package/dist/esm/DSToolbarV2Context.js +0 -14
  32. package/dist/esm/DSToolbarV2Context.js.map +0 -7
  33. package/dist/esm/react-desc-prop-types.js +0 -44
  34. package/dist/esm/react-desc-prop-types.js.map +0 -7
  35. package/dist/esm/styled.js +0 -25
  36. package/dist/esm/styled.js.map +0 -7
  37. package/dist/esm/useToolbarItemHandlers.js +0 -52
  38. package/dist/esm/useToolbarItemHandlers.js.map +0 -7
  39. package/dist/types/DSToolbarDefinitions.d.ts +0 -2
  40. package/dist/types/DSToolbarItemV2.d.ts +0 -5
  41. package/dist/types/DSToolbarSeparatorV2.d.ts +0 -2
  42. package/dist/types/DSToolbarV2.d.ts +0 -5
  43. package/dist/types/DSToolbarV2Context.d.ts +0 -11
  44. package/dist/types/react-desc-prop-types.d.ts +0 -485
  45. package/dist/types/styled.d.ts +0 -7
  46. package/dist/types/tests/DSToolbar.test.d.ts +0 -1
  47. package/dist/types/useToolbarItemHandlers.d.ts +0 -4
@@ -1,82 +0,0 @@
1
- "use strict";
2
- var __create = Object.create;
3
- var __defProp = Object.defineProperty;
4
- var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
5
- var __getOwnPropNames = Object.getOwnPropertyNames;
6
- var __getProtoOf = Object.getPrototypeOf;
7
- var __hasOwnProp = Object.prototype.hasOwnProperty;
8
- var __export = (target, all) => {
9
- for (var name in all)
10
- __defProp(target, name, { get: all[name], enumerable: true });
11
- };
12
- var __copyProps = (to, from, except, desc) => {
13
- if (from && typeof from === "object" || typeof from === "function") {
14
- for (let key of __getOwnPropNames(from))
15
- if (!__hasOwnProp.call(to, key) && key !== except)
16
- __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
17
- }
18
- return to;
19
- };
20
- var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
21
- // If the importer is in node compatibility mode or this is not an ESM
22
- // file that has been converted to a CommonJS file using a Babel-
23
- // compatible transform (i.e. "__esModule" has not been set), then set
24
- // "default" to the CommonJS "module.exports" for node compatibility.
25
- isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
26
- mod
27
- ));
28
- var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
29
- var useToolbarItemHandlers_exports = {};
30
- __export(useToolbarItemHandlers_exports, {
31
- useToolbarItemHandlers: () => useToolbarItemHandlers
32
- });
33
- module.exports = __toCommonJS(useToolbarItemHandlers_exports);
34
- var React = __toESM(require("react"));
35
- var import_react = require("react");
36
- var import_DSToolbarV2Context = require("./DSToolbarV2Context.js");
37
- const findInCircularList = (list, from, criteria, step = 1) => {
38
- for (let i = (from + step + list.length) % list.length; i !== from && from > -1; i = (i + step + list.length) % list.length) {
39
- if (criteria(list[i]))
40
- return i;
41
- }
42
- return from;
43
- };
44
- const useToolbarItemHandlers = (toolbarItemId) => {
45
- const { toolbarUid, itemReferences, setDndDraggingItem } = (0, import_react.useContext)(import_DSToolbarV2Context.DSToolbarV2Context);
46
- const onFocus = (0, import_react.useCallback)(() => {
47
- setDndDraggingItem(toolbarItemId);
48
- }, [setDndDraggingItem, toolbarItemId]);
49
- const onKeyDown = (0, import_react.useCallback)(
50
- (e) => {
51
- const toolbarItems = [...document.querySelectorAll(`#${toolbarUid} .ds-toolbar-item`)];
52
- let nextToolbarItemIndex = -1;
53
- const toolbarItemIndex = toolbarItems.findIndex((domElem) => domElem.id === toolbarItemId);
54
- const criteria = (item) => {
55
- const ref = itemReferences[item.id];
56
- return !ref.current?.getAttribute("disabled");
57
- };
58
- if (["ArrowLeft", "ArrowRight"].includes(e.code)) {
59
- nextToolbarItemIndex = findInCircularList(
60
- toolbarItems,
61
- toolbarItemIndex,
62
- criteria,
63
- e.code === "ArrowLeft" ? -1 : 1
64
- );
65
- } else if (e.code === "Home") {
66
- nextToolbarItemIndex = 0;
67
- } else if (e.code === "End") {
68
- nextToolbarItemIndex = toolbarItems.length - 1;
69
- }
70
- if (nextToolbarItemIndex >= 0 && nextToolbarItemIndex < toolbarItems.length) {
71
- e.preventDefault();
72
- e.stopPropagation();
73
- const ref = itemReferences[toolbarItems[nextToolbarItemIndex].id];
74
- if (ref.current)
75
- ref.current.focus();
76
- }
77
- },
78
- [toolbarUid, toolbarItemId, itemReferences]
79
- );
80
- return { onKeyDown, onFocus };
81
- };
82
- //# sourceMappingURL=useToolbarItemHandlers.js.map
@@ -1,7 +0,0 @@
1
- {
2
- "version": 3,
3
- "sources": ["../../src/useToolbarItemHandlers.tsx", "../../../../scripts/build/transpile/react-shim.js"],
4
- "sourcesContent": ["import { useCallback, useContext } from 'react';\nimport { DSToolbarV2Context } from './DSToolbarV2Context.js';\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?.getAttribute('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", "import * as React from 'react';\nexport { React };\n"],
5
- "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAAwC;AACxC,gCAAmC;AACnC,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,CAAC,CAAC;AAAG,aAAO;AAAA,EAChC;AACA,SAAO;AACT;AAEO,MAAM,yBAAyB,CACpC,kBAIG;AACH,QAAM,EAAE,YAAY,gBAAgB,mBAAmB,QAAI,yBAAW,4CAAkB;AAExF,QAAM,cAAmC,0BAAY,MAAM;AACzD,uBAAmB,aAAa;AAAA,EAClC,GAAG,CAAC,oBAAoB,aAAa,CAAC;AAEtC,QAAM,gBAAwC;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,EAAE;AAElC,eAAO,CAAC,IAAI,SAAS,aAAa,UAAU;AAAA,MAC9C;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,oBAAoB,EAAE,EAAE;AAChE,YAAI,IAAI;AAAS,cAAI,QAAQ,MAAM;AAAA,MACrC;AAAA,IACF;AAAA,IACA,CAAC,YAAY,eAAe,cAAc;AAAA,EAC5C;AAEA,SAAO,EAAE,WAAW,QAAQ;AAC9B;",
6
- "names": []
7
- }
@@ -1,8 +0,0 @@
1
- import * as React from "react";
2
- const DSToolbarName = "DSToolbar";
3
- const DSToolbarItemName = "DSToolbarItem";
4
- export {
5
- DSToolbarItemName,
6
- DSToolbarName
7
- };
8
- //# sourceMappingURL=DSToolbarDefinitions.js.map
@@ -1,7 +0,0 @@
1
- {
2
- "version": 3,
3
- "sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/DSToolbarDefinitions.tsx"],
4
- "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "export const DSToolbarName = 'DSToolbar';\n\nexport const DSToolbarItemName = 'DSToolbarItem';\n"],
5
- "mappings": "AAAA,YAAY,WAAW;ACAhB,MAAM,gBAAgB;AAEtB,MAAM,oBAAoB;",
6
- "names": []
7
- }
@@ -1,54 +0,0 @@
1
- import * as React from "react";
2
- import { jsx } from "react/jsx-runtime";
3
- import { useContext, useMemo, useRef } from "react";
4
- import {
5
- describe,
6
- useMemoMergePropsWithDefault,
7
- useValidateTypescriptPropTypes,
8
- useGetGlobalAttributes
9
- } from "@elliemae/ds-props-helpers";
10
- import { uid } from "uid";
11
- import { omit } from "lodash";
12
- import { DSToolbarV2Context } from "./DSToolbarV2Context.js";
13
- import { StyledToolbarItem } from "./styled.js";
14
- import { useToolbarItemHandlers } from "./useToolbarItemHandlers.js";
15
- import { defaultItemProps, DSToolbarItemV2Schema } from "./react-desc-prop-types.js";
16
- import { DSToolbarItemName } from "./DSToolbarDefinitions.js";
17
- const DSToolbarItemV2 = (props) => {
18
- const propsWithDefaults = useMemoMergePropsWithDefault(props, defaultItemProps);
19
- useValidateTypescriptPropTypes(propsWithDefaults, DSToolbarItemV2Schema, DSToolbarItemName);
20
- const { render: ComponentRenderer, isFirstItem } = propsWithDefaults;
21
- const { id: providedId, ...restGlobals } = omit(useGetGlobalAttributes(propsWithDefaults), ["rows", "cols", "wrap"]);
22
- const { registerReference, dndDraggingItem } = useContext(DSToolbarV2Context);
23
- const ref = useRef(null);
24
- const toolbarItemId = useMemo(() => {
25
- const id = providedId ?? `ds-toolbar-item-${uid()}`;
26
- registerReference(id, ref);
27
- return id;
28
- }, [registerReference, ref, providedId]);
29
- const tabIndex = useMemo(
30
- () => dndDraggingItem === toolbarItemId || !dndDraggingItem && isFirstItem ? 0 : -1,
31
- [dndDraggingItem, isFirstItem, toolbarItemId]
32
- );
33
- const handlers = useToolbarItemHandlers(toolbarItemId);
34
- return /* @__PURE__ */ jsx(
35
- StyledToolbarItem,
36
- {
37
- id: toolbarItemId,
38
- "data-testid": "ds-toolbar-item",
39
- className: "ds-toolbar-item",
40
- ...handlers,
41
- ...restGlobals,
42
- children: /* @__PURE__ */ jsx(ComponentRenderer, { innerRef: ref, tabIndex })
43
- }
44
- );
45
- };
46
- DSToolbarItemV2.propTypes = DSToolbarItemV2Schema;
47
- DSToolbarItemV2.displayName = DSToolbarItemName;
48
- const DSToolbarItemV2WithSchema = describe(DSToolbarItemV2).description("Toolbar Item");
49
- DSToolbarItemV2WithSchema.propTypes = DSToolbarItemV2Schema;
50
- export {
51
- DSToolbarItemV2,
52
- DSToolbarItemV2WithSchema
53
- };
54
- //# sourceMappingURL=DSToolbarItemV2.js.map
@@ -1,7 +0,0 @@
1
- {
2
- "version": 3,
3
- "sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/DSToolbarItemV2.tsx"],
4
- "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-props-helpers';\nimport { uid } from 'uid';\nimport { omit } from 'lodash';\nimport { DSToolbarV2Context } from './DSToolbarV2Context.js';\nimport { StyledToolbarItem } from './styled.js';\nimport { useToolbarItemHandlers } from './useToolbarItemHandlers.js';\nimport { defaultItemProps, DSToolbarItemV2Schema } from './react-desc-prop-types.js';\nimport type { DSToolbarItemT } from './react-desc-prop-types.js';\nimport { DSToolbarItemName } from './DSToolbarDefinitions.js';\nconst DSToolbarItemV2: React.ComponentType<DSToolbarItemT.Props> = (props) => {\n const propsWithDefaults = useMemoMergePropsWithDefault<DSToolbarItemT.Props>(props, defaultItemProps);\n\n useValidateTypescriptPropTypes(propsWithDefaults, DSToolbarItemV2Schema, DSToolbarItemName);\n const { render: ComponentRenderer, isFirstItem } = propsWithDefaults;\n const { id: providedId, ...restGlobals } = omit(useGetGlobalAttributes(propsWithDefaults), ['rows', 'cols', 'wrap']);\n const { registerReference, dndDraggingItem } = useContext(DSToolbarV2Context);\n const ref = useRef<DSToolbarItemT.RenderHTMLElementT>(null);\n\n const toolbarItemId = useMemo(() => {\n const id = providedId ?? `ds-toolbar-item-${uid()}`;\n registerReference(id, ref);\n return id;\n }, [registerReference, ref, providedId]);\n\n const tabIndex = useMemo(\n () => (dndDraggingItem === toolbarItemId || (!dndDraggingItem && isFirstItem) ? 0 : -1),\n [dndDraggingItem, 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 <ComponentRenderer innerRef={ref} tabIndex={tabIndex} />\n </StyledToolbarItem>\n );\n};\n\nDSToolbarItemV2.propTypes = DSToolbarItemV2Schema;\n\nDSToolbarItemV2.displayName = DSToolbarItemName;\nconst DSToolbarItemV2WithSchema = describe(DSToolbarItemV2).description('Toolbar Item');\nDSToolbarItemV2WithSchema.propTypes = DSToolbarItemV2Schema;\n\nexport { DSToolbarItemV2, DSToolbarItemV2WithSchema };\n"],
5
- "mappings": "AAAA,YAAY,WAAW;AC6CjB;AA5CN,SAAgB,YAAY,SAAS,cAAc;AACnD;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,WAAW;AACpB,SAAS,YAAY;AACrB,SAAS,0BAA0B;AACnC,SAAS,yBAAyB;AAClC,SAAS,8BAA8B;AACvC,SAAS,kBAAkB,6BAA6B;AAExD,SAAS,yBAAyB;AAClC,MAAM,kBAA6D,CAAC,UAAU;AAC5E,QAAM,oBAAoB,6BAAmD,OAAO,gBAAgB;AAEpG,iCAA+B,mBAAmB,uBAAuB,iBAAiB;AAC1F,QAAM,EAAE,QAAQ,mBAAmB,YAAY,IAAI;AACnD,QAAM,EAAE,IAAI,YAAY,GAAG,YAAY,IAAI,KAAK,uBAAuB,iBAAiB,GAAG,CAAC,QAAQ,QAAQ,MAAM,CAAC;AACnH,QAAM,EAAE,mBAAmB,gBAAgB,IAAI,WAAW,kBAAkB;AAC5E,QAAM,MAAM,OAA0C,IAAI;AAE1D,QAAM,gBAAgB,QAAQ,MAAM;AAClC,UAAM,KAAK,cAAc,mBAAmB,IAAI;AAChD,sBAAkB,IAAI,GAAG;AACzB,WAAO;AAAA,EACT,GAAG,CAAC,mBAAmB,KAAK,UAAU,CAAC;AAEvC,QAAM,WAAW;AAAA,IACf,MAAO,oBAAoB,iBAAkB,CAAC,mBAAmB,cAAe,IAAI;AAAA,IACpF,CAAC,iBAAiB,aAAa,aAAa;AAAA,EAC9C;AAEA,QAAM,WAAW,uBAAuB,aAAa;AACrD,SACE;AAAA,IAAC;AAAA;AAAA,MACC,IAAI;AAAA,MACJ,eAAY;AAAA,MACZ,WAAU;AAAA,MACT,GAAG;AAAA,MACH,GAAG;AAAA,MAEJ,8BAAC,qBAAkB,UAAU,KAAK,UAAoB;AAAA;AAAA,EACxD;AAEJ;AAEA,gBAAgB,YAAY;AAE5B,gBAAgB,cAAc;AAC9B,MAAM,4BAA4B,SAAS,eAAe,EAAE,YAAY,cAAc;AACtF,0BAA0B,YAAY;",
6
- "names": []
7
- }
@@ -1,8 +0,0 @@
1
- import * as React from "react";
2
- import { jsx } from "react/jsx-runtime";
3
- import { StyledSeparator } from "./styled.js";
4
- const DSToolbarSeparatorV2 = () => /* @__PURE__ */ jsx(StyledSeparator, { className: "ds-toolbar-separator" });
5
- export {
6
- DSToolbarSeparatorV2
7
- };
8
- //# sourceMappingURL=DSToolbarSeparatorV2.js.map
@@ -1,7 +0,0 @@
1
- {
2
- "version": 3,
3
- "sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/DSToolbarSeparatorV2.tsx"],
4
- "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport { StyledSeparator } from './styled.js';\n\nexport const DSToolbarSeparatorV2: React.ComponentType = () => <StyledSeparator className=\"ds-toolbar-separator\" />;\n"],
5
- "mappings": "AAAA,YAAY,WAAW;ACGwC;AAF/D,SAAS,uBAAuB;AAEzB,MAAM,uBAA4C,MAAM,oBAAC,mBAAgB,WAAU,wBAAuB;",
6
- "names": []
7
- }
@@ -1,59 +0,0 @@
1
- import * as React from "react";
2
- import { jsx } from "react/jsx-runtime";
3
- import { useCallback, useMemo, useState } from "react";
4
- import {
5
- useMemoMergePropsWithDefault,
6
- useValidateTypescriptPropTypes,
7
- useGetGlobalAttributes,
8
- describe
9
- } from "@elliemae/ds-props-helpers";
10
- import { uid } from "uid";
11
- import { omit } from "lodash";
12
- import { DSToolbarV2Context } from "./DSToolbarV2Context.js";
13
- import { DSToolbarV2Schema, defaultProps } from "./react-desc-prop-types.js";
14
- import { StyledToolbarWrapper } from "./styled.js";
15
- import { DSToolbarName } from "./DSToolbarDefinitions.js";
16
- const DSToolbarV2 = (props) => {
17
- const propsWithDefaults = useMemoMergePropsWithDefault(props, defaultProps);
18
- useValidateTypescriptPropTypes(propsWithDefaults, DSToolbarV2Schema, DSToolbarName);
19
- const { alignment, withDepth, compact, innerRef, children } = propsWithDefaults;
20
- const globalsProps = omit(useGetGlobalAttributes(propsWithDefaults), ["cols", "rows", "wrap"]);
21
- const toolbarUid = useMemo(() => globalsProps.id ?? `ds-toolbar-${uid()}`, [globalsProps.id]);
22
- const [itemReferences, setItemReferences] = useState({});
23
- const [dndDraggingItem, setDndDraggingItem] = useState("");
24
- const registerReference = useCallback(
25
- (itemId, ref) => {
26
- setItemReferences((prevItemReferences) => ({ ...prevItemReferences, [itemId]: ref }));
27
- },
28
- [setItemReferences]
29
- );
30
- const ctx = useMemo(
31
- () => ({ toolbarUid, registerReference, itemReferences, dndDraggingItem, setDndDraggingItem }),
32
- [dndDraggingItem, itemReferences, registerReference, toolbarUid]
33
- );
34
- return /* @__PURE__ */ jsx(DSToolbarV2Context.Provider, { value: ctx, children: /* @__PURE__ */ jsx(
35
- StyledToolbarWrapper,
36
- {
37
- role: "toolbar",
38
- "data-testid": "ds-toolbar-wrapper",
39
- id: toolbarUid,
40
- alignItems: "center",
41
- justifyContent: alignment === "left" ? "flex-start" : "flex-end",
42
- withDepth,
43
- gutter: "xxs2",
44
- compact,
45
- ref: innerRef,
46
- ...globalsProps,
47
- children
48
- }
49
- ) });
50
- };
51
- DSToolbarV2.propTypes = DSToolbarV2Schema;
52
- DSToolbarV2.displayName = DSToolbarName;
53
- const DSToolbarV2WithSchema = describe(DSToolbarV2).description("Toolbar");
54
- DSToolbarV2WithSchema.propTypes = DSToolbarV2Schema;
55
- export {
56
- DSToolbarV2,
57
- DSToolbarV2WithSchema
58
- };
59
- //# sourceMappingURL=DSToolbarV2.js.map
@@ -1,7 +0,0 @@
1
- {
2
- "version": 3,
3
- "sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/DSToolbarV2.tsx"],
4
- "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 { omit } from 'lodash';\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';\nconst DSToolbarV2: React.ComponentType<DSToolbarT.Props> = (props) => {\n const propsWithDefaults = useMemoMergePropsWithDefault<DSToolbarT.InternalProps>(props, defaultProps);\n\n useValidateTypescriptPropTypes(propsWithDefaults, DSToolbarV2Schema, DSToolbarName);\n\n const { alignment, withDepth, compact, innerRef, children } = propsWithDefaults;\n\n const globalsProps = omit(useGetGlobalAttributes(propsWithDefaults), ['cols', 'rows', 'wrap']);\n\n const toolbarUid = useMemo(() => globalsProps.id ?? `ds-toolbar-${uid()}`, [globalsProps.id]);\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"],
5
- "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,YAAY;AACrB,SAAS,0BAA0B;AACnC,SAAS,mBAAmB,oBAAoB;AAChD,SAAS,4BAA4B;AAErC,SAAS,qBAAqB;AAC9B,MAAM,cAAqD,CAAC,UAAU;AACpE,QAAM,oBAAoB,6BAAuD,OAAO,YAAY;AAEpG,iCAA+B,mBAAmB,mBAAmB,aAAa;AAElF,QAAM,EAAE,WAAW,WAAW,SAAS,UAAU,SAAS,IAAI;AAE9D,QAAM,eAAe,KAAK,uBAAuB,iBAAiB,GAAG,CAAC,QAAQ,QAAQ,MAAM,CAAC;AAE7F,QAAM,aAAa,QAAQ,MAAM,aAAa,MAAM,cAAc,IAAI,KAAK,CAAC,aAAa,EAAE,CAAC;AAE5F,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,MAAM,GAAG,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;",
6
- "names": []
7
- }
@@ -1,14 +0,0 @@
1
- import * as React from "react";
2
- import { createContext } from "react";
3
- const DSToolbarV2Context = createContext({
4
- registerReference: () => null,
5
- itemReferences: {},
6
- toolbarUid: "",
7
- dndDraggingItem: "",
8
- setDndDraggingItem: () => {
9
- }
10
- });
11
- export {
12
- DSToolbarV2Context
13
- };
14
- //# sourceMappingURL=DSToolbarV2Context.js.map
@@ -1,7 +0,0 @@
1
- {
2
- "version": 3,
3
- "sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/DSToolbarV2Context.tsx"],
4
- "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: React.MutableRefObject<DSToolbarItemT.RenderHTMLElementT>) => void;\n itemReferences: Record<string, MutableRefObject<HTMLElement | null>>;\n toolbarUid: string;\n dndDraggingItem: string;\n setDndDraggingItem: React.Dispatch<React.SetStateAction<string>>;\n}\nexport const DSToolbarV2Context = createContext<IDSToolbarV2Context>({\n registerReference: () => null,\n itemReferences: {},\n toolbarUid: '',\n dndDraggingItem: '',\n setDndDraggingItem: () => {},\n});\n"],
5
- "mappings": "AAAA,YAAY,WAAW;ACCvB,SAAS,qBAAqB;AASvB,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;",
6
- "names": []
7
- }
@@ -1,44 +0,0 @@
1
- import * as React from "react";
2
- import { Fragment, jsx } from "react/jsx-runtime";
3
- import {
4
- globalAttributesPropTypes,
5
- xstyledPropTypes,
6
- PropTypes
7
- } from "@elliemae/ds-props-helpers";
8
- const defaultItemProps = {
9
- render: () => /* @__PURE__ */ jsx(Fragment, {}),
10
- isFirstItem: false
11
- };
12
- const defaultProps = {
13
- alignment: "right",
14
- withDepth: true,
15
- compact: false
16
- };
17
- const DSToolbarPropTypes = {
18
- ...xstyledPropTypes,
19
- ...globalAttributesPropTypes,
20
- alignment: PropTypes.oneOf(["right", "left"]).description("Whether to align the content left or right").defaultValue("right"),
21
- withDepth: PropTypes.bool.description("Whether to add a box-shadow to the container").defaultValue(true),
22
- compact: PropTypes.bool.description("Whether you want the compact version of the toolbar").defaultValue(false),
23
- innerRef: PropTypes.oneOfType([PropTypes.func, PropTypes.object]).description("Reference to attach to the wrapper")
24
- };
25
- const DSToolbarV2Schema = DSToolbarPropTypes;
26
- const DSToolbarItemV2PropTypes = {
27
- ...xstyledPropTypes,
28
- ...globalAttributesPropTypes,
29
- render: PropTypes.func.isRequired.description("render function").defaultValue(() => {
30
- }),
31
- isFirstItem: PropTypes.bool.description(
32
- "If true the item will have tab index 0 to be the first element focusable by keyboard on the page load"
33
- ).defaultValue(false)
34
- };
35
- const DSToolbarItemV2Schema = DSToolbarPropTypes;
36
- export {
37
- DSToolbarItemV2PropTypes,
38
- DSToolbarItemV2Schema,
39
- DSToolbarPropTypes,
40
- DSToolbarV2Schema,
41
- defaultItemProps,
42
- defaultProps
43
- };
44
- //# sourceMappingURL=react-desc-prop-types.js.map
@@ -1,7 +0,0 @@
1
- {
2
- "version": 3,
3
- "sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/react-desc-prop-types.tsx"],
4
- "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import {\n globalAttributesPropTypes,\n xstyledPropTypes,\n PropTypes,\n type GlobalAttributesT,\n type XstyledProps,\n type DSPropTypesSchema,\n} from '@elliemae/ds-props-helpers';\nimport { type WeakValidationMap } from 'react';\n\nexport declare namespace DSToolbarT {\n export interface DefaultProps {\n alignment: 'left' | 'right';\n withDepth: boolean;\n compact: boolean;\n }\n\n export interface OptionalProps {\n innerRef?: React.MutableRefObject<HTMLDivElement>;\n children?: React.ReactNode;\n }\n\n export interface Props\n extends Partial<DefaultProps>,\n OptionalProps,\n Omit<GlobalAttributesT<HTMLButtonElement>, keyof DefaultProps | keyof OptionalProps>,\n XstyledProps {}\n export interface InternalProps\n extends DefaultProps,\n OptionalProps,\n Omit<GlobalAttributesT<HTMLButtonElement>, keyof DefaultProps | keyof OptionalProps>,\n XstyledProps {}\n}\n\nexport declare namespace DSToolbarItemT {\n export type RenderHTMLElementT =\n | HTMLElement\n | HTMLButtonElement\n | HTMLInputElement\n | HTMLTextAreaElement\n | HTMLSelectElement\n | HTMLOptionElement\n | null;\n\n export interface Props {\n render: <T>(props: { innerRef: React.MutableRefObject<T>; tabIndex: number }) => JSX.Element;\n isFirstItem?: boolean;\n }\n}\n\nexport const defaultItemProps: DSToolbarItemT.Props = {\n render: () => <></>,\n isFirstItem: false,\n};\n\nexport const defaultProps: DSToolbarT.DefaultProps = {\n alignment: 'right',\n withDepth: true,\n compact: false,\n};\n\nexport const DSToolbarPropTypes: DSPropTypesSchema<DSToolbarT.Props> = {\n ...xstyledPropTypes,\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 DSToolbarV2Schema = DSToolbarPropTypes as unknown as WeakValidationMap<DSToolbarT.Props>;\n\nexport const DSToolbarItemV2PropTypes = {\n ...xstyledPropTypes,\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\nexport const DSToolbarItemV2Schema = DSToolbarPropTypes as unknown as WeakValidationMap<DSToolbarItemT.Props>;\n"],
5
- "mappings": "AAAA,YAAY,WAAW;ACmDP;AAnDhB;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,OAIK;AA2CA,MAAM,mBAAyC;AAAA,EACpD,QAAQ,MAAM,gCAAE;AAAA,EAChB,aAAa;AACf;AAEO,MAAM,eAAwC;AAAA,EACnD,WAAW;AAAA,EACX,WAAW;AAAA,EACX,SAAS;AACX;AAEO,MAAM,qBAA0D;AAAA,EACrE,GAAG;AAAA,EACH,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,oBAAoB;AAE1B,MAAM,2BAA2B;AAAA,EACtC,GAAG;AAAA,EACH,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;AAEO,MAAM,wBAAwB;",
6
- "names": []
7
- }
@@ -1,25 +0,0 @@
1
- import * as React from "react";
2
- import { styled } from "@elliemae/ds-system";
3
- import Grid from "@elliemae/ds-grid";
4
- const StyledToolbarWrapper = styled(Grid)`
5
- background-color: ${(props) => props.theme.colors.neutral["000"]};
6
-
7
- min-height: ${(props) => props.compact ? "28px" : "36px"};
8
- max-height: ${(props) => props.theme.space.xxl};
9
-
10
- padding: 0 ${(props) => props.theme.space.xxs};
11
- grid-auto-flow: column;
12
- box-shadow: ${(props) => !props.withDepth ? "none" : "0 1px 5px 0 rgb(0 0 0 / 13%), 0 2px 4px 0 rgb(0 0 0 / 20%)"};
13
- `;
14
- const StyledToolbarItem = styled(Grid)``;
15
- const StyledSeparator = styled(Grid)`
16
- height: 30px;
17
- width: 1px;
18
- background-color: ${(props) => props.theme.colors.neutral[200]};
19
- `;
20
- export {
21
- StyledSeparator,
22
- StyledToolbarItem,
23
- StyledToolbarWrapper
24
- };
25
- //# sourceMappingURL=styled.js.map
@@ -1,7 +0,0 @@
1
- {
2
- "version": 3,
3
- "sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/styled.tsx"],
4
- "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)<{ compact: boolean; withDepth: boolean }>`\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"],
5
- "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,cAAc;AACvB,OAAO,UAAU;AAEV,MAAM,uBAAuB,OAAO,IAAI;AAAA,sBACzB,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ,KAAK;AAAA;AAAA,gBAEjD,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,GAAG;AAAA;",
6
- "names": []
7
- }
@@ -1,52 +0,0 @@
1
- import * as React from "react";
2
- import { useCallback, useContext } from "react";
3
- import { DSToolbarV2Context } from "./DSToolbarV2Context.js";
4
- const findInCircularList = (list, from, criteria, step = 1) => {
5
- for (let i = (from + step + list.length) % list.length; i !== from && from > -1; i = (i + step + list.length) % list.length) {
6
- if (criteria(list[i]))
7
- return i;
8
- }
9
- return from;
10
- };
11
- const useToolbarItemHandlers = (toolbarItemId) => {
12
- const { toolbarUid, itemReferences, setDndDraggingItem } = useContext(DSToolbarV2Context);
13
- const onFocus = useCallback(() => {
14
- setDndDraggingItem(toolbarItemId);
15
- }, [setDndDraggingItem, toolbarItemId]);
16
- const onKeyDown = useCallback(
17
- (e) => {
18
- const toolbarItems = [...document.querySelectorAll(`#${toolbarUid} .ds-toolbar-item`)];
19
- let nextToolbarItemIndex = -1;
20
- const toolbarItemIndex = toolbarItems.findIndex((domElem) => domElem.id === toolbarItemId);
21
- const criteria = (item) => {
22
- const ref = itemReferences[item.id];
23
- return !ref.current?.getAttribute("disabled");
24
- };
25
- if (["ArrowLeft", "ArrowRight"].includes(e.code)) {
26
- nextToolbarItemIndex = findInCircularList(
27
- toolbarItems,
28
- toolbarItemIndex,
29
- criteria,
30
- e.code === "ArrowLeft" ? -1 : 1
31
- );
32
- } else if (e.code === "Home") {
33
- nextToolbarItemIndex = 0;
34
- } else if (e.code === "End") {
35
- nextToolbarItemIndex = toolbarItems.length - 1;
36
- }
37
- if (nextToolbarItemIndex >= 0 && nextToolbarItemIndex < toolbarItems.length) {
38
- e.preventDefault();
39
- e.stopPropagation();
40
- const ref = itemReferences[toolbarItems[nextToolbarItemIndex].id];
41
- if (ref.current)
42
- ref.current.focus();
43
- }
44
- },
45
- [toolbarUid, toolbarItemId, itemReferences]
46
- );
47
- return { onKeyDown, onFocus };
48
- };
49
- export {
50
- useToolbarItemHandlers
51
- };
52
- //# sourceMappingURL=useToolbarItemHandlers.js.map
@@ -1,7 +0,0 @@
1
- {
2
- "version": 3,
3
- "sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/useToolbarItemHandlers.tsx"],
4
- "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { useCallback, useContext } from 'react';\nimport { DSToolbarV2Context } from './DSToolbarV2Context.js';\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?.getAttribute('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"],
5
- "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,aAAa,kBAAkB;AACxC,SAAS,0BAA0B;AACnC,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,CAAC,CAAC;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,EAAE;AAElC,eAAO,CAAC,IAAI,SAAS,aAAa,UAAU;AAAA,MAC9C;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,oBAAoB,EAAE,EAAE;AAChE,YAAI,IAAI;AAAS,cAAI,QAAQ,MAAM;AAAA,MACrC;AAAA,IACF;AAAA,IACA,CAAC,YAAY,eAAe,cAAc;AAAA,EAC5C;AAEA,SAAO,EAAE,WAAW,QAAQ;AAC9B;",
6
- "names": []
7
- }
@@ -1,2 +0,0 @@
1
- export declare const DSToolbarName = "DSToolbar";
2
- export declare const DSToolbarItemName = "DSToolbarItem";
@@ -1,5 +0,0 @@
1
- import React from 'react';
2
- import type { DSToolbarItemT } from './react-desc-prop-types.js';
3
- declare const DSToolbarItemV2: React.ComponentType<DSToolbarItemT.Props>;
4
- declare const DSToolbarItemV2WithSchema: import("@elliemae/ds-props-helpers/dist/types/propTypes/types.js").DocumentedReactComponent<DSToolbarItemT.Props>;
5
- export { DSToolbarItemV2, DSToolbarItemV2WithSchema };
@@ -1,2 +0,0 @@
1
- import React from 'react';
2
- export declare const DSToolbarSeparatorV2: React.ComponentType;
@@ -1,5 +0,0 @@
1
- import React from 'react';
2
- import type { DSToolbarT } from './react-desc-prop-types.js';
3
- declare const DSToolbarV2: React.ComponentType<DSToolbarT.Props>;
4
- declare const DSToolbarV2WithSchema: import("@elliemae/ds-props-helpers/dist/types/propTypes/types.js").DocumentedReactComponent<DSToolbarT.Props>;
5
- export { DSToolbarV2, DSToolbarV2WithSchema };
@@ -1,11 +0,0 @@
1
- import type { MutableRefObject } from 'react';
2
- import { type DSToolbarItemT } from 'react-desc-prop-types';
3
- interface IDSToolbarV2Context {
4
- registerReference: (uid: string, ref: React.MutableRefObject<DSToolbarItemT.RenderHTMLElementT>) => void;
5
- itemReferences: Record<string, MutableRefObject<HTMLElement | null>>;
6
- toolbarUid: string;
7
- dndDraggingItem: string;
8
- setDndDraggingItem: React.Dispatch<React.SetStateAction<string>>;
9
- }
10
- export declare const DSToolbarV2Context: import("react").Context<IDSToolbarV2Context>;
11
- export {};