@elliemae/ds-toolbar 2.2.0-alpha.4 → 3.0.0-next.2
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/cjs/DSToolbarItemV2.js +44 -49
- package/cjs/DSToolbarSeparatorV2.js +17 -38
- package/cjs/DSToolbarV2.js +69 -62
- package/cjs/DSToolbarV2Context.js +10 -37
- package/cjs/deprecated/DSToolbar.js +89 -86
- package/cjs/deprecated/ToolbarDivider.js +9 -39
- package/cjs/deprecated/ToolbarGroup.js +34 -48
- package/cjs/deprecated/ToolbarItem.js +54 -58
- package/cjs/deprecated/decorateToolbarChildren.js +27 -39
- package/cjs/deprecated/index.js +17 -36
- package/cjs/index.js +24 -39
- package/cjs/props.js +12 -39
- package/cjs/styled.js +22 -51
- package/cjs/useToolbarItemHandlers.js +28 -48
- package/esm/DSToolbarItemV2.js +33 -17
- package/esm/DSToolbarSeparatorV2.js +9 -9
- package/esm/DSToolbarV2.js +54 -29
- package/esm/DSToolbarV2Context.js +6 -8
- package/esm/deprecated/DSToolbar.js +73 -57
- package/esm/deprecated/ToolbarDivider.js +7 -10
- package/esm/deprecated/ToolbarGroup.js +30 -21
- package/esm/deprecated/ToolbarItem.js +43 -27
- package/esm/deprecated/decorateToolbarChildren.js +21 -11
- package/esm/deprecated/index.js +4 -7
- package/esm/index.js +7 -10
- package/esm/props.js +8 -10
- package/esm/styled.js +12 -23
- package/esm/useToolbarItemHandlers.js +24 -19
- package/package.json +10 -10
- package/cjs/DSToolbarItemV2.js.map +0 -7
- package/cjs/DSToolbarSeparatorV2.js.map +0 -7
- package/cjs/DSToolbarV2.js.map +0 -7
- package/cjs/DSToolbarV2Context.js.map +0 -7
- package/cjs/deprecated/DSToolbar.js.map +0 -7
- package/cjs/deprecated/ToolbarDivider.js.map +0 -7
- package/cjs/deprecated/ToolbarGroup.js.map +0 -7
- package/cjs/deprecated/ToolbarItem.js.map +0 -7
- package/cjs/deprecated/decorateToolbarChildren.js.map +0 -7
- package/cjs/deprecated/index.js.map +0 -7
- package/cjs/index.js.map +0 -7
- package/cjs/props.js.map +0 -7
- package/cjs/styled.js.map +0 -7
- package/cjs/useToolbarItemHandlers.js.map +0 -7
- package/esm/DSToolbarItemV2.js.map +0 -7
- package/esm/DSToolbarSeparatorV2.js.map +0 -7
- package/esm/DSToolbarV2.js.map +0 -7
- package/esm/DSToolbarV2Context.js.map +0 -7
- package/esm/deprecated/DSToolbar.js.map +0 -7
- package/esm/deprecated/ToolbarDivider.js.map +0 -7
- package/esm/deprecated/ToolbarGroup.js.map +0 -7
- package/esm/deprecated/ToolbarItem.js.map +0 -7
- package/esm/deprecated/decorateToolbarChildren.js.map +0 -7
- package/esm/deprecated/index.js.map +0 -7
- package/esm/index.js.map +0 -7
- package/esm/props.js.map +0 -7
- package/esm/styled.js.map +0 -7
- package/esm/useToolbarItemHandlers.js.map +0 -7
|
@@ -1,30 +1,35 @@
|
|
|
1
|
-
import
|
|
2
|
-
import {
|
|
3
|
-
import { DSToolbarV2Context } from
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
const
|
|
7
|
-
|
|
1
|
+
import 'core-js/modules/web.dom-collections.iterator.js';
|
|
2
|
+
import { useContext, useCallback } from 'react';
|
|
3
|
+
import { DSToolbarV2Context } from './DSToolbarV2Context.js';
|
|
4
|
+
|
|
5
|
+
const useToolbarItemHandlers = toolbarItemId => {
|
|
6
|
+
const {
|
|
7
|
+
toolbarUid,
|
|
8
|
+
itemReferences
|
|
9
|
+
} = useContext(DSToolbarV2Context);
|
|
10
|
+
const onKeyDown = useCallback(e => {
|
|
11
|
+
const toolbarItems = [...document.querySelectorAll("#".concat(toolbarUid, " .ds-toolbar-item"))];
|
|
8
12
|
let nextToolbarItemIndex = -1;
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
+
|
|
14
|
+
if (['ArrowLeft', 'ArrowRight'].includes(e.code)) {
|
|
15
|
+
const toolbarItemIndex = toolbarItems.findIndex(domElem => domElem.id === toolbarItemId);
|
|
16
|
+
nextToolbarItemIndex = toolbarItemIndex + (e.code === 'ArrowLeft' ? -1 : 1);
|
|
17
|
+
} else if (e.code === 'Home') {
|
|
13
18
|
nextToolbarItemIndex = 0;
|
|
14
|
-
} else if (e.code ===
|
|
19
|
+
} else if (e.code === 'End') {
|
|
15
20
|
nextToolbarItemIndex = toolbarItems.length - 1;
|
|
16
21
|
}
|
|
22
|
+
|
|
17
23
|
if (nextToolbarItemIndex >= 0 && nextToolbarItemIndex < toolbarItems.length) {
|
|
18
24
|
e.preventDefault();
|
|
19
25
|
e.stopPropagation();
|
|
20
26
|
const ref = itemReferences[toolbarItems[nextToolbarItemIndex].id];
|
|
21
|
-
if (ref.current)
|
|
22
|
-
ref.current.focus();
|
|
27
|
+
if (ref.current) ref.current.focus();
|
|
23
28
|
}
|
|
24
29
|
}, [toolbarUid, toolbarItemId, itemReferences]);
|
|
25
|
-
return {
|
|
30
|
+
return {
|
|
31
|
+
onKeyDown
|
|
32
|
+
};
|
|
26
33
|
};
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
};
|
|
30
|
-
//# sourceMappingURL=useToolbarItemHandlers.js.map
|
|
34
|
+
|
|
35
|
+
export { useToolbarItemHandlers };
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@elliemae/ds-toolbar",
|
|
3
|
-
"version": "
|
|
3
|
+
"version": "3.0.0-next.2",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"description": "ICE MT - Dimsum - Toolbar",
|
|
6
6
|
"module": "./esm/index.js",
|
|
@@ -84,15 +84,15 @@
|
|
|
84
84
|
"build": "node ../../scripts/build/build.js"
|
|
85
85
|
},
|
|
86
86
|
"dependencies": {
|
|
87
|
-
"@elliemae/ds-button": "
|
|
88
|
-
"@elliemae/ds-classnames": "
|
|
89
|
-
"@elliemae/ds-grid": "
|
|
90
|
-
"@elliemae/ds-icons": "
|
|
91
|
-
"@elliemae/ds-popper": "
|
|
92
|
-
"@elliemae/ds-props-helpers": "
|
|
93
|
-
"@elliemae/ds-shared": "
|
|
94
|
-
"@elliemae/ds-system": "
|
|
95
|
-
"@elliemae/ds-utilities": "
|
|
87
|
+
"@elliemae/ds-button": "3.0.0-next.2",
|
|
88
|
+
"@elliemae/ds-classnames": "3.0.0-next.2",
|
|
89
|
+
"@elliemae/ds-grid": "3.0.0-next.2",
|
|
90
|
+
"@elliemae/ds-icons": "3.0.0-next.2",
|
|
91
|
+
"@elliemae/ds-popper": "3.0.0-next.2",
|
|
92
|
+
"@elliemae/ds-props-helpers": "3.0.0-next.2",
|
|
93
|
+
"@elliemae/ds-shared": "3.0.0-next.2",
|
|
94
|
+
"@elliemae/ds-system": "3.0.0-next.2",
|
|
95
|
+
"@elliemae/ds-utilities": "3.0.0-next.2",
|
|
96
96
|
"prop-types": "~15.7.2",
|
|
97
97
|
"react-desc": "~4.1.3",
|
|
98
98
|
"uid": "2.0.0"
|
|
@@ -1,7 +0,0 @@
|
|
|
1
|
-
{
|
|
2
|
-
"version": 3,
|
|
3
|
-
"sources": ["../../src/DSToolbarItemV2.tsx", "../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["/* eslint-disable react/prop-types */\nimport React, { MutableRefObject, useContext, useMemo, useRef } from 'react';\nimport { uid } from 'uid';\nimport { DSToolbarV2Context } from './DSToolbarV2Context';\nimport { StyledToolbarItem } from './styled';\nimport { useToolbarItemHandlers } from './useToolbarItemHandlers';\n\ninterface ToolbarItemProps {\n render: (props: { innerRef: MutableRefObject<HTMLElement> }) => JSX.Element;\n}\n\nexport const DSToolbarItemV2: React.ComponentType<ToolbarItemProps> = ({ render }) => {\n const { registerReference } = useContext(DSToolbarV2Context);\n const ref = useRef(null);\n\n const toolbarItemId = useMemo(() => {\n const id = `ds-toolbar-item-${uid()}`;\n registerReference(id, ref);\n return id;\n }, [registerReference, ref]);\n\n const handlers = useToolbarItemHandlers(toolbarItemId);\n\n return (\n <StyledToolbarItem id={toolbarItemId} data-testid=\"ds-toolbar-item\" className=\"ds-toolbar-item\" {...handlers}>\n {render({ innerRef: ref })}\n </StyledToolbarItem>\n );\n};\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADCvB,mBAAqE;AACrE,iBAAoB;AACpB,gCAAmC;AACnC,oBAAkC;AAClC,oCAAuC;AAMhC,MAAM,kBAAyD,CAAC,EAAE,aAAa;AACpF,QAAM,EAAE,sBAAsB,6BAAW;AACzC,QAAM,MAAM,yBAAO;AAEnB,QAAM,gBAAgB,0BAAQ,MAAM;AAClC,UAAM,KAAK,mBAAmB;AAC9B,sBAAkB,IAAI;AACtB,WAAO;AAAA,KACN,CAAC,mBAAmB;AAEvB,QAAM,WAAW,0DAAuB;AAExC,SACE,mDAAC,iCAAD;AAAA,IAAmB,IAAI;AAAA,IAAe,eAAY;AAAA,IAAkB,WAAU;AAAA,OAAsB;AAAA,KACjG,OAAO,EAAE,UAAU;AAAA;",
|
|
6
|
-
"names": []
|
|
7
|
-
}
|
|
@@ -1,7 +0,0 @@
|
|
|
1
|
-
{
|
|
2
|
-
"version": 3,
|
|
3
|
-
"sources": ["../../src/DSToolbarSeparatorV2.tsx", "../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["import React from 'react';\nimport { StyledSeparator } from './styled';\n\nexport const DSToolbarSeparatorV2: React.ComponentType = () => <StyledSeparator className=\"ds-toolbar-separator\" />;\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAAkB;AAClB,oBAAgC;AAEzB,MAAM,uBAA4C,MAAM,mDAAC,+BAAD;AAAA,EAAiB,WAAU;AAAA;",
|
|
6
|
-
"names": []
|
|
7
|
-
}
|
package/cjs/DSToolbarV2.js.map
DELETED
|
@@ -1,7 +0,0 @@
|
|
|
1
|
-
{
|
|
2
|
-
"version": 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 { useValidateTypescriptPropTypes } from '@elliemae/ds-props-helpers';\nimport { describe } from 'react-desc';\nimport { uid } from 'uid';\nimport { DSToolbarV2Context } from './DSToolbarV2Context';\nimport { DSToolbarV2Schema } from './props';\nimport { StyledToolbarWrapper } from './styled';\ninterface ToolbarProps {\n alignment?: 'left' | 'right';\n withDepth?: boolean;\n compact?: boolean;\n innerRef?: React.MutableRefObject<HTMLDivElement>;\n}\n\nconst DSToolbarV2: React.ComponentType<ToolbarProps> = (props) => {\n const { alignment, withDepth, compact, innerRef, children } = props;\n\n useValidateTypescriptPropTypes(props, DSToolbarV2Schema);\n\n const toolbarUid = useMemo(() => `ds-toolbar-${uid()}`, []);\n\n const [itemReferences, setItemReferences] = useState({});\n\n const registerReference = useCallback(\n (itemId: string, ref: React.MutableRefObject<HTMLElement>) => {\n setItemReferences((prevItemReferences) => ({ ...prevItemReferences, [itemId]: ref }));\n },\n [setItemReferences],\n );\n\n return (\n <DSToolbarV2Context.Provider value={{ toolbarUid, registerReference, itemReferences }}>\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 cols={React.Children.map(children, () => ['auto'])}\n gutter=\"xxs2\"\n compact={compact}\n ref={innerRef}\n >\n {children}\n </StyledToolbarWrapper>\n </DSToolbarV2Context.Provider>\n );\n};\n\nDSToolbarV2.propTypes = DSToolbarV2Schema;\nDSToolbarV2.defaultProps = {\n alignment: 'right',\n withDepth: true,\n compact: false,\n};\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;ACAA,YAAuB;ADCvB,mBAAsD;AACtD,8BAA+C;AAC/C,wBAAyB;AACzB,iBAAoB;AACpB,gCAAmC;AACnC,mBAAkC;AAClC,oBAAqC;AAQrC,MAAM,cAAiD,CAAC,UAAU;AAChE,QAAM,EAAE,WAAW,WAAW,SAAS,UAAU,aAAa;AAE9D,8DAA+B,OAAO;AAEtC,QAAM,aAAa,0BAAQ,MAAM,cAAc,yBAAS;AAExD,QAAM,CAAC,gBAAgB,qBAAqB,2BAAS;AAErD,QAAM,oBAAoB,8BACxB,CAAC,QAAgB,QAA6C;AAC5D,sBAAkB,CAAC,uBAAwB,MAAK,qBAAqB,SAAS;AAAA,KAEhF,CAAC;AAGH,SACE,mDAAC,6CAAmB,UAApB;AAAA,IAA6B,OAAO,EAAE,YAAY,mBAAmB;AAAA,KACnE,mDAAC,oCAAD;AAAA,IACE,MAAK;AAAA,IACL,eAAY;AAAA,IACZ,IAAI;AAAA,IACJ,YAAW;AAAA,IACX,gBAAgB,cAAc,SAAS,eAAe;AAAA,IACtD;AAAA,IACA,MAAM,qBAAM,SAAS,IAAI,UAAU,MAAM,CAAC;AAAA,IAC1C,QAAO;AAAA,IACP;AAAA,IACA,KAAK;AAAA,KAEJ;AAAA;AAMT,YAAY,YAAY;AACxB,YAAY,eAAe;AAAA,EACzB,WAAW;AAAA,EACX,WAAW;AAAA,EACX,SAAS;AAAA;AAEX,MAAM,wBAAwB,gCAAS,aAAa,YAAY;AAChE,sBAAsB,YAAY;",
|
|
6
|
-
"names": []
|
|
7
|
-
}
|
|
@@ -1,7 +0,0 @@
|
|
|
1
|
-
{
|
|
2
|
-
"version": 3,
|
|
3
|
-
"sources": ["../../src/DSToolbarV2Context.tsx", "../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["import { createContext, MutableRefObject } from 'react';\n\ninterface IDSToolbarV2Context {\n registerReference: (uid: string, ref: MutableRefObject<HTMLElement>) => void;\n itemReferences: Record<string, MutableRefObject<HTMLElement>>;\n toolbarUid: string;\n}\n\nexport const DSToolbarV2Context = createContext<IDSToolbarV2Context>({\n registerReference: () => null,\n itemReferences: {},\n toolbarUid: '',\n});\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAAgD;AAQzC,MAAM,qBAAqB,gCAAmC;AAAA,EACnE,mBAAmB,MAAM;AAAA,EACzB,gBAAgB;AAAA,EAChB,YAAY;AAAA;",
|
|
6
|
-
"names": []
|
|
7
|
-
}
|
|
@@ -1,7 +0,0 @@
|
|
|
1
|
-
{
|
|
2
|
-
"version": 3,
|
|
3
|
-
"sources": ["../../../src/deprecated/DSToolbar.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["import React, { useRef } from 'react';\nimport { describe, PropTypes } from 'react-desc';\nimport { aggregatedClasses } from '@elliemae/ds-classnames';\nimport FocusGroupProvider from '@elliemae/ds-shared/FocusGroup/FocusGroupManager';\nimport { mergeRefs } from '@elliemae/ds-utilities';\nimport decorateToolbarChildren from './decorateToolbarChildren';\nimport Item from './ToolbarItem';\nimport ToolbarGroup from './ToolbarGroup';\nimport Divider from './ToolbarDivider';\n\nconst blockName = 'toolbar';\n\nconst ToolbarContainer = aggregatedClasses('div')(\n blockName,\n null,\n ({ withDepth, alignment, size }) => ({\n 'without-depth': !withDepth,\n [alignment]: !!alignment,\n [size]: size,\n }),\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(null);\n return (\n <FocusGroupProvider\n autoFocusOnMount={autoFocusOnMount}\n getContainer={() => containerRef.current}\n keyBindings={{\n Tab: 'next',\n }}\n orientation=\"horizontal\"\n >\n <ToolbarContainer\n {...containerProps}\n {...otherProps}\n classProps={{ withDepth, alignment, size }}\n innerRef={mergeRefs(innerRef, containerRef)}\n >\n {decorateToolbarChildren(children)}\n </ToolbarContainer>\n </FocusGroupProvider>\n );\n};\n\nconst toolbarProps = {\n containerProps: PropTypes.object.description(\n 'Set of Properties attached to the main container',\n ),\n withDepth: PropTypes.bool\n .description('Shows a shadow rear the toolbar')\n .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'])\n .description('Toolbar size')\n .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([\n PropTypes.array,\n PropTypes.func,\n PropTypes.node,\n ]).description('Toolbar items').isRequired,\n innerRef: PropTypes.object.description(\n 'Ref to the Toolbar container element',\n ),\n};\n\nDSToolbar.propTypes = toolbarProps;\n\nconst ToolbarWithSchema = describe(DSToolbar);\nToolbarWithSchema.propTypes = toolbarProps;\n\nexport {\n DSToolbar,\n Item as ToolbarItem,\n ToolbarGroup,\n Divider as ToolbarDivider,\n ToolbarWithSchema,\n};\n\nexport default DSToolbar;\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAA8B;AAC9B,wBAAoC;AACpC,2BAAkC;AAClC,+BAA+B;AAC/B,0BAA0B;AAC1B,qCAAoC;AACpC,yBAAiB;AACjB,0BAAyB;AACzB,4BAAoB;AAEpB,MAAM,YAAY;AAElB,MAAM,mBAAmB,4CAAkB,OACzC,WACA,MACA,CAAC,EAAE,WAAW,WAAW,WAAY;AAAA,EACnC,iBAAiB,CAAC;AAAA,GACjB,YAAY,CAAC,CAAC;AAAA,GACd,OAAO;AAAA;AAIZ,MAAM,YAAY,CAAC;AAAA,EACjB,iBAAiB;AAAA,EACjB;AAAA,EACA,YAAY;AAAA,EACZ,YAAY;AAAA,EACZ,mBAAmB;AAAA,EACnB,WAAW;AAAA,EACX,OAAO;AAAA,KACJ;AAAA,MACC;AACJ,QAAM,eAAe,yBAAO;AAC5B,SACE,mDAAC,kCAAD;AAAA,IACE;AAAA,IACA,cAAc,MAAM,aAAa;AAAA,IACjC,aAAa;AAAA,MACX,KAAK;AAAA;AAAA,IAEP,aAAY;AAAA,KAEZ,mDAAC,kBAAD;AAAA,OACM;AAAA,OACA;AAAA,IACJ,YAAY,EAAE,WAAW,WAAW;AAAA,IACpC,UAAU,mCAAU,UAAU;AAAA,KAE7B,4CAAwB;AAAA;AAMjC,MAAM,eAAe;AAAA,EACnB,gBAAgB,4BAAU,OAAO,YAC/B;AAAA,EAEF,WAAW,4BAAU,KAClB,YAAY,mCACZ,aAAa;AAAA,EAChB,WAAW,4BAAU,MAAM,CAAC,SAAS,SAClC,YAAY,2CACZ,aAAa;AAAA,EAChB,MAAM,4BAAU,MAAM,CAAC,UAAU,YAC9B,YAAY,gBACZ,aAAa;AAAA,EAChB,kBAAkB,4BAAU,KACzB,YAAY,uDACZ,aAAa;AAAA,EAChB,UAAU,4BAAU,UAAU;AAAA,IAC5B,4BAAU;AAAA,IACV,4BAAU;AAAA,IACV,4BAAU;AAAA,KACT,YAAY,iBAAiB;AAAA,EAChC,UAAU,4BAAU,OAAO,YACzB;AAAA;AAIJ,UAAU,YAAY;AAEtB,MAAM,oBAAoB,gCAAS;AACnC,kBAAkB,YAAY;AAU9B,IAAO,oBAAQ;",
|
|
6
|
-
"names": []
|
|
7
|
-
}
|
|
@@ -1,7 +0,0 @@
|
|
|
1
|
-
{
|
|
2
|
-
"version": 3,
|
|
3
|
-
"sources": ["../../../src/deprecated/ToolbarDivider.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["import { aggregatedClasses } from '@elliemae/ds-classnames';\n\nconst blockName = 'toolbar';\n\nconst ToolbarDivider = aggregatedClasses('div')(blockName, 'divider');\n\nToolbarDivider.displayName = 'ToolbarDivider';\n\nexport default ToolbarDivider;\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,2BAAkC;AAElC,MAAM,YAAY;AAElB,MAAM,iBAAiB,4CAAkB,OAAO,WAAW;AAE3D,eAAe,cAAc;AAE7B,IAAO,yBAAQ;",
|
|
6
|
-
"names": []
|
|
7
|
-
}
|
|
@@ -1,7 +0,0 @@
|
|
|
1
|
-
{
|
|
2
|
-
"version": 3,
|
|
3
|
-
"sources": ["../../../src/deprecated/ToolbarGroup.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["import React from 'react';\nimport PropTypes from 'prop-types';\nimport { aggregatedClasses } from '@elliemae/ds-classnames';\nimport decorateToolbarChildren from './decorateToolbarChildren';\n\nconst blockName = 'toolbar-group';\n\nconst ToolbarGroupContainer = aggregatedClasses('div')(\n blockName,\n null,\n ({ space }) => ({\n [`space-${space}`]: !!space,\n }),\n);\n\nconst ToolbarGroup = ({ children, size, space = 0 }) => (\n <ToolbarGroupContainer classProps={{ space }}>\n {decorateToolbarChildren(children, { size })}\n </ToolbarGroupContainer>\n);\n\nToolbarGroup.propTypes = {\n children: PropTypes.any,\n size: PropTypes.number,\n space: PropTypes.number,\n};\n\nexport default ToolbarGroup;\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAAkB;AAClB,wBAAsB;AACtB,2BAAkC;AAClC,qCAAoC;AAEpC,MAAM,YAAY;AAElB,MAAM,wBAAwB,4CAAkB,OAC9C,WACA,MACA,CAAC,EAAE,YAAa;AAAA,GACb,SAAS,UAAU,CAAC,CAAC;AAAA;AAI1B,MAAM,eAAe,CAAC,EAAE,UAAU,MAAM,QAAQ,QAC9C,mDAAC,uBAAD;AAAA,EAAuB,YAAY,EAAE;AAAA,GAClC,4CAAwB,UAAU,EAAE;AAIzC,aAAa,YAAY;AAAA,EACvB,UAAU,0BAAU;AAAA,EACpB,MAAM,0BAAU;AAAA,EAChB,OAAO,0BAAU;AAAA;AAGnB,IAAO,uBAAQ;",
|
|
6
|
-
"names": []
|
|
7
|
-
}
|
|
@@ -1,7 +0,0 @@
|
|
|
1
|
-
{
|
|
2
|
-
"version": 3,
|
|
3
|
-
"sources": ["../../../src/deprecated/ToolbarItem.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["import React, { useState } from 'react';\nimport PropTypes from 'prop-types';\nimport { useFocusGroupWithState } from '@elliemae/ds-shared/FocusGroup';\nimport DSButton from '@elliemae/ds-button';\nimport { PopperPositions as Position } from '@elliemae/ds-popper';\n\nconst ToolbarItem = ({ icon, labelText, menu = undefined, ...otherProps }) => {\n const [ref, setRef] = useState(null);\n\n useFocusGroupWithState(ref);\n const btn = (\n <DSButton {...otherProps} buttonType=\"text\" icon={icon} innerRef={(r) => setRef(r)} labelText={labelText} />\n );\n if (menu) {\n return React.cloneElement(menu, {\n ...menu.props,\n placement: Position.BOTTOM_END,\n triggerComponent: btn,\n });\n }\n return btn;\n};\n\nToolbarItem.displayName = 'ToolbarItem';\n\nToolbarItem.propTypes = {\n icon: PropTypes.element,\n labelText: PropTypes.string,\n};\n\nexport default ToolbarItem;\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAAgC;AAChC,wBAAsB;AACtB,wBAAuC;AACvC,uBAAqB;AACrB,uBAA4C;AAE5C,MAAM,cAAc,CAAC,EAAE,MAAM,WAAW,OAAO,WAAc,iBAAiB;AAC5E,QAAM,CAAC,KAAK,UAAU,2BAAS;AAE/B,gDAAuB;AACvB,QAAM,MACJ,mDAAC,0BAAD;AAAA,OAAc;AAAA,IAAY,YAAW;AAAA,IAAO;AAAA,IAAY,UAAU,CAAC,MAAM,OAAO;AAAA,IAAI;AAAA;AAEtF,MAAI,MAAM;AACR,WAAO,qBAAM,aAAa,MAAM;AAAA,SAC3B,KAAK;AAAA,MACR,WAAW,iCAAS;AAAA,MACpB,kBAAkB;AAAA;AAAA;AAGtB,SAAO;AAAA;AAGT,YAAY,cAAc;AAE1B,YAAY,YAAY;AAAA,EACtB,MAAM,0BAAU;AAAA,EAChB,WAAW,0BAAU;AAAA;AAGvB,IAAO,sBAAQ;",
|
|
6
|
-
"names": []
|
|
7
|
-
}
|
|
@@ -1,7 +0,0 @@
|
|
|
1
|
-
{
|
|
2
|
-
"version": 3,
|
|
3
|
-
"sources": ["../../../src/deprecated/decorateToolbarChildren.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["import React, { cloneElement } from 'react';\n\nexport default (children, extraProps = {}) =>\n React.Children.map(\n children,\n component =>\n component\n ? cloneElement(component, {\n ...extraProps,\n ...component.props,\n className: `${component.props.className} toolbar-item`,\n })\n : component,\n null,\n );\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAAoC;AAEpC,IAAO,kCAAQ,CAAC,UAAU,aAAa,OACrC,qBAAM,SAAS,IACb,UACA,eACE,YACI,+BAAa,WAAW;AAAA,KACnB;AAAA,KACA,UAAU;AAAA,EACb,WAAW,GAAG,UAAU,MAAM;AAAA,KAEhC,WACN;",
|
|
6
|
-
"names": []
|
|
7
|
-
}
|
|
@@ -1,7 +0,0 @@
|
|
|
1
|
-
{
|
|
2
|
-
"version": 3,
|
|
3
|
-
"sources": ["../../../src/deprecated/index.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["/* eslint-disable import/export */\nexport * from './DSToolbar';\n\nexport { default } from './DSToolbar';\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADCvB,+BAAc;AAEd,uBAAwB;",
|
|
6
|
-
"names": []
|
|
7
|
-
}
|
package/cjs/index.js.map
DELETED
|
@@ -1,7 +0,0 @@
|
|
|
1
|
-
{
|
|
2
|
-
"version": 3,
|
|
3
|
-
"sources": ["../../src/index.tsx", "../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["export * from './deprecated';\nexport { default } from './deprecated';\nexport * from './DSToolbarV2';\nexport * from './DSToolbarItemV2';\nexport * from './DSToolbarSeparatorV2';\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,wBAAc;AACd,wBAAwB;AACxB,wBAAc;AACd,wBAAc;AACd,wBAAc;",
|
|
6
|
-
"names": []
|
|
7
|
-
}
|
package/cjs/props.js.map
DELETED
|
@@ -1,7 +0,0 @@
|
|
|
1
|
-
{
|
|
2
|
-
"version": 3,
|
|
3
|
-
"sources": ["../../src/props.tsx", "../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["import { PropTypes } from 'react-desc';\n\nexport const DSToolbarV2Schema = {\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", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,wBAA0B;AAEnB,MAAM,oBAAoB;AAAA,EAC/B,WAAW,4BAAU,MAAM,CAAC,SAAS,SAClC,YAAY,8CACZ,aAAa;AAAA,EAChB,WAAW,4BAAU,KAAK,YAAY,gDAAgD,aAAa;AAAA,EACnG,SAAS,4BAAU,KAAK,YAAY,uDAAuD,aAAa;AAAA,EACxG,UAAU,4BAAU,UAAU,CAAC,4BAAU,MAAM,4BAAU,SAAS,YAAY;AAAA;",
|
|
6
|
-
"names": []
|
|
7
|
-
}
|
package/cjs/styled.js.map
DELETED
|
@@ -1,7 +0,0 @@
|
|
|
1
|
-
{
|
|
2
|
-
"version": 3,
|
|
3
|
-
"sources": ["../../src/styled.tsx", "../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["import styled from 'styled-components';\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' : '40px')};\n max-height: ${(props) => props.theme.space.xxl};\n\n padding: 0 ${(props) => props.theme.space.xxs};\n\n box-shadow: ${(props) => (!props.withDepth ? 'none' : '0 1px 5px 0 rgb(0 0 0 / 13%), 0 2px 4px 0 rgb(0 0 0 / 20%)')};\n`;\n\nexport const StyledToolbarItem = styled(Grid)``;\n\nexport const StyledSeparator = styled(Grid)`\n height: 30px;\n width: 1px;\n background-color: ${(props) => props.theme.colors.neutral[200]};\n`;\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,+BAAmB;AACnB,qBAAiB;AAEV,MAAM,uBAAuB,sCAAO;AAAA,sBACrB,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ;AAAA;AAAA,gBAE5C,CAAC,UAAW,MAAM,UAAU,SAAS;AAAA,gBACrC,CAAC,UAAU,MAAM,MAAM,MAAM;AAAA;AAAA,eAE9B,CAAC,UAAU,MAAM,MAAM,MAAM;AAAA;AAAA,gBAE5B,CAAC,UAAW,CAAC,MAAM,YAAY,SAAS;AAAA;AAGjD,MAAM,oBAAoB,sCAAO;AAEjC,MAAM,kBAAkB,sCAAO;AAAA;AAAA;AAAA,sBAGhB,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ;AAAA;",
|
|
6
|
-
"names": []
|
|
7
|
-
}
|
|
@@ -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';\n\nexport const useToolbarItemHandlers = (\n toolbarItemId: string,\n): {\n onKeyDown: React.KeyboardEventHandler;\n} => {\n const { toolbarUid, itemReferences } = useContext(DSToolbarV2Context);\n\n const onKeyDown: React.KeyboardEventHandler = useCallback(\n (e) => {\n const toolbarItems = [...document.querySelectorAll(`#${toolbarUid} .ds-toolbar-item`)];\n let nextToolbarItemIndex = -1;\n\n if (['ArrowLeft', 'ArrowRight'].includes(e.code)) {\n const toolbarItemIndex = toolbarItems.findIndex((domElem) => domElem.id === toolbarItemId);\n nextToolbarItemIndex = toolbarItemIndex + (e.code === 'ArrowLeft' ? -1 : 1);\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 };\n};\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAAwC;AACxC,gCAAmC;AAE5B,MAAM,yBAAyB,CACpC,kBAGG;AACH,QAAM,EAAE,YAAY,mBAAmB,6BAAW;AAElD,QAAM,YAAwC,8BAC5C,CAAC,MAAM;AACL,UAAM,eAAe,CAAC,GAAG,SAAS,iBAAiB,IAAI;AACvD,QAAI,uBAAuB;AAE3B,QAAI,CAAC,aAAa,cAAc,SAAS,EAAE,OAAO;AAChD,YAAM,mBAAmB,aAAa,UAAU,CAAC,YAAY,QAAQ,OAAO;AAC5E,6BAAuB,mBAAoB,GAAE,SAAS,cAAc,KAAK;AAAA,eAChE,EAAE,SAAS,QAAQ;AAC5B,6BAAuB;AAAA,eACd,EAAE,SAAS,OAAO;AAC3B,6BAAuB,aAAa,SAAS;AAAA;AAG/C,QAAI,wBAAwB,KAAK,uBAAuB,aAAa,QAAQ;AAC3E,QAAE;AACF,QAAE;AACF,YAAM,MAAM,eAAe,aAAa,sBAAsB;AAC9D,UAAI,IAAI;AAAS,YAAI,QAAQ;AAAA;AAAA,KAGjC,CAAC,YAAY,eAAe;AAG9B,SAAO,EAAE;AAAA;",
|
|
6
|
-
"names": []
|
|
7
|
-
}
|
|
@@ -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, { MutableRefObject, useContext, useMemo, useRef } from 'react';\nimport { uid } from 'uid';\nimport { DSToolbarV2Context } from './DSToolbarV2Context';\nimport { StyledToolbarItem } from './styled';\nimport { useToolbarItemHandlers } from './useToolbarItemHandlers';\n\ninterface ToolbarItemProps {\n render: (props: { innerRef: MutableRefObject<HTMLElement> }) => JSX.Element;\n}\n\nexport const DSToolbarItemV2: React.ComponentType<ToolbarItemProps> = ({ render }) => {\n const { registerReference } = useContext(DSToolbarV2Context);\n const ref = useRef(null);\n\n const toolbarItemId = useMemo(() => {\n const id = `ds-toolbar-item-${uid()}`;\n registerReference(id, ref);\n return id;\n }, [registerReference, ref]);\n\n const handlers = useToolbarItemHandlers(toolbarItemId);\n\n return (\n <StyledToolbarItem id={toolbarItemId} data-testid=\"ds-toolbar-item\" className=\"ds-toolbar-item\" {...handlers}>\n {render({ innerRef: ref })}\n </StyledToolbarItem>\n );\n};\n"],
|
|
5
|
-
"mappings": "AAAA;ACCA;AACA;AACA;AACA;AACA;AAMO,MAAM,kBAAyD,CAAC,EAAE,aAAa;AACpF,QAAM,EAAE,sBAAsB,WAAW;AACzC,QAAM,MAAM,OAAO;AAEnB,QAAM,gBAAgB,QAAQ,MAAM;AAClC,UAAM,KAAK,mBAAmB;AAC9B,sBAAkB,IAAI;AACtB,WAAO;AAAA,KACN,CAAC,mBAAmB;AAEvB,QAAM,WAAW,uBAAuB;AAExC,SACE,qCAAC,mBAAD;AAAA,IAAmB,IAAI;AAAA,IAAe,eAAY;AAAA,IAAkB,WAAU;AAAA,OAAsB;AAAA,KACjG,OAAO,EAAE,UAAU;AAAA;",
|
|
6
|
-
"names": []
|
|
7
|
-
}
|
|
@@ -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';\n\nexport const DSToolbarSeparatorV2: React.ComponentType = () => <StyledSeparator className=\"ds-toolbar-separator\" />;\n"],
|
|
5
|
-
"mappings": "AAAA;ACAA;AACA;AAEO,MAAM,uBAA4C,MAAM,qCAAC,iBAAD;AAAA,EAAiB,WAAU;AAAA;",
|
|
6
|
-
"names": []
|
|
7
|
-
}
|
package/esm/DSToolbarV2.js.map
DELETED
|
@@ -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 { useValidateTypescriptPropTypes } from '@elliemae/ds-props-helpers';\nimport { describe } from 'react-desc';\nimport { uid } from 'uid';\nimport { DSToolbarV2Context } from './DSToolbarV2Context';\nimport { DSToolbarV2Schema } from './props';\nimport { StyledToolbarWrapper } from './styled';\ninterface ToolbarProps {\n alignment?: 'left' | 'right';\n withDepth?: boolean;\n compact?: boolean;\n innerRef?: React.MutableRefObject<HTMLDivElement>;\n}\n\nconst DSToolbarV2: React.ComponentType<ToolbarProps> = (props) => {\n const { alignment, withDepth, compact, innerRef, children } = props;\n\n useValidateTypescriptPropTypes(props, DSToolbarV2Schema);\n\n const toolbarUid = useMemo(() => `ds-toolbar-${uid()}`, []);\n\n const [itemReferences, setItemReferences] = useState({});\n\n const registerReference = useCallback(\n (itemId: string, ref: React.MutableRefObject<HTMLElement>) => {\n setItemReferences((prevItemReferences) => ({ ...prevItemReferences, [itemId]: ref }));\n },\n [setItemReferences],\n );\n\n return (\n <DSToolbarV2Context.Provider value={{ toolbarUid, registerReference, itemReferences }}>\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 cols={React.Children.map(children, () => ['auto'])}\n gutter=\"xxs2\"\n compact={compact}\n ref={innerRef}\n >\n {children}\n </StyledToolbarWrapper>\n </DSToolbarV2Context.Provider>\n );\n};\n\nDSToolbarV2.propTypes = DSToolbarV2Schema;\nDSToolbarV2.defaultProps = {\n alignment: 'right',\n withDepth: true,\n compact: false,\n};\nconst DSToolbarV2WithSchema = describe(DSToolbarV2).description('Toolbar');\nDSToolbarV2WithSchema.propTypes = DSToolbarV2Schema;\n\nexport { DSToolbarV2, DSToolbarV2WithSchema };\n"],
|
|
5
|
-
"mappings": "AAAA;ACCA;AACA;AACA;AACA;AACA;AACA;AACA;AAQA,MAAM,cAAiD,CAAC,UAAU;AAChE,QAAM,EAAE,WAAW,WAAW,SAAS,UAAU,aAAa;AAE9D,iCAA+B,OAAO;AAEtC,QAAM,aAAa,QAAQ,MAAM,cAAc,SAAS;AAExD,QAAM,CAAC,gBAAgB,qBAAqB,SAAS;AAErD,QAAM,oBAAoB,YACxB,CAAC,QAAgB,QAA6C;AAC5D,sBAAkB,CAAC,uBAAwB,MAAK,qBAAqB,SAAS;AAAA,KAEhF,CAAC;AAGH,SACE,qCAAC,mBAAmB,UAApB;AAAA,IAA6B,OAAO,EAAE,YAAY,mBAAmB;AAAA,KACnE,qCAAC,sBAAD;AAAA,IACE,MAAK;AAAA,IACL,eAAY;AAAA,IACZ,IAAI;AAAA,IACJ,YAAW;AAAA,IACX,gBAAgB,cAAc,SAAS,eAAe;AAAA,IACtD;AAAA,IACA,MAAM,OAAM,SAAS,IAAI,UAAU,MAAM,CAAC;AAAA,IAC1C,QAAO;AAAA,IACP;AAAA,IACA,KAAK;AAAA,KAEJ;AAAA;AAMT,YAAY,YAAY;AACxB,YAAY,eAAe;AAAA,EACzB,WAAW;AAAA,EACX,WAAW;AAAA,EACX,SAAS;AAAA;AAEX,MAAM,wBAAwB,SAAS,aAAa,YAAY;AAChE,sBAAsB,YAAY;",
|
|
6
|
-
"names": []
|
|
7
|
-
}
|
|
@@ -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 { createContext, MutableRefObject } from 'react';\n\ninterface IDSToolbarV2Context {\n registerReference: (uid: string, ref: MutableRefObject<HTMLElement>) => void;\n itemReferences: Record<string, MutableRefObject<HTMLElement>>;\n toolbarUid: string;\n}\n\nexport const DSToolbarV2Context = createContext<IDSToolbarV2Context>({\n registerReference: () => null,\n itemReferences: {},\n toolbarUid: '',\n});\n"],
|
|
5
|
-
"mappings": "AAAA;ACAA;AAQO,MAAM,qBAAqB,cAAmC;AAAA,EACnE,mBAAmB,MAAM;AAAA,EACzB,gBAAgB;AAAA,EAChB,YAAY;AAAA;",
|
|
6
|
-
"names": []
|
|
7
|
-
}
|
|
@@ -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", "import React, { useRef } from 'react';\nimport { describe, PropTypes } from 'react-desc';\nimport { aggregatedClasses } from '@elliemae/ds-classnames';\nimport FocusGroupProvider from '@elliemae/ds-shared/FocusGroup/FocusGroupManager';\nimport { mergeRefs } from '@elliemae/ds-utilities';\nimport decorateToolbarChildren from './decorateToolbarChildren';\nimport Item from './ToolbarItem';\nimport ToolbarGroup from './ToolbarGroup';\nimport Divider from './ToolbarDivider';\n\nconst blockName = 'toolbar';\n\nconst ToolbarContainer = aggregatedClasses('div')(\n blockName,\n null,\n ({ withDepth, alignment, size }) => ({\n 'without-depth': !withDepth,\n [alignment]: !!alignment,\n [size]: size,\n }),\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(null);\n return (\n <FocusGroupProvider\n autoFocusOnMount={autoFocusOnMount}\n getContainer={() => containerRef.current}\n keyBindings={{\n Tab: 'next',\n }}\n orientation=\"horizontal\"\n >\n <ToolbarContainer\n {...containerProps}\n {...otherProps}\n classProps={{ withDepth, alignment, size }}\n innerRef={mergeRefs(innerRef, containerRef)}\n >\n {decorateToolbarChildren(children)}\n </ToolbarContainer>\n </FocusGroupProvider>\n );\n};\n\nconst toolbarProps = {\n containerProps: PropTypes.object.description(\n 'Set of Properties attached to the main container',\n ),\n withDepth: PropTypes.bool\n .description('Shows a shadow rear the toolbar')\n .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'])\n .description('Toolbar size')\n .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([\n PropTypes.array,\n PropTypes.func,\n PropTypes.node,\n ]).description('Toolbar items').isRequired,\n innerRef: PropTypes.object.description(\n 'Ref to the Toolbar container element',\n ),\n};\n\nDSToolbar.propTypes = toolbarProps;\n\nconst ToolbarWithSchema = describe(DSToolbar);\nToolbarWithSchema.propTypes = toolbarProps;\n\nexport {\n DSToolbar,\n Item as ToolbarItem,\n ToolbarGroup,\n Divider as ToolbarDivider,\n ToolbarWithSchema,\n};\n\nexport default DSToolbar;\n"],
|
|
5
|
-
"mappings": "AAAA;ACAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA,MAAM,YAAY;AAElB,MAAM,mBAAmB,kBAAkB,OACzC,WACA,MACA,CAAC,EAAE,WAAW,WAAW,WAAY;AAAA,EACnC,iBAAiB,CAAC;AAAA,GACjB,YAAY,CAAC,CAAC;AAAA,GACd,OAAO;AAAA;AAIZ,MAAM,YAAY,CAAC;AAAA,EACjB,iBAAiB;AAAA,EACjB;AAAA,EACA,YAAY;AAAA,EACZ,YAAY;AAAA,EACZ,mBAAmB;AAAA,EACnB,WAAW;AAAA,EACX,OAAO;AAAA,KACJ;AAAA,MACC;AACJ,QAAM,eAAe,OAAO;AAC5B,SACE,qCAAC,oBAAD;AAAA,IACE;AAAA,IACA,cAAc,MAAM,aAAa;AAAA,IACjC,aAAa;AAAA,MACX,KAAK;AAAA;AAAA,IAEP,aAAY;AAAA,KAEZ,qCAAC,kBAAD;AAAA,OACM;AAAA,OACA;AAAA,IACJ,YAAY,EAAE,WAAW,WAAW;AAAA,IACpC,UAAU,UAAU,UAAU;AAAA,KAE7B,wBAAwB;AAAA;AAMjC,MAAM,eAAe;AAAA,EACnB,gBAAgB,UAAU,OAAO,YAC/B;AAAA,EAEF,WAAW,UAAU,KAClB,YAAY,mCACZ,aAAa;AAAA,EAChB,WAAW,UAAU,MAAM,CAAC,SAAS,SAClC,YAAY,2CACZ,aAAa;AAAA,EAChB,MAAM,UAAU,MAAM,CAAC,UAAU,YAC9B,YAAY,gBACZ,aAAa;AAAA,EAChB,kBAAkB,UAAU,KACzB,YAAY,uDACZ,aAAa;AAAA,EAChB,UAAU,UAAU,UAAU;AAAA,IAC5B,UAAU;AAAA,IACV,UAAU;AAAA,IACV,UAAU;AAAA,KACT,YAAY,iBAAiB;AAAA,EAChC,UAAU,UAAU,OAAO,YACzB;AAAA;AAIJ,UAAU,YAAY;AAEtB,MAAM,oBAAoB,SAAS;AACnC,kBAAkB,YAAY;AAU9B,IAAO,oBAAQ;",
|
|
6
|
-
"names": []
|
|
7
|
-
}
|
|
@@ -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", "import { aggregatedClasses } from '@elliemae/ds-classnames';\n\nconst blockName = 'toolbar';\n\nconst ToolbarDivider = aggregatedClasses('div')(blockName, 'divider');\n\nToolbarDivider.displayName = 'ToolbarDivider';\n\nexport default ToolbarDivider;\n"],
|
|
5
|
-
"mappings": "AAAA;ACAA;AAEA,MAAM,YAAY;AAElB,MAAM,iBAAiB,kBAAkB,OAAO,WAAW;AAE3D,eAAe,cAAc;AAE7B,IAAO,yBAAQ;",
|
|
6
|
-
"names": []
|
|
7
|
-
}
|
|
@@ -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", "import React from 'react';\nimport PropTypes from 'prop-types';\nimport { aggregatedClasses } from '@elliemae/ds-classnames';\nimport decorateToolbarChildren from './decorateToolbarChildren';\n\nconst blockName = 'toolbar-group';\n\nconst ToolbarGroupContainer = aggregatedClasses('div')(\n blockName,\n null,\n ({ space }) => ({\n [`space-${space}`]: !!space,\n }),\n);\n\nconst ToolbarGroup = ({ children, size, space = 0 }) => (\n <ToolbarGroupContainer classProps={{ space }}>\n {decorateToolbarChildren(children, { size })}\n </ToolbarGroupContainer>\n);\n\nToolbarGroup.propTypes = {\n children: PropTypes.any,\n size: PropTypes.number,\n space: PropTypes.number,\n};\n\nexport default ToolbarGroup;\n"],
|
|
5
|
-
"mappings": "AAAA;ACAA;AACA;AACA;AACA;AAEA,MAAM,YAAY;AAElB,MAAM,wBAAwB,kBAAkB,OAC9C,WACA,MACA,CAAC,EAAE,YAAa;AAAA,GACb,SAAS,UAAU,CAAC,CAAC;AAAA;AAI1B,MAAM,eAAe,CAAC,EAAE,UAAU,MAAM,QAAQ,QAC9C,qCAAC,uBAAD;AAAA,EAAuB,YAAY,EAAE;AAAA,GAClC,wBAAwB,UAAU,EAAE;AAIzC,aAAa,YAAY;AAAA,EACvB,UAAU,UAAU;AAAA,EACpB,MAAM,UAAU;AAAA,EAChB,OAAO,UAAU;AAAA;AAGnB,IAAO,uBAAQ;",
|
|
6
|
-
"names": []
|
|
7
|
-
}
|
|
@@ -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", "import React, { useState } from 'react';\nimport PropTypes from 'prop-types';\nimport { useFocusGroupWithState } from '@elliemae/ds-shared/FocusGroup';\nimport DSButton from '@elliemae/ds-button';\nimport { PopperPositions as Position } from '@elliemae/ds-popper';\n\nconst ToolbarItem = ({ icon, labelText, menu = undefined, ...otherProps }) => {\n const [ref, setRef] = useState(null);\n\n useFocusGroupWithState(ref);\n const btn = (\n <DSButton {...otherProps} buttonType=\"text\" icon={icon} innerRef={(r) => setRef(r)} labelText={labelText} />\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;ACAA;AACA;AACA;AACA;AACA;AAEA,MAAM,cAAc,CAAC,EAAE,MAAM,WAAW,OAAO,WAAc,iBAAiB;AAC5E,QAAM,CAAC,KAAK,UAAU,SAAS;AAE/B,yBAAuB;AACvB,QAAM,MACJ,qCAAC,UAAD;AAAA,OAAc;AAAA,IAAY,YAAW;AAAA,IAAO;AAAA,IAAY,UAAU,CAAC,MAAM,OAAO;AAAA,IAAI;AAAA;AAEtF,MAAI,MAAM;AACR,WAAO,OAAM,aAAa,MAAM;AAAA,SAC3B,KAAK;AAAA,MACR,WAAW,SAAS;AAAA,MACpB,kBAAkB;AAAA;AAAA;AAGtB,SAAO;AAAA;AAGT,YAAY,cAAc;AAE1B,YAAY,YAAY;AAAA,EACtB,MAAM,UAAU;AAAA,EAChB,WAAW,UAAU;AAAA;AAGvB,IAAO,sBAAQ;",
|
|
6
|
-
"names": []
|
|
7
|
-
}
|
|
@@ -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", "import React, { cloneElement } from 'react';\n\nexport default (children, extraProps = {}) =>\n React.Children.map(\n children,\n component =>\n component\n ? cloneElement(component, {\n ...extraProps,\n ...component.props,\n className: `${component.props.className} toolbar-item`,\n })\n : component,\n null,\n );\n"],
|
|
5
|
-
"mappings": "AAAA;ACAA;AAEA,IAAO,kCAAQ,CAAC,UAAU,aAAa,OACrC,OAAM,SAAS,IACb,UACA,eACE,YACI,aAAa,WAAW;AAAA,KACnB;AAAA,KACA,UAAU;AAAA,EACb,WAAW,GAAG,UAAU,MAAM;AAAA,KAEhC,WACN;",
|
|
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';\n\nexport { default } from './DSToolbar';\n"],
|
|
5
|
-
"mappings": "AAAA;ACCA;AAEA;",
|
|
6
|
-
"names": []
|
|
7
|
-
}
|
package/esm/index.js.map
DELETED
|
@@ -1,7 +0,0 @@
|
|
|
1
|
-
{
|
|
2
|
-
"version": 3,
|
|
3
|
-
"sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/index.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "export * from './deprecated';\nexport { default } from './deprecated';\nexport * from './DSToolbarV2';\nexport * from './DSToolbarItemV2';\nexport * from './DSToolbarSeparatorV2';\n"],
|
|
5
|
-
"mappings": "AAAA;ACAA;AACA;AACA;AACA;AACA;",
|
|
6
|
-
"names": []
|
|
7
|
-
}
|
package/esm/props.js.map
DELETED
|
@@ -1,7 +0,0 @@
|
|
|
1
|
-
{
|
|
2
|
-
"version": 3,
|
|
3
|
-
"sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/props.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { PropTypes } from 'react-desc';\n\nexport const DSToolbarV2Schema = {\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"],
|
|
5
|
-
"mappings": "AAAA;ACAA;AAEO,MAAM,oBAAoB;AAAA,EAC/B,WAAW,UAAU,MAAM,CAAC,SAAS,SAClC,YAAY,8CACZ,aAAa;AAAA,EAChB,WAAW,UAAU,KAAK,YAAY,gDAAgD,aAAa;AAAA,EACnG,SAAS,UAAU,KAAK,YAAY,uDAAuD,aAAa;AAAA,EACxG,UAAU,UAAU,UAAU,CAAC,UAAU,MAAM,UAAU,SAAS,YAAY;AAAA;",
|
|
6
|
-
"names": []
|
|
7
|
-
}
|
package/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 'styled-components';\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' : '40px')};\n max-height: ${(props) => props.theme.space.xxl};\n\n padding: 0 ${(props) => props.theme.space.xxs};\n\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;ACAA;AACA;AAEO,MAAM,uBAAuB,OAAO;AAAA,sBACrB,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ;AAAA;AAAA,gBAE5C,CAAC,UAAW,MAAM,UAAU,SAAS;AAAA,gBACrC,CAAC,UAAU,MAAM,MAAM,MAAM;AAAA;AAAA,eAE9B,CAAC,UAAU,MAAM,MAAM,MAAM;AAAA;AAAA,gBAE5B,CAAC,UAAW,CAAC,MAAM,YAAY,SAAS;AAAA;AAGjD,MAAM,oBAAoB,OAAO;AAEjC,MAAM,kBAAkB,OAAO;AAAA;AAAA;AAAA,sBAGhB,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ;AAAA;",
|
|
6
|
-
"names": []
|
|
7
|
-
}
|
|
@@ -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';\n\nexport const useToolbarItemHandlers = (\n toolbarItemId: string,\n): {\n onKeyDown: React.KeyboardEventHandler;\n} => {\n const { toolbarUid, itemReferences } = useContext(DSToolbarV2Context);\n\n const onKeyDown: React.KeyboardEventHandler = useCallback(\n (e) => {\n const toolbarItems = [...document.querySelectorAll(`#${toolbarUid} .ds-toolbar-item`)];\n let nextToolbarItemIndex = -1;\n\n if (['ArrowLeft', 'ArrowRight'].includes(e.code)) {\n const toolbarItemIndex = toolbarItems.findIndex((domElem) => domElem.id === toolbarItemId);\n nextToolbarItemIndex = toolbarItemIndex + (e.code === 'ArrowLeft' ? -1 : 1);\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 };\n};\n"],
|
|
5
|
-
"mappings": "AAAA;ACAA;AACA;AAEO,MAAM,yBAAyB,CACpC,kBAGG;AACH,QAAM,EAAE,YAAY,mBAAmB,WAAW;AAElD,QAAM,YAAwC,YAC5C,CAAC,MAAM;AACL,UAAM,eAAe,CAAC,GAAG,SAAS,iBAAiB,IAAI;AACvD,QAAI,uBAAuB;AAE3B,QAAI,CAAC,aAAa,cAAc,SAAS,EAAE,OAAO;AAChD,YAAM,mBAAmB,aAAa,UAAU,CAAC,YAAY,QAAQ,OAAO;AAC5E,6BAAuB,mBAAoB,GAAE,SAAS,cAAc,KAAK;AAAA,eAChE,EAAE,SAAS,QAAQ;AAC5B,6BAAuB;AAAA,eACd,EAAE,SAAS,OAAO;AAC3B,6BAAuB,aAAa,SAAS;AAAA;AAG/C,QAAI,wBAAwB,KAAK,uBAAuB,aAAa,QAAQ;AAC3E,QAAE;AACF,QAAE;AACF,YAAM,MAAM,eAAe,aAAa,sBAAsB;AAC9D,UAAI,IAAI;AAAS,YAAI,QAAQ;AAAA;AAAA,KAGjC,CAAC,YAAY,eAAe;AAG9B,SAAO,EAAE;AAAA;",
|
|
6
|
-
"names": []
|
|
7
|
-
}
|