@elliemae/ds-mini-toolbar 3.12.0-rc.2 → 3.12.0-rc.20
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 +22 -23
- package/dist/cjs/Components/MiniToolbar.js.map +1 -1
- package/dist/cjs/Components/ToolbarShortcut.js +5 -22
- package/dist/cjs/Components/ToolbarShortcut.js.map +1 -1
- package/dist/cjs/Components/outOfTheBox/Button.js +1 -5
- package/dist/cjs/Components/outOfTheBox/Button.js.map +1 -1
- package/dist/cjs/Components/outOfTheBox/ComboBox.js +1 -3
- package/dist/cjs/Components/outOfTheBox/ComboBox.js.map +1 -1
- package/dist/cjs/Components/outOfTheBox/IconItem.js +11 -11
- package/dist/cjs/Components/outOfTheBox/IconItem.js.map +1 -1
- package/dist/cjs/Components/outOfTheBox/SearchBox.js +12 -16
- package/dist/cjs/Components/outOfTheBox/SearchBox.js.map +1 -1
- package/dist/cjs/Components/outOfTheBox/Separator.js +1 -3
- package/dist/cjs/Components/outOfTheBox/Separator.js.map +1 -1
- package/dist/cjs/hooks/useGenerateItems.js +13 -13
- package/dist/cjs/hooks/useGenerateItems.js.map +1 -1
- package/dist/esm/Components/MiniToolbar.js +22 -23
- package/dist/esm/Components/MiniToolbar.js.map +1 -1
- package/dist/esm/Components/ToolbarShortcut.js +5 -22
- package/dist/esm/Components/ToolbarShortcut.js.map +1 -1
- package/dist/esm/Components/outOfTheBox/Button.js +1 -5
- package/dist/esm/Components/outOfTheBox/Button.js.map +1 -1
- package/dist/esm/Components/outOfTheBox/ComboBox.js +1 -3
- package/dist/esm/Components/outOfTheBox/ComboBox.js.map +1 -1
- package/dist/esm/Components/outOfTheBox/IconItem.js +11 -11
- package/dist/esm/Components/outOfTheBox/IconItem.js.map +1 -1
- package/dist/esm/Components/outOfTheBox/SearchBox.js +12 -16
- package/dist/esm/Components/outOfTheBox/SearchBox.js.map +1 -1
- package/dist/esm/Components/outOfTheBox/Separator.js +1 -3
- package/dist/esm/Components/outOfTheBox/Separator.js.map +1 -1
- package/dist/esm/hooks/useGenerateItems.js +13 -13
- package/dist/esm/hooks/useGenerateItems.js.map +1 -1
- package/package.json +8 -8
|
@@ -37,10 +37,7 @@ var import_ds_icons = require("@elliemae/ds-icons");
|
|
|
37
37
|
var import_styles = require("../styles");
|
|
38
38
|
var import_propTypes = require("../propTypes");
|
|
39
39
|
var import_useGenerateItems = require("../hooks/useGenerateItems");
|
|
40
|
-
const Elipsis = /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_icons.MoreOptionsVert, {
|
|
41
|
-
color: ["brand-primary", "600"],
|
|
42
|
-
size: "m"
|
|
43
|
-
});
|
|
40
|
+
const Elipsis = /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_icons.MoreOptionsVert, { color: ["brand-primary", "600"], size: "m" });
|
|
44
41
|
const MiniToolbar = ({ items, overflowButtonProps }) => {
|
|
45
42
|
const [shortcutItems, dropdownMenuItems] = (0, import_useGenerateItems.useGenerateItems)(items);
|
|
46
43
|
const [isDropdownMenuOpen, setIsDropdownMenuOpen] = (0, import_react.useState)(false);
|
|
@@ -52,30 +49,32 @@ const MiniToolbar = ({ items, overflowButtonProps }) => {
|
|
|
52
49
|
}
|
|
53
50
|
}, []);
|
|
54
51
|
const { ariaLabel, style, buttonType = "secondary" } = overflowButtonProps || {};
|
|
55
|
-
return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_styles.Container, {
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_dropdownmenu.DSDropdownMenu, {
|
|
52
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_styles.Container, { role: "toolbar", "data-testid": "ds-mini-toolbar", children: [
|
|
53
|
+
shortcutItems,
|
|
54
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
55
|
+
import_ds_dropdownmenu.DSDropdownMenu,
|
|
56
|
+
{
|
|
61
57
|
"data-testid": "ds-mini-toolbar__dropdown-menu",
|
|
62
58
|
isOpen: isDropdownMenuOpen,
|
|
63
59
|
onSelectMenuItem: closeDropdownMenu,
|
|
64
60
|
onClickOutsideMenu: closeDropdownMenu,
|
|
65
61
|
options: dropdownMenuItems,
|
|
66
|
-
triggerComponent: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
62
|
+
triggerComponent: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
63
|
+
import_styles.StyledButton,
|
|
64
|
+
{
|
|
65
|
+
"aria-label": ariaLabel,
|
|
66
|
+
"data-testid": "ds-mini-toolbar__elipsis",
|
|
67
|
+
size: "m",
|
|
68
|
+
style,
|
|
69
|
+
buttonType,
|
|
70
|
+
onClick: openDropdownMenu,
|
|
71
|
+
onKeyPress: openDropdownMenuKeyPress,
|
|
72
|
+
leftIcon: Elipsis
|
|
73
|
+
}
|
|
74
|
+
)
|
|
75
|
+
}
|
|
76
|
+
)
|
|
77
|
+
] });
|
|
79
78
|
};
|
|
80
79
|
MiniToolbar.propTypes = import_propTypes.miniToolbarProps;
|
|
81
80
|
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 type { 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;ADSP;AAThB,mBAA6C;AAC7C,0BAAyB;AACzB,6BAA+B;AAC/B,sBAAgC;AAChC,oBAAwC;AACxC,uBAAiC;AACjC,8BAAiC;AAGjC,MAAM,UAAU,4CAAC
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADSP;AAThB,mBAA6C;AAC7C,0BAAyB;AACzB,6BAA+B;AAC/B,sBAAgC;AAChC,oBAAwC;AACxC,uBAAiC;AACjC,8BAAiC;AAGjC,MAAM,UAAU,4CAAC,mCAAgB,OAAO,CAAC,iBAAiB,KAAK,GAAG,MAAK,KAAI;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,2BAAU,MAAK,WAAU,eAAY,mBACnC;AAAA;AAAA,IACD;AAAA,MAAC;AAAA;AAAA,QACC,eAAY;AAAA,QACZ,QAAQ;AAAA,QACR,kBAAkB;AAAA,QAClB,oBAAoB;AAAA,QACpB,SAAS;AAAA,QACT,kBACE;AAAA,UAAC;AAAA;AAAA,YACC,cAAY;AAAA,YACZ,eAAY;AAAA,YACZ,MAAK;AAAA,YACL;AAAA,YACA;AAAA,YACA,SAAS;AAAA,YACT,YAAY;AAAA,YACZ,UAAU;AAAA;AAAA,QACZ;AAAA;AAAA,IAEJ;AAAA,KACF;AAEJ;AAEA,YAAY,YAAY;AACxB,YAAY,cAAc;AAC1B,MAAM,4BAAwB,8BAAS,WAAW;AAClD,sBAAsB,YAAY;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -55,27 +55,10 @@ const ToolbarShortcut = (props) => {
|
|
|
55
55
|
clearTimeout(timerRight.current);
|
|
56
56
|
};
|
|
57
57
|
}, [isOpen, leftRef, rightRef]);
|
|
58
|
-
return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, {
|
|
59
|
-
children:
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
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
|
-
});
|
|
58
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
|
|
59
|
+
isOpen && position === "left" && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styles.Item, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ContextualRegion, { innerRef: leftRef, ...contextualRegionProps }) }),
|
|
60
|
+
Component && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styles.Item, { style, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Component, { ...mergedProps }) }),
|
|
61
|
+
isOpen && position === "right" && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styles.Item, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ContextualRegion, { innerRef: rightRef, ...contextualRegionProps }) })
|
|
62
|
+
] });
|
|
80
63
|
};
|
|
81
64
|
//# 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 type { 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;ADkCnB;AAlCJ,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
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADkCnB;AAlCJ,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,4EACG;AAAA,cAAU,aAAa,UACtB,4CAAC,sBACC,sDAAC,oBAAiB,UAAU,SAAU,GAAG,uBAAuB,GAClE;AAAA,IAED,aACC,4CAAC,sBAAK,OACJ,sDAAC,aAAW,GAAG,aAAa,GAC9B;AAAA,IAED,UAAU,aAAa,WACtB,4CAAC,sBACC,sDAAC,oBAAiB,UAAU,UAAW,GAAG,uBAAuB,GACnE;AAAA,KAEJ;AAEJ;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -30,9 +30,5 @@ module.exports = __toCommonJS(Button_exports);
|
|
|
30
30
|
var React = __toESM(require("react"));
|
|
31
31
|
var import_jsx_runtime = require("react/jsx-runtime");
|
|
32
32
|
var import_ds_button = require("@elliemae/ds-button");
|
|
33
|
-
const MiniToolbarButton = (props) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_button.DSButton, {
|
|
34
|
-
...props,
|
|
35
|
-
"aria-label": props.ariaLabel,
|
|
36
|
-
"data-testid": "ds-mini-toolbar__shortcut"
|
|
37
|
-
});
|
|
33
|
+
const MiniToolbarButton = (props) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_button.DSButton, { ...props, "aria-label": props.ariaLabel, "data-testid": "ds-mini-toolbar__shortcut" });
|
|
38
34
|
//# sourceMappingURL=Button.js.map
|
|
@@ -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;ADIrB;AAHF,uBAAyB;AAEzB,MAAM,oBAAoB,CAAC,UACzB,4CAAC
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADIrB;AAHF,uBAAyB;AAEzB,MAAM,oBAAoB,CAAC,UACzB,4CAAC,6BAAU,GAAG,OAAO,cAAY,MAAM,WAAW,eAAY,6BAA4B;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -30,7 +30,5 @@ module.exports = __toCommonJS(ComboBox_exports);
|
|
|
30
30
|
var React = __toESM(require("react"));
|
|
31
31
|
var import_jsx_runtime = require("react/jsx-runtime");
|
|
32
32
|
var import_ds_form = require("@elliemae/ds-form");
|
|
33
|
-
const MiniToolbarComboBox = (props) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_form.DSComboBox2, {
|
|
34
|
-
...props
|
|
35
|
-
});
|
|
33
|
+
const MiniToolbarComboBox = (props) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_form.DSComboBox2, { ...props });
|
|
36
34
|
//# 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;ADG6D;AAFpF,qBAA4B;AAE5B,MAAM,sBAAsB,CAAC,UAAuD,4CAAC
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADG6D;AAFpF,qBAA4B;AAE5B,MAAM,sBAAsB,CAAC,UAAuD,4CAAC,8BAAa,GAAG,OAAO;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -32,16 +32,16 @@ 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__ */ (0, import_jsx_runtime.jsx)(
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
color
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
35
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
36
|
+
import_styles.StyledButton,
|
|
37
|
+
{
|
|
38
|
+
"aria-label": ariaLabel,
|
|
39
|
+
buttonType,
|
|
40
|
+
onClick,
|
|
41
|
+
style,
|
|
42
|
+
leftIcon: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Icon, { size, color }),
|
|
43
|
+
"data-testid": "ds-mini-toolbar__shortcut"
|
|
44
|
+
}
|
|
45
|
+
);
|
|
46
46
|
};
|
|
47
47
|
//# sourceMappingURL=IconItem.js.map
|
|
@@ -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 type { 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;ADaP;AAZhB,oBAA6B;AAG7B,MAAM,kBAAkB,CAAC,UAAyD;AAChF,QAAM,EAAE,MAAM,MAAM,OAAO,SAAS,WAAW,OAAO,aAAa,YAAY,IAAI;AAEnF,SACE,
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADaP;AAZhB,oBAA6B;AAG7B,MAAM,kBAAkB,CAAC,UAAyD;AAChF,QAAM,EAAE,MAAM,MAAM,OAAO,SAAS,WAAW,OAAO,aAAa,YAAY,IAAI;AAEnF,SACE;AAAA,IAAC;AAAA;AAAA,MACC,cAAY;AAAA,MACZ;AAAA,MACA;AAAA,MACA;AAAA,MACA,UAAU,4CAAC,QAAK,MAAY,OAAc;AAAA,MAC1C,eAAY;AAAA;AAAA,EACd;AAEJ;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -35,21 +35,17 @@ 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__ */ (0, import_jsx_runtime.jsx)(
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
color
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
38
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
39
|
+
import_styles.StyledButton,
|
|
40
|
+
{
|
|
41
|
+
"aria-label": ariaLabel,
|
|
42
|
+
buttonType,
|
|
43
|
+
onClick,
|
|
44
|
+
style,
|
|
45
|
+
leftIcon: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_icons.Search, { size, color }),
|
|
46
|
+
"data-testid": "ds-mini-toolbar__shortcut"
|
|
47
|
+
}
|
|
48
|
+
);
|
|
49
49
|
};
|
|
50
|
-
const MiniToolbarSearchBox = (props) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_form.DSSearchBox, {
|
|
51
|
-
clearable: true,
|
|
52
|
-
showIcon: false,
|
|
53
|
-
...props
|
|
54
|
-
});
|
|
50
|
+
const MiniToolbarSearchBox = (props) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_form.DSSearchBox, { clearable: true, showIcon: false, ...props });
|
|
55
51
|
//# sourceMappingURL=SearchBox.js.map
|
|
@@ -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 type { 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;ADgBP;AAdhB,sBAAuB;AACvB,qBAA4B;AAC5B,oBAA6B;AAG7B,MAAM,0BAA0B,CAAC,UAAyD;AACxF,QAAM,EAAE,MAAM,OAAO,SAAS,WAAW,OAAO,aAAa,YAAY,IAAI;AAE7E,SACE,
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADgBP;AAdhB,sBAAuB;AACvB,qBAA4B;AAC5B,oBAA6B;AAG7B,MAAM,0BAA0B,CAAC,UAAyD;AACxF,QAAM,EAAE,MAAM,OAAO,SAAS,WAAW,OAAO,aAAa,YAAY,IAAI;AAE7E,SACE;AAAA,IAAC;AAAA;AAAA,MACC,cAAY;AAAA,MACZ;AAAA,MACA;AAAA,MACA;AAAA,MACA,UAAU,4CAAC,0BAAO,MAAY,OAAc;AAAA,MAC5C,eAAY;AAAA;AAAA,EACd;AAEJ;AAEA,MAAM,uBAAuB,CAAC,UAC5B,4CAAC,8BAAY,WAAS,MAAC,UAAU,OAAQ,GAAG,OAAO;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -30,7 +30,5 @@ module.exports = __toCommonJS(Separator_exports);
|
|
|
30
30
|
var React = __toESM(require("react"));
|
|
31
31
|
var import_jsx_runtime = require("react/jsx-runtime");
|
|
32
32
|
var import_styles = require("../../styles");
|
|
33
|
-
const MiniToolbarSeparator = () => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styles.Separator, {
|
|
34
|
-
"data-testid": "ds-mini-toolbar__separator"
|
|
35
|
-
});
|
|
33
|
+
const MiniToolbarSeparator = () => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styles.Separator, { "data-testid": "ds-mini-toolbar__separator" });
|
|
36
34
|
//# 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 => <Separator data-testid=\"ds-mini-toolbar__separator\" />;\n\nexport { MiniToolbarSeparator };\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADGgC;AAFvD,oBAA0B;AAE1B,MAAM,uBAAuB,MAA0B,4CAAC
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADGgC;AAFvD,oBAA0B;AAE1B,MAAM,uBAAuB,MAA0B,4CAAC,2BAAU,eAAY,8BAA6B;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -62,13 +62,17 @@ const useGenerateItems = (items) => {
|
|
|
62
62
|
if (!Component) {
|
|
63
63
|
Component = shortcutComponent;
|
|
64
64
|
}
|
|
65
|
-
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
65
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
66
|
+
import_ToolbarShortcut.ToolbarShortcut,
|
|
67
|
+
{
|
|
68
|
+
Component,
|
|
69
|
+
shortcutProps,
|
|
70
|
+
sharedProps,
|
|
71
|
+
ContextualRegion,
|
|
72
|
+
contextualRegionProps
|
|
73
|
+
},
|
|
74
|
+
`${instanceUID}-shortcut-${index}`
|
|
75
|
+
);
|
|
72
76
|
}),
|
|
73
77
|
[instanceUID, items]
|
|
74
78
|
);
|
|
@@ -93,13 +97,9 @@ const useGenerateItems = (items) => {
|
|
|
93
97
|
};
|
|
94
98
|
}
|
|
95
99
|
if (component === import_outOfTheBox.ICON_ITEM) {
|
|
96
|
-
dropdownItem.leftAddon = /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Icon, {
|
|
97
|
-
color
|
|
98
|
-
});
|
|
100
|
+
dropdownItem.leftAddon = /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Icon, { color });
|
|
99
101
|
} else if (component === import_outOfTheBox.SEARCH_BOX) {
|
|
100
|
-
dropdownItem.leftAddon = /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_icons.Search, {
|
|
101
|
-
color
|
|
102
|
-
});
|
|
102
|
+
dropdownItem.leftAddon = /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_icons.Search, { color });
|
|
103
103
|
} else if (component === import_outOfTheBox.COMBO_BOX) {
|
|
104
104
|
dropdownItem.type = "subMenu";
|
|
105
105
|
dropdownItem.label = label;
|
|
@@ -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 type { 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;ADiCuB;AAjC9C,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,
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADiCuB;AAjC9C,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;AAAA,QAAC;AAAA;AAAA,UAEC;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA;AAAA,QALK,GAAG,wBAAwB;AAAA,MAMlC;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,QAAK,OAAc;AAAA,MAC/C,WAAW,cAAc,+BAAY;AACnC,qBAAa,YAAY,4CAAC,0BAAO,OAAc;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
6
|
"names": ["index"]
|
|
7
7
|
}
|
|
@@ -7,10 +7,7 @@ import { MoreOptionsVert } from "@elliemae/ds-icons";
|
|
|
7
7
|
import { StyledButton, Container } from "../styles";
|
|
8
8
|
import { miniToolbarProps } from "../propTypes";
|
|
9
9
|
import { useGenerateItems } from "../hooks/useGenerateItems";
|
|
10
|
-
const Elipsis = /* @__PURE__ */ jsx(MoreOptionsVert, {
|
|
11
|
-
color: ["brand-primary", "600"],
|
|
12
|
-
size: "m"
|
|
13
|
-
});
|
|
10
|
+
const Elipsis = /* @__PURE__ */ jsx(MoreOptionsVert, { color: ["brand-primary", "600"], size: "m" });
|
|
14
11
|
const MiniToolbar = ({ items, overflowButtonProps }) => {
|
|
15
12
|
const [shortcutItems, dropdownMenuItems] = useGenerateItems(items);
|
|
16
13
|
const [isDropdownMenuOpen, setIsDropdownMenuOpen] = useState(false);
|
|
@@ -22,30 +19,32 @@ const MiniToolbar = ({ items, overflowButtonProps }) => {
|
|
|
22
19
|
}
|
|
23
20
|
}, []);
|
|
24
21
|
const { ariaLabel, style, buttonType = "secondary" } = overflowButtonProps || {};
|
|
25
|
-
return /* @__PURE__ */ jsxs(Container, {
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
/* @__PURE__ */ jsx(DSDropdownMenu, {
|
|
22
|
+
return /* @__PURE__ */ jsxs(Container, { role: "toolbar", "data-testid": "ds-mini-toolbar", children: [
|
|
23
|
+
shortcutItems,
|
|
24
|
+
/* @__PURE__ */ jsx(
|
|
25
|
+
DSDropdownMenu,
|
|
26
|
+
{
|
|
31
27
|
"data-testid": "ds-mini-toolbar__dropdown-menu",
|
|
32
28
|
isOpen: isDropdownMenuOpen,
|
|
33
29
|
onSelectMenuItem: closeDropdownMenu,
|
|
34
30
|
onClickOutsideMenu: closeDropdownMenu,
|
|
35
31
|
options: dropdownMenuItems,
|
|
36
|
-
triggerComponent: /* @__PURE__ */ jsx(
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
32
|
+
triggerComponent: /* @__PURE__ */ jsx(
|
|
33
|
+
StyledButton,
|
|
34
|
+
{
|
|
35
|
+
"aria-label": ariaLabel,
|
|
36
|
+
"data-testid": "ds-mini-toolbar__elipsis",
|
|
37
|
+
size: "m",
|
|
38
|
+
style,
|
|
39
|
+
buttonType,
|
|
40
|
+
onClick: openDropdownMenu,
|
|
41
|
+
onKeyPress: openDropdownMenuKeyPress,
|
|
42
|
+
leftIcon: Elipsis
|
|
43
|
+
}
|
|
44
|
+
)
|
|
45
|
+
}
|
|
46
|
+
)
|
|
47
|
+
] });
|
|
49
48
|
};
|
|
50
49
|
MiniToolbar.propTypes = miniToolbarProps;
|
|
51
50
|
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 type { 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;ACSP,cAiBZ,YAjBY;AAThB,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
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;ACSP,cAiBZ,YAjBY;AAThB,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,mBAAgB,OAAO,CAAC,iBAAiB,KAAK,GAAG,MAAK,KAAI;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,aAAU,MAAK,WAAU,eAAY,mBACnC;AAAA;AAAA,IACD;AAAA,MAAC;AAAA;AAAA,QACC,eAAY;AAAA,QACZ,QAAQ;AAAA,QACR,kBAAkB;AAAA,QAClB,oBAAoB;AAAA,QACpB,SAAS;AAAA,QACT,kBACE;AAAA,UAAC;AAAA;AAAA,YACC,cAAY;AAAA,YACZ,eAAY;AAAA,YACZ,MAAK;AAAA,YACL;AAAA,YACA;AAAA,YACA,SAAS;AAAA,YACT,YAAY;AAAA,YACZ,UAAU;AAAA;AAAA,QACZ;AAAA;AAAA,IAEJ;AAAA,KACF;AAEJ;AAEA,YAAY,YAAY;AACxB,YAAY,cAAc;AAC1B,MAAM,wBAAwB,SAAS,WAAW;AAClD,sBAAsB,YAAY;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -26,28 +26,11 @@ const ToolbarShortcut = (props) => {
|
|
|
26
26
|
clearTimeout(timerRight.current);
|
|
27
27
|
};
|
|
28
28
|
}, [isOpen, leftRef, rightRef]);
|
|
29
|
-
return /* @__PURE__ */ jsxs(Fragment, {
|
|
30
|
-
children:
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
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
|
-
});
|
|
29
|
+
return /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
30
|
+
isOpen && position === "left" && /* @__PURE__ */ jsx(Item, { children: /* @__PURE__ */ jsx(ContextualRegion, { innerRef: leftRef, ...contextualRegionProps }) }),
|
|
31
|
+
Component && /* @__PURE__ */ jsx(Item, { style, children: /* @__PURE__ */ jsx(Component, { ...mergedProps }) }),
|
|
32
|
+
isOpen && position === "right" && /* @__PURE__ */ jsx(Item, { children: /* @__PURE__ */ jsx(ContextualRegion, { innerRef: rightRef, ...contextualRegionProps }) })
|
|
33
|
+
] });
|
|
51
34
|
};
|
|
52
35
|
export {
|
|
53
36
|
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 type { 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;ACkCnB,mBAGM,KAHN;AAlCJ,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
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;ACkCnB,mBAGM,KAHN;AAlCJ,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,iCACG;AAAA,cAAU,aAAa,UACtB,oBAAC,QACC,8BAAC,oBAAiB,UAAU,SAAU,GAAG,uBAAuB,GAClE;AAAA,IAED,aACC,oBAAC,QAAK,OACJ,8BAAC,aAAW,GAAG,aAAa,GAC9B;AAAA,IAED,UAAU,aAAa,WACtB,oBAAC,QACC,8BAAC,oBAAiB,UAAU,UAAW,GAAG,uBAAuB,GACnE;AAAA,KAEJ;AAEJ;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -1,11 +1,7 @@
|
|
|
1
1
|
import * as React from "react";
|
|
2
2
|
import { jsx } from "react/jsx-runtime";
|
|
3
3
|
import { DSButton } from "@elliemae/ds-button";
|
|
4
|
-
const MiniToolbarButton = (props) => /* @__PURE__ */ jsx(DSButton, {
|
|
5
|
-
...props,
|
|
6
|
-
"aria-label": props.ariaLabel,
|
|
7
|
-
"data-testid": "ds-mini-toolbar__shortcut"
|
|
8
|
-
});
|
|
4
|
+
const MiniToolbarButton = (props) => /* @__PURE__ */ jsx(DSButton, { ...props, "aria-label": props.ariaLabel, "data-testid": "ds-mini-toolbar__shortcut" });
|
|
9
5
|
export {
|
|
10
6
|
MiniToolbarButton
|
|
11
7
|
};
|
|
@@ -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;ACIrB;AAHF,SAAS,gBAAgB;AAEzB,MAAM,oBAAoB,CAAC,UACzB,oBAAC
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;ACIrB;AAHF,SAAS,gBAAgB;AAEzB,MAAM,oBAAoB,CAAC,UACzB,oBAAC,YAAU,GAAG,OAAO,cAAY,MAAM,WAAW,eAAY,6BAA4B;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -1,9 +1,7 @@
|
|
|
1
1
|
import * as React from "react";
|
|
2
2
|
import { jsx } from "react/jsx-runtime";
|
|
3
3
|
import { DSComboBox2 } from "@elliemae/ds-form";
|
|
4
|
-
const MiniToolbarComboBox = (props) => /* @__PURE__ */ jsx(DSComboBox2, {
|
|
5
|
-
...props
|
|
6
|
-
});
|
|
4
|
+
const MiniToolbarComboBox = (props) => /* @__PURE__ */ jsx(DSComboBox2, { ...props });
|
|
7
5
|
export {
|
|
8
6
|
MiniToolbarComboBox
|
|
9
7
|
};
|
|
@@ -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;ACG6D;AAFpF,SAAS,mBAAmB;AAE5B,MAAM,sBAAsB,CAAC,UAAuD,oBAAC
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;ACG6D;AAFpF,SAAS,mBAAmB;AAE5B,MAAM,sBAAsB,CAAC,UAAuD,oBAAC,eAAa,GAAG,OAAO;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -3,17 +3,17 @@ 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__ */ jsx(
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
color
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
6
|
+
return /* @__PURE__ */ jsx(
|
|
7
|
+
StyledButton,
|
|
8
|
+
{
|
|
9
|
+
"aria-label": ariaLabel,
|
|
10
|
+
buttonType,
|
|
11
|
+
onClick,
|
|
12
|
+
style,
|
|
13
|
+
leftIcon: /* @__PURE__ */ jsx(Icon, { size, color }),
|
|
14
|
+
"data-testid": "ds-mini-toolbar__shortcut"
|
|
15
|
+
}
|
|
16
|
+
);
|
|
17
17
|
};
|
|
18
18
|
export {
|
|
19
19
|
MiniToolbarIcon
|
|
@@ -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 type { 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;ACaP;AAZhB,SAAS,oBAAoB;AAG7B,MAAM,kBAAkB,CAAC,UAAyD;AAChF,QAAM,EAAE,MAAM,MAAM,OAAO,SAAS,WAAW,OAAO,aAAa,YAAY,IAAI;AAEnF,SACE,
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;ACaP;AAZhB,SAAS,oBAAoB;AAG7B,MAAM,kBAAkB,CAAC,UAAyD;AAChF,QAAM,EAAE,MAAM,MAAM,OAAO,SAAS,WAAW,OAAO,aAAa,YAAY,IAAI;AAEnF,SACE;AAAA,IAAC;AAAA;AAAA,MACC,cAAY;AAAA,MACZ;AAAA,MACA;AAAA,MACA;AAAA,MACA,UAAU,oBAAC,QAAK,MAAY,OAAc;AAAA,MAC1C,eAAY;AAAA;AAAA,EACd;AAEJ;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -5,23 +5,19 @@ 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__ */ jsx(
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
color
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
8
|
+
return /* @__PURE__ */ jsx(
|
|
9
|
+
StyledButton,
|
|
10
|
+
{
|
|
11
|
+
"aria-label": ariaLabel,
|
|
12
|
+
buttonType,
|
|
13
|
+
onClick,
|
|
14
|
+
style,
|
|
15
|
+
leftIcon: /* @__PURE__ */ jsx(Search, { size, color }),
|
|
16
|
+
"data-testid": "ds-mini-toolbar__shortcut"
|
|
17
|
+
}
|
|
18
|
+
);
|
|
19
19
|
};
|
|
20
|
-
const MiniToolbarSearchBox = (props) => /* @__PURE__ */ jsx(DSSearchBox, {
|
|
21
|
-
clearable: true,
|
|
22
|
-
showIcon: false,
|
|
23
|
-
...props
|
|
24
|
-
});
|
|
20
|
+
const MiniToolbarSearchBox = (props) => /* @__PURE__ */ jsx(DSSearchBox, { clearable: true, showIcon: false, ...props });
|
|
25
21
|
export {
|
|
26
22
|
MiniToolbarSearchBox,
|
|
27
23
|
MiniToolbarSearchButton
|
|
@@ -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 type { 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;ACgBP;AAdhB,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,
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;ACgBP;AAdhB,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;AAAA,IAAC;AAAA;AAAA,MACC,cAAY;AAAA,MACZ;AAAA,MACA;AAAA,MACA;AAAA,MACA,UAAU,oBAAC,UAAO,MAAY,OAAc;AAAA,MAC5C,eAAY;AAAA;AAAA,EACd;AAEJ;AAEA,MAAM,uBAAuB,CAAC,UAC5B,oBAAC,eAAY,WAAS,MAAC,UAAU,OAAQ,GAAG,OAAO;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -1,9 +1,7 @@
|
|
|
1
1
|
import * as React from "react";
|
|
2
2
|
import { jsx } from "react/jsx-runtime";
|
|
3
3
|
import { Separator } from "../../styles";
|
|
4
|
-
const MiniToolbarSeparator = () => /* @__PURE__ */ jsx(Separator, {
|
|
5
|
-
"data-testid": "ds-mini-toolbar__separator"
|
|
6
|
-
});
|
|
4
|
+
const MiniToolbarSeparator = () => /* @__PURE__ */ jsx(Separator, { "data-testid": "ds-mini-toolbar__separator" });
|
|
7
5
|
export {
|
|
8
6
|
MiniToolbarSeparator
|
|
9
7
|
};
|
|
@@ -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 => <Separator data-testid=\"ds-mini-toolbar__separator\" />;\n\nexport { MiniToolbarSeparator };\n"],
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;ACGgC;AAFvD,SAAS,iBAAiB;AAE1B,MAAM,uBAAuB,MAA0B,oBAAC
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;ACGgC;AAFvD,SAAS,iBAAiB;AAE1B,MAAM,uBAAuB,MAA0B,oBAAC,aAAU,eAAY,8BAA6B;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -44,13 +44,17 @@ const useGenerateItems = (items) => {
|
|
|
44
44
|
if (!Component) {
|
|
45
45
|
Component = shortcutComponent;
|
|
46
46
|
}
|
|
47
|
-
return /* @__PURE__ */ jsx(
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
47
|
+
return /* @__PURE__ */ jsx(
|
|
48
|
+
ToolbarShortcut,
|
|
49
|
+
{
|
|
50
|
+
Component,
|
|
51
|
+
shortcutProps,
|
|
52
|
+
sharedProps,
|
|
53
|
+
ContextualRegion,
|
|
54
|
+
contextualRegionProps
|
|
55
|
+
},
|
|
56
|
+
`${instanceUID}-shortcut-${index}`
|
|
57
|
+
);
|
|
54
58
|
}),
|
|
55
59
|
[instanceUID, items]
|
|
56
60
|
);
|
|
@@ -75,13 +79,9 @@ const useGenerateItems = (items) => {
|
|
|
75
79
|
};
|
|
76
80
|
}
|
|
77
81
|
if (component === ICON_ITEM) {
|
|
78
|
-
dropdownItem.leftAddon = /* @__PURE__ */ jsx(Icon, {
|
|
79
|
-
color
|
|
80
|
-
});
|
|
82
|
+
dropdownItem.leftAddon = /* @__PURE__ */ jsx(Icon, { color });
|
|
81
83
|
} else if (component === SEARCH_BOX) {
|
|
82
|
-
dropdownItem.leftAddon = /* @__PURE__ */ jsx(Search, {
|
|
83
|
-
color
|
|
84
|
-
});
|
|
84
|
+
dropdownItem.leftAddon = /* @__PURE__ */ jsx(Search, { color });
|
|
85
85
|
} else if (component === COMBO_BOX) {
|
|
86
86
|
dropdownItem.type = "subMenu";
|
|
87
87
|
dropdownItem.label = label;
|
|
@@ -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 type { 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;ACiCuB;AAjC9C,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,
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;ACiCuB;AAjC9C,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;AAAA,QAAC;AAAA;AAAA,UAEC;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA;AAAA,QALK,GAAG,wBAAwB;AAAA,MAMlC;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,QAAK,OAAc;AAAA,MAC/C,WAAW,cAAc,YAAY;AACnC,qBAAa,YAAY,oBAAC,UAAO,OAAc;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
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.12.0-rc.
|
|
3
|
+
"version": "3.12.0-rc.20",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"description": "ICE MT - Dimsum - MiniToolbar",
|
|
6
6
|
"files": [
|
|
@@ -75,13 +75,13 @@
|
|
|
75
75
|
"indent": 4
|
|
76
76
|
},
|
|
77
77
|
"dependencies": {
|
|
78
|
-
"
|
|
79
|
-
"@elliemae/ds-
|
|
80
|
-
"@elliemae/ds-
|
|
81
|
-
"@elliemae/ds-
|
|
82
|
-
"@elliemae/ds-
|
|
83
|
-
"@elliemae/ds-
|
|
84
|
-
"
|
|
78
|
+
"uid": "~2.0.0",
|
|
79
|
+
"@elliemae/ds-button": "3.12.0-rc.20",
|
|
80
|
+
"@elliemae/ds-dropdownmenu": "3.12.0-rc.20",
|
|
81
|
+
"@elliemae/ds-utilities": "3.12.0-rc.20",
|
|
82
|
+
"@elliemae/ds-form": "3.12.0-rc.20",
|
|
83
|
+
"@elliemae/ds-system": "3.12.0-rc.20",
|
|
84
|
+
"@elliemae/ds-icons": "3.12.0-rc.20"
|
|
85
85
|
},
|
|
86
86
|
"devDependencies": {
|
|
87
87
|
"@testing-library/react": "~12.1.3",
|