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