npm - @hitachivantara/uikit-react-core - Versions diffs - 5.25.0 → 5.25.2 - Mend

@hitachivantara/uikit-react-core 5.25.0 → 5.25.2

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 (124) hide show

package/dist/cjs/components/VerticalNavigation/TreeView/TreeViewItem.styles.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"TreeViewItem.styles.cjs","sources":["../../../../../src/components/VerticalNavigation/TreeView/TreeViewItem.styles.tsx"],"sourcesContent":["import ~~styled from \"@emotion/styled\";\n\nimport~~ { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { ~~HvTypography } from \"@core/components/Typography\";\nimport {~~ outlineStyles } from \"@core/utils/focusUtils\";\nimport { ~~transientOptions~~ } from \"@core/utils/~~transientOptions~~\";\n\~~nimport treeViewItemClasses from \"./treeViewItemClasses\";\n\~~nconst selected = () => ({\n background: theme.colors.atmo3,\n borderLeft: theme.verticalNavigation.activeBorderLeft,\n \"& \": {\n background: theme.colors.atmo3,\n },\n});\n\nconst hover = () => ({\n background: theme.verticalNavigation.hoverColor,\n});\n\nexport const ~~StyledGroup = styled(\"ul\")(~~{~~\n margin:~~ ~~\"8px~~ 0 ~~0 0\",\n padding: 0,\n~~}~~);\n\nexport~~ ~~const StyledLabel~~ = ~~styled~~(\n \"~~div~~\",\n ~~transientOptions\n)((~~{ ~~$expandable, $hasIcon }: { $expandable: boolean; $hasIcon: boolean }) => ({~~\n ~~display: \"flex\",\n flexGrow: 1,\n maxWidth: \"100%\",\n ...(($hasIcon \|\| $expandable) && {\n~~ ~~maxWidth~~: ~~\"calc(100% - 32px)\",\n }),\n ...($expandable &&\n $hasIcon &&~~ {\n ~~maxWidth: \"calc(100% - 64px)\",\n }),\n}));\n\nexport const StyledNode = styled(\"li\")({\n~~ listStyle: \"none\",\n minHeight: \"32px\",\n \"&:not(:last-child)\": {\n marginBottom: \"8px\",\n },\n ~~[`&.${treeViewItemClasses.~~collapsed~~}`]~~: {\n ~~[`&>.${treeViewItemClasses.~~group~~}`]~~: {\n display: \"none\",\n },\n },\n ~~[`&.${treeViewItemClasses.~~expanded~~}`]~~: {\n ~~[`&>.${treeViewItemClasses.~~group~~}`]~~: {\n display: \"block\",\n },\n },\n ~~[`&.${treeViewItemClasses.~~link~~}`]~~: {\n textDecoration: \"none\",\n },\n ~~[`&.${treeViewItemClasses.~~hide~~}`]~~: {\n display: \"none\",\n },\n}~~);\~~n~~\nexport~~ ~~const StyledContent = styled(HvTypography)(~~{\n width: \"100%\",\n display: \"flex\",\n justifyContent: \"flex-start\",\n alignItems: \"center\",\n height: \"32px\",\n borderLeft: theme.verticalNavigation.inactiveBorderLeft,\n paddingRight: theme.space.xs,\n\~~n [`&.${treeViewItemClasses.~~minimized~~}`]~~: {\n justifyContent: \"center\",\n paddingRight: 0,\n },\n\~~n [`.${treeViewItemClasses.~~expandable~~}>&`]~~: {\n fontWeight: 600,\n },\n\~~n //~~ selected ~~state\n [`.${treeViewItemClasses.selected}>&`]~~: selected(),\n\n // hover\n ~~[`:~~not(~~.${treeViewItemClasses.~~disabled~~} > &~~):not(~~.${treeViewItemClasses.~~selected~~} > &~~):hover~~`]:\n~~ hover(),\n ~~[`:~~not(~~.${treeViewItemClasses.~~disabled~~} > &~~)~~.${treeViewItemClasses.~~selected} ~~>:hover`]:\n~~ {},\n\n // focus\n ~~[`:~~not(~~.${treeViewItemClasses.~~disabled}>&):not(~~.${treeViewItemClasses.~~selected}>&):focus-visible~~`]:\~~n hover(),\n\n ~~[`:~~focus-visible ~~.${treeViewItemClasses.~~focused~~}>&`]~~: {\n ...outlineStyles,\n },\n\n [` .${~~treeViewItemClasses.~~focused~~}>&`]~~: {\n ...hover(),\n },\n\n \"&[disabled], &:active\": {\n outline: \"none\",\n },\n\n \"&:focus\": {\n outline: \"none\",\n },\n\n \"&:focus-visible\": {\n ...outlineStyles,\n },\n\n // cursor\n cursor: \"pointer\",\n \"& \": {\n cursor: \"pointer\",\n },\n ~~[` .${treeViewItemClasses.~~disabled~~}>&`]~~: {\n cursor: \"not-allowed\",\n \"& \": {\n cursor: \"not-allowed\",\n },\n },\n});\n"],"names":["selected","background","theme","colors","atmo3","borderLeft","verticalNavigation","activeBorderLeft","hover","hoverColor","~~StyledGroup~~","~~_styled~~","~~process~~","~~env~~","~~NODE_ENV~~","~~target~~","~~label~~","~~name~~","~~styles~~","~~map~~","~~toString~~","~~_EMOTION_STRINGIFIED_CSS_ERROR__~~","~~StyledLabel~~","~~_extends~~","~~transientOptions~~","~~$expandable~~","~~$hasIcon~~","~~display~~","~~flexGrow~~","~~maxWidth~~","~~StyledNode~~","~~listStyle~~","~~minHeight~~","~~marginBottom","treeViewItemClasses","collapsed","~~group","~~expanded~~","~~link~~","~~textDecoration~~","~~hide~~","~~StyledContent~~","~~HvTypography~~","~~width~~","~~justifyContent~~","~~alignItems~~","~~height~~","~~inactiveBorderLeft","paddingRight","space","xs","~~minimized","~~expandable~~","~~fontWeight~~","~~disabled~~","~~focused~~","~~outlineStyles~~","~~outline~~"~~,"cursor"~~],"mappings":"~~;;;;;;;;;;;;;;;;;;;;;;;;;;;AAUA~~,MAAMA,WAAWA,OAAO;AAAA,EACtBC,YAAYC,YAAAA,MAAMC,OAAOC;AAAAA,EACzBC,YAAYH,YAAAA,MAAMI,mBAAmBC;AAAAA,EACrC,OAAO;AAAA,IACLN,YAAYC,YAAAA,MAAMC,OAAOC;AAAAA,EAC3B;AACF;AAEA,MAAMI,QAAQA,OAAO;AAAA,EACnBP,YAAYC,YAAAA,MAAMI,mBAAmBG;AACvC;~~AAEO~~,~~MAAMC~~,~~cAAqBC~~,~~iCAAA~~,~~QAAA~~,~~MAAIC~~,~~QAAAC~~,~~IAAAC,aAAA,eAAA~~;AAAA,~~EAAAC~~,~~QAAA~~;AAAA,~~IAAA~~;AAAA,~~EAAAA~~,~~QAAA~~;AAAA,~~EAAAC~~,~~OAAA~~;AAAA,~~CAAA~~,~~EAACJ,QAAAC,IAAAC,aAAA,eAAA~~;AAAA,~~EAAAG,MAAA~~;AAAA,~~EAAAC~~,~~QAAA~~;AAAA,~~IAAA~~;AAAA,~~EAAAD~~,~~MAAA~~;AAAA,~~EAAAC,QAAA~~;AAAA,~~EAAAC,KAAA~~;AAAA,~~EAAAC~~,~~UAAAC~~;AAAA,~~CAGtC;AAEYC~~,~~MAAAA,uDACX,OAAKV,QAAAC,IAAAC,4BAAAS,SAAA,IAAA~~;AAAA,~~EAAAR~~,~~QAAA~~;AAAA,~~GACLS,iBAAgB,gBAAA,IAAAD,SAAA,IAAA~~;AAAA,~~EAAAR,QAAA~~;AAAA,~~EAAAC~~,~~OAAA~~;AAAA,~~GAAhBQ~~,~~iBAAAA,~~gBAAgB~~,CAClB,EAAE,CAAC~~;AAAA,~~EAAEC~~;~~AAAAA~~,~~EAAaC;AAAsD~~,~~OAAO~~;AAAA,~~EAC7EC~~,SAAS;AAAA,~~EACTC~~,~~UAAU~~;AAAA,~~EACVC~~,~~UAAU~~;AAAA,~~EACV~~,~~IAAKH,YAAYD,gBAAgB~~;AAAA,~~IAC/BI~~,~~UAAU~~;AAAA,~~EACZ~~;AAAA,~~EACA~~,~~GAAIJ,eACFC,~~YAAY;AAAA,~~IACVG~~,~~UAAU~~;AAAA,~~EACZ;AACJ~~,~~IAAEjB~~,~~QAAAC~~,~~IAAAC~~,~~aAAC,eAAA,KAAA,6lJAAA~~;~~AAEI~~,~~MAAMgB~~,~~aAAoBnB~~,~~iCAAA~~,~~QAAA~~,~~MAAIC~~,~~QAAAC~~,~~IAAAC~~,~~aAAA~~,~~eAAA~~;AAAA,~~EAAAC~~,~~QAAA~~;AAAA,~~IAAA~~;AAAA,~~EAAAA~~,~~QAAA~~;AAAA,~~EAAAC~~,~~OAAA~~;AAAA,~~CAAA,EAAE~~;AAAA,~~EACrCe~~,~~WAAW~~;AAAA~~,EACXC,WAAW~~;AAAA,~~EACX~~,~~sBAAsB~~;AAAA,~~IACpBC~~,~~cAAc~~;AAAA~~,EAChB~~;AAAA,~~EACA~~,~~CAAE~~,~~KAAIC~~,~~4BAAoBC~~,~~WAAW~~,~~GAAG~~;AAAA,~~IACtC~~,~~CAAE,MAAKD,4BAAoBE,OAAO,GAAG~~;AAAA,~~MACnCT~~,~~SAAS~~;~~AAAA~~,~~IACX~~;AAAA,~~EACF~~;AAAA,~~EACA~~,~~CAAE~~,~~KAAIO~~,~~4BAAoBG,UAAU,GAAG~~;AAAA,~~IACrC~~,~~CAAE,MAAKH,4BAAoBE,OAAO,GAAG~~;AAAA,~~MACnCT~~,~~SAAS~~;AAAA,IACX;AAAA,~~EACF;AAAA~~,~~EACA,CAAE,KAAIO,4BAAoBI,MAAM,GAAG~~;AAAA,~~IACjCC~~,~~gBAAgB~~;AAAA,~~EAClB~~;AAAA,~~EACA~~,~~CAAE,KAAIL,4BAAoBM,MAAM,GAAG~~;AAAA,~~IACjCb~~,SAAS;AAAA,~~EACX~~;~~AACF~~,~~GAACf~~,~~QAAAC~~,~~IAAAC~~,~~aAAC~~,~~eAAA~~,~~KAAA,6lJAAA~~;~~AAEK~~,~~MAAM2B~~,~~gBAAuBC~~,~~iCAAAA~~,~~QAAAA~~,WAAAA~~,cAAY9B,QAAAC,IAAAC,aAAA,eAAA~~;~~AAAA~~,~~EAAAC,QAAA~~;AAAA~~,IAAA~~;AAAA,~~EAAAA~~,~~QAAA~~;AAAA,~~EAAAC~~,~~OAAA~~;AAAA,~~CAAA~~,~~EAAE~~;AAAA,~~EAChD2B,OAAO~~;AAAA,~~EACPhB~~,~~SAAS~~;AAAA,~~EACTiB~~,~~gBAAgB~~;AAAA,~~EAChBC~~,~~YAAY~~;AAAA,~~EACZC~~,QAAQ;AAAA,~~EACRzC~~,~~YAAYH~~,~~YAAAA,MAAMI,mBAAmByC~~;~~AAAAA~~,~~EACrCC~~,~~cAAc9C,YAAAA,~~MAAM+C,~~MAAMC~~;~~AAAAA~~,~~EAE1B~~,~~CAAE,KAAIhB,4BAAoBiB,WAAW,GAAG~~;AAAA,~~IACtCP~~,~~gBAAgB~~;AAAA,~~IAChBI~~,~~cAAc~~;AAAA,~~EAChB~~;AAAA,~~EAEA~~,~~CAAE~~,~~IAAGd,oBAAAA,QAAoBkB,cAAc,GAAG~~;AAAA,~~IACxCC~~,YAAY;AAAA,~~EACd;AAAA;AAAA~~,~~EAGA,CAAE,IAAGnB,oBAAoBlC,QAAAA,~~YAAY~~,GAAGA,SAAS~~;AAAA;AAAA,~~EAGjD~~,~~CAAE~~,~~SAAQkC,oBAAAA,QAAoBoB,sBAAsBpB,oBAAAA,QAAoBlC,qBAAqB,GAC3FQ,MAAM~~;AAAA,~~EACR~~,~~CAAE~~,~~SAAQ0B,oBAAAA,QAAoBoB,iBAAiBpB,4BAAoBlC,kBAAkB,GACnF,~~CAAC;AAAA~~;AAAA~~,~~EAGH~~,~~CAAE~~,~~SAAQkC,oBAAAA,QAAoBoB,oBAAoBpB,oBAAAA,QAAoBlC,2BAA2B,GAC/FQ,MAAM~~;AAAA,~~EAER~~,~~CAAE~~,~~oBAAmB0B,oBAAAA,QAAoBqB,WAAW,GAAG~~;AAAA,~~IACrD~~,~~GAAGC~~,~~WAAAA~~;~~AAAAA,EACL;~~AAAA,~~EAEA~~,~~CAAE~~,~~KAAItB,oBAAAA,QAAoBqB,WAAW,GAAG~~;AAAA,~~IACtC~~,~~GAAG/C~~,~~MAAM~~;AAAA,~~EACX;AAAA~~,~~EAEA~~,~~yBAAyB~~;AAAA,~~IACvBiD~~,~~SAAS;AAAA~~,~~EACX~~;AAAA,~~EAEA~~,~~WAAW~~;AAAA,~~IACTA~~,SAAS;AAAA,~~EACX;AAAA~~,~~EAEA,mBAAmB~~;AAAA,~~IACjB~~,~~GAAGD,WAAAA~~;~~AAAAA,EACL;~~AAAA~~;AAAA~~,~~EAGAE,QAAQ~~;AAAA,~~EACR~~,~~OAAO~~;AAAA,~~IACLA~~,~~QAAQ~~;AAAA,~~EACV~~;AAAA,~~EACA~~,~~CAAE,KAAIxB,oBAAAA,QAAoBoB,YAAY,GAAG~~;AAAA,~~IACvCI~~,~~QAAQ~~;AAAA,~~IACR~~,~~OAAO~~;AAAA,~~MACLA~~,~~QAAQ~~;AAAA,~~IACV~~;AAAA,EACF;AACF,~~GAAC9C,QAAAC,IAAAC,aAAC,eAAA,KAAA,6lJAAA;;;;;~~"}
1	+ {"version":3,"file":"TreeViewItem.styles.cjs","sources":["../../../../../src/components/VerticalNavigation/TreeView/TreeViewItem.styles.tsx"],"sourcesContent":["import { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { outlineStyles } from \"@core/utils/focusUtils\";\n\nimport { createClasses } from \"@core/utils/classes\";\n\nconst selected = () => ({\n background: theme.colors.atmo3,\n borderLeft: theme.verticalNavigation.activeBorderLeft,\n \"& \": {\n background: theme.colors.atmo3,\n },\n});\n\nconst hover = () => ({\n background: theme.verticalNavigation.hoverColor,\n});\n\nexport const { staticClasses, useClasses } = createClasses(\n \"HvVerticalNavigationTreeViewItem\",\n {\n node: {\n listStyle: \"none\",\n minHeight: \"32px\",\n \"&:not(:last-child)\": {\n marginBottom: \"8px\",\n },\n \"&$collapsed\": {\n \"&>$group\": {\n display: \"none\",\n },\n },\n \"&$expanded\": {\n \"&>$group\": {\n display: \"block\",\n },\n },\n \"&$link\": {\n textDecoration: \"none\",\n },\n \"&$hide\": {\n display: \"none\",\n },\n },\n content: {\n width: \"100%\",\n display: \"flex\",\n justifyContent: \"flex-start\",\n alignItems: \"center\",\n height: \"32px\",\n borderLeft: theme.verticalNavigation.inactiveBorderLeft,\n paddingRight: theme.space.xs,\n \"&$minimized\": {\n justifyContent: \"center\",\n paddingRight: 0,\n },\n \"$expandable>&\": {\n fontWeight: 600,\n },\n \"$selected>&\": selected(),\n // hover\n \":not($disabled>&):not($selected>&):hover\": hover(),\n \":not($disabled)$selected>&:hover\": {},\n\n // focus\n \":not($disabled>&):not($selected>&):focus-visible\": hover(),\n \":not($disabled>&):not($selected>&).focus-visible\": hover(),\n\n \":focus-visible $focused>&\": {\n ...outlineStyles,\n },\n\n \".focus-visible $focused>&\": {\n ...outlineStyles,\n },\n \"$focused>&\": {\n ...hover(),\n },\n\n \"&[disabled], &:active\": {\n outline: \"none\",\n },\n\n \"&:focus\": {\n outline: \"none\",\n },\n\n \"&:focus-visible\": {\n ...outlineStyles,\n },\n\n \"&.focus-visible\": {\n ...outlineStyles,\n },\n\n // cursor\n cursor: \"pointer\",\n \"& \": {\n cursor: \"pointer\",\n },\n\n \"$disabled>&\": {\n cursor: \"not-allowed\",\n \"& \": {\n cursor: \"not-allowed\",\n },\n },\n },\n link: {},\n group: {\n margin: \"8px 0 0 0\",\n padding: 0,\n },\n disabled: {},\n expandable: {\n fontWeight: 600,\n },\n collapsed: {},\n expanded: {},\n selectable: {},\n unselectable: {},\n selected: {},\n unselected: {},\n focused: {},\n minimized: {},\n hide: {},\n label: {\n display: \"flex\",\n flexGrow: 1,\n maxWidth: \"100%\",\n },\n labelIcon: {\n maxWidth: \"calc(100% - 32px)\",\n },\n labelExpandable: {\n maxWidth: \"calc(100% - 32px)\",\n\n \"&$labelIcon\": {\n maxWidth: \"calc(100% - 64px)\",\n },\n },\n }\n);\n"],"names":["selected","background","theme","colors","atmo3","borderLeft","verticalNavigation","activeBorderLeft","hover","hoverColor","staticClasses","useClasses","createClasses","node","listStyle","minHeight","marginBottom","display","textDecoration","content","width","justifyContent","alignItems","height","inactiveBorderLeft","paddingRight","space","xs","fontWeight","outlineStyles","outline","cursor","link","group","margin","padding","disabled","expandable","collapsed","expanded","selectable","unselectable","unselected","focused","minimized","hide","label","flexGrow","maxWidth","labelIcon","labelExpandable"],"mappings":"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"}

package/dist/cjs/components/VerticalNavigation/VerticalNavigation.cjs CHANGED Viewed

@@ -1,25 +1,27 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const clsx = require("clsx");
 const useDefaultProps = require("../../hooks/useDefaultProps.cjs");
 const React = require("react");
-const VerticalNavigation_styles = require("./VerticalNavigation.styles.cjs");
-const verticalNavigationClasses = require("./verticalNavigationClasses.cjs");
 const VerticalNavigationContext = require("./VerticalNavigationContext.cjs");
 const VerticalNavigation_utils = require("./utils/VerticalNavigation.utils.cjs");
+const VerticalNavigation_styles = require("./VerticalNavigation.styles.cjs");
 const jsxRuntime = require("@emotion/react/jsx-runtime");
 const NavigationSlider_utils = require("./NavigationSlider/utils/NavigationSlider.utils.cjs");
 const HvVerticalNavigation = (props) => {
   const {
     id,
     className,
-    classes,
+    classes: classesProp,
     children,
     open = true,
     slider = false,
     useIcons = false,
     ...others
   } = useDefaultProps.useDefaultProps("HvVerticalNavigation", props);
+  const {
+    classes,
+    cx
+  } = VerticalNavigation_styles.useClasses(classesProp);
   const [parentData, setParentData] = React.useState([]);
   const [parentSelected, setParentSelected] = React.useState();
   const [headerTitle, setHeaderTitle] = React.useState();
@@ -54,15 +56,19 @@ const HvVerticalNavigation = (props) => {
   }), [open, useIcons, slider, headerTitle, setHeaderTitle, parentItem, setParentItem, withParentData, navigateToChildHandler, navigateToParentHandler, hasAnyChildWithData, parentData, parentSelected]);
   const content = /* @__PURE__ */ jsxRuntime.jsx(VerticalNavigationContext.VerticalNavigationContext.Provider, {
     value,
-    children: /* @__PURE__ */ jsxRuntime.jsx(VerticalNavigation_styles.StyledRoot, {
+    children: /* @__PURE__ */ jsxRuntime.jsx("div", {
       id,
-      className: clsx.clsx(className, verticalNavigationClasses.default.root, classes == null ? void 0 : classes.root, !open && verticalNavigationClasses.default.collapsed, slider && verticalNavigationClasses.default.slider, classes == null ? void 0 : classes.collapsed),
-      hasAnyChildWithData,
+      className: cx(classes.root, {
+        [classes.collapsed]: !open,
+        [classes.slider]: slider,
+        [classes.childData]: hasAnyChildWithData
+      }, className),
       ...others,
       children
     })
   });
   return content;
 };
+exports.verticalNavigationClasses = VerticalNavigation_styles.staticClasses;
 exports.HvVerticalNavigation = HvVerticalNavigation;
 //# sourceMappingURL=VerticalNavigation.cjs.map

package/dist/cjs/components/VerticalNavigation/VerticalNavigation.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"VerticalNavigation.cjs","sources":["../../../../src/components/VerticalNavigation/VerticalNavigation.tsx"],"sourcesContent":["import { ~~clsx } from \"clsx\";\nimport {~~ useDefaultProps } from \"@core/hooks/useDefaultProps\";\n\nimport { useCallback, useEffect, useMemo, useState } from \"react\";\n\nimport { ~~StyledRoot~~ } from \"~~./VerticalNavigation.styles~~\";\nimport ~~verticalNavigationClasses,~~ {\n ~~HvVerticalNavigationClasses,\n} from \"./verticalNavigationClasses\";\nimport {\n~~ VerticalNavigationContext,\n NavigationData,\n} from \"./VerticalNavigationContext\";\nimport {\n fillDataWithParentId,\n getNavigationItemById,\n getParentItemById,\n} from \"./NavigationSlider/utils\";\nimport { hasChildNavigationItems } from \"./utils/VerticalNavigation.utils\";\n\nexport interface HvVerticalNavigationProps {\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 to the component.\n /\n classes?: HvVerticalNavigationClasses;\n /\n Current State of the Vertical Navigation Collapse\n /\n open?: boolean;\n /\n Collpased Mode for the Vertical Navigation, the default value is \"simple\".\n \n @deprecated - `useIcons` property should be used instead.\n /\n collapsedMode?: HvVerticalNavigationMode;\n /\n Boolean to determine if treeview is in slider mode (for mobile navigation), the default value is false.\n /\n slider?: boolean;\n /\n The content inside the actions container.\n /\n children?: React.ReactNode;\n /\n Boolean to determine if icons should be displayed in the navigation menu.\n * When `true` a icon will always be displayed, if no icon is provided the first letter of the label will be\n * displayed inside an Avatar component.\n * When `false` no icons will be shown, even if an icon is provided.\n /\n useIcons?: boolean;\n}\n\n/\n Navigation enables users to move through an app to complete tasks.\n \n It is recommended to use vertical navigation when your application requires global navigation that is displayed on the left.\n * While vertical navigation menus generally consume more space than their horizontal counterparts, they have become more popular as desktop monitors move to wide-screen formats.\n \n Although both the hierarchically organized data and the visual style resemble a treeview-like structure, the [Treeview Design Pattern](https://w3c.github.io/aria-practices/#TreeView)\n * isn't necessarily the most appropriate.\n \n The tree role provides complex functionality that is not needed for typical site navigation, and changes the most common keyboard navigation using TAB.\n \n The [Disclosure Design Pattern](https://w3c.github.io/aria-practices/#disclosure) is more suited for typical site navigation, with expandable groups of links.\n * However it can be tedious to TAB through all navigation items to reach the actions panel.\n \n Both modes are available via the `mode` property and each app should choose the most appropriate.\n */\nexport const HvVerticalNavigation = (props: HvVerticalNavigationProps) => {\n const {\n id,\n className,\n classes,\n\n children,\n\n open = true,\n\n slider = false,\n\n useIcons = false,\n\n ...others\n } = useDefaultProps(\"HvVerticalNavigation\", props);\n\n const [parentData, setParentData] = useState<NavigationData[]>([]);\n\n const [parentSelected, setParentSelected] = useState();\n\n const [headerTitle, setHeaderTitle] = useState<string \| undefined>();\n\n // navigationSlider\n const withParentData = useMemo(\n () => fillDataWithParentId(parentData),\n [parentData]\n );\n\n const initialParentItem = useMemo(\n () => getParentItemById(withParentData, parentSelected),\n [withParentData, parentSelected]\n );\n\n const [parentItem, setParentItem] = useState(initialParentItem);\n\n const hasAnyChildWithData = useMemo(\n () => hasChildNavigationItems(parentData),\n [parentData]\n );\n\n useEffect(\n () => setHeaderTitle(parentItem?.label),\n [parentItem, setParentItem]\n );\n\n const navigateToParentHandler = useCallback(() => {\n setParentItem(getParentItemById(withParentData, parentItem.id));\n }, [parentItem, setParentItem, withParentData]);\n\n const navigateToChildHandler = useCallback(\n (event, item) => {\n setParentItem(getNavigationItemById(withParentData, item.id));\n event.stopPropagation();\n },\n [setParentItem, withParentData]\n );\n\n const value = useMemo(\n () => ({\n isOpen: open,\n useIcons,\n slider,\n headerTitle,\n setHeaderTitle,\n\n parentItem,\n setParentItem,\n withParentData,\n navigateToChildHandler,\n navigateToParentHandler,\n\n parentData,\n setParentData,\n parentSelected,\n setParentSelected,\n hasAnyChildWithData,\n }),\n [\n open,\n useIcons,\n slider,\n headerTitle,\n setHeaderTitle,\n parentItem,\n setParentItem,\n withParentData,\n navigateToChildHandler,\n navigateToParentHandler,\n hasAnyChildWithData,\n parentData,\n parentSelected,\n ]\n );\n\n const content = (\n <VerticalNavigationContext.Provider value={value}>\n <~~StyledRoot~~\n id={id}\n className={~~clsx~~(\n ~~className,\n verticalNavigationClasses~~.root,\n classes~~?.root,\n~~ !open ~~&& verticalNavigationClasses.collapsed~~,\n slider ~~&& verticalNavigationClasses.~~slider,\n classes~~?.collapsed\~~n )}\n ~~hasAnyChildWithData={hasAnyChildWithData~~}\n {...others}\n >\n {children}\n </~~StyledRoot~~>\n </VerticalNavigationContext.Provider>\n );\n\n return content;\n};\n\nexport type HvVerticalNavigationMode = \"icon\" \| \"simple\";\n\nexport type HvVerticalNavigationPosition =\n \| \"static\"\n \| \"relative\"\n \| \"fixed\"\n \| \"absolute\";\n"],"names":["HvVerticalNavigation","props","id","className","classes","children","open","slider","useIcons","others","useDefaultProps","parentData","setParentData","useState","parentSelected","setParentSelected","headerTitle","setHeaderTitle","withParentData","useMemo","fillDataWithParentId","initialParentItem","getParentItemById","parentItem","setParentItem","hasAnyChildWithData","hasChildNavigationItems","useEffect","label","navigateToParentHandler","useCallback","navigateToChildHandler","event","item","getNavigationItemById","stopPropagation","value","isOpen","content","VerticalNavigationContext","Provider","~~StyledRoot~~","~~clsx~~","~~verticalNavigationClasses~~"~~,"root","collapsed"~~],"mappings":"~~;;;;;;;;;;;AA4EaA~~,MAAAA,uBAAuBA,CAACC,UAAqC;AAClE,QAAA;AAAA,IACJC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,~~IAEAC~~;AAAAA,IAEAC,OAAO;AAAA,IAEPC,SAAS;AAAA,IAETC,WAAW;AAAA,IAEX,GAAGC;AAAAA,EAAAA,IACDC,gBAAgB,gBAAA,~~wBAAwBT~~,KAAK;~~AAEjD~~,QAAM,~~CAACU~~,YAAYC,aAAa,IAAIC,MAAAA,SAA2B,CAAE,CAAA;AAEjE,QAAM,CAACC,gBAAgBC,iBAAiB,IAAIF,MAAS,SAAA;AAErD,QAAM,CAACG,aAAaC,cAAc,IAAIJ,MAA6B,SAAA;AAG7DK,QAAAA,iBAAiBC,MAAAA,QACrB,MAAMC,uBAAAA,qBAAqBT,UAAU,GACrC,CAACA,UAAU,CACb;AAEMU,QAAAA,oBAAoBF,cACxB,MAAMG,yCAAkBJ,gBAAgBJ,cAAc,GACtD,CAACI,gBAAgBJ,cAAc,CACjC;AAEA,QAAM,CAACS,YAAYC,aAAa,IAAIX,eAASQ,iBAAiB;AAExDI,QAAAA,sBAAsBN,MAAAA,QAC1B,MAAMO,yBAAAA,wBAAwBf,UAAU,GACxC,CAACA,UAAU,CACb;AAGEgB,kBAAA,MAAMV,eAAeM,yCAAYK,KAAK,GACtC,CAACL,YAAYC,aAAa,CAC5B;AAEMK,QAAAA,0BAA0BC,MAAAA,YAAY,MAAM;AAChDN,kBAAcF,uBAAAA,kBAAkBJ,gBAAgBK,~~WAAWrB~~,EAAE,CAAC;AAAA,EAC7D,GAAA,~~CAACqB~~,YAAYC,eAAeN,cAAc,CAAC;AAE9C,QAAMa,yBAAyBD,MAAAA,YAC7B,CAACE,OAAOC,SAAS;AACfT,kBAAcU,uBAAAA,sBAAsBhB,gBAAgBe,~~KAAK/B~~,EAAE,CAAC;~~AAC5D8B~~,UAAMG,gBAAgB;AAAA,EAAA,GAExB,CAACX,eAAeN,cAAc,CAChC;AAEMkB,QAAAA,QAAQjB,MAAAA,QACZ,OAAO;AAAA,IACLkB,~~QAAQ/B~~;AAAAA,IACRE;AAAAA,IACAD;AAAAA,~~IACAS~~;AAAAA,IACAC;AAAAA,IAEAM;AAAAA,IACAC;AAAAA,IACAN;AAAAA,IACAa;AAAAA,IACAF;AAAAA,IAEAlB;AAAAA,IACAC;AAAAA,IACAE;AAAAA,IACAC;AAAAA,IACAU;AAAAA,EAAAA,IAEF,~~CACEnB~~,MACAE,UACAD,~~QACAS~~,aACAC,gBACAM,YACAC,eACAN,gBACAa,wBACAF,yBACAJ,qBACAd,YACAG,cAAc,CAElB;AAEMwB,QAAAA,UACHC,2BAAAA,IAAAA,0BAAAA,0BAA0BC,UAAQ;AAAA,IAACJ;AAAAA,~~IAAa~~/B,~~yCAC9CoC,sCAAU~~;AAAA,~~MACTvC~~;AAAAA,MACAC,~~WAAWuC~~,~~KAAAA~~,~~KACTvC~~,~~WACAwC~~,~~0BAAAA~~,~~QAA0BC~~,~~MAC1BxC~~,~~mCAASwC~~,~~MACT~~,CAACtC,~~QAAQqC~~,~~kCAA0BE~~,~~WACnCtC~~,~~UAAUoC~~,~~0BAA0BpC~~,~~QAAAA~~,~~QACpCH~~,~~mCAASyC~~,~~SACX;AAAA~~,~~MACApB~~;AAAAA,~~MAAyC~~,~~GACrChB~~;AAAAA,MAAMJ;AAAAA,IAAAA,~~CAGA~~;AAAA,EAAA,~~CACsB~~;AAG/~~BiC~~,SAAAA;AACT;;"}
1	+ {"version":3,"file":"VerticalNavigation.cjs","sources":["../../../../src/components/VerticalNavigation/VerticalNavigation.tsx"],"sourcesContent":["import { useDefaultProps } from \"@core/hooks/useDefaultProps\";\n\nimport { useCallback, useEffect, useMemo, useState } from \"react\";\n\nimport { ExtractNames } from \"@core/utils/classes\";\nimport {\n VerticalNavigationContext,\n NavigationData,\n} from \"./VerticalNavigationContext\";\nimport {\n fillDataWithParentId,\n getNavigationItemById,\n getParentItemById,\n} from \"./NavigationSlider/utils\";\nimport { hasChildNavigationItems } from \"./utils/VerticalNavigation.utils\";\n\nimport { staticClasses, useClasses } from \"./VerticalNavigation.styles\";\n\nexport { staticClasses as verticalNavigationClasses };\n\nexport type HvVerticalNavigationClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvVerticalNavigationProps {\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 to the component.\n /\n classes?: HvVerticalNavigationClasses;\n /\n Current State of the Vertical Navigation Collapse\n /\n open?: boolean;\n /\n Collpased Mode for the Vertical Navigation, the default value is \"simple\".\n \n @deprecated - `useIcons` property should be used instead.\n /\n collapsedMode?: HvVerticalNavigationMode;\n /\n Boolean to determine if treeview is in slider mode (for mobile navigation), the default value is false.\n /\n slider?: boolean;\n /\n The content inside the actions container.\n /\n children?: React.ReactNode;\n /\n Boolean to determine if icons should be displayed in the navigation menu.\n * When `true` a icon will always be displayed, if no icon is provided the first letter of the label will be\n * displayed inside an Avatar component.\n * When `false` no icons will be shown, even if an icon is provided.\n /\n useIcons?: boolean;\n}\n\n/\n Navigation enables users to move through an app to complete tasks.\n \n It is recommended to use vertical navigation when your application requires global navigation that is displayed on the left.\n * While vertical navigation menus generally consume more space than their horizontal counterparts, they have become more popular as desktop monitors move to wide-screen formats.\n \n Although both the hierarchically organized data and the visual style resemble a treeview-like structure, the [Treeview Design Pattern](https://w3c.github.io/aria-practices/#TreeView)\n * isn't necessarily the most appropriate.\n \n The tree role provides complex functionality that is not needed for typical site navigation, and changes the most common keyboard navigation using TAB.\n \n The [Disclosure Design Pattern](https://w3c.github.io/aria-practices/#disclosure) is more suited for typical site navigation, with expandable groups of links.\n * However it can be tedious to TAB through all navigation items to reach the actions panel.\n \n Both modes are available via the `mode` property and each app should choose the most appropriate.\n */\nexport const HvVerticalNavigation = (props: HvVerticalNavigationProps) => {\n const {\n id,\n className,\n classes: classesProp,\n\n children,\n\n open = true,\n\n slider = false,\n\n useIcons = false,\n\n ...others\n } = useDefaultProps(\"HvVerticalNavigation\", props);\n const { classes, cx } = useClasses(classesProp);\n\n const [parentData, setParentData] = useState<NavigationData[]>([]);\n\n const [parentSelected, setParentSelected] = useState();\n\n const [headerTitle, setHeaderTitle] = useState<string \| undefined>();\n\n // navigationSlider\n const withParentData = useMemo(\n () => fillDataWithParentId(parentData),\n [parentData]\n );\n\n const initialParentItem = useMemo(\n () => getParentItemById(withParentData, parentSelected),\n [withParentData, parentSelected]\n );\n\n const [parentItem, setParentItem] = useState(initialParentItem);\n\n const hasAnyChildWithData = useMemo(\n () => hasChildNavigationItems(parentData),\n [parentData]\n );\n\n useEffect(\n () => setHeaderTitle(parentItem?.label),\n [parentItem, setParentItem]\n );\n\n const navigateToParentHandler = useCallback(() => {\n setParentItem(getParentItemById(withParentData, parentItem.id));\n }, [parentItem, setParentItem, withParentData]);\n\n const navigateToChildHandler = useCallback(\n (event, item) => {\n setParentItem(getNavigationItemById(withParentData, item.id));\n event.stopPropagation();\n },\n [setParentItem, withParentData]\n );\n\n const value = useMemo(\n () => ({\n isOpen: open,\n useIcons,\n slider,\n headerTitle,\n setHeaderTitle,\n\n parentItem,\n setParentItem,\n withParentData,\n navigateToChildHandler,\n navigateToParentHandler,\n\n parentData,\n setParentData,\n parentSelected,\n setParentSelected,\n hasAnyChildWithData,\n }),\n [\n open,\n useIcons,\n slider,\n headerTitle,\n setHeaderTitle,\n parentItem,\n setParentItem,\n withParentData,\n navigateToChildHandler,\n navigateToParentHandler,\n hasAnyChildWithData,\n parentData,\n parentSelected,\n ]\n );\n\n const content = (\n <VerticalNavigationContext.Provider value={value}>\n <div\n id={id}\n className={cx(\n classes.root,\n {\n [classes.collapsed]: !open,\n [classes.slider]: slider,\n [classes.childData]: hasAnyChildWithData,\n },\n className\n )}\n {...others}\n >\n {children}\n </div>\n </VerticalNavigationContext.Provider>\n );\n\n return content;\n};\n\nexport type HvVerticalNavigationMode = \"icon\" \| \"simple\";\n\nexport type HvVerticalNavigationPosition =\n \| \"static\"\n \| \"relative\"\n \| \"fixed\"\n \| \"absolute\";\n"],"names":["HvVerticalNavigation","props","id","className","classes","classesProp","children","open","slider","useIcons","others","useDefaultProps","cx","useClasses","parentData","setParentData","useState","parentSelected","setParentSelected","headerTitle","setHeaderTitle","withParentData","useMemo","fillDataWithParentId","initialParentItem","getParentItemById","parentItem","setParentItem","hasAnyChildWithData","hasChildNavigationItems","useEffect","label","navigateToParentHandler","useCallback","navigateToChildHandler","event","item","getNavigationItemById","stopPropagation","value","isOpen","content","VerticalNavigationContext","Provider","root","collapsed","childData"],"mappings":";;;;;;;;;AA8EaA,MAAAA,uBAAuBA,CAACC,UAAqC;AAClE,QAAA;AAAA,IACJC;AAAAA,IACAC;AAAAA,IACAC,SAASC;AAAAA,IAETC;AAAAA,IAEAC,OAAO;AAAA,IAEPC,SAAS;AAAA,IAETC,WAAW;AAAA,IAEX,GAAGC;AAAAA,EAAAA,IACDC,gBAAgB,gBAAA,wBAAwBV,KAAK;AAC3C,QAAA;AAAA,IAAEG;AAAAA,IAASQ;AAAAA,EAAAA,IAAOC,0BAAAA,WAAWR,WAAW;AAE9C,QAAM,CAACS,YAAYC,aAAa,IAAIC,MAAAA,SAA2B,CAAE,CAAA;AAEjE,QAAM,CAACC,gBAAgBC,iBAAiB,IAAIF,MAAS,SAAA;AAErD,QAAM,CAACG,aAAaC,cAAc,IAAIJ,MAA6B,SAAA;AAG7DK,QAAAA,iBAAiBC,MAAAA,QACrB,MAAMC,uBAAAA,qBAAqBT,UAAU,GACrC,CAACA,UAAU,CACb;AAEMU,QAAAA,oBAAoBF,cACxB,MAAMG,yCAAkBJ,gBAAgBJ,cAAc,GACtD,CAACI,gBAAgBJ,cAAc,CACjC;AAEA,QAAM,CAACS,YAAYC,aAAa,IAAIX,eAASQ,iBAAiB;AAExDI,QAAAA,sBAAsBN,MAAAA,QAC1B,MAAMO,yBAAAA,wBAAwBf,UAAU,GACxC,CAACA,UAAU,CACb;AAGEgB,kBAAA,MAAMV,eAAeM,yCAAYK,KAAK,GACtC,CAACL,YAAYC,aAAa,CAC5B;AAEMK,QAAAA,0BAA0BC,MAAAA,YAAY,MAAM;AAChDN,kBAAcF,uBAAAA,kBAAkBJ,gBAAgBK,WAAWxB,EAAE,CAAC;AAAA,EAC7D,GAAA,CAACwB,YAAYC,eAAeN,cAAc,CAAC;AAE9C,QAAMa,yBAAyBD,MAAAA,YAC7B,CAACE,OAAOC,SAAS;AACfT,kBAAcU,uBAAAA,sBAAsBhB,gBAAgBe,KAAKlC,EAAE,CAAC;AAC5DiC,UAAMG,gBAAgB;AAAA,EAAA,GAExB,CAACX,eAAeN,cAAc,CAChC;AAEMkB,QAAAA,QAAQjB,MAAAA,QACZ,OAAO;AAAA,IACLkB,QAAQjC;AAAAA,IACRE;AAAAA,IACAD;AAAAA,IACAW;AAAAA,IACAC;AAAAA,IAEAM;AAAAA,IACAC;AAAAA,IACAN;AAAAA,IACAa;AAAAA,IACAF;AAAAA,IAEAlB;AAAAA,IACAC;AAAAA,IACAE;AAAAA,IACAC;AAAAA,IACAU;AAAAA,EAAAA,IAEF,CACErB,MACAE,UACAD,QACAW,aACAC,gBACAM,YACAC,eACAN,gBACAa,wBACAF,yBACAJ,qBACAd,YACAG,cAAc,CAElB;AAEMwB,QAAAA,UACHC,2BAAAA,IAAAA,0BAAAA,0BAA0BC,UAAQ;AAAA,IAACJ;AAAAA,IAAajC,yCAC/C,OAAA;AAAA,MACEJ;AAAAA,MACAC,WAAWS,GACTR,QAAQwC,MACR;AAAA,QACE,CAACxC,QAAQyC,SAAS,GAAG,CAACtC;AAAAA,QACtB,CAACH,QAAQI,MAAM,GAAGA;AAAAA,QAClB,CAACJ,QAAQ0C,SAAS,GAAGlB;AAAAA,SAEvBzB,SACF;AAAA,MAAE,GACEO;AAAAA,MAAMJ;AAAAA,IAAAA,CAGP;AAAA,EAAA,CAC6B;AAG/BmC,SAAAA;AACT;;;"}

package/dist/cjs/components/VerticalNavigation/VerticalNavigation.styles.cjs CHANGED Viewed

@@ -1,27 +1,36 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const _styled = require("@emotion/styled/base");
+const classes = require("../../utils/classes.cjs");
 const uikitStyles = require("@hitachivantara/uikit-styles");
-const verticalNavigationClasses = require("./verticalNavigationClasses.cjs");
-const _interopDefault = (e) => e && e.__esModule ? e : { default: e };
-const _styled__default = /* @__PURE__ */ _interopDefault(_styled);
-const StyledRoot = /* @__PURE__ */ _styled__default.default("div", process.env.NODE_ENV === "production" ? {
-  target: "eyka99t0"
-} : {
-  target: "eyka99t0",
-  label: "StyledRoot"
-})(({
-  hasAnyChildWithData
-}) => ({
-  display: "flex",
-  flexDirection: "column",
-  justifyContent: uikitStyles.theme.verticalNavigation.justifyContent,
-  width: "220px",
-  background: uikitStyles.theme.colors.atmo1,
-  boxShadow: uikitStyles.theme.colors.shadow,
-  clipPath: "inset(0px -12px 0px 0px)",
-  [`&.${verticalNavigationClasses.default.collapsed}`]: {
-    width: hasAnyChildWithData ? "66px" : "56px",
+const {
+  staticClasses,
+  useClasses
+} = classes.createClasses("HvVerticalNavigation", {
+  root: {
+    display: "flex",
+    flexDirection: "column",
+    justifyContent: uikitStyles.theme.verticalNavigation.justifyContent,
+    width: "220px",
+    background: uikitStyles.theme.colors.atmo1,
+    boxShadow: uikitStyles.theme.colors.shadow,
+    clipPath: "inset(0px -12px 0px 0px)",
+    "& > :only-child": {
+      padding: uikitStyles.theme.space.sm
+    },
+    "& > :not(nav:first-of-type)": {
+      borderTop: `3px solid ${uikitStyles.theme.colors.atmo2}`,
+      padding: uikitStyles.theme.spacing(["xs", "sm", "sm", "sm"])
+    },
+    "& > :first-of-type:not(:last-child)": {
+      borderTop: "none",
+      padding: uikitStyles.theme.spacing(["sm", "sm", "xs", "sm"])
+    }
+  },
+  collapsed: {
+    width: "56px",
+    "&$childData": {
+      width: "66px"
+    },
     "& > :first-of-type:not(:last-child)": {
       padding: uikitStyles.theme.spacing(["sm", "xs", "xs", "xs"])
     },
@@ -29,22 +38,13 @@ const StyledRoot = /* @__PURE__ */ _styled__default.default("div", process.env.N
       padding: uikitStyles.theme.spacing(["xs", "xs", "sm", "xs"])
     }
   },
-  "& > :only-child": {
-    padding: uikitStyles.theme.space.sm
-  },
-  "& > :not(nav:first-of-type)": {
-    borderTop: `3px solid ${uikitStyles.theme.colors.atmo2}`,
-    padding: uikitStyles.theme.spacing(["xs", "sm", "sm", "sm"])
-  },
-  "& > :first-of-type:not(:last-child)": {
-    borderTop: "none",
-    padding: uikitStyles.theme.spacing(["sm", "sm", "xs", "sm"])
-  },
-  [`&.${verticalNavigationClasses.default.slider}`]: {
+  slider: {
     "& > div:first-of-type": {
       borderBottom: `3px solid ${uikitStyles.theme.colors.atmo2}`
     }
-  }
-}), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi9ob21lL3J1bm5lci93b3JrL2h2LXVpa2l0LXJlYWN0L2h2LXVpa2l0LXJlYWN0L3BhY2thZ2VzL2NvcmUvc3JjL2NvbXBvbmVudHMvVmVydGljYWxOYXZpZ2F0aW9uL1ZlcnRpY2FsTmF2aWdhdGlvbi5zdHlsZXMudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQVEwQiIsImZpbGUiOiIvaG9tZS9ydW5uZXIvd29yay9odi11aWtpdC1yZWFjdC9odi11aWtpdC1yZWFjdC9wYWNrYWdlcy9jb3JlL3NyYy9jb21wb25lbnRzL1ZlcnRpY2FsTmF2aWdhdGlvbi9WZXJ0aWNhbE5hdmlnYXRpb24uc3R5bGVzLnRzeCIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCBzdHlsZWQgZnJvbSBcIkBlbW90aW9uL3N0eWxlZFwiO1xuaW1wb3J0IHsgdGhlbWUgfSBmcm9tIFwiQGhpdGFjaGl2YW50YXJhL3Vpa2l0LXN0eWxlc1wiO1xuaW1wb3J0IHZlcnRpY2FsTmF2aWdhdGlvbkNsYXNzZXMgZnJvbSBcIi4vdmVydGljYWxOYXZpZ2F0aW9uQ2xhc3Nlc1wiO1xuXG5pbnRlcmZhY2UgU3R5bGVkUm9vdFByb3BzIHtcbiAgaGFzQW55Q2hpbGRXaXRoRGF0YTogYm9vbGVhbjtcbn1cblxuZXhwb3J0IGNvbnN0IFN0eWxlZFJvb3QgPSBzdHlsZWQoXCJkaXZcIikoXG4gICh7IGhhc0FueUNoaWxkV2l0aERhdGEgfTogU3R5bGVkUm9vdFByb3BzKSA9PiAoe1xuICAgIGRpc3BsYXk6IFwiZmxleFwiLFxuICAgIGZsZXhEaXJlY3Rpb246IFwiY29sdW1uXCIsXG4gICAganVzdGlmeUNvbnRlbnQ6IHRoZW1lLnZlcnRpY2FsTmF2aWdhdGlvbi5qdXN0aWZ5Q29udGVudCxcblxuICAgIHdpZHRoOiBcIjIyMHB4XCIsXG5cbiAgICBiYWNrZ3JvdW5kOiB0aGVtZS5jb2xvcnMuYXRtbzEsXG4gICAgYm94U2hhZG93OiB0aGVtZS5jb2xvcnMuc2hhZG93LFxuICAgIGNsaXBQYXRoOiBcImluc2V0KDBweCAtMTJweCAwcHggMHB4KVwiLFxuXG4gICAgW2AmLiR7dmVydGljYWxOYXZpZ2F0aW9uQ2xhc3Nlcy5jb2xsYXBzZWR9YF06IHtcbiAgICAgIHdpZHRoOiBoYXNBbnlDaGlsZFdpdGhEYXRhID8gXCI2NnB4XCIgOiBcIjU2cHhcIixcblxuICAgICAgXCImID4gOmZpcnN0LW9mLXR5cGU6bm90KDpsYXN0LWNoaWxkKVwiOiB7XG4gICAgICAgIHBhZGRpbmc6IHRoZW1lLnNwYWNpbmcoW1wic21cIiwgXCJ4c1wiLCBcInhzXCIsIFwieHNcIl0pLFxuICAgICAgfSxcblxuICAgICAgXCImID4gOm5vdChuYXY6Zmlyc3Qtb2YtdHlwZSlcIjoge1xuICAgICAgICBwYWRkaW5nOiB0aGVtZS5zcGFjaW5nKFtcInhzXCIsIFwieHNcIiwgXCJzbVwiLCBcInhzXCJdKSxcbiAgICAgIH0sXG4gICAgfSxcblxuICAgIFwiJiA+IDpvbmx5LWNoaWxkXCI6IHtcbiAgICAgIHBhZGRpbmc6IHRoZW1lLnNwYWNlLnNtLFxuICAgIH0sXG4gICAgXCImID4gOm5vdChuYXY6Zmlyc3Qtb2YtdHlwZSlcIjoge1xuICAgICAgYm9yZGVyVG9wOiBgM3B4IHNvbGlkICR7dGhlbWUuY29sb3JzLmF0bW8yfWAsXG4gICAgICBwYWRkaW5nOiB0aGVtZS5zcGFjaW5nKFtcInhzXCIsIFwic21cIiwgXCJzbVwiLCBcInNtXCJdKSxcbiAgICB9LFxuXG4gICAgXCImID4gOmZpcnN0LW9mLXR5cGU6bm90KDpsYXN0LWNoaWxkKVwiOiB7XG4gICAgICBib3JkZXJUb3A6IFwibm9uZVwiLFxuICAgICAgcGFkZGluZzogdGhlbWUuc3BhY2luZyhbXCJzbVwiLCBcInNtXCIsIFwieHNcIiwgXCJzbVwiXSksXG4gICAgfSxcblxuICAgIFtgJi4ke3ZlcnRpY2FsTmF2aWdhdGlvbkNsYXNzZXMuc2xpZGVyfWBdOiB7XG4gICAgICBcIiYgPiBkaXY6Zmlyc3Qtb2YtdHlwZVwiOiB7XG4gICAgICAgIGJvcmRlckJvdHRvbTogYDNweCBzb2xpZCAke3RoZW1lLmNvbG9ycy5hdG1vMn1gLFxuICAgICAgfSxcbiAgICB9LFxuICB9KVxuKTtcbiJdfQ== */");
-exports.StyledRoot = StyledRoot;
+  },
+  childData: {}
+});
+exports.staticClasses = staticClasses;
+exports.useClasses = useClasses;
 //# sourceMappingURL=VerticalNavigation.styles.cjs.map

package/dist/cjs/components/VerticalNavigation/VerticalNavigation.styles.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"VerticalNavigation.styles.cjs","sources":["../../../../src/components/VerticalNavigation/VerticalNavigation.styles.tsx"],"sourcesContent":["import ~~styled~~ from \"@~~emotion~~/~~styled~~\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\~~nimport verticalNavigationClasses from \"./verticalNavigationClasses\";\~~n\~~ninterface~~ ~~StyledRootProps~~ {~~\n hasAnyChildWithData:~~ ~~boolean;\n}\n\nexport~~ ~~const~~ ~~StyledRoot~~ = ~~styled~~(\"~~div~~\"~~)(\~~n ({ ~~hasAnyChildWithData }~~: ~~StyledRootProps) => (~~{\n display: \"flex\",\n flexDirection: \"column\",\n justifyContent: theme.verticalNavigation.justifyContent,\n\n width: \"220px\",\n\n background: theme.colors.atmo1,\n boxShadow: theme.colors.shadow,\n clipPath: \"inset(0px -12px 0px 0px)\",\n\n ~~[`&.${verticalNavigationClasses.collapsed}`]: {~~\~~n width:~~ ~~hasAnyChildWithData~~ ? \"~~66px~~\" : ~~\"56px\"~~,\n\n \"& > :first-of-type~~:not(:last-child~~)\": {\n padding: theme.spacing([\"sm\", \"xs\", \"xs\", \"xs\"]),\n },\n\n \"& > :~~not(nav:~~first-of-type)\": {\n padding: theme.spacing([\"xs\", \"xs\", \"sm\", \"xs\"]),\n },\n },\n\n \"~~& > :only-child~~\": {\n ~~padding~~: ~~theme.space.sm~~,\n },\n \"& > :~~not(nav:~~first-of-type)\": {\n ~~borderTop: `3px solid ${theme.colors.atmo2}`,\n~~ padding: theme.spacing([\"xs\", \"sm\", \"sm\", \"sm\"]),\n },\n\n \"& > :first-of-type~~:not(:last-child~~)\": {\n ~~borderTop: \"none\",\n~~ padding: theme.spacing([\"sm\", \"sm\", \"xs\", \"sm\"]),\n },\n\n ~~[`&.${verticalNavigationClasses.~~slider~~}`]~~: {\n \"& > div:first-of-type\": {\n borderBottom: `3px solid ${theme.colors.atmo2}`,\n },\n },\n })\n);\n"],"names":["~~StyledRoot~~","~~_styled~~","~~process~~","~~env~~","~~NODE_ENV","target","label","hasAnyChildWithData","~~display","flexDirection","justifyContent","theme","verticalNavigation","width","background","colors","atmo1","boxShadow","shadow","clipPath","~~verticalNavigationClasses~~","~~collapsed~~","~~padding~~","~~spacing~~","~~space~~","sm","~~borderTop~~","~~atmo2~~","~~slider~~","~~borderBottom~~"],"mappings":"~~;;;;;;;AAQO~~,~~MAAMA,aAAoBC,iCAAA,QAAA,OAAKC,QAAAC,IAAAC,aAAA,eAAA~~;AAAA,~~EAAAC,QAAA~~;~~AAAA~~,~~IAAA~~;~~AAAA~~,~~EAAAA~~,~~QAAA;AAAA~~,~~EAAAC~~,~~OAAA~~;AAAA,~~CAAA~~,~~EACpC,CAAC~~;AAAA,~~EAAEC;AAAqC~~,~~OAAO;AAAA,EAC7CC,~~SAAS;AAAA,~~EACTC~~,eAAe;AAAA,~~EACfC~~,gBAAgBC,YAAAA,MAAMC,mBAAmBF;AAAAA,~~EAEzCG~~,OAAO;AAAA,~~EAEPC~~,YAAYH,YAAAA,MAAMI,OAAOC;AAAAA,~~EACzBC~~,WAAWN,YAAAA,MAAMI,OAAOG;AAAAA,~~EACxBC~~,UAAU;AAAA,~~EAEV~~,~~CAAE~~,~~KAAIC~~,~~kCAA0BC~~,~~WAAW~~,~~GAAG~~;AAAA,~~IAC5CR~~,~~OAAON~~,~~sBAAsB~~,~~SAAS;AAAA~~,~~IAEtC~~,~~uCAAuC~~;~~AAAA~~,~~MACrCe~~,~~SAASX~~,~~kBAAMY~~,QAAQ,CAAC,MAAM,MAAM,MAAM,IAAI,CAAC;AAAA,IACjD;AAAA,IAEA~~,+BAA+B~~;AAAA,~~MAC7BD~~,~~SAASX~~,~~kBAAMY~~,QAAQ,CAAC,MAAM,MAAM,MAAM,IAAI,CAAC;AAAA,IACjD;AAAA,EACF;AAAA,~~EAEA~~,~~mBAAmB~~;AAAA,~~IACjBD~~,~~SAASX~~,~~YAAAA~~,~~MAAMa,MAAMC~~;~~AAAAA~~,~~EACvB~~;AAAA,~~EACA,+BAA+B~~;AAAA,~~IAC7BC~~,~~WAAY,aAAYf,YAAAA,MAAMI,OAAOY~~;~~AAAAA~~,~~IACrCL~~,~~SAASX~~,~~kBAAMY~~,QAAQ,CAAC,MAAM,MAAM,MAAM,IAAI,CAAC;AAAA,~~EACjD~~;AAAA,~~EAEA,uCAAuC~~;AAAA,~~IACrCG~~,~~WAAW;AAAA~~,~~IACXJ~~,~~SAASX,kBAAMY,~~QAAQ,CAAC,MAAM,MAAM,MAAM,IAAI,CAAC;AAAA,~~EACjD~~;AAAA,~~EAEA~~,~~CAAE~~,~~KAAIH,kCAA0BQ,~~QAAQ~~,GAAG~~;AAAA,~~IACzC~~,yBAAyB;AAAA,MACvBC,cAAe,~~aAAYlB~~,YAAAA,MAAMI,~~OAAOY~~;AAAAA,IAC1C;AAAA,EACF;~~AACF~~,~~IAAEzB~~,~~QAAAC~~,~~IAAAC~~,~~siFACJ;;~~"}
1	+ {"version":3,"file":"VerticalNavigation.styles.cjs","sources":["../../../../src/components/VerticalNavigation/VerticalNavigation.styles.tsx"],"sourcesContent":["import { createClasses } from \"@core/utils/classes\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nexport const { staticClasses, useClasses } = createClasses(\n \"HvVerticalNavigation\",\n {\n root: {\n display: \"flex\",\n flexDirection: \"column\",\n justifyContent: theme.verticalNavigation.justifyContent,\n\n width: \"220px\",\n\n background: theme.colors.atmo1,\n boxShadow: theme.colors.shadow,\n clipPath: \"inset(0px -12px 0px 0px)\",\n\n \"& > :only-child\": {\n padding: theme.space.sm,\n },\n \"& > :not(nav:first-of-type)\": {\n borderTop: `3px solid ${theme.colors.atmo2}`,\n padding: theme.spacing([\"xs\", \"sm\", \"sm\", \"sm\"]),\n },\n\n \"& > :first-of-type:not(:last-child)\": {\n borderTop: \"none\",\n padding: theme.spacing([\"sm\", \"sm\", \"xs\", \"sm\"]),\n },\n },\n collapsed: {\n width: \"56px\",\n \"&$childData\": {\n width: \"66px\",\n },\n \"& > :first-of-type:not(:last-child)\": {\n padding: theme.spacing([\"sm\", \"xs\", \"xs\", \"xs\"]),\n },\n\n \"& > :not(nav:first-of-type)\": {\n padding: theme.spacing([\"xs\", \"xs\", \"sm\", \"xs\"]),\n },\n },\n\n slider: {\n \"& > div:first-of-type\": {\n borderBottom: `3px solid ${theme.colors.atmo2}`,\n },\n },\n\n childData: {},\n }\n);\n"],"names":["staticClasses","useClasses","createClasses","root","display","flexDirection","justifyContent","theme","verticalNavigation","width","background","colors","atmo1","boxShadow","shadow","clipPath","padding","space","sm","borderTop","atmo2","spacing","collapsed","slider","borderBottom","childData"],"mappings":";;;;AAGa,MAAA;AAAA,EAAEA;AAAAA,EAAeC;AAAW,IAAIC,QAAAA,cAC3C,wBACA;AAAA,EACEC,MAAM;AAAA,IACJC,SAAS;AAAA,IACTC,eAAe;AAAA,IACfC,gBAAgBC,YAAAA,MAAMC,mBAAmBF;AAAAA,IAEzCG,OAAO;AAAA,IAEPC,YAAYH,YAAAA,MAAMI,OAAOC;AAAAA,IACzBC,WAAWN,YAAAA,MAAMI,OAAOG;AAAAA,IACxBC,UAAU;AAAA,IAEV,mBAAmB;AAAA,MACjBC,SAAST,YAAAA,MAAMU,MAAMC;AAAAA,IACvB;AAAA,IACA,+BAA+B;AAAA,MAC7BC,WAAY,aAAYZ,YAAAA,MAAMI,OAAOS;AAAAA,MACrCJ,SAAST,kBAAMc,QAAQ,CAAC,MAAM,MAAM,MAAM,IAAI,CAAC;AAAA,IACjD;AAAA,IAEA,uCAAuC;AAAA,MACrCF,WAAW;AAAA,MACXH,SAAST,kBAAMc,QAAQ,CAAC,MAAM,MAAM,MAAM,IAAI,CAAC;AAAA,IACjD;AAAA,EACF;AAAA,EACAC,WAAW;AAAA,IACTb,OAAO;AAAA,IACP,eAAe;AAAA,MACbA,OAAO;AAAA,IACT;AAAA,IACA,uCAAuC;AAAA,MACrCO,SAAST,kBAAMc,QAAQ,CAAC,MAAM,MAAM,MAAM,IAAI,CAAC;AAAA,IACjD;AAAA,IAEA,+BAA+B;AAAA,MAC7BL,SAAST,kBAAMc,QAAQ,CAAC,MAAM,MAAM,MAAM,IAAI,CAAC;AAAA,IACjD;AAAA,EACF;AAAA,EAEAE,QAAQ;AAAA,IACN,yBAAyB;AAAA,MACvBC,cAAe,aAAYjB,YAAAA,MAAMI,OAAOS;AAAAA,IAC1C;AAAA,EACF;AAAA,EAEAK,WAAW,CAAC;AACd,CACF;;;"}

package/dist/cjs/index.cjs CHANGED Viewed

@@ -215,21 +215,21 @@ const Calendar_styles = require("./components/Calendar/Calendar.styles.cjs");
 const Calendar = require("./components/Calendar/Calendar.cjs");
 const CalendarHeader_styles = require("./components/Calendar/CalendarHeader/CalendarHeader.styles.cjs");
 const CalendarHeader = require("./components/Calendar/CalendarHeader/CalendarHeader.cjs");
-const verticalNavigationClasses = require("./components/VerticalNavigation/verticalNavigationClasses.cjs");
+const VerticalNavigation_styles = require("./components/VerticalNavigation/VerticalNavigation.styles.cjs");
 const VerticalNavigation = require("./components/VerticalNavigation/VerticalNavigation.cjs");
-const headerClasses = require("./components/VerticalNavigation/Header/headerClasses.cjs");
+const Header_styles$2 = require("./components/VerticalNavigation/Header/Header.styles.cjs");
 const Header$2 = require("./components/VerticalNavigation/Header/Header.cjs");
-const actionClasses = require("./components/VerticalNavigation/Actions/actionClasses.cjs");
-const actionsClasses = require("./components/VerticalNavigation/Actions/actionsClasses.cjs");
+const Actions_styles$2 = require("./components/VerticalNavigation/Actions/Actions.styles.cjs");
 const Actions$2 = require("./components/VerticalNavigation/Actions/Actions.cjs");
+const Action_styles$1 = require("./components/VerticalNavigation/Actions/Action.styles.cjs");
 const Action$1 = require("./components/VerticalNavigation/Actions/Action.cjs");
-const navigationClasses = require("./components/VerticalNavigation/Navigation/navigationClasses.cjs");
+const Navigation_styles$1 = require("./components/VerticalNavigation/Navigation/Navigation.styles.cjs");
 const Navigation$1 = require("./components/VerticalNavigation/Navigation/Navigation.cjs");
-const navigationSliderClasses = require("./components/VerticalNavigation/NavigationSlider/navigationSliderClasses.cjs");
+const NavigationSlider_styles = require("./components/VerticalNavigation/NavigationSlider/NavigationSlider.styles.cjs");
 const NavigationSlider = require("./components/VerticalNavigation/NavigationSlider/NavigationSlider.cjs");
-const treeViewClasses = require("./components/VerticalNavigation/TreeView/treeViewClasses.cjs");
-const treeViewItemClasses = require("./components/VerticalNavigation/TreeView/treeViewItemClasses.cjs");
+const TreeView_styles = require("./components/VerticalNavigation/TreeView/TreeView.styles.cjs");
 const TreeView = require("./components/VerticalNavigation/TreeView/TreeView.cjs");
+const TreeViewItem_styles = require("./components/VerticalNavigation/TreeView/TreeViewItem.styles.cjs");
 const TreeViewItem = require("./components/VerticalNavigation/TreeView/TreeViewItem.cjs");
 const VerticalNavigationContext = require("./components/VerticalNavigation/VerticalNavigationContext.cjs");
 const Slider_styles = require("./components/Slider/Slider.styles.cjs");
@@ -571,21 +571,21 @@ exports.calendarClasses = Calendar_styles.staticClasses;
 exports.HvCalendar = Calendar.HvCalendar;
 exports.calendarHeaderClasses = CalendarHeader_styles.staticClasses;
 exports.HvCalendarHeader = CalendarHeader.HvCalendarHeader;
-exports.verticalNavigationClasses = verticalNavigationClasses.default;
+exports.verticalNavigationClasses = VerticalNavigation_styles.staticClasses;
 exports.HvVerticalNavigation = VerticalNavigation.HvVerticalNavigation;
-exports.verticalNavigationHeaderClasses = headerClasses.default;
+exports.verticalNavigationHeaderClasses = Header_styles$2.staticClasses;
 exports.HvVerticalNavigationHeader = Header$2.HvVerticalNavigationHeader;
-exports.actionClasses = actionClasses.default;
-exports.actionsClasses = actionsClasses.default;
+exports.actionsClasses = Actions_styles$2.staticClasses;
 exports.HvVerticalNavigationActions = Actions$2.HvVerticalNavigationActions;
+exports.actionClasses = Action_styles$1.staticClasses;
 exports.HvVerticalNavigationAction = Action$1.HvVerticalNavigationAction;
-exports.verticalNavigationTreeClasses = navigationClasses.default;
+exports.verticalNavigationTreeClasses = Navigation_styles$1.staticClasses;
 exports.HvVerticalNavigationTree = Navigation$1.HvVerticalNavigationTree;
-exports.verticalNavigationSliderClasses = navigationSliderClasses.default;
+exports.verticalNavigationSliderClasses = NavigationSlider_styles.staticClasses;
 exports.HvVerticalNavigationSlider = NavigationSlider.HvVerticalNavigationSlider;
-exports.treeViewClasses = treeViewClasses.default;
-exports.treeViewItemClasses = treeViewItemClasses.default;
+exports.treeViewClasses = TreeView_styles.staticClasses;
 exports.HvVerticalNavigationTreeView = TreeView.HvVerticalNavigationTreeView;
+exports.treeViewItemClasses = TreeViewItem_styles.staticClasses;
 exports.HvVerticalNavigationTreeViewItem = TreeViewItem.HvVerticalNavigationTreeViewItem;
 exports.VerticalNavigationContext = VerticalNavigationContext.VerticalNavigationContext;
 exports.sliderClasses = Slider_styles.staticClasses;

package/dist/esm/components/BaseDropdown/BaseDropdown.js CHANGED Viewed

@@ -31,12 +31,12 @@ const HvBaseDropdown = (props) => {
     adornment,
     expanded,
     dropdownHeaderProps,
-    defaultExpanded = false,
-    disabled = false,
-    readOnly = false,
-    required = false,
-    disablePortal = false,
-    variableWidth = false,
+    defaultExpanded,
+    disabled,
+    readOnly,
+    required,
+    disablePortal,
+    variableWidth,
     placement = "right",
     popperProps = {},
     dropdownHeaderRef: dropdownHeaderRefProp,

package/dist/esm/components/BaseDropdown/BaseDropdown.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"BaseDropdown.js","sources":["../../../../src/components/BaseDropdown/BaseDropdown.tsx"],"sourcesContent":["import React, {\n useMemo,\n useState,\n useCallback,\n KeyboardEventHandler,\n} from \"react\";\n\nimport { createPortal } from \"react-dom\";\n\nimport {\n ClickAwayListener,\n ClickAwayListenerProps,\n PopperPlacementType,\n PopperProps,\n} from \"@mui/material\";\n\nimport { theme } from \"@hitachivantara/uikit-styles\";\nimport { DropDownXS, DropUpXS } from \"@hitachivantara/uikit-react-icons\";\n\nimport { usePopper } from \"react-popper\";\nimport { detectOverflow, ModifierArguments, Options } from \"@popperjs/core\";\n\nimport { HvTypography } from \"@core/components/Typography\";\nimport { useUniqueId } from \"@core/hooks/useUniqueId\";\nimport { useTheme } from \"@core/hooks/useTheme\";\nimport { useForkRef } from \"@core/hooks/useForkRef\";\nimport { useControlled } from \"@core/hooks/useControlled\";\nimport { useDefaultProps } from \"@core/hooks/useDefaultProps\";\nimport { isKey, isOneOfKeys } from \"@core/utils/keyboardUtils\";\nimport { setId } from \"@core/utils/setId\";\nimport { getFirstAndLastFocus } from \"@core/utils/focusableElementFinder\";\nimport { HvBaseProps } from \"@core/types/generic\";\nimport { ExtractNames } from \"@core/utils/classes\";\n\nimport { staticClasses, useClasses } from \"./BaseDropdown.styles\";\nimport BaseDropdownContext from \"./BaseDropdownContext\";\n\nexport { staticClasses as baseDropdownClasses };\n\nexport type HvBaseDropdownClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvBaseDropdownProps\n extends HvBaseProps<HTMLDivElement, \"placeholder\"> {\n /*\n The role of the element that triggers the popup.\n \n Defaults to \"combobox\" if `component` and the default\n * \"textbox\" header is used, undefined otherwise.\n /\n role?: string;\n /\n Header placeholder.\n /\n placeholder?: string \| React.ReactNode;\n /\n If `true` the dropdown is disabled unable to be interacted, if `false` it is enabled.\n /\n disabled?: boolean;\n /\n If `true` the dropdown will be in read only mode, unable to be interacted.\n /\n readOnly?: boolean;\n /\n Indicates that user input is required on the form element.\n /\n required?: boolean;\n /\n Disable the portal behavior.\n * The children stay within it's parent DOM hierarchy.\n /\n disablePortal?: boolean;\n /\n If `true` the dropdown width depends size of content if `false` the width depends on the header size.\n * Defaults to `false`.\n /\n variableWidth?: boolean;\n /\n If `true` the dropdown starts opened if `false` it starts closed.\n /\n expanded?: boolean;\n /\n When uncontrolled, defines the initial expanded state.\n /\n defaultExpanded?: boolean;\n /\n An object containing props to be wired to the popper component.\n /\n popperProps?: Partial<PopperProps>;\n /\n Placement of the dropdown.\n /\n placement?: \"left\" \| \"right\";\n /\n Replacement for the header component.\n /\n component?: React.ReactNode;\n /\n Adornment to replace the default arrows.\n /\n adornment?: React.ReactNode;\n /\n When dropdown changes the expanded state.\n /\n onToggle?: (event: Event, open: boolean) => void;\n /\n When user click outside the open container.\n /\n onClickOutside?: (event: Event) => void;\n /\n Callback called when the dropdown is opened and ready,\n * commonly used to set focus to the content.\n /\n onContainerCreation?: (container: HTMLElement \| null) => void;\n /\n Attributes applied to the dropdown header element.\n /\n dropdownHeaderProps?: React.DetailedHTMLProps<\n React.HTMLAttributes<HTMLDivElement>,\n HTMLDivElement\n >;\n /\n Pass a ref to the dropdown header element.\n /\n dropdownHeaderRef?: React.Ref<any>;\n /\n A Jss Object used to override or extend the component styles applied.\n /\n classes?: HvBaseDropdownClasses;\n}\n\nexport const HvBaseDropdown = (props: HvBaseDropdownProps) => {\n const {\n id,\n className,\n classes: classesProp,\n children,\n role,\n placeholder,\n component,\n adornment,\n expanded,\n dropdownHeaderProps,\n defaultExpanded = false,\n disabled = false,\n readOnly = false,\n required = false,\n disablePortal = false,\n variableWidth = false,\n placement = \"right\",\n popperProps = {},\n dropdownHeaderRef: dropdownHeaderRefProp,\n onToggle,\n onClickOutside,\n onContainerCreation,\n \"aria-expanded\": ariaExpandedProp,\n ...others\n } = useDefaultProps(\"HvBaseDropdown\", props);\n const { classes, cx } = useClasses(classesProp);\n\n const { rootId } = useTheme();\n\n const [isOpen, setIsOpen] = useControlled(expanded, Boolean(defaultExpanded));\n\n const [referenceElement, setReferenceElement] = useState<HTMLElement \| null>(\n null\n );\n const [popperElement, setPopperElement] = useState<HTMLElement \| null>(null);\n const [popperMaxSize, setPopperMaxSize] = useState<{\n width?: number;\n height?: number;\n }>({});\n\n const handleDropdownHeaderRefProp = useForkRef(\n dropdownHeaderRefProp,\n dropdownHeaderProps?.ref\n );\n const handleDropdownHeaderRef = useForkRef(\n setReferenceElement,\n handleDropdownHeaderRefProp\n );\n\n const ariaRole = role \|\| (component == null ? \"combobox\" : undefined);\n\n const ariaExpanded = ariaExpandedProp ?? (ariaRole ? !!isOpen : undefined);\n\n const elementId = useUniqueId(id, \"hvbasedropdown\");\n\n const bottom: PopperPlacementType =\n placement && `bottom-${placement === \"right\" ? \"start\" : \"end\"}`;\n\n const extensionWidth = referenceElement\n ? referenceElement?.offsetWidth\n : \"inherit\";\n\n const { modifiers: popperPropsModifiers = [], ...otherPopperProps } =\n popperProps;\n\n const onFirstUpdate = useCallback(() => {\n if (onContainerCreation) onContainerCreation(popperElement);\n }, [onContainerCreation, popperElement]);\n\n const widthCalculator = useCallback(\n ({ state }: ModifierArguments<Options>) => {\n state.styles.popper.width = `${state.rects.reference.width}px`;\n },\n []\n );\n\n const widthCalculatorEffect = useCallback(\n ({ state }: ModifierArguments<Options>) => {\n state.elements.popper.style.width = `${\n (state.elements.reference as any).offsetWidth\n }px`;\n },\n []\n );\n\n const applyMaxSizeCalculator = useCallback(\n ({ state }: ModifierArguments<Options>) => {\n // The `maxSize` modifier provides this data\n const { width, height } = state.modifiersData.maxSize;\n if (width !== popperMaxSize?.width \|\| height !== popperMaxSize?.height) {\n setPopperMaxSize({ width, height });\n }\n\n state.styles.popper = {\n ...state.styles.popper,\n maxWidth: `${width}px`,\n maxHeight: `${height}px`,\n };\n },\n [popperMaxSize]\n );\n\n const maxSizeCalculator = useCallback(\n ({ state, name, options }: ModifierArguments<Options>) => {\n const overflow = detectOverflow(state, options);\n\n const x = state.modifiersData.preventOverflow?.x \|\| 0;\n const y = state.modifiersData.preventOverflow?.y \|\| 0;\n\n const popperWidth = state.rects.popper.width;\n const popperHeight = state.rects.popper.height;\n\n const basePlacement = state.placement.split(\"-\")[0];\n\n const widthProp = basePlacement === \"left\" ? \"left\" : \"right\";\n const heightProp = basePlacement === \"top\" ? \"top\" : \"bottom\";\n\n state.modifiersData[name] = {\n width: popperWidth - overflow[widthProp] - x,\n height: popperHeight - overflow[heightProp] - y,\n };\n },\n []\n );\n\n const modifiers: PopperProps[\"modifiers\"] = useMemo(\n () => [\n {\n name: \"variableWidth\",\n enabled: !variableWidth,\n phase: \"beforeWrite\",\n requires: [\"computeStyles\"],\n fn: widthCalculator,\n effect: widthCalculatorEffect,\n },\n {\n name: \"maxSize\",\n enabled: true,\n phase: \"main\",\n requiresIfExists: [\"offset\", \"preventOverflow\", \"flip\"],\n fn: maxSizeCalculator,\n },\n {\n name: \"applyMaxSize\",\n enabled: true,\n phase: \"beforeWrite\",\n requires: [\"maxSize\"],\n fn: applyMaxSizeCalculator,\n },\n ...popperPropsModifiers,\n ],\n [\n maxSizeCalculator,\n applyMaxSizeCalculator,\n popperPropsModifiers,\n variableWidth,\n widthCalculator,\n widthCalculatorEffect,\n ]\n );\n\n const { styles: popperStyles, attributes } = usePopper(\n referenceElement,\n popperElement,\n {\n placement: bottom,\n modifiers,\n onFirstUpdate,\n ...otherPopperProps,\n }\n );\n\n const popperPlacement =\n attributes.popper?.[\"data-popper-placement\"] ?? \"bottom\";\n\n const handleToggle = useCallback(\n (event) => {\n if (event && !isKey(event, \"Tab\")) {\n event.preventDefault();\n }\n\n const notControlKey =\n !!event?.code &&\n !isOneOfKeys(event, [\"Tab\", \"Enter\", \"Esc\", \"ArrowDown\", \"Space\"]);\n\n const ignoredCombinations =\n (isKey(event, \"Esc\") && !isOpen) \|\|\n (isKey(event, \"ArrowDown\") && isOpen) \|\|\n (isKey(event, \"Tab\") && !isOpen);\n\n if (disabled \|\| notControlKey \|\| ignoredCombinations) return;\n\n const newOpen = !isOpen;\n\n / If about to close focus on the header component. /\n const focusHeader = () => {\n if (!newOpen) {\n // Focus-ring won't be visible even if using the keyboard:\n // https://github.com/WICG/focus-visible/issues/88\n referenceElement?.focus({ preventScroll: true });\n }\n\n return newOpen;\n };\n setIsOpen(focusHeader());\n\n onToggle?.(event, newOpen);\n },\n [isOpen, disabled, setIsOpen, onToggle, referenceElement]\n );\n\n const headerComponent = (() => {\n if (component) {\n return React.cloneElement(component as React.ReactElement, {\n ref: handleDropdownHeaderRef,\n \"aria-controls\": isOpen\n ? setId(elementId, \"children-container\")\n : undefined,\n });\n }\n\n const ExpanderComponent = isOpen ? DropUpXS : DropDownXS;\n\n return (\n <div\n id={setId(id, \"header\")}\n className={cx(classes.header, {\n [classes.headerDisabled]: disabled,\n [classes.headerReadOnly]: readOnly,\n [classes.headerOpen]: isOpen,\n [classes.headerOpenUp]: isOpen && popperPlacement.includes(\"top\"),\n [classes.headerOpenDown]:\n isOpen && popperPlacement.includes(\"bottom\"),\n })}\n role={ariaRole === \"combobox\" ? \"textbox\" : undefined}\n style={disabled \|\| readOnly ? { pointerEvents: \"none\" } : undefined}\n aria-controls={\n isOpen ? setId(elementId, \"children-container\") : undefined\n }\n aria-label={others[\"aria-label\"] ?? undefined}\n aria-labelledby={others[\"aria-labelledby\"] ?? undefined}\n aria-required={required ?? undefined}\n aria-readonly={readOnly ?? undefined}\n // Removes the element from the navigation sequence for keyboard focus if disabled\n tabIndex={disabled ? -1 : 0}\n ref={handleDropdownHeaderRef}\n {...dropdownHeaderProps}\n >\n <div className={classes.selection}>\n {placeholder && typeof placeholder === \"string\" ? (\n <HvTypography\n className={cx(classes.placeholder, {\n [classes.selectionDisabled]: disabled,\n })}\n variant=\"body\"\n >\n {placeholder}\n </HvTypography>\n ) : (\n placeholder\n )}\n </div>\n <div className={classes.arrowContainer}>\n {adornment \|\| (\n <ExpanderComponent\n iconSize=\"XS\"\n color={disabled ? theme.colors.secondary_60 : undefined}\n className={classes.arrow}\n />\n )}\n </div>\n </div>\n );\n })();\n\n const containerComponent = (() => {\n /\n Handle keyboard inside children container.\n /\n const handleContainerKeyDown: KeyboardEventHandler = (event) => {\n if (isKey(event, \"Esc\")) {\n handleToggle(event);\n }\n if (isKey(event, \"Tab\") && !event.shiftKey) {\n const focusList = getFirstAndLastFocus(popperElement);\n if (document.activeElement === focusList?.last) {\n event.preventDefault();\n focusList?.first?.focus();\n }\n }\n };\n\n const handleOutside: ClickAwayListenerProps[\"onClickAway\"] = (event) => {\n const isButtonClick = referenceElement?.contains(event.target as any);\n if (!isButtonClick) {\n onClickOutside?.(event);\n setIsOpen(false);\n onToggle?.(event, false);\n }\n };\n\n const container = (\n <div\n role=\"tooltip\"\n ref={setPopperElement}\n className={classes.container}\n style={popperStyles.popper}\n {...attributes.popper}\n >\n <ClickAwayListener onClickAway={handleOutside}>\n {/ eslint-disable-next-line jsx-a11y/no-static-element-interactions */}\n <div onKeyDown={handleContainerKeyDown}>\n {popperPlacement.includes(\"bottom\") && (\n <div\n style={{ width: extensionWidth }}\n className={cx(classes.inputExtensionOpen, {\n [classes.inputExtensionLeftPosition]:\n popperPlacement.includes(\"end\"),\n })}\n />\n )}\n <BaseDropdownContext.Provider value={popperMaxSize}>\n <div\n id={setId(elementId, \"children-container\")}\n className={cx(classes.panel, {\n [classes.panelOpenedUp]: popperPlacement.includes(\"top\"),\n [classes.panelOpenedDown]: popperPlacement.includes(\"bottom\"),\n })}\n >\n {children}\n </div>\n </BaseDropdownContext.Provider>\n {popperPlacement.includes(\"top\") && (\n <div\n style={{ width: extensionWidth }}\n className={cx(\n classes.inputExtensionOpen,\n classes.inputExtensionOpenShadow,\n {\n [classes.inputExtensionFloatRight]:\n popperPlacement.includes(\"end\"),\n [classes.inputExtensionFloatLeft]:\n popperPlacement.includes(\"start\"),\n }\n )}\n />\n )}\n </div>\n </ClickAwayListener>\n </div>\n );\n\n if (disablePortal) return container;\n\n return createPortal(\n container,\n document.getElementById(rootId \|\| \"\") \|\| document.body\n );\n })();\n\n return (\n <div className={classes.root}>\n <div\n id={id}\n role={ariaRole}\n aria-expanded={ariaExpanded}\n aria-owns={isOpen ? setId(elementId, \"children-container\") : undefined}\n aria-required={required ?? undefined}\n aria-readonly={readOnly ?? undefined}\n className={cx(\n classes.anchor,\n { [classes.rootDisabled]: disabled },\n className\n )}\n {...(!readOnly && {\n onKeyDown: handleToggle,\n onClick: handleToggle,\n })}\n // Removes the element from the navigation sequence for keyboard focus\n tabIndex={-1}\n {...others}\n >\n {headerComponent}\n </div>\n {isOpen && containerComponent}\n </div>\n );\n};\n"],"names":["HvBaseDropdown","props","id","className","classes","classesProp","children","role","placeholder","component","adornment","expanded","dropdownHeaderProps","defaultExpanded","disabled","readOnly","required","disablePortal","variableWidth","placement","popperProps","dropdownHeaderRef","dropdownHeaderRefProp","onToggle","onClickOutside","onContainerCreation","ariaExpandedProp","others","useDefaultProps","cx","useClasses","rootId","useTheme","isOpen","setIsOpen","useControlled","Boolean","referenceElement","setReferenceElement","useState","popperElement","setPopperElement","popperMaxSize","setPopperMaxSize","handleDropdownHeaderRefProp","useForkRef","ref","handleDropdownHeaderRef","ariaRole","undefined","ariaExpanded","elementId","useUniqueId","bottom","extensionWidth","offsetWidth","modifiers","popperPropsModifiers","otherPopperProps","onFirstUpdate","useCallback","widthCalculator","state","styles","popper","width","rects","reference","widthCalculatorEffect","elements","style","applyMaxSizeCalculator","height","modifiersData","maxSize","maxWidth","maxHeight","maxSizeCalculator","name","options","overflow","detectOverflow","x","preventOverflow","y","popperWidth","popperHeight","basePlacement","split","widthProp","heightProp","useMemo","enabled","phase","requires","fn","effect","requiresIfExists","popperStyles","attributes","usePopper","popperPlacement","handleToggle","event","isKey","preventDefault","notControlKey","code","isOneOfKeys","ignoredCombinations","newOpen","focusHeader","focus","preventScroll","headerComponent","React","cloneElement","setId","ExpanderComponent","DropUpXS","DropDownXS","header","headerDisabled","headerReadOnly","headerOpen","headerOpenUp","includes","headerOpenDown","pointerEvents","tabIndex","_jsx","selection","HvTypography","selectionDisabled","variant","arrowContainer","iconSize","color","theme","colors","secondary_60","arrow","containerComponent","handleContainerKeyDown","shiftKey","focusList","getFirstAndLastFocus","document","activeElement","last","first","handleOutside","isButtonClick","contains","target","container","ClickAwayListener","onClickAway","onKeyDown","inputExtensionOpen","inputExtensionLeftPosition","BaseDropdownContext","Provider","value","panel","panelOpenedUp","panelOpenedDown","inputExtensionOpenShadow","inputExtensionFloatRight","inputExtensionFloatLeft","createPortal","getElementById","body","root","anchor","rootDisabled","onClick"],"mappings":"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"}
1	+ {"version":3,"file":"BaseDropdown.js","sources":["../../../../src/components/BaseDropdown/BaseDropdown.tsx"],"sourcesContent":["import React, {\n useMemo,\n useState,\n useCallback,\n KeyboardEventHandler,\n} from \"react\";\n\nimport { createPortal } from \"react-dom\";\n\nimport {\n ClickAwayListener,\n ClickAwayListenerProps,\n PopperPlacementType,\n PopperProps,\n} from \"@mui/material\";\n\nimport { theme } from \"@hitachivantara/uikit-styles\";\nimport { DropDownXS, DropUpXS } from \"@hitachivantara/uikit-react-icons\";\n\nimport { usePopper } from \"react-popper\";\nimport { detectOverflow, ModifierArguments, Options } from \"@popperjs/core\";\n\nimport { HvTypography } from \"@core/components/Typography\";\nimport { useUniqueId } from \"@core/hooks/useUniqueId\";\nimport { useTheme } from \"@core/hooks/useTheme\";\nimport { useForkRef } from \"@core/hooks/useForkRef\";\nimport { useControlled } from \"@core/hooks/useControlled\";\nimport { useDefaultProps } from \"@core/hooks/useDefaultProps\";\nimport { isKey, isOneOfKeys } from \"@core/utils/keyboardUtils\";\nimport { setId } from \"@core/utils/setId\";\nimport { getFirstAndLastFocus } from \"@core/utils/focusableElementFinder\";\nimport { HvBaseProps } from \"@core/types/generic\";\nimport { ExtractNames } from \"@core/utils/classes\";\n\nimport { staticClasses, useClasses } from \"./BaseDropdown.styles\";\nimport BaseDropdownContext from \"./BaseDropdownContext\";\n\nexport { staticClasses as baseDropdownClasses };\n\nexport type HvBaseDropdownClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvBaseDropdownProps\n extends HvBaseProps<HTMLDivElement, \"placeholder\"> {\n /*\n The role of the element that triggers the popup.\n \n Defaults to \"combobox\" if `component` and the default\n * \"textbox\" header is used, undefined otherwise.\n /\n role?: string;\n /\n Header placeholder.\n /\n placeholder?: string \| React.ReactNode;\n /\n If `true` the dropdown is disabled unable to be interacted, if `false` it is enabled.\n /\n disabled?: boolean;\n /\n If `true` the dropdown will be in read only mode, unable to be interacted.\n /\n readOnly?: boolean;\n /\n Indicates that user input is required on the form element.\n /\n required?: boolean;\n /\n Disable the portal behavior.\n * The children stay within it's parent DOM hierarchy.\n /\n disablePortal?: boolean;\n /\n If `true` the dropdown width depends size of content if `false` the width depends on the header size.\n * Defaults to `false`.\n /\n variableWidth?: boolean;\n /\n If `true` the dropdown starts opened if `false` it starts closed.\n /\n expanded?: boolean;\n /\n When uncontrolled, defines the initial expanded state.\n /\n defaultExpanded?: boolean;\n /\n An object containing props to be wired to the popper component.\n /\n popperProps?: Partial<PopperProps>;\n /\n Placement of the dropdown.\n /\n placement?: \"left\" \| \"right\";\n /\n Replacement for the header component.\n /\n component?: React.ReactNode;\n /\n Adornment to replace the default arrows.\n /\n adornment?: React.ReactNode;\n /\n When dropdown changes the expanded state.\n /\n onToggle?: (event: Event, open: boolean) => void;\n /\n When user click outside the open container.\n /\n onClickOutside?: (event: Event) => void;\n /\n Callback called when the dropdown is opened and ready,\n * commonly used to set focus to the content.\n /\n onContainerCreation?: (container: HTMLElement \| null) => void;\n /\n Attributes applied to the dropdown header element.\n /\n dropdownHeaderProps?: React.DetailedHTMLProps<\n React.HTMLAttributes<HTMLDivElement>,\n HTMLDivElement\n >;\n /\n Pass a ref to the dropdown header element.\n /\n dropdownHeaderRef?: React.Ref<any>;\n /\n A Jss Object used to override or extend the component styles applied.\n /\n classes?: HvBaseDropdownClasses;\n}\n\nexport const HvBaseDropdown = (props: HvBaseDropdownProps) => {\n const {\n id,\n className,\n classes: classesProp,\n children,\n role,\n placeholder,\n component,\n adornment,\n expanded,\n dropdownHeaderProps,\n defaultExpanded,\n disabled,\n readOnly,\n required,\n disablePortal,\n variableWidth,\n placement = \"right\",\n popperProps = {},\n dropdownHeaderRef: dropdownHeaderRefProp,\n onToggle,\n onClickOutside,\n onContainerCreation,\n \"aria-expanded\": ariaExpandedProp,\n ...others\n } = useDefaultProps(\"HvBaseDropdown\", props);\n const { classes, cx } = useClasses(classesProp);\n\n const { rootId } = useTheme();\n\n const [isOpen, setIsOpen] = useControlled(expanded, Boolean(defaultExpanded));\n\n const [referenceElement, setReferenceElement] = useState<HTMLElement \| null>(\n null\n );\n const [popperElement, setPopperElement] = useState<HTMLElement \| null>(null);\n const [popperMaxSize, setPopperMaxSize] = useState<{\n width?: number;\n height?: number;\n }>({});\n\n const handleDropdownHeaderRefProp = useForkRef(\n dropdownHeaderRefProp,\n dropdownHeaderProps?.ref\n );\n const handleDropdownHeaderRef = useForkRef(\n setReferenceElement,\n handleDropdownHeaderRefProp\n );\n\n const ariaRole = role \|\| (component == null ? \"combobox\" : undefined);\n\n const ariaExpanded = ariaExpandedProp ?? (ariaRole ? !!isOpen : undefined);\n\n const elementId = useUniqueId(id, \"hvbasedropdown\");\n\n const bottom: PopperPlacementType =\n placement && `bottom-${placement === \"right\" ? \"start\" : \"end\"}`;\n\n const extensionWidth = referenceElement\n ? referenceElement?.offsetWidth\n : \"inherit\";\n\n const { modifiers: popperPropsModifiers = [], ...otherPopperProps } =\n popperProps;\n\n const onFirstUpdate = useCallback(() => {\n if (onContainerCreation) onContainerCreation(popperElement);\n }, [onContainerCreation, popperElement]);\n\n const widthCalculator = useCallback(\n ({ state }: ModifierArguments<Options>) => {\n state.styles.popper.width = `${state.rects.reference.width}px`;\n },\n []\n );\n\n const widthCalculatorEffect = useCallback(\n ({ state }: ModifierArguments<Options>) => {\n state.elements.popper.style.width = `${\n (state.elements.reference as any).offsetWidth\n }px`;\n },\n []\n );\n\n const applyMaxSizeCalculator = useCallback(\n ({ state }: ModifierArguments<Options>) => {\n // The `maxSize` modifier provides this data\n const { width, height } = state.modifiersData.maxSize;\n if (width !== popperMaxSize?.width \|\| height !== popperMaxSize?.height) {\n setPopperMaxSize({ width, height });\n }\n\n state.styles.popper = {\n ...state.styles.popper,\n maxWidth: `${width}px`,\n maxHeight: `${height}px`,\n };\n },\n [popperMaxSize]\n );\n\n const maxSizeCalculator = useCallback(\n ({ state, name, options }: ModifierArguments<Options>) => {\n const overflow = detectOverflow(state, options);\n\n const x = state.modifiersData.preventOverflow?.x \|\| 0;\n const y = state.modifiersData.preventOverflow?.y \|\| 0;\n\n const popperWidth = state.rects.popper.width;\n const popperHeight = state.rects.popper.height;\n\n const basePlacement = state.placement.split(\"-\")[0];\n\n const widthProp = basePlacement === \"left\" ? \"left\" : \"right\";\n const heightProp = basePlacement === \"top\" ? \"top\" : \"bottom\";\n\n state.modifiersData[name] = {\n width: popperWidth - overflow[widthProp] - x,\n height: popperHeight - overflow[heightProp] - y,\n };\n },\n []\n );\n\n const modifiers: PopperProps[\"modifiers\"] = useMemo(\n () => [\n {\n name: \"variableWidth\",\n enabled: !variableWidth,\n phase: \"beforeWrite\",\n requires: [\"computeStyles\"],\n fn: widthCalculator,\n effect: widthCalculatorEffect,\n },\n {\n name: \"maxSize\",\n enabled: true,\n phase: \"main\",\n requiresIfExists: [\"offset\", \"preventOverflow\", \"flip\"],\n fn: maxSizeCalculator,\n },\n {\n name: \"applyMaxSize\",\n enabled: true,\n phase: \"beforeWrite\",\n requires: [\"maxSize\"],\n fn: applyMaxSizeCalculator,\n },\n ...popperPropsModifiers,\n ],\n [\n maxSizeCalculator,\n applyMaxSizeCalculator,\n popperPropsModifiers,\n variableWidth,\n widthCalculator,\n widthCalculatorEffect,\n ]\n );\n\n const { styles: popperStyles, attributes } = usePopper(\n referenceElement,\n popperElement,\n {\n placement: bottom,\n modifiers,\n onFirstUpdate,\n ...otherPopperProps,\n }\n );\n\n const popperPlacement =\n attributes.popper?.[\"data-popper-placement\"] ?? \"bottom\";\n\n const handleToggle = useCallback(\n (event) => {\n if (event && !isKey(event, \"Tab\")) {\n event.preventDefault();\n }\n\n const notControlKey =\n !!event?.code &&\n !isOneOfKeys(event, [\"Tab\", \"Enter\", \"Esc\", \"ArrowDown\", \"Space\"]);\n\n const ignoredCombinations =\n (isKey(event, \"Esc\") && !isOpen) \|\|\n (isKey(event, \"ArrowDown\") && isOpen) \|\|\n (isKey(event, \"Tab\") && !isOpen);\n\n if (disabled \|\| notControlKey \|\| ignoredCombinations) return;\n\n const newOpen = !isOpen;\n\n / If about to close focus on the header component. /\n const focusHeader = () => {\n if (!newOpen) {\n // Focus-ring won't be visible even if using the keyboard:\n // https://github.com/WICG/focus-visible/issues/88\n referenceElement?.focus({ preventScroll: true });\n }\n\n return newOpen;\n };\n setIsOpen(focusHeader());\n\n onToggle?.(event, newOpen);\n },\n [isOpen, disabled, setIsOpen, onToggle, referenceElement]\n );\n\n const headerComponent = (() => {\n if (component) {\n return React.cloneElement(component as React.ReactElement, {\n ref: handleDropdownHeaderRef,\n \"aria-controls\": isOpen\n ? setId(elementId, \"children-container\")\n : undefined,\n });\n }\n\n const ExpanderComponent = isOpen ? DropUpXS : DropDownXS;\n\n return (\n <div\n id={setId(id, \"header\")}\n className={cx(classes.header, {\n [classes.headerDisabled]: disabled,\n [classes.headerReadOnly]: readOnly,\n [classes.headerOpen]: isOpen,\n [classes.headerOpenUp]: isOpen && popperPlacement.includes(\"top\"),\n [classes.headerOpenDown]:\n isOpen && popperPlacement.includes(\"bottom\"),\n })}\n role={ariaRole === \"combobox\" ? \"textbox\" : undefined}\n style={disabled \|\| readOnly ? { pointerEvents: \"none\" } : undefined}\n aria-controls={\n isOpen ? setId(elementId, \"children-container\") : undefined\n }\n aria-label={others[\"aria-label\"] ?? undefined}\n aria-labelledby={others[\"aria-labelledby\"] ?? undefined}\n aria-required={required ?? undefined}\n aria-readonly={readOnly ?? undefined}\n // Removes the element from the navigation sequence for keyboard focus if disabled\n tabIndex={disabled ? -1 : 0}\n ref={handleDropdownHeaderRef}\n {...dropdownHeaderProps}\n >\n <div className={classes.selection}>\n {placeholder && typeof placeholder === \"string\" ? (\n <HvTypography\n className={cx(classes.placeholder, {\n [classes.selectionDisabled]: disabled,\n })}\n variant=\"body\"\n >\n {placeholder}\n </HvTypography>\n ) : (\n placeholder\n )}\n </div>\n <div className={classes.arrowContainer}>\n {adornment \|\| (\n <ExpanderComponent\n iconSize=\"XS\"\n color={disabled ? theme.colors.secondary_60 : undefined}\n className={classes.arrow}\n />\n )}\n </div>\n </div>\n );\n })();\n\n const containerComponent = (() => {\n /\n Handle keyboard inside children container.\n /\n const handleContainerKeyDown: KeyboardEventHandler = (event) => {\n if (isKey(event, \"Esc\")) {\n handleToggle(event);\n }\n if (isKey(event, \"Tab\") && !event.shiftKey) {\n const focusList = getFirstAndLastFocus(popperElement);\n if (document.activeElement === focusList?.last) {\n event.preventDefault();\n focusList?.first?.focus();\n }\n }\n };\n\n const handleOutside: ClickAwayListenerProps[\"onClickAway\"] = (event) => {\n const isButtonClick = referenceElement?.contains(event.target as any);\n if (!isButtonClick) {\n onClickOutside?.(event);\n setIsOpen(false);\n onToggle?.(event, false);\n }\n };\n\n const container = (\n <div\n role=\"tooltip\"\n ref={setPopperElement}\n className={classes.container}\n style={popperStyles.popper}\n {...attributes.popper}\n >\n <ClickAwayListener onClickAway={handleOutside}>\n {/ eslint-disable-next-line jsx-a11y/no-static-element-interactions */}\n <div onKeyDown={handleContainerKeyDown}>\n {popperPlacement.includes(\"bottom\") && (\n <div\n style={{ width: extensionWidth }}\n className={cx(classes.inputExtensionOpen, {\n [classes.inputExtensionLeftPosition]:\n popperPlacement.includes(\"end\"),\n })}\n />\n )}\n <BaseDropdownContext.Provider value={popperMaxSize}>\n <div\n id={setId(elementId, \"children-container\")}\n className={cx(classes.panel, {\n [classes.panelOpenedUp]: popperPlacement.includes(\"top\"),\n [classes.panelOpenedDown]: popperPlacement.includes(\"bottom\"),\n })}\n >\n {children}\n </div>\n </BaseDropdownContext.Provider>\n {popperPlacement.includes(\"top\") && (\n <div\n style={{ width: extensionWidth }}\n className={cx(\n classes.inputExtensionOpen,\n classes.inputExtensionOpenShadow,\n {\n [classes.inputExtensionFloatRight]:\n popperPlacement.includes(\"end\"),\n [classes.inputExtensionFloatLeft]:\n popperPlacement.includes(\"start\"),\n }\n )}\n />\n )}\n </div>\n </ClickAwayListener>\n </div>\n );\n\n if (disablePortal) return container;\n\n return createPortal(\n container,\n document.getElementById(rootId \|\| \"\") \|\| document.body\n );\n })();\n\n return (\n <div className={classes.root}>\n <div\n id={id}\n role={ariaRole}\n aria-expanded={ariaExpanded}\n aria-owns={isOpen ? setId(elementId, \"children-container\") : undefined}\n aria-required={required ?? undefined}\n aria-readonly={readOnly ?? undefined}\n className={cx(\n classes.anchor,\n { [classes.rootDisabled]: disabled },\n className\n )}\n {...(!readOnly && {\n onKeyDown: handleToggle,\n onClick: handleToggle,\n })}\n // Removes the element from the navigation sequence for keyboard focus\n tabIndex={-1}\n {...others}\n >\n {headerComponent}\n </div>\n {isOpen && containerComponent}\n </div>\n );\n};\n"],"names":["HvBaseDropdown","props","id","className","classes","classesProp","children","role","placeholder","component","adornment","expanded","dropdownHeaderProps","defaultExpanded","disabled","readOnly","required","disablePortal","variableWidth","placement","popperProps","dropdownHeaderRef","dropdownHeaderRefProp","onToggle","onClickOutside","onContainerCreation","ariaExpandedProp","others","useDefaultProps","cx","useClasses","rootId","useTheme","isOpen","setIsOpen","useControlled","Boolean","referenceElement","setReferenceElement","useState","popperElement","setPopperElement","popperMaxSize","setPopperMaxSize","handleDropdownHeaderRefProp","useForkRef","ref","handleDropdownHeaderRef","ariaRole","undefined","ariaExpanded","elementId","useUniqueId","bottom","extensionWidth","offsetWidth","modifiers","popperPropsModifiers","otherPopperProps","onFirstUpdate","useCallback","widthCalculator","state","styles","popper","width","rects","reference","widthCalculatorEffect","elements","style","applyMaxSizeCalculator","height","modifiersData","maxSize","maxWidth","maxHeight","maxSizeCalculator","name","options","overflow","detectOverflow","x","preventOverflow","y","popperWidth","popperHeight","basePlacement","split","widthProp","heightProp","useMemo","enabled","phase","requires","fn","effect","requiresIfExists","popperStyles","attributes","usePopper","popperPlacement","handleToggle","event","isKey","preventDefault","notControlKey","code","isOneOfKeys","ignoredCombinations","newOpen","focusHeader","focus","preventScroll","headerComponent","React","cloneElement","setId","ExpanderComponent","DropUpXS","DropDownXS","header","headerDisabled","headerReadOnly","headerOpen","headerOpenUp","includes","headerOpenDown","pointerEvents","tabIndex","_jsx","selection","HvTypography","selectionDisabled","variant","arrowContainer","iconSize","color","theme","colors","secondary_60","arrow","containerComponent","handleContainerKeyDown","shiftKey","focusList","getFirstAndLastFocus","document","activeElement","last","first","handleOutside","isButtonClick","contains","target","container","ClickAwayListener","onClickAway","onKeyDown","inputExtensionOpen","inputExtensionLeftPosition","BaseDropdownContext","Provider","value","panel","panelOpenedUp","panelOpenedDown","inputExtensionOpenShadow","inputExtensionFloatRight","inputExtensionFloatLeft","createPortal","getElementById","body","root","anchor","rootDisabled","onClick"],"mappings":"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"}

package/dist/esm/components/Forms/WarningText/WarningText.js CHANGED Viewed

@@ -53,6 +53,7 @@ const HvWarningText = (props) => {
         [classes.hideText]: hideText
       }),
       role: "status",
+      "aria-live": "polite",
       "aria-relevant": "additions text",
       ...others,
       children: showWarning && content

package/dist/esm/components/Forms/WarningText/WarningText.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"WarningText.js","sources":["../../../../../src/components/Forms/WarningText/WarningText.tsx"],"sourcesContent":["import { useContext } from \"react\";\n\nimport isNil from \"lodash/isNil\";\n\nimport { Fail } from \"@hitachivantara/uikit-react-icons\";\n\nimport { useDefaultProps } from \"@core/hooks/useDefaultProps\";\nimport { HvBaseProps } from \"@core/types/generic\";\nimport { setId } from \"@core/utils/setId\";\nimport { ExtractNames } from \"@core/utils/classes\";\nimport { HvTypography } from \"@core/components/Typography\";\n\nimport { staticClasses, useClasses } from \"./WarningText.styles\";\nimport { HvFormElementContext } from \"../FormElement\";\n\nexport { staticClasses as warningTextClasses };\n\nexport type HvWarningTextClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvWarningTextProps extends HvBaseProps {\n /** Icon to be rendered alongside the warning text. /\n adornment?: React.ReactNode;\n /* If `true` the text is not rendered. /\n isVisible?: boolean;\n /* If `true` the text is disabled. /\n disabled?: boolean;\n /* If `true` the text won't include a gutter. /\n disableGutter?: boolean;\n /* If `true` the text won't include the top border. /\n disableBorder?: boolean;\n /* If `true` the adornment icon isn't shown. /\n disableAdornment?: boolean;\n /* If `true` the text isn't shown. /\n hideText?: boolean;\n /* A Jss Object used to override or extend the styles applied to the component. /\n classes?: HvWarningTextClasses;\n}\n\n/\n Provides the user with a descriptive text, signaling an error, for when the form element is in an invalid state.\n */\nexport const HvWarningText = (props: HvWarningTextProps) => {\n const {\n children,\n adornment,\n isVisible,\n classes: classesProp,\n className,\n id,\n disabled,\n disableGutter = false,\n disableBorder = false,\n disableAdornment = false,\n hideText = false,\n ...others\n } = useDefaultProps(\"HvWarningText\", props);\n\n const { classes, cx } = useClasses(classesProp);\n\n const { elementId, elementStatus, elementDisabled } =\n useContext(HvFormElementContext);\n const localDisabled = disabled \|\| elementDisabled;\n const localVisible = !isNil(isVisible)\n ? isVisible\n : elementStatus === \"invalid\";\n const localId = id ?? setId(elementId, \"error\");\n const showWarning = localVisible && !localDisabled;\n const content = showWarning ? children : \"\";\n const localAdornment = adornment \|\| (\n <Fail className={classes.defaultIcon} semantic=\"negative\" />\n );\n\n return (\n <div\n className={cx(\n classes.root,\n {\n [classes.show]: showWarning,\n [classes.topBorder]: !disableBorder,\n },\n className\n )}\n >\n {!disableAdornment && localAdornment}\n <HvTypography\n id={localId}\n className={cx(classes.warningText, {\n [classes.topGutter]: !disableGutter,\n [classes.hideText]: hideText,\n })}\n role=\"status\"\n aria-relevant=\"additions text\"\n {...others}\n >\n {showWarning && content}\n </HvTypography>\n </div>\n );\n};\n"],"names":["HvWarningText","props","children","adornment","isVisible","classes","classesProp","className","id","disabled","disableGutter","disableBorder","disableAdornment","hideText","others","useDefaultProps","cx","useClasses","elementId","elementStatus","elementDisabled","useContext","HvFormElementContext","localDisabled","localVisible","isNil","localId","setId","showWarning","content","localAdornment","_jsx","Fail","defaultIcon","semantic","root","show","topBorder","HvTypography","warningText","topGutter","role"],"mappings":";;;;;;;;;;AAyCaA,MAAAA,gBAAgBA,CAACC,UAA8B;AACpD,QAAA;AAAA,IACJC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC,SAASC;AAAAA,IACTC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC,gBAAgB;AAAA,IAChBC,gBAAgB;AAAA,IAChBC,mBAAmB;AAAA,IACnBC,WAAW;AAAA,IACX,GAAGC;AAAAA,EAAAA,IACDC,gBAAgB,iBAAiBd,KAAK;AAEpC,QAAA;AAAA,IAAEI;AAAAA,IAASW;AAAAA,EAAAA,IAAOC,WAAWX,WAAW;AAExC,QAAA;AAAA,IAAEY;AAAAA,IAAWC;AAAAA,IAAeC;AAAAA,EAAAA,IAChCC,WAAWC,oBAAoB;AACjC,QAAMC,gBAAgBd,YAAYW;AAClC,QAAMI,eAAe,CAACC,MAAMrB,SAAS,IACjCA,YACAe,kBAAkB;AACtB,QAAMO,UAAUlB,MAAMmB,MAAMT,WAAW,OAAO;AACxCU,QAAAA,cAAcJ,gBAAgB,CAACD;AAC/BM,QAAAA,UAAUD,cAAc1B,WAAW;AACnC4B,QAAAA,iBAAiB3B,aACrB4B,oBAACC,MAAI;AAAA,IAACzB,WAAWF,QAAQ4B;AAAAA,IAAaC,UAAS;AAAA,EAAA,CAAY;AAG7D,8BACE,OAAA;AAAA,IACE3B,WAAWS,GACTX,QAAQ8B,MACR;AAAA,MACE,CAAC9B,QAAQ+B,IAAI,GAAGR;AAAAA,MAChB,CAACvB,QAAQgC,SAAS,GAAG,CAAC1B;AAAAA,OAExBJ,SACF;AAAA,IAAEL,UAAA,CAED,CAACU,oBAAoBkB,oCACrBQ,cAAY;AAAA,MACX9B,IAAIkB;AAAAA,MACJnB,WAAWS,GAAGX,QAAQkC,aAAa;AAAA,QACjC,CAAClC,QAAQmC,SAAS,GAAG,CAAC9B;AAAAA,QACtB,CAACL,QAAQQ,QAAQ,GAAGA;AAAAA,MAAAA,CACrB;AAAA,MACD4B,MAAK;AAAA,MACL,iBAAc;AAAA,MAAgB,GAC1B3B;AAAAA,MAAMZ,UAET0B,eAAeC;AAAAA,IAAAA,CACJ,CAAC;AAAA,EAAA,CACZ;AAET;"}
1	+ {"version":3,"file":"WarningText.js","sources":["../../../../../src/components/Forms/WarningText/WarningText.tsx"],"sourcesContent":["import { useContext } from \"react\";\n\nimport isNil from \"lodash/isNil\";\n\nimport { Fail } from \"@hitachivantara/uikit-react-icons\";\n\nimport { useDefaultProps } from \"@core/hooks/useDefaultProps\";\nimport { HvBaseProps } from \"@core/types/generic\";\nimport { setId } from \"@core/utils/setId\";\nimport { ExtractNames } from \"@core/utils/classes\";\nimport { HvTypography } from \"@core/components/Typography\";\n\nimport { staticClasses, useClasses } from \"./WarningText.styles\";\nimport { HvFormElementContext } from \"../FormElement\";\n\nexport { staticClasses as warningTextClasses };\n\nexport type HvWarningTextClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvWarningTextProps extends HvBaseProps {\n /** Icon to be rendered alongside the warning text. /\n adornment?: React.ReactNode;\n /* If `true` the text is not rendered. /\n isVisible?: boolean;\n /* If `true` the text is disabled. /\n disabled?: boolean;\n /* If `true` the text won't include a gutter. /\n disableGutter?: boolean;\n /* If `true` the text won't include the top border. /\n disableBorder?: boolean;\n /* If `true` the adornment icon isn't shown. /\n disableAdornment?: boolean;\n /* If `true` the text isn't shown. /\n hideText?: boolean;\n /* A Jss Object used to override or extend the styles applied to the component. /\n classes?: HvWarningTextClasses;\n}\n\n/\n Provides the user with a descriptive text, signaling an error, for when the form element is in an invalid state.\n */\nexport const HvWarningText = (props: HvWarningTextProps) => {\n const {\n children,\n adornment,\n isVisible,\n classes: classesProp,\n className,\n id,\n disabled,\n disableGutter = false,\n disableBorder = false,\n disableAdornment = false,\n hideText = false,\n ...others\n } = useDefaultProps(\"HvWarningText\", props);\n\n const { classes, cx } = useClasses(classesProp);\n\n const { elementId, elementStatus, elementDisabled } =\n useContext(HvFormElementContext);\n const localDisabled = disabled \|\| elementDisabled;\n const localVisible = !isNil(isVisible)\n ? isVisible\n : elementStatus === \"invalid\";\n const localId = id ?? setId(elementId, \"error\");\n const showWarning = localVisible && !localDisabled;\n const content = showWarning ? children : \"\";\n const localAdornment = adornment \|\| (\n <Fail className={classes.defaultIcon} semantic=\"negative\" />\n );\n\n return (\n <div\n className={cx(\n classes.root,\n {\n [classes.show]: showWarning,\n [classes.topBorder]: !disableBorder,\n },\n className\n )}\n >\n {!disableAdornment && localAdornment}\n <HvTypography\n id={localId}\n className={cx(classes.warningText, {\n [classes.topGutter]: !disableGutter,\n [classes.hideText]: hideText,\n })}\n role=\"status\"\n aria-live=\"polite\"\n aria-relevant=\"additions text\"\n {...others}\n >\n {showWarning && content}\n </HvTypography>\n </div>\n );\n};\n"],"names":["HvWarningText","props","children","adornment","isVisible","classes","classesProp","className","id","disabled","disableGutter","disableBorder","disableAdornment","hideText","others","useDefaultProps","cx","useClasses","elementId","elementStatus","elementDisabled","useContext","HvFormElementContext","localDisabled","localVisible","isNil","localId","setId","showWarning","content","localAdornment","_jsx","Fail","defaultIcon","semantic","root","show","topBorder","HvTypography","warningText","topGutter","role"],"mappings":";;;;;;;;;;AAyCaA,MAAAA,gBAAgBA,CAACC,UAA8B;AACpD,QAAA;AAAA,IACJC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC,SAASC;AAAAA,IACTC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC,gBAAgB;AAAA,IAChBC,gBAAgB;AAAA,IAChBC,mBAAmB;AAAA,IACnBC,WAAW;AAAA,IACX,GAAGC;AAAAA,EAAAA,IACDC,gBAAgB,iBAAiBd,KAAK;AAEpC,QAAA;AAAA,IAAEI;AAAAA,IAASW;AAAAA,EAAAA,IAAOC,WAAWX,WAAW;AAExC,QAAA;AAAA,IAAEY;AAAAA,IAAWC;AAAAA,IAAeC;AAAAA,EAAAA,IAChCC,WAAWC,oBAAoB;AACjC,QAAMC,gBAAgBd,YAAYW;AAClC,QAAMI,eAAe,CAACC,MAAMrB,SAAS,IACjCA,YACAe,kBAAkB;AACtB,QAAMO,UAAUlB,MAAMmB,MAAMT,WAAW,OAAO;AACxCU,QAAAA,cAAcJ,gBAAgB,CAACD;AAC/BM,QAAAA,UAAUD,cAAc1B,WAAW;AACnC4B,QAAAA,iBAAiB3B,aACrB4B,oBAACC,MAAI;AAAA,IAACzB,WAAWF,QAAQ4B;AAAAA,IAAaC,UAAS;AAAA,EAAA,CAAY;AAG7D,8BACE,OAAA;AAAA,IACE3B,WAAWS,GACTX,QAAQ8B,MACR;AAAA,MACE,CAAC9B,QAAQ+B,IAAI,GAAGR;AAAAA,MAChB,CAACvB,QAAQgC,SAAS,GAAG,CAAC1B;AAAAA,OAExBJ,SACF;AAAA,IAAEL,UAAA,CAED,CAACU,oBAAoBkB,oCACrBQ,cAAY;AAAA,MACX9B,IAAIkB;AAAAA,MACJnB,WAAWS,GAAGX,QAAQkC,aAAa;AAAA,QACjC,CAAClC,QAAQmC,SAAS,GAAG,CAAC9B;AAAAA,QACtB,CAACL,QAAQQ,QAAQ,GAAGA;AAAAA,MAAAA,CACrB;AAAA,MACD4B,MAAK;AAAA,MACL,aAAU;AAAA,MACV,iBAAc;AAAA,MAAgB,GAC1B3B;AAAAA,MAAMZ,UAET0B,eAAeC;AAAAA,IAAAA,CACJ,CAAC;AAAA,EAAA,CACZ;AAET;"}

package/dist/esm/components/TagsInput/TagsInput.js CHANGED Viewed

@@ -312,7 +312,7 @@ const HvTagsInput = (props) => {
             gutters: classes.listItemGutters,
             root: classes.listItemRoot
           },
-          id: `tag-${i}`,
+          id: setId(elementId, `tag-${i}`),
           children: /* @__PURE__ */ jsx(HvTag, {
             label,
             className: cx({
@@ -344,7 +344,7 @@ const HvTagsInput = (props) => {
           root: classes.tagInputContainerRoot,
           gutters: classes.listItemGutters
         },
-        id: `tag-${value.length}`,
+        id: setId(elementId, `tag-${value.length}`),
         children: /* @__PURE__ */ jsx(HvInput, {
           value: tagInput,
           disableClear: true,