@elliemae/ds-left-navigation 3.51.0-rc.8 → 3.51.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/dist/cjs/constants/constants.js +95 -24
- package/dist/cjs/constants/constants.js.map +2 -2
- package/dist/cjs/exported-related/ItemRenderer/index.js +20 -4
- package/dist/cjs/exported-related/ItemRenderer/index.js.map +2 -2
- package/dist/cjs/exported-related/Notifications/index.js +46 -9
- package/dist/cjs/exported-related/Notifications/index.js.map +2 -2
- package/dist/cjs/index.js +6 -6
- package/dist/cjs/index.js.map +1 -1
- package/dist/cjs/outOfTheBox/ItemControlledDrilldown/index.js +46 -10
- package/dist/cjs/outOfTheBox/ItemControlledDrilldown/index.js.map +2 -2
- package/dist/cjs/outOfTheBox/ItemHeader/index.js +4 -0
- package/dist/cjs/outOfTheBox/ItemHeader/index.js.map +2 -2
- package/dist/cjs/outOfTheBox/ItemLink/index.js +19 -2
- package/dist/cjs/outOfTheBox/ItemLink/index.js.map +2 -2
- package/dist/cjs/outOfTheBox/ItemSection/index.js +27 -6
- package/dist/cjs/outOfTheBox/ItemSection/index.js.map +2 -2
- package/dist/cjs/outOfTheBox/ItemSeparator/index.js +6 -1
- package/dist/cjs/outOfTheBox/ItemSeparator/index.js.map +2 -2
- package/dist/cjs/outOfTheBox/ItemSkeleton/index.js +12 -1
- package/dist/cjs/outOfTheBox/ItemSkeleton/index.js.map +2 -2
- package/dist/cjs/outOfTheBox/ItemSubmenu/index.js +9 -5
- package/dist/cjs/outOfTheBox/ItemSubmenu/index.js.map +2 -2
- package/dist/cjs/outOfTheBox/ItemTextLabel/index.js +1 -1
- package/dist/cjs/outOfTheBox/ItemTextLabel/index.js.map +1 -1
- package/dist/cjs/outOfTheBox/ItemUncontrolledDrilldown/index.js +36 -11
- package/dist/cjs/outOfTheBox/ItemUncontrolledDrilldown/index.js.map +2 -2
- package/dist/cjs/outOfTheBox/ItemWithDate/index.js +23 -6
- package/dist/cjs/outOfTheBox/ItemWithDate/index.js.map +2 -2
- package/dist/cjs/outOfTheBox/styled.js +28 -9
- package/dist/cjs/outOfTheBox/styled.js.map +2 -2
- package/dist/cjs/parts/LeftNavContent/index.js +58 -43
- package/dist/cjs/parts/LeftNavContent/index.js.map +2 -2
- package/dist/cjs/parts/LeftNavFooterItem/index.js +104 -58
- package/dist/cjs/parts/LeftNavFooterItem/index.js.map +3 -3
- package/dist/esm/constants/constants.js +95 -24
- package/dist/esm/constants/constants.js.map +2 -2
- package/dist/esm/exported-related/ItemRenderer/index.js +21 -5
- package/dist/esm/exported-related/ItemRenderer/index.js.map +2 -2
- package/dist/esm/exported-related/Notifications/index.js +48 -11
- package/dist/esm/exported-related/Notifications/index.js.map +2 -2
- package/dist/esm/index.js +2 -2
- package/dist/esm/index.js.map +1 -1
- package/dist/esm/outOfTheBox/ItemControlledDrilldown/index.js +47 -11
- package/dist/esm/outOfTheBox/ItemControlledDrilldown/index.js.map +2 -2
- package/dist/esm/outOfTheBox/ItemHeader/index.js +4 -0
- package/dist/esm/outOfTheBox/ItemHeader/index.js.map +2 -2
- package/dist/esm/outOfTheBox/ItemLink/index.js +19 -2
- package/dist/esm/outOfTheBox/ItemLink/index.js.map +2 -2
- package/dist/esm/outOfTheBox/ItemSection/index.js +27 -6
- package/dist/esm/outOfTheBox/ItemSection/index.js.map +2 -2
- package/dist/esm/outOfTheBox/ItemSeparator/index.js +7 -2
- package/dist/esm/outOfTheBox/ItemSeparator/index.js.map +2 -2
- package/dist/esm/outOfTheBox/ItemSkeleton/index.js +12 -1
- package/dist/esm/outOfTheBox/ItemSkeleton/index.js.map +2 -2
- package/dist/esm/outOfTheBox/ItemSubmenu/index.js +11 -7
- package/dist/esm/outOfTheBox/ItemSubmenu/index.js.map +2 -2
- package/dist/esm/outOfTheBox/ItemTextLabel/index.js +1 -1
- package/dist/esm/outOfTheBox/ItemTextLabel/index.js.map +1 -1
- package/dist/esm/outOfTheBox/ItemUncontrolledDrilldown/index.js +37 -12
- package/dist/esm/outOfTheBox/ItemUncontrolledDrilldown/index.js.map +2 -2
- package/dist/esm/outOfTheBox/ItemWithDate/index.js +24 -7
- package/dist/esm/outOfTheBox/ItemWithDate/index.js.map +2 -2
- package/dist/esm/outOfTheBox/styled.js +28 -9
- package/dist/esm/outOfTheBox/styled.js.map +2 -2
- package/dist/esm/parts/LeftNavContent/index.js +61 -46
- package/dist/esm/parts/LeftNavContent/index.js.map +2 -2
- package/dist/esm/parts/LeftNavFooterItem/index.js +105 -59
- package/dist/esm/parts/LeftNavFooterItem/index.js.map +2 -2
- package/dist/types/constants/constants.d.ts +81 -45
- package/package.json +10 -10
|
@@ -5,41 +5,112 @@ const LEFT_NAVIGATION_REGION_FOCUSES = {
|
|
|
5
5
|
RESET: ""
|
|
6
6
|
};
|
|
7
7
|
const LEFT_NAVIGATION_SLOTS = {
|
|
8
|
-
|
|
8
|
+
ALERTS_ICON_WRAPPER: "alerts-icon",
|
|
9
9
|
AREAS_CONTAINER: "areas-container",
|
|
10
|
+
ARROW_CONTAINER: "arrow-container",
|
|
10
11
|
BODY_AREAS_CONTAINER: "body-areas-container",
|
|
11
|
-
FOOTER_AREA: "footer-area",
|
|
12
|
-
LOADER_WRAPPER: "loader-wrapper",
|
|
13
|
-
HEADER_AREA: "header-area",
|
|
14
12
|
BODY_HEADER_AREA: "body-header-area",
|
|
15
13
|
BODY_ITEMS_AREA: "body-items-area",
|
|
16
|
-
|
|
14
|
+
BOTTOM_CONTAINER: "bottom-container",
|
|
15
|
+
COLLAPSED_CONTAINER: "collapsed-container",
|
|
16
|
+
EXCEPTIONS_ICON_WRAPPER: "exceptions-icon",
|
|
17
17
|
FOOTER_ITEM: "footer-item",
|
|
18
18
|
FOOTER_LABEL: "footer-label",
|
|
19
|
-
|
|
19
|
+
FOOTER_MENU: "footer-menu",
|
|
20
20
|
FOOTER_MENU_COLLAPSE: "footer-menu-collapse",
|
|
21
|
-
|
|
22
|
-
ITEM_SEPARATOR: "item-separator",
|
|
23
|
-
SECTION_LABEL: "section-label",
|
|
24
|
-
SECTION_RIGHT_LABEL: "section-right-label",
|
|
25
|
-
VERTICAL_SEPARATOR: "vertical-separator",
|
|
26
|
-
SECTION_CONTAINER: "section-container",
|
|
27
|
-
ITEM_LABEL: "item-label",
|
|
28
|
-
LEFT_CONTAINER: "left-container",
|
|
29
|
-
BOTTOM_CONTAINER: "bottom-container",
|
|
30
|
-
RIGHT_CONTAINER: "right-container",
|
|
31
|
-
ITEM_DATE: "item-date",
|
|
32
|
-
ITEM_CHEVRON_BACK: "item-chevron-back",
|
|
21
|
+
FOOTER_SEPARATOR: "footer-separator",
|
|
33
22
|
ITEM: "item",
|
|
34
|
-
COLLAPSED_CONTAINER: "collapsed-container",
|
|
35
|
-
ARROW_CONTAINER: "arrow-container",
|
|
36
23
|
ITEM_BORDER_BOTTOM: "item-border-bottom",
|
|
24
|
+
ITEM_CHEVRON_BACK: "item-chevron-back",
|
|
25
|
+
ITEM_DATE: "item-date",
|
|
26
|
+
ITEM_LABEL: "item-label",
|
|
27
|
+
ITEM_SEPARATOR: "item-separator",
|
|
28
|
+
LEFT_CONTAINER: "left-container",
|
|
29
|
+
LOADER_WRAPPER: "loader-wrapper",
|
|
30
|
+
HEADER_AREA: "header-area",
|
|
31
|
+
MESSAGES_ICON_WRAPPER: "messages-icon",
|
|
32
|
+
NOTIFICATIONS_CONTAINER: "notifications-container",
|
|
37
33
|
NOTIFICATIONS_ICON: "notifications-icon",
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
34
|
+
RIGHT_CONTAINER: "right-container",
|
|
35
|
+
ROOT: "root",
|
|
36
|
+
SECTION_CONTAINER: "section-container",
|
|
37
|
+
SECTION_LABEL: "section-label",
|
|
38
|
+
SECTION_RIGHT_LABEL: "section-right-label",
|
|
39
|
+
VERTICAL_SEPARATOR: "vertical-separator"
|
|
40
|
+
};
|
|
41
|
+
const LEFT_NAVIGATION_DATA_TESTID = {
|
|
42
|
+
...slotObjectToDataTestIds(DSLeftNavigationName, LEFT_NAVIGATION_SLOTS),
|
|
43
|
+
/* ********************************************************************************************************************************************
|
|
44
|
+
* keeping old values around based on vinoth/guncha (forced) request to keep them stable
|
|
45
|
+
* in the future, before removing/changing those values, please make sure to check with them
|
|
46
|
+
* (and get written approval for future reference, verba volant, scripta manent).
|
|
47
|
+
* ********************************************************************************************************************************************
|
|
48
|
+
* https://jira.elliemae.io/browse/PUI-15589
|
|
49
|
+
******************************************************************************************************************************************** */
|
|
50
|
+
ROOT: "leftnav-component",
|
|
51
|
+
HEADER_AREA: "leftnav-header-area",
|
|
52
|
+
AREAS_CONTAINER: "ds-leftnavigation-areas-container",
|
|
53
|
+
COLLAPSED_CONTAINER: "leftnav-leftcomponent",
|
|
54
|
+
BODY_AREAS_CONTAINER: "ds-leftnavigation-body-areas-container",
|
|
55
|
+
BODY_HEADER_AREA: "leftnav-body-header-area",
|
|
56
|
+
BODY_ITEMS_AREA: "leftnav-body-items-area",
|
|
57
|
+
BOTTOM_CONTAINER: "ds-leftnavigation-bottom-container",
|
|
58
|
+
ITEM: "leftnav-item-container",
|
|
59
|
+
ITEM_BORDER_BOTTOM: "ds-leftnavigation-item-border-bottom",
|
|
60
|
+
ITEM_LABEL: "leftnav-itemlabel",
|
|
61
|
+
ITEM_DATE: "leftnav-list-item-date",
|
|
62
|
+
ITEM_SEPARATOR: "leftnav-separator-subitem",
|
|
63
|
+
ITEM_CHEVRON_BACK: "leftnav-leftcomponent-chevron",
|
|
64
|
+
// repeated with "COLLAPSED_CONTAINER" above, APP QA team doesn't approve us changing this.
|
|
65
|
+
// IF anyone come with the request to have a separate value for this, address them to guncha/vinoth.
|
|
66
|
+
LEFT_CONTAINER: "leftnav-leftcomponent",
|
|
67
|
+
RIGHT_CONTAINER: "leftnav-right-component",
|
|
68
|
+
ARROW_CONTAINER: "ds-leftnavigation-arrow-container",
|
|
69
|
+
SECTION_CONTAINER: "ds-leftnavigation-section-container",
|
|
70
|
+
SECTION_LABEL: "leftnav-section-item-label",
|
|
71
|
+
SECTION_RIGHT_LABEL: "ds-leftnavigation-section-right-label",
|
|
72
|
+
NOTIFICATIONS_CONTAINER: "ds-leftnavigation-notifications-container",
|
|
73
|
+
EXCEPTIONS_ICON_WRAPPER: "left-nav-exceptions-icon",
|
|
74
|
+
ALERTS_ICON_WRAPPER: "left-nav-alerts-icon",
|
|
75
|
+
MESSAGES_ICON_WRAPPER: "left-nav-messages-icon",
|
|
76
|
+
FOOTER_MENU: "leftnav-container",
|
|
77
|
+
FOOTER_SEPARATOR: "ds-leftnavigation-footer-separator",
|
|
78
|
+
// repeated with "ITEM" above, APP QA team doesn't approve us changing this.
|
|
79
|
+
// IF anyone come with the request to have a separate value for this, address them to guncha/vinoth.
|
|
80
|
+
FOOTER_ITEM: "leftnav-item-container",
|
|
81
|
+
VERTICAL_SEPARATOR: "ds-leftnavigation-vertical-separator",
|
|
82
|
+
// Things that are not slots (why?) and still need data-testids (that needs to not change else APP QA team can't work)
|
|
83
|
+
NOTIFICATION_ICON: "left-nav-notifications-icon",
|
|
84
|
+
ALERTS_ICON: "left-nav-alerts-icon",
|
|
85
|
+
EXCEPTIONS_ICON: "left-nav-exceptions-icon",
|
|
86
|
+
MESSAGES_ICON: "left-nav-messages-icon",
|
|
87
|
+
// I don't know if there was already a slot or not because the naming convention is confusing and we can't change it.
|
|
88
|
+
// so I am re-defining those to be sure.
|
|
89
|
+
// (usually this comes from previous implementation "slot" being a "nested" slot that inherits the slot from the child)
|
|
90
|
+
DROPDOWN_MENU_TRIGGER_WRAPPER: "dropdown-menu-trigger-wrapper",
|
|
91
|
+
// used to be dsDropdownmenuRoot slot at time of writing this comment
|
|
92
|
+
NOTIFICATIONS_ICON: "left-nav-notifications-icon",
|
|
93
|
+
// used to be dsIconRoot slot at time of writing this comment
|
|
94
|
+
LEFT_COMPONENT_CHEVRON: "leftnav-leftcomponent-chevron",
|
|
95
|
+
// used to be dsButtonRoot slot at time of writing this comment
|
|
96
|
+
// VERY SPECIAL CASE, THE SLOT FOOTER_BTN GOES TO THE ICON WHEN COLLAPSED, TO THE BTN WHEN EXPANDED
|
|
97
|
+
// WE CAN'T FIX THE TECH DEBT
|
|
98
|
+
FOOTER_BTN: "leftnav-footer-btn",
|
|
99
|
+
// used to be [ "dsIconRoot", "dsButtonRoot" ] slots at time of writing this comment
|
|
100
|
+
// VERY SPECIAL CASE 2
|
|
101
|
+
// THE SLOT IS TECHNICALLY dsLeftnavigationItemLabel
|
|
102
|
+
// which is LEFT_NAVIGATION_SLOTS.ITEM_LABEL
|
|
103
|
+
// BUT the data-test-id is either "leftnav-itemlabel" or "leftnav-list-item-label"
|
|
104
|
+
// APPARENTLY (we are not sure) based on it's "type"
|
|
105
|
+
// "leftnav-list-item-label" for:
|
|
106
|
+
// - ITEM_TYPES.LEFT_NAV_ITEM_TEXT_LABEL
|
|
107
|
+
// - ITEM_TYPES.LEFT_NAV_ITEM_WITH_DATE
|
|
108
|
+
// - ITEM_TYPES.LEFT_NAV_ITEM_UNCONTROLLED_DRILLDOWN
|
|
109
|
+
// - ITEM_TYPES.LEFT_NAV_ITEM_CONTROLLED_DRILLDOWN
|
|
110
|
+
// WE CAN'T FIX THE TECH DEBT
|
|
111
|
+
// IF we somehow need to change this, address them to guncha/vinoth.
|
|
112
|
+
LIST_ITEM_LABEL_ID_EXCEPTION: "leftnav-list-item-label"
|
|
41
113
|
};
|
|
42
|
-
const LEFT_NAVIGATION_DATA_TESTID = slotObjectToDataTestIds(DSLeftNavigationName, LEFT_NAVIGATION_SLOTS);
|
|
43
114
|
const DSLeftNavigationSlots = LEFT_NAVIGATION_SLOTS;
|
|
44
115
|
export {
|
|
45
116
|
DSLeftNavigationName,
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../src/constants/constants.ts"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { slotObjectToDataTestIds } from '@elliemae/ds-system';\n\nexport const DSLeftNavigationName = 'DSLeftnavigation';\n\n// we are naming this with the ${component_name}_region_focuses convention to namespace & avoid errors on duplicate exports variables in aggregators\nexport const LEFT_NAVIGATION_REGION_FOCUSES = {\n RESET: '',\n} as const;\n\n// we are naming this with the ${component_name}_slots convention to namespace & avoid errors on duplicate exports variables in aggregators\nexport const LEFT_NAVIGATION_SLOTS = {\n
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,+BAA+B;AAEjC,MAAM,uBAAuB;AAG7B,MAAM,iCAAiC;AAAA,EAC5C,OAAO;AACT;AAGO,MAAM,wBAAwB;AAAA,EACnC,
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { slotObjectToDataTestIds } from '@elliemae/ds-system';\n\nexport const DSLeftNavigationName = 'DSLeftnavigation';\n\n// we are naming this with the ${component_name}_region_focuses convention to namespace & avoid errors on duplicate exports variables in aggregators\nexport const LEFT_NAVIGATION_REGION_FOCUSES = {\n RESET: '',\n} as const;\n\n// we are naming this with the ${component_name}_slots convention to namespace & avoid errors on duplicate exports variables in aggregators\nexport const LEFT_NAVIGATION_SLOTS = {\n ALERTS_ICON_WRAPPER: 'alerts-icon',\n AREAS_CONTAINER: 'areas-container',\n ARROW_CONTAINER: 'arrow-container',\n BODY_AREAS_CONTAINER: 'body-areas-container',\n BODY_HEADER_AREA: 'body-header-area',\n BODY_ITEMS_AREA: 'body-items-area',\n BOTTOM_CONTAINER: 'bottom-container',\n COLLAPSED_CONTAINER: 'collapsed-container',\n EXCEPTIONS_ICON_WRAPPER: 'exceptions-icon',\n FOOTER_ITEM: 'footer-item',\n FOOTER_LABEL: 'footer-label',\n FOOTER_MENU: 'footer-menu',\n FOOTER_MENU_COLLAPSE: 'footer-menu-collapse',\n FOOTER_SEPARATOR: 'footer-separator',\n ITEM: 'item',\n ITEM_BORDER_BOTTOM: 'item-border-bottom',\n ITEM_CHEVRON_BACK: 'item-chevron-back',\n ITEM_DATE: 'item-date',\n ITEM_LABEL: 'item-label',\n ITEM_SEPARATOR: 'item-separator',\n LEFT_CONTAINER: 'left-container',\n LOADER_WRAPPER: 'loader-wrapper',\n HEADER_AREA: 'header-area',\n MESSAGES_ICON_WRAPPER: 'messages-icon',\n NOTIFICATIONS_CONTAINER: 'notifications-container',\n NOTIFICATIONS_ICON: 'notifications-icon',\n RIGHT_CONTAINER: 'right-container',\n ROOT: 'root',\n SECTION_CONTAINER: 'section-container',\n SECTION_LABEL: 'section-label',\n SECTION_RIGHT_LABEL: 'section-right-label',\n VERTICAL_SEPARATOR: 'vertical-separator',\n} as const;\n\n// we are naming this with the ${component_name}_data_testid convention to namespace & avoid errors on duplicate exports variables in aggregators\nexport const LEFT_NAVIGATION_DATA_TESTID = {\n ...slotObjectToDataTestIds(DSLeftNavigationName, LEFT_NAVIGATION_SLOTS),\n /* ********************************************************************************************************************************************\n * keeping old values around based on vinoth/guncha (forced) request to keep them stable\n * in the future, before removing/changing those values, please make sure to check with them\n * (and get written approval for future reference, verba volant, scripta manent).\n * ********************************************************************************************************************************************\n * https://jira.elliemae.io/browse/PUI-15589\n ******************************************************************************************************************************************** */\n ROOT: 'leftnav-component',\n HEADER_AREA: 'leftnav-header-area',\n AREAS_CONTAINER: 'ds-leftnavigation-areas-container',\n\n COLLAPSED_CONTAINER: 'leftnav-leftcomponent',\n\n BODY_AREAS_CONTAINER: 'ds-leftnavigation-body-areas-container',\n BODY_HEADER_AREA: 'leftnav-body-header-area',\n BODY_ITEMS_AREA: 'leftnav-body-items-area',\n BOTTOM_CONTAINER: 'ds-leftnavigation-bottom-container',\n\n ITEM: 'leftnav-item-container',\n ITEM_BORDER_BOTTOM: 'ds-leftnavigation-item-border-bottom',\n ITEM_LABEL: 'leftnav-itemlabel',\n ITEM_DATE: 'leftnav-list-item-date',\n ITEM_SEPARATOR: 'leftnav-separator-subitem',\n ITEM_CHEVRON_BACK: 'leftnav-leftcomponent-chevron',\n\n // repeated with \"COLLAPSED_CONTAINER\" above, APP QA team doesn't approve us changing this.\n // IF anyone come with the request to have a separate value for this, address them to guncha/vinoth.\n LEFT_CONTAINER: 'leftnav-leftcomponent',\n RIGHT_CONTAINER: 'leftnav-right-component',\n ARROW_CONTAINER: 'ds-leftnavigation-arrow-container',\n\n SECTION_CONTAINER: 'ds-leftnavigation-section-container',\n SECTION_LABEL: 'leftnav-section-item-label',\n SECTION_RIGHT_LABEL: 'ds-leftnavigation-section-right-label',\n\n NOTIFICATIONS_CONTAINER: 'ds-leftnavigation-notifications-container',\n\n EXCEPTIONS_ICON_WRAPPER: 'left-nav-exceptions-icon',\n ALERTS_ICON_WRAPPER: 'left-nav-alerts-icon',\n MESSAGES_ICON_WRAPPER: 'left-nav-messages-icon',\n\n FOOTER_MENU: 'leftnav-container',\n FOOTER_SEPARATOR: 'ds-leftnavigation-footer-separator',\n // repeated with \"ITEM\" above, APP QA team doesn't approve us changing this.\n // IF anyone come with the request to have a separate value for this, address them to guncha/vinoth.\n FOOTER_ITEM: 'leftnav-item-container',\n\n VERTICAL_SEPARATOR: 'ds-leftnavigation-vertical-separator',\n\n // Things that are not slots (why?) and still need data-testids (that needs to not change else APP QA team can't work)\n NOTIFICATION_ICON: 'left-nav-notifications-icon',\n ALERTS_ICON: 'left-nav-alerts-icon',\n EXCEPTIONS_ICON: 'left-nav-exceptions-icon',\n MESSAGES_ICON: 'left-nav-messages-icon',\n\n // I don't know if there was already a slot or not because the naming convention is confusing and we can't change it.\n // so I am re-defining those to be sure.\n // (usually this comes from previous implementation \"slot\" being a \"nested\" slot that inherits the slot from the child)\n DROPDOWN_MENU_TRIGGER_WRAPPER: 'dropdown-menu-trigger-wrapper', // used to be dsDropdownmenuRoot slot at time of writing this comment\n\n NOTIFICATIONS_ICON: 'left-nav-notifications-icon', // used to be dsIconRoot slot at time of writing this comment\n LEFT_COMPONENT_CHEVRON: 'leftnav-leftcomponent-chevron', // used to be dsButtonRoot slot at time of writing this comment\n // VERY SPECIAL CASE, THE SLOT FOOTER_BTN GOES TO THE ICON WHEN COLLAPSED, TO THE BTN WHEN EXPANDED\n // WE CAN'T FIX THE TECH DEBT\n FOOTER_BTN: 'leftnav-footer-btn', // used to be [ \"dsIconRoot\", \"dsButtonRoot\" ] slots at time of writing this comment\n // VERY SPECIAL CASE 2\n // THE SLOT IS TECHNICALLY dsLeftnavigationItemLabel\n // which is LEFT_NAVIGATION_SLOTS.ITEM_LABEL\n // BUT the data-test-id is either \"leftnav-itemlabel\" or \"leftnav-list-item-label\"\n // APPARENTLY (we are not sure) based on it's \"type\"\n // \"leftnav-list-item-label\" for:\n // - ITEM_TYPES.LEFT_NAV_ITEM_TEXT_LABEL\n // - ITEM_TYPES.LEFT_NAV_ITEM_WITH_DATE\n // - ITEM_TYPES.LEFT_NAV_ITEM_UNCONTROLLED_DRILLDOWN\n // - ITEM_TYPES.LEFT_NAV_ITEM_CONTROLLED_DRILLDOWN\n // WE CAN'T FIX THE TECH DEBT\n // IF we somehow need to change this, address them to guncha/vinoth.\n LIST_ITEM_LABEL_ID_EXCEPTION: 'leftnav-list-item-label',\n};\n\nexport const DSLeftNavigationSlots = LEFT_NAVIGATION_SLOTS;\n"],
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,+BAA+B;AAEjC,MAAM,uBAAuB;AAG7B,MAAM,iCAAiC;AAAA,EAC5C,OAAO;AACT;AAGO,MAAM,wBAAwB;AAAA,EACnC,qBAAqB;AAAA,EACrB,iBAAiB;AAAA,EACjB,iBAAiB;AAAA,EACjB,sBAAsB;AAAA,EACtB,kBAAkB;AAAA,EAClB,iBAAiB;AAAA,EACjB,kBAAkB;AAAA,EAClB,qBAAqB;AAAA,EACrB,yBAAyB;AAAA,EACzB,aAAa;AAAA,EACb,cAAc;AAAA,EACd,aAAa;AAAA,EACb,sBAAsB;AAAA,EACtB,kBAAkB;AAAA,EAClB,MAAM;AAAA,EACN,oBAAoB;AAAA,EACpB,mBAAmB;AAAA,EACnB,WAAW;AAAA,EACX,YAAY;AAAA,EACZ,gBAAgB;AAAA,EAChB,gBAAgB;AAAA,EAChB,gBAAgB;AAAA,EAChB,aAAa;AAAA,EACb,uBAAuB;AAAA,EACvB,yBAAyB;AAAA,EACzB,oBAAoB;AAAA,EACpB,iBAAiB;AAAA,EACjB,MAAM;AAAA,EACN,mBAAmB;AAAA,EACnB,eAAe;AAAA,EACf,qBAAqB;AAAA,EACrB,oBAAoB;AACtB;AAGO,MAAM,8BAA8B;AAAA,EACzC,GAAG,wBAAwB,sBAAsB,qBAAqB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAQtE,MAAM;AAAA,EACN,aAAa;AAAA,EACb,iBAAiB;AAAA,EAEjB,qBAAqB;AAAA,EAErB,sBAAsB;AAAA,EACtB,kBAAkB;AAAA,EAClB,iBAAiB;AAAA,EACjB,kBAAkB;AAAA,EAElB,MAAM;AAAA,EACN,oBAAoB;AAAA,EACpB,YAAY;AAAA,EACZ,WAAW;AAAA,EACX,gBAAgB;AAAA,EAChB,mBAAmB;AAAA;AAAA;AAAA,EAInB,gBAAgB;AAAA,EAChB,iBAAiB;AAAA,EACjB,iBAAiB;AAAA,EAEjB,mBAAmB;AAAA,EACnB,eAAe;AAAA,EACf,qBAAqB;AAAA,EAErB,yBAAyB;AAAA,EAEzB,yBAAyB;AAAA,EACzB,qBAAqB;AAAA,EACrB,uBAAuB;AAAA,EAEvB,aAAa;AAAA,EACb,kBAAkB;AAAA;AAAA;AAAA,EAGlB,aAAa;AAAA,EAEb,oBAAoB;AAAA;AAAA,EAGpB,mBAAmB;AAAA,EACnB,aAAa;AAAA,EACb,iBAAiB;AAAA,EACjB,eAAe;AAAA;AAAA;AAAA;AAAA,EAKf,+BAA+B;AAAA;AAAA,EAE/B,oBAAoB;AAAA;AAAA,EACpB,wBAAwB;AAAA;AAAA;AAAA;AAAA,EAGxB,YAAY;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAaZ,8BAA8B;AAChC;AAEO,MAAM,wBAAwB;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -1,10 +1,11 @@
|
|
|
1
1
|
import * as React from "react";
|
|
2
2
|
import { Fragment, jsx, jsxs } from "react/jsx-runtime";
|
|
3
|
-
import { useContext, useMemo
|
|
4
|
-
import { StyledItem, StyledCollapsedContainer, StyledBorderBottom } from "./styled.js";
|
|
3
|
+
import { useCallback, useContext, useMemo } from "react";
|
|
5
4
|
import { LeftNavContext } from "../../LeftNavigationContext.js";
|
|
6
|
-
import {
|
|
5
|
+
import { LEFT_NAVIGATION_DATA_TESTID } from "../../constants/constants.js";
|
|
7
6
|
import { useKeyboardNavigation } from "../../hooks/index.js";
|
|
7
|
+
import { StyledBorderBottom, StyledCollapsedContainer, StyledItem } from "./styled.js";
|
|
8
|
+
import { usePropsWithDefaults } from "./usePropsWithDefaults.js";
|
|
8
9
|
const ItemRenderer = (props) => {
|
|
9
10
|
const propsWithDefault = usePropsWithDefaults(props);
|
|
10
11
|
const {
|
|
@@ -83,9 +84,24 @@ const ItemRenderer = (props) => {
|
|
|
83
84
|
"data-opened": opened,
|
|
84
85
|
"data-type": item.type,
|
|
85
86
|
"aria-label": ariaLabel,
|
|
87
|
+
"data-testid": LEFT_NAVIGATION_DATA_TESTID.ITEM,
|
|
86
88
|
children: [
|
|
87
|
-
!expandedForAnimation ? /* @__PURE__ */ jsx(
|
|
88
|
-
|
|
89
|
+
!expandedForAnimation ? /* @__PURE__ */ jsx(
|
|
90
|
+
StyledCollapsedContainer,
|
|
91
|
+
{
|
|
92
|
+
justifyContent: "center",
|
|
93
|
+
"data-testid": LEFT_NAVIGATION_DATA_TESTID.COLLAPSED_CONTAINER,
|
|
94
|
+
children: CollapsedComponent && /* @__PURE__ */ jsx(CollapsedComponent, { item, ctx })
|
|
95
|
+
}
|
|
96
|
+
) : children,
|
|
97
|
+
hasBorderBottom && /* @__PURE__ */ jsx(
|
|
98
|
+
StyledBorderBottom,
|
|
99
|
+
{
|
|
100
|
+
opened,
|
|
101
|
+
borderBottomMr,
|
|
102
|
+
"data-testid": LEFT_NAVIGATION_DATA_TESTID.ITEM_BORDER_BOTTOM
|
|
103
|
+
}
|
|
104
|
+
)
|
|
89
105
|
]
|
|
90
106
|
}
|
|
91
107
|
),
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
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
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable complexity */\n/* eslint-disable max-lines */\nimport React, { useCallback, useContext, useMemo } from 'react';\nimport { LeftNavContext } from '../../LeftNavigationContext.js';\nimport { LEFT_NAVIGATION_DATA_TESTID } from '../../constants/constants.js';\nimport { useKeyboardNavigation } from '../../hooks/index.js';\nimport type { DSLeftNavigationT } from '../../react-desc-prop-types.js';\nimport { StyledBorderBottom, StyledCollapsedContainer, StyledItem } from './styled.js';\nimport { usePropsWithDefaults } from './usePropsWithDefaults.js';\n\nexport const ItemRenderer: React.ComponentType<DSLeftNavigationT.ItemRendererT> = (props) => {\n const propsWithDefault = usePropsWithDefaults(props);\n const {\n item,\n item: {\n dsId,\n itemOpts: { selectable = false, focuseable, indent, ariaLabel, ariaRole, ariaExpanded, ariaDescribedBy },\n CollapsedComponent,\n },\n subitems,\n minHeight,\n paddingTop,\n onClick,\n shadowStyle,\n hasBorderBottom,\n borderBottomMr,\n children,\n } = propsWithDefault;\n\n const ctx = useContext(LeftNavContext);\n const {\n leftNavProps: { onItemClick, openedItem },\n expandedForAnimation,\n selectedParent,\n selectedItem,\n setSelectedItem,\n setFocusedItem,\n visibleItemsRefs,\n } = ctx;\n\n const opened = dsId === openedItem;\n\n const handleOnClick = useCallback(\n (e: React.MouseEvent<HTMLElement>) => {\n if (onClick) onClick(); // used by uncontrolled drilldowns\n if (onItemClick) onItemClick(item, e);\n if (selectable) setSelectedItem(item.dsId as string);\n },\n [onItemClick, item, setSelectedItem, selectable, onClick],\n );\n\n const handleFocus = useCallback(() => {\n if (focuseable) setFocusedItem(dsId as string);\n }, [dsId, setFocusedItem, focuseable]);\n\n const onKeyDown = useKeyboardNavigation({\n item,\n onClick: handleOnClick,\n });\n\n const cols = useMemo(() => (expandedForAnimation ? ['auto', '1fr', 'auto'] : ['38px']), [expandedForAnimation]);\n const isSelected = useMemo(() => selectedItem === dsId, [selectedItem, dsId]);\n\n if (!expandedForAnimation && !CollapsedComponent) {\n return null;\n }\n\n const isSelectedParent = selectedParent === dsId;\n const visibleItemRef = dsId ? visibleItemsRefs.current[dsId] : undefined;\n return (\n <>\n <StyledItem\n innerRef={visibleItemRef}\n pt={paddingTop}\n pl={indent === undefined ? 'xxxs' : `${indent}px`}\n minHeight={minHeight}\n shadowStyle={shadowStyle(opened, item.type)}\n alignItems=\"flex-start\"\n cols={cols}\n onClick={!opened ? handleOnClick : () => null}\n onKeyDown={onKeyDown}\n selectable={selectable}\n selected={isSelected}\n selectedParent={isSelectedParent}\n opened={opened}\n onFocus={handleFocus}\n tabIndex={focuseable ? 0 : undefined}\n aria-describedby={ariaDescribedBy}\n aria-expanded={ariaExpanded}\n role={ariaRole}\n data-selected={isSelected}\n data-selectedparent={isSelectedParent}\n data-opened={opened}\n data-type={item.type}\n aria-label={ariaLabel}\n data-testid={LEFT_NAVIGATION_DATA_TESTID.ITEM} // https://jira.elliemae.io/browse/PUI-15589\n >\n {!expandedForAnimation ? (\n <StyledCollapsedContainer\n justifyContent=\"center\"\n data-testid={LEFT_NAVIGATION_DATA_TESTID.COLLAPSED_CONTAINER} // https://jira.elliemae.io/browse/PUI-15589\n >\n {CollapsedComponent && <CollapsedComponent item={item} ctx={ctx} />}\n </StyledCollapsedContainer>\n ) : (\n children\n )}\n {hasBorderBottom && (\n <StyledBorderBottom\n opened={opened}\n borderBottomMr={borderBottomMr}\n data-testid={LEFT_NAVIGATION_DATA_TESTID.ITEM_BORDER_BOTTOM} // https://jira.elliemae.io/browse/PUI-15589\n />\n )}\n </StyledItem>\n {subitems}\n </>\n );\n};\n"],
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;ACsEnB,mBAgC+B,KA/B7B,YADF;AApEJ,SAAgB,aAAa,YAAY,eAAe;AACxD,SAAS,sBAAsB;AAC/B,SAAS,mCAAmC;AAC5C,SAAS,6BAA6B;AAEtC,SAAS,oBAAoB,0BAA0B,kBAAkB;AACzE,SAAS,4BAA4B;AAE9B,MAAM,eAAqE,CAAC,UAAU;AAC3F,QAAM,mBAAmB,qBAAqB,KAAK;AACnD,QAAM;AAAA,IACJ;AAAA,IACA,MAAM;AAAA,MACJ;AAAA,MACA,UAAU,EAAE,aAAa,OAAO,YAAY,QAAQ,WAAW,UAAU,cAAc,gBAAgB;AAAA,MACvG;AAAA,IACF;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI;AAEJ,QAAM,MAAM,WAAW,cAAc;AACrC,QAAM;AAAA,IACJ,cAAc,EAAE,aAAa,WAAW;AAAA,IACxC;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI;AAEJ,QAAM,SAAS,SAAS;AAExB,QAAM,gBAAgB;AAAA,IACpB,CAAC,MAAqC;AACpC,UAAI,QAAS,SAAQ;AACrB,UAAI,YAAa,aAAY,MAAM,CAAC;AACpC,UAAI,WAAY,iBAAgB,KAAK,IAAc;AAAA,IACrD;AAAA,IACA,CAAC,aAAa,MAAM,iBAAiB,YAAY,OAAO;AAAA,EAC1D;AAEA,QAAM,cAAc,YAAY,MAAM;AACpC,QAAI,WAAY,gBAAe,IAAc;AAAA,EAC/C,GAAG,CAAC,MAAM,gBAAgB,UAAU,CAAC;AAErC,QAAM,YAAY,sBAAsB;AAAA,IACtC;AAAA,IACA,SAAS;AAAA,EACX,CAAC;AAED,QAAM,OAAO,QAAQ,MAAO,uBAAuB,CAAC,QAAQ,OAAO,MAAM,IAAI,CAAC,MAAM,GAAI,CAAC,oBAAoB,CAAC;AAC9G,QAAM,aAAa,QAAQ,MAAM,iBAAiB,MAAM,CAAC,cAAc,IAAI,CAAC;AAE5E,MAAI,CAAC,wBAAwB,CAAC,oBAAoB;AAChD,WAAO;AAAA,EACT;AAEA,QAAM,mBAAmB,mBAAmB;AAC5C,QAAM,iBAAiB,OAAO,iBAAiB,QAAQ,IAAI,IAAI;AAC/D,SACE,iCACE;AAAA;AAAA,MAAC;AAAA;AAAA,QACC,UAAU;AAAA,QACV,IAAI;AAAA,QACJ,IAAI,WAAW,SAAY,SAAS,GAAG,MAAM;AAAA,QAC7C;AAAA,QACA,aAAa,YAAY,QAAQ,KAAK,IAAI;AAAA,QAC1C,YAAW;AAAA,QACX;AAAA,QACA,SAAS,CAAC,SAAS,gBAAgB,MAAM;AAAA,QACzC;AAAA,QACA;AAAA,QACA,UAAU;AAAA,QACV,gBAAgB;AAAA,QAChB;AAAA,QACA,SAAS;AAAA,QACT,UAAU,aAAa,IAAI;AAAA,QAC3B,oBAAkB;AAAA,QAClB,iBAAe;AAAA,QACf,MAAM;AAAA,QACN,iBAAe;AAAA,QACf,uBAAqB;AAAA,QACrB,eAAa;AAAA,QACb,aAAW,KAAK;AAAA,QAChB,cAAY;AAAA,QACZ,eAAa,4BAA4B;AAAA,QAExC;AAAA,WAAC,uBACA;AAAA,YAAC;AAAA;AAAA,cACC,gBAAe;AAAA,cACf,eAAa,4BAA4B;AAAA,cAExC,gCAAsB,oBAAC,sBAAmB,MAAY,KAAU;AAAA;AAAA,UACnE,IAEA;AAAA,UAED,mBACC;AAAA,YAAC;AAAA;AAAA,cACC;AAAA,cACA;AAAA,cACA,eAAa,4BAA4B;AAAA;AAAA,UAC3C;AAAA;AAAA;AAAA,IAEJ;AAAA,IACC;AAAA,KACH;AAEJ;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -1,14 +1,14 @@
|
|
|
1
1
|
import * as React from "react";
|
|
2
2
|
import { jsx, jsxs } from "react/jsx-runtime";
|
|
3
|
+
import Grid from "@elliemae/ds-grid";
|
|
3
4
|
import {
|
|
4
5
|
AlertsSmallFill,
|
|
5
|
-
Notifications as InternalNotifications,
|
|
6
6
|
ExceptionsSmallFill,
|
|
7
|
+
Notifications as InternalNotifications,
|
|
7
8
|
MessagesSmallFill
|
|
8
9
|
} from "@elliemae/ds-icons";
|
|
9
10
|
import { styled } from "@elliemae/ds-system";
|
|
10
|
-
import
|
|
11
|
-
import { DSLeftNavigationName, LEFT_NAVIGATION_SLOTS } from "../../constants/constants.js";
|
|
11
|
+
import { DSLeftNavigationName, LEFT_NAVIGATION_DATA_TESTID, LEFT_NAVIGATION_SLOTS } from "../../constants/constants.js";
|
|
12
12
|
const StyledIconContainer = styled("div", {
|
|
13
13
|
name: DSLeftNavigationName,
|
|
14
14
|
slot: LEFT_NAVIGATION_SLOTS.NOTIFICATIONS_CONTAINER
|
|
@@ -37,14 +37,51 @@ const Notifications = ({
|
|
|
37
37
|
exceptions = false,
|
|
38
38
|
alerts = false,
|
|
39
39
|
messages = false
|
|
40
|
-
}) => /* @__PURE__ */ jsxs(
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
40
|
+
}) => /* @__PURE__ */ jsxs(
|
|
41
|
+
StyledIconContainer,
|
|
42
|
+
{
|
|
43
|
+
"data-testid": LEFT_NAVIGATION_DATA_TESTID.NOTIFICATIONS_CONTAINER,
|
|
44
|
+
children: [
|
|
45
|
+
/* @__PURE__ */ jsx(
|
|
46
|
+
StyledInternalNotifications,
|
|
47
|
+
{
|
|
48
|
+
size: "m",
|
|
49
|
+
color: ["brand-primary", "800"],
|
|
50
|
+
"data-testid": LEFT_NAVIGATION_DATA_TESTID.NOTIFICATIONS_ICON
|
|
51
|
+
}
|
|
52
|
+
),
|
|
53
|
+
(exceptions || alerts || messages) && /* @__PURE__ */ jsxs(Grid, { cols: ["1fr", "1fr", "1fr"], gutter: "xxxs", mt: "2px", children: [
|
|
54
|
+
/* @__PURE__ */ jsx(
|
|
55
|
+
StyledExceptionsSmallFillWrapper,
|
|
56
|
+
{
|
|
57
|
+
width: "6px",
|
|
58
|
+
height: "6px",
|
|
59
|
+
"data-testid": LEFT_NAVIGATION_DATA_TESTID.EXCEPTIONS_ICON_WRAPPER,
|
|
60
|
+
children: exceptions && /* @__PURE__ */ jsx(ExceptionsSmallFill, { width: "6px", height: "6px", color: ["warning", "900"] })
|
|
61
|
+
}
|
|
62
|
+
),
|
|
63
|
+
/* @__PURE__ */ jsx(
|
|
64
|
+
StyledAlertsSmallFillWrapper,
|
|
65
|
+
{
|
|
66
|
+
width: "6px",
|
|
67
|
+
height: "6px",
|
|
68
|
+
"data-testid": LEFT_NAVIGATION_DATA_TESTID.ALERTS_ICON_WRAPPER,
|
|
69
|
+
children: alerts && /* @__PURE__ */ jsx(AlertsSmallFill, { width: "6px", height: "6px", color: ["danger", "900"] })
|
|
70
|
+
}
|
|
71
|
+
),
|
|
72
|
+
/* @__PURE__ */ jsx(
|
|
73
|
+
StyledMessagesSmallFillWrapper,
|
|
74
|
+
{
|
|
75
|
+
width: "6px",
|
|
76
|
+
height: "6px",
|
|
77
|
+
"data-testid": LEFT_NAVIGATION_DATA_TESTID.MESSAGES_ICON_WRAPPER,
|
|
78
|
+
children: messages && /* @__PURE__ */ jsx(MessagesSmallFill, { width: "6px", height: "6px", color: ["success", "900"] })
|
|
79
|
+
}
|
|
80
|
+
)
|
|
81
|
+
] })
|
|
82
|
+
]
|
|
83
|
+
}
|
|
84
|
+
);
|
|
48
85
|
var Notifications_default = Notifications;
|
|
49
86
|
export {
|
|
50
87
|
Notifications,
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
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", "/* eslint-disable @typescript-eslint/no-unsafe-assignment */\nimport
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable @typescript-eslint/no-unsafe-assignment */\nimport Grid from '@elliemae/ds-grid';\nimport {\n AlertsSmallFill,\n ExceptionsSmallFill,\n Notifications as InternalNotifications,\n MessagesSmallFill,\n} from '@elliemae/ds-icons';\nimport { styled } from '@elliemae/ds-system';\nimport { DSLeftNavigationName, LEFT_NAVIGATION_DATA_TESTID, LEFT_NAVIGATION_SLOTS } from '../../constants/constants.js';\n\nconst StyledIconContainer = styled('div', {\n name: DSLeftNavigationName,\n slot: LEFT_NAVIGATION_SLOTS.NOTIFICATIONS_CONTAINER,\n})`\n display: flex;\n flex-direction: column;\n align-items: center;\n`;\ntype NotificationsProps = {\n exceptions?: boolean;\n alerts?: boolean;\n messages?: boolean;\n};\nconst StyledInternalNotifications = styled(InternalNotifications, {\n name: DSLeftNavigationName,\n slot: LEFT_NAVIGATION_SLOTS.NOTIFICATIONS_ICON,\n})``;\nconst StyledExceptionsSmallFillWrapper = styled(Grid, {\n name: DSLeftNavigationName,\n slot: LEFT_NAVIGATION_SLOTS.EXCEPTIONS_ICON_WRAPPER,\n})``;\nconst StyledAlertsSmallFillWrapper = styled(Grid, {\n name: DSLeftNavigationName,\n slot: LEFT_NAVIGATION_SLOTS.ALERTS_ICON_WRAPPER,\n})``;\nconst StyledMessagesSmallFillWrapper = styled(Grid, {\n name: DSLeftNavigationName,\n slot: LEFT_NAVIGATION_SLOTS.MESSAGES_ICON_WRAPPER,\n})``;\n\nexport const Notifications = ({\n exceptions = false,\n alerts = false,\n messages = false,\n}: NotificationsProps): JSX.Element => (\n <StyledIconContainer\n data-testid={LEFT_NAVIGATION_DATA_TESTID.NOTIFICATIONS_CONTAINER} // https://jira.elliemae.io/browse/PUI-15589\n >\n <StyledInternalNotifications\n size=\"m\"\n color={['brand-primary', '800']}\n data-testid={LEFT_NAVIGATION_DATA_TESTID.NOTIFICATIONS_ICON} // https://jira.elliemae.io/browse/PUI-15589\n />\n {(exceptions || alerts || messages) && (\n <Grid cols={['1fr', '1fr', '1fr']} gutter=\"xxxs\" mt=\"2px\">\n <StyledExceptionsSmallFillWrapper\n width=\"6px\"\n height=\"6px\"\n data-testid={LEFT_NAVIGATION_DATA_TESTID.EXCEPTIONS_ICON_WRAPPER} // https://jira.elliemae.io/browse/PUI-15589\n >\n {exceptions && <ExceptionsSmallFill width=\"6px\" height=\"6px\" color={['warning', '900']} />}\n </StyledExceptionsSmallFillWrapper>\n <StyledAlertsSmallFillWrapper\n width=\"6px\"\n height=\"6px\"\n data-testid={LEFT_NAVIGATION_DATA_TESTID.ALERTS_ICON_WRAPPER} // https://jira.elliemae.io/browse/PUI-15589\n >\n {alerts && <AlertsSmallFill width=\"6px\" height=\"6px\" color={['danger', '900']} />}\n </StyledAlertsSmallFillWrapper>\n <StyledMessagesSmallFillWrapper\n width=\"6px\"\n height=\"6px\"\n data-testid={LEFT_NAVIGATION_DATA_TESTID.MESSAGES_ICON_WRAPPER} // https://jira.elliemae.io/browse/PUI-15589\n >\n {messages && <MessagesSmallFill width=\"6px\" height=\"6px\" color={['success', '900']} />}\n </StyledMessagesSmallFillWrapper>\n </Grid>\n )}\n </StyledIconContainer>\n);\n\nexport default Notifications;\n"],
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;ACiDnB,cAME,YANF;AAhDJ,OAAO,UAAU;AACjB;AAAA,EACE;AAAA,EACA;AAAA,EACA,iBAAiB;AAAA,EACjB;AAAA,OACK;AACP,SAAS,cAAc;AACvB,SAAS,sBAAsB,6BAA6B,6BAA6B;AAEzF,MAAM,sBAAsB,OAAO,OAAO;AAAA,EACxC,MAAM;AAAA,EACN,MAAM,sBAAsB;AAC9B,CAAC;AAAA;AAAA;AAAA;AAAA;AAUD,MAAM,8BAA8B,OAAO,uBAAuB;AAAA,EAChE,MAAM;AAAA,EACN,MAAM,sBAAsB;AAC9B,CAAC;AACD,MAAM,mCAAmC,OAAO,MAAM;AAAA,EACpD,MAAM;AAAA,EACN,MAAM,sBAAsB;AAC9B,CAAC;AACD,MAAM,+BAA+B,OAAO,MAAM;AAAA,EAChD,MAAM;AAAA,EACN,MAAM,sBAAsB;AAC9B,CAAC;AACD,MAAM,iCAAiC,OAAO,MAAM;AAAA,EAClD,MAAM;AAAA,EACN,MAAM,sBAAsB;AAC9B,CAAC;AAEM,MAAM,gBAAgB,CAAC;AAAA,EAC5B,aAAa;AAAA,EACb,SAAS;AAAA,EACT,WAAW;AACb,MACE;AAAA,EAAC;AAAA;AAAA,IACC,eAAa,4BAA4B;AAAA,IAEzC;AAAA;AAAA,QAAC;AAAA;AAAA,UACC,MAAK;AAAA,UACL,OAAO,CAAC,iBAAiB,KAAK;AAAA,UAC9B,eAAa,4BAA4B;AAAA;AAAA,MAC3C;AAAA,OACE,cAAc,UAAU,aACxB,qBAAC,QAAK,MAAM,CAAC,OAAO,OAAO,KAAK,GAAG,QAAO,QAAO,IAAG,OAClD;AAAA;AAAA,UAAC;AAAA;AAAA,YACC,OAAM;AAAA,YACN,QAAO;AAAA,YACP,eAAa,4BAA4B;AAAA,YAExC,wBAAc,oBAAC,uBAAoB,OAAM,OAAM,QAAO,OAAM,OAAO,CAAC,WAAW,KAAK,GAAG;AAAA;AAAA,QAC1F;AAAA,QACA;AAAA,UAAC;AAAA;AAAA,YACC,OAAM;AAAA,YACN,QAAO;AAAA,YACP,eAAa,4BAA4B;AAAA,YAExC,oBAAU,oBAAC,mBAAgB,OAAM,OAAM,QAAO,OAAM,OAAO,CAAC,UAAU,KAAK,GAAG;AAAA;AAAA,QACjF;AAAA,QACA;AAAA,UAAC;AAAA;AAAA,YACC,OAAM;AAAA,YACN,QAAO;AAAA,YACP,eAAa,4BAA4B;AAAA,YAExC,sBAAY,oBAAC,qBAAkB,OAAM,OAAM,QAAO,OAAM,OAAO,CAAC,WAAW,KAAK,GAAG;AAAA;AAAA,QACtF;AAAA,SACF;AAAA;AAAA;AAEJ;AAGF,IAAO,wBAAQ;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/dist/esm/index.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import * as React from "react";
|
|
2
2
|
import { LeftNavigation } from "./LeftNavigation.js";
|
|
3
|
-
var
|
|
3
|
+
var index_default = LeftNavigation;
|
|
4
4
|
import { LeftNavItemPropsSchema, LeftNavItemOptionsSchema } from "./react-desc-prop-types.js";
|
|
5
5
|
import { LeftNavigation as LeftNavigation2, LeftNavigationWithSchema } from "./LeftNavigation.js";
|
|
6
6
|
export * from "./exported-related/index.js";
|
|
@@ -21,6 +21,6 @@ export {
|
|
|
21
21
|
LeftNavItemPropsSchema,
|
|
22
22
|
LeftNavigation2 as LeftNavigation,
|
|
23
23
|
LeftNavigationWithSchema,
|
|
24
|
-
|
|
24
|
+
index_default as default
|
|
25
25
|
};
|
|
26
26
|
//# sourceMappingURL=index.js.map
|
package/dist/esm/index.js.map
CHANGED
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../src/index.tsx"],
|
|
4
4
|
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { LeftNavigation } from './LeftNavigation.js';\n\nexport default LeftNavigation;\nexport { LeftNavItemPropsSchema, LeftNavItemOptionsSchema, type DSLeftNavigationT } from './react-desc-prop-types.js';\nexport { LeftNavigation, LeftNavigationWithSchema } from './LeftNavigation.js';\nexport * from './exported-related/index.js';\nexport {\n DSLeftNavigationName,\n LEFT_NAVIGATION_SLOTS,\n LEFT_NAVIGATION_REGION_FOCUSES,\n LEFT_NAVIGATION_DATA_TESTID,\n // re-exporting under old alias to avoid not really useful breaking change\n DSLeftNavigationSlots,\n} from './constants/constants.js';\n"],
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,sBAAsB;AAE/B,IAAO,
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,sBAAsB;AAE/B,IAAO,gBAAQ;AACf,SAAS,wBAAwB,gCAAwD;AACzF,SAAS,kBAAAA,iBAAgB,gCAAgC;AACzD,cAAc;AACd;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EAEA;AAAA,OACK;",
|
|
6
6
|
"names": ["LeftNavigation"]
|
|
7
7
|
}
|
|
@@ -1,13 +1,14 @@
|
|
|
1
1
|
import * as React from "react";
|
|
2
2
|
import { jsx, jsxs } from "react/jsx-runtime";
|
|
3
|
-
import { useMemo } from "react";
|
|
4
|
-
import { SimpleTruncatedTooltipText } from "@elliemae/ds-truncated-tooltip-text";
|
|
5
3
|
import { ArrowheadDown, ArrowheadRight } from "@elliemae/ds-icons";
|
|
6
|
-
import {
|
|
7
|
-
import {
|
|
4
|
+
import { SimpleTruncatedTooltipText } from "@elliemae/ds-truncated-tooltip-text";
|
|
5
|
+
import { useMemo } from "react";
|
|
6
|
+
import { LEFT_NAVIGATION_DATA_TESTID } from "../../constants/constants.js";
|
|
7
|
+
import { ITEM_TYPES, ItemRenderer } from "../../exported-related/index.js";
|
|
8
8
|
import { ItemSeparator } from "../ItemSeparator/index.js";
|
|
9
|
-
import { ItemWithDate } from "../ItemWithDate/index.js";
|
|
10
9
|
import { ItemTextLabel } from "../ItemTextLabel/index.js";
|
|
10
|
+
import { ItemWithDate } from "../ItemWithDate/index.js";
|
|
11
|
+
import { StyledArrowContainer, StyledDate, StyledLabel, StyledRightContainer } from "../styled.js";
|
|
11
12
|
const outOfTheBoxSubitemsComponents = {
|
|
12
13
|
[ITEM_TYPES.LEFT_NAV_ITEM_SEPARATOR]: ItemSeparator,
|
|
13
14
|
[ITEM_TYPES.LEFT_NAV_ITEM_WITH_DATE]: ItemWithDate,
|
|
@@ -78,12 +79,47 @@ const ItemControlledDrilldown = (props) => {
|
|
|
78
79
|
minHeight: "32px",
|
|
79
80
|
paddingTop: "8px",
|
|
80
81
|
children: [
|
|
81
|
-
/* @__PURE__ */ jsx(
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
82
|
+
/* @__PURE__ */ jsx(
|
|
83
|
+
StyledArrowContainer,
|
|
84
|
+
{
|
|
85
|
+
pl: "xxs",
|
|
86
|
+
mt: "-2px",
|
|
87
|
+
"data-testid": LEFT_NAVIGATION_DATA_TESTID.ARROW_CONTAINER,
|
|
88
|
+
children: arrowIcon
|
|
89
|
+
}
|
|
90
|
+
),
|
|
91
|
+
/* @__PURE__ */ jsx(
|
|
92
|
+
StyledLabel,
|
|
93
|
+
{
|
|
94
|
+
pb: "xxxs",
|
|
95
|
+
labelOverflow,
|
|
96
|
+
labelBold,
|
|
97
|
+
labelColor,
|
|
98
|
+
"data-testid": LEFT_NAVIGATION_DATA_TESTID.LIST_ITEM_LABEL_ID_EXCEPTION,
|
|
99
|
+
children: labelOverflow === "truncate" ? /* @__PURE__ */ jsx(SimpleTruncatedTooltipText, { value: label, placement: "bottom-start" }) : label
|
|
100
|
+
}
|
|
101
|
+
),
|
|
102
|
+
/* @__PURE__ */ jsxs(
|
|
103
|
+
StyledRightContainer,
|
|
104
|
+
{
|
|
105
|
+
pr: "xxs2",
|
|
106
|
+
cols: ["auto", "auto"],
|
|
107
|
+
alignItems: "center",
|
|
108
|
+
gutter: "xxs",
|
|
109
|
+
"data-testid": LEFT_NAVIGATION_DATA_TESTID.RIGHT_CONTAINER,
|
|
110
|
+
children: [
|
|
111
|
+
/* @__PURE__ */ jsx(
|
|
112
|
+
StyledDate,
|
|
113
|
+
{
|
|
114
|
+
ml: "xxs",
|
|
115
|
+
"data-testid": LEFT_NAVIGATION_DATA_TESTID.ITEM_DATE,
|
|
116
|
+
children: labelRightSection
|
|
117
|
+
}
|
|
118
|
+
),
|
|
119
|
+
RightComponent && /* @__PURE__ */ jsx(RightComponent, { ctx, item })
|
|
120
|
+
]
|
|
121
|
+
}
|
|
122
|
+
)
|
|
87
123
|
]
|
|
88
124
|
}
|
|
89
125
|
);
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/outOfTheBox/ItemControlledDrilldown/index.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { ArrowheadDown, ArrowheadRight } from '@elliemae/ds-icons';\nimport { SimpleTruncatedTooltipText } from '@elliemae/ds-truncated-tooltip-text';\nimport React, { useMemo } from 'react';\nimport { LEFT_NAVIGATION_DATA_TESTID } from '../../constants/constants.js';\nimport { ITEM_TYPES, ItemRenderer } from '../../exported-related/index.js';\nimport type { DSLeftNavigationT } from '../../react-desc-prop-types.js';\nimport { ItemSeparator } from '../ItemSeparator/index.js';\nimport { ItemTextLabel } from '../ItemTextLabel/index.js';\nimport { ItemWithDate } from '../ItemWithDate/index.js';\nimport { StyledArrowContainer, StyledDate, StyledLabel, StyledRightContainer } from '../styled.js';\n\nconst outOfTheBoxSubitemsComponents: Record<string, React.ComponentType<DSLeftNavigationT.ComponentProps>> = {\n [ITEM_TYPES.LEFT_NAV_ITEM_SEPARATOR]: ItemSeparator,\n [ITEM_TYPES.LEFT_NAV_ITEM_WITH_DATE]: ItemWithDate,\n [ITEM_TYPES.LEFT_NAV_ITEM_TEXT_LABEL]: ItemTextLabel,\n};\n\nconst OutOfTheBoxMapSubitem: React.ComponentType<DSLeftNavigationT.ComponentProps> = (props) => {\n const {\n item,\n item: { type, Component },\n ctx,\n } = props;\n\n if (typeof type === 'string' && !!outOfTheBoxSubitemsComponents[type]) {\n const OutOfTheBoxComponent = outOfTheBoxSubitemsComponents[type];\n const currentIndent = item.itemOpts?.indent ?? 0;\n const newItem = {\n ...item,\n itemOpts: { ...item.itemOpts, indent: currentIndent + 44 },\n };\n return <OutOfTheBoxComponent item={newItem} ctx={ctx} />;\n }\n if (!Component) return null;\n // we expect an error to be threw if Component is not defined and type is not a valid out-of-the-box...\n return <Component item={item} ctx={ctx} />;\n};\n\nexport const ItemControlledDrilldown = (props: DSLeftNavigationT.ComponentProps): JSX.Element => {\n const {\n item,\n item: {\n itemOpts: {\n label,\n RightComponent,\n labelRightSection,\n labelOverflow: itemLabelOverflow,\n labelBold,\n labelColor,\n isOpened,\n items,\n },\n },\n ctx,\n ctx: {\n leftNavProps: { labelOverflow: leftNavLabelOverflow },\n },\n } = props;\n\n const labelOverflow = itemLabelOverflow || leftNavLabelOverflow;\n\n const arrowIcon = useMemo(() => {\n const Component = isOpened ? ArrowheadDown : ArrowheadRight;\n return <Component width=\"24px\" height=\"18px\" color={['brand-primary', '800']} />;\n }, [isOpened]);\n\n const subitems = useMemo(() => {\n if (!isOpened || !items) return [];\n return items.map((subitem) => <OutOfTheBoxMapSubitem item={subitem} ctx={ctx} key={subitem.dsId} />);\n }, [isOpened, items, ctx]);\n\n return (\n <ItemRenderer\n item={{\n ...item,\n itemOpts: {\n ariaExpanded: isOpened,\n ariaRole: 'menuitem',\n ...item.itemOpts,\n openable: !isOpened,\n closable: isOpened,\n },\n CollapsedComponent: null,\n }}\n subitems={subitems}\n minHeight=\"32px\"\n paddingTop=\"8px\"\n >\n <StyledArrowContainer\n pl=\"xxs\"\n mt=\"-2px\"\n data-testid={LEFT_NAVIGATION_DATA_TESTID.ARROW_CONTAINER} // https://jira.elliemae.io/browse/PUI-15589\n >\n {arrowIcon}\n </StyledArrowContainer>\n <StyledLabel\n pb=\"xxxs\"\n labelOverflow={labelOverflow}\n labelBold={labelBold}\n labelColor={labelColor}\n data-testid={LEFT_NAVIGATION_DATA_TESTID.LIST_ITEM_LABEL_ID_EXCEPTION}\n >\n {labelOverflow === 'truncate' ? <SimpleTruncatedTooltipText value={label} placement=\"bottom-start\" /> : label}\n </StyledLabel>\n <StyledRightContainer\n pr=\"xxs2\"\n cols={['auto', 'auto']}\n alignItems=\"center\"\n gutter=\"xxs\"\n data-testid={LEFT_NAVIGATION_DATA_TESTID.RIGHT_CONTAINER} // https://jira.elliemae.io/browse/PUI-15589\n >\n <StyledDate\n ml=\"xxs\"\n data-testid={LEFT_NAVIGATION_DATA_TESTID.ITEM_DATE} // https://jira.elliemae.io/browse/PUI-15589\n >\n {labelRightSection}\n </StyledDate>\n {RightComponent && <RightComponent ctx={ctx} item={item} />}\n </StyledRightContainer>\n </ItemRenderer>\n );\n};\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -74,6 +74,7 @@ const ItemHeader = (props) => {
|
|
|
74
74
|
gutter: "1px",
|
|
75
75
|
pl: opened ? "xxs" : 0,
|
|
76
76
|
justifyItems: "center",
|
|
77
|
+
"data-testid": LEFT_NAVIGATION_DATA_TESTID.LEFT_CONTAINER,
|
|
77
78
|
children: [
|
|
78
79
|
opened && /* @__PURE__ */ jsx(
|
|
79
80
|
StyledChevronLeft,
|
|
@@ -87,6 +88,7 @@ const ItemHeader = (props) => {
|
|
|
87
88
|
setFocusedItem(CHEVRON_BACK_DS_ID);
|
|
88
89
|
},
|
|
89
90
|
"aria-label": `Close ${ariaLabel}`,
|
|
91
|
+
"data-testid": LEFT_NAVIGATION_DATA_TESTID.ITEM_CHEVRON_BACK,
|
|
90
92
|
children: /* @__PURE__ */ jsx(ChevronSmallLeft, { size: "m", color: ["brand-primary", "800"] })
|
|
91
93
|
}
|
|
92
94
|
),
|
|
@@ -115,6 +117,7 @@ const ItemHeader = (props) => {
|
|
|
115
117
|
e.stopPropagation();
|
|
116
118
|
},
|
|
117
119
|
onKeyDown: (e) => e.stopPropagation(),
|
|
120
|
+
"data-testid": LEFT_NAVIGATION_DATA_TESTID.RIGHT_CONTAINER,
|
|
118
121
|
children: RightComponent && /* @__PURE__ */ jsx(RightComponent, { ctx, item })
|
|
119
122
|
}
|
|
120
123
|
),
|
|
@@ -129,6 +132,7 @@ const ItemHeader = (props) => {
|
|
|
129
132
|
e.stopPropagation();
|
|
130
133
|
},
|
|
131
134
|
onKeyDown: (e) => e.stopPropagation(),
|
|
135
|
+
"data-testid": LEFT_NAVIGATION_DATA_TESTID.BOTTOM_CONTAINER,
|
|
132
136
|
children: /* @__PURE__ */ jsx(BottomComponent, { ctx, item })
|
|
133
137
|
}
|
|
134
138
|
)
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/outOfTheBox/ItemHeader/index.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable @typescript-eslint/no-unsafe-assignment */\n/* eslint-disable @typescript-eslint/no-unused-vars */\n/* eslint-disable max-lines */\n/* eslint-disable complexity */\nimport React, { useCallback } from 'react';\nimport { ChevronSmallLeft } from '@elliemae/ds-icons';\nimport { SimpleTruncatedTooltipText } from '@elliemae/ds-truncated-tooltip-text';\nimport type { Theme } from '@elliemae/ds-system';\nimport { ItemRenderer } from '../../exported-related/index.js';\nimport type { DSLeftNavigationT } from '../../react-desc-prop-types.js';\nimport {\n StyledItemLabel,\n StyledBottomContainer,\n StyledLeftContainer,\n StyledRightContainer,\n StyledChevronLeft,\n} from '../styled.js';\nimport { CHEVRON_BACK_DS_ID } from '../../exported-related/constants.js';\nimport { LEFT_NAVIGATION_DATA_TESTID } from '../../constants/constants.js';\n\nconst notOpenedShadowStyle = (isSelected: boolean) => (theme: Theme) =>\n `\n box-shadow: inset 4px 0 0 0 ${isSelected ? theme.colors.brand[400] : 'transparent'};\n\n :hover {\n box-shadow: inset 4px 0 0 0 ${isSelected ? theme.colors.brand[400] : theme.colors.brand[300]};\n }\n\n :active {\n box-shadow: inset 4px 0 0 0 ${theme.colors.brand[400]};\n }\n`;\n\nexport const ItemHeader = (props: DSLeftNavigationT.ComponentProps): JSX.Element => {\n const {\n item,\n item: {\n dsId,\n itemOpts: { label, RightComponent, BottomComponent, labelDataTestId, labelOverflow: itemLabelOverflow },\n CollapsedComponent = () => null,\n },\n ctx,\n ctx: {\n leftNavProps: { openedItem, labelOverflow: leftNavLabelOverflow, onItemClick },\n expandedForAnimation,\n setFocusedItem,\n selectedItem,\n selectedParent,\n },\n } = props;\n\n const labelOverflow = itemLabelOverflow || leftNavLabelOverflow;\n\n const opened = openedItem === dsId;\n\n const ariaLabel = item.itemOpts.ariaLabel ?? (typeof label === 'string' ? `${label}, category` : 'category');\n\n const isSelected = selectedItem === dsId || selectedParent === dsId;\n\n const shadowStyle = useCallback(\n (opened_: boolean) => (theme: Theme) =>\n !opened_ ? notOpenedShadowStyle(isSelected)(theme) : `box-shadow: inset 4px 0 0 0 #52A6EC`,\n [isSelected],\n );\n\n return (\n <ItemRenderer\n item={{\n ...item,\n itemOpts: {\n ariaLabel,\n ariaExpanded: opened,\n ...item.itemOpts,\n openable: expandedForAnimation && !opened,\n closable: expandedForAnimation && opened,\n selectable: !opened,\n },\n }}\n hasBorderBottom\n borderBottomMr={opened ? '12px' : '0px'}\n shadowStyle={shadowStyle}\n >\n <StyledLeftContainer\n cols={opened ? ['auto', 'auto'] : ['38px']}\n gutter=\"1px\"\n pl={opened ? 'xxs' : 0}\n justifyItems=\"center\"\n >\n {opened && (\n <StyledChevronLeft\n buttonType=\"raw\"\n onClick={(e: React.MouseEvent<HTMLElement> | React.KeyboardEvent<HTMLElement>) => {\n if (onItemClick) onItemClick(item, e as React.MouseEvent<HTMLElement>);\n }}\n onFocus={(e: React.FocusEvent) => {\n e.stopPropagation();\n setFocusedItem(CHEVRON_BACK_DS_ID);\n }}\n aria-label={`Close ${ariaLabel}`}\n >\n <ChevronSmallLeft size=\"m\" color={['brand-primary', '800']} />\n </StyledChevronLeft>\n )}\n {CollapsedComponent && <CollapsedComponent item={item} ctx={ctx} />}\n </StyledLeftContainer>\n <StyledItemLabel\n ml={opened ? 'xxs' : '1px'}\n mt=\"xxxs\"\n mb=\"15px\"\n labelOverflow={labelOverflow}\n data-testid={labelDataTestId || LEFT_NAVIGATION_DATA_TESTID.ITEM_LABEL}\n >\n {labelOverflow === 'truncate' ? <SimpleTruncatedTooltipText value={label} placement=\"bottom-start\" /> : label}\n </StyledItemLabel>\n <StyledRightContainer\n pl=\"xs\"\n pr={opened ? 'xxs2' : 'xxs'}\n onFocus={(e: React.FocusEvent) => {\n setFocusedItem(null);\n e.stopPropagation();\n }}\n onKeyDown={(e: React.KeyboardEvent) => e.stopPropagation()}\n >\n {RightComponent && <RightComponent ctx={ctx} item={item} />}\n </StyledRightContainer>\n {BottomComponent && (\n <StyledBottomContainer\n pb=\"xxxs\"\n pl=\"xxs\"\n pr=\"xxs\"\n onFocus={(e: React.FocusEvent) => {\n setFocusedItem(null);\n e.stopPropagation();\n }}\n onKeyDown={(e: React.KeyboardEvent) => e.stopPropagation()}\n >\n <BottomComponent ctx={ctx} item={item} />\n </StyledBottomContainer>\n )}\n </ItemRenderer>\n );\n};\n"],
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;ACkFjB,
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable @typescript-eslint/no-unsafe-assignment */\n/* eslint-disable @typescript-eslint/no-unused-vars */\n/* eslint-disable max-lines */\n/* eslint-disable complexity */\nimport React, { useCallback } from 'react';\nimport { ChevronSmallLeft } from '@elliemae/ds-icons';\nimport { SimpleTruncatedTooltipText } from '@elliemae/ds-truncated-tooltip-text';\nimport type { Theme } from '@elliemae/ds-system';\nimport { ItemRenderer } from '../../exported-related/index.js';\nimport type { DSLeftNavigationT } from '../../react-desc-prop-types.js';\nimport {\n StyledItemLabel,\n StyledBottomContainer,\n StyledLeftContainer,\n StyledRightContainer,\n StyledChevronLeft,\n} from '../styled.js';\nimport { CHEVRON_BACK_DS_ID } from '../../exported-related/constants.js';\nimport { LEFT_NAVIGATION_DATA_TESTID } from '../../constants/constants.js';\n\nconst notOpenedShadowStyle = (isSelected: boolean) => (theme: Theme) =>\n `\n box-shadow: inset 4px 0 0 0 ${isSelected ? theme.colors.brand[400] : 'transparent'};\n\n :hover {\n box-shadow: inset 4px 0 0 0 ${isSelected ? theme.colors.brand[400] : theme.colors.brand[300]};\n }\n\n :active {\n box-shadow: inset 4px 0 0 0 ${theme.colors.brand[400]};\n }\n`;\n\nexport const ItemHeader = (props: DSLeftNavigationT.ComponentProps): JSX.Element => {\n const {\n item,\n item: {\n dsId,\n itemOpts: { label, RightComponent, BottomComponent, labelDataTestId, labelOverflow: itemLabelOverflow },\n CollapsedComponent = () => null,\n },\n ctx,\n ctx: {\n leftNavProps: { openedItem, labelOverflow: leftNavLabelOverflow, onItemClick },\n expandedForAnimation,\n setFocusedItem,\n selectedItem,\n selectedParent,\n },\n } = props;\n\n const labelOverflow = itemLabelOverflow || leftNavLabelOverflow;\n\n const opened = openedItem === dsId;\n\n const ariaLabel = item.itemOpts.ariaLabel ?? (typeof label === 'string' ? `${label}, category` : 'category');\n\n const isSelected = selectedItem === dsId || selectedParent === dsId;\n\n const shadowStyle = useCallback(\n (opened_: boolean) => (theme: Theme) =>\n !opened_ ? notOpenedShadowStyle(isSelected)(theme) : `box-shadow: inset 4px 0 0 0 #52A6EC`,\n [isSelected],\n );\n\n return (\n <ItemRenderer\n item={{\n ...item,\n itemOpts: {\n ariaLabel,\n ariaExpanded: opened,\n ...item.itemOpts,\n openable: expandedForAnimation && !opened,\n closable: expandedForAnimation && opened,\n selectable: !opened,\n },\n }}\n hasBorderBottom\n borderBottomMr={opened ? '12px' : '0px'}\n shadowStyle={shadowStyle}\n >\n <StyledLeftContainer\n cols={opened ? ['auto', 'auto'] : ['38px']}\n gutter=\"1px\"\n pl={opened ? 'xxs' : 0}\n justifyItems=\"center\"\n data-testid={LEFT_NAVIGATION_DATA_TESTID.LEFT_CONTAINER} // https://jira.elliemae.io/browse/PUI-15589\n >\n {opened && (\n <StyledChevronLeft\n buttonType=\"raw\"\n onClick={(e: React.MouseEvent<HTMLElement> | React.KeyboardEvent<HTMLElement>) => {\n if (onItemClick) onItemClick(item, e as React.MouseEvent<HTMLElement>);\n }}\n onFocus={(e: React.FocusEvent) => {\n e.stopPropagation();\n setFocusedItem(CHEVRON_BACK_DS_ID);\n }}\n aria-label={`Close ${ariaLabel}`}\n data-testid={LEFT_NAVIGATION_DATA_TESTID.ITEM_CHEVRON_BACK} // https://jira.elliemae.io/browse/PUI-15589\n >\n <ChevronSmallLeft size=\"m\" color={['brand-primary', '800']} />\n </StyledChevronLeft>\n )}\n {CollapsedComponent && <CollapsedComponent item={item} ctx={ctx} />}\n </StyledLeftContainer>\n <StyledItemLabel\n ml={opened ? 'xxs' : '1px'}\n mt=\"xxxs\"\n mb=\"15px\"\n labelOverflow={labelOverflow}\n data-testid={labelDataTestId || LEFT_NAVIGATION_DATA_TESTID.ITEM_LABEL}\n >\n {labelOverflow === 'truncate' ? <SimpleTruncatedTooltipText value={label} placement=\"bottom-start\" /> : label}\n </StyledItemLabel>\n <StyledRightContainer\n pl=\"xs\"\n pr={opened ? 'xxs2' : 'xxs'}\n onFocus={(e: React.FocusEvent) => {\n setFocusedItem(null);\n e.stopPropagation();\n }}\n onKeyDown={(e: React.KeyboardEvent) => e.stopPropagation()}\n data-testid={LEFT_NAVIGATION_DATA_TESTID.RIGHT_CONTAINER} // https://jira.elliemae.io/browse/PUI-15589\n >\n {RightComponent && <RightComponent ctx={ctx} item={item} />}\n </StyledRightContainer>\n {BottomComponent && (\n <StyledBottomContainer\n pb=\"xxxs\"\n pl=\"xxs\"\n pr=\"xxs\"\n onFocus={(e: React.FocusEvent) => {\n setFocusedItem(null);\n e.stopPropagation();\n }}\n onKeyDown={(e: React.KeyboardEvent) => e.stopPropagation()}\n data-testid={LEFT_NAVIGATION_DATA_TESTID.BOTTOM_CONTAINER} // https://jira.elliemae.io/browse/PUI-15589\n >\n <BottomComponent ctx={ctx} item={item} />\n </StyledBottomContainer>\n )}\n </ItemRenderer>\n );\n};\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|