react-native-mantine 0.15.0 → 0.16.1

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

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.Table = void 0;
+exports._Table = exports.Table = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _reactNative = require("react-native");
 var _index = require("../BoxView/index.js");
@@ -11,203 +11,159 @@ var _index2 = require("../Text/index.js");
 var _themeProvider = require("../../theme/theme-provider.js");
 var _index3 = require("../../theme/index.js");
 var _rem = require("../../theme/utils/rem.js");
-var _withTextWrapper = require("../../theme/utils/withTextWrapper.js");
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
-const TableContext = /*#__PURE__*/(0, _react.createContext)(null);
-const useTableContext = () => {
-  const context = (0, _react.useContext)(TableContext);
-  return context;
-};
-const fontSizes = {
-  xs: (0, _rem.rem)(10),
-  sm: (0, _rem.rem)(12),
-  md: (0, _rem.rem)(14),
-  lg: (0, _rem.rem)(16),
-  xl: (0, _rem.rem)(18)
-};
-const useTableStyles = (0, _index3.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 = (0, _index3.createStyles)(theme => ({
-  thead: {
-    borderBottomWidth: 1,
-    borderBottomColor: theme.colorScheme === 'dark' ? theme.colors.dark?.[4] : theme.colors.gray?.[3]
-  }
-}));
-const useTableRowStyles = (0, _index3.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 = (0, _index3.createStyles)((theme, {
-  fontSize,
-  verticalSpacing,
+const useStyles = (0, _index3.createStyles)((theme, {
   horizontalSpacing,
+  verticalSpacing,
+  fontSize,
+  withBorder,
   withColumnBorders,
-  isHeader,
-  width
+  striped
 }) => {
-  const getVerticalPadding = () => {
-    if (typeof verticalSpacing === 'number') return (0, _rem.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 (0, _rem.rem)(size);
+    return theme.spacing[size] || theme.spacing.xs;
   };
-  const getHorizontalPadding = () => {
-    if (typeof horizontalSpacing === 'number') return (0, _rem.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__*/(0, _react.forwardRef)((props, ref) => {
+
+// Context to share table configuration with child components
+
+const TableContext = /*#__PURE__*/_react.default.createContext(null);
+const useTableContext = () => {
+  const context = _react.default.useContext(TableContext);
+  if (!context) {
+    throw new Error('Table compound components must be used within Table');
+  }
+  return context;
+};
+
+// Table Caption Component
+const TableCaption = /*#__PURE__*/(0, _react.forwardRef)((props, ref) => {
   const {
     children,
-    horizontalSpacing,
-    verticalSpacing,
-    fontSize,
-    striped,
-    highlightOnHover: _highlightOnHover,
-    withBorder,
-    withColumnBorders,
-    captionSide,
-    caption,
-    flex,
-    flexGrow,
-    flexShrink,
-    flexBasis,
     style,
     ...others
-  } = (0, _themeProvider.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] = (0, _react.useState)([]);
-  const onCellLayout = (0, _react.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__*/(0, _jsxRuntime.jsx)(TableContext.Provider, {
-    value: {
-      striped: striped,
-      highlightOnHover: _highlightOnHover,
-      withBorder: withBorder,
-      withColumnBorders: withColumnBorders,
-      fontSize: fontSize,
-      verticalSpacing: verticalSpacing,
-      horizontalSpacing: horizontalSpacing,
-      columnWidths,
-      onCellLayout
-    },
-    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.ScrollView, {
-      horizontal: true,
-      style: styles.wrapper,
-      showsHorizontalScrollIndicator: true,
-      children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_index.BoxView, {
-        ref: ref,
-        style: sx(styles.root, style),
-        ...others,
-        children: [caption && /*#__PURE__*/(0, _jsxRuntime.jsx)(_index2.Text, {
-          style: styles.caption,
-          children: caption
-        }), children]
-      })
-    })
+  } = useTableContext();
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.BoxView, {
+    ref: ref,
+    style: sx(styles.caption, style),
+    ...others,
+    children: typeof children === 'string' ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_index2.Text, {
+      style: styles.caption,
+      children: children
+    }) : children
   });
 });
-const Thead = /*#__PURE__*/(0, _react.forwardRef)((props, ref) => {
+TableCaption.displayName = 'Table.Caption';
+
+// Table Head Component
+const THead = /*#__PURE__*/(0, _react.forwardRef)((props, ref) => {
   const {
     children,
     style,
@@ -216,9 +172,7 @@ const Thead = /*#__PURE__*/(0, _react.forwardRef)((props, ref) => {
   const {
     styles,
     sx
-  } = useTableHeadStyles({}, {
-    name: 'Thead'
-  });
+  } = useTableContext();
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.BoxView, {
     ref: ref,
     style: sx(styles.thead, style),
@@ -226,168 +180,198 @@ const Thead = /*#__PURE__*/(0, _react.forwardRef)((props, ref) => {
     children: children
   });
 });
-const Tbody = /*#__PURE__*/(0, _react.forwardRef)((props, ref) => {
+THead.displayName = 'Table.THead';
+
+// Table Body Component
+const TBody = /*#__PURE__*/(0, _react.forwardRef)((props, ref) => {
   const {
     children,
     style,
     ...others
   } = props;
-  const childrenArray = _react.default.Children.toArray(children);
+  const {
+    styles,
+    sx,
+    striped
+  } = useTableContext();
+
+  // Process children to add row styling
+  const processedChildren = _react.default.Children.map(children, (child, index) => {
+    if (! /*#__PURE__*/_react.default.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.default.cloneElement(child, {
+      'style': rowStyle.length > 0 ? rowStyle : childProps.style,
+      'data-index': index,
+      'data-first': index === 0
+    });
+  });
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.BoxView, {
     ref: ref,
-    style: style,
+    style: sx(styles.tbody, style),
     ...others,
-    children: childrenArray.map((child, index) => {
-      if (! /*#__PURE__*/_react.default.isValidElement(child)) return child;
-      return /*#__PURE__*/_react.default.cloneElement(child, {
-        key: index,
-        __index: index
-      });
-    })
+    children: processedChildren
   });
 });
-const Tfoot = /*#__PURE__*/(0, _react.forwardRef)((props, ref) => {
+TBody.displayName = 'Table.TBody';
+
+// Table Footer Component
+const TFoot = /*#__PURE__*/(0, _react.forwardRef)((props, ref) => {
   const {
     children,
     style,
     ...others
   } = props;
+  const {
+    styles,
+    sx
+  } = useTableContext();
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.BoxView, {
     ref: ref,
-    style: style,
+    style: sx(styles.tfoot, style),
     ...others,
     children: children
   });
 });
+TFoot.displayName = 'Table.TFoot';
+
+// Table Row Component
 const Tr = /*#__PURE__*/(0, _react.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.default.Children.toArray(children);
-  const childrenWithColumnIndex = childrenArray.map((child, index) => {
-    if (! /*#__PURE__*/_react.default.isValidElement(child)) return child;
-    return /*#__PURE__*/_react.default.cloneElement(child, {
-      __columnIndex: index
-    });
-  });
+  } = useTableContext();
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.BoxView, {
     ref: ref,
     style: sx(styles.tr, style),
     ...others,
-    children: childrenWithColumnIndex
+    children: children
   });
 });
+Tr.displayName = 'Table.Tr';
+
+// Table Header Cell Component
 const Th = /*#__PURE__*/(0, _react.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 = (0, _react.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__*/(0, _jsxRuntime.jsx)(_index.BoxView, {
     ref: ref,
-    style: sx(styles.cell, style),
-    onLayout: handleLayout,
+    style: sx(...cellStyle),
     ...others,
-    children: (0, _withTextWrapper.withTextWrapper)(children, shouldWrapInText, styles.cell)
+    children: typeof children === 'string' ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_index2.Text, {
+      style: styles.thText,
+      children: children
+    }) : children
   });
 });
+Th.displayName = 'Table.Th';
+
+// Table Data Cell Component
 const Td = /*#__PURE__*/(0, _react.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 = (0, _react.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__*/(0, _jsxRuntime.jsx)(_index.BoxView, {
     ref: ref,
-    style: sx(styles.cell, style),
-    onLayout: handleLayout,
+    style: sx(...cellStyle),
     ...others,
-    children: (0, _withTextWrapper.withTextWrapper)(children, shouldWrapInText, styles.cell)
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_index2.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
+const _Table = exports._Table = /*#__PURE__*/(0, _react.forwardRef)((props, ref) => {
+  const {
+    striped,
+    highlightOnHover,
+    captionSide,
+    horizontalSpacing,
+    verticalSpacing,
+    fontSize,
+    withBorder,
+    withColumnBorders,
+    children,
+    style,
+    horizontallyScrollable,
+    ...others
+  } = (0, _themeProvider.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__*/(0, _jsxRuntime.jsxs)(_index.BoxView, {
+    ref: ref,
+    style: sx(styles.container, style),
+    ...others,
+    children: [captionSide === 'top' && _react.default.Children.toArray(children).find(child => /*#__PURE__*/_react.default.isValidElement(child) && child.type.displayName === 'Table.Caption'), _react.default.Children.toArray(children).filter(child => /*#__PURE__*/_react.default.isValidElement(child) && child.type.displayName !== 'Table.Caption'), captionSide === 'bottom' && _react.default.Children.toArray(children).find(child => /*#__PURE__*/_react.default.isValidElement(child) && child.type.displayName === 'Table.Caption')]
+  });
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(TableContext.Provider, {
+    value: contextValue,
+    children: horizontallyScrollable ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.ScrollView, {
+      horizontal: true,
+      style: styles.scrollView,
+      showsHorizontalScrollIndicator: true,
+      children: tableContent
+    }) : tableContent
+  });
+});
+_Table.displayName = 'Table';
 
-const TableWithSubComponents = exports.Table = Table;
-TableWithSubComponents.Thead = Thead;
-TableWithSubComponents.Tbody = Tbody;
-TableWithSubComponents.Tfoot = Tfoot;
-TableWithSubComponents.Tr = Tr;
-TableWithSubComponents.Th = Th;
-TableWithSubComponents.Td = Td;
+// Attach compound components
+const Table = exports.Table = Object.assign(_Table, {
+  Caption: TableCaption,
+  THead,
+  TBody,
+  TFoot,
+  Tr,
+  Th,
+  Td
+});
 //# sourceMappingURL=index.js.map