@elliemae/ds-mini-toolbar 3.5.0-rc.9 → 3.6.0-next.0
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/Components/MiniToolbar.js +26 -21
- package/dist/cjs/Components/MiniToolbar.js.map +2 -2
- package/dist/cjs/Components/ToolbarShortcut.js +24 -12
- package/dist/cjs/Components/ToolbarShortcut.js.map +2 -2
- package/dist/cjs/Components/outOfTheBox/Button.js +2 -2
- package/dist/cjs/Components/outOfTheBox/Button.js.map +2 -2
- package/dist/cjs/Components/outOfTheBox/ComboBox.js +2 -2
- package/dist/cjs/Components/outOfTheBox/ComboBox.js.map +2 -2
- package/dist/cjs/Components/outOfTheBox/IconItem.js +3 -3
- package/dist/cjs/Components/outOfTheBox/IconItem.js.map +2 -2
- package/dist/cjs/Components/outOfTheBox/SearchBox.js +4 -4
- package/dist/cjs/Components/outOfTheBox/SearchBox.js.map +2 -2
- package/dist/cjs/Components/outOfTheBox/Separator.js +2 -2
- package/dist/cjs/Components/outOfTheBox/Separator.js.map +2 -2
- package/dist/cjs/hooks/useGenerateItems.js +7 -7
- package/dist/cjs/hooks/useGenerateItems.js.map +2 -2
- package/dist/esm/Components/MiniToolbar.js +26 -21
- package/dist/esm/Components/MiniToolbar.js.map +2 -2
- package/dist/esm/Components/ToolbarShortcut.js +24 -12
- package/dist/esm/Components/ToolbarShortcut.js.map +2 -2
- package/dist/esm/Components/outOfTheBox/Button.js +2 -2
- package/dist/esm/Components/outOfTheBox/Button.js.map +2 -2
- package/dist/esm/Components/outOfTheBox/ComboBox.js +2 -2
- package/dist/esm/Components/outOfTheBox/ComboBox.js.map +2 -2
- package/dist/esm/Components/outOfTheBox/IconItem.js +3 -3
- package/dist/esm/Components/outOfTheBox/IconItem.js.map +2 -2
- package/dist/esm/Components/outOfTheBox/SearchBox.js +4 -4
- package/dist/esm/Components/outOfTheBox/SearchBox.js.map +2 -2
- package/dist/esm/Components/outOfTheBox/Separator.js +2 -2
- package/dist/esm/Components/outOfTheBox/Separator.js.map +2 -2
- package/dist/esm/hooks/useGenerateItems.js +7 -7
- package/dist/esm/hooks/useGenerateItems.js.map +2 -2
- package/package.json +7 -7
|
@@ -29,14 +29,15 @@ __export(MiniToolbar_exports, {
|
|
|
29
29
|
});
|
|
30
30
|
module.exports = __toCommonJS(MiniToolbar_exports);
|
|
31
31
|
var React = __toESM(require("react"));
|
|
32
|
-
var
|
|
32
|
+
var import_jsx_runtime = require("react/jsx-runtime");
|
|
33
|
+
var import_react = require("react");
|
|
33
34
|
var import_ds_utilities = require("@elliemae/ds-utilities");
|
|
34
35
|
var import_ds_dropdownmenu = require("@elliemae/ds-dropdownmenu");
|
|
35
36
|
var import_ds_icons = require("@elliemae/ds-icons");
|
|
36
37
|
var import_styles = require("../styles");
|
|
37
38
|
var import_propTypes = require("../propTypes");
|
|
38
39
|
var import_useGenerateItems = require("../hooks/useGenerateItems");
|
|
39
|
-
const Elipsis = /* @__PURE__ */
|
|
40
|
+
const Elipsis = /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_icons.MoreOptionsVert, {
|
|
40
41
|
color: ["brand-primary", "600"],
|
|
41
42
|
size: "m"
|
|
42
43
|
});
|
|
@@ -51,26 +52,30 @@ const MiniToolbar = ({ items, overflowButtonProps }) => {
|
|
|
51
52
|
}
|
|
52
53
|
}, []);
|
|
53
54
|
const { ariaLabel, style, buttonType = "secondary" } = overflowButtonProps || {};
|
|
54
|
-
return /* @__PURE__ */
|
|
55
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_styles.Container, {
|
|
55
56
|
role: "toolbar",
|
|
56
|
-
"data-testid": "ds-mini-toolbar"
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
57
|
+
"data-testid": "ds-mini-toolbar",
|
|
58
|
+
children: [
|
|
59
|
+
shortcutItems,
|
|
60
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_dropdownmenu.DSDropdownMenu, {
|
|
61
|
+
"data-testid": "ds-mini-toolbar__dropdown-menu",
|
|
62
|
+
isOpen: isDropdownMenuOpen,
|
|
63
|
+
onSelectMenuItem: closeDropdownMenu,
|
|
64
|
+
onClickOutsideMenu: closeDropdownMenu,
|
|
65
|
+
options: dropdownMenuItems,
|
|
66
|
+
triggerComponent: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styles.StyledButton, {
|
|
67
|
+
"aria-label": ariaLabel,
|
|
68
|
+
"data-testid": "ds-mini-toolbar__elipsis",
|
|
69
|
+
size: "m",
|
|
70
|
+
style,
|
|
71
|
+
buttonType,
|
|
72
|
+
onClick: openDropdownMenu,
|
|
73
|
+
onKeyPress: openDropdownMenuKeyPress,
|
|
74
|
+
leftIcon: Elipsis
|
|
75
|
+
})
|
|
76
|
+
})
|
|
77
|
+
]
|
|
78
|
+
});
|
|
74
79
|
};
|
|
75
80
|
MiniToolbar.propTypes = import_propTypes.miniToolbarProps;
|
|
76
81
|
MiniToolbar.displayName = "MiniToolbar";
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/Components/MiniToolbar.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
4
|
"sourcesContent": ["import React, { useState, useCallback } from 'react';\nimport { describe } from '@elliemae/ds-utilities';\nimport { DSDropdownMenu } from '@elliemae/ds-dropdownmenu';\nimport { MoreOptionsVert } from '@elliemae/ds-icons';\nimport { StyledButton, Container } from '../styles';\nimport { miniToolbarProps } from '../propTypes';\nimport { useGenerateItems } from '../hooks/useGenerateItems';\nimport { MiniToolbarPropsT } from '../index.d';\n\nconst Elipsis = <MoreOptionsVert color={['brand-primary', '600']} size=\"m\" />;\n\nconst MiniToolbar = ({ items, overflowButtonProps }: MiniToolbarPropsT): React.ReactElement => {\n const [shortcutItems, dropdownMenuItems] = useGenerateItems(items);\n const [isDropdownMenuOpen, setIsDropdownMenuOpen] = useState<boolean>(false);\n\n const closeDropdownMenu = useCallback(() => setIsDropdownMenuOpen(false), []);\n const openDropdownMenu = useCallback(() => setIsDropdownMenuOpen(true), []);\n const openDropdownMenuKeyPress = useCallback((e) => {\n if (e.key === ' ') {\n setIsDropdownMenuOpen(true);\n }\n }, []);\n\n const { ariaLabel, style, buttonType = 'secondary' } = overflowButtonProps || {};\n\n return (\n <Container role=\"toolbar\" data-testid=\"ds-mini-toolbar\">\n {shortcutItems}\n <DSDropdownMenu\n data-testid=\"ds-mini-toolbar__dropdown-menu\"\n isOpen={isDropdownMenuOpen}\n onSelectMenuItem={closeDropdownMenu}\n onClickOutsideMenu={closeDropdownMenu}\n options={dropdownMenuItems}\n triggerComponent={\n <StyledButton\n aria-label={ariaLabel}\n data-testid=\"ds-mini-toolbar__elipsis\"\n size=\"m\"\n style={style}\n buttonType={buttonType}\n onClick={openDropdownMenu}\n onKeyPress={openDropdownMenuKeyPress}\n leftIcon={Elipsis}\n />\n }\n />\n </Container>\n );\n};\n\nMiniToolbar.propTypes = miniToolbarProps;\nMiniToolbar.displayName = 'MiniToolbar';\nconst MiniToolbarWithSchema = describe(MiniToolbar);\nMiniToolbarWithSchema.propTypes = miniToolbarProps;\n\nexport { MiniToolbar, MiniToolbarWithSchema };\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAA6C;AAC7C,0BAAyB;AACzB,6BAA+B;AAC/B,sBAAgC;AAChC,oBAAwC;AACxC,uBAAiC;AACjC,8BAAiC;AAGjC,MAAM,UAAU,
|
|
6
|
-
"names": [
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB;AAAA,mBAA6C;AAC7C,0BAAyB;AACzB,6BAA+B;AAC/B,sBAAgC;AAChC,oBAAwC;AACxC,uBAAiC;AACjC,8BAAiC;AAGjC,MAAM,UAAU,4CAAC;AAAA,EAAgB,OAAO,CAAC,iBAAiB,KAAK;AAAA,EAAG,MAAK;AAAA,CAAI;AAE3E,MAAM,cAAc,CAAC,EAAE,OAAO,oBAAoB,MAA6C;AAC7F,QAAM,CAAC,eAAe,iBAAiB,QAAI,0CAAiB,KAAK;AACjE,QAAM,CAAC,oBAAoB,qBAAqB,QAAI,uBAAkB,KAAK;AAE3E,QAAM,wBAAoB,0BAAY,MAAM,sBAAsB,KAAK,GAAG,CAAC,CAAC;AAC5E,QAAM,uBAAmB,0BAAY,MAAM,sBAAsB,IAAI,GAAG,CAAC,CAAC;AAC1E,QAAM,+BAA2B,0BAAY,CAAC,MAAM;AAClD,QAAI,EAAE,QAAQ,KAAK;AACjB,4BAAsB,IAAI;AAAA,IAC5B;AAAA,EACF,GAAG,CAAC,CAAC;AAEL,QAAM,EAAE,WAAW,OAAO,aAAa,YAAY,IAAI,uBAAuB,CAAC;AAE/E,SACE,6CAAC;AAAA,IAAU,MAAK;AAAA,IAAU,eAAY;AAAA,IACnC;AAAA;AAAA,MACD,4CAAC;AAAA,QACC,eAAY;AAAA,QACZ,QAAQ;AAAA,QACR,kBAAkB;AAAA,QAClB,oBAAoB;AAAA,QACpB,SAAS;AAAA,QACT,kBACE,4CAAC;AAAA,UACC,cAAY;AAAA,UACZ,eAAY;AAAA,UACZ,MAAK;AAAA,UACL;AAAA,UACA;AAAA,UACA,SAAS;AAAA,UACT,YAAY;AAAA,UACZ,UAAU;AAAA,SACZ;AAAA,OAEJ;AAAA;AAAA,GACF;AAEJ;AAEA,YAAY,YAAY;AACxB,YAAY,cAAc;AAC1B,MAAM,4BAAwB,8BAAS,WAAW;AAClD,sBAAsB,YAAY;",
|
|
6
|
+
"names": []
|
|
7
7
|
}
|
|
@@ -28,7 +28,8 @@ __export(ToolbarShortcut_exports, {
|
|
|
28
28
|
});
|
|
29
29
|
module.exports = __toCommonJS(ToolbarShortcut_exports);
|
|
30
30
|
var React = __toESM(require("react"));
|
|
31
|
-
var
|
|
31
|
+
var import_jsx_runtime = require("react/jsx-runtime");
|
|
32
|
+
var import_react = require("react");
|
|
32
33
|
var import_styles = require("../styles");
|
|
33
34
|
const ToolbarShortcut = (props) => {
|
|
34
35
|
const { Component, shortcutProps, sharedProps, ContextualRegion, contextualRegionProps } = props;
|
|
@@ -54,16 +55,27 @@ const ToolbarShortcut = (props) => {
|
|
|
54
55
|
clearTimeout(timerRight.current);
|
|
55
56
|
};
|
|
56
57
|
}, [isOpen, leftRef, rightRef]);
|
|
57
|
-
return /* @__PURE__ */
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
58
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, {
|
|
59
|
+
children: [
|
|
60
|
+
isOpen && position === "left" && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styles.Item, {
|
|
61
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ContextualRegion, {
|
|
62
|
+
innerRef: leftRef,
|
|
63
|
+
...contextualRegionProps
|
|
64
|
+
})
|
|
65
|
+
}),
|
|
66
|
+
Component && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styles.Item, {
|
|
67
|
+
style,
|
|
68
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Component, {
|
|
69
|
+
...mergedProps
|
|
70
|
+
})
|
|
71
|
+
}),
|
|
72
|
+
isOpen && position === "right" && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styles.Item, {
|
|
73
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ContextualRegion, {
|
|
74
|
+
innerRef: rightRef,
|
|
75
|
+
...contextualRegionProps
|
|
76
|
+
})
|
|
77
|
+
})
|
|
78
|
+
]
|
|
79
|
+
});
|
|
68
80
|
};
|
|
69
81
|
//# sourceMappingURL=ToolbarShortcut.js.map
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/Components/ToolbarShortcut.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
4
|
"sourcesContent": ["import React, { useRef, useEffect } from 'react';\nimport { Item } from '../styles';\nimport { ToolbarShortcutPropsT } from '../index.d';\n\nconst ToolbarShortcut = (props: ToolbarShortcutPropsT): React.ReactElement => {\n const { Component, shortcutProps, sharedProps, ContextualRegion, contextualRegionProps } = props;\n const leftRef = useRef<HTMLElement | null>(null);\n const rightRef = useRef<HTMLElement | null>(null);\n const timerLeft = useRef<ReturnType<typeof setInterval> | null>(null);\n const timerRight = useRef<ReturnType<typeof setInterval> | null>(null);\n\n const { position = 'left', isOpen = false } = contextualRegionProps || {};\n const { style } = shortcutProps || {};\n\n const mergedProps = {\n ...sharedProps,\n ...shortcutProps,\n };\n\n useEffect(() => {\n if (isOpen && leftRef.current) {\n timerLeft.current = setTimeout(() => leftRef.current.focus(), 200);\n }\n if (isOpen && rightRef.current) {\n timerRight.current = setTimeout(() => rightRef.current.focus(), 200);\n }\n\n return () => {\n clearTimeout(timerLeft.current);\n clearTimeout(timerRight.current);\n };\n }, [isOpen, leftRef, rightRef]);\n\n return (\n <>\n {isOpen && position === 'left' && (\n <Item>\n <ContextualRegion innerRef={leftRef} {...contextualRegionProps} />\n </Item>\n )}\n {Component && (\n <Item style={style}>\n <Component {...mergedProps} />\n </Item>\n )}\n {isOpen && position === 'right' && (\n <Item>\n <ContextualRegion innerRef={rightRef} {...contextualRegionProps} />\n </Item>\n )}\n </>\n );\n};\n\nexport { ToolbarShortcut };\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAAyC;AACzC,oBAAqB;AAGrB,MAAM,kBAAkB,CAAC,UAAqD;AAC5E,QAAM,EAAE,WAAW,eAAe,aAAa,kBAAkB,sBAAsB,IAAI;AAC3F,QAAM,cAAU,qBAA2B,IAAI;AAC/C,QAAM,eAAW,qBAA2B,IAAI;AAChD,QAAM,gBAAY,qBAA8C,IAAI;AACpE,QAAM,iBAAa,qBAA8C,IAAI;AAErE,QAAM,EAAE,WAAW,QAAQ,SAAS,MAAM,IAAI,yBAAyB,CAAC;AACxE,QAAM,EAAE,MAAM,IAAI,iBAAiB,CAAC;AAEpC,QAAM,cAAc;AAAA,IAClB,GAAG;AAAA,IACH,GAAG;AAAA,EACL;AAEA,8BAAU,MAAM;AACd,QAAI,UAAU,QAAQ,SAAS;AAC7B,gBAAU,UAAU,WAAW,MAAM,QAAQ,QAAQ,MAAM,GAAG,GAAG;AAAA,IACnE;AACA,QAAI,UAAU,SAAS,SAAS;AAC9B,iBAAW,UAAU,WAAW,MAAM,SAAS,QAAQ,MAAM,GAAG,GAAG;AAAA,IACrE;AAEA,WAAO,MAAM;AACX,mBAAa,UAAU,OAAO;AAC9B,mBAAa,WAAW,OAAO;AAAA,IACjC;AAAA,EACF,GAAG,CAAC,QAAQ,SAAS,QAAQ,CAAC;AAE9B,SACE,
|
|
6
|
-
"names": [
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB;AAAA,mBAAyC;AACzC,oBAAqB;AAGrB,MAAM,kBAAkB,CAAC,UAAqD;AAC5E,QAAM,EAAE,WAAW,eAAe,aAAa,kBAAkB,sBAAsB,IAAI;AAC3F,QAAM,cAAU,qBAA2B,IAAI;AAC/C,QAAM,eAAW,qBAA2B,IAAI;AAChD,QAAM,gBAAY,qBAA8C,IAAI;AACpE,QAAM,iBAAa,qBAA8C,IAAI;AAErE,QAAM,EAAE,WAAW,QAAQ,SAAS,MAAM,IAAI,yBAAyB,CAAC;AACxE,QAAM,EAAE,MAAM,IAAI,iBAAiB,CAAC;AAEpC,QAAM,cAAc;AAAA,IAClB,GAAG;AAAA,IACH,GAAG;AAAA,EACL;AAEA,8BAAU,MAAM;AACd,QAAI,UAAU,QAAQ,SAAS;AAC7B,gBAAU,UAAU,WAAW,MAAM,QAAQ,QAAQ,MAAM,GAAG,GAAG;AAAA,IACnE;AACA,QAAI,UAAU,SAAS,SAAS;AAC9B,iBAAW,UAAU,WAAW,MAAM,SAAS,QAAQ,MAAM,GAAG,GAAG;AAAA,IACrE;AAEA,WAAO,MAAM;AACX,mBAAa,UAAU,OAAO;AAC9B,mBAAa,WAAW,OAAO;AAAA,IACjC;AAAA,EACF,GAAG,CAAC,QAAQ,SAAS,QAAQ,CAAC;AAE9B,SACE;AAAA,IACG;AAAA,gBAAU,aAAa,UACtB,4CAAC;AAAA,QACC,sDAAC;AAAA,UAAiB,UAAU;AAAA,UAAU,GAAG;AAAA,SAAuB;AAAA,OAClE;AAAA,MAED,aACC,4CAAC;AAAA,QAAK;AAAA,QACJ,sDAAC;AAAA,UAAW,GAAG;AAAA,SAAa;AAAA,OAC9B;AAAA,MAED,UAAU,aAAa,WACtB,4CAAC;AAAA,QACC,sDAAC;AAAA,UAAiB,UAAU;AAAA,UAAW,GAAG;AAAA,SAAuB;AAAA,OACnE;AAAA;AAAA,GAEJ;AAEJ;",
|
|
6
|
+
"names": []
|
|
7
7
|
}
|
|
@@ -28,9 +28,9 @@ __export(Button_exports, {
|
|
|
28
28
|
});
|
|
29
29
|
module.exports = __toCommonJS(Button_exports);
|
|
30
30
|
var React = __toESM(require("react"));
|
|
31
|
-
var
|
|
31
|
+
var import_jsx_runtime = require("react/jsx-runtime");
|
|
32
32
|
var import_ds_button = require("@elliemae/ds-button");
|
|
33
|
-
const MiniToolbarButton = (props) => /* @__PURE__ */
|
|
33
|
+
const MiniToolbarButton = (props) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_button.DSButton, {
|
|
34
34
|
...props,
|
|
35
35
|
"aria-label": props.ariaLabel,
|
|
36
36
|
"data-testid": "ds-mini-toolbar__shortcut"
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/Components/outOfTheBox/Button.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
4
|
"sourcesContent": ["import React from 'react';\nimport { DSButton } from '@elliemae/ds-button';\n\nconst MiniToolbarButton = (props: Record<string, unknown>): React.ReactElement => (\n <DSButton {...props} aria-label={props.ariaLabel} data-testid=\"ds-mini-toolbar__shortcut\" />\n);\n\nexport { MiniToolbarButton };\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB
|
|
6
|
-
"names": [
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB;AACA,uBAAyB;AAEzB,MAAM,oBAAoB,CAAC,UACzB,4CAAC;AAAA,EAAU,GAAG;AAAA,EAAO,cAAY,MAAM;AAAA,EAAW,eAAY;AAAA,CAA4B;",
|
|
6
|
+
"names": []
|
|
7
7
|
}
|
|
@@ -28,9 +28,9 @@ __export(ComboBox_exports, {
|
|
|
28
28
|
});
|
|
29
29
|
module.exports = __toCommonJS(ComboBox_exports);
|
|
30
30
|
var React = __toESM(require("react"));
|
|
31
|
-
var
|
|
31
|
+
var import_jsx_runtime = require("react/jsx-runtime");
|
|
32
32
|
var import_ds_form = require("@elliemae/ds-form");
|
|
33
|
-
const MiniToolbarComboBox = (props) => /* @__PURE__ */
|
|
33
|
+
const MiniToolbarComboBox = (props) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_form.DSComboBox2, {
|
|
34
34
|
...props
|
|
35
35
|
});
|
|
36
36
|
//# sourceMappingURL=ComboBox.js.map
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/Components/outOfTheBox/ComboBox.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
4
|
"sourcesContent": ["import React from 'react';\nimport { DSComboBox2 } from '@elliemae/ds-form';\n\nconst MiniToolbarComboBox = (props: Record<string, unknown>): React.ReactElement => <DSComboBox2 {...props} />;\n\nexport { MiniToolbarComboBox };\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB
|
|
6
|
-
"names": [
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB;AACA,qBAA4B;AAE5B,MAAM,sBAAsB,CAAC,UAAuD,4CAAC;AAAA,EAAa,GAAG;AAAA,CAAO;",
|
|
6
|
+
"names": []
|
|
7
7
|
}
|
|
@@ -28,16 +28,16 @@ __export(IconItem_exports, {
|
|
|
28
28
|
});
|
|
29
29
|
module.exports = __toCommonJS(IconItem_exports);
|
|
30
30
|
var React = __toESM(require("react"));
|
|
31
|
-
var
|
|
31
|
+
var import_jsx_runtime = require("react/jsx-runtime");
|
|
32
32
|
var import_styles = require("../../styles");
|
|
33
33
|
const MiniToolbarIcon = (props) => {
|
|
34
34
|
const { Icon, size, color, onClick, ariaLabel, style, buttonType = "secondary" } = props;
|
|
35
|
-
return /* @__PURE__ */
|
|
35
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styles.StyledButton, {
|
|
36
36
|
"aria-label": ariaLabel,
|
|
37
37
|
buttonType,
|
|
38
38
|
onClick,
|
|
39
39
|
style,
|
|
40
|
-
leftIcon: /* @__PURE__ */
|
|
40
|
+
leftIcon: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Icon, {
|
|
41
41
|
size,
|
|
42
42
|
color
|
|
43
43
|
}),
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/Components/outOfTheBox/IconItem.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
4
|
"sourcesContent": ["import React from 'react';\nimport { StyledButton } from '../../styles';\nimport { MiniToolbarIconItemPropsT } from '../../index.d';\n\nconst MiniToolbarIcon = (props: MiniToolbarIconItemPropsT): React.ReactElement => {\n const { Icon, 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={<Icon size={size} color={color} />}\n data-testid=\"ds-mini-toolbar__shortcut\"\n />\n );\n};\n\nexport { MiniToolbarIcon };\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB
|
|
6
|
-
"names": [
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB;AACA,oBAA6B;AAG7B,MAAM,kBAAkB,CAAC,UAAyD;AAChF,QAAM,EAAE,MAAM,MAAM,OAAO,SAAS,WAAW,OAAO,aAAa,YAAY,IAAI;AAEnF,SACE,4CAAC;AAAA,IACC,cAAY;AAAA,IACZ;AAAA,IACA;AAAA,IACA;AAAA,IACA,UAAU,4CAAC;AAAA,MAAK;AAAA,MAAY;AAAA,KAAc;AAAA,IAC1C,eAAY;AAAA,GACd;AAEJ;",
|
|
6
|
+
"names": []
|
|
7
7
|
}
|
|
@@ -29,25 +29,25 @@ __export(SearchBox_exports, {
|
|
|
29
29
|
});
|
|
30
30
|
module.exports = __toCommonJS(SearchBox_exports);
|
|
31
31
|
var React = __toESM(require("react"));
|
|
32
|
-
var
|
|
32
|
+
var import_jsx_runtime = require("react/jsx-runtime");
|
|
33
33
|
var import_ds_icons = require("@elliemae/ds-icons");
|
|
34
34
|
var import_ds_form = require("@elliemae/ds-form");
|
|
35
35
|
var import_styles = require("../../styles");
|
|
36
36
|
const MiniToolbarSearchButton = (props) => {
|
|
37
37
|
const { size, color, onClick, ariaLabel, style, buttonType = "secondary" } = props;
|
|
38
|
-
return /* @__PURE__ */
|
|
38
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styles.StyledButton, {
|
|
39
39
|
"aria-label": ariaLabel,
|
|
40
40
|
buttonType,
|
|
41
41
|
onClick,
|
|
42
42
|
style,
|
|
43
|
-
leftIcon: /* @__PURE__ */
|
|
43
|
+
leftIcon: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_icons.Search, {
|
|
44
44
|
size,
|
|
45
45
|
color
|
|
46
46
|
}),
|
|
47
47
|
"data-testid": "ds-mini-toolbar__shortcut"
|
|
48
48
|
});
|
|
49
49
|
};
|
|
50
|
-
const MiniToolbarSearchBox = (props) => /* @__PURE__ */
|
|
50
|
+
const MiniToolbarSearchBox = (props) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_form.DSSearchBox, {
|
|
51
51
|
clearable: true,
|
|
52
52
|
showIcon: false,
|
|
53
53
|
...props
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/Components/outOfTheBox/SearchBox.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
4
|
"sourcesContent": ["/* 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", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;
|
|
6
|
-
"names": [
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB;AAEA,sBAAuB;AACvB,qBAA4B;AAC5B,oBAA6B;AAG7B,MAAM,0BAA0B,CAAC,UAAyD;AACxF,QAAM,EAAE,MAAM,OAAO,SAAS,WAAW,OAAO,aAAa,YAAY,IAAI;AAE7E,SACE,4CAAC;AAAA,IACC,cAAY;AAAA,IACZ;AAAA,IACA;AAAA,IACA;AAAA,IACA,UAAU,4CAAC;AAAA,MAAO;AAAA,MAAY;AAAA,KAAc;AAAA,IAC5C,eAAY;AAAA,GACd;AAEJ;AAEA,MAAM,uBAAuB,CAAC,UAC5B,4CAAC;AAAA,EAAY,WAAS;AAAA,EAAC,UAAU;AAAA,EAAQ,GAAG;AAAA,CAAO;",
|
|
6
|
+
"names": []
|
|
7
7
|
}
|
|
@@ -28,9 +28,9 @@ __export(Separator_exports, {
|
|
|
28
28
|
});
|
|
29
29
|
module.exports = __toCommonJS(Separator_exports);
|
|
30
30
|
var React = __toESM(require("react"));
|
|
31
|
-
var
|
|
31
|
+
var import_jsx_runtime = require("react/jsx-runtime");
|
|
32
32
|
var import_styles = require("../../styles");
|
|
33
|
-
const MiniToolbarSeparator = () => /* @__PURE__ */
|
|
33
|
+
const MiniToolbarSeparator = () => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styles.Separator, {
|
|
34
34
|
"data-testid": "ds-mini-toolbar__separator"
|
|
35
35
|
});
|
|
36
36
|
//# sourceMappingURL=Separator.js.map
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/Components/outOfTheBox/Separator.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
4
|
"sourcesContent": ["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", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB
|
|
6
|
-
"names": [
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB;AACA,oBAA0B;AAE1B,MAAM,uBAAuB,MAC3B,4CAAC;AAAA,EAAU,eAAY;AAAA,CAA6B;",
|
|
6
|
+
"names": []
|
|
7
7
|
}
|
|
@@ -28,7 +28,8 @@ __export(useGenerateItems_exports, {
|
|
|
28
28
|
});
|
|
29
29
|
module.exports = __toCommonJS(useGenerateItems_exports);
|
|
30
30
|
var React = __toESM(require("react"));
|
|
31
|
-
var
|
|
31
|
+
var import_jsx_runtime = require("react/jsx-runtime");
|
|
32
|
+
var import_react = require("react");
|
|
32
33
|
var import_uid = require("uid");
|
|
33
34
|
var import_ds_icons = require("@elliemae/ds-icons");
|
|
34
35
|
var import_outOfTheBox = require("../Components/outOfTheBox");
|
|
@@ -42,7 +43,7 @@ const useGenerateItems = (items) => {
|
|
|
42
43
|
let Component;
|
|
43
44
|
let ContextualRegion;
|
|
44
45
|
if (component === import_outOfTheBox.SEPARATOR)
|
|
45
|
-
return /* @__PURE__ */
|
|
46
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_outOfTheBox.MiniToolbarSeparator, {});
|
|
46
47
|
if (component === import_outOfTheBox.BUTTON)
|
|
47
48
|
Component = import_outOfTheBox.MiniToolbarButton;
|
|
48
49
|
else if (component === import_outOfTheBox.ICON_ITEM)
|
|
@@ -61,14 +62,13 @@ const useGenerateItems = (items) => {
|
|
|
61
62
|
if (!Component) {
|
|
62
63
|
Component = shortcutComponent;
|
|
63
64
|
}
|
|
64
|
-
return /* @__PURE__ */
|
|
65
|
-
key: `${instanceUID}-shortcut-${index}`,
|
|
65
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ToolbarShortcut.ToolbarShortcut, {
|
|
66
66
|
Component,
|
|
67
67
|
shortcutProps,
|
|
68
68
|
sharedProps,
|
|
69
69
|
ContextualRegion,
|
|
70
70
|
contextualRegionProps
|
|
71
|
-
});
|
|
71
|
+
}, `${instanceUID}-shortcut-${index}`);
|
|
72
72
|
}),
|
|
73
73
|
[instanceUID, items]
|
|
74
74
|
);
|
|
@@ -93,11 +93,11 @@ const useGenerateItems = (items) => {
|
|
|
93
93
|
};
|
|
94
94
|
}
|
|
95
95
|
if (component === import_outOfTheBox.ICON_ITEM) {
|
|
96
|
-
dropdownItem.leftAddon = /* @__PURE__ */
|
|
96
|
+
dropdownItem.leftAddon = /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Icon, {
|
|
97
97
|
color
|
|
98
98
|
});
|
|
99
99
|
} else if (component === import_outOfTheBox.SEARCH_BOX) {
|
|
100
|
-
dropdownItem.leftAddon = /* @__PURE__ */
|
|
100
|
+
dropdownItem.leftAddon = /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_icons.Search, {
|
|
101
101
|
color
|
|
102
102
|
});
|
|
103
103
|
} else if (component === import_outOfTheBox.COMBO_BOX) {
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/hooks/useGenerateItems.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
4
|
"sourcesContent": ["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", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAA+B;AAC/B,iBAAoB;AACpB,sBAAuB;AACvB,yBAWO;AACP,6BAAgC;AAChC,uBAAwC;AAGxC,MAAM,mBAAmB,CAAC,UAAgF;AACxG,QAAM,kBAAc,sBAAQ,UAAM,gBAAI,CAAC,GAAG,CAAC,CAAC;AAE5C,QAAM,oBAAgB;AAAA,IACpB,MACE,MACG,OAAO,CAAC,SAAS,KAAK,eAAe,KAAK,cAAc,iCAAc,KAAK,gBAAgB,EAC3F,IAAI,CAAC,MAAM,UAAU;AACpB,YAAM,EAAE,WAAW,mBAAmB,eAAe,aAAa,kBAAkB,sBAAsB,IACxG;AAEF,UAAI;AACJ,UAAI;AAEJ,UAAI,cAAc;AAAW,eAAO,
|
|
6
|
-
"names": ["
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB;AAAA,mBAA+B;AAC/B,iBAAoB;AACpB,sBAAuB;AACvB,yBAWO;AACP,6BAAgC;AAChC,uBAAwC;AAGxC,MAAM,mBAAmB,CAAC,UAAgF;AACxG,QAAM,kBAAc,sBAAQ,UAAM,gBAAI,CAAC,GAAG,CAAC,CAAC;AAE5C,QAAM,oBAAgB;AAAA,IACpB,MACE,MACG,OAAO,CAAC,SAAS,KAAK,eAAe,KAAK,cAAc,iCAAc,KAAK,gBAAgB,EAC3F,IAAI,CAAC,MAAM,UAAU;AACpB,YAAM,EAAE,WAAW,mBAAmB,eAAe,aAAa,kBAAkB,sBAAsB,IACxG;AAEF,UAAI;AACJ,UAAI;AAEJ,UAAI,cAAc;AAAW,eAAO,4CAAC,2CAAqB;AAC1D,UAAI,cAAc;AAAQ,oBAAY;AAAA,eAC7B,cAAc;AAAW,oBAAY;AAAA,eACrC,cAAc;AAAW,oBAAY;AAAA,eACrC,cAAc,+BAAY;AACjC,YAAI,KAAK,aAAa;AACpB,sBAAY;AAAA,QACd;AACA,2BAAmB;AAAA,MACrB;AACA,UAAI,CAAC,kBAAkB;AACrB,2BAAmB;AAAA,MACrB;AACA,UAAI,CAAC,WAAW;AACd,oBAAY;AAAA,MACd;AAEA,aACE,4CAAC;AAAA,QAEC;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,SALK,GAAG,wBAAwB,OAMlC;AAAA,IAEJ,CAAC;AAAA,IACL,CAAC,aAAa,KAAK;AAAA,EACrB;AAEA,QAAM,wBAAoB;AAAA,IACxB,MACE,MAAM,IAAI,CAAC,MAAM,UAAU;AACzB,YAAM,EAAE,WAAW,aAAa,uBAAuB,IAAI;AAC3D,YAAM,eAAuC,CAAC;AAE9C,YAAM,EAAE,MAAM,OAAO,OAAO,QAAQ,IAAI;AAAA,QACtC,GAAG;AAAA,QACH,GAAG;AAAA,MACL;AAEA,UAAI,cAAc;AAAW,qBAAa,OAAO;AAAA,WAC5C;AACH,qBAAa,KAAK,GAAG,wBAAwB;AAC7C,qBAAa,UAAU,MAAM,QAAQ,IAAI;AACzC,qBAAa,QAAQ;AACrB,qBAAa,YAAY,CAAC,MAA2B;AACnD,cAAI,EAAE,QAAQ,WAAW,EAAE,QAAQ,KAAK;AACtC,oBAAQ,IAAI;AAAA,UACd;AAAA,QACF;AAAA,MACF;AAEA,UAAI,cAAc,8BAAW;AAC3B,qBAAa,YAAY,4CAAC;AAAA,UAAK;AAAA,SAAc;AAAA,MAC/C,WAAW,cAAc,+BAAY;AACnC,qBAAa,YAAY,4CAAC;AAAA,UAAO;AAAA,SAAc;AAAA,MACjD,WAAW,cAAc,8BAAW;AAClC,qBAAa,OAAO;AACpB,qBAAa,QAAQ;AACrB,qBAAa,WAAW,YAAY,QAAQ,IAAI,CAAC,QAAQA,WAAU;AACjE,iBAAO,KAAK,GAAG,sBAAsBA;AACrC,iBAAO,UAAU,MAAM,uBAAuB,iBAAiB,MAAM;AACrE,iBAAO,YAAY,CAAC,MAA2B;AAC7C,gBAAI,EAAE,QAAQ,OAAO,EAAE,QAAQ,SAAS;AACtC,qCAAuB,iBAAiB,MAAM;AAAA,YAChD;AAAA,UACF;AACA,iBAAO;AAAA,QACT,CAAC;AAAA,MACH;AAEA,aAAO;AAAA,IACT,CAAC;AAAA,IACH,CAAC,aAAa,KAAK;AAAA,EACrB;AAEA,SAAO,CAAC,eAAe,iBAAiB;AAC1C;",
|
|
6
|
+
"names": ["index"]
|
|
7
7
|
}
|
|
@@ -1,12 +1,13 @@
|
|
|
1
1
|
import * as React from "react";
|
|
2
|
-
import
|
|
2
|
+
import { jsx, jsxs } from "react/jsx-runtime";
|
|
3
|
+
import { useState, useCallback } from "react";
|
|
3
4
|
import { describe } from "@elliemae/ds-utilities";
|
|
4
5
|
import { DSDropdownMenu } from "@elliemae/ds-dropdownmenu";
|
|
5
6
|
import { MoreOptionsVert } from "@elliemae/ds-icons";
|
|
6
7
|
import { StyledButton, Container } from "../styles";
|
|
7
8
|
import { miniToolbarProps } from "../propTypes";
|
|
8
9
|
import { useGenerateItems } from "../hooks/useGenerateItems";
|
|
9
|
-
const Elipsis = /* @__PURE__ */
|
|
10
|
+
const Elipsis = /* @__PURE__ */ jsx(MoreOptionsVert, {
|
|
10
11
|
color: ["brand-primary", "600"],
|
|
11
12
|
size: "m"
|
|
12
13
|
});
|
|
@@ -21,26 +22,30 @@ const MiniToolbar = ({ items, overflowButtonProps }) => {
|
|
|
21
22
|
}
|
|
22
23
|
}, []);
|
|
23
24
|
const { ariaLabel, style, buttonType = "secondary" } = overflowButtonProps || {};
|
|
24
|
-
return /* @__PURE__ */
|
|
25
|
+
return /* @__PURE__ */ jsxs(Container, {
|
|
25
26
|
role: "toolbar",
|
|
26
|
-
"data-testid": "ds-mini-toolbar"
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
27
|
+
"data-testid": "ds-mini-toolbar",
|
|
28
|
+
children: [
|
|
29
|
+
shortcutItems,
|
|
30
|
+
/* @__PURE__ */ jsx(DSDropdownMenu, {
|
|
31
|
+
"data-testid": "ds-mini-toolbar__dropdown-menu",
|
|
32
|
+
isOpen: isDropdownMenuOpen,
|
|
33
|
+
onSelectMenuItem: closeDropdownMenu,
|
|
34
|
+
onClickOutsideMenu: closeDropdownMenu,
|
|
35
|
+
options: dropdownMenuItems,
|
|
36
|
+
triggerComponent: /* @__PURE__ */ jsx(StyledButton, {
|
|
37
|
+
"aria-label": ariaLabel,
|
|
38
|
+
"data-testid": "ds-mini-toolbar__elipsis",
|
|
39
|
+
size: "m",
|
|
40
|
+
style,
|
|
41
|
+
buttonType,
|
|
42
|
+
onClick: openDropdownMenu,
|
|
43
|
+
onKeyPress: openDropdownMenuKeyPress,
|
|
44
|
+
leftIcon: Elipsis
|
|
45
|
+
})
|
|
46
|
+
})
|
|
47
|
+
]
|
|
48
|
+
});
|
|
44
49
|
};
|
|
45
50
|
MiniToolbar.propTypes = miniToolbarProps;
|
|
46
51
|
MiniToolbar.displayName = "MiniToolbar";
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/Components/MiniToolbar.tsx"],
|
|
4
4
|
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useState, useCallback } from 'react';\nimport { describe } from '@elliemae/ds-utilities';\nimport { DSDropdownMenu } from '@elliemae/ds-dropdownmenu';\nimport { MoreOptionsVert } from '@elliemae/ds-icons';\nimport { StyledButton, Container } from '../styles';\nimport { miniToolbarProps } from '../propTypes';\nimport { useGenerateItems } from '../hooks/useGenerateItems';\nimport { MiniToolbarPropsT } from '../index.d';\n\nconst Elipsis = <MoreOptionsVert color={['brand-primary', '600']} size=\"m\" />;\n\nconst MiniToolbar = ({ items, overflowButtonProps }: MiniToolbarPropsT): React.ReactElement => {\n const [shortcutItems, dropdownMenuItems] = useGenerateItems(items);\n const [isDropdownMenuOpen, setIsDropdownMenuOpen] = useState<boolean>(false);\n\n const closeDropdownMenu = useCallback(() => setIsDropdownMenuOpen(false), []);\n const openDropdownMenu = useCallback(() => setIsDropdownMenuOpen(true), []);\n const openDropdownMenuKeyPress = useCallback((e) => {\n if (e.key === ' ') {\n setIsDropdownMenuOpen(true);\n }\n }, []);\n\n const { ariaLabel, style, buttonType = 'secondary' } = overflowButtonProps || {};\n\n return (\n <Container role=\"toolbar\" data-testid=\"ds-mini-toolbar\">\n {shortcutItems}\n <DSDropdownMenu\n data-testid=\"ds-mini-toolbar__dropdown-menu\"\n isOpen={isDropdownMenuOpen}\n onSelectMenuItem={closeDropdownMenu}\n onClickOutsideMenu={closeDropdownMenu}\n options={dropdownMenuItems}\n triggerComponent={\n <StyledButton\n aria-label={ariaLabel}\n data-testid=\"ds-mini-toolbar__elipsis\"\n size=\"m\"\n style={style}\n buttonType={buttonType}\n onClick={openDropdownMenu}\n onKeyPress={openDropdownMenuKeyPress}\n leftIcon={Elipsis}\n />\n }\n />\n </Container>\n );\n};\n\nMiniToolbar.propTypes = miniToolbarProps;\nMiniToolbar.displayName = 'MiniToolbar';\nconst MiniToolbarWithSchema = describe(MiniToolbar);\nMiniToolbarWithSchema.propTypes = miniToolbarProps;\n\nexport { MiniToolbar, MiniToolbarWithSchema };\n"],
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;ACAvB,
|
|
6
|
-
"names": [
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;ACAvB;AAAA,SAAgB,UAAU,mBAAmB;AAC7C,SAAS,gBAAgB;AACzB,SAAS,sBAAsB;AAC/B,SAAS,uBAAuB;AAChC,SAAS,cAAc,iBAAiB;AACxC,SAAS,wBAAwB;AACjC,SAAS,wBAAwB;AAGjC,MAAM,UAAU,oBAAC;AAAA,EAAgB,OAAO,CAAC,iBAAiB,KAAK;AAAA,EAAG,MAAK;AAAA,CAAI;AAE3E,MAAM,cAAc,CAAC,EAAE,OAAO,oBAAoB,MAA6C;AAC7F,QAAM,CAAC,eAAe,iBAAiB,IAAI,iBAAiB,KAAK;AACjE,QAAM,CAAC,oBAAoB,qBAAqB,IAAI,SAAkB,KAAK;AAE3E,QAAM,oBAAoB,YAAY,MAAM,sBAAsB,KAAK,GAAG,CAAC,CAAC;AAC5E,QAAM,mBAAmB,YAAY,MAAM,sBAAsB,IAAI,GAAG,CAAC,CAAC;AAC1E,QAAM,2BAA2B,YAAY,CAAC,MAAM;AAClD,QAAI,EAAE,QAAQ,KAAK;AACjB,4BAAsB,IAAI;AAAA,IAC5B;AAAA,EACF,GAAG,CAAC,CAAC;AAEL,QAAM,EAAE,WAAW,OAAO,aAAa,YAAY,IAAI,uBAAuB,CAAC;AAE/E,SACE,qBAAC;AAAA,IAAU,MAAK;AAAA,IAAU,eAAY;AAAA,IACnC;AAAA;AAAA,MACD,oBAAC;AAAA,QACC,eAAY;AAAA,QACZ,QAAQ;AAAA,QACR,kBAAkB;AAAA,QAClB,oBAAoB;AAAA,QACpB,SAAS;AAAA,QACT,kBACE,oBAAC;AAAA,UACC,cAAY;AAAA,UACZ,eAAY;AAAA,UACZ,MAAK;AAAA,UACL;AAAA,UACA;AAAA,UACA,SAAS;AAAA,UACT,YAAY;AAAA,UACZ,UAAU;AAAA,SACZ;AAAA,OAEJ;AAAA;AAAA,GACF;AAEJ;AAEA,YAAY,YAAY;AACxB,YAAY,cAAc;AAC1B,MAAM,wBAAwB,SAAS,WAAW;AAClD,sBAAsB,YAAY;",
|
|
6
|
+
"names": []
|
|
7
7
|
}
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import * as React from "react";
|
|
2
|
-
import
|
|
2
|
+
import { Fragment, jsx, jsxs } from "react/jsx-runtime";
|
|
3
|
+
import { useRef, useEffect } from "react";
|
|
3
4
|
import { Item } from "../styles";
|
|
4
5
|
const ToolbarShortcut = (props) => {
|
|
5
6
|
const { Component, shortcutProps, sharedProps, ContextualRegion, contextualRegionProps } = props;
|
|
@@ -25,17 +26,28 @@ const ToolbarShortcut = (props) => {
|
|
|
25
26
|
clearTimeout(timerRight.current);
|
|
26
27
|
};
|
|
27
28
|
}, [isOpen, leftRef, rightRef]);
|
|
28
|
-
return /* @__PURE__ */
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
29
|
+
return /* @__PURE__ */ jsxs(Fragment, {
|
|
30
|
+
children: [
|
|
31
|
+
isOpen && position === "left" && /* @__PURE__ */ jsx(Item, {
|
|
32
|
+
children: /* @__PURE__ */ jsx(ContextualRegion, {
|
|
33
|
+
innerRef: leftRef,
|
|
34
|
+
...contextualRegionProps
|
|
35
|
+
})
|
|
36
|
+
}),
|
|
37
|
+
Component && /* @__PURE__ */ jsx(Item, {
|
|
38
|
+
style,
|
|
39
|
+
children: /* @__PURE__ */ jsx(Component, {
|
|
40
|
+
...mergedProps
|
|
41
|
+
})
|
|
42
|
+
}),
|
|
43
|
+
isOpen && position === "right" && /* @__PURE__ */ jsx(Item, {
|
|
44
|
+
children: /* @__PURE__ */ jsx(ContextualRegion, {
|
|
45
|
+
innerRef: rightRef,
|
|
46
|
+
...contextualRegionProps
|
|
47
|
+
})
|
|
48
|
+
})
|
|
49
|
+
]
|
|
50
|
+
});
|
|
39
51
|
};
|
|
40
52
|
export {
|
|
41
53
|
ToolbarShortcut
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/Components/ToolbarShortcut.tsx"],
|
|
4
4
|
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useRef, useEffect } from 'react';\nimport { Item } from '../styles';\nimport { ToolbarShortcutPropsT } from '../index.d';\n\nconst ToolbarShortcut = (props: ToolbarShortcutPropsT): React.ReactElement => {\n const { Component, shortcutProps, sharedProps, ContextualRegion, contextualRegionProps } = props;\n const leftRef = useRef<HTMLElement | null>(null);\n const rightRef = useRef<HTMLElement | null>(null);\n const timerLeft = useRef<ReturnType<typeof setInterval> | null>(null);\n const timerRight = useRef<ReturnType<typeof setInterval> | null>(null);\n\n const { position = 'left', isOpen = false } = contextualRegionProps || {};\n const { style } = shortcutProps || {};\n\n const mergedProps = {\n ...sharedProps,\n ...shortcutProps,\n };\n\n useEffect(() => {\n if (isOpen && leftRef.current) {\n timerLeft.current = setTimeout(() => leftRef.current.focus(), 200);\n }\n if (isOpen && rightRef.current) {\n timerRight.current = setTimeout(() => rightRef.current.focus(), 200);\n }\n\n return () => {\n clearTimeout(timerLeft.current);\n clearTimeout(timerRight.current);\n };\n }, [isOpen, leftRef, rightRef]);\n\n return (\n <>\n {isOpen && position === 'left' && (\n <Item>\n <ContextualRegion innerRef={leftRef} {...contextualRegionProps} />\n </Item>\n )}\n {Component && (\n <Item style={style}>\n <Component {...mergedProps} />\n </Item>\n )}\n {isOpen && position === 'right' && (\n <Item>\n <ContextualRegion innerRef={rightRef} {...contextualRegionProps} />\n </Item>\n )}\n </>\n );\n};\n\nexport { ToolbarShortcut };\n"],
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;ACAvB,
|
|
6
|
-
"names": [
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;ACAvB;AAAA,SAAgB,QAAQ,iBAAiB;AACzC,SAAS,YAAY;AAGrB,MAAM,kBAAkB,CAAC,UAAqD;AAC5E,QAAM,EAAE,WAAW,eAAe,aAAa,kBAAkB,sBAAsB,IAAI;AAC3F,QAAM,UAAU,OAA2B,IAAI;AAC/C,QAAM,WAAW,OAA2B,IAAI;AAChD,QAAM,YAAY,OAA8C,IAAI;AACpE,QAAM,aAAa,OAA8C,IAAI;AAErE,QAAM,EAAE,WAAW,QAAQ,SAAS,MAAM,IAAI,yBAAyB,CAAC;AACxE,QAAM,EAAE,MAAM,IAAI,iBAAiB,CAAC;AAEpC,QAAM,cAAc;AAAA,IAClB,GAAG;AAAA,IACH,GAAG;AAAA,EACL;AAEA,YAAU,MAAM;AACd,QAAI,UAAU,QAAQ,SAAS;AAC7B,gBAAU,UAAU,WAAW,MAAM,QAAQ,QAAQ,MAAM,GAAG,GAAG;AAAA,IACnE;AACA,QAAI,UAAU,SAAS,SAAS;AAC9B,iBAAW,UAAU,WAAW,MAAM,SAAS,QAAQ,MAAM,GAAG,GAAG;AAAA,IACrE;AAEA,WAAO,MAAM;AACX,mBAAa,UAAU,OAAO;AAC9B,mBAAa,WAAW,OAAO;AAAA,IACjC;AAAA,EACF,GAAG,CAAC,QAAQ,SAAS,QAAQ,CAAC;AAE9B,SACE;AAAA,IACG;AAAA,gBAAU,aAAa,UACtB,oBAAC;AAAA,QACC,8BAAC;AAAA,UAAiB,UAAU;AAAA,UAAU,GAAG;AAAA,SAAuB;AAAA,OAClE;AAAA,MAED,aACC,oBAAC;AAAA,QAAK;AAAA,QACJ,8BAAC;AAAA,UAAW,GAAG;AAAA,SAAa;AAAA,OAC9B;AAAA,MAED,UAAU,aAAa,WACtB,oBAAC;AAAA,QACC,8BAAC;AAAA,UAAiB,UAAU;AAAA,UAAW,GAAG;AAAA,SAAuB;AAAA,OACnE;AAAA;AAAA,GAEJ;AAEJ;",
|
|
6
|
+
"names": []
|
|
7
7
|
}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import * as React from "react";
|
|
2
|
-
import
|
|
2
|
+
import { jsx } from "react/jsx-runtime";
|
|
3
3
|
import { DSButton } from "@elliemae/ds-button";
|
|
4
|
-
const MiniToolbarButton = (props) => /* @__PURE__ */
|
|
4
|
+
const MiniToolbarButton = (props) => /* @__PURE__ */ jsx(DSButton, {
|
|
5
5
|
...props,
|
|
6
6
|
"aria-label": props.ariaLabel,
|
|
7
7
|
"data-testid": "ds-mini-toolbar__shortcut"
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/Components/outOfTheBox/Button.tsx"],
|
|
4
4
|
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport { DSButton } from '@elliemae/ds-button';\n\nconst MiniToolbarButton = (props: Record<string, unknown>): React.ReactElement => (\n <DSButton {...props} aria-label={props.ariaLabel} data-testid=\"ds-mini-toolbar__shortcut\" />\n);\n\nexport { MiniToolbarButton };\n"],
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;ACAvB
|
|
6
|
-
"names": [
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;ACAvB;AACA,SAAS,gBAAgB;AAEzB,MAAM,oBAAoB,CAAC,UACzB,oBAAC;AAAA,EAAU,GAAG;AAAA,EAAO,cAAY,MAAM;AAAA,EAAW,eAAY;AAAA,CAA4B;",
|
|
6
|
+
"names": []
|
|
7
7
|
}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import * as React from "react";
|
|
2
|
-
import
|
|
2
|
+
import { jsx } from "react/jsx-runtime";
|
|
3
3
|
import { DSComboBox2 } from "@elliemae/ds-form";
|
|
4
|
-
const MiniToolbarComboBox = (props) => /* @__PURE__ */
|
|
4
|
+
const MiniToolbarComboBox = (props) => /* @__PURE__ */ jsx(DSComboBox2, {
|
|
5
5
|
...props
|
|
6
6
|
});
|
|
7
7
|
export {
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/Components/outOfTheBox/ComboBox.tsx"],
|
|
4
4
|
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport { DSComboBox2 } from '@elliemae/ds-form';\n\nconst MiniToolbarComboBox = (props: Record<string, unknown>): React.ReactElement => <DSComboBox2 {...props} />;\n\nexport { MiniToolbarComboBox };\n"],
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;ACAvB
|
|
6
|
-
"names": [
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;ACAvB;AACA,SAAS,mBAAmB;AAE5B,MAAM,sBAAsB,CAAC,UAAuD,oBAAC;AAAA,EAAa,GAAG;AAAA,CAAO;",
|
|
6
|
+
"names": []
|
|
7
7
|
}
|
|
@@ -1,14 +1,14 @@
|
|
|
1
1
|
import * as React from "react";
|
|
2
|
-
import
|
|
2
|
+
import { jsx } from "react/jsx-runtime";
|
|
3
3
|
import { StyledButton } from "../../styles";
|
|
4
4
|
const MiniToolbarIcon = (props) => {
|
|
5
5
|
const { Icon, size, color, onClick, ariaLabel, style, buttonType = "secondary" } = props;
|
|
6
|
-
return /* @__PURE__ */
|
|
6
|
+
return /* @__PURE__ */ jsx(StyledButton, {
|
|
7
7
|
"aria-label": ariaLabel,
|
|
8
8
|
buttonType,
|
|
9
9
|
onClick,
|
|
10
10
|
style,
|
|
11
|
-
leftIcon: /* @__PURE__ */
|
|
11
|
+
leftIcon: /* @__PURE__ */ jsx(Icon, {
|
|
12
12
|
size,
|
|
13
13
|
color
|
|
14
14
|
}),
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/Components/outOfTheBox/IconItem.tsx"],
|
|
4
4
|
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport { StyledButton } from '../../styles';\nimport { MiniToolbarIconItemPropsT } from '../../index.d';\n\nconst MiniToolbarIcon = (props: MiniToolbarIconItemPropsT): React.ReactElement => {\n const { Icon, 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={<Icon size={size} color={color} />}\n data-testid=\"ds-mini-toolbar__shortcut\"\n />\n );\n};\n\nexport { MiniToolbarIcon };\n"],
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;ACAvB
|
|
6
|
-
"names": [
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;ACAvB;AACA,SAAS,oBAAoB;AAG7B,MAAM,kBAAkB,CAAC,UAAyD;AAChF,QAAM,EAAE,MAAM,MAAM,OAAO,SAAS,WAAW,OAAO,aAAa,YAAY,IAAI;AAEnF,SACE,oBAAC;AAAA,IACC,cAAY;AAAA,IACZ;AAAA,IACA;AAAA,IACA;AAAA,IACA,UAAU,oBAAC;AAAA,MAAK;AAAA,MAAY;AAAA,KAAc;AAAA,IAC1C,eAAY;AAAA,GACd;AAEJ;",
|
|
6
|
+
"names": []
|
|
7
7
|
}
|
|
@@ -1,23 +1,23 @@
|
|
|
1
1
|
import * as React from "react";
|
|
2
|
-
import
|
|
2
|
+
import { jsx } from "react/jsx-runtime";
|
|
3
3
|
import { Search } from "@elliemae/ds-icons";
|
|
4
4
|
import { DSSearchBox } from "@elliemae/ds-form";
|
|
5
5
|
import { StyledButton } from "../../styles";
|
|
6
6
|
const MiniToolbarSearchButton = (props) => {
|
|
7
7
|
const { size, color, onClick, ariaLabel, style, buttonType = "secondary" } = props;
|
|
8
|
-
return /* @__PURE__ */
|
|
8
|
+
return /* @__PURE__ */ jsx(StyledButton, {
|
|
9
9
|
"aria-label": ariaLabel,
|
|
10
10
|
buttonType,
|
|
11
11
|
onClick,
|
|
12
12
|
style,
|
|
13
|
-
leftIcon: /* @__PURE__ */
|
|
13
|
+
leftIcon: /* @__PURE__ */ jsx(Search, {
|
|
14
14
|
size,
|
|
15
15
|
color
|
|
16
16
|
}),
|
|
17
17
|
"data-testid": "ds-mini-toolbar__shortcut"
|
|
18
18
|
});
|
|
19
19
|
};
|
|
20
|
-
const MiniToolbarSearchBox = (props) => /* @__PURE__ */
|
|
20
|
+
const MiniToolbarSearchBox = (props) => /* @__PURE__ */ jsx(DSSearchBox, {
|
|
21
21
|
clearable: true,
|
|
22
22
|
showIcon: false,
|
|
23
23
|
...props
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/Components/outOfTheBox/SearchBox.tsx"],
|
|
4
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,YAAY,WAAW;
|
|
6
|
-
"names": [
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;ACAvB;AAEA,SAAS,cAAc;AACvB,SAAS,mBAAmB;AAC5B,SAAS,oBAAoB;AAG7B,MAAM,0BAA0B,CAAC,UAAyD;AACxF,QAAM,EAAE,MAAM,OAAO,SAAS,WAAW,OAAO,aAAa,YAAY,IAAI;AAE7E,SACE,oBAAC;AAAA,IACC,cAAY;AAAA,IACZ;AAAA,IACA;AAAA,IACA;AAAA,IACA,UAAU,oBAAC;AAAA,MAAO;AAAA,MAAY;AAAA,KAAc;AAAA,IAC5C,eAAY;AAAA,GACd;AAEJ;AAEA,MAAM,uBAAuB,CAAC,UAC5B,oBAAC;AAAA,EAAY,WAAS;AAAA,EAAC,UAAU;AAAA,EAAQ,GAAG;AAAA,CAAO;",
|
|
6
|
+
"names": []
|
|
7
7
|
}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import * as React from "react";
|
|
2
|
-
import
|
|
2
|
+
import { jsx } from "react/jsx-runtime";
|
|
3
3
|
import { Separator } from "../../styles";
|
|
4
|
-
const MiniToolbarSeparator = () => /* @__PURE__ */
|
|
4
|
+
const MiniToolbarSeparator = () => /* @__PURE__ */ jsx(Separator, {
|
|
5
5
|
"data-testid": "ds-mini-toolbar__separator"
|
|
6
6
|
});
|
|
7
7
|
export {
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/Components/outOfTheBox/Separator.tsx"],
|
|
4
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,YAAY,WAAW;ACAvB
|
|
6
|
-
"names": [
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;ACAvB;AACA,SAAS,iBAAiB;AAE1B,MAAM,uBAAuB,MAC3B,oBAAC;AAAA,EAAU,eAAY;AAAA,CAA6B;",
|
|
6
|
+
"names": []
|
|
7
7
|
}
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import * as React from "react";
|
|
2
|
-
import
|
|
2
|
+
import { jsx } from "react/jsx-runtime";
|
|
3
|
+
import { useMemo } from "react";
|
|
3
4
|
import { uid } from "uid";
|
|
4
5
|
import { Search } from "@elliemae/ds-icons";
|
|
5
6
|
import {
|
|
@@ -24,7 +25,7 @@ const useGenerateItems = (items) => {
|
|
|
24
25
|
let Component;
|
|
25
26
|
let ContextualRegion;
|
|
26
27
|
if (component === SEPARATOR)
|
|
27
|
-
return /* @__PURE__ */
|
|
28
|
+
return /* @__PURE__ */ jsx(MiniToolbarSeparator, {});
|
|
28
29
|
if (component === BUTTON)
|
|
29
30
|
Component = MiniToolbarButton;
|
|
30
31
|
else if (component === ICON_ITEM)
|
|
@@ -43,14 +44,13 @@ const useGenerateItems = (items) => {
|
|
|
43
44
|
if (!Component) {
|
|
44
45
|
Component = shortcutComponent;
|
|
45
46
|
}
|
|
46
|
-
return /* @__PURE__ */
|
|
47
|
-
key: `${instanceUID}-shortcut-${index}`,
|
|
47
|
+
return /* @__PURE__ */ jsx(ToolbarShortcut, {
|
|
48
48
|
Component,
|
|
49
49
|
shortcutProps,
|
|
50
50
|
sharedProps,
|
|
51
51
|
ContextualRegion,
|
|
52
52
|
contextualRegionProps
|
|
53
|
-
});
|
|
53
|
+
}, `${instanceUID}-shortcut-${index}`);
|
|
54
54
|
}),
|
|
55
55
|
[instanceUID, items]
|
|
56
56
|
);
|
|
@@ -75,11 +75,11 @@ const useGenerateItems = (items) => {
|
|
|
75
75
|
};
|
|
76
76
|
}
|
|
77
77
|
if (component === ICON_ITEM) {
|
|
78
|
-
dropdownItem.leftAddon = /* @__PURE__ */
|
|
78
|
+
dropdownItem.leftAddon = /* @__PURE__ */ jsx(Icon, {
|
|
79
79
|
color
|
|
80
80
|
});
|
|
81
81
|
} else if (component === SEARCH_BOX) {
|
|
82
|
-
dropdownItem.leftAddon = /* @__PURE__ */
|
|
82
|
+
dropdownItem.leftAddon = /* @__PURE__ */ jsx(Search, {
|
|
83
83
|
color
|
|
84
84
|
});
|
|
85
85
|
} else if (component === COMBO_BOX) {
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/hooks/useGenerateItems.tsx"],
|
|
4
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,YAAY,WAAW;ACAvB,
|
|
6
|
-
"names": ["
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;ACAvB;AAAA,SAAgB,eAAe;AAC/B,SAAS,WAAW;AACpB,SAAS,cAAc;AACvB;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,uBAAuB;AAChC,SAAS,+BAA+B;AAGxC,MAAM,mBAAmB,CAAC,UAAgF;AACxG,QAAM,cAAc,QAAQ,MAAM,IAAI,CAAC,GAAG,CAAC,CAAC;AAE5C,QAAM,gBAAgB;AAAA,IACpB,MACE,MACG,OAAO,CAAC,SAAS,KAAK,eAAe,KAAK,cAAc,cAAc,KAAK,gBAAgB,EAC3F,IAAI,CAAC,MAAM,UAAU;AACpB,YAAM,EAAE,WAAW,mBAAmB,eAAe,aAAa,kBAAkB,sBAAsB,IACxG;AAEF,UAAI;AACJ,UAAI;AAEJ,UAAI,cAAc;AAAW,eAAO,oBAAC,wBAAqB;AAC1D,UAAI,cAAc;AAAQ,oBAAY;AAAA,eAC7B,cAAc;AAAW,oBAAY;AAAA,eACrC,cAAc;AAAW,oBAAY;AAAA,eACrC,cAAc,YAAY;AACjC,YAAI,KAAK,aAAa;AACpB,sBAAY;AAAA,QACd;AACA,2BAAmB;AAAA,MACrB;AACA,UAAI,CAAC,kBAAkB;AACrB,2BAAmB;AAAA,MACrB;AACA,UAAI,CAAC,WAAW;AACd,oBAAY;AAAA,MACd;AAEA,aACE,oBAAC;AAAA,QAEC;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,SALK,GAAG,wBAAwB,OAMlC;AAAA,IAEJ,CAAC;AAAA,IACL,CAAC,aAAa,KAAK;AAAA,EACrB;AAEA,QAAM,oBAAoB;AAAA,IACxB,MACE,MAAM,IAAI,CAAC,MAAM,UAAU;AACzB,YAAM,EAAE,WAAW,aAAa,uBAAuB,IAAI;AAC3D,YAAM,eAAuC,CAAC;AAE9C,YAAM,EAAE,MAAM,OAAO,OAAO,QAAQ,IAAI;AAAA,QACtC,GAAG;AAAA,QACH,GAAG;AAAA,MACL;AAEA,UAAI,cAAc;AAAW,qBAAa,OAAO;AAAA,WAC5C;AACH,qBAAa,KAAK,GAAG,wBAAwB;AAC7C,qBAAa,UAAU,MAAM,QAAQ,IAAI;AACzC,qBAAa,QAAQ;AACrB,qBAAa,YAAY,CAAC,MAA2B;AACnD,cAAI,EAAE,QAAQ,WAAW,EAAE,QAAQ,KAAK;AACtC,oBAAQ,IAAI;AAAA,UACd;AAAA,QACF;AAAA,MACF;AAEA,UAAI,cAAc,WAAW;AAC3B,qBAAa,YAAY,oBAAC;AAAA,UAAK;AAAA,SAAc;AAAA,MAC/C,WAAW,cAAc,YAAY;AACnC,qBAAa,YAAY,oBAAC;AAAA,UAAO;AAAA,SAAc;AAAA,MACjD,WAAW,cAAc,WAAW;AAClC,qBAAa,OAAO;AACpB,qBAAa,QAAQ;AACrB,qBAAa,WAAW,YAAY,QAAQ,IAAI,CAAC,QAAQA,WAAU;AACjE,iBAAO,KAAK,GAAG,sBAAsBA;AACrC,iBAAO,UAAU,MAAM,uBAAuB,iBAAiB,MAAM;AACrE,iBAAO,YAAY,CAAC,MAA2B;AAC7C,gBAAI,EAAE,QAAQ,OAAO,EAAE,QAAQ,SAAS;AACtC,qCAAuB,iBAAiB,MAAM;AAAA,YAChD;AAAA,UACF;AACA,iBAAO;AAAA,QACT,CAAC;AAAA,MACH;AAEA,aAAO;AAAA,IACT,CAAC;AAAA,IACH,CAAC,aAAa,KAAK;AAAA,EACrB;AAEA,SAAO,CAAC,eAAe,iBAAiB;AAC1C;",
|
|
6
|
+
"names": ["index"]
|
|
7
7
|
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@elliemae/ds-mini-toolbar",
|
|
3
|
-
"version": "3.
|
|
3
|
+
"version": "3.6.0-next.0",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"description": "ICE MT - Dimsum - MiniToolbar",
|
|
6
6
|
"files": [
|
|
@@ -75,12 +75,12 @@
|
|
|
75
75
|
"indent": 4
|
|
76
76
|
},
|
|
77
77
|
"dependencies": {
|
|
78
|
-
"@elliemae/ds-button": "3.
|
|
79
|
-
"@elliemae/ds-dropdownmenu": "3.
|
|
80
|
-
"@elliemae/ds-form": "3.
|
|
81
|
-
"@elliemae/ds-icons": "3.
|
|
82
|
-
"@elliemae/ds-system": "3.
|
|
83
|
-
"@elliemae/ds-utilities": "3.
|
|
78
|
+
"@elliemae/ds-button": "3.6.0-next.0",
|
|
79
|
+
"@elliemae/ds-dropdownmenu": "3.6.0-next.0",
|
|
80
|
+
"@elliemae/ds-form": "3.6.0-next.0",
|
|
81
|
+
"@elliemae/ds-icons": "3.6.0-next.0",
|
|
82
|
+
"@elliemae/ds-system": "3.6.0-next.0",
|
|
83
|
+
"@elliemae/ds-utilities": "3.6.0-next.0",
|
|
84
84
|
"uid": "~2.0.0"
|
|
85
85
|
},
|
|
86
86
|
"devDependencies": {
|