@hitachivantara/uikit-react-core 5.73.1 → 5.74.0

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"MonthSelector.styles.js","sources":["../../../../../src/Calendar/CalendarNavigation/MonthSelector/MonthSelector.styles.tsx"],"sourcesContent":["import { createClasses } from \"@hitachivantara/uikit-react-utils\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { outlineStyles } from \"../../../utils/focusUtils\";\n\nconst hover = {\n  backgroundColor: theme.colors.atmo3,\n  cursor: \"pointer\",\n};\n\nexport const { staticClasses, useClasses } = createClasses(\"HvMonthSelector\", {\n  calendarMonthlyGrid: {\n    marginTop: \"50px\",\n    marginLeft: \"-16px\",\n    display: \"flex\",\n    zIndex: \"10\",\n    padding: \"0 20px\",\n    position: \"absolute\",\n    flexFlow: \"wrap\",\n    alignContent: \"center\",\n    justifyContent: \"space-evenly\",\n    backgroundColor: theme.colors.atmo1,\n  },\n  rangeModeWidth: {},\n  normalWidth: {},\n  focusSelection: {\n    \"&:hover\": {\n      ...hover,\n    },\n    \"&:focus\": {\n      outline: \"none\",\n    },\n    \"&:focus-visible\": {\n      ...hover,\n      ...outlineStyles,\n    },\n  },\n  calendarMonthlyCell: {\n    display: \"flex\",\n    justifyContent: \"center\",\n    flexDirection: \"column\",\n    textAlign: \"center\",\n    height: \"40px\",\n    width: \"92px\",\n    \"&:hover\": {\n      ...hover,\n    },\n  },\n  calendarMonthlyCellSelected: {\n    backgroundColor: theme.colors.atmo3,\n    color: theme.colors.secondary,\n    \"&:hover\": {\n      backgroundColor: theme.colors.atmo3,\n      color: theme.colors.secondary,\n    },\n  },\n});\n"],"names":[],"mappings":";;;AAKA,MAAM,QAAQ;AAAA,EACZ,iBAAiB,MAAM,OAAO;AAAA,EAC9B,QAAQ;AACV;AAEO,MAAM,EAAE,eAAe,eAAe,cAAc,mBAAmB;AAAA,EAC5E,qBAAqB;AAAA,IACnB,WAAW;AAAA,IACX,YAAY;AAAA,IACZ,SAAS;AAAA,IACT,QAAQ;AAAA,IACR,SAAS;AAAA,IACT,UAAU;AAAA,IACV,UAAU;AAAA,IACV,cAAc;AAAA,IACd,gBAAgB;AAAA,IAChB,iBAAiB,MAAM,OAAO;AAAA,EAChC;AAAA,EACA,gBAAgB,CAAC;AAAA,EACjB,aAAa,CAAC;AAAA,EACd,gBAAgB;AAAA,IACd,WAAW;AAAA,MACT,GAAG;AAAA,IACL;AAAA,IACA,WAAW;AAAA,MACT,SAAS;AAAA,IACX;AAAA,IACA,mBAAmB;AAAA,MACjB,GAAG;AAAA,MACH,GAAG;AAAA,IACL;AAAA,EACF;AAAA,EACA,qBAAqB;AAAA,IACnB,SAAS;AAAA,IACT,gBAAgB;AAAA,IAChB,eAAe;AAAA,IACf,WAAW;AAAA,IACX,QAAQ;AAAA,IACR,OAAO;AAAA,IACP,WAAW;AAAA,MACT,GAAG;AAAA,IACL;AAAA,EACF;AAAA,EACA,6BAA6B;AAAA,IAC3B,iBAAiB,MAAM,OAAO;AAAA,IAC9B,OAAO,MAAM,OAAO;AAAA,IACpB,WAAW;AAAA,MACT,iBAAiB,MAAM,OAAO;AAAA,MAC9B,OAAO,MAAM,OAAO;AAAA,IACtB;AAAA,EACF;AACF,CAAC;"}
+{"version":3,"file":"MonthSelector.styles.js","sources":["../../../../../src/Calendar/CalendarNavigation/MonthSelector/MonthSelector.styles.tsx"],"sourcesContent":["import { createClasses } from \"@hitachivantara/uikit-react-utils\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvMonthSelector\", {\n  calendarMonthlyGrid: {\n    display: \"grid\",\n    gridTemplateColumns: \"repeat(3, 1fr)\",\n    zIndex: \"10\",\n    alignContent: \"center\",\n  },\n  rangeModeWidth: {},\n  normalWidth: {},\n  calendarMonthlyCell: {\n    display: \"flex\",\n    justifyContent: \"center\",\n    alignItems: \"center\",\n    height: \"40px\",\n    width: \"92px\",\n  },\n  calendarMonthlyCellSelected: {\n    backgroundColor: theme.colors.atmo3,\n  },\n});\n"],"names":[],"mappings":";;AAGO,MAAM,EAAE,eAAe,eAAe,cAAc,mBAAmB;AAAA,EAC5E,qBAAqB;AAAA,IACnB,SAAS;AAAA,IACT,qBAAqB;AAAA,IACrB,QAAQ;AAAA,IACR,cAAc;AAAA,EAChB;AAAA,EACA,gBAAgB,CAAC;AAAA,EACjB,aAAa,CAAC;AAAA,EACd,qBAAqB;AAAA,IACnB,SAAS;AAAA,IACT,gBAAgB;AAAA,IAChB,YAAY;AAAA,IACZ,QAAQ;AAAA,IACR,OAAO;AAAA,EACT;AAAA,EACA,6BAA6B;AAAA,IAC3B,iBAAiB,MAAM,OAAO;AAAA,EAChC;AACF,CAAC;"}

package/dist/esm/Calendar/SingleCalendar/CalendarCell.js

@@ -4,12 +4,12 @@ import { useDefaultProps } from "@hitachivantara/uikit-react-utils";
 import { isDateRangeProp, isSameDay, isSameMonth, dateInProvidedValueRange, checkIfDateIsDisabled } from "../utils.js";
 import { useClasses } from "./CalendarCell.styles.js";
 import { staticClasses } from "./CalendarCell.styles.js";
+import { HvButtonBase } from "../../ButtonBase/ButtonBase.js";
 import { HvTypography } from "../../Typography/Typography.js";
 const HvCalendarCell = (props) => {
   const {
     classes: classesProp,
     onChange,
-    onKeyDown,
     calendarValue,
     firstDayOfCurrentMonth,
     value,
@@ -41,25 +41,19 @@ const HvCalendarCell = (props) => {
       if (buttonEl.current) setTimeout(() => buttonEl?.current?.focus());
     }
   };
-  const handleKeyDown = (event) => {
-    onKeyDown?.(event);
-  };
   const renderDate = () => /* @__PURE__ */ jsx(
-    "button",
+    HvButtonBase,
     {
       ref: buttonEl,
-      type: "button",
-      className: cx(classes.cellContainer, {
-        [classes.focusSelection]: inMonth
-      }),
+      className: classes.cellContainer,
       onClick: handleClick,
-      onKeyDown: handleKeyDown,
       disabled: isDateDisabled || !inMonth,
       "data-in-month": inMonth,
       ...others,
       children: /* @__PURE__ */ jsx(
         HvTypography,
         {
+          component: "span",
           variant: isCellToday ? "label" : "body",
           className: cx(classes.calendarDate, {
             [classes.calendarDateSelected]: inMonth && isCellSelected,

package/dist/esm/Calendar/SingleCalendar/CalendarCell.js.map

@@ -1 +1 @@
-{"version":3,"file":"CalendarCell.js","sources":["../../../../src/Calendar/SingleCalendar/CalendarCell.tsx"],"sourcesContent":["import { useRef } from \"react\";\nimport {\n  useDefaultProps,\n  type ExtractNames,\n} from \"@hitachivantara/uikit-react-utils\";\n\nimport { HvTypography } from \"../../Typography\";\nimport CalendarModel from \"../model\";\nimport { DateRangeProp } from \"../types\";\nimport {\n  checkIfDateIsDisabled,\n  dateInProvidedValueRange,\n  isDateRangeProp,\n  isSameDay,\n  isSameMonth,\n} from \"../utils\";\nimport { staticClasses, useClasses } from \"./CalendarCell.styles\";\n\nexport { staticClasses as calendarCellClasses };\n\nexport type HvCalendarCellClasses = ExtractNames<typeof useClasses>;\n\nexport const HvCalendarCell = (props: HvCalendarCellProps) => {\n  const {\n    classes: classesProp,\n    onChange,\n    onKeyDown,\n    calendarValue,\n    firstDayOfCurrentMonth,\n    value,\n    isDateSelectionMode,\n    today,\n    locale,\n    minimumDate,\n    maximumDate,\n    rangeMode = false,\n    ...others\n  } = useDefaultProps(\"HvCalendarCell\", props);\n\n  const { classes, cx } = useClasses(classesProp);\n\n  const buttonEl = useRef<HTMLButtonElement>(null);\n\n  const startDate = isDateRangeProp(calendarValue)\n    ? calendarValue.startDate\n    : undefined;\n  const endDate = isDateRangeProp(calendarValue)\n    ? calendarValue.endDate\n    : undefined;\n  const isCellToday = isSameDay(value, today);\n  const isCellSelected = isSameDay(calendarValue, value);\n  const inMonth = isSameMonth(value, firstDayOfCurrentMonth);\n  const isCellAfterStartingDate =\n    rangeMode && value && startDate ? value >= startDate : false;\n  const isCellStartingDate = rangeMode ? isSameDay(value, startDate) : false;\n  const isDateInSelectionRange =\n    calendarValue && rangeMode\n      ? dateInProvidedValueRange(value, calendarValue)\n      : false;\n  const isDateDisabled = checkIfDateIsDisabled(value, minimumDate, maximumDate);\n  const startBookend = isSameDay(startDate, value);\n  const endBookend = isSameDay(endDate, value);\n  const isSelecting = isDateSelectionMode && isCellAfterStartingDate;\n\n  const handleClick = (event: React.SyntheticEvent) => {\n    if (value) {\n      onChange?.(event, value);\n      if (buttonEl.current) setTimeout(() => buttonEl?.current?.focus());\n    }\n  };\n\n  const handleKeyDown = (event: any) => {\n    onKeyDown?.(event);\n  };\n\n  const renderDate = () => (\n    <button\n      ref={buttonEl}\n      type=\"button\"\n      className={cx(classes.cellContainer, {\n        [classes.focusSelection]: inMonth,\n      })}\n      onClick={handleClick}\n      onKeyDown={handleKeyDown}\n      disabled={isDateDisabled || !inMonth}\n      data-in-month={inMonth}\n      {...others}\n    >\n      <HvTypography\n        variant={isCellToday ? \"label\" : \"body\"}\n        className={cx(classes.calendarDate, {\n          [classes.calendarDateSelected]: inMonth && isCellSelected,\n          [classes.calendarDateNotInMonth]: !inMonth,\n          [classes.calendarDateInSelectionRange]:\n            inMonth && rangeMode && isDateInSelectionRange,\n          [classes.calendarDateDisabled]: isDateDisabled,\n          [classes.startBookend]:\n            inMonth &&\n            ((startBookend && rangeMode) ||\n              (isCellStartingDate && isDateSelectionMode)),\n          [classes.endBookend]: inMonth && endBookend && rangeMode,\n        })}\n      >\n        {value?.getDate()}\n      </HvTypography>\n    </button>\n  );\n\n  return (\n    <div\n      className={cx(classes.dateWrapper, {\n        [classes.cellsInRange]: inMonth && rangeMode && isSelecting,\n        [classes.cellsOutsideRange]: rangeMode && !isSelecting,\n      })}\n      data-calendar-cell=\"calendarCell\"\n    >\n      {renderDate()}\n    </div>\n  );\n};\n\nexport interface HvCalendarCellProps {\n  /**\n   * A Jss Object used to override or extend the component styles.\n   */\n  classes?: HvCalendarCellClasses;\n  /**\n   * Identifier.\n   */\n  id?: string;\n  /**\n   * The text to be shown on the main part of the header.\n   */\n  calendarValue?: string | Date | DateRangeProp;\n  /**\n   * The text to be shown on the main part of the header.\n   */\n  value?: Date;\n  /**\n   * Locale to be used by the calendar.\n   */\n  locale?: string;\n  /**\n   * Callback to define the input date.\n   */\n  onChange?: (event: React.SyntheticEvent, value: Date | DateRangeProp) => void;\n  /**\n   * Callback to handle input onFocus.\n   */\n  onFocus?: React.FocusEventHandler<any>;\n\n  calendarModel?: CalendarModel;\n  onKeyDown?: (event: KeyboardEvent) => void;\n\n  today?: Date;\n  minimumDate?: Date;\n  maximumDate?: Date;\n  firstDayOfCurrentMonth?: Date;\n  isDateSelectionMode?: boolean;\n  rangeMode?: boolean;\n  tabIndex?: number;\n}\n\nexport default HvCalendarCell;\n"],"names":[],"mappings":";;;;;;;AAsBa,MAAA,iBAAiB,CAAC,UAA+B;AACtD,QAAA;AAAA,IACJ,SAAS;AAAA,IACT;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,YAAY;AAAA,IACZ,GAAG;AAAA,EAAA,IACD,gBAAgB,kBAAkB,KAAK;AAE3C,QAAM,EAAE,SAAS,GAAG,IAAI,WAAW,WAAW;AAExC,QAAA,WAAW,OAA0B,IAAI;AAE/C,QAAM,YAAY,gBAAgB,aAAa,IAC3C,cAAc,YACd;AACJ,QAAM,UAAU,gBAAgB,aAAa,IACzC,cAAc,UACd;AACE,QAAA,cAAc,UAAU,OAAO,KAAK;AACpC,QAAA,iBAAiB,UAAU,eAAe,KAAK;AAC/C,QAAA,UAAU,YAAY,OAAO,sBAAsB;AACzD,QAAM,0BACJ,aAAa,SAAS,YAAY,SAAS,YAAY;AACzD,QAAM,qBAAqB,YAAY,UAAU,OAAO,SAAS,IAAI;AACrE,QAAM,yBACJ,iBAAiB,YACb,yBAAyB,OAAO,aAAa,IAC7C;AACN,QAAM,iBAAiB,sBAAsB,OAAO,aAAa,WAAW;AACtE,QAAA,eAAe,UAAU,WAAW,KAAK;AACzC,QAAA,aAAa,UAAU,SAAS,KAAK;AAC3C,QAAM,cAAc,uBAAuB;AAErC,QAAA,cAAc,CAAC,UAAgC;AACnD,QAAI,OAAO;AACT,iBAAW,OAAO,KAAK;AACvB,UAAI,SAAS,QAAS,YAAW,MAAM,UAAU,SAAS,OAAO;AAAA,IACnE;AAAA,EAAA;AAGI,QAAA,gBAAgB,CAAC,UAAe;AACpC,gBAAY,KAAK;AAAA,EAAA;AAGnB,QAAM,aAAa,MACjB;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,KAAK;AAAA,MACL,MAAK;AAAA,MACL,WAAW,GAAG,QAAQ,eAAe;AAAA,QACnC,CAAC,QAAQ,cAAc,GAAG;AAAA,MAAA,CAC3B;AAAA,MACD,SAAS;AAAA,MACT,WAAW;AAAA,MACX,UAAU,kBAAkB,CAAC;AAAA,MAC7B,iBAAe;AAAA,MACd,GAAG;AAAA,MAEJ,UAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,SAAS,cAAc,UAAU;AAAA,UACjC,WAAW,GAAG,QAAQ,cAAc;AAAA,YAClC,CAAC,QAAQ,oBAAoB,GAAG,WAAW;AAAA,YAC3C,CAAC,QAAQ,sBAAsB,GAAG,CAAC;AAAA,YACnC,CAAC,QAAQ,4BAA4B,GACnC,WAAW,aAAa;AAAA,YAC1B,CAAC,QAAQ,oBAAoB,GAAG;AAAA,YAChC,CAAC,QAAQ,YAAY,GACnB,YACE,gBAAgB,aACf,sBAAsB;AAAA,YAC3B,CAAC,QAAQ,UAAU,GAAG,WAAW,cAAc;AAAA,UAAA,CAChD;AAAA,UAEA,iBAAO,QAAQ;AAAA,QAAA;AAAA,MAClB;AAAA,IAAA;AAAA,EAAA;AAKF,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAW,GAAG,QAAQ,aAAa;AAAA,QACjC,CAAC,QAAQ,YAAY,GAAG,WAAW,aAAa;AAAA,QAChD,CAAC,QAAQ,iBAAiB,GAAG,aAAa,CAAC;AAAA,MAAA,CAC5C;AAAA,MACD,sBAAmB;AAAA,MAElB,UAAW,WAAA;AAAA,IAAA;AAAA,EAAA;AAGlB;"}
+{"version":3,"file":"CalendarCell.js","sources":["../../../../src/Calendar/SingleCalendar/CalendarCell.tsx"],"sourcesContent":["import { useRef } from \"react\";\nimport {\n  useDefaultProps,\n  type ExtractNames,\n} from \"@hitachivantara/uikit-react-utils\";\n\nimport { HvButtonBase, HvButtonBaseProps } from \"../../ButtonBase\";\nimport { HvTypography } from \"../../Typography\";\nimport CalendarModel from \"../model\";\nimport { DateRangeProp } from \"../types\";\nimport {\n  checkIfDateIsDisabled,\n  dateInProvidedValueRange,\n  isDateRangeProp,\n  isSameDay,\n  isSameMonth,\n} from \"../utils\";\nimport { staticClasses, useClasses } from \"./CalendarCell.styles\";\n\nexport { staticClasses as calendarCellClasses };\n\nexport type HvCalendarCellClasses = ExtractNames<typeof useClasses>;\n\nexport const HvCalendarCell = (props: HvCalendarCellProps) => {\n  const {\n    classes: classesProp,\n    onChange,\n    calendarValue,\n    firstDayOfCurrentMonth,\n    value,\n    isDateSelectionMode,\n    today,\n    locale,\n    minimumDate,\n    maximumDate,\n    rangeMode = false,\n    ...others\n  } = useDefaultProps(\"HvCalendarCell\", props);\n\n  const { classes, cx } = useClasses(classesProp);\n\n  const buttonEl = useRef<HTMLButtonElement>(null);\n\n  const startDate = isDateRangeProp(calendarValue)\n    ? calendarValue.startDate\n    : undefined;\n  const endDate = isDateRangeProp(calendarValue)\n    ? calendarValue.endDate\n    : undefined;\n  const isCellToday = isSameDay(value, today);\n  const isCellSelected = isSameDay(calendarValue, value);\n  const inMonth = isSameMonth(value, firstDayOfCurrentMonth);\n  const isCellAfterStartingDate =\n    rangeMode && value && startDate ? value >= startDate : false;\n  const isCellStartingDate = rangeMode ? isSameDay(value, startDate) : false;\n  const isDateInSelectionRange =\n    calendarValue && rangeMode\n      ? dateInProvidedValueRange(value, calendarValue)\n      : false;\n  const isDateDisabled = checkIfDateIsDisabled(value, minimumDate, maximumDate);\n  const startBookend = isSameDay(startDate, value);\n  const endBookend = isSameDay(endDate, value);\n  const isSelecting = isDateSelectionMode && isCellAfterStartingDate;\n\n  const handleClick = (event: React.SyntheticEvent) => {\n    if (value) {\n      onChange?.(event, value);\n      if (buttonEl.current) setTimeout(() => buttonEl?.current?.focus());\n    }\n  };\n\n  const renderDate = () => (\n    <HvButtonBase\n      ref={buttonEl}\n      className={classes.cellContainer}\n      onClick={handleClick}\n      disabled={isDateDisabled || !inMonth}\n      data-in-month={inMonth}\n      {...others}\n    >\n      <HvTypography\n        component=\"span\"\n        variant={isCellToday ? \"label\" : \"body\"}\n        className={cx(classes.calendarDate, {\n          [classes.calendarDateSelected]: inMonth && isCellSelected,\n          [classes.calendarDateNotInMonth]: !inMonth,\n          [classes.calendarDateInSelectionRange]:\n            inMonth && rangeMode && isDateInSelectionRange,\n          [classes.calendarDateDisabled]: isDateDisabled,\n          [classes.startBookend]:\n            inMonth &&\n            ((startBookend && rangeMode) ||\n              (isCellStartingDate && isDateSelectionMode)),\n          [classes.endBookend]: inMonth && endBookend && rangeMode,\n        })}\n      >\n        {value?.getDate()}\n      </HvTypography>\n    </HvButtonBase>\n  );\n\n  return (\n    <div\n      className={cx(classes.dateWrapper, {\n        [classes.cellsInRange]: inMonth && rangeMode && isSelecting,\n        [classes.cellsOutsideRange]: rangeMode && !isSelecting,\n      })}\n      data-calendar-cell=\"calendarCell\"\n    >\n      {renderDate()}\n    </div>\n  );\n};\n\nexport interface HvCalendarCellProps\n  extends Omit<HvButtonBaseProps, \"value\" | \"classes\" | \"onChange\"> {\n  /**\n   * A Jss Object used to override or extend the component styles.\n   */\n  classes?: HvCalendarCellClasses;\n  /**\n   * The text to be shown on the main part of the header.\n   */\n  calendarValue?: string | Date | DateRangeProp;\n  /**\n   * The text to be shown on the main part of the header.\n   */\n  value?: Date;\n  /**\n   * Locale to be used by the calendar.\n   */\n  locale?: string;\n  /**\n   * Callback to define the input date.\n   */\n  onChange?: (event: React.SyntheticEvent, value: Date | DateRangeProp) => void;\n  /**\n   * Callback to handle input onFocus.\n   */\n  onFocus?: React.FocusEventHandler<any>;\n\n  calendarModel?: CalendarModel;\n\n  today?: Date;\n  minimumDate?: Date;\n  maximumDate?: Date;\n  firstDayOfCurrentMonth?: Date;\n  isDateSelectionMode?: boolean;\n  rangeMode?: boolean;\n  tabIndex?: number;\n}\n\nexport default HvCalendarCell;\n"],"names":[],"mappings":";;;;;;;;AAuBa,MAAA,iBAAiB,CAAC,UAA+B;AACtD,QAAA;AAAA,IACJ,SAAS;AAAA,IACT;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,YAAY;AAAA,IACZ,GAAG;AAAA,EAAA,IACD,gBAAgB,kBAAkB,KAAK;AAE3C,QAAM,EAAE,SAAS,GAAG,IAAI,WAAW,WAAW;AAExC,QAAA,WAAW,OAA0B,IAAI;AAE/C,QAAM,YAAY,gBAAgB,aAAa,IAC3C,cAAc,YACd;AACJ,QAAM,UAAU,gBAAgB,aAAa,IACzC,cAAc,UACd;AACE,QAAA,cAAc,UAAU,OAAO,KAAK;AACpC,QAAA,iBAAiB,UAAU,eAAe,KAAK;AAC/C,QAAA,UAAU,YAAY,OAAO,sBAAsB;AACzD,QAAM,0BACJ,aAAa,SAAS,YAAY,SAAS,YAAY;AACzD,QAAM,qBAAqB,YAAY,UAAU,OAAO,SAAS,IAAI;AACrE,QAAM,yBACJ,iBAAiB,YACb,yBAAyB,OAAO,aAAa,IAC7C;AACN,QAAM,iBAAiB,sBAAsB,OAAO,aAAa,WAAW;AACtE,QAAA,eAAe,UAAU,WAAW,KAAK;AACzC,QAAA,aAAa,UAAU,SAAS,KAAK;AAC3C,QAAM,cAAc,uBAAuB;AAErC,QAAA,cAAc,CAAC,UAAgC;AACnD,QAAI,OAAO;AACT,iBAAW,OAAO,KAAK;AACvB,UAAI,SAAS,QAAS,YAAW,MAAM,UAAU,SAAS,OAAO;AAAA,IACnE;AAAA,EAAA;AAGF,QAAM,aAAa,MACjB;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,KAAK;AAAA,MACL,WAAW,QAAQ;AAAA,MACnB,SAAS;AAAA,MACT,UAAU,kBAAkB,CAAC;AAAA,MAC7B,iBAAe;AAAA,MACd,GAAG;AAAA,MAEJ,UAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,WAAU;AAAA,UACV,SAAS,cAAc,UAAU;AAAA,UACjC,WAAW,GAAG,QAAQ,cAAc;AAAA,YAClC,CAAC,QAAQ,oBAAoB,GAAG,WAAW;AAAA,YAC3C,CAAC,QAAQ,sBAAsB,GAAG,CAAC;AAAA,YACnC,CAAC,QAAQ,4BAA4B,GACnC,WAAW,aAAa;AAAA,YAC1B,CAAC,QAAQ,oBAAoB,GAAG;AAAA,YAChC,CAAC,QAAQ,YAAY,GACnB,YACE,gBAAgB,aACf,sBAAsB;AAAA,YAC3B,CAAC,QAAQ,UAAU,GAAG,WAAW,cAAc;AAAA,UAAA,CAChD;AAAA,UAEA,iBAAO,QAAQ;AAAA,QAAA;AAAA,MAClB;AAAA,IAAA;AAAA,EAAA;AAKF,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAW,GAAG,QAAQ,aAAa;AAAA,QACjC,CAAC,QAAQ,YAAY,GAAG,WAAW,aAAa;AAAA,QAChD,CAAC,QAAQ,iBAAiB,GAAG,aAAa,CAAC;AAAA,MAAA,CAC5C;AAAA,MACD,sBAAmB;AAAA,MAElB,UAAW,WAAA;AAAA,IAAA;AAAA,EAAA;AAGlB;"}

package/dist/esm/Calendar/SingleCalendar/CalendarCell.styles.js

@@ -1,30 +1,11 @@
 import { createClasses } from "@hitachivantara/uikit-react-utils";
 import { theme } from "@hitachivantara/uikit-styles";
-import { outlineStyles } from "../../utils/focusUtils.js";
 const hover = {
   backgroundColor: theme.colors.containerBackgroundHover,
   cursor: "pointer"
 };
 const { staticClasses, useClasses } = createClasses("HvCalendarCell", {
-  cellContainer: {
-    cursor: "pointer",
-    border: 0,
-    padding: 0,
-    margin: 0,
-    backgroundColor: "transparent"
-  },
-  focusSelection: {
-    "&:hover": {
-      ...hover
-    },
-    "&:focus": {
-      outline: "none"
-    },
-    "&:focus-visible": {
-      ...hover,
-      ...outlineStyles
-    }
-  },
+  cellContainer: {},
   calendarDate: {
     display: "flex",
     justifyContent: "center",

package/dist/esm/Calendar/SingleCalendar/CalendarCell.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"CalendarCell.styles.js","sources":["../../../../src/Calendar/SingleCalendar/CalendarCell.styles.tsx"],"sourcesContent":["import { createClasses } from \"@hitachivantara/uikit-react-utils\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { outlineStyles } from \"../../utils/focusUtils\";\n\nconst hover = {\n  backgroundColor: theme.colors.containerBackgroundHover,\n  cursor: \"pointer\",\n};\n\nexport const { staticClasses, useClasses } = createClasses(\"HvCalendarCell\", {\n  cellContainer: {\n    cursor: \"pointer\",\n    border: 0,\n    padding: 0,\n    margin: 0,\n    backgroundColor: \"transparent\",\n  },\n  focusSelection: {\n    \"&:hover\": {\n      ...hover,\n    },\n    \"&:focus\": {\n      outline: \"none\",\n    },\n    \"&:focus-visible\": {\n      ...hover,\n      ...outlineStyles,\n    },\n  },\n  calendarDate: {\n    display: \"flex\",\n    justifyContent: \"center\",\n    flexDirection: \"column\",\n    textAlign: \"center\",\n    height: \"40px\",\n    width: \"40px\",\n  },\n  calendarDateSelected: {\n    backgroundColor: theme.colors.atmo3,\n    color: theme.colors.secondary,\n    \"&:hover\": {\n      ...hover,\n    },\n  },\n  calendarDateNotInMonth: {\n    color: theme.colors.secondary_60,\n    cursor: \"not-allowed\",\n  },\n  calendarDateInSelectionRange: {\n    backgroundColor: theme.colors.atmo3,\n  },\n  calendarDateDisabled: {\n    color: theme.colors.secondary_60,\n    cursor: \"no-drop\",\n  },\n  startBookend: {\n    borderLeft: `1px solid ${theme.colors.secondary}`,\n  },\n  endBookend: {\n    borderRight: `1px solid ${theme.colors.secondary}`,\n  },\n  dateWrapper: {\n    width: \"40px\",\n    height: \"40px\",\n  },\n  cellsInRange: {\n    \"&:focus\": {\n      outside: \"none\",\n    },\n  },\n  cellsOutsideRange: {\n    \"&:focus\": {\n      outside: \"none\",\n    },\n  },\n});\n"],"names":[],"mappings":";;;AAKA,MAAM,QAAQ;AAAA,EACZ,iBAAiB,MAAM,OAAO;AAAA,EAC9B,QAAQ;AACV;AAEO,MAAM,EAAE,eAAe,eAAe,cAAc,kBAAkB;AAAA,EAC3E,eAAe;AAAA,IACb,QAAQ;AAAA,IACR,QAAQ;AAAA,IACR,SAAS;AAAA,IACT,QAAQ;AAAA,IACR,iBAAiB;AAAA,EACnB;AAAA,EACA,gBAAgB;AAAA,IACd,WAAW;AAAA,MACT,GAAG;AAAA,IACL;AAAA,IACA,WAAW;AAAA,MACT,SAAS;AAAA,IACX;AAAA,IACA,mBAAmB;AAAA,MACjB,GAAG;AAAA,MACH,GAAG;AAAA,IACL;AAAA,EACF;AAAA,EACA,cAAc;AAAA,IACZ,SAAS;AAAA,IACT,gBAAgB;AAAA,IAChB,eAAe;AAAA,IACf,WAAW;AAAA,IACX,QAAQ;AAAA,IACR,OAAO;AAAA,EACT;AAAA,EACA,sBAAsB;AAAA,IACpB,iBAAiB,MAAM,OAAO;AAAA,IAC9B,OAAO,MAAM,OAAO;AAAA,IACpB,WAAW;AAAA,MACT,GAAG;AAAA,IACL;AAAA,EACF;AAAA,EACA,wBAAwB;AAAA,IACtB,OAAO,MAAM,OAAO;AAAA,IACpB,QAAQ;AAAA,EACV;AAAA,EACA,8BAA8B;AAAA,IAC5B,iBAAiB,MAAM,OAAO;AAAA,EAChC;AAAA,EACA,sBAAsB;AAAA,IACpB,OAAO,MAAM,OAAO;AAAA,IACpB,QAAQ;AAAA,EACV;AAAA,EACA,cAAc;AAAA,IACZ,YAAY,aAAa,MAAM,OAAO,SAAS;AAAA,EACjD;AAAA,EACA,YAAY;AAAA,IACV,aAAa,aAAa,MAAM,OAAO,SAAS;AAAA,EAClD;AAAA,EACA,aAAa;AAAA,IACX,OAAO;AAAA,IACP,QAAQ;AAAA,EACV;AAAA,EACA,cAAc;AAAA,IACZ,WAAW;AAAA,MACT,SAAS;AAAA,IACX;AAAA,EACF;AAAA,EACA,mBAAmB;AAAA,IACjB,WAAW;AAAA,MACT,SAAS;AAAA,IACX;AAAA,EACF;AACF,CAAC;"}
+{"version":3,"file":"CalendarCell.styles.js","sources":["../../../../src/Calendar/SingleCalendar/CalendarCell.styles.tsx"],"sourcesContent":["import { createClasses } from \"@hitachivantara/uikit-react-utils\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nconst hover = {\n  backgroundColor: theme.colors.containerBackgroundHover,\n  cursor: \"pointer\",\n};\n\nexport const { staticClasses, useClasses } = createClasses(\"HvCalendarCell\", {\n  cellContainer: {},\n  calendarDate: {\n    display: \"flex\",\n    justifyContent: \"center\",\n    flexDirection: \"column\",\n    textAlign: \"center\",\n    height: \"40px\",\n    width: \"40px\",\n  },\n  calendarDateSelected: {\n    backgroundColor: theme.colors.atmo3,\n    color: theme.colors.secondary,\n    \"&:hover\": {\n      ...hover,\n    },\n  },\n  calendarDateNotInMonth: {\n    color: theme.colors.secondary_60,\n    cursor: \"not-allowed\",\n  },\n  calendarDateInSelectionRange: {\n    backgroundColor: theme.colors.atmo3,\n  },\n  calendarDateDisabled: {\n    color: theme.colors.secondary_60,\n    cursor: \"no-drop\",\n  },\n  startBookend: {\n    borderLeft: `1px solid ${theme.colors.secondary}`,\n  },\n  endBookend: {\n    borderRight: `1px solid ${theme.colors.secondary}`,\n  },\n  dateWrapper: {\n    width: \"40px\",\n    height: \"40px\",\n  },\n  cellsInRange: {\n    \"&:focus\": {\n      outside: \"none\",\n    },\n  },\n  cellsOutsideRange: {\n    \"&:focus\": {\n      outside: \"none\",\n    },\n  },\n});\n"],"names":[],"mappings":";;AAGA,MAAM,QAAQ;AAAA,EACZ,iBAAiB,MAAM,OAAO;AAAA,EAC9B,QAAQ;AACV;AAEO,MAAM,EAAE,eAAe,eAAe,cAAc,kBAAkB;AAAA,EAC3E,eAAe,CAAC;AAAA,EAChB,cAAc;AAAA,IACZ,SAAS;AAAA,IACT,gBAAgB;AAAA,IAChB,eAAe;AAAA,IACf,WAAW;AAAA,IACX,QAAQ;AAAA,IACR,OAAO;AAAA,EACT;AAAA,EACA,sBAAsB;AAAA,IACpB,iBAAiB,MAAM,OAAO;AAAA,IAC9B,OAAO,MAAM,OAAO;AAAA,IACpB,WAAW;AAAA,MACT,GAAG;AAAA,IACL;AAAA,EACF;AAAA,EACA,wBAAwB;AAAA,IACtB,OAAO,MAAM,OAAO;AAAA,IACpB,QAAQ;AAAA,EACV;AAAA,EACA,8BAA8B;AAAA,IAC5B,iBAAiB,MAAM,OAAO;AAAA,EAChC;AAAA,EACA,sBAAsB;AAAA,IACpB,OAAO,MAAM,OAAO;AAAA,IACpB,QAAQ;AAAA,EACV;AAAA,EACA,cAAc;AAAA,IACZ,YAAY,aAAa,MAAM,OAAO,SAAS;AAAA,EACjD;AAAA,EACA,YAAY;AAAA,IACV,aAAa,aAAa,MAAM,OAAO,SAAS;AAAA,EAClD;AAAA,EACA,aAAa;AAAA,IACX,OAAO;AAAA,IACP,QAAQ;AAAA,EACV;AAAA,EACA,cAAc;AAAA,IACZ,WAAW;AAAA,MACT,SAAS;AAAA,IACX;AAAA,EACF;AAAA,EACA,mBAAmB;AAAA,IACjB,WAAW;AAAA,MACT,SAAS;AAAA,IACX;AAAA,EACF;AACF,CAAC;"}

package/dist/esm/ColorPicker/SavedColors/SavedColors.js

@@ -55,7 +55,6 @@ const SavedColors = (props) => {
               className: classes.removeButton,
               variant: "secondarySubtle",
               onClick: () => onRemoveColor(color, index),
-              tabIndex: 0,
               "aria-label": deleteButtonAriaLabel,
               children: /* @__PURE__ */ jsx(CloseXS, { "aria-hidden": true, iconSize: "XS" })
             }

package/dist/esm/ColorPicker/SavedColors/SavedColors.js.map

@@ -1 +1 @@
-{"version":3,"file":"SavedColors.js","sources":["../../../../src/ColorPicker/SavedColors/SavedColors.tsx"],"sourcesContent":["// @types/react-color seems to be broken\n// @ts-ignore\nimport { Swatch } from \"react-color/lib/components/common\";\nimport { Add, CloseXS } from \"@hitachivantara/uikit-react-icons\";\nimport {\n  useDefaultProps,\n  type ExtractNames,\n} from \"@hitachivantara/uikit-react-utils\";\n\nimport { HvButton } from \"../../Button\";\nimport { staticClasses, useClasses } from \"./SavedColors.styles\";\n\nexport { staticClasses as colorPickerSavedColorsClasses };\n\nexport type HvColorPickerSavedColorsClasses = ExtractNames<typeof useClasses>;\n\ninterface SavedColorsProps {\n  colors: string[];\n  onClickColor: (color: { hex: string; source: string }) => void;\n  onAddColor: () => void;\n  onRemoveColor: (color: string, index: number) => void;\n  deleteButtonAriaLabel?: string;\n  addButtonAriaLabel?: string;\n  classes?: HvColorPickerSavedColorsClasses;\n}\n\nexport const SavedColors = (props: SavedColorsProps) => {\n  const {\n    colors,\n    onClickColor,\n    onAddColor,\n    onRemoveColor,\n    deleteButtonAriaLabel,\n    addButtonAriaLabel,\n    classes: classesProp,\n  } = useDefaultProps(\"HvColorPickerSavedColors\", props);\n  const { classes } = useClasses(classesProp);\n\n  const handleClick = (hex: string) => {\n    onClickColor({\n      hex,\n      source: \"hex\",\n    });\n  };\n\n  return (\n    <div className={classes.root}>\n      <HvButton\n        className={classes.addButton}\n        variant=\"secondarySubtle\"\n        icon\n        onClick={onAddColor}\n        aria-label={addButtonAriaLabel}\n      >\n        <Add aria-hidden />\n      </HvButton>\n      {colors.map((color, index) => (\n        <div\n          key={`saved-color-${color}-${index}`}\n          className={classes.swatchRoot}\n        >\n          <div className={classes.swatchWrap}>\n            <Swatch\n              color={color}\n              onClick={handleClick}\n              focusStyle={{\n                boxShadow: `inset 0 0 0 1px rgba(0,0,0,.15), 0 0 4px ${color}`,\n              }}\n            />\n          </div>\n          <div className={classes.removeButtonRoot}>\n            <HvButton\n              className={classes.removeButton}\n              variant=\"secondarySubtle\"\n              onClick={() => onRemoveColor(color, index)}\n              tabIndex={0}\n              aria-label={deleteButtonAriaLabel}\n            >\n              <CloseXS aria-hidden iconSize=\"XS\" />\n            </HvButton>\n          </div>\n        </div>\n      ))}\n    </div>\n  );\n};\n"],"names":[],"mappings":";;;;;;;AA0Ba,MAAA,cAAc,CAAC,UAA4B;AAChD,QAAA;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,SAAS;AAAA,EAAA,IACP,gBAAgB,4BAA4B,KAAK;AACrD,QAAM,EAAE,QAAA,IAAY,WAAW,WAAW;AAEpC,QAAA,cAAc,CAAC,QAAgB;AACtB,iBAAA;AAAA,MACX;AAAA,MACA,QAAQ;AAAA,IAAA,CACT;AAAA,EAAA;AAGH,SACG,qBAAA,OAAA,EAAI,WAAW,QAAQ,MACtB,UAAA;AAAA,IAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,WAAW,QAAQ;AAAA,QACnB,SAAQ;AAAA,QACR,MAAI;AAAA,QACJ,SAAS;AAAA,QACT,cAAY;AAAA,QAEZ,UAAA,oBAAC,KAAI,EAAA,eAAW,KAAC,CAAA;AAAA,MAAA;AAAA,IACnB;AAAA,IACC,OAAO,IAAI,CAAC,OAAO,UAClB;AAAA,MAAC;AAAA,MAAA;AAAA,QAEC,WAAW,QAAQ;AAAA,QAEnB,UAAA;AAAA,UAAC,oBAAA,OAAA,EAAI,WAAW,QAAQ,YACtB,UAAA;AAAA,YAAC;AAAA,YAAA;AAAA,cACC;AAAA,cACA,SAAS;AAAA,cACT,YAAY;AAAA,gBACV,WAAW,4CAA4C,KAAK;AAAA,cAC9D;AAAA,YAAA;AAAA,UAAA,GAEJ;AAAA,UACC,oBAAA,OAAA,EAAI,WAAW,QAAQ,kBACtB,UAAA;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,WAAW,QAAQ;AAAA,cACnB,SAAQ;AAAA,cACR,SAAS,MAAM,cAAc,OAAO,KAAK;AAAA,cACzC,UAAU;AAAA,cACV,cAAY;AAAA,cAEZ,UAAC,oBAAA,SAAA,EAAQ,eAAW,MAAC,UAAS,MAAK;AAAA,YAAA;AAAA,UAAA,GAEvC;AAAA,QAAA;AAAA,MAAA;AAAA,MAtBK,eAAe,KAAK,IAAI,KAAK;AAAA,IAAA,CAwBrC;AAAA,EACH,EAAA,CAAA;AAEJ;"}
+{"version":3,"file":"SavedColors.js","sources":["../../../../src/ColorPicker/SavedColors/SavedColors.tsx"],"sourcesContent":["// @types/react-color seems to be broken\n// @ts-ignore\nimport { Swatch } from \"react-color/lib/components/common\";\nimport { Add, CloseXS } from \"@hitachivantara/uikit-react-icons\";\nimport {\n  useDefaultProps,\n  type ExtractNames,\n} from \"@hitachivantara/uikit-react-utils\";\n\nimport { HvButton } from \"../../Button\";\nimport { staticClasses, useClasses } from \"./SavedColors.styles\";\n\nexport { staticClasses as colorPickerSavedColorsClasses };\n\nexport type HvColorPickerSavedColorsClasses = ExtractNames<typeof useClasses>;\n\ninterface SavedColorsProps {\n  colors: string[];\n  onClickColor: (color: { hex: string; source: string }) => void;\n  onAddColor: () => void;\n  onRemoveColor: (color: string, index: number) => void;\n  deleteButtonAriaLabel?: string;\n  addButtonAriaLabel?: string;\n  classes?: HvColorPickerSavedColorsClasses;\n}\n\nexport const SavedColors = (props: SavedColorsProps) => {\n  const {\n    colors,\n    onClickColor,\n    onAddColor,\n    onRemoveColor,\n    deleteButtonAriaLabel,\n    addButtonAriaLabel,\n    classes: classesProp,\n  } = useDefaultProps(\"HvColorPickerSavedColors\", props);\n  const { classes } = useClasses(classesProp);\n\n  const handleClick = (hex: string) => {\n    onClickColor({\n      hex,\n      source: \"hex\",\n    });\n  };\n\n  return (\n    <div className={classes.root}>\n      <HvButton\n        className={classes.addButton}\n        variant=\"secondarySubtle\"\n        icon\n        onClick={onAddColor}\n        aria-label={addButtonAriaLabel}\n      >\n        <Add aria-hidden />\n      </HvButton>\n      {colors.map((color, index) => (\n        <div\n          key={`saved-color-${color}-${index}`}\n          className={classes.swatchRoot}\n        >\n          <div className={classes.swatchWrap}>\n            <Swatch\n              color={color}\n              onClick={handleClick}\n              focusStyle={{\n                boxShadow: `inset 0 0 0 1px rgba(0,0,0,.15), 0 0 4px ${color}`,\n              }}\n            />\n          </div>\n          <div className={classes.removeButtonRoot}>\n            <HvButton\n              className={classes.removeButton}\n              variant=\"secondarySubtle\"\n              onClick={() => onRemoveColor(color, index)}\n              aria-label={deleteButtonAriaLabel}\n            >\n              <CloseXS aria-hidden iconSize=\"XS\" />\n            </HvButton>\n          </div>\n        </div>\n      ))}\n    </div>\n  );\n};\n"],"names":[],"mappings":";;;;;;;AA0Ba,MAAA,cAAc,CAAC,UAA4B;AAChD,QAAA;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,SAAS;AAAA,EAAA,IACP,gBAAgB,4BAA4B,KAAK;AACrD,QAAM,EAAE,QAAA,IAAY,WAAW,WAAW;AAEpC,QAAA,cAAc,CAAC,QAAgB;AACtB,iBAAA;AAAA,MACX;AAAA,MACA,QAAQ;AAAA,IAAA,CACT;AAAA,EAAA;AAGH,SACG,qBAAA,OAAA,EAAI,WAAW,QAAQ,MACtB,UAAA;AAAA,IAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,WAAW,QAAQ;AAAA,QACnB,SAAQ;AAAA,QACR,MAAI;AAAA,QACJ,SAAS;AAAA,QACT,cAAY;AAAA,QAEZ,UAAA,oBAAC,KAAI,EAAA,eAAW,KAAC,CAAA;AAAA,MAAA;AAAA,IACnB;AAAA,IACC,OAAO,IAAI,CAAC,OAAO,UAClB;AAAA,MAAC;AAAA,MAAA;AAAA,QAEC,WAAW,QAAQ;AAAA,QAEnB,UAAA;AAAA,UAAC,oBAAA,OAAA,EAAI,WAAW,QAAQ,YACtB,UAAA;AAAA,YAAC;AAAA,YAAA;AAAA,cACC;AAAA,cACA,SAAS;AAAA,cACT,YAAY;AAAA,gBACV,WAAW,4CAA4C,KAAK;AAAA,cAC9D;AAAA,YAAA;AAAA,UAAA,GAEJ;AAAA,UACC,oBAAA,OAAA,EAAI,WAAW,QAAQ,kBACtB,UAAA;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,WAAW,QAAQ;AAAA,cACnB,SAAQ;AAAA,cACR,SAAS,MAAM,cAAc,OAAO,KAAK;AAAA,cACzC,cAAY;AAAA,cAEZ,UAAC,oBAAA,SAAA,EAAQ,eAAW,MAAC,UAAS,MAAK;AAAA,YAAA;AAAA,UAAA,GAEvC;AAAA,QAAA;AAAA,MAAA;AAAA,MArBK,eAAe,KAAK,IAAI,KAAK;AAAA,IAAA,CAuBrC;AAAA,EACH,EAAA,CAAA;AAEJ;"}

package/dist/esm/DatePicker/DatePicker.js

@@ -284,7 +284,8 @@ const HvDatePicker = forwardRef(
                 headerOpen: classes.dropdownHeaderOpen,
                 placeholder: cx(classes.inputText, {
                   [classes.dateText]: dateString
-                })
+                }),
+                container: classes.container
               },
               readOnly,
               disabled,

package/dist/esm/DatePicker/DatePicker.js.map

@@ -1 +1 @@
-{"version":3,"file":"DatePicker.js","sources":["../../../src/DatePicker/DatePicker.tsx"],"sourcesContent":["import { forwardRef, useEffect, useRef } from \"react\";\nimport { useForkRef } from \"@mui/material/utils\";\nimport { Calendar } from \"@hitachivantara/uikit-react-icons\";\nimport {\n  useDefaultProps,\n  type ExtractNames,\n} from \"@hitachivantara/uikit-react-utils\";\n\nimport { HvActionBar } from \"../ActionBar\";\nimport { HvBaseDropdown, HvBaseDropdownProps } from \"../BaseDropdown\";\nimport { HvButton } from \"../Button\";\nimport { HvCalendar, HvCalendarProps } from \"../Calendar\";\nimport { isDate } from \"../Calendar/utils\";\nimport {\n  HvFormElement,\n  HvFormElementProps,\n  HvFormStatus,\n  HvInfoMessage,\n  HvLabel,\n  HvWarningText,\n  isInvalid,\n} from \"../Forms\";\nimport { useControlled } from \"../hooks/useControlled\";\nimport { useLabels } from \"../hooks/useLabels\";\nimport { useUniqueId } from \"../hooks/useUniqueId\";\nimport { setId } from \"../utils/setId\";\nimport { useSavedState } from \"../utils/useSavedState\";\nimport { staticClasses, useClasses } from \"./DatePicker.styles\";\nimport useVisibleDate from \"./useVisibleDate\";\nimport { getDateLabel } from \"./utils\";\n\nexport { staticClasses as datePickerClasses };\n\nexport type HvDatePickerClasses = ExtractNames<typeof useClasses>;\n\nconst DEFAULT_LABELS = {\n  /** Apply button label. */\n  applyLabel: \"Apply\",\n  /** Cancel button label. */\n  cancelLabel: \"Cancel\",\n  /** Clear button label. */\n  clearLabel: \"Clear\",\n  /** Invalid Date label. */\n  invalidDateLabel: \"Invalid date\",\n};\n\n/** @deprecated use `HvFormStatus` instead */\nexport type HvDatePickerStatus = HvFormStatus;\n\nexport interface HvDatePickerProps\n  extends Omit<HvFormElementProps, \"onChange\">,\n    Pick<\n      HvBaseDropdownProps,\n      | \"disablePortal\"\n      | \"expanded\"\n      | \"defaultExpanded\"\n      | \"onToggle\"\n      | \"placeholder\"\n    > {\n  /**\n   * Identifies the element that provides an error message for the date picker.\n   *\n   * Will only be used when the validation status is invalid.\n   */\n  \"aria-errormessage\"?: string;\n  /**\n   * The callback fired when the value changes.\n   */\n  onChange?: (date?: Date, endDate?: Date) => void;\n  /**\n   * The callback fired when user clicks on cancel.\n   */\n  onCancel?: () => void;\n  /**\n   * The callback fired when user clicks on clear.\n   */\n  onClear?: () => void;\n  /**\n   * An object containing all the labels for the datepicker.\n   */\n  labels?: Partial<typeof DEFAULT_LABELS>;\n  /**\n   * The initial value of the input when in single calendar mode.\n   */\n  value?: Date;\n  /**\n   * The initial value for the start date when in range mode.\n   */\n  startValue?: Date;\n  /**\n   * The initial value for the end date when in range mode.\n   */\n  endValue?: Date;\n  /**\n   * Flag informing if the the component should be in range mode or in single mode.\n   */\n  // TODO: remove this in favour of discriminated union\n  rangeMode?: boolean;\n  /**\n   * The placement where the calendar should be placed according to the input. Options are `left` or `right`.\n   * Note this prop only affects the calendar when in `rangeMode`.\n   */\n  horizontalPlacement?: \"left\" | \"right\";\n  /**\n   * The calendar locale. If undefined, it uses calendar default\n   */\n  locale?: string;\n  /**\n   * Controls if actions buttons are visible at the calendar.\n   */\n  showActions?: boolean;\n  /**\n   * Controls if clear button is visible at the calendar,\n   * only works if showing actions or in range mode.\n   */\n  showClear?: boolean;\n  /**\n   * Sets if the calendar container should follow the date picker input out of the screen or stay visible.\n   */\n  escapeWithReference?: boolean;\n  /**\n   * An element placed before the Calendar\n   */\n  startAdornment?: React.ReactNode;\n  /**\n   * An object containing props to be passed onto the baseDropdown.\n   */\n  dropdownProps?: Partial<HvBaseDropdownProps>;\n  /**\n   * Additional props passed to the HvCalendar component.\n   */\n  calendarProps?: Partial<HvCalendarProps>;\n  /**\n   * A Jss Object used to override or extend the component styles applied.\n   */\n  classes?: HvDatePickerClasses;\n}\n\n/**\n * A date picker, popup calendar or date range picker is a graphical user\n * interface widget which allows the user to select a date from a calendar.\n */\nexport const HvDatePicker = forwardRef<HTMLDivElement, HvDatePickerProps>(\n  (props, ref) => {\n    const {\n      classes: classesProp,\n      className,\n\n      id,\n      name,\n\n      required = false,\n      disabled = false,\n      readOnly,\n\n      label,\n      \"aria-label\": ariaLabel,\n      \"aria-labelledby\": ariaLabelledBy,\n      description,\n      \"aria-describedby\": ariaDescribedBy,\n\n      onChange,\n      onCancel,\n      onClear,\n      status,\n      statusMessage,\n      \"aria-errormessage\": ariaErrorMessage,\n\n      placeholder,\n\n      labels: labelsProp,\n\n      value,\n      startValue,\n      endValue,\n\n      expanded,\n      defaultExpanded,\n      onToggle,\n      rangeMode = false,\n      startAdornment,\n      horizontalPlacement = \"right\",\n      locale: localeProp,\n      showActions = false,\n      showClear = false,\n      disablePortal = true,\n      escapeWithReference = true,\n      dropdownProps = {},\n      calendarProps,\n      ...others\n    } = useDefaultProps(\"HvDatePicker\", props);\n\n    const { classes, cx } = useClasses(classesProp);\n    const labels = useLabels(DEFAULT_LABELS, labelsProp);\n\n    const elementId = useUniqueId(id);\n\n    const [validationState, setValidationState] = useControlled<HvFormStatus>(\n      status,\n      \"standBy\",\n    );\n\n    const [validationMessage] = useControlled(statusMessage, \"Required\");\n\n    const locale = localeProp || \"en-US\";\n\n    const [calendarOpen, setCalendarOpen] = useControlled(\n      expanded,\n      Boolean(defaultExpanded),\n    );\n\n    const [startDate, setStartDate, rollbackStartDate] = useSavedState(\n      rangeMode ? startValue : value,\n    );\n    const [endDate, setEndDate, rollbackEndDate] = useSavedState(endValue);\n\n    const [visibleDate, dispatchAction] = useVisibleDate(startDate, endDate);\n\n    const focusTarget = useRef<HTMLDivElement>(null);\n\n    const { ref: refProp, ...otherDropdownProps } = dropdownProps;\n    const dropdownForkedRef = useForkRef(ref, refProp);\n\n    useEffect(() => {\n      setStartDate(rangeMode ? startValue : value, true);\n      setEndDate(endValue, true);\n    }, [value, startValue, endValue, rangeMode, setStartDate, setEndDate]);\n\n    const endDateIsSet = useRef(false);\n    endDateIsSet.current = endDate != null;\n\n    useEffect(() => {\n      if (startDate != null) {\n        dispatchAction({\n          type: \"month_year\",\n          target: endDateIsSet.current ? \"left\" : \"best\",\n          year: startDate.getFullYear(),\n          month: startDate.getMonth() + 1,\n        });\n      }\n    }, [dispatchAction, startDate]);\n\n    useEffect(() => {\n      if (endDate != null) {\n        dispatchAction({\n          type: \"month_year\",\n          target: \"right\",\n          year: endDate.getFullYear(),\n          month: endDate.getMonth() + 1,\n        });\n      }\n    }, [dispatchAction, endDate]);\n\n    /**\n     * Handles the `Apply` action. Both single and ranged modes are handled here.\n     */\n    const handleApply = () => {\n      setStartDate(startDate, true);\n      setEndDate(endDate ?? startDate, true);\n\n      onChange?.(startDate, endDate);\n\n      setValidationState(() => {\n        // this will only run if status is uncontrolled\n        if (\n          required &&\n          (!isDate(startDate) || (rangeMode && !isDate(endDate)))\n        ) {\n          return \"invalid\";\n        }\n\n        return \"valid\";\n      });\n\n      setCalendarOpen(false);\n    };\n\n    /**\n     * Handles the `Cancel` action. Both single and ranged modes are handled here.\n     */\n    const handleCancel = () => {\n      rollbackStartDate();\n      rollbackEndDate();\n\n      onCancel?.();\n\n      setCalendarOpen(false);\n    };\n\n    /**\n     * Handles the `Cancel` action. Both single and ranged modes are handled here.\n     */\n    const handleClear = () => {\n      setStartDate(undefined, false);\n      setEndDate(undefined, false);\n      onClear?.();\n    };\n\n    const handleCalendarClose = () => {\n      if (rangeMode || showActions) {\n        handleCancel();\n      }\n    };\n\n    const handleToggle: HvBaseDropdownProps[\"onToggle\"] = (evt, open) => {\n      /* \n     If evt is null this toggle wasn't triggered by the user.\n     instead it was triggered by the baseDropdown useEffect after\n     the datepicker changed the expanded value this baseDropdown behavior needs a review\n    */\n      if (evt === null) return;\n      onToggle?.(evt, open);\n      setCalendarOpen(open);\n      if (!open) handleCalendarClose();\n    };\n\n    const focusOnContainer = () => {\n      focusTarget.current?.focus();\n    };\n\n    const handleDateChange: HvCalendarProps[\"onChange\"] = (event, newDate) => {\n      if (!isDate(newDate)) return;\n\n      const autoSave = !showActions && !rangeMode;\n\n      if (rangeMode) {\n        if (!startDate || (startDate && endDate) || newDate < startDate) {\n          setStartDate(newDate);\n          setEndDate(undefined);\n        } else {\n          setEndDate(newDate);\n        }\n      } else {\n        setStartDate(newDate, autoSave);\n      }\n\n      if (autoSave) {\n        onChange?.(newDate);\n\n        setValidationState(() => {\n          // this will only run if status is uncontrolled\n          if (required && !isDate(newDate)) {\n            return \"invalid\";\n          }\n\n          return \"valid\";\n        });\n\n        setCalendarOpen(false);\n      }\n    };\n\n    const handleInputDateChange: HvCalendarProps[\"onInputChange\"] = (\n      event,\n      newDate,\n      position,\n    ) => {\n      if (!isDate(newDate)) return;\n\n      if (!rangeMode) {\n        handleDateChange(event as any, newDate);\n        return;\n      }\n\n      if (position === \"left\") {\n        if (endDate) setStartDate(newDate > endDate ? endDate : newDate);\n      } else if (position === \"right\") {\n        if (!startDate) {\n          if (endDate) setStartDate(newDate > endDate ? endDate : newDate);\n          return;\n        }\n        setEndDate(newDate < startDate ? startDate : newDate);\n      }\n    };\n\n    /**\n     * Renders the container for the action elements.\n     */\n    const renderActions = () => (\n      <HvActionBar className={cx({ [classes.actionContainer]: showClear })}>\n        {showClear && (\n          <div className={classes.leftContainer}>\n            <HvButton\n              id={setId(id, \"action\", \"clear\")}\n              className={classes.action}\n              variant=\"primaryGhost\"\n              onClick={handleClear}\n            >\n              {labels?.clearLabel}\n            </HvButton>\n          </div>\n        )}\n        <div className={classes.rightContainer}>\n          <HvButton\n            id={setId(id, \"action\", \"apply\")}\n            className={classes.action}\n            variant=\"primaryGhost\"\n            onClick={handleApply}\n          >\n            {labels?.applyLabel}\n          </HvButton>\n          <HvButton\n            id={setId(id, \"action\", \"cancel\")}\n            className={classes.action}\n            variant=\"primaryGhost\"\n            onClick={handleCancel}\n          >\n            {labels?.cancelLabel}\n          </HvButton>\n        </div>\n      </HvActionBar>\n    );\n\n    const dateValue = rangeMode ? { startDate, endDate } : startDate;\n    const dateString = getDateLabel(dateValue, rangeMode, locale);\n\n    const hasLabel = label != null;\n    const hasDescription = description != null;\n\n    // the error message area will only be created if:\n    // - an external element that provides an error message isn't identified via aria-errormessage AND\n    //   - both status and statusMessage properties are being controlled OR\n    //   - status is uncontrolled and required is true\n    const canShowError =\n      ariaErrorMessage == null &&\n      ((status !== undefined && statusMessage !== undefined) ||\n        (status === undefined && required));\n\n    const isStateInvalid = isInvalid(validationState);\n\n    let errorMessageId;\n    if (isStateInvalid) {\n      errorMessageId = canShowError\n        ? setId(elementId, \"error\")\n        : ariaErrorMessage;\n    }\n\n    return (\n      <HvFormElement\n        id={id}\n        name={name}\n        value={dateValue}\n        status={validationState}\n        disabled={disabled}\n        required={required}\n        className={cx(classes.root, className)}\n        readOnly={readOnly}\n        {...others}\n      >\n        {(hasLabel || hasDescription) && (\n          <div className={classes.labelContainer}>\n            {hasLabel && (\n              <HvLabel\n                id={setId(elementId, \"label\")}\n                label={label}\n                className={classes.label}\n              />\n            )}\n\n            {hasDescription && (\n              <HvInfoMessage\n                id={setId(elementId, \"description\")}\n                className={classes.description}\n              >\n                {description}\n              </HvInfoMessage>\n            )}\n          </div>\n        )}\n        <HvBaseDropdown\n          ref={dropdownForkedRef}\n          role=\"combobox\"\n          classes={{\n            root: classes.dropdown,\n            panel: classes.panel,\n            header: cx({ [classes.dropdownHeaderInvalid]: isStateInvalid }),\n            headerOpen: classes.dropdownHeaderOpen,\n            placeholder: cx(classes.inputText, {\n              [classes.dateText]: dateString,\n            }),\n          }}\n          readOnly={readOnly}\n          disabled={disabled}\n          disablePortal={disablePortal}\n          variableWidth\n          placement={horizontalPlacement}\n          expanded={calendarOpen}\n          onToggle={handleToggle}\n          onClickOutside={handleCalendarClose}\n          onContainerCreation={focusOnContainer}\n          placeholder={dateString || placeholder || \"\"}\n          adornment={<Calendar className={classes.icon} color=\"currentcolor\" />}\n          popperProps={{\n            modifiers: [\n              { name: \"preventOverflow\", enabled: escapeWithReference },\n            ],\n          }}\n          aria-haspopup=\"dialog\"\n          aria-label={ariaLabel}\n          aria-labelledby={\n            [label && setId(elementId, \"label\"), ariaLabelledBy]\n              .join(\" \")\n              .trim() || undefined\n          }\n          aria-invalid={isStateInvalid ? true : undefined}\n          aria-errormessage={errorMessageId}\n          aria-describedby={\n            [description && setId(elementId, \"description\"), ariaDescribedBy]\n              .join(\" \")\n              .trim() || undefined\n          }\n          {...otherDropdownProps}\n        >\n          <div ref={focusTarget} tabIndex={-1} />\n          <HvCalendar\n            id={setId(id, \"calendar\")}\n            startAdornment={startAdornment}\n            onChange={handleDateChange}\n            onInputChange={handleInputDateChange}\n            onVisibleDateChange={(_event, type, month, target) => {\n              dispatchAction({ type, target, month });\n            }}\n            locale={locale}\n            {...visibleDate}\n            {...calendarProps}\n            invalidDateLabel={labels?.invalidDateLabel}\n          />\n          {(rangeMode || showActions) && renderActions()}\n        </HvBaseDropdown>\n        {canShowError && (\n          <HvWarningText\n            id={setId(elementId, \"error\")}\n            disableBorder\n            className={cx(classes.error)}\n          >\n            {validationMessage}\n          </HvWarningText>\n        )}\n      </HvFormElement>\n    );\n  },\n);\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"DatePicker.js","sources":["../../../src/DatePicker/DatePicker.tsx"],"sourcesContent":["import { forwardRef, useEffect, useRef } from \"react\";\nimport { useForkRef } from \"@mui/material/utils\";\nimport { Calendar } from \"@hitachivantara/uikit-react-icons\";\nimport {\n  useDefaultProps,\n  type ExtractNames,\n} from \"@hitachivantara/uikit-react-utils\";\n\nimport { HvActionBar } from \"../ActionBar\";\nimport { HvBaseDropdown, HvBaseDropdownProps } from \"../BaseDropdown\";\nimport { HvButton } from \"../Button\";\nimport { HvCalendar, HvCalendarProps } from \"../Calendar\";\nimport { isDate } from \"../Calendar/utils\";\nimport {\n  HvFormElement,\n  HvFormElementProps,\n  HvFormStatus,\n  HvInfoMessage,\n  HvLabel,\n  HvWarningText,\n  isInvalid,\n} from \"../Forms\";\nimport { useControlled } from \"../hooks/useControlled\";\nimport { useLabels } from \"../hooks/useLabels\";\nimport { useUniqueId } from \"../hooks/useUniqueId\";\nimport { setId } from \"../utils/setId\";\nimport { useSavedState } from \"../utils/useSavedState\";\nimport { staticClasses, useClasses } from \"./DatePicker.styles\";\nimport useVisibleDate from \"./useVisibleDate\";\nimport { getDateLabel } from \"./utils\";\n\nexport { staticClasses as datePickerClasses };\n\nexport type HvDatePickerClasses = ExtractNames<typeof useClasses>;\n\nconst DEFAULT_LABELS = {\n  /** Apply button label. */\n  applyLabel: \"Apply\",\n  /** Cancel button label. */\n  cancelLabel: \"Cancel\",\n  /** Clear button label. */\n  clearLabel: \"Clear\",\n  /** Invalid Date label. */\n  invalidDateLabel: \"Invalid date\",\n};\n\n/** @deprecated use `HvFormStatus` instead */\nexport type HvDatePickerStatus = HvFormStatus;\n\nexport interface HvDatePickerProps\n  extends Omit<HvFormElementProps, \"onChange\">,\n    Pick<\n      HvBaseDropdownProps,\n      | \"disablePortal\"\n      | \"expanded\"\n      | \"defaultExpanded\"\n      | \"onToggle\"\n      | \"placeholder\"\n    > {\n  /**\n   * Identifies the element that provides an error message for the date picker.\n   *\n   * Will only be used when the validation status is invalid.\n   */\n  \"aria-errormessage\"?: string;\n  /**\n   * The callback fired when the value changes.\n   */\n  onChange?: (date?: Date, endDate?: Date) => void;\n  /**\n   * The callback fired when user clicks on cancel.\n   */\n  onCancel?: () => void;\n  /**\n   * The callback fired when user clicks on clear.\n   */\n  onClear?: () => void;\n  /**\n   * An object containing all the labels for the datepicker.\n   */\n  labels?: Partial<typeof DEFAULT_LABELS>;\n  /**\n   * The initial value of the input when in single calendar mode.\n   */\n  value?: Date;\n  /**\n   * The initial value for the start date when in range mode.\n   */\n  startValue?: Date;\n  /**\n   * The initial value for the end date when in range mode.\n   */\n  endValue?: Date;\n  /**\n   * Flag informing if the the component should be in range mode or in single mode.\n   */\n  // TODO: remove this in favour of discriminated union\n  rangeMode?: boolean;\n  /**\n   * The placement where the calendar should be placed according to the input. Options are `left` or `right`.\n   * Note this prop only affects the calendar when in `rangeMode`.\n   */\n  horizontalPlacement?: \"left\" | \"right\";\n  /**\n   * The calendar locale. If undefined, it uses calendar default\n   */\n  locale?: string;\n  /**\n   * Controls if actions buttons are visible at the calendar.\n   */\n  showActions?: boolean;\n  /**\n   * Controls if clear button is visible at the calendar,\n   * only works if showing actions or in range mode.\n   */\n  showClear?: boolean;\n  /**\n   * Sets if the calendar container should follow the date picker input out of the screen or stay visible.\n   */\n  escapeWithReference?: boolean;\n  /**\n   * An element placed before the Calendar\n   */\n  startAdornment?: React.ReactNode;\n  /**\n   * An object containing props to be passed onto the baseDropdown.\n   */\n  dropdownProps?: Partial<HvBaseDropdownProps>;\n  /**\n   * Additional props passed to the HvCalendar component.\n   */\n  calendarProps?: Partial<HvCalendarProps>;\n  /**\n   * A Jss Object used to override or extend the component styles applied.\n   */\n  classes?: HvDatePickerClasses;\n}\n\n/**\n * A date picker, popup calendar or date range picker is a graphical user\n * interface widget which allows the user to select a date from a calendar.\n */\nexport const HvDatePicker = forwardRef<HTMLDivElement, HvDatePickerProps>(\n  (props, ref) => {\n    const {\n      classes: classesProp,\n      className,\n\n      id,\n      name,\n\n      required = false,\n      disabled = false,\n      readOnly,\n\n      label,\n      \"aria-label\": ariaLabel,\n      \"aria-labelledby\": ariaLabelledBy,\n      description,\n      \"aria-describedby\": ariaDescribedBy,\n\n      onChange,\n      onCancel,\n      onClear,\n      status,\n      statusMessage,\n      \"aria-errormessage\": ariaErrorMessage,\n\n      placeholder,\n\n      labels: labelsProp,\n\n      value,\n      startValue,\n      endValue,\n\n      expanded,\n      defaultExpanded,\n      onToggle,\n      rangeMode = false,\n      startAdornment,\n      horizontalPlacement = \"right\",\n      locale: localeProp,\n      showActions = false,\n      showClear = false,\n      disablePortal = true,\n      escapeWithReference = true,\n      dropdownProps = {},\n      calendarProps,\n      ...others\n    } = useDefaultProps(\"HvDatePicker\", props);\n\n    const { classes, cx } = useClasses(classesProp);\n    const labels = useLabels(DEFAULT_LABELS, labelsProp);\n\n    const elementId = useUniqueId(id);\n\n    const [validationState, setValidationState] = useControlled<HvFormStatus>(\n      status,\n      \"standBy\",\n    );\n\n    const [validationMessage] = useControlled(statusMessage, \"Required\");\n\n    const locale = localeProp || \"en-US\";\n\n    const [calendarOpen, setCalendarOpen] = useControlled(\n      expanded,\n      Boolean(defaultExpanded),\n    );\n\n    const [startDate, setStartDate, rollbackStartDate] = useSavedState(\n      rangeMode ? startValue : value,\n    );\n    const [endDate, setEndDate, rollbackEndDate] = useSavedState(endValue);\n\n    const [visibleDate, dispatchAction] = useVisibleDate(startDate, endDate);\n\n    const focusTarget = useRef<HTMLDivElement>(null);\n\n    const { ref: refProp, ...otherDropdownProps } = dropdownProps;\n    const dropdownForkedRef = useForkRef(ref, refProp);\n\n    useEffect(() => {\n      setStartDate(rangeMode ? startValue : value, true);\n      setEndDate(endValue, true);\n    }, [value, startValue, endValue, rangeMode, setStartDate, setEndDate]);\n\n    const endDateIsSet = useRef(false);\n    endDateIsSet.current = endDate != null;\n\n    useEffect(() => {\n      if (startDate != null) {\n        dispatchAction({\n          type: \"month_year\",\n          target: endDateIsSet.current ? \"left\" : \"best\",\n          year: startDate.getFullYear(),\n          month: startDate.getMonth() + 1,\n        });\n      }\n    }, [dispatchAction, startDate]);\n\n    useEffect(() => {\n      if (endDate != null) {\n        dispatchAction({\n          type: \"month_year\",\n          target: \"right\",\n          year: endDate.getFullYear(),\n          month: endDate.getMonth() + 1,\n        });\n      }\n    }, [dispatchAction, endDate]);\n\n    /**\n     * Handles the `Apply` action. Both single and ranged modes are handled here.\n     */\n    const handleApply = () => {\n      setStartDate(startDate, true);\n      setEndDate(endDate ?? startDate, true);\n\n      onChange?.(startDate, endDate);\n\n      setValidationState(() => {\n        // this will only run if status is uncontrolled\n        if (\n          required &&\n          (!isDate(startDate) || (rangeMode && !isDate(endDate)))\n        ) {\n          return \"invalid\";\n        }\n\n        return \"valid\";\n      });\n\n      setCalendarOpen(false);\n    };\n\n    /**\n     * Handles the `Cancel` action. Both single and ranged modes are handled here.\n     */\n    const handleCancel = () => {\n      rollbackStartDate();\n      rollbackEndDate();\n\n      onCancel?.();\n\n      setCalendarOpen(false);\n    };\n\n    /**\n     * Handles the `Cancel` action. Both single and ranged modes are handled here.\n     */\n    const handleClear = () => {\n      setStartDate(undefined, false);\n      setEndDate(undefined, false);\n      onClear?.();\n    };\n\n    const handleCalendarClose = () => {\n      if (rangeMode || showActions) {\n        handleCancel();\n      }\n    };\n\n    const handleToggle: HvBaseDropdownProps[\"onToggle\"] = (evt, open) => {\n      /* \n     If evt is null this toggle wasn't triggered by the user.\n     instead it was triggered by the baseDropdown useEffect after\n     the datepicker changed the expanded value this baseDropdown behavior needs a review\n    */\n      if (evt === null) return;\n      onToggle?.(evt, open);\n      setCalendarOpen(open);\n      if (!open) handleCalendarClose();\n    };\n\n    const focusOnContainer = () => {\n      focusTarget.current?.focus();\n    };\n\n    const handleDateChange: HvCalendarProps[\"onChange\"] = (event, newDate) => {\n      if (!isDate(newDate)) return;\n\n      const autoSave = !showActions && !rangeMode;\n\n      if (rangeMode) {\n        if (!startDate || (startDate && endDate) || newDate < startDate) {\n          setStartDate(newDate);\n          setEndDate(undefined);\n        } else {\n          setEndDate(newDate);\n        }\n      } else {\n        setStartDate(newDate, autoSave);\n      }\n\n      if (autoSave) {\n        onChange?.(newDate);\n\n        setValidationState(() => {\n          // this will only run if status is uncontrolled\n          if (required && !isDate(newDate)) {\n            return \"invalid\";\n          }\n\n          return \"valid\";\n        });\n\n        setCalendarOpen(false);\n      }\n    };\n\n    const handleInputDateChange: HvCalendarProps[\"onInputChange\"] = (\n      event,\n      newDate,\n      position,\n    ) => {\n      if (!isDate(newDate)) return;\n\n      if (!rangeMode) {\n        handleDateChange(event as any, newDate);\n        return;\n      }\n\n      if (position === \"left\") {\n        if (endDate) setStartDate(newDate > endDate ? endDate : newDate);\n      } else if (position === \"right\") {\n        if (!startDate) {\n          if (endDate) setStartDate(newDate > endDate ? endDate : newDate);\n          return;\n        }\n        setEndDate(newDate < startDate ? startDate : newDate);\n      }\n    };\n\n    /**\n     * Renders the container for the action elements.\n     */\n    const renderActions = () => (\n      <HvActionBar className={cx({ [classes.actionContainer]: showClear })}>\n        {showClear && (\n          <div className={classes.leftContainer}>\n            <HvButton\n              id={setId(id, \"action\", \"clear\")}\n              className={classes.action}\n              variant=\"primaryGhost\"\n              onClick={handleClear}\n            >\n              {labels?.clearLabel}\n            </HvButton>\n          </div>\n        )}\n        <div className={classes.rightContainer}>\n          <HvButton\n            id={setId(id, \"action\", \"apply\")}\n            className={classes.action}\n            variant=\"primaryGhost\"\n            onClick={handleApply}\n          >\n            {labels?.applyLabel}\n          </HvButton>\n          <HvButton\n            id={setId(id, \"action\", \"cancel\")}\n            className={classes.action}\n            variant=\"primaryGhost\"\n            onClick={handleCancel}\n          >\n            {labels?.cancelLabel}\n          </HvButton>\n        </div>\n      </HvActionBar>\n    );\n\n    const dateValue = rangeMode ? { startDate, endDate } : startDate;\n    const dateString = getDateLabel(dateValue, rangeMode, locale);\n\n    const hasLabel = label != null;\n    const hasDescription = description != null;\n\n    // the error message area will only be created if:\n    // - an external element that provides an error message isn't identified via aria-errormessage AND\n    //   - both status and statusMessage properties are being controlled OR\n    //   - status is uncontrolled and required is true\n    const canShowError =\n      ariaErrorMessage == null &&\n      ((status !== undefined && statusMessage !== undefined) ||\n        (status === undefined && required));\n\n    const isStateInvalid = isInvalid(validationState);\n\n    let errorMessageId;\n    if (isStateInvalid) {\n      errorMessageId = canShowError\n        ? setId(elementId, \"error\")\n        : ariaErrorMessage;\n    }\n\n    return (\n      <HvFormElement\n        id={id}\n        name={name}\n        value={dateValue}\n        status={validationState}\n        disabled={disabled}\n        required={required}\n        className={cx(classes.root, className)}\n        readOnly={readOnly}\n        {...others}\n      >\n        {(hasLabel || hasDescription) && (\n          <div className={classes.labelContainer}>\n            {hasLabel && (\n              <HvLabel\n                id={setId(elementId, \"label\")}\n                label={label}\n                className={classes.label}\n              />\n            )}\n\n            {hasDescription && (\n              <HvInfoMessage\n                id={setId(elementId, \"description\")}\n                className={classes.description}\n              >\n                {description}\n              </HvInfoMessage>\n            )}\n          </div>\n        )}\n        <HvBaseDropdown\n          ref={dropdownForkedRef}\n          role=\"combobox\"\n          classes={{\n            root: classes.dropdown,\n            panel: classes.panel,\n            header: cx({ [classes.dropdownHeaderInvalid]: isStateInvalid }),\n            headerOpen: classes.dropdownHeaderOpen,\n            placeholder: cx(classes.inputText, {\n              [classes.dateText]: dateString,\n            }),\n            container: classes.container,\n          }}\n          readOnly={readOnly}\n          disabled={disabled}\n          disablePortal={disablePortal}\n          variableWidth\n          placement={horizontalPlacement}\n          expanded={calendarOpen}\n          onToggle={handleToggle}\n          onClickOutside={handleCalendarClose}\n          onContainerCreation={focusOnContainer}\n          placeholder={dateString || placeholder || \"\"}\n          adornment={<Calendar className={classes.icon} color=\"currentcolor\" />}\n          popperProps={{\n            modifiers: [\n              { name: \"preventOverflow\", enabled: escapeWithReference },\n            ],\n          }}\n          aria-haspopup=\"dialog\"\n          aria-label={ariaLabel}\n          aria-labelledby={\n            [label && setId(elementId, \"label\"), ariaLabelledBy]\n              .join(\" \")\n              .trim() || undefined\n          }\n          aria-invalid={isStateInvalid ? true : undefined}\n          aria-errormessage={errorMessageId}\n          aria-describedby={\n            [description && setId(elementId, \"description\"), ariaDescribedBy]\n              .join(\" \")\n              .trim() || undefined\n          }\n          {...otherDropdownProps}\n        >\n          <div ref={focusTarget} tabIndex={-1} />\n          <HvCalendar\n            id={setId(id, \"calendar\")}\n            startAdornment={startAdornment}\n            onChange={handleDateChange}\n            onInputChange={handleInputDateChange}\n            onVisibleDateChange={(_event, type, month, target) => {\n              dispatchAction({ type, target, month });\n            }}\n            locale={locale}\n            {...visibleDate}\n            {...calendarProps}\n            invalidDateLabel={labels?.invalidDateLabel}\n          />\n          {(rangeMode || showActions) && renderActions()}\n        </HvBaseDropdown>\n        {canShowError && (\n          <HvWarningText\n            id={setId(elementId, \"error\")}\n            disableBorder\n            className={cx(classes.error)}\n          >\n            {validationMessage}\n          </HvWarningText>\n        )}\n      </HvFormElement>\n    );\n  },\n);\n"],"names":[],"mappings":"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"}

package/dist/esm/DatePicker/DatePicker.styles.js

@@ -40,7 +40,8 @@ const { staticClasses, useClasses } = createClasses("HvDatePicker", {
   dateText: {
     color: "inherit",
     fontWeight: theme.typography.label.fontWeight
-  }
+  },
+  container: {}
 });
 export {
   staticClasses,

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

@@ -1 +1 @@
-{"version":3,"file":"DatePicker.styles.js","sources":["../../../src/DatePicker/DatePicker.styles.tsx"],"sourcesContent":["import { createClasses } from \"@hitachivantara/uikit-react-utils\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvDatePicker\", {\n  root: {\n    position: \"relative\",\n  },\n  actionContainer: {\n    justifyContent: \"space-between\",\n  },\n  leftContainer: {},\n  rightContainer: {},\n\n  labelContainer: {\n    display: \"flex\",\n    alignItems: \"flex-start\",\n  },\n  label: {\n    paddingBottom: \"6px\",\n    display: \"block\",\n  },\n  description: {},\n  error: {},\n\n  dropdown: {\n    display: \"block\",\n  },\n  panel: {},\n\n  dropdownHeaderInvalid: {\n    border: `1px solid ${theme.colors.negative}`,\n    \"&:hover\": {\n      border: `1px solid ${theme.colors.negative}`,\n    },\n  },\n  dropdownHeaderOpen: {},\n  icon: {},\n  action: {\n    \"&:first-of-type\": {\n      marginRight: theme.space.xs,\n    },\n  },\n  inputText: {},\n  dateText: {\n    color: \"inherit\",\n    fontWeight: theme.typography.label.fontWeight,\n  },\n});\n"],"names":[],"mappings":";;AAGO,MAAM,EAAE,eAAe,eAAe,cAAc,gBAAgB;AAAA,EACzE,MAAM;AAAA,IACJ,UAAU;AAAA,EACZ;AAAA,EACA,iBAAiB;AAAA,IACf,gBAAgB;AAAA,EAClB;AAAA,EACA,eAAe,CAAC;AAAA,EAChB,gBAAgB,CAAC;AAAA,EAEjB,gBAAgB;AAAA,IACd,SAAS;AAAA,IACT,YAAY;AAAA,EACd;AAAA,EACA,OAAO;AAAA,IACL,eAAe;AAAA,IACf,SAAS;AAAA,EACX;AAAA,EACA,aAAa,CAAC;AAAA,EACd,OAAO,CAAC;AAAA,EAER,UAAU;AAAA,IACR,SAAS;AAAA,EACX;AAAA,EACA,OAAO,CAAC;AAAA,EAER,uBAAuB;AAAA,IACrB,QAAQ,aAAa,MAAM,OAAO,QAAQ;AAAA,IAC1C,WAAW;AAAA,MACT,QAAQ,aAAa,MAAM,OAAO,QAAQ;AAAA,IAC5C;AAAA,EACF;AAAA,EACA,oBAAoB,CAAC;AAAA,EACrB,MAAM,CAAC;AAAA,EACP,QAAQ;AAAA,IACN,mBAAmB;AAAA,MACjB,aAAa,MAAM,MAAM;AAAA,IAC3B;AAAA,EACF;AAAA,EACA,WAAW,CAAC;AAAA,EACZ,UAAU;AAAA,IACR,OAAO;AAAA,IACP,YAAY,MAAM,WAAW,MAAM;AAAA,EACrC;AACF,CAAC;"}
+{"version":3,"file":"DatePicker.styles.js","sources":["../../../src/DatePicker/DatePicker.styles.tsx"],"sourcesContent":["import { createClasses } from \"@hitachivantara/uikit-react-utils\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvDatePicker\", {\n  root: {\n    position: \"relative\",\n  },\n  actionContainer: {\n    justifyContent: \"space-between\",\n  },\n  leftContainer: {},\n  rightContainer: {},\n\n  labelContainer: {\n    display: \"flex\",\n    alignItems: \"flex-start\",\n  },\n  label: {\n    paddingBottom: \"6px\",\n    display: \"block\",\n  },\n  description: {},\n  error: {},\n\n  dropdown: {\n    display: \"block\",\n  },\n  panel: {},\n\n  dropdownHeaderInvalid: {\n    border: `1px solid ${theme.colors.negative}`,\n    \"&:hover\": {\n      border: `1px solid ${theme.colors.negative}`,\n    },\n  },\n  dropdownHeaderOpen: {},\n  icon: {},\n  action: {\n    \"&:first-of-type\": {\n      marginRight: theme.space.xs,\n    },\n  },\n  inputText: {},\n  dateText: {\n    color: \"inherit\",\n    fontWeight: theme.typography.label.fontWeight,\n  },\n  container: {},\n});\n"],"names":[],"mappings":";;AAGO,MAAM,EAAE,eAAe,eAAe,cAAc,gBAAgB;AAAA,EACzE,MAAM;AAAA,IACJ,UAAU;AAAA,EACZ;AAAA,EACA,iBAAiB;AAAA,IACf,gBAAgB;AAAA,EAClB;AAAA,EACA,eAAe,CAAC;AAAA,EAChB,gBAAgB,CAAC;AAAA,EAEjB,gBAAgB;AAAA,IACd,SAAS;AAAA,IACT,YAAY;AAAA,EACd;AAAA,EACA,OAAO;AAAA,IACL,eAAe;AAAA,IACf,SAAS;AAAA,EACX;AAAA,EACA,aAAa,CAAC;AAAA,EACd,OAAO,CAAC;AAAA,EAER,UAAU;AAAA,IACR,SAAS;AAAA,EACX;AAAA,EACA,OAAO,CAAC;AAAA,EAER,uBAAuB;AAAA,IACrB,QAAQ,aAAa,MAAM,OAAO,QAAQ;AAAA,IAC1C,WAAW;AAAA,MACT,QAAQ,aAAa,MAAM,OAAO,QAAQ;AAAA,IAC5C;AAAA,EACF;AAAA,EACA,oBAAoB,CAAC;AAAA,EACrB,MAAM,CAAC;AAAA,EACP,QAAQ;AAAA,IACN,mBAAmB;AAAA,MACjB,aAAa,MAAM,MAAM;AAAA,IAC3B;AAAA,EACF;AAAA,EACA,WAAW,CAAC;AAAA,EACZ,UAAU;AAAA,IACR,OAAO;AAAA,IACP,YAAY,MAAM,WAAW,MAAM;AAAA,EACrC;AAAA,EACA,WAAW,CAAC;AACd,CAAC;"}

package/dist/esm/InlineEditor/InlineEditor.js

@@ -1,8 +1,9 @@
 import { jsx } from "react/jsx-runtime";
-import { useState, useRef, useLayoutEffect } from "react";
+import { useState, useRef } from "react";
 import { Edit } from "@hitachivantara/uikit-react-icons";
 import { useDefaultProps, useTheme } from "@hitachivantara/uikit-react-utils";
 import { useControlled } from "../hooks/useControlled.js";
+import { useEnhancedEffect } from "../hooks/useEnhancedEffect.js";
 import { fixedForwardRef } from "../types/generic.js";
 import { isKey } from "../utils/keyboardUtils.js";
 import { useClasses } from "./InlineEditor.styles.js";
@@ -36,7 +37,7 @@ const HvInlineEditor = fixedForwardRef(function HvInlineEditor2(props, ref) {
   const { activeTheme } = useTheme();
   const typographyStyles = activeTheme?.typography[variant] || {};
   const { lineHeight } = typographyStyles;
-  useLayoutEffect(() => {
+  useEnhancedEffect(() => {
     const input = inputRef.current;
     if (editMode && input) {
       input.focus();

package/dist/esm/InlineEditor/InlineEditor.js.map

@@ -1 +1 @@
-{"version":3,"file":"InlineEditor.js","sources":["../../../src/InlineEditor/InlineEditor.tsx"],"sourcesContent":["import React, { useLayoutEffect, useRef, useState } from \"react\";\nimport { Edit } from \"@hitachivantara/uikit-react-icons\";\nimport {\n  useDefaultProps,\n  useTheme,\n  type ExtractNames,\n} from \"@hitachivantara/uikit-react-utils\";\n\nimport { HvButton, HvButtonProps } from \"../Button\";\nimport { useControlled } from \"../hooks/useControlled\";\nimport { HvInput, HvInputProps } from \"../Input\";\nimport {\n  fixedForwardRef,\n  PolymorphicComponentRef,\n  PolymorphicRef,\n} from \"../types/generic\";\nimport {\n  HvTypography,\n  HvTypographyProps,\n  HvTypographyVariants,\n} from \"../Typography\";\nimport { isKey } from \"../utils/keyboardUtils\";\nimport { staticClasses, useClasses } from \"./InlineEditor.styles\";\n\nexport { staticClasses as inlineEditorClasses };\n\nexport type HvInlineEditorClasses = ExtractNames<typeof useClasses>;\n\nexport type HvInlineEditorProps<C extends React.ElementType = typeof HvInput> =\n  PolymorphicComponentRef<\n    C,\n    {\n      /** The value of the form element. */\n      value?: string;\n      /** The default value of the form element. */\n      defaultValue?: string;\n      /** Whether the Edit icon should always be visible */\n      showIcon?: boolean;\n      /** Variant of the HvTypography to display */\n      variant?: HvTypographyVariants;\n      /** Called when the input is blurred. */\n      onBlur?: (\n        event: React.FocusEvent<HTMLTextAreaElement | HTMLInputElement>,\n        value: string,\n      ) => void;\n      /** Called when the input value changes. */\n      onChange?: (event: React.SyntheticEvent, value: string) => void;\n      /** Props passed to the HvButton component */\n      buttonProps?: HvButtonProps;\n      /** Props passed to the HvTypography text component */\n      typographyProps?: HvTypographyProps;\n      /** Whether the editor is disabled or not. */\n      disabled?: boolean;\n      /** A Jss Object used to override or extend the styles applied to the empty state component. */\n      classes?: HvInlineEditorClasses;\n      /** The placeholder value of the input. */\n      placeholder?: string;\n    }\n  >;\n\n/**\n * An Inline Editor allows the user to edit a record without making a major switch\n * between viewing and editing, making it an efficient method of updating a record.\n */\nexport const HvInlineEditor = fixedForwardRef(function HvInlineEditor<\n  C extends React.ElementType = typeof HvInput,\n>(props: HvInlineEditorProps<C>, ref: PolymorphicRef<C>) {\n  const {\n    className,\n    classes: classesProp,\n    value: valueProp,\n    defaultValue = \"\",\n    showIcon,\n    component: InputComponent = HvInput,\n    variant = \"body\",\n    placeholder = \"Enter text\",\n    onBlur,\n    onChange,\n    onKeyDown,\n    buttonProps,\n    typographyProps,\n    disabled,\n    ...others\n  } = useDefaultProps(\"HvInlineEditor\", props);\n\n  const { classes, cx } = useClasses(classesProp);\n  const [value, setValue] = useControlled(valueProp, defaultValue);\n  const [editMode, setEditMode] = useState(false);\n  const [cachedValue, setCachedValue] = useState(value);\n  const inputRef = useRef<HTMLInputElement>();\n  const { activeTheme } = useTheme();\n\n  const typographyStyles = activeTheme?.typography[variant] || {};\n  const { lineHeight } = typographyStyles;\n\n  useLayoutEffect(() => {\n    const input = inputRef.current;\n    if (editMode && input) {\n      input.focus();\n      input.select();\n    }\n  }, [editMode]);\n\n  const handleClick = () => {\n    setEditMode(true);\n    setCachedValue(value);\n  };\n\n  const handleBlur: HvInputProps[\"onBlur\"] = (event) => {\n    setEditMode(false);\n\n    const newValue = value || cachedValue; // empty values should be ignored\n    setValue(newValue);\n    onBlur?.(event, newValue);\n  };\n\n  const handleKeyDown: HvInputProps[\"onKeyDown\"] = (event) => {\n    if (isKey(event, \"Esc\")) {\n      setEditMode(false);\n      setValue(cachedValue);\n    }\n    onKeyDown?.(event as any);\n  };\n\n  const handleChange: HvInputProps[\"onChange\"] = (event, val) => {\n    setValue(val);\n    onChange?.(event, val);\n  };\n\n  return (\n    <div className={cx(classes.root, className)}>\n      {editMode && !disabled ? (\n        <InputComponent\n          ref={ref}\n          inputRef={inputRef}\n          classes={{\n            root: classes.inputRoot,\n            input: classes.input,\n            inputBorderContainer: classes.inputBorderContainer,\n          }}\n          inputProps={{\n            style: {\n              ...typographyStyles,\n              height: InputComponent === HvInput ? lineHeight : undefined,\n            },\n          }}\n          value={value}\n          onBlur={handleBlur}\n          onChange={handleChange}\n          onKeyDown={handleKeyDown}\n          {...others}\n        />\n      ) : (\n        <HvButton\n          variant=\"secondaryGhost\"\n          overrideIconColors={false}\n          endIcon={\n            <Edit\n              color=\"secondary_60\"\n              className={cx(classes.icon, {\n                [classes.iconVisible]: showIcon,\n              })}\n            />\n          }\n          className={cx(classes.button, {\n            [classes.largeText]: parseInt(lineHeight as string, 10) >= 28,\n          })}\n          onClick={handleClick}\n          disabled={disabled}\n          {...buttonProps}\n        >\n          <HvTypography\n            variant={variant}\n            noWrap\n            className={cx(classes.text, { [classes.textEmpty]: !value })}\n            {...typographyProps}\n          >\n            {value || placeholder}\n          </HvTypography>\n        </HvButton>\n      )}\n    </div>\n  );\n});\n"],"names":["HvInlineEditor"],"mappings":"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"}
+{"version":3,"file":"InlineEditor.js","sources":["../../../src/InlineEditor/InlineEditor.tsx"],"sourcesContent":["import React, { useRef, useState } from \"react\";\nimport { Edit } from \"@hitachivantara/uikit-react-icons\";\nimport {\n  useDefaultProps,\n  useTheme,\n  type ExtractNames,\n} from \"@hitachivantara/uikit-react-utils\";\n\nimport { HvButton, HvButtonProps } from \"../Button\";\nimport { useControlled } from \"../hooks/useControlled\";\nimport { useEnhancedEffect } from \"../hooks/useEnhancedEffect\";\nimport { HvInput, HvInputProps } from \"../Input\";\nimport {\n  fixedForwardRef,\n  PolymorphicComponentRef,\n  PolymorphicRef,\n} from \"../types/generic\";\nimport {\n  HvTypography,\n  HvTypographyProps,\n  HvTypographyVariants,\n} from \"../Typography\";\nimport { isKey } from \"../utils/keyboardUtils\";\nimport { staticClasses, useClasses } from \"./InlineEditor.styles\";\n\nexport { staticClasses as inlineEditorClasses };\n\nexport type HvInlineEditorClasses = ExtractNames<typeof useClasses>;\n\nexport type HvInlineEditorProps<C extends React.ElementType = typeof HvInput> =\n  PolymorphicComponentRef<\n    C,\n    {\n      /** The value of the form element. */\n      value?: string;\n      /** The default value of the form element. */\n      defaultValue?: string;\n      /** Whether the Edit icon should always be visible */\n      showIcon?: boolean;\n      /** Variant of the HvTypography to display */\n      variant?: HvTypographyVariants;\n      /** Called when the input is blurred. */\n      onBlur?: (\n        event: React.FocusEvent<HTMLTextAreaElement | HTMLInputElement>,\n        value: string,\n      ) => void;\n      /** Called when the input value changes. */\n      onChange?: (event: React.SyntheticEvent, value: string) => void;\n      /** Props passed to the HvButton component */\n      buttonProps?: HvButtonProps;\n      /** Props passed to the HvTypography text component */\n      typographyProps?: HvTypographyProps;\n      /** Whether the editor is disabled or not. */\n      disabled?: boolean;\n      /** A Jss Object used to override or extend the styles applied to the empty state component. */\n      classes?: HvInlineEditorClasses;\n      /** The placeholder value of the input. */\n      placeholder?: string;\n    }\n  >;\n\n/**\n * An Inline Editor allows the user to edit a record without making a major switch\n * between viewing and editing, making it an efficient method of updating a record.\n */\nexport const HvInlineEditor = fixedForwardRef(function HvInlineEditor<\n  C extends React.ElementType = typeof HvInput,\n>(props: HvInlineEditorProps<C>, ref: PolymorphicRef<C>) {\n  const {\n    className,\n    classes: classesProp,\n    value: valueProp,\n    defaultValue = \"\",\n    showIcon,\n    component: InputComponent = HvInput,\n    variant = \"body\",\n    placeholder = \"Enter text\",\n    onBlur,\n    onChange,\n    onKeyDown,\n    buttonProps,\n    typographyProps,\n    disabled,\n    ...others\n  } = useDefaultProps(\"HvInlineEditor\", props);\n\n  const { classes, cx } = useClasses(classesProp);\n  const [value, setValue] = useControlled(valueProp, defaultValue);\n  const [editMode, setEditMode] = useState(false);\n  const [cachedValue, setCachedValue] = useState(value);\n  const inputRef = useRef<HTMLInputElement>();\n  const { activeTheme } = useTheme();\n\n  const typographyStyles = activeTheme?.typography[variant] || {};\n  const { lineHeight } = typographyStyles;\n\n  useEnhancedEffect(() => {\n    const input = inputRef.current;\n    if (editMode && input) {\n      input.focus();\n      input.select();\n    }\n  }, [editMode]);\n\n  const handleClick = () => {\n    setEditMode(true);\n    setCachedValue(value);\n  };\n\n  const handleBlur: HvInputProps[\"onBlur\"] = (event) => {\n    setEditMode(false);\n\n    const newValue = value || cachedValue; // empty values should be ignored\n    setValue(newValue);\n    onBlur?.(event, newValue);\n  };\n\n  const handleKeyDown: HvInputProps[\"onKeyDown\"] = (event) => {\n    if (isKey(event, \"Esc\")) {\n      setEditMode(false);\n      setValue(cachedValue);\n    }\n    onKeyDown?.(event as any);\n  };\n\n  const handleChange: HvInputProps[\"onChange\"] = (event, val) => {\n    setValue(val);\n    onChange?.(event, val);\n  };\n\n  return (\n    <div className={cx(classes.root, className)}>\n      {editMode && !disabled ? (\n        <InputComponent\n          ref={ref}\n          inputRef={inputRef}\n          classes={{\n            root: classes.inputRoot,\n            input: classes.input,\n            inputBorderContainer: classes.inputBorderContainer,\n          }}\n          inputProps={{\n            style: {\n              ...typographyStyles,\n              height: InputComponent === HvInput ? lineHeight : undefined,\n            },\n          }}\n          value={value}\n          onBlur={handleBlur}\n          onChange={handleChange}\n          onKeyDown={handleKeyDown}\n          {...others}\n        />\n      ) : (\n        <HvButton\n          variant=\"secondaryGhost\"\n          overrideIconColors={false}\n          endIcon={\n            <Edit\n              color=\"secondary_60\"\n              className={cx(classes.icon, {\n                [classes.iconVisible]: showIcon,\n              })}\n            />\n          }\n          className={cx(classes.button, {\n            [classes.largeText]: parseInt(lineHeight as string, 10) >= 28,\n          })}\n          onClick={handleClick}\n          disabled={disabled}\n          {...buttonProps}\n        >\n          <HvTypography\n            variant={variant}\n            noWrap\n            className={cx(classes.text, { [classes.textEmpty]: !value })}\n            {...typographyProps}\n          >\n            {value || placeholder}\n          </HvTypography>\n        </HvButton>\n      )}\n    </div>\n  );\n});\n"],"names":["HvInlineEditor"],"mappings":"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"}

package/dist/esm/Loading/Loading.js

@@ -1,5 +1,5 @@
 import { jsxs, jsx } from "react/jsx-runtime";
-import { useDefaultProps } from "@hitachivantara/uikit-react-utils";
+import { useDefaultProps, mergeStyles } from "@hitachivantara/uikit-react-utils";
 import { getColor } from "@hitachivantara/uikit-styles";
 import { range } from "../utils/helpers.js";
 import { useClasses } from "./Loading.styles.js";
@@ -12,20 +12,21 @@ const HvLoading = (props) => {
     small,
     label,
     classes: classesProp,
+    style,
     className,
     ...others
   } = useDefaultProps("HvLoading", props);
   const { classes, cx } = useClasses(classesProp);
   const size = small ? "small" : "regular";
-  const colorVariant = color ? "Color" : "";
-  const variant = `${size}${colorVariant}`;
-  const inline = {
-    backgroundColor: getColor(color, small ? "secondary" : "brand")
-  };
+  const colorVariant = color && `${size}Color`;
   return /* @__PURE__ */ jsxs(
     "div",
     {
       hidden: !!hidden,
+      style: mergeStyles(style, {
+        color: getColor(color, small ? "secondary" : "brand"),
+        "--customColor": getColor(color)
+      }),
       className: cx(
         classes.root,
         {
@@ -38,8 +39,12 @@ const HvLoading = (props) => {
         /* @__PURE__ */ jsx("div", { className: classes.barContainer, children: range(3).map((e) => /* @__PURE__ */ jsx(
           "div",
           {
-            style: inline,
-            className: cx(classes.loadingBar, classes[variant])
+            className: cx(
+              classes.loadingBar,
+              // TODO: hoist to parent & remove unused `colorVariant` in v6
+              classes[size],
+              classes[colorVariant]
+            )
           },
           e
         )) }),

package/dist/esm/Loading/Loading.js.map

@@ -1 +1 @@
-{"version":3,"file":"Loading.js","sources":["../../../src/Loading/Loading.tsx"],"sourcesContent":["import {\n  useDefaultProps,\n  type ExtractNames,\n} from \"@hitachivantara/uikit-react-utils\";\nimport { getColor, HvColorAny } from \"@hitachivantara/uikit-styles\";\n\nimport { HvBaseProps } from \"../types/generic\";\nimport { HvTypography } from \"../Typography\";\nimport { range } from \"../utils/helpers\";\nimport { staticClasses, useClasses } from \"./Loading.styles\";\n\nexport { staticClasses as loadingClasses };\n\nexport type HvLoadingClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvLoadingProps extends HvBaseProps {\n  /** Indicates if the component should be render in a small size. */\n  small?: boolean;\n  /** The label to be displayed.  */\n  label?: React.ReactNode;\n  /** Whether the loading animation is hidden. */\n  hidden?: boolean;\n  /** Color applied to the bars. */\n  color?: HvColorAny;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvLoadingClasses;\n}\n\n/**\n * Loading provides feedback about a process that is taking place in the application.\n */\nexport const HvLoading = (props: HvLoadingProps) => {\n  const {\n    color,\n    hidden,\n    small,\n    label,\n    classes: classesProp,\n    className,\n    ...others\n  } = useDefaultProps(\"HvLoading\", props);\n\n  const { classes, cx } = useClasses(classesProp);\n\n  const size = small ? \"small\" : \"regular\";\n  const colorVariant = color ? \"Color\" : \"\";\n  const variant = `${size}${colorVariant}` as const;\n\n  const inline = {\n    backgroundColor: getColor(color, small ? \"secondary\" : \"brand\"),\n  };\n  return (\n    <div\n      hidden={!!hidden}\n      className={cx(\n        classes.root,\n        {\n          [classes.hidden]: hidden,\n        },\n        className,\n      )}\n      {...others}\n    >\n      <div className={classes.barContainer}>\n        {range(3).map((e) => (\n          <div\n            key={e}\n            style={inline}\n            className={cx(classes.loadingBar, classes[variant])}\n          />\n        ))}\n      </div>\n      {label && (\n        <HvTypography variant=\"caption1\" className={classes.label}>\n          {label}\n        </HvTypography>\n      )}\n    </div>\n  );\n};\n"],"names":[],"mappings":";;;;;;;AA+Ba,MAAA,YAAY,CAAC,UAA0B;AAC5C,QAAA;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,SAAS;AAAA,IACT;AAAA,IACA,GAAG;AAAA,EAAA,IACD,gBAAgB,aAAa,KAAK;AAEtC,QAAM,EAAE,SAAS,GAAG,IAAI,WAAW,WAAW;AAExC,QAAA,OAAO,QAAQ,UAAU;AACzB,QAAA,eAAe,QAAQ,UAAU;AACvC,QAAM,UAAU,GAAG,IAAI,GAAG,YAAY;AAEtC,QAAM,SAAS;AAAA,IACb,iBAAiB,SAAS,OAAO,QAAQ,cAAc,OAAO;AAAA,EAAA;AAG9D,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,QAAQ,CAAC,CAAC;AAAA,MACV,WAAW;AAAA,QACT,QAAQ;AAAA,QACR;AAAA,UACE,CAAC,QAAQ,MAAM,GAAG;AAAA,QACpB;AAAA,QACA;AAAA,MACF;AAAA,MACC,GAAG;AAAA,MAEJ,UAAA;AAAA,QAAC,oBAAA,OAAA,EAAI,WAAW,QAAQ,cACrB,gBAAM,CAAC,EAAE,IAAI,CAAC,MACb;AAAA,UAAC;AAAA,UAAA;AAAA,YAEC,OAAO;AAAA,YACP,WAAW,GAAG,QAAQ,YAAY,QAAQ,OAAO,CAAC;AAAA,UAAA;AAAA,UAF7C;AAAA,QAIR,CAAA,GACH;AAAA,QACC,6BACE,cAAa,EAAA,SAAQ,YAAW,WAAW,QAAQ,OACjD,UACH,MAAA,CAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAIR;"}
+{"version":3,"file":"Loading.js","sources":["../../../src/Loading/Loading.tsx"],"sourcesContent":["import {\n  mergeStyles,\n  useDefaultProps,\n  type ExtractNames,\n} from \"@hitachivantara/uikit-react-utils\";\nimport { getColor, HvColorAny } from \"@hitachivantara/uikit-styles\";\n\nimport { HvBaseProps } from \"../types/generic\";\nimport { HvTypography } from \"../Typography\";\nimport { range } from \"../utils/helpers\";\nimport { staticClasses, useClasses } from \"./Loading.styles\";\n\nexport { staticClasses as loadingClasses };\n\nexport type HvLoadingClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvLoadingProps extends HvBaseProps {\n  /** Indicates if the component should be render in a small size. */\n  small?: boolean;\n  /** The label to be displayed.  */\n  label?: React.ReactNode;\n  /** Whether the loading animation is hidden. */\n  hidden?: boolean;\n  /** Color applied to the bars. */\n  color?: HvColorAny;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvLoadingClasses;\n}\n\n/**\n * Loading provides feedback about a process that is taking place in the application.\n */\nexport const HvLoading = (props: HvLoadingProps) => {\n  const {\n    color,\n    hidden,\n    small,\n    label,\n    classes: classesProp,\n    style,\n    className,\n    ...others\n  } = useDefaultProps(\"HvLoading\", props);\n\n  const { classes, cx } = useClasses(classesProp);\n\n  const size = small ? \"small\" : \"regular\";\n  const colorVariant = color && (`${size}Color` as const);\n\n  return (\n    <div\n      hidden={!!hidden}\n      style={mergeStyles(style, {\n        color: getColor(color, small ? \"secondary\" : \"brand\"),\n        \"--customColor\": getColor(color),\n      })}\n      className={cx(\n        classes.root,\n        {\n          [classes.hidden]: hidden,\n        },\n        className,\n      )}\n      {...others}\n    >\n      <div className={classes.barContainer}>\n        {range(3).map((e) => (\n          <div\n            key={e}\n            className={cx(\n              classes.loadingBar,\n              // TODO: hoist to parent & remove unused `colorVariant` in v6\n              classes[size],\n              classes[colorVariant!],\n            )}\n          />\n        ))}\n      </div>\n      {label && (\n        <HvTypography variant=\"caption1\" className={classes.label}>\n          {label}\n        </HvTypography>\n      )}\n    </div>\n  );\n};\n"],"names":[],"mappings":";;;;;;;AAgCa,MAAA,YAAY,CAAC,UAA0B;AAC5C,QAAA;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,SAAS;AAAA,IACT;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EAAA,IACD,gBAAgB,aAAa,KAAK;AAEtC,QAAM,EAAE,SAAS,GAAG,IAAI,WAAW,WAAW;AAExC,QAAA,OAAO,QAAQ,UAAU;AACzB,QAAA,eAAe,SAAU,GAAG,IAAI;AAGpC,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,QAAQ,CAAC,CAAC;AAAA,MACV,OAAO,YAAY,OAAO;AAAA,QACxB,OAAO,SAAS,OAAO,QAAQ,cAAc,OAAO;AAAA,QACpD,iBAAiB,SAAS,KAAK;AAAA,MAAA,CAChC;AAAA,MACD,WAAW;AAAA,QACT,QAAQ;AAAA,QACR;AAAA,UACE,CAAC,QAAQ,MAAM,GAAG;AAAA,QACpB;AAAA,QACA;AAAA,MACF;AAAA,MACC,GAAG;AAAA,MAEJ,UAAA;AAAA,QAAC,oBAAA,OAAA,EAAI,WAAW,QAAQ,cACrB,gBAAM,CAAC,EAAE,IAAI,CAAC,MACb;AAAA,UAAC;AAAA,UAAA;AAAA,YAEC,WAAW;AAAA,cACT,QAAQ;AAAA;AAAA,cAER,QAAQ,IAAI;AAAA,cACZ,QAAQ,YAAa;AAAA,YACvB;AAAA,UAAA;AAAA,UANK;AAAA,QAQR,CAAA,GACH;AAAA,QACC,6BACE,cAAa,EAAA,SAAQ,YAAW,WAAW,QAAQ,OACjD,UACH,MAAA,CAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAIR;"}