@hitachivantara/uikit-react-core 5.44.1 → 5.44.3

package/dist/esm/Controls/RightControl/RightControl.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"RightControl.js","sources":["../../../../src/Controls/RightControl/RightControl.tsx"],"sourcesContent":["import { useContext, useState } from \"react\";\n\nimport { HvBaseProps } from \"../../types/generic\";\nimport { setId } from \"../../utils/setId\";\nimport { HvDropdown, HvDropdownProps } from \"../../Dropdown\";\nimport { HvListValue } from \"../../List\";\nimport { ExtractNames } from \"../../utils/classes\";\n\nimport { useClasses, staticClasses } from \"./RightControl.styles\";\nimport { HvControlsContext } from \"../context/ControlsContext\";\n\nexport { staticClasses as rightControlClasses };\n\nexport type HvRightControlClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvRightListControls extends HvListValue {\n  accessor: string;\n  desc: boolean;\n}\n\nexport interface HvRightControlProps extends HvBaseProps {\n  /** if `true` the hide sort by dropdown is not rendered */\n  hideSortBy?: boolean;\n  /** options for the dropdown to sort */\n  values?: HvRightListControls[];\n  /** Callback called when a sort action occurs */\n  onSort?: (selected: HvRightListControls | undefined) => void;\n  /** Extra props passed to dropdown */\n  sortProps?: HvDropdownProps;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvRightControlClasses;\n}\n\nexport const HvRightControl = ({\n  id,\n  classes: classesProp,\n  className,\n  children,\n  values,\n  onSort,\n  hideSortBy = false,\n  sortProps,\n  ...others\n}: HvRightControlProps) => {\n  const { classes, cx } = useClasses(classesProp);\n\n  const [dropDownValues, setDropdownValues] = useState(values);\n\n  const { onSort: onSortHandler } = useContext(HvControlsContext);\n\n  const handleChangeSort: HvDropdownProps[\"onChange\"] = (value: any) => {\n    onSort?.(value);\n    onSortHandler?.(value);\n    // this should be changed when dropdown changes his \"values\" behavior\n    setDropdownValues((prevValues) =>\n      prevValues?.map((prevValue) => ({\n        ...prevValue,\n        selected: prevValue.id === value.id,\n      }))\n    );\n  };\n\n  return (\n    <div id={id} className={cx(classes.root, className)} {...others}>\n      {!hideSortBy && (\n        <HvDropdown\n          id={setId(id, \"sort-by-dropdown\")}\n          values={dropDownValues}\n          className={classes.sortDropdown}\n          onChange={handleChangeSort}\n          singleSelectionToggle={false}\n          {...sortProps}\n        />\n      )}\n      {children}\n    </div>\n  );\n};\n"],"names":[],"mappings":";;;;;;;AAiCO,MAAM,iBAAiB,CAAC;AAAA,EAC7B;AAAA,EACA,SAAS;AAAA,EACT;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,aAAa;AAAA,EACb;AAAA,EACA,GAAG;AACL,MAA2B;AACzB,QAAM,EAAE,SAAS,GAAG,IAAI,WAAW,WAAW;AAE9C,QAAM,CAAC,gBAAgB,iBAAiB,IAAI,SAAS,MAAM;AAE3D,QAAM,EAAE,QAAQ,cAAc,IAAI,WAAW,iBAAiB;AAExD,QAAA,mBAAgD,CAAC,UAAe;AACpE,aAAS,KAAK;AACd,oBAAgB,KAAK;AAErB;AAAA,MAAkB,CAAC,eACjB,YAAY,IAAI,CAAC,eAAe;AAAA,QAC9B,GAAG;AAAA,QACH,UAAU,UAAU,OAAO,MAAM;AAAA,MAAA,EACjC;AAAA,IAAA;AAAA,EACJ;AAIA,SAAA,qBAAC,OAAI,EAAA,IAAQ,WAAW,GAAG,QAAQ,MAAM,SAAS,GAAI,GAAG,QACtD,UAAA;AAAA,IAAA,CAAC,cACA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,IAAI,MAAM,IAAI,kBAAkB;AAAA,QAChC,QAAQ;AAAA,QACR,WAAW,QAAQ;AAAA,QACnB,UAAU;AAAA,QACV,uBAAuB;AAAA,QACtB,GAAG;AAAA,MAAA;AAAA,IACN;AAAA,IAED;AAAA,EACH,EAAA,CAAA;AAEJ;"}

package/dist/esm/Controls/RightControl/RightControl.styles.js

@@ -0,0 +1,10 @@
+import { createClasses } from "../../utils/classes.js";
+const { staticClasses, useClasses } = createClasses("HvRightControl", {
+  root: { display: "inline-flex", gap: 10 },
+  sortDropdown: { minWidth: 200 }
+});
+export {
+  staticClasses,
+  useClasses
+};
+//# sourceMappingURL=RightControl.styles.js.map

package/dist/esm/Controls/RightControl/RightControl.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"RightControl.styles.js","sources":["../../../../src/Controls/RightControl/RightControl.styles.tsx"],"sourcesContent":["import { createClasses } from \"../../utils/classes\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvRightControl\", {\n  root: { display: \"inline-flex\", gap: 10 },\n  sortDropdown: { minWidth: 200 },\n});\n"],"names":[],"mappings":";AAEO,MAAM,EAAE,eAAe,eAAe,cAAc,kBAAkB;AAAA,EAC3E,MAAM,EAAE,SAAS,eAAe,KAAK,GAAG;AAAA,EACxC,cAAc,EAAE,UAAU,IAAI;AAChC,CAAC;"}

package/dist/esm/Controls/context/ControlsContext.js

@@ -0,0 +1,10 @@
+import React__default from "react";
+const HvControlsContext = React__default.createContext({});
+const HvControlsContextProvider = HvControlsContext.Provider;
+HvControlsContext.Consumer;
+export {
+  HvControlsContext,
+  HvControlsContextProvider,
+  HvControlsContext as default
+};
+//# sourceMappingURL=ControlsContext.js.map

package/dist/esm/Controls/context/ControlsContext.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ControlsContext.js","sources":["../../../../src/Controls/context/ControlsContext.ts"],"sourcesContent":["import React from \"react\";\n\nexport const HvControlsContext = React.createContext<{\n  onSearch?: any;\n  onSort?: any;\n}>({});\n\nexport const HvControlsContextProvider = HvControlsContext.Provider;\nexport const HvControlsContextConsumer = HvControlsContext.Consumer;\nexport default HvControlsContext;\n"],"names":["React"],"mappings":";AAEO,MAAM,oBAAoBA,eAAM,cAGpC,EAAE;AAEE,MAAM,4BAA4B,kBAAkB;AAClB,kBAAkB;"}

package/dist/esm/DatePicker/DatePicker.js

@@ -0,0 +1,367 @@
+import { jsxs, jsx } from "@emotion/react/jsx-runtime";
+import { forwardRef, useRef, useEffect } from "react";
+import { useForkRef } from "@mui/material/utils";
+import { Calendar } from "@hitachivantara/uikit-react-icons";
+import { useDefaultProps } from "../hooks/useDefaultProps.js";
+import { useControlled } from "../hooks/useControlled.js";
+import { useUniqueId } from "../hooks/useUniqueId.js";
+import { useLabels } from "../hooks/useLabels.js";
+import { setId } from "../utils/setId.js";
+import { useSavedState } from "../utils/useSavedState.js";
+import { isDate } from "../Calendar/utils.js";
+import { getDateLabel } from "./utils.js";
+import useVisibleDate from "./useVisibleDate.js";
+import { useClasses } from "./DatePicker.styles.js";
+import { staticClasses } from "./DatePicker.styles.js";
+import { HvCalendar } from "../Calendar/Calendar.js";
+import { HvButton } from "../Button/Button.js";
+import { isInvalid } from "../Forms/FormElement/validationStates.js";
+import { HvFormElement } from "../Forms/FormElement/FormElement.js";
+import { HvLabel } from "../Forms/Label/Label.js";
+import { HvInfoMessage } from "../Forms/InfoMessage/InfoMessage.js";
+import { HvBaseDropdown } from "../BaseDropdown/BaseDropdown.js";
+import { HvWarningText } from "../Forms/WarningText/WarningText.js";
+import { HvActionBar } from "../ActionBar/ActionBar.js";
+import { HvTypography } from "../Typography/Typography.js";
+const DEFAULT_LABELS = {
+  applyLabel: "Apply",
+  cancelLabel: "Cancel",
+  clearLabel: "Clear",
+  invalidLabel: "Invalid date"
+};
+const HvDatePicker = forwardRef(
+  (props, ref) => {
+    const {
+      classes: classesProp,
+      className,
+      id,
+      name,
+      required = false,
+      disabled = false,
+      readOnly,
+      label,
+      "aria-label": ariaLabel,
+      "aria-labelledby": ariaLabelledBy,
+      description,
+      "aria-describedby": ariaDescribedBy,
+      onChange,
+      onCancel,
+      onClear,
+      status,
+      statusMessage,
+      "aria-errormessage": ariaErrorMessage,
+      placeholder,
+      labels: labelsProp,
+      value,
+      startValue,
+      endValue,
+      expanded,
+      defaultExpanded,
+      onToggle,
+      rangeMode = false,
+      startAdornment,
+      horizontalPlacement = "right",
+      locale: localeProp,
+      showActions = false,
+      showClear = false,
+      disablePortal = true,
+      escapeWithReference = true,
+      dropdownProps = {},
+      calendarProps,
+      ...others
+    } = useDefaultProps("HvDatePicker", props);
+    const { classes, cx } = useClasses(classesProp);
+    const labels = useLabels(DEFAULT_LABELS, labelsProp);
+    const elementId = useUniqueId(id, "hvdatepicker");
+    const [validationState, setValidationState] = useControlled(
+      status,
+      "standBy"
+    );
+    const [validationMessage] = useControlled(statusMessage, "Required");
+    const locale = localeProp || "en-US";
+    const [calendarOpen, setCalendarOpen] = useControlled(
+      expanded,
+      Boolean(defaultExpanded)
+    );
+    const [startDate, setStartDate, rollbackStartDate] = useSavedState(
+      rangeMode ? startValue : value
+    );
+    const [endDate, setEndDate, rollbackEndDate] = useSavedState(endValue);
+    const [visibleDate, dispatchAction] = useVisibleDate(startDate, endDate);
+    const focusTarget = useRef(null);
+    const { ref: refProp, ...otherDropdownProps } = dropdownProps;
+    const dropdownForkedRef = useForkRef(ref, refProp);
+    useEffect(() => {
+      setStartDate(rangeMode ? startValue : value, true);
+      setEndDate(endValue, true);
+    }, [value, startValue, endValue, rangeMode, setStartDate, setEndDate]);
+    const endDateIsSet = useRef(false);
+    endDateIsSet.current = endDate != null;
+    useEffect(() => {
+      if (startDate != null) {
+        dispatchAction({
+          type: "month_year",
+          target: endDateIsSet.current ? "left" : "best",
+          year: startDate.getFullYear(),
+          month: startDate.getMonth() + 1
+        });
+      }
+    }, [dispatchAction, startDate]);
+    useEffect(() => {
+      if (endDate != null) {
+        dispatchAction({
+          type: "month_year",
+          target: "right",
+          year: endDate.getFullYear(),
+          month: endDate.getMonth() + 1
+        });
+      }
+    }, [dispatchAction, endDate]);
+    const handleApply = () => {
+      setStartDate(startDate, true);
+      setEndDate(endDate ?? startDate, true);
+      onChange?.(startDate, endDate);
+      setValidationState(() => {
+        if (required && (!isDate(startDate) || rangeMode && !isDate(endDate))) {
+          return "invalid";
+        }
+        return "valid";
+      });
+      setCalendarOpen(false);
+    };
+    const handleCancel = () => {
+      rollbackStartDate();
+      rollbackEndDate();
+      onCancel?.();
+      setCalendarOpen(false);
+    };
+    const handleClear = () => {
+      setStartDate(void 0, false);
+      setEndDate(void 0, false);
+      onClear?.();
+    };
+    const handleCalendarClose = () => {
+      if (rangeMode || showActions) {
+        handleCancel();
+      }
+    };
+    const handleToggle = (evt, open) => {
+      if (evt === null)
+        return;
+      onToggle?.(evt, open);
+      setCalendarOpen(open);
+      if (!open)
+        handleCalendarClose();
+    };
+    const focusOnContainer = () => {
+      focusTarget.current?.focus();
+    };
+    const handleDateChange = (event, newDate) => {
+      if (!isDate(newDate))
+        return;
+      const autoSave = !showActions && !rangeMode;
+      if (rangeMode) {
+        if (!startDate || startDate && endDate || newDate < startDate) {
+          setStartDate(newDate);
+          setEndDate(void 0);
+        } else {
+          setEndDate(newDate);
+        }
+      } else {
+        setStartDate(newDate, autoSave);
+      }
+      if (autoSave) {
+        onChange?.(newDate);
+        setValidationState(() => {
+          if (required && !isDate(newDate)) {
+            return "invalid";
+          }
+          return "valid";
+        });
+        setCalendarOpen(false);
+      }
+    };
+    const handleInputDateChange = (event, newDate, position) => {
+      if (!isDate(newDate))
+        return;
+      if (!rangeMode) {
+        handleDateChange(event, newDate);
+        return;
+      }
+      if (position === "left") {
+        if (endDate)
+          setStartDate(newDate > endDate ? endDate : newDate);
+      } else if (position === "right") {
+        if (!startDate) {
+          if (endDate)
+            setStartDate(newDate > endDate ? endDate : newDate);
+          return;
+        }
+        setEndDate(newDate < startDate ? startDate : newDate);
+      }
+    };
+    const renderActions = () => /* @__PURE__ */ jsxs(HvActionBar, { className: cx({ [classes.actionContainer]: showClear }), children: [
+      showClear && /* @__PURE__ */ jsx("div", { className: classes.leftContainer, children: /* @__PURE__ */ jsx(
+        HvButton,
+        {
+          id: setId(id, "action", "clear"),
+          className: classes.action,
+          variant: "primaryGhost",
+          onClick: handleClear,
+          children: labels?.clearLabel
+        }
+      ) }),
+      /* @__PURE__ */ jsxs("div", { className: classes.rightContainer, children: [
+        /* @__PURE__ */ jsx(
+          HvButton,
+          {
+            id: setId(id, "action", "apply"),
+            className: classes.action,
+            variant: "primaryGhost",
+            onClick: handleApply,
+            children: labels?.applyLabel
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          HvButton,
+          {
+            id: setId(id, "action", "cancel"),
+            className: classes.action,
+            variant: "primaryGhost",
+            onClick: handleCancel,
+            children: labels?.cancelLabel
+          }
+        )
+      ] })
+    ] });
+    const renderInput = (dateString) => {
+      return /* @__PURE__ */ jsx(
+        HvTypography,
+        {
+          className: cx(classes.inputText, { [classes.dateText]: dateString }),
+          variant: "label",
+          children: dateString || placeholder || ""
+        }
+      );
+    };
+    const dateValue = rangeMode ? { startDate, endDate } : startDate;
+    const hasLabel = label != null;
+    const hasDescription = description != null;
+    const canShowError = ariaErrorMessage == null && (status !== void 0 && statusMessage !== void 0 || status === void 0 && required);
+    const isStateInvalid = isInvalid(validationState);
+    let errorMessageId;
+    if (isStateInvalid) {
+      errorMessageId = canShowError ? setId(elementId, "error") : ariaErrorMessage;
+    }
+    return /* @__PURE__ */ jsxs(
+      HvFormElement,
+      {
+        id,
+        name,
+        value: dateValue,
+        status: validationState,
+        disabled,
+        required,
+        className: cx(classes.root, className),
+        readOnly,
+        ...others,
+        children: [
+          (hasLabel || hasDescription) && /* @__PURE__ */ jsxs("div", { className: classes.labelContainer, children: [
+            hasLabel && /* @__PURE__ */ jsx(
+              HvLabel,
+              {
+                id: setId(elementId, "label"),
+                label,
+                className: classes.label
+              }
+            ),
+            hasDescription && /* @__PURE__ */ jsx(
+              HvInfoMessage,
+              {
+                id: setId(elementId, "description"),
+                className: classes.description,
+                children: description
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxs(
+            HvBaseDropdown,
+            {
+              ref: dropdownForkedRef,
+              role: "combobox",
+              classes: {
+                root: classes.dropdown,
+                panel: classes.panel,
+                header: cx({ [classes.dropdownHeaderInvalid]: isStateInvalid }),
+                headerOpen: classes.dropdownHeaderOpen
+              },
+              readOnly,
+              disabled,
+              disablePortal,
+              variableWidth: true,
+              placement: horizontalPlacement,
+              expanded: calendarOpen,
+              onToggle: handleToggle,
+              onClickOutside: handleCalendarClose,
+              onContainerCreation: focusOnContainer,
+              placeholder: renderInput(getDateLabel(dateValue, rangeMode, locale)),
+              adornment: /* @__PURE__ */ jsx(
+                Calendar,
+                {
+                  className: classes.icon,
+                  color: disabled ? "secondary_80" : void 0
+                }
+              ),
+              popperProps: {
+                modifiers: [
+                  { name: "preventOverflow", enabled: escapeWithReference }
+                ]
+              },
+              "aria-haspopup": "dialog",
+              "aria-label": ariaLabel,
+              "aria-labelledby": [label && setId(elementId, "label"), ariaLabelledBy].join(" ").trim() || void 0,
+              "aria-invalid": isStateInvalid ? true : void 0,
+              "aria-errormessage": errorMessageId,
+              "aria-describedby": [description && setId(elementId, "description"), ariaDescribedBy].join(" ").trim() || void 0,
+              ...otherDropdownProps,
+              children: [
+                /* @__PURE__ */ jsx("div", { ref: focusTarget, tabIndex: -1 }),
+                /* @__PURE__ */ jsx(
+                  HvCalendar,
+                  {
+                    id: setId(id, "calendar"),
+                    startAdornment,
+                    onChange: handleDateChange,
+                    onInputChange: handleInputDateChange,
+                    onVisibleDateChange: (_event, type, month, target) => {
+                      dispatchAction({ type, target, month });
+                    },
+                    locale,
+                    ...visibleDate,
+                    ...calendarProps,
+                    invalidDateLabel: labels?.invalidDateLabel
+                  }
+                ),
+                (rangeMode || showActions) && renderActions()
+              ]
+            }
+          ),
+          canShowError && /* @__PURE__ */ jsx(
+            HvWarningText,
+            {
+              id: setId(elementId, "error"),
+              disableBorder: true,
+              className: cx(classes.error),
+              children: validationMessage
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+export {
+  HvDatePicker,
+  staticClasses as datePickerClasses
+};
+//# sourceMappingURL=DatePicker.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"DatePicker.js","sources":["../../../src/DatePicker/DatePicker.tsx"],"sourcesContent":["import { forwardRef, useEffect, useRef } from \"react\";\n\nimport { useForkRef } from \"@mui/material/utils\";\n\nimport { Calendar } from \"@hitachivantara/uikit-react-icons\";\n\nimport { useDefaultProps } from \"../hooks/useDefaultProps\";\nimport { useControlled } from \"../hooks/useControlled\";\nimport { useUniqueId } from \"../hooks/useUniqueId\";\nimport { useLabels } from \"../hooks/useLabels\";\nimport { ExtractNames } from \"../utils/classes\";\nimport { setId } from \"../utils/setId\";\nimport { useSavedState } from \"../utils/useSavedState\";\nimport {\n  isInvalid,\n  HvLabel,\n  HvFormStatus,\n  HvWarningText,\n  HvFormElement,\n  HvInfoMessage,\n  HvFormElementProps,\n} from \"../Forms\";\nimport { isDate } from \"../Calendar/utils\";\nimport { HvCalendar, HvCalendarProps } from \"../Calendar\";\nimport { HvBaseDropdown, HvBaseDropdownProps } from \"../BaseDropdown\";\nimport { HvTypography } from \"../Typography\";\nimport { HvActionBar } from \"../ActionBar\";\nimport { HvButton } from \"../Button\";\n\nimport { getDateLabel } from \"./utils\";\nimport useVisibleDate from \"./useVisibleDate\";\nimport { staticClasses, useClasses } from \"./DatePicker.styles\";\n\nexport { staticClasses as datePickerClasses };\n\nexport type HvDatePickerClasses = ExtractNames<typeof useClasses>;\n\nconst DEFAULT_LABELS = {\n  applyLabel: \"Apply\",\n  cancelLabel: \"Cancel\",\n  clearLabel: \"Clear\",\n  invalidLabel: \"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?: {\n    /**\n     * Apply button label.\n     */\n    applyLabel?: string;\n    /**\n     * Cancel button label.\n     */\n    cancelLabel?: string;\n    /**\n     * Clear button label.\n     */\n    clearLabel?: string;\n    /**\n     * Invalid Date label.\n     */\n    invalidDateLabel?: string;\n  };\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, \"hvdatepicker\");\n\n    const [validationState, setValidationState] = useControlled(\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 renderInput = (dateString: string) => {\n      return (\n        <HvTypography\n          className={cx(classes.inputText, { [classes.dateText]: dateString })}\n          variant=\"label\"\n        >\n          {dateString || placeholder || \"\"}\n        </HvTypography>\n      );\n    };\n    const dateValue = rangeMode ? { startDate, endDate } : startDate;\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          }}\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={renderInput(getDateLabel(dateValue, rangeMode, locale))}\n          adornment={\n            <Calendar\n              className={classes.icon}\n              color={disabled ? \"secondary_80\" : undefined}\n            />\n          }\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

@@ -0,0 +1,53 @@
+import { theme } from "@hitachivantara/uikit-styles";
+import { createClasses } from "../utils/classes.js";
+const { staticClasses, useClasses } = createClasses("HvDatePicker", {
+  root: {
+    position: "relative"
+  },
+  actionContainer: {
+    justifyContent: "space-between"
+  },
+  leftContainer: {},
+  rightContainer: {},
+  labelContainer: {
+    display: "flex",
+    alignItems: "flex-start"
+  },
+  label: {
+    paddingBottom: "6px",
+    display: "block"
+  },
+  description: {},
+  error: {},
+  dropdown: {
+    display: "block"
+  },
+  panel: {},
+  dropdownHeaderInvalid: {
+    border: `1px solid ${theme.colors.negative}`,
+    "&:hover": {
+      border: `1px solid ${theme.colors.negative}`
+    }
+  },
+  dropdownHeaderOpen: {},
+  icon: {},
+  action: {
+    "&:first-of-type": {
+      marginRight: theme.space.xs
+    }
+  },
+  inputText: {
+    color: theme.colors.secondary_80,
+    overflow: "hidden",
+    textOverflow: "ellipsis",
+    whiteSpace: "nowrap"
+  },
+  dateText: {
+    color: theme.colors.secondary
+  }
+});
+export {
+  staticClasses,
+  useClasses
+};
+//# sourceMappingURL=DatePicker.styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"DatePicker.styles.js","sources":["../../../src/DatePicker/DatePicker.styles.tsx"],"sourcesContent":["import { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { createClasses } from \"../utils/classes\";\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    color: theme.colors.secondary_80,\n    overflow: \"hidden\",\n    textOverflow: \"ellipsis\",\n    whiteSpace: \"nowrap\",\n  },\n  dateText: {\n    color: theme.colors.secondary,\n  },\n});\n"],"names":[],"mappings":";;AAIO,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;AAAA,IACT,OAAO,MAAM,OAAO;AAAA,IACpB,UAAU;AAAA,IACV,cAAc;AAAA,IACd,YAAY;AAAA,EACd;AAAA,EACA,UAAU;AAAA,IACR,OAAO,MAAM,OAAO;AAAA,EACtB;AACF,CAAC;"}

package/dist/esm/DatePicker/useVisibleDate.js

@@ -0,0 +1,145 @@
+import { useReducer } from "react";
+import { validateDate } from "./utils.js";
+function stateToLeftRight({
+  visibleYear,
+  visibleMonth,
+  rightVisibleYear,
+  rightVisibleMonth
+}) {
+  return {
+    left: { year: visibleYear, month: visibleMonth },
+    right: { year: rightVisibleYear, month: rightVisibleMonth }
+  };
+}
+function leftRightToState(left, right) {
+  return {
+    visibleYear: left.year,
+    visibleMonth: left.month,
+    rightVisibleYear: right.year,
+    rightVisibleMonth: right.month
+  };
+}
+function subtractYear({ year, month }) {
+  return { year: year - 1, month };
+}
+function addYear({ year, month }) {
+  return { year: year + 1, month };
+}
+function subtractMonth({ year, month }) {
+  let y = year;
+  let m = month;
+  m -= 1;
+  if (m === 0) {
+    y -= 1;
+    m = 12;
+  }
+  return { year: y, month: m };
+}
+function addMonth({ year, month }) {
+  let y = year;
+  let m = month;
+  m += 1;
+  if (m === 13) {
+    y += 1;
+    m = 1;
+  }
+  return { year: y, month: m };
+}
+function ensureNoOverlap(left, right, keepRight = false) {
+  let l = left;
+  let r = right;
+  if (left.year > right.year || left.year === right.year && left.month >= right.month) {
+    if (keepRight) {
+      l = subtractMonth(right);
+    } else {
+      r = addMonth(left);
+    }
+  }
+  return leftRightToState(l, r);
+}
+function isSameYearMonth(d1, d2) {
+  return d1.year === d2.year && d1.month === d2.month;
+}
+const visibleDateReducer = (state, action) => {
+  let { left, right } = stateToLeftRight(state);
+  switch (action.type) {
+    case "previous_year":
+      if (action.target === "right") {
+        right = subtractYear(right);
+        return ensureNoOverlap(left, right, true);
+      }
+      left = subtractYear(left);
+      return ensureNoOverlap(left, right, false);
+    case "next_year":
+      if (action.target === "right") {
+        right = addYear(right);
+        return ensureNoOverlap(left, right, true);
+      }
+      left = addYear(left);
+      return ensureNoOverlap(left, right, false);
+    case "previous_month":
+      if (action.target === "right") {
+        right = subtractMonth(right);
+        return ensureNoOverlap(left, right, true);
+      }
+      left = subtractMonth(left);
+      return ensureNoOverlap(left, right, false);
+    case "next_month":
+      if (action.target === "right") {
+        right = addMonth(right);
+        return ensureNoOverlap(left, right, true);
+      }
+      left = addMonth(left);
+      return ensureNoOverlap(left, right, false);
+    case "month":
+      if (action.month != null) {
+        if (action.target === "right") {
+          if (right.month !== action.month) {
+            right = { year: right.year, month: action.month };
+            return ensureNoOverlap(left, right, true);
+          }
+        } else if (left.month !== action.month) {
+          left = { year: left.year, month: action.month };
+          return ensureNoOverlap(left, right, false);
+        }
+      }
+      break;
+    case "month_year":
+      if (action.month != null && action.year != null) {
+        if (action.target === "right") {
+          if (!isSameYearMonth(left, action) && !isSameYearMonth(right, action)) {
+            right = { year: action.year, month: action.month };
+            return ensureNoOverlap(left, right, true);
+          }
+        } else if (!isSameYearMonth(left, action) && (action.target === "left" || !isSameYearMonth(right, action))) {
+          left = { year: action.year, month: action.month };
+          return ensureNoOverlap(left, right, false);
+        }
+      }
+      break;
+  }
+  return state;
+};
+function stateFromRange(startDate, endDate) {
+  const initialStartDate = validateDate(startDate);
+  const initialEndDate = endDate != null ? validateDate(endDate) : initialStartDate;
+  return ensureNoOverlap(
+    {
+      year: initialStartDate.getFullYear(),
+      month: initialStartDate.getMonth() + 1
+    },
+    { year: initialEndDate.getFullYear(), month: initialEndDate.getMonth() + 1 }
+  );
+}
+function useVisibleDate(startDate, endDate) {
+  return useReducer(
+    visibleDateReducer,
+    { startDate, endDate },
+    (initData) => stateFromRange(initData.startDate, initData.endDate)
+  );
+}
+export {
+  useVisibleDate as default,
+  isSameYearMonth
+};
+//# sourceMappingURL=useVisibleDate.js.map