@elliemae/ds-left-navigation 1.55.0-next.7 → 1.55.0-rc.1
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/exported-related/ItemRenderer/index.js +2 -0
- package/cjs/exported-related/ItemRenderer/index.js.map +1 -1
- package/cjs/exported-related/ItemRenderer/usePropsWithDefaults.js +2 -1
- package/cjs/exported-related/ItemRenderer/usePropsWithDefaults.js.map +1 -1
- package/cjs/outOfTheBox/ItemSection/index.js +1 -2
- package/cjs/outOfTheBox/ItemSection/index.js.map +1 -1
- package/esm/exported-related/ItemRenderer/index.js +2 -0
- package/esm/exported-related/ItemRenderer/index.js.map +1 -1
- package/esm/exported-related/ItemRenderer/usePropsWithDefaults.js +2 -1
- package/esm/exported-related/ItemRenderer/usePropsWithDefaults.js.map +1 -1
- package/esm/outOfTheBox/ItemSection/index.js +1 -2
- package/esm/outOfTheBox/ItemSection/index.js.map +1 -1
- package/package.json +8 -6
|
@@ -31,6 +31,7 @@ var ItemRenderer = function ItemRenderer(props) {
|
|
|
31
31
|
ariaRole = _propsWithDefault$ite2.ariaRole,
|
|
32
32
|
ariaLive = _propsWithDefault$ite2.ariaLive,
|
|
33
33
|
ariaExpanded = _propsWithDefault$ite2.ariaExpanded,
|
|
34
|
+
ariaDescribedBy = _propsWithDefault$ite2.ariaDescribedBy,
|
|
34
35
|
CollapsedComponent = _propsWithDefault$ite.CollapsedComponent,
|
|
35
36
|
subitems = propsWithDefault.subitems,
|
|
36
37
|
minHeight = propsWithDefault.minHeight,
|
|
@@ -102,6 +103,7 @@ var ItemRenderer = function ItemRenderer(props) {
|
|
|
102
103
|
onFocus: handleFocus,
|
|
103
104
|
"data-testid": "leftnav-item-container",
|
|
104
105
|
tabIndex: focuseable ? 0 : -1,
|
|
106
|
+
"aria-describedby": ariaDescribedBy,
|
|
105
107
|
"aria-expanded": ariaExpanded,
|
|
106
108
|
role: ariaRole,
|
|
107
109
|
"aria-label": ariaLabel,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":["../../../../src/exported-related/ItemRenderer/index.tsx"],"sourcesContent":["/* eslint-disable complexity */\n/* eslint-disable max-lines */\nimport React, { useContext, useMemo, useCallback } from 'react';\nimport Grid from '@elliemae/ds-grid';\nimport { StyledItemWrapper, StyledItem } from './styled';\n\nimport { ItemRendererT } from '../../index.d';\nimport { LeftNavContext } from '../../LeftNavigationContext';\nimport { usePropsWithDefaults } from './usePropsWithDefaults';\nimport { useKeyboardNavigation } from '../../hooks';\n\nexport const ItemRenderer = (props: ItemRendererT): JSX.Element => {\n const propsWithDefault = usePropsWithDefaults(props);\n const {\n item,\n item: {\n dsId,\n itemOpts: { selectable, focuseable, indent, ariaLabel, ariaRole, ariaLive, ariaExpanded },\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 focusedByKey,\n selectedItem,\n setSelectedItem,\n focusedItem,\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 const isFocused = useMemo(() => focusedItem === dsId, [focusedItem, dsId]);\n\n if (!expandedForAnimation && !CollapsedComponent) {\n return null;\n }\n\n return (\n <>\n <StyledItemWrapper shadowStyle={shadowStyle} 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}\n alignItems=\"flex-start\"\n cols={cols}\n onClick={!opened ? handleOnClick : () => null}\n onKeyDown={onKeyDown}\n selectable={selectable}\n selected={isSelected}\n opened={opened}\n focused={isFocused}\n focusedByKey={focusedByKey}\n onFocus={handleFocus}\n data-testid=\"leftnav-item-container\"\n tabIndex={focuseable ? 0 : -1}\n aria-expanded={ariaExpanded}\n role={ariaRole}\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"],"names":["ItemRenderer","props","propsWithDefault","usePropsWithDefaults","item","dsId","itemOpts","selectable","focuseable","indent","ariaLabel","ariaRole","ariaLive","ariaExpanded","CollapsedComponent","subitems","minHeight","paddingTop","onClick","shadowStyle","hasBorderBottom","borderBottomMr","children","ctx","useContext","LeftNavContext","leftNavProps","onItemClick","openedItem","expandedForAnimation","focusedByKey","selectedItem","setSelectedItem","focusedItem","setFocusedItem","visibleItemsRefs","opened","handleOnClick","useCallback","e","handleFocus","onKeyDown","useKeyboardNavigation","cols","useMemo","isSelected","isFocused","React","StyledItemWrapper","StyledItem","current","undefined","Grid","marginLeft","marginRight","height","width","backgroundColor"],"mappings":";;;;;;;;;;;;;;;;;;;AAAA;IAWaA,YAAY,GAAG,SAAfA,YAAe,CAACC,KAAD,EAAuC;AACjE,MAAMC,gBAAgB,GAAGC,sEAAoB,CAACF,KAAD,CAA7C;AACA,MACEG,IADF,GAeIF,gBAfJ,CACEE,IADF;AAAA,8BAeIF,gBAfJ,CAEEE,IAFF;AAAA,MAGIC,IAHJ,yBAGIA,IAHJ;AAAA,qDAIIC,QAJJ;AAAA,MAIgBC,UAJhB,0BAIgBA,UAJhB;AAAA,MAI4BC,UAJ5B,0BAI4BA,UAJ5B;AAAA,MAIwCC,MAJxC,0BAIwCA,MAJxC;AAAA,MAIgDC,SAJhD,0BAIgDA,SAJhD;AAAA,MAI2DC,QAJ3D,0BAI2DA,QAJ3D;AAAA,MAIqEC,QAJrE,0BAIqEA,QAJrE;AAAA,MAI+EC,YAJ/E,0BAI+EA,YAJ/E;AAAA,MAKIC,kBALJ,yBAKIA,kBALJ;AAAA,MAOEC,QAPF,
|
|
1
|
+
{"version":3,"file":"index.js","sources":["../../../../src/exported-related/ItemRenderer/index.tsx"],"sourcesContent":["/* eslint-disable complexity */\n/* eslint-disable max-lines */\nimport React, { useContext, useMemo, useCallback } from 'react';\nimport Grid from '@elliemae/ds-grid';\nimport { StyledItemWrapper, StyledItem } from './styled';\n\nimport { ItemRendererT } from '../../index.d';\nimport { LeftNavContext } from '../../LeftNavigationContext';\nimport { usePropsWithDefaults } from './usePropsWithDefaults';\nimport { useKeyboardNavigation } from '../../hooks';\n\nexport const ItemRenderer = (props: ItemRendererT): JSX.Element => {\n const propsWithDefault = usePropsWithDefaults(props);\n const {\n item,\n item: {\n dsId,\n itemOpts: { selectable, focuseable, indent, ariaLabel, ariaRole, ariaLive, ariaExpanded, ariaDescribedBy },\n CollapsedComponent,\n },\n subitems,\n minHeight,\n paddingTop,\n onClick,\n shadowStyle,\n hasBorderBottom,\n borderBottomMr,\n children,\n } = propsWithDefault;\n\n const ctx = useContext(LeftNavContext);\n const {\n leftNavProps: { onItemClick, openedItem },\n expandedForAnimation,\n focusedByKey,\n selectedItem,\n setSelectedItem,\n focusedItem,\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 const isFocused = useMemo(() => focusedItem === dsId, [focusedItem, dsId]);\n\n if (!expandedForAnimation && !CollapsedComponent) {\n return null;\n }\n\n return (\n <>\n <StyledItemWrapper shadowStyle={shadowStyle} 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}\n alignItems=\"flex-start\"\n cols={cols}\n onClick={!opened ? handleOnClick : () => null}\n onKeyDown={onKeyDown}\n selectable={selectable}\n selected={isSelected}\n opened={opened}\n focused={isFocused}\n focusedByKey={focusedByKey}\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 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"],"names":["ItemRenderer","props","propsWithDefault","usePropsWithDefaults","item","dsId","itemOpts","selectable","focuseable","indent","ariaLabel","ariaRole","ariaLive","ariaExpanded","ariaDescribedBy","CollapsedComponent","subitems","minHeight","paddingTop","onClick","shadowStyle","hasBorderBottom","borderBottomMr","children","ctx","useContext","LeftNavContext","leftNavProps","onItemClick","openedItem","expandedForAnimation","focusedByKey","selectedItem","setSelectedItem","focusedItem","setFocusedItem","visibleItemsRefs","opened","handleOnClick","useCallback","e","handleFocus","onKeyDown","useKeyboardNavigation","cols","useMemo","isSelected","isFocused","React","StyledItemWrapper","StyledItem","current","undefined","Grid","marginLeft","marginRight","height","width","backgroundColor"],"mappings":"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"}
|
|
@@ -22,7 +22,8 @@ var itemDefaultProps = {
|
|
|
22
22
|
ariaLabel: '',
|
|
23
23
|
ariaRole: 'menuitem',
|
|
24
24
|
ariaLive: 'off',
|
|
25
|
-
ariaExpanded: undefined
|
|
25
|
+
ariaExpanded: undefined,
|
|
26
|
+
ariaDescribedBy: undefined
|
|
26
27
|
}; // Make use Item props with defaults
|
|
27
28
|
|
|
28
29
|
var usePropsWithDefaults = function usePropsWithDefaults(props) {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"usePropsWithDefaults.js","sources":["../../../../src/exported-related/ItemRenderer/usePropsWithDefaults.tsx"],"sourcesContent":["import { useMemo } from 'react';\nimport { itemOptsT, ItemRendererT } from '../../index.d';\n\nconst itemDefaultProps: itemOptsT = {\n label: '',\n labelOverflow: 'truncate',\n selectable: true,\n focuseable: true,\n openable: false,\n closable: false,\n ariaLabel: '',\n ariaRole: 'menuitem',\n ariaLive: 'off',\n ariaExpanded: undefined,\n};\n\n// Make use Item props with defaults\n\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: () => 'box-shadow: inherit',\n hasBorderBottom: false,\n borderBottomMr: '0px',\n ...props,\n item: itemWithDefaults,\n };\n }, [props]);\n\n return propsWithDefault;\n};\n"],"names":["itemDefaultProps","label","labelOverflow","selectable","focuseable","openable","closable","ariaLabel","ariaRole","ariaLive","ariaExpanded","undefined","usePropsWithDefaults","props","propsWithDefault","useMemo","itemWithDefaults","CollapsedComponent","item","itemOpts","minHeight","paddingTop","subitems","shadowStyle","hasBorderBottom","borderBottomMr"],"mappings":";;;;;;;;;;;;;;AAGA,IAAMA,gBAA2B,GAAG;AAClCC,EAAAA,KAAK,EAAE,EAD2B;AAElCC,EAAAA,aAAa,EAAE,UAFmB;AAGlCC,EAAAA,UAAU,EAAE,IAHsB;AAIlCC,EAAAA,UAAU,EAAE,IAJsB;AAKlCC,EAAAA,QAAQ,EAAE,KALwB;AAMlCC,EAAAA,QAAQ,EAAE,KANwB;AAOlCC,EAAAA,SAAS,EAAE,EAPuB;AAQlCC,EAAAA,QAAQ,EAAE,UARwB;AASlCC,EAAAA,QAAQ,EAAE,KATwB;AAUlCC,EAAAA,YAAY,EAAEC;
|
|
1
|
+
{"version":3,"file":"usePropsWithDefaults.js","sources":["../../../../src/exported-related/ItemRenderer/usePropsWithDefaults.tsx"],"sourcesContent":["import { useMemo } from 'react';\nimport { itemOptsT, ItemRendererT } from '../../index.d';\n\nconst itemDefaultProps: itemOptsT = {\n label: '',\n labelOverflow: 'truncate',\n selectable: true,\n focuseable: true,\n openable: false,\n closable: false,\n ariaLabel: '',\n ariaRole: 'menuitem',\n ariaLive: 'off',\n ariaExpanded: undefined,\n ariaDescribedBy: undefined,\n};\n\n// Make use Item props with defaults\n\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: () => 'box-shadow: inherit',\n hasBorderBottom: false,\n borderBottomMr: '0px',\n ...props,\n item: itemWithDefaults,\n };\n }, [props]);\n\n return propsWithDefault;\n};\n"],"names":["itemDefaultProps","label","labelOverflow","selectable","focuseable","openable","closable","ariaLabel","ariaRole","ariaLive","ariaExpanded","undefined","ariaDescribedBy","usePropsWithDefaults","props","propsWithDefault","useMemo","itemWithDefaults","CollapsedComponent","item","itemOpts","minHeight","paddingTop","subitems","shadowStyle","hasBorderBottom","borderBottomMr"],"mappings":";;;;;;;;;;;;;;AAGA,IAAMA,gBAA2B,GAAG;AAClCC,EAAAA,KAAK,EAAE,EAD2B;AAElCC,EAAAA,aAAa,EAAE,UAFmB;AAGlCC,EAAAA,UAAU,EAAE,IAHsB;AAIlCC,EAAAA,UAAU,EAAE,IAJsB;AAKlCC,EAAAA,QAAQ,EAAE,KALwB;AAMlCC,EAAAA,QAAQ,EAAE,KANwB;AAOlCC,EAAAA,SAAS,EAAE,EAPuB;AAQlCC,EAAAA,QAAQ,EAAE,UARwB;AASlCC,EAAAA,QAAQ,EAAE,KATwB;AAUlCC,EAAAA,YAAY,EAAEC,SAVoB;AAWlCC,EAAAA,eAAe,EAAED;AAXiB,CAApC;;IAgBaE,oBAAoB,GAAG,SAAvBA,oBAAuB,CAACC,KAAD,EAAyC;AAC3E,MAAMC,gBAAgB,GAAGC,aAAO,CAAC,YAAM;AACrC,QAAMC,gBAAgB;AACpBC,MAAAA,kBAAkB,EAAE;AAAA,eAAM,IAAN;AAAA;AADA,OAEjBJ,KAAK,CAACK,IAFW;AAGpBC,MAAAA,QAAQ,kCAAOpB,gBAAP,GAA4Bc,KAAK,CAACK,IAAN,CAAWC,QAAvC;AAHY,MAAtB;;AAKA;AACEC,MAAAA,SAAS,EAAE,MADb;AAEEC,MAAAA,UAAU,EAAE,MAFd;AAGEC,MAAAA,QAAQ,EAAE,EAHZ;AAIEC,MAAAA,WAAW,EAAE;AAAA,eAAM,qBAAN;AAAA,OAJf;AAKEC,MAAAA,eAAe,EAAE,KALnB;AAMEC,MAAAA,cAAc,EAAE;AANlB,OAOKZ,KAPL;AAQEK,MAAAA,IAAI,EAAEF;AARR;AAUD,GAhB+B,EAgB7B,CAACH,KAAD,CAhB6B,CAAhC;AAkBA,SAAOC,gBAAP;AACD;;;;"}
|
|
@@ -43,8 +43,7 @@ var ItemSection = function ItemSection(props) {
|
|
|
43
43
|
item: _objectSpread(_objectSpread({}, item), {}, {
|
|
44
44
|
itemOpts: _objectSpread(_objectSpread({}, item.itemOpts), {}, {
|
|
45
45
|
selectable: false,
|
|
46
|
-
focuseable: false
|
|
47
|
-
ariaLive: 'polite'
|
|
46
|
+
focuseable: false
|
|
48
47
|
}),
|
|
49
48
|
CollapsedComponent: null
|
|
50
49
|
}),
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":["../../../../src/outOfTheBox/ItemSection/index.tsx"],"sourcesContent":["import React from 'react';\nimport Grid from '@elliemae/ds-grid';\nimport { ItemRenderer } from '../../exported-related/index';\nimport type { ComponentProps } from '../../index.d';\nimport { StyledLabel, StyledRightLabel, StyledVerticalSeparator } from './styled';\n\nexport const ItemSection = (props: ComponentProps): JSX.Element => {\n const {\n item,\n item: {\n itemOpts: { label, LeftComponent, RightComponent, labelRightSection },\n },\n ctx,\n ctx: { setFocusedItem },\n } = props;\n\n return (\n <ItemRenderer\n item={{\n ...item,\n itemOpts: { ...item.itemOpts, selectable: false, focuseable: false
|
|
1
|
+
{"version":3,"file":"index.js","sources":["../../../../src/outOfTheBox/ItemSection/index.tsx"],"sourcesContent":["import React from 'react';\nimport Grid from '@elliemae/ds-grid';\nimport { ItemRenderer } from '../../exported-related/index';\nimport type { ComponentProps } from '../../index.d';\nimport { StyledLabel, StyledRightLabel, StyledVerticalSeparator } from './styled';\n\nexport const ItemSection = (props: ComponentProps): JSX.Element => {\n const {\n item,\n item: {\n itemOpts: { label, LeftComponent, RightComponent, labelRightSection },\n },\n ctx,\n ctx: { setFocusedItem },\n } = props;\n\n return (\n <ItemRenderer\n item={{\n ...item,\n itemOpts: { ...item.itemOpts, selectable: false, focuseable: false },\n CollapsedComponent: null,\n }}\n minHeight=\"32px\"\n paddingTop=\"8px\"\n >\n <Grid cols={['min-content', 'auto', 'min-content', 'auto']} pl=\"xxs\" alignItems=\"center\">\n {LeftComponent ? <LeftComponent ctx={ctx} item={item} /> : <div />}\n <StyledLabel>{label}</StyledLabel>\n <StyledVerticalSeparator />\n <StyledRightLabel>{labelRightSection}</StyledRightLabel>\n </Grid>\n <Grid\n ml=\"auto\"\n onFocus={(e) => {\n setFocusedItem(null);\n e.stopPropagation();\n }}\n onKeyDown={(e) => e.stopPropagation()}\n pr=\"xxs2\"\n alignItems=\"center\"\n data-testid=\"leftnav-right-component\"\n >\n {RightComponent && <RightComponent ctx={ctx} item={item} />}\n </Grid>\n </ItemRenderer>\n );\n};\n"],"names":["ItemSection","props","item","itemOpts","label","LeftComponent","RightComponent","labelRightSection","ctx","setFocusedItem","React","ItemRenderer","selectable","focuseable","CollapsedComponent","Grid","StyledLabel","StyledVerticalSeparator","StyledRightLabel","e","stopPropagation"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAMaA,WAAW,GAAG,SAAdA,WAAc,CAACC,KAAD,EAAwC;AACjE,MACEC,IADF,GAOID,KAPJ,CACEC,IADF;AAAA,6BAOID,KAPJ,CAEEC,IAFF,CAGIC,QAHJ;AAAA,MAGgBC,KAHhB,wBAGgBA,KAHhB;AAAA,MAGuBC,aAHvB,wBAGuBA,aAHvB;AAAA,MAGsCC,cAHtC,wBAGsCA,cAHtC;AAAA,MAGsDC,iBAHtD,wBAGsDA,iBAHtD;AAAA,MAKEC,GALF,GAOIP,KAPJ,CAKEO,GALF;AAAA,MAMSC,cANT,GAOIR,KAPJ,CAMEO,GANF,CAMSC,cANT;AASA,sBACEC,wCAACC,+CAAD;AACE,IAAA,IAAI,kCACCT,IADD;AAEFC,MAAAA,QAAQ,kCAAOD,IAAI,CAACC,QAAZ;AAAsBS,QAAAA,UAAU,EAAE,KAAlC;AAAyCC,QAAAA,UAAU,EAAE;AAArD,QAFN;AAGFC,MAAAA,kBAAkB,EAAE;AAHlB,MADN;AAME,IAAA,SAAS,EAAC,MANZ;AAOE,IAAA,UAAU,EAAC;AAPb,kBASEJ,wCAACK,wBAAD;AAAM,IAAA,IAAI,EAAE,CAAC,aAAD,EAAgB,MAAhB,EAAwB,aAAxB,EAAuC,MAAvC,CAAZ;AAA4D,IAAA,EAAE,EAAC,KAA/D;AAAqE,IAAA,UAAU,EAAC;AAAhF,KACGV,aAAa,gBAAGK,wCAAC,aAAD;AAAe,IAAA,GAAG,EAAEF,GAApB;AAAyB,IAAA,IAAI,EAAEN;AAA/B,IAAH,gBAA6CQ,oDAD7D,eAEEA,wCAACM,0CAAD,QAAcZ,KAAd,CAFF,eAGEM,wCAACO,sDAAD,OAHF,eAIEP,wCAACQ,+CAAD,QAAmBX,iBAAnB,CAJF,CATF,eAeEG,wCAACK,wBAAD;AACE,IAAA,EAAE,EAAC,MADL;AAEE,IAAA,OAAO,EAAE,iBAACI,CAAD,EAAO;AACdV,MAAAA,cAAc,CAAC,IAAD,CAAd;AACAU,MAAAA,CAAC,CAACC,eAAF;AACD,KALH;AAME,IAAA,SAAS,EAAE,mBAACD,CAAD;AAAA,aAAOA,CAAC,CAACC,eAAF,EAAP;AAAA,KANb;AAOE,IAAA,EAAE,EAAC,MAPL;AAQE,IAAA,UAAU,EAAC,QARb;AASE,mBAAY;AATd,KAWGd,cAAc,iBAAII,wCAAC,cAAD;AAAgB,IAAA,GAAG,EAAEF,GAArB;AAA0B,IAAA,IAAI,EAAEN;AAAhC,IAXrB,CAfF,CADF;AA+BD;;;;"}
|
|
@@ -22,6 +22,7 @@ var ItemRenderer = function ItemRenderer(props) {
|
|
|
22
22
|
ariaRole = _propsWithDefault$ite2.ariaRole,
|
|
23
23
|
ariaLive = _propsWithDefault$ite2.ariaLive,
|
|
24
24
|
ariaExpanded = _propsWithDefault$ite2.ariaExpanded,
|
|
25
|
+
ariaDescribedBy = _propsWithDefault$ite2.ariaDescribedBy,
|
|
25
26
|
CollapsedComponent = _propsWithDefault$ite.CollapsedComponent,
|
|
26
27
|
subitems = propsWithDefault.subitems,
|
|
27
28
|
minHeight = propsWithDefault.minHeight,
|
|
@@ -93,6 +94,7 @@ var ItemRenderer = function ItemRenderer(props) {
|
|
|
93
94
|
onFocus: handleFocus,
|
|
94
95
|
"data-testid": "leftnav-item-container",
|
|
95
96
|
tabIndex: focuseable ? 0 : -1,
|
|
97
|
+
"aria-describedby": ariaDescribedBy,
|
|
96
98
|
"aria-expanded": ariaExpanded,
|
|
97
99
|
role: ariaRole,
|
|
98
100
|
"aria-label": ariaLabel,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":["../../../../src/exported-related/ItemRenderer/index.tsx"],"sourcesContent":["/* eslint-disable complexity */\n/* eslint-disable max-lines */\nimport React, { useContext, useMemo, useCallback } from 'react';\nimport Grid from '@elliemae/ds-grid';\nimport { StyledItemWrapper, StyledItem } from './styled';\n\nimport { ItemRendererT } from '../../index.d';\nimport { LeftNavContext } from '../../LeftNavigationContext';\nimport { usePropsWithDefaults } from './usePropsWithDefaults';\nimport { useKeyboardNavigation } from '../../hooks';\n\nexport const ItemRenderer = (props: ItemRendererT): JSX.Element => {\n const propsWithDefault = usePropsWithDefaults(props);\n const {\n item,\n item: {\n dsId,\n itemOpts: { selectable, focuseable, indent, ariaLabel, ariaRole, ariaLive, ariaExpanded },\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 focusedByKey,\n selectedItem,\n setSelectedItem,\n focusedItem,\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 const isFocused = useMemo(() => focusedItem === dsId, [focusedItem, dsId]);\n\n if (!expandedForAnimation && !CollapsedComponent) {\n return null;\n }\n\n return (\n <>\n <StyledItemWrapper shadowStyle={shadowStyle} 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}\n alignItems=\"flex-start\"\n cols={cols}\n onClick={!opened ? handleOnClick : () => null}\n onKeyDown={onKeyDown}\n selectable={selectable}\n selected={isSelected}\n opened={opened}\n focused={isFocused}\n focusedByKey={focusedByKey}\n onFocus={handleFocus}\n data-testid=\"leftnav-item-container\"\n tabIndex={focuseable ? 0 : -1}\n aria-expanded={ariaExpanded}\n role={ariaRole}\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"],"names":["ItemRenderer","props","propsWithDefault","usePropsWithDefaults","item","dsId","itemOpts","selectable","focuseable","indent","ariaLabel","ariaRole","ariaLive","ariaExpanded","CollapsedComponent","subitems","minHeight","paddingTop","onClick","shadowStyle","hasBorderBottom","borderBottomMr","children","ctx","useContext","LeftNavContext","leftNavProps","onItemClick","openedItem","expandedForAnimation","focusedByKey","selectedItem","setSelectedItem","focusedItem","setFocusedItem","visibleItemsRefs","opened","handleOnClick","useCallback","e","handleFocus","onKeyDown","useKeyboardNavigation","cols","useMemo","isSelected","isFocused","current","undefined","marginLeft","marginRight","height","width","backgroundColor"],"mappings":";;;;;;;;;;AAAA;IAWaA,YAAY,GAAG,SAAfA,YAAe,CAACC,KAAD,EAAuC;AACjE,MAAMC,gBAAgB,GAAGC,oBAAoB,CAACF,KAAD,CAA7C;AACA,MACEG,IADF,GAeIF,gBAfJ,CACEE,IADF;AAAA,8BAeIF,gBAfJ,CAEEE,IAFF;AAAA,MAGIC,IAHJ,yBAGIA,IAHJ;AAAA,qDAIIC,QAJJ;AAAA,MAIgBC,UAJhB,0BAIgBA,UAJhB;AAAA,MAI4BC,UAJ5B,0BAI4BA,UAJ5B;AAAA,MAIwCC,MAJxC,0BAIwCA,MAJxC;AAAA,MAIgDC,SAJhD,0BAIgDA,SAJhD;AAAA,MAI2DC,QAJ3D,0BAI2DA,QAJ3D;AAAA,MAIqEC,QAJrE,0BAIqEA,QAJrE;AAAA,MAI+EC,YAJ/E,0BAI+EA,YAJ/E;AAAA,MAKIC,kBALJ,yBAKIA,kBALJ;AAAA,MAOEC,QAPF,
|
|
1
|
+
{"version":3,"file":"index.js","sources":["../../../../src/exported-related/ItemRenderer/index.tsx"],"sourcesContent":["/* eslint-disable complexity */\n/* eslint-disable max-lines */\nimport React, { useContext, useMemo, useCallback } from 'react';\nimport Grid from '@elliemae/ds-grid';\nimport { StyledItemWrapper, StyledItem } from './styled';\n\nimport { ItemRendererT } from '../../index.d';\nimport { LeftNavContext } from '../../LeftNavigationContext';\nimport { usePropsWithDefaults } from './usePropsWithDefaults';\nimport { useKeyboardNavigation } from '../../hooks';\n\nexport const ItemRenderer = (props: ItemRendererT): JSX.Element => {\n const propsWithDefault = usePropsWithDefaults(props);\n const {\n item,\n item: {\n dsId,\n itemOpts: { selectable, focuseable, indent, ariaLabel, ariaRole, ariaLive, ariaExpanded, ariaDescribedBy },\n CollapsedComponent,\n },\n subitems,\n minHeight,\n paddingTop,\n onClick,\n shadowStyle,\n hasBorderBottom,\n borderBottomMr,\n children,\n } = propsWithDefault;\n\n const ctx = useContext(LeftNavContext);\n const {\n leftNavProps: { onItemClick, openedItem },\n expandedForAnimation,\n focusedByKey,\n selectedItem,\n setSelectedItem,\n focusedItem,\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 const isFocused = useMemo(() => focusedItem === dsId, [focusedItem, dsId]);\n\n if (!expandedForAnimation && !CollapsedComponent) {\n return null;\n }\n\n return (\n <>\n <StyledItemWrapper shadowStyle={shadowStyle} 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}\n alignItems=\"flex-start\"\n cols={cols}\n onClick={!opened ? handleOnClick : () => null}\n onKeyDown={onKeyDown}\n selectable={selectable}\n selected={isSelected}\n opened={opened}\n focused={isFocused}\n focusedByKey={focusedByKey}\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 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"],"names":["ItemRenderer","props","propsWithDefault","usePropsWithDefaults","item","dsId","itemOpts","selectable","focuseable","indent","ariaLabel","ariaRole","ariaLive","ariaExpanded","ariaDescribedBy","CollapsedComponent","subitems","minHeight","paddingTop","onClick","shadowStyle","hasBorderBottom","borderBottomMr","children","ctx","useContext","LeftNavContext","leftNavProps","onItemClick","openedItem","expandedForAnimation","focusedByKey","selectedItem","setSelectedItem","focusedItem","setFocusedItem","visibleItemsRefs","opened","handleOnClick","useCallback","e","handleFocus","onKeyDown","useKeyboardNavigation","cols","useMemo","isSelected","isFocused","current","undefined","marginLeft","marginRight","height","width","backgroundColor"],"mappings":"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"}
|
|
@@ -14,7 +14,8 @@ var itemDefaultProps = {
|
|
|
14
14
|
ariaLabel: '',
|
|
15
15
|
ariaRole: 'menuitem',
|
|
16
16
|
ariaLive: 'off',
|
|
17
|
-
ariaExpanded: undefined
|
|
17
|
+
ariaExpanded: undefined,
|
|
18
|
+
ariaDescribedBy: undefined
|
|
18
19
|
}; // Make use Item props with defaults
|
|
19
20
|
|
|
20
21
|
var usePropsWithDefaults = function usePropsWithDefaults(props) {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"usePropsWithDefaults.js","sources":["../../../../src/exported-related/ItemRenderer/usePropsWithDefaults.tsx"],"sourcesContent":["import { useMemo } from 'react';\nimport { itemOptsT, ItemRendererT } from '../../index.d';\n\nconst itemDefaultProps: itemOptsT = {\n label: '',\n labelOverflow: 'truncate',\n selectable: true,\n focuseable: true,\n openable: false,\n closable: false,\n ariaLabel: '',\n ariaRole: 'menuitem',\n ariaLive: 'off',\n ariaExpanded: undefined,\n};\n\n// Make use Item props with defaults\n\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: () => 'box-shadow: inherit',\n hasBorderBottom: false,\n borderBottomMr: '0px',\n ...props,\n item: itemWithDefaults,\n };\n }, [props]);\n\n return propsWithDefault;\n};\n"],"names":["itemDefaultProps","label","labelOverflow","selectable","focuseable","openable","closable","ariaLabel","ariaRole","ariaLive","ariaExpanded","undefined","usePropsWithDefaults","props","propsWithDefault","useMemo","itemWithDefaults","CollapsedComponent","item","itemOpts","minHeight","paddingTop","subitems","shadowStyle","hasBorderBottom","borderBottomMr"],"mappings":";;;;;;AAGA,IAAMA,gBAA2B,GAAG;AAClCC,EAAAA,KAAK,EAAE,EAD2B;AAElCC,EAAAA,aAAa,EAAE,UAFmB;AAGlCC,EAAAA,UAAU,EAAE,IAHsB;AAIlCC,EAAAA,UAAU,EAAE,IAJsB;AAKlCC,EAAAA,QAAQ,EAAE,KALwB;AAMlCC,EAAAA,QAAQ,EAAE,KANwB;AAOlCC,EAAAA,SAAS,EAAE,EAPuB;AAQlCC,EAAAA,QAAQ,EAAE,UARwB;AASlCC,EAAAA,QAAQ,EAAE,KATwB;AAUlCC,EAAAA,YAAY,EAAEC;
|
|
1
|
+
{"version":3,"file":"usePropsWithDefaults.js","sources":["../../../../src/exported-related/ItemRenderer/usePropsWithDefaults.tsx"],"sourcesContent":["import { useMemo } from 'react';\nimport { itemOptsT, ItemRendererT } from '../../index.d';\n\nconst itemDefaultProps: itemOptsT = {\n label: '',\n labelOverflow: 'truncate',\n selectable: true,\n focuseable: true,\n openable: false,\n closable: false,\n ariaLabel: '',\n ariaRole: 'menuitem',\n ariaLive: 'off',\n ariaExpanded: undefined,\n ariaDescribedBy: undefined,\n};\n\n// Make use Item props with defaults\n\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: () => 'box-shadow: inherit',\n hasBorderBottom: false,\n borderBottomMr: '0px',\n ...props,\n item: itemWithDefaults,\n };\n }, [props]);\n\n return propsWithDefault;\n};\n"],"names":["itemDefaultProps","label","labelOverflow","selectable","focuseable","openable","closable","ariaLabel","ariaRole","ariaLive","ariaExpanded","undefined","ariaDescribedBy","usePropsWithDefaults","props","propsWithDefault","useMemo","itemWithDefaults","CollapsedComponent","item","itemOpts","minHeight","paddingTop","subitems","shadowStyle","hasBorderBottom","borderBottomMr"],"mappings":";;;;;;AAGA,IAAMA,gBAA2B,GAAG;AAClCC,EAAAA,KAAK,EAAE,EAD2B;AAElCC,EAAAA,aAAa,EAAE,UAFmB;AAGlCC,EAAAA,UAAU,EAAE,IAHsB;AAIlCC,EAAAA,UAAU,EAAE,IAJsB;AAKlCC,EAAAA,QAAQ,EAAE,KALwB;AAMlCC,EAAAA,QAAQ,EAAE,KANwB;AAOlCC,EAAAA,SAAS,EAAE,EAPuB;AAQlCC,EAAAA,QAAQ,EAAE,UARwB;AASlCC,EAAAA,QAAQ,EAAE,KATwB;AAUlCC,EAAAA,YAAY,EAAEC,SAVoB;AAWlCC,EAAAA,eAAe,EAAED;AAXiB,CAApC;;IAgBaE,oBAAoB,GAAG,SAAvBA,oBAAuB,CAACC,KAAD,EAAyC;AAC3E,MAAMC,gBAAgB,GAAGC,OAAO,CAAC,YAAM;AACrC,QAAMC,gBAAgB;AACpBC,MAAAA,kBAAkB,EAAE;AAAA,eAAM,IAAN;AAAA;AADA,OAEjBJ,KAAK,CAACK,IAFW;AAGpBC,MAAAA,QAAQ,kCAAOpB,gBAAP,GAA4Bc,KAAK,CAACK,IAAN,CAAWC,QAAvC;AAHY,MAAtB;;AAKA;AACEC,MAAAA,SAAS,EAAE,MADb;AAEEC,MAAAA,UAAU,EAAE,MAFd;AAGEC,MAAAA,QAAQ,EAAE,EAHZ;AAIEC,MAAAA,WAAW,EAAE;AAAA,eAAM,qBAAN;AAAA,OAJf;AAKEC,MAAAA,eAAe,EAAE,KALnB;AAMEC,MAAAA,cAAc,EAAE;AANlB,OAOKZ,KAPL;AAQEK,MAAAA,IAAI,EAAEF;AARR;AAUD,GAhB+B,EAgB7B,CAACH,KAAD,CAhB6B,CAAhC;AAkBA,SAAOC,gBAAP;AACD;;;;"}
|
|
@@ -33,8 +33,7 @@ var ItemSection = function ItemSection(props) {
|
|
|
33
33
|
item: _objectSpread(_objectSpread({}, item), {}, {
|
|
34
34
|
itemOpts: _objectSpread(_objectSpread({}, item.itemOpts), {}, {
|
|
35
35
|
selectable: false,
|
|
36
|
-
focuseable: false
|
|
37
|
-
ariaLive: 'polite'
|
|
36
|
+
focuseable: false
|
|
38
37
|
}),
|
|
39
38
|
CollapsedComponent: null
|
|
40
39
|
}),
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":["../../../../src/outOfTheBox/ItemSection/index.tsx"],"sourcesContent":["import React from 'react';\nimport Grid from '@elliemae/ds-grid';\nimport { ItemRenderer } from '../../exported-related/index';\nimport type { ComponentProps } from '../../index.d';\nimport { StyledLabel, StyledRightLabel, StyledVerticalSeparator } from './styled';\n\nexport const ItemSection = (props: ComponentProps): JSX.Element => {\n const {\n item,\n item: {\n itemOpts: { label, LeftComponent, RightComponent, labelRightSection },\n },\n ctx,\n ctx: { setFocusedItem },\n } = props;\n\n return (\n <ItemRenderer\n item={{\n ...item,\n itemOpts: { ...item.itemOpts, selectable: false, focuseable: false
|
|
1
|
+
{"version":3,"file":"index.js","sources":["../../../../src/outOfTheBox/ItemSection/index.tsx"],"sourcesContent":["import React from 'react';\nimport Grid from '@elliemae/ds-grid';\nimport { ItemRenderer } from '../../exported-related/index';\nimport type { ComponentProps } from '../../index.d';\nimport { StyledLabel, StyledRightLabel, StyledVerticalSeparator } from './styled';\n\nexport const ItemSection = (props: ComponentProps): JSX.Element => {\n const {\n item,\n item: {\n itemOpts: { label, LeftComponent, RightComponent, labelRightSection },\n },\n ctx,\n ctx: { setFocusedItem },\n } = props;\n\n return (\n <ItemRenderer\n item={{\n ...item,\n itemOpts: { ...item.itemOpts, selectable: false, focuseable: false },\n CollapsedComponent: null,\n }}\n minHeight=\"32px\"\n paddingTop=\"8px\"\n >\n <Grid cols={['min-content', 'auto', 'min-content', 'auto']} pl=\"xxs\" alignItems=\"center\">\n {LeftComponent ? <LeftComponent ctx={ctx} item={item} /> : <div />}\n <StyledLabel>{label}</StyledLabel>\n <StyledVerticalSeparator />\n <StyledRightLabel>{labelRightSection}</StyledRightLabel>\n </Grid>\n <Grid\n ml=\"auto\"\n onFocus={(e) => {\n setFocusedItem(null);\n e.stopPropagation();\n }}\n onKeyDown={(e) => e.stopPropagation()}\n pr=\"xxs2\"\n alignItems=\"center\"\n data-testid=\"leftnav-right-component\"\n >\n {RightComponent && <RightComponent ctx={ctx} item={item} />}\n </Grid>\n </ItemRenderer>\n );\n};\n"],"names":["ItemSection","props","item","itemOpts","label","LeftComponent","RightComponent","labelRightSection","ctx","setFocusedItem","selectable","focuseable","CollapsedComponent","e","stopPropagation"],"mappings":";;;;;;;;;;;;;;;;;;;;;;IAMaA,WAAW,GAAG,SAAdA,WAAc,CAACC,KAAD,EAAwC;AACjE,MACEC,IADF,GAOID,KAPJ,CACEC,IADF;AAAA,6BAOID,KAPJ,CAEEC,IAFF,CAGIC,QAHJ;AAAA,MAGgBC,KAHhB,wBAGgBA,KAHhB;AAAA,MAGuBC,aAHvB,wBAGuBA,aAHvB;AAAA,MAGsCC,cAHtC,wBAGsCA,cAHtC;AAAA,MAGsDC,iBAHtD,wBAGsDA,iBAHtD;AAAA,MAKEC,GALF,GAOIP,KAPJ,CAKEO,GALF;AAAA,MAMSC,cANT,GAOIR,KAPJ,CAMEO,GANF,CAMSC,cANT;AASA,sBACE,oBAAC,YAAD;AACE,IAAA,IAAI,kCACCP,IADD;AAEFC,MAAAA,QAAQ,kCAAOD,IAAI,CAACC,QAAZ;AAAsBO,QAAAA,UAAU,EAAE,KAAlC;AAAyCC,QAAAA,UAAU,EAAE;AAArD,QAFN;AAGFC,MAAAA,kBAAkB,EAAE;AAHlB,MADN;AAME,IAAA,SAAS,EAAC,MANZ;AAOE,IAAA,UAAU,EAAC;AAPb,kBASE,oBAAC,IAAD;AAAM,IAAA,IAAI,EAAE,CAAC,aAAD,EAAgB,MAAhB,EAAwB,aAAxB,EAAuC,MAAvC,CAAZ;AAA4D,IAAA,EAAE,EAAC,KAA/D;AAAqE,IAAA,UAAU,EAAC;AAAhF,KACGP,aAAa,gBAAG,oBAAC,aAAD;AAAe,IAAA,GAAG,EAAEG,GAApB;AAAyB,IAAA,IAAI,EAAEN;AAA/B,IAAH,gBAA6C,gCAD7D,eAEE,oBAAC,WAAD,QAAcE,KAAd,CAFF,eAGE,oBAAC,uBAAD,OAHF,eAIE,oBAAC,gBAAD,QAAmBG,iBAAnB,CAJF,CATF,eAeE,oBAAC,IAAD;AACE,IAAA,EAAE,EAAC,MADL;AAEE,IAAA,OAAO,EAAE,iBAACM,CAAD,EAAO;AACdJ,MAAAA,cAAc,CAAC,IAAD,CAAd;AACAI,MAAAA,CAAC,CAACC,eAAF;AACD,KALH;AAME,IAAA,SAAS,EAAE,mBAACD,CAAD;AAAA,aAAOA,CAAC,CAACC,eAAF,EAAP;AAAA,KANb;AAOE,IAAA,EAAE,EAAC,MAPL;AAQE,IAAA,UAAU,EAAC,QARb;AASE,mBAAY;AATd,KAWGR,cAAc,iBAAI,oBAAC,cAAD;AAAgB,IAAA,GAAG,EAAEE,GAArB;AAA0B,IAAA,IAAI,EAAEN;AAAhC,IAXrB,CAfF,CADF;AA+BD;;;;"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@elliemae/ds-left-navigation",
|
|
3
|
-
"version": "1.55.0-
|
|
3
|
+
"version": "1.55.0-rc.1",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"description": "Ellie Mae - Dim Sum - Left Navigation",
|
|
6
6
|
"main": "cjs/index.js",
|
|
@@ -16,12 +16,14 @@
|
|
|
16
16
|
"directory": "dist"
|
|
17
17
|
},
|
|
18
18
|
"dependencies": {
|
|
19
|
-
"@elliemae/ds-basic": "1.55.0-
|
|
20
|
-
"@elliemae/ds-
|
|
21
|
-
"@elliemae/ds-
|
|
19
|
+
"@elliemae/ds-basic": "1.55.0-rc.1",
|
|
20
|
+
"@elliemae/ds-grid": "1.55.0-rc.1",
|
|
21
|
+
"@elliemae/ds-icons": "1.55.0-rc.1",
|
|
22
|
+
"@elliemae/ds-system": "1.55.0-rc.1",
|
|
23
|
+
"@elliemae/ds-truncated-tooltip-text": "1.55.0-rc.1",
|
|
24
|
+
"overlayscrollbars": "1.13.1",
|
|
22
25
|
"prop-types": "~15.7.2",
|
|
23
|
-
"react-
|
|
24
|
-
"tree-model": "^1.0.7"
|
|
26
|
+
"react-desc": "^4.1.2"
|
|
25
27
|
},
|
|
26
28
|
"devDependencies": {
|
|
27
29
|
"styled-components": "~5.3.0"
|