@optiaxiom/react 1.9.36 → 1.9.38

package/dist/esm/packages/react/src/data-table/DataTableRow.js

@@ -1,198 +1,137 @@
 "use client";
-import { jsx } from 'react/jsx-runtime';
-import { useComposedRefs } from '@radix-ui/react-compose-refs';
-import { useId } from '@radix-ui/react-id';
-import { forwardRef, useState, useRef, useEffect } from 'react';
-import { useEffectEvent } from '../hooks/useEffectEvent.js';
-import '../field/FieldContext.js';
-import '../utils/conditions.js';
-import '../utils/isHoverSupported.js';
-import '../table/Table.js';
-import '../table/TableAction.js';
-import '../table/TableBody.js';
-import '../table/TableCell.js';
-import '../table/TableHeader.js';
-import '../table/TableHeaderCell.js';
-import { TableRow } from '../table/TableRow.js';
-import { useDataTableContext } from './DataTableContext.js';
-import { DataTableRowProvider } from './DataTableRowContext.js';
-
-const DataTableRow = forwardRef(
-  ({ children, index, row, ...props }, outerRef) => {
-    const { highlightedIndex, setHighlightedIndex, table } = useDataTableContext("@optiaxiom/react/DataTableRow");
-    const [subHighlightedIndex, setSubHighlightedIndex] = useState(-1);
-    const labelId = useId();
-    const innerRef = useRef(null);
-    const ref = useComposedRefs(innerRef, outerRef);
-    useEffect(() => {
-      if (highlightedIndex !== index) {
-        return;
-      }
-      if (!innerRef.current?.contains(document.activeElement)) {
-        innerRef.current?.focus();
-      }
-      return () => setSubHighlightedIndex(-1);
-    }, [highlightedIndex, index]);
-    const [actions, setActions] = useState([]);
-    const primary = actions.find((action) => action.primary);
-    const [selector, setSelector] = useState();
-    const focusManaged = Boolean(selector || primary);
-    const onActionMount = useEffectEvent(
-      ({
-        primary: primary2,
-        ref: ref2
-      }) => {
-        setActions((actions2) => [...actions2, { primary: primary2, ref: ref2 }]);
-        return () => setActions(
-          (actions2) => actions2.filter((action) => action.ref !== ref2)
-        );
-      }
-    );
-    return /* @__PURE__ */ jsx(
-      TableRow,
-      {
-        "aria-labelledby": labelId,
-        "aria-selected": row.getCanSelect() ? row.getIsSelected() : void 0,
-        "data-focus-visible": focusManaged ? "" : void 0,
-        "data-selected": row.getIsSelected() ? "" : void 0,
-        onClick: (event) => {
-          if (!(event.target instanceof Element)) {
-            return;
-          }
-          if (isPortalClick(event)) {
-            return;
-          }
-          if (isInteractiveElement(event)) {
-            return;
-          }
-          if (row.getCanSelect()) {
-            if (selector && getAssociatedControl(event) !== selector.current) {
-              table.setRowSelection({ [row.id]: true });
-            }
-          } else if (!primary?.ref.current?.contains(event.target)) {
-            primary?.ref.current?.click();
-          }
-        },
-        onDoubleClick: (event) => {
-          if (!row.getCanSelect() || !primary || !(event.target instanceof Element)) {
-            return;
-          }
-          if (isPortalClick(event)) {
-            return;
-          }
-          if (isInteractiveElement(event)) {
-            return;
-          }
-          if (primary.ref.current?.contains(event.target)) {
-            return;
-          }
-          event.preventDefault();
-          document.getSelection()?.empty();
-          primary.ref.current?.click();
-        },
-        onFocus: (event) => {
-          if (focusManaged) {
-            setHighlightedIndex(index);
-            if (event.target === event.currentTarget) {
-              setSubHighlightedIndex(-1);
-            }
-          }
-        },
-        onKeyDown: (event) => {
-          if (event.defaultPrevented) {
-            return;
-          }
-          if (event.target instanceof HTMLElement && event.target !== selector?.current && (event.target.isContentEditable || ["input", "select", "textarea"].includes(event.target.localName))) {
-            return;
-          }
-          const { rows } = table.getRowModel();
-          if (focusManaged && (event.key === "ArrowDown" || event.key === "ArrowUp")) {
-            const nextIndex = event.key === "ArrowDown" ? highlightedIndex + 1 : highlightedIndex - 1;
-            if (nextIndex >= 0 && nextIndex <= rows.length - 1) {
-              event.preventDefault();
-              setHighlightedIndex(nextIndex);
-              if (selector) {
-                const nextRow = rows[nextIndex];
-                if (event.shiftKey && row.getCanMultiSelect()) {
-                  table.setRowSelection(
-                    (selection) => selection[nextRow.id] ? {
-                      ...selection,
-                      [row.id]: false
-                    } : {
-                      ...selection,
-                      [nextRow.id]: true
-                    }
-                  );
-                } else {
-                  table.setRowSelection({
-                    [nextRow.id]: true
-                  });
-                }
-              }
-            }
-          } else if (focusManaged && document.activeElement === event.currentTarget && event.key === "ArrowRight") {
-            const nextIndex = subHighlightedIndex + 1;
-            if (nextIndex <= actions.length - 1) {
-              event.preventDefault();
-              setSubHighlightedIndex(nextIndex);
-            }
-          } else if (event.currentTarget === document.activeElement) {
-            if (event.key === " " && selector) {
-              event.preventDefault();
-              row.toggleSelected();
-            } else if (event.key === "Enter" && primary) {
-              event.preventDefault();
-              primary.ref.current?.click();
-            }
-          }
-        },
-        ref,
-        tabIndex: focusManaged ? (highlightedIndex === -1 || highlightedIndex === index) && subHighlightedIndex === -1 ? 0 : -1 : void 0,
-        ...props,
-        children: /* @__PURE__ */ jsx(
-          DataTableRowProvider,
-          {
-            actions: actions.map(({ ref: ref2 }) => ref2),
-            focusManaged,
-            highlightedIndex: subHighlightedIndex,
-            labelId,
-            onActionMount,
-            row,
-            setHighlightedIndex: useEffectEvent((nextIndex) => {
-              setSubHighlightedIndex(nextIndex);
-              if (nextIndex === -1) {
-                innerRef.current?.focus();
-              }
-            }),
-            setSelector,
-            children
-          }
-        )
-      }
-    );
-  }
-);
+import { useEffectEvent } from "../hooks/useEffectEvent.js";
+import { useDataTableContext } from "./DataTableContext.js";
+import { TableRow } from "../table/TableRow.js";
+import { DataTableRowProvider } from "./DataTableRowContext.js";
+import { useId } from "@radix-ui/react-id";
+import { forwardRef, useEffect, useRef, useState } from "react";
+import { jsx } from "react/jsx-runtime";
+import { useComposedRefs } from "@radix-ui/react-compose-refs";
+//#region src/data-table/DataTableRow.tsx
+const DataTableRow = forwardRef(({ children, index, row, ...props }, outerRef) => {
+	const { highlightedIndex, setHighlightedIndex, table } = useDataTableContext("@optiaxiom/react/DataTableRow");
+	const [subHighlightedIndex, setSubHighlightedIndex] = useState(-1);
+	const labelId = useId();
+	const innerRef = useRef(null);
+	const ref = useComposedRefs(innerRef, outerRef);
+	useEffect(() => {
+		if (highlightedIndex !== index) return;
+		if (!innerRef.current?.contains(document.activeElement)) innerRef.current?.focus();
+		return () => setSubHighlightedIndex(-1);
+	}, [highlightedIndex, index]);
+	const [actions, setActions] = useState([]);
+	const primary = actions.find((action) => action.primary);
+	const [selector, setSelector] = useState();
+	const focusManaged = Boolean(selector || primary);
+	const onActionMount = useEffectEvent(({ primary, ref }) => {
+		setActions((actions) => [...actions, {
+			primary,
+			ref
+		}]);
+		return () => setActions((actions) => actions.filter((action) => action.ref !== ref));
+	});
+	return /* @__PURE__ */ jsx(TableRow, {
+		"aria-labelledby": labelId,
+		"aria-selected": row.getCanSelect() ? row.getIsSelected() : void 0,
+		"data-focus-visible": focusManaged ? "" : void 0,
+		"data-selected": row.getIsSelected() ? "" : void 0,
+		onClick: (event) => {
+			if (!(event.target instanceof Element)) return;
+			if (isPortalClick(event)) return;
+			if (isInteractiveElement(event)) return;
+			if (row.getCanSelect()) {
+				if (selector && getAssociatedControl(event) !== selector.current) table.setRowSelection({ [row.id]: true });
+			} else if (!primary?.ref.current?.contains(event.target)) primary?.ref.current?.click();
+		},
+		onDoubleClick: (event) => {
+			if (!row.getCanSelect() || !primary || !(event.target instanceof Element)) return;
+			if (isPortalClick(event)) return;
+			if (isInteractiveElement(event)) return;
+			if (primary.ref.current?.contains(event.target)) return;
+			event.preventDefault();
+			document.getSelection()?.empty();
+			primary.ref.current?.click();
+		},
+		onFocus: (event) => {
+			if (focusManaged) {
+				setHighlightedIndex(index);
+				if (event.target === event.currentTarget) setSubHighlightedIndex(-1);
+			}
+		},
+		onKeyDown: (event) => {
+			if (event.defaultPrevented) return;
+			if (event.target instanceof HTMLElement && event.target !== selector?.current && (event.target.isContentEditable || [
+				"input",
+				"select",
+				"textarea"
+			].includes(event.target.localName))) return;
+			const { rows } = table.getRowModel();
+			if (focusManaged && (event.key === "ArrowDown" || event.key === "ArrowUp")) {
+				const nextIndex = event.key === "ArrowDown" ? highlightedIndex + 1 : highlightedIndex - 1;
+				if (nextIndex >= 0 && nextIndex <= rows.length - 1) {
+					event.preventDefault();
+					setHighlightedIndex(nextIndex);
+					if (selector) {
+						const nextRow = rows[nextIndex];
+						if (event.shiftKey && row.getCanMultiSelect()) table.setRowSelection((selection) => selection[nextRow.id] ? {
+							...selection,
+							[row.id]: false
+						} : {
+							...selection,
+							[nextRow.id]: true
+						});
+						else table.setRowSelection({ [nextRow.id]: true });
+					}
+				}
+			} else if (focusManaged && document.activeElement === event.currentTarget && event.key === "ArrowRight") {
+				const nextIndex = subHighlightedIndex + 1;
+				if (nextIndex <= actions.length - 1) {
+					event.preventDefault();
+					setSubHighlightedIndex(nextIndex);
+				}
+			} else if (event.currentTarget === document.activeElement) {
+				if (event.key === " " && selector) {
+					event.preventDefault();
+					row.toggleSelected();
+				} else if (event.key === "Enter" && primary) {
+					event.preventDefault();
+					primary.ref.current?.click();
+				}
+			}
+		},
+		ref,
+		tabIndex: focusManaged ? (highlightedIndex === -1 || highlightedIndex === index) && subHighlightedIndex === -1 ? 0 : -1 : void 0,
+		...props,
+		children: /* @__PURE__ */ jsx(DataTableRowProvider, {
+			actions: actions.map(({ ref }) => ref),
+			focusManaged,
+			highlightedIndex: subHighlightedIndex,
+			labelId,
+			onActionMount,
+			row,
+			setHighlightedIndex: useEffectEvent((nextIndex) => {
+				setSubHighlightedIndex(nextIndex);
+				if (nextIndex === -1) innerRef.current?.focus();
+			}),
+			setSelector,
+			children
+		})
+	});
+});
 DataTableRow.displayName = "@optiaxiom/react/DataTableRow";
 const getAssociatedControl = (event) => {
-  if (event.target instanceof Element) {
-    const label = event.target.closest("label");
-    if (label && event.currentTarget.contains(label) && label.control) {
-      return label.control;
-    }
-  }
-  return;
+	if (event.target instanceof Element) {
+		const label = event.target.closest("label");
+		if (label && event.currentTarget.contains(label) && label.control) return label.control;
+	}
 };
 const isInteractiveElement = (event) => {
-  if (!(event.target instanceof Element)) {
-    return false;
-  }
-  const interactive = event.target.closest(
-    'a, button, input, select, textarea, [contenteditable="true"], [role="button"], [role="link"]'
-  );
-  return interactive && interactive !== event.currentTarget;
+	if (!(event.target instanceof Element)) return false;
+	const interactive = event.target.closest("a, button, input, select, textarea, [contenteditable=\"true\"], [role=\"button\"], [role=\"link\"]");
+	return interactive && interactive !== event.currentTarget;
 };
 const isPortalClick = (event) => {
-  return event.target instanceof Element && !event.currentTarget.contains(event.target);
+	return event.target instanceof Element && !event.currentTarget.contains(event.target);
 };
-
+//#endregion
 export { DataTableRow };

package/dist/esm/packages/react/src/data-table/DataTableRowContext.js

@@ -1,52 +1,44 @@
 "use client";
-import { createContext } from '@radix-ui/react-context';
-import { createElement } from 'react';
-import { Skeleton } from '../skeleton/Skeleton.js';
-
-const [DataTableRowProvider, useDataTableRowContext] = createContext("@optiaxiom/react/DataTableRow", {
-  actions: [],
-  focusManaged: void 0,
-  highlightedIndex: -1,
-  labelId: void 0,
-  onActionMount: void 0,
-  row: void 0,
-  setHighlightedIndex: void 0,
-  setSelector: void 0
+"use client";
+import { Skeleton } from "../skeleton/Skeleton.js";
+import { createElement } from "react";
+import { createContext as createContext$1 } from "@radix-ui/react-context";
+//#region src/data-table/DataTableRowContext.ts
+const [DataTableRowProvider, useDataTableRowContext] = createContext$1("@optiaxiom/react/DataTableRow", {
+	actions: [],
+	focusManaged: void 0,
+	highlightedIndex: -1,
+	labelId: void 0,
+	onActionMount: void 0,
+	row: void 0,
+	setHighlightedIndex: void 0,
+	setSelector: void 0
 });
 const fakeCellsFactory = (columns, rowIndex) => () => columns.map((column, columnIndex) => ({
-  column: {
-    ...column,
-    columnDef: {
-      ...column.columnDef,
-      cell: () => createElement(Skeleton, {
-        w: ["1/2", "full", "3/4"][(rowIndex + columnIndex) % 3]
-      })
-    }
-  },
-  getContext: () => ({}),
-  id: column.id
+	column: {
+		...column,
+		columnDef: {
+			...column.columnDef,
+			cell: () => createElement(Skeleton, { w: [
+				"1/2",
+				"full",
+				"3/4"
+			][(rowIndex + columnIndex) % 3] })
+		}
+	},
+	getContext: () => ({}),
+	id: column.id
 }));
 const fakeRow = (table, rowIndex) => ({
-  getCanMultiSelect: () => false,
-  getCanSelect: () => false,
-  getCenterVisibleCells: fakeCellsFactory(
-    table.getCenterVisibleLeafColumns(),
-    rowIndex
-  ),
-  getIsSelected: () => false,
-  getLeftVisibleCells: fakeCellsFactory(
-    table.getLeftVisibleLeafColumns(),
-    rowIndex
-  ),
-  getRightVisibleCells: fakeCellsFactory(
-    table.getRightVisibleLeafColumns(),
-    rowIndex
-  ),
-  getToggleSelectedHandler: () => (_event) => {
-  },
-  id: "loading" + rowIndex,
-  toggleSelected: (_value) => {
-  }
+	getCanMultiSelect: () => false,
+	getCanSelect: () => false,
+	getCenterVisibleCells: fakeCellsFactory(table.getCenterVisibleLeafColumns(), rowIndex),
+	getIsSelected: () => false,
+	getLeftVisibleCells: fakeCellsFactory(table.getLeftVisibleLeafColumns(), rowIndex),
+	getRightVisibleCells: fakeCellsFactory(table.getRightVisibleLeafColumns(), rowIndex),
+	getToggleSelectedHandler: () => (_event) => {},
+	id: "loading" + rowIndex,
+	toggleSelected: (_value) => {}
 });
-
+//#endregion
 export { DataTableRowProvider, fakeRow, useDataTableRowContext };

package/dist/esm/packages/react/src/date-input/DateInput-css.js

@@ -1,10 +1,10 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-CZ4LjAw2.css';
-import './../../../../assets/src/date-input/DateInput.css.ts.vanilla-xCJpB5oH.css';
-import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
-
-var clear$1 = recipeRuntime({base:[{size:'sm'},'e8x6db']});
-var date = recipeRuntime({base:'_10iseqf'});
-var input$2 = recipeRuntime({base:'_10onuls'});
-var picker = recipeRuntime({base:'wc92s8'});
-
-export { clear$1 as clear, date, input$2 as input, picker };
+import { recipeRuntime } from "../vanilla-extract/recipeRuntime.js";
+import "./../../../../assets/src/layers/layers.css.ts.vanilla-D2KEETGI.css";
+import "./../../../../assets/src/date-input/DateInput.css.ts.vanilla-CDgWlycK.css";
+//#region src/date-input/DateInput.css.ts
+var clear = recipeRuntime({ base: [{ size: "sm" }, "xciavz"] });
+var date = recipeRuntime({ base: "_1gzs3qf" });
+var input = recipeRuntime({ base: "_1ysneho" });
+var picker = recipeRuntime({ base: "rhlc18" });
+//#endregion
+export { clear, date, input, picker };