@elliemae/ds-left-navigation 3.36.0-next.0 → 3.36.0-next.2
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 +0 -1
- package/dist/cjs/LeftNavigation.js.map +2 -2
- package/dist/cjs/common/getItemBackgroundStyle.js.map +1 -1
- package/dist/cjs/common/getLeftBorderStyle.js.map +1 -1
- package/dist/cjs/configs/useLeftNavConfig.js +3 -6
- package/dist/cjs/configs/useLeftNavConfig.js.map +1 -1
- package/dist/cjs/configs/useLeftNavItems.js +6 -12
- package/dist/cjs/configs/useLeftNavItems.js.map +1 -1
- package/dist/cjs/configs/useLeftNavSmoothExpand.js +3 -6
- package/dist/cjs/configs/useLeftNavSmoothExpand.js.map +1 -1
- package/dist/cjs/exported-related/ItemRenderer/index.js +4 -8
- package/dist/cjs/exported-related/ItemRenderer/index.js.map +1 -1
- package/dist/cjs/exported-related/ItemRenderer/styled.js +4 -8
- package/dist/cjs/exported-related/ItemRenderer/styled.js.map +1 -1
- package/dist/cjs/exported-related/ItemRenderer/usePropsWithDefaults.js.map +1 -1
- package/dist/cjs/exported-related/OpenWindowItem/index.js.map +1 -1
- package/dist/cjs/hooks/useExpandableOnClickHandler.js +4 -8
- package/dist/cjs/hooks/useExpandableOnClickHandler.js.map +1 -1
- package/dist/cjs/hooks/useKeyboardNavigation.js +1 -2
- package/dist/cjs/hooks/useKeyboardNavigation.js.map +1 -1
- package/dist/cjs/hooks/useOpenableOnClickHandler.js +3 -6
- package/dist/cjs/hooks/useOpenableOnClickHandler.js.map +1 -1
- package/dist/cjs/hooks/useSelectFirstBodyItem.js +2 -4
- package/dist/cjs/hooks/useSelectFirstBodyItem.js.map +1 -1
- package/dist/cjs/outOfTheBox/ItemControlledDrilldown/index.js +2 -4
- package/dist/cjs/outOfTheBox/ItemControlledDrilldown/index.js.map +1 -1
- package/dist/cjs/outOfTheBox/ItemHeader/index.js +1 -2
- package/dist/cjs/outOfTheBox/ItemHeader/index.js.map +1 -1
- package/dist/cjs/outOfTheBox/ItemLink/index.js.map +1 -1
- package/dist/cjs/outOfTheBox/ItemSeparator/index.js.map +1 -1
- package/dist/cjs/outOfTheBox/ItemSubmenu/index.js +1 -2
- package/dist/cjs/outOfTheBox/ItemSubmenu/index.js.map +1 -1
- package/dist/cjs/outOfTheBox/ItemUncontrolledDrilldown/index.js +5 -10
- package/dist/cjs/outOfTheBox/ItemUncontrolledDrilldown/index.js.map +1 -1
- package/dist/cjs/outOfTheBox/styled.js.map +1 -1
- package/dist/cjs/parts/LeftNavContent/styled.js.map +1 -1
- package/dist/cjs/parts/LeftNavFooterItem/index.js.map +1 -1
- package/dist/cjs/parts/LeftNavFooterItem/styled.js.map +1 -1
- package/dist/cjs/parts/OutOfTheBoxMapItem.js +1 -2
- package/dist/cjs/parts/OutOfTheBoxMapItem.js.map +1 -1
- package/dist/esm/LeftNavigation.js +0 -1
- package/dist/esm/LeftNavigation.js.map +2 -2
- package/dist/esm/common/getItemBackgroundStyle.js.map +1 -1
- package/dist/esm/common/getLeftBorderStyle.js.map +1 -1
- package/dist/esm/configs/useLeftNavConfig.js +3 -6
- package/dist/esm/configs/useLeftNavConfig.js.map +1 -1
- package/dist/esm/configs/useLeftNavItems.js +6 -12
- package/dist/esm/configs/useLeftNavItems.js.map +1 -1
- package/dist/esm/configs/useLeftNavSmoothExpand.js +3 -6
- package/dist/esm/configs/useLeftNavSmoothExpand.js.map +1 -1
- package/dist/esm/exported-related/ItemRenderer/index.js +4 -8
- package/dist/esm/exported-related/ItemRenderer/index.js.map +1 -1
- package/dist/esm/exported-related/ItemRenderer/styled.js +4 -8
- package/dist/esm/exported-related/ItemRenderer/styled.js.map +1 -1
- package/dist/esm/exported-related/ItemRenderer/usePropsWithDefaults.js.map +1 -1
- package/dist/esm/exported-related/OpenWindowItem/index.js.map +1 -1
- package/dist/esm/hooks/useExpandableOnClickHandler.js +4 -8
- package/dist/esm/hooks/useExpandableOnClickHandler.js.map +1 -1
- package/dist/esm/hooks/useKeyboardNavigation.js +1 -2
- package/dist/esm/hooks/useKeyboardNavigation.js.map +1 -1
- package/dist/esm/hooks/useOpenableOnClickHandler.js +3 -6
- package/dist/esm/hooks/useOpenableOnClickHandler.js.map +1 -1
- package/dist/esm/hooks/useSelectFirstBodyItem.js +2 -4
- package/dist/esm/hooks/useSelectFirstBodyItem.js.map +1 -1
- package/dist/esm/outOfTheBox/ItemControlledDrilldown/index.js +2 -4
- package/dist/esm/outOfTheBox/ItemControlledDrilldown/index.js.map +1 -1
- package/dist/esm/outOfTheBox/ItemHeader/index.js +1 -2
- package/dist/esm/outOfTheBox/ItemHeader/index.js.map +1 -1
- package/dist/esm/outOfTheBox/ItemLink/index.js.map +1 -1
- package/dist/esm/outOfTheBox/ItemSeparator/index.js.map +1 -1
- package/dist/esm/outOfTheBox/ItemSubmenu/index.js +1 -2
- package/dist/esm/outOfTheBox/ItemSubmenu/index.js.map +1 -1
- package/dist/esm/outOfTheBox/ItemUncontrolledDrilldown/index.js +5 -10
- package/dist/esm/outOfTheBox/ItemUncontrolledDrilldown/index.js.map +1 -1
- package/dist/esm/outOfTheBox/styled.js.map +1 -1
- package/dist/esm/parts/LeftNavContent/styled.js.map +1 -1
- package/dist/esm/parts/LeftNavFooterItem/index.js.map +1 -1
- package/dist/esm/parts/LeftNavFooterItem/styled.js.map +1 -1
- package/dist/esm/parts/OutOfTheBoxMapItem.js +1 -2
- package/dist/esm/parts/OutOfTheBoxMapItem.js.map +1 -1
- package/dist/types/LeftNavigation.d.ts +0 -2
- package/dist/types/hooks/useExpandableOnClickHandler.d.ts +1 -1
- package/dist/types/hooks/useOpenableOnClickHandler.d.ts +1 -1
- package/package.json +10 -10
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/outOfTheBox/ItemSeparator/index.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
4
|
"sourcesContent": ["import React from 'react';\nimport { styled } from '@elliemae/ds-system';\nimport { ItemRenderer } from '../../exported-related/index.js';\nimport { DSLeftNavigationName, DSLeftNavigationSlots } from '../../constants/index.js';\nimport type { DSLeftNavigationT } from '../../react-desc-prop-types.js';\n\nconst StyledSeparator = styled('div', { name: DSLeftNavigationName, slot: DSLeftNavigationSlots.ITEM_SEPARATOR })`\n height: 1px;\n background-color: ${(props) => props.theme.colors.neutral[100]};\n width: auto;\n margin: ${(props) => props.theme.space.xxxs} 0;\n margin-left: ${(props) => props.theme.space.xxxs};\n grid-column: span 3;\n`;\n\nexport const ItemSeparator = (props: DSLeftNavigationT.ComponentProps): JSX.Element => {\n const { item } = props;\n return (\n <ItemRenderer\n item={{\n ...item,\n itemOpts: {\n ...item.itemOpts,\n ariaRole: 'separator',\n selectable: false,\n focuseable: false,\n },\n CollapsedComponent: null,\n }}\n minHeight=\"1px\"\n paddingTop=\"0px\"\n >\n <StyledSeparator data-testid=\"leftnav-separator-subitem\" />\n </ItemRenderer>\n );\n};\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADgCjB;AA/BN,uBAAuB;AACvB,8BAA6B;AAC7B,uBAA4D;AAG5D,MAAM,sBAAkB,yBAAO,OAAO,EAAE,MAAM,uCAAsB,MAAM,uCAAsB,eAAe,CAAC;AAAA;AAAA,sBAE1F,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ,GAAG;AAAA;AAAA,
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADgCjB;AA/BN,uBAAuB;AACvB,8BAA6B;AAC7B,uBAA4D;AAG5D,MAAM,sBAAkB,yBAAO,OAAO,EAAE,MAAM,uCAAsB,MAAM,uCAAsB,eAAe,CAAC;AAAA;AAAA,sBAE1F,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ,GAAG,CAAC;AAAA;AAAA,YAEpD,CAAC,UAAU,MAAM,MAAM,MAAM,IAAI;AAAA,iBAC5B,CAAC,UAAU,MAAM,MAAM,MAAM,IAAI;AAAA;AAAA;AAI3C,MAAM,gBAAgB,CAAC,UAAyD;AACrF,QAAM,EAAE,KAAK,IAAI;AACjB,SACE;AAAA,IAAC;AAAA;AAAA,MACC,MAAM;AAAA,QACJ,GAAG;AAAA,QACH,UAAU;AAAA,UACR,GAAG,KAAK;AAAA,UACR,UAAU;AAAA,UACV,YAAY;AAAA,UACZ,YAAY;AAAA,QACd;AAAA,QACA,oBAAoB;AAAA,MACtB;AAAA,MACA,WAAU;AAAA,MACV,YAAW;AAAA,MAEX,sDAAC,mBAAgB,eAAY,6BAA4B;AAAA;AAAA,EAC3D;AAEJ;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/outOfTheBox/ItemSubmenu/index.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
4
|
"sourcesContent": ["/* eslint-disable max-lines */\n/* eslint-disable complexity */\n/* eslint-disable indent */\nimport React, { useCallback } from 'react';\nimport { ChevronSmallLeft } from '@elliemae/ds-icons';\nimport { SimpleTruncatedTooltipText } from '@elliemae/ds-truncated-tooltip-text';\nimport type { Theme } from '@elliemae/ds-system';\nimport { ItemRenderer } from '../../exported-related/index.js';\nimport type { DSLeftNavigationT } from '../../react-desc-prop-types.js';\nimport { CHEVRON_BACK_DS_ID } from '../../exported-related/constants.js';\nimport {\n StyledLeftContainer,\n StyledItemLabel,\n StyledBottomContainer,\n StyledRightContainer,\n StyledChevronLeft,\n} from '../styled.js';\n\nconst notOpenedShadowStyle = (isSelected: boolean) => (theme: Theme) =>\n `\n box-shadow: inset 4px 0 0 0 ${isSelected ? theme.colors.brand[400] : 'transparent'};\n\n :hover {\n box-shadow: inset 4px 0 0 0 ${isSelected ? theme.colors.brand[400] : theme.colors.brand[300]};\n }\n\n :active {\n box-shadow: inset 4px 0 0 0 ${theme.colors.brand[400]};\n }\n`;\n\nexport const ItemSubmenu = (props: DSLeftNavigationT.ComponentProps): JSX.Element => {\n const {\n item,\n item: {\n dsId,\n itemOpts: { label, RightComponent, BottomComponent, labelDataTestId, labelOverflow: itemLabelOverflow },\n CollapsedComponent = () => null,\n },\n ctx,\n ctx: {\n leftNavProps: { openedItem, labelOverflow: leftNavLabelOverflow, onItemClick },\n expandedForAnimation,\n selectedItem,\n selectedParent,\n setFocusedItem,\n },\n } = props;\n\n const labelOverflow = itemLabelOverflow || leftNavLabelOverflow;\n\n const opened = openedItem === dsId;\n\n const isSelected = selectedItem === dsId;\n\n const shadowStyle = useCallback(\n (opened_: boolean) => (theme: Theme) =>\n !opened_\n ? notOpenedShadowStyle(isSelected || selectedParent === dsId)(theme)\n : `box-shadow: inset 4px 0 0 0 #52A6EC`,\n [dsId, isSelected, selectedParent],\n );\n\n const ariaLabel = item.itemOpts.ariaLabel ?? (typeof label === 'string' ? `${label}, category` : 'category');\n\n return (\n <ItemRenderer\n item={{\n ...item,\n itemOpts: {\n ...item.itemOpts,\n ariaLabel,\n ariaExpanded: opened,\n openable: expandedForAnimation && !opened,\n closable: expandedForAnimation && opened,\n selectable: !opened,\n },\n }}\n shadowStyle={shadowStyle}\n hasBorderBottom={opened}\n borderBottomMr=\"12px\"\n >\n <StyledLeftContainer\n cols={opened ? ['auto', 'auto'] : ['38px']}\n gutter=\"1px\"\n pl={opened ? 'xxs' : 0}\n justifyItems=\"center\"\n data-testid=\"leftnav-leftcomponent\"\n >\n {opened && (\n <StyledChevronLeft\n buttonType=\"raw\"\n onClick={(e: React.MouseEvent<HTMLElement> | React.KeyboardEvent<HTMLElement>) => {\n if (onItemClick) onItemClick(item, e as React.MouseEvent<HTMLElement>);\n }}\n data-testid=\"leftnav-leftcomponent-chevron\"\n tabIndex={0}\n onFocus={(e: React.FocusEvent) => {\n e.stopPropagation();\n setFocusedItem(CHEVRON_BACK_DS_ID);\n }}\n aria-label={`Close ${ariaLabel}`}\n >\n <ChevronSmallLeft size=\"m\" color={['brand-primary', '800']} />\n </StyledChevronLeft>\n )}\n {CollapsedComponent && <CollapsedComponent item={item} ctx={ctx} />}\n </StyledLeftContainer>\n <StyledItemLabel\n ml={opened ? 'xxs' : '1px'}\n mt=\"xxxs\"\n mb=\"15px\"\n data-testid={labelDataTestId || 'leftnav-itemlabel'}\n labelOverflow={labelOverflow}\n >\n {labelOverflow === 'truncate' ? <SimpleTruncatedTooltipText value={label} placement=\"bottom-start\" /> : label}\n </StyledItemLabel>\n <StyledRightContainer\n pl=\"xs\"\n pr={opened ? 'xxs2' : 'xxs'}\n onFocus={(e: React.FocusEvent) => {\n e.stopPropagation();\n setFocusedItem(null);\n }}\n onKeyDown={(e: React.KeyboardEvent) => e.stopPropagation()}\n onClick={(e: React.MouseEvent) => openedItem === dsId && e.stopPropagation()}\n data-testid=\"leftnav-right-component\"\n >\n {RightComponent && <RightComponent ctx={ctx} item={item} />}\n </StyledRightContainer>\n {BottomComponent && (\n <StyledBottomContainer\n style={{ gridColumn: 'span 3' }}\n pb=\"xxxs\"\n pl=\"xxs\"\n pr=\"xxs\"\n onFocus={(e: React.FocusEvent) => {\n e.stopPropagation();\n setFocusedItem(null);\n }}\n onKeyDown={(e: React.KeyboardEvent) => e.stopPropagation()}\n onClick={(e: React.MouseEvent) => openedItem && e.stopPropagation()}\n >\n <BottomComponent ctx={ctx} item={item} />\n </StyledBottomContainer>\n )}\n </ItemRenderer>\n );\n};\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADkFjB;AA/EN,mBAAmC;AACnC,sBAAiC;AACjC,uCAA2C;AAE3C,8BAA6B;AAE7B,uBAAmC;AACnC,oBAMO;AAEP,MAAM,uBAAuB,CAAC,eAAwB,CAAC,UACrD;AAAA,gCAC8B,aAAa,MAAM,OAAO,MAAM,GAAG,IAAI;AAAA;AAAA;AAAA,
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -61,8 +61,7 @@ const OutOfTheBoxMapSubitem = (props) => {
|
|
|
61
61
|
};
|
|
62
62
|
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(OutOfTheBoxComponent, { item: newItem, ctx });
|
|
63
63
|
}
|
|
64
|
-
if (!Component)
|
|
65
|
-
return null;
|
|
64
|
+
if (!Component) return null;
|
|
66
65
|
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Component, { item, ctx });
|
|
67
66
|
};
|
|
68
67
|
const ItemUncontrolledDrilldown = (props) => {
|
|
@@ -90,8 +89,7 @@ const ItemUncontrolledDrilldown = (props) => {
|
|
|
90
89
|
}
|
|
91
90
|
} = props;
|
|
92
91
|
(0, import_react.useEffect)(() => {
|
|
93
|
-
if (startOpened)
|
|
94
|
-
setOpenedDrilldowns([...openedDrilldowns, dsId]);
|
|
92
|
+
if (startOpened) setOpenedDrilldowns([...openedDrilldowns, dsId]);
|
|
95
93
|
}, []);
|
|
96
94
|
const opened = openedDrilldowns.includes(dsId);
|
|
97
95
|
const labelOverflow = itemLabelOverflow || leftNavLabelOverflow;
|
|
@@ -100,15 +98,12 @@ const ItemUncontrolledDrilldown = (props) => {
|
|
|
100
98
|
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Component, { width: "24px", height: "18px", color: ["brand-primary", "800"] });
|
|
101
99
|
}, [opened]);
|
|
102
100
|
const subitems = (0, import_react.useMemo)(() => {
|
|
103
|
-
if (!opened || !items)
|
|
104
|
-
return [];
|
|
101
|
+
if (!opened || !items) return [];
|
|
105
102
|
return items.map((subitem) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(OutOfTheBoxMapSubitem, { item: subitem, ctx }, subitem.dsId));
|
|
106
103
|
}, [ctx, items, opened]);
|
|
107
104
|
const handleOnClick = (0, import_react.useCallback)(() => {
|
|
108
|
-
if (opened)
|
|
109
|
-
|
|
110
|
-
else
|
|
111
|
-
setOpenedDrilldowns([...openedDrilldowns, dsId]);
|
|
105
|
+
if (opened) setOpenedDrilldowns(openedDrilldowns.filter((openedDrilldown) => openedDrilldown !== dsId));
|
|
106
|
+
else setOpenedDrilldowns([...openedDrilldowns, dsId]);
|
|
112
107
|
}, [opened, setOpenedDrilldowns, openedDrilldowns, dsId]);
|
|
113
108
|
return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
|
|
114
109
|
import_exported_related.ItemRenderer,
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/outOfTheBox/ItemUncontrolledDrilldown/index.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
4
|
"sourcesContent": ["/* eslint-disable max-lines */\nimport React, { useMemo, useCallback, useEffect } 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.js';\nimport { StyledLabel, StyledDate, StyledRightContainer, StyledArrowContainer } from '../styled.js';\nimport { ItemSeparator } from '../ItemSeparator/index.js';\nimport { ItemWithDate } from '../ItemWithDate/index.js';\nimport { ItemTextLabel } from '../ItemTextLabel/index.js';\nimport type { DSLeftNavigationT } from '../../react-desc-prop-types.js';\n\n// Subitem mapping\nconst outOfTheBoxSubitemsComponents: Record<string, React.ComponentType<DSLeftNavigationT.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<DSLeftNavigationT.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 ItemUncontrolledDrilldown = (props: DSLeftNavigationT.ComponentProps): JSX.Element => {\n const {\n item,\n item: {\n dsId,\n itemOpts: {\n label,\n RightComponent,\n labelRightSection,\n labelOverflow: itemLabelOverflow,\n labelBold,\n labelColor,\n startOpened,\n items,\n labelDataTestId,\n },\n },\n ctx,\n ctx: {\n leftNavProps: { labelOverflow: leftNavLabelOverflow },\n openedDrilldowns,\n setOpenedDrilldowns,\n },\n } = props;\n\n // Start opened functionality\n useEffect(() => {\n if (startOpened) setOpenedDrilldowns([...openedDrilldowns, dsId as string]);\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, []);\n\n const opened = openedDrilldowns.includes(dsId as string);\n\n const labelOverflow = itemLabelOverflow || leftNavLabelOverflow;\n\n const arrowIcon = useMemo(() => {\n const Component = opened ? ArrowheadDown : ArrowheadRight;\n return <Component width=\"24px\" height=\"18px\" color={['brand-primary', '800']} />;\n }, [opened]);\n\n // Array of subitems\n const subitems = useMemo(() => {\n if (!opened || !items) return [];\n return items.map((subitem) => <OutOfTheBoxMapSubitem item={subitem} ctx={ctx} key={subitem.dsId} />);\n }, [ctx, items, opened]);\n\n const handleOnClick = useCallback(() => {\n if (opened) setOpenedDrilldowns(openedDrilldowns.filter((openedDrilldown) => openedDrilldown !== dsId));\n else setOpenedDrilldowns([...openedDrilldowns, dsId as string]);\n }, [opened, setOpenedDrilldowns, openedDrilldowns, dsId]);\n\n return (\n <ItemRenderer\n item={{\n ...item,\n itemOpts: {\n ariaExpanded: opened,\n ariaRole: 'menuitem',\n ...item.itemOpts,\n openable: !opened,\n closable: opened,\n },\n CollapsedComponent: null,\n }}\n subitems={subitems}\n minHeight=\"32px\"\n paddingTop=\"8px\"\n onClick={handleOnClick}\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;ADgCZ;AA/BX,mBAAuD;AACvD,uCAA2C;AAC3C,sBAA8C;AAC9C,8BAAyC;AACzC,oBAAoF;AACpF,2BAA8B;AAC9B,0BAA6B;AAC7B,2BAA8B;AAI9B,MAAM,gCAAuG;AAAA,EAC3G,CAAC,mCAAW,uBAAuB,GAAG;AAAA,EACtC,CAAC,mCAAW,uBAAuB,GAAG;AAAA,EACtC,CAAC,mCAAW,wBAAwB,GAAG;AACzC;AAEA,MAAM,wBAA+E,CAAC,UAAU;AAC9F,QAAM;AAAA,IACJ;AAAA,IACA,MAAM,EAAE,MAAM,UAAU;AAAA,IACxB;AAAA,EACF,IAAI;AAEJ,MAAI,OAAO,SAAS,YAAY,CAAC,CAAC,8BAA8B,IAAI,GAAG;AACrE,UAAM,uBAAuB,8BAA8B,IAAI;AAC/D,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,wBAAqB,MAAM,SAAS,KAAU;AAAA,EACxD;AACA,MAAI,CAAC
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/outOfTheBox/styled.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
4
|
"sourcesContent": ["import { styled, type Theme } from '@elliemae/ds-system';\nimport { Grid } from '@elliemae/ds-grid';\nimport { DSButtonV2 } from '@elliemae/ds-button-v2';\nimport { DSLeftNavigationName, DSLeftNavigationSlots } from '../constants/index.js';\nimport type { DSLeftNavigationT } from '../react-desc-prop-types.js';\ntype ColorsKey = keyof Theme['colors'];\n\ninterface StyledLabelT {\n labelBold?: boolean;\n labelOverflow?: string;\n labelColor?: [ColorsKey, keyof Theme['colors'][ColorsKey]];\n}\n\nexport const StyledLabel = styled(Grid, {\n name: DSLeftNavigationName,\n slot: DSLeftNavigationSlots.ITEM_LABEL,\n})<StyledLabelT>`\n font-size: 13px;\n font-weight: ${(props) => (props.labelBold ? props.theme.fontWeights.semibold : props.theme.fontWeights.regular)};\n color: ${({ labelColor, theme }) =>\n labelColor ? theme.colors[labelColor[0]][labelColor[1]] : theme.colors.neutral[800]};\n line-height: 14px;\n word-break: ${(props) => (props.labelOverflow === 'wrapAll' ? 'break-all' : 'normal')};\n`;\n\nexport const StyledDate = styled(Grid, { name: DSLeftNavigationName, slot: DSLeftNavigationSlots.ITEM_DATE })`\n font-size: 12px;\n color: ${(props) => props.theme.colors.neutral[600]};\n line-height: 14px;\n`;\n\nexport const StyledArrowContainer = styled(Grid, {\n name: DSLeftNavigationName,\n slot: DSLeftNavigationSlots.ARROW_CONTAINER,\n})``;\n\nexport const StyledRightContainer = styled(Grid, {\n name: DSLeftNavigationName,\n slot: DSLeftNavigationSlots.RIGHT_CONTAINER,\n})``;\n\nexport const StyledSectionLabel = styled('span', {\n name: DSLeftNavigationName,\n slot: DSLeftNavigationSlots.SECTION_LABEL,\n})`\n font-size: 13px;\n color: ${(props) => props.theme.colors.neutral[700]};\n margin-left: ${(props) => props.theme.space.xxs};\n line-height: 13px;\n`;\n\nexport const StyledVerticalSeparator = styled('div', {\n name: DSLeftNavigationName,\n slot: DSLeftNavigationSlots.VERTICAL_SEPARATOR,\n})`\n margin: 0 ${(props) => props.theme.space.xxs};\n width: 1px;\n height: 13px;\n background: ${(props) => props.theme.colors.neutral[600]};\n`;\n\nexport const StyledRightLabel = styled('span', {\n name: DSLeftNavigationName,\n slot: DSLeftNavigationSlots.SECTION_RIGHT_LABEL,\n})`\n font-size: 12px;\n line-height: 13px;\n`;\n\nexport const StyledSectionContainer = styled(Grid, {\n name: DSLeftNavigationName,\n slot: DSLeftNavigationSlots.SECTION_CONTAINER,\n})``;\n\nexport const StyledBottomContainer = styled(Grid, {\n name: DSLeftNavigationName,\n slot: DSLeftNavigationSlots.BOTTOM_CONTAINER,\n})`\n grid-column: span 3;\n`;\n\nexport const StyledLeftContainer = styled(Grid, {\n name: DSLeftNavigationName,\n slot: DSLeftNavigationSlots.LEFT_CONTAINER,\n})``;\n\nexport const StyledItemLabel = styled(Grid, { name: DSLeftNavigationName, slot: DSLeftNavigationSlots.ITEM_LABEL })<{\n labelOverflow?: DSLeftNavigationT.LabelOveflowT;\n}>`\n font-size: 14px;\n color: ${(props) => props.theme.colors.neutral[800]};\n word-break: ${(props) => (props.labelOverflow === 'wrapAll' ? 'break-all' : 'normal')};\n`;\n\nexport const StyledChevronLeft = styled(DSButtonV2, {\n name: DSLeftNavigationName,\n slot: DSLeftNavigationSlots.ITEM_CHEVRON_BACK,\n})`\n padding: 0;\n :focus {\n outline: 2px solid ${(props) => props.theme.colors.brand[800]};\n }\n`;\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,uBAAmC;AACnC,qBAAqB;AACrB,0BAA2B;AAC3B,uBAA4D;AAUrD,MAAM,kBAAc,yBAAO,qBAAM;AAAA,EACtC,MAAM;AAAA,EACN,MAAM,uCAAsB;AAC9B,CAAC;AAAA;AAAA,iBAEgB,CAAC,UAAW,MAAM,YAAY,MAAM,MAAM,YAAY,WAAW,MAAM,MAAM,YAAY;AAAA,
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,uBAAmC;AACnC,qBAAqB;AACrB,0BAA2B;AAC3B,uBAA4D;AAUrD,MAAM,kBAAc,yBAAO,qBAAM;AAAA,EACtC,MAAM;AAAA,EACN,MAAM,uCAAsB;AAC9B,CAAC;AAAA;AAAA,iBAEgB,CAAC,UAAW,MAAM,YAAY,MAAM,MAAM,YAAY,WAAW,MAAM,MAAM,YAAY,OAAQ;AAAA,WACvG,CAAC,EAAE,YAAY,MAAM,MAC5B,aAAa,MAAM,OAAO,WAAW,CAAC,CAAC,EAAE,WAAW,CAAC,CAAC,IAAI,MAAM,OAAO,QAAQ,GAAG,CAAC;AAAA;AAAA,gBAEvE,CAAC,UAAW,MAAM,kBAAkB,YAAY,cAAc,QAAS;AAAA;AAGhF,MAAM,iBAAa,yBAAO,qBAAM,EAAE,MAAM,uCAAsB,MAAM,uCAAsB,UAAU,CAAC;AAAA;AAAA,WAEjG,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ,GAAG,CAAC;AAAA;AAAA;AAI9C,MAAM,2BAAuB,yBAAO,qBAAM;AAAA,EAC/C,MAAM;AAAA,EACN,MAAM,uCAAsB;AAC9B,CAAC;AAEM,MAAM,2BAAuB,yBAAO,qBAAM;AAAA,EAC/C,MAAM;AAAA,EACN,MAAM,uCAAsB;AAC9B,CAAC;AAEM,MAAM,yBAAqB,yBAAO,QAAQ;AAAA,EAC/C,MAAM;AAAA,EACN,MAAM,uCAAsB;AAC9B,CAAC;AAAA;AAAA,WAEU,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ,GAAG,CAAC;AAAA,iBACpC,CAAC,UAAU,MAAM,MAAM,MAAM,GAAG;AAAA;AAAA;AAI1C,MAAM,8BAA0B,yBAAO,OAAO;AAAA,EACnD,MAAM;AAAA,EACN,MAAM,uCAAsB;AAC9B,CAAC;AAAA,cACa,CAAC,UAAU,MAAM,MAAM,MAAM,GAAG;AAAA;AAAA;AAAA,gBAG9B,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ,GAAG,CAAC;AAAA;AAGnD,MAAM,uBAAmB,yBAAO,QAAQ;AAAA,EAC7C,MAAM;AAAA,EACN,MAAM,uCAAsB;AAC9B,CAAC;AAAA;AAAA;AAAA;AAKM,MAAM,6BAAyB,yBAAO,qBAAM;AAAA,EACjD,MAAM;AAAA,EACN,MAAM,uCAAsB;AAC9B,CAAC;AAEM,MAAM,4BAAwB,yBAAO,qBAAM;AAAA,EAChD,MAAM;AAAA,EACN,MAAM,uCAAsB;AAC9B,CAAC;AAAA;AAAA;AAIM,MAAM,0BAAsB,yBAAO,qBAAM;AAAA,EAC9C,MAAM;AAAA,EACN,MAAM,uCAAsB;AAC9B,CAAC;AAEM,MAAM,sBAAkB,yBAAO,qBAAM,EAAE,MAAM,uCAAsB,MAAM,uCAAsB,WAAW,CAAC;AAAA;AAAA,WAIvG,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ,GAAG,CAAC;AAAA,gBACrC,CAAC,UAAW,MAAM,kBAAkB,YAAY,cAAc,QAAS;AAAA;AAGhF,MAAM,wBAAoB,yBAAO,gCAAY;AAAA,EAClD,MAAM;AAAA,EACN,MAAM,uCAAsB;AAC9B,CAAC;AAAA;AAAA;AAAA,yBAGwB,CAAC,UAAU,MAAM,MAAM,OAAO,MAAM,GAAG,CAAC;AAAA;AAAA;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/parts/LeftNavContent/styled.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
4
|
"sourcesContent": ["import { Grid } from '@elliemae/ds-grid';\nimport type { Theme } from '@elliemae/ds-system';\nimport { styled } from '@elliemae/ds-system';\nimport { DSLeftNavigationName, DSLeftNavigationSlots } from '../../constants/index.js';\n\ntype LeftNavProps = {\n expanded: boolean;\n expandedWidth: string;\n};\n\nconst getLeftShadowStyles = ({\n selected,\n selectedParent,\n theme,\n}: {\n selected: boolean;\n selectedParent?: boolean;\n theme: Theme;\n}) => {\n if (!selected && !selectedParent) {\n return `\n box-shadow: inset 4px 0 0 0 transparent;\n :hover {\n box-shadow: inset 4px 0 0 0 ${theme.colors.brand[300]};\n }\n :active {\n box-shadow: inset 4px 0 0 0 ${theme.colors.brand[400]};\n }\n `;\n }\n return `box-shadow: inset 4px 0 0 0 ${theme.colors.brand[400]};`;\n};\n\nexport const StyledLeftNavExpandAnimationWrapper = styled('nav', {\n name: DSLeftNavigationName,\n slot: DSLeftNavigationSlots.ROOT,\n})<LeftNavProps>`\n width: ${(props) => (props.expanded ? props.expandedWidth : '48px')};\n transition: width ${(props) => (props.expanded ? 'ease-out' : 'ease-in')} 350ms;\n box-shadow: -1px 0 0 0 ${(props) => props.theme.colors.neutral[100]};\n border: 1px solid ${(props) => props.theme.colors.neutral[100]};\n overflow: hidden;\n height: 100%;\n position: relative;\n`;\n\nexport const StyledLeftNavAreasContainer = styled(Grid, {\n name: DSLeftNavigationName,\n slot: DSLeftNavigationSlots.AREAS_CONTAINER,\n})<LeftNavProps>`\n width: ${(props) => (props.expanded ? `calc(${props.expandedWidth} - 2px)` : '46px')};\n height: 100%;\n`;\n\nexport const StyledLeftNavHeaderArea = styled('div', {\n name: DSLeftNavigationName,\n slot: DSLeftNavigationSlots.HEADER_AREA,\n})<{ selected: boolean; selectedParent?: boolean }>`\n ${getLeftShadowStyles}\n`;\n\nexport const StyledLeftNavBodyAreasContainer = styled(Grid, {\n name: DSLeftNavigationName,\n slot: DSLeftNavigationSlots.BODY_AREAS_CONTAINER,\n})`\n width: 100%;\n`;\n\nexport const StyledLeftNavBodyHeaderArea = styled('div', {\n name: DSLeftNavigationName,\n slot: DSLeftNavigationSlots.BODY_HEADER_AREA,\n})<{ selected: boolean; selectedParent?: boolean; isSkeleton: boolean }>`\n width: 100%;\n ${({ isSkeleton }) => (!isSkeleton ? getLeftShadowStyles : '')}\n`;\n\nexport const StyledLeftNavBodyItemsArea = styled('div', {\n name: DSLeftNavigationName,\n slot: DSLeftNavigationSlots.BODY_ITEMS_AREA,\n})<{ selected: boolean; isSkeleton: boolean }>`\n width: 100%;\n overflow: auto;\n box-shadow: ${({ isSkeleton, selected, theme }) =>\n !isSkeleton ? `inset 4px 0 0 0 ${selected ? theme.colors.brand[400] : 'transparent'}` : ''};\n`;\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,qBAAqB;AAErB,uBAAuB;AACvB,uBAA4D;AAO5D,MAAM,sBAAsB,CAAC;AAAA,EAC3B;AAAA,EACA;AAAA,EACA;AACF,MAIM;AACJ,MAAI,CAAC,YAAY,CAAC,gBAAgB;AAChC,WAAO;AAAA;AAAA;AAAA,sCAG2B,MAAM,OAAO,MAAM,GAAG;AAAA;AAAA;AAAA,
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,qBAAqB;AAErB,uBAAuB;AACvB,uBAA4D;AAO5D,MAAM,sBAAsB,CAAC;AAAA,EAC3B;AAAA,EACA;AAAA,EACA;AACF,MAIM;AACJ,MAAI,CAAC,YAAY,CAAC,gBAAgB;AAChC,WAAO;AAAA;AAAA;AAAA,sCAG2B,MAAM,OAAO,MAAM,GAAG,CAAC;AAAA;AAAA;AAAA,sCAGvB,MAAM,OAAO,MAAM,GAAG,CAAC;AAAA;AAAA;AAAA,EAG3D;AACA,SAAO,+BAA+B,MAAM,OAAO,MAAM,GAAG,CAAC;AAC/D;AAEO,MAAM,0CAAsC,yBAAO,OAAO;AAAA,EAC/D,MAAM;AAAA,EACN,MAAM,uCAAsB;AAC9B,CAAC;AAAA,WACU,CAAC,UAAW,MAAM,WAAW,MAAM,gBAAgB,MAAO;AAAA,sBAC/C,CAAC,UAAW,MAAM,WAAW,aAAa,SAAU;AAAA,2BAC/C,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ,GAAG,CAAC;AAAA,sBAC/C,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ,GAAG,CAAC;AAAA;AAAA;AAAA;AAAA;AAMzD,MAAM,kCAA8B,yBAAO,qBAAM;AAAA,EACtD,MAAM;AAAA,EACN,MAAM,uCAAsB;AAC9B,CAAC;AAAA,WACU,CAAC,UAAW,MAAM,WAAW,QAAQ,MAAM,aAAa,YAAY,MAAO;AAAA;AAAA;AAI/E,MAAM,8BAA0B,yBAAO,OAAO;AAAA,EACnD,MAAM;AAAA,EACN,MAAM,uCAAsB;AAC9B,CAAC;AAAA,IACG,mBAAmB;AAAA;AAGhB,MAAM,sCAAkC,yBAAO,qBAAM;AAAA,EAC1D,MAAM;AAAA,EACN,MAAM,uCAAsB;AAC9B,CAAC;AAAA;AAAA;AAIM,MAAM,kCAA8B,yBAAO,OAAO;AAAA,EACvD,MAAM;AAAA,EACN,MAAM,uCAAsB;AAC9B,CAAC;AAAA;AAAA,IAEG,CAAC,EAAE,WAAW,MAAO,CAAC,aAAa,sBAAsB,EAAG;AAAA;AAGzD,MAAM,iCAA6B,yBAAO,OAAO;AAAA,EACtD,MAAM;AAAA,EACN,MAAM,uCAAsB;AAC9B,CAAC;AAAA;AAAA;AAAA,gBAGe,CAAC,EAAE,YAAY,UAAU,MAAM,MAC3C,CAAC,aAAa,mBAAmB,WAAW,MAAM,OAAO,MAAM,GAAG,IAAI,aAAa,KAAK,EAAE;AAAA;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/parts/LeftNavFooterItem/index.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
4
|
"sourcesContent": ["/* eslint-disable max-lines */\nimport React, { useContext, useCallback, useMemo } from 'react';\nimport { MenuExpand, MenuCollapse } from '@elliemae/ds-icons';\nimport { DSSkeleton } from '@elliemae/ds-skeleton';\nimport { Grid } from '@elliemae/ds-grid';\n\nimport { SimpleTruncatedTooltipText } from '@elliemae/ds-truncated-tooltip-text';\nimport {\n StyledFooterMenu,\n StyledFooterItem,\n StyledFooterLabel,\n StyledFooterSeparator,\n StyledMenuCollapse,\n} from './styled.js';\nimport { useKeyboardNavigation } from '../../hooks/index.js';\nimport LeftNavigationContext from '../../LeftNavigationContext.js';\nimport { FOOTER_DS_ID, FOOTER_MENU_CLOSE_DS_ID } from '../../exported-related/constants.js';\n\ntype LeftNavFooterItemProps = {\n footerLabel: string;\n FooterLabelComponent?: React.ComponentType<unknown>;\n onFooterExpand: React.MouseEventHandler & React.KeyboardEventHandler;\n onFooterClose: React.MouseEventHandler & React.KeyboardEventHandler;\n};\n\n// eslint-disable-next-line complexity\nexport const LeftNavFooterItem: React.ComponentType<LeftNavFooterItemProps> = (props) => {\n const { footerLabel, FooterLabelComponent, onFooterExpand = () => null, onFooterClose = () => null } = props;\n const {\n leftNavProps: { labelOverflow, isSkeleton },\n expandedForAnimation,\n setFocusedItem,\n visibleItemsRefs,\n } = useContext(LeftNavigationContext);\n\n const id = FOOTER_DS_ID;\n\n const handleOnClick = expandedForAnimation ? onFooterClose : onFooterExpand;\n\n const onKeyDown = useKeyboardNavigation({\n item: {\n dsId: id,\n itemOpts: {\n selectable: !expandedForAnimation,\n openable: false,\n closable: false,\n },\n },\n onClick: handleOnClick,\n });\n\n const handleMenuCollapseClick = useCallback(\n (e: React.MouseEvent<HTMLButtonElement, MouseEvent> | React.KeyboardEvent<HTMLButtonElement>) => {\n e.stopPropagation();\n handleOnClick(e as React.MouseEvent<HTMLButtonElement, MouseEvent>);\n setFocusedItem(id);\n },\n [handleOnClick, id, setFocusedItem],\n );\n\n const label = useMemo(() => {\n if (FooterLabelComponent) {\n return <FooterLabelComponent />;\n }\n if (labelOverflow === 'truncate') {\n return <SimpleTruncatedTooltipText value={footerLabel} placement=\"bottom-start\" />;\n }\n return footerLabel;\n }, [footerLabel, FooterLabelComponent, labelOverflow]);\n\n if (isSkeleton) {\n return (\n <StyledFooterMenu key={id} data-testid=\"leftnav-container\">\n <Grid height=\"48px\" justifyContent=\"center\" alignItems=\"center\" cols={['1fr']} p=\"xxs\">\n <DSSkeleton variant=\"rectangular\" height=\"24px\" />\n </Grid>\n </StyledFooterMenu>\n );\n }\n\n return (\n <StyledFooterMenu key={id} data-testid=\"leftnav-container\">\n <StyledFooterItem\n innerRef={visibleItemsRefs.current[id]}\n tabIndex={expandedForAnimation ? -1 : 0}\n expanded={expandedForAnimation}\n pt=\"xxs2\"\n height={expandedForAnimation ? 'auto' : '48px'}\n alignItems=\"flex-start\"\n pl=\"xxs2\"\n cols={expandedForAnimation ? ['auto', '1fr', 'auto'] : ['38px']}\n onClick={expandedForAnimation ? () => null : handleOnClick}\n onKeyDown={onKeyDown}\n onFocus={() => setFocusedItem(id)}\n data-testid=\"leftnav-item-container\"\n role=\"menuitem\"\n aria-label={\n expandedForAnimation\n ? `Footer, ${typeof footerLabel === 'string' ? footerLabel : ''}`\n : `Expand left navigation`\n }\n >\n {!expandedForAnimation ? (\n <MenuExpand size=\"m\" color={['brand-primary', '800']} data-testid=\"leftnav-footer-btn\" />\n ) : (\n <>\n <StyledFooterLabel\n mt=\"5px\"\n mr=\"12px\"\n mb=\"16px\"\n data-testid=\"leftnav-itemlabel\"\n labelOverflow={labelOverflow}\n aria-live=\"polite\"\n >\n {label}\n </StyledFooterLabel>\n <StyledFooterSeparator mt=\"xxxs\" />\n <StyledMenuCollapse\n buttonType=\"raw\"\n onClick={handleMenuCollapseClick}\n data-testid=\"leftnav-footer-btn\"\n tabIndex={0}\n onFocus={(e: React.FocusEvent) => {\n e.stopPropagation();\n setFocusedItem(FOOTER_MENU_CLOSE_DS_ID);\n }}\n role=\"button\"\n aria-label=\"Collapse left navigation\"\n >\n <MenuCollapse size=\"m\" color={['brand-primary', '800']} />\n </StyledMenuCollapse>\n </>\n )}\n </StyledFooterItem>\n </StyledFooterMenu>\n );\n};\n\nexport default LeftNavFooterItem;\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;AD8DV;AA7Db,mBAAwD;AACxD,sBAAyC;AACzC,yBAA2B;AAC3B,qBAAqB;AAErB,uCAA2C;AAC3C,oBAMO;AACP,mBAAsC;AACtC,mCAAkC;AAClC,uBAAsD;AAU/C,MAAM,oBAAiE,CAAC,UAAU;AACvF,QAAM,EAAE,aAAa,sBAAsB,iBAAiB,MAAM,MAAM,gBAAgB,MAAM,KAAK,IAAI;AACvG,QAAM;AAAA,IACJ,cAAc,EAAE,eAAe,WAAW;AAAA,IAC1C;AAAA,IACA;AAAA,IACA;AAAA,EACF,QAAI,yBAAW,6BAAAA,OAAqB;AAEpC,QAAM,KAAK;AAEX,QAAM,gBAAgB,uBAAuB,gBAAgB;AAE7D,QAAM,gBAAY,oCAAsB;AAAA,IACtC,MAAM;AAAA,MACJ,MAAM;AAAA,MACN,UAAU;AAAA,QACR,YAAY,CAAC;AAAA,QACb,UAAU;AAAA,QACV,UAAU;AAAA,MACZ;AAAA,IACF;AAAA,IACA,SAAS;AAAA,EACX,CAAC;AAED,QAAM,8BAA0B;AAAA,IAC9B,CAAC,MAAgG;AAC/F,QAAE,gBAAgB;AAClB,oBAAc,CAAoD;AAClE,qBAAe,EAAE;AAAA,IACnB;AAAA,IACA,CAAC,eAAe,IAAI,cAAc;AAAA,EACpC;AAEA,QAAM,YAAQ,sBAAQ,MAAM;AAC1B,QAAI,sBAAsB;AACxB,aAAO,4CAAC,wBAAqB;AAAA,IAC/B;AACA,QAAI,kBAAkB,YAAY;AAChC,aAAO,4CAAC,+DAA2B,OAAO,aAAa,WAAU,gBAAe;AAAA,IAClF;AACA,WAAO;AAAA,EACT,GAAG,CAAC,aAAa,sBAAsB,aAAa,CAAC;AAErD,MAAI,YAAY;AACd,WACE,4CAAC,kCAA0B,eAAY,qBACrC,sDAAC,uBAAK,QAAO,QAAO,gBAAe,UAAS,YAAW,UAAS,MAAM,CAAC,KAAK,GAAG,GAAE,OAC/E,sDAAC,iCAAW,SAAQ,eAAc,QAAO,QAAO,GAClD,KAHqB,EAIvB;AAAA,EAEJ;AAEA,SACE,4CAAC,kCAA0B,eAAY,qBACrC;AAAA,IAAC;AAAA;AAAA,MACC,UAAU,iBAAiB,QAAQ,EAAE;AAAA,MACrC,UAAU,uBAAuB,KAAK;AAAA,MACtC,UAAU;AAAA,MACV,IAAG;AAAA,MACH,QAAQ,uBAAuB,SAAS;AAAA,MACxC,YAAW;AAAA,MACX,IAAG;AAAA,MACH,MAAM,uBAAuB,CAAC,QAAQ,OAAO,MAAM,IAAI,CAAC,MAAM;AAAA,MAC9D,SAAS,uBAAuB,MAAM,OAAO;AAAA,MAC7C;AAAA,MACA,SAAS,MAAM,eAAe,EAAE;AAAA,MAChC,eAAY;AAAA,MACZ,MAAK;AAAA,MACL,cACE,uBACI,WAAW,OAAO,gBAAgB,WAAW,cAAc,
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": ["LeftNavigationContext"]
|
|
7
7
|
}
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/parts/LeftNavFooterItem/styled.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
4
|
"sourcesContent": ["import { styled } from '@elliemae/ds-system';\nimport { DSButtonV2 } from '@elliemae/ds-button-v2';\nimport { Grid } from '@elliemae/ds-grid';\nimport { getLeftBorderStyle, getItemBackgroundStyle } from '../../common/index.js';\nimport { DSLeftNavigationName, DSLeftNavigationSlots } from '../../constants/index.js';\nimport type { DSLeftNavigationT } from '../../react-desc-prop-types.js';\n\nexport const StyledFooterMenu = styled(Grid, { name: DSLeftNavigationName, slot: DSLeftNavigationSlots.FOOTER_MENU })`\n width: 100%;\n margin-top: auto;\n background: ${(props) => props.theme.colors.neutral['000']};\n\n border-top: 1px solid ${(props) => props.theme.colors.neutral[100]};\n`;\n\nexport const StyledFooterItem = styled(Grid, { name: DSLeftNavigationName, slot: DSLeftNavigationSlots.FOOTER_ITEM })<{\n expanded?: boolean;\n opened?: boolean;\n selected?: boolean;\n selectedParent?: boolean;\n}>`\n position: relative;\n ${(props) => getLeftBorderStyle({ ...props })}\n\n min-height: 48px;\n cursor: ${(props) => (props.expanded ? 'auto' : 'pointer')};\n\n ${getItemBackgroundStyle}\n\n outline: none;\n\n :focus {\n &:before {\n content: '';\n position: absolute;\n height: 100%;\n width: 100%;\n top: 0;\n left: 0px;\n border: 2px solid ${(props) => props.theme.colors.brand[600]};\n pointer-events: none;\n }\n }\n`;\n\nexport const StyledFooterLabel = styled(Grid, {\n name: DSLeftNavigationName,\n slot: DSLeftNavigationSlots.FOOTER_LABEL,\n})<{ labelOverflow?: DSLeftNavigationT.LabelOveflowT }>`\n font-size: 11px;\n color: ${(props) => props.theme.colors.neutral[500]};\n line-height: 14px;\n word-break: ${(props) => (props.labelOverflow === 'wrapAll' ? 'break-all' : 'normal')};\n`;\n\nexport const StyledFooterSeparator = styled(Grid, {\n name: DSLeftNavigationName,\n slot: DSLeftNavigationSlots.FOOTER_SEPARATOR,\n})`\n height: 16px;\n width: 1px;\n background-color: ${(props) => props.theme.colors.neutral[100]};\n`;\n\nexport const StyledMenuCollapse = styled(DSButtonV2, {\n name: DSLeftNavigationName,\n slot: DSLeftNavigationSlots.FOOTER_MENU_COLLAPSE,\n})`\n padding: 0;\n margin: 0 12px;\n :focus {\n outline: 2px solid ${(props) => props.theme.colors.brand[800]};\n }\n`;\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,uBAAuB;AACvB,0BAA2B;AAC3B,qBAAqB;AACrB,oBAA2D;AAC3D,uBAA4D;AAGrD,MAAM,uBAAmB,yBAAO,qBAAM,EAAE,MAAM,uCAAsB,MAAM,uCAAsB,YAAY,CAAC;AAAA;AAAA;AAAA,gBAGpG,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ,KAAK;AAAA;AAAA,
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,uBAAuB;AACvB,0BAA2B;AAC3B,qBAAqB;AACrB,oBAA2D;AAC3D,uBAA4D;AAGrD,MAAM,uBAAmB,yBAAO,qBAAM,EAAE,MAAM,uCAAsB,MAAM,uCAAsB,YAAY,CAAC;AAAA;AAAA;AAAA,gBAGpG,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ,KAAK,CAAC;AAAA;AAAA,0BAElC,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ,GAAG,CAAC;AAAA;AAG7D,MAAM,uBAAmB,yBAAO,qBAAM,EAAE,MAAM,uCAAsB,MAAM,uCAAsB,YAAY,CAAC;AAAA;AAAA,IAOhH,CAAC,cAAU,kCAAmB,EAAE,GAAG,MAAM,CAAC,CAAC;AAAA;AAAA;AAAA,YAGnC,CAAC,UAAW,MAAM,WAAW,SAAS,SAAU;AAAA;AAAA,IAExD,oCAAsB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,0BAYA,CAAC,UAAU,MAAM,MAAM,OAAO,MAAM,GAAG,CAAC;AAAA;AAAA;AAAA;AAAA;AAM3D,MAAM,wBAAoB,yBAAO,qBAAM;AAAA,EAC5C,MAAM;AAAA,EACN,MAAM,uCAAsB;AAC9B,CAAC;AAAA;AAAA,WAEU,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ,GAAG,CAAC;AAAA;AAAA,gBAErC,CAAC,UAAW,MAAM,kBAAkB,YAAY,cAAc,QAAS;AAAA;AAGhF,MAAM,4BAAwB,yBAAO,qBAAM;AAAA,EAChD,MAAM;AAAA,EACN,MAAM,uCAAsB;AAC9B,CAAC;AAAA;AAAA;AAAA,sBAGqB,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ,GAAG,CAAC;AAAA;AAGzD,MAAM,yBAAqB,yBAAO,gCAAY;AAAA,EACnD,MAAM;AAAA,EACN,MAAM,uCAAsB;AAC9B,CAAC;AAAA;AAAA;AAAA;AAAA,yBAIwB,CAAC,UAAU,MAAM,MAAM,OAAO,MAAM,GAAG,CAAC;AAAA;AAAA;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -52,8 +52,7 @@ const OutOfTheBoxMapItem = (props) => {
|
|
|
52
52
|
const OutOfTheBoxComponent = import_outOfTheBox.outOfTheBoxComponents[type];
|
|
53
53
|
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(OutOfTheBoxComponent, { item: finalItem, ctx });
|
|
54
54
|
}
|
|
55
|
-
if (!Component)
|
|
56
|
-
return null;
|
|
55
|
+
if (!Component) return null;
|
|
57
56
|
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Component, { item, ctx });
|
|
58
57
|
};
|
|
59
58
|
//# sourceMappingURL=OutOfTheBoxMapItem.js.map
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/parts/OutOfTheBoxMapItem.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
4
|
"sourcesContent": ["import React from 'react';\nimport { outOfTheBoxComponents } from '../outOfTheBox/index.js';\nimport type { DSLeftNavigationT } from '../react-desc-prop-types.js';\nimport { LeftNavContext } from '../LeftNavigationContext.js';\n\nexport const OutOfTheBoxMapItem: React.ComponentType<DSLeftNavigationT.OutOfTheBoxMapItemT> = (props) => {\n const {\n item,\n item: { type, Component },\n } = props;\n const ctx = React.useContext(LeftNavContext);\n\n const finalItem = {\n ...item,\n itemOpts: {\n ...item.itemOpts,\n },\n };\n if (typeof type === 'string' && !!outOfTheBoxComponents[type]) {\n const OutOfTheBoxComponent = outOfTheBoxComponents[type];\n return <OutOfTheBoxComponent item={finalItem} 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", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADoBZ;AApBX,mBAAkB;AAClB,yBAAsC;AAEtC,mCAA+B;AAExB,MAAM,qBAAiF,CAAC,UAAU;AACvG,QAAM;AAAA,IACJ;AAAA,IACA,MAAM,EAAE,MAAM,UAAU;AAAA,EAC1B,IAAI;AACJ,QAAM,MAAM,aAAAA,QAAM,WAAW,2CAAc;AAE3C,QAAM,YAAY;AAAA,IAChB,GAAG;AAAA,IACH,UAAU;AAAA,MACR,GAAG,KAAK;AAAA,IACV;AAAA,EACF;AACA,MAAI,OAAO,SAAS,YAAY,CAAC,CAAC,yCAAsB,IAAI,GAAG;AAC7D,UAAM,uBAAuB,yCAAsB,IAAI;AACvD,WAAO,4CAAC,wBAAqB,MAAM,WAAW,KAAU;AAAA,EAC1D;AACA,MAAI,CAAC
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADoBZ;AApBX,mBAAkB;AAClB,yBAAsC;AAEtC,mCAA+B;AAExB,MAAM,qBAAiF,CAAC,UAAU;AACvG,QAAM;AAAA,IACJ;AAAA,IACA,MAAM,EAAE,MAAM,UAAU;AAAA,EAC1B,IAAI;AACJ,QAAM,MAAM,aAAAA,QAAM,WAAW,2CAAc;AAE3C,QAAM,YAAY;AAAA,IAChB,GAAG;AAAA,IACH,UAAU;AAAA,MACR,GAAG,KAAK;AAAA,IACV;AAAA,EACF;AACA,MAAI,OAAO,SAAS,YAAY,CAAC,CAAC,yCAAsB,IAAI,GAAG;AAC7D,UAAM,uBAAuB,yCAAsB,IAAI;AACvD,WAAO,4CAAC,wBAAqB,MAAM,WAAW,KAAU;AAAA,EAC1D;AACA,MAAI,CAAC,UAAW,QAAO;AAEvB,SAAO,4CAAC,aAAU,MAAY,KAAU;AAC1C;",
|
|
6
6
|
"names": ["React"]
|
|
7
7
|
}
|
|
@@ -9,7 +9,6 @@ const LeftNavigation = (props) => {
|
|
|
9
9
|
const leftNavConfig = useLeftNavConfig(props);
|
|
10
10
|
return /* @__PURE__ */ jsx(LeftNavigationContext.Provider, { value: leftNavConfig, children: /* @__PURE__ */ jsx(LeftNavContent, {}) });
|
|
11
11
|
};
|
|
12
|
-
LeftNavigation.propTypes = leftNavigationProps;
|
|
13
12
|
LeftNavigation.defaultProps = defaultProps;
|
|
14
13
|
LeftNavigation.displayName = "LeftNavigation";
|
|
15
14
|
const LeftNavigationWithSchema = describe(LeftNavigation).description("Left Navigation");
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../src/LeftNavigation.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport { describe } from '@elliemae/ds-props-helpers';\nimport { leftNavigationProps } from './react-desc-prop-types.js';\nimport LeftNavigationContext, { defaultProps } from './LeftNavigationContext.js';\nimport { useLeftNavConfig } from './configs/useLeftNavConfig.js';\nimport LeftNavContent from './parts/LeftNavContent/index.js';\nimport type { DSLeftNavigationT } from './react-desc-prop-types.js';\n\nexport const LeftNavigation = (props: DSLeftNavigationT.Props): JSX.Element => {\n const leftNavConfig = useLeftNavConfig(props);\n\n return (\n <LeftNavigationContext.Provider value={leftNavConfig}>\n <LeftNavContent />\n </LeftNavigationContext.Provider>\n );\n};\n\nLeftNavigation.
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;ACajB;AAZN,SAAS,gBAAgB;AACzB,SAAS,2BAA2B;AACpC,OAAO,yBAAyB,oBAAoB;AACpD,SAAS,wBAAwB;AACjC,OAAO,oBAAoB;AAGpB,MAAM,iBAAiB,CAAC,UAAgD;AAC7E,QAAM,gBAAgB,iBAAiB,KAAK;AAE5C,SACE,oBAAC,sBAAsB,UAAtB,EAA+B,OAAO,eACrC,8BAAC,kBAAe,GAClB;AAEJ;AAEA,eAAe,
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport { describe } from '@elliemae/ds-props-helpers';\nimport { leftNavigationProps } from './react-desc-prop-types.js';\nimport LeftNavigationContext, { defaultProps } from './LeftNavigationContext.js';\nimport { useLeftNavConfig } from './configs/useLeftNavConfig.js';\nimport LeftNavContent from './parts/LeftNavContent/index.js';\nimport type { DSLeftNavigationT } from './react-desc-prop-types.js';\n\nexport const LeftNavigation = (props: DSLeftNavigationT.Props): JSX.Element => {\n const leftNavConfig = useLeftNavConfig(props);\n\n return (\n <LeftNavigationContext.Provider value={leftNavConfig}>\n <LeftNavContent />\n </LeftNavigationContext.Provider>\n );\n};\n\nLeftNavigation.defaultProps = defaultProps;\nLeftNavigation.displayName = 'LeftNavigation';\nexport const LeftNavigationWithSchema = describe(LeftNavigation).description('Left Navigation');\nLeftNavigationWithSchema.propTypes = leftNavigationProps;\n"],
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;ACajB;AAZN,SAAS,gBAAgB;AACzB,SAAS,2BAA2B;AACpC,OAAO,yBAAyB,oBAAoB;AACpD,SAAS,wBAAwB;AACjC,OAAO,oBAAoB;AAGpB,MAAM,iBAAiB,CAAC,UAAgD;AAC7E,QAAM,gBAAgB,iBAAiB,KAAK;AAE5C,SACE,oBAAC,sBAAsB,UAAtB,EAA+B,OAAO,eACrC,8BAAC,kBAAe,GAClB;AAEJ;AAEA,eAAe,eAAe;AAC9B,eAAe,cAAc;AACtB,MAAM,2BAA2B,SAAS,cAAc,EAAE,YAAY,iBAAiB;AAC9F,yBAAyB,YAAY;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../src/common/getItemBackgroundStyle.tsx"],
|
|
4
4
|
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import type { Theme } from '@elliemae/ds-system';\n\nconst commonItemBackgroundStyle = (color: string, hoverColor: string, activeColor: string): string => `\n\n background: ${color};\n\n\n :active {\n background: ${activeColor};\n }\n`;\n\nexport const getItemBackgroundStyle = (props: { theme: Theme; selected?: boolean; opened?: boolean }): string => {\n if (props.selected && !props.opened)\n return commonItemBackgroundStyle(\n props.theme.colors.brand[200],\n props.theme.colors.brand[200],\n props.theme.colors.brand[200],\n );\n\n return commonItemBackgroundStyle(\n props.theme.colors.neutral['000'],\n props.theme.colors.neutral['080'],\n props.theme.colors.brand[200],\n );\n};\n"],
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;ACEvB,MAAM,4BAA4B,CAAC,OAAe,YAAoB,gBAAgC;AAAA;AAAA,gBAEtF;AAAA;AAAA;AAAA;AAAA,
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;ACEvB,MAAM,4BAA4B,CAAC,OAAe,YAAoB,gBAAgC;AAAA;AAAA,gBAEtF,KAAK;AAAA;AAAA;AAAA;AAAA,kBAIH,WAAW;AAAA;AAAA;AAItB,MAAM,yBAAyB,CAAC,UAA0E;AAC/G,MAAI,MAAM,YAAY,CAAC,MAAM;AAC3B,WAAO;AAAA,MACL,MAAM,MAAM,OAAO,MAAM,GAAG;AAAA,MAC5B,MAAM,MAAM,OAAO,MAAM,GAAG;AAAA,MAC5B,MAAM,MAAM,OAAO,MAAM,GAAG;AAAA,IAC9B;AAEF,SAAO;AAAA,IACL,MAAM,MAAM,OAAO,QAAQ,KAAK;AAAA,IAChC,MAAM,MAAM,OAAO,QAAQ,KAAK;AAAA,IAChC,MAAM,MAAM,OAAO,MAAM,GAAG;AAAA,EAC9B;AACF;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../src/common/getLeftBorderStyle.tsx"],
|
|
4
4
|
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import type { Theme } from '@elliemae/ds-system';\n\nconst commonLeftBorderStyle = (color: string, hoverColor: string, activeColor: string): string => `\n\n -webkit-box-shadow: inset 4px 0 0 0 ${color};\n box-shadow: inset 4px 0 0 0 ${color};\n\n :hover {\n -webkit-box-shadow: inset 4px 0 0 0 ${hoverColor};\n box-shadow: inset 4px 0 0 0 ${hoverColor};\n }\n\n :active {\n -webkit-box-shadow: inset 4px 0 0 0 ${activeColor};\n box-shadow: inset 4px 0 0 0 ${activeColor};\n }\n`;\n\nexport const getLeftBorderStyle = (props: { theme: Theme; selected?: boolean; selectedParent?: boolean }): string => {\n if (props.selected || props.selectedParent)\n return commonLeftBorderStyle(\n props.theme.colors.brand[400],\n props.theme.colors.brand[400],\n props.theme.colors.brand[400],\n );\n\n return commonLeftBorderStyle('transparent', props.theme.colors.brand[300], props.theme.colors.brand[400]);\n};\n"],
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;ACEvB,MAAM,wBAAwB,CAAC,OAAe,YAAoB,gBAAgC;AAAA;AAAA,wCAE1D;AAAA,
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;ACEvB,MAAM,wBAAwB,CAAC,OAAe,YAAoB,gBAAgC;AAAA;AAAA,wCAE1D,KAAK;AAAA,wCACL,KAAK;AAAA;AAAA;AAAA,0CAGH,UAAU;AAAA,0CACV,UAAU;AAAA;AAAA;AAAA;AAAA,0CAIV,WAAW;AAAA,0CACX,WAAW;AAAA;AAAA;AAI9C,MAAM,qBAAqB,CAAC,UAAkF;AACnH,MAAI,MAAM,YAAY,MAAM;AAC1B,WAAO;AAAA,MACL,MAAM,MAAM,OAAO,MAAM,GAAG;AAAA,MAC5B,MAAM,MAAM,OAAO,MAAM,GAAG;AAAA,MAC5B,MAAM,MAAM,OAAO,MAAM,GAAG;AAAA,IAC9B;AAEF,SAAO,sBAAsB,eAAe,MAAM,MAAM,OAAO,MAAM,GAAG,GAAG,MAAM,MAAM,OAAO,MAAM,GAAG,CAAC;AAC1G;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -24,8 +24,7 @@ const useLeftNavConfig = (props) => {
|
|
|
24
24
|
);
|
|
25
25
|
useLeftNavSmoothExpand(propsWithDefaults, smoothExpandOpts);
|
|
26
26
|
React2.useEffect(() => {
|
|
27
|
-
if (onSelectedChange)
|
|
28
|
-
onSelectedChange(selectedItem);
|
|
27
|
+
if (onSelectedChange) onSelectedChange(selectedItem);
|
|
29
28
|
}, [selectedItem, onSelectedChange]);
|
|
30
29
|
React2.useEffect(() => {
|
|
31
30
|
if (propsWithDefaults.actionRef && propsWithDefaults.actionRef.current) {
|
|
@@ -33,12 +32,10 @@ const useLeftNavConfig = (props) => {
|
|
|
33
32
|
}
|
|
34
33
|
}, [propsWithDefaults.actionRef]);
|
|
35
34
|
React2.useEffect(() => {
|
|
36
|
-
if (openedItem)
|
|
37
|
-
setSelectedParent(openedItem);
|
|
35
|
+
if (openedItem) setSelectedParent(openedItem);
|
|
38
36
|
}, [openedItem]);
|
|
39
37
|
React2.useEffect(() => {
|
|
40
|
-
if (onFocusChange)
|
|
41
|
-
onFocusChange(focusedItem);
|
|
38
|
+
if (onFocusChange) onFocusChange(focusedItem);
|
|
42
39
|
}, [focusedItem, onFocusChange]);
|
|
43
40
|
useSelectFirstBodyItem(
|
|
44
41
|
items ?? [],
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../src/configs/useLeftNavConfig.tsx"],
|
|
4
4
|
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport type { DSLeftNavigationT } from '../react-desc-prop-types.js';\nimport { useMemoMergePropsWithDefault } from '@elliemae/ds-props-helpers';\nimport { defaultProps } from '../LeftNavigationContext.js';\n// import { leftNavigationProps } from '../react-desc-prop-types.js';\n// import { DSLeftNavigationName } from '../constants/constants.js';\nimport useLeftNavItems from './useLeftNavItems.js';\nimport { useLeftNavSmoothExpand } from './useLeftNavSmoothExpand.js';\nimport { useSelectFirstBodyItem } from '../hooks/useSelectFirstBodyItem.js';\n\nexport const useLeftNavConfig = (props: DSLeftNavigationT.Props) => {\n const propsWithDefaults = useMemoMergePropsWithDefault<DSLeftNavigationT.InternalProps>(props, defaultProps);\n // useValidateTypescriptPropTypes(propsWithDefaults, leftNavigationProps, DSLeftNavigationName);\n const { expanded, openedItem, onSelectedChange, onFocusChange, items } = propsWithDefaults;\n\n // -----------------------------------------------------------------------------\n // ************************** ------------ **************************\n // * INTERNAL STATE *\n // ************************** ------------ **************************\n // Selection related\n const [selectedItem, setSelectedItem] = React.useState<string | null>(null);\n const [selectedParent, setSelectedParent] = React.useState<string | null>(null);\n // Focus related\n const [focusedItem, setFocusedItem] = React.useState<string | null>(null);\n // Opened uncontrolled drilldowns\n const [openedDrilldowns, setOpenedDrilldowns] = React.useState<string[]>([]);\n\n // -----------------------------------------------------------------------------\n // ************************** ------------ **************************\n // * EXPAND ANIMATION *\n // ************************** ------------ **************************\n const [expandedForAnimation, setExpandedForAnimation] = React.useState(expanded);\n const timeoutRef = React.useRef<ReturnType<typeof setTimeout>>(null);\n const smoothExpandOpts = React.useMemo(\n () => ({\n expandedForAnimation,\n timeoutRef,\n setExpandedForAnimation,\n }),\n [expandedForAnimation, timeoutRef, setExpandedForAnimation],\n );\n useLeftNavSmoothExpand(propsWithDefaults, smoothExpandOpts);\n\n // -----------------------------------------------------------------------------\n // ************************** ------------ **************************\n // * SIDE EFFECTS *\n // ************************** ------------ **************************\n React.useEffect(() => {\n if (onSelectedChange) onSelectedChange(selectedItem);\n }, [selectedItem, onSelectedChange]);\n\n React.useEffect(() => {\n if (propsWithDefaults.actionRef && propsWithDefaults.actionRef.current) {\n propsWithDefaults.actionRef.current.setFocusedItem = setFocusedItem;\n }\n }, [propsWithDefaults.actionRef]);\n\n React.useEffect(() => {\n if (openedItem) setSelectedParent(openedItem);\n }, [openedItem]);\n\n React.useEffect(() => {\n if (onFocusChange) onFocusChange(focusedItem);\n }, [focusedItem, onFocusChange]);\n\n useSelectFirstBodyItem(\n items ?? [],\n openedItem ?? '',\n propsWithDefaults.selectedItem !== undefined ? propsWithDefaults.selectedItem : selectedItem,\n setSelectedItem,\n propsWithDefaults.disableDefaultSelection,\n );\n\n // -----------------------------------------------------------------------------\n // ************************** ------------ **************************\n // * ITEMS MANAGEMENT *\n // ************************** ------------ **************************\n\n const leftNavItemsProps = React.useMemo(\n () => ({\n headerItem: propsWithDefaults.HeaderComponent,\n bodyHeaderItem: propsWithDefaults.BodyHeaderComponent,\n items: propsWithDefaults.items,\n openedDrilldowns,\n }),\n [\n propsWithDefaults.HeaderComponent,\n propsWithDefaults.BodyHeaderComponent,\n propsWithDefaults.items,\n openedDrilldowns,\n ],\n );\n\n // We need to know the current visible items since we have drilldowns\n const { visibleItems, visibleItemsRefs } = useLeftNavItems(leftNavItemsProps);\n\n // -----------------------------------------------------------------------------\n // ************************** ------------ **************************\n // * LEFTNAV CONFIG *\n // ************************** ------------ **************************\n return React.useMemo(\n () => ({\n leftNavProps: propsWithDefaults,\n expandedForAnimation,\n selectedItem: propsWithDefaults.selectedItem !== undefined ? propsWithDefaults.selectedItem : selectedItem,\n setSelectedItem,\n selectedParent:\n propsWithDefaults.selectedParent !== undefined ? propsWithDefaults.selectedParent : selectedParent,\n setSelectedParent,\n focusedItem,\n setFocusedItem,\n openedDrilldowns,\n setOpenedDrilldowns,\n visibleItems,\n visibleItemsRefs,\n }),\n [\n propsWithDefaults,\n expandedForAnimation,\n selectedItem,\n selectedParent,\n focusedItem,\n openedDrilldowns,\n visibleItems,\n visibleItemsRefs,\n ],\n );\n};\n\nexport default useLeftNavConfig;\n"],
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;ACAvB,OAAOA,YAAW;AAElB,SAAS,oCAAoC;AAC7C,SAAS,oBAAoB;AAG7B,OAAO,qBAAqB;AAC5B,SAAS,8BAA8B;AACvC,SAAS,8BAA8B;AAEhC,MAAM,mBAAmB,CAAC,UAAmC;AAClE,QAAM,oBAAoB,6BAA8D,OAAO,YAAY;AAE3G,QAAM,EAAE,UAAU,YAAY,kBAAkB,eAAe,MAAM,IAAI;AAOzE,QAAM,CAAC,cAAc,eAAe,IAAIA,OAAM,SAAwB,IAAI;AAC1E,QAAM,CAAC,gBAAgB,iBAAiB,IAAIA,OAAM,SAAwB,IAAI;AAE9E,QAAM,CAAC,aAAa,cAAc,IAAIA,OAAM,SAAwB,IAAI;AAExE,QAAM,CAAC,kBAAkB,mBAAmB,IAAIA,OAAM,SAAmB,CAAC,CAAC;AAM3E,QAAM,CAAC,sBAAsB,uBAAuB,IAAIA,OAAM,SAAS,QAAQ;AAC/E,QAAM,aAAaA,OAAM,OAAsC,IAAI;AACnE,QAAM,mBAAmBA,OAAM;AAAA,IAC7B,OAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,IACA,CAAC,sBAAsB,YAAY,uBAAuB;AAAA,EAC5D;AACA,yBAAuB,mBAAmB,gBAAgB;AAM1D,EAAAA,OAAM,UAAU,MAAM;AACpB,QAAI
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;ACAvB,OAAOA,YAAW;AAElB,SAAS,oCAAoC;AAC7C,SAAS,oBAAoB;AAG7B,OAAO,qBAAqB;AAC5B,SAAS,8BAA8B;AACvC,SAAS,8BAA8B;AAEhC,MAAM,mBAAmB,CAAC,UAAmC;AAClE,QAAM,oBAAoB,6BAA8D,OAAO,YAAY;AAE3G,QAAM,EAAE,UAAU,YAAY,kBAAkB,eAAe,MAAM,IAAI;AAOzE,QAAM,CAAC,cAAc,eAAe,IAAIA,OAAM,SAAwB,IAAI;AAC1E,QAAM,CAAC,gBAAgB,iBAAiB,IAAIA,OAAM,SAAwB,IAAI;AAE9E,QAAM,CAAC,aAAa,cAAc,IAAIA,OAAM,SAAwB,IAAI;AAExE,QAAM,CAAC,kBAAkB,mBAAmB,IAAIA,OAAM,SAAmB,CAAC,CAAC;AAM3E,QAAM,CAAC,sBAAsB,uBAAuB,IAAIA,OAAM,SAAS,QAAQ;AAC/E,QAAM,aAAaA,OAAM,OAAsC,IAAI;AACnE,QAAM,mBAAmBA,OAAM;AAAA,IAC7B,OAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,IACA,CAAC,sBAAsB,YAAY,uBAAuB;AAAA,EAC5D;AACA,yBAAuB,mBAAmB,gBAAgB;AAM1D,EAAAA,OAAM,UAAU,MAAM;AACpB,QAAI,iBAAkB,kBAAiB,YAAY;AAAA,EACrD,GAAG,CAAC,cAAc,gBAAgB,CAAC;AAEnC,EAAAA,OAAM,UAAU,MAAM;AACpB,QAAI,kBAAkB,aAAa,kBAAkB,UAAU,SAAS;AACtE,wBAAkB,UAAU,QAAQ,iBAAiB;AAAA,IACvD;AAAA,EACF,GAAG,CAAC,kBAAkB,SAAS,CAAC;AAEhC,EAAAA,OAAM,UAAU,MAAM;AACpB,QAAI,WAAY,mBAAkB,UAAU;AAAA,EAC9C,GAAG,CAAC,UAAU,CAAC;AAEf,EAAAA,OAAM,UAAU,MAAM;AACpB,QAAI,cAAe,eAAc,WAAW;AAAA,EAC9C,GAAG,CAAC,aAAa,aAAa,CAAC;AAE/B;AAAA,IACE,SAAS,CAAC;AAAA,IACV,cAAc;AAAA,IACd,kBAAkB,iBAAiB,SAAY,kBAAkB,eAAe;AAAA,IAChF;AAAA,IACA,kBAAkB;AAAA,EACpB;AAOA,QAAM,oBAAoBA,OAAM;AAAA,IAC9B,OAAO;AAAA,MACL,YAAY,kBAAkB;AAAA,MAC9B,gBAAgB,kBAAkB;AAAA,MAClC,OAAO,kBAAkB;AAAA,MACzB;AAAA,IACF;AAAA,IACA;AAAA,MACE,kBAAkB;AAAA,MAClB,kBAAkB;AAAA,MAClB,kBAAkB;AAAA,MAClB;AAAA,IACF;AAAA,EACF;AAGA,QAAM,EAAE,cAAc,iBAAiB,IAAI,gBAAgB,iBAAiB;AAM5E,SAAOA,OAAM;AAAA,IACX,OAAO;AAAA,MACL,cAAc;AAAA,MACd;AAAA,MACA,cAAc,kBAAkB,iBAAiB,SAAY,kBAAkB,eAAe;AAAA,MAC9F;AAAA,MACA,gBACE,kBAAkB,mBAAmB,SAAY,kBAAkB,iBAAiB;AAAA,MACtF;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,IACA;AAAA,MACE;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,EACF;AACF;AAEA,IAAO,2BAAQ;",
|
|
6
6
|
"names": ["React"]
|
|
7
7
|
}
|
|
@@ -6,16 +6,14 @@ const notFocuseableItems = [ITEM_TYPES.LEFT_NAV_ITEM_SEPARATOR, ITEM_TYPES.LEFT_
|
|
|
6
6
|
const walkItems = (items, openedDrilldowns, callback) => {
|
|
7
7
|
items.forEach((item) => {
|
|
8
8
|
if (typeof item.type === "string" && item.dsId) {
|
|
9
|
-
if (notFocuseableItems.includes(item.type))
|
|
10
|
-
return;
|
|
9
|
+
if (notFocuseableItems.includes(item.type)) return;
|
|
11
10
|
callback(item.dsId);
|
|
12
11
|
if (item.type === ITEM_TYPES.LEFT_NAV_ITEM_UNCONTROLLED_DRILLDOWN && openedDrilldowns.includes(item.dsId))
|
|
13
12
|
walkItems(item.itemOpts?.items ?? [], openedDrilldowns, callback);
|
|
14
13
|
if (item.type === ITEM_TYPES.LEFT_NAV_ITEM_CONTROLLED_DRILLDOWN && item.itemOpts?.isOpened)
|
|
15
14
|
walkItems(item.itemOpts?.items ?? [], openedDrilldowns, callback);
|
|
16
15
|
} else if (item.dsId) {
|
|
17
|
-
if (!item.itemOpts?.focuseable)
|
|
18
|
-
return;
|
|
16
|
+
if (!item.itemOpts?.focuseable) return;
|
|
19
17
|
callback(item.dsId);
|
|
20
18
|
}
|
|
21
19
|
});
|
|
@@ -23,13 +21,10 @@ const walkItems = (items, openedDrilldowns, callback) => {
|
|
|
23
21
|
const useLeftNavItems = (props) => {
|
|
24
22
|
const { headerItem, bodyHeaderItem, items: bodyItems, openedDrilldowns } = props;
|
|
25
23
|
const items = useMemo(() => {
|
|
26
|
-
if (!bodyItems)
|
|
27
|
-
return [];
|
|
24
|
+
if (!bodyItems) return [];
|
|
28
25
|
const itemsArray = [...bodyItems];
|
|
29
|
-
if (bodyHeaderItem)
|
|
30
|
-
|
|
31
|
-
if (headerItem)
|
|
32
|
-
itemsArray.unshift(headerItem);
|
|
26
|
+
if (bodyHeaderItem) itemsArray.unshift(bodyHeaderItem);
|
|
27
|
+
if (headerItem) itemsArray.unshift(headerItem);
|
|
33
28
|
return itemsArray;
|
|
34
29
|
}, [headerItem, bodyHeaderItem, bodyItems]);
|
|
35
30
|
const visibleItemsRefs = useRef({});
|
|
@@ -42,8 +37,7 @@ const useLeftNavItems = (props) => {
|
|
|
42
37
|
return visibleItemsArray;
|
|
43
38
|
}, [items, openedDrilldowns]);
|
|
44
39
|
visibleItems.forEach((dsId) => {
|
|
45
|
-
if (!(dsId in visibleItemsRefs.current))
|
|
46
|
-
visibleItemsRefs.current[dsId] = createRef();
|
|
40
|
+
if (!(dsId in visibleItemsRefs.current)) visibleItemsRefs.current[dsId] = createRef();
|
|
47
41
|
});
|
|
48
42
|
return { visibleItems, visibleItemsRefs };
|
|
49
43
|
};
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../src/configs/useLeftNavItems.tsx"],
|
|
4
4
|
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable complexity */\nimport type { MutableRefObject, RefObject } from 'react';\nimport { createRef, useMemo, useRef } from 'react';\nimport { ITEM_TYPES } from '../exported-related/index.js';\nimport type { DSLeftNavigationT } from '../react-desc-prop-types.js';\nimport { FOOTER_DS_ID } from '../exported-related/constants.js';\n\nconst notFocuseableItems = [ITEM_TYPES.LEFT_NAV_ITEM_SEPARATOR, ITEM_TYPES.LEFT_NAV_ITEM_SECTION];\n\n// Walks the array of items\n// Drilldowns are tree-like structures\nconst walkItems = (\n items: DSLeftNavigationT.GenericItemItemProps[],\n openedDrilldowns: string[],\n callback: (dsId: string) => void,\n) => {\n items.forEach((item) => {\n if (typeof item.type === 'string' && item.dsId) {\n // Out of the box item\n if (notFocuseableItems.includes(item.type)) return; // not focuseable\n\n callback(item.dsId);\n\n // If it's an opened uncontrolled drilldown\n if (item.type === ITEM_TYPES.LEFT_NAV_ITEM_UNCONTROLLED_DRILLDOWN && openedDrilldowns.includes(item.dsId))\n walkItems(item.itemOpts?.items ?? [], openedDrilldowns, callback);\n\n // If it's an opened controlled drilldown\n if (item.type === ITEM_TYPES.LEFT_NAV_ITEM_CONTROLLED_DRILLDOWN && item.itemOpts?.isOpened)\n walkItems(item.itemOpts?.items ?? [], openedDrilldowns, callback);\n } else if (item.dsId) {\n // Custom item\n if (!item.itemOpts?.focuseable) return; // not focuseable specified\n callback(item.dsId);\n }\n });\n};\n\nexport const useLeftNavItems = (props: {\n headerItem?: DSLeftNavigationT.GenericItemItemProps;\n bodyHeaderItem?: DSLeftNavigationT.GenericItemItemProps;\n items?: DSLeftNavigationT.GenericItemItemProps[];\n openedDrilldowns: string[];\n}): {\n visibleItems: string[];\n visibleItemsRefs: MutableRefObject<Record<string, RefObject<HTMLDivElement>>>;\n} => {\n const { headerItem, bodyHeaderItem, items: bodyItems, openedDrilldowns } = props;\n\n // Place the header and body header items into the array of items\n const items = useMemo(() => {\n if (!bodyItems) return [];\n const itemsArray: DSLeftNavigationT.GenericItemItemProps[] = [...bodyItems];\n if (bodyHeaderItem) itemsArray.unshift(bodyHeaderItem);\n if (headerItem) itemsArray.unshift(headerItem);\n return itemsArray;\n }, [headerItem, bodyHeaderItem, bodyItems]);\n\n const visibleItemsRefs = useRef<Record<string, RefObject<HTMLDivElement>>>({});\n\n const visibleItems: string[] = useMemo(() => {\n const visibleItemsArray: string[] = [];\n walkItems(items, openedDrilldowns, (dsId: string) => {\n visibleItemsArray.push(dsId);\n });\n visibleItemsArray.push(FOOTER_DS_ID);\n return visibleItemsArray;\n }, [items, openedDrilldowns]);\n\n visibleItems.forEach((dsId) => {\n if (!(dsId in visibleItemsRefs.current)) visibleItemsRefs.current[dsId] = createRef();\n });\n\n return { visibleItems, visibleItemsRefs };\n};\n\nexport default useLeftNavItems;\n"],
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;ACEvB,SAAS,WAAW,SAAS,cAAc;AAC3C,SAAS,kBAAkB;AAE3B,SAAS,oBAAoB;AAE7B,MAAM,qBAAqB,CAAC,WAAW,yBAAyB,WAAW,qBAAqB;AAIhG,MAAM,YAAY,CAChB,OACA,kBACA,aACG;AACH,QAAM,QAAQ,CAAC,SAAS;AACtB,QAAI,OAAO,KAAK,SAAS,YAAY,KAAK,MAAM;AAE9C,UAAI,mBAAmB,SAAS,KAAK,IAAI;
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;ACEvB,SAAS,WAAW,SAAS,cAAc;AAC3C,SAAS,kBAAkB;AAE3B,SAAS,oBAAoB;AAE7B,MAAM,qBAAqB,CAAC,WAAW,yBAAyB,WAAW,qBAAqB;AAIhG,MAAM,YAAY,CAChB,OACA,kBACA,aACG;AACH,QAAM,QAAQ,CAAC,SAAS;AACtB,QAAI,OAAO,KAAK,SAAS,YAAY,KAAK,MAAM;AAE9C,UAAI,mBAAmB,SAAS,KAAK,IAAI,EAAG;AAE5C,eAAS,KAAK,IAAI;AAGlB,UAAI,KAAK,SAAS,WAAW,wCAAwC,iBAAiB,SAAS,KAAK,IAAI;AACtG,kBAAU,KAAK,UAAU,SAAS,CAAC,GAAG,kBAAkB,QAAQ;AAGlE,UAAI,KAAK,SAAS,WAAW,sCAAsC,KAAK,UAAU;AAChF,kBAAU,KAAK,UAAU,SAAS,CAAC,GAAG,kBAAkB,QAAQ;AAAA,IACpE,WAAW,KAAK,MAAM;AAEpB,UAAI,CAAC,KAAK,UAAU,WAAY;AAChC,eAAS,KAAK,IAAI;AAAA,IACpB;AAAA,EACF,CAAC;AACH;AAEO,MAAM,kBAAkB,CAAC,UAQ3B;AACH,QAAM,EAAE,YAAY,gBAAgB,OAAO,WAAW,iBAAiB,IAAI;AAG3E,QAAM,QAAQ,QAAQ,MAAM;AAC1B,QAAI,CAAC,UAAW,QAAO,CAAC;AACxB,UAAM,aAAuD,CAAC,GAAG,SAAS;AAC1E,QAAI,eAAgB,YAAW,QAAQ,cAAc;AACrD,QAAI,WAAY,YAAW,QAAQ,UAAU;AAC7C,WAAO;AAAA,EACT,GAAG,CAAC,YAAY,gBAAgB,SAAS,CAAC;AAE1C,QAAM,mBAAmB,OAAkD,CAAC,CAAC;AAE7E,QAAM,eAAyB,QAAQ,MAAM;AAC3C,UAAM,oBAA8B,CAAC;AACrC,cAAU,OAAO,kBAAkB,CAAC,SAAiB;AACnD,wBAAkB,KAAK,IAAI;AAAA,IAC7B,CAAC;AACD,sBAAkB,KAAK,YAAY;AACnC,WAAO;AAAA,EACT,GAAG,CAAC,OAAO,gBAAgB,CAAC;AAE5B,eAAa,QAAQ,CAAC,SAAS;AAC7B,QAAI,EAAE,QAAQ,iBAAiB,SAAU,kBAAiB,QAAQ,IAAI,IAAI,UAAU;AAAA,EACtF,CAAC;AAED,SAAO,EAAE,cAAc,iBAAiB;AAC1C;AAEA,IAAO,0BAAQ;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -5,16 +5,13 @@ const useLeftNavSmoothExpand = (props, smoothExpandOpts) => {
|
|
|
5
5
|
const { expandedForAnimation, timeoutRef, setExpandedForAnimation } = smoothExpandOpts;
|
|
6
6
|
React2.useEffect(() => {
|
|
7
7
|
if (!expanded && expandedForAnimation) {
|
|
8
|
-
if (timeoutRef.current)
|
|
9
|
-
clearTimeout(timeoutRef.current);
|
|
8
|
+
if (timeoutRef.current) clearTimeout(timeoutRef.current);
|
|
10
9
|
timeoutRef.current = setTimeout(() => setExpandedForAnimation(false), 350);
|
|
11
|
-
} else if (expanded)
|
|
12
|
-
setExpandedForAnimation(true);
|
|
10
|
+
} else if (expanded) setExpandedForAnimation(true);
|
|
13
11
|
}, [expanded]);
|
|
14
12
|
React2.useEffect(
|
|
15
13
|
() => () => {
|
|
16
|
-
if (timeoutRef.current)
|
|
17
|
-
clearTimeout(timeoutRef.current);
|
|
14
|
+
if (timeoutRef.current) clearTimeout(timeoutRef.current);
|
|
18
15
|
},
|
|
19
16
|
[timeoutRef]
|
|
20
17
|
);
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../src/configs/useLeftNavSmoothExpand.tsx"],
|
|
4
4
|
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport type { DSLeftNavigationT } from '../react-desc-prop-types.js';\n\ninterface SmoothExpandOptsT {\n expandedForAnimation: boolean;\n timeoutRef: React.MutableRefObject<NodeJS.Timeout | null>;\n setExpandedForAnimation: React.Dispatch<React.SetStateAction<boolean>>;\n}\nexport const useLeftNavSmoothExpand = (props: DSLeftNavigationT.Props, smoothExpandOpts: SmoothExpandOptsT): void => {\n const { expanded } = props;\n const { expandedForAnimation, timeoutRef, setExpandedForAnimation } = smoothExpandOpts;\n\n React.useEffect(() => {\n // If expanded changes, we need to smoothly transition to the non-expanded state\n // so we need to wait for 350ms\n if (!expanded && expandedForAnimation) {\n if (timeoutRef.current) clearTimeout(timeoutRef.current);\n timeoutRef.current = setTimeout(() => setExpandedForAnimation(false), 350);\n } else if (expanded) setExpandedForAnimation(true);\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [expanded]);\n\n React.useEffect(\n () => () => {\n if (timeoutRef.current) clearTimeout(timeoutRef.current);\n },\n [timeoutRef],\n );\n};\n\nexport default useLeftNavSmoothExpand;\n"],
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;ACAvB,OAAOA,YAAW;AAQX,MAAM,yBAAyB,CAAC,OAAgC,qBAA8C;AACnH,QAAM,EAAE,SAAS,IAAI;AACrB,QAAM,EAAE,sBAAsB,YAAY,wBAAwB,IAAI;AAEtE,EAAAA,OAAM,UAAU,MAAM;AAGpB,QAAI,CAAC,YAAY,sBAAsB;AACrC,UAAI,WAAW
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;ACAvB,OAAOA,YAAW;AAQX,MAAM,yBAAyB,CAAC,OAAgC,qBAA8C;AACnH,QAAM,EAAE,SAAS,IAAI;AACrB,QAAM,EAAE,sBAAsB,YAAY,wBAAwB,IAAI;AAEtE,EAAAA,OAAM,UAAU,MAAM;AAGpB,QAAI,CAAC,YAAY,sBAAsB;AACrC,UAAI,WAAW,QAAS,cAAa,WAAW,OAAO;AACvD,iBAAW,UAAU,WAAW,MAAM,wBAAwB,KAAK,GAAG,GAAG;AAAA,IAC3E,WAAW,SAAU,yBAAwB,IAAI;AAAA,EAEnD,GAAG,CAAC,QAAQ,CAAC;AAEb,EAAAA,OAAM;AAAA,IACJ,MAAM,MAAM;AACV,UAAI,WAAW,QAAS,cAAa,WAAW,OAAO;AAAA,IACzD;AAAA,IACA,CAAC,UAAU;AAAA,EACb;AACF;AAEA,IAAO,iCAAQ;",
|
|
6
6
|
"names": ["React"]
|
|
7
7
|
}
|
|
@@ -36,18 +36,14 @@ const ItemRenderer = (props) => {
|
|
|
36
36
|
const opened = dsId === openedItem;
|
|
37
37
|
const handleOnClick = useCallback(
|
|
38
38
|
(e) => {
|
|
39
|
-
if (onClick)
|
|
40
|
-
|
|
41
|
-
if (
|
|
42
|
-
onItemClick(item, e);
|
|
43
|
-
if (selectable)
|
|
44
|
-
setSelectedItem(item.dsId);
|
|
39
|
+
if (onClick) onClick();
|
|
40
|
+
if (onItemClick) onItemClick(item, e);
|
|
41
|
+
if (selectable) setSelectedItem(item.dsId);
|
|
45
42
|
},
|
|
46
43
|
[onItemClick, item, setSelectedItem, selectable, onClick]
|
|
47
44
|
);
|
|
48
45
|
const handleFocus = useCallback(() => {
|
|
49
|
-
if (focuseable)
|
|
50
|
-
setFocusedItem(dsId);
|
|
46
|
+
if (focuseable) setFocusedItem(dsId);
|
|
51
47
|
}, [dsId, setFocusedItem, focuseable]);
|
|
52
48
|
const onKeyDown = useKeyboardNavigation({
|
|
53
49
|
item,
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/exported-related/ItemRenderer/index.tsx"],
|
|
4
4
|
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable complexity */\n/* eslint-disable max-lines */\nimport React, { useContext, useMemo, useCallback } from 'react';\nimport { StyledItem, StyledCollapsedContainer, StyledBorderBottom } from './styled.js';\nimport type { DSLeftNavigationT } from '../../react-desc-prop-types.js';\nimport { LeftNavContext } from '../../LeftNavigationContext.js';\nimport { usePropsWithDefaults } from './usePropsWithDefaults.js';\nimport { useKeyboardNavigation } from '../../hooks/index.js';\n\nexport const ItemRenderer: React.ComponentType<DSLeftNavigationT.ItemRendererT> = (props) => {\n const propsWithDefault = usePropsWithDefaults(props);\n const {\n item,\n item: {\n dsId,\n itemOpts: { selectable = false, focuseable, indent, ariaLabel, ariaRole, 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 if (onItemClick) 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 const isSelectedParent = selectedParent === dsId;\n const visibleItemRef = dsId ? visibleItemsRefs.current[dsId] : undefined;\n return (\n <>\n <StyledItem\n innerRef={visibleItemRef}\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={isSelectedParent}\n opened={opened}\n onFocus={handleFocus}\n data-testid=\"leftnav-item-container\"\n tabIndex={focuseable ? 0 : undefined}\n aria-describedby={ariaDescribedBy}\n aria-expanded={ariaExpanded}\n role={ariaRole}\n data-selected={isSelected}\n data-selectedparent={isSelectedParent}\n data-opened={opened}\n data-type={item.type}\n aria-label={ariaLabel}\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"],
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;ACqEnB,mBA6B+B,KA5B7B,YADF;AAnEJ,SAAgB,YAAY,SAAS,mBAAmB;AACxD,SAAS,YAAY,0BAA0B,0BAA0B;AAEzE,SAAS,sBAAsB;AAC/B,SAAS,4BAA4B;AACrC,SAAS,6BAA6B;AAE/B,MAAM,eAAqE,CAAC,UAAU;AAC3F,QAAM,mBAAmB,qBAAqB,KAAK;AACnD,QAAM;AAAA,IACJ;AAAA,IACA,MAAM;AAAA,MACJ;AAAA,MACA,UAAU,EAAE,aAAa,OAAO,YAAY,QAAQ,WAAW,UAAU,cAAc,gBAAgB;AAAA,MACvG;AAAA,IACF;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI;AAEJ,QAAM,MAAM,WAAW,cAAc;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,gBAAgB;AAAA,IACpB,CAAC,MAAqC;AACpC,UAAI
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;ACqEnB,mBA6B+B,KA5B7B,YADF;AAnEJ,SAAgB,YAAY,SAAS,mBAAmB;AACxD,SAAS,YAAY,0BAA0B,0BAA0B;AAEzE,SAAS,sBAAsB;AAC/B,SAAS,4BAA4B;AACrC,SAAS,6BAA6B;AAE/B,MAAM,eAAqE,CAAC,UAAU;AAC3F,QAAM,mBAAmB,qBAAqB,KAAK;AACnD,QAAM;AAAA,IACJ;AAAA,IACA,MAAM;AAAA,MACJ;AAAA,MACA,UAAU,EAAE,aAAa,OAAO,YAAY,QAAQ,WAAW,UAAU,cAAc,gBAAgB;AAAA,MACvG;AAAA,IACF;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI;AAEJ,QAAM,MAAM,WAAW,cAAc;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,gBAAgB;AAAA,IACpB,CAAC,MAAqC;AACpC,UAAI,QAAS,SAAQ;AACrB,UAAI,YAAa,aAAY,MAAM,CAAC;AACpC,UAAI,WAAY,iBAAgB,KAAK,IAAc;AAAA,IACrD;AAAA,IACA,CAAC,aAAa,MAAM,iBAAiB,YAAY,OAAO;AAAA,EAC1D;AAEA,QAAM,cAAc,YAAY,MAAM;AACpC,QAAI,WAAY,gBAAe,IAAc;AAAA,EAC/C,GAAG,CAAC,MAAM,gBAAgB,UAAU,CAAC;AAErC,QAAM,YAAY,sBAAsB;AAAA,IACtC;AAAA,IACA,SAAS;AAAA,EACX,CAAC;AAED,QAAM,OAAO,QAAQ,MAAO,uBAAuB,CAAC,QAAQ,OAAO,MAAM,IAAI,CAAC,MAAM,GAAI,CAAC,oBAAoB,CAAC;AAC9G,QAAM,aAAa,QAAQ,MAAM,iBAAiB,MAAM,CAAC,cAAc,IAAI,CAAC;AAE5E,MAAI,CAAC,wBAAwB,CAAC,oBAAoB;AAChD,WAAO;AAAA,EACT;AAEA,QAAM,mBAAmB,mBAAmB;AAC5C,QAAM,iBAAiB,OAAO,iBAAiB,QAAQ,IAAI,IAAI;AAC/D,SACE,iCACE;AAAA;AAAA,MAAC;AAAA;AAAA,QACC,UAAU;AAAA,QACV,IAAI;AAAA,QACJ,IAAI,WAAW,SAAY,SAAS,GAAG,MAAM;AAAA,QAC7C;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;AAAA,QAChB;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;AAAA,QACrB,eAAa;AAAA,QACb,aAAW,KAAK;AAAA,QAChB,cAAY;AAAA,QAEX;AAAA,WAAC,uBACA,oBAAC,4BAAyB,eAAY,yBAAwB,gBAAe,UAC1E,gCAAsB,oBAAC,sBAAmB,MAAY,KAAU,GACnE,IAEA;AAAA,UAED,mBAAmB,oBAAC,sBAAmB,QAAgB,gBAAgC;AAAA;AAAA;AAAA,IAC1F;AAAA,IACC;AAAA,KACH;AAEJ;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -13,17 +13,13 @@ const borderOutside = (color, weight = 2) => `&:before {
|
|
|
13
13
|
pointer-events: none;
|
|
14
14
|
}`;
|
|
15
15
|
const getItemBackground = ({ selectable, opened, selected, theme }) => {
|
|
16
|
-
if (!selectable)
|
|
17
|
-
|
|
18
|
-
if (selected && !opened)
|
|
19
|
-
return theme.colors.brand[200];
|
|
16
|
+
if (!selectable) return "white";
|
|
17
|
+
if (selected && !opened) return theme.colors.brand[200];
|
|
20
18
|
return theme.colors.neutral["000"];
|
|
21
19
|
};
|
|
22
20
|
const getItemHoverBackground = ({ selectable, opened, selected, theme }) => {
|
|
23
|
-
if (!selectable)
|
|
24
|
-
|
|
25
|
-
if (selected && !opened)
|
|
26
|
-
return theme.colors.brand[200];
|
|
21
|
+
if (!selectable) return "white";
|
|
22
|
+
if (selected && !opened) return theme.colors.brand[200];
|
|
27
23
|
return theme.colors.brand["200"];
|
|
28
24
|
};
|
|
29
25
|
const StyledItem = styled(Grid, { name: DSLeftNavigationName, slot: DSLeftNavigationSlots.ITEM })`
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/exported-related/ItemRenderer/styled.tsx"],
|
|
4
4
|
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable indent */\nimport Grid from '@elliemae/ds-grid';\nimport { styled, type Theme } from '@elliemae/ds-system';\nimport { DSLeftNavigationName, DSLeftNavigationSlots } from '../../constants/index.js';\n\ninterface ItemProps {\n selected: boolean;\n selectable: boolean;\n opened: boolean;\n theme: Theme;\n shadowStyle: (theme: Theme) => string;\n}\n\nexport const borderOutside = (color: string, 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\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, { name: DSLeftNavigationName, slot: DSLeftNavigationSlots.ITEM })<\n { minHeight: string; selectedParent: boolean } & ItemProps\n>`\n position: relative;\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 :focus {\n ${(props) => borderOutside(props.theme.colors.brand[700])}\n }\n`;\n\nexport const StyledCollapsedContainer = styled(Grid, {\n name: DSLeftNavigationName,\n slot: DSLeftNavigationSlots.COLLAPSED_CONTAINER,\n})``;\n\nexport const StyledBorderBottom = styled('div', {\n name: DSLeftNavigationName,\n slot: DSLeftNavigationSlots.ITEM_BORDER_BOTTOM,\n})<{ opened: boolean; borderBottomMr?: string }>`\n margin-left: ${({ opened }) => (opened ? '12px' : '-4px')};\n margin-right: ${({ borderBottomMr }) => borderBottomMr};\n margin-top: 1px;\n height: 1px;\n width: calc(100% - ${({ borderBottomMr }) => borderBottomMr} - ${({ opened }) => (opened ? '12px' : '-4px')});\n background-color: #e0e3e8;\n grid-column: span 3;\n align-self: end;\n`;\n"],
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;ACCvB,OAAO,UAAU;AACjB,SAAS,cAA0B;AACnC,SAAS,sBAAsB,6BAA6B;AAUrD,MAAM,gBAAgB,CAAC,OAAe,SAAS,MAAc;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,YAOxD,
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;ACCvB,OAAO,UAAU;AACjB,SAAS,cAA0B;AACnC,SAAS,sBAAsB,6BAA6B;AAUrD,MAAM,gBAAgB,CAAC,OAAe,SAAS,MAAc;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,YAOxD,MAAM,YAAY,KAAK;AAAA;AAAA;AAInC,MAAM,oBAAoB,CAAC,EAAE,YAAY,QAAQ,UAAU,MAAM,MAAiB;AAChF,MAAI,CAAC,WAAY,QAAO;AACxB,MAAI,YAAY,CAAC,OAAQ,QAAO,MAAM,OAAO,MAAM,GAAG;AACtD,SAAO,MAAM,OAAO,QAAQ,KAAK;AACnC;AAEA,MAAM,yBAAyB,CAAC,EAAE,YAAY,QAAQ,UAAU,MAAM,MAAiB;AACrF,MAAI,CAAC,WAAY,QAAO;AACxB,MAAI,YAAY,CAAC,OAAQ,QAAO,MAAM,OAAO,MAAM,GAAG;AACtD,SAAO,MAAM,OAAO,MAAM,KAAK;AACjC;AAEO,MAAM,aAAa,OAAO,MAAM,EAAE,MAAM,sBAAsB,MAAM,sBAAsB,KAAK,CAAC;AAAA;AAAA,YAI3F,CAAC,UAAW,MAAM,cAAc,CAAC,MAAM,SAAS,YAAY,MAAO;AAAA,gBAC/D,CAAC,UAAU,MAAM,SAAS;AAAA;AAAA,gBAE1B,iBAAiB;AAAA;AAAA,IAE7B,CAAC,UAAW,MAAM,YAAY,CAAC,MAAM,SAAS,cAAc,MAAM,MAAM,OAAO,MAAM,GAAG,GAAG,CAAC,IAAI,EAAG;AAAA;AAAA;AAAA,kBAGrF,sBAAsB;AAAA;AAAA;AAAA;AAAA,kBAItB,CAAC,EAAE,YAAY,MAAM,MAAO,aAAa,MAAM,OAAO,MAAM,GAAG,IAAI,OAAQ;AAAA;AAAA;AAAA,IAGzF,CAAC,UAAU,MAAM,YAAY,MAAM,KAAK,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA,MAKvC,CAAC,UAAU,cAAc,MAAM,MAAM,OAAO,MAAM,GAAG,CAAC,CAAC;AAAA;AAAA;AAItD,MAAM,2BAA2B,OAAO,MAAM;AAAA,EACnD,MAAM;AAAA,EACN,MAAM,sBAAsB;AAC9B,CAAC;AAEM,MAAM,qBAAqB,OAAO,OAAO;AAAA,EAC9C,MAAM;AAAA,EACN,MAAM,sBAAsB;AAC9B,CAAC;AAAA,iBACgB,CAAC,EAAE,OAAO,MAAO,SAAS,SAAS,MAAO;AAAA,kBACzC,CAAC,EAAE,eAAe,MAAM,cAAc;AAAA;AAAA;AAAA,uBAGjC,CAAC,EAAE,eAAe,MAAM,cAAc,MAAM,CAAC,EAAE,OAAO,MAAO,SAAS,SAAS,MAAO;AAAA;AAAA;AAAA;AAAA;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/exported-related/ItemRenderer/usePropsWithDefaults.tsx"],
|
|
4
4
|
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { useMemo } from 'react';\nimport type { DSLeftNavigationT } from '../../react-desc-prop-types.js';\n\nconst itemDefaultProps: DSLeftNavigationT.ItemOptsT = {\n label: '',\n labelOverflow: 'truncate',\n selectable: true,\n focuseable: true,\n openable: false,\n closable: false,\n ariaLabel: undefined,\n ariaRole: 'menuitem',\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 = (\n props: DSLeftNavigationT.ItemRendererT,\n): Required<DSLeftNavigationT.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) => () =>\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 as Required<DSLeftNavigationT.ItemRendererT>;\n};\n"],
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,eAAe;AAGxB,MAAM,mBAAgD;AAAA,EACpD,OAAO;AAAA,EACP,eAAe;AAAA,EACf,YAAY;AAAA,EACZ,YAAY;AAAA,EACZ,UAAU;AAAA,EACV,UAAU;AAAA,EACV,WAAW;AAAA,EACX,UAAU;AAAA,EACV,cAAc;AAAA,EACd,iBAAiB;AACnB;AAEA,MAAM,qBAAqB,CAAC,2BAA2B,yBAAyB,0BAA0B;AAGnG,MAAM,uBAAuB,CAClC,UAC8C;AAC9C,QAAM,mBAAmB,QAAQ,MAAM;AACrC,UAAM,mBAAmB;AAAA,MACvB,oBAAoB,MAAM;AAAA,MAC1B,GAAG,MAAM;AAAA,MACT,UAAU,EAAE,GAAG,kBAAkB,GAAG,MAAM,KAAK,SAAS;AAAA,IAC1D;AACA,WAAO;AAAA,MACL,WAAW;AAAA,MACX,YAAY;AAAA,MACZ,UAAU,CAAC;AAAA,MACX,aAAa,CAAC,QAAiB,SAAiB,MAC9C,eACE,UAAU,CAAC,mBAAmB,SAAS,IAAI,IAAI,4BAA4B;AAAA,
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,eAAe;AAGxB,MAAM,mBAAgD;AAAA,EACpD,OAAO;AAAA,EACP,eAAe;AAAA,EACf,YAAY;AAAA,EACZ,YAAY;AAAA,EACZ,UAAU;AAAA,EACV,UAAU;AAAA,EACV,WAAW;AAAA,EACX,UAAU;AAAA,EACV,cAAc;AAAA,EACd,iBAAiB;AACnB;AAEA,MAAM,qBAAqB,CAAC,2BAA2B,yBAAyB,0BAA0B;AAGnG,MAAM,uBAAuB,CAClC,UAC8C;AAC9C,QAAM,mBAAmB,QAAQ,MAAM;AACrC,UAAM,mBAAmB;AAAA,MACvB,oBAAoB,MAAM;AAAA,MAC1B,GAAG,MAAM;AAAA,MACT,UAAU,EAAE,GAAG,kBAAkB,GAAG,MAAM,KAAK,SAAS;AAAA,IAC1D;AACA,WAAO;AAAA,MACL,WAAW;AAAA,MACX,YAAY;AAAA,MACZ,UAAU,CAAC;AAAA,MACX,aAAa,CAAC,QAAiB,SAAiB,MAC9C,eACE,UAAU,CAAC,mBAAmB,SAAS,IAAI,IAAI,4BAA4B,uBAC7E;AAAA,MACF,iBAAiB;AAAA,MACjB,gBAAgB;AAAA,MAChB,GAAG;AAAA,MACH,MAAM;AAAA,IACR;AAAA,EACF,GAAG,CAAC,KAAK,CAAC;AAEV,SAAO;AACT;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/exported-related/OpenWindowItem/index.tsx"],
|
|
4
4
|
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport { styled } from '@elliemae/ds-system';\nimport { OpenWindow as OpenWindowIcon, type SvgIconT } 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: SvgIconT.Props): JSX.Element => (\n <StyledOpenWindow size=\"s\" color={['brand-primary', '800']} {...props} />\n);\n\nexport default OpenWindow;\n"],
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;ACYrB;AAXF,SAAS,cAAc;AACvB,SAAS,cAAc,sBAAqC;AAE5D,MAAM,mBAAmB,OAAO,cAAc;AAAA;AAAA;AAAA,yBAGrB,CAAC,UAAU,MAAM,MAAM,OAAO,MAAM,GAAG;AAAA;AAAA;
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;ACYrB;AAXF,SAAS,cAAc;AACvB,SAAS,cAAc,sBAAqC;AAE5D,MAAM,mBAAmB,OAAO,cAAc;AAAA;AAAA;AAAA,yBAGrB,CAAC,UAAU,MAAM,MAAM,OAAO,MAAM,GAAG,CAAC;AAAA;AAAA;AAI1D,MAAM,aAAa,CAAC,UACzB,oBAAC,oBAAiB,MAAK,KAAI,OAAO,CAAC,iBAAiB,KAAK,GAAI,GAAG,OAAO;AAGzE,IAAO,yBAAQ;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|