@hitachivantara/uikit-react-core 3.62.5 → 3.63.0

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;

package/dist/modern/AppSwitcher/AppSwitcher.js

@@ -0,0 +1,254 @@
+import React from "react";
+import PropTypes from "prop-types";
+import clsx from "clsx";
+import { deprecatedPropType, withStyles } from "@material-ui/core";
+import { HvListContainer } from "..";
+import styles from "./styles";
+import TitleWithTooltip from "./TitleWithTooltip";
+import Action from "./Action";
+
+const AppSwitcher = props => {
+  const {
+    id,
+    className,
+    classes,
+    layout = "single",
+    title,
+    applications,
+    onActionClickedCallback = () => {},
+    isActionSelectedCallback = () => false,
+    header,
+    footer,
+    isOpen
+  } = props;
+
+  const actionClicked = (event, application) => {
+    onActionClickedCallback === null || onActionClickedCallback === void 0 ? void 0 : onActionClickedCallback(event, application);
+  };
+
+  const panelActions = applications.map(application => {
+    if (application.name) {
+      return /*#__PURE__*/React.createElement(Action, {
+        key: application.id || `${application.name}_${application.url}`,
+        application: application,
+        onClickCallback: actionClicked,
+        isSelectedCallback: isActionSelectedCallback,
+        classes: {
+          root: classes.item,
+          selected: classes.itemSelected,
+          disabled: classes.itemDisabled,
+          typography: classes.itemTrigger,
+          icon: classes.itemIcon,
+          title: classes.itemTitle,
+          iconInfo: classes.itemInfoIcon
+        }
+      });
+    }
+
+    return undefined;
+  });
+  return /*#__PURE__*/React.createElement("div", {
+    id: id,
+    className: clsx(className, classes.root, classes[layout], isOpen === false && classes.closed, isOpen && classes.open)
+  }, header && /*#__PURE__*/React.createElement("div", {
+    className: classes.title
+  }, header) || title && /*#__PURE__*/React.createElement(TitleWithTooltip, {
+    className: classes.title,
+    title: title
+  }), /*#__PURE__*/React.createElement(HvListContainer, {
+    disableGutters: true,
+    className: classes.actionsContainer
+  }, panelActions), footer && /*#__PURE__*/React.createElement("div", {
+    className: classes.footerContainer
+  }, footer));
+};
+
+process.env.NODE_ENV !== "production" ? AppSwitcher.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 styles applied.
+   */
+  classes: PropTypes.shape({
+    /**
+     * Styles applied to the component root class.
+     */
+    root: PropTypes.string,
+
+    /**
+     * Styles applied to the component root class when in single layout mode.
+     */
+    single: PropTypes.string,
+
+    /**
+     * Styles applied to the component root class when in single dual mode.
+     */
+    dual: PropTypes.string,
+
+    /**
+     * Styles applied to the component root class when in single fluid mode.
+     */
+    fluid: PropTypes.string,
+
+    /**
+     * Styles applied to the title element.
+     */
+    title: PropTypes.string,
+
+    /**
+     * Styles applied to the actions container.
+     */
+    actionsContainer: PropTypes.string,
+
+    /**
+     * Styles applied to the footer container.
+     */
+    footerContainer: PropTypes.string,
+
+    /**
+     * Styles applied to the panel when closed.
+     */
+    closed: PropTypes.string,
+
+    /**
+     * Styles applied to the panel when open.
+     */
+    open: PropTypes.string,
+
+    /**
+     * Styles applied to the action item root.
+     */
+    item: PropTypes.string,
+
+    /**
+     * Styles applied to the action item when selected.
+     */
+    itemSelected: PropTypes.string,
+
+    /**
+     * Styles applied to the action item when disabled.
+     */
+    itemDisabled: PropTypes.string,
+
+    /**
+     * Styles applied to the action item typography.
+     */
+    itemTrigger: PropTypes.string,
+
+    /**
+     * Styles applied to the action item icon.
+     */
+    itemIcon: PropTypes.string,
+
+    /**
+     * Styles applied to the action item title.
+     */
+    itemTitle: PropTypes.string,
+
+    /**
+     * Styles applied to the action item info icon.
+     */
+    itemInfoIcon: PropTypes.string
+  }).isRequired,
+
+  /**
+   * Number of columns to render. One, two, or whatever fits the component's width.
+   */
+  layout: PropTypes.oneOf(["single", "dual", "fluid"]),
+
+  /**
+   * Title to be displayed on the header of the component.
+   */
+  title: PropTypes.string,
+
+  /**
+   * The list of applications to be used to render the actions on the component.
+   */
+  applications: PropTypes.arrayOf(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,
+
+    /**
+     * 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 accesible.
+     */
+    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,
+
+  /**
+   * Triggered when an action is clicked.
+   */
+  onActionClickedCallback: PropTypes.func,
+
+  /**
+   * Must return a boolean stating if the action element is selected or not.
+   */
+  isActionSelectedCallback: PropTypes.func,
+
+  /**
+   * Element to be added to the header container, if none is provided a label with the title will be added.
+   */
+  header: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
+
+  /**
+   * Element to be added to the footer container.
+   */
+  footer: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
+
+  /**
+   * Flag stating if the panel is opened or closed.
+   *
+   * @deprecated This logic should be external, i.e. using the HvAppSwitcher inside a Drawer component.
+   */
+  isOpen: deprecatedPropType(PropTypes.bool)
+} : void 0;
+export default withStyles(styles, {
+  name: "HvAppSwitcher"
+})(AppSwitcher);
+//# sourceMappingURL=AppSwitcher.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/AppSwitcher/AppSwitcher.js"],"names":["React","PropTypes","clsx","deprecatedPropType","withStyles","HvListContainer","styles","TitleWithTooltip","Action","AppSwitcher","props","id","className","classes","layout","title","applications","onActionClickedCallback","isActionSelectedCallback","header","footer","isOpen","actionClicked","event","application","panelActions","map","name","url","root","item","selected","itemSelected","disabled","itemDisabled","typography","itemTrigger","icon","itemIcon","itemTitle","iconInfo","itemInfoIcon","undefined","closed","open","actionsContainer","footerContainer","propTypes","string","shape","single","dual","fluid","isRequired","oneOf","arrayOf","iconUrl","iconElement","element","description","target","bool","isSelected","func","oneOfType","node"],"mappings":"AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,OAAOC,SAAP,MAAsB,YAAtB;AAEA,OAAOC,IAAP,MAAiB,MAAjB;AACA,SAASC,kBAAT,EAA6BC,UAA7B,QAA+C,mBAA/C;AAEA,SAASC,eAAT,QAAgC,IAAhC;AAEA,OAAOC,MAAP,MAAmB,UAAnB;AAEA,OAAOC,gBAAP,MAA6B,oBAA7B;AACA,OAAOC,MAAP,MAAmB,UAAnB;;AAEA,MAAMC,WAAW,GAAIC,KAAD,IAAW;AAC7B,QAAM;AACJC,IAAAA,EADI;AAGJC,IAAAA,SAHI;AAIJC,IAAAA,OAJI;AAMJC,IAAAA,MAAM,GAAG,QANL;AAQJC,IAAAA,KARI;AASJC,IAAAA,YATI;AAWJC,IAAAA,uBAAuB,GAAG,MAAM,CAAE,CAX9B;AAYJC,IAAAA,wBAAwB,GAAG,MAAM,KAZ7B;AAcJC,IAAAA,MAdI;AAeJC,IAAAA,MAfI;AAiBJC,IAAAA;AAjBI,MAkBFX,KAlBJ;;AAoBA,QAAMY,aAAa,GAAG,CAACC,KAAD,EAAQC,WAAR,KAAwB;AAC5CP,IAAAA,uBAAuB,SAAvB,IAAAA,uBAAuB,WAAvB,YAAAA,uBAAuB,CAAGM,KAAH,EAAUC,WAAV,CAAvB;AACD,GAFD;;AAIA,QAAMC,YAAY,GAAGT,YAAY,CAACU,GAAb,CAAkBF,WAAD,IAAiB;AACrD,QAAIA,WAAW,CAACG,IAAhB,EAAsB;AACpB,0BACE,oBAAC,MAAD;AACE,QAAA,GAAG,EAAEH,WAAW,CAACb,EAAZ,IAAmB,GAAEa,WAAW,CAACG,IAAK,IAAGH,WAAW,CAACI,GAAI,EADhE;AAEE,QAAA,WAAW,EAAEJ,WAFf;AAGE,QAAA,eAAe,EAAEF,aAHnB;AAIE,QAAA,kBAAkB,EAAEJ,wBAJtB;AAKE,QAAA,OAAO,EAAE;AACPW,UAAAA,IAAI,EAAEhB,OAAO,CAACiB,IADP;AAEPC,UAAAA,QAAQ,EAAElB,OAAO,CAACmB,YAFX;AAGPC,UAAAA,QAAQ,EAAEpB,OAAO,CAACqB,YAHX;AAIPC,UAAAA,UAAU,EAAEtB,OAAO,CAACuB,WAJb;AAKPC,UAAAA,IAAI,EAAExB,OAAO,CAACyB,QALP;AAMPvB,UAAAA,KAAK,EAAEF,OAAO,CAAC0B,SANR;AAOPC,UAAAA,QAAQ,EAAE3B,OAAO,CAAC4B;AAPX;AALX,QADF;AAiBD;;AAED,WAAOC,SAAP;AACD,GAtBoB,CAArB;AAwBA,sBACE;AACE,IAAA,EAAE,EAAE/B,EADN;AAEE,IAAA,SAAS,EAAET,IAAI,CAACU,SAAD,EAAYC,OAAO,CAACgB,IAApB,EAA0BhB,OAAO,CAACC,MAAD,CAAjC,EACKO,MAAM,KAAK,KADhB,IACZR,OAAO,CAAC8B,MADI,EAEGtB,MAFH,IAEZR,OAAO,CAAC+B,IAFI;AAFjB,KAOIzB,MAAM,iBAAI;AAAK,IAAA,SAAS,EAAEN,OAAO,CAACE;AAAxB,KAAgCI,MAAhC,CAAX,IACEJ,KAAK,iBAAI,oBAAC,gBAAD;AAAkB,IAAA,SAAS,EAAEF,OAAO,CAACE,KAArC;AAA4C,IAAA,KAAK,EAAEA;AAAnD,IARd,eASE,oBAAC,eAAD;AAAiB,IAAA,cAAc,MAA/B;AAAgC,IAAA,SAAS,EAAEF,OAAO,CAACgC;AAAnD,KACGpB,YADH,CATF,EAYGL,MAAM,iBAAI;AAAK,IAAA,SAAS,EAAEP,OAAO,CAACiC;AAAxB,KAA0C1B,MAA1C,CAZb,CADF;AAgBD,CAjED;;AAmEA,wCAAAX,WAAW,CAACsC,SAAZ,GAAwB;AACtB;AACF;AACA;AACEpC,EAAAA,EAAE,EAAEV,SAAS,CAAC+C,MAJQ;;AAMtB;AACF;AACA;AACEpC,EAAAA,SAAS,EAAEX,SAAS,CAAC+C,MATC;;AAUtB;AACF;AACA;AACEnC,EAAAA,OAAO,EAAEZ,SAAS,CAACgD,KAAV,CAAgB;AACvB;AACJ;AACA;AACIpB,IAAAA,IAAI,EAAE5B,SAAS,CAAC+C,MAJO;;AAKvB;AACJ;AACA;AACIE,IAAAA,MAAM,EAAEjD,SAAS,CAAC+C,MARK;;AASvB;AACJ;AACA;AACIG,IAAAA,IAAI,EAAElD,SAAS,CAAC+C,MAZO;;AAavB;AACJ;AACA;AACII,IAAAA,KAAK,EAAEnD,SAAS,CAAC+C,MAhBM;;AAiBvB;AACJ;AACA;AACIjC,IAAAA,KAAK,EAAEd,SAAS,CAAC+C,MApBM;;AAqBvB;AACJ;AACA;AACIH,IAAAA,gBAAgB,EAAE5C,SAAS,CAAC+C,MAxBL;;AAyBvB;AACJ;AACA;AACIF,IAAAA,eAAe,EAAE7C,SAAS,CAAC+C,MA5BJ;;AA6BvB;AACJ;AACA;AACIL,IAAAA,MAAM,EAAE1C,SAAS,CAAC+C,MAhCK;;AAiCvB;AACJ;AACA;AACIJ,IAAAA,IAAI,EAAE3C,SAAS,CAAC+C,MApCO;;AAqCvB;AACJ;AACA;AACIlB,IAAAA,IAAI,EAAE7B,SAAS,CAAC+C,MAxCO;;AAyCvB;AACJ;AACA;AACIhB,IAAAA,YAAY,EAAE/B,SAAS,CAAC+C,MA5CD;;AA6CvB;AACJ;AACA;AACId,IAAAA,YAAY,EAAEjC,SAAS,CAAC+C,MAhDD;;AAiDvB;AACJ;AACA;AACIZ,IAAAA,WAAW,EAAEnC,SAAS,CAAC+C,MApDA;;AAqDvB;AACJ;AACA;AACIV,IAAAA,QAAQ,EAAErC,SAAS,CAAC+C,MAxDG;;AAyDvB;AACJ;AACA;AACIT,IAAAA,SAAS,EAAEtC,SAAS,CAAC+C,MA5DE;;AA6DvB;AACJ;AACA;AACIP,IAAAA,YAAY,EAAExC,SAAS,CAAC+C;AAhED,GAAhB,EAiENK,UA9EmB;;AAgFtB;AACF;AACA;AACEvC,EAAAA,MAAM,EAAEb,SAAS,CAACqD,KAAV,CAAgB,CAAC,QAAD,EAAW,MAAX,EAAmB,OAAnB,CAAhB,CAnFc;;AAqFtB;AACF;AACA;AACEvC,EAAAA,KAAK,EAAEd,SAAS,CAAC+C,MAxFK;;AAyFtB;AACF;AACA;AACEhC,EAAAA,YAAY,EAAEf,SAAS,CAACsD,OAAV,CACZtD,SAAS,CAACgD,KAAV,CAAgB;AACd;AACN;AACA;AACMtC,IAAAA,EAAE,EAAEV,SAAS,CAAC+C,MAJA;;AAKd;AACN;AACA;AACMrB,IAAAA,IAAI,EAAE1B,SAAS,CAAC+C,MAAV,CAAiBK,UART;;AASd;AACN;AACA;AACA;AACMG,IAAAA,OAAO,EAAEvD,SAAS,CAAC+C,MAbL;;AAcd;AACN;AACA;AACA;AACMS,IAAAA,WAAW,EAAExD,SAAS,CAACyD,OAlBT;;AAmBd;AACN;AACA;AACMC,IAAAA,WAAW,EAAE1D,SAAS,CAAC+C,MAtBT;;AAuBd;AACN;AACA;AACMpB,IAAAA,GAAG,EAAE3B,SAAS,CAAC+C,MA1BD;;AA2Bd;AACN;AACA;AACMY,IAAAA,MAAM,EAAE3D,SAAS,CAACqD,KAAV,CAAgB,CAAC,MAAD,EAAS,QAAT,CAAhB,CA9BM;;AA+Bd;AACN;AACA;AACMrB,IAAAA,QAAQ,EAAEhC,SAAS,CAAC4D,IAlCN;;AAmCd;AACN;AACA;AACMC,IAAAA,UAAU,EAAE7D,SAAS,CAAC4D;AAtCR,GAAhB,CADY,EAyCZR,UArIoB;;AAuItB;AACF;AACA;AACEpC,EAAAA,uBAAuB,EAAEhB,SAAS,CAAC8D,IA1Ib;;AA2ItB;AACF;AACA;AACE7C,EAAAA,wBAAwB,EAAEjB,SAAS,CAAC8D,IA9Id;;AAgJtB;AACF;AACA;AACE5C,EAAAA,MAAM,EAAElB,SAAS,CAAC+D,SAAV,CAAoB,CAAC/D,SAAS,CAAC+C,MAAX,EAAmB/C,SAAS,CAACgE,IAA7B,CAApB,CAnJc;;AAoJtB;AACF;AACA;AACE7C,EAAAA,MAAM,EAAEnB,SAAS,CAAC+D,SAAV,CAAoB,CAAC/D,SAAS,CAAC+C,MAAX,EAAmB/C,SAAS,CAACgE,IAA7B,CAApB,CAvJc;;AAyJtB;AACF;AACA;AACA;AACA;AACE5C,EAAAA,MAAM,EAAElB,kBAAkB,CAACF,SAAS,CAAC4D,IAAX;AA9JJ,CAAxB;AAiKA,eAAezD,UAAU,CAACE,MAAD,EAAS;AAAEqB,EAAAA,IAAI,EAAE;AAAR,CAAT,CAAV,CAA8ClB,WAA9C,CAAf","sourcesContent":["import React from \"react\";\nimport PropTypes from \"prop-types\";\n\nimport clsx from \"clsx\";\nimport { deprecatedPropType, withStyles } from \"@material-ui/core\";\n\nimport { HvListContainer } from \"..\";\n\nimport styles from \"./styles\";\n\nimport TitleWithTooltip from \"./TitleWithTooltip\";\nimport Action from \"./Action\";\n\nconst AppSwitcher = (props) => {\n  const {\n    id,\n\n    className,\n    classes,\n\n    layout = \"single\",\n\n    title,\n    applications,\n\n    onActionClickedCallback = () => {},\n    isActionSelectedCallback = () => false,\n\n    header,\n    footer,\n\n    isOpen,\n  } = props;\n\n  const actionClicked = (event, application) => {\n    onActionClickedCallback?.(event, application);\n  };\n\n  const panelActions = applications.map((application) => {\n    if (application.name) {\n      return (\n        <Action\n          key={application.id || `${application.name}_${application.url}`}\n          application={application}\n          onClickCallback={actionClicked}\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\n  return (\n    <div\n      id={id}\n      className={clsx(className, classes.root, classes[layout], {\n        [classes.closed]: isOpen === false,\n        [classes.open]: isOpen,\n      })}\n    >\n      {(header && <div className={classes.title}>{header}</div>) ||\n        (title && <TitleWithTooltip className={classes.title} title={title} />)}\n      <HvListContainer disableGutters className={classes.actionsContainer}>\n        {panelActions}\n      </HvListContainer>\n      {footer && <div className={classes.footerContainer}>{footer}</div>}\n    </div>\n  );\n};\n\nAppSwitcher.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 styles applied.\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 in single layout mode.\n     */\n    single: PropTypes.string,\n    /**\n     * Styles applied to the component root class when in single dual mode.\n     */\n    dual: PropTypes.string,\n    /**\n     * Styles applied to the component root class when in single fluid mode.\n     */\n    fluid: PropTypes.string,\n    /**\n     * Styles applied to the title element.\n     */\n    title: PropTypes.string,\n    /**\n     * Styles applied to the actions container.\n     */\n    actionsContainer: PropTypes.string,\n    /**\n     * Styles applied to the footer container.\n     */\n    footerContainer: PropTypes.string,\n    /**\n     * Styles applied to the panel when closed.\n     */\n    closed: PropTypes.string,\n    /**\n     * Styles applied to the panel when open.\n     */\n    open: PropTypes.string,\n    /**\n     * Styles applied to the action item root.\n     */\n    item: PropTypes.string,\n    /**\n     * Styles applied to the action item when selected.\n     */\n    itemSelected: PropTypes.string,\n    /**\n     * Styles applied to the action item when disabled.\n     */\n    itemDisabled: PropTypes.string,\n    /**\n     * Styles applied to the action item typography.\n     */\n    itemTrigger: PropTypes.string,\n    /**\n     * Styles applied to the action item icon.\n     */\n    itemIcon: PropTypes.string,\n    /**\n     * Styles applied to the action item title.\n     */\n    itemTitle: PropTypes.string,\n    /**\n     * Styles applied to the action item info icon.\n     */\n    itemInfoIcon: PropTypes.string,\n  }).isRequired,\n\n  /**\n   * Number of columns to render. One, two, or whatever fits the component's width.\n   */\n  layout: PropTypes.oneOf([\"single\", \"dual\", \"fluid\"]),\n\n  /**\n   * Title to be displayed on the header of the component.\n   */\n  title: PropTypes.string,\n  /**\n   * The list of applications to be used to render the actions on the component.\n   */\n  applications: PropTypes.arrayOf(\n    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       * 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 accesible.\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    })\n  ).isRequired,\n\n  /**\n   * Triggered when an action is clicked.\n   */\n  onActionClickedCallback: PropTypes.func,\n  /**\n   * Must return a boolean stating if the action element is selected or not.\n   */\n  isActionSelectedCallback: PropTypes.func,\n\n  /**\n   * Element to be added to the header container, if none is provided a label with the title will be added.\n   */\n  header: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),\n  /**\n   * Element to be added to the footer container.\n   */\n  footer: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),\n\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: deprecatedPropType(PropTypes.bool),\n};\n\nexport default withStyles(styles, { name: \"HvAppSwitcher\" })(AppSwitcher);\n"],"file":"AppSwitcher.js"}

package/dist/modern/AppSwitcher/TitleWithTooltip.js

@@ -0,0 +1,41 @@
+import "core-js/modules/web.dom-collections.iterator.js";
+import React, { useEffect, useRef, useState } from "react";
+import PropTypes from "prop-types";
+import { HvTooltip, HvTypography } from "..";
+
+const TitleWithTooltip = ({
+  className,
+  title
+}) => {
+  const [isOverflowed, setIsOverflowed] = useState(false);
+  const textRef = useRef();
+  useEffect(() => {
+    if (textRef !== null && textRef !== void 0 && textRef.current) {
+      setIsOverflowed(textRef.current.scrollWidth > textRef.current.clientWidth || textRef.current.scrollHeight > textRef.current.clientHeight);
+    }
+  }, []);
+  return /*#__PURE__*/React.createElement(HvTooltip, {
+    disableHoverListener: !isOverflowed,
+    placement: "top-start",
+    title: /*#__PURE__*/React.createElement(HvTypography, null, title)
+  }, /*#__PURE__*/React.createElement(HvTypography, {
+    variant: "highlightText",
+    component: "span",
+    ref: textRef,
+    className: className
+  }, title));
+};
+
+process.env.NODE_ENV !== "production" ? TitleWithTooltip.propTypes = {
+  /**
+   * Class names to be applied to the root element.
+   */
+  className: PropTypes.string,
+
+  /**
+   * Title to be displayed.
+   */
+  title: PropTypes.string
+} : void 0;
+export default TitleWithTooltip;
+//# sourceMappingURL=TitleWithTooltip.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/AppSwitcher/TitleWithTooltip.js"],"names":["React","useEffect","useRef","useState","PropTypes","HvTooltip","HvTypography","TitleWithTooltip","className","title","isOverflowed","setIsOverflowed","textRef","current","scrollWidth","clientWidth","scrollHeight","clientHeight","propTypes","string"],"mappings":";AAAA,OAAOA,KAAP,IAAgBC,SAAhB,EAA2BC,MAA3B,EAAmCC,QAAnC,QAAmD,OAAnD;AACA,OAAOC,SAAP,MAAsB,YAAtB;AAEA,SAASC,SAAT,EAAoBC,YAApB,QAAwC,IAAxC;;AAEA,MAAMC,gBAAgB,GAAG,CAAC;AAAEC,EAAAA,SAAF;AAAaC,EAAAA;AAAb,CAAD,KAA0B;AACjD,QAAM,CAACC,YAAD,EAAeC,eAAf,IAAkCR,QAAQ,CAAC,KAAD,CAAhD;AACA,QAAMS,OAAO,GAAGV,MAAM,EAAtB;AAEAD,EAAAA,SAAS,CAAC,MAAM;AACd,QAAIW,OAAJ,aAAIA,OAAJ,eAAIA,OAAO,CAAEC,OAAb,EAAsB;AACpBF,MAAAA,eAAe,CACbC,OAAO,CAACC,OAAR,CAAgBC,WAAhB,GAA8BF,OAAO,CAACC,OAAR,CAAgBE,WAA9C,IACEH,OAAO,CAACC,OAAR,CAAgBG,YAAhB,GAA+BJ,OAAO,CAACC,OAAR,CAAgBI,YAFpC,CAAf;AAID;AACF,GAPQ,EAON,EAPM,CAAT;AASA,sBACE,oBAAC,SAAD;AACE,IAAA,oBAAoB,EAAE,CAACP,YADzB;AAEE,IAAA,SAAS,EAAC,WAFZ;AAGE,IAAA,KAAK,eAAE,oBAAC,YAAD,QAAeD,KAAf;AAHT,kBAKE,oBAAC,YAAD;AAAc,IAAA,OAAO,EAAC,eAAtB;AAAsC,IAAA,SAAS,EAAC,MAAhD;AAAuD,IAAA,GAAG,EAAEG,OAA5D;AAAqE,IAAA,SAAS,EAAEJ;AAAhF,KACGC,KADH,CALF,CADF;AAWD,CAxBD;;AA0BA,wCAAAF,gBAAgB,CAACW,SAAjB,GAA6B;AAC3B;AACF;AACA;AACEV,EAAAA,SAAS,EAAEJ,SAAS,CAACe,MAJM;;AAK3B;AACF;AACA;AACEV,EAAAA,KAAK,EAAEL,SAAS,CAACe;AARU,CAA7B;AAWA,eAAeZ,gBAAf","sourcesContent":["import React, { useEffect, useRef, useState } from \"react\";\nimport PropTypes from \"prop-types\";\n\nimport { HvTooltip, HvTypography } from \"..\";\n\nconst TitleWithTooltip = ({ className, title }) => {\n  const [isOverflowed, setIsOverflowed] = useState(false);\n  const textRef = useRef();\n\n  useEffect(() => {\n    if (textRef?.current) {\n      setIsOverflowed(\n        textRef.current.scrollWidth > textRef.current.clientWidth ||\n          textRef.current.scrollHeight > textRef.current.clientHeight\n      );\n    }\n  }, []);\n\n  return (\n    <HvTooltip\n      disableHoverListener={!isOverflowed}\n      placement=\"top-start\"\n      title={<HvTypography>{title}</HvTypography>}\n    >\n      <HvTypography variant=\"highlightText\" component=\"span\" ref={textRef} className={className}>\n        {title}\n      </HvTypography>\n    </HvTooltip>\n  );\n};\n\nTitleWithTooltip.propTypes = {\n  /**\n   * Class names to be applied to the root element.\n   */\n  className: PropTypes.string,\n  /**\n   * Title to be displayed.\n   */\n  title: PropTypes.string,\n};\n\nexport default TitleWithTooltip;\n"],"file":"TitleWithTooltip.js"}

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

@@ -0,0 +1,5 @@
+export { default } from "./AppSwitcher";
+export * from "./AppSwitcher";
+
+export { default as HvAppSwitcherAction } from "./Action";
+export * from "./Action";

package/dist/modern/AppSwitcher/index.js

@@ -0,0 +1,3 @@
+export { default } from "./AppSwitcher";
+export { default as HvAppSwitcherAction } from "./Action";
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/AppSwitcher/index.js"],"names":["default","HvAppSwitcherAction"],"mappings":"AAAA,SAASA,OAAT,QAAwB,eAAxB;AACA,SAASA,OAAO,IAAIC,mBAApB,QAA+C,UAA/C","sourcesContent":["export { default } from \"./AppSwitcher\";\nexport { default as HvAppSwitcherAction } from \"./Action\";\n"],"file":"index.js"}

package/dist/modern/AppSwitcher/styles.js

@@ -0,0 +1,67 @@
+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; }
+
+const styles = theme => ({
+  root: {
+    display: "flex",
+    flexDirection: "column",
+    overflow: "hidden",
+    // we need to play with the 4px because of the focus ring
+    padding: `${theme.hv.spacing.sm - 4}px 0 ${theme.hv.spacing.sm - 4}px ${theme.hv.spacing.sm - 4}px`,
+    backgroundColor: theme.hv.palette.atmosphere.atmo1
+  },
+  single: {
+    width: 320
+  },
+  dual: {
+    width: 620
+  },
+  fluid: {},
+  closed: {
+    display: "none"
+  },
+  open: {
+    zIndex: "1200",
+    position: "absolute",
+    top: "50px",
+    overflowX: "hidden",
+    boxShadow: theme.hv.shadows[1]
+  },
+  title: {
+    minHeight: 36,
+    // we need to play with the 4px because of the focus ring
+    padding: `4px ${theme.hv.spacing.sm}px ${theme.hv.spacing.sm - 4}px 4px`,
+    overflow: "hidden",
+    whiteSpace: "nowrap",
+    textOverflow: "ellipsis"
+  },
+  actionsContainer: {
+    display: "flex",
+    flexWrap: "wrap",
+    justifyContent: "flex-start",
+    overflowY: "auto",
+    // we need to play with the 4px because of the focus ring
+    padding: "4px 0 4px 4px"
+  },
+  footerContainer: _objectSpread({
+    display: "flex",
+    alignItems: "center",
+    marginTop: "auto",
+    height: 52,
+    // we need to play with the 4px because of the focus ring
+    padding: `${theme.hv.spacing.sm - 4}px ${theme.hv.spacing.sm + 4}px 4px 4px`
+  }, theme.hv.typography.highlightText),
+  item: {},
+  itemSelected: {},
+  itemDisabled: {},
+  itemTypography: {},
+  itemIcon: {},
+  itemTitle: {},
+  itemInfo: {}
+});
+
+export default styles;
+//# sourceMappingURL=styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/AppSwitcher/styles.js"],"names":["styles","theme","root","display","flexDirection","overflow","padding","hv","spacing","sm","backgroundColor","palette","atmosphere","atmo1","single","width","dual","fluid","closed","open","zIndex","position","top","overflowX","boxShadow","shadows","title","minHeight","whiteSpace","textOverflow","actionsContainer","flexWrap","justifyContent","overflowY","footerContainer","alignItems","marginTop","height","typography","highlightText","item","itemSelected","itemDisabled","itemTypography","itemIcon","itemTitle","itemInfo"],"mappings":";;;;;;AAAA,MAAMA,MAAM,GAAIC,KAAD,KAAY;AACzBC,EAAAA,IAAI,EAAE;AACJC,IAAAA,OAAO,EAAE,MADL;AAEJC,IAAAA,aAAa,EAAE,QAFX;AAIJC,IAAAA,QAAQ,EAAE,QAJN;AAMJ;AACAC,IAAAA,OAAO,EAAG,GAAEL,KAAK,CAACM,EAAN,CAASC,OAAT,CAAiBC,EAAjB,GAAsB,CAAE,QAAOR,KAAK,CAACM,EAAN,CAASC,OAAT,CAAiBC,EAAjB,GAAsB,CAAE,MACjER,KAAK,CAACM,EAAN,CAASC,OAAT,CAAiBC,EAAjB,GAAsB,CACvB,IATG;AAWJC,IAAAA,eAAe,EAAET,KAAK,CAACM,EAAN,CAASI,OAAT,CAAiBC,UAAjB,CAA4BC;AAXzC,GADmB;AAezBC,EAAAA,MAAM,EAAE;AACNC,IAAAA,KAAK,EAAE;AADD,GAfiB;AAkBzBC,EAAAA,IAAI,EAAE;AACJD,IAAAA,KAAK,EAAE;AADH,GAlBmB;AAqBzBE,EAAAA,KAAK,EAAE,EArBkB;AAuBzBC,EAAAA,MAAM,EAAE;AACNf,IAAAA,OAAO,EAAE;AADH,GAvBiB;AA0BzBgB,EAAAA,IAAI,EAAE;AACJC,IAAAA,MAAM,EAAE,MADJ;AAEJC,IAAAA,QAAQ,EAAE,UAFN;AAGJC,IAAAA,GAAG,EAAE,MAHD;AAIJC,IAAAA,SAAS,EAAE,QAJP;AAKJC,IAAAA,SAAS,EAAEvB,KAAK,CAACM,EAAN,CAASkB,OAAT,CAAiB,CAAjB;AALP,GA1BmB;AAkCzBC,EAAAA,KAAK,EAAE;AACLC,IAAAA,SAAS,EAAE,EADN;AAGL;AACArB,IAAAA,OAAO,EAAG,OAAML,KAAK,CAACM,EAAN,CAASC,OAAT,CAAiBC,EAAG,MAAKR,KAAK,CAACM,EAAN,CAASC,OAAT,CAAiBC,EAAjB,GAAsB,CAAE,QAJ5D;AAMLJ,IAAAA,QAAQ,EAAE,QANL;AAOLuB,IAAAA,UAAU,EAAE,QAPP;AAQLC,IAAAA,YAAY,EAAE;AART,GAlCkB;AA6CzBC,EAAAA,gBAAgB,EAAE;AAChB3B,IAAAA,OAAO,EAAE,MADO;AAEhB4B,IAAAA,QAAQ,EAAE,MAFM;AAGhBC,IAAAA,cAAc,EAAE,YAHA;AAKhBC,IAAAA,SAAS,EAAE,MALK;AAOhB;AACA3B,IAAAA,OAAO,EAAE;AARO,GA7CO;AAwDzB4B,EAAAA,eAAe;AACb/B,IAAAA,OAAO,EAAE,MADI;AAEbgC,IAAAA,UAAU,EAAE,QAFC;AAIbC,IAAAA,SAAS,EAAE,MAJE;AAMbC,IAAAA,MAAM,EAAE,EANK;AAQb;AACA/B,IAAAA,OAAO,EAAG,GAAEL,KAAK,CAACM,EAAN,CAASC,OAAT,CAAiBC,EAAjB,GAAsB,CAAE,MAAKR,KAAK,CAACM,EAAN,CAASC,OAAT,CAAiBC,EAAjB,GAAsB,CAAE;AATpD,KAWVR,KAAK,CAACM,EAAN,CAAS+B,UAAT,CAAoBC,aAXV,CAxDU;AAsEzBC,EAAAA,IAAI,EAAE,EAtEmB;AAuEzBC,EAAAA,YAAY,EAAE,EAvEW;AAwEzBC,EAAAA,YAAY,EAAE,EAxEW;AAyEzBC,EAAAA,cAAc,EAAE,EAzES;AA0EzBC,EAAAA,QAAQ,EAAE,EA1Ee;AA2EzBC,EAAAA,SAAS,EAAE,EA3Ec;AA4EzBC,EAAAA,QAAQ,EAAE;AA5Ee,CAAZ,CAAf;;AA+EA,eAAe9C,MAAf","sourcesContent":["const styles = (theme) => ({\n  root: {\n    display: \"flex\",\n    flexDirection: \"column\",\n\n    overflow: \"hidden\",\n\n    // we need to play with the 4px because of the focus ring\n    padding: `${theme.hv.spacing.sm - 4}px 0 ${theme.hv.spacing.sm - 4}px ${\n      theme.hv.spacing.sm - 4\n    }px`,\n\n    backgroundColor: theme.hv.palette.atmosphere.atmo1,\n  },\n\n  single: {\n    width: 320,\n  },\n  dual: {\n    width: 620,\n  },\n  fluid: {},\n\n  closed: {\n    display: \"none\",\n  },\n  open: {\n    zIndex: \"1200\",\n    position: \"absolute\",\n    top: \"50px\",\n    overflowX: \"hidden\",\n    boxShadow: theme.hv.shadows[1],\n  },\n\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\n    overflow: \"hidden\",\n    whiteSpace: \"nowrap\",\n    textOverflow: \"ellipsis\",\n  },\n\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\n  footerContainer: {\n    display: \"flex\",\n    alignItems: \"center\",\n\n    marginTop: \"auto\",\n\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\n    ...theme.hv.typography.highlightText,\n  },\n\n  item: {},\n  itemSelected: {},\n  itemDisabled: {},\n  itemTypography: {},\n  itemIcon: {},\n  itemTitle: {},\n  itemInfo: {},\n});\n\nexport default styles;\n"],"file":"styles.js"}

package/dist/modern/Avatar/Avatar.d.ts

@@ -76,6 +76,10 @@ export interface HvAvatarProps
    * A string representing the color of the avatar badge.
    */
   badge?: "sema0" | HvSemanticColorKeys | HvAtmosphereColorKeys;
+  /**
+   * Attributes applied to the container element.
+   */
+  containerProps: object;
 }
 
 export default function HvAvatar(props: HvAvatarProps): JSX.Element | null;

package/dist/modern/Avatar/Avatar.js

@@ -1,7 +1,7 @@
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-const _excluded = ["className", "style", "classes", "children", "component", "size", "backgroundColor", "color", "src", "srcSet", "sizes", "alt", "imgProps", "status", "badge", "variant"];
+const _excluded = ["className", "style", "classes", "children", "component", "size", "backgroundColor", "color", "src", "srcSet", "sizes", "alt", "imgProps", "status", "badge", "variant", "containerProps"];
 
 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; }
 
@@ -65,7 +65,8 @@ const HvAvatar = props => {
     imgProps,
     status,
     badge,
-    variant = "circular"
+    variant = "circular",
+    containerProps
   } = props,
         others = _objectWithoutProperties(props, _excluded); // S, M and L are now deprecated, this intends to normalize the size to the new norm of XS, SM, MD, LG and XL
 
@@ -121,12 +122,17 @@ const HvAvatar = props => {
   }
 
   const badgeColor = getColor(theme, badge, theme.hv.palette.semantic.sema1);
-  return /*#__PURE__*/React.createElement("div", {
-    className: classes.container,
-    tabIndex: 0,
-    role: "button",
-    "aria-label": "avatar"
-  }, /*#__PURE__*/React.createElement("div", {
+  /**
+   * Note: on the next major release this should be updated. the `others` prop should be
+   * used in the container instead of the `containerProps` and a new `avatarProps`
+   * should be created to pass on any props down to the avatar component. This wasn't
+   * done now in order to not break the current API. Also, consider using the `root` class
+   * on the container element as it makes more semantic sense.
+   */
+
+  return /*#__PURE__*/React.createElement("div", _extends({
+    className: classes.container
+  }, containerProps), /*#__PURE__*/React.createElement("div", {
     className: clsx(classes.status, classes[variant], classes[normalizedSize]),
     style: statusInlineStyle
   }, badge && /*#__PURE__*/React.createElement("div", {
@@ -294,7 +300,12 @@ process.env.NODE_ENV !== "production" ? HvAvatar.propTypes = {
   /**
    * A string representing the color of the avatar badge.
    */
-  badge: PropTypes.string
+  badge: PropTypes.string,
+
+  /**
+   * Attributes applied to the container element.
+   */
+  containerProps: PropTypes.instanceOf(Object)
 } : void 0;
 export default withStyles(styles, {
   name: "HvAvatar"