@elliemae/ds-left-navigation 2.2.0 → 2.3.0-alpha.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/cjs/LeftNavigation.js +49 -27
- package/cjs/LeftNavigation.js.map +7 -0
- package/cjs/LeftNavigationContext.js +44 -18
- package/cjs/LeftNavigationContext.js.map +7 -0
- package/cjs/common/getItemBackgroundStyle.js +47 -8
- package/cjs/common/getItemBackgroundStyle.js.map +7 -0
- package/cjs/common/getLeftBorderStyle.js +50 -8
- package/cjs/common/getLeftBorderStyle.js.map +7 -0
- package/cjs/common/getScrollbarStyle.js +55 -4
- package/cjs/common/getScrollbarStyle.js.map +7 -0
- package/cjs/common/index.js +30 -13
- package/cjs/common/index.js.map +7 -0
- package/cjs/configs/index.js +38 -10
- package/cjs/configs/index.js.map +7 -0
- package/cjs/configs/useLeftNavConfig.js +80 -72
- package/cjs/configs/useLeftNavConfig.js.map +7 -0
- package/cjs/configs/useLeftNavItems.js +66 -64
- package/cjs/configs/useLeftNavItems.js.map +7 -0
- package/cjs/configs/useLeftNavSmoothExpand.js +48 -27
- package/cjs/configs/useLeftNavSmoothExpand.js.map +7 -0
- package/cjs/exported-related/ChevronItem/index.js +42 -27
- package/cjs/exported-related/ChevronItem/index.js.map +7 -0
- package/cjs/exported-related/Icon/index.js +51 -34
- package/cjs/exported-related/Icon/index.js.map +7 -0
- package/cjs/exported-related/ItemRenderer/index.js +99 -94
- package/cjs/exported-related/ItemRenderer/index.js.map +7 -0
- package/cjs/exported-related/ItemRenderer/styled.js +83 -51
- package/cjs/exported-related/ItemRenderer/styled.js.map +7 -0
- package/cjs/exported-related/ItemRenderer/usePropsWithDefaults.js +57 -45
- package/cjs/exported-related/ItemRenderer/usePropsWithDefaults.js.map +7 -0
- package/cjs/exported-related/Notifications/index.js +81 -61
- package/cjs/exported-related/Notifications/index.js.map +7 -0
- package/cjs/exported-related/OpenWindowItem/index.js +49 -32
- package/cjs/exported-related/OpenWindowItem/index.js.map +7 -0
- package/cjs/exported-related/constants.js +53 -25
- package/cjs/exported-related/constants.js.map +7 -0
- package/cjs/exported-related/index.js +33 -23
- package/cjs/exported-related/index.js.map +7 -0
- package/cjs/hooks/index.js +30 -13
- package/cjs/hooks/index.js.map +7 -0
- package/cjs/hooks/useExpandableOnClickHandler.js +55 -26
- package/cjs/hooks/useExpandableOnClickHandler.js.map +7 -0
- package/cjs/hooks/useKeyboardNavigation.js +62 -54
- package/cjs/hooks/useKeyboardNavigation.js.map +7 -0
- package/cjs/hooks/useOpenableOnClickHandler.js +55 -26
- package/cjs/hooks/useOpenableOnClickHandler.js.map +7 -0
- package/cjs/hooks/useSelectFirstBodyItem.js +46 -30
- package/cjs/hooks/useSelectFirstBodyItem.js.map +7 -0
- package/cjs/index.d.js +27 -2
- package/cjs/index.d.js.map +7 -0
- package/cjs/index.js +41 -30
- package/cjs/index.js.map +7 -0
- package/cjs/outOfTheBox/ItemControlledDrilldown/index.js +97 -103
- package/cjs/outOfTheBox/ItemControlledDrilldown/index.js.map +7 -0
- package/cjs/outOfTheBox/ItemControlledDrilldown/styled.js +49 -27
- package/cjs/outOfTheBox/ItemControlledDrilldown/styled.js.map +7 -0
- package/cjs/outOfTheBox/ItemHeader/index.js +96 -91
- package/cjs/outOfTheBox/ItemHeader/index.js.map +7 -0
- package/cjs/outOfTheBox/ItemHeader/styled.js +49 -22
- package/cjs/outOfTheBox/ItemHeader/styled.js.map +7 -0
- package/cjs/outOfTheBox/ItemLink/index.js +76 -65
- package/cjs/outOfTheBox/ItemLink/index.js.map +7 -0
- package/cjs/outOfTheBox/ItemLink/styled.js +41 -17
- package/cjs/outOfTheBox/ItemLink/styled.js.map +7 -0
- package/cjs/outOfTheBox/ItemSection/index.js +59 -63
- package/cjs/outOfTheBox/ItemSection/index.js.map +7 -0
- package/cjs/outOfTheBox/ItemSection/styled.js +53 -23
- package/cjs/outOfTheBox/ItemSection/styled.js.map +7 -0
- package/cjs/outOfTheBox/ItemSeparator/index.js +56 -45
- package/cjs/outOfTheBox/ItemSeparator/index.js.map +7 -0
- package/cjs/outOfTheBox/ItemSubmenu/index.js +96 -90
- package/cjs/outOfTheBox/ItemSubmenu/index.js.map +7 -0
- package/cjs/outOfTheBox/ItemSubmenu/styled.js +49 -22
- package/cjs/outOfTheBox/ItemSubmenu/styled.js.map +7 -0
- package/cjs/outOfTheBox/ItemTextLabel/index.js +51 -52
- package/cjs/outOfTheBox/ItemTextLabel/index.js.map +7 -0
- package/cjs/outOfTheBox/ItemTextLabel/styled.js +43 -23
- package/cjs/outOfTheBox/ItemTextLabel/styled.js.map +7 -0
- package/cjs/outOfTheBox/ItemUncontrolledDrilldown/index.js +107 -113
- package/cjs/outOfTheBox/ItemUncontrolledDrilldown/index.js.map +7 -0
- package/cjs/outOfTheBox/ItemUncontrolledDrilldown/styled.js +49 -27
- package/cjs/outOfTheBox/ItemUncontrolledDrilldown/styled.js.map +7 -0
- package/cjs/outOfTheBox/ItemWithDate/index.js +59 -54
- package/cjs/outOfTheBox/ItemWithDate/index.js.map +7 -0
- package/cjs/outOfTheBox/ItemWithDate/styled.js +49 -27
- package/cjs/outOfTheBox/ItemWithDate/styled.js.map +7 -0
- package/cjs/outOfTheBox/index.js +65 -50
- package/cjs/outOfTheBox/index.js.map +7 -0
- package/cjs/parts/LeftNavContent/index.js +75 -71
- package/cjs/parts/LeftNavContent/index.js.map +7 -0
- package/cjs/parts/LeftNavContent/styled.js +110 -50
- package/cjs/parts/LeftNavContent/styled.js.map +7 -0
- package/cjs/parts/LeftNavContentWithScrollbar/index.js +89 -79
- package/cjs/parts/LeftNavContentWithScrollbar/index.js.map +7 -0
- package/cjs/parts/LeftNavFooterItem/index.js +97 -80
- package/cjs/parts/LeftNavFooterItem/index.js.map +7 -0
- package/cjs/parts/LeftNavFooterItem/styled.js +89 -34
- package/cjs/parts/LeftNavFooterItem/styled.js.map +7 -0
- package/cjs/parts/LeftNavLoading/index.js +51 -33
- package/cjs/parts/LeftNavLoading/index.js.map +7 -0
- package/cjs/parts/OutOfTheBoxMapItem.js +49 -46
- package/cjs/parts/OutOfTheBoxMapItem.js.map +7 -0
- package/cjs/prop-types.js +58 -39
- package/cjs/prop-types.js.map +7 -0
- package/esm/LeftNavigation.js +17 -15
- package/esm/LeftNavigation.js.map +7 -0
- package/esm/LeftNavigationContext.js +15 -11
- package/esm/LeftNavigationContext.js.map +7 -0
- package/esm/common/getItemBackgroundStyle.js +20 -6
- package/esm/common/getItemBackgroundStyle.js.map +7 -0
- package/esm/common/getLeftBorderStyle.js +23 -6
- package/esm/common/getLeftBorderStyle.js.map +7 -0
- package/esm/common/getScrollbarStyle.js +28 -2
- package/esm/common/getScrollbarStyle.js.map +7 -0
- package/esm/common/index.js +5 -3
- package/esm/common/index.js.map +7 -0
- package/esm/configs/index.js +9 -2
- package/esm/configs/index.js.map +7 -0
- package/esm/configs/useLeftNavConfig.js +51 -63
- package/esm/configs/useLeftNavConfig.js.map +7 -0
- package/esm/configs/useLeftNavItems.js +33 -55
- package/esm/configs/useLeftNavItems.js.map +7 -0
- package/esm/configs/useLeftNavSmoothExpand.js +19 -18
- package/esm/configs/useLeftNavSmoothExpand.js.map +7 -0
- package/esm/exported-related/ChevronItem/index.js +13 -18
- package/esm/exported-related/ChevronItem/index.js.map +7 -0
- package/esm/exported-related/Icon/index.js +21 -24
- package/esm/exported-related/Icon/index.js.map +7 -0
- package/esm/exported-related/ItemRenderer/index.js +65 -80
- package/esm/exported-related/ItemRenderer/index.js.map +7 -0
- package/esm/exported-related/ItemRenderer/styled.js +56 -42
- package/esm/exported-related/ItemRenderer/styled.js.map +7 -0
- package/esm/exported-related/ItemRenderer/usePropsWithDefaults.js +27 -36
- package/esm/exported-related/ItemRenderer/usePropsWithDefaults.js.map +7 -0
- package/esm/exported-related/Notifications/index.js +57 -50
- package/esm/exported-related/Notifications/index.js.map +7 -0
- package/esm/exported-related/OpenWindowItem/index.js +20 -22
- package/esm/exported-related/OpenWindowItem/index.js.map +7 -0
- package/esm/exported-related/constants.js +24 -17
- package/esm/exported-related/constants.js.map +7 -0
- package/esm/exported-related/index.js +8 -6
- package/esm/exported-related/index.js.map +7 -0
- package/esm/hooks/index.js +5 -3
- package/esm/hooks/index.js.map +7 -0
- package/esm/hooks/useExpandableOnClickHandler.js +26 -22
- package/esm/hooks/useExpandableOnClickHandler.js.map +7 -0
- package/esm/hooks/useKeyboardNavigation.js +30 -47
- package/esm/hooks/useKeyboardNavigation.js.map +7 -0
- package/esm/hooks/useOpenableOnClickHandler.js +26 -22
- package/esm/hooks/useOpenableOnClickHandler.js.map +7 -0
- package/esm/hooks/useSelectFirstBodyItem.js +17 -26
- package/esm/hooks/useSelectFirstBodyItem.js.map +7 -0
- package/esm/index.d.js +2 -1
- package/esm/index.d.js.map +7 -0
- package/esm/index.js +12 -8
- package/esm/index.js.map +7 -0
- package/esm/outOfTheBox/ItemControlledDrilldown/index.js +62 -87
- package/esm/outOfTheBox/ItemControlledDrilldown/index.js.map +7 -0
- package/esm/outOfTheBox/ItemControlledDrilldown/styled.js +20 -17
- package/esm/outOfTheBox/ItemControlledDrilldown/styled.js.map +7 -0
- package/esm/outOfTheBox/ItemHeader/index.js +66 -80
- package/esm/outOfTheBox/ItemHeader/index.js.map +7 -0
- package/esm/outOfTheBox/ItemHeader/styled.js +20 -12
- package/esm/outOfTheBox/ItemHeader/styled.js.map +7 -0
- package/esm/outOfTheBox/ItemLink/index.js +47 -55
- package/esm/outOfTheBox/ItemLink/index.js.map +7 -0
- package/esm/outOfTheBox/ItemLink/styled.js +12 -8
- package/esm/outOfTheBox/ItemLink/styled.js.map +7 -0
- package/esm/outOfTheBox/ItemSection/index.js +30 -53
- package/esm/outOfTheBox/ItemSection/index.js.map +7 -0
- package/esm/outOfTheBox/ItemSection/styled.js +24 -13
- package/esm/outOfTheBox/ItemSection/styled.js.map +7 -0
- package/esm/outOfTheBox/ItemSeparator/index.js +27 -35
- package/esm/outOfTheBox/ItemSeparator/index.js.map +7 -0
- package/esm/outOfTheBox/ItemSubmenu/index.js +66 -79
- package/esm/outOfTheBox/ItemSubmenu/index.js.map +7 -0
- package/esm/outOfTheBox/ItemSubmenu/styled.js +20 -12
- package/esm/outOfTheBox/ItemSubmenu/styled.js.map +7 -0
- package/esm/outOfTheBox/ItemTextLabel/index.js +22 -43
- package/esm/outOfTheBox/ItemTextLabel/index.js.map +7 -0
- package/esm/outOfTheBox/ItemTextLabel/styled.js +14 -14
- package/esm/outOfTheBox/ItemTextLabel/styled.js.map +7 -0
- package/esm/outOfTheBox/ItemUncontrolledDrilldown/index.js +70 -95
- package/esm/outOfTheBox/ItemUncontrolledDrilldown/index.js.map +7 -0
- package/esm/outOfTheBox/ItemUncontrolledDrilldown/styled.js +20 -17
- package/esm/outOfTheBox/ItemUncontrolledDrilldown/styled.js.map +7 -0
- package/esm/outOfTheBox/ItemWithDate/index.js +30 -44
- package/esm/outOfTheBox/ItemWithDate/index.js.map +7 -0
- package/esm/outOfTheBox/ItemWithDate/styled.js +20 -17
- package/esm/outOfTheBox/ItemWithDate/styled.js.map +7 -0
- package/esm/outOfTheBox/index.js +25 -34
- package/esm/outOfTheBox/index.js.map +7 -0
- package/esm/parts/LeftNavContent/index.js +54 -64
- package/esm/parts/LeftNavContent/index.js.map +7 -0
- package/esm/parts/LeftNavContent/styled.js +81 -36
- package/esm/parts/LeftNavContent/styled.js.map +7 -0
- package/esm/parts/LeftNavContentWithScrollbar/index.js +56 -64
- package/esm/parts/LeftNavContentWithScrollbar/index.js.map +7 -0
- package/esm/parts/LeftNavFooterItem/index.js +73 -68
- package/esm/parts/LeftNavFooterItem/index.js.map +7 -0
- package/esm/parts/LeftNavFooterItem/styled.js +63 -24
- package/esm/parts/LeftNavFooterItem/styled.js.map +7 -0
- package/esm/parts/LeftNavLoading/index.js +22 -22
- package/esm/parts/LeftNavLoading/index.js.map +7 -0
- package/esm/parts/OutOfTheBoxMapItem.js +19 -35
- package/esm/parts/OutOfTheBoxMapItem.js.map +7 -0
- package/esm/prop-types.js +26 -29
- package/esm/prop-types.js.map +7 -0
- package/package.json +6 -6
- package/types/LeftNavigationContext.d.ts +4 -4
- package/types/configs/useLeftNavSmoothExpand.d.ts +3 -3
- package/types/hooks/useSelectFirstBodyItem.d.ts +1 -1
- package/types/index.d.d.ts +5 -2
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/exported-related/ItemRenderer/index.tsx"],
|
|
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 Grid from '@elliemae/ds-grid';\nimport { StyledItemWrapper, StyledItem } from './styled';\n\nimport { ItemRendererT } from '../../index.d';\nimport { LeftNavContext } from '../../LeftNavigationContext';\nimport { usePropsWithDefaults } from './usePropsWithDefaults';\nimport { useKeyboardNavigation } from '../../hooks';\n\nexport const ItemRenderer = (props: ItemRendererT): JSX.Element => {\n const propsWithDefault = usePropsWithDefaults(props);\n const {\n item,\n item: {\n dsId,\n itemOpts: { selectable, focuseable, indent, ariaLabel, ariaRole, ariaLive, ariaExpanded, ariaDescribedBy },\n CollapsedComponent,\n },\n subitems,\n minHeight,\n paddingTop,\n onClick,\n shadowStyle,\n hasBorderBottom,\n borderBottomMr,\n children,\n } = propsWithDefault;\n\n const ctx = useContext(LeftNavContext);\n const {\n leftNavProps: { onItemClick, openedItem },\n expandedForAnimation,\n selectedParent,\n selectedItem,\n setSelectedItem,\n setFocusedItem,\n visibleItemsRefs,\n } = ctx;\n\n const opened = dsId === openedItem;\n\n const handleOnClick = useCallback(\n (e) => {\n if (onClick) onClick(); // used by uncontrolled drilldowns\n onItemClick(item, e);\n if (selectable) setSelectedItem(item.dsId);\n },\n [onItemClick, item, setSelectedItem, selectable, onClick],\n );\n\n const handleFocus = useCallback(() => {\n if (focuseable) setFocusedItem(dsId);\n }, [dsId, setFocusedItem, focuseable]);\n\n const onKeyDown = useKeyboardNavigation({\n item,\n onClick: handleOnClick,\n });\n\n const cols = useMemo(() => (expandedForAnimation ? ['auto', '1fr', 'auto'] : ['38px']), [expandedForAnimation]);\n const isSelected = useMemo(() => selectedItem === dsId, [selectedItem, dsId]);\n\n if (!expandedForAnimation && !CollapsedComponent) {\n return null;\n }\n\n return (\n <>\n <StyledItemWrapper shadowStyle={shadowStyle(opened, item.type)} data-testid=\"leftnav-item-wrapper\">\n <StyledItem\n ref={visibleItemsRefs.current[dsId]}\n pt={paddingTop}\n pl={indent === undefined ? 'xxxs' : `${indent}px`}\n minHeight={minHeight}\n shadowStyle={shadowStyle(opened, item.type)}\n alignItems=\"flex-start\"\n cols={cols}\n onClick={!opened ? handleOnClick : () => null}\n onKeyDown={onKeyDown}\n selectable={selectable}\n selected={isSelected}\n selectedParent={selectedParent === dsId}\n opened={opened}\n onFocus={handleFocus}\n data-testid=\"leftnav-item-container\"\n tabIndex={focuseable ? 0 : -1}\n aria-describedby={ariaDescribedBy}\n aria-expanded={ariaExpanded}\n role={ariaRole}\n data-selected={isSelected}\n data-selectedparent={selectedParent === dsId}\n aria-label={ariaLabel}\n aria-hidden={!focuseable}\n aria-live={ariaLive}\n >\n {!expandedForAnimation ? (\n <Grid data-testid=\"leftnav-leftcomponent\" justifyContent=\"center\">\n <CollapsedComponent item={item} ctx={ctx} />\n </Grid>\n ) : (\n children\n )}\n </StyledItem>\n {hasBorderBottom && (\n <div\n style={{\n marginLeft: opened ? '16px' : '0px',\n marginRight: borderBottomMr,\n height: '1px',\n width: `calc(100% - ${borderBottomMr} - ${opened ? '16px' : '0px'})`,\n backgroundColor: '#E0E3E8',\n }}\n />\n )}\n </StyledItemWrapper>\n {subitems}\n </>\n );\n};\n"],
|
|
5
|
+
"mappings": "AAAA;ACEA;AACA;AACA;AAGA;AACA;AACA;AAEO,MAAM,eAAe,CAAC,UAAsC;AACjE,QAAM,mBAAmB,qBAAqB;AAC9C,QAAM;AAAA,IACJ;AAAA,IACA,MAAM;AAAA,MACJ;AAAA,MACA,UAAU,EAAE,YAAY,YAAY,QAAQ,WAAW,UAAU,UAAU,cAAc;AAAA,MACzF;AAAA;AAAA,IAEF;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,MACE;AAEJ,QAAM,MAAM,WAAW;AACvB,QAAM;AAAA,IACJ,cAAc,EAAE,aAAa;AAAA,IAC7B;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,MACE;AAEJ,QAAM,SAAS,SAAS;AAExB,QAAM,gBAAgB,YACpB,CAAC,MAAM;AACL,QAAI;AAAS;AACb,gBAAY,MAAM;AAClB,QAAI;AAAY,sBAAgB,KAAK;AAAA,KAEvC,CAAC,aAAa,MAAM,iBAAiB,YAAY;AAGnD,QAAM,cAAc,YAAY,MAAM;AACpC,QAAI;AAAY,qBAAe;AAAA,KAC9B,CAAC,MAAM,gBAAgB;AAE1B,QAAM,YAAY,sBAAsB;AAAA,IACtC;AAAA,IACA,SAAS;AAAA;AAGX,QAAM,OAAO,QAAQ,MAAO,uBAAuB,CAAC,QAAQ,OAAO,UAAU,CAAC,SAAU,CAAC;AACzF,QAAM,aAAa,QAAQ,MAAM,iBAAiB,MAAM,CAAC,cAAc;AAEvE,MAAI,CAAC,wBAAwB,CAAC,oBAAoB;AAChD,WAAO;AAAA;AAGT,SACE,4DACE,qCAAC,mBAAD;AAAA,IAAmB,aAAa,YAAY,QAAQ,KAAK;AAAA,IAAO,eAAY;AAAA,KAC1E,qCAAC,YAAD;AAAA,IACE,KAAK,iBAAiB,QAAQ;AAAA,IAC9B,IAAI;AAAA,IACJ,IAAI,WAAW,SAAY,SAAS,GAAG;AAAA,IACvC;AAAA,IACA,aAAa,YAAY,QAAQ,KAAK;AAAA,IACtC,YAAW;AAAA,IACX;AAAA,IACA,SAAS,CAAC,SAAS,gBAAgB,MAAM;AAAA,IACzC;AAAA,IACA;AAAA,IACA,UAAU;AAAA,IACV,gBAAgB,mBAAmB;AAAA,IACnC;AAAA,IACA,SAAS;AAAA,IACT,eAAY;AAAA,IACZ,UAAU,aAAa,IAAI;AAAA,IAC3B,oBAAkB;AAAA,IAClB,iBAAe;AAAA,IACf,MAAM;AAAA,IACN,iBAAe;AAAA,IACf,uBAAqB,mBAAmB;AAAA,IACxC,cAAY;AAAA,IACZ,eAAa,CAAC;AAAA,IACd,aAAW;AAAA,KAEV,CAAC,uBACA,qCAAC,MAAD;AAAA,IAAM,eAAY;AAAA,IAAwB,gBAAe;AAAA,KACvD,qCAAC,oBAAD;AAAA,IAAoB;AAAA,IAAY;AAAA,QAGlC,WAGH,mBACC,qCAAC,OAAD;AAAA,IACE,OAAO;AAAA,MACL,YAAY,SAAS,SAAS;AAAA,MAC9B,aAAa;AAAA,MACb,QAAQ;AAAA,MACR,OAAO,eAAe,oBAAoB,SAAS,SAAS;AAAA,MAC5D,iBAAiB;AAAA;AAAA,OAKxB;AAAA;",
|
|
6
|
+
"names": []
|
|
7
|
+
}
|
|
@@ -1,47 +1,61 @@
|
|
|
1
|
-
import
|
|
2
|
-
import
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
1
|
+
import * as React from "react";
|
|
2
|
+
import Grid from "@elliemae/ds-grid";
|
|
3
|
+
import styled from "styled-components";
|
|
4
|
+
const borderOutside = (color, weight = 2) => `&:before {
|
|
5
|
+
content: '';
|
|
6
|
+
position: absolute;
|
|
7
|
+
top: 0;
|
|
8
|
+
left: 0;
|
|
9
|
+
right: 0;
|
|
10
|
+
bottom: 0;
|
|
11
|
+
border: ${weight}px solid ${color};
|
|
12
|
+
pointer-events: none;
|
|
13
|
+
}`;
|
|
14
|
+
const StyledItemWrapper = styled(Grid)`
|
|
15
|
+
position: relative;
|
|
16
|
+
${(props) => props.shadowStyle(props.theme)}
|
|
17
|
+
`;
|
|
18
|
+
const getItemBackground = ({ selectable, opened, selected, theme }) => {
|
|
19
|
+
if (!selectable)
|
|
20
|
+
return "white";
|
|
21
|
+
if (selected && !opened)
|
|
22
|
+
return theme.colors.brand[200];
|
|
23
|
+
return theme.colors.neutral["000"];
|
|
8
24
|
};
|
|
9
|
-
const
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
selectable,
|
|
16
|
-
opened,
|
|
17
|
-
selected,
|
|
18
|
-
theme
|
|
19
|
-
} = _ref;
|
|
20
|
-
if (!selectable) return 'white';
|
|
21
|
-
if (selected && !opened) return theme.colors.brand[200];
|
|
22
|
-
return theme.colors.neutral['000'];
|
|
25
|
+
const getItemHoverBackground = ({ selectable, opened, selected, theme }) => {
|
|
26
|
+
if (!selectable)
|
|
27
|
+
return "white";
|
|
28
|
+
if (selected && !opened)
|
|
29
|
+
return theme.colors.brand[200];
|
|
30
|
+
return theme.colors.brand["200"];
|
|
23
31
|
};
|
|
32
|
+
const StyledItem = styled(Grid)`
|
|
33
|
+
cursor: ${(props) => props.selectable && !props.opened ? "pointer" : "auto"};
|
|
34
|
+
min-height: ${(props) => props.minHeight};
|
|
24
35
|
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
opened,
|
|
29
|
-
selected,
|
|
30
|
-
theme
|
|
31
|
-
} = _ref2;
|
|
32
|
-
if (!selectable) return 'white';
|
|
33
|
-
if (selected && !opened) return theme.colors.brand[200];
|
|
34
|
-
return theme.colors.brand['200'];
|
|
35
|
-
};
|
|
36
|
+
background: ${getItemBackground};
|
|
37
|
+
|
|
38
|
+
${(props) => props.selected && !props.opened ? borderOutside(props.theme.colors.brand[500], 1) : ""}
|
|
36
39
|
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
}
|
|
40
|
-
let {
|
|
41
|
-
selectable,
|
|
42
|
-
theme
|
|
43
|
-
} = _ref3;
|
|
44
|
-
return selectable ? theme.colors.brand[200] : 'white';
|
|
45
|
-
}, props => props.shadowStyle(props.theme), props => props.tabIndex !== -1 ? ":focus {\n ".concat(borderOutside(props.theme.colors.brand[700]), "\n }") : '');
|
|
40
|
+
:hover {
|
|
41
|
+
background: ${getItemHoverBackground};
|
|
42
|
+
}
|
|
46
43
|
|
|
47
|
-
|
|
44
|
+
:active {
|
|
45
|
+
background: ${({ selectable, theme }) => selectable ? theme.colors.brand[200] : "white"};
|
|
46
|
+
}
|
|
47
|
+
|
|
48
|
+
${(props) => props.shadowStyle(props.theme)};
|
|
49
|
+
|
|
50
|
+
outline: none;
|
|
51
|
+
|
|
52
|
+
${(props) => props.tabIndex !== -1 ? `:focus {
|
|
53
|
+
${borderOutside(props.theme.colors.brand[700])}
|
|
54
|
+
}` : ""}
|
|
55
|
+
`;
|
|
56
|
+
export {
|
|
57
|
+
StyledItem,
|
|
58
|
+
StyledItemWrapper,
|
|
59
|
+
borderOutside
|
|
60
|
+
};
|
|
61
|
+
//# sourceMappingURL=styled.js.map
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/exported-related/ItemRenderer/styled.tsx"],
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable indent */\n/* eslint-disable @typescript-eslint/no-explicit-any */\nimport Grid from '@elliemae/ds-grid';\nimport styled from 'styled-components';\n\ninterface ItemProps {\n selected: boolean;\n selectable: boolean;\n opened: boolean;\n theme: any;\n shadowStyle: (theme: any) => string;\n}\n\nexport const borderOutside = (color, weight = 2): string => `&:before {\n content: '';\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n border: ${weight}px solid ${color};\n pointer-events: none;\n}`;\n\nexport const StyledItemWrapper = styled(Grid)<{\n shadowStyle: (theme: any) => string;\n}>`\n position: relative;\n ${(props) => props.shadowStyle(props.theme)}\n`;\n\nconst getItemBackground = ({ selectable, opened, selected, theme }: ItemProps) => {\n if (!selectable) return 'white';\n if (selected && !opened) return theme.colors.brand[200];\n return theme.colors.neutral['000'];\n};\n\nconst getItemHoverBackground = ({ selectable, opened, selected, theme }: ItemProps) => {\n if (!selectable) return 'white';\n if (selected && !opened) return theme.colors.brand[200];\n return theme.colors.brand['200'];\n};\n\nexport const StyledItem = styled(Grid)<{ minHeight: string } & ItemProps>`\n cursor: ${(props) => (props.selectable && !props.opened ? 'pointer' : 'auto')};\n min-height: ${(props) => props.minHeight};\n\n background: ${getItemBackground};\n\n ${(props) => (props.selected && !props.opened ? borderOutside(props.theme.colors.brand[500], 1) : '')}\n\n :hover {\n background: ${getItemHoverBackground};\n }\n\n :active {\n background: ${({ selectable, theme }) => (selectable ? theme.colors.brand[200] : 'white')};\n }\n\n ${(props) => props.shadowStyle(props.theme)};\n\n outline: none;\n\n ${(props) =>\n props.tabIndex !== -1\n ? `:focus {\n ${borderOutside(props.theme.colors.brand[700])}\n }`\n : ''}\n`;\n"],
|
|
5
|
+
"mappings": "AAAA;ACEA;AACA;AAUO,MAAM,gBAAgB,CAAC,OAAO,SAAS,MAAc;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,YAOhD,kBAAkB;AAAA;AAAA;AAIvB,MAAM,oBAAoB,OAAO;AAAA;AAAA,IAIpC,CAAC,UAAU,MAAM,YAAY,MAAM;AAAA;AAGvC,MAAM,oBAAoB,CAAC,EAAE,YAAY,QAAQ,UAAU,YAAuB;AAChF,MAAI,CAAC;AAAY,WAAO;AACxB,MAAI,YAAY,CAAC;AAAQ,WAAO,MAAM,OAAO,MAAM;AACnD,SAAO,MAAM,OAAO,QAAQ;AAAA;AAG9B,MAAM,yBAAyB,CAAC,EAAE,YAAY,QAAQ,UAAU,YAAuB;AACrF,MAAI,CAAC;AAAY,WAAO;AACxB,MAAI,YAAY,CAAC;AAAQ,WAAO,MAAM,OAAO,MAAM;AACnD,SAAO,MAAM,OAAO,MAAM;AAAA;AAGrB,MAAM,aAAa,OAAO;AAAA,YACrB,CAAC,UAAW,MAAM,cAAc,CAAC,MAAM,SAAS,YAAY;AAAA,gBACxD,CAAC,UAAU,MAAM;AAAA;AAAA,gBAEjB;AAAA;AAAA,IAEZ,CAAC,UAAW,MAAM,YAAY,CAAC,MAAM,SAAS,cAAc,MAAM,MAAM,OAAO,MAAM,MAAM,KAAK;AAAA;AAAA;AAAA,kBAGlF;AAAA;AAAA;AAAA;AAAA,kBAIA,CAAC,EAAE,YAAY,YAAa,aAAa,MAAM,OAAO,MAAM,OAAO;AAAA;AAAA;AAAA,IAGjF,CAAC,UAAU,MAAM,YAAY,MAAM;AAAA;AAAA;AAAA;AAAA,IAInC,CAAC,UACD,MAAM,aAAa,KACf;AAAA,MACF,cAAc,MAAM,MAAM,OAAO,MAAM;AAAA,aAErC;AAAA;",
|
|
6
|
+
"names": []
|
|
7
|
+
}
|
|
@@ -1,49 +1,40 @@
|
|
|
1
|
-
import
|
|
2
|
-
import
|
|
3
|
-
import 'core-js/modules/esnext.iterator.filter.js';
|
|
4
|
-
import 'core-js/modules/esnext.async-iterator.for-each.js';
|
|
5
|
-
import 'core-js/modules/esnext.iterator.for-each.js';
|
|
6
|
-
import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
|
|
7
|
-
import { useMemo } from 'react';
|
|
8
|
-
|
|
9
|
-
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
|
|
10
|
-
|
|
11
|
-
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
|
|
1
|
+
import * as React from "react";
|
|
2
|
+
import { useMemo } from "react";
|
|
12
3
|
const itemDefaultProps = {
|
|
13
|
-
label:
|
|
14
|
-
labelOverflow:
|
|
4
|
+
label: "",
|
|
5
|
+
labelOverflow: "truncate",
|
|
15
6
|
selectable: true,
|
|
16
7
|
focuseable: true,
|
|
17
8
|
openable: false,
|
|
18
9
|
closable: false,
|
|
19
|
-
ariaLabel:
|
|
20
|
-
ariaRole:
|
|
21
|
-
ariaLive:
|
|
22
|
-
ariaExpanded:
|
|
23
|
-
ariaDescribedBy:
|
|
10
|
+
ariaLabel: "",
|
|
11
|
+
ariaRole: "menuitem",
|
|
12
|
+
ariaLive: "off",
|
|
13
|
+
ariaExpanded: void 0,
|
|
14
|
+
ariaDescribedBy: void 0
|
|
24
15
|
};
|
|
25
|
-
const itemWithoutShadows = [
|
|
26
|
-
|
|
27
|
-
const usePropsWithDefaults = props => {
|
|
16
|
+
const itemWithoutShadows = ["ds-left-nav-item-header", "ds-left-nav-item-link", "ds-left-nav-item-submenu"];
|
|
17
|
+
const usePropsWithDefaults = (props) => {
|
|
28
18
|
const propsWithDefault = useMemo(() => {
|
|
29
|
-
const itemWithDefaults =
|
|
30
|
-
CollapsedComponent: () => null
|
|
31
|
-
|
|
32
|
-
itemOpts:
|
|
33
|
-
}
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
paddingTop: '12px',
|
|
19
|
+
const itemWithDefaults = {
|
|
20
|
+
CollapsedComponent: () => null,
|
|
21
|
+
...props.item,
|
|
22
|
+
itemOpts: { ...itemDefaultProps, ...props.item.itemOpts }
|
|
23
|
+
};
|
|
24
|
+
return {
|
|
25
|
+
minHeight: "48px",
|
|
26
|
+
paddingTop: "12px",
|
|
38
27
|
subitems: [],
|
|
39
|
-
shadowStyle: (opened, type) => theme =>
|
|
28
|
+
shadowStyle: (opened, type) => (theme) => `box-shadow: ${opened || !itemWithoutShadows.includes(type) ? "inset 4px 0 0 0 #52A6EC" : "inset 4px 0 0 0 white"}`,
|
|
40
29
|
hasBorderBottom: false,
|
|
41
|
-
borderBottomMr:
|
|
42
|
-
|
|
30
|
+
borderBottomMr: "0px",
|
|
31
|
+
...props,
|
|
43
32
|
item: itemWithDefaults
|
|
44
|
-
}
|
|
33
|
+
};
|
|
45
34
|
}, [props]);
|
|
46
35
|
return propsWithDefault;
|
|
47
36
|
};
|
|
48
|
-
|
|
49
|
-
|
|
37
|
+
export {
|
|
38
|
+
usePropsWithDefaults
|
|
39
|
+
};
|
|
40
|
+
//# sourceMappingURL=usePropsWithDefaults.js.map
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/exported-related/ItemRenderer/usePropsWithDefaults.tsx"],
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { useMemo } from 'react';\nimport { itemOptsT, ItemRendererT } from '../../index.d';\n\nconst itemDefaultProps: itemOptsT = {\n label: '',\n labelOverflow: 'truncate',\n selectable: true,\n focuseable: true,\n openable: false,\n closable: false,\n ariaLabel: '',\n ariaRole: 'menuitem',\n ariaLive: 'off',\n ariaExpanded: undefined,\n ariaDescribedBy: undefined,\n};\n\nconst itemWithoutShadows = ['ds-left-nav-item-header', 'ds-left-nav-item-link', 'ds-left-nav-item-submenu'];\n\n// Make use Item props with defaults\nexport const usePropsWithDefaults = (props: ItemRendererT): ItemRendererT => {\n const propsWithDefault = useMemo(() => {\n const itemWithDefaults = {\n CollapsedComponent: () => null,\n ...props.item,\n itemOpts: { ...itemDefaultProps, ...props.item.itemOpts },\n };\n return {\n minHeight: '48px',\n paddingTop: '12px',\n subitems: [],\n shadowStyle: (opened: boolean, type: string) => (theme: any) =>\n `box-shadow: ${\n opened || !itemWithoutShadows.includes(type) ? 'inset 4px 0 0 0 #52A6EC' : 'inset 4px 0 0 0 white'\n }`,\n hasBorderBottom: false,\n borderBottomMr: '0px',\n ...props,\n item: itemWithDefaults,\n };\n }, [props]);\n\n return propsWithDefault;\n};\n"],
|
|
5
|
+
"mappings": "AAAA;ACAA;AAGA,MAAM,mBAA8B;AAAA,EAClC,OAAO;AAAA,EACP,eAAe;AAAA,EACf,YAAY;AAAA,EACZ,YAAY;AAAA,EACZ,UAAU;AAAA,EACV,UAAU;AAAA,EACV,WAAW;AAAA,EACX,UAAU;AAAA,EACV,UAAU;AAAA,EACV,cAAc;AAAA,EACd,iBAAiB;AAAA;AAGnB,MAAM,qBAAqB,CAAC,2BAA2B,yBAAyB;AAGzE,MAAM,uBAAuB,CAAC,UAAwC;AAC3E,QAAM,mBAAmB,QAAQ,MAAM;AACrC,UAAM,mBAAmB;AAAA,MACvB,oBAAoB,MAAM;AAAA,SACvB,MAAM;AAAA,MACT,UAAU,KAAK,qBAAqB,MAAM,KAAK;AAAA;AAEjD,WAAO;AAAA,MACL,WAAW;AAAA,MACX,YAAY;AAAA,MACZ,UAAU;AAAA,MACV,aAAa,CAAC,QAAiB,SAAiB,CAAC,UAC/C,eACE,UAAU,CAAC,mBAAmB,SAAS,QAAQ,4BAA4B;AAAA,MAE/E,iBAAiB;AAAA,MACjB,gBAAgB;AAAA,SACb;AAAA,MACH,MAAM;AAAA;AAAA,KAEP,CAAC;AAEJ,SAAO;AAAA;",
|
|
6
|
+
"names": []
|
|
7
|
+
}
|
|
@@ -1,51 +1,58 @@
|
|
|
1
|
-
import
|
|
2
|
-
import
|
|
3
|
-
import {
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
1
|
+
import * as React from "react";
|
|
2
|
+
import React2 from "react";
|
|
3
|
+
import {
|
|
4
|
+
AlertsSmallFill,
|
|
5
|
+
Notifications as InternalNotifications,
|
|
6
|
+
ExceptionsSmallFill,
|
|
7
|
+
MessagesSmallFill
|
|
8
|
+
} from "@elliemae/ds-icons";
|
|
9
|
+
import styled from "styled-components";
|
|
10
|
+
import Grid from "@elliemae/ds-grid";
|
|
11
|
+
const StyledIcon = styled.div`
|
|
12
|
+
display: flex;
|
|
13
|
+
flex-direction: column;
|
|
14
|
+
align-items: center;
|
|
15
|
+
`;
|
|
16
|
+
const Notifications = ({
|
|
17
|
+
exceptions = false,
|
|
18
|
+
alerts = false,
|
|
19
|
+
messages = false
|
|
20
|
+
}) => /* @__PURE__ */ React2.createElement(StyledIcon, null, /* @__PURE__ */ React2.createElement(InternalNotifications, {
|
|
21
|
+
size: "m",
|
|
22
|
+
color: ["brand-primary", 800],
|
|
23
|
+
"data-testid": "left-nav-notifications-icon"
|
|
24
|
+
}), (exceptions || alerts || messages) && /* @__PURE__ */ React2.createElement(Grid, {
|
|
25
|
+
cols: ["1fr", "1fr", "1fr"],
|
|
26
|
+
gutter: "xxxs",
|
|
27
|
+
mt: "2px"
|
|
28
|
+
}, /* @__PURE__ */ React2.createElement(Grid, {
|
|
29
|
+
width: "6px",
|
|
30
|
+
height: "6px",
|
|
31
|
+
"data-testid": "left-nav-exceptions-icon"
|
|
32
|
+
}, exceptions && /* @__PURE__ */ React2.createElement(ExceptionsSmallFill, {
|
|
33
|
+
width: "6px",
|
|
34
|
+
height: "6px",
|
|
35
|
+
color: ["warning", 900]
|
|
36
|
+
})), /* @__PURE__ */ React2.createElement(Grid, {
|
|
37
|
+
width: "6px",
|
|
38
|
+
height: "6px",
|
|
39
|
+
"data-testid": "left-nav-alerts-icon"
|
|
40
|
+
}, alerts && /* @__PURE__ */ React2.createElement(AlertsSmallFill, {
|
|
41
|
+
width: "6px",
|
|
42
|
+
height: "6px",
|
|
43
|
+
color: ["danger", 900]
|
|
44
|
+
})), /* @__PURE__ */ React2.createElement(Grid, {
|
|
45
|
+
width: "6px",
|
|
46
|
+
height: "6px",
|
|
47
|
+
"data-testid": "left-nav-messages-icon"
|
|
48
|
+
}, messages && /* @__PURE__ */ React2.createElement(MessagesSmallFill, {
|
|
49
|
+
width: "6px",
|
|
50
|
+
height: "6px",
|
|
51
|
+
color: ["success", 900]
|
|
52
|
+
}))));
|
|
53
|
+
var Notifications_default = Notifications;
|
|
54
|
+
export {
|
|
55
|
+
Notifications,
|
|
56
|
+
Notifications_default as default
|
|
49
57
|
};
|
|
50
|
-
|
|
51
|
-
export { Notifications, Notifications as default };
|
|
58
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/exported-related/Notifications/index.tsx"],
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport {\n AlertsSmallFill,\n Notifications as InternalNotifications,\n ExceptionsSmallFill,\n MessagesSmallFill,\n} from '@elliemae/ds-icons';\nimport styled from 'styled-components';\nimport Grid from '@elliemae/ds-grid';\n\nconst StyledIcon = styled.div`\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 <StyledIcon>\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 </StyledIcon>\n);\n\nexport default Notifications;\n"],
|
|
5
|
+
"mappings": "AAAA;ACAA;AACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAMA;AACA;AAEA,MAAM,aAAa,OAAO;AAAA;AAAA;AAAA;AAAA;AAYnB,MAAM,gBAAgB,CAAC;AAAA,EAC5B,aAAa;AAAA,EACb,SAAS;AAAA,EACT,WAAW;AAAA,MAEX,qCAAC,YAAD,MACE,qCAAC,uBAAD;AAAA,EAAuB,MAAK;AAAA,EAAI,OAAO,CAAC,iBAAiB;AAAA,EAAM,eAAY;AAAA,IACzE,eAAc,UAAU,aACxB,qCAAC,MAAD;AAAA,EAAM,MAAM,CAAC,OAAO,OAAO;AAAA,EAAQ,QAAO;AAAA,EAAO,IAAG;AAAA,GAClD,qCAAC,MAAD;AAAA,EAAM,OAAM;AAAA,EAAM,QAAO;AAAA,EAAM,eAAY;AAAA,GACxC,cAAc,qCAAC,qBAAD;AAAA,EAAqB,OAAM;AAAA,EAAM,QAAO;AAAA,EAAM,OAAO,CAAC,WAAW;AAAA,KAElF,qCAAC,MAAD;AAAA,EAAM,OAAM;AAAA,EAAM,QAAO;AAAA,EAAM,eAAY;AAAA,GACxC,UAAU,qCAAC,iBAAD;AAAA,EAAiB,OAAM;AAAA,EAAM,QAAO;AAAA,EAAM,OAAO,CAAC,UAAU;AAAA,KAEzE,qCAAC,MAAD;AAAA,EAAM,OAAM;AAAA,EAAM,QAAO;AAAA,EAAM,eAAY;AAAA,GACxC,YAAY,qCAAC,mBAAD;AAAA,EAAmB,OAAM;AAAA,EAAM,QAAO;AAAA,EAAM,OAAO,CAAC,WAAW;AAAA;AAOtF,IAAO,wBAAQ;",
|
|
6
|
+
"names": []
|
|
7
|
+
}
|
|
@@ -1,23 +1,21 @@
|
|
|
1
|
-
import
|
|
2
|
-
import
|
|
3
|
-
import
|
|
4
|
-
import
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
|
|
13
|
-
|
|
14
|
-
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
|
|
15
|
-
const StyledOpenWindow = /*#__PURE__*/styled(OpenWindow$1).withConfig({
|
|
16
|
-
componentId: "sc-g53ios-0"
|
|
17
|
-
})(["cursor:pointer;:focus{outline:1px solid ", ";}"], props => props.theme.colors.brand[800]);
|
|
18
|
-
const OpenWindow = props => /*#__PURE__*/jsx(StyledOpenWindow, _objectSpread({
|
|
1
|
+
import * as React from "react";
|
|
2
|
+
import React2 from "react";
|
|
3
|
+
import styled from "styled-components";
|
|
4
|
+
import { OpenWindow as OpenWindowIcon } from "@elliemae/ds-icons";
|
|
5
|
+
const StyledOpenWindow = styled(OpenWindowIcon)`
|
|
6
|
+
cursor: pointer;
|
|
7
|
+
:focus {
|
|
8
|
+
outline: 1px solid ${(props) => props.theme.colors.brand[800]};
|
|
9
|
+
}
|
|
10
|
+
`;
|
|
11
|
+
const OpenWindow = (props) => /* @__PURE__ */ React2.createElement(StyledOpenWindow, {
|
|
19
12
|
size: "s",
|
|
20
|
-
color: [
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
13
|
+
color: ["brand-primary", 800],
|
|
14
|
+
...props
|
|
15
|
+
});
|
|
16
|
+
var OpenWindowItem_default = OpenWindow;
|
|
17
|
+
export {
|
|
18
|
+
OpenWindow,
|
|
19
|
+
OpenWindowItem_default as default
|
|
20
|
+
};
|
|
21
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/exported-related/OpenWindowItem/index.tsx"],
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport styled from 'styled-components';\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"],
|
|
5
|
+
"mappings": "AAAA;ACAA;AACA;AACA;AAEA,MAAM,mBAAmB,OAAO;AAAA;AAAA;AAAA,yBAGP,CAAC,UAAU,MAAM,MAAM,OAAO,MAAM;AAAA;AAAA;AAItD,MAAM,aAAa,CAAC,UACzB,qCAAC,kBAAD;AAAA,EAAkB,MAAK;AAAA,EAAI,OAAO,CAAC,iBAAiB;AAAA,KAAU;AAAA;AAGhE,IAAO,yBAAQ;",
|
|
6
|
+
"names": []
|
|
7
|
+
}
|
|
@@ -1,21 +1,28 @@
|
|
|
1
|
+
import * as React from "react";
|
|
1
2
|
const LABEL_OVERFLOW = {
|
|
2
|
-
WRAP:
|
|
3
|
-
WRAP_ALL:
|
|
4
|
-
TRUNCATE:
|
|
3
|
+
WRAP: "wrap",
|
|
4
|
+
WRAP_ALL: "wrapAll",
|
|
5
|
+
TRUNCATE: "truncate"
|
|
5
6
|
};
|
|
6
7
|
const ITEM_TYPES = {
|
|
7
|
-
LEFT_NAV_ITEM_HEADER:
|
|
8
|
-
LEFT_NAV_ITEM_LINK:
|
|
9
|
-
LEFT_NAV_ITEM_SUBMENU:
|
|
10
|
-
LEFT_NAV_ITEM_CONTROLLED_DRILLDOWN:
|
|
11
|
-
LEFT_NAV_ITEM_UNCONTROLLED_DRILLDOWN:
|
|
12
|
-
LEFT_NAV_ITEM_SECTION:
|
|
13
|
-
LEFT_NAV_ITEM_SEPARATOR:
|
|
14
|
-
LEFT_NAV_ITEM_TEXT_LABEL:
|
|
15
|
-
LEFT_NAV_ITEM_WITH_DATE:
|
|
8
|
+
LEFT_NAV_ITEM_HEADER: "ds-left-nav-item-header",
|
|
9
|
+
LEFT_NAV_ITEM_LINK: "ds-left-nav-item-link",
|
|
10
|
+
LEFT_NAV_ITEM_SUBMENU: "ds-left-nav-item-submenu",
|
|
11
|
+
LEFT_NAV_ITEM_CONTROLLED_DRILLDOWN: "ds-left-nav-item-controlled-drilldown",
|
|
12
|
+
LEFT_NAV_ITEM_UNCONTROLLED_DRILLDOWN: "ds-left-nav-item-uncontrolled-drilldown",
|
|
13
|
+
LEFT_NAV_ITEM_SECTION: "ds-left-nav-item-section",
|
|
14
|
+
LEFT_NAV_ITEM_SEPARATOR: "ds-left-nav-item-separator",
|
|
15
|
+
LEFT_NAV_ITEM_TEXT_LABEL: "ds-left-nav-item-text-label",
|
|
16
|
+
LEFT_NAV_ITEM_WITH_DATE: "ds-left-nav-item-with-date"
|
|
16
17
|
};
|
|
17
|
-
const FOOTER_DS_ID =
|
|
18
|
-
const FOOTER_MENU_CLOSE_DS_ID =
|
|
19
|
-
const CHEVRON_BACK_DS_ID =
|
|
20
|
-
|
|
21
|
-
|
|
18
|
+
const FOOTER_DS_ID = "ds-left-nav-__internal__-footer";
|
|
19
|
+
const FOOTER_MENU_CLOSE_DS_ID = "ds-left-nav-__internal__-footer-menu-close";
|
|
20
|
+
const CHEVRON_BACK_DS_ID = "ds-left-nav-__internal__-chevron-back";
|
|
21
|
+
export {
|
|
22
|
+
CHEVRON_BACK_DS_ID,
|
|
23
|
+
FOOTER_DS_ID,
|
|
24
|
+
FOOTER_MENU_CLOSE_DS_ID,
|
|
25
|
+
ITEM_TYPES,
|
|
26
|
+
LABEL_OVERFLOW
|
|
27
|
+
};
|
|
28
|
+
//# sourceMappingURL=constants.js.map
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/exported-related/constants.tsx"],
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "export const LABEL_OVERFLOW = {\n WRAP: 'wrap',\n WRAP_ALL: 'wrapAll',\n TRUNCATE: 'truncate',\n};\n\nexport const ITEM_TYPES = {\n LEFT_NAV_ITEM_HEADER: 'ds-left-nav-item-header',\n LEFT_NAV_ITEM_LINK: 'ds-left-nav-item-link',\n LEFT_NAV_ITEM_SUBMENU: 'ds-left-nav-item-submenu',\n LEFT_NAV_ITEM_CONTROLLED_DRILLDOWN: 'ds-left-nav-item-controlled-drilldown',\n LEFT_NAV_ITEM_UNCONTROLLED_DRILLDOWN: 'ds-left-nav-item-uncontrolled-drilldown',\n LEFT_NAV_ITEM_SECTION: 'ds-left-nav-item-section',\n LEFT_NAV_ITEM_SEPARATOR: 'ds-left-nav-item-separator',\n LEFT_NAV_ITEM_TEXT_LABEL: 'ds-left-nav-item-text-label',\n LEFT_NAV_ITEM_WITH_DATE: 'ds-left-nav-item-with-date',\n};\n\nexport const FOOTER_DS_ID = 'ds-left-nav-__internal__-footer';\n\nexport const FOOTER_MENU_CLOSE_DS_ID = 'ds-left-nav-__internal__-footer-menu-close';\n\nexport const CHEVRON_BACK_DS_ID = 'ds-left-nav-__internal__-chevron-back';\n"],
|
|
5
|
+
"mappings": "AAAA;ACAO,MAAM,iBAAiB;AAAA,EAC5B,MAAM;AAAA,EACN,UAAU;AAAA,EACV,UAAU;AAAA;AAGL,MAAM,aAAa;AAAA,EACxB,sBAAsB;AAAA,EACtB,oBAAoB;AAAA,EACpB,uBAAuB;AAAA,EACvB,oCAAoC;AAAA,EACpC,sCAAsC;AAAA,EACtC,uBAAuB;AAAA,EACvB,yBAAyB;AAAA,EACzB,0BAA0B;AAAA,EAC1B,yBAAyB;AAAA;AAGpB,MAAM,eAAe;AAErB,MAAM,0BAA0B;AAEhC,MAAM,qBAAqB;",
|
|
6
|
+
"names": []
|
|
7
|
+
}
|
|
@@ -1,6 +1,8 @@
|
|
|
1
|
-
|
|
2
|
-
export
|
|
3
|
-
export
|
|
4
|
-
export
|
|
5
|
-
export
|
|
6
|
-
export
|
|
1
|
+
import * as React from "react";
|
|
2
|
+
export * from "./constants";
|
|
3
|
+
export * from "./ItemRenderer";
|
|
4
|
+
export * from "./ChevronItem";
|
|
5
|
+
export * from "./Notifications";
|
|
6
|
+
export * from "./OpenWindowItem";
|
|
7
|
+
export * from "./Icon";
|
|
8
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/exported-related/index.tsx"],
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "export * from './constants';\nexport * from './ItemRenderer';\nexport * from './ChevronItem';\nexport * from './Notifications';\nexport * from './OpenWindowItem';\nexport * from './Icon';\n"],
|
|
5
|
+
"mappings": "AAAA;ACAA;AACA;AACA;AACA;AACA;AACA;",
|
|
6
|
+
"names": []
|
|
7
|
+
}
|
package/esm/hooks/index.js
CHANGED
|
@@ -1,3 +1,5 @@
|
|
|
1
|
-
|
|
2
|
-
export
|
|
3
|
-
export
|
|
1
|
+
import * as React from "react";
|
|
2
|
+
export * from "./useOpenableOnClickHandler";
|
|
3
|
+
export * from "./useExpandableOnClickHandler";
|
|
4
|
+
export * from "./useKeyboardNavigation";
|
|
5
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/hooks/index.tsx"],
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "export * from './useOpenableOnClickHandler';\nexport * from './useExpandableOnClickHandler';\nexport * from './useKeyboardNavigation';\n"],
|
|
5
|
+
"mappings": "AAAA;ACAA;AACA;AACA;",
|
|
6
|
+
"names": []
|
|
7
|
+
}
|
|
@@ -1,31 +1,35 @@
|
|
|
1
|
-
import
|
|
2
|
-
import {
|
|
3
|
-
|
|
4
|
-
const useExpandableOnClickHandler =
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
} = _ref;
|
|
1
|
+
import * as React from "react";
|
|
2
|
+
import { useCallback, useContext } from "react";
|
|
3
|
+
import LeftNavigationContext from "../LeftNavigationContext";
|
|
4
|
+
const useExpandableOnClickHandler = ({
|
|
5
|
+
id,
|
|
6
|
+
onExpand,
|
|
7
|
+
onOpen,
|
|
8
|
+
selectable = true
|
|
9
|
+
}) => {
|
|
11
10
|
const {
|
|
12
|
-
leftNavProps: {
|
|
13
|
-
expanded
|
|
14
|
-
},
|
|
11
|
+
leftNavProps: { expanded },
|
|
15
12
|
setSelectedItem
|
|
16
|
-
} = useContext(
|
|
17
|
-
const handleOnExpand = useCallback(e => {
|
|
13
|
+
} = useContext(LeftNavigationContext);
|
|
14
|
+
const handleOnExpand = useCallback((e) => {
|
|
18
15
|
onExpand(e);
|
|
19
|
-
if (selectable)
|
|
16
|
+
if (selectable)
|
|
17
|
+
setSelectedItem(id);
|
|
20
18
|
}, [id, onExpand, setSelectedItem, selectable]);
|
|
21
|
-
const handleOnOpen = useCallback(e => {
|
|
19
|
+
const handleOnOpen = useCallback((e) => {
|
|
22
20
|
onOpen(e);
|
|
23
|
-
if (selectable)
|
|
21
|
+
if (selectable)
|
|
22
|
+
setSelectedItem(id);
|
|
24
23
|
}, [id, onOpen, setSelectedItem, selectable]);
|
|
25
|
-
const handleOnClick = useCallback(e => {
|
|
26
|
-
if (!expanded)
|
|
24
|
+
const handleOnClick = useCallback((e) => {
|
|
25
|
+
if (!expanded)
|
|
26
|
+
handleOnExpand(e);
|
|
27
|
+
else
|
|
28
|
+
handleOnOpen(e);
|
|
27
29
|
}, [expanded, handleOnExpand, handleOnOpen]);
|
|
28
30
|
return handleOnClick;
|
|
29
31
|
};
|
|
30
|
-
|
|
31
|
-
|
|
32
|
+
export {
|
|
33
|
+
useExpandableOnClickHandler
|
|
34
|
+
};
|
|
35
|
+
//# sourceMappingURL=useExpandableOnClickHandler.js.map
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/hooks/useExpandableOnClickHandler.tsx"],
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useCallback, useContext } from 'react';\nimport LeftNavigationContext from '../LeftNavigationContext';\n\ntype useExpandableOnClickHandlerProps = {\n id: string;\n onExpand: React.MouseEventHandler & React.KeyboardEventHandler;\n onOpen: React.MouseEventHandler & React.KeyboardEventHandler;\n selectable?: boolean;\n};\n\nexport const useExpandableOnClickHandler = ({\n id,\n onExpand,\n onOpen,\n selectable = true,\n}: useExpandableOnClickHandlerProps): ((\n e: React.MouseEvent<HTMLElement>,\n) => void) => {\n const {\n leftNavProps: { expanded },\n setSelectedItem,\n } = useContext(LeftNavigationContext);\n\n const handleOnExpand = useCallback(\n (e) => {\n onExpand(e);\n if (selectable) setSelectedItem(id);\n },\n [id, onExpand, setSelectedItem, selectable],\n );\n\n const handleOnOpen = useCallback(\n (e) => {\n onOpen(e);\n if (selectable) setSelectedItem(id);\n },\n [id, onOpen, setSelectedItem, selectable],\n );\n\n const handleOnClick = useCallback(\n (e) => {\n if (!expanded) handleOnExpand(e);\n else handleOnOpen(e);\n },\n [expanded, handleOnExpand, handleOnOpen],\n );\n\n return handleOnClick;\n};\n"],
|
|
5
|
+
"mappings": "AAAA;ACAA;AACA;AASO,MAAM,8BAA8B,CAAC;AAAA,EAC1C;AAAA,EACA;AAAA,EACA;AAAA,EACA,aAAa;AAAA,MAGD;AACZ,QAAM;AAAA,IACJ,cAAc,EAAE;AAAA,IAChB;AAAA,MACE,WAAW;AAEf,QAAM,iBAAiB,YACrB,CAAC,MAAM;AACL,aAAS;AACT,QAAI;AAAY,sBAAgB;AAAA,KAElC,CAAC,IAAI,UAAU,iBAAiB;AAGlC,QAAM,eAAe,YACnB,CAAC,MAAM;AACL,WAAO;AACP,QAAI;AAAY,sBAAgB;AAAA,KAElC,CAAC,IAAI,QAAQ,iBAAiB;AAGhC,QAAM,gBAAgB,YACpB,CAAC,MAAM;AACL,QAAI,CAAC;AAAU,qBAAe;AAAA;AACzB,mBAAa;AAAA,KAEpB,CAAC,UAAU,gBAAgB;AAG7B,SAAO;AAAA;",
|
|
6
|
+
"names": []
|
|
7
|
+
}
|