@zendeskgarden/react-tables 8.60.0 → 8.62.0

package/dist/index.cjs.js

@@ -59,7 +59,7 @@ function _extends$3() {
 const COMPONENT_ID$a = 'tables.body';
 const StyledBody = styled__default["default"].tbody.attrs({
   'data-garden-id': COMPONENT_ID$a,
-  'data-garden-version': '8.60.0'
+  'data-garden-version': '8.62.0'
 }).withConfig({
   displayName: "StyledBody",
   componentId: "sc-14ud6y-0"
@@ -71,7 +71,7 @@ StyledBody.defaultProps = {
 const COMPONENT_ID$9 = 'tables.caption';
 const StyledCaption = styled__default["default"].caption.attrs({
   'data-garden-id': COMPONENT_ID$9,
-  'data-garden-version': '8.60.0'
+  'data-garden-version': '8.62.0'
 }).withConfig({
   displayName: "StyledCaption",
   componentId: "sc-113y327-0"
@@ -86,7 +86,7 @@ const getLineHeight = props => {
 };
 const StyledTable = styled__default["default"].table.attrs({
   'data-garden-id': COMPONENT_ID$8,
-  'data-garden-version': '8.60.0'
+  'data-garden-version': '8.62.0'
 }).withConfig({
   displayName: "StyledTable",
   componentId: "sc-gje7na-0"
@@ -129,7 +129,7 @@ const sizeStyling = props => {
 };
 const StyledCell = styled__default["default"].td.attrs({
   'data-garden-id': COMPONENT_ID$7,
-  'data-garden-version': '8.60.0'
+  'data-garden-version': '8.62.0'
 }).withConfig({
   displayName: "StyledCell",
   componentId: "sc-8hpncx-0"
@@ -158,7 +158,7 @@ const colorStyles$1 = props => {
 };
 const StyledOverflowButton = styled__default["default"].button.attrs({
   'data-garden-id': COMPONENT_ID$6,
-  'data-garden-version': '8.60.0',
+  'data-garden-version': '8.62.0',
   type: 'button'
 }).withConfig({
   displayName: "StyledOverflowButton",
@@ -214,7 +214,7 @@ const colorStyles = props => {
 };
 const StyledRow = styled__default["default"](StyledBaseRow).attrs(props => ({
   'data-garden-id': COMPONENT_ID$5,
-  'data-garden-version': '8.60.0',
+  'data-garden-version': '8.62.0',
   tabIndex: props.isReadOnly ? undefined : -1
 })).withConfig({
   displayName: "StyledRow",
@@ -235,7 +235,7 @@ const getHeaderRowHeight = props => {
 };
 const StyledHeaderRow = styled__default["default"](StyledBaseRow).attrs({
   'data-garden-id': COMPONENT_ID$4,
-  'data-garden-version': '8.60.0'
+  'data-garden-version': '8.62.0'
 }).withConfig({
   displayName: "StyledHeaderRow",
   componentId: "sc-16ogvdx-0"
@@ -245,13 +245,17 @@ StyledHeaderRow.defaultProps = {
 };
 
 const COMPONENT_ID$3 = 'tables.head';
+const stickyStyles = props => {
+  const borderColor = reactTheming.getColor('neutralHue', 300, props.theme);
+  return styled.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, props.theme.colors.background, StyledHeaderRow);
+};
 const StyledHead = styled__default["default"].thead.attrs({
   'data-garden-id': COMPONENT_ID$3,
-  'data-garden-version': '8.60.0'
+  'data-garden-version': '8.62.0'
 }).withConfig({
   displayName: "StyledHead",
   componentId: "sc-spf23a-0"
-})(["", ";"], props => reactTheming.retrieveComponentStyles(COMPONENT_ID$3, props));
+})(["", " ", ";"], props => props.isSticky && stickyStyles(props), props => reactTheming.retrieveComponentStyles(COMPONENT_ID$3, props));
 StyledHead.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
 };
@@ -264,7 +268,7 @@ const sizeStyles$1 = props => {
 };
 const StyledGroupRow = styled__default["default"](StyledBaseRow).attrs({
   'data-garden-id': COMPONENT_ID$2,
-  'data-garden-version': '8.60.0'
+  'data-garden-version': '8.62.0'
 }).withConfig({
   displayName: "StyledGroupRow",
   componentId: "sc-mpd0r8-0"
@@ -297,7 +301,7 @@ StyledSortableFillIconWrapper.defaultProps = {
 };
 const StyledSortableButton = styled__default["default"].button.attrs({
   'data-garden-id': COMPONENT_ID$1,
-  'data-garden-version': '8.60.0',
+  'data-garden-version': '8.62.0',
   type: 'button'
 }).withConfig({
   displayName: "StyledSortableButton",
@@ -353,7 +357,7 @@ const sizeStyles = props => {
 const StyledHeaderCell = styled__default["default"](StyledCell).attrs({
   as: 'th',
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '8.60.0'
+  'data-garden-version': '8.62.0'
 }).withConfig({
   displayName: "StyledHeaderCell",
   componentId: "sc-fzagoe-0"

package/dist/index.esm.js

@@ -31,7 +31,7 @@ function _extends$3() {
 const COMPONENT_ID$a = 'tables.body';
 const StyledBody = styled.tbody.attrs({
   'data-garden-id': COMPONENT_ID$a,
-  'data-garden-version': '8.60.0'
+  'data-garden-version': '8.62.0'
 }).withConfig({
   displayName: "StyledBody",
   componentId: "sc-14ud6y-0"
@@ -43,7 +43,7 @@ StyledBody.defaultProps = {
 const COMPONENT_ID$9 = 'tables.caption';
 const StyledCaption = styled.caption.attrs({
   'data-garden-id': COMPONENT_ID$9,
-  'data-garden-version': '8.60.0'
+  'data-garden-version': '8.62.0'
 }).withConfig({
   displayName: "StyledCaption",
   componentId: "sc-113y327-0"
@@ -58,7 +58,7 @@ const getLineHeight = props => {
 };
 const StyledTable = styled.table.attrs({
   'data-garden-id': COMPONENT_ID$8,
-  'data-garden-version': '8.60.0'
+  'data-garden-version': '8.62.0'
 }).withConfig({
   displayName: "StyledTable",
   componentId: "sc-gje7na-0"
@@ -101,7 +101,7 @@ const sizeStyling = props => {
 };
 const StyledCell = styled.td.attrs({
   'data-garden-id': COMPONENT_ID$7,
-  'data-garden-version': '8.60.0'
+  'data-garden-version': '8.62.0'
 }).withConfig({
   displayName: "StyledCell",
   componentId: "sc-8hpncx-0"
@@ -130,7 +130,7 @@ const colorStyles$1 = props => {
 };
 const StyledOverflowButton = styled.button.attrs({
   'data-garden-id': COMPONENT_ID$6,
-  'data-garden-version': '8.60.0',
+  'data-garden-version': '8.62.0',
   type: 'button'
 }).withConfig({
   displayName: "StyledOverflowButton",
@@ -186,7 +186,7 @@ const colorStyles = props => {
 };
 const StyledRow = styled(StyledBaseRow).attrs(props => ({
   'data-garden-id': COMPONENT_ID$5,
-  'data-garden-version': '8.60.0',
+  'data-garden-version': '8.62.0',
   tabIndex: props.isReadOnly ? undefined : -1
 })).withConfig({
   displayName: "StyledRow",
@@ -207,7 +207,7 @@ const getHeaderRowHeight = props => {
 };
 const StyledHeaderRow = styled(StyledBaseRow).attrs({
   'data-garden-id': COMPONENT_ID$4,
-  'data-garden-version': '8.60.0'
+  'data-garden-version': '8.62.0'
 }).withConfig({
   displayName: "StyledHeaderRow",
   componentId: "sc-16ogvdx-0"
@@ -217,13 +217,17 @@ StyledHeaderRow.defaultProps = {
 };
 
 const COMPONENT_ID$3 = 'tables.head';
+const stickyStyles = props => {
+  const borderColor = getColor('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, props.theme.colors.background, StyledHeaderRow);
+};
 const StyledHead = styled.thead.attrs({
   'data-garden-id': COMPONENT_ID$3,
-  'data-garden-version': '8.60.0'
+  'data-garden-version': '8.62.0'
 }).withConfig({
   displayName: "StyledHead",
   componentId: "sc-spf23a-0"
-})(["", ";"], props => retrieveComponentStyles(COMPONENT_ID$3, props));
+})(["", " ", ";"], props => props.isSticky && stickyStyles(props), props => retrieveComponentStyles(COMPONENT_ID$3, props));
 StyledHead.defaultProps = {
   theme: DEFAULT_THEME
 };
@@ -236,7 +240,7 @@ const sizeStyles$1 = props => {
 };
 const StyledGroupRow = styled(StyledBaseRow).attrs({
   'data-garden-id': COMPONENT_ID$2,
-  'data-garden-version': '8.60.0'
+  'data-garden-version': '8.62.0'
 }).withConfig({
   displayName: "StyledGroupRow",
   componentId: "sc-mpd0r8-0"
@@ -269,7 +273,7 @@ StyledSortableFillIconWrapper.defaultProps = {
 };
 const StyledSortableButton = styled.button.attrs({
   'data-garden-id': COMPONENT_ID$1,
-  'data-garden-version': '8.60.0',
+  'data-garden-version': '8.62.0',
   type: 'button'
 }).withConfig({
   displayName: "StyledSortableButton",
@@ -325,7 +329,7 @@ const sizeStyles = props => {
 const StyledHeaderCell = styled(StyledCell).attrs({
   as: 'th',
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '8.60.0'
+  'data-garden-version': '8.62.0'
 }).withConfig({
   displayName: "StyledHeaderCell",
   componentId: "sc-fzagoe-0"

package/dist/typings/elements/Head.d.ts

@@ -5,7 +5,8 @@
  * found at http://www.apache.org/licenses/LICENSE-2.0.
  */
 import React from 'react';
+import { IHeadProps } from '../types';
 /**
  * @extends HTMLAttributes<HTMLTableSectionElement>
  */
-export declare const Head: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLTableSectionElement> & React.RefAttributes<HTMLTableSectionElement>>;
+export declare const Head: React.ForwardRefExoticComponent<IHeadProps & React.RefAttributes<HTMLTableSectionElement>>;

package/dist/typings/index.d.ts

@@ -15,4 +15,4 @@ export { OverflowButton } from './elements/OverflowButton';
 export { Row } from './elements/Row';
 export { SortableCell } from './elements/SortableCell';
 export { Table } from './elements/Table';
-export type { ITableProps, IRowProps, ICellProps, IHeaderCellProps, ISortableCellProps } from './types';
+export type { ITableProps, IRowProps, ICellProps, IHeadProps, IHeaderCellProps, ISortableCellProps } from './types';

package/dist/typings/styled/StyledHead.d.ts

@@ -4,7 +4,12 @@
  * Use of this source code is governed under the Apache License, Version 2.0
  * found at http://www.apache.org/licenses/LICENSE-2.0.
  */
-export declare const StyledHead: import("styled-components").StyledComponent<"thead", import("styled-components").DefaultTheme, {
+import { DefaultTheme } from 'styled-components';
+interface IStyledHeadProps {
+    isSticky?: boolean;
+}
+export declare const StyledHead: import("styled-components").StyledComponent<"thead", DefaultTheme, {
     'data-garden-id': string;
     'data-garden-version': string;
-}, "data-garden-id" | "data-garden-version">;
+} & IStyledHeadProps, "data-garden-id" | "data-garden-version">;
+export {};

package/dist/typings/types/index.d.ts

@@ -13,6 +13,10 @@ export interface ITableProps extends TableHTMLAttributes<HTMLTableElement> {
     /** Removes interactive styling from table rows */
     isReadOnly?: boolean;
 }
+export interface IHeadProps extends HTMLAttributes<HTMLTableSectionElement> {
+    /** Applies sticky header styling */
+    isSticky?: boolean;
+}
 export interface IRowProps extends HTMLAttributes<HTMLTableRowElement> {
     /** Applies striped styling */
     isStriped?: boolean;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zendeskgarden/react-tables",
-  "version": "8.60.0",
+  "version": "8.62.0",
   "description": "Components relating to tables in the Garden Design System",
   "license": "Apache-2.0",
   "author": "Zendesk Garden <garden@zendesk.com>",
@@ -33,12 +33,12 @@
     "styled-components": "^4.2.0 || ^5.0.0"
   },
   "devDependencies": {
-    "@types/react-beautiful-dnd": "13.1.2",
+    "@types/react-beautiful-dnd": "13.1.3",
     "@types/react-window": "1.8.5",
-    "@zendeskgarden/react-theming": "^8.60.0",
+    "@zendeskgarden/react-theming": "^8.62.0",
     "@zendeskgarden/svg-icons": "6.33.0",
     "react-beautiful-dnd": "13.1.1",
-    "react-window": "1.8.7"
+    "react-window": "1.8.8"
   },
   "keywords": [
     "components",
@@ -50,5 +50,5 @@
     "access": "public"
   },
   "zendeskgarden:src": "src/index.ts",
-  "gitHead": "8adf13e61f58a64a0ba06794c0362f665e846fe9"
+  "gitHead": "f8233a46d9732497578dbea9e88f82a3d4bb3678"
 }