@elliemae/ds-left-navigation 3.16.0-next.16 → 3.16.0-next.18
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/exported-related/ChevronItem/index.js +1 -1
- package/dist/cjs/exported-related/ChevronItem/index.js.map +2 -2
- package/dist/cjs/exported-related/Icon/index.js +1 -1
- package/dist/cjs/exported-related/Icon/index.js.map +2 -2
- package/dist/cjs/exported-related/ItemRenderer/index.js +2 -3
- package/dist/cjs/exported-related/ItemRenderer/index.js.map +2 -2
- package/dist/cjs/exported-related/ItemRenderer/usePropsWithDefaults.js +1 -2
- package/dist/cjs/exported-related/ItemRenderer/usePropsWithDefaults.js.map +2 -2
- package/dist/cjs/exported-related/OpenWindowItem/index.js +1 -1
- package/dist/cjs/exported-related/OpenWindowItem/index.js.map +2 -2
- package/dist/cjs/outOfTheBox/ItemHeader/index.js +4 -5
- package/dist/cjs/outOfTheBox/ItemHeader/index.js.map +2 -2
- package/dist/cjs/outOfTheBox/ItemLink/index.js +0 -1
- package/dist/cjs/outOfTheBox/ItemLink/index.js.map +2 -2
- package/dist/cjs/outOfTheBox/ItemSeparator/index.js +1 -0
- package/dist/cjs/outOfTheBox/ItemSeparator/index.js.map +2 -2
- package/dist/cjs/outOfTheBox/ItemSubmenu/index.js +4 -4
- package/dist/cjs/outOfTheBox/ItemSubmenu/index.js.map +2 -2
- package/dist/cjs/outOfTheBox/styled.js +3 -3
- package/dist/cjs/outOfTheBox/styled.js.map +2 -2
- package/dist/cjs/parts/LeftNavContent/index.js +6 -3
- package/dist/cjs/parts/LeftNavContent/index.js.map +2 -2
- package/dist/cjs/parts/LeftNavFooterItem/index.js +4 -4
- package/dist/cjs/parts/LeftNavFooterItem/index.js.map +2 -2
- package/dist/cjs/parts/LeftNavFooterItem/styled.js +4 -4
- package/dist/cjs/parts/LeftNavFooterItem/styled.js.map +2 -2
- package/dist/cjs/parts/LeftNavLoading/index.js +7 -9
- package/dist/cjs/parts/LeftNavLoading/index.js.map +3 -3
- package/dist/esm/exported-related/ChevronItem/index.js +1 -1
- package/dist/esm/exported-related/ChevronItem/index.js.map +2 -2
- package/dist/esm/exported-related/Icon/index.js +1 -1
- package/dist/esm/exported-related/Icon/index.js.map +2 -2
- package/dist/esm/exported-related/ItemRenderer/index.js +2 -3
- package/dist/esm/exported-related/ItemRenderer/index.js.map +2 -2
- package/dist/esm/exported-related/ItemRenderer/usePropsWithDefaults.js +1 -2
- package/dist/esm/exported-related/ItemRenderer/usePropsWithDefaults.js.map +2 -2
- package/dist/esm/exported-related/OpenWindowItem/index.js +1 -1
- package/dist/esm/exported-related/OpenWindowItem/index.js.map +2 -2
- package/dist/esm/outOfTheBox/ItemHeader/index.js +6 -7
- package/dist/esm/outOfTheBox/ItemHeader/index.js.map +2 -2
- package/dist/esm/outOfTheBox/ItemLink/index.js +0 -1
- package/dist/esm/outOfTheBox/ItemLink/index.js.map +2 -2
- package/dist/esm/outOfTheBox/ItemSeparator/index.js +1 -0
- package/dist/esm/outOfTheBox/ItemSeparator/index.js.map +2 -2
- package/dist/esm/outOfTheBox/ItemSubmenu/index.js +6 -6
- package/dist/esm/outOfTheBox/ItemSubmenu/index.js.map +2 -2
- package/dist/esm/outOfTheBox/styled.js +3 -3
- package/dist/esm/outOfTheBox/styled.js.map +2 -2
- package/dist/esm/parts/LeftNavContent/index.js +6 -3
- package/dist/esm/parts/LeftNavContent/index.js.map +2 -2
- package/dist/esm/parts/LeftNavFooterItem/index.js +5 -5
- package/dist/esm/parts/LeftNavFooterItem/index.js.map +2 -2
- package/dist/esm/parts/LeftNavFooterItem/styled.js +4 -4
- package/dist/esm/parts/LeftNavFooterItem/styled.js.map +2 -2
- package/dist/esm/parts/LeftNavLoading/index.js +7 -9
- package/dist/esm/parts/LeftNavLoading/index.js.map +2 -2
- package/dist/types/outOfTheBox/styled.d.ts +1 -1
- package/dist/types/parts/LeftNavFooterItem/styled.d.ts +1 -1
- package/dist/types/tests/a11y/axe-collapsed.test.d.ts +1 -0
- package/dist/types/tests/a11y/axe-expanded.test.d.ts +1 -0
- package/dist/types/tests/a11y/axe-opened.test.d.ts +1 -0
- package/package.json +9 -8
|
@@ -26,15 +26,17 @@ const LeftNavInnerContent = () => {
|
|
|
26
26
|
{
|
|
27
27
|
"data-testid": "leftnav-header-area",
|
|
28
28
|
selected: !!HeaderComponent && [selectedItem, openedItem].includes(HeaderComponent.dsId),
|
|
29
|
+
role: "group",
|
|
29
30
|
children: HeaderComponent ? /* @__PURE__ */ jsx(OutOfTheBoxMapItem, { item: HeaderComponent }) : null
|
|
30
31
|
}
|
|
31
32
|
),
|
|
32
|
-
/* @__PURE__ */ jsxs(StyledLeftNavBodyAreasContainer, { cols: ["1fr"], rows: ["auto", "1fr"], children: [
|
|
33
|
+
/* @__PURE__ */ jsxs(StyledLeftNavBodyAreasContainer, { cols: ["1fr"], rows: ["auto", "1fr"], role: "group", children: [
|
|
33
34
|
/* @__PURE__ */ jsx(
|
|
34
35
|
StyledLeftNavBodyHeaderArea,
|
|
35
36
|
{
|
|
36
37
|
"data-testid": "leftnav-body-header-area",
|
|
37
38
|
selected: !!BodyHeaderComponent && [selectedItem, openedItem].includes(BodyHeaderComponent.dsId),
|
|
39
|
+
role: "group",
|
|
38
40
|
children: BodyHeaderComponent ? /* @__PURE__ */ jsx(OutOfTheBoxMapItem, { item: BodyHeaderComponent }) : null
|
|
39
41
|
}
|
|
40
42
|
),
|
|
@@ -44,6 +46,7 @@ const LeftNavInnerContent = () => {
|
|
|
44
46
|
selected: !withoutBodyShadow && openedItem !== null,
|
|
45
47
|
"data-testid": "leftnav-body-items-area",
|
|
46
48
|
tabIndex: -1,
|
|
49
|
+
role: "group",
|
|
47
50
|
children: items.map((item) => /* @__PURE__ */ jsx(OutOfTheBoxMapItem, { item }, item.dsId))
|
|
48
51
|
}
|
|
49
52
|
)
|
|
@@ -64,15 +67,15 @@ const LeftNavContent = () => {
|
|
|
64
67
|
expanded,
|
|
65
68
|
"data-testid": "leftnav-component",
|
|
66
69
|
"aria-label": leftNavScreenReaderInstructions,
|
|
67
|
-
role: "menu",
|
|
68
70
|
...globalProps,
|
|
69
71
|
children: /* @__PURE__ */ jsxs(
|
|
70
72
|
StyledLeftNavAreasContainer,
|
|
71
73
|
{
|
|
72
74
|
expandedWidth,
|
|
73
75
|
expanded: expandedForAnimation,
|
|
74
|
-
rows: ["auto", "1fr", "auto"],
|
|
76
|
+
rows: loading ? ["1fr", "auto"] : ["auto", "1fr", "auto"],
|
|
75
77
|
cols: ["1fr"],
|
|
78
|
+
role: "menu",
|
|
76
79
|
children: [
|
|
77
80
|
loading && /* @__PURE__ */ jsx(LeftNavLoading, { expanded: expandedForAnimation }),
|
|
78
81
|
!loading && /* @__PURE__ */ jsx(LeftNavInnerContent, {}),
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/LeftNavContent/index.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport { useGetGlobalAttributes } from '@elliemae/ds-props-helpers';\nimport { LeftNavContext } from '../../LeftNavigationContext.js';\nimport { LeftNavFooterItem } from '../LeftNavFooterItem/index.js';\nimport { OutOfTheBoxMapItem } from '../OutOfTheBoxMapItem.js';\nimport {\n StyledLeftNavExpandAnimationWrapper,\n StyledLeftNavAreasContainer,\n StyledLeftNavHeaderArea,\n StyledLeftNavBodyAreasContainer,\n StyledLeftNavBodyHeaderArea,\n StyledLeftNavBodyItemsArea,\n
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport { useGetGlobalAttributes } from '@elliemae/ds-props-helpers';\nimport { LeftNavContext } from '../../LeftNavigationContext.js';\nimport { LeftNavFooterItem } from '../LeftNavFooterItem/index.js';\nimport { OutOfTheBoxMapItem } from '../OutOfTheBoxMapItem.js';\nimport {\n StyledLeftNavExpandAnimationWrapper,\n StyledLeftNavAreasContainer,\n StyledLeftNavHeaderArea,\n StyledLeftNavBodyAreasContainer,\n StyledLeftNavBodyHeaderArea,\n StyledLeftNavBodyItemsArea,\n} from './styled.js';\nimport { LeftNavLoading } from '../LeftNavLoading/index.js';\n\nconst leftNavScreenReaderInstructions =\n 'Left Navigation. You can navigate through the items using the Up/Down arrows. ' +\n 'To expand or select an item, use the Enter/Return or Space keys. ' +\n 'Expandable items can also be opened/closed with the Right/Left arrows. ' +\n 'The Home and End keys will take you to the first and last item respectively.';\n\nconst LeftNavInnerContent = () => {\n const {\n leftNavProps: { HeaderComponent, BodyHeaderComponent, openedItem, items, withoutBodyShadow },\n selectedItem,\n } = React.useContext(LeftNavContext);\n return (\n <>\n <StyledLeftNavHeaderArea\n data-testid=\"leftnav-header-area\"\n selected={!!HeaderComponent && [selectedItem, openedItem].includes(HeaderComponent.dsId as string)}\n role=\"group\"\n >\n {HeaderComponent ? <OutOfTheBoxMapItem item={HeaderComponent} /> : null}\n </StyledLeftNavHeaderArea>\n <StyledLeftNavBodyAreasContainer cols={['1fr']} rows={['auto', '1fr']} role=\"group\">\n <StyledLeftNavBodyHeaderArea\n data-testid=\"leftnav-body-header-area\"\n selected={!!BodyHeaderComponent && [selectedItem, openedItem].includes(BodyHeaderComponent.dsId as string)}\n role=\"group\"\n >\n {BodyHeaderComponent ? <OutOfTheBoxMapItem item={BodyHeaderComponent} /> : null}\n </StyledLeftNavBodyHeaderArea>\n <StyledLeftNavBodyItemsArea\n selected={!withoutBodyShadow && openedItem !== null}\n data-testid=\"leftnav-body-items-area\"\n tabIndex={-1}\n role=\"group\"\n >\n {items.map((item) => (\n <OutOfTheBoxMapItem item={item} key={item.dsId} />\n ))}\n </StyledLeftNavBodyItemsArea>\n </StyledLeftNavBodyAreasContainer>\n </>\n );\n};\n\nconst LeftNavContent: React.ComponentType = () => {\n const {\n expandedForAnimation,\n leftNavProps: { expanded, expandedWidth, footerLabel, onFooterExpand, onFooterClose, loading },\n leftNavProps,\n } = React.useContext(LeftNavContext);\n\n const globalProps = useGetGlobalAttributes(leftNavProps);\n\n return (\n <StyledLeftNavExpandAnimationWrapper\n expandedWidth={expandedWidth}\n expanded={expanded}\n data-testid=\"leftnav-component\"\n aria-label={leftNavScreenReaderInstructions}\n {...globalProps}\n >\n <StyledLeftNavAreasContainer\n expandedWidth={expandedWidth}\n expanded={expandedForAnimation}\n rows={loading ? ['1fr', 'auto'] : ['auto', '1fr', 'auto']}\n cols={['1fr']}\n role={'menu'}\n >\n {loading && <LeftNavLoading expanded={expandedForAnimation} />}\n {!loading && <LeftNavInnerContent />}\n <LeftNavFooterItem footerLabel={footerLabel} onFooterExpand={onFooterExpand} onFooterClose={onFooterClose} />\n </StyledLeftNavAreasContainer>\n </StyledLeftNavExpandAnimationWrapper>\n );\n};\n\nexport default LeftNavContent;\n"],
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;AC2BnB,mBAMuB,KAErB,YARF;AA3BJ,OAAOA,YAAW;AAClB,SAAS,8BAA8B;AACvC,SAAS,sBAAsB;AAC/B,SAAS,yBAAyB;AAClC,SAAS,0BAA0B;AACnC;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,sBAAsB;AAE/B,MAAM,kCACJ;AAKF,MAAM,sBAAsB,MAAM;AAChC,QAAM;AAAA,IACJ,cAAc,EAAE,iBAAiB,qBAAqB,YAAY,OAAO,kBAAkB;AAAA,IAC3F;AAAA,EACF,IAAIA,OAAM,WAAW,cAAc;AACnC,SACE,iCACE;AAAA;AAAA,MAAC;AAAA;AAAA,QACC,eAAY;AAAA,QACZ,UAAU,CAAC,CAAC,mBAAmB,CAAC,cAAc,UAAU,EAAE,SAAS,gBAAgB,IAAc;AAAA,QACjG,MAAK;AAAA,QAEJ,4BAAkB,oBAAC,sBAAmB,MAAM,iBAAiB,IAAK;AAAA;AAAA,IACrE;AAAA,IACA,qBAAC,mCAAgC,MAAM,CAAC,KAAK,GAAG,MAAM,CAAC,QAAQ,KAAK,GAAG,MAAK,SAC1E;AAAA;AAAA,QAAC;AAAA;AAAA,UACC,eAAY;AAAA,UACZ,UAAU,CAAC,CAAC,uBAAuB,CAAC,cAAc,UAAU,EAAE,SAAS,oBAAoB,IAAc;AAAA,UACzG,MAAK;AAAA,UAEJ,gCAAsB,oBAAC,sBAAmB,MAAM,qBAAqB,IAAK;AAAA;AAAA,MAC7E;AAAA,MACA;AAAA,QAAC;AAAA;AAAA,UACC,UAAU,CAAC,qBAAqB,eAAe;AAAA,UAC/C,eAAY;AAAA,UACZ,UAAU;AAAA,UACV,MAAK;AAAA,UAEJ,gBAAM,IAAI,CAAC,SACV,oBAAC,sBAAmB,QAAiB,KAAK,IAAM,CACjD;AAAA;AAAA,MACH;AAAA,OACF;AAAA,KACF;AAEJ;AAEA,MAAM,iBAAsC,MAAM;AAChD,QAAM;AAAA,IACJ;AAAA,IACA,cAAc,EAAE,UAAU,eAAe,aAAa,gBAAgB,eAAe,QAAQ;AAAA,IAC7F;AAAA,EACF,IAAIA,OAAM,WAAW,cAAc;AAEnC,QAAM,cAAc,uBAAuB,YAAY;AAEvD,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA,eAAY;AAAA,MACZ,cAAY;AAAA,MACX,GAAG;AAAA,MAEJ;AAAA,QAAC;AAAA;AAAA,UACC;AAAA,UACA,UAAU;AAAA,UACV,MAAM,UAAU,CAAC,OAAO,MAAM,IAAI,CAAC,QAAQ,OAAO,MAAM;AAAA,UACxD,MAAM,CAAC,KAAK;AAAA,UACZ,MAAM;AAAA,UAEL;AAAA,uBAAW,oBAAC,kBAAe,UAAU,sBAAsB;AAAA,YAC3D,CAAC,WAAW,oBAAC,uBAAoB;AAAA,YAClC,oBAAC,qBAAkB,aAA0B,gBAAgC,eAA8B;AAAA;AAAA;AAAA,MAC7G;AAAA;AAAA,EACF;AAEJ;AAEA,IAAO,yBAAQ;",
|
|
6
6
|
"names": ["React"]
|
|
7
7
|
}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import * as React from "react";
|
|
2
2
|
import { Fragment, jsx, jsxs } from "react/jsx-runtime";
|
|
3
3
|
import { useContext } from "react";
|
|
4
|
-
import { MenuExpand } from "@elliemae/ds-icons";
|
|
4
|
+
import { MenuExpand, MenuCollapse } from "@elliemae/ds-icons";
|
|
5
5
|
import { SimpleTruncatedTooltipText } from "@elliemae/ds-truncated-tooltip-text";
|
|
6
6
|
import {
|
|
7
7
|
StyledFooterMenu,
|
|
@@ -51,7 +51,7 @@ const LeftNavFooterItem = (props) => {
|
|
|
51
51
|
"data-testid": "leftnav-item-container",
|
|
52
52
|
role: "menuitem",
|
|
53
53
|
"aria-label": expandedForAnimation ? `Footer, ${typeof footerLabel === "string" ? footerLabel : ""}` : `Expand left navigation`,
|
|
54
|
-
children: !expandedForAnimation ? /* @__PURE__ */ jsx(MenuExpand, { size: "m", color: ["brand-primary", 800], "data-testid": "leftnav-footer-btn" }) : /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
54
|
+
children: !expandedForAnimation ? /* @__PURE__ */ jsx(MenuExpand, { size: "m", color: ["brand-primary", "800"], "data-testid": "leftnav-footer-btn" }) : /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
55
55
|
/* @__PURE__ */ jsx(
|
|
56
56
|
StyledFooterLabel,
|
|
57
57
|
{
|
|
@@ -68,8 +68,7 @@ const LeftNavFooterItem = (props) => {
|
|
|
68
68
|
/* @__PURE__ */ jsx(
|
|
69
69
|
StyledMenuCollapse,
|
|
70
70
|
{
|
|
71
|
-
|
|
72
|
-
color: ["brand-primary", 800],
|
|
71
|
+
buttonType: "raw",
|
|
73
72
|
onClick: (e) => {
|
|
74
73
|
e.stopPropagation();
|
|
75
74
|
handleOnClick(e);
|
|
@@ -81,7 +80,8 @@ const LeftNavFooterItem = (props) => {
|
|
|
81
80
|
setFocusedItem(FOOTER_MENU_CLOSE_DS_ID);
|
|
82
81
|
},
|
|
83
82
|
role: "button",
|
|
84
|
-
"aria-label": "Collapse left navigation"
|
|
83
|
+
"aria-label": "Collapse left navigation",
|
|
84
|
+
children: /* @__PURE__ */ jsx(MenuCollapse, { size: "m", color: ["brand-primary", "800"] })
|
|
85
85
|
}
|
|
86
86
|
)
|
|
87
87
|
] })
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/LeftNavFooterItem/index.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-lines */\nimport React, { useContext } from 'react';\nimport { MenuExpand } from '@elliemae/ds-icons';\nimport { SimpleTruncatedTooltipText } from '@elliemae/ds-truncated-tooltip-text';\nimport {\n StyledFooterMenu,\n StyledFooterItem,\n
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-lines */\nimport React, { useContext } from 'react';\nimport { MenuExpand, MenuCollapse } from '@elliemae/ds-icons';\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 | JSX.Element;\n onFooterExpand: React.MouseEventHandler & React.KeyboardEventHandler;\n onFooterClose: React.MouseEventHandler & React.KeyboardEventHandler;\n};\n\nexport const LeftNavFooterItem: React.ComponentType<LeftNavFooterItemProps> = (props) => {\n const { footerLabel, onFooterExpand = () => null, onFooterClose = () => null } = props;\n const {\n leftNavProps: { labelOverflow },\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 return (\n <StyledFooterMenu key={id} data-testid=\"leftnav-container\">\n <StyledFooterItem\n ref={visibleItemsRefs.current[id] as React.RefObject<HTMLDivElement>}\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 {labelOverflow === 'truncate' ? (\n <SimpleTruncatedTooltipText value={footerLabel} placement=\"bottom-start\" />\n ) : (\n footerLabel\n )}\n </StyledFooterLabel>\n <StyledFooterSeparator mt=\"xxxs\" />\n <StyledMenuCollapse\n buttonType=\"raw\"\n onClick={(e: React.MouseEvent) => {\n e.stopPropagation();\n handleOnClick(e);\n }}\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"],
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;ACqEb,SAEA,UAFA,KAEA,YAFA;AApEV,SAAgB,kBAAkB;AAClC,SAAS,YAAY,oBAAoB;AACzC,SAAS,kCAAkC;AAC3C;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,6BAA6B;AACtC,OAAO,2BAA2B;AAClC,SAAS,cAAc,+BAA+B;AAQ/C,MAAM,oBAAiE,CAAC,UAAU;AACvF,QAAM,EAAE,aAAa,iBAAiB,MAAM,MAAM,gBAAgB,MAAM,KAAK,IAAI;AACjF,QAAM;AAAA,IACJ,cAAc,EAAE,cAAc;AAAA,IAC9B;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI,WAAW,qBAAqB;AAEpC,QAAM,KAAK;AAEX,QAAM,gBAAgB,uBAAuB,gBAAgB;AAE7D,QAAM,YAAY,sBAAsB;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,SACE,oBAAC,oBAA0B,eAAY,qBACrC;AAAA,IAAC;AAAA;AAAA,MACC,KAAK,iBAAiB,QAAQ,EAAE;AAAA,MAChC,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,OAC3D;AAAA,MAGL,WAAC,uBACA,oBAAC,cAAW,MAAK,KAAI,OAAO,CAAC,iBAAiB,KAAK,GAAG,eAAY,sBAAqB,IAEvF,iCACE;AAAA;AAAA,UAAC;AAAA;AAAA,YACC,IAAG;AAAA,YACH,IAAG;AAAA,YACH,IAAG;AAAA,YACH,eAAY;AAAA,YACZ;AAAA,YACA,aAAU;AAAA,YAET,4BAAkB,aACjB,oBAAC,8BAA2B,OAAO,aAAa,WAAU,gBAAe,IAEzE;AAAA;AAAA,QAEJ;AAAA,QACA,oBAAC,yBAAsB,IAAG,QAAO;AAAA,QACjC;AAAA,UAAC;AAAA;AAAA,YACC,YAAW;AAAA,YACX,SAAS,CAAC,MAAwB;AAChC,gBAAE,gBAAgB;AAClB,4BAAc,CAAC;AAAA,YACjB;AAAA,YACA,eAAY;AAAA,YACZ,UAAU;AAAA,YACV,SAAS,CAAC,MAAwB;AAChC,gBAAE,gBAAgB;AAClB,6BAAe,uBAAuB;AAAA,YACxC;AAAA,YACA,MAAK;AAAA,YACL,cAAW;AAAA,YAEX,8BAAC,gBAAa,MAAK,KAAI,OAAO,CAAC,iBAAiB,KAAK,GAAG;AAAA;AAAA,QAC1D;AAAA,SACF;AAAA;AAAA,EAEJ,KA3DqB,EA4DvB;AAEJ;AAEA,IAAO,4BAAQ;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import * as React from "react";
|
|
2
2
|
import { styled } from "@elliemae/ds-system";
|
|
3
|
+
import { DSButtonV2 } from "@elliemae/ds-button-v2";
|
|
3
4
|
import { Grid } from "@elliemae/ds-grid";
|
|
4
|
-
import { MenuCollapse } from "@elliemae/ds-icons";
|
|
5
5
|
import { getLeftBorderStyle, getItemBackgroundStyle } from "../../common/index.js";
|
|
6
6
|
import { DSLeftNavigationName, DSLeftNavigationSlots } from "../../constants/index.js";
|
|
7
7
|
const StyledFooterMenu = styled(Grid, { name: DSLeftNavigationName, slot: DSLeftNavigationSlots.FOOTER_MENU })`
|
|
@@ -52,14 +52,14 @@ const StyledFooterSeparator = styled(Grid, {
|
|
|
52
52
|
width: 1px;
|
|
53
53
|
background-color: ${(props) => props.theme.colors.neutral[100]};
|
|
54
54
|
`;
|
|
55
|
-
const StyledMenuCollapse = styled(
|
|
55
|
+
const StyledMenuCollapse = styled(DSButtonV2, {
|
|
56
56
|
name: DSLeftNavigationName,
|
|
57
57
|
slot: DSLeftNavigationSlots.FOOTER_MENU_COLLAPSE
|
|
58
58
|
})`
|
|
59
|
+
padding: 0;
|
|
59
60
|
margin: 0 12px;
|
|
60
|
-
cursor: pointer;
|
|
61
61
|
:focus {
|
|
62
|
-
outline: 2px solid ${(props) => props.theme.colors.brand[
|
|
62
|
+
outline: 2px solid ${(props) => props.theme.colors.brand[800]};
|
|
63
63
|
}
|
|
64
64
|
`;
|
|
65
65
|
export {
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/LeftNavFooterItem/styled.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { styled } from '@elliemae/ds-system';\nimport {
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,cAAc;AACvB,SAAS,
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "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';\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}>`\n position: relative;\n ${getLeftBorderStyle}\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: string }>`\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"],
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,cAAc;AACvB,SAAS,kBAAkB;AAC3B,SAAS,YAAY;AACrB,SAAS,oBAAoB,8BAA8B;AAC3D,SAAS,sBAAsB,6BAA6B;AAErD,MAAM,mBAAmB,OAAO,MAAM,EAAE,MAAM,sBAAsB,MAAM,sBAAsB,YAAY,CAAC;AAAA;AAAA;AAAA,gBAGpG,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ,KAAK;AAAA;AAAA,0BAEjC,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ,GAAG;AAAA;AAG5D,MAAM,mBAAmB,OAAO,MAAM,EAAE,MAAM,sBAAsB,MAAM,sBAAsB,YAAY,CAAC;AAAA;AAAA,IAMhH;AAAA;AAAA;AAAA,YAGQ,CAAC,UAAW,MAAM,WAAW,SAAS;AAAA;AAAA,IAE9C;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,0BAYsB,CAAC,UAAU,MAAM,MAAM,OAAO,MAAM,GAAG;AAAA;AAAA;AAAA;AAAA;AAM1D,MAAM,oBAAoB,OAAO,MAAM;AAAA,EAC5C,MAAM;AAAA,EACN,MAAM,sBAAsB;AAC9B,CAAC;AAAA;AAAA,WAEU,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ,GAAG;AAAA;AAAA,gBAEpC,CAAC,UAAW,MAAM,kBAAkB,YAAY,cAAc;AAAA;AAGvE,MAAM,wBAAwB,OAAO,MAAM;AAAA,EAChD,MAAM;AAAA,EACN,MAAM,sBAAsB;AAC9B,CAAC;AAAA;AAAA;AAAA,sBAGqB,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ,GAAG;AAAA;AAGxD,MAAM,qBAAqB,OAAO,YAAY;AAAA,EACnD,MAAM;AAAA,EACN,MAAM,sBAAsB;AAC9B,CAAC;AAAA;AAAA;AAAA;AAAA,yBAIwB,CAAC,UAAU,MAAM,MAAM,OAAO,MAAM,GAAG;AAAA;AAAA;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -1,24 +1,22 @@
|
|
|
1
1
|
import * as React from "react";
|
|
2
2
|
import { jsx } from "react/jsx-runtime";
|
|
3
|
-
import
|
|
3
|
+
import { DSCircularIndeterminateIndicator } from "@elliemae/ds-circular-progress-indicator";
|
|
4
4
|
import Grid from "@elliemae/ds-grid";
|
|
5
5
|
import { styled } from "@elliemae/ds-system";
|
|
6
6
|
import { DSLeftNavigationName, DSLeftNavigationSlots } from "../../constants/index.js";
|
|
7
7
|
const StyledLoaderWrapper = styled(Grid, { name: DSLeftNavigationName, slot: DSLeftNavigationSlots.LOADER_WRAPPER })`
|
|
8
|
-
grid-area: left-nav-body;
|
|
9
8
|
height: 100%;
|
|
10
9
|
place-items: center;
|
|
11
10
|
z-index: 0;
|
|
12
11
|
background-color: white;
|
|
13
12
|
`;
|
|
14
|
-
const LeftNavLoading = ({ expanded }) => /* @__PURE__ */ jsx(StyledLoaderWrapper, { children: /* @__PURE__ */ jsx(
|
|
15
|
-
|
|
13
|
+
const LeftNavLoading = ({ expanded }) => /* @__PURE__ */ jsx(StyledLoaderWrapper, { role: "menuitem", "aria-label": "Loading...", children: /* @__PURE__ */ jsx(
|
|
14
|
+
DSCircularIndeterminateIndicator,
|
|
16
15
|
{
|
|
17
|
-
size: expanded ? "
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
showTooltip: !expanded
|
|
16
|
+
size: expanded ? "l" : "s",
|
|
17
|
+
text: "Loading...",
|
|
18
|
+
showText: expanded,
|
|
19
|
+
withTooltip: !expanded
|
|
22
20
|
}
|
|
23
21
|
) });
|
|
24
22
|
export {
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/LeftNavLoading/index.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport { DSCircularIndeterminateIndicator } from '@elliemae/ds-circular-progress-indicator';\nimport Grid from '@elliemae/ds-grid';\nimport { styled } from '@elliemae/ds-system';\nimport { DSLeftNavigationName, DSLeftNavigationSlots } from '../../constants/index.js';\n\nconst StyledLoaderWrapper = styled(Grid, { name: DSLeftNavigationName, slot: DSLeftNavigationSlots.LOADER_WRAPPER })`\n height: 100%;\n place-items: center;\n z-index: 0;\n background-color: white;\n`;\n\nexport const LeftNavLoading: React.ComponentType<{ expanded: boolean }> = ({ expanded }) => (\n <StyledLoaderWrapper role=\"menuitem\" aria-label=\"Loading...\">\n <DSCircularIndeterminateIndicator\n size={expanded ? 'l' : 's'}\n text=\"Loading...\"\n showText={expanded}\n withTooltip={!expanded}\n />\n </StyledLoaderWrapper>\n);\n"],
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;ACenB;AAdJ,SAAS,wCAAwC;AACjD,OAAO,UAAU;AACjB,SAAS,cAAc;AACvB,SAAS,sBAAsB,6BAA6B;AAE5D,MAAM,sBAAsB,OAAO,MAAM,EAAE,MAAM,sBAAsB,MAAM,sBAAsB,eAAe,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAO5G,MAAM,iBAA6D,CAAC,EAAE,SAAS,MACpF,oBAAC,uBAAoB,MAAK,YAAW,cAAW,cAC9C;AAAA,EAAC;AAAA;AAAA,IACC,MAAM,WAAW,MAAM;AAAA,IACvB,MAAK;AAAA,IACL,UAAU;AAAA,IACV,aAAa,CAAC;AAAA;AAChB,GACF;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -19,5 +19,5 @@ export declare const StyledLeftContainer: import("styled-components").StyledComp
|
|
|
19
19
|
export declare const StyledItemLabel: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("@elliemae/ds-grid/dist/types/react-desc-prop-types.js").DSGridT.Props & import("react").RefAttributes<HTMLDivElement>>, Theme, {
|
|
20
20
|
labelOverflow: string;
|
|
21
21
|
}, never>;
|
|
22
|
-
export declare const StyledChevronLeft: import("styled-components").StyledComponent<(
|
|
22
|
+
export declare const StyledChevronLeft: import("styled-components").StyledComponent<import("react").ComponentType<import("@elliemae/ds-button-v2").DSButtonT.Props>, Theme, object, never>;
|
|
23
23
|
export {};
|
|
@@ -9,4 +9,4 @@ export declare const StyledFooterLabel: import("styled-components").StyledCompon
|
|
|
9
9
|
labelOverflow: string;
|
|
10
10
|
}, never>;
|
|
11
11
|
export declare const StyledFooterSeparator: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("@elliemae/ds-grid/dist/types/react-desc-prop-types.js").DSGridT.Props & import("react").RefAttributes<HTMLDivElement>>, import("@elliemae/ds-system").Theme, object, never>;
|
|
12
|
-
export declare const StyledMenuCollapse: import("styled-components").StyledComponent<(
|
|
12
|
+
export declare const StyledMenuCollapse: import("styled-components").StyledComponent<import("react").ComponentType<import("@elliemae/ds-button-v2").DSButtonT.Props>, import("@elliemae/ds-system").Theme, object, never>;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@elliemae/ds-left-navigation",
|
|
3
|
-
"version": "3.16.0-next.
|
|
3
|
+
"version": "3.16.0-next.18",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"description": "ICE MT - Dimsum - Left Navigation",
|
|
6
6
|
"files": [
|
|
@@ -235,13 +235,14 @@
|
|
|
235
235
|
"typeSafety": false
|
|
236
236
|
},
|
|
237
237
|
"dependencies": {
|
|
238
|
-
"@elliemae/ds-
|
|
239
|
-
"@elliemae/ds-
|
|
240
|
-
"@elliemae/ds-
|
|
241
|
-
"@elliemae/ds-icons": "3.16.0-next.
|
|
242
|
-
"@elliemae/ds-
|
|
243
|
-
"@elliemae/ds-
|
|
244
|
-
"@elliemae/ds-
|
|
238
|
+
"@elliemae/ds-button-v2": "3.16.0-next.18",
|
|
239
|
+
"@elliemae/ds-circular-progress-indicator": "3.16.0-next.18",
|
|
240
|
+
"@elliemae/ds-grid": "3.16.0-next.18",
|
|
241
|
+
"@elliemae/ds-icons": "3.16.0-next.18",
|
|
242
|
+
"@elliemae/ds-props-helpers": "3.16.0-next.18",
|
|
243
|
+
"@elliemae/ds-system": "3.16.0-next.18",
|
|
244
|
+
"@elliemae/ds-truncated-tooltip-text": "3.16.0-next.18",
|
|
245
|
+
"@elliemae/ds-utilities": "3.16.0-next.18"
|
|
245
246
|
},
|
|
246
247
|
"devDependencies": {
|
|
247
248
|
"@testing-library/react": "~12.1.3",
|