@xsolla/xui-table 0.151.0-pr273.1778117489

package/native/index.mjs

@@ -0,0 +1,716 @@
+// src/Table.tsx
+import React, {
+  createContext,
+  forwardRef,
+  useCallback,
+  useContext,
+  useEffect,
+  useMemo,
+  useState
+} from "react";
+
+// ../../foundation/primitives-native/src/Box.tsx
+import {
+  View,
+  Pressable,
+  Image
+} from "react-native";
+import { jsx } from "react/jsx-runtime";
+var Box = ({
+  children,
+  onPress,
+  onLayout,
+  onMoveShouldSetResponder,
+  onResponderGrant,
+  onResponderMove,
+  onResponderRelease,
+  onResponderTerminate,
+  backgroundColor,
+  borderColor,
+  borderWidth,
+  borderBottomWidth,
+  borderBottomColor,
+  borderTopWidth,
+  borderTopColor,
+  borderLeftWidth,
+  borderLeftColor,
+  borderRightWidth,
+  borderRightColor,
+  borderRadius,
+  borderStyle,
+  height,
+  padding,
+  paddingHorizontal,
+  paddingVertical,
+  margin,
+  marginTop,
+  marginBottom,
+  marginLeft,
+  marginRight,
+  flexDirection,
+  alignItems,
+  justifyContent,
+  position,
+  top,
+  bottom,
+  left,
+  right,
+  width,
+  minWidth,
+  minHeight,
+  maxWidth,
+  maxHeight,
+  flex,
+  overflow,
+  zIndex,
+  hoverStyle,
+  pressStyle,
+  style,
+  "data-testid": dataTestId,
+  testID,
+  as,
+  src,
+  alt,
+  ...rest
+}) => {
+  const getContainerStyle = (pressed) => ({
+    backgroundColor: pressed && pressStyle?.backgroundColor ? pressStyle.backgroundColor : backgroundColor,
+    borderColor,
+    borderWidth,
+    borderBottomWidth,
+    borderBottomColor,
+    borderTopWidth,
+    borderTopColor,
+    borderLeftWidth,
+    borderLeftColor,
+    borderRightWidth,
+    borderRightColor,
+    borderRadius,
+    borderStyle,
+    overflow,
+    zIndex,
+    height,
+    width,
+    minWidth,
+    minHeight,
+    maxWidth,
+    maxHeight,
+    padding,
+    paddingHorizontal,
+    paddingVertical,
+    margin,
+    marginTop,
+    marginBottom,
+    marginLeft,
+    marginRight,
+    flexDirection,
+    alignItems,
+    justifyContent,
+    position,
+    top,
+    bottom,
+    left,
+    right,
+    flex,
+    ...style
+  });
+  const finalTestID = dataTestId || testID;
+  const {
+    role,
+    tabIndex,
+    onKeyDown,
+    onKeyUp,
+    "aria-label": _ariaLabel,
+    "aria-labelledby": _ariaLabelledBy,
+    "aria-current": _ariaCurrent,
+    "aria-disabled": _ariaDisabled,
+    "aria-live": _ariaLive,
+    className,
+    "data-testid": _dataTestId,
+    ...nativeRest
+  } = rest;
+  if (as === "img" && src) {
+    const imageStyle = {
+      width,
+      height,
+      borderRadius,
+      position,
+      top,
+      bottom,
+      left,
+      right,
+      ...style
+    };
+    return /* @__PURE__ */ jsx(
+      Image,
+      {
+        source: { uri: src },
+        style: imageStyle,
+        testID: finalTestID,
+        resizeMode: "cover",
+        ...nativeRest
+      }
+    );
+  }
+  if (onPress) {
+    return /* @__PURE__ */ jsx(
+      Pressable,
+      {
+        onPress,
+        onLayout,
+        onMoveShouldSetResponder,
+        onResponderGrant,
+        onResponderMove,
+        onResponderRelease,
+        onResponderTerminate,
+        style: ({ pressed }) => getContainerStyle(pressed),
+        testID: finalTestID,
+        ...nativeRest,
+        children
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(
+    View,
+    {
+      style: getContainerStyle(),
+      testID: finalTestID,
+      onLayout,
+      onMoveShouldSetResponder,
+      onResponderGrant,
+      onResponderMove,
+      onResponderRelease,
+      onResponderTerminate,
+      ...nativeRest,
+      children
+    }
+  );
+};
+
+// ../../foundation/primitives-native/src/Text.tsx
+import {
+  Text as RNText,
+  StyleSheet
+} from "react-native";
+import { jsx as jsx2 } from "react/jsx-runtime";
+var roleMap = {
+  alert: "alert",
+  heading: "header",
+  button: "button",
+  link: "link",
+  text: "text"
+};
+var parseNumericValue = (value) => {
+  if (value === void 0) return void 0;
+  if (typeof value === "number") return value;
+  const parsed = parseFloat(value);
+  return isNaN(parsed) ? void 0 : parsed;
+};
+var Text = ({
+  children,
+  color,
+  fontSize,
+  fontWeight,
+  fontFamily,
+  textAlign,
+  lineHeight,
+  numberOfLines,
+  id,
+  role,
+  style: styleProp,
+  ...props
+}) => {
+  let resolvedFontFamily = fontFamily ? fontFamily.split(",")[0].replace(/['"]/g, "").trim() : void 0;
+  if (resolvedFontFamily === "Pilat Wide" || resolvedFontFamily === "Pilat Wide Bold" || resolvedFontFamily === "Aktiv Grotesk") {
+    resolvedFontFamily = void 0;
+  }
+  const incomingStyle = StyleSheet.flatten(styleProp);
+  const baseStyle = {
+    color: color ?? incomingStyle?.color,
+    fontSize: typeof fontSize === "number" ? fontSize : void 0,
+    fontWeight,
+    fontFamily: resolvedFontFamily,
+    textDecorationLine: props.textDecoration,
+    textAlign: textAlign ?? incomingStyle?.textAlign,
+    lineHeight: parseNumericValue(lineHeight ?? incomingStyle?.lineHeight),
+    marginTop: parseNumericValue(
+      incomingStyle?.marginTop
+    ),
+    marginBottom: parseNumericValue(
+      incomingStyle?.marginBottom
+    )
+  };
+  const accessibilityRole = role ? roleMap[role] : void 0;
+  return /* @__PURE__ */ jsx2(
+    RNText,
+    {
+      style: baseStyle,
+      numberOfLines,
+      testID: id,
+      accessibilityRole,
+      children
+    }
+  );
+};
+
+// src/Table.tsx
+import { useResolvedTheme, isNative } from "@xsolla/xui-core";
+import { Sort } from "@xsolla/xui-icons-base";
+import { Fragment, jsx as jsx3, jsxs } from "react/jsx-runtime";
+var TableRowGroupContext = createContext("body");
+var RowRevealContext = createContext({
+  revealed: true
+});
+var useHoverCapable = () => {
+  const [hoverCapable, setHoverCapable] = useState(true);
+  useEffect(() => {
+    if (isNative) return;
+    if (typeof window === "undefined" || !window.matchMedia) return;
+    const mq = window.matchMedia("(hover: hover)");
+    setHoverCapable(mq.matches);
+    const onChange = (e) => setHoverCapable(e.matches);
+    mq.addEventListener?.("change", onChange);
+    return () => mq.removeEventListener?.("change", onChange);
+  }, []);
+  return hoverCapable;
+};
+var Divider = ({ color }) => /* @__PURE__ */ jsx3(
+  Box,
+  {
+    width: "100%",
+    height: 1,
+    backgroundColor: color,
+    style: { flexShrink: 0 }
+  }
+);
+var TableRoot = forwardRef(
+  ({ children, themeMode, themeProductContext }, ref) => {
+    const { theme } = useResolvedTheme({ themeMode, themeProductContext });
+    const sizing = theme.sizing.table;
+    return /* @__PURE__ */ jsx3(
+      Box,
+      {
+        ref,
+        flexDirection: "column",
+        alignItems: "stretch",
+        gap: sizing.containerGap,
+        paddingVertical: sizing.containerPaddingVertical,
+        backgroundColor: theme.colors.background.primary,
+        borderRadius: sizing.containerRadius,
+        width: "100%",
+        role: "table",
+        style: {
+          color: theme.colors.content.primary,
+          overflow: "clip"
+        },
+        children
+      }
+    );
+  }
+);
+TableRoot.displayName = "Table";
+var TableCaption = forwardRef(
+  ({ children, themeMode, themeProductContext, style, ...props }, ref) => {
+    const { theme } = useResolvedTheme({ themeMode, themeProductContext });
+    const sizing = theme.sizing.table;
+    return /* @__PURE__ */ jsx3(
+      Box,
+      {
+        ref,
+        flexDirection: "row",
+        alignItems: "center",
+        paddingHorizontal: sizing.headerRowPaddingHorizontal,
+        width: "100%",
+        ...props,
+        style,
+        children: typeof children === "string" || typeof children === "number" ? /* @__PURE__ */ jsx3(
+          Text,
+          {
+            fontSize: sizing.captionFontSize,
+            lineHeight: sizing.captionLineHeight,
+            color: theme.colors.content.secondary,
+            children
+          }
+        ) : children
+      }
+    );
+  }
+);
+TableCaption.displayName = "Table.Caption";
+var TableHeader = forwardRef(
+  ({ children, themeMode, themeProductContext, style, ...props }, ref) => {
+    const { theme } = useResolvedTheme({ themeMode, themeProductContext });
+    return /* @__PURE__ */ jsx3(TableRowGroupContext.Provider, { value: "header", children: /* @__PURE__ */ jsxs(
+      Box,
+      {
+        ref,
+        flexDirection: "column",
+        alignItems: "stretch",
+        width: "100%",
+        role: "rowgroup",
+        ...props,
+        style: {
+          position: "sticky",
+          top: 0,
+          zIndex: 1,
+          backgroundColor: theme.colors.background.primary,
+          ...style
+        },
+        children: [
+          children,
+          /* @__PURE__ */ jsx3(Divider, { color: theme.colors.border.secondary })
+        ]
+      }
+    ) });
+  }
+);
+TableHeader.displayName = "Table.Header";
+var TableBody = forwardRef(
+  ({ children, style, minRows, themeMode, themeProductContext, ...props }, ref) => {
+    const { theme } = useResolvedTheme({ themeMode, themeProductContext });
+    const sizing = theme.sizing.table;
+    const DIVIDER_HEIGHT = 1;
+    const computedMinHeight = minRows ? minRows * sizing.rowHeight + (minRows - 1) * DIVIDER_HEIGHT : void 0;
+    let renderedChildren = children;
+    if (minRows) {
+      const childArray = React.Children.toArray(children);
+      const hasOnlyRowChildren = childArray.length > 0 && childArray.every((c) => React.isValidElement(c) && c.type === TableRow);
+      const realRowCount = hasOnlyRowChildren ? childArray.length : 0;
+      const placeholderCount = hasOnlyRowChildren ? Math.max(0, minRows - realRowCount) : 0;
+      if (placeholderCount > 0) {
+        const patchedRows = childArray.map((child, i) => {
+          if (!React.isValidElement(child)) return child;
+          const isLastRealRow = i === realRowCount - 1;
+          return React.cloneElement(child, {
+            hideDivider: isLastRealRow ? false : child.props.hideDivider
+          });
+        });
+        const placeholders = Array.from({ length: placeholderCount }).map(
+          (_, i) => {
+            const isLast = i === placeholderCount - 1;
+            return /* @__PURE__ */ jsx3(
+              Box,
+              {
+                "aria-hidden": true,
+                style: {
+                  height: isLast ? sizing.rowHeight : sizing.rowHeight + DIVIDER_HEIGHT,
+                  flexShrink: 0
+                }
+              },
+              `__table-body-placeholder-${i}`
+            );
+          }
+        );
+        renderedChildren = /* @__PURE__ */ jsxs(Fragment, { children: [
+          patchedRows,
+          placeholders
+        ] });
+      }
+    }
+    return /* @__PURE__ */ jsx3(TableRowGroupContext.Provider, { value: "body", children: /* @__PURE__ */ jsx3(
+      Box,
+      {
+        ref,
+        flexDirection: "column",
+        alignItems: "stretch",
+        width: "100%",
+        role: "rowgroup",
+        ...props,
+        style: {
+          ...computedMinHeight !== void 0 && {
+            minHeight: computedMinHeight
+          },
+          ...style
+        },
+        children: renderedChildren
+      }
+    ) });
+  }
+);
+TableBody.displayName = "Table.Body";
+var TableRow = forwardRef(
+  ({
+    children,
+    hoverable: hoverableProp,
+    selected,
+    hideDivider: hideDividerProp,
+    onPress,
+    themeMode,
+    themeProductContext,
+    style,
+    onMouseEnter,
+    onMouseLeave,
+    onFocus,
+    onBlur,
+    ...props
+  }, ref) => {
+    const { theme } = useResolvedTheme({ themeMode, themeProductContext });
+    const sizing = theme.sizing.table;
+    const rowGroup = useContext(TableRowGroupContext);
+    const hoverCapable = useHoverCapable();
+    const isHeaderRow = rowGroup === "header";
+    const hoverable = hoverableProp ?? !isHeaderRow;
+    const hideDivider = hideDividerProp ?? isHeaderRow;
+    const [hovered, setHovered] = useState(false);
+    const [focusedWithin, setFocusedWithin] = useState(false);
+    const revealed = hoverCapable ? hovered || focusedWithin : true;
+    const handleMouseEnter = useCallback(
+      (e) => {
+        setHovered(true);
+        onMouseEnter?.(e);
+      },
+      [onMouseEnter]
+    );
+    const handleMouseLeave = useCallback(
+      (e) => {
+        setHovered(false);
+        onMouseLeave?.(e);
+      },
+      [onMouseLeave]
+    );
+    const handleFocus = useCallback(
+      (e) => {
+        setFocusedWithin(true);
+        onFocus?.(e);
+      },
+      [onFocus]
+    );
+    const handleBlur = useCallback(
+      (e) => {
+        if (e.relatedTarget instanceof Node && e.currentTarget.contains(e.relatedTarget)) {
+          onBlur?.(e);
+          return;
+        }
+        setFocusedWithin(false);
+        onBlur?.(e);
+      },
+      [onBlur]
+    );
+    const baseBg = selected ? theme.colors.background.secondary : theme.colors.background.primary;
+    const rowHeight = isHeaderRow ? sizing.headerRowHeight : sizing.rowHeight;
+    const rowPaddingHorizontal = isHeaderRow ? sizing.headerRowPaddingHorizontal : sizing.rowPaddingHorizontal;
+    const ctxValue = useMemo(() => ({ revealed }), [revealed]);
+    return /* @__PURE__ */ jsxs(RowRevealContext.Provider, { value: ctxValue, children: [
+      /* @__PURE__ */ jsx3(
+        Box,
+        {
+          ref,
+          flexDirection: "row",
+          alignItems: "center",
+          height: rowHeight,
+          paddingHorizontal: rowPaddingHorizontal,
+          width: "100%",
+          gap: sizing.cellGap,
+          backgroundColor: baseBg,
+          cursor: onPress ? "pointer" : void 0,
+          hoverStyle: hoverable ? { backgroundColor: theme.colors.background.secondary } : void 0,
+          onPress,
+          role: "row",
+          "aria-selected": selected || void 0,
+          onMouseEnter: handleMouseEnter,
+          onMouseLeave: handleMouseLeave,
+          onFocus: handleFocus,
+          onBlur: handleBlur,
+          ...props,
+          style,
+          children
+        }
+      ),
+      !hideDivider && /* @__PURE__ */ jsx3(Divider, { color: theme.colors.border.secondary })
+    ] });
+  }
+);
+TableRow.displayName = "Table.Row";
+var positionToFlex = (position) => {
+  switch (position) {
+    case "left":
+      return { flexShrink: 0 };
+    case "right":
+      return { flexShrink: 0, marginLeft: "auto" };
+    default:
+      return {};
+  }
+};
+var alignToJustify = (align) => {
+  switch (align) {
+    case "right":
+      return "flex-end";
+    case "center":
+      return "center";
+    default:
+      return "flex-start";
+  }
+};
+var TableCell = forwardRef(
+  ({
+    children,
+    align = "left",
+    position = "default",
+    width,
+    grow,
+    revealOnHover,
+    themeMode,
+    themeProductContext,
+    style,
+    ...props
+  }, ref) => {
+    const { theme } = useResolvedTheme({ themeMode, themeProductContext });
+    const sizing = theme.sizing.table;
+    const { revealed } = useContext(RowRevealContext);
+    const positionStyle = useMemo(() => positionToFlex(position), [position]);
+    const revealStyle = revealOnHover && !revealed ? { opacity: 0, pointerEvents: "none" } : revealOnHover ? { opacity: 1, transition: "opacity 0.15s ease" } : {};
+    return /* @__PURE__ */ jsx3(
+      Box,
+      {
+        ref,
+        flexDirection: "row",
+        alignItems: "center",
+        justifyContent: alignToJustify(align),
+        gap: 8,
+        height: "100%",
+        width,
+        role: "cell",
+        ...props,
+        style: {
+          flex: width != null ? "0 0 auto" : grow ?? 1,
+          minWidth: 0,
+          ...positionStyle,
+          ...revealStyle,
+          ...style
+        },
+        children: typeof children === "string" || typeof children === "number" ? /* @__PURE__ */ jsx3(
+          Text,
+          {
+            fontSize: sizing.cellFontSize,
+            lineHeight: sizing.cellLineHeight,
+            color: theme.colors.content.primary,
+            style: {
+              overflow: "hidden",
+              textOverflow: "ellipsis",
+              whiteSpace: "nowrap",
+              maxWidth: "100%"
+            },
+            children
+          }
+        ) : children
+      }
+    );
+  }
+);
+TableCell.displayName = "Table.Cell";
+var SortIcon = ({ direction, color, size }) => /* @__PURE__ */ jsx3(
+  Box,
+  {
+    style: {
+      flexShrink: 0,
+      opacity: direction === "none" ? 0.4 : 1,
+      transition: "opacity 0.15s ease"
+    },
+    children: /* @__PURE__ */ jsx3(Sort, { variant: "line", size, color, "aria-hidden": true })
+  }
+);
+var TableHead = forwardRef(
+  ({
+    children,
+    align = "left",
+    position = "default",
+    width,
+    grow,
+    sort,
+    onSortToggle,
+    themeMode,
+    themeProductContext,
+    style,
+    ...props
+  }, ref) => {
+    const { theme } = useResolvedTheme({ themeMode, themeProductContext });
+    const sizing = theme.sizing.table;
+    const positionStyle = useMemo(() => positionToFlex(position), [position]);
+    const sortable = sort != null;
+    const ariaSort = sortable ? sort : void 0;
+    return /* @__PURE__ */ jsxs(
+      Box,
+      {
+        ref,
+        flexDirection: "row",
+        alignItems: "center",
+        justifyContent: alignToJustify(align),
+        gap: sizing.headerCellGap,
+        height: "100%",
+        width,
+        role: "columnheader",
+        "aria-sort": ariaSort,
+        cursor: sortable ? "pointer" : void 0,
+        onPress: sortable ? onSortToggle : void 0,
+        ...props,
+        style: {
+          flex: width != null ? "0 0 auto" : grow ?? 1,
+          minWidth: 0,
+          ...positionStyle,
+          ...style
+        },
+        children: [
+          sortable && /* @__PURE__ */ jsx3(
+            SortIcon,
+            {
+              direction: sort,
+              color: theme.colors.content.secondary,
+              size: sizing.headerCellFontSize + 2
+            }
+          ),
+          typeof children === "string" || typeof children === "number" ? /* @__PURE__ */ jsx3(
+            Text,
+            {
+              fontSize: sizing.headerCellFontSize,
+              lineHeight: sizing.headerCellLineHeight,
+              color: theme.colors.content.secondary,
+              fontWeight: "500",
+              style: {
+                overflow: "hidden",
+                textOverflow: "ellipsis",
+                whiteSpace: "nowrap"
+              },
+              children
+            }
+          ) : children
+        ]
+      }
+    );
+  }
+);
+TableHead.displayName = "Table.Head";
+var TableFooter = forwardRef(
+  ({ children, style, ...props }, ref) => {
+    const { theme } = useResolvedTheme();
+    const sizing = theme.sizing.table;
+    return /* @__PURE__ */ jsx3(
+      Box,
+      {
+        ref,
+        flexDirection: "row",
+        alignItems: "center",
+        justifyContent: "center",
+        gap: sizing.paginationGap,
+        paddingHorizontal: sizing.paginationPaddingHorizontal,
+        width: "100%",
+        ...props,
+        style,
+        children
+      }
+    );
+  }
+);
+TableFooter.displayName = "Table.Footer";
+var Table = Object.assign(TableRoot, {
+  Caption: TableCaption,
+  Header: TableHeader,
+  Body: TableBody,
+  Footer: TableFooter,
+  Row: TableRow,
+  Head: TableHead,
+  Cell: TableCell
+});
+export {
+  Table
+};
+//# sourceMappingURL=index.mjs.map