@hitachivantara/uikit-react-core 6.8.1 → 6.9.0

package/dist/BaseCheckBox/CheckBoxIcon.js

@@ -1,76 +1,60 @@
-import { jsx } from "react/jsx-runtime";
-import { useMemo } from "react";
-import { useDefaultProps, mergeStyles, createClasses } from "@hitachivantara/uikit-react-utils";
-import { getColor, theme } from "@hitachivantara/uikit-styles";
 import { SvgBase } from "../icons.js";
-const { useClasses } = createClasses("HvCheckBoxIcon", {
-  root: {
-    color: theme.colors.bgContainer,
-    borderRadius: theme.radii.base,
-    border: `1px solid ${theme.colors.borderStrong}`
-  },
-  checked: {
-    borderColor: "transparent",
-    backgroundColor: `var(--bg-color, ${theme.colors.primaryStrong})`,
-    color: theme.colors.bgContainer
-  },
-  indeterminate: {
-    color: theme.colors.textSubtle,
-    backgroundColor: theme.colors.bgContainer
-  },
-  semantic: {
-    "&[data-variant=indeterminate]": {
-      backgroundColor: theme.colors.bgContainer,
-      borderColor: theme.colors.borderStrong
-    }
-  },
-  disabled: {
-    color: theme.colors.bgDisabled,
-    borderColor: theme.colors.borderDisabled,
-    backgroundColor: theme.colors.bgDisabled,
-    "&[data-variant=checked],&[data-variant=indeterminate]": {
-      color: theme.colors.textDisabled,
-      borderColor: "currentcolor"
-    }
-  }
+import { getColor, theme } from "@hitachivantara/uikit-styles";
+import { createClasses, mergeStyles, useDefaultProps } from "@hitachivantara/uikit-react-utils";
+import { useMemo } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/BaseCheckBox/CheckBoxIcon.tsx
+var { useClasses } = createClasses("HvCheckBoxIcon", {
+	root: {
+		color: theme.colors.bgContainer,
+		borderRadius: theme.radii.base,
+		border: `1px solid ${theme.colors.borderStrong}`
+	},
+	checked: {
+		borderColor: "transparent",
+		backgroundColor: `var(--bg-color, ${theme.colors.primaryStrong})`,
+		color: theme.colors.bgContainer
+	},
+	indeterminate: {
+		color: theme.colors.textSubtle,
+		backgroundColor: theme.colors.bgContainer
+	},
+	semantic: { "&[data-variant=indeterminate]": {
+		backgroundColor: theme.colors.bgContainer,
+		borderColor: theme.colors.borderStrong
+	} },
+	disabled: {
+		color: theme.colors.bgDisabled,
+		borderColor: theme.colors.borderDisabled,
+		backgroundColor: theme.colors.bgDisabled,
+		"&[data-variant=checked],&[data-variant=indeterminate]": {
+			color: theme.colors.textDisabled,
+			borderColor: "currentcolor"
+		}
+	}
 });
-const HvCheckBoxIcon = (props) => {
-  const {
-    className,
-    classes: classesProp,
-    variant,
-    disabled,
-    semantic,
-    color
-  } = useDefaultProps("HvCheckBoxIcon", props);
-  const { classes, cx } = useClasses(classesProp, false);
-  const d = useMemo(() => {
-    switch (variant) {
-      case "checked":
-        return "m5.03,12.06l-3.76,-3.75l1.42,-1.42l2.24,2.25l6.3,-7.2l1.5,1.31l-7.7,8.81z";
-      case "indeterminate":
-        return "m3,8l8,0l0,-2l-8,0l0,2z";
-      case "default":
-      default:
-        return "m0,0l16,0l0,16l-16,0l0,-16z";
-    }
-  }, [variant]);
-  return /* @__PURE__ */ jsx(
-    SvgBase,
-    {
-      viewBox: "0 0 14 14",
-      "data-variant": variant,
-      className: cx(classes.root, className, {
-        [classes.checked]: variant === "checked",
-        [classes.indeterminate]: variant === "indeterminate",
-        [classes.semantic]: semantic,
-        [classes.disabled]: disabled
-      }),
-      style: mergeStyles({}, { "--bg-color": getColor(color) }),
-      children: /* @__PURE__ */ jsx("path", { d })
-    }
-  );
-};
-export {
-  HvCheckBoxIcon
+var HvCheckBoxIcon = (props) => {
+	const { className, classes: classesProp, variant, disabled, semantic, color } = useDefaultProps("HvCheckBoxIcon", props);
+	const { classes, cx } = useClasses(classesProp, false);
+	const d = useMemo(() => {
+		switch (variant) {
+			case "checked": return "m5.03,12.06l-3.76,-3.75l1.42,-1.42l2.24,2.25l6.3,-7.2l1.5,1.31l-7.7,8.81z";
+			case "indeterminate": return "m3,8l8,0l0,-2l-8,0l0,2z";
+			default: return "m0,0l16,0l0,16l-16,0l0,-16z";
+		}
+	}, [variant]);
+	return /* @__PURE__ */ jsx(SvgBase, {
+		viewBox: "0 0 14 14",
+		"data-variant": variant,
+		className: cx(classes.root, className, {
+			[classes.checked]: variant === "checked",
+			[classes.indeterminate]: variant === "indeterminate",
+			[classes.semantic]: semantic,
+			[classes.disabled]: disabled
+		}),
+		style: mergeStyles({}, { "--bg-color": getColor(color) }),
+		children: /* @__PURE__ */ jsx("path", { d })
+	});
 };
+//#endregion
+export { HvCheckBoxIcon };

package/dist/BaseDropdown/BaseDropdown.js

@@ -1,194 +1,152 @@
-import { jsxs, jsx } from "react/jsx-runtime";
-import { forwardRef, useState, useId, useCallback, isValidElement, cloneElement, Fragment } from "react";
-import useEventCallback from "@mui/utils/useEventCallback";
-import useForkRef from "@mui/utils/useForkRef";
-import { useDefaultProps } from "@hitachivantara/uikit-react-utils";
-import { useControlled } from "../hooks/useControlled.js";
+import { HvTypography } from "../Typography/Typography.js";
+import { isKey, isOneOfKeys } from "../utils/keyboardUtils.js";
 import { useUniqueId } from "../hooks/useUniqueId.js";
 import { HvIcon } from "../icons.js";
-import { isKey, isOneOfKeys } from "../utils/keyboardUtils.js";
+import { useControlled } from "../hooks/useControlled.js";
 import { useClasses } from "./BaseDropdown.styles.js";
-import { staticClasses } from "./BaseDropdown.styles.js";
 import { HvDropdownPanel } from "./BaseDropdownPanel.js";
-import { HvTypography } from "../Typography/Typography.js";
-const HvBaseDropdown = forwardRef(function BaseDropdown(props, ref) {
-  const {
-    id: idProp,
-    className,
-    classes: classesProp,
-    children,
-    role,
-    placeholder,
-    component,
-    headerComponent: HeaderComponentProp,
-    adornment,
-    expanded,
-    popperProps,
-    variableWidth = false,
-    placement: placementProp = "right",
-    dropdownHeaderProps,
-    defaultExpanded,
-    disabled,
-    readOnly,
-    required,
-    disablePortal,
-    "aria-expanded": ariaExpandedProp,
-    "aria-label": ariaLabelProp,
-    "aria-labelledby": ariaLabelledByProp,
-    dropdownHeaderRef: dropdownHeaderRefProp,
-    onToggle,
-    onClickOutside,
-    onContainerCreation,
-    ...others
-  } = useDefaultProps("HvBaseDropdown", props);
-  const { classes, cx } = useClasses(classesProp);
-  const [computedPlacement, setComputedPlacement] = useState();
-  const [referenceElement, setReferenceElement] = useState(
-    null
-  );
-  const [isOpen, setIsOpen] = useControlled(expanded, Boolean(defaultExpanded));
-  const headerRef = useForkRef(
-    setReferenceElement,
-    dropdownHeaderRefProp,
-    dropdownHeaderProps?.ref
-  );
-  const customHeaderRef = useForkRef(ref, headerRef);
-  const ariaRole = role || (component == null ? "combobox" : void 0);
-  const ariaExpanded = ariaExpandedProp ?? (ariaRole ? !!isOpen : void 0);
-  const id = useUniqueId(idProp);
-  const containerId = useId();
-  const headerControlArias = {
-    "aria-required": required ?? void 0,
-    "aria-readonly": readOnly ?? void 0,
-    "aria-disabled": disabled ?? void 0,
-    "aria-expanded": ariaExpanded,
-    "aria-owns": isOpen ? containerId : void 0,
-    "aria-controls": isOpen ? containerId : void 0
-  };
-  const headerAriaLabels = {
-    "aria-label": ariaLabelProp,
-    "aria-labelledby": ariaLabelledByProp
-  };
-  const handleToggle = useCallback(
-    (event) => {
-      if (event && !isKey(event, "Tab")) {
-        event.preventDefault();
-      }
-      const notControlKey = !!event?.code && !isOneOfKeys(event, ["Tab", "Enter", "Esc", "ArrowDown", "Space"]);
-      const ignoredCombinations = isKey(event, "Esc") && !isOpen || isKey(event, "ArrowDown") && isOpen || isKey(event, "Tab") && !isOpen;
-      if (disabled || notControlKey || ignoredCombinations) return;
-      const newOpen = !isOpen;
-      setIsOpen(() => {
-        if (!newOpen) {
-          referenceElement?.focus({ preventScroll: true });
-        }
-        return newOpen;
-      });
-      onToggle?.(event, newOpen);
-    },
-    [isOpen, disabled, setIsOpen, onToggle, referenceElement]
-  );
-  const defaultHeaderElement = /* @__PURE__ */ jsxs(
-    "div",
-    {
-      "data-popper-placement": computedPlacement,
-      className: cx(classes.header, {
-        [classes.headerOpen]: isOpen,
-        [classes.headerReadOnly]: readOnly,
-        [classes.headerDisabled]: disabled
-      }),
-      role: ariaRole === "combobox" ? "textbox" : void 0,
-      ...headerAriaLabels,
-      style: disabled || readOnly ? { pointerEvents: "none" } : void 0,
-      tabIndex: disabled ? -1 : 0,
-      ref: headerRef,
-      ...dropdownHeaderProps,
-      children: [
-        /* @__PURE__ */ jsx(
-          "div",
-          {
-            className: cx(classes.selection, {
-              [classes.selectionDisabled]: disabled
-            }),
-            children: placeholder && typeof placeholder === "string" ? /* @__PURE__ */ jsx(HvTypography, { noWrap: true, className: classes.placeholder, children: placeholder }) : placeholder
-          }
-        ),
-        /* @__PURE__ */ jsx("div", { className: classes.arrowContainer, children: adornment || /* @__PURE__ */ jsx(
-          HvIcon,
-          {
-            name: "CaretDown",
-            size: "xs",
-            rotate: isOpen,
-            className: classes.arrow
-          }
-        ) })
-      ]
-    }
-  );
-  const headerElement = component && isValidElement(component) ? cloneElement(component, {
-    ref: headerRef,
-    ...headerControlArias
-  }) : defaultHeaderElement;
-  const handleOutside = (event) => {
-    const isButtonClick = referenceElement?.contains(event.target);
-    if (!isButtonClick) {
-      onClickOutside?.(event);
-      setIsOpen(false);
-      onToggle?.(event, false);
-    }
-  };
-  const hasCustomHeader = !!HeaderComponentProp;
-  const HeaderComponent = HeaderComponentProp || "div";
-  const RootComponent = HeaderComponentProp ? Fragment : "div";
-  const onFirstUpdate = useEventCallback((state) => {
-    setComputedPlacement(state.placement);
-    onContainerCreation?.(state.elements?.popper ?? null, state);
-  });
-  return /* @__PURE__ */ jsxs(RootComponent, { ...!hasCustomHeader && { className: classes.root }, children: [
-    /* @__PURE__ */ jsx(
-      HeaderComponent,
-      {
-        ref: hasCustomHeader ? customHeaderRef : ref,
-        id,
-        disabled: hasCustomHeader && disabled,
-        className: cx(className, {
-          [classes.anchor]: !hasCustomHeader,
-          [classes.rootDisabled]: disabled
-        }),
-        ...!readOnly && {
-          onKeyDown: handleToggle,
-          onClick: handleToggle
-        },
-        ...(ariaRole || hasCustomHeader) && {
-          role: hasCustomHeader ? void 0 : ariaRole,
-          ...headerAriaLabels,
-          ...headerControlArias
-        },
-        tabIndex: hasCustomHeader ? void 0 : -1,
-        ...others,
-        children: headerElement
-      }
-    ),
-    /* @__PURE__ */ jsx(
-      HvDropdownPanel,
-      {
-        open: isOpen,
-        classes: { container: classes.container, panel: classes.panel },
-        placement: `bottom-${placementProp === "right" ? "start" : "end"}`,
-        variableWidth,
-        containerId,
-        onClickAway: handleOutside,
-        disablePortal,
-        anchorEl: referenceElement,
-        onToggle: handleToggle,
-        onFirstUpdate,
-        popperOptions: popperProps,
-        children
-      }
-    )
-  ] });
+import { useDefaultProps } from "@hitachivantara/uikit-react-utils";
+import { Fragment, cloneElement, forwardRef, isValidElement, useCallback, useId, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import useEventCallback from "@mui/utils/useEventCallback";
+import useForkRef from "@mui/utils/useForkRef";
+//#region src/BaseDropdown/BaseDropdown.tsx
+var HvBaseDropdown = forwardRef(function BaseDropdown(props, ref) {
+	const { id: idProp, className, classes: classesProp, children, role, placeholder, component, headerComponent: HeaderComponentProp, adornment, expanded, popperProps, variableWidth = false, placement: placementProp = "right", dropdownHeaderProps, defaultExpanded, disabled, readOnly, required, disablePortal, "aria-expanded": ariaExpandedProp, "aria-label": ariaLabelProp, "aria-labelledby": ariaLabelledByProp, dropdownHeaderRef: dropdownHeaderRefProp, onToggle, onClickOutside, onContainerCreation, ...others } = useDefaultProps("HvBaseDropdown", props);
+	const { classes, cx } = useClasses(classesProp);
+	const [computedPlacement, setComputedPlacement] = useState();
+	const [referenceElement, setReferenceElement] = useState(null);
+	const [isOpen, setIsOpen] = useControlled(expanded, Boolean(defaultExpanded));
+	const headerRef = useForkRef(setReferenceElement, dropdownHeaderRefProp, dropdownHeaderProps?.ref);
+	const customHeaderRef = useForkRef(ref, headerRef);
+	const ariaRole = role || (component == null ? "combobox" : void 0);
+	const ariaExpanded = ariaExpandedProp ?? (ariaRole ? !!isOpen : void 0);
+	const id = useUniqueId(idProp);
+	const containerId = useId();
+	const headerControlArias = {
+		"aria-required": required ?? void 0,
+		"aria-readonly": readOnly ?? void 0,
+		"aria-disabled": disabled ?? void 0,
+		"aria-expanded": ariaExpanded,
+		"aria-owns": isOpen ? containerId : void 0,
+		"aria-controls": isOpen ? containerId : void 0
+	};
+	const headerAriaLabels = {
+		"aria-label": ariaLabelProp,
+		"aria-labelledby": ariaLabelledByProp
+	};
+	const handleToggle = useCallback((event) => {
+		if (event && !isKey(event, "Tab")) event.preventDefault();
+		const notControlKey = !!event?.code && !isOneOfKeys(event, [
+			"Tab",
+			"Enter",
+			"Esc",
+			"ArrowDown",
+			"Space"
+		]);
+		const ignoredCombinations = isKey(event, "Esc") && !isOpen || isKey(event, "ArrowDown") && isOpen || isKey(event, "Tab") && !isOpen;
+		if (disabled || notControlKey || ignoredCombinations) return;
+		const newOpen = !isOpen;
+		setIsOpen(() => {
+			if (!newOpen) referenceElement?.focus({ preventScroll: true });
+			return newOpen;
+		});
+		onToggle?.(event, newOpen);
+	}, [
+		isOpen,
+		disabled,
+		setIsOpen,
+		onToggle,
+		referenceElement
+	]);
+	const defaultHeaderElement = /* @__PURE__ */ jsxs("div", {
+		"data-popper-placement": computedPlacement,
+		className: cx(classes.header, {
+			[classes.headerOpen]: isOpen,
+			[classes.headerReadOnly]: readOnly,
+			[classes.headerDisabled]: disabled
+		}),
+		role: ariaRole === "combobox" ? "textbox" : void 0,
+		...headerAriaLabels,
+		style: disabled || readOnly ? { pointerEvents: "none" } : void 0,
+		tabIndex: disabled ? -1 : 0,
+		ref: headerRef,
+		...dropdownHeaderProps,
+		children: [/* @__PURE__ */ jsx("div", {
+			className: cx(classes.selection, { [classes.selectionDisabled]: disabled }),
+			children: placeholder && typeof placeholder === "string" ? /* @__PURE__ */ jsx(HvTypography, {
+				noWrap: true,
+				className: classes.placeholder,
+				children: placeholder
+			}) : placeholder
+		}), /* @__PURE__ */ jsx("div", {
+			className: classes.arrowContainer,
+			children: adornment || /* @__PURE__ */ jsx(HvIcon, {
+				name: "CaretDown",
+				size: "xs",
+				rotate: isOpen,
+				className: classes.arrow
+			})
+		})]
+	});
+	const headerElement = component && isValidElement(component) ? cloneElement(component, {
+		ref: headerRef,
+		...headerControlArias
+	}) : defaultHeaderElement;
+	const handleOutside = (event) => {
+		if (!referenceElement?.contains(event.target)) {
+			onClickOutside?.(event);
+			setIsOpen(false);
+			onToggle?.(event, false);
+		}
+	};
+	const hasCustomHeader = !!HeaderComponentProp;
+	const HeaderComponent = HeaderComponentProp || "div";
+	const RootComponent = HeaderComponentProp ? Fragment : "div";
+	const onFirstUpdate = useEventCallback((state) => {
+		setComputedPlacement(state.placement);
+		onContainerCreation?.(state.elements?.popper ?? null, state);
+	});
+	return /* @__PURE__ */ jsxs(RootComponent, {
+		...!hasCustomHeader && { className: classes.root },
+		children: [/* @__PURE__ */ jsx(HeaderComponent, {
+			ref: hasCustomHeader ? customHeaderRef : ref,
+			id,
+			disabled: hasCustomHeader && disabled,
+			className: cx(className, {
+				[classes.anchor]: !hasCustomHeader,
+				[classes.rootDisabled]: disabled
+			}),
+			...!readOnly && {
+				onKeyDown: handleToggle,
+				onClick: handleToggle
+			},
+			...(ariaRole || hasCustomHeader) && {
+				role: hasCustomHeader ? void 0 : ariaRole,
+				...headerAriaLabels,
+				...headerControlArias
+			},
+			tabIndex: hasCustomHeader ? void 0 : -1,
+			...others,
+			children: headerElement
+		}), /* @__PURE__ */ jsx(HvDropdownPanel, {
+			open: isOpen,
+			classes: {
+				container: classes.container,
+				panel: classes.panel
+			},
+			placement: `bottom-${placementProp === "right" ? "start" : "end"}`,
+			variableWidth,
+			containerId,
+			onClickAway: handleOutside,
+			disablePortal,
+			anchorEl: referenceElement,
+			onToggle: handleToggle,
+			onFirstUpdate,
+			popperOptions: popperProps,
+			children
+		})]
+	});
 });
-export {
-  HvBaseDropdown,
-  staticClasses as baseDropdownClasses
-};
+//#endregion
+export { HvBaseDropdown };

package/dist/BaseDropdown/BaseDropdown.styles.js

@@ -1,86 +1,74 @@
-import { createClasses } from "@hitachivantara/uikit-react-utils";
-import { theme } from "@hitachivantara/uikit-styles";
 import { outlineStyles } from "../utils/focusUtils.js";
-const { useClasses, staticClasses } = createClasses("HvBaseDropdown", {
-  root: { width: "100%", position: "relative" },
-  rootDisabled: {
-    cursor: "not-allowed",
-    "&:focus": {
-      outline: "none"
-    }
-  },
-  anchor: { display: "inline-block", width: "100%" },
-  container: {},
-  header: {
-    cursor: "pointer",
-    userSelect: "none",
-    position: "relative",
-    backgroundColor: theme.colors.bgContainer,
-    boxSizing: "border-box",
-    border: `1px solid ${theme.colors.text}`,
-    borderRadius: theme.radii.round,
-    ":hover,:focus-visible": {
-      borderColor: theme.colors.primary
-    },
-    ":focus": {
-      outline: "none"
-    },
-    ":focus-visible": {
-      ...outlineStyles
-    }
-  },
-  headerOpen: {
-    "&,:hover": {
-      borderColor: theme.colors.text
-    }
-  },
-  headerDisabled: {
-    cursor: "not-allowed",
-    pointerEvents: "none",
-    color: theme.colors.textDisabled,
-    backgroundColor: theme.colors.bgPage,
-    "&,:hover": {
-      borderColor: "currentcolor"
-    }
-  },
-  headerReadOnly: {
-    cursor: "not-allowed",
-    pointerEvents: "none",
-    color: theme.colors.textSubtle,
-    borderColor: "currentcolor",
-    backgroundColor: theme.colors.bgPage,
-    userSelect: "text",
-    ":focus-visible": {
-      outline: "none",
-      borderColor: "currentcolor"
-    }
-  },
-  arrowContainer: {
-    position: "absolute",
-    pointerEvents: "none",
-    top: -1,
-    right: -1
-  },
-  arrow: {},
-  selection: {
-    display: "flex",
-    alignItems: "center",
-    height: "30px",
-    boxSizing: "border-box",
-    paddingLeft: theme.space.xs,
-    paddingRight: 32
-  },
-  selectionDisabled: {},
-  placeholder: {
-    display: "block",
-    color: theme.colors.textSubtle
-  },
-  panel: {
-    padding: 0
-    // TODO(major): re-add padding as most elements need it
-  }
+import { theme } from "@hitachivantara/uikit-styles";
+import { createClasses } from "@hitachivantara/uikit-react-utils";
+//#region src/BaseDropdown/BaseDropdown.styles.tsx
+var { useClasses, staticClasses } = createClasses("HvBaseDropdown", {
+	root: {
+		width: "100%",
+		position: "relative"
+	},
+	rootDisabled: {
+		cursor: "not-allowed",
+		"&:focus": { outline: "none" }
+	},
+	anchor: {
+		display: "inline-block",
+		width: "100%"
+	},
+	container: {},
+	header: {
+		cursor: "pointer",
+		userSelect: "none",
+		position: "relative",
+		backgroundColor: theme.colors.bgContainer,
+		boxSizing: "border-box",
+		border: `1px solid ${theme.colors.text}`,
+		borderRadius: theme.radii.round,
+		":hover,:focus-visible": { borderColor: theme.colors.primary },
+		":focus": { outline: "none" },
+		":focus-visible": { ...outlineStyles }
+	},
+	headerOpen: { "&,:hover": { borderColor: theme.colors.text } },
+	headerDisabled: {
+		cursor: "not-allowed",
+		pointerEvents: "none",
+		color: theme.colors.textDisabled,
+		backgroundColor: theme.colors.bgPage,
+		"&,:hover": { borderColor: "currentcolor" }
+	},
+	headerReadOnly: {
+		cursor: "not-allowed",
+		pointerEvents: "none",
+		color: theme.colors.textSubtle,
+		borderColor: "currentcolor",
+		backgroundColor: theme.colors.bgPage,
+		userSelect: "text",
+		":focus-visible": {
+			outline: "none",
+			borderColor: "currentcolor"
+		}
+	},
+	arrowContainer: {
+		position: "absolute",
+		pointerEvents: "none",
+		top: -1,
+		right: -1
+	},
+	arrow: {},
+	selection: {
+		display: "flex",
+		alignItems: "center",
+		height: "30px",
+		boxSizing: "border-box",
+		paddingLeft: theme.space.xs,
+		paddingRight: 32
+	},
+	selectionDisabled: {},
+	placeholder: {
+		display: "block",
+		color: theme.colors.textSubtle
+	},
+	panel: { padding: 0 }
 });
-export {
-  staticClasses,
-  useClasses
-};
+//#endregion
+export { staticClasses, useClasses };