@hitachivantara/uikit-react-core 5.56.0 → 5.58.0

package/dist/esm/Button/Button.styles.js

@@ -8,26 +8,22 @@ const { staticClasses, useClasses } = createClasses("HvButton", {
     justifyContent: "center",
     textTransform: "none",
     cursor: "pointer",
-    minWidth: "70px",
     whiteSpace: "nowrap",
-    "&:hover:not($disabled)": {
+    // Background color common for almost all variants
+    "&:hover": {
       backgroundColor: theme.colors.containerBackgroundHover
     },
     "&:focus-visible": {
       ...outlineStyles,
-      "&:not($disabled)": {
-        backgroundColor: theme.colors.containerBackgroundHover
-      }
+      backgroundColor: theme.colors.containerBackgroundHover
     },
     // Default button - no size specified
     fontFamily: theme.fontFamily.body,
-    fontSize: theme.fontSizes.base,
-    fontWeight: theme.fontWeights.semibold,
-    lineHeight: "11px",
-    letterSpacing: 0,
+    ...theme.typography.label,
     height: "32px",
+    border: "1px solid currentcolor",
     borderRadius: theme.radii.base,
-    padding: theme.spacing("xs", "sm")
+    padding: theme.spacing(0, "sm")
   },
   startIcon: {
     marginLeft: `calc(-1 * ${theme.space.xs})`
@@ -37,85 +33,98 @@ const { staticClasses, useClasses } = createClasses("HvButton", {
   },
   focusVisible: {},
   disabled: {
+    cursor: "not-allowed",
     color: theme.colors.secondary_60,
-    borderColor: theme.colors.atmo4,
-    backgroundColor: theme.colors.atmo3,
-    cursor: "not-allowed"
+    borderColor: "transparent",
+    backgroundColor: "transparent",
+    "&:hover, &:focus-visible": {
+      backgroundColor: "transparent",
+      borderColor: "transparent"
+    }
   },
   icon: {
     margin: 0,
     padding: 0,
     height: "fit-content",
-    minWidth: "unset"
-  },
-  primary: {
-    color: theme.colors.atmo1,
-    backgroundColor: theme.colors.primary,
-    "&:not($disabled)": {
-      "&:hover, &:focus-visible": {
-        backgroundColor: theme.colors.primary_80
-      }
-    }
-  },
-  primarySubtle: {
-    color: theme.colors.primary,
-    backgroundColor: "transparent",
-    border: "1px solid currentColor"
-  },
-  primaryGhost: {
-    color: theme.colors.primary,
-    backgroundColor: "transparent",
-    "&$disabled": {
-      backgroundColor: "transparent"
+    "& > *": {
+      margin: -1
     }
   },
-  secondarySubtle: {
-    color: theme.colors.secondary,
-    backgroundColor: "transparent",
-    border: "1px solid currentColor"
-  },
-  secondaryGhost: {
-    color: theme.colors.secondary,
-    backgroundColor: "transparent",
-    "&$disabled": {
-      backgroundColor: "transparent"
-    }
+  subtle: { backgroundColor: "transparent" },
+  ghost: {
+    borderColor: "transparent",
+    backgroundColor: "transparent"
   },
   semantic: {
     color: theme.colors.base_dark,
     backgroundColor: "transparent",
-    "&:not($disabled)": {
-      "&:hover, &:focus-visible": {
-        backgroundColor: "rgba(251, 252, 252, 0.3)"
-      }
+    borderColor: "transparent",
+    "&:hover, &:focus-visible": {
+      backgroundColor: "rgba(251, 252, 252, 0.3)"
     },
     "&$disabled": {
       backgroundColor: "rgba(251, 252, 252, 0.1)"
     }
   },
-  secondary: {},
-  ghost: {}
+  // TODO - remove in v6
+  primary: {},
+  primarySubtle: {},
+  primaryGhost: {},
+  secondarySubtle: {},
+  secondaryGhost: {},
+  // Deprecated (DS3)
+  secondary: {}
 });
+const getColoringStyle = (color, type) => {
+  if (type)
+    return {
+      color: theme.colors[color !== "warning" ? color : `${color}_140`]
+    };
+  const bg = theme.colors[color !== "warning" ? color : `${color}_120`];
+  const hoverBg = theme.colors[color !== "warning" ? `${color}_80` : `${color}_140`];
+  return {
+    color: theme.colors.atmo1,
+    backgroundColor: bg,
+    borderColor: bg,
+    "&:hover, &:focus-visible": {
+      backgroundColor: hoverBg,
+      borderColor: hoverBg
+    }
+  };
+};
 const getRadiusStyles = (radius) => ({
   borderRadius: theme.radii[radius]
 });
-const getSizeStyles = (size) => ({
-  height: theme.sizes[size],
-  paddingLeft: theme.space[size],
-  paddingRight: theme.space[size],
-  // @ts-ignore TODO: align font<-> button sizes
-  fontSize: theme.fontSizes[size]
-});
-const getIconSizeStyles = (size) => ({
-  height: theme.sizes[size],
-  width: theme.sizes[size]
-});
+const sizes = {
+  xs: { height: "24px", space: "sm", typography: "captionLabel" },
+  sm: { height: "24px", space: "sm", typography: "captionLabel" },
+  md: { height: "32px", space: "sm", typography: "label" },
+  lg: { height: "48px", space: "md", typography: "label" },
+  xl: { height: "48px", space: "md", typography: "label" }
+};
+const getSizeStyles = (size) => {
+  const { height, space, typography } = sizes[size];
+  const { color, ...typoProps } = theme.typography[typography];
+  return {
+    height,
+    padding: theme.spacing(0, space),
+    ...typoProps
+  };
+};
+const getIconSizeStyles = (size) => {
+  const { height } = sizes[size];
+  return {
+    height,
+    width: height
+  };
+};
 const getOverrideColors = () => ({
   "& svg .color0": {
     fill: "currentcolor"
   }
 });
 export {
+  getColoringStyle,
   getIconSizeStyles,
   getOverrideColors,
   getRadiusStyles,

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

@@ -1 +1 @@
-{"version":3,"file":"Button.styles.js","sources":["../../../src/Button/Button.styles.ts"],"sourcesContent":["import { CSSInterpolation } from \"@emotion/serialize\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { outlineStyles } from \"../utils/focusUtils\";\nimport { createClasses } from \"../utils/classes\";\nimport { HvButtonRadius, HvButtonSize } from \"./types\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvButton\", {\n  root: {\n    display: \"inline-flex\",\n    alignItems: \"center\",\n    justifyContent: \"center\",\n    textTransform: \"none\",\n    cursor: \"pointer\",\n    minWidth: \"70px\",\n    whiteSpace: \"nowrap\",\n\n    \"&:hover:not($disabled)\": {\n      backgroundColor: theme.colors.containerBackgroundHover,\n    },\n\n    \"&:focus-visible\": {\n      ...outlineStyles,\n\n      \"&:not($disabled)\": {\n        backgroundColor: theme.colors.containerBackgroundHover,\n      },\n    },\n\n    // Default button - no size specified\n    fontFamily: theme.fontFamily.body,\n    fontSize: theme.fontSizes.base,\n    fontWeight: theme.fontWeights.semibold,\n    lineHeight: \"11px\",\n    letterSpacing: 0,\n    height: \"32px\",\n    borderRadius: theme.radii.base,\n    padding: theme.spacing(\"xs\", \"sm\"),\n  },\n  startIcon: {\n    marginLeft: `calc(-1 * ${theme.space.xs})`,\n  },\n  endIcon: {\n    marginRight: `calc(-1 * ${theme.space.xs})`,\n  },\n  focusVisible: {},\n  disabled: {\n    color: theme.colors.secondary_60,\n    borderColor: theme.colors.atmo4,\n    backgroundColor: theme.colors.atmo3,\n    cursor: \"not-allowed\",\n  },\n  icon: {\n    margin: 0,\n    padding: 0,\n    height: \"fit-content\",\n    minWidth: \"unset\",\n  },\n  primary: {\n    color: theme.colors.atmo1,\n    backgroundColor: theme.colors.primary,\n    \"&:not($disabled)\": {\n      \"&:hover, &:focus-visible\": {\n        backgroundColor: theme.colors.primary_80,\n      },\n    },\n  },\n  primarySubtle: {\n    color: theme.colors.primary,\n    backgroundColor: \"transparent\",\n    border: \"1px solid currentColor\",\n  },\n  primaryGhost: {\n    color: theme.colors.primary,\n    backgroundColor: \"transparent\",\n    \"&$disabled\": {\n      backgroundColor: \"transparent\",\n    },\n  },\n  secondarySubtle: {\n    color: theme.colors.secondary,\n    backgroundColor: \"transparent\",\n    border: \"1px solid currentColor\",\n  },\n  secondaryGhost: {\n    color: theme.colors.secondary,\n    backgroundColor: \"transparent\",\n    \"&$disabled\": {\n      backgroundColor: \"transparent\",\n    },\n  },\n  semantic: {\n    color: theme.colors.base_dark,\n    backgroundColor: \"transparent\",\n    \"&:not($disabled)\": {\n      \"&:hover, &:focus-visible\": {\n        backgroundColor: \"rgba(251, 252, 252, 0.3)\",\n      },\n    },\n    \"&$disabled\": {\n      backgroundColor: \"rgba(251, 252, 252, 0.1)\",\n    },\n  },\n  secondary: {},\n  ghost: {},\n});\n\nexport const getRadiusStyles = (radius: HvButtonRadius): CSSInterpolation => ({\n  borderRadius: theme.radii[radius],\n});\n\nexport const getSizeStyles = (size: HvButtonSize): CSSInterpolation => ({\n  height: theme.sizes[size],\n  paddingLeft: theme.space[size],\n  paddingRight: theme.space[size],\n  // @ts-ignore TODO: align font<-> button sizes\n  fontSize: theme.fontSizes[size],\n});\n\nexport const getIconSizeStyles = (size: HvButtonSize): CSSInterpolation => ({\n  height: theme.sizes[size],\n  width: theme.sizes[size],\n});\n\nexport const getOverrideColors = (): CSSInterpolation => ({\n  \"& svg .color0\": {\n    fill: \"currentcolor\",\n  },\n});\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"Button.styles.js","sources":["../../../src/Button/Button.styles.ts"],"sourcesContent":["import { CSSInterpolation } from \"@emotion/serialize\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { outlineStyles } from \"../utils/focusUtils\";\nimport { createClasses } from \"../utils/classes\";\nimport { HvButtonRadius, HvButtonSize } from \"./types\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvButton\", {\n  root: {\n    display: \"inline-flex\",\n    alignItems: \"center\",\n    justifyContent: \"center\",\n    textTransform: \"none\",\n    cursor: \"pointer\",\n    whiteSpace: \"nowrap\",\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    ...theme.typography.label,\n    height: \"32px\",\n    border: \"1px solid currentcolor\",\n    borderRadius: theme.radii.base,\n    padding: theme.spacing(0, \"sm\"),\n  },\n  startIcon: {\n    marginLeft: `calc(-1 * ${theme.space.xs})`,\n  },\n  endIcon: {\n    marginRight: `calc(-1 * ${theme.space.xs})`,\n  },\n  focusVisible: {},\n  disabled: {\n    cursor: \"not-allowed\",\n    color: theme.colors.secondary_60,\n    borderColor: \"transparent\",\n    backgroundColor: \"transparent\",\n    \"&:hover, &:focus-visible\": {\n      backgroundColor: \"transparent\",\n      borderColor: \"transparent\",\n    },\n  },\n  icon: {\n    margin: 0,\n    padding: 0,\n    height: \"fit-content\",\n    \"& > *\": {\n      margin: -1,\n    },\n  },\n  subtle: { backgroundColor: \"transparent\" },\n  ghost: {\n    borderColor: \"transparent\",\n    backgroundColor: \"transparent\",\n  },\n  semantic: {\n    color: theme.colors.base_dark,\n    backgroundColor: \"transparent\",\n    borderColor: \"transparent\",\n    \"&:hover, &:focus-visible\": {\n      backgroundColor: \"rgba(251, 252, 252, 0.3)\",\n    },\n    \"&$disabled\": {\n      backgroundColor: \"rgba(251, 252, 252, 0.1)\",\n    },\n  },\n\n  // TODO - remove in v6\n  primary: {},\n  primarySubtle: {},\n  primaryGhost: {},\n  secondarySubtle: {},\n  secondaryGhost: {},\n\n  // Deprecated (DS3)\n  secondary: {},\n});\n\nexport const getColoringStyle = (color: string, type?: string) => {\n  if (type)\n    return {\n      color: theme.colors[color !== \"warning\" ? color : `${color}_140`],\n    };\n\n  const bg = theme.colors[color !== \"warning\" ? color : `${color}_120`];\n  const hoverBg =\n    theme.colors[color !== \"warning\" ? `${color}_80` : `${color}_140`];\n  return {\n    color: theme.colors.atmo1,\n    backgroundColor: bg,\n    borderColor: bg,\n    \"&:hover, &:focus-visible\": {\n      backgroundColor: hoverBg,\n      borderColor: hoverBg,\n    },\n  };\n};\n\nexport const getRadiusStyles = (radius: HvButtonRadius): CSSInterpolation => ({\n  borderRadius: theme.radii[radius],\n});\n\n// TODO - remove xs and xl in v6 since they are not DS spec\nconst sizes = {\n  xs: { height: \"24px\", space: \"sm\", typography: \"captionLabel\" },\n  sm: { height: \"24px\", space: \"sm\", typography: \"captionLabel\" },\n  md: { height: \"32px\", space: \"sm\", typography: \"label\" },\n  lg: { height: \"48px\", space: \"md\", typography: \"label\" },\n  xl: { height: \"48px\", space: \"md\", typography: \"label\" },\n};\n\nexport const getSizeStyles = (size: HvButtonSize): CSSInterpolation => {\n  const { height, space, typography } = sizes[size];\n  const { color, ...typoProps } = theme.typography[typography];\n  return {\n    height,\n    padding: theme.spacing(0, space),\n    ...typoProps,\n  };\n};\n\nexport const getIconSizeStyles = (size: HvButtonSize): CSSInterpolation => {\n  const { height } = sizes[size];\n  return {\n    height,\n    width: height,\n  };\n};\n\nexport const getOverrideColors = (): CSSInterpolation => ({\n  \"& svg .color0\": {\n    fill: \"currentcolor\",\n  },\n});\n"],"names":[],"mappings":"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"}

package/dist/esm/Button/types.js

@@ -2,6 +2,15 @@ const buttonVariant = [
   "primary",
   "primarySubtle",
   "primaryGhost",
+  "positive",
+  "positiveSubtle",
+  "positiveGhost",
+  "negative",
+  "negativeSubtle",
+  "negativeGhost",
+  "warning",
+  "warningSubtle",
+  "warningGhost",
   "secondarySubtle",
   "secondaryGhost",
   "semantic",

package/dist/esm/Button/types.js.map

@@ -1 +1 @@
-{"version":3,"file":"types.js","sources":["../../../src/Button/types.ts"],"sourcesContent":["export const buttonVariant = [\n  \"primary\",\n  \"primarySubtle\",\n  \"primaryGhost\",\n  \"secondarySubtle\",\n  \"secondaryGhost\",\n  \"semantic\",\n  // deprecated props\n  \"secondary\",\n  \"ghost\",\n] as const;\nexport type HvButtonVariant = (typeof buttonVariant)[number];\n\nexport const buttonSize = [\"xs\", \"sm\", \"md\", \"lg\", \"xl\"] as const;\nexport type HvButtonSize = (typeof buttonSize)[number];\n\nexport const buttonRadius = [\n  \"none\",\n  \"base\",\n  \"round\",\n  \"circle\",\n  \"full\",\n] as const;\nexport type HvButtonRadius = (typeof buttonRadius)[number];\n"],"names":[],"mappings":"AAAO,MAAM,gBAAgB;AAAA,EAC3B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA;AAAA,EAEA;AAAA,EACA;AACF;AAGO,MAAM,aAAa,CAAC,MAAM,MAAM,MAAM,MAAM,IAAI;AAGhD,MAAM,eAAe;AAAA,EAC1B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF;"}
+{"version":3,"file":"types.js","sources":["../../../src/Button/types.ts"],"sourcesContent":["export const buttonVariant = [\n  \"primary\",\n  \"primarySubtle\",\n  \"primaryGhost\",\n  \"positive\",\n  \"positiveSubtle\",\n  \"positiveGhost\",\n  \"negative\",\n  \"negativeSubtle\",\n  \"negativeGhost\",\n  \"warning\",\n  \"warningSubtle\",\n  \"warningGhost\",\n  \"secondarySubtle\",\n  \"secondaryGhost\",\n  \"semantic\",\n  // deprecated props\n  \"secondary\",\n  \"ghost\",\n] as const;\nexport type HvButtonVariant = (typeof buttonVariant)[number];\n\nexport const buttonSize = [\"xs\", \"sm\", \"md\", \"lg\", \"xl\"] as const;\nexport type HvButtonSize = (typeof buttonSize)[number];\n\nexport const buttonRadius = [\n  \"none\",\n  \"base\",\n  \"round\",\n  \"circle\",\n  \"full\",\n] as const;\nexport type HvButtonRadius = (typeof buttonRadius)[number];\n"],"names":[],"mappings":"AAAO,MAAM,gBAAgB;AAAA,EAC3B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA;AAAA,EAEA;AAAA,EACA;AACF;AAGO,MAAM,aAAa,CAAC,MAAM,MAAM,MAAM,MAAM,IAAI;AAGhD,MAAM,eAAe;AAAA,EAC1B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF;"}

package/dist/esm/Calendar/model.js

@@ -1,22 +1,31 @@
 import { createDatesArray, isRange } from "./utils.js";
 class CalendarModel {
+  month;
+  year;
+  dates = [];
   constructor(month, year) {
-    this.dates = [];
-    this.updateModel = (month2, year2) => {
-      let validMonth = month2;
-      let validYear = year2;
-      if (!Number.isInteger(validMonth)) {
-        validMonth = (/* @__PURE__ */ new Date()).getMonth() + 1;
-      }
-      if (!Number.isInteger(validYear)) {
-        validYear = (/* @__PURE__ */ new Date()).getFullYear();
-      }
-      this.month = validMonth;
-      this.year = validYear;
-      this.dates = createDatesArray(validMonth, validYear);
-    };
     this.updateModel(month, year);
   }
+  /**
+   * Updates the model with the received month and year
+   *
+   * @param month - Number of the month (1 to 12).
+   * @param year - Number of the year.
+   * @memberOf CalendarModel
+   */
+  updateModel = (month, year) => {
+    let validMonth = month;
+    let validYear = year;
+    if (!Number.isInteger(validMonth)) {
+      validMonth = (/* @__PURE__ */ new Date()).getMonth() + 1;
+    }
+    if (!Number.isInteger(validYear)) {
+      validYear = (/* @__PURE__ */ new Date()).getFullYear();
+    }
+    this.month = validMonth;
+    this.year = validYear;
+    this.dates = createDatesArray(validMonth, validYear);
+  };
 }
 const generateModelFromDate = (seedValue) => {
   let calendarModel;

package/dist/esm/Calendar/model.js.map

@@ -1 +1 @@
-{"version":3,"file":"model.js","sources":["../../../src/Calendar/model.tsx"],"sourcesContent":["import { createDatesArray, isRange } from \"./utils\";\n\n/**\n * Calendar builder for a specific month and year.\n * Returns an array of date objects.\n */\nexport default class CalendarModel {\n  month: any;\n\n  year: any;\n\n  dates: Date[] = [];\n\n  constructor(month?: number, year?: number) {\n    this.updateModel(month!, year!);\n  }\n\n  /**\n   * Updates the model with the received month and year\n   *\n   * @param month - Number of the month (1 to 12).\n   * @param year - Number of the year.\n   * @memberOf CalendarModel\n   */\n  updateModel = (month: number, year: number) => {\n    let validMonth = month;\n    let validYear = year;\n    if (!Number.isInteger(validMonth)) {\n      validMonth = new Date().getMonth() + 1;\n    }\n    if (!Number.isInteger(validYear)) {\n      validYear = new Date().getFullYear();\n    }\n\n    this.month = validMonth;\n    this.year = validYear;\n    this.dates = createDatesArray(validMonth, validYear);\n  };\n}\n\nconst generateModelFromDate = (seedValue: any) => {\n  let calendarModel;\n\n  if (typeof seedValue === \"string\") {\n    const today = new Date();\n    calendarModel = new CalendarModel(\n      today.getMonth() + 1,\n      today.getFullYear()\n    );\n  } else if (isRange(seedValue)) {\n    calendarModel = new CalendarModel(\n      seedValue.startDate.getMonth() + 1,\n      seedValue.startDate.getFullYear()\n    );\n  } else {\n    calendarModel = new CalendarModel(\n      seedValue.getMonth() + 1,\n      seedValue.getFullYear()\n    );\n  }\n\n  return calendarModel;\n};\n\nexport const generateCalendarModel = (\n  seedValue: any,\n  visibleMonth?: number,\n  visibleYear?: number\n) => {\n  let calendarModel;\n\n  if (visibleMonth && visibleYear) {\n    calendarModel = new CalendarModel(visibleMonth, visibleYear);\n  } else if (visibleMonth && !visibleYear) {\n    calendarModel = new CalendarModel(visibleMonth, seedValue.getFullYear());\n  } else if (!visibleMonth && visibleYear) {\n    calendarModel = new CalendarModel(1, visibleYear);\n  } else {\n    calendarModel = generateModelFromDate(seedValue);\n  }\n\n  return calendarModel;\n};\n"],"names":["month","year"],"mappings":";AAMA,MAAqB,cAAc;AAAA,EAOjC,YAAY,OAAgB,MAAe;AAF3C,SAAA,QAAgB;AAaF,SAAA,cAAA,CAACA,QAAeC,UAAiB;AAC7C,UAAI,aAAaD;AACjB,UAAI,YAAYC;AAChB,UAAI,CAAC,OAAO,UAAU,UAAU,GAAG;AACjC,sBAAiB,oBAAA,KAAO,GAAA,SAAA,IAAa;AAAA,MACvC;AACA,UAAI,CAAC,OAAO,UAAU,SAAS,GAAG;AACpB,qBAAA,oBAAI,KAAK,GAAE,YAAY;AAAA,MACrC;AAEA,WAAK,QAAQ;AACb,WAAK,OAAO;AACP,WAAA,QAAQ,iBAAiB,YAAY,SAAS;AAAA,IAAA;AAtB9C,SAAA,YAAY,OAAQ,IAAK;AAAA,EAChC;AAuBF;AAEA,MAAM,wBAAwB,CAAC,cAAmB;AAC5C,MAAA;AAEA,MAAA,OAAO,cAAc,UAAU;AAC3B,UAAA,4BAAY;AAClB,oBAAgB,IAAI;AAAA,MAClB,MAAM,aAAa;AAAA,MACnB,MAAM,YAAY;AAAA,IAAA;AAAA,EACpB,WACS,QAAQ,SAAS,GAAG;AAC7B,oBAAgB,IAAI;AAAA,MAClB,UAAU,UAAU,SAAA,IAAa;AAAA,MACjC,UAAU,UAAU,YAAY;AAAA,IAAA;AAAA,EAClC,OACK;AACL,oBAAgB,IAAI;AAAA,MAClB,UAAU,aAAa;AAAA,MACvB,UAAU,YAAY;AAAA,IAAA;AAAA,EAE1B;AAEO,SAAA;AACT;AAEO,MAAM,wBAAwB,CACnC,WACA,cACA,gBACG;AACC,MAAA;AAEJ,MAAI,gBAAgB,aAAa;AACf,oBAAA,IAAI,cAAc,cAAc,WAAW;AAAA,EAAA,WAClD,gBAAgB,CAAC,aAAa;AACvC,oBAAgB,IAAI,cAAc,cAAc,UAAU,YAAa,CAAA;AAAA,EAAA,WAC9D,CAAC,gBAAgB,aAAa;AACvB,oBAAA,IAAI,cAAc,GAAG,WAAW;AAAA,EAAA,OAC3C;AACL,oBAAgB,sBAAsB,SAAS;AAAA,EACjD;AAEO,SAAA;AACT;"}
+{"version":3,"file":"model.js","sources":["../../../src/Calendar/model.tsx"],"sourcesContent":["import { createDatesArray, isRange } from \"./utils\";\n\n/**\n * Calendar builder for a specific month and year.\n * Returns an array of date objects.\n */\nexport default class CalendarModel {\n  month: any;\n\n  year: any;\n\n  dates: Date[] = [];\n\n  constructor(month?: number, year?: number) {\n    this.updateModel(month!, year!);\n  }\n\n  /**\n   * Updates the model with the received month and year\n   *\n   * @param month - Number of the month (1 to 12).\n   * @param year - Number of the year.\n   * @memberOf CalendarModel\n   */\n  updateModel = (month: number, year: number) => {\n    let validMonth = month;\n    let validYear = year;\n    if (!Number.isInteger(validMonth)) {\n      validMonth = new Date().getMonth() + 1;\n    }\n    if (!Number.isInteger(validYear)) {\n      validYear = new Date().getFullYear();\n    }\n\n    this.month = validMonth;\n    this.year = validYear;\n    this.dates = createDatesArray(validMonth, validYear);\n  };\n}\n\nconst generateModelFromDate = (seedValue: any) => {\n  let calendarModel;\n\n  if (typeof seedValue === \"string\") {\n    const today = new Date();\n    calendarModel = new CalendarModel(\n      today.getMonth() + 1,\n      today.getFullYear()\n    );\n  } else if (isRange(seedValue)) {\n    calendarModel = new CalendarModel(\n      seedValue.startDate.getMonth() + 1,\n      seedValue.startDate.getFullYear()\n    );\n  } else {\n    calendarModel = new CalendarModel(\n      seedValue.getMonth() + 1,\n      seedValue.getFullYear()\n    );\n  }\n\n  return calendarModel;\n};\n\nexport const generateCalendarModel = (\n  seedValue: any,\n  visibleMonth?: number,\n  visibleYear?: number\n) => {\n  let calendarModel;\n\n  if (visibleMonth && visibleYear) {\n    calendarModel = new CalendarModel(visibleMonth, visibleYear);\n  } else if (visibleMonth && !visibleYear) {\n    calendarModel = new CalendarModel(visibleMonth, seedValue.getFullYear());\n  } else if (!visibleMonth && visibleYear) {\n    calendarModel = new CalendarModel(1, visibleYear);\n  } else {\n    calendarModel = generateModelFromDate(seedValue);\n  }\n\n  return calendarModel;\n};\n"],"names":[],"mappings":";AAMA,MAAqB,cAAc;AAAA,EACjC;AAAA,EAEA;AAAA,EAEA,QAAgB,CAAA;AAAA,EAEhB,YAAY,OAAgB,MAAe;AACpC,SAAA,YAAY,OAAQ,IAAK;AAAA,EAChC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EASA,cAAc,CAAC,OAAe,SAAiB;AAC7C,QAAI,aAAa;AACjB,QAAI,YAAY;AAChB,QAAI,CAAC,OAAO,UAAU,UAAU,GAAG;AACjC,oBAAiB,oBAAA,KAAO,GAAA,SAAA,IAAa;AAAA,IACvC;AACA,QAAI,CAAC,OAAO,UAAU,SAAS,GAAG;AACpB,mBAAA,oBAAI,KAAK,GAAE,YAAY;AAAA,IACrC;AAEA,SAAK,QAAQ;AACb,SAAK,OAAO;AACP,SAAA,QAAQ,iBAAiB,YAAY,SAAS;AAAA,EAAA;AAEvD;AAEA,MAAM,wBAAwB,CAAC,cAAmB;AAC5C,MAAA;AAEA,MAAA,OAAO,cAAc,UAAU;AAC3B,UAAA,4BAAY;AAClB,oBAAgB,IAAI;AAAA,MAClB,MAAM,aAAa;AAAA,MACnB,MAAM,YAAY;AAAA,IAAA;AAAA,EACpB,WACS,QAAQ,SAAS,GAAG;AAC7B,oBAAgB,IAAI;AAAA,MAClB,UAAU,UAAU,SAAA,IAAa;AAAA,MACjC,UAAU,UAAU,YAAY;AAAA,IAAA;AAAA,EAClC,OACK;AACL,oBAAgB,IAAI;AAAA,MAClB,UAAU,aAAa;AAAA,MACvB,UAAU,YAAY;AAAA,IAAA;AAAA,EAE1B;AAEO,SAAA;AACT;AAEO,MAAM,wBAAwB,CACnC,WACA,cACA,gBACG;AACC,MAAA;AAEJ,MAAI,gBAAgB,aAAa;AACf,oBAAA,IAAI,cAAc,cAAc,WAAW;AAAA,EAAA,WAClD,gBAAgB,CAAC,aAAa;AACvC,oBAAgB,IAAI,cAAc,cAAc,UAAU,YAAa,CAAA;AAAA,EAAA,WAC9D,CAAC,gBAAgB,aAAa;AACvB,oBAAA,IAAI,cAAc,GAAG,WAAW;AAAA,EAAA,OAC3C;AACL,oBAAgB,sBAAsB,SAAS;AAAA,EACjD;AAEO,SAAA;AACT;"}

package/dist/esm/Calendar/utils.js

@@ -1,5 +1,5 @@
 import dayjs from "dayjs";
-import capitalize from "lodash/capitalize";
+import { capitalize } from "../utils/helpers.js";
 const CALENDAR_WEEKS = 6;
 const getMonthDays = (month, year) => new Date(year, month, 0).getDate();
 const getMonthFirstWeekday = (month, year) => new Date(year, month - 1, 1).getDay();

package/dist/esm/Calendar/utils.js.map

@@ -1 +1 @@
-{"version":3,"file":"utils.js","sources":["../../../src/Calendar/utils.tsx"],"sourcesContent":["import dayjs from \"dayjs\";\n\nimport capitalize from \"lodash/capitalize\";\n\nimport { DateRangeProp } from \"./types\";\n\n/**\n * Constant with the number of weeks to be displayed on the calendar.\n */\nexport const CALENDAR_WEEKS = 6;\n\n/**\n * Constant with the default locale that should be used as the default.\n */\nexport const DEFAULT_LOCALE = \"en\";\n\n/**\n * Pads a string value with leading zeroes(0) until length is reached.\n *\n * @param value - Value to be padded.\n * @param length - Length of the value after the padding is added.\n * @returns The value as a string with the received amount of padding.\n *\n * @example zeroPad(5, 2) => \"05\"\n */\nexport const zeroPad = (value: number, length: number) =>\n  `${value}`.padStart(length, \"0\");\n\n/**\n * Returns the number of days in the month given a month and year.\n *\n * @param month - Number of the month (1 to 12).\n * @param year - Number of the year.\n * @returns The number of days in a month for the received year.\n */\nexport const getMonthDays = (month: number, year: number) =>\n  new Date(year, month, 0).getDate();\n\n/**\n * Gets the week day of the first day of a given month and year.\n * From 0 (Sunday) to 6 (Saturday).\n *\n * @param month - Number of the month (1 to 12).\n * @param year - Number of the year.\n * @returns The zero indexed week day where 0 is Sunday (0 to 6).\n */\nexport const getMonthFirstWeekday = (month: number, year: number) =>\n  new Date(year, month - 1, 1).getDay();\n\n/**\n * Creates a `Date` instance in UTC timezone.\n *\n * @param year - The year of the date.\n * @param monthIndex - The zero indexed month of the year (0 to 11).\n * @param day - The day of the month.\n * @param [hour=1] - The hour of the day.\n * @returns A `Date` instance in UTC timezone.\n */\nexport const makeUTCDate = (\n  year: number,\n  monthIndex: number,\n  day: number,\n  hour = 1\n) => new Date(Date.UTC(year, monthIndex, day, hour));\n\n/**\n * Checks if the received date is a valid date.\n *\n * @param date - The date to be validated.\n * @returns A flag stating if the date is valid or not.\n */\nexport const isDate = (date: any): date is Date =>\n  Object.prototype.toString.call(date) === \"[object Date]\" &&\n  !Number.isNaN(date.valueOf());\n\nexport const isDateRangeProp = (date: any): date is DateRangeProp =>\n  \"startDate\" in date;\n\n/**\n * Checks if two dates are in the same month and year.\n *\n * @param date1 - First date.\n * @param date2 - Second date.\n * @returns A flag stating if the dates are in the same month and year or not.\n */\nexport const isSameMonth = (date1: any, date2: any) => {\n  if (!(isDate(date1) && isDate(date2))) return false;\n\n  return (\n    date1.getMonth() === date2.getMonth() &&\n    date1.getFullYear() === date2.getFullYear()\n  );\n};\n\n/**\n * Checks if two dates are on the same day.\n *\n * @param date1 - First date.\n * @param date2 - Second date.\n * @returns A flag stating if the dates are in the same day or not.\n */\nexport const isSameDay = (date1: any, date2: any) => {\n  if (!(isDate(date1) && isDate(date2))) return false;\n\n  return (\n    date1.getDate() === date2.getDate() &&\n    date1.getMonth() === date2.getMonth() &&\n    date1.getFullYear() === date2.getFullYear()\n  );\n};\n\n/**\n * Formats the received date using the ISO format (YYYY-MM-DD).\n *\n * @param date - The date to be formatted.\n * @returns The formatted date in ISO format.\n */\nexport const getDateISO = (date?: Date) => {\n  if (!isDate(date)) return null;\n\n  return [\n    date.getFullYear(),\n    zeroPad(date.getMonth() + 1, 2),\n    zeroPad(date.getDate(), 2),\n  ].join(\"-\");\n};\n\n/**\n * Returns an object with the previous month taking also into consideration the year.\n * For example the previous month of January 2000 will be December 1999.\n *\n * @param month - Number of the month.\n * @param year - Number of the year.\n * @returns Object with new month and year defined.\n */\nexport const getPreviousMonth = (month: number, year: number) => {\n  const prevMonth = month > 1 ? month - 1 : 12;\n  const prevMonthYear = month > 1 ? year : year - 1;\n\n  return { month: prevMonth, year: prevMonthYear };\n};\n\n/**\n * Returns an object with the next month taking also into consideration the year.\n * For example the next month of December 2000 will be January 2001.\n *\n * @param month - Number of the month.\n * @param year - Number of the year.\n * @returns Object with new month and year defined.\n */\nexport const getNextMonth = (month: number, year: number) => {\n  const nextMonth = month < 12 ? month + 1 : 1;\n  const nextMonthYear = month < 12 ? year : year + 1;\n\n  return { month: nextMonth, year: nextMonthYear };\n};\n\n/**\n * Returns a list with the names of all the months localized in the received locale and representation value.\n *\n * @param locale - The locale to be applied to the Intl format.\n * @param representationValue - The representation value for the month.\n * @returns An array with all the months names.\n */\nexport const getMonthNamesList = (\n  locale: string | undefined,\n  representationValue: Intl.DateTimeFormatOptions[\"month\"] = \"long\"\n) => {\n  const options = { month: representationValue, timeZone: \"UTC\" };\n\n  return [...new Array(12)].map((n, index) => {\n    const auxDate = makeUTCDate(1970, index, 1);\n    return capitalize(Intl.DateTimeFormat(locale, options).format(auxDate));\n  });\n};\n\n/**\n * Returns a list with the names of all the weekdays localized in the received locale and representation value.\n *\n * @param locale - The locale to be applied.\n * @returns An array with all the weekday names.\n */\nexport const getWeekdayNamesList = (locale: string) => {\n  const formatter = new Intl.DateTimeFormat(locale, {\n    weekday: \"narrow\",\n    timeZone: \"UTC\",\n  });\n\n  return [...new Array(7)].map((n, index) => {\n    return formatter.format(makeUTCDate(1970, 0, 4 + index));\n  });\n};\n\n/**\n * Returns the name of the month for the supplied month localized in the received locale and representation value.\n *\n * @param date - The date from which the month name is extracted.\n * @param locale - The locale to be applied to the Intl format.\n * @param representationValue - The locale to be applied to the Intl format.\n * @returns The name of the month.\n */\nexport const getMonthName = (\n  date: Date,\n  locale: string,\n  representationValue: Intl.DateTimeFormatOptions[\"month\"] = \"long\"\n) =>\n  new Intl.DateTimeFormat(locale, { month: representationValue }).format(date);\n\n/**\n * Formats the received date according to Design System specifications.\n * Currently: day month, year => `14 Aug, 2019`.\n *\n * @param date - UTC date to be formatted.\n * @param locale - The locale to be applied to the Intl format.\n * @returns The formatted date as a string.\n */\nexport const getFormattedDate = (\n  // TODO: fix this\n  date: any,\n  locale: any,\n  rep: Intl.DateTimeFormatOptions[\"month\"] = \"short\"\n) =>\n  `${date.getDate()} ${getMonthName(date, locale, rep)} ${date.getFullYear()}`;\n\n/**\n * Creates an array of 42 days. The complete current month and enough days from the previous and next months to fill\n * the 42 positions.\n *\n * @param month - The number of the month (1 to 12).\n * @param year - The number of the year.\n * @returns The array of dates.\n */\nexport const createDatesArray = (month: number, year: number) => {\n  // Initializes the variables needed to calculate the dates for the received month and year\n  const monthDays = getMonthDays(month, year);\n  const daysFromPrevMonth = getMonthFirstWeekday(month, year);\n  const daysFromNextMonth =\n    CALENDAR_WEEKS * 7 - (daysFromPrevMonth + monthDays);\n  const prevMonthYear = getPreviousMonth(month, year);\n  const nextMonthYear = getNextMonth(month, year);\n  const prevMonthDays = getMonthDays(prevMonthYear.month, prevMonthYear.year);\n\n  // Creates the arrays for the dates for previous, current and next months\n  const prevMonthDates = [...new Array(daysFromPrevMonth)].map((n, index) => {\n    const day = index + 1 + (prevMonthDays - daysFromPrevMonth);\n    return new Date(prevMonthYear.year, prevMonthYear.month - 1, day);\n  });\n  const currentMonthDates = [...new Array(monthDays)].map((n, index) => {\n    const day = index + 1;\n    return new Date(year, month - 1, day);\n  });\n  const nextMonthDates = [...new Array(daysFromNextMonth)].map((n, index) => {\n    const day = index + 1;\n    return new Date(nextMonthYear.year, nextMonthYear.month - 1, day);\n  });\n\n  return [...prevMonthDates, ...currentMonthDates, ...nextMonthDates];\n};\n\nexport const isRange = (date: any): date is DateRangeProp =>\n  date != null && typeof date === \"object\" && \"startDate\" in date;\n\n/**\n * Checks if the date falls within a specified date range.\n *\n * @param date - The date to be evaluated.\n * @param providedValueRange - Provided selection range.\n * @returns - True if the date falls within the range, false otherwise.\n */\nexport const dateInProvidedValueRange = (\n  date: any,\n  providedValueRange: any\n) => {\n  const { startDate, endDate } = providedValueRange;\n\n  if (!isRange(providedValueRange) || endDate == null) return false;\n  const localEndDate = endDate;\n\n  const modStartDate = dayjs(startDate).format(\"YYYY-MM-DD\");\n  const modEndDate = dayjs(localEndDate).format(\"YYYY-MM-DD\");\n\n  const convertedDate = dayjs(date).format(\"YYYY-MM-DD\");\n\n  return convertedDate >= modStartDate && convertedDate <= modEndDate;\n};\n\nexport const checkIfDateIsDisabled = (\n  date?: string | number | Date | dayjs.Dayjs,\n  minimumDate?: string | number | Date | dayjs.Dayjs,\n  maximumDate?: string | number | Date | dayjs.Dayjs\n) => {\n  if (!minimumDate && !maximumDate) return false;\n  const modStartDate = minimumDate\n    ? dayjs(minimumDate).format(\"YYYY-MM-DD\")\n    : undefined;\n  const modEndDate = maximumDate\n    ? dayjs(maximumDate).format(\"YYYY-MM-DD\")\n    : undefined;\n\n  const convertedDate = dayjs(date).format(\"YYYY-MM-DD\");\n\n  return (\n    (modStartDate !== undefined && convertedDate < modStartDate) ||\n    (modEndDate !== undefined && convertedDate > modEndDate)\n  );\n};\n\nexport const formatToLocale = (date: any, locale: any) => {\n  return new Intl.DateTimeFormat(locale, {\n    day: \"numeric\",\n    month: \"short\",\n    year: \"numeric\",\n  }).format(date);\n};\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"utils.js","sources":["../../../src/Calendar/utils.tsx"],"sourcesContent":["import dayjs from \"dayjs\";\n\nimport { capitalize } from \"../utils/helpers\";\nimport { DateRangeProp } from \"./types\";\n\n/**\n * Constant with the number of weeks to be displayed on the calendar.\n */\nexport const CALENDAR_WEEKS = 6;\n\n/**\n * Constant with the default locale that should be used as the default.\n */\nexport const DEFAULT_LOCALE = \"en\";\n\n/**\n * Pads a string value with leading zeroes(0) until length is reached.\n *\n * @param value - Value to be padded.\n * @param length - Length of the value after the padding is added.\n * @returns The value as a string with the received amount of padding.\n *\n * @example zeroPad(5, 2) => \"05\"\n */\nexport const zeroPad = (value: number, length: number) =>\n  `${value}`.padStart(length, \"0\");\n\n/**\n * Returns the number of days in the month given a month and year.\n *\n * @param month - Number of the month (1 to 12).\n * @param year - Number of the year.\n * @returns The number of days in a month for the received year.\n */\nexport const getMonthDays = (month: number, year: number) =>\n  new Date(year, month, 0).getDate();\n\n/**\n * Gets the week day of the first day of a given month and year.\n * From 0 (Sunday) to 6 (Saturday).\n *\n * @param month - Number of the month (1 to 12).\n * @param year - Number of the year.\n * @returns The zero indexed week day where 0 is Sunday (0 to 6).\n */\nexport const getMonthFirstWeekday = (month: number, year: number) =>\n  new Date(year, month - 1, 1).getDay();\n\n/**\n * Creates a `Date` instance in UTC timezone.\n *\n * @param year - The year of the date.\n * @param monthIndex - The zero indexed month of the year (0 to 11).\n * @param day - The day of the month.\n * @param [hour=1] - The hour of the day.\n * @returns A `Date` instance in UTC timezone.\n */\nexport const makeUTCDate = (\n  year: number,\n  monthIndex: number,\n  day: number,\n  hour = 1\n) => new Date(Date.UTC(year, monthIndex, day, hour));\n\n/**\n * Checks if the received date is a valid date.\n *\n * @param date - The date to be validated.\n * @returns A flag stating if the date is valid or not.\n */\nexport const isDate = (date: any): date is Date =>\n  Object.prototype.toString.call(date) === \"[object Date]\" &&\n  !Number.isNaN(date.valueOf());\n\nexport const isDateRangeProp = (date: any): date is DateRangeProp =>\n  \"startDate\" in date;\n\n/**\n * Checks if two dates are in the same month and year.\n *\n * @param date1 - First date.\n * @param date2 - Second date.\n * @returns A flag stating if the dates are in the same month and year or not.\n */\nexport const isSameMonth = (date1: any, date2: any) => {\n  if (!(isDate(date1) && isDate(date2))) return false;\n\n  return (\n    date1.getMonth() === date2.getMonth() &&\n    date1.getFullYear() === date2.getFullYear()\n  );\n};\n\n/**\n * Checks if two dates are on the same day.\n *\n * @param date1 - First date.\n * @param date2 - Second date.\n * @returns A flag stating if the dates are in the same day or not.\n */\nexport const isSameDay = (date1: any, date2: any) => {\n  if (!(isDate(date1) && isDate(date2))) return false;\n\n  return (\n    date1.getDate() === date2.getDate() &&\n    date1.getMonth() === date2.getMonth() &&\n    date1.getFullYear() === date2.getFullYear()\n  );\n};\n\n/**\n * Formats the received date using the ISO format (YYYY-MM-DD).\n *\n * @param date - The date to be formatted.\n * @returns The formatted date in ISO format.\n */\nexport const getDateISO = (date?: Date) => {\n  if (!isDate(date)) return null;\n\n  return [\n    date.getFullYear(),\n    zeroPad(date.getMonth() + 1, 2),\n    zeroPad(date.getDate(), 2),\n  ].join(\"-\");\n};\n\n/**\n * Returns an object with the previous month taking also into consideration the year.\n * For example the previous month of January 2000 will be December 1999.\n *\n * @param month - Number of the month.\n * @param year - Number of the year.\n * @returns Object with new month and year defined.\n */\nexport const getPreviousMonth = (month: number, year: number) => {\n  const prevMonth = month > 1 ? month - 1 : 12;\n  const prevMonthYear = month > 1 ? year : year - 1;\n\n  return { month: prevMonth, year: prevMonthYear };\n};\n\n/**\n * Returns an object with the next month taking also into consideration the year.\n * For example the next month of December 2000 will be January 2001.\n *\n * @param month - Number of the month.\n * @param year - Number of the year.\n * @returns Object with new month and year defined.\n */\nexport const getNextMonth = (month: number, year: number) => {\n  const nextMonth = month < 12 ? month + 1 : 1;\n  const nextMonthYear = month < 12 ? year : year + 1;\n\n  return { month: nextMonth, year: nextMonthYear };\n};\n\n/**\n * Returns a list with the names of all the months localized in the received locale and representation value.\n *\n * @param locale - The locale to be applied to the Intl format.\n * @param representationValue - The representation value for the month.\n * @returns An array with all the months names.\n */\nexport const getMonthNamesList = (\n  locale: string | undefined,\n  representationValue: Intl.DateTimeFormatOptions[\"month\"] = \"long\"\n) => {\n  const options = { month: representationValue, timeZone: \"UTC\" };\n\n  return [...new Array(12)].map((n, index) => {\n    const auxDate = makeUTCDate(1970, index, 1);\n    return capitalize(Intl.DateTimeFormat(locale, options).format(auxDate));\n  });\n};\n\n/**\n * Returns a list with the names of all the weekdays localized in the received locale and representation value.\n *\n * @param locale - The locale to be applied.\n * @returns An array with all the weekday names.\n */\nexport const getWeekdayNamesList = (locale: string) => {\n  const formatter = new Intl.DateTimeFormat(locale, {\n    weekday: \"narrow\",\n    timeZone: \"UTC\",\n  });\n\n  return [...new Array(7)].map((n, index) => {\n    return formatter.format(makeUTCDate(1970, 0, 4 + index));\n  });\n};\n\n/**\n * Returns the name of the month for the supplied month localized in the received locale and representation value.\n *\n * @param date - The date from which the month name is extracted.\n * @param locale - The locale to be applied to the Intl format.\n * @param representationValue - The locale to be applied to the Intl format.\n * @returns The name of the month.\n */\nexport const getMonthName = (\n  date: Date,\n  locale: string,\n  representationValue: Intl.DateTimeFormatOptions[\"month\"] = \"long\"\n) =>\n  new Intl.DateTimeFormat(locale, { month: representationValue }).format(date);\n\n/**\n * Formats the received date according to Design System specifications.\n * Currently: day month, year => `14 Aug, 2019`.\n *\n * @param date - UTC date to be formatted.\n * @param locale - The locale to be applied to the Intl format.\n * @returns The formatted date as a string.\n */\nexport const getFormattedDate = (\n  // TODO: fix this\n  date: any,\n  locale: any,\n  rep: Intl.DateTimeFormatOptions[\"month\"] = \"short\"\n) =>\n  `${date.getDate()} ${getMonthName(date, locale, rep)} ${date.getFullYear()}`;\n\n/**\n * Creates an array of 42 days. The complete current month and enough days from the previous and next months to fill\n * the 42 positions.\n *\n * @param month - The number of the month (1 to 12).\n * @param year - The number of the year.\n * @returns The array of dates.\n */\nexport const createDatesArray = (month: number, year: number) => {\n  // Initializes the variables needed to calculate the dates for the received month and year\n  const monthDays = getMonthDays(month, year);\n  const daysFromPrevMonth = getMonthFirstWeekday(month, year);\n  const daysFromNextMonth =\n    CALENDAR_WEEKS * 7 - (daysFromPrevMonth + monthDays);\n  const prevMonthYear = getPreviousMonth(month, year);\n  const nextMonthYear = getNextMonth(month, year);\n  const prevMonthDays = getMonthDays(prevMonthYear.month, prevMonthYear.year);\n\n  // Creates the arrays for the dates for previous, current and next months\n  const prevMonthDates = [...new Array(daysFromPrevMonth)].map((n, index) => {\n    const day = index + 1 + (prevMonthDays - daysFromPrevMonth);\n    return new Date(prevMonthYear.year, prevMonthYear.month - 1, day);\n  });\n  const currentMonthDates = [...new Array(monthDays)].map((n, index) => {\n    const day = index + 1;\n    return new Date(year, month - 1, day);\n  });\n  const nextMonthDates = [...new Array(daysFromNextMonth)].map((n, index) => {\n    const day = index + 1;\n    return new Date(nextMonthYear.year, nextMonthYear.month - 1, day);\n  });\n\n  return [...prevMonthDates, ...currentMonthDates, ...nextMonthDates];\n};\n\nexport const isRange = (date: any): date is DateRangeProp =>\n  date != null && typeof date === \"object\" && \"startDate\" in date;\n\n/**\n * Checks if the date falls within a specified date range.\n *\n * @param date - The date to be evaluated.\n * @param providedValueRange - Provided selection range.\n * @returns - True if the date falls within the range, false otherwise.\n */\nexport const dateInProvidedValueRange = (\n  date: any,\n  providedValueRange: any\n) => {\n  const { startDate, endDate } = providedValueRange;\n\n  if (!isRange(providedValueRange) || endDate == null) return false;\n  const localEndDate = endDate;\n\n  const modStartDate = dayjs(startDate).format(\"YYYY-MM-DD\");\n  const modEndDate = dayjs(localEndDate).format(\"YYYY-MM-DD\");\n\n  const convertedDate = dayjs(date).format(\"YYYY-MM-DD\");\n\n  return convertedDate >= modStartDate && convertedDate <= modEndDate;\n};\n\nexport const checkIfDateIsDisabled = (\n  date?: string | number | Date | dayjs.Dayjs,\n  minimumDate?: string | number | Date | dayjs.Dayjs,\n  maximumDate?: string | number | Date | dayjs.Dayjs\n) => {\n  if (!minimumDate && !maximumDate) return false;\n  const modStartDate = minimumDate\n    ? dayjs(minimumDate).format(\"YYYY-MM-DD\")\n    : undefined;\n  const modEndDate = maximumDate\n    ? dayjs(maximumDate).format(\"YYYY-MM-DD\")\n    : undefined;\n\n  const convertedDate = dayjs(date).format(\"YYYY-MM-DD\");\n\n  return (\n    (modStartDate !== undefined && convertedDate < modStartDate) ||\n    (modEndDate !== undefined && convertedDate > modEndDate)\n  );\n};\n\nexport const formatToLocale = (date: any, locale: any) => {\n  return new Intl.DateTimeFormat(locale, {\n    day: \"numeric\",\n    month: \"short\",\n    year: \"numeric\",\n  }).format(date);\n};\n"],"names":[],"mappings":"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"}

package/dist/esm/Carousel/Carousel.js

@@ -4,15 +4,15 @@ import useCarousel from "embla-carousel-react";
 import { Close, Fullscreen, Backwards, Forwards } from "@hitachivantara/uikit-react-icons";
 import { useDefaultProps } from "../hooks/useDefaultProps.js";
 import { useTheme } from "../hooks/useTheme.js";
+import { clamp } from "../utils/helpers.js";
 import { HvCarouselControls } from "./CarouselControls.js";
 import { HvCarouselThumbnails } from "./CarouselThumbnails.js";
 import { useClasses } from "./Carousel.styles.js";
 import { staticClasses } from "./Carousel.styles.js";
-import { HvIconButton } from "../IconButton/IconButton.js";
 import { HvContainer } from "../Container/Container.js";
 import { HvButton } from "../Button/Button.js";
+import { HvIconButton } from "../IconButton/IconButton.js";
 import { HvTypography } from "../Typography/Typography.js";
-const clamp = (num, max, min = 0) => Math.min(Math.max(num, min), max);
 const HvCarousel = (props) => {
   const {
     className,
@@ -84,7 +84,7 @@ const HvCarousel = (props) => {
     if (!controller)
       return;
     controller.reInit();
-    setSelectedIndex((currentIndex) => clamp(currentIndex, numSlides, 0));
+    setSelectedIndex((currentIndex) => clamp(currentIndex, numSlides));
   }, [numSlides, controller]);
   const canPrev = controller?.canScrollPrev() ?? false;
   const canNext = controller?.canScrollNext() ?? false;

package/dist/esm/Carousel/Carousel.js.map

@@ -1 +1 @@
-{"version":3,"file":"Carousel.js","sources":["../../../src/Carousel/Carousel.tsx"],"sourcesContent":["import React, {\n  CSSProperties,\n  Children,\n  useCallback,\n  useEffect,\n  useRef,\n  useState,\n} from \"react\";\nimport useCarousel from \"embla-carousel-react\";\nimport {\n  Backwards,\n  Forwards,\n  Close,\n  Fullscreen,\n} from \"@hitachivantara/uikit-react-icons\";\n\nimport { useDefaultProps } from \"../hooks/useDefaultProps\";\nimport { HvBaseProps } from \"../types/generic\";\nimport { HvButton } from \"../Button\";\nimport { useTheme } from \"../hooks/useTheme\";\nimport { HvTypography } from \"../Typography\";\nimport { HvContainer } from \"../Container\";\nimport { ExtractNames } from \"../utils/classes\";\nimport { HvCarouselControls } from \"./CarouselControls\";\nimport { HvCarouselThumbnails } from \"./CarouselThumbnails\";\nimport { staticClasses, useClasses } from \"./Carousel.styles\";\nimport { HvIconButton } from \"../IconButton\";\n\nconst clamp = (num: number, max: number, min = 0) =>\n  Math.min(Math.max(num, min), max);\n\nexport { staticClasses as carouselClasses };\n\nexport type HvCarouselClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvCarouselProps\n  extends HvBaseProps<HTMLDivElement, \"title\" | \"onChange\"> {\n  /** A Jss Object used to override or extend the styles applied. */\n  classes?: HvCarouselClasses;\n  /** Height of the Slider container. If `undefined`, images will keep a 16/9 aspect-ratio */\n  height?: CSSProperties[\"height\"];\n  /** Width of the thumbnail. Height will try to maintain a 16/9 aspect-ratio */\n  thumbnailWidth?: CSSProperties[\"width\"];\n  /** Title of the carousel */\n  title?: React.ReactNode;\n  /** Content slides to be displayed. @see `<HvCarouselSlide />` */\n  children?: React.ReactNode;\n  /** Custom content to render in the actions area */\n  actions?: React.ReactNode;\n  /** Whether Carousel is in \"xs mode\" - to use in embedded contexts */\n  xs?: boolean;\n  /** Whether to show dots instead of arrow pagination. Defaults to true under 5 elements */\n  showDots?: boolean;\n  /** Whether to show the counter on the top-right corner of the active slide */\n  showCounter?: boolean;\n  /** Whether to show the back/forwards buttons over the active slide */\n  showSlideControls?: boolean;\n  /** Whether to enable the fullscreen toggle button */\n  showFullscreen?: boolean;\n  /** Whether to hide the thumbnails. Hidden by default in \"xs\" mode */\n  hideThumbnails?: boolean;\n  /** Controls position. */\n  controlsPosition?: \"top\" | \"bottom\";\n  /** Thumbnails position. */\n  thumbnailsPosition?: \"top\" | \"bottom\";\n  /** Carousel configuration options. @see https://www.embla-carousel.com/api/options/ */\n  carouselOptions?: Parameters<typeof useCarousel>[0];\n  /** Function that renders the thumbnail.  */\n  renderThumbnail?: (index: number) => React.ReactNode;\n  /** The callback fired when the active slide changes. */\n  onChange?: (index: number) => void;\n}\n\n/**\n * A Carousel is commonly used to browse images, it can also be used to browse any kind of content like text, video, or charts.\n * It allows you to focus on a particular content while having a notion of how many you have to explore.\n */\nexport const HvCarousel = (props: HvCarouselProps) => {\n  const {\n    className,\n    classes: classesProp,\n    height: heightProp = \"auto\",\n    thumbnailWidth = 90,\n    title,\n    children,\n    actions: actionsProp,\n    xs,\n    showDots: showDotsProp,\n    showCounter: showCounterProp,\n    showSlideControls,\n    showFullscreen: showFullscreenProp,\n    hideThumbnails: hideThumbnailsProp,\n    controlsPosition: controlsPositionProp,\n    thumbnailsPosition: thumbnailsPositionProp,\n    carouselOptions,\n    renderThumbnail,\n    onChange,\n    ...others\n  } = useDefaultProps(\"HvCarousel\", props);\n  const { activeTheme } = useTheme();\n  const { classes, css, cx } = useClasses(classesProp);\n  const thumbnailsRef = useRef<HTMLDivElement>(null);\n  const [isFullscreen, setIsFullscreen] = useState(false);\n\n  const isDs3 = activeTheme?.name === \"ds3\";\n  const actionsPosition = isDs3 ? \"header\" : \"controls\";\n  const controlsPosition = controlsPositionProp ?? (isDs3 ? \"bottom\" : \"top\");\n  const thumbnailsPosition = thumbnailsPositionProp ?? \"bottom\";\n\n  const [containerRef, controller] = useCarousel({\n    align: \"start\",\n    loop: true,\n    ...carouselOptions,\n  });\n\n  const [selectedIndex, setSelectedIndex] = useState(\n    carouselOptions?.startIndex ?? 0\n  );\n\n  const numSlides = Children.count(children);\n\n  const handlePrevious = useCallback(() => {\n    controller?.scrollPrev();\n  }, [controller]);\n\n  const handleNext = useCallback(() => {\n    controller?.scrollNext();\n  }, [controller]);\n\n  const handleScroll = (index: number) => {\n    controller?.scrollTo(index);\n  };\n\n  const handleSelect = useCallback(() => {\n    if (!controller) return;\n\n    const slideIndex = controller.selectedScrollSnap();\n    setSelectedIndex(slideIndex);\n\n    // scroll to thumbnail button\n    thumbnailsRef.current\n      ?.querySelectorAll(\"button\")\n      ?.[slideIndex]?.scrollIntoView({\n        behavior: \"smooth\",\n        block: \"nearest\",\n      });\n\n    onChange?.(slideIndex);\n  }, [controller, onChange]);\n\n  useEffect(() => {\n    if (!controller) return;\n\n    controller.on(\"select\", handleSelect);\n\n    return () => {\n      controller.off(\"select\", handleSelect);\n    };\n  }, [controller, handleSelect]);\n\n  useEffect(() => {\n    if (!controller) return;\n\n    controller.reInit();\n    setSelectedIndex((currentIndex) => clamp(currentIndex, numSlides, 0));\n  }, [numSlides, controller]);\n\n  const canPrev = controller?.canScrollPrev() ?? false;\n  const canNext = controller?.canScrollNext() ?? false;\n  const showTitle = !!title && (!xs || isFullscreen);\n  const showFullscreen = showFullscreenProp ?? xs;\n  const height = isFullscreen ? \"100%\" : heightProp ?? \"auto\";\n  const showCounter = xs;\n  const hideThumbnails = hideThumbnailsProp ?? (xs && !isFullscreen);\n  const showThumbnails = !hideThumbnails && !!renderThumbnail;\n  const showDots = showDotsProp ?? numSlides <= 5;\n\n  const actions = (\n    <div\n      className={cx(\n        classes.actions,\n        actionsPosition === \"header\"\n          ? css({ position: \"relative\", top: -40, height: 0 })\n          : css({ position: \"absolute\" })\n      )}\n    >\n      {actionsProp}\n      {showFullscreen && (\n        <HvIconButton\n          title={isFullscreen ? \"Close\" : \"Fullscreen\"}\n          onClick={() => setIsFullscreen((curr) => !curr)}\n          className={classes.closeButton}\n        >\n          {isFullscreen ? <Close /> : <Fullscreen />}\n        </HvIconButton>\n      )}\n    </div>\n  );\n\n  const controls = (\n    <HvCarouselControls\n      classes={classes}\n      showDots={showDots}\n      page={selectedIndex}\n      pages={numSlides}\n      canPrevious={canPrev}\n      canNext={canNext}\n      onPreviousClick={handlePrevious}\n      onNextClick={handleNext}\n      actions={actionsPosition === \"controls\" && actions}\n    />\n  );\n\n  const thumbnails = showThumbnails && (\n    <HvCarouselThumbnails\n      classes={classes}\n      ref={thumbnailsRef}\n      page={selectedIndex}\n      pages={numSlides}\n      width={thumbnailWidth}\n      onThumbnailClick={(evt, i) => handleScroll(i)}\n      renderThumbnail={renderThumbnail}\n    />\n  );\n\n  return (\n    <HvContainer\n      className={cx(classes.root, className, {\n        [classes.xs]: xs,\n        [classes.fullscreen]: isFullscreen,\n      })}\n      {...others}\n    >\n      {showTitle && (\n        <HvTypography variant=\"title2\" className={classes.title}>\n          {title}\n        </HvTypography>\n      )}\n\n      {actionsPosition === \"header\" && actions}\n      {thumbnailsPosition === \"top\" && thumbnails}\n      {controlsPosition === \"top\" && controls}\n      <div\n        className={cx(classes.main, {\n          [classes.mainXs]: xs,\n          [classes.mainFullscreen]: isFullscreen,\n        })}\n      >\n        {showCounter && (\n          <div className={classes.counterContainer}>\n            <span className={classes.counter}>\n              {`${selectedIndex + 1}/${numSlides}`}\n            </span>\n          </div>\n        )}\n\n        {showSlideControls && (\n          <div className={classes.slideControls}>\n            <HvButton\n              icon\n              disabled={!canPrev}\n              variant=\"secondarySubtle\"\n              aria-label=\"Backwards\"\n              onClick={handlePrevious}\n            >\n              <Backwards iconSize=\"XS\" />\n            </HvButton>\n            <HvButton\n              icon\n              disabled={!canNext}\n              variant=\"secondarySubtle\"\n              aria-label=\"Forwards\"\n              onClick={handleNext}\n            >\n              <Forwards iconSize=\"XS\" />\n            </HvButton>\n          </div>\n        )}\n\n        <div\n          ref={containerRef}\n          style={{ height }}\n          className={classes.slidesViewport}\n        >\n          <div className={classes.slidesContainer}>{children}</div>\n        </div>\n      </div>\n      {controlsPosition === \"bottom\" && controls}\n      {thumbnailsPosition === \"bottom\" && thumbnails}\n    </HvContainer>\n  );\n};\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"Carousel.js","sources":["../../../src/Carousel/Carousel.tsx"],"sourcesContent":["import React, {\n  CSSProperties,\n  Children,\n  useCallback,\n  useEffect,\n  useRef,\n  useState,\n} from \"react\";\nimport useCarousel from \"embla-carousel-react\";\nimport {\n  Backwards,\n  Forwards,\n  Close,\n  Fullscreen,\n} from \"@hitachivantara/uikit-react-icons\";\n\nimport { useDefaultProps } from \"../hooks/useDefaultProps\";\nimport { HvBaseProps } from \"../types/generic\";\nimport { HvButton } from \"../Button\";\nimport { useTheme } from \"../hooks/useTheme\";\nimport { HvTypography } from \"../Typography\";\nimport { HvContainer } from \"../Container\";\nimport { clamp } from \"../utils/helpers\";\nimport { ExtractNames } from \"../utils/classes\";\nimport { HvCarouselControls } from \"./CarouselControls\";\nimport { HvCarouselThumbnails } from \"./CarouselThumbnails\";\nimport { staticClasses, useClasses } from \"./Carousel.styles\";\nimport { HvIconButton } from \"../IconButton\";\n\nexport { staticClasses as carouselClasses };\n\nexport type HvCarouselClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvCarouselProps\n  extends HvBaseProps<HTMLDivElement, \"title\" | \"onChange\"> {\n  /** A Jss Object used to override or extend the styles applied. */\n  classes?: HvCarouselClasses;\n  /** Height of the Slider container. If `undefined`, images will keep a 16/9 aspect-ratio */\n  height?: CSSProperties[\"height\"];\n  /** Width of the thumbnail. Height will try to maintain a 16/9 aspect-ratio */\n  thumbnailWidth?: CSSProperties[\"width\"];\n  /** Title of the carousel */\n  title?: React.ReactNode;\n  /** Content slides to be displayed. @see `<HvCarouselSlide />` */\n  children?: React.ReactNode;\n  /** Custom content to render in the actions area */\n  actions?: React.ReactNode;\n  /** Whether Carousel is in \"xs mode\" - to use in embedded contexts */\n  xs?: boolean;\n  /** Whether to show dots instead of arrow pagination. Defaults to true under 5 elements */\n  showDots?: boolean;\n  /** Whether to show the counter on the top-right corner of the active slide */\n  showCounter?: boolean;\n  /** Whether to show the back/forwards buttons over the active slide */\n  showSlideControls?: boolean;\n  /** Whether to enable the fullscreen toggle button */\n  showFullscreen?: boolean;\n  /** Whether to hide the thumbnails. Hidden by default in \"xs\" mode */\n  hideThumbnails?: boolean;\n  /** Controls position. */\n  controlsPosition?: \"top\" | \"bottom\";\n  /** Thumbnails position. */\n  thumbnailsPosition?: \"top\" | \"bottom\";\n  /** Carousel configuration options. @see https://www.embla-carousel.com/api/options/ */\n  carouselOptions?: Parameters<typeof useCarousel>[0];\n  /** Function that renders the thumbnail.  */\n  renderThumbnail?: (index: number) => React.ReactNode;\n  /** The callback fired when the active slide changes. */\n  onChange?: (index: number) => void;\n}\n\n/**\n * A Carousel is commonly used to browse images, it can also be used to browse any kind of content like text, video, or charts.\n * It allows you to focus on a particular content while having a notion of how many you have to explore.\n */\nexport const HvCarousel = (props: HvCarouselProps) => {\n  const {\n    className,\n    classes: classesProp,\n    height: heightProp = \"auto\",\n    thumbnailWidth = 90,\n    title,\n    children,\n    actions: actionsProp,\n    xs,\n    showDots: showDotsProp,\n    showCounter: showCounterProp,\n    showSlideControls,\n    showFullscreen: showFullscreenProp,\n    hideThumbnails: hideThumbnailsProp,\n    controlsPosition: controlsPositionProp,\n    thumbnailsPosition: thumbnailsPositionProp,\n    carouselOptions,\n    renderThumbnail,\n    onChange,\n    ...others\n  } = useDefaultProps(\"HvCarousel\", props);\n  const { activeTheme } = useTheme();\n  const { classes, css, cx } = useClasses(classesProp);\n  const thumbnailsRef = useRef<HTMLDivElement>(null);\n  const [isFullscreen, setIsFullscreen] = useState(false);\n\n  const isDs3 = activeTheme?.name === \"ds3\";\n  const actionsPosition = isDs3 ? \"header\" : \"controls\";\n  const controlsPosition = controlsPositionProp ?? (isDs3 ? \"bottom\" : \"top\");\n  const thumbnailsPosition = thumbnailsPositionProp ?? \"bottom\";\n\n  const [containerRef, controller] = useCarousel({\n    align: \"start\",\n    loop: true,\n    ...carouselOptions,\n  });\n\n  const [selectedIndex, setSelectedIndex] = useState(\n    carouselOptions?.startIndex ?? 0\n  );\n\n  const numSlides = Children.count(children);\n\n  const handlePrevious = useCallback(() => {\n    controller?.scrollPrev();\n  }, [controller]);\n\n  const handleNext = useCallback(() => {\n    controller?.scrollNext();\n  }, [controller]);\n\n  const handleScroll = (index: number) => {\n    controller?.scrollTo(index);\n  };\n\n  const handleSelect = useCallback(() => {\n    if (!controller) return;\n\n    const slideIndex = controller.selectedScrollSnap();\n    setSelectedIndex(slideIndex);\n\n    // scroll to thumbnail button\n    thumbnailsRef.current\n      ?.querySelectorAll(\"button\")\n      ?.[slideIndex]?.scrollIntoView({\n        behavior: \"smooth\",\n        block: \"nearest\",\n      });\n\n    onChange?.(slideIndex);\n  }, [controller, onChange]);\n\n  useEffect(() => {\n    if (!controller) return;\n\n    controller.on(\"select\", handleSelect);\n\n    return () => {\n      controller.off(\"select\", handleSelect);\n    };\n  }, [controller, handleSelect]);\n\n  useEffect(() => {\n    if (!controller) return;\n\n    controller.reInit();\n    setSelectedIndex((currentIndex) => clamp(currentIndex, numSlides));\n  }, [numSlides, controller]);\n\n  const canPrev = controller?.canScrollPrev() ?? false;\n  const canNext = controller?.canScrollNext() ?? false;\n  const showTitle = !!title && (!xs || isFullscreen);\n  const showFullscreen = showFullscreenProp ?? xs;\n  const height = isFullscreen ? \"100%\" : heightProp ?? \"auto\";\n  const showCounter = xs;\n  const hideThumbnails = hideThumbnailsProp ?? (xs && !isFullscreen);\n  const showThumbnails = !hideThumbnails && !!renderThumbnail;\n  const showDots = showDotsProp ?? numSlides <= 5;\n\n  const actions = (\n    <div\n      className={cx(\n        classes.actions,\n        actionsPosition === \"header\"\n          ? css({ position: \"relative\", top: -40, height: 0 })\n          : css({ position: \"absolute\" })\n      )}\n    >\n      {actionsProp}\n      {showFullscreen && (\n        <HvIconButton\n          title={isFullscreen ? \"Close\" : \"Fullscreen\"}\n          onClick={() => setIsFullscreen((curr) => !curr)}\n          className={classes.closeButton}\n        >\n          {isFullscreen ? <Close /> : <Fullscreen />}\n        </HvIconButton>\n      )}\n    </div>\n  );\n\n  const controls = (\n    <HvCarouselControls\n      classes={classes}\n      showDots={showDots}\n      page={selectedIndex}\n      pages={numSlides}\n      canPrevious={canPrev}\n      canNext={canNext}\n      onPreviousClick={handlePrevious}\n      onNextClick={handleNext}\n      actions={actionsPosition === \"controls\" && actions}\n    />\n  );\n\n  const thumbnails = showThumbnails && (\n    <HvCarouselThumbnails\n      classes={classes}\n      ref={thumbnailsRef}\n      page={selectedIndex}\n      pages={numSlides}\n      width={thumbnailWidth}\n      onThumbnailClick={(evt, i) => handleScroll(i)}\n      renderThumbnail={renderThumbnail}\n    />\n  );\n\n  return (\n    <HvContainer\n      className={cx(classes.root, className, {\n        [classes.xs]: xs,\n        [classes.fullscreen]: isFullscreen,\n      })}\n      {...others}\n    >\n      {showTitle && (\n        <HvTypography variant=\"title2\" className={classes.title}>\n          {title}\n        </HvTypography>\n      )}\n\n      {actionsPosition === \"header\" && actions}\n      {thumbnailsPosition === \"top\" && thumbnails}\n      {controlsPosition === \"top\" && controls}\n      <div\n        className={cx(classes.main, {\n          [classes.mainXs]: xs,\n          [classes.mainFullscreen]: isFullscreen,\n        })}\n      >\n        {showCounter && (\n          <div className={classes.counterContainer}>\n            <span className={classes.counter}>\n              {`${selectedIndex + 1}/${numSlides}`}\n            </span>\n          </div>\n        )}\n\n        {showSlideControls && (\n          <div className={classes.slideControls}>\n            <HvButton\n              icon\n              disabled={!canPrev}\n              variant=\"secondarySubtle\"\n              aria-label=\"Backwards\"\n              onClick={handlePrevious}\n            >\n              <Backwards iconSize=\"XS\" />\n            </HvButton>\n            <HvButton\n              icon\n              disabled={!canNext}\n              variant=\"secondarySubtle\"\n              aria-label=\"Forwards\"\n              onClick={handleNext}\n            >\n              <Forwards iconSize=\"XS\" />\n            </HvButton>\n          </div>\n        )}\n\n        <div\n          ref={containerRef}\n          style={{ height }}\n          className={classes.slidesViewport}\n        >\n          <div className={classes.slidesContainer}>{children}</div>\n        </div>\n      </div>\n      {controlsPosition === \"bottom\" && controls}\n      {thumbnailsPosition === \"bottom\" && thumbnails}\n    </HvContainer>\n  );\n};\n"],"names":[],"mappings":"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"}

package/dist/esm/DotPagination/DotPagination.js

@@ -1,6 +1,7 @@
 import { jsx } from "@emotion/react/jsx-runtime";
 import { cloneElement } from "react";
 import { OtherStep, CurrentStep } from "@hitachivantara/uikit-react-icons";
+import { range } from "../utils/helpers.js";
 import { useDefaultProps } from "../hooks/useDefaultProps.js";
 import { useClasses } from "./DotPagination.styles.js";
 import { staticClasses } from "./DotPagination.styles.js";
@@ -19,7 +20,6 @@ const getSelectorIcons = (radioIcon, radioCheckedIcon, classes) => {
     )
   };
 };
-const range = (n) => Array.from(Array(n), (_, i) => i);
 const HvDotPagination = (props) => {
   const {
     className,

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\";\n\nimport { HvRadio } from \"../Radio\";\nimport { HvRadioGroup, HvRadioGroupProps } from \"../RadioGroup\";\nimport { ExtractNames } from \"../utils/classes\";\n\nimport { useDefaultProps } from \"../hooks/useDefaultProps\";\n\nimport { staticClasses, useClasses } from \"./DotPagination.styles\";\n\nexport { staticClasses as dotPaginationClasses };\n\nexport type HvDotPaginationClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvDotPaginationProps\n  extends Omit<HvRadioGroupProps, \"classes\"> {\n  /**\n   * Icon to override the default one used for the unselected state.\n   *\n   * The default icon is `OtherStep`.\n   */\n  unselectedIcon?: React.ReactElement;\n  /**\n   * Icon to override the default one used for the selected state.\n   *\n   * The default icon is `CurrentStep`.\n   */\n  selectedIcon?: React.ReactElement;\n  /**\n   *  The number of pages the component has.\n   */\n  pages?: number;\n  /**\n   * The currently selected page.\n   */\n  page?: number;\n  /**\n   * The callback fired when the page value changes.\n   */\n  onPageChange?: (\n    event: React.ChangeEvent<HTMLInputElement>,\n    page: number\n  ) => void;\n  /**\n   * The callback fired to get the page aria label.\n   */\n  getItemAriaLabel?: (page: number) => string;\n  /**\n   * A Jss Object used to override or extend the styles applied.\n   */\n  classes?: HvDotPaginationClasses;\n}\n\nconst getSelectorIcons = (\n  radioIcon?: React.ReactElement,\n  radioCheckedIcon?: React.ReactElement,\n  classes?: HvDotPaginationClasses\n) => {\n  return {\n    radio: cloneElement(radioIcon || <OtherStep width={8} height={8} />, {\n      className: classes?.icon,\n    }),\n    radioChecked: cloneElement(\n      radioCheckedIcon || <CurrentStep width={8} height={8} />,\n      {\n        className: classes?.icon,\n      }\n    ),\n  };\n};\n\nconst range = (n: number) => Array.from(Array(n), (_, i) => i);\n\n/**\n * Pagination is the process of dividing a document into discrete pages. It relates to how users interact with structured content on a website or application.\n * This component uses Radio Buttons to represent each page.\n */\nexport const HvDotPagination = (props: HvDotPaginationProps) => {\n  const {\n    className,\n    classes: classesProp,\n    unselectedIcon,\n    selectedIcon,\n    pages = 1,\n    page = 0,\n    onPageChange,\n    getItemAriaLabel,\n    ...others\n  } = useDefaultProps(\"HvDotPagination\", props);\n\n  const { classes, cx } = useClasses(classesProp);\n\n  const icons = getSelectorIcons(unselectedIcon, selectedIcon, classes);\n\n  return (\n    <HvRadioGroup\n      className={cx(classes.root, className)}\n      classes={{\n        horizontal: classes.horizontal,\n      }}\n      orientation=\"horizontal\"\n      {...others}\n    >\n      {range(pages).map((i) => (\n        <HvRadio\n          classes={{\n            radio: classes.radio,\n            root: classes.radioRoot,\n          }}\n          key={i}\n          value={i}\n          checked={page === i}\n          onChange={(event) => onPageChange?.(event, i)}\n          icon={icons.radio}\n          checkedIcon={icons.radioChecked}\n          aria-label={getItemAriaLabel?.(i)}\n        />\n      ))}\n    </HvRadioGroup>\n  );\n};\n"],"names":[],"mappings":";;;;;;;;AAsDA,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,MACtB;AAAA,IACF;AAAA,EAAA;AAEJ;AAEA,MAAM,QAAQ,CAAC,MAAc,MAAM,KAAK,MAAM,CAAC,GAAG,CAAC,GAAG,MAAM,CAAC;AAMhD,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,GAAG,IAAI,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,MAAA,CAQR;AAAA,IAAA;AAAA,EAAA;AAGP;"}
+{"version":3,"file":"DotPagination.js","sources":["../../../src/DotPagination/DotPagination.tsx"],"sourcesContent":["import { cloneElement } from \"react\";\nimport { CurrentStep, OtherStep } from \"@hitachivantara/uikit-react-icons\";\n\nimport { HvRadio } from \"../Radio\";\nimport { HvRadioGroup, HvRadioGroupProps } from \"../RadioGroup\";\nimport { ExtractNames } from \"../utils/classes\";\nimport { range } from \"../utils/helpers\";\n\nimport { useDefaultProps } from \"../hooks/useDefaultProps\";\n\nimport { staticClasses, useClasses } from \"./DotPagination.styles\";\n\nexport { staticClasses as dotPaginationClasses };\n\nexport type HvDotPaginationClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvDotPaginationProps\n  extends Omit<HvRadioGroupProps, \"classes\"> {\n  /**\n   * Icon to override the default one used for the unselected state.\n   *\n   * The default icon is `OtherStep`.\n   */\n  unselectedIcon?: React.ReactElement;\n  /**\n   * Icon to override the default one used for the selected state.\n   *\n   * The default icon is `CurrentStep`.\n   */\n  selectedIcon?: React.ReactElement;\n  /**\n   *  The number of pages the component has.\n   */\n  pages?: number;\n  /**\n   * The currently selected page.\n   */\n  page?: number;\n  /**\n   * The callback fired when the page value changes.\n   */\n  onPageChange?: (\n    event: React.ChangeEvent<HTMLInputElement>,\n    page: number\n  ) => void;\n  /**\n   * The callback fired to get the page aria label.\n   */\n  getItemAriaLabel?: (page: number) => string;\n  /**\n   * A Jss Object used to override or extend the styles applied.\n   */\n  classes?: HvDotPaginationClasses;\n}\n\nconst getSelectorIcons = (\n  radioIcon?: React.ReactElement,\n  radioCheckedIcon?: React.ReactElement,\n  classes?: HvDotPaginationClasses\n) => {\n  return {\n    radio: cloneElement(radioIcon || <OtherStep width={8} height={8} />, {\n      className: classes?.icon,\n    }),\n    radioChecked: cloneElement(\n      radioCheckedIcon || <CurrentStep width={8} height={8} />,\n      {\n        className: classes?.icon,\n      }\n    ),\n  };\n};\n\n/**\n * Pagination is the process of dividing a document into discrete pages. It relates to how users interact with structured content on a website or application.\n * This component uses Radio Buttons to represent each page.\n */\nexport const HvDotPagination = (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,MACtB;AAAA,IACF;AAAA,EAAA;AAEJ;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,GAAG,IAAI,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,MAAA,CAQR;AAAA,IAAA;AAAA,EAAA;AAGP;"}

package/dist/esm/DropDownMenu/DropDownMenu.js

@@ -30,6 +30,7 @@ const HvDropDownMenu = (props) => {
     expanded,
     defaultExpanded = false,
     category = "secondaryGhost",
+    // TODO - remove and update variant default in v6
     variant,
     size,
     ...others

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

@@ -1 +1 @@
-{"version":3,"file":"DropDownMenu.js","sources":["../../../src/DropDownMenu/DropDownMenu.tsx"],"sourcesContent":["import { ChangeEvent, useMemo } from \"react\";\nimport { MoreOptionsVertical } from \"@hitachivantara/uikit-react-icons\";\n\nimport { useDefaultProps } from \"../hooks/useDefaultProps\";\nimport { useUniqueId } from \"../hooks/useUniqueId\";\nimport { useControlled } from \"../hooks/useControlled\";\nimport { HvBaseProps } from \"../types/generic\";\nimport { isKey } from \"../utils/keyboardUtils\";\nimport { setId } from \"../utils/setId\";\nimport { getPrevNextFocus } from \"../utils/focusableElementFinder\";\nimport { ExtractNames } from \"../utils/classes\";\nimport { HvBaseDropdown, HvBaseDropdownProps } from \"../BaseDropdown\";\nimport { HvButton, HvButtonSize, HvButtonVariant } from \"../Button\";\nimport { HvList, HvListProps, HvListValue } from \"../List\";\nimport { HvPanel } from \"../Panel\";\n\nimport { staticClasses, useClasses } from \"./DropDownMenu.styles\";\nimport { getIconSizeStyles } from \"../Button/Button.styles\";\n\nexport { staticClasses as dropDownMenuClasses };\n\nexport type HvDropDownMenuClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvDropDownMenuProps\n  extends HvBaseProps<HTMLDivElement, \"onClick\"> {\n  /** Icon. */\n  icon?: React.ReactElement;\n  /**\n   * A list containing the elements to be rendered.\n   *\n   * - label: The label of the element to be rendered.\n   * - selected: The selection state of the element.\n   * - disabled: The disabled state of the element.\n   * - icon: The icon node to be rendered on the left.\n   * - showNavIcon: If true renders the navigation icon on the right.\n   */\n  dataList: HvListValue[];\n  /** Placement of the dropdown. */\n  placement?: \"left\" | \"right\";\n  /** Disable the portal behavior. The children stay within it's parent DOM hierarchy. */\n  disablePortal?: boolean;\n  /** Function executed on toggle of the dropdown. Should receive the open status. */\n  onToggle?: (event: Event, open: boolean) => void;\n  /** Function executed in each onClick. Should received the clicked element. */\n  onClick?: (\n    event: React.ChangeEvent<HTMLLIElement>,\n    value: HvListValue\n  ) => void;\n  /** Keep the Dropdown Menu opened after clicking one option */\n  keepOpened?: boolean;\n  /** Defines if the component is disabled. */\n  disabled?: boolean;\n  /** If true it should be displayed open. */\n  expanded?: boolean;\n  /** When uncontrolled, defines the initial expanded state. */\n  defaultExpanded?: boolean;\n  /**\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?: HvButtonSize;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvDropDownMenuClasses;\n}\n\n/**\n * A drop-down menu is a graphical control element, similar to a list box, that allows the user to choose a value from a list.\n */\nexport const HvDropDownMenu = (props: HvDropDownMenuProps) => {\n  const {\n    id: idProp,\n    classes: classesProp,\n    className,\n    icon,\n    placement = \"right\",\n    dataList,\n    disablePortal = false,\n    onToggle,\n    onClick,\n    keepOpened = true,\n    disabled = false,\n    expanded,\n    defaultExpanded = false,\n    category = \"secondaryGhost\",\n    variant,\n    size,\n    ...others\n  } = useDefaultProps(\"HvDropDownMenu\", props);\n\n  const { classes, cx, css } = useClasses(classesProp);\n  const [open, setOpen] = useControlled(expanded, Boolean(defaultExpanded));\n  const id = useUniqueId(idProp, \"dropdown-menu\");\n  const focusNodes = getPrevNextFocus(setId(id, \"icon-button\"));\n\n  const listId = setId(id, \"list\");\n\n  const handleClose = (event: ChangeEvent) => {\n    // this will only run if uncontrolled\n    setOpen(false);\n    onToggle?.(event as any, false);\n  };\n\n  // If the ESCAPE key is pressed inside the list, the close handler must be called.\n  const handleKeyDown: HvListProps[\"onKeyDown\"] = (event) => {\n    if (isKey(event, \"Tab\")) {\n      const node = event.shiftKey ? focusNodes.prevFocus : focusNodes.nextFocus;\n      if (node) setTimeout(() => node.focus(), 0);\n      handleClose(event as any);\n    }\n    event.preventDefault();\n  };\n\n  const setFocusToContent: HvBaseDropdownProps[\"onContainerCreation\"] = (\n    containerRef\n  ) => {\n    containerRef?.getElementsByTagName(\"li\")[0]?.focus();\n  };\n\n  const condensed = useMemo(() => dataList.every((el) => !el.icon), [dataList]);\n\n  return (\n    <HvBaseDropdown\n      id={id}\n      className={cx(classes.container, className)}\n      classes={{\n        root: classes.root,\n        container: classes.baseContainer,\n      }}\n      expanded={open && !disabled}\n      component={\n        <HvButton\n          icon\n          variant={variant ?? category}\n          id={setId(id, \"icon-button\")}\n          className={cx(\n            classes.icon,\n            { [classes.iconSelected]: open },\n            size && icon && css(getIconSizeStyles(size))\n          )}\n          aria-expanded={open}\n          disabled={disabled}\n          size={size}\n          aria-label=\"Dropdown menu\"\n          aria-haspopup=\"menu\"\n        >\n          {icon || (\n            <MoreOptionsVertical\n              aria-hidden\n              color={disabled ? \"secondary_60\" : undefined}\n            />\n          )}\n        </HvButton>\n      }\n      placement={placement}\n      variableWidth\n      disablePortal={disablePortal}\n      onToggle={(e, s) => {\n        // this will only run if uncontrolled\n        setOpen(s);\n        onToggle?.(e, s);\n      }}\n      disabled={disabled}\n      onContainerCreation={setFocusToContent}\n      {...others}\n    >\n      <HvPanel className={classes.menuListRoot}>\n        <HvList\n          id={listId}\n          values={dataList}\n          selectable={false}\n          condensed={condensed}\n          onClick={(event, item) => {\n            if (!keepOpened) handleClose(event);\n            onClick?.(event, item);\n          }}\n          onKeyDown={handleKeyDown}\n          classes={{\n            root: classes.menuList,\n          }}\n        />\n      </HvPanel>\n    </HvBaseDropdown>\n  );\n};\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"DropDownMenu.js","sources":["../../../src/DropDownMenu/DropDownMenu.tsx"],"sourcesContent":["import { ChangeEvent, useMemo } from \"react\";\nimport { MoreOptionsVertical } from \"@hitachivantara/uikit-react-icons\";\n\nimport { useDefaultProps } from \"../hooks/useDefaultProps\";\nimport { useUniqueId } from \"../hooks/useUniqueId\";\nimport { useControlled } from \"../hooks/useControlled\";\nimport { HvBaseProps } from \"../types/generic\";\nimport { isKey } from \"../utils/keyboardUtils\";\nimport { setId } from \"../utils/setId\";\nimport { getPrevNextFocus } from \"../utils/focusableElementFinder\";\nimport { ExtractNames } from \"../utils/classes\";\nimport { HvBaseDropdown, HvBaseDropdownProps } from \"../BaseDropdown\";\nimport { HvButton, HvButtonSize, HvButtonVariant } from \"../Button\";\nimport { HvList, HvListProps, HvListValue } from \"../List\";\nimport { HvPanel } from \"../Panel\";\nimport { staticClasses, useClasses } from \"./DropDownMenu.styles\";\nimport { getIconSizeStyles } from \"../Button/Button.styles\";\n\nexport { staticClasses as dropDownMenuClasses };\n\nexport type HvDropDownMenuClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvDropDownMenuProps\n  extends HvBaseProps<HTMLDivElement, \"onClick\"> {\n  /** Icon. */\n  icon?: React.ReactElement;\n  /**\n   * A list containing the elements to be rendered.\n   *\n   * - label: The label of the element to be rendered.\n   * - selected: The selection state of the element.\n   * - disabled: The disabled state of the element.\n   * - icon: The icon node to be rendered on the left.\n   * - showNavIcon: If true renders the navigation icon on the right.\n   */\n  dataList: HvListValue[];\n  /** Placement of the dropdown. */\n  placement?: \"left\" | \"right\";\n  /** Disable the portal behavior. The children stay within it's parent DOM hierarchy. */\n  disablePortal?: boolean;\n  /** Function executed on toggle of the dropdown. Should receive the open status. */\n  onToggle?: (event: Event, open: boolean) => void;\n  /** Function executed in each onClick. Should received the clicked element. */\n  onClick?: (\n    event: React.ChangeEvent<HTMLLIElement>,\n    value: HvListValue\n  ) => void;\n  /** Keep the Dropdown Menu opened after clicking one option */\n  keepOpened?: boolean;\n  /** Defines if the component is disabled. */\n  disabled?: boolean;\n  /** If true it should be displayed open. */\n  expanded?: boolean;\n  /** When uncontrolled, defines the initial expanded state. */\n  defaultExpanded?: boolean;\n  /**\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?: HvButtonSize;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvDropDownMenuClasses;\n}\n\n/**\n * A drop-down menu is a graphical control element, similar to a list box, that allows the user to choose a value from a list.\n */\nexport const HvDropDownMenu = (props: HvDropDownMenuProps) => {\n  const {\n    id: idProp,\n    classes: classesProp,\n    className,\n    icon,\n    placement = \"right\",\n    dataList,\n    disablePortal = false,\n    onToggle,\n    onClick,\n    keepOpened = true,\n    disabled = false,\n    expanded,\n    defaultExpanded = false,\n    category = \"secondaryGhost\", // TODO - remove and update variant default in v6\n    variant,\n    size,\n    ...others\n  } = useDefaultProps(\"HvDropDownMenu\", props);\n\n  const { classes, cx, css } = useClasses(classesProp);\n  const [open, setOpen] = useControlled(expanded, Boolean(defaultExpanded));\n  const id = useUniqueId(idProp, \"dropdown-menu\");\n  const focusNodes = getPrevNextFocus(setId(id, \"icon-button\"));\n\n  const listId = setId(id, \"list\");\n\n  const handleClose = (event: ChangeEvent) => {\n    // this will only run if uncontrolled\n    setOpen(false);\n    onToggle?.(event as any, false);\n  };\n\n  // If the ESCAPE key is pressed inside the list, the close handler must be called.\n  const handleKeyDown: HvListProps[\"onKeyDown\"] = (event) => {\n    if (isKey(event, \"Tab\")) {\n      const node = event.shiftKey ? focusNodes.prevFocus : focusNodes.nextFocus;\n      if (node) setTimeout(() => node.focus(), 0);\n      handleClose(event as any);\n    }\n    event.preventDefault();\n  };\n\n  const setFocusToContent: HvBaseDropdownProps[\"onContainerCreation\"] = (\n    containerRef\n  ) => {\n    containerRef?.getElementsByTagName(\"li\")[0]?.focus();\n  };\n\n  const condensed = useMemo(() => dataList.every((el) => !el.icon), [dataList]);\n\n  return (\n    <HvBaseDropdown\n      id={id}\n      className={cx(classes.container, className)}\n      classes={{\n        root: classes.root,\n        container: classes.baseContainer,\n      }}\n      expanded={open && !disabled}\n      component={\n        <HvButton\n          icon\n          variant={variant ?? category}\n          id={setId(id, \"icon-button\")}\n          className={cx(\n            classes.icon,\n            { [classes.iconSelected]: open },\n            size && icon && css(getIconSizeStyles(size))\n          )}\n          aria-expanded={open}\n          disabled={disabled}\n          size={size}\n          aria-label=\"Dropdown menu\"\n          aria-haspopup=\"menu\"\n        >\n          {icon || (\n            <MoreOptionsVertical\n              aria-hidden\n              color={disabled ? \"secondary_60\" : undefined}\n            />\n          )}\n        </HvButton>\n      }\n      placement={placement}\n      variableWidth\n      disablePortal={disablePortal}\n      onToggle={(e, s) => {\n        // this will only run if uncontrolled\n        setOpen(s);\n        onToggle?.(e, s);\n      }}\n      disabled={disabled}\n      onContainerCreation={setFocusToContent}\n      {...others}\n    >\n      <HvPanel className={classes.menuListRoot}>\n        <HvList\n          id={listId}\n          values={dataList}\n          selectable={false}\n          condensed={condensed}\n          onClick={(event, item) => {\n            if (!keepOpened) handleClose(event);\n            onClick?.(event, item);\n          }}\n          onKeyDown={handleKeyDown}\n          classes={{\n            root: classes.menuList,\n          }}\n        />\n      </HvPanel>\n    </HvBaseDropdown>\n  );\n};\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAuEa,MAAA,iBAAiB,CAAC,UAA+B;AACtD,QAAA;AAAA,IACJ,IAAI;AAAA,IACJ,SAAS;AAAA,IACT;AAAA,IACA;AAAA,IACA,YAAY;AAAA,IACZ;AAAA,IACA,gBAAgB;AAAA,IAChB;AAAA,IACA;AAAA,IACA,aAAa;AAAA,IACb,WAAW;AAAA,IACX;AAAA,IACA,kBAAkB;AAAA,IAClB,WAAW;AAAA;AAAA,IACX;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EAAA,IACD,gBAAgB,kBAAkB,KAAK;AAE3C,QAAM,EAAE,SAAS,IAAI,IAAI,IAAI,WAAW,WAAW;AAC7C,QAAA,CAAC,MAAM,OAAO,IAAI,cAAc,UAAU,QAAQ,eAAe,CAAC;AAClE,QAAA,KAAK,YAAY,QAAQ,eAAe;AAC9C,QAAM,aAAa,iBAAiB,MAAM,IAAI,aAAa,CAAC;AAEtD,QAAA,SAAS,MAAM,IAAI,MAAM;AAEzB,QAAA,cAAc,CAAC,UAAuB;AAE1C,YAAQ,KAAK;AACb,eAAW,OAAc,KAAK;AAAA,EAAA;AAI1B,QAAA,gBAA0C,CAAC,UAAU;AACrD,QAAA,MAAM,OAAO,KAAK,GAAG;AACvB,YAAM,OAAO,MAAM,WAAW,WAAW,YAAY,WAAW;AAC5D,UAAA;AAAM,mBAAW,MAAM,KAAK,MAAM,GAAG,CAAC;AAC1C,kBAAY,KAAY;AAAA,IAC1B;AACA,UAAM,eAAe;AAAA,EAAA;AAGjB,QAAA,oBAAgE,CACpE,iBACG;AACH,kBAAc,qBAAqB,IAAI,EAAE,CAAC,GAAG,MAAM;AAAA,EAAA;AAGrD,QAAM,YAAY,QAAQ,MAAM,SAAS,MAAM,CAAC,OAAO,CAAC,GAAG,IAAI,GAAG,CAAC,QAAQ,CAAC;AAG1E,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC;AAAA,MACA,WAAW,GAAG,QAAQ,WAAW,SAAS;AAAA,MAC1C,SAAS;AAAA,QACP,MAAM,QAAQ;AAAA,QACd,WAAW,QAAQ;AAAA,MACrB;AAAA,MACA,UAAU,QAAQ,CAAC;AAAA,MACnB,WACE;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,MAAI;AAAA,UACJ,SAAS,WAAW;AAAA,UACpB,IAAI,MAAM,IAAI,aAAa;AAAA,UAC3B,WAAW;AAAA,YACT,QAAQ;AAAA,YACR,EAAE,CAAC,QAAQ,YAAY,GAAG,KAAK;AAAA,YAC/B,QAAQ,QAAQ,IAAI,kBAAkB,IAAI,CAAC;AAAA,UAC7C;AAAA,UACA,iBAAe;AAAA,UACf;AAAA,UACA;AAAA,UACA,cAAW;AAAA,UACX,iBAAc;AAAA,UAEb,UACC,QAAA;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,eAAW;AAAA,cACX,OAAO,WAAW,iBAAiB;AAAA,YAAA;AAAA,UACrC;AAAA,QAAA;AAAA,MAEJ;AAAA,MAEF;AAAA,MACA,eAAa;AAAA,MACb;AAAA,MACA,UAAU,CAAC,GAAG,MAAM;AAElB,gBAAQ,CAAC;AACT,mBAAW,GAAG,CAAC;AAAA,MACjB;AAAA,MACA;AAAA,MACA,qBAAqB;AAAA,MACpB,GAAG;AAAA,MAEJ,UAAC,oBAAA,SAAA,EAAQ,WAAW,QAAQ,cAC1B,UAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,IAAI;AAAA,UACJ,QAAQ;AAAA,UACR,YAAY;AAAA,UACZ;AAAA,UACA,SAAS,CAAC,OAAO,SAAS;AACxB,gBAAI,CAAC;AAAY,0BAAY,KAAK;AAClC,sBAAU,OAAO,IAAI;AAAA,UACvB;AAAA,UACA,WAAW;AAAA,UACX,SAAS;AAAA,YACP,MAAM,QAAQ;AAAA,UAChB;AAAA,QAAA;AAAA,MAAA,GAEJ;AAAA,IAAA;AAAA,EAAA;AAGN;"}

package/dist/esm/FileUploader/DropZone/DropZone.js

@@ -1,9 +1,9 @@
 import { jsxs, Fragment, jsx } from "@emotion/react/jsx-runtime";
 import { useState, useRef } from "react";
-import uniqueId from "lodash/uniqueId";
 import { Doc } from "@hitachivantara/uikit-react-icons";
 import { setId } from "../../utils/setId.js";
 import { useUniqueId } from "../../hooks/useUniqueId.js";
+import { uniqueId } from "../../utils/helpers.js";
 import { useDefaultProps } from "../../hooks/useDefaultProps.js";
 import { convertUnits } from "../utils.js";
 import { useClasses } from "./DropZone.styles.js";