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

package/dist/esm/Badge/Badge.js

@@ -1,57 +0,0 @@
-import { jsxs, jsx } from "react/jsx-runtime";
-import { forwardRef } from "react";
-import { useDefaultProps, mergeStyles } from "@hitachivantara/uikit-react-utils";
-import { getColor } from "@hitachivantara/uikit-styles";
-import { useClasses } from "./Badge.styles.js";
-import { staticClasses } from "./Badge.styles.js";
-import { HvTypography } from "../Typography/Typography.js";
-const HvBadge = forwardRef(function HvBadge2(props, ref) {
-  const {
-    classes: classesProp,
-    className,
-    color,
-    showCount = false,
-    count: countProp = 0,
-    maxCount = 99,
-    label,
-    icon,
-    text,
-    textVariant,
-    children: childrenProp,
-    style,
-    ...others
-  } = useDefaultProps("HvBadge", props);
-  const { classes, cx } = useClasses(classesProp);
-  const count = typeof label === "number" ? label : countProp;
-  const countValue = count > maxCount ? `${maxCount}+` : count;
-  const renderedCount = showCount && count > 0 ? countValue : "";
-  const renderedCountOrLabel = label && typeof label !== "number" ? label : renderedCount;
-  const children = childrenProp || icon || text && /* @__PURE__ */ jsx(HvTypography, { variant: textVariant, children: text });
-  return /* @__PURE__ */ jsxs("div", { ref, className: cx(classes.root, className), ...others, children: [
-    children,
-    /* @__PURE__ */ jsx(
-      "div",
-      {
-        "data-color": color,
-        style: mergeStyles(style, {
-          "--bg-color": color && getColor(color)
-        }),
-        className: cx(classes.badgePosition, {
-          [classes.badgeContainer]: children,
-          [classes.badgeHidden]: !(count > 0 || renderedCountOrLabel),
-          // TODO: remove unnecessary classes in v6 (hoist+rename `badge` to `badgePosition`)
-          [classes.badge]: !!(count > 0 || renderedCountOrLabel),
-          [classes.showCount]: !!(!label && renderedCountOrLabel),
-          [classes.showLabel]: !!label,
-          [classes.badgeIcon]: !!icon,
-          [classes.badgeOneDigit]: String(renderedCountOrLabel).length === 1
-        }),
-        children: renderedCountOrLabel
-      }
-    )
-  ] });
-});
-export {
-  HvBadge,
-  staticClasses as badgeClasses
-};

package/dist/esm/Box/Box.js

@@ -1,22 +0,0 @@
-import { jsx } from "react/jsx-runtime";
-import { useDefaultProps } from "@hitachivantara/uikit-react-utils";
-import { theme } from "@hitachivantara/uikit-styles";
-import { fixedForwardRef } from "../types/generic.js";
-const sxFn = (sx) => {
-  return typeof sx === "function" ? sx(theme) : sx;
-};
-const HvBox = fixedForwardRef(function HvBox2(props, ref) {
-  const {
-    style,
-    component: Component = "div",
-    sx,
-    children,
-    classes,
-    // Extracted since useDefaultProps creates this prop even if it's not part of the component's API
-    ...restProps
-  } = useDefaultProps("HvBox", props);
-  return /* @__PURE__ */ jsx(Component, { style: sx ? sxFn(sx) : style, ref, ...restProps, children });
-});
-export {
-  HvBox
-};

package/dist/esm/ColorPicker/Fields/Fields.styles.js

@@ -1,36 +0,0 @@
-import { createClasses } from "@hitachivantara/uikit-react-utils";
-import { theme } from "@hitachivantara/uikit-styles";
-const { useClasses } = createClasses("HvColorPickerFields", {
-  fields: {
-    width: "100%",
-    display: "flex",
-    paddingTop: "18px",
-    marginRight: "0px"
-  },
-  single: {
-    maxWidth: "50px",
-    paddingLeft: theme.space.xxs,
-    "& input": {
-      marginLeft: 5,
-      marginRight: 5
-    },
-    "& label": {
-      paddingLeft: 5
-    }
-  },
-  double: {
-    maxWidth: "82px",
-    paddingRight: theme.space.xxs,
-    "& input": {
-      textTransform: "uppercase",
-      marginLeft: 5,
-      marginRight: 5
-    },
-    "& label": {
-      paddingLeft: 5
-    }
-  }
-});
-export {
-  useClasses
-};

package/dist/esm/ColorPicker/Picker/Picker.js

@@ -1,73 +0,0 @@
-import { jsx, jsxs, Fragment } from "react/jsx-runtime";
-import { useCallback } from "react";
-import { CustomPicker } from "react-color";
-import { Saturation, Hue } from "react-color/lib/components/common";
-import { useDefaultProps, useTheme } from "@hitachivantara/uikit-react-utils";
-import { useClasses } from "./Picker.styles.js";
-import { Fields } from "../Fields/Fields.js";
-import { HvTypography } from "../../Typography/Typography.js";
-const Component = (props) => {
-  const {
-    onChange,
-    rgb,
-    hsl,
-    hsv,
-    hex,
-    title,
-    classes: classesProp
-  } = useDefaultProps("HvColorPickerPicker", props);
-  const { activeTheme } = useTheme();
-  const { classes, cx } = useClasses(classesProp);
-  const SaturationPointer = useCallback(
-    () => /* @__PURE__ */ jsx("div", { className: classes?.saturationPointer }),
-    [classes?.saturationPointer]
-  );
-  const HueSlider = useCallback(
-    () => /* @__PURE__ */ jsx(
-      "div",
-      {
-        className: cx(
-          classes?.hueSlider,
-          activeTheme?.colorPicker.hueDirection
-        )
-      }
-    ),
-    [activeTheme?.colorPicker.hueDirection, classes?.hueSlider, cx]
-  );
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
-    title && /* @__PURE__ */ jsx(HvTypography, { className: classes.title, variant: "caption1", children: title }),
-    /* @__PURE__ */ jsxs("div", { className: classes.pickers, children: [
-      /* @__PURE__ */ jsx("div", { className: classes.saturation, children: /* @__PURE__ */ jsx(
-        Saturation,
-        {
-          hsl,
-          hsv,
-          onChange,
-          pointer: SaturationPointer
-        }
-      ) }),
-      /* @__PURE__ */ jsx("div", { className: classes.hue, children: /* @__PURE__ */ jsx(
-        Hue,
-        {
-          direction: activeTheme?.colorPicker.hueDirection,
-          hsl,
-          onChange,
-          pointer: HueSlider
-        }
-      ) })
-    ] }),
-    /* @__PURE__ */ jsx(
-      Fields,
-      {
-        className: classes.fields,
-        rgb,
-        hex,
-        onChange
-      }
-    )
-  ] });
-};
-const Picker = CustomPicker(Component);
-export {
-  Picker
-};

package/dist/esm/ColorPicker/Picker/Picker.styles.js

@@ -1,65 +0,0 @@
-import { createClasses } from "@hitachivantara/uikit-react-utils";
-import { theme } from "@hitachivantara/uikit-styles";
-const { useClasses } = createClasses("HvColorPickerPicker", {
-  pickers: {
-    display: "flex",
-    flexDirection: "column"
-  },
-  saturation: {
-    width: "232px",
-    height: "140px",
-    marginRight: "0px",
-    position: "relative",
-    overflow: "visible",
-    "& > div": {
-      borderRadius: theme.radii.base,
-      "& .saturation-white": {
-        borderRadius: theme.radii.base,
-        "& .saturation-black": {
-          borderRadius: theme.radii.base
-        }
-      }
-    }
-  },
-  saturationPointer: {
-    width: "8px",
-    height: "8px",
-    boxShadow: `0 0 0 2px #fff, inset 0 0 1px 1px rgba(0,0,0,.3),
-            0 0 1px 2px rgba(0,0,0,.4)`,
-    borderRadius: theme.radii.full,
-    transform: "translate(-3px, -3px)"
-  },
-  hue: {
-    height: "8px",
-    width: "232px",
-    position: "relative",
-    overflow: "visible",
-    marginTop: "18px",
-    "& .hue-horizontal": {
-      borderRadius: `calc(2*${theme.radii.base})`
-    }
-  },
-  hueSlider: {
-    width: "12px",
-    height: "12px",
-    background: "transparent",
-    boxShadow: "0 0 2px rgb(0 0 0 / 60%)",
-    marginLeft: "0px",
-    border: "2px solid #fff",
-    borderRadius: theme.radii.full,
-    "&.vertical": {
-      transform: "translate(0px, -2px)"
-    },
-    "&.horizontal": {
-      transform: "translate(-6px, -2px)"
-    }
-  },
-  title: {
-    fontWeight: theme.fontWeights.semibold,
-    marginBottom: 8
-  },
-  fields: {}
-});
-export {
-  useClasses
-};

package/dist/esm/ColorPicker/SavedColors/SavedColors.js

@@ -1,68 +0,0 @@
-import { jsxs, jsx } from "react/jsx-runtime";
-import { Swatch } from "react-color/lib/components/common";
-import { useDefaultProps } from "@hitachivantara/uikit-react-utils";
-import { HvIcon } from "../../icons.js";
-import { useClasses } from "./SavedColors.styles.js";
-import { HvIconButton } from "../../IconButton/IconButton.js";
-const SavedColors = (props) => {
-  const {
-    colors,
-    onClickColor,
-    onAddColor,
-    onRemoveColor,
-    deleteButtonAriaLabel,
-    addButtonAriaLabel,
-    classes: classesProp
-  } = useDefaultProps("HvColorPickerSavedColors", props);
-  const { classes } = useClasses(classesProp);
-  const handleClick = (hex) => {
-    onClickColor({
-      hex,
-      source: "hex"
-    });
-  };
-  return /* @__PURE__ */ jsxs("div", { className: classes.root, children: [
-    /* @__PURE__ */ jsx(
-      HvIconButton,
-      {
-        className: classes.addButton,
-        variant: "secondarySubtle",
-        onClick: onAddColor,
-        title: addButtonAriaLabel,
-        children: /* @__PURE__ */ jsx(HvIcon, { name: "Add", compact: true })
-      }
-    ),
-    colors.map((color, index) => /* @__PURE__ */ jsxs(
-      "div",
-      {
-        className: classes.swatchRoot,
-        children: [
-          /* @__PURE__ */ jsx("div", { className: classes.swatchWrap, children: /* @__PURE__ */ jsx(
-            Swatch,
-            {
-              color,
-              onClick: handleClick,
-              focusStyle: {
-                boxShadow: `inset 0 0 0 1px rgba(0,0,0,.15), 0 0 4px ${color}`
-              }
-            }
-          ) }),
-          /* @__PURE__ */ jsx("div", { className: classes.removeButtonRoot, children: /* @__PURE__ */ jsx(
-            HvIconButton,
-            {
-              className: classes.removeButton,
-              variant: "secondarySubtle",
-              onClick: () => onRemoveColor(color, index),
-              title: deleteButtonAriaLabel,
-              children: /* @__PURE__ */ jsx(HvIcon, { name: "Close", compact: true, size: "xs" })
-            }
-          ) })
-        ]
-      },
-      `saved-color-${color}-${index}`
-    ))
-  ] });
-};
-export {
-  SavedColors
-};

package/dist/esm/ColorPicker/SavedColors/SavedColors.styles.js

@@ -1,46 +0,0 @@
-import { createClasses } from "@hitachivantara/uikit-react-utils";
-import { theme } from "@hitachivantara/uikit-styles";
-const { useClasses } = createClasses("HvColorPickerSavedColors", {
-  addButton: {
-    margin: theme.space.xxs,
-    width: "32px",
-    height: "32px"
-  },
-  root: {
-    display: "flex",
-    flexWrap: "wrap",
-    position: "relative",
-    alignItems: "center",
-    padding: 0,
-    width: "calc(100% + 8px)",
-    margin: "-4px -4px"
-  },
-  swatchRoot: { position: "relative" },
-  swatchWrap: {
-    width: "32px",
-    height: "32px",
-    margin: theme.space.xxs,
-    "& > span > div": {
-      borderRadius: theme.radii.base
-    }
-  },
-  removeButtonRoot: {
-    position: "absolute",
-    top: 0,
-    right: 0,
-    display: "flex",
-    justifyContent: "center",
-    alignItems: "center",
-    height: 16,
-    width: 16,
-    background: theme.colors.bgContainer,
-    borderRadius: theme.radii.base
-  },
-  removeButton: {
-    height: 16,
-    width: 16
-  }
-});
-export {
-  useClasses
-};

package/dist/esm/Focus/utils.js

@@ -1,8 +0,0 @@
-const getFocusableChildren = (el) => el?.querySelectorAll("input, button, select, textarea, a[href]") || [];
-const setFocusTo = (el) => {
-  el.focus();
-};
-export {
-  getFocusableChildren,
-  setFocusTo
-};

package/dist/esm/Kpi/Kpi.js

@@ -1,81 +0,0 @@
-import { jsxs, jsx } from "react/jsx-runtime";
-import { useDefaultProps } from "@hitachivantara/uikit-react-utils";
-import { useLabels } from "../hooks/useLabels.js";
-import { useClasses } from "./Kpi.styles.js";
-import { staticClasses } from "./Kpi.styles.js";
-import { HvTypography } from "../Typography/Typography.js";
-const DEFAULT_LABELS = {
-  /** The text at the top of the kpi. */
-  title: "",
-  /** The text in the middle of the kpi. */
-  indicator: void 0,
-  /** The text to the right of the indicator. */
-  unit: void 0,
-  /** The text to the right of the visual comparison. */
-  comparisonIndicatorInfo: void 0
-};
-const HvKpi = (props) => {
-  const {
-    trendIndicator = null,
-    visualIndicator = null,
-    visualComparison = null,
-    indicatorUnitTextVariant = "title2",
-    indicatorTextVariant = "title1",
-    labels: labelsProp,
-    classes: classesProp,
-    className,
-    ...others
-  } = useDefaultProps("HvKpi", props);
-  const { classes, cx } = useClasses(classesProp);
-  const labels = useLabels(DEFAULT_LABELS, labelsProp);
-  const InternalVisualComparison = typeof visualComparison === "string" ? HvTypography : "div";
-  return /* @__PURE__ */ jsxs("div", { className: cx(classes.root, className), ...others, children: [
-    /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(HvTypography, { variant: "label", children: labels.title }) }),
-    /* @__PURE__ */ jsxs("div", { className: classes.indicatorsContainer, children: [
-      visualIndicator && /* @__PURE__ */ jsx(
-        "div",
-        {
-          className: cx(
-            classes.visualIndicatorContainer,
-            classes.spacingToTheRight
-          ),
-          children: visualIndicator
-        }
-      ),
-      labels.indicator && /* @__PURE__ */ jsx(
-        HvTypography,
-        {
-          className: cx(classes.spacingToTheRight, classes.indicatorText),
-          variant: indicatorTextVariant,
-          children: labels.indicator
-        }
-      ),
-      labels.unit && /* @__PURE__ */ jsx(
-        HvTypography,
-        {
-          className: classes.indicatorUnit,
-          variant: indicatorUnitTextVariant,
-          children: labels.unit
-        }
-      )
-    ] }),
-    visualComparison && /* @__PURE__ */ jsxs("div", { className: classes.comparisonComposition, children: [
-      trendIndicator && /* @__PURE__ */ jsx("div", { className: cx(classes.trendLine, classes.spacingToTheRight), children: trendIndicator }),
-      /* @__PURE__ */ jsxs("div", { children: [
-        /* @__PURE__ */ jsx("div", { className: classes.comparisonContainer, children: /* @__PURE__ */ jsx(
-          InternalVisualComparison,
-          {
-            className: cx(classes.comparisons, classes.spacingToTheRight),
-            variant: "label",
-            children: visualComparison
-          }
-        ) }),
-        /* @__PURE__ */ jsx("div", { className: classes.comparisonContainer, children: /* @__PURE__ */ jsx(HvTypography, { className: classes.comparisons, variant: "caption2", children: labels.comparisonIndicatorInfo }) })
-      ] })
-    ] })
-  ] });
-};
-export {
-  HvKpi,
-  staticClasses as kpiClasses
-};

package/dist/esm/Kpi/Kpi.styles.js

@@ -1,38 +0,0 @@
-import { createClasses } from "@hitachivantara/uikit-react-utils";
-import { theme } from "@hitachivantara/uikit-styles";
-const { staticClasses, useClasses } = createClasses("HvKpi", {
-  root: { width: "100%", height: "100%" },
-  visualIndicatorContainer: {
-    display: "inline-flex",
-    alignItems: "center",
-    justifyContent: "center",
-    height: "40px",
-    backgroundColor: "transparent"
-  },
-  comparisons: {},
-  comparisonContainer: {
-    minHeight: "16px",
-    display: "flex",
-    alignItems: "flex-end"
-  },
-  comparisonComposition: {
-    width: "100%",
-    display: "flex",
-    flexDirection: "row",
-    flexWrap: "wrap",
-    alignItems: "center"
-  },
-  indicatorsContainer: {
-    display: "inline-flex",
-    minHeight: "16px",
-    alignItems: "flex-end"
-  },
-  indicatorText: {},
-  indicatorUnit: { alignSelf: "flex-end", paddingBottom: "3px" },
-  spacingToTheRight: { marginRight: theme.space.xs },
-  trendLine: { float: "right" }
-});
-export {
-  staticClasses,
-  useClasses
-};

package/dist/esm/Link/Link.js

@@ -1,34 +0,0 @@
-import { jsx } from "react/jsx-runtime";
-import { useDefaultProps } from "@hitachivantara/uikit-react-utils";
-import { useClasses } from "./Link.styles.js";
-import { staticClasses } from "./Link.styles.js";
-const HvLink = (props) => {
-  const {
-    onClick,
-    classes: classesProp,
-    className,
-    route,
-    data,
-    children,
-    ...others
-  } = useDefaultProps("HvLink", props);
-  const { classes, cx } = useClasses(classesProp);
-  return /* @__PURE__ */ jsx(
-    "a",
-    {
-      href: route,
-      onClick: (event) => {
-        if (!onClick) return;
-        event.preventDefault();
-        onClick?.(event, data);
-      },
-      className: cx(classes.a, className),
-      ...others,
-      children
-    }
-  );
-};
-export {
-  HvLink,
-  staticClasses as linkClasses
-};

package/dist/esm/Link/Link.styles.js

@@ -1,15 +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("HvLink", {
-  a: {
-    ...theme.typography.label,
-    textDecoration: "underline",
-    color: theme.colors.primary,
-    "&:focus-visible": { ...outlineStyles }
-  }
-});
-export {
-  staticClasses,
-  useClasses
-};

package/dist/esm/Table/renderers/DropdownColumnCell.js

@@ -1,11 +0,0 @@
-import { jsx } from "react/jsx-runtime";
-import { HvDropdown } from "../../Dropdown/Dropdown.js";
-const HvDropdownColumnCell = ({
-  dropdownProps,
-  ...others
-}) => {
-  return /* @__PURE__ */ jsx(HvDropdown, { ...dropdownProps, ...others });
-};
-export {
-  HvDropdownColumnCell
-};

package/dist/esm/Tooltip/Tooltip.styles.js

@@ -1,81 +0,0 @@
-import { tooltipClasses } from "@mui/material/Tooltip";
-import { createClasses } from "@hitachivantara/uikit-react-utils";
-import { theme } from "@hitachivantara/uikit-styles";
-const { staticClasses, useClasses } = createClasses("HvTooltip", {
-  root: {},
-  tooltip: {
-    ...theme.typography.body,
-    display: "flex",
-    width: "fit-content",
-    maxWidth: 532,
-    backgroundColor: theme.colors.bgContainer,
-    boxShadow: theme.colors.shadow,
-    padding: theme.space.sm,
-    borderRadius: theme.radii.round
-  },
-  popper: {
-    // TODO: remove these overrides in v6
-    [`& .${tooltipClasses.tooltip}`]: {
-      "& p": {
-        display: "-webkit-box",
-        width: "fit-content",
-        boxOrient: "vertical",
-        textOverflow: "ellipsis",
-        overflow: "hidden"
-      }
-    },
-    "& $title": {
-      padding: "15px 20px",
-      borderBottom: `3px solid ${theme.colors.borderSubtle}`
-    },
-    "& $valuesContainer": {
-      padding: theme.space.sm
-    },
-    "& $values": {
-      display: "flex",
-      justifyContent: "space-between",
-      paddingBottom: "10px",
-      "&:last-child": {
-        paddingBottom: 0
-      }
-    },
-    "& $color": {
-      width: theme.space.xs
-    },
-    "& $separator": {
-      width: theme.space.xs
-    },
-    "& $separatorColor": {
-      width: "5px"
-    },
-    "& $valueWrapper": {
-      padding: theme.space.sm
-    },
-    "& $tooltip": {
-      "& p": {
-        wordBreak: "break-word"
-      }
-    }
-  },
-  // TODO: remove in v6
-  /** @deprecated */
-  tooltipMulti: {},
-  /** @deprecated */
-  title: {},
-  /** @deprecated */
-  valuesContainer: {},
-  /** @deprecated */
-  values: {},
-  /** @deprecated */
-  color: {},
-  /** @deprecated */
-  separatorColor: {},
-  /** @deprecated */
-  separator: {},
-  /** @deprecated */
-  valueWrapper: {}
-});
-export {
-  staticClasses,
-  useClasses
-};