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