@hitachivantara/uikit-react-core 5.90.0 → 5.91.1

package/dist/esm/DotPagination/DotPagination.js

@@ -1,23 +1,21 @@
 import { jsx } from "react/jsx-runtime";
 import { cloneElement } from "react";
-import { CurrentStep, OtherStep } from "@hitachivantara/uikit-react-icons";
 import { useDefaultProps } from "@hitachivantara/uikit-react-utils";
 import { range } from "../utils/helpers.js";
 import { useClasses } from "./DotPagination.styles.js";
 import { staticClasses } from "./DotPagination.styles.js";
 import { HvRadioGroup } from "../RadioGroup/RadioGroup.js";
-import { HvRadio } from "../Radio/Radio.js";
+import { HvBaseRadio } from "../BaseRadio/BaseRadio.js";
+const currentStep = /* @__PURE__ */ jsx("div", { style: { fontSize: 8 }, children: /* @__PURE__ */ jsx("div", {}) });
+const otherStep = /* @__PURE__ */ jsx("div", { style: { fontSize: 4 }, children: /* @__PURE__ */ jsx("div", {}) });
 const getSelectorIcons = (radioIcon, radioCheckedIcon, classes) => {
   return {
-    radio: cloneElement(radioIcon || /* @__PURE__ */ jsx(OtherStep, { width: 8, height: 8 }), {
+    radio: cloneElement(radioIcon || otherStep, {
       className: classes?.icon
     }),
-    radioChecked: cloneElement(
-      radioCheckedIcon || /* @__PURE__ */ jsx(CurrentStep, { width: 8, height: 8 }),
-      {
-        className: classes?.icon
-      }
-    )
+    radioChecked: cloneElement(radioCheckedIcon || currentStep, {
+      className: classes?.icon
+    })
   };
 };
 const HvDotPagination = (props) => {
@@ -44,18 +42,15 @@ const HvDotPagination = (props) => {
       orientation: "horizontal",
       ...others,
       children: range(pages).map((i) => /* @__PURE__ */ jsx(
-        HvRadio,
+        HvBaseRadio,
         {
-          classes: {
-            radio: classes.radio,
-            root: classes.radioRoot
-          },
+          className: cx(classes.radioRoot, classes.radio),
           value: i,
           checked: page === i,
           onChange: (event) => onPageChange?.(event, i),
           icon: icons.radio,
           checkedIcon: icons.radioChecked,
-          "aria-label": getItemAriaLabel?.(i)
+          inputProps: { "aria-label": getItemAriaLabel?.(i) }
         },
         i
       ))

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

@@ -1 +1 @@
-{"version":3,"file":"DotPagination.js","sources":["../../../src/DotPagination/DotPagination.tsx"],"sourcesContent":["import { cloneElement } from \"react\";\nimport { CurrentStep, OtherStep } from \"@hitachivantara/uikit-react-icons\";\nimport {\n  useDefaultProps,\n  type ExtractNames,\n} from \"@hitachivantara/uikit-react-utils\";\n\nimport { HvRadio } from \"../Radio\";\nimport { HvRadioGroup, HvRadioGroupProps } from \"../RadioGroup\";\nimport { range } from \"../utils/helpers\";\nimport { staticClasses, useClasses } from \"./DotPagination.styles\";\n\nexport { staticClasses as dotPaginationClasses };\n\nexport type HvDotPaginationClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvDotPaginationProps\n  extends Omit<HvRadioGroupProps, \"classes\"> {\n  /**\n   * Icon to override the default one used for the unselected state.\n   *\n   * The default icon is `OtherStep`.\n   */\n  unselectedIcon?: React.ReactElement;\n  /**\n   * Icon to override the default one used for the selected state.\n   *\n   * The default icon is `CurrentStep`.\n   */\n  selectedIcon?: React.ReactElement;\n  /**\n   *  The number of pages the component has.\n   */\n  pages?: number;\n  /**\n   * The currently selected page.\n   */\n  page?: number;\n  /**\n   * The callback fired when the page value changes.\n   */\n  onPageChange?: (\n    event: React.ChangeEvent<HTMLInputElement>,\n    page: number,\n  ) => void;\n  /**\n   * The callback fired to get the page aria label.\n   */\n  getItemAriaLabel?: (page: number) => string;\n  /**\n   * A Jss Object used to override or extend the styles applied.\n   */\n  classes?: HvDotPaginationClasses;\n}\n\nconst getSelectorIcons = (\n  radioIcon?: React.ReactElement,\n  radioCheckedIcon?: React.ReactElement,\n  classes?: HvDotPaginationClasses,\n) => {\n  return {\n    radio: cloneElement(radioIcon || <OtherStep width={8} height={8} />, {\n      className: classes?.icon,\n    }),\n    radioChecked: cloneElement(\n      radioCheckedIcon || <CurrentStep width={8} height={8} />,\n      {\n        className: classes?.icon,\n      },\n    ),\n  };\n};\n\n/**\n * Pagination is the process of dividing a document into discrete pages. It relates to how users interact with structured content on a website or application.\n * This component uses Radio Buttons to represent each page.\n */\nexport const HvDotPagination = (props: HvDotPaginationProps) => {\n  const {\n    className,\n    classes: classesProp,\n    unselectedIcon,\n    selectedIcon,\n    pages = 1,\n    page = 0,\n    onPageChange,\n    getItemAriaLabel,\n    ...others\n  } = useDefaultProps(\"HvDotPagination\", props);\n\n  const { classes, cx } = useClasses(classesProp);\n\n  const icons = getSelectorIcons(unselectedIcon, selectedIcon, classes);\n\n  return (\n    <HvRadioGroup\n      className={cx(classes.root, className)}\n      classes={{\n        horizontal: classes.horizontal,\n      }}\n      orientation=\"horizontal\"\n      {...others}\n    >\n      {range(pages).map((i) => (\n        <HvRadio\n          classes={{\n            radio: classes.radio,\n            root: classes.radioRoot,\n          }}\n          key={i}\n          value={i}\n          checked={page === i}\n          onChange={(event) => onPageChange?.(event, i)}\n          icon={icons.radio}\n          checkedIcon={icons.radioChecked}\n          aria-label={getItemAriaLabel?.(i)}\n        />\n      ))}\n    </HvRadioGroup>\n  );\n};\n"],"names":[],"mappings":";;;;;;;;;AAuDA,MAAM,mBAAmB,CACvB,WACA,kBACA,YACG;AACI,SAAA;AAAA,IACL,OAAO,aAAa,aAAa,oBAAC,aAAU,OAAO,GAAG,QAAQ,EAAA,CAAG,GAAI;AAAA,MACnE,WAAW,SAAS;AAAA,IAAA,CACrB;AAAA,IACD,cAAc;AAAA,MACZ,oBAAqB,oBAAA,aAAA,EAAY,OAAO,GAAG,QAAQ,GAAG;AAAA,MACtD;AAAA,QACE,WAAW,SAAS;AAAA,MAAA;AAAA,IACtB;AAAA,EAEJ;AACF;AAMa,MAAA,kBAAkB,CAAC,UAAgC;AACxD,QAAA;AAAA,IACJ;AAAA,IACA,SAAS;AAAA,IACT;AAAA,IACA;AAAA,IACA,QAAQ;AAAA,IACR,OAAO;AAAA,IACP;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EAAA,IACD,gBAAgB,mBAAmB,KAAK;AAE5C,QAAM,EAAE,SAAS,OAAO,WAAW,WAAW;AAE9C,QAAM,QAAQ,iBAAiB,gBAAgB,cAAc,OAAO;AAGlE,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAW,GAAG,QAAQ,MAAM,SAAS;AAAA,MACrC,SAAS;AAAA,QACP,YAAY,QAAQ;AAAA,MACtB;AAAA,MACA,aAAY;AAAA,MACX,GAAG;AAAA,MAEH,UAAM,MAAA,KAAK,EAAE,IAAI,CAAC,MACjB;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,SAAS;AAAA,YACP,OAAO,QAAQ;AAAA,YACf,MAAM,QAAQ;AAAA,UAChB;AAAA,UAEA,OAAO;AAAA,UACP,SAAS,SAAS;AAAA,UAClB,UAAU,CAAC,UAAU,eAAe,OAAO,CAAC;AAAA,UAC5C,MAAM,MAAM;AAAA,UACZ,aAAa,MAAM;AAAA,UACnB,cAAY,mBAAmB,CAAC;AAAA,QAAA;AAAA,QAN3B;AAAA,MAQR,CAAA;AAAA,IAAA;AAAA,EACH;AAEJ;"}
+{"version":3,"file":"DotPagination.js","sources":["../../../src/DotPagination/DotPagination.tsx"],"sourcesContent":["import { cloneElement } from \"react\";\nimport {\n  useDefaultProps,\n  type ExtractNames,\n} from \"@hitachivantara/uikit-react-utils\";\n\nimport { HvBaseRadio } from \"../BaseRadio\";\nimport { HvRadioGroup, HvRadioGroupProps } from \"../RadioGroup\";\nimport { range } from \"../utils/helpers\";\nimport { staticClasses, useClasses } from \"./DotPagination.styles\";\n\nconst currentStep = (\n  <div style={{ fontSize: 8 }}>\n    <div />\n  </div>\n);\n\nconst otherStep = (\n  <div style={{ fontSize: 4 }}>\n    <div />\n  </div>\n);\n\nexport { staticClasses as dotPaginationClasses };\n\nexport type HvDotPaginationClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvDotPaginationProps\n  extends Omit<HvRadioGroupProps, \"classes\"> {\n  /**\n   * Icon to override the default one used for the unselected state.\n   *\n   * The default icon is `OtherStep`.\n   */\n  unselectedIcon?: React.ReactElement;\n  /**\n   * Icon to override the default one used for the selected state.\n   *\n   * The default icon is `CurrentStep`.\n   */\n  selectedIcon?: React.ReactElement;\n  /**\n   *  The number of pages the component has.\n   */\n  pages?: number;\n  /**\n   * The currently selected page.\n   */\n  page?: number;\n  /**\n   * The callback fired when the page value changes.\n   */\n  onPageChange?: (\n    event: React.ChangeEvent<HTMLInputElement>,\n    page: number,\n  ) => void;\n  /**\n   * The callback fired to get the page aria label.\n   */\n  getItemAriaLabel?: (page: number) => string;\n  /**\n   * A Jss Object used to override or extend the styles applied.\n   */\n  classes?: HvDotPaginationClasses;\n}\n\nconst getSelectorIcons = (\n  radioIcon?: React.ReactElement,\n  radioCheckedIcon?: React.ReactElement,\n  classes?: HvDotPaginationClasses,\n) => {\n  return {\n    radio: cloneElement(radioIcon || otherStep, {\n      className: classes?.icon,\n    }),\n    radioChecked: cloneElement(radioCheckedIcon || currentStep, {\n      className: classes?.icon,\n    }),\n  };\n};\n\n/**\n * Pagination is the process of dividing a document into discrete pages. It relates to how users interact with structured content on a website or application.\n * This component uses Radio Buttons to represent each page.\n */\nexport const HvDotPagination = (props: HvDotPaginationProps) => {\n  const {\n    className,\n    classes: classesProp,\n    unselectedIcon,\n    selectedIcon,\n    pages = 1,\n    page = 0,\n    onPageChange,\n    getItemAriaLabel,\n    ...others\n  } = useDefaultProps(\"HvDotPagination\", props);\n\n  const { classes, cx } = useClasses(classesProp);\n\n  const icons = getSelectorIcons(unselectedIcon, selectedIcon, classes);\n\n  return (\n    <HvRadioGroup\n      className={cx(classes.root, className)}\n      classes={{\n        horizontal: classes.horizontal,\n      }}\n      orientation=\"horizontal\"\n      {...others}\n    >\n      {range(pages).map((i) => (\n        <HvBaseRadio\n          className={cx(classes.radioRoot, classes.radio)}\n          key={i}\n          value={i}\n          checked={page === i}\n          onChange={(event) => onPageChange?.(event, i)}\n          icon={icons.radio}\n          checkedIcon={icons.radioChecked}\n          inputProps={{ \"aria-label\": getItemAriaLabel?.(i) }}\n        />\n      ))}\n    </HvRadioGroup>\n  );\n};\n"],"names":[],"mappings":";;;;;;;;AAWA,MAAM,cACH,oBAAA,OAAA,EAAI,OAAO,EAAE,UAAU,EAAE,GACxB,UAAC,oBAAA,OAAA,CAAA,CAAI,EACP,CAAA;AAGF,MAAM,YACH,oBAAA,OAAA,EAAI,OAAO,EAAE,UAAU,EAAE,GACxB,UAAC,oBAAA,OAAA,CAAA,CAAI,EACP,CAAA;AA8CF,MAAM,mBAAmB,CACvB,WACA,kBACA,YACG;AACI,SAAA;AAAA,IACL,OAAO,aAAa,aAAa,WAAW;AAAA,MAC1C,WAAW,SAAS;AAAA,IAAA,CACrB;AAAA,IACD,cAAc,aAAa,oBAAoB,aAAa;AAAA,MAC1D,WAAW,SAAS;AAAA,IACrB,CAAA;AAAA,EACH;AACF;AAMa,MAAA,kBAAkB,CAAC,UAAgC;AACxD,QAAA;AAAA,IACJ;AAAA,IACA,SAAS;AAAA,IACT;AAAA,IACA;AAAA,IACA,QAAQ;AAAA,IACR,OAAO;AAAA,IACP;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EAAA,IACD,gBAAgB,mBAAmB,KAAK;AAE5C,QAAM,EAAE,SAAS,OAAO,WAAW,WAAW;AAE9C,QAAM,QAAQ,iBAAiB,gBAAgB,cAAc,OAAO;AAGlE,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAW,GAAG,QAAQ,MAAM,SAAS;AAAA,MACrC,SAAS;AAAA,QACP,YAAY,QAAQ;AAAA,MACtB;AAAA,MACA,aAAY;AAAA,MACX,GAAG;AAAA,MAEH,UAAM,MAAA,KAAK,EAAE,IAAI,CAAC,MACjB;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,WAAW,GAAG,QAAQ,WAAW,QAAQ,KAAK;AAAA,UAE9C,OAAO;AAAA,UACP,SAAS,SAAS;AAAA,UAClB,UAAU,CAAC,UAAU,eAAe,OAAO,CAAC;AAAA,UAC5C,MAAM,MAAM;AAAA,UACZ,aAAa,MAAM;AAAA,UACnB,YAAY,EAAE,cAAc,mBAAmB,CAAC,EAAE;AAAA,QAAA;AAAA,QAN7C;AAAA,MAQR,CAAA;AAAA,IAAA;AAAA,EACH;AAEJ;"}

package/dist/esm/DotPagination/DotPagination.styles.js

@@ -6,20 +6,26 @@ const { useClasses, staticClasses } = createClasses("HvDotPagination", {
     justifyContent: "center"
   },
   horizontal: {
-    width: "auto"
+    width: "auto",
+    gap: theme.space.xs
   },
+  /** @deprecated use `classes.radio` instead */
   radioRoot: {},
   radio: {
     height: 16,
     width: 16,
-    minWidth: 16,
+    minWidth: 24,
+    minHeight: 24,
     color: "inherit",
-    "&:hover": {
-      backgroundColor: theme.colors.infoDimmed,
-      borderRadius: theme.radii.full
+    borderRadius: theme.radii.full,
+    ":hover,:focus-within": {
+      backgroundColor: theme.colors.bgHover
     }
   },
   icon: {
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
     minWidth: 0,
     width: 16,
     height: 16,
@@ -29,6 +35,13 @@ const { useClasses, staticClasses } = createClasses("HvDotPagination", {
       border: "none",
       width: "unset",
       height: "unset"
+    },
+    "& > div": {
+      color: theme.colors.text,
+      backgroundColor: "currentcolor",
+      width: "1em",
+      height: "1em",
+      borderRadius: "50%"
     }
   }
 });

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

@@ -1 +1 @@
-{"version":3,"file":"DotPagination.styles.js","sources":["../../../src/DotPagination/DotPagination.styles.tsx"],"sourcesContent":["import { createClasses } from \"@hitachivantara/uikit-react-utils\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nexport const { useClasses, staticClasses } = createClasses(\"HvDotPagination\", {\n  root: {\n    display: \"flex\",\n    justifyContent: \"center\",\n  },\n\n  horizontal: {\n    width: \"auto\",\n  },\n\n  radioRoot: {},\n\n  radio: {\n    height: 16,\n    width: 16,\n    minWidth: 16,\n    color: \"inherit\",\n\n    \"&:hover\": {\n      backgroundColor: theme.colors.infoDimmed,\n      borderRadius: theme.radii.full,\n    },\n  },\n\n  icon: {\n    minWidth: 0,\n    width: 16,\n    height: 16,\n    color: \"inherit\",\n    \"&& svg\": {\n      color: \"inherit\",\n      border: \"none\",\n      width: \"unset\",\n      height: \"unset\",\n    },\n  },\n});\n"],"names":[],"mappings":";;AAGO,MAAM,EAAE,YAAY,kBAAkB,cAAc,mBAAmB;AAAA,EAC5E,MAAM;AAAA,IACJ,SAAS;AAAA,IACT,gBAAgB;AAAA,EAClB;AAAA,EAEA,YAAY;AAAA,IACV,OAAO;AAAA,EACT;AAAA,EAEA,WAAW,CAAC;AAAA,EAEZ,OAAO;AAAA,IACL,QAAQ;AAAA,IACR,OAAO;AAAA,IACP,UAAU;AAAA,IACV,OAAO;AAAA,IAEP,WAAW;AAAA,MACT,iBAAiB,MAAM,OAAO;AAAA,MAC9B,cAAc,MAAM,MAAM;AAAA,IAAA;AAAA,EAE9B;AAAA,EAEA,MAAM;AAAA,IACJ,UAAU;AAAA,IACV,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,OAAO;AAAA,IACP,UAAU;AAAA,MACR,OAAO;AAAA,MACP,QAAQ;AAAA,MACR,OAAO;AAAA,MACP,QAAQ;AAAA,IAAA;AAAA,EACV;AAEJ,CAAC;"}
+{"version":3,"file":"DotPagination.styles.js","sources":["../../../src/DotPagination/DotPagination.styles.tsx"],"sourcesContent":["import { createClasses } from \"@hitachivantara/uikit-react-utils\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nexport const { useClasses, staticClasses } = createClasses(\"HvDotPagination\", {\n  root: {\n    display: \"flex\",\n    justifyContent: \"center\",\n  },\n\n  horizontal: {\n    width: \"auto\",\n    gap: theme.space.xs,\n  },\n  /** @deprecated use `classes.radio` instead */\n  radioRoot: {},\n\n  radio: {\n    height: 16,\n    width: 16,\n    minWidth: 24,\n    minHeight: 24,\n    color: \"inherit\",\n    borderRadius: theme.radii.full,\n\n    \":hover,:focus-within\": {\n      backgroundColor: theme.colors.bgHover,\n    },\n  },\n\n  icon: {\n    display: \"flex\",\n    alignItems: \"center\",\n    justifyContent: \"center\",\n    minWidth: 0,\n    width: 16,\n    height: 16,\n    color: \"inherit\",\n    \"&& svg\": {\n      color: \"inherit\",\n      border: \"none\",\n      width: \"unset\",\n      height: \"unset\",\n    },\n    \"& > div\": {\n      color: theme.colors.text,\n      backgroundColor: \"currentcolor\",\n      width: \"1em\",\n      height: \"1em\",\n      borderRadius: \"50%\",\n    },\n  },\n});\n"],"names":[],"mappings":";;AAGO,MAAM,EAAE,YAAY,kBAAkB,cAAc,mBAAmB;AAAA,EAC5E,MAAM;AAAA,IACJ,SAAS;AAAA,IACT,gBAAgB;AAAA,EAClB;AAAA,EAEA,YAAY;AAAA,IACV,OAAO;AAAA,IACP,KAAK,MAAM,MAAM;AAAA,EACnB;AAAA;AAAA,EAEA,WAAW,CAAC;AAAA,EAEZ,OAAO;AAAA,IACL,QAAQ;AAAA,IACR,OAAO;AAAA,IACP,UAAU;AAAA,IACV,WAAW;AAAA,IACX,OAAO;AAAA,IACP,cAAc,MAAM,MAAM;AAAA,IAE1B,wBAAwB;AAAA,MACtB,iBAAiB,MAAM,OAAO;AAAA,IAAA;AAAA,EAElC;AAAA,EAEA,MAAM;AAAA,IACJ,SAAS;AAAA,IACT,YAAY;AAAA,IACZ,gBAAgB;AAAA,IAChB,UAAU;AAAA,IACV,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,OAAO;AAAA,IACP,UAAU;AAAA,MACR,OAAO;AAAA,MACP,QAAQ;AAAA,MACR,OAAO;AAAA,MACP,QAAQ;AAAA,IACV;AAAA,IACA,WAAW;AAAA,MACT,OAAO,MAAM,OAAO;AAAA,MACpB,iBAAiB;AAAA,MACjB,OAAO;AAAA,MACP,QAAQ;AAAA,MACR,cAAc;AAAA,IAAA;AAAA,EAChB;AAEJ,CAAC;"}

package/dist/esm/Drawer/Drawer.styles.js

@@ -13,8 +13,8 @@ const { staticClasses, useClasses } = createClasses("HvDrawer", {
   },
   closeButton: {
     position: "absolute",
-    top: theme.spacing("sm"),
-    right: theme.spacing("sm")
+    top: theme.space.sm,
+    right: theme.space.sm
   }
 });
 export {

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

@@ -1 +1 @@
-{"version":3,"file":"Drawer.styles.js","sources":["../../../src/Drawer/Drawer.styles.tsx"],"sourcesContent":["import { createClasses } from \"@hitachivantara/uikit-react-utils\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvDrawer\", {\n  root: {},\n  paper: {\n    backgroundColor: theme.colors.bgContainer,\n    padding: 0,\n    overflow: \"auto\",\n    boxShadow: theme.colors.shadow,\n  },\n  background: {\n    backgroundColor: theme.colors.bgOverlay,\n  },\n  closeButton: {\n    position: \"absolute\",\n    top: theme.spacing(\"sm\"),\n    right: theme.spacing(\"sm\"),\n  },\n});\n"],"names":[],"mappings":";;AAGO,MAAM,EAAE,eAAe,eAAe,cAAc,YAAY;AAAA,EACrE,MAAM,CAAC;AAAA,EACP,OAAO;AAAA,IACL,iBAAiB,MAAM,OAAO;AAAA,IAC9B,SAAS;AAAA,IACT,UAAU;AAAA,IACV,WAAW,MAAM,OAAO;AAAA,EAC1B;AAAA,EACA,YAAY;AAAA,IACV,iBAAiB,MAAM,OAAO;AAAA,EAChC;AAAA,EACA,aAAa;AAAA,IACX,UAAU;AAAA,IACV,KAAK,MAAM,QAAQ,IAAI;AAAA,IACvB,OAAO,MAAM,QAAQ,IAAI;AAAA,EAAA;AAE7B,CAAC;"}
+{"version":3,"file":"Drawer.styles.js","sources":["../../../src/Drawer/Drawer.styles.tsx"],"sourcesContent":["import { createClasses } from \"@hitachivantara/uikit-react-utils\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvDrawer\", {\n  root: {},\n  paper: {\n    backgroundColor: theme.colors.bgContainer,\n    padding: 0,\n    overflow: \"auto\",\n    boxShadow: theme.colors.shadow,\n  },\n  background: {\n    backgroundColor: theme.colors.bgOverlay,\n  },\n  closeButton: {\n    position: \"absolute\",\n    top: theme.space.sm,\n    right: theme.space.sm,\n  },\n});\n"],"names":[],"mappings":";;AAGO,MAAM,EAAE,eAAe,eAAe,cAAc,YAAY;AAAA,EACrE,MAAM,CAAC;AAAA,EACP,OAAO;AAAA,IACL,iBAAiB,MAAM,OAAO;AAAA,IAC9B,SAAS;AAAA,IACT,UAAU;AAAA,IACV,WAAW,MAAM,OAAO;AAAA,EAC1B;AAAA,EACA,YAAY;AAAA,IACV,iBAAiB,MAAM,OAAO;AAAA,EAChC;AAAA,EACA,aAAa;AAAA,IACX,UAAU;AAAA,IACV,KAAK,MAAM,MAAM;AAAA,IACjB,OAAO,MAAM,MAAM;AAAA,EAAA;AAEvB,CAAC;"}

package/dist/esm/DropDownMenu/DropDownMenu.js

@@ -83,11 +83,11 @@ const HvDropDownMenu = forwardRef(function HvDropDownMenu2(props, ref) {
     {
       ref,
       id,
-      className: cx(classes.container, classes.icon, className, {
+      className: cx(classes.root, classes.container, classes.icon, className, {
         [classes.iconSelected]: open
+        // TODO: rename to open
       }),
       classes: {
-        root: classes.root,
         container: classes.baseContainer,
         panel: classes.menuListRoot
       },

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

@@ -1 +1 @@
-{"version":3,"file":"DropDownMenu.js","sources":["../../../src/DropDownMenu/DropDownMenu.tsx"],"sourcesContent":["import { forwardRef, useMemo } from \"react\";\nimport { MoreOptionsVertical } from \"@hitachivantara/uikit-react-icons\";\nimport {\n  useDefaultProps,\n  type ExtractNames,\n} from \"@hitachivantara/uikit-react-utils\";\nimport { HvSize } from \"@hitachivantara/uikit-styles\";\n\nimport { HvBaseDropdown } from \"../BaseDropdown\";\nimport { useBaseDropdownContext } from \"../BaseDropdown/context\";\nimport { HvButtonVariant } from \"../Button\";\nimport { HvDropdownButton, HvDropdownButtonProps } from \"../DropdownButton\";\nimport { useControlled } from \"../hooks/useControlled\";\nimport { useLabels } from \"../hooks/useLabels\";\nimport { useUniqueId } from \"../hooks/useUniqueId\";\nimport { HvList, HvListProps, HvListValue } from \"../List\";\nimport { HvBaseProps } from \"../types/generic\";\nimport { getPrevNextFocus } from \"../utils/focusableElementFinder\";\nimport { isKey } from \"../utils/keyboardUtils\";\nimport { setId } from \"../utils/setId\";\nimport { staticClasses, useClasses } from \"./DropDownMenu.styles\";\n\nexport { staticClasses as dropDownMenuClasses };\n\nexport type HvDropDownMenuClasses = ExtractNames<typeof useClasses>;\n\nconst DEFAULT_LABELS = {\n  dropdownMenu: \"Dropdown menu\",\n};\n\nexport interface HvDropDownMenuProps\n  extends HvBaseProps<HTMLDivElement, \"onClick\" | \"onToggle\"> {\n  /** Icon. */\n  icon?: React.ReactElement;\n  /**\n   * A list containing the elements to be rendered.\n   *\n   * - label: The label of the element to be rendered.\n   * - selected: The selection state of the element.\n   * - disabled: The disabled state of the element.\n   * - icon: The icon node to be rendered on the left.\n   * - showNavIcon: If true renders the navigation icon on the right.\n   */\n  dataList: HvListValue[];\n  /** Placement of the dropdown. */\n  placement?: \"left\" | \"right\";\n  /** Disable the portal behavior. The children stay within it's parent DOM hierarchy. */\n  disablePortal?: boolean;\n  /** Function executed on toggle of the dropdown. Should receive the open status. */\n  onToggle?: (\n    event:\n      | Event\n      | React.KeyboardEvent<HTMLUListElement>\n      | React.ChangeEvent<HTMLInputElement>\n      | React.MouseEvent<HTMLLIElement>,\n    open: boolean,\n  ) => void;\n  /** Function executed in each onClick. Should received the clicked element. */\n  onClick?: (\n    event:\n      | React.ChangeEvent<HTMLInputElement>\n      | React.MouseEvent<HTMLLIElement>,\n    value: HvListValue,\n  ) => void;\n  /** Keep the Dropdown Menu opened after clicking one option */\n  keepOpened?: boolean;\n  /** Defines if the component is disabled. */\n  disabled?: boolean;\n  /** If true it should be displayed open. */\n  expanded?: boolean;\n  /** When uncontrolled, defines the initial expanded state. */\n  defaultExpanded?: boolean;\n  /**\n   * The variant to be used in the header.\n   * @deprecated Use `variant` instead\n   */\n  category?: HvButtonVariant;\n  /** The variant to be used in the header. */\n  variant?: HvButtonVariant;\n  /** Button size. */\n  size?: HvSize;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvDropDownMenuClasses;\n  /** An object containing all the labels. */\n  labels?: Partial<typeof DEFAULT_LABELS>;\n}\n\nconst HeaderComponent = forwardRef<HTMLButtonElement, HvDropdownButtonProps>(\n  function HeaderComponent(props, ref) {\n    const { open, icon, disabled, ...others } = props;\n    const { popperPlacement } = useBaseDropdownContext();\n\n    return (\n      <HvDropdownButton\n        icon\n        ref={ref}\n        open={open}\n        disabled={disabled}\n        aria-expanded={open}\n        aria-haspopup=\"menu\"\n        placement={popperPlacement}\n        {...others}\n      >\n        {icon || <MoreOptionsVertical role=\"presentation\" />}\n      </HvDropdownButton>\n    );\n  },\n);\n\n/**\n * A dropdown menu is a graphical control element, similar to a list box, that allows the user to choose a value from a list.\n */\nexport const HvDropDownMenu = forwardRef<\n  React.ComponentRef<typeof HvBaseDropdown>,\n  HvDropDownMenuProps\n>(function HvDropDownMenu(props, ref) {\n  const {\n    id: idProp,\n    classes: classesProp,\n    className,\n    icon,\n    placement = \"right\",\n    dataList,\n    disablePortal = false,\n    onToggle,\n    onClick,\n    keepOpened = true,\n    disabled = false,\n    expanded,\n    defaultExpanded = false,\n    category = \"secondaryGhost\", // TODO - remove and update variant default in v6\n    variant,\n    size = \"md\",\n    labels: labelsProp,\n    ...others\n  } = useDefaultProps(\"HvDropDownMenu\", props);\n\n  const { classes, cx } = useClasses(classesProp);\n\n  const labels = useLabels(DEFAULT_LABELS, labelsProp);\n\n  const [open, setOpen] = useControlled(expanded, Boolean(defaultExpanded));\n  const id = useUniqueId(idProp);\n\n  const listId = setId(id, \"list\");\n\n  const handleClose = (\n    event:\n      | React.KeyboardEvent<HTMLUListElement>\n      | React.ChangeEvent<HTMLInputElement>\n      | React.MouseEvent<HTMLLIElement>,\n  ) => {\n    // this will only run if uncontrolled\n    setOpen(false);\n    onToggle?.(event, false);\n  };\n\n  // If the ESCAPE key is pressed inside the list, the close handler must be called.\n  const handleKeyDown: HvListProps[\"onKeyDown\"] = (event) => {\n    if (isKey(event, \"Tab\")) {\n      const focusNodes = getPrevNextFocus(setId(id, \"icon-button\"));\n      const node = event.shiftKey ? focusNodes.prevFocus : focusNodes.nextFocus;\n      if (node) setTimeout(() => node.focus(), 0);\n      handleClose(event);\n    }\n    event.preventDefault();\n  };\n\n  const condensed = useMemo(() => dataList.every((el) => !el.icon), [dataList]);\n\n  return (\n    <HvBaseDropdown\n      ref={ref}\n      id={id}\n      className={cx(classes.container, classes.icon, className, {\n        [classes.iconSelected]: open,\n      })}\n      classes={{\n        root: classes.root,\n        container: classes.baseContainer,\n        panel: classes.menuListRoot,\n      }}\n      expanded={open && !disabled}\n      headerComponent={HeaderComponent}\n      // @ts-expect-error infer HeaderComponent typings\n      size={size}\n      variant={variant ?? category}\n      open={open}\n      aria-label={labels.dropdownMenu}\n      icon={icon}\n      placement={placement}\n      variableWidth\n      disablePortal={disablePortal}\n      onToggle={(e, s) => {\n        // this will only run if uncontrolled\n        setOpen(s);\n        onToggle?.(e, s);\n      }}\n      disabled={disabled}\n      onContainerCreation={(containerEl) => {\n        containerEl?.getElementsByTagName(\"li\")[0]?.focus();\n      }}\n      {...others}\n    >\n      <HvList\n        id={listId}\n        values={dataList}\n        selectable={false}\n        condensed={condensed}\n        onClick={(event, item) => {\n          if (!keepOpened) handleClose(event);\n          onClick?.(event, item);\n        }}\n        onKeyDown={handleKeyDown}\n        classes={{\n          root: classes.menuList,\n        }}\n      />\n    </HvBaseDropdown>\n  );\n});\n"],"names":["HeaderComponent","HvDropDownMenu"],"mappings":"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"}
+{"version":3,"file":"DropDownMenu.js","sources":["../../../src/DropDownMenu/DropDownMenu.tsx"],"sourcesContent":["import { forwardRef, useMemo } from \"react\";\nimport { MoreOptionsVertical } from \"@hitachivantara/uikit-react-icons\";\nimport {\n  useDefaultProps,\n  type ExtractNames,\n} from \"@hitachivantara/uikit-react-utils\";\nimport { HvSize } from \"@hitachivantara/uikit-styles\";\n\nimport { HvBaseDropdown } from \"../BaseDropdown\";\nimport { useBaseDropdownContext } from \"../BaseDropdown/context\";\nimport { HvButtonVariant } from \"../Button\";\nimport { HvDropdownButton, HvDropdownButtonProps } from \"../DropdownButton\";\nimport { useControlled } from \"../hooks/useControlled\";\nimport { useLabels } from \"../hooks/useLabels\";\nimport { useUniqueId } from \"../hooks/useUniqueId\";\nimport { HvList, HvListProps, HvListValue } from \"../List\";\nimport { HvBaseProps } from \"../types/generic\";\nimport { getPrevNextFocus } from \"../utils/focusableElementFinder\";\nimport { isKey } from \"../utils/keyboardUtils\";\nimport { setId } from \"../utils/setId\";\nimport { staticClasses, useClasses } from \"./DropDownMenu.styles\";\n\nexport { staticClasses as dropDownMenuClasses };\n\nexport type HvDropDownMenuClasses = ExtractNames<typeof useClasses>;\n\nconst DEFAULT_LABELS = {\n  dropdownMenu: \"Dropdown menu\",\n};\n\nexport interface HvDropDownMenuProps\n  extends HvBaseProps<HTMLDivElement, \"onClick\" | \"onToggle\"> {\n  /** Icon. */\n  icon?: React.ReactElement;\n  /**\n   * A list containing the elements to be rendered.\n   *\n   * - label: The label of the element to be rendered.\n   * - selected: The selection state of the element.\n   * - disabled: The disabled state of the element.\n   * - icon: The icon node to be rendered on the left.\n   * - showNavIcon: If true renders the navigation icon on the right.\n   */\n  dataList: HvListValue[];\n  /** Placement of the dropdown. */\n  placement?: \"left\" | \"right\";\n  /** Disable the portal behavior. The children stay within it's parent DOM hierarchy. */\n  disablePortal?: boolean;\n  /** Function executed on toggle of the dropdown. Should receive the open status. */\n  onToggle?: (\n    event:\n      | Event\n      | React.KeyboardEvent<HTMLUListElement>\n      | React.ChangeEvent<HTMLInputElement>\n      | React.MouseEvent<HTMLLIElement>,\n    open: boolean,\n  ) => void;\n  /** Function executed in each onClick. Should received the clicked element. */\n  onClick?: (\n    event:\n      | React.ChangeEvent<HTMLInputElement>\n      | React.MouseEvent<HTMLLIElement>,\n    value: HvListValue,\n  ) => void;\n  /** Keep the Dropdown Menu opened after clicking one option */\n  keepOpened?: boolean;\n  /** Defines if the component is disabled. */\n  disabled?: boolean;\n  /** If true it should be displayed open. */\n  expanded?: boolean;\n  /** When uncontrolled, defines the initial expanded state. */\n  defaultExpanded?: boolean;\n  /**\n   * The variant to be used in the header.\n   * @deprecated Use `variant` instead\n   */\n  category?: HvButtonVariant;\n  /** The variant to be used in the header. */\n  variant?: HvButtonVariant;\n  /** Button size. */\n  size?: HvSize;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvDropDownMenuClasses;\n  /** An object containing all the labels. */\n  labels?: Partial<typeof DEFAULT_LABELS>;\n}\n\nconst HeaderComponent = forwardRef<HTMLButtonElement, HvDropdownButtonProps>(\n  function HeaderComponent(props, ref) {\n    const { open, icon, disabled, ...others } = props;\n    const { popperPlacement } = useBaseDropdownContext();\n\n    return (\n      <HvDropdownButton\n        icon\n        ref={ref}\n        open={open}\n        disabled={disabled}\n        aria-expanded={open}\n        aria-haspopup=\"menu\"\n        placement={popperPlacement}\n        {...others}\n      >\n        {icon || <MoreOptionsVertical role=\"presentation\" />}\n      </HvDropdownButton>\n    );\n  },\n);\n\n/**\n * A dropdown menu is a graphical control element, similar to a list box, that allows the user to choose a value from a list.\n */\nexport const HvDropDownMenu = forwardRef<\n  React.ComponentRef<typeof HvBaseDropdown>,\n  HvDropDownMenuProps\n>(function HvDropDownMenu(props, ref) {\n  const {\n    id: idProp,\n    classes: classesProp,\n    className,\n    icon,\n    placement = \"right\",\n    dataList,\n    disablePortal = false,\n    onToggle,\n    onClick,\n    keepOpened = true,\n    disabled = false,\n    expanded,\n    defaultExpanded = false,\n    category = \"secondaryGhost\", // TODO - remove and update variant default in v6\n    variant,\n    size = \"md\",\n    labels: labelsProp,\n    ...others\n  } = useDefaultProps(\"HvDropDownMenu\", props);\n\n  const { classes, cx } = useClasses(classesProp);\n\n  const labels = useLabels(DEFAULT_LABELS, labelsProp);\n\n  const [open, setOpen] = useControlled(expanded, Boolean(defaultExpanded));\n  const id = useUniqueId(idProp);\n\n  const listId = setId(id, \"list\");\n\n  const handleClose = (\n    event:\n      | React.KeyboardEvent<HTMLUListElement>\n      | React.ChangeEvent<HTMLInputElement>\n      | React.MouseEvent<HTMLLIElement>,\n  ) => {\n    // this will only run if uncontrolled\n    setOpen(false);\n    onToggle?.(event, false);\n  };\n\n  // If the ESCAPE key is pressed inside the list, the close handler must be called.\n  const handleKeyDown: HvListProps[\"onKeyDown\"] = (event) => {\n    if (isKey(event, \"Tab\")) {\n      const focusNodes = getPrevNextFocus(setId(id, \"icon-button\"));\n      const node = event.shiftKey ? focusNodes.prevFocus : focusNodes.nextFocus;\n      if (node) setTimeout(() => node.focus(), 0);\n      handleClose(event);\n    }\n    event.preventDefault();\n  };\n\n  const condensed = useMemo(() => dataList.every((el) => !el.icon), [dataList]);\n\n  return (\n    <HvBaseDropdown\n      ref={ref}\n      id={id}\n      className={cx(classes.root, classes.container, classes.icon, className, {\n        [classes.iconSelected]: open, // TODO: rename to open\n      })}\n      classes={{\n        container: classes.baseContainer,\n        panel: classes.menuListRoot,\n      }}\n      expanded={open && !disabled}\n      headerComponent={HeaderComponent}\n      // @ts-expect-error infer HeaderComponent typings\n      size={size}\n      variant={variant ?? category}\n      open={open}\n      aria-label={labels.dropdownMenu}\n      icon={icon}\n      placement={placement}\n      variableWidth\n      disablePortal={disablePortal}\n      onToggle={(e, s) => {\n        // this will only run if uncontrolled\n        setOpen(s);\n        onToggle?.(e, s);\n      }}\n      disabled={disabled}\n      onContainerCreation={(containerEl) => {\n        containerEl?.getElementsByTagName(\"li\")[0]?.focus();\n      }}\n      {...others}\n    >\n      <HvList\n        id={listId}\n        values={dataList}\n        selectable={false}\n        condensed={condensed}\n        onClick={(event, item) => {\n          if (!keepOpened) handleClose(event);\n          onClick?.(event, item);\n        }}\n        onKeyDown={handleKeyDown}\n        classes={{\n          root: classes.menuList,\n        }}\n      />\n    </HvBaseDropdown>\n  );\n});\n"],"names":["HeaderComponent","HvDropDownMenu"],"mappings":"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"}

package/dist/esm/DropDownMenu/DropDownMenu.styles.js

@@ -1,25 +1,25 @@
 import { createClasses } from "@hitachivantara/uikit-react-utils";
 import { theme } from "@hitachivantara/uikit-styles";
 const { staticClasses, useClasses } = createClasses("HvDropDownMenu", {
+  root: {},
+  /** @deprecated use `classes.root` instead */
   container: {},
   baseContainer: {
+    "--r": theme.radii.base,
     "&[data-popper-placement=bottom-end] .HvBaseDropdown-panel": {
-      borderRadius: `${theme.radii.base} 0 ${theme.radii.base} ${theme.radii.base}`
+      borderRadius: "var(--r) 0 var(--r) var(--r)"
     },
     "&[data-popper-placement=bottom-start] .HvBaseDropdown-panel": {
-      borderRadius: `0 ${theme.radii.base} ${theme.radii.base} ${theme.radii.base}`
+      borderRadius: "0 var(--r) var(--r) var(--r)"
     },
     "&[data-popper-placement=top-start] .HvBaseDropdown-panel": {
-      borderRadius: `${theme.radii.base} ${theme.radii.base} ${theme.radii.base} 0`
+      borderRadius: "var(--r) var(--r) var(--r) 0"
     },
     "&[data-popper-placement=top-end] .HvBaseDropdown-panel": {
-      borderRadius: `${theme.radii.base} ${theme.radii.base} 0 ${theme.radii.base}`
+      borderRadius: "var(--r) var(--r) 0 var(--r)"
     }
   },
-  root: {
-    display: "inline-block",
-    width: "auto"
-  },
+  /** @deprecated use `classes.root` instead */
   icon: {},
   iconSelected: {
     boxShadow: theme.colors.shadow

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

@@ -1 +1 @@
-{"version":3,"file":"DropDownMenu.styles.js","sources":["../../../src/DropDownMenu/DropDownMenu.styles.tsx"],"sourcesContent":["import { createClasses } from \"@hitachivantara/uikit-react-utils\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvDropDownMenu\", {\n  container: {},\n  baseContainer: {\n    \"&[data-popper-placement=bottom-end] .HvBaseDropdown-panel\": {\n      borderRadius: `${theme.radii.base} 0 ${theme.radii.base} ${theme.radii.base}`,\n    },\n    \"&[data-popper-placement=bottom-start] .HvBaseDropdown-panel\": {\n      borderRadius: `0 ${theme.radii.base} ${theme.radii.base} ${theme.radii.base}`,\n    },\n    \"&[data-popper-placement=top-start] .HvBaseDropdown-panel\": {\n      borderRadius: `${theme.radii.base} ${theme.radii.base} ${theme.radii.base} 0`,\n    },\n    \"&[data-popper-placement=top-end] .HvBaseDropdown-panel\": {\n      borderRadius: `${theme.radii.base} ${theme.radii.base} 0 ${theme.radii.base}`,\n    },\n  },\n  root: {\n    display: \"inline-block\",\n    width: \"auto\",\n  },\n  icon: {},\n  iconSelected: {\n    boxShadow: theme.colors.shadow,\n  },\n  menuListRoot: {\n    padding: theme.space.sm,\n  },\n  menuList: {},\n});\n"],"names":[],"mappings":";;AAGO,MAAM,EAAE,eAAe,eAAe,cAAc,kBAAkB;AAAA,EAC3E,WAAW,CAAC;AAAA,EACZ,eAAe;AAAA,IACb,6DAA6D;AAAA,MAC3D,cAAc,GAAG,MAAM,MAAM,IAAI,MAAM,MAAM,MAAM,IAAI,IAAI,MAAM,MAAM,IAAI;AAAA,IAC7E;AAAA,IACA,+DAA+D;AAAA,MAC7D,cAAc,KAAK,MAAM,MAAM,IAAI,IAAI,MAAM,MAAM,IAAI,IAAI,MAAM,MAAM,IAAI;AAAA,IAC7E;AAAA,IACA,4DAA4D;AAAA,MAC1D,cAAc,GAAG,MAAM,MAAM,IAAI,IAAI,MAAM,MAAM,IAAI,IAAI,MAAM,MAAM,IAAI;AAAA,IAC3E;AAAA,IACA,0DAA0D;AAAA,MACxD,cAAc,GAAG,MAAM,MAAM,IAAI,IAAI,MAAM,MAAM,IAAI,MAAM,MAAM,MAAM,IAAI;AAAA,IAAA;AAAA,EAE/E;AAAA,EACA,MAAM;AAAA,IACJ,SAAS;AAAA,IACT,OAAO;AAAA,EACT;AAAA,EACA,MAAM,CAAC;AAAA,EACP,cAAc;AAAA,IACZ,WAAW,MAAM,OAAO;AAAA,EAC1B;AAAA,EACA,cAAc;AAAA,IACZ,SAAS,MAAM,MAAM;AAAA,EACvB;AAAA,EACA,UAAU,CAAA;AACZ,CAAC;"}
+{"version":3,"file":"DropDownMenu.styles.js","sources":["../../../src/DropDownMenu/DropDownMenu.styles.tsx"],"sourcesContent":["import { createClasses } from \"@hitachivantara/uikit-react-utils\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvDropDownMenu\", {\n  root: {},\n  /** @deprecated use `classes.root` instead */\n  container: {},\n  baseContainer: {\n    \"--r\": theme.radii.base,\n    \"&[data-popper-placement=bottom-end] .HvBaseDropdown-panel\": {\n      borderRadius: \"var(--r) 0 var(--r) var(--r)\",\n    },\n    \"&[data-popper-placement=bottom-start] .HvBaseDropdown-panel\": {\n      borderRadius: \"0 var(--r) var(--r) var(--r)\",\n    },\n    \"&[data-popper-placement=top-start] .HvBaseDropdown-panel\": {\n      borderRadius: \"var(--r) var(--r) var(--r) 0\",\n    },\n    \"&[data-popper-placement=top-end] .HvBaseDropdown-panel\": {\n      borderRadius: \"var(--r) var(--r) 0 var(--r)\",\n    },\n  },\n  /** @deprecated use `classes.root` instead */\n  icon: {},\n  iconSelected: {\n    boxShadow: theme.colors.shadow,\n  },\n  menuListRoot: {\n    padding: theme.space.sm,\n  },\n  menuList: {},\n});\n"],"names":[],"mappings":";;AAGO,MAAM,EAAE,eAAe,eAAe,cAAc,kBAAkB;AAAA,EAC3E,MAAM,CAAC;AAAA;AAAA,EAEP,WAAW,CAAC;AAAA,EACZ,eAAe;AAAA,IACb,OAAO,MAAM,MAAM;AAAA,IACnB,6DAA6D;AAAA,MAC3D,cAAc;AAAA,IAChB;AAAA,IACA,+DAA+D;AAAA,MAC7D,cAAc;AAAA,IAChB;AAAA,IACA,4DAA4D;AAAA,MAC1D,cAAc;AAAA,IAChB;AAAA,IACA,0DAA0D;AAAA,MACxD,cAAc;AAAA,IAAA;AAAA,EAElB;AAAA;AAAA,EAEA,MAAM,CAAC;AAAA,EACP,cAAc;AAAA,IACZ,WAAW,MAAM,OAAO;AAAA,EAC1B;AAAA,EACA,cAAc;AAAA,IACZ,SAAS,MAAM,MAAM;AAAA,EACvB;AAAA,EACA,UAAU,CAAA;AACZ,CAAC;"}

package/dist/esm/Dropdown/Dropdown.styles.js

@@ -24,14 +24,13 @@ const { staticClasses, useClasses } = createClasses("HvDropdown", {
   },
   dropdown: {
     width: "100%",
-    borderRadius: theme.radii.base,
-    "& $dropdownHeaderInvalid": {
-      border: `1px solid ${theme.form.errorColor}`
-    }
+    borderRadius: theme.radii.base
   },
   arrow: {},
   dropdownHeader: {},
-  dropdownHeaderInvalid: {},
+  dropdownHeaderInvalid: {
+    borderColor: theme.form.errorColor
+  },
   dropdownHeaderOpen: {},
   dropdownListContainer: {},
   rootList: {},
@@ -40,7 +39,7 @@ const { staticClasses, useClasses } = createClasses("HvDropdown", {
   },
   readOnly: {
     "& $dropdownHeader": {
-      border: `1px solid ${theme.colors.textSubtle}`,
+      borderColor: theme.colors.textSubtle,
       backgroundColor: theme.colors.bgContainer
     }
   }

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

@@ -1 +1 @@
-{"version":3,"file":"Dropdown.styles.js","sources":["../../../src/Dropdown/Dropdown.styles.tsx"],"sourcesContent":["import { createClasses } from \"@hitachivantara/uikit-react-utils\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvDropdown\", {\n  root: {\n    width: \"100%\",\n    position: \"relative\",\n    display: \"inline-block\",\n  },\n  labelContainer: { display: \"flex\", alignItems: \"flex-start\" },\n  label: {},\n  description: {},\n  error: {},\n  placeholder: {\n    overflow: \"hidden\",\n    textOverflow: \"ellipsis\",\n    whiteSpace: \"nowrap\",\n  },\n  placeholderClosed: {\n    color: theme.colors.textSubtle,\n  },\n  selectionDisabled: {\n    lineHeight: theme.space.md,\n    color: theme.colors.textDisabled,\n  },\n  dropdown: {\n    width: \"100%\",\n    borderRadius: theme.radii.base,\n\n    \"& $dropdownHeaderInvalid\": {\n      border: `1px solid ${theme.form.errorColor}`,\n    },\n  },\n  arrow: {},\n  dropdownHeader: {},\n  dropdownHeaderInvalid: {},\n  dropdownHeaderOpen: {},\n  dropdownListContainer: {},\n  rootList: {},\n  disabled: {\n    color: theme.colors.textDisabled,\n  },\n  readOnly: {\n    \"& $dropdownHeader\": {\n      border: `1px solid ${theme.colors.textSubtle}`,\n      backgroundColor: theme.colors.bgContainer,\n    },\n  },\n});\n"],"names":[],"mappings":";;AAGO,MAAM,EAAE,eAAe,eAAe,cAAc,cAAc;AAAA,EACvE,MAAM;AAAA,IACJ,OAAO;AAAA,IACP,UAAU;AAAA,IACV,SAAS;AAAA,EACX;AAAA,EACA,gBAAgB,EAAE,SAAS,QAAQ,YAAY,aAAa;AAAA,EAC5D,OAAO,CAAC;AAAA,EACR,aAAa,CAAC;AAAA,EACd,OAAO,CAAC;AAAA,EACR,aAAa;AAAA,IACX,UAAU;AAAA,IACV,cAAc;AAAA,IACd,YAAY;AAAA,EACd;AAAA,EACA,mBAAmB;AAAA,IACjB,OAAO,MAAM,OAAO;AAAA,EACtB;AAAA,EACA,mBAAmB;AAAA,IACjB,YAAY,MAAM,MAAM;AAAA,IACxB,OAAO,MAAM,OAAO;AAAA,EACtB;AAAA,EACA,UAAU;AAAA,IACR,OAAO;AAAA,IACP,cAAc,MAAM,MAAM;AAAA,IAE1B,4BAA4B;AAAA,MAC1B,QAAQ,aAAa,MAAM,KAAK,UAAU;AAAA,IAAA;AAAA,EAE9C;AAAA,EACA,OAAO,CAAC;AAAA,EACR,gBAAgB,CAAC;AAAA,EACjB,uBAAuB,CAAC;AAAA,EACxB,oBAAoB,CAAC;AAAA,EACrB,uBAAuB,CAAC;AAAA,EACxB,UAAU,CAAC;AAAA,EACX,UAAU;AAAA,IACR,OAAO,MAAM,OAAO;AAAA,EACtB;AAAA,EACA,UAAU;AAAA,IACR,qBAAqB;AAAA,MACnB,QAAQ,aAAa,MAAM,OAAO,UAAU;AAAA,MAC5C,iBAAiB,MAAM,OAAO;AAAA,IAAA;AAAA,EAChC;AAEJ,CAAC;"}
+{"version":3,"file":"Dropdown.styles.js","sources":["../../../src/Dropdown/Dropdown.styles.tsx"],"sourcesContent":["import { createClasses } from \"@hitachivantara/uikit-react-utils\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvDropdown\", {\n  root: {\n    width: \"100%\",\n    position: \"relative\",\n    display: \"inline-block\",\n  },\n  labelContainer: { display: \"flex\", alignItems: \"flex-start\" },\n  label: {},\n  description: {},\n  error: {},\n  placeholder: {\n    overflow: \"hidden\",\n    textOverflow: \"ellipsis\",\n    whiteSpace: \"nowrap\",\n  },\n  placeholderClosed: {\n    color: theme.colors.textSubtle,\n  },\n  selectionDisabled: {\n    lineHeight: theme.space.md,\n    color: theme.colors.textDisabled,\n  },\n  dropdown: {\n    width: \"100%\",\n    borderRadius: theme.radii.base,\n  },\n  arrow: {},\n  dropdownHeader: {},\n  dropdownHeaderInvalid: {\n    borderColor: theme.form.errorColor,\n  },\n  dropdownHeaderOpen: {},\n  dropdownListContainer: {},\n  rootList: {},\n  disabled: {\n    color: theme.colors.textDisabled,\n  },\n  readOnly: {\n    \"& $dropdownHeader\": {\n      borderColor: theme.colors.textSubtle,\n      backgroundColor: theme.colors.bgContainer,\n    },\n  },\n});\n"],"names":[],"mappings":";;AAGO,MAAM,EAAE,eAAe,eAAe,cAAc,cAAc;AAAA,EACvE,MAAM;AAAA,IACJ,OAAO;AAAA,IACP,UAAU;AAAA,IACV,SAAS;AAAA,EACX;AAAA,EACA,gBAAgB,EAAE,SAAS,QAAQ,YAAY,aAAa;AAAA,EAC5D,OAAO,CAAC;AAAA,EACR,aAAa,CAAC;AAAA,EACd,OAAO,CAAC;AAAA,EACR,aAAa;AAAA,IACX,UAAU;AAAA,IACV,cAAc;AAAA,IACd,YAAY;AAAA,EACd;AAAA,EACA,mBAAmB;AAAA,IACjB,OAAO,MAAM,OAAO;AAAA,EACtB;AAAA,EACA,mBAAmB;AAAA,IACjB,YAAY,MAAM,MAAM;AAAA,IACxB,OAAO,MAAM,OAAO;AAAA,EACtB;AAAA,EACA,UAAU;AAAA,IACR,OAAO;AAAA,IACP,cAAc,MAAM,MAAM;AAAA,EAC5B;AAAA,EACA,OAAO,CAAC;AAAA,EACR,gBAAgB,CAAC;AAAA,EACjB,uBAAuB;AAAA,IACrB,aAAa,MAAM,KAAK;AAAA,EAC1B;AAAA,EACA,oBAAoB,CAAC;AAAA,EACrB,uBAAuB,CAAC;AAAA,EACxB,UAAU,CAAC;AAAA,EACX,UAAU;AAAA,IACR,OAAO,MAAM,OAAO;AAAA,EACtB;AAAA,EACA,UAAU;AAAA,IACR,qBAAqB;AAAA,MACnB,aAAa,MAAM,OAAO;AAAA,MAC1B,iBAAiB,MAAM,OAAO;AAAA,IAAA;AAAA,EAChC;AAEJ,CAAC;"}

package/dist/esm/DropdownButton/DropdownButton.js

@@ -18,7 +18,7 @@ const HvDropdownButton = forwardRef(function HvDropdownButton2(props, ref) {
     variant,
     ...others
   } = useDefaultProps("HvDropdownButton", props);
-  const { classes, cx } = useClasses(classesProp);
+  const { classes, cx } = useClasses(classesProp, false);
   const endIcon = icon ? void 0 : /* @__PURE__ */ jsx(DropDownXS, { size: "XS", rotate: open });
   return /* @__PURE__ */ jsx(
     HvButton,
@@ -26,12 +26,11 @@ const HvDropdownButton = forwardRef(function HvDropdownButton2(props, ref) {
       ref,
       icon,
       disabled: disabled || readOnly,
+      "data-popper-placement": placement,
       className: cx(
         classes.root,
         {
           [classes.open]: open,
-          [classes.openUp]: open && placement.includes("top"),
-          [classes.openDown]: open && placement.includes("bottom"),
           [classes.disabled]: disabled,
           [classes.readOnly]: readOnly
         },

package/dist/esm/DropdownButton/DropdownButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"DropdownButton.js","sources":["../../../src/DropdownButton/DropdownButton.tsx"],"sourcesContent":["import { forwardRef } from \"react\";\nimport type { Placement } from \"@popperjs/core\";\nimport { DropDownXS } from \"@hitachivantara/uikit-react-icons\";\nimport {\n  useDefaultProps,\n  type ExtractNames,\n} from \"@hitachivantara/uikit-react-utils\";\n\nimport { HvButton, HvButtonProps } from \"../Button\";\nimport { staticClasses, useClasses } from \"./DropdownButton.styles\";\n\nexport { staticClasses as dropdownButtonClasses };\n\nexport type HvDropdownButtonClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvDropdownButtonProps\n  extends Omit<HvButtonProps, \"startAdornment\" | \"endAdornment\" | \"classes\"> {\n  /** Whether the button is in read only mode when used as a form element. */\n  readOnly?: boolean;\n  /** Whether the content triggered by the button is opened or not. */\n  open?: boolean;\n  /** Placement of the content triggered by the button. @default bottom */\n  placement?: Placement;\n  /** A Jss Object used to override or extend the styles applied. */\n  classes?: HvDropdownButtonClasses;\n}\n\n/**\n * IMPORTANT: This component is not ready to be exported to external users.\n *\n * Implements the DS dropdown button pattern.\n */\nexport const HvDropdownButton = forwardRef<\n  HTMLButtonElement,\n  HvDropdownButtonProps\n>(function HvDropdownButton(props, ref) {\n  const {\n    className,\n    classes: classesProp,\n    placement = \"bottom\",\n    disabled,\n    open,\n    icon,\n    readOnly,\n    children,\n    variant,\n    ...others\n  } = useDefaultProps(\"HvDropdownButton\", props);\n\n  const { classes, cx } = useClasses(classesProp);\n\n  const endIcon = icon ? undefined : <DropDownXS size=\"XS\" rotate={open} />;\n\n  return (\n    <HvButton\n      ref={ref}\n      icon={icon}\n      disabled={disabled || readOnly}\n      className={cx(\n        classes.root,\n        {\n          [classes.open]: open,\n          [classes.openUp]: open && placement.includes(\"top\"),\n          [classes.openDown]: open && placement.includes(\"bottom\"),\n          [classes.disabled]: disabled,\n          [classes.readOnly]: readOnly,\n        },\n        className,\n      )}\n      classes={{ endIcon: classes.arrowContainer }}\n      endIcon={endIcon}\n      variant={open ? \"secondarySubtle\" : variant}\n      {...others}\n    >\n      <div className={cx({ [classes.selection]: !icon })}>\n        {children && typeof children === \"string\" ? (\n          <div className={classes.placeholder}>{children}</div>\n        ) : (\n          children\n        )}\n      </div>\n    </HvButton>\n  );\n});\n"],"names":["HvDropdownButton"],"mappings":";;;;;;;AAgCO,MAAM,mBAAmB,WAG9B,SAASA,kBAAiB,OAAO,KAAK;AAChC,QAAA;AAAA,IACJ;AAAA,IACA,SAAS;AAAA,IACT,YAAY;AAAA,IACZ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EAAA,IACD,gBAAgB,oBAAoB,KAAK;AAE7C,QAAM,EAAE,SAAS,OAAO,WAAW,WAAW;AAExC,QAAA,UAAU,OAAO,SAAY,oBAAC,cAAW,MAAK,MAAK,QAAQ,MAAM;AAGrE,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA,UAAU,YAAY;AAAA,MACtB,WAAW;AAAA,QACT,QAAQ;AAAA,QACR;AAAA,UACE,CAAC,QAAQ,IAAI,GAAG;AAAA,UAChB,CAAC,QAAQ,MAAM,GAAG,QAAQ,UAAU,SAAS,KAAK;AAAA,UAClD,CAAC,QAAQ,QAAQ,GAAG,QAAQ,UAAU,SAAS,QAAQ;AAAA,UACvD,CAAC,QAAQ,QAAQ,GAAG;AAAA,UACpB,CAAC,QAAQ,QAAQ,GAAG;AAAA,QACtB;AAAA,QACA;AAAA,MACF;AAAA,MACA,SAAS,EAAE,SAAS,QAAQ,eAAe;AAAA,MAC3C;AAAA,MACA,SAAS,OAAO,oBAAoB;AAAA,MACnC,GAAG;AAAA,MAEJ,UAAA,oBAAC,OAAI,EAAA,WAAW,GAAG,EAAE,CAAC,QAAQ,SAAS,GAAG,CAAC,KAAM,CAAA,GAC9C,UAAY,YAAA,OAAO,aAAa,WAC9B,oBAAA,OAAA,EAAI,WAAW,QAAQ,aAAc,SAAS,CAAA,IAE/C,SAEJ,CAAA;AAAA,IAAA;AAAA,EACF;AAEJ,CAAC;"}
+{"version":3,"file":"DropdownButton.js","sources":["../../../src/DropdownButton/DropdownButton.tsx"],"sourcesContent":["import { forwardRef } from \"react\";\nimport type { Placement } from \"@popperjs/core\";\nimport { DropDownXS } from \"@hitachivantara/uikit-react-icons\";\nimport {\n  useDefaultProps,\n  type ExtractNames,\n} from \"@hitachivantara/uikit-react-utils\";\n\nimport { HvButton, HvButtonProps } from \"../Button\";\nimport { staticClasses, useClasses } from \"./DropdownButton.styles\";\n\nexport { staticClasses as dropdownButtonClasses };\n\nexport type HvDropdownButtonClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvDropdownButtonProps\n  extends Omit<HvButtonProps, \"startAdornment\" | \"endAdornment\" | \"classes\"> {\n  /** Whether the button is in read only mode when used as a form element. */\n  readOnly?: boolean;\n  /** Whether the content triggered by the button is opened or not. */\n  open?: boolean;\n  /** Placement of the content triggered by the button. @default bottom */\n  placement?: Placement;\n  /** A Jss Object used to override or extend the styles applied. */\n  classes?: HvDropdownButtonClasses;\n}\n\n/**\n * IMPORTANT: This component is not ready to be exported to external users.\n *\n * Implements the DS dropdown button pattern.\n */\nexport const HvDropdownButton = forwardRef<\n  HTMLButtonElement,\n  HvDropdownButtonProps\n>(function HvDropdownButton(props, ref) {\n  const {\n    className,\n    classes: classesProp,\n    placement = \"bottom\",\n    disabled,\n    open,\n    icon,\n    readOnly,\n    children,\n    variant,\n    ...others\n  } = useDefaultProps(\"HvDropdownButton\", props);\n\n  const { classes, cx } = useClasses(classesProp, false);\n\n  const endIcon = icon ? undefined : <DropDownXS size=\"XS\" rotate={open} />;\n\n  return (\n    <HvButton\n      ref={ref}\n      icon={icon}\n      disabled={disabled || readOnly}\n      data-popper-placement={placement}\n      className={cx(\n        classes.root,\n        {\n          [classes.open]: open,\n          [classes.disabled]: disabled,\n          [classes.readOnly]: readOnly,\n        },\n        className,\n      )}\n      classes={{ endIcon: classes.arrowContainer }}\n      endIcon={endIcon}\n      variant={open ? \"secondarySubtle\" : variant}\n      {...others}\n    >\n      <div className={cx({ [classes.selection]: !icon })}>\n        {children && typeof children === \"string\" ? (\n          <div className={classes.placeholder}>{children}</div>\n        ) : (\n          children\n        )}\n      </div>\n    </HvButton>\n  );\n});\n"],"names":["HvDropdownButton"],"mappings":";;;;;;;AAgCO,MAAM,mBAAmB,WAG9B,SAASA,kBAAiB,OAAO,KAAK;AAChC,QAAA;AAAA,IACJ;AAAA,IACA,SAAS;AAAA,IACT,YAAY;AAAA,IACZ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EAAA,IACD,gBAAgB,oBAAoB,KAAK;AAE7C,QAAM,EAAE,SAAS,GAAA,IAAO,WAAW,aAAa,KAAK;AAE/C,QAAA,UAAU,OAAO,SAAY,oBAAC,cAAW,MAAK,MAAK,QAAQ,MAAM;AAGrE,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA,UAAU,YAAY;AAAA,MACtB,yBAAuB;AAAA,MACvB,WAAW;AAAA,QACT,QAAQ;AAAA,QACR;AAAA,UACE,CAAC,QAAQ,IAAI,GAAG;AAAA,UAChB,CAAC,QAAQ,QAAQ,GAAG;AAAA,UACpB,CAAC,QAAQ,QAAQ,GAAG;AAAA,QACtB;AAAA,QACA;AAAA,MACF;AAAA,MACA,SAAS,EAAE,SAAS,QAAQ,eAAe;AAAA,MAC3C;AAAA,MACA,SAAS,OAAO,oBAAoB;AAAA,MACnC,GAAG;AAAA,MAEJ,UAAA,oBAAC,OAAI,EAAA,WAAW,GAAG,EAAE,CAAC,QAAQ,SAAS,GAAG,CAAC,KAAM,CAAA,GAC9C,UAAY,YAAA,OAAO,aAAa,WAC9B,oBAAA,OAAA,EAAI,WAAW,QAAQ,aAAc,SAAS,CAAA,IAE/C,SAEJ,CAAA;AAAA,IAAA;AAAA,EACF;AAEJ,CAAC;"}

package/dist/esm/DropdownButton/DropdownButton.styles.js

@@ -3,9 +3,7 @@ import { theme } from "@hitachivantara/uikit-styles";
 import { staticClasses as staticClasses$1 } from "../Button/Button.styles.js";
 import "../Button/Button.js";
 const disabledStyle = {
-  backgroundColor: theme.colors.bgDisabled,
-  borderColor: theme.colors.bgDisabled,
-  [`&.${staticClasses$1.subtle},&.${staticClasses$1.ghost}`]: {
+  [`&,&.${staticClasses$1.subtle},&.${staticClasses$1.ghost}`]: {
     backgroundColor: theme.colors.bgDisabled,
     borderColor: theme.colors.bgDisabled,
     "&:hover": { backgroundColor: theme.colors.bgDisabled }
@@ -30,13 +28,14 @@ const { staticClasses, useClasses } = createClasses("HvDropdownButton", {
     ...disabledStyle
   },
   open: {
-    backgroundColor: theme.colors.bgContainer
-  },
-  openUp: {
-    borderRadius: `0px 0px ${theme.radii.base} ${theme.radii.base}`
-  },
-  openDown: {
-    borderRadius: `${theme.radii.base} ${theme.radii.base} 0px 0px`
+    "--r": theme.radii.base,
+    backgroundColor: theme.colors.bgContainer,
+    "&[data-popper-placement*='top']": {
+      borderRadius: "0px 0px var(--r) var(--r)"
+    },
+    "&[data-popper-placement*='bottom']": {
+      borderRadius: "var(--r) var(--r) 0px 0px"
+    }
   },
   selection: {
     color: "inherit",

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

@@ -1 +1 @@
-{"version":3,"file":"DropdownButton.styles.js","sources":["../../../src/DropdownButton/DropdownButton.styles.tsx"],"sourcesContent":["import { createClasses } from \"@hitachivantara/uikit-react-utils\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { buttonClasses } from \"../Button\";\n\n// TODO: review override\nconst disabledStyle = {\n  backgroundColor: theme.colors.bgDisabled,\n  borderColor: theme.colors.bgDisabled,\n  [`&.${buttonClasses.subtle},&.${buttonClasses.ghost}`]: {\n    backgroundColor: theme.colors.bgDisabled,\n    borderColor: theme.colors.bgDisabled,\n    \"&:hover\": { backgroundColor: theme.colors.bgDisabled },\n  },\n};\n\nexport const { staticClasses, useClasses } = createClasses(\"HvDropdownButton\", {\n  root: {\n    userSelect: \"none\",\n    position: \"relative\",\n\n    [`&:not(.${buttonClasses.icon})`]: {\n      width: \"100%\",\n      minWidth: \"unset\",\n      justifyContent: \"flex-start\",\n      paddingLeft: theme.space.xs,\n    },\n  },\n  disabled: {\n    ...disabledStyle,\n  },\n  readOnly: {\n    userSelect: \"text\",\n    ...disabledStyle,\n  },\n  open: {\n    backgroundColor: theme.colors.bgContainer,\n  },\n  openUp: {\n    borderRadius: `0px 0px ${theme.radii.base} ${theme.radii.base}`,\n  },\n  openDown: {\n    borderRadius: `${theme.radii.base} ${theme.radii.base} 0px 0px`,\n  },\n  selection: {\n    color: \"inherit\",\n    flex: 1,\n    textAlign: \"start\",\n    overflow: \"auto\",\n    textOverflow: \"ellipsis\",\n    whiteSpace: \"nowrap\",\n  },\n  placeholder: {},\n  arrowContainer: {\n    marginRight: theme.spacing(-2),\n  },\n});\n"],"names":["buttonClasses"],"mappings":";;;;AAMA,MAAM,gBAAgB;AAAA,EACpB,iBAAiB,MAAM,OAAO;AAAA,EAC9B,aAAa,MAAM,OAAO;AAAA,EAC1B,CAAC,KAAKA,gBAAc,MAAM,MAAMA,gBAAc,KAAK,EAAE,GAAG;AAAA,IACtD,iBAAiB,MAAM,OAAO;AAAA,IAC9B,aAAa,MAAM,OAAO;AAAA,IAC1B,WAAW,EAAE,iBAAiB,MAAM,OAAO,WAAW;AAAA,EAAA;AAE1D;AAEO,MAAM,EAAE,eAAe,eAAe,cAAc,oBAAoB;AAAA,EAC7E,MAAM;AAAA,IACJ,YAAY;AAAA,IACZ,UAAU;AAAA,IAEV,CAAC,UAAUA,gBAAc,IAAI,GAAG,GAAG;AAAA,MACjC,OAAO;AAAA,MACP,UAAU;AAAA,MACV,gBAAgB;AAAA,MAChB,aAAa,MAAM,MAAM;AAAA,IAAA;AAAA,EAE7B;AAAA,EACA,UAAU;AAAA,IACR,GAAG;AAAA,EACL;AAAA,EACA,UAAU;AAAA,IACR,YAAY;AAAA,IACZ,GAAG;AAAA,EACL;AAAA,EACA,MAAM;AAAA,IACJ,iBAAiB,MAAM,OAAO;AAAA,EAChC;AAAA,EACA,QAAQ;AAAA,IACN,cAAc,WAAW,MAAM,MAAM,IAAI,IAAI,MAAM,MAAM,IAAI;AAAA,EAC/D;AAAA,EACA,UAAU;AAAA,IACR,cAAc,GAAG,MAAM,MAAM,IAAI,IAAI,MAAM,MAAM,IAAI;AAAA,EACvD;AAAA,EACA,WAAW;AAAA,IACT,OAAO;AAAA,IACP,MAAM;AAAA,IACN,WAAW;AAAA,IACX,UAAU;AAAA,IACV,cAAc;AAAA,IACd,YAAY;AAAA,EACd;AAAA,EACA,aAAa,CAAC;AAAA,EACd,gBAAgB;AAAA,IACd,aAAa,MAAM,QAAQ,EAAE;AAAA,EAAA;AAEjC,CAAC;"}
+{"version":3,"file":"DropdownButton.styles.js","sources":["../../../src/DropdownButton/DropdownButton.styles.tsx"],"sourcesContent":["import { createClasses } from \"@hitachivantara/uikit-react-utils\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { buttonClasses } from \"../Button\";\n\n// TODO: review override\nconst disabledStyle = {\n  [`&,&.${buttonClasses.subtle},&.${buttonClasses.ghost}`]: {\n    backgroundColor: theme.colors.bgDisabled,\n    borderColor: theme.colors.bgDisabled,\n    \"&:hover\": { backgroundColor: theme.colors.bgDisabled },\n  },\n};\n\nexport const { staticClasses, useClasses } = createClasses(\"HvDropdownButton\", {\n  root: {\n    userSelect: \"none\",\n    position: \"relative\",\n\n    [`&:not(.${buttonClasses.icon})`]: {\n      width: \"100%\",\n      minWidth: \"unset\",\n      justifyContent: \"flex-start\",\n      paddingLeft: theme.space.xs,\n    },\n  },\n  disabled: {\n    ...disabledStyle,\n  },\n  readOnly: {\n    userSelect: \"text\",\n    ...disabledStyle,\n  },\n  open: {\n    \"--r\": theme.radii.base,\n    backgroundColor: theme.colors.bgContainer,\n    \"&[data-popper-placement*='top']\": {\n      borderRadius: \"0px 0px var(--r) var(--r)\",\n    },\n    \"&[data-popper-placement*='bottom']\": {\n      borderRadius: \"var(--r) var(--r) 0px 0px\",\n    },\n  },\n  selection: {\n    color: \"inherit\",\n    flex: 1,\n    textAlign: \"start\",\n    overflow: \"auto\",\n    textOverflow: \"ellipsis\",\n    whiteSpace: \"nowrap\",\n  },\n  placeholder: {},\n  arrowContainer: {\n    marginRight: theme.spacing(-2),\n  },\n});\n"],"names":["buttonClasses"],"mappings":";;;;AAMA,MAAM,gBAAgB;AAAA,EACpB,CAAC,OAAOA,gBAAc,MAAM,MAAMA,gBAAc,KAAK,EAAE,GAAG;AAAA,IACxD,iBAAiB,MAAM,OAAO;AAAA,IAC9B,aAAa,MAAM,OAAO;AAAA,IAC1B,WAAW,EAAE,iBAAiB,MAAM,OAAO,WAAW;AAAA,EAAA;AAE1D;AAEO,MAAM,EAAE,eAAe,eAAe,cAAc,oBAAoB;AAAA,EAC7E,MAAM;AAAA,IACJ,YAAY;AAAA,IACZ,UAAU;AAAA,IAEV,CAAC,UAAUA,gBAAc,IAAI,GAAG,GAAG;AAAA,MACjC,OAAO;AAAA,MACP,UAAU;AAAA,MACV,gBAAgB;AAAA,MAChB,aAAa,MAAM,MAAM;AAAA,IAAA;AAAA,EAE7B;AAAA,EACA,UAAU;AAAA,IACR,GAAG;AAAA,EACL;AAAA,EACA,UAAU;AAAA,IACR,YAAY;AAAA,IACZ,GAAG;AAAA,EACL;AAAA,EACA,MAAM;AAAA,IACJ,OAAO,MAAM,MAAM;AAAA,IACnB,iBAAiB,MAAM,OAAO;AAAA,IAC9B,mCAAmC;AAAA,MACjC,cAAc;AAAA,IAChB;AAAA,IACA,sCAAsC;AAAA,MACpC,cAAc;AAAA,IAAA;AAAA,EAElB;AAAA,EACA,WAAW;AAAA,IACT,OAAO;AAAA,IACP,MAAM;AAAA,IACN,WAAW;AAAA,IACX,UAAU;AAAA,IACV,cAAc;AAAA,IACd,YAAY;AAAA,EACd;AAAA,EACA,aAAa,CAAC;AAAA,EACd,gBAAgB;AAAA,IACd,aAAa,MAAM,QAAQ,EAAE;AAAA,EAAA;AAEjC,CAAC;"}

package/dist/esm/FileUploader/File/File.js

@@ -60,8 +60,10 @@ const HvFile = (props) => {
       }
     ),
     statusIcon,
-    /* @__PURE__ */ jsx(HvTypography, { className: classes.nameText, variant: "label", children: data.name }),
-    /* @__PURE__ */ jsx("span", { className: classes.progressTextContainer, children: progressText }),
+    /* @__PURE__ */ jsxs("div", { className: classes.nameText, children: [
+      /* @__PURE__ */ jsx(HvTypography, { noWrap: true, variant: "label", children: data.name }),
+      /* @__PURE__ */ jsx("span", { className: classes.progressTextContainer, children: progressText })
+    ] }),
     data.preview && /* @__PURE__ */ jsx("div", { className: classes.previewContainer, children: data.preview }),
     /* @__PURE__ */ jsx(
       HvIconButton,

package/dist/esm/FileUploader/File/File.js.map

@@ -1 +1 @@
-{"version":3,"file":"File.js","sources":["../../../../src/FileUploader/File/File.tsx"],"sourcesContent":["import { Close, Fail, Success } from \"@hitachivantara/uikit-react-icons\";\nimport {\n  useDefaultProps,\n  type ExtractNames,\n} from \"@hitachivantara/uikit-react-utils\";\n\nimport { HvIconButton } from \"../../IconButton\";\nimport { HvProgressBar } from \"../../ProgressBar\";\nimport { HvTypography } from \"../../Typography\";\nimport { convertUnits } from \"../utils\";\nimport { staticClasses, useClasses } from \"./File.styles\";\n\nexport { staticClasses as fileClasses };\n\nexport type HvFileClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvFileData extends Omit<File, \"name\" | \"size\"> {\n  /**\n   * The file id.\n   */\n  id?: string;\n  /**\n   * The file name.\n   */\n  name?: string;\n  /**\n   * The upload status.\n   */\n  status?: \"progress\" | \"success\" | \"fail\";\n  /**\n   * The file size in bytes.\n   */\n  size?: number;\n  /**\n   * Upload progress in bytes.\n   */\n  progress?: number;\n  /**\n   * Optional node representing a preview of the uploaded file.\n   */\n  preview?: React.ReactNode;\n  /**\n   * Error message when the upload failed.\n   */\n  errorMessage?: string;\n}\n\nexport type HvFilesAddedEvent = (files: HvFileData[]) => void;\n\nexport type HvFileRemovedEvent = (file: HvFileData) => void;\n\nexport type HvFileProps = {\n  /**\n   * Id to be applied to the root node.\n   */\n  id?: string;\n  /**\n   * File information to be displayed.\n   */\n  data: HvFileData;\n  /**\n   * Callback fired when file is removed from list.\n   */\n  onFileRemoved?: HvFileRemovedEvent;\n  /**\n   * Value of aria-label to apply to remove file button in file list.\n   * */\n  removeFileButtonLabel?: string;\n  /**\n   * A Jss Object used to override or extend the styles applied to the component.\n   */\n  classes?: HvFileClasses;\n};\n\nconst getStatusIcon = (\n  classes?: HvFileClasses,\n  status?: HvFileData[\"status\"],\n) => {\n  switch (status) {\n    case \"success\":\n      return <Success className={classes?.icon} color=\"positive\" />;\n    case \"fail\":\n      return <Fail className={classes?.icon} color=\"negative\" />;\n    default:\n      return <div className={classes?.icon} />;\n  }\n};\n\nconst getProgressText = (data: HvFileData, classes?: HvFileClasses) => {\n  const hasFailed = data.status === \"fail\";\n  const inProgress = data.status === \"progress\";\n\n  return (\n    <>\n      {data.progress || data.size || data.errorMessage ? `\\xa0|\\xa0` : null}\n\n      {inProgress && data.progress != null && (\n        <HvTypography variant=\"label\">\n          {`${convertUnits(data.progress)}\\xa0/\\xa0`}\n        </HvTypography>\n      )}\n\n      {!hasFailed && data.size && (\n        <HvTypography>{`${convertUnits(data.size)}`}</HvTypography>\n      )}\n\n      {hasFailed && data.errorMessage && (\n        <HvTypography className={classes?.fail}>\n          {data.errorMessage}\n        </HvTypography>\n      )}\n    </>\n  );\n};\n\nconst getProgressBarWith = ({ size, progress }: HvFileData) => {\n  const width =\n    progress != null && size != null ? Math.round((progress * 100) / size) : 0;\n\n  return width;\n};\n\nexport const HvFile = (props: HvFileProps) => {\n  const {\n    classes: classesProp,\n    data,\n    onFileRemoved,\n    removeFileButtonLabel,\n  } = useDefaultProps(\"HvFile\", props);\n  const { classes, cx } = useClasses(classesProp);\n\n  const hasError = data.status === \"fail\";\n\n  const inProgress = data.status === \"progress\";\n\n  const progressText = getProgressText(data, classes);\n\n  const statusIcon = getStatusIcon(classes, data.status);\n\n  const currentProgress = getProgressBarWith(data);\n\n  return (\n    <li className={classes.root}>\n      {!hasError && inProgress && (\n        <HvProgressBar\n          classes={{\n            root: classes.progressbar,\n            progressBarContainer: cx(\n              classes.progressbarContainer,\n              classes.progressbarBack,\n            ),\n          }}\n          value={currentProgress}\n          hideLabel\n        />\n      )}\n\n      {statusIcon}\n\n      <HvTypography className={classes.nameText} variant=\"label\">\n        {data.name}\n      </HvTypography>\n\n      <span className={classes.progressTextContainer}>{progressText}</span>\n\n      {data.preview && (\n        <div className={classes.previewContainer}>{data.preview}</div>\n      )}\n\n      <HvIconButton\n        title={removeFileButtonLabel}\n        className={classes.removeButton}\n        onClick={() => onFileRemoved?.(data)}\n      >\n        <Close iconSize=\"XS\" />\n      </HvIconButton>\n    </li>\n  );\n};\n"],"names":[],"mappings":";;;;;;;;;AA0EA,MAAM,gBAAgB,CACpB,SACA,WACG;AACH,UAAQ,QAAQ;AAAA,IACd,KAAK;AACH,iCAAQ,SAAQ,EAAA,WAAW,SAAS,MAAM,OAAM,YAAW;AAAA,IAC7D,KAAK;AACH,iCAAQ,MAAK,EAAA,WAAW,SAAS,MAAM,OAAM,YAAW;AAAA,IAC1D;AACE,aAAQ,oBAAA,OAAA,EAAI,WAAW,SAAS,KAAM,CAAA;AAAA,EAAA;AAE5C;AAEA,MAAM,kBAAkB,CAAC,MAAkB,YAA4B;AAC/D,QAAA,YAAY,KAAK,WAAW;AAC5B,QAAA,aAAa,KAAK,WAAW;AAEnC,SAEK,qBAAA,UAAA,EAAA,UAAA;AAAA,IAAA,KAAK,YAAY,KAAK,QAAQ,KAAK,eAAe,QAAc;AAAA,IAEhE,cAAc,KAAK,YAAY,QAC7B,oBAAA,cAAA,EAAa,SAAQ,SACnB,UAAG,GAAA,aAAa,KAAK,QAAQ,CAAC,OACjC;AAAA,IAGD,CAAC,aAAa,KAAK,QAClB,oBAAC,cAAc,EAAA,UAAA,GAAG,aAAa,KAAK,IAAI,CAAC,GAAG,CAAA;AAAA,IAG7C,aAAa,KAAK,gBACjB,oBAAC,gBAAa,WAAW,SAAS,MAC/B,UAAA,KAAK,aACR,CAAA;AAAA,EAAA,GAEJ;AAEJ;AAEA,MAAM,qBAAqB,CAAC,EAAE,MAAM,eAA2B;AACvD,QAAA,QACJ,YAAY,QAAQ,QAAQ,OAAO,KAAK,MAAO,WAAW,MAAO,IAAI,IAAI;AAEpE,SAAA;AACT;AAEa,MAAA,SAAS,CAAC,UAAuB;AACtC,QAAA;AAAA,IACJ,SAAS;AAAA,IACT;AAAA,IACA;AAAA,IACA;AAAA,EAAA,IACE,gBAAgB,UAAU,KAAK;AACnC,QAAM,EAAE,SAAS,OAAO,WAAW,WAAW;AAExC,QAAA,WAAW,KAAK,WAAW;AAE3B,QAAA,aAAa,KAAK,WAAW;AAE7B,QAAA,eAAe,gBAAgB,MAAM,OAAO;AAElD,QAAM,aAAa,cAAc,SAAS,KAAK,MAAM;AAE/C,QAAA,kBAAkB,mBAAmB,IAAI;AAE/C,SACG,qBAAA,MAAA,EAAG,WAAW,QAAQ,MACpB,UAAA;AAAA,IAAA,CAAC,YAAY,cACZ;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,SAAS;AAAA,UACP,MAAM,QAAQ;AAAA,UACd,sBAAsB;AAAA,YACpB,QAAQ;AAAA,YACR,QAAQ;AAAA,UAAA;AAAA,QAEZ;AAAA,QACA,OAAO;AAAA,QACP,WAAS;AAAA,MAAA;AAAA,IACX;AAAA,IAGD;AAAA,IAED,oBAAC,gBAAa,WAAW,QAAQ,UAAU,SAAQ,SAChD,eAAK,KACR,CAAA;AAAA,IAEC,oBAAA,QAAA,EAAK,WAAW,QAAQ,uBAAwB,UAAa,cAAA;AAAA,IAE7D,KAAK,WACH,oBAAA,OAAA,EAAI,WAAW,QAAQ,kBAAmB,eAAK,QAAQ,CAAA;AAAA,IAG1D;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,OAAO;AAAA,QACP,WAAW,QAAQ;AAAA,QACnB,SAAS,MAAM,gBAAgB,IAAI;AAAA,QAEnC,UAAA,oBAAC,OAAM,EAAA,UAAS,KAAK,CAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EACvB,GACF;AAEJ;"}
+{"version":3,"file":"File.js","sources":["../../../../src/FileUploader/File/File.tsx"],"sourcesContent":["import { Close, Fail, Success } from \"@hitachivantara/uikit-react-icons\";\nimport {\n  useDefaultProps,\n  type ExtractNames,\n} from \"@hitachivantara/uikit-react-utils\";\n\nimport { HvIconButton } from \"../../IconButton\";\nimport { HvProgressBar } from \"../../ProgressBar\";\nimport { HvTypography } from \"../../Typography\";\nimport { convertUnits } from \"../utils\";\nimport { staticClasses, useClasses } from \"./File.styles\";\n\nexport { staticClasses as fileClasses };\n\nexport type HvFileClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvFileData extends Omit<File, \"name\" | \"size\"> {\n  /**\n   * The file id.\n   */\n  id?: string;\n  /**\n   * The file name.\n   */\n  name?: string;\n  /**\n   * The upload status.\n   */\n  status?: \"progress\" | \"success\" | \"fail\";\n  /**\n   * The file size in bytes.\n   */\n  size?: number;\n  /**\n   * Upload progress in bytes.\n   */\n  progress?: number;\n  /**\n   * Optional node representing a preview of the uploaded file.\n   */\n  preview?: React.ReactNode;\n  /**\n   * Error message when the upload failed.\n   */\n  errorMessage?: string;\n}\n\nexport type HvFilesAddedEvent = (files: HvFileData[]) => void;\n\nexport type HvFileRemovedEvent = (file: HvFileData) => void;\n\nexport type HvFileProps = {\n  /**\n   * Id to be applied to the root node.\n   */\n  id?: string;\n  /**\n   * File information to be displayed.\n   */\n  data: HvFileData;\n  /**\n   * Callback fired when file is removed from list.\n   */\n  onFileRemoved?: HvFileRemovedEvent;\n  /**\n   * Value of aria-label to apply to remove file button in file list.\n   * */\n  removeFileButtonLabel?: string;\n  /**\n   * A Jss Object used to override or extend the styles applied to the component.\n   */\n  classes?: HvFileClasses;\n};\n\nconst getStatusIcon = (\n  classes?: HvFileClasses,\n  status?: HvFileData[\"status\"],\n) => {\n  switch (status) {\n    case \"success\":\n      return <Success className={classes?.icon} color=\"positive\" />;\n    case \"fail\":\n      return <Fail className={classes?.icon} color=\"negative\" />;\n    default:\n      return <div className={classes?.icon} />;\n  }\n};\n\nconst getProgressText = (data: HvFileData, classes?: HvFileClasses) => {\n  const hasFailed = data.status === \"fail\";\n  const inProgress = data.status === \"progress\";\n\n  return (\n    <>\n      {data.progress || data.size || data.errorMessage ? `\\xa0|\\xa0` : null}\n\n      {inProgress && data.progress != null && (\n        <HvTypography variant=\"label\">\n          {`${convertUnits(data.progress)}\\xa0/\\xa0`}\n        </HvTypography>\n      )}\n\n      {!hasFailed && data.size && (\n        <HvTypography>{`${convertUnits(data.size)}`}</HvTypography>\n      )}\n\n      {hasFailed && data.errorMessage && (\n        <HvTypography className={classes?.fail}>\n          {data.errorMessage}\n        </HvTypography>\n      )}\n    </>\n  );\n};\n\nconst getProgressBarWith = ({ size, progress }: HvFileData) => {\n  const width =\n    progress != null && size != null ? Math.round((progress * 100) / size) : 0;\n\n  return width;\n};\n\nexport const HvFile = (props: HvFileProps) => {\n  const {\n    classes: classesProp,\n    data,\n    onFileRemoved,\n    removeFileButtonLabel,\n  } = useDefaultProps(\"HvFile\", props);\n  const { classes, cx } = useClasses(classesProp);\n\n  const hasError = data.status === \"fail\";\n\n  const inProgress = data.status === \"progress\";\n\n  const progressText = getProgressText(data, classes);\n\n  const statusIcon = getStatusIcon(classes, data.status);\n\n  const currentProgress = getProgressBarWith(data);\n\n  return (\n    <li className={classes.root}>\n      {!hasError && inProgress && (\n        <HvProgressBar\n          classes={{\n            root: classes.progressbar,\n            progressBarContainer: cx(\n              classes.progressbarContainer,\n              classes.progressbarBack,\n            ),\n          }}\n          value={currentProgress}\n          hideLabel\n        />\n      )}\n\n      {statusIcon}\n\n      <div className={classes.nameText}>\n        <HvTypography noWrap variant=\"label\">\n          {data.name}\n        </HvTypography>\n\n        <span className={classes.progressTextContainer}>{progressText}</span>\n      </div>\n\n      {data.preview && (\n        <div className={classes.previewContainer}>{data.preview}</div>\n      )}\n\n      <HvIconButton\n        title={removeFileButtonLabel}\n        className={classes.removeButton}\n        onClick={() => onFileRemoved?.(data)}\n      >\n        <Close iconSize=\"XS\" />\n      </HvIconButton>\n    </li>\n  );\n};\n"],"names":[],"mappings":";;;;;;;;;AA0EA,MAAM,gBAAgB,CACpB,SACA,WACG;AACH,UAAQ,QAAQ;AAAA,IACd,KAAK;AACH,iCAAQ,SAAQ,EAAA,WAAW,SAAS,MAAM,OAAM,YAAW;AAAA,IAC7D,KAAK;AACH,iCAAQ,MAAK,EAAA,WAAW,SAAS,MAAM,OAAM,YAAW;AAAA,IAC1D;AACE,aAAQ,oBAAA,OAAA,EAAI,WAAW,SAAS,KAAM,CAAA;AAAA,EAAA;AAE5C;AAEA,MAAM,kBAAkB,CAAC,MAAkB,YAA4B;AAC/D,QAAA,YAAY,KAAK,WAAW;AAC5B,QAAA,aAAa,KAAK,WAAW;AAEnC,SAEK,qBAAA,UAAA,EAAA,UAAA;AAAA,IAAA,KAAK,YAAY,KAAK,QAAQ,KAAK,eAAe,QAAc;AAAA,IAEhE,cAAc,KAAK,YAAY,QAC7B,oBAAA,cAAA,EAAa,SAAQ,SACnB,UAAG,GAAA,aAAa,KAAK,QAAQ,CAAC,OACjC;AAAA,IAGD,CAAC,aAAa,KAAK,QAClB,oBAAC,cAAc,EAAA,UAAA,GAAG,aAAa,KAAK,IAAI,CAAC,GAAG,CAAA;AAAA,IAG7C,aAAa,KAAK,gBACjB,oBAAC,gBAAa,WAAW,SAAS,MAC/B,UAAA,KAAK,aACR,CAAA;AAAA,EAAA,GAEJ;AAEJ;AAEA,MAAM,qBAAqB,CAAC,EAAE,MAAM,eAA2B;AACvD,QAAA,QACJ,YAAY,QAAQ,QAAQ,OAAO,KAAK,MAAO,WAAW,MAAO,IAAI,IAAI;AAEpE,SAAA;AACT;AAEa,MAAA,SAAS,CAAC,UAAuB;AACtC,QAAA;AAAA,IACJ,SAAS;AAAA,IACT;AAAA,IACA;AAAA,IACA;AAAA,EAAA,IACE,gBAAgB,UAAU,KAAK;AACnC,QAAM,EAAE,SAAS,OAAO,WAAW,WAAW;AAExC,QAAA,WAAW,KAAK,WAAW;AAE3B,QAAA,aAAa,KAAK,WAAW;AAE7B,QAAA,eAAe,gBAAgB,MAAM,OAAO;AAElD,QAAM,aAAa,cAAc,SAAS,KAAK,MAAM;AAE/C,QAAA,kBAAkB,mBAAmB,IAAI;AAE/C,SACG,qBAAA,MAAA,EAAG,WAAW,QAAQ,MACpB,UAAA;AAAA,IAAA,CAAC,YAAY,cACZ;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,SAAS;AAAA,UACP,MAAM,QAAQ;AAAA,UACd,sBAAsB;AAAA,YACpB,QAAQ;AAAA,YACR,QAAQ;AAAA,UAAA;AAAA,QAEZ;AAAA,QACA,OAAO;AAAA,QACP,WAAS;AAAA,MAAA;AAAA,IACX;AAAA,IAGD;AAAA,IAEA,qBAAA,OAAA,EAAI,WAAW,QAAQ,UACtB,UAAA;AAAA,MAAA,oBAAC,gBAAa,QAAM,MAAC,SAAQ,SAC1B,eAAK,MACR;AAAA,MAEC,oBAAA,QAAA,EAAK,WAAW,QAAQ,uBAAwB,UAAa,aAAA,CAAA;AAAA,IAAA,GAChE;AAAA,IAEC,KAAK,WACH,oBAAA,OAAA,EAAI,WAAW,QAAQ,kBAAmB,eAAK,QAAQ,CAAA;AAAA,IAG1D;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,OAAO;AAAA,QACP,WAAW,QAAQ;AAAA,QACnB,SAAS,MAAM,gBAAgB,IAAI;AAAA,QAEnC,UAAA,oBAAC,OAAM,EAAA,UAAS,KAAK,CAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EACvB,GACF;AAEJ;"}

package/dist/esm/FileUploader/File/File.styles.js

@@ -1,7 +1,16 @@
 import { createClasses } from "@hitachivantara/uikit-react-utils";
 import { theme } from "@hitachivantara/uikit-styles";
 const { staticClasses, useClasses } = createClasses("HvFile", {
-  root: {},
+  root: {
+    position: "relative",
+    display: "flex",
+    gap: theme.space.xs,
+    alignItems: "center",
+    backgroundColor: theme.colors.bgContainer,
+    padding: theme.space.xs,
+    border: `1px solid ${theme.colors.border}`,
+    borderRadius: `0px 0px ${theme.radii.round} ${theme.radii.round}`
+  },
   progressbar: {
     position: "absolute",
     top: "-1px"
@@ -11,23 +20,18 @@ const { staticClasses, useClasses } = createClasses("HvFile", {
   },
   progressbarBack: {},
   nameText: {
-    overflow: "hidden",
-    textOverflow: "ellipsis",
-    whiteSpace: "nowrap"
+    display: "flex",
+    alignItems: "center",
+    flex: 1
   },
   progressTextContainer: {
     display: "flex",
     flexGrow: 1,
     alignItems: "center"
   },
-  removeButton: {
-    width: 32,
-    height: 32,
-    margin: `0px ${theme.space.xs}`
-  },
+  removeButton: {},
   previewContainer: {
     display: "flex",
-    margin: `0px ${theme.space.xs}`,
     width: "48px",
     height: "48px",
     justifyContent: "center",
@@ -48,9 +52,7 @@ const { staticClasses, useClasses } = createClasses("HvFile", {
     }
   },
   icon: {
-    width: 32,
-    height: 32,
-    margin: `0px ${theme.space.xs}`
+    margin: theme.space.xs
   },
   fail: {}
 });

package/dist/esm/FileUploader/File/File.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"File.styles.js","sources":["../../../../src/FileUploader/File/File.styles.tsx"],"sourcesContent":["import { createClasses } from \"@hitachivantara/uikit-react-utils\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvFile\", {\n  root: {},\n  progressbar: {\n    position: \"absolute\",\n    top: \"-1px\",\n  },\n  progressbarContainer: {\n    height: \"4px\",\n  },\n  progressbarBack: {},\n  nameText: {\n    overflow: \"hidden\",\n    textOverflow: \"ellipsis\",\n    whiteSpace: \"nowrap\",\n  },\n  progressTextContainer: {\n    display: \"flex\",\n    flexGrow: 1,\n    alignItems: \"center\",\n  },\n  removeButton: {\n    width: 32,\n    height: 32,\n    margin: `0px ${theme.space.xs}`,\n  },\n  previewContainer: {\n    display: \"flex\",\n    margin: `0px ${theme.space.xs}`,\n    width: \"48px\",\n    height: \"48px\",\n    justifyContent: \"center\",\n    alignItems: \"center\",\n\n    \"& span\": {\n      display: \"flex\",\n      justifyContent: \"center\",\n      alignItems: \"center\",\n      width: \"100%\",\n      height: \"100%\",\n    },\n\n    \"& img\": {\n      width: \"40px\",\n      height: \"40px\",\n      objectFit: \"cover\",\n      objectPosition: \"center\",\n      alignSelf: \"center\",\n    },\n  },\n  icon: {\n    width: 32,\n    height: 32,\n    margin: `0px ${theme.space.xs}`,\n  },\n  fail: {},\n});\n"],"names":[],"mappings":";;AAGO,MAAM,EAAE,eAAe,eAAe,cAAc,UAAU;AAAA,EACnE,MAAM,CAAC;AAAA,EACP,aAAa;AAAA,IACX,UAAU;AAAA,IACV,KAAK;AAAA,EACP;AAAA,EACA,sBAAsB;AAAA,IACpB,QAAQ;AAAA,EACV;AAAA,EACA,iBAAiB,CAAC;AAAA,EAClB,UAAU;AAAA,IACR,UAAU;AAAA,IACV,cAAc;AAAA,IACd,YAAY;AAAA,EACd;AAAA,EACA,uBAAuB;AAAA,IACrB,SAAS;AAAA,IACT,UAAU;AAAA,IACV,YAAY;AAAA,EACd;AAAA,EACA,cAAc;AAAA,IACZ,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,QAAQ,OAAO,MAAM,MAAM,EAAE;AAAA,EAC/B;AAAA,EACA,kBAAkB;AAAA,IAChB,SAAS;AAAA,IACT,QAAQ,OAAO,MAAM,MAAM,EAAE;AAAA,IAC7B,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,gBAAgB;AAAA,IAChB,YAAY;AAAA,IAEZ,UAAU;AAAA,MACR,SAAS;AAAA,MACT,gBAAgB;AAAA,MAChB,YAAY;AAAA,MACZ,OAAO;AAAA,MACP,QAAQ;AAAA,IACV;AAAA,IAEA,SAAS;AAAA,MACP,OAAO;AAAA,MACP,QAAQ;AAAA,MACR,WAAW;AAAA,MACX,gBAAgB;AAAA,MAChB,WAAW;AAAA,IAAA;AAAA,EAEf;AAAA,EACA,MAAM;AAAA,IACJ,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,QAAQ,OAAO,MAAM,MAAM,EAAE;AAAA,EAC/B;AAAA,EACA,MAAM,CAAA;AACR,CAAC;"}
+{"version":3,"file":"File.styles.js","sources":["../../../../src/FileUploader/File/File.styles.tsx"],"sourcesContent":["import { createClasses } from \"@hitachivantara/uikit-react-utils\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvFile\", {\n  root: {\n    position: \"relative\",\n    display: \"flex\",\n    gap: theme.space.xs,\n    alignItems: \"center\",\n    backgroundColor: theme.colors.bgContainer,\n    padding: theme.space.xs,\n    border: `1px solid ${theme.colors.border}`,\n    borderRadius: `0px 0px ${theme.radii.round} ${theme.radii.round}`,\n  },\n  progressbar: {\n    position: \"absolute\",\n    top: \"-1px\",\n  },\n  progressbarContainer: {\n    height: \"4px\",\n  },\n  progressbarBack: {},\n  nameText: {\n    display: \"flex\",\n    alignItems: \"center\",\n    flex: 1,\n  },\n  progressTextContainer: {\n    display: \"flex\",\n    flexGrow: 1,\n    alignItems: \"center\",\n  },\n  removeButton: {},\n  previewContainer: {\n    display: \"flex\",\n    width: \"48px\",\n    height: \"48px\",\n    justifyContent: \"center\",\n    alignItems: \"center\",\n\n    \"& span\": {\n      display: \"flex\",\n      justifyContent: \"center\",\n      alignItems: \"center\",\n      width: \"100%\",\n      height: \"100%\",\n    },\n\n    \"& img\": {\n      width: \"40px\",\n      height: \"40px\",\n      objectFit: \"cover\",\n      objectPosition: \"center\",\n      alignSelf: \"center\",\n    },\n  },\n  icon: {\n    margin: theme.space.xs,\n  },\n  fail: {},\n});\n"],"names":[],"mappings":";;AAGO,MAAM,EAAE,eAAe,eAAe,cAAc,UAAU;AAAA,EACnE,MAAM;AAAA,IACJ,UAAU;AAAA,IACV,SAAS;AAAA,IACT,KAAK,MAAM,MAAM;AAAA,IACjB,YAAY;AAAA,IACZ,iBAAiB,MAAM,OAAO;AAAA,IAC9B,SAAS,MAAM,MAAM;AAAA,IACrB,QAAQ,aAAa,MAAM,OAAO,MAAM;AAAA,IACxC,cAAc,WAAW,MAAM,MAAM,KAAK,IAAI,MAAM,MAAM,KAAK;AAAA,EACjE;AAAA,EACA,aAAa;AAAA,IACX,UAAU;AAAA,IACV,KAAK;AAAA,EACP;AAAA,EACA,sBAAsB;AAAA,IACpB,QAAQ;AAAA,EACV;AAAA,EACA,iBAAiB,CAAC;AAAA,EAClB,UAAU;AAAA,IACR,SAAS;AAAA,IACT,YAAY;AAAA,IACZ,MAAM;AAAA,EACR;AAAA,EACA,uBAAuB;AAAA,IACrB,SAAS;AAAA,IACT,UAAU;AAAA,IACV,YAAY;AAAA,EACd;AAAA,EACA,cAAc,CAAC;AAAA,EACf,kBAAkB;AAAA,IAChB,SAAS;AAAA,IACT,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,gBAAgB;AAAA,IAChB,YAAY;AAAA,IAEZ,UAAU;AAAA,MACR,SAAS;AAAA,MACT,gBAAgB;AAAA,MAChB,YAAY;AAAA,MACZ,OAAO;AAAA,MACP,QAAQ;AAAA,IACV;AAAA,IAEA,SAAS;AAAA,MACP,OAAO;AAAA,MACP,QAAQ;AAAA,MACR,WAAW;AAAA,MACX,gBAAgB;AAAA,MAChB,WAAW;AAAA,IAAA;AAAA,EAEf;AAAA,EACA,MAAM;AAAA,IACJ,QAAQ,MAAM,MAAM;AAAA,EACtB;AAAA,EACA,MAAM,CAAA;AACR,CAAC;"}

package/dist/esm/FileUploader/FileList/FileList.js

@@ -15,7 +15,7 @@ const HvFileList = (props) => {
   const { classes } = useClasses(classesProp);
   const hasFiles = list.length > 0;
   if (!hasFiles) return null;
-  return /* @__PURE__ */ jsx("ul", { id: setId(id, "list"), className: classes.list, children: list.map((data) => /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx("ul", { id: setId(id, "list"), className: classes.root, children: list.map((data) => /* @__PURE__ */ jsx(
     HvFile,
     {
       classes: { root: classes?.listItem },

package/dist/esm/FileUploader/FileList/FileList.js.map

@@ -1 +1 @@
-{"version":3,"file":"FileList.js","sources":["../../../../src/FileUploader/FileList/FileList.tsx"],"sourcesContent":["import {\n  useDefaultProps,\n  type ExtractNames,\n} from \"@hitachivantara/uikit-react-utils\";\n\nimport { setId } from \"../../utils/setId\";\nimport { HvFile, HvFileData, HvFileRemovedEvent } from \"../File\";\nimport { staticClasses, useClasses } from \"./FileList.styles\";\n\nexport { staticClasses as fileListClasses };\n\nexport type HvFileListClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvFileListProps {\n  /**\n   * Id to be applied to the root node.\n   */\n  id?: string;\n  /**\n   * The files to upload.\n   */\n  list?: HvFileData[];\n  /**\n   * Callback fired when file is removed from list.\n   */\n  onFileRemoved?: HvFileRemovedEvent;\n  /**\n   * Value of aria-label to apply to remove file button in FileList\n   * */\n  removeFileButtonLabel?: string;\n  /**\n   * A Jss Object used to override or extend the styles applied to the component.\n   */\n  classes?: HvFileListClasses;\n}\n\nexport const HvFileList = (props: HvFileListProps) => {\n  const {\n    id,\n    classes: classesProp,\n    list = [],\n    removeFileButtonLabel,\n    onFileRemoved,\n  } = useDefaultProps(\"HvFileList\", props);\n  const { classes } = useClasses(classesProp);\n\n  const hasFiles = list.length > 0;\n  if (!hasFiles) return null;\n\n  return (\n    <ul id={setId(id, \"list\")} className={classes.list}>\n      {list.map((data) => (\n        <HvFile\n          key={data.id}\n          classes={{ root: classes?.listItem }}\n          data={data}\n          onFileRemoved={onFileRemoved}\n          removeFileButtonLabel={removeFileButtonLabel}\n        />\n      ))}\n    </ul>\n  );\n};\n"],"names":[],"mappings":";;;;;;AAoCa,MAAA,aAAa,CAAC,UAA2B;AAC9C,QAAA;AAAA,IACJ;AAAA,IACA,SAAS;AAAA,IACT,OAAO,CAAC;AAAA,IACR;AAAA,IACA;AAAA,EAAA,IACE,gBAAgB,cAAc,KAAK;AACvC,QAAM,EAAE,QAAA,IAAY,WAAW,WAAW;AAEpC,QAAA,WAAW,KAAK,SAAS;AAC3B,MAAA,CAAC,SAAiB,QAAA;AAEtB,SACG,oBAAA,MAAA,EAAG,IAAI,MAAM,IAAI,MAAM,GAAG,WAAW,QAAQ,MAC3C,UAAK,KAAA,IAAI,CAAC,SACT;AAAA,IAAC;AAAA,IAAA;AAAA,MAEC,SAAS,EAAE,MAAM,SAAS,SAAS;AAAA,MACnC;AAAA,MACA;AAAA,MACA;AAAA,IAAA;AAAA,IAJK,KAAK;AAAA,EAMb,CAAA,GACH;AAEJ;"}
+{"version":3,"file":"FileList.js","sources":["../../../../src/FileUploader/FileList/FileList.tsx"],"sourcesContent":["import {\n  useDefaultProps,\n  type ExtractNames,\n} from \"@hitachivantara/uikit-react-utils\";\n\nimport { setId } from \"../../utils/setId\";\nimport { HvFile, HvFileData, HvFileRemovedEvent } from \"../File\";\nimport { staticClasses, useClasses } from \"./FileList.styles\";\n\nexport { staticClasses as fileListClasses };\n\nexport type HvFileListClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvFileListProps {\n  /**\n   * Id to be applied to the root node.\n   */\n  id?: string;\n  /**\n   * The files to upload.\n   */\n  list?: HvFileData[];\n  /**\n   * Callback fired when file is removed from list.\n   */\n  onFileRemoved?: HvFileRemovedEvent;\n  /**\n   * Value of aria-label to apply to remove file button in FileList\n   * */\n  removeFileButtonLabel?: string;\n  /**\n   * A Jss Object used to override or extend the styles applied to the component.\n   */\n  classes?: HvFileListClasses;\n}\n\nexport const HvFileList = (props: HvFileListProps) => {\n  const {\n    id,\n    classes: classesProp,\n    list = [],\n    removeFileButtonLabel,\n    onFileRemoved,\n  } = useDefaultProps(\"HvFileList\", props);\n  const { classes } = useClasses(classesProp);\n\n  const hasFiles = list.length > 0;\n  if (!hasFiles) return null;\n\n  return (\n    <ul id={setId(id, \"list\")} className={classes.root}>\n      {list.map((data) => (\n        <HvFile\n          key={data.id}\n          classes={{ root: classes?.listItem }}\n          data={data}\n          onFileRemoved={onFileRemoved}\n          removeFileButtonLabel={removeFileButtonLabel}\n        />\n      ))}\n    </ul>\n  );\n};\n"],"names":[],"mappings":";;;;;;AAoCa,MAAA,aAAa,CAAC,UAA2B;AAC9C,QAAA;AAAA,IACJ;AAAA,IACA,SAAS;AAAA,IACT,OAAO,CAAC;AAAA,IACR;AAAA,IACA;AAAA,EAAA,IACE,gBAAgB,cAAc,KAAK;AACvC,QAAM,EAAE,QAAA,IAAY,WAAW,WAAW;AAEpC,QAAA,WAAW,KAAK,SAAS;AAC3B,MAAA,CAAC,SAAiB,QAAA;AAEtB,SACG,oBAAA,MAAA,EAAG,IAAI,MAAM,IAAI,MAAM,GAAG,WAAW,QAAQ,MAC3C,UAAK,KAAA,IAAI,CAAC,SACT;AAAA,IAAC;AAAA,IAAA;AAAA,MAEC,SAAS,EAAE,MAAM,SAAS,SAAS;AAAA,MACnC;AAAA,MACA;AAAA,MACA;AAAA,IAAA;AAAA,IAJK,KAAK;AAAA,EAMb,CAAA,GACH;AAEJ;"}

package/dist/esm/FileUploader/FileList/FileList.styles.js

@@ -1,7 +1,7 @@
 import { createClasses } from "@hitachivantara/uikit-react-utils";
 import { theme } from "@hitachivantara/uikit-styles";
 const { staticClasses, useClasses } = createClasses("HvFileList", {
-  list: {
+  root: {
     display: "flex",
     flexDirection: "column",
     gap: theme.space.xs,
@@ -10,15 +10,7 @@ const { staticClasses, useClasses } = createClasses("HvFileList", {
     marginTop: theme.space.sm,
     listStyle: "none"
   },
-  listItem: {
-    position: "relative",
-    display: "flex",
-    alignItems: "center",
-    background: theme.colors.bgContainer,
-    padding: `${theme.space.xs} 0px`,
-    border: `1px solid ${theme.colors.border}`,
-    borderRadius: `0px 0px ${theme.radii.round} ${theme.radii.round}`
-  }
+  listItem: {}
 });
 export {
   staticClasses,

package/dist/esm/FileUploader/FileList/FileList.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"FileList.styles.js","sources":["../../../../src/FileUploader/FileList/FileList.styles.tsx"],"sourcesContent":["import { createClasses } from \"@hitachivantara/uikit-react-utils\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvFileList\", {\n  list: {\n    display: \"flex\",\n    flexDirection: \"column\",\n    gap: theme.space.xs,\n    margin: 0,\n    padding: 0,\n    marginTop: theme.space.sm,\n    listStyle: \"none\",\n  },\n  listItem: {\n    position: \"relative\",\n    display: \"flex\",\n    alignItems: \"center\",\n    background: theme.colors.bgContainer,\n    padding: `${theme.space.xs} 0px`,\n    border: `1px solid ${theme.colors.border}`,\n    borderRadius: `0px 0px ${theme.radii.round} ${theme.radii.round}`,\n  },\n});\n"],"names":[],"mappings":";;AAGO,MAAM,EAAE,eAAe,eAAe,cAAc,cAAc;AAAA,EACvE,MAAM;AAAA,IACJ,SAAS;AAAA,IACT,eAAe;AAAA,IACf,KAAK,MAAM,MAAM;AAAA,IACjB,QAAQ;AAAA,IACR,SAAS;AAAA,IACT,WAAW,MAAM,MAAM;AAAA,IACvB,WAAW;AAAA,EACb;AAAA,EACA,UAAU;AAAA,IACR,UAAU;AAAA,IACV,SAAS;AAAA,IACT,YAAY;AAAA,IACZ,YAAY,MAAM,OAAO;AAAA,IACzB,SAAS,GAAG,MAAM,MAAM,EAAE;AAAA,IAC1B,QAAQ,aAAa,MAAM,OAAO,MAAM;AAAA,IACxC,cAAc,WAAW,MAAM,MAAM,KAAK,IAAI,MAAM,MAAM,KAAK;AAAA,EAAA;AAEnE,CAAC;"}
+{"version":3,"file":"FileList.styles.js","sources":["../../../../src/FileUploader/FileList/FileList.styles.tsx"],"sourcesContent":["import { createClasses } from \"@hitachivantara/uikit-react-utils\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvFileList\", {\n  root: {\n    display: \"flex\",\n    flexDirection: \"column\",\n    gap: theme.space.xs,\n    margin: 0,\n    padding: 0,\n    marginTop: theme.space.sm,\n    listStyle: \"none\",\n  },\n  listItem: {},\n});\n"],"names":[],"mappings":";;AAGO,MAAM,EAAE,eAAe,eAAe,cAAc,cAAc;AAAA,EACvE,MAAM;AAAA,IACJ,SAAS;AAAA,IACT,eAAe;AAAA,IACf,KAAK,MAAM,MAAM;AAAA,IACjB,QAAQ;AAAA,IACR,SAAS;AAAA,IACT,WAAW,MAAM,MAAM;AAAA,IACvB,WAAW;AAAA,EACb;AAAA,EACA,UAAU,CAAA;AACZ,CAAC;"}