@elliemae/ds-mini-toolbar 2.2.1 → 2.3.0-alpha.4
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/Components/MiniToolbar.js +60 -49
- package/cjs/Components/MiniToolbar.js.map +7 -0
- package/cjs/Components/ToolbarShortcut.js +60 -60
- package/cjs/Components/ToolbarShortcut.js.map +7 -0
- package/cjs/Components/outOfTheBox/Button.js +39 -27
- package/cjs/Components/outOfTheBox/Button.js.map +7 -0
- package/cjs/Components/outOfTheBox/ComboBox.js +39 -25
- package/cjs/Components/outOfTheBox/ComboBox.js.map +7 -0
- package/cjs/Components/outOfTheBox/IconItem.js +44 -30
- package/cjs/Components/outOfTheBox/IconItem.js.map +7 -0
- package/cjs/Components/outOfTheBox/SearchBox.js +51 -48
- package/cjs/Components/outOfTheBox/SearchBox.js.map +7 -0
- package/cjs/Components/outOfTheBox/Separator.js +38 -18
- package/cjs/Components/outOfTheBox/Separator.js.map +7 -0
- package/cjs/Components/outOfTheBox/index.js +53 -26
- package/cjs/Components/outOfTheBox/index.js.map +7 -0
- package/cjs/hooks/useGenerateItems.js +87 -101
- package/cjs/hooks/useGenerateItems.js.map +7 -0
- package/cjs/index.d.js +27 -2
- package/cjs/index.d.js.map +7 -0
- package/cjs/index.js +38 -12
- package/cjs/index.js.map +7 -0
- package/cjs/propTypes.js +61 -27
- package/cjs/propTypes.js.map +7 -0
- package/cjs/styles.js +62 -29
- package/cjs/styles.js.map +7 -0
- package/esm/Components/MiniToolbar.js +25 -33
- package/esm/Components/MiniToolbar.js.map +7 -0
- package/esm/Components/ToolbarShortcut.js +26 -46
- package/esm/Components/ToolbarShortcut.js.map +7 -0
- package/esm/Components/outOfTheBox/Button.js +10 -18
- package/esm/Components/outOfTheBox/Button.js.map +7 -0
- package/esm/Components/outOfTheBox/ComboBox.js +10 -17
- package/esm/Components/outOfTheBox/ComboBox.js.map +7 -0
- package/esm/Components/outOfTheBox/IconItem.js +15 -22
- package/esm/Components/outOfTheBox/IconItem.js.map +7 -0
- package/esm/Components/outOfTheBox/SearchBox.js +22 -38
- package/esm/Components/outOfTheBox/SearchBox.js.map +7 -0
- package/esm/Components/outOfTheBox/Separator.js +9 -10
- package/esm/Components/outOfTheBox/Separator.js.map +7 -0
- package/esm/Components/outOfTheBox/index.js +24 -13
- package/esm/Components/outOfTheBox/index.js.map +7 -0
- package/esm/hooks/useGenerateItems.js +62 -85
- package/esm/hooks/useGenerateItems.js.map +7 -0
- package/esm/index.d.js +2 -1
- package/esm/index.d.js.map +7 -0
- package/esm/index.js +9 -2
- package/esm/index.js.map +7 -0
- package/esm/propTypes.js +29 -19
- package/esm/propTypes.js.map +7 -0
- package/esm/styles.js +33 -17
- package/esm/styles.js.map +7 -0
- package/package.json +6 -6
|
@@ -1,45 +1,29 @@
|
|
|
1
|
-
import
|
|
2
|
-
import
|
|
3
|
-
import
|
|
4
|
-
import
|
|
5
|
-
import
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
import { StyledButton } from '../../styles.js';
|
|
12
|
-
import { jsx } from 'react/jsx-runtime';
|
|
13
|
-
|
|
14
|
-
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
|
|
15
|
-
|
|
16
|
-
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
|
|
17
|
-
|
|
18
|
-
const MiniToolbarSearchButton = props => {
|
|
19
|
-
const {
|
|
20
|
-
size,
|
|
21
|
-
color,
|
|
1
|
+
import * as React from "react";
|
|
2
|
+
import React2 from "react";
|
|
3
|
+
import { Search } from "@elliemae/ds-icons";
|
|
4
|
+
import { DSSearchBox } from "@elliemae/ds-form";
|
|
5
|
+
import { StyledButton } from "../../styles";
|
|
6
|
+
const MiniToolbarSearchButton = (props) => {
|
|
7
|
+
const { size, color, onClick, ariaLabel, style, buttonType = "secondary" } = props;
|
|
8
|
+
return /* @__PURE__ */ React2.createElement(StyledButton, {
|
|
9
|
+
"aria-label": ariaLabel,
|
|
10
|
+
buttonType,
|
|
22
11
|
onClick,
|
|
23
|
-
ariaLabel,
|
|
24
12
|
style,
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
"aria-label": ariaLabel,
|
|
29
|
-
buttonType: buttonType,
|
|
30
|
-
onClick: onClick,
|
|
31
|
-
style: style,
|
|
32
|
-
leftIcon: /*#__PURE__*/_jsx(Search, {
|
|
33
|
-
size: size,
|
|
34
|
-
color: color
|
|
13
|
+
leftIcon: /* @__PURE__ */ React2.createElement(Search, {
|
|
14
|
+
size,
|
|
15
|
+
color
|
|
35
16
|
}),
|
|
36
17
|
"data-testid": "ds-mini-toolbar__shortcut"
|
|
37
18
|
});
|
|
38
19
|
};
|
|
39
|
-
|
|
40
|
-
const MiniToolbarSearchBox = props => /*#__PURE__*/jsx(DSSearchBox, _objectSpread({
|
|
20
|
+
const MiniToolbarSearchBox = (props) => /* @__PURE__ */ React2.createElement(DSSearchBox, {
|
|
41
21
|
clearable: true,
|
|
42
|
-
showIcon: false
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
export {
|
|
22
|
+
showIcon: false,
|
|
23
|
+
...props
|
|
24
|
+
});
|
|
25
|
+
export {
|
|
26
|
+
MiniToolbarSearchBox,
|
|
27
|
+
MiniToolbarSearchButton
|
|
28
|
+
};
|
|
29
|
+
//# sourceMappingURL=SearchBox.js.map
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/Components/outOfTheBox/SearchBox.tsx"],
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable react/prop-types */\nimport React from 'react';\nimport { Search } from '@elliemae/ds-icons';\nimport { DSSearchBox } from '@elliemae/ds-form';\nimport { StyledButton } from '../../styles';\nimport { MiniToolbarIconItemPropsT } from '../../index.d';\n\nconst MiniToolbarSearchButton = (props: MiniToolbarIconItemPropsT): React.ReactElement => {\n const { size, color, onClick, ariaLabel, style, buttonType = 'secondary' } = props;\n\n return (\n <StyledButton\n aria-label={ariaLabel}\n buttonType={buttonType}\n onClick={onClick}\n style={style}\n leftIcon={<Search size={size} color={color} />}\n data-testid=\"ds-mini-toolbar__shortcut\"\n />\n );\n};\n\nconst MiniToolbarSearchBox = (props: Record<string, unknown>): JSX.Element => (\n <DSSearchBox clearable showIcon={false} {...props} />\n);\n\nexport { MiniToolbarSearchButton, MiniToolbarSearchBox };\n"],
|
|
5
|
+
"mappings": "AAAA;ACCA;AACA;AACA;AACA;AAGA,MAAM,0BAA0B,CAAC,UAAyD;AACxF,QAAM,EAAE,MAAM,OAAO,SAAS,WAAW,OAAO,aAAa,gBAAgB;AAE7E,SACE,qCAAC,cAAD;AAAA,IACE,cAAY;AAAA,IACZ;AAAA,IACA;AAAA,IACA;AAAA,IACA,UAAU,qCAAC,QAAD;AAAA,MAAQ;AAAA,MAAY;AAAA;AAAA,IAC9B,eAAY;AAAA;AAAA;AAKlB,MAAM,uBAAuB,CAAC,UAC5B,qCAAC,aAAD;AAAA,EAAa,WAAS;AAAA,EAAC,UAAU;AAAA,KAAW;AAAA;",
|
|
6
|
+
"names": []
|
|
7
|
+
}
|
|
@@ -1,11 +1,10 @@
|
|
|
1
|
-
import
|
|
2
|
-
import
|
|
3
|
-
import { Separator } from
|
|
4
|
-
|
|
5
|
-
var _Separator;
|
|
6
|
-
|
|
7
|
-
const MiniToolbarSeparator = () => _Separator || (_Separator = /*#__PURE__*/_jsx(Separator, {
|
|
1
|
+
import * as React from "react";
|
|
2
|
+
import React2 from "react";
|
|
3
|
+
import { Separator } from "../../styles";
|
|
4
|
+
const MiniToolbarSeparator = () => /* @__PURE__ */ React2.createElement(Separator, {
|
|
8
5
|
"data-testid": "ds-mini-toolbar__separator"
|
|
9
|
-
})
|
|
10
|
-
|
|
11
|
-
|
|
6
|
+
});
|
|
7
|
+
export {
|
|
8
|
+
MiniToolbarSeparator
|
|
9
|
+
};
|
|
10
|
+
//# sourceMappingURL=Separator.js.map
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/Components/outOfTheBox/Separator.tsx"],
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport { Separator } from '../../styles';\n\nconst MiniToolbarSeparator = (): React.ReactElement => (\n <Separator data-testid=\"ds-mini-toolbar__separator\" />\n);\n\nexport { MiniToolbarSeparator };\n"],
|
|
5
|
+
"mappings": "AAAA;ACAA;AACA;AAEA,MAAM,uBAAuB,MAC3B,qCAAC,WAAD;AAAA,EAAW,eAAY;AAAA;",
|
|
6
|
+
"names": []
|
|
7
|
+
}
|
|
@@ -1,13 +1,24 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
const ICON_ITEM =
|
|
8
|
-
const SEPARATOR =
|
|
9
|
-
const BUTTON =
|
|
10
|
-
const SEARCH_BOX =
|
|
11
|
-
const COMBO_BOX =
|
|
12
|
-
|
|
13
|
-
|
|
1
|
+
import * as React from "react";
|
|
2
|
+
import { MiniToolbarButton } from "./Button";
|
|
3
|
+
import { MiniToolbarIcon } from "./IconItem";
|
|
4
|
+
import { MiniToolbarSearchBox } from "./SearchBox";
|
|
5
|
+
import { MiniToolbarSeparator } from "./Separator";
|
|
6
|
+
import { MiniToolbarComboBox } from "./ComboBox";
|
|
7
|
+
const ICON_ITEM = "ds-icon-item";
|
|
8
|
+
const SEPARATOR = "ds-separator";
|
|
9
|
+
const BUTTON = "ds-button";
|
|
10
|
+
const SEARCH_BOX = "ds-search-box";
|
|
11
|
+
const COMBO_BOX = "ds-combo-box";
|
|
12
|
+
export {
|
|
13
|
+
BUTTON,
|
|
14
|
+
COMBO_BOX,
|
|
15
|
+
ICON_ITEM,
|
|
16
|
+
MiniToolbarButton,
|
|
17
|
+
MiniToolbarComboBox,
|
|
18
|
+
MiniToolbarIcon,
|
|
19
|
+
MiniToolbarSearchBox,
|
|
20
|
+
MiniToolbarSeparator,
|
|
21
|
+
SEARCH_BOX,
|
|
22
|
+
SEPARATOR
|
|
23
|
+
};
|
|
24
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/Components/outOfTheBox/index.tsx"],
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "export { MiniToolbarButton } from './Button';\nexport { MiniToolbarIcon } from './IconItem';\nexport { MiniToolbarSearchBox } from './SearchBox';\nexport { MiniToolbarSeparator } from './Separator';\nexport { MiniToolbarComboBox } from './ComboBox';\n\nexport const ICON_ITEM = 'ds-icon-item';\nexport const SEPARATOR = 'ds-separator';\nexport const BUTTON = 'ds-button';\nexport const SEARCH_BOX = 'ds-search-box';\nexport const COMBO_BOX = 'ds-combo-box';\n"],
|
|
5
|
+
"mappings": "AAAA;ACAA;AACA;AACA;AACA;AACA;AAEO,MAAM,YAAY;AAClB,MAAM,YAAY;AAClB,MAAM,SAAS;AACf,MAAM,aAAa;AACnB,MAAM,YAAY;",
|
|
6
|
+
"names": []
|
|
7
|
+
}
|
|
@@ -1,125 +1,102 @@
|
|
|
1
|
-
import
|
|
2
|
-
import
|
|
3
|
-
import
|
|
4
|
-
import
|
|
5
|
-
import
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
import {
|
|
18
|
-
import {
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
var _MiniToolbarSeparator;
|
|
22
|
-
|
|
23
|
-
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
|
|
24
|
-
|
|
25
|
-
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
|
|
26
|
-
|
|
27
|
-
const useGenerateItems = items => {
|
|
1
|
+
import * as React from "react";
|
|
2
|
+
import React2, { useMemo } from "react";
|
|
3
|
+
import { uid } from "uid";
|
|
4
|
+
import { Search } from "@elliemae/ds-icons";
|
|
5
|
+
import {
|
|
6
|
+
ICON_ITEM,
|
|
7
|
+
SEPARATOR,
|
|
8
|
+
BUTTON,
|
|
9
|
+
SEARCH_BOX,
|
|
10
|
+
COMBO_BOX,
|
|
11
|
+
MiniToolbarButton,
|
|
12
|
+
MiniToolbarSeparator,
|
|
13
|
+
MiniToolbarSearchBox,
|
|
14
|
+
MiniToolbarIcon,
|
|
15
|
+
MiniToolbarComboBox
|
|
16
|
+
} from "../Components/outOfTheBox";
|
|
17
|
+
import { ToolbarShortcut } from "../Components/ToolbarShortcut";
|
|
18
|
+
import { MiniToolbarSearchButton } from "../Components/outOfTheBox/SearchBox";
|
|
19
|
+
const useGenerateItems = (items) => {
|
|
28
20
|
const instanceUID = useMemo(() => uid(6), []);
|
|
29
|
-
const shortcutItems = useMemo(() => items.filter(item => item.hasShortcut || item.component === SEARCH_BOX || item.contextualRegion).map((item, index) => {
|
|
30
|
-
const {
|
|
31
|
-
component,
|
|
32
|
-
shortcutComponent,
|
|
33
|
-
shortcutProps,
|
|
34
|
-
sharedProps,
|
|
35
|
-
contextualRegion,
|
|
36
|
-
contextualRegionProps
|
|
37
|
-
} = item;
|
|
21
|
+
const shortcutItems = useMemo(() => items.filter((item) => item.hasShortcut || item.component === SEARCH_BOX || item.contextualRegion).map((item, index) => {
|
|
22
|
+
const { component, shortcutComponent, shortcutProps, sharedProps, contextualRegion, contextualRegionProps } = item;
|
|
38
23
|
let Component;
|
|
39
24
|
let ContextualRegion;
|
|
40
|
-
if (component === SEPARATOR)
|
|
41
|
-
|
|
25
|
+
if (component === SEPARATOR)
|
|
26
|
+
return /* @__PURE__ */ React2.createElement(MiniToolbarSeparator, null);
|
|
27
|
+
if (component === BUTTON)
|
|
28
|
+
Component = MiniToolbarButton;
|
|
29
|
+
else if (component === ICON_ITEM)
|
|
30
|
+
Component = MiniToolbarIcon;
|
|
31
|
+
else if (component === COMBO_BOX)
|
|
32
|
+
Component = MiniToolbarComboBox;
|
|
33
|
+
else if (component === SEARCH_BOX) {
|
|
42
34
|
if (item.hasShortcut) {
|
|
43
35
|
Component = MiniToolbarSearchButton;
|
|
44
36
|
}
|
|
45
|
-
|
|
46
37
|
ContextualRegion = MiniToolbarSearchBox;
|
|
47
38
|
}
|
|
48
|
-
|
|
49
39
|
if (!ContextualRegion) {
|
|
50
40
|
ContextualRegion = contextualRegion;
|
|
51
41
|
}
|
|
52
|
-
|
|
53
42
|
if (!Component) {
|
|
54
43
|
Component = shortcutComponent;
|
|
55
44
|
}
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
Component
|
|
59
|
-
shortcutProps
|
|
60
|
-
sharedProps
|
|
61
|
-
ContextualRegion
|
|
62
|
-
contextualRegionProps
|
|
63
|
-
}
|
|
45
|
+
return /* @__PURE__ */ React2.createElement(ToolbarShortcut, {
|
|
46
|
+
key: `${instanceUID}-shortcut-${index}`,
|
|
47
|
+
Component,
|
|
48
|
+
shortcutProps,
|
|
49
|
+
sharedProps,
|
|
50
|
+
ContextualRegion,
|
|
51
|
+
contextualRegionProps
|
|
52
|
+
});
|
|
64
53
|
}), [instanceUID, items]);
|
|
65
54
|
const dropdownMenuItems = useMemo(() => items.map((item, index) => {
|
|
66
|
-
const {
|
|
67
|
-
component,
|
|
68
|
-
sharedProps,
|
|
69
|
-
dropdownComponentProps
|
|
70
|
-
} = item;
|
|
55
|
+
const { component, sharedProps, dropdownComponentProps } = item;
|
|
71
56
|
const dropdownItem = {};
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
if (component === SEPARATOR) dropdownItem.type = 'separator';else {
|
|
81
|
-
dropdownItem.id = "".concat(instanceUID, "-dropdown-").concat(index);
|
|
82
|
-
|
|
57
|
+
const { Icon, color, label, onClick } = {
|
|
58
|
+
...sharedProps,
|
|
59
|
+
...dropdownComponentProps
|
|
60
|
+
};
|
|
61
|
+
if (component === SEPARATOR)
|
|
62
|
+
dropdownItem.type = "separator";
|
|
63
|
+
else {
|
|
64
|
+
dropdownItem.id = `${instanceUID}-dropdown-${index}`;
|
|
83
65
|
dropdownItem.onClick = () => onClick(item);
|
|
84
|
-
|
|
85
66
|
dropdownItem.label = label;
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
if (e.key === 'Enter' || e.key === ' ') {
|
|
67
|
+
dropdownItem.onKeyDown = (e) => {
|
|
68
|
+
if (e.key === "Enter" || e.key === " ") {
|
|
89
69
|
onClick(item);
|
|
90
70
|
}
|
|
91
71
|
};
|
|
92
72
|
}
|
|
93
|
-
|
|
94
73
|
if (component === ICON_ITEM) {
|
|
95
|
-
dropdownItem.leftAddon =
|
|
96
|
-
color
|
|
74
|
+
dropdownItem.leftAddon = /* @__PURE__ */ React2.createElement(Icon, {
|
|
75
|
+
color
|
|
97
76
|
});
|
|
98
77
|
} else if (component === SEARCH_BOX) {
|
|
99
|
-
dropdownItem.leftAddon =
|
|
100
|
-
color
|
|
78
|
+
dropdownItem.leftAddon = /* @__PURE__ */ React2.createElement(Search, {
|
|
79
|
+
color
|
|
101
80
|
});
|
|
102
81
|
} else if (component === COMBO_BOX) {
|
|
103
|
-
dropdownItem.type =
|
|
82
|
+
dropdownItem.type = "subMenu";
|
|
104
83
|
dropdownItem.label = label;
|
|
105
|
-
dropdownItem.subItems = sharedProps.options.map((option,
|
|
106
|
-
option.id =
|
|
107
|
-
|
|
84
|
+
dropdownItem.subItems = sharedProps.options.map((option, index2) => {
|
|
85
|
+
option.id = `${instanceUID}-option-${index2}`;
|
|
108
86
|
option.onClick = () => dropdownComponentProps.onSelectMenuItem(option);
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
if (e.key === ' ' || e.key === 'Enter') {
|
|
87
|
+
option.onKeyDown = (e) => {
|
|
88
|
+
if (e.key === " " || e.key === "Enter") {
|
|
112
89
|
dropdownComponentProps.onSelectMenuItem(option);
|
|
113
90
|
}
|
|
114
91
|
};
|
|
115
|
-
|
|
116
92
|
return option;
|
|
117
93
|
});
|
|
118
94
|
}
|
|
119
|
-
|
|
120
95
|
return dropdownItem;
|
|
121
96
|
}), [instanceUID, items]);
|
|
122
97
|
return [shortcutItems, dropdownMenuItems];
|
|
123
98
|
};
|
|
124
|
-
|
|
125
|
-
|
|
99
|
+
export {
|
|
100
|
+
useGenerateItems
|
|
101
|
+
};
|
|
102
|
+
//# sourceMappingURL=useGenerateItems.js.map
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/hooks/useGenerateItems.tsx"],
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useMemo } from 'react';\nimport { uid } from 'uid';\nimport { Search } from '@elliemae/ds-icons';\nimport {\n ICON_ITEM,\n SEPARATOR,\n BUTTON,\n SEARCH_BOX,\n COMBO_BOX,\n MiniToolbarButton,\n MiniToolbarSeparator,\n MiniToolbarSearchBox,\n MiniToolbarIcon,\n MiniToolbarComboBox,\n} from '../Components/outOfTheBox';\nimport { ToolbarShortcut } from '../Components/ToolbarShortcut';\nimport { MiniToolbarSearchButton } from '../Components/outOfTheBox/SearchBox';\nimport { GeneratedDropdownItemT, MiniToolbarItemT } from '../index.d';\n\nconst useGenerateItems = (items: MiniToolbarItemT[]): [React.ReactElement[], GeneratedDropdownItemT[]] => {\n const instanceUID = useMemo(() => uid(6), []);\n\n const shortcutItems = useMemo(\n () =>\n items\n .filter((item) => item.hasShortcut || item.component === SEARCH_BOX || item.contextualRegion)\n .map((item, index) => {\n const { component, shortcutComponent, shortcutProps, sharedProps, contextualRegion, contextualRegionProps } =\n item;\n\n let Component;\n let ContextualRegion;\n\n if (component === SEPARATOR) return <MiniToolbarSeparator />;\n if (component === BUTTON) Component = MiniToolbarButton;\n else if (component === ICON_ITEM) Component = MiniToolbarIcon;\n else if (component === COMBO_BOX) Component = MiniToolbarComboBox;\n else if (component === SEARCH_BOX) {\n if (item.hasShortcut) {\n Component = MiniToolbarSearchButton;\n }\n ContextualRegion = MiniToolbarSearchBox;\n }\n if (!ContextualRegion) {\n ContextualRegion = contextualRegion;\n }\n if (!Component) {\n Component = shortcutComponent;\n }\n\n return (\n <ToolbarShortcut\n key={`${instanceUID}-shortcut-${index}`}\n Component={Component}\n shortcutProps={shortcutProps}\n sharedProps={sharedProps}\n ContextualRegion={ContextualRegion}\n contextualRegionProps={contextualRegionProps}\n />\n );\n }),\n [instanceUID, items],\n );\n\n const dropdownMenuItems = useMemo(\n () =>\n items.map((item, index) => {\n const { component, sharedProps, dropdownComponentProps } = item;\n const dropdownItem: GeneratedDropdownItemT = {};\n\n const { Icon, color, label, onClick } = {\n ...sharedProps,\n ...dropdownComponentProps,\n };\n\n if (component === SEPARATOR) dropdownItem.type = 'separator';\n else {\n dropdownItem.id = `${instanceUID}-dropdown-${index}`;\n dropdownItem.onClick = () => onClick(item);\n dropdownItem.label = label;\n dropdownItem.onKeyDown = (e: React.KeyboardEvent) => {\n if (e.key === 'Enter' || e.key === ' ') {\n onClick(item);\n }\n };\n }\n\n if (component === ICON_ITEM) {\n dropdownItem.leftAddon = <Icon color={color} />;\n } else if (component === SEARCH_BOX) {\n dropdownItem.leftAddon = <Search color={color} />;\n } else if (component === COMBO_BOX) {\n dropdownItem.type = 'subMenu';\n dropdownItem.label = label;\n dropdownItem.subItems = sharedProps.options.map((option, index) => {\n option.id = `${instanceUID}-option-${index}`;\n option.onClick = () => dropdownComponentProps.onSelectMenuItem(option);\n option.onKeyDown = (e: React.KeyboardEvent) => {\n if (e.key === ' ' || e.key === 'Enter') {\n dropdownComponentProps.onSelectMenuItem(option);\n }\n };\n return option;\n });\n }\n\n return dropdownItem;\n }),\n [instanceUID, items],\n );\n\n return [shortcutItems, dropdownMenuItems];\n};\n\nexport { useGenerateItems };\n"],
|
|
5
|
+
"mappings": "AAAA;ACAA;AACA;AACA;AACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAYA;AACA;AAGA,MAAM,mBAAmB,CAAC,UAAgF;AACxG,QAAM,cAAc,QAAQ,MAAM,IAAI,IAAI;AAE1C,QAAM,gBAAgB,QACpB,MACE,MACG,OAAO,CAAC,SAAS,KAAK,eAAe,KAAK,cAAc,cAAc,KAAK,kBAC3E,IAAI,CAAC,MAAM,UAAU;AACpB,UAAM,EAAE,WAAW,mBAAmB,eAAe,aAAa,kBAAkB,0BAClF;AAEF,QAAI;AACJ,QAAI;AAEJ,QAAI,cAAc;AAAW,aAAO,qCAAC,sBAAD;AACpC,QAAI,cAAc;AAAQ,kBAAY;AAAA,aAC7B,cAAc;AAAW,kBAAY;AAAA,aACrC,cAAc;AAAW,kBAAY;AAAA,aACrC,cAAc,YAAY;AACjC,UAAI,KAAK,aAAa;AACpB,oBAAY;AAAA;AAEd,yBAAmB;AAAA;AAErB,QAAI,CAAC,kBAAkB;AACrB,yBAAmB;AAAA;AAErB,QAAI,CAAC,WAAW;AACd,kBAAY;AAAA;AAGd,WACE,qCAAC,iBAAD;AAAA,MACE,KAAK,GAAG,wBAAwB;AAAA,MAChC;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA;AAAA,MAIV,CAAC,aAAa;AAGhB,QAAM,oBAAoB,QACxB,MACE,MAAM,IAAI,CAAC,MAAM,UAAU;AACzB,UAAM,EAAE,WAAW,aAAa,2BAA2B;AAC3D,UAAM,eAAuC;AAE7C,UAAM,EAAE,MAAM,OAAO,OAAO,YAAY;AAAA,SACnC;AAAA,SACA;AAAA;AAGL,QAAI,cAAc;AAAW,mBAAa,OAAO;AAAA,SAC5C;AACH,mBAAa,KAAK,GAAG,wBAAwB;AAC7C,mBAAa,UAAU,MAAM,QAAQ;AACrC,mBAAa,QAAQ;AACrB,mBAAa,YAAY,CAAC,MAA2B;AACnD,YAAI,EAAE,QAAQ,WAAW,EAAE,QAAQ,KAAK;AACtC,kBAAQ;AAAA;AAAA;AAAA;AAKd,QAAI,cAAc,WAAW;AAC3B,mBAAa,YAAY,qCAAC,MAAD;AAAA,QAAM;AAAA;AAAA,eACtB,cAAc,YAAY;AACnC,mBAAa,YAAY,qCAAC,QAAD;AAAA,QAAQ;AAAA;AAAA,eACxB,cAAc,WAAW;AAClC,mBAAa,OAAO;AACpB,mBAAa,QAAQ;AACrB,mBAAa,WAAW,YAAY,QAAQ,IAAI,CAAC,QAAQ,WAAU;AACjE,eAAO,KAAK,GAAG,sBAAsB;AACrC,eAAO,UAAU,MAAM,uBAAuB,iBAAiB;AAC/D,eAAO,YAAY,CAAC,MAA2B;AAC7C,cAAI,EAAE,QAAQ,OAAO,EAAE,QAAQ,SAAS;AACtC,mCAAuB,iBAAiB;AAAA;AAAA;AAG5C,eAAO;AAAA;AAAA;AAIX,WAAO;AAAA,MAEX,CAAC,aAAa;AAGhB,SAAO,CAAC,eAAe;AAAA;",
|
|
6
|
+
"names": []
|
|
7
|
+
}
|
package/esm/index.d.js
CHANGED
|
@@ -1 +1,2 @@
|
|
|
1
|
-
|
|
1
|
+
import * as React from "react";
|
|
2
|
+
//# sourceMappingURL=index.d.js.map
|
package/esm/index.js
CHANGED
|
@@ -1,2 +1,9 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
1
|
+
import * as React from "react";
|
|
2
|
+
import { MiniToolbar, MiniToolbarWithSchema } from "./Components/MiniToolbar";
|
|
3
|
+
import { ToolbarItemWithSchema } from "./propTypes";
|
|
4
|
+
export {
|
|
5
|
+
MiniToolbar,
|
|
6
|
+
MiniToolbarWithSchema,
|
|
7
|
+
ToolbarItemWithSchema
|
|
8
|
+
};
|
|
9
|
+
//# sourceMappingURL=index.js.map
|
package/esm/index.js.map
ADDED
|
@@ -0,0 +1,7 @@
|
|
|
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 { MiniToolbar, MiniToolbarWithSchema } from './Components/MiniToolbar';\nexport { ToolbarItemWithSchema } from './propTypes';\n"],
|
|
5
|
+
"mappings": "AAAA;ACAA;AACA;",
|
|
6
|
+
"names": []
|
|
7
|
+
}
|
package/esm/propTypes.js
CHANGED
|
@@ -1,30 +1,40 @@
|
|
|
1
|
-
import
|
|
2
|
-
|
|
3
|
-
const outOfTheBoxType = PropTypes.oneOf([
|
|
1
|
+
import * as React from "react";
|
|
2
|
+
import { PropTypes, describe } from "react-desc";
|
|
3
|
+
const outOfTheBoxType = PropTypes.oneOf([
|
|
4
|
+
"ds-button",
|
|
5
|
+
"ds-icon-item",
|
|
6
|
+
"ds-separator",
|
|
7
|
+
"ds-search-box",
|
|
8
|
+
"ds-combo-box"
|
|
9
|
+
]).description("out-of-the-box toolbar components");
|
|
4
10
|
const toolbarItemProps = {
|
|
5
|
-
component: PropTypes.oneOfType([
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
11
|
+
component: PropTypes.oneOfType([
|
|
12
|
+
outOfTheBoxType,
|
|
13
|
+
PropTypes.element
|
|
14
|
+
]).description("Main component").isRequired,
|
|
15
|
+
hasShortcut: PropTypes.bool.description("Whether to include the component as a shortcut in the toolbar or not").defaultValue(false),
|
|
16
|
+
shortcutComponent: PropTypes.element.description("Component to render as a shortcut in the toolbar"),
|
|
17
|
+
shortcutProps: PropTypes.object.description("Shortcut component props"),
|
|
18
|
+
dropdownComponentProps: PropTypes.object.description("Dropdown component props"),
|
|
19
|
+
sharedProps: PropTypes.object.description("Props shared by shortcut component and dropdown component"),
|
|
20
|
+
contextualRegion: PropTypes.element.description("Component that can be rendered as an adjacent region to the shortcut component"),
|
|
21
|
+
contextualRegionProps: PropTypes.object.description("Contextual region component props")
|
|
13
22
|
};
|
|
14
|
-
const itemPropTypes = PropTypes.shape(toolbarItemProps).description(
|
|
23
|
+
const itemPropTypes = PropTypes.shape(toolbarItemProps).description("Items props");
|
|
15
24
|
const overflowButtonPropTypes = {
|
|
16
25
|
ariaLabel: PropTypes.string,
|
|
17
|
-
buttonType: PropTypes.oneOf([
|
|
26
|
+
buttonType: PropTypes.oneOf(["secondary", "text"]),
|
|
18
27
|
style: PropTypes.object
|
|
19
28
|
};
|
|
20
29
|
const miniToolbarProps = {
|
|
21
|
-
items: PropTypes.arrayOf(itemPropTypes).description(
|
|
22
|
-
overflowButtonProps: PropTypes.shape(overflowButtonPropTypes).description(
|
|
30
|
+
items: PropTypes.arrayOf(itemPropTypes).description("Array of items").isRequired,
|
|
31
|
+
overflowButtonProps: PropTypes.shape(overflowButtonPropTypes).description("Overflow button props")
|
|
23
32
|
};
|
|
24
|
-
|
|
25
33
|
const ToolbarItem = () => null;
|
|
26
|
-
|
|
27
34
|
const ToolbarItemWithSchema = describe(ToolbarItem);
|
|
28
35
|
ToolbarItemWithSchema.propTypes = toolbarItemProps;
|
|
29
|
-
|
|
30
|
-
|
|
36
|
+
export {
|
|
37
|
+
ToolbarItemWithSchema,
|
|
38
|
+
miniToolbarProps
|
|
39
|
+
};
|
|
40
|
+
//# sourceMappingURL=propTypes.js.map
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/propTypes.tsx"],
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { PropTypes, describe } from 'react-desc';\n\nconst outOfTheBoxType = PropTypes.oneOf([\n 'ds-button',\n 'ds-icon-item',\n 'ds-separator',\n 'ds-search-box',\n 'ds-combo-box',\n]).description('out-of-the-box toolbar components');\n\nconst toolbarItemProps = {\n component: PropTypes.oneOfType([\n outOfTheBoxType,\n PropTypes.element,\n ]).description('Main component').isRequired,\n hasShortcut: PropTypes.bool\n .description(\n 'Whether to include the component as a shortcut in the toolbar or not',\n )\n .defaultValue(false),\n shortcutComponent: PropTypes.element.description(\n 'Component to render as a shortcut in the toolbar',\n ),\n shortcutProps: PropTypes.object.description('Shortcut component props'),\n dropdownComponentProps: PropTypes.object.description(\n 'Dropdown component props',\n ),\n sharedProps: PropTypes.object.description(\n 'Props shared by shortcut component and dropdown component',\n ),\n contextualRegion: PropTypes.element.description(\n 'Component that can be rendered as an adjacent region to the shortcut component',\n ),\n contextualRegionProps: PropTypes.object.description(\n 'Contextual region component props',\n ),\n};\n\nconst itemPropTypes = PropTypes.shape(toolbarItemProps).description(\n 'Items props',\n);\n\nconst overflowButtonPropTypes = {\n ariaLabel: PropTypes.string,\n buttonType: PropTypes.oneOf(['secondary', 'text']),\n style: PropTypes.object,\n};\n\nconst miniToolbarProps = {\n items: PropTypes.arrayOf(itemPropTypes).description('Array of items')\n .isRequired,\n overflowButtonProps: PropTypes.shape(overflowButtonPropTypes).description(\n 'Overflow button props',\n ),\n};\n\nconst ToolbarItem = () => null;\n\nconst ToolbarItemWithSchema = describe(ToolbarItem);\nToolbarItemWithSchema.propTypes = toolbarItemProps;\nexport { ToolbarItemWithSchema, miniToolbarProps };\n"],
|
|
5
|
+
"mappings": "AAAA;ACAA;AAEA,MAAM,kBAAkB,UAAU,MAAM;AAAA,EACtC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,GACC,YAAY;AAEf,MAAM,mBAAmB;AAAA,EACvB,WAAW,UAAU,UAAU;AAAA,IAC7B;AAAA,IACA,UAAU;AAAA,KACT,YAAY,kBAAkB;AAAA,EACjC,aAAa,UAAU,KACpB,YACC,wEAED,aAAa;AAAA,EAChB,mBAAmB,UAAU,QAAQ,YACnC;AAAA,EAEF,eAAe,UAAU,OAAO,YAAY;AAAA,EAC5C,wBAAwB,UAAU,OAAO,YACvC;AAAA,EAEF,aAAa,UAAU,OAAO,YAC5B;AAAA,EAEF,kBAAkB,UAAU,QAAQ,YAClC;AAAA,EAEF,uBAAuB,UAAU,OAAO,YACtC;AAAA;AAIJ,MAAM,gBAAgB,UAAU,MAAM,kBAAkB,YACtD;AAGF,MAAM,0BAA0B;AAAA,EAC9B,WAAW,UAAU;AAAA,EACrB,YAAY,UAAU,MAAM,CAAC,aAAa;AAAA,EAC1C,OAAO,UAAU;AAAA;AAGnB,MAAM,mBAAmB;AAAA,EACvB,OAAO,UAAU,QAAQ,eAAe,YAAY,kBACjD;AAAA,EACH,qBAAqB,UAAU,MAAM,yBAAyB,YAC5D;AAAA;AAIJ,MAAM,cAAc,MAAM;AAE1B,MAAM,wBAAwB,SAAS;AACvC,sBAAsB,YAAY;",
|
|
6
|
+
"names": []
|
|
7
|
+
}
|
package/esm/styles.js
CHANGED
|
@@ -1,17 +1,33 @@
|
|
|
1
|
-
import
|
|
2
|
-
import
|
|
3
|
-
|
|
4
|
-
const Container =
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
1
|
+
import * as React from "react";
|
|
2
|
+
import styled from "styled-components";
|
|
3
|
+
import { DSButton } from "@elliemae/ds-button";
|
|
4
|
+
const Container = styled.ul`
|
|
5
|
+
display: flex;
|
|
6
|
+
align-items: center;
|
|
7
|
+
justify-content: center;
|
|
8
|
+
width: fit-content;
|
|
9
|
+
padding: 0 6px;
|
|
10
|
+
`;
|
|
11
|
+
const Separator = styled.span`
|
|
12
|
+
height: 24px;
|
|
13
|
+
width: 1px;
|
|
14
|
+
margin: 6px;
|
|
15
|
+
border-left: 1px solid #bbb;
|
|
16
|
+
`;
|
|
17
|
+
const Item = styled.li`
|
|
18
|
+
display: flex;
|
|
19
|
+
margin: 6px;
|
|
20
|
+
cursor: pointer;
|
|
21
|
+
`;
|
|
22
|
+
const StyledButton = styled(DSButton)`
|
|
23
|
+
&:not(:focus) {
|
|
24
|
+
border-color: transparent;
|
|
25
|
+
}
|
|
26
|
+
`;
|
|
27
|
+
export {
|
|
28
|
+
Container,
|
|
29
|
+
Item,
|
|
30
|
+
Separator,
|
|
31
|
+
StyledButton
|
|
32
|
+
};
|
|
33
|
+
//# sourceMappingURL=styles.js.map
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/styles.tsx"],
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import styled from 'styled-components';\nimport { DSButton } from '@elliemae/ds-button';\n\nconst Container = styled.ul`\n display: flex;\n align-items: center;\n justify-content: center;\n width: fit-content;\n padding: 0 6px;\n`;\n\nconst Separator = styled.span`\n height: 24px;\n width: 1px;\n margin: 6px;\n border-left: 1px solid #bbb;\n`;\n\nconst Item = styled.li`\n display: flex;\n margin: 6px;\n cursor: pointer;\n`;\n\nconst StyledButton = styled(DSButton)`\n &:not(:focus) {\n border-color: transparent;\n }\n`;\n\nexport { Container, Separator, Item, StyledButton };\n"],
|
|
5
|
+
"mappings": "AAAA;ACAA;AACA;AAEA,MAAM,YAAY,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAQzB,MAAM,YAAY,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAOzB,MAAM,OAAO,OAAO;AAAA;AAAA;AAAA;AAAA;AAMpB,MAAM,eAAe,OAAO;AAAA;AAAA;AAAA;AAAA;",
|
|
6
|
+
"names": []
|
|
7
|
+
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@elliemae/ds-mini-toolbar",
|
|
3
|
-
"version": "2.
|
|
3
|
+
"version": "2.3.0-alpha.4",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"description": "ICE MT - Dimsum - MiniToolbar",
|
|
6
6
|
"module": "./esm/index.js",
|
|
@@ -72,11 +72,11 @@
|
|
|
72
72
|
"build": "node ../../scripts/build/build.js"
|
|
73
73
|
},
|
|
74
74
|
"dependencies": {
|
|
75
|
-
"@elliemae/ds-button": "2.
|
|
76
|
-
"@elliemae/ds-dropdownmenu": "2.
|
|
77
|
-
"@elliemae/ds-form": "2.
|
|
78
|
-
"@elliemae/ds-icons": "2.
|
|
79
|
-
"@elliemae/ds-system": "2.
|
|
75
|
+
"@elliemae/ds-button": "2.3.0-alpha.4",
|
|
76
|
+
"@elliemae/ds-dropdownmenu": "2.3.0-alpha.4",
|
|
77
|
+
"@elliemae/ds-form": "2.3.0-alpha.4",
|
|
78
|
+
"@elliemae/ds-icons": "2.3.0-alpha.4",
|
|
79
|
+
"@elliemae/ds-system": "2.3.0-alpha.4",
|
|
80
80
|
"react-desc": "~4.1.3",
|
|
81
81
|
"uid": "~2.0.0"
|
|
82
82
|
},
|