@elliemae/ds-left-navigation 3.12.0-rc.2 → 3.12.0-rc.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/dist/cjs/LeftNavigation.js +1 -4
- package/dist/cjs/LeftNavigation.js.map +1 -1
- package/dist/cjs/exported-related/ChevronItem/index.js +1 -5
- package/dist/cjs/exported-related/ChevronItem/index.js.map +1 -1
- package/dist/cjs/exported-related/Icon/index.js +1 -5
- package/dist/cjs/exported-related/Icon/index.js.map +1 -1
- package/dist/cjs/exported-related/ItemRenderer/index.js +10 -19
- package/dist/cjs/exported-related/ItemRenderer/index.js.map +1 -1
- package/dist/cjs/exported-related/Notifications/index.js +8 -46
- package/dist/cjs/exported-related/Notifications/index.js.map +1 -1
- package/dist/cjs/exported-related/OpenWindowItem/index.js +1 -5
- package/dist/cjs/exported-related/OpenWindowItem/index.js.map +1 -1
- package/dist/cjs/outOfTheBox/ItemControlledDrilldown/index.js +50 -68
- package/dist/cjs/outOfTheBox/ItemControlledDrilldown/index.js.map +1 -1
- package/dist/cjs/outOfTheBox/ItemHeader/index.js +87 -81
- package/dist/cjs/outOfTheBox/ItemHeader/index.js.map +1 -1
- package/dist/cjs/outOfTheBox/ItemLink/index.js +30 -44
- package/dist/cjs/outOfTheBox/ItemLink/index.js.map +1 -1
- package/dist/cjs/outOfTheBox/ItemSection/index.js +34 -44
- package/dist/cjs/outOfTheBox/ItemSection/index.js.map +1 -1
- package/dist/cjs/outOfTheBox/ItemSeparator/index.js +16 -15
- package/dist/cjs/outOfTheBox/ItemSeparator/index.js.map +1 -1
- package/dist/cjs/outOfTheBox/ItemSubmenu/index.js +90 -84
- package/dist/cjs/outOfTheBox/ItemSubmenu/index.js.map +1 -1
- package/dist/cjs/outOfTheBox/ItemTextLabel/index.js +28 -25
- package/dist/cjs/outOfTheBox/ItemTextLabel/index.js.map +1 -1
- package/dist/cjs/outOfTheBox/ItemUncontrolledDrilldown/index.js +51 -69
- package/dist/cjs/outOfTheBox/ItemUncontrolledDrilldown/index.js.map +1 -1
- package/dist/cjs/outOfTheBox/ItemWithDate/index.js +41 -42
- package/dist/cjs/outOfTheBox/ItemWithDate/index.js.map +1 -1
- package/dist/cjs/parts/LeftNavContent/index.js +51 -54
- package/dist/cjs/parts/LeftNavContent/index.js.map +1 -1
- package/dist/cjs/parts/LeftNavFooterItem/index.js +19 -24
- package/dist/cjs/parts/LeftNavFooterItem/index.js.map +1 -1
- package/dist/cjs/parts/LeftNavLoading/index.js +5 -4
- package/dist/cjs/parts/LeftNavLoading/index.js.map +1 -1
- package/dist/cjs/parts/OutOfTheBoxMapItem.js +2 -8
- package/dist/cjs/parts/OutOfTheBoxMapItem.js.map +1 -1
- package/dist/esm/LeftNavigation.js +1 -4
- package/dist/esm/LeftNavigation.js.map +1 -1
- package/dist/esm/exported-related/ChevronItem/index.js +1 -5
- package/dist/esm/exported-related/ChevronItem/index.js.map +1 -1
- package/dist/esm/exported-related/Icon/index.js +1 -5
- package/dist/esm/exported-related/Icon/index.js.map +1 -1
- package/dist/esm/exported-related/ItemRenderer/index.js +10 -19
- package/dist/esm/exported-related/ItemRenderer/index.js.map +1 -1
- package/dist/esm/exported-related/Notifications/index.js +8 -46
- package/dist/esm/exported-related/Notifications/index.js.map +1 -1
- package/dist/esm/exported-related/OpenWindowItem/index.js +1 -5
- package/dist/esm/exported-related/OpenWindowItem/index.js.map +1 -1
- package/dist/esm/outOfTheBox/ItemControlledDrilldown/index.js +50 -68
- package/dist/esm/outOfTheBox/ItemControlledDrilldown/index.js.map +1 -1
- package/dist/esm/outOfTheBox/ItemHeader/index.js +87 -81
- package/dist/esm/outOfTheBox/ItemHeader/index.js.map +1 -1
- package/dist/esm/outOfTheBox/ItemLink/index.js +30 -44
- package/dist/esm/outOfTheBox/ItemLink/index.js.map +1 -1
- package/dist/esm/outOfTheBox/ItemSection/index.js +34 -44
- package/dist/esm/outOfTheBox/ItemSection/index.js.map +1 -1
- package/dist/esm/outOfTheBox/ItemSeparator/index.js +16 -15
- package/dist/esm/outOfTheBox/ItemSeparator/index.js.map +1 -1
- package/dist/esm/outOfTheBox/ItemSubmenu/index.js +90 -84
- package/dist/esm/outOfTheBox/ItemSubmenu/index.js.map +1 -1
- package/dist/esm/outOfTheBox/ItemTextLabel/index.js +28 -25
- package/dist/esm/outOfTheBox/ItemTextLabel/index.js.map +1 -1
- package/dist/esm/outOfTheBox/ItemUncontrolledDrilldown/index.js +51 -69
- package/dist/esm/outOfTheBox/ItemUncontrolledDrilldown/index.js.map +1 -1
- package/dist/esm/outOfTheBox/ItemWithDate/index.js +41 -42
- package/dist/esm/outOfTheBox/ItemWithDate/index.js.map +1 -1
- package/dist/esm/parts/LeftNavContent/index.js +51 -54
- package/dist/esm/parts/LeftNavContent/index.js.map +1 -1
- package/dist/esm/parts/LeftNavFooterItem/index.js +19 -24
- package/dist/esm/parts/LeftNavFooterItem/index.js.map +1 -1
- package/dist/esm/parts/LeftNavLoading/index.js +5 -4
- package/dist/esm/parts/LeftNavLoading/index.js.map +1 -1
- package/dist/esm/parts/OutOfTheBoxMapItem.js +2 -8
- package/dist/esm/parts/OutOfTheBoxMapItem.js.map +1 -1
- package/package.json +7 -7
|
@@ -37,10 +37,7 @@ var import_useLeftNavConfig = require("./configs/useLeftNavConfig");
|
|
|
37
37
|
var import_LeftNavContent = __toESM(require("./parts/LeftNavContent"));
|
|
38
38
|
const LeftNavigation = (props) => {
|
|
39
39
|
const leftNavConfig = (0, import_useLeftNavConfig.useLeftNavConfig)(props);
|
|
40
|
-
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_LeftNavigationContext.default.Provider, {
|
|
41
|
-
value: leftNavConfig,
|
|
42
|
-
children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_LeftNavContent.default, {})
|
|
43
|
-
});
|
|
40
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_LeftNavigationContext.default.Provider, { value: leftNavConfig, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_LeftNavContent.default, {}) });
|
|
44
41
|
};
|
|
45
42
|
LeftNavigation.propTypes = import_prop_types.leftNavigationProps;
|
|
46
43
|
LeftNavigation.defaultProps = import_LeftNavigationContext.defaultProps;
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/LeftNavigation.tsx", "../../../../scripts/build/transpile/react-shim.js"],
|
|
4
4
|
"sourcesContent": ["import React from 'react';\nimport { describe } from '@elliemae/ds-utilities';\nimport { leftNavigationProps } from './prop-types';\nimport LeftNavigationContext, { defaultProps } from './LeftNavigationContext';\nimport { useLeftNavConfig } from './configs/useLeftNavConfig';\nimport LeftNavContent from './parts/LeftNavContent';\nimport type { LeftNavProps } from './index.d';\n\nexport const LeftNavigation = (props: LeftNavProps): JSX.Element => {\n const leftNavConfig = useLeftNavConfig(props);\n\n return (\n <LeftNavigationContext.Provider value={leftNavConfig}>\n <LeftNavContent />\n </LeftNavigationContext.Provider>\n );\n};\n\nLeftNavigation.propTypes = leftNavigationProps;\nLeftNavigation.defaultProps = defaultProps;\nLeftNavigation.displayName = 'LeftNavigation';\nexport const LeftNavigationWithSchema = describe(LeftNavigation).description('Left Navigation');\nLeftNavigationWithSchema.propTypes = leftNavigationProps;\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADajB;AAZN,0BAAyB;AACzB,wBAAoC;AACpC,mCAAoD;AACpD,8BAAiC;AACjC,4BAA2B;AAGpB,MAAM,iBAAiB,CAAC,UAAqC;AAClE,QAAM,oBAAgB,0CAAiB,KAAK;AAE5C,SACE,4CAAC,6BAAAA,QAAsB,UAAtB
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADajB;AAZN,0BAAyB;AACzB,wBAAoC;AACpC,mCAAoD;AACpD,8BAAiC;AACjC,4BAA2B;AAGpB,MAAM,iBAAiB,CAAC,UAAqC;AAClE,QAAM,oBAAgB,0CAAiB,KAAK;AAE5C,SACE,4CAAC,6BAAAA,QAAsB,UAAtB,EAA+B,OAAO,eACrC,sDAAC,sBAAAC,SAAA,EAAe,GAClB;AAEJ;AAEA,eAAe,YAAY;AAC3B,eAAe,eAAe;AAC9B,eAAe,cAAc;AACtB,MAAM,+BAA2B,8BAAS,cAAc,EAAE,YAAY,iBAAiB;AAC9F,yBAAyB,YAAY;",
|
|
6
6
|
"names": ["LeftNavigationContext", "LeftNavContent"]
|
|
7
7
|
}
|
|
@@ -31,10 +31,6 @@ module.exports = __toCommonJS(ChevronItem_exports);
|
|
|
31
31
|
var React = __toESM(require("react"));
|
|
32
32
|
var import_jsx_runtime = require("react/jsx-runtime");
|
|
33
33
|
var import_ds_icons = require("@elliemae/ds-icons");
|
|
34
|
-
const ChevronItem = (props) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_icons.ChevronSmallRight, {
|
|
35
|
-
size: "m",
|
|
36
|
-
color: ["brand-primary", 800],
|
|
37
|
-
...props
|
|
38
|
-
});
|
|
34
|
+
const ChevronItem = (props) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_icons.ChevronSmallRight, { size: "m", color: ["brand-primary", 800], ...props });
|
|
39
35
|
var ChevronItem_default = ChevronItem;
|
|
40
36
|
//# sourceMappingURL=index.js.map
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/exported-related/ChevronItem/index.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
4
|
"sourcesContent": ["import React from 'react';\nimport { ChevronSmallRight } from '@elliemae/ds-icons';\n\nexport const ChevronItem = (props: unknown): JSX.Element => (\n <ChevronSmallRight size=\"m\" color={['brand-primary', 800]} {...props} />\n);\n\nexport default ChevronItem;\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADIrB;AAHF,sBAAkC;AAE3B,MAAM,cAAc,CAAC,UAC1B,4CAAC
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADIrB;AAHF,sBAAkC;AAE3B,MAAM,cAAc,CAAC,UAC1B,4CAAC,qCAAkB,MAAK,KAAI,OAAO,CAAC,iBAAiB,GAAG,GAAI,GAAG,OAAO;AAGxE,IAAO,sBAAQ;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -41,10 +41,6 @@ const AugmentedIcon = (Icon2) => (0, import_ds_system.styled)(Icon2)`
|
|
|
41
41
|
`;
|
|
42
42
|
const Icon = (IconComponent) => function(props) {
|
|
43
43
|
const StyledComponent = AugmentedIcon(IconComponent);
|
|
44
|
-
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(StyledComponent, {
|
|
45
|
-
color: ["brand-primary", 800],
|
|
46
|
-
tabIndex: 0,
|
|
47
|
-
...props
|
|
48
|
-
});
|
|
44
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(StyledComponent, { color: ["brand-primary", 800], tabIndex: 0, ...props });
|
|
49
45
|
};
|
|
50
46
|
//# sourceMappingURL=index.js.map
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/exported-related/Icon/index.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
4
|
"sourcesContent": ["import React from 'react';\nimport { styled } from '@elliemae/ds-system';\n\nconst AugmentedIcon = (Icon: React.ComponentType<{ color: unknown; tabIndex: number }>) => styled(Icon)`\n cursor: pointer;\n\n outline: 0;\n :focus,\n :active {\n outline: 1px solid #1e79c2;\n }\n`;\n\nexport const Icon = (IconComponent: React.ComponentType<{ color: unknown; tabIndex: number }>) =>\n function (props: unknown): JSX.Element {\n const StyledComponent = AugmentedIcon(IconComponent);\n return <StyledComponent color={['brand-primary', 800]} tabIndex={0} {...props} />;\n };\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADgBZ;AAfX,uBAAuB;AAEvB,MAAM,gBAAgB,CAACA,cAAoE,yBAAOA,KAAI;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAU/F,MAAM,OAAO,CAAC,kBACnB,SAAU,OAA6B;AACrC,QAAM,kBAAkB,cAAc,aAAa;AACnD,SAAO,4CAAC
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADgBZ;AAfX,uBAAuB;AAEvB,MAAM,gBAAgB,CAACA,cAAoE,yBAAOA,KAAI;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAU/F,MAAM,OAAO,CAAC,kBACnB,SAAU,OAA6B;AACrC,QAAM,kBAAkB,cAAc,aAAa;AACnD,SAAO,4CAAC,mBAAgB,OAAO,CAAC,iBAAiB,GAAG,GAAG,UAAU,GAAI,GAAG,OAAO;AACjF;",
|
|
6
6
|
"names": ["Icon"]
|
|
7
7
|
}
|
|
@@ -86,9 +86,10 @@ const ItemRenderer = (props) => {
|
|
|
86
86
|
if (!expandedForAnimation && !CollapsedComponent) {
|
|
87
87
|
return null;
|
|
88
88
|
}
|
|
89
|
-
return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, {
|
|
90
|
-
|
|
91
|
-
|
|
89
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
|
|
90
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
|
|
91
|
+
import_styled.StyledItem,
|
|
92
|
+
{
|
|
92
93
|
ref: visibleItemsRefs.current[dsId],
|
|
93
94
|
pt: paddingTop,
|
|
94
95
|
pl: indent === void 0 ? "xxxs" : `${indent}px`,
|
|
@@ -116,22 +117,12 @@ const ItemRenderer = (props) => {
|
|
|
116
117
|
"aria-hidden": !focuseable,
|
|
117
118
|
"aria-live": ariaLive,
|
|
118
119
|
children: [
|
|
119
|
-
!expandedForAnimation ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styled.StyledCollapsedContainer, {
|
|
120
|
-
|
|
121
|
-
justifyContent: "center",
|
|
122
|
-
children: CollapsedComponent && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(CollapsedComponent, {
|
|
123
|
-
item,
|
|
124
|
-
ctx
|
|
125
|
-
})
|
|
126
|
-
}) : children,
|
|
127
|
-
hasBorderBottom && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styled.StyledBorderBottom, {
|
|
128
|
-
opened,
|
|
129
|
-
borderBottomMr
|
|
130
|
-
})
|
|
120
|
+
!expandedForAnimation ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styled.StyledCollapsedContainer, { "data-testid": "leftnav-leftcomponent", justifyContent: "center", children: CollapsedComponent && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(CollapsedComponent, { item, ctx }) }) : children,
|
|
121
|
+
hasBorderBottom && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styled.StyledBorderBottom, { opened, borderBottomMr })
|
|
131
122
|
]
|
|
132
|
-
}
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
});
|
|
123
|
+
}
|
|
124
|
+
),
|
|
125
|
+
subitems
|
|
126
|
+
] });
|
|
136
127
|
};
|
|
137
128
|
//# sourceMappingURL=index.js.map
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/exported-related/ItemRenderer/index.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
4
|
"sourcesContent": ["/* eslint-disable complexity */\n/* eslint-disable max-lines */\nimport React, { useContext, useMemo, useCallback } from 'react';\nimport { StyledItem, StyledCollapsedContainer, StyledBorderBottom } from './styled';\n\nimport type { ItemRendererT } from '../../index.d';\nimport { LeftNavContext } from '../../LeftNavigationContext';\nimport { usePropsWithDefaults } from './usePropsWithDefaults';\nimport { useKeyboardNavigation } from '../../hooks';\n\nexport const ItemRenderer: React.ComponentType<ItemRendererT> = (props) => {\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: React.MouseEvent<HTMLElement>) => {\n if (onClick) onClick(); // used by uncontrolled drilldowns\n onItemClick(item, e);\n if (selectable) setSelectedItem(item.dsId as string);\n },\n [onItemClick, item, setSelectedItem, selectable, onClick],\n );\n\n const handleFocus = useCallback(() => {\n if (focuseable) setFocusedItem(dsId as string);\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 <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 data-opened={opened}\n data-type={item.type}\n aria-label={ariaLabel}\n aria-hidden={!focuseable}\n aria-live={ariaLive}\n >\n {!expandedForAnimation ? (\n <StyledCollapsedContainer data-testid=\"leftnav-leftcomponent\" justifyContent=\"center\">\n {CollapsedComponent && <CollapsedComponent item={item} ctx={ctx} />}\n </StyledCollapsedContainer>\n ) : (\n children\n )}\n {hasBorderBottom && <StyledBorderBottom opened={opened} borderBottomMr={borderBottomMr} />}\n </StyledItem>\n {subitems}\n </>\n );\n};\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADoEnB;AAlEJ,mBAAwD;AACxD,oBAAyE;AAGzE,mCAA+B;AAC/B,kCAAqC;AACrC,mBAAsC;AAE/B,MAAM,eAAmD,CAAC,UAAU;AACzE,QAAM,uBAAmB,kDAAqB,KAAK;AACnD,QAAM;AAAA,IACJ;AAAA,IACA,MAAM;AAAA,MACJ;AAAA,MACA,UAAU,EAAE,YAAY,YAAY,QAAQ,WAAW,UAAU,UAAU,cAAc,gBAAgB;AAAA,MACzG;AAAA,IACF;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI;AAEJ,QAAM,UAAM,yBAAW,2CAAc;AACrC,QAAM;AAAA,IACJ,cAAc,EAAE,aAAa,WAAW;AAAA,IACxC;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI;AAEJ,QAAM,SAAS,SAAS;AAExB,QAAM,oBAAgB;AAAA,IACpB,CAAC,MAAqC;AACpC,UAAI;AAAS,gBAAQ;AACrB,kBAAY,MAAM,CAAC;AACnB,UAAI;AAAY,wBAAgB,KAAK,IAAc;AAAA,IACrD;AAAA,IACA,CAAC,aAAa,MAAM,iBAAiB,YAAY,OAAO;AAAA,EAC1D;AAEA,QAAM,kBAAc,0BAAY,MAAM;AACpC,QAAI;AAAY,qBAAe,IAAc;AAAA,EAC/C,GAAG,CAAC,MAAM,gBAAgB,UAAU,CAAC;AAErC,QAAM,gBAAY,oCAAsB;AAAA,IACtC;AAAA,IACA,SAAS;AAAA,EACX,CAAC;AAED,QAAM,WAAO,sBAAQ,MAAO,uBAAuB,CAAC,QAAQ,OAAO,MAAM,IAAI,CAAC,MAAM,GAAI,CAAC,oBAAoB,CAAC;AAC9G,QAAM,iBAAa,sBAAQ,MAAM,iBAAiB,MAAM,CAAC,cAAc,IAAI,CAAC;AAE5E,MAAI,CAAC,wBAAwB,CAAC,oBAAoB;AAChD,WAAO;AAAA,EACT;AAEA,SACE;AAAA
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADoEnB;AAlEJ,mBAAwD;AACxD,oBAAyE;AAGzE,mCAA+B;AAC/B,kCAAqC;AACrC,mBAAsC;AAE/B,MAAM,eAAmD,CAAC,UAAU;AACzE,QAAM,uBAAmB,kDAAqB,KAAK;AACnD,QAAM;AAAA,IACJ;AAAA,IACA,MAAM;AAAA,MACJ;AAAA,MACA,UAAU,EAAE,YAAY,YAAY,QAAQ,WAAW,UAAU,UAAU,cAAc,gBAAgB;AAAA,MACzG;AAAA,IACF;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI;AAEJ,QAAM,UAAM,yBAAW,2CAAc;AACrC,QAAM;AAAA,IACJ,cAAc,EAAE,aAAa,WAAW;AAAA,IACxC;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI;AAEJ,QAAM,SAAS,SAAS;AAExB,QAAM,oBAAgB;AAAA,IACpB,CAAC,MAAqC;AACpC,UAAI;AAAS,gBAAQ;AACrB,kBAAY,MAAM,CAAC;AACnB,UAAI;AAAY,wBAAgB,KAAK,IAAc;AAAA,IACrD;AAAA,IACA,CAAC,aAAa,MAAM,iBAAiB,YAAY,OAAO;AAAA,EAC1D;AAEA,QAAM,kBAAc,0BAAY,MAAM;AACpC,QAAI;AAAY,qBAAe,IAAc;AAAA,EAC/C,GAAG,CAAC,MAAM,gBAAgB,UAAU,CAAC;AAErC,QAAM,gBAAY,oCAAsB;AAAA,IACtC;AAAA,IACA,SAAS;AAAA,EACX,CAAC;AAED,QAAM,WAAO,sBAAQ,MAAO,uBAAuB,CAAC,QAAQ,OAAO,MAAM,IAAI,CAAC,MAAM,GAAI,CAAC,oBAAoB,CAAC;AAC9G,QAAM,iBAAa,sBAAQ,MAAM,iBAAiB,MAAM,CAAC,cAAc,IAAI,CAAC;AAE5E,MAAI,CAAC,wBAAwB,CAAC,oBAAoB;AAChD,WAAO;AAAA,EACT;AAEA,SACE,4EACE;AAAA;AAAA,MAAC;AAAA;AAAA,QACC,KAAK,iBAAiB,QAAQ;AAAA,QAC9B,IAAI;AAAA,QACJ,IAAI,WAAW,SAAY,SAAS,GAAG;AAAA,QACvC;AAAA,QACA,aAAa,YAAY,QAAQ,KAAK,IAAI;AAAA,QAC1C,YAAW;AAAA,QACX;AAAA,QACA,SAAS,CAAC,SAAS,gBAAgB,MAAM;AAAA,QACzC;AAAA,QACA;AAAA,QACA,UAAU;AAAA,QACV,gBAAgB,mBAAmB;AAAA,QACnC;AAAA,QACA,SAAS;AAAA,QACT,eAAY;AAAA,QACZ,UAAU,aAAa,IAAI;AAAA,QAC3B,oBAAkB;AAAA,QAClB,iBAAe;AAAA,QACf,MAAM;AAAA,QACN,iBAAe;AAAA,QACf,uBAAqB,mBAAmB;AAAA,QACxC,eAAa;AAAA,QACb,aAAW,KAAK;AAAA,QAChB,cAAY;AAAA,QACZ,eAAa,CAAC;AAAA,QACd,aAAW;AAAA,QAEV;AAAA,WAAC,uBACA,4CAAC,0CAAyB,eAAY,yBAAwB,gBAAe,UAC1E,gCAAsB,4CAAC,sBAAmB,MAAY,KAAU,GACnE,IAEA;AAAA,UAED,mBAAmB,4CAAC,oCAAmB,QAAgB,gBAAgC;AAAA;AAAA;AAAA,IAC1F;AAAA,IACC;AAAA,KACH;AAEJ;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -46,51 +46,13 @@ const Notifications = ({
|
|
|
46
46
|
exceptions = false,
|
|
47
47
|
alerts = false,
|
|
48
48
|
messages = false
|
|
49
|
-
}) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(StyledIconContainer, {
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
cols: ["1fr", "1fr", "1fr"],
|
|
58
|
-
gutter: "xxxs",
|
|
59
|
-
mt: "2px",
|
|
60
|
-
children: [
|
|
61
|
-
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_grid.default, {
|
|
62
|
-
width: "6px",
|
|
63
|
-
height: "6px",
|
|
64
|
-
"data-testid": "left-nav-exceptions-icon",
|
|
65
|
-
children: exceptions && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_icons.ExceptionsSmallFill, {
|
|
66
|
-
width: "6px",
|
|
67
|
-
height: "6px",
|
|
68
|
-
color: ["warning", "900"]
|
|
69
|
-
})
|
|
70
|
-
}),
|
|
71
|
-
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_grid.default, {
|
|
72
|
-
width: "6px",
|
|
73
|
-
height: "6px",
|
|
74
|
-
"data-testid": "left-nav-alerts-icon",
|
|
75
|
-
children: alerts && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_icons.AlertsSmallFill, {
|
|
76
|
-
width: "6px",
|
|
77
|
-
height: "6px",
|
|
78
|
-
color: ["danger", "900"]
|
|
79
|
-
})
|
|
80
|
-
}),
|
|
81
|
-
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_grid.default, {
|
|
82
|
-
width: "6px",
|
|
83
|
-
height: "6px",
|
|
84
|
-
"data-testid": "left-nav-messages-icon",
|
|
85
|
-
children: messages && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_icons.MessagesSmallFill, {
|
|
86
|
-
width: "6px",
|
|
87
|
-
height: "6px",
|
|
88
|
-
color: ["success", "900"]
|
|
89
|
-
})
|
|
90
|
-
})
|
|
91
|
-
]
|
|
92
|
-
})
|
|
93
|
-
]
|
|
94
|
-
});
|
|
49
|
+
}) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(StyledIconContainer, { children: [
|
|
50
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_icons.Notifications, { size: "m", color: ["brand-primary", 800], "data-testid": "left-nav-notifications-icon" }),
|
|
51
|
+
(exceptions || alerts || messages) && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_ds_grid.default, { cols: ["1fr", "1fr", "1fr"], gutter: "xxxs", mt: "2px", children: [
|
|
52
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_grid.default, { width: "6px", height: "6px", "data-testid": "left-nav-exceptions-icon", children: exceptions && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_icons.ExceptionsSmallFill, { width: "6px", height: "6px", color: ["warning", "900"] }) }),
|
|
53
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_grid.default, { width: "6px", height: "6px", "data-testid": "left-nav-alerts-icon", children: alerts && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_icons.AlertsSmallFill, { width: "6px", height: "6px", color: ["danger", "900"] }) }),
|
|
54
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_grid.default, { width: "6px", height: "6px", "data-testid": "left-nav-messages-icon", children: messages && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_icons.MessagesSmallFill, { width: "6px", height: "6px", color: ["success", "900"] }) })
|
|
55
|
+
] })
|
|
56
|
+
] });
|
|
95
57
|
var Notifications_default = Notifications;
|
|
96
58
|
//# sourceMappingURL=index.js.map
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/exported-related/Notifications/index.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
4
|
"sourcesContent": ["import React from 'react';\nimport {\n AlertsSmallFill,\n Notifications as InternalNotifications,\n ExceptionsSmallFill,\n MessagesSmallFill,\n} from '@elliemae/ds-icons';\nimport { styled } from '@elliemae/ds-system';\nimport Grid from '@elliemae/ds-grid';\nimport { DSLeftNavigationName, DSLeftNavigationSlots } from '../../constants';\n\nconst StyledIconContainer = styled('div', {\n name: DSLeftNavigationName,\n slot: DSLeftNavigationSlots.NOTIFICATIONS_CONTAINER,\n})`\n display: flex;\n flex-direction: column;\n align-items: center;\n`;\n\ntype NotificationsProps = {\n exceptions?: boolean;\n alerts?: boolean;\n messages?: boolean;\n};\n\nexport const Notifications = ({\n exceptions = false,\n alerts = false,\n messages = false,\n}: NotificationsProps): JSX.Element => (\n <StyledIconContainer>\n <InternalNotifications size=\"m\" color={['brand-primary', 800]} data-testid=\"left-nav-notifications-icon\" />\n {(exceptions || alerts || messages) && (\n <Grid cols={['1fr', '1fr', '1fr']} gutter=\"xxxs\" mt=\"2px\">\n <Grid width=\"6px\" height=\"6px\" data-testid=\"left-nav-exceptions-icon\">\n {exceptions && <ExceptionsSmallFill width=\"6px\" height=\"6px\" color={['warning', '900']} />}\n </Grid>\n <Grid width=\"6px\" height=\"6px\" data-testid=\"left-nav-alerts-icon\">\n {alerts && <AlertsSmallFill width=\"6px\" height=\"6px\" color={['danger', '900']} />}\n </Grid>\n <Grid width=\"6px\" height=\"6px\" data-testid=\"left-nav-messages-icon\">\n {messages && <MessagesSmallFill width=\"6px\" height=\"6px\" color={['success', '900']} />}\n </Grid>\n </Grid>\n )}\n </StyledIconContainer>\n);\n\nexport default Notifications;\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADgCnB;AA/BJ,sBAKO;AACP,uBAAuB;AACvB,qBAAiB;AACjB,uBAA4D;AAE5D,MAAM,0BAAsB,yBAAO,OAAO;AAAA,EACxC,MAAM;AAAA,EACN,MAAM,uCAAsB;AAC9B,CAAC;AAAA;AAAA;AAAA;AAAA;AAYM,MAAM,gBAAgB,CAAC;AAAA,EAC5B,aAAa;AAAA,EACb,SAAS;AAAA,EACT,WAAW;AACb,MACE,6CAAC
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADgCnB;AA/BJ,sBAKO;AACP,uBAAuB;AACvB,qBAAiB;AACjB,uBAA4D;AAE5D,MAAM,0BAAsB,yBAAO,OAAO;AAAA,EACxC,MAAM;AAAA,EACN,MAAM,uCAAsB;AAC9B,CAAC;AAAA;AAAA;AAAA;AAAA;AAYM,MAAM,gBAAgB,CAAC;AAAA,EAC5B,aAAa;AAAA,EACb,SAAS;AAAA,EACT,WAAW;AACb,MACE,6CAAC,uBACC;AAAA,8CAAC,gBAAAA,eAAA,EAAsB,MAAK,KAAI,OAAO,CAAC,iBAAiB,GAAG,GAAG,eAAY,+BAA8B;AAAA,GACvG,cAAc,UAAU,aACxB,6CAAC,eAAAC,SAAA,EAAK,MAAM,CAAC,OAAO,OAAO,KAAK,GAAG,QAAO,QAAO,IAAG,OAClD;AAAA,gDAAC,eAAAA,SAAA,EAAK,OAAM,OAAM,QAAO,OAAM,eAAY,4BACxC,wBAAc,4CAAC,uCAAoB,OAAM,OAAM,QAAO,OAAM,OAAO,CAAC,WAAW,KAAK,GAAG,GAC1F;AAAA,IACA,4CAAC,eAAAA,SAAA,EAAK,OAAM,OAAM,QAAO,OAAM,eAAY,wBACxC,oBAAU,4CAAC,mCAAgB,OAAM,OAAM,QAAO,OAAM,OAAO,CAAC,UAAU,KAAK,GAAG,GACjF;AAAA,IACA,4CAAC,eAAAA,SAAA,EAAK,OAAM,OAAM,QAAO,OAAM,eAAY,0BACxC,sBAAY,4CAAC,qCAAkB,OAAM,OAAM,QAAO,OAAM,OAAO,CAAC,WAAW,KAAK,GAAG,GACtF;AAAA,KACF;AAAA,GAEJ;AAGF,IAAO,wBAAQ;",
|
|
6
6
|
"names": ["InternalNotifications", "Grid"]
|
|
7
7
|
}
|
|
@@ -38,10 +38,6 @@ const StyledOpenWindow = (0, import_ds_system.styled)(import_ds_icons.OpenWindow
|
|
|
38
38
|
outline: 1px solid ${(props) => props.theme.colors.brand[800]};
|
|
39
39
|
}
|
|
40
40
|
`;
|
|
41
|
-
const OpenWindow = (props) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(StyledOpenWindow, {
|
|
42
|
-
size: "s",
|
|
43
|
-
color: ["brand-primary", 800],
|
|
44
|
-
...props
|
|
45
|
-
});
|
|
41
|
+
const OpenWindow = (props) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(StyledOpenWindow, { size: "s", color: ["brand-primary", 800], ...props });
|
|
46
42
|
var OpenWindowItem_default = OpenWindow;
|
|
47
43
|
//# sourceMappingURL=index.js.map
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/exported-related/OpenWindowItem/index.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
4
|
"sourcesContent": ["import React from 'react';\nimport { styled } from '@elliemae/ds-system';\nimport { OpenWindow as OpenWindowIcon } from '@elliemae/ds-icons';\n\nconst StyledOpenWindow = styled(OpenWindowIcon)`\n cursor: pointer;\n :focus {\n outline: 1px solid ${(props) => props.theme.colors.brand[800]};\n }\n`;\n\nexport const OpenWindow = (props: unknown): JSX.Element => (\n <StyledOpenWindow size=\"s\" color={['brand-primary', 800]} {...props} />\n);\n\nexport default OpenWindow;\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADYrB;AAXF,uBAAuB;AACvB,sBAA6C;AAE7C,MAAM,uBAAmB,yBAAO,gBAAAA,UAAc;AAAA;AAAA;AAAA,yBAGrB,CAAC,UAAU,MAAM,MAAM,OAAO,MAAM;AAAA;AAAA;AAItD,MAAM,aAAa,CAAC,UACzB,4CAAC
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADYrB;AAXF,uBAAuB;AACvB,sBAA6C;AAE7C,MAAM,uBAAmB,yBAAO,gBAAAA,UAAc;AAAA;AAAA;AAAA,yBAGrB,CAAC,UAAU,MAAM,MAAM,OAAO,MAAM;AAAA;AAAA;AAItD,MAAM,aAAa,CAAC,UACzB,4CAAC,oBAAiB,MAAK,KAAI,OAAO,CAAC,iBAAiB,GAAG,GAAI,GAAG,OAAO;AAGvE,IAAO,yBAAQ;",
|
|
6
6
|
"names": ["OpenWindowIcon"]
|
|
7
7
|
}
|
|
@@ -55,17 +55,11 @@ const OutOfTheBoxMapSubitem = (props) => {
|
|
|
55
55
|
...item,
|
|
56
56
|
itemOpts: { ...item.itemOpts, indent: currentIndent + 44 }
|
|
57
57
|
};
|
|
58
|
-
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(OutOfTheBoxComponent, {
|
|
59
|
-
item: newItem,
|
|
60
|
-
ctx
|
|
61
|
-
});
|
|
58
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(OutOfTheBoxComponent, { item: newItem, ctx });
|
|
62
59
|
}
|
|
63
60
|
if (!Component)
|
|
64
61
|
return null;
|
|
65
|
-
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Component, {
|
|
66
|
-
item,
|
|
67
|
-
ctx
|
|
68
|
-
});
|
|
62
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Component, { item, ctx });
|
|
69
63
|
};
|
|
70
64
|
const ItemControlledDrilldown = (props) => {
|
|
71
65
|
const {
|
|
@@ -91,71 +85,59 @@ const ItemControlledDrilldown = (props) => {
|
|
|
91
85
|
const labelOverflow = itemLabelOverflow || leftNavLabelOverflow;
|
|
92
86
|
const arrowIcon = (0, import_react.useMemo)(() => {
|
|
93
87
|
const Component = isOpened ? import_ds_icons.ArrowheadDown : import_ds_icons.ArrowheadRight;
|
|
94
|
-
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Component, {
|
|
95
|
-
width: "24px",
|
|
96
|
-
height: "18px",
|
|
97
|
-
color: ["brand-primary", "800"]
|
|
98
|
-
});
|
|
88
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Component, { width: "24px", height: "18px", color: ["brand-primary", "800"] });
|
|
99
89
|
}, [isOpened]);
|
|
100
90
|
const subitems = (0, import_react.useMemo)(() => {
|
|
101
91
|
if (!isOpened || !items)
|
|
102
92
|
return [];
|
|
103
|
-
return items.map((subitem) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(OutOfTheBoxMapSubitem, {
|
|
104
|
-
item: subitem,
|
|
105
|
-
ctx
|
|
106
|
-
}, subitem.dsId));
|
|
93
|
+
return items.map((subitem) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(OutOfTheBoxMapSubitem, { item: subitem, ctx }, subitem.dsId));
|
|
107
94
|
}, [isOpened, items, ctx]);
|
|
108
|
-
return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
95
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
|
|
96
|
+
import_exported_related.ItemRenderer,
|
|
97
|
+
{
|
|
98
|
+
item: {
|
|
99
|
+
...item,
|
|
100
|
+
itemOpts: {
|
|
101
|
+
ariaExpanded: isOpened,
|
|
102
|
+
ariaRole: "menuitem",
|
|
103
|
+
...item.itemOpts,
|
|
104
|
+
openable: !isOpened,
|
|
105
|
+
closable: isOpened
|
|
106
|
+
},
|
|
107
|
+
CollapsedComponent: null
|
|
117
108
|
},
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
}),
|
|
152
|
-
RightComponent && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(RightComponent, {
|
|
153
|
-
ctx,
|
|
154
|
-
item
|
|
155
|
-
})
|
|
156
|
-
]
|
|
157
|
-
})
|
|
158
|
-
]
|
|
159
|
-
});
|
|
109
|
+
subitems,
|
|
110
|
+
minHeight: "32px",
|
|
111
|
+
paddingTop: "8px",
|
|
112
|
+
children: [
|
|
113
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styled.StyledArrowContainer, { pl: "xxs", mt: "-2px", children: arrowIcon }),
|
|
114
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
115
|
+
import_styled.StyledLabel,
|
|
116
|
+
{
|
|
117
|
+
pb: "xxxs",
|
|
118
|
+
"data-testid": labelDataTestId || "leftnav-list-item-label",
|
|
119
|
+
labelOverflow,
|
|
120
|
+
labelBold,
|
|
121
|
+
labelColor,
|
|
122
|
+
children: labelOverflow === "truncate" ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_truncated_tooltip_text.SimpleTruncatedTooltipText, { value: label, placement: "bottom-start" }) : label
|
|
123
|
+
}
|
|
124
|
+
),
|
|
125
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
|
|
126
|
+
import_styled.StyledRightContainer,
|
|
127
|
+
{
|
|
128
|
+
pr: "xxs2",
|
|
129
|
+
cols: ["auto", "auto"],
|
|
130
|
+
alignItems: "center",
|
|
131
|
+
gutter: "xxs",
|
|
132
|
+
"data-testid": "leftnav-right-component",
|
|
133
|
+
children: [
|
|
134
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styled.StyledDate, { ml: "xxs", "data-testid": "leftnav-list-item-date", children: labelRightSection }),
|
|
135
|
+
RightComponent && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(RightComponent, { ctx, item })
|
|
136
|
+
]
|
|
137
|
+
}
|
|
138
|
+
)
|
|
139
|
+
]
|
|
140
|
+
}
|
|
141
|
+
);
|
|
160
142
|
};
|
|
161
143
|
//# sourceMappingURL=index.js.map
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/outOfTheBox/ItemControlledDrilldown/index.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
4
|
"sourcesContent": ["import React, { useMemo } from 'react';\nimport { SimpleTruncatedTooltipText } from '@elliemae/ds-truncated-tooltip-text';\nimport { ArrowheadDown, ArrowheadRight } from '@elliemae/ds-icons';\nimport { ItemRenderer, ITEM_TYPES } from '../../exported-related/index';\nimport { StyledLabel, StyledDate, StyledArrowContainer, StyledRightContainer } from '../styled';\nimport { ItemSeparator } from '../ItemSeparator';\nimport { ItemWithDate } from '../ItemWithDate';\nimport { ItemTextLabel } from '../ItemTextLabel';\nimport type { ComponentProps } from '../../index.d';\n\nconst outOfTheBoxSubitemsComponents: Record<string, React.ComponentType<ComponentProps>> = {\n [ITEM_TYPES.LEFT_NAV_ITEM_SEPARATOR]: ItemSeparator,\n [ITEM_TYPES.LEFT_NAV_ITEM_WITH_DATE]: ItemWithDate,\n [ITEM_TYPES.LEFT_NAV_ITEM_TEXT_LABEL]: ItemTextLabel,\n};\n\nconst OutOfTheBoxMapSubitem: React.ComponentType<ComponentProps> = (props) => {\n const {\n item,\n item: { type, Component },\n ctx,\n } = props;\n\n if (typeof type === 'string' && !!outOfTheBoxSubitemsComponents[type]) {\n const OutOfTheBoxComponent = outOfTheBoxSubitemsComponents[type];\n const currentIndent = item.itemOpts?.indent ?? 0;\n const newItem = {\n ...item,\n itemOpts: { ...item.itemOpts, indent: currentIndent + 44 },\n };\n return <OutOfTheBoxComponent item={newItem} ctx={ctx} />;\n }\n if (!Component) return null;\n // we expect an error to be threw if Component is not defined and type is not a valid out-of-the-box...\n return <Component item={item} ctx={ctx} />;\n};\n\nexport const ItemControlledDrilldown = (props: ComponentProps): JSX.Element => {\n const {\n item,\n item: {\n itemOpts: {\n label,\n RightComponent,\n labelRightSection,\n labelOverflow: itemLabelOverflow,\n labelBold,\n labelColor,\n isOpened,\n items,\n labelDataTestId,\n },\n },\n ctx,\n ctx: {\n leftNavProps: { labelOverflow: leftNavLabelOverflow },\n },\n } = props;\n\n const labelOverflow = itemLabelOverflow || leftNavLabelOverflow;\n\n const arrowIcon = useMemo(() => {\n const Component = isOpened ? ArrowheadDown : ArrowheadRight;\n return <Component width=\"24px\" height=\"18px\" color={['brand-primary', '800']} />;\n }, [isOpened]);\n\n const subitems = useMemo(() => {\n if (!isOpened || !items) return [];\n return items.map((subitem) => <OutOfTheBoxMapSubitem item={subitem} ctx={ctx} key={subitem.dsId} />);\n }, [isOpened, items, ctx]);\n\n return (\n <ItemRenderer\n item={{\n ...item,\n itemOpts: {\n ariaExpanded: isOpened,\n ariaRole: 'menuitem',\n ...item.itemOpts,\n openable: !isOpened,\n closable: isOpened,\n },\n CollapsedComponent: null,\n }}\n subitems={subitems}\n minHeight=\"32px\"\n paddingTop=\"8px\"\n >\n <StyledArrowContainer pl=\"xxs\" mt=\"-2px\">\n {arrowIcon}\n </StyledArrowContainer>\n <StyledLabel\n pb=\"xxxs\"\n data-testid={labelDataTestId || 'leftnav-list-item-label'}\n labelOverflow={labelOverflow}\n labelBold={labelBold}\n labelColor={labelColor}\n >\n {labelOverflow === 'truncate' ? <SimpleTruncatedTooltipText value={label} placement=\"bottom-start\" /> : label}\n </StyledLabel>\n <StyledRightContainer\n pr=\"xxs2\"\n cols={['auto', 'auto']}\n alignItems=\"center\"\n gutter=\"xxs\"\n data-testid=\"leftnav-right-component\"\n >\n <StyledDate ml=\"xxs\" data-testid=\"leftnav-list-item-date\">\n {labelRightSection}\n </StyledDate>\n {RightComponent && <RightComponent ctx={ctx} item={item} />}\n </StyledRightContainer>\n </ItemRenderer>\n );\n};\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;AD8BZ;AA9BX,mBAA+B;AAC/B,uCAA2C;AAC3C,sBAA8C;AAC9C,8BAAyC;AACzC,oBAAoF;AACpF,2BAA8B;AAC9B,0BAA6B;AAC7B,2BAA8B;AAG9B,MAAM,gCAAqF;AAAA,EACzF,CAAC,mCAAW,0BAA0B;AAAA,EACtC,CAAC,mCAAW,0BAA0B;AAAA,EACtC,CAAC,mCAAW,2BAA2B;AACzC;AAEA,MAAM,wBAA6D,CAAC,UAAU;AAC5E,QAAM;AAAA,IACJ;AAAA,IACA,MAAM,EAAE,MAAM,UAAU;AAAA,IACxB;AAAA,EACF,IAAI;AAEJ,MAAI,OAAO,SAAS,YAAY,CAAC,CAAC,8BAA8B,OAAO;AACrE,UAAM,uBAAuB,8BAA8B;AAC3D,UAAM,gBAAgB,KAAK,UAAU,UAAU;AAC/C,UAAM,UAAU;AAAA,MACd,GAAG;AAAA,MACH,UAAU,EAAE,GAAG,KAAK,UAAU,QAAQ,gBAAgB,GAAG;AAAA,IAC3D;AACA,WAAO,4CAAC
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -70,90 +70,96 @@ const ItemHeader = (props) => {
|
|
|
70
70
|
(opened_) => (theme) => !opened_ ? notOpenedShadowStyle(isSelected)(theme) : `box-shadow: inset 4px 0 0 0 #52A6EC`,
|
|
71
71
|
[isSelected]
|
|
72
72
|
);
|
|
73
|
-
return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
73
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
|
|
74
|
+
import_exported_related.ItemRenderer,
|
|
75
|
+
{
|
|
76
|
+
item: {
|
|
77
|
+
...item,
|
|
78
|
+
itemOpts: {
|
|
79
|
+
ariaLabel,
|
|
80
|
+
ariaExpanded: opened,
|
|
81
|
+
...item.itemOpts,
|
|
82
|
+
openable: expandedForAnimation && !opened,
|
|
83
|
+
closable: expandedForAnimation && opened,
|
|
84
|
+
selectable: !opened
|
|
85
|
+
}
|
|
86
|
+
},
|
|
87
|
+
hasBorderBottom: true,
|
|
88
|
+
borderBottomMr: opened ? "12px" : "0px",
|
|
89
|
+
shadowStyle,
|
|
90
|
+
children: [
|
|
91
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
|
|
92
|
+
import_styled.StyledLeftContainer,
|
|
93
|
+
{
|
|
94
|
+
cols: opened ? ["auto", "auto"] : ["38px"],
|
|
95
|
+
gutter: "1px",
|
|
96
|
+
pl: opened ? "xxs" : 0,
|
|
97
|
+
justifyItems: "center",
|
|
98
|
+
"data-testid": "leftnav-leftcomponent",
|
|
99
|
+
children: [
|
|
100
|
+
opened && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
101
|
+
import_styled.StyledChevronLeft,
|
|
102
|
+
{
|
|
103
|
+
size: "m",
|
|
104
|
+
color: ["brand-primary", 800],
|
|
105
|
+
onClick: (e) => {
|
|
106
|
+
onItemClick(item, e);
|
|
107
|
+
},
|
|
108
|
+
"data-testid": "leftnav-leftcomponent-chevron",
|
|
109
|
+
tabIndex: 0,
|
|
110
|
+
onFocus: (e) => {
|
|
111
|
+
e.stopPropagation();
|
|
112
|
+
setFocusedItem(import_constants.CHEVRON_BACK_DS_ID);
|
|
113
|
+
},
|
|
114
|
+
role: "button",
|
|
115
|
+
"aria-label": `Close ${ariaLabel}`
|
|
116
|
+
}
|
|
117
|
+
),
|
|
118
|
+
CollapsedComponent && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(CollapsedComponent, { item, ctx })
|
|
119
|
+
]
|
|
120
|
+
}
|
|
121
|
+
),
|
|
122
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
123
|
+
import_styled.StyledItemLabel,
|
|
124
|
+
{
|
|
125
|
+
ml: opened ? "xxs" : "1px",
|
|
126
|
+
mt: "xxxs",
|
|
127
|
+
mb: "15px",
|
|
128
|
+
"data-testid": labelDataTestId || "leftnav-itemlabel",
|
|
129
|
+
labelOverflow,
|
|
130
|
+
children: labelOverflow === "truncate" ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_truncated_tooltip_text.SimpleTruncatedTooltipText, { value: label, placement: "bottom-start" }) : label
|
|
131
|
+
}
|
|
132
|
+
),
|
|
133
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
134
|
+
import_styled.StyledRightContainer,
|
|
135
|
+
{
|
|
136
|
+
pl: "xs",
|
|
137
|
+
pr: opened ? "xxs2" : "xxs",
|
|
138
|
+
onFocus: (e) => {
|
|
139
|
+
setFocusedItem(null);
|
|
140
|
+
e.stopPropagation();
|
|
101
141
|
},
|
|
102
|
-
|
|
103
|
-
|
|
142
|
+
onKeyDown: (e) => e.stopPropagation(),
|
|
143
|
+
"data-testid": "leftnav-right-component",
|
|
144
|
+
children: RightComponent && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(RightComponent, { ctx, item })
|
|
145
|
+
}
|
|
146
|
+
),
|
|
147
|
+
BottomComponent && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
148
|
+
import_styled.StyledBottomContainer,
|
|
149
|
+
{
|
|
150
|
+
pb: "xxxs",
|
|
151
|
+
pl: "xxs",
|
|
152
|
+
pr: "xxs",
|
|
104
153
|
onFocus: (e) => {
|
|
154
|
+
setFocusedItem(null);
|
|
105
155
|
e.stopPropagation();
|
|
106
|
-
setFocusedItem(import_constants.CHEVRON_BACK_DS_ID);
|
|
107
156
|
},
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
}
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
]
|
|
116
|
-
}),
|
|
117
|
-
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styled.StyledItemLabel, {
|
|
118
|
-
ml: opened ? "xxs" : "1px",
|
|
119
|
-
mt: "xxxs",
|
|
120
|
-
mb: "15px",
|
|
121
|
-
"data-testid": labelDataTestId || "leftnav-itemlabel",
|
|
122
|
-
labelOverflow,
|
|
123
|
-
children: labelOverflow === "truncate" ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_truncated_tooltip_text.SimpleTruncatedTooltipText, {
|
|
124
|
-
value: label,
|
|
125
|
-
placement: "bottom-start"
|
|
126
|
-
}) : label
|
|
127
|
-
}),
|
|
128
|
-
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styled.StyledRightContainer, {
|
|
129
|
-
pl: "xs",
|
|
130
|
-
pr: opened ? "xxs2" : "xxs",
|
|
131
|
-
onFocus: (e) => {
|
|
132
|
-
setFocusedItem(null);
|
|
133
|
-
e.stopPropagation();
|
|
134
|
-
},
|
|
135
|
-
onKeyDown: (e) => e.stopPropagation(),
|
|
136
|
-
"data-testid": "leftnav-right-component",
|
|
137
|
-
children: RightComponent && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(RightComponent, {
|
|
138
|
-
ctx,
|
|
139
|
-
item
|
|
140
|
-
})
|
|
141
|
-
}),
|
|
142
|
-
BottomComponent && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styled.StyledBottomContainer, {
|
|
143
|
-
pb: "xxxs",
|
|
144
|
-
pl: "xxs",
|
|
145
|
-
pr: "xxs",
|
|
146
|
-
onFocus: (e) => {
|
|
147
|
-
setFocusedItem(null);
|
|
148
|
-
e.stopPropagation();
|
|
149
|
-
},
|
|
150
|
-
onKeyDown: (e) => e.stopPropagation(),
|
|
151
|
-
children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(BottomComponent, {
|
|
152
|
-
ctx,
|
|
153
|
-
item
|
|
154
|
-
})
|
|
155
|
-
})
|
|
156
|
-
]
|
|
157
|
-
});
|
|
157
|
+
onKeyDown: (e) => e.stopPropagation(),
|
|
158
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(BottomComponent, { ctx, item })
|
|
159
|
+
}
|
|
160
|
+
)
|
|
161
|
+
]
|
|
162
|
+
}
|
|
163
|
+
);
|
|
158
164
|
};
|
|
159
165
|
//# sourceMappingURL=index.js.map
|