react-native-mantine 0.15.0 → 0.16.1

package/lib/module/components/Table/index.js

@@ -1,208 +1,164 @@
 "use strict";
 
-import React, { forwardRef, createContext, useContext, useState, useCallback } from 'react';
+import React, { forwardRef } from 'react';
 import { ScrollView } from 'react-native';
 import { BoxView } from "../BoxView/index.js";
 import { Text } from "../Text/index.js";
 import { useComponentDefaultProps } from "../../theme/theme-provider.js";
 import { createStyles } from "../../theme/index.js";
 import { rem } from "../../theme/utils/rem.js";
-import { withTextWrapper } from "../../theme/utils/withTextWrapper.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const TableContext = /*#__PURE__*/createContext(null);
-const useTableContext = () => {
-  const context = useContext(TableContext);
-  return context;
-};
-const fontSizes = {
-  xs: rem(10),
-  sm: rem(12),
-  md: rem(14),
-  lg: rem(16),
-  xl: rem(18)
-};
-const useTableStyles = createStyles((theme, {
-  withBorder,
-  captionSide,
-  flex,
-  flexGrow,
-  flexShrink,
-  flexBasis
-}) => ({
-  wrapper: {
-    // Apply flex properties to allow table to expand in container
-    ...(flex !== undefined && {
-      flex
-    }),
-    ...(flexGrow !== undefined && {
-      flexGrow
-    }),
-    ...(flexShrink !== undefined && {
-      flexShrink
-    }),
-    ...(flexBasis !== undefined && {
-      flexBasis
-    })
-  },
-  root: {
-    width: '100%',
-    borderCollapse: 'collapse',
-    ...(withBorder && {
-      borderWidth: 1,
-      borderColor: theme.colorScheme === 'dark' ? theme.colors.dark?.[4] : theme.colors.gray?.[3]
-    })
-  },
-  caption: {
-    fontSize: theme.fontSizes.sm,
-    color: theme.colorScheme === 'dark' ? theme.colors.dark?.[2] : theme.colors.gray?.[6],
-    paddingVertical: theme.spacing.xs,
-    textAlign: 'center',
-    ...(captionSide === 'bottom' && {
-      order: 1
-    })
-  }
-}));
-const useTableHeadStyles = createStyles(theme => ({
-  thead: {
-    borderBottomWidth: 1,
-    borderBottomColor: theme.colorScheme === 'dark' ? theme.colors.dark?.[4] : theme.colors.gray?.[3]
-  }
-}));
-const useTableRowStyles = createStyles((theme, {
-  striped,
-  isEven
-}) => ({
-  tr: {
-    flexDirection: 'row',
-    borderBottomWidth: 1,
-    borderBottomColor: theme.colorScheme === 'dark' ? theme.colors.dark?.[4] : theme.colors.gray?.[3],
-    ...(striped && isEven && {
-      backgroundColor: theme.colorScheme === 'dark' ? theme.colors.dark?.[6] : theme.colors.gray?.[0]
-    })
-  }
-}));
-const useTableCellStyles = createStyles((theme, {
-  fontSize,
-  verticalSpacing,
+const useStyles = createStyles((theme, {
   horizontalSpacing,
+  verticalSpacing,
+  fontSize,
+  withBorder,
   withColumnBorders,
-  isHeader,
-  width
+  striped
 }) => {
-  const getVerticalPadding = () => {
-    if (typeof verticalSpacing === 'number') return rem(verticalSpacing);
-    return theme.spacing[verticalSpacing] || theme.spacing.xs;
+  const borderColor = theme.colorScheme === 'dark' ? (theme.colors.dark || [])[4] : (theme.colors.gray || [])[3];
+  const getSpacing = size => {
+    if (typeof size === 'number') return rem(size);
+    return theme.spacing[size] || theme.spacing.xs;
   };
-  const getHorizontalPadding = () => {
-    if (typeof horizontalSpacing === 'number') return rem(horizontalSpacing);
-    return theme.spacing[horizontalSpacing] || theme.spacing.xs;
+  const getFontSize = size => {
+    if (typeof size === 'number') return size;
+    return theme.fontSizes[size] || theme.fontSizes.sm;
   };
+  const hPadding = getSpacing(horizontalSpacing);
+  const vPadding = getSpacing(verticalSpacing);
+  const cellFontSize = getFontSize(fontSize);
   return {
-    cell: {
-      // Remove flex: 1 to prevent equal spacing
-      // Use explicit width when available for column alignment
-      ...(width && {
-        width
-      }),
-      paddingVertical: getVerticalPadding(),
-      paddingHorizontal: getHorizontalPadding(),
-      fontSize: fontSizes[fontSize],
-      color: theme.colorScheme === 'dark' ? theme.white : theme.black,
-      textAlign: 'left',
-      ...(withColumnBorders && {
-        borderRightWidth: 1,
-        borderRightColor: theme.colorScheme === 'dark' ? theme.colors.dark?.[4] : theme.colors.gray?.[3]
-      }),
-      ...(isHeader && {
-        fontWeight: '600'
-      })
-    }
+    root: {
+      width: '100%',
+      backgroundColor: 'transparent'
+    },
+    scrollView: {
+      width: '100%'
+    },
+    container: {
+      flexDirection: 'column',
+      borderWidth: withBorder ? 1 : 0,
+      borderColor: withBorder ? borderColor : 'transparent',
+      borderStyle: 'solid'
+    },
+    caption: {
+      paddingHorizontal: hPadding,
+      paddingVertical: theme.spacing.xs,
+      fontSize: theme.fontSizes.sm,
+      color: theme.colorScheme === 'dark' ? (theme.colors.dark || [])[2] : (theme.colors.gray || [])[6],
+      textAlign: 'left'
+    },
+    captionTop: {
+      marginBottom: 0
+    },
+    captionBottom: {
+      marginTop: 0
+    },
+    thead: {
+      flexDirection: 'column'
+    },
+    tbody: {
+      flexDirection: 'column'
+    },
+    tfoot: {
+      flexDirection: 'column'
+    },
+    tr: {
+      flexDirection: 'row'
+    },
+    th: {
+      flex: 1,
+      paddingHorizontal: hPadding,
+      paddingVertical: vPadding,
+      borderBottomWidth: 1,
+      borderBottomColor: borderColor,
+      borderBottomStyle: 'solid',
+      borderRightWidth: withColumnBorders ? 1 : 0,
+      borderRightColor: withColumnBorders ? borderColor : 'transparent',
+      borderRightStyle: 'solid',
+      justifyContent: 'center'
+    },
+    thText: {
+      fontWeight: 'bold',
+      color: theme.colorScheme === 'dark' ? (theme.colors.dark || [])[0] : (theme.colors.gray || [])[7],
+      fontSize: cellFontSize
+    },
+    td: {
+      flex: 1,
+      paddingHorizontal: hPadding,
+      paddingVertical: vPadding,
+      borderTopWidth: 1,
+      borderTopColor: borderColor,
+      borderTopStyle: 'solid',
+      borderRightWidth: withColumnBorders ? 1 : 0,
+      borderRightColor: withColumnBorders ? borderColor : 'transparent',
+      borderRightStyle: 'solid',
+      justifyContent: 'center'
+    },
+    tdText: {
+      color: theme.colorScheme === 'dark' ? (theme.colors.dark || [])[0] : theme.black,
+      fontSize: cellFontSize
+    },
+    firstBodyRow: {
+      borderTopWidth: 0
+    },
+    lastCell: {
+      borderRightWidth: 0
+    },
+    stripedRow: striped ? {
+      backgroundColor: theme.colorScheme === 'dark' ? (theme.colors.dark || [])[6] : (theme.colors.gray || [])[0]
+    } : {}
   };
 });
 const defaultProps = {
-  horizontalSpacing: 'xs',
-  verticalSpacing: 'xs',
-  fontSize: 'sm',
   striped: false,
   highlightOnHover: false,
+  captionSide: 'top',
+  horizontalSpacing: 'xs',
+  fontSize: 'sm',
+  verticalSpacing: 7,
   withBorder: false,
   withColumnBorders: false,
-  captionSide: 'top'
+  horizontallyScrollable: false
 };
-const Table = /*#__PURE__*/forwardRef((props, ref) => {
+
+// Context to share table configuration with child components
+
+const TableContext = /*#__PURE__*/React.createContext(null);
+const useTableContext = () => {
+  const context = React.useContext(TableContext);
+  if (!context) {
+    throw new Error('Table compound components must be used within Table');
+  }
+  return context;
+};
+
+// Table Caption Component
+const TableCaption = /*#__PURE__*/forwardRef((props, ref) => {
   const {
     children,
-    horizontalSpacing,
-    verticalSpacing,
-    fontSize,
-    striped,
-    highlightOnHover: _highlightOnHover,
-    withBorder,
-    withColumnBorders,
-    captionSide,
-    caption,
-    flex,
-    flexGrow,
-    flexShrink,
-    flexBasis,
     style,
     ...others
-  } = useComponentDefaultProps('Table', defaultProps, props);
+  } = props;
   const {
     styles,
     sx
-  } = useTableStyles({
-    withBorder,
-    captionSide,
-    flex,
-    flexGrow,
-    flexShrink,
-    flexBasis
-  }, {
-    name: 'Table'
-  });
-
-  // Track column widths to ensure alignment across rows
-  const [columnWidths, setColumnWidths] = useState([]);
-  const onCellLayout = useCallback((columnIndex, width) => {
-    setColumnWidths(prevWidths => {
-      const newWidths = [...prevWidths];
-      // Store the maximum width for each column to ensure all cells in that column have the same width
-      if (!newWidths[columnIndex] || width > newWidths[columnIndex]) {
-        newWidths[columnIndex] = width;
-      }
-      return newWidths;
-    });
-  }, []);
-  return /*#__PURE__*/_jsx(TableContext.Provider, {
-    value: {
-      striped: striped,
-      highlightOnHover: _highlightOnHover,
-      withBorder: withBorder,
-      withColumnBorders: withColumnBorders,
-      fontSize: fontSize,
-      verticalSpacing: verticalSpacing,
-      horizontalSpacing: horizontalSpacing,
-      columnWidths,
-      onCellLayout
-    },
-    children: /*#__PURE__*/_jsx(ScrollView, {
-      horizontal: true,
-      style: styles.wrapper,
-      showsHorizontalScrollIndicator: true,
-      children: /*#__PURE__*/_jsxs(BoxView, {
-        ref: ref,
-        style: sx(styles.root, style),
-        ...others,
-        children: [caption && /*#__PURE__*/_jsx(Text, {
-          style: styles.caption,
-          children: caption
-        }), children]
-      })
-    })
+  } = useTableContext();
+  return /*#__PURE__*/_jsx(BoxView, {
+    ref: ref,
+    style: sx(styles.caption, style),
+    ...others,
+    children: typeof children === 'string' ? /*#__PURE__*/_jsx(Text, {
+      style: styles.caption,
+      children: children
+    }) : children
   });
 });
-const Thead = /*#__PURE__*/forwardRef((props, ref) => {
+TableCaption.displayName = 'Table.Caption';
+
+// Table Head Component
+const THead = /*#__PURE__*/forwardRef((props, ref) => {
   const {
     children,
     style,
@@ -211,9 +167,7 @@ const Thead = /*#__PURE__*/forwardRef((props, ref) => {
   const {
     styles,
     sx
-  } = useTableHeadStyles({}, {
-    name: 'Thead'
-  });
+  } = useTableContext();
   return /*#__PURE__*/_jsx(BoxView, {
     ref: ref,
     style: sx(styles.thead, style),
@@ -221,169 +175,198 @@ const Thead = /*#__PURE__*/forwardRef((props, ref) => {
     children: children
   });
 });
-const Tbody = /*#__PURE__*/forwardRef((props, ref) => {
+THead.displayName = 'Table.THead';
+
+// Table Body Component
+const TBody = /*#__PURE__*/forwardRef((props, ref) => {
   const {
     children,
     style,
     ...others
   } = props;
-  const childrenArray = React.Children.toArray(children);
+  const {
+    styles,
+    sx,
+    striped
+  } = useTableContext();
+
+  // Process children to add row styling
+  const processedChildren = React.Children.map(children, (child, index) => {
+    if (! /*#__PURE__*/React.isValidElement(child)) return child;
+    const isOddRow = index % 2 === 1;
+    const childProps = child.props;
+    const rowStyle = [childProps.style, striped && isOddRow && styles.stripedRow].filter(Boolean);
+    return /*#__PURE__*/React.cloneElement(child, {
+      'style': rowStyle.length > 0 ? rowStyle : childProps.style,
+      'data-index': index,
+      'data-first': index === 0
+    });
+  });
   return /*#__PURE__*/_jsx(BoxView, {
     ref: ref,
-    style: style,
+    style: sx(styles.tbody, style),
     ...others,
-    children: childrenArray.map((child, index) => {
-      if (! /*#__PURE__*/React.isValidElement(child)) return child;
-      return /*#__PURE__*/React.cloneElement(child, {
-        key: index,
-        __index: index
-      });
-    })
+    children: processedChildren
   });
 });
-const Tfoot = /*#__PURE__*/forwardRef((props, ref) => {
+TBody.displayName = 'Table.TBody';
+
+// Table Footer Component
+const TFoot = /*#__PURE__*/forwardRef((props, ref) => {
   const {
     children,
     style,
     ...others
   } = props;
+  const {
+    styles,
+    sx
+  } = useTableContext();
   return /*#__PURE__*/_jsx(BoxView, {
     ref: ref,
-    style: style,
+    style: sx(styles.tfoot, style),
     ...others,
     children: children
   });
 });
+TFoot.displayName = 'Table.TFoot';
+
+// Table Row Component
 const Tr = /*#__PURE__*/forwardRef((props, ref) => {
   const {
     children,
     style,
-    __index,
     ...others
   } = props;
-  const context = useTableContext();
   const {
     styles,
     sx
-  } = useTableRowStyles({
-    striped: context?.striped ?? false,
-    highlightOnHover: context?.highlightOnHover ?? false,
-    isEven: (__index ?? 0) % 2 === 0
-  }, {
-    name: 'Tr'
-  });
-
-  // Add column indices to children (Th and Td components)
-  const childrenArray = React.Children.toArray(children);
-  const childrenWithColumnIndex = childrenArray.map((child, index) => {
-    if (! /*#__PURE__*/React.isValidElement(child)) return child;
-    return /*#__PURE__*/React.cloneElement(child, {
-      __columnIndex: index
-    });
-  });
+  } = useTableContext();
   return /*#__PURE__*/_jsx(BoxView, {
     ref: ref,
     style: sx(styles.tr, style),
     ...others,
-    children: childrenWithColumnIndex
+    children: children
   });
 });
+Tr.displayName = 'Table.Tr';
+
+// Table Header Cell Component
 const Th = /*#__PURE__*/forwardRef((props, ref) => {
   const {
     children,
     style,
-    withTextWrapper: shouldWrapInText = true,
-    __columnIndex,
+    colSpan,
     ...others
   } = props;
-  const context = useTableContext();
-  const columnIndex = __columnIndex ?? 0;
-  const columnWidth = context?.columnWidths?.[columnIndex];
   const {
     styles,
     sx
-  } = useTableCellStyles({
-    fontSize: context?.fontSize ?? 'sm',
-    verticalSpacing: context?.verticalSpacing ?? 'xs',
-    horizontalSpacing: context?.horizontalSpacing ?? 'xs',
-    withColumnBorders: context?.withColumnBorders ?? false,
-    isHeader: true,
-    width: columnWidth
-  }, {
-    name: 'Th'
-  });
-  const handleLayout = useCallback(event => {
-    const {
-      width
-    } = event.nativeEvent.layout;
-    if (context?.onCellLayout && width > 0) {
-      context.onCellLayout(columnIndex, width);
-    }
-  }, [context, columnIndex]);
+  } = useTableContext();
+  const cellStyle = [styles.th, colSpan && {
+    flex: colSpan
+  }, style].filter(Boolean);
   return /*#__PURE__*/_jsx(BoxView, {
     ref: ref,
-    style: sx(styles.cell, style),
-    onLayout: handleLayout,
+    style: sx(...cellStyle),
     ...others,
-    children: withTextWrapper(children, shouldWrapInText, styles.cell)
+    children: typeof children === 'string' ? /*#__PURE__*/_jsx(Text, {
+      style: styles.thText,
+      children: children
+    }) : children
   });
 });
+Th.displayName = 'Table.Th';
+
+// Table Data Cell Component
 const Td = /*#__PURE__*/forwardRef((props, ref) => {
   const {
     children,
     style,
-    withTextWrapper: shouldWrapInText = true,
-    __columnIndex,
+    colSpan,
     ...others
   } = props;
-  const context = useTableContext();
-  const columnIndex = __columnIndex ?? 0;
-  const columnWidth = context?.columnWidths?.[columnIndex];
   const {
     styles,
     sx
-  } = useTableCellStyles({
-    fontSize: context?.fontSize ?? 'sm',
-    verticalSpacing: context?.verticalSpacing ?? 'xs',
-    horizontalSpacing: context?.horizontalSpacing ?? 'xs',
-    withColumnBorders: context?.withColumnBorders ?? false,
-    isHeader: false,
-    width: columnWidth
-  }, {
-    name: 'Td'
-  });
-  const handleLayout = useCallback(event => {
-    const {
-      width
-    } = event.nativeEvent.layout;
-    if (context?.onCellLayout && width > 0) {
-      context.onCellLayout(columnIndex, width);
-    }
-  }, [context, columnIndex]);
+  } = useTableContext();
+  const isFirstRow = others['data-first'];
+  const cellStyle = [styles.td, isFirstRow && styles.firstBodyRow, colSpan && {
+    flex: colSpan
+  }, style].filter(Boolean);
   return /*#__PURE__*/_jsx(BoxView, {
     ref: ref,
-    style: sx(styles.cell, style),
-    onLayout: handleLayout,
+    style: sx(...cellStyle),
     ...others,
-    children: withTextWrapper(children, shouldWrapInText, styles.cell)
+    children: /*#__PURE__*/_jsx(Text, {
+      style: styles.tdText,
+      children: children
+    })
   });
 });
-Table.displayName = 'Table';
-Thead.displayName = 'Table.Thead';
-Tbody.displayName = 'Table.Tbody';
-Tfoot.displayName = 'Table.Tfoot';
-Tr.displayName = 'Table.Tr';
-Th.displayName = 'Table.Th';
 Td.displayName = 'Table.Td';
 
-// Attach sub-components with proper typing
+// Main Table Component
+export const _Table = /*#__PURE__*/forwardRef((props, ref) => {
+  const {
+    striped,
+    highlightOnHover,
+    captionSide,
+    horizontalSpacing,
+    verticalSpacing,
+    fontSize,
+    withBorder,
+    withColumnBorders,
+    children,
+    style,
+    horizontallyScrollable,
+    ...others
+  } = useComponentDefaultProps('Table', defaultProps, props);
+  const {
+    styles,
+    sx
+  } = useStyles({
+    horizontalSpacing: horizontalSpacing,
+    verticalSpacing: verticalSpacing,
+    fontSize: fontSize,
+    withBorder: withBorder,
+    withColumnBorders: withColumnBorders,
+    striped: striped
+  }, {
+    name: 'Table'
+  });
+  const contextValue = {
+    styles,
+    sx,
+    striped: striped || false,
+    highlightOnHover: highlightOnHover || false
+  };
+  const tableContent = /*#__PURE__*/_jsxs(BoxView, {
+    ref: ref,
+    style: sx(styles.container, style),
+    ...others,
+    children: [captionSide === 'top' && React.Children.toArray(children).find(child => /*#__PURE__*/React.isValidElement(child) && child.type.displayName === 'Table.Caption'), React.Children.toArray(children).filter(child => /*#__PURE__*/React.isValidElement(child) && child.type.displayName !== 'Table.Caption'), captionSide === 'bottom' && React.Children.toArray(children).find(child => /*#__PURE__*/React.isValidElement(child) && child.type.displayName === 'Table.Caption')]
+  });
+  return /*#__PURE__*/_jsx(TableContext.Provider, {
+    value: contextValue,
+    children: horizontallyScrollable ? /*#__PURE__*/_jsx(ScrollView, {
+      horizontal: true,
+      style: styles.scrollView,
+      showsHorizontalScrollIndicator: true,
+      children: tableContent
+    }) : tableContent
+  });
+});
+_Table.displayName = 'Table';
 
-const TableWithSubComponents = Table;
-TableWithSubComponents.Thead = Thead;
-TableWithSubComponents.Tbody = Tbody;
-TableWithSubComponents.Tfoot = Tfoot;
-TableWithSubComponents.Tr = Tr;
-TableWithSubComponents.Th = Th;
-TableWithSubComponents.Td = Td;
-export { TableWithSubComponents as Table };
+// Attach compound components
+export const Table = Object.assign(_Table, {
+  Caption: TableCaption,
+  THead,
+  TBody,
+  TFoot,
+  Tr,
+  Th,
+  Td
+});
 //# sourceMappingURL=index.js.map