@hitachivantara/uikit-react-core 6.8.1 → 6.9.0

package/dist/BaseSwitch/BaseSwitch.js

@@ -1,110 +1,72 @@
+import { useClasses } from "./BaseSwitch.styles.js";
+import { getColor } from "@hitachivantara/uikit-styles";
+import { useDefaultProps } from "@hitachivantara/uikit-react-utils";
+import { forwardRef, useCallback, useState } from "react";
 import { jsx } from "react/jsx-runtime";
-import { forwardRef, useState, useCallback } from "react";
 import MuiSwitch from "@mui/material/Switch";
-import { useDefaultProps } from "@hitachivantara/uikit-react-utils";
-import { getColor } from "@hitachivantara/uikit-styles";
-import { useClasses } from "./BaseSwitch.styles.js";
-import { staticClasses } from "./BaseSwitch.styles.js";
-const HvBaseSwitch = forwardRef(
-  function HvBaseSwitch2(props, ref) {
-    const {
-      classes: classesProp,
-      className,
-      id,
-      name,
-      value = "on",
-      required = false,
-      readOnly = false,
-      disabled = false,
-      checked,
-      defaultChecked,
-      onChange,
-      inputProps,
-      onFocusVisible,
-      onBlur,
-      size = "sm",
-      color,
-      ...others
-    } = useDefaultProps("HvBaseSwitch", props);
-    const { classes, cx, css } = useClasses(classesProp);
-    const [focusVisible, setFocusVisible] = useState(false);
-    const onFocusVisibleCallback = useCallback(
-      (evt) => {
-        setFocusVisible(true);
-        onFocusVisible?.(evt);
-      },
-      [onFocusVisible]
-    );
-    const onBlurCallback = useCallback(
-      (evt) => {
-        setFocusVisible(false);
-        onBlur?.(evt);
-      },
-      [onBlur]
-    );
-    const onLocalChange = useCallback(
-      (evt) => {
-        if (readOnly) {
-          return;
-        }
-        onChange?.(evt, evt.target.checked, value);
-      },
-      [onChange, readOnly, value]
-    );
-    return /* @__PURE__ */ jsx(
-      MuiSwitch,
-      {
-        ref,
-        id,
-        name,
-        className: cx(
-          classes.root,
-          {
-            [classes.focusVisible]: focusVisible,
-            [classes.readOnly]: readOnly,
-            [classes.disabled]: disabled
-          },
-          className
-        ),
-        disabled,
-        required,
-        readOnly,
-        onChange: onLocalChange,
-        value,
-        checked,
-        defaultChecked,
-        classes: {
-          root: classes.switch,
-          switchBase: classes.switchBase,
-          checked: classes.checked,
-          track: cx(
-            classes.track,
-            color ? css({
-              backgroundColor: `${getColor(color, "transparent")}!important`,
-              border: "none"
-            }) : void 0
-          ),
-          thumb: cx(
-            classes.thumb,
-            color ? css({
-              border: "none"
-            }) : void 0
-          ),
-          disabled: classes.disabled
-        },
-        slotProps: {
-          // keep switch squashed by `slotProps.input` https://github.com/mui/material-ui/pull/46482
-          input: { role: "switch", ...inputProps }
-        },
-        onFocusVisible: onFocusVisibleCallback,
-        onBlur: onBlurCallback,
-        "data-size": size,
-        ...others
-      }
-    );
-  }
-);
-export {
-  HvBaseSwitch,
-  staticClasses as baseSwitchClasses
-};
+//#region src/BaseSwitch/BaseSwitch.tsx
+/**
+* A Switch is <b>binary</b> and work as a digital on/off button.
+*
+* The Base Switch is a building block of the Switch form element. Don't use unless
+* implementing a custom use case not covered by the Switch form element.
+*/
+var HvBaseSwitch = forwardRef(function HvBaseSwitch(props, ref) {
+	const { classes: classesProp, className, id, name, value = "on", required = false, readOnly = false, disabled = false, checked, defaultChecked, onChange, inputProps, onFocusVisible, onBlur, size = "sm", color, ...others } = useDefaultProps("HvBaseSwitch", props);
+	const { classes, cx, css } = useClasses(classesProp);
+	const [focusVisible, setFocusVisible] = useState(false);
+	const onFocusVisibleCallback = useCallback((evt) => {
+		setFocusVisible(true);
+		onFocusVisible?.(evt);
+	}, [onFocusVisible]);
+	const onBlurCallback = useCallback((evt) => {
+		setFocusVisible(false);
+		onBlur?.(evt);
+	}, [onBlur]);
+	const onLocalChange = useCallback((evt) => {
+		if (readOnly) return;
+		onChange?.(evt, evt.target.checked, value);
+	}, [
+		onChange,
+		readOnly,
+		value
+	]);
+	return /* @__PURE__ */ jsx(MuiSwitch, {
+		ref,
+		id,
+		name,
+		className: cx(classes.root, {
+			[classes.focusVisible]: focusVisible,
+			[classes.readOnly]: readOnly,
+			[classes.disabled]: disabled
+		}, className),
+		disabled,
+		required,
+		readOnly,
+		onChange: onLocalChange,
+		value,
+		checked,
+		defaultChecked,
+		classes: {
+			root: classes.switch,
+			switchBase: classes.switchBase,
+			checked: classes.checked,
+			track: cx(classes.track, color ? css({
+				backgroundColor: `${getColor(color, "transparent")}!important`,
+				border: "none"
+			}) : void 0),
+			thumb: cx(classes.thumb, color ? css({ border: "none" }) : void 0),
+			disabled: classes.disabled
+		},
+		slotProps: { input: {
+			role: "switch",
+			...inputProps
+		} },
+		onFocusVisible: onFocusVisibleCallback,
+		onBlur: onBlurCallback,
+		"data-size": size,
+		...others
+	});
+});
+//#endregion
+export { HvBaseSwitch };

package/dist/BaseSwitch/BaseSwitch.styles.js

@@ -1,115 +1,96 @@
-import { createClasses } from "@hitachivantara/uikit-react-utils";
-import { theme } from "@hitachivantara/uikit-styles";
 import { outlineStyles } from "../utils/focusUtils.js";
-const { staticClasses, useClasses } = createClasses("HvBaseSwitch", {
-  root: {
-    padding: theme.space.xs,
-    cursor: "pointer",
-    width: "fit-content",
-    height: "fit-content",
-    alignItems: "center",
-    justifyContent: "center",
-    borderRadius: theme.radii.round,
-    "&:hover": {
-      backgroundColor: theme.colors.bgHover
-    },
-    // Higher CSS specificity here
-    "& $switchBase": {
-      "&:hover": {
-        backgroundColor: "transparent"
-      },
-      "&$checked": {
-        transform: "translateX(16px)",
-        "& + $track": {
-          opacity: 1,
-          backgroundColor: theme.colors.primary,
-          borderColor: "transparent"
-        },
-        "&:not($disabled) $thumb": {
-          borderColor: "transparent"
-        },
-        "&:hover": {
-          backgroundColor: "transparent"
-        }
-      }
-    },
-    // Higher CSS specificity here
-    "&$disabled": {
-      "& $switchBase": {
-        "& + $track": {
-          opacity: 1,
-          backgroundColor: theme.colors.bgDisabled,
-          border: `solid 1px ${theme.colors.borderDisabled}`
-        }
-      }
-    }
-  },
-  switch: {
-    width: "40px",
-    height: "32px",
-    padding: 0,
-    "&$readOnly $switchBase": {
-      cursor: "default"
-    }
-  },
-  switchBase: {
-    width: "40px",
-    height: "32px",
-    padding: 0,
-    "&[data-size=medium]": {
-      "+.HvBaseSwitch-track": {
-        width: 48,
-        height: 22
-      },
-      "& $thumb": {
-        left: -2,
-        top: 3,
-        width: 18,
-        height: 18
-      },
-      "&$checked $thumb": {
-        left: 8,
-        top: 3
-      }
-    }
-  },
-  track: {
-    opacity: 1,
-    borderRadius: theme.radii.full,
-    height: "16px",
-    width: "32px",
-    border: `solid 1px ${theme.colors.borderStrong}`,
-    backgroundColor: theme.colors.bgContainer
-  },
-  thumb: {
-    position: "relative",
-    left: "-5px",
-    width: "10px",
-    height: "10px",
-    border: `solid 1px ${theme.colors.borderStrong}`,
-    backgroundColor: theme.colors.bgContainer,
-    marginLeft: "2px",
-    marginTop: 0,
-    boxShadow: "none"
-  },
-  checked: {},
-  disabled: {
-    cursor: "not-allowed",
-    "& $switch": {
-      cursor: "not-allowed"
-    },
-    "& $thumb": {
-      backgroundColor: theme.colors.bgPageSecondary,
-      border: `solid 1px ${theme.colors.textDisabled}`
-    }
-  },
-  readOnly: {},
-  focusVisible: {
-    borderRadius: theme.radii.round,
-    ...outlineStyles
-  }
+import { theme } from "@hitachivantara/uikit-styles";
+import { createClasses } from "@hitachivantara/uikit-react-utils";
+//#region src/BaseSwitch/BaseSwitch.styles.tsx
+var { staticClasses, useClasses } = createClasses("HvBaseSwitch", {
+	root: {
+		padding: theme.space.xs,
+		cursor: "pointer",
+		width: "fit-content",
+		height: "fit-content",
+		alignItems: "center",
+		justifyContent: "center",
+		borderRadius: theme.radii.round,
+		"&:hover": { backgroundColor: theme.colors.bgHover },
+		"& $switchBase": {
+			"&:hover": { backgroundColor: "transparent" },
+			"&$checked": {
+				transform: "translateX(16px)",
+				"& + $track": {
+					opacity: 1,
+					backgroundColor: theme.colors.primary,
+					borderColor: "transparent"
+				},
+				"&:not($disabled) $thumb": { borderColor: "transparent" },
+				"&:hover": { backgroundColor: "transparent" }
+			}
+		},
+		"&$disabled": { "& $switchBase": { "& + $track": {
+			opacity: 1,
+			backgroundColor: theme.colors.bgDisabled,
+			border: `solid 1px ${theme.colors.borderDisabled}`
+		} } }
+	},
+	switch: {
+		width: "40px",
+		height: "32px",
+		padding: 0,
+		"&$readOnly $switchBase": { cursor: "default" }
+	},
+	switchBase: {
+		width: "40px",
+		height: "32px",
+		padding: 0,
+		"&[data-size=medium]": {
+			"+.HvBaseSwitch-track": {
+				width: 48,
+				height: 22
+			},
+			"& $thumb": {
+				left: -2,
+				top: 3,
+				width: 18,
+				height: 18
+			},
+			"&$checked $thumb": {
+				left: 8,
+				top: 3
+			}
+		}
+	},
+	track: {
+		opacity: 1,
+		borderRadius: theme.radii.full,
+		height: "16px",
+		width: "32px",
+		border: `solid 1px ${theme.colors.borderStrong}`,
+		backgroundColor: theme.colors.bgContainer
+	},
+	thumb: {
+		position: "relative",
+		left: "-5px",
+		width: "10px",
+		height: "10px",
+		border: `solid 1px ${theme.colors.borderStrong}`,
+		backgroundColor: theme.colors.bgContainer,
+		marginLeft: "2px",
+		marginTop: 0,
+		boxShadow: "none"
+	},
+	checked: {},
+	disabled: {
+		cursor: "not-allowed",
+		"& $switch": { cursor: "not-allowed" },
+		"& $thumb": {
+			backgroundColor: theme.colors.bgPageSecondary,
+			border: `solid 1px ${theme.colors.textDisabled}`
+		}
+	},
+	readOnly: {},
+	focusVisible: {
+		borderRadius: theme.radii.round,
+		...outlineStyles
+	}
 });
-export {
-  staticClasses,
-  useClasses
-};
+//#endregion
+export { staticClasses, useClasses };

package/dist/BreadCrumb/BreadCrumb.js

@@ -1,110 +1,88 @@
-import { jsx, jsxs } from "react/jsx-runtime";
-import { forwardRef, isValidElement } from "react";
-import { useDefaultProps } from "@hitachivantara/uikit-react-utils";
+import { HvTypography } from "../Typography/Typography.js";
 import { SvgBase } from "../icons.js";
-import { useClasses } from "./BreadCrumb.styles.js";
-import { staticClasses } from "./BreadCrumb.styles.js";
-import { pathWithSubMenu, removeExtension } from "./utils.js";
-import { HvPathElement } from "./PathElement/PathElement.js";
 import { HvIconButton } from "../IconButton/IconButton.js";
-import { HvTypography } from "../Typography/Typography.js";
+import { useClasses } from "./BreadCrumb.styles.js";
 import { HvBreadCrumbPage } from "./Page/Page.js";
-const HomeIcon = (props) => /* @__PURE__ */ jsx(SvgBase, { viewBox: "0 0 256 256", width: "16", height: "16", ...props, children: /* @__PURE__ */ jsx("path", { d: "M219.31,108.68l-80-80a16,16,0,0,0-22.62,0l-80,80A15.87,15.87,0,0,0,32,120v96a8,8,0,0,0,8,8h64a8,8,0,0,0,8-8V160h32v56a8,8,0,0,0,8,8h64a8,8,0,0,0,8-8V120A15.87,15.87,0,0,0,219.31,108.68ZM208,208H160V152a8,8,0,0,0-8-8H104a8,8,0,0,0-8,8v56H48V120l80-80,80,80Z" }) });
-const HvBreadCrumb = forwardRef(function HvBreadCrumb2(props, ref) {
-  const {
-    classes: classesProp,
-    className,
-    id,
-    listRoute = [],
-    home,
-    maxVisible,
-    url,
-    onClick,
-    component,
-    dropDownMenuProps,
-    separator,
-    ...others
-  } = useDefaultProps("HvBreadCrumb", props);
-  const { classes, cx } = useClasses(classesProp);
-  const maxVisibleElem = maxVisible && maxVisible < 2 ? 2 : maxVisible;
-  let listPath = listRoute.slice();
-  if (url != null) {
-    const baseUrl = url.match(/^.*\/\/[^/]+/) ?? "";
-    const pathNames = url.replace(/^.*\/\/[^/]+/, "").split("/").filter(Boolean);
-    listPath = pathNames.map((elem, index) => ({
-      label: decodeURI(elem),
-      path: `${baseUrl}/${pathNames.slice(0, index + 1).join("/")}`
-    }));
-  }
-  const breadcrumbPath = maxVisibleElem && listPath.length > maxVisibleElem ? pathWithSubMenu(
-    id,
-    listPath,
-    maxVisibleElem,
-    onClick,
-    dropDownMenuProps
-  ) : listPath;
-  return /* @__PURE__ */ jsx("nav", { ref, id, className: cx(classes.root, className), ...others, children: /* @__PURE__ */ jsxs("ol", { className: classes.orderedList, children: [
-    home && /* @__PURE__ */ jsx(
-      HvPathElement,
-      {
-        classes: {
-          centerContainer: classes.centerContainer,
-          separatorContainer: classes.separatorContainer
-        },
-        separator,
-        children: /* @__PURE__ */ jsx(
-          HvIconButton,
-          {
-            title: home.label,
-            component: component || "a",
-            href: home.path,
-            onClick: (event) => {
-              event.preventDefault();
-              onClick?.(event, home);
-            },
-            children: /* @__PURE__ */ jsx(HomeIcon, {})
-          }
-        )
-      }
-    ),
-    listPath.map((elem, index) => {
-      const key = `key_${index}`;
-      const isLast = index === breadcrumbPath.length - 1;
-      return /* @__PURE__ */ jsx(
-        HvPathElement,
-        {
-          classes: {
-            centerContainer: classes.centerContainer,
-            separatorContainer: classes.separatorContainer
-          },
-          last: isLast,
-          separator,
-          children: isValidElement(elem) && elem || isLast && /* @__PURE__ */ jsx(
-            HvTypography,
-            {
-              className: classes.currentPage,
-              variant: "caption1",
-              children: removeExtension(elem.label)
-            }
-          ) || /* @__PURE__ */ jsx(
-            HvBreadCrumbPage,
-            {
-              elem,
-              classes: {
-                a: classes.a,
-                link: classes.link
-              },
-              component,
-              onClick
-            }
-          )
-        },
-        key
-      );
-    })
-  ] }) });
+import { HvPathElement } from "./PathElement/PathElement.js";
+import { pathWithSubMenu, removeExtension } from "./utils.js";
+import { useDefaultProps } from "@hitachivantara/uikit-react-utils";
+import { forwardRef, isValidElement } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/BreadCrumb/BreadCrumb.tsx
+var HomeIcon = (props) => /* @__PURE__ */ jsx(SvgBase, {
+	viewBox: "0 0 256 256",
+	width: "16",
+	height: "16",
+	...props,
+	children: /* @__PURE__ */ jsx("path", { d: "M219.31,108.68l-80-80a16,16,0,0,0-22.62,0l-80,80A15.87,15.87,0,0,0,32,120v96a8,8,0,0,0,8,8h64a8,8,0,0,0,8-8V160h32v56a8,8,0,0,0,8,8h64a8,8,0,0,0,8-8V120A15.87,15.87,0,0,0,219.31,108.68ZM208,208H160V152a8,8,0,0,0-8-8H104a8,8,0,0,0-8,8v56H48V120l80-80,80,80Z" })
+});
+/**
+* A breadcrumb is a graphical control element frequently used as a navigational aid.
+*/
+var HvBreadCrumb = forwardRef(function HvBreadCrumb(props, ref) {
+	const { classes: classesProp, className, id, listRoute = [], home, maxVisible, url, onClick, component, dropDownMenuProps, separator, ...others } = useDefaultProps("HvBreadCrumb", props);
+	const { classes, cx } = useClasses(classesProp);
+	const maxVisibleElem = maxVisible && maxVisible < 2 ? 2 : maxVisible;
+	let listPath = listRoute.slice();
+	if (url != null) {
+		const baseUrl = url.match(/^.*\/\/[^/]+/) ?? "";
+		const pathNames = url.replace(/^.*\/\/[^/]+/, "").split("/").filter(Boolean);
+		listPath = pathNames.map((elem, index) => ({
+			label: decodeURI(elem),
+			path: `${baseUrl}/${pathNames.slice(0, index + 1).join("/")}`
+		}));
+	}
+	const breadcrumbPath = maxVisibleElem && listPath.length > maxVisibleElem ? pathWithSubMenu(id, listPath, maxVisibleElem, onClick, dropDownMenuProps) : listPath;
+	return /* @__PURE__ */ jsx("nav", {
+		ref,
+		id,
+		className: cx(classes.root, className),
+		...others,
+		children: /* @__PURE__ */ jsxs("ol", {
+			className: classes.orderedList,
+			children: [home && /* @__PURE__ */ jsx(HvPathElement, {
+				classes: {
+					centerContainer: classes.centerContainer,
+					separatorContainer: classes.separatorContainer
+				},
+				separator,
+				children: /* @__PURE__ */ jsx(HvIconButton, {
+					title: home.label,
+					component: component || "a",
+					href: home.path,
+					onClick: (event) => {
+						event.preventDefault();
+						onClick?.(event, home);
+					},
+					children: /* @__PURE__ */ jsx(HomeIcon, {})
+				})
+			}), listPath.map((elem, index) => {
+				const key = `key_${index}`;
+				const isLast = index === breadcrumbPath.length - 1;
+				return /* @__PURE__ */ jsx(HvPathElement, {
+					classes: {
+						centerContainer: classes.centerContainer,
+						separatorContainer: classes.separatorContainer
+					},
+					last: isLast,
+					separator,
+					children: isValidElement(elem) && elem || isLast && /* @__PURE__ */ jsx(HvTypography, {
+						className: classes.currentPage,
+						variant: "caption1",
+						children: removeExtension(elem.label)
+					}) || /* @__PURE__ */ jsx(HvBreadCrumbPage, {
+						elem,
+						classes: {
+							a: classes.a,
+							link: classes.link
+						},
+						component,
+						onClick
+					})
+				}, key);
+			})]
+		})
+	});
 });
-export {
-  HvBreadCrumb,
-  staticClasses as breadCrumbClasses
-};
+//#endregion
+export { HvBreadCrumb };

package/dist/BreadCrumb/BreadCrumb.styles.js

@@ -1,19 +1,22 @@
-import { createClasses } from "@hitachivantara/uikit-react-utils";
 import { theme } from "@hitachivantara/uikit-styles";
-const { staticClasses, useClasses } = createClasses("HvBreadCrumb", {
-  root: { display: "flex", alignItems: "center", zIndex: 0 },
-  link: {},
-  orderedList: {
-    display: "flex",
-    paddingLeft: 0,
-    marginLeft: `-${theme.space.xs}`
-  },
-  currentPage: { padding: `8px ${theme.space.xs}` },
-  centerContainer: {},
-  separatorContainer: {},
-  a: {}
+import { createClasses } from "@hitachivantara/uikit-react-utils";
+//#region src/BreadCrumb/BreadCrumb.styles.tsx
+var { staticClasses, useClasses } = createClasses("HvBreadCrumb", {
+	root: {
+		display: "flex",
+		alignItems: "center",
+		zIndex: 0
+	},
+	link: {},
+	orderedList: {
+		display: "flex",
+		paddingLeft: 0,
+		marginLeft: `-${theme.space.xs}`
+	},
+	currentPage: { padding: `8px ${theme.space.xs}` },
+	centerContainer: {},
+	separatorContainer: {},
+	a: {}
 });
-export {
-  staticClasses,
-  useClasses
-};
+//#endregion
+export { staticClasses, useClasses };