@hitachivantara/uikit-react-core 3.62.7 → 3.63.0

package/dist/modern/AppSwitcher/Action/Action.d.ts

@@ -0,0 +1,75 @@
+import * as React from "react";
+import { StandardProps } from "@material-ui/core";
+
+export interface HvAppSwitcherActionApplication {
+  /**
+   * Id of the application.
+   */
+  id?: string;
+  /**
+   * Name of the application, this is the value that will be displayed on the component.
+   */
+  name: string;
+  /**
+   * The color to be applied to the item's border and to the default icon.
+   * You can use either an HEX or color name from the palette.
+   */
+  color?: string;
+  /**
+   * URL with the icon location to be used to represent the application.
+   * iconUrl will only be used if no iconElement is provided.
+   */
+  iconUrl?: string;
+  /**
+   * Element to be added as the icon representing the application.
+   * The iconElement will be the primary option to be displayed.
+   */
+  iconElement?: React.ReactNode;
+  /**
+   * Small description of the application.
+   */
+  description?: string;
+  /**
+   *  URL where the application is accesible.
+   */
+  url?: string;
+  /**
+   * Defines if the application should be opened in the same tab or in a new one.
+   */
+  target?: "_top" | "_blank";
+  /**
+   * If true, the item will be disabled.
+   */
+  disabled?: boolean;
+  /**
+   * True when the application is selected, false otherwise.
+   */
+  isSelected?: boolean;
+}
+
+export type HvAppSwitcherActionClassKey =
+  | "root"
+  | "typography"
+  | "selected"
+  | "icon"
+  | "iconUrl"
+  | "title"
+  | "iconInfo";
+
+export interface HvAppSwitcherActionProps
+  extends StandardProps<React.HTMLAttributes<HTMLElement>, HvAppSwitcherActionClassKey> {
+  /**
+   * The application data to be used to render the Action object.
+   */
+  application: HvAppSwitcherActionApplication;
+  /**
+   * Callback triggered when the action is clicked.
+   */
+  onClickCallback?: (event: MouseEvent, application?: HvAppSwitcherActionApplication) => void;
+  /**
+   * Must return a boolean stating if the action element is selected or not.
+   */
+  isSelectedCallback?: (application?: HvAppSwitcherActionApplication) => boolean;
+}
+
+export default function HvAppSwitcherAction(props: HvAppSwitcherActionProps): JSX.Element | null;

package/dist/modern/AppSwitcher/Action/Action.js

@@ -0,0 +1,242 @@
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+import "core-js/modules/web.dom-collections.iterator.js";
+import React, { useState } from "react";
+import PropTypes from "prop-types";
+import clsx from "clsx";
+import { useTheme, withStyles } from "@material-ui/core";
+import { Info } from "@hitachivantara/uikit-react-icons";
+import { HvTypography, HvAvatar, HvTooltip, HvListItem } from "../..";
+import styles from "./styles";
+import TitleWithTooltip from "../TitleWithTooltip";
+
+const getColor = (theme, color, defaultColor) => theme.palette[color] || color || defaultColor;
+
+const Action = props => {
+  const {
+    id,
+    className,
+    classes,
+    application,
+    onClickCallback = () => {},
+    isSelectedCallback = () => false
+  } = props;
+  const {
+    name,
+    description,
+    disabled,
+    iconElement,
+    iconUrl,
+    url,
+    target
+  } = application;
+  const theme = useTheme();
+  const color = disabled ? theme.hv.palette.atmosphere.atmo5 : getColor(theme, application.color, theme.hv.palette.accent.acce1);
+  const [validIconUrl, setValidIconUrl] = useState(true);
+
+  const renderApplicationIcon = () => {
+    if (iconElement) {
+      return iconElement;
+    }
+
+    if (iconUrl && validIconUrl) {
+      return /*#__PURE__*/React.createElement("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__*/React.createElement(HvAvatar, {
+      size: "SM",
+      backgroundColor: color,
+      variant: "square"
+    }, initials);
+  };
+
+  const isSelected = isSelectedCallback(application);
+  /**
+   * Handles the onClick event and triggers the appropriate callback if it exists.
+   */
+
+  const handleOnClick = event => {
+    if (disabled) {
+      event.preventDefault();
+      return;
+    }
+
+    onClickCallback === null || onClickCallback === void 0 ? void 0 : onClickCallback(event, _objectSpread(_objectSpread({}, application), {}, {
+      isSelected
+    }));
+  };
+
+  const isLink = url != null;
+  return /*#__PURE__*/React.createElement(HvListItem, {
+    id: id,
+    interactive: true,
+    tabIndex: 0,
+    selected: isSelected,
+    disabled: disabled,
+    className: clsx(className, classes.root, disabled && classes.disabled, isSelected && classes.selected)
+  }, /*#__PURE__*/React.createElement(HvTypography, {
+    component: isLink ? "a" : "button",
+    href: isLink ? url : undefined,
+    target: isLink ? target || "_top" : undefined,
+    className: classes.typography,
+    onClick: handleOnClick,
+    style: {
+      borderColor: color
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    className: classes.icon
+  }, renderApplicationIcon()), /*#__PURE__*/React.createElement(TitleWithTooltip, {
+    title: name,
+    className: classes.title
+  }), description && /*#__PURE__*/React.createElement(HvTooltip, {
+    disableFocusListener: true,
+    disableTouchListener: true,
+    title: /*#__PURE__*/React.createElement(HvTypography, null, description)
+  }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Info, {
+    className: classes.iconInfo,
+    role: "img",
+    "aria-label": description
+  })))));
+};
+
+process.env.NODE_ENV !== "production" ? Action.propTypes = {
+  /**
+   * Identifier to be applied to the root element.
+   */
+  id: PropTypes.string,
+
+  /**
+   * Class names to be applied to the root element.
+   */
+  className: PropTypes.string,
+
+  /**
+   * A Jss object used to override or extend the component styles.
+   */
+  classes: PropTypes.shape({
+    /**
+     * Styles applied to the component root class.
+     */
+    root: PropTypes.string,
+
+    /**
+     * Styles applied to the component root class when disabled.
+     */
+    disabled: PropTypes.string,
+
+    /**
+     * Styles applied to the typography element.
+     */
+    typography: PropTypes.string,
+
+    /**
+     * Styles applied to the component root class when selected.
+     */
+    selected: PropTypes.string,
+
+    /**
+     * Styles applied to the icon container.
+     */
+    icon: PropTypes.string,
+
+    /**
+     * Styles applied to the icon.
+     */
+    iconUrl: PropTypes.string,
+
+    /**
+     * Styles applied to the action title element.
+     */
+    title: PropTypes.string,
+
+    /**
+     * Styles applied to the info icon element.
+     */
+    iconInfo: PropTypes.string
+  }).isRequired,
+
+  /**
+   * The application data to be used to render the Action object.
+   */
+  application: PropTypes.shape({
+    /**
+     * Id of the application.
+     */
+    id: PropTypes.string,
+
+    /**
+     * Name of the application, this is the value that will be displayed on the component.
+     */
+    name: PropTypes.string.isRequired,
+
+    /**
+     * The color to be applied to the item's border and to the default icon.
+     * You can use either an HEX or color name from the palette.
+     */
+    color: PropTypes.string,
+
+    /**
+     * URL with the icon location to be used to represent the application.
+     * iconUrl will only be used if no iconElement is provided.
+     */
+    iconUrl: PropTypes.string,
+
+    /**
+     * Element to be added as the icon representing the application.
+     * The iconElement will be the primary option to be displayed.
+     */
+    iconElement: PropTypes.element,
+
+    /**
+     * Small description of the application.
+     */
+    description: PropTypes.string,
+
+    /**
+     *  URL where the application is accessible.
+     */
+    url: PropTypes.string,
+
+    /**
+     * Defines if the application should be opened in the same tab or in a new one.
+     */
+    target: PropTypes.oneOf(["_top", "_blank"]),
+
+    /**
+     * If true, the item will be disabled.
+     */
+    disabled: PropTypes.bool,
+
+    /**
+     * True when the application is selected, false otherwise.
+     */
+    isSelected: PropTypes.bool
+  }).isRequired,
+
+  /**
+   * Callback triggered when the action is clicked.
+   */
+  onClickCallback: PropTypes.func,
+
+  /**
+   * Must return a boolean stating if the action element is selected or not.
+   */
+  isSelectedCallback: PropTypes.func
+} : void 0;
+export default withStyles(styles, {
+  name: "HvAppSwitcherAction"
+})(Action);
+//# sourceMappingURL=Action.js.map

package/dist/modern/AppSwitcher/Action/Action.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/AppSwitcher/Action/Action.js"],"names":["React","useState","PropTypes","clsx","useTheme","withStyles","Info","HvTypography","HvAvatar","HvTooltip","HvListItem","styles","TitleWithTooltip","getColor","theme","color","defaultColor","palette","Action","props","id","className","classes","application","onClickCallback","isSelectedCallback","name","description","disabled","iconElement","iconUrl","url","target","hv","atmosphere","atmo5","accent","acce1","validIconUrl","setValidIconUrl","renderApplicationIcon","brokenTitle","split","initials","substring","isSelected","handleOnClick","event","preventDefault","isLink","root","selected","undefined","typography","borderColor","icon","title","iconInfo","propTypes","string","shape","isRequired","element","oneOf","bool","func"],"mappings":"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","sourcesContent":["import React, { useState } from \"react\";\nimport PropTypes from \"prop-types\";\n\nimport clsx from \"clsx\";\nimport { useTheme, withStyles } from \"@material-ui/core\";\n\nimport { Info } from \"@hitachivantara/uikit-react-icons\";\nimport { HvTypography, HvAvatar, HvTooltip, HvListItem } from \"../..\";\n\nimport styles from \"./styles\";\n\nimport TitleWithTooltip from \"../TitleWithTooltip\";\n\nconst getColor = (theme, color, defaultColor) => theme.palette[color] || color || defaultColor;\n\nconst Action = (props) => {\n  const {\n    id,\n    className,\n    classes,\n    application,\n    onClickCallback = () => {},\n    isSelectedCallback = () => false,\n  } = props;\n\n  const { name, description, disabled, iconElement, iconUrl, url, target } = application;\n\n  const theme = useTheme();\n  const color = disabled\n    ? theme.hv.palette.atmosphere.atmo5\n    : getColor(theme, application.color, theme.hv.palette.accent.acce1);\n\n  const [validIconUrl, setValidIconUrl] = useState(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) + (brokenTitle[1] ? brokenTitle[1].substring(0, 1) : \"\");\n\n    return (\n      <HvAvatar size=\"SM\" backgroundColor={color} variant=\"square\">\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 = (event) => {\n    if (disabled) {\n      event.preventDefault();\n      return;\n    }\n\n    onClickCallback?.(event, { ...application, isSelected });\n  };\n\n  const isLink = url != null;\n\n  return (\n    <HvListItem\n      id={id}\n      interactive\n      tabIndex={0}\n      selected={isSelected}\n      disabled={disabled}\n      className={clsx(className, classes.root, {\n        [classes.disabled]: disabled,\n        [classes.selected]: isSelected,\n      })}\n    >\n      <HvTypography\n        component={isLink ? \"a\" : \"button\"}\n        href={isLink ? url : undefined}\n        target={isLink ? target || \"_top\" : undefined}\n        className={classes.typography}\n        onClick={handleOnClick}\n        style={{ borderColor: color }}\n      >\n        <div className={classes.icon}>{renderApplicationIcon()}</div>\n\n        <TitleWithTooltip title={name} className={classes.title} />\n\n        {description && (\n          <HvTooltip\n            disableFocusListener\n            disableTouchListener\n            title={<HvTypography>{description}</HvTypography>}\n          >\n            <div>\n              <Info className={classes.iconInfo} role=\"img\" aria-label={description} />\n            </div>\n          </HvTooltip>\n        )}\n      </HvTypography>\n    </HvListItem>\n  );\n};\n\nAction.propTypes = {\n  /**\n   * Identifier to be applied to the root element.\n   */\n  id: PropTypes.string,\n\n  /**\n   * Class names to be applied to the root element.\n   */\n  className: PropTypes.string,\n  /**\n   * A Jss object used to override or extend the component styles.\n   */\n  classes: PropTypes.shape({\n    /**\n     * Styles applied to the component root class.\n     */\n    root: PropTypes.string,\n    /**\n     * Styles applied to the component root class when disabled.\n     */\n    disabled: PropTypes.string,\n    /**\n     * Styles applied to the typography element.\n     */\n    typography: PropTypes.string,\n    /**\n     * Styles applied to the component root class when selected.\n     */\n    selected: PropTypes.string,\n    /**\n     * Styles applied to the icon container.\n     */\n    icon: PropTypes.string,\n    /**\n     * Styles applied to the icon.\n     */\n    iconUrl: PropTypes.string,\n    /**\n     * Styles applied to the action title element.\n     */\n    title: PropTypes.string,\n    /**\n     * Styles applied to the info icon element.\n     */\n    iconInfo: PropTypes.string,\n  }).isRequired,\n\n  /**\n   * The application data to be used to render the Action object.\n   */\n  application: PropTypes.shape({\n    /**\n     * Id of the application.\n     */\n    id: PropTypes.string,\n    /**\n     * Name of the application, this is the value that will be displayed on the component.\n     */\n    name: PropTypes.string.isRequired,\n    /**\n     * The color to be applied to the item's border and to the default icon.\n     * You can use either an HEX or color name from the palette.\n     */\n    color: PropTypes.string,\n    /**\n     * URL with the icon location to be used to represent the application.\n     * iconUrl will only be used if no iconElement is provided.\n     */\n    iconUrl: PropTypes.string,\n    /**\n     * Element to be added as the icon representing the application.\n     * The iconElement will be the primary option to be displayed.\n     */\n    iconElement: PropTypes.element,\n    /**\n     * Small description of the application.\n     */\n    description: PropTypes.string,\n    /**\n     *  URL where the application is accessible.\n     */\n    url: PropTypes.string,\n    /**\n     * Defines if the application should be opened in the same tab or in a new one.\n     */\n    target: PropTypes.oneOf([\"_top\", \"_blank\"]),\n    /**\n     * If true, the item will be disabled.\n     */\n    disabled: PropTypes.bool,\n    /**\n     * True when the application is selected, false otherwise.\n     */\n    isSelected: PropTypes.bool,\n  }).isRequired,\n\n  /**\n   * Callback triggered when the action is clicked.\n   */\n  onClickCallback: PropTypes.func,\n  /**\n   * Must return a boolean stating if the action element is selected or not.\n   */\n  isSelectedCallback: PropTypes.func,\n};\n\nexport default withStyles(styles, { name: \"HvAppSwitcherAction\" })(Action);\n"],"file":"Action.js"}

package/dist/modern/AppSwitcher/Action/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from "./Action";
+export * from "./Action";

package/dist/modern/AppSwitcher/Action/index.js

@@ -0,0 +1,3 @@
+import Action from "./Action";
+export default Action;
+//# sourceMappingURL=index.js.map

package/dist/modern/AppSwitcher/Action/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/AppSwitcher/Action/index.js"],"names":["Action"],"mappings":"AAAA,OAAOA,MAAP,MAAmB,UAAnB;AAEA,eAAeA,MAAf","sourcesContent":["import Action from \"./Action\";\n\nexport default Action;\n"],"file":"index.js"}

package/dist/modern/AppSwitcher/Action/styles.js

@@ -0,0 +1,50 @@
+const styles = theme => ({
+  root: {
+    width: "100%",
+    maxWidth: 280,
+    minHeight: 52,
+    marginRight: theme.hv.spacing.sm
+  },
+  disabled: {},
+  selected: {},
+  typography: {
+    display: "flex",
+    justifyContent: "flex-start",
+    alignItems: "center",
+    width: "100%",
+    minHeight: 52,
+    padding: `6px ${theme.hv.spacing.xs}px`,
+    border: "none",
+    borderLeft: `solid 2px ${theme.hv.palette.accent.acce1}`,
+    cursor: "pointer",
+    textDecoration: "inherit",
+    color: "inherit",
+    backgroundColor: "inherit",
+    "$disabled &": {
+      cursor: "not-allowed"
+    }
+  },
+  icon: {
+    display: "flex",
+    minWidth: 40,
+    justifyContent: "center"
+  },
+  title: {
+    flexGrow: 1,
+    margin: `0 ${theme.hv.spacing.xs}px`,
+    textAlign: "left",
+    overflow: "hidden",
+    whiteSpace: "nowrap",
+    textOverflow: "ellipsis",
+    color: "inherit"
+  },
+  iconInfo: {
+    minWidth: 32
+  },
+  iconUrl: {
+    width: 32
+  }
+});
+
+export default styles;
+//# sourceMappingURL=styles.js.map

package/dist/modern/AppSwitcher/Action/styles.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/AppSwitcher/Action/styles.js"],"names":["styles","theme","root","width","maxWidth","minHeight","marginRight","hv","spacing","sm","disabled","selected","typography","display","justifyContent","alignItems","padding","xs","border","borderLeft","palette","accent","acce1","cursor","textDecoration","color","backgroundColor","icon","minWidth","title","flexGrow","margin","textAlign","overflow","whiteSpace","textOverflow","iconInfo","iconUrl"],"mappings":"AAAA,MAAMA,MAAM,GAAIC,KAAD,KAAY;AACzBC,EAAAA,IAAI,EAAE;AACJC,IAAAA,KAAK,EAAE,MADH;AAEJC,IAAAA,QAAQ,EAAE,GAFN;AAGJC,IAAAA,SAAS,EAAE,EAHP;AAIJC,IAAAA,WAAW,EAAEL,KAAK,CAACM,EAAN,CAASC,OAAT,CAAiBC;AAJ1B,GADmB;AAOzBC,EAAAA,QAAQ,EAAE,EAPe;AAQzBC,EAAAA,QAAQ,EAAE,EARe;AAUzBC,EAAAA,UAAU,EAAE;AACVC,IAAAA,OAAO,EAAE,MADC;AAEVC,IAAAA,cAAc,EAAE,YAFN;AAGVC,IAAAA,UAAU,EAAE,QAHF;AAKVZ,IAAAA,KAAK,EAAE,MALG;AAMVE,IAAAA,SAAS,EAAE,EAND;AAQVW,IAAAA,OAAO,EAAG,OAAMf,KAAK,CAACM,EAAN,CAASC,OAAT,CAAiBS,EAAG,IAR1B;AAUVC,IAAAA,MAAM,EAAE,MAVE;AAWVC,IAAAA,UAAU,EAAG,aAAYlB,KAAK,CAACM,EAAN,CAASa,OAAT,CAAiBC,MAAjB,CAAwBC,KAAM,EAX7C;AAaVC,IAAAA,MAAM,EAAE,SAbE;AAeVC,IAAAA,cAAc,EAAE,SAfN;AAgBVC,IAAAA,KAAK,EAAE,SAhBG;AAiBVC,IAAAA,eAAe,EAAE,SAjBP;AAmBV,mBAAe;AACbH,MAAAA,MAAM,EAAE;AADK;AAnBL,GAVa;AAkCzBI,EAAAA,IAAI,EAAE;AACJd,IAAAA,OAAO,EAAE,MADL;AAEJe,IAAAA,QAAQ,EAAE,EAFN;AAGJd,IAAAA,cAAc,EAAE;AAHZ,GAlCmB;AAwCzBe,EAAAA,KAAK,EAAE;AACLC,IAAAA,QAAQ,EAAE,CADL;AAELC,IAAAA,MAAM,EAAG,KAAI9B,KAAK,CAACM,EAAN,CAASC,OAAT,CAAiBS,EAAG,IAF5B;AAILe,IAAAA,SAAS,EAAE,MAJN;AAMLC,IAAAA,QAAQ,EAAE,QANL;AAOLC,IAAAA,UAAU,EAAE,QAPP;AAQLC,IAAAA,YAAY,EAAE,UART;AAULV,IAAAA,KAAK,EAAE;AAVF,GAxCkB;AAqDzBW,EAAAA,QAAQ,EAAE;AACRR,IAAAA,QAAQ,EAAE;AADF,GArDe;AAyDzBS,EAAAA,OAAO,EAAE;AACPlC,IAAAA,KAAK,EAAE;AADA;AAzDgB,CAAZ,CAAf;;AA8DA,eAAeH,MAAf","sourcesContent":["const styles = (theme) => ({\n  root: {\n    width: \"100%\",\n    maxWidth: 280,\n    minHeight: 52,\n    marginRight: theme.hv.spacing.sm,\n  },\n  disabled: {},\n  selected: {},\n\n  typography: {\n    display: \"flex\",\n    justifyContent: \"flex-start\",\n    alignItems: \"center\",\n\n    width: \"100%\",\n    minHeight: 52,\n\n    padding: `6px ${theme.hv.spacing.xs}px`,\n\n    border: \"none\",\n    borderLeft: `solid 2px ${theme.hv.palette.accent.acce1}`,\n\n    cursor: \"pointer\",\n\n    textDecoration: \"inherit\",\n    color: \"inherit\",\n    backgroundColor: \"inherit\",\n\n    \"$disabled &\": {\n      cursor: \"not-allowed\",\n    },\n  },\n\n  icon: {\n    display: \"flex\",\n    minWidth: 40,\n    justifyContent: \"center\",\n  },\n\n  title: {\n    flexGrow: 1,\n    margin: `0 ${theme.hv.spacing.xs}px`,\n\n    textAlign: \"left\",\n\n    overflow: \"hidden\",\n    whiteSpace: \"nowrap\",\n    textOverflow: \"ellipsis\",\n\n    color: \"inherit\",\n  },\n\n  iconInfo: {\n    minWidth: 32,\n  },\n\n  iconUrl: {\n    width: 32,\n  },\n});\n\nexport default styles;\n"],"file":"styles.js"}

package/dist/modern/AppSwitcher/AppSwitcher.d.ts

@@ -0,0 +1,67 @@
+import * as React from "react";
+import { StandardProps } from "@material-ui/core";
+
+import { HvAppSwitcherActionApplication } from "./Action";
+
+export type HvAppSwitcherClassKey =
+  | "root"
+  | "single"
+  | "dual"
+  | "fluid"
+  | "title"
+  | "actionsContainer"
+  | "footerContainer"
+  | "closed"
+  | "open"
+  | "item"
+  | "itemSelected"
+  | "itemDisabled"
+  | "itemTrigger"
+  | "itemIcon"
+  | "itemTitle"
+  | "itemInfoIcon";
+
+export interface HvAppSwitcherProps
+  extends StandardProps<React.HTMLAttributes<HTMLElement>, HvAppSwitcherClassKey> {
+  /**
+   * Number of columns to render. One, two, or whatever fits the component's width.
+   */
+  layout?: "single" | "dual" | "fluid";
+
+  /**
+   * Title to be displayed on the header of the component.
+   */
+  title?: string;
+  /**
+   * The list of applications to be used to render the actions on the component.
+   */
+  applications: HvAppSwitcherActionApplication[];
+
+  /**
+   * Triggered when an action is clicked.
+   */
+  onActionClickedCallback?: (
+    event: MouseEvent,
+    application?: HvAppSwitcherActionApplication
+  ) => void;
+  /**
+   * Must return a boolean stating if the action element is selected or not.
+   */
+  isActionSelectedCallback?: (application?: HvAppSwitcherActionApplication) => boolean;
+
+  /**
+   * Element to be added to the header container, if none is provided a label with the title will be added.
+   */
+  header?: string | React.ReactNode;
+  /**
+   * Element to be added to the footer container.
+   */
+  footer?: string | React.ReactNode;
+
+  /**
+   * Flag stating if the panel is opened or closed.
+   */
+  isOpen?: boolean;
+}
+
+export default function HvAppSwitcher(props: HvAppSwitcherProps): JSX.Element | null;