@hitachivantara/uikit-react-core 5.102.1 → 5.104.0

package/dist/esm/List/List.js

@@ -1,252 +0,0 @@
-import { jsx, jsxs, Fragment } from "react/jsx-runtime";
-import { useRef, useEffect, useMemo, forwardRef, isValidElement } from "react";
-import { FixedSizeList } from "react-window";
-import { useDefaultProps } from "@hitachivantara/uikit-react-utils";
-import { HvIcon } from "../icons.js";
-import { CounterLabel } from "../utils/CounterLabel.js";
-import { setId } from "../utils/setId.js";
-import { useClasses } from "./List.styles.js";
-import { staticClasses } from "./List.styles.js";
-import { useSelectableList } from "./useSelectableList.js";
-import { parseList } from "./utils.js";
-import { HvCheckBox } from "../CheckBox/CheckBox.js";
-import { HvRadio } from "../Radio/Radio.js";
-import { HvOverflowTooltip } from "../OverflowTooltip/OverflowTooltip.js";
-import { HvLink } from "../Link/Link.js";
-import { HvListContainer } from "../ListContainer/ListContainer.js";
-import { HvListItem } from "../ListContainer/ListItem/ListItem.js";
-const DEFAULT_LABELS = {
-  /** The label used for the All checkbox action. @deprecated no longer used */
-  selectAll: "Select All",
-  /** The label used in the middle of the multi-selection count. */
-  selectionConjunction: "/"
-};
-const HvList = (props) => {
-  const {
-    id,
-    classes: classesProp,
-    className,
-    multiSelect = false,
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    hasTooltips = false,
-    showSelectAll = false,
-    labels = DEFAULT_LABELS,
-    useSelector = false,
-    selectable = true,
-    singleSelectionToggle = true,
-    condensed = false,
-    onChange,
-    onClick,
-    values: valuesProp = [],
-    height,
-    virtualized = false,
-    ...others
-  } = useDefaultProps("HvList", props);
-  const { classes, cx } = useClasses(classesProp);
-  const [list, setList, selection] = useSelectableList(valuesProp);
-  const listRef = useRef(null);
-  useEffect(() => {
-    const passedProps = { multiSelect, selectable, singleSelectionToggle };
-    const parsedList = parseList(
-      void 0,
-      passedProps,
-      void 0,
-      valuesProp
-    );
-    setList(parsedList);
-  }, [valuesProp, multiSelect, selectable, singleSelectionToggle, setList]);
-  const [role, itemRole] = useMemo(() => {
-    if (selectable && useSelector) return ["list", "listitem"];
-    if (selectable) return ["listbox", "option"];
-    return ["menu", "menuitem"];
-  }, [selectable, useSelector]);
-  const handleSelect = (evt, item) => {
-    if (!item.path) evt.preventDefault();
-    if (item.disabled) return;
-    const passedProps = { multiSelect, selectable, singleSelectionToggle };
-    const parsedList = parseList(item, passedProps, void 0, list);
-    setList(parsedList);
-    onClick?.(evt, item);
-    onChange?.(parsedList);
-  };
-  const handleSelectAll = () => {
-    const passedProps = { multiSelect, selectable, singleSelectionToggle };
-    const anySelectableSelected = list.some(
-      (elem) => elem.selected || elem.disabled
-    );
-    const parsedList = parseList(
-      void 0,
-      passedProps,
-      !anySelectableSelected,
-      list
-    );
-    setList(parsedList);
-    onChange?.(parsedList);
-  };
-  const renderLeftIcon = (item) => {
-    return isValidElement(item.icon) ? item.icon : typeof item.icon === "function" ? item.icon?.({
-      isSelected: item.selected,
-      isDisabled: item.disabled
-    }) : null;
-  };
-  const renderSelectAll = () => {
-    const anySelected2 = !!selection?.length;
-    const allSelected = selection.length === list.length;
-    return /* @__PURE__ */ jsx(
-      HvCheckBox,
-      {
-        id: setId(id, "select-all"),
-        label: /* @__PURE__ */ jsx(
-          CounterLabel,
-          {
-            selected: selection.length,
-            total: list.length,
-            conjunctionLabel: labels.selectionConjunction
-          }
-        ),
-        onChange: handleSelectAll,
-        className: classes.selectAllSelector,
-        indeterminate: anySelected2 && !allSelected,
-        checked: allSelected
-      }
-    );
-  };
-  const renderItemText = (item) => {
-    return !multiSelect && item.path ? /* @__PURE__ */ jsx(HvLink, { route: item.path, classes: { a: classes.link }, children: /* @__PURE__ */ jsx(HvOverflowTooltip, { data: item.label }) }) : /* @__PURE__ */ jsx(HvOverflowTooltip, { data: item.label });
-  };
-  const renderSelectItem = (item, itemId) => {
-    if (!useSelector) return renderItemText(item);
-    const Component = multiSelect ? HvCheckBox : HvRadio;
-    return /* @__PURE__ */ jsx(
-      Component,
-      {
-        id: setId(itemId, "selector"),
-        label: /* @__PURE__ */ jsx(HvOverflowTooltip, { data: item.label }),
-        checked: item.selected || false,
-        disabled: item.disabled,
-        onChange: multiSelect ? (evt) => handleSelect(evt, item) : void 0,
-        classes: {
-          root: classes.selectorRoot,
-          container: classes.selectorContainer,
-          label: classes.truncate
-        }
-      }
-    );
-  };
-  const renderListItem = (item, i, otherProps = {}) => {
-    const itemId = setId(id, "item", i);
-    const selected = item.selected || false;
-    const startAdornment = !useSelector && item.icon ? renderLeftIcon(item) : null;
-    return /* @__PURE__ */ jsx(
-      HvListItem,
-      {
-        id: itemId,
-        role: itemRole,
-        disabled: item.disabled || void 0,
-        className: classes.item,
-        classes: {
-          selected: cx({
-            [classes.itemSelector]: useSelector || multiSelect
-          })
-        },
-        selected: multiSelect || selected ? selected : void 0,
-        onClick: (evt) => handleSelect(evt, item),
-        startAdornment,
-        endAdornment: item.showNavIcon && /* @__PURE__ */ jsx(HvIcon, { name: "CaretRight", className: classes.box, size: "xs" }),
-        ...otherProps,
-        children: renderSelectItem(item, itemId)
-      },
-      i
-    );
-  };
-  const filteredList = list.filter((it) => !it.isHidden);
-  const anySelected = list.map((item) => item.selected && !item.disabled).reduce((result, selected) => result || selected, false);
-  const selectedItemIndex = list.findIndex((item) => item.selected);
-  useEffect(() => {
-    if (selectedItemIndex >= 0 && listRef.current !== null) {
-      listRef.current.scrollToItem(selectedItemIndex);
-    }
-  }, [listRef, selectedItemIndex]);
-  const renderVirtualizedListItem = ({
-    index,
-    style
-  }) => {
-    const item = filteredList[index];
-    const tabIndex = item.tabIndex || !anySelected && index === 0 || item.selected && !item.disabled ? 0 : -1;
-    return renderListItem(item, index, {
-      style: {
-        ...style,
-        top: `${Number.parseFloat(style.top) + 5}px`,
-        left: `${Number.parseFloat(style.left) + 5}px`,
-        width: `calc(${Number.parseFloat(style.width)}% - 10px)`
-      },
-      tabIndex,
-      interactive: true,
-      condensed,
-      disableGutters: useSelector
-    });
-  };
-  const ariaMultiSelectable = role === "listbox" && multiSelect || void 0;
-  const ListContainer = useMemo(() => {
-    return forwardRef(
-      ({ ...rest }, ref) => /* @__PURE__ */ jsx(
-        HvListContainer,
-        {
-          id,
-          className: cx(classes.root, className),
-          role,
-          interactive: true,
-          condensed,
-          disableGutters: useSelector,
-          "aria-multiselectable": ariaMultiSelectable,
-          ref,
-          ...rest
-        }
-      )
-    );
-  }, [
-    cx,
-    id,
-    useSelector,
-    className,
-    classes.root,
-    role,
-    condensed,
-    ariaMultiSelectable
-  ]);
-  if (filteredList.length === 0) return null;
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
-    multiSelect && useSelector && showSelectAll && renderSelectAll(),
-    !virtualized ? /* @__PURE__ */ jsx(
-      HvListContainer,
-      {
-        id,
-        className: cx(classes.root, className),
-        role,
-        interactive: true,
-        condensed,
-        disableGutters: useSelector,
-        "aria-multiselectable": ariaMultiSelectable,
-        ...others,
-        children: filteredList.map((item, i) => renderListItem(item, i))
-      }
-    ) : /* @__PURE__ */ jsx(
-      FixedSizeList,
-      {
-        ref: listRef,
-        className: classes.virtualizedRoot,
-        height: (height || 0) + 5,
-        width: "100%",
-        itemCount: filteredList.length,
-        itemSize: condensed ? 32 : 40,
-        innerElementType: ListContainer,
-        ...others,
-        children: renderVirtualizedListItem
-      }
-    )
-  ] });
-};
-export {
-  HvList,
-  staticClasses as listClasses
-};

package/dist/esm/List/List.styles.js

@@ -1,51 +0,0 @@
-import { createClasses } from "@hitachivantara/uikit-react-utils";
-import { theme } from "@hitachivantara/uikit-styles";
-const { staticClasses, useClasses } = createClasses("HvList", {
-  root: {},
-  virtualizedRoot: { marginBottom: 5 },
-  selectorRoot: { width: "100%", zIndex: 0 },
-  selectorContainer: {
-    "&:hover": {
-      backgroundColor: "transparent"
-    },
-    "&:focus-within": {
-      backgroundColor: "transparent",
-      outline: "none",
-      boxShadow: "none"
-    }
-  },
-  box: { width: "32px", height: "32px", marginLeft: "auto" },
-  truncate: {
-    display: "inline-block",
-    overflow: "hidden",
-    textOverflow: "ellipsis",
-    whiteSpace: "nowrap"
-  },
-  item: {},
-  itemSelector: {
-    "&:not(:hover):not(.HvIsFocused):not(:focus-within)": {
-      backgroundColor: theme.colors.bgHover
-    }
-  },
-  link: {
-    ...theme.typography.body,
-    textDecoration: "none",
-    "&:focus": {
-      boxShadow: "unset !important"
-    }
-  },
-  selectAllSelector: {
-    width: "100%",
-    margin: "0 0 2px 0",
-    position: "relative",
-    zIndex: 0,
-    // prevent the focus ring to be hidden by sibling hover background
-    "&:focus-within": {
-      zIndex: 1
-    }
-  }
-});
-export {
-  staticClasses,
-  useClasses
-};

package/dist/esm/ListContainer/ListItem/ListItem.styles.js

@@ -1,68 +0,0 @@
-import { createClasses } from "@hitachivantara/uikit-react-utils";
-import { theme } from "@hitachivantara/uikit-styles";
-import { outlineStyles } from "../../utils/focusUtils.js";
-const { staticClasses, useClasses } = createClasses("HvListItem", {
-  root: {
-    ...theme.typography.body,
-    padding: 0,
-    display: "block",
-    height: "32px",
-    lineHeight: "32px",
-    listStyleType: "none",
-    overflow: "hidden",
-    textOverflow: "ellipsis",
-    whiteSpace: "nowrap",
-    position: "relative",
-    alignContent: "center",
-    "&:not(:last-child)": {
-      marginBottom: "8px"
-    },
-    "&$condensed": {
-      marginBottom: 0
-    },
-    "&.HvIsFocused": {
-      ...outlineStyles,
-      backgroundColor: theme.colors.bgPageSecondary,
-      zIndex: 2
-    }
-  },
-  focus: { backgroundColor: theme.colors.bgPageSecondary, zIndex: 2 },
-  gutters: {
-    padding: `0 ${theme.space.xs}`,
-    ":has($startAdornment)": {
-      paddingLeft: 0
-    },
-    ":has($endAdornment)": {
-      paddingRight: 0
-    }
-  },
-  condensed: {},
-  interactive: {
-    cursor: "pointer",
-    "&:not($disabled):not($selected):hover": {
-      backgroundColor: theme.colors.bgHover
-    },
-    "&$disabled": {
-      cursor: "not-allowed"
-    }
-  },
-  selected: { backgroundColor: theme.colors.bgHover },
-  disabled: {
-    color: theme.colors.textDisabled,
-    backgroundColor: theme.colors.bgDisabled
-  },
-  startAdornment: {
-    float: "left"
-  },
-  endAdornment: {
-    float: "right"
-  },
-  /** @deprecated use `:has($startAdornment)` instead */
-  withStartAdornment: {},
-  /** @deprecated use `:has($endAdornment)` instead */
-  withEndAdornment: {}
-});
-export {
-  staticClasses,
-  useClasses
-};

package/dist/esm/Radio/Radio.js

@@ -1,148 +0,0 @@
-import { jsx, jsxs } from "react/jsx-runtime";
-import { forwardRef, useState, useCallback } from "react";
-import { useDefaultProps } from "@hitachivantara/uikit-react-utils";
-import { useControlled } from "../hooks/useControlled.js";
-import { useUniqueId } from "../hooks/useUniqueId.js";
-import { setId } from "../utils/setId.js";
-import { useClasses } from "./Radio.styles.js";
-import { staticClasses } from "./Radio.styles.js";
-import { HvBaseRadio } from "../BaseRadio/BaseRadio.js";
-import { isInvalid } from "../FormElement/utils.js";
-import { HvFormElement } from "../FormElement/FormElement.js";
-import { HvLabel } from "../FormElement/Label/Label.js";
-import { HvWarningText } from "../FormElement/WarningText/WarningText.js";
-const HvRadio = forwardRef(
-  function HvRadio2(props, ref) {
-    const {
-      classes: classesProp,
-      className,
-      id,
-      name,
-      value = "on",
-      required,
-      readOnly,
-      disabled,
-      label,
-      "aria-label": ariaLabel,
-      "aria-labelledby": ariaLabelledBy,
-      "aria-describedby": ariaDescribedBy,
-      labelProps,
-      checked,
-      defaultChecked = false,
-      onChange,
-      status = "standBy",
-      statusMessage,
-      "aria-errormessage": ariaErrorMessage,
-      semantic,
-      inputProps,
-      onFocusVisible,
-      onBlur,
-      ...others
-    } = useDefaultProps("HvRadio", props);
-    const { classes, cx } = useClasses(classesProp);
-    const elementId = useUniqueId(id);
-    const [focusVisible, setFocusVisible] = useState(false);
-    const onFocusVisibleCallback = useCallback(
-      (evt) => {
-        setFocusVisible(true);
-        onFocusVisible?.(evt);
-      },
-      [onFocusVisible]
-    );
-    const onBlurCallback = useCallback(
-      (evt) => {
-        setFocusVisible(false);
-        onBlur?.(evt);
-      },
-      [onBlur]
-    );
-    const [isChecked, setIsChecked] = useControlled(checked, defaultChecked);
-    const onLocalChange = useCallback(
-      (evt, newChecked) => {
-        setIsChecked(newChecked);
-        onChange?.(evt, newChecked, value);
-      },
-      [onChange, setIsChecked, value]
-    );
-    const canShowError = ariaErrorMessage == null && status !== void 0 && statusMessage !== void 0;
-    const hasLabel = label != null;
-    const isStateInvalid = isInvalid(status);
-    let errorMessageId;
-    if (isStateInvalid) {
-      errorMessageId = canShowError ? setId(elementId, "error") : ariaErrorMessage;
-    }
-    const radio = /* @__PURE__ */ jsx(
-      HvBaseRadio,
-      {
-        ref,
-        id: label ? setId(elementId, "input") : setId(id, "input"),
-        name,
-        className: cx(classes.radio, {
-          [classes.invalidRadio]: isStateInvalid
-        }),
-        disabled,
-        readOnly,
-        onChange: onLocalChange,
-        value,
-        checked: isChecked,
-        semantic,
-        inputProps: {
-          "aria-invalid": isStateInvalid ? true : void 0,
-          "aria-errormessage": errorMessageId,
-          "aria-label": ariaLabel,
-          "aria-labelledby": ariaLabelledBy,
-          "aria-describedby": ariaDescribedBy,
-          ...inputProps
-        },
-        onFocusVisible: onFocusVisibleCallback,
-        onBlur: onBlurCallback,
-        ...others
-      }
-    );
-    return /* @__PURE__ */ jsxs(
-      HvFormElement,
-      {
-        id,
-        name,
-        status: status || "standBy",
-        disabled,
-        required,
-        readOnly,
-        className: cx(classes.root, className),
-        children: [
-          hasLabel ? /* @__PURE__ */ jsxs(
-            "div",
-            {
-              className: cx(classes.container, {
-                [classes.focusVisible]: !!(focusVisible && label),
-                [classes.semantic]: semantic,
-                [classes.checked]: isChecked,
-                [classes.invalidContainer]: isStateInvalid,
-                [classes.disabled]: disabled
-              }),
-              children: [
-                radio,
-                /* @__PURE__ */ jsx(
-                  HvLabel,
-                  {
-                    noWrap: true,
-                    id: setId(elementId, "label"),
-                    htmlFor: setId(elementId, "input"),
-                    label,
-                    className: classes.label,
-                    ...labelProps
-                  }
-                )
-              ]
-            }
-          ) : radio,
-          canShowError && /* @__PURE__ */ jsx(HvWarningText, { id: setId(elementId, "error"), children: statusMessage })
-        ]
-      }
-    );
-  }
-);
-export {
-  HvRadio,
-  staticClasses as radioClasses
-};

package/dist/esm/Radio/Radio.styles.js

@@ -1,44 +0,0 @@
-import { createClasses } from "@hitachivantara/uikit-react-utils";
-import { theme } from "@hitachivantara/uikit-styles";
-import { outlineStyles } from "../utils/focusUtils.js";
-const { staticClasses, useClasses } = createClasses("HvRadio", {
-  root: { display: "inline-block" },
-  container: {
-    cursor: "pointer",
-    display: "flex",
-    alignItems: "center",
-    transition: "background-color 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms",
-    borderRadius: theme.radii.base,
-    "&:hover:not($disabled)": {
-      backgroundColor: theme.colors.bgHover
-    },
-    ":where(:has($label)) $radio": {
-      borderRadius: "inherit"
-    }
-  },
-  invalidContainer: {},
-  disabled: {
-    cursor: "not-allowed",
-    "& $label": { color: theme.colors.textDisabled, cursor: "not-allowed" }
-  },
-  focusVisible: {
-    backgroundColor: theme.colors.bgPageSecondary,
-    ...outlineStyles
-  },
-  radio: {},
-  invalidRadio: {},
-  label: {
-    verticalAlign: "middle",
-    paddingRight: theme.space.xs,
-    ...theme.typography.body,
-    cursor: "pointer",
-    lineHeight: "32px",
-    width: "100%"
-  },
-  checked: {},
-  semantic: {}
-});
-export {
-  staticClasses,
-  useClasses
-};

package/dist/esm/Section/Section.styles.js

@@ -1,61 +0,0 @@
-import { createClasses } from "@hitachivantara/uikit-react-utils";
-import { theme } from "@hitachivantara/uikit-styles";
-const { staticClasses, useClasses } = createClasses("HvSection", {
-  root: {
-    width: "100%",
-    display: "flex",
-    flexDirection: "column",
-    backgroundColor: theme.colors.bgContainer,
-    borderRadius: theme.radii.round,
-    overflow: "hidden",
-    border: `1px solid ${theme.colors.border}`
-  },
-  hidden: { height: 0, display: "none" },
-  header: {
-    display: "flex",
-    alignItems: "center",
-    borderColor: "inherit",
-    position: "relative",
-    padding: theme.space.sm,
-    "+ $content": {
-      borderTopLeftRadius: 0,
-      borderTopRightRadius: 0
-    }
-  },
-  headerExpandable: {
-    cursor: "pointer",
-    ":hover": {
-      backgroundColor: theme.colors.bgHover
-    }
-  },
-  content: {
-    padding: theme.space.sm,
-    borderRadius: "inherit",
-    borderColor: "inherit",
-    flex: 1
-  },
-  hasHeader: {
-    paddingTop: 0
-  },
-  /** @deprecated use `hasHeader` instead */
-  spaceTop: {},
-  actions: {
-    display: "flex",
-    gap: theme.space.xs,
-    marginLeft: "auto"
-  },
-  raisedHeader: {
-    "& $header": {
-      zIndex: 1,
-      borderBottomWidth: 1,
-      boxShadow: theme.colors.shadow
-    },
-    "& $content": {
-      paddingTop: theme.space.sm
-    }
-  }
-});
-export {
-  staticClasses,
-  useClasses
-};

package/dist/esm/StatusIcon/StatusIcon.js

@@ -1,46 +0,0 @@
-import { jsx } from "react/jsx-runtime";
-import { forwardRef } from "react";
-import { useDefaultProps } from "@hitachivantara/uikit-react-utils";
-import { HvIcon } from "../icons.js";
-import { useClasses } from "./StatusIcon.styles.js";
-import { staticClasses } from "./StatusIcon.styles.js";
-import { HvIconContainer } from "../IconContainer/IconContainer.js";
-const variantIconMap = {
-  success: "Success",
-  warning: "Caution",
-  error: "Fail",
-  info: "Info"
-};
-const HvStatusIcon = forwardRef(function HvStatusIcon2(props, ref) {
-  const {
-    classes: classesProp,
-    className,
-    variant = "default",
-    customIcon,
-    size = "sm",
-    type = "full"
-  } = useDefaultProps("HvStatusIcon", props);
-  const { classes, cx } = useClasses(classesProp);
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      ref,
-      "data-variant": variant,
-      "data-type": type,
-      "data-size": size,
-      className: cx(classes.root, className),
-      children: /* @__PURE__ */ jsx(HvIconContainer, { size, children: customIcon || /* @__PURE__ */ jsx(
-        HvIcon,
-        {
-          compact: true,
-          className: classes.icon,
-          name: variantIconMap[variant]
-        }
-      ) })
-    }
-  );
-});
-export {
-  HvStatusIcon,
-  staticClasses as statusIconClasses
-};