@elliemae/ds-toolbar 3.1.0-next.7 → 3.1.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.
- package/dist/cjs/deprecated/DSToolbar.js +6 -11
- package/dist/cjs/deprecated/DSToolbar.js.map +2 -2
- package/dist/cjs/deprecated/hooks/useKeyboardNavigation.js +64 -0
- package/dist/cjs/deprecated/hooks/useKeyboardNavigation.js.map +7 -0
- package/dist/esm/deprecated/DSToolbar.js +6 -11
- package/dist/esm/deprecated/DSToolbar.js.map +2 -2
- package/dist/esm/deprecated/hooks/useKeyboardNavigation.js +42 -0
- package/dist/esm/deprecated/hooks/useKeyboardNavigation.js.map +7 -0
- package/package.json +9 -9
|
@@ -60,12 +60,12 @@ module.exports = __toCommonJS(DSToolbar_exports);
|
|
|
60
60
|
var React = __toESM(require("react"));
|
|
61
61
|
var import_react = __toESM(require("react"));
|
|
62
62
|
var import_ds_classnames = require("@elliemae/ds-classnames");
|
|
63
|
-
var import_ds_shared = require("@elliemae/ds-shared");
|
|
64
63
|
var import_ds_utilities = require("@elliemae/ds-utilities");
|
|
65
64
|
var import_decorateToolbarChildren = __toESM(require("./decorateToolbarChildren"));
|
|
66
65
|
var import_ToolbarItem = __toESM(require("./ToolbarItem"));
|
|
67
66
|
var import_ToolbarGroup = __toESM(require("./ToolbarGroup"));
|
|
68
67
|
var import_ToolbarDivider = __toESM(require("./ToolbarDivider"));
|
|
68
|
+
var import_useKeyboardNavigation = require("./hooks/useKeyboardNavigation");
|
|
69
69
|
const blockName = "toolbar";
|
|
70
70
|
const ToolbarContainer = (0, import_ds_classnames.aggregatedClasses)("div")(blockName, null, ({ withDepth, alignment, size }) => ({
|
|
71
71
|
"without-depth": !withDepth,
|
|
@@ -91,17 +91,12 @@ const DSToolbar = (_a) => {
|
|
|
91
91
|
"size"
|
|
92
92
|
]);
|
|
93
93
|
const containerRef = (0, import_react.useRef)(null);
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
getContainer: () => containerRef.current,
|
|
97
|
-
keyBindings: {
|
|
98
|
-
Tab: "next"
|
|
99
|
-
},
|
|
100
|
-
orientation: "horizontal"
|
|
101
|
-
}, /* @__PURE__ */ import_react.default.createElement(ToolbarContainer, __spreadProps(__spreadValues(__spreadValues({}, containerProps), otherProps), {
|
|
94
|
+
const { handleOnKeyDown } = (0, import_useKeyboardNavigation.useKeyboardNavigation)({ containerRef, autoFocusOnMount });
|
|
95
|
+
return /* @__PURE__ */ import_react.default.createElement(ToolbarContainer, __spreadProps(__spreadValues(__spreadValues({}, containerProps), otherProps), {
|
|
102
96
|
classProps: { withDepth, alignment, size },
|
|
103
|
-
innerRef: (0, import_ds_utilities.mergeRefs)(innerRef, containerRef)
|
|
104
|
-
|
|
97
|
+
innerRef: (0, import_ds_utilities.mergeRefs)(innerRef, containerRef),
|
|
98
|
+
onKeyDown: handleOnKeyDown
|
|
99
|
+
}), (0, import_decorateToolbarChildren.default)(children));
|
|
105
100
|
};
|
|
106
101
|
const toolbarProps = {
|
|
107
102
|
containerProps: import_ds_utilities.PropTypes.object.description("Set of Properties attached to the main container"),
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/deprecated/DSToolbar.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["import React, { useRef } from 'react';\nimport { aggregatedClasses } from '@elliemae/ds-classnames';\nimport {
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAA8B;AAC9B,2BAAkC;AAClC,
|
|
4
|
+
"sourcesContent": ["import React, { useRef } from 'react';\nimport { aggregatedClasses } from '@elliemae/ds-classnames';\nimport { describe, PropTypes, mergeRefs } from '@elliemae/ds-utilities';\nimport decorateToolbarChildren from './decorateToolbarChildren';\nimport Item from './ToolbarItem';\nimport ToolbarGroup from './ToolbarGroup';\nimport Divider from './ToolbarDivider';\nimport { useKeyboardNavigation } from './hooks/useKeyboardNavigation';\n\nconst blockName = 'toolbar';\n\nconst ToolbarContainer = aggregatedClasses('div')(blockName, null, ({ withDepth, alignment, size }) => ({\n 'without-depth': !withDepth,\n [alignment]: !!alignment,\n [size]: size,\n}));\n\nconst DSToolbar = ({\n containerProps = {},\n innerRef,\n withDepth = true,\n alignment = 'right', // left || right\n autoFocusOnMount = true,\n children = [],\n size = 'normal',\n ...otherProps\n}) => {\n const containerRef = useRef<HTMLDivElement | null>(null);\n\n const { handleOnKeyDown } = useKeyboardNavigation({ containerRef, autoFocusOnMount });\n\n return (\n <ToolbarContainer\n {...containerProps}\n {...otherProps}\n classProps={{ withDepth, alignment, size }}\n innerRef={mergeRefs(innerRef, containerRef)}\n onKeyDown={handleOnKeyDown}\n >\n {decorateToolbarChildren(children)}\n </ToolbarContainer>\n );\n};\n\nconst toolbarProps = {\n containerProps: PropTypes.object.description('Set of Properties attached to the main container'),\n withDepth: PropTypes.bool.description('Shows a shadow rear the toolbar').defaultValue(true),\n alignment: PropTypes.oneOf(['right', 'left'])\n .description('Aligns the toolbar to the left or right')\n .defaultValue('right'),\n size: PropTypes.oneOf(['normal', 'compact']).description('Toolbar size').defaultValue('normal'),\n autoFocusOnMount: PropTypes.bool\n .description('Wheter to focus the component when it mounts or not')\n .defaultValue(true),\n children: PropTypes.oneOfType([PropTypes.array, PropTypes.func, PropTypes.node]).description('Toolbar items')\n .isRequired,\n innerRef: PropTypes.object.description('Ref to the Toolbar container element'),\n};\n\nDSToolbar.propTypes = toolbarProps;\nDSToolbar.displayName = 'DSToolbar';\nconst ToolbarWithSchema = describe(DSToolbar);\nToolbarWithSchema.propTypes = toolbarProps;\n\nexport { DSToolbar, Item as ToolbarItem, ToolbarGroup, Divider as ToolbarDivider, ToolbarWithSchema };\n\nexport default DSToolbar;\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAA8B;AAC9B,2BAAkC;AAClC,0BAA+C;AAC/C,qCAAoC;AACpC,yBAAiB;AACjB,0BAAyB;AACzB,4BAAoB;AACpB,mCAAsC;AAEtC,MAAM,YAAY;AAElB,MAAM,mBAAmB,4CAAkB,KAAK,EAAE,WAAW,MAAM,CAAC,EAAE,WAAW,WAAW,WAAY;AAAA,EACtG,iBAAiB,CAAC;AAAA,GACjB,YAAY,CAAC,CAAC;AAAA,GACd,OAAO;AACV,EAAE;AAEF,MAAM,YAAY,CAAC,OASb;AATa,eACjB;AAAA,qBAAiB,CAAC;AAAA,IAClB;AAAA,IACA,YAAY;AAAA,IACZ,YAAY;AAAA,IACZ,mBAAmB;AAAA,IACnB,WAAW,CAAC;AAAA,IACZ,OAAO;AAAA,MAPU,IAQd,uBARc,IAQd;AAAA,IAPH;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA;AAGA,QAAM,eAAe,yBAA8B,IAAI;AAEvD,QAAM,EAAE,oBAAoB,wDAAsB,EAAE,cAAc,iBAAiB,CAAC;AAEpF,SACE,mDAAC,kEACK,iBACA,aAFL;AAAA,IAGC,YAAY,EAAE,WAAW,WAAW,KAAK;AAAA,IACzC,UAAU,mCAAU,UAAU,YAAY;AAAA,IAC1C,WAAW;AAAA,MAEV,4CAAwB,QAAQ,CACnC;AAEJ;AAEA,MAAM,eAAe;AAAA,EACnB,gBAAgB,8BAAU,OAAO,YAAY,kDAAkD;AAAA,EAC/F,WAAW,8BAAU,KAAK,YAAY,iCAAiC,EAAE,aAAa,IAAI;AAAA,EAC1F,WAAW,8BAAU,MAAM,CAAC,SAAS,MAAM,CAAC,EACzC,YAAY,yCAAyC,EACrD,aAAa,OAAO;AAAA,EACvB,MAAM,8BAAU,MAAM,CAAC,UAAU,SAAS,CAAC,EAAE,YAAY,cAAc,EAAE,aAAa,QAAQ;AAAA,EAC9F,kBAAkB,8BAAU,KACzB,YAAY,qDAAqD,EACjE,aAAa,IAAI;AAAA,EACpB,UAAU,8BAAU,UAAU,CAAC,8BAAU,OAAO,8BAAU,MAAM,8BAAU,IAAI,CAAC,EAAE,YAAY,eAAe,EACzG;AAAA,EACH,UAAU,8BAAU,OAAO,YAAY,sCAAsC;AAC/E;AAEA,UAAU,YAAY;AACtB,UAAU,cAAc;AACxB,MAAM,oBAAoB,kCAAS,SAAS;AAC5C,kBAAkB,YAAY;AAI9B,IAAO,oBAAQ;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -0,0 +1,64 @@
|
|
|
1
|
+
var __create = Object.create;
|
|
2
|
+
var __defProp = Object.defineProperty;
|
|
3
|
+
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
4
|
+
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
5
|
+
var __getProtoOf = Object.getPrototypeOf;
|
|
6
|
+
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
7
|
+
var __export = (target, all) => {
|
|
8
|
+
for (var name in all)
|
|
9
|
+
__defProp(target, name, { get: all[name], enumerable: true });
|
|
10
|
+
};
|
|
11
|
+
var __copyProps = (to, from, except, desc) => {
|
|
12
|
+
if (from && typeof from === "object" || typeof from === "function") {
|
|
13
|
+
for (let key of __getOwnPropNames(from))
|
|
14
|
+
if (!__hasOwnProp.call(to, key) && key !== except)
|
|
15
|
+
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
|
|
16
|
+
}
|
|
17
|
+
return to;
|
|
18
|
+
};
|
|
19
|
+
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target, mod));
|
|
20
|
+
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
21
|
+
var useKeyboardNavigation_exports = {};
|
|
22
|
+
__export(useKeyboardNavigation_exports, {
|
|
23
|
+
useKeyboardNavigation: () => useKeyboardNavigation
|
|
24
|
+
});
|
|
25
|
+
module.exports = __toCommonJS(useKeyboardNavigation_exports);
|
|
26
|
+
var React = __toESM(require("react"));
|
|
27
|
+
var import_react = require("react");
|
|
28
|
+
const useKeyboardNavigation = ({ containerRef, autoFocusOnMount }) => {
|
|
29
|
+
const allChildrenButtonRef = (0, import_react.useRef)(null);
|
|
30
|
+
(0, import_react.useEffect)(() => {
|
|
31
|
+
if (containerRef.current) {
|
|
32
|
+
allChildrenButtonRef.current = containerRef.current.querySelectorAll("button");
|
|
33
|
+
}
|
|
34
|
+
if (autoFocusOnMount) {
|
|
35
|
+
setTimeout(() => allChildrenButtonRef.current?.[0].focus());
|
|
36
|
+
}
|
|
37
|
+
}, [autoFocusOnMount]);
|
|
38
|
+
const handleOnKeyDown = (0, import_react.useCallback)((e) => {
|
|
39
|
+
if (allChildrenButtonRef.current) {
|
|
40
|
+
const lastButton = allChildrenButtonRef.current[allChildrenButtonRef.current?.length - 1];
|
|
41
|
+
const firstButton = allChildrenButtonRef.current[0];
|
|
42
|
+
if (e.key === "ArrowRight") {
|
|
43
|
+
e.preventDefault();
|
|
44
|
+
if (e.target !== lastButton) {
|
|
45
|
+
e.target.nextSibling.focus();
|
|
46
|
+
} else {
|
|
47
|
+
firstButton.focus();
|
|
48
|
+
}
|
|
49
|
+
}
|
|
50
|
+
if (e.key === "ArrowLeft") {
|
|
51
|
+
e.preventDefault();
|
|
52
|
+
if (e.target !== firstButton) {
|
|
53
|
+
e.target.previousSibling.focus();
|
|
54
|
+
} else {
|
|
55
|
+
lastButton.focus();
|
|
56
|
+
}
|
|
57
|
+
}
|
|
58
|
+
}
|
|
59
|
+
}, []);
|
|
60
|
+
return {
|
|
61
|
+
handleOnKeyDown
|
|
62
|
+
};
|
|
63
|
+
};
|
|
64
|
+
//# sourceMappingURL=useKeyboardNavigation.js.map
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../../../src/deprecated/hooks/useKeyboardNavigation.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
+
"sourcesContent": ["import React, { useRef, useEffect, useCallback } from 'react';\n\ninterface useKeyboardNavigationT {\n containerRef: React.MutableRefObject<HTMLDivElement | null>;\n autoFocusOnMount: boolean;\n}\n\n// Toolbar should not allow to use Tab/Shift+Tab to navigate between ToolbarItems.\n// Tab/Shift+Tab should be only used once to enter the whole controller.\n// Toolbars should be only navigable with Arrows to follow correct a11y.\n// https://www.w3.org/TR/wai-aria-practices/examples/toolbar/toolbar.html\n\nexport const useKeyboardNavigation = ({ containerRef, autoFocusOnMount }: useKeyboardNavigationT) => {\n const allChildrenButtonRef = useRef<NodeListOf<HTMLButtonElement> | null>(null);\n\n useEffect(() => {\n if (containerRef.current) {\n allChildrenButtonRef.current = containerRef.current.querySelectorAll('button');\n // allChildrenButtonRef.current.forEach((button, index) => {\n // if (index !== 0) {\n // button.setAttribute('tabindex', '-1');\n // }\n // });\n }\n\n if (autoFocusOnMount) {\n setTimeout(() => allChildrenButtonRef.current?.[0].focus());\n }\n\n // return () => {\n // allChildrenButtonRef.current?.forEach((button, index) => {\n // if (index !== 0) {\n // button.setAttribute('tabindex', '');\n // }\n // });\n // };\n }, [autoFocusOnMount]);\n\n const handleOnKeyDown = useCallback((e) => {\n if (allChildrenButtonRef.current) {\n const lastButton = allChildrenButtonRef.current[allChildrenButtonRef.current?.length - 1];\n const firstButton = allChildrenButtonRef.current[0];\n\n if (e.key === 'ArrowRight') {\n e.preventDefault();\n if (e.target !== lastButton) {\n e.target.nextSibling.focus();\n } else {\n firstButton.focus();\n }\n }\n if (e.key === 'ArrowLeft') {\n e.preventDefault();\n if (e.target !== firstButton) {\n e.target.previousSibling.focus();\n } else {\n lastButton.focus();\n }\n }\n }\n }, []);\n\n return {\n handleOnKeyDown,\n };\n};\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAAsD;AAY/C,MAAM,wBAAwB,CAAC,EAAE,cAAc,uBAA+C;AACnG,QAAM,uBAAuB,yBAA6C,IAAI;AAE9E,8BAAU,MAAM;AACd,QAAI,aAAa,SAAS;AACxB,2BAAqB,UAAU,aAAa,QAAQ,iBAAiB,QAAQ;AAAA,IAM/E;AAEA,QAAI,kBAAkB;AACpB,iBAAW,MAAM,qBAAqB,UAAU,GAAG,MAAM,CAAC;AAAA,IAC5D;AAAA,EASF,GAAG,CAAC,gBAAgB,CAAC;AAErB,QAAM,kBAAkB,8BAAY,CAAC,MAAM;AACzC,QAAI,qBAAqB,SAAS;AAChC,YAAM,aAAa,qBAAqB,QAAQ,qBAAqB,SAAS,SAAS;AACvF,YAAM,cAAc,qBAAqB,QAAQ;AAEjD,UAAI,EAAE,QAAQ,cAAc;AAC1B,UAAE,eAAe;AACjB,YAAI,EAAE,WAAW,YAAY;AAC3B,YAAE,OAAO,YAAY,MAAM;AAAA,QAC7B,OAAO;AACL,sBAAY,MAAM;AAAA,QACpB;AAAA,MACF;AACA,UAAI,EAAE,QAAQ,aAAa;AACzB,UAAE,eAAe;AACjB,YAAI,EAAE,WAAW,aAAa;AAC5B,YAAE,OAAO,gBAAgB,MAAM;AAAA,QACjC,OAAO;AACL,qBAAW,MAAM;AAAA,QACnB;AAAA,MACF;AAAA,IACF;AAAA,EACF,GAAG,CAAC,CAAC;AAEL,SAAO;AAAA,IACL;AAAA,EACF;AACF;",
|
|
6
|
+
"names": []
|
|
7
|
+
}
|
|
@@ -32,12 +32,12 @@ var __objRest = (source, exclude) => {
|
|
|
32
32
|
import * as React from "react";
|
|
33
33
|
import React2, { useRef } from "react";
|
|
34
34
|
import { aggregatedClasses } from "@elliemae/ds-classnames";
|
|
35
|
-
import { FocusGroupProvider } from "@elliemae/ds-shared";
|
|
36
35
|
import { describe, PropTypes, mergeRefs } from "@elliemae/ds-utilities";
|
|
37
36
|
import decorateToolbarChildren from "./decorateToolbarChildren";
|
|
38
37
|
import Item from "./ToolbarItem";
|
|
39
38
|
import ToolbarGroup from "./ToolbarGroup";
|
|
40
39
|
import Divider from "./ToolbarDivider";
|
|
40
|
+
import { useKeyboardNavigation } from "./hooks/useKeyboardNavigation";
|
|
41
41
|
const blockName = "toolbar";
|
|
42
42
|
const ToolbarContainer = aggregatedClasses("div")(blockName, null, ({ withDepth, alignment, size }) => ({
|
|
43
43
|
"without-depth": !withDepth,
|
|
@@ -63,17 +63,12 @@ const DSToolbar = (_a) => {
|
|
|
63
63
|
"size"
|
|
64
64
|
]);
|
|
65
65
|
const containerRef = useRef(null);
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
getContainer: () => containerRef.current,
|
|
69
|
-
keyBindings: {
|
|
70
|
-
Tab: "next"
|
|
71
|
-
},
|
|
72
|
-
orientation: "horizontal"
|
|
73
|
-
}, /* @__PURE__ */ React2.createElement(ToolbarContainer, __spreadProps(__spreadValues(__spreadValues({}, containerProps), otherProps), {
|
|
66
|
+
const { handleOnKeyDown } = useKeyboardNavigation({ containerRef, autoFocusOnMount });
|
|
67
|
+
return /* @__PURE__ */ React2.createElement(ToolbarContainer, __spreadProps(__spreadValues(__spreadValues({}, containerProps), otherProps), {
|
|
74
68
|
classProps: { withDepth, alignment, size },
|
|
75
|
-
innerRef: mergeRefs(innerRef, containerRef)
|
|
76
|
-
|
|
69
|
+
innerRef: mergeRefs(innerRef, containerRef),
|
|
70
|
+
onKeyDown: handleOnKeyDown
|
|
71
|
+
}), decorateToolbarChildren(children));
|
|
77
72
|
};
|
|
78
73
|
const toolbarProps = {
|
|
79
74
|
containerProps: PropTypes.object.description("Set of Properties attached to the main container"),
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/deprecated/DSToolbar.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useRef } from 'react';\nimport { aggregatedClasses } from '@elliemae/ds-classnames';\nimport {
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;ACAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA,MAAM,YAAY;AAElB,MAAM,mBAAmB,kBAAkB,KAAK,EAAE,WAAW,MAAM,CAAC,EAAE,WAAW,WAAW,WAAY;AAAA,EACtG,iBAAiB,CAAC;AAAA,GACjB,YAAY,CAAC,CAAC;AAAA,GACd,OAAO;AACV,EAAE;AAEF,MAAM,YAAY,CAAC,OASb;AATa,eACjB;AAAA,qBAAiB,CAAC;AAAA,IAClB;AAAA,IACA,YAAY;AAAA,IACZ,YAAY;AAAA,IACZ,mBAAmB;AAAA,IACnB,WAAW,CAAC;AAAA,IACZ,OAAO;AAAA,MAPU,IAQd,uBARc,IAQd;AAAA,IAPH;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA;AAGA,QAAM,eAAe,
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useRef } from 'react';\nimport { aggregatedClasses } from '@elliemae/ds-classnames';\nimport { describe, PropTypes, mergeRefs } from '@elliemae/ds-utilities';\nimport decorateToolbarChildren from './decorateToolbarChildren';\nimport Item from './ToolbarItem';\nimport ToolbarGroup from './ToolbarGroup';\nimport Divider from './ToolbarDivider';\nimport { useKeyboardNavigation } from './hooks/useKeyboardNavigation';\n\nconst blockName = 'toolbar';\n\nconst ToolbarContainer = aggregatedClasses('div')(blockName, null, ({ withDepth, alignment, size }) => ({\n 'without-depth': !withDepth,\n [alignment]: !!alignment,\n [size]: size,\n}));\n\nconst DSToolbar = ({\n containerProps = {},\n innerRef,\n withDepth = true,\n alignment = 'right', // left || right\n autoFocusOnMount = true,\n children = [],\n size = 'normal',\n ...otherProps\n}) => {\n const containerRef = useRef<HTMLDivElement | null>(null);\n\n const { handleOnKeyDown } = useKeyboardNavigation({ containerRef, autoFocusOnMount });\n\n return (\n <ToolbarContainer\n {...containerProps}\n {...otherProps}\n classProps={{ withDepth, alignment, size }}\n innerRef={mergeRefs(innerRef, containerRef)}\n onKeyDown={handleOnKeyDown}\n >\n {decorateToolbarChildren(children)}\n </ToolbarContainer>\n );\n};\n\nconst toolbarProps = {\n containerProps: PropTypes.object.description('Set of Properties attached to the main container'),\n withDepth: PropTypes.bool.description('Shows a shadow rear the toolbar').defaultValue(true),\n alignment: PropTypes.oneOf(['right', 'left'])\n .description('Aligns the toolbar to the left or right')\n .defaultValue('right'),\n size: PropTypes.oneOf(['normal', 'compact']).description('Toolbar size').defaultValue('normal'),\n autoFocusOnMount: PropTypes.bool\n .description('Wheter to focus the component when it mounts or not')\n .defaultValue(true),\n children: PropTypes.oneOfType([PropTypes.array, PropTypes.func, PropTypes.node]).description('Toolbar items')\n .isRequired,\n innerRef: PropTypes.object.description('Ref to the Toolbar container element'),\n};\n\nDSToolbar.propTypes = toolbarProps;\nDSToolbar.displayName = 'DSToolbar';\nconst ToolbarWithSchema = describe(DSToolbar);\nToolbarWithSchema.propTypes = toolbarProps;\n\nexport { DSToolbar, Item as ToolbarItem, ToolbarGroup, Divider as ToolbarDivider, ToolbarWithSchema };\n\nexport default DSToolbar;\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;ACAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA,MAAM,YAAY;AAElB,MAAM,mBAAmB,kBAAkB,KAAK,EAAE,WAAW,MAAM,CAAC,EAAE,WAAW,WAAW,WAAY;AAAA,EACtG,iBAAiB,CAAC;AAAA,GACjB,YAAY,CAAC,CAAC;AAAA,GACd,OAAO;AACV,EAAE;AAEF,MAAM,YAAY,CAAC,OASb;AATa,eACjB;AAAA,qBAAiB,CAAC;AAAA,IAClB;AAAA,IACA,YAAY;AAAA,IACZ,YAAY;AAAA,IACZ,mBAAmB;AAAA,IACnB,WAAW,CAAC;AAAA,IACZ,OAAO;AAAA,MAPU,IAQd,uBARc,IAQd;AAAA,IAPH;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA;AAGA,QAAM,eAAe,OAA8B,IAAI;AAEvD,QAAM,EAAE,oBAAoB,sBAAsB,EAAE,cAAc,iBAAiB,CAAC;AAEpF,SACE,qCAAC,kEACK,iBACA,aAFL;AAAA,IAGC,YAAY,EAAE,WAAW,WAAW,KAAK;AAAA,IACzC,UAAU,UAAU,UAAU,YAAY;AAAA,IAC1C,WAAW;AAAA,MAEV,wBAAwB,QAAQ,CACnC;AAEJ;AAEA,MAAM,eAAe;AAAA,EACnB,gBAAgB,UAAU,OAAO,YAAY,kDAAkD;AAAA,EAC/F,WAAW,UAAU,KAAK,YAAY,iCAAiC,EAAE,aAAa,IAAI;AAAA,EAC1F,WAAW,UAAU,MAAM,CAAC,SAAS,MAAM,CAAC,EACzC,YAAY,yCAAyC,EACrD,aAAa,OAAO;AAAA,EACvB,MAAM,UAAU,MAAM,CAAC,UAAU,SAAS,CAAC,EAAE,YAAY,cAAc,EAAE,aAAa,QAAQ;AAAA,EAC9F,kBAAkB,UAAU,KACzB,YAAY,qDAAqD,EACjE,aAAa,IAAI;AAAA,EACpB,UAAU,UAAU,UAAU,CAAC,UAAU,OAAO,UAAU,MAAM,UAAU,IAAI,CAAC,EAAE,YAAY,eAAe,EACzG;AAAA,EACH,UAAU,UAAU,OAAO,YAAY,sCAAsC;AAC/E;AAEA,UAAU,YAAY;AACtB,UAAU,cAAc;AACxB,MAAM,oBAAoB,SAAS,SAAS;AAC5C,kBAAkB,YAAY;AAI9B,IAAO,oBAAQ;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -0,0 +1,42 @@
|
|
|
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
|
|
@@ -0,0 +1,7 @@
|
|
|
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", "import React, { useRef, useEffect, useCallback } from 'react';\n\ninterface useKeyboardNavigationT {\n containerRef: React.MutableRefObject<HTMLDivElement | null>;\n autoFocusOnMount: boolean;\n}\n\n// Toolbar should not allow to use Tab/Shift+Tab to navigate between ToolbarItems.\n// Tab/Shift+Tab should be only used once to enter the whole controller.\n// Toolbars should be only navigable with Arrows to follow correct a11y.\n// https://www.w3.org/TR/wai-aria-practices/examples/toolbar/toolbar.html\n\nexport const useKeyboardNavigation = ({ containerRef, autoFocusOnMount }: useKeyboardNavigationT) => {\n const allChildrenButtonRef = useRef<NodeListOf<HTMLButtonElement> | null>(null);\n\n useEffect(() => {\n if (containerRef.current) {\n allChildrenButtonRef.current = containerRef.current.querySelectorAll('button');\n // allChildrenButtonRef.current.forEach((button, index) => {\n // if (index !== 0) {\n // button.setAttribute('tabindex', '-1');\n // }\n // });\n }\n\n if (autoFocusOnMount) {\n setTimeout(() => allChildrenButtonRef.current?.[0].focus());\n }\n\n // return () => {\n // allChildrenButtonRef.current?.forEach((button, index) => {\n // if (index !== 0) {\n // button.setAttribute('tabindex', '');\n // }\n // });\n // };\n }, [autoFocusOnMount]);\n\n const handleOnKeyDown = useCallback((e) => {\n if (allChildrenButtonRef.current) {\n const lastButton = allChildrenButtonRef.current[allChildrenButtonRef.current?.length - 1];\n const firstButton = allChildrenButtonRef.current[0];\n\n if (e.key === 'ArrowRight') {\n e.preventDefault();\n if (e.target !== lastButton) {\n e.target.nextSibling.focus();\n } else {\n firstButton.focus();\n }\n }\n if (e.key === 'ArrowLeft') {\n e.preventDefault();\n if (e.target !== firstButton) {\n e.target.previousSibling.focus();\n } else {\n lastButton.focus();\n }\n }\n }\n }, []);\n\n return {\n handleOnKeyDown,\n };\n};\n"],
|
|
5
|
+
"mappings": "AAAA;ACAA;AAYO,MAAM,wBAAwB,CAAC,EAAE,cAAc,uBAA+C;AACnG,QAAM,uBAAuB,OAA6C,IAAI;AAE9E,YAAU,MAAM;AACd,QAAI,aAAa,SAAS;AACxB,2BAAqB,UAAU,aAAa,QAAQ,iBAAiB,QAAQ;AAAA,IAM/E;AAEA,QAAI,kBAAkB;AACpB,iBAAW,MAAM,qBAAqB,UAAU,GAAG,MAAM,CAAC;AAAA,IAC5D;AAAA,EASF,GAAG,CAAC,gBAAgB,CAAC;AAErB,QAAM,kBAAkB,YAAY,CAAC,MAAM;AACzC,QAAI,qBAAqB,SAAS;AAChC,YAAM,aAAa,qBAAqB,QAAQ,qBAAqB,SAAS,SAAS;AACvF,YAAM,cAAc,qBAAqB,QAAQ;AAEjD,UAAI,EAAE,QAAQ,cAAc;AAC1B,UAAE,eAAe;AACjB,YAAI,EAAE,WAAW,YAAY;AAC3B,YAAE,OAAO,YAAY,MAAM;AAAA,QAC7B,OAAO;AACL,sBAAY,MAAM;AAAA,QACpB;AAAA,MACF;AACA,UAAI,EAAE,QAAQ,aAAa;AACzB,UAAE,eAAe;AACjB,YAAI,EAAE,WAAW,aAAa;AAC5B,YAAE,OAAO,gBAAgB,MAAM;AAAA,QACjC,OAAO;AACL,qBAAW,MAAM;AAAA,QACnB;AAAA,MACF;AAAA,IACF;AAAA,EACF,GAAG,CAAC,CAAC;AAEL,SAAO;AAAA,IACL;AAAA,EACF;AACF;",
|
|
6
|
+
"names": []
|
|
7
|
+
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@elliemae/ds-toolbar",
|
|
3
|
-
"version": "3.1.0-
|
|
3
|
+
"version": "3.1.0-rc.0",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"description": "ICE MT - Dimsum - Toolbar",
|
|
6
6
|
"files": [
|
|
@@ -87,14 +87,14 @@
|
|
|
87
87
|
"indent": 4
|
|
88
88
|
},
|
|
89
89
|
"dependencies": {
|
|
90
|
-
"@elliemae/ds-button": "3.1.0-
|
|
91
|
-
"@elliemae/ds-classnames": "3.1.0-
|
|
92
|
-
"@elliemae/ds-grid": "3.1.0-
|
|
93
|
-
"@elliemae/ds-icons": "3.1.0-
|
|
94
|
-
"@elliemae/ds-popper": "3.1.0-
|
|
95
|
-
"@elliemae/ds-shared": "3.1.0-
|
|
96
|
-
"@elliemae/ds-system": "3.1.0-
|
|
97
|
-
"@elliemae/ds-utilities": "3.1.0-
|
|
90
|
+
"@elliemae/ds-button": "3.1.0-rc.0",
|
|
91
|
+
"@elliemae/ds-classnames": "3.1.0-rc.0",
|
|
92
|
+
"@elliemae/ds-grid": "3.1.0-rc.0",
|
|
93
|
+
"@elliemae/ds-icons": "3.1.0-rc.0",
|
|
94
|
+
"@elliemae/ds-popper": "3.1.0-rc.0",
|
|
95
|
+
"@elliemae/ds-shared": "3.1.0-rc.0",
|
|
96
|
+
"@elliemae/ds-system": "3.1.0-rc.0",
|
|
97
|
+
"@elliemae/ds-utilities": "3.1.0-rc.0",
|
|
98
98
|
"prop-types": "~15.8.1",
|
|
99
99
|
"uid": "2.0.0"
|
|
100
100
|
},
|