@hitachivantara/uikit-react-core 6.8.1 → 6.9.0

package/dist/List/List.styles.js

@@ -1,51 +1,46 @@
-import { createClasses } from "@hitachivantara/uikit-react-utils";
 import { theme } from "@hitachivantara/uikit-styles";
-const { staticClasses, useClasses } = createClasses("HvList", {
-  root: {},
-  virtualizedRoot: { marginBottom: 5 },
-  selectorRoot: { width: "100%", zIndex: 0 },
-  selectorContainer: {
-    "&:hover": {
-      backgroundColor: "transparent"
-    },
-    "&:focus-within": {
-      backgroundColor: "transparent",
-      outline: "none",
-      boxShadow: "none"
-    }
-  },
-  box: { width: "32px", height: "32px", marginLeft: "auto" },
-  truncate: {
-    display: "inline-block",
-    overflow: "hidden",
-    textOverflow: "ellipsis",
-    whiteSpace: "nowrap"
-  },
-  item: {},
-  itemSelector: {
-    "&:not(:hover):not(.HvIsFocused):not(:focus-within)": {
-      backgroundColor: theme.colors.bgHover
-    }
-  },
-  link: {
-    ...theme.typography.body,
-    textDecoration: "none",
-    "&:focus": {
-      boxShadow: "unset !important"
-    }
-  },
-  selectAllSelector: {
-    width: "100%",
-    margin: "0 0 2px 0",
-    position: "relative",
-    zIndex: 0,
-    // prevent the focus ring to be hidden by sibling hover background
-    "&:focus-within": {
-      zIndex: 1
-    }
-  }
+import { createClasses } from "@hitachivantara/uikit-react-utils";
+//#region src/List/List.styles.tsx
+var { staticClasses, useClasses } = createClasses("HvList", {
+	root: {},
+	virtualizedRoot: { marginBottom: 5 },
+	selectorRoot: {
+		width: "100%",
+		zIndex: 0
+	},
+	selectorContainer: {
+		"&:hover": { backgroundColor: "transparent" },
+		"&:focus-within": {
+			backgroundColor: "transparent",
+			outline: "none",
+			boxShadow: "none"
+		}
+	},
+	box: {
+		width: "32px",
+		height: "32px",
+		marginLeft: "auto"
+	},
+	truncate: {
+		display: "inline-block",
+		overflow: "hidden",
+		textOverflow: "ellipsis",
+		whiteSpace: "nowrap"
+	},
+	item: {},
+	itemSelector: { "&:not(:hover):not(.HvIsFocused):not(:focus-within)": { backgroundColor: theme.colors.bgHover } },
+	link: {
+		...theme.typography.body,
+		textDecoration: "none",
+		"&:focus": { boxShadow: "unset !important" }
+	},
+	selectAllSelector: {
+		width: "100%",
+		margin: "0 0 2px 0",
+		position: "relative",
+		zIndex: 0,
+		"&:focus-within": { zIndex: 1 }
+	}
 });
-export {
-  staticClasses,
-  useClasses
-};
+//#endregion
+export { staticClasses, useClasses };

package/dist/List/useSelectableList.js

@@ -1,9 +1,12 @@
-import { useState, useMemo } from "react";
-const useSelectableList = (defaultList = []) => {
-  const [list, setList] = useState(defaultList);
-  const selection = useMemo(() => list.filter((elem) => elem.selected), [list]);
-  return [list, setList, selection];
-};
-export {
-  useSelectableList
+import { useMemo, useState } from "react";
+//#region src/List/useSelectableList.ts
+var useSelectableList = (defaultList = []) => {
+	const [list, setList] = useState(defaultList);
+	return [
+		list,
+		setList,
+		useMemo(() => list.filter((elem) => elem.selected), [list])
+	];
 };
+//#endregion
+export { useSelectableList };

package/dist/List/utils.js

@@ -1,35 +1,26 @@
-const isItemSelected = (item, newItem) => {
-  const selectionKey = item?.id ? "id" : "label";
-  const selectionElement = item?.[selectionKey];
-  return newItem[selectionKey] === selectionElement;
+//#region src/List/utils.ts
+var isItemSelected = (item, newItem) => {
+	const selectionKey = item?.id ? "id" : "label";
+	const selectionElement = item?.[selectionKey];
+	return newItem[selectionKey] === selectionElement;
 };
-const parseList = (item, props, selectAll, list = []) => {
-  const { multiSelect, selectable, singleSelectionToggle } = props || {};
-  let anySelected = false;
-  const newList = list.map((elem) => {
-    const newItem = { ...elem };
-    if (!multiSelect) {
-      newItem.selected = false;
-    }
-    const selectItem = item ? isItemSelected(item, newItem) : elem?.selected;
-    if (selectItem && selectable) {
-      let selectionState;
-      if (multiSelect) {
-        selectionState = item ? !elem?.selected : true;
-      } else {
-        selectionState = !anySelected && (item && singleSelectionToggle ? !elem?.selected : true);
-      }
-      newItem.selected = selectionState;
-      anySelected = true;
-    }
-    if (typeof selectAll === "boolean" && !elem?.disabled)
-      newItem.selected = selectAll;
-    if (!newItem?.selected) newItem.selected = false;
-    return newItem;
-  });
-  return newList;
-};
-export {
-  isItemSelected,
-  parseList
+var parseList = (item, props, selectAll, list = []) => {
+	const { multiSelect, selectable, singleSelectionToggle } = props || {};
+	let anySelected = false;
+	return list.map((elem) => {
+		const newItem = { ...elem };
+		if (!multiSelect) newItem.selected = false;
+		if ((item ? isItemSelected(item, newItem) : elem?.selected) && selectable) {
+			let selectionState;
+			if (multiSelect) selectionState = item ? !elem?.selected : true;
+			else selectionState = !anySelected && (item && singleSelectionToggle ? !elem?.selected : true);
+			newItem.selected = selectionState;
+			anySelected = true;
+		}
+		if (typeof selectAll === "boolean" && !elem?.disabled) newItem.selected = selectAll;
+		if (!newItem?.selected) newItem.selected = false;
+		return newItem;
+	});
 };
+//#endregion
+export { parseList };

package/dist/ListContainer/ListContainer.js

@@ -1,69 +1,56 @@
-import { jsx } from "react/jsx-runtime";
-import { forwardRef, useRef, useContext, useMemo, Children, isValidElement, cloneElement } from "react";
-import { useDefaultProps } from "@hitachivantara/uikit-react-utils";
 import { useForkRef } from "../hooks/useForkRef.js";
 import { useClasses } from "./ListContainer.styles.js";
-import { staticClasses } from "./ListContainer.styles.js";
 import ListContext from "./ListContext/ListContext.js";
-const HvListContainer = forwardRef(function HvListContainer2(props, ref) {
-  const {
-    id,
-    classes: classesProp,
-    className,
-    interactive = false,
-    selectable,
-    condensed,
-    disableGutters,
-    children: childrenProp,
-    ...others
-  } = useDefaultProps("HvListContainer", props);
-  const { classes, cx } = useClasses(classesProp);
-  const containerRef = useRef(null);
-  const { topContainerRef, nesting = -1 } = useContext(ListContext);
-  const listContext = useMemo(
-    () => ({
-      topContainerRef: topContainerRef || containerRef,
-      condensed,
-      selectable,
-      disableGutters,
-      interactive,
-      nesting: nesting + 1
-    }),
-    [
-      condensed,
-      selectable,
-      disableGutters,
-      interactive,
-      nesting,
-      topContainerRef
-    ]
-  );
-  const children = useMemo(() => {
-    if (!interactive) return childrenProp;
-    const anySelected = Children.toArray(childrenProp).some(
-      (child) => isValidElement(child) && child.props.selected && !child.props.disabled
-    );
-    return Children.map(childrenProp, (child, i) => {
-      const tabIndex = child.props.tabIndex || !anySelected && i === 0 || child.props.selected && !child.props.disabled ? 0 : -1;
-      return cloneElement(child, {
-        tabIndex,
-        interactive
-      });
-    });
-  }, [childrenProp, interactive]);
-  const handleRef = useForkRef(ref, containerRef);
-  return /* @__PURE__ */ jsx(ListContext.Provider, { value: listContext, children: /* @__PURE__ */ jsx(
-    "ul",
-    {
-      ref: handleRef,
-      id,
-      className: cx(classes.root, className),
-      ...others,
-      children
-    }
-  ) });
+import { useDefaultProps } from "@hitachivantara/uikit-react-utils";
+import { Children, cloneElement, forwardRef, isValidElement, useContext, useMemo, useRef } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/ListContainer/ListContainer.tsx
+/**
+* A **list** is any enumeration of a set of items.
+* The simple list is for continuous **vertical indexes of text or icons+text**. The content of these lists must be simple: ideally simples fields.
+* This pattern is ideal for **selections**. It should be used inside an `HvPanel`.
+*/
+var HvListContainer = forwardRef(function HvListContainer(props, ref) {
+	const { id, classes: classesProp, className, interactive = false, selectable, condensed, disableGutters, children: childrenProp, ...others } = useDefaultProps("HvListContainer", props);
+	const { classes, cx } = useClasses(classesProp);
+	const containerRef = useRef(null);
+	const { topContainerRef, nesting = -1 } = useContext(ListContext);
+	const listContext = useMemo(() => ({
+		topContainerRef: topContainerRef || containerRef,
+		condensed,
+		selectable,
+		disableGutters,
+		interactive,
+		nesting: nesting + 1
+	}), [
+		condensed,
+		selectable,
+		disableGutters,
+		interactive,
+		nesting,
+		topContainerRef
+	]);
+	const children = useMemo(() => {
+		if (!interactive) return childrenProp;
+		const anySelected = Children.toArray(childrenProp).some((child) => isValidElement(child) && child.props.selected && !child.props.disabled);
+		return Children.map(childrenProp, (child, i) => {
+			return cloneElement(child, {
+				tabIndex: child.props.tabIndex || !anySelected && i === 0 || child.props.selected && !child.props.disabled ? 0 : -1,
+				interactive
+			});
+		});
+	}, [childrenProp, interactive]);
+	const handleRef = useForkRef(ref, containerRef);
+	return /* @__PURE__ */ jsx(ListContext.Provider, {
+		value: listContext,
+		children: /* @__PURE__ */ jsx("ul", {
+			ref: handleRef,
+			id,
+			className: cx(classes.root, className),
+			...others,
+			children
+		})
+	});
 });
-export {
-  HvListContainer,
-  staticClasses as listContainerClasses
-};
+//#endregion
+export { HvListContainer };

package/dist/ListContainer/ListContainer.styles.js

@@ -1,11 +1,8 @@
 import { createClasses } from "@hitachivantara/uikit-react-utils";
-const { staticClasses, useClasses } = createClasses("HvListContainer", {
-  root: {
-    overflow: "clip",
-    overflowClipMargin: 4
-  }
-});
-export {
-  staticClasses,
-  useClasses
-};
+//#region src/ListContainer/ListContainer.styles.tsx
+var { staticClasses, useClasses } = createClasses("HvListContainer", { root: {
+	overflow: "clip",
+	overflowClipMargin: 4
+} });
+//#endregion
+export { staticClasses, useClasses };

package/dist/ListContainer/ListContext/ListContext.js

@@ -1,6 +1,6 @@
 import { createContext } from "react";
-const ListContext = createContext({});
+//#region src/ListContainer/ListContext/ListContext.ts
+var ListContext = createContext({});
 ListContext.displayName = "ListContext";
-export {
-  ListContext as default
-};
+//#endregion
+export { ListContext as default };

package/dist/ListContainer/ListItem/ListItem.js

@@ -1,120 +1,82 @@
-import { jsxs, jsx, Fragment } from "react/jsx-runtime";
-import { forwardRef, useContext, useCallback, useMemo, isValidElement, cloneElement } from "react";
-import { useDefaultProps } from "@hitachivantara/uikit-react-utils";
-import { useClasses } from "./ListItem.styles.js";
-import { staticClasses } from "./ListItem.styles.js";
 import ListContext from "../ListContext/ListContext.js";
 import { HvFocus } from "../../Focus/Focus.js";
-const HvListItem = forwardRef(function HvListItem2(props, ref) {
-  const {
-    classes: classesProp,
-    className,
-    role,
-    value,
-    selected,
-    disabled,
-    selectable: selectableProp,
-    interactive: interactiveProp,
-    condensed: condensedProp,
-    disableGutters: disableGuttersProp,
-    separator,
-    startAdornment,
-    endAdornment,
-    onClick,
-    children,
-    tabIndex,
-    ...others
-  } = useDefaultProps("HvListItem", props);
-  const { classes, cx } = useClasses(classesProp);
-  const {
-    topContainerRef,
-    condensed: condensedContext,
-    disableGutters: disableGuttersContext,
-    interactive: interactiveContext,
-    selectable: selectableContext
-  } = useContext(ListContext);
-  const condensed = condensedProp ?? condensedContext;
-  const disableGutters = disableGuttersProp ?? disableGuttersContext;
-  const interactive = interactiveProp ?? interactiveContext;
-  const selectable = selectableProp ?? selectableContext;
-  const handleClick = useCallback(
-    (evt) => {
-      if (disabled) return;
-      onClick?.(evt);
-    },
-    [disabled, onClick]
-  );
-  const clonedStartAdornment = useMemo(() => {
-    if (!isValidElement(startAdornment)) return startAdornment;
-    return cloneElement(startAdornment, {
-      className: cx(classes.startAdornment, startAdornment.props.className)
-    });
-  }, [cx, classes?.startAdornment, startAdornment]);
-  const clonedEndAdornment = useMemo(() => {
-    if (!isValidElement(endAdornment)) return endAdornment;
-    return cloneElement(endAdornment, {
-      className: cx(classes.endAdornment, endAdornment.props.className)
-    });
-  }, [cx, classes?.endAdornment, endAdornment]);
-  const roleOptionAriaProps = role === "option" || role === "menuitem" ? {
-    "aria-disabled": disabled || void 0,
-    "aria-selected": selected
-  } : {};
-  const listItem = (
-    // For later: this should only have an onClick event if interactive and has the appropriate role.
-    // eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions, jsx-a11y/click-events-have-key-events
-    /* @__PURE__ */ jsxs(
-      "li",
-      {
-        ref,
-        role,
-        value,
-        className: cx(
-          classes.root,
-          {
-            [classes.gutters]: !disableGutters,
-            [classes.condensed]: condensed,
-            [classes.interactive]: interactive || selectable,
-            [classes.selected]: selected || props["aria-selected"],
-            [classes.disabled]: disabled || props["aria-disabled"]
-          },
-          className
-        ),
-        tabIndex: interactive ? void 0 : tabIndex,
-        onClick: handleClick,
-        ...roleOptionAriaProps,
-        ...others,
-        children: [
-          clonedStartAdornment,
-          children,
-          clonedEndAdornment
-        ]
-      }
-    )
-  );
-  const item = interactive ? /* @__PURE__ */ jsx(
-    HvFocus,
-    {
-      rootRef: topContainerRef,
-      selected,
-      disabledClass: disabled || void 0,
-      strategy: role === "option" ? "listbox" : "menu",
-      classes: { focus: classes.focus },
-      configuration: {
-        tabIndex
-      },
-      children: listItem
-    }
-  ) : listItem;
-  if (separator) {
-    return /* @__PURE__ */ jsxs(Fragment, { children: [
-      item,
-      /* @__PURE__ */ jsx("li", { role: "separator", className: classes.separator, "aria-hidden": "true" })
-    ] });
-  }
-  return item;
+import { useClasses } from "./ListItem.styles.js";
+import { useDefaultProps } from "@hitachivantara/uikit-react-utils";
+import { cloneElement, forwardRef, isValidElement, useCallback, useContext, useMemo } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+//#region src/ListContainer/ListItem/ListItem.tsx
+/**
+* Implements the listitem pattern, akin to the `<li>` element.
+* Should be composed within a `<HvListContainer>` component.
+*/
+var HvListItem = forwardRef(function HvListItem(props, ref) {
+	const { classes: classesProp, className, role, value, selected, disabled, selectable: selectableProp, interactive: interactiveProp, condensed: condensedProp, disableGutters: disableGuttersProp, separator, startAdornment, endAdornment, onClick, children, tabIndex, ...others } = useDefaultProps("HvListItem", props);
+	const { classes, cx } = useClasses(classesProp);
+	const { topContainerRef, condensed: condensedContext, disableGutters: disableGuttersContext, interactive: interactiveContext, selectable: selectableContext } = useContext(ListContext);
+	const condensed = condensedProp ?? condensedContext;
+	const disableGutters = disableGuttersProp ?? disableGuttersContext;
+	const interactive = interactiveProp ?? interactiveContext;
+	const selectable = selectableProp ?? selectableContext;
+	const handleClick = useCallback((evt) => {
+		if (disabled) return;
+		onClick?.(evt);
+	}, [disabled, onClick]);
+	const clonedStartAdornment = useMemo(() => {
+		if (!isValidElement(startAdornment)) return startAdornment;
+		return cloneElement(startAdornment, { className: cx(classes.startAdornment, startAdornment.props.className) });
+	}, [
+		cx,
+		classes?.startAdornment,
+		startAdornment
+	]);
+	const clonedEndAdornment = useMemo(() => {
+		if (!isValidElement(endAdornment)) return endAdornment;
+		return cloneElement(endAdornment, { className: cx(classes.endAdornment, endAdornment.props.className) });
+	}, [
+		cx,
+		classes?.endAdornment,
+		endAdornment
+	]);
+	const roleOptionAriaProps = role === "option" || role === "menuitem" ? {
+		"aria-disabled": disabled || void 0,
+		"aria-selected": selected
+	} : {};
+	const listItem = /* @__PURE__ */ jsxs("li", {
+		ref,
+		role,
+		value,
+		className: cx(classes.root, {
+			[classes.gutters]: !disableGutters,
+			[classes.condensed]: condensed,
+			[classes.interactive]: interactive || selectable,
+			[classes.selected]: selected || props["aria-selected"],
+			[classes.disabled]: disabled || props["aria-disabled"]
+		}, className),
+		tabIndex: interactive ? void 0 : tabIndex,
+		onClick: handleClick,
+		...roleOptionAriaProps,
+		...others,
+		children: [
+			clonedStartAdornment,
+			children,
+			clonedEndAdornment
+		]
+	});
+	const item = interactive ? /* @__PURE__ */ jsx(HvFocus, {
+		rootRef: topContainerRef,
+		selected,
+		disabledClass: disabled || void 0,
+		strategy: role === "option" ? "listbox" : "menu",
+		classes: { focus: classes.focus },
+		configuration: { tabIndex },
+		children: listItem
+	}) : listItem;
+	if (separator) return /* @__PURE__ */ jsxs(Fragment$1, { children: [item, /* @__PURE__ */ jsx("li", {
+		role: "separator",
+		className: classes.separator,
+		"aria-hidden": "true"
+	})] });
+	return item;
 });
-export {
-  HvListItem,
-  staticClasses as listItemClasses
-};
+//#endregion
+export { HvListItem };