@hitachivantara/uikit-react-core 5.102.1 → 5.104.0

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

@@ -0,0 +1,41 @@
+"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 LoadingContainer_styles = require("./LoadingContainer.styles.cjs");
+const Loading = require("../Loading/Loading.cjs");
+const HvLoadingContainer = a.forwardRef(function HvLoadingContainer2(props, ref) {
+  const {
+    children,
+    className,
+    classes: classesProp,
+    hidden,
+    small,
+    label,
+    "aria-label": ariaLabelProp,
+    opacity,
+    ...others
+  } = uikitReactUtils.useDefaultProps("HvLoadingContainer", props);
+  const { classes, cx } = LoadingContainer_styles.useClasses(classesProp);
+  const ariaLabel = ariaLabelProp || typeof label === "string" && label || "Loading";
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { ref, className: cx(classes.root, className), ...others, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      Loading.HvLoading,
+      {
+        className: classes.loading,
+        role: "progressbar",
+        small,
+        label,
+        hidden,
+        "aria-label": ariaLabel,
+        style: uikitReactUtils.mergeStyles(void 0, {
+          "--opacity": opacity && `${opacity * 100}%`
+        })
+      }
+    ),
+    children
+  ] });
+});
+exports.loadingContainerClasses = LoadingContainer_styles.staticClasses;
+exports.HvLoadingContainer = HvLoadingContainer;

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

@@ -0,0 +1,30 @@
+"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 Login_styles = require("./Login.styles.cjs");
+const HvLogin = a.forwardRef(function HvLogin2(props, ref) {
+  const {
+    className,
+    classes: classesProp,
+    children,
+    background,
+    ...others
+  } = uikitReactUtils.useDefaultProps("HvLogin", props);
+  const { classes, cx } = Login_styles.useClasses(classesProp);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      ref,
+      className: cx(classes.root, className),
+      style: {
+        backgroundImage: background && `url(${background})`
+      },
+      ...others,
+      children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: classes.formContainer, children })
+    }
+  );
+});
+exports.loginClasses = Login_styles.staticClasses;
+exports.HvLogin = HvLogin;

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

@@ -0,0 +1,62 @@
+"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 MultiButton_styles = require("./MultiButton.styles.cjs");
+const HvMultiButton = (props) => {
+  const {
+    className,
+    children,
+    classes: classesProp,
+    disabled = false,
+    vertical = false,
+    variant = "secondarySubtle",
+    size,
+    split,
+    ...others
+  } = uikitReactUtils.useDefaultProps("HvMultiButton", props);
+  const { classes, cx } = MultiButton_styles.useClasses(classesProp);
+  const buttons = a.useMemo(() => {
+    const btns = [];
+    a.Children.forEach(children, (child) => {
+      if (child && a.isValidElement(child)) {
+        btns.push(child);
+      }
+    });
+    return btns;
+  }, [children]);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      className: cx(
+        classes.root,
+        {
+          [classes.multiple]: !split,
+          [classes.vertical]: !split && vertical,
+          [classes[variant]]: variant,
+          // TODO - remove in v6
+          [classes.splitGroup]: split,
+          [classes.splitGroupDisabled]: split && disabled
+        },
+        className
+      ),
+      ...others,
+      children: buttons.map((child, index) => {
+        return a.cloneElement(child, {
+          key: index,
+          variant,
+          disabled: disabled || child.props.disabled,
+          size,
+          className: cx(classes.button, child.props.className, {
+            [classes.firstButton]: index === 0,
+            [classes.lastButton]: index === buttons.length - 1,
+            [classes.selected]: child.props.selected
+          })
+        });
+      })
+    }
+  );
+};
+exports.multiButtonClasses = MultiButton_styles.staticClasses;
+exports.HvMultiButton = HvMultiButton;

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

@@ -0,0 +1,54 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const a = require("react");
+const utils = require("@mui/material/utils");
+const uikitReactUtils = require("@hitachivantara/uikit-react-utils");
+const icons = require("../icons.cjs");
+const utils$1 = require("../Input/utils.cjs");
+const NumberInput_styles = require("./NumberInput.styles.cjs");
+const Adornment = require("../FormElement/Adornment/Adornment.cjs");
+const Input = require("../Input/Input.cjs");
+const HvNumberInput = a.forwardRef(function HvNumberInput2(props, ref) {
+  const {
+    classes: classesProp,
+    className,
+    readOnly,
+    ...others
+  } = uikitReactUtils.useDefaultProps("HvNumberInput", props);
+  const { classes, cx } = NumberInput_styles.useClasses(classesProp);
+  const inputRef = a.useRef(null);
+  const forkedRef = utils.useForkRef(ref, inputRef);
+  const buttons = a.useMemo(() => {
+    const handleIncrease = () => {
+      if (inputRef.current) {
+        inputRef.current.stepUp();
+        utils$1.changeInputValue(inputRef.current, inputRef.current.value);
+      }
+    };
+    const handleDecrease = () => {
+      if (inputRef.current) {
+        inputRef.current.stepDown();
+        utils$1.changeInputValue(inputRef.current, inputRef.current.value);
+      }
+    };
+    return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(Adornment.HvAdornment, { icon: /* @__PURE__ */ jsxRuntime.jsx(icons.HvIcon, { name: "Remove" }), onClick: handleDecrease }),
+      /* @__PURE__ */ jsxRuntime.jsx(Adornment.HvAdornment, { icon: /* @__PURE__ */ jsxRuntime.jsx(icons.HvIcon, { name: "Add" }), onClick: handleIncrease })
+    ] });
+  }, []);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    Input.HvInput,
+    {
+      ref: forkedRef,
+      type: "number",
+      className: cx(classes.root, className),
+      endAdornment: !readOnly && buttons,
+      classes,
+      readOnly,
+      disableClear: true,
+      ...others
+    }
+  );
+});
+exports.HvNumberInput = HvNumberInput;

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

@@ -0,0 +1,87 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const a = require("react");
+const reactResizeDetector = require("react-resize-detector");
+const uikitReactUtils = require("@hitachivantara/uikit-react-utils");
+const OverflowTooltip_styles = require("./OverflowTooltip.styles.cjs");
+const Tooltip = require("../Tooltip/Tooltip.cjs");
+const Typography = require("../Typography/Typography.cjs");
+const isParagraph = (children = "") => /\s/.test(children);
+const HvOverflowTooltip = (props) => {
+  const {
+    id,
+    classes: classesProp,
+    className,
+    data,
+    open,
+    paragraphOverflow,
+    placement = "top-start",
+    tooltipsProps
+  } = uikitReactUtils.useDefaultProps("HvOverflowTooltip", props);
+  const { classes, cx } = OverflowTooltip_styles.useClasses(classesProp);
+  const {
+    height = 0,
+    width = 0,
+    ref
+  } = reactResizeDetector.useResizeDetector({
+    refreshMode: "debounce",
+    refreshOptions: {
+      trailing: true
+    },
+    handleHeight: false
+  });
+  const isParag = a.useMemo(
+    () => paragraphOverflow && isParagraph(data?.toString()),
+    [data, paragraphOverflow]
+  );
+  const isOverflowing = a.useMemo(() => {
+    if (isParag) {
+      const scrollHeight = ref.current?.scrollHeight || 0;
+      return scrollHeight - height >= 1;
+    }
+    const scrollWidth = ref.current?.scrollWidth || 0;
+    return scrollWidth - width >= 1;
+  }, [height, isParag, ref, width]);
+  const content = a.useMemo(
+    () => /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        ref,
+        className: cx(
+          {
+            [classes.tooltipAnchor]: !isParag,
+            [classes.tooltipAnchorParagraph]: isParag
+          },
+          className
+        ),
+        children: data
+      }
+    ),
+    [
+      className,
+      classes.tooltipAnchor,
+      classes.tooltipAnchorParagraph,
+      cx,
+      data,
+      isParag,
+      ref
+    ]
+  );
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    Tooltip.HvTooltip,
+    {
+      id,
+      disableHoverListener: !isOverflowing,
+      open,
+      placement,
+      title: /* @__PURE__ */ jsxRuntime.jsx(Typography.HvTypography, { className: classes.tooltipData, variant: "body", children: data }),
+      "aria-label": null,
+      "aria-labelledby": null,
+      ...tooltipsProps,
+      children: content
+    }
+  );
+};
+exports.overflowTooltipClasses = OverflowTooltip_styles.staticClasses;
+exports.HvOverflowTooltip = HvOverflowTooltip;

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

@@ -0,0 +1,210 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const a = require("react");
+const styles = require("@mui/material/styles");
+const useMediaQuery = require("@mui/material/useMediaQuery");
+const uikitReactUtils = require("@hitachivantara/uikit-react-utils");
+const useLabels = require("../hooks/useLabels.cjs");
+const icons = require("../icons.cjs");
+const setId = require("../utils/setId.cjs");
+const Pagination_styles = require("./Pagination.styles.cjs");
+const Select = require("./Select.cjs");
+const Typography = require("../Typography/Typography.cjs");
+const IconButton = require("../IconButton/IconButton.cjs");
+const Input = require("../Input/Input.cjs");
+const _interopDefault = (e) => e && e.__esModule ? e : { default: e };
+const useMediaQuery__default = /* @__PURE__ */ _interopDefault(useMediaQuery);
+const defaultPageSizeOptions = [5, 10, 20, 25, 50, 100];
+const DEFAULT_LABELS = {
+  /** The show label. */
+  pageSizePrev: "Show",
+  /** Indicate the units of the page size selection. */
+  pageSizeEntryName: "rows",
+  /** Used for the aria-label of the selection of number of unit.s */
+  pageSizeSelectorDescription: "Select how many to display",
+  /** Separator of current page and total pages. */
+  pagesSeparator: "/",
+  /** Title of button `firstPage`. @deprecated Use `firstPage` instead. */
+  paginationFirstPageTitle: "First page",
+  /** Title of button `previousPage`. @deprecated Use `previousPage` instead. */
+  paginationPreviousPageTitle: "Previous page",
+  /** Title of button `nextPage`. @deprecated Use `nextPage` instead. */
+  paginationNextPageTitle: "Next page",
+  /** Title of button `lastPage`. @deprecated Use `lastPage` instead. */
+  paginationLastPageTitle: "Last page",
+  /** Aria-label passed to the page input. */
+  paginationInputLabel: "Current page",
+  /** Label of the first page button */
+  firstPage: "First Page",
+  /** Label of the previous page button */
+  previousPage: "Previous Page",
+  /** Label of the next page button */
+  nextPage: "Next Page",
+  /** Label of the last page button */
+  lastPage: "Last Page"
+};
+const HvPagination = a.forwardRef(function HvPagination2(props, ref) {
+  const {
+    classes: classesProp,
+    className,
+    id,
+    pages = 1,
+    page = 0,
+    showPageSizeOptions = true,
+    pageSizeOptions = defaultPageSizeOptions,
+    pageSize = defaultPageSizeOptions[1],
+    showPageJump = true,
+    canPrevious = false,
+    canNext = false,
+    onPageChange,
+    onPageSizeChange,
+    labels: labelsProp,
+    showPageProps,
+    navigationProps,
+    currentPageInputProps,
+    ...others
+  } = uikitReactUtils.useDefaultProps("HvPagination", props);
+  const { classes, cx } = Pagination_styles.useClasses(classesProp);
+  const labels = useLabels.useLabels(DEFAULT_LABELS, labelsProp);
+  const muiTheme = styles.useTheme();
+  const isXsDown = useMediaQuery__default.default(muiTheme.breakpoints.down("xs"));
+  const [pageInput, setPageInput] = a.useState(page);
+  const changePage = a.useCallback(
+    (newPage) => {
+      const safePage = Number.isNaN(newPage) ? page : uikitReactUtils.clamp(newPage, pages - 1);
+      onPageChange?.(safePage);
+      setPageInput(safePage);
+    },
+    [page, pages, onPageChange]
+  );
+  a.useEffect(() => {
+    if (page >= pages && pages > 0) {
+      changePage(page);
+    }
+  }, [changePage, page, pages]);
+  a.useEffect(() => {
+    setPageInput(page);
+  }, [page]);
+  const renderPageJump = () => /* @__PURE__ */ jsxRuntime.jsx("div", { className: classes.pageJump, children: /* @__PURE__ */ jsxRuntime.jsx(
+    Input.HvInput,
+    {
+      id: setId.setId(id, "currentPage"),
+      labels,
+      inputProps: {
+        "aria-label": labels?.paginationInputLabel,
+        // We really want the native number input
+        type: "number"
+      },
+      classes: {
+        root: classes?.pageSizeInputContainer,
+        input: classes?.pageSizeInput,
+        inputRoot: classes?.pageSizeInputRoot
+      },
+      value: String(pageInput + 1),
+      onChange: (event, value) => setPageInput(Number(value) - 1),
+      onBlur: (evt, value) => changePage(Math.round(Number(value)) - 1),
+      onEnter: (evt, value) => changePage(Math.round(Number(value)) - 1),
+      disabled: pageSize === 0,
+      disableClear: true,
+      ...currentPageInputProps
+    }
+  ) });
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { ref, id, className: cx(classes.root, className), ...others, children: [
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: classes.pageSizeOptions, ...showPageProps, children: showPageSizeOptions && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+      !isXsDown && /* @__PURE__ */ jsxRuntime.jsx(
+        Typography.HvTypography,
+        {
+          component: "span",
+          className: classes?.pageSizeTextContainer,
+          children: labels?.pageSizePrev
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        Select.default,
+        {
+          id: setId.setId(id, "pageSize"),
+          disabled: pageSize === 0,
+          className: classes.pageSizeOptionsSelect,
+          "aria-label": labels?.pageSizeSelectorDescription,
+          onChange: (_, val) => onPageSizeChange?.(val),
+          value: pageSize,
+          classes: {
+            header: classes.pageSizeHeader,
+            root: classes.pageSizeRoot
+          },
+          children: pageSizeOptions.map((option) => /* @__PURE__ */ jsxRuntime.jsx(Select.Option, { value: option, children: option }, option))
+        }
+      ),
+      !isXsDown && /* @__PURE__ */ jsxRuntime.jsx(
+        Typography.HvTypography,
+        {
+          component: "span",
+          className: classes.pageSizeTextContainer,
+          children: labels?.pageSizeEntryName
+        }
+      )
+    ] }) }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: classes.pageNavigator, ...navigationProps, children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        IconButton.HvIconButton,
+        {
+          id: setId.setId(id, "firstPage-button"),
+          className: classes.iconContainer,
+          disabled: !canPrevious,
+          onClick: () => changePage(0),
+          title: labels?.firstPage || labels?.paginationFirstPageTitle,
+          children: /* @__PURE__ */ jsxRuntime.jsx(icons.HvIcon, { name: "Start", className: classes.icon, size: "xs" })
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        IconButton.HvIconButton,
+        {
+          id: setId.setId(id, "previousPage-button"),
+          className: classes.iconContainer,
+          disabled: !canPrevious,
+          onClick: () => changePage(page - 1),
+          title: labels?.previousPage || labels?.paginationPreviousPageTitle,
+          children: /* @__PURE__ */ jsxRuntime.jsx(icons.HvIcon, { name: "Backwards", className: classes.icon, size: "xs" })
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: classes.pageInfo, children: [
+        showPageJump ? renderPageJump() : /* @__PURE__ */ jsxRuntime.jsx(Typography.HvTypography, { variant: "caption2", component: "span", children: `${page + 1}` }),
+        /* @__PURE__ */ jsxRuntime.jsx(Typography.HvTypography, { component: "span", children: `${labels?.pagesSeparator} ` }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          Typography.HvTypography,
+          {
+            component: "span",
+            id: setId.setId(id, "totalPages"),
+            className: classes.totalPagesTextContainer,
+            children: pages
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        IconButton.HvIconButton,
+        {
+          id: setId.setId(id, "nextPage-button"),
+          className: classes.iconContainer,
+          disabled: !canNext,
+          onClick: () => changePage(page + 1),
+          title: labels?.nextPage || labels?.paginationNextPageTitle,
+          children: /* @__PURE__ */ jsxRuntime.jsx(icons.HvIcon, { name: "Forwards", className: classes.icon, size: "xs" })
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        IconButton.HvIconButton,
+        {
+          id: setId.setId(id, "lastPage-button"),
+          className: classes.iconContainer,
+          disabled: !canNext,
+          onClick: () => changePage(pages - 1),
+          title: labels?.lastPage || labels?.paginationLastPageTitle,
+          children: /* @__PURE__ */ jsxRuntime.jsx(icons.HvIcon, { name: "End", className: classes.icon, size: "xs" })
+        }
+      )
+    ] })
+  ] });
+});
+exports.paginationClasses = Pagination_styles.staticClasses;
+exports.HvPagination = HvPagination;

package/dist/cjs/packages/core/src/Pagination/Select.cjs

@@ -0,0 +1,63 @@
+"use strict";
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
+const jsxRuntime = require("react/jsx-runtime");
+const a = require("react");
+const uikitReactUtils = require("@hitachivantara/uikit-react-utils");
+const Select_styles = require("./Select.styles.cjs");
+const BaseDropdown = require("../BaseDropdown/BaseDropdown.cjs");
+const Panel = require("../Panel/Panel.cjs");
+const SelectionList = require("../SelectionList/SelectionList.cjs");
+const ListItem = require("../ListContainer/ListItem/ListItem.cjs");
+const Option = ({ ...props }) => /* @__PURE__ */ jsxRuntime.jsx(ListItem.HvListItem, { ...props });
+const HvSelect = (props) => {
+  const {
+    className,
+    classes: classesProp,
+    onChange,
+    disabled,
+    value,
+    children,
+    ...others
+  } = uikitReactUtils.useDefaultProps("HvPaginationSelect", props);
+  const { classes } = Select_styles.useClasses(classesProp);
+  const [open, setOpen] = a.useState(false);
+  const handleSelect = (evt, val) => {
+    onChange?.(evt, val);
+    setOpen(false);
+  };
+  const handleToggle = (_evt, s) => {
+    setOpen(s);
+  };
+  const setFocusToContent = (containerRef) => {
+    const listItems = containerRef != null ? [...containerRef.getElementsByTagName("li")] : [];
+    listItems.every((listItem) => {
+      if (listItem.tabIndex >= 0) {
+        listItem.focus();
+        return false;
+      }
+      return true;
+    });
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    BaseDropdown.HvBaseDropdown,
+    {
+      className,
+      classes: {
+        selection: classes.selection,
+        header: classes.header,
+        headerOpen: classes.headerOpen,
+        root: classes.root
+      },
+      expanded: open,
+      onToggle: handleToggle,
+      onContainerCreation: setFocusToContent,
+      placeholder: value,
+      disabled,
+      variableWidth: true,
+      ...others,
+      children: /* @__PURE__ */ jsxRuntime.jsx(Panel.HvPanel, { children: /* @__PURE__ */ jsxRuntime.jsx(SelectionList.HvSelectionList, { value, onChange: handleSelect, children }) })
+    }
+  );
+};
+exports.Option = Option;
+exports.default = HvSelect;

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

@@ -0,0 +1,20 @@
+"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 Panel_styles = require("./Panel.styles.cjs");
+const HvPanel = a.forwardRef(
+  function HvPanel2(props, ref) {
+    const {
+      className,
+      classes: classesProp,
+      children,
+      ...others
+    } = uikitReactUtils.useDefaultProps("HvPanel", props);
+    const { classes, cx } = Panel_styles.useClasses(classesProp);
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { ref, className: cx(classes.root, className), ...others, children });
+  }
+);
+exports.panelClasses = Panel_styles.staticClasses;
+exports.HvPanel = HvPanel;