@gobolt/genesis 0.2.20 → 0.3.0

package/dist/components/Select/Select.js

@@ -1,9 +1,72 @@
-import { jsx } from "react/jsx-runtime";
-import React__default, { useEffect } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import React__default from "react";
 import { TYPE } from "../../constants/index.js";
-import DropdownChevron from "../shared/DropdownChevron.js";
-import { SelectWrapper, Select as Select$1, SelectDropdown, StyledMenuItem } from "./styles.js";
+import styled from "styled-components";
+import SelectTrigger from "./SelectTrigger.js";
 import { useGenesis } from "../../providers/useGenesis.js";
+const SelectWrapper = styled.div`
+  position: relative;
+  background-color: transparent;
+  border-radius: 8px;
+  width: auto;
+
+  ${({ $isFocused, theme, type = "primary" }) => $isFocused && `
+    background-color: transparent;
+  `}
+
+  ${({ disabled, theme }) => disabled && `
+    cursor: not-allowed;
+    
+    &:hover {
+      border-color: ${theme.colors.inputs.surface.border};
+    }
+  `}
+`;
+const SelectDropdown = styled.div`
+  padding: 0px;
+  border-radius: 0px;
+  animation-duration: ${({ theme }) => `${theme.motion.veryfast}s`};
+  transition: all ${({ theme }) => `${theme.motion.veryfast}s`}
+    cubic-bezier(0.645, 0.045, 0.355, 1);
+
+  &.entering {
+    opacity: 0;
+    transform: scaleY(0.8);
+  }
+
+  &.entered {
+    opacity: 1;
+    transform: scaleY(1);
+  }
+
+  &.exiting {
+    opacity: 0;
+    transform: scaleY(0.8);
+  }
+`;
+const MenuItem = styled.div`
+  padding: 8px 12px;
+  cursor: ${({ disabled }) => disabled ? "not-allowed" : "pointer"};
+  background-color: ${({ $isSelected, theme, type = "primary" }) => $isSelected ? theme.colors[type].hover.backgroundColor : "transparent"};
+  color: ${({ $isSelected, disabled, theme, type = "primary" }) => disabled ? theme.colors.inputs.onsurface.disabled : $isSelected ? theme.colors[type].hover.color : theme.colors.onsurface.copy};
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  transition: all ${({ theme }) => `${theme.motion.veryfast}s`} ease-in-out;
+  opacity: ${({ disabled }) => disabled ? 0.5 : 1};
+
+  ${({ disabled }) => !disabled && `
+    &:hover {
+      background-color: ${({ $isSelected, theme, type = "primary" }) => $isSelected ? theme.colors[type].hover.backgroundColor : "rgba(0, 0, 0, 0.04)"};
+      color: ${({ $isSelected, theme, type = "primary" }) => $isSelected ? theme.colors[type].hover.color : theme.colors.onsurface["copy-dark"]};
+    }
+
+    &:active {
+      background-color: ${({ theme, type = "primary" }) => theme.colors[type].hover.backgroundColor};
+      color: ${({ theme, type = "primary" }) => theme.colors[type].hover.color};
+    }
+  `}
+`;
 const Select = ({
   type = TYPE.primary,
   state,
@@ -11,68 +74,141 @@ const Select = ({
   defaultValue,
   onChange,
   size = "normal",
-  width = 320,
+  width = "100%",
   value,
+  options = [],
+  placeholder,
+  selectDisplayMode = "count",
+  isSingleSelect = false,
+  disabled = false,
   ...rest
 }) => {
-  const { breakpoint } = useGenesis();
+  const [isOpen, setIsOpen] = React__default.useState(false);
   const [isFocused, setIsFocused] = React__default.useState(false);
-  useEffect(() => {
-    const style2 = document.createElement("style");
-    style2.textContent = `
-      .ant-select-dropdown {
-        padding: 0px !important;
-        border-radius: 0px !important;
-      }
-      .ant-select-selection-placeholder {
-        inset-inline-start: 0px !important;
+  const [dropdownAnimation, setDropdownAnimation] = React__default.useState("entered");
+  const selectReference = React__default.useRef(null);
+  const { theme } = useGenesis();
+  React__default.useEffect(() => {
+    const handleClickOutside = (event) => {
+      if (selectReference.current && !selectReference.current.contains(event.target)) {
+        handleClose();
+        setIsFocused(false);
       }
-    `;
-    document.head.appendChild(style2);
+    };
+    if (isOpen) {
+      document.addEventListener("mousedown", handleClickOutside);
+    }
     return () => {
-      document.head.removeChild(style2);
+      document.removeEventListener("mousedown", handleClickOutside);
     };
-  }, []);
-  const customDropdownRender = (menu) => /* @__PURE__ */ jsx(SelectDropdown, { type, state, children: /* @__PURE__ */ jsx(StyledMenuItem, { type, state, children: menu }) });
-  const isMultiSelectCountAtZero = variant === "multiSelectCount" && Array.isArray(value);
-  const totalSelected = Array.isArray(value) ? value == null ? void 0 : value.length : 0;
-  const shiftHackStyle = {
-    display: "block",
-    position: "absolute",
-    top: totalSelected === 0 ? 0 : 12,
-    left: 0,
-    width
+  }, [isOpen]);
+  const handleClose = () => {
+    setDropdownAnimation("exiting");
+    setTimeout(() => {
+      setIsOpen(false);
+      setDropdownAnimation("entered");
+    }, 200);
   };
-  const normalStyle = {
-    display: "block",
-    position: "relative",
-    width
+  const handleTriggerClick = () => {
+    if (disabled) return;
+    setIsFocused(true);
+    if (isOpen) {
+      handleClose();
+    } else {
+      setIsOpen(true);
+      setDropdownAnimation("entering");
+      setTimeout(() => {
+        setDropdownAnimation("entered");
+      }, 0);
+    }
+  };
+  const handleOptionSelect = (optionValue) => {
+    if (disabled) return;
+    let newValue;
+    if (Array.isArray(value)) {
+      const stringValue = value.map(String);
+      newValue = stringValue.includes(optionValue) ? stringValue.filter((v) => v !== optionValue) : [...stringValue, optionValue];
+    } else {
+      newValue = optionValue;
+    }
+    onChange == null ? void 0 : onChange(newValue);
+    if (isSingleSelect) {
+      handleClose();
+    }
+  };
+  const getSelectModeValue = (value2) => {
+    if (Array.isArray(value2)) {
+      if (selectDisplayMode === "count") {
+        return `${value2.length} selected`;
+      }
+      return value2;
+    }
+    return value2;
   };
-  const style = isMultiSelectCountAtZero ? shiftHackStyle : normalStyle;
-  return /* @__PURE__ */ jsx("div", { style, children: /* @__PURE__ */ jsx(
+  const modeValue = getSelectModeValue(value);
+  return /* @__PURE__ */ jsx("div", { style: { position: "relative", width }, children: /* @__PURE__ */ jsxs(
     SelectWrapper,
     {
+      ref: selectReference,
       $isFocused: isFocused,
       type,
-      $isMultiSelectCountAtZero: isMultiSelectCountAtZero,
-      children: /* @__PURE__ */ jsx(
-        Select$1,
-        {
-          ...rest,
-          size,
-          defaultValue,
-          $variant: variant,
-          suffixIcon: /* @__PURE__ */ jsx(DropdownChevron, {}),
-          dropdownRender: customDropdownRender,
-          onFocus: () => setIsFocused(true),
-          onBlur: () => setIsFocused(false),
-          onChange: (value2) => {
-            setIsFocused(false);
-            onChange == null ? void 0 : onChange(value2);
-          },
-          style: { width }
-        }
-      )
+      disabled,
+      onFocus: () => !disabled && setIsFocused(true),
+      onBlur: () => !isOpen && setIsFocused(false),
+      tabIndex: disabled ? -1 : 0,
+      children: [
+        /* @__PURE__ */ jsx(
+          SelectTrigger,
+          {
+            theme,
+            type,
+            state,
+            value: modeValue,
+            placeholder,
+            open: isOpen,
+            onClick: handleTriggerClick,
+            options,
+            disabled,
+            variant
+          }
+        ),
+        isOpen && !disabled && /* @__PURE__ */ jsx(
+          SelectDropdown,
+          {
+            type,
+            state,
+            className: dropdownAnimation,
+            style: {
+              position: "absolute",
+              top: "calc(100% + 4px)",
+              left: 0,
+              right: 0,
+              zIndex: 1e3,
+              backgroundColor: "white",
+              boxShadow: "0 2px 8px rgba(0, 0, 0, 0.15)",
+              border: "1px solid #d9d9d9",
+              transformOrigin: "top"
+            },
+            children: options.map((option) => {
+              const isSelected = Array.isArray(value) ? value.map(String).includes(option.value) : String(value) === option.value;
+              return /* @__PURE__ */ jsxs(
+                MenuItem,
+                {
+                  onClick: () => handleOptionSelect(option.value),
+                  $isSelected: isSelected,
+                  type,
+                  disabled,
+                  children: [
+                    option.label,
+                    isSelected && /* @__PURE__ */ jsx("span", { style: { marginLeft: "8px" }, children: "✓" })
+                  ]
+                },
+                option.value
+              );
+            })
+          }
+        )
+      ]
     }
   ) });
 };

package/dist/components/Select/SelectTrigger.cjs

@@ -0,0 +1,131 @@
+"use strict";
+var jsxRuntime = require("react/jsx-runtime");
+var React = require("react");
+var styled = require("styled-components");
+var DropdownChevron = require("../shared/DropdownChevron.cjs");
+var Typography = require("../Typography/Typography.cjs");
+const getBackgroundColor = (colors, disabled, $variant) => {
+  if ($variant === "simple") return "#F4F4F4";
+  if (disabled) return "#F4F4F4";
+  return "#fff";
+};
+const TriggerWrapper = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  cursor: ${({ $disabled }) => $disabled ? "not-allowed" : "pointer"};
+  opacity: ${({ $disabled }) => $disabled ? 0.4 : 1};
+  position: relative;
+  box-shadow: ${({ $variant }) => $variant === "simple" ? "none" : "0px 1px 2px 0px rgba(0, 0, 0, 0.12)"};
+  transition: all 0.2s ease-in-out;
+  min-height: ${({ $variant }) => $variant === "simple" ? "32px" : "40px"};
+
+  &:focus-visible {
+    outline: none;
+  }
+
+  &:focus {
+    box-shadow:
+      0px 1px 2px 0px rgba(0, 0, 0, 0.12),
+      0 0 0 3px
+        ${({ theme, $themeType = "primary" }) => theme.colors[$themeType].focussed.ringColor};
+  }
+
+  ${({ $variant, theme, $disabled }) => {
+  var _a;
+  return $variant === "simple" ? `
+    padding: ${theme.sizing.Size1} ${theme.sizing.Size2};
+    background: ${$disabled ? theme.colors.inputs.surface.disabled : "rgba(0, 0, 0, 0.04)"};
+    border: none;
+    border-radius: ${theme.borderRadius.BorderRadiusSm}px;
+    min-height: ${({ $variant: $variant2 }) => $variant2 === "simple" ? "32px" : "40px"};
+
+    &:hover {
+      border: none;
+    }
+    ` : `
+    padding: ${theme.sizing.Size1} ${theme.sizing.Size2};
+    background: ${$disabled ? theme.colors.inputs.surface.disabled : (_a = theme.colors.surface.default) == null ? void 0 : _a.backgroundColor};
+    border: 1px solid #9a9a9a;
+    border-radius: ${theme.borderRadius.BorderRadiusSm}px;
+    min-height: ${({ $variant: $variant2 }) => $variant2 === "simple" ? "32px" : "40px"};
+
+    &:hover {
+      border-color: rgba(0, 0, 0, 0.2);
+    }
+  `;
+}}
+`;
+const ValueContainer = styled.div`
+  display: flex;
+  align-items: center;
+  gap: ${({ theme }) => theme.sizing.Size2}px;
+  flex: 1;
+  padding: 4px 8px;
+`;
+const ChevronContainer = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-right: ${({ $variant }) => $variant === "simple" ? "4px" : "4px"};
+  margin-left: ${({ $variant }) => $variant === "simple" ? "4px" : "0"};
+`;
+const SelectTrigger = ({
+  type = "primary",
+  theme,
+  state,
+  value,
+  placeholder = "Select...",
+  open,
+  onClick,
+  renderValue,
+  options = [],
+  disabled = false,
+  variant = "none"
+}) => {
+  const handleClick = React.useCallback(() => {
+    if (disabled) return;
+    onClick == null ? void 0 : onClick();
+  }, [disabled, onClick]);
+  const displayValue = React.useMemo(() => {
+    if (!value) return null;
+    if (renderValue) return renderValue(value);
+    if (Array.isArray(value)) {
+      if (value.length === 0) return null;
+      const selectedLabels = value.map(String).map((v) => {
+        var _a;
+        return (_a = options.find((opt) => opt.value === v)) == null ? void 0 : _a.label;
+      }).filter(Boolean);
+      return selectedLabels.length > 0 ? selectedLabels.join(", ") : `${value.length} selected`;
+    }
+    const selectedOption = options.find((opt) => opt.value === String(value));
+    return (selectedOption == null ? void 0 : selectedOption.label) || value.toString();
+  }, [value, renderValue, options]);
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    TriggerWrapper,
+    {
+      $themeType: type,
+      $state: state,
+      onClick: handleClick,
+      tabIndex: disabled ? -1 : 0,
+      role: "button",
+      $disabled: disabled,
+      $variant: variant,
+      style: {
+        backgroundColor: getBackgroundColor(theme, disabled, variant)
+      },
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(ValueContainer, { $variant: variant, children: displayValue ? /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "body2", color: disabled ? "copy-light" : "copy", children: displayValue }) : /* @__PURE__ */ jsxRuntime.jsx(
+          Typography,
+          {
+            variant: "body2",
+            color: disabled ? "copy-light" : "copy-light",
+            children: placeholder
+          }
+        ) }),
+        /* @__PURE__ */ jsxRuntime.jsx(ChevronContainer, { $variant: variant, children: /* @__PURE__ */ jsxRuntime.jsx(DropdownChevron, {}) })
+      ]
+    }
+  );
+};
+module.exports = SelectTrigger;

package/dist/components/Select/SelectTrigger.d.ts

@@ -0,0 +1,23 @@
+import { default as React } from 'react';
+import { STATE } from '../../constants';
+import { GenesisTheme } from '../../styles/theme/genesis-theme.types';
+type ThemeType = "primary" | "secondary" | "tertiary" | "destructive" | "utility" | "icon";
+type Variant = "none" | "simple";
+interface SelectTriggerProperties {
+    type?: ThemeType;
+    theme?: GenesisTheme;
+    state?: keyof typeof STATE;
+    value?: string[] | string | number[] | number;
+    placeholder?: string;
+    open?: boolean;
+    onClick?: () => void;
+    renderValue?: (value: any) => React.ReactNode;
+    options?: {
+        value: string;
+        label: React.ReactNode;
+    }[];
+    disabled?: boolean;
+    variant?: Variant;
+}
+declare const SelectTrigger: React.FC<SelectTriggerProperties>;
+export default SelectTrigger;

package/dist/components/Select/SelectTrigger.js

@@ -0,0 +1,132 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import React__default from "react";
+import styled from "styled-components";
+import DropdownChevron from "../shared/DropdownChevron.js";
+import Typography from "../Typography/Typography.js";
+const getBackgroundColor = (colors, disabled, $variant) => {
+  if ($variant === "simple") return "#F4F4F4";
+  if (disabled) return "#F4F4F4";
+  return "#fff";
+};
+const TriggerWrapper = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  cursor: ${({ $disabled }) => $disabled ? "not-allowed" : "pointer"};
+  opacity: ${({ $disabled }) => $disabled ? 0.4 : 1};
+  position: relative;
+  box-shadow: ${({ $variant }) => $variant === "simple" ? "none" : "0px 1px 2px 0px rgba(0, 0, 0, 0.12)"};
+  transition: all 0.2s ease-in-out;
+  min-height: ${({ $variant }) => $variant === "simple" ? "32px" : "40px"};
+
+  &:focus-visible {
+    outline: none;
+  }
+
+  &:focus {
+    box-shadow:
+      0px 1px 2px 0px rgba(0, 0, 0, 0.12),
+      0 0 0 3px
+        ${({ theme, $themeType = "primary" }) => theme.colors[$themeType].focussed.ringColor};
+  }
+
+  ${({ $variant, theme, $disabled }) => {
+  var _a;
+  return $variant === "simple" ? `
+    padding: ${theme.sizing.Size1} ${theme.sizing.Size2};
+    background: ${$disabled ? theme.colors.inputs.surface.disabled : "rgba(0, 0, 0, 0.04)"};
+    border: none;
+    border-radius: ${theme.borderRadius.BorderRadiusSm}px;
+    min-height: ${({ $variant: $variant2 }) => $variant2 === "simple" ? "32px" : "40px"};
+
+    &:hover {
+      border: none;
+    }
+    ` : `
+    padding: ${theme.sizing.Size1} ${theme.sizing.Size2};
+    background: ${$disabled ? theme.colors.inputs.surface.disabled : (_a = theme.colors.surface.default) == null ? void 0 : _a.backgroundColor};
+    border: 1px solid #9a9a9a;
+    border-radius: ${theme.borderRadius.BorderRadiusSm}px;
+    min-height: ${({ $variant: $variant2 }) => $variant2 === "simple" ? "32px" : "40px"};
+
+    &:hover {
+      border-color: rgba(0, 0, 0, 0.2);
+    }
+  `;
+}}
+`;
+const ValueContainer = styled.div`
+  display: flex;
+  align-items: center;
+  gap: ${({ theme }) => theme.sizing.Size2}px;
+  flex: 1;
+  padding: 4px 8px;
+`;
+const ChevronContainer = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-right: ${({ $variant }) => $variant === "simple" ? "4px" : "4px"};
+  margin-left: ${({ $variant }) => $variant === "simple" ? "4px" : "0"};
+`;
+const SelectTrigger = ({
+  type = "primary",
+  theme,
+  state,
+  value,
+  placeholder = "Select...",
+  open,
+  onClick,
+  renderValue,
+  options = [],
+  disabled = false,
+  variant = "none"
+}) => {
+  const handleClick = React__default.useCallback(() => {
+    if (disabled) return;
+    onClick == null ? void 0 : onClick();
+  }, [disabled, onClick]);
+  const displayValue = React__default.useMemo(() => {
+    if (!value) return null;
+    if (renderValue) return renderValue(value);
+    if (Array.isArray(value)) {
+      if (value.length === 0) return null;
+      const selectedLabels = value.map(String).map((v) => {
+        var _a;
+        return (_a = options.find((opt) => opt.value === v)) == null ? void 0 : _a.label;
+      }).filter(Boolean);
+      return selectedLabels.length > 0 ? selectedLabels.join(", ") : `${value.length} selected`;
+    }
+    const selectedOption = options.find((opt) => opt.value === String(value));
+    return (selectedOption == null ? void 0 : selectedOption.label) || value.toString();
+  }, [value, renderValue, options]);
+  return /* @__PURE__ */ jsxs(
+    TriggerWrapper,
+    {
+      $themeType: type,
+      $state: state,
+      onClick: handleClick,
+      tabIndex: disabled ? -1 : 0,
+      role: "button",
+      $disabled: disabled,
+      $variant: variant,
+      style: {
+        backgroundColor: getBackgroundColor(theme, disabled, variant)
+      },
+      children: [
+        /* @__PURE__ */ jsx(ValueContainer, { $variant: variant, children: displayValue ? /* @__PURE__ */ jsx(Typography, { variant: "body2", color: disabled ? "copy-light" : "copy", children: displayValue }) : /* @__PURE__ */ jsx(
+          Typography,
+          {
+            variant: "body2",
+            color: disabled ? "copy-light" : "copy-light",
+            children: placeholder
+          }
+        ) }),
+        /* @__PURE__ */ jsx(ChevronContainer, { $variant: variant, children: /* @__PURE__ */ jsx(DropdownChevron, {}) })
+      ]
+    }
+  );
+};
+export {
+  SelectTrigger as default
+};

package/dist/components/Select/__stories__/Select.stories.d.ts

@@ -3,8 +3,9 @@ import { default as Select } from '../Select';
 declare const meta: Meta<typeof Select>;
 export default meta;
 type Story = StoryObj<typeof Select>;
-export declare const Default: Story;
-export declare const DefaultSelectedValue: Story;
-export declare const Focussed: Story;
+export declare const Count: Story;
+export declare const Options: Story;
+export declare const SingleSelect: Story;
+export declare const SingleSelectWithinGreyParentContainer: Story;
 export declare const Disabled: Story;
 export declare const Simple: Story;

package/dist/components/Select/index.d.ts

@@ -1,4 +1,2 @@
 export { default } from './Select';
 export type { SelectProps } from './Select';
-export { default as MultiSelectCount } from './MultiSelectCount';
-export type { MultiSelectCountProps } from './MultiSelectCount';

package/dist/components/Switch/styles.d.ts

@@ -1,8 +1,8 @@
 import { GenesisTheme } from '../../styles/theme/genesis-theme.types';
-interface StyledSwitchProps extends React.HTMLAttributes<HTMLButtonElement> {
+interface StyledSwitchProperties extends React.HTMLAttributes<HTMLButtonElement> {
     theme?: GenesisTheme;
 }
 export declare const Switch: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<Omit<import('antd').SwitchProps & import('react').RefAttributes<HTMLButtonElement>, "ref"> & {
     ref?: import('react').Ref<HTMLButtonElement>;
-}, StyledSwitchProps>> & string & Omit<import('react').ForwardRefExoticComponent<import('antd').SwitchProps & import('react').RefAttributes<HTMLButtonElement>>, keyof import('react').Component<any, {}, any>>;
+}, StyledSwitchProperties>> & string & Omit<import('react').ForwardRefExoticComponent<import('antd').SwitchProps & import('react').RefAttributes<HTMLButtonElement>>, keyof import('react').Component<any, {}, any>>;
 export default Switch;

package/dist/components/Table/Table.cjs

@@ -1,14 +1,30 @@
 "use strict";
 var jsxRuntime = require("react/jsx-runtime");
 var styles = require("./styles.cjs");
+var CustomPagination = require("./TableControls/CustomPagination.cjs");
 function Table({
   columns,
   dataSource,
   rowKey = "id",
   size = "small",
   onChange,
-  rowSelection
+  rowSelection,
+  pagination,
+  isMainContentCell = false,
+  ...rest
 }) {
+  const paginationConfig = pagination === false ? false : {
+    ...pagination,
+    itemRender: void 0,
+    // Clear any existing itemRender to avoid conflicts
+    render: (properties) => /* @__PURE__ */ jsxRuntime.jsx(
+      CustomPagination.default,
+      {
+        ...properties,
+        paginationStyle: (pagination == null ? void 0 : pagination.paginationStyle) || CustomPagination.PaginationStyle.SIMPLE
+      }
+    )
+  };
   return /* @__PURE__ */ jsxRuntime.jsx(
     styles.Table,
     {
@@ -19,7 +35,10 @@ function Table({
       locale: { emptyText: "No Data" },
       size,
       onChange,
-      rowSelection
+      rowSelection,
+      pagination: paginationConfig,
+      $isMainContentCell: isMainContentCell,
+      ...rest
     }
   );
 }

package/dist/components/Table/Table.d.ts

@@ -1,4 +1,5 @@
-import { ColumnType } from 'antd/es/table';
+import { ColumnType, TablePaginationConfig } from 'antd/es/table';
+import { PaginationStyle } from './TableControls/CustomPagination';
 import * as React from "react";
 export type ActionEvent = {
     event: string;
@@ -22,7 +23,9 @@ export interface TableProps<T extends Record<string, any>> {
     };
     onChange?: (pagination: TablePaginationType, filters: Record<string, React.Key[]>, sorter: SorterResult<T> | SorterResult<T>[]) => void;
     loading?: boolean;
-    pagination?: TablePaginationType | false;
+    pagination?: (TablePaginationConfig & {
+        paginationStyle?: PaginationStyle;
+    }) | false;
     scroll?: {
         x?: number | string;
         y?: number | string;
@@ -32,6 +35,7 @@ export interface TableProps<T extends Record<string, any>> {
         emptyText?: React.ReactNode;
     };
     [key: string]: any;
+    isMainContentCell?: boolean;
 }
 export type TablePaginationType = {
     pageSize?: number;
@@ -45,5 +49,5 @@ export type SorterResult<T> = {
     field?: keyof T | string | React.Key | readonly React.Key[];
     columnKey?: React.Key;
 };
-declare function Table<T extends Record<string, any>>({ columns, dataSource, rowKey, size, onChange, rowSelection, }: TableProps<T>): import("react/jsx-runtime").JSX.Element;
+declare function Table<T extends Record<string, any>>({ columns, dataSource, rowKey, size, onChange, rowSelection, pagination, isMainContentCell, ...rest }: TableProps<T>): import("react/jsx-runtime").JSX.Element;
 export default Table;