@hitachivantara/uikit-react-core 5.104.0 → 5.104.1

package/dist/cjs/BulkActions/BulkActions.cjs

@@ -0,0 +1,103 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const React = require("react");
+const uikitReactUtils = require("@hitachivantara/uikit-react-utils");
+const CounterLabel = require("../utils/CounterLabel.cjs");
+const setId = require("../utils/setId.cjs");
+const BulkActions_styles = require("./BulkActions.styles.cjs");
+const Button = require("../Button/Button.cjs");
+const CheckBox = require("../CheckBox/CheckBox.cjs");
+const ActionsGeneric = require("../ActionsGeneric/ActionsGeneric.cjs");
+const HvBulkActions = React.forwardRef(function HvBulkActions2(props, ref) {
+  const {
+    id,
+    className,
+    classes: classesProp,
+    selectAllPagesLabel,
+    actionsDisabled,
+    maxVisibleActions,
+    checkboxProps,
+    actions,
+    numTotal = 0,
+    numSelected = 0,
+    selectAllConjunctionLabel = "/",
+    showSelectAllPages = false,
+    semantic = true,
+    actionsCallback,
+    // TODO - remove in v6
+    onAction,
+    onSelectAll,
+    onSelectAllPages,
+    ...others
+  } = uikitReactUtils.useDefaultProps("HvBulkActions", props);
+  const { classes, cx } = BulkActions_styles.useClasses(classesProp);
+  const { activeTheme } = uikitReactUtils.useTheme();
+  const anySelected = numSelected > 0;
+  const isSemantic = semantic && anySelected;
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      ref,
+      id,
+      className: cx(
+        classes.root,
+        { [classes.semantic]: isSemantic },
+        className
+      ),
+      ...others,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: classes.selectAllContainer, children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            CheckBox.HvCheckBox,
+            {
+              id: setId.setId(id, "select"),
+              className: classes.selectAll,
+              checked: numSelected > 0,
+              semantic: isSemantic,
+              onChange: onSelectAll,
+              indeterminate: numSelected > 0 && numSelected < numTotal,
+              label: /* @__PURE__ */ jsxRuntime.jsx(
+                CounterLabel.CounterLabel,
+                {
+                  selected: numSelected,
+                  total: numTotal,
+                  conjunctionLabel: selectAllConjunctionLabel
+                }
+              ),
+              ...checkboxProps
+            }
+          ),
+          showSelectAllPages && anySelected && numSelected < numTotal && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: classes.divider }),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              Button.HvButton,
+              {
+                id: setId.setId(id, "pages"),
+                className: classes.selectAllPages,
+                variant: isSemantic ? activeTheme?.bulkActions.actionButtonVariant : "secondaryGhost",
+                onClick: onSelectAllPages,
+                children: selectAllPagesLabel ?? `Select all ${numTotal} items`
+              }
+            )
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          ActionsGeneric.HvActionsGeneric,
+          {
+            id: setId.setId(id, "actions"),
+            classes: { root: classes.actions },
+            variant: isSemantic ? activeTheme?.bulkActions.actionButtonVariant : "secondaryGhost",
+            actions,
+            disabled: actionsDisabled ?? numSelected === 0,
+            actionsCallback,
+            onAction,
+            maxVisibleActions
+          }
+        )
+      ]
+    }
+  );
+});
+exports.bulkActionsClasses = BulkActions_styles.staticClasses;
+exports.HvBulkActions = HvBulkActions;

package/dist/cjs/Button/Button.cjs

@@ -0,0 +1,98 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const React = require("react");
+const uikitReactUtils = require("@hitachivantara/uikit-react-utils");
+const uikitStyles = require("@hitachivantara/uikit-styles");
+const generic = require("../types/generic.cjs");
+const Button_styles = require("./Button.styles.cjs");
+function parseVariant(variant) {
+  if (variant === "semantic") return ["inherit", "ghost"];
+  if (variant === "secondary") return ["secondary", "subtle"];
+  if (variant === "ghost") return ["primary", "ghost"];
+  if (variant === "contained" || variant === "subtle") {
+    return ["secondary", variant];
+  }
+  const result = variant.split(/(?=[A-Z])/);
+  if (!result[1]) return [result[0], "contained"];
+  return result.map((x) => x.toLowerCase());
+}
+const HvButton = generic.fixedForwardRef(function HvButton2(props, ref) {
+  const {
+    classes: classesProp,
+    children,
+    icon = false,
+    variant: variantProp = icon ? "secondaryGhost" : "primary",
+    color: colorProp,
+    disabled = false,
+    className,
+    startIcon,
+    endIcon,
+    size,
+    radius,
+    overrideIconColors,
+    component: Component = "button",
+    focusableWhenDisabled,
+    onClick: onClickProp,
+    onMouseDown: onMouseDownProp,
+    selected,
+    style,
+    ...others
+  } = uikitReactUtils.useDefaultProps("HvButton", props);
+  const { classes, css, cx } = Button_styles.useClasses(classesProp);
+  const [parsedColor, variant] = parseVariant(variantProp);
+  const color = colorProp ?? parsedColor;
+  const handleClick = (e) => {
+    if (disabled) return;
+    onClickProp?.(e);
+  };
+  const handleMouseDown = (e) => {
+    if (disabled) return;
+    onMouseDownProp?.(e);
+  };
+  const sizeStyles = React.useMemo(
+    () => size && (icon ? Button_styles.getIconSizeStyles(size) : Button_styles.getSizeStyles(size)),
+    [size, icon]
+  );
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    Component,
+    {
+      ref,
+      style: uikitReactUtils.mergeStyles(style, {
+        "--color": color && uikitStyles.getColor(color),
+        "--radius": radius && uikitStyles.theme.radii[radius],
+        "--HvButton-height": sizeStyles?.height ?? "32px"
+      }),
+      className: cx(
+        classes.root,
+        classes[variant],
+        classes[variantProp],
+        // Placed after type and color CSS for DS3 override
+        {
+          [classes.icon]: icon,
+          [classes.disabled]: disabled
+        },
+        sizeStyles && css(sizeStyles),
+        className
+      ),
+      "data-color": color,
+      onClick: handleClick,
+      onMouseDown: handleMouseDown,
+      ...Component === "button" && { type: "button" },
+      ...disabled && {
+        disabled: !focusableWhenDisabled,
+        tabIndex: focusableWhenDisabled ? 0 : -1,
+        "aria-disabled": true
+      },
+      ...selected != null && { "aria-pressed": selected },
+      ...others,
+      children: [
+        startIcon && /* @__PURE__ */ jsxRuntime.jsx("span", { className: classes.startIcon, children: startIcon }),
+        children,
+        endIcon && /* @__PURE__ */ jsxRuntime.jsx("span", { className: classes.endIcon, children: endIcon })
+      ]
+    }
+  );
+});
+exports.buttonClasses = Button_styles.staticClasses;
+exports.HvButton = HvButton;

package/dist/cjs/Calendar/Calendar.cjs

@@ -0,0 +1,108 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const React = require("react");
+const uikitReactUtils = require("@hitachivantara/uikit-react-utils");
+const setId = require("../utils/setId.cjs");
+const Calendar_styles = require("./Calendar.styles.cjs");
+const utils = require("./utils.cjs");
+const context = require("../FormElement/context.cjs");
+const SingleCalendar = require("./SingleCalendar/SingleCalendar.cjs");
+const HvCalendar = (props) => {
+  const {
+    classes: classesProp,
+    id: idProp,
+    locale = utils.DEFAULT_LOCALE,
+    value: valueProp,
+    visibleMonth,
+    visibleYear,
+    rightVisibleMonth,
+    rightVisibleYear,
+    minimumDate,
+    maximumDate,
+    startAdornment,
+    onChange,
+    onInputChange,
+    onVisibleDateChange,
+    invalidDateLabel,
+    ...others
+  } = uikitReactUtils.useDefaultProps("HvCalendar", props);
+  const { classes } = Calendar_styles.useClasses(classesProp);
+  const context$1 = React.useContext(context.HvFormElementContext);
+  const elementValue = React.useContext(context.HvFormElementValueContext);
+  const value = valueProp ?? elementValue;
+  const id = idProp ?? setId.setId(context$1.id, "single-calendar");
+  const rangeMode = utils.isRange(value);
+  const rightCalendarId = setId.setId(id, "single-calendar-right");
+  const clampedMonth = visibleMonth && visibleMonth % 13 > 0 ? visibleMonth % 13 : 1;
+  const singleCalendar = /* @__PURE__ */ jsxRuntime.jsx(
+    SingleCalendar.HvSingleCalendar,
+    {
+      id,
+      locale,
+      value,
+      visibleMonth: clampedMonth,
+      visibleYear,
+      minimumDate,
+      maximumDate,
+      onChange,
+      onInputChange: (evt, date) => {
+        onInputChange?.(evt, date, "left");
+      },
+      onVisibleDateChange,
+      invalidDateLabel,
+      ...others
+    }
+  );
+  const rangeCalendar = /* @__PURE__ */ jsxRuntime.jsxs("div", { className: classes.rangeCalendarContainer, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      SingleCalendar.HvSingleCalendar,
+      {
+        className: classes.singleCalendar,
+        id,
+        locale,
+        value,
+        visibleMonth: clampedMonth,
+        visibleYear,
+        minimumDate,
+        maximumDate,
+        onChange,
+        onInputChange: (evt, date) => {
+          onInputChange?.(evt, date, "left");
+        },
+        onVisibleDateChange: (event, action, index) => onVisibleDateChange?.(event, action, index, "left"),
+        invalidDateLabel,
+        ...others
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      SingleCalendar.HvSingleCalendar,
+      {
+        className: classes.singleCalendar,
+        id: rightCalendarId,
+        locale,
+        value,
+        visibleMonth: rightVisibleMonth,
+        visibleYear: rightVisibleYear,
+        minimumDate,
+        maximumDate,
+        onChange,
+        onInputChange: (evt, date) => {
+          onInputChange?.(evt, date, "right");
+        },
+        onVisibleDateChange: (event, action, index) => {
+          onVisibleDateChange?.(event, action, index, "right");
+        },
+        showEndDate: true,
+        invalidDateLabel,
+        ...others
+      }
+    )
+  ] });
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: classes.root, children: [
+    startAdornment,
+    rangeMode ? rangeCalendar : singleCalendar
+  ] });
+};
+exports.calendarClasses = Calendar_styles.staticClasses;
+exports.HvCalendar = HvCalendar;

package/dist/cjs/Calendar/CalendarHeader/CalendarHeader.cjs

@@ -0,0 +1,126 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const React = require("react");
+const uikitReactUtils = require("@hitachivantara/uikit-react-utils");
+const keyboardUtils = require("../../utils/keyboardUtils.cjs");
+const setId = require("../../utils/setId.cjs");
+const utils = require("../utils.cjs");
+const CalendarHeader_styles = require("./CalendarHeader.styles.cjs");
+const Input = require("../../Input/Input.cjs");
+const context = require("../../FormElement/context.cjs");
+const Typography = require("../../Typography/Typography.cjs");
+const HvCalendarHeader = (props) => {
+  const {
+    id: idProp,
+    value: valueProp,
+    locale = utils.DEFAULT_LOCALE,
+    classes: classesProp,
+    onChange,
+    showEndDate,
+    showDayOfWeek = false,
+    onFocus,
+    invalidDateLabel = "Invalid Date"
+  } = uikitReactUtils.useDefaultProps("HvCalendarHeader", props);
+  const { classes, cx } = CalendarHeader_styles.useClasses(classesProp);
+  const context$1 = React.useContext(context.HvFormElementContext);
+  const { label } = React.useContext(context.HvFormElementDescriptorsContext);
+  const localValue = utils.isRange(valueProp) ? showEndDate ? valueProp.endDate : valueProp.startDate : valueProp;
+  const [dateValue, setDateValue] = React.useState(localValue);
+  const [editedValue, setEditedValue] = React.useState(null);
+  const [displayValue, setDisplayValue] = React.useState("");
+  const [weekdayDisplay, setWeekdayDisplay] = React.useState("");
+  const id = idProp ?? setId.setId(context$1.id, "calendarHeader");
+  const inputValue = editedValue ?? displayValue;
+  const localeFormat = utils.getLocaleDateFormat(locale);
+  const [isValidValue, setIsValidValue] = React.useState(
+    inputValue.length === 0 || inputValue && utils.isDate(new Date(inputValue))
+  );
+  React.useEffect(() => {
+    const valid = !localValue || utils.isDate(new Date(localValue));
+    setIsValidValue(valid);
+    if (valid) {
+      if (!localValue) {
+        setDisplayValue("");
+        setEditedValue(null);
+        setWeekdayDisplay("");
+        return;
+      }
+      const weekday = new Intl.DateTimeFormat(locale, {
+        weekday: "short"
+      }).format(utils.isDate(localValue) ? localValue : 0);
+      setDisplayValue(utils.getFormattedDate(localValue, locale));
+      setEditedValue(null);
+      setWeekdayDisplay(weekday);
+    }
+  }, [localValue, locale]);
+  const handleNewDate = (event, date) => {
+    const localeParsedDate = utils.parseDateString(date, locale);
+    const isValidInput = utils.isDate(localeParsedDate);
+    const dateParsed = isValidInput ? localeParsedDate : new Date(date);
+    if (!utils.isSameDay(dateParsed, dateValue)) {
+      setDateValue(dateParsed);
+      onChange?.(event, dateParsed);
+    }
+    setIsValidValue(isValidInput);
+    if (isValidInput) {
+      setEditedValue(null);
+    }
+  };
+  const onBlurHandler = (event) => {
+    if (editedValue == null) return;
+    if (editedValue === "") {
+      setIsValidValue(true);
+      setEditedValue(null);
+      return;
+    }
+    handleNewDate(event, editedValue);
+  };
+  const keyDownHandler = (event) => {
+    if (!keyboardUtils.isKey(event, "Enter") || editedValue == null || editedValue === "")
+      return;
+    event.preventDefault();
+    handleNewDate(event, editedValue);
+  };
+  const onFocusHandler = (event) => {
+    if (!localValue) return;
+    const formattedDate = isValidValue && utils.isDate(localValue) ? utils.getStringFromDate(localValue, locale) : editedValue;
+    setEditedValue(formattedDate);
+    onFocus?.(event, formattedDate);
+  };
+  const onChangeHandler = (event, val) => {
+    setEditedValue(val);
+  };
+  const isInvalid = !isValidValue && inputValue !== "";
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      id,
+      className: cx(classes.root, {
+        [classes.invalid]: isInvalid
+      }),
+      children: [
+        showDayOfWeek && /* @__PURE__ */ jsxRuntime.jsx(Typography.HvTypography, { className: classes.headerDayOfWeek, children: weekdayDisplay || " " }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          Input.HvInput,
+          {
+            type: "text",
+            id: setId.setId(id, "header-input"),
+            placeholder: localeFormat,
+            value: inputValue,
+            "aria-labelledby": label?.[0]?.id,
+            onBlur: onBlurHandler,
+            onFocus: onFocusHandler,
+            onChange: onChangeHandler,
+            onKeyDown: keyDownHandler,
+            status: isInvalid ? "invalid" : "valid",
+            statusMessage: invalidDateLabel
+          }
+        )
+      ]
+    }
+  );
+};
+HvCalendarHeader.formElementType = "HvCalendarHeader";
+exports.calendarHeaderClasses = CalendarHeader_styles.staticClasses;
+exports.HvCalendarHeader = HvCalendarHeader;

package/dist/cjs/Calendar/SingleCalendar/CalendarCell.cjs

@@ -0,0 +1,86 @@
+"use strict";
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
+const jsxRuntime = require("react/jsx-runtime");
+const React = require("react");
+const uikitReactUtils = require("@hitachivantara/uikit-react-utils");
+const utils = require("../utils.cjs");
+const CalendarCell_styles = require("./CalendarCell.styles.cjs");
+const ButtonBase = require("../../ButtonBase/ButtonBase.cjs");
+const Typography = require("../../Typography/Typography.cjs");
+const HvCalendarCell = (props) => {
+  const {
+    classes: classesProp,
+    onChange,
+    calendarValue,
+    firstDayOfCurrentMonth,
+    value,
+    isDateSelectionMode,
+    today,
+    locale,
+    minimumDate,
+    maximumDate,
+    rangeMode = false,
+    ...others
+  } = uikitReactUtils.useDefaultProps("HvCalendarCell", props);
+  const { classes, cx } = CalendarCell_styles.useClasses(classesProp);
+  const buttonEl = React.useRef(null);
+  const startDate = utils.isDateRangeProp(calendarValue) ? calendarValue.startDate : void 0;
+  const endDate = utils.isDateRangeProp(calendarValue) ? calendarValue.endDate : void 0;
+  const isCellToday = utils.isSameDay(value, today);
+  const isCellSelected = utils.isSameDay(calendarValue, value);
+  const inMonth = utils.isSameMonth(value, firstDayOfCurrentMonth);
+  const isCellAfterStartingDate = rangeMode && value && startDate ? value >= startDate : false;
+  const isCellStartingDate = rangeMode ? utils.isSameDay(value, startDate) : false;
+  const isDateInSelectionRange = calendarValue && rangeMode ? utils.dateInProvidedValueRange(value, calendarValue) : false;
+  const isDateDisabled = utils.checkIfDateIsDisabled(value, minimumDate, maximumDate);
+  const startBookend = utils.isSameDay(startDate, value);
+  const endBookend = utils.isSameDay(endDate, value);
+  const isSelecting = isDateSelectionMode && isCellAfterStartingDate;
+  const handleClick = (event) => {
+    if (value) {
+      onChange?.(event, value);
+      if (buttonEl.current) setTimeout(() => buttonEl?.current?.focus());
+    }
+  };
+  const renderDate = () => /* @__PURE__ */ jsxRuntime.jsx(
+    ButtonBase.HvButtonBase,
+    {
+      ref: buttonEl,
+      className: classes.cellContainer,
+      onClick: handleClick,
+      disabled: isDateDisabled || !inMonth,
+      "data-in-month": inMonth,
+      ...others,
+      children: /* @__PURE__ */ jsxRuntime.jsx(
+        Typography.HvTypography,
+        {
+          component: "span",
+          variant: isCellToday ? "label" : "body",
+          className: cx(classes.calendarDate, {
+            [classes.calendarDateSelected]: inMonth && isCellSelected,
+            [classes.calendarDateNotInMonth]: !inMonth,
+            [classes.calendarDateInSelectionRange]: inMonth && rangeMode && isDateInSelectionRange,
+            [classes.calendarDateDisabled]: isDateDisabled,
+            [classes.startBookend]: inMonth && (startBookend && rangeMode || isCellStartingDate && isDateSelectionMode),
+            [classes.endBookend]: inMonth && endBookend && rangeMode
+          }),
+          children: value?.getDate()
+        }
+      )
+    }
+  );
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      className: cx(classes.dateWrapper, {
+        [classes.cellsInRange]: inMonth && rangeMode && isSelecting,
+        [classes.cellsOutsideRange]: rangeMode && !isSelecting
+      }),
+      "data-calendar-cell": "calendarCell",
+      children: renderDate()
+    }
+  );
+};
+exports.calendarCellClasses = CalendarCell_styles.staticClasses;
+exports.HvCalendarCell = HvCalendarCell;
+exports.default = HvCalendarCell;

package/dist/cjs/Calendar/SingleCalendar/SingleCalendar.cjs

@@ -0,0 +1,153 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const React = require("react");
+const keyboardUtils = require("../../utils/keyboardUtils.cjs");
+const setId = require("../../utils/setId.cjs");
+const CalendarHeader = require("../CalendarHeader/CalendarHeader.cjs");
+const model = require("../model.cjs");
+const utils = require("../utils.cjs");
+const CalendarCell = require("./CalendarCell.cjs");
+const SingleCalendar_styles = require("./SingleCalendar.styles.cjs");
+const ComposedNavigation = require("../CalendarNavigation/ComposedNavigation/ComposedNavigation.cjs");
+const MonthSelector = require("../CalendarNavigation/MonthSelector/MonthSelector.cjs");
+const Panel = require("../../Panel/Panel.cjs");
+const Typography = require("../../Typography/Typography.cjs");
+const HvSingleCalendar = ({
+  classes: classesProp,
+  className,
+  id,
+  locale = utils.DEFAULT_LOCALE,
+  value,
+  visibleMonth,
+  visibleYear,
+  minimumDate,
+  maximumDate,
+  onChange,
+  onInputChange,
+  onVisibleDateChange,
+  showEndDate,
+  showDayOfWeek,
+  invalidDateLabel,
+  children,
+  ...others
+}) => {
+  const { classes, cx } = SingleCalendar_styles.useClasses(classesProp);
+  const today = /* @__PURE__ */ new Date();
+  const localValue = value ?? today;
+  const [calViewMode, setCalViewMode] = React.useState("calendar");
+  const rangeMode = utils.isRange(localValue);
+  const isDateSelectionMode = rangeMode && !utils.isDate(localValue.endDate);
+  const calModel = rangeMode ? model.generateCalendarModel(localValue.startDate, visibleMonth, visibleYear) : model.generateCalendarModel(localValue, visibleMonth, visibleYear);
+  const firstDayOfCurrentMonth = new Date(calModel.year, calModel.month - 1, 1);
+  const firstDayOfCurrentMonthTime = firstDayOfCurrentMonth.getTime();
+  const listWeekdayNames = React.useMemo(() => utils.getWeekdayNamesList(locale), [locale]);
+  const handleChange = (event, date) => {
+    event?.preventDefault();
+    onChange?.(event, date);
+  };
+  const handleInputChange = (event, date) => {
+    event?.preventDefault();
+    onInputChange?.(event, date);
+  };
+  const getNavChild = (event, siblings, i) => {
+    if (keyboardUtils.isKey(event, "ArrowLeft")) return siblings[i - 1];
+    if (keyboardUtils.isKey(event, "ArrowRight")) return siblings[i + 1];
+    if (keyboardUtils.isKey(event, "ArrowUp")) return siblings[i - 7];
+    if (keyboardUtils.isKey(event, "ArrowDown")) return siblings[i + 7];
+    return void 0;
+  };
+  const handleKeyDown = (event) => {
+    const el = document?.activeElement;
+    const parent = el?.parentElement?.parentElement;
+    const siblings = parent != null ? Array.from(
+      parent.getElementsByClassName(classes.cellContainer)
+    ) : [];
+    const elIndex = el ? siblings.indexOf(el) : 0;
+    if (keyboardUtils.isKey(event, "Enter")) {
+      el.focus();
+      return;
+    }
+    const child = getNavChild(event, siblings, elIndex);
+    if (child) {
+      const inMonth = child.getAttribute("data-in-month");
+      if (inMonth === "true") {
+        event?.preventDefault();
+        child?.focus();
+      }
+    }
+  };
+  const renderWeekLabel = (dayName, index) => /* @__PURE__ */ jsxRuntime.jsx(Typography.HvTypography, { variant: "label", className: classes.calendarDay, children: dayName }, index);
+  const renderCalendarDate = (currentDate) => {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      CalendarCell.HvCalendarCell,
+      {
+        classes,
+        tabIndex: currentDate.getTime() === firstDayOfCurrentMonthTime ? 0 : -1,
+        onChange: handleChange,
+        onKeyDown: handleKeyDown,
+        value: currentDate,
+        today,
+        calendarValue: localValue,
+        rangeMode,
+        isDateSelectionMode,
+        locale,
+        firstDayOfCurrentMonth,
+        maximumDate,
+        minimumDate
+      },
+      currentDate.toString()
+    );
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs(Panel.HvPanel, { id, className: cx(classes.root, className), ...others, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      CalendarHeader.HvCalendarHeader,
+      {
+        id: setId.setId(id, "header"),
+        locale,
+        value,
+        onChange: handleInputChange,
+        showEndDate: showEndDate && !isDateSelectionMode,
+        showDayOfWeek,
+        invalidDateLabel
+      }
+    ),
+    calViewMode === "calendar" && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        ComposedNavigation.HvComposedNavigation,
+        {
+          id,
+          locale,
+          onChange: onVisibleDateChange,
+          onViewModeChange: setCalViewMode,
+          visibleYear: visibleYear || today.getFullYear(),
+          visibleMonth: visibleMonth || today.getMonth() + 1
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsxs(
+        "div",
+        {
+          className: classes.calendarGrid,
+          "aria-controls": CalendarHeader.HvCalendarHeader?.[0]?.id,
+          children: [
+            listWeekdayNames.map(renderWeekLabel),
+            calModel.dates.map(renderCalendarDate)
+          ]
+        }
+      )
+    ] }),
+    calViewMode === "monthly" && /* @__PURE__ */ jsxRuntime.jsx(
+      MonthSelector.HvMonthSelector,
+      {
+        id,
+        locale,
+        onChange: onVisibleDateChange,
+        onViewModeChange: setCalViewMode,
+        visibleMonth: visibleMonth || today.getMonth() + 1,
+        rangeMode
+      }
+    )
+  ] });
+};
+exports.singleCalendarClasses = SingleCalendar_styles.staticClasses;
+exports.HvSingleCalendar = HvSingleCalendar;