@hitachivantara/uikit-react-core 6.8.2 → 6.9.0

package/dist/FilterGroup/LeftPanel/LeftPanel.styles.js

@@ -1,12 +1,7 @@
 import { createClasses } from "@hitachivantara/uikit-react-utils";
-const name = "HvFilterGroupLeftPanel";
-const { staticClasses, useClasses } = createClasses(name, {
-  listItem: {
-    display: "flex",
-    justifyContent: "space-between"
-  }
-});
-export {
-  staticClasses,
-  useClasses
-};
+var { staticClasses, useClasses } = createClasses("HvFilterGroupLeftPanel", { listItem: {
+	display: "flex",
+	justifyContent: "space-between"
+} });
+//#endregion
+export { useClasses };

package/dist/FilterGroup/RightPanel/RightPanel.js

@@ -1,155 +1,122 @@
-import { jsx, jsxs, Fragment } from "react/jsx-runtime";
-import { useState, useContext, useMemo, useCallback, useEffect } from "react";
+import { HvPanel } from "../../Panel/Panel.js";
+import { HvCheckBox } from "../../CheckBox/CheckBox.js";
 import { CounterLabel } from "../../utils/CounterLabel.js";
+import { HvList } from "../../List/List.js";
+import { HvInput } from "../../Input/Input.js";
 import { HvFilterGroupContext } from "../FilterGroupContext.js";
 import { useClasses } from "./RightPanel.styles.js";
-import { staticClasses } from "./RightPanel.styles.js";
-import { HvCheckBox } from "../../CheckBox/CheckBox.js";
-import { HvPanel } from "../../Panel/Panel.js";
-import { HvInput } from "../../Input/Input.js";
-import { HvList } from "../../List/List.js";
-const HvFilterGroupRightPanel = ({
-  className,
-  labels,
-  emptyElement,
-  classes: classesProp
-}) => {
-  const { classes } = useClasses(classesProp);
-  const [searchStr, setSearchStr] = useState("");
-  const [allSelected, setAllSelected] = useState(false);
-  const [anySelected, setAnySelected] = useState(false);
-  const {
-    filterOptions,
-    filterValues = [],
-    setFilterValues,
-    activeGroup
-  } = useContext(HvFilterGroupContext);
-  const { all: allActiveGroupOptions, enabled: enabledActiveGroupOptions } = useMemo(() => {
-    const filteredOptions = filterOptions[activeGroup]?.data.filter(
-      (option) => option.name.toLowerCase().includes(searchStr.toLowerCase())
-    );
-    return {
-      all: filteredOptions?.map((option) => option.id) || [],
-      enabled: filteredOptions?.filter((option) => !option.disabled)?.map((option) => option.id) || []
-    };
-  }, [filterOptions, activeGroup, searchStr]);
-  const activeFilterValues = useMemo(
-    () => filterValues[activeGroup]?.filter(
-      (value) => allActiveGroupOptions.includes(value)
-    ) || [],
-    [filterValues, allActiveGroupOptions, activeGroup]
-  );
-  const listValues = useMemo(
-    () => filterOptions[activeGroup]?.data.map((option) => ({
-      ...option,
-      label: option.name,
-      selected: filterValues[activeGroup]?.includes(option.id),
-      isHidden: option.name.toLowerCase().indexOf(searchStr.toLowerCase()) < 0
-    })) || [],
-    [filterOptions, filterValues, activeGroup, searchStr]
-  );
-  const updateSelectAll = useCallback(() => {
-    const nbrSelected = activeFilterValues?.length;
-    const hasSelection = nbrSelected > 0;
-    const allSelect = nbrSelected === allActiveGroupOptions.length;
-    setAnySelected(hasSelection);
-    setAllSelected(hasSelection && allSelect);
-  }, [activeFilterValues, allActiveGroupOptions]);
-  useEffect(() => {
-    updateSelectAll();
-  }, [activeFilterValues, updateSelectAll]);
-  useEffect(() => setSearchStr(""), [activeGroup]);
-  const onChangeHandler = (values) => {
-    const newFilterValues = filterOptions.map(
-      (_, i) => activeGroup === i ? values.filter((v) => v.selected).map((v) => v.id) : [...filterValues[i] || []]
-    );
-    setFilterValues(newFilterValues);
-  };
-  const handleSelectAll = useCallback(() => {
-    const newFilterValues = structuredClone(filterValues);
-    if (anySelected) {
-      if (searchStr !== "") {
-        newFilterValues[activeGroup] = filterValues[activeGroup]?.filter(
-          (value) => !enabledActiveGroupOptions.includes(value)
-        );
-      } else {
-        newFilterValues[activeGroup] = [];
-      }
-    } else {
-      const currentOptions = newFilterValues[activeGroup] || [];
-      newFilterValues[activeGroup] = [
-        ...currentOptions,
-        ...enabledActiveGroupOptions
-      ];
-    }
-    setFilterValues(newFilterValues);
-  }, [
-    activeGroup,
-    enabledActiveGroupOptions,
-    anySelected,
-    filterValues,
-    setFilterValues,
-    searchStr
-  ]);
-  const SelectAll = useCallback(() => {
-    return /* @__PURE__ */ jsx("div", { className: classes.selectAllContainer, children: /* @__PURE__ */ jsx(
-      HvCheckBox,
-      {
-        label: /* @__PURE__ */ jsx(
-          CounterLabel,
-          {
-            selected: activeFilterValues?.length,
-            total: allActiveGroupOptions.length,
-            conjunctionLabel: labels?.multiSelectionConjunction
-          }
-        ),
-        onChange: handleSelectAll,
-        className: classes.selectAll,
-        indeterminate: anySelected && !allSelected,
-        checked: allSelected
-      }
-    ) });
-  }, [
-    activeFilterValues?.length,
-    allActiveGroupOptions.length,
-    allSelected,
-    anySelected,
-    handleSelectAll,
-    labels?.multiSelectionConjunction,
-    classes?.selectAllContainer,
-    classes?.selectAll
-  ]);
-  return /* @__PURE__ */ jsx(HvPanel, { className, children: listValues.length > 0 ? /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx(
-      HvInput,
-      {
-        classes: {
-          root: classes.search
-        },
-        type: "search",
-        placeholder: labels?.searchBoxPlaceholder,
-        value: searchStr,
-        onChange: (_, str) => setSearchStr(str)
-      }
-    ),
-    /* @__PURE__ */ jsx(SelectAll, {}),
-    /* @__PURE__ */ jsx(
-      HvList,
-      {
-        values: listValues,
-        className: classes.list,
-        multiSelect: true,
-        useSelector: true,
-        showSelectAll: false,
-        onChange: onChangeHandler,
-        selectable: true,
-        condensed: true
-      },
-      activeGroup
-    )
-  ] }) : emptyElement });
-};
-export {
-  HvFilterGroupRightPanel,
-  staticClasses as filterGroupRightPanelClasses
+import { useCallback, useContext, useEffect, useMemo, useState } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+//#region src/FilterGroup/RightPanel/RightPanel.tsx
+var HvFilterGroupRightPanel = ({ className, labels, emptyElement, classes: classesProp }) => {
+	const { classes } = useClasses(classesProp);
+	const [searchStr, setSearchStr] = useState("");
+	const [allSelected, setAllSelected] = useState(false);
+	const [anySelected, setAnySelected] = useState(false);
+	const { filterOptions, filterValues = [], setFilterValues, activeGroup } = useContext(HvFilterGroupContext);
+	const { all: allActiveGroupOptions, enabled: enabledActiveGroupOptions } = useMemo(() => {
+		const filteredOptions = filterOptions[activeGroup]?.data.filter((option) => option.name.toLowerCase().includes(searchStr.toLowerCase()));
+		return {
+			all: filteredOptions?.map((option) => option.id) || [],
+			enabled: filteredOptions?.filter((option) => !option.disabled)?.map((option) => option.id) || []
+		};
+	}, [
+		filterOptions,
+		activeGroup,
+		searchStr
+	]);
+	const activeFilterValues = useMemo(() => filterValues[activeGroup]?.filter((value) => allActiveGroupOptions.includes(value)) || [], [
+		filterValues,
+		allActiveGroupOptions,
+		activeGroup
+	]);
+	const listValues = useMemo(() => filterOptions[activeGroup]?.data.map((option) => ({
+		...option,
+		label: option.name,
+		selected: filterValues[activeGroup]?.includes(option.id),
+		isHidden: option.name.toLowerCase().indexOf(searchStr.toLowerCase()) < 0
+	})) || [], [
+		filterOptions,
+		filterValues,
+		activeGroup,
+		searchStr
+	]);
+	const updateSelectAll = useCallback(() => {
+		const nbrSelected = activeFilterValues?.length;
+		const hasSelection = nbrSelected > 0;
+		const allSelect = nbrSelected === allActiveGroupOptions.length;
+		setAnySelected(hasSelection);
+		setAllSelected(hasSelection && allSelect);
+	}, [activeFilterValues, allActiveGroupOptions]);
+	useEffect(() => {
+		updateSelectAll();
+	}, [activeFilterValues, updateSelectAll]);
+	useEffect(() => setSearchStr(""), [activeGroup]);
+	const onChangeHandler = (values) => {
+		setFilterValues(filterOptions.map((_, i) => activeGroup === i ? values.filter((v) => v.selected).map((v) => v.id) : [...filterValues[i] || []]));
+	};
+	const handleSelectAll = useCallback(() => {
+		const newFilterValues = structuredClone(filterValues);
+		if (anySelected) if (searchStr !== "") newFilterValues[activeGroup] = filterValues[activeGroup]?.filter((value) => !enabledActiveGroupOptions.includes(value));
+		else newFilterValues[activeGroup] = [];
+		else newFilterValues[activeGroup] = [...newFilterValues[activeGroup] || [], ...enabledActiveGroupOptions];
+		setFilterValues(newFilterValues);
+	}, [
+		activeGroup,
+		enabledActiveGroupOptions,
+		anySelected,
+		filterValues,
+		setFilterValues,
+		searchStr
+	]);
+	const SelectAll = useCallback(() => {
+		return /* @__PURE__ */ jsx("div", {
+			className: classes.selectAllContainer,
+			children: /* @__PURE__ */ jsx(HvCheckBox, {
+				label: /* @__PURE__ */ jsx(CounterLabel, {
+					selected: activeFilterValues?.length,
+					total: allActiveGroupOptions.length,
+					conjunctionLabel: labels?.multiSelectionConjunction
+				}),
+				onChange: handleSelectAll,
+				className: classes.selectAll,
+				indeterminate: anySelected && !allSelected,
+				checked: allSelected
+			})
+		});
+	}, [
+		activeFilterValues?.length,
+		allActiveGroupOptions.length,
+		allSelected,
+		anySelected,
+		handleSelectAll,
+		labels?.multiSelectionConjunction,
+		classes?.selectAllContainer,
+		classes?.selectAll
+	]);
+	return /* @__PURE__ */ jsx(HvPanel, {
+		className,
+		children: listValues.length > 0 ? /* @__PURE__ */ jsxs(Fragment$1, { children: [
+			/* @__PURE__ */ jsx(HvInput, {
+				classes: { root: classes.search },
+				type: "search",
+				placeholder: labels?.searchBoxPlaceholder,
+				value: searchStr,
+				onChange: (_, str) => setSearchStr(str)
+			}),
+			/* @__PURE__ */ jsx(SelectAll, {}),
+			/* @__PURE__ */ jsx(HvList, {
+				values: listValues,
+				className: classes.list,
+				multiSelect: true,
+				useSelector: true,
+				showSelectAll: false,
+				onChange: onChangeHandler,
+				selectable: true,
+				condensed: true
+			}, activeGroup)
+		] }) : emptyElement
+	});
 };
+//#endregion
+export { HvFilterGroupRightPanel };

package/dist/FilterGroup/RightPanel/RightPanel.styles.js

@@ -1,29 +1,19 @@
-import { createClasses } from "@hitachivantara/uikit-react-utils";
 import { theme } from "@hitachivantara/uikit-styles";
-const name = "HvFilterGroupRightPanel";
-const { staticClasses, useClasses } = createClasses(name, {
-  search: {
-    marginBottom: theme.spacing("xs")
-  },
-  list: {
-    height: "calc(100% - 70px)",
-    overflowY: "auto"
-  },
-  selectAllContainer: {
-    // Prevent the focus ring to be hidden by sibling hover background
-    "&": {
-      position: "relative",
-      zIndex: 0
-    },
-    "&:focus-within": {
-      zIndex: 1
-    }
-  },
-  selectAll: {
-    width: "100%"
-  }
+import { createClasses } from "@hitachivantara/uikit-react-utils";
+var { staticClasses, useClasses } = createClasses("HvFilterGroupRightPanel", {
+	search: { marginBottom: theme.spacing("xs") },
+	list: {
+		height: "calc(100% - 70px)",
+		overflowY: "auto"
+	},
+	selectAllContainer: {
+		"&": {
+			position: "relative",
+			zIndex: 0
+		},
+		"&:focus-within": { zIndex: 1 }
+	},
+	selectAll: { width: "100%" }
 });
-export {
-  staticClasses,
-  useClasses
-};
+//#endregion
+export { useClasses };