@zendeskgarden/react-tables 9.0.0-next.7 → 9.0.0-next.8

package/dist/esm/styled/StyledCell.js

@@ -0,0 +1,47 @@
+/**
+* Copyright Zendesk, Inc.
+*
+* Use of this source code is governed under the Apache License, Version 2.0
+* found at http://www.apache.org/licenses/LICENSE-2.0.
+*/
+import styled, { css } from 'styled-components';
+import { math } from 'polished';
+import { retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgarden/react-theming';
+import { getLineHeight } from './StyledTable.js';
+import { getRowHeight } from './style-utils.js';
+
+const COMPONENT_ID = 'tables.cell';
+const truncatedStyling = css(["overflow:hidden;text-overflow:ellipsis;white-space:nowrap;"]);
+const sizeStyling = props => {
+  let boxSizing = 'border-box';
+  let padding;
+  let width = props.width;
+  let height;
+  if (props.hasOverflow) {
+    boxSizing = 'content-box';
+    width = '2em';
+    height = 'inherit';
+    padding = props.theme.rtl ? `0 0 0 ${props.theme.space.base}px` : `0 ${props.theme.space.base}px 0 0`;
+  } else {
+    const paddingVertical = math(`(${getRowHeight(props)} - ${getLineHeight(props)}) / 2`);
+    const paddingHorizontal = `${props.theme.space.base * 3}px`;
+    padding = `${paddingVertical} ${paddingHorizontal}`;
+  }
+  if (props.isMinimum) {
+    boxSizing = 'content-box';
+    width = '1em';
+  }
+  return css(["box-sizing:", ";padding:", ";width:", ";height:", ";"], boxSizing, padding, width, height);
+};
+const StyledCell = styled.td.attrs({
+  'data-garden-id': COMPONENT_ID,
+  'data-garden-version': '9.0.0-next.8'
+}).withConfig({
+  displayName: "StyledCell",
+  componentId: "sc-8hpncx-0"
+})(["display:table-cell;transition:border-color 0.25s ease-in-out,box-shadow 0.1s ease-in-out;", ";", ";", ";"], props => sizeStyling(props), props => props.isTruncated && truncatedStyling, props => retrieveComponentStyles(COMPONENT_ID, props));
+StyledCell.defaultProps = {
+  theme: DEFAULT_THEME
+};
+
+export { StyledCell };

package/dist/esm/styled/StyledGroupRow.js

@@ -0,0 +1,31 @@
+/**
+* Copyright Zendesk, Inc.
+*
+* Use of this source code is governed under the Apache License, Version 2.0
+* found at http://www.apache.org/licenses/LICENSE-2.0.
+*/
+import styled, { css } from 'styled-components';
+import { math } from 'polished';
+import { getColorV8, retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgarden/react-theming';
+import { StyledBaseRow } from './StyledRow.js';
+import { StyledCell } from './StyledCell.js';
+import { getLineHeight } from './StyledTable.js';
+
+const COMPONENT_ID = 'tables.group_row';
+const sizeStyles = props => {
+  const height = `${props.theme.space.base * 8}px`;
+  const lineHeight = getLineHeight(props);
+  return css(["height:", ";line-height:", ";font-size:", ";", "{padding:", " ", "px;}"], height, lineHeight, props.theme.fontSizes.sm, StyledCell, math(`(${height} - ${lineHeight}) / 2`), props.theme.space.base * 3);
+};
+const StyledGroupRow = styled(StyledBaseRow).attrs({
+  'data-garden-id': COMPONENT_ID,
+  'data-garden-version': '9.0.0-next.8'
+}).withConfig({
+  displayName: "StyledGroupRow",
+  componentId: "sc-mpd0r8-0"
+})(["background-color:", ";", " ", ";"], props => getColorV8('neutralHue', 100, props.theme), props => sizeStyles(props), props => retrieveComponentStyles(COMPONENT_ID, props));
+StyledGroupRow.defaultProps = {
+  theme: DEFAULT_THEME
+};
+
+export { StyledGroupRow };

package/dist/esm/styled/StyledHead.js

@@ -0,0 +1,27 @@
+/**
+* Copyright Zendesk, Inc.
+*
+* Use of this source code is governed under the Apache License, Version 2.0
+* found at http://www.apache.org/licenses/LICENSE-2.0.
+*/
+import styled, { css } from 'styled-components';
+import { retrieveComponentStyles, DEFAULT_THEME, getColorV8 } from '@zendeskgarden/react-theming';
+import { StyledHeaderRow } from './StyledHeaderRow.js';
+
+const COMPONENT_ID = 'tables.head';
+const stickyStyles = props => {
+  const borderColor = getColorV8('neutralHue', 300, props.theme);
+  return css(["position:sticky;top:0;z-index:1;box-shadow:inset 0 -", " 0 ", ";background-color:", ";& > ", ":last-child{border-bottom-color:transparent;}"], props.theme.borderWidths.sm, borderColor, getColorV8('background', 600 , props.theme), StyledHeaderRow);
+};
+const StyledHead = styled.thead.attrs({
+  'data-garden-id': COMPONENT_ID,
+  'data-garden-version': '9.0.0-next.8'
+}).withConfig({
+  displayName: "StyledHead",
+  componentId: "sc-spf23a-0"
+})(["", " ", ";"], props => props.isSticky && stickyStyles(props), props => retrieveComponentStyles(COMPONENT_ID, props));
+StyledHead.defaultProps = {
+  theme: DEFAULT_THEME
+};
+
+export { StyledHead };

package/dist/esm/styled/StyledHeaderCell.js

@@ -0,0 +1,44 @@
+/**
+* Copyright Zendesk, Inc.
+*
+* Use of this source code is governed under the Apache License, Version 2.0
+* found at http://www.apache.org/licenses/LICENSE-2.0.
+*/
+import styled, { css } from 'styled-components';
+import { math } from 'polished';
+import { retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgarden/react-theming';
+import { StyledCell } from './StyledCell.js';
+import { StyledSortableButton } from './StyledSortableButton.js';
+import { getLineHeight } from './StyledTable.js';
+import { getRowHeight } from './style-utils.js';
+
+const COMPONENT_ID = 'tables.header_cell';
+const truncatedStyling = css(["", "{max-width:100%;overflow:hidden;text-overflow:ellipsis;}"], StyledSortableButton);
+const sizeStyles = props => {
+  let paddingVertical = undefined;
+  if (!props.hasOverflow) {
+    paddingVertical = math(`(${getRowHeight(props)} - ${getLineHeight(props)}) / 2`);
+  }
+  return css(["padding-top:", ";padding-bottom:", ";"], paddingVertical, paddingVertical);
+};
+const StyledHeaderCell = styled(StyledCell).attrs({
+  as: 'th',
+  'data-garden-id': COMPONENT_ID,
+  'data-garden-version': '9.0.0-next.8'
+}).withConfig({
+  displayName: "StyledHeaderCell",
+  componentId: "sc-fzagoe-0"
+})(["text-align:", ";font-weight:inherit;", " ", " ", ";"], props => {
+  if (!props.hasOverflow) {
+    if (props.theme.rtl) {
+      return 'right';
+    }
+    return 'left';
+  }
+  return undefined;
+}, props => sizeStyles(props), props => props.isTruncated && truncatedStyling, props => retrieveComponentStyles(COMPONENT_ID, props));
+StyledHeaderCell.defaultProps = {
+  theme: DEFAULT_THEME
+};
+
+export { StyledHeaderCell };

package/dist/esm/styled/StyledHeaderRow.js

@@ -0,0 +1,33 @@
+/**
+* Copyright Zendesk, Inc.
+*
+* Use of this source code is governed under the Apache License, Version 2.0
+* found at http://www.apache.org/licenses/LICENSE-2.0.
+*/
+import styled from 'styled-components';
+import { math } from 'polished';
+import { getColorV8, retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgarden/react-theming';
+import { StyledBaseRow } from './StyledRow.js';
+import { StyledOverflowButton } from './StyledOverflowButton.js';
+
+const COMPONENT_ID = 'tables.header_row';
+const getHeaderRowHeight = props => {
+  if (props.size === 'large') {
+    return `${props.theme.space.base * 18}px`;
+  } else if (props.size === 'small') {
+    return `${props.theme.space.base * 10}px`;
+  }
+  return `${props.theme.space.base * 12}px`;
+};
+const StyledHeaderRow = styled(StyledBaseRow).attrs({
+  'data-garden-id': COMPONENT_ID,
+  'data-garden-version': '9.0.0-next.8'
+}).withConfig({
+  displayName: "StyledHeaderRow",
+  componentId: "sc-16ogvdx-0"
+})(["border-bottom-color:", ";height:", ";vertical-align:bottom;font-weight:", ";", "{opacity:1;margin-top:0;margin-bottom:calc(", " - 1em);}", ";"], props => getColorV8('neutralHue', 300, props.theme), getHeaderRowHeight, props => props.theme.fontWeights.semibold, StyledOverflowButton, props => math(`${getHeaderRowHeight(props)} / 2`), props => retrieveComponentStyles(COMPONENT_ID, props));
+StyledHeaderRow.defaultProps = {
+  theme: DEFAULT_THEME
+};
+
+export { StyledHeaderRow };

package/dist/esm/styled/StyledHiddenCell.js

@@ -0,0 +1,23 @@
+/**
+* Copyright Zendesk, Inc.
+*
+* Use of this source code is governed under the Apache License, Version 2.0
+* found at http://www.apache.org/licenses/LICENSE-2.0.
+*/
+import styled from 'styled-components';
+import { hideVisually } from 'polished';
+import { retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgarden/react-theming';
+
+const COMPONENT_ID = 'tables.hidden_cell';
+const StyledHiddenCell = styled.div.attrs({
+  'data-garden-id': COMPONENT_ID,
+  'data-garden-version': '9.0.0-next.8'
+}).withConfig({
+  displayName: "StyledHiddenCell",
+  componentId: "sc-1x454xw-0"
+})(["", " ", ";"], hideVisually(), props => retrieveComponentStyles(COMPONENT_ID, props));
+StyledHiddenCell.defaultProps = {
+  theme: DEFAULT_THEME
+};
+
+export { StyledHiddenCell };

package/dist/esm/styled/StyledOverflowButton.js

@@ -0,0 +1,51 @@
+/**
+* Copyright Zendesk, Inc.
+*
+* Use of this source code is governed under the Apache License, Version 2.0
+* found at http://www.apache.org/licenses/LICENSE-2.0.
+*/
+import styled, { css } from 'styled-components';
+import { math } from 'polished';
+import { retrieveComponentStyles, DEFAULT_THEME, getColorV8, focusStyles } from '@zendeskgarden/react-theming';
+import { getRowHeight } from './style-utils.js';
+
+const COMPONENT_ID = 'tables.overflow_button';
+const OVERFLOW_BUTTON_SIZE = '2em';
+const colorStyles = props => {
+  const hoverBackgroundColor = getColorV8('primaryHue', 600, props.theme, 0.08);
+  const hoverForegroundColor = getColorV8('neutralHue', 700, props.theme);
+  const activeBackgroundColor = getColorV8('primaryHue', 600, props.theme, 0.2);
+  const activeForegroundColor = getColorV8('neutralHue', 800, props.theme);
+  let foregroundColor;
+  if (props.isHovered) {
+    foregroundColor = hoverForegroundColor;
+  } else if (props.isActive) {
+    foregroundColor = activeForegroundColor;
+  } else {
+    foregroundColor = getColorV8('neutralHue', 600, props.theme);
+  }
+  return css(["color:", ";&:hover{background-color:", ";color:", ";}", " &:active{background-color:", ";color:", ";}"], foregroundColor, hoverBackgroundColor, hoverForegroundColor, focusStyles({
+    theme: props.theme,
+    inset: true
+  }), activeBackgroundColor, activeForegroundColor);
+};
+const StyledOverflowButton = styled.button.attrs({
+  'data-garden-id': COMPONENT_ID,
+  'data-garden-version': '9.0.0-next.8',
+  type: 'button'
+}).withConfig({
+  displayName: "StyledOverflowButton",
+  componentId: "sc-1eba2ml-0"
+})(["display:block;transition:background-color 0.1s ease-in-out,box-shadow 0.1s ease-in-out;z-index:", ";margin-top:calc(", " - 1em);border:none;border-radius:50%;background-color:transparent;cursor:pointer;padding:0;width:100%;height:", ";text-decoration:none;font-size:inherit;", " ", ";"], props => props.isActive ? '1' : '0', props => math(`${getRowHeight(props)} / 2`), OVERFLOW_BUTTON_SIZE, props => colorStyles(props), props => retrieveComponentStyles(COMPONENT_ID, props));
+StyledOverflowButton.defaultProps = {
+  theme: DEFAULT_THEME
+};
+const StyledOverflowButtonIconWrapper = styled.div.withConfig({
+  displayName: "StyledOverflowButton__StyledOverflowButtonIconWrapper",
+  componentId: "sc-1eba2ml-1"
+})(["display:flex;align-items:center;justify-content:center;transform:rotate(90deg);transition:background-color 0.1s ease-in-out;width:", ";height:", ";"], OVERFLOW_BUTTON_SIZE, OVERFLOW_BUTTON_SIZE);
+StyledOverflowButtonIconWrapper.defaultProps = {
+  theme: DEFAULT_THEME
+};
+
+export { StyledOverflowButton, StyledOverflowButtonIconWrapper };

package/dist/esm/styled/StyledRow.js

@@ -0,0 +1,62 @@
+/**
+* Copyright Zendesk, Inc.
+*
+* Use of this source code is governed under the Apache License, Version 2.0
+* found at http://www.apache.org/licenses/LICENSE-2.0.
+*/
+import styled, { css } from 'styled-components';
+import { getColorV8, DEFAULT_THEME, retrieveComponentStyles } from '@zendeskgarden/react-theming';
+import { StyledCell } from './StyledCell.js';
+import { StyledOverflowButton } from './StyledOverflowButton.js';
+import { getRowHeight } from './style-utils.js';
+
+const COMPONENT_ID = 'tables.row';
+const StyledBaseRow = styled.tr.withConfig({
+  displayName: "StyledRow__StyledBaseRow",
+  componentId: "sc-ek66ow-0"
+})(["display:table-row;transition:background-color 0.1s ease-in-out;border-bottom:", ";background-color:", ";vertical-align:top;box-sizing:border-box;"], props => `${props.theme.borders.sm} ${getColorV8('neutralHue', 200, props.theme)}`, props => props.isStriped && getColorV8('neutralHue', 100, props.theme));
+StyledBaseRow.defaultProps = {
+  theme: DEFAULT_THEME
+};
+const colorStyles = props => {
+  const boxShadow = `inset ${props.theme.rtl ? '-' : ''}${props.theme.shadowWidths.md} 0 0 0 ${getColorV8('primaryHue', 600, props.theme)}`;
+  const hoveredBackgroundColor = getColorV8('primaryHue', 600, props.theme, 0.08);
+  const hoveredBorderColor = getColorV8('primaryHue', 200, props.theme);
+  const selectedBackgroundColor = getColorV8('primaryHue', 600, props.theme, 0.2);
+  const selectedBorderColor = getColorV8('primaryHue', 300, props.theme);
+  const hoveredSelectedBackgroundColor = getColorV8('primaryHue', 600, props.theme, 0.28);
+  let backgroundColor = undefined;
+  let borderColor = undefined;
+  let hoverBorderBottomColor = undefined;
+  let hoverBackgroundColor = undefined;
+  if (props.isSelected) {
+    if (props.isHovered) {
+      backgroundColor = hoveredSelectedBackgroundColor;
+    } else {
+      backgroundColor = selectedBackgroundColor;
+    }
+    borderColor = selectedBorderColor;
+    hoverBorderBottomColor = selectedBorderColor;
+    hoverBackgroundColor = hoveredSelectedBackgroundColor;
+  } else if (props.isHovered) {
+    backgroundColor = hoveredBackgroundColor;
+    borderColor = hoveredBorderColor;
+  } else if (!props.isReadOnly) {
+    hoverBorderBottomColor = hoveredBorderColor;
+    hoverBackgroundColor = hoveredBackgroundColor;
+  }
+  return css(["border-bottom-color:", ";background-color:", ";&:hover{border-bottom-color:", ";background-color:", ";", "{opacity:1;}}&:focus{outline:none;}", ":first-of-type{box-shadow:", ";&:focus{box-shadow:", ";}}"], borderColor, backgroundColor, hoverBorderBottomColor, hoverBackgroundColor, StyledOverflowButton, StyledCell, props.isFocused && boxShadow, boxShadow);
+};
+const StyledRow = styled(StyledBaseRow).attrs(props => ({
+  'data-garden-id': COMPONENT_ID,
+  'data-garden-version': '9.0.0-next.8',
+  tabIndex: props.isReadOnly ? undefined : -1
+})).withConfig({
+  displayName: "StyledRow",
+  componentId: "sc-ek66ow-1"
+})(["height:", ";", " ", ";"], getRowHeight, props => colorStyles(props), props => retrieveComponentStyles(COMPONENT_ID, props));
+StyledRow.defaultProps = {
+  theme: DEFAULT_THEME
+};
+
+export { StyledBaseRow, StyledRow };

package/dist/esm/styled/StyledSortableButton.js

@@ -0,0 +1,81 @@
+/**
+* Copyright Zendesk, Inc.
+*
+* Use of this source code is governed under the Apache License, Version 2.0
+* found at http://www.apache.org/licenses/LICENSE-2.0.
+*/
+import styled from 'styled-components';
+import { math } from 'polished';
+import { DEFAULT_THEME, getColorV8, SELECTOR_FOCUS_VISIBLE, focusStyles, retrieveComponentStyles } from '@zendeskgarden/react-theming';
+
+const COMPONENT_ID = 'tables.sortable';
+const StyledBaseIconWrapper = styled.div.withConfig({
+  displayName: "StyledSortableButton__StyledBaseIconWrapper",
+  componentId: "sc-2s1dli-0"
+})(["display:flex;position:absolute;top:0;", ":0;align-items:center;justify-content:center;opacity:0;width:", ";height:100%;color:inherit;fill:inherit;"], props => props.theme.rtl ? 'left' : 'right', props => props.theme.iconSizes.sm);
+StyledBaseIconWrapper.defaultProps = {
+  theme: DEFAULT_THEME
+};
+const StyledSortableStrokeIconWrapper = styled(StyledBaseIconWrapper).withConfig({
+  displayName: "StyledSortableButton__StyledSortableStrokeIconWrapper",
+  componentId: "sc-2s1dli-1"
+})([""]);
+StyledSortableStrokeIconWrapper.defaultProps = {
+  theme: DEFAULT_THEME
+};
+const StyledSortableFillIconWrapper = styled(StyledBaseIconWrapper).withConfig({
+  displayName: "StyledSortableButton__StyledSortableFillIconWrapper",
+  componentId: "sc-2s1dli-2"
+})([""]);
+StyledSortableFillIconWrapper.defaultProps = {
+  theme: DEFAULT_THEME
+};
+const StyledSortableButton = styled.button.attrs({
+  'data-garden-id': COMPONENT_ID,
+  'data-garden-version': '9.0.0-next.8',
+  type: 'button'
+}).withConfig({
+  displayName: "StyledSortableButton",
+  componentId: "sc-2s1dli-3"
+})(["position:relative;transition:box-shadow 0.1s ease-in-out;border:none;border-radius:", ";background-color:transparent;cursor:pointer;padding:0;padding-", ":", ";width:", ";text-decoration:none;color:inherit;font-family:inherit;font-size:inherit;font-weight:", ";", "{opacity:", ";}", "{opacity:", ";color:", ";fill:", ";}&:hover,", "{text-decoration:none;color:", ";", ";", " ", "}", " ", ";"], props => props.theme.borderRadii.sm, props => props.theme.rtl ? 'left' : 'right', props => math(`${props.theme.space.base} + ${props.theme.iconSizes.sm}`), props => props.width, props => props.theme.fontWeights.semibold, StyledSortableStrokeIconWrapper, props => props.sort === undefined && 1, StyledSortableFillIconWrapper, props => props.sort !== undefined && 1, props => {
+  if (props.sort === 'asc') {
+    return getColorV8('neutralHue', 600, props.theme);
+  } else if (props.sort === 'desc') {
+    return getColorV8('neutralHue', 400, props.theme);
+  }
+  return undefined;
+}, props => {
+  if (props.sort === 'asc') {
+    return getColorV8('neutralHue', 400, props.theme);
+  } else if (props.sort === 'desc') {
+    return getColorV8('neutralHue', 600, props.theme);
+  }
+  return undefined;
+}, SELECTOR_FOCUS_VISIBLE, props => getColorV8('primaryHue', 600, props.theme), props => props.sort === undefined && `
+      ${StyledSortableFillIconWrapper} {
+        opacity: 1;
+        color: ${getColorV8('primaryHue', 600, props.theme)};
+        fill: ${getColorV8('primaryHue', 600, props.theme)};
+      }
+
+      ${StyledSortableStrokeIconWrapper} {
+        opacity: 0;
+      }
+    `, props => props.sort === 'asc' && `
+      ${StyledSortableFillIconWrapper} {
+        color: ${getColorV8('primaryHue', 600, props.theme)};
+        fill: ${getColorV8('primaryHue', 600, props.theme, 0.25)};
+      }
+    `, props => props.sort === 'desc' && `
+      ${StyledSortableFillIconWrapper} {
+        color: ${getColorV8('primaryHue', 600, props.theme, 0.25)};
+        fill: ${getColorV8('primaryHue', 600, props.theme)};
+      }
+    `, props => focusStyles({
+  theme: props.theme
+}), props => retrieveComponentStyles(COMPONENT_ID, props));
+StyledSortableButton.defaultProps = {
+  theme: DEFAULT_THEME
+};
+
+export { StyledSortableButton, StyledSortableFillIconWrapper, StyledSortableStrokeIconWrapper };

package/dist/esm/styled/StyledTable.js

@@ -0,0 +1,25 @@
+/**
+* Copyright Zendesk, Inc.
+*
+* Use of this source code is governed under the Apache License, Version 2.0
+* found at http://www.apache.org/licenses/LICENSE-2.0.
+*/
+import styled from 'styled-components';
+import { getColorV8, retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgarden/react-theming';
+
+const COMPONENT_ID = 'tables.table';
+const getLineHeight = props => {
+  return `${props.theme.space.base * 5}px`;
+};
+const StyledTable = styled.table.attrs({
+  'data-garden-id': COMPONENT_ID,
+  'data-garden-version': '9.0.0-next.8'
+}).withConfig({
+  displayName: "StyledTable",
+  componentId: "sc-gje7na-0"
+})(["display:table;border:none;width:100%;table-layout:fixed;border-collapse:collapse;border-spacing:0;line-height:", ";color:", ";font-size:", ";direction:", ";", ";"], props => getLineHeight(props), props => getColorV8('foreground', 600 , props.theme), props => props.theme.fontSizes.md, props => props.theme.rtl && 'rtl', props => retrieveComponentStyles(COMPONENT_ID, props));
+StyledTable.defaultProps = {
+  theme: DEFAULT_THEME
+};
+
+export { StyledTable, getLineHeight };

package/dist/esm/styled/style-utils.js

@@ -0,0 +1,16 @@
+/**
+* Copyright Zendesk, Inc.
+*
+* Use of this source code is governed under the Apache License, Version 2.0
+* found at http://www.apache.org/licenses/LICENSE-2.0.
+*/
+const getRowHeight = props => {
+  if (props.size === 'large') {
+    return `${props.theme.space.base * 16}px`;
+  } else if (props.size === 'small') {
+    return `${props.theme.space.base * 8}px`;
+  }
+  return `${props.theme.space.base * 10}px`;
+};
+
+export { getRowHeight };

package/dist/esm/types/index.js

@@ -0,0 +1,10 @@
+/**
+* Copyright Zendesk, Inc.
+*
+* Use of this source code is governed under the Apache License, Version 2.0
+* found at http://www.apache.org/licenses/LICENSE-2.0.
+*/
+const SIZE = ['small', 'medium', 'large'];
+const SORT = ['asc', 'desc'];
+
+export { SIZE, SORT };

package/dist/esm/utils/useTableContext.js

@@ -0,0 +1,17 @@
+/**
+* Copyright Zendesk, Inc.
+*
+* Use of this source code is governed under the Apache License, Version 2.0
+* found at http://www.apache.org/licenses/LICENSE-2.0.
+*/
+import React__default, { useContext } from 'react';
+
+const TableContext = React__default.createContext({
+  size: 'medium',
+  isReadOnly: false
+});
+const useTableContext = () => {
+  return useContext(TableContext);
+};
+
+export { TableContext, useTableContext };