@hitachivantara/uikit-react-core 5.102.1 → 5.104.0

package/dist/cjs/packages/core/src/AvatarGroup/AvatarGroup.cjs

@@ -0,0 +1,152 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const a = require("react");
+const uikitReactUtils = require("@hitachivantara/uikit-react-utils");
+const uikitStyles = require("@hitachivantara/uikit-styles");
+const Avatar = require("../Avatar/Avatar.cjs");
+const AvatarGroup_styles = require("./AvatarGroup.styles.cjs");
+const AvatarGroupContext = require("./AvatarGroupContext.cjs");
+const getSpacingValue = (spacing, size) => {
+  switch (size) {
+    case "xs":
+      return spacing === "compact" ? 24 : 16;
+    case "sm":
+      return spacing === "compact" ? 30 : 18;
+    case "md":
+      return spacing === "compact" ? 36 : 20;
+    case "lg":
+      return spacing === "compact" ? 44 : 24;
+    case "xl":
+      return spacing === "compact" ? 72 : 34;
+    default:
+      return spacing === "compact" ? 30 : 18;
+  }
+};
+const getFontSize = (size) => {
+  switch (size) {
+    case "xs":
+      return "1em";
+    case "sm":
+      return "1.25em";
+    case "md":
+      return "1.5em";
+    case "lg":
+      return "1.75em";
+    case "xl":
+      return "3em";
+    default:
+      return "1em";
+  }
+};
+const Overflow = ({
+  direction,
+  childrenToShow,
+  spacingValue,
+  overflowComponent,
+  totalChildren,
+  maxVisible,
+  size
+}) => {
+  const { css } = uikitReactUtils.useCss();
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      style: {
+        marginLeft: direction === "row" && childrenToShow.length > 0 ? -spacingValue : 0,
+        marginTop: direction === "column" && childrenToShow.length > 0 ? -spacingValue : 0,
+        zIndex: 0
+      },
+      children: overflowComponent ? overflowComponent(totalChildren - maxVisible) : /* @__PURE__ */ jsxRuntime.jsxs(
+        Avatar.HvAvatar,
+        {
+          size,
+          backgroundColor: uikitStyles.theme.colors.border,
+          classes: {
+            avatar: css({
+              [`&.HvAvatar-${size}`]: {
+                fontSize: getFontSize(size)
+              }
+            })
+          },
+          children: [
+            "+",
+            totalChildren - maxVisible
+          ]
+        }
+      )
+    }
+  );
+};
+const HvAvatarGroup = a.forwardRef(
+  function HvAvatarGroup2(props, ref) {
+    const {
+      className,
+      style,
+      classes: classesProp,
+      children,
+      size = "sm",
+      spacing = "loose",
+      direction = "row",
+      maxVisible = 3,
+      overflowComponent,
+      highlight = false,
+      toBack = false,
+      ...others
+    } = uikitReactUtils.useDefaultProps("HvAvatarGroup", props);
+    const { classes, cx } = AvatarGroup_styles.useClasses(classesProp);
+    const spacingValue = getSpacingValue(spacing, size);
+    const totalChildren = a.Children.count(children);
+    const willOverflow = totalChildren > maxVisible;
+    const childrenToShow = a.Children.toArray(children).slice(0, maxVisible);
+    if (toBack) childrenToShow.reverse();
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        className: cx(
+          classes.root,
+          classes[direction],
+          {
+            [classes.highlight]: highlight,
+            [classes.toBack]: toBack
+          },
+          className
+        ),
+        style: uikitReactUtils.mergeStyles(style, {
+          "--spacing": `-${spacingValue}px`
+        }),
+        ref,
+        ...others,
+        children: /* @__PURE__ */ jsxRuntime.jsxs(AvatarGroupContext.HvAvatarGroupProvider, { size, children: [
+          toBack && willOverflow && /* @__PURE__ */ jsxRuntime.jsx(
+            Overflow,
+            {
+              childrenToShow,
+              direction,
+              maxVisible,
+              overflowComponent,
+              size,
+              spacingValue,
+              totalChildren
+            }
+          ),
+          childrenToShow,
+          !toBack && willOverflow && /* @__PURE__ */ jsxRuntime.jsx(
+            Overflow,
+            {
+              childrenToShow,
+              direction,
+              maxVisible,
+              overflowComponent,
+              size,
+              spacingValue,
+              totalChildren
+            }
+          )
+        ] })
+      }
+    );
+  }
+);
+exports.avatarGroupClasses = AvatarGroup_styles.staticClasses;
+exports.HvAvatarGroup = HvAvatarGroup;

package/dist/cjs/packages/core/src/AvatarGroup/AvatarGroupContext.cjs

@@ -0,0 +1,19 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const a = require("react");
+const HvAvatarGroupContext = a.createContext(null);
+const HvAvatarGroupProvider = ({
+  size,
+  children
+}) => {
+  const value = a.useMemo(() => ({ size }), [size]);
+  return /* @__PURE__ */ jsxRuntime.jsx(HvAvatarGroupContext.Provider, { value, children });
+};
+const useAvatarGroupContext = () => {
+  const context = a.useContext(HvAvatarGroupContext);
+  return context;
+};
+exports.HvAvatarGroupContext = HvAvatarGroupContext;
+exports.HvAvatarGroupProvider = HvAvatarGroupProvider;
+exports.useAvatarGroupContext = useAvatarGroupContext;

package/dist/cjs/packages/core/src/Badge/Badge.cjs

@@ -0,0 +1,56 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const a = require("react");
+const uikitReactUtils = require("@hitachivantara/uikit-react-utils");
+const uikitStyles = require("@hitachivantara/uikit-styles");
+const Badge_styles = require("./Badge.styles.cjs");
+const Typography = require("../Typography/Typography.cjs");
+const HvBadge = a.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
+  } = uikitReactUtils.useDefaultProps("HvBadge", props);
+  const { classes, cx } = Badge_styles.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__ */ jsxRuntime.jsx(Typography.HvTypography, { variant: textVariant, children: text });
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { ref, className: cx(classes.root, className), ...others, children: [
+    children,
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        "data-color": color,
+        style: uikitReactUtils.mergeStyles(style, {
+          "--bg-color": color && uikitStyles.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
+      }
+    )
+  ] });
+});
+exports.badgeClasses = Badge_styles.staticClasses;
+exports.HvBadge = HvBadge;

package/dist/cjs/packages/core/src/Banner/Banner.cjs

@@ -0,0 +1,93 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const a = require("react");
+const Slide = require("@mui/material/Slide");
+const Snackbar = require("@mui/material/Snackbar");
+const uikitReactUtils = require("@hitachivantara/uikit-react-utils");
+const setId = require("../utils/setId.cjs");
+const Banner_styles = require("./Banner.styles.cjs");
+const BannerContent = require("./BannerContent/BannerContent.cjs");
+const _interopDefault = (e) => e && e.__esModule ? e : { default: e };
+const Slide__default = /* @__PURE__ */ _interopDefault(Slide);
+const Snackbar__default = /* @__PURE__ */ _interopDefault(Snackbar);
+const HvBanner = a.forwardRef(function HvBanner2(props, ref) {
+  const {
+    id,
+    classes: classesProp,
+    className,
+    title,
+    open,
+    onClose,
+    anchorOrigin = "top",
+    variant,
+    transitionDuration = 300,
+    transitionDirection = "down",
+    container,
+    showIcon,
+    customIcon,
+    actions,
+    actionsCallback,
+    // TODO - remove in v6
+    onAction,
+    actionsPosition,
+    label,
+    offset = 60,
+    bannerContentProps,
+    ...others
+  } = uikitReactUtils.useDefaultProps("HvBanner", props);
+  const { classes, cx } = Banner_styles.useClasses(classesProp);
+  const anchorOriginBanner = {
+    horizontal: "center",
+    vertical: anchorOrigin
+  };
+  const SlideTransition = a.useCallback(
+    (properties) => /* @__PURE__ */ jsxRuntime.jsx(
+      Slide__default.default,
+      {
+        ...properties,
+        container,
+        direction: transitionDirection
+      }
+    ),
+    [container, transitionDirection]
+  );
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    Snackbar__default.default,
+    {
+      ref,
+      id,
+      open,
+      className,
+      classes: {
+        root: cx(classes.root, { [classes.rootClosed]: !open }),
+        anchorOriginTopCenter: classes.anchorOriginTopCenter,
+        anchorOriginBottomCenter: classes.anchorOriginBottomCenter
+      },
+      style: { [anchorOrigin]: offset },
+      anchorOrigin: anchorOriginBanner,
+      TransitionComponent: SlideTransition,
+      transitionDuration,
+      ...others,
+      children: /* @__PURE__ */ jsxRuntime.jsx(
+        BannerContent.HvBannerContent,
+        {
+          id: setId.setId(id, "content"),
+          title,
+          variant,
+          customIcon,
+          showIcon,
+          actions,
+          actionsCallback,
+          onAction,
+          actionsPosition,
+          onClose,
+          ...bannerContentProps,
+          children: label
+        }
+      )
+    }
+  );
+});
+exports.bannerClasses = Banner_styles.staticClasses;
+exports.HvBanner = HvBanner;

package/dist/cjs/packages/core/src/Banner/BannerContent/BannerContent.cjs

@@ -0,0 +1,70 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const a = require("react");
+const uikitReactUtils = require("@hitachivantara/uikit-react-utils");
+const Callout = require("../../utils/Callout.cjs");
+const BannerContent_styles = require("./BannerContent.styles.cjs");
+const HvBannerContent = a.forwardRef(function HvBannerContent2(props, ref) {
+  const {
+    id,
+    classes: classesProp,
+    className,
+    showIcon,
+    customIcon,
+    variant = "default",
+    onClose,
+    actions,
+    actionsCallback,
+    // TODO - remove in v6
+    onAction,
+    actionsPosition = "auto",
+    content,
+    children,
+    actionProps,
+    ...others
+  } = uikitReactUtils.useDefaultProps("HvBannerContent", props);
+  const { classes, cx } = BannerContent_styles.useClasses(classesProp);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    Callout.HvCallout,
+    {
+      ref,
+      id,
+      variant,
+      showClose: true,
+      showIcon,
+      customIcon,
+      classes: {
+        root: cx(
+          classes.root,
+          classes.outContainer,
+          classes.baseVariant,
+          classes[variant],
+          className
+        ),
+        message: classes.message,
+        action: classes.action,
+        messageIcon: classes.iconContainer,
+        messageContent: classes.messageContainer,
+        actionCustom: classes.messageActions,
+        actionContent: cx(
+          classes.actionContainer,
+          classes.actionsInnerContainer
+        ),
+        actionClose: classes.closeAction
+      },
+      actions,
+      actionsPosition,
+      actionProps,
+      onClose: (evt) => onClose?.(evt),
+      onAction: (evt, action) => {
+        onAction?.(evt, action);
+        actionsCallback?.(evt, id, action);
+      },
+      ...others,
+      children: children ?? content
+    }
+  );
+});
+exports.bannerContentClasses = BannerContent_styles.staticClasses;
+exports.HvBannerContent = HvBannerContent;

package/dist/cjs/packages/core/src/BaseCheckBox/BaseCheckBox.cjs

@@ -0,0 +1,92 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const a = require("react");
+const MuiCheckbox = require("@mui/material/Checkbox");
+const uikitReactUtils = require("@hitachivantara/uikit-react-utils");
+const BaseCheckBox_styles = require("./BaseCheckBox.styles.cjs");
+const CheckBoxIcon = require("./CheckBoxIcon.cjs");
+const _interopDefault = (e) => e && e.__esModule ? e : { default: e };
+const MuiCheckbox__default = /* @__PURE__ */ _interopDefault(MuiCheckbox);
+const HvBaseCheckBox = a.forwardRef(function HvBaseCheckBox2(props, ref) {
+  const {
+    classes: classesProp,
+    className,
+    inputProps,
+    onChange,
+    onFocusVisible,
+    onBlur,
+    checked,
+    indeterminate,
+    defaultChecked,
+    value = "on",
+    required = false,
+    readOnly = false,
+    disabled = false,
+    semantic = false,
+    color,
+    style,
+    ...others
+  } = uikitReactUtils.useDefaultProps("HvBaseCheckBox", props);
+  const { classes, cx } = BaseCheckBox_styles.useClasses(classesProp);
+  const [focusVisible, setFocusVisible] = a.useState(false);
+  const onChangeCallback = a.useCallback(
+    (event) => {
+      if (readOnly) {
+        return;
+      }
+      onChange?.(event, event.target.checked, value);
+    },
+    [onChange, readOnly, value]
+  );
+  const onBlurCallback = a.useCallback(
+    (event) => {
+      setFocusVisible(false);
+      onBlur?.(event);
+    },
+    [onBlur]
+  );
+  const onFocusVisibleCallback = a.useCallback(
+    (event) => {
+      setFocusVisible(true);
+      onFocusVisible?.(event);
+    },
+    [onFocusVisible]
+  );
+  const params = { indeterminate, disabled, semantic, color };
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    MuiCheckbox__default.default,
+    {
+      ref,
+      value,
+      className: cx(
+        classes.root,
+        {
+          [classes.focusVisible]: focusVisible,
+          [classes.checked]: checked,
+          [classes.indeterminate]: indeterminate,
+          [classes.semantic]: semantic,
+          [classes.disabled]: disabled
+        },
+        className
+      ),
+      icon: /* @__PURE__ */ jsxRuntime.jsx(CheckBoxIcon.HvCheckBoxIcon, { ...params }),
+      indeterminateIcon: /* @__PURE__ */ jsxRuntime.jsx(CheckBoxIcon.HvCheckBoxIcon, { variant: "indeterminate", ...params }),
+      checkedIcon: /* @__PURE__ */ jsxRuntime.jsx(CheckBoxIcon.HvCheckBoxIcon, { variant: "checked", ...params }),
+      disabled,
+      required,
+      readOnly,
+      checked,
+      defaultChecked,
+      indeterminate,
+      inputProps,
+      onChange: onChangeCallback,
+      onFocusVisible: onFocusVisibleCallback,
+      onBlur: onBlurCallback,
+      color: "default",
+      ...others
+    }
+  );
+});
+exports.baseCheckBoxClasses = BaseCheckBox_styles.staticClasses;
+exports.HvBaseCheckBox = HvBaseCheckBox;

package/dist/cjs/packages/core/src/BaseCheckBox/CheckBoxIcon.cjs

@@ -0,0 +1,76 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const a = require("react");
+const uikitReactUtils = require("@hitachivantara/uikit-react-utils");
+const uikitStyles = require("@hitachivantara/uikit-styles");
+const icons = require("../icons.cjs");
+const { useClasses } = uikitReactUtils.createClasses("HvCheckBoxIcon", {
+  root: {
+    color: uikitStyles.theme.colors.bgContainer,
+    borderRadius: uikitStyles.theme.radii.base,
+    border: `1px solid ${uikitStyles.theme.colors.borderStrong}`
+  },
+  checked: {
+    borderColor: "transparent",
+    backgroundColor: `var(--bg-color, ${uikitStyles.theme.colors.primaryStrong})`,
+    color: uikitStyles.theme.colors.bgContainer
+  },
+  indeterminate: {
+    color: uikitStyles.theme.colors.textSubtle,
+    backgroundColor: uikitStyles.theme.colors.bgContainer
+  },
+  semantic: {
+    "&[data-variant=indeterminate]": {
+      backgroundColor: uikitStyles.theme.colors.bgContainer,
+      borderColor: uikitStyles.theme.colors.borderStrong
+    }
+  },
+  disabled: {
+    color: uikitStyles.theme.colors.bgDisabled,
+    borderColor: uikitStyles.theme.colors.borderDisabled,
+    backgroundColor: uikitStyles.theme.colors.bgDisabled,
+    "&[data-variant=checked],&[data-variant=indeterminate]": {
+      color: uikitStyles.theme.colors.textDisabled,
+      borderColor: "currentcolor"
+    }
+  }
+});
+const HvCheckBoxIcon = (props) => {
+  const {
+    className,
+    classes: classesProp,
+    variant,
+    disabled,
+    semantic,
+    color
+  } = uikitReactUtils.useDefaultProps("HvCheckBoxIcon", props);
+  const { classes, cx } = useClasses(classesProp, false);
+  const d = a.useMemo(() => {
+    switch (variant) {
+      case "checked":
+        return "m5.03,12.06l-3.76,-3.75l1.42,-1.42l2.24,2.25l6.3,-7.2l1.5,1.31l-7.7,8.81z";
+      case "indeterminate":
+        return "m3,8l8,0l0,-2l-8,0l0,2z";
+      case "default":
+      default:
+        return "m0,0l16,0l0,16l-16,0l0,-16z";
+    }
+  }, [variant]);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    icons.SvgBase,
+    {
+      viewBox: "0 0 14 14",
+      "data-variant": variant,
+      className: cx(classes.root, className, {
+        [classes.checked]: variant === "checked",
+        [classes.indeterminate]: variant === "indeterminate",
+        [classes.semantic]: semantic,
+        [classes.disabled]: disabled
+      }),
+      style: uikitReactUtils.mergeStyles({}, { "--bg-color": uikitStyles.getColor(color) }),
+      children: /* @__PURE__ */ jsxRuntime.jsx("path", { d })
+    }
+  );
+};
+exports.HvCheckBoxIcon = HvCheckBoxIcon;