@ultraviolet/ui 3.8.2 → 3.10.0

package/dist/components/List/Row.js

@@ -1,204 +1,159 @@
-"use client";
-import { jsxs, Fragment as Fragment$1, jsx } from "react/jsx-runtime";
-import { ArrowDownIcon } from "@ultraviolet/icons/ArrowDownIcon";
-import { ArrowUpIcon } from "@ultraviolet/icons/ArrowUpIcon";
-import { theme } from "@ultraviolet/themes";
-import { cn } from "@ultraviolet/utils";
-import { assignInlineVars } from "@vanilla-extract/dynamic";
-import { forwardRef, useId, useRef, useEffect, useCallback, Children, isValidElement, Fragment } from "react";
-import { Button } from "../Button/index.js";
-import { Checkbox } from "../Checkbox/index.js";
-import { Tooltip } from "../Tooltip/index.js";
-import { Cell } from "./Cell.js";
+'use client';
+import { __name } from "../../_virtual/_rolldown/runtime.js";
 import { ColumnProvider } from "./ColumnProvider.js";
 import { useListContext } from "./ListContext.js";
-import { listNoPaddingCell, listCheckboxContainer, listCheckboxInRange, listExpandableButton, listRow, listExpandableWrapper, listExpandableCell } from "./styles.css.js";
+import { listCheckboxContainer, listCheckboxInRange, listExpandableButton, listExpandableCell, listExpandableWrapper, listNoPaddingCell, listRow } from "./styles.css.js";
 import { paddingExpandableCell } from "./variables.css.js";
-const Row = forwardRef(
-  ({
-    children,
-    id,
-    expandable,
-    disabled,
-    selectDisabled,
-    sentiment = "neutral",
-    highlightAnimation,
-    expanded,
-    className,
-    expandablePadding,
-    "data-testid": dataTestid,
-    style,
-    "data-dragging": dataDragging,
-    onMouseEnter,
-    onMouseLeave,
-    onClick
-  }, forwardedRef) => {
-    const {
-      selectable,
-      registerExpandableRow,
-      expandedRowIds,
-      expandRow,
-      collapseRow,
-      registerSelectableRow,
-      selectedRowIds,
-      expandButton,
-      columns,
-      inRange,
-      refList,
-      setRefList,
-      handleOnChange
-    } = useListContext();
-    const expandedRowId = useId();
-    const checkboxRef = useRef(null);
-    const isSelectDisabled = disabled || selectDisabled !== void 0 && selectDisabled !== false;
-    const hasExpandable = !!expandable;
-    useEffect(() => {
-      if (hasExpandable) {
-        const unregisterCallback = registerExpandableRow(id, expanded);
-        return unregisterCallback;
-      }
-      return void 0;
-    }, [id, hasExpandable, registerExpandableRow, expanded, expandRow]);
-    useEffect(() => {
-      if (!isSelectDisabled) {
-        const unregisterCallback = registerSelectableRow(id);
-        return unregisterCallback;
-      }
-      return void 0;
-    }, [id, registerSelectableRow, isSelectDisabled]);
-    const toggleRowExpand = useCallback(() => {
-      if (expandedRowIds[id]) {
-        collapseRow(id);
-      } else {
-        expandRow(id);
-      }
-    }, [collapseRow, expandRow, expandedRowIds, id]);
-    const canClickRowToExpand = !disabled && !!expandable && !expandButton;
-    useEffect(() => {
-      if (checkboxRef.current !== null && !refList.includes(checkboxRef)) {
-        setRefList([...refList, checkboxRef]);
-      }
-    }, [refList, setRefList]);
-    const childrenArrayNoFragment = Children.toArray(children).flatMap(
-      (node) => {
-        if (isValidElement(node) && node.type === Fragment) {
-          return node.props.children;
-        }
-        return node;
-      }
-    );
-    const validChildrenArray = Children.toArray(childrenArrayNoFragment).filter(
-      (child) => isValidElement(child)
-    );
-    const totalColumns = columns.length + (selectable ? 1 : 0) + (expandButton ? 1 : 0);
-    return /* @__PURE__ */ jsxs(Fragment$1, { children: [
-      /* @__PURE__ */ jsxs(
-        "tr",
-        {
-          "aria-controls": expandable && expandedRowIds[id] ? expandedRowId : void 0,
-          "aria-disabled": disabled,
-          "aria-expanded": expandable ? expandedRowIds[id] : void 0,
-          className: cn(className, listRow({ highlightAnimation, sentiment })),
-          "data-dragging": dataDragging,
-          "data-highlight": selectable && !!selectedRowIds[id],
-          "data-testid": dataTestid,
-          onClick: () => {
-            onClick?.(id);
-            if (canClickRowToExpand) {
-              toggleRowExpand();
-            }
-          },
-          onKeyDown: canClickRowToExpand ? (event) => {
-            if (event.key === " ") {
-              toggleRowExpand();
-              event.preventDefault();
-            }
-          } : void 0,
-          onMouseEnter,
-          onMouseLeave,
-          ref: forwardedRef,
-          role: canClickRowToExpand ? "button row" : void 0,
-          style,
-          tabIndex: canClickRowToExpand ? 0 : -1,
-          children: [
-            selectable ? /* @__PURE__ */ jsx(ColumnProvider, { width: theme.sizing[300], children: /* @__PURE__ */ jsx(Cell, { className: listNoPaddingCell, children: /* @__PURE__ */ jsx("div", { className: listCheckboxContainer, children: /* @__PURE__ */ jsx(
-              Tooltip,
-              {
-                text: typeof selectDisabled === "string" ? selectDisabled : void 0,
-                children: /* @__PURE__ */ jsx(
-                  Checkbox,
-                  {
-                    "aria-label": "select",
-                    checked: selectedRowIds[id],
-                    className: inRange?.includes(id) ? listCheckboxInRange : "",
-                    disabled: isSelectDisabled,
-                    name: "list-select-checkbox",
-                    onChange: () => handleOnChange(id, selectedRowIds[id]),
-                    ref: checkboxRef,
-                    value: id
-                  }
-                )
-              }
-            ) }) }) }) : null,
-            expandButton ? /* @__PURE__ */ jsx(ColumnProvider, { width: theme.sizing[400], children: /* @__PURE__ */ jsx(Cell, { className: listNoPaddingCell, children: /* @__PURE__ */ jsx(
-              Button,
-              {
-                "aria-label": "expand",
-                className: listExpandableButton,
-                "data-testid": "list-expand-button",
-                disabled: disabled || !expandable,
-                onClick: () => toggleRowExpand(),
-                sentiment,
-                size: "small",
-                variant: "ghost",
-                children: expandedRowIds[id] ? /* @__PURE__ */ jsx(ArrowUpIcon, {}) : /* @__PURE__ */ jsx(ArrowDownIcon, {})
-              }
-            ) }) }) : null,
-            validChildrenArray.map((child, index) => {
-              const column = columns[index];
-              return /* @__PURE__ */ jsx(
-                ColumnProvider,
-                {
-                  maxWidth: column?.maxWidth,
-                  minWidth: column?.minWidth,
-                  width: column?.width,
-                  children: child
-                },
-                `column-provider-${child.key}`
-              );
-            })
-          ]
-        }
-      ),
-      expandable && expandedRowIds[id] ? /* @__PURE__ */ jsx(
-        "tr",
-        {
-          className: listExpandableWrapper,
-          "data-expandable-content": true,
-          "data-highlight": selectable && !!selectedRowIds[id],
-          id: expandedRowId,
-          onClick: canClickRowToExpand ? (e) => {
-            e.stopPropagation();
-          } : void 0,
-          onKeyDown: canClickRowToExpand ? (e) => {
-            e.stopPropagation();
-          } : void 0,
-          children: /* @__PURE__ */ jsx(
-            Cell,
-            {
-              className: listExpandableCell,
-              colSpan: totalColumns,
-              style: assignInlineVars({
-                [paddingExpandableCell]: theme.space[expandablePadding ?? "2"]
-              }),
-              children: expandable
-            }
-          )
-        }
-      ) : null
-    ] });
-  }
-);
-export {
-  Row
-};
+import { Cell } from "./Cell.js";
+import { Tooltip } from "../Tooltip/index.js";
+import { Checkbox } from "../Checkbox/index.js";
+import { Button } from "../Button/index.js";
+import { cn } from "@ultraviolet/utils";
+import { Children, Fragment, forwardRef, isValidElement, useCallback, useEffect, useId, useRef } from "react";
+import { assignInlineVars } from "@vanilla-extract/dynamic";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { theme } from "@ultraviolet/themes";
+import { ArrowDownIcon } from "@ultraviolet/icons/ArrowDownIcon";
+import { ArrowUpIcon } from "@ultraviolet/icons/ArrowUpIcon";
+
+//#region src/components/List/Row.tsx
+const Row = forwardRef(({ children, id, expandable, disabled, selectDisabled, sentiment = "neutral", highlightAnimation, expanded, className, expandablePadding, "data-testid": dataTestid, style, "data-dragging": dataDragging, onMouseEnter, onMouseLeave, onClick }, forwardedRef) => {
+	const { selectable, registerExpandableRow, expandedRowIds, expandRow, collapseRow, registerSelectableRow, selectedRowIds, expandButton, columns, inRange, refList, setRefList, handleOnChange } = useListContext();
+	const expandedRowId = useId();
+	const checkboxRef = useRef(null);
+	const isSelectDisabled = disabled || selectDisabled !== void 0 && selectDisabled !== false;
+	const hasExpandable = !!expandable;
+	useEffect(() => {
+		if (hasExpandable) return registerExpandableRow(id, expanded);
+	}, [
+		id,
+		hasExpandable,
+		registerExpandableRow,
+		expanded,
+		expandRow
+	]);
+	useEffect(() => {
+		if (!isSelectDisabled) return registerSelectableRow(id);
+	}, [
+		id,
+		registerSelectableRow,
+		isSelectDisabled
+	]);
+	const toggleRowExpand = useCallback(() => {
+		if (expandedRowIds[id]) collapseRow(id);
+		else expandRow(id);
+	}, [
+		collapseRow,
+		expandRow,
+		expandedRowIds,
+		id
+	]);
+	const canClickRowToExpand = !disabled && !!expandable && !expandButton;
+	useEffect(() => {
+		if (checkboxRef.current !== null && !refList.includes(checkboxRef)) setRefList([...refList, checkboxRef]);
+	}, [refList, setRefList]);
+	const childrenArrayNoFragment = Children.toArray(children).flatMap((node) => {
+		if (isValidElement(node) && node.type === Fragment) return node.props.children;
+		return node;
+	});
+	const validChildrenArray = Children.toArray(childrenArrayNoFragment).filter((child) => isValidElement(child));
+	const totalColumns = columns.length + (selectable ? 1 : 0) + (expandButton ? 1 : 0);
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsxs("tr", {
+		"aria-controls": expandable && expandedRowIds[id] ? expandedRowId : void 0,
+		"aria-disabled": disabled,
+		"aria-expanded": expandable ? expandedRowIds[id] : void 0,
+		className: cn(className, listRow({
+			highlightAnimation,
+			sentiment
+		})),
+		"data-dragging": dataDragging,
+		"data-highlight": selectable && !!selectedRowIds[id],
+		"data-testid": dataTestid,
+		onClick: () => {
+			onClick === null || onClick === void 0 || onClick(id);
+			if (canClickRowToExpand) toggleRowExpand();
+		},
+		onKeyDown: canClickRowToExpand ? (event) => {
+			if (event.key === " ") {
+				toggleRowExpand();
+				event.preventDefault();
+			}
+		} : void 0,
+		onMouseEnter,
+		onMouseLeave,
+		ref: forwardedRef,
+		role: canClickRowToExpand ? "button row" : void 0,
+		style,
+		tabIndex: canClickRowToExpand ? 0 : -1,
+		children: [
+			selectable ? /* @__PURE__ */ jsx(ColumnProvider, {
+				width: theme.sizing[300],
+				children: /* @__PURE__ */ jsx(Cell, {
+					className: listNoPaddingCell,
+					children: /* @__PURE__ */ jsx("div", {
+						className: listCheckboxContainer,
+						children: /* @__PURE__ */ jsx(Tooltip, {
+							text: typeof selectDisabled === "string" ? selectDisabled : void 0,
+							children: /* @__PURE__ */ jsx(Checkbox, {
+								"aria-label": "select",
+								checked: selectedRowIds[id],
+								className: (inRange === null || inRange === void 0 ? void 0 : inRange.includes(id)) ? listCheckboxInRange : "",
+								disabled: isSelectDisabled,
+								name: "list-select-checkbox",
+								onChange: () => handleOnChange(id, selectedRowIds[id]),
+								ref: checkboxRef,
+								value: id
+							})
+						})
+					})
+				})
+			}) : null,
+			expandButton ? /* @__PURE__ */ jsx(ColumnProvider, {
+				width: theme.sizing[400],
+				children: /* @__PURE__ */ jsx(Cell, {
+					className: listNoPaddingCell,
+					children: /* @__PURE__ */ jsx(Button, {
+						"aria-label": "expand",
+						className: listExpandableButton,
+						"data-testid": "list-expand-button",
+						disabled: disabled || !expandable,
+						onClick: () => toggleRowExpand(),
+						sentiment,
+						size: "small",
+						variant: "ghost",
+						children: expandedRowIds[id] ? /* @__PURE__ */ jsx(ArrowUpIcon, {}) : /* @__PURE__ */ jsx(ArrowDownIcon, {})
+					})
+				})
+			}) : null,
+			validChildrenArray.map((child, index) => {
+				const column = columns[index];
+				return /* @__PURE__ */ jsx(ColumnProvider, {
+					maxWidth: column === null || column === void 0 ? void 0 : column.maxWidth,
+					minWidth: column === null || column === void 0 ? void 0 : column.minWidth,
+					width: column === null || column === void 0 ? void 0 : column.width,
+					children: child
+				}, `column-provider-${child.key}`);
+			})
+		]
+	}), expandable && expandedRowIds[id] ? /* @__PURE__ */ jsx("tr", {
+		className: listExpandableWrapper,
+		"data-expandable-content": true,
+		"data-highlight": selectable && !!selectedRowIds[id],
+		id: expandedRowId,
+		onClick: canClickRowToExpand ? (e) => {
+			e.stopPropagation();
+		} : void 0,
+		onKeyDown: canClickRowToExpand ? (e) => {
+			e.stopPropagation();
+		} : void 0,
+		children: /* @__PURE__ */ jsx(Cell, {
+			className: listExpandableCell,
+			colSpan: totalColumns,
+			style: assignInlineVars({ [paddingExpandableCell]: theme.space[expandablePadding !== null && expandablePadding !== void 0 ? expandablePadding : "2"] }),
+			children: expandable
+		})
+	}) : null] });
+});
+
+//#endregion
+export { Row };

package/dist/components/List/SelectBar.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SelectBar.d.ts","sourceRoot":"","sources":["../../../src/components/List/SelectBar.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAMtC,KAAK,cAAc,CAAC,CAAC,IAAI;IACvB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,QAAQ,EAAE,CAAC,CAAC,EAAE;QAAE,aAAa,EAAE,CAAC,EAAE,CAAC;QAAC,WAAW,EAAE,MAAM,IAAI,CAAA;KAAE,KAAK,SAAS,CAAA;IAC3E,IAAI,EAAE,CAAC,EAAE,CAAA;IACT;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC,CAAA;CACf,CAAA;AAED,eAAO,MAAM,SAAS,GAAI,CAAC,EAAG,uCAK3B,cAAc,CAAC,CAAC,CAAC,mDA4BnB,CAAA"}
+{"version":3,"file":"SelectBar.d.ts","sourceRoot":"","sources":["../../../src/components/List/SelectBar.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAMtC,KAAK,cAAc,CAAC,CAAC,IAAI;IACvB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,QAAQ,EAAE,CAAC,CAAC,EAAE;QAAE,aAAa,EAAE,CAAC,EAAE,CAAC;QAAC,WAAW,EAAE,MAAM,IAAI,CAAA;KAAE,KAAK,SAAS,CAAA;IAC3E,IAAI,EAAE,CAAC,EAAE,CAAA;IACT;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC,CAAA;CACf,CAAA;AAED,eAAO,MAAM,SAAS,GAAI,CAAC,6GAiC1B,CAAA"}

package/dist/components/List/SelectBar.js

@@ -1,38 +1,35 @@
-"use client";
-import { jsx } from "react/jsx-runtime";
-import { useMemo } from "react";
-import { ActionBar } from "../ActionBar/index.js";
-import { Stack } from "../Stack/index.js";
+'use client';
+import { __name } from "../../_virtual/_rolldown/runtime.js";
 import { useListContext } from "./ListContext.js";
-const SelectBar = ({
-  children,
-  data,
-  idKey,
-  className
-}) => {
-  const { selectedRowIds, unselectAll } = useListContext();
-  const selectedItems = useMemo(
-    () => data.filter((item) => selectedRowIds[item[idKey]]),
-    [data, idKey, selectedRowIds]
-  );
-  if (selectedItems.length === 0) {
-    return null;
-  }
-  return /* @__PURE__ */ jsx(ActionBar, { className, children: /* @__PURE__ */ jsx(
-    Stack,
-    {
-      alignItems: "center",
-      direction: "row",
-      flex: "1 1 auto",
-      justifyContent: "space-between",
-      width: "100%",
-      children: children({
-        selectedItems,
-        unselectAll
-      })
-    }
-  ) });
-};
-export {
-  SelectBar
+import { Stack } from "../Stack/index.js";
+import { ActionBar } from "../ActionBar/index.js";
+import { useMemo } from "react";
+import { jsx } from "react/jsx-runtime";
+
+//#region src/components/List/SelectBar.tsx
+const SelectBar = ({ children, data, idKey, className }) => {
+	const { selectedRowIds, unselectAll } = useListContext();
+	const selectedItems = useMemo(() => data.filter((item) => selectedRowIds[item[idKey]]), [
+		data,
+		idKey,
+		selectedRowIds
+	]);
+	if (selectedItems.length === 0) return null;
+	return /* @__PURE__ */ jsx(ActionBar, {
+		className,
+		children: /* @__PURE__ */ jsx(Stack, {
+			alignItems: "center",
+			direction: "row",
+			flex: "1 1 auto",
+			justifyContent: "space-between",
+			width: "100%",
+			children: children({
+				selectedItems,
+				unselectAll
+			})
+		})
+	});
 };
+
+//#endregion
+export { SelectBar };

package/dist/components/List/SkeletonRows.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SkeletonRows.d.ts","sourceRoot":"","sources":["../../../src/components/List/SkeletonRows.tsx"],"names":[],"mappings":"AASA,KAAK,wBAAwB,GAAG;IAC9B,UAAU,EAAE,OAAO,CAAA;IACnB,IAAI,EAAE,MAAM,CAAA;IACZ,IAAI,EAAE,MAAM,CAAA;CACb,CAAA;AAED,eAAO,MAAM,YAAY,GAAI,6BAI1B,wBAAwB,4CA8B1B,CAAA"}
+{"version":3,"file":"SkeletonRows.d.ts","sourceRoot":"","sources":["../../../src/components/List/SkeletonRows.tsx"],"names":[],"mappings":"AASA,KAAK,wBAAwB,GAAG;IAC9B,UAAU,EAAE,OAAO,CAAA;IACnB,IAAI,EAAE,MAAM,CAAA;IACZ,IAAI,EAAE,MAAM,CAAA;CACb,CAAA;AAED,eAAO,MAAM,YAAY,oGAkCxB,CAAA"}

package/dist/components/List/SkeletonRows.js

@@ -1,41 +1,32 @@
-"use client";
-import { jsx, Fragment, jsxs } from "react/jsx-runtime";
-import { cn } from "@ultraviolet/utils";
-import { Skeleton } from "../Skeleton/index.js";
-import { Cell } from "./Cell.js";
+'use client';
+import { __name } from "../../_virtual/_rolldown/runtime.js";
 import { ColumnProvider } from "./ColumnProvider.js";
 import { useListContext } from "./ListContext.js";
-import { listSkeleton, listRow, listLoadingRow } from "./styles.css.js";
-const SkeletonRows = ({
-  selectable,
-  rows,
-  cols
-}) => {
-  const rowArray = Array.from({ length: rows }, (_, index) => index);
-  const colArray = Array.from({ length: cols }, (_, index) => index);
-  const { columns } = useListContext();
-  return /* @__PURE__ */ jsx(Fragment, { children: rowArray.map((index) => /* @__PURE__ */ jsxs(
-    "tr",
-    {
-      className: cn(listRow({ sentiment: "neutral" }), listLoadingRow),
-      id: `skeleton-${index}`,
-      children: [
-        selectable ? /* @__PURE__ */ jsx("td", {}) : null,
-        colArray.map((columnIndex) => /* @__PURE__ */ jsx(
-          ColumnProvider,
-          {
-            maxWidth: columns[columnIndex].maxWidth,
-            minWidth: columns[columnIndex].minWidth,
-            width: columns[columnIndex].width,
-            children: /* @__PURE__ */ jsx(Cell, { children: /* @__PURE__ */ jsx(Skeleton, { className: listSkeleton, variant: "line" }) })
-          },
-          columnIndex
-        ))
-      ]
-    },
-    index
-  )) });
-};
-export {
-  SkeletonRows
+import { listLoadingRow, listRow, listSkeleton } from "./styles.css.js";
+import { Cell } from "./Cell.js";
+import { Skeleton } from "../Skeleton/index.js";
+import { cn } from "@ultraviolet/utils";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/components/List/SkeletonRows.tsx
+const SkeletonRows = ({ selectable, rows, cols }) => {
+	const rowArray = Array.from({ length: rows }, (_, index) => index);
+	const colArray = Array.from({ length: cols }, (_, index) => index);
+	const { columns } = useListContext();
+	return /* @__PURE__ */ jsx(Fragment, { children: rowArray.map((index) => /* @__PURE__ */ jsxs("tr", {
+		className: cn(listRow({ sentiment: "neutral" }), listLoadingRow),
+		id: `skeleton-${index}`,
+		children: [selectable ? /* @__PURE__ */ jsx("td", {}) : null, colArray.map((columnIndex) => /* @__PURE__ */ jsx(ColumnProvider, {
+			maxWidth: columns[columnIndex].maxWidth,
+			minWidth: columns[columnIndex].minWidth,
+			width: columns[columnIndex].width,
+			children: /* @__PURE__ */ jsx(Cell, { children: /* @__PURE__ */ jsx(Skeleton, {
+				className: listSkeleton,
+				variant: "line"
+			}) })
+		}, columnIndex))]
+	}, index)) });
 };
+
+//#endregion
+export { SkeletonRows };