@elliemae/ds-left-navigation 3.51.0-rc.18 → 3.51.0-rc.19

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.
Files changed (30) hide show
  1. package/dist/cjs/constants/constants.js +14 -1
  2. package/dist/cjs/constants/constants.js.map +2 -2
  3. package/dist/cjs/outOfTheBox/ItemControlledDrilldown/index.js +11 -1
  4. package/dist/cjs/outOfTheBox/ItemControlledDrilldown/index.js.map +2 -2
  5. package/dist/cjs/outOfTheBox/ItemTextLabel/index.js +1 -1
  6. package/dist/cjs/outOfTheBox/ItemTextLabel/index.js.map +1 -1
  7. package/dist/cjs/outOfTheBox/ItemUncontrolledDrilldown/index.js +1 -1
  8. package/dist/cjs/outOfTheBox/ItemUncontrolledDrilldown/index.js.map +1 -1
  9. package/dist/cjs/outOfTheBox/ItemWithDate/index.js +1 -1
  10. package/dist/cjs/outOfTheBox/ItemWithDate/index.js.map +1 -1
  11. package/dist/cjs/outOfTheBox/styled.js +28 -9
  12. package/dist/cjs/outOfTheBox/styled.js.map +2 -2
  13. package/dist/cjs/parts/LeftNavFooterItem/index.js +1 -0
  14. package/dist/cjs/parts/LeftNavFooterItem/index.js.map +2 -2
  15. package/dist/esm/constants/constants.js +14 -1
  16. package/dist/esm/constants/constants.js.map +2 -2
  17. package/dist/esm/outOfTheBox/ItemControlledDrilldown/index.js +11 -1
  18. package/dist/esm/outOfTheBox/ItemControlledDrilldown/index.js.map +2 -2
  19. package/dist/esm/outOfTheBox/ItemTextLabel/index.js +1 -1
  20. package/dist/esm/outOfTheBox/ItemTextLabel/index.js.map +1 -1
  21. package/dist/esm/outOfTheBox/ItemUncontrolledDrilldown/index.js +1 -1
  22. package/dist/esm/outOfTheBox/ItemUncontrolledDrilldown/index.js.map +1 -1
  23. package/dist/esm/outOfTheBox/ItemWithDate/index.js +1 -1
  24. package/dist/esm/outOfTheBox/ItemWithDate/index.js.map +1 -1
  25. package/dist/esm/outOfTheBox/styled.js +28 -9
  26. package/dist/esm/outOfTheBox/styled.js.map +2 -2
  27. package/dist/esm/parts/LeftNavFooterItem/index.js +1 -0
  28. package/dist/esm/parts/LeftNavFooterItem/index.js.map +2 -2
  29. package/dist/types/constants/constants.d.ts +1 -0
  30. package/package.json +10 -10
package/dist/cjs/constants/constants.js CHANGED
@@ -132,8 +132,21 @@ const LEFT_NAVIGATION_DATA_TESTID = {
132
132
  // used to be dsButtonRoot slot at time of writing this comment
133
133
  // VERY SPECIAL CASE, THE SLOT FOOTER_BTN GOES TO THE ICON WHEN COLLAPSED, TO THE BTN WHEN EXPANDED
134
134
  // WE CAN'T FIX THE TECH DEBT
135
- FOOTER_BTN: "leftnav-footer-btn"
135
+ FOOTER_BTN: "leftnav-footer-btn",
136
136
  // used to be [ "dsIconRoot", "dsButtonRoot" ] slots at time of writing this comment
137
+ // VERY SPECIAL CASE 2
138
+ // THE SLOT IS TECHNICALLY dsLeftnavigationItemLabel
139
+ // which is LEFT_NAVIGATION_SLOTS.ITEM_LABEL
140
+ // BUT the data-test-id is either "leftnav-itemlabel" or "leftnav-list-item-label"
141
+ // APPARENTLY (we are not sure) based on it's "type"
142
+ // "leftnav-list-item-label" for:
143
+ // - ITEM_TYPES.LEFT_NAV_ITEM_TEXT_LABEL
144
+ // - ITEM_TYPES.LEFT_NAV_ITEM_WITH_DATE
145
+ // - ITEM_TYPES.LEFT_NAV_ITEM_UNCONTROLLED_DRILLDOWN
146
+ // - ITEM_TYPES.LEFT_NAV_ITEM_CONTROLLED_DRILLDOWN
147
+ // WE CAN'T FIX THE TECH DEBT
148
+ // IF we somehow need to change this, address them to guncha/vinoth.
149
+ LIST_ITEM_LABEL_ID_EXCEPTION: "leftnav-list-item-label"
137
150
  };
138
151
  const DSLeftNavigationSlots = LEFT_NAVIGATION_SLOTS;
139
152
  //# sourceMappingURL=constants.js.map
package/dist/cjs/constants/constants.js.map CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../src/constants/constants.ts", "../../../../../../scripts/build/transpile/react-shim.js"],
4
- "sourcesContent": ["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};\n\nexport const DSLeftNavigationSlots = LEFT_NAVIGATION_SLOTS;\n", "import * as React from 'react';\nexport { React };\n"],
5
- "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,uBAAwC;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,OAAG,0CAAwB,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;AACd;AAEO,MAAM,wBAAwB;",
4
+ "sourcesContent": ["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", "import * as React from 'react';\nexport { React };\n"],
5
+ "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,uBAAwC;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,OAAG,0CAAwB,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
  }
package/dist/cjs/outOfTheBox/ItemControlledDrilldown/index.js CHANGED
@@ -121,7 +121,17 @@ const ItemControlledDrilldown = (props) => {
121
121
  children: arrowIcon
122
122
  }
123
123
  ),
124
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styled.StyledLabel, { pb: "xxxs", labelOverflow, labelBold, labelColor, children: labelOverflow === "truncate" ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_truncated_tooltip_text.SimpleTruncatedTooltipText, { value: label, placement: "bottom-start" }) : label }),
124
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
125
+ import_styled.StyledLabel,
126
+ {
127
+ pb: "xxxs",
128
+ labelOverflow,
129
+ labelBold,
130
+ labelColor,
131
+ "data-testid": import_constants.LEFT_NAVIGATION_DATA_TESTID.LIST_ITEM_LABEL_ID_EXCEPTION,
132
+ children: labelOverflow === "truncate" ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_truncated_tooltip_text.SimpleTruncatedTooltipText, { value: label, placement: "bottom-start" }) : label
133
+ }
134
+ ),
125
135
  /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
126
136
  import_styled.StyledRightContainer,
127
137
  {
package/dist/cjs/outOfTheBox/ItemControlledDrilldown/index.js.map CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../../src/outOfTheBox/ItemControlledDrilldown/index.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
4
- "sourcesContent": ["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 pb=\"xxxs\" labelOverflow={labelOverflow} labelBold={labelBold} labelColor={labelColor}>\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", "import * as React from 'react';\nexport { React };\n"],
5
- "mappings": "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",
4
+ "sourcesContent": ["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", "import * as React from 'react';\nexport { React };\n"],
5
+ "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;AD+BZ;AA/BX,sBAA8C;AAC9C,uCAA2C;AAC3C,mBAA+B;AAC/B,uBAA4C;AAC5C,8BAAyC;AAEzC,2BAA8B;AAC9B,2BAA8B;AAC9B,0BAA6B;AAC7B,oBAAoF;AAEpF,MAAM,gCAAuG;AAAA,EAC3G,CAAC,mCAAW,uBAAuB,GAAG;AAAA,EACtC,CAAC,mCAAW,uBAAuB,GAAG;AAAA,EACtC,CAAC,mCAAW,wBAAwB,GAAG;AACzC;AAEA,MAAM,wBAA+E,CAAC,UAAU;AAC9F,QAAM;AAAA,IACJ;AAAA,IACA,MAAM,EAAE,MAAM,UAAU;AAAA,IACxB;AAAA,EACF,IAAI;AAEJ,MAAI,OAAO,SAAS,YAAY,CAAC,CAAC,8BAA8B,IAAI,GAAG;AACrE,UAAM,uBAAuB,8BAA8B,IAAI;AAC/D,UAAM,gBAAgB,KAAK,UAAU,UAAU;AAC/C,UAAM,UAAU;AAAA,MACd,GAAG;AAAA,MACH,UAAU,EAAE,GAAG,KAAK,UAAU,QAAQ,gBAAgB,GAAG;AAAA,IAC3D;AACA,WAAO,4CAAC,wBAAqB,MAAM,SAAS,KAAU;AAAA,EACxD;AACA,MAAI,CAAC,UAAW,QAAO;AAEvB,SAAO,4CAAC,aAAU,MAAY,KAAU;AAC1C;AAEO,MAAM,0BAA0B,CAAC,UAAyD;AAC/F,QAAM;AAAA,IACJ;AAAA,IACA,MAAM;AAAA,MACJ,UAAU;AAAA,QACR;AAAA,QACA;AAAA,QACA;AAAA,QACA,eAAe;AAAA,QACf;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,MACF;AAAA,IACF;AAAA,IACA;AAAA,IACA,KAAK;AAAA,MACH,cAAc,EAAE,eAAe,qBAAqB;AAAA,IACtD;AAAA,EACF,IAAI;AAEJ,QAAM,gBAAgB,qBAAqB;AAE3C,QAAM,gBAAY,sBAAQ,MAAM;AAC9B,UAAM,YAAY,WAAW,gCAAgB;AAC7C,WAAO,4CAAC,aAAU,OAAM,QAAO,QAAO,QAAO,OAAO,CAAC,iBAAiB,KAAK,GAAG;AAAA,EAChF,GAAG,CAAC,QAAQ,CAAC;AAEb,QAAM,eAAW,sBAAQ,MAAM;AAC7B,QAAI,CAAC,YAAY,CAAC,MAAO,QAAO,CAAC;AACjC,WAAO,MAAM,IAAI,CAAC,YAAY,4CAAC,yBAAsB,MAAM,SAAS,OAAe,QAAQ,IAAM,CAAE;AAAA,EACrG,GAAG,CAAC,UAAU,OAAO,GAAG,CAAC;AAEzB,SACE;AAAA,IAAC;AAAA;AAAA,MACC,MAAM;AAAA,QACJ,GAAG;AAAA,QACH,UAAU;AAAA,UACR,cAAc;AAAA,UACd,UAAU;AAAA,UACV,GAAG,KAAK;AAAA,UACR,UAAU,CAAC;AAAA,UACX,UAAU;AAAA,QACZ;AAAA,QACA,oBAAoB;AAAA,MACtB;AAAA,MACA;AAAA,MACA,WAAU;AAAA,MACV,YAAW;AAAA,MAEX;AAAA;AAAA,UAAC;AAAA;AAAA,YACC,IAAG;AAAA,YACH,IAAG;AAAA,YACH,eAAa,6CAA4B;AAAA,YAExC;AAAA;AAAA,QACH;AAAA,QACA;AAAA,UAAC;AAAA;AAAA,YACC,IAAG;AAAA,YACH;AAAA,YACA;AAAA,YACA;AAAA,YACA,eAAa,6CAA4B;AAAA,YAExC,4BAAkB,aAAa,4CAAC,+DAA2B,OAAO,OAAO,WAAU,gBAAe,IAAK;AAAA;AAAA,QAC1G;AAAA,QACA;AAAA,UAAC;AAAA;AAAA,YACC,IAAG;AAAA,YACH,MAAM,CAAC,QAAQ,MAAM;AAAA,YACrB,YAAW;AAAA,YACX,QAAO;AAAA,YACP,eAAa,6CAA4B;AAAA,YAEzC;AAAA;AAAA,gBAAC;AAAA;AAAA,kBACC,IAAG;AAAA,kBACH,eAAa,6CAA4B;AAAA,kBAExC;AAAA;AAAA,cACH;AAAA,cACC,kBAAkB,4CAAC,kBAAe,KAAU,MAAY;AAAA;AAAA;AAAA,QAC3D;AAAA;AAAA;AAAA,EACF;AAEJ;",
6
6
  "names": []
7
7
  }
package/dist/cjs/outOfTheBox/ItemTextLabel/index.js CHANGED
@@ -69,7 +69,7 @@ const ItemTextLabel = (props) => {
69
69
  labelColor,
70
70
  mr: "xxs2",
71
71
  pb: "xxxs",
72
- "data-testid": labelDataTestId || import_constants.LEFT_NAVIGATION_DATA_TESTID.ITEM_LABEL,
72
+ "data-testid": labelDataTestId || import_constants.LEFT_NAVIGATION_DATA_TESTID.LIST_ITEM_LABEL_ID_EXCEPTION,
73
73
  children: labelOverflow === "truncate" ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_truncated_tooltip_text.SimpleTruncatedTooltipText, { value: label, placement: "bottom-start" }) : label
74
74
  }
75
75
  )
package/dist/cjs/outOfTheBox/ItemTextLabel/index.js.map CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../../src/outOfTheBox/ItemTextLabel/index.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
4
- "sourcesContent": ["import React from 'react';\nimport { SimpleTruncatedTooltipText } from '@elliemae/ds-truncated-tooltip-text';\nimport { ItemRenderer } from '../../exported-related/index.js';\nimport type { DSLeftNavigationT } from '../../react-desc-prop-types.js';\nimport { StyledLabel } from '../styled.js';\nimport { LEFT_NAVIGATION_DATA_TESTID } from '../../constants/constants.js';\n\nexport const ItemTextLabel = (props: DSLeftNavigationT.ComponentProps): JSX.Element => {\n const {\n item,\n item: {\n itemOpts: { label, labelOverflow: itemLabelOverflow, labelBold, labelColor, labelDataTestId },\n },\n ctx: {\n leftNavProps: { labelOverflow: leftNavLabelOverflow },\n },\n } = props;\n\n const labelOverflow = itemLabelOverflow || leftNavLabelOverflow;\n return (\n <ItemRenderer\n item={{\n ...item,\n CollapsedComponent: null,\n }}\n minHeight=\"32px\"\n paddingTop=\"8px\"\n >\n {/* Empty LeftComponent */} <div />\n <StyledLabel\n pl=\"24px\"\n labelOverflow={labelOverflow}\n labelBold={labelBold}\n labelColor={labelColor}\n mr=\"xxs2\"\n pb=\"xxxs\"\n data-testid={labelDataTestId || LEFT_NAVIGATION_DATA_TESTID.ITEM_LABEL}\n >\n {labelOverflow === 'truncate' ? <SimpleTruncatedTooltipText value={label} placement=\"bottom-start\" /> : label}\n </StyledLabel>\n </ItemRenderer>\n );\n};\n", "import * as React from 'react';\nexport { React };\n"],
4
+ "sourcesContent": ["import React from 'react';\nimport { SimpleTruncatedTooltipText } from '@elliemae/ds-truncated-tooltip-text';\nimport { ItemRenderer } from '../../exported-related/index.js';\nimport type { DSLeftNavigationT } from '../../react-desc-prop-types.js';\nimport { StyledLabel } from '../styled.js';\nimport { LEFT_NAVIGATION_DATA_TESTID } from '../../constants/constants.js';\n\nexport const ItemTextLabel = (props: DSLeftNavigationT.ComponentProps): JSX.Element => {\n const {\n item,\n item: {\n itemOpts: { label, labelOverflow: itemLabelOverflow, labelBold, labelColor, labelDataTestId },\n },\n ctx: {\n leftNavProps: { labelOverflow: leftNavLabelOverflow },\n },\n } = props;\n\n const labelOverflow = itemLabelOverflow || leftNavLabelOverflow;\n return (\n <ItemRenderer\n item={{\n ...item,\n CollapsedComponent: null,\n }}\n minHeight=\"32px\"\n paddingTop=\"8px\"\n >\n {/* Empty LeftComponent */} <div />\n <StyledLabel\n pl=\"24px\"\n labelOverflow={labelOverflow}\n labelBold={labelBold}\n labelColor={labelColor}\n mr=\"xxs2\"\n pb=\"xxxs\"\n data-testid={labelDataTestId || LEFT_NAVIGATION_DATA_TESTID.LIST_ITEM_LABEL_ID_EXCEPTION}\n >\n {labelOverflow === 'truncate' ? <SimpleTruncatedTooltipText value={label} placement=\"bottom-start\" /> : label}\n </StyledLabel>\n </ItemRenderer>\n );\n};\n", "import * as React from 'react';\nexport { React };\n"],
5
5
  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADoBnB;AAnBJ,uCAA2C;AAC3C,8BAA6B;AAE7B,oBAA4B;AAC5B,uBAA4C;AAErC,MAAM,gBAAgB,CAAC,UAAyD;AACrF,QAAM;AAAA,IACJ;AAAA,IACA,MAAM;AAAA,MACJ,UAAU,EAAE,OAAO,eAAe,mBAAmB,WAAW,YAAY,gBAAgB;AAAA,IAC9F;AAAA,IACA,KAAK;AAAA,MACH,cAAc,EAAE,eAAe,qBAAqB;AAAA,IACtD;AAAA,EACF,IAAI;AAEJ,QAAM,gBAAgB,qBAAqB;AAC3C,SACE;AAAA,IAAC;AAAA;AAAA,MACC,MAAM;AAAA,QACJ,GAAG;AAAA,QACH,oBAAoB;AAAA,MACtB;AAAA,MACA,WAAU;AAAA,MACV,YAAW;AAAA,MAEgB;AAAA;AAAA,QAAC,4CAAC,SAAI;AAAA,QACjC;AAAA,UAAC;AAAA;AAAA,YACC,IAAG;AAAA,YACH;AAAA,YACA;AAAA,YACA;AAAA,YACA,IAAG;AAAA,YACH,IAAG;AAAA,YACH,eAAa,mBAAmB,6CAA4B;AAAA,YAE3D,4BAAkB,aAAa,4CAAC,+DAA2B,OAAO,OAAO,WAAU,gBAAe,IAAK;AAAA;AAAA,QAC1G;AAAA;AAAA;AAAA,EACF;AAEJ;",
6
6
  "names": []
7
7
  }
package/dist/cjs/outOfTheBox/ItemUncontrolledDrilldown/index.js CHANGED
@@ -141,7 +141,7 @@ const ItemUncontrolledDrilldown = (props) => {
141
141
  labelOverflow,
142
142
  labelBold,
143
143
  labelColor,
144
- "data-testid": labelDataTestId || import_constants.LEFT_NAVIGATION_DATA_TESTID.ITEM_LABEL,
144
+ "data-testid": labelDataTestId || import_constants.LEFT_NAVIGATION_DATA_TESTID.LIST_ITEM_LABEL_ID_EXCEPTION,
145
145
  children: labelOverflow === "truncate" ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_truncated_tooltip_text.SimpleTruncatedTooltipText, { value: label, placement: "bottom-start" }) : label
146
146
  }
147
147
  ),
package/dist/cjs/outOfTheBox/ItemUncontrolledDrilldown/index.js.map CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../../src/outOfTheBox/ItemUncontrolledDrilldown/index.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
4
- "sourcesContent": ["/* eslint-disable max-lines */\nimport { ArrowheadDown, ArrowheadRight } from '@elliemae/ds-icons';\nimport { SimpleTruncatedTooltipText } from '@elliemae/ds-truncated-tooltip-text';\nimport React, { useCallback, useEffect, 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\n// Subitem mapping\nconst outOfTheBoxSubitemsComponents: Record<string, React.ComponentType<DSLeftNavigationT.ComponentProps>> = {\n [ITEM_TYPES.LEFT_NAV_ITEM_SEPARATOR]: ItemSeparator,\n [ITEM_TYPES.LEFT_NAV_ITEM_WITH_DATE]: ItemWithDate,\n [ITEM_TYPES.LEFT_NAV_ITEM_TEXT_LABEL]: ItemTextLabel,\n};\n\nconst OutOfTheBoxMapSubitem: React.ComponentType<DSLeftNavigationT.ComponentProps> = (props) => {\n const {\n item,\n item: { type, Component },\n ctx,\n } = props;\n\n if (typeof type === 'string' && !!outOfTheBoxSubitemsComponents[type]) {\n const OutOfTheBoxComponent = outOfTheBoxSubitemsComponents[type];\n const currentIndent = item.itemOpts?.indent ?? 0;\n const newItem = {\n ...item,\n itemOpts: { ...item.itemOpts, indent: currentIndent + 44 },\n };\n return <OutOfTheBoxComponent item={newItem} ctx={ctx} />;\n }\n if (!Component) return null;\n // we expect an error to be threw if Component is not defined and type is not a valid out-of-the-box...\n return <Component item={item} ctx={ctx} />;\n};\n\nexport const ItemUncontrolledDrilldown = (props: DSLeftNavigationT.ComponentProps): JSX.Element => {\n const {\n item,\n item: {\n dsId,\n itemOpts: {\n label,\n RightComponent,\n labelRightSection,\n labelOverflow: itemLabelOverflow,\n labelBold,\n labelColor,\n startOpened,\n items,\n labelDataTestId,\n },\n },\n ctx,\n ctx: {\n leftNavProps: { labelOverflow: leftNavLabelOverflow },\n openedDrilldowns,\n setOpenedDrilldowns,\n },\n } = props;\n\n // Start opened functionality\n useEffect(() => {\n if (startOpened) setOpenedDrilldowns([...openedDrilldowns, dsId as string]);\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, []);\n\n const opened = openedDrilldowns.includes(dsId as string);\n\n const labelOverflow = itemLabelOverflow || leftNavLabelOverflow;\n\n const arrowIcon = useMemo(() => {\n const Component = opened ? ArrowheadDown : ArrowheadRight;\n return <Component width=\"24px\" height=\"18px\" color={['brand-primary', '800']} />;\n }, [opened]);\n\n // Array of subitems\n const subitems = useMemo(() => {\n if (!opened || !items) return [];\n return items.map((subitem) => <OutOfTheBoxMapSubitem item={subitem} ctx={ctx} key={subitem.dsId} />);\n }, [ctx, items, opened]);\n\n const handleOnClick = useCallback(() => {\n if (opened) setOpenedDrilldowns(openedDrilldowns.filter((openedDrilldown) => openedDrilldown !== dsId));\n else setOpenedDrilldowns([...openedDrilldowns, dsId as string]);\n }, [opened, setOpenedDrilldowns, openedDrilldowns, dsId]);\n\n return (\n <ItemRenderer\n item={{\n ...item,\n itemOpts: {\n ariaExpanded: opened,\n ariaRole: 'menuitem',\n ...item.itemOpts,\n openable: !opened,\n closable: opened,\n },\n CollapsedComponent: null,\n }}\n subitems={subitems}\n minHeight=\"32px\"\n paddingTop=\"8px\"\n onClick={handleOnClick}\n >\n <StyledArrowContainer\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={labelDataTestId || LEFT_NAVIGATION_DATA_TESTID.ITEM_LABEL}\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", "import * as React from 'react';\nexport { React };\n"],
4
+ "sourcesContent": ["/* eslint-disable max-lines */\nimport { ArrowheadDown, ArrowheadRight } from '@elliemae/ds-icons';\nimport { SimpleTruncatedTooltipText } from '@elliemae/ds-truncated-tooltip-text';\nimport React, { useCallback, useEffect, 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\n// Subitem mapping\nconst outOfTheBoxSubitemsComponents: Record<string, React.ComponentType<DSLeftNavigationT.ComponentProps>> = {\n [ITEM_TYPES.LEFT_NAV_ITEM_SEPARATOR]: ItemSeparator,\n [ITEM_TYPES.LEFT_NAV_ITEM_WITH_DATE]: ItemWithDate,\n [ITEM_TYPES.LEFT_NAV_ITEM_TEXT_LABEL]: ItemTextLabel,\n};\n\nconst OutOfTheBoxMapSubitem: React.ComponentType<DSLeftNavigationT.ComponentProps> = (props) => {\n const {\n item,\n item: { type, Component },\n ctx,\n } = props;\n\n if (typeof type === 'string' && !!outOfTheBoxSubitemsComponents[type]) {\n const OutOfTheBoxComponent = outOfTheBoxSubitemsComponents[type];\n const currentIndent = item.itemOpts?.indent ?? 0;\n const newItem = {\n ...item,\n itemOpts: { ...item.itemOpts, indent: currentIndent + 44 },\n };\n return <OutOfTheBoxComponent item={newItem} ctx={ctx} />;\n }\n if (!Component) return null;\n // we expect an error to be threw if Component is not defined and type is not a valid out-of-the-box...\n return <Component item={item} ctx={ctx} />;\n};\n\nexport const ItemUncontrolledDrilldown = (props: DSLeftNavigationT.ComponentProps): JSX.Element => {\n const {\n item,\n item: {\n dsId,\n itemOpts: {\n label,\n RightComponent,\n labelRightSection,\n labelOverflow: itemLabelOverflow,\n labelBold,\n labelColor,\n startOpened,\n items,\n labelDataTestId,\n },\n },\n ctx,\n ctx: {\n leftNavProps: { labelOverflow: leftNavLabelOverflow },\n openedDrilldowns,\n setOpenedDrilldowns,\n },\n } = props;\n\n // Start opened functionality\n useEffect(() => {\n if (startOpened) setOpenedDrilldowns([...openedDrilldowns, dsId as string]);\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, []);\n\n const opened = openedDrilldowns.includes(dsId as string);\n\n const labelOverflow = itemLabelOverflow || leftNavLabelOverflow;\n\n const arrowIcon = useMemo(() => {\n const Component = opened ? ArrowheadDown : ArrowheadRight;\n return <Component width=\"24px\" height=\"18px\" color={['brand-primary', '800']} />;\n }, [opened]);\n\n // Array of subitems\n const subitems = useMemo(() => {\n if (!opened || !items) return [];\n return items.map((subitem) => <OutOfTheBoxMapSubitem item={subitem} ctx={ctx} key={subitem.dsId} />);\n }, [ctx, items, opened]);\n\n const handleOnClick = useCallback(() => {\n if (opened) setOpenedDrilldowns(openedDrilldowns.filter((openedDrilldown) => openedDrilldown !== dsId));\n else setOpenedDrilldowns([...openedDrilldowns, dsId as string]);\n }, [opened, setOpenedDrilldowns, openedDrilldowns, dsId]);\n\n return (\n <ItemRenderer\n item={{\n ...item,\n itemOpts: {\n ariaExpanded: opened,\n ariaRole: 'menuitem',\n ...item.itemOpts,\n openable: !opened,\n closable: opened,\n },\n CollapsedComponent: null,\n }}\n subitems={subitems}\n minHeight=\"32px\"\n paddingTop=\"8px\"\n onClick={handleOnClick}\n >\n <StyledArrowContainer\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={labelDataTestId || 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", "import * as React from 'react';\nexport { React };\n"],
5
5
  "mappings": "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",
6
6
  "names": []
7
7
  }
package/dist/cjs/outOfTheBox/ItemWithDate/index.js CHANGED
@@ -77,7 +77,7 @@ const ItemWithDate = (props) => {
77
77
  labelOverflow,
78
78
  labelBold,
79
79
  labelColor,
80
- "data-testid": labelDataTestId || import_constants.LEFT_NAVIGATION_DATA_TESTID.ITEM_LABEL,
80
+ "data-testid": labelDataTestId || import_constants.LEFT_NAVIGATION_DATA_TESTID.LIST_ITEM_LABEL_ID_EXCEPTION,
81
81
  children: labelOverflow === "truncate" && label ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_truncated_tooltip_text.SimpleTruncatedTooltipText, { value: label, placement: "bottom-start" }) : label
82
82
  }
83
83
  ),
package/dist/cjs/outOfTheBox/ItemWithDate/index.js.map CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../../src/outOfTheBox/ItemWithDate/index.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
4
- "sourcesContent": ["import { SimpleTruncatedTooltipText } from '@elliemae/ds-truncated-tooltip-text';\nimport { LEFT_NAVIGATION_DATA_TESTID } from '../../constants/constants.js';\nimport { ItemRenderer } from '../../exported-related/index.js';\nimport type { DSLeftNavigationT } from '../../react-desc-prop-types.js';\nimport { StyledDate, StyledLabel, StyledRightContainer } from '../styled.js';\n\nexport const ItemWithDate = (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 labelDataTestId,\n },\n },\n ctx,\n ctx: {\n leftNavProps: { labelOverflow: leftNavLabelOverflow },\n },\n } = props;\n\n const labelOverflow = itemLabelOverflow || leftNavLabelOverflow;\n return (\n <ItemRenderer\n item={{\n ...item,\n CollapsedComponent: null,\n }}\n minHeight=\"32px\"\n paddingTop=\"8px\"\n >\n {/* Empty LeftComponent */} <div />\n <StyledLabel\n pl=\"xxs\"\n pb=\"xxxs\"\n labelOverflow={labelOverflow}\n labelBold={labelBold}\n labelColor={labelColor}\n data-testid={labelDataTestId || LEFT_NAVIGATION_DATA_TESTID.ITEM_LABEL}\n >\n {labelOverflow === 'truncate' && label ? (\n <SimpleTruncatedTooltipText value={label} placement=\"bottom-start\" />\n ) : (\n label\n )}\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", "import * as React from 'react';\nexport { React };\n"],
4
+ "sourcesContent": ["import { SimpleTruncatedTooltipText } from '@elliemae/ds-truncated-tooltip-text';\nimport { LEFT_NAVIGATION_DATA_TESTID } from '../../constants/constants.js';\nimport { ItemRenderer } from '../../exported-related/index.js';\nimport type { DSLeftNavigationT } from '../../react-desc-prop-types.js';\nimport { StyledDate, StyledLabel, StyledRightContainer } from '../styled.js';\n\nexport const ItemWithDate = (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 labelDataTestId,\n },\n },\n ctx,\n ctx: {\n leftNavProps: { labelOverflow: leftNavLabelOverflow },\n },\n } = props;\n\n const labelOverflow = itemLabelOverflow || leftNavLabelOverflow;\n return (\n <ItemRenderer\n item={{\n ...item,\n CollapsedComponent: null,\n }}\n minHeight=\"32px\"\n paddingTop=\"8px\"\n >\n {/* Empty LeftComponent */} <div />\n <StyledLabel\n pl=\"xxs\"\n pb=\"xxxs\"\n labelOverflow={labelOverflow}\n labelBold={labelBold}\n labelColor={labelColor}\n data-testid={labelDataTestId || LEFT_NAVIGATION_DATA_TESTID.LIST_ITEM_LABEL_ID_EXCEPTION}\n >\n {labelOverflow === 'truncate' && label ? (\n <SimpleTruncatedTooltipText value={label} placement=\"bottom-start\" />\n ) : (\n label\n )}\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", "import * as React from 'react';\nexport { React };\n"],
5
5
  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADoCW;AApClC,uCAA2C;AAC3C,uBAA4C;AAC5C,8BAA6B;AAE7B,oBAA8D;AAEvD,MAAM,eAAe,CAAC,UAAyD;AACpF,QAAM;AAAA,IACJ;AAAA,IACA,MAAM;AAAA,MACJ,UAAU;AAAA,QACR;AAAA,QACA;AAAA,QACA;AAAA,QACA,eAAe;AAAA,QACf;AAAA,QACA;AAAA,QACA;AAAA,MACF;AAAA,IACF;AAAA,IACA;AAAA,IACA,KAAK;AAAA,MACH,cAAc,EAAE,eAAe,qBAAqB;AAAA,IACtD;AAAA,EACF,IAAI;AAEJ,QAAM,gBAAgB,qBAAqB;AAC3C,SACE;AAAA,IAAC;AAAA;AAAA,MACC,MAAM;AAAA,QACJ,GAAG;AAAA,QACH,oBAAoB;AAAA,MACtB;AAAA,MACA,WAAU;AAAA,MACV,YAAW;AAAA,MAEgB;AAAA;AAAA,QAAC,4CAAC,SAAI;AAAA,QACjC;AAAA,UAAC;AAAA;AAAA,YACC,IAAG;AAAA,YACH,IAAG;AAAA,YACH;AAAA,YACA;AAAA,YACA;AAAA,YACA,eAAa,mBAAmB,6CAA4B;AAAA,YAE3D,4BAAkB,cAAc,QAC/B,4CAAC,+DAA2B,OAAO,OAAO,WAAU,gBAAe,IAEnE;AAAA;AAAA,QAEJ;AAAA,QACA;AAAA,UAAC;AAAA;AAAA,YACC,IAAG;AAAA,YACH,MAAM,CAAC,QAAQ,MAAM;AAAA,YACrB,YAAW;AAAA,YACX,QAAO;AAAA,YACP,eAAa,6CAA4B;AAAA,YAEzC;AAAA;AAAA,gBAAC;AAAA;AAAA,kBACC,IAAG;AAAA,kBACH,eAAa,6CAA4B;AAAA,kBAExC;AAAA;AAAA,cACH;AAAA,cACC,kBAAkB,4CAAC,kBAAe,KAAU,MAAY;AAAA;AAAA;AAAA,QAC3D;AAAA;AAAA;AAAA,EACF;AAEJ;",
6
6
  "names": []
7
7
  }
package/dist/cjs/outOfTheBox/styled.js CHANGED
@@ -51,16 +51,24 @@ const StyledLabel = (0, import_ds_system.styled)(import_ds_grid.Grid, {
51
51
  name: import_constants.DSLeftNavigationName,
52
52
  slot: import_constants.LEFT_NAVIGATION_SLOTS.ITEM_LABEL
53
53
  })`
54
- font-size: 13px;
54
+ font-size: 1rem; // 13px -> 13/13 = 1rem;
55
55
  font-weight: ${(props) => props.labelBold ? props.theme.fontWeights.semibold : props.theme.fontWeights.regular};
56
56
  color: ${({ labelColor, theme }) => labelColor ? theme.colors[labelColor[0]][labelColor[1]] : theme.colors.neutral[800]};
57
- line-height: 14px;
57
+ line-height: 1.0769rem; // 14px -> 14/13 = 1.0769rem
58
58
  word-break: ${(props) => props.labelOverflow === "wrapAll" ? "break-all" : "normal"};
59
+ @media (max-width: ${({ theme }) => theme.breakpoints.small}) {
60
+ font-size: 0.8125rem; // 16px -> 13/16 = 0.8125
61
+ line-height: 0.875rem; // 14px -> 14/16 = 0.875rem
62
+ }
59
63
  `;
60
64
  const StyledDate = (0, import_ds_system.styled)(import_ds_grid.Grid, { name: import_constants.DSLeftNavigationName, slot: import_constants.LEFT_NAVIGATION_SLOTS.ITEM_DATE })`
61
- font-size: 12px;
65
+ font-size: 0.923rem; // 12px -> 12/13 = 0.9230rem
62
66
  color: ${(props) => props.theme.colors.neutral[600]};
63
- line-height: 14px;
67
+ line-height: 1.0769rem; // 14px -> 14/13 = 1.0769rem
68
+ @media (max-width: ${({ theme }) => theme.breakpoints.small}) {
69
+ font-size: 0.75rem; // 12px -> 12/16 = 0.75rem
70
+ line-height: 0.875rem; // 14px -> 14/16 = 0.875rem
71
+ }
64
72
  `;
65
73
  const StyledArrowContainer = (0, import_ds_system.styled)(import_ds_grid.Grid, {
66
74
  name: import_constants.DSLeftNavigationName,
@@ -74,10 +82,14 @@ const StyledSectionLabel = (0, import_ds_system.styled)("span", {
74
82
  name: import_constants.DSLeftNavigationName,
75
83
  slot: import_constants.LEFT_NAVIGATION_SLOTS.SECTION_LABEL
76
84
  })`
77
- font-size: 13px;
85
+ font-size: 1rem; // 13px -> 13/13 = 1rem
78
86
  color: ${(props) => props.theme.colors.neutral[700]};
79
87
  margin-left: ${(props) => props.theme.space.xxs};
80
- line-height: 13px;
88
+ line-height: 1rem; // 13px -> 13/13 = 1rem
89
+ @media (max-width: ${({ theme }) => theme.breakpoints.small}) {
90
+ font-size: 0.8125rem; // 13px -> 13/16 = 0.8125rem
91
+ line-height: 0.8125rem; // 13px -> 13/16 = 0.8125rem
92
+ }
81
93
  `;
82
94
  const StyledVerticalSeparator = (0, import_ds_system.styled)("div", {
83
95
  name: import_constants.DSLeftNavigationName,
@@ -92,8 +104,12 @@ const StyledRightLabel = (0, import_ds_system.styled)("span", {
92
104
  name: import_constants.DSLeftNavigationName,
93
105
  slot: import_constants.LEFT_NAVIGATION_SLOTS.SECTION_RIGHT_LABEL
94
106
  })`
95
- font-size: 12px;
96
- line-height: 13px;
107
+ font-size: 0.923rem; // 12px -> 12/13 = 0.9230rem;
108
+ line-height: 1rem; // 13px -> 13/13 = 1rem
109
+ @media (max-width: ${({ theme }) => theme.breakpoints.small}) {
110
+ font-size: 0.75rem; // 12px -> 12/16 = 0.75rem
111
+ line-height: 0.8125rem; // 13px -> 13/16 = 0.8125rem
112
+ }
97
113
  `;
98
114
  const StyledSectionContainer = (0, import_ds_system.styled)(import_ds_grid.Grid, {
99
115
  name: import_constants.DSLeftNavigationName,
@@ -110,9 +126,12 @@ const StyledLeftContainer = (0, import_ds_system.styled)(import_ds_grid.Grid, {
110
126
  slot: import_constants.LEFT_NAVIGATION_SLOTS.LEFT_CONTAINER
111
127
  })``;
112
128
  const StyledItemLabel = (0, import_ds_system.styled)(import_ds_grid.Grid, { name: import_constants.DSLeftNavigationName, slot: import_constants.LEFT_NAVIGATION_SLOTS.ITEM_LABEL })`
113
- font-size: 14px;
129
+ font-size: 1.0769rem; // 14px -> 14/13 = 1.0769rem
114
130
  color: ${(props) => props.theme.colors.neutral[800]};
115
131
  word-break: ${(props) => props.labelOverflow === "wrapAll" ? "break-all" : "normal"};
132
+ @media (max-width: ${({ theme }) => theme.breakpoints.small}) {
133
+ font-size: 0.875rem; // 14px -> 14/16 = 0.875rem
134
+ }
116
135
  `;
117
136
  const StyledChevronLeft = (0, import_ds_system.styled)(import_ds_button_v2.DSButtonV2, {
118
137
  name: import_constants.DSLeftNavigationName,
package/dist/cjs/outOfTheBox/styled.js.map CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../src/outOfTheBox/styled.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
4
- "sourcesContent": ["import { styled, type Theme } from '@elliemae/ds-system';\nimport { Grid } from '@elliemae/ds-grid';\nimport { DSButtonV2 } from '@elliemae/ds-button-v2';\nimport { DSLeftNavigationName, LEFT_NAVIGATION_SLOTS } from '../constants/constants.js';\nimport type { DSLeftNavigationT } from '../react-desc-prop-types.js';\ntype ColorsKey = keyof Theme['colors'];\n\ninterface StyledLabelT {\n labelBold?: boolean;\n labelOverflow?: string;\n labelColor?: [ColorsKey, keyof Theme['colors'][ColorsKey]];\n}\n\nexport const StyledLabel = styled(Grid, {\n name: DSLeftNavigationName,\n slot: LEFT_NAVIGATION_SLOTS.ITEM_LABEL,\n})<StyledLabelT>`\n font-size: 13px;\n font-weight: ${(props) => (props.labelBold ? props.theme.fontWeights.semibold : props.theme.fontWeights.regular)};\n color: ${({ labelColor, theme }) =>\n labelColor ? theme.colors[labelColor[0]][labelColor[1]] : theme.colors.neutral[800]};\n line-height: 14px;\n word-break: ${(props) => (props.labelOverflow === 'wrapAll' ? 'break-all' : 'normal')};\n`;\n\nexport const StyledDate = styled(Grid, { name: DSLeftNavigationName, slot: LEFT_NAVIGATION_SLOTS.ITEM_DATE })`\n font-size: 12px;\n color: ${(props) => props.theme.colors.neutral[600]};\n line-height: 14px;\n`;\n\nexport const StyledArrowContainer = styled(Grid, {\n name: DSLeftNavigationName,\n slot: LEFT_NAVIGATION_SLOTS.ARROW_CONTAINER,\n})``;\n\nexport const StyledRightContainer = styled(Grid, {\n name: DSLeftNavigationName,\n slot: LEFT_NAVIGATION_SLOTS.RIGHT_CONTAINER,\n})``;\n\nexport const StyledSectionLabel = styled('span', {\n name: DSLeftNavigationName,\n slot: LEFT_NAVIGATION_SLOTS.SECTION_LABEL,\n})`\n font-size: 13px;\n color: ${(props) => props.theme.colors.neutral[700]};\n margin-left: ${(props) => props.theme.space.xxs};\n line-height: 13px;\n`;\n\nexport const StyledVerticalSeparator = styled('div', {\n name: DSLeftNavigationName,\n slot: LEFT_NAVIGATION_SLOTS.VERTICAL_SEPARATOR,\n})`\n margin: 0 ${(props) => props.theme.space.xxs};\n width: 1px;\n height: 13px;\n background: ${(props) => props.theme.colors.neutral[600]};\n`;\n\nexport const StyledRightLabel = styled('span', {\n name: DSLeftNavigationName,\n slot: LEFT_NAVIGATION_SLOTS.SECTION_RIGHT_LABEL,\n})`\n font-size: 12px;\n line-height: 13px;\n`;\n\nexport const StyledSectionContainer = styled(Grid, {\n name: DSLeftNavigationName,\n slot: LEFT_NAVIGATION_SLOTS.SECTION_CONTAINER,\n})``;\n\nexport const StyledBottomContainer = styled(Grid, {\n name: DSLeftNavigationName,\n slot: LEFT_NAVIGATION_SLOTS.BOTTOM_CONTAINER,\n})`\n grid-column: span 3;\n`;\n\nexport const StyledLeftContainer = styled(Grid, {\n name: DSLeftNavigationName,\n slot: LEFT_NAVIGATION_SLOTS.LEFT_CONTAINER,\n})``;\n\nexport const StyledItemLabel = styled(Grid, { name: DSLeftNavigationName, slot: LEFT_NAVIGATION_SLOTS.ITEM_LABEL })<{\n labelOverflow?: DSLeftNavigationT.LabelOveflowT;\n}>`\n font-size: 14px;\n color: ${(props) => props.theme.colors.neutral[800]};\n word-break: ${(props) => (props.labelOverflow === 'wrapAll' ? 'break-all' : 'normal')};\n`;\n\nexport const StyledChevronLeft = styled(DSButtonV2, {\n name: DSLeftNavigationName,\n slot: LEFT_NAVIGATION_SLOTS.ITEM_CHEVRON_BACK,\n})`\n padding: 0;\n :focus {\n outline: 2px solid ${(props) => props.theme.colors.brand[800]};\n }\n`;\n", "import * as React from 'react';\nexport { React };\n"],
5
- "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,uBAAmC;AACnC,qBAAqB;AACrB,0BAA2B;AAC3B,uBAA4D;AAUrD,MAAM,kBAAc,yBAAO,qBAAM;AAAA,EACtC,MAAM;AAAA,EACN,MAAM,uCAAsB;AAC9B,CAAC;AAAA;AAAA,iBAEgB,CAAC,UAAW,MAAM,YAAY,MAAM,MAAM,YAAY,WAAW,MAAM,MAAM,YAAY,OAAQ;AAAA,WACvG,CAAC,EAAE,YAAY,MAAM,MAC5B,aAAa,MAAM,OAAO,WAAW,CAAC,CAAC,EAAE,WAAW,CAAC,CAAC,IAAI,MAAM,OAAO,QAAQ,GAAG,CAAC;AAAA;AAAA,gBAEvE,CAAC,UAAW,MAAM,kBAAkB,YAAY,cAAc,QAAS;AAAA;AAGhF,MAAM,iBAAa,yBAAO,qBAAM,EAAE,MAAM,uCAAsB,MAAM,uCAAsB,UAAU,CAAC;AAAA;AAAA,WAEjG,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ,GAAG,CAAC;AAAA;AAAA;AAI9C,MAAM,2BAAuB,yBAAO,qBAAM;AAAA,EAC/C,MAAM;AAAA,EACN,MAAM,uCAAsB;AAC9B,CAAC;AAEM,MAAM,2BAAuB,yBAAO,qBAAM;AAAA,EAC/C,MAAM;AAAA,EACN,MAAM,uCAAsB;AAC9B,CAAC;AAEM,MAAM,yBAAqB,yBAAO,QAAQ;AAAA,EAC/C,MAAM;AAAA,EACN,MAAM,uCAAsB;AAC9B,CAAC;AAAA;AAAA,WAEU,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ,GAAG,CAAC;AAAA,iBACpC,CAAC,UAAU,MAAM,MAAM,MAAM,GAAG;AAAA;AAAA;AAI1C,MAAM,8BAA0B,yBAAO,OAAO;AAAA,EACnD,MAAM;AAAA,EACN,MAAM,uCAAsB;AAC9B,CAAC;AAAA,cACa,CAAC,UAAU,MAAM,MAAM,MAAM,GAAG;AAAA;AAAA;AAAA,gBAG9B,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ,GAAG,CAAC;AAAA;AAGnD,MAAM,uBAAmB,yBAAO,QAAQ;AAAA,EAC7C,MAAM;AAAA,EACN,MAAM,uCAAsB;AAC9B,CAAC;AAAA;AAAA;AAAA;AAKM,MAAM,6BAAyB,yBAAO,qBAAM;AAAA,EACjD,MAAM;AAAA,EACN,MAAM,uCAAsB;AAC9B,CAAC;AAEM,MAAM,4BAAwB,yBAAO,qBAAM;AAAA,EAChD,MAAM;AAAA,EACN,MAAM,uCAAsB;AAC9B,CAAC;AAAA;AAAA;AAIM,MAAM,0BAAsB,yBAAO,qBAAM;AAAA,EAC9C,MAAM;AAAA,EACN,MAAM,uCAAsB;AAC9B,CAAC;AAEM,MAAM,sBAAkB,yBAAO,qBAAM,EAAE,MAAM,uCAAsB,MAAM,uCAAsB,WAAW,CAAC;AAAA;AAAA,WAIvG,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ,GAAG,CAAC;AAAA,gBACrC,CAAC,UAAW,MAAM,kBAAkB,YAAY,cAAc,QAAS;AAAA;AAGhF,MAAM,wBAAoB,yBAAO,gCAAY;AAAA,EAClD,MAAM;AAAA,EACN,MAAM,uCAAsB;AAC9B,CAAC;AAAA;AAAA;AAAA,yBAGwB,CAAC,UAAU,MAAM,MAAM,OAAO,MAAM,GAAG,CAAC;AAAA;AAAA;",
4
+ "sourcesContent": ["/* eslint-disable @typescript-eslint/no-unsafe-return */\nimport { styled, type Theme } from '@elliemae/ds-system';\nimport { Grid } from '@elliemae/ds-grid';\nimport { DSButtonV2 } from '@elliemae/ds-button-v2';\nimport { DSLeftNavigationName, LEFT_NAVIGATION_SLOTS } from '../constants/constants.js';\nimport type { DSLeftNavigationT } from '../react-desc-prop-types.js';\ntype ColorsKey = keyof Theme['colors'];\n\ninterface StyledLabelT {\n labelBold?: boolean;\n labelOverflow?: string;\n labelColor?: [ColorsKey, keyof Theme['colors'][ColorsKey]];\n}\n\nexport const StyledLabel = styled(Grid, {\n name: DSLeftNavigationName,\n slot: LEFT_NAVIGATION_SLOTS.ITEM_LABEL,\n})<StyledLabelT>`\n font-size: 1rem; // 13px -> 13/13 = 1rem;\n font-weight: ${(props) => (props.labelBold ? props.theme.fontWeights.semibold : props.theme.fontWeights.regular)};\n color: ${({ labelColor, theme }) =>\n labelColor ? theme.colors[labelColor[0]][labelColor[1]] : theme.colors.neutral[800]};\n line-height: 1.0769rem; // 14px -> 14/13 = 1.0769rem\n word-break: ${(props) => (props.labelOverflow === 'wrapAll' ? 'break-all' : 'normal')};\n @media (max-width: ${({ theme }) => theme.breakpoints.small}) {\n font-size: 0.8125rem; // 16px -> 13/16 = 0.8125\n line-height: 0.875rem; // 14px -> 14/16 = 0.875rem\n }\n`;\n\nexport const StyledDate = styled(Grid, { name: DSLeftNavigationName, slot: LEFT_NAVIGATION_SLOTS.ITEM_DATE })`\n font-size: 0.923rem; // 12px -> 12/13 = 0.9230rem\n color: ${(props) => props.theme.colors.neutral[600]};\n line-height: 1.0769rem; // 14px -> 14/13 = 1.0769rem\n @media (max-width: ${({ theme }) => theme.breakpoints.small}) {\n font-size: 0.75rem; // 12px -> 12/16 = 0.75rem\n line-height: 0.875rem; // 14px -> 14/16 = 0.875rem\n }\n`;\n\nexport const StyledArrowContainer = styled(Grid, {\n name: DSLeftNavigationName,\n slot: LEFT_NAVIGATION_SLOTS.ARROW_CONTAINER,\n})``;\n\nexport const StyledRightContainer = styled(Grid, {\n name: DSLeftNavigationName,\n slot: LEFT_NAVIGATION_SLOTS.RIGHT_CONTAINER,\n})``;\n\nexport const StyledSectionLabel = styled('span', {\n name: DSLeftNavigationName,\n slot: LEFT_NAVIGATION_SLOTS.SECTION_LABEL,\n})`\n font-size: 1rem; // 13px -> 13/13 = 1rem\n color: ${(props) => props.theme.colors.neutral[700]};\n margin-left: ${(props) => props.theme.space.xxs};\n line-height: 1rem; // 13px -> 13/13 = 1rem\n @media (max-width: ${({ theme }) => theme.breakpoints.small}) {\n font-size: 0.8125rem; // 13px -> 13/16 = 0.8125rem\n line-height: 0.8125rem; // 13px -> 13/16 = 0.8125rem\n }\n`;\n\nexport const StyledVerticalSeparator = styled('div', {\n name: DSLeftNavigationName,\n slot: LEFT_NAVIGATION_SLOTS.VERTICAL_SEPARATOR,\n})`\n margin: 0 ${(props) => props.theme.space.xxs};\n width: 1px;\n height: 13px;\n background: ${(props) => props.theme.colors.neutral[600]};\n`;\n\nexport const StyledRightLabel = styled('span', {\n name: DSLeftNavigationName,\n slot: LEFT_NAVIGATION_SLOTS.SECTION_RIGHT_LABEL,\n})`\n font-size: 0.923rem; // 12px -> 12/13 = 0.9230rem;\n line-height: 1rem; // 13px -> 13/13 = 1rem\n @media (max-width: ${({ theme }) => theme.breakpoints.small}) {\n font-size: 0.75rem; // 12px -> 12/16 = 0.75rem\n line-height: 0.8125rem; // 13px -> 13/16 = 0.8125rem\n }\n`;\n\nexport const StyledSectionContainer = styled(Grid, {\n name: DSLeftNavigationName,\n slot: LEFT_NAVIGATION_SLOTS.SECTION_CONTAINER,\n})``;\n\nexport const StyledBottomContainer = styled(Grid, {\n name: DSLeftNavigationName,\n slot: LEFT_NAVIGATION_SLOTS.BOTTOM_CONTAINER,\n})`\n grid-column: span 3;\n`;\n\nexport const StyledLeftContainer = styled(Grid, {\n name: DSLeftNavigationName,\n slot: LEFT_NAVIGATION_SLOTS.LEFT_CONTAINER,\n})``;\n\nexport const StyledItemLabel = styled(Grid, { name: DSLeftNavigationName, slot: LEFT_NAVIGATION_SLOTS.ITEM_LABEL })<{\n labelOverflow?: DSLeftNavigationT.LabelOveflowT;\n}>`\n font-size: 1.0769rem; // 14px -> 14/13 = 1.0769rem\n color: ${(props) => props.theme.colors.neutral[800]};\n word-break: ${(props) => (props.labelOverflow === 'wrapAll' ? 'break-all' : 'normal')};\n @media (max-width: ${({ theme }) => theme.breakpoints.small}) {\n font-size: 0.875rem; // 14px -> 14/16 = 0.875rem\n }\n`;\n\nexport const StyledChevronLeft = styled(DSButtonV2, {\n name: DSLeftNavigationName,\n slot: LEFT_NAVIGATION_SLOTS.ITEM_CHEVRON_BACK,\n})`\n padding: 0;\n :focus {\n outline: 2px solid ${(props) => props.theme.colors.brand[800]};\n }\n`;\n", "import * as React from 'react';\nexport { React };\n"],
5
+ "mappings": "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",
6
6
  "names": []
7
7
  }
package/dist/cjs/parts/LeftNavFooterItem/index.js CHANGED
@@ -148,6 +148,7 @@ const LeftNavFooterItem = (props) => {
148
148
  mb: "16px",
149
149
  labelOverflow,
150
150
  "aria-live": "polite",
151
+ "data-testid": import_constants.LEFT_NAVIGATION_DATA_TESTID.ITEM_LABEL,
151
152
  getOwnerProps,
152
153
  getOwnerPropsArguments,
153
154
  children: label
package/dist/cjs/parts/LeftNavFooterItem/index.js.map CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../../src/parts/LeftNavFooterItem/index.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
4
- "sourcesContent": ["/* eslint-disable react-hooks/rules-of-hooks */\n/* eslint-disable max-lines */\nimport { Grid } from '@elliemae/ds-grid';\nimport { MenuCollapse, MenuExpand } from '@elliemae/ds-icons';\nimport { DSSkeleton } from '@elliemae/ds-skeleton';\nimport React, { useCallback, useContext, useMemo } from 'react';\n\nimport { SimpleTruncatedTooltipText } from '@elliemae/ds-truncated-tooltip-text';\nimport LeftNavigationContext from '../../LeftNavigationContext.js';\nimport { LEFT_NAVIGATION_DATA_TESTID } from '../../constants/constants.js';\nimport { FOOTER_DS_ID, FOOTER_MENU_CLOSE_DS_ID } from '../../exported-related/constants.js';\nimport { useKeyboardNavigation } from '../../hooks/index.js';\nimport {\n StyledFooterItem,\n StyledFooterLabel,\n StyledFooterMenu,\n StyledFooterSeparator,\n StyledMenuCollapse,\n} from './styled.js';\n\ntype LeftNavFooterItemProps = {\n footerLabel: string;\n FooterLabelComponent?: React.ComponentType<unknown>;\n onFooterExpand: React.MouseEventHandler & React.KeyboardEventHandler;\n onFooterClose: React.MouseEventHandler & React.KeyboardEventHandler;\n};\n\n// eslint-disable-next-line complexity\nexport const LeftNavFooterItem: React.ComponentType<LeftNavFooterItemProps> = (props) => {\n const { footerLabel, FooterLabelComponent, onFooterExpand = () => null, onFooterClose = () => null } = props;\n const {\n leftNavProps: { labelOverflow, isSkeleton, hideFooterPipe, expanded },\n expandedForAnimation,\n setFocusedItem,\n focusedItem,\n visibleItemsRefs,\n leftNavProps,\n } = useContext(LeftNavigationContext);\n const id = FOOTER_DS_ID;\n\n const handleOnClick = expandedForAnimation ? onFooterClose : onFooterExpand;\n\n const onKeyDown = useKeyboardNavigation({\n item: {\n dsId: id,\n itemOpts: {\n selectable: !expandedForAnimation,\n openable: false,\n closable: false,\n },\n },\n onClick: handleOnClick,\n });\n\n const handleMenuCollapseClick = useCallback(\n (e: React.MouseEvent<HTMLButtonElement, MouseEvent> | React.KeyboardEvent<HTMLButtonElement>) => {\n e.stopPropagation();\n handleOnClick(e as React.MouseEvent<HTMLButtonElement, MouseEvent>);\n setFocusedItem(id);\n },\n [handleOnClick, id, setFocusedItem],\n );\n\n const label = useMemo(() => {\n if (FooterLabelComponent) {\n return <FooterLabelComponent />;\n }\n if (labelOverflow === 'truncate') {\n return <SimpleTruncatedTooltipText value={footerLabel} placement=\"bottom-start\" />;\n }\n return footerLabel;\n }, [footerLabel, FooterLabelComponent, labelOverflow]);\n\n const postAnimationButtonFocusHandler = useCallback(\n (newHTMLNode: HTMLButtonElement | null) => {\n if (newHTMLNode === null || !expanded) {\n return;\n }\n if (focusedItem === id) {\n newHTMLNode.focus();\n }\n },\n [focusedItem, id, expanded],\n );\n\n if (isSkeleton) {\n return (\n <StyledFooterMenu\n key={id}\n data-testid={LEFT_NAVIGATION_DATA_TESTID.FOOTER_MENU} // https://jira.elliemae.io/browse/PUI-15589\n >\n <Grid height=\"48px\" justifyContent=\"center\" alignItems=\"center\" cols={['1fr']} p=\"xxs\">\n <DSSkeleton variant=\"rectangular\" height=\"24px\" />\n </Grid>\n </StyledFooterMenu>\n );\n }\n\n const getOwnerProps = React.useCallback(() => leftNavProps, [leftNavProps]);\n\n const getOwnerPropsArguments = React.useCallback(() => ({}), []);\n\n return (\n <StyledFooterMenu\n key={id}\n data-testid={LEFT_NAVIGATION_DATA_TESTID.FOOTER_MENU} // https://jira.elliemae.io/browse/PUI-15589\n getOwnerProps={getOwnerProps}\n getOwnerPropsArguments={getOwnerPropsArguments}\n >\n <StyledFooterItem\n innerRef={visibleItemsRefs.current[id]}\n tabIndex={expandedForAnimation ? -1 : 0}\n expanded={expandedForAnimation}\n pt=\"xxs2\"\n height={expandedForAnimation ? 'auto' : '48px'}\n alignItems=\"flex-start\"\n pl=\"xxs2\"\n cols={expandedForAnimation ? ['auto', '1fr', 'auto'] : ['38px']}\n onClick={expandedForAnimation ? () => null : handleOnClick}\n onKeyDown={onKeyDown}\n onFocus={() => setFocusedItem(id)}\n role=\"menuitem\"\n aria-label={\n expandedForAnimation\n ? `Footer, ${typeof footerLabel === 'string' ? footerLabel : ''}`\n : `Expand left navigation`\n }\n data-testid={LEFT_NAVIGATION_DATA_TESTID.FOOTER_ITEM} // https://jira.elliemae.io/browse/PUI-15589\n getOwnerProps={getOwnerProps}\n getOwnerPropsArguments={getOwnerPropsArguments}\n >\n {!expandedForAnimation ? (\n <MenuExpand\n size=\"m\"\n color={['brand-primary', '800']}\n // https://jira.elliemae.io/browse/PUI-15589\n // VERY SPECIAL CASE, THE SLOT FOOTER_BTN GOES TO THE ICON WHEN COLLAPSED, TO THE BTN WHEN EXPANDED\n data-testid={LEFT_NAVIGATION_DATA_TESTID.FOOTER_BTN}\n />\n ) : (\n <>\n <StyledFooterLabel\n mt=\"5px\"\n mr=\"12px\"\n mb=\"16px\"\n labelOverflow={labelOverflow}\n aria-live=\"polite\"\n getOwnerProps={getOwnerProps}\n getOwnerPropsArguments={getOwnerPropsArguments}\n >\n {label}\n </StyledFooterLabel>\n {!hideFooterPipe ? (\n <StyledFooterSeparator\n mt=\"xxxs\"\n data-testid={LEFT_NAVIGATION_DATA_TESTID.FOOTER_SEPARATOR} // https://jira.elliemae.io/browse/PUI-15589\n />\n ) : (\n <div></div>\n )}\n <StyledMenuCollapse\n innerRef={postAnimationButtonFocusHandler}\n buttonType=\"raw\"\n onClick={handleMenuCollapseClick}\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 // VERY SPECIAL CASE, THE SLOT FOOTER_BTN GOES TO THE ICON WHEN COLLAPSED, TO THE BTN WHEN EXPANDED\n data-testid={LEFT_NAVIGATION_DATA_TESTID.FOOTER_BTN}\n getOwnerProps={getOwnerProps}\n getOwnerPropsArguments={getOwnerPropsArguments}\n >\n <MenuCollapse size=\"m\" color={['brand-primary', '800']} />\n </StyledMenuCollapse>\n </>\n )}\n </StyledFooterItem>\n </StyledFooterMenu>\n );\n};\n\nexport default LeftNavFooterItem;\n", "import * as React from 'react';\nexport { React };\n"],
5
- "mappings": "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",
4
+ "sourcesContent": ["/* eslint-disable react-hooks/rules-of-hooks */\n/* eslint-disable max-lines */\nimport { Grid } from '@elliemae/ds-grid';\nimport { MenuCollapse, MenuExpand } from '@elliemae/ds-icons';\nimport { DSSkeleton } from '@elliemae/ds-skeleton';\nimport React, { useCallback, useContext, useMemo } from 'react';\n\nimport { SimpleTruncatedTooltipText } from '@elliemae/ds-truncated-tooltip-text';\nimport LeftNavigationContext from '../../LeftNavigationContext.js';\nimport { LEFT_NAVIGATION_DATA_TESTID } from '../../constants/constants.js';\nimport { FOOTER_DS_ID, FOOTER_MENU_CLOSE_DS_ID } from '../../exported-related/constants.js';\nimport { useKeyboardNavigation } from '../../hooks/index.js';\nimport {\n StyledFooterItem,\n StyledFooterLabel,\n StyledFooterMenu,\n StyledFooterSeparator,\n StyledMenuCollapse,\n} from './styled.js';\n\ntype LeftNavFooterItemProps = {\n footerLabel: string;\n FooterLabelComponent?: React.ComponentType<unknown>;\n onFooterExpand: React.MouseEventHandler & React.KeyboardEventHandler;\n onFooterClose: React.MouseEventHandler & React.KeyboardEventHandler;\n};\n\n// eslint-disable-next-line complexity\nexport const LeftNavFooterItem: React.ComponentType<LeftNavFooterItemProps> = (props) => {\n const { footerLabel, FooterLabelComponent, onFooterExpand = () => null, onFooterClose = () => null } = props;\n const {\n leftNavProps: { labelOverflow, isSkeleton, hideFooterPipe, expanded },\n expandedForAnimation,\n setFocusedItem,\n focusedItem,\n visibleItemsRefs,\n leftNavProps,\n } = useContext(LeftNavigationContext);\n const id = FOOTER_DS_ID;\n\n const handleOnClick = expandedForAnimation ? onFooterClose : onFooterExpand;\n\n const onKeyDown = useKeyboardNavigation({\n item: {\n dsId: id,\n itemOpts: {\n selectable: !expandedForAnimation,\n openable: false,\n closable: false,\n },\n },\n onClick: handleOnClick,\n });\n\n const handleMenuCollapseClick = useCallback(\n (e: React.MouseEvent<HTMLButtonElement, MouseEvent> | React.KeyboardEvent<HTMLButtonElement>) => {\n e.stopPropagation();\n handleOnClick(e as React.MouseEvent<HTMLButtonElement, MouseEvent>);\n setFocusedItem(id);\n },\n [handleOnClick, id, setFocusedItem],\n );\n\n const label = useMemo(() => {\n if (FooterLabelComponent) {\n return <FooterLabelComponent />;\n }\n if (labelOverflow === 'truncate') {\n return <SimpleTruncatedTooltipText value={footerLabel} placement=\"bottom-start\" />;\n }\n return footerLabel;\n }, [footerLabel, FooterLabelComponent, labelOverflow]);\n\n const postAnimationButtonFocusHandler = useCallback(\n (newHTMLNode: HTMLButtonElement | null) => {\n if (newHTMLNode === null || !expanded) {\n return;\n }\n if (focusedItem === id) {\n newHTMLNode.focus();\n }\n },\n [focusedItem, id, expanded],\n );\n\n if (isSkeleton) {\n return (\n <StyledFooterMenu\n key={id}\n data-testid={LEFT_NAVIGATION_DATA_TESTID.FOOTER_MENU} // https://jira.elliemae.io/browse/PUI-15589\n >\n <Grid height=\"48px\" justifyContent=\"center\" alignItems=\"center\" cols={['1fr']} p=\"xxs\">\n <DSSkeleton variant=\"rectangular\" height=\"24px\" />\n </Grid>\n </StyledFooterMenu>\n );\n }\n\n const getOwnerProps = React.useCallback(() => leftNavProps, [leftNavProps]);\n\n const getOwnerPropsArguments = React.useCallback(() => ({}), []);\n\n return (\n <StyledFooterMenu\n key={id}\n data-testid={LEFT_NAVIGATION_DATA_TESTID.FOOTER_MENU} // https://jira.elliemae.io/browse/PUI-15589\n getOwnerProps={getOwnerProps}\n getOwnerPropsArguments={getOwnerPropsArguments}\n >\n <StyledFooterItem\n innerRef={visibleItemsRefs.current[id]}\n tabIndex={expandedForAnimation ? -1 : 0}\n expanded={expandedForAnimation}\n pt=\"xxs2\"\n height={expandedForAnimation ? 'auto' : '48px'}\n alignItems=\"flex-start\"\n pl=\"xxs2\"\n cols={expandedForAnimation ? ['auto', '1fr', 'auto'] : ['38px']}\n onClick={expandedForAnimation ? () => null : handleOnClick}\n onKeyDown={onKeyDown}\n onFocus={() => setFocusedItem(id)}\n role=\"menuitem\"\n aria-label={\n expandedForAnimation\n ? `Footer, ${typeof footerLabel === 'string' ? footerLabel : ''}`\n : `Expand left navigation`\n }\n data-testid={LEFT_NAVIGATION_DATA_TESTID.FOOTER_ITEM} // https://jira.elliemae.io/browse/PUI-15589\n getOwnerProps={getOwnerProps}\n getOwnerPropsArguments={getOwnerPropsArguments}\n >\n {!expandedForAnimation ? (\n <MenuExpand\n size=\"m\"\n color={['brand-primary', '800']}\n // https://jira.elliemae.io/browse/PUI-15589\n // VERY SPECIAL CASE, THE SLOT FOOTER_BTN GOES TO THE ICON WHEN COLLAPSED, TO THE BTN WHEN EXPANDED\n data-testid={LEFT_NAVIGATION_DATA_TESTID.FOOTER_BTN}\n />\n ) : (\n <>\n <StyledFooterLabel\n mt=\"5px\"\n mr=\"12px\"\n mb=\"16px\"\n labelOverflow={labelOverflow}\n aria-live=\"polite\"\n data-testid={LEFT_NAVIGATION_DATA_TESTID.ITEM_LABEL} // https://jira.elliemae.io/browse/PUI-15589\n getOwnerProps={getOwnerProps}\n getOwnerPropsArguments={getOwnerPropsArguments}\n >\n {label}\n </StyledFooterLabel>\n {!hideFooterPipe ? (\n <StyledFooterSeparator\n mt=\"xxxs\"\n data-testid={LEFT_NAVIGATION_DATA_TESTID.FOOTER_SEPARATOR} // https://jira.elliemae.io/browse/PUI-15589\n />\n ) : (\n <div></div>\n )}\n <StyledMenuCollapse\n innerRef={postAnimationButtonFocusHandler}\n buttonType=\"raw\"\n onClick={handleMenuCollapseClick}\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 // VERY SPECIAL CASE, THE SLOT FOOTER_BTN GOES TO THE ICON WHEN COLLAPSED, TO THE BTN WHEN EXPANDED\n data-testid={LEFT_NAVIGATION_DATA_TESTID.FOOTER_BTN}\n getOwnerProps={getOwnerProps}\n getOwnerPropsArguments={getOwnerPropsArguments}\n >\n <MenuCollapse size=\"m\" color={['brand-primary', '800']} />\n </StyledMenuCollapse>\n </>\n )}\n </StyledFooterItem>\n </StyledFooterMenu>\n );\n};\n\nexport default LeftNavFooterItem;\n", "import * as React from 'react';\nexport { React };\n"],
5
+ "mappings": "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",
6
6
  "names": ["import_constants", "LeftNavigationContext", "React"]
7
7
  }
package/dist/esm/constants/constants.js CHANGED
@@ -95,8 +95,21 @@ const LEFT_NAVIGATION_DATA_TESTID = {
95
95
  // used to be dsButtonRoot slot at time of writing this comment
96
96
  // VERY SPECIAL CASE, THE SLOT FOOTER_BTN GOES TO THE ICON WHEN COLLAPSED, TO THE BTN WHEN EXPANDED
97
97
  // WE CAN'T FIX THE TECH DEBT
98
- FOOTER_BTN: "leftnav-footer-btn"
98
+ FOOTER_BTN: "leftnav-footer-btn",
99
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"
100
113
  };
101
114
  const DSLeftNavigationSlots = LEFT_NAVIGATION_SLOTS;
102
115
  export {
package/dist/esm/constants/constants.js.map CHANGED
@@ -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 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};\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;AACd;AAEO,MAAM,wBAAwB;",
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
  }
package/dist/esm/outOfTheBox/ItemControlledDrilldown/index.js CHANGED
@@ -88,7 +88,17 @@ const ItemControlledDrilldown = (props) => {
88
88
  children: arrowIcon
89
89
  }
90
90
  ),
91
- /* @__PURE__ */ jsx(StyledLabel, { pb: "xxxs", labelOverflow, labelBold, labelColor, children: labelOverflow === "truncate" ? /* @__PURE__ */ jsx(SimpleTruncatedTooltipText, { value: label, placement: "bottom-start" }) : label }),
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
+ ),
92
102
  /* @__PURE__ */ jsxs(
93
103
  StyledRightContainer,
94
104
  {
package/dist/esm/outOfTheBox/ItemControlledDrilldown/index.js.map CHANGED
@@ -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 { 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 pb=\"xxxs\" labelOverflow={labelOverflow} labelBold={labelBold} labelColor={labelColor}>\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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",
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
  }
package/dist/esm/outOfTheBox/ItemTextLabel/index.js CHANGED
@@ -36,7 +36,7 @@ const ItemTextLabel = (props) => {
36
36
  labelColor,
37
37
  mr: "xxs2",
38
38
  pb: "xxxs",
39
- "data-testid": labelDataTestId || LEFT_NAVIGATION_DATA_TESTID.ITEM_LABEL,
39
+ "data-testid": labelDataTestId || LEFT_NAVIGATION_DATA_TESTID.LIST_ITEM_LABEL_ID_EXCEPTION,
40
40
  children: labelOverflow === "truncate" ? /* @__PURE__ */ jsx(SimpleTruncatedTooltipText, { value: label, placement: "bottom-start" }) : label
41
41
  }
42
42
  )
package/dist/esm/outOfTheBox/ItemTextLabel/index.js.map CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/outOfTheBox/ItemTextLabel/index.tsx"],
4
- "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport { SimpleTruncatedTooltipText } from '@elliemae/ds-truncated-tooltip-text';\nimport { ItemRenderer } from '../../exported-related/index.js';\nimport type { DSLeftNavigationT } from '../../react-desc-prop-types.js';\nimport { StyledLabel } from '../styled.js';\nimport { LEFT_NAVIGATION_DATA_TESTID } from '../../constants/constants.js';\n\nexport const ItemTextLabel = (props: DSLeftNavigationT.ComponentProps): JSX.Element => {\n const {\n item,\n item: {\n itemOpts: { label, labelOverflow: itemLabelOverflow, labelBold, labelColor, labelDataTestId },\n },\n ctx: {\n leftNavProps: { labelOverflow: leftNavLabelOverflow },\n },\n } = props;\n\n const labelOverflow = itemLabelOverflow || leftNavLabelOverflow;\n return (\n <ItemRenderer\n item={{\n ...item,\n CollapsedComponent: null,\n }}\n minHeight=\"32px\"\n paddingTop=\"8px\"\n >\n {/* Empty LeftComponent */} <div />\n <StyledLabel\n pl=\"24px\"\n labelOverflow={labelOverflow}\n labelBold={labelBold}\n labelColor={labelColor}\n mr=\"xxs2\"\n pb=\"xxxs\"\n data-testid={labelDataTestId || LEFT_NAVIGATION_DATA_TESTID.ITEM_LABEL}\n >\n {labelOverflow === 'truncate' ? <SimpleTruncatedTooltipText value={label} placement=\"bottom-start\" /> : label}\n </StyledLabel>\n </ItemRenderer>\n );\n};\n"],
4
+ "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport { SimpleTruncatedTooltipText } from '@elliemae/ds-truncated-tooltip-text';\nimport { ItemRenderer } from '../../exported-related/index.js';\nimport type { DSLeftNavigationT } from '../../react-desc-prop-types.js';\nimport { StyledLabel } from '../styled.js';\nimport { LEFT_NAVIGATION_DATA_TESTID } from '../../constants/constants.js';\n\nexport const ItemTextLabel = (props: DSLeftNavigationT.ComponentProps): JSX.Element => {\n const {\n item,\n item: {\n itemOpts: { label, labelOverflow: itemLabelOverflow, labelBold, labelColor, labelDataTestId },\n },\n ctx: {\n leftNavProps: { labelOverflow: leftNavLabelOverflow },\n },\n } = props;\n\n const labelOverflow = itemLabelOverflow || leftNavLabelOverflow;\n return (\n <ItemRenderer\n item={{\n ...item,\n CollapsedComponent: null,\n }}\n minHeight=\"32px\"\n paddingTop=\"8px\"\n >\n {/* Empty LeftComponent */} <div />\n <StyledLabel\n pl=\"24px\"\n labelOverflow={labelOverflow}\n labelBold={labelBold}\n labelColor={labelColor}\n mr=\"xxs2\"\n pb=\"xxxs\"\n data-testid={labelDataTestId || LEFT_NAVIGATION_DATA_TESTID.LIST_ITEM_LABEL_ID_EXCEPTION}\n >\n {labelOverflow === 'truncate' ? <SimpleTruncatedTooltipText value={label} placement=\"bottom-start\" /> : label}\n </StyledLabel>\n </ItemRenderer>\n );\n};\n"],
5
5
  "mappings": "AAAA,YAAY,WAAW;ACoBnB,SAQ8B,KAR9B;AAnBJ,SAAS,kCAAkC;AAC3C,SAAS,oBAAoB;AAE7B,SAAS,mBAAmB;AAC5B,SAAS,mCAAmC;AAErC,MAAM,gBAAgB,CAAC,UAAyD;AACrF,QAAM;AAAA,IACJ;AAAA,IACA,MAAM;AAAA,MACJ,UAAU,EAAE,OAAO,eAAe,mBAAmB,WAAW,YAAY,gBAAgB;AAAA,IAC9F;AAAA,IACA,KAAK;AAAA,MACH,cAAc,EAAE,eAAe,qBAAqB;AAAA,IACtD;AAAA,EACF,IAAI;AAEJ,QAAM,gBAAgB,qBAAqB;AAC3C,SACE;AAAA,IAAC;AAAA;AAAA,MACC,MAAM;AAAA,QACJ,GAAG;AAAA,QACH,oBAAoB;AAAA,MACtB;AAAA,MACA,WAAU;AAAA,MACV,YAAW;AAAA,MAEgB;AAAA;AAAA,QAAC,oBAAC,SAAI;AAAA,QACjC;AAAA,UAAC;AAAA;AAAA,YACC,IAAG;AAAA,YACH;AAAA,YACA;AAAA,YACA;AAAA,YACA,IAAG;AAAA,YACH,IAAG;AAAA,YACH,eAAa,mBAAmB,4BAA4B;AAAA,YAE3D,4BAAkB,aAAa,oBAAC,8BAA2B,OAAO,OAAO,WAAU,gBAAe,IAAK;AAAA;AAAA,QAC1G;AAAA;AAAA;AAAA,EACF;AAEJ;",
6
6
  "names": []
7
7
  }
package/dist/esm/outOfTheBox/ItemUncontrolledDrilldown/index.js CHANGED
@@ -108,7 +108,7 @@ const ItemUncontrolledDrilldown = (props) => {
108
108
  labelOverflow,
109
109
  labelBold,
110
110
  labelColor,
111
- "data-testid": labelDataTestId || LEFT_NAVIGATION_DATA_TESTID.ITEM_LABEL,
111
+ "data-testid": labelDataTestId || LEFT_NAVIGATION_DATA_TESTID.LIST_ITEM_LABEL_ID_EXCEPTION,
112
112
  children: labelOverflow === "truncate" ? /* @__PURE__ */ jsx(SimpleTruncatedTooltipText, { value: label, placement: "bottom-start" }) : label
113
113
  }
114
114
  ),
package/dist/esm/outOfTheBox/ItemUncontrolledDrilldown/index.js.map CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/outOfTheBox/ItemUncontrolledDrilldown/index.tsx"],
4
- "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-lines */\nimport { ArrowheadDown, ArrowheadRight } from '@elliemae/ds-icons';\nimport { SimpleTruncatedTooltipText } from '@elliemae/ds-truncated-tooltip-text';\nimport React, { useCallback, useEffect, 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\n// Subitem mapping\nconst outOfTheBoxSubitemsComponents: Record<string, React.ComponentType<DSLeftNavigationT.ComponentProps>> = {\n [ITEM_TYPES.LEFT_NAV_ITEM_SEPARATOR]: ItemSeparator,\n [ITEM_TYPES.LEFT_NAV_ITEM_WITH_DATE]: ItemWithDate,\n [ITEM_TYPES.LEFT_NAV_ITEM_TEXT_LABEL]: ItemTextLabel,\n};\n\nconst OutOfTheBoxMapSubitem: React.ComponentType<DSLeftNavigationT.ComponentProps> = (props) => {\n const {\n item,\n item: { type, Component },\n ctx,\n } = props;\n\n if (typeof type === 'string' && !!outOfTheBoxSubitemsComponents[type]) {\n const OutOfTheBoxComponent = outOfTheBoxSubitemsComponents[type];\n const currentIndent = item.itemOpts?.indent ?? 0;\n const newItem = {\n ...item,\n itemOpts: { ...item.itemOpts, indent: currentIndent + 44 },\n };\n return <OutOfTheBoxComponent item={newItem} ctx={ctx} />;\n }\n if (!Component) return null;\n // we expect an error to be threw if Component is not defined and type is not a valid out-of-the-box...\n return <Component item={item} ctx={ctx} />;\n};\n\nexport const ItemUncontrolledDrilldown = (props: DSLeftNavigationT.ComponentProps): JSX.Element => {\n const {\n item,\n item: {\n dsId,\n itemOpts: {\n label,\n RightComponent,\n labelRightSection,\n labelOverflow: itemLabelOverflow,\n labelBold,\n labelColor,\n startOpened,\n items,\n labelDataTestId,\n },\n },\n ctx,\n ctx: {\n leftNavProps: { labelOverflow: leftNavLabelOverflow },\n openedDrilldowns,\n setOpenedDrilldowns,\n },\n } = props;\n\n // Start opened functionality\n useEffect(() => {\n if (startOpened) setOpenedDrilldowns([...openedDrilldowns, dsId as string]);\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, []);\n\n const opened = openedDrilldowns.includes(dsId as string);\n\n const labelOverflow = itemLabelOverflow || leftNavLabelOverflow;\n\n const arrowIcon = useMemo(() => {\n const Component = opened ? ArrowheadDown : ArrowheadRight;\n return <Component width=\"24px\" height=\"18px\" color={['brand-primary', '800']} />;\n }, [opened]);\n\n // Array of subitems\n const subitems = useMemo(() => {\n if (!opened || !items) return [];\n return items.map((subitem) => <OutOfTheBoxMapSubitem item={subitem} ctx={ctx} key={subitem.dsId} />);\n }, [ctx, items, opened]);\n\n const handleOnClick = useCallback(() => {\n if (opened) setOpenedDrilldowns(openedDrilldowns.filter((openedDrilldown) => openedDrilldown !== dsId));\n else setOpenedDrilldowns([...openedDrilldowns, dsId as string]);\n }, [opened, setOpenedDrilldowns, openedDrilldowns, dsId]);\n\n return (\n <ItemRenderer\n item={{\n ...item,\n itemOpts: {\n ariaExpanded: opened,\n ariaRole: 'menuitem',\n ...item.itemOpts,\n openable: !opened,\n closable: opened,\n },\n CollapsedComponent: null,\n }}\n subitems={subitems}\n minHeight=\"32px\"\n paddingTop=\"8px\"\n onClick={handleOnClick}\n >\n <StyledArrowContainer\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={labelDataTestId || LEFT_NAVIGATION_DATA_TESTID.ITEM_LABEL}\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"],
4
+ "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-lines */\nimport { ArrowheadDown, ArrowheadRight } from '@elliemae/ds-icons';\nimport { SimpleTruncatedTooltipText } from '@elliemae/ds-truncated-tooltip-text';\nimport React, { useCallback, useEffect, 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\n// Subitem mapping\nconst outOfTheBoxSubitemsComponents: Record<string, React.ComponentType<DSLeftNavigationT.ComponentProps>> = {\n [ITEM_TYPES.LEFT_NAV_ITEM_SEPARATOR]: ItemSeparator,\n [ITEM_TYPES.LEFT_NAV_ITEM_WITH_DATE]: ItemWithDate,\n [ITEM_TYPES.LEFT_NAV_ITEM_TEXT_LABEL]: ItemTextLabel,\n};\n\nconst OutOfTheBoxMapSubitem: React.ComponentType<DSLeftNavigationT.ComponentProps> = (props) => {\n const {\n item,\n item: { type, Component },\n ctx,\n } = props;\n\n if (typeof type === 'string' && !!outOfTheBoxSubitemsComponents[type]) {\n const OutOfTheBoxComponent = outOfTheBoxSubitemsComponents[type];\n const currentIndent = item.itemOpts?.indent ?? 0;\n const newItem = {\n ...item,\n itemOpts: { ...item.itemOpts, indent: currentIndent + 44 },\n };\n return <OutOfTheBoxComponent item={newItem} ctx={ctx} />;\n }\n if (!Component) return null;\n // we expect an error to be threw if Component is not defined and type is not a valid out-of-the-box...\n return <Component item={item} ctx={ctx} />;\n};\n\nexport const ItemUncontrolledDrilldown = (props: DSLeftNavigationT.ComponentProps): JSX.Element => {\n const {\n item,\n item: {\n dsId,\n itemOpts: {\n label,\n RightComponent,\n labelRightSection,\n labelOverflow: itemLabelOverflow,\n labelBold,\n labelColor,\n startOpened,\n items,\n labelDataTestId,\n },\n },\n ctx,\n ctx: {\n leftNavProps: { labelOverflow: leftNavLabelOverflow },\n openedDrilldowns,\n setOpenedDrilldowns,\n },\n } = props;\n\n // Start opened functionality\n useEffect(() => {\n if (startOpened) setOpenedDrilldowns([...openedDrilldowns, dsId as string]);\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, []);\n\n const opened = openedDrilldowns.includes(dsId as string);\n\n const labelOverflow = itemLabelOverflow || leftNavLabelOverflow;\n\n const arrowIcon = useMemo(() => {\n const Component = opened ? ArrowheadDown : ArrowheadRight;\n return <Component width=\"24px\" height=\"18px\" color={['brand-primary', '800']} />;\n }, [opened]);\n\n // Array of subitems\n const subitems = useMemo(() => {\n if (!opened || !items) return [];\n return items.map((subitem) => <OutOfTheBoxMapSubitem item={subitem} ctx={ctx} key={subitem.dsId} />);\n }, [ctx, items, opened]);\n\n const handleOnClick = useCallback(() => {\n if (opened) setOpenedDrilldowns(openedDrilldowns.filter((openedDrilldown) => openedDrilldown !== dsId));\n else setOpenedDrilldowns([...openedDrilldowns, dsId as string]);\n }, [opened, setOpenedDrilldowns, openedDrilldowns, dsId]);\n\n return (\n <ItemRenderer\n item={{\n ...item,\n itemOpts: {\n ariaExpanded: opened,\n ariaRole: 'menuitem',\n ...item.itemOpts,\n openable: !opened,\n closable: opened,\n },\n CollapsedComponent: null,\n }}\n subitems={subitems}\n minHeight=\"32px\"\n paddingTop=\"8px\"\n onClick={handleOnClick}\n >\n <StyledArrowContainer\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={labelDataTestId || 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
5
  "mappings": "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",
6
6
  "names": []
7
7
  }
package/dist/esm/outOfTheBox/ItemWithDate/index.js CHANGED
@@ -44,7 +44,7 @@ const ItemWithDate = (props) => {
44
44
  labelOverflow,
45
45
  labelBold,
46
46
  labelColor,
47
- "data-testid": labelDataTestId || LEFT_NAVIGATION_DATA_TESTID.ITEM_LABEL,
47
+ "data-testid": labelDataTestId || LEFT_NAVIGATION_DATA_TESTID.LIST_ITEM_LABEL_ID_EXCEPTION,
48
48
  children: labelOverflow === "truncate" && label ? /* @__PURE__ */ jsx(SimpleTruncatedTooltipText, { value: label, placement: "bottom-start" }) : label
49
49
  }
50
50
  ),
package/dist/esm/outOfTheBox/ItemWithDate/index.js.map CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/outOfTheBox/ItemWithDate/index.tsx"],
4
- "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { SimpleTruncatedTooltipText } from '@elliemae/ds-truncated-tooltip-text';\nimport { LEFT_NAVIGATION_DATA_TESTID } from '../../constants/constants.js';\nimport { ItemRenderer } from '../../exported-related/index.js';\nimport type { DSLeftNavigationT } from '../../react-desc-prop-types.js';\nimport { StyledDate, StyledLabel, StyledRightContainer } from '../styled.js';\n\nexport const ItemWithDate = (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 labelDataTestId,\n },\n },\n ctx,\n ctx: {\n leftNavProps: { labelOverflow: leftNavLabelOverflow },\n },\n } = props;\n\n const labelOverflow = itemLabelOverflow || leftNavLabelOverflow;\n return (\n <ItemRenderer\n item={{\n ...item,\n CollapsedComponent: null,\n }}\n minHeight=\"32px\"\n paddingTop=\"8px\"\n >\n {/* Empty LeftComponent */} <div />\n <StyledLabel\n pl=\"xxs\"\n pb=\"xxxs\"\n labelOverflow={labelOverflow}\n labelBold={labelBold}\n labelColor={labelColor}\n data-testid={labelDataTestId || LEFT_NAVIGATION_DATA_TESTID.ITEM_LABEL}\n >\n {labelOverflow === 'truncate' && label ? (\n <SimpleTruncatedTooltipText value={label} placement=\"bottom-start\" />\n ) : (\n label\n )}\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"],
4
+ "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { SimpleTruncatedTooltipText } from '@elliemae/ds-truncated-tooltip-text';\nimport { LEFT_NAVIGATION_DATA_TESTID } from '../../constants/constants.js';\nimport { ItemRenderer } from '../../exported-related/index.js';\nimport type { DSLeftNavigationT } from '../../react-desc-prop-types.js';\nimport { StyledDate, StyledLabel, StyledRightContainer } from '../styled.js';\n\nexport const ItemWithDate = (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 labelDataTestId,\n },\n },\n ctx,\n ctx: {\n leftNavProps: { labelOverflow: leftNavLabelOverflow },\n },\n } = props;\n\n const labelOverflow = itemLabelOverflow || leftNavLabelOverflow;\n return (\n <ItemRenderer\n item={{\n ...item,\n CollapsedComponent: null,\n }}\n minHeight=\"32px\"\n paddingTop=\"8px\"\n >\n {/* Empty LeftComponent */} <div />\n <StyledLabel\n pl=\"xxs\"\n pb=\"xxxs\"\n labelOverflow={labelOverflow}\n labelBold={labelBold}\n labelColor={labelColor}\n data-testid={labelDataTestId || LEFT_NAVIGATION_DATA_TESTID.LIST_ITEM_LABEL_ID_EXCEPTION}\n >\n {labelOverflow === 'truncate' && label ? (\n <SimpleTruncatedTooltipText value={label} placement=\"bottom-start\" />\n ) : (\n label\n )}\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
5
  "mappings": "AAAA,YAAY,WAAW;ACoCW,cAe5B,YAf4B;AApClC,SAAS,kCAAkC;AAC3C,SAAS,mCAAmC;AAC5C,SAAS,oBAAoB;AAE7B,SAAS,YAAY,aAAa,4BAA4B;AAEvD,MAAM,eAAe,CAAC,UAAyD;AACpF,QAAM;AAAA,IACJ;AAAA,IACA,MAAM;AAAA,MACJ,UAAU;AAAA,QACR;AAAA,QACA;AAAA,QACA;AAAA,QACA,eAAe;AAAA,QACf;AAAA,QACA;AAAA,QACA;AAAA,MACF;AAAA,IACF;AAAA,IACA;AAAA,IACA,KAAK;AAAA,MACH,cAAc,EAAE,eAAe,qBAAqB;AAAA,IACtD;AAAA,EACF,IAAI;AAEJ,QAAM,gBAAgB,qBAAqB;AAC3C,SACE;AAAA,IAAC;AAAA;AAAA,MACC,MAAM;AAAA,QACJ,GAAG;AAAA,QACH,oBAAoB;AAAA,MACtB;AAAA,MACA,WAAU;AAAA,MACV,YAAW;AAAA,MAEgB;AAAA;AAAA,QAAC,oBAAC,SAAI;AAAA,QACjC;AAAA,UAAC;AAAA;AAAA,YACC,IAAG;AAAA,YACH,IAAG;AAAA,YACH;AAAA,YACA;AAAA,YACA;AAAA,YACA,eAAa,mBAAmB,4BAA4B;AAAA,YAE3D,4BAAkB,cAAc,QAC/B,oBAAC,8BAA2B,OAAO,OAAO,WAAU,gBAAe,IAEnE;AAAA;AAAA,QAEJ;AAAA,QACA;AAAA,UAAC;AAAA;AAAA,YACC,IAAG;AAAA,YACH,MAAM,CAAC,QAAQ,MAAM;AAAA,YACrB,YAAW;AAAA,YACX,QAAO;AAAA,YACP,eAAa,4BAA4B;AAAA,YAEzC;AAAA;AAAA,gBAAC;AAAA;AAAA,kBACC,IAAG;AAAA,kBACH,eAAa,4BAA4B;AAAA,kBAExC;AAAA;AAAA,cACH;AAAA,cACC,kBAAkB,oBAAC,kBAAe,KAAU,MAAY;AAAA;AAAA;AAAA,QAC3D;AAAA;AAAA;AAAA,EACF;AAEJ;",
6
6
  "names": []
7
7
  }
package/dist/esm/outOfTheBox/styled.js CHANGED
@@ -7,16 +7,24 @@ const StyledLabel = styled(Grid, {
7
7
  name: DSLeftNavigationName,
8
8
  slot: LEFT_NAVIGATION_SLOTS.ITEM_LABEL
9
9
  })`
10
- font-size: 13px;
10
+ font-size: 1rem; // 13px -> 13/13 = 1rem;
11
11
  font-weight: ${(props) => props.labelBold ? props.theme.fontWeights.semibold : props.theme.fontWeights.regular};
12
12
  color: ${({ labelColor, theme }) => labelColor ? theme.colors[labelColor[0]][labelColor[1]] : theme.colors.neutral[800]};
13
- line-height: 14px;
13
+ line-height: 1.0769rem; // 14px -> 14/13 = 1.0769rem
14
14
  word-break: ${(props) => props.labelOverflow === "wrapAll" ? "break-all" : "normal"};
15
+ @media (max-width: ${({ theme }) => theme.breakpoints.small}) {
16
+ font-size: 0.8125rem; // 16px -> 13/16 = 0.8125
17
+ line-height: 0.875rem; // 14px -> 14/16 = 0.875rem
18
+ }
15
19
  `;
16
20
  const StyledDate = styled(Grid, { name: DSLeftNavigationName, slot: LEFT_NAVIGATION_SLOTS.ITEM_DATE })`
17
- font-size: 12px;
21
+ font-size: 0.923rem; // 12px -> 12/13 = 0.9230rem
18
22
  color: ${(props) => props.theme.colors.neutral[600]};
19
- line-height: 14px;
23
+ line-height: 1.0769rem; // 14px -> 14/13 = 1.0769rem
24
+ @media (max-width: ${({ theme }) => theme.breakpoints.small}) {
25
+ font-size: 0.75rem; // 12px -> 12/16 = 0.75rem
26
+ line-height: 0.875rem; // 14px -> 14/16 = 0.875rem
27
+ }
20
28
  `;
21
29
  const StyledArrowContainer = styled(Grid, {
22
30
  name: DSLeftNavigationName,
@@ -30,10 +38,14 @@ const StyledSectionLabel = styled("span", {
30
38
  name: DSLeftNavigationName,
31
39
  slot: LEFT_NAVIGATION_SLOTS.SECTION_LABEL
32
40
  })`
33
- font-size: 13px;
41
+ font-size: 1rem; // 13px -> 13/13 = 1rem
34
42
  color: ${(props) => props.theme.colors.neutral[700]};
35
43
  margin-left: ${(props) => props.theme.space.xxs};
36
- line-height: 13px;
44
+ line-height: 1rem; // 13px -> 13/13 = 1rem
45
+ @media (max-width: ${({ theme }) => theme.breakpoints.small}) {
46
+ font-size: 0.8125rem; // 13px -> 13/16 = 0.8125rem
47
+ line-height: 0.8125rem; // 13px -> 13/16 = 0.8125rem
48
+ }
37
49
  `;
38
50
  const StyledVerticalSeparator = styled("div", {
39
51
  name: DSLeftNavigationName,
@@ -48,8 +60,12 @@ const StyledRightLabel = styled("span", {
48
60
  name: DSLeftNavigationName,
49
61
  slot: LEFT_NAVIGATION_SLOTS.SECTION_RIGHT_LABEL
50
62
  })`
51
- font-size: 12px;
52
- line-height: 13px;
63
+ font-size: 0.923rem; // 12px -> 12/13 = 0.9230rem;
64
+ line-height: 1rem; // 13px -> 13/13 = 1rem
65
+ @media (max-width: ${({ theme }) => theme.breakpoints.small}) {
66
+ font-size: 0.75rem; // 12px -> 12/16 = 0.75rem
67
+ line-height: 0.8125rem; // 13px -> 13/16 = 0.8125rem
68
+ }
53
69
  `;
54
70
  const StyledSectionContainer = styled(Grid, {
55
71
  name: DSLeftNavigationName,
@@ -66,9 +82,12 @@ const StyledLeftContainer = styled(Grid, {
66
82
  slot: LEFT_NAVIGATION_SLOTS.LEFT_CONTAINER
67
83
  })``;
68
84
  const StyledItemLabel = styled(Grid, { name: DSLeftNavigationName, slot: LEFT_NAVIGATION_SLOTS.ITEM_LABEL })`
69
- font-size: 14px;
85
+ font-size: 1.0769rem; // 14px -> 14/13 = 1.0769rem
70
86
  color: ${(props) => props.theme.colors.neutral[800]};
71
87
  word-break: ${(props) => props.labelOverflow === "wrapAll" ? "break-all" : "normal"};
88
+ @media (max-width: ${({ theme }) => theme.breakpoints.small}) {
89
+ font-size: 0.875rem; // 14px -> 14/16 = 0.875rem
90
+ }
72
91
  `;
73
92
  const StyledChevronLeft = styled(DSButtonV2, {
74
93
  name: DSLeftNavigationName,
package/dist/esm/outOfTheBox/styled.js.map CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../src/outOfTheBox/styled.tsx"],
4
- "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { styled, type Theme } from '@elliemae/ds-system';\nimport { Grid } from '@elliemae/ds-grid';\nimport { DSButtonV2 } from '@elliemae/ds-button-v2';\nimport { DSLeftNavigationName, LEFT_NAVIGATION_SLOTS } from '../constants/constants.js';\nimport type { DSLeftNavigationT } from '../react-desc-prop-types.js';\ntype ColorsKey = keyof Theme['colors'];\n\ninterface StyledLabelT {\n labelBold?: boolean;\n labelOverflow?: string;\n labelColor?: [ColorsKey, keyof Theme['colors'][ColorsKey]];\n}\n\nexport const StyledLabel = styled(Grid, {\n name: DSLeftNavigationName,\n slot: LEFT_NAVIGATION_SLOTS.ITEM_LABEL,\n})<StyledLabelT>`\n font-size: 13px;\n font-weight: ${(props) => (props.labelBold ? props.theme.fontWeights.semibold : props.theme.fontWeights.regular)};\n color: ${({ labelColor, theme }) =>\n labelColor ? theme.colors[labelColor[0]][labelColor[1]] : theme.colors.neutral[800]};\n line-height: 14px;\n word-break: ${(props) => (props.labelOverflow === 'wrapAll' ? 'break-all' : 'normal')};\n`;\n\nexport const StyledDate = styled(Grid, { name: DSLeftNavigationName, slot: LEFT_NAVIGATION_SLOTS.ITEM_DATE })`\n font-size: 12px;\n color: ${(props) => props.theme.colors.neutral[600]};\n line-height: 14px;\n`;\n\nexport const StyledArrowContainer = styled(Grid, {\n name: DSLeftNavigationName,\n slot: LEFT_NAVIGATION_SLOTS.ARROW_CONTAINER,\n})``;\n\nexport const StyledRightContainer = styled(Grid, {\n name: DSLeftNavigationName,\n slot: LEFT_NAVIGATION_SLOTS.RIGHT_CONTAINER,\n})``;\n\nexport const StyledSectionLabel = styled('span', {\n name: DSLeftNavigationName,\n slot: LEFT_NAVIGATION_SLOTS.SECTION_LABEL,\n})`\n font-size: 13px;\n color: ${(props) => props.theme.colors.neutral[700]};\n margin-left: ${(props) => props.theme.space.xxs};\n line-height: 13px;\n`;\n\nexport const StyledVerticalSeparator = styled('div', {\n name: DSLeftNavigationName,\n slot: LEFT_NAVIGATION_SLOTS.VERTICAL_SEPARATOR,\n})`\n margin: 0 ${(props) => props.theme.space.xxs};\n width: 1px;\n height: 13px;\n background: ${(props) => props.theme.colors.neutral[600]};\n`;\n\nexport const StyledRightLabel = styled('span', {\n name: DSLeftNavigationName,\n slot: LEFT_NAVIGATION_SLOTS.SECTION_RIGHT_LABEL,\n})`\n font-size: 12px;\n line-height: 13px;\n`;\n\nexport const StyledSectionContainer = styled(Grid, {\n name: DSLeftNavigationName,\n slot: LEFT_NAVIGATION_SLOTS.SECTION_CONTAINER,\n})``;\n\nexport const StyledBottomContainer = styled(Grid, {\n name: DSLeftNavigationName,\n slot: LEFT_NAVIGATION_SLOTS.BOTTOM_CONTAINER,\n})`\n grid-column: span 3;\n`;\n\nexport const StyledLeftContainer = styled(Grid, {\n name: DSLeftNavigationName,\n slot: LEFT_NAVIGATION_SLOTS.LEFT_CONTAINER,\n})``;\n\nexport const StyledItemLabel = styled(Grid, { name: DSLeftNavigationName, slot: LEFT_NAVIGATION_SLOTS.ITEM_LABEL })<{\n labelOverflow?: DSLeftNavigationT.LabelOveflowT;\n}>`\n font-size: 14px;\n color: ${(props) => props.theme.colors.neutral[800]};\n word-break: ${(props) => (props.labelOverflow === 'wrapAll' ? 'break-all' : 'normal')};\n`;\n\nexport const StyledChevronLeft = styled(DSButtonV2, {\n name: DSLeftNavigationName,\n slot: LEFT_NAVIGATION_SLOTS.ITEM_CHEVRON_BACK,\n})`\n padding: 0;\n :focus {\n outline: 2px solid ${(props) => props.theme.colors.brand[800]};\n }\n`;\n"],
5
- "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,cAA0B;AACnC,SAAS,YAAY;AACrB,SAAS,kBAAkB;AAC3B,SAAS,sBAAsB,6BAA6B;AAUrD,MAAM,cAAc,OAAO,MAAM;AAAA,EACtC,MAAM;AAAA,EACN,MAAM,sBAAsB;AAC9B,CAAC;AAAA;AAAA,iBAEgB,CAAC,UAAW,MAAM,YAAY,MAAM,MAAM,YAAY,WAAW,MAAM,MAAM,YAAY,OAAQ;AAAA,WACvG,CAAC,EAAE,YAAY,MAAM,MAC5B,aAAa,MAAM,OAAO,WAAW,CAAC,CAAC,EAAE,WAAW,CAAC,CAAC,IAAI,MAAM,OAAO,QAAQ,GAAG,CAAC;AAAA;AAAA,gBAEvE,CAAC,UAAW,MAAM,kBAAkB,YAAY,cAAc,QAAS;AAAA;AAGhF,MAAM,aAAa,OAAO,MAAM,EAAE,MAAM,sBAAsB,MAAM,sBAAsB,UAAU,CAAC;AAAA;AAAA,WAEjG,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ,GAAG,CAAC;AAAA;AAAA;AAI9C,MAAM,uBAAuB,OAAO,MAAM;AAAA,EAC/C,MAAM;AAAA,EACN,MAAM,sBAAsB;AAC9B,CAAC;AAEM,MAAM,uBAAuB,OAAO,MAAM;AAAA,EAC/C,MAAM;AAAA,EACN,MAAM,sBAAsB;AAC9B,CAAC;AAEM,MAAM,qBAAqB,OAAO,QAAQ;AAAA,EAC/C,MAAM;AAAA,EACN,MAAM,sBAAsB;AAC9B,CAAC;AAAA;AAAA,WAEU,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ,GAAG,CAAC;AAAA,iBACpC,CAAC,UAAU,MAAM,MAAM,MAAM,GAAG;AAAA;AAAA;AAI1C,MAAM,0BAA0B,OAAO,OAAO;AAAA,EACnD,MAAM;AAAA,EACN,MAAM,sBAAsB;AAC9B,CAAC;AAAA,cACa,CAAC,UAAU,MAAM,MAAM,MAAM,GAAG;AAAA;AAAA;AAAA,gBAG9B,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ,GAAG,CAAC;AAAA;AAGnD,MAAM,mBAAmB,OAAO,QAAQ;AAAA,EAC7C,MAAM;AAAA,EACN,MAAM,sBAAsB;AAC9B,CAAC;AAAA;AAAA;AAAA;AAKM,MAAM,yBAAyB,OAAO,MAAM;AAAA,EACjD,MAAM;AAAA,EACN,MAAM,sBAAsB;AAC9B,CAAC;AAEM,MAAM,wBAAwB,OAAO,MAAM;AAAA,EAChD,MAAM;AAAA,EACN,MAAM,sBAAsB;AAC9B,CAAC;AAAA;AAAA;AAIM,MAAM,sBAAsB,OAAO,MAAM;AAAA,EAC9C,MAAM;AAAA,EACN,MAAM,sBAAsB;AAC9B,CAAC;AAEM,MAAM,kBAAkB,OAAO,MAAM,EAAE,MAAM,sBAAsB,MAAM,sBAAsB,WAAW,CAAC;AAAA;AAAA,WAIvG,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ,GAAG,CAAC;AAAA,gBACrC,CAAC,UAAW,MAAM,kBAAkB,YAAY,cAAc,QAAS;AAAA;AAGhF,MAAM,oBAAoB,OAAO,YAAY;AAAA,EAClD,MAAM;AAAA,EACN,MAAM,sBAAsB;AAC9B,CAAC;AAAA;AAAA;AAAA,yBAGwB,CAAC,UAAU,MAAM,MAAM,OAAO,MAAM,GAAG,CAAC;AAAA;AAAA;",
4
+ "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable @typescript-eslint/no-unsafe-return */\nimport { styled, type Theme } from '@elliemae/ds-system';\nimport { Grid } from '@elliemae/ds-grid';\nimport { DSButtonV2 } from '@elliemae/ds-button-v2';\nimport { DSLeftNavigationName, LEFT_NAVIGATION_SLOTS } from '../constants/constants.js';\nimport type { DSLeftNavigationT } from '../react-desc-prop-types.js';\ntype ColorsKey = keyof Theme['colors'];\n\ninterface StyledLabelT {\n labelBold?: boolean;\n labelOverflow?: string;\n labelColor?: [ColorsKey, keyof Theme['colors'][ColorsKey]];\n}\n\nexport const StyledLabel = styled(Grid, {\n name: DSLeftNavigationName,\n slot: LEFT_NAVIGATION_SLOTS.ITEM_LABEL,\n})<StyledLabelT>`\n font-size: 1rem; // 13px -> 13/13 = 1rem;\n font-weight: ${(props) => (props.labelBold ? props.theme.fontWeights.semibold : props.theme.fontWeights.regular)};\n color: ${({ labelColor, theme }) =>\n labelColor ? theme.colors[labelColor[0]][labelColor[1]] : theme.colors.neutral[800]};\n line-height: 1.0769rem; // 14px -> 14/13 = 1.0769rem\n word-break: ${(props) => (props.labelOverflow === 'wrapAll' ? 'break-all' : 'normal')};\n @media (max-width: ${({ theme }) => theme.breakpoints.small}) {\n font-size: 0.8125rem; // 16px -> 13/16 = 0.8125\n line-height: 0.875rem; // 14px -> 14/16 = 0.875rem\n }\n`;\n\nexport const StyledDate = styled(Grid, { name: DSLeftNavigationName, slot: LEFT_NAVIGATION_SLOTS.ITEM_DATE })`\n font-size: 0.923rem; // 12px -> 12/13 = 0.9230rem\n color: ${(props) => props.theme.colors.neutral[600]};\n line-height: 1.0769rem; // 14px -> 14/13 = 1.0769rem\n @media (max-width: ${({ theme }) => theme.breakpoints.small}) {\n font-size: 0.75rem; // 12px -> 12/16 = 0.75rem\n line-height: 0.875rem; // 14px -> 14/16 = 0.875rem\n }\n`;\n\nexport const StyledArrowContainer = styled(Grid, {\n name: DSLeftNavigationName,\n slot: LEFT_NAVIGATION_SLOTS.ARROW_CONTAINER,\n})``;\n\nexport const StyledRightContainer = styled(Grid, {\n name: DSLeftNavigationName,\n slot: LEFT_NAVIGATION_SLOTS.RIGHT_CONTAINER,\n})``;\n\nexport const StyledSectionLabel = styled('span', {\n name: DSLeftNavigationName,\n slot: LEFT_NAVIGATION_SLOTS.SECTION_LABEL,\n})`\n font-size: 1rem; // 13px -> 13/13 = 1rem\n color: ${(props) => props.theme.colors.neutral[700]};\n margin-left: ${(props) => props.theme.space.xxs};\n line-height: 1rem; // 13px -> 13/13 = 1rem\n @media (max-width: ${({ theme }) => theme.breakpoints.small}) {\n font-size: 0.8125rem; // 13px -> 13/16 = 0.8125rem\n line-height: 0.8125rem; // 13px -> 13/16 = 0.8125rem\n }\n`;\n\nexport const StyledVerticalSeparator = styled('div', {\n name: DSLeftNavigationName,\n slot: LEFT_NAVIGATION_SLOTS.VERTICAL_SEPARATOR,\n})`\n margin: 0 ${(props) => props.theme.space.xxs};\n width: 1px;\n height: 13px;\n background: ${(props) => props.theme.colors.neutral[600]};\n`;\n\nexport const StyledRightLabel = styled('span', {\n name: DSLeftNavigationName,\n slot: LEFT_NAVIGATION_SLOTS.SECTION_RIGHT_LABEL,\n})`\n font-size: 0.923rem; // 12px -> 12/13 = 0.9230rem;\n line-height: 1rem; // 13px -> 13/13 = 1rem\n @media (max-width: ${({ theme }) => theme.breakpoints.small}) {\n font-size: 0.75rem; // 12px -> 12/16 = 0.75rem\n line-height: 0.8125rem; // 13px -> 13/16 = 0.8125rem\n }\n`;\n\nexport const StyledSectionContainer = styled(Grid, {\n name: DSLeftNavigationName,\n slot: LEFT_NAVIGATION_SLOTS.SECTION_CONTAINER,\n})``;\n\nexport const StyledBottomContainer = styled(Grid, {\n name: DSLeftNavigationName,\n slot: LEFT_NAVIGATION_SLOTS.BOTTOM_CONTAINER,\n})`\n grid-column: span 3;\n`;\n\nexport const StyledLeftContainer = styled(Grid, {\n name: DSLeftNavigationName,\n slot: LEFT_NAVIGATION_SLOTS.LEFT_CONTAINER,\n})``;\n\nexport const StyledItemLabel = styled(Grid, { name: DSLeftNavigationName, slot: LEFT_NAVIGATION_SLOTS.ITEM_LABEL })<{\n labelOverflow?: DSLeftNavigationT.LabelOveflowT;\n}>`\n font-size: 1.0769rem; // 14px -> 14/13 = 1.0769rem\n color: ${(props) => props.theme.colors.neutral[800]};\n word-break: ${(props) => (props.labelOverflow === 'wrapAll' ? 'break-all' : 'normal')};\n @media (max-width: ${({ theme }) => theme.breakpoints.small}) {\n font-size: 0.875rem; // 14px -> 14/16 = 0.875rem\n }\n`;\n\nexport const StyledChevronLeft = styled(DSButtonV2, {\n name: DSLeftNavigationName,\n slot: LEFT_NAVIGATION_SLOTS.ITEM_CHEVRON_BACK,\n})`\n padding: 0;\n :focus {\n outline: 2px solid ${(props) => props.theme.colors.brand[800]};\n }\n`;\n"],
5
+ "mappings": "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",
6
6
  "names": []
7
7
  }
package/dist/esm/parts/LeftNavFooterItem/index.js CHANGED
@@ -120,6 +120,7 @@ const LeftNavFooterItem = (props) => {
120
120
  mb: "16px",
121
121
  labelOverflow,
122
122
  "aria-live": "polite",
123
+ "data-testid": LEFT_NAVIGATION_DATA_TESTID.ITEM_LABEL,
123
124
  getOwnerProps,
124
125
  getOwnerPropsArguments,
125
126
  children: label
package/dist/esm/parts/LeftNavFooterItem/index.js.map CHANGED
@@ -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 react-hooks/rules-of-hooks */\n/* eslint-disable max-lines */\nimport { Grid } from '@elliemae/ds-grid';\nimport { MenuCollapse, MenuExpand } from '@elliemae/ds-icons';\nimport { DSSkeleton } from '@elliemae/ds-skeleton';\nimport React, { useCallback, useContext, useMemo } from 'react';\n\nimport { SimpleTruncatedTooltipText } from '@elliemae/ds-truncated-tooltip-text';\nimport LeftNavigationContext from '../../LeftNavigationContext.js';\nimport { LEFT_NAVIGATION_DATA_TESTID } from '../../constants/constants.js';\nimport { FOOTER_DS_ID, FOOTER_MENU_CLOSE_DS_ID } from '../../exported-related/constants.js';\nimport { useKeyboardNavigation } from '../../hooks/index.js';\nimport {\n StyledFooterItem,\n StyledFooterLabel,\n StyledFooterMenu,\n StyledFooterSeparator,\n StyledMenuCollapse,\n} from './styled.js';\n\ntype LeftNavFooterItemProps = {\n footerLabel: string;\n FooterLabelComponent?: React.ComponentType<unknown>;\n onFooterExpand: React.MouseEventHandler & React.KeyboardEventHandler;\n onFooterClose: React.MouseEventHandler & React.KeyboardEventHandler;\n};\n\n// eslint-disable-next-line complexity\nexport const LeftNavFooterItem: React.ComponentType<LeftNavFooterItemProps> = (props) => {\n const { footerLabel, FooterLabelComponent, onFooterExpand = () => null, onFooterClose = () => null } = props;\n const {\n leftNavProps: { labelOverflow, isSkeleton, hideFooterPipe, expanded },\n expandedForAnimation,\n setFocusedItem,\n focusedItem,\n visibleItemsRefs,\n leftNavProps,\n } = useContext(LeftNavigationContext);\n const id = FOOTER_DS_ID;\n\n const handleOnClick = expandedForAnimation ? onFooterClose : onFooterExpand;\n\n const onKeyDown = useKeyboardNavigation({\n item: {\n dsId: id,\n itemOpts: {\n selectable: !expandedForAnimation,\n openable: false,\n closable: false,\n },\n },\n onClick: handleOnClick,\n });\n\n const handleMenuCollapseClick = useCallback(\n (e: React.MouseEvent<HTMLButtonElement, MouseEvent> | React.KeyboardEvent<HTMLButtonElement>) => {\n e.stopPropagation();\n handleOnClick(e as React.MouseEvent<HTMLButtonElement, MouseEvent>);\n setFocusedItem(id);\n },\n [handleOnClick, id, setFocusedItem],\n );\n\n const label = useMemo(() => {\n if (FooterLabelComponent) {\n return <FooterLabelComponent />;\n }\n if (labelOverflow === 'truncate') {\n return <SimpleTruncatedTooltipText value={footerLabel} placement=\"bottom-start\" />;\n }\n return footerLabel;\n }, [footerLabel, FooterLabelComponent, labelOverflow]);\n\n const postAnimationButtonFocusHandler = useCallback(\n (newHTMLNode: HTMLButtonElement | null) => {\n if (newHTMLNode === null || !expanded) {\n return;\n }\n if (focusedItem === id) {\n newHTMLNode.focus();\n }\n },\n [focusedItem, id, expanded],\n );\n\n if (isSkeleton) {\n return (\n <StyledFooterMenu\n key={id}\n data-testid={LEFT_NAVIGATION_DATA_TESTID.FOOTER_MENU} // https://jira.elliemae.io/browse/PUI-15589\n >\n <Grid height=\"48px\" justifyContent=\"center\" alignItems=\"center\" cols={['1fr']} p=\"xxs\">\n <DSSkeleton variant=\"rectangular\" height=\"24px\" />\n </Grid>\n </StyledFooterMenu>\n );\n }\n\n const getOwnerProps = React.useCallback(() => leftNavProps, [leftNavProps]);\n\n const getOwnerPropsArguments = React.useCallback(() => ({}), []);\n\n return (\n <StyledFooterMenu\n key={id}\n data-testid={LEFT_NAVIGATION_DATA_TESTID.FOOTER_MENU} // https://jira.elliemae.io/browse/PUI-15589\n getOwnerProps={getOwnerProps}\n getOwnerPropsArguments={getOwnerPropsArguments}\n >\n <StyledFooterItem\n innerRef={visibleItemsRefs.current[id]}\n tabIndex={expandedForAnimation ? -1 : 0}\n expanded={expandedForAnimation}\n pt=\"xxs2\"\n height={expandedForAnimation ? 'auto' : '48px'}\n alignItems=\"flex-start\"\n pl=\"xxs2\"\n cols={expandedForAnimation ? ['auto', '1fr', 'auto'] : ['38px']}\n onClick={expandedForAnimation ? () => null : handleOnClick}\n onKeyDown={onKeyDown}\n onFocus={() => setFocusedItem(id)}\n role=\"menuitem\"\n aria-label={\n expandedForAnimation\n ? `Footer, ${typeof footerLabel === 'string' ? footerLabel : ''}`\n : `Expand left navigation`\n }\n data-testid={LEFT_NAVIGATION_DATA_TESTID.FOOTER_ITEM} // https://jira.elliemae.io/browse/PUI-15589\n getOwnerProps={getOwnerProps}\n getOwnerPropsArguments={getOwnerPropsArguments}\n >\n {!expandedForAnimation ? (\n <MenuExpand\n size=\"m\"\n color={['brand-primary', '800']}\n // https://jira.elliemae.io/browse/PUI-15589\n // VERY SPECIAL CASE, THE SLOT FOOTER_BTN GOES TO THE ICON WHEN COLLAPSED, TO THE BTN WHEN EXPANDED\n data-testid={LEFT_NAVIGATION_DATA_TESTID.FOOTER_BTN}\n />\n ) : (\n <>\n <StyledFooterLabel\n mt=\"5px\"\n mr=\"12px\"\n mb=\"16px\"\n labelOverflow={labelOverflow}\n aria-live=\"polite\"\n getOwnerProps={getOwnerProps}\n getOwnerPropsArguments={getOwnerPropsArguments}\n >\n {label}\n </StyledFooterLabel>\n {!hideFooterPipe ? (\n <StyledFooterSeparator\n mt=\"xxxs\"\n data-testid={LEFT_NAVIGATION_DATA_TESTID.FOOTER_SEPARATOR} // https://jira.elliemae.io/browse/PUI-15589\n />\n ) : (\n <div></div>\n )}\n <StyledMenuCollapse\n innerRef={postAnimationButtonFocusHandler}\n buttonType=\"raw\"\n onClick={handleMenuCollapseClick}\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 // VERY SPECIAL CASE, THE SLOT FOOTER_BTN GOES TO THE ICON WHEN COLLAPSED, TO THE BTN WHEN EXPANDED\n data-testid={LEFT_NAVIGATION_DATA_TESTID.FOOTER_BTN}\n getOwnerProps={getOwnerProps}\n getOwnerPropsArguments={getOwnerPropsArguments}\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;ACiEV,SA2EH,UA3EG,KA2EH,YA3EG;AA/Db,SAAS,YAAY;AACrB,SAAS,cAAc,kBAAkB;AACzC,SAAS,kBAAkB;AAC3B,OAAOA,UAAS,aAAa,YAAY,eAAe;AAExD,SAAS,kCAAkC;AAC3C,OAAO,2BAA2B;AAClC,SAAS,mCAAmC;AAC5C,SAAS,cAAc,+BAA+B;AACtD,SAAS,6BAA6B;AACtC;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAUA,MAAM,oBAAiE,CAAC,UAAU;AACvF,QAAM,EAAE,aAAa,sBAAsB,iBAAiB,MAAM,MAAM,gBAAgB,MAAM,KAAK,IAAI;AACvG,QAAM;AAAA,IACJ,cAAc,EAAE,eAAe,YAAY,gBAAgB,SAAS;AAAA,IACpE;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI,WAAW,qBAAqB;AACpC,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,QAAM,0BAA0B;AAAA,IAC9B,CAAC,MAAgG;AAC/F,QAAE,gBAAgB;AAClB,oBAAc,CAAoD;AAClE,qBAAe,EAAE;AAAA,IACnB;AAAA,IACA,CAAC,eAAe,IAAI,cAAc;AAAA,EACpC;AAEA,QAAM,QAAQ,QAAQ,MAAM;AAC1B,QAAI,sBAAsB;AACxB,aAAO,oBAAC,wBAAqB;AAAA,IAC/B;AACA,QAAI,kBAAkB,YAAY;AAChC,aAAO,oBAAC,8BAA2B,OAAO,aAAa,WAAU,gBAAe;AAAA,IAClF;AACA,WAAO;AAAA,EACT,GAAG,CAAC,aAAa,sBAAsB,aAAa,CAAC;AAErD,QAAM,kCAAkC;AAAA,IACtC,CAAC,gBAA0C;AACzC,UAAI,gBAAgB,QAAQ,CAAC,UAAU;AACrC;AAAA,MACF;AACA,UAAI,gBAAgB,IAAI;AACtB,oBAAY,MAAM;AAAA,MACpB;AAAA,IACF;AAAA,IACA,CAAC,aAAa,IAAI,QAAQ;AAAA,EAC5B;AAEA,MAAI,YAAY;AACd,WACE;AAAA,MAAC;AAAA;AAAA,QAEC,eAAa,4BAA4B;AAAA,QAEzC,8BAAC,QAAK,QAAO,QAAO,gBAAe,UAAS,YAAW,UAAS,MAAM,CAAC,KAAK,GAAG,GAAE,OAC/E,8BAAC,cAAW,SAAQ,eAAc,QAAO,QAAO,GAClD;AAAA;AAAA,MALK;AAAA,IAMP;AAAA,EAEJ;AAEA,QAAM,gBAAgBA,OAAM,YAAY,MAAM,cAAc,CAAC,YAAY,CAAC;AAE1E,QAAM,yBAAyBA,OAAM,YAAY,OAAO,CAAC,IAAI,CAAC,CAAC;AAE/D,SACE;AAAA,IAAC;AAAA;AAAA,MAEC,eAAa,4BAA4B;AAAA,MACzC;AAAA,MACA;AAAA,MAEA;AAAA,QAAC;AAAA;AAAA,UACC,UAAU,iBAAiB,QAAQ,EAAE;AAAA,UACrC,UAAU,uBAAuB,KAAK;AAAA,UACtC,UAAU;AAAA,UACV,IAAG;AAAA,UACH,QAAQ,uBAAuB,SAAS;AAAA,UACxC,YAAW;AAAA,UACX,IAAG;AAAA,UACH,MAAM,uBAAuB,CAAC,QAAQ,OAAO,MAAM,IAAI,CAAC,MAAM;AAAA,UAC9D,SAAS,uBAAuB,MAAM,OAAO;AAAA,UAC7C;AAAA,UACA,SAAS,MAAM,eAAe,EAAE;AAAA,UAChC,MAAK;AAAA,UACL,cACE,uBACI,WAAW,OAAO,gBAAgB,WAAW,cAAc,EAAE,KAC7D;AAAA,UAEN,eAAa,4BAA4B;AAAA,UACzC;AAAA,UACA;AAAA,UAEC,WAAC,uBACA;AAAA,YAAC;AAAA;AAAA,cACC,MAAK;AAAA,cACL,OAAO,CAAC,iBAAiB,KAAK;AAAA,cAG9B,eAAa,4BAA4B;AAAA;AAAA,UAC3C,IAEA,iCACE;AAAA;AAAA,cAAC;AAAA;AAAA,gBACC,IAAG;AAAA,gBACH,IAAG;AAAA,gBACH,IAAG;AAAA,gBACH;AAAA,gBACA,aAAU;AAAA,gBACV;AAAA,gBACA;AAAA,gBAEC;AAAA;AAAA,YACH;AAAA,YACC,CAAC,iBACA;AAAA,cAAC;AAAA;AAAA,gBACC,IAAG;AAAA,gBACH,eAAa,4BAA4B;AAAA;AAAA,YAC3C,IAEA,oBAAC,SAAI;AAAA,YAEP;AAAA,cAAC;AAAA;AAAA,gBACC,UAAU;AAAA,gBACV,YAAW;AAAA,gBACX,SAAS;AAAA,gBACT,UAAU;AAAA,gBACV,SAAS,CAAC,MAAwB;AAChC,oBAAE,gBAAgB;AAClB,iCAAe,uBAAuB;AAAA,gBACxC;AAAA,gBACA,MAAK;AAAA,gBACL,cAAW;AAAA,gBAEX,eAAa,4BAA4B;AAAA,gBACzC;AAAA,gBACA;AAAA,gBAEA,8BAAC,gBAAa,MAAK,KAAI,OAAO,CAAC,iBAAiB,KAAK,GAAG;AAAA;AAAA,YAC1D;AAAA,aACF;AAAA;AAAA,MAEJ;AAAA;AAAA,IA5EK;AAAA,EA6EP;AAEJ;AAEA,IAAO,4BAAQ;",
4
+ "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable react-hooks/rules-of-hooks */\n/* eslint-disable max-lines */\nimport { Grid } from '@elliemae/ds-grid';\nimport { MenuCollapse, MenuExpand } from '@elliemae/ds-icons';\nimport { DSSkeleton } from '@elliemae/ds-skeleton';\nimport React, { useCallback, useContext, useMemo } from 'react';\n\nimport { SimpleTruncatedTooltipText } from '@elliemae/ds-truncated-tooltip-text';\nimport LeftNavigationContext from '../../LeftNavigationContext.js';\nimport { LEFT_NAVIGATION_DATA_TESTID } from '../../constants/constants.js';\nimport { FOOTER_DS_ID, FOOTER_MENU_CLOSE_DS_ID } from '../../exported-related/constants.js';\nimport { useKeyboardNavigation } from '../../hooks/index.js';\nimport {\n StyledFooterItem,\n StyledFooterLabel,\n StyledFooterMenu,\n StyledFooterSeparator,\n StyledMenuCollapse,\n} from './styled.js';\n\ntype LeftNavFooterItemProps = {\n footerLabel: string;\n FooterLabelComponent?: React.ComponentType<unknown>;\n onFooterExpand: React.MouseEventHandler & React.KeyboardEventHandler;\n onFooterClose: React.MouseEventHandler & React.KeyboardEventHandler;\n};\n\n// eslint-disable-next-line complexity\nexport const LeftNavFooterItem: React.ComponentType<LeftNavFooterItemProps> = (props) => {\n const { footerLabel, FooterLabelComponent, onFooterExpand = () => null, onFooterClose = () => null } = props;\n const {\n leftNavProps: { labelOverflow, isSkeleton, hideFooterPipe, expanded },\n expandedForAnimation,\n setFocusedItem,\n focusedItem,\n visibleItemsRefs,\n leftNavProps,\n } = useContext(LeftNavigationContext);\n const id = FOOTER_DS_ID;\n\n const handleOnClick = expandedForAnimation ? onFooterClose : onFooterExpand;\n\n const onKeyDown = useKeyboardNavigation({\n item: {\n dsId: id,\n itemOpts: {\n selectable: !expandedForAnimation,\n openable: false,\n closable: false,\n },\n },\n onClick: handleOnClick,\n });\n\n const handleMenuCollapseClick = useCallback(\n (e: React.MouseEvent<HTMLButtonElement, MouseEvent> | React.KeyboardEvent<HTMLButtonElement>) => {\n e.stopPropagation();\n handleOnClick(e as React.MouseEvent<HTMLButtonElement, MouseEvent>);\n setFocusedItem(id);\n },\n [handleOnClick, id, setFocusedItem],\n );\n\n const label = useMemo(() => {\n if (FooterLabelComponent) {\n return <FooterLabelComponent />;\n }\n if (labelOverflow === 'truncate') {\n return <SimpleTruncatedTooltipText value={footerLabel} placement=\"bottom-start\" />;\n }\n return footerLabel;\n }, [footerLabel, FooterLabelComponent, labelOverflow]);\n\n const postAnimationButtonFocusHandler = useCallback(\n (newHTMLNode: HTMLButtonElement | null) => {\n if (newHTMLNode === null || !expanded) {\n return;\n }\n if (focusedItem === id) {\n newHTMLNode.focus();\n }\n },\n [focusedItem, id, expanded],\n );\n\n if (isSkeleton) {\n return (\n <StyledFooterMenu\n key={id}\n data-testid={LEFT_NAVIGATION_DATA_TESTID.FOOTER_MENU} // https://jira.elliemae.io/browse/PUI-15589\n >\n <Grid height=\"48px\" justifyContent=\"center\" alignItems=\"center\" cols={['1fr']} p=\"xxs\">\n <DSSkeleton variant=\"rectangular\" height=\"24px\" />\n </Grid>\n </StyledFooterMenu>\n );\n }\n\n const getOwnerProps = React.useCallback(() => leftNavProps, [leftNavProps]);\n\n const getOwnerPropsArguments = React.useCallback(() => ({}), []);\n\n return (\n <StyledFooterMenu\n key={id}\n data-testid={LEFT_NAVIGATION_DATA_TESTID.FOOTER_MENU} // https://jira.elliemae.io/browse/PUI-15589\n getOwnerProps={getOwnerProps}\n getOwnerPropsArguments={getOwnerPropsArguments}\n >\n <StyledFooterItem\n innerRef={visibleItemsRefs.current[id]}\n tabIndex={expandedForAnimation ? -1 : 0}\n expanded={expandedForAnimation}\n pt=\"xxs2\"\n height={expandedForAnimation ? 'auto' : '48px'}\n alignItems=\"flex-start\"\n pl=\"xxs2\"\n cols={expandedForAnimation ? ['auto', '1fr', 'auto'] : ['38px']}\n onClick={expandedForAnimation ? () => null : handleOnClick}\n onKeyDown={onKeyDown}\n onFocus={() => setFocusedItem(id)}\n role=\"menuitem\"\n aria-label={\n expandedForAnimation\n ? `Footer, ${typeof footerLabel === 'string' ? footerLabel : ''}`\n : `Expand left navigation`\n }\n data-testid={LEFT_NAVIGATION_DATA_TESTID.FOOTER_ITEM} // https://jira.elliemae.io/browse/PUI-15589\n getOwnerProps={getOwnerProps}\n getOwnerPropsArguments={getOwnerPropsArguments}\n >\n {!expandedForAnimation ? (\n <MenuExpand\n size=\"m\"\n color={['brand-primary', '800']}\n // https://jira.elliemae.io/browse/PUI-15589\n // VERY SPECIAL CASE, THE SLOT FOOTER_BTN GOES TO THE ICON WHEN COLLAPSED, TO THE BTN WHEN EXPANDED\n data-testid={LEFT_NAVIGATION_DATA_TESTID.FOOTER_BTN}\n />\n ) : (\n <>\n <StyledFooterLabel\n mt=\"5px\"\n mr=\"12px\"\n mb=\"16px\"\n labelOverflow={labelOverflow}\n aria-live=\"polite\"\n data-testid={LEFT_NAVIGATION_DATA_TESTID.ITEM_LABEL} // https://jira.elliemae.io/browse/PUI-15589\n getOwnerProps={getOwnerProps}\n getOwnerPropsArguments={getOwnerPropsArguments}\n >\n {label}\n </StyledFooterLabel>\n {!hideFooterPipe ? (\n <StyledFooterSeparator\n mt=\"xxxs\"\n data-testid={LEFT_NAVIGATION_DATA_TESTID.FOOTER_SEPARATOR} // https://jira.elliemae.io/browse/PUI-15589\n />\n ) : (\n <div></div>\n )}\n <StyledMenuCollapse\n innerRef={postAnimationButtonFocusHandler}\n buttonType=\"raw\"\n onClick={handleMenuCollapseClick}\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 // VERY SPECIAL CASE, THE SLOT FOOTER_BTN GOES TO THE ICON WHEN COLLAPSED, TO THE BTN WHEN EXPANDED\n data-testid={LEFT_NAVIGATION_DATA_TESTID.FOOTER_BTN}\n getOwnerProps={getOwnerProps}\n getOwnerPropsArguments={getOwnerPropsArguments}\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": "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",
6
6
  "names": ["React"]
7
7
  }
package/dist/types/constants/constants.d.ts CHANGED
@@ -73,6 +73,7 @@ export declare const LEFT_NAVIGATION_DATA_TESTID: {
73
73
  NOTIFICATIONS_ICON: string;
74
74
  LEFT_COMPONENT_CHEVRON: string;
75
75
  FOOTER_BTN: string;
76
+ LIST_ITEM_LABEL_ID_EXCEPTION: string;
76
77
  };
77
78
  export declare const DSLeftNavigationSlots: {
78
79
  readonly ALERTS_ICON_WRAPPER: "alerts-icon";
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@elliemae/ds-left-navigation",
3
- "version": "3.51.0-rc.18",
3
+ "version": "3.51.0-rc.19",
4
4
  "license": "MIT",
5
5
  "description": "ICE MT - Dimsum - Left Navigation",
6
6
  "files": [
@@ -36,20 +36,20 @@
36
36
  "typeSafety": false
37
37
  },
38
38
  "dependencies": {
39
- "@elliemae/ds-button-v2": "3.51.0-rc.18",
40
- "@elliemae/ds-circular-progress-indicator": "3.51.0-rc.18",
41
- "@elliemae/ds-grid": "3.51.0-rc.18",
42
- "@elliemae/ds-props-helpers": "3.51.0-rc.18",
43
- "@elliemae/ds-icons": "3.51.0-rc.18",
44
- "@elliemae/ds-system": "3.51.0-rc.18",
45
- "@elliemae/ds-skeleton": "3.51.0-rc.18",
46
- "@elliemae/ds-truncated-tooltip-text": "3.51.0-rc.18"
39
+ "@elliemae/ds-button-v2": "3.51.0-rc.19",
40
+ "@elliemae/ds-grid": "3.51.0-rc.19",
41
+ "@elliemae/ds-circular-progress-indicator": "3.51.0-rc.19",
42
+ "@elliemae/ds-props-helpers": "3.51.0-rc.19",
43
+ "@elliemae/ds-icons": "3.51.0-rc.19",
44
+ "@elliemae/ds-system": "3.51.0-rc.19",
45
+ "@elliemae/ds-truncated-tooltip-text": "3.51.0-rc.19",
46
+ "@elliemae/ds-skeleton": "3.51.0-rc.19"
47
47
  },
48
48
  "devDependencies": {
49
49
  "@elliemae/pui-cli": "9.0.0-next.55",
50
50
  "jest": "~29.7.0",
51
51
  "styled-components": "~5.3.9",
52
- "@elliemae/ds-monorepo-devops": "3.51.0-rc.18"
52
+ "@elliemae/ds-monorepo-devops": "3.51.0-rc.19"
53
53
  },
54
54
  "peerDependencies": {
55
55
  "lodash": "^4.17.21",