@hitachivantara/uikit-react-core 5.39.1 → 5.39.3

package/dist/cjs/components/AppSwitcher/Action/Action.cjs

@@ -20,19 +20,8 @@ const HvAppSwitcherAction = ({
   },
   isSelectedCallback = () => false
 }) => {
-  const {
-    classes,
-    cx
-  } = Action_styles.useClasses(classesProp);
-  const {
-    name,
-    description,
-    disabled,
-    iconElement,
-    iconUrl,
-    url,
-    target
-  } = application;
+  const { classes, cx } = Action_styles.useClasses(classesProp);
+  const { name, description, disabled, iconElement, iconUrl, url, target } = application;
   const color = disabled ? uikitStyles.theme.colors.secondary_60 : uikitStyles.getColor(application?.color, uikitStyles.theme.colors.secondary);
   const [validIconUrl, setValidIconUrl] = React.useState(true);
   const renderApplicationIcon = () => {
@@ -40,54 +29,119 @@ const HvAppSwitcherAction = ({
       return iconElement;
     }
     if (iconUrl && validIconUrl) {
-      return /* @__PURE__ */ jsxRuntime.jsx("img", { className: classes.iconUrl, src: iconUrl, onError: () => {
-        setValidIconUrl(false);
-      }, alt: description });
+      return /* @__PURE__ */ jsxRuntime.jsx(
+        "img",
+        {
+          className: classes.iconUrl,
+          src: iconUrl,
+          onError: () => {
+            setValidIconUrl(false);
+          },
+          alt: description
+        }
+      );
     }
     const brokenTitle = name.split(" ");
     const initials = brokenTitle[0].substring(0, 1) + (brokenTitle[1] ? brokenTitle[1].substring(0, 1) : "");
     return /* @__PURE__ */ jsxRuntime.jsx(Avatar.HvAvatar, { size: "sm", backgroundColor: color, variant: "square", "aria-hidden": true, children: initials });
   };
   const isSelected = isSelectedCallback(application);
-  const handleOnClick = React.useCallback((event) => {
-    if (disabled) {
-      event.preventDefault();
-      return;
-    }
-    onClickCallback?.(event, {
-      ...application,
-      isSelected
-    });
-  }, [application, disabled, isSelected, onClickCallback]);
+  const handleOnClick = React.useCallback(
+    (event) => {
+      if (disabled) {
+        event.preventDefault();
+        return;
+      }
+      onClickCallback?.(event, { ...application, isSelected });
+    },
+    [application, disabled, isSelected, onClickCallback]
+  );
   const isLink = url != null;
   const descriptionElementId = useUniqueId.useUniqueId(id, "hvAction-description");
-  const renderApplication = React.useCallback((children) => {
-    const typographyProps = {
-      className: classes.typography,
-      onClick: handleOnClick,
-      style: {
-        borderColor: color
-      },
-      "aria-label": name,
-      ...description && {
-        "aria-describedby": descriptionElementId
+  const renderApplication = React.useCallback(
+    (children) => {
+      const typographyProps = {
+        className: classes.typography,
+        onClick: handleOnClick,
+        style: { borderColor: color },
+        "aria-label": name,
+        ...description && { "aria-describedby": descriptionElementId }
+      };
+      if (isLink) {
+        return /* @__PURE__ */ jsxRuntime.jsx(
+          Typography.HvTypography,
+          {
+            component: "a",
+            href: url,
+            target: target || "_top",
+            ...typographyProps,
+            children
+          }
+        );
       }
-    };
-    if (isLink) {
-      return /* @__PURE__ */ jsxRuntime.jsx(Typography.HvTypography, { component: "a", href: url, target: target || "_top", ...typographyProps, children });
+      return /* @__PURE__ */ jsxRuntime.jsx(Typography.HvTypography, { component: "button", ...typographyProps, children });
+    },
+    [
+      classes.typography,
+      color,
+      description,
+      descriptionElementId,
+      handleOnClick,
+      isLink,
+      name,
+      target,
+      url
+    ]
+  );
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    ListItem.HvListItem,
+    {
+      id,
+      interactive: true,
+      tabIndex: 0,
+      selected: isSelected,
+      disabled,
+      className: cx(
+        classes.root,
+        { [classes.disabled]: disabled, [classes.selected]: isSelected },
+        className
+      ),
+      children: renderApplication(
+        /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: classes.icon, children: renderApplicationIcon() }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            OverflowTooltip.HvOverflowTooltip,
+            {
+              paragraphOverflow: true,
+              className: classes.title,
+              placement: "top-start",
+              data: name,
+              classes: {
+                tooltipAnchorParagraph: classes.titleAnchor
+              }
+            }
+          ),
+          description && /* @__PURE__ */ jsxRuntime.jsx(
+            Tooltip.HvTooltip,
+            {
+              disableFocusListener: true,
+              disableTouchListener: true,
+              title: /* @__PURE__ */ jsxRuntime.jsx(Typography.HvTypography, { children: description }),
+              children: /* @__PURE__ */ jsxRuntime.jsx("div", { children: /* @__PURE__ */ jsxRuntime.jsx(
+                uikitReactIcons.Info,
+                {
+                  className: classes.iconInfo,
+                  role: "img",
+                  "aria-label": description,
+                  id: descriptionElementId
+                }
+              ) })
+            }
+          )
+        ] })
+      )
     }
-    return /* @__PURE__ */ jsxRuntime.jsx(Typography.HvTypography, { component: "button", ...typographyProps, children });
-  }, [classes.typography, color, description, descriptionElementId, handleOnClick, isLink, name, target, url]);
-  return /* @__PURE__ */ jsxRuntime.jsx(ListItem.HvListItem, { id, interactive: true, tabIndex: 0, selected: isSelected, disabled, className: cx(classes.root, {
-    [classes.disabled]: disabled,
-    [classes.selected]: isSelected
-  }, className), children: renderApplication(/* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-    /* @__PURE__ */ jsxRuntime.jsx("div", { className: classes.icon, children: renderApplicationIcon() }),
-    /* @__PURE__ */ jsxRuntime.jsx(OverflowTooltip.HvOverflowTooltip, { paragraphOverflow: true, className: classes.title, placement: "top-start", data: name, classes: {
-      tooltipAnchorParagraph: classes.titleAnchor
-    } }),
-    description && /* @__PURE__ */ jsxRuntime.jsx(Tooltip.HvTooltip, { disableFocusListener: true, disableTouchListener: true, title: /* @__PURE__ */ jsxRuntime.jsx(Typography.HvTypography, { children: description }), children: /* @__PURE__ */ jsxRuntime.jsx("div", { children: /* @__PURE__ */ jsxRuntime.jsx(uikitReactIcons.Info, { className: classes.iconInfo, role: "img", "aria-label": description, id: descriptionElementId }) }) })
-  ] })) });
+  );
 };
 exports.appSwitcherActionClasses = Action_styles.staticClasses;
 exports.HvAppSwitcherAction = HvAppSwitcherAction;

package/dist/cjs/components/AppSwitcher/Action/Action.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Action.cjs","sources":["../../../../../src/components/AppSwitcher/Action/Action.tsx"],"sourcesContent":["import { useCallback, useState } from \"react\";\n\nimport { theme, getColor, HvColorAny } from \"@hitachivantara/uikit-styles\";\nimport { Info } from \"@hitachivantara/uikit-react-icons\";\n\nimport { HvAvatar } from \"@core/components/Avatar\";\nimport { HvListItem } from \"@core/components/ListContainer\";\nimport { HvTypography } from \"@core/components/Typography\";\nimport { HvTooltip } from \"@core/components/Tooltip\";\nimport { HvOverflowTooltip } from \"@core/components/OverflowTooltip\";\nimport { HvBaseProps } from \"@core/types/generic\";\nimport { useUniqueId } from \"@core/hooks/useUniqueId\";\nimport { ExtractNames } from \"@core/utils/classes\";\n\nimport { useClasses, staticClasses } from \"./Action.styles\";\n\nexport { staticClasses as appSwitcherActionClasses };\n\nexport type HvAppSwitcherActionClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvAppSwitcherActionApplication {\n  /** Id of the application. */\n  id?: string;\n  /** Name of the application, this is the value that will be displayed on the component. */\n  name: string;\n  /** URL with the icon location to be used to represent the application. iconUrl will only be used if no iconElement is provided. */\n  iconUrl?: string;\n  /** Element to be added as the icon representing the application. The iconElement will be the primary option to be displayed. */\n  iconElement?: React.ReactElement;\n  /** Small description of the application. */\n  description?: string;\n  /**  URL where the application is accessible. */\n  url?: string;\n  /** Defines if the application should be opened in the same tab or in a new one. */\n  target?: \"_top\" | \"_blank\";\n  /** If true, the item will be disabled. */\n  disabled?: boolean;\n  /** True when the application is selected, false otherwise. */\n  isSelected?: boolean;\n  /** The color of the application. */\n  color?: HvColorAny;\n}\n\nexport interface HvAppSwitcherActionProps extends HvBaseProps {\n  /** The application data to be used to render the Action object. */\n  application: HvAppSwitcherActionApplication;\n  /** Callback triggered when the action is clicked. */\n  onClickCallback?: (\n    event: React.MouseEvent,\n    application: HvAppSwitcherActionApplication\n  ) => void;\n  /** Must return a boolean stating if the action element is selected or not. */\n  isSelectedCallback?: (application: HvAppSwitcherActionApplication) => boolean;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvAppSwitcherActionClasses;\n}\n\nexport const HvAppSwitcherAction = ({\n  id,\n  className,\n  classes: classesProp,\n  application,\n  onClickCallback = () => {},\n  isSelectedCallback = () => false,\n}: HvAppSwitcherActionProps) => {\n  const { classes, cx } = useClasses(classesProp);\n\n  const { name, description, disabled, iconElement, iconUrl, url, target } =\n    application;\n\n  const color = disabled\n    ? theme.colors.secondary_60\n    : getColor(application?.color, theme.colors.secondary);\n\n  const [validIconUrl, setValidIconUrl] = useState<boolean>(true);\n\n  const renderApplicationIcon = () => {\n    if (iconElement) {\n      return iconElement;\n    }\n\n    if (iconUrl && validIconUrl) {\n      return (\n        <img\n          className={classes.iconUrl}\n          src={iconUrl}\n          onError={() => {\n            setValidIconUrl(false);\n          }}\n          alt={description}\n        />\n      );\n    }\n\n    const brokenTitle = name.split(\" \");\n    const initials =\n      brokenTitle[0].substring(0, 1) +\n      (brokenTitle[1] ? brokenTitle[1].substring(0, 1) : \"\");\n\n    return (\n      <HvAvatar size=\"sm\" backgroundColor={color} variant=\"square\" aria-hidden>\n        {initials}\n      </HvAvatar>\n    );\n  };\n\n  const isSelected = isSelectedCallback(application);\n\n  /**\n   * Handles the onClick event and triggers the appropriate callback if it exists.\n   */\n  const handleOnClick = useCallback(\n    (event: React.MouseEvent) => {\n      if (disabled) {\n        event.preventDefault();\n        return;\n      }\n\n      onClickCallback?.(event, { ...application, isSelected });\n    },\n    [application, disabled, isSelected, onClickCallback]\n  );\n\n  const isLink = url != null;\n  const descriptionElementId = useUniqueId(id, \"hvAction-description\");\n\n  const renderApplication = useCallback(\n    (children: React.ReactNode) => {\n      const typographyProps = {\n        className: classes.typography,\n        onClick: handleOnClick,\n        style: { borderColor: color },\n        \"aria-label\": name,\n        ...(description && { \"aria-describedby\": descriptionElementId }),\n      };\n\n      if (isLink) {\n        return (\n          <HvTypography\n            component=\"a\"\n            href={url}\n            target={target || \"_top\"}\n            {...typographyProps}\n          >\n            {children}\n          </HvTypography>\n        );\n      }\n\n      return (\n        <HvTypography component=\"button\" {...typographyProps}>\n          {children}\n        </HvTypography>\n      );\n    },\n    [\n      classes.typography,\n      color,\n      description,\n      descriptionElementId,\n      handleOnClick,\n      isLink,\n      name,\n      target,\n      url,\n    ]\n  );\n\n  return (\n    <HvListItem\n      id={id}\n      interactive\n      tabIndex={0}\n      selected={isSelected}\n      disabled={disabled}\n      className={cx(\n        classes.root,\n        { [classes.disabled]: disabled, [classes.selected]: isSelected },\n        className\n      )}\n    >\n      {/* As HvTooltip don't have the id prop, is not possible to use the aria-labelledby to reference it.\n       In substitution is used the aria-label with the \"title\" value */}\n      {renderApplication(\n        <>\n          <div className={classes.icon}>{renderApplicationIcon()}</div>\n\n          <HvOverflowTooltip\n            paragraphOverflow\n            className={classes.title}\n            placement=\"top-start\"\n            data={name}\n            classes={{\n              tooltipAnchorParagraph: classes.titleAnchor,\n            }}\n          />\n\n          {description && (\n            <HvTooltip\n              disableFocusListener\n              disableTouchListener\n              title={<HvTypography>{description}</HvTypography>}\n            >\n              <div>\n                <Info\n                  className={classes.iconInfo}\n                  role=\"img\"\n                  aria-label={description}\n                  id={descriptionElementId}\n                />\n              </div>\n            </HvTooltip>\n          )}\n        </>\n      )}\n    </HvListItem>\n  );\n};\n"],"names":["HvAppSwitcherAction","id","className","classes","classesProp","application","onClickCallback","isSelectedCallback","cx","useClasses","name","description","disabled","iconElement","iconUrl","url","target","color","theme","colors","secondary_60","getColor","secondary","validIconUrl","setValidIconUrl","useState","renderApplicationIcon","jsx","brokenTitle","split","initials","substring","HvAvatar","isSelected","handleOnClick","useCallback","event","preventDefault","isLink","descriptionElementId","useUniqueId","renderApplication","children","typographyProps","typography","onClick","style","borderColor","HvTypography","HvListItem","root","selected","jsxs","Fragment","icon","HvOverflowTooltip","title","tooltipAnchorParagraph","titleAnchor","HvTooltip","Info","iconInfo"],"mappings":"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"}
+{"version":3,"file":"Action.cjs","sources":["../../../../../src/components/AppSwitcher/Action/Action.tsx"],"sourcesContent":["import { useCallback, useState } from \"react\";\n\nimport { theme, getColor, HvColorAny } from \"@hitachivantara/uikit-styles\";\nimport { Info } from \"@hitachivantara/uikit-react-icons\";\n\nimport { HvAvatar } from \"@core/components/Avatar\";\nimport { HvListItem } from \"@core/components/ListContainer\";\nimport { HvTypography } from \"@core/components/Typography\";\nimport { HvTooltip } from \"@core/components/Tooltip\";\nimport { HvOverflowTooltip } from \"@core/components/OverflowTooltip\";\nimport { HvBaseProps } from \"@core/types/generic\";\nimport { useUniqueId } from \"@core/hooks/useUniqueId\";\nimport { ExtractNames } from \"@core/utils/classes\";\n\nimport { useClasses, staticClasses } from \"./Action.styles\";\n\nexport { staticClasses as appSwitcherActionClasses };\n\nexport type HvAppSwitcherActionClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvAppSwitcherActionApplication {\n  /** Id of the application. */\n  id?: string;\n  /** Name of the application, this is the value that will be displayed on the component. */\n  name: string;\n  /** URL with the icon location to be used to represent the application. iconUrl will only be used if no iconElement is provided. */\n  iconUrl?: string;\n  /** Element to be added as the icon representing the application. The iconElement will be the primary option to be displayed. */\n  iconElement?: React.ReactElement;\n  /** Small description of the application. */\n  description?: string;\n  /**  URL where the application is accessible. */\n  url?: string;\n  /** Defines if the application should be opened in the same tab or in a new one. */\n  target?: \"_top\" | \"_blank\";\n  /** If true, the item will be disabled. */\n  disabled?: boolean;\n  /** True when the application is selected, false otherwise. */\n  isSelected?: boolean;\n  /** The color of the application. */\n  color?: HvColorAny;\n}\n\nexport interface HvAppSwitcherActionProps extends HvBaseProps {\n  /** The application data to be used to render the Action object. */\n  application: HvAppSwitcherActionApplication;\n  /** Callback triggered when the action is clicked. */\n  onClickCallback?: (\n    event: React.MouseEvent,\n    application: HvAppSwitcherActionApplication\n  ) => void;\n  /** Must return a boolean stating if the action element is selected or not. */\n  isSelectedCallback?: (application: HvAppSwitcherActionApplication) => boolean;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvAppSwitcherActionClasses;\n}\n\nexport const HvAppSwitcherAction = ({\n  id,\n  className,\n  classes: classesProp,\n  application,\n  onClickCallback = () => {},\n  isSelectedCallback = () => false,\n}: HvAppSwitcherActionProps) => {\n  const { classes, cx } = useClasses(classesProp);\n\n  const { name, description, disabled, iconElement, iconUrl, url, target } =\n    application;\n\n  const color = disabled\n    ? theme.colors.secondary_60\n    : getColor(application?.color, theme.colors.secondary);\n\n  const [validIconUrl, setValidIconUrl] = useState<boolean>(true);\n\n  const renderApplicationIcon = () => {\n    if (iconElement) {\n      return iconElement;\n    }\n\n    if (iconUrl && validIconUrl) {\n      return (\n        <img\n          className={classes.iconUrl}\n          src={iconUrl}\n          onError={() => {\n            setValidIconUrl(false);\n          }}\n          alt={description}\n        />\n      );\n    }\n\n    const brokenTitle = name.split(\" \");\n    const initials =\n      brokenTitle[0].substring(0, 1) +\n      (brokenTitle[1] ? brokenTitle[1].substring(0, 1) : \"\");\n\n    return (\n      <HvAvatar size=\"sm\" backgroundColor={color} variant=\"square\" aria-hidden>\n        {initials}\n      </HvAvatar>\n    );\n  };\n\n  const isSelected = isSelectedCallback(application);\n\n  /**\n   * Handles the onClick event and triggers the appropriate callback if it exists.\n   */\n  const handleOnClick = useCallback(\n    (event: React.MouseEvent) => {\n      if (disabled) {\n        event.preventDefault();\n        return;\n      }\n\n      onClickCallback?.(event, { ...application, isSelected });\n    },\n    [application, disabled, isSelected, onClickCallback]\n  );\n\n  const isLink = url != null;\n  const descriptionElementId = useUniqueId(id, \"hvAction-description\");\n\n  const renderApplication = useCallback(\n    (children: React.ReactNode) => {\n      const typographyProps = {\n        className: classes.typography,\n        onClick: handleOnClick,\n        style: { borderColor: color },\n        \"aria-label\": name,\n        ...(description && { \"aria-describedby\": descriptionElementId }),\n      };\n\n      if (isLink) {\n        return (\n          <HvTypography\n            component=\"a\"\n            href={url}\n            target={target || \"_top\"}\n            {...typographyProps}\n          >\n            {children}\n          </HvTypography>\n        );\n      }\n\n      return (\n        <HvTypography component=\"button\" {...typographyProps}>\n          {children}\n        </HvTypography>\n      );\n    },\n    [\n      classes.typography,\n      color,\n      description,\n      descriptionElementId,\n      handleOnClick,\n      isLink,\n      name,\n      target,\n      url,\n    ]\n  );\n\n  return (\n    <HvListItem\n      id={id}\n      interactive\n      tabIndex={0}\n      selected={isSelected}\n      disabled={disabled}\n      className={cx(\n        classes.root,\n        { [classes.disabled]: disabled, [classes.selected]: isSelected },\n        className\n      )}\n    >\n      {/* As HvTooltip don't have the id prop, is not possible to use the aria-labelledby to reference it.\n       In substitution is used the aria-label with the \"title\" value */}\n      {renderApplication(\n        <>\n          <div className={classes.icon}>{renderApplicationIcon()}</div>\n\n          <HvOverflowTooltip\n            paragraphOverflow\n            className={classes.title}\n            placement=\"top-start\"\n            data={name}\n            classes={{\n              tooltipAnchorParagraph: classes.titleAnchor,\n            }}\n          />\n\n          {description && (\n            <HvTooltip\n              disableFocusListener\n              disableTouchListener\n              title={<HvTypography>{description}</HvTypography>}\n            >\n              <div>\n                <Info\n                  className={classes.iconInfo}\n                  role=\"img\"\n                  aria-label={description}\n                  id={descriptionElementId}\n                />\n              </div>\n            </HvTooltip>\n          )}\n        </>\n      )}\n    </HvListItem>\n  );\n};\n"],"names":["useClasses","theme","getColor","useState","jsx","HvAvatar","useCallback","useUniqueId","HvTypography","HvListItem","jsxs","Fragment","HvOverflowTooltip","HvTooltip","Info"],"mappings":"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"}

package/dist/cjs/components/AppSwitcher/Action/Action.styles.cjs

@@ -2,58 +2,50 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const uikitStyles = require("@hitachivantara/uikit-styles");
 const classes = require("../../../utils/classes.cjs");
-const {
-  staticClasses,
-  useClasses
-} = classes.createClasses("HvAppSwitcher-Action", {
-  root: {
-    width: "100%",
-    maxWidth: 280,
-    minHeight: 52,
-    marginRight: uikitStyles.theme.space.sm
-  },
-  icon: {
-    display: "flex",
-    minWidth: 40,
-    justifyContent: "center"
-  },
-  iconUrl: {
-    width: 32
-  },
-  iconInfo: {
-    minWidth: 32
-  },
-  disabled: {},
-  selected: {},
-  typography: {
-    display: "flex",
-    justifyContent: "flex-start",
-    alignItems: "center",
-    width: "100%",
-    minHeight: 52,
-    padding: `6px ${uikitStyles.theme.space.xs}`,
-    border: "none",
-    borderLeft: `solid 2px ${uikitStyles.theme.colors.secondary}`,
-    cursor: "pointer",
-    textDecoration: "inherit",
-    color: "inherit",
-    backgroundColor: "inherit",
-    "$disabled &": {
-      cursor: "not-allowed"
+const { staticClasses, useClasses } = classes.createClasses(
+  "HvAppSwitcher-Action",
+  {
+    root: {
+      width: "100%",
+      maxWidth: 280,
+      minHeight: 52,
+      marginRight: uikitStyles.theme.space.sm
+    },
+    icon: { display: "flex", minWidth: 40, justifyContent: "center" },
+    iconUrl: { width: 32 },
+    iconInfo: { minWidth: 32 },
+    disabled: {},
+    selected: {},
+    typography: {
+      display: "flex",
+      justifyContent: "flex-start",
+      alignItems: "center",
+      width: "100%",
+      minHeight: 52,
+      padding: `6px ${uikitStyles.theme.space.xs}`,
+      border: "none",
+      borderLeft: `solid 2px ${uikitStyles.theme.colors.secondary}`,
+      cursor: "pointer",
+      textDecoration: "inherit",
+      color: "inherit",
+      backgroundColor: "inherit",
+      "$disabled &": {
+        cursor: "not-allowed"
+      }
+    },
+    title: {
+      flexGrow: 1,
+      whiteSpace: "normal",
+      textAlign: "left",
+      margin: `0 ${uikitStyles.theme.space.xs}`,
+      textWrap: "balance",
+      ...uikitStyles.theme.typography.label
+    },
+    titleAnchor: {
+      WebkitLineClamp: 2
     }
-  },
-  title: {
-    flexGrow: 1,
-    whiteSpace: "normal",
-    textAlign: "left",
-    margin: `0 ${uikitStyles.theme.space.xs}`,
-    textWrap: "balance",
-    ...uikitStyles.theme.typography.label
-  },
-  titleAnchor: {
-    WebkitLineClamp: 2
   }
-});
+);
 exports.staticClasses = staticClasses;
 exports.useClasses = useClasses;
 //# sourceMappingURL=Action.styles.cjs.map

package/dist/cjs/components/AppSwitcher/Action/Action.styles.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Action.styles.cjs","sources":["../../../../../src/components/AppSwitcher/Action/Action.styles.tsx"],"sourcesContent":["import { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { createClasses } from \"@core/utils/classes\";\n\nexport const { staticClasses, useClasses } = createClasses(\n  \"HvAppSwitcher-Action\",\n  {\n    root: {\n      width: \"100%\",\n      maxWidth: 280,\n      minHeight: 52,\n      marginRight: theme.space.sm,\n    },\n    icon: { display: \"flex\", minWidth: 40, justifyContent: \"center\" },\n    iconUrl: { width: 32 },\n    iconInfo: { minWidth: 32 },\n    disabled: {},\n    selected: {},\n    typography: {\n      display: \"flex\",\n      justifyContent: \"flex-start\",\n      alignItems: \"center\",\n\n      width: \"100%\",\n      minHeight: 52,\n\n      padding: `6px ${theme.space.xs}`,\n\n      border: \"none\",\n      borderLeft: `solid 2px ${theme.colors.secondary}`,\n\n      cursor: \"pointer\",\n\n      textDecoration: \"inherit\",\n      color: \"inherit\",\n      backgroundColor: \"inherit\",\n\n      \"$disabled &\": {\n        cursor: \"not-allowed\",\n      },\n    },\n    title: {\n      flexGrow: 1,\n      whiteSpace: \"normal\",\n      textAlign: \"left\",\n      margin: `0 ${theme.space.xs}`,\n      textWrap: \"balance\",\n      ...theme.typography.label,\n    },\n    titleAnchor: {\n      WebkitLineClamp: 2,\n    },\n  }\n);\n"],"names":["staticClasses","useClasses","createClasses","root","width","maxWidth","minHeight","marginRight","theme","space","sm","icon","display","minWidth","justifyContent","iconUrl","iconInfo","disabled","selected","typography","alignItems","padding","xs","border","borderLeft","colors","secondary","cursor","textDecoration","color","backgroundColor","title","flexGrow","whiteSpace","textAlign","margin","textWrap","label","titleAnchor","WebkitLineClamp"],"mappings":";;;;AAIa,MAAA;AAAA,EAAEA;AAAAA,EAAeC;AAAW,IAAIC,QAAAA,cAC3C,wBACA;AAAA,EACEC,MAAM;AAAA,IACJC,OAAO;AAAA,IACPC,UAAU;AAAA,IACVC,WAAW;AAAA,IACXC,aAAaC,YAAAA,MAAMC,MAAMC;AAAAA,EAC3B;AAAA,EACAC,MAAM;AAAA,IAAEC,SAAS;AAAA,IAAQC,UAAU;AAAA,IAAIC,gBAAgB;AAAA,EAAS;AAAA,EAChEC,SAAS;AAAA,IAAEX,OAAO;AAAA,EAAG;AAAA,EACrBY,UAAU;AAAA,IAAEH,UAAU;AAAA,EAAG;AAAA,EACzBI,UAAU,CAAC;AAAA,EACXC,UAAU,CAAC;AAAA,EACXC,YAAY;AAAA,IACVP,SAAS;AAAA,IACTE,gBAAgB;AAAA,IAChBM,YAAY;AAAA,IAEZhB,OAAO;AAAA,IACPE,WAAW;AAAA,IAEXe,SAAU,OAAMb,YAAMC,MAAAA,MAAMa,EAAG;AAAA,IAE/BC,QAAQ;AAAA,IACRC,YAAa,aAAYhB,YAAMiB,MAAAA,OAAOC,SAAU;AAAA,IAEhDC,QAAQ;AAAA,IAERC,gBAAgB;AAAA,IAChBC,OAAO;AAAA,IACPC,iBAAiB;AAAA,IAEjB,eAAe;AAAA,MACbH,QAAQ;AAAA,IACV;AAAA,EACF;AAAA,EACAI,OAAO;AAAA,IACLC,UAAU;AAAA,IACVC,YAAY;AAAA,IACZC,WAAW;AAAA,IACXC,QAAS,KAAI3B,YAAMC,MAAAA,MAAMa,EAAG;AAAA,IAC5Bc,UAAU;AAAA,IACV,GAAG5B,YAAAA,MAAMW,WAAWkB;AAAAA,EACtB;AAAA,EACAC,aAAa;AAAA,IACXC,iBAAiB;AAAA,EACnB;AACF,CACF;;;"}
+{"version":3,"file":"Action.styles.cjs","sources":["../../../../../src/components/AppSwitcher/Action/Action.styles.tsx"],"sourcesContent":["import { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { createClasses } from \"@core/utils/classes\";\n\nexport const { staticClasses, useClasses } = createClasses(\n  \"HvAppSwitcher-Action\",\n  {\n    root: {\n      width: \"100%\",\n      maxWidth: 280,\n      minHeight: 52,\n      marginRight: theme.space.sm,\n    },\n    icon: { display: \"flex\", minWidth: 40, justifyContent: \"center\" },\n    iconUrl: { width: 32 },\n    iconInfo: { minWidth: 32 },\n    disabled: {},\n    selected: {},\n    typography: {\n      display: \"flex\",\n      justifyContent: \"flex-start\",\n      alignItems: \"center\",\n\n      width: \"100%\",\n      minHeight: 52,\n\n      padding: `6px ${theme.space.xs}`,\n\n      border: \"none\",\n      borderLeft: `solid 2px ${theme.colors.secondary}`,\n\n      cursor: \"pointer\",\n\n      textDecoration: \"inherit\",\n      color: \"inherit\",\n      backgroundColor: \"inherit\",\n\n      \"$disabled &\": {\n        cursor: \"not-allowed\",\n      },\n    },\n    title: {\n      flexGrow: 1,\n      whiteSpace: \"normal\",\n      textAlign: \"left\",\n      margin: `0 ${theme.space.xs}`,\n      textWrap: \"balance\",\n      ...theme.typography.label,\n    },\n    titleAnchor: {\n      WebkitLineClamp: 2,\n    },\n  }\n);\n"],"names":["createClasses","theme"],"mappings":";;;;AAIa,MAAA,EAAE,eAAe,WAAA,IAAeA,QAAA;AAAA,EAC3C;AAAA,EACA;AAAA,IACE,MAAM;AAAA,MACJ,OAAO;AAAA,MACP,UAAU;AAAA,MACV,WAAW;AAAA,MACX,aAAaC,YAAAA,MAAM,MAAM;AAAA,IAC3B;AAAA,IACA,MAAM,EAAE,SAAS,QAAQ,UAAU,IAAI,gBAAgB,SAAS;AAAA,IAChE,SAAS,EAAE,OAAO,GAAG;AAAA,IACrB,UAAU,EAAE,UAAU,GAAG;AAAA,IACzB,UAAU,CAAC;AAAA,IACX,UAAU,CAAC;AAAA,IACX,YAAY;AAAA,MACV,SAAS;AAAA,MACT,gBAAgB;AAAA,MAChB,YAAY;AAAA,MAEZ,OAAO;AAAA,MACP,WAAW;AAAA,MAEX,SAAS,OAAOA,YAAM,MAAA,MAAM,EAAE;AAAA,MAE9B,QAAQ;AAAA,MACR,YAAY,aAAaA,YAAM,MAAA,OAAO,SAAS;AAAA,MAE/C,QAAQ;AAAA,MAER,gBAAgB;AAAA,MAChB,OAAO;AAAA,MACP,iBAAiB;AAAA,MAEjB,eAAe;AAAA,QACb,QAAQ;AAAA,MACV;AAAA,IACF;AAAA,IACA,OAAO;AAAA,MACL,UAAU;AAAA,MACV,YAAY;AAAA,MACZ,WAAW;AAAA,MACX,QAAQ,KAAKA,YAAM,MAAA,MAAM,EAAE;AAAA,MAC3B,UAAU;AAAA,MACV,GAAGA,YAAAA,MAAM,WAAW;AAAA,IACtB;AAAA,IACA,aAAa;AAAA,MACX,iBAAiB;AAAA,IACnB;AAAA,EACF;AACF;;;"}

package/dist/cjs/components/AppSwitcher/AppSwitcher.cjs

@@ -23,34 +23,68 @@ const HvAppSwitcher = (props) => {
     footer,
     isOpen
   } = useDefaultProps.useDefaultProps("HvAppSwitcher", props);
-  const {
-    classes,
-    cx
-  } = AppSwitcher_styles.useClasses(classesProp);
-  const panelActions = React.useMemo(() => applications && applications?.map((application) => {
-    if (application.name) {
-      return /* @__PURE__ */ jsxRuntime.jsx(Action.HvAppSwitcherAction, { application, onClickCallback: onActionClickedCallback, isSelectedCallback: isActionSelectedCallback, classes: {
-        root: classes.item,
-        selected: classes.itemSelected,
-        disabled: classes.itemDisabled,
-        typography: classes.itemTrigger,
-        icon: classes.itemIcon,
-        title: classes.itemTitle,
-        iconInfo: classes.itemInfoIcon
-      } }, application.id || `${application.name}_${application.url}`);
+  const { classes, cx } = AppSwitcher_styles.useClasses(classesProp);
+  const panelActions = React.useMemo(
+    () => applications && applications?.map((application) => {
+      if (application.name) {
+        return /* @__PURE__ */ jsxRuntime.jsx(
+          Action.HvAppSwitcherAction,
+          {
+            application,
+            onClickCallback: onActionClickedCallback,
+            isSelectedCallback: isActionSelectedCallback,
+            classes: {
+              root: classes.item,
+              selected: classes.itemSelected,
+              disabled: classes.itemDisabled,
+              typography: classes.itemTrigger,
+              icon: classes.itemIcon,
+              title: classes.itemTitle,
+              iconInfo: classes.itemInfoIcon
+            }
+          },
+          application.id || `${application.name}_${application.url}`
+        );
+      }
+      return void 0;
+    }),
+    [applications, classes, isActionSelectedCallback, onActionClickedCallback]
+  );
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      id,
+      className: cx(
+        classes.root,
+        classes[layout],
+        { [classes.open]: !!isOpen, [classes.closed]: isOpen === false },
+        className
+      ),
+      children: [
+        header && /* @__PURE__ */ jsxRuntime.jsx(Typography.HvTypography, { component: "div", variant: "label", className: classes.title, children: header }) || title && /* @__PURE__ */ jsxRuntime.jsx(
+          OverflowTooltip.HvOverflowTooltip,
+          {
+            className: classes.title,
+            data: title,
+            placement: "top-start",
+            classes: {
+              tooltipAnchorParagraph: classes.titleAnchor
+            }
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(ListContainer.HvListContainer, { disableGutters: true, className: classes.actionsContainer, children: panelActions }),
+        footer && /* @__PURE__ */ jsxRuntime.jsx(
+          Typography.HvTypography,
+          {
+            component: "div",
+            variant: "label",
+            className: classes.footerContainer,
+            children: footer
+          }
+        )
+      ]
     }
-    return void 0;
-  }), [applications, classes, isActionSelectedCallback, onActionClickedCallback]);
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { id, className: cx(classes.root, classes[layout], {
-    [classes.open]: !!isOpen,
-    [classes.closed]: isOpen === false
-  }, className), children: [
-    header && /* @__PURE__ */ jsxRuntime.jsx(Typography.HvTypography, { component: "div", variant: "label", className: classes.title, children: header }) || title && /* @__PURE__ */ jsxRuntime.jsx(OverflowTooltip.HvOverflowTooltip, { className: classes.title, data: title, placement: "top-start", classes: {
-      tooltipAnchorParagraph: classes.titleAnchor
-    } }),
-    /* @__PURE__ */ jsxRuntime.jsx(ListContainer.HvListContainer, { disableGutters: true, className: classes.actionsContainer, children: panelActions }),
-    footer && /* @__PURE__ */ jsxRuntime.jsx(Typography.HvTypography, { component: "div", variant: "label", className: classes.footerContainer, children: footer })
-  ] });
+  );
 };
 exports.appSwitcherClasses = AppSwitcher_styles.staticClasses;
 exports.HvAppSwitcher = HvAppSwitcher;

package/dist/cjs/components/AppSwitcher/AppSwitcher.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"AppSwitcher.cjs","sources":["../../../../src/components/AppSwitcher/AppSwitcher.tsx"],"sourcesContent":["import { useMemo } from \"react\";\n\nimport { HvBaseProps } from \"@core/types/generic\";\nimport { ExtractNames } from \"@core/utils/classes\";\nimport { useDefaultProps } from \"@core/hooks/useDefaultProps\";\nimport { HvListContainer } from \"@core/components/ListContainer\";\nimport { HvTypography } from \"@core/components/Typography\";\nimport { HvOverflowTooltip } from \"@core/components/OverflowTooltip\";\n\nimport { HvAppSwitcherAction, HvAppSwitcherActionApplication } from \"./Action\";\nimport { useClasses, staticClasses } 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    id,\n    className,\n    classes: classesProp,\n    layout = \"single\",\n    title,\n    applications,\n    onActionClickedCallback = () => {},\n    isActionSelectedCallback = () => false,\n    header,\n    footer,\n    isOpen,\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      id={id}\n      className={cx(\n        classes.root,\n        classes[layout],\n        { [classes.open]: !!isOpen, [classes.closed]: isOpen === false },\n        className\n      )}\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":["HvAppSwitcher","props","id","className","classes","classesProp","layout","title","applications","onActionClickedCallback","isActionSelectedCallback","header","footer","isOpen","useDefaultProps","cx","useClasses","panelActions","useMemo","map","application","name","HvAppSwitcherAction","root","item","selected","itemSelected","disabled","itemDisabled","typography","itemTrigger","icon","itemIcon","itemTitle","iconInfo","itemInfoIcon","url","undefined","jsxs","open","closed","jsx","HvTypography","HvOverflowTooltip","tooltipAnchorParagraph","titleAnchor","HvListContainer","actionsContainer","footerContainer"],"mappings":";;;;;;;;;;AA8CaA,MAAAA,gBAAgBA,CAACC,UAA8B;AACpD,QAAA;AAAA,IACJC;AAAAA,IACAC;AAAAA,IACAC,SAASC;AAAAA,IACTC,SAAS;AAAA,IACTC;AAAAA,IACAC;AAAAA,IACAC,0BAA0BA,MAAM;AAAA,IAAC;AAAA,IACjCC,2BAA2BA,MAAM;AAAA,IACjCC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,EAAAA,IACEC,gBAAgB,gBAAA,iBAAiBb,KAAK;AACpC,QAAA;AAAA,IAAEG;AAAAA,IAASW;AAAAA,EAAAA,IAAOC,mBAAAA,WAAWX,WAAW;AAE9C,QAAMY,eAAeC,MAAAA,QACnB,MACEV,gBACAA,cAAcW,IAAKC,CAAgB,gBAAA;AACjC,QAAIA,YAAYC,MAAM;AACpB,4CACGC,OAEC,qBAAA,EAAA,aACA,iBAAiBb,yBACjB,oBAAoBC,0BACpB,SAAS;AAAA,QACPa,MAAMnB,QAAQoB;AAAAA,QACdC,UAAUrB,QAAQsB;AAAAA,QAClBC,UAAUvB,QAAQwB;AAAAA,QAClBC,YAAYzB,QAAQ0B;AAAAA,QACpBC,MAAM3B,QAAQ4B;AAAAA,QACdzB,OAAOH,QAAQ6B;AAAAA,QACfC,UAAU9B,QAAQ+B;AAAAA,MACpB,EAAA,GAZKf,YAAYlB,MAAO,GAAEkB,YAAYC,IAAK,IAAGD,YAAYgB,GAAI,EAa9D;AAAA,IAEN;AAEOC,WAAAA;AAAAA,EAAAA,CACR,GACH,CAAC7B,cAAcJ,SAASM,0BAA0BD,uBAAuB,CAC3E;AAGE,SAAA6B,gCAAC,SACC,IACA,WAAWvB,GACTX,QAAQmB,MACRnB,QAAQE,MAAM,GACd;AAAA,IAAE,CAACF,QAAQmC,IAAI,GAAG,CAAC,CAAC1B;AAAAA,IAAQ,CAACT,QAAQoC,MAAM,GAAG3B,WAAW;AAAA,EAAA,GACzDV,SACF,GAEEQ,UAAAA;AAAAA,IACA,UAAA8B,2BAAA,IAACC,2BAAa,WAAU,OAAM,SAAQ,SAAQ,WAAWtC,QAAQG,OAC9DI,UAAAA,QACH,KAECJ,SACCkC,2BAAAA,IAACE,qCACC,WAAWvC,QAAQG,OACnB,MAAMA,OACN,WAAU,aACV,SAAS;AAAA,MACPqC,wBAAwBxC,QAAQyC;AAAAA,IAAAA,GAGpC;AAAA,mCACHC,cAAAA,iBAAgB,EAAA,gBAAc,MAAC,WAAW1C,QAAQ2C,kBAChD9B,UACH,cAAA;AAAA,IACCL,UACE6B,2BAAAA,IAAAC,WAAAA,cAAA,EACC,WAAU,OACV,SAAQ,SACR,WAAWtC,QAAQ4C,iBAElBpC,UACH,OAAA,CAAA;AAAA,EAEJ,EAAA,CAAA;AAEJ;;;"}
+{"version":3,"file":"AppSwitcher.cjs","sources":["../../../../src/components/AppSwitcher/AppSwitcher.tsx"],"sourcesContent":["import { useMemo } from \"react\";\n\nimport { HvBaseProps } from \"@core/types/generic\";\nimport { ExtractNames } from \"@core/utils/classes\";\nimport { useDefaultProps } from \"@core/hooks/useDefaultProps\";\nimport { HvListContainer } from \"@core/components/ListContainer\";\nimport { HvTypography } from \"@core/components/Typography\";\nimport { HvOverflowTooltip } from \"@core/components/OverflowTooltip\";\n\nimport { HvAppSwitcherAction, HvAppSwitcherActionApplication } from \"./Action\";\nimport { useClasses, staticClasses } 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    id,\n    className,\n    classes: classesProp,\n    layout = \"single\",\n    title,\n    applications,\n    onActionClickedCallback = () => {},\n    isActionSelectedCallback = () => false,\n    header,\n    footer,\n    isOpen,\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      id={id}\n      className={cx(\n        classes.root,\n        classes[layout],\n        { [classes.open]: !!isOpen, [classes.closed]: isOpen === false },\n        className\n      )}\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":["useDefaultProps","useClasses","useMemo","jsx","HvAppSwitcherAction","jsxs","HvTypography","HvOverflowTooltip","HvListContainer"],"mappings":";;;;;;;;;;AA8Ca,MAAA,gBAAgB,CAAC,UAA8B;AACpD,QAAA;AAAA,IACJ;AAAA,IACA;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,EAAA,IACEA,gBAAgB,gBAAA,iBAAiB,KAAK;AAC1C,QAAM,EAAE,SAAS,GAAG,IAAIC,8BAAW,WAAW;AAE9C,QAAM,eAAeC,MAAA;AAAA,IACnB,MACE,gBACA,cAAc,IAAI,CAAC,gBAAgB;AACjC,UAAI,YAAY,MAAM;AAElB,eAAAC,2BAAA;AAAA,UAACC,OAAA;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,SAAAC,2BAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC;AAAA,MACA,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,MAEE,UAAA;AAAA,QACA,UAAAF,2BAAA,IAACG,WAAa,cAAA,EAAA,WAAU,OAAM,SAAQ,SAAQ,WAAW,QAAQ,OAC9D,UACH,OAAA,CAAA,KAEC,SACCH,2BAAA;AAAA,UAACI,gBAAA;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,uCAEHC,cAAAA,iBAAgB,EAAA,gBAAc,MAAC,WAAW,QAAQ,kBAChD,UACH,cAAA;AAAA,QACC,UACCL,2BAAA;AAAA,UAACG,WAAA;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/cjs/components/AppSwitcher/AppSwitcher.styles.cjs

@@ -2,10 +2,7 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const uikitStyles = require("@hitachivantara/uikit-styles");
 const classes = require("../../utils/classes.cjs");
-const {
-  staticClasses,
-  useClasses
-} = classes.createClasses("HvAppSwitcher", {
+const { staticClasses, useClasses } = classes.createClasses("HvAppSwitcher", {
   root: {
     display: "flex",
     flexDirection: "column",
@@ -48,9 +45,7 @@ const {
     overflowX: "hidden",
     boxShadow: uikitStyles.theme.colors.shadow
   },
-  closed: {
-    display: "none"
-  },
+  closed: { display: "none" },
   title: {
     minHeight: 36,
     // we need to play with the 4px because of the focus ring
@@ -61,12 +56,8 @@ const {
   titleAnchor: {
     WebkitLineClamp: 2
   },
-  single: {
-    width: 320
-  },
-  dual: {
-    width: 640
-  },
+  single: { width: 320 },
+  dual: { width: 640 },
   fluid: {}
 });
 exports.staticClasses = staticClasses;

package/dist/cjs/components/AppSwitcher/AppSwitcher.styles.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"AppSwitcher.styles.cjs","sources":["../../../../src/components/AppSwitcher/AppSwitcher.styles.tsx"],"sourcesContent":["import { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { createClasses } from \"@core/utils/classes\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvAppSwitcher\", {\n  root: {\n    display: \"flex\",\n    flexDirection: \"column\",\n    backgroundColor: theme.colors.atmo1,\n    overflow: \"hidden\",\n\n    // we need to play with the 4px because of the focus ring\n    // padding: `${theme.spacing(2) - 4}px 0 ${theme.spacing(2) - 4}px ${\n    //   theme.spacing(2) - 4\n    // }px`,\n    padding: theme.spacing(\"sm\", 0, \"sm\", \"sm\"),\n  },\n  item: {},\n  itemSelected: {},\n  itemDisabled: {},\n  itemTrigger: {},\n  itemIcon: {},\n  itemTitle: {},\n  itemInfoIcon: {},\n  actionsContainer: {\n    display: \"flex\",\n    flexWrap: \"wrap\",\n    justifyContent: \"flex-start\",\n\n    overflowY: \"auto\",\n\n    // We need to play with the 4px because of the focus ring\n    padding: \"4px 0 4px 4px\",\n  },\n  footerContainer: {\n    display: \"flex\",\n    alignItems: \"center\",\n    marginTop: \"auto\",\n    height: 52,\n\n    // We need to play with the 4px because of the focus ring\n    // padding: `${theme.hv.spacing.sm - 4}px ${theme.hv.spacing.sm + 4}px 4px 4px`,\n    padding: `${theme.space.sm} ${theme.space.sm} 4px 4px`,\n  },\n  open: {\n    zIndex: \"1200\",\n    position: \"absolute\",\n    top: \"50px\",\n    overflowX: \"hidden\",\n    boxShadow: theme.colors.shadow,\n  },\n  closed: { display: \"none\" },\n  title: {\n    minHeight: 36,\n\n    // we need to play with the 4px because of the focus ring\n    // padding: `4px ${theme.hv.spacing.sm}px ${theme.hv.spacing.sm - 4}px 4px`,\n    padding: `4px ${theme.space.sm} ${theme.space.sm} 4px`,\n    ...theme.typography.label,\n  },\n  titleAnchor: {\n    WebkitLineClamp: 2,\n  },\n  single: { width: 320 },\n  dual: { width: 640 },\n  fluid: {},\n});\n"],"names":["staticClasses","useClasses","createClasses","root","display","flexDirection","backgroundColor","theme","colors","atmo1","overflow","padding","spacing","item","itemSelected","itemDisabled","itemTrigger","itemIcon","itemTitle","itemInfoIcon","actionsContainer","flexWrap","justifyContent","overflowY","footerContainer","alignItems","marginTop","height","space","sm","open","zIndex","position","top","overflowX","boxShadow","shadow","closed","title","minHeight","typography","label","titleAnchor","WebkitLineClamp","single","width","dual","fluid"],"mappings":";;;;AAIa,MAAA;AAAA,EAAEA;AAAAA,EAAeC;AAAW,IAAIC,QAAAA,cAAc,iBAAiB;AAAA,EAC1EC,MAAM;AAAA,IACJC,SAAS;AAAA,IACTC,eAAe;AAAA,IACfC,iBAAiBC,YAAAA,MAAMC,OAAOC;AAAAA,IAC9BC,UAAU;AAAA;AAAA;AAAA;AAAA;AAAA,IAMVC,SAASJ,YAAMK,MAAAA,QAAQ,MAAM,GAAG,MAAM,IAAI;AAAA,EAC5C;AAAA,EACAC,MAAM,CAAC;AAAA,EACPC,cAAc,CAAC;AAAA,EACfC,cAAc,CAAC;AAAA,EACfC,aAAa,CAAC;AAAA,EACdC,UAAU,CAAC;AAAA,EACXC,WAAW,CAAC;AAAA,EACZC,cAAc,CAAC;AAAA,EACfC,kBAAkB;AAAA,IAChBhB,SAAS;AAAA,IACTiB,UAAU;AAAA,IACVC,gBAAgB;AAAA,IAEhBC,WAAW;AAAA;AAAA,IAGXZ,SAAS;AAAA,EACX;AAAA,EACAa,iBAAiB;AAAA,IACfpB,SAAS;AAAA,IACTqB,YAAY;AAAA,IACZC,WAAW;AAAA,IACXC,QAAQ;AAAA;AAAA;AAAA,IAIRhB,SAAU,GAAEJ,YAAMqB,MAAAA,MAAMC,EAAG,IAAGtB,kBAAMqB,MAAMC,EAAG;AAAA,EAC/C;AAAA,EACAC,MAAM;AAAA,IACJC,QAAQ;AAAA,IACRC,UAAU;AAAA,IACVC,KAAK;AAAA,IACLC,WAAW;AAAA,IACXC,WAAW5B,YAAAA,MAAMC,OAAO4B;AAAAA,EAC1B;AAAA,EACAC,QAAQ;AAAA,IAAEjC,SAAS;AAAA,EAAO;AAAA,EAC1BkC,OAAO;AAAA,IACLC,WAAW;AAAA;AAAA;AAAA,IAIX5B,SAAU,OAAMJ,YAAMqB,MAAAA,MAAMC,EAAG,IAAGtB,kBAAMqB,MAAMC,EAAG;AAAA,IACjD,GAAGtB,YAAAA,MAAMiC,WAAWC;AAAAA,EACtB;AAAA,EACAC,aAAa;AAAA,IACXC,iBAAiB;AAAA,EACnB;AAAA,EACAC,QAAQ;AAAA,IAAEC,OAAO;AAAA,EAAI;AAAA,EACrBC,MAAM;AAAA,IAAED,OAAO;AAAA,EAAI;AAAA,EACnBE,OAAO,CAAC;AACV,CAAC;;;"}
+{"version":3,"file":"AppSwitcher.styles.cjs","sources":["../../../../src/components/AppSwitcher/AppSwitcher.styles.tsx"],"sourcesContent":["import { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { createClasses } from \"@core/utils/classes\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvAppSwitcher\", {\n  root: {\n    display: \"flex\",\n    flexDirection: \"column\",\n    backgroundColor: theme.colors.atmo1,\n    overflow: \"hidden\",\n\n    // we need to play with the 4px because of the focus ring\n    // padding: `${theme.spacing(2) - 4}px 0 ${theme.spacing(2) - 4}px ${\n    //   theme.spacing(2) - 4\n    // }px`,\n    padding: theme.spacing(\"sm\", 0, \"sm\", \"sm\"),\n  },\n  item: {},\n  itemSelected: {},\n  itemDisabled: {},\n  itemTrigger: {},\n  itemIcon: {},\n  itemTitle: {},\n  itemInfoIcon: {},\n  actionsContainer: {\n    display: \"flex\",\n    flexWrap: \"wrap\",\n    justifyContent: \"flex-start\",\n\n    overflowY: \"auto\",\n\n    // We need to play with the 4px because of the focus ring\n    padding: \"4px 0 4px 4px\",\n  },\n  footerContainer: {\n    display: \"flex\",\n    alignItems: \"center\",\n    marginTop: \"auto\",\n    height: 52,\n\n    // We need to play with the 4px because of the focus ring\n    // padding: `${theme.hv.spacing.sm - 4}px ${theme.hv.spacing.sm + 4}px 4px 4px`,\n    padding: `${theme.space.sm} ${theme.space.sm} 4px 4px`,\n  },\n  open: {\n    zIndex: \"1200\",\n    position: \"absolute\",\n    top: \"50px\",\n    overflowX: \"hidden\",\n    boxShadow: theme.colors.shadow,\n  },\n  closed: { display: \"none\" },\n  title: {\n    minHeight: 36,\n\n    // we need to play with the 4px because of the focus ring\n    // padding: `4px ${theme.hv.spacing.sm}px ${theme.hv.spacing.sm - 4}px 4px`,\n    padding: `4px ${theme.space.sm} ${theme.space.sm} 4px`,\n    ...theme.typography.label,\n  },\n  titleAnchor: {\n    WebkitLineClamp: 2,\n  },\n  single: { width: 320 },\n  dual: { width: 640 },\n  fluid: {},\n});\n"],"names":["createClasses","theme"],"mappings":";;;;AAIO,MAAM,EAAE,eAAe,eAAeA,QAAAA,cAAc,iBAAiB;AAAA,EAC1E,MAAM;AAAA,IACJ,SAAS;AAAA,IACT,eAAe;AAAA,IACf,iBAAiBC,YAAAA,MAAM,OAAO;AAAA,IAC9B,UAAU;AAAA;AAAA;AAAA;AAAA;AAAA,IAMV,SAASA,YAAM,MAAA,QAAQ,MAAM,GAAG,MAAM,IAAI;AAAA,EAC5C;AAAA,EACA,MAAM,CAAC;AAAA,EACP,cAAc,CAAC;AAAA,EACf,cAAc,CAAC;AAAA,EACf,aAAa,CAAC;AAAA,EACd,UAAU,CAAC;AAAA,EACX,WAAW,CAAC;AAAA,EACZ,cAAc,CAAC;AAAA,EACf,kBAAkB;AAAA,IAChB,SAAS;AAAA,IACT,UAAU;AAAA,IACV,gBAAgB;AAAA,IAEhB,WAAW;AAAA;AAAA,IAGX,SAAS;AAAA,EACX;AAAA,EACA,iBAAiB;AAAA,IACf,SAAS;AAAA,IACT,YAAY;AAAA,IACZ,WAAW;AAAA,IACX,QAAQ;AAAA;AAAA;AAAA,IAIR,SAAS,GAAGA,YAAM,MAAA,MAAM,EAAE,IAAIA,kBAAM,MAAM,EAAE;AAAA,EAC9C;AAAA,EACA,MAAM;AAAA,IACJ,QAAQ;AAAA,IACR,UAAU;AAAA,IACV,KAAK;AAAA,IACL,WAAW;AAAA,IACX,WAAWA,YAAAA,MAAM,OAAO;AAAA,EAC1B;AAAA,EACA,QAAQ,EAAE,SAAS,OAAO;AAAA,EAC1B,OAAO;AAAA,IACL,WAAW;AAAA;AAAA;AAAA,IAIX,SAAS,OAAOA,YAAM,MAAA,MAAM,EAAE,IAAIA,kBAAM,MAAM,EAAE;AAAA,IAChD,GAAGA,YAAAA,MAAM,WAAW;AAAA,EACtB;AAAA,EACA,aAAa;AAAA,IACX,iBAAiB;AAAA,EACnB;AAAA,EACA,QAAQ,EAAE,OAAO,IAAI;AAAA,EACrB,MAAM,EAAE,OAAO,IAAI;AAAA,EACnB,OAAO,CAAC;AACV,CAAC;;;"}