@elliemae/ds-toolbar 3.5.0-rc.4 → 3.5.0-rc.5
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/DSToolbarItemV2.js +8 -2
- package/dist/cjs/DSToolbarItemV2.js.map +2 -2
- package/dist/cjs/DSToolbarSeparatorV2.js +4 -1
- package/dist/cjs/DSToolbarSeparatorV2.js.map +2 -2
- package/dist/cjs/DSToolbarV2.js +14 -5
- package/dist/cjs/DSToolbarV2.js.map +2 -2
- package/dist/cjs/DSToolbarV2Context.js +4 -1
- package/dist/cjs/DSToolbarV2Context.js.map +1 -1
- package/dist/cjs/deprecated/DSToolbar.js +4 -1
- package/dist/cjs/deprecated/DSToolbar.js.map +2 -2
- package/dist/cjs/deprecated/ToolbarDivider.js +4 -1
- package/dist/cjs/deprecated/ToolbarDivider.js.map +1 -1
- package/dist/cjs/deprecated/ToolbarGroup.js +11 -4
- package/dist/cjs/deprecated/ToolbarGroup.js.map +2 -2
- package/dist/cjs/deprecated/ToolbarItem.js +4 -1
- package/dist/cjs/deprecated/ToolbarItem.js.map +2 -2
- package/dist/cjs/deprecated/decorateToolbarChildren.js +13 -6
- package/dist/cjs/deprecated/decorateToolbarChildren.js.map +2 -2
- package/dist/cjs/deprecated/hooks/useKeyboardNavigation.js +4 -1
- package/dist/cjs/deprecated/hooks/useKeyboardNavigation.js.map +1 -1
- package/dist/cjs/deprecated/index.js +4 -1
- package/dist/cjs/deprecated/index.js.map +1 -1
- package/dist/cjs/index.js +4 -1
- package/dist/cjs/index.js.map +1 -1
- package/dist/cjs/react-desc-prop-types.js +7 -2
- package/dist/cjs/react-desc-prop-types.js.map +1 -1
- package/dist/cjs/styled.js +4 -1
- package/dist/cjs/styled.js.map +2 -2
- package/dist/cjs/useToolbarItemHandlers.js +35 -24
- package/dist/cjs/useToolbarItemHandlers.js.map +1 -1
- package/dist/esm/DSToolbarItemV2.js +4 -1
- package/dist/esm/DSToolbarItemV2.js.map +2 -2
- package/dist/esm/DSToolbarSeparatorV2.js.map +2 -2
- package/dist/esm/DSToolbarV2.js +10 -4
- package/dist/esm/DSToolbarV2.js.map +2 -2
- package/dist/esm/DSToolbarV2Context.js.map +1 -1
- package/dist/esm/deprecated/DSToolbar.js.map +2 -2
- package/dist/esm/deprecated/ToolbarDivider.js.map +1 -1
- package/dist/esm/deprecated/ToolbarGroup.js +7 -3
- package/dist/esm/deprecated/ToolbarGroup.js.map +2 -2
- package/dist/esm/deprecated/ToolbarItem.js.map +2 -2
- package/dist/esm/deprecated/decorateToolbarChildren.js +9 -5
- package/dist/esm/deprecated/decorateToolbarChildren.js.map +2 -2
- package/dist/esm/deprecated/hooks/useKeyboardNavigation.js.map +1 -1
- package/dist/esm/deprecated/index.js.map +2 -2
- package/dist/esm/index.js.map +2 -2
- package/dist/esm/react-desc-prop-types.js +3 -1
- package/dist/esm/react-desc-prop-types.js.map +1 -1
- package/dist/esm/styled.js.map +1 -1
- package/dist/esm/useToolbarItemHandlers.js +31 -23
- package/dist/esm/useToolbarItemHandlers.js.map +1 -1
- package/package.json +9 -9
|
@@ -17,7 +17,10 @@ var __copyProps = (to, from, except, desc) => {
|
|
|
17
17
|
}
|
|
18
18
|
return to;
|
|
19
19
|
};
|
|
20
|
-
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
|
|
20
|
+
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
|
|
21
|
+
isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
|
|
22
|
+
mod
|
|
23
|
+
));
|
|
21
24
|
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
22
25
|
var DSToolbarItemV2_exports = {};
|
|
23
26
|
__export(DSToolbarItemV2_exports, {
|
|
@@ -45,7 +48,10 @@ const DSToolbarItemV2 = (props) => {
|
|
|
45
48
|
registerReference(id, ref);
|
|
46
49
|
return id;
|
|
47
50
|
}, [registerReference, ref, providedId]);
|
|
48
|
-
const tabIndex = (0, import_react.useMemo)(
|
|
51
|
+
const tabIndex = (0, import_react.useMemo)(
|
|
52
|
+
() => activeItem === toolbarItemId || !activeItem && isFirstItem ? 0 : -1,
|
|
53
|
+
[activeItem, isFirstItem, toolbarItemId]
|
|
54
|
+
);
|
|
49
55
|
const handlers = (0, import_useToolbarItemHandlers.useToolbarItemHandlers)(toolbarItemId);
|
|
50
56
|
return /* @__PURE__ */ import_react.default.createElement(import_styled.StyledToolbarItem, {
|
|
51
57
|
id: toolbarItemId,
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/DSToolbarItemV2.tsx", "../../../../scripts/build/transpile/react-shim.js"],
|
|
4
4
|
"sourcesContent": ["/* eslint-disable react/prop-types */\nimport React, { useContext, useMemo, useRef } from 'react';\nimport {\n describe,\n useMemoMergePropsWithDefault,\n useValidateTypescriptPropTypes,\n useGetGlobalAttributes,\n} from '@elliemae/ds-utilities';\nimport { uid } from 'uid';\nimport { DSToolbarV2Context } from './DSToolbarV2Context';\nimport { StyledToolbarItem } from './styled';\nimport { useToolbarItemHandlers } from './useToolbarItemHandlers';\nimport { defaultItemProps, DSToolbarItemV2Schema } from './react-desc-prop-types';\nimport type { DSToolbarItemT } from './react-desc-prop-types';\nconst DSToolbarItemV2: React.ComponentType<DSToolbarItemT.Props> = (props) => {\n const propsWithDefaults = useMemoMergePropsWithDefault(props, defaultItemProps);\n\n useValidateTypescriptPropTypes(propsWithDefaults, DSToolbarItemV2Schema);\n const { render, isFirstItem } = propsWithDefaults;\n const { id: providedId, ...restGlobals } = useGetGlobalAttributes(propsWithDefaults);\n const { registerReference, activeItem } = useContext(DSToolbarV2Context);\n const ref = useRef(null);\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 () => (activeItem === toolbarItemId || (!activeItem && isFirstItem) ? 0 : -1),\n [activeItem, isFirstItem, toolbarItemId],\n );\n\n const handlers = useToolbarItemHandlers(toolbarItemId);\n return (\n <StyledToolbarItem\n id={toolbarItemId}\n data-testid=\"ds-toolbar-item\"\n className=\"ds-toolbar-item\"\n {...handlers}\n {...restGlobals}\n >\n {render({ innerRef: ref, tabIndex })}\n </StyledToolbarItem>\n );\n};\n\nDSToolbarItemV2.propTypes = DSToolbarItemV2Schema;\n\nDSToolbarItemV2.displayName = 'DSToolbarItemV2';\nconst DSToolbarItemV2WithSchema = describe(DSToolbarItemV2).description('Toolbar Item');\nDSToolbarItemV2WithSchema.propTypes = DSToolbarItemV2Schema;\n\nexport { DSToolbarItemV2, DSToolbarItemV2WithSchema };\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
-
"mappings": "
|
|
6
|
-
"names": []
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADCvB,mBAAmD;AACnD,0BAKO;AACP,iBAAoB;AACpB,gCAAmC;AACnC,oBAAkC;AAClC,oCAAuC;AACvC,mCAAwD;AAExD,MAAM,kBAA6D,CAAC,UAAU;AAC5E,QAAM,wBAAoB,kDAA6B,OAAO,6CAAgB;AAE9E,0DAA+B,mBAAmB,kDAAqB;AACvE,QAAM,EAAE,QAAQ,YAAY,IAAI;AAChC,QAAM,EAAE,IAAI,eAAe,YAAY,QAAI,4CAAuB,iBAAiB;AACnF,QAAM,EAAE,mBAAmB,WAAW,QAAI,yBAAW,4CAAkB;AACvE,QAAM,UAAM,qBAAO,IAAI;AACvB,QAAM,oBAAgB,sBAAQ,MAAM;AAClC,UAAM,KAAK,cAAc,uBAAmB,gBAAI;AAChD,sBAAkB,IAAI,GAAG;AACzB,WAAO;AAAA,EACT,GAAG,CAAC,mBAAmB,KAAK,UAAU,CAAC;AAEvC,QAAM,eAAW;AAAA,IACf,MAAO,eAAe,iBAAkB,CAAC,cAAc,cAAe,IAAI;AAAA,IAC1E,CAAC,YAAY,aAAa,aAAa;AAAA,EACzC;AAEA,QAAM,eAAW,sDAAuB,aAAa;AACrD,SACE,6BAAAA,QAAA,cAAC;AAAA,IACC,IAAI;AAAA,IACJ,eAAY;AAAA,IACZ,WAAU;AAAA,IACT,GAAG;AAAA,IACH,GAAG;AAAA,KAEH,OAAO,EAAE,UAAU,KAAK,SAAS,CAAC,CACrC;AAEJ;AAEA,gBAAgB,YAAY;AAE5B,gBAAgB,cAAc;AAC9B,MAAM,gCAA4B,8BAAS,eAAe,EAAE,YAAY,cAAc;AACtF,0BAA0B,YAAY;",
|
|
6
|
+
"names": ["React"]
|
|
7
7
|
}
|
|
@@ -17,7 +17,10 @@ var __copyProps = (to, from, except, desc) => {
|
|
|
17
17
|
}
|
|
18
18
|
return to;
|
|
19
19
|
};
|
|
20
|
-
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
|
|
20
|
+
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
|
|
21
|
+
isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
|
|
22
|
+
mod
|
|
23
|
+
));
|
|
21
24
|
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
22
25
|
var DSToolbarSeparatorV2_exports = {};
|
|
23
26
|
__export(DSToolbarSeparatorV2_exports, {
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/DSToolbarSeparatorV2.tsx", "../../../../scripts/build/transpile/react-shim.js"],
|
|
4
4
|
"sourcesContent": ["import React from 'react';\nimport { StyledSeparator } from './styled';\n\nexport const DSToolbarSeparatorV2: React.ComponentType = () => <StyledSeparator className=\"ds-toolbar-separator\" />;\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
-
"mappings": "
|
|
6
|
-
"names": []
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAAkB;AAClB,oBAAgC;AAEzB,MAAM,uBAA4C,MAAM,6BAAAA,QAAA,cAAC;AAAA,EAAgB,WAAU;AAAA,CAAuB;",
|
|
6
|
+
"names": ["React"]
|
|
7
7
|
}
|
package/dist/cjs/DSToolbarV2.js
CHANGED
|
@@ -17,7 +17,10 @@ var __copyProps = (to, from, except, desc) => {
|
|
|
17
17
|
}
|
|
18
18
|
return to;
|
|
19
19
|
};
|
|
20
|
-
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
|
|
20
|
+
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
|
|
21
|
+
isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
|
|
22
|
+
mod
|
|
23
|
+
));
|
|
21
24
|
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
22
25
|
var DSToolbarV2_exports = {};
|
|
23
26
|
__export(DSToolbarV2_exports, {
|
|
@@ -41,10 +44,16 @@ const DSToolbarV2 = (props) => {
|
|
|
41
44
|
const toolbarUid = (0, import_react.useMemo)(() => globalsProps.id ?? `ds-toolbar-${(0, import_uid.uid)()}`, []);
|
|
42
45
|
const [itemReferences, setItemReferences] = (0, import_react.useState)({});
|
|
43
46
|
const [activeItem, setActiveItem] = (0, import_react.useState)("");
|
|
44
|
-
const registerReference = (0, import_react.useCallback)(
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
47
|
+
const registerReference = (0, import_react.useCallback)(
|
|
48
|
+
(itemId, ref) => {
|
|
49
|
+
setItemReferences((prevItemReferences) => ({ ...prevItemReferences, [itemId]: ref }));
|
|
50
|
+
},
|
|
51
|
+
[setItemReferences]
|
|
52
|
+
);
|
|
53
|
+
const ctx = (0, import_react.useMemo)(
|
|
54
|
+
() => ({ toolbarUid, registerReference, itemReferences, activeItem, setActiveItem }),
|
|
55
|
+
[activeItem, itemReferences, registerReference, toolbarUid]
|
|
56
|
+
);
|
|
48
57
|
return /* @__PURE__ */ import_react.default.createElement(import_DSToolbarV2Context.DSToolbarV2Context.Provider, {
|
|
49
58
|
value: ctx
|
|
50
59
|
}, /* @__PURE__ */ import_react.default.createElement(import_styled.StyledToolbarWrapper, {
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/DSToolbarV2.tsx", "../../../../scripts/build/transpile/react-shim.js"],
|
|
4
4
|
"sourcesContent": ["/* eslint-disable react/prop-types */\nimport React, { useCallback, useMemo, useState } from 'react';\nimport {\n useMemoMergePropsWithDefault,\n useValidateTypescriptPropTypes,\n useGetGlobalAttributes,\n} from '@elliemae/ds-utilities';\nimport { describe } from '@elliemae/ds-utilities';\nimport { uid } from 'uid';\nimport { DSToolbarV2Context } from './DSToolbarV2Context';\nimport { DSToolbarV2Schema, defaultProps } from './react-desc-prop-types';\nimport { StyledToolbarWrapper } from './styled';\nimport type { DSToolbarT, DSToolbarItemT } from './react-desc-prop-types';\n\nconst DSToolbarV2: React.ComponentType<DSToolbarT.Props> = (props) => {\n const propsWithDefaults = useMemoMergePropsWithDefault(props, defaultProps);\n\n useValidateTypescriptPropTypes(propsWithDefaults, DSToolbarV2Schema);\n\n const { alignment, withDepth, compact, innerRef, children } = propsWithDefaults;\n\n const globalsProps = useGetGlobalAttributes(propsWithDefaults);\n\n const toolbarUid = useMemo(() => globalsProps.id ?? `ds-toolbar-${uid()}`, []);\n\n const [itemReferences, setItemReferences] = useState({});\n const [activeItem, setActiveItem] = useState('');\n\n const registerReference = useCallback(\n (itemId: string, ref: React.MutableRefObject<DSToolbarItemT.RenderHTMLElementT>) => {\n setItemReferences((prevItemReferences) => ({ ...prevItemReferences, [itemId]: ref }));\n },\n [setItemReferences],\n );\n\n const ctx = useMemo(\n () => ({ toolbarUid, registerReference, itemReferences, activeItem, setActiveItem }),\n [activeItem, itemReferences, registerReference, toolbarUid],\n );\n\n return (\n <DSToolbarV2Context.Provider value={ctx}>\n <StyledToolbarWrapper\n role=\"toolbar\"\n data-testid=\"ds-toolbar-wrapper\"\n id={toolbarUid}\n alignItems=\"center\"\n justifyContent={alignment === 'left' ? 'flex-start' : 'flex-end'}\n withDepth={withDepth}\n gutter=\"xxs2\"\n compact={compact}\n ref={innerRef}\n {...globalsProps}\n >\n {children}\n </StyledToolbarWrapper>\n </DSToolbarV2Context.Provider>\n );\n};\n\nDSToolbarV2.propTypes = DSToolbarV2Schema;\n\nDSToolbarV2.displayName = 'DSToolbarV2';\nconst DSToolbarV2WithSchema = describe(DSToolbarV2).description('Toolbar');\nDSToolbarV2WithSchema.propTypes = DSToolbarV2Schema;\n\nexport { DSToolbarV2, DSToolbarV2WithSchema };\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
-
"mappings": "
|
|
6
|
-
"names": []
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADCvB,mBAAsD;AACtD,0BAIO;AACP,IAAAA,uBAAyB;AACzB,iBAAoB;AACpB,gCAAmC;AACnC,mCAAgD;AAChD,oBAAqC;AAGrC,MAAM,cAAqD,CAAC,UAAU;AACpE,QAAM,wBAAoB,kDAA6B,OAAO,yCAAY;AAE1E,0DAA+B,mBAAmB,8CAAiB;AAEnE,QAAM,EAAE,WAAW,WAAW,SAAS,UAAU,SAAS,IAAI;AAE9D,QAAM,mBAAe,4CAAuB,iBAAiB;AAE7D,QAAM,iBAAa,sBAAQ,MAAM,aAAa,MAAM,kBAAc,gBAAI,KAAK,CAAC,CAAC;AAE7E,QAAM,CAAC,gBAAgB,iBAAiB,QAAI,uBAAS,CAAC,CAAC;AACvD,QAAM,CAAC,YAAY,aAAa,QAAI,uBAAS,EAAE;AAE/C,QAAM,wBAAoB;AAAA,IACxB,CAAC,QAAgB,QAAmE;AAClF,wBAAkB,CAAC,wBAAwB,EAAE,GAAG,oBAAoB,CAAC,SAAS,IAAI,EAAE;AAAA,IACtF;AAAA,IACA,CAAC,iBAAiB;AAAA,EACpB;AAEA,QAAM,UAAM;AAAA,IACV,OAAO,EAAE,YAAY,mBAAmB,gBAAgB,YAAY,cAAc;AAAA,IAClF,CAAC,YAAY,gBAAgB,mBAAmB,UAAU;AAAA,EAC5D;AAEA,SACE,6BAAAC,QAAA,cAAC,6CAAmB,UAAnB;AAAA,IAA4B,OAAO;AAAA,KAClC,6BAAAA,QAAA,cAAC;AAAA,IACC,MAAK;AAAA,IACL,eAAY;AAAA,IACZ,IAAI;AAAA,IACJ,YAAW;AAAA,IACX,gBAAgB,cAAc,SAAS,eAAe;AAAA,IACtD;AAAA,IACA,QAAO;AAAA,IACP;AAAA,IACA,KAAK;AAAA,IACJ,GAAG;AAAA,KAEH,QACH,CACF;AAEJ;AAEA,YAAY,YAAY;AAExB,YAAY,cAAc;AAC1B,MAAM,4BAAwB,+BAAS,WAAW,EAAE,YAAY,SAAS;AACzE,sBAAsB,YAAY;",
|
|
6
|
+
"names": ["import_ds_utilities", "React"]
|
|
7
7
|
}
|
|
@@ -17,7 +17,10 @@ var __copyProps = (to, from, except, desc) => {
|
|
|
17
17
|
}
|
|
18
18
|
return to;
|
|
19
19
|
};
|
|
20
|
-
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
|
|
20
|
+
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
|
|
21
|
+
isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
|
|
22
|
+
mod
|
|
23
|
+
));
|
|
21
24
|
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
22
25
|
var DSToolbarV2Context_exports = {};
|
|
23
26
|
__export(DSToolbarV2Context_exports, {
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/DSToolbarV2Context.tsx", "../../../../scripts/build/transpile/react-shim.js"],
|
|
4
4
|
"sourcesContent": ["import { createContext, MutableRefObject } from 'react';\nimport type { DSToolbarItemT } from './react-desc-prop-types';\ninterface IDSToolbarV2Context {\n registerReference: (uid: string, ref: MutableRefObject<DSToolbarItemT.RenderHTMLElementT>) => void;\n itemReferences: Record<string, MutableRefObject<DSToolbarItemT.RenderHTMLElementT>>;\n toolbarUid: string;\n activeItem: string;\n setActiveItem: React.Dispatch<React.SetStateAction<string>>;\n}\n\nexport const DSToolbarV2Context = createContext<IDSToolbarV2Context>({\n registerReference: () => null,\n itemReferences: {},\n toolbarUid: '',\n activeItem: '',\n setActiveItem: () => {},\n});\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
-
"mappings": "
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAAgD;AAUzC,MAAM,yBAAqB,4BAAmC;AAAA,EACnE,mBAAmB,MAAM;AAAA,EACzB,gBAAgB,CAAC;AAAA,EACjB,YAAY;AAAA,EACZ,YAAY;AAAA,EACZ,eAAe,MAAM;AAAA,EAAC;AACxB,CAAC;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -17,7 +17,10 @@ var __copyProps = (to, from, except, desc) => {
|
|
|
17
17
|
}
|
|
18
18
|
return to;
|
|
19
19
|
};
|
|
20
|
-
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
|
|
20
|
+
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
|
|
21
|
+
isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
|
|
22
|
+
mod
|
|
23
|
+
));
|
|
21
24
|
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
22
25
|
var DSToolbar_exports = {};
|
|
23
26
|
__export(DSToolbar_exports, {
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/deprecated/DSToolbar.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
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": "
|
|
6
|
-
"names": []
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA,8CAAAA;AAAA,EAAA,wCAAAC;AAAA,EAAA,sCAAAC;AAAA,EAAA;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,uBAAmB,wCAAkB,KAAK,EAAE,WAAW,MAAM,CAAC,EAAE,WAAW,WAAW,KAAK,OAAO;AAAA,EACtG,iBAAiB,CAAC;AAAA,EAClB,CAAC,YAAY,CAAC,CAAC;AAAA,EACf,CAAC,OAAO;AACV,EAAE;AAEF,MAAM,YAAY,CAAC;AAAA,EACjB,iBAAiB,CAAC;AAAA,EAClB;AAAA,EACA,YAAY;AAAA,EACZ,YAAY;AAAA,EACZ,mBAAmB;AAAA,EACnB,WAAW,CAAC;AAAA,EACZ,OAAO;AAAA,KACJ;AACL,MAAM;AACJ,QAAM,mBAAe,qBAA8B,IAAI;AAEvD,QAAM,EAAE,gBAAgB,QAAI,oDAAsB,EAAE,cAAc,iBAAiB,CAAC;AAEpF,SACE,6BAAAC,QAAA,cAAC;AAAA,IACE,GAAG;AAAA,IACH,GAAG;AAAA,IACJ,YAAY,EAAE,WAAW,WAAW,KAAK;AAAA,IACzC,cAAU,+BAAU,UAAU,YAAY;AAAA,IAC1C,WAAW;AAAA,SAEV,+BAAAC,SAAwB,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,wBAAoB,8BAAS,SAAS;AAC5C,kBAAkB,YAAY;AAI9B,IAAO,oBAAQ;",
|
|
6
|
+
"names": ["Divider", "ToolbarGroup", "Item", "React", "decorateToolbarChildren"]
|
|
7
7
|
}
|
|
@@ -17,7 +17,10 @@ var __copyProps = (to, from, except, desc) => {
|
|
|
17
17
|
}
|
|
18
18
|
return to;
|
|
19
19
|
};
|
|
20
|
-
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
|
|
20
|
+
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
|
|
21
|
+
isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
|
|
22
|
+
mod
|
|
23
|
+
));
|
|
21
24
|
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
22
25
|
var ToolbarDivider_exports = {};
|
|
23
26
|
__export(ToolbarDivider_exports, {
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/deprecated/ToolbarDivider.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
4
|
"sourcesContent": ["import { aggregatedClasses } from '@elliemae/ds-classnames';\n\nconst blockName = 'toolbar';\n\nconst ToolbarDivider = aggregatedClasses('div')(blockName, 'divider');\n\nToolbarDivider.displayName = 'ToolbarDivider';\n\nexport default ToolbarDivider;\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
-
"mappings": "
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,2BAAkC;AAElC,MAAM,YAAY;AAElB,MAAM,qBAAiB,wCAAkB,KAAK,EAAE,WAAW,SAAS;AAEpE,eAAe,cAAc;AAE7B,IAAO,yBAAQ;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -17,7 +17,10 @@ var __copyProps = (to, from, except, desc) => {
|
|
|
17
17
|
}
|
|
18
18
|
return to;
|
|
19
19
|
};
|
|
20
|
-
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
|
|
20
|
+
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
|
|
21
|
+
isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
|
|
22
|
+
mod
|
|
23
|
+
));
|
|
21
24
|
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
22
25
|
var ToolbarGroup_exports = {};
|
|
23
26
|
__export(ToolbarGroup_exports, {
|
|
@@ -30,9 +33,13 @@ var import_prop_types = __toESM(require("prop-types"));
|
|
|
30
33
|
var import_ds_classnames = require("@elliemae/ds-classnames");
|
|
31
34
|
var import_decorateToolbarChildren = __toESM(require("./decorateToolbarChildren"));
|
|
32
35
|
const blockName = "toolbar-group";
|
|
33
|
-
const ToolbarGroupContainer = (0, import_ds_classnames.aggregatedClasses)("div")(
|
|
34
|
-
|
|
35
|
-
|
|
36
|
+
const ToolbarGroupContainer = (0, import_ds_classnames.aggregatedClasses)("div")(
|
|
37
|
+
blockName,
|
|
38
|
+
null,
|
|
39
|
+
({ space }) => ({
|
|
40
|
+
[`space-${space}`]: !!space
|
|
41
|
+
})
|
|
42
|
+
);
|
|
36
43
|
const ToolbarGroup = ({ children, size, space = 0 }) => /* @__PURE__ */ import_react.default.createElement(ToolbarGroupContainer, {
|
|
37
44
|
classProps: { space }
|
|
38
45
|
}, (0, import_decorateToolbarChildren.default)(children, { size }));
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/deprecated/ToolbarGroup.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
4
|
"sourcesContent": ["import React from 'react';\nimport PropTypes from 'prop-types';\nimport { aggregatedClasses } from '@elliemae/ds-classnames';\nimport decorateToolbarChildren from './decorateToolbarChildren';\n\nconst blockName = 'toolbar-group';\n\nconst ToolbarGroupContainer = aggregatedClasses('div')(\n blockName,\n null,\n ({ space }) => ({\n [`space-${space}`]: !!space,\n }),\n);\n\nconst ToolbarGroup = ({ children, size, space = 0 }) => (\n <ToolbarGroupContainer classProps={{ space }}>\n {decorateToolbarChildren(children, { size })}\n </ToolbarGroupContainer>\n);\n\nToolbarGroup.propTypes = {\n children: PropTypes.any,\n size: PropTypes.number,\n space: PropTypes.number,\n};\n\nexport default ToolbarGroup;\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
-
"mappings": "
|
|
6
|
-
"names": []
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAAkB;AAClB,wBAAsB;AACtB,2BAAkC;AAClC,qCAAoC;AAEpC,MAAM,YAAY;AAElB,MAAM,4BAAwB,wCAAkB,KAAK;AAAA,EACnD;AAAA,EACA;AAAA,EACA,CAAC,EAAE,MAAM,OAAO;AAAA,IACd,CAAC,SAAS,UAAU,CAAC,CAAC;AAAA,EACxB;AACF;AAEA,MAAM,eAAe,CAAC,EAAE,UAAU,MAAM,QAAQ,EAAE,MAChD,6BAAAA,QAAA,cAAC;AAAA,EAAsB,YAAY,EAAE,MAAM;AAAA,OACxC,+BAAAC,SAAwB,UAAU,EAAE,KAAK,CAAC,CAC7C;AAGF,aAAa,YAAY;AAAA,EACvB,UAAU,kBAAAC,QAAU;AAAA,EACpB,MAAM,kBAAAA,QAAU;AAAA,EAChB,OAAO,kBAAAA,QAAU;AACnB;AAEA,IAAO,uBAAQ;",
|
|
6
|
+
"names": ["React", "decorateToolbarChildren", "PropTypes"]
|
|
7
7
|
}
|
|
@@ -17,7 +17,10 @@ var __copyProps = (to, from, except, desc) => {
|
|
|
17
17
|
}
|
|
18
18
|
return to;
|
|
19
19
|
};
|
|
20
|
-
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
|
|
20
|
+
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
|
|
21
|
+
isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
|
|
22
|
+
mod
|
|
23
|
+
));
|
|
21
24
|
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
22
25
|
var ToolbarItem_exports = {};
|
|
23
26
|
__export(ToolbarItem_exports, {
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/deprecated/ToolbarItem.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
4
|
"sourcesContent": ["import React, { useState } from 'react';\nimport PropTypes from 'prop-types';\nimport { useFocusGroupWithState } from '@elliemae/ds-shared';\nimport { DSButtonV2 } from '@elliemae/ds-button';\nimport { PopperPositions as Position } from '@elliemae/ds-popper';\n\nconst ToolbarItem = ({ icon, labelText, menu = undefined, containerProps = {}, ...otherProps }) => {\n const [ref, setRef] = useState(null);\n\n useFocusGroupWithState(ref);\n const btn = (\n <DSButtonV2 {...otherProps} buttonType=\"icon\" innerRef={(r) => setRef(r)} labelText={labelText} {...containerProps}>\n {icon}\n </DSButtonV2>\n );\n if (menu) {\n return React.cloneElement(menu, {\n ...menu.props,\n placement: Position.BOTTOM_END,\n triggerComponent: btn,\n });\n }\n return btn;\n};\n\nToolbarItem.displayName = 'ToolbarItem';\n\nToolbarItem.propTypes = {\n icon: PropTypes.element,\n labelText: PropTypes.string,\n};\n\nexport default ToolbarItem;\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
-
"mappings": "
|
|
6
|
-
"names": []
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAAgC;AAChC,wBAAsB;AACtB,uBAAuC;AACvC,uBAA2B;AAC3B,uBAA4C;AAE5C,MAAM,cAAc,CAAC,EAAE,MAAM,WAAW,OAAO,QAAW,iBAAiB,CAAC,MAAM,WAAW,MAAM;AACjG,QAAM,CAAC,KAAK,MAAM,QAAI,uBAAS,IAAI;AAEnC,+CAAuB,GAAG;AAC1B,QAAM,MACJ,6BAAAA,QAAA,cAAC;AAAA,IAAY,GAAG;AAAA,IAAY,YAAW;AAAA,IAAO,UAAU,CAAC,MAAM,OAAO,CAAC;AAAA,IAAG;AAAA,IAAuB,GAAG;AAAA,KACjG,IACH;AAEF,MAAI,MAAM;AACR,WAAO,aAAAA,QAAM,aAAa,MAAM;AAAA,MAC9B,GAAG,KAAK;AAAA,MACR,WAAW,iBAAAC,gBAAS;AAAA,MACpB,kBAAkB;AAAA,IACpB,CAAC;AAAA,EACH;AACA,SAAO;AACT;AAEA,YAAY,cAAc;AAE1B,YAAY,YAAY;AAAA,EACtB,MAAM,kBAAAC,QAAU;AAAA,EAChB,WAAW,kBAAAA,QAAU;AACvB;AAEA,IAAO,sBAAQ;",
|
|
6
|
+
"names": ["React", "Position", "PropTypes"]
|
|
7
7
|
}
|
|
@@ -17,7 +17,10 @@ var __copyProps = (to, from, except, desc) => {
|
|
|
17
17
|
}
|
|
18
18
|
return to;
|
|
19
19
|
};
|
|
20
|
-
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
|
|
20
|
+
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
|
|
21
|
+
isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
|
|
22
|
+
mod
|
|
23
|
+
));
|
|
21
24
|
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
22
25
|
var decorateToolbarChildren_exports = {};
|
|
23
26
|
__export(decorateToolbarChildren_exports, {
|
|
@@ -26,9 +29,13 @@ __export(decorateToolbarChildren_exports, {
|
|
|
26
29
|
module.exports = __toCommonJS(decorateToolbarChildren_exports);
|
|
27
30
|
var React = __toESM(require("react"));
|
|
28
31
|
var import_react = __toESM(require("react"));
|
|
29
|
-
var decorateToolbarChildren_default = (children, extraProps = {}) => import_react.default.Children.map(
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
32
|
+
var decorateToolbarChildren_default = (children, extraProps = {}) => import_react.default.Children.map(
|
|
33
|
+
children,
|
|
34
|
+
(component) => component ? (0, import_react.cloneElement)(component, {
|
|
35
|
+
...extraProps,
|
|
36
|
+
...component.props,
|
|
37
|
+
className: `${component.props.className} toolbar-item`
|
|
38
|
+
}) : component,
|
|
39
|
+
null
|
|
40
|
+
);
|
|
34
41
|
//# sourceMappingURL=decorateToolbarChildren.js.map
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/deprecated/decorateToolbarChildren.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
4
|
"sourcesContent": ["import React, { cloneElement } from 'react';\n\nexport default (children, extraProps = {}) =>\n React.Children.map(\n children,\n component =>\n component\n ? cloneElement(component, {\n ...extraProps,\n ...component.props,\n className: `${component.props.className} toolbar-item`,\n })\n : component,\n null,\n );\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
-
"mappings": "
|
|
6
|
-
"names": []
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAAoC;AAEpC,IAAO,kCAAQ,CAAC,UAAU,aAAa,CAAC,MACtC,aAAAA,QAAM,SAAS;AAAA,EACb;AAAA,EACA,eACE,gBACI,2BAAa,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
7
|
}
|
|
@@ -17,7 +17,10 @@ var __copyProps = (to, from, except, desc) => {
|
|
|
17
17
|
}
|
|
18
18
|
return to;
|
|
19
19
|
};
|
|
20
|
-
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
|
|
20
|
+
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
|
|
21
|
+
isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
|
|
22
|
+
mod
|
|
23
|
+
));
|
|
21
24
|
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
22
25
|
var useKeyboardNavigation_exports = {};
|
|
23
26
|
__export(useKeyboardNavigation_exports, {
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/deprecated/hooks/useKeyboardNavigation.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
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": "
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAAsD;AAY/C,MAAM,wBAAwB,CAAC,EAAE,cAAc,iBAAiB,MAA8B;AACnG,QAAM,2BAAuB,qBAA6C,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,sBAAkB,0BAAY,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
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -18,7 +18,10 @@ var __copyProps = (to, from, except, desc) => {
|
|
|
18
18
|
return to;
|
|
19
19
|
};
|
|
20
20
|
var __reExport = (target, mod, secondTarget) => (__copyProps(target, mod, "default"), secondTarget && __copyProps(secondTarget, mod, "default"));
|
|
21
|
-
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
|
|
21
|
+
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
|
|
22
|
+
isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
|
|
23
|
+
mod
|
|
24
|
+
));
|
|
22
25
|
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
23
26
|
var deprecated_exports = {};
|
|
24
27
|
__export(deprecated_exports, {
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/deprecated/index.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
4
|
"sourcesContent": ["/* eslint-disable import/export */\nexport * from './DSToolbar';\n\nexport { default } from './DSToolbar';\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
-
"mappings": "
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADCvB,+BAAc,wBADd;AAGA,uBAAwB;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/dist/cjs/index.js
CHANGED
|
@@ -18,7 +18,10 @@ var __copyProps = (to, from, except, desc) => {
|
|
|
18
18
|
return to;
|
|
19
19
|
};
|
|
20
20
|
var __reExport = (target, mod, secondTarget) => (__copyProps(target, mod, "default"), secondTarget && __copyProps(secondTarget, mod, "default"));
|
|
21
|
-
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
|
|
21
|
+
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
|
|
22
|
+
isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
|
|
23
|
+
mod
|
|
24
|
+
));
|
|
22
25
|
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
23
26
|
var src_exports = {};
|
|
24
27
|
__export(src_exports, {
|
package/dist/cjs/index.js.map
CHANGED
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/index.tsx", "../../../../scripts/build/transpile/react-shim.js"],
|
|
4
4
|
"sourcesContent": ["export * from './deprecated';\nexport { default } from './deprecated';\nexport * from './DSToolbarV2';\nexport * from './DSToolbarItemV2';\nexport * from './DSToolbarSeparatorV2';\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
-
"mappings": "
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,wBAAc,yBAAd;AACA,wBAAwB;AACxB,wBAAc,0BAFd;AAGA,wBAAc,8BAHd;AAIA,wBAAc,mCAJd;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -17,7 +17,10 @@ var __copyProps = (to, from, except, desc) => {
|
|
|
17
17
|
}
|
|
18
18
|
return to;
|
|
19
19
|
};
|
|
20
|
-
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
|
|
20
|
+
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
|
|
21
|
+
isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
|
|
22
|
+
mod
|
|
23
|
+
));
|
|
21
24
|
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
22
25
|
var react_desc_prop_types_exports = {};
|
|
23
26
|
__export(react_desc_prop_types_exports, {
|
|
@@ -50,6 +53,8 @@ const DSToolbarItemV2Schema = {
|
|
|
50
53
|
...import_ds_utilities.globalAttributesPropTypes,
|
|
51
54
|
render: import_ds_utilities.PropTypes.func.isRequired.description("render function").defaultValue(() => {
|
|
52
55
|
}),
|
|
53
|
-
isFirstItem: import_ds_utilities.PropTypes.bool.description(
|
|
56
|
+
isFirstItem: import_ds_utilities.PropTypes.bool.description(
|
|
57
|
+
"If true the item will have tab index 0 to be the first element focusable by keyboard on the page load"
|
|
58
|
+
).defaultValue(false)
|
|
54
59
|
};
|
|
55
60
|
//# sourceMappingURL=react-desc-prop-types.js.map
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/react-desc-prop-types.tsx", "../../../../scripts/build/transpile/react-shim.js"],
|
|
4
4
|
"sourcesContent": ["import { globalAttributesPropTypes, PropTypes } from '@elliemae/ds-utilities';\n\nexport declare namespace DSToolbarT {\n export interface Props {\n alignment?: 'left' | 'right';\n withDepth?: boolean;\n compact?: boolean;\n innerRef?: React.MutableRefObject<HTMLDivElement>;\n children: React.Component<DSToolbarItemT.Props>;\n }\n}\n\nexport declare namespace DSToolbarItemT {\n export type RenderHTMLElementT =\n | HTMLButtonElement\n | HTMLInputElement\n | HTMLTextAreaElement\n | HTMLSelectElement\n | HTMLOptionElement;\n export interface Props {\n render: (props: { innerRef: React.MutableRefObject<HTMLElement>; tabIndex: number }) => JSX.Element;\n isFirstItem?: boolean;\n }\n}\n\nexport const defaultItemProps = {\n render: () => {},\n isFirstItem: false,\n};\n\nexport const defaultProps = {\n alignment: 'right',\n withDepth: true,\n compact: false,\n};\n\nexport const DSToolbarV2Schema = {\n ...globalAttributesPropTypes,\n alignment: PropTypes.oneOf(['right', 'left'])\n .description('Whether to align the content left or right')\n .defaultValue('right'),\n withDepth: PropTypes.bool.description('Whether to add a box-shadow to the container').defaultValue(true),\n compact: PropTypes.bool.description('Whether you want the compact version of the toolbar').defaultValue(false),\n innerRef: PropTypes.oneOfType([PropTypes.func, PropTypes.object]).description('Reference to attach to the wrapper'),\n};\n\nexport const DSToolbarItemV2Schema = {\n ...globalAttributesPropTypes,\n render: PropTypes.func.isRequired.description('render function').defaultValue(() => {}),\n isFirstItem: PropTypes.bool\n .description(\n 'If true the item will have tab index 0 to be the first element focusable by keyboard on the page load',\n )\n .defaultValue(false),\n};\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
-
"mappings": "
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,0BAAqD;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,8BAAU,MAAM,CAAC,SAAS,MAAM,CAAC,EACzC,YAAY,4CAA4C,EACxD,aAAa,OAAO;AAAA,EACvB,WAAW,8BAAU,KAAK,YAAY,8CAA8C,EAAE,aAAa,IAAI;AAAA,EACvG,SAAS,8BAAU,KAAK,YAAY,qDAAqD,EAAE,aAAa,KAAK;AAAA,EAC7G,UAAU,8BAAU,UAAU,CAAC,8BAAU,MAAM,8BAAU,MAAM,CAAC,EAAE,YAAY,oCAAoC;AACpH;AAEO,MAAM,wBAAwB;AAAA,EACnC,GAAG;AAAA,EACH,QAAQ,8BAAU,KAAK,WAAW,YAAY,iBAAiB,EAAE,aAAa,MAAM;AAAA,EAAC,CAAC;AAAA,EACtF,aAAa,8BAAU,KACpB;AAAA,IACC;AAAA,EACF,EACC,aAAa,KAAK;AACvB;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/dist/cjs/styled.js
CHANGED
|
@@ -17,7 +17,10 @@ var __copyProps = (to, from, except, desc) => {
|
|
|
17
17
|
}
|
|
18
18
|
return to;
|
|
19
19
|
};
|
|
20
|
-
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
|
|
20
|
+
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
|
|
21
|
+
isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
|
|
22
|
+
mod
|
|
23
|
+
));
|
|
21
24
|
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
22
25
|
var styled_exports = {};
|
|
23
26
|
__export(styled_exports, {
|
package/dist/cjs/styled.js.map
CHANGED
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/styled.tsx", "../../../../scripts/build/transpile/react-shim.js"],
|
|
4
4
|
"sourcesContent": ["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", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
-
"mappings": "
|
|
6
|
-
"names": []
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,uBAAuB;AACvB,qBAAiB;AAEV,MAAM,2BAAuB,yBAAO,eAAAA,OAAI;AAAA,sBACzB,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ;AAAA;AAAA,gBAE5C,CAAC,UAAW,MAAM,UAAU,SAAS;AAAA,gBACrC,CAAC,UAAU,MAAM,MAAM,MAAM;AAAA;AAAA,eAE9B,CAAC,UAAU,MAAM,MAAM,MAAM;AAAA;AAAA,gBAE5B,CAAC,UAAW,CAAC,MAAM,YAAY,SAAS;AAAA;AAGjD,MAAM,wBAAoB,yBAAO,eAAAA,OAAI;AAErC,MAAM,sBAAkB,yBAAO,eAAAA,OAAI;AAAA;AAAA;AAAA,sBAGpB,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ;AAAA;",
|
|
6
|
+
"names": ["Grid"]
|
|
7
7
|
}
|
|
@@ -17,7 +17,10 @@ var __copyProps = (to, from, except, desc) => {
|
|
|
17
17
|
}
|
|
18
18
|
return to;
|
|
19
19
|
};
|
|
20
|
-
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
|
|
20
|
+
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
|
|
21
|
+
isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
|
|
22
|
+
mod
|
|
23
|
+
));
|
|
21
24
|
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
22
25
|
var useToolbarItemHandlers_exports = {};
|
|
23
26
|
__export(useToolbarItemHandlers_exports, {
|
|
@@ -39,29 +42,37 @@ const useToolbarItemHandlers = (toolbarItemId) => {
|
|
|
39
42
|
const onFocus = (0, import_react.useCallback)(() => {
|
|
40
43
|
setActiveItem(toolbarItemId);
|
|
41
44
|
}, [setActiveItem, toolbarItemId]);
|
|
42
|
-
const onKeyDown = (0, import_react.useCallback)(
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
const
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
e.
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
45
|
+
const onKeyDown = (0, import_react.useCallback)(
|
|
46
|
+
(e) => {
|
|
47
|
+
const toolbarItems = [...document.querySelectorAll(`#${toolbarUid} .ds-toolbar-item`)];
|
|
48
|
+
let nextToolbarItemIndex = -1;
|
|
49
|
+
const toolbarItemIndex = toolbarItems.findIndex((domElem) => domElem.id === toolbarItemId);
|
|
50
|
+
const criteria = (item) => {
|
|
51
|
+
const ref = itemReferences[item.id];
|
|
52
|
+
return !ref.current.disabled;
|
|
53
|
+
};
|
|
54
|
+
if (["ArrowLeft", "ArrowRight"].includes(e.code)) {
|
|
55
|
+
nextToolbarItemIndex = findInCircularList(
|
|
56
|
+
toolbarItems,
|
|
57
|
+
toolbarItemIndex,
|
|
58
|
+
criteria,
|
|
59
|
+
e.code === "ArrowLeft" ? -1 : 1
|
|
60
|
+
);
|
|
61
|
+
} else if (e.code === "Home") {
|
|
62
|
+
nextToolbarItemIndex = 0;
|
|
63
|
+
} else if (e.code === "End") {
|
|
64
|
+
nextToolbarItemIndex = toolbarItems.length - 1;
|
|
65
|
+
}
|
|
66
|
+
if (nextToolbarItemIndex >= 0 && nextToolbarItemIndex < toolbarItems.length) {
|
|
67
|
+
e.preventDefault();
|
|
68
|
+
e.stopPropagation();
|
|
69
|
+
const ref = itemReferences[toolbarItems[nextToolbarItemIndex].id];
|
|
70
|
+
if (ref.current)
|
|
71
|
+
ref.current.focus();
|
|
72
|
+
}
|
|
73
|
+
},
|
|
74
|
+
[toolbarUid, toolbarItemId, itemReferences]
|
|
75
|
+
);
|
|
65
76
|
return { onKeyDown, onFocus };
|
|
66
77
|
};
|
|
67
78
|
//# sourceMappingURL=useToolbarItemHandlers.js.map
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/useToolbarItemHandlers.tsx", "../../../../scripts/build/transpile/react-shim.js"],
|
|
4
4
|
"sourcesContent": ["import { useCallback, useContext } from 'react';\nimport { DSToolbarV2Context } from './DSToolbarV2Context';\n\nconst findInCircularList = (\n list: Element[],\n from: number,\n criteria: (item: Element) => boolean,\n step = 1,\n // eslint-disable-next-line max-params\n): number => {\n for (\n let i = (from + step + list.length) % list.length;\n i !== from && from > -1;\n i = (i + step + list.length) % list.length\n ) {\n if (criteria(list[i])) return i;\n }\n return from; // return same item\n};\n\nexport const useToolbarItemHandlers = (\n toolbarItemId: string,\n): {\n onKeyDown: React.KeyboardEventHandler;\n onFocus: React.FocusEventHandler;\n} => {\n const { toolbarUid, itemReferences, setActiveItem } = useContext(DSToolbarV2Context);\n\n const onFocus: React.FocusEventHandler = useCallback(() => {\n setActiveItem(toolbarItemId);\n }, [setActiveItem, toolbarItemId]);\n\n const onKeyDown: React.KeyboardEventHandler = useCallback(\n (e) => {\n const toolbarItems = [...document.querySelectorAll(`#${toolbarUid} .ds-toolbar-item`)];\n let nextToolbarItemIndex = -1;\n const toolbarItemIndex = toolbarItems.findIndex((domElem) => domElem.id === toolbarItemId);\n\n 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", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
-
"mappings": "
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAAwC;AACxC,gCAAmC;AAEnC,MAAM,qBAAqB,CACzB,MACA,MACA,UACA,OAAO,MAEI;AACX,WACM,KAAK,OAAO,OAAO,KAAK,UAAU,KAAK,QAC3C,MAAM,QAAQ,OAAO,IACrB,KAAK,IAAI,OAAO,KAAK,UAAU,KAAK,QACpC;AACA,QAAI,SAAS,KAAK,EAAE;AAAG,aAAO;AAAA,EAChC;AACA,SAAO;AACT;AAEO,MAAM,yBAAyB,CACpC,kBAIG;AACH,QAAM,EAAE,YAAY,gBAAgB,cAAc,QAAI,yBAAW,4CAAkB;AAEnF,QAAM,cAAmC,0BAAY,MAAM;AACzD,kBAAc,aAAa;AAAA,EAC7B,GAAG,CAAC,eAAe,aAAa,CAAC;AAEjC,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;AAEhC,eAAO,CAAC,IAAI,QAAQ;AAAA,MACtB;AAEA,UAAI,CAAC,aAAa,YAAY,EAAE,SAAS,EAAE,IAAI,GAAG;AAChD,+BAAuB;AAAA,UACrB;AAAA,UACA;AAAA,UACA;AAAA,UACA,EAAE,SAAS,cAAc,KAAK;AAAA,QAChC;AAAA,MACF,WAAW,EAAE,SAAS,QAAQ;AAC5B,+BAAuB;AAAA,MACzB,WAAW,EAAE,SAAS,OAAO;AAC3B,+BAAuB,aAAa,SAAS;AAAA,MAC/C;AAEA,UAAI,wBAAwB,KAAK,uBAAuB,aAAa,QAAQ;AAC3E,UAAE,eAAe;AACjB,UAAE,gBAAgB;AAClB,cAAM,MAAM,eAAe,aAAa,sBAAsB;AAC9D,YAAI,IAAI;AAAS,cAAI,QAAQ,MAAM;AAAA,MACrC;AAAA,IACF;AAAA,IACA,CAAC,YAAY,eAAe,cAAc;AAAA,EAC5C;AAEA,SAAO,EAAE,WAAW,QAAQ;AAC9B;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -23,7 +23,10 @@ const DSToolbarItemV2 = (props) => {
|
|
|
23
23
|
registerReference(id, ref);
|
|
24
24
|
return id;
|
|
25
25
|
}, [registerReference, ref, providedId]);
|
|
26
|
-
const tabIndex = useMemo(
|
|
26
|
+
const tabIndex = useMemo(
|
|
27
|
+
() => activeItem === toolbarItemId || !activeItem && isFirstItem ? 0 : -1,
|
|
28
|
+
[activeItem, isFirstItem, toolbarItemId]
|
|
29
|
+
);
|
|
27
30
|
const handlers = useToolbarItemHandlers(toolbarItemId);
|
|
28
31
|
return /* @__PURE__ */ React2.createElement(StyledToolbarItem, {
|
|
29
32
|
id: toolbarItemId,
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/DSToolbarItemV2.tsx"],
|
|
4
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-utilities';\nimport { uid } from 'uid';\nimport { DSToolbarV2Context } from './DSToolbarV2Context';\nimport { StyledToolbarItem } from './styled';\nimport { useToolbarItemHandlers } from './useToolbarItemHandlers';\nimport { defaultItemProps, DSToolbarItemV2Schema } from './react-desc-prop-types';\nimport type { DSToolbarItemT } from './react-desc-prop-types';\nconst DSToolbarItemV2: React.ComponentType<DSToolbarItemT.Props> = (props) => {\n const propsWithDefaults = useMemoMergePropsWithDefault(props, defaultItemProps);\n\n useValidateTypescriptPropTypes(propsWithDefaults, DSToolbarItemV2Schema);\n const { render, isFirstItem } = propsWithDefaults;\n const { id: providedId, ...restGlobals } = useGetGlobalAttributes(propsWithDefaults);\n const { registerReference, activeItem } = useContext(DSToolbarV2Context);\n const ref = useRef(null);\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 () => (activeItem === toolbarItemId || (!activeItem && isFirstItem) ? 0 : -1),\n [activeItem, isFirstItem, toolbarItemId],\n );\n\n const handlers = useToolbarItemHandlers(toolbarItemId);\n return (\n <StyledToolbarItem\n id={toolbarItemId}\n data-testid=\"ds-toolbar-item\"\n className=\"ds-toolbar-item\"\n {...handlers}\n {...restGlobals}\n >\n {render({ innerRef: ref, tabIndex })}\n </StyledToolbarItem>\n );\n};\n\nDSToolbarItemV2.propTypes = DSToolbarItemV2Schema;\n\nDSToolbarItemV2.displayName = 'DSToolbarItemV2';\nconst DSToolbarItemV2WithSchema = describe(DSToolbarItemV2).description('Toolbar Item');\nDSToolbarItemV2WithSchema.propTypes = DSToolbarItemV2Schema;\n\nexport { DSToolbarItemV2, DSToolbarItemV2WithSchema };\n"],
|
|
5
|
-
"mappings": "AAAA;
|
|
6
|
-
"names": []
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;ACCvB,OAAOA,UAAS,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,MAAM,kBAA6D,CAAC,UAAU;AAC5E,QAAM,oBAAoB,6BAA6B,OAAO,gBAAgB;AAE9E,iCAA+B,mBAAmB,qBAAqB;AACvE,QAAM,EAAE,QAAQ,YAAY,IAAI;AAChC,QAAM,EAAE,IAAI,eAAe,YAAY,IAAI,uBAAuB,iBAAiB;AACnF,QAAM,EAAE,mBAAmB,WAAW,IAAI,WAAW,kBAAkB;AACvE,QAAM,MAAM,OAAO,IAAI;AACvB,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,eAAe,iBAAkB,CAAC,cAAc,cAAe,IAAI;AAAA,IAC1E,CAAC,YAAY,aAAa,aAAa;AAAA,EACzC;AAEA,QAAM,WAAW,uBAAuB,aAAa;AACrD,SACE,gBAAAA,OAAA,cAAC;AAAA,IACC,IAAI;AAAA,IACJ,eAAY;AAAA,IACZ,WAAU;AAAA,IACT,GAAG;AAAA,IACH,GAAG;AAAA,KAEH,OAAO,EAAE,UAAU,KAAK,SAAS,CAAC,CACrC;AAEJ;AAEA,gBAAgB,YAAY;AAE5B,gBAAgB,cAAc;AAC9B,MAAM,4BAA4B,SAAS,eAAe,EAAE,YAAY,cAAc;AACtF,0BAA0B,YAAY;",
|
|
6
|
+
"names": ["React"]
|
|
7
7
|
}
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/DSToolbarSeparatorV2.tsx"],
|
|
4
4
|
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport { StyledSeparator } from './styled';\n\nexport const DSToolbarSeparatorV2: React.ComponentType = () => <StyledSeparator className=\"ds-toolbar-separator\" />;\n"],
|
|
5
|
-
"mappings": "AAAA;
|
|
6
|
-
"names": []
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;ACAvB,OAAOA,YAAW;AAClB,SAAS,uBAAuB;AAEzB,MAAM,uBAA4C,MAAM,gBAAAA,OAAA,cAAC;AAAA,EAAgB,WAAU;AAAA,CAAuB;",
|
|
6
|
+
"names": ["React"]
|
|
7
7
|
}
|
package/dist/esm/DSToolbarV2.js
CHANGED
|
@@ -18,10 +18,16 @@ const DSToolbarV2 = (props) => {
|
|
|
18
18
|
const toolbarUid = useMemo(() => globalsProps.id ?? `ds-toolbar-${uid()}`, []);
|
|
19
19
|
const [itemReferences, setItemReferences] = useState({});
|
|
20
20
|
const [activeItem, setActiveItem] = useState("");
|
|
21
|
-
const registerReference = useCallback(
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
21
|
+
const registerReference = useCallback(
|
|
22
|
+
(itemId, ref) => {
|
|
23
|
+
setItemReferences((prevItemReferences) => ({ ...prevItemReferences, [itemId]: ref }));
|
|
24
|
+
},
|
|
25
|
+
[setItemReferences]
|
|
26
|
+
);
|
|
27
|
+
const ctx = useMemo(
|
|
28
|
+
() => ({ toolbarUid, registerReference, itemReferences, activeItem, setActiveItem }),
|
|
29
|
+
[activeItem, itemReferences, registerReference, toolbarUid]
|
|
30
|
+
);
|
|
25
31
|
return /* @__PURE__ */ React2.createElement(DSToolbarV2Context.Provider, {
|
|
26
32
|
value: ctx
|
|
27
33
|
}, /* @__PURE__ */ React2.createElement(StyledToolbarWrapper, {
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/DSToolbarV2.tsx"],
|
|
4
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} from '@elliemae/ds-utilities';\nimport { describe } from '@elliemae/ds-utilities';\nimport { uid } from 'uid';\nimport { DSToolbarV2Context } from './DSToolbarV2Context';\nimport { DSToolbarV2Schema, defaultProps } from './react-desc-prop-types';\nimport { StyledToolbarWrapper } from './styled';\nimport type { DSToolbarT, DSToolbarItemT } from './react-desc-prop-types';\n\nconst DSToolbarV2: React.ComponentType<DSToolbarT.Props> = (props) => {\n const propsWithDefaults = useMemoMergePropsWithDefault(props, defaultProps);\n\n useValidateTypescriptPropTypes(propsWithDefaults, DSToolbarV2Schema);\n\n const { alignment, withDepth, compact, innerRef, children } = propsWithDefaults;\n\n const globalsProps = useGetGlobalAttributes(propsWithDefaults);\n\n const toolbarUid = useMemo(() => globalsProps.id ?? `ds-toolbar-${uid()}`, []);\n\n const [itemReferences, setItemReferences] = useState({});\n const [activeItem, setActiveItem] = useState('');\n\n const registerReference = useCallback(\n (itemId: string, ref: React.MutableRefObject<DSToolbarItemT.RenderHTMLElementT>) => {\n setItemReferences((prevItemReferences) => ({ ...prevItemReferences, [itemId]: ref }));\n },\n [setItemReferences],\n );\n\n const ctx = useMemo(\n () => ({ toolbarUid, registerReference, itemReferences, activeItem, setActiveItem }),\n [activeItem, itemReferences, registerReference, toolbarUid],\n );\n\n return (\n <DSToolbarV2Context.Provider value={ctx}>\n <StyledToolbarWrapper\n role=\"toolbar\"\n data-testid=\"ds-toolbar-wrapper\"\n id={toolbarUid}\n alignItems=\"center\"\n justifyContent={alignment === 'left' ? 'flex-start' : 'flex-end'}\n withDepth={withDepth}\n gutter=\"xxs2\"\n compact={compact}\n ref={innerRef}\n {...globalsProps}\n >\n {children}\n </StyledToolbarWrapper>\n </DSToolbarV2Context.Provider>\n );\n};\n\nDSToolbarV2.propTypes = DSToolbarV2Schema;\n\nDSToolbarV2.displayName = 'DSToolbarV2';\nconst DSToolbarV2WithSchema = describe(DSToolbarV2).description('Toolbar');\nDSToolbarV2WithSchema.propTypes = DSToolbarV2Schema;\n\nexport { DSToolbarV2, DSToolbarV2WithSchema };\n"],
|
|
5
|
-
"mappings": "AAAA;
|
|
6
|
-
"names": []
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;ACCvB,OAAOA,UAAS,aAAa,SAAS,gBAAgB;AACtD;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,gBAAgB;AACzB,SAAS,WAAW;AACpB,SAAS,0BAA0B;AACnC,SAAS,mBAAmB,oBAAoB;AAChD,SAAS,4BAA4B;AAGrC,MAAM,cAAqD,CAAC,UAAU;AACpE,QAAM,oBAAoB,6BAA6B,OAAO,YAAY;AAE1E,iCAA+B,mBAAmB,iBAAiB;AAEnE,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,YAAY,aAAa,IAAI,SAAS,EAAE;AAE/C,QAAM,oBAAoB;AAAA,IACxB,CAAC,QAAgB,QAAmE;AAClF,wBAAkB,CAAC,wBAAwB,EAAE,GAAG,oBAAoB,CAAC,SAAS,IAAI,EAAE;AAAA,IACtF;AAAA,IACA,CAAC,iBAAiB;AAAA,EACpB;AAEA,QAAM,MAAM;AAAA,IACV,OAAO,EAAE,YAAY,mBAAmB,gBAAgB,YAAY,cAAc;AAAA,IAClF,CAAC,YAAY,gBAAgB,mBAAmB,UAAU;AAAA,EAC5D;AAEA,SACE,gBAAAA,OAAA,cAAC,mBAAmB,UAAnB;AAAA,IAA4B,OAAO;AAAA,KAClC,gBAAAA,OAAA,cAAC;AAAA,IACC,MAAK;AAAA,IACL,eAAY;AAAA,IACZ,IAAI;AAAA,IACJ,YAAW;AAAA,IACX,gBAAgB,cAAc,SAAS,eAAe;AAAA,IACtD;AAAA,IACA,QAAO;AAAA,IACP;AAAA,IACA,KAAK;AAAA,IACJ,GAAG;AAAA,KAEH,QACH,CACF;AAEJ;AAEA,YAAY,YAAY;AAExB,YAAY,cAAc;AAC1B,MAAM,wBAAwB,SAAS,WAAW,EAAE,YAAY,SAAS;AACzE,sBAAsB,YAAY;",
|
|
6
|
+
"names": ["React"]
|
|
7
7
|
}
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/DSToolbarV2Context.tsx"],
|
|
4
4
|
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { createContext, MutableRefObject } from 'react';\nimport type { DSToolbarItemT } from './react-desc-prop-types';\ninterface IDSToolbarV2Context {\n registerReference: (uid: string, ref: MutableRefObject<DSToolbarItemT.RenderHTMLElementT>) => void;\n itemReferences: Record<string, MutableRefObject<DSToolbarItemT.RenderHTMLElementT>>;\n toolbarUid: string;\n activeItem: string;\n setActiveItem: React.Dispatch<React.SetStateAction<string>>;\n}\n\nexport const DSToolbarV2Context = createContext<IDSToolbarV2Context>({\n registerReference: () => null,\n itemReferences: {},\n toolbarUid: '',\n activeItem: '',\n setActiveItem: () => {},\n});\n"],
|
|
5
|
-
"mappings": "AAAA;
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,qBAAuC;AAUzC,MAAM,qBAAqB,cAAmC;AAAA,EACnE,mBAAmB,MAAM;AAAA,EACzB,gBAAgB,CAAC;AAAA,EACjB,YAAY;AAAA,EACZ,YAAY;AAAA,EACZ,eAAe,MAAM;AAAA,EAAC;AACxB,CAAC;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/deprecated/DSToolbar.tsx"],
|
|
4
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;
|
|
6
|
-
"names": []
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;ACAvB,OAAOA,UAAS,cAAc;AAC9B,SAAS,yBAAyB;AAClC,SAAS,UAAU,WAAW,iBAAiB;AAC/C,OAAO,6BAA6B;AACpC,OAAO,UAAU;AACjB,OAAO,kBAAkB;AACzB,OAAO,aAAa;AACpB,SAAS,6BAA6B;AAEtC,MAAM,YAAY;AAElB,MAAM,mBAAmB,kBAAkB,KAAK,EAAE,WAAW,MAAM,CAAC,EAAE,WAAW,WAAW,KAAK,OAAO;AAAA,EACtG,iBAAiB,CAAC;AAAA,EAClB,CAAC,YAAY,CAAC,CAAC;AAAA,EACf,CAAC,OAAO;AACV,EAAE;AAEF,MAAM,YAAY,CAAC;AAAA,EACjB,iBAAiB,CAAC;AAAA,EAClB;AAAA,EACA,YAAY;AAAA,EACZ,YAAY;AAAA,EACZ,mBAAmB;AAAA,EACnB,WAAW,CAAC;AAAA,EACZ,OAAO;AAAA,KACJ;AACL,MAAM;AACJ,QAAM,eAAe,OAA8B,IAAI;AAEvD,QAAM,EAAE,gBAAgB,IAAI,sBAAsB,EAAE,cAAc,iBAAiB,CAAC;AAEpF,SACE,gBAAAA,OAAA,cAAC;AAAA,IACE,GAAG;AAAA,IACH,GAAG;AAAA,IACJ,YAAY,EAAE,WAAW,WAAW,KAAK;AAAA,IACzC,UAAU,UAAU,UAAU,YAAY;AAAA,IAC1C,WAAW;AAAA,KAEV,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
|
+
"names": ["React"]
|
|
7
7
|
}
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/deprecated/ToolbarDivider.tsx"],
|
|
4
4
|
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { aggregatedClasses } from '@elliemae/ds-classnames';\n\nconst blockName = 'toolbar';\n\nconst ToolbarDivider = aggregatedClasses('div')(blockName, 'divider');\n\nToolbarDivider.displayName = 'ToolbarDivider';\n\nexport default ToolbarDivider;\n"],
|
|
5
|
-
"mappings": "AAAA;
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,yBAAyB;AAElC,MAAM,YAAY;AAElB,MAAM,iBAAiB,kBAAkB,KAAK,EAAE,WAAW,SAAS;AAEpE,eAAe,cAAc;AAE7B,IAAO,yBAAQ;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -4,9 +4,13 @@ import PropTypes from "prop-types";
|
|
|
4
4
|
import { aggregatedClasses } from "@elliemae/ds-classnames";
|
|
5
5
|
import decorateToolbarChildren from "./decorateToolbarChildren";
|
|
6
6
|
const blockName = "toolbar-group";
|
|
7
|
-
const ToolbarGroupContainer = aggregatedClasses("div")(
|
|
8
|
-
|
|
9
|
-
|
|
7
|
+
const ToolbarGroupContainer = aggregatedClasses("div")(
|
|
8
|
+
blockName,
|
|
9
|
+
null,
|
|
10
|
+
({ space }) => ({
|
|
11
|
+
[`space-${space}`]: !!space
|
|
12
|
+
})
|
|
13
|
+
);
|
|
10
14
|
const ToolbarGroup = ({ children, size, space = 0 }) => /* @__PURE__ */ React2.createElement(ToolbarGroupContainer, {
|
|
11
15
|
classProps: { space }
|
|
12
16
|
}, decorateToolbarChildren(children, { size }));
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/deprecated/ToolbarGroup.tsx"],
|
|
4
4
|
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport PropTypes from 'prop-types';\nimport { aggregatedClasses } from '@elliemae/ds-classnames';\nimport decorateToolbarChildren from './decorateToolbarChildren';\n\nconst blockName = 'toolbar-group';\n\nconst ToolbarGroupContainer = aggregatedClasses('div')(\n blockName,\n null,\n ({ space }) => ({\n [`space-${space}`]: !!space,\n }),\n);\n\nconst ToolbarGroup = ({ children, size, space = 0 }) => (\n <ToolbarGroupContainer classProps={{ space }}>\n {decorateToolbarChildren(children, { size })}\n </ToolbarGroupContainer>\n);\n\nToolbarGroup.propTypes = {\n children: PropTypes.any,\n size: PropTypes.number,\n space: PropTypes.number,\n};\n\nexport default ToolbarGroup;\n"],
|
|
5
|
-
"mappings": "AAAA;
|
|
6
|
-
"names": []
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;ACAvB,OAAOA,YAAW;AAClB,OAAO,eAAe;AACtB,SAAS,yBAAyB;AAClC,OAAO,6BAA6B;AAEpC,MAAM,YAAY;AAElB,MAAM,wBAAwB,kBAAkB,KAAK;AAAA,EACnD;AAAA,EACA;AAAA,EACA,CAAC,EAAE,MAAM,OAAO;AAAA,IACd,CAAC,SAAS,UAAU,CAAC,CAAC;AAAA,EACxB;AACF;AAEA,MAAM,eAAe,CAAC,EAAE,UAAU,MAAM,QAAQ,EAAE,MAChD,gBAAAA,OAAA,cAAC;AAAA,EAAsB,YAAY,EAAE,MAAM;AAAA,GACxC,wBAAwB,UAAU,EAAE,KAAK,CAAC,CAC7C;AAGF,aAAa,YAAY;AAAA,EACvB,UAAU,UAAU;AAAA,EACpB,MAAM,UAAU;AAAA,EAChB,OAAO,UAAU;AACnB;AAEA,IAAO,uBAAQ;",
|
|
6
|
+
"names": ["React"]
|
|
7
7
|
}
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/deprecated/ToolbarItem.tsx"],
|
|
4
4
|
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useState } from 'react';\nimport PropTypes from 'prop-types';\nimport { useFocusGroupWithState } from '@elliemae/ds-shared';\nimport { DSButtonV2 } from '@elliemae/ds-button';\nimport { PopperPositions as Position } from '@elliemae/ds-popper';\n\nconst ToolbarItem = ({ icon, labelText, menu = undefined, containerProps = {}, ...otherProps }) => {\n const [ref, setRef] = useState(null);\n\n useFocusGroupWithState(ref);\n const btn = (\n <DSButtonV2 {...otherProps} buttonType=\"icon\" innerRef={(r) => setRef(r)} labelText={labelText} {...containerProps}>\n {icon}\n </DSButtonV2>\n );\n if (menu) {\n return React.cloneElement(menu, {\n ...menu.props,\n placement: Position.BOTTOM_END,\n triggerComponent: btn,\n });\n }\n return btn;\n};\n\nToolbarItem.displayName = 'ToolbarItem';\n\nToolbarItem.propTypes = {\n icon: PropTypes.element,\n labelText: PropTypes.string,\n};\n\nexport default ToolbarItem;\n"],
|
|
5
|
-
"mappings": "AAAA;
|
|
6
|
-
"names": []
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;ACAvB,OAAOA,UAAS,gBAAgB;AAChC,OAAO,eAAe;AACtB,SAAS,8BAA8B;AACvC,SAAS,kBAAkB;AAC3B,SAAS,mBAAmB,gBAAgB;AAE5C,MAAM,cAAc,CAAC,EAAE,MAAM,WAAW,OAAO,QAAW,iBAAiB,CAAC,MAAM,WAAW,MAAM;AACjG,QAAM,CAAC,KAAK,MAAM,IAAI,SAAS,IAAI;AAEnC,yBAAuB,GAAG;AAC1B,QAAM,MACJ,gBAAAA,OAAA,cAAC;AAAA,IAAY,GAAG;AAAA,IAAY,YAAW;AAAA,IAAO,UAAU,CAAC,MAAM,OAAO,CAAC;AAAA,IAAG;AAAA,IAAuB,GAAG;AAAA,KACjG,IACH;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
7
|
}
|
|
@@ -1,10 +1,14 @@
|
|
|
1
1
|
import * as React from "react";
|
|
2
2
|
import React2, { cloneElement } from "react";
|
|
3
|
-
var decorateToolbarChildren_default = (children, extraProps = {}) => React2.Children.map(
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
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
|
+
);
|
|
8
12
|
export {
|
|
9
13
|
decorateToolbarChildren_default as default
|
|
10
14
|
};
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/deprecated/decorateToolbarChildren.tsx"],
|
|
4
4
|
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { cloneElement } from 'react';\n\nexport default (children, extraProps = {}) =>\n React.Children.map(\n children,\n component =>\n component\n ? cloneElement(component, {\n ...extraProps,\n ...component.props,\n className: `${component.props.className} toolbar-item`,\n })\n : component,\n null,\n );\n"],
|
|
5
|
-
"mappings": "AAAA;
|
|
6
|
-
"names": []
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;ACAvB,OAAOA,UAAS,oBAAoB;AAEpC,IAAO,kCAAQ,CAAC,UAAU,aAAa,CAAC,MACtCA,OAAM,SAAS;AAAA,EACb;AAAA,EACA,eACE,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
7
|
}
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/deprecated/hooks/useKeyboardNavigation.tsx"],
|
|
4
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;
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;ACAvB,SAAgB,QAAQ,WAAW,mBAAmB;AAY/C,MAAM,wBAAwB,CAAC,EAAE,cAAc,iBAAiB,MAA8B;AACnG,QAAM,uBAAuB,OAA6C,IAAI;AAE9E,YAAU,MAAM;AACd,QAAI,aAAa,SAAS;AACxB,2BAAqB,UAAU,aAAa,QAAQ,iBAAiB,QAAQ;AAAA,IAM/E;AAEA,QAAI,kBAAkB;AACpB,iBAAW,MAAM,qBAAqB,UAAU,GAAG,MAAM,CAAC;AAAA,IAC5D;AAAA,EASF,GAAG,CAAC,gBAAgB,CAAC;AAErB,QAAM,kBAAkB,YAAY,CAAC,MAAM;AACzC,QAAI,qBAAqB,SAAS;AAChC,YAAM,aAAa,qBAAqB,QAAQ,qBAAqB,SAAS,SAAS;AACvF,YAAM,cAAc,qBAAqB,QAAQ;AAEjD,UAAI,EAAE,QAAQ,cAAc;AAC1B,UAAE,eAAe;AACjB,YAAI,EAAE,WAAW,YAAY;AAC3B,YAAE,OAAO,YAAY,MAAM;AAAA,QAC7B,OAAO;AACL,sBAAY,MAAM;AAAA,QACpB;AAAA,MACF;AACA,UAAI,EAAE,QAAQ,aAAa;AACzB,UAAE,eAAe;AACjB,YAAI,EAAE,WAAW,aAAa;AAC5B,YAAE,OAAO,gBAAgB,MAAM;AAAA,QACjC,OAAO;AACL,qBAAW,MAAM;AAAA,QACnB;AAAA,MACF;AAAA,IACF;AAAA,EACF,GAAG,CAAC,CAAC;AAEL,SAAO;AAAA,IACL;AAAA,EACF;AACF;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/deprecated/index.tsx"],
|
|
4
4
|
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable import/export */\nexport * from './DSToolbar';\n\nexport { default } from './DSToolbar';\n"],
|
|
5
|
-
"mappings": "AAAA;
|
|
6
|
-
"names": []
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;ACCvB,cAAc;AAEd,SAAS,WAAAA,gBAAe;",
|
|
6
|
+
"names": ["default"]
|
|
7
7
|
}
|
package/dist/esm/index.js.map
CHANGED
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/index.tsx"],
|
|
4
4
|
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "export * from './deprecated';\nexport { default } from './deprecated';\nexport * from './DSToolbarV2';\nexport * from './DSToolbarItemV2';\nexport * from './DSToolbarSeparatorV2';\n"],
|
|
5
|
-
"mappings": "AAAA;
|
|
6
|
-
"names": []
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;ACAvB,cAAc;AACd,SAAS,WAAAA,gBAAe;AACxB,cAAc;AACd,cAAc;AACd,cAAc;",
|
|
6
|
+
"names": ["default"]
|
|
7
7
|
}
|
|
@@ -21,7 +21,9 @@ const DSToolbarItemV2Schema = {
|
|
|
21
21
|
...globalAttributesPropTypes,
|
|
22
22
|
render: PropTypes.func.isRequired.description("render function").defaultValue(() => {
|
|
23
23
|
}),
|
|
24
|
-
isFirstItem: PropTypes.bool.description(
|
|
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)
|
|
25
27
|
};
|
|
26
28
|
export {
|
|
27
29
|
DSToolbarItemV2Schema,
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/react-desc-prop-types.tsx"],
|
|
4
4
|
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { globalAttributesPropTypes, PropTypes } from '@elliemae/ds-utilities';\n\nexport declare namespace DSToolbarT {\n export interface Props {\n alignment?: 'left' | 'right';\n withDepth?: boolean;\n compact?: boolean;\n innerRef?: React.MutableRefObject<HTMLDivElement>;\n children: React.Component<DSToolbarItemT.Props>;\n }\n}\n\nexport declare namespace DSToolbarItemT {\n export type RenderHTMLElementT =\n | HTMLButtonElement\n | HTMLInputElement\n | HTMLTextAreaElement\n | HTMLSelectElement\n | HTMLOptionElement;\n export interface Props {\n render: (props: { innerRef: React.MutableRefObject<HTMLElement>; tabIndex: number }) => JSX.Element;\n isFirstItem?: boolean;\n }\n}\n\nexport const defaultItemProps = {\n render: () => {},\n isFirstItem: false,\n};\n\nexport const defaultProps = {\n alignment: 'right',\n withDepth: true,\n compact: false,\n};\n\nexport const DSToolbarV2Schema = {\n ...globalAttributesPropTypes,\n alignment: PropTypes.oneOf(['right', 'left'])\n .description('Whether to align the content left or right')\n .defaultValue('right'),\n withDepth: PropTypes.bool.description('Whether to add a box-shadow to the container').defaultValue(true),\n compact: PropTypes.bool.description('Whether you want the compact version of the toolbar').defaultValue(false),\n innerRef: PropTypes.oneOfType([PropTypes.func, PropTypes.object]).description('Reference to attach to the wrapper'),\n};\n\nexport const DSToolbarItemV2Schema = {\n ...globalAttributesPropTypes,\n render: PropTypes.func.isRequired.description('render function').defaultValue(() => {}),\n isFirstItem: PropTypes.bool\n .description(\n 'If true the item will have tab index 0 to be the first element focusable by keyboard on the page load',\n )\n .defaultValue(false),\n};\n"],
|
|
5
|
-
"mappings": "AAAA;
|
|
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
6
|
"names": []
|
|
7
7
|
}
|
package/dist/esm/styled.js.map
CHANGED
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/styled.tsx"],
|
|
4
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;
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,cAAc;AACvB,OAAO,UAAU;AAEV,MAAM,uBAAuB,OAAO,IAAI;AAAA,sBACzB,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ;AAAA;AAAA,gBAE5C,CAAC,UAAW,MAAM,UAAU,SAAS;AAAA,gBACrC,CAAC,UAAU,MAAM,MAAM,MAAM;AAAA;AAAA,eAE9B,CAAC,UAAU,MAAM,MAAM,MAAM;AAAA;AAAA,gBAE5B,CAAC,UAAW,CAAC,MAAM,YAAY,SAAS;AAAA;AAGjD,MAAM,oBAAoB,OAAO,IAAI;AAErC,MAAM,kBAAkB,OAAO,IAAI;AAAA;AAAA;AAAA,sBAGpB,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ;AAAA;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -13,29 +13,37 @@ const useToolbarItemHandlers = (toolbarItemId) => {
|
|
|
13
13
|
const onFocus = useCallback(() => {
|
|
14
14
|
setActiveItem(toolbarItemId);
|
|
15
15
|
}, [setActiveItem, toolbarItemId]);
|
|
16
|
-
const onKeyDown = useCallback(
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
const
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
e.
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
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
|
+
);
|
|
39
47
|
return { onKeyDown, onFocus };
|
|
40
48
|
};
|
|
41
49
|
export {
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/useToolbarItemHandlers.tsx"],
|
|
4
4
|
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { useCallback, useContext } from 'react';\nimport { DSToolbarV2Context } from './DSToolbarV2Context';\n\nconst findInCircularList = (\n list: Element[],\n from: number,\n criteria: (item: Element) => boolean,\n step = 1,\n // eslint-disable-next-line max-params\n): number => {\n for (\n let i = (from + step + list.length) % list.length;\n i !== from && from > -1;\n i = (i + step + list.length) % list.length\n ) {\n if (criteria(list[i])) return i;\n }\n return from; // return same item\n};\n\nexport const useToolbarItemHandlers = (\n toolbarItemId: string,\n): {\n onKeyDown: React.KeyboardEventHandler;\n onFocus: React.FocusEventHandler;\n} => {\n const { toolbarUid, itemReferences, setActiveItem } = useContext(DSToolbarV2Context);\n\n const onFocus: React.FocusEventHandler = useCallback(() => {\n setActiveItem(toolbarItemId);\n }, [setActiveItem, toolbarItemId]);\n\n const onKeyDown: React.KeyboardEventHandler = useCallback(\n (e) => {\n const toolbarItems = [...document.querySelectorAll(`#${toolbarUid} .ds-toolbar-item`)];\n let nextToolbarItemIndex = -1;\n const toolbarItemIndex = toolbarItems.findIndex((domElem) => domElem.id === toolbarItemId);\n\n 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;
|
|
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,EAAE;AAAG,aAAO;AAAA,EAChC;AACA,SAAO;AACT;AAEO,MAAM,yBAAyB,CACpC,kBAIG;AACH,QAAM,EAAE,YAAY,gBAAgB,cAAc,IAAI,WAAW,kBAAkB;AAEnF,QAAM,UAAmC,YAAY,MAAM;AACzD,kBAAc,aAAa;AAAA,EAC7B,GAAG,CAAC,eAAe,aAAa,CAAC;AAEjC,QAAM,YAAwC;AAAA,IAC5C,CAAC,MAAM;AACL,YAAM,eAAe,CAAC,GAAG,SAAS,iBAAiB,IAAI,6BAA6B,CAAC;AACrF,UAAI,uBAAuB;AAC3B,YAAM,mBAAmB,aAAa,UAAU,CAAC,YAAY,QAAQ,OAAO,aAAa;AAEzF,YAAM,WAAW,CAAC,SAAkB;AAClC,cAAM,MAAM,eAAe,KAAK;AAEhC,eAAO,CAAC,IAAI,QAAQ;AAAA,MACtB;AAEA,UAAI,CAAC,aAAa,YAAY,EAAE,SAAS,EAAE,IAAI,GAAG;AAChD,+BAAuB;AAAA,UACrB;AAAA,UACA;AAAA,UACA;AAAA,UACA,EAAE,SAAS,cAAc,KAAK;AAAA,QAChC;AAAA,MACF,WAAW,EAAE,SAAS,QAAQ;AAC5B,+BAAuB;AAAA,MACzB,WAAW,EAAE,SAAS,OAAO;AAC3B,+BAAuB,aAAa,SAAS;AAAA,MAC/C;AAEA,UAAI,wBAAwB,KAAK,uBAAuB,aAAa,QAAQ;AAC3E,UAAE,eAAe;AACjB,UAAE,gBAAgB;AAClB,cAAM,MAAM,eAAe,aAAa,sBAAsB;AAC9D,YAAI,IAAI;AAAS,cAAI,QAAQ,MAAM;AAAA,MACrC;AAAA,IACF;AAAA,IACA,CAAC,YAAY,eAAe,cAAc;AAAA,EAC5C;AAEA,SAAO,EAAE,WAAW,QAAQ;AAC9B;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@elliemae/ds-toolbar",
|
|
3
|
-
"version": "3.5.0-rc.
|
|
3
|
+
"version": "3.5.0-rc.5",
|
|
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.5.0-rc.
|
|
91
|
-
"@elliemae/ds-classnames": "3.5.0-rc.
|
|
92
|
-
"@elliemae/ds-grid": "3.5.0-rc.
|
|
93
|
-
"@elliemae/ds-icons": "3.5.0-rc.
|
|
94
|
-
"@elliemae/ds-popper": "3.5.0-rc.
|
|
95
|
-
"@elliemae/ds-shared": "3.5.0-rc.
|
|
96
|
-
"@elliemae/ds-system": "3.5.0-rc.
|
|
97
|
-
"@elliemae/ds-utilities": "3.5.0-rc.
|
|
90
|
+
"@elliemae/ds-button": "3.5.0-rc.5",
|
|
91
|
+
"@elliemae/ds-classnames": "3.5.0-rc.5",
|
|
92
|
+
"@elliemae/ds-grid": "3.5.0-rc.5",
|
|
93
|
+
"@elliemae/ds-icons": "3.5.0-rc.5",
|
|
94
|
+
"@elliemae/ds-popper": "3.5.0-rc.5",
|
|
95
|
+
"@elliemae/ds-shared": "3.5.0-rc.5",
|
|
96
|
+
"@elliemae/ds-system": "3.5.0-rc.5",
|
|
97
|
+
"@elliemae/ds-utilities": "3.5.0-rc.5",
|
|
98
98
|
"prop-types": "~15.8.1",
|
|
99
99
|
"uid": "2.0.0"
|
|
100
100
|
},
|