@hitachivantara/uikit-react-core 6.8.2 → 6.9.0

package/dist/SelectionList/SelectionList.js

@@ -1,224 +1,170 @@
-import { jsxs, jsx } from "react/jsx-runtime";
-import { forwardRef, useMemo, Children, useRef, useEffect, useCallback, cloneElement } from "react";
-import { useForkRef } from "@mui/material/utils";
-import { useDefaultProps } from "@hitachivantara/uikit-react-utils";
-import { useControlled } from "../hooks/useControlled.js";
-import { useUniqueId } from "../hooks/useUniqueId.js";
+import { HvListContainer } from "../ListContainer/ListContainer.js";
 import { isKey } from "../utils/keyboardUtils.js";
-import { multiSelectionEventHandler } from "../utils/multiSelectionEventHandler.js";
 import { setId } from "../utils/setId.js";
-import { useClasses } from "./SelectionList.styles.js";
-import { staticClasses } from "./SelectionList.styles.js";
+import { useUniqueId } from "../hooks/useUniqueId.js";
 import { HvFormElement } from "../FormElement/FormElement.js";
 import { HvLabel } from "../FormElement/Label/Label.js";
 import { HvInfoMessage } from "../FormElement/InfoMessage/InfoMessage.js";
-import { HvListContainer } from "../ListContainer/ListContainer.js";
 import { HvWarningText } from "../FormElement/WarningText/WarningText.js";
-const getValueFromSelectedChildren = (children, multiple) => {
-  const selectedValues = Children.toArray(children).map((child) => {
-    const childIsControlled = child?.props?.selected !== void 0;
-    const childIsSelected = child && childIsControlled ? child.props?.selected : child.props?.defaultSelected;
-    return childIsSelected ? child?.props.value : void 0;
-  }).filter((v) => v !== void 0);
-  return multiple ? selectedValues : selectedValues?.[0];
+import { useControlled as useControlled$1 } from "../hooks/useControlled.js";
+import { multiSelectionEventHandler } from "../utils/multiSelectionEventHandler.js";
+import { useClasses } from "./SelectionList.styles.js";
+import { useDefaultProps } from "@hitachivantara/uikit-react-utils";
+import { Children, cloneElement, forwardRef, useCallback, useEffect, useMemo, useRef } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useForkRef } from "@mui/material/utils";
+//#region src/SelectionList/SelectionList.tsx
+var getValueFromSelectedChildren = (children, multiple) => {
+	const selectedValues = Children.toArray(children).map((child) => {
+		const childIsControlled = child?.props?.selected !== void 0;
+		return (child && childIsControlled ? child.props?.selected : child.props?.defaultSelected) ? child?.props.value : void 0;
+	}).filter((v) => v !== void 0);
+	return multiple ? selectedValues : selectedValues?.[0];
 };
-const HvSelectionList = forwardRef(function HvSelectionList2(props, ref) {
-  const {
-    id,
-    classes: classesProp,
-    className,
-    children,
-    name,
-    value: valueProp,
-    defaultValue,
-    required,
-    readOnly,
-    disabled,
-    label,
-    "aria-label": ariaLabel,
-    "aria-labelledby": ariaLabelledBy,
-    description,
-    "aria-describedby": ariaDescribedBy,
-    onChange,
-    status,
-    statusMessage,
-    "aria-errormessage": ariaErrorMessage,
-    orientation = "vertical",
-    multiple = false,
-    singleSelectionToggle = false,
-    ...others
-  } = useDefaultProps("HvSelectionList", props);
-  const { classes, cx } = useClasses(classesProp);
-  const elementId = useUniqueId(id);
-  const [value, setValue] = useControlled(
-    valueProp,
-    defaultValue !== void 0 ? defaultValue : (
-      // when uncontrolled and no default value is given,
-      // extract the initial selected values from the children own state
-      (() => getValueFromSelectedChildren(children, multiple))
-    )
-  );
-  const [validationState, setValidationState] = useControlled(
-    status,
-    "standBy"
-  );
-  const [validationMessage] = useControlled(statusMessage, "Required");
-  const [allValues, selectedState] = useMemo(() => {
-    const childValues = [];
-    const childSelectedState = [];
-    Children.toArray(children).forEach((child, i) => {
-      const childValue = child?.props?.value;
-      const childIsSelected = multiple ? value.indexOf(childValue) !== -1 : value === childValue;
-      childValues[i] = childValue;
-      childSelectedState[i] = childIsSelected;
-    });
-    return [childValues, childSelectedState];
-  }, [children, multiple, value]);
-  const selectionAnchor = useRef(void 0);
-  const listRef = useRef(null);
-  const listForkedRef = useForkRef(ref, listRef);
-  useEffect(() => {
-    const handleMeta = (event) => {
-      const tempArray = [];
-      if (isKey(event, "ArrowUp") && event.shiftKey && listRef.current.contains(event.target) || isKey(event, "ArrowDown") && event.shiftKey && listRef.current.contains(event.target)) {
-        selectedState.forEach((isSelected, i) => {
-          if (i === event.target.value - 1) {
-            if (!isSelected) {
-              tempArray.push(allValues[i]);
-            }
-          } else if (isSelected) {
-            tempArray.push(allValues[i]);
-          }
-        });
-        setValue(tempArray);
-      }
-    };
-    window.addEventListener("keyup", handleMeta);
-    return () => {
-      window.removeEventListener("keyup", handleMeta);
-    };
-  }, [allValues, selectedState, setValue]);
-  const onChildChangeInterceptor = useCallback(
-    (index, childOnClick, evt) => {
-      childOnClick?.(evt);
-      if (!readOnly && !disabled) {
-        let newValue;
-        if (multiple) {
-          newValue = multiSelectionEventHandler(
-            evt,
-            index,
-            selectionAnchor,
-            allValues,
-            selectedState,
-            void 0
-          );
-        } else {
-          newValue = singleSelectionToggle && selectedState[index] ? null : allValues[index];
-        }
-        onChange?.(evt, newValue);
-        setValue(() => {
-          if (required && newValue.length === 0) {
-            setValidationState("invalid");
-          } else {
-            setValidationState("valid");
-          }
-          return newValue;
-        });
-      }
-    },
-    [
-      allValues,
-      disabled,
-      multiple,
-      onChange,
-      readOnly,
-      required,
-      selectedState,
-      setValidationState,
-      setValue,
-      singleSelectionToggle,
-      selectionAnchor
-    ]
-  );
-  const modifiedChildren = useMemo(() => {
-    return Children.map(children, (child, i) => {
-      const childIsSelected = selectedState[i];
-      return cloneElement(child, {
-        role: "option",
-        selected: childIsSelected,
-        onClick: (evt) => onChildChangeInterceptor(i, child?.props?.onClick, evt),
-        disabled: disabled || child?.props?.disabled
-      });
-    });
-  }, [children, disabled, onChildChangeInterceptor, selectedState]);
-  const canShowError = ariaErrorMessage == null && (status !== void 0 && statusMessage !== void 0 || status === void 0 && required);
-  const errorMessageId = canShowError ? setId(elementId, "error") : ariaErrorMessage;
-  const listId = label && setId(elementId, "listbox") || "";
-  return /* @__PURE__ */ jsxs(
-    HvFormElement,
-    {
-      id,
-      name,
-      status: validationState,
-      disabled,
-      required,
-      readOnly,
-      className: cx(classes.root, className),
-      children: [
-        label && /* @__PURE__ */ jsx(
-          HvLabel,
-          {
-            showGutter: true,
-            id: setId(elementId, "label"),
-            label,
-            className: classes.label
-          }
-        ),
-        description && /* @__PURE__ */ jsx(
-          HvInfoMessage,
-          {
-            id: setId(elementId, "description"),
-            className: classes.description,
-            children: description
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          HvListContainer,
-          {
-            id: listId,
-            interactive: true,
-            condensed: true,
-            role: "listbox",
-            "aria-multiselectable": multiple || void 0,
-            "aria-label": ariaLabel,
-            "aria-labelledby": [label && setId(elementId, "label"), ariaLabelledBy].join(" ").trim() || void 0,
-            "aria-invalid": validationState === "invalid" ? true : void 0,
-            "aria-errormessage": validationState === "invalid" ? errorMessageId : void 0,
-            "aria-describedby": [description && setId(elementId, "description"), ariaDescribedBy].join(" ").trim() || void 0,
-            className: cx(classes.listbox, {
-              [classes.vertical]: orientation === "vertical",
-              [classes.horizontal]: orientation === "horizontal",
-              [classes.invalid]: validationState === "invalid"
-            }),
-            ref: listForkedRef,
-            ...others,
-            children: modifiedChildren
-          }
-        ),
-        canShowError && /* @__PURE__ */ jsx(
-          HvWarningText,
-          {
-            id: setId(elementId, "error"),
-            disableBorder: true,
-            className: classes.error,
-            children: validationMessage
-          }
-        )
-      ]
-    }
-  );
+/**
+* SelectionList allows users to select one or more items from a list.
+*
+* While it supports multi-selection, it’s recommended to use it when it’s clear that only a single option should be selected.
+*/
+var HvSelectionList = forwardRef(function HvSelectionList(props, ref) {
+	const { id, classes: classesProp, className, children, name, value: valueProp, defaultValue, required, readOnly, disabled, label, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, description, "aria-describedby": ariaDescribedBy, onChange, status, statusMessage, "aria-errormessage": ariaErrorMessage, orientation = "vertical", multiple = false, singleSelectionToggle = false, ...others } = useDefaultProps("HvSelectionList", props);
+	const { classes, cx } = useClasses(classesProp);
+	const elementId = useUniqueId(id);
+	const [value, setValue] = useControlled$1(valueProp, defaultValue !== void 0 ? defaultValue : () => getValueFromSelectedChildren(children, multiple));
+	const [validationState, setValidationState] = useControlled$1(status, "standBy");
+	const [validationMessage] = useControlled$1(statusMessage, "Required");
+	const [allValues, selectedState] = useMemo(() => {
+		const childValues = [];
+		const childSelectedState = [];
+		Children.toArray(children).forEach((child, i) => {
+			const childValue = child?.props?.value;
+			const childIsSelected = multiple ? value.indexOf(childValue) !== -1 : value === childValue;
+			childValues[i] = childValue;
+			childSelectedState[i] = childIsSelected;
+		});
+		return [childValues, childSelectedState];
+	}, [
+		children,
+		multiple,
+		value
+	]);
+	const selectionAnchor = useRef(void 0);
+	const listRef = useRef(null);
+	const listForkedRef = useForkRef(ref, listRef);
+	useEffect(() => {
+		const handleMeta = (event) => {
+			const tempArray = [];
+			if (isKey(event, "ArrowUp") && event.shiftKey && listRef.current.contains(event.target) || isKey(event, "ArrowDown") && event.shiftKey && listRef.current.contains(event.target)) {
+				selectedState.forEach((isSelected, i) => {
+					if (i === event.target.value - 1) {
+						if (!isSelected) tempArray.push(allValues[i]);
+					} else if (isSelected) tempArray.push(allValues[i]);
+				});
+				setValue(tempArray);
+			}
+		};
+		window.addEventListener("keyup", handleMeta);
+		return () => {
+			window.removeEventListener("keyup", handleMeta);
+		};
+	}, [
+		allValues,
+		selectedState,
+		setValue
+	]);
+	const onChildChangeInterceptor = useCallback((index, childOnClick, evt) => {
+		childOnClick?.(evt);
+		if (!readOnly && !disabled) {
+			let newValue;
+			if (multiple) newValue = multiSelectionEventHandler(evt, index, selectionAnchor, allValues, selectedState, void 0);
+			else newValue = singleSelectionToggle && selectedState[index] ? null : allValues[index];
+			onChange?.(evt, newValue);
+			setValue(() => {
+				if (required && newValue.length === 0) setValidationState("invalid");
+				else setValidationState("valid");
+				return newValue;
+			});
+		}
+	}, [
+		allValues,
+		disabled,
+		multiple,
+		onChange,
+		readOnly,
+		required,
+		selectedState,
+		setValidationState,
+		setValue,
+		singleSelectionToggle,
+		selectionAnchor
+	]);
+	const modifiedChildren = useMemo(() => {
+		return Children.map(children, (child, i) => {
+			const childIsSelected = selectedState[i];
+			return cloneElement(child, {
+				role: "option",
+				selected: childIsSelected,
+				onClick: (evt) => onChildChangeInterceptor(i, child?.props?.onClick, evt),
+				disabled: disabled || child?.props?.disabled
+			});
+		});
+	}, [
+		children,
+		disabled,
+		onChildChangeInterceptor,
+		selectedState
+	]);
+	const canShowError = ariaErrorMessage == null && (status !== void 0 && statusMessage !== void 0 || status === void 0 && required);
+	const errorMessageId = canShowError ? setId(elementId, "error") : ariaErrorMessage;
+	const listId = label && setId(elementId, "listbox") || "";
+	return /* @__PURE__ */ jsxs(HvFormElement, {
+		id,
+		name,
+		status: validationState,
+		disabled,
+		required,
+		readOnly,
+		className: cx(classes.root, className),
+		children: [
+			label && /* @__PURE__ */ jsx(HvLabel, {
+				showGutter: true,
+				id: setId(elementId, "label"),
+				label,
+				className: classes.label
+			}),
+			description && /* @__PURE__ */ jsx(HvInfoMessage, {
+				id: setId(elementId, "description"),
+				className: classes.description,
+				children: description
+			}),
+			/* @__PURE__ */ jsx(HvListContainer, {
+				id: listId,
+				interactive: true,
+				condensed: true,
+				role: "listbox",
+				"aria-multiselectable": multiple || void 0,
+				"aria-label": ariaLabel,
+				"aria-labelledby": [label && setId(elementId, "label"), ariaLabelledBy].join(" ").trim() || void 0,
+				"aria-invalid": validationState === "invalid" ? true : void 0,
+				"aria-errormessage": validationState === "invalid" ? errorMessageId : void 0,
+				"aria-describedby": [description && setId(elementId, "description"), ariaDescribedBy].join(" ").trim() || void 0,
+				className: cx(classes.listbox, {
+					[classes.vertical]: orientation === "vertical",
+					[classes.horizontal]: orientation === "horizontal",
+					[classes.invalid]: validationState === "invalid"
+				}),
+				ref: listForkedRef,
+				...others,
+				children: modifiedChildren
+			}),
+			canShowError && /* @__PURE__ */ jsx(HvWarningText, {
+				id: setId(elementId, "error"),
+				disableBorder: true,
+				className: classes.error,
+				children: validationMessage
+			})
+		]
+	});
 });
-export {
-  HvSelectionList,
-  staticClasses as selectionListClasses
-};
+//#endregion
+export { HvSelectionList };

package/dist/SelectionList/SelectionList.styles.js

@@ -1,38 +1,38 @@
-import { createClasses } from "@hitachivantara/uikit-react-utils";
 import { theme } from "@hitachivantara/uikit-styles";
-const { staticClasses, useClasses } = createClasses("HvSelectionList", {
-  root: { display: "inline-block", padding: 0, margin: 0 },
-  error: { width: "100%", float: "left", clear: "both" },
-  listbox: {
-    display: "flex",
-    float: "left",
-    clear: "both",
-    width: "100%",
-    paddingBottom: theme.space.xs
-  },
-  label: {},
-  description: { float: "left" },
-  horizontal: {
-    flexDirection: "row",
-    flexWrap: "wrap",
-    marginLeft: -theme.space.sm,
-    "&>*": {
-      marginLeft: theme.space.sm
-    }
-  },
-  vertical: {
-    flexDirection: "column",
-    // Prevent the focus ring to be hidden by sibling hover background
-    "&>*": {
-      zIndex: 0
-    },
-    "&>*:focus-within": {
-      zIndex: 1
-    }
-  },
-  invalid: { borderBottom: `1px solid ${theme.form.errorColor}` }
+import { createClasses } from "@hitachivantara/uikit-react-utils";
+//#region src/SelectionList/SelectionList.styles.tsx
+var { staticClasses, useClasses } = createClasses("HvSelectionList", {
+	root: {
+		display: "inline-block",
+		padding: 0,
+		margin: 0
+	},
+	error: {
+		width: "100%",
+		float: "left",
+		clear: "both"
+	},
+	listbox: {
+		display: "flex",
+		float: "left",
+		clear: "both",
+		width: "100%",
+		paddingBottom: theme.space.xs
+	},
+	label: {},
+	description: { float: "left" },
+	horizontal: {
+		flexDirection: "row",
+		flexWrap: "wrap",
+		marginLeft: -theme.space.sm,
+		"&>*": { marginLeft: theme.space.sm }
+	},
+	vertical: {
+		flexDirection: "column",
+		"&>*": { zIndex: 0 },
+		"&>*:focus-within": { zIndex: 1 }
+	},
+	invalid: { borderBottom: `1px solid ${theme.form.errorColor}` }
 });
-export {
-  staticClasses,
-  useClasses
-};
+//#endregion
+export { staticClasses, useClasses };

package/dist/SimpleGrid/SimpleGrid.js

@@ -1,29 +1,18 @@
-import { jsx } from "react/jsx-runtime";
+import { getContainerStyle, useClasses } from "./SimpleGrid.styles.js";
 import { useDefaultProps } from "@hitachivantara/uikit-react-utils";
-import { useClasses, getContainerStyle } from "./SimpleGrid.styles.js";
-import { staticClasses } from "./SimpleGrid.styles.js";
-const HvSimpleGrid = (props) => {
-  const {
-    children,
-    breakpoints,
-    spacing,
-    cols,
-    className,
-    classes: classesProp,
-    ...others
-  } = useDefaultProps("HvSimpleGrid", props);
-  const { classes, cx, css } = useClasses(classesProp);
-  const containerStyle = getContainerStyle(breakpoints, spacing, cols);
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      className: cx(css(containerStyle), classes.root, className),
-      ...others,
-      children
-    }
-  );
-};
-export {
-  HvSimpleGrid,
-  staticClasses as simpleGridClasses
+import { jsx } from "react/jsx-runtime";
+//#region src/SimpleGrid/SimpleGrid.tsx
+/**
+* SimpleGrid is a lightweight, responsive grid for evenly spaced items across a fixed number of columns.
+*/
+var HvSimpleGrid = (props) => {
+	const { children, breakpoints, spacing, cols, className, classes: classesProp, ...others } = useDefaultProps("HvSimpleGrid", props);
+	const { classes, cx, css } = useClasses(classesProp);
+	return /* @__PURE__ */ jsx("div", {
+		className: cx(css(getContainerStyle(breakpoints, spacing, cols)), classes.root, className),
+		...others,
+		children
+	});
 };
+//#endregion
+export { HvSimpleGrid };

package/dist/SimpleGrid/SimpleGrid.styles.js

@@ -1,45 +1,34 @@
-import { createClasses } from "@hitachivantara/uikit-react-utils";
 import { theme } from "@hitachivantara/uikit-styles";
-const { staticClasses, useClasses } = createClasses("HvSimpleGrid", {
-  root: {
-    display: "grid",
-    boxSizing: "border-box",
-    gridTemplateColumns: `repeat(var(--cols, 1), minmax(0, 1fr))`
-  }
-});
+import { createClasses } from "@hitachivantara/uikit-react-utils";
+//#region src/SimpleGrid/SimpleGrid.styles.tsx
+var { staticClasses, useClasses } = createClasses("HvSimpleGrid", { root: {
+	display: "grid",
+	boxSizing: "border-box",
+	gridTemplateColumns: `repeat(var(--cols, 1), minmax(0, 1fr))`
+} });
 function getSize(size) {
-  return size || Number(theme.breakpoints.values.md);
+	return size || Number(theme.breakpoints.values.md);
 }
 function getSortedBreakpoints(breakpoints) {
-  if (breakpoints.length === 0) {
-    return breakpoints;
-  }
-  const property = "maxWidth" in breakpoints[0] ? "maxWidth" : "minWidth";
-  const sorted = breakpoints.toSorted(
-    (a, b) => getSize(b[property]) - getSize(a[property])
-  );
-  return property === "minWidth" ? sorted.toReversed() : sorted;
+	if (breakpoints.length === 0) return breakpoints;
+	const property = "maxWidth" in breakpoints[0] ? "maxWidth" : "minWidth";
+	const sorted = breakpoints.toSorted((a, b) => getSize(b[property]) - getSize(a[property]));
+	return property === "minWidth" ? sorted.toReversed() : sorted;
 }
-const getContainerStyle = (breakpoints, spacing = "sm", cols = 1) => {
-  return {
-    // TODO: review/document precedence of cols/spacing vs breakpoints[cols/spacing]
-    "--cols": cols,
-    gap: theme.space[spacing],
-    ...breakpoints && getSortedBreakpoints(breakpoints).reduce((acc, breakpoint) => {
-      const property = "maxWidth" in breakpoint ? "max-width" : "min-width";
-      const breakpointSize = getSize(
-        property === "max-width" ? breakpoint.maxWidth : breakpoint.minWidth
-      );
-      acc[`@media (${property}: ${breakpointSize}px)`] = {
-        ["--cols"]: breakpoint.cols,
-        gap: theme.space[breakpoint.spacing || spacing]
-      };
-      return acc;
-    }, {})
-  };
-};
-export {
-  getContainerStyle,
-  staticClasses,
-  useClasses
+var getContainerStyle = (breakpoints, spacing = "sm", cols = 1) => {
+	return {
+		"--cols": cols,
+		gap: theme.space[spacing],
+		...breakpoints && getSortedBreakpoints(breakpoints).reduce((acc, breakpoint) => {
+			const property = "maxWidth" in breakpoint ? "max-width" : "min-width";
+			const breakpointSize = getSize(property === "max-width" ? breakpoint.maxWidth : breakpoint.minWidth);
+			acc[`@media (${property}: ${breakpointSize}px)`] = {
+				["--cols"]: breakpoint.cols,
+				gap: theme.space[breakpoint.spacing || spacing]
+			};
+			return acc;
+		}, {})
+	};
 };
+//#endregion
+export { getContainerStyle, staticClasses, useClasses };