@hitachivantara/uikit-react-core 5.0.2 → 5.1.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/components/Dropdown/dropdownClasses.cjs +1 -1
- package/dist/cjs/components/Dropdown/dropdownClasses.cjs.map +1 -1
- package/dist/cjs/components/Pagination/Pagination.cjs +1 -1
- package/dist/cjs/components/Pagination/Pagination.cjs.map +1 -1
- package/dist/cjs/components/Slider/Slider.cjs +301 -0
- package/dist/cjs/components/Slider/Slider.cjs.map +1 -0
- package/dist/cjs/components/Slider/Slider.styles.cjs +334 -0
- package/dist/cjs/components/Slider/Slider.styles.cjs.map +1 -0
- package/dist/cjs/components/Slider/SliderInput/SliderInput.cjs +66 -0
- package/dist/cjs/components/Slider/SliderInput/SliderInput.cjs.map +1 -0
- package/dist/cjs/components/Slider/SliderInput/SliderInput.styles.cjs +55 -0
- package/dist/cjs/components/Slider/SliderInput/SliderInput.styles.cjs.map +1 -0
- package/dist/cjs/components/Slider/SliderInput/sliderInputClasses.cjs +8 -0
- package/dist/cjs/components/Slider/SliderInput/sliderInputClasses.cjs.map +1 -0
- package/dist/cjs/components/Slider/base.cjs +251 -0
- package/dist/cjs/components/Slider/base.cjs.map +1 -0
- package/dist/cjs/components/Slider/sliderClasses.cjs +8 -0
- package/dist/cjs/components/Slider/sliderClasses.cjs.map +1 -0
- package/dist/cjs/components/Slider/utils.cjs +217 -0
- package/dist/cjs/components/Slider/utils.cjs.map +1 -0
- package/dist/cjs/components/Table/TableBody/tableBodyClasses.cjs.map +1 -1
- package/dist/cjs/components/Table/TableCell/tableCellClasses.cjs.map +1 -1
- package/dist/cjs/components/Table/TableContainer/tableContainerClasses.cjs.map +1 -1
- package/dist/cjs/components/Table/TableHead/tableHeadClasses.cjs.map +1 -1
- package/dist/cjs/components/Table/TableHeader/tableHeaderClasses.cjs.map +1 -1
- package/dist/cjs/components/Table/TableRow/tableRowClasses.cjs.map +1 -1
- package/dist/cjs/components/Table/tableClasses.cjs.map +1 -1
- package/dist/cjs/components/VerticalNavigation/Navigation/Navigation.cjs +76 -17
- package/dist/cjs/components/VerticalNavigation/Navigation/Navigation.cjs.map +1 -1
- package/dist/cjs/components/VerticalNavigation/Navigation/Navigation.styles.cjs +4 -1
- package/dist/cjs/components/VerticalNavigation/Navigation/Navigation.styles.cjs.map +1 -1
- package/dist/cjs/components/VerticalNavigation/Navigation/navigationClasses.cjs +1 -1
- package/dist/cjs/components/VerticalNavigation/Navigation/navigationClasses.cjs.map +1 -1
- package/dist/cjs/components/VerticalNavigation/NavigationPopup/NavigationPopup.cjs +58 -0
- package/dist/cjs/components/VerticalNavigation/NavigationPopup/NavigationPopup.cjs.map +1 -0
- package/dist/cjs/components/VerticalNavigation/NavigationPopup/NavigationPopup.styles.cjs +16 -0
- package/dist/cjs/components/VerticalNavigation/NavigationPopup/NavigationPopup.styles.cjs.map +1 -0
- package/dist/cjs/components/VerticalNavigation/TreeView/IconWrapper/IconWrapper.cjs +41 -0
- package/dist/cjs/components/VerticalNavigation/TreeView/IconWrapper/IconWrapper.cjs.map +1 -0
- package/dist/cjs/components/VerticalNavigation/TreeView/IconWrapper/IconWrapper.styles.cjs +42 -0
- package/dist/cjs/components/VerticalNavigation/TreeView/IconWrapper/IconWrapper.styles.cjs.map +1 -0
- package/dist/cjs/components/VerticalNavigation/TreeView/TooltipWrapper/TooltipWrapper.cjs +24 -0
- package/dist/cjs/components/VerticalNavigation/TreeView/TooltipWrapper/TooltipWrapper.cjs.map +1 -0
- package/dist/cjs/components/VerticalNavigation/TreeView/TreeViewItem.cjs +42 -44
- package/dist/cjs/components/VerticalNavigation/TreeView/TreeViewItem.cjs.map +1 -1
- package/dist/cjs/components/VerticalNavigation/VerticalNavigation.cjs +6 -2
- package/dist/cjs/components/VerticalNavigation/VerticalNavigation.cjs.map +1 -1
- package/dist/cjs/components/VerticalNavigation/VerticalNavigation.styles.cjs +6 -4
- package/dist/cjs/components/VerticalNavigation/VerticalNavigation.styles.cjs.map +1 -1
- package/dist/cjs/components/VerticalNavigation/VerticalNavigationContext.cjs.map +1 -1
- package/dist/cjs/components/VerticalNavigation/utils/VerticalNavigation.utils.cjs +7 -0
- package/dist/cjs/components/VerticalNavigation/utils/VerticalNavigation.utils.cjs.map +1 -0
- package/dist/cjs/index.cjs +4 -0
- package/dist/cjs/index.cjs.map +1 -1
- package/dist/esm/components/Dropdown/dropdownClasses.js +1 -1
- package/dist/esm/components/Dropdown/dropdownClasses.js.map +1 -1
- package/dist/esm/components/Pagination/Pagination.js +1 -1
- package/dist/esm/components/Pagination/Pagination.js.map +1 -1
- package/dist/esm/components/Slider/Slider.js +299 -0
- package/dist/esm/components/Slider/Slider.js.map +1 -0
- package/dist/esm/components/Slider/Slider.styles.js +330 -0
- package/dist/esm/components/Slider/Slider.styles.js.map +1 -0
- package/dist/esm/components/Slider/SliderInput/SliderInput.js +64 -0
- package/dist/esm/components/Slider/SliderInput/SliderInput.js.map +1 -0
- package/dist/esm/components/Slider/SliderInput/SliderInput.styles.js +53 -0
- package/dist/esm/components/Slider/SliderInput/SliderInput.styles.js.map +1 -0
- package/dist/esm/components/Slider/SliderInput/sliderInputClasses.js +8 -0
- package/dist/esm/components/Slider/SliderInput/sliderInputClasses.js.map +1 -0
- package/dist/esm/components/Slider/base.js +251 -0
- package/dist/esm/components/Slider/base.js.map +1 -0
- package/dist/esm/components/Slider/sliderClasses.js +8 -0
- package/dist/esm/components/Slider/sliderClasses.js.map +1 -0
- package/dist/esm/components/Slider/utils.js +217 -0
- package/dist/esm/components/Slider/utils.js.map +1 -0
- package/dist/esm/components/Table/TableBody/tableBodyClasses.js.map +1 -1
- package/dist/esm/components/Table/TableCell/tableCellClasses.js.map +1 -1
- package/dist/esm/components/Table/TableContainer/tableContainerClasses.js.map +1 -1
- package/dist/esm/components/Table/TableHead/tableHeadClasses.js.map +1 -1
- package/dist/esm/components/Table/TableHeader/tableHeaderClasses.js.map +1 -1
- package/dist/esm/components/Table/TableRow/tableRowClasses.js.map +1 -1
- package/dist/esm/components/Table/tableClasses.js.map +1 -1
- package/dist/esm/components/VerticalNavigation/Navigation/Navigation.js +77 -19
- package/dist/esm/components/VerticalNavigation/Navigation/Navigation.js.map +1 -1
- package/dist/esm/components/VerticalNavigation/Navigation/Navigation.styles.js +4 -1
- package/dist/esm/components/VerticalNavigation/Navigation/Navigation.styles.js.map +1 -1
- package/dist/esm/components/VerticalNavigation/Navigation/navigationClasses.js +1 -1
- package/dist/esm/components/VerticalNavigation/Navigation/navigationClasses.js.map +1 -1
- package/dist/esm/components/VerticalNavigation/NavigationPopup/NavigationPopup.js +56 -0
- package/dist/esm/components/VerticalNavigation/NavigationPopup/NavigationPopup.js.map +1 -0
- package/dist/esm/components/VerticalNavigation/NavigationPopup/NavigationPopup.styles.js +14 -0
- package/dist/esm/components/VerticalNavigation/NavigationPopup/NavigationPopup.styles.js.map +1 -0
- package/dist/esm/components/VerticalNavigation/TreeView/IconWrapper/IconWrapper.js +41 -0
- package/dist/esm/components/VerticalNavigation/TreeView/IconWrapper/IconWrapper.js.map +1 -0
- package/dist/esm/components/VerticalNavigation/TreeView/IconWrapper/IconWrapper.styles.js +40 -0
- package/dist/esm/components/VerticalNavigation/TreeView/IconWrapper/IconWrapper.styles.js.map +1 -0
- package/dist/esm/components/VerticalNavigation/TreeView/TooltipWrapper/TooltipWrapper.js +24 -0
- package/dist/esm/components/VerticalNavigation/TreeView/TooltipWrapper/TooltipWrapper.js.map +1 -0
- package/dist/esm/components/VerticalNavigation/TreeView/TreeViewItem.js +42 -44
- package/dist/esm/components/VerticalNavigation/TreeView/TreeViewItem.js.map +1 -1
- package/dist/esm/components/VerticalNavigation/VerticalNavigation.js +6 -2
- package/dist/esm/components/VerticalNavigation/VerticalNavigation.js.map +1 -1
- package/dist/esm/components/VerticalNavigation/VerticalNavigation.styles.js +6 -4
- package/dist/esm/components/VerticalNavigation/VerticalNavigation.styles.js.map +1 -1
- package/dist/esm/components/VerticalNavigation/VerticalNavigationContext.js.map +1 -1
- package/dist/esm/components/VerticalNavigation/utils/VerticalNavigation.utils.js +7 -0
- package/dist/esm/components/VerticalNavigation/utils/VerticalNavigation.utils.js.map +1 -0
- package/dist/esm/index.js +22 -18
- package/dist/esm/index.js.map +1 -1
- package/dist/types/index.d.ts +201 -14
- package/package.json +7 -5
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"tableCellClasses.js","sources":["../../../../../src/components/Table/TableCell/tableCellClasses.ts"],"sourcesContent":["import { getClasses } from \"~/utils\";\n\nexport
|
|
1
|
+
{"version":3,"file":"tableCellClasses.js","sources":["../../../../../src/components/Table/TableCell/tableCellClasses.ts"],"sourcesContent":["import { getClasses } from \"~/utils\";\n\nexport interface HvTableCellClasses {\n /** Styles applied to the component root class. */\n root?: string;\n /** Styles applied to the cell when it's in the table head. */\n head?: string;\n /** Styles applied to the cell when it's in the table body. */\n body?: string;\n /** Styles applied to the cell when it's in the table footer. */\n footer?: string;\n /** Styles applied to the cell when it's part of a sticky column. */\n stickyColumn?: string;\n /** Styles applied to the cell when it's part of the last sticky to the left column. */\n stickyColumnMostLeft?: string;\n /** Styles applied to the cell when it's part of the first right sticky column. */\n stickyColumnLeastRight?: string;\n /** Styles applied to the cell when it's part of the first column in the group. */\n groupColumnMostLeft?: string;\n /** Styles applied to the cell when it's part of the last column in the group. */\n groupColumnMostRight?: string;\n /** Styles applied to the cell when it's part of a sorted column. */\n sorted?: string;\n /** Styles applied to the sort icon. */\n sortIcon?: string;\n /** Styles applied to the component root when it is left aligned */\n alignLeft?: string;\n /** Styles applied to the component root when it is right aligned */\n alignRight?: string;\n /** Styles applied to the component root when it is center aligned */\n alignCenter?: string;\n /** Styles applied to the component root when it is justified */\n alignJustify?: string;\n /** Styles applied to the component root when its variant is checkbox */\n variantCheckbox?: string;\n /** Styles applied to the component root when its variant is expand */\n variantExpand?: string;\n /** Styles applied to the component root when its variant is actions */\n variantActions?: string;\n /** Styles applied to the component root when its variant is none */\n variantNone?: string;\n /** Styles applied to the component root when its variant is list */\n variantList?: string;\n /** Styles applied to the cell when its variant is list and actions. */\n variantListactions?: string;\n /** Styles applied to the cell when its variant is list and checkbox. */\n variantListcheckbox?: string;\n /** Styles applied to the cell when its variant is list and the type is head . */\n variantListHead?: string;\n /** Styles applied to the cell when it's part of a resizable column. */\n resizable?: string;\n /** Styles applied to the cell when it's part of a resizing column. */\n resizing?: string;\n}\n\nconst classKeys: string[] = [\n \"root\",\n \"head\",\n \"body\",\n \"footer\",\n \"stickyColumn\",\n \"stickyColumnMostLeft\",\n \"stickyColumnLeastRight\",\n \"groupColumnMostLeft\",\n \"groupColumnMostRight\",\n \"sorted\",\n \"sortIcon\",\n \"alignLeft\",\n \"alignRight\",\n \"alignCenter\",\n \"alignJustify\",\n \"variantCheckbox\",\n \"variantExpand\",\n \"variantActions\",\n \"variantNone\",\n \"variantList\",\n \"variantListactions\",\n \"variantListcheckbox\",\n \"variantListHead\",\n \"resizable\",\n \"resizing\",\n];\n\nconst tableCellClasses = getClasses<HvTableCellClasses>(\n classKeys,\n \"HvTableCell\"\n);\n\nexport default tableCellClasses;\n"],"names":["classKeys","tableCellClasses","getClasses"],"mappings":";AAuDA,MAAMA,YAAsB,CAC1B,QACA,QACA,QACA,UACA,gBACA,wBACA,0BACA,uBACA,wBACA,UACA,YACA,aACA,cACA,eACA,gBACA,mBACA,iBACA,kBACA,eACA,eACA,sBACA,uBACA,mBACA,aACA,UAAU;AAGZ,MAAMC,mBAAmBC,WACvBF,WACA,aAAa;AAGf,MAAA,qBAAeC;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"tableContainerClasses.js","sources":["../../../../../src/components/Table/TableContainer/tableContainerClasses.ts"],"sourcesContent":["import { getClasses } from \"~/utils\";\n\nexport
|
|
1
|
+
{"version":3,"file":"tableContainerClasses.js","sources":["../../../../../src/components/Table/TableContainer/tableContainerClasses.ts"],"sourcesContent":["import { getClasses } from \"~/utils\";\n\nexport interface HvTableContainerClasses {\n /** Styles applied to the component root class. */\n root?: string;\n}\n\nconst classKeys: string[] = [\"root\"];\n\nconst tableContainerClasses = getClasses<HvTableContainerClasses>(\n classKeys,\n \"HvTableContainer\"\n);\n\nexport default tableContainerClasses;\n"],"names":["classKeys","tableContainerClasses","getClasses"],"mappings":";AAOA,MAAMA,YAAsB,CAAC,MAAM;AAEnC,MAAMC,wBAAwBC,WAC5BF,WACA,kBAAkB;AAGpB,MAAA,0BAAeC;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"tableHeadClasses.js","sources":["../../../../../src/components/Table/TableHead/tableHeadClasses.ts"],"sourcesContent":["import { getClasses } from \"~/utils\";\n\nexport
|
|
1
|
+
{"version":3,"file":"tableHeadClasses.js","sources":["../../../../../src/components/Table/TableHead/tableHeadClasses.ts"],"sourcesContent":["import { getClasses } from \"~/utils\";\n\nexport interface HvTableHeadClasses {\n /** Styles applied to the component root class. */\n root?: string;\n /** Styles applied when the table has a sticky header. */\n stickyHeader?: string;\n}\n\nconst classKeys: string[] = [\"root\", \"stickyHeader\"];\n\nconst tableHeadClasses = getClasses<HvTableHeadClasses>(\n classKeys,\n \"HvTableHead\"\n);\n\nexport default tableHeadClasses;\n"],"names":["classKeys","tableHeadClasses","getClasses"],"mappings":";AASA,MAAMA,YAAsB,CAAC,QAAQ,cAAc;AAEnD,MAAMC,mBAAmBC,WACvBF,WACA,aAAa;AAGf,MAAA,qBAAeC;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"tableHeaderClasses.js","sources":["../../../../../src/components/Table/TableHeader/tableHeaderClasses.ts"],"sourcesContent":["import { getClasses } from \"~/utils\";\n\nexport
|
|
1
|
+
{"version":3,"file":"tableHeaderClasses.js","sources":["../../../../../src/components/Table/TableHeader/tableHeaderClasses.ts"],"sourcesContent":["import { getClasses } from \"~/utils\";\n\nexport interface HvTableHeaderClasses {\n /** Styles applied to the component root class. */\n root?: string;\n /** Styles applied to the cell when it's in the table head. */\n head?: string;\n /** Styles applied to the cell when it's in the table body. */\n body?: string;\n /** Styles applied to the cell when it's in the table footer. */\n footer?: string;\n /** Styles applied to the cell when it's part of a sticky column. */\n stickyColumn?: string;\n /** Styles applied to the cell when it's part of the last sticky to the left column. */\n stickyColumnMostLeft?: string;\n /** Styles applied to the cell when it's part of the first right sticky column. */\n stickyColumnLeastRight?: string;\n /** Styles applied to the cell when it's part of the first column in the group. */\n groupColumnMostLeft?: string;\n /** Styles applied to the cell when it's part of the last column in the group. */\n groupColumnMostRight?: string;\n /** Styles applied to the container of the header cell content. */\n headerContent?: string;\n /** Styles applied to the text of the header cell. */\n headerText?: string;\n /** Styles applied to the text of the header cell when it is a paragraph. */\n headerParagraph?: string;\n /** Styles applied to the text of the header cell when it is sorted. */\n sortableHeaderText?: string;\n /** Styles applied to the component root when it is sorted. */\n sorted?: string;\n /** Styles applied to the component root when it is sortable. */\n sortable?: string;\n /** Styles applied to the sort button component. */\n sortButton?: string;\n /** Styles applied to the sort icon component. */\n sortIcon?: string;\n /** Styles applied to the component root when it is left aligned */\n alignLeft?: string;\n /** Styles applied to the component root when it is right aligned */\n alignRight?: string;\n /** Styles applied to the component root when it is center aligned */\n alignCenter?: string;\n /** Styles applied to the component root when it is justified */\n alignJustify?: string;\n /** Styles applied to the header content when it is left aligned */\n alignFlexLeft?: string;\n /** Styles applied to the header content when it is right aligned */\n alignFlexRight?: string;\n /** Styles applied to the header content when it is center aligned */\n alignFlexCenter?: string;\n /** Styles applied to the header content when it is justified */\n alignFlexJustify?: string;\n /** Styles applied to the component root when its variant is checkbox */\n variantCheckbox?: string;\n /** Styles applied to the component root when its variant is expand */\n variantExpand?: string;\n /** Styles applied to the component root when its variant is actions */\n variantActions?: string;\n /** Styles applied to the component root when its variant is none */\n variantNone?: string;\n /** Styles applied to the component root when its variant is list row */\n variantList?: string;\n /** Styles applied to the cell when it's part of a resizable column. */\n resizable?: string;\n /** Styles applied to the cell when it's part of a resizing column. */\n resizing?: string;\n /** Styles applied to the resizer object when column is resizable. */\n resizer?: string;\n}\n\nconst classKeys: string[] = [\n \"root\",\n \"head\",\n \"body\",\n \"footer\",\n \"stickyColumn\",\n \"stickyColumnMostLeft\",\n \"stickyColumnLeastRight\",\n \"groupColumnMostLeft\",\n \"groupColumnMostRight\",\n \"headerContent\",\n \"headerText\",\n \"headerParagraph\",\n \"sortableHeaderText\",\n \"sorted\",\n \"sortable\",\n \"sortButton\",\n \"sortIcon\",\n \"alignLeft\",\n \"alignRight\",\n \"alignCenter\",\n \"alignJustify\",\n \"alignFlexLeft\",\n \"alignFlexRight\",\n \"alignFlexCenter\",\n \"alignFlexJustify\",\n \"variantCheckbox\",\n \"variantExpand\",\n \"variantActions\",\n \"variantNone\",\n \"variantList\",\n \"resizable\",\n \"resizing\",\n \"resizer\",\n];\n\nconst tableHeaderClasses = getClasses<HvTableHeaderClasses>(\n classKeys,\n \"HvTableHeader\"\n);\n\nexport default tableHeaderClasses;\n"],"names":["classKeys","tableHeaderClasses","getClasses"],"mappings":";AAuEA,MAAMA,YAAsB,CAC1B,QACA,QACA,QACA,UACA,gBACA,wBACA,0BACA,uBACA,wBACA,iBACA,cACA,mBACA,sBACA,UACA,YACA,cACA,YACA,aACA,cACA,eACA,gBACA,iBACA,kBACA,mBACA,oBACA,mBACA,iBACA,kBACA,eACA,eACA,aACA,YACA,SAAS;AAGX,MAAMC,qBAAqBC,WACzBF,WACA,eAAe;AAGjB,MAAA,uBAAeC;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"tableRowClasses.js","sources":["../../../../../src/components/Table/TableRow/tableRowClasses.ts"],"sourcesContent":["import { getClasses } from \"~/utils\";\n\nexport
|
|
1
|
+
{"version":3,"file":"tableRowClasses.js","sources":["../../../../../src/components/Table/TableRow/tableRowClasses.ts"],"sourcesContent":["import { getClasses } from \"~/utils\";\n\nexport interface HvTableRowClasses {\n /** Styles applied to the component root class. */\n root?: string;\n /** Styles applied to the component root when selected. */\n selected?: string;\n /** Styles applied to the component root when expanded. */\n expanded?: string;\n /** Styles applied to the component root when striped. */\n striped?: string;\n /** Styles applied to the component root on hover. */\n hover?: string;\n /** Styles applied to the component root when inside a `HvTableHead`. */\n head?: string;\n /** Styles applied to the component root when inside a `HvTableBody`. */\n body?: string;\n /** Styles applied to the component root when inside a `HvTableFooter`. */\n footer?: string;\n /** Styles applied to the component root when its table variant is list. */\n variantList?: string;\n /** Styles applied to the component root when its table variant is list. */\n variantListHead?: string;\n}\n\nconst classKeys: string[] = [\n \"root\",\n \"selected\",\n \"expanded\",\n \"striped\",\n \"hover\",\n \"head\",\n \"body\",\n \"footer\",\n \"variantList\",\n \"variantListHead\",\n];\n\nconst tableRowClasses = getClasses<HvTableRowClasses>(classKeys, \"HvTableRow\");\n\nexport default tableRowClasses;\n"],"names":["classKeys","tableRowClasses","getClasses"],"mappings":";AAyBA,MAAMA,YAAsB,CAC1B,QACA,YACA,YACA,WACA,SACA,QACA,QACA,UACA,eACA,iBAAiB;AAGnB,MAAMC,kBAAkBC,WAA8BF,WAAW,YAAY;AAE7E,MAAA,oBAAeC;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"tableClasses.js","sources":["../../../../src/components/Table/tableClasses.ts"],"sourcesContent":["import { getClasses } from \"~/utils\";\n\nexport
|
|
1
|
+
{"version":3,"file":"tableClasses.js","sources":["../../../../src/components/Table/tableClasses.ts"],"sourcesContent":["import { getClasses } from \"~/utils\";\n\nexport interface HvTableClasses {\n /** Styles applied to the component root class. */\n root?: string;\n /** Styles applied to the component root class when it has a sticky header. */\n stickyHeader?: string;\n /** Styles applied to the component root class when it has sticky columns. */\n stickyColumns?: string;\n /** Styles applied to the component root class when it has sticky columns. */\n listRow?: string;\n}\n\nconst classKeys: string[] = [\n \"root\",\n \"stickyHeader\",\n \"stickyColumns\",\n \"listRow\",\n];\n\nconst tableClasses = getClasses<HvTableClasses>(classKeys, \"HvTable\");\n\nexport default tableClasses;\n"],"names":["classKeys","tableClasses","getClasses"],"mappings":";AAaA,MAAMA,YAAsB,CAC1B,QACA,gBACA,iBACA,SAAS;AAGX,MAAMC,eAAeC,WAA2BF,WAAW,SAAS;AAEpE,MAAA,iBAAeC;"}
|
|
@@ -1,16 +1,18 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { useContext, useState, useCallback, useMemo, useEffect } from "react";
|
|
2
2
|
import clsx from "clsx";
|
|
3
|
+
import uniqueId from "lodash/uniqueId";
|
|
3
4
|
import verticalNavigationTreeClasses from "./navigationClasses.js";
|
|
4
5
|
import { StyledNav } from "./Navigation.styles.js";
|
|
5
6
|
import { VerticalNavigationContext } from "../VerticalNavigationContext.js";
|
|
6
|
-
import {
|
|
7
|
+
import { HvVerticalNavigationPopup } from "../NavigationPopup/NavigationPopup.js";
|
|
8
|
+
import { jsx, jsxs } from "@emotion/react/jsx-runtime";
|
|
7
9
|
import { HvVerticalNavigationSlider } from "../NavigationSlider/NavigationSlider.js";
|
|
8
10
|
import { HvVerticalNavigationTreeView } from "../TreeView/TreeView.js";
|
|
9
11
|
import { HvVerticalNavigationTreeViewItem } from "../TreeView/TreeViewItem.js";
|
|
10
12
|
import { useControlled } from "../../../hooks/useControlled.js";
|
|
11
13
|
import { setId } from "../../../utils/setId.js";
|
|
12
14
|
import { wrapperTooltip } from "../../../utils/wrapperTooltip.js";
|
|
13
|
-
const createListHierarchy = (items, id, classes) => items.map((item) => {
|
|
15
|
+
const createListHierarchy = (items, id, classes, mouseEnterHandler, disableTooltip = false) => items.map((item) => {
|
|
14
16
|
const {
|
|
15
17
|
id: itemId,
|
|
16
18
|
label: itemLabel,
|
|
@@ -22,6 +24,9 @@ const createListHierarchy = (items, id, classes) => items.map((item) => {
|
|
|
22
24
|
target
|
|
23
25
|
} = item;
|
|
24
26
|
const ItemText = wrapperTooltip(true, itemLabel, itemLabel);
|
|
27
|
+
const itemMouseEnterHandler = (event) => {
|
|
28
|
+
mouseEnterHandler == null ? void 0 : mouseEnterHandler(event, item);
|
|
29
|
+
};
|
|
25
30
|
return /* @__PURE__ */ jsx(HvVerticalNavigationTreeViewItem, {
|
|
26
31
|
id: setId(id, itemId),
|
|
27
32
|
className: classes == null ? void 0 : classes.listItem,
|
|
@@ -33,7 +38,9 @@ const createListHierarchy = (items, id, classes) => items.map((item) => {
|
|
|
33
38
|
payload: item,
|
|
34
39
|
selectable,
|
|
35
40
|
disabled,
|
|
36
|
-
|
|
41
|
+
onMouseEnter: itemMouseEnterHandler,
|
|
42
|
+
disableTooltip,
|
|
43
|
+
children: children ? createListHierarchy(children, id, classes, mouseEnterHandler, disableTooltip) : void 0
|
|
37
44
|
}, itemId);
|
|
38
45
|
});
|
|
39
46
|
const getAllParents = (items) => {
|
|
@@ -92,18 +99,6 @@ const HvVerticalNavigationTree = ({
|
|
|
92
99
|
}
|
|
93
100
|
return defaultExpanded;
|
|
94
101
|
});
|
|
95
|
-
const handleChange = useCallback((event, selectedId, selectedItem) => {
|
|
96
|
-
setSelected(selectedId);
|
|
97
|
-
if (onChange) {
|
|
98
|
-
onChange(event, selectedItem);
|
|
99
|
-
}
|
|
100
|
-
}, [onChange, setSelected]);
|
|
101
|
-
const handleToggle = useCallback((event, newExpanded) => {
|
|
102
|
-
setExpanded(newExpanded);
|
|
103
|
-
if (onToggle) {
|
|
104
|
-
onToggle(event, newExpanded);
|
|
105
|
-
}
|
|
106
|
-
}, [onToggle, setExpanded]);
|
|
107
102
|
const {
|
|
108
103
|
isOpen,
|
|
109
104
|
collapsedMode,
|
|
@@ -114,7 +109,53 @@ const HvVerticalNavigationTree = ({
|
|
|
114
109
|
setParentData,
|
|
115
110
|
setParentSelected
|
|
116
111
|
} = useContext(VerticalNavigationContext);
|
|
117
|
-
const
|
|
112
|
+
const [navigationPopup, setNavigationPopup] = useState(null);
|
|
113
|
+
const handleChange = useCallback((event, selectedId, selectedItem) => {
|
|
114
|
+
if (collapsedMode === "icon" && !isOpen && selectedItem.data) {
|
|
115
|
+
const currentEventTarget = event.currentTarget;
|
|
116
|
+
setNavigationPopup((prevState) => {
|
|
117
|
+
return (prevState == null ? void 0 : prevState.anchorEl) === currentEventTarget ? null : {
|
|
118
|
+
uniqueKey: uniqueId(),
|
|
119
|
+
anchorEl: currentEventTarget,
|
|
120
|
+
fixedMode: true,
|
|
121
|
+
data: selectedItem.data
|
|
122
|
+
};
|
|
123
|
+
});
|
|
124
|
+
event.stopPropagation();
|
|
125
|
+
} else {
|
|
126
|
+
setSelected(selectedId);
|
|
127
|
+
setNavigationPopup(null);
|
|
128
|
+
if (onChange) {
|
|
129
|
+
onChange(event, selectedItem);
|
|
130
|
+
}
|
|
131
|
+
}
|
|
132
|
+
}, [onChange, setSelected]);
|
|
133
|
+
const treeViewItemMouseEnterHandler = (event, item) => {
|
|
134
|
+
const isCollapsedMode = collapsedMode === "icon" && !isOpen;
|
|
135
|
+
if (isCollapsedMode && item.data && !(navigationPopup == null ? void 0 : navigationPopup.fixedMode)) {
|
|
136
|
+
const currentEventTarget = event.currentTarget;
|
|
137
|
+
setNavigationPopup == null ? void 0 : setNavigationPopup({
|
|
138
|
+
uniqueKey: uniqueId(),
|
|
139
|
+
anchorEl: currentEventTarget,
|
|
140
|
+
fixedMode: false,
|
|
141
|
+
data: item.data
|
|
142
|
+
});
|
|
143
|
+
} else if (isCollapsedMode && !item.data && !(navigationPopup == null ? void 0 : navigationPopup.fixedMode)) {
|
|
144
|
+
setNavigationPopup(null);
|
|
145
|
+
}
|
|
146
|
+
};
|
|
147
|
+
const handleToggle = useCallback((event, newExpanded) => {
|
|
148
|
+
setExpanded(newExpanded);
|
|
149
|
+
if (onToggle) {
|
|
150
|
+
onToggle(event, newExpanded);
|
|
151
|
+
}
|
|
152
|
+
}, [onToggle, setExpanded]);
|
|
153
|
+
const children = useMemo(() => data && createListHierarchy(data, id, classes, treeViewItemMouseEnterHandler, navigationPopup == null ? void 0 : navigationPopup.fixedMode), [classes, data, id, navigationPopup, isOpen]);
|
|
154
|
+
useEffect(() => {
|
|
155
|
+
if (!isOpen) {
|
|
156
|
+
setNavigationPopup == null ? void 0 : setNavigationPopup(null);
|
|
157
|
+
}
|
|
158
|
+
}, [isOpen]);
|
|
118
159
|
useEffect(() => {
|
|
119
160
|
if (setParentSelected)
|
|
120
161
|
setParentSelected(selected);
|
|
@@ -126,16 +167,25 @@ const HvVerticalNavigationTree = ({
|
|
|
126
167
|
const navigateToTargetHandler = (event, selectedItem) => {
|
|
127
168
|
handleChange(event, selectedItem.id, selectedItem);
|
|
128
169
|
};
|
|
170
|
+
const handleNavigationPopupClose = () => {
|
|
171
|
+
setNavigationPopup(null);
|
|
172
|
+
};
|
|
173
|
+
const handleStyledNavMouseLeave = () => {
|
|
174
|
+
if (collapsedMode === "icon" && !isOpen && !(navigationPopup == null ? void 0 : navigationPopup.fixedMode)) {
|
|
175
|
+
setNavigationPopup(null);
|
|
176
|
+
}
|
|
177
|
+
};
|
|
129
178
|
return /* @__PURE__ */ jsx(StyledNav, {
|
|
130
179
|
id,
|
|
131
180
|
className: clsx(className, verticalNavigationTreeClasses.root, classes == null ? void 0 : classes.root, !isOpen && collapsedMode == "simple" && clsx(verticalNavigationTreeClasses.collapsed, classes == null ? void 0 : classes.collapsed)),
|
|
181
|
+
onMouseLeave: handleStyledNavMouseLeave,
|
|
132
182
|
...others,
|
|
133
183
|
children: slider ? /* @__PURE__ */ jsx(HvVerticalNavigationSlider, {
|
|
134
184
|
data: parentItem.data || withParentData,
|
|
135
185
|
selected,
|
|
136
186
|
onNavigateToTarget: navigateToTargetHandler,
|
|
137
187
|
onNavigateToChild: navigateToChildHandler
|
|
138
|
-
}) : /* @__PURE__ */
|
|
188
|
+
}) : /* @__PURE__ */ jsxs(HvVerticalNavigationTreeView, {
|
|
139
189
|
id: setId(id, "tree"),
|
|
140
190
|
className: clsx(verticalNavigationTreeClasses.list, classes == null ? void 0 : classes.list),
|
|
141
191
|
selectable: true,
|
|
@@ -145,7 +195,15 @@ const HvVerticalNavigationTree = ({
|
|
|
145
195
|
onChange: handleChange,
|
|
146
196
|
expanded,
|
|
147
197
|
onToggle: handleToggle,
|
|
148
|
-
children
|
|
198
|
+
children: [collapsedMode === "icon" && !isOpen && navigationPopup && /* @__PURE__ */ jsx(HvVerticalNavigationPopup, {
|
|
199
|
+
id: setId(id, "navigation-popup"),
|
|
200
|
+
anchorEl: navigationPopup.anchorEl,
|
|
201
|
+
selected,
|
|
202
|
+
fixedMode: navigationPopup.fixedMode,
|
|
203
|
+
data: navigationPopup.data,
|
|
204
|
+
onClose: handleNavigationPopupClose,
|
|
205
|
+
onChange: handleChange
|
|
206
|
+
}, navigationPopup.uniqueKey), children]
|
|
149
207
|
})
|
|
150
208
|
});
|
|
151
209
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Navigation.js","sources":["../../../../../src/components/VerticalNavigation/Navigation/Navigation.tsx"],"sourcesContent":["import { useCallback, useMemo, useContext, useEffect } from \"react\";\nimport clsx from \"clsx\";\nimport { setId, wrapperTooltip } from \"~/utils\";\nimport { useControlled } from \"~/hooks\";\nimport {\n HvVerticalNavigationTreeView,\n HvVerticalNavigationTreeViewItem,\n} from \"../TreeView\";\nimport verticalNavigationTreeClasses, {\n HvVerticalNavigationTreeClasses,\n} from \"./navigationClasses\";\nimport { StyledNav } from \"./Navigation.styles\";\nimport { HvVerticalNavigationSlider } from \"../\";\nimport { HvBaseProps } from \"../../../types\";\nimport { VerticalNavigationContext } from \"../VerticalNavigationContext\";\n\nexport interface NavigationData {\n /**\n * the id to be applied to the root element.\n */\n id: string;\n /**\n * the label to be rendered on the menu item.\n */\n label: string;\n /**\n * The url for the link.\n */\n href?: string;\n /**\n * The behavior when opening a link.\n */\n target?: string;\n /**\n * Icon to be render.\n */\n icon?: React.ReactNode;\n /**\n * Data subset.\n */\n data?: NavigationData[];\n /**\n * if `true` the item is disabled and is not interactive.\n */\n disabled?: boolean;\n /**\n * if `true` the item doesn't have a selected state.\n */\n selectable?: boolean;\n /**\n * Any other properties.\n */\n [otherProperty: string]: any;\n}\n\nconst createListHierarchy = (\n items,\n id,\n classes?: HvVerticalNavigationTreeClasses\n) =>\n items.map((item) => {\n const {\n id: itemId,\n label: itemLabel,\n icon,\n data: children,\n selectable,\n disabled,\n href,\n target,\n } = item;\n\n const ItemText = wrapperTooltip(true, itemLabel, itemLabel);\n\n return (\n <HvVerticalNavigationTreeViewItem\n id={setId(id, itemId)}\n className={classes?.listItem}\n href={href}\n target={target}\n key={itemId}\n nodeId={itemId}\n label={<ItemText />}\n icon={icon}\n payload={item}\n selectable={selectable}\n disabled={disabled}\n >\n {children ? createListHierarchy(children, id, classes) : undefined}\n </HvVerticalNavigationTreeViewItem>\n );\n });\n\nconst getAllParents = (items) => {\n const parents = items.filter(\n (item) => item.data != null && item.data.length > 0\n );\n const childParents = parents.flatMap((item) => getAllParents(item.data));\n\n return [...parents, ...childParents];\n};\n\nfunction pathToElement(data, targetId) {\n const path: string[] = [];\n\n if (data != null && data.length > 0) {\n for (let i = 0; i !== data.length; ++i) {\n const item = data[i];\n if (item.id === targetId) {\n path.push(item.id);\n break;\n }\n\n const subPaths = pathToElement(item.data, targetId);\n if (subPaths.length > 0) {\n path.push(item.id);\n path.push(...subPaths);\n break;\n }\n }\n }\n\n return path;\n}\n\nexport const HvVerticalNavigationTree = ({\n id,\n\n className,\n classes,\n\n data,\n\n mode = \"navigation\",\n\n collapsible = false,\n expanded: expandedProp,\n defaultExpanded,\n onToggle,\n\n selected: selectedProp,\n defaultSelected,\n onChange,\n\n ...others\n}: HvVerticalNavigationTreeProps) => {\n const [selected, setSelected] = useControlled(selectedProp, defaultSelected);\n const [expanded, setExpanded] = useControlled(expandedProp, () => {\n if (defaultExpanded === true) {\n // all parent nodes will be expanded by default\n return getAllParents(data).map((item) => item.id);\n }\n\n if (defaultExpanded === false) {\n // all parent nodes will be collapsed by default\n return [];\n }\n\n if (defaultExpanded == null) {\n if (selected != null) {\n // the path to the selected node will be expanded (default behaviour)\n const path = pathToElement(data, selected);\n return path.slice(0, -1);\n }\n\n // nothing is expanded\n return [];\n }\n\n return defaultExpanded;\n });\n\n const handleChange = useCallback(\n (event, selectedId, selectedItem) => {\n setSelected(selectedId);\n\n if (onChange) {\n onChange(event, selectedItem);\n }\n },\n [onChange, setSelected]\n );\n\n const handleToggle = useCallback(\n (event, newExpanded) => {\n setExpanded(newExpanded);\n\n if (onToggle) {\n onToggle(event, newExpanded);\n }\n },\n [onToggle, setExpanded]\n );\n\n const {\n isOpen,\n collapsedMode,\n slider,\n\n parentItem,\n withParentData,\n navigateToChildHandler,\n\n setParentData,\n setParentSelected,\n } = useContext(VerticalNavigationContext);\n\n const children = useMemo(\n () => data && createListHierarchy(data, id, classes),\n [classes, data, id]\n );\n\n useEffect(() => {\n if (setParentSelected) setParentSelected(selected);\n }, [selected, setSelected]);\n\n useEffect(() => {\n if (setParentData) setParentData(data);\n }, [data]);\n\n //navigation slider\n const navigateToTargetHandler = (event, selectedItem) => {\n handleChange(event, selectedItem.id, selectedItem);\n };\n\n return (\n <StyledNav\n id={id}\n className={clsx(\n className,\n verticalNavigationTreeClasses.root,\n classes?.root,\n !isOpen &&\n collapsedMode == \"simple\" &&\n clsx(verticalNavigationTreeClasses.collapsed, classes?.collapsed)\n )}\n {...others}\n >\n {slider ? (\n <HvVerticalNavigationSlider\n data={parentItem.data || withParentData}\n selected={selected}\n onNavigateToTarget={navigateToTargetHandler}\n onNavigateToChild={navigateToChildHandler}\n />\n ) : (\n <HvVerticalNavigationTreeView\n id={setId(id, \"tree\")}\n className={clsx(verticalNavigationTreeClasses.list, classes?.list)}\n selectable\n mode={mode}\n collapsible={collapsible}\n selected={selected}\n onChange={handleChange}\n expanded={expanded}\n onToggle={handleToggle}\n >\n {children}\n </HvVerticalNavigationTreeView>\n )}\n </StyledNav>\n );\n};\n\nexport type HvVerticalNavigationTreeProps = HvBaseProps<\n HTMLDivElement,\n { onChange }\n> & {\n /**\n * Id to be applied to the root node.\n */\n id?: string;\n /**\n * Class names to be applied.\n */\n className?: string;\n /**\n * A Jss Object used to override or extend the styles applied.\n */\n classes?: HvVerticalNavigationTreeClasses;\n /**\n * Modus operandi (role) of the widget instance.\n */\n mode?: NavigationMode;\n /**\n * Can non-leaf nodes be collapsed / expanded.\n */\n collapsible?: boolean;\n /**\n * The ID of the selected page.\n */\n selected?: string;\n /**\n * When uncontrolled, defines the initial selected page ID.\n */\n defaultSelected?: string;\n /**\n * Callback fired when a navigation item is selected.\n *\n * @param {object} event The event source of the callback.\n * @param {object} page The data of the selected page.\n */\n onChange?: (event, page) => void;\n /**\n * Expanded nodes' ids.\n */\n expanded?: string[];\n /**\n * When uncontrolled, defines the initial expanded nodes' ids.\n *\n * It also supports `true` for starting with all nodes expanded.\n * With `false` all nodes will be collapsed.\n *\n * By default it expands the needed nodes to display the current selection, if any.\n */\n defaultExpanded?: string[] | boolean;\n /**\n * Callback fired when tree items are expanded/collapsed.\n *\n * @param {object} event The event source of the callback.\n * @param {array} nodeIds The ids of the expanded nodes (old and new).\n */\n onToggle?: (event, nodeIds) => void;\n /**\n * An array containing the data for each menu item.\n *\n * id - the id to be applied to the root element.\n * label - the label to be rendered on the menu item.\n * data - sub-menu items\n * href - the url used for navigation.\n * target - the behavior when opening an url.\n */\n data?: NavigationData[];\n};\n\nexport type NavigationMode = \"treeview\" | \"navigation\" | \"slider\";\n"],"names":["createListHierarchy","items","id","classes","map","item","itemId","label","itemLabel","icon","data","children","selectable","disabled","href","target","ItemText","wrapperTooltip","HvVerticalNavigationTreeViewItem","setId","className","listItem","nodeId","_jsx","payload","undefined","getAllParents","parents","filter","length","childParents","flatMap","pathToElement","targetId","path","i","push","subPaths","HvVerticalNavigationTree","mode","collapsible","expanded","expandedProp","defaultExpanded","onToggle","selected","selectedProp","defaultSelected","onChange","others","setSelected","useControlled","setExpanded","slice","handleChange","useCallback","event","selectedId","selectedItem","handleToggle","newExpanded","isOpen","collapsedMode","slider","parentItem","withParentData","navigateToChildHandler","setParentData","setParentSelected","useContext","VerticalNavigationContext","useMemo","useEffect","navigateToTargetHandler","StyledNav","clsx","verticalNavigationTreeClasses","root","collapsed","HvVerticalNavigationSlider","onNavigateToTarget","onNavigateToChild","HvVerticalNavigationTreeView","list"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"Navigation.js","sources":["../../../../../src/components/VerticalNavigation/Navigation/Navigation.tsx"],"sourcesContent":["import { useCallback, useMemo, useContext, useEffect, useState } from \"react\";\nimport clsx from \"clsx\";\nimport uniqueId from \"lodash/uniqueId\";\nimport { setId, wrapperTooltip } from \"~/utils\";\nimport { useControlled } from \"~/hooks\";\nimport {\n HvVerticalNavigationTreeView,\n HvVerticalNavigationTreeViewItem,\n} from \"../TreeView\";\nimport verticalNavigationTreeClasses, {\n HvVerticalNavigationTreeClasses,\n} from \"./navigationClasses\";\nimport { StyledNav } from \"./Navigation.styles\";\nimport { HvVerticalNavigationSlider } from \"../\";\nimport { HvBaseProps } from \"../../../types\";\nimport { VerticalNavigationContext } from \"../VerticalNavigationContext\";\nimport { HvVerticalNavigationPopup } from \"../NavigationPopup/NavigationPopup\";\n\nexport interface NavigationData {\n /**\n * the id to be applied to the root element.\n */\n id: string;\n /**\n * the label to be rendered on the menu item.\n */\n label: string;\n /**\n * The url for the link.\n */\n href?: string;\n /**\n * The behavior when opening a link.\n */\n target?: string;\n /**\n * Icon to be render.\n */\n icon?: React.ReactNode;\n /**\n * Data subset.\n */\n data?: NavigationData[];\n /**\n * if `true` the item is disabled and is not interactive.\n */\n disabled?: boolean;\n /**\n * if `true` the item doesn't have a selected state.\n */\n selectable?: boolean;\n /**\n * Any other properties.\n */\n [otherProperty: string]: any;\n}\n\nconst createListHierarchy = (\n items,\n id,\n classes?: HvVerticalNavigationTreeClasses,\n mouseEnterHandler?: (event, item) => void,\n disableTooltip = false\n) =>\n items.map((item) => {\n const {\n id: itemId,\n label: itemLabel,\n icon,\n data: children,\n selectable,\n disabled,\n href,\n target,\n } = item;\n\n const ItemText = wrapperTooltip(true, itemLabel, itemLabel);\n\n const itemMouseEnterHandler = (event) => {\n mouseEnterHandler?.(event, item);\n };\n\n return (\n <HvVerticalNavigationTreeViewItem\n id={setId(id, itemId)}\n className={classes?.listItem}\n href={href}\n target={target}\n key={itemId}\n nodeId={itemId}\n label={<ItemText />}\n icon={icon}\n payload={item}\n selectable={selectable}\n disabled={disabled}\n onMouseEnter={itemMouseEnterHandler}\n disableTooltip={disableTooltip}\n >\n {children\n ? createListHierarchy(\n children,\n id,\n classes,\n mouseEnterHandler,\n disableTooltip\n )\n : undefined}\n </HvVerticalNavigationTreeViewItem>\n );\n });\n\nconst getAllParents = (items) => {\n const parents = items.filter(\n (item) => item.data != null && item.data.length > 0\n );\n const childParents = parents.flatMap((item) => getAllParents(item.data));\n\n return [...parents, ...childParents];\n};\n\nfunction pathToElement(data, targetId) {\n const path: string[] = [];\n\n if (data != null && data.length > 0) {\n for (let i = 0; i !== data.length; ++i) {\n const item = data[i];\n if (item.id === targetId) {\n path.push(item.id);\n break;\n }\n\n const subPaths = pathToElement(item.data, targetId);\n if (subPaths.length > 0) {\n path.push(item.id);\n path.push(...subPaths);\n break;\n }\n }\n }\n\n return path;\n}\n\nexport const HvVerticalNavigationTree = ({\n id,\n\n className,\n classes,\n\n data,\n\n mode = \"navigation\",\n\n collapsible = false,\n expanded: expandedProp,\n defaultExpanded,\n onToggle,\n\n selected: selectedProp,\n defaultSelected,\n onChange,\n\n ...others\n}: HvVerticalNavigationTreeProps) => {\n const [selected, setSelected] = useControlled(selectedProp, defaultSelected);\n const [expanded, setExpanded] = useControlled(expandedProp, () => {\n if (defaultExpanded === true) {\n // all parent nodes will be expanded by default\n return getAllParents(data).map((item) => item.id);\n }\n\n if (defaultExpanded === false) {\n // all parent nodes will be collapsed by default\n return [];\n }\n\n if (defaultExpanded == null) {\n if (selected != null) {\n // the path to the selected node will be expanded (default behaviour)\n const path = pathToElement(data, selected);\n return path.slice(0, -1);\n }\n\n // nothing is expanded\n return [];\n }\n\n return defaultExpanded;\n });\n\n const {\n isOpen,\n collapsedMode,\n slider,\n\n parentItem,\n withParentData,\n navigateToChildHandler,\n\n setParentData,\n setParentSelected,\n } = useContext(VerticalNavigationContext);\n\n const [navigationPopup, setNavigationPopup] = useState<{\n // This value is needed to guarantee that the NavigationPopup is fully re-rendered with keeping any previous values\n uniqueKey: string;\n anchorEl: HTMLButtonElement | null;\n fixedMode: boolean;\n data: NavigationData[];\n } | null>(null);\n\n const handleChange = useCallback(\n (event, selectedId, selectedItem) => {\n if (collapsedMode === \"icon\" && !isOpen && selectedItem.data) {\n const currentEventTarget = event.currentTarget;\n setNavigationPopup((prevState) => {\n // We want to close the popup in case the clicked element is the same as the previous one\n return prevState?.anchorEl === currentEventTarget\n ? null\n : {\n uniqueKey: uniqueId(),\n anchorEl: currentEventTarget,\n fixedMode: true,\n data: selectedItem.data,\n };\n });\n\n // We need this stopPropagation or else the Popup will close due to the clickaway being triggered\n event.stopPropagation();\n } else {\n setSelected(selectedId);\n setNavigationPopup(null);\n if (onChange) {\n onChange(event, selectedItem);\n }\n }\n },\n [onChange, setSelected]\n );\n\n const treeViewItemMouseEnterHandler = (event, item) => {\n const isCollapsedMode = collapsedMode === \"icon\" && !isOpen;\n\n if (isCollapsedMode && item.data && !navigationPopup?.fixedMode) {\n const currentEventTarget = event.currentTarget;\n\n setNavigationPopup?.({\n uniqueKey: uniqueId(),\n anchorEl: currentEventTarget,\n fixedMode: false,\n data: item.data,\n });\n } else if (isCollapsedMode && !item.data && !navigationPopup?.fixedMode) {\n setNavigationPopup(null);\n }\n };\n\n const handleToggle = useCallback(\n (event, newExpanded) => {\n setExpanded(newExpanded);\n\n if (onToggle) {\n onToggle(event, newExpanded);\n }\n },\n [onToggle, setExpanded]\n );\n\n const children = useMemo(\n () =>\n data &&\n createListHierarchy(\n data,\n id,\n classes,\n treeViewItemMouseEnterHandler,\n navigationPopup?.fixedMode\n ),\n [classes, data, id, navigationPopup, isOpen]\n );\n\n useEffect(() => {\n if (!isOpen) {\n setNavigationPopup?.(null);\n }\n }, [isOpen]);\n\n useEffect(() => {\n if (setParentSelected) setParentSelected(selected);\n }, [selected, setSelected]);\n\n useEffect(() => {\n if (setParentData) setParentData(data);\n }, [data]);\n\n //navigation slider\n const navigateToTargetHandler = (event, selectedItem) => {\n handleChange(event, selectedItem.id, selectedItem);\n };\n\n const handleNavigationPopupClose = () => {\n setNavigationPopup(null);\n };\n\n const handleStyledNavMouseLeave = () => {\n if (collapsedMode === \"icon\" && !isOpen && !navigationPopup?.fixedMode) {\n setNavigationPopup(null);\n }\n };\n\n return (\n <StyledNav\n id={id}\n className={clsx(\n className,\n verticalNavigationTreeClasses.root,\n classes?.root,\n !isOpen &&\n collapsedMode == \"simple\" &&\n clsx(verticalNavigationTreeClasses.collapsed, classes?.collapsed)\n )}\n onMouseLeave={handleStyledNavMouseLeave}\n {...others}\n >\n {slider ? (\n <HvVerticalNavigationSlider\n data={parentItem.data || withParentData}\n selected={selected}\n onNavigateToTarget={navigateToTargetHandler}\n onNavigateToChild={navigateToChildHandler}\n />\n ) : (\n <HvVerticalNavigationTreeView\n id={setId(id, \"tree\")}\n className={clsx(verticalNavigationTreeClasses.list, classes?.list)}\n selectable\n mode={mode}\n collapsible={collapsible}\n selected={selected}\n onChange={handleChange}\n expanded={expanded}\n onToggle={handleToggle}\n >\n {collapsedMode === \"icon\" && !isOpen && navigationPopup && (\n <HvVerticalNavigationPopup\n id={setId(id, \"navigation-popup\")}\n key={navigationPopup.uniqueKey}\n anchorEl={navigationPopup.anchorEl}\n selected={selected}\n fixedMode={navigationPopup.fixedMode}\n data={navigationPopup.data}\n onClose={handleNavigationPopupClose}\n onChange={handleChange}\n />\n )}\n {children}\n </HvVerticalNavigationTreeView>\n )}\n </StyledNav>\n );\n};\n\nexport type HvVerticalNavigationTreeProps = HvBaseProps<\n HTMLDivElement,\n { onChange }\n> & {\n /**\n * Id to be applied to the root node.\n */\n id?: string;\n /**\n * Class names to be applied.\n */\n className?: string;\n /**\n * A Jss Object used to override or extend the styles applied.\n */\n classes?: HvVerticalNavigationTreeClasses;\n /**\n * Modus operandi (role) of the widget instance.\n */\n mode?: NavigationMode;\n /**\n * Can non-leaf nodes be collapsed / expanded.\n */\n collapsible?: boolean;\n /**\n * The ID of the selected page.\n */\n selected?: string;\n /**\n * When uncontrolled, defines the initial selected page ID.\n */\n defaultSelected?: string;\n /**\n * Callback fired when a navigation item is selected.\n *\n * @param {object} event The event source of the callback.\n * @param {object} page The data of the selected page.\n */\n onChange?: (event, page) => void;\n /**\n * Expanded nodes' ids.\n */\n expanded?: string[];\n /**\n * When uncontrolled, defines the initial expanded nodes' ids.\n *\n * It also supports `true` for starting with all nodes expanded.\n * With `false` all nodes will be collapsed.\n *\n * By default it expands the needed nodes to display the current selection, if any.\n */\n defaultExpanded?: string[] | boolean;\n /**\n * Callback fired when tree items are expanded/collapsed.\n *\n * @param {object} event The event source of the callback.\n * @param {array} nodeIds The ids of the expanded nodes (old and new).\n */\n onToggle?: (event, nodeIds) => void;\n /**\n * An array containing the data for each menu item.\n *\n * id - the id to be applied to the root element.\n * label - the label to be rendered on the menu item.\n * data - sub-menu items\n * href - the url used for navigation.\n * target - the behavior when opening an url.\n */\n data?: NavigationData[];\n};\n\nexport type NavigationMode = \"treeview\" | \"navigation\" | \"slider\";\n"],"names":["createListHierarchy","items","id","classes","mouseEnterHandler","disableTooltip","map","item","itemId","label","itemLabel","icon","data","children","selectable","disabled","href","target","ItemText","wrapperTooltip","itemMouseEnterHandler","event","HvVerticalNavigationTreeViewItem","setId","className","listItem","nodeId","_jsx","payload","onMouseEnter","undefined","getAllParents","parents","filter","length","childParents","flatMap","pathToElement","targetId","path","i","push","subPaths","HvVerticalNavigationTree","mode","collapsible","expanded","expandedProp","defaultExpanded","onToggle","selected","selectedProp","defaultSelected","onChange","others","setSelected","useControlled","setExpanded","slice","isOpen","collapsedMode","slider","parentItem","withParentData","navigateToChildHandler","setParentData","setParentSelected","useContext","VerticalNavigationContext","navigationPopup","setNavigationPopup","useState","handleChange","useCallback","selectedId","selectedItem","currentEventTarget","currentTarget","prevState","anchorEl","uniqueKey","uniqueId","fixedMode","stopPropagation","treeViewItemMouseEnterHandler","isCollapsedMode","handleToggle","newExpanded","useMemo","useEffect","navigateToTargetHandler","handleNavigationPopupClose","handleStyledNavMouseLeave","StyledNav","clsx","verticalNavigationTreeClasses","root","collapsed","onMouseLeave","HvVerticalNavigationSlider","onNavigateToTarget","onNavigateToChild","_jsxs","HvVerticalNavigationTreeView","list","HvVerticalNavigationPopup","onClose"],"mappings":"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"}
|
|
@@ -12,8 +12,11 @@ const StyledNav = /* @__PURE__ */ _styled("nav", process.env.NODE_ENV === "produ
|
|
|
12
12
|
overflowY: "auto",
|
|
13
13
|
[`&.${verticalNavigationTreeClasses.collapsed}`]: {
|
|
14
14
|
display: "none"
|
|
15
|
+
},
|
|
16
|
+
[`&.${verticalNavigationTreeClasses.popup}`]: {
|
|
17
|
+
boxShadow: "inset 5px 0 5px -3px rgb(65 65 65 / 12%)"
|
|
15
18
|
}
|
|
16
|
-
}, process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,
|
|
19
|
+
}, process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi9ob21lL3J1bm5lci93b3JrL2h2LXVpa2l0LXJlYWN0L2h2LXVpa2l0LXJlYWN0L3BhY2thZ2VzL2NvcmUvc3JjL2NvbXBvbmVudHMvVmVydGljYWxOYXZpZ2F0aW9uL05hdmlnYXRpb24vTmF2aWdhdGlvbi5zdHlsZXMudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUl5QiIsImZpbGUiOiIvaG9tZS9ydW5uZXIvd29yay9odi11aWtpdC1yZWFjdC9odi11aWtpdC1yZWFjdC9wYWNrYWdlcy9jb3JlL3NyYy9jb21wb25lbnRzL1ZlcnRpY2FsTmF2aWdhdGlvbi9OYXZpZ2F0aW9uL05hdmlnYXRpb24uc3R5bGVzLnRzeCIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCBzdHlsZWQgZnJvbSBcIkBlbW90aW9uL3N0eWxlZFwiO1xuaW1wb3J0IHsgdGhlbWUgfSBmcm9tIFwiQGhpdGFjaGl2YW50YXJhL3Vpa2l0LXN0eWxlc1wiO1xuaW1wb3J0IG5hdmlnYXRpb25DbGFzc2VzIGZyb20gXCIuL25hdmlnYXRpb25DbGFzc2VzXCI7XG5cbmV4cG9ydCBjb25zdCBTdHlsZWROYXYgPSBzdHlsZWQoXCJuYXZcIikoe1xuICBkaXNwbGF5OiBcImJsb2NrXCIsXG4gIGJhY2tncm91bmQ6IHRoZW1lLmNvbG9ycy5hdG1vMSxcblxuICBvdmVyZmxvd1k6IFwiYXV0b1wiLFxuXG4gIFtgJi4ke25hdmlnYXRpb25DbGFzc2VzLmNvbGxhcHNlZH1gXToge1xuICAgIGRpc3BsYXk6IFwibm9uZVwiLFxuICB9LFxuXG4gIFtgJi4ke25hdmlnYXRpb25DbGFzc2VzLnBvcHVwfWBdOiB7XG4gICAgYm94U2hhZG93OiBcImluc2V0IDVweCAwIDVweCAtM3B4IHJnYig2NSA2NSA2NSAvIDEyJSlcIixcbiAgfSxcbn0pO1xuIl19 */");
|
|
17
20
|
export {
|
|
18
21
|
StyledNav
|
|
19
22
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Navigation.styles.js","sources":["../../../../../src/components/VerticalNavigation/Navigation/Navigation.styles.tsx"],"sourcesContent":["import styled from \"@emotion/styled\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\nimport navigationClasses from \"./navigationClasses\";\n\nexport const StyledNav = styled(\"nav\")({\n display: \"block\",\n background: theme.colors.atmo1,\n\n overflowY: \"auto\",\n\n [`&.${navigationClasses.collapsed}`]: {\n display: \"none\",\n },\n});\n"],"names":["StyledNav","process","env","NODE_ENV","target","label","display","background","theme","colors","atmo1","overflowY","navigationClasses","collapsed"],"mappings":";;;AAIO,MAAMA,YAAmB,wBAAA,OAAKC,QAAAC,IAAAC,aAAA,eAAA;AAAA,EAAAC,QAAA;AAAA,IAAA;AAAA,EAAAA,QAAA;AAAA,EAAAC,OAAA;AAAA,CAAA,EAAE;AAAA,EACrCC,SAAS;AAAA,EACTC,YAAYC,MAAMC,OAAOC;AAAAA,EAEzBC,WAAW;AAAA,EAEX,CAAE,KAAIC,8BAAkBC,WAAW,GAAG;AAAA,IACpCP,SAAS;AAAA,EACX;AACF,
|
|
1
|
+
{"version":3,"file":"Navigation.styles.js","sources":["../../../../../src/components/VerticalNavigation/Navigation/Navigation.styles.tsx"],"sourcesContent":["import styled from \"@emotion/styled\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\nimport navigationClasses from \"./navigationClasses\";\n\nexport const StyledNav = styled(\"nav\")({\n display: \"block\",\n background: theme.colors.atmo1,\n\n overflowY: \"auto\",\n\n [`&.${navigationClasses.collapsed}`]: {\n display: \"none\",\n },\n\n [`&.${navigationClasses.popup}`]: {\n boxShadow: \"inset 5px 0 5px -3px rgb(65 65 65 / 12%)\",\n },\n});\n"],"names":["StyledNav","process","env","NODE_ENV","target","label","display","background","theme","colors","atmo1","overflowY","navigationClasses","collapsed","popup","boxShadow"],"mappings":";;;AAIO,MAAMA,YAAmB,wBAAA,OAAKC,QAAAC,IAAAC,aAAA,eAAA;AAAA,EAAAC,QAAA;AAAA,IAAA;AAAA,EAAAA,QAAA;AAAA,EAAAC,OAAA;AAAA,CAAA,EAAE;AAAA,EACrCC,SAAS;AAAA,EACTC,YAAYC,MAAMC,OAAOC;AAAAA,EAEzBC,WAAW;AAAA,EAEX,CAAE,KAAIC,8BAAkBC,WAAW,GAAG;AAAA,IACpCP,SAAS;AAAA,EACX;AAAA,EAEA,CAAE,KAAIM,8BAAkBE,OAAO,GAAG;AAAA,IAChCC,WAAW;AAAA,EACb;AACF,GAACd,QAAAC,IAAAC,aAAC,eAAA,KAAA,yoCAAA;"}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { getClasses } from "../../../utils/classes.js";
|
|
2
|
-
const classKeys = ["root", "list", "listItem", "collapsed"];
|
|
2
|
+
const classKeys = ["root", "list", "listItem", "collapsed", "popup"];
|
|
3
3
|
const verticalNavigationTreeClasses = getClasses(classKeys, "HvVerticalNavigationTree");
|
|
4
4
|
const verticalNavigationTreeClasses$1 = verticalNavigationTreeClasses;
|
|
5
5
|
export {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"navigationClasses.js","sources":["../../../../../src/components/VerticalNavigation/Navigation/navigationClasses.ts"],"sourcesContent":["import { getClasses } from \"~/utils\";\n\nexport type HvVerticalNavigationTreeClasses = {\n root?: string;\n list?: string;\n listItem?: string;\n collapsed?: string;\n};\n\nconst classKeys: string[] = [\"root\", \"list\", \"listItem\", \"collapsed\"];\n\nconst verticalNavigationTreeClasses =\n getClasses<HvVerticalNavigationTreeClasses>(\n classKeys,\n \"HvVerticalNavigationTree\"\n );\n\nexport default verticalNavigationTreeClasses;\n"],"names":["classKeys","verticalNavigationTreeClasses","getClasses"],"mappings":";
|
|
1
|
+
{"version":3,"file":"navigationClasses.js","sources":["../../../../../src/components/VerticalNavigation/Navigation/navigationClasses.ts"],"sourcesContent":["import { getClasses } from \"~/utils\";\n\nexport type HvVerticalNavigationTreeClasses = {\n root?: string;\n list?: string;\n listItem?: string;\n collapsed?: string;\n popup?: string;\n};\n\nconst classKeys: string[] = [\"root\", \"list\", \"listItem\", \"collapsed\", \"popup\"];\n\nconst verticalNavigationTreeClasses =\n getClasses<HvVerticalNavigationTreeClasses>(\n classKeys,\n \"HvVerticalNavigationTree\"\n );\n\nexport default verticalNavigationTreeClasses;\n"],"names":["classKeys","verticalNavigationTreeClasses","getClasses"],"mappings":";AAUA,MAAMA,YAAsB,CAAC,QAAQ,QAAQ,YAAY,aAAa,OAAO;AAE7E,MAAMC,gCACJC,WACEF,WACA,0BAA0B;AAG9B,MAAA,kCAAeC;"}
|
|
@@ -0,0 +1,56 @@
|
|
|
1
|
+
import { Popper, ClickAwayListener } from "@mui/material";
|
|
2
|
+
import clsx from "clsx";
|
|
3
|
+
import { StyledPopupContainer } from "./NavigationPopup.styles.js";
|
|
4
|
+
import { jsx } from "@emotion/react/jsx-runtime";
|
|
5
|
+
import { HvVerticalNavigation } from "../VerticalNavigation.js";
|
|
6
|
+
import { HvVerticalNavigationTree } from "../Navigation/Navigation.js";
|
|
7
|
+
import verticalNavigationTreeClasses from "../Navigation/navigationClasses.js";
|
|
8
|
+
import { setId } from "../../../utils/setId.js";
|
|
9
|
+
const HvVerticalNavigationPopup = ({
|
|
10
|
+
id,
|
|
11
|
+
anchorEl,
|
|
12
|
+
fixedMode,
|
|
13
|
+
onClose,
|
|
14
|
+
data,
|
|
15
|
+
selected,
|
|
16
|
+
onChange
|
|
17
|
+
}) => {
|
|
18
|
+
const handleClickAway = () => {
|
|
19
|
+
onClose == null ? void 0 : onClose();
|
|
20
|
+
};
|
|
21
|
+
const handleChange = (event, selectedItem) => {
|
|
22
|
+
onChange(event, selectedItem.id, selectedItem);
|
|
23
|
+
};
|
|
24
|
+
const handleMouseLeave = () => {
|
|
25
|
+
if (!fixedMode) {
|
|
26
|
+
onClose == null ? void 0 : onClose();
|
|
27
|
+
}
|
|
28
|
+
};
|
|
29
|
+
return /* @__PURE__ */ jsx(Popper, {
|
|
30
|
+
open: true,
|
|
31
|
+
anchorEl,
|
|
32
|
+
placement: "right-start",
|
|
33
|
+
children: /* @__PURE__ */ jsx(ClickAwayListener, {
|
|
34
|
+
onClickAway: handleClickAway,
|
|
35
|
+
children: /* @__PURE__ */ jsx(StyledPopupContainer, {
|
|
36
|
+
children: /* @__PURE__ */ jsx(HvVerticalNavigation, {
|
|
37
|
+
open: true,
|
|
38
|
+
children: /* @__PURE__ */ jsx(HvVerticalNavigationTree, {
|
|
39
|
+
className: clsx(verticalNavigationTreeClasses.popup),
|
|
40
|
+
id: setId(id, "tree"),
|
|
41
|
+
collapsible: true,
|
|
42
|
+
defaultExpanded: true,
|
|
43
|
+
selected,
|
|
44
|
+
onChange: handleChange,
|
|
45
|
+
data,
|
|
46
|
+
onMouseLeave: handleMouseLeave
|
|
47
|
+
})
|
|
48
|
+
})
|
|
49
|
+
})
|
|
50
|
+
})
|
|
51
|
+
});
|
|
52
|
+
};
|
|
53
|
+
export {
|
|
54
|
+
HvVerticalNavigationPopup
|
|
55
|
+
};
|
|
56
|
+
//# sourceMappingURL=NavigationPopup.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"NavigationPopup.js","sources":["../../../../../src/components/VerticalNavigation/NavigationPopup/NavigationPopup.tsx"],"sourcesContent":["import { Popper, ClickAwayListener } from \"@mui/material\";\nimport clsx from \"clsx\";\n\nimport {\n NavigationData,\n HvVerticalNavigationTree,\n HvVerticalNavigation,\n verticalNavigationTreeClasses,\n} from \"~/components\";\nimport { setId } from \"~/utils\";\n\nimport { StyledPopupContainer } from \"./NavigationPopup.styles\";\n\nexport type HvVerticalNavigationPopupProps = {\n id?: string;\n anchorEl?: HTMLElement | null;\n fixedMode?: boolean;\n data?: NavigationData[];\n selected?: string;\n onClose?: () => void;\n onChange?: any;\n};\n\nexport const HvVerticalNavigationPopup = ({\n id,\n anchorEl,\n fixedMode,\n onClose,\n data,\n selected,\n onChange,\n}: HvVerticalNavigationPopupProps) => {\n const handleClickAway = () => {\n onClose?.();\n };\n\n const handleChange = (event, selectedItem) => {\n onChange(event, selectedItem.id, selectedItem);\n };\n\n const handleMouseLeave = () => {\n if (!fixedMode) {\n onClose?.();\n }\n };\n\n return (\n <Popper open anchorEl={anchorEl} placement=\"right-start\">\n <ClickAwayListener onClickAway={handleClickAway}>\n <StyledPopupContainer>\n <HvVerticalNavigation open>\n <HvVerticalNavigationTree\n className={clsx(verticalNavigationTreeClasses.popup)}\n id={setId(id, \"tree\")}\n collapsible\n defaultExpanded\n selected={selected}\n onChange={handleChange}\n data={data}\n onMouseLeave={handleMouseLeave}\n />\n </HvVerticalNavigation>\n </StyledPopupContainer>\n </ClickAwayListener>\n </Popper>\n );\n};\n"],"names":["HvVerticalNavigationPopup","id","anchorEl","fixedMode","onClose","data","selected","onChange","handleClickAway","handleChange","event","selectedItem","handleMouseLeave","Popper","open","placement","children","ClickAwayListener","onClickAway","StyledPopupContainer","HvVerticalNavigation","HvVerticalNavigationTree","className","clsx","verticalNavigationTreeClasses","popup","setId","collapsible","defaultExpanded","onMouseLeave"],"mappings":";;;;;;;;AAuBO,MAAMA,4BAA4BA,CAAC;AAAA,EACxCC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAC8B,MAAM;AACpC,QAAMC,kBAAkBA,MAAM;AACjB;AAAA,EAAA;AAGPC,QAAAA,eAAeA,CAACC,OAAOC,iBAAiB;AACnCD,aAAAA,OAAOC,aAAaV,IAAIU,YAAY;AAAA,EAAA;AAG/C,QAAMC,mBAAmBA,MAAM;AAC7B,QAAI,CAACT,WAAW;AACH;AAAA,IACb;AAAA,EAAA;AAGF,6BACGU,QAAM;AAAA,IAACC,MAAI;AAAA,IAACZ;AAAAA,IAAoBa,WAAU;AAAA,IAAaC,8BACrDC,mBAAiB;AAAA,MAACC,aAAaV;AAAAA,MAAgBQ,8BAC7CG,sBAAoB;AAAA,QAAAH,8BAClBI,sBAAoB;AAAA,UAACN,MAAI;AAAA,UAAAE,8BACvBK,0BAAwB;AAAA,YACvBC,WAAWC,KAAKC,8BAA8BC,KAAK;AAAA,YACnDxB,IAAIyB,MAAMzB,IAAI,MAAM;AAAA,YACpB0B,aAAW;AAAA,YACXC,iBAAe;AAAA,YACftB;AAAAA,YACAC,UAAUE;AAAAA,YACVJ;AAAAA,YACAwB,cAAcjB;AAAAA,UAAAA,CAAiB;AAAA,QAAA,CAC/B;AAAA,MAAA,CACmB;AAAA,IAAA,CACF;AAAA,EAAA,CAElB;AAEb;"}
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
import _styled from "@emotion/styled/base";
|
|
2
|
+
import { theme } from "@hitachivantara/uikit-styles";
|
|
3
|
+
const StyledPopupContainer = /* @__PURE__ */ _styled("div", process.env.NODE_ENV === "production" ? {
|
|
4
|
+
target: "es2o9lp0"
|
|
5
|
+
} : {
|
|
6
|
+
target: "es2o9lp0",
|
|
7
|
+
label: "StyledPopupContainer"
|
|
8
|
+
})({
|
|
9
|
+
marginLeft: theme.spacing("xs")
|
|
10
|
+
}, process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi9ob21lL3J1bm5lci93b3JrL2h2LXVpa2l0LXJlYWN0L2h2LXVpa2l0LXJlYWN0L3BhY2thZ2VzL2NvcmUvc3JjL2NvbXBvbmVudHMvVmVydGljYWxOYXZpZ2F0aW9uL05hdmlnYXRpb25Qb3B1cC9OYXZpZ2F0aW9uUG9wdXAuc3R5bGVzLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFJb0MiLCJmaWxlIjoiL2hvbWUvcnVubmVyL3dvcmsvaHYtdWlraXQtcmVhY3QvaHYtdWlraXQtcmVhY3QvcGFja2FnZXMvY29yZS9zcmMvY29tcG9uZW50cy9WZXJ0aWNhbE5hdmlnYXRpb24vTmF2aWdhdGlvblBvcHVwL05hdmlnYXRpb25Qb3B1cC5zdHlsZXMudHN4Iiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHN0eWxlZCBmcm9tIFwiQGVtb3Rpb24vc3R5bGVkXCI7XG5cbmltcG9ydCB7IHRoZW1lIH0gZnJvbSBcIkBoaXRhY2hpdmFudGFyYS91aWtpdC1zdHlsZXNcIjtcblxuZXhwb3J0IGNvbnN0IFN0eWxlZFBvcHVwQ29udGFpbmVyID0gc3R5bGVkKFwiZGl2XCIpKHtcbiAgbWFyZ2luTGVmdDogdGhlbWUuc3BhY2luZyhcInhzXCIpLFxufSk7XG4iXX0= */");
|
|
11
|
+
export {
|
|
12
|
+
StyledPopupContainer
|
|
13
|
+
};
|
|
14
|
+
//# sourceMappingURL=NavigationPopup.styles.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"NavigationPopup.styles.js","sources":["../../../../../src/components/VerticalNavigation/NavigationPopup/NavigationPopup.styles.tsx"],"sourcesContent":["import styled from \"@emotion/styled\";\n\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nexport const StyledPopupContainer = styled(\"div\")({\n marginLeft: theme.spacing(\"xs\"),\n});\n"],"names":["StyledPopupContainer","process","env","NODE_ENV","target","label","marginLeft","theme","spacing"],"mappings":";;AAIO,MAAMA,uBAA8B,wBAAA,OAAKC,QAAAC,IAAAC,aAAA,eAAA;AAAA,EAAAC,QAAA;AAAA,IAAA;AAAA,EAAAA,QAAA;AAAA,EAAAC,OAAA;AAAA,CAAA,EAAE;AAAA,EAChDC,YAAYC,MAAMC,QAAQ,IAAI;AAChC,GAACP,QAAAC,IAAAC,aAAC,eAAA,KAAA,yzBAAA;"}
|
|
@@ -0,0 +1,41 @@
|
|
|
1
|
+
import { Forwards } from "@hitachivantara/uikit-react-icons";
|
|
2
|
+
import { useContext } from "react";
|
|
3
|
+
import { StyledIconsContainer, SpacerDiv } from "./IconWrapper.styles.js";
|
|
4
|
+
import { jsx, jsxs } from "@emotion/react/jsx-runtime";
|
|
5
|
+
import { TooltipWrapper } from "../TooltipWrapper/TooltipWrapper.js";
|
|
6
|
+
import { VerticalNavigationContext } from "../../VerticalNavigationContext.js";
|
|
7
|
+
import { HvAvatar } from "../../../Avatar/Avatar.js";
|
|
8
|
+
const IconWrapper = ({
|
|
9
|
+
icon,
|
|
10
|
+
label,
|
|
11
|
+
hasChildren,
|
|
12
|
+
showAvatar,
|
|
13
|
+
isOpen,
|
|
14
|
+
disableTooltip
|
|
15
|
+
}) => {
|
|
16
|
+
const {
|
|
17
|
+
hasAnyChildWithData
|
|
18
|
+
} = useContext(VerticalNavigationContext);
|
|
19
|
+
return /* @__PURE__ */ jsx(TooltipWrapper, {
|
|
20
|
+
showTooltip: !hasChildren && !isOpen && !disableTooltip,
|
|
21
|
+
label,
|
|
22
|
+
children: /* @__PURE__ */ jsxs(StyledIconsContainer, {
|
|
23
|
+
hasAnyChildWithData,
|
|
24
|
+
children: [showAvatar ? /* @__PURE__ */ jsx(HvAvatar, {
|
|
25
|
+
variant: "square",
|
|
26
|
+
size: "xs",
|
|
27
|
+
backgroundColor: "secondary_80",
|
|
28
|
+
style: {
|
|
29
|
+
fontSize: "15px"
|
|
30
|
+
},
|
|
31
|
+
children: label.substring(0, 1)
|
|
32
|
+
}) : icon, hasChildren && !isOpen ? /* @__PURE__ */ jsx(Forwards, {
|
|
33
|
+
iconSize: "XS"
|
|
34
|
+
}) : hasAnyChildWithData && !isOpen && /* @__PURE__ */ jsx(SpacerDiv, {})]
|
|
35
|
+
})
|
|
36
|
+
});
|
|
37
|
+
};
|
|
38
|
+
export {
|
|
39
|
+
IconWrapper
|
|
40
|
+
};
|
|
41
|
+
//# sourceMappingURL=IconWrapper.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"IconWrapper.js","sources":["../../../../../../src/components/VerticalNavigation/TreeView/IconWrapper/IconWrapper.tsx"],"sourcesContent":["import { Forwards } from \"@hitachivantara/uikit-react-icons\";\nimport { useContext } from \"react\";\n\nimport { HvAvatar, VerticalNavigationContext } from \"~/components\";\n\nimport { TooltipWrapper } from \"../TooltipWrapper\";\nimport { SpacerDiv, StyledIconsContainer } from \"./IconWrapper.styles\";\n\nexport const IconWrapper = ({\n icon,\n label,\n hasChildren,\n showAvatar,\n isOpen,\n disableTooltip,\n}) => {\n const { hasAnyChildWithData } = useContext(VerticalNavigationContext);\n return (\n <TooltipWrapper\n showTooltip={!hasChildren && !isOpen && !disableTooltip}\n label={label}\n >\n <StyledIconsContainer hasAnyChildWithData={hasAnyChildWithData}>\n {showAvatar ? (\n <HvAvatar\n variant=\"square\"\n size=\"xs\"\n backgroundColor=\"secondary_80\"\n style={{ fontSize: \"15px\" }}\n >\n {label.substring(0, 1)}\n </HvAvatar>\n ) : (\n icon\n )}\n\n {hasChildren && !isOpen ? (\n <Forwards iconSize=\"XS\" />\n ) : (\n hasAnyChildWithData && !isOpen && <SpacerDiv />\n )}\n </StyledIconsContainer>\n </TooltipWrapper>\n );\n};\n"],"names":["IconWrapper","icon","label","hasChildren","showAvatar","isOpen","disableTooltip","hasAnyChildWithData","useContext","VerticalNavigationContext","TooltipWrapper","showTooltip","children","StyledIconsContainer","_jsx","HvAvatar","variant","size","backgroundColor","style","fontSize","substring","Forwards","iconSize","SpacerDiv"],"mappings":";;;;;;;AAQO,MAAMA,cAAcA,CAAC;AAAA,EAC1BC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AACF,MAAM;AACE,QAAA;AAAA,IAAEC;AAAAA,EAAAA,IAAwBC,WAAWC,yBAAyB;AACpE,6BACGC,gBAAc;AAAA,IACbC,aAAa,CAACR,eAAe,CAACE,UAAU,CAACC;AAAAA,IACzCJ;AAAAA,IAAaU,+BAEZC,sBAAoB;AAAA,MAACN;AAAAA,MAAyCK,UAC5DR,CAAAA,aACCU,oBAACC,UAAQ;AAAA,QACPC,SAAQ;AAAA,QACRC,MAAK;AAAA,QACLC,iBAAgB;AAAA,QAChBC,OAAO;AAAA,UAAEC,UAAU;AAAA,QAAO;AAAA,QAAER,UAE3BV,MAAMmB,UAAU,GAAG,CAAC;AAAA,MAAA,CACZ,IAEXpB,MAGDE,eAAe,CAACE,6BACdiB,UAAQ;AAAA,QAACC,UAAS;AAAA,MAAA,CAAO,IAE1BhB,uBAAuB,CAACF,UAAWmB,oBAAAA,WACpC,CAAA,CAAA,CAAA;AAAA,IAAA,CAAA;AAAA,EAAA,CAEY;AAErB;"}
|
|
@@ -0,0 +1,40 @@
|
|
|
1
|
+
import _styled from "@emotion/styled/base";
|
|
2
|
+
function _EMOTION_STRINGIFIED_CSS_ERROR__() {
|
|
3
|
+
return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop).";
|
|
4
|
+
}
|
|
5
|
+
const StyledIconsContainer = /* @__PURE__ */ _styled("div", process.env.NODE_ENV === "production" ? {
|
|
6
|
+
target: "emephz1"
|
|
7
|
+
} : {
|
|
8
|
+
target: "emephz1",
|
|
9
|
+
label: "StyledIconsContainer"
|
|
10
|
+
})(({
|
|
11
|
+
hasAnyChildWithData
|
|
12
|
+
}) => ({
|
|
13
|
+
display: "flex",
|
|
14
|
+
[`> div:first-of-type`]: {
|
|
15
|
+
marginLeft: hasAnyChildWithData ? "auto" : "unset"
|
|
16
|
+
},
|
|
17
|
+
[`> div:nth-of-type(2)`]: {
|
|
18
|
+
width: "14px",
|
|
19
|
+
marginLeft: "auto"
|
|
20
|
+
}
|
|
21
|
+
}), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi9ob21lL3J1bm5lci93b3JrL2h2LXVpa2l0LXJlYWN0L2h2LXVpa2l0LXJlYWN0L3BhY2thZ2VzL2NvcmUvc3JjL2NvbXBvbmVudHMvVmVydGljYWxOYXZpZ2F0aW9uL1RyZWVWaWV3L0ljb25XcmFwcGVyL0ljb25XcmFwcGVyLnN0eWxlcy50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBTW9DIiwiZmlsZSI6Ii9ob21lL3J1bm5lci93b3JrL2h2LXVpa2l0LXJlYWN0L2h2LXVpa2l0LXJlYWN0L3BhY2thZ2VzL2NvcmUvc3JjL2NvbXBvbmVudHMvVmVydGljYWxOYXZpZ2F0aW9uL1RyZWVWaWV3L0ljb25XcmFwcGVyL0ljb25XcmFwcGVyLnN0eWxlcy50c3giLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgc3R5bGVkIGZyb20gXCJAZW1vdGlvbi9zdHlsZWRcIjtcblxuaW50ZXJmYWNlIFN0eWxlZEljb25zQ29udGFpbmVyUHJvcHMge1xuICBoYXNBbnlDaGlsZFdpdGhEYXRhPzogYm9vbGVhbjtcbn1cblxuZXhwb3J0IGNvbnN0IFN0eWxlZEljb25zQ29udGFpbmVyID0gc3R5bGVkKFwiZGl2XCIpKFxuICAoeyBoYXNBbnlDaGlsZFdpdGhEYXRhIH06IFN0eWxlZEljb25zQ29udGFpbmVyUHJvcHMpID0+ICh7XG4gICAgZGlzcGxheTogXCJmbGV4XCIsXG5cbiAgICBbYD4gZGl2OmZpcnN0LW9mLXR5cGVgXToge1xuICAgICAgbWFyZ2luTGVmdDogaGFzQW55Q2hpbGRXaXRoRGF0YSA/IFwiYXV0b1wiIDogXCJ1bnNldFwiLFxuICAgIH0sXG5cbiAgICBbYD4gZGl2Om50aC1vZi10eXBlKDIpYF06IHtcbiAgICAgIHdpZHRoOiBcIjE0cHhcIixcbiAgICAgIG1hcmdpbkxlZnQ6IFwiYXV0b1wiLFxuICAgIH0sXG4gIH0pXG4pO1xuXG5leHBvcnQgY29uc3QgU3BhY2VyRGl2ID0gc3R5bGVkKFwiZGl2XCIpKHt9KTtcbiJdfQ== */");
|
|
22
|
+
const SpacerDiv = /* @__PURE__ */ _styled("div", process.env.NODE_ENV === "production" ? {
|
|
23
|
+
target: "emephz0"
|
|
24
|
+
} : {
|
|
25
|
+
target: "emephz0",
|
|
26
|
+
label: "SpacerDiv"
|
|
27
|
+
})(process.env.NODE_ENV === "production" ? {
|
|
28
|
+
name: "0",
|
|
29
|
+
styles: ""
|
|
30
|
+
} : {
|
|
31
|
+
name: "0",
|
|
32
|
+
styles: "",
|
|
33
|
+
map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi9ob21lL3J1bm5lci93b3JrL2h2LXVpa2l0LXJlYWN0L2h2LXVpa2l0LXJlYWN0L3BhY2thZ2VzL2NvcmUvc3JjL2NvbXBvbmVudHMvVmVydGljYWxOYXZpZ2F0aW9uL1RyZWVWaWV3L0ljb25XcmFwcGVyL0ljb25XcmFwcGVyLnN0eWxlcy50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBcUJ5QiIsImZpbGUiOiIvaG9tZS9ydW5uZXIvd29yay9odi11aWtpdC1yZWFjdC9odi11aWtpdC1yZWFjdC9wYWNrYWdlcy9jb3JlL3NyYy9jb21wb25lbnRzL1ZlcnRpY2FsTmF2aWdhdGlvbi9UcmVlVmlldy9JY29uV3JhcHBlci9JY29uV3JhcHBlci5zdHlsZXMudHN4Iiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHN0eWxlZCBmcm9tIFwiQGVtb3Rpb24vc3R5bGVkXCI7XG5cbmludGVyZmFjZSBTdHlsZWRJY29uc0NvbnRhaW5lclByb3BzIHtcbiAgaGFzQW55Q2hpbGRXaXRoRGF0YT86IGJvb2xlYW47XG59XG5cbmV4cG9ydCBjb25zdCBTdHlsZWRJY29uc0NvbnRhaW5lciA9IHN0eWxlZChcImRpdlwiKShcbiAgKHsgaGFzQW55Q2hpbGRXaXRoRGF0YSB9OiBTdHlsZWRJY29uc0NvbnRhaW5lclByb3BzKSA9PiAoe1xuICAgIGRpc3BsYXk6IFwiZmxleFwiLFxuXG4gICAgW2A+IGRpdjpmaXJzdC1vZi10eXBlYF06IHtcbiAgICAgIG1hcmdpbkxlZnQ6IGhhc0FueUNoaWxkV2l0aERhdGEgPyBcImF1dG9cIiA6IFwidW5zZXRcIixcbiAgICB9LFxuXG4gICAgW2A+IGRpdjpudGgtb2YtdHlwZSgyKWBdOiB7XG4gICAgICB3aWR0aDogXCIxNHB4XCIsXG4gICAgICBtYXJnaW5MZWZ0OiBcImF1dG9cIixcbiAgICB9LFxuICB9KVxuKTtcblxuZXhwb3J0IGNvbnN0IFNwYWNlckRpdiA9IHN0eWxlZChcImRpdlwiKSh7fSk7XG4iXX0= */",
|
|
34
|
+
toString: _EMOTION_STRINGIFIED_CSS_ERROR__
|
|
35
|
+
});
|
|
36
|
+
export {
|
|
37
|
+
SpacerDiv,
|
|
38
|
+
StyledIconsContainer
|
|
39
|
+
};
|
|
40
|
+
//# sourceMappingURL=IconWrapper.styles.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"IconWrapper.styles.js","sources":["../../../../../../src/components/VerticalNavigation/TreeView/IconWrapper/IconWrapper.styles.tsx"],"sourcesContent":["import styled from \"@emotion/styled\";\n\ninterface StyledIconsContainerProps {\n hasAnyChildWithData?: boolean;\n}\n\nexport const StyledIconsContainer = styled(\"div\")(\n ({ hasAnyChildWithData }: StyledIconsContainerProps) => ({\n display: \"flex\",\n\n [`> div:first-of-type`]: {\n marginLeft: hasAnyChildWithData ? \"auto\" : \"unset\",\n },\n\n [`> div:nth-of-type(2)`]: {\n width: \"14px\",\n marginLeft: \"auto\",\n },\n })\n);\n\nexport const SpacerDiv = styled(\"div\")({});\n"],"names":["StyledIconsContainer","process","env","NODE_ENV","target","label","hasAnyChildWithData","display","marginLeft","width","SpacerDiv","name","styles","map","toString","_EMOTION_STRINGIFIED_CSS_ERROR__"],"mappings":";;;;AAMO,MAAMA,uBAA8B,wBAAA,OAAKC,QAAAC,IAAAC,aAAA,eAAA;AAAA,EAAAC,QAAA;AAAA,IAAA;AAAA,EAAAA,QAAA;AAAA,EAAAC,OAAA;AAAA,CAAA,EAC9C,CAAC;AAAA,EAAEC;AAA+C,OAAO;AAAA,EACvDC,SAAS;AAAA,EAET,CAAE,qBAAoB,GAAG;AAAA,IACvBC,YAAYF,sBAAsB,SAAS;AAAA,EAC7C;AAAA,EAEA,CAAE,sBAAqB,GAAG;AAAA,IACxBG,OAAO;AAAA,IACPD,YAAY;AAAA,EACd;AACF,IAAEP,QAAAC,IAAAC,aACH,eAAA,KAAA,yuCAAA;AAEM,MAAMO,YAAmB,wBAAA,OAAKT,QAAAC,IAAAC,aAAA,eAAA;AAAA,EAAAC,QAAA;AAAA,IAAA;AAAA,EAAAA,QAAA;AAAA,EAAAC,OAAA;AAAA,CAAA,EAACJ,QAAAC,IAAAC,aAAA,eAAA;AAAA,EAAAQ,MAAA;AAAA,EAAAC,QAAA;AAAA,IAAA;AAAA,EAAAD,MAAA;AAAA,EAAAC,QAAA;AAAA,EAAAC,KAAA;AAAA,EAAAC,UAAAC;AAAA,CAAI;"}
|
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
import { jsx } from "@emotion/react/jsx-runtime";
|
|
2
|
+
import { HvTooltip } from "../../../Tooltip/Tooltip.js";
|
|
3
|
+
import { HvTypography } from "../../../Typography/Typography.js";
|
|
4
|
+
const TooltipWrapper = ({
|
|
5
|
+
showTooltip,
|
|
6
|
+
label,
|
|
7
|
+
children,
|
|
8
|
+
placement = "right"
|
|
9
|
+
}) => {
|
|
10
|
+
if (showTooltip) {
|
|
11
|
+
return /* @__PURE__ */ jsx(HvTooltip, {
|
|
12
|
+
title: /* @__PURE__ */ jsx(HvTypography, {
|
|
13
|
+
children: label
|
|
14
|
+
}),
|
|
15
|
+
placement,
|
|
16
|
+
children
|
|
17
|
+
});
|
|
18
|
+
}
|
|
19
|
+
return children;
|
|
20
|
+
};
|
|
21
|
+
export {
|
|
22
|
+
TooltipWrapper
|
|
23
|
+
};
|
|
24
|
+
//# sourceMappingURL=TooltipWrapper.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"TooltipWrapper.js","sources":["../../../../../../src/components/VerticalNavigation/TreeView/TooltipWrapper/TooltipWrapper.tsx"],"sourcesContent":["import { HvTooltip, HvTooltipPlacementType, HvTypography } from \"~/components\";\n\ninterface TooltipWrapperProps {\n showTooltip: boolean;\n label: string;\n children: React.ReactElement;\n placement?: HvTooltipPlacementType;\n}\n\nexport const TooltipWrapper = ({\n showTooltip,\n label,\n children,\n placement = \"right\",\n}: TooltipWrapperProps) => {\n if (showTooltip) {\n return (\n <HvTooltip\n title={<HvTypography>{label}</HvTypography>}\n placement={placement}\n >\n {children}\n </HvTooltip>\n );\n }\n return children;\n};\n"],"names":["TooltipWrapper","showTooltip","label","children","placement","HvTooltip","title","HvTypography"],"mappings":";;;AASO,MAAMA,iBAAiBA,CAAC;AAAA,EAC7BC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC,YAAY;AACO,MAAM;AACzB,MAAIH,aAAa;AACf,+BACGI,WAAS;AAAA,MACRC,2BAAQC,cAAY;AAAA,QAAAJ,UAAED;AAAAA,MAAAA,CAAsB;AAAA,MAC5CE;AAAAA,MAAqBD;AAAAA,IAAAA,CAGX;AAAA,EAEhB;AACOA,SAAAA;AACT;"}
|