@hitachivantara/uikit-react-lab 6.1.9 → 6.1.10

package/dist/Blade/Blade.js

@@ -1,175 +1,136 @@
-import { jsx, jsxs } from "react/jsx-runtime";
-import { useCallback, useMemo, useRef, useState, useEffect } from "react";
-import { useDefaultProps, useControlled, useUniqueId, setId, HvTypography } from "@hitachivantara/uikit-react-core";
 import { useClasses } from "./Blade.styles.js";
-import { staticClasses } from "./Blade.styles.js";
-const HvBlade = (props) => {
-  const {
-    id: idProp,
-    className,
-    classes: classesProp,
-    expanded,
-    defaultExpanded = false,
-    label,
-    labelVariant = "label",
-    headingLevel,
-    onChange,
-    disabled = false,
-    children,
-    fullWidth,
-    buttonProps,
-    containerProps,
-    ...others
-  } = useDefaultProps("HvBlade", props);
-  const { classes, cx } = useClasses(classesProp);
-  const [isExpanded, setIsExpanded] = useControlled(
-    expanded,
-    Boolean(defaultExpanded)
-  );
-  const handleAction = useCallback(
-    (event) => {
-      if (!disabled) {
-        onChange?.(event, !isExpanded);
-        setIsExpanded(!isExpanded);
-        return true;
-      }
-      return false;
-    },
-    [disabled, onChange, isExpanded, setIsExpanded]
-  );
-  const handleClick = useCallback(
-    (event) => {
-      handleAction(event);
-      event.preventDefault();
-      event.stopPropagation();
-    },
-    [handleAction]
-  );
-  const handleKeyDown = useCallback(
-    (event) => {
-      let isEventHandled = false;
-      const { key } = event;
-      if (event.altKey || event.ctrlKey || event.metaKey || event.currentTarget !== event.target) {
-        return;
-      }
-      switch (key) {
-        case "Enter":
-        case " ":
-          isEventHandled = handleAction(event);
-          break;
-        default:
-          return;
-      }
-      if (isEventHandled) {
-        event.preventDefault();
-        event.stopPropagation();
-      }
-    },
-    [handleAction]
-  );
-  const id = useUniqueId(idProp);
-  const bladeHeaderId = setId(id, "button");
-  const bladeContainerId = setId(id, "container");
-  const bladeHeader = useMemo(() => {
-    const buttonLabel = typeof label === "function" ? label(isExpanded) : label;
-    const bladeButton = /* @__PURE__ */ jsx(
-      HvTypography,
-      {
-        id: bladeHeaderId,
-        component: "div",
-        role: "button",
-        className: cx(classes.button, {
-          [classes.textOnlyLabel]: typeof buttonLabel === "string",
-          [classes.disabled]: disabled
-        }),
-        style: { flexShrink: headingLevel === void 0 ? 0 : void 0 },
-        disabled,
-        tabIndex: 0,
-        onKeyDown: handleKeyDown,
-        onClick: handleClick,
-        variant: labelVariant,
-        "aria-expanded": isExpanded,
-        "aria-controls": bladeContainerId,
-        ...buttonProps,
-        children: buttonLabel
-      }
-    );
-    return headingLevel === void 0 ? bladeButton : /* @__PURE__ */ jsx(
-      HvTypography,
-      {
-        component: `h${headingLevel}`,
-        variant: labelVariant,
-        className: classes.heading,
-        style: { flexShrink: 0 },
-        children: bladeButton
-      }
-    );
-  }, [
-    bladeContainerId,
-    bladeHeaderId,
-    buttonProps,
-    classes.button,
-    classes.disabled,
-    classes.heading,
-    classes.textOnlyLabel,
-    cx,
-    disabled,
-    handleClick,
-    handleKeyDown,
-    headingLevel,
-    isExpanded,
-    label,
-    labelVariant
-  ]);
-  const bladeRef = useRef(null);
-  const [maxWidth, setMaxWidth] = useState(void 0);
-  useEffect(() => {
-    if (!bladeRef.current) return;
-    const resizeObserver = new ResizeObserver((entries) => {
-      setMaxWidth(entries[0].target.clientWidth);
-    });
-    resizeObserver.observe(
-      // using the blade's container as reference max-width is more stable
-      bladeRef.current.parentElement ?? bladeRef.current
-    );
-    return () => {
-      resizeObserver.disconnect();
-    };
-  }, [isExpanded]);
-  const { style: containerStyle, ...otherContainerProps } = containerProps || {};
-  return /* @__PURE__ */ jsxs(
-    "div",
-    {
-      ref: bladeRef,
-      id: idProp,
-      className: cx(classes.root, className, {
-        [classes.fullWidth]: fullWidth,
-        [classes.expanded]: isExpanded
-      }),
-      ...others,
-      children: [
-        bladeHeader,
-        /* @__PURE__ */ jsx(
-          "div",
-          {
-            id: bladeContainerId,
-            role: "region",
-            "aria-labelledby": bladeHeaderId,
-            className: classes.container,
-            hidden: !isExpanded,
-            style: {
-              ...containerStyle,
-              maxWidth: isExpanded ? maxWidth : 0
-            },
-            ...otherContainerProps,
-            children
-          }
-        )
-      ]
-    }
-  );
-};
-export {
-  HvBlade,
-  staticClasses as bladeClasses
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { HvTypography, setId, useControlled, useDefaultProps, useUniqueId } from "@hitachivantara/uikit-react-core";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/Blade/Blade.tsx
+/**
+* A blade is a design element that expands horizontally to reveal information, similar to an accordion.
+*
+* It is usually stacked horizontally with other blades and works best when used within a flex container.
+* The `HvBlades` component is recommended for this purpose, as it also provides better management of the
+* blades' expanded state.
+*/
+var HvBlade = (props) => {
+	const { id: idProp, className, classes: classesProp, expanded, defaultExpanded = false, label, labelVariant = "label", headingLevel, onChange, disabled = false, children, fullWidth, buttonProps, containerProps, ...others } = useDefaultProps("HvBlade", props);
+	const { classes, cx } = useClasses(classesProp);
+	const [isExpanded, setIsExpanded] = useControlled(expanded, Boolean(defaultExpanded));
+	const handleAction = useCallback((event) => {
+		if (!disabled) {
+			onChange?.(event, !isExpanded);
+			setIsExpanded(!isExpanded);
+			return true;
+		}
+		return false;
+	}, [
+		disabled,
+		onChange,
+		isExpanded,
+		setIsExpanded
+	]);
+	const handleClick = useCallback((event) => {
+		handleAction(event);
+		event.preventDefault();
+		event.stopPropagation();
+	}, [handleAction]);
+	const handleKeyDown = useCallback((event) => {
+		let isEventHandled = false;
+		const { key } = event;
+		if (event.altKey || event.ctrlKey || event.metaKey || event.currentTarget !== event.target) return;
+		switch (key) {
+			case "Enter":
+			case " ":
+				isEventHandled = handleAction(event);
+				break;
+			default: return;
+		}
+		if (isEventHandled) {
+			event.preventDefault();
+			event.stopPropagation();
+		}
+	}, [handleAction]);
+	const id = useUniqueId(idProp);
+	const bladeHeaderId = setId(id, "button");
+	const bladeContainerId = setId(id, "container");
+	const bladeHeader = useMemo(() => {
+		const buttonLabel = typeof label === "function" ? label(isExpanded) : label;
+		const bladeButton = /* @__PURE__ */ jsx(HvTypography, {
+			id: bladeHeaderId,
+			component: "div",
+			role: "button",
+			className: cx(classes.button, {
+				[classes.textOnlyLabel]: typeof buttonLabel === "string",
+				[classes.disabled]: disabled
+			}),
+			style: { flexShrink: headingLevel === void 0 ? 0 : void 0 },
+			disabled,
+			tabIndex: 0,
+			onKeyDown: handleKeyDown,
+			onClick: handleClick,
+			variant: labelVariant,
+			"aria-expanded": isExpanded,
+			"aria-controls": bladeContainerId,
+			...buttonProps,
+			children: buttonLabel
+		});
+		return headingLevel === void 0 ? bladeButton : /* @__PURE__ */ jsx(HvTypography, {
+			component: `h${headingLevel}`,
+			variant: labelVariant,
+			className: classes.heading,
+			style: { flexShrink: 0 },
+			children: bladeButton
+		});
+	}, [
+		bladeContainerId,
+		bladeHeaderId,
+		buttonProps,
+		classes.button,
+		classes.disabled,
+		classes.heading,
+		classes.textOnlyLabel,
+		cx,
+		disabled,
+		handleClick,
+		handleKeyDown,
+		headingLevel,
+		isExpanded,
+		label,
+		labelVariant
+	]);
+	const bladeRef = useRef(null);
+	const [maxWidth, setMaxWidth] = useState(void 0);
+	useEffect(() => {
+		if (!bladeRef.current) return;
+		const resizeObserver = new ResizeObserver((entries) => {
+			setMaxWidth(entries[0].target.clientWidth);
+		});
+		resizeObserver.observe(bladeRef.current.parentElement ?? bladeRef.current);
+		return () => {
+			resizeObserver.disconnect();
+		};
+	}, [isExpanded]);
+	const { style: containerStyle, ...otherContainerProps } = containerProps || {};
+	return /* @__PURE__ */ jsxs("div", {
+		ref: bladeRef,
+		id: idProp,
+		className: cx(classes.root, className, {
+			[classes.fullWidth]: fullWidth,
+			[classes.expanded]: isExpanded
+		}),
+		...others,
+		children: [bladeHeader, /* @__PURE__ */ jsx("div", {
+			id: bladeContainerId,
+			role: "region",
+			"aria-labelledby": bladeHeaderId,
+			className: classes.container,
+			hidden: !isExpanded,
+			style: {
+				...containerStyle,
+				maxWidth: isExpanded ? maxWidth : 0
+			},
+			...otherContainerProps,
+			children
+		})]
+	});
 };
+//#endregion
+export { HvBlade };

package/dist/Blade/Blade.styles.js

@@ -1,71 +1,56 @@
 import { createClasses, outlineStyles } from "@hitachivantara/uikit-react-core";
-import { theme } from "@hitachivantara/uikit-styles";
-const { staticClasses, useClasses } = createClasses("HvBlade", {
-  root: {
-    position: "relative",
-    display: "flex",
-    minWidth: 72,
-    "& + $root": {
-      marginLeft: theme.spacing("sm")
-    },
-    transition: "flex-grow 600ms linear",
-    zIndex: 0,
-    color: theme.colors.text,
-    backgroundColor: theme.colors.bgContainer,
-    borderRadius: theme.radii.round,
-    border: `1px solid ${theme.colors.border}`
-  },
-  expanded: {},
-  fullWidth: {
-    flexGrow: 0,
-    "&$expanded": {
-      flexGrow: 1
-    }
-  },
-  heading: {},
-  button: {
-    height: "100%",
-    minWidth: 70,
-    "&[disabled], &:active": {
-      outline: "none"
-    },
-    "&:focus": {
-      outline: "none",
-      background: theme.colors.bgHover
-    },
-    "&:hover": {
-      background: theme.colors.bgHover
-    },
-    "&:focus-visible": {
-      ...outlineStyles,
-      zIndex: 1
-    },
-    cursor: "pointer"
-  },
-  textOnlyLabel: {
-    padding: theme.spacing("xs", "sm")
-  },
-  container: {
-    display: "inline-block",
-    height: "100%",
-    width: "100%",
-    minWidth: 0,
-    overflowX: "hidden",
-    maxWidth: 0,
-    transition: "max-width 600ms linear"
-  },
-  disabled: {
-    cursor: "not-allowed",
-    color: theme.colors.textDisabled,
-    "&:focus": {
-      background: "none"
-    },
-    "&:hover": {
-      background: "none"
-    }
-  }
+import { theme as theme$1 } from "@hitachivantara/uikit-styles";
+//#region src/Blade/Blade.styles.tsx
+var { staticClasses, useClasses } = createClasses("HvBlade", {
+	root: {
+		position: "relative",
+		display: "flex",
+		minWidth: 72,
+		"& + $root": { marginLeft: theme$1.spacing("sm") },
+		transition: "flex-grow 600ms linear",
+		zIndex: 0,
+		color: theme$1.colors.text,
+		backgroundColor: theme$1.colors.bgContainer,
+		borderRadius: theme$1.radii.round,
+		border: `1px solid ${theme$1.colors.border}`
+	},
+	expanded: {},
+	fullWidth: {
+		flexGrow: 0,
+		"&$expanded": { flexGrow: 1 }
+	},
+	heading: {},
+	button: {
+		height: "100%",
+		minWidth: 70,
+		"&[disabled], &:active": { outline: "none" },
+		"&:focus": {
+			outline: "none",
+			background: theme$1.colors.bgHover
+		},
+		"&:hover": { background: theme$1.colors.bgHover },
+		"&:focus-visible": {
+			...outlineStyles,
+			zIndex: 1
+		},
+		cursor: "pointer"
+	},
+	textOnlyLabel: { padding: theme$1.spacing("xs", "sm") },
+	container: {
+		display: "inline-block",
+		height: "100%",
+		width: "100%",
+		minWidth: 0,
+		overflowX: "hidden",
+		maxWidth: 0,
+		transition: "max-width 600ms linear"
+	},
+	disabled: {
+		cursor: "not-allowed",
+		color: theme$1.colors.textDisabled,
+		"&:focus": { background: "none" },
+		"&:hover": { background: "none" }
+	}
 });
-export {
-  staticClasses,
-  useClasses
-};
+//#endregion
+export { staticClasses, useClasses };

package/dist/Blades/Blades.js

@@ -1,105 +1,74 @@
-import { jsx } from "react/jsx-runtime";
-import { useCallback, useMemo, Children, cloneElement } from "react";
-import { useDefaultProps, useControlled } from "@hitachivantara/uikit-react-core";
 import { useClasses } from "./Blades.styles.js";
-import { staticClasses } from "./Blades.styles.js";
+import { Children, cloneElement, useCallback, useMemo } from "react";
+import { useControlled, useDefaultProps } from "@hitachivantara/uikit-react-core";
+import { jsx } from "react/jsx-runtime";
+//#region src/Blades/Blades.tsx
 function getExpandedBlades(defaultExpanded, children, atMostOneExpanded, atLeastOneExpanded) {
-  const childrenArray = Children.toArray(children);
-  const expandedBlades = defaultExpanded ?? childrenArray.map((child, i) => {
-    const childIsControlled = child?.props?.expanded !== void 0;
-    const childIsExpanded = childIsControlled ? child?.props?.expanded : child?.props?.defaultExpanded;
-    return childIsExpanded ? i : void 0;
-  }).filter((v) => v !== void 0);
-  const numberOfExpandedBlades = expandedBlades.length;
-  if (atLeastOneExpanded && numberOfExpandedBlades === 0 && childrenArray.length > 0) {
-    return [0];
-  }
-  if (atMostOneExpanded && numberOfExpandedBlades > 1) {
-    return [expandedBlades[0]];
-  }
-  return expandedBlades;
+	const childrenArray = Children.toArray(children);
+	const expandedBlades = defaultExpanded ?? childrenArray.map((child, i) => {
+		return (child?.props?.expanded !== void 0 ? child?.props?.expanded : child?.props?.defaultExpanded) ? i : void 0;
+	}).filter((v) => v !== void 0);
+	const numberOfExpandedBlades = expandedBlades.length;
+	if (atLeastOneExpanded && numberOfExpandedBlades === 0 && childrenArray.length > 0) return [0];
+	if (atMostOneExpanded && numberOfExpandedBlades > 1) return [expandedBlades[0]];
+	return expandedBlades;
 }
-const HvBlades = (props) => {
-  const {
-    id,
-    className,
-    classes: classesProp,
-    children,
-    expanded: expandedProp,
-    defaultExpanded,
-    atMostOneExpanded = false,
-    atLeastOneExpanded = false,
-    fullWidthBlades = false,
-    onChange,
-    ...others
-  } = useDefaultProps("HvBlades", props);
-  const { classes, cx } = useClasses(classesProp);
-  const [expanded, setExpanded] = useControlled(
-    expandedProp,
-    () => getExpandedBlades(
-      defaultExpanded,
-      children,
-      atMostOneExpanded,
-      atLeastOneExpanded
-    )
-  );
-  const onChildChangeInterceptor = useCallback(
-    (index, childOnChange, event, isExpanded) => {
-      const newValue = [];
-      if (atMostOneExpanded) {
-        if (isExpanded) {
-          newValue.push(index);
-        }
-      } else {
-        newValue.push(...expanded);
-        if (isExpanded) {
-          newValue.push(index);
-        } else {
-          newValue.splice(newValue.indexOf(index), 1);
-        }
-      }
-      if (atLeastOneExpanded && newValue.length === 0) {
-        newValue.push(index);
-      }
-      childOnChange?.(event, isExpanded);
-      onChange?.(event, newValue);
-      setExpanded(newValue);
-    },
-    [onChange, expanded, setExpanded, atMostOneExpanded, atLeastOneExpanded]
-  );
-  const modifiedChildren = useMemo(() => {
-    return Children.map(children, (child, i) => {
-      const childIsExpanded = expanded.includes(i);
-      return cloneElement(child, {
-        expanded: childIsExpanded,
-        fullWidth: child?.props?.fullWidth ?? fullWidthBlades,
-        buttonProps: {
-          ...child?.props?.buttonProps,
-          "aria-disabled": (
-            // If the accordion panel associated with an accordion header is visible,
-            // and if the accordion does not permit the panel to be collapsed, the header
-            // button element has aria-disabled set to true.
-            child?.props?.disabled || childIsExpanded && atMostOneExpanded && expanded.length === 1 ? true : void 0
-          )
-        },
-        onChange: (event, isExpanded) => onChildChangeInterceptor(
-          i,
-          child?.props?.onChange,
-          event,
-          isExpanded
-        )
-      });
-    });
-  }, [
-    children,
-    expanded,
-    fullWidthBlades,
-    atMostOneExpanded,
-    onChildChangeInterceptor
-  ]);
-  return /* @__PURE__ */ jsx("div", { id, className: cx(classes.root, className), ...others, children: modifiedChildren });
-};
-export {
-  HvBlades,
-  staticClasses as bladesClasses
+/**
+* `HvBlades` is a component that groups multiple `HvBlade` components.
+*
+* It allows for better control over the expanded state of blades, suitable for both
+* controlled and uncontrolled scenarios.
+*/
+var HvBlades = (props) => {
+	const { id, className, classes: classesProp, children, expanded: expandedProp, defaultExpanded, atMostOneExpanded = false, atLeastOneExpanded = false, fullWidthBlades = false, onChange, ...others } = useDefaultProps("HvBlades", props);
+	const { classes, cx } = useClasses(classesProp);
+	const [expanded, setExpanded] = useControlled(expandedProp, () => getExpandedBlades(defaultExpanded, children, atMostOneExpanded, atLeastOneExpanded));
+	const onChildChangeInterceptor = useCallback((index, childOnChange, event, isExpanded) => {
+		const newValue = [];
+		if (atMostOneExpanded) {
+			if (isExpanded) newValue.push(index);
+		} else {
+			newValue.push(...expanded);
+			if (isExpanded) newValue.push(index);
+			else newValue.splice(newValue.indexOf(index), 1);
+		}
+		if (atLeastOneExpanded && newValue.length === 0) newValue.push(index);
+		childOnChange?.(event, isExpanded);
+		onChange?.(event, newValue);
+		setExpanded(newValue);
+	}, [
+		onChange,
+		expanded,
+		setExpanded,
+		atMostOneExpanded,
+		atLeastOneExpanded
+	]);
+	const modifiedChildren = useMemo(() => {
+		return Children.map(children, (child, i) => {
+			const childIsExpanded = expanded.includes(i);
+			return cloneElement(child, {
+				expanded: childIsExpanded,
+				fullWidth: child?.props?.fullWidth ?? fullWidthBlades,
+				buttonProps: {
+					...child?.props?.buttonProps,
+					"aria-disabled": child?.props?.disabled || childIsExpanded && atMostOneExpanded && expanded.length === 1 ? true : void 0
+				},
+				onChange: (event, isExpanded) => onChildChangeInterceptor(i, child?.props?.onChange, event, isExpanded)
+			});
+		});
+	}, [
+		children,
+		expanded,
+		fullWidthBlades,
+		atMostOneExpanded,
+		onChildChangeInterceptor
+	]);
+	return /* @__PURE__ */ jsx("div", {
+		id,
+		className: cx(classes.root, className),
+		...others,
+		children: modifiedChildren
+	});
 };
+//#endregion
+export { HvBlades };

package/dist/Blades/Blades.styles.js

@@ -1,11 +1,8 @@
 import { createClasses } from "@hitachivantara/uikit-react-core";
-const { staticClasses, useClasses } = createClasses("HvBlades", {
-  root: {
-    position: "relative",
-    display: "flex"
-  }
-});
-export {
-  staticClasses,
-  useClasses
-};
+//#region src/Blades/Blades.styles.tsx
+var { staticClasses, useClasses } = createClasses("HvBlades", { root: {
+	position: "relative",
+	display: "flex"
+} });
+//#endregion
+export { staticClasses, useClasses };