@hitachivantara/uikit-react-core 5.66.9 → 5.66.11

package/dist/cjs/VerticalNavigation/TreeView/TreeViewItem.cjs

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const jsxRuntime = require("@emotion/react/jsx-runtime");
+const jsxRuntime = require("react/jsx-runtime");
 const React = require("react");
 const uikitReactIcons = require("@hitachivantara/uikit-react-icons");
 const useDefaultProps = require("../../hooks/useDefaultProps.cjs");
@@ -75,7 +75,9 @@ const HvVerticalNavigationTreeViewItem = React.forwardRef(
       }),
       [nodeId, treeitemElement]
     );
-    const { isOpen, useIcons } = React.useContext(VerticalNavigationContext.VerticalNavigationContext);
+    const { isOpen, useIcons, hasAnyChildWithData } = React.useContext(
+      VerticalNavigationContext.VerticalNavigationContext
+    );
     const { index, parentId, level } = DescendantProvider.useDescendant(descendant);
     const expandable = collapsible && Array.isArray(children);
     const expanded = isExpanded ? isExpanded(nodeId) : false;
@@ -304,7 +306,13 @@ const HvVerticalNavigationTreeViewItem = React.forwardRef(
                 label: payload?.label,
                 hasChildren,
                 showAvatar: !icon && useIcons,
-                isOpen
+                isOpen,
+                hasAnyChildWithData,
+                style: {
+                  // @ts-ignore
+                  "--icon-margin-left": hasAnyChildWithData ? "auto" : "unset"
+                },
+                className: classes.icon
               }
             ),
             isOpen && /* @__PURE__ */ jsxRuntime.jsx(
@@ -322,37 +330,39 @@ const HvVerticalNavigationTreeViewItem = React.forwardRef(
         }
       ) });
     }, [
-      id,
       href,
       target,
+      children,
+      isOpen,
+      disableTooltip,
+      disabled,
+      label,
+      id,
       cx,
       classes.content,
       classes.link,
       classes.minimized,
+      classes.icon,
       classes.label,
       classes.labelIcon,
       classes.labelExpandable,
-      disabled,
       handleClick,
       handleMouseDown,
-      expandable,
-      icon,
+      useIcons,
       level,
       collapsible,
       treeviewMode,
       handleFocus,
       selectable,
+      expandable,
       handleKeyDown,
       selected,
+      isChildSelected,
+      nodeId,
       expanded,
-      label,
-      disableTooltip,
       payload?.label,
-      children,
-      isOpen,
-      useIcons,
-      isChildSelected,
-      nodeId
+      icon,
+      hasAnyChildWithData
     ]);
     const renderedChildren = React.useMemo(
       () => children && /* @__PURE__ */ jsxRuntime.jsx(
@@ -371,19 +381,22 @@ const HvVerticalNavigationTreeViewItem = React.forwardRef(
       {
         ref: handleRef,
         id: id ?? void 0,
-        className: cx(classes.node, {
-          [classes.disabled]: disabled,
-          [classes.expandable]: expandable,
-          [classes.collapsed]: expandable && !expanded,
-          [classes.expanded]: expandable && expanded,
-          [classes.selectable]: selectable && !disabled,
-          [classes.unselectable]: !disabled && !selectable,
-          [classes.selected]: !disabled && selectable && selected || !isOpen && useIcons && isChildSelected && isChildSelected(nodeId),
-          [classes.unselected]: !disabled && selectable && !selected,
-          [classes.focused]: focused,
-          [classes.hide]: !isOpen && !useIcons,
+        className: cx(
+          classes.node,
+          {
+            [classes.disabled]: disabled,
+            [classes.expandable]: expandable,
+            [classes.collapsed]: expandable && !expanded,
+            [classes.expanded]: expandable && expanded,
+            [classes.selectable]: selectable && !disabled,
+            [classes.unselectable]: !disabled && !selectable,
+            [classes.selected]: !disabled && selectable && selected || !isOpen && useIcons && isChildSelected && isChildSelected(nodeId),
+            [classes.unselected]: !disabled && selectable && !selected,
+            [classes.focused]: focused,
+            [classes.hide]: !isOpen && !useIcons
+          },
           className
-        }),
+        ),
         "data-hasicon": icon != null ? true : void 0,
         ...mode === "treeview" && {
           role: "treeitem",

package/dist/cjs/VerticalNavigation/TreeView/TreeViewItem.styles.cjs

@@ -3,16 +3,15 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const uikitStyles = require("@hitachivantara/uikit-styles");
 const classes = require("../../utils/classes.cjs");
 const focusUtils = require("../../utils/focusUtils.cjs");
-const selected = () => ({
+const Avatar_styles = require("../../Avatar/Avatar.styles.cjs");
+require("../../Avatar/Avatar.cjs");
+const selected = {
   background: uikitStyles.theme.colors.atmo3,
-  borderLeft: `4px solid ${uikitStyles.theme.colors.secondary}`,
-  "& *": {
-    background: uikitStyles.theme.colors.atmo3
-  }
-});
-const hover = () => ({
+  borderLeft: `4px solid ${uikitStyles.theme.colors.secondary}`
+};
+const hover = {
   background: uikitStyles.theme.colors.containerBackgroundHover
-});
+};
 const { staticClasses, useClasses } = classes.createClasses(
   "HvVerticalNavigationTreeViewItem",
   {
@@ -54,13 +53,13 @@ const { staticClasses, useClasses } = classes.createClasses(
       "$expandable>&": {
         fontWeight: 600
       },
-      "$selected>&": selected(),
+      "$selected>&": { ...selected },
       // hover
-      ":not($disabled>&):not($selected>&):hover": hover(),
+      ":not($disabled>&):not($selected>&):hover": { ...hover },
       ":not($disabled)$selected>&:hover": {},
       // focus
-      ":not($disabled>&):not($selected>&):focus-visible": hover(),
-      ":not($disabled>&):not($selected>&).focus-visible": hover(),
+      ":not($disabled>&):not($selected>&):focus-visible": { ...hover },
+      ":not($disabled>&):not($selected>&).focus-visible": { ...hover },
       "*:focus-visible $focused>&": {
         ...focusUtils.outlineStyles
       },
@@ -68,7 +67,7 @@ const { staticClasses, useClasses } = classes.createClasses(
         ...focusUtils.outlineStyles
       },
       "$focused>&": {
-        ...hover()
+        ...hover
       },
       "&[disabled], &:active": {
         outline: "none"
@@ -125,6 +124,19 @@ const { staticClasses, useClasses } = classes.createClasses(
       "&$labelIcon": {
         maxWidth: "calc(100% - 64px)"
       }
+    },
+    icon: {
+      display: "flex",
+      "> div:first-of-type": {
+        marginLeft: "var(--icon-margin-left)"
+      },
+      "> div:nth-of-type(2)": {
+        width: "14px",
+        marginLeft: "auto"
+      },
+      [`&& .${Avatar_styles.staticClasses.root}`]: {
+        fontSize: "15px"
+      }
     }
   }
 );

package/dist/cjs/VerticalNavigation/VerticalNavigation.cjs

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const jsxRuntime = require("@emotion/react/jsx-runtime");
+const jsxRuntime = require("react/jsx-runtime");
 const React = require("react");
 const useDefaultProps = require("../hooks/useDefaultProps.cjs");
 const VerticalNavigation_utils = require("./utils/VerticalNavigation.utils.cjs");

package/dist/cjs/hocs/withTooltip.cjs

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const jsxRuntime = require("@emotion/react/jsx-runtime");
+const jsxRuntime = require("react/jsx-runtime");
 const React = require("react");
 const Tooltip = require("../Tooltip/Tooltip.cjs");
 const styles = {

package/dist/cjs/hooks/useEmotionCache.cjs

@@ -1,7 +1,7 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const React = require("react");
-require("@emotion/react/jsx-runtime");
+require("react/jsx-runtime");
 require("@mui/material/styles");
 const uikitReactShared = require("@hitachivantara/uikit-react-shared");
 require("@hitachivantara/uikit-styles");

package/dist/cjs/hooks/useTheme.cjs

@@ -1,7 +1,7 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const React = require("react");
-require("@emotion/react/jsx-runtime");
+require("react/jsx-runtime");
 require("@mui/material/styles");
 const uikitReactShared = require("@hitachivantara/uikit-react-shared");
 require("@hitachivantara/uikit-styles");

package/dist/cjs/providers/Provider.cjs

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const jsxRuntime = require("@emotion/react/jsx-runtime");
+const jsxRuntime = require("react/jsx-runtime");
 const React = require("react");
 const createCache = require("@emotion/cache");
 const react = require("@emotion/react");

package/dist/cjs/providers/ThemeProvider.cjs

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const jsxRuntime = require("@emotion/react/jsx-runtime");
+const jsxRuntime = require("react/jsx-runtime");
 const React = require("react");
 const styles = require("@mui/material/styles");
 const uikitReactShared = require("@hitachivantara/uikit-react-shared");
@@ -9,41 +9,34 @@ const theme = require("../utils/theme.cjs");
 const HvThemeProvider = ({
   children,
   themes: themesList,
-  theme: theme$1,
+  theme: themeProp,
   emotionCache,
-  colorMode,
+  colorMode: colorModeProp,
   themeRootId: rootId
 }) => {
-  const initTheme = uikitStyles.parseTheme(themesList, theme$1, colorMode);
-  const [parsedTheme, setParsedTheme] = React.useState(initTheme);
-  const [activeTheme, setActiveTheme] = React.useState(parsedTheme.theme);
-  const [selectedTheme, setSelectedTheme] = React.useState(parsedTheme.selectedTheme);
-  const [selectedMode, setThemeMode] = React.useState(parsedTheme.selectedMode);
-  const [colorModes, setColorModes] = React.useState(parsedTheme.colorModes);
-  const [themes, setThemes] = React.useState(themesList.map((t) => t.name));
+  const [theme$1, setTheme] = React.useState(themeProp);
+  const [colorMode, setColorMode] = React.useState(colorModeProp);
+  const {
+    theme: activeTheme,
+    selectedTheme,
+    selectedMode,
+    colorModes,
+    colorScheme
+  } = uikitStyles.parseTheme(themesList, theme$1, colorMode);
+  const themes = themesList.map((t) => t.name);
   React.useEffect(() => {
-    const pTheme = uikitStyles.parseTheme(themesList, theme$1, colorMode);
-    setThemes(themesList.map((t) => t.name));
-    setParsedTheme(pTheme);
-  }, [themesList, theme$1, colorMode]);
+    setTheme(themeProp);
+    setColorMode(colorModeProp);
+  }, [colorModeProp, themeProp]);
   React.useEffect(() => {
-    setActiveTheme(parsedTheme.theme);
-    setSelectedTheme(parsedTheme.selectedTheme);
-    setThemeMode(parsedTheme.selectedMode);
-    setColorModes(parsedTheme.colorModes);
-    theme.setElementAttrs(
-      parsedTheme.selectedTheme,
-      parsedTheme.selectedMode,
-      parsedTheme.colorScheme,
-      rootId
-    );
-  }, [parsedTheme, rootId]);
+    theme.setElementAttrs(selectedTheme, selectedMode, colorScheme, rootId);
+  }, [colorScheme, rootId, selectedMode, selectedTheme]);
   const changeTheme = React.useCallback(
     (newTheme = selectedTheme, newMode = selectedMode) => {
-      const pTheme = uikitStyles.parseTheme(themesList, newTheme, newMode);
-      setParsedTheme(pTheme);
+      setTheme(newTheme);
+      setColorMode(newMode);
     },
-    [selectedMode, selectedTheme, themesList]
+    [selectedMode, selectedTheme]
   );
   const value = React.useMemo(
     () => ({
@@ -65,25 +58,25 @@ const HvThemeProvider = ({
       rootId
     ]
   );
-  const MuiTheme = styles.createTheme({
-    components: {
-      MuiButtonBase: {
-        defaultProps: {
-          disableRipple: true
+  const muiTheme = React.useMemo(() => {
+    return styles.createTheme({
+      components: {
+        MuiButtonBase: {
+          defaultProps: {
+            disableRipple: true
+          }
         }
+      },
+      breakpoints: {
+        ...activeTheme.breakpoints
       }
-    },
-    breakpoints: {
-      values: {
-        ...activeTheme.breakpoints.values
-      }
-    }
-  });
+    });
+  }, [activeTheme.breakpoints]);
   const emotionCacheValue = React.useMemo(
     () => ({ cache: emotionCache }),
     [emotionCache]
   );
-  return /* @__PURE__ */ jsxRuntime.jsx(styles.ThemeProvider, { theme: MuiTheme, children: /* @__PURE__ */ jsxRuntime.jsx(uikitReactShared.HvThemeContext.Provider, { value, children: /* @__PURE__ */ jsxRuntime.jsx(uikitReactShared.EmotionContext.Provider, { value: emotionCacheValue, children }) }) });
+  return /* @__PURE__ */ jsxRuntime.jsx(styles.ThemeProvider, { theme: muiTheme, children: /* @__PURE__ */ jsxRuntime.jsx(uikitReactShared.HvThemeContext.Provider, { value, children: /* @__PURE__ */ jsxRuntime.jsx(uikitReactShared.EmotionContext.Provider, { value: emotionCacheValue, children }) }) });
 };
 Object.defineProperty(exports, "EmotionContext", {
   enumerable: true,

package/dist/cjs/utils/document.cjs

@@ -6,5 +6,9 @@ function getDocument() {
 function getElementById(elementId) {
   return elementId && getDocument()?.getElementById(elementId) || void 0;
 }
+function getContainerElement(elementId) {
+  return getElementById(elementId) || getDocument()?.body;
+}
+exports.getContainerElement = getContainerElement;
 exports.getDocument = getDocument;
 exports.getElementById = getElementById;

package/dist/cjs/utils/focusableElementFinder.cjs

@@ -1,7 +1,7 @@
 "use strict";
 Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
 const SELECTORS = 'input, button, select, textarea, a[href], [tabindex]:not([tabindex="-1"])';
-const getFocusableList = (node) => node && node.querySelectorAll(SELECTORS) || [];
+const getFocusableList = (node) => node?.querySelectorAll(SELECTORS) || [];
 const getPrevNextFocus = (nodeId) => {
   const nodes = getFocusableList(document);
   const nbNodes = nodes.length;

package/dist/cjs/utils/iconVariant.cjs

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const jsxRuntime = require("@emotion/react/jsx-runtime");
+const jsxRuntime = require("react/jsx-runtime");
 const uikitReactIcons = require("@hitachivantara/uikit-react-icons");
 const iconVariant = (variant, color, semantic) => {
   switch (variant) {

package/dist/cjs/utils/theme.cjs

@@ -1,9 +1,9 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const uikitStyles = require("@hitachivantara/uikit-styles");
-const document$1 = require("./document.cjs");
+const document = require("./document.cjs");
 const setElementAttrs = (themeName, modeName, colorScheme, themeRootId) => {
-  const element = themeRootId ? document.getElementById(themeRootId) : document.body;
+  const element = document.getContainerElement(themeRootId);
   if (element) {
     element.setAttribute(`data-theme`, themeName);
     element.setAttribute(`data-color-mode`, modeName);
@@ -78,7 +78,7 @@ const processThemes = (themesList) => {
   return [uikitStyles.themes.ds5];
 };
 const getVarValue = (cssVar, rootElementId) => {
-  const root = document$1.getElementById(rootElementId || "hv-root");
+  const root = document.getElementById(rootElementId || "hv-root");
   if (!root)
     return void 0;
   return getComputedStyle(root).getPropertyValue(cssVar.replace("var(", "").replace(")", "")).trim();

package/dist/esm/Accordion/Accordion.js

@@ -1,4 +1,4 @@
-import { jsxs, jsx } from "@emotion/react/jsx-runtime";
+import { jsxs, jsx } from "react/jsx-runtime";
 import { useCallback, useMemo } from "react";
 import { DropUpXS, DropDownXS } from "@hitachivantara/uikit-react-icons";
 import { useControlled } from "../hooks/useControlled.js";

package/dist/esm/ActionBar/ActionBar.js

@@ -1,4 +1,4 @@
-import { jsx } from "@emotion/react/jsx-runtime";
+import { jsx } from "react/jsx-runtime";
 import { useDefaultProps } from "../hooks/useDefaultProps.js";
 import { useClasses } from "./ActionBar.styles.js";
 import { staticClasses } from "./ActionBar.styles.js";

package/dist/esm/ActionsGeneric/ActionsGeneric.js

@@ -1,4 +1,4 @@
-import { jsx, jsxs, Fragment } from "@emotion/react/jsx-runtime";
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
 import { isValidElement } from "react";
 import { MoreOptionsVertical } from "@hitachivantara/uikit-react-icons";
 import { useDefaultProps } from "../hooks/useDefaultProps.js";

package/dist/esm/AppSwitcher/Action/Action.js

@@ -1,4 +1,4 @@
-import { jsx, jsxs, Fragment } from "@emotion/react/jsx-runtime";
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
 import { useState, useCallback } from "react";
 import { Info } from "@hitachivantara/uikit-react-icons";
 import { theme, getColor } from "@hitachivantara/uikit-styles";

package/dist/esm/AppSwitcher/AppSwitcher.js

@@ -1,4 +1,4 @@
-import { jsx, jsxs } from "@emotion/react/jsx-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { useMemo } from "react";
 import { useDefaultProps } from "../hooks/useDefaultProps.js";
 import { useClasses } from "./AppSwitcher.styles.js";
@@ -24,7 +24,7 @@ const HvAppSwitcher = (props) => {
   } = useDefaultProps("HvAppSwitcher", props);
   const { classes, cx } = useClasses(classesProp);
   const panelActions = useMemo(
-    () => applications && applications?.map((application) => {
+    () => applications?.map((application) => {
       if (application.name) {
         return /* @__PURE__ */ jsx(
           HvAppSwitcherAction,

package/dist/esm/AppSwitcher/AppSwitcher.js.map

@@ -1 +1 @@
-{"version":3,"file":"AppSwitcher.js","sources":["../../../src/AppSwitcher/AppSwitcher.tsx"],"sourcesContent":["import { useMemo } from \"react\";\n\nimport { useDefaultProps } from \"../hooks/useDefaultProps\";\nimport { HvListContainer } from \"../ListContainer\";\nimport { HvOverflowTooltip } from \"../OverflowTooltip\";\nimport { HvBaseProps } from \"../types/generic\";\nimport { HvTypography } from \"../Typography\";\nimport { ExtractNames } from \"../utils/classes\";\nimport { HvAppSwitcherAction, HvAppSwitcherActionApplication } from \"./Action\";\nimport { staticClasses, useClasses } from \"./AppSwitcher.styles\";\n\nexport { staticClasses as appSwitcherClasses };\n\nexport type HvAppSwitcherClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvAppSwitcherProps extends HvBaseProps {\n  /** Number of columns to render. One, two, or whatever fits the component's width. */\n  layout?: \"single\" | \"dual\" | \"fluid\";\n  /** Title to be displayed on the header of the component. */\n  title?: string;\n  /** The list of applications to be used to render the actions on the component. */\n  applications?: HvAppSwitcherActionApplication[];\n  /** Triggered when an action is clicked. */\n  onActionClickedCallback?: (\n    event: React.MouseEvent,\n    application: HvAppSwitcherActionApplication,\n  ) => void;\n  /** Must return a boolean stating if the action element is selected or not. */\n  isActionSelectedCallback?: (\n    application: HvAppSwitcherActionApplication,\n  ) => boolean;\n  /** Element to be added to the header container, if none is provided a label with the title will be added. */\n  header?: React.ReactNode;\n  /** Element to be added to the footer container. */\n  footer?: React.ReactNode;\n  /**\n   * Flag stating if the panel is opened or closed.\n   *\n   * @deprecated This logic should be external, i.e. using the HvAppSwitcher inside a Drawer component.\n   */\n  isOpen?: boolean;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvAppSwitcherClasses;\n}\n\nexport const HvAppSwitcher = (props: HvAppSwitcherProps) => {\n  const {\n    className,\n    classes: classesProp,\n    layout = \"single\",\n    title,\n    applications,\n    onActionClickedCallback = () => {},\n    isActionSelectedCallback = () => false,\n    header,\n    footer,\n    isOpen,\n    ...others\n  } = useDefaultProps(\"HvAppSwitcher\", props);\n  const { classes, cx } = useClasses(classesProp);\n\n  const panelActions = useMemo(\n    () =>\n      applications &&\n      applications?.map((application) => {\n        if (application.name) {\n          return (\n            <HvAppSwitcherAction\n              key={application.id || `${application.name}_${application.url}`}\n              application={application}\n              onClickCallback={onActionClickedCallback}\n              isSelectedCallback={isActionSelectedCallback}\n              classes={{\n                root: classes.item,\n                selected: classes.itemSelected,\n                disabled: classes.itemDisabled,\n                typography: classes.itemTrigger,\n                icon: classes.itemIcon,\n                title: classes.itemTitle,\n                iconInfo: classes.itemInfoIcon,\n              }}\n            />\n          );\n        }\n\n        return undefined;\n      }),\n    [applications, classes, isActionSelectedCallback, onActionClickedCallback],\n  );\n\n  return (\n    <div\n      className={cx(\n        classes.root,\n        classes[layout],\n        { [classes.open]: !!isOpen, [classes.closed]: isOpen === false },\n        className,\n      )}\n      {...others}\n    >\n      {(header && (\n        <HvTypography component=\"div\" variant=\"label\" className={classes.title}>\n          {header}\n        </HvTypography>\n      )) ||\n        (title && (\n          <HvOverflowTooltip\n            className={classes.title}\n            data={title}\n            placement=\"top-start\"\n            classes={{\n              tooltipAnchorParagraph: classes.titleAnchor,\n            }}\n          />\n        ))}\n      <HvListContainer disableGutters className={classes.actionsContainer}>\n        {panelActions}\n      </HvListContainer>\n      {footer && (\n        <HvTypography\n          component=\"div\"\n          variant=\"label\"\n          className={classes.footerContainer}\n        >\n          {footer}\n        </HvTypography>\n      )}\n    </div>\n  );\n};\n"],"names":[],"mappings":";;;;;;;;;AA6Ca,MAAA,gBAAgB,CAAC,UAA8B;AACpD,QAAA;AAAA,IACJ;AAAA,IACA,SAAS;AAAA,IACT,SAAS;AAAA,IACT;AAAA,IACA;AAAA,IACA,0BAA0B,MAAM;AAAA,IAAC;AAAA,IACjC,2BAA2B,MAAM;AAAA,IACjC;AAAA,IACA;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EAAA,IACD,gBAAgB,iBAAiB,KAAK;AAC1C,QAAM,EAAE,SAAS,GAAG,IAAI,WAAW,WAAW;AAE9C,QAAM,eAAe;AAAA,IACnB,MACE,gBACA,cAAc,IAAI,CAAC,gBAAgB;AACjC,UAAI,YAAY,MAAM;AAElB,eAAA;AAAA,UAAC;AAAA,UAAA;AAAA,YAEC;AAAA,YACA,iBAAiB;AAAA,YACjB,oBAAoB;AAAA,YACpB,SAAS;AAAA,cACP,MAAM,QAAQ;AAAA,cACd,UAAU,QAAQ;AAAA,cAClB,UAAU,QAAQ;AAAA,cAClB,YAAY,QAAQ;AAAA,cACpB,MAAM,QAAQ;AAAA,cACd,OAAO,QAAQ;AAAA,cACf,UAAU,QAAQ;AAAA,YACpB;AAAA,UAAA;AAAA,UAZK,YAAY,MAAM,GAAG,YAAY,IAAI,IAAI,YAAY,GAAG;AAAA,QAAA;AAAA,MAenE;AAEO,aAAA;AAAA,IAAA,CACR;AAAA,IACH,CAAC,cAAc,SAAS,0BAA0B,uBAAuB;AAAA,EAAA;AAIzE,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAW;AAAA,QACT,QAAQ;AAAA,QACR,QAAQ,MAAM;AAAA,QACd,EAAE,CAAC,QAAQ,IAAI,GAAG,CAAC,CAAC,QAAQ,CAAC,QAAQ,MAAM,GAAG,WAAW,MAAM;AAAA,QAC/D;AAAA,MACF;AAAA,MACC,GAAG;AAAA,MAEF,UAAA;AAAA,QACA,UAAA,oBAAC,cAAa,EAAA,WAAU,OAAM,SAAQ,SAAQ,WAAW,QAAQ,OAC9D,UACH,OAAA,CAAA,KAEC,SACC;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAW,QAAQ;AAAA,YACnB,MAAM;AAAA,YACN,WAAU;AAAA,YACV,SAAS;AAAA,cACP,wBAAwB,QAAQ;AAAA,YAClC;AAAA,UAAA;AAAA,QACF;AAAA,4BAEH,iBAAgB,EAAA,gBAAc,MAAC,WAAW,QAAQ,kBAChD,UACH,cAAA;AAAA,QACC,UACC;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAU;AAAA,YACV,SAAQ;AAAA,YACR,WAAW,QAAQ;AAAA,YAElB,UAAA;AAAA,UAAA;AAAA,QACH;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAIR;"}
+{"version":3,"file":"AppSwitcher.js","sources":["../../../src/AppSwitcher/AppSwitcher.tsx"],"sourcesContent":["import { useMemo } from \"react\";\n\nimport { useDefaultProps } from \"../hooks/useDefaultProps\";\nimport { HvListContainer } from \"../ListContainer\";\nimport { HvOverflowTooltip } from \"../OverflowTooltip\";\nimport { HvBaseProps } from \"../types/generic\";\nimport { HvTypography } from \"../Typography\";\nimport { ExtractNames } from \"../utils/classes\";\nimport { HvAppSwitcherAction, HvAppSwitcherActionApplication } from \"./Action\";\nimport { staticClasses, useClasses } from \"./AppSwitcher.styles\";\n\nexport { staticClasses as appSwitcherClasses };\n\nexport type HvAppSwitcherClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvAppSwitcherProps extends HvBaseProps {\n  /** Number of columns to render. One, two, or whatever fits the component's width. */\n  layout?: \"single\" | \"dual\" | \"fluid\";\n  /** Title to be displayed on the header of the component. */\n  title?: string;\n  /** The list of applications to be used to render the actions on the component. */\n  applications?: HvAppSwitcherActionApplication[];\n  /** Triggered when an action is clicked. */\n  onActionClickedCallback?: (\n    event: React.MouseEvent,\n    application: HvAppSwitcherActionApplication,\n  ) => void;\n  /** Must return a boolean stating if the action element is selected or not. */\n  isActionSelectedCallback?: (\n    application: HvAppSwitcherActionApplication,\n  ) => boolean;\n  /** Element to be added to the header container, if none is provided a label with the title will be added. */\n  header?: React.ReactNode;\n  /** Element to be added to the footer container. */\n  footer?: React.ReactNode;\n  /**\n   * Flag stating if the panel is opened or closed.\n   *\n   * @deprecated This logic should be external, i.e. using the HvAppSwitcher inside a Drawer component.\n   */\n  isOpen?: boolean;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvAppSwitcherClasses;\n}\n\nexport const HvAppSwitcher = (props: HvAppSwitcherProps) => {\n  const {\n    className,\n    classes: classesProp,\n    layout = \"single\",\n    title,\n    applications,\n    onActionClickedCallback = () => {},\n    isActionSelectedCallback = () => false,\n    header,\n    footer,\n    isOpen,\n    ...others\n  } = useDefaultProps(\"HvAppSwitcher\", props);\n  const { classes, cx } = useClasses(classesProp);\n\n  const panelActions = useMemo(\n    () =>\n      applications?.map((application) => {\n        if (application.name) {\n          return (\n            <HvAppSwitcherAction\n              key={application.id || `${application.name}_${application.url}`}\n              application={application}\n              onClickCallback={onActionClickedCallback}\n              isSelectedCallback={isActionSelectedCallback}\n              classes={{\n                root: classes.item,\n                selected: classes.itemSelected,\n                disabled: classes.itemDisabled,\n                typography: classes.itemTrigger,\n                icon: classes.itemIcon,\n                title: classes.itemTitle,\n                iconInfo: classes.itemInfoIcon,\n              }}\n            />\n          );\n        }\n\n        return undefined;\n      }),\n    [applications, classes, isActionSelectedCallback, onActionClickedCallback],\n  );\n\n  return (\n    <div\n      className={cx(\n        classes.root,\n        classes[layout],\n        { [classes.open]: !!isOpen, [classes.closed]: isOpen === false },\n        className,\n      )}\n      {...others}\n    >\n      {(header && (\n        <HvTypography component=\"div\" variant=\"label\" className={classes.title}>\n          {header}\n        </HvTypography>\n      )) ||\n        (title && (\n          <HvOverflowTooltip\n            className={classes.title}\n            data={title}\n            placement=\"top-start\"\n            classes={{\n              tooltipAnchorParagraph: classes.titleAnchor,\n            }}\n          />\n        ))}\n      <HvListContainer disableGutters className={classes.actionsContainer}>\n        {panelActions}\n      </HvListContainer>\n      {footer && (\n        <HvTypography\n          component=\"div\"\n          variant=\"label\"\n          className={classes.footerContainer}\n        >\n          {footer}\n        </HvTypography>\n      )}\n    </div>\n  );\n};\n"],"names":[],"mappings":";;;;;;;;;AA6Ca,MAAA,gBAAgB,CAAC,UAA8B;AACpD,QAAA;AAAA,IACJ;AAAA,IACA,SAAS;AAAA,IACT,SAAS;AAAA,IACT;AAAA,IACA;AAAA,IACA,0BAA0B,MAAM;AAAA,IAAC;AAAA,IACjC,2BAA2B,MAAM;AAAA,IACjC;AAAA,IACA;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EAAA,IACD,gBAAgB,iBAAiB,KAAK;AAC1C,QAAM,EAAE,SAAS,GAAG,IAAI,WAAW,WAAW;AAE9C,QAAM,eAAe;AAAA,IACnB,MACE,cAAc,IAAI,CAAC,gBAAgB;AACjC,UAAI,YAAY,MAAM;AAElB,eAAA;AAAA,UAAC;AAAA,UAAA;AAAA,YAEC;AAAA,YACA,iBAAiB;AAAA,YACjB,oBAAoB;AAAA,YACpB,SAAS;AAAA,cACP,MAAM,QAAQ;AAAA,cACd,UAAU,QAAQ;AAAA,cAClB,UAAU,QAAQ;AAAA,cAClB,YAAY,QAAQ;AAAA,cACpB,MAAM,QAAQ;AAAA,cACd,OAAO,QAAQ;AAAA,cACf,UAAU,QAAQ;AAAA,YACpB;AAAA,UAAA;AAAA,UAZK,YAAY,MAAM,GAAG,YAAY,IAAI,IAAI,YAAY,GAAG;AAAA,QAAA;AAAA,MAenE;AAEO,aAAA;AAAA,IAAA,CACR;AAAA,IACH,CAAC,cAAc,SAAS,0BAA0B,uBAAuB;AAAA,EAAA;AAIzE,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAW;AAAA,QACT,QAAQ;AAAA,QACR,QAAQ,MAAM;AAAA,QACd,EAAE,CAAC,QAAQ,IAAI,GAAG,CAAC,CAAC,QAAQ,CAAC,QAAQ,MAAM,GAAG,WAAW,MAAM;AAAA,QAC/D;AAAA,MACF;AAAA,MACC,GAAG;AAAA,MAEF,UAAA;AAAA,QACA,UAAA,oBAAC,cAAa,EAAA,WAAU,OAAM,SAAQ,SAAQ,WAAW,QAAQ,OAC9D,UACH,OAAA,CAAA,KAEC,SACC;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAW,QAAQ;AAAA,YACnB,MAAM;AAAA,YACN,WAAU;AAAA,YACV,SAAS;AAAA,cACP,wBAAwB,QAAQ;AAAA,YAClC;AAAA,UAAA;AAAA,QACF;AAAA,4BAEH,iBAAgB,EAAA,gBAAc,MAAC,WAAW,QAAQ,kBAChD,UACH,cAAA;AAAA,QACC,UACC;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAU;AAAA,YACV,SAAQ;AAAA,YACR,WAAW,QAAQ;AAAA,YAElB,UAAA;AAAA,UAAA;AAAA,QACH;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAIR;"}

package/dist/esm/Avatar/Avatar.js

@@ -1,4 +1,4 @@
-import { jsx, jsxs } from "@emotion/react/jsx-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { forwardRef } from "react";
 import MuiAvatar from "@mui/material/Avatar";
 import { User } from "@hitachivantara/uikit-react-icons";

package/dist/esm/AvatarGroup/AvatarGroup.js

@@ -1,4 +1,4 @@
-import { jsx, jsxs } from "@emotion/react/jsx-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { forwardRef, Children } from "react";
 import { css } from "@emotion/css";
 import { theme } from "@hitachivantara/uikit-styles";

package/dist/esm/AvatarGroup/AvatarGroupContext.js

@@ -1,4 +1,4 @@
-import { jsx } from "@emotion/react/jsx-runtime";
+import { jsx } from "react/jsx-runtime";
 import { createContext, useMemo, useContext } from "react";
 const HvAvatarGroupContext = createContext(null);
 const HvAvatarGroupProvider = ({

package/dist/esm/Badge/Badge.js

@@ -1,4 +1,4 @@
-import { jsxs, jsx } from "@emotion/react/jsx-runtime";
+import { jsxs, jsx } from "react/jsx-runtime";
 import { useDefaultProps } from "../hooks/useDefaultProps.js";
 import { useClasses } from "./Badge.styles.js";
 import { staticClasses } from "./Badge.styles.js";

package/dist/esm/Banner/Banner.js

@@ -1,4 +1,4 @@
-import { jsx } from "@emotion/react/jsx-runtime";
+import { jsx } from "react/jsx-runtime";
 import { useCallback } from "react";
 import Slide from "@mui/material/Slide";
 import Snackbar from "@mui/material/Snackbar";

package/dist/esm/Banner/BannerContent/ActionContainer/ActionContainer.js

@@ -1,4 +1,4 @@
-import { jsxs, jsx } from "@emotion/react/jsx-runtime";
+import { jsxs, jsx } from "react/jsx-runtime";
 import { Close } from "@hitachivantara/uikit-react-icons";
 import { useClasses } from "./ActionContainer.styles.js";
 import { staticClasses } from "./ActionContainer.styles.js";

package/dist/esm/Banner/BannerContent/BannerContent.js

@@ -1,4 +1,4 @@
-import { jsx } from "@emotion/react/jsx-runtime";
+import { jsx } from "react/jsx-runtime";
 import { forwardRef } from "react";
 import SnackbarContent from "@mui/material/SnackbarContent";
 import { iconVariant } from "../../utils/iconVariant.js";

package/dist/esm/Banner/BannerContent/MessageContainer/MessageContainer.js

@@ -1,4 +1,4 @@
-import { jsxs, Fragment, jsx } from "@emotion/react/jsx-runtime";
+import { jsxs, Fragment, jsx } from "react/jsx-runtime";
 import { setId } from "../../../utils/setId.js";
 import { useClasses } from "./MessageContainer.styles.js";
 import { staticClasses } from "./MessageContainer.styles.js";

package/dist/esm/BaseCheckBox/BaseCheckBox.js

@@ -1,4 +1,4 @@
-import { jsx } from "@emotion/react/jsx-runtime";
+import { jsx } from "react/jsx-runtime";
 import { forwardRef, useState, useCallback } from "react";
 import MuiCheckbox from "@mui/material/Checkbox";
 import { useDefaultProps } from "../hooks/useDefaultProps.js";

package/dist/esm/BaseCheckBox/icons.js

@@ -1,4 +1,4 @@
-import { jsx } from "@emotion/react/jsx-runtime";
+import { jsx } from "react/jsx-runtime";
 const Box = () => {
   return /* @__PURE__ */ jsx("svg", { viewBox: "0 0 14 14", fill: "currentColor", children: /* @__PURE__ */ jsx("path", { d: "m0,0l16,0l0,16l-16,0l0,-16z" }) });
 };

package/dist/esm/BaseDropdown/BaseDropdown.js

@@ -1,4 +1,4 @@
-import { jsxs, jsx } from "@emotion/react/jsx-runtime";
+import { jsxs, jsx } from "react/jsx-runtime";
 import { forwardRef, useCallback, isValidElement, cloneElement, useState, useMemo } from "react";
 import { createPortal } from "react-dom";
 import { usePopper } from "react-popper";

package/dist/esm/BaseInput/BaseInput.js

@@ -1,4 +1,4 @@
-import { jsxs, Fragment, jsx } from "@emotion/react/jsx-runtime";
+import { jsxs, Fragment, jsx } from "react/jsx-runtime";
 import { useContext } from "react";
 import { css, Global } from "@emotion/react";
 import MuiInput from "@mui/material/Input";

package/dist/esm/BaseRadio/BaseRadio.js

@@ -1,4 +1,4 @@
-import { jsx } from "@emotion/react/jsx-runtime";
+import { jsx } from "react/jsx-runtime";
 import { forwardRef, useState, useCallback } from "react";
 import MuiRadio from "@mui/material/Radio";
 import { useDefaultProps } from "../hooks/useDefaultProps.js";

package/dist/esm/BaseRadio/icons.js

@@ -1,4 +1,4 @@
-import { jsx } from "@emotion/react/jsx-runtime";
+import { jsx } from "react/jsx-runtime";
 const Selected = () => {
   return /* @__PURE__ */ jsx("svg", { width: "14", height: "14", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx(
     "path",

package/dist/esm/BaseSwitch/BaseSwitch.js

@@ -1,4 +1,4 @@
-import { jsx } from "@emotion/react/jsx-runtime";
+import { jsx } from "react/jsx-runtime";
 import { forwardRef, useState, useCallback } from "react";
 import MuiSwitch from "@mui/material/Switch";
 import { useDefaultProps } from "../hooks/useDefaultProps.js";

package/dist/esm/Box/Box.js

@@ -1,4 +1,4 @@
-import { jsx } from "@emotion/react/jsx-runtime";
+import { jsx } from "react/jsx-runtime";
 import { forwardRef } from "react";
 import { theme } from "@hitachivantara/uikit-styles";
 import { useDefaultProps } from "../hooks/useDefaultProps.js";

package/dist/esm/BreadCrumb/BreadCrumb.js

@@ -1,4 +1,4 @@
-import { jsx } from "@emotion/react/jsx-runtime";
+import { jsx } from "react/jsx-runtime";
 import { isValidElement } from "react";
 import { useDefaultProps } from "../hooks/useDefaultProps.js";
 import { useClasses } from "./BreadCrumb.styles.js";

package/dist/esm/BreadCrumb/Page/Page.js

@@ -1,4 +1,4 @@
-import { jsx } from "@emotion/react/jsx-runtime";
+import { jsx } from "react/jsx-runtime";
 import { useDefaultProps } from "../../hooks/useDefaultProps.js";
 import { useClasses } from "./Page.styles.js";
 import { staticClasses } from "./Page.styles.js";

package/dist/esm/BreadCrumb/PathElement/PathElement.js

@@ -1,4 +1,4 @@
-import { jsxs, jsx } from "@emotion/react/jsx-runtime";
+import { jsxs, jsx } from "react/jsx-runtime";
 import { DropRightXS } from "@hitachivantara/uikit-react-icons";
 import { useClasses } from "./PathElement.styles.js";
 import { staticClasses } from "./PathElement.styles.js";

package/dist/esm/BreadCrumb/utils.js

@@ -1,4 +1,4 @@
-import { jsx } from "@emotion/react/jsx-runtime";
+import { jsx } from "react/jsx-runtime";
 import { MoreOptionsHorizontal } from "@hitachivantara/uikit-react-icons";
 import { setId } from "../utils/setId.js";
 import { HvDropDownMenu } from "../DropDownMenu/DropDownMenu.js";

package/dist/esm/BulkActions/BulkActions.js

@@ -1,4 +1,4 @@
-import { jsx, jsxs, Fragment } from "@emotion/react/jsx-runtime";
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
 import { useDefaultProps } from "../hooks/useDefaultProps.js";
 import { useTheme } from "../hooks/useTheme.js";
 import { setId } from "../utils/setId.js";