@elliemae/ds-toolbar 3.1.0-next.1 → 3.1.0-next.10
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/DSToolbarV2.js +2 -2
- package/dist/cjs/DSToolbarV2.js.map +2 -2
- package/dist/cjs/deprecated/DSToolbar.js +8 -9
- package/dist/cjs/deprecated/DSToolbar.js.map +2 -2
- package/dist/cjs/props.js +5 -5
- package/dist/cjs/props.js.map +2 -2
- package/dist/cjs/styled.js +4 -4
- package/dist/cjs/styled.js.map +2 -2
- package/dist/esm/DSToolbarV2.js +1 -1
- package/dist/esm/DSToolbarV2.js.map +1 -1
- package/dist/esm/deprecated/DSToolbar.js +1 -2
- package/dist/esm/deprecated/DSToolbar.js.map +2 -2
- package/dist/esm/props.js +1 -1
- package/dist/esm/props.js.map +1 -1
- package/dist/esm/styled.js +1 -1
- package/dist/esm/styled.js.map +1 -1
- package/package.json +18 -18
package/dist/cjs/DSToolbarV2.js
CHANGED
|
@@ -44,7 +44,7 @@ module.exports = __toCommonJS(DSToolbarV2_exports);
|
|
|
44
44
|
var React = __toESM(require("react"));
|
|
45
45
|
var import_react = __toESM(require("react"));
|
|
46
46
|
var import_ds_utilities = require("@elliemae/ds-utilities");
|
|
47
|
-
var
|
|
47
|
+
var import_ds_utilities2 = require("@elliemae/ds-utilities");
|
|
48
48
|
var import_uid = require("uid");
|
|
49
49
|
var import_DSToolbarV2Context = require("./DSToolbarV2Context");
|
|
50
50
|
var import_props = require("./props");
|
|
@@ -79,6 +79,6 @@ DSToolbarV2.defaultProps = {
|
|
|
79
79
|
compact: false
|
|
80
80
|
};
|
|
81
81
|
DSToolbarV2.displayName = "DSToolbarV2";
|
|
82
|
-
const DSToolbarV2WithSchema = (0,
|
|
82
|
+
const DSToolbarV2WithSchema = (0, import_ds_utilities2.describe)(DSToolbarV2).description("Toolbar");
|
|
83
83
|
DSToolbarV2WithSchema.propTypes = import_props.DSToolbarV2Schema;
|
|
84
84
|
//# 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 { useValidateTypescriptPropTypes } from '@elliemae/ds-utilities';\nimport { describe } from '
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADCvB,mBAAsD;AACtD,0BAA+C;AAC/C,
|
|
4
|
+
"sourcesContent": ["/* eslint-disable react/prop-types */\nimport React, { useCallback, useMemo, useState } from 'react';\nimport { useValidateTypescriptPropTypes } from '@elliemae/ds-utilities';\nimport { describe } from '@elliemae/ds-utilities';\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};\nDSToolbarV2.displayName = 'DSToolbarV2';\nconst DSToolbarV2WithSchema = describe(DSToolbarV2).description('Toolbar');\nDSToolbarV2WithSchema.propTypes = DSToolbarV2Schema;\n\nexport { DSToolbarV2, DSToolbarV2WithSchema };\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADCvB,mBAAsD;AACtD,0BAA+C;AAC/C,2BAAyB;AACzB,iBAAoB;AACpB,gCAAmC;AACnC,mBAAkC;AAClC,oBAAqC;AAQrC,MAAM,cAAiD,CAAC,UAAU;AAChE,QAAM,EAAE,WAAW,WAAW,SAAS,UAAU,aAAa;AAE9D,0DAA+B,OAAO,8BAAiB;AAEvD,QAAM,aAAa,0BAAQ,MAAM,cAAc,oBAAI,KAAK,CAAC,CAAC;AAE1D,QAAM,CAAC,gBAAgB,qBAAqB,2BAAS,CAAC,CAAC;AAEvD,QAAM,oBAAoB,8BACxB,CAAC,QAAgB,QAA6C;AAC5D,sBAAkB,CAAC,uBAAwB,iCAAK,qBAAL,GAA0B,SAAS,IAAI,EAAE;AAAA,EACtF,GACA,CAAC,iBAAiB,CACpB;AAEA,SACE,mDAAC,6CAAmB,UAAnB;AAAA,IAA4B,OAAO,EAAE,YAAY,mBAAmB,eAAe;AAAA,KAClF,mDAAC;AAAA,IACC,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,MAAM,CAAC;AAAA,IACjD,QAAO;AAAA,IACP;AAAA,IACA,KAAK;AAAA,KAEJ,QACH,CACF;AAEJ;AAEA,YAAY,YAAY;AACxB,YAAY,eAAe;AAAA,EACzB,WAAW;AAAA,EACX,WAAW;AAAA,EACX,SAAS;AACX;AACA,YAAY,cAAc;AAC1B,MAAM,wBAAwB,mCAAS,WAAW,EAAE,YAAY,SAAS;AACzE,sBAAsB,YAAY;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -59,7 +59,6 @@ __export(DSToolbar_exports, {
|
|
|
59
59
|
module.exports = __toCommonJS(DSToolbar_exports);
|
|
60
60
|
var React = __toESM(require("react"));
|
|
61
61
|
var import_react = __toESM(require("react"));
|
|
62
|
-
var import_react_desc = require("react-desc");
|
|
63
62
|
var import_ds_classnames = require("@elliemae/ds-classnames");
|
|
64
63
|
var import_ds_shared = require("@elliemae/ds-shared");
|
|
65
64
|
var import_ds_utilities = require("@elliemae/ds-utilities");
|
|
@@ -105,17 +104,17 @@ const DSToolbar = (_a) => {
|
|
|
105
104
|
}), (0, import_decorateToolbarChildren.default)(children)));
|
|
106
105
|
};
|
|
107
106
|
const toolbarProps = {
|
|
108
|
-
containerProps:
|
|
109
|
-
withDepth:
|
|
110
|
-
alignment:
|
|
111
|
-
size:
|
|
112
|
-
autoFocusOnMount:
|
|
113
|
-
children:
|
|
114
|
-
innerRef:
|
|
107
|
+
containerProps: import_ds_utilities.PropTypes.object.description("Set of Properties attached to the main container"),
|
|
108
|
+
withDepth: import_ds_utilities.PropTypes.bool.description("Shows a shadow rear the toolbar").defaultValue(true),
|
|
109
|
+
alignment: import_ds_utilities.PropTypes.oneOf(["right", "left"]).description("Aligns the toolbar to the left or right").defaultValue("right"),
|
|
110
|
+
size: import_ds_utilities.PropTypes.oneOf(["normal", "compact"]).description("Toolbar size").defaultValue("normal"),
|
|
111
|
+
autoFocusOnMount: import_ds_utilities.PropTypes.bool.description("Wheter to focus the component when it mounts or not").defaultValue(true),
|
|
112
|
+
children: import_ds_utilities.PropTypes.oneOfType([import_ds_utilities.PropTypes.array, import_ds_utilities.PropTypes.func, import_ds_utilities.PropTypes.node]).description("Toolbar items").isRequired,
|
|
113
|
+
innerRef: import_ds_utilities.PropTypes.object.description("Ref to the Toolbar container element")
|
|
115
114
|
};
|
|
116
115
|
DSToolbar.propTypes = toolbarProps;
|
|
117
116
|
DSToolbar.displayName = "DSToolbar";
|
|
118
|
-
const ToolbarWithSchema = (0,
|
|
117
|
+
const ToolbarWithSchema = (0, import_ds_utilities.describe)(DSToolbar);
|
|
119
118
|
ToolbarWithSchema.propTypes = toolbarProps;
|
|
120
119
|
var DSToolbar_default = DSToolbar;
|
|
121
120
|
//# 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 {
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAA8B;AAC9B,
|
|
4
|
+
"sourcesContent": ["import React, { useRef } from 'react';\nimport { aggregatedClasses } from '@elliemae/ds-classnames';\nimport { FocusGroupProvider } from '@elliemae/ds-shared';\nimport { describe, PropTypes, 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')(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(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('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;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAA8B;AAC9B,2BAAkC;AAClC,uBAAmC;AACnC,0BAA+C;AAC/C,qCAAoC;AACpC,yBAAiB;AACjB,0BAAyB;AACzB,4BAAoB;AAEpB,MAAM,YAAY;AAElB,MAAM,mBAAmB,4CAAkB,KAAK,EAAE,WAAW,MAAM,CAAC,EAAE,WAAW,WAAW,WAAY;AAAA,EACtG,iBAAiB,CAAC;AAAA,GACjB,YAAY,CAAC,CAAC;AAAA,GACd,OAAO;AACV,EAAE;AAEF,MAAM,YAAY,CAAC,OASb;AATa,eACjB;AAAA,qBAAiB,CAAC;AAAA,IAClB;AAAA,IACA,YAAY;AAAA,IACZ,YAAY;AAAA,IACZ,mBAAmB;AAAA,IACnB,WAAW,CAAC;AAAA,IACZ,OAAO;AAAA,MAPU,IAQd,uBARc,IAQd;AAAA,IAPH;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA;AAGA,QAAM,eAAe,yBAAO,IAAI;AAChC,SACE,mDAAC;AAAA,IACC;AAAA,IACA,cAAc,MAAM,aAAa;AAAA,IACjC,aAAa;AAAA,MACX,KAAK;AAAA,IACP;AAAA,IACA,aAAY;AAAA,KAEZ,mDAAC,kEACK,iBACA,aAFL;AAAA,IAGC,YAAY,EAAE,WAAW,WAAW,KAAK;AAAA,IACzC,UAAU,mCAAU,UAAU,YAAY;AAAA,MAEzC,4CAAwB,QAAQ,CACnC,CACF;AAEJ;AAEA,MAAM,eAAe;AAAA,EACnB,gBAAgB,8BAAU,OAAO,YAAY,kDAAkD;AAAA,EAC/F,WAAW,8BAAU,KAAK,YAAY,iCAAiC,EAAE,aAAa,IAAI;AAAA,EAC1F,WAAW,8BAAU,MAAM,CAAC,SAAS,MAAM,CAAC,EACzC,YAAY,yCAAyC,EACrD,aAAa,OAAO;AAAA,EACvB,MAAM,8BAAU,MAAM,CAAC,UAAU,SAAS,CAAC,EAAE,YAAY,cAAc,EAAE,aAAa,QAAQ;AAAA,EAC9F,kBAAkB,8BAAU,KACzB,YAAY,qDAAqD,EACjE,aAAa,IAAI;AAAA,EACpB,UAAU,8BAAU,UAAU,CAAC,8BAAU,OAAO,8BAAU,MAAM,8BAAU,IAAI,CAAC,EAAE,YAAY,eAAe,EACzG;AAAA,EACH,UAAU,8BAAU,OAAO,YAAY,sCAAsC;AAC/E;AAEA,UAAU,YAAY;AACtB,UAAU,cAAc;AACxB,MAAM,oBAAoB,kCAAS,SAAS;AAC5C,kBAAkB,YAAY;AAI9B,IAAO,oBAAQ;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/dist/cjs/props.js
CHANGED
|
@@ -24,11 +24,11 @@ __export(props_exports, {
|
|
|
24
24
|
});
|
|
25
25
|
module.exports = __toCommonJS(props_exports);
|
|
26
26
|
var React = __toESM(require("react"));
|
|
27
|
-
var
|
|
27
|
+
var import_ds_utilities = require("@elliemae/ds-utilities");
|
|
28
28
|
const DSToolbarV2Schema = {
|
|
29
|
-
alignment:
|
|
30
|
-
withDepth:
|
|
31
|
-
compact:
|
|
32
|
-
innerRef:
|
|
29
|
+
alignment: import_ds_utilities.PropTypes.oneOf(["right", "left"]).description("Whether to align the content left or right").defaultValue("right"),
|
|
30
|
+
withDepth: import_ds_utilities.PropTypes.bool.description("Whether to add a box-shadow to the container").defaultValue(true),
|
|
31
|
+
compact: import_ds_utilities.PropTypes.bool.description("Whether you want the compact version of the toolbar").defaultValue(false),
|
|
32
|
+
innerRef: import_ds_utilities.PropTypes.oneOfType([import_ds_utilities.PropTypes.func, import_ds_utilities.PropTypes.object]).description("Reference to attach to the wrapper")
|
|
33
33
|
};
|
|
34
34
|
//# sourceMappingURL=props.js.map
|
package/dist/cjs/props.js.map
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/props.tsx", "../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["import { PropTypes } from '
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,
|
|
4
|
+
"sourcesContent": ["import { PropTypes } from '@elliemae/ds-utilities';\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;AAAA;ACAA,YAAuB;ADAvB,0BAA0B;AAEnB,MAAM,oBAAoB;AAAA,EAC/B,WAAW,8BAAU,MAAM,CAAC,SAAS,MAAM,CAAC,EACzC,YAAY,4CAA4C,EACxD,aAAa,OAAO;AAAA,EACvB,WAAW,8BAAU,KAAK,YAAY,8CAA8C,EAAE,aAAa,IAAI;AAAA,EACvG,SAAS,8BAAU,KAAK,YAAY,qDAAqD,EAAE,aAAa,KAAK;AAAA,EAC7G,UAAU,8BAAU,UAAU,CAAC,8BAAU,MAAM,8BAAU,MAAM,CAAC,EAAE,YAAY,oCAAoC;AACpH;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/dist/cjs/styled.js
CHANGED
|
@@ -26,9 +26,9 @@ __export(styled_exports, {
|
|
|
26
26
|
});
|
|
27
27
|
module.exports = __toCommonJS(styled_exports);
|
|
28
28
|
var React = __toESM(require("react"));
|
|
29
|
-
var
|
|
29
|
+
var import_ds_system = require("@elliemae/ds-system");
|
|
30
30
|
var import_ds_grid = __toESM(require("@elliemae/ds-grid"));
|
|
31
|
-
const StyledToolbarWrapper = (0,
|
|
31
|
+
const StyledToolbarWrapper = (0, import_ds_system.styled)(import_ds_grid.default)`
|
|
32
32
|
background-color: ${(props) => props.theme.colors.neutral["000"]};
|
|
33
33
|
|
|
34
34
|
min-height: ${(props) => props.compact ? "28px" : "40px"};
|
|
@@ -38,8 +38,8 @@ const StyledToolbarWrapper = (0, import_styled_components.default)(import_ds_gri
|
|
|
38
38
|
|
|
39
39
|
box-shadow: ${(props) => !props.withDepth ? "none" : "0 1px 5px 0 rgb(0 0 0 / 13%), 0 2px 4px 0 rgb(0 0 0 / 20%)"};
|
|
40
40
|
`;
|
|
41
|
-
const StyledToolbarItem = (0,
|
|
42
|
-
const StyledSeparator = (0,
|
|
41
|
+
const StyledToolbarItem = (0, import_ds_system.styled)(import_ds_grid.default)``;
|
|
42
|
+
const StyledSeparator = (0, import_ds_system.styled)(import_ds_grid.default)`
|
|
43
43
|
height: 30px;
|
|
44
44
|
width: 1px;
|
|
45
45
|
background-color: ${(props) => props.theme.colors.neutral[200]};
|
package/dist/cjs/styled.js.map
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/styled.tsx", "../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["import styled from '
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB
|
|
4
|
+
"sourcesContent": ["import { styled } from '@elliemae/ds-system';\nimport Grid from '@elliemae/ds-grid';\n\nexport const StyledToolbarWrapper = styled(Grid)`\n background-color: ${(props) => props.theme.colors.neutral['000']};\n\n min-height: ${(props) => (props.compact ? '28px' : '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;AAAA;ACAA,YAAuB;ADAvB,uBAAuB;AACvB,qBAAiB;AAEV,MAAM,uBAAuB,6BAAO,sBAAI;AAAA,sBACzB,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ;AAAA;AAAA,gBAE5C,CAAC,UAAW,MAAM,UAAU,SAAS;AAAA,gBACrC,CAAC,UAAU,MAAM,MAAM,MAAM;AAAA;AAAA,eAE9B,CAAC,UAAU,MAAM,MAAM,MAAM;AAAA;AAAA,gBAE5B,CAAC,UAAW,CAAC,MAAM,YAAY,SAAS;AAAA;AAGjD,MAAM,oBAAoB,6BAAO,sBAAI;AAErC,MAAM,kBAAkB,6BAAO,sBAAI;AAAA;AAAA;AAAA,sBAGpB,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ;AAAA;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/dist/esm/DSToolbarV2.js
CHANGED
|
@@ -20,7 +20,7 @@ var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
|
|
|
20
20
|
import * as React from "react";
|
|
21
21
|
import React2, { useCallback, useMemo, useState } from "react";
|
|
22
22
|
import { useValidateTypescriptPropTypes } from "@elliemae/ds-utilities";
|
|
23
|
-
import { describe } from "
|
|
23
|
+
import { describe } from "@elliemae/ds-utilities";
|
|
24
24
|
import { uid } from "uid";
|
|
25
25
|
import { DSToolbarV2Context } from "./DSToolbarV2Context";
|
|
26
26
|
import { DSToolbarV2Schema } from "./props";
|
|
@@ -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 { useValidateTypescriptPropTypes } from '@elliemae/ds-utilities';\nimport { describe } from '
|
|
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-utilities';\nimport { describe } from '@elliemae/ds-utilities';\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};\nDSToolbarV2.displayName = 'DSToolbarV2';\nconst DSToolbarV2WithSchema = describe(DSToolbarV2).description('Toolbar');\nDSToolbarV2WithSchema.propTypes = DSToolbarV2Schema;\n\nexport { DSToolbarV2, DSToolbarV2WithSchema };\n"],
|
|
5
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,iBAAiB;AAEvD,QAAM,aAAa,QAAQ,MAAM,cAAc,IAAI,KAAK,CAAC,CAAC;AAE1D,QAAM,CAAC,gBAAgB,qBAAqB,SAAS,CAAC,CAAC;AAEvD,QAAM,oBAAoB,YACxB,CAAC,QAAgB,QAA6C;AAC5D,sBAAkB,CAAC,uBAAwB,iCAAK,qBAAL,GAA0B,SAAS,IAAI,EAAE;AAAA,EACtF,GACA,CAAC,iBAAiB,CACpB;AAEA,SACE,qCAAC,mBAAmB,UAAnB;AAAA,IAA4B,OAAO,EAAE,YAAY,mBAAmB,eAAe;AAAA,KAClF,qCAAC;AAAA,IACC,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,MAAM,CAAC;AAAA,IACjD,QAAO;AAAA,IACP;AAAA,IACA,KAAK;AAAA,KAEJ,QACH,CACF;AAEJ;AAEA,YAAY,YAAY;AACxB,YAAY,eAAe;AAAA,EACzB,WAAW;AAAA,EACX,WAAW;AAAA,EACX,SAAS;AACX;AACA,YAAY,cAAc;AAC1B,MAAM,wBAAwB,SAAS,WAAW,EAAE,YAAY,SAAS;AACzE,sBAAsB,YAAY;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -31,10 +31,9 @@ var __objRest = (source, exclude) => {
|
|
|
31
31
|
};
|
|
32
32
|
import * as React from "react";
|
|
33
33
|
import React2, { useRef } from "react";
|
|
34
|
-
import { describe, PropTypes } from "react-desc";
|
|
35
34
|
import { aggregatedClasses } from "@elliemae/ds-classnames";
|
|
36
35
|
import { FocusGroupProvider } from "@elliemae/ds-shared";
|
|
37
|
-
import { mergeRefs } from "@elliemae/ds-utilities";
|
|
36
|
+
import { describe, PropTypes, mergeRefs } from "@elliemae/ds-utilities";
|
|
38
37
|
import decorateToolbarChildren from "./decorateToolbarChildren";
|
|
39
38
|
import Item from "./ToolbarItem";
|
|
40
39
|
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 {
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;ACAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useRef } from 'react';\nimport { aggregatedClasses } from '@elliemae/ds-classnames';\nimport { FocusGroupProvider } from '@elliemae/ds-shared';\nimport { describe, PropTypes, 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')(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(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('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;ACAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA,MAAM,YAAY;AAElB,MAAM,mBAAmB,kBAAkB,KAAK,EAAE,WAAW,MAAM,CAAC,EAAE,WAAW,WAAW,WAAY;AAAA,EACtG,iBAAiB,CAAC;AAAA,GACjB,YAAY,CAAC,CAAC;AAAA,GACd,OAAO;AACV,EAAE;AAEF,MAAM,YAAY,CAAC,OASb;AATa,eACjB;AAAA,qBAAiB,CAAC;AAAA,IAClB;AAAA,IACA,YAAY;AAAA,IACZ,YAAY;AAAA,IACZ,mBAAmB;AAAA,IACnB,WAAW,CAAC;AAAA,IACZ,OAAO;AAAA,MAPU,IAQd,uBARc,IAQd;AAAA,IAPH;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA;AAGA,QAAM,eAAe,OAAO,IAAI;AAChC,SACE,qCAAC;AAAA,IACC;AAAA,IACA,cAAc,MAAM,aAAa;AAAA,IACjC,aAAa;AAAA,MACX,KAAK;AAAA,IACP;AAAA,IACA,aAAY;AAAA,KAEZ,qCAAC,kEACK,iBACA,aAFL;AAAA,IAGC,YAAY,EAAE,WAAW,WAAW,KAAK;AAAA,IACzC,UAAU,UAAU,UAAU,YAAY;AAAA,MAEzC,wBAAwB,QAAQ,CACnC,CACF;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
|
}
|
package/dist/esm/props.js
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import * as React from "react";
|
|
2
|
-
import { PropTypes } from "
|
|
2
|
+
import { PropTypes } from "@elliemae/ds-utilities";
|
|
3
3
|
const DSToolbarV2Schema = {
|
|
4
4
|
alignment: PropTypes.oneOf(["right", "left"]).description("Whether to align the content left or right").defaultValue("right"),
|
|
5
5
|
withDepth: PropTypes.bool.description("Whether to add a box-shadow to the container").defaultValue(true),
|
package/dist/esm/props.js.map
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
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 '
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { PropTypes } from '@elliemae/ds-utilities';\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
5
|
"mappings": "AAAA;ACAA;AAEO,MAAM,oBAAoB;AAAA,EAC/B,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;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/dist/esm/styled.js
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import * as React from "react";
|
|
2
|
-
import styled from "
|
|
2
|
+
import { styled } from "@elliemae/ds-system";
|
|
3
3
|
import Grid from "@elliemae/ds-grid";
|
|
4
4
|
const StyledToolbarWrapper = styled(Grid)`
|
|
5
5
|
background-color: ${(props) => props.theme.colors.neutral["000"]};
|
package/dist/esm/styled.js.map
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
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 '
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { styled } from '@elliemae/ds-system';\nimport Grid from '@elliemae/ds-grid';\n\nexport const StyledToolbarWrapper = styled(Grid)`\n background-color: ${(props) => props.theme.colors.neutral['000']};\n\n min-height: ${(props) => (props.compact ? '28px' : '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
5
|
"mappings": "AAAA;ACAA;AACA;AAEO,MAAM,uBAAuB,OAAO,IAAI;AAAA,sBACzB,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ;AAAA;AAAA,gBAE5C,CAAC,UAAW,MAAM,UAAU,SAAS;AAAA,gBACrC,CAAC,UAAU,MAAM,MAAM,MAAM;AAAA;AAAA,eAE9B,CAAC,UAAU,MAAM,MAAM,MAAM;AAAA;AAAA,gBAE5B,CAAC,UAAW,CAAC,MAAM,YAAY,SAAS;AAAA;AAGjD,MAAM,oBAAoB,OAAO,IAAI;AAErC,MAAM,kBAAkB,OAAO,IAAI;AAAA;AAAA;AAAA,sBAGpB,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ;AAAA;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@elliemae/ds-toolbar",
|
|
3
|
-
"version": "3.1.0-next.
|
|
3
|
+
"version": "3.1.0-next.10",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"description": "ICE MT - Dimsum - Toolbar",
|
|
6
6
|
"files": [
|
|
@@ -86,24 +86,16 @@
|
|
|
86
86
|
"reportFile": "tests.xml",
|
|
87
87
|
"indent": 4
|
|
88
88
|
},
|
|
89
|
-
"scripts": {
|
|
90
|
-
"dev": "cross-env NODE_ENV=development node ../../scripts/build/build.mjs --watch",
|
|
91
|
-
"test": "node ../../scripts/testing/test.mjs",
|
|
92
|
-
"lint": "node ../../scripts/lint.mjs",
|
|
93
|
-
"dts": "node ../../scripts/dts.mjs",
|
|
94
|
-
"build": "cross-env NODE_ENV=production node ../../scripts/build/build.mjs"
|
|
95
|
-
},
|
|
96
89
|
"dependencies": {
|
|
97
|
-
"@elliemae/ds-button": "3.1.0-next.
|
|
98
|
-
"@elliemae/ds-classnames": "3.1.0-next.
|
|
99
|
-
"@elliemae/ds-grid": "3.1.0-next.
|
|
100
|
-
"@elliemae/ds-icons": "3.1.0-next.
|
|
101
|
-
"@elliemae/ds-popper": "3.1.0-next.
|
|
102
|
-
"@elliemae/ds-shared": "3.1.0-next.
|
|
103
|
-
"@elliemae/ds-system": "3.1.0-next.
|
|
104
|
-
"@elliemae/ds-utilities": "3.1.0-next.
|
|
90
|
+
"@elliemae/ds-button": "3.1.0-next.10",
|
|
91
|
+
"@elliemae/ds-classnames": "3.1.0-next.10",
|
|
92
|
+
"@elliemae/ds-grid": "3.1.0-next.10",
|
|
93
|
+
"@elliemae/ds-icons": "3.1.0-next.10",
|
|
94
|
+
"@elliemae/ds-popper": "3.1.0-next.10",
|
|
95
|
+
"@elliemae/ds-shared": "3.1.0-next.10",
|
|
96
|
+
"@elliemae/ds-system": "3.1.0-next.10",
|
|
97
|
+
"@elliemae/ds-utilities": "3.1.0-next.10",
|
|
105
98
|
"prop-types": "~15.8.1",
|
|
106
|
-
"react-desc": "~4.1.3",
|
|
107
99
|
"uid": "2.0.0"
|
|
108
100
|
},
|
|
109
101
|
"devDependencies": {
|
|
@@ -121,5 +113,13 @@
|
|
|
121
113
|
"publishConfig": {
|
|
122
114
|
"access": "public",
|
|
123
115
|
"typeSafety": false
|
|
116
|
+
},
|
|
117
|
+
"scripts": {
|
|
118
|
+
"dev": "cross-env NODE_ENV=development node ../../scripts/build/build.mjs --watch",
|
|
119
|
+
"test": "node ../../scripts/testing/test.mjs",
|
|
120
|
+
"lint": "node ../../scripts/lint.mjs",
|
|
121
|
+
"dts": "node ../../scripts/dts.mjs",
|
|
122
|
+
"build": "cross-env NODE_ENV=production node ../../scripts/build/build.mjs",
|
|
123
|
+
"checkDeps": "npx -yes ../ds-codemods check-missing-packages --projectFolderPath=\"./\" --ignorePackagesGlobPattern=\"\" --ignoreFilesGlobPattern=\"**/test-ables/*,**/tests/*\""
|
|
124
124
|
}
|
|
125
|
-
}
|
|
125
|
+
}
|