@hitachivantara/uikit-react-core 5.22.1 → 5.24.0

package/dist/esm/components/DotPagination/DotPagination.js

@@ -1,5 +1,6 @@
 import { OtherStep, CurrentStep } from "@hitachivantara/uikit-react-icons";
 import { cloneElement } from "react";
+import { useDefaultProps } from "../../hooks/useDefaultProps.js";
 import { useClasses } from "./DotPagination.styles.js";
 import { staticClasses } from "./DotPagination.styles.js";
 import { jsx } from "@emotion/react/jsx-runtime";
@@ -21,18 +22,19 @@ const getSelectorIcons = (radioIcon, radioCheckedIcon, classes) => {
     })
   };
 };
-const HvDotPagination = ({
-  className,
-  classes: classesProp = {},
-  unselectedIcon,
-  selectedIcon,
-  pages = 1,
-  page = 0,
-  onPageChange,
-  getItemAriaLabel,
-  ...others
-}) => {
-  const range = (n) => Array.from(Array(n), (_, i) => i);
+const range = (n) => Array.from(Array(n), (_, i) => i);
+const HvDotPagination = (props) => {
+  const {
+    className,
+    classes: classesProp,
+    unselectedIcon,
+    selectedIcon,
+    pages = 1,
+    page = 0,
+    onPageChange,
+    getItemAriaLabel,
+    ...others
+  } = useDefaultProps("HvDotPagination", props);
   const {
     classes,
     cx

package/dist/esm/components/DotPagination/DotPagination.js.map

@@ -1 +1 @@
-{"version":3,"file":"DotPagination.js","sources":["../../../../src/components/DotPagination/DotPagination.tsx"],"sourcesContent":["import { CurrentStep, OtherStep } from \"@hitachivantara/uikit-react-icons\";\n\nimport { cloneElement } from \"react\";\n\nimport { HvRadio } from \"@core/components/Radio\";\nimport { HvRadioGroup, HvRadioGroupProps } from \"@core/components/RadioGroup\";\nimport { ExtractNames } from \"@core/utils/classes\";\n\nimport { staticClasses, useClasses } from \"./DotPagination.styles\";\n\nexport { staticClasses as dotPaginationClasses };\n\nexport type HvDotPaginationClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvDotPaginationProps\n  extends Omit<HvRadioGroupProps, \"classes\"> {\n  /**\n   * Icon to override the default one used for the unselected state.\n   *\n   * The default icon is `OtherStep`.\n   */\n  unselectedIcon?: React.ReactElement;\n  /**\n   * Icon to override the default one used for the selected state.\n   *\n   * The default icon is `CurrentStep`.\n   */\n  selectedIcon?: React.ReactElement;\n  /**\n   *  The number of pages the component has.\n   */\n  pages?: number;\n  /**\n   * The currently selected page.\n   */\n  page?: number;\n  /**\n   * The callback fired when the page value changes.\n   */\n  onPageChange?: (\n    event: React.ChangeEvent<HTMLInputElement>,\n    page: number\n  ) => void;\n  /**\n   * The callback fired to get the page aria label.\n   */\n  getItemAriaLabel?: (page: number) => string;\n  /**\n   * A Jss Object used to override or extend the styles applied.\n   */\n  classes?: HvDotPaginationClasses;\n}\n\nconst getSelectorIcons = (\n  radioIcon?: React.ReactElement,\n  radioCheckedIcon?: React.ReactElement,\n  classes?: HvDotPaginationClasses\n) => {\n  return {\n    radio: cloneElement(radioIcon || <OtherStep width={8} height={8} />, {\n      className: classes?.icon,\n    }),\n    radioChecked: cloneElement(\n      radioCheckedIcon || <CurrentStep width={8} height={8} />,\n      {\n        className: classes?.icon,\n      }\n    ),\n  };\n};\n\n/**\n * Pagination is the process of dividing a document into discrete pages. It relates to how users interact with structured content on a website or application.\n * This component uses Radio Buttons to represent each page.\n */\nexport const HvDotPagination = ({\n  className,\n  classes: classesProp = {},\n  unselectedIcon,\n  selectedIcon,\n  pages = 1,\n  page = 0,\n  onPageChange,\n  getItemAriaLabel,\n  ...others\n}: HvDotPaginationProps) => {\n  const range = (n: number) => Array.from(Array(n), (_, i) => i);\n\n  const { classes, cx } = useClasses(classesProp);\n\n  const icons = getSelectorIcons(unselectedIcon, selectedIcon, classes);\n\n  return (\n    <HvRadioGroup\n      className={cx(classes.root, className)}\n      classes={{\n        horizontal: classes.horizontal,\n      }}\n      orientation=\"horizontal\"\n      {...others}\n    >\n      {range(pages).map((i) => (\n        <HvRadio\n          classes={{\n            radio: classes.radio,\n            root: classes.radioRoot,\n          }}\n          key={i}\n          value={i}\n          checked={page === i}\n          onChange={(event) => onPageChange?.(event, i)}\n          icon={icons.radio}\n          checkedIcon={icons.radioChecked}\n          aria-label={getItemAriaLabel?.(i)}\n        />\n      ))}\n    </HvRadioGroup>\n  );\n};\n"],"names":["getSelectorIcons","radioIcon","radioCheckedIcon","classes","radio","cloneElement","_jsx","OtherStep","width","height","className","icon","radioChecked","CurrentStep","HvDotPagination","classesProp","unselectedIcon","selectedIcon","pages","page","onPageChange","getItemAriaLabel","others","range","n","Array","from","_","i","cx","useClasses","icons","HvRadioGroup","root","horizontal","orientation","children","map","HvRadio","radioRoot","value","checked","onChange","event","checkedIcon"],"mappings":";;;;;;;AAqDA,MAAMA,mBAAmBA,CACvBC,WACAC,kBACAC,YACG;AACI,SAAA;AAAA,IACLC,OAAOC,aAAaJ,aAAaK,oBAACC,WAAS;AAAA,MAACC,OAAO;AAAA,MAAGC,QAAQ;AAAA,IAAA,CAAI,GAAG;AAAA,MACnEC,WAAWP,mCAASQ;AAAAA,IAAAA,CACrB;AAAA,IACDC,cAAcP,aACZH,oBAAoBI,oBAACO,aAAW;AAAA,MAACL,OAAO;AAAA,MAAGC,QAAQ;AAAA,IAAA,CAAI,GACvD;AAAA,MACEC,WAAWP,mCAASQ;AAAAA,IAAAA,CAExB;AAAA,EAAA;AAEJ;AAMO,MAAMG,kBAAkBA,CAAC;AAAA,EAC9BJ;AAAAA,EACAP,SAASY,cAAc,CAAC;AAAA,EACxBC;AAAAA,EACAC;AAAAA,EACAC,QAAQ;AAAA,EACRC,OAAO;AAAA,EACPC;AAAAA,EACAC;AAAAA,EACA,GAAGC;AACiB,MAAM;AACpBC,QAAAA,QAAQA,CAACC,MAAcC,MAAMC,KAAKD,MAAMD,CAAC,GAAG,CAACG,GAAGC,MAAMA,CAAC;AAEvD,QAAA;AAAA,IAAEzB;AAAAA,IAAS0B;AAAAA,EAAAA,IAAOC,WAAWf,WAAW;AAE9C,QAAMgB,QAAQ/B,iBAAiBgB,gBAAgBC,cAAcd,OAAO;AAEpE,6BACG6B,cAAY;AAAA,IACXtB,WAAWmB,GAAG1B,QAAQ8B,MAAMvB,SAAS;AAAA,IACrCP,SAAS;AAAA,MACP+B,YAAY/B,QAAQ+B;AAAAA,IACtB;AAAA,IACAC,aAAY;AAAA,IAAY,GACpBb;AAAAA,IAAMc,UAETb,MAAML,KAAK,EAAEmB,IAAKT,CAAAA,0BAChBU,SAAO;AAAA,MACNnC,SAAS;AAAA,QACPC,OAAOD,QAAQC;AAAAA,QACf6B,MAAM9B,QAAQoC;AAAAA,MAChB;AAAA,MAEAC,OAAOZ;AAAAA,MACPa,SAAStB,SAASS;AAAAA,MAClBc,UAAWC,CAAAA,UAAUvB,6CAAeuB,OAAOf;AAAAA,MAC3CjB,MAAMoB,MAAM3B;AAAAA,MACZwC,aAAab,MAAMnB;AAAAA,MACnB,cAAYS,qDAAmBO;AAAAA,IAAG,GAN7BA,CAON,CACF;AAAA,EAAA,CACW;AAElB;"}
+{"version":3,"file":"DotPagination.js","sources":["../../../../src/components/DotPagination/DotPagination.tsx"],"sourcesContent":["import { CurrentStep, OtherStep } from \"@hitachivantara/uikit-react-icons\";\n\nimport { cloneElement } from \"react\";\n\nimport { HvRadio } from \"@core/components/Radio\";\nimport { HvRadioGroup, HvRadioGroupProps } from \"@core/components/RadioGroup\";\nimport { ExtractNames } from \"@core/utils/classes\";\n\nimport { useDefaultProps } from \"@core/hooks/useDefaultProps\";\nimport { staticClasses, useClasses } from \"./DotPagination.styles\";\n\nexport { staticClasses as dotPaginationClasses };\n\nexport type HvDotPaginationClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvDotPaginationProps\n  extends Omit<HvRadioGroupProps, \"classes\"> {\n  /**\n   * Icon to override the default one used for the unselected state.\n   *\n   * The default icon is `OtherStep`.\n   */\n  unselectedIcon?: React.ReactElement;\n  /**\n   * Icon to override the default one used for the selected state.\n   *\n   * The default icon is `CurrentStep`.\n   */\n  selectedIcon?: React.ReactElement;\n  /**\n   *  The number of pages the component has.\n   */\n  pages?: number;\n  /**\n   * The currently selected page.\n   */\n  page?: number;\n  /**\n   * The callback fired when the page value changes.\n   */\n  onPageChange?: (\n    event: React.ChangeEvent<HTMLInputElement>,\n    page: number\n  ) => void;\n  /**\n   * The callback fired to get the page aria label.\n   */\n  getItemAriaLabel?: (page: number) => string;\n  /**\n   * A Jss Object used to override or extend the styles applied.\n   */\n  classes?: HvDotPaginationClasses;\n}\n\nconst getSelectorIcons = (\n  radioIcon?: React.ReactElement,\n  radioCheckedIcon?: React.ReactElement,\n  classes?: HvDotPaginationClasses\n) => {\n  return {\n    radio: cloneElement(radioIcon || <OtherStep width={8} height={8} />, {\n      className: classes?.icon,\n    }),\n    radioChecked: cloneElement(\n      radioCheckedIcon || <CurrentStep width={8} height={8} />,\n      {\n        className: classes?.icon,\n      }\n    ),\n  };\n};\n\nconst range = (n: number) => Array.from(Array(n), (_, i) => i);\n\n/**\n * Pagination is the process of dividing a document into discrete pages. It relates to how users interact with structured content on a website or application.\n * This component uses Radio Buttons to represent each page.\n */\nexport const HvDotPagination = (props: HvDotPaginationProps) => {\n  const {\n    className,\n    classes: classesProp,\n    unselectedIcon,\n    selectedIcon,\n    pages = 1,\n    page = 0,\n    onPageChange,\n    getItemAriaLabel,\n    ...others\n  } = useDefaultProps(\"HvDotPagination\", props);\n\n  const { classes, cx } = useClasses(classesProp);\n\n  const icons = getSelectorIcons(unselectedIcon, selectedIcon, classes);\n\n  return (\n    <HvRadioGroup\n      className={cx(classes.root, className)}\n      classes={{\n        horizontal: classes.horizontal,\n      }}\n      orientation=\"horizontal\"\n      {...others}\n    >\n      {range(pages).map((i) => (\n        <HvRadio\n          classes={{\n            radio: classes.radio,\n            root: classes.radioRoot,\n          }}\n          key={i}\n          value={i}\n          checked={page === i}\n          onChange={(event) => onPageChange?.(event, i)}\n          icon={icons.radio}\n          checkedIcon={icons.radioChecked}\n          aria-label={getItemAriaLabel?.(i)}\n        />\n      ))}\n    </HvRadioGroup>\n  );\n};\n"],"names":["getSelectorIcons","radioIcon","radioCheckedIcon","classes","radio","cloneElement","_jsx","OtherStep","width","height","className","icon","radioChecked","CurrentStep","range","n","Array","from","_","i","HvDotPagination","props","classesProp","unselectedIcon","selectedIcon","pages","page","onPageChange","getItemAriaLabel","others","useDefaultProps","cx","useClasses","icons","HvRadioGroup","root","horizontal","orientation","children","map","HvRadio","radioRoot","value","checked","onChange","event","checkedIcon"],"mappings":";;;;;;;;AAsDA,MAAMA,mBAAmBA,CACvBC,WACAC,kBACAC,YACG;AACI,SAAA;AAAA,IACLC,OAAOC,aAAaJ,aAAaK,oBAACC,WAAS;AAAA,MAACC,OAAO;AAAA,MAAGC,QAAQ;AAAA,IAAA,CAAI,GAAG;AAAA,MACnEC,WAAWP,mCAASQ;AAAAA,IAAAA,CACrB;AAAA,IACDC,cAAcP,aACZH,oBAAoBI,oBAACO,aAAW;AAAA,MAACL,OAAO;AAAA,MAAGC,QAAQ;AAAA,IAAA,CAAI,GACvD;AAAA,MACEC,WAAWP,mCAASQ;AAAAA,IAAAA,CAExB;AAAA,EAAA;AAEJ;AAEA,MAAMG,QAAQA,CAACC,MAAcC,MAAMC,KAAKD,MAAMD,CAAC,GAAG,CAACG,GAAGC,MAAMA,CAAC;AAMhDC,MAAAA,kBAAkBA,CAACC,UAAgC;AACxD,QAAA;AAAA,IACJX;AAAAA,IACAP,SAASmB;AAAAA,IACTC;AAAAA,IACAC;AAAAA,IACAC,QAAQ;AAAA,IACRC,OAAO;AAAA,IACPC;AAAAA,IACAC;AAAAA,IACA,GAAGC;AAAAA,EAAAA,IACDC,gBAAgB,mBAAmBT,KAAK;AAEtC,QAAA;AAAA,IAAElB;AAAAA,IAAS4B;AAAAA,EAAAA,IAAOC,WAAWV,WAAW;AAE9C,QAAMW,QAAQjC,iBAAiBuB,gBAAgBC,cAAcrB,OAAO;AAEpE,6BACG+B,cAAY;AAAA,IACXxB,WAAWqB,GAAG5B,QAAQgC,MAAMzB,SAAS;AAAA,IACrCP,SAAS;AAAA,MACPiC,YAAYjC,QAAQiC;AAAAA,IACtB;AAAA,IACAC,aAAY;AAAA,IAAY,GACpBR;AAAAA,IAAMS,UAETxB,MAAMW,KAAK,EAAEc,IAAKpB,CAAAA,0BAChBqB,SAAO;AAAA,MACNrC,SAAS;AAAA,QACPC,OAAOD,QAAQC;AAAAA,QACf+B,MAAMhC,QAAQsC;AAAAA,MAChB;AAAA,MAEAC,OAAOvB;AAAAA,MACPwB,SAASjB,SAASP;AAAAA,MAClByB,UAAWC,CAAAA,UAAUlB,6CAAekB,OAAO1B;AAAAA,MAC3CR,MAAMsB,MAAM7B;AAAAA,MACZ0C,aAAab,MAAMrB;AAAAA,MACnB,cAAYgB,qDAAmBT;AAAAA,IAAG,GAN7BA,CAON,CACF;AAAA,EAAA,CACW;AAElB;"}

package/dist/esm/components/Drawer/Drawer.js

@@ -1,4 +1,5 @@
 import { useState, useEffect } from "react";
+import { useDefaultProps } from "../../hooks/useDefaultProps.js";
 import { Drawer } from "@mui/material";
 import { Close } from "@hitachivantara/uikit-react-icons";
 import { theme } from "@hitachivantara/uikit-styles";
@@ -15,17 +16,18 @@ import { HvButton } from "../Button/Button.js";
 const getBackgroundColor = (color) => {
   return checkValidHexColorValue(color) ? hexToRgbA(color, 0.8) : color;
 };
-const HvDrawer = ({
-  className,
-  classes: classesProp,
-  id,
-  children,
-  open,
-  onClose,
-  anchor = "right",
-  buttonTitle = "Close",
-  ...others
-}) => {
+const HvDrawer = (props) => {
+  const {
+    className,
+    classes: classesProp,
+    id,
+    children,
+    open,
+    onClose,
+    anchor = "right",
+    buttonTitle = "Close",
+    ...others
+  } = useDefaultProps("HvDrawer", props);
   const {
     classes,
     css,

package/dist/esm/components/Drawer/Drawer.js.map

@@ -1 +1 @@
-{"version":3,"file":"Drawer.js","sources":["../../../../src/components/Drawer/Drawer.tsx"],"sourcesContent":["import { useEffect, useState } from \"react\";\n\nimport {\n  Drawer as MuiDrawer,\n  DrawerProps as MuiDrawerProps,\n} from \"@mui/material\";\n\nimport { Close } from \"@hitachivantara/uikit-react-icons\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { HvBaseProps } from \"@core/types/generic\";\nimport { withTooltip } from \"@core/hocs/withTooltip\";\nimport { hexToRgbA } from \"@core/utils/hexToRgbA\";\nimport { setId } from \"@core/utils/setId\";\nimport { checkValidHexColorValue } from \"@core/utils/checkValidHexColorValue\";\nimport { ExtractNames } from \"@core/utils/classes\";\nimport { getVarValue } from \"@core/utils/theme\";\nimport { HvButton } from \"@core/components/Button\";\nimport { useTheme } from \"@core/hooks/useTheme\";\n\nimport { staticClasses, useClasses } from \"./Drawer.styles\";\n\nexport { staticClasses as drawerClasses };\n\nexport type HvDrawerClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvDrawerProps\n  extends MuiDrawerProps,\n    Omit<MuiDrawerProps, \"classes\">,\n    HvBaseProps<HTMLDivElement> {\n  /**\n   * Class names to be applied.\n   */\n  className?: string;\n  /**\n   * Id to be applied to the root node.\n   */\n  id?: string;\n  /**\n   * A Jss Object used to override or extend the styles applied.\n   */\n  classes?: HvDrawerClasses;\n  /**\n   * Components of the Drawer.\n   */\n  children?: React.ReactNode;\n  /**\n   * Current state of the Drawer.\n   */\n  open?: boolean;\n  /**\n   * Function executed on close.\n   * Extended from Modal from material-ui\n   *\n   */\n  onClose?: (\n    event: React.SyntheticEvent,\n    reason?: \"escapeKeyDown\" | \"backdropClick\"\n  ) => void;\n  /**\n   * The side the drawer opens from.\n   */\n  anchor?: \"left\" | \"top\" | \"right\" | \"bottom\";\n  /**\n   * Title for the button close.\n   */\n  buttonTitle?: string;\n}\n\nconst getBackgroundColor = (color: string) => {\n  return checkValidHexColorValue(color) ? hexToRgbA(color, 0.8) : color;\n};\n\n/**\n * The Drawer component provides a foundation to create a sliding pane.\n * It only provides the pane with a close button, the rest of the\n * content can be customized.\n */\nexport const HvDrawer = ({\n  className,\n  classes: classesProp,\n  id,\n  children,\n  open,\n  onClose,\n  anchor = \"right\",\n  buttonTitle = \"Close\",\n  ...others\n}: HvDrawerProps) => {\n  const { classes, css, cx } = useClasses(classesProp);\n  const { activeTheme, rootId } = useTheme();\n\n  const [backgroundColorValue, setBackgroundColorValue] = useState<string>(\n    getVarValue(theme.drawer.backDropBackgroundColor, rootId) || \"\"\n  );\n\n  const closeButtonDisplay = () => <Close role=\"presentation\" />;\n\n  const CloseButtonTooltipWrapper = buttonTitle\n    ? withTooltip(closeButtonDisplay, buttonTitle, \"top\")\n    : closeButtonDisplay;\n\n  const [backgroundColor, setBackgroundColor] = useState(\n    getBackgroundColor(backgroundColorValue)\n  );\n\n  useEffect(() => {\n    setBackgroundColorValue(\n      getVarValue(theme.drawer.backDropBackgroundColor, rootId) ||\n        activeTheme?.drawer.backDropBackgroundColor ||\n        \"\"\n    );\n\n    setBackgroundColor(getBackgroundColor(backgroundColorValue));\n  }, [\n    activeTheme?.colors.modes.selectedMode,\n    backgroundColorValue,\n    setBackgroundColor,\n    rootId,\n    activeTheme?.drawer.backDropBackgroundColor,\n  ]);\n\n  return (\n    <MuiDrawer\n      className={cx(classes.root, className)}\n      id={id}\n      anchor={anchor}\n      open={open}\n      PaperProps={{\n        classes: {\n          root: classes.paper,\n        },\n      }}\n      BackdropProps={{\n        classes: {\n          root: cx(css({ backgroundColor }), classes.background),\n        },\n      }}\n      onClose={onClose}\n      {...others}\n    >\n      <HvButton\n        id={setId(id, \"close\")}\n        className={classes.closeButton}\n        variant=\"secondaryGhost\"\n        onClick={onClose}\n        aria-label={buttonTitle}\n      >\n        <CloseButtonTooltipWrapper />\n      </HvButton>\n      {children}\n    </MuiDrawer>\n  );\n};\n"],"names":["getBackgroundColor","color","checkValidHexColorValue","hexToRgbA","HvDrawer","className","classes","classesProp","id","children","open","onClose","anchor","buttonTitle","others","css","cx","useClasses","activeTheme","rootId","useTheme","backgroundColorValue","setBackgroundColorValue","useState","getVarValue","theme","drawer","backDropBackgroundColor","closeButtonDisplay","_jsx","Close","role","CloseButtonTooltipWrapper","withTooltip","backgroundColor","setBackgroundColor","useEffect","colors","modes","selectedMode","MuiDrawer","root","PaperProps","paper","BackdropProps","background","HvButton","setId","closeButton","variant","onClick"],"mappings":";;;;;;;;;;;;;;AAqEA,MAAMA,qBAAqBA,CAACC,UAAkB;AAC5C,SAAOC,wBAAwBD,KAAK,IAAIE,UAAUF,OAAO,GAAG,IAAIA;AAClE;AAOO,MAAMG,WAAWA,CAAC;AAAA,EACvBC;AAAAA,EACAC,SAASC;AAAAA,EACTC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC,SAAS;AAAA,EACTC,cAAc;AAAA,EACd,GAAGC;AACU,MAAM;AACb,QAAA;AAAA,IAAER;AAAAA,IAASS;AAAAA,IAAKC;AAAAA,EAAAA,IAAOC,WAAWV,WAAW;AAC7C,QAAA;AAAA,IAAEW;AAAAA,IAAaC;AAAAA,MAAWC,SAAS;AAEnC,QAAA,CAACC,sBAAsBC,uBAAuB,IAAIC,SACtDC,YAAYC,MAAMC,OAAOC,yBAAyBR,MAAM,KAAK,EAC/D;AAEMS,QAAAA,qBAAqBA,MAAMC,oBAACC,OAAK;AAAA,IAACC,MAAK;AAAA,EAAA,CAAgB;AAE7D,QAAMC,4BAA4BnB,cAC9BoB,YAAYL,oBAAoBf,aAAa,KAAK,IAClDe;AAEJ,QAAM,CAACM,iBAAiBC,kBAAkB,IAAIZ,SAC5CvB,mBAAmBqB,oBAAoB,CACzC;AAEAe,YAAU,MAAM;AAEZZ,4BAAAA,YAAYC,MAAMC,OAAOC,yBAAyBR,MAAM,MACtDD,2CAAaQ,OAAOC,4BACpB,EACJ;AAEmB3B,uBAAAA,mBAAmBqB,oBAAoB,CAAC;AAAA,EAC1D,GAAA,CACDH,2CAAamB,OAAOC,MAAMC,cAC1BlB,sBACAc,oBACAhB,QACAD,2CAAaQ,OAAOC,uBAAuB,CAC5C;AAED,8BACGa,QAAS;AAAA,IACRnC,WAAWW,GAAGV,QAAQmC,MAAMpC,SAAS;AAAA,IACrCG;AAAAA,IACAI;AAAAA,IACAF;AAAAA,IACAgC,YAAY;AAAA,MACVpC,SAAS;AAAA,QACPmC,MAAMnC,QAAQqC;AAAAA,MAChB;AAAA,IACF;AAAA,IACAC,eAAe;AAAA,MACbtC,SAAS;AAAA,QACPmC,MAAMzB,GAAGD,IAAI;AAAA,UAAEmB;AAAAA,QAAAA,CAAiB,GAAG5B,QAAQuC,UAAU;AAAA,MACvD;AAAA,IACF;AAAA,IACAlC;AAAAA,IAAiB,GACbG;AAAAA,IAAML,UAAA,CAEVoB,oBAACiB,UAAQ;AAAA,MACPtC,IAAIuC,MAAMvC,IAAI,OAAO;AAAA,MACrBH,WAAWC,QAAQ0C;AAAAA,MACnBC,SAAQ;AAAA,MACRC,SAASvC;AAAAA,MACT,cAAYE;AAAAA,MAAYJ,UAExBoB,oBAACG,2BAA2B,EAAA;AAAA,IACpB,CAAA,GACTvB,QAAQ;AAAA,EAAA,CACA;AAEf;"}
+{"version":3,"file":"Drawer.js","sources":["../../../../src/components/Drawer/Drawer.tsx"],"sourcesContent":["import { useEffect, useState } from \"react\";\nimport { useDefaultProps } from \"@core/hooks/useDefaultProps\";\n\nimport {\n  Drawer as MuiDrawer,\n  DrawerProps as MuiDrawerProps,\n} from \"@mui/material\";\n\nimport { Close } from \"@hitachivantara/uikit-react-icons\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { HvBaseProps } from \"@core/types/generic\";\nimport { withTooltip } from \"@core/hocs/withTooltip\";\nimport { hexToRgbA } from \"@core/utils/hexToRgbA\";\nimport { setId } from \"@core/utils/setId\";\nimport { checkValidHexColorValue } from \"@core/utils/checkValidHexColorValue\";\nimport { ExtractNames } from \"@core/utils/classes\";\nimport { getVarValue } from \"@core/utils/theme\";\nimport { HvButton } from \"@core/components/Button\";\nimport { useTheme } from \"@core/hooks/useTheme\";\n\nimport { staticClasses, useClasses } from \"./Drawer.styles\";\n\nexport { staticClasses as drawerClasses };\n\nexport type HvDrawerClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvDrawerProps\n  extends MuiDrawerProps,\n    Omit<MuiDrawerProps, \"classes\">,\n    HvBaseProps<HTMLDivElement> {\n  /**\n   * Class names to be applied.\n   */\n  className?: string;\n  /**\n   * Id to be applied to the root node.\n   */\n  id?: string;\n  /**\n   * A Jss Object used to override or extend the styles applied.\n   */\n  classes?: HvDrawerClasses;\n  /**\n   * Components of the Drawer.\n   */\n  children?: React.ReactNode;\n  /**\n   * Current state of the Drawer.\n   */\n  open?: boolean;\n  /**\n   * Function executed on close.\n   * Extended from Modal from material-ui\n   *\n   */\n  onClose?: (\n    event: React.SyntheticEvent,\n    reason?: \"escapeKeyDown\" | \"backdropClick\"\n  ) => void;\n  /**\n   * The side the drawer opens from.\n   */\n  anchor?: \"left\" | \"top\" | \"right\" | \"bottom\";\n  /**\n   * Title for the button close.\n   */\n  buttonTitle?: string;\n}\n\nconst getBackgroundColor = (color: string) => {\n  return checkValidHexColorValue(color) ? hexToRgbA(color, 0.8) : color;\n};\n\n/**\n * The Drawer component provides a foundation to create a sliding pane.\n * It only provides the pane with a close button, the rest of the\n * content can be customized.\n */\nexport const HvDrawer = (props: HvDrawerProps) => {\n  const {\n    className,\n    classes: classesProp,\n    id,\n    children,\n    open,\n    onClose,\n    anchor = \"right\",\n    buttonTitle = \"Close\",\n    ...others\n  } = useDefaultProps(\"HvDrawer\", props);\n\n  const { classes, css, cx } = useClasses(classesProp);\n  const { activeTheme, rootId } = useTheme();\n\n  const [backgroundColorValue, setBackgroundColorValue] = useState<string>(\n    getVarValue(theme.drawer.backDropBackgroundColor, rootId) || \"\"\n  );\n\n  const closeButtonDisplay = () => <Close role=\"presentation\" />;\n\n  const CloseButtonTooltipWrapper = buttonTitle\n    ? withTooltip(closeButtonDisplay, buttonTitle, \"top\")\n    : closeButtonDisplay;\n\n  const [backgroundColor, setBackgroundColor] = useState(\n    getBackgroundColor(backgroundColorValue)\n  );\n\n  useEffect(() => {\n    setBackgroundColorValue(\n      getVarValue(theme.drawer.backDropBackgroundColor, rootId) ||\n        activeTheme?.drawer.backDropBackgroundColor ||\n        \"\"\n    );\n\n    setBackgroundColor(getBackgroundColor(backgroundColorValue));\n  }, [\n    activeTheme?.colors.modes.selectedMode,\n    backgroundColorValue,\n    setBackgroundColor,\n    rootId,\n    activeTheme?.drawer.backDropBackgroundColor,\n  ]);\n\n  return (\n    <MuiDrawer\n      className={cx(classes.root, className)}\n      id={id}\n      anchor={anchor}\n      open={open}\n      PaperProps={{\n        classes: {\n          root: classes.paper,\n        },\n      }}\n      BackdropProps={{\n        classes: {\n          root: cx(css({ backgroundColor }), classes.background),\n        },\n      }}\n      onClose={onClose}\n      {...others}\n    >\n      <HvButton\n        id={setId(id, \"close\")}\n        className={classes.closeButton}\n        variant=\"secondaryGhost\"\n        onClick={onClose}\n        aria-label={buttonTitle}\n      >\n        <CloseButtonTooltipWrapper />\n      </HvButton>\n      {children}\n    </MuiDrawer>\n  );\n};\n"],"names":["getBackgroundColor","color","checkValidHexColorValue","hexToRgbA","HvDrawer","props","className","classes","classesProp","id","children","open","onClose","anchor","buttonTitle","others","useDefaultProps","css","cx","useClasses","activeTheme","rootId","useTheme","backgroundColorValue","setBackgroundColorValue","useState","getVarValue","theme","drawer","backDropBackgroundColor","closeButtonDisplay","_jsx","Close","role","CloseButtonTooltipWrapper","withTooltip","backgroundColor","setBackgroundColor","useEffect","colors","modes","selectedMode","MuiDrawer","root","PaperProps","paper","BackdropProps","background","HvButton","setId","closeButton","variant","onClick"],"mappings":";;;;;;;;;;;;;;;AAsEA,MAAMA,qBAAqBA,CAACC,UAAkB;AAC5C,SAAOC,wBAAwBD,KAAK,IAAIE,UAAUF,OAAO,GAAG,IAAIA;AAClE;AAOaG,MAAAA,WAAWA,CAACC,UAAyB;AAC1C,QAAA;AAAA,IACJC;AAAAA,IACAC,SAASC;AAAAA,IACTC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC,SAAS;AAAA,IACTC,cAAc;AAAA,IACd,GAAGC;AAAAA,EAAAA,IACDC,gBAAgB,YAAYX,KAAK;AAE/B,QAAA;AAAA,IAAEE;AAAAA,IAASU;AAAAA,IAAKC;AAAAA,EAAAA,IAAOC,WAAWX,WAAW;AAC7C,QAAA;AAAA,IAAEY;AAAAA,IAAaC;AAAAA,MAAWC,SAAS;AAEnC,QAAA,CAACC,sBAAsBC,uBAAuB,IAAIC,SACtDC,YAAYC,MAAMC,OAAOC,yBAAyBR,MAAM,KAAK,EAC/D;AAEMS,QAAAA,qBAAqBA,MAAMC,oBAACC,OAAK;AAAA,IAACC,MAAK;AAAA,EAAA,CAAgB;AAE7D,QAAMC,4BAA4BpB,cAC9BqB,YAAYL,oBAAoBhB,aAAa,KAAK,IAClDgB;AAEJ,QAAM,CAACM,iBAAiBC,kBAAkB,IAAIZ,SAC5CzB,mBAAmBuB,oBAAoB,CACzC;AAEAe,YAAU,MAAM;AAEZZ,4BAAAA,YAAYC,MAAMC,OAAOC,yBAAyBR,MAAM,MACtDD,2CAAaQ,OAAOC,4BACpB,EACJ;AAEmB7B,uBAAAA,mBAAmBuB,oBAAoB,CAAC;AAAA,EAC1D,GAAA,CACDH,2CAAamB,OAAOC,MAAMC,cAC1BlB,sBACAc,oBACAhB,QACAD,2CAAaQ,OAAOC,uBAAuB,CAC5C;AAED,8BACGa,QAAS;AAAA,IACRpC,WAAWY,GAAGX,QAAQoC,MAAMrC,SAAS;AAAA,IACrCG;AAAAA,IACAI;AAAAA,IACAF;AAAAA,IACAiC,YAAY;AAAA,MACVrC,SAAS;AAAA,QACPoC,MAAMpC,QAAQsC;AAAAA,MAChB;AAAA,IACF;AAAA,IACAC,eAAe;AAAA,MACbvC,SAAS;AAAA,QACPoC,MAAMzB,GAAGD,IAAI;AAAA,UAAEmB;AAAAA,QAAAA,CAAiB,GAAG7B,QAAQwC,UAAU;AAAA,MACvD;AAAA,IACF;AAAA,IACAnC;AAAAA,IAAiB,GACbG;AAAAA,IAAML,UAAA,CAEVqB,oBAACiB,UAAQ;AAAA,MACPvC,IAAIwC,MAAMxC,IAAI,OAAO;AAAA,MACrBH,WAAWC,QAAQ2C;AAAAA,MACnBC,SAAQ;AAAA,MACRC,SAASxC;AAAAA,MACT,cAAYE;AAAAA,MAAYJ,UAExBqB,oBAACG,2BAA2B,EAAA;AAAA,IACpB,CAAA,GACTxB,QAAQ;AAAA,EAAA,CACA;AAEf;"}

package/dist/esm/components/DropDownMenu/DropDownMenu.js

@@ -1,4 +1,5 @@
 import { useMemo } from "react";
+import { useDefaultProps } from "../../hooks/useDefaultProps.js";
 import { theme } from "@hitachivantara/uikit-styles";
 import { MoreOptionsVertical } from "@hitachivantara/uikit-react-icons";
 import { useUniqueId } from "../../hooks/useUniqueId.js";
@@ -13,23 +14,24 @@ import { HvBaseDropdown } from "../BaseDropdown/BaseDropdown.js";
 import { HvButton } from "../Button/Button.js";
 import { HvPanel } from "../Panel/Panel.js";
 import { HvList } from "../List/List.js";
-const HvDropDownMenu = ({
-  id: idProp,
-  classes: classesProp,
-  className,
-  icon,
-  placement = "right",
-  dataList,
-  disablePortal = false,
-  onToggle,
-  onClick,
-  keepOpened = true,
-  disabled = false,
-  expanded,
-  defaultExpanded = false,
-  category = "secondaryGhost",
-  ...others
-}) => {
+const HvDropDownMenu = (props) => {
+  const {
+    id: idProp,
+    classes: classesProp,
+    className,
+    icon,
+    placement = "right",
+    dataList,
+    disablePortal = false,
+    onToggle,
+    onClick,
+    keepOpened = true,
+    disabled = false,
+    expanded,
+    defaultExpanded = false,
+    category = "secondaryGhost",
+    ...others
+  } = useDefaultProps("HvDropDownMenu", props);
   const {
     classes,
     cx
@@ -82,6 +84,7 @@ const HvDropDownMenu = ({
       disabled,
       "aria-label": "Dropdown menu",
       children: icon || /* @__PURE__ */ jsx(MoreOptionsVertical, {
+        role: "presentation",
         color: disabled ? "secondary_60" : void 0
       })
     }),

package/dist/esm/components/DropDownMenu/DropDownMenu.js.map

@@ -1 +1 @@
-{"version":3,"file":"DropDownMenu.js","sources":["../../../../src/components/DropDownMenu/DropDownMenu.tsx"],"sourcesContent":["import { ChangeEvent, useMemo } from \"react\";\n\nimport { theme } from \"@hitachivantara/uikit-styles\";\nimport { MoreOptionsVertical } from \"@hitachivantara/uikit-react-icons\";\n\nimport { useUniqueId } from \"@core/hooks/useUniqueId\";\nimport { useControlled } from \"@core/hooks/useControlled\";\nimport { HvBaseProps } from \"@core/types/generic\";\nimport { isKey } from \"@core/utils/keyboardUtils\";\nimport { setId } from \"@core/utils/setId\";\nimport { getPrevNextFocus } from \"@core/utils/focusableElementFinder\";\nimport { ExtractNames } from \"@core/utils/classes\";\nimport {\n  HvBaseDropdown,\n  HvBaseDropdownProps,\n} from \"@core/components/BaseDropdown\";\nimport { HvButton, HvButtonVariant } from \"@core/components/Button\";\nimport { HvList, HvListProps, HvListValue } from \"@core/components/List\";\nimport { HvPanel } from \"@core/components/Panel\";\n\nimport { staticClasses, useClasses } from \"./DropDownMenu.styles\";\n\nexport { staticClasses as dropDownMenuClasses };\n\nexport type HvDropDownMenuClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvDropDownMenuProps\n  extends HvBaseProps<HTMLDivElement, \"onClick\"> {\n  /** Icon. */\n  icon?: React.ReactElement;\n  /**\n   * A list containing the elements to be rendered.\n   *\n   * - label: The label of the element to be rendered.\n   * - selected: The selection state of the element.\n   * - disabled: The disabled state of the element.\n   * - icon: The icon node to be rendered on the left.\n   * - showNavIcon: If true renders the navigation icon on the right.\n   */\n  dataList: HvListValue[];\n  /** Placement of the dropdown. */\n  placement?: \"left\" | \"right\";\n  /** Disable the portal behavior. The children stay within it's parent DOM hierarchy. */\n  disablePortal?: boolean;\n  /** Function executed on toggle of the dropdown. Should receive the open status. */\n  onToggle?: (event: Event, open: boolean) => void;\n  /** Function executed in each onClick. Should received the clicked element. */\n  onClick?: (\n    event: React.ChangeEvent<HTMLLIElement>,\n    value: HvListValue\n  ) => void;\n  /** Keep the Dropdown Menu opened after clicking one option */\n  keepOpened?: boolean;\n  /** Defines if the component is disabled. */\n  disabled?: boolean;\n  /** If true it should be displayed open. */\n  expanded?: boolean;\n  /** When uncontrolled, defines the initial expanded state. */\n  defaultExpanded?: boolean;\n  /** The variant to be used in the header. */\n  category?: HvButtonVariant;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvDropDownMenuClasses;\n}\n\n/**\n * A drop-down menu is a graphical control element, similar to a list box, that allows the user to choose a value from a list.\n */\nexport const HvDropDownMenu = ({\n  id: idProp,\n  classes: classesProp,\n  className,\n  icon,\n  placement = \"right\",\n  dataList,\n  disablePortal = false,\n  onToggle,\n  onClick,\n  keepOpened = true,\n  disabled = false,\n  expanded,\n  defaultExpanded = false,\n  category = \"secondaryGhost\",\n  ...others\n}: HvDropDownMenuProps) => {\n  const { classes, cx } = useClasses(classesProp);\n  const [open, setOpen] = useControlled(expanded, Boolean(defaultExpanded));\n  const id = useUniqueId(idProp, \"dropdown-menu\");\n  const focusNodes = getPrevNextFocus(setId(id, \"icon-button\"));\n\n  const listId = setId(id, \"list\");\n\n  const handleClose = (event: ChangeEvent) => {\n    // this will only run if uncontrolled\n    setOpen(false);\n    onToggle?.(event as any, false);\n  };\n\n  // If the ESCAPE key is pressed inside the list, the close handler must be called.\n  const handleKeyDown: HvListProps[\"onKeyDown\"] = (event) => {\n    if (isKey(event, \"Tab\")) {\n      const node = event.shiftKey ? focusNodes.prevFocus : focusNodes.nextFocus;\n      if (node) setTimeout(() => node.focus(), 0);\n      handleClose(event as any);\n    }\n    event.preventDefault();\n  };\n\n  const setFocusToContent: HvBaseDropdownProps[\"onContainerCreation\"] = (\n    containerRef\n  ) => {\n    containerRef?.getElementsByTagName(\"li\")[0]?.focus();\n  };\n\n  const condensed = useMemo(() => dataList.every((el) => !el.icon), [dataList]);\n  const popperStyle: HvBaseDropdownProps[\"popperProps\"] = {\n    style: {\n      zIndex: theme.zIndices.tooltip,\n      width: \"auto\",\n      position: \"relative\",\n    },\n  };\n\n  return (\n    <HvBaseDropdown\n      id={id}\n      className={cx(className, classes.container)}\n      classes={{\n        root: classes.root,\n        container: classes.baseContainer,\n      }}\n      expanded={open && !disabled}\n      component={\n        <HvButton\n          icon\n          variant={category}\n          id={setId(id, \"icon-button\")}\n          className={cx(classes.icon, { [classes.iconSelected]: open })}\n          aria-expanded={open}\n          disabled={disabled}\n          aria-label=\"Dropdown menu\"\n        >\n          {icon || (\n            <MoreOptionsVertical\n              color={disabled ? \"secondary_60\" : undefined}\n            />\n          )}\n        </HvButton>\n      }\n      aria-haspopup=\"menu\"\n      placement={placement}\n      variableWidth\n      disablePortal={disablePortal}\n      onToggle={(e, s) => {\n        // this will only run if uncontrolled\n        setOpen(s);\n        onToggle?.(e, s);\n      }}\n      disabled={disabled}\n      onContainerCreation={setFocusToContent}\n      popperProps={popperStyle}\n      {...others}\n    >\n      <HvPanel className={classes.menuListRoot}>\n        <HvList\n          id={listId}\n          values={dataList}\n          selectable={false}\n          condensed={condensed}\n          onClick={(event, item) => {\n            if (!keepOpened) handleClose(event);\n            onClick?.(event, item);\n          }}\n          onKeyDown={handleKeyDown}\n          classes={{\n            root: classes.menuList,\n          }}\n        />\n      </HvPanel>\n    </HvBaseDropdown>\n  );\n};\n"],"names":["HvDropDownMenu","id","idProp","classes","classesProp","className","icon","placement","dataList","disablePortal","onToggle","onClick","keepOpened","disabled","expanded","defaultExpanded","category","others","cx","useClasses","open","setOpen","useControlled","Boolean","useUniqueId","focusNodes","getPrevNextFocus","setId","listId","handleClose","event","handleKeyDown","isKey","node","shiftKey","prevFocus","nextFocus","setTimeout","focus","preventDefault","setFocusToContent","containerRef","getElementsByTagName","condensed","useMemo","every","el","popperStyle","style","zIndex","theme","zIndices","tooltip","width","position","HvBaseDropdown","container","root","baseContainer","component","HvButton","variant","iconSelected","children","_jsx","MoreOptionsVertical","color","undefined","variableWidth","e","s","onContainerCreation","popperProps","HvPanel","menuListRoot","HvList","values","selectable","item","onKeyDown","menuList"],"mappings":"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"}
+{"version":3,"file":"DropDownMenu.js","sources":["../../../../src/components/DropDownMenu/DropDownMenu.tsx"],"sourcesContent":["import { ChangeEvent, useMemo } from \"react\";\nimport { useDefaultProps } from \"@core/hooks/useDefaultProps\";\n\nimport { theme } from \"@hitachivantara/uikit-styles\";\nimport { MoreOptionsVertical } from \"@hitachivantara/uikit-react-icons\";\n\nimport { useUniqueId } from \"@core/hooks/useUniqueId\";\nimport { useControlled } from \"@core/hooks/useControlled\";\nimport { HvBaseProps } from \"@core/types/generic\";\nimport { isKey } from \"@core/utils/keyboardUtils\";\nimport { setId } from \"@core/utils/setId\";\nimport { getPrevNextFocus } from \"@core/utils/focusableElementFinder\";\nimport { ExtractNames } from \"@core/utils/classes\";\nimport {\n  HvBaseDropdown,\n  HvBaseDropdownProps,\n} from \"@core/components/BaseDropdown\";\nimport { HvButton, HvButtonVariant } from \"@core/components/Button\";\nimport { HvList, HvListProps, HvListValue } from \"@core/components/List\";\nimport { HvPanel } from \"@core/components/Panel\";\n\nimport { staticClasses, useClasses } from \"./DropDownMenu.styles\";\n\nexport { staticClasses as dropDownMenuClasses };\n\nexport type HvDropDownMenuClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvDropDownMenuProps\n  extends HvBaseProps<HTMLDivElement, \"onClick\"> {\n  /** Icon. */\n  icon?: React.ReactElement;\n  /**\n   * A list containing the elements to be rendered.\n   *\n   * - label: The label of the element to be rendered.\n   * - selected: The selection state of the element.\n   * - disabled: The disabled state of the element.\n   * - icon: The icon node to be rendered on the left.\n   * - showNavIcon: If true renders the navigation icon on the right.\n   */\n  dataList: HvListValue[];\n  /** Placement of the dropdown. */\n  placement?: \"left\" | \"right\";\n  /** Disable the portal behavior. The children stay within it's parent DOM hierarchy. */\n  disablePortal?: boolean;\n  /** Function executed on toggle of the dropdown. Should receive the open status. */\n  onToggle?: (event: Event, open: boolean) => void;\n  /** Function executed in each onClick. Should received the clicked element. */\n  onClick?: (\n    event: React.ChangeEvent<HTMLLIElement>,\n    value: HvListValue\n  ) => void;\n  /** Keep the Dropdown Menu opened after clicking one option */\n  keepOpened?: boolean;\n  /** Defines if the component is disabled. */\n  disabled?: boolean;\n  /** If true it should be displayed open. */\n  expanded?: boolean;\n  /** When uncontrolled, defines the initial expanded state. */\n  defaultExpanded?: boolean;\n  /** The variant to be used in the header. */\n  category?: HvButtonVariant;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvDropDownMenuClasses;\n}\n\n/**\n * A drop-down menu is a graphical control element, similar to a list box, that allows the user to choose a value from a list.\n */\nexport const HvDropDownMenu = (props: HvDropDownMenuProps) => {\n  const {\n    id: idProp,\n    classes: classesProp,\n    className,\n    icon,\n    placement = \"right\",\n    dataList,\n    disablePortal = false,\n    onToggle,\n    onClick,\n    keepOpened = true,\n    disabled = false,\n    expanded,\n    defaultExpanded = false,\n    category = \"secondaryGhost\",\n    ...others\n  } = useDefaultProps(\"HvDropDownMenu\", props);\n\n  const { classes, cx } = useClasses(classesProp);\n  const [open, setOpen] = useControlled(expanded, Boolean(defaultExpanded));\n  const id = useUniqueId(idProp, \"dropdown-menu\");\n  const focusNodes = getPrevNextFocus(setId(id, \"icon-button\"));\n\n  const listId = setId(id, \"list\");\n\n  const handleClose = (event: ChangeEvent) => {\n    // this will only run if uncontrolled\n    setOpen(false);\n    onToggle?.(event as any, false);\n  };\n\n  // If the ESCAPE key is pressed inside the list, the close handler must be called.\n  const handleKeyDown: HvListProps[\"onKeyDown\"] = (event) => {\n    if (isKey(event, \"Tab\")) {\n      const node = event.shiftKey ? focusNodes.prevFocus : focusNodes.nextFocus;\n      if (node) setTimeout(() => node.focus(), 0);\n      handleClose(event as any);\n    }\n    event.preventDefault();\n  };\n\n  const setFocusToContent: HvBaseDropdownProps[\"onContainerCreation\"] = (\n    containerRef\n  ) => {\n    containerRef?.getElementsByTagName(\"li\")[0]?.focus();\n  };\n\n  const condensed = useMemo(() => dataList.every((el) => !el.icon), [dataList]);\n  const popperStyle: HvBaseDropdownProps[\"popperProps\"] = {\n    style: {\n      zIndex: theme.zIndices.tooltip,\n      width: \"auto\",\n      position: \"relative\",\n    },\n  };\n\n  return (\n    <HvBaseDropdown\n      id={id}\n      className={cx(className, classes.container)}\n      classes={{\n        root: classes.root,\n        container: classes.baseContainer,\n      }}\n      expanded={open && !disabled}\n      component={\n        <HvButton\n          icon\n          variant={category}\n          id={setId(id, \"icon-button\")}\n          className={cx(classes.icon, { [classes.iconSelected]: open })}\n          aria-expanded={open}\n          disabled={disabled}\n          aria-label=\"Dropdown menu\"\n        >\n          {icon || (\n            <MoreOptionsVertical\n              role=\"presentation\"\n              color={disabled ? \"secondary_60\" : undefined}\n            />\n          )}\n        </HvButton>\n      }\n      aria-haspopup=\"menu\"\n      placement={placement}\n      variableWidth\n      disablePortal={disablePortal}\n      onToggle={(e, s) => {\n        // this will only run if uncontrolled\n        setOpen(s);\n        onToggle?.(e, s);\n      }}\n      disabled={disabled}\n      onContainerCreation={setFocusToContent}\n      popperProps={popperStyle}\n      {...others}\n    >\n      <HvPanel className={classes.menuListRoot}>\n        <HvList\n          id={listId}\n          values={dataList}\n          selectable={false}\n          condensed={condensed}\n          onClick={(event, item) => {\n            if (!keepOpened) handleClose(event);\n            onClick?.(event, item);\n          }}\n          onKeyDown={handleKeyDown}\n          classes={{\n            root: classes.menuList,\n          }}\n        />\n      </HvPanel>\n    </HvBaseDropdown>\n  );\n};\n"],"names":["HvDropDownMenu","props","id","idProp","classes","classesProp","className","icon","placement","dataList","disablePortal","onToggle","onClick","keepOpened","disabled","expanded","defaultExpanded","category","others","useDefaultProps","cx","useClasses","open","setOpen","useControlled","Boolean","useUniqueId","focusNodes","getPrevNextFocus","setId","listId","handleClose","event","handleKeyDown","isKey","node","shiftKey","prevFocus","nextFocus","setTimeout","focus","preventDefault","setFocusToContent","containerRef","getElementsByTagName","condensed","useMemo","every","el","popperStyle","style","zIndex","theme","zIndices","tooltip","width","position","HvBaseDropdown","container","root","baseContainer","component","HvButton","variant","iconSelected","children","_jsx","MoreOptionsVertical","role","color","undefined","variableWidth","e","s","onContainerCreation","popperProps","HvPanel","menuListRoot","HvList","values","selectable","item","onKeyDown","menuList"],"mappings":"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"}

package/dist/esm/components/Dropdown/Dropdown.js

@@ -1,4 +1,5 @@
 import { useState, useEffect, useRef } from "react";
+import { useDefaultProps } from "../../hooks/useDefaultProps.js";
 import { clsx } from "clsx";
 import { setId } from "../../utils/setId.js";
 import { getSelectionLabel, getSelected } from "./utils.js";
@@ -63,7 +64,7 @@ const HvDropdown = (props) => {
     baseDropdownProps = {},
     listProps = {},
     ...others
-  } = props;
+  } = useDefaultProps("HvDropdown", props);
   const labels = useLabels(DEFAULT_LABELS, labelsProp);
   const elementId = useUniqueId(id, "hvdropdown");
   const [validationState, setValidationState] = useControlled(status, "standBy");

package/dist/esm/components/Dropdown/Dropdown.js.map

@@ -1 +1 @@
-{"version":3,"file":"Dropdown.js","sources":["../../../../src/components/Dropdown/Dropdown.tsx"],"sourcesContent":["import { useEffect, useRef, useState } from \"react\";\n\nimport { PopperProps } from \"@mui/material\";\n\nimport { clsx } from \"clsx\";\n\nimport { setId } from \"@core/utils/setId\";\nimport { useLabels, useUniqueId, useControlled } from \"@core/hooks\";\nimport { HvBaseProps } from \"@core/types/generic\";\nimport { HvBaseDropdownProps } from \"@core/components/BaseDropdown\";\nimport { HvListValue } from \"@core/components/List\";\nimport {\n  isInvalid,\n  HvInfoMessage,\n  HvWarningText,\n} from \"@core/components/Forms\";\n\nimport { getSelected, getSelectionLabel } from \"./utils\";\nimport dropdownClasses, { HvDropdownClasses } from \"./dropdownClasses\";\nimport { HvDropdownList, HvDropdownListProps } from \"./List\";\nimport {\n  StyledDropdown,\n  StyledHvFormElement,\n  StyledLabel,\n  StyledLabelContainer,\n  StyledTypography,\n} from \"./Dropdown.styles\";\nimport { HvDropdownLabelsProps, HvDropdownStatus } from \"./types\";\n\nexport interface HvDropdownProps\n  extends HvBaseProps<HTMLDivElement, \"onChange\"> {\n  /**\n   * Class names to be applied.\n   */\n  className?: string;\n  /**\n   * A Jss Object used to override or extend the component styles applied.\n   */\n  classes?: HvDropdownClasses;\n  /**\n   * Id to be applied to the form element root node.\n   */\n  id?: string;\n  /**\n   * The form element name.\n   */\n  name?: string;\n  /**\n   * The label of the form element.\n   *\n   * The form element must be labeled for accessibility reasons.\n   * If not provided, an aria-label or aria-labelledby must be provided instead.\n   */\n  label?: any;\n  /**\n   * @ignore\n   */\n  \"aria-label\"?: string;\n  /**\n   * @ignore\n   */\n  \"aria-labelledby\"?: string;\n  /**\n   * Provide additional descriptive text for the form element.\n   */\n  description?: any;\n  /**\n   * @ignore\n   */\n  \"aria-describedby\"?: string;\n  /**\n   * The placeholder value when nothing is selected.\n   */\n  placeholder?: string;\n\n  /**\n   * Indicates that the form element is disabled.\n   */\n  disabled?: boolean;\n  /**\n   * Indicates that the form element is in read only mode.\n   */\n  readOnly?: boolean;\n  /**\n   * Indicates that user input is required on the form element.\n   */\n  required?: boolean;\n  /**\n   * The status of the form element.\n   *\n   * Valid is correct, invalid is incorrect and standBy means no validations have run.\n   *\n   * When uncontrolled and unspecified it will default to \"standBy\" and change to either \"valid\"\n   * or \"invalid\" after any change to the state.\n   */\n  status?: HvDropdownStatus;\n  /**\n   * The error message to show when the validation status is \"invalid\".\n   *\n   * Defaults to \"Required\" when the status is uncontrolled and no `aria-errormessage` is provided.\n   */\n  statusMessage?: any;\n  /**\n   * Identifies the element that provides an error message for the dropdown.\n   *\n   * Will only be used when the validation status is invalid.\n   */\n  \"aria-errormessage\"?: string;\n\n  /**\n   * The callback fired when the value changes.\n   */\n  onChange?: (selected: HvListValue | HvListValue[] | undefined) => void;\n\n  /**\n   * The list to be rendered by the dropdown.\n   */\n  values?: HvListValue[];\n  /**\n   * If `true` the dropdown is multiSelect, if `false` the dropdown is single select.\n   */\n  multiSelect?: boolean;\n  /**\n   * If `true` the dropdown is rendered with a search bar, if `false` there won't be a search bar.\n   */\n  showSearch?: boolean;\n  /**\n   * If `true` the dropdown starts opened if `false` it starts closed.\n   */\n  expanded?: boolean;\n  /**\n   * When uncontrolled, defines the initial expanded state.\n   */\n  defaultExpanded?: boolean;\n  /**\n   * If 'true' the dropdown will notify on the first render.\n   */\n  notifyChangesOnFirstRender?: boolean;\n  /**\n   * An object containing all the labels for the dropdown.\n   */\n  labels?: HvDropdownLabelsProps;\n  /**\n   * If `true` the dropdown will show tooltips when user mouseenter text in list\n   */\n  hasTooltips?: boolean;\n  /**\n   * Disable the portal behavior.\n   * The children stay within it's parent DOM hierarchy.\n   */\n  disablePortal?: boolean;\n  /**\n   * If `true` the dropdown width depends size of content if `false` the width depends on the header size.\n   * Defaults to `false`.\n   */\n  variableWidth?: boolean;\n  /**\n   * If `true`, selection can be toggled when single selection.\n   */\n  singleSelectionToggle?: boolean;\n  /**\n   * Placement of the dropdown.\n   */\n  placement?: \"left\" | \"right\";\n  /**\n   * An object containing props to be wired to the popper component.\n   */\n  popperProps?: Partial<PopperProps>;\n\n  /**\n   * Callback called when the user cancels the changes.\n   *\n   * Called when the cancel button is used and when the user clicks outside the open container.\n   *\n   * @param {object} event The event source of the callback.\n   */\n  onCancel?: (event: Event) => void;\n  /**\n   * Callback called when dropdown changes the expanded state.\n   *\n   * @param {object} event The event source of the callback.\n   * @param {boolean} open If the dropdown new state is open (`true`) or closed (`false`).\n   */\n  onToggle?: (event: Event, open: boolean) => void;\n  /**\n   * Callback called when the user clicks outside the open container.\n   *\n   * @param {object} event The event source of the callback.\n   */\n  onClickOutside?: (event: Event) => void;\n  /**\n   * @ignore\n   */\n  onFocus?: React.FocusEventHandler<any>;\n  /**\n   * @ignore\n   */\n  onBlur?: React.FocusEventHandler<any>;\n  /**\n   * Experimental. Height of the dropdown, in case you want to control it from a prop. Styles can also be used through dropdownListContainer class. Required in case virtualized is used\n   */\n  height?: number;\n  /**\n   * Experimental. Height of the dropdown, in case you want to control it from a prop. Styles can also be used through dropdownListContainer class. Required in case virtualized is used\n   */\n  maxHeight?: number;\n  /**\n   * Experimental. Uses dropdown in a virtualized form, where not all options are rendered initially. Good for use cases with a lot of options.\n   */\n  virtualized?: boolean;\n  /**\n   * Extra props passed to the dropdown.\n   */\n  baseDropdownProps?: HvBaseDropdownProps;\n  /**\n   * Extra props passed to the list.\n   */\n  listProps?: HvDropdownListProps;\n}\n\nconst DEFAULT_LABELS: HvDropdownLabelsProps = {\n  select: undefined,\n  selectAll: \"All\",\n  cancelLabel: \"Cancel\",\n  applyLabel: \"Apply\",\n  searchPlaceholder: \"Search\",\n  multiSelectionConjunction: \"/\",\n};\n\n/**\n * A dropdown list is a graphical control element, similar to a list box, that allows the user to choose one value from a list.\n */\nexport const HvDropdown = (props: HvDropdownProps) => {\n  const {\n    classes,\n    className,\n\n    id,\n    name,\n\n    required = false,\n    disabled = false,\n    readOnly = false,\n\n    label,\n    \"aria-label\": ariaLabel,\n    \"aria-labelledby\": ariaLabelledBy,\n    description,\n    \"aria-describedby\": ariaDescribedBy,\n\n    placeholder = \"Select...\",\n\n    onChange,\n\n    status,\n    statusMessage,\n    \"aria-errormessage\": ariaErrorMessage,\n\n    onCancel,\n    onToggle,\n    onClickOutside,\n\n    onFocus,\n    onBlur,\n\n    values,\n    multiSelect = false,\n    showSearch = false,\n    expanded,\n    defaultExpanded = false,\n    notifyChangesOnFirstRender = false,\n    labels: labelsProp,\n    hasTooltips = false,\n    disablePortal = false,\n    singleSelectionToggle = true,\n    placement,\n    variableWidth = false,\n    popperProps = {},\n    height,\n    maxHeight,\n    virtualized = false,\n    baseDropdownProps = {},\n    listProps = {},\n    ...others\n  } = props;\n\n  const labels = useLabels(DEFAULT_LABELS, labelsProp);\n\n  const elementId = useUniqueId(id, \"hvdropdown\");\n\n  const [validationState, setValidationState] = useControlled(\n    status,\n    \"standBy\"\n  );\n\n  const [validationMessage] = useControlled(statusMessage, \"Required\");\n\n  const [isOpen, setIsOpen] = useControlled(expanded, Boolean(defaultExpanded));\n  const [selectionLabel, setSelectionLabel] = useState(\n    getSelectionLabel(labels, placeholder, multiSelect, values)\n  );\n  const [internalValues, setInternalValues] = useState(values);\n\n  useEffect(() => {\n    setInternalValues(values);\n  }, [values]);\n\n  useEffect(() => {\n    setSelectionLabel(\n      getSelectionLabel(labels, placeholder, multiSelect, values)\n    );\n  }, [labels, multiSelect, placeholder, values]);\n\n  if (virtualized && !height && process.env.NODE_ENV !== \"production\") {\n    // eslint-disable-next-line no-console\n    console.error(\n      \"Dropdown/List in virtualized mode requires a height. Please define it.\"\n    );\n  }\n\n  const dropdownHeaderRef = useRef<HTMLDivElement>();\n\n  const handleToggle: HvBaseDropdownProps[\"onToggle\"] = (event, open) => {\n    onToggle?.(event, open);\n\n    setIsOpen(open);\n\n    if (!open) {\n      // also run built-in validation when closing without changes\n      // as the user \"touched\" the input\n      setValidationState(() => {\n        // this will only run if status is uncontrolled\n        if (required) {\n          const hasSelection = getSelected(internalValues).length > 0;\n\n          if (!hasSelection) {\n            return \"invalid\";\n          }\n        }\n\n        return \"valid\";\n      });\n    }\n  };\n\n  /** Applies the selected values to the state */\n  const handleSelection: HvDropdownListProps[\"onChange\"] = (\n    listValues,\n    commitChanges,\n    toggle,\n    notifyChanges = true\n  ) => {\n    const selected = getSelected(listValues);\n\n    if (commitChanges) {\n      setInternalValues(listValues);\n      setSelectionLabel(\n        getSelectionLabel(labels, placeholder, multiSelect, listValues)\n      );\n\n      setValidationState(() => {\n        // this will only run if status is uncontrolled\n        if (required && selected.length === 0) {\n          return \"invalid\";\n        }\n\n        return \"valid\";\n      });\n    }\n    if (notifyChanges) onChange?.(multiSelect ? selected : selected[0]);\n    if (toggle) {\n      handleToggle(undefined as any, false);\n\n      // focus-ring won't be visible even if using the keyboard:\n      // https://github.com/WICG/focus-visible/issues/88\n      dropdownHeaderRef.current?.focus({ preventScroll: true });\n    }\n  };\n\n  /**\n   * Handles the `Cancel` action. Both single and ranged modes are handled here.\n   */\n  const handleCancel: HvDropdownListProps[\"onCancel\"] = (evt) => {\n    onCancel?.(evt as any);\n\n    handleToggle(evt as any, false);\n\n    // focus-ring won't be visible even if using the keyboard:\n    // https://github.com/WICG/focus-visible/issues/88\n    dropdownHeaderRef.current?.focus({ preventScroll: true });\n  };\n\n  const handleClickOutside: HvBaseDropdownProps[\"onClickOutside\"] = (evt) => {\n    onClickOutside?.(evt);\n    onCancel?.(evt);\n  };\n\n  const setFocusToContent: HvBaseDropdownProps[\"onContainerCreation\"] = (\n    containerRef\n  ) => {\n    const inputs = containerRef?.getElementsByTagName(\"input\");\n    if (inputs && inputs.length > 0) {\n      inputs[0].focus();\n      return;\n    }\n    const listItems =\n      containerRef != null ? [...containerRef.getElementsByTagName(\"li\")] : [];\n    listItems.every((listItem) => {\n      if (listItem.tabIndex >= 0) {\n        listItem.focus();\n        return false;\n      }\n      return true;\n    });\n  };\n\n  const buildHeaderLabel = () => {\n    const hasSelection = getSelected(internalValues).length > 0;\n    return labels?.select || !multiSelect ? (\n      <StyledTypography\n        component=\"div\"\n        $selectionDisabled={disabled}\n        $isOpen={isOpen || hasSelection}\n        variant=\"body\"\n        className={clsx(\n          dropdownClasses?.placeholder,\n          classes?.placeholder,\n          disabled &&\n            clsx(dropdownClasses?.selectionDisabled, classes?.selectionDisabled)\n        )}\n      >\n        {selectionLabel.selected}\n      </StyledTypography>\n    ) : (\n      <StyledTypography\n        component=\"div\"\n        $selectionDisabled={disabled}\n        className={clsx(\n          dropdownClasses?.placeholder,\n          classes?.placeholder,\n          disabled &&\n            clsx(dropdownClasses?.selectionDisabled, classes?.selectionDisabled)\n        )}\n        variant=\"body\"\n      >\n        <b>{selectionLabel.selected}</b>\n        {` ${labels?.multiSelectionConjunction} ${selectionLabel.total}`}\n      </StyledTypography>\n    );\n  };\n\n  const hasLabel = label != null;\n  const hasDescription = description != null;\n\n  // the error message area will only be created if:\n  // - an external element that provides an error message isn't identified via aria-errormessage AND\n  //   - both status and statusMessage properties are being controlled OR\n  //   - status is uncontrolled and required is true\n  const canShowError =\n    ariaErrorMessage == null &&\n    ((status !== undefined && statusMessage !== undefined) ||\n      (status === undefined && required));\n\n  const isStateInvalid = isInvalid(validationState);\n\n  let errorMessageId;\n  if (isStateInvalid) {\n    errorMessageId = canShowError\n      ? setId(elementId, \"error\")\n      : ariaErrorMessage;\n  }\n\n  return (\n    <StyledHvFormElement\n      id={id}\n      name={name}\n      status={validationState}\n      disabled={disabled}\n      readOnly={readOnly}\n      required={required}\n      className={clsx(className, dropdownClasses.root, classes?.root)}\n      $selectionDisabled={disabled}\n      {...others}\n    >\n      {(hasLabel || hasDescription) && (\n        <StyledLabelContainer\n          className={clsx(\n            dropdownClasses.labelContainer,\n            classes?.labelContainer\n          )}\n        >\n          {hasLabel && (\n            <StyledLabel\n              id={setId(elementId, \"label\")}\n              label={label}\n              className={clsx(classes?.label, dropdownClasses.label)}\n            />\n          )}\n\n          {hasDescription && (\n            <HvInfoMessage\n              id={setId(elementId, \"description\")}\n              className={clsx(\n                classes?.description,\n                dropdownClasses.description\n              )}\n            >\n              {description}\n            </HvInfoMessage>\n          )}\n        </StyledLabelContainer>\n      )}\n      <StyledDropdown\n        id={setId(id, \"dropdown\")}\n        classes={{\n          root: clsx(classes?.dropdown, dropdownClasses.dropdown),\n          arrow: clsx(classes?.arrow, dropdownClasses.arrow),\n          header: clsx(\n            dropdownClasses.dropdownHeader,\n            classes?.dropdownHeader,\n            isStateInvalid &&\n              clsx(\n                dropdownClasses.dropdownHeaderInvalid,\n                classes?.dropdownHeaderInvalid\n              )\n          ),\n          headerOpen: clsx(\n            dropdownClasses.dropdownHeaderOpen,\n            classes?.dropdownHeaderOpen\n          ),\n        }}\n        $dropdownHeaderInvalid={isStateInvalid}\n        $readOnly={readOnly}\n        expanded={isOpen}\n        disabled={disabled}\n        readOnly={readOnly}\n        disablePortal={disablePortal}\n        placement={placement}\n        popperProps={popperProps}\n        placeholder={buildHeaderLabel()}\n        onToggle={handleToggle}\n        onClickOutside={handleClickOutside}\n        onContainerCreation={setFocusToContent}\n        role=\"combobox\"\n        variableWidth={variableWidth}\n        aria-label={ariaLabel}\n        aria-labelledby={\n          [label && setId(elementId, \"label\"), ariaLabelledBy]\n            .join(\" \")\n            .trim() || undefined\n        }\n        aria-invalid={isStateInvalid ? true : undefined}\n        aria-errormessage={errorMessageId}\n        aria-describedby={\n          [description && setId(elementId, \"description\"), ariaDescribedBy]\n            .join(\" \")\n            .trim() || undefined\n        }\n        onFocus={onFocus}\n        onBlur={onBlur}\n        dropdownHeaderRef={dropdownHeaderRef}\n        {...baseDropdownProps}\n      >\n        <HvDropdownList\n          id={setId(elementId, \"values\")}\n          classes={{\n            rootList: clsx(dropdownClasses.rootList, classes?.rootList),\n            dropdownListContainer: clsx(\n              dropdownClasses.dropdownListContainer,\n              classes?.dropdownListContainer\n            ),\n          }}\n          values={internalValues}\n          multiSelect={multiSelect}\n          showSearch={showSearch}\n          onChange={handleSelection}\n          onCancel={handleCancel}\n          labels={labels}\n          notifyChangesOnFirstRender={notifyChangesOnFirstRender}\n          hasTooltips={hasTooltips}\n          singleSelectionToggle={singleSelectionToggle}\n          aria-labelledby={hasLabel ? setId(elementId, \"label\") : undefined}\n          height={height}\n          maxHeight={maxHeight}\n          virtualized={virtualized}\n          {...listProps}\n        />\n      </StyledDropdown>\n      {canShowError && (\n        <HvWarningText\n          id={setId(elementId, \"error\")}\n          disableBorder\n          className={clsx(dropdownClasses.error, classes?.error)}\n        >\n          {validationMessage}\n        </HvWarningText>\n      )}\n    </StyledHvFormElement>\n  );\n};\n"],"names":["DEFAULT_LABELS","select","undefined","selectAll","cancelLabel","applyLabel","searchPlaceholder","multiSelectionConjunction","HvDropdown","props","classes","className","id","name","required","disabled","readOnly","label","ariaLabel","ariaLabelledBy","description","ariaDescribedBy","placeholder","onChange","status","statusMessage","ariaErrorMessage","onCancel","onToggle","onClickOutside","onFocus","onBlur","values","multiSelect","showSearch","expanded","defaultExpanded","notifyChangesOnFirstRender","labels","labelsProp","hasTooltips","disablePortal","singleSelectionToggle","placement","variableWidth","popperProps","height","maxHeight","virtualized","baseDropdownProps","listProps","others","useLabels","elementId","useUniqueId","validationState","setValidationState","useControlled","validationMessage","isOpen","setIsOpen","Boolean","selectionLabel","setSelectionLabel","useState","getSelectionLabel","internalValues","setInternalValues","useEffect","process","env","NODE_ENV","console","error","dropdownHeaderRef","useRef","handleToggle","event","open","hasSelection","getSelected","length","handleSelection","listValues","commitChanges","toggle","notifyChanges","selected","current","focus","preventScroll","handleCancel","evt","handleClickOutside","setFocusToContent","containerRef","inputs","getElementsByTagName","listItems","every","listItem","tabIndex","buildHeaderLabel","StyledTypography","component","$selectionDisabled","$isOpen","variant","clsx","dropdownClasses","selectionDisabled","children","_jsxs","_jsx","total","hasLabel","hasDescription","canShowError","isStateInvalid","isInvalid","errorMessageId","setId","StyledHvFormElement","root","StyledLabelContainer","labelContainer","StyledLabel","HvInfoMessage","StyledDropdown","dropdown","arrow","header","dropdownHeader","dropdownHeaderInvalid","headerOpen","dropdownHeaderOpen","$dropdownHeaderInvalid","$readOnly","onContainerCreation","role","join","trim","HvDropdownList","rootList","dropdownListContainer","HvWarningText","disableBorder"],"mappings":"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"}
+{"version":3,"file":"Dropdown.js","sources":["../../../../src/components/Dropdown/Dropdown.tsx"],"sourcesContent":["import { useEffect, useRef, useState } from \"react\";\nimport { useDefaultProps } from \"@core/hooks/useDefaultProps\";\n\nimport { PopperProps } from \"@mui/material\";\n\nimport { clsx } from \"clsx\";\n\nimport { setId } from \"@core/utils/setId\";\nimport { useLabels, useUniqueId, useControlled } from \"@core/hooks\";\nimport { HvBaseProps } from \"@core/types/generic\";\nimport { HvBaseDropdownProps } from \"@core/components/BaseDropdown\";\nimport { HvListValue } from \"@core/components/List\";\nimport {\n  isInvalid,\n  HvInfoMessage,\n  HvWarningText,\n} from \"@core/components/Forms\";\n\nimport { getSelected, getSelectionLabel } from \"./utils\";\nimport dropdownClasses, { HvDropdownClasses } from \"./dropdownClasses\";\nimport { HvDropdownList, HvDropdownListProps } from \"./List\";\nimport {\n  StyledDropdown,\n  StyledHvFormElement,\n  StyledLabel,\n  StyledLabelContainer,\n  StyledTypography,\n} from \"./Dropdown.styles\";\nimport { HvDropdownLabelsProps, HvDropdownStatus } from \"./types\";\n\nexport interface HvDropdownProps\n  extends HvBaseProps<HTMLDivElement, \"onChange\"> {\n  /**\n   * Class names to be applied.\n   */\n  className?: string;\n  /**\n   * A Jss Object used to override or extend the component styles applied.\n   */\n  classes?: HvDropdownClasses;\n  /**\n   * Id to be applied to the form element root node.\n   */\n  id?: string;\n  /**\n   * The form element name.\n   */\n  name?: string;\n  /**\n   * The label of the form element.\n   *\n   * The form element must be labeled for accessibility reasons.\n   * If not provided, an aria-label or aria-labelledby must be provided instead.\n   */\n  label?: any;\n  /**\n   * @ignore\n   */\n  \"aria-label\"?: string;\n  /**\n   * @ignore\n   */\n  \"aria-labelledby\"?: string;\n  /**\n   * Provide additional descriptive text for the form element.\n   */\n  description?: any;\n  /**\n   * @ignore\n   */\n  \"aria-describedby\"?: string;\n  /**\n   * The placeholder value when nothing is selected.\n   */\n  placeholder?: string;\n\n  /**\n   * Indicates that the form element is disabled.\n   */\n  disabled?: boolean;\n  /**\n   * Indicates that the form element is in read only mode.\n   */\n  readOnly?: boolean;\n  /**\n   * Indicates that user input is required on the form element.\n   */\n  required?: boolean;\n  /**\n   * The status of the form element.\n   *\n   * Valid is correct, invalid is incorrect and standBy means no validations have run.\n   *\n   * When uncontrolled and unspecified it will default to \"standBy\" and change to either \"valid\"\n   * or \"invalid\" after any change to the state.\n   */\n  status?: HvDropdownStatus;\n  /**\n   * The error message to show when the validation status is \"invalid\".\n   *\n   * Defaults to \"Required\" when the status is uncontrolled and no `aria-errormessage` is provided.\n   */\n  statusMessage?: any;\n  /**\n   * Identifies the element that provides an error message for the dropdown.\n   *\n   * Will only be used when the validation status is invalid.\n   */\n  \"aria-errormessage\"?: string;\n\n  /**\n   * The callback fired when the value changes.\n   */\n  onChange?: (selected: HvListValue | HvListValue[] | undefined) => void;\n\n  /**\n   * The list to be rendered by the dropdown.\n   */\n  values?: HvListValue[];\n  /**\n   * If `true` the dropdown is multiSelect, if `false` the dropdown is single select.\n   */\n  multiSelect?: boolean;\n  /**\n   * If `true` the dropdown is rendered with a search bar, if `false` there won't be a search bar.\n   */\n  showSearch?: boolean;\n  /**\n   * If `true` the dropdown starts opened if `false` it starts closed.\n   */\n  expanded?: boolean;\n  /**\n   * When uncontrolled, defines the initial expanded state.\n   */\n  defaultExpanded?: boolean;\n  /**\n   * If 'true' the dropdown will notify on the first render.\n   */\n  notifyChangesOnFirstRender?: boolean;\n  /**\n   * An object containing all the labels for the dropdown.\n   */\n  labels?: HvDropdownLabelsProps;\n  /**\n   * If `true` the dropdown will show tooltips when user mouseenter text in list\n   */\n  hasTooltips?: boolean;\n  /**\n   * Disable the portal behavior.\n   * The children stay within it's parent DOM hierarchy.\n   */\n  disablePortal?: boolean;\n  /**\n   * If `true` the dropdown width depends size of content if `false` the width depends on the header size.\n   * Defaults to `false`.\n   */\n  variableWidth?: boolean;\n  /**\n   * If `true`, selection can be toggled when single selection.\n   */\n  singleSelectionToggle?: boolean;\n  /**\n   * Placement of the dropdown.\n   */\n  placement?: \"left\" | \"right\";\n  /**\n   * An object containing props to be wired to the popper component.\n   */\n  popperProps?: Partial<PopperProps>;\n\n  /**\n   * Callback called when the user cancels the changes.\n   *\n   * Called when the cancel button is used and when the user clicks outside the open container.\n   *\n   * @param {object} event The event source of the callback.\n   */\n  onCancel?: (event: Event) => void;\n  /**\n   * Callback called when dropdown changes the expanded state.\n   *\n   * @param {object} event The event source of the callback.\n   * @param {boolean} open If the dropdown new state is open (`true`) or closed (`false`).\n   */\n  onToggle?: (event: Event, open: boolean) => void;\n  /**\n   * Callback called when the user clicks outside the open container.\n   *\n   * @param {object} event The event source of the callback.\n   */\n  onClickOutside?: (event: Event) => void;\n  /**\n   * @ignore\n   */\n  onFocus?: React.FocusEventHandler<any>;\n  /**\n   * @ignore\n   */\n  onBlur?: React.FocusEventHandler<any>;\n  /**\n   * Experimental. Height of the dropdown, in case you want to control it from a prop. Styles can also be used through dropdownListContainer class. Required in case virtualized is used\n   */\n  height?: number;\n  /**\n   * Experimental. Height of the dropdown, in case you want to control it from a prop. Styles can also be used through dropdownListContainer class. Required in case virtualized is used\n   */\n  maxHeight?: number;\n  /**\n   * Experimental. Uses dropdown in a virtualized form, where not all options are rendered initially. Good for use cases with a lot of options.\n   */\n  virtualized?: boolean;\n  /**\n   * Extra props passed to the dropdown.\n   */\n  baseDropdownProps?: HvBaseDropdownProps;\n  /**\n   * Extra props passed to the list.\n   */\n  listProps?: HvDropdownListProps;\n}\n\nconst DEFAULT_LABELS: HvDropdownLabelsProps = {\n  select: undefined,\n  selectAll: \"All\",\n  cancelLabel: \"Cancel\",\n  applyLabel: \"Apply\",\n  searchPlaceholder: \"Search\",\n  multiSelectionConjunction: \"/\",\n};\n\n/**\n * A dropdown list is a graphical control element, similar to a list box, that allows the user to choose one value from a list.\n */\nexport const HvDropdown = (props: HvDropdownProps) => {\n  const {\n    classes,\n    className,\n\n    id,\n    name,\n\n    required = false,\n    disabled = false,\n    readOnly = false,\n\n    label,\n    \"aria-label\": ariaLabel,\n    \"aria-labelledby\": ariaLabelledBy,\n    description,\n    \"aria-describedby\": ariaDescribedBy,\n\n    placeholder = \"Select...\",\n\n    onChange,\n\n    status,\n    statusMessage,\n    \"aria-errormessage\": ariaErrorMessage,\n\n    onCancel,\n    onToggle,\n    onClickOutside,\n\n    onFocus,\n    onBlur,\n\n    values,\n    multiSelect = false,\n    showSearch = false,\n    expanded,\n    defaultExpanded = false,\n    notifyChangesOnFirstRender = false,\n    labels: labelsProp,\n    hasTooltips = false,\n    disablePortal = false,\n    singleSelectionToggle = true,\n    placement,\n    variableWidth = false,\n    popperProps = {},\n    height,\n    maxHeight,\n    virtualized = false,\n    baseDropdownProps = {},\n    listProps = {},\n    ...others\n  } = useDefaultProps(\"HvDropdown\", props);\n\n  const labels = useLabels(DEFAULT_LABELS, labelsProp);\n\n  const elementId = useUniqueId(id, \"hvdropdown\");\n\n  const [validationState, setValidationState] = useControlled(\n    status,\n    \"standBy\"\n  );\n\n  const [validationMessage] = useControlled(statusMessage, \"Required\");\n\n  const [isOpen, setIsOpen] = useControlled(expanded, Boolean(defaultExpanded));\n  const [selectionLabel, setSelectionLabel] = useState(\n    getSelectionLabel(labels, placeholder, multiSelect, values)\n  );\n  const [internalValues, setInternalValues] = useState(values);\n\n  useEffect(() => {\n    setInternalValues(values);\n  }, [values]);\n\n  useEffect(() => {\n    setSelectionLabel(\n      getSelectionLabel(labels, placeholder, multiSelect, values)\n    );\n  }, [labels, multiSelect, placeholder, values]);\n\n  if (virtualized && !height && process.env.NODE_ENV !== \"production\") {\n    // eslint-disable-next-line no-console\n    console.error(\n      \"Dropdown/List in virtualized mode requires a height. Please define it.\"\n    );\n  }\n\n  const dropdownHeaderRef = useRef<HTMLDivElement>();\n\n  const handleToggle: HvBaseDropdownProps[\"onToggle\"] = (event, open) => {\n    onToggle?.(event, open);\n\n    setIsOpen(open);\n\n    if (!open) {\n      // also run built-in validation when closing without changes\n      // as the user \"touched\" the input\n      setValidationState(() => {\n        // this will only run if status is uncontrolled\n        if (required) {\n          const hasSelection = getSelected(internalValues).length > 0;\n\n          if (!hasSelection) {\n            return \"invalid\";\n          }\n        }\n\n        return \"valid\";\n      });\n    }\n  };\n\n  /** Applies the selected values to the state */\n  const handleSelection: HvDropdownListProps[\"onChange\"] = (\n    listValues,\n    commitChanges,\n    toggle,\n    notifyChanges = true\n  ) => {\n    const selected = getSelected(listValues);\n\n    if (commitChanges) {\n      setInternalValues(listValues);\n      setSelectionLabel(\n        getSelectionLabel(labels, placeholder, multiSelect, listValues)\n      );\n\n      setValidationState(() => {\n        // this will only run if status is uncontrolled\n        if (required && selected.length === 0) {\n          return \"invalid\";\n        }\n\n        return \"valid\";\n      });\n    }\n    if (notifyChanges) onChange?.(multiSelect ? selected : selected[0]);\n    if (toggle) {\n      handleToggle(undefined as any, false);\n\n      // focus-ring won't be visible even if using the keyboard:\n      // https://github.com/WICG/focus-visible/issues/88\n      dropdownHeaderRef.current?.focus({ preventScroll: true });\n    }\n  };\n\n  /**\n   * Handles the `Cancel` action. Both single and ranged modes are handled here.\n   */\n  const handleCancel: HvDropdownListProps[\"onCancel\"] = (evt) => {\n    onCancel?.(evt as any);\n\n    handleToggle(evt as any, false);\n\n    // focus-ring won't be visible even if using the keyboard:\n    // https://github.com/WICG/focus-visible/issues/88\n    dropdownHeaderRef.current?.focus({ preventScroll: true });\n  };\n\n  const handleClickOutside: HvBaseDropdownProps[\"onClickOutside\"] = (evt) => {\n    onClickOutside?.(evt);\n    onCancel?.(evt);\n  };\n\n  const setFocusToContent: HvBaseDropdownProps[\"onContainerCreation\"] = (\n    containerRef\n  ) => {\n    const inputs = containerRef?.getElementsByTagName(\"input\");\n    if (inputs && inputs.length > 0) {\n      inputs[0].focus();\n      return;\n    }\n    const listItems =\n      containerRef != null ? [...containerRef.getElementsByTagName(\"li\")] : [];\n    listItems.every((listItem) => {\n      if (listItem.tabIndex >= 0) {\n        listItem.focus();\n        return false;\n      }\n      return true;\n    });\n  };\n\n  const buildHeaderLabel = () => {\n    const hasSelection = getSelected(internalValues).length > 0;\n    return labels?.select || !multiSelect ? (\n      <StyledTypography\n        component=\"div\"\n        $selectionDisabled={disabled}\n        $isOpen={isOpen || hasSelection}\n        variant=\"body\"\n        className={clsx(\n          dropdownClasses?.placeholder,\n          classes?.placeholder,\n          disabled &&\n            clsx(dropdownClasses?.selectionDisabled, classes?.selectionDisabled)\n        )}\n      >\n        {selectionLabel.selected}\n      </StyledTypography>\n    ) : (\n      <StyledTypography\n        component=\"div\"\n        $selectionDisabled={disabled}\n        className={clsx(\n          dropdownClasses?.placeholder,\n          classes?.placeholder,\n          disabled &&\n            clsx(dropdownClasses?.selectionDisabled, classes?.selectionDisabled)\n        )}\n        variant=\"body\"\n      >\n        <b>{selectionLabel.selected}</b>\n        {` ${labels?.multiSelectionConjunction} ${selectionLabel.total}`}\n      </StyledTypography>\n    );\n  };\n\n  const hasLabel = label != null;\n  const hasDescription = description != null;\n\n  // the error message area will only be created if:\n  // - an external element that provides an error message isn't identified via aria-errormessage AND\n  //   - both status and statusMessage properties are being controlled OR\n  //   - status is uncontrolled and required is true\n  const canShowError =\n    ariaErrorMessage == null &&\n    ((status !== undefined && statusMessage !== undefined) ||\n      (status === undefined && required));\n\n  const isStateInvalid = isInvalid(validationState);\n\n  let errorMessageId;\n  if (isStateInvalid) {\n    errorMessageId = canShowError\n      ? setId(elementId, \"error\")\n      : ariaErrorMessage;\n  }\n\n  return (\n    <StyledHvFormElement\n      id={id}\n      name={name}\n      status={validationState}\n      disabled={disabled}\n      readOnly={readOnly}\n      required={required}\n      className={clsx(className, dropdownClasses.root, classes?.root)}\n      $selectionDisabled={disabled}\n      {...others}\n    >\n      {(hasLabel || hasDescription) && (\n        <StyledLabelContainer\n          className={clsx(\n            dropdownClasses.labelContainer,\n            classes?.labelContainer\n          )}\n        >\n          {hasLabel && (\n            <StyledLabel\n              id={setId(elementId, \"label\")}\n              label={label}\n              className={clsx(classes?.label, dropdownClasses.label)}\n            />\n          )}\n\n          {hasDescription && (\n            <HvInfoMessage\n              id={setId(elementId, \"description\")}\n              className={clsx(\n                classes?.description,\n                dropdownClasses.description\n              )}\n            >\n              {description}\n            </HvInfoMessage>\n          )}\n        </StyledLabelContainer>\n      )}\n      <StyledDropdown\n        id={setId(id, \"dropdown\")}\n        classes={{\n          root: clsx(classes?.dropdown, dropdownClasses.dropdown),\n          arrow: clsx(classes?.arrow, dropdownClasses.arrow),\n          header: clsx(\n            dropdownClasses.dropdownHeader,\n            classes?.dropdownHeader,\n            isStateInvalid &&\n              clsx(\n                dropdownClasses.dropdownHeaderInvalid,\n                classes?.dropdownHeaderInvalid\n              )\n          ),\n          headerOpen: clsx(\n            dropdownClasses.dropdownHeaderOpen,\n            classes?.dropdownHeaderOpen\n          ),\n        }}\n        $dropdownHeaderInvalid={isStateInvalid}\n        $readOnly={readOnly}\n        expanded={isOpen}\n        disabled={disabled}\n        readOnly={readOnly}\n        disablePortal={disablePortal}\n        placement={placement}\n        popperProps={popperProps}\n        placeholder={buildHeaderLabel()}\n        onToggle={handleToggle}\n        onClickOutside={handleClickOutside}\n        onContainerCreation={setFocusToContent}\n        role=\"combobox\"\n        variableWidth={variableWidth}\n        aria-label={ariaLabel}\n        aria-labelledby={\n          [label && setId(elementId, \"label\"), ariaLabelledBy]\n            .join(\" \")\n            .trim() || undefined\n        }\n        aria-invalid={isStateInvalid ? true : undefined}\n        aria-errormessage={errorMessageId}\n        aria-describedby={\n          [description && setId(elementId, \"description\"), ariaDescribedBy]\n            .join(\" \")\n            .trim() || undefined\n        }\n        onFocus={onFocus}\n        onBlur={onBlur}\n        dropdownHeaderRef={dropdownHeaderRef}\n        {...baseDropdownProps}\n      >\n        <HvDropdownList\n          id={setId(elementId, \"values\")}\n          classes={{\n            rootList: clsx(dropdownClasses.rootList, classes?.rootList),\n            dropdownListContainer: clsx(\n              dropdownClasses.dropdownListContainer,\n              classes?.dropdownListContainer\n            ),\n          }}\n          values={internalValues}\n          multiSelect={multiSelect}\n          showSearch={showSearch}\n          onChange={handleSelection}\n          onCancel={handleCancel}\n          labels={labels}\n          notifyChangesOnFirstRender={notifyChangesOnFirstRender}\n          hasTooltips={hasTooltips}\n          singleSelectionToggle={singleSelectionToggle}\n          aria-labelledby={hasLabel ? setId(elementId, \"label\") : undefined}\n          height={height}\n          maxHeight={maxHeight}\n          virtualized={virtualized}\n          {...listProps}\n        />\n      </StyledDropdown>\n      {canShowError && (\n        <HvWarningText\n          id={setId(elementId, \"error\")}\n          disableBorder\n          className={clsx(dropdownClasses.error, classes?.error)}\n        >\n          {validationMessage}\n        </HvWarningText>\n      )}\n    </StyledHvFormElement>\n  );\n};\n"],"names":["DEFAULT_LABELS","select","undefined","selectAll","cancelLabel","applyLabel","searchPlaceholder","multiSelectionConjunction","HvDropdown","props","classes","className","id","name","required","disabled","readOnly","label","ariaLabel","ariaLabelledBy","description","ariaDescribedBy","placeholder","onChange","status","statusMessage","ariaErrorMessage","onCancel","onToggle","onClickOutside","onFocus","onBlur","values","multiSelect","showSearch","expanded","defaultExpanded","notifyChangesOnFirstRender","labels","labelsProp","hasTooltips","disablePortal","singleSelectionToggle","placement","variableWidth","popperProps","height","maxHeight","virtualized","baseDropdownProps","listProps","others","useDefaultProps","useLabels","elementId","useUniqueId","validationState","setValidationState","useControlled","validationMessage","isOpen","setIsOpen","Boolean","selectionLabel","setSelectionLabel","useState","getSelectionLabel","internalValues","setInternalValues","useEffect","process","env","NODE_ENV","console","error","dropdownHeaderRef","useRef","handleToggle","event","open","hasSelection","getSelected","length","handleSelection","listValues","commitChanges","toggle","notifyChanges","selected","current","focus","preventScroll","handleCancel","evt","handleClickOutside","setFocusToContent","containerRef","inputs","getElementsByTagName","listItems","every","listItem","tabIndex","buildHeaderLabel","StyledTypography","component","$selectionDisabled","$isOpen","variant","clsx","dropdownClasses","selectionDisabled","children","_jsxs","_jsx","total","hasLabel","hasDescription","canShowError","isStateInvalid","isInvalid","errorMessageId","setId","StyledHvFormElement","root","StyledLabelContainer","labelContainer","StyledLabel","HvInfoMessage","StyledDropdown","dropdown","arrow","header","dropdownHeader","dropdownHeaderInvalid","headerOpen","dropdownHeaderOpen","$dropdownHeaderInvalid","$readOnly","onContainerCreation","role","join","trim","HvDropdownList","rootList","dropdownListContainer","HvWarningText","disableBorder"],"mappings":"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"}

package/dist/esm/components/EmptyState/EmptyState.js

@@ -1,48 +1,66 @@
-import { clsx } from "clsx";
 import { useTheme as useTheme$1 } from "@mui/material/styles";
+import useMediaQuery from "@mui/material/useMediaQuery";
+import { theme } from "@hitachivantara/uikit-styles";
+import { useDefaultProps } from "../../hooks/useDefaultProps.js";
 import { useTheme } from "../../hooks/useTheme.js";
-import { StyledRoot, StyledContainer, StyledTextContainer, StyledTypography } from "./EmptyState.styles.js";
-import emptyStateClasses from "./emptyStateClasses.js";
+import { useClasses } from "./EmptyState.styles.js";
+import { staticClasses } from "./EmptyState.styles.js";
 import { jsx, jsxs } from "@emotion/react/jsx-runtime";
+import { HvTypography } from "../Typography/Typography.js";
 const HvEmptyState = (props) => {
-  const {
-    activeTheme
-  } = useTheme();
-  const muiTheme = useTheme$1();
-  const renderNode = (type, variant, node, className2) => node && /* @__PURE__ */ jsx(StyledTypography, {
-    $type: type,
-    variant,
-    className: className2,
-    children: node
-  });
   const {
     action,
     icon,
     title,
     message,
-    classes,
+    classes: classesProp,
     className,
     ...others
-  } = props;
-  return /* @__PURE__ */ jsx(StyledRoot, {
-    className: clsx(className, emptyStateClasses.root, classes == null ? void 0 : classes.root),
+  } = useDefaultProps("HvEmptyState", props);
+  const {
+    classes,
+    cx,
+    css
+  } = useClasses(classesProp);
+  const {
+    activeTheme
+  } = useTheme();
+  const muiTheme = useTheme$1();
+  const onlyXs = useMediaQuery(muiTheme.breakpoints.only("xs"));
+  const upSm = useMediaQuery(muiTheme.breakpoints.up("sm"));
+  const messageOnly = !!(message && !(title || action));
+  const renderNode = (variant, node, style) => node && /* @__PURE__ */ jsx(HvTypography, {
+    variant,
+    className: style,
+    children: node
+  });
+  return /* @__PURE__ */ jsx("div", {
+    className: cx(classes.root, className),
     ...others,
-    children: /* @__PURE__ */ jsxs(StyledContainer, {
-      className: clsx(emptyStateClasses.container, classes == null ? void 0 : classes.container, !!(message && !(title || action)) && clsx(emptyStateClasses.containerMessageOnly, classes == null ? void 0 : classes.containerMessageOnly)),
-      $breakpoints: muiTheme.breakpoints,
-      $messageOnly: !!(message && !(title || action)),
+    children: /* @__PURE__ */ jsxs("div", {
+      className: cx(classes.container, onlyXs && css({
+        flexDirection: "column",
+        alignItems: "center",
+        textAlign: "center"
+      }), {
+        [classes.containerMessageOnly]: messageOnly
+      }, onlyXs && messageOnly && css({
+        flexDirection: "row"
+      })),
       children: [/* @__PURE__ */ jsx("div", {
-        className: clsx(emptyStateClasses.iconContainer, classes == null ? void 0 : classes.iconContainer),
+        className: classes.iconContainer,
         children: icon
-      }), /* @__PURE__ */ jsxs(StyledTextContainer, {
-        $breakpoints: muiTheme.breakpoints,
-        className: clsx(emptyStateClasses.textContainer, classes == null ? void 0 : classes.textContainer),
-        children: [renderNode("title", activeTheme == null ? void 0 : activeTheme.emptyState.titleVariant, title, clsx(emptyStateClasses.titleContainer, classes == null ? void 0 : classes.titleContainer)), renderNode("message", "body", message, clsx(emptyStateClasses.messageContainer, classes == null ? void 0 : classes.messageContainer)), renderNode("action", "body", action, clsx(emptyStateClasses.actionContainer, classes == null ? void 0 : classes.actionContainer))]
+      }), /* @__PURE__ */ jsxs("div", {
+        className: cx(classes.textContainer, upSm && css({
+          marginLeft: theme.space.xs
+        })),
+        children: [renderNode(activeTheme == null ? void 0 : activeTheme.emptyState.titleVariant, title, classes.titleContainer), renderNode("body", message, classes.messageContainer), renderNode("body", action, classes.actionContainer)]
       })]
     })
   });
 };
 export {
-  HvEmptyState
+  HvEmptyState,
+  staticClasses as emptyStateClasses
 };
 //# sourceMappingURL=EmptyState.js.map

package/dist/esm/components/EmptyState/EmptyState.js.map

@@ -1 +1 @@
-{"version":3,"file":"EmptyState.js","sources":["../../../../src/components/EmptyState/EmptyState.tsx"],"sourcesContent":["import { clsx } from \"clsx\";\n\nimport React from \"react\";\n\nimport { useTheme } from \"@mui/material/styles\";\n\nimport { HvBaseProps } from \"@core/types/generic\";\nimport { HvTypographyProps } from \"@core/components/Typography\";\nimport { useTheme as useHvTheme } from \"@core/hooks/useTheme\";\n\nimport {\n  StyledContainer,\n  StyledRoot,\n  StyledTextContainer,\n  StyledTypography,\n} from \"./EmptyState.styles\";\nimport emptyStateClasses, { HvEmptyStateClasses } from \"./emptyStateClasses\";\n\nexport interface HvEmptyStateProps\n  extends HvBaseProps<HTMLDivElement, \"title\"> {\n  /** Icon to be presented. */\n  icon: React.ReactNode;\n  /** The title to be shown. */\n  title?: string | React.ReactNode;\n  /** The message to be shown. */\n  message?: string | React.ReactNode;\n  /** The action message to be shown. */\n  action?: string | React.ReactNode;\n  /** A Jss Object used to override or extend the styles applied to the empty state component. */\n  classes?: HvEmptyStateClasses;\n}\n\n/**\n * Empty states communicate that there’s no information, data or values to display in a given context.\n */\nexport const HvEmptyState = (props: HvEmptyStateProps) => {\n  const { activeTheme } = useHvTheme();\n\n  const muiTheme = useTheme();\n\n  const renderNode = (\n    type: \"action\" | \"message\" | \"title\",\n    variant?: HvTypographyProps[\"variant\"],\n    node?: string | React.ReactNode,\n    className?: string\n  ) =>\n    node && (\n      <StyledTypography $type={type} variant={variant} className={className}>\n        {node}\n      </StyledTypography>\n    );\n\n  const { action, icon, title, message, classes, className, ...others } = props;\n\n  return (\n    <StyledRoot\n      className={clsx(className, emptyStateClasses.root, classes?.root)}\n      {...others}\n    >\n      <StyledContainer\n        className={clsx(\n          emptyStateClasses.container,\n          classes?.container,\n          !!(message && !(title || action)) &&\n            clsx(\n              emptyStateClasses.containerMessageOnly,\n              classes?.containerMessageOnly\n            )\n        )}\n        $breakpoints={muiTheme.breakpoints}\n        $messageOnly={!!(message && !(title || action))}\n      >\n        <div\n          className={clsx(\n            emptyStateClasses.iconContainer,\n            classes?.iconContainer\n          )}\n        >\n          {icon}\n        </div>\n        <StyledTextContainer\n          $breakpoints={muiTheme.breakpoints}\n          className={clsx(\n            emptyStateClasses.textContainer,\n            classes?.textContainer\n          )}\n        >\n          {renderNode(\n            \"title\",\n            activeTheme?.emptyState.titleVariant,\n            title,\n            clsx(emptyStateClasses.titleContainer, classes?.titleContainer)\n          )}\n          {renderNode(\n            \"message\",\n            \"body\",\n            message,\n            clsx(emptyStateClasses.messageContainer, classes?.messageContainer)\n          )}\n          {renderNode(\n            \"action\",\n            \"body\",\n            action,\n            clsx(emptyStateClasses.actionContainer, classes?.actionContainer)\n          )}\n        </StyledTextContainer>\n      </StyledContainer>\n    </StyledRoot>\n  );\n};\n"],"names":["HvEmptyState","props","activeTheme","useHvTheme","muiTheme","useTheme","renderNode","type","variant","node","className","StyledTypography","$type","children","action","icon","title","message","classes","others","StyledRoot","clsx","emptyStateClasses","root","StyledContainer","container","containerMessageOnly","$breakpoints","breakpoints","$messageOnly","_jsx","iconContainer","_jsxs","StyledTextContainer","textContainer","emptyState","titleVariant","titleContainer","messageContainer","actionContainer"],"mappings":";;;;;;AAmCaA,MAAAA,eAAeA,CAACC,UAA6B;AAClD,QAAA;AAAA,IAAEC;AAAAA,MAAgBC,SAAW;AAEnC,QAAMC,WAAWC;AAEXC,QAAAA,aAAaA,CACjBC,MACAC,SACAC,MACAC,eAEAD,4BACGE,kBAAgB;AAAA,IAACC,OAAOL;AAAAA,IAAMC;AAAAA,IAAkBE,WAAWA;AAAAA,IAAUG,UACnEJ;AAAAA,EAAAA,CACe;AAGhB,QAAA;AAAA,IAAEK;AAAAA,IAAQC;AAAAA,IAAMC;AAAAA,IAAOC;AAAAA,IAASC;AAAAA,IAASR;AAAAA,IAAW,GAAGS;AAAAA,EAAWlB,IAAAA;AAExE,6BACGmB,YAAU;AAAA,IACTV,WAAWW,KAAKX,WAAWY,kBAAkBC,MAAML,mCAASK,IAAI;AAAA,IAAE,GAC9DJ;AAAAA,IAAMN,+BAETW,iBAAe;AAAA,MACdd,WAAWW,KACTC,kBAAkBG,WAClBP,mCAASO,WACT,CAAC,EAAER,WAAW,EAAED,SAASF,YACvBO,KACEC,kBAAkBI,sBAClBR,mCAASQ,oBACX,CACJ;AAAA,MACAC,cAAcvB,SAASwB;AAAAA,MACvBC,cAAc,CAAC,EAAEZ,WAAW,EAAED,SAASF;AAAAA,MAASD,WAEhDiB,oBAAA,OAAA;AAAA,QACEpB,WAAWW,KACTC,kBAAkBS,eAClBb,mCAASa,aACX;AAAA,QAAElB,UAEDE;AAAAA,MAAAA,CACE,GACLiB,qBAACC,qBAAmB;AAAA,QAClBN,cAAcvB,SAASwB;AAAAA,QACvBlB,WAAWW,KACTC,kBAAkBY,eAClBhB,mCAASgB,aACX;AAAA,QAAErB,UAEDP,CAAAA,WACC,SACAJ,2CAAaiC,WAAWC,cACxBpB,OACAK,KAAKC,kBAAkBe,gBAAgBnB,mCAASmB,cAAc,CAChE,GACC/B,WACC,WACA,QACAW,SACAI,KAAKC,kBAAkBgB,kBAAkBpB,mCAASoB,gBAAgB,CACpE,GACChC,WACC,UACA,QACAQ,QACAO,KAAKC,kBAAkBiB,iBAAiBrB,mCAASqB,eAAe,CAClE,CAAC;AAAA,MAAA,CACkB,CAAC;AAAA,IAAA,CACP;AAAA,EAAA,CACP;AAEhB;"}
+{"version":3,"file":"EmptyState.js","sources":["../../../../src/components/EmptyState/EmptyState.tsx"],"sourcesContent":["import React from \"react\";\n\nimport { useTheme } from \"@mui/material/styles\";\nimport useMediaQuery from \"@mui/material/useMediaQuery\";\n\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { useDefaultProps } from \"@core/hooks/useDefaultProps\";\nimport { HvBaseProps } from \"@core/types/generic\";\nimport { HvTypography, HvTypographyProps } from \"@core/components/Typography\";\nimport { useTheme as useHvTheme } from \"@core/hooks/useTheme\";\nimport { ExtractNames } from \"@core/utils/classes\";\n\nimport { staticClasses, useClasses } from \"./EmptyState.styles\";\n\nexport { staticClasses as emptyStateClasses };\n\nexport type HvEmptyStateClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvEmptyStateProps\n  extends HvBaseProps<HTMLDivElement, \"title\"> {\n  /** Icon to be presented. */\n  icon: React.ReactNode;\n  /** The title to be shown. */\n  title?: string | React.ReactNode;\n  /** The message to be shown. */\n  message?: string | React.ReactNode;\n  /** The action message to be shown. */\n  action?: string | React.ReactNode;\n  /** A Jss Object used to override or extend the styles applied to the empty state component. */\n  classes?: HvEmptyStateClasses;\n}\n\n/**\n * Empty states communicate that there’s no information, data or values to display in a given context.\n */\nexport const HvEmptyState = (props: HvEmptyStateProps) => {\n  const {\n    action,\n    icon,\n    title,\n    message,\n    classes: classesProp,\n    className,\n    ...others\n  } = useDefaultProps(\"HvEmptyState\", props);\n\n  const { classes, cx, css } = useClasses(classesProp);\n\n  const { activeTheme } = useHvTheme();\n\n  const muiTheme = useTheme();\n\n  const onlyXs = useMediaQuery(muiTheme.breakpoints.only(\"xs\"));\n  const upSm = useMediaQuery(muiTheme.breakpoints.up(\"sm\"));\n\n  const messageOnly = !!(message && !(title || action));\n\n  const renderNode = (\n    variant?: HvTypographyProps[\"variant\"],\n    node?: React.ReactNode,\n    style?: string\n  ) =>\n    node && (\n      <HvTypography variant={variant} className={style}>\n        {node}\n      </HvTypography>\n    );\n\n  return (\n    <div className={cx(classes.root, className)} {...others}>\n      <div\n        className={cx(\n          classes.container,\n          onlyXs &&\n            css({\n              flexDirection: \"column\",\n              alignItems: \"center\",\n              textAlign: \"center\",\n            }),\n          {\n            [classes.containerMessageOnly]: messageOnly,\n          },\n          onlyXs && messageOnly && css({ flexDirection: \"row\" })\n        )}\n      >\n        <div className={classes.iconContainer}>{icon}</div>\n        <div\n          className={cx(\n            classes.textContainer,\n            upSm && css({ marginLeft: theme.space.xs })\n          )}\n        >\n          {renderNode(\n            activeTheme?.emptyState.titleVariant,\n            title,\n            classes.titleContainer\n          )}\n          {renderNode(\"body\", message, classes.messageContainer)}\n          {renderNode(\"body\", action, classes.actionContainer)}\n        </div>\n      </div>\n    </div>\n  );\n};\n"],"names":["HvEmptyState","props","action","icon","title","message","classes","classesProp","className","others","useDefaultProps","cx","css","useClasses","activeTheme","useHvTheme","muiTheme","useTheme","onlyXs","useMediaQuery","breakpoints","only","upSm","up","messageOnly","renderNode","variant","node","style","HvTypography","children","root","container","flexDirection","alignItems","textAlign","containerMessageOnly","_jsx","iconContainer","_jsxs","textContainer","marginLeft","theme","space","xs","emptyState","titleVariant","titleContainer","messageContainer","actionContainer"],"mappings":";;;;;;;;;AAoCaA,MAAAA,eAAeA,CAACC,UAA6B;AAClD,QAAA;AAAA,IACJC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC,SAASC;AAAAA,IACTC;AAAAA,IACA,GAAGC;AAAAA,EAAAA,IACDC,gBAAgB,gBAAgBT,KAAK;AAEnC,QAAA;AAAA,IAAEK;AAAAA,IAASK;AAAAA,IAAIC;AAAAA,EAAAA,IAAQC,WAAWN,WAAW;AAE7C,QAAA;AAAA,IAAEO;AAAAA,MAAgBC,SAAW;AAEnC,QAAMC,WAAWC;AAEjB,QAAMC,SAASC,cAAcH,SAASI,YAAYC,KAAK,IAAI,CAAC;AAC5D,QAAMC,OAAOH,cAAcH,SAASI,YAAYG,GAAG,IAAI,CAAC;AAExD,QAAMC,cAAc,CAAC,EAAEnB,WAAW,EAAED,SAASF;AAE7C,QAAMuB,aAAaA,CACjBC,SACAC,MACAC,UAEAD,4BACGE,cAAY;AAAA,IAACH;AAAAA,IAAkBlB,WAAWoB;AAAAA,IAAME,UAC9CH;AAAAA,EAAAA,CACW;AAGlB,6BACE,OAAA;AAAA,IAAKnB,WAAWG,GAAGL,QAAQyB,MAAMvB,SAAS;AAAA,IAAE,GAAKC;AAAAA,IAAMqB,+BACrD,OAAA;AAAA,MACEtB,WAAWG,GACTL,QAAQ0B,WACRd,UACEN,IAAI;AAAA,QACFqB,eAAe;AAAA,QACfC,YAAY;AAAA,QACZC,WAAW;AAAA,MAAA,CACZ,GACH;AAAA,QACE,CAAC7B,QAAQ8B,oBAAoB,GAAGZ;AAAAA,MAAAA,GAElCN,UAAUM,eAAeZ,IAAI;AAAA,QAAEqB,eAAe;AAAA,MAAA,CAAO,CACvD;AAAA,MAAEH,WAEFO,oBAAA,OAAA;AAAA,QAAK7B,WAAWF,QAAQgC;AAAAA,QAAcR,UAAE3B;AAAAA,MAAAA,CAAU,GAClDoC,qBAAA,OAAA;AAAA,QACE/B,WAAWG,GACTL,QAAQkC,eACRlB,QAAQV,IAAI;AAAA,UAAE6B,YAAYC,MAAMC,MAAMC;AAAAA,QAAAA,CAAI,CAC5C;AAAA,QAAEd,WAEDL,WACCX,2CAAa+B,WAAWC,cACxB1C,OACAE,QAAQyC,cACV,GACCtB,WAAW,QAAQpB,SAASC,QAAQ0C,gBAAgB,GACpDvB,WAAW,QAAQvB,QAAQI,QAAQ2C,eAAe,CAAC;AAAA,MAAA,CACjD,CAAC;AAAA,IAAA,CACH;AAAA,EAAA,CACF;AAET;"}