@hitachivantara/uikit-react-core 6.8.2 → 6.9.0

package/dist/FilterGroup/FilterContent/HeaderButton.js

@@ -1,104 +1,81 @@
-import { jsx, jsxs } from "react/jsx-runtime";
-import { forwardRef } from "react";
-import { useDefaultProps, createClasses } from "@hitachivantara/uikit-react-utils";
-import { theme } from "@hitachivantara/uikit-styles";
+import { HvTypography } from "../../Typography/Typography.js";
 import { HvIcon } from "../../icons.js";
-import { HvBadge } from "../../Badge/Badge.js";
-import { HvIconButton } from "../../IconButton/IconButton.js";
 import { HvButton } from "../../Button/Button.js";
-import { HvTypography } from "../../Typography/Typography.js";
-const { useClasses } = createClasses("HvHeaderButton", {
-  iconOnly: {
-    "& > .HvBadge-badge": {
-      minWidth: "unset !important",
-      minHeight: "unset !important"
-    }
-  },
-  button: {
-    border: `1px solid ${theme.colors.primaryDimmed}`,
-    borderRadius: theme.radii.full
-  },
-  headerContent: {
-    display: "flex",
-    alignItems: "center",
-    gap: theme.space.xxs
-  },
-  badgeRoot: {
-    width: 0,
-    marginRight: theme.space.sm
-  },
-  badge: {
-    position: "relative"
-  },
-  badgeIconOnly: {
-    "&&>div:last-of-type": {
-      minWidth: "unset",
-      minHeight: "unset"
-    }
-  },
-  badgeIcon: {
-    minHeight: 0,
-    minWidth: 0
-  }
+import { HvIconButton } from "../../IconButton/IconButton.js";
+import { HvBadge } from "../../Badge/Badge.js";
+import { theme } from "@hitachivantara/uikit-styles";
+import { createClasses, useDefaultProps } from "@hitachivantara/uikit-react-utils";
+import { forwardRef } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/FilterGroup/FilterContent/HeaderButton.tsx
+var { useClasses } = createClasses("HvHeaderButton", {
+	iconOnly: { "& > .HvBadge-badge": {
+		minWidth: "unset !important",
+		minHeight: "unset !important"
+	} },
+	button: {
+		border: `1px solid ${theme.colors.primaryDimmed}`,
+		borderRadius: theme.radii.full
+	},
+	headerContent: {
+		display: "flex",
+		alignItems: "center",
+		gap: theme.space.xxs
+	},
+	badgeRoot: {
+		width: 0,
+		marginRight: theme.space.sm
+	},
+	badge: { position: "relative" },
+	badgeIconOnly: { "&&>div:last-of-type": {
+		minWidth: "unset",
+		minHeight: "unset"
+	} },
+	badgeIcon: {
+		minHeight: 0,
+		minWidth: 0
+	}
 });
-const HvHeaderButton = forwardRef((props, ref) => {
-  const {
-    onClick,
-    iconOnly,
-    count = 0,
-    disabled,
-    title = "Filter",
-    classes: classesProp,
-    ...others
-  } = useDefaultProps("HvHeaderButton", props);
-  const { classes } = useClasses(classesProp, false);
-  return iconOnly ? /* @__PURE__ */ jsx(
-    HvBadge,
-    {
-      ref,
-      label: count,
-      showCount: true,
-      className: classes.badgeIconOnly,
-      icon: /* @__PURE__ */ jsx(
-        HvIconButton,
-        {
-          onClick,
-          title,
-          disabled,
-          className: classes.button,
-          ...others,
-          children: /* @__PURE__ */ jsx(HvIcon, { name: "Filters" })
-        }
-      )
-    }
-  ) : /* @__PURE__ */ jsx(
-    HvButton,
-    {
-      ref,
-      disabled,
-      variant: "secondarySubtle",
-      onClick,
-      startIcon: /* @__PURE__ */ jsx(HvIcon, { name: "Filters" }),
-      ...others,
-      role: "combobox",
-      children: /* @__PURE__ */ jsxs("div", { className: classes.headerContent, children: [
-        /* @__PURE__ */ jsx(HvTypography, { variant: "label", children: title }),
-        /* @__PURE__ */ jsx(
-          HvBadge,
-          {
-            showCount: true,
-            label: count,
-            classes: {
-              root: classes.badgeRoot,
-              badge: classes.badge,
-              badgeIcon: classes.badgeIcon
-            }
-          }
-        )
-      ] })
-    }
-  );
+var HvHeaderButton = forwardRef((props, ref) => {
+	const { onClick, iconOnly, count = 0, disabled, title = "Filter", classes: classesProp, ...others } = useDefaultProps("HvHeaderButton", props);
+	const { classes } = useClasses(classesProp, false);
+	return iconOnly ? /* @__PURE__ */ jsx(HvBadge, {
+		ref,
+		label: count,
+		showCount: true,
+		className: classes.badgeIconOnly,
+		icon: /* @__PURE__ */ jsx(HvIconButton, {
+			onClick,
+			title,
+			disabled,
+			className: classes.button,
+			...others,
+			children: /* @__PURE__ */ jsx(HvIcon, { name: "Filters" })
+		})
+	}) : /* @__PURE__ */ jsx(HvButton, {
+		ref,
+		disabled,
+		variant: "secondarySubtle",
+		onClick,
+		startIcon: /* @__PURE__ */ jsx(HvIcon, { name: "Filters" }),
+		...others,
+		role: "combobox",
+		children: /* @__PURE__ */ jsxs("div", {
+			className: classes.headerContent,
+			children: [/* @__PURE__ */ jsx(HvTypography, {
+				variant: "label",
+				children: title
+			}), /* @__PURE__ */ jsx(HvBadge, {
+				showCount: true,
+				label: count,
+				classes: {
+					root: classes.badgeRoot,
+					badge: classes.badge,
+					badgeIcon: classes.badgeIcon
+				}
+			})]
+		})
+	});
 });
-export {
-  HvHeaderButton
-};
+//#endregion
+export { HvHeaderButton };

package/dist/FilterGroup/FilterGroup.js

@@ -1,141 +1,92 @@
-import { jsxs, jsx } from "react/jsx-runtime";
-import { forwardRef } from "react";
-import { useDefaultProps } from "@hitachivantara/uikit-react-utils";
-import { HvLabelContainer } from "../FormElement/LabelContainer.js";
+import { setId } from "../utils/setId.js";
+import { useUniqueId } from "../hooks/useUniqueId.js";
+import { HvFormElement } from "../FormElement/FormElement.js";
+import { HvWarningText } from "../FormElement/WarningText/WarningText.js";
 import { useControlled } from "../hooks/useControlled.js";
+import { HvLabelContainer } from "../FormElement/LabelContainer.js";
 import { useLabels } from "../hooks/useLabels.js";
-import { useUniqueId } from "../hooks/useUniqueId.js";
-import { setId } from "../utils/setId.js";
-import { useClasses } from "./FilterGroup.styles.js";
-import { staticClasses } from "./FilterGroup.styles.js";
 import { HvFilterGroupProvider } from "./FilterGroupContext.js";
-import { HvFormElement } from "../FormElement/FormElement.js";
 import { HvFilterGroupContent } from "./FilterContent/FilterContent.js";
-import { HvWarningText } from "../FormElement/WarningText/WarningText.js";
-const DEFAULT_LABELS = {
-  /** Apply button label. */
-  applyLabel: "Apply",
-  /** Cancel button label. */
-  cancelLabel: "Cancel",
-  /** Clear button label. */
-  clearLabel: "Clear Filters",
-  /** Placeholder label. */
-  placeholder: "Filters",
-  /** SearchBox placeholder label. */
-  searchBoxPlaceholder: "Search",
-  /** Select All placeholder label. */
-  selectAll: "All",
-  /** Multi selection conjunction placeholder label. */
-  multiSelectionConjunction: "/"
-};
-const HvFilterGroup = forwardRef(
-  function HvFilterGroup2(props, ref) {
-    const {
-      className,
-      id,
-      name,
-      required,
-      disabled,
-      label,
-      "aria-label": ariaLabel,
-      "aria-labelledby": ariaLabelledBy,
-      description,
-      "aria-describedby": ariaDescribedBy,
-      onChange,
-      onCancel,
-      onClear,
-      status,
-      statusMessage,
-      labels: labelsProp,
-      defaultValue,
-      value,
-      filters,
-      horizontalPlacement = "right",
-      disablePortal = true,
-      escapeWithReference = true,
-      height = 350,
-      filterContentProps,
-      classes: classesProp,
-      ...others
-    } = useDefaultProps("HvFilterGroup", props);
-    const { classes, cx } = useClasses(classesProp);
-    const [validationMessage] = useControlled(statusMessage, "Required");
-    const elementId = useUniqueId(id);
-    const labels = useLabels(DEFAULT_LABELS, labelsProp);
-    const canShowError = status !== void 0 || required;
-    return /* @__PURE__ */ jsxs(
-      HvFormElement,
-      {
-        id,
-        name,
-        value,
-        status,
-        disabled,
-        required,
-        className: cx(classes.root, className),
-        ...others,
-        children: [
-          /* @__PURE__ */ jsx(
-            HvLabelContainer,
-            {
-              label,
-              description,
-              inputId: setId(elementId, "input"),
-              labelId: setId(elementId, "label"),
-              descriptionId: setId(elementId, "description"),
-              classes: {
-                root: classes.labelContainer,
-                label: classes.label,
-                description: classes.description
-              }
-            }
-          ),
-          /* @__PURE__ */ jsxs(
-            HvFilterGroupProvider,
-            {
-              defaultValue,
-              value,
-              filters,
-              children: [
-                /* @__PURE__ */ jsx(
-                  HvFilterGroupContent,
-                  {
-                    ref,
-                    id: elementId,
-                    disabled,
-                    disablePortal,
-                    variableWidth: true,
-                    placement: horizontalPlacement,
-                    escapeWithReference,
-                    "aria-label": ariaLabel,
-                    "aria-labelledby": ariaLabelledBy,
-                    status,
-                    onChange,
-                    onCancel,
-                    onClear,
-                    labels,
-                    height,
-                    ...filterContentProps
-                  }
-                ),
-                canShowError && /* @__PURE__ */ jsx(
-                  HvWarningText,
-                  {
-                    id: setId(elementId, "error"),
-                    disableBorder: true,
-                    className: classes.error,
-                    children: validationMessage
-                  }
-                )
-              ]
-            }
-          )
-        ]
-      }
-    );
-  }
-);
-export {
-  HvFilterGroup,
-  staticClasses as filterGroupClasses
+import { useClasses } from "./FilterGroup.styles.js";
+import { useDefaultProps } from "@hitachivantara/uikit-react-utils";
+import { forwardRef } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/FilterGroup/FilterGroup.tsx
+var DEFAULT_LABELS = {
+	/** Apply button label. */
+	applyLabel: "Apply",
+	/** Cancel button label. */
+	cancelLabel: "Cancel",
+	/** Clear button label. */
+	clearLabel: "Clear Filters",
+	/** Placeholder label. */
+	placeholder: "Filters",
+	/** SearchBox placeholder label. */
+	searchBoxPlaceholder: "Search",
+	/** Select All placeholder label. */
+	selectAll: "All",
+	/** Multi selection conjunction placeholder label. */
+	multiSelectionConjunction: "/"
 };
+/**
+A Filter Group is a UI pattern used to organize and apply multiple filters to a dataset, helping users refine and narrow down results.
+*/
+var HvFilterGroup = forwardRef(function HvFilterGroup(props, ref) {
+	const { className, id, name, required, disabled, label, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, description, "aria-describedby": ariaDescribedBy, onChange, onCancel, onClear, status, statusMessage, labels: labelsProp, defaultValue, value, filters, horizontalPlacement = "right", disablePortal = true, escapeWithReference = true, height = 350, filterContentProps, classes: classesProp, ...others } = useDefaultProps("HvFilterGroup", props);
+	const { classes, cx } = useClasses(classesProp);
+	const [validationMessage] = useControlled(statusMessage, "Required");
+	const elementId = useUniqueId(id);
+	const labels = useLabels(DEFAULT_LABELS, labelsProp);
+	const canShowError = status !== void 0 || required;
+	return /* @__PURE__ */ jsxs(HvFormElement, {
+		id,
+		name,
+		value,
+		status,
+		disabled,
+		required,
+		className: cx(classes.root, className),
+		...others,
+		children: [/* @__PURE__ */ jsx(HvLabelContainer, {
+			label,
+			description,
+			inputId: setId(elementId, "input"),
+			labelId: setId(elementId, "label"),
+			descriptionId: setId(elementId, "description"),
+			classes: {
+				root: classes.labelContainer,
+				label: classes.label,
+				description: classes.description
+			}
+		}), /* @__PURE__ */ jsxs(HvFilterGroupProvider, {
+			defaultValue,
+			value,
+			filters,
+			children: [/* @__PURE__ */ jsx(HvFilterGroupContent, {
+				ref,
+				id: elementId,
+				disabled,
+				disablePortal,
+				variableWidth: true,
+				placement: horizontalPlacement,
+				escapeWithReference,
+				"aria-label": ariaLabel,
+				"aria-labelledby": ariaLabelledBy,
+				status,
+				onChange,
+				onCancel,
+				onClear,
+				labels,
+				height,
+				...filterContentProps
+			}), canShowError && /* @__PURE__ */ jsx(HvWarningText, {
+				id: setId(elementId, "error"),
+				disableBorder: true,
+				className: classes.error,
+				children: validationMessage
+			})]
+		})]
+	});
+});
+//#endregion
+export { HvFilterGroup };

package/dist/FilterGroup/FilterGroup.styles.js

@@ -1,12 +1,11 @@
 import { createClasses } from "@hitachivantara/uikit-react-utils";
-const { staticClasses, useClasses } = createClasses("HvFilterGroup", {
-  root: {},
-  label: {},
-  labelContainer: {},
-  description: {},
-  error: {}
+//#region src/FilterGroup/FilterGroup.styles.tsx
+var { staticClasses, useClasses } = createClasses("HvFilterGroup", {
+	root: {},
+	label: {},
+	labelContainer: {},
+	description: {},
+	error: {}
 });
-export {
-  staticClasses,
-  useClasses
-};
+//#endregion
+export { staticClasses, useClasses };

package/dist/FilterGroup/FilterGroupContext.js

@@ -1,77 +1,72 @@
-import { jsx } from "react/jsx-runtime";
-import { useState, useEffect, useCallback, useMemo, createContext } from "react";
-import { useDefaultProps } from "@hitachivantara/uikit-react-utils";
 import { isEqual } from "../utils/helpers.js";
 import { useSavedState } from "../utils/useSavedState.js";
-const HvFilterGroupContext = createContext({
-  activeGroup: 0,
-  setActiveGroup: () => {
-  },
-  filterOptions: [],
-  setFilterValues: () => {
-  },
-  rollbackFilters: () => {
-  },
-  clearFilters: () => {
-  },
-  applyFilters: () => {
-  },
-  applyDisabled: false,
-  filterValues: [],
-  appliedFilters: void 0,
-  defaultValue: void 0
+import { useDefaultProps } from "@hitachivantara/uikit-react-utils";
+import { createContext, useCallback, useEffect, useMemo, useState } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/FilterGroup/FilterGroupContext.tsx
+var HvFilterGroupContext = createContext({
+	activeGroup: 0,
+	setActiveGroup: () => {},
+	filterOptions: [],
+	setFilterValues: () => {},
+	rollbackFilters: () => {},
+	clearFilters: () => {},
+	applyFilters: () => {},
+	applyDisabled: false,
+	filterValues: [],
+	appliedFilters: void 0,
+	defaultValue: void 0
 });
-const groups = (filters) => filters.map(() => []);
-const HvFilterGroupProvider = (props) => {
-  const { defaultValue, value, filters, children } = useDefaultProps(
-    "HvFilterGroupProvider",
-    props
-  );
-  const [group, setActiveGroup] = useState(0);
-  const [filterValues, setFilterValues, rollbackFilters, appliedFilters] = useSavedState(value || groups(filters));
-  const [applyDisabled, setApplyDisabled] = useState(false);
-  useEffect(() => {
-    setFilterValues(value, true);
-  }, [value, setFilterValues]);
-  useEffect(() => {
-    setApplyDisabled(isEqual(filterValues, appliedFilters));
-  }, [filterValues, appliedFilters]);
-  const clearFilters = useCallback(() => {
-    setFilterValues(defaultValue || groups(filters));
-  }, [filters, setFilterValues, defaultValue]);
-  const applyFilters = useCallback(() => {
-    setFilterValues(filterValues, true);
-  }, [filterValues, setFilterValues]);
-  const contextValue = useMemo(
-    () => ({
-      activeGroup: group,
-      setActiveGroup,
-      filterOptions: filters,
-      filterValues,
-      setFilterValues,
-      appliedFilters,
-      rollbackFilters,
-      clearFilters,
-      applyFilters,
-      applyDisabled,
-      defaultValue
-    }),
-    [
-      appliedFilters,
-      applyDisabled,
-      applyFilters,
-      clearFilters,
-      filterValues,
-      filters,
-      group,
-      rollbackFilters,
-      setFilterValues,
-      defaultValue
-    ]
-  );
-  return /* @__PURE__ */ jsx(HvFilterGroupContext.Provider, { value: contextValue, children });
-};
-export {
-  HvFilterGroupContext,
-  HvFilterGroupProvider
+var groups = (filters) => filters.map(() => []);
+var HvFilterGroupProvider = (props) => {
+	const { defaultValue, value, filters, children } = useDefaultProps("HvFilterGroupProvider", props);
+	const [group, setActiveGroup] = useState(0);
+	const [filterValues, setFilterValues, rollbackFilters, appliedFilters] = useSavedState(value || groups(filters));
+	const [applyDisabled, setApplyDisabled] = useState(false);
+	useEffect(() => {
+		setFilterValues(value, true);
+	}, [value, setFilterValues]);
+	useEffect(() => {
+		setApplyDisabled(isEqual(filterValues, appliedFilters));
+	}, [filterValues, appliedFilters]);
+	const clearFilters = useCallback(() => {
+		setFilterValues(defaultValue || groups(filters));
+	}, [
+		filters,
+		setFilterValues,
+		defaultValue
+	]);
+	const applyFilters = useCallback(() => {
+		setFilterValues(filterValues, true);
+	}, [filterValues, setFilterValues]);
+	const contextValue = useMemo(() => ({
+		activeGroup: group,
+		setActiveGroup,
+		filterOptions: filters,
+		filterValues,
+		setFilterValues,
+		appliedFilters,
+		rollbackFilters,
+		clearFilters,
+		applyFilters,
+		applyDisabled,
+		defaultValue
+	}), [
+		appliedFilters,
+		applyDisabled,
+		applyFilters,
+		clearFilters,
+		filterValues,
+		filters,
+		group,
+		rollbackFilters,
+		setFilterValues,
+		defaultValue
+	]);
+	return /* @__PURE__ */ jsx(HvFilterGroupContext.Provider, {
+		value: contextValue,
+		children
+	});
 };
+//#endregion
+export { HvFilterGroupContext, HvFilterGroupProvider };

package/dist/FilterGroup/LeftPanel/LeftPanel.js

@@ -1,36 +1,33 @@
-import { jsx } from "react/jsx-runtime";
-import { useContext } from "react";
-import { useTheme } from "@hitachivantara/uikit-react-utils";
+import { HvListContainer } from "../../ListContainer/ListContainer.js";
+import { HvListItem } from "../../ListContainer/ListItem/ListItem.js";
 import { HvIcon } from "../../icons.js";
-import { HvFilterGroupContext } from "../FilterGroupContext.js";
-import { useClasses } from "./LeftPanel.styles.js";
-import { staticClasses } from "./LeftPanel.styles.js";
 import { HvPanel } from "../../Panel/Panel.js";
-import { HvListContainer } from "../../ListContainer/ListContainer.js";
 import { HvOverflowTooltip } from "../../OverflowTooltip/OverflowTooltip.js";
+import { HvFilterGroupContext } from "../FilterGroupContext.js";
 import { HvFilterGroupCounter } from "../Counter/Counter.js";
-import { HvListItem } from "../../ListContainer/ListItem/ListItem.js";
-const HvFilterGroupLeftPanel = ({
-  className,
-  emptyElement,
-  classes: classesProp
-}) => {
-  const { classes } = useClasses(classesProp);
-  const { activeTheme } = useTheme();
-  const { filterOptions, activeGroup, setActiveGroup } = useContext(HvFilterGroupContext);
-  return /* @__PURE__ */ jsx(HvPanel, { className, children: filterOptions.length > 0 ? /* @__PURE__ */ jsx(HvListContainer, { condensed: true, interactive: true, children: filterOptions.map((group, index) => /* @__PURE__ */ jsx(
-    HvListItem,
-    {
-      className: classes.listItem,
-      onClick: () => setActiveGroup(index),
-      selected: filterOptions[activeGroup].id === group.id,
-      endAdornment: activeTheme?.name === "pentahoPlus" ? /* @__PURE__ */ jsx(HvIcon, { name: "CaretRight" }) : /* @__PURE__ */ jsx(HvFilterGroupCounter, { groupId: group.id }),
-      children: /* @__PURE__ */ jsx(HvOverflowTooltip, { data: group.name })
-    },
-    group.id || group.name
-  )) }) : emptyElement });
-};
-export {
-  HvFilterGroupLeftPanel,
-  staticClasses as filterGroupLeftPanelClasses
+import { useClasses } from "./LeftPanel.styles.js";
+import { useTheme } from "@hitachivantara/uikit-react-utils";
+import { useContext } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/FilterGroup/LeftPanel/LeftPanel.tsx
+var HvFilterGroupLeftPanel = ({ className, emptyElement, classes: classesProp }) => {
+	const { classes } = useClasses(classesProp);
+	const { activeTheme } = useTheme();
+	const { filterOptions, activeGroup, setActiveGroup } = useContext(HvFilterGroupContext);
+	return /* @__PURE__ */ jsx(HvPanel, {
+		className,
+		children: filterOptions.length > 0 ? /* @__PURE__ */ jsx(HvListContainer, {
+			condensed: true,
+			interactive: true,
+			children: filterOptions.map((group, index) => /* @__PURE__ */ jsx(HvListItem, {
+				className: classes.listItem,
+				onClick: () => setActiveGroup(index),
+				selected: filterOptions[activeGroup].id === group.id,
+				endAdornment: activeTheme?.name === "pentahoPlus" ? /* @__PURE__ */ jsx(HvIcon, { name: "CaretRight" }) : /* @__PURE__ */ jsx(HvFilterGroupCounter, { groupId: group.id }),
+				children: /* @__PURE__ */ jsx(HvOverflowTooltip, { data: group.name })
+			}, group.id || group.name))
+		}) : emptyElement
+	});
 };
+//#endregion
+export { HvFilterGroupLeftPanel };