@hitachivantara/uikit-react-core 6.8.1 → 6.9.0

package/dist/Pagination/Pagination.js

@@ -1,169 +1,181 @@
-import { jsxs, jsx, Fragment } from "react/jsx-runtime";
-import { forwardRef, useState, useCallback, useEffect } from "react";
-import { useTheme } from "@mui/material/styles";
-import useMediaQuery from "@mui/material/useMediaQuery";
-import { useDefaultProps, clamp } from "@hitachivantara/uikit-react-utils";
-import { useLabels } from "../hooks/useLabels.js";
 import { HvIcon } from "../icons.js";
+import { HvBaseInput } from "../BaseInput/BaseInput.js";
+import { useLabels } from "../hooks/useLabels.js";
+import { HvIconButton } from "../IconButton/IconButton.js";
 import { useClasses } from "./Pagination.styles.js";
-import { staticClasses } from "./Pagination.styles.js";
 import HvSelect, { Option } from "./Select.js";
-import { HvIconButton } from "../IconButton/IconButton.js";
-import { HvBaseInput } from "../BaseInput/BaseInput.js";
-const defaultPageSizeOptions = [5, 10, 20, 25, 50, 100];
-const DEFAULT_LABELS = {
-  /** The show label. */
-  pageSizePrev: "",
-  /** 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: "/",
-  /** 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"
+import { clamp, useDefaultProps } from "@hitachivantara/uikit-react-utils";
+import { forwardRef, useCallback, useEffect, useState } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { useTheme as useTheme$1 } from "@mui/material/styles";
+import useMediaQuery from "@mui/material/useMediaQuery";
+//#region src/Pagination/Pagination.tsx
+var defaultPageSizeOptions = [
+	5,
+	10,
+	20,
+	25,
+	50,
+	100
+];
+var DEFAULT_LABELS = {
+	/** The show label. */
+	pageSizePrev: "",
+	/** 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: "/",
+	/** 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 = forwardRef(function HvPagination2(props, ref) {
-  const {
-    classes: classesProp,
-    className,
-    pages = 1,
-    page = 0,
-    showPageSizeOptions = true,
-    pageSizeOptions = defaultPageSizeOptions,
-    pageSize = defaultPageSizeOptions[1],
-    showPageJump = true,
-    canPrevious,
-    canNext,
-    onPageChange,
-    onPageSizeChange,
-    labels: labelsProp,
-    showPageProps,
-    navigationProps,
-    currentPageInputProps,
-    ...others
-  } = useDefaultProps("HvPagination", props);
-  const { classes, cx } = useClasses(classesProp);
-  const labels = useLabels(DEFAULT_LABELS, labelsProp);
-  const muiTheme = useTheme();
-  const isXsDown = useMediaQuery(muiTheme.breakpoints.only("xs"));
-  const [pageInput, setPageInput] = useState(page);
-  const changePage = useCallback(
-    (newPage) => {
-      const safePage = Number.isNaN(newPage) ? page : clamp(newPage, pages - 1);
-      onPageChange?.(safePage);
-      setPageInput(safePage);
-    },
-    [page, pages, onPageChange]
-  );
-  useEffect(() => {
-    if (page >= pages && pages > 0) {
-      changePage(page);
-    }
-  }, [changePage, page, pages]);
-  useEffect(() => {
-    setPageInput(page);
-  }, [page]);
-  const renderPageJump = () => /* @__PURE__ */ jsx(
-    HvBaseInput,
-    {
-      inputProps: {
-        "aria-label": labels?.paginationInputLabel,
-        // We really want the native number input
-        type: "number"
-      },
-      classes: {
-        root: classes.pageJump,
-        input: classes.pageSizeInput
-      },
-      value: String(pageInput + 1),
-      onChange: (event, value) => setPageInput(Number(value) - 1),
-      onBlur: (evt) => changePage(Math.round(Number(evt.target.value)) - 1),
-      onKeyDown: (evt) => {
-        if (evt.key !== "Enter") return;
-        changePage(Math.round(Number(evt.currentTarget.value)) - 1);
-      },
-      disabled: pageSize === 0,
-      ...currentPageInputProps
-    }
-  );
-  return /* @__PURE__ */ jsxs("div", { ref, className: cx(classes.root, className), ...others, children: [
-    showPageSizeOptions && /* @__PURE__ */ jsx("div", { className: classes.pageSizeOptions, ...showPageProps, children: /* @__PURE__ */ jsxs(Fragment, { children: [
-      !isXsDown && labels.pageSizePrev && /* @__PURE__ */ jsx("span", { className: classes.pageSizeTextContainer, children: labels.pageSizePrev }),
-      /* @__PURE__ */ jsx(
-        HvSelect,
-        {
-          disabled: pageSize === 0,
-          "aria-label": labels.pageSizeSelectorDescription,
-          onChange: (evt, val) => onPageSizeChange?.(val),
-          value: pageSize,
-          classes: {
-            header: classes.pageSizeHeader,
-            root: classes.pageSizeRoot
-          },
-          children: pageSizeOptions.map((option) => /* @__PURE__ */ jsx(Option, { value: option, children: option }, option))
-        }
-      ),
-      !isXsDown && labels.pageSizeEntryName && /* @__PURE__ */ jsx("span", { className: classes.pageSizeTextContainer, children: labels.pageSizeEntryName })
-    ] }) }),
-    /* @__PURE__ */ jsxs("div", { className: classes.pageNavigator, ...navigationProps, children: [
-      /* @__PURE__ */ jsx(
-        HvIconButton,
-        {
-          className: classes.iconContainer,
-          disabled: !canPrevious,
-          onClick: () => changePage(0),
-          title: labels?.firstPage,
-          children: /* @__PURE__ */ jsx(HvIcon, { name: "Start", className: classes.icon, size: "xs" })
-        }
-      ),
-      /* @__PURE__ */ jsx(
-        HvIconButton,
-        {
-          className: classes.iconContainer,
-          disabled: !canPrevious,
-          onClick: () => changePage(page - 1),
-          title: labels?.previousPage,
-          children: /* @__PURE__ */ jsx(HvIcon, { name: "Backwards", className: classes.icon, size: "xs" })
-        }
-      ),
-      /* @__PURE__ */ jsxs("div", { className: classes.pageInfo, children: [
-        showPageJump ? renderPageJump() : /* @__PURE__ */ jsx("span", { children: `${page + 1}` }),
-        /* @__PURE__ */ jsx("span", { children: `${labels?.pagesSeparator} ` }),
-        /* @__PURE__ */ jsx("span", { children: pages })
-      ] }),
-      /* @__PURE__ */ jsx(
-        HvIconButton,
-        {
-          className: classes.iconContainer,
-          disabled: !canNext,
-          onClick: () => changePage(page + 1),
-          title: labels?.nextPage,
-          children: /* @__PURE__ */ jsx(HvIcon, { name: "Forwards", className: classes.icon, size: "xs" })
-        }
-      ),
-      /* @__PURE__ */ jsx(
-        HvIconButton,
-        {
-          className: classes.iconContainer,
-          disabled: !canNext,
-          onClick: () => changePage(pages - 1),
-          title: labels?.lastPage,
-          children: /* @__PURE__ */ jsx(HvIcon, { name: "End", className: classes.icon, size: "xs" })
-        }
-      )
-    ] })
-  ] });
+/**
+* Pagination is the process of dividing a document into discrete pages. It relates to how users interact
+* with structured content on a website or application.
+*/
+var HvPagination = forwardRef(function HvPagination(props, ref) {
+	const { classes: classesProp, className, pages = 1, page = 0, showPageSizeOptions = true, pageSizeOptions = defaultPageSizeOptions, pageSize = defaultPageSizeOptions[1], showPageJump = true, canPrevious, canNext, onPageChange, onPageSizeChange, labels: labelsProp, showPageProps, navigationProps, currentPageInputProps, ...others } = useDefaultProps("HvPagination", props);
+	const { classes, cx } = useClasses(classesProp);
+	const labels = useLabels(DEFAULT_LABELS, labelsProp);
+	const isXsDown = useMediaQuery(useTheme$1().breakpoints.only("xs"));
+	const [pageInput, setPageInput] = useState(page);
+	const changePage = useCallback((newPage) => {
+		const safePage = Number.isNaN(newPage) ? page : clamp(newPage, pages - 1);
+		onPageChange?.(safePage);
+		setPageInput(safePage);
+	}, [
+		page,
+		pages,
+		onPageChange
+	]);
+	useEffect(() => {
+		if (page >= pages && pages > 0) changePage(page);
+	}, [
+		changePage,
+		page,
+		pages
+	]);
+	useEffect(() => {
+		setPageInput(page);
+	}, [page]);
+	const renderPageJump = () => /* @__PURE__ */ jsx(HvBaseInput, {
+		inputProps: {
+			"aria-label": labels?.paginationInputLabel,
+			type: "number"
+		},
+		classes: {
+			root: classes.pageJump,
+			input: classes.pageSizeInput
+		},
+		value: String(pageInput + 1),
+		onChange: (event, value) => setPageInput(Number(value) - 1),
+		onBlur: (evt) => changePage(Math.round(Number(evt.target.value)) - 1),
+		onKeyDown: (evt) => {
+			if (evt.key !== "Enter") return;
+			changePage(Math.round(Number(evt.currentTarget.value)) - 1);
+		},
+		disabled: pageSize === 0,
+		...currentPageInputProps
+	});
+	return /* @__PURE__ */ jsxs("div", {
+		ref,
+		className: cx(classes.root, className),
+		...others,
+		children: [showPageSizeOptions && /* @__PURE__ */ jsx("div", {
+			className: classes.pageSizeOptions,
+			...showPageProps,
+			children: /* @__PURE__ */ jsxs(Fragment$1, { children: [
+				!isXsDown && labels.pageSizePrev && /* @__PURE__ */ jsx("span", {
+					className: classes.pageSizeTextContainer,
+					children: labels.pageSizePrev
+				}),
+				/* @__PURE__ */ jsx(HvSelect, {
+					disabled: pageSize === 0,
+					"aria-label": labels.pageSizeSelectorDescription,
+					onChange: (evt, val) => onPageSizeChange?.(val),
+					value: pageSize,
+					classes: {
+						header: classes.pageSizeHeader,
+						root: classes.pageSizeRoot
+					},
+					children: pageSizeOptions.map((option) => /* @__PURE__ */ jsx(Option, {
+						value: option,
+						children: option
+					}, option))
+				}),
+				!isXsDown && labels.pageSizeEntryName && /* @__PURE__ */ jsx("span", {
+					className: classes.pageSizeTextContainer,
+					children: labels.pageSizeEntryName
+				})
+			] })
+		}), /* @__PURE__ */ jsxs("div", {
+			className: classes.pageNavigator,
+			...navigationProps,
+			children: [
+				/* @__PURE__ */ jsx(HvIconButton, {
+					className: classes.iconContainer,
+					disabled: !canPrevious,
+					onClick: () => changePage(0),
+					title: labels?.firstPage,
+					children: /* @__PURE__ */ jsx(HvIcon, {
+						name: "Start",
+						className: classes.icon,
+						size: "xs"
+					})
+				}),
+				/* @__PURE__ */ jsx(HvIconButton, {
+					className: classes.iconContainer,
+					disabled: !canPrevious,
+					onClick: () => changePage(page - 1),
+					title: labels?.previousPage,
+					children: /* @__PURE__ */ jsx(HvIcon, {
+						name: "Backwards",
+						className: classes.icon,
+						size: "xs"
+					})
+				}),
+				/* @__PURE__ */ jsxs("div", {
+					className: classes.pageInfo,
+					children: [
+						showPageJump ? renderPageJump() : /* @__PURE__ */ jsx("span", { children: `${page + 1}` }),
+						/* @__PURE__ */ jsx("span", { children: `${labels?.pagesSeparator} ` }),
+						/* @__PURE__ */ jsx("span", { children: pages })
+					]
+				}),
+				/* @__PURE__ */ jsx(HvIconButton, {
+					className: classes.iconContainer,
+					disabled: !canNext,
+					onClick: () => changePage(page + 1),
+					title: labels?.nextPage,
+					children: /* @__PURE__ */ jsx(HvIcon, {
+						name: "Forwards",
+						className: classes.icon,
+						size: "xs"
+					})
+				}),
+				/* @__PURE__ */ jsx(HvIconButton, {
+					className: classes.iconContainer,
+					disabled: !canNext,
+					onClick: () => changePage(pages - 1),
+					title: labels?.lastPage,
+					children: /* @__PURE__ */ jsx(HvIcon, {
+						name: "End",
+						className: classes.icon,
+						size: "xs"
+					})
+				})
+			]
+		})]
+	});
 });
-export {
-  HvPagination,
-  staticClasses as paginationClasses
-};
+//#endregion
+export { HvPagination };

package/dist/Pagination/Pagination.styles.js

@@ -1,92 +1,88 @@
-import { createClasses } from "@hitachivantara/uikit-react-utils";
-import { theme } from "@hitachivantara/uikit-styles";
 import { staticClasses as staticClasses$1 } from "../BaseDropdown/BaseDropdown.styles.js";
-import "../BaseDropdown/BaseDropdown.js";
-const { staticClasses, useClasses } = createClasses("HvPagination", {
-  /** Styles applied to the component root class. */
-  root: {
-    position: "relative",
-    zIndex: 1,
-    display: "flex",
-    justifyContent: "space-between",
-    alignItems: "center",
-    flexWrap: "wrap",
-    marginTop: theme.space.sm,
-    ...theme.typography.caption1
-  },
-  /** Styles applied to the page size selector container. */
-  pageSizeOptions: {
-    display: "flex",
-    gap: theme.space.xs,
-    height: 24
-  },
-  pageSizeHeader: {
-    height: 24,
-    display: "flex",
-    alignItems: "center",
-    [`& .${staticClasses$1.arrowContainer}`]: {
-      display: "flex",
-      alignItems: "center",
-      top: "unset",
-      height: 24,
-      "> svg": {
-        marginTop: 0,
-        marginBottom: 0
-      }
-    }
-  },
-  pageSizeRoot: {
-    display: "inline-block",
-    width: "auto"
-  },
-  /** Styles applied to the element that holds the labels for the page size selector */
-  pageSizeTextContainer: {
-    display: "flex",
-    alignItems: "center",
-    justifyContent: "center",
-    height: "24px",
-    padding: "8px 0"
-  },
-  /** Styles applied to the page navigation container. */
-  pageNavigator: {
-    display: "flex",
-    alignItems: "center",
-    justifyContent: "center",
-    flex: 1,
-    gap: theme.space.xs
-  },
-  /** Styles applied to each navigation `HvButton` icon container. */
-  iconContainer: {
-    padding: 0
-  },
-  /** Styles applied to each navigation icon. */
-  icon: {},
-  /** Styles applied to the central page information container. */
-  pageInfo: {
-    display: "inline-flex",
-    gap: 4,
-    whiteSpace: "nowrap",
-    alignItems: "center"
-  },
-  /** Styles applied to the page selector input container. */
-  pageJump: {
-    width: 24,
-    minWidth: 24,
-    backgroundColor: "transparent",
-    height: "24px",
-    "&, & $pageSizeInput": {
-      fontSize: "inherit",
-      lineHeight: "inherit"
-    }
-  },
-  /** Styles passed down to the page selector Input component as `input`. */
-  pageSizeInput: {
-    margin: 0,
-    textAlign: "center",
-    MozAppearance: "textfield"
-  }
+import { theme } from "@hitachivantara/uikit-styles";
+import { createClasses } from "@hitachivantara/uikit-react-utils";
+//#region src/Pagination/Pagination.styles.tsx
+var { staticClasses, useClasses } = createClasses("HvPagination", {
+	/** Styles applied to the component root class. */
+	root: {
+		position: "relative",
+		zIndex: 1,
+		display: "flex",
+		justifyContent: "space-between",
+		alignItems: "center",
+		flexWrap: "wrap",
+		marginTop: theme.space.sm,
+		...theme.typography.caption1
+	},
+	/** Styles applied to the page size selector container. */
+	pageSizeOptions: {
+		display: "flex",
+		gap: theme.space.xs,
+		height: 24
+	},
+	pageSizeHeader: {
+		height: 24,
+		display: "flex",
+		alignItems: "center",
+		[`& .${staticClasses$1.arrowContainer}`]: {
+			display: "flex",
+			alignItems: "center",
+			top: "unset",
+			height: 24,
+			"> svg": {
+				marginTop: 0,
+				marginBottom: 0
+			}
+		}
+	},
+	pageSizeRoot: {
+		display: "inline-block",
+		width: "auto"
+	},
+	/** Styles applied to the element that holds the labels for the page size selector */
+	pageSizeTextContainer: {
+		display: "flex",
+		alignItems: "center",
+		justifyContent: "center",
+		height: "24px",
+		padding: "8px 0"
+	},
+	/** Styles applied to the page navigation container. */
+	pageNavigator: {
+		display: "flex",
+		alignItems: "center",
+		justifyContent: "center",
+		flex: 1,
+		gap: theme.space.xs
+	},
+	/** Styles applied to each navigation `HvButton` icon container. */
+	iconContainer: { padding: 0 },
+	/** Styles applied to each navigation icon. */
+	icon: {},
+	/** Styles applied to the central page information container. */
+	pageInfo: {
+		display: "inline-flex",
+		gap: 4,
+		whiteSpace: "nowrap",
+		alignItems: "center"
+	},
+	/** Styles applied to the page selector input container. */
+	pageJump: {
+		width: 24,
+		minWidth: 24,
+		backgroundColor: "transparent",
+		height: "24px",
+		"&, & $pageSizeInput": {
+			fontSize: "inherit",
+			lineHeight: "inherit"
+		}
+	},
+	/** Styles passed down to the page selector Input component as `input`. */
+	pageSizeInput: {
+		margin: 0,
+		textAlign: "center",
+		MozAppearance: "textfield"
+	}
 });
-export {
-  staticClasses,
-  useClasses
-};
+//#endregion
+export { staticClasses, useClasses };

package/dist/Pagination/Select.js

@@ -1,63 +1,54 @@
-import { jsx } from "react/jsx-runtime";
-import { useState } from "react";
-import { useDefaultProps } from "@hitachivantara/uikit-react-utils";
-import { useClasses } from "./Select.styles.js";
-import { HvBaseDropdown } from "../BaseDropdown/BaseDropdown.js";
+import { HvListItem } from "../ListContainer/ListItem/ListItem.js";
 import { HvPanel } from "../Panel/Panel.js";
+import { HvBaseDropdown } from "../BaseDropdown/BaseDropdown.js";
 import { HvSelectionList } from "../SelectionList/SelectionList.js";
-import { HvListItem } from "../ListContainer/ListItem/ListItem.js";
-const Option = ({ ...props }) => /* @__PURE__ */ jsx(HvListItem, { ...props });
-const HvSelect = (props) => {
-  const {
-    className,
-    classes: classesProp,
-    onChange,
-    disabled,
-    value,
-    children,
-    ...others
-  } = useDefaultProps("HvPaginationSelect", props);
-  const { classes } = useClasses(classesProp);
-  const [open, setOpen] = 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__ */ jsx(
-    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__ */ jsx(HvPanel, { children: /* @__PURE__ */ jsx(HvSelectionList, { value, onChange: handleSelect, children }) })
-    }
-  );
-};
-export {
-  Option,
-  HvSelect as default
+import { useClasses } from "./Select.styles.js";
+import { useDefaultProps } from "@hitachivantara/uikit-react-utils";
+import { useState } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/Pagination/Select.tsx
+var Option = ({ ...props }) => /* @__PURE__ */ jsx(HvListItem, { ...props });
+var HvSelect = (props) => {
+	const { className, classes: classesProp, onChange, disabled, value, children, ...others } = useDefaultProps("HvPaginationSelect", props);
+	const { classes } = useClasses(classesProp);
+	const [open, setOpen] = useState(false);
+	const handleSelect = (evt, val) => {
+		onChange?.(evt, val);
+		setOpen(false);
+	};
+	const handleToggle = (_evt, s) => {
+		setOpen(s);
+	};
+	const setFocusToContent = (containerRef) => {
+		(containerRef != null ? [...containerRef.getElementsByTagName("li")] : []).every((listItem) => {
+			if (listItem.tabIndex >= 0) {
+				listItem.focus();
+				return false;
+			}
+			return true;
+		});
+	};
+	return /* @__PURE__ */ jsx(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__ */ jsx(HvPanel, { children: /* @__PURE__ */ jsx(HvSelectionList, {
+			value,
+			onChange: handleSelect,
+			children
+		}) })
+	});
 };
+//#endregion
+export { Option, HvSelect as default };