@elliemae/ds-toolbar 3.16.0-next.1 → 3.16.0-next.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/DSToolbarItemV2.js +5 -5
- package/dist/cjs/DSToolbarItemV2.js.map +2 -2
- package/dist/cjs/DSToolbarV2.js +5 -5
- package/dist/cjs/DSToolbarV2.js.map +2 -2
- package/dist/cjs/deprecated/DSToolbar.js +9 -8
- package/dist/cjs/deprecated/DSToolbar.js.map +2 -2
- package/dist/cjs/react-desc-prop-types.js +9 -9
- package/dist/cjs/react-desc-prop-types.js.map +2 -2
- package/dist/esm/DSToolbarItemV2.js +1 -1
- package/dist/esm/DSToolbarItemV2.js.map +1 -1
- package/dist/esm/DSToolbarV2.js +1 -1
- package/dist/esm/DSToolbarV2.js.map +1 -1
- package/dist/esm/deprecated/DSToolbar.js +2 -1
- package/dist/esm/deprecated/DSToolbar.js.map +2 -2
- package/dist/esm/react-desc-prop-types.js +1 -1
- package/dist/esm/react-desc-prop-types.js.map +1 -1
- package/dist/types/DSToolbarItemV2.d.ts +1 -1
- package/dist/types/DSToolbarV2.d.ts +1 -1
- package/dist/types/deprecated/DSToolbar.d.ts +8 -8
- package/dist/types/react-desc-prop-types.d.ts +734 -734
- package/package.json +11 -10
|
@@ -31,7 +31,7 @@ module.exports = __toCommonJS(DSToolbarItemV2_exports);
|
|
|
31
31
|
var React = __toESM(require("react"));
|
|
32
32
|
var import_jsx_runtime = require("react/jsx-runtime");
|
|
33
33
|
var import_react = require("react");
|
|
34
|
-
var
|
|
34
|
+
var import_ds_props_helpers = require("@elliemae/ds-props-helpers");
|
|
35
35
|
var import_uid = require("uid");
|
|
36
36
|
var import_DSToolbarV2Context = require("./DSToolbarV2Context");
|
|
37
37
|
var import_styled = require("./styled");
|
|
@@ -39,10 +39,10 @@ var import_useToolbarItemHandlers = require("./useToolbarItemHandlers");
|
|
|
39
39
|
var import_react_desc_prop_types = require("./react-desc-prop-types");
|
|
40
40
|
var import_DSToolbarDefinitions = require("./DSToolbarDefinitions");
|
|
41
41
|
const DSToolbarItemV2 = (props) => {
|
|
42
|
-
const propsWithDefaults = (0,
|
|
43
|
-
(0,
|
|
42
|
+
const propsWithDefaults = (0, import_ds_props_helpers.useMemoMergePropsWithDefault)(props, import_react_desc_prop_types.defaultItemProps);
|
|
43
|
+
(0, import_ds_props_helpers.useValidateTypescriptPropTypes)(propsWithDefaults, import_react_desc_prop_types.DSToolbarItemV2Schema, import_DSToolbarDefinitions.DSToolbarItemName);
|
|
44
44
|
const { render, isFirstItem } = propsWithDefaults;
|
|
45
|
-
const { id: providedId, ...restGlobals } = (0,
|
|
45
|
+
const { id: providedId, ...restGlobals } = (0, import_ds_props_helpers.useGetGlobalAttributes)(propsWithDefaults);
|
|
46
46
|
const { registerReference, dndDraggingItem } = (0, import_react.useContext)(import_DSToolbarV2Context.DSToolbarV2Context);
|
|
47
47
|
const ref = (0, import_react.useRef)(null);
|
|
48
48
|
const toolbarItemId = (0, import_react.useMemo)(() => {
|
|
@@ -69,6 +69,6 @@ const DSToolbarItemV2 = (props) => {
|
|
|
69
69
|
};
|
|
70
70
|
DSToolbarItemV2.propTypes = import_react_desc_prop_types.DSToolbarItemV2Schema;
|
|
71
71
|
DSToolbarItemV2.displayName = import_DSToolbarDefinitions.DSToolbarItemName;
|
|
72
|
-
const DSToolbarItemV2WithSchema = (0,
|
|
72
|
+
const DSToolbarItemV2WithSchema = (0, import_ds_props_helpers.describe)(DSToolbarItemV2).description("Toolbar Item");
|
|
73
73
|
DSToolbarItemV2WithSchema.propTypes = import_react_desc_prop_types.DSToolbarItemV2Schema;
|
|
74
74
|
//# sourceMappingURL=DSToolbarItemV2.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/DSToolbarItemV2.tsx", "../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["/* eslint-disable react/prop-types */\nimport React, { useContext, useMemo, useRef } from 'react';\nimport {\n describe,\n useMemoMergePropsWithDefault,\n useValidateTypescriptPropTypes,\n useGetGlobalAttributes,\n} from '@elliemae/ds-
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADqCnB;AApCJ,mBAAmD;AACnD,
|
|
4
|
+
"sourcesContent": ["/* eslint-disable react/prop-types */\nimport React, { useContext, useMemo, useRef } from 'react';\nimport {\n describe,\n useMemoMergePropsWithDefault,\n useValidateTypescriptPropTypes,\n useGetGlobalAttributes,\n} from '@elliemae/ds-props-helpers';\nimport { uid } from 'uid';\nimport { DSToolbarV2Context } from './DSToolbarV2Context';\nimport { StyledToolbarItem } from './styled';\nimport { useToolbarItemHandlers } from './useToolbarItemHandlers';\nimport { defaultItemProps, DSToolbarItemV2Schema } from './react-desc-prop-types';\nimport type { DSToolbarItemT } from './react-desc-prop-types';\nimport { DSToolbarItemName } from './DSToolbarDefinitions';\n\nconst DSToolbarItemV2: React.ComponentType<DSToolbarItemT.Props> = (props) => {\n const propsWithDefaults = useMemoMergePropsWithDefault(props, defaultItemProps);\n\n useValidateTypescriptPropTypes(propsWithDefaults, DSToolbarItemV2Schema, DSToolbarItemName);\n const { render, isFirstItem } = propsWithDefaults;\n const { id: providedId, ...restGlobals } = useGetGlobalAttributes(propsWithDefaults);\n const { registerReference, dndDraggingItem } = useContext(DSToolbarV2Context);\n const ref = useRef(null);\n const toolbarItemId = useMemo(() => {\n const id = providedId ?? `ds-toolbar-item-${uid()}`;\n registerReference(id, ref);\n return id;\n }, [registerReference, ref, providedId]);\n\n const tabIndex = useMemo(\n () => (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 {render({ innerRef: ref, 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", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADqCnB;AApCJ,mBAAmD;AACnD,8BAKO;AACP,iBAAoB;AACpB,gCAAmC;AACnC,oBAAkC;AAClC,oCAAuC;AACvC,mCAAwD;AAExD,kCAAkC;AAElC,MAAM,kBAA6D,CAAC,UAAU;AAC5E,QAAM,wBAAoB,sDAA6B,OAAO,6CAAgB;AAE9E,8DAA+B,mBAAmB,oDAAuB,6CAAiB;AAC1F,QAAM,EAAE,QAAQ,YAAY,IAAI;AAChC,QAAM,EAAE,IAAI,eAAe,YAAY,QAAI,gDAAuB,iBAAiB;AACnF,QAAM,EAAE,mBAAmB,gBAAgB,QAAI,yBAAW,4CAAkB;AAC5E,QAAM,UAAM,qBAAO,IAAI;AACvB,QAAM,oBAAgB,sBAAQ,MAAM;AAClC,UAAM,KAAK,cAAc,uBAAmB,gBAAI;AAChD,sBAAkB,IAAI,GAAG;AACzB,WAAO;AAAA,EACT,GAAG,CAAC,mBAAmB,KAAK,UAAU,CAAC;AAEvC,QAAM,eAAW;AAAA,IACf,MAAO,oBAAoB,iBAAkB,CAAC,mBAAmB,cAAe,IAAI;AAAA,IACpF,CAAC,iBAAiB,aAAa,aAAa;AAAA,EAC9C;AAEA,QAAM,eAAW,sDAAuB,aAAa;AACrD,SACE;AAAA,IAAC;AAAA;AAAA,MACC,IAAI;AAAA,MACJ,eAAY;AAAA,MACZ,WAAU;AAAA,MACT,GAAG;AAAA,MACH,GAAG;AAAA,MAEH,iBAAO,EAAE,UAAU,KAAK,SAAS,CAAC;AAAA;AAAA,EACrC;AAEJ;AAEA,gBAAgB,YAAY;AAE5B,gBAAgB,cAAc;AAC9B,MAAM,gCAA4B,kCAAS,eAAe,EAAE,YAAY,cAAc;AACtF,0BAA0B,YAAY;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/dist/cjs/DSToolbarV2.js
CHANGED
|
@@ -31,17 +31,17 @@ module.exports = __toCommonJS(DSToolbarV2_exports);
|
|
|
31
31
|
var React = __toESM(require("react"));
|
|
32
32
|
var import_jsx_runtime = require("react/jsx-runtime");
|
|
33
33
|
var import_react = require("react");
|
|
34
|
-
var
|
|
34
|
+
var import_ds_props_helpers = require("@elliemae/ds-props-helpers");
|
|
35
35
|
var import_uid = require("uid");
|
|
36
36
|
var import_DSToolbarV2Context = require("./DSToolbarV2Context");
|
|
37
37
|
var import_react_desc_prop_types = require("./react-desc-prop-types");
|
|
38
38
|
var import_styled = require("./styled");
|
|
39
39
|
var import_DSToolbarDefinitions = require("./DSToolbarDefinitions");
|
|
40
40
|
const DSToolbarV2 = (props) => {
|
|
41
|
-
const propsWithDefaults = (0,
|
|
42
|
-
(0,
|
|
41
|
+
const propsWithDefaults = (0, import_ds_props_helpers.useMemoMergePropsWithDefault)(props, import_react_desc_prop_types.defaultProps);
|
|
42
|
+
(0, import_ds_props_helpers.useValidateTypescriptPropTypes)(propsWithDefaults, import_react_desc_prop_types.DSToolbarV2Schema, import_DSToolbarDefinitions.DSToolbarName);
|
|
43
43
|
const { alignment, withDepth, compact, innerRef, children } = propsWithDefaults;
|
|
44
|
-
const globalsProps = (0,
|
|
44
|
+
const globalsProps = (0, import_ds_props_helpers.useGetGlobalAttributes)(propsWithDefaults);
|
|
45
45
|
const toolbarUid = (0, import_react.useMemo)(() => globalsProps.id ?? `ds-toolbar-${(0, import_uid.uid)()}`, []);
|
|
46
46
|
const [itemReferences, setItemReferences] = (0, import_react.useState)({});
|
|
47
47
|
const [dndDraggingItem, setDndDraggingItem] = (0, import_react.useState)("");
|
|
@@ -74,6 +74,6 @@ const DSToolbarV2 = (props) => {
|
|
|
74
74
|
};
|
|
75
75
|
DSToolbarV2.propTypes = import_react_desc_prop_types.DSToolbarV2Schema;
|
|
76
76
|
DSToolbarV2.displayName = import_DSToolbarDefinitions.DSToolbarName;
|
|
77
|
-
const DSToolbarV2WithSchema = (0,
|
|
77
|
+
const DSToolbarV2WithSchema = (0, import_ds_props_helpers.describe)(DSToolbarV2).description("Toolbar");
|
|
78
78
|
DSToolbarV2WithSchema.propTypes = import_react_desc_prop_types.DSToolbarV2Schema;
|
|
79
79
|
//# sourceMappingURL=DSToolbarV2.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/DSToolbarV2.tsx", "../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["/* 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-
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;AD2CjB;AA1CN,mBAAsD;AACtD,
|
|
4
|
+
"sourcesContent": ["/* 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';\nimport { DSToolbarV2Schema, defaultProps } from './react-desc-prop-types';\nimport { StyledToolbarWrapper } from './styled';\nimport type { DSToolbarT, DSToolbarItemT } from './react-desc-prop-types';\nimport { DSToolbarName } from './DSToolbarDefinitions';\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", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;AD2CjB;AA1CN,mBAAsD;AACtD,8BAKO;AACP,iBAAoB;AACpB,gCAAmC;AACnC,mCAAgD;AAChD,oBAAqC;AAErC,kCAA8B;AAE9B,MAAM,cAAqD,CAAC,UAAU;AACpE,QAAM,wBAAoB,sDAA6B,OAAO,yCAAY;AAE1E,8DAA+B,mBAAmB,gDAAmB,yCAAa;AAElF,QAAM,EAAE,WAAW,WAAW,SAAS,UAAU,SAAS,IAAI;AAE9D,QAAM,mBAAe,gDAAuB,iBAAiB;AAE7D,QAAM,iBAAa,sBAAQ,MAAM,aAAa,MAAM,kBAAc,gBAAI,KAAK,CAAC,CAAC;AAE7E,QAAM,CAAC,gBAAgB,iBAAiB,QAAI,uBAAS,CAAC,CAAC;AACvD,QAAM,CAAC,iBAAiB,kBAAkB,QAAI,uBAAS,EAAE;AAEzD,QAAM,wBAAoB;AAAA,IACxB,CAAC,QAAgB,QAAmE;AAClF,wBAAkB,CAAC,wBAAwB,EAAE,GAAG,oBAAoB,CAAC,SAAS,IAAI,EAAE;AAAA,IACtF;AAAA,IACA,CAAC,iBAAiB;AAAA,EACpB;AAEA,QAAM,UAAM;AAAA,IACV,OAAO,EAAE,YAAY,mBAAmB,gBAAgB,iBAAiB,mBAAmB;AAAA,IAC5F,CAAC,iBAAiB,gBAAgB,mBAAmB,UAAU;AAAA,EACjE;AAEA,SACE,4CAAC,6CAAmB,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,4BAAwB,kCAAS,WAAW,EAAE,YAAY,SAAS;AACzE,sBAAsB,YAAY;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -37,6 +37,7 @@ var import_jsx_runtime = require("react/jsx-runtime");
|
|
|
37
37
|
var import_react = require("react");
|
|
38
38
|
var import_ds_classnames = require("@elliemae/ds-classnames");
|
|
39
39
|
var import_ds_utilities = require("@elliemae/ds-utilities");
|
|
40
|
+
var import_ds_props_helpers = require("@elliemae/ds-props-helpers");
|
|
40
41
|
var import_decorateToolbarChildren = __toESM(require("./decorateToolbarChildren"));
|
|
41
42
|
var import_ToolbarItem = __toESM(require("./ToolbarItem"));
|
|
42
43
|
var import_ToolbarGroup = __toESM(require("./ToolbarGroup"));
|
|
@@ -73,17 +74,17 @@ const DSToolbar = ({
|
|
|
73
74
|
);
|
|
74
75
|
};
|
|
75
76
|
const toolbarProps = {
|
|
76
|
-
containerProps:
|
|
77
|
-
withDepth:
|
|
78
|
-
alignment:
|
|
79
|
-
size:
|
|
80
|
-
autoFocusOnMount:
|
|
81
|
-
children:
|
|
82
|
-
innerRef:
|
|
77
|
+
containerProps: import_ds_props_helpers.PropTypes.object.description("Set of Properties attached to the main container"),
|
|
78
|
+
withDepth: import_ds_props_helpers.PropTypes.bool.description("Shows a shadow rear the toolbar").defaultValue(true),
|
|
79
|
+
alignment: import_ds_props_helpers.PropTypes.oneOf(["right", "left"]).description("Aligns the toolbar to the left or right").defaultValue("right"),
|
|
80
|
+
size: import_ds_props_helpers.PropTypes.oneOf(["normal", "compact"]).description("Toolbar size").defaultValue("normal"),
|
|
81
|
+
autoFocusOnMount: import_ds_props_helpers.PropTypes.bool.description("Wheter to focus the component when it mounts or not").defaultValue(true),
|
|
82
|
+
children: import_ds_props_helpers.PropTypes.oneOfType([import_ds_props_helpers.PropTypes.array, import_ds_props_helpers.PropTypes.func, import_ds_props_helpers.PropTypes.node]).description("Toolbar items").isRequired,
|
|
83
|
+
innerRef: import_ds_props_helpers.PropTypes.object.description("Ref to the Toolbar container element")
|
|
83
84
|
};
|
|
84
85
|
DSToolbar.propTypes = toolbarProps;
|
|
85
86
|
DSToolbar.displayName = "DSToolbar";
|
|
86
|
-
const ToolbarWithSchema = (0,
|
|
87
|
+
const ToolbarWithSchema = (0, import_ds_props_helpers.describe)(DSToolbar);
|
|
87
88
|
ToolbarWithSchema.propTypes = toolbarProps;
|
|
88
89
|
var DSToolbar_default = DSToolbar;
|
|
89
90
|
//# sourceMappingURL=DSToolbar.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/deprecated/DSToolbar.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["import React, { useRef } from 'react';\nimport { aggregatedClasses } from '@elliemae/ds-classnames';\nimport { describe, PropTypes
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA,8CAAAA;AAAA,EAAA,wCAAAC;AAAA,EAAA,sCAAAC;AAAA,EAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;
|
|
4
|
+
"sourcesContent": ["import React, { useRef } from 'react';\nimport { aggregatedClasses } from '@elliemae/ds-classnames';\nimport { mergeRefs } from '@elliemae/ds-utilities';\nimport { describe, PropTypes } from '@elliemae/ds-props-helpers';\nimport decorateToolbarChildren from './decorateToolbarChildren';\nimport Item from './ToolbarItem';\nimport ToolbarGroup from './ToolbarGroup';\nimport Divider from './ToolbarDivider';\nimport { useKeyboardNavigation } from './hooks/useKeyboardNavigation';\n\nconst blockName = 'toolbar';\n\nconst ToolbarContainer = aggregatedClasses('div')(blockName, null, ({ withDepth, alignment, size }) => ({\n 'without-depth': !withDepth,\n [alignment]: !!alignment,\n [size]: size,\n}));\n\nconst DSToolbar = ({\n containerProps = {},\n innerRef,\n withDepth = true,\n alignment = 'right', // left || right\n autoFocusOnMount = true,\n children = [],\n size = 'normal',\n ...otherProps\n}) => {\n const containerRef = useRef<HTMLDivElement | null>(null);\n\n const { handleOnKeyDown } = useKeyboardNavigation({ containerRef, autoFocusOnMount });\n\n return (\n <ToolbarContainer\n {...containerProps}\n {...otherProps}\n classProps={{ withDepth, alignment, size }}\n innerRef={mergeRefs(innerRef, containerRef)}\n onKeyDown={handleOnKeyDown}\n >\n {decorateToolbarChildren(children)}\n </ToolbarContainer>\n );\n};\n\nconst toolbarProps = {\n containerProps: PropTypes.object.description('Set of Properties attached to the main container'),\n withDepth: PropTypes.bool.description('Shows a shadow rear the toolbar').defaultValue(true),\n alignment: PropTypes.oneOf(['right', 'left'])\n .description('Aligns the toolbar to the left or right')\n .defaultValue('right'),\n size: PropTypes.oneOf(['normal', 'compact']).description('Toolbar size').defaultValue('normal'),\n autoFocusOnMount: PropTypes.bool\n .description('Wheter to focus the component when it mounts or not')\n .defaultValue(true),\n children: PropTypes.oneOfType([PropTypes.array, PropTypes.func, PropTypes.node]).description('Toolbar items')\n .isRequired,\n innerRef: PropTypes.object.description('Ref to the Toolbar container element'),\n};\n\nDSToolbar.propTypes = toolbarProps;\nDSToolbar.displayName = 'DSToolbar';\nconst ToolbarWithSchema = describe(DSToolbar);\nToolbarWithSchema.propTypes = toolbarProps;\n\nexport { DSToolbar, Item as ToolbarItem, ToolbarGroup, Divider as ToolbarDivider, ToolbarWithSchema };\n\nexport default DSToolbar;\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA,8CAAAA;AAAA,EAAA,wCAAAC;AAAA,EAAA,sCAAAC;AAAA,EAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADiCnB;AAjCJ,mBAA8B;AAC9B,2BAAkC;AAClC,0BAA0B;AAC1B,8BAAoC;AACpC,qCAAoC;AACpC,yBAAiB;AACjB,0BAAyB;AACzB,4BAAoB;AACpB,mCAAsC;AAEtC,MAAM,YAAY;AAElB,MAAM,uBAAmB,wCAAkB,KAAK,EAAE,WAAW,MAAM,CAAC,EAAE,WAAW,WAAW,KAAK,OAAO;AAAA,EACtG,iBAAiB,CAAC;AAAA,EAClB,CAAC,YAAY,CAAC,CAAC;AAAA,EACf,CAAC,OAAO;AACV,EAAE;AAEF,MAAM,YAAY,CAAC;AAAA,EACjB,iBAAiB,CAAC;AAAA,EAClB;AAAA,EACA,YAAY;AAAA,EACZ,YAAY;AAAA,EACZ,mBAAmB;AAAA,EACnB,WAAW,CAAC;AAAA,EACZ,OAAO;AAAA,KACJ;AACL,MAAM;AACJ,QAAM,mBAAe,qBAA8B,IAAI;AAEvD,QAAM,EAAE,gBAAgB,QAAI,oDAAsB,EAAE,cAAc,iBAAiB,CAAC;AAEpF,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACH,GAAG;AAAA,MACJ,YAAY,EAAE,WAAW,WAAW,KAAK;AAAA,MACzC,cAAU,+BAAU,UAAU,YAAY;AAAA,MAC1C,WAAW;AAAA,MAEV,6CAAAC,SAAwB,QAAQ;AAAA;AAAA,EACnC;AAEJ;AAEA,MAAM,eAAe;AAAA,EACnB,gBAAgB,kCAAU,OAAO,YAAY,kDAAkD;AAAA,EAC/F,WAAW,kCAAU,KAAK,YAAY,iCAAiC,EAAE,aAAa,IAAI;AAAA,EAC1F,WAAW,kCAAU,MAAM,CAAC,SAAS,MAAM,CAAC,EACzC,YAAY,yCAAyC,EACrD,aAAa,OAAO;AAAA,EACvB,MAAM,kCAAU,MAAM,CAAC,UAAU,SAAS,CAAC,EAAE,YAAY,cAAc,EAAE,aAAa,QAAQ;AAAA,EAC9F,kBAAkB,kCAAU,KACzB,YAAY,qDAAqD,EACjE,aAAa,IAAI;AAAA,EACpB,UAAU,kCAAU,UAAU,CAAC,kCAAU,OAAO,kCAAU,MAAM,kCAAU,IAAI,CAAC,EAAE,YAAY,eAAe,EACzG;AAAA,EACH,UAAU,kCAAU,OAAO,YAAY,sCAAsC;AAC/E;AAEA,UAAU,YAAY;AACtB,UAAU,cAAc;AACxB,MAAM,wBAAoB,kCAAS,SAAS;AAC5C,kBAAkB,YAAY;AAI9B,IAAO,oBAAQ;",
|
|
6
6
|
"names": ["Divider", "ToolbarGroup", "Item", "decorateToolbarChildren"]
|
|
7
7
|
}
|
|
@@ -31,7 +31,7 @@ __export(react_desc_prop_types_exports, {
|
|
|
31
31
|
});
|
|
32
32
|
module.exports = __toCommonJS(react_desc_prop_types_exports);
|
|
33
33
|
var React = __toESM(require("react"));
|
|
34
|
-
var
|
|
34
|
+
var import_ds_props_helpers = require("@elliemae/ds-props-helpers");
|
|
35
35
|
const defaultItemProps = {
|
|
36
36
|
render: () => {
|
|
37
37
|
},
|
|
@@ -43,17 +43,17 @@ const defaultProps = {
|
|
|
43
43
|
compact: false
|
|
44
44
|
};
|
|
45
45
|
const DSToolbarV2Schema = {
|
|
46
|
-
...
|
|
47
|
-
alignment:
|
|
48
|
-
withDepth:
|
|
49
|
-
compact:
|
|
50
|
-
innerRef:
|
|
46
|
+
...import_ds_props_helpers.globalAttributesPropTypes,
|
|
47
|
+
alignment: import_ds_props_helpers.PropTypes.oneOf(["right", "left"]).description("Whether to align the content left or right").defaultValue("right"),
|
|
48
|
+
withDepth: import_ds_props_helpers.PropTypes.bool.description("Whether to add a box-shadow to the container").defaultValue(true),
|
|
49
|
+
compact: import_ds_props_helpers.PropTypes.bool.description("Whether you want the compact version of the toolbar").defaultValue(false),
|
|
50
|
+
innerRef: import_ds_props_helpers.PropTypes.oneOfType([import_ds_props_helpers.PropTypes.func, import_ds_props_helpers.PropTypes.object]).description("Reference to attach to the wrapper")
|
|
51
51
|
};
|
|
52
52
|
const DSToolbarItemV2Schema = {
|
|
53
|
-
...
|
|
54
|
-
render:
|
|
53
|
+
...import_ds_props_helpers.globalAttributesPropTypes,
|
|
54
|
+
render: import_ds_props_helpers.PropTypes.func.isRequired.description("render function").defaultValue(() => {
|
|
55
55
|
}),
|
|
56
|
-
isFirstItem:
|
|
56
|
+
isFirstItem: import_ds_props_helpers.PropTypes.bool.description(
|
|
57
57
|
"If true the item will have tab index 0 to be the first element focusable by keyboard on the page load"
|
|
58
58
|
).defaultValue(false)
|
|
59
59
|
};
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/react-desc-prop-types.tsx", "../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["import { globalAttributesPropTypes, PropTypes } from '@elliemae/ds-
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,
|
|
4
|
+
"sourcesContent": ["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>; tabIndex: number }) => JSX.Element;\n isFirstItem?: boolean;\n }\n}\n\nexport const defaultItemProps = {\n render: () => {},\n isFirstItem: false,\n};\n\nexport const defaultProps = {\n alignment: 'right',\n withDepth: true,\n compact: false,\n};\n\nexport const DSToolbarV2Schema = {\n ...globalAttributesPropTypes,\n alignment: PropTypes.oneOf(['right', 'left'])\n .description('Whether to align the content left or right')\n .defaultValue('right'),\n withDepth: PropTypes.bool.description('Whether to add a box-shadow to the container').defaultValue(true),\n compact: PropTypes.bool.description('Whether you want the compact version of the toolbar').defaultValue(false),\n innerRef: PropTypes.oneOfType([PropTypes.func, PropTypes.object]).description('Reference to attach to the wrapper'),\n};\n\nexport const DSToolbarItemV2Schema = {\n ...globalAttributesPropTypes,\n render: PropTypes.func.isRequired.description('render function').defaultValue(() => {}),\n isFirstItem: PropTypes.bool\n .description(\n 'If true the item will have tab index 0 to be the first element focusable by keyboard on the page load',\n )\n .defaultValue(false),\n};\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,8BAAqD;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,kCAAU,MAAM,CAAC,SAAS,MAAM,CAAC,EACzC,YAAY,4CAA4C,EACxD,aAAa,OAAO;AAAA,EACvB,WAAW,kCAAU,KAAK,YAAY,8CAA8C,EAAE,aAAa,IAAI;AAAA,EACvG,SAAS,kCAAU,KAAK,YAAY,qDAAqD,EAAE,aAAa,KAAK;AAAA,EAC7G,UAAU,kCAAU,UAAU,CAAC,kCAAU,MAAM,kCAAU,MAAM,CAAC,EAAE,YAAY,oCAAoC;AACpH;AAEO,MAAM,wBAAwB;AAAA,EACnC,GAAG;AAAA,EACH,QAAQ,kCAAU,KAAK,WAAW,YAAY,iBAAiB,EAAE,aAAa,MAAM;AAAA,EAAC,CAAC;AAAA,EACtF,aAAa,kCAAU,KACpB;AAAA,IACC;AAAA,EACF,EACC,aAAa,KAAK;AACvB;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -6,7 +6,7 @@ import {
|
|
|
6
6
|
useMemoMergePropsWithDefault,
|
|
7
7
|
useValidateTypescriptPropTypes,
|
|
8
8
|
useGetGlobalAttributes
|
|
9
|
-
} from "@elliemae/ds-
|
|
9
|
+
} from "@elliemae/ds-props-helpers";
|
|
10
10
|
import { uid } from "uid";
|
|
11
11
|
import { DSToolbarV2Context } from "./DSToolbarV2Context";
|
|
12
12
|
import { StyledToolbarItem } from "./styled";
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
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-
|
|
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';\nimport { StyledToolbarItem } from './styled';\nimport { useToolbarItemHandlers } from './useToolbarItemHandlers';\nimport { defaultItemProps, DSToolbarItemV2Schema } from './react-desc-prop-types';\nimport type { DSToolbarItemT } from './react-desc-prop-types';\nimport { DSToolbarItemName } from './DSToolbarDefinitions';\n\nconst DSToolbarItemV2: React.ComponentType<DSToolbarItemT.Props> = (props) => {\n const propsWithDefaults = useMemoMergePropsWithDefault(props, defaultItemProps);\n\n useValidateTypescriptPropTypes(propsWithDefaults, DSToolbarItemV2Schema, DSToolbarItemName);\n const { render, isFirstItem } = propsWithDefaults;\n const { id: providedId, ...restGlobals } = useGetGlobalAttributes(propsWithDefaults);\n const { registerReference, dndDraggingItem } = useContext(DSToolbarV2Context);\n const ref = useRef(null);\n const toolbarItemId = useMemo(() => {\n const id = providedId ?? `ds-toolbar-item-${uid()}`;\n registerReference(id, ref);\n return id;\n }, [registerReference, ref, providedId]);\n\n const tabIndex = useMemo(\n () => (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 {render({ innerRef: ref, 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
5
|
"mappings": "AAAA,YAAY,WAAW;ACqCnB;AApCJ,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,YAAY,IAAI;AAChC,QAAM,EAAE,IAAI,eAAe,YAAY,IAAI,uBAAuB,iBAAiB;AACnF,QAAM,EAAE,mBAAmB,gBAAgB,IAAI,WAAW,kBAAkB;AAC5E,QAAM,MAAM,OAAO,IAAI;AACvB,QAAM,gBAAgB,QAAQ,MAAM;AAClC,UAAM,KAAK,cAAc,mBAAmB,IAAI;AAChD,sBAAkB,IAAI,GAAG;AACzB,WAAO;AAAA,EACT,GAAG,CAAC,mBAAmB,KAAK,UAAU,CAAC;AAEvC,QAAM,WAAW;AAAA,IACf,MAAO,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,MAEH,iBAAO,EAAE,UAAU,KAAK,SAAS,CAAC;AAAA;AAAA,EACrC;AAEJ;AAEA,gBAAgB,YAAY;AAE5B,gBAAgB,cAAc;AAC9B,MAAM,4BAA4B,SAAS,eAAe,EAAE,YAAY,cAAc;AACtF,0BAA0B,YAAY;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/dist/esm/DSToolbarV2.js
CHANGED
|
@@ -6,7 +6,7 @@ import {
|
|
|
6
6
|
useValidateTypescriptPropTypes,
|
|
7
7
|
useGetGlobalAttributes,
|
|
8
8
|
describe
|
|
9
|
-
} from "@elliemae/ds-
|
|
9
|
+
} from "@elliemae/ds-props-helpers";
|
|
10
10
|
import { uid } from "uid";
|
|
11
11
|
import { DSToolbarV2Context } from "./DSToolbarV2Context";
|
|
12
12
|
import { DSToolbarV2Schema, defaultProps } from "./react-desc-prop-types";
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
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-
|
|
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';\nimport { DSToolbarV2Schema, defaultProps } from './react-desc-prop-types';\nimport { StyledToolbarWrapper } from './styled';\nimport type { DSToolbarT, DSToolbarItemT } from './react-desc-prop-types';\nimport { DSToolbarName } from './DSToolbarDefinitions';\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
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,SAAS,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
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -2,7 +2,8 @@ import * as React from "react";
|
|
|
2
2
|
import { jsx } from "react/jsx-runtime";
|
|
3
3
|
import { useRef } from "react";
|
|
4
4
|
import { aggregatedClasses } from "@elliemae/ds-classnames";
|
|
5
|
-
import {
|
|
5
|
+
import { mergeRefs } from "@elliemae/ds-utilities";
|
|
6
|
+
import { describe, PropTypes } from "@elliemae/ds-props-helpers";
|
|
6
7
|
import decorateToolbarChildren from "./decorateToolbarChildren";
|
|
7
8
|
import Item from "./ToolbarItem";
|
|
8
9
|
import ToolbarGroup from "./ToolbarGroup";
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/deprecated/DSToolbar.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useRef } from 'react';\nimport { aggregatedClasses } from '@elliemae/ds-classnames';\nimport { describe, PropTypes
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useRef } from 'react';\nimport { aggregatedClasses } from '@elliemae/ds-classnames';\nimport { mergeRefs } from '@elliemae/ds-utilities';\nimport { describe, PropTypes } from '@elliemae/ds-props-helpers';\nimport decorateToolbarChildren from './decorateToolbarChildren';\nimport Item from './ToolbarItem';\nimport ToolbarGroup from './ToolbarGroup';\nimport Divider from './ToolbarDivider';\nimport { useKeyboardNavigation } from './hooks/useKeyboardNavigation';\n\nconst blockName = 'toolbar';\n\nconst ToolbarContainer = aggregatedClasses('div')(blockName, null, ({ withDepth, alignment, size }) => ({\n 'without-depth': !withDepth,\n [alignment]: !!alignment,\n [size]: size,\n}));\n\nconst DSToolbar = ({\n containerProps = {},\n innerRef,\n withDepth = true,\n alignment = 'right', // left || right\n autoFocusOnMount = true,\n children = [],\n size = 'normal',\n ...otherProps\n}) => {\n const containerRef = useRef<HTMLDivElement | null>(null);\n\n const { handleOnKeyDown } = useKeyboardNavigation({ containerRef, autoFocusOnMount });\n\n return (\n <ToolbarContainer\n {...containerProps}\n {...otherProps}\n classProps={{ withDepth, alignment, size }}\n innerRef={mergeRefs(innerRef, containerRef)}\n onKeyDown={handleOnKeyDown}\n >\n {decorateToolbarChildren(children)}\n </ToolbarContainer>\n );\n};\n\nconst toolbarProps = {\n containerProps: PropTypes.object.description('Set of Properties attached to the main container'),\n withDepth: PropTypes.bool.description('Shows a shadow rear the toolbar').defaultValue(true),\n alignment: PropTypes.oneOf(['right', 'left'])\n .description('Aligns the toolbar to the left or right')\n .defaultValue('right'),\n size: PropTypes.oneOf(['normal', 'compact']).description('Toolbar size').defaultValue('normal'),\n autoFocusOnMount: PropTypes.bool\n .description('Wheter to focus the component when it mounts or not')\n .defaultValue(true),\n children: PropTypes.oneOfType([PropTypes.array, PropTypes.func, PropTypes.node]).description('Toolbar items')\n .isRequired,\n innerRef: PropTypes.object.description('Ref to the Toolbar container element'),\n};\n\nDSToolbar.propTypes = toolbarProps;\nDSToolbar.displayName = 'DSToolbar';\nconst ToolbarWithSchema = describe(DSToolbar);\nToolbarWithSchema.propTypes = toolbarProps;\n\nexport { DSToolbar, Item as ToolbarItem, ToolbarGroup, Divider as ToolbarDivider, ToolbarWithSchema };\n\nexport default DSToolbar;\n"],
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;ACiCnB;AAjCJ,SAAgB,cAAc;AAC9B,SAAS,yBAAyB;AAClC,SAAS,iBAAiB;AAC1B,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,YAAY,CAAC,CAAC;AAAA,EACf,CAAC,OAAO;AACV,EAAE;AAEF,MAAM,YAAY,CAAC;AAAA,EACjB,iBAAiB,CAAC;AAAA,EAClB;AAAA,EACA,YAAY;AAAA,EACZ,YAAY;AAAA,EACZ,mBAAmB;AAAA,EACnB,WAAW,CAAC;AAAA,EACZ,OAAO;AAAA,KACJ;AACL,MAAM;AACJ,QAAM,eAAe,OAA8B,IAAI;AAEvD,QAAM,EAAE,gBAAgB,IAAI,sBAAsB,EAAE,cAAc,iBAAiB,CAAC;AAEpF,SACE;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
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
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-
|
|
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>; 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
5
|
"mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,2BAA2B,iBAAiB;AAyB9C,MAAM,mBAAmB;AAAA,EAC9B,QAAQ,MAAM;AAAA,EAAC;AAAA,EACf,aAAa;AACf;AAEO,MAAM,eAAe;AAAA,EAC1B,WAAW;AAAA,EACX,WAAW;AAAA,EACX,SAAS;AACX;AAEO,MAAM,oBAAoB;AAAA,EAC/B,GAAG;AAAA,EACH,WAAW,UAAU,MAAM,CAAC,SAAS,MAAM,CAAC,EACzC,YAAY,4CAA4C,EACxD,aAAa,OAAO;AAAA,EACvB,WAAW,UAAU,KAAK,YAAY,8CAA8C,EAAE,aAAa,IAAI;AAAA,EACvG,SAAS,UAAU,KAAK,YAAY,qDAAqD,EAAE,aAAa,KAAK;AAAA,EAC7G,UAAU,UAAU,UAAU,CAAC,UAAU,MAAM,UAAU,MAAM,CAAC,EAAE,YAAY,oCAAoC;AACpH;AAEO,MAAM,wBAAwB;AAAA,EACnC,GAAG;AAAA,EACH,QAAQ,UAAU,KAAK,WAAW,YAAY,iBAAiB,EAAE,aAAa,MAAM;AAAA,EAAC,CAAC;AAAA,EACtF,aAAa,UAAU,KACpB;AAAA,IACC;AAAA,EACF,EACC,aAAa,KAAK;AACvB;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import type { DSToolbarItemT } from './react-desc-prop-types';
|
|
3
3
|
declare const DSToolbarItemV2: React.ComponentType<DSToolbarItemT.Props>;
|
|
4
|
-
declare const DSToolbarItemV2WithSchema: import("@elliemae/ds-
|
|
4
|
+
declare const DSToolbarItemV2WithSchema: import("@elliemae/ds-props-helpers/dist/types/propTypes/types").DocumentedReactComponent<DSToolbarItemT.Props>;
|
|
5
5
|
export { DSToolbarItemV2, DSToolbarItemV2WithSchema };
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import type { DSToolbarT } from './react-desc-prop-types';
|
|
3
3
|
declare const DSToolbarV2: React.ComponentType<DSToolbarT.Props>;
|
|
4
|
-
declare const DSToolbarV2WithSchema: import("@elliemae/ds-
|
|
4
|
+
declare const DSToolbarV2WithSchema: import("@elliemae/ds-props-helpers/dist/types/propTypes/types").DocumentedReactComponent<DSToolbarT.Props>;
|
|
5
5
|
export { DSToolbarV2, DSToolbarV2WithSchema };
|
|
@@ -13,17 +13,17 @@ declare const DSToolbar: {
|
|
|
13
13
|
size?: string | undefined;
|
|
14
14
|
}): JSX.Element;
|
|
15
15
|
propTypes: {
|
|
16
|
-
containerProps: import("@elliemae/ds-
|
|
17
|
-
withDepth: import("@elliemae/ds-
|
|
18
|
-
alignment: import("@elliemae/ds-
|
|
19
|
-
size: import("@elliemae/ds-
|
|
20
|
-
autoFocusOnMount: import("@elliemae/ds-
|
|
21
|
-
children: import("@elliemae/ds-
|
|
22
|
-
innerRef: import("@elliemae/ds-
|
|
16
|
+
containerProps: import("@elliemae/ds-props-helpers/dist/types/propTypes/types").ReactDescT;
|
|
17
|
+
withDepth: import("@elliemae/ds-props-helpers/dist/types/propTypes/types").ReactDescT;
|
|
18
|
+
alignment: import("@elliemae/ds-props-helpers/dist/types/propTypes/types").ReactDescT;
|
|
19
|
+
size: import("@elliemae/ds-props-helpers/dist/types/propTypes/types").ReactDescT;
|
|
20
|
+
autoFocusOnMount: import("@elliemae/ds-props-helpers/dist/types/propTypes/types").ReactDescT;
|
|
21
|
+
children: import("@elliemae/ds-props-helpers/dist/types/propTypes/types").ReactDescT;
|
|
22
|
+
innerRef: import("@elliemae/ds-props-helpers/dist/types/propTypes/types").ReactDescT;
|
|
23
23
|
};
|
|
24
24
|
displayName: string;
|
|
25
25
|
};
|
|
26
|
-
declare const ToolbarWithSchema: import("@elliemae/ds-
|
|
26
|
+
declare const ToolbarWithSchema: import("@elliemae/ds-props-helpers/dist/types/propTypes/types").DocumentedReactComponent<{
|
|
27
27
|
[x: string]: any;
|
|
28
28
|
containerProps?: {} | undefined;
|
|
29
29
|
innerRef: any;
|