@hitachivantara/uikit-react-core 5.109.1 → 6.0.0-next.10

package/dist/cjs/DatePicker/DatePicker.cjs

@@ -1,343 +0,0 @@
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const jsxRuntime = require("react/jsx-runtime");
-const React = require("react");
-const utils$1 = require("@mui/material/utils");
-const uikitReactUtils = require("@hitachivantara/uikit-react-utils");
-const utils = require("../Calendar/utils.cjs");
-const LabelContainer = require("../FormElement/LabelContainer.cjs");
-const useControlled = require("../hooks/useControlled.cjs");
-const useLabels = require("../hooks/useLabels.cjs");
-const useUniqueId = require("../hooks/useUniqueId.cjs");
-const icons = require("../icons.cjs");
-const setId = require("../utils/setId.cjs");
-const useSavedState = require("../utils/useSavedState.cjs");
-const DatePicker_styles = require("./DatePicker.styles.cjs");
-const useVisibleDate = require("./useVisibleDate.cjs");
-const utils$2 = require("./utils.cjs");
-const Calendar = require("../Calendar/Calendar.cjs");
-const Button = require("../Button/Button.cjs");
-const FormElement = require("../FormElement/FormElement.cjs");
-const BaseDropdown = require("../BaseDropdown/BaseDropdown.cjs");
-const utils$3 = require("../FormElement/utils.cjs");
-const WarningText = require("../FormElement/WarningText/WarningText.cjs");
-const ActionBar = require("../ActionBar/ActionBar.cjs");
-const DEFAULT_LABELS = {
-  /** Apply button label. */
-  applyLabel: "Apply",
-  /** Cancel button label. */
-  cancelLabel: "Cancel",
-  /** Clear button label. */
-  clearLabel: "Clear",
-  /** Invalid Date label. */
-  invalidDateLabel: "Invalid date"
-};
-const HvDatePicker = React.forwardRef(
-  function HvDatePicker2(props, ref) {
-    const {
-      classes: classesProp,
-      className,
-      id,
-      name,
-      required,
-      disabled,
-      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 = utils.DEFAULT_LOCALE,
-      showActions,
-      showClear,
-      disablePortal = true,
-      escapeWithReference = true,
-      dropdownProps = {},
-      calendarProps,
-      ...others
-    } = uikitReactUtils.useDefaultProps("HvDatePicker", props);
-    const { classes, cx } = DatePicker_styles.useClasses(classesProp);
-    const labels = useLabels.useLabels(DEFAULT_LABELS, labelsProp);
-    const elementId = useUniqueId.useUniqueId(id);
-    const [validationState, setValidationState] = useControlled.useControlled(
-      status,
-      "standBy"
-    );
-    const [validationMessage] = useControlled.useControlled(statusMessage, "Required");
-    const [calendarOpen, setCalendarOpen] = useControlled.useControlled(
-      expanded,
-      Boolean(defaultExpanded)
-    );
-    const [startDate, setStartDate, rollbackStartDate] = useSavedState.useSavedState(
-      rangeMode ? startValue : value
-    );
-    const [endDate, setEndDate, rollbackEndDate] = useSavedState.useSavedState(endValue);
-    const [visibleDate, dispatchAction] = useVisibleDate.default(startDate, endDate);
-    const focusTarget = React.useRef(null);
-    const { ref: refProp, ...otherDropdownProps } = dropdownProps;
-    const dropdownForkedRef = utils$1.useForkRef(ref, refProp);
-    React.useEffect(() => {
-      setStartDate(rangeMode ? startValue : value, true);
-      setEndDate(endValue, true);
-    }, [value, startValue, endValue, rangeMode, setStartDate, setEndDate]);
-    const endDateIsSet = React.useRef(false);
-    endDateIsSet.current = endDate != null;
-    React.useEffect(() => {
-      if (startDate != null) {
-        dispatchAction({
-          type: "month_year",
-          target: endDateIsSet.current ? "left" : "best",
-          year: startDate.getFullYear(),
-          month: startDate.getMonth() + 1
-        });
-      }
-    }, [dispatchAction, startDate]);
-    React.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 && (!utils.isDate(startDate) || rangeMode && !utils.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 (!utils.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 && !utils.isDate(newDate)) {
-            return "invalid";
-          }
-          return "valid";
-        });
-        setCalendarOpen(false);
-      }
-    };
-    const handleInputDateChange = (event, newDate, position) => {
-      if (!utils.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__ */ jsxRuntime.jsxs(ActionBar.HvActionBar, { className: cx({ [classes.actionContainer]: showClear }), children: [
-      showClear && /* @__PURE__ */ jsxRuntime.jsx("div", { className: classes.leftContainer, children: /* @__PURE__ */ jsxRuntime.jsx(
-        Button.HvButton,
-        {
-          id: setId.setId(id, "action", "clear"),
-          className: classes.action,
-          variant: "primaryGhost",
-          onClick: handleClear,
-          children: labels?.clearLabel
-        }
-      ) }),
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: classes.rightContainer, children: [
-        /* @__PURE__ */ jsxRuntime.jsx(
-          Button.HvButton,
-          {
-            id: setId.setId(id, "action", "apply"),
-            className: classes.action,
-            variant: "primaryGhost",
-            onClick: handleApply,
-            children: labels?.applyLabel
-          }
-        ),
-        /* @__PURE__ */ jsxRuntime.jsx(
-          Button.HvButton,
-          {
-            id: setId.setId(id, "action", "cancel"),
-            className: classes.action,
-            variant: "primaryGhost",
-            onClick: handleCancel,
-            children: labels?.cancelLabel
-          }
-        )
-      ] })
-    ] });
-    const dateValue = rangeMode ? { startDate, endDate } : startDate;
-    const dateString = utils$2.getDateLabel(dateValue, rangeMode, locale);
-    const canShowError = ariaErrorMessage == null && (status !== void 0 && statusMessage !== void 0 || status === void 0 && required);
-    const isStateInvalid = utils$3.isInvalid(validationState);
-    let errorMessageId;
-    if (isStateInvalid) {
-      errorMessageId = canShowError ? setId.setId(elementId, "error") : ariaErrorMessage;
-    }
-    return /* @__PURE__ */ jsxRuntime.jsxs(
-      FormElement.HvFormElement,
-      {
-        id,
-        name,
-        value: dateValue,
-        status: validationState,
-        disabled,
-        required,
-        className: cx(classes.root, className),
-        readOnly,
-        ...others,
-        children: [
-          /* @__PURE__ */ jsxRuntime.jsx(
-            LabelContainer.HvLabelContainer,
-            {
-              label,
-              description,
-              labelId: setId.setId(elementId, "label"),
-              descriptionId: setId.setId(elementId, "description"),
-              classes: {
-                root: classes.labelContainer,
-                label: classes.label,
-                description: classes.description
-              }
-            }
-          ),
-          /* @__PURE__ */ jsxRuntime.jsxs(
-            BaseDropdown.HvBaseDropdown,
-            {
-              ref: dropdownForkedRef,
-              role: "combobox",
-              classes: {
-                root: classes.dropdown,
-                panel: classes.panel,
-                header: cx({ [classes.dropdownHeaderInvalid]: isStateInvalid }),
-                headerOpen: classes.dropdownHeaderOpen,
-                placeholder: cx(classes.inputText, {
-                  [classes.dateText]: dateString
-                }),
-                container: classes.container
-              },
-              readOnly,
-              disabled,
-              disablePortal,
-              variableWidth: true,
-              placement: horizontalPlacement,
-              expanded: calendarOpen,
-              onToggle: handleToggle,
-              onClickOutside: handleCalendarClose,
-              onContainerCreation: focusOnContainer,
-              placeholder: dateString || placeholder || "",
-              adornment: /* @__PURE__ */ jsxRuntime.jsx(icons.HvIcon, { name: "Calendar", className: classes.icon }),
-              popperProps: {
-                modifiers: [
-                  { name: "preventOverflow", enabled: escapeWithReference }
-                ]
-              },
-              "aria-haspopup": "dialog",
-              "aria-label": ariaLabel,
-              "aria-labelledby": [label && setId.setId(elementId, "label"), ariaLabelledBy].join(" ").trim() || void 0,
-              "aria-invalid": isStateInvalid ? true : void 0,
-              "aria-errormessage": errorMessageId,
-              "aria-describedby": [description && setId.setId(elementId, "description"), ariaDescribedBy].join(" ").trim() || void 0,
-              ...otherDropdownProps,
-              children: [
-                /* @__PURE__ */ jsxRuntime.jsx("div", { ref: focusTarget, tabIndex: -1 }),
-                /* @__PURE__ */ jsxRuntime.jsx(
-                  Calendar.HvCalendar,
-                  {
-                    id: setId.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__ */ jsxRuntime.jsx(
-            WarningText.HvWarningText,
-            {
-              id: setId.setId(elementId, "error"),
-              disableBorder: true,
-              className: cx(classes.error),
-              children: validationMessage
-            }
-          )
-        ]
-      }
-    );
-  }
-);
-exports.datePickerClasses = DatePicker_styles.staticClasses;
-exports.HvDatePicker = HvDatePicker;

package/dist/cjs/DatePicker/DatePicker.styles.cjs

@@ -1,42 +0,0 @@
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const uikitReactUtils = require("@hitachivantara/uikit-react-utils");
-const uikitStyles = require("@hitachivantara/uikit-styles");
-const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvDatePicker", {
-  root: {
-    position: "relative"
-  },
-  actionContainer: {
-    justifyContent: "space-between"
-  },
-  leftContainer: {},
-  rightContainer: {},
-  labelContainer: {},
-  label: {},
-  description: {},
-  error: {},
-  dropdown: {
-    display: "block"
-  },
-  panel: {},
-  dropdownHeaderInvalid: {
-    "&,:hover": {
-      borderColor: uikitStyles.theme.form.errorColor
-    }
-  },
-  dropdownHeaderOpen: {},
-  icon: {},
-  action: {
-    "&:first-of-type": {
-      marginRight: uikitStyles.theme.space.xs
-    }
-  },
-  inputText: {},
-  dateText: {
-    color: "inherit",
-    fontWeight: uikitStyles.theme.typography.label.fontWeight
-  },
-  container: {}
-});
-exports.staticClasses = staticClasses;
-exports.useClasses = useClasses;

package/dist/cjs/DatePicker/useVisibleDate.cjs

@@ -1,147 +0,0 @@
-"use strict";
-Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
-const React = require("react");
-const utils = require("./utils.cjs");
-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 = utils.validateDate(startDate);
-  const initialEndDate = endDate != null ? utils.validateDate(endDate) : initialStartDate;
-  return ensureNoOverlap(
-    {
-      year: initialStartDate.getFullYear(),
-      month: initialStartDate.getMonth() + 1
-    },
-    {
-      year: initialEndDate.getFullYear(),
-      month: initialEndDate.getMonth() + 1
-    }
-  );
-}
-function useVisibleDate(startDate, endDate) {
-  return React.useReducer(
-    visibleDateReducer,
-    { startDate, endDate },
-    (initData) => stateFromRange(initData.startDate, initData.endDate)
-  );
-}
-exports.default = useVisibleDate;
-exports.isSameYearMonth = isSameYearMonth;

package/dist/cjs/DatePicker/utils.cjs

@@ -1,28 +0,0 @@
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const utils = require("../Calendar/utils.cjs");
-const validateDate = (date) => utils.isDate(date) && date || /* @__PURE__ */ new Date();
-const getFormattedDateRange = (date, locale) => {
-  const { startDate, endDate } = date;
-  const monthYear = `${utils.getMonthName(
-    startDate,
-    locale,
-    "short"
-  )} ${startDate.getFullYear()}`;
-  return `${startDate.getDate()} - ${endDate?.getDate()} ${monthYear}`;
-};
-const getSingleDateLabel = (date, locale) => utils.isDate(date) ? utils.getFormattedDate(date, locale) : "";
-const getRangeDateLabel = ({ startDate, endDate }, locale) => {
-  if (!(utils.isDate(startDate) && utils.isDate(endDate)))
-    return getSingleDateLabel(startDate);
-  return utils.isSameMonth(startDate, endDate) ? getFormattedDateRange({ startDate, endDate }, locale) : `${utils.getFormattedDate(startDate, locale)} - ${utils.getFormattedDate(
-    endDate,
-    locale
-  )}`;
-};
-const getDateLabel = (date, rangeMode, locale) => rangeMode ? getRangeDateLabel(date, locale) : getSingleDateLabel(date, locale);
-exports.getDateLabel = getDateLabel;
-exports.getFormattedDateRange = getFormattedDateRange;
-exports.getRangeDateLabel = getRangeDateLabel;
-exports.getSingleDateLabel = getSingleDateLabel;
-exports.validateDate = validateDate;

package/dist/cjs/Dialog/Actions/Actions.cjs

@@ -1,35 +0,0 @@
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const jsxRuntime = require("react/jsx-runtime");
-const MuiDialogActions = require("@mui/material/DialogActions");
-const uikitReactUtils = require("@hitachivantara/uikit-react-utils");
-const context = require("../context.cjs");
-const Actions_styles = require("./Actions.styles.cjs");
-const _interopDefault = (e) => e && e.__esModule ? e : { default: e };
-const MuiDialogActions__default = /* @__PURE__ */ _interopDefault(MuiDialogActions);
-const HvDialogActions = (props) => {
-  const {
-    classes: classesProp,
-    className,
-    children,
-    fullscreen: fullScreenProp,
-    ...others
-  } = uikitReactUtils.useDefaultProps("HvDialogActions", props);
-  const context$1 = context.useDialogContext();
-  const fullScreen = fullScreenProp ?? context$1.fullScreen;
-  const { classes, cx } = Actions_styles.useClasses(classesProp);
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    MuiDialogActions__default.default,
-    {
-      className,
-      classes: {
-        root: cx(classes.root, { [classes.fullscreen]: fullScreen }),
-        spacing: classes.spacing
-      },
-      ...others,
-      children
-    }
-  );
-};
-exports.dialogActionClasses = Actions_styles.staticClasses;
-exports.HvDialogActions = HvDialogActions;

package/dist/cjs/Dialog/Actions/Actions.styles.cjs

@@ -1,22 +0,0 @@
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const uikitReactUtils = require("@hitachivantara/uikit-react-utils");
-const uikitStyles = require("@hitachivantara/uikit-styles");
-const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvDialog-Action", {
-  root: {
-    margin: 0,
-    padding: uikitStyles.theme.space.sm,
-    backgroundColor: "inherit",
-    borderTop: `1px solid ${uikitStyles.theme.colors.border}`,
-    height: 65,
-    maxHeight: 65
-  },
-  fullscreen: { position: "fixed", width: "100%", bottom: 0, left: 0 },
-  spacing: {
-    "& > :not(:first-of-type)": {
-      marginLeft: uikitStyles.theme.space.xs
-    }
-  }
-});
-exports.staticClasses = staticClasses;
-exports.useClasses = useClasses;

package/dist/cjs/Dialog/Content/Content.cjs

@@ -1,60 +0,0 @@
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const jsxRuntime = require("react/jsx-runtime");
-const React = require("react");
-const MuiDialogContent = require("@mui/material/DialogContent");
-const uikitReactUtils = require("@hitachivantara/uikit-react-utils");
-const Content_styles = require("./Content.styles.cjs");
-const Typography = require("../../Typography/Typography.cjs");
-const _interopDefault = (e) => e && e.__esModule ? e : { default: e };
-const MuiDialogContent__default = /* @__PURE__ */ _interopDefault(MuiDialogContent);
-const HvDialogContent = (props) => {
-  const {
-    classes: classesProp,
-    className,
-    children,
-    indentContent = false,
-    style,
-    ...others
-  } = uikitReactUtils.useDefaultProps("HvDialogContent", props);
-  const { classes, cx } = Content_styles.useClasses(classesProp);
-  const [hasBorder, setHasBorder] = React.useState(false);
-  const elRef = React.useRef(null);
-  React.useEffect(() => {
-    if (typeof ResizeObserver !== "undefined") {
-      const resizeObserver = new ResizeObserver(() => {
-        const el = elRef.current;
-        if (el) {
-          const hasOverflow = el.scrollHeight > el.clientHeight;
-          setHasBorder(hasOverflow);
-        }
-      });
-      if (elRef.current) {
-        resizeObserver.observe(elRef.current);
-      }
-      return () => {
-        resizeObserver.disconnect();
-      };
-    }
-    return void 0;
-  }, []);
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    Typography.HvTypography,
-    {
-      ref: elRef,
-      component: MuiDialogContent__default.default,
-      className: cx(
-        classes.root,
-        { [classes.textContent]: !!indentContent },
-        className
-      ),
-      style: uikitReactUtils.mergeStyles(style, {
-        "--borderW": hasBorder ? "1px" : "0px"
-      }),
-      ...others,
-      children
-    }
-  );
-};
-exports.dialogContentClasses = Content_styles.staticClasses;
-exports.HvDialogContent = HvDialogContent;