@elliemae/ds-toolbar 3.22.0-next.8 → 3.22.0-rc.0

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 (82) hide show
  1. package/dist/cjs/index.js +5 -6
  2. package/dist/cjs/index.js.map +4 -4
  3. package/dist/esm/index.js +5 -6
  4. package/dist/esm/index.js.map +4 -4
  5. package/dist/types/index.d.ts +4 -5
  6. package/package.json +21 -19
  7. package/dist/cjs/DSToolbarDefinitions.js +0 -38
  8. package/dist/cjs/DSToolbarDefinitions.js.map +0 -7
  9. package/dist/cjs/DSToolbarItemV2.js +0 -78
  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 -83
  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/deprecated/DSToolbar.js +0 -96
  18. package/dist/cjs/deprecated/DSToolbar.js.map +0 -7
  19. package/dist/cjs/deprecated/ToolbarDivider.js +0 -40
  20. package/dist/cjs/deprecated/ToolbarDivider.js.map +0 -7
  21. package/dist/cjs/deprecated/ToolbarGroup.js +0 -50
  22. package/dist/cjs/deprecated/ToolbarGroup.js.map +0 -7
  23. package/dist/cjs/deprecated/ToolbarItem.js +0 -60
  24. package/dist/cjs/deprecated/ToolbarItem.js.map +0 -7
  25. package/dist/cjs/deprecated/decorateToolbarChildren.js +0 -45
  26. package/dist/cjs/deprecated/decorateToolbarChildren.js.map +0 -7
  27. package/dist/cjs/deprecated/hooks/useKeyboardNavigation.js +0 -72
  28. package/dist/cjs/deprecated/hooks/useKeyboardNavigation.js.map +0 -7
  29. package/dist/cjs/deprecated/index.js +0 -38
  30. package/dist/cjs/deprecated/index.js.map +0 -7
  31. package/dist/cjs/react-desc-prop-types.js +0 -64
  32. package/dist/cjs/react-desc-prop-types.js.map +0 -7
  33. package/dist/cjs/styled.js +0 -55
  34. package/dist/cjs/styled.js.map +0 -7
  35. package/dist/cjs/useToolbarItemHandlers.js +0 -82
  36. package/dist/cjs/useToolbarItemHandlers.js.map +0 -7
  37. package/dist/esm/DSToolbarDefinitions.js +0 -8
  38. package/dist/esm/DSToolbarDefinitions.js.map +0 -7
  39. package/dist/esm/DSToolbarItemV2.js +0 -53
  40. package/dist/esm/DSToolbarItemV2.js.map +0 -7
  41. package/dist/esm/DSToolbarSeparatorV2.js +0 -8
  42. package/dist/esm/DSToolbarSeparatorV2.js.map +0 -7
  43. package/dist/esm/DSToolbarV2.js +0 -58
  44. package/dist/esm/DSToolbarV2.js.map +0 -7
  45. package/dist/esm/DSToolbarV2Context.js +0 -14
  46. package/dist/esm/DSToolbarV2Context.js.map +0 -7
  47. package/dist/esm/deprecated/DSToolbar.js +0 -66
  48. package/dist/esm/deprecated/DSToolbar.js.map +0 -7
  49. package/dist/esm/deprecated/ToolbarDivider.js +0 -10
  50. package/dist/esm/deprecated/ToolbarDivider.js.map +0 -7
  51. package/dist/esm/deprecated/ToolbarGroup.js +0 -20
  52. package/dist/esm/deprecated/ToolbarGroup.js.map +0 -7
  53. package/dist/esm/deprecated/ToolbarItem.js +0 -30
  54. package/dist/esm/deprecated/ToolbarItem.js.map +0 -7
  55. package/dist/esm/deprecated/decorateToolbarChildren.js +0 -15
  56. package/dist/esm/deprecated/decorateToolbarChildren.js.map +0 -7
  57. package/dist/esm/deprecated/hooks/useKeyboardNavigation.js +0 -42
  58. package/dist/esm/deprecated/hooks/useKeyboardNavigation.js.map +0 -7
  59. package/dist/esm/deprecated/index.js +0 -7
  60. package/dist/esm/deprecated/index.js.map +0 -7
  61. package/dist/esm/react-desc-prop-types.js +0 -34
  62. package/dist/esm/react-desc-prop-types.js.map +0 -7
  63. package/dist/esm/styled.js +0 -25
  64. package/dist/esm/styled.js.map +0 -7
  65. package/dist/esm/useToolbarItemHandlers.js +0 -52
  66. package/dist/esm/useToolbarItemHandlers.js.map +0 -7
  67. package/dist/types/DSToolbarDefinitions.d.ts +0 -2
  68. package/dist/types/DSToolbarItemV2.d.ts +0 -5
  69. package/dist/types/DSToolbarSeparatorV2.d.ts +0 -2
  70. package/dist/types/DSToolbarV2.d.ts +0 -5
  71. package/dist/types/DSToolbarV2Context.d.ts +0 -10
  72. package/dist/types/deprecated/DSToolbar.d.ts +0 -37
  73. package/dist/types/deprecated/ToolbarDivider.d.ts +0 -3
  74. package/dist/types/deprecated/ToolbarGroup.d.ts +0 -14
  75. package/dist/types/deprecated/ToolbarItem.d.ts +0 -16
  76. package/dist/types/deprecated/decorateToolbarChildren.d.ts +0 -2
  77. package/dist/types/deprecated/hooks/useKeyboardNavigation.d.ts +0 -9
  78. package/dist/types/deprecated/index.d.ts +0 -2
  79. package/dist/types/react-desc-prop-types.d.ts +0 -779
  80. package/dist/types/styled.d.ts +0 -4
  81. package/dist/types/tests/DSToolbar.test.d.ts +0 -1
  82. package/dist/types/useToolbarItemHandlers.d.ts +0 -4
@@ -1,53 +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 { DSToolbarV2Context } from "./DSToolbarV2Context.js";
12
- import { StyledToolbarItem } from "./styled.js";
13
- import { useToolbarItemHandlers } from "./useToolbarItemHandlers.js";
14
- import { defaultItemProps, DSToolbarItemV2Schema } from "./react-desc-prop-types.js";
15
- import { DSToolbarItemName } from "./DSToolbarDefinitions.js";
16
- const DSToolbarItemV2 = (props) => {
17
- const propsWithDefaults = useMemoMergePropsWithDefault(props, defaultItemProps);
18
- useValidateTypescriptPropTypes(propsWithDefaults, DSToolbarItemV2Schema, DSToolbarItemName);
19
- const { render: ComponentRenderer, isFirstItem } = propsWithDefaults;
20
- const { id: providedId, ...restGlobals } = useGetGlobalAttributes(propsWithDefaults);
21
- const { registerReference, dndDraggingItem } = useContext(DSToolbarV2Context);
22
- const ref = useRef(null);
23
- const toolbarItemId = useMemo(() => {
24
- const id = providedId ?? `ds-toolbar-item-${uid()}`;
25
- registerReference(id, ref);
26
- return id;
27
- }, [registerReference, ref, providedId]);
28
- const tabIndex = useMemo(
29
- () => dndDraggingItem === toolbarItemId || !dndDraggingItem && isFirstItem ? 0 : -1,
30
- [dndDraggingItem, isFirstItem, toolbarItemId]
31
- );
32
- const handlers = useToolbarItemHandlers(toolbarItemId);
33
- return /* @__PURE__ */ jsx(
34
- StyledToolbarItem,
35
- {
36
- id: toolbarItemId,
37
- "data-testid": "ds-toolbar-item",
38
- className: "ds-toolbar-item",
39
- ...handlers,
40
- ...restGlobals,
41
- children: /* @__PURE__ */ jsx(ComponentRenderer, { innerRef: ref, tabIndex })
42
- }
43
- );
44
- };
45
- DSToolbarItemV2.propTypes = DSToolbarItemV2Schema;
46
- DSToolbarItemV2.displayName = DSToolbarItemName;
47
- const DSToolbarItemV2WithSchema = describe(DSToolbarItemV2).description("Toolbar Item");
48
- DSToolbarItemV2WithSchema.propTypes = DSToolbarItemV2Schema;
49
- export {
50
- DSToolbarItemV2,
51
- DSToolbarItemV2WithSchema
52
- };
53
- //# 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 { 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';\n\nconst DSToolbarItemV2: React.ComponentType<DSToolbarItemT.Props> = (props) => {\n const propsWithDefaults = useMemoMergePropsWithDefault(props, defaultItemProps);\n\n useValidateTypescriptPropTypes(propsWithDefaults, DSToolbarItemV2Schema, DSToolbarItemName);\n const { render: ComponentRenderer, isFirstItem } = propsWithDefaults;\n const { id: providedId, ...restGlobals } = useGetGlobalAttributes(propsWithDefaults);\n const { registerReference, dndDraggingItem } = useContext(DSToolbarV2Context);\n const ref = useRef<HTMLElement | null>(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,0BAA0B;AACnC,SAAS,yBAAyB;AAClC,SAAS,8BAA8B;AACvC,SAAS,kBAAkB,6BAA6B;AAExD,SAAS,yBAAyB;AAElC,MAAM,kBAA6D,CAAC,UAAU;AAC5E,QAAM,oBAAoB,6BAA6B,OAAO,gBAAgB;AAE9E,iCAA+B,mBAAmB,uBAAuB,iBAAiB;AAC1F,QAAM,EAAE,QAAQ,mBAAmB,YAAY,IAAI;AACnD,QAAM,EAAE,IAAI,YAAY,GAAG,YAAY,IAAI,uBAAuB,iBAAiB;AACnF,QAAM,EAAE,mBAAmB,gBAAgB,IAAI,WAAW,kBAAkB;AAC5E,QAAM,MAAM,OAA2B,IAAI;AAE3C,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,58 +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 { DSToolbarV2Context } from "./DSToolbarV2Context.js";
12
- import { DSToolbarV2Schema, defaultProps } from "./react-desc-prop-types.js";
13
- import { StyledToolbarWrapper } from "./styled.js";
14
- import { DSToolbarName } from "./DSToolbarDefinitions.js";
15
- const DSToolbarV2 = (props) => {
16
- const propsWithDefaults = useMemoMergePropsWithDefault(props, defaultProps);
17
- useValidateTypescriptPropTypes(propsWithDefaults, DSToolbarV2Schema, DSToolbarName);
18
- const { alignment, withDepth, compact, innerRef, children } = propsWithDefaults;
19
- const globalsProps = useGetGlobalAttributes(propsWithDefaults);
20
- const toolbarUid = useMemo(() => globalsProps.id ?? `ds-toolbar-${uid()}`, []);
21
- const [itemReferences, setItemReferences] = useState({});
22
- const [dndDraggingItem, setDndDraggingItem] = useState("");
23
- const registerReference = useCallback(
24
- (itemId, ref) => {
25
- setItemReferences((prevItemReferences) => ({ ...prevItemReferences, [itemId]: ref }));
26
- },
27
- [setItemReferences]
28
- );
29
- const ctx = useMemo(
30
- () => ({ toolbarUid, registerReference, itemReferences, dndDraggingItem, setDndDraggingItem }),
31
- [dndDraggingItem, itemReferences, registerReference, toolbarUid]
32
- );
33
- return /* @__PURE__ */ jsx(DSToolbarV2Context.Provider, { value: ctx, children: /* @__PURE__ */ jsx(
34
- StyledToolbarWrapper,
35
- {
36
- role: "toolbar",
37
- "data-testid": "ds-toolbar-wrapper",
38
- id: toolbarUid,
39
- alignItems: "center",
40
- justifyContent: alignment === "left" ? "flex-start" : "flex-end",
41
- withDepth,
42
- gutter: "xxs2",
43
- compact,
44
- ref: innerRef,
45
- ...globalsProps,
46
- children
47
- }
48
- ) });
49
- };
50
- DSToolbarV2.propTypes = DSToolbarV2Schema;
51
- DSToolbarV2.displayName = DSToolbarName;
52
- const DSToolbarV2WithSchema = describe(DSToolbarV2).description("Toolbar");
53
- DSToolbarV2WithSchema.propTypes = DSToolbarV2Schema;
54
- export {
55
- DSToolbarV2,
56
- DSToolbarV2WithSchema
57
- };
58
- //# 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 { DSToolbarV2Context } from './DSToolbarV2Context.js';\nimport { DSToolbarV2Schema, defaultProps } from './react-desc-prop-types.js';\nimport { StyledToolbarWrapper } from './styled.js';\nimport type { DSToolbarT, DSToolbarItemT } from './react-desc-prop-types.js';\nimport { DSToolbarName } from './DSToolbarDefinitions.js';\n\nconst DSToolbarV2: React.ComponentType<DSToolbarT.Props> = (props) => {\n const propsWithDefaults = useMemoMergePropsWithDefault(props, defaultProps);\n\n useValidateTypescriptPropTypes(propsWithDefaults, DSToolbarV2Schema, DSToolbarName);\n\n const { alignment, withDepth, compact, innerRef, children } = propsWithDefaults;\n\n const globalsProps = useGetGlobalAttributes(propsWithDefaults);\n\n const toolbarUid = useMemo(() => globalsProps.id ?? `ds-toolbar-${uid()}`, []);\n\n const [itemReferences, setItemReferences] = useState({});\n const [dndDraggingItem, setDndDraggingItem] = useState('');\n\n const registerReference = useCallback(\n (itemId: string, ref: React.MutableRefObject<DSToolbarItemT.RenderHTMLElementT>) => {\n setItemReferences((prevItemReferences) => ({ ...prevItemReferences, [itemId]: ref }));\n },\n [setItemReferences],\n );\n\n const ctx = useMemo(\n () => ({ toolbarUid, registerReference, itemReferences, dndDraggingItem, setDndDraggingItem }),\n [dndDraggingItem, itemReferences, registerReference, toolbarUid],\n );\n\n return (\n <DSToolbarV2Context.Provider value={ctx}>\n <StyledToolbarWrapper\n role=\"toolbar\"\n data-testid=\"ds-toolbar-wrapper\"\n id={toolbarUid}\n alignItems=\"center\"\n justifyContent={alignment === 'left' ? 'flex-start' : 'flex-end'}\n withDepth={withDepth}\n gutter=\"xxs2\"\n compact={compact}\n ref={innerRef}\n {...globalsProps}\n >\n {children}\n </StyledToolbarWrapper>\n </DSToolbarV2Context.Provider>\n );\n};\n\nDSToolbarV2.propTypes = DSToolbarV2Schema;\n\nDSToolbarV2.displayName = DSToolbarName;\nconst DSToolbarV2WithSchema = describe(DSToolbarV2).description('Toolbar');\nDSToolbarV2WithSchema.propTypes = DSToolbarV2Schema;\n\nexport { DSToolbarV2, DSToolbarV2WithSchema };\n"],
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,0BAA0B;AACnC,SAAS,mBAAmB,oBAAoB;AAChD,SAAS,4BAA4B;AAErC,SAAS,qBAAqB;AAE9B,MAAM,cAAqD,CAAC,UAAU;AACpE,QAAM,oBAAoB,6BAA6B,OAAO,YAAY;AAE1E,iCAA+B,mBAAmB,mBAAmB,aAAa;AAElF,QAAM,EAAE,WAAW,WAAW,SAAS,UAAU,SAAS,IAAI;AAE9D,QAAM,eAAe,uBAAuB,iBAAiB;AAE7D,QAAM,aAAa,QAAQ,MAAM,aAAa,MAAM,cAAc,IAAI,KAAK,CAAC,CAAC;AAE7E,QAAM,CAAC,gBAAgB,iBAAiB,IAAI,SAAS,CAAC,CAAC;AACvD,QAAM,CAAC,iBAAiB,kBAAkB,IAAI,SAAS,EAAE;AAEzD,QAAM,oBAAoB;AAAA,IACxB,CAAC,QAAgB,QAAmE;AAClF,wBAAkB,CAAC,wBAAwB,EAAE,GAAG,oBAAoB,CAAC,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';\ninterface IDSToolbarV2Context {\n registerReference: (uid: string, ref: MutableRefObject<HTMLElement | null>) => void;\n itemReferences: Record<string, MutableRefObject<HTMLElement | null>>;\n toolbarUid: string;\n dndDraggingItem: string;\n setDndDraggingItem: React.Dispatch<React.SetStateAction<string>>;\n}\n\nexport const DSToolbarV2Context = createContext<IDSToolbarV2Context>({\n registerReference: () => null,\n itemReferences: {},\n toolbarUid: '',\n dndDraggingItem: '',\n setDndDraggingItem: () => {},\n});\n"],
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,66 +0,0 @@
1
- import * as React from "react";
2
- import { jsx } from "react/jsx-runtime";
3
- import { useRef } from "react";
4
- import { aggregatedClasses } from "@elliemae/ds-classnames";
5
- import { mergeRefs, useDeprecateComponent } from "@elliemae/ds-utilities";
6
- import { describe, PropTypes } from "@elliemae/ds-props-helpers";
7
- import decorateToolbarChildren from "./decorateToolbarChildren.js";
8
- import Item from "./ToolbarItem.js";
9
- import ToolbarGroup from "./ToolbarGroup.js";
10
- import Divider from "./ToolbarDivider.js";
11
- import { useKeyboardNavigation } from "./hooks/useKeyboardNavigation.js";
12
- const blockName = "toolbar";
13
- const ToolbarContainer = aggregatedClasses("div")(blockName, null, ({ withDepth, alignment, size }) => ({
14
- "without-depth": !withDepth,
15
- [alignment]: !!alignment,
16
- [size]: size
17
- }));
18
- const DSToolbar = ({
19
- containerProps = {},
20
- innerRef,
21
- withDepth = true,
22
- alignment = "right",
23
- // left || right
24
- autoFocusOnMount = true,
25
- children = [],
26
- size = "normal",
27
- ...otherProps
28
- }) => {
29
- useDeprecateComponent({ componentName: "ds-toolbar", version: "TBD Date: 2023 Q3" });
30
- const containerRef = useRef(null);
31
- const { handleOnKeyDown } = useKeyboardNavigation({ containerRef, autoFocusOnMount });
32
- return /* @__PURE__ */ jsx(
33
- ToolbarContainer,
34
- {
35
- ...containerProps,
36
- ...otherProps,
37
- classProps: { withDepth, alignment, size },
38
- innerRef: mergeRefs(innerRef, containerRef),
39
- onKeyDown: handleOnKeyDown,
40
- children: decorateToolbarChildren(children)
41
- }
42
- );
43
- };
44
- const toolbarProps = {
45
- containerProps: PropTypes.object.description("Set of Properties attached to the main container"),
46
- withDepth: PropTypes.bool.description("Shows a shadow rear the toolbar").defaultValue(true),
47
- alignment: PropTypes.oneOf(["right", "left"]).description("Aligns the toolbar to the left or right").defaultValue("right"),
48
- size: PropTypes.oneOf(["normal", "compact"]).description("Toolbar size").defaultValue("normal"),
49
- autoFocusOnMount: PropTypes.bool.description("Wheter to focus the component when it mounts or not").defaultValue(true),
50
- children: PropTypes.oneOfType([PropTypes.array, PropTypes.func, PropTypes.node]).description("Toolbar items").isRequired,
51
- innerRef: PropTypes.object.description("Ref to the Toolbar container element")
52
- };
53
- DSToolbar.propTypes = toolbarProps;
54
- DSToolbar.displayName = "DSToolbar";
55
- const ToolbarWithSchema = describe(DSToolbar);
56
- ToolbarWithSchema.propTypes = toolbarProps;
57
- var DSToolbar_default = DSToolbar;
58
- export {
59
- DSToolbar,
60
- Divider as ToolbarDivider,
61
- ToolbarGroup,
62
- Item as ToolbarItem,
63
- ToolbarWithSchema,
64
- DSToolbar_default as default
65
- };
66
- //# sourceMappingURL=DSToolbar.js.map
@@ -1,7 +0,0 @@
1
- {
2
- "version": 3,
3
- "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/deprecated/DSToolbar.tsx"],
4
- "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable eslint-comments/no-unlimited-disable */\n/* eslint-disable */\n// eslint-disable-next-line @typescript-eslint/ban-ts-comment\n// @ts-ignore\nimport React, { useRef } from 'react';\nimport { aggregatedClasses } from '@elliemae/ds-classnames';\nimport { mergeRefs, useDeprecateComponent } from '@elliemae/ds-utilities';\nimport { describe, PropTypes } from '@elliemae/ds-props-helpers';\nimport decorateToolbarChildren from './decorateToolbarChildren.js';\nimport Item from './ToolbarItem.js';\nimport ToolbarGroup from './ToolbarGroup.js';\nimport Divider from './ToolbarDivider.js';\nimport { useKeyboardNavigation } from './hooks/useKeyboardNavigation.js';\n\nconst blockName = 'toolbar';\n\nconst ToolbarContainer = aggregatedClasses('div')(blockName, null, ({ withDepth, alignment, size }) => ({\n 'without-depth': !withDepth,\n [alignment]: !!alignment,\n [size]: size,\n}));\n\nconst DSToolbar = ({\n containerProps = {},\n innerRef,\n withDepth = true,\n alignment = 'right', // left || right\n autoFocusOnMount = true,\n children = [],\n size = 'normal',\n ...otherProps\n}) => {\n useDeprecateComponent({ componentName: 'ds-toolbar', version: 'TBD Date: 2023 Q3' });\n\n const containerRef = useRef<HTMLDivElement | null>(null);\n\n const { handleOnKeyDown } = useKeyboardNavigation({ containerRef, autoFocusOnMount });\n\n return (\n <ToolbarContainer\n {...containerProps}\n {...otherProps}\n classProps={{ withDepth, alignment, size }}\n innerRef={mergeRefs(innerRef, containerRef)}\n onKeyDown={handleOnKeyDown}\n >\n {decorateToolbarChildren(children)}\n </ToolbarContainer>\n );\n};\n\nconst toolbarProps = {\n containerProps: PropTypes.object.description('Set of Properties attached to the main container'),\n withDepth: PropTypes.bool.description('Shows a shadow rear the toolbar').defaultValue(true),\n alignment: PropTypes.oneOf(['right', 'left'])\n .description('Aligns the toolbar to the left or right')\n .defaultValue('right'),\n size: PropTypes.oneOf(['normal', 'compact']).description('Toolbar size').defaultValue('normal'),\n autoFocusOnMount: PropTypes.bool\n .description('Wheter to focus the component when it mounts or not')\n .defaultValue(true),\n children: PropTypes.oneOfType([PropTypes.array, PropTypes.func, PropTypes.node]).description('Toolbar items')\n .isRequired,\n innerRef: PropTypes.object.description('Ref to the Toolbar container element'),\n};\n\nDSToolbar.propTypes = toolbarProps;\nDSToolbar.displayName = 'DSToolbar';\nconst ToolbarWithSchema = describe(DSToolbar);\nToolbarWithSchema.propTypes = toolbarProps;\n\nexport { DSToolbar, Item as ToolbarItem, ToolbarGroup, Divider as ToolbarDivider, ToolbarWithSchema };\n\nexport default DSToolbar;\n"],
5
- "mappings": "AAAA,YAAY,WAAW;ACuCnB;AAnCJ,SAAgB,cAAc;AAC9B,SAAS,yBAAyB;AAClC,SAAS,WAAW,6BAA6B;AACjD,SAAS,UAAU,iBAAiB;AACpC,OAAO,6BAA6B;AACpC,OAAO,UAAU;AACjB,OAAO,kBAAkB;AACzB,OAAO,aAAa;AACpB,SAAS,6BAA6B;AAEtC,MAAM,YAAY;AAElB,MAAM,mBAAmB,kBAAkB,KAAK,EAAE,WAAW,MAAM,CAAC,EAAE,WAAW,WAAW,KAAK,OAAO;AAAA,EACtG,iBAAiB,CAAC;AAAA,EAClB,CAAC,SAAS,GAAG,CAAC,CAAC;AAAA,EACf,CAAC,IAAI,GAAG;AACV,EAAE;AAEF,MAAM,YAAY,CAAC;AAAA,EACjB,iBAAiB,CAAC;AAAA,EAClB;AAAA,EACA,YAAY;AAAA,EACZ,YAAY;AAAA;AAAA,EACZ,mBAAmB;AAAA,EACnB,WAAW,CAAC;AAAA,EACZ,OAAO;AAAA,EACP,GAAG;AACL,MAAM;AACJ,wBAAsB,EAAE,eAAe,cAAc,SAAS,oBAAoB,CAAC;AAEnF,QAAM,eAAe,OAA8B,IAAI;AAEvD,QAAM,EAAE,gBAAgB,IAAI,sBAAsB,EAAE,cAAc,iBAAiB,CAAC;AAEpF,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACH,GAAG;AAAA,MACJ,YAAY,EAAE,WAAW,WAAW,KAAK;AAAA,MACzC,UAAU,UAAU,UAAU,YAAY;AAAA,MAC1C,WAAW;AAAA,MAEV,kCAAwB,QAAQ;AAAA;AAAA,EACnC;AAEJ;AAEA,MAAM,eAAe;AAAA,EACnB,gBAAgB,UAAU,OAAO,YAAY,kDAAkD;AAAA,EAC/F,WAAW,UAAU,KAAK,YAAY,iCAAiC,EAAE,aAAa,IAAI;AAAA,EAC1F,WAAW,UAAU,MAAM,CAAC,SAAS,MAAM,CAAC,EACzC,YAAY,yCAAyC,EACrD,aAAa,OAAO;AAAA,EACvB,MAAM,UAAU,MAAM,CAAC,UAAU,SAAS,CAAC,EAAE,YAAY,cAAc,EAAE,aAAa,QAAQ;AAAA,EAC9F,kBAAkB,UAAU,KACzB,YAAY,qDAAqD,EACjE,aAAa,IAAI;AAAA,EACpB,UAAU,UAAU,UAAU,CAAC,UAAU,OAAO,UAAU,MAAM,UAAU,IAAI,CAAC,EAAE,YAAY,eAAe,EACzG;AAAA,EACH,UAAU,UAAU,OAAO,YAAY,sCAAsC;AAC/E;AAEA,UAAU,YAAY;AACtB,UAAU,cAAc;AACxB,MAAM,oBAAoB,SAAS,SAAS;AAC5C,kBAAkB,YAAY;AAI9B,IAAO,oBAAQ;",
6
- "names": []
7
- }
@@ -1,10 +0,0 @@
1
- import * as React from "react";
2
- import { aggregatedClasses } from "@elliemae/ds-classnames";
3
- const blockName = "toolbar";
4
- const ToolbarDivider = aggregatedClasses("div")(blockName, "divider");
5
- ToolbarDivider.displayName = "ToolbarDivider";
6
- var ToolbarDivider_default = ToolbarDivider;
7
- export {
8
- ToolbarDivider_default as default
9
- };
10
- //# sourceMappingURL=ToolbarDivider.js.map
@@ -1,7 +0,0 @@
1
- {
2
- "version": 3,
3
- "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/deprecated/ToolbarDivider.tsx"],
4
- "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable eslint-comments/no-unlimited-disable */\n/* eslint-disable */\n// eslint-disable-next-line @typescript-eslint/ban-ts-comment\n// @ts-ignore\nimport { aggregatedClasses } from '@elliemae/ds-classnames';\n\nconst blockName = 'toolbar';\n\nconst ToolbarDivider = aggregatedClasses('div')(blockName, 'divider');\n\nToolbarDivider.displayName = 'ToolbarDivider';\n\nexport default ToolbarDivider;\n"],
5
- "mappings": "AAAA,YAAY,WAAW;ACIvB,SAAS,yBAAyB;AAElC,MAAM,YAAY;AAElB,MAAM,iBAAiB,kBAAkB,KAAK,EAAE,WAAW,SAAS;AAEpE,eAAe,cAAc;AAE7B,IAAO,yBAAQ;",
6
- "names": []
7
- }
@@ -1,20 +0,0 @@
1
- import * as React from "react";
2
- import { jsx } from "react/jsx-runtime";
3
- import PropTypes from "prop-types";
4
- import { aggregatedClasses } from "@elliemae/ds-classnames";
5
- import decorateToolbarChildren from "./decorateToolbarChildren.js";
6
- const blockName = "toolbar-group";
7
- const ToolbarGroupContainer = aggregatedClasses("div")(blockName, null, ({ space }) => ({
8
- [`space-${space}`]: !!space
9
- }));
10
- const ToolbarGroup = ({ children, size, space = 0 }) => /* @__PURE__ */ jsx(ToolbarGroupContainer, { classProps: { space }, children: decorateToolbarChildren(children, { size }) });
11
- ToolbarGroup.propTypes = {
12
- children: PropTypes.any,
13
- size: PropTypes.number,
14
- space: PropTypes.number
15
- };
16
- var ToolbarGroup_default = ToolbarGroup;
17
- export {
18
- ToolbarGroup_default as default
19
- };
20
- //# sourceMappingURL=ToolbarGroup.js.map
@@ -1,7 +0,0 @@
1
- {
2
- "version": 3,
3
- "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/deprecated/ToolbarGroup.tsx"],
4
- "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable eslint-comments/no-unlimited-disable */\n/* eslint-disable */\n// eslint-disable-next-line @typescript-eslint/ban-ts-comment\n// @ts-ignore\nimport React from 'react';\nimport PropTypes from 'prop-types';\nimport { aggregatedClasses } from '@elliemae/ds-classnames';\nimport decorateToolbarChildren from './decorateToolbarChildren.js';\n\nconst blockName = 'toolbar-group';\n\nconst ToolbarGroupContainer = aggregatedClasses('div')(blockName, null, ({ space }) => ({\n [`space-${space}`]: !!space,\n}));\n\nconst ToolbarGroup = ({ children, size, space = 0 }) => (\n <ToolbarGroupContainer classProps={{ space }}>{decorateToolbarChildren(children, { size })}</ToolbarGroupContainer>\n);\n\nToolbarGroup.propTypes = {\n children: PropTypes.any,\n size: PropTypes.number,\n space: PropTypes.number,\n};\n\nexport default ToolbarGroup;\n"],
5
- "mappings": "AAAA,YAAY,WAAW;ACgBrB;AAXF,OAAO,eAAe;AACtB,SAAS,yBAAyB;AAClC,OAAO,6BAA6B;AAEpC,MAAM,YAAY;AAElB,MAAM,wBAAwB,kBAAkB,KAAK,EAAE,WAAW,MAAM,CAAC,EAAE,MAAM,OAAO;AAAA,EACtF,CAAC,SAAS,OAAO,GAAG,CAAC,CAAC;AACxB,EAAE;AAEF,MAAM,eAAe,CAAC,EAAE,UAAU,MAAM,QAAQ,EAAE,MAChD,oBAAC,yBAAsB,YAAY,EAAE,MAAM,GAAI,kCAAwB,UAAU,EAAE,KAAK,CAAC,GAAE;AAG7F,aAAa,YAAY;AAAA,EACvB,UAAU,UAAU;AAAA,EACpB,MAAM,UAAU;AAAA,EAChB,OAAO,UAAU;AACnB;AAEA,IAAO,uBAAQ;",
6
- "names": []
7
- }
@@ -1,30 +0,0 @@
1
- import * as React from "react";
2
- import { jsx } from "react/jsx-runtime";
3
- import React2, { useState } from "react";
4
- import PropTypes from "prop-types";
5
- import { useFocusGroupWithState } from "@elliemae/ds-shared";
6
- import { DSButtonV2 } from "@elliemae/ds-button-v2";
7
- import { PopperPositions as Position } from "@elliemae/ds-popper";
8
- const ToolbarItem = ({ icon, labelText, menu = void 0, containerProps = {}, ...otherProps }) => {
9
- const [ref, setRef] = useState(null);
10
- useFocusGroupWithState(ref);
11
- const btn = /* @__PURE__ */ jsx(DSButtonV2, { ...otherProps, buttonType: "icon", innerRef: (r) => setRef(r), labelText, ...containerProps, children: icon });
12
- if (menu) {
13
- return React2.cloneElement(menu, {
14
- ...menu.props,
15
- placement: Position.BOTTOM_END,
16
- triggerComponent: btn
17
- });
18
- }
19
- return btn;
20
- };
21
- ToolbarItem.displayName = "ToolbarItem";
22
- ToolbarItem.propTypes = {
23
- icon: PropTypes.element,
24
- labelText: PropTypes.string
25
- };
26
- var ToolbarItem_default = ToolbarItem;
27
- export {
28
- ToolbarItem_default as default
29
- };
30
- //# sourceMappingURL=ToolbarItem.js.map
@@ -1,7 +0,0 @@
1
- {
2
- "version": 3,
3
- "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/deprecated/ToolbarItem.tsx"],
4
- "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable eslint-comments/no-unlimited-disable */\n/* eslint-disable */\n// eslint-disable-next-line @typescript-eslint/ban-ts-comment\n// @ts-ignore\nimport React, { useState } from 'react';\nimport PropTypes from 'prop-types';\nimport { useFocusGroupWithState } from '@elliemae/ds-shared';\nimport { DSButtonV2 } from '@elliemae/ds-button-v2';\nimport { PopperPositions as Position } from '@elliemae/ds-popper';\n\nconst ToolbarItem = ({ icon, labelText, menu = undefined, containerProps = {}, ...otherProps }) => {\n const [ref, setRef] = useState(null);\n\n useFocusGroupWithState(ref);\n const btn = (\n <DSButtonV2 {...otherProps} buttonType=\"icon\" innerRef={(r) => setRef(r)} labelText={labelText} {...containerProps}>\n {icon}\n </DSButtonV2>\n );\n if (menu) {\n return React.cloneElement(menu, {\n ...menu.props,\n placement: Position.BOTTOM_END,\n triggerComponent: btn,\n });\n }\n return btn;\n};\n\nToolbarItem.displayName = 'ToolbarItem';\n\nToolbarItem.propTypes = {\n icon: PropTypes.element,\n labelText: PropTypes.string,\n};\n\nexport default ToolbarItem;\n"],
5
- "mappings": "AAAA,YAAY,WAAW;ACenB;AAXJ,OAAOA,UAAS,gBAAgB;AAChC,OAAO,eAAe;AACtB,SAAS,8BAA8B;AACvC,SAAS,kBAAkB;AAC3B,SAAS,mBAAmB,gBAAgB;AAE5C,MAAM,cAAc,CAAC,EAAE,MAAM,WAAW,OAAO,QAAW,iBAAiB,CAAC,GAAG,GAAG,WAAW,MAAM;AACjG,QAAM,CAAC,KAAK,MAAM,IAAI,SAAS,IAAI;AAEnC,yBAAuB,GAAG;AAC1B,QAAM,MACJ,oBAAC,cAAY,GAAG,YAAY,YAAW,QAAO,UAAU,CAAC,MAAM,OAAO,CAAC,GAAG,WAAuB,GAAG,gBACjG,gBACH;AAEF,MAAI,MAAM;AACR,WAAOA,OAAM,aAAa,MAAM;AAAA,MAC9B,GAAG,KAAK;AAAA,MACR,WAAW,SAAS;AAAA,MACpB,kBAAkB;AAAA,IACpB,CAAC;AAAA,EACH;AACA,SAAO;AACT;AAEA,YAAY,cAAc;AAE1B,YAAY,YAAY;AAAA,EACtB,MAAM,UAAU;AAAA,EAChB,WAAW,UAAU;AACvB;AAEA,IAAO,sBAAQ;",
6
- "names": ["React"]
7
- }
@@ -1,15 +0,0 @@
1
- import * as React from "react";
2
- import React2, { cloneElement } from "react";
3
- var decorateToolbarChildren_default = (children, extraProps = {}) => React2.Children.map(
4
- children,
5
- (component) => component ? cloneElement(component, {
6
- ...extraProps,
7
- ...component.props,
8
- className: `${component.props.className} toolbar-item`
9
- }) : component,
10
- null
11
- );
12
- export {
13
- decorateToolbarChildren_default as default
14
- };
15
- //# sourceMappingURL=decorateToolbarChildren.js.map
@@ -1,7 +0,0 @@
1
- {
2
- "version": 3,
3
- "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/deprecated/decorateToolbarChildren.tsx"],
4
- "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable eslint-comments/no-unlimited-disable */\n/* eslint-disable */\n// eslint-disable-next-line @typescript-eslint/ban-ts-comment\n// @ts-ignore\nimport React, { cloneElement } from 'react';\n\nexport default (children, extraProps = {}) =>\n React.Children.map(\n children,\n (component) =>\n component\n ? cloneElement(component, {\n ...extraProps,\n ...component.props,\n className: `${component.props.className} toolbar-item`,\n })\n : component,\n null,\n );\n"],
5
- "mappings": "AAAA,YAAY,WAAW;ACIvB,OAAOA,UAAS,oBAAoB;AAEpC,IAAO,kCAAQ,CAAC,UAAU,aAAa,CAAC,MACtCA,OAAM,SAAS;AAAA,EACb;AAAA,EACA,CAAC,cACC,YACI,aAAa,WAAW;AAAA,IACtB,GAAG;AAAA,IACH,GAAG,UAAU;AAAA,IACb,WAAW,GAAG,UAAU,MAAM;AAAA,EAChC,CAAC,IACD;AAAA,EACN;AACF;",
6
- "names": ["React"]
7
- }
@@ -1,42 +0,0 @@
1
- import * as React from "react";
2
- import { useRef, useEffect, useCallback } from "react";
3
- const useKeyboardNavigation = ({ containerRef, autoFocusOnMount }) => {
4
- const allChildrenButtonRef = useRef(null);
5
- useEffect(() => {
6
- if (containerRef.current) {
7
- allChildrenButtonRef.current = containerRef.current.querySelectorAll("button");
8
- }
9
- if (autoFocusOnMount) {
10
- setTimeout(() => allChildrenButtonRef.current?.[0].focus());
11
- }
12
- }, [autoFocusOnMount]);
13
- const handleOnKeyDown = useCallback((e) => {
14
- if (allChildrenButtonRef.current) {
15
- const lastButton = allChildrenButtonRef.current[allChildrenButtonRef.current?.length - 1];
16
- const firstButton = allChildrenButtonRef.current[0];
17
- if (e.key === "ArrowRight") {
18
- e.preventDefault();
19
- if (e.target !== lastButton) {
20
- e.target.nextSibling.focus();
21
- } else {
22
- firstButton.focus();
23
- }
24
- }
25
- if (e.key === "ArrowLeft") {
26
- e.preventDefault();
27
- if (e.target !== firstButton) {
28
- e.target.previousSibling.focus();
29
- } else {
30
- lastButton.focus();
31
- }
32
- }
33
- }
34
- }, []);
35
- return {
36
- handleOnKeyDown
37
- };
38
- };
39
- export {
40
- useKeyboardNavigation
41
- };
42
- //# sourceMappingURL=useKeyboardNavigation.js.map
@@ -1,7 +0,0 @@
1
- {
2
- "version": 3,
3
- "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/deprecated/hooks/useKeyboardNavigation.tsx"],
4
- "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable eslint-comments/no-unlimited-disable */\n/* eslint-disable */\n// eslint-disable-next-line @typescript-eslint/ban-ts-comment\n// @ts-ignore\nimport type React from 'react';\nimport { useRef, useEffect, useCallback } from 'react';\n\ninterface useKeyboardNavigationT {\n containerRef: React.MutableRefObject<HTMLDivElement | null>;\n autoFocusOnMount: boolean;\n}\n\n// Toolbar should not allow to use Tab/Shift+Tab to navigate between ToolbarItems.\n// Tab/Shift+Tab should be only used once to enter the whole controller.\n// Toolbars should be only navigable with Arrows to follow correct a11y.\n// https://www.w3.org/TR/wai-aria-practices/examples/toolbar/toolbar.html\n\nexport const useKeyboardNavigation = ({ containerRef, autoFocusOnMount }: useKeyboardNavigationT) => {\n const allChildrenButtonRef = useRef<NodeListOf<HTMLButtonElement> | null>(null);\n\n useEffect(() => {\n if (containerRef.current) {\n allChildrenButtonRef.current = containerRef.current.querySelectorAll('button');\n // allChildrenButtonRef.current.forEach((button, index) => {\n // if (index !== 0) {\n // button.setAttribute('tabindex', '-1');\n // }\n // });\n }\n\n if (autoFocusOnMount) {\n setTimeout(() => allChildrenButtonRef.current?.[0].focus());\n }\n\n // return () => {\n // allChildrenButtonRef.current?.forEach((button, index) => {\n // if (index !== 0) {\n // button.setAttribute('tabindex', '');\n // }\n // });\n // };\n }, [autoFocusOnMount]);\n\n const handleOnKeyDown = useCallback((e) => {\n if (allChildrenButtonRef.current) {\n const lastButton = allChildrenButtonRef.current[allChildrenButtonRef.current?.length - 1];\n const firstButton = allChildrenButtonRef.current[0];\n\n if (e.key === 'ArrowRight') {\n e.preventDefault();\n if (e.target !== lastButton) {\n e.target.nextSibling.focus();\n } else {\n firstButton.focus();\n }\n }\n if (e.key === 'ArrowLeft') {\n e.preventDefault();\n if (e.target !== firstButton) {\n e.target.previousSibling.focus();\n } else {\n lastButton.focus();\n }\n }\n }\n }, []);\n\n return {\n handleOnKeyDown,\n };\n};\n"],
5
- "mappings": "AAAA,YAAY,WAAW;ACKvB,SAAS,QAAQ,WAAW,mBAAmB;AAYxC,MAAM,wBAAwB,CAAC,EAAE,cAAc,iBAAiB,MAA8B;AACnG,QAAM,uBAAuB,OAA6C,IAAI;AAE9E,YAAU,MAAM;AACd,QAAI,aAAa,SAAS;AACxB,2BAAqB,UAAU,aAAa,QAAQ,iBAAiB,QAAQ;AAAA,IAM/E;AAEA,QAAI,kBAAkB;AACpB,iBAAW,MAAM,qBAAqB,UAAU,CAAC,EAAE,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,CAAC;AACxF,YAAM,cAAc,qBAAqB,QAAQ,CAAC;AAElD,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;",
6
- "names": []
7
- }
@@ -1,7 +0,0 @@
1
- import * as React from "react";
2
- export * from "./DSToolbar.js";
3
- import { default as default2 } from "./DSToolbar.js";
4
- export {
5
- default2 as default
6
- };
7
- //# sourceMappingURL=index.js.map
@@ -1,7 +0,0 @@
1
- {
2
- "version": 3,
3
- "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/deprecated/index.tsx"],
4
- "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable import/export */\nexport * from './DSToolbar.js';\n\nexport { default } from './DSToolbar.js';\n"],
5
- "mappings": "AAAA,YAAY,WAAW;ACCvB,cAAc;AAEd,SAAS,WAAAA,gBAAe;",
6
- "names": ["default"]
7
- }
@@ -1,34 +0,0 @@
1
- import * as React from "react";
2
- import { globalAttributesPropTypes, PropTypes } from "@elliemae/ds-props-helpers";
3
- const defaultItemProps = {
4
- render: () => {
5
- },
6
- isFirstItem: false
7
- };
8
- const defaultProps = {
9
- alignment: "right",
10
- withDepth: true,
11
- compact: false
12
- };
13
- const DSToolbarV2Schema = {
14
- ...globalAttributesPropTypes,
15
- alignment: PropTypes.oneOf(["right", "left"]).description("Whether to align the content left or right").defaultValue("right"),
16
- withDepth: PropTypes.bool.description("Whether to add a box-shadow to the container").defaultValue(true),
17
- compact: PropTypes.bool.description("Whether you want the compact version of the toolbar").defaultValue(false),
18
- innerRef: PropTypes.oneOfType([PropTypes.func, PropTypes.object]).description("Reference to attach to the wrapper")
19
- };
20
- const DSToolbarItemV2Schema = {
21
- ...globalAttributesPropTypes,
22
- render: PropTypes.func.isRequired.description("render function").defaultValue(() => {
23
- }),
24
- isFirstItem: PropTypes.bool.description(
25
- "If true the item will have tab index 0 to be the first element focusable by keyboard on the page load"
26
- ).defaultValue(false)
27
- };
28
- export {
29
- DSToolbarItemV2Schema,
30
- DSToolbarV2Schema,
31
- defaultItemProps,
32
- defaultProps
33
- };
34
- //# 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 { globalAttributesPropTypes, PropTypes } from '@elliemae/ds-props-helpers';\n\nexport declare namespace DSToolbarT {\n export interface Props {\n alignment?: 'left' | 'right';\n withDepth?: boolean;\n compact?: boolean;\n innerRef?: React.MutableRefObject<HTMLDivElement>;\n children: React.Component<DSToolbarItemT.Props>;\n }\n}\n\nexport declare namespace DSToolbarItemT {\n export type RenderHTMLElementT =\n | HTMLButtonElement\n | HTMLInputElement\n | HTMLTextAreaElement\n | HTMLSelectElement\n | HTMLOptionElement;\n export interface Props {\n render: (props: { innerRef: React.MutableRefObject<HTMLElement | null>; 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"],
5
- "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,2BAA2B,iBAAiB;AAyB9C,MAAM,mBAAmB;AAAA,EAC9B,QAAQ,MAAM;AAAA,EAAC;AAAA,EACf,aAAa;AACf;AAEO,MAAM,eAAe;AAAA,EAC1B,WAAW;AAAA,EACX,WAAW;AAAA,EACX,SAAS;AACX;AAEO,MAAM,oBAAoB;AAAA,EAC/B,GAAG;AAAA,EACH,WAAW,UAAU,MAAM,CAAC,SAAS,MAAM,CAAC,EACzC,YAAY,4CAA4C,EACxD,aAAa,OAAO;AAAA,EACvB,WAAW,UAAU,KAAK,YAAY,8CAA8C,EAAE,aAAa,IAAI;AAAA,EACvG,SAAS,UAAU,KAAK,YAAY,qDAAqD,EAAE,aAAa,KAAK;AAAA,EAC7G,UAAU,UAAU,UAAU,CAAC,UAAU,MAAM,UAAU,MAAM,CAAC,EAAE,YAAY,oCAAoC;AACpH;AAEO,MAAM,wBAAwB;AAAA,EACnC,GAAG;AAAA,EACH,QAAQ,UAAU,KAAK,WAAW,YAAY,iBAAiB,EAAE,aAAa,MAAM;AAAA,EAAC,CAAC;AAAA,EACtF,aAAa,UAAU,KACpB;AAAA,IACC;AAAA,EACF,EACC,aAAa,KAAK;AACvB;",
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)`\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.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';\n\nconst findInCircularList = (\n list: Element[],\n from: number,\n criteria: (item: Element) => boolean,\n step = 1,\n // eslint-disable-next-line max-params\n): number => {\n for (\n let i = (from + step + list.length) % list.length;\n i !== from && from > -1;\n i = (i + step + list.length) % list.length\n ) {\n if (criteria(list[i])) return i;\n }\n return from; // return same item\n};\n\nexport const useToolbarItemHandlers = (\n toolbarItemId: string,\n): {\n onKeyDown: React.KeyboardEventHandler;\n onFocus: React.FocusEventHandler;\n} => {\n const { toolbarUid, itemReferences, setDndDraggingItem } = useContext(DSToolbarV2Context);\n\n const onFocus: React.FocusEventHandler = useCallback(() => {\n setDndDraggingItem(toolbarItemId);\n }, [setDndDraggingItem, toolbarItemId]);\n\n const onKeyDown: React.KeyboardEventHandler = useCallback(\n (e) => {\n const toolbarItems = [...document.querySelectorAll(`#${toolbarUid} .ds-toolbar-item`)];\n let nextToolbarItemIndex = -1;\n const toolbarItemIndex = toolbarItems.findIndex((domElem) => domElem.id === toolbarItemId);\n\n const criteria = (item: Element) => {\n const ref = itemReferences[item.id];\n\n return !ref.current.disabled;\n };\n\n if (['ArrowLeft', 'ArrowRight'].includes(e.code)) {\n nextToolbarItemIndex = findInCircularList(\n toolbarItems,\n toolbarItemIndex,\n criteria,\n e.code === 'ArrowLeft' ? -1 : 1,\n );\n } else if (e.code === 'Home') {\n nextToolbarItemIndex = 0;\n } else if (e.code === 'End') {\n nextToolbarItemIndex = toolbarItems.length - 1;\n }\n\n if (nextToolbarItemIndex >= 0 && nextToolbarItemIndex < toolbarItems.length) {\n e.preventDefault();\n e.stopPropagation();\n const ref = itemReferences[toolbarItems[nextToolbarItemIndex].id];\n if (ref.current) ref.current.focus();\n }\n },\n [toolbarUid, toolbarItemId, itemReferences],\n );\n\n return { onKeyDown, onFocus };\n};\n"],
5
- "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,aAAa,kBAAkB;AACxC,SAAS,0BAA0B;AAEnC,MAAM,qBAAqB,CACzB,MACA,MACA,UACA,OAAO,MAEI;AACX,WACM,KAAK,OAAO,OAAO,KAAK,UAAU,KAAK,QAC3C,MAAM,QAAQ,OAAO,IACrB,KAAK,IAAI,OAAO,KAAK,UAAU,KAAK,QACpC;AACA,QAAI,SAAS,KAAK,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,QAAQ;AAAA,MACtB;AAEA,UAAI,CAAC,aAAa,YAAY,EAAE,SAAS,EAAE,IAAI,GAAG;AAChD,+BAAuB;AAAA,UACrB;AAAA,UACA;AAAA,UACA;AAAA,UACA,EAAE,SAAS,cAAc,KAAK;AAAA,QAChC;AAAA,MACF,WAAW,EAAE,SAAS,QAAQ;AAC5B,+BAAuB;AAAA,MACzB,WAAW,EAAE,SAAS,OAAO;AAC3B,+BAAuB,aAAa,SAAS;AAAA,MAC/C;AAEA,UAAI,wBAAwB,KAAK,uBAAuB,aAAa,QAAQ;AAC3E,UAAE,eAAe;AACjB,UAAE,gBAAgB;AAClB,cAAM,MAAM,eAAe,aAAa,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";