@hitachivantara/uikit-react-core 6.8.1 → 6.9.0

package/dist/Dropdown/List/List.js

@@ -1,180 +1,198 @@
-import { jsxs, jsx } from "react/jsx-runtime";
-import { useState, useMemo, useEffect } from "react";
-import { useDefaultProps, mergeStyles } from "@hitachivantara/uikit-react-utils";
-import { theme } from "@hitachivantara/uikit-styles";
+import { HvButton } from "../../Button/Button.js";
+import { HvActionBar } from "../../ActionBar/ActionBar.js";
+import { HvCheckBox } from "../../CheckBox/CheckBox.js";
 import { CounterLabel } from "../../utils/CounterLabel.js";
-import { getSelected } from "../utils.js";
-import { useClasses } from "./List.styles.js";
-import { staticClasses } from "./List.styles.js";
 import { HvList } from "../../List/List.js";
 import { HvInput } from "../../Input/Input.js";
-import { HvCheckBox } from "../../CheckBox/CheckBox.js";
-import { HvActionBar } from "../../ActionBar/ActionBar.js";
-import { HvButton } from "../../Button/Button.js";
-const clone = (values) => values.map((value) => ({ ...value }));
-const cleanHidden = (lst) => lst.map((item) => ({ ...item, isHidden: false }));
-const valuesExist = (values) => values != null && values?.length > 0;
-const getSelectedIds = (list) => getSelected(list).map((item) => item.id || item.label);
-const HvDropdownList = (props) => {
-  const {
-    id,
-    classes: classesProp,
-    values = [],
-    multiSelect = false,
-    showSearch = false,
-    onChange,
-    onCancel,
-    labels,
-    notifyChangesOnFirstRender = false,
-    singleSelectionToggle,
-    height: heightProp,
-    popperStyles,
-    maxHeight: maxHeightProp,
-    virtualized = false,
-    ...others
-  } = useDefaultProps("HvDropdownList", props);
-  const { classes, cx } = useClasses(classesProp);
-  const [searchStr, setSearchStr] = useState("");
-  const [list, setList] = useState(clone(values));
-  const [allSelected, setAllSelected] = useState(false);
-  const [anySelected, setAnySelected] = useState(false);
-  const { maxWidth, maxHeight } = popperStyles || {};
-  const hasChanges = useMemo(() => {
-    return String(getSelectedIds(values)) !== String(getSelectedIds(list));
-  }, [list, values]);
-  const updateSelectAll = (listValues) => {
-    if (!listValues) return;
-    const nbrSelected = getSelected(listValues).length;
-    const hasSelection = nbrSelected > 0;
-    const allSelect = nbrSelected === listValues.length;
-    setAnySelected(hasSelection);
-    setAllSelected(hasSelection && allSelect);
-  };
-  useEffect(() => {
-    if (!valuesExist(values)) return;
-    setList(clone(values));
-    updateSelectAll(values);
-    if (notifyChangesOnFirstRender) {
-      onChange?.(values, false, false, true);
-    }
-  }, [values, notifyChangesOnFirstRender, onChange]);
-  const handleSearch = (str) => {
-    const results = list?.filter(({ searchValue, label, value }) => {
-      const stringValue = typeof searchValue === "string" && searchValue || typeof label === "string" && label || typeof value === "string" && value || "";
-      return stringValue.toLowerCase().indexOf(str.toLowerCase()) >= 0;
-    });
-    if (results != null) {
-      const newList = list.map((elem) => {
-        const isResult = results.find((result) => result.label === elem.label);
-        return { ...elem, isHidden: !isResult };
-      });
-      setList(newList);
-      setSearchStr(str);
-    }
-    return str;
-  };
-  const renderSearch = () => /* @__PURE__ */ jsx("div", { className: classes.searchContainer, children: /* @__PURE__ */ jsx(
-    HvInput,
-    {
-      type: "search",
-      value: searchStr,
-      placeholder: labels?.searchPlaceholder,
-      "aria-label": labels?.searchPlaceholder,
-      onChange: (event, str) => handleSearch(str)
-    }
-  ) });
-  const handleSelectAll = () => {
-    const newList = list.map((elem) => {
-      if (elem.disabled) return elem;
-      return { ...elem, selected: !anySelected };
-    });
-    setList(newList);
-    updateSelectAll(newList);
-  };
-  const renderSelectAll = () => {
-    return /* @__PURE__ */ jsx(
-      HvCheckBox,
-      {
-        label: /* @__PURE__ */ jsx(
-          CounterLabel,
-          {
-            selected: getSelected(list).length,
-            total: list.length,
-            conjunctionLabel: labels?.multiSelectionConjunction
-          }
-        ),
-        onChange: handleSelectAll,
-        className: classes.selectAll,
-        indeterminate: anySelected && !allSelected,
-        checked: allSelected
-      }
-    );
-  };
-  const onSelection = (listValues) => {
-    if (!multiSelect) {
-      onChange(cleanHidden(listValues), true, true, true);
-    } else {
-      updateSelectAll(listValues);
-      setList(clone(listValues));
-    }
-  };
-  const renderActions = () => {
-    return /* @__PURE__ */ jsxs(HvActionBar, { children: [
-      /* @__PURE__ */ jsx(
-        HvButton,
-        {
-          disabled: !hasChanges,
-          onClick: () => onChange(cleanHidden(list), true, true, true),
-          variant: "primaryGhost",
-          children: labels?.applyLabel
-        }
-      ),
-      /* @__PURE__ */ jsx(HvButton, { onClick: onCancel, variant: "primaryGhost", children: labels?.cancelLabel })
-    ] });
-  };
-  const showList = valuesExist(values);
-  const elementsSize = theme.spacing(
-    5 + 2 + (showSearch ? 5 : 0) + (showList && multiSelect ? 4 + 6 : 0)
-  );
-  return /* @__PURE__ */ jsxs("div", { className: classes.rootList, children: [
-    /* @__PURE__ */ jsx("div", { className: classes.listBorderDown }),
-    /* @__PURE__ */ jsxs("div", { className: classes.listContainer, children: [
-      showSearch && renderSearch(),
-      showList && multiSelect && renderSelectAll(),
-      showList && /* @__PURE__ */ jsx(
-        HvList,
-        {
-          style: mergeStyles(void 0, {
-            height: heightProp,
-            "--maxW": maxWidth,
-            "--maxH": maxHeightProp ?? `calc(${maxHeight} - ${elementsSize})`
-          }),
-          classes: {
-            root: cx(classes.dropdownListContainer, {
-              [classes.virtualized]: virtualized
-            })
-          },
-          values: list,
-          multiSelect,
-          useSelector: multiSelect,
-          showSelectAll: false,
-          onChange: onSelection,
-          labels: {
-            selectionConjunction: labels?.multiSelectionConjunction
-          },
-          selectable: true,
-          condensed: true,
-          singleSelectionToggle,
-          height: heightProp,
-          virtualized,
-          ...others
-        }
-      )
-    ] }),
-    showList && multiSelect ? renderActions() : null
-  ] });
-};
-export {
-  HvDropdownList,
-  staticClasses as dropdownListClasses
+import { getSelected } from "../utils.js";
+import { useClasses } from "./List.styles.js";
+import { theme } from "@hitachivantara/uikit-styles";
+import { mergeStyles, useDefaultProps } from "@hitachivantara/uikit-react-utils";
+import { useEffect, useMemo, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/Dropdown/List/List.tsx
+/**
+* The values property was being deeply cloned. That created a significant performance
+* hit when the values contained complex properties' values, like React Nodes.
+*
+* For minimizing the impact of removing the clone, a shallow clone of the array and its
+* objects is performed instead. That should have the same effect in the majority of the
+* cases, where the properties' values are primitive.
+*/
+var clone = (values) => values.map((value) => ({ ...value }));
+/**
+* Set all hidden's to false.
+*/
+var cleanHidden = (lst) => lst.map((item) => ({
+	...item,
+	isHidden: false
+}));
+var valuesExist = (values) => values != null && values?.length > 0;
+/** Filter selected ordered element `id`s (or `label`) */
+var getSelectedIds = (list) => getSelected(list).map((item) => item.id || item.label);
+var HvDropdownList = (props) => {
+	const { id, classes: classesProp, values = [], multiSelect = false, showSearch = false, onChange, onCancel, labels, notifyChangesOnFirstRender = false, singleSelectionToggle, height: heightProp, popperStyles, maxHeight: maxHeightProp, virtualized = false, ...others } = useDefaultProps("HvDropdownList", props);
+	const { classes, cx } = useClasses(classesProp);
+	const [searchStr, setSearchStr] = useState("");
+	const [list, setList] = useState(clone(values));
+	const [allSelected, setAllSelected] = useState(false);
+	const [anySelected, setAnySelected] = useState(false);
+	const { maxWidth, maxHeight } = popperStyles || {};
+	const hasChanges = useMemo(() => {
+		return String(getSelectedIds(values)) !== String(getSelectedIds(list));
+	}, [list, values]);
+	/**
+	* Update states associated with select all.
+	*/
+	const updateSelectAll = (listValues) => {
+		if (!listValues) return;
+		const nbrSelected = getSelected(listValues).length;
+		const hasSelection = nbrSelected > 0;
+		const allSelect = nbrSelected === listValues.length;
+		setAnySelected(hasSelection);
+		setAllSelected(hasSelection && allSelect);
+	};
+	/**
+	* After the first render, call onChange if notifyChangesOnFirstRender.
+	*/
+	useEffect(() => {
+		if (!valuesExist(values)) return;
+		setList(clone(values));
+		updateSelectAll(values);
+		if (notifyChangesOnFirstRender) onChange?.(values, false, false, true);
+	}, [
+		values,
+		notifyChangesOnFirstRender,
+		onChange
+	]);
+	/**
+	* Sets the filtered values to the state.
+	*
+	* @param {String} str - The value that is being looked.
+	*/
+	const handleSearch = (str) => {
+		const results = list?.filter(({ searchValue, label, value }) => {
+			return (typeof searchValue === "string" && searchValue || typeof label === "string" && label || typeof value === "string" && value || "").toLowerCase().indexOf(str.toLowerCase()) >= 0;
+		});
+		if (results != null) {
+			setList(list.map((elem) => {
+				const isResult = results.find((result) => result.label === elem.label);
+				return {
+					...elem,
+					isHidden: !isResult
+				};
+			}));
+			setSearchStr(str);
+		}
+		return str;
+	};
+	/**
+	* Create search element.
+	*
+	* @returns {*}
+	*/
+	const renderSearch = () => /* @__PURE__ */ jsx("div", {
+		className: classes.searchContainer,
+		children: /* @__PURE__ */ jsx(HvInput, {
+			type: "search",
+			value: searchStr,
+			placeholder: labels?.searchPlaceholder,
+			"aria-label": labels?.searchPlaceholder,
+			onChange: (event, str) => handleSearch(str)
+		})
+	});
+	/**
+	* Select all the values inside the dropdown.
+	*
+	*/
+	const handleSelectAll = () => {
+		const newList = list.map((elem) => {
+			if (elem.disabled) return elem;
+			return {
+				...elem,
+				selected: !anySelected
+			};
+		});
+		setList(newList);
+		updateSelectAll(newList);
+	};
+	const renderSelectAll = () => {
+		return /* @__PURE__ */ jsx(HvCheckBox, {
+			label: /* @__PURE__ */ jsx(CounterLabel, {
+				selected: getSelected(list).length,
+				total: list.length,
+				conjunctionLabel: labels?.multiSelectionConjunction
+			}),
+			onChange: handleSelectAll,
+			className: classes.selectAll,
+			indeterminate: anySelected && !allSelected,
+			checked: allSelected
+		});
+	};
+	/**
+	* When selecting the state list is updated with the corresponding selection.
+	*
+	* @param listValues - elements selected.
+	*/
+	const onSelection = (listValues) => {
+		if (!multiSelect) onChange(cleanHidden(listValues), true, true, true);
+		else {
+			updateSelectAll(listValues);
+			setList(clone(listValues));
+		}
+	};
+	/**
+	* Render action buttons.
+	*/
+	const renderActions = () => {
+		return /* @__PURE__ */ jsxs(HvActionBar, { children: [/* @__PURE__ */ jsx(HvButton, {
+			disabled: !hasChanges,
+			onClick: () => onChange(cleanHidden(list), true, true, true),
+			variant: "primaryGhost",
+			children: labels?.applyLabel
+		}), /* @__PURE__ */ jsx(HvButton, {
+			onClick: onCancel,
+			variant: "primaryGhost",
+			children: labels?.cancelLabel
+		})] });
+	};
+	const showList = valuesExist(values);
+	/** bottom margin + Panel padding + Search size + SelectAll + ActionBar size */
+	const elementsSize = theme.spacing(7 + (showSearch ? 5 : 0) + (showList && multiSelect ? 10 : 0));
+	return /* @__PURE__ */ jsxs("div", {
+		className: classes.rootList,
+		children: [
+			/* @__PURE__ */ jsx("div", { className: classes.listBorderDown }),
+			/* @__PURE__ */ jsxs("div", {
+				className: classes.listContainer,
+				children: [
+					showSearch && renderSearch(),
+					showList && multiSelect && renderSelectAll(),
+					showList && /* @__PURE__ */ jsx(HvList, {
+						style: mergeStyles(void 0, {
+							height: heightProp,
+							"--maxW": maxWidth,
+							"--maxH": maxHeightProp ?? `calc(${maxHeight} - ${elementsSize})`
+						}),
+						classes: { root: cx(classes.dropdownListContainer, { [classes.virtualized]: virtualized }) },
+						values: list,
+						multiSelect,
+						useSelector: multiSelect,
+						showSelectAll: false,
+						onChange: onSelection,
+						labels: { selectionConjunction: labels?.multiSelectionConjunction },
+						selectable: true,
+						condensed: true,
+						singleSelectionToggle,
+						height: heightProp,
+						virtualized,
+						...others
+					})
+				]
+			}),
+			showList && multiSelect ? renderActions() : null
+		]
+	});
 };
+//#endregion
+export { HvDropdownList };

package/dist/Dropdown/List/List.styles.js

@@ -1,26 +1,25 @@
-import { createClasses } from "@hitachivantara/uikit-react-utils";
 import { theme } from "@hitachivantara/uikit-styles";
-const { staticClasses, useClasses } = createClasses("HvDropdownList", {
-  rootList: {},
-  dropdownListContainer: {
-    overflow: "auto",
-    padding: 4,
-    margin: -4,
-    maxWidth: "var(--maxW)",
-    maxHeight: "var(--maxH)"
-  },
-  virtualized: {
-    maxWidth: "inherit",
-    maxHeight: "inherit",
-    overflow: "inherit",
-    padding: 0
-  },
-  searchContainer: { marginBottom: theme.space.xs },
-  listBorderDown: {},
-  listContainer: { padding: theme.space.sm },
-  selectAll: {}
+import { createClasses } from "@hitachivantara/uikit-react-utils";
+//#region src/Dropdown/List/List.styles.tsx
+var { staticClasses, useClasses } = createClasses("HvDropdownList", {
+	rootList: {},
+	dropdownListContainer: {
+		overflow: "auto",
+		padding: 4,
+		margin: -4,
+		maxWidth: "var(--maxW)",
+		maxHeight: "var(--maxH)"
+	},
+	virtualized: {
+		maxWidth: "inherit",
+		maxHeight: "inherit",
+		overflow: "inherit",
+		padding: 0
+	},
+	searchContainer: { marginBottom: theme.space.xs },
+	listBorderDown: {},
+	listContainer: { padding: theme.space.sm },
+	selectAll: {}
 });
-export {
-  staticClasses,
-  useClasses
-};
+//#endregion
+export { useClasses };

package/dist/Dropdown/utils.js

@@ -1,17 +1,16 @@
-const getSelected = (list = []) => list.filter((elem) => elem.selected);
-const getSelectionLabel = (labels, placeholder, multiSelect, list = []) => {
-  const { select } = labels || {};
-  const selected = getSelected(list);
-  if (select) return { selected: select };
-  if (multiSelect) {
-    return {
-      selected: selected.length,
-      total: list.length
-    };
-  }
-  return { selected: selected.length > 0 ? selected[0].label : placeholder };
-};
-export {
-  getSelected,
-  getSelectionLabel
+//#region src/Dropdown/utils.tsx
+/** Filter selected elements. */
+var getSelected = (list = []) => list.filter((elem) => elem.selected);
+/** Gets the selection label according to selection. */
+var getSelectionLabel = (labels, placeholder, multiSelect, list = []) => {
+	const { select } = labels || {};
+	const selected = getSelected(list);
+	if (select) return { selected: select };
+	if (multiSelect) return {
+		selected: selected.length,
+		total: list.length
+	};
+	return { selected: selected.length > 0 ? selected[0].label : placeholder };
 };
+//#endregion
+export { getSelected, getSelectionLabel };

package/dist/DropdownButton/DropdownButton.js

@@ -1,49 +1,45 @@
-import { jsx } from "react/jsx-runtime";
-import { forwardRef } from "react";
-import { useDefaultProps } from "@hitachivantara/uikit-react-utils";
 import { HvIcon } from "../icons.js";
-import { useClasses } from "./DropdownButton.styles.js";
-import { staticClasses } from "./DropdownButton.styles.js";
 import { HvButton } from "../Button/Button.js";
-const HvDropdownButton = forwardRef(function HvDropdownButton2(props, ref) {
-  const {
-    className,
-    classes: classesProp,
-    disabled,
-    open,
-    icon,
-    readOnly,
-    children: childrenProp,
-    variant,
-    ...others
-  } = useDefaultProps("HvDropdownButton", props);
-  const { classes, cx } = useClasses(classesProp, false);
-  const endIcon = !icon && /* @__PURE__ */ jsx(HvIcon, { name: "CaretDown", size: "xs", rotate: open });
-  const children = childrenProp && typeof childrenProp === "string" ? /* @__PURE__ */ jsx("div", { className: classes.placeholder, children: childrenProp }) : childrenProp;
-  return /* @__PURE__ */ jsx(
-    HvButton,
-    {
-      ref,
-      icon,
-      disabled: disabled || readOnly,
-      className: cx(
-        classes.root,
-        {
-          [classes.open]: open,
-          [classes.readOnly]: readOnly,
-          [classes.disabled]: disabled
-        },
-        className
-      ),
-      classes: { endIcon: classes.arrowContainer },
-      endIcon,
-      variant: open ? "secondarySubtle" : variant,
-      ...others,
-      children: icon ? children : /* @__PURE__ */ jsx("div", { className: classes.selection, children })
-    }
-  );
+import { useClasses } from "./DropdownButton.styles.js";
+import { useDefaultProps } from "@hitachivantara/uikit-react-utils";
+import { forwardRef } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/DropdownButton/DropdownButton.tsx
+/**
+* IMPORTANT: This component is not ready to be exported to external users.
+*
+* Implements the DS dropdown button pattern.
+*/
+var HvDropdownButton = forwardRef(function HvDropdownButton(props, ref) {
+	const { className, classes: classesProp, disabled, open, icon, readOnly, children: childrenProp, variant, ...others } = useDefaultProps("HvDropdownButton", props);
+	const { classes, cx } = useClasses(classesProp, false);
+	const endIcon = !icon && /* @__PURE__ */ jsx(HvIcon, {
+		name: "CaretDown",
+		size: "xs",
+		rotate: open
+	});
+	const children = childrenProp && typeof childrenProp === "string" ? /* @__PURE__ */ jsx("div", {
+		className: classes.placeholder,
+		children: childrenProp
+	}) : childrenProp;
+	return /* @__PURE__ */ jsx(HvButton, {
+		ref,
+		icon,
+		disabled: disabled || readOnly,
+		className: cx(classes.root, {
+			[classes.open]: open,
+			[classes.readOnly]: readOnly,
+			[classes.disabled]: disabled
+		}, className),
+		classes: { endIcon: classes.arrowContainer },
+		endIcon,
+		variant: open ? "secondarySubtle" : variant,
+		...others,
+		children: icon ? children : /* @__PURE__ */ jsx("div", {
+			className: classes.selection,
+			children
+		})
+	});
 });
-export {
-  HvDropdownButton,
-  staticClasses as dropdownButtonClasses
-};
+//#endregion
+export { HvDropdownButton };

package/dist/DropdownButton/DropdownButton.styles.js

@@ -1,49 +1,39 @@
-import { createClasses } from "@hitachivantara/uikit-react-utils";
-import { theme } from "@hitachivantara/uikit-styles";
 import { staticClasses as staticClasses$1 } from "../Button/Button.styles.js";
-import "../Button/Button.js";
-const disabledStyle = {
-  [`&,&.${staticClasses$1.subtle},&.${staticClasses$1.ghost}`]: {
-    backgroundColor: theme.colors.bgDisabled,
-    borderColor: theme.colors.bgDisabled,
-    "&:hover": { backgroundColor: theme.colors.bgDisabled }
-  }
-};
-const { staticClasses, useClasses } = createClasses("HvDropdownButton", {
-  root: {
-    userSelect: "none",
-    position: "relative",
-    [`&:not(.${staticClasses$1.icon})`]: {
-      width: "100%",
-      minWidth: "unset",
-      justifyContent: "flex-start",
-      paddingLeft: theme.space.xs
-    }
-  },
-  disabled: {
-    ...disabledStyle
-  },
-  readOnly: {
-    userSelect: "text",
-    ...disabledStyle
-  },
-  open: {
-    backgroundColor: theme.colors.bgContainer
-  },
-  selection: {
-    color: "inherit",
-    flex: 1,
-    textAlign: "start",
-    overflow: "auto",
-    textOverflow: "ellipsis",
-    whiteSpace: "nowrap"
-  },
-  placeholder: {},
-  arrowContainer: {
-    marginRight: theme.spacing(-2)
-  }
+import { theme } from "@hitachivantara/uikit-styles";
+import { createClasses } from "@hitachivantara/uikit-react-utils";
+//#region src/DropdownButton/DropdownButton.styles.tsx
+var disabledStyle = { [`&,&.${staticClasses$1.subtle},&.${staticClasses$1.ghost}`]: {
+	backgroundColor: theme.colors.bgDisabled,
+	borderColor: theme.colors.bgDisabled,
+	"&:hover": { backgroundColor: theme.colors.bgDisabled }
+} };
+var { staticClasses, useClasses } = createClasses("HvDropdownButton", {
+	root: {
+		userSelect: "none",
+		position: "relative",
+		[`&:not(.${staticClasses$1.icon})`]: {
+			width: "100%",
+			minWidth: "unset",
+			justifyContent: "flex-start",
+			paddingLeft: theme.space.xs
+		}
+	},
+	disabled: { ...disabledStyle },
+	readOnly: {
+		userSelect: "text",
+		...disabledStyle
+	},
+	open: { backgroundColor: theme.colors.bgContainer },
+	selection: {
+		color: "inherit",
+		flex: 1,
+		textAlign: "start",
+		overflow: "auto",
+		textOverflow: "ellipsis",
+		whiteSpace: "nowrap"
+	},
+	placeholder: {},
+	arrowContainer: { marginRight: theme.spacing(-2) }
 });
-export {
-  staticClasses,
-  useClasses
-};
+//#endregion
+export { useClasses };