@hitachivantara/uikit-react-core 5.44.1 → 5.44.2

package/dist/esm/Calendar/CalendarHeader/CalendarHeader.js

@@ -0,0 +1,150 @@
+import { jsxs, jsx } from "@emotion/react/jsx-runtime";
+import { useContext, useState, useEffect } from "react";
+import dayjs from "dayjs";
+import localeData from "dayjs/plugin/localeData";
+import localizedFormat from "dayjs/plugin/localizedFormat";
+import customParseFormat from "dayjs/plugin/customParseFormat";
+import { isKey } from "../../utils/keyboardUtils.js";
+import { setId } from "../../utils/setId.js";
+import { useDefaultProps } from "../../hooks/useDefaultProps.js";
+import { isRange, isDate, formatToLocale, isSameDay } from "../utils.js";
+import { useClasses } from "./CalendarHeader.styles.js";
+import { staticClasses } from "./CalendarHeader.styles.js";
+import { HvFormElementValueContext } from "../../Forms/FormElement/context/FormElementValueContext.js";
+import { HvInput } from "../../Input/Input.js";
+import { HvFormElementContext } from "../../Forms/FormElement/context/FormElementContext.js";
+import { HvFormElementDescriptorsContext } from "../../Forms/FormElement/context/FormElementDescriptorsContext.js";
+import { HvTypography } from "../../Typography/Typography.js";
+dayjs.extend(localeData);
+dayjs.extend(localizedFormat);
+dayjs.extend(customParseFormat);
+const HvCalendarHeader = (props) => {
+  const {
+    id,
+    value,
+    locale = "en-US",
+    classes: classesProp,
+    onChange,
+    showEndDate,
+    showDayOfWeek = false,
+    onFocus,
+    invalidDateLabel = "Invalid Date"
+  } = useDefaultProps("HvCalendarHeader", props);
+  const { classes, cx } = useClasses(classesProp);
+  const { elementId } = useContext(HvFormElementContext);
+  const elementValue = useContext(HvFormElementValueContext);
+  const { label } = useContext(HvFormElementDescriptorsContext);
+  let localValue = value ?? elementValue ?? "";
+  if (isRange(localValue)) {
+    localValue = showEndDate ? localValue.endDate : localValue.startDate;
+  }
+  const [dateValue, setDateValue] = useState(localValue);
+  const [editedValue, setEditedValue] = useState(null);
+  const [displayValue, setDisplayValue] = useState("");
+  const [weekdayDisplay, setWeekdayDisplay] = useState("");
+  const localId = id ?? setId(elementId, "calendarHeader");
+  const inputValue = editedValue ?? displayValue;
+  const localeFormat = dayjs().locale(locale).localeData().longDateFormat("L");
+  const [isValidValue, setIsValidValue] = useState(
+    inputValue.length === 0 || !!inputValue && dayjs(localValue).isValid()
+  );
+  const validateInput = (incomingValid) => incomingValid === void 0 || dayjs(incomingValid).isValid();
+  useEffect(() => {
+    const valid = validateInput(localValue);
+    setIsValidValue(valid);
+    if (valid) {
+      if (!localValue) {
+        setDisplayValue("");
+        setEditedValue(null);
+        setWeekdayDisplay("");
+        return;
+      }
+      const weekday = new Intl.DateTimeFormat(locale, {
+        weekday: "short"
+      }).format(isDate(localValue) ? localValue : 0);
+      setDisplayValue(formatToLocale(localValue, locale));
+      setEditedValue(null);
+      setWeekdayDisplay(weekday);
+    }
+  }, [localValue, locale]);
+  const handleNewDate = (event, date) => {
+    const localeParsedDate = dayjs(date, localeFormat);
+    const isValidInput = localeParsedDate.isValid();
+    const dateParsed = isValidInput ? localeParsedDate.toDate() : dayjs(date).toDate();
+    if (!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 (!isKey(event, "Enter") || editedValue == null || editedValue === "")
+      return;
+    event.preventDefault();
+    handleNewDate(event, editedValue);
+  };
+  const onFocusHandler = (event) => {
+    if (!localValue)
+      return;
+    const formattedDate = isValidValue && isDate(localValue) ? dayjs(localValue).locale(locale).format("L") : editedValue;
+    setEditedValue(formattedDate);
+    onFocus?.(event, formattedDate);
+  };
+  const onChangeHandler = (event, val) => {
+    setEditedValue(val);
+  };
+  const isInvalid = !isValidValue && inputValue !== "";
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      id: localId,
+      className: cx(classes.root, {
+        [classes.invalid]: isInvalid
+      }),
+      children: [
+        showDayOfWeek && /* @__PURE__ */ jsx(HvTypography, { className: classes.headerDayOfWeek, children: weekdayDisplay || " " }),
+        /* @__PURE__ */ jsx(
+          HvInput,
+          {
+            type: "text",
+            id: setId(localId, "header-input"),
+            className: classes.headerDate,
+            classes: {
+              input: classes.input,
+              inputBorderContainer: classes.inputBorderContainer,
+              error: classes.invalidMessageStyling
+            },
+            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";
+export {
+  HvCalendarHeader,
+  staticClasses as calendarHeaderClasses
+};
+//# sourceMappingURL=CalendarHeader.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"CalendarHeader.js","sources":["../../../../src/Calendar/CalendarHeader/CalendarHeader.tsx"],"sourcesContent":["import { useState, useEffect, useContext } from \"react\";\nimport dayjs from \"dayjs\";\nimport localeData from \"dayjs/plugin/localeData\";\nimport localizedFormat from \"dayjs/plugin/localizedFormat\";\nimport customParseFormat from \"dayjs/plugin/customParseFormat\";\n\nimport {\n  HvFormElementContext,\n  HvFormElementValueContext,\n  HvFormElementDescriptorsContext,\n} from \"../../Forms\";\nimport { isKey } from \"../../utils/keyboardUtils\";\nimport { setId } from \"../../utils/setId\";\nimport { HvTypography } from \"../../Typography\";\nimport { ExtractNames } from \"../../utils/classes\";\nimport { useDefaultProps } from \"../../hooks/useDefaultProps\";\nimport { HvInput, HvInputProps } from \"../../Input\";\n\nimport { isRange, isSameDay, formatToLocale, isDate } from \"../utils\";\nimport { DateRangeProp } from \"../types\";\nimport { staticClasses, useClasses } from \"./CalendarHeader.styles\";\n\nexport { staticClasses as calendarHeaderClasses };\n\nexport type HvCalendarHeaderClasses = ExtractNames<typeof useClasses>;\n\ndayjs.extend(localeData);\ndayjs.extend(localizedFormat);\ndayjs.extend(customParseFormat);\n\nexport const HvCalendarHeader = (props: HvCalendarHeaderProps) => {\n  const {\n    id,\n    value,\n    locale = \"en-US\",\n    classes: classesProp,\n    onChange,\n    showEndDate,\n    showDayOfWeek = false,\n    onFocus,\n    invalidDateLabel = \"Invalid Date\",\n  } = useDefaultProps(\"HvCalendarHeader\", props);\n\n  const { classes, cx } = useClasses(classesProp);\n\n  const { elementId } = useContext(HvFormElementContext);\n  const elementValue = useContext(HvFormElementValueContext);\n  const { label } = useContext(HvFormElementDescriptorsContext);\n\n  let localValue: string | Date | DateRangeProp | undefined =\n    value ?? elementValue ?? \"\";\n  if (isRange(localValue)) {\n    localValue = showEndDate ? localValue.endDate : localValue.startDate;\n  }\n\n  const [dateValue, setDateValue] = useState<\n    string | Date | DateRangeProp | undefined\n  >(localValue);\n  const [editedValue, setEditedValue] = useState<string | null>(null);\n  const [displayValue, setDisplayValue] = useState(\"\");\n  const [weekdayDisplay, setWeekdayDisplay] = useState(\"\");\n\n  const localId = id ?? setId(elementId, \"calendarHeader\");\n\n  const inputValue = editedValue ?? displayValue;\n  const localeFormat = dayjs().locale(locale).localeData().longDateFormat(\"L\");\n\n  const [isValidValue, setIsValidValue] = useState(\n    inputValue.length === 0 || (!!inputValue && dayjs(localValue).isValid())\n  );\n\n  const validateInput = (incomingValid: any) =>\n    incomingValid === undefined || dayjs(incomingValid).isValid();\n\n  useEffect(() => {\n    const valid = validateInput(localValue);\n    setIsValidValue(valid);\n    if (valid) {\n      if (!localValue) {\n        setDisplayValue(\"\");\n        setEditedValue(null);\n        setWeekdayDisplay(\"\");\n        return;\n      }\n      const weekday = new Intl.DateTimeFormat(locale, {\n        weekday: \"short\",\n      }).format(isDate(localValue) ? localValue : 0);\n      setDisplayValue(formatToLocale(localValue, locale));\n      setEditedValue(null);\n      setWeekdayDisplay(weekday);\n    }\n  }, [localValue, locale]);\n\n  const handleNewDate = (event: any, date: string) => {\n    // attempt to format in locale data, or fallback to default\n    const localeParsedDate = dayjs(date, localeFormat);\n\n    const isValidInput = localeParsedDate.isValid();\n    const dateParsed = isValidInput\n      ? localeParsedDate.toDate()\n      : dayjs(date).toDate();\n    // prevent extra updates\n    if (!isSameDay(dateParsed, dateValue)) {\n      setDateValue(dateParsed);\n      onChange?.(event, dateParsed);\n    }\n\n    setIsValidValue(isValidInput);\n    if (isValidInput) {\n      setEditedValue(null);\n    }\n  };\n\n  const onBlurHandler: HvInputProps[\"onBlur\"] = (event) => {\n    if (editedValue == null) return;\n    if (editedValue === \"\") {\n      setIsValidValue(true);\n      setEditedValue(null);\n      return;\n    }\n    handleNewDate(event, editedValue);\n  };\n\n  const keyDownHandler: HvInputProps[\"onKeyDown\"] = (event) => {\n    if (!isKey(event, \"Enter\") || editedValue == null || editedValue === \"\")\n      return;\n    event.preventDefault();\n\n    handleNewDate(event, editedValue);\n  };\n\n  const onFocusHandler: HvInputProps[\"onFocus\"] = (event) => {\n    if (!localValue) return;\n    const formattedDate =\n      isValidValue && isDate(localValue)\n        ? dayjs(localValue).locale(locale).format(\"L\")\n        : editedValue;\n    setEditedValue(formattedDate);\n    onFocus?.(event, formattedDate);\n  };\n\n  const onChangeHandler: HvInputProps[\"onChange\"] = (event, val) => {\n    setEditedValue(val);\n  };\n\n  const isInvalid = !isValidValue && inputValue !== \"\";\n\n  // This component needs to be further refactored\n  // It's not possible to clear the date\n  // In a new major there's no need for all these classes\n  return (\n    <div\n      id={localId}\n      className={cx(classes.root, {\n        [classes.invalid]: isInvalid,\n      })}\n    >\n      {showDayOfWeek && (\n        <HvTypography className={classes.headerDayOfWeek}>\n          {weekdayDisplay || \"\\u00A0\"}\n        </HvTypography>\n      )}\n      <HvInput\n        type=\"text\"\n        id={setId(localId, \"header-input\")}\n        className={classes.headerDate}\n        classes={{\n          input: classes.input,\n          inputBorderContainer: classes.inputBorderContainer,\n          error: classes.invalidMessageStyling,\n        }}\n        placeholder={localeFormat}\n        value={inputValue}\n        aria-labelledby={label?.[0]?.id}\n        onBlur={onBlurHandler}\n        onFocus={onFocusHandler}\n        onChange={onChangeHandler}\n        onKeyDown={keyDownHandler}\n        status={isInvalid ? \"invalid\" : \"valid\"}\n        statusMessage={invalidDateLabel}\n      />\n    </div>\n  );\n};\n\n// TODO: refactor this out\nHvCalendarHeader.formElementType = \"HvCalendarHeader\";\n\nexport interface HvCalendarHeaderProps {\n  /**\n   * A Jss Object used to override or extend the component styles.\n   */\n  classes?: HvCalendarHeaderClasses;\n  /**\n   * Identifier.\n   */\n  id?: string;\n  /**\n   * The text to be shown on the main part of the header.\n   */\n  value?: string | Date | DateRangeProp;\n  /**\n   * Locale to be used by the calendar.\n   */\n  locale?: string;\n  /**\n   * Callback to define the input date.\n   */\n  onChange?: (\n    event:\n      | React.ChangeEvent<HTMLTextAreaElement | HTMLInputElement>\n      | undefined,\n    value: Date | DateRangeProp\n  ) => void;\n  /**\n   * Callback to handle input onFocus.\n   */\n  onFocus?: (\n    event: React.FocusEvent<HTMLTextAreaElement | HTMLInputElement>,\n    formattedDate: string | null\n  ) => void;\n  /**\n   * Indicates if header should display end date in a date range.\n   */\n  showEndDate?: boolean;\n  /**\n   * Indicates if header should display the day of week.\n   */\n  showDayOfWeek?: boolean;\n  /**\n   * Label shown when date is invalid.\n   */\n  invalidDateLabel?: string;\n}\n"],"names":[],"mappings":"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"}

package/dist/esm/Calendar/CalendarHeader/CalendarHeader.styles.js

@@ -0,0 +1,23 @@
+import { theme } from "@hitachivantara/uikit-styles";
+import { createClasses } from "../../utils/classes.js";
+const { staticClasses, useClasses } = createClasses("HvCalendarHeader", {
+  root: {
+    paddingBottom: theme.space.md,
+    "&$invalid": {
+      paddingBottom: 0
+    }
+  },
+  invalid: {},
+  headerDayOfWeek: {
+    color: theme.colors.secondary_80
+  },
+  headerDate: {},
+  input: {},
+  inputBorderContainer: {},
+  invalidMessageStyling: {}
+});
+export {
+  staticClasses,
+  useClasses
+};
+//# sourceMappingURL=CalendarHeader.styles.js.map

package/dist/esm/Calendar/CalendarHeader/CalendarHeader.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CalendarHeader.styles.js","sources":["../../../../src/Calendar/CalendarHeader/CalendarHeader.styles.tsx"],"sourcesContent":["import { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { createClasses } from \"../../utils/classes\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvCalendarHeader\", {\n  root: {\n    paddingBottom: theme.space.md,\n\n    \"&$invalid\": {\n      paddingBottom: 0,\n    },\n  },\n  invalid: {},\n  headerDayOfWeek: {\n    color: theme.colors.secondary_80,\n  },\n  headerDate: {},\n  input: {},\n  inputBorderContainer: {},\n  invalidMessageStyling: {},\n});\n"],"names":[],"mappings":";;AAIO,MAAM,EAAE,eAAe,eAAe,cAAc,oBAAoB;AAAA,EAC7E,MAAM;AAAA,IACJ,eAAe,MAAM,MAAM;AAAA,IAE3B,aAAa;AAAA,MACX,eAAe;AAAA,IACjB;AAAA,EACF;AAAA,EACA,SAAS,CAAC;AAAA,EACV,iBAAiB;AAAA,IACf,OAAO,MAAM,OAAO;AAAA,EACtB;AAAA,EACA,YAAY,CAAC;AAAA,EACb,OAAO,CAAC;AAAA,EACR,sBAAsB,CAAC;AAAA,EACvB,uBAAuB,CAAC;AAC1B,CAAC;"}

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

@@ -0,0 +1,57 @@
+import { jsxs, jsx } from "@emotion/react/jsx-runtime";
+import { setId } from "../../../utils/setId.js";
+import { getMonthNamesList } from "../../utils.js";
+import { useClasses } from "./ComposedNavigation.styles.js";
+import { staticClasses } from "./ComposedNavigation.styles.js";
+import { Navigation } from "../Navigation/Navigation.js";
+const HvComposedNavigation = ({
+  classes: classesProp,
+  id,
+  locale,
+  onChange,
+  onViewModeChange,
+  visibleYear,
+  visibleMonth,
+  ...others
+}) => {
+  const { classes } = useClasses(classesProp);
+  const listMonthNamesLong = getMonthNamesList(locale, "long");
+  const monthName = listMonthNamesLong[visibleMonth - 1];
+  return /* @__PURE__ */ jsxs("div", { className: classes.navigationContainer, ...others, children: [
+    /* @__PURE__ */ jsx("div", { className: classes.navigationMonth, children: /* @__PURE__ */ jsx(
+      Navigation,
+      {
+        id: setId(id, "navigation-month"),
+        navigationText: monthName,
+        onNavigatePrevious: (event) => {
+          onChange?.(event, "previous_month");
+        },
+        onNavigateNext: (event) => {
+          onChange?.(event, "next_month");
+        },
+        onTextClick: () => {
+          onViewModeChange("monthly");
+        },
+        className: classes.navigationMonth
+      }
+    ) }),
+    /* @__PURE__ */ jsx(
+      Navigation,
+      {
+        id: setId(id, "navigation-year"),
+        navigationText: visibleYear.toString(),
+        onNavigatePrevious: (event) => {
+          onChange?.(event, "previous_year");
+        },
+        onNavigateNext: (event) => {
+          onChange?.(event, "next_year");
+        }
+      }
+    )
+  ] });
+};
+export {
+  HvComposedNavigation,
+  staticClasses as composedNavigationClasses
+};
+//# sourceMappingURL=ComposedNavigation.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ComposedNavigation.js","sources":["../../../../../src/Calendar/CalendarNavigation/ComposedNavigation/ComposedNavigation.tsx"],"sourcesContent":["import { setId } from \"../../../utils/setId\";\n\nimport { ExtractNames } from \"../../../utils/classes\";\n\nimport { getMonthNamesList } from \"../../utils\";\nimport { ViewMode } from \"../../enums\";\nimport { Navigation } from \"../Navigation\";\nimport { VisibilitySelectorActions } from \"../../types\";\n\nimport { staticClasses, useClasses } from \"./ComposedNavigation.styles\";\n\nexport { staticClasses as composedNavigationClasses };\n\nexport type HvComposedNavigationClasses = ExtractNames<typeof useClasses>;\n\nexport const HvComposedNavigation = ({\n  classes: classesProp,\n  id,\n  locale,\n  onChange,\n  onViewModeChange,\n  visibleYear,\n  visibleMonth,\n  ...others\n}: HvComposedNavigationProps) => {\n  const { classes } = useClasses(classesProp);\n\n  const listMonthNamesLong = getMonthNamesList(locale, \"long\");\n  const monthName = listMonthNamesLong[visibleMonth - 1];\n\n  return (\n    <div className={classes.navigationContainer} {...others}>\n      <div className={classes.navigationMonth}>\n        <Navigation\n          id={setId(id, \"navigation-month\")}\n          navigationText={monthName}\n          onNavigatePrevious={(event) => {\n            onChange?.(event, \"previous_month\");\n          }}\n          onNavigateNext={(event) => {\n            onChange?.(event, \"next_month\");\n          }}\n          onTextClick={() => {\n            onViewModeChange(\"monthly\");\n          }}\n          className={classes.navigationMonth}\n        />\n      </div>\n\n      <Navigation\n        id={setId(id, \"navigation-year\")}\n        navigationText={visibleYear.toString()}\n        onNavigatePrevious={(event) => {\n          onChange?.(event, \"previous_year\");\n        }}\n        onNavigateNext={(event) => {\n          onChange?.(event, \"next_year\");\n        }}\n      />\n    </div>\n  );\n};\n\nexport interface HvComposedNavigationProps {\n  /**\n   * A Jss Object used to override or extend the component styles.\n   */\n  classes?: HvComposedNavigationClasses;\n  /**\n   * Identifier.\n   */\n  id?: string;\n  /**\n   * Locale to be used by the calendar.\n   */\n  locale?: string;\n  /**\n   * Callback to define the input date.\n   */\n  onChange?: (event: any, action: VisibilitySelectorActions) => void;\n  /**\n   * Callback to define the view mode.\n   */\n  onViewModeChange: (viewMode: ViewMode) => void;\n  /**\n   * Controls the visible month of the Calendar\n   */\n  visibleMonth: number;\n  /**\n   * Controls the visible month of the Calendar\n   */\n  visibleYear: number;\n}\n"],"names":[],"mappings":";;;;;;AAeO,MAAM,uBAAuB,CAAC;AAAA,EACnC,SAAS;AAAA,EACT;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAAiC;AAC/B,QAAM,EAAE,QAAA,IAAY,WAAW,WAAW;AAEpC,QAAA,qBAAqB,kBAAkB,QAAQ,MAAM;AACrD,QAAA,YAAY,mBAAmB,eAAe,CAAC;AAErD,8BACG,OAAI,EAAA,WAAW,QAAQ,qBAAsB,GAAG,QAC/C,UAAA;AAAA,IAAC,oBAAA,OAAA,EAAI,WAAW,QAAQ,iBACtB,UAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,IAAI,MAAM,IAAI,kBAAkB;AAAA,QAChC,gBAAgB;AAAA,QAChB,oBAAoB,CAAC,UAAU;AAC7B,qBAAW,OAAO,gBAAgB;AAAA,QACpC;AAAA,QACA,gBAAgB,CAAC,UAAU;AACzB,qBAAW,OAAO,YAAY;AAAA,QAChC;AAAA,QACA,aAAa,MAAM;AACjB,2BAAiB,SAAS;AAAA,QAC5B;AAAA,QACA,WAAW,QAAQ;AAAA,MAAA;AAAA,IAAA,GAEvB;AAAA,IAEA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,IAAI,MAAM,IAAI,iBAAiB;AAAA,QAC/B,gBAAgB,YAAY,SAAS;AAAA,QACrC,oBAAoB,CAAC,UAAU;AAC7B,qBAAW,OAAO,eAAe;AAAA,QACnC;AAAA,QACA,gBAAgB,CAAC,UAAU;AACzB,qBAAW,OAAO,WAAW;AAAA,QAC/B;AAAA,MAAA;AAAA,IACF;AAAA,EACF,EAAA,CAAA;AAEJ;"}

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

@@ -0,0 +1,20 @@
+import { theme } from "@hitachivantara/uikit-styles";
+import { createClasses } from "../../../utils/classes.js";
+const { staticClasses, useClasses } = createClasses(
+  "HvComposedNavigation",
+  {
+    navigationContainer: {
+      display: "flex",
+      justifyContent: "space-between",
+      padding: theme.spacing("xs", 0)
+    },
+    navigationMonth: {
+      minWidth: "160px"
+    }
+  }
+);
+export {
+  staticClasses,
+  useClasses
+};
+//# sourceMappingURL=ComposedNavigation.styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ComposedNavigation.styles.js","sources":["../../../../../src/Calendar/CalendarNavigation/ComposedNavigation/ComposedNavigation.styles.tsx"],"sourcesContent":["import { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { createClasses } from \"../../../utils/classes\";\n\nexport const { staticClasses, useClasses } = createClasses(\n  \"HvComposedNavigation\",\n  {\n    navigationContainer: {\n      display: \"flex\",\n      justifyContent: \"space-between\",\n      padding: theme.spacing(\"xs\", 0),\n    },\n    navigationMonth: {\n      minWidth: \"160px\",\n    },\n  }\n);\n"],"names":[],"mappings":";;AAIa,MAAA,EAAE,eAAe,WAAA,IAAe;AAAA,EAC3C;AAAA,EACA;AAAA,IACE,qBAAqB;AAAA,MACnB,SAAS;AAAA,MACT,gBAAgB;AAAA,MAChB,SAAS,MAAM,QAAQ,MAAM,CAAC;AAAA,IAChC;AAAA,IACA,iBAAiB;AAAA,MACf,UAAU;AAAA,IACZ;AAAA,EACF;AACF;"}

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

@@ -0,0 +1,63 @@
+import { jsx } from "@emotion/react/jsx-runtime";
+import { isKey } from "../../../utils/keyboardUtils.js";
+import { getMonthNamesList } from "../../utils.js";
+import { useClasses } from "./MonthSelector.styles.js";
+import { staticClasses } from "./MonthSelector.styles.js";
+import { HvTypography } from "../../../Typography/Typography.js";
+const HvMonthSelector = ({
+  classes: classesProp,
+  id,
+  locale,
+  onChange,
+  onViewModeChange,
+  rangeMode,
+  visibleMonth,
+  ...others
+}) => {
+  const { classes, cx } = useClasses(classesProp);
+  const listMonthNamesShort = getMonthNamesList(locale, "short");
+  const onKeyDownHandler = (event, index) => {
+    if (isKey(event, "Enter")) {
+      onChange?.(event, "month", index + 1);
+      onViewModeChange("calendar");
+    }
+  };
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cx(classes.calendarMonthlyGrid, {
+        [classes.rangeModeWidth]: rangeMode,
+        [classes.normalWidth]: !rangeMode
+      }),
+      children: listMonthNamesShort.map((monthName, index) => /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: classes.focusSelection,
+          role: "button",
+          onClick: (event) => {
+            onChange?.(event, "month", index + 1);
+            onViewModeChange("calendar");
+          },
+          onKeyDown: (event) => onKeyDownHandler(event, index),
+          tabIndex: 0,
+          ...others,
+          children: /* @__PURE__ */ jsx(
+            HvTypography,
+            {
+              className: cx(classes.calendarMonthlyCell, {
+                [classes.calendarMonthlyCellSelected]: index + 1 === visibleMonth
+              }),
+              children: monthName
+            }
+          )
+        },
+        monthName
+      ))
+    }
+  );
+};
+export {
+  HvMonthSelector,
+  staticClasses as monthSelectorClasses
+};
+//# sourceMappingURL=MonthSelector.js.map

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

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

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"MonthSelector.styles.js","sources":["../../../../../src/Calendar/CalendarNavigation/MonthSelector/MonthSelector.styles.tsx"],"sourcesContent":["import { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { outlineStyles } from \"../../../utils/focusUtils\";\n\nimport { createClasses } from \"../../../utils/classes\";\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":";;;AAMA,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;"}

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

@@ -0,0 +1,66 @@
+import { jsxs, jsx } from "@emotion/react/jsx-runtime";
+import { DropLeftXS, DropRightXS } from "@hitachivantara/uikit-react-icons";
+import { setId } from "../../../utils/setId.js";
+import { useClasses } from "./Navigation.styles.js";
+import { staticClasses } from "./Navigation.styles.js";
+import { HvButton } from "../../../Button/Button.js";
+const Navigation = ({
+  id,
+  classes: classesProp,
+  onNavigatePrevious,
+  onNavigateNext,
+  onTextClick,
+  navigationText = "n/a",
+  isPreviousEnabled = true,
+  isNextEnabled = true
+}) => {
+  const { classes, cx } = useClasses(classesProp);
+  return /* @__PURE__ */ jsxs("div", { className: classes.root, children: [
+    /* @__PURE__ */ jsx(
+      HvButton,
+      {
+        icon: true,
+        disabled: !isPreviousEnabled,
+        "aria-label": "Previous",
+        id: setId(id, "left"),
+        className: cx(classes.icon, {
+          [classes.disabled]: !isPreviousEnabled
+        }),
+        onClick: onNavigatePrevious,
+        children: /* @__PURE__ */ jsx(DropLeftXS, { role: "none" })
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      HvButton,
+      {
+        id,
+        variant: "secondaryGhost",
+        onClick: onTextClick,
+        component: onTextClick ? "button" : "div",
+        className: cx(classes.text, {
+          [classes.textWithoutHover]: !onTextClick
+        }),
+        children: navigationText
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      HvButton,
+      {
+        icon: true,
+        disabled: !isNextEnabled,
+        "aria-label": "Next",
+        id: setId(id, "right"),
+        className: cx(classes.icon, {
+          [classes.disabled]: !isNextEnabled
+        }),
+        onClick: onNavigateNext,
+        children: /* @__PURE__ */ jsx(DropRightXS, { role: "none" })
+      }
+    )
+  ] });
+};
+export {
+  Navigation,
+  staticClasses as navigationClasses
+};
+//# sourceMappingURL=Navigation.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Navigation.js","sources":["../../../../../src/Calendar/CalendarNavigation/Navigation/Navigation.tsx"],"sourcesContent":["import {\n  DropLeftXS as DropLeftIcon,\n  DropRightXS as DropRightIcon,\n} from \"@hitachivantara/uikit-react-icons\";\n\nimport { setId } from \"../../../utils/setId\";\nimport { HvButton } from \"../../../Button\";\nimport { HvBaseProps } from \"../../../types/generic\";\n\nimport { ExtractNames } from \"../../../utils/classes\";\n\nimport { staticClasses, useClasses } from \"./Navigation.styles\";\n\nexport { staticClasses as navigationClasses };\n\nexport type HvNavigationClasses = ExtractNames<typeof useClasses>;\n\nexport const Navigation = ({\n  id,\n  classes: classesProp,\n  onNavigatePrevious,\n  onNavigateNext,\n  onTextClick,\n  navigationText = \"n/a\",\n  isPreviousEnabled = true,\n  isNextEnabled = true,\n}: NavigationProps) => {\n  const { classes, cx } = useClasses(classesProp);\n\n  return (\n    <div className={classes.root}>\n      <HvButton\n        icon\n        disabled={!isPreviousEnabled}\n        aria-label=\"Previous\"\n        id={setId(id, \"left\")}\n        className={cx(classes.icon, {\n          [classes.disabled]: !isPreviousEnabled,\n        })}\n        onClick={onNavigatePrevious}\n      >\n        <DropLeftIcon role=\"none\" />\n      </HvButton>\n\n      <HvButton\n        id={id}\n        variant=\"secondaryGhost\"\n        onClick={onTextClick}\n        component={onTextClick ? \"button\" : \"div\"}\n        className={cx(classes.text, {\n          [classes.textWithoutHover]: !onTextClick,\n        })}\n      >\n        {navigationText}\n      </HvButton>\n\n      <HvButton\n        icon\n        disabled={!isNextEnabled}\n        aria-label=\"Next\"\n        id={setId(id, \"right\")}\n        className={cx(classes.icon, {\n          [classes.disabled]: !isNextEnabled,\n        })}\n        onClick={onNavigateNext}\n      >\n        <DropRightIcon role=\"none\" />\n      </HvButton>\n    </div>\n  );\n};\n\nexport interface NavigationProps extends HvBaseProps {\n  /**\n   * A Jss Object used to override or extend the component styles.\n   */\n  classes?: HvNavigationClasses;\n  /**\n   * A function to be executed whenever the navigate previous action is triggered.\n   */\n  onNavigatePrevious: (event: React.MouseEvent<HTMLElement>) => void;\n  /**\n   * A function to be executed whenever the navigate next action is triggered.\n   */\n  onNavigateNext: (event: React.MouseEvent<HTMLElement>) => void;\n  /**\n   * A function to be executed whenever the text is clicked.\n   */\n  onTextClick?: () => void;\n  /**\n   * The text that will be shown between the navigation buttons.\n   */\n  navigationText?: string;\n  /**\n   * Flag stating if the previous button should be enabled or disabled.\n   */\n  isPreviousEnabled?: boolean;\n  /**\n   * Flag stating if the next button should be enabled or disabled.\n   */\n  isNextEnabled?: boolean;\n}\n"],"names":["DropLeftIcon","DropRightIcon"],"mappings":";;;;;;AAiBO,MAAM,aAAa,CAAC;AAAA,EACzB;AAAA,EACA,SAAS;AAAA,EACT;AAAA,EACA;AAAA,EACA;AAAA,EACA,iBAAiB;AAAA,EACjB,oBAAoB;AAAA,EACpB,gBAAgB;AAClB,MAAuB;AACrB,QAAM,EAAE,SAAS,GAAG,IAAI,WAAW,WAAW;AAE9C,SACG,qBAAA,OAAA,EAAI,WAAW,QAAQ,MACtB,UAAA;AAAA,IAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,MAAI;AAAA,QACJ,UAAU,CAAC;AAAA,QACX,cAAW;AAAA,QACX,IAAI,MAAM,IAAI,MAAM;AAAA,QACpB,WAAW,GAAG,QAAQ,MAAM;AAAA,UAC1B,CAAC,QAAQ,QAAQ,GAAG,CAAC;AAAA,QAAA,CACtB;AAAA,QACD,SAAS;AAAA,QAET,UAAA,oBAACA,YAAa,EAAA,MAAK,OAAO,CAAA;AAAA,MAAA;AAAA,IAC5B;AAAA,IAEA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,SAAQ;AAAA,QACR,SAAS;AAAA,QACT,WAAW,cAAc,WAAW;AAAA,QACpC,WAAW,GAAG,QAAQ,MAAM;AAAA,UAC1B,CAAC,QAAQ,gBAAgB,GAAG,CAAC;AAAA,QAAA,CAC9B;AAAA,QAEA,UAAA;AAAA,MAAA;AAAA,IACH;AAAA,IAEA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,MAAI;AAAA,QACJ,UAAU,CAAC;AAAA,QACX,cAAW;AAAA,QACX,IAAI,MAAM,IAAI,OAAO;AAAA,QACrB,WAAW,GAAG,QAAQ,MAAM;AAAA,UAC1B,CAAC,QAAQ,QAAQ,GAAG,CAAC;AAAA,QAAA,CACtB;AAAA,QACD,SAAS;AAAA,QAET,UAAA,oBAACC,aAAc,EAAA,MAAK,OAAO,CAAA;AAAA,MAAA;AAAA,IAC7B;AAAA,EACF,EAAA,CAAA;AAEJ;"}

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

@@ -0,0 +1,27 @@
+import { theme } from "@hitachivantara/uikit-styles";
+import { createClasses } from "../../../utils/classes.js";
+const { staticClasses, useClasses } = createClasses("HvNavigation", {
+  root: {
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "space-between",
+    gap: theme.space.xs
+  },
+  icon: {},
+  disabled: {},
+  text: {
+    minWidth: "unset",
+    flex: 1,
+    color: theme.colors.secondary,
+    fontWeight: theme.typography.body.fontWeight,
+    padding: 0
+  },
+  textWithoutHover: {
+    pointerEvents: "none"
+  }
+});
+export {
+  staticClasses,
+  useClasses
+};
+//# sourceMappingURL=Navigation.styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Navigation.styles.js","sources":["../../../../../src/Calendar/CalendarNavigation/Navigation/Navigation.styles.tsx"],"sourcesContent":["import { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { createClasses } from \"../../../utils/classes\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvNavigation\", {\n  root: {\n    display: \"flex\",\n    alignItems: \"center\",\n    justifyContent: \"space-between\",\n    gap: theme.space.xs,\n  },\n  icon: {},\n  disabled: {},\n  text: {\n    minWidth: \"unset\",\n    flex: 1,\n    color: theme.colors.secondary,\n    fontWeight: theme.typography.body.fontWeight,\n    padding: 0,\n  },\n  textWithoutHover: {\n    pointerEvents: \"none\",\n  },\n});\n"],"names":[],"mappings":";;AAIO,MAAM,EAAE,eAAe,eAAe,cAAc,gBAAgB;AAAA,EACzE,MAAM;AAAA,IACJ,SAAS;AAAA,IACT,YAAY;AAAA,IACZ,gBAAgB;AAAA,IAChB,KAAK,MAAM,MAAM;AAAA,EACnB;AAAA,EACA,MAAM,CAAC;AAAA,EACP,UAAU,CAAC;AAAA,EACX,MAAM;AAAA,IACJ,UAAU;AAAA,IACV,MAAM;AAAA,IACN,OAAO,MAAM,OAAO;AAAA,IACpB,YAAY,MAAM,WAAW,KAAK;AAAA,IAClC,SAAS;AAAA,EACX;AAAA,EACA,kBAAkB;AAAA,IAChB,eAAe;AAAA,EACjB;AACF,CAAC;"}

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

@@ -0,0 +1,95 @@
+import { jsx } from "@emotion/react/jsx-runtime";
+import { useRef } from "react";
+import { useDefaultProps } from "../../hooks/useDefaultProps.js";
+import { isDateRangeProp, isSameDay, isSameMonth, dateInProvidedValueRange, checkIfDateIsDisabled } from "../utils.js";
+import { useClasses } from "./CalendarCell.styles.js";
+import { staticClasses } from "./CalendarCell.styles.js";
+import { HvTypography } from "../../Typography/Typography.js";
+const HvCalendarCell = (props) => {
+  const {
+    classes: classesProp,
+    onChange,
+    onKeyDown,
+    calendarValue,
+    firstDayOfCurrentMonth,
+    value,
+    isDateSelectionMode,
+    today,
+    locale,
+    minimumDate,
+    maximumDate,
+    rangeMode = false,
+    ...others
+  } = useDefaultProps("HvCalendarCell", props);
+  const { classes, cx } = useClasses(classesProp);
+  const buttonEl = useRef(null);
+  const startDate = isDateRangeProp(calendarValue) ? calendarValue.startDate : void 0;
+  const endDate = isDateRangeProp(calendarValue) ? calendarValue.endDate : void 0;
+  const isCellToday = isSameDay(value, today);
+  const isCellSelected = isSameDay(calendarValue, value);
+  const inMonth = isSameMonth(value, firstDayOfCurrentMonth);
+  const isCellAfterStartingDate = rangeMode && value && startDate ? value >= startDate : false;
+  const isCellStartingDate = rangeMode ? isSameDay(value, startDate) : false;
+  const isDateInSelectionRange = calendarValue && rangeMode ? dateInProvidedValueRange(value, calendarValue) : false;
+  const isDateDisabled = checkIfDateIsDisabled(value, minimumDate, maximumDate);
+  const startBookend = isSameDay(startDate, value);
+  const endBookend = isSameDay(endDate, value);
+  const isSelecting = isDateSelectionMode && isCellAfterStartingDate;
+  const handleClick = (event) => {
+    if (value) {
+      onChange?.(event, value);
+      if (buttonEl.current)
+        setTimeout(() => buttonEl?.current?.focus());
+    }
+  };
+  const handleKeyDown = (event) => {
+    onKeyDown?.(event);
+  };
+  const renderDate = () => /* @__PURE__ */ jsx(
+    "button",
+    {
+      ref: buttonEl,
+      type: "button",
+      className: cx(classes.cellContainer, {
+        [classes.focusSelection]: inMonth
+      }),
+      onClick: handleClick,
+      onKeyDown: handleKeyDown,
+      disabled: isDateDisabled || !inMonth,
+      "data-in-month": inMonth,
+      ...others,
+      children: /* @__PURE__ */ jsx(
+        HvTypography,
+        {
+          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 && value.getDate()
+        }
+      )
+    }
+  );
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cx(classes.dateWrapper, {
+        [classes.cellsInRange]: inMonth && rangeMode && isSelecting,
+        [classes.cellsOutsideRange]: rangeMode && !isSelecting
+      }),
+      "data-calendar-cell": "calendarCell",
+      children: renderDate()
+    }
+  );
+};
+export {
+  HvCalendarCell,
+  staticClasses as calendarCellClasses,
+  HvCalendarCell as default
+};
+//# sourceMappingURL=CalendarCell.js.map