@hitachivantara/uikit-react-core 6.8.1 → 6.9.0

package/dist/Table/TableRow/TableRow.styles.js

@@ -1,87 +1,67 @@
-import { createClasses } from "@hitachivantara/uikit-react-utils";
 import { theme } from "@hitachivantara/uikit-styles";
-const getBorderStyles = (color, rowBorderRadius) => {
-  return {
-    "& td": {
-      borderTop: `1px solid ${color}`,
-      borderBottom: `1px solid ${color}`
-    },
-    "& td:first-of-type": {
-      borderLeft: `1px solid ${color}`,
-      borderRadius: `${rowBorderRadius} 0 0 ${rowBorderRadius}`
-    },
-    "& td:last-of-type": {
-      borderRight: `1px solid ${color}`,
-      borderRadius: `0 ${rowBorderRadius} ${rowBorderRadius} 0`
-    }
-  };
+import { createClasses } from "@hitachivantara/uikit-react-utils";
+//#region src/Table/TableRow/TableRow.styles.tsx
+var getBorderStyles = (color, rowBorderRadius) => {
+	return {
+		"& td": {
+			borderTop: `1px solid ${color}`,
+			borderBottom: `1px solid ${color}`
+		},
+		"& td:first-of-type": {
+			borderLeft: `1px solid ${color}`,
+			borderRadius: `${rowBorderRadius} 0 0 ${rowBorderRadius}`
+		},
+		"& td:last-of-type": {
+			borderRight: `1px solid ${color}`,
+			borderRadius: `0 ${rowBorderRadius} ${rowBorderRadius} 0`
+		}
+	};
 };
-const { staticClasses, useClasses } = createClasses("HvTableRow", {
-  /** Styles applied to the component root class. */
-  root: {
-    color: "inherit",
-    backgroundColor: theme.colors.bgContainer,
-    verticalAlign: "middle",
-    alignContent: "center",
-    outline: 0,
-    ":is($hover,$striped):hover": {
-      backgroundColor: theme.colors.bgHover
-    }
-  },
-  /** Styles applied to the component root when inside a `HvTableHead`. */
-  head: {},
-  /** Styles applied to the component root when inside a `HvTableBody`. */
-  body: {},
-  /** Styles applied to the component root when inside a `HvTableFooter`. */
-  footer: {},
-  /** Styles applied to the component root when selected. */
-  selected: {
-    backgroundColor: theme.colors.bgPage
-  },
-  /** Styles applied to the component root when expanded. */
-  expanded: {
-    backgroundColor: theme.colors.bgContainer,
-    "& > *[role=cell]": {
-      borderBottom: "none"
-    }
-  },
-  /** Styles applied to the component root when striped. */
-  striped: {
-    "&:nth-of-type(even)": {
-      backgroundColor: theme.alpha("bgContainer", 0.6)
-    },
-    "&:nth-of-type(odd)": {
-      backgroundColor: "transparent"
-    }
-  },
-  /** Styles applied to the component root on hover. */
-  hover: {},
-  /** Styles applied to the component root when its table variant is list. */
-  variantList: {
-    // only applied on custom `display`
-    marginBottom: theme.space.xs,
-    borderRadius: theme.radii.round,
-    ...getBorderStyles(theme.colors.border, theme.radii.round),
-    backgroundColor: theme.colors.bgContainer,
-    "&$selected": {
-      ...getBorderStyles(theme.colors.text, theme.radii.round),
-      "&:hover": {
-        ...getBorderStyles(theme.colors.border, theme.radii.round)
-      }
-    },
-    "&:hover": {
-      ...getBorderStyles(theme.colors.border, theme.radii.round)
-    },
-    "&.HvIsFocused": {
-      borderRadius: theme.radii.round
-    }
-  },
-  /** Styles applied to the component root when its table variant is list. */
-  variantListHead: {
-    backgroundColor: "transparent"
-  }
+var { staticClasses, useClasses } = createClasses("HvTableRow", {
+	/** Styles applied to the component root class. */
+	root: {
+		color: "inherit",
+		backgroundColor: theme.colors.bgContainer,
+		verticalAlign: "middle",
+		alignContent: "center",
+		outline: 0,
+		":is($hover,$striped):hover": { backgroundColor: theme.colors.bgHover }
+	},
+	/** Styles applied to the component root when inside a `HvTableHead`. */
+	head: {},
+	/** Styles applied to the component root when inside a `HvTableBody`. */
+	body: {},
+	/** Styles applied to the component root when inside a `HvTableFooter`. */
+	footer: {},
+	/** Styles applied to the component root when selected. */
+	selected: { backgroundColor: theme.colors.bgPage },
+	/** Styles applied to the component root when expanded. */
+	expanded: {
+		backgroundColor: theme.colors.bgContainer,
+		"& > *[role=cell]": { borderBottom: "none" }
+	},
+	/** Styles applied to the component root when striped. */
+	striped: {
+		"&:nth-of-type(even)": { backgroundColor: theme.alpha("bgContainer", .6) },
+		"&:nth-of-type(odd)": { backgroundColor: "transparent" }
+	},
+	/** Styles applied to the component root on hover. */
+	hover: {},
+	/** Styles applied to the component root when its table variant is list. */
+	variantList: {
+		marginBottom: theme.space.xs,
+		borderRadius: theme.radii.round,
+		...getBorderStyles(theme.colors.border, theme.radii.round),
+		backgroundColor: theme.colors.bgContainer,
+		"&$selected": {
+			...getBorderStyles(theme.colors.text, theme.radii.round),
+			"&:hover": { ...getBorderStyles(theme.colors.border, theme.radii.round) }
+		},
+		"&:hover": { ...getBorderStyles(theme.colors.border, theme.radii.round) },
+		"&.HvIsFocused": { borderRadius: theme.radii.round }
+	},
+	/** Styles applied to the component root when its table variant is list. */
+	variantListHead: { backgroundColor: "transparent" }
 });
-export {
-  staticClasses,
-  useClasses
-};
+//#endregion
+export { staticClasses, useClasses };

package/dist/Table/TableSection/TableSection.js

@@ -1,21 +1,22 @@
-import { jsx } from "react/jsx-runtime";
-import { forwardRef } from "react";
-import { useDefaultProps } from "@hitachivantara/uikit-react-utils";
-import { useClasses } from "./TableSection.styles.js";
-import { staticClasses } from "./TableSection.styles.js";
 import { HvSection } from "../../Section/Section.js";
-const HvTableSection = forwardRef(
-  function HvTableSection2(props, ref) {
-    const {
-      classes: classesProp,
-      children,
-      ...others
-    } = useDefaultProps("HvTableSection", props);
-    const { classes } = useClasses(classesProp);
-    return /* @__PURE__ */ jsx(HvSection, { ref, classes, ...others, children });
-  }
-);
-export {
-  HvTableSection,
-  staticClasses as tableSectionClasses
-};
+import { useClasses } from "./TableSection.styles.js";
+import { useDefaultProps } from "@hitachivantara/uikit-react-utils";
+import { forwardRef } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/Table/TableSection/TableSection.tsx
+/**
+* The `HvTableSection` component is a wrapper for the `HvSection` component that applies
+* specific stylings for tables that follow the latest DS specifications.
+*/
+var HvTableSection = forwardRef(function HvTableSection(props, ref) {
+	const { classes: classesProp, children, ...others } = useDefaultProps("HvTableSection", props);
+	const { classes } = useClasses(classesProp);
+	return /* @__PURE__ */ jsx(HvSection, {
+		ref,
+		classes,
+		...others,
+		children
+	});
+});
+//#endregion
+export { HvTableSection };

package/dist/Table/TableSection/TableSection.styles.js

@@ -1,98 +1,65 @@
-import { createClasses } from "@hitachivantara/uikit-react-utils";
-import { theme } from "@hitachivantara/uikit-styles";
-import { staticClasses as staticClasses$1 } from "../../Pagination/Pagination.styles.js";
-import "../../Pagination/Pagination.js";
-import { staticClasses as staticClasses$2 } from "../../BulkActions/BulkActions.styles.js";
-import "../../BulkActions/BulkActions.js";
-import { staticClasses as staticClasses$3 } from "../TableCell/TableCell.styles.js";
-import "../TableCell/TableCell.js";
-import { staticClasses as staticClasses$4 } from "../TableRow/TableRow.styles.js";
-import "../TableRow/TableRow.js";
+import { staticClasses as staticClasses$1 } from "../../BulkActions/BulkActions.styles.js";
+import { staticClasses as staticClasses$2 } from "../../Pagination/Pagination.styles.js";
+import { staticClasses as staticClasses$3 } from "../TableContainer/TableContainer.styles.js";
+import { staticClasses as staticClasses$4 } from "../TableCell/TableCell.styles.js";
 import { staticClasses as staticClasses$5 } from "../TableHeader/TableHeader.styles.js";
-import "../TableHeader/TableHeader.js";
-import { staticClasses as staticClasses$6 } from "../TableContainer/TableContainer.styles.js";
-import "../TableContainer/TableContainer.js";
-const { staticClasses, useClasses } = createClasses("HvTableSection", {
-  root: {},
-  header: {},
-  actions: {},
-  content: {
-    marginTop: 0,
-    padding: 0,
-    // Apply border radius to the first child if there's not an header
-    "&:first-of-type": {
-      "& > :first-of-type": {
-        borderTopLeftRadius: "inherit",
-        borderTopRightRadius: "inherit"
-      }
-    },
-    "& > :last-child": {
-      borderBottomLeftRadius: "inherit",
-      borderBottomRightRadius: "inherit"
-    },
-    [`& .${staticClasses$6.root}`]: {
-      paddingBottom: 0,
-      borderTopLeftRadius: "inherit",
-      borderTopRightRadius: "inherit"
-    },
-    [`& .${staticClasses$5.head}`]: {
-      backgroundColor: theme.colors.bgPage,
-      borderBottomColor: theme.colors.bgPageSecondary,
-      [`&.${staticClasses$5.variantCheckbox}`]: {
-        borderRight: "none"
-      },
-      [`&.${staticClasses$5.variantActions}`]: {
-        borderLeft: "none"
-      }
-    },
-    // Remove border for the last table row
-    [`& .${staticClasses$4.root}`]: {
-      "&:last-child": {
-        [`& .${staticClasses$3.root}`]: { borderBottom: "none" }
-      }
-    },
-    [`& .${staticClasses$3.root}`]: {
-      borderBottomColor: theme.colors.borderSubtle
-    },
-    [`& .${staticClasses$3.variantCheckbox}`]: {
-      borderRight: "none"
-    },
-    [`& .${staticClasses$3.variantActions}`]: {
-      borderLeft: "none"
-    },
-    [`& .${staticClasses$2.root}`]: {
-      marginBottom: 0,
-      border: "none",
-      borderBottom: `1px solid ${theme.colors.borderSubtle}`,
-      padding: theme.spacing("xs", "sm")
-    },
-    [`& .${staticClasses$1.root}`]: {
-      margin: 0,
-      backgroundColor: theme.colors.bgPage,
-      padding: theme.space.xs,
-      borderTop: `1px solid ${theme.colors.borderSubtle}`,
-      borderBottomLeftRadius: "inherit",
-      borderBottomRightRadius: "inherit"
-    },
-    [`& .${staticClasses$1.pageSizeOptions}`]: {
-      left: theme.space.sm
-    },
-    [`& .${staticClasses$1.pageSizeHeader}`]: {
-      border: "none",
-      "&:hover": {
-        border: "none"
-      }
-    }
-  },
-  hidden: {},
-  raisedHeader: {
-    "& $content": {
-      paddingTop: 0
-    }
-  },
-  hasHeader: {}
+import { staticClasses as staticClasses$6 } from "../TableRow/TableRow.styles.js";
+import { theme } from "@hitachivantara/uikit-styles";
+import { createClasses } from "@hitachivantara/uikit-react-utils";
+//#region src/Table/TableSection/TableSection.styles.tsx
+var { staticClasses, useClasses } = createClasses("HvTableSection", {
+	root: {},
+	header: {},
+	actions: {},
+	content: {
+		marginTop: 0,
+		padding: 0,
+		"&:first-of-type": { "& > :first-of-type": {
+			borderTopLeftRadius: "inherit",
+			borderTopRightRadius: "inherit"
+		} },
+		"& > :last-child": {
+			borderBottomLeftRadius: "inherit",
+			borderBottomRightRadius: "inherit"
+		},
+		[`& .${staticClasses$3.root}`]: {
+			paddingBottom: 0,
+			borderTopLeftRadius: "inherit",
+			borderTopRightRadius: "inherit"
+		},
+		[`& .${staticClasses$5.head}`]: {
+			backgroundColor: theme.colors.bgPage,
+			borderBottomColor: theme.colors.bgPageSecondary,
+			[`&.${staticClasses$5.variantCheckbox}`]: { borderRight: "none" },
+			[`&.${staticClasses$5.variantActions}`]: { borderLeft: "none" }
+		},
+		[`& .${staticClasses$6.root}`]: { "&:last-child": { [`& .${staticClasses$4.root}`]: { borderBottom: "none" } } },
+		[`& .${staticClasses$4.root}`]: { borderBottomColor: theme.colors.borderSubtle },
+		[`& .${staticClasses$4.variantCheckbox}`]: { borderRight: "none" },
+		[`& .${staticClasses$4.variantActions}`]: { borderLeft: "none" },
+		[`& .${staticClasses$1.root}`]: {
+			marginBottom: 0,
+			border: "none",
+			borderBottom: `1px solid ${theme.colors.borderSubtle}`,
+			padding: theme.spacing("xs", "sm")
+		},
+		[`& .${staticClasses$2.root}`]: {
+			margin: 0,
+			backgroundColor: theme.colors.bgPage,
+			padding: theme.space.xs,
+			borderTop: `1px solid ${theme.colors.borderSubtle}`,
+			borderBottomLeftRadius: "inherit",
+			borderBottomRightRadius: "inherit"
+		},
+		[`& .${staticClasses$2.pageSizeOptions}`]: { left: theme.space.sm },
+		[`& .${staticClasses$2.pageSizeHeader}`]: {
+			border: "none",
+			"&:hover": { border: "none" }
+		}
+	},
+	hidden: {},
+	raisedHeader: { "& $content": { paddingTop: 0 } },
+	hasHeader: {}
 });
-export {
-  staticClasses,
-  useClasses
-};
+//#endregion
+export { staticClasses, useClasses };

package/dist/Table/TableSectionContext.js

@@ -1,5 +1,5 @@
 import { createContext } from "react";
-const TableSectionContext = createContext({});
-export {
-  TableSectionContext
-};
+//#region src/Table/TableSectionContext.ts
+var TableSectionContext = createContext({});
+//#endregion
+export { TableSectionContext };

package/dist/Table/hooks/useHvBulkActions.js

@@ -1,94 +1,59 @@
 import { useCallback } from "react";
-import { ensurePluginOrder, useGetLatest, makePropGetter } from "react-table";
-const useInstanceHook = (instance) => {
-  const { plugins, page, toggleAllPageRowsSelected, toggleAllRowsSelected } = instance;
-  ensurePluginOrder(plugins, ["useHvRowSelection"], "useHvBulkActions");
-  const getInstance = useGetLatest(instance);
-  const getHvBulkActionsProps = makePropGetter(
-    instance.getHooks().getHvBulkActionsProps,
-    {
-      instance: getInstance()
-    }
-  );
-  const isPaginated = !!page;
-  const invertedToggleAllRowsSelected = useCallback(() => {
-    if (!isPaginated) return toggleAllRowsSelected();
-    const {
-      additivePageBulkSelection,
-      subtractivePageBulkDeselection,
-      isNoRowsSelected,
-      isNoPageRowsSelected,
-      isAllSelectablePageRowsSelected,
-      isAllSelectablePageRowsUnselected
-    } = getInstance();
-    if (additivePageBulkSelection && subtractivePageBulkDeselection) {
-      return toggleAllPageRowsSelected(!isAllSelectablePageRowsSelected);
-    }
-    if (additivePageBulkSelection && !subtractivePageBulkDeselection) {
-      if (!isAllSelectablePageRowsSelected) {
-        return toggleAllPageRowsSelected(true);
-      }
-      return toggleAllRowsSelected(false);
-    }
-    if (!additivePageBulkSelection && !subtractivePageBulkDeselection) {
-      if (isNoRowsSelected) {
-        return toggleAllPageRowsSelected(true);
-      }
-      return toggleAllRowsSelected(false);
-    }
-    if (!additivePageBulkSelection && subtractivePageBulkDeselection) {
-      if (isNoRowsSelected) {
-        return toggleAllPageRowsSelected(true);
-      }
-      if (!isAllSelectablePageRowsUnselected) {
-        return toggleAllPageRowsSelected(false);
-      }
-      if (!isNoPageRowsSelected) {
-        return toggleAllPageRowsSelected(false);
-      }
-      return toggleAllRowsSelected(false);
-    }
-    return toggleAllPageRowsSelected();
-  }, [
-    getInstance,
-    isPaginated,
-    toggleAllPageRowsSelected,
-    toggleAllRowsSelected
-  ]);
-  Object.assign(instance, {
-    getHvBulkActionsProps,
-    invertedToggleAllRowsSelected,
-    additivePageBulkSelection: !!instance.additivePageBulkSelection,
-    subtractivePageBulkDeselection: !!instance.subtractivePageBulkDeselection
-  });
+import { ensurePluginOrder, makePropGetter, useGetLatest } from "react-table";
+//#region src/Table/hooks/useHvBulkActions.ts
+var useInstanceHook = (instance) => {
+	const { plugins, page, toggleAllPageRowsSelected, toggleAllRowsSelected } = instance;
+	ensurePluginOrder(plugins, ["useHvRowSelection"], "useHvBulkActions");
+	const getInstance = useGetLatest(instance);
+	const getHvBulkActionsProps = makePropGetter(instance.getHooks().getHvBulkActionsProps, { instance: getInstance() });
+	const isPaginated = !!page;
+	const invertedToggleAllRowsSelected = useCallback(() => {
+		if (!isPaginated) return toggleAllRowsSelected();
+		const { additivePageBulkSelection, subtractivePageBulkDeselection, isNoRowsSelected, isNoPageRowsSelected, isAllSelectablePageRowsSelected, isAllSelectablePageRowsUnselected } = getInstance();
+		if (additivePageBulkSelection && subtractivePageBulkDeselection) return toggleAllPageRowsSelected(!isAllSelectablePageRowsSelected);
+		if (additivePageBulkSelection && !subtractivePageBulkDeselection) {
+			if (!isAllSelectablePageRowsSelected) return toggleAllPageRowsSelected(true);
+			return toggleAllRowsSelected(false);
+		}
+		if (!additivePageBulkSelection && !subtractivePageBulkDeselection) {
+			if (isNoRowsSelected) return toggleAllPageRowsSelected(true);
+			return toggleAllRowsSelected(false);
+		}
+		if (!additivePageBulkSelection && subtractivePageBulkDeselection) {
+			if (isNoRowsSelected) return toggleAllPageRowsSelected(true);
+			if (!isAllSelectablePageRowsUnselected) return toggleAllPageRowsSelected(false);
+			if (!isNoPageRowsSelected) return toggleAllPageRowsSelected(false);
+			return toggleAllRowsSelected(false);
+		}
+		return toggleAllPageRowsSelected();
+	}, [
+		getInstance,
+		isPaginated,
+		toggleAllPageRowsSelected,
+		toggleAllRowsSelected
+	]);
+	Object.assign(instance, {
+		getHvBulkActionsProps,
+		invertedToggleAllRowsSelected,
+		additivePageBulkSelection: !!instance.additivePageBulkSelection,
+		subtractivePageBulkDeselection: !!instance.subtractivePageBulkDeselection
+	});
 };
-const defaultGetHvBulkActionsProps = (props, { instance }) => {
-  const {
-    rows,
-    initialRows,
-    selectedFlatRows,
-    state: { selectedRowIds = {} } = {},
-    page,
-    toggleAllRowsSelected,
-    invertedToggleAllRowsSelected,
-    showSelectAllPages = true,
-    applyToggleAllRowsSelectedToPrefilteredRows
-  } = instance;
-  const isPaginated = !!page;
-  const nextProps = {
-    numTotal: applyToggleAllRowsSelectedToPrefilteredRows ? initialRows.length : rows.length,
-    numSelected: applyToggleAllRowsSelectedToPrefilteredRows ? Object.keys(selectedRowIds).length : selectedFlatRows.length,
-    showSelectAllPages: showSelectAllPages && isPaginated,
-    onSelectAll: invertedToggleAllRowsSelected,
-    onSelectAllPages: toggleAllRowsSelected
-  };
-  return [props, nextProps];
+var defaultGetHvBulkActionsProps = (props, { instance }) => {
+	const { rows, initialRows, selectedFlatRows, state: { selectedRowIds = {} } = {}, page, toggleAllRowsSelected, invertedToggleAllRowsSelected, showSelectAllPages = true, applyToggleAllRowsSelectedToPrefilteredRows } = instance;
+	const isPaginated = !!page;
+	return [props, {
+		numTotal: applyToggleAllRowsSelectedToPrefilteredRows ? initialRows.length : rows.length,
+		numSelected: applyToggleAllRowsSelectedToPrefilteredRows ? Object.keys(selectedRowIds).length : selectedFlatRows.length,
+		showSelectAllPages: showSelectAllPages && isPaginated,
+		onSelectAll: invertedToggleAllRowsSelected,
+		onSelectAllPages: toggleAllRowsSelected
+	}];
 };
-const useHvBulkActions = (hooks) => {
-  hooks.getHvBulkActionsProps = [defaultGetHvBulkActionsProps];
-  hooks.useInstance.push(useInstanceHook);
+var useHvBulkActions = (hooks) => {
+	hooks.getHvBulkActionsProps = [defaultGetHvBulkActionsProps];
+	hooks.useInstance.push(useInstanceHook);
 };
 useHvBulkActions.pluginName = "useHvBulkActions";
-export {
-  useHvBulkActions
-};
+//#endregion
+export { useHvBulkActions };

package/dist/Table/hooks/useHvFilters.js

@@ -1,6 +1,6 @@
 import { useFilters } from "react-table";
-const useHvFilters = useFilters.bind({});
+//#region src/Table/hooks/useHvFilters.ts
+var useHvFilters = useFilters.bind({});
 useHvFilters.pluginName = "useHvFilters";
-export {
-  useHvFilters
-};
+//#endregion
+export { useHvFilters };

package/dist/Table/hooks/useHvGlobalFilter.js

@@ -1,6 +1,6 @@
 import { useGlobalFilter } from "react-table";
-const useHvGlobalFilter = useGlobalFilter.bind({});
+//#region src/Table/hooks/useHvGlobalFilter.ts
+var useHvGlobalFilter = useGlobalFilter.bind({});
 useHvGlobalFilter.pluginName = "useHvGlobalFilter";
-export {
-  useHvGlobalFilter
-};
+//#endregion
+export { useHvGlobalFilter };