@hitachivantara/uikit-react-core 5.102.1 → 5.104.0

package/dist/cjs/packages/core/src/Slider/SliderInput/SliderInput.cjs

@@ -0,0 +1,60 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const a = require("react");
+const setId = require("../../utils/setId.cjs");
+const utils = require("../utils.cjs");
+const SliderInput_styles = require("./SliderInput.styles.cjs");
+const Input = require("../../Input/Input.cjs");
+const HvSliderInput = ({
+  classes: classesProp,
+  className,
+  id,
+  label,
+  status,
+  values: valuesProp = [],
+  inputProps = [],
+  readOnly = false,
+  disabled = false,
+  markDigits = 0,
+  onChange,
+  ...others
+}) => {
+  const { classes, cx } = SliderInput_styles.useClasses(classesProp);
+  const [inputValues, setInputValues] = a.useState(
+    utils.knobsValuesToString(valuesProp, markDigits)
+  );
+  const handleChange = (index) => {
+    if (disabled) return;
+    onChange?.(utils.stringValuesToKnobs(inputValues), index);
+  };
+  a.useEffect(() => {
+    setInputValues(utils.knobsValuesToString(valuesProp, markDigits));
+  }, [markDigits, valuesProp]);
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cx(classes.root, className), ...others, children: inputValues.map((value, index) => /* @__PURE__ */ jsxRuntime.jsxs(a.Fragment, { children: [
+    index !== 0 && /* @__PURE__ */ jsxRuntime.jsx("span", { children: "—" }),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      Input.HvInput,
+      {
+        id: setId.setId(id, index),
+        "aria-label": `${label}-${index}`,
+        className: classes.input,
+        disabled,
+        value: Number.isNaN(value) || value == null ? "" : value.toString(),
+        onEnter: () => handleChange(index),
+        onBlur: () => handleChange(index),
+        onChange: (_, inputValue) => {
+          const newValues = [...inputValues];
+          newValues[index] = inputValue;
+          setInputValues(newValues);
+        },
+        status: status?.[index] || "standBy",
+        readOnly,
+        disableClear: true,
+        ...inputProps[index]
+      }
+    )
+  ] }, setId.setId(id, index))) });
+};
+exports.sliderInputClasses = SliderInput_styles.staticClasses;
+exports.HvSliderInput = HvSliderInput;

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

@@ -0,0 +1,95 @@
+"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 helpers = require("../utils/helpers.cjs");
+const setId = require("../utils/setId.cjs");
+const Snackbar_styles = require("./Snackbar.styles.cjs");
+const SnackbarContent = require("./SnackbarContent/SnackbarContent.cjs");
+const _interopDefault = (e) => e && e.__esModule ? e : { default: e };
+const Slide__default = /* @__PURE__ */ _interopDefault(Slide);
+const Snackbar__default = /* @__PURE__ */ _interopDefault(Snackbar);
+const HvSnackbar = a.forwardRef(function HvSnackbar2(props, ref) {
+  const {
+    classes: classesProp,
+    className,
+    id,
+    title,
+    open = false,
+    onClose,
+    label,
+    anchorOrigin = { vertical: "top", horizontal: "right" },
+    autoHideDuration = 5e3,
+    variant,
+    showIcon,
+    customIcon,
+    action,
+    actionCallback,
+    // TODO - remove in v6
+    onAction,
+    transitionDuration = 300,
+    transitionDirection = "left",
+    container,
+    offset = 60,
+    snackbarContentProps,
+    ...others
+  } = uikitReactUtils.useDefaultProps("HvSnackbar", props);
+  const { classes } = Snackbar_styles.useClasses(classesProp);
+  const anchorOriginOffset = {
+    anchorOriginTop: {
+      top: `${offset}px`
+    },
+    anchorOriginBottom: {
+      bottom: `${offset}px`
+    }
+  };
+  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,
+      style: anchorOriginOffset[`anchorOrigin${helpers.capitalize(anchorOrigin.vertical)}`],
+      classes,
+      className,
+      id,
+      anchorOrigin,
+      open,
+      onClose,
+      autoHideDuration,
+      transitionDuration,
+      TransitionComponent: SlideTransition,
+      ...others,
+      children: /* @__PURE__ */ jsxRuntime.jsx(
+        SnackbarContent.HvSnackbarContent,
+        {
+          id: setId.setId(id, "content"),
+          title,
+          label,
+          variant,
+          customIcon,
+          showIcon,
+          action,
+          actionCallback,
+          onAction,
+          onClose,
+          ...snackbarContentProps
+        }
+      )
+    }
+  );
+});
+exports.snackbarClasses = Snackbar_styles.staticClasses;
+exports.HvSnackbar = HvSnackbar;

package/dist/cjs/packages/core/src/Snackbar/SnackbarContent/SnackbarContent.cjs

@@ -0,0 +1,53 @@
+"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 SnackbarContent_styles = require("./SnackbarContent.styles.cjs");
+const isActionGeneric = (action) => action && typeof action === "object" && "id" in action && "label" in action;
+const HvSnackbarContent = a.forwardRef(function HvSnackbarContent2(props, ref) {
+  const {
+    className,
+    id,
+    classes: classesProp,
+    label,
+    variant = "default",
+    showIcon,
+    customIcon,
+    action,
+    actionCallback,
+    // TODO - remove in v6
+    onAction,
+    onClose,
+    ...others
+  } = uikitReactUtils.useDefaultProps("HvSnackbarContent", props);
+  const { classes, cx } = SnackbarContent_styles.useClasses(classesProp);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    Callout.HvCallout,
+    {
+      ref,
+      id,
+      variant,
+      classes: {
+        root: cx(classes.root, classes[variant], className),
+        message: cx(classes.message, classes.messageSpan),
+        messageIcon: classes.iconVariant,
+        messageContent: classes.messageText,
+        action: classes.action
+      },
+      showIcon,
+      customIcon,
+      actions: isActionGeneric(action) ? [action] : action,
+      onClose,
+      onAction: (evt, action2) => {
+        onAction?.(evt, action2);
+        actionCallback?.(evt, id, action2);
+      },
+      ...others,
+      children: label
+    }
+  );
+});
+exports.snackbarContentClasses = SnackbarContent_styles.staticClasses;
+exports.HvSnackbarContent = HvSnackbarContent;

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

@@ -0,0 +1,108 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const a = require("react");
+const notistack = require("notistack");
+const uikitReactUtils = require("@hitachivantara/uikit-react-utils");
+const SnackbarProvider_styles = require("./SnackbarProvider.styles.cjs");
+const SnackbarContent = require("../Snackbar/SnackbarContent/SnackbarContent.cjs");
+const HvNotistackSnackMessage = a.forwardRef(function HvNotistackSnackMessage2(props, ref) {
+  const { id, message, variant = "success", snackbarContentProps } = props;
+  return /* @__PURE__ */ jsxRuntime.jsx(notistack.SnackbarContent, { ref, children: /* @__PURE__ */ jsxRuntime.jsx(
+    SnackbarContent.HvSnackbarContent,
+    {
+      id,
+      variant,
+      showIcon: true,
+      label: message,
+      role: "none",
+      ...snackbarContentProps
+    }
+  ) });
+});
+const useHvSnackbar = () => {
+  const snackbarContext = notistack.useSnackbar();
+  if (!snackbarContext) {
+    throw new Error("useHvSnackbar must be used within an HvSnackbarProvider");
+  }
+  const { enqueueSnackbar: enqueueNotistackSnackbar, closeSnackbar } = snackbarContext;
+  const enqueueSnackbar = a.useCallback(
+    (message, options = {}) => {
+      const {
+        id,
+        variant = "success",
+        snackbarContentProps,
+        className,
+        ...otherOptions
+      } = options;
+      return enqueueNotistackSnackbar(
+        /* @__PURE__ */ jsxRuntime.jsx(
+          HvNotistackSnackMessage,
+          {
+            id,
+            message,
+            variant,
+            snackbarContentProps
+          }
+        ),
+        { ...otherOptions, className }
+      );
+    },
+    [enqueueNotistackSnackbar]
+  );
+  return a.useMemo(
+    () => ({
+      enqueueSnackbar,
+      closeSnackbar
+    }),
+    [enqueueSnackbar, closeSnackbar]
+  );
+};
+const HvSnackbarProvider = (props) => {
+  const {
+    children,
+    notistackClassesOverride,
+    maxSnack = 5,
+    autoHideDuration = 5e3,
+    anchorOrigin = {
+      vertical: "top",
+      horizontal: "right"
+    },
+    classes: classesProp,
+    className,
+    container,
+    ...others
+  } = uikitReactUtils.useDefaultProps("HvSnackbarProvider", props);
+  const { classes, css, cx } = SnackbarProvider_styles.useClasses(classesProp);
+  const { containerRoot, ...otherNotistackClasses } = notistackClassesOverride || {};
+  const notistackClasses = {
+    containerRoot: cx(
+      css({
+        pointerEvents: "all",
+        "& > div > div": {
+          // Overrides notistack extra padding
+          padding: "0 !important",
+          transition: "all 0s ease 0s !important"
+        }
+      }),
+      containerRoot
+    ),
+    ...otherNotistackClasses
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    notistack.SnackbarProvider,
+    {
+      classes: notistackClasses,
+      maxSnack,
+      autoHideDuration,
+      anchorOrigin,
+      className: cx(classes.snackItemRoot, className),
+      domRoot: container,
+      ...others,
+      children
+    }
+  );
+};
+exports.snackbarProviderClasses = SnackbarProvider_styles.staticClasses;
+exports.HvSnackbarProvider = HvSnackbarProvider;
+exports.useHvSnackbar = useHvSnackbar;

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

@@ -0,0 +1,89 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const a = require("react");
+const MuiDivider = require("@mui/material/Divider");
+const styles = require("@mui/material/styles");
+const uikitReactUtils = require("@hitachivantara/uikit-react-utils");
+const useWidth = require("../hooks/useWidth.cjs");
+const Stack_styles = require("./Stack.styles.cjs");
+const Focus = require("../Focus/Focus.cjs");
+const _interopDefault = (e) => e && e.__esModule ? e : { default: e };
+const MuiDivider__default = /* @__PURE__ */ _interopDefault(MuiDivider);
+const getDirection = (direction, width, breakpoints) => {
+  if (typeof direction === "string") return direction;
+  for (let i = breakpoints.indexOf(width); i >= 0; i -= 1) {
+    if (direction[breakpoints[i]] !== void 0) {
+      return direction[breakpoints[i]];
+    }
+  }
+  return "column";
+};
+const HvStack = (props) => {
+  const {
+    classes: classesProp,
+    className,
+    children,
+    direction: directionProp = "column",
+    spacing = "sm",
+    divider = false,
+    withNavigation = false,
+    dividerProps = {},
+    ...others
+  } = uikitReactUtils.useDefaultProps("HvStack", props);
+  const { classes, cx } = Stack_styles.useClasses(classesProp);
+  const width = useWidth.useWidth();
+  const containerRef = a.useRef(null);
+  const { breakpoints } = styles.useTheme();
+  const direction = a.useMemo(
+    () => getDirection(directionProp, width, breakpoints.keys),
+    [directionProp, width, breakpoints]
+  );
+  const getDividerComponent = a.useCallback(() => {
+    if (typeof divider === "boolean" && divider) {
+      return /* @__PURE__ */ jsxRuntime.jsx(
+        MuiDivider__default.default,
+        {
+          orientation: direction === "column" ? "horizontal" : "vertical",
+          flexItem: direction === "row",
+          classes: {
+            root: classes.divider
+          },
+          ...dividerProps
+        }
+      );
+    }
+    return divider;
+  }, [classes.divider, divider, dividerProps, direction]);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      ref: containerRef,
+      className: cx(
+        classes.root,
+        classes[direction],
+        classes[spacing],
+        className
+      ),
+      ...others,
+      children: a.Children.map(children, (child, i) => {
+        return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+          divider && i !== 0 && getDividerComponent(),
+          withNavigation ? /* @__PURE__ */ jsxRuntime.jsx(
+            Focus.HvFocus,
+            {
+              rootRef: containerRef,
+              focusDisabled: false,
+              strategy: "grid",
+              navigationJump: direction === "column" ? 1 : a.Children.count(children) || 0,
+              filterClass: "child",
+              children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "child", children: child })
+            }
+          ) : child
+        ] });
+      })
+    }
+  );
+};
+exports.stackClasses = Stack_styles.staticClasses;
+exports.HvStack = HvStack;

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

@@ -0,0 +1,59 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const a = require("react");
+const CheckCircle = require("../../../../node_modules/@phosphor-icons/react/dist/csr/CheckCircle.cjs");
+const Question = require("../../../../node_modules/@phosphor-icons/react/dist/csr/Question.cjs");
+const Warning = require("../../../../node_modules/@phosphor-icons/react/dist/csr/Warning.cjs");
+const WarningDiamond = require("../../../../node_modules/@phosphor-icons/react/dist/csr/WarningDiamond.cjs");
+const uikitReactUtils = require("@hitachivantara/uikit-react-utils");
+const icons = require("../icons.cjs");
+const StatusIcon_styles = require("./StatusIcon.styles.cjs");
+const IconContainer = require("../IconContainer/IconContainer.cjs");
+const variantIconMap = {
+  success: "Success",
+  warning: "Caution",
+  error: "Fail",
+  info: "Info"
+};
+const pentahoIconsMap = {
+  success: (props) => /* @__PURE__ */ jsxRuntime.jsx(CheckCircle.CheckCircle, { ...props }),
+  warning: (props) => /* @__PURE__ */ jsxRuntime.jsx(Warning.Warning, { ...props }),
+  error: (props) => /* @__PURE__ */ jsxRuntime.jsx(WarningDiamond.WarningDiamond, { ...props }),
+  info: (props) => /* @__PURE__ */ jsxRuntime.jsx(Question.Question, { ...props })
+};
+const HvStatusIcon = a.forwardRef(function HvStatusIcon2(props, ref) {
+  const {
+    classes: classesProp,
+    className,
+    variant = "default",
+    customIcon,
+    size = "sm",
+    type = "full",
+    weight = "regular"
+  } = uikitReactUtils.useDefaultProps("HvStatusIcon", props);
+  const { classes, cx } = StatusIcon_styles.useClasses(classesProp);
+  const { selectedTheme } = uikitReactUtils.useTheme();
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      ref,
+      "data-variant": variant,
+      "data-type": type,
+      "data-size": size,
+      className: cx(classes.root, className),
+      children: selectedTheme === "pentahoPlus" && !customIcon ? /* @__PURE__ */ jsxRuntime.jsx(IconContainer.HvIconContainer, { size, children: pentahoIconsMap[variant]?.({
+        weight
+      }) }) : /* @__PURE__ */ jsxRuntime.jsx(IconContainer.HvIconContainer, { size, children: customIcon || /* @__PURE__ */ jsxRuntime.jsx(
+        icons.HvIcon,
+        {
+          compact: true,
+          className: classes.icon,
+          name: variantIconMap[variant]
+        }
+      ) })
+    }
+  );
+});
+exports.statusIconClasses = StatusIcon_styles.staticClasses;
+exports.HvStatusIcon = HvStatusIcon;

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

@@ -0,0 +1,141 @@
+"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 useControlled = require("../hooks/useControlled.cjs");
+const useUniqueId = require("../hooks/useUniqueId.cjs");
+const setId = require("../utils/setId.cjs");
+const Switch_styles = require("./Switch.styles.cjs");
+const BaseSwitch = require("../BaseSwitch/BaseSwitch.cjs");
+const FormElement = require("../FormElement/FormElement.cjs");
+const Label = require("../FormElement/Label/Label.cjs");
+const utils = require("../FormElement/utils.cjs");
+const WarningText = require("../FormElement/WarningText/WarningText.cjs");
+const HvSwitch = a.forwardRef(
+  function HvSwitch2(props, ref) {
+    const {
+      classes: classesProp,
+      className,
+      id,
+      name,
+      value = "on",
+      required,
+      readOnly,
+      disabled,
+      label,
+      "aria-label": ariaLabel,
+      "aria-labelledby": ariaLabelledBy,
+      "aria-describedby": ariaDescribedBy,
+      labelProps,
+      labelPosition = "top",
+      checked,
+      defaultChecked = false,
+      onChange,
+      status,
+      statusMessage,
+      "aria-errormessage": ariaErrorMessage,
+      inputProps,
+      ...others
+    } = uikitReactUtils.useDefaultProps("HvSwitch", props);
+    const { classes, cx } = Switch_styles.useClasses(classesProp);
+    const elementId = useUniqueId.useUniqueId(id);
+    const [isChecked, setIsChecked] = useControlled.useControlled(checked, defaultChecked);
+    const [validationState, setValidationState] = useControlled.useControlled(
+      status,
+      "standBy"
+    );
+    const [validationMessage] = useControlled.useControlled(statusMessage, "Required");
+    const onLocalChange = a.useCallback(
+      (evt, newChecked) => {
+        setIsChecked(() => {
+          if (required && !newChecked) {
+            setValidationState("invalid");
+          } else {
+            setValidationState("valid");
+          }
+          return newChecked;
+        });
+        onChange?.(evt, newChecked, value);
+      },
+      [onChange, required, setIsChecked, setValidationState, value]
+    );
+    const canShowError = ariaErrorMessage == null && (status !== void 0 && statusMessage !== void 0 || status === void 0 && required);
+    const isStateInvalid = utils.isInvalid(validationState);
+    let errorMessageId;
+    if (isStateInvalid) {
+      errorMessageId = canShowError ? setId.setId(elementId, "error") : ariaErrorMessage;
+    }
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      FormElement.HvFormElement,
+      {
+        id,
+        name,
+        status: validationState,
+        disabled,
+        required,
+        readOnly,
+        className: cx(classes.root, className),
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cx(classes.container, classes[labelPosition]), children: [
+            label && /* @__PURE__ */ jsxRuntime.jsx(
+              Label.HvLabel,
+              {
+                showGutter: true,
+                id: setId.setId(elementId, "label"),
+                htmlFor: setId.setId(elementId, "input"),
+                label,
+                className: classes.label,
+                ...labelProps
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "div",
+              {
+                className: cx(classes.switchContainer, {
+                  [classes.invalidSwitch]: isStateInvalid
+                }),
+                children: /* @__PURE__ */ jsxRuntime.jsx(
+                  BaseSwitch.HvBaseSwitch,
+                  {
+                    ref,
+                    id: label ? setId.setId(elementId, "input") : setId.setId(id, "input"),
+                    name,
+                    disabled,
+                    readOnly,
+                    required,
+                    onChange: onLocalChange,
+                    value,
+                    checked: isChecked,
+                    inputProps: {
+                      "aria-invalid": isStateInvalid ? true : void 0,
+                      "aria-errormessage": errorMessageId,
+                      "aria-label": ariaLabel,
+                      "aria-labelledby": ariaLabelledBy,
+                      "aria-describedby": ariaDescribedBy,
+                      ...inputProps
+                    },
+                    ...others
+                  }
+                )
+              }
+            )
+          ] }),
+          canShowError && /* @__PURE__ */ jsxRuntime.jsx(
+            WarningText.HvWarningText,
+            {
+              id: setId.setId(elementId, "error"),
+              className: classes.error,
+              disableBorder: true,
+              disableAdornment: true,
+              hideText: true,
+              children: validationMessage
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+exports.switchClasses = Switch_styles.staticClasses;
+exports.HvSwitch = HvSwitch;

package/dist/cjs/packages/core/src/Switch/Switch.styles.cjs

@@ -0,0 +1,62 @@
+"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("HvSwitch", {
+  root: {
+    display: "inline-flex",
+    flexDirection: "column",
+    alignItems: "flex-start"
+  },
+  label: {},
+  error: {},
+  container: {
+    display: "flex",
+    "&$left, &$right": {
+      alignItems: "center"
+    },
+    "&$left": {
+      flexDirection: "row",
+      paddingLeft: uikitStyles.theme.space.xs
+    },
+    "&$right": {
+      flexDirection: "row-reverse",
+      paddingRight: uikitStyles.theme.space.xs
+    },
+    "&$top": {
+      flexDirection: "column",
+      "&:hover": {
+        backgroundColor: "transparent"
+      },
+      "& $switchContainer:hover .HvBaseSwitch-root": {
+        backgroundColor: uikitStyles.theme.colors.bgHover
+      }
+    }
+  },
+  switchContainer: {
+    height: "32px",
+    display: "flex",
+    flexDirection: "column",
+    justifyContent: "center",
+    borderBottom: "1px solid transparent"
+  },
+  invalidSwitch: {
+    paddingBottom: "1px",
+    borderBottom: `1px solid ${uikitStyles.theme.form.errorColor}`
+  },
+  top: {},
+  left: {
+    "& .HvSwitch-label": {
+      paddingBottom: 0,
+      paddingRight: uikitStyles.theme.space.xxs
+    }
+  },
+  right: {
+    "& .HvSwitch-label": {
+      paddingBottom: 0,
+      paddingLeft: uikitStyles.theme.space.xxs
+    }
+  }
+});
+exports.staticClasses = staticClasses;
+exports.useClasses = useClasses;