@hitachivantara/uikit-react-core 5.106.0 → 6.0.0-next.1

package/dist/cjs/TimePicker/TimePicker.cjs

@@ -1,217 +0,0 @@
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const jsxRuntime = require("react/jsx-runtime");
-const React = require("react");
-const date = require("@internationalized/date");
-const utils$1 = require("@mui/material/utils");
-const datepicker$1 = require("@react-aria/datepicker");
-const datepicker = require("@react-stately/datepicker");
-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 useUniqueId = require("../hooks/useUniqueId.cjs");
-const icons = require("../icons.cjs");
-const setId = require("../utils/setId.cjs");
-const Placeholder = require("./Placeholder.cjs");
-const TimePicker_styles = require("./TimePicker.styles.cjs");
-const Unit = require("./Unit/Unit.cjs");
-const FormElement = require("../FormElement/FormElement.cjs");
-const BaseDropdown = require("../BaseDropdown/BaseDropdown.cjs");
-const WarningText = require("../FormElement/WarningText/WarningText.cjs");
-const toTime = (value) => {
-  if (!value) return value;
-  const { hours, minutes, seconds } = value;
-  return new date.Time(hours, minutes, seconds);
-};
-const HvTimePicker = React.forwardRef(
-  function HvTimePicker2(props, ref) {
-    const {
-      classes: classesProp,
-      className,
-      id: idProp,
-      name,
-      required,
-      disabled,
-      readOnly,
-      label,
-      "aria-label": ariaLabel,
-      "aria-labelledby": ariaLabelledBy,
-      description,
-      "aria-describedby": ariaDescribedBy,
-      status,
-      statusMessage,
-      "aria-errormessage": ariaErrorMessage,
-      placeholder,
-      hoursPlaceholder = "hh",
-      minutesPlaceholder = "mm",
-      secondsPlaceholder = "ss",
-      value: valueProp,
-      defaultValue: defaultValueProp,
-      timeFormat,
-      showSeconds,
-      disableExpand,
-      locale = utils.DEFAULT_LOCALE,
-      onToggle,
-      onChange,
-      // misc properties:
-      disablePortal = true,
-      escapeWithReference = true,
-      dropdownProps = {},
-      ...others
-    } = uikitReactUtils.useDefaultProps("HvTimePicker", props);
-    const id = useUniqueId.useUniqueId(idProp);
-    const { classes, cx } = TimePicker_styles.useClasses(classesProp);
-    const timeFieldRef = React.useRef(null);
-    const { ref: refProp, ...otherDropdownProps } = dropdownProps;
-    const dropdownForkedRef = utils$1.useForkRef(ref, refProp);
-    const stateProps = {
-      value: toTime(valueProp),
-      defaultValue: toTime(defaultValueProp),
-      label,
-      locale,
-      isRequired: required,
-      isReadOnly: readOnly,
-      isDisabled: disabled,
-      granularity: showSeconds === false ? "minute" : "second",
-      hourCycle: timeFormat === "12" ? 12 : 24,
-      onChange: (value) => {
-        if (!value) return;
-        const { hour: hours, minute: minutes, second: seconds } = value;
-        onChange?.({ hours, minutes, seconds });
-      }
-    };
-    const state = datepicker.useTimeFieldState(stateProps);
-    const { labelProps, fieldProps, descriptionProps } = datepicker$1.useTimeField(
-      {
-        ...stateProps,
-        id,
-        "aria-label": ariaLabel,
-        "aria-labelledby": ariaLabelledBy,
-        "aria-describedby": ariaDescribedBy
-      },
-      state,
-      timeFieldRef
-    );
-    const [open, setOpen] = React.useState(false);
-    const [validationMessage] = useControlled.useControlled(statusMessage, "Required");
-    const [validationState] = useControlled.useControlled(status, "standBy");
-    const placeholders = React.useMemo(
-      () => ({
-        hour: hoursPlaceholder,
-        minute: minutesPlaceholder,
-        second: secondsPlaceholder
-      }),
-      [hoursPlaceholder, minutesPlaceholder, secondsPlaceholder]
-    );
-    const canShowError = ariaErrorMessage == null && (status !== void 0 && statusMessage !== void 0 || status === void 0 && required);
-    const isStateInvalid = validationState === "invalid";
-    const errorMessageId = isStateInvalid ? canShowError ? setId.setId(id, "error") : ariaErrorMessage : void 0;
-    return /* @__PURE__ */ jsxRuntime.jsxs(
-      FormElement.HvFormElement,
-      {
-        name,
-        required,
-        disabled,
-        status: validationState,
-        className: cx(classes.root, className),
-        ...others,
-        children: [
-          /* @__PURE__ */ jsxRuntime.jsx(
-            LabelContainer.HvLabelContainer,
-            {
-              label,
-              description,
-              classes: {
-                root: classes.labelContainer,
-                label: classes.label,
-                description: classes.description
-              },
-              labelProps,
-              descriptionProps
-            }
-          ),
-          /* @__PURE__ */ jsxRuntime.jsx(
-            BaseDropdown.HvBaseDropdown,
-            {
-              ref: dropdownForkedRef,
-              role: "combobox",
-              variableWidth: true,
-              disabled,
-              readOnly,
-              placeholder: placeholder && !state.value ? placeholder : /* @__PURE__ */ jsxRuntime.jsx(
-                Placeholder.Placeholder,
-                {
-                  ref: timeFieldRef,
-                  name,
-                  state,
-                  placeholders,
-                  className: cx(classes.placeholder, {
-                    [classes.placeholderDisabled]: disabled
-                  }),
-                  ...fieldProps
-                }
-              ),
-              classes: {
-                header: cx(classes.dropdownHeader, {
-                  [classes.dropdownHeaderInvalid]: isStateInvalid
-                }),
-                panel: classes.dropdownPanel,
-                headerOpen: classes.dropdownHeaderOpen
-              },
-              placement: "right",
-              adornment: /* @__PURE__ */ jsxRuntime.jsx(icons.HvIcon, { name: "Time", className: classes.icon }),
-              expanded: open,
-              onToggle: (evt, newOpen) => {
-                if (disableExpand) return;
-                setOpen(newOpen);
-                onToggle?.(evt, newOpen);
-              },
-              onContainerCreation: (containerRef) => {
-                containerRef?.getElementsByTagName("input")[0]?.focus();
-              },
-              "aria-haspopup": "dialog",
-              "aria-label": ariaLabel,
-              "aria-labelledby": fieldProps["aria-labelledby"],
-              "aria-describedby": fieldProps["aria-describedby"],
-              "aria-invalid": isStateInvalid ? true : void 0,
-              "aria-errormessage": errorMessageId,
-              disablePortal,
-              popperProps: {
-                modifiers: [
-                  { name: "preventOverflow", enabled: escapeWithReference }
-                ]
-              },
-              ...otherDropdownProps,
-              children: /* @__PURE__ */ jsxRuntime.jsx("div", { ref: timeFieldRef, className: classes.timePopperContainer, children: state.segments.map((segment) => /* @__PURE__ */ jsxRuntime.jsx(
-                Unit.Unit,
-                {
-                  state,
-                  segment,
-                  placeholder: placeholders[segment.type],
-                  onAdd: () => state.increment(segment.type),
-                  onSub: () => state.decrement(segment.type),
-                  onChange: (evt, val) => {
-                    state.setSegment(segment.type, Number(val));
-                  }
-                },
-                segment.type
-              )) })
-            }
-          ),
-          canShowError && /* @__PURE__ */ jsxRuntime.jsx(
-            WarningText.HvWarningText,
-            {
-              id: setId.setId(id, "error"),
-              disableBorder: true,
-              className: classes.error,
-              children: validationMessage
-            }
-          )
-        ]
-      }
-    );
-  }
-);
-exports.timePickerClasses = TimePicker_styles.staticClasses;
-exports.HvTimePicker = HvTimePicker;

package/dist/cjs/TimePicker/TimePicker.styles.cjs

@@ -1,41 +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 { useClasses, staticClasses } = uikitReactUtils.createClasses("HvTimePicker", {
-  root: {
-    position: "relative"
-  },
-  labelContainer: {},
-  label: {},
-  description: {},
-  placeholder: {
-    display: "flex",
-    gap: 1
-  },
-  placeholderDisabled: {
-    color: uikitStyles.theme.colors.textDisabled
-  },
-  dropdownHeader: {},
-  dropdownHeaderOpen: {},
-  dropdownHeaderInvalid: {
-    "&,:hover": {
-      borderColor: uikitStyles.theme.form.errorColor
-    }
-  },
-  dropdownPanel: {},
-  icon: {},
-  timePopperContainer: {
-    zIndex: 10,
-    display: "flex",
-    flexDirection: "row",
-    justifyContent: "center",
-    alignItems: "center",
-    padding: uikitStyles.theme.spacing("xs", 0),
-    userSelect: "none",
-    minWidth: "175px"
-  },
-  error: {}
-});
-exports.staticClasses = staticClasses;
-exports.useClasses = useClasses;

package/dist/cjs/TimePicker/Unit/Unit.cjs

@@ -1,53 +0,0 @@
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const jsxRuntime = require("react/jsx-runtime");
-const uikitStyles = require("@hitachivantara/uikit-styles");
-const icons = require("../../icons.cjs");
-const Unit_styles = require("./Unit.styles.cjs");
-const Button = require("../../Button/Button.cjs");
-const BaseInput = require("../../BaseInput/BaseInput.cjs");
-const Unit = ({
-  id,
-  state,
-  segment,
-  placeholder: placeholderProp,
-  onChange,
-  onAdd,
-  onSub
-}) => {
-  const { classes } = Unit_styles.useClasses();
-  const { type, text } = segment;
-  const placeholder = placeholderProp ?? segment.placeholder;
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: classes.root, children: [
-    type !== "literal" && /* @__PURE__ */ jsxRuntime.jsx(icons.HvIcon, { name: "CaretDown", size: "xs", rotate: true, onClick: onAdd }),
-    type === "literal" && /* @__PURE__ */ jsxRuntime.jsx("div", { className: classes.separator, children: text }),
-    type === "dayPeriod" && /* @__PURE__ */ jsxRuntime.jsx(Button.HvButton, { icon: true, className: classes.periodToggle, onClick: onAdd, children: text }),
-    ["hour", "minute", "second"].includes(type) && /* @__PURE__ */ jsxRuntime.jsx(
-      BaseInput.HvBaseInput,
-      {
-        id,
-        style: {
-          ...uikitStyles.theme.typography.title3
-        },
-        classes: {
-          input: classes.input,
-          root: classes.inputRoot
-        },
-        onKeyDown: (event) => {
-          if ("key" in event && event.key === "Enter") {
-            event.preventDefault();
-            event.stopPropagation();
-          }
-        },
-        required: true,
-        invalid: state.isInvalid,
-        value: text.padStart(2, "0"),
-        onChange,
-        placeholder,
-        inputProps: { autoComplete: "off", type: "number" }
-      }
-    ),
-    type !== "literal" && /* @__PURE__ */ jsxRuntime.jsx(icons.HvIcon, { name: "CaretDown", size: "xs", onClick: onSub })
-  ] });
-};
-exports.Unit = Unit;

package/dist/cjs/TimePicker/Unit/Unit.styles.cjs

@@ -1,48 +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("HvTimePickerUnit", {
-  root: {
-    display: "flex",
-    flexDirection: "column",
-    justifyContent: "center",
-    alignItems: "center",
-    textAlign: "center",
-    ...uikitStyles.theme.typography.title3
-  },
-  separator: {
-    width: 8
-  },
-  periodToggle: {
-    height: 40,
-    width: 40
-  },
-  element: {
-    display: "flex",
-    justifyContent: "center",
-    alignItems: "center",
-    height: 40,
-    width: 40
-  },
-  input: {
-    ...uikitStyles.theme.typography.title3,
-    fontWeight: 600,
-    textAlign: "center",
-    padding: 0,
-    margin: 0,
-    "&::placeholder": {
-      fontSize: 16,
-      fontWeight: 600
-    }
-  },
-  inputRoot: {
-    width: 40,
-    height: 40
-  },
-  subtractIcon: {
-    marginTop: uikitStyles.theme.space.xs
-  }
-});
-exports.staticClasses = staticClasses;
-exports.useClasses = useClasses;

package/dist/cjs/ToggleButton/ToggleButton.cjs

@@ -1,37 +0,0 @@
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const jsxRuntime = require("react/jsx-runtime");
-const React = require("react");
-const uikitReactUtils = require("@hitachivantara/uikit-react-utils");
-const useControlled = require("../hooks/useControlled.cjs");
-const Button = require("../Button/Button.cjs");
-const HvToggleButton = React.forwardRef(function HvToggleButton2(props, ref) {
-  const {
-    defaultSelected,
-    selected,
-    notSelectedIcon,
-    selectedIcon = null,
-    onClick,
-    children,
-    ...others
-  } = uikitReactUtils.useDefaultProps("HvToggleButton", props);
-  const [isSelected, setIsSelected] = useControlled.useControlled(
-    selected,
-    Boolean(defaultSelected)
-  );
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    Button.HvButton,
-    {
-      ref,
-      icon: true,
-      selected: isSelected,
-      onClick: (event) => {
-        setIsSelected(!isSelected);
-        onClick?.(event, !isSelected);
-      },
-      ...others,
-      children: children || (!isSelected ? notSelectedIcon : selectedIcon)
-    }
-  );
-});
-exports.HvToggleButton = HvToggleButton;

package/dist/cjs/Tooltip/Tooltip.cjs

@@ -1,58 +0,0 @@
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const jsxRuntime = require("react/jsx-runtime");
-const React = require("react");
-const Fade = require("@mui/material/Fade");
-const Tooltip = require("@mui/material/Tooltip");
-const uikitReactUtils = require("@hitachivantara/uikit-react-utils");
-const document = require("../utils/document.cjs");
-const Tooltip_styles = require("./Tooltip.styles.cjs");
-const _interopDefault = (e) => e && e.__esModule ? e : { default: e };
-const Fade__default = /* @__PURE__ */ _interopDefault(Fade);
-const Tooltip__default = /* @__PURE__ */ _interopDefault(Tooltip);
-const HvTooltip = React.forwardRef(function HvTooltip2(props, ref) {
-  const {
-    className,
-    classes: classesProp,
-    open,
-    enterDelay = 300,
-    placement = "top",
-    useSingle = true,
-    children,
-    title,
-    TransitionComponent = Fade__default.default,
-    TransitionProps = { timeout: 400, placement: "top" },
-    containerId,
-    ...others
-  } = uikitReactUtils.useDefaultProps("HvTooltip", props);
-  const { rootId } = uikitReactUtils.useTheme();
-  const { classes } = Tooltip_styles.useClasses(classesProp);
-  const [container, setContainer] = React.useState(
-    () => document.getElementById(containerId ?? rootId)
-  );
-  React.useEffect(() => {
-    setContainer(document.getElementById(containerId ?? rootId));
-  }, [containerId, rootId]);
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    Tooltip__default.default,
-    {
-      ref,
-      open,
-      enterDelay,
-      placement,
-      TransitionComponent,
-      TransitionProps,
-      className,
-      classes: {
-        tooltip: useSingle ? classes.tooltip : classes.tooltipMulti,
-        popper: classes.popper
-      },
-      title,
-      PopperProps: { container },
-      ...others,
-      children
-    }
-  );
-});
-exports.tooltipClasses = Tooltip_styles.staticClasses;
-exports.HvTooltip = HvTooltip;

package/dist/cjs/Tooltip/Tooltip.styles.cjs

@@ -1,81 +0,0 @@
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const Tooltip = require("@mui/material/Tooltip");
-const uikitReactUtils = require("@hitachivantara/uikit-react-utils");
-const uikitStyles = require("@hitachivantara/uikit-styles");
-const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvTooltip", {
-  root: {},
-  tooltip: {},
-  popper: {
-    // TODO: move this to `tooltip` in v6 and make class always be applied
-    [`& .${Tooltip.tooltipClasses.tooltip}`]: {
-      ...uikitStyles.theme.typography.body,
-      display: "flex",
-      width: "fit-content",
-      maxWidth: 532,
-      backgroundColor: uikitStyles.theme.colors.bgContainer,
-      boxShadow: uikitStyles.theme.colors.shadow,
-      padding: 0,
-      "& p": {
-        display: "-webkit-box",
-        width: "fit-content",
-        boxOrient: "vertical",
-        textOverflow: "ellipsis",
-        overflow: "hidden"
-      }
-    },
-    "& $title": {
-      padding: "15px 20px",
-      borderBottom: `3px solid ${uikitStyles.theme.colors.borderSubtle}`
-    },
-    "& $valuesContainer": {
-      padding: uikitStyles.theme.space.sm
-    },
-    "& $values": {
-      display: "flex",
-      justifyContent: "space-between",
-      paddingBottom: "10px",
-      "&:last-child": {
-        paddingBottom: 0
-      }
-    },
-    "& $color": {
-      width: uikitStyles.theme.space.xs
-    },
-    "& $separator": {
-      width: uikitStyles.theme.space.xs
-    },
-    "& $separatorColor": {
-      width: "5px"
-    },
-    "& $valueWrapper": {
-      padding: uikitStyles.theme.space.sm
-    },
-    "& $tooltip": {
-      padding: uikitStyles.theme.space.sm,
-      borderRadius: uikitStyles.theme.radii.round,
-      "& p": {
-        wordBreak: "break-word"
-      }
-    }
-  },
-  // TODO: remove in v6
-  /** @deprecated */
-  tooltipMulti: {},
-  /** @deprecated */
-  title: {},
-  /** @deprecated */
-  valuesContainer: {},
-  /** @deprecated */
-  values: {},
-  /** @deprecated */
-  color: {},
-  /** @deprecated */
-  separatorColor: {},
-  /** @deprecated */
-  separator: {},
-  /** @deprecated */
-  valueWrapper: {}
-});
-exports.staticClasses = staticClasses;
-exports.useClasses = useClasses;

package/dist/cjs/TreeView/TreeItem/DefaultContent.cjs

@@ -1,74 +0,0 @@
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const jsxRuntime = require("react/jsx-runtime");
-const React = require("react");
-const uikitReactUtils = require("@hitachivantara/uikit-react-utils");
-const useHvTreeItem = require("./useHvTreeItem.cjs");
-const { useClasses } = uikitReactUtils.createClasses("HvTreeContent", {
-  root: {},
-  expanded: {},
-  selected: {},
-  focused: {},
-  disabled: {},
-  iconContainer: {},
-  label: {}
-});
-const DefaultContent = React.forwardRef(
-  function DefaultContent2(props, ref) {
-    const {
-      classes: classesProp,
-      className,
-      displayIcon,
-      expansionIcon,
-      icon: iconProp,
-      label,
-      nodeId,
-      onClick,
-      onMouseDown,
-      ...others
-    } = props;
-    const { classes } = useClasses(classesProp);
-    const { cx } = uikitReactUtils.useCss();
-    const {
-      disabled,
-      expanded,
-      selected,
-      focused,
-      handleExpansion,
-      handleSelection,
-      preventSelection
-    } = useHvTreeItem.useHvTreeItem(nodeId);
-    const icon = iconProp ?? expansionIcon ?? displayIcon;
-    return (
-      /* eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions -- Key event is handled by the TreeView */
-      /* @__PURE__ */ jsxRuntime.jsxs(
-        "div",
-        {
-          ...others,
-          className: cx(className, classes.root, {
-            [classes.expanded]: expanded,
-            [classes.selected]: selected,
-            [classes.focused]: focused,
-            [classes.disabled]: disabled
-          }),
-          onClick: (event) => {
-            handleExpansion(event);
-            handleSelection(event);
-            onClick?.(event);
-          },
-          onMouseDown: (event) => {
-            preventSelection(event);
-            onMouseDown?.(event);
-          },
-          ref,
-          children: [
-            /* @__PURE__ */ jsxRuntime.jsx("div", { className: classes.iconContainer, children: icon }),
-            /* @__PURE__ */ jsxRuntime.jsx("div", { className: classes.label, children: label })
-          ]
-        }
-      )
-    );
-  }
-);
-exports.DefaultContent = DefaultContent;
-exports.useClasses = useClasses;