@hitachivantara/uikit-react-core 5.73.2 → 5.74.0

package/dist/esm/Accordion/Accordion.js.map

@@ -1 +1 @@
-{"version":3,"file":"Accordion.js","sources":["../../../src/Accordion/Accordion.tsx"],"sourcesContent":["import { useCallback, useMemo } from \"react\";\nimport { DropDownXS, DropUpXS } from \"@hitachivantara/uikit-react-icons\";\nimport {\n  useDefaultProps,\n  type ExtractNames,\n} from \"@hitachivantara/uikit-react-utils\";\n\nimport { useControlled } from \"../hooks/useControlled\";\nimport { useUniqueId } from \"../hooks/useUniqueId\";\nimport { HvBaseProps } from \"../types/generic\";\nimport { HvTypography, HvTypographyVariants } from \"../Typography\";\nimport { setId } from \"../utils/setId\";\nimport { staticClasses, useClasses } from \"./Accordion.styles\";\n\nexport { staticClasses as accordionClasses };\n\nexport type HvAccordionClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvAccordionProps\n  extends HvBaseProps<HTMLDivElement, \"onChange\" | \"children\"> {\n  /** Content to be rendered. */\n  children: React.ReactNode;\n  /** The accordion label button. */\n  label?: string;\n  /** The function that will be executed whenever the accordion toggles. It will receive the state of the accordion. */\n  onChange?: (event: React.SyntheticEvent, value: boolean) => void;\n  /** Whether the accordion is open or not. If this property is defined the accordion must be fully controlled. */\n  expanded?: boolean;\n  /** When uncontrolled, defines the initial expanded state. */\n  defaultExpanded?: boolean;\n  /** An object containing props to be passed onto container holding the accordion children. */\n  containerProps?: React.HTMLAttributes<HTMLDivElement>;\n  /** Heading level to apply to accordion button. If ´undefined´ the button won't have a header wrapper. */\n  headingLevel?: 1 | 2 | 3 | 4 | 5 | 6;\n  /** Whether the accordion is disabled. */\n  disabled?: boolean;\n  /** Typography variant for the label. */\n  labelVariant?: HvTypographyVariants;\n  /** A Jss Object used to override or extend the styles applied. */\n  classes?: HvAccordionClasses;\n  /** Whether to disable the internal usage of `preventDefault` and `stopPropagation` when the `onChange` event is triggered. */\n  disableEventHandling?: boolean; // TODO - remove in v6 as this should be the default behavior: `preventDefault` and `stopPropagation` shouldn't be triggered internally\n}\n\n/**\n * A accordion is a design element that expands in place to expose hidden information.\n */\nexport const HvAccordion = (props: HvAccordionProps) => {\n  const {\n    id: idProp,\n    className,\n    classes: classesProp,\n    disabled = false,\n    label,\n    onChange,\n    children,\n    expanded,\n    headingLevel,\n    defaultExpanded = false,\n    containerProps,\n    labelVariant = \"label\",\n    disableEventHandling,\n    ...others\n  } = useDefaultProps(\"HvAccordion\", props);\n\n  const id = useUniqueId(idProp);\n\n  const { classes, cx } = useClasses(classesProp);\n\n  const [isOpen, setIsOpen] = useControlled(expanded, Boolean(defaultExpanded));\n\n  const handleAction = useCallback(\n    (event: React.SyntheticEvent) => {\n      if (!disabled) {\n        onChange?.(event, isOpen);\n        setIsOpen(!isOpen);\n        return true;\n      }\n      return false;\n    },\n    [disabled, onChange, isOpen, setIsOpen],\n  );\n\n  const handleClick = useCallback(\n    (event: React.SyntheticEvent) => {\n      handleAction(event);\n      if (!disableEventHandling) {\n        event.preventDefault();\n        event.stopPropagation();\n      }\n    },\n    [disableEventHandling, handleAction],\n  );\n\n  const handleKeyDown = useCallback(\n    (event: React.KeyboardEvent<HTMLDivElement>) => {\n      let isEventHandled = false;\n      const { key } = event;\n\n      if (\n        event.altKey ||\n        event.ctrlKey ||\n        event.metaKey ||\n        event.currentTarget !== event.target\n      ) {\n        return;\n      }\n      switch (key) {\n        case \"Enter\":\n        case \" \":\n          isEventHandled = handleAction(event);\n          break;\n        default:\n          return;\n      }\n\n      if (isEventHandled && !disableEventHandling) {\n        event.preventDefault();\n        event.stopPropagation();\n      }\n    },\n    [disableEventHandling, handleAction],\n  );\n\n  const accordionHeaderId = setId(id, \"button\");\n  const accordionContainer = setId(id, \"container\");\n  const accordionHeader = useMemo(() => {\n    const color = disabled ? \"secondary_60\" : undefined;\n\n    const accordionButton = (\n      <HvTypography\n        id={accordionHeaderId}\n        component=\"div\"\n        role=\"button\"\n        className={cx(classes.label, { [classes.disabled]: disabled })}\n        disabled={disabled}\n        tabIndex={0}\n        onKeyDown={handleKeyDown}\n        onClick={handleClick}\n        variant={labelVariant}\n        aria-expanded={isOpen}\n        aria-disabled={disabled}\n      >\n        {isOpen ? <DropUpXS color={color} /> : <DropDownXS color={color} />}\n        {label}\n      </HvTypography>\n    );\n\n    return headingLevel === undefined ? (\n      accordionButton\n    ) : (\n      <HvTypography component={`h${headingLevel}`} variant={labelVariant}>\n        {accordionButton}\n      </HvTypography>\n    );\n  }, [\n    cx,\n    classes,\n    handleClick,\n    handleKeyDown,\n    label,\n    accordionHeaderId,\n    disabled,\n    headingLevel,\n    isOpen,\n    labelVariant,\n  ]);\n\n  return (\n    <div id={id} className={cx(classes.root, className)} {...others}>\n      {accordionHeader}\n      <div\n        id={accordionContainer}\n        role=\"region\"\n        aria-labelledby={accordionHeaderId}\n        className={cx(classes.container, { [classes.hidden]: !isOpen })}\n        hidden={!isOpen}\n        {...containerProps}\n      >\n        {children}\n      </div>\n    </div>\n  );\n};\n"],"names":[],"mappings":";;;;;;;;;;AA+Ca,MAAA,cAAc,CAAC,UAA4B;AAChD,QAAA;AAAA,IACJ,IAAI;AAAA,IACJ;AAAA,IACA,SAAS;AAAA,IACT,WAAW;AAAA,IACX;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,kBAAkB;AAAA,IAClB;AAAA,IACA,eAAe;AAAA,IACf;AAAA,IACA,GAAG;AAAA,EAAA,IACD,gBAAgB,eAAe,KAAK;AAElC,QAAA,KAAK,YAAY,MAAM;AAE7B,QAAM,EAAE,SAAS,GAAG,IAAI,WAAW,WAAW;AAExC,QAAA,CAAC,QAAQ,SAAS,IAAI,cAAc,UAAU,QAAQ,eAAe,CAAC;AAE5E,QAAM,eAAe;AAAA,IACnB,CAAC,UAAgC;AAC/B,UAAI,CAAC,UAAU;AACb,mBAAW,OAAO,MAAM;AACxB,kBAAU,CAAC,MAAM;AACV,eAAA;AAAA,MACT;AACO,aAAA;AAAA,IACT;AAAA,IACA,CAAC,UAAU,UAAU,QAAQ,SAAS;AAAA,EAAA;AAGxC,QAAM,cAAc;AAAA,IAClB,CAAC,UAAgC;AAC/B,mBAAa,KAAK;AAClB,UAAI,CAAC,sBAAsB;AACzB,cAAM,eAAe;AACrB,cAAM,gBAAgB;AAAA,MACxB;AAAA,IACF;AAAA,IACA,CAAC,sBAAsB,YAAY;AAAA,EAAA;AAGrC,QAAM,gBAAgB;AAAA,IACpB,CAAC,UAA+C;AAC9C,UAAI,iBAAiB;AACf,YAAA,EAAE,IAAQ,IAAA;AAGd,UAAA,MAAM,UACN,MAAM,WACN,MAAM,WACN,MAAM,kBAAkB,MAAM,QAC9B;AACA;AAAA,MACF;AACA,cAAQ,KAAK;AAAA,QACX,KAAK;AAAA,QACL,KAAK;AACH,2BAAiB,aAAa,KAAK;AACnC;AAAA,QACF;AACE;AAAA,MACJ;AAEI,UAAA,kBAAkB,CAAC,sBAAsB;AAC3C,cAAM,eAAe;AACrB,cAAM,gBAAgB;AAAA,MACxB;AAAA,IACF;AAAA,IACA,CAAC,sBAAsB,YAAY;AAAA,EAAA;AAG/B,QAAA,oBAAoB,MAAM,IAAI,QAAQ;AACtC,QAAA,qBAAqB,MAAM,IAAI,WAAW;AAC1C,QAAA,kBAAkB,QAAQ,MAAM;AAC9B,UAAA,QAAQ,WAAW,iBAAiB;AAE1C,UAAM,kBACJ;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,IAAI;AAAA,QACJ,WAAU;AAAA,QACV,MAAK;AAAA,QACL,WAAW,GAAG,QAAQ,OAAO,EAAE,CAAC,QAAQ,QAAQ,GAAG,UAAU;AAAA,QAC7D;AAAA,QACA,UAAU;AAAA,QACV,WAAW;AAAA,QACX,SAAS;AAAA,QACT,SAAS;AAAA,QACT,iBAAe;AAAA,QACf,iBAAe;AAAA,QAEd,UAAA;AAAA,UAAA,6BAAU,UAAS,EAAA,MAAA,CAAc,IAAK,oBAAC,cAAW,OAAc;AAAA,UAChE;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA;AAIE,WAAA,iBAAiB,SACtB,kBAEC,oBAAA,cAAA,EAAa,WAAW,IAAI,YAAY,IAAI,SAAS,cACnD,UACH,gBAAA,CAAA;AAAA,EAAA,GAED;AAAA,IACD;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EAAA,CACD;AAGC,SAAA,qBAAC,OAAI,EAAA,IAAQ,WAAW,GAAG,QAAQ,MAAM,SAAS,GAAI,GAAG,QACtD,UAAA;AAAA,IAAA;AAAA,IACD;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,IAAI;AAAA,QACJ,MAAK;AAAA,QACL,mBAAiB;AAAA,QACjB,WAAW,GAAG,QAAQ,WAAW,EAAE,CAAC,QAAQ,MAAM,GAAG,CAAC,QAAQ;AAAA,QAC9D,QAAQ,CAAC;AAAA,QACR,GAAG;AAAA,QAEH;AAAA,MAAA;AAAA,IACH;AAAA,EACF,EAAA,CAAA;AAEJ;"}
+{"version":3,"file":"Accordion.js","sources":["../../../src/Accordion/Accordion.tsx"],"sourcesContent":["import { useCallback, useMemo } from \"react\";\nimport { DropUpXS } from \"@hitachivantara/uikit-react-icons\";\nimport {\n  useDefaultProps,\n  type ExtractNames,\n} from \"@hitachivantara/uikit-react-utils\";\n\nimport { HvButtonBase } from \"../ButtonBase\";\nimport { useExpandable } from \"../hooks/useExpandable\";\nimport { HvBaseProps } from \"../types/generic\";\nimport { HvTypography, HvTypographyVariants } from \"../Typography\";\nimport { staticClasses, useClasses } from \"./Accordion.styles\";\n\nexport { staticClasses as accordionClasses };\n\nexport type HvAccordionClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvAccordionProps\n  extends HvBaseProps<HTMLDivElement, \"onChange\" | \"children\"> {\n  /** Content to be rendered. */\n  children: React.ReactNode;\n  /** The accordion label button. */\n  label?: string;\n  /** The function that will be executed whenever the accordion toggles. It will receive the state of the accordion. */\n  onChange?: (event: React.SyntheticEvent, value: boolean) => void;\n  /** Whether the accordion is open or not. If this property is defined the accordion must be fully controlled. */\n  expanded?: boolean;\n  /** When uncontrolled, defines the initial expanded state. */\n  defaultExpanded?: boolean;\n  /** An object containing props to be passed onto container holding the accordion children. */\n  containerProps?: React.HTMLAttributes<HTMLDivElement>;\n  /** Heading level to apply to accordion button. If ´undefined´ the button won't have a header wrapper. */\n  headingLevel?: 1 | 2 | 3 | 4 | 5 | 6;\n  /** Whether the accordion is disabled. */\n  disabled?: boolean;\n  /** Typography variant for the label. */\n  labelVariant?: HvTypographyVariants;\n  /** A Jss Object used to override or extend the styles applied. */\n  classes?: HvAccordionClasses;\n  /** Whether to disable the internal usage of `preventDefault` and `stopPropagation` when the `onChange` event is triggered. */\n  disableEventHandling?: boolean; // TODO - remove in v6 as this should be the default behavior: `preventDefault` and `stopPropagation` shouldn't be triggered internally\n}\n\n/**\n * A accordion is a design element that expands in place to expose hidden information.\n */\nexport const HvAccordion = (props: HvAccordionProps) => {\n  const {\n    id: idProp,\n    className,\n    classes: classesProp,\n    disabled = false,\n    label,\n    onChange,\n    children,\n    expanded,\n    headingLevel,\n    defaultExpanded = false,\n    containerProps,\n    labelVariant = \"label\",\n    disableEventHandling,\n    ...others\n  } = useDefaultProps(\"HvAccordion\", props);\n  const { classes, cx } = useClasses(classesProp);\n\n  const { isOpen, toggleOpen, buttonProps, regionProps } = useExpandable({\n    id: idProp,\n    expanded,\n    disabled,\n    defaultExpanded,\n  });\n\n  const handleClick = useCallback(\n    (event: React.SyntheticEvent) => {\n      if (!disabled) {\n        onChange?.(event, isOpen);\n        toggleOpen();\n      }\n\n      if (!disableEventHandling) {\n        event.preventDefault();\n        event.stopPropagation();\n      }\n    },\n    [disableEventHandling, disabled, isOpen, onChange, toggleOpen],\n  );\n\n  const accordionHeader = useMemo(() => {\n    const accordionButton = (\n      <HvTypography\n        {...buttonProps}\n        component={HvButtonBase}\n        className={cx(classes.label, { [classes.disabled]: disabled })}\n        disabled={disabled}\n        onClick={handleClick}\n        variant={labelVariant}\n      >\n        <DropUpXS\n          color=\"inherit\"\n          style={{ rotate: isOpen ? undefined : \"180deg\" }}\n        />\n        {label}\n      </HvTypography>\n    );\n\n    return headingLevel === undefined ? (\n      accordionButton\n    ) : (\n      <HvTypography component={`h${headingLevel}`} variant={labelVariant}>\n        {accordionButton}\n      </HvTypography>\n    );\n  }, [\n    cx,\n    classes,\n    handleClick,\n    label,\n    buttonProps,\n    disabled,\n    headingLevel,\n    isOpen,\n    labelVariant,\n  ]);\n\n  return (\n    <div id={idProp} className={cx(classes.root, className)} {...others}>\n      {accordionHeader}\n      <div\n        className={cx(classes.container, { [classes.hidden]: !isOpen })}\n        hidden={!isOpen}\n        {...regionProps}\n        {...containerProps}\n      >\n        {children}\n      </div>\n    </div>\n  );\n};\n"],"names":[],"mappings":";;;;;;;;;AA8Ca,MAAA,cAAc,CAAC,UAA4B;AAChD,QAAA;AAAA,IACJ,IAAI;AAAA,IACJ;AAAA,IACA,SAAS;AAAA,IACT,WAAW;AAAA,IACX;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,kBAAkB;AAAA,IAClB;AAAA,IACA,eAAe;AAAA,IACf;AAAA,IACA,GAAG;AAAA,EAAA,IACD,gBAAgB,eAAe,KAAK;AACxC,QAAM,EAAE,SAAS,GAAG,IAAI,WAAW,WAAW;AAE9C,QAAM,EAAE,QAAQ,YAAY,aAAa,YAAA,IAAgB,cAAc;AAAA,IACrE,IAAI;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,EAAA,CACD;AAED,QAAM,cAAc;AAAA,IAClB,CAAC,UAAgC;AAC/B,UAAI,CAAC,UAAU;AACb,mBAAW,OAAO,MAAM;AACb;MACb;AAEA,UAAI,CAAC,sBAAsB;AACzB,cAAM,eAAe;AACrB,cAAM,gBAAgB;AAAA,MACxB;AAAA,IACF;AAAA,IACA,CAAC,sBAAsB,UAAU,QAAQ,UAAU,UAAU;AAAA,EAAA;AAGzD,QAAA,kBAAkB,QAAQ,MAAM;AACpC,UAAM,kBACJ;AAAA,MAAC;AAAA,MAAA;AAAA,QACE,GAAG;AAAA,QACJ,WAAW;AAAA,QACX,WAAW,GAAG,QAAQ,OAAO,EAAE,CAAC,QAAQ,QAAQ,GAAG,UAAU;AAAA,QAC7D;AAAA,QACA,SAAS;AAAA,QACT,SAAS;AAAA,QAET,UAAA;AAAA,UAAA;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,OAAM;AAAA,cACN,OAAO,EAAE,QAAQ,SAAS,SAAY,SAAS;AAAA,YAAA;AAAA,UACjD;AAAA,UACC;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA;AAIE,WAAA,iBAAiB,SACtB,kBAEC,oBAAA,cAAA,EAAa,WAAW,IAAI,YAAY,IAAI,SAAS,cACnD,UACH,gBAAA,CAAA;AAAA,EAAA,GAED;AAAA,IACD;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EAAA,CACD;AAGC,SAAA,qBAAC,OAAI,EAAA,IAAI,QAAQ,WAAW,GAAG,QAAQ,MAAM,SAAS,GAAI,GAAG,QAC1D,UAAA;AAAA,IAAA;AAAA,IACD;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,WAAW,GAAG,QAAQ,WAAW,EAAE,CAAC,QAAQ,MAAM,GAAG,CAAC,QAAQ;AAAA,QAC9D,QAAQ,CAAC;AAAA,QACR,GAAG;AAAA,QACH,GAAG;AAAA,QAEH;AAAA,MAAA;AAAA,IACH;AAAA,EACF,EAAA,CAAA;AAEJ;"}

package/dist/esm/Accordion/Accordion.styles.js

@@ -1,6 +1,4 @@
 import { createClasses } from "@hitachivantara/uikit-react-utils";
-import { theme } from "@hitachivantara/uikit-styles";
-import { outlineStyles } from "../utils/focusUtils.js";
 const { staticClasses, useClasses } = createClasses("HvAccordion", {
   root: {
     "& + root": {
@@ -14,32 +12,9 @@ const { staticClasses, useClasses } = createClasses("HvAccordion", {
     display: "flex",
     justifyContent: "flex-start",
     alignItems: "center",
-    height: "32px",
-    "&[disabled], &:active": {
-      outline: "none"
-    },
-    "&:focus": {
-      outline: "none",
-      background: theme.colors.atmo3
-    },
-    "&:hover": {
-      background: theme.colors.atmo3
-    },
-    "&:focus-visible": {
-      ...outlineStyles
-    },
-    cursor: "pointer"
+    height: "32px"
   },
-  disabled: {
-    cursor: "not-allowed",
-    color: theme.colors.secondary_60,
-    "&:focus": {
-      background: "none"
-    },
-    "&:hover": {
-      background: "none"
-    }
-  }
+  disabled: {}
 });
 export {
   staticClasses,

package/dist/esm/Accordion/Accordion.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"Accordion.styles.js","sources":["../../../src/Accordion/Accordion.styles.tsx"],"sourcesContent":["import { createClasses } from \"@hitachivantara/uikit-react-utils\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { outlineStyles } from \"../utils/focusUtils\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvAccordion\", {\n  root: {\n    \"& + root\": {\n      paddingTop: 8,\n    },\n  },\n  hidden: { height: 0, display: \"none\" },\n  container: { paddingTop: 8, height: \"auto\" },\n  label: {\n    width: \"100%\",\n    display: \"flex\",\n    justifyContent: \"flex-start\",\n    alignItems: \"center\",\n    height: \"32px\",\n\n    \"&[disabled], &:active\": {\n      outline: \"none\",\n    },\n\n    \"&:focus\": {\n      outline: \"none\",\n      background: theme.colors.atmo3,\n    },\n\n    \"&:hover\": {\n      background: theme.colors.atmo3,\n    },\n\n    \"&:focus-visible\": {\n      ...outlineStyles,\n    },\n\n    cursor: \"pointer\",\n  },\n  disabled: {\n    cursor: \"not-allowed\",\n    color: theme.colors.secondary_60,\n\n    \"&:focus\": {\n      background: \"none\",\n    },\n\n    \"&:hover\": {\n      background: \"none\",\n    },\n  },\n});\n"],"names":[],"mappings":";;;AAKO,MAAM,EAAE,eAAe,eAAe,cAAc,eAAe;AAAA,EACxE,MAAM;AAAA,IACJ,YAAY;AAAA,MACV,YAAY;AAAA,IACd;AAAA,EACF;AAAA,EACA,QAAQ,EAAE,QAAQ,GAAG,SAAS,OAAO;AAAA,EACrC,WAAW,EAAE,YAAY,GAAG,QAAQ,OAAO;AAAA,EAC3C,OAAO;AAAA,IACL,OAAO;AAAA,IACP,SAAS;AAAA,IACT,gBAAgB;AAAA,IAChB,YAAY;AAAA,IACZ,QAAQ;AAAA,IAER,yBAAyB;AAAA,MACvB,SAAS;AAAA,IACX;AAAA,IAEA,WAAW;AAAA,MACT,SAAS;AAAA,MACT,YAAY,MAAM,OAAO;AAAA,IAC3B;AAAA,IAEA,WAAW;AAAA,MACT,YAAY,MAAM,OAAO;AAAA,IAC3B;AAAA,IAEA,mBAAmB;AAAA,MACjB,GAAG;AAAA,IACL;AAAA,IAEA,QAAQ;AAAA,EACV;AAAA,EACA,UAAU;AAAA,IACR,QAAQ;AAAA,IACR,OAAO,MAAM,OAAO;AAAA,IAEpB,WAAW;AAAA,MACT,YAAY;AAAA,IACd;AAAA,IAEA,WAAW;AAAA,MACT,YAAY;AAAA,IACd;AAAA,EACF;AACF,CAAC;"}
+{"version":3,"file":"Accordion.styles.js","sources":["../../../src/Accordion/Accordion.styles.tsx"],"sourcesContent":["import { createClasses } from \"@hitachivantara/uikit-react-utils\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvAccordion\", {\n  root: {\n    \"& + root\": {\n      paddingTop: 8,\n    },\n  },\n  hidden: { height: 0, display: \"none\" },\n  container: { paddingTop: 8, height: \"auto\" },\n  label: {\n    width: \"100%\",\n    display: \"flex\",\n    justifyContent: \"flex-start\",\n    alignItems: \"center\",\n    height: \"32px\",\n  },\n  disabled: {},\n});\n"],"names":[],"mappings":";AAEO,MAAM,EAAE,eAAe,eAAe,cAAc,eAAe;AAAA,EACxE,MAAM;AAAA,IACJ,YAAY;AAAA,MACV,YAAY;AAAA,IACd;AAAA,EACF;AAAA,EACA,QAAQ,EAAE,QAAQ,GAAG,SAAS,OAAO;AAAA,EACrC,WAAW,EAAE,YAAY,GAAG,QAAQ,OAAO;AAAA,EAC3C,OAAO;AAAA,IACL,OAAO;AAAA,IACP,SAAS;AAAA,IACT,gBAAgB;AAAA,IAChB,YAAY;AAAA,IACZ,QAAQ;AAAA,EACV;AAAA,EACA,UAAU,CAAC;AACb,CAAC;"}

package/dist/esm/ActionsGeneric/ActionsGeneric.styles.js

@@ -1,15 +1,11 @@
 import { createClasses } from "@hitachivantara/uikit-react-utils";
 import { theme } from "@hitachivantara/uikit-styles";
 const { staticClasses, useClasses } = createClasses("HvActionsGeneric", {
-  root: {},
-  button: {
-    "&:not(:last-child)": {
-      marginRight: theme.space.xs
-    },
-    "&:hover": {
-      backgroundColor: theme.alpha("base_light", 0.3)
-    }
+  root: {
+    display: "flex",
+    gap: theme.space.xs
   },
+  button: {},
   actionContainer: { display: "flex", alignItems: "center", float: "right" },
   dropDownMenu: {},
   dropDownMenuButton: {},

package/dist/esm/ActionsGeneric/ActionsGeneric.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"ActionsGeneric.styles.js","sources":["../../../src/ActionsGeneric/ActionsGeneric.styles.tsx"],"sourcesContent":["import { createClasses } from \"@hitachivantara/uikit-react-utils\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvActionsGeneric\", {\n  root: {},\n  button: {\n    \"&:not(:last-child)\": {\n      marginRight: theme.space.xs,\n    },\n    \"&:hover\": {\n      backgroundColor: theme.alpha(\"base_light\", 0.3),\n    },\n  },\n  actionContainer: { display: \"flex\", alignItems: \"center\", float: \"right\" },\n  dropDownMenu: {},\n  dropDownMenuButton: {},\n  dropDownMenuButtonSelected: {},\n});\n"],"names":[],"mappings":";;AAGO,MAAM,EAAE,eAAe,eAAe,cAAc,oBAAoB;AAAA,EAC7E,MAAM,CAAC;AAAA,EACP,QAAQ;AAAA,IACN,sBAAsB;AAAA,MACpB,aAAa,MAAM,MAAM;AAAA,IAC3B;AAAA,IACA,WAAW;AAAA,MACT,iBAAiB,MAAM,MAAM,cAAc,GAAG;AAAA,IAChD;AAAA,EACF;AAAA,EACA,iBAAiB,EAAE,SAAS,QAAQ,YAAY,UAAU,OAAO,QAAQ;AAAA,EACzE,cAAc,CAAC;AAAA,EACf,oBAAoB,CAAC;AAAA,EACrB,4BAA4B,CAAC;AAC/B,CAAC;"}
+{"version":3,"file":"ActionsGeneric.styles.js","sources":["../../../src/ActionsGeneric/ActionsGeneric.styles.tsx"],"sourcesContent":["import { createClasses } from \"@hitachivantara/uikit-react-utils\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvActionsGeneric\", {\n  root: {\n    display: \"flex\",\n    gap: theme.space.xs,\n  },\n  button: {},\n  actionContainer: { display: \"flex\", alignItems: \"center\", float: \"right\" },\n  dropDownMenu: {},\n  dropDownMenuButton: {},\n  dropDownMenuButtonSelected: {},\n});\n"],"names":[],"mappings":";;AAGO,MAAM,EAAE,eAAe,eAAe,cAAc,oBAAoB;AAAA,EAC7E,MAAM;AAAA,IACJ,SAAS;AAAA,IACT,KAAK,MAAM,MAAM;AAAA,EACnB;AAAA,EACA,QAAQ,CAAC;AAAA,EACT,iBAAiB,EAAE,SAAS,QAAQ,YAAY,UAAU,OAAO,QAAQ;AAAA,EACzE,cAAc,CAAC;AAAA,EACf,oBAAoB,CAAC;AAAA,EACrB,4BAA4B,CAAC;AAC/B,CAAC;"}

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

@@ -25,7 +25,6 @@ const HvActionContainer = (props) => {
         variant: "semantic",
         "aria-label": "Close",
         onClick: onClose,
-        tabIndex: 0,
         ...others,
         children: /* @__PURE__ */ jsx(Close, { iconSize: "XS", className: classes.iconContainer, color: "base2" })
       }

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

@@ -1 +1 @@
-{"version":3,"file":"ActionContainer.js","sources":["../../../../../src/Banner/BannerContent/ActionContainer/ActionContainer.tsx"],"sourcesContent":["import { Close } from \"@hitachivantara/uikit-react-icons\";\nimport { type ExtractNames } from \"@hitachivantara/uikit-react-utils\";\n\nimport {\n  HvActionsGeneric,\n  HvActionsGenericProps,\n} from \"../../../ActionsGeneric\";\nimport { HvButton } from \"../../../Button\";\nimport { HvBaseProps } from \"../../../types/generic\";\nimport { staticClasses, useClasses } from \"./ActionContainer.styles\";\n\nexport { staticClasses as actionContainerClasses };\n\nexport type HvActionContainerClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvActionContainerProps\n  extends HvBaseProps<HTMLButtonElement>,\n    Pick<Partial<HvActionsGenericProps>, \"onAction\"> {\n  /** Function called when clicking on the close button. */\n  onClose?: (event: React.MouseEvent<HTMLButtonElement>) => void;\n  /** Actions to display. */\n  action?: HvActionsGenericProps[\"actions\"]; // TODO - rename to actions in v6\n  /**\n   * The callback function called when an action is triggered, receiving `action` as parameter.\n   *\n   * @deprecated Use `onAction` instead.\n   * */\n  actionCallback?: HvActionsGenericProps[\"actionsCallback\"];\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvActionContainerClasses;\n}\n\nexport const HvActionContainer = (props: HvActionContainerProps) => {\n  const {\n    id,\n    classes: classesProp,\n    onClose,\n    action,\n    actionCallback, // TODO - remove in v6\n    onAction,\n    ...others\n  } = props;\n  const { classes } = useClasses(classesProp);\n  return (\n    <div className={classes.actionContainer}>\n      <HvButton\n        icon\n        className={classes.closeAction}\n        variant=\"semantic\"\n        aria-label=\"Close\"\n        onClick={onClose}\n        tabIndex={0}\n        {...others}\n      >\n        <Close iconSize=\"XS\" className={classes.iconContainer} color=\"base2\" />\n      </HvButton>\n      {action && (\n        <div className={classes.actionsInnerContainer}>\n          <HvActionsGeneric\n            id={id}\n            variant=\"semantic\"\n            actions={action}\n            actionsCallback={actionCallback}\n            onAction={onAction}\n          />\n        </div>\n      )}\n    </div>\n  );\n};\n"],"names":[],"mappings":";;;;;;AAgCa,MAAA,oBAAoB,CAAC,UAAkC;AAC5D,QAAA;AAAA,IACJ;AAAA,IACA,SAAS;AAAA,IACT;AAAA,IACA;AAAA,IACA;AAAA;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EACD,IAAA;AACJ,QAAM,EAAE,QAAA,IAAY,WAAW,WAAW;AAC1C,SACG,qBAAA,OAAA,EAAI,WAAW,QAAQ,iBACtB,UAAA;AAAA,IAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,MAAI;AAAA,QACJ,WAAW,QAAQ;AAAA,QACnB,SAAQ;AAAA,QACR,cAAW;AAAA,QACX,SAAS;AAAA,QACT,UAAU;AAAA,QACT,GAAG;AAAA,QAEJ,UAAA,oBAAC,SAAM,UAAS,MAAK,WAAW,QAAQ,eAAe,OAAM,QAAQ,CAAA;AAAA,MAAA;AAAA,IACvE;AAAA,IACC,UACC,oBAAC,OAAI,EAAA,WAAW,QAAQ,uBACtB,UAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,SAAQ;AAAA,QACR,SAAS;AAAA,QACT,iBAAiB;AAAA,QACjB;AAAA,MAAA;AAAA,IAAA,GAEJ;AAAA,EAEJ,EAAA,CAAA;AAEJ;"}
+{"version":3,"file":"ActionContainer.js","sources":["../../../../../src/Banner/BannerContent/ActionContainer/ActionContainer.tsx"],"sourcesContent":["import { Close } from \"@hitachivantara/uikit-react-icons\";\nimport { type ExtractNames } from \"@hitachivantara/uikit-react-utils\";\n\nimport {\n  HvActionsGeneric,\n  HvActionsGenericProps,\n} from \"../../../ActionsGeneric\";\nimport { HvButton } from \"../../../Button\";\nimport { HvBaseProps } from \"../../../types/generic\";\nimport { staticClasses, useClasses } from \"./ActionContainer.styles\";\n\nexport { staticClasses as actionContainerClasses };\n\nexport type HvActionContainerClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvActionContainerProps\n  extends HvBaseProps<HTMLButtonElement>,\n    Pick<Partial<HvActionsGenericProps>, \"onAction\"> {\n  /** Function called when clicking on the close button. */\n  onClose?: (event: React.MouseEvent<HTMLButtonElement>) => void;\n  /** Actions to display. */\n  action?: HvActionsGenericProps[\"actions\"]; // TODO - rename to actions in v6\n  /**\n   * The callback function called when an action is triggered, receiving `action` as parameter.\n   *\n   * @deprecated Use `onAction` instead.\n   * */\n  actionCallback?: HvActionsGenericProps[\"actionsCallback\"];\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvActionContainerClasses;\n}\n\nexport const HvActionContainer = (props: HvActionContainerProps) => {\n  const {\n    id,\n    classes: classesProp,\n    onClose,\n    action,\n    actionCallback, // TODO - remove in v6\n    onAction,\n    ...others\n  } = props;\n  const { classes } = useClasses(classesProp);\n  return (\n    <div className={classes.actionContainer}>\n      <HvButton\n        icon\n        className={classes.closeAction}\n        variant=\"semantic\"\n        aria-label=\"Close\"\n        onClick={onClose}\n        {...others}\n      >\n        <Close iconSize=\"XS\" className={classes.iconContainer} color=\"base2\" />\n      </HvButton>\n      {action && (\n        <div className={classes.actionsInnerContainer}>\n          <HvActionsGeneric\n            id={id}\n            variant=\"semantic\"\n            actions={action}\n            actionsCallback={actionCallback}\n            onAction={onAction}\n          />\n        </div>\n      )}\n    </div>\n  );\n};\n"],"names":[],"mappings":";;;;;;AAgCa,MAAA,oBAAoB,CAAC,UAAkC;AAC5D,QAAA;AAAA,IACJ;AAAA,IACA,SAAS;AAAA,IACT;AAAA,IACA;AAAA,IACA;AAAA;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EACD,IAAA;AACJ,QAAM,EAAE,QAAA,IAAY,WAAW,WAAW;AAC1C,SACG,qBAAA,OAAA,EAAI,WAAW,QAAQ,iBACtB,UAAA;AAAA,IAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,MAAI;AAAA,QACJ,WAAW,QAAQ;AAAA,QACnB,SAAQ;AAAA,QACR,cAAW;AAAA,QACX,SAAS;AAAA,QACR,GAAG;AAAA,QAEJ,UAAA,oBAAC,SAAM,UAAS,MAAK,WAAW,QAAQ,eAAe,OAAM,QAAQ,CAAA;AAAA,MAAA;AAAA,IACvE;AAAA,IACC,UACC,oBAAC,OAAI,EAAA,WAAW,QAAQ,uBACtB,UAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,SAAQ;AAAA,QACR,SAAS;AAAA,QACT,iBAAiB;AAAA,QACjB;AAAA,MAAA;AAAA,IAAA,GAEJ;AAAA,EAEJ,EAAA,CAAA;AAEJ;"}

package/dist/esm/BaseDropdown/BaseDropdown.js

@@ -9,6 +9,7 @@ import { useTheme, useDefaultProps } from "@hitachivantara/uikit-react-utils";
 import { useControlled } from "../hooks/useControlled.js";
 import { useForkRef } from "../hooks/useForkRef.js";
 import { useUniqueId } from "../hooks/useUniqueId.js";
+import { getDocument } from "../utils/document.js";
 import { getFirstAndLastFocus } from "../utils/focusableElementFinder.js";
 import { isKey, isOneOfKeys } from "../utils/keyboardUtils.js";
 import { setId } from "../utils/setId.js";
@@ -140,6 +141,9 @@ const BaseDropdown = forwardRef((props, ref) => {
     ...headerControlArias
   }) : defaultHeaderElement;
   const containerComponent = (() => {
+    if (!getDocument()) {
+      return null;
+    }
     const handleContainerKeyDown = (event) => {
       if (isKey(event, "Esc")) {
         handleToggle(event);

package/dist/esm/BaseDropdown/BaseDropdown.js.map

@@ -1 +1 @@
-{"version":3,"file":"BaseDropdown.js","sources":["../../../src/BaseDropdown/BaseDropdown.tsx"],"sourcesContent":["import {\n  cloneElement,\n  forwardRef,\n  isValidElement,\n  useCallback,\n  useMemo,\n  useState,\n} from \"react\";\nimport { createPortal } from \"react-dom\";\nimport { PopperProps, usePopper } from \"react-popper\";\nimport ClickAwayListener, {\n  ClickAwayListenerProps,\n} from \"@mui/material/ClickAwayListener\";\nimport {\n  detectOverflow,\n  ModifierArguments,\n  Options,\n  Placement,\n} from \"@popperjs/core\";\nimport { DropDownXS, DropUpXS } from \"@hitachivantara/uikit-react-icons\";\nimport {\n  useDefaultProps,\n  useTheme,\n  type ExtractNames,\n} from \"@hitachivantara/uikit-react-utils\";\n\nimport { useControlled } from \"../hooks/useControlled\";\nimport { useForkRef } from \"../hooks/useForkRef\";\nimport { useUniqueId } from \"../hooks/useUniqueId\";\nimport { HvBaseProps } from \"../types/generic\";\nimport { HvTypography } from \"../Typography\";\nimport { getFirstAndLastFocus } from \"../utils/focusableElementFinder\";\nimport { isKey, isOneOfKeys } from \"../utils/keyboardUtils\";\nimport { setId } from \"../utils/setId\";\nimport { staticClasses, useClasses } from \"./BaseDropdown.styles\";\nimport BaseDropdownContext from \"./BaseDropdownContext\";\nimport { useBaseDropdownContext } from \"./BaseDropdownContext/BaseDropdownContext\";\n\nexport { staticClasses as baseDropdownClasses };\n\nexport type HvBaseDropdownClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvBaseDropdownProps\n  extends HvBaseProps<HTMLDivElement, \"onToggle\"> {\n  /**\n   * The role of the element that triggers the popup.\n   *\n   * Defaults to \"combobox\" if `component` and the default\n   * \"textbox\" header is used, undefined otherwise.\n   */\n  role?: string;\n  /**\n   * Header placeholder.\n   */\n  placeholder?: React.ReactNode;\n  /**\n   * If `true` the dropdown is disabled unable to be interacted, if `false` it is enabled.\n   */\n  disabled?: boolean;\n  /**\n   * If `true` the dropdown will be in read only mode, unable to be interacted.\n   */\n  readOnly?: boolean;\n  /**\n   * Indicates that user input is required on the form element.\n   */\n  required?: 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` 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   * An object containing props to be wired to the popper component.\n   */\n  popperProps?: Partial<PopperProps<any>>;\n  /**\n   * Placement of the dropdown.\n   */\n  placement?: \"left\" | \"right\";\n  /**\n   * Replacement for the header component.\n   */\n  component?: React.ReactNode;\n  /**\n   * Adornment to replace the default arrows.\n   */\n  adornment?: React.ReactNode;\n  /**\n   * When dropdown changes the expanded state.\n   */\n  onToggle?: (event: Event, open: boolean) => void;\n  /**\n   * When user click outside the open container.\n   */\n  onClickOutside?: (event: Event) => void;\n  /**\n   * Callback called when the dropdown is opened and ready,\n   * commonly used to set focus to the content.\n   */\n  onContainerCreation?: (container: HTMLElement | null) => void;\n  /**\n   * Attributes applied to the dropdown header element.\n   */\n  dropdownHeaderProps?: React.DetailedHTMLProps<\n    React.HTMLAttributes<HTMLDivElement>,\n    HTMLDivElement\n  >;\n  /**\n   * Pass a ref to the dropdown header element.\n   */\n  dropdownHeaderRef?: React.Ref<HTMLDivElement>;\n  /**\n   * A Jss Object used to override or extend the component styles applied.\n   */\n  classes?: HvBaseDropdownClasses;\n  /** @ignore */\n  ref?: React.Ref<HTMLDivElement>;\n}\n\nconst BaseDropdown = forwardRef<\n  HTMLDivElement,\n  Omit<\n    HvBaseDropdownProps,\n    \"popperProps\" | \"variableWidth\" | \"placement\" | \"onContainerCreation\"\n  >\n>((props, ref) => {\n  const {\n    id: idProp,\n    className,\n    classes: classesProp,\n    children,\n    role,\n    placeholder,\n    component,\n    adornment,\n    expanded,\n    dropdownHeaderProps,\n    defaultExpanded,\n    disabled,\n    readOnly,\n    required,\n    disablePortal,\n    \"aria-expanded\": ariaExpandedProp,\n    \"aria-label\": ariaLabelProp,\n    \"aria-labelledby\": ariaLabelledByProp,\n    dropdownHeaderRef: dropdownHeaderRefProp,\n    onToggle,\n    onClickOutside,\n    ...others\n  } = props;\n\n  const { classes, cx } = useClasses(classesProp);\n\n  const {\n    popperPlacement,\n    popper,\n    popperElement,\n    referenceElement,\n    setPopperElement,\n    setReferenceElement,\n  } = useBaseDropdownContext();\n\n  const { rootId } = useTheme();\n\n  const [isOpen, setIsOpen] = useControlled(expanded, Boolean(defaultExpanded));\n\n  const handleDropdownHeaderRefProp = useForkRef(\n    dropdownHeaderRefProp,\n    dropdownHeaderProps?.ref,\n  );\n  const handleDropdownHeaderRef = useForkRef(\n    setReferenceElement,\n    handleDropdownHeaderRefProp,\n  );\n\n  const ariaRole = role || (component == null ? \"combobox\" : undefined);\n\n  const ariaExpanded = ariaExpandedProp ?? (ariaRole ? !!isOpen : undefined);\n\n  const id = useUniqueId(idProp);\n  const containerId = setId(id, \"children-container\");\n\n  const headerControlArias = {\n    \"aria-required\": required ?? undefined,\n    \"aria-readonly\": readOnly ?? undefined,\n    \"aria-disabled\": disabled ?? undefined,\n\n    \"aria-expanded\": ariaExpanded,\n    \"aria-owns\": isOpen ? containerId : undefined,\n    \"aria-controls\": isOpen ? containerId : undefined,\n  } satisfies React.AriaAttributes;\n\n  const headerAriaLabels = {\n    \"aria-label\": ariaLabelProp,\n    \"aria-labelledby\": ariaLabelledByProp,\n  } satisfies React.AriaAttributes;\n\n  const extensionWidth = referenceElement\n    ? referenceElement?.offsetWidth\n    : \"inherit\";\n\n  const handleToggle = useCallback(\n    (event: any) => {\n      if (event && !isKey(event, \"Tab\")) {\n        event.preventDefault();\n      }\n\n      const notControlKey =\n        !!event?.code &&\n        !isOneOfKeys(event, [\"Tab\", \"Enter\", \"Esc\", \"ArrowDown\", \"Space\"]);\n\n      const ignoredCombinations =\n        (isKey(event, \"Esc\") && !isOpen) ||\n        (isKey(event, \"ArrowDown\") && isOpen) ||\n        (isKey(event, \"Tab\") && !isOpen);\n\n      if (disabled || notControlKey || ignoredCombinations) return;\n\n      const newOpen = !isOpen;\n\n      /* If about to close focus on the header component. */\n      setIsOpen(() => {\n        if (!newOpen) {\n          // Focus-ring won't be visible even if using the keyboard:\n          // https://github.com/WICG/focus-visible/issues/88\n          referenceElement?.focus({ preventScroll: true });\n        }\n\n        return newOpen;\n      });\n\n      onToggle?.(event, newOpen);\n    },\n    [isOpen, disabled, setIsOpen, onToggle, referenceElement],\n  );\n\n  const ExpanderComponent = isOpen ? DropUpXS : DropDownXS;\n\n  const defaultHeaderElement = (\n    <div\n      id={setId(id, \"header\")}\n      className={cx(classes.header, {\n        [classes.headerDisabled]: disabled,\n        [classes.headerReadOnly]: readOnly,\n        [classes.headerOpen]: isOpen,\n        [classes.headerOpenUp]: isOpen && popperPlacement?.includes(\"top\"),\n        [classes.headerOpenDown]: isOpen && popperPlacement?.includes(\"bottom\"),\n      })}\n      // TODO: review \"textbox\" role\n      role={ariaRole === \"combobox\" ? \"textbox\" : undefined}\n      {...headerAriaLabels}\n      style={disabled || readOnly ? { pointerEvents: \"none\" } : undefined}\n      // Removes the element from the navigation sequence for keyboard focus if disabled\n      tabIndex={disabled ? -1 : 0}\n      ref={handleDropdownHeaderRef}\n      {...dropdownHeaderProps}\n    >\n      <div\n        className={cx(classes.selection, {\n          [classes.selectionDisabled]: disabled,\n        })}\n      >\n        {placeholder && typeof placeholder === \"string\" ? (\n          <HvTypography noWrap className={classes.placeholder}>\n            {placeholder}\n          </HvTypography>\n        ) : (\n          placeholder\n        )}\n      </div>\n      <div className={classes.arrowContainer}>\n        {adornment || (\n          <ExpanderComponent\n            iconSize=\"XS\"\n            color={disabled ? \"secondary_60\" : undefined}\n            className={classes.arrow}\n          />\n        )}\n      </div>\n    </div>\n  );\n\n  const headerElement =\n    component && isValidElement(component)\n      ? cloneElement(component as React.ReactElement, {\n          ref: handleDropdownHeaderRef,\n          ...headerControlArias,\n        })\n      : defaultHeaderElement;\n\n  const containerComponent = (() => {\n    /**\n     *  Handle keyboard inside children container.\n     */\n    const handleContainerKeyDown: React.KeyboardEventHandler = (event) => {\n      if (isKey(event, \"Esc\")) {\n        handleToggle(event);\n      }\n      if (isKey(event, \"Tab\") && !event.shiftKey) {\n        const focusList = getFirstAndLastFocus(popperElement);\n        if (document.activeElement === focusList?.last) {\n          event.preventDefault();\n          focusList?.first?.focus();\n        }\n      }\n    };\n\n    const handleOutside: ClickAwayListenerProps[\"onClickAway\"] = (event) => {\n      const isButtonClick = referenceElement?.contains(event.target as any);\n      if (!isButtonClick) {\n        onClickOutside?.(event);\n        setIsOpen(false);\n        onToggle?.(event, false);\n      }\n    };\n\n    const container = (\n      <div\n        ref={setPopperElement}\n        className={classes.container}\n        style={popper?.styles.popper}\n        {...popper?.attributes.popper}\n      >\n        <ClickAwayListener onClickAway={handleOutside}>\n          {/* eslint-disable-next-line jsx-a11y/no-static-element-interactions */}\n          <div onKeyDown={handleContainerKeyDown}>\n            {popperPlacement?.includes(\"bottom\") && (\n              <div\n                style={{ width: extensionWidth }}\n                className={cx(classes.inputExtensionOpen, {\n                  [classes.inputExtensionLeftPosition]:\n                    popperPlacement.includes(\"end\"),\n                })}\n              />\n            )}\n            <div\n              // TODO: review in v6. `containerId` needs to be on the role element (`children` has it)\n              id={containerId}\n              className={cx(classes.panel, {\n                [classes.panelOpenedUp]: popperPlacement?.includes(\"top\"),\n                [classes.panelOpenedDown]: popperPlacement?.includes(\"bottom\"),\n              })}\n            >\n              {children}\n            </div>\n            {popperPlacement?.includes(\"top\") && (\n              <div\n                style={{ width: extensionWidth }}\n                className={cx(\n                  classes.inputExtensionOpen,\n                  classes.inputExtensionOpenShadow,\n                  {\n                    [classes.inputExtensionFloatRight]:\n                      popperPlacement.includes(\"end\"),\n                    [classes.inputExtensionFloatLeft]:\n                      popperPlacement.includes(\"start\"),\n                  },\n                )}\n              />\n            )}\n          </div>\n        </ClickAwayListener>\n      </div>\n    );\n\n    if (disablePortal) return container;\n\n    return createPortal(\n      container,\n      document.getElementById(rootId || \"\") || document.body,\n    );\n  })();\n\n  return (\n    <div className={classes.root}>\n      <div\n        ref={ref}\n        id={id}\n        className={cx(\n          classes.anchor,\n          { [classes.rootDisabled]: disabled },\n          className,\n        )}\n        {...(!readOnly && {\n          onKeyDown: handleToggle,\n          onClick: handleToggle,\n        })}\n        {...(ariaRole && {\n          role: ariaRole,\n          ...headerAriaLabels,\n          ...headerControlArias,\n        })}\n        // Removes the element from the navigation sequence for keyboard focus\n        tabIndex={-1}\n        {...others}\n      >\n        {headerElement}\n      </div>\n      {isOpen && containerComponent}\n    </div>\n  );\n});\n\nexport const HvBaseDropdown = forwardRef<HTMLDivElement, HvBaseDropdownProps>(\n  (props, ref) => {\n    const {\n      popperProps = {},\n      variableWidth,\n      placement: placementProp = \"right\",\n      onContainerCreation,\n      ...others\n    } = useDefaultProps(\"HvBaseDropdown\", props);\n\n    const placement: Placement = `bottom-${\n      placementProp === \"right\" ? \"start\" : \"end\"\n    }`;\n\n    const { modifiers: popperPropsModifiers = [], ...otherPopperProps } =\n      popperProps;\n\n    const [referenceElement, setReferenceElement] =\n      useState<HTMLElement | null>(null);\n    const [popperElement, setPopperElement] = useState<HTMLElement | null>(\n      null,\n    );\n    const [popperMaxSize, setPopperMaxSize] = useState<{\n      width?: number;\n      height?: number;\n    }>({});\n\n    const onFirstUpdate = useCallback(() => {\n      onContainerCreation?.(popperElement);\n    }, [onContainerCreation, popperElement]);\n\n    const applyMaxSizeCalculator = useCallback(\n      ({ state }: ModifierArguments<Options>) => {\n        // The `maxSize` modifier provides this data\n        const { width, height } = state.modifiersData.maxSize;\n        if (\n          width !== popperMaxSize?.width ||\n          height !== popperMaxSize?.height\n        ) {\n          setPopperMaxSize({ width, height });\n        }\n\n        state.styles.popper = {\n          ...state.styles.popper,\n          maxWidth: `${width}px`,\n          maxHeight: `${height}px`,\n        };\n      },\n      [popperMaxSize],\n    );\n\n    const widthCalculator = useCallback(\n      ({ state }: ModifierArguments<Options>) => {\n        state.styles.popper.width = `${state.rects.reference.width}px`;\n      },\n      [],\n    );\n\n    const widthCalculatorEffect = useCallback(\n      ({ state }: ModifierArguments<Options>) => {\n        state.elements.popper.style.width = `${\n          (state.elements.reference as any).offsetWidth\n        }px`;\n      },\n      [],\n    );\n\n    const maxSizeCalculator = useCallback(\n      ({ state, name, options }: ModifierArguments<Options>) => {\n        const overflow = detectOverflow(state, options);\n\n        const x = state.modifiersData.preventOverflow?.x || 0;\n        const y = state.modifiersData.preventOverflow?.y || 0;\n\n        const popperWidth = state.rects.popper.width;\n        const popperHeight = state.rects.popper.height;\n\n        const basePlacement = state.placement.split(\"-\")[0];\n\n        const widthProp = basePlacement === \"left\" ? \"left\" : \"right\";\n        const heightProp = basePlacement === \"top\" ? \"top\" : \"bottom\";\n\n        state.modifiersData[name] = {\n          width: popperWidth - overflow[widthProp] - x,\n          height: popperHeight - overflow[heightProp] - y,\n        };\n      },\n      [],\n    );\n\n    const modifiers = useMemo<Options[\"modifiers\"]>(\n      () => [\n        {\n          name: \"variableWidth\",\n          enabled: !variableWidth,\n          phase: \"beforeWrite\",\n          requires: [\"computeStyles\"],\n          fn: widthCalculator,\n          effect: widthCalculatorEffect,\n        },\n        {\n          name: \"maxSize\",\n          enabled: true,\n          phase: \"main\",\n          requiresIfExists: [\"offset\", \"preventOverflow\", \"flip\"],\n          fn: maxSizeCalculator,\n        },\n        {\n          name: \"applyMaxSize\",\n          enabled: true,\n          phase: \"beforeWrite\",\n          requires: [\"maxSize\"],\n          fn: applyMaxSizeCalculator,\n        },\n        ...popperPropsModifiers,\n      ],\n      [\n        maxSizeCalculator,\n        applyMaxSizeCalculator,\n        popperPropsModifiers,\n        variableWidth,\n        widthCalculator,\n        widthCalculatorEffect,\n      ],\n    );\n\n    const popper = usePopper(referenceElement, popperElement, {\n      placement,\n      modifiers,\n      onFirstUpdate,\n      ...otherPopperProps,\n    });\n\n    const value = useMemo(\n      () => ({\n        ...popperMaxSize,\n        popperPlacement:\n          popper?.attributes.popper?.[\"data-popper-placement\"] ?? \"bottom\",\n        popper,\n        popperElement,\n        setPopperElement,\n        referenceElement,\n        setReferenceElement,\n      }),\n      [popper, popperElement, popperMaxSize, referenceElement],\n    );\n\n    return (\n      <BaseDropdownContext.Provider value={value}>\n        <BaseDropdown ref={ref} {...others} />\n      </BaseDropdownContext.Provider>\n    );\n  },\n);\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"BaseDropdown.js","sources":["../../../src/BaseDropdown/BaseDropdown.tsx"],"sourcesContent":["import {\n  cloneElement,\n  forwardRef,\n  isValidElement,\n  useCallback,\n  useMemo,\n  useState,\n} from \"react\";\nimport { createPortal } from \"react-dom\";\nimport { PopperProps, usePopper } from \"react-popper\";\nimport ClickAwayListener, {\n  ClickAwayListenerProps,\n} from \"@mui/material/ClickAwayListener\";\nimport {\n  detectOverflow,\n  ModifierArguments,\n  Options,\n  Placement,\n} from \"@popperjs/core\";\nimport { DropDownXS, DropUpXS } from \"@hitachivantara/uikit-react-icons\";\nimport {\n  useDefaultProps,\n  useTheme,\n  type ExtractNames,\n} from \"@hitachivantara/uikit-react-utils\";\n\nimport { useControlled } from \"../hooks/useControlled\";\nimport { useForkRef } from \"../hooks/useForkRef\";\nimport { useUniqueId } from \"../hooks/useUniqueId\";\nimport { HvBaseProps } from \"../types/generic\";\nimport { HvTypography } from \"../Typography\";\nimport { getDocument } from \"../utils/document\";\nimport { getFirstAndLastFocus } from \"../utils/focusableElementFinder\";\nimport { isKey, isOneOfKeys } from \"../utils/keyboardUtils\";\nimport { setId } from \"../utils/setId\";\nimport { staticClasses, useClasses } from \"./BaseDropdown.styles\";\nimport BaseDropdownContext from \"./BaseDropdownContext\";\nimport { useBaseDropdownContext } from \"./BaseDropdownContext/BaseDropdownContext\";\n\nexport { staticClasses as baseDropdownClasses };\n\nexport type HvBaseDropdownClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvBaseDropdownProps\n  extends HvBaseProps<HTMLDivElement, \"onToggle\"> {\n  /**\n   * The role of the element that triggers the popup.\n   *\n   * Defaults to \"combobox\" if `component` and the default\n   * \"textbox\" header is used, undefined otherwise.\n   */\n  role?: string;\n  /**\n   * Header placeholder.\n   */\n  placeholder?: React.ReactNode;\n  /**\n   * If `true` the dropdown is disabled unable to be interacted, if `false` it is enabled.\n   */\n  disabled?: boolean;\n  /**\n   * If `true` the dropdown will be in read only mode, unable to be interacted.\n   */\n  readOnly?: boolean;\n  /**\n   * Indicates that user input is required on the form element.\n   */\n  required?: 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` 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   * An object containing props to be wired to the popper component.\n   */\n  popperProps?: Partial<PopperProps<any>>;\n  /**\n   * Placement of the dropdown.\n   */\n  placement?: \"left\" | \"right\";\n  /**\n   * Replacement for the header component.\n   */\n  component?: React.ReactNode;\n  /**\n   * Adornment to replace the default arrows.\n   */\n  adornment?: React.ReactNode;\n  /**\n   * When dropdown changes the expanded state.\n   */\n  onToggle?: (event: Event, open: boolean) => void;\n  /**\n   * When user click outside the open container.\n   */\n  onClickOutside?: (event: Event) => void;\n  /**\n   * Callback called when the dropdown is opened and ready,\n   * commonly used to set focus to the content.\n   */\n  onContainerCreation?: (container: HTMLElement | null) => void;\n  /**\n   * Attributes applied to the dropdown header element.\n   */\n  dropdownHeaderProps?: React.DetailedHTMLProps<\n    React.HTMLAttributes<HTMLDivElement>,\n    HTMLDivElement\n  >;\n  /**\n   * Pass a ref to the dropdown header element.\n   */\n  dropdownHeaderRef?: React.Ref<HTMLDivElement>;\n  /**\n   * A Jss Object used to override or extend the component styles applied.\n   */\n  classes?: HvBaseDropdownClasses;\n  /** @ignore */\n  ref?: React.Ref<HTMLDivElement>;\n}\n\nconst BaseDropdown = forwardRef<\n  HTMLDivElement,\n  Omit<\n    HvBaseDropdownProps,\n    \"popperProps\" | \"variableWidth\" | \"placement\" | \"onContainerCreation\"\n  >\n>((props, ref) => {\n  const {\n    id: idProp,\n    className,\n    classes: classesProp,\n    children,\n    role,\n    placeholder,\n    component,\n    adornment,\n    expanded,\n    dropdownHeaderProps,\n    defaultExpanded,\n    disabled,\n    readOnly,\n    required,\n    disablePortal,\n    \"aria-expanded\": ariaExpandedProp,\n    \"aria-label\": ariaLabelProp,\n    \"aria-labelledby\": ariaLabelledByProp,\n    dropdownHeaderRef: dropdownHeaderRefProp,\n    onToggle,\n    onClickOutside,\n    ...others\n  } = props;\n\n  const { classes, cx } = useClasses(classesProp);\n\n  const {\n    popperPlacement,\n    popper,\n    popperElement,\n    referenceElement,\n    setPopperElement,\n    setReferenceElement,\n  } = useBaseDropdownContext();\n\n  const { rootId } = useTheme();\n\n  const [isOpen, setIsOpen] = useControlled(expanded, Boolean(defaultExpanded));\n\n  const handleDropdownHeaderRefProp = useForkRef(\n    dropdownHeaderRefProp,\n    dropdownHeaderProps?.ref,\n  );\n  const handleDropdownHeaderRef = useForkRef(\n    setReferenceElement,\n    handleDropdownHeaderRefProp,\n  );\n\n  const ariaRole = role || (component == null ? \"combobox\" : undefined);\n\n  const ariaExpanded = ariaExpandedProp ?? (ariaRole ? !!isOpen : undefined);\n\n  const id = useUniqueId(idProp);\n  const containerId = setId(id, \"children-container\");\n\n  const headerControlArias = {\n    \"aria-required\": required ?? undefined,\n    \"aria-readonly\": readOnly ?? undefined,\n    \"aria-disabled\": disabled ?? undefined,\n\n    \"aria-expanded\": ariaExpanded,\n    \"aria-owns\": isOpen ? containerId : undefined,\n    \"aria-controls\": isOpen ? containerId : undefined,\n  } satisfies React.AriaAttributes;\n\n  const headerAriaLabels = {\n    \"aria-label\": ariaLabelProp,\n    \"aria-labelledby\": ariaLabelledByProp,\n  } satisfies React.AriaAttributes;\n\n  const extensionWidth = referenceElement\n    ? referenceElement?.offsetWidth\n    : \"inherit\";\n\n  const handleToggle = useCallback(\n    (event: any) => {\n      if (event && !isKey(event, \"Tab\")) {\n        event.preventDefault();\n      }\n\n      const notControlKey =\n        !!event?.code &&\n        !isOneOfKeys(event, [\"Tab\", \"Enter\", \"Esc\", \"ArrowDown\", \"Space\"]);\n\n      const ignoredCombinations =\n        (isKey(event, \"Esc\") && !isOpen) ||\n        (isKey(event, \"ArrowDown\") && isOpen) ||\n        (isKey(event, \"Tab\") && !isOpen);\n\n      if (disabled || notControlKey || ignoredCombinations) return;\n\n      const newOpen = !isOpen;\n\n      /* If about to close focus on the header component. */\n      setIsOpen(() => {\n        if (!newOpen) {\n          // Focus-ring won't be visible even if using the keyboard:\n          // https://github.com/WICG/focus-visible/issues/88\n          referenceElement?.focus({ preventScroll: true });\n        }\n\n        return newOpen;\n      });\n\n      onToggle?.(event, newOpen);\n    },\n    [isOpen, disabled, setIsOpen, onToggle, referenceElement],\n  );\n\n  const ExpanderComponent = isOpen ? DropUpXS : DropDownXS;\n\n  const defaultHeaderElement = (\n    <div\n      id={setId(id, \"header\")}\n      className={cx(classes.header, {\n        [classes.headerDisabled]: disabled,\n        [classes.headerReadOnly]: readOnly,\n        [classes.headerOpen]: isOpen,\n        [classes.headerOpenUp]: isOpen && popperPlacement?.includes(\"top\"),\n        [classes.headerOpenDown]: isOpen && popperPlacement?.includes(\"bottom\"),\n      })}\n      // TODO: review \"textbox\" role\n      role={ariaRole === \"combobox\" ? \"textbox\" : undefined}\n      {...headerAriaLabels}\n      style={disabled || readOnly ? { pointerEvents: \"none\" } : undefined}\n      // Removes the element from the navigation sequence for keyboard focus if disabled\n      tabIndex={disabled ? -1 : 0}\n      ref={handleDropdownHeaderRef}\n      {...dropdownHeaderProps}\n    >\n      <div\n        className={cx(classes.selection, {\n          [classes.selectionDisabled]: disabled,\n        })}\n      >\n        {placeholder && typeof placeholder === \"string\" ? (\n          <HvTypography noWrap className={classes.placeholder}>\n            {placeholder}\n          </HvTypography>\n        ) : (\n          placeholder\n        )}\n      </div>\n      <div className={classes.arrowContainer}>\n        {adornment || (\n          <ExpanderComponent\n            iconSize=\"XS\"\n            color={disabled ? \"secondary_60\" : undefined}\n            className={classes.arrow}\n          />\n        )}\n      </div>\n    </div>\n  );\n\n  const headerElement =\n    component && isValidElement(component)\n      ? cloneElement(component as React.ReactElement, {\n          ref: handleDropdownHeaderRef,\n          ...headerControlArias,\n        })\n      : defaultHeaderElement;\n\n  const containerComponent = (() => {\n    if (!getDocument()) {\n      return null;\n    }\n\n    /**\n     *  Handle keyboard inside children container.\n     */\n    const handleContainerKeyDown: React.KeyboardEventHandler = (event) => {\n      if (isKey(event, \"Esc\")) {\n        handleToggle(event);\n      }\n      if (isKey(event, \"Tab\") && !event.shiftKey) {\n        const focusList = getFirstAndLastFocus(popperElement);\n        if (document.activeElement === focusList?.last) {\n          event.preventDefault();\n          focusList?.first?.focus();\n        }\n      }\n    };\n\n    const handleOutside: ClickAwayListenerProps[\"onClickAway\"] = (event) => {\n      const isButtonClick = referenceElement?.contains(event.target as any);\n      if (!isButtonClick) {\n        onClickOutside?.(event);\n        setIsOpen(false);\n        onToggle?.(event, false);\n      }\n    };\n\n    const container = (\n      <div\n        ref={setPopperElement}\n        className={classes.container}\n        style={popper?.styles.popper}\n        {...popper?.attributes.popper}\n      >\n        <ClickAwayListener onClickAway={handleOutside}>\n          {/* eslint-disable-next-line jsx-a11y/no-static-element-interactions */}\n          <div onKeyDown={handleContainerKeyDown}>\n            {popperPlacement?.includes(\"bottom\") && (\n              <div\n                style={{ width: extensionWidth }}\n                className={cx(classes.inputExtensionOpen, {\n                  [classes.inputExtensionLeftPosition]:\n                    popperPlacement.includes(\"end\"),\n                })}\n              />\n            )}\n            <div\n              // TODO: review in v6. `containerId` needs to be on the role element (`children` has it)\n              id={containerId}\n              className={cx(classes.panel, {\n                [classes.panelOpenedUp]: popperPlacement?.includes(\"top\"),\n                [classes.panelOpenedDown]: popperPlacement?.includes(\"bottom\"),\n              })}\n            >\n              {children}\n            </div>\n            {popperPlacement?.includes(\"top\") && (\n              <div\n                style={{ width: extensionWidth }}\n                className={cx(\n                  classes.inputExtensionOpen,\n                  classes.inputExtensionOpenShadow,\n                  {\n                    [classes.inputExtensionFloatRight]:\n                      popperPlacement.includes(\"end\"),\n                    [classes.inputExtensionFloatLeft]:\n                      popperPlacement.includes(\"start\"),\n                  },\n                )}\n              />\n            )}\n          </div>\n        </ClickAwayListener>\n      </div>\n    );\n\n    if (disablePortal) return container;\n\n    return createPortal(\n      container,\n      document.getElementById(rootId || \"\") || document.body,\n    );\n  })();\n\n  return (\n    <div className={classes.root}>\n      <div\n        ref={ref}\n        id={id}\n        className={cx(\n          classes.anchor,\n          { [classes.rootDisabled]: disabled },\n          className,\n        )}\n        {...(!readOnly && {\n          onKeyDown: handleToggle,\n          onClick: handleToggle,\n        })}\n        {...(ariaRole && {\n          role: ariaRole,\n          ...headerAriaLabels,\n          ...headerControlArias,\n        })}\n        // Removes the element from the navigation sequence for keyboard focus\n        tabIndex={-1}\n        {...others}\n      >\n        {headerElement}\n      </div>\n      {isOpen && containerComponent}\n    </div>\n  );\n});\n\nexport const HvBaseDropdown = forwardRef<HTMLDivElement, HvBaseDropdownProps>(\n  (props, ref) => {\n    const {\n      popperProps = {},\n      variableWidth,\n      placement: placementProp = \"right\",\n      onContainerCreation,\n      ...others\n    } = useDefaultProps(\"HvBaseDropdown\", props);\n\n    const placement: Placement = `bottom-${\n      placementProp === \"right\" ? \"start\" : \"end\"\n    }`;\n\n    const { modifiers: popperPropsModifiers = [], ...otherPopperProps } =\n      popperProps;\n\n    const [referenceElement, setReferenceElement] =\n      useState<HTMLElement | null>(null);\n    const [popperElement, setPopperElement] = useState<HTMLElement | null>(\n      null,\n    );\n    const [popperMaxSize, setPopperMaxSize] = useState<{\n      width?: number;\n      height?: number;\n    }>({});\n\n    const onFirstUpdate = useCallback(() => {\n      onContainerCreation?.(popperElement);\n    }, [onContainerCreation, popperElement]);\n\n    const applyMaxSizeCalculator = useCallback(\n      ({ state }: ModifierArguments<Options>) => {\n        // The `maxSize` modifier provides this data\n        const { width, height } = state.modifiersData.maxSize;\n        if (\n          width !== popperMaxSize?.width ||\n          height !== popperMaxSize?.height\n        ) {\n          setPopperMaxSize({ width, height });\n        }\n\n        state.styles.popper = {\n          ...state.styles.popper,\n          maxWidth: `${width}px`,\n          maxHeight: `${height}px`,\n        };\n      },\n      [popperMaxSize],\n    );\n\n    const widthCalculator = useCallback(\n      ({ state }: ModifierArguments<Options>) => {\n        state.styles.popper.width = `${state.rects.reference.width}px`;\n      },\n      [],\n    );\n\n    const widthCalculatorEffect = useCallback(\n      ({ state }: ModifierArguments<Options>) => {\n        state.elements.popper.style.width = `${\n          (state.elements.reference as any).offsetWidth\n        }px`;\n      },\n      [],\n    );\n\n    const maxSizeCalculator = useCallback(\n      ({ state, name, options }: ModifierArguments<Options>) => {\n        const overflow = detectOverflow(state, options);\n\n        const x = state.modifiersData.preventOverflow?.x || 0;\n        const y = state.modifiersData.preventOverflow?.y || 0;\n\n        const popperWidth = state.rects.popper.width;\n        const popperHeight = state.rects.popper.height;\n\n        const basePlacement = state.placement.split(\"-\")[0];\n\n        const widthProp = basePlacement === \"left\" ? \"left\" : \"right\";\n        const heightProp = basePlacement === \"top\" ? \"top\" : \"bottom\";\n\n        state.modifiersData[name] = {\n          width: popperWidth - overflow[widthProp] - x,\n          height: popperHeight - overflow[heightProp] - y,\n        };\n      },\n      [],\n    );\n\n    const modifiers = useMemo<Options[\"modifiers\"]>(\n      () => [\n        {\n          name: \"variableWidth\",\n          enabled: !variableWidth,\n          phase: \"beforeWrite\",\n          requires: [\"computeStyles\"],\n          fn: widthCalculator,\n          effect: widthCalculatorEffect,\n        },\n        {\n          name: \"maxSize\",\n          enabled: true,\n          phase: \"main\",\n          requiresIfExists: [\"offset\", \"preventOverflow\", \"flip\"],\n          fn: maxSizeCalculator,\n        },\n        {\n          name: \"applyMaxSize\",\n          enabled: true,\n          phase: \"beforeWrite\",\n          requires: [\"maxSize\"],\n          fn: applyMaxSizeCalculator,\n        },\n        ...popperPropsModifiers,\n      ],\n      [\n        maxSizeCalculator,\n        applyMaxSizeCalculator,\n        popperPropsModifiers,\n        variableWidth,\n        widthCalculator,\n        widthCalculatorEffect,\n      ],\n    );\n\n    const popper = usePopper(referenceElement, popperElement, {\n      placement,\n      modifiers,\n      onFirstUpdate,\n      ...otherPopperProps,\n    });\n\n    const value = useMemo(\n      () => ({\n        ...popperMaxSize,\n        popperPlacement:\n          popper?.attributes.popper?.[\"data-popper-placement\"] ?? \"bottom\",\n        popper,\n        popperElement,\n        setPopperElement,\n        referenceElement,\n        setReferenceElement,\n      }),\n      [popper, popperElement, popperMaxSize, referenceElement],\n    );\n\n    return (\n      <BaseDropdownContext.Provider value={value}>\n        <BaseDropdown ref={ref} {...others} />\n      </BaseDropdownContext.Provider>\n    );\n  },\n);\n"],"names":[],"mappings":"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"}

package/dist/esm/BaseDropdown/BaseDropdownContext/BaseDropdownContext.js

@@ -5,8 +5,7 @@ const BaseDropdownContext = createContext({
 });
 BaseDropdownContext.displayName = "BaseDropdownContext";
 const useBaseDropdownContext = () => useContext(BaseDropdownContext);
-const BaseDropdownContext$1 = BaseDropdownContext;
 export {
-  BaseDropdownContext$1 as default,
+  BaseDropdownContext as default,
   useBaseDropdownContext
 };

package/dist/esm/BaseDropdown/BaseDropdownContext/BaseDropdownContext.js.map

@@ -1 +1 @@
-{"version":3,"file":"BaseDropdownContext.js","sources":["../../../../src/BaseDropdown/BaseDropdownContext/BaseDropdownContext.tsx"],"sourcesContent":["import { createContext, Dispatch, SetStateAction, useContext } from \"react\";\nimport { usePopper } from \"react-popper\";\n\ninterface BaseDropdownValue {\n  width?: number;\n  height?: number;\n  popperPlacement?: string;\n  popper?: ReturnType<typeof usePopper>;\n  referenceElement: HTMLElement | null;\n  setReferenceElement?: Dispatch<SetStateAction<HTMLElement | null>>;\n  popperElement: HTMLElement | null;\n  setPopperElement?: Dispatch<SetStateAction<HTMLElement | null>>;\n}\n\nconst BaseDropdownContext = createContext<BaseDropdownValue>({\n  referenceElement: null,\n  popperElement: null,\n});\n\nBaseDropdownContext.displayName = \"BaseDropdownContext\";\n\nexport const useBaseDropdownContext = () => useContext(BaseDropdownContext);\n\nexport default BaseDropdownContext;\n"],"names":[],"mappings":";AAcA,MAAM,sBAAsB,cAAiC;AAAA,EAC3D,kBAAkB;AAAA,EAClB,eAAe;AACjB,CAAC;AAED,oBAAoB,cAAc;AAErB,MAAA,yBAAyB,MAAM,WAAW,mBAAmB;AAE1E,MAAA,wBAAe;"}
+{"version":3,"file":"BaseDropdownContext.js","sources":["../../../../src/BaseDropdown/BaseDropdownContext/BaseDropdownContext.tsx"],"sourcesContent":["import { createContext, Dispatch, SetStateAction, useContext } from \"react\";\nimport { usePopper } from \"react-popper\";\n\ninterface BaseDropdownValue {\n  width?: number;\n  height?: number;\n  popperPlacement?: string;\n  popper?: ReturnType<typeof usePopper>;\n  referenceElement: HTMLElement | null;\n  setReferenceElement?: Dispatch<SetStateAction<HTMLElement | null>>;\n  popperElement: HTMLElement | null;\n  setPopperElement?: Dispatch<SetStateAction<HTMLElement | null>>;\n}\n\nconst BaseDropdownContext = createContext<BaseDropdownValue>({\n  referenceElement: null,\n  popperElement: null,\n});\n\nBaseDropdownContext.displayName = \"BaseDropdownContext\";\n\nexport const useBaseDropdownContext = () => useContext(BaseDropdownContext);\n\nexport default BaseDropdownContext;\n"],"names":[],"mappings":";AAcA,MAAM,sBAAsB,cAAiC;AAAA,EAC3D,kBAAkB;AAAA,EAClB,eAAe;AACjB,CAAC;AAED,oBAAoB,cAAc;AAErB,MAAA,yBAAyB,MAAM,WAAW,mBAAmB;"}

package/dist/esm/BreadCrumb/BreadCrumb.js

@@ -24,16 +24,12 @@ const HvBreadCrumb = (props) => {
   const maxVisibleElem = maxVisible && maxVisible < 2 ? 2 : maxVisible;
   let listPath = listRoute.slice();
   if (url != null) {
-    listPath = [];
-    const baseUrl = url.match(/^.*\/\/[^/]+/);
-    const urlWithoutDomain = url.replace(/^.*\/\/[^/]+/, "");
-    const pathNames = urlWithoutDomain.split("/").filter((x) => x);
-    pathNames.map(
-      (elem, index) => listPath.push({
-        label: decodeURI(elem),
-        path: `${baseUrl}/${pathNames.slice(0, index + 1).join("/")}`
-      })
-    );
+    const baseUrl = url.match(/^.*\/\/[^/]+/) ?? "";
+    const pathNames = url.replace(/^.*\/\/[^/]+/, "").split("/").filter(Boolean);
+    listPath = pathNames.map((elem, index) => ({
+      label: decodeURI(elem),
+      path: `${baseUrl}/${pathNames.slice(0, index + 1).join("/")}`
+    }));
   }
   const breadcrumbPath = maxVisibleElem && listPath.length > maxVisibleElem ? pathWithSubMenu(
     id,

package/dist/esm/BreadCrumb/BreadCrumb.js.map

@@ -1 +1 @@
-{"version":3,"file":"BreadCrumb.js","sources":["../../../src/BreadCrumb/BreadCrumb.tsx"],"sourcesContent":["import { isValidElement } from \"react\";\nimport {\n  useDefaultProps,\n  type ExtractNames,\n} from \"@hitachivantara/uikit-react-utils\";\n\nimport { HvDropDownMenuProps } from \"../DropDownMenu\";\nimport { HvBaseProps } from \"../types/generic\";\nimport { HvTypography } from \"../Typography\";\nimport { staticClasses, useClasses } from \"./BreadCrumb.styles\";\nimport { HvBreadCrumbPage } from \"./Page\";\nimport { HvPathElement } from \"./PathElement\";\nimport { HvBreadCrumbPathElement } from \"./types\";\nimport { pathWithSubMenu, removeExtension } from \"./utils\";\n\nexport { staticClasses as breadCrumbClasses };\n\nexport type HvBreadCrumbClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvBreadCrumbProps\n  extends HvBaseProps<HTMLDivElement, \"onClick\"> {\n  /** List of breadcrumb. */\n  listRoute?: HvBreadCrumbPathElement[];\n  /** URL to build the breadcrumb. */\n  url?: string;\n  /** Number of pages visible. */\n  maxVisible?: number;\n  /** The component used for the link node. Either a string to use a DOM element or a component. */\n  component?: React.ElementType;\n  /** Function passed to the component. If defined the component prop is used as the link node. */\n  onClick?: (event: React.MouseEvent<HTMLElement>, data: any) => void;\n  /** Props passed down to the DropDownMenu sub-menu component. */\n  dropDownMenuProps?: Partial<HvDropDownMenuProps>;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvBreadCrumbClasses;\n}\n\n/**\n * A breadcrumb is a graphical control element frequently used as a navigational aid.\n */\nexport const HvBreadCrumb = (props: HvBreadCrumbProps) => {\n  const {\n    classes: classesProp,\n    className,\n    id,\n    listRoute = [],\n    maxVisible,\n    url,\n    onClick,\n    component,\n    dropDownMenuProps,\n    ...others\n  } = useDefaultProps(\"HvBreadCrumb\", props);\n\n  const { classes, cx } = useClasses(classesProp);\n\n  const maxVisibleElem = maxVisible && maxVisible < 2 ? 2 : maxVisible;\n  let listPath = listRoute.slice();\n\n  // build the listPath object list\n  if (url != null) {\n    listPath = [];\n\n    // get the domain\n    const baseUrl = url.match(/^.*\\/\\/[^/]+/);\n\n    // get url without domain\n    const urlWithoutDomain = url.replace(/^.*\\/\\/[^/]+/, \"\");\n\n    const pathNames = urlWithoutDomain.split(\"/\").filter((x) => x);\n\n    pathNames.map((elem, index) =>\n      listPath.push({\n        label: decodeURI(elem),\n        path: `${baseUrl}/${pathNames.slice(0, index + 1).join(\"/\")}`,\n      }),\n    );\n  }\n\n  const breadcrumbPath =\n    maxVisibleElem && listPath.length > maxVisibleElem\n      ? pathWithSubMenu(\n          id,\n          listPath,\n          maxVisibleElem,\n          onClick,\n          dropDownMenuProps,\n        )\n      : listPath;\n\n  return (\n    <nav id={id} className={cx(classes.root, className)} {...others}>\n      <ol className={classes.orderedList}>\n        {listPath.map((elem, index) => {\n          const key = `key_${index}`;\n          const isLast = index === breadcrumbPath.length - 1;\n\n          return (\n            <HvPathElement\n              classes={{\n                centerContainer: classes.centerContainer,\n                separatorContainer: classes.separatorContainer,\n              }}\n              key={key}\n              last={isLast}\n            >\n              {(isValidElement(elem) && elem) ||\n                (isLast && (\n                  <HvTypography className={classes.currentPage} variant=\"body\">\n                    {removeExtension(elem.label)}\n                  </HvTypography>\n                )) || (\n                  <HvBreadCrumbPage\n                    elem={elem}\n                    classes={{\n                      a: classes.a,\n                      link: classes.link,\n                    }}\n                    component={component}\n                    onClick={onClick}\n                  />\n                )}\n            </HvPathElement>\n          );\n        })}\n      </ol>\n    </nav>\n  );\n};\n"],"names":[],"mappings":";;;;;;;;;AAwCa,MAAA,eAAe,CAAC,UAA6B;AAClD,QAAA;AAAA,IACJ,SAAS;AAAA,IACT;AAAA,IACA;AAAA,IACA,YAAY,CAAC;AAAA,IACb;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EAAA,IACD,gBAAgB,gBAAgB,KAAK;AAEzC,QAAM,EAAE,SAAS,GAAG,IAAI,WAAW,WAAW;AAE9C,QAAM,iBAAiB,cAAc,aAAa,IAAI,IAAI;AACtD,MAAA,WAAW,UAAU;AAGzB,MAAI,OAAO,MAAM;AACf,eAAW,CAAA;AAGL,UAAA,UAAU,IAAI,MAAM,cAAc;AAGxC,UAAM,mBAAmB,IAAI,QAAQ,gBAAgB,EAAE;AAEjD,UAAA,YAAY,iBAAiB,MAAM,GAAG,EAAE,OAAO,CAAC,MAAM,CAAC;AAEnD,cAAA;AAAA,MAAI,CAAC,MAAM,UACnB,SAAS,KAAK;AAAA,QACZ,OAAO,UAAU,IAAI;AAAA,QACrB,MAAM,GAAG,OAAO,IAAI,UAAU,MAAM,GAAG,QAAQ,CAAC,EAAE,KAAK,GAAG,CAAC;AAAA,MAAA,CAC5D;AAAA,IAAA;AAAA,EAEL;AAEA,QAAM,iBACJ,kBAAkB,SAAS,SAAS,iBAChC;AAAA,IACE;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EAEF,IAAA;AAGJ,SAAA,oBAAC,SAAI,IAAQ,WAAW,GAAG,QAAQ,MAAM,SAAS,GAAI,GAAG,QACvD,UAAC,oBAAA,MAAA,EAAG,WAAW,QAAQ,aACpB,mBAAS,IAAI,CAAC,MAAM,UAAU;AACvB,UAAA,MAAM,OAAO,KAAK;AAClB,UAAA,SAAS,UAAU,eAAe,SAAS;AAG/C,WAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,SAAS;AAAA,UACP,iBAAiB,QAAQ;AAAA,UACzB,oBAAoB,QAAQ;AAAA,QAC9B;AAAA,QAEA,MAAM;AAAA,QAEJ,yBAAe,IAAI,KAAK,QACvB,8BACE,cAAa,EAAA,WAAW,QAAQ,aAAa,SAAQ,QACnD,UAAA,gBAAgB,KAAK,KAAK,EAC7B,CAAA,KAEA;AAAA,UAAC;AAAA,UAAA;AAAA,YACC;AAAA,YACA,SAAS;AAAA,cACP,GAAG,QAAQ;AAAA,cACX,MAAM,QAAQ;AAAA,YAChB;AAAA,YACA;AAAA,YACA;AAAA,UAAA;AAAA,QACF;AAAA,MAAA;AAAA,MAjBC;AAAA,IAAA;AAAA,EAmBP,CAEH,GACH,EACF,CAAA;AAEJ;"}
+{"version":3,"file":"BreadCrumb.js","sources":["../../../src/BreadCrumb/BreadCrumb.tsx"],"sourcesContent":["import { isValidElement } from \"react\";\nimport {\n  useDefaultProps,\n  type ExtractNames,\n} from \"@hitachivantara/uikit-react-utils\";\n\nimport { HvDropDownMenuProps } from \"../DropDownMenu\";\nimport { HvBaseProps } from \"../types/generic\";\nimport { HvTypography } from \"../Typography\";\nimport { staticClasses, useClasses } from \"./BreadCrumb.styles\";\nimport { HvBreadCrumbPage } from \"./Page\";\nimport { HvPathElement } from \"./PathElement\";\nimport { HvBreadCrumbPathElement } from \"./types\";\nimport { pathWithSubMenu, removeExtension } from \"./utils\";\n\nexport { staticClasses as breadCrumbClasses };\n\nexport type HvBreadCrumbClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvBreadCrumbProps\n  extends HvBaseProps<HTMLDivElement, \"onClick\"> {\n  /** List of breadcrumb. */\n  listRoute?: HvBreadCrumbPathElement[];\n  /** URL to build the breadcrumb. */\n  url?: string;\n  /** Number of pages visible. */\n  maxVisible?: number;\n  /** The component used for the link node. Either a string to use a DOM element or a component. */\n  component?: React.ElementType;\n  /** Function passed to the component. If defined the component prop is used as the link node. */\n  onClick?: (event: React.MouseEvent<HTMLElement>, data: any) => void;\n  /** Props passed down to the DropDownMenu sub-menu component. */\n  dropDownMenuProps?: Partial<HvDropDownMenuProps>;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvBreadCrumbClasses;\n}\n\n/**\n * A breadcrumb is a graphical control element frequently used as a navigational aid.\n */\nexport const HvBreadCrumb = (props: HvBreadCrumbProps) => {\n  const {\n    classes: classesProp,\n    className,\n    id,\n    listRoute = [],\n    maxVisible,\n    url,\n    onClick,\n    component,\n    dropDownMenuProps,\n    ...others\n  } = useDefaultProps(\"HvBreadCrumb\", props);\n\n  const { classes, cx } = useClasses(classesProp);\n\n  const maxVisibleElem = maxVisible && maxVisible < 2 ? 2 : maxVisible;\n  let listPath = listRoute.slice();\n\n  // build the listPath object list\n  if (url != null) {\n    // get URL origin\n    const baseUrl = url.match(/^.*\\/\\/[^/]+/) ?? \"\";\n\n    // get URL pathname\n    const pathNames = url\n      .replace(/^.*\\/\\/[^/]+/, \"\")\n      .split(\"/\")\n      .filter(Boolean);\n\n    listPath = pathNames.map((elem, index) => ({\n      label: decodeURI(elem),\n      path: `${baseUrl}/${pathNames.slice(0, index + 1).join(\"/\")}`,\n    }));\n  }\n\n  const breadcrumbPath =\n    maxVisibleElem && listPath.length > maxVisibleElem\n      ? pathWithSubMenu(\n          id,\n          listPath,\n          maxVisibleElem,\n          onClick,\n          dropDownMenuProps,\n        )\n      : listPath;\n\n  return (\n    <nav id={id} className={cx(classes.root, className)} {...others}>\n      <ol className={classes.orderedList}>\n        {listPath.map((elem, index) => {\n          const key = `key_${index}`;\n          const isLast = index === breadcrumbPath.length - 1;\n\n          return (\n            <HvPathElement\n              classes={{\n                centerContainer: classes.centerContainer,\n                separatorContainer: classes.separatorContainer,\n              }}\n              key={key}\n              last={isLast}\n            >\n              {(isValidElement(elem) && elem) ||\n                (isLast && (\n                  <HvTypography className={classes.currentPage} variant=\"body\">\n                    {removeExtension(elem.label)}\n                  </HvTypography>\n                )) || (\n                  <HvBreadCrumbPage\n                    elem={elem}\n                    classes={{\n                      a: classes.a,\n                      link: classes.link,\n                    }}\n                    component={component}\n                    onClick={onClick}\n                  />\n                )}\n            </HvPathElement>\n          );\n        })}\n      </ol>\n    </nav>\n  );\n};\n"],"names":[],"mappings":";;;;;;;;;AAwCa,MAAA,eAAe,CAAC,UAA6B;AAClD,QAAA;AAAA,IACJ,SAAS;AAAA,IACT;AAAA,IACA;AAAA,IACA,YAAY,CAAC;AAAA,IACb;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EAAA,IACD,gBAAgB,gBAAgB,KAAK;AAEzC,QAAM,EAAE,SAAS,GAAG,IAAI,WAAW,WAAW;AAE9C,QAAM,iBAAiB,cAAc,aAAa,IAAI,IAAI;AACtD,MAAA,WAAW,UAAU;AAGzB,MAAI,OAAO,MAAM;AAEf,UAAM,UAAU,IAAI,MAAM,cAAc,KAAK;AAGvC,UAAA,YAAY,IACf,QAAQ,gBAAgB,EAAE,EAC1B,MAAM,GAAG,EACT,OAAO,OAAO;AAEjB,eAAW,UAAU,IAAI,CAAC,MAAM,WAAW;AAAA,MACzC,OAAO,UAAU,IAAI;AAAA,MACrB,MAAM,GAAG,OAAO,IAAI,UAAU,MAAM,GAAG,QAAQ,CAAC,EAAE,KAAK,GAAG,CAAC;AAAA,IAC3D,EAAA;AAAA,EACJ;AAEA,QAAM,iBACJ,kBAAkB,SAAS,SAAS,iBAChC;AAAA,IACE;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EAEF,IAAA;AAGJ,SAAA,oBAAC,SAAI,IAAQ,WAAW,GAAG,QAAQ,MAAM,SAAS,GAAI,GAAG,QACvD,UAAC,oBAAA,MAAA,EAAG,WAAW,QAAQ,aACpB,mBAAS,IAAI,CAAC,MAAM,UAAU;AACvB,UAAA,MAAM,OAAO,KAAK;AAClB,UAAA,SAAS,UAAU,eAAe,SAAS;AAG/C,WAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,SAAS;AAAA,UACP,iBAAiB,QAAQ;AAAA,UACzB,oBAAoB,QAAQ;AAAA,QAC9B;AAAA,QAEA,MAAM;AAAA,QAEJ,yBAAe,IAAI,KAAK,QACvB,8BACE,cAAa,EAAA,WAAW,QAAQ,aAAa,SAAQ,QACnD,UAAA,gBAAgB,KAAK,KAAK,EAC7B,CAAA,KAEA;AAAA,UAAC;AAAA,UAAA;AAAA,YACC;AAAA,YACA,SAAS;AAAA,cACP,GAAG,QAAQ;AAAA,cACX,MAAM,QAAQ;AAAA,YAChB;AAAA,YACA;AAAA,YACA;AAAA,UAAA;AAAA,QACF;AAAA,MAAA;AAAA,MAjBC;AAAA,IAAA;AAAA,EAmBP,CAEH,GACH,EACF,CAAA;AAEJ;"}

package/dist/esm/ButtonBase/ButtonBase.js

@@ -0,0 +1,54 @@
+import { jsx } from "react/jsx-runtime";
+import { useDefaultProps } from "@hitachivantara/uikit-react-utils";
+import { fixedForwardRef } from "../types/generic.js";
+import { useClasses } from "./ButtonBase.styles.js";
+import { staticClasses } from "./ButtonBase.styles.js";
+const HvButtonBase = fixedForwardRef(function HvButtonBase2(props, ref) {
+  const {
+    className,
+    classes: classesProp,
+    children,
+    selected,
+    disabled,
+    focusableWhenDisabled,
+    component: Component = "button",
+    onClick: onClickProp,
+    onMouseDown: onMouseDownProp,
+    ...others
+  } = useDefaultProps("HvButtonBase", props);
+  const { classes, cx } = useClasses(classesProp);
+  return /* @__PURE__ */ jsx(
+    Component,
+    {
+      ref,
+      className: cx(
+        classes.root,
+        {
+          [classes.disabled]: disabled
+        },
+        className
+      ),
+      onClick: (e) => {
+        if (disabled) return;
+        onClickProp?.(e);
+      },
+      onMouseDown: (e) => {
+        if (disabled) return;
+        onMouseDownProp?.(e);
+      },
+      ...Component === "button" && { type: "button" },
+      ...disabled && {
+        disabled: !focusableWhenDisabled,
+        tabIndex: focusableWhenDisabled ? 0 : -1,
+        "aria-disabled": true
+      },
+      ...selected && { "aria-pressed": selected },
+      ...others,
+      children
+    }
+  );
+});
+export {
+  HvButtonBase,
+  staticClasses as buttonBaseClasses
+};

package/dist/esm/ButtonBase/ButtonBase.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ButtonBase.js","sources":["../../../src/ButtonBase/ButtonBase.tsx"],"sourcesContent":["import {\n  useDefaultProps,\n  type ExtractNames,\n} from \"@hitachivantara/uikit-react-utils\";\n\nimport {\n  fixedForwardRef,\n  PolymorphicComponentRef,\n  PolymorphicRef,\n} from \"../types/generic\";\nimport { staticClasses, useClasses } from \"./ButtonBase.styles\";\n\nexport { staticClasses as buttonBaseClasses };\n\nexport type HvButtonBaseClasses = ExtractNames<typeof useClasses>;\n\nexport type HvButtonBaseProps<C extends React.ElementType = \"button\"> =\n  PolymorphicComponentRef<\n    C,\n    {\n      /** A Jss Object used to override or extend the styles applied. */\n      classes?: HvButtonBaseClasses;\n      /** Whether the button is selected or not. */\n      selected?: boolean;\n      /** Whether the button is disabled or not. */\n      disabled?: boolean;\n      /**\n       * Whether the button is focusable when disabled.\n       * Without this property, the accessibility of the button decreases when disabled since it's not read by screen readers.\n       * Set this property to `true` when you need the button to still be focusable when disabled for accessibility purposes.\n       */\n      focusableWhenDisabled?: boolean;\n    }\n  >;\n\n/**\n * Button component is used to trigger an action or event.\n */\nexport const HvButtonBase = fixedForwardRef(function HvButtonBase<\n  C extends React.ElementType = \"button\",\n>(props: HvButtonBaseProps<C>, ref: PolymorphicRef<C>) {\n  const {\n    className,\n    classes: classesProp,\n    children,\n    selected,\n    disabled,\n    focusableWhenDisabled,\n    component: Component = \"button\",\n    onClick: onClickProp,\n    onMouseDown: onMouseDownProp,\n    ...others\n  } = useDefaultProps(\"HvButtonBase\", props);\n  const { classes, cx } = useClasses(classesProp);\n\n  return (\n    <Component\n      ref={ref}\n      className={cx(\n        classes.root,\n        {\n          [classes.disabled]: disabled,\n        },\n        className,\n      )}\n      onClick={(e) => {\n        if (disabled) return;\n        onClickProp?.(e);\n      }}\n      onMouseDown={(e) => {\n        if (disabled) return;\n        onMouseDownProp?.(e);\n      }}\n      {...(Component === \"button\" && { type: \"button\" })}\n      {...(disabled && {\n        disabled: !focusableWhenDisabled,\n        tabIndex: focusableWhenDisabled ? 0 : -1,\n        \"aria-disabled\": true,\n      })}\n      {...(selected && { \"aria-pressed\": selected })}\n      {...others}\n    >\n      {children}\n    </Component>\n  );\n});\n"],"names":["HvButtonBase"],"mappings":";;;;;AAsCO,MAAM,eAAe,gBAAgB,SAASA,cAEnD,OAA6B,KAAwB;AAC/C,QAAA;AAAA,IACJ;AAAA,IACA,SAAS;AAAA,IACT;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,WAAW,YAAY;AAAA,IACvB,SAAS;AAAA,IACT,aAAa;AAAA,IACb,GAAG;AAAA,EAAA,IACD,gBAAgB,gBAAgB,KAAK;AACzC,QAAM,EAAE,SAAS,GAAG,IAAI,WAAW,WAAW;AAG5C,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC;AAAA,MACA,WAAW;AAAA,QACT,QAAQ;AAAA,QACR;AAAA,UACE,CAAC,QAAQ,QAAQ,GAAG;AAAA,QACtB;AAAA,QACA;AAAA,MACF;AAAA,MACA,SAAS,CAAC,MAAM;AACd,YAAI,SAAU;AACd,sBAAc,CAAC;AAAA,MACjB;AAAA,MACA,aAAa,CAAC,MAAM;AAClB,YAAI,SAAU;AACd,0BAAkB,CAAC;AAAA,MACrB;AAAA,MACC,GAAI,cAAc,YAAY,EAAE,MAAM,SAAS;AAAA,MAC/C,GAAI,YAAY;AAAA,QACf,UAAU,CAAC;AAAA,QACX,UAAU,wBAAwB,IAAI;AAAA,QACtC,iBAAiB;AAAA,MACnB;AAAA,MACC,GAAI,YAAY,EAAE,gBAAgB,SAAS;AAAA,MAC3C,GAAG;AAAA,MAEH;AAAA,IAAA;AAAA,EAAA;AAGP,CAAC;"}

package/dist/esm/ButtonBase/ButtonBase.styles.js

@@ -0,0 +1,34 @@
+import { createClasses } from "@hitachivantara/uikit-react-utils";
+import { theme } from "@hitachivantara/uikit-styles";
+import { outlineStyles } from "../utils/focusUtils.js";
+const { staticClasses, useClasses } = createClasses("HvButtonBase", {
+  root: {
+    display: "inline-flex",
+    cursor: "pointer",
+    background: "none",
+    padding: 0,
+    // Background color common for almost all variants
+    "&:hover": {
+      backgroundColor: theme.colors.containerBackgroundHover
+    },
+    "&:focus-visible": {
+      ...outlineStyles,
+      backgroundColor: theme.colors.containerBackgroundHover
+    },
+    // Default button - no size specified
+    fontFamily: theme.fontFamily.body,
+    fontSize: "inherit",
+    color: "inherit"
+  },
+  disabled: {
+    cursor: "not-allowed",
+    color: theme.colors.secondary_60,
+    "&:hover, &:focus-visible": {
+      backgroundColor: "transparent"
+    }
+  }
+});
+export {
+  staticClasses,
+  useClasses
+};

package/dist/esm/ButtonBase/ButtonBase.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ButtonBase.styles.js","sources":["../../../src/ButtonBase/ButtonBase.styles.ts"],"sourcesContent":["import { createClasses } from \"@hitachivantara/uikit-react-utils\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { outlineStyles } from \"../utils/focusUtils\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvButtonBase\", {\n  root: {\n    display: \"inline-flex\",\n    cursor: \"pointer\",\n    background: \"none\",\n    padding: 0,\n\n    // Background color common for almost all variants\n    \"&:hover\": {\n      backgroundColor: theme.colors.containerBackgroundHover,\n    },\n    \"&:focus-visible\": {\n      ...outlineStyles,\n      backgroundColor: theme.colors.containerBackgroundHover,\n    },\n\n    // Default button - no size specified\n    fontFamily: theme.fontFamily.body,\n    fontSize: \"inherit\",\n    color: \"inherit\",\n  },\n  disabled: {\n    cursor: \"not-allowed\",\n    color: theme.colors.secondary_60,\n    \"&:hover, &:focus-visible\": {\n      backgroundColor: \"transparent\",\n    },\n  },\n});\n"],"names":[],"mappings":";;;AAKO,MAAM,EAAE,eAAe,eAAe,cAAc,gBAAgB;AAAA,EACzE,MAAM;AAAA,IACJ,SAAS;AAAA,IACT,QAAQ;AAAA,IACR,YAAY;AAAA,IACZ,SAAS;AAAA;AAAA,IAGT,WAAW;AAAA,MACT,iBAAiB,MAAM,OAAO;AAAA,IAChC;AAAA,IACA,mBAAmB;AAAA,MACjB,GAAG;AAAA,MACH,iBAAiB,MAAM,OAAO;AAAA,IAChC;AAAA;AAAA,IAGA,YAAY,MAAM,WAAW;AAAA,IAC7B,UAAU;AAAA,IACV,OAAO;AAAA,EACT;AAAA,EACA,UAAU;AAAA,IACR,QAAQ;AAAA,IACR,OAAO,MAAM,OAAO;AAAA,IACpB,4BAA4B;AAAA,MAC1B,iBAAiB;AAAA,IACnB;AAAA,EACF;AACF,CAAC;"}

package/dist/esm/Calendar/CalendarNavigation/MonthSelector/MonthSelector.js

@@ -1,9 +1,8 @@
 import { jsx } from "react/jsx-runtime";
-import { isKey } from "../../../utils/keyboardUtils.js";
 import { getMonthNamesList } from "../../utils.js";
 import { useClasses } from "./MonthSelector.styles.js";
 import { staticClasses } from "./MonthSelector.styles.js";
-import { HvTypography } from "../../../Typography/Typography.js";
+import { HvButtonBase } from "../../../ButtonBase/ButtonBase.js";
 const HvMonthSelector = ({
   classes: classesProp,
   id,
@@ -16,12 +15,6 @@ const HvMonthSelector = ({
 }) => {
   const { classes, cx } = useClasses(classesProp);
   const listMonthNamesShort = getMonthNamesList(locale, "short");
-  const onKeyDownHandler = (event, index) => {
-    if (isKey(event, "Enter")) {
-      onChange?.(event, "month", index + 1);
-      onViewModeChange("calendar");
-    }
-  };
   return /* @__PURE__ */ jsx(
     "div",
     {
@@ -30,26 +23,17 @@ const HvMonthSelector = ({
         [classes.normalWidth]: !rangeMode
       }),
       children: listMonthNamesShort.map((monthName, index) => /* @__PURE__ */ jsx(
-        "div",
+        HvButtonBase,
         {
-          className: classes.focusSelection,
-          role: "button",
+          className: cx(classes.calendarMonthlyCell, {
+            [classes.calendarMonthlyCellSelected]: index + 1 === visibleMonth
+          }),
           onClick: (event) => {
             onChange?.(event, "month", index + 1);
             onViewModeChange("calendar");
           },
-          onKeyDown: (event) => onKeyDownHandler(event, index),
-          tabIndex: 0,
           ...others,
-          children: /* @__PURE__ */ jsx(
-            HvTypography,
-            {
-              className: cx(classes.calendarMonthlyCell, {
-                [classes.calendarMonthlyCellSelected]: index + 1 === visibleMonth
-              }),
-              children: monthName
-            }
-          )
+          children: monthName
         },
         monthName
       ))

package/dist/esm/Calendar/CalendarNavigation/MonthSelector/MonthSelector.js.map

@@ -1 +1 @@
-{"version":3,"file":"MonthSelector.js","sources":["../../../../../src/Calendar/CalendarNavigation/MonthSelector/MonthSelector.tsx"],"sourcesContent":["import { type ExtractNames } from \"@hitachivantara/uikit-react-utils\";\n\nimport { HvTypography } from \"../../../Typography\";\nimport { isKey } from \"../../../utils/keyboardUtils\";\nimport { ViewMode } from \"../../enums\";\nimport { DateRangeProp, VisibilitySelectorActions } from \"../../types\";\nimport { getMonthNamesList } from \"../../utils\";\nimport { staticClasses, useClasses } from \"./MonthSelector.styles\";\n\nexport { staticClasses as monthSelectorClasses };\n\nexport type HvMonthSelectorClasses = ExtractNames<typeof useClasses>;\n\nexport const HvMonthSelector = ({\n  classes: classesProp,\n  id,\n  locale,\n  onChange,\n  onViewModeChange,\n  rangeMode,\n  visibleMonth,\n  ...others\n}: HvMonthSelectorProps) => {\n  const { classes, cx } = useClasses(classesProp);\n\n  const listMonthNamesShort = getMonthNamesList(locale, \"short\");\n  const onKeyDownHandler = (event: any, index: number) => {\n    if (isKey(event, \"Enter\")) {\n      onChange?.(event, \"month\", index + 1);\n      onViewModeChange(\"calendar\");\n    }\n  };\n  return (\n    <div\n      className={cx(classes.calendarMonthlyGrid, {\n        [classes.rangeModeWidth]: rangeMode,\n        [classes.normalWidth]: !rangeMode,\n      })}\n    >\n      {listMonthNamesShort.map((monthName, index) => (\n        <div\n          className={classes.focusSelection}\n          key={monthName}\n          role=\"button\"\n          onClick={(event) => {\n            onChange?.(event, \"month\", index + 1);\n            onViewModeChange(\"calendar\");\n          }}\n          onKeyDown={(event) => onKeyDownHandler(event, index)}\n          tabIndex={0}\n          {...others}\n        >\n          <HvTypography\n            className={cx(classes.calendarMonthlyCell, {\n              [classes.calendarMonthlyCellSelected]: index + 1 === visibleMonth,\n            })}\n          >\n            {monthName}\n          </HvTypography>\n        </div>\n      ))}\n    </div>\n  );\n};\n\nexport interface HvMonthSelectorProps {\n  /**\n   * A Jss Object used to override or extend the component styles.\n   */\n  classes?: HvMonthSelectorClasses;\n  /**\n   * Identifier.\n   */\n  id?: string;\n  /**\n   * Locale to be used by the calendar.\n   */\n  locale?: string;\n  /**\n   * Callback to define the input date.\n   */\n  onChange?: (\n    event: any,\n    action: VisibilitySelectorActions,\n    value: Date | DateRangeProp | number,\n  ) => void;\n  /**\n   * Callback to define the input date.\n   */\n  onViewModeChange: (viewMode: ViewMode) => void;\n  /**\n   * Controls the visible month of the Calendar\n   */\n  visibleMonth: number;\n  /**\n   * Controls the visible month of the Calendar\n   */\n  visibleYear?: number;\n  rangeMode?: boolean;\n}\n"],"names":[],"mappings":";;;;;;AAaO,MAAM,kBAAkB,CAAC;AAAA,EAC9B,SAAS;AAAA,EACT;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAA4B;AAC1B,QAAM,EAAE,SAAS,GAAG,IAAI,WAAW,WAAW;AAExC,QAAA,sBAAsB,kBAAkB,QAAQ,OAAO;AACvD,QAAA,mBAAmB,CAAC,OAAY,UAAkB;AAClD,QAAA,MAAM,OAAO,OAAO,GAAG;AACd,iBAAA,OAAO,SAAS,QAAQ,CAAC;AACpC,uBAAiB,UAAU;AAAA,IAC7B;AAAA,EAAA;AAGA,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAW,GAAG,QAAQ,qBAAqB;AAAA,QACzC,CAAC,QAAQ,cAAc,GAAG;AAAA,QAC1B,CAAC,QAAQ,WAAW,GAAG,CAAC;AAAA,MAAA,CACzB;AAAA,MAEA,UAAoB,oBAAA,IAAI,CAAC,WAAW,UACnC;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,WAAW,QAAQ;AAAA,UAEnB,MAAK;AAAA,UACL,SAAS,CAAC,UAAU;AACP,uBAAA,OAAO,SAAS,QAAQ,CAAC;AACpC,6BAAiB,UAAU;AAAA,UAC7B;AAAA,UACA,WAAW,CAAC,UAAU,iBAAiB,OAAO,KAAK;AAAA,UACnD,UAAU;AAAA,UACT,GAAG;AAAA,UAEJ,UAAA;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,WAAW,GAAG,QAAQ,qBAAqB;AAAA,gBACzC,CAAC,QAAQ,2BAA2B,GAAG,QAAQ,MAAM;AAAA,cAAA,CACtD;AAAA,cAEA,UAAA;AAAA,YAAA;AAAA,UACH;AAAA,QAAA;AAAA,QAhBK;AAAA,MAAA,CAkBR;AAAA,IAAA;AAAA,EAAA;AAGP;"}
+{"version":3,"file":"MonthSelector.js","sources":["../../../../../src/Calendar/CalendarNavigation/MonthSelector/MonthSelector.tsx"],"sourcesContent":["import { HvButtonBase } from \"packages/core/src/ButtonBase\";\nimport { type ExtractNames } from \"@hitachivantara/uikit-react-utils\";\n\nimport { ViewMode } from \"../../enums\";\nimport { DateRangeProp, VisibilitySelectorActions } from \"../../types\";\nimport { getMonthNamesList } from \"../../utils\";\nimport { staticClasses, useClasses } from \"./MonthSelector.styles\";\n\nexport { staticClasses as monthSelectorClasses };\n\nexport type HvMonthSelectorClasses = ExtractNames<typeof useClasses>;\n\nexport const HvMonthSelector = ({\n  classes: classesProp,\n  id,\n  locale,\n  onChange,\n  onViewModeChange,\n  rangeMode,\n  visibleMonth,\n  ...others\n}: HvMonthSelectorProps) => {\n  const { classes, cx } = useClasses(classesProp);\n\n  const listMonthNamesShort = getMonthNamesList(locale, \"short\");\n\n  return (\n    <div\n      className={cx(classes.calendarMonthlyGrid, {\n        [classes.rangeModeWidth]: rangeMode,\n        [classes.normalWidth]: !rangeMode,\n      })}\n    >\n      {listMonthNamesShort.map((monthName, index) => (\n        <HvButtonBase\n          key={monthName}\n          className={cx(classes.calendarMonthlyCell, {\n            [classes.calendarMonthlyCellSelected]: index + 1 === visibleMonth,\n          })}\n          onClick={(event) => {\n            onChange?.(event, \"month\", index + 1);\n            onViewModeChange(\"calendar\");\n          }}\n          {...others}\n        >\n          {monthName}\n        </HvButtonBase>\n      ))}\n    </div>\n  );\n};\n\nexport interface HvMonthSelectorProps {\n  /**\n   * A Jss Object used to override or extend the component styles.\n   */\n  classes?: HvMonthSelectorClasses;\n  /**\n   * Identifier.\n   */\n  id?: string;\n  /**\n   * Locale to be used by the calendar.\n   */\n  locale?: string;\n  /**\n   * Callback to define the input date.\n   */\n  onChange?: (\n    event: any,\n    action: VisibilitySelectorActions,\n    value: Date | DateRangeProp | number,\n  ) => void;\n  /**\n   * Callback to define the input date.\n   */\n  onViewModeChange: (viewMode: ViewMode) => void;\n  /**\n   * Controls the visible month of the Calendar\n   */\n  visibleMonth: number;\n  /**\n   * Controls the visible month of the Calendar\n   */\n  visibleYear?: number;\n  rangeMode?: boolean;\n}\n"],"names":[],"mappings":";;;;;AAYO,MAAM,kBAAkB,CAAC;AAAA,EAC9B,SAAS;AAAA,EACT;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAA4B;AAC1B,QAAM,EAAE,SAAS,GAAG,IAAI,WAAW,WAAW;AAExC,QAAA,sBAAsB,kBAAkB,QAAQ,OAAO;AAG3D,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAW,GAAG,QAAQ,qBAAqB;AAAA,QACzC,CAAC,QAAQ,cAAc,GAAG;AAAA,QAC1B,CAAC,QAAQ,WAAW,GAAG,CAAC;AAAA,MAAA,CACzB;AAAA,MAEA,UAAoB,oBAAA,IAAI,CAAC,WAAW,UACnC;AAAA,QAAC;AAAA,QAAA;AAAA,UAEC,WAAW,GAAG,QAAQ,qBAAqB;AAAA,YACzC,CAAC,QAAQ,2BAA2B,GAAG,QAAQ,MAAM;AAAA,UAAA,CACtD;AAAA,UACD,SAAS,CAAC,UAAU;AACP,uBAAA,OAAO,SAAS,QAAQ,CAAC;AACpC,6BAAiB,UAAU;AAAA,UAC7B;AAAA,UACC,GAAG;AAAA,UAEH,UAAA;AAAA,QAAA;AAAA,QAVI;AAAA,MAAA,CAYR;AAAA,IAAA;AAAA,EAAA;AAGP;"}

package/dist/esm/Calendar/CalendarNavigation/MonthSelector/MonthSelector.styles.js

@@ -1,55 +1,23 @@
 import { createClasses } from "@hitachivantara/uikit-react-utils";
 import { theme } from "@hitachivantara/uikit-styles";
-import { outlineStyles } from "../../../utils/focusUtils.js";
-const hover = {
-  backgroundColor: theme.colors.atmo3,
-  cursor: "pointer"
-};
 const { staticClasses, useClasses } = createClasses("HvMonthSelector", {
   calendarMonthlyGrid: {
-    marginTop: "50px",
-    marginLeft: "-16px",
-    display: "flex",
+    display: "grid",
+    gridTemplateColumns: "repeat(3, 1fr)",
     zIndex: "10",
-    padding: "0 20px",
-    position: "absolute",
-    flexFlow: "wrap",
-    alignContent: "center",
-    justifyContent: "space-evenly",
-    backgroundColor: theme.colors.atmo1
+    alignContent: "center"
   },
   rangeModeWidth: {},
   normalWidth: {},
-  focusSelection: {
-    "&:hover": {
-      ...hover
-    },
-    "&:focus": {
-      outline: "none"
-    },
-    "&:focus-visible": {
-      ...hover,
-      ...outlineStyles
-    }
-  },
   calendarMonthlyCell: {
     display: "flex",
     justifyContent: "center",
-    flexDirection: "column",
-    textAlign: "center",
+    alignItems: "center",
     height: "40px",
-    width: "92px",
-    "&:hover": {
-      ...hover
-    }
+    width: "92px"
   },
   calendarMonthlyCellSelected: {
-    backgroundColor: theme.colors.atmo3,
-    color: theme.colors.secondary,
-    "&:hover": {
-      backgroundColor: theme.colors.atmo3,
-      color: theme.colors.secondary
-    }
+    backgroundColor: theme.colors.atmo3
   }
 });
 export {