@elliemae/ds-left-navigation 2.1.0 → 2.2.0-alpha.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/cjs/LeftNavigation.js +49 -27
- package/cjs/LeftNavigation.js.map +7 -0
- package/cjs/LeftNavigationContext.js +44 -18
- package/cjs/LeftNavigationContext.js.map +7 -0
- package/cjs/common/getItemBackgroundStyle.js +47 -8
- package/cjs/common/getItemBackgroundStyle.js.map +7 -0
- package/cjs/common/getLeftBorderStyle.js +50 -8
- package/cjs/common/getLeftBorderStyle.js.map +7 -0
- package/cjs/common/getScrollbarStyle.js +55 -4
- package/cjs/common/getScrollbarStyle.js.map +7 -0
- package/cjs/common/index.js +30 -13
- package/cjs/common/index.js.map +7 -0
- package/cjs/configs/index.js +38 -10
- package/cjs/configs/index.js.map +7 -0
- package/cjs/configs/useLeftNavConfig.js +76 -72
- package/cjs/configs/useLeftNavConfig.js.map +7 -0
- package/cjs/configs/useLeftNavItems.js +66 -64
- package/cjs/configs/useLeftNavItems.js.map +7 -0
- package/cjs/configs/useLeftNavSmoothExpand.js +42 -21
- package/cjs/configs/useLeftNavSmoothExpand.js.map +7 -0
- package/cjs/exported-related/ChevronItem/index.js +42 -27
- package/cjs/exported-related/ChevronItem/index.js.map +7 -0
- package/cjs/exported-related/Icon/index.js +51 -34
- package/cjs/exported-related/Icon/index.js.map +7 -0
- package/cjs/exported-related/ItemRenderer/index.js +99 -94
- package/cjs/exported-related/ItemRenderer/index.js.map +7 -0
- package/cjs/exported-related/ItemRenderer/styled.js +83 -51
- package/cjs/exported-related/ItemRenderer/styled.js.map +7 -0
- package/cjs/exported-related/ItemRenderer/usePropsWithDefaults.js +57 -45
- package/cjs/exported-related/ItemRenderer/usePropsWithDefaults.js.map +7 -0
- package/cjs/exported-related/Notifications/index.js +81 -61
- package/cjs/exported-related/Notifications/index.js.map +7 -0
- package/cjs/exported-related/OpenWindowItem/index.js +49 -32
- package/cjs/exported-related/OpenWindowItem/index.js.map +7 -0
- package/cjs/exported-related/constants.js +53 -25
- package/cjs/exported-related/constants.js.map +7 -0
- package/cjs/exported-related/index.js +33 -23
- package/cjs/exported-related/index.js.map +7 -0
- package/cjs/hooks/index.js +30 -13
- package/cjs/hooks/index.js.map +7 -0
- package/cjs/hooks/useExpandableOnClickHandler.js +55 -26
- package/cjs/hooks/useExpandableOnClickHandler.js.map +7 -0
- package/cjs/hooks/useKeyboardNavigation.js +62 -54
- package/cjs/hooks/useKeyboardNavigation.js.map +7 -0
- package/cjs/hooks/useOpenableOnClickHandler.js +55 -26
- package/cjs/hooks/useOpenableOnClickHandler.js.map +7 -0
- package/cjs/hooks/useSelectFirstBodyItem.js +46 -30
- package/cjs/hooks/useSelectFirstBodyItem.js.map +7 -0
- package/cjs/index.d.js +27 -2
- package/cjs/index.d.js.map +7 -0
- package/cjs/index.js +41 -30
- package/cjs/index.js.map +7 -0
- package/cjs/outOfTheBox/ItemControlledDrilldown/index.js +97 -103
- package/cjs/outOfTheBox/ItemControlledDrilldown/index.js.map +7 -0
- package/cjs/outOfTheBox/ItemControlledDrilldown/styled.js +49 -27
- package/cjs/outOfTheBox/ItemControlledDrilldown/styled.js.map +7 -0
- package/cjs/outOfTheBox/ItemHeader/index.js +95 -91
- package/cjs/outOfTheBox/ItemHeader/index.js.map +7 -0
- package/cjs/outOfTheBox/ItemHeader/styled.js +49 -22
- package/cjs/outOfTheBox/ItemHeader/styled.js.map +7 -0
- package/cjs/outOfTheBox/ItemLink/index.js +75 -65
- package/cjs/outOfTheBox/ItemLink/index.js.map +7 -0
- package/cjs/outOfTheBox/ItemLink/styled.js +41 -17
- package/cjs/outOfTheBox/ItemLink/styled.js.map +7 -0
- package/cjs/outOfTheBox/ItemSection/index.js +59 -63
- package/cjs/outOfTheBox/ItemSection/index.js.map +7 -0
- package/cjs/outOfTheBox/ItemSection/styled.js +53 -23
- package/cjs/outOfTheBox/ItemSection/styled.js.map +7 -0
- package/cjs/outOfTheBox/ItemSeparator/index.js +56 -45
- package/cjs/outOfTheBox/ItemSeparator/index.js.map +7 -0
- package/cjs/outOfTheBox/ItemSubmenu/index.js +95 -90
- package/cjs/outOfTheBox/ItemSubmenu/index.js.map +7 -0
- package/cjs/outOfTheBox/ItemSubmenu/styled.js +49 -22
- package/cjs/outOfTheBox/ItemSubmenu/styled.js.map +7 -0
- package/cjs/outOfTheBox/ItemTextLabel/index.js +51 -52
- package/cjs/outOfTheBox/ItemTextLabel/index.js.map +7 -0
- package/cjs/outOfTheBox/ItemTextLabel/styled.js +43 -23
- package/cjs/outOfTheBox/ItemTextLabel/styled.js.map +7 -0
- package/cjs/outOfTheBox/ItemUncontrolledDrilldown/index.js +107 -113
- package/cjs/outOfTheBox/ItemUncontrolledDrilldown/index.js.map +7 -0
- package/cjs/outOfTheBox/ItemUncontrolledDrilldown/styled.js +49 -27
- package/cjs/outOfTheBox/ItemUncontrolledDrilldown/styled.js.map +7 -0
- package/cjs/outOfTheBox/ItemWithDate/index.js +59 -54
- package/cjs/outOfTheBox/ItemWithDate/index.js.map +7 -0
- package/cjs/outOfTheBox/ItemWithDate/styled.js +49 -27
- package/cjs/outOfTheBox/ItemWithDate/styled.js.map +7 -0
- package/cjs/outOfTheBox/index.js +65 -50
- package/cjs/outOfTheBox/index.js.map +7 -0
- package/cjs/parts/LeftNavContent/index.js +75 -71
- package/cjs/parts/LeftNavContent/index.js.map +7 -0
- package/cjs/parts/LeftNavContent/styled.js +110 -50
- package/cjs/parts/LeftNavContent/styled.js.map +7 -0
- package/cjs/parts/LeftNavContentWithScrollbar/index.js +89 -79
- package/cjs/parts/LeftNavContentWithScrollbar/index.js.map +7 -0
- package/cjs/parts/LeftNavFooterItem/index.js +97 -80
- package/cjs/parts/LeftNavFooterItem/index.js.map +7 -0
- package/cjs/parts/LeftNavFooterItem/styled.js +89 -34
- package/cjs/parts/LeftNavFooterItem/styled.js.map +7 -0
- package/cjs/parts/LeftNavLoading/index.js +51 -33
- package/cjs/parts/LeftNavLoading/index.js.map +7 -0
- package/cjs/parts/OutOfTheBoxMapItem.js +49 -46
- package/cjs/parts/OutOfTheBoxMapItem.js.map +7 -0
- package/cjs/prop-types.js +58 -39
- package/cjs/prop-types.js.map +7 -0
- package/esm/LeftNavigation.js +17 -15
- package/esm/LeftNavigation.js.map +7 -0
- package/esm/LeftNavigationContext.js +15 -11
- package/esm/LeftNavigationContext.js.map +7 -0
- package/esm/common/getItemBackgroundStyle.js +20 -6
- package/esm/common/getItemBackgroundStyle.js.map +7 -0
- package/esm/common/getLeftBorderStyle.js +23 -6
- package/esm/common/getLeftBorderStyle.js.map +7 -0
- package/esm/common/getScrollbarStyle.js +28 -2
- package/esm/common/getScrollbarStyle.js.map +7 -0
- package/esm/common/index.js +5 -3
- package/esm/common/index.js.map +7 -0
- package/esm/configs/index.js +9 -2
- package/esm/configs/index.js.map +7 -0
- package/esm/configs/useLeftNavConfig.js +47 -63
- package/esm/configs/useLeftNavConfig.js.map +7 -0
- package/esm/configs/useLeftNavItems.js +33 -55
- package/esm/configs/useLeftNavItems.js.map +7 -0
- package/esm/configs/useLeftNavSmoothExpand.js +13 -12
- package/esm/configs/useLeftNavSmoothExpand.js.map +7 -0
- package/esm/exported-related/ChevronItem/index.js +13 -18
- package/esm/exported-related/ChevronItem/index.js.map +7 -0
- package/esm/exported-related/Icon/index.js +21 -24
- package/esm/exported-related/Icon/index.js.map +7 -0
- package/esm/exported-related/ItemRenderer/index.js +65 -80
- package/esm/exported-related/ItemRenderer/index.js.map +7 -0
- package/esm/exported-related/ItemRenderer/styled.js +56 -42
- package/esm/exported-related/ItemRenderer/styled.js.map +7 -0
- package/esm/exported-related/ItemRenderer/usePropsWithDefaults.js +27 -36
- package/esm/exported-related/ItemRenderer/usePropsWithDefaults.js.map +7 -0
- package/esm/exported-related/Notifications/index.js +57 -50
- package/esm/exported-related/Notifications/index.js.map +7 -0
- package/esm/exported-related/OpenWindowItem/index.js +20 -22
- package/esm/exported-related/OpenWindowItem/index.js.map +7 -0
- package/esm/exported-related/constants.js +24 -17
- package/esm/exported-related/constants.js.map +7 -0
- package/esm/exported-related/index.js +8 -6
- package/esm/exported-related/index.js.map +7 -0
- package/esm/hooks/index.js +5 -3
- package/esm/hooks/index.js.map +7 -0
- package/esm/hooks/useExpandableOnClickHandler.js +26 -22
- package/esm/hooks/useExpandableOnClickHandler.js.map +7 -0
- package/esm/hooks/useKeyboardNavigation.js +30 -47
- package/esm/hooks/useKeyboardNavigation.js.map +7 -0
- package/esm/hooks/useOpenableOnClickHandler.js +26 -22
- package/esm/hooks/useOpenableOnClickHandler.js.map +7 -0
- package/esm/hooks/useSelectFirstBodyItem.js +17 -26
- package/esm/hooks/useSelectFirstBodyItem.js.map +7 -0
- package/esm/index.d.js +2 -1
- package/esm/index.d.js.map +7 -0
- package/esm/index.js +12 -8
- package/esm/index.js.map +7 -0
- package/esm/outOfTheBox/ItemControlledDrilldown/index.js +62 -87
- package/esm/outOfTheBox/ItemControlledDrilldown/index.js.map +7 -0
- package/esm/outOfTheBox/ItemControlledDrilldown/styled.js +20 -17
- package/esm/outOfTheBox/ItemControlledDrilldown/styled.js.map +7 -0
- package/esm/outOfTheBox/ItemHeader/index.js +65 -80
- package/esm/outOfTheBox/ItemHeader/index.js.map +7 -0
- package/esm/outOfTheBox/ItemHeader/styled.js +20 -12
- package/esm/outOfTheBox/ItemHeader/styled.js.map +7 -0
- package/esm/outOfTheBox/ItemLink/index.js +46 -55
- package/esm/outOfTheBox/ItemLink/index.js.map +7 -0
- package/esm/outOfTheBox/ItemLink/styled.js +12 -8
- package/esm/outOfTheBox/ItemLink/styled.js.map +7 -0
- package/esm/outOfTheBox/ItemSection/index.js +30 -53
- package/esm/outOfTheBox/ItemSection/index.js.map +7 -0
- package/esm/outOfTheBox/ItemSection/styled.js +24 -13
- package/esm/outOfTheBox/ItemSection/styled.js.map +7 -0
- package/esm/outOfTheBox/ItemSeparator/index.js +27 -35
- package/esm/outOfTheBox/ItemSeparator/index.js.map +7 -0
- package/esm/outOfTheBox/ItemSubmenu/index.js +65 -79
- package/esm/outOfTheBox/ItemSubmenu/index.js.map +7 -0
- package/esm/outOfTheBox/ItemSubmenu/styled.js +20 -12
- package/esm/outOfTheBox/ItemSubmenu/styled.js.map +7 -0
- package/esm/outOfTheBox/ItemTextLabel/index.js +22 -43
- package/esm/outOfTheBox/ItemTextLabel/index.js.map +7 -0
- package/esm/outOfTheBox/ItemTextLabel/styled.js +14 -14
- package/esm/outOfTheBox/ItemTextLabel/styled.js.map +7 -0
- package/esm/outOfTheBox/ItemUncontrolledDrilldown/index.js +70 -95
- package/esm/outOfTheBox/ItemUncontrolledDrilldown/index.js.map +7 -0
- package/esm/outOfTheBox/ItemUncontrolledDrilldown/styled.js +20 -17
- package/esm/outOfTheBox/ItemUncontrolledDrilldown/styled.js.map +7 -0
- package/esm/outOfTheBox/ItemWithDate/index.js +30 -44
- package/esm/outOfTheBox/ItemWithDate/index.js.map +7 -0
- package/esm/outOfTheBox/ItemWithDate/styled.js +20 -17
- package/esm/outOfTheBox/ItemWithDate/styled.js.map +7 -0
- package/esm/outOfTheBox/index.js +25 -34
- package/esm/outOfTheBox/index.js.map +7 -0
- package/esm/parts/LeftNavContent/index.js +54 -64
- package/esm/parts/LeftNavContent/index.js.map +7 -0
- package/esm/parts/LeftNavContent/styled.js +81 -36
- package/esm/parts/LeftNavContent/styled.js.map +7 -0
- package/esm/parts/LeftNavContentWithScrollbar/index.js +56 -64
- package/esm/parts/LeftNavContentWithScrollbar/index.js.map +7 -0
- package/esm/parts/LeftNavFooterItem/index.js +73 -68
- package/esm/parts/LeftNavFooterItem/index.js.map +7 -0
- package/esm/parts/LeftNavFooterItem/styled.js +63 -24
- package/esm/parts/LeftNavFooterItem/styled.js.map +7 -0
- package/esm/parts/LeftNavLoading/index.js +22 -22
- package/esm/parts/LeftNavLoading/index.js.map +7 -0
- package/esm/parts/OutOfTheBoxMapItem.js +19 -35
- package/esm/parts/OutOfTheBoxMapItem.js.map +7 -0
- package/esm/prop-types.js +26 -29
- package/esm/prop-types.js.map +7 -0
- package/package.json +6 -6
|
@@ -1,36 +1,53 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
var
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
}
|
|
27
|
-
|
|
28
|
-
|
|
1
|
+
var __create = Object.create;
|
|
2
|
+
var __defProp = Object.defineProperty;
|
|
3
|
+
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
4
|
+
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
5
|
+
var __getProtoOf = Object.getPrototypeOf;
|
|
6
|
+
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
7
|
+
var __markAsModule = (target) => __defProp(target, "__esModule", { value: true });
|
|
8
|
+
var __export = (target, all) => {
|
|
9
|
+
for (var name in all)
|
|
10
|
+
__defProp(target, name, { get: all[name], enumerable: true });
|
|
11
|
+
};
|
|
12
|
+
var __reExport = (target, module2, copyDefault, desc) => {
|
|
13
|
+
if (module2 && typeof module2 === "object" || typeof module2 === "function") {
|
|
14
|
+
for (let key of __getOwnPropNames(module2))
|
|
15
|
+
if (!__hasOwnProp.call(target, key) && (copyDefault || key !== "default"))
|
|
16
|
+
__defProp(target, key, { get: () => module2[key], enumerable: !(desc = __getOwnPropDesc(module2, key)) || desc.enumerable });
|
|
17
|
+
}
|
|
18
|
+
return target;
|
|
19
|
+
};
|
|
20
|
+
var __toESM = (module2, isNodeMode) => {
|
|
21
|
+
return __reExport(__markAsModule(__defProp(module2 != null ? __create(__getProtoOf(module2)) : {}, "default", !isNodeMode && module2 && module2.__esModule ? { get: () => module2.default, enumerable: true } : { value: module2, enumerable: true })), module2);
|
|
22
|
+
};
|
|
23
|
+
var __toCommonJS = /* @__PURE__ */ ((cache) => {
|
|
24
|
+
return (module2, temp) => {
|
|
25
|
+
return cache && cache.get(module2) || (temp = __reExport(__markAsModule({}), module2, 1), cache && cache.set(module2, temp), temp);
|
|
26
|
+
};
|
|
27
|
+
})(typeof WeakMap !== "undefined" ? /* @__PURE__ */ new WeakMap() : 0);
|
|
28
|
+
var Icon_exports = {};
|
|
29
|
+
__export(Icon_exports, {
|
|
30
|
+
Icon: () => Icon
|
|
31
|
+
});
|
|
32
|
+
var React = __toESM(require("react"));
|
|
33
|
+
var import_react = __toESM(require("react"));
|
|
34
|
+
var import_styled_components = __toESM(require("styled-components"));
|
|
35
|
+
const AugmentedIcon = (Icon2) => (0, import_styled_components.default)(Icon2)`
|
|
36
|
+
cursor: pointer;
|
|
37
|
+
|
|
38
|
+
outline: 0;
|
|
39
|
+
:focus,
|
|
40
|
+
:active {
|
|
41
|
+
outline: 1px solid #1e79c2;
|
|
42
|
+
}
|
|
43
|
+
`;
|
|
44
|
+
const Icon = (IconComponent) => (props) => {
|
|
29
45
|
const StyledComponent = AugmentedIcon(IconComponent);
|
|
30
|
-
return
|
|
31
|
-
color: [
|
|
32
|
-
tabIndex: 0
|
|
33
|
-
|
|
46
|
+
return /* @__PURE__ */ import_react.default.createElement(StyledComponent, {
|
|
47
|
+
color: ["brand-primary", 800],
|
|
48
|
+
tabIndex: 0,
|
|
49
|
+
...props
|
|
50
|
+
});
|
|
34
51
|
};
|
|
35
|
-
|
|
36
|
-
|
|
52
|
+
module.exports = __toCommonJS(Icon_exports);
|
|
53
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../../../src/exported-related/Icon/index.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
+
"sourcesContent": ["import React from 'react';\nimport styled from 'styled-components';\n\nconst AugmentedIcon = (\n Icon: React.ComponentType<{ color: unknown; tabIndex: number }>,\n) => styled(Icon)`\n cursor: pointer;\n\n outline: 0;\n :focus,\n :active {\n outline: 1px solid #1e79c2;\n }\n`;\n\nexport const Icon = (\n IconComponent: React.ComponentType<{ color: unknown; tabIndex: number }>,\n) => (props: unknown): JSX.Element => {\n const StyledComponent = AugmentedIcon(IconComponent);\n return (\n <StyledComponent color={['brand-primary', 800]} tabIndex={0} {...props} />\n );\n};\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAAkB;AAClB,+BAAmB;AAEnB,MAAM,gBAAgB,CACpB,UACG,sCAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAUL,MAAM,OAAO,CAClB,kBACG,CAAC,UAAgC;AACpC,QAAM,kBAAkB,cAAc;AACtC,SACE,mDAAC,iBAAD;AAAA,IAAiB,OAAO,CAAC,iBAAiB;AAAA,IAAM,UAAU;AAAA,OAAO;AAAA;AAAA;",
|
|
6
|
+
"names": []
|
|
7
|
+
}
|
|
@@ -1,37 +1,48 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
var
|
|
6
|
-
var
|
|
7
|
-
var
|
|
8
|
-
var
|
|
9
|
-
var
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
var
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
1
|
+
var __create = Object.create;
|
|
2
|
+
var __defProp = Object.defineProperty;
|
|
3
|
+
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
4
|
+
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
5
|
+
var __getProtoOf = Object.getPrototypeOf;
|
|
6
|
+
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
7
|
+
var __markAsModule = (target) => __defProp(target, "__esModule", { value: true });
|
|
8
|
+
var __export = (target, all) => {
|
|
9
|
+
for (var name in all)
|
|
10
|
+
__defProp(target, name, { get: all[name], enumerable: true });
|
|
11
|
+
};
|
|
12
|
+
var __reExport = (target, module2, copyDefault, desc) => {
|
|
13
|
+
if (module2 && typeof module2 === "object" || typeof module2 === "function") {
|
|
14
|
+
for (let key of __getOwnPropNames(module2))
|
|
15
|
+
if (!__hasOwnProp.call(target, key) && (copyDefault || key !== "default"))
|
|
16
|
+
__defProp(target, key, { get: () => module2[key], enumerable: !(desc = __getOwnPropDesc(module2, key)) || desc.enumerable });
|
|
17
|
+
}
|
|
18
|
+
return target;
|
|
19
|
+
};
|
|
20
|
+
var __toESM = (module2, isNodeMode) => {
|
|
21
|
+
return __reExport(__markAsModule(__defProp(module2 != null ? __create(__getProtoOf(module2)) : {}, "default", !isNodeMode && module2 && module2.__esModule ? { get: () => module2.default, enumerable: true } : { value: module2, enumerable: true })), module2);
|
|
22
|
+
};
|
|
23
|
+
var __toCommonJS = /* @__PURE__ */ ((cache) => {
|
|
24
|
+
return (module2, temp) => {
|
|
25
|
+
return cache && cache.get(module2) || (temp = __reExport(__markAsModule({}), module2, 1), cache && cache.set(module2, temp), temp);
|
|
26
|
+
};
|
|
27
|
+
})(typeof WeakMap !== "undefined" ? /* @__PURE__ */ new WeakMap() : 0);
|
|
28
|
+
var ItemRenderer_exports = {};
|
|
29
|
+
__export(ItemRenderer_exports, {
|
|
30
|
+
ItemRenderer: () => ItemRenderer
|
|
31
|
+
});
|
|
32
|
+
var React = __toESM(require("react"));
|
|
33
|
+
var import_react = __toESM(require("react"));
|
|
34
|
+
var import_ds_grid = __toESM(require("@elliemae/ds-grid"));
|
|
35
|
+
var import_styled = __toESM(require("./styled"));
|
|
36
|
+
var import_LeftNavigationContext = __toESM(require("../../LeftNavigationContext"));
|
|
37
|
+
var import_usePropsWithDefaults = __toESM(require("./usePropsWithDefaults"));
|
|
38
|
+
var import_hooks = __toESM(require("../../hooks"));
|
|
39
|
+
const ItemRenderer = (props) => {
|
|
40
|
+
const propsWithDefault = (0, import_usePropsWithDefaults.usePropsWithDefaults)(props);
|
|
21
41
|
const {
|
|
22
42
|
item,
|
|
23
43
|
item: {
|
|
24
44
|
dsId,
|
|
25
|
-
itemOpts: {
|
|
26
|
-
selectable,
|
|
27
|
-
focuseable,
|
|
28
|
-
indent,
|
|
29
|
-
ariaLabel,
|
|
30
|
-
ariaRole,
|
|
31
|
-
ariaLive,
|
|
32
|
-
ariaExpanded,
|
|
33
|
-
ariaDescribedBy
|
|
34
|
-
},
|
|
45
|
+
itemOpts: { selectable, focuseable, indent, ariaLabel, ariaRole, ariaLive, ariaExpanded, ariaDescribedBy },
|
|
35
46
|
CollapsedComponent
|
|
36
47
|
},
|
|
37
48
|
subitems,
|
|
@@ -43,12 +54,9 @@ const ItemRenderer = props => {
|
|
|
43
54
|
borderBottomMr,
|
|
44
55
|
children
|
|
45
56
|
} = propsWithDefault;
|
|
46
|
-
const ctx =
|
|
57
|
+
const ctx = (0, import_react.useContext)(import_LeftNavigationContext.LeftNavContext);
|
|
47
58
|
const {
|
|
48
|
-
leftNavProps: {
|
|
49
|
-
onItemClick,
|
|
50
|
-
openedItem
|
|
51
|
-
},
|
|
59
|
+
leftNavProps: { onItemClick, openedItem },
|
|
52
60
|
expandedForAnimation,
|
|
53
61
|
selectedParent,
|
|
54
62
|
selectedItem,
|
|
@@ -57,72 +65,69 @@ const ItemRenderer = props => {
|
|
|
57
65
|
visibleItemsRefs
|
|
58
66
|
} = ctx;
|
|
59
67
|
const opened = dsId === openedItem;
|
|
60
|
-
const handleOnClick =
|
|
61
|
-
if (onClick)
|
|
62
|
-
|
|
68
|
+
const handleOnClick = (0, import_react.useCallback)((e) => {
|
|
69
|
+
if (onClick)
|
|
70
|
+
onClick();
|
|
63
71
|
onItemClick(item, e);
|
|
64
|
-
if (selectable)
|
|
72
|
+
if (selectable)
|
|
73
|
+
setSelectedItem(item.dsId);
|
|
65
74
|
}, [onItemClick, item, setSelectedItem, selectable, onClick]);
|
|
66
|
-
const handleFocus =
|
|
67
|
-
if (focuseable)
|
|
75
|
+
const handleFocus = (0, import_react.useCallback)(() => {
|
|
76
|
+
if (focuseable)
|
|
77
|
+
setFocusedItem(dsId);
|
|
68
78
|
}, [dsId, setFocusedItem, focuseable]);
|
|
69
|
-
const onKeyDown =
|
|
79
|
+
const onKeyDown = (0, import_hooks.useKeyboardNavigation)({
|
|
70
80
|
item,
|
|
71
81
|
onClick: handleOnClick
|
|
72
82
|
});
|
|
73
|
-
const cols =
|
|
74
|
-
const isSelected =
|
|
75
|
-
|
|
83
|
+
const cols = (0, import_react.useMemo)(() => expandedForAnimation ? ["auto", "1fr", "auto"] : ["38px"], [expandedForAnimation]);
|
|
84
|
+
const isSelected = (0, import_react.useMemo)(() => selectedItem === dsId, [selectedItem, dsId]);
|
|
76
85
|
if (!expandedForAnimation && !CollapsedComponent) {
|
|
77
86
|
return null;
|
|
78
87
|
}
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
backgroundColor: '#E0E3E8'
|
|
123
|
-
}
|
|
124
|
-
})), subitems]
|
|
125
|
-
});
|
|
88
|
+
return /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, /* @__PURE__ */ import_react.default.createElement(import_styled.StyledItemWrapper, {
|
|
89
|
+
shadowStyle: shadowStyle(opened, item.type),
|
|
90
|
+
"data-testid": "leftnav-item-wrapper"
|
|
91
|
+
}, /* @__PURE__ */ import_react.default.createElement(import_styled.StyledItem, {
|
|
92
|
+
ref: visibleItemsRefs.current[dsId],
|
|
93
|
+
pt: paddingTop,
|
|
94
|
+
pl: indent === void 0 ? "xxxs" : `${indent}px`,
|
|
95
|
+
minHeight,
|
|
96
|
+
shadowStyle: shadowStyle(opened, item.type),
|
|
97
|
+
alignItems: "flex-start",
|
|
98
|
+
cols,
|
|
99
|
+
onClick: !opened ? handleOnClick : () => null,
|
|
100
|
+
onKeyDown,
|
|
101
|
+
selectable,
|
|
102
|
+
selected: isSelected,
|
|
103
|
+
selectedParent: selectedParent === dsId,
|
|
104
|
+
opened,
|
|
105
|
+
onFocus: handleFocus,
|
|
106
|
+
"data-testid": "leftnav-item-container",
|
|
107
|
+
tabIndex: focuseable ? 0 : -1,
|
|
108
|
+
"aria-describedby": ariaDescribedBy,
|
|
109
|
+
"aria-expanded": ariaExpanded,
|
|
110
|
+
role: ariaRole,
|
|
111
|
+
"data-selected": isSelected,
|
|
112
|
+
"data-selectedparent": selectedParent === dsId,
|
|
113
|
+
"aria-label": ariaLabel,
|
|
114
|
+
"aria-hidden": !focuseable,
|
|
115
|
+
"aria-live": ariaLive
|
|
116
|
+
}, !expandedForAnimation ? /* @__PURE__ */ import_react.default.createElement(import_ds_grid.default, {
|
|
117
|
+
"data-testid": "leftnav-leftcomponent",
|
|
118
|
+
justifyContent: "center"
|
|
119
|
+
}, /* @__PURE__ */ import_react.default.createElement(CollapsedComponent, {
|
|
120
|
+
item,
|
|
121
|
+
ctx
|
|
122
|
+
})) : children), hasBorderBottom && /* @__PURE__ */ import_react.default.createElement("div", {
|
|
123
|
+
style: {
|
|
124
|
+
marginLeft: opened ? "16px" : "0px",
|
|
125
|
+
marginRight: borderBottomMr,
|
|
126
|
+
height: "1px",
|
|
127
|
+
width: `calc(100% - ${borderBottomMr} - ${opened ? "16px" : "0px"})`,
|
|
128
|
+
backgroundColor: "#E0E3E8"
|
|
129
|
+
}
|
|
130
|
+
})), subitems);
|
|
126
131
|
};
|
|
127
|
-
|
|
128
|
-
|
|
132
|
+
module.exports = __toCommonJS(ItemRenderer_exports);
|
|
133
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../../../src/exported-related/ItemRenderer/index.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
+
"sourcesContent": ["/* eslint-disable complexity */\n/* eslint-disable max-lines */\nimport React, { useContext, useMemo, useCallback } from 'react';\nimport Grid from '@elliemae/ds-grid';\nimport { StyledItemWrapper, StyledItem } from './styled';\n\nimport { ItemRendererT } from '../../index.d';\nimport { LeftNavContext } from '../../LeftNavigationContext';\nimport { usePropsWithDefaults } from './usePropsWithDefaults';\nimport { useKeyboardNavigation } from '../../hooks';\n\nexport const ItemRenderer = (props: ItemRendererT): JSX.Element => {\n const propsWithDefault = usePropsWithDefaults(props);\n const {\n item,\n item: {\n dsId,\n itemOpts: { selectable, focuseable, indent, ariaLabel, ariaRole, ariaLive, ariaExpanded, ariaDescribedBy },\n CollapsedComponent,\n },\n subitems,\n minHeight,\n paddingTop,\n onClick,\n shadowStyle,\n hasBorderBottom,\n borderBottomMr,\n children,\n } = propsWithDefault;\n\n const ctx = useContext(LeftNavContext);\n const {\n leftNavProps: { onItemClick, openedItem },\n expandedForAnimation,\n selectedParent,\n selectedItem,\n setSelectedItem,\n setFocusedItem,\n visibleItemsRefs,\n } = ctx;\n\n const opened = dsId === openedItem;\n\n const handleOnClick = useCallback(\n (e) => {\n if (onClick) onClick(); // used by uncontrolled drilldowns\n onItemClick(item, e);\n if (selectable) setSelectedItem(item.dsId);\n },\n [onItemClick, item, setSelectedItem, selectable, onClick],\n );\n\n const handleFocus = useCallback(() => {\n if (focuseable) setFocusedItem(dsId);\n }, [dsId, setFocusedItem, focuseable]);\n\n const onKeyDown = useKeyboardNavigation({\n item,\n onClick: handleOnClick,\n });\n\n const cols = useMemo(() => (expandedForAnimation ? ['auto', '1fr', 'auto'] : ['38px']), [expandedForAnimation]);\n const isSelected = useMemo(() => selectedItem === dsId, [selectedItem, dsId]);\n\n if (!expandedForAnimation && !CollapsedComponent) {\n return null;\n }\n\n return (\n <>\n <StyledItemWrapper shadowStyle={shadowStyle(opened, item.type)} data-testid=\"leftnav-item-wrapper\">\n <StyledItem\n ref={visibleItemsRefs.current[dsId]}\n pt={paddingTop}\n pl={indent === undefined ? 'xxxs' : `${indent}px`}\n minHeight={minHeight}\n shadowStyle={shadowStyle(opened, item.type)}\n alignItems=\"flex-start\"\n cols={cols}\n onClick={!opened ? handleOnClick : () => null}\n onKeyDown={onKeyDown}\n selectable={selectable}\n selected={isSelected}\n selectedParent={selectedParent === dsId}\n opened={opened}\n onFocus={handleFocus}\n data-testid=\"leftnav-item-container\"\n tabIndex={focuseable ? 0 : -1}\n aria-describedby={ariaDescribedBy}\n aria-expanded={ariaExpanded}\n role={ariaRole}\n data-selected={isSelected}\n data-selectedparent={selectedParent === dsId}\n aria-label={ariaLabel}\n aria-hidden={!focuseable}\n aria-live={ariaLive}\n >\n {!expandedForAnimation ? (\n <Grid data-testid=\"leftnav-leftcomponent\" justifyContent=\"center\">\n <CollapsedComponent item={item} ctx={ctx} />\n </Grid>\n ) : (\n children\n )}\n </StyledItem>\n {hasBorderBottom && (\n <div\n style={{\n marginLeft: opened ? '16px' : '0px',\n marginRight: borderBottomMr,\n height: '1px',\n width: `calc(100% - ${borderBottomMr} - ${opened ? '16px' : '0px'})`,\n backgroundColor: '#E0E3E8',\n }}\n />\n )}\n </StyledItemWrapper>\n {subitems}\n </>\n );\n};\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADEvB,mBAAwD;AACxD,qBAAiB;AACjB,oBAA8C;AAG9C,mCAA+B;AAC/B,kCAAqC;AACrC,mBAAsC;AAE/B,MAAM,eAAe,CAAC,UAAsC;AACjE,QAAM,mBAAmB,sDAAqB;AAC9C,QAAM;AAAA,IACJ;AAAA,IACA,MAAM;AAAA,MACJ;AAAA,MACA,UAAU,EAAE,YAAY,YAAY,QAAQ,WAAW,UAAU,UAAU,cAAc;AAAA,MACzF;AAAA;AAAA,IAEF;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,MACE;AAEJ,QAAM,MAAM,6BAAW;AACvB,QAAM;AAAA,IACJ,cAAc,EAAE,aAAa;AAAA,IAC7B;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,MACE;AAEJ,QAAM,SAAS,SAAS;AAExB,QAAM,gBAAgB,8BACpB,CAAC,MAAM;AACL,QAAI;AAAS;AACb,gBAAY,MAAM;AAClB,QAAI;AAAY,sBAAgB,KAAK;AAAA,KAEvC,CAAC,aAAa,MAAM,iBAAiB,YAAY;AAGnD,QAAM,cAAc,8BAAY,MAAM;AACpC,QAAI;AAAY,qBAAe;AAAA,KAC9B,CAAC,MAAM,gBAAgB;AAE1B,QAAM,YAAY,wCAAsB;AAAA,IACtC;AAAA,IACA,SAAS;AAAA;AAGX,QAAM,OAAO,0BAAQ,MAAO,uBAAuB,CAAC,QAAQ,OAAO,UAAU,CAAC,SAAU,CAAC;AACzF,QAAM,aAAa,0BAAQ,MAAM,iBAAiB,MAAM,CAAC,cAAc;AAEvE,MAAI,CAAC,wBAAwB,CAAC,oBAAoB;AAChD,WAAO;AAAA;AAGT,SACE,wFACE,mDAAC,iCAAD;AAAA,IAAmB,aAAa,YAAY,QAAQ,KAAK;AAAA,IAAO,eAAY;AAAA,KAC1E,mDAAC,0BAAD;AAAA,IACE,KAAK,iBAAiB,QAAQ;AAAA,IAC9B,IAAI;AAAA,IACJ,IAAI,WAAW,SAAY,SAAS,GAAG;AAAA,IACvC;AAAA,IACA,aAAa,YAAY,QAAQ,KAAK;AAAA,IACtC,YAAW;AAAA,IACX;AAAA,IACA,SAAS,CAAC,SAAS,gBAAgB,MAAM;AAAA,IACzC;AAAA,IACA;AAAA,IACA,UAAU;AAAA,IACV,gBAAgB,mBAAmB;AAAA,IACnC;AAAA,IACA,SAAS;AAAA,IACT,eAAY;AAAA,IACZ,UAAU,aAAa,IAAI;AAAA,IAC3B,oBAAkB;AAAA,IAClB,iBAAe;AAAA,IACf,MAAM;AAAA,IACN,iBAAe;AAAA,IACf,uBAAqB,mBAAmB;AAAA,IACxC,cAAY;AAAA,IACZ,eAAa,CAAC;AAAA,IACd,aAAW;AAAA,KAEV,CAAC,uBACA,mDAAC,wBAAD;AAAA,IAAM,eAAY;AAAA,IAAwB,gBAAe;AAAA,KACvD,mDAAC,oBAAD;AAAA,IAAoB;AAAA,IAAY;AAAA,QAGlC,WAGH,mBACC,mDAAC,OAAD;AAAA,IACE,OAAO;AAAA,MACL,YAAY,SAAS,SAAS;AAAA,MAC9B,aAAa;AAAA,MACb,QAAQ;AAAA,MACR,OAAO,eAAe,oBAAoB,SAAS,SAAS;AAAA,MAC5D,iBAAiB;AAAA;AAAA,OAKxB;AAAA;",
|
|
6
|
+
"names": []
|
|
7
|
+
}
|
|
@@ -1,58 +1,90 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
var
|
|
6
|
-
var
|
|
1
|
+
var __create = Object.create;
|
|
2
|
+
var __defProp = Object.defineProperty;
|
|
3
|
+
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
4
|
+
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
5
|
+
var __getProtoOf = Object.getPrototypeOf;
|
|
6
|
+
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
7
|
+
var __markAsModule = (target) => __defProp(target, "__esModule", { value: true });
|
|
8
|
+
var __export = (target, all) => {
|
|
9
|
+
for (var name in all)
|
|
10
|
+
__defProp(target, name, { get: all[name], enumerable: true });
|
|
11
|
+
};
|
|
12
|
+
var __reExport = (target, module2, copyDefault, desc) => {
|
|
13
|
+
if (module2 && typeof module2 === "object" || typeof module2 === "function") {
|
|
14
|
+
for (let key of __getOwnPropNames(module2))
|
|
15
|
+
if (!__hasOwnProp.call(target, key) && (copyDefault || key !== "default"))
|
|
16
|
+
__defProp(target, key, { get: () => module2[key], enumerable: !(desc = __getOwnPropDesc(module2, key)) || desc.enumerable });
|
|
17
|
+
}
|
|
18
|
+
return target;
|
|
19
|
+
};
|
|
20
|
+
var __toESM = (module2, isNodeMode) => {
|
|
21
|
+
return __reExport(__markAsModule(__defProp(module2 != null ? __create(__getProtoOf(module2)) : {}, "default", !isNodeMode && module2 && module2.__esModule ? { get: () => module2.default, enumerable: true } : { value: module2, enumerable: true })), module2);
|
|
22
|
+
};
|
|
23
|
+
var __toCommonJS = /* @__PURE__ */ ((cache) => {
|
|
24
|
+
return (module2, temp) => {
|
|
25
|
+
return cache && cache.get(module2) || (temp = __reExport(__markAsModule({}), module2, 1), cache && cache.set(module2, temp), temp);
|
|
26
|
+
};
|
|
27
|
+
})(typeof WeakMap !== "undefined" ? /* @__PURE__ */ new WeakMap() : 0);
|
|
28
|
+
var styled_exports = {};
|
|
29
|
+
__export(styled_exports, {
|
|
30
|
+
StyledItem: () => StyledItem,
|
|
31
|
+
StyledItemWrapper: () => StyledItemWrapper,
|
|
32
|
+
borderOutside: () => borderOutside
|
|
33
|
+
});
|
|
34
|
+
var React = __toESM(require("react"));
|
|
35
|
+
var import_ds_grid = __toESM(require("@elliemae/ds-grid"));
|
|
36
|
+
var import_styled_components = __toESM(require("styled-components"));
|
|
37
|
+
const borderOutside = (color, weight = 2) => `&:before {
|
|
38
|
+
content: '';
|
|
39
|
+
position: absolute;
|
|
40
|
+
top: 0;
|
|
41
|
+
left: 0;
|
|
42
|
+
right: 0;
|
|
43
|
+
bottom: 0;
|
|
44
|
+
border: ${weight}px solid ${color};
|
|
45
|
+
pointer-events: none;
|
|
46
|
+
}`;
|
|
47
|
+
const StyledItemWrapper = (0, import_styled_components.default)(import_ds_grid.default)`
|
|
48
|
+
position: relative;
|
|
49
|
+
${(props) => props.shadowStyle(props.theme)}
|
|
50
|
+
`;
|
|
51
|
+
const getItemBackground = ({ selectable, opened, selected, theme }) => {
|
|
52
|
+
if (!selectable)
|
|
53
|
+
return "white";
|
|
54
|
+
if (selected && !opened)
|
|
55
|
+
return theme.colors.brand[200];
|
|
56
|
+
return theme.colors.neutral["000"];
|
|
57
|
+
};
|
|
58
|
+
const getItemHoverBackground = ({ selectable, opened, selected, theme }) => {
|
|
59
|
+
if (!selectable)
|
|
60
|
+
return "white";
|
|
61
|
+
if (selected && !opened)
|
|
62
|
+
return theme.colors.brand[200];
|
|
63
|
+
return theme.colors.brand["200"];
|
|
64
|
+
};
|
|
65
|
+
const StyledItem = (0, import_styled_components.default)(import_ds_grid.default)`
|
|
66
|
+
cursor: ${(props) => props.selectable && !props.opened ? "pointer" : "auto"};
|
|
67
|
+
min-height: ${(props) => props.minHeight};
|
|
7
68
|
|
|
8
|
-
|
|
69
|
+
background: ${getItemBackground};
|
|
9
70
|
|
|
10
|
-
|
|
11
|
-
var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
|
|
71
|
+
${(props) => props.selected && !props.opened ? borderOutside(props.theme.colors.brand[500], 1) : ""}
|
|
12
72
|
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
return "&:before {\n content: '';\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n border: ".concat(weight, "px solid ").concat(color, ";\n pointer-events: none;\n}");
|
|
17
|
-
};
|
|
18
|
-
const StyledItemWrapper = /*#__PURE__*/styled__default["default"](Grid__default["default"]).withConfig({
|
|
19
|
-
componentId: "sc-11wzgfh-0"
|
|
20
|
-
})(["position:relative;", ""], props => props.shadowStyle(props.theme));
|
|
73
|
+
:hover {
|
|
74
|
+
background: ${getItemHoverBackground};
|
|
75
|
+
}
|
|
21
76
|
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
opened,
|
|
26
|
-
selected,
|
|
27
|
-
theme
|
|
28
|
-
} = _ref;
|
|
29
|
-
if (!selectable) return 'white';
|
|
30
|
-
if (selected && !opened) return theme.colors.brand[200];
|
|
31
|
-
return theme.colors.neutral['000'];
|
|
32
|
-
};
|
|
77
|
+
:active {
|
|
78
|
+
background: ${({ selectable, theme }) => selectable ? theme.colors.brand[200] : "white"};
|
|
79
|
+
}
|
|
33
80
|
|
|
34
|
-
|
|
35
|
-
let {
|
|
36
|
-
selectable,
|
|
37
|
-
opened,
|
|
38
|
-
selected,
|
|
39
|
-
theme
|
|
40
|
-
} = _ref2;
|
|
41
|
-
if (!selectable) return 'white';
|
|
42
|
-
if (selected && !opened) return theme.colors.brand[200];
|
|
43
|
-
return theme.colors.brand['200'];
|
|
44
|
-
};
|
|
81
|
+
${(props) => props.shadowStyle(props.theme)};
|
|
45
82
|
|
|
46
|
-
|
|
47
|
-
componentId: "sc-11wzgfh-1"
|
|
48
|
-
})(["cursor:", ";min-height:", ";background:", ";", ":hover{background:", ";}:active{background:", ";}", ";outline:none;", ""], props => props.selectable && !props.opened ? 'pointer' : 'auto', props => props.minHeight, getItemBackground, props => props.selected && !props.opened ? borderOutside(props.theme.colors.brand[500], 1) : '', getItemHoverBackground, _ref3 => {
|
|
49
|
-
let {
|
|
50
|
-
selectable,
|
|
51
|
-
theme
|
|
52
|
-
} = _ref3;
|
|
53
|
-
return selectable ? theme.colors.brand[200] : 'white';
|
|
54
|
-
}, props => props.shadowStyle(props.theme), props => props.tabIndex !== -1 ? ":focus {\n ".concat(borderOutside(props.theme.colors.brand[700]), "\n }") : '');
|
|
83
|
+
outline: none;
|
|
55
84
|
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
85
|
+
${(props) => props.tabIndex !== -1 ? `:focus {
|
|
86
|
+
${borderOutside(props.theme.colors.brand[700])}
|
|
87
|
+
}` : ""}
|
|
88
|
+
`;
|
|
89
|
+
module.exports = __toCommonJS(styled_exports);
|
|
90
|
+
//# sourceMappingURL=styled.js.map
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../../../src/exported-related/ItemRenderer/styled.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
+
"sourcesContent": ["/* eslint-disable indent */\n/* eslint-disable @typescript-eslint/no-explicit-any */\nimport Grid from '@elliemae/ds-grid';\nimport styled from 'styled-components';\n\ninterface ItemProps {\n selected: boolean;\n selectable: boolean;\n opened: boolean;\n theme: any;\n shadowStyle: (theme: any) => string;\n}\n\nexport const borderOutside = (color, weight = 2): string => `&:before {\n content: '';\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n border: ${weight}px solid ${color};\n pointer-events: none;\n}`;\n\nexport const StyledItemWrapper = styled(Grid)<{\n shadowStyle: (theme: any) => string;\n}>`\n position: relative;\n ${(props) => props.shadowStyle(props.theme)}\n`;\n\nconst getItemBackground = ({ selectable, opened, selected, theme }: ItemProps) => {\n if (!selectable) return 'white';\n if (selected && !opened) return theme.colors.brand[200];\n return theme.colors.neutral['000'];\n};\n\nconst getItemHoverBackground = ({ selectable, opened, selected, theme }: ItemProps) => {\n if (!selectable) return 'white';\n if (selected && !opened) return theme.colors.brand[200];\n return theme.colors.brand['200'];\n};\n\nexport const StyledItem = styled(Grid)<{ minHeight: string } & ItemProps>`\n cursor: ${(props) => (props.selectable && !props.opened ? 'pointer' : 'auto')};\n min-height: ${(props) => props.minHeight};\n\n background: ${getItemBackground};\n\n ${(props) => (props.selected && !props.opened ? borderOutside(props.theme.colors.brand[500], 1) : '')}\n\n :hover {\n background: ${getItemHoverBackground};\n }\n\n :active {\n background: ${({ selectable, theme }) => (selectable ? theme.colors.brand[200] : 'white')};\n }\n\n ${(props) => props.shadowStyle(props.theme)};\n\n outline: none;\n\n ${(props) =>\n props.tabIndex !== -1\n ? `:focus {\n ${borderOutside(props.theme.colors.brand[700])}\n }`\n : ''}\n`;\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADEvB,qBAAiB;AACjB,+BAAmB;AAUZ,MAAM,gBAAgB,CAAC,OAAO,SAAS,MAAc;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,YAOhD,kBAAkB;AAAA;AAAA;AAIvB,MAAM,oBAAoB,sCAAO;AAAA;AAAA,IAIpC,CAAC,UAAU,MAAM,YAAY,MAAM;AAAA;AAGvC,MAAM,oBAAoB,CAAC,EAAE,YAAY,QAAQ,UAAU,YAAuB;AAChF,MAAI,CAAC;AAAY,WAAO;AACxB,MAAI,YAAY,CAAC;AAAQ,WAAO,MAAM,OAAO,MAAM;AACnD,SAAO,MAAM,OAAO,QAAQ;AAAA;AAG9B,MAAM,yBAAyB,CAAC,EAAE,YAAY,QAAQ,UAAU,YAAuB;AACrF,MAAI,CAAC;AAAY,WAAO;AACxB,MAAI,YAAY,CAAC;AAAQ,WAAO,MAAM,OAAO,MAAM;AACnD,SAAO,MAAM,OAAO,MAAM;AAAA;AAGrB,MAAM,aAAa,sCAAO;AAAA,YACrB,CAAC,UAAW,MAAM,cAAc,CAAC,MAAM,SAAS,YAAY;AAAA,gBACxD,CAAC,UAAU,MAAM;AAAA;AAAA,gBAEjB;AAAA;AAAA,IAEZ,CAAC,UAAW,MAAM,YAAY,CAAC,MAAM,SAAS,cAAc,MAAM,MAAM,OAAO,MAAM,MAAM,KAAK;AAAA;AAAA;AAAA,kBAGlF;AAAA;AAAA;AAAA;AAAA,kBAIA,CAAC,EAAE,YAAY,YAAa,aAAa,MAAM,OAAO,MAAM,OAAO;AAAA;AAAA;AAAA,IAGjF,CAAC,UAAU,MAAM,YAAY,MAAM;AAAA;AAAA;AAAA;AAAA,IAInC,CAAC,UACD,MAAM,aAAa,KACf;AAAA,MACF,cAAc,MAAM,MAAM,OAAO,MAAM;AAAA,aAErC;AAAA;",
|
|
6
|
+
"names": []
|
|
7
|
+
}
|
|
@@ -1,57 +1,69 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
1
|
+
var __create = Object.create;
|
|
2
|
+
var __defProp = Object.defineProperty;
|
|
3
|
+
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
4
|
+
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
5
|
+
var __getProtoOf = Object.getPrototypeOf;
|
|
6
|
+
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
7
|
+
var __markAsModule = (target) => __defProp(target, "__esModule", { value: true });
|
|
8
|
+
var __export = (target, all) => {
|
|
9
|
+
for (var name in all)
|
|
10
|
+
__defProp(target, name, { get: all[name], enumerable: true });
|
|
11
|
+
};
|
|
12
|
+
var __reExport = (target, module2, copyDefault, desc) => {
|
|
13
|
+
if (module2 && typeof module2 === "object" || typeof module2 === "function") {
|
|
14
|
+
for (let key of __getOwnPropNames(module2))
|
|
15
|
+
if (!__hasOwnProp.call(target, key) && (copyDefault || key !== "default"))
|
|
16
|
+
__defProp(target, key, { get: () => module2[key], enumerable: !(desc = __getOwnPropDesc(module2, key)) || desc.enumerable });
|
|
17
|
+
}
|
|
18
|
+
return target;
|
|
19
|
+
};
|
|
20
|
+
var __toESM = (module2, isNodeMode) => {
|
|
21
|
+
return __reExport(__markAsModule(__defProp(module2 != null ? __create(__getProtoOf(module2)) : {}, "default", !isNodeMode && module2 && module2.__esModule ? { get: () => module2.default, enumerable: true } : { value: module2, enumerable: true })), module2);
|
|
22
|
+
};
|
|
23
|
+
var __toCommonJS = /* @__PURE__ */ ((cache) => {
|
|
24
|
+
return (module2, temp) => {
|
|
25
|
+
return cache && cache.get(module2) || (temp = __reExport(__markAsModule({}), module2, 1), cache && cache.set(module2, temp), temp);
|
|
26
|
+
};
|
|
27
|
+
})(typeof WeakMap !== "undefined" ? /* @__PURE__ */ new WeakMap() : 0);
|
|
28
|
+
var usePropsWithDefaults_exports = {};
|
|
29
|
+
__export(usePropsWithDefaults_exports, {
|
|
30
|
+
usePropsWithDefaults: () => usePropsWithDefaults
|
|
31
|
+
});
|
|
32
|
+
var React = __toESM(require("react"));
|
|
33
|
+
var import_react = __toESM(require("react"));
|
|
20
34
|
const itemDefaultProps = {
|
|
21
|
-
label:
|
|
22
|
-
labelOverflow:
|
|
35
|
+
label: "",
|
|
36
|
+
labelOverflow: "truncate",
|
|
23
37
|
selectable: true,
|
|
24
38
|
focuseable: true,
|
|
25
39
|
openable: false,
|
|
26
40
|
closable: false,
|
|
27
|
-
ariaLabel:
|
|
28
|
-
ariaRole:
|
|
29
|
-
ariaLive:
|
|
30
|
-
ariaExpanded:
|
|
31
|
-
ariaDescribedBy:
|
|
41
|
+
ariaLabel: "",
|
|
42
|
+
ariaRole: "menuitem",
|
|
43
|
+
ariaLive: "off",
|
|
44
|
+
ariaExpanded: void 0,
|
|
45
|
+
ariaDescribedBy: void 0
|
|
32
46
|
};
|
|
33
|
-
const itemWithoutShadows = [
|
|
34
|
-
|
|
35
|
-
const
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
minHeight: '48px',
|
|
45
|
-
paddingTop: '12px',
|
|
47
|
+
const itemWithoutShadows = ["ds-left-nav-item-header", "ds-left-nav-item-link", "ds-left-nav-item-submenu"];
|
|
48
|
+
const usePropsWithDefaults = (props) => {
|
|
49
|
+
const propsWithDefault = (0, import_react.useMemo)(() => {
|
|
50
|
+
const itemWithDefaults = {
|
|
51
|
+
CollapsedComponent: () => null,
|
|
52
|
+
...props.item,
|
|
53
|
+
itemOpts: { ...itemDefaultProps, ...props.item.itemOpts }
|
|
54
|
+
};
|
|
55
|
+
return {
|
|
56
|
+
minHeight: "48px",
|
|
57
|
+
paddingTop: "12px",
|
|
46
58
|
subitems: [],
|
|
47
|
-
shadowStyle: (opened, type) => theme =>
|
|
59
|
+
shadowStyle: (opened, type) => (theme) => `box-shadow: ${opened || !itemWithoutShadows.includes(type) ? "inset 4px 0 0 0 #52A6EC" : "inset 4px 0 0 0 white"}`,
|
|
48
60
|
hasBorderBottom: false,
|
|
49
|
-
borderBottomMr:
|
|
50
|
-
|
|
61
|
+
borderBottomMr: "0px",
|
|
62
|
+
...props,
|
|
51
63
|
item: itemWithDefaults
|
|
52
|
-
}
|
|
64
|
+
};
|
|
53
65
|
}, [props]);
|
|
54
66
|
return propsWithDefault;
|
|
55
67
|
};
|
|
56
|
-
|
|
57
|
-
|
|
68
|
+
module.exports = __toCommonJS(usePropsWithDefaults_exports);
|
|
69
|
+
//# sourceMappingURL=usePropsWithDefaults.js.map
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../../../src/exported-related/ItemRenderer/usePropsWithDefaults.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
+
"sourcesContent": ["import { useMemo } from 'react';\nimport { itemOptsT, ItemRendererT } from '../../index.d';\n\nconst itemDefaultProps: itemOptsT = {\n label: '',\n labelOverflow: 'truncate',\n selectable: true,\n focuseable: true,\n openable: false,\n closable: false,\n ariaLabel: '',\n ariaRole: 'menuitem',\n ariaLive: 'off',\n ariaExpanded: undefined,\n ariaDescribedBy: undefined,\n};\n\nconst itemWithoutShadows = ['ds-left-nav-item-header', 'ds-left-nav-item-link', 'ds-left-nav-item-submenu'];\n\n// Make use Item props with defaults\nexport const usePropsWithDefaults = (props: ItemRendererT): ItemRendererT => {\n const propsWithDefault = useMemo(() => {\n const itemWithDefaults = {\n CollapsedComponent: () => null,\n ...props.item,\n itemOpts: { ...itemDefaultProps, ...props.item.itemOpts },\n };\n return {\n minHeight: '48px',\n paddingTop: '12px',\n subitems: [],\n shadowStyle: (opened: boolean, type: string) => (theme: any) =>\n `box-shadow: ${\n opened || !itemWithoutShadows.includes(type) ? 'inset 4px 0 0 0 #52A6EC' : 'inset 4px 0 0 0 white'\n }`,\n hasBorderBottom: false,\n borderBottomMr: '0px',\n ...props,\n item: itemWithDefaults,\n };\n }, [props]);\n\n return propsWithDefault;\n};\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAAwB;AAGxB,MAAM,mBAA8B;AAAA,EAClC,OAAO;AAAA,EACP,eAAe;AAAA,EACf,YAAY;AAAA,EACZ,YAAY;AAAA,EACZ,UAAU;AAAA,EACV,UAAU;AAAA,EACV,WAAW;AAAA,EACX,UAAU;AAAA,EACV,UAAU;AAAA,EACV,cAAc;AAAA,EACd,iBAAiB;AAAA;AAGnB,MAAM,qBAAqB,CAAC,2BAA2B,yBAAyB;AAGzE,MAAM,uBAAuB,CAAC,UAAwC;AAC3E,QAAM,mBAAmB,0BAAQ,MAAM;AACrC,UAAM,mBAAmB;AAAA,MACvB,oBAAoB,MAAM;AAAA,SACvB,MAAM;AAAA,MACT,UAAU,KAAK,qBAAqB,MAAM,KAAK;AAAA;AAEjD,WAAO;AAAA,MACL,WAAW;AAAA,MACX,YAAY;AAAA,MACZ,UAAU;AAAA,MACV,aAAa,CAAC,QAAiB,SAAiB,CAAC,UAC/C,eACE,UAAU,CAAC,mBAAmB,SAAS,QAAQ,4BAA4B;AAAA,MAE/E,iBAAiB;AAAA,MACjB,gBAAgB;AAAA,SACb;AAAA,MACH,MAAM;AAAA;AAAA,KAEP,CAAC;AAEJ,SAAO;AAAA;",
|
|
6
|
+
"names": []
|
|
7
|
+
}
|