@cloudscape-design/components 3.0.0

package/table/sticky-scrolling.d.ts

@@ -0,0 +1,26 @@
+/**
+ * @param containerRef ref to surrounding container with sticky element
+ * @param stickyRef ref to sticky element scrolled inside of containerRef
+ * @param containerOffset offset between header and container
+ *                        originating borders or paddings
+ */
+export default function stickyScrolling(containerRef: React.MutableRefObject<HTMLElement | null>, stickyRef: React.MutableRefObject<HTMLElement | null>): {
+    scrollToTop: () => void;
+    scrollToItem: (item: HTMLElement | null) => void;
+};
+/**
+ * Calculates the scrolling offset between container and
+ * sticky element with container offset caused by border
+ * or padding
+ * @param container
+ * @param sticky element inside of container
+ * @param containerOffset caused by borders or paddings
+ */
+export declare function calculateScrollingOffset(container: HTMLElement, sticky: HTMLElement): number;
+/**
+ * Scrolls suitable parent of container up by amount of pixels
+ * @param amount pixels to be scrolled up
+ * @param container used to determine next parent element for scrolling
+ */
+export declare function scrollUpBy(amount: number, container: HTMLElement): void;
+//# sourceMappingURL=sticky-scrolling.d.ts.map

package/table/sticky-scrolling.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"sticky-scrolling.d.ts","sourceRoot":"","sources":["../../../src/table/sticky-scrolling.ts"],"names":[],"mappings":"AAIA;;;;;GAKG;AACH,MAAM,CAAC,OAAO,UAAU,eAAe,CACrC,YAAY,EAAE,KAAK,CAAC,gBAAgB,CAAC,WAAW,GAAG,IAAI,CAAC,EACxD,SAAS,EAAE,KAAK,CAAC,gBAAgB,CAAC,WAAW,GAAG,IAAI,CAAC;;yBAWzB,WAAW,GAAG,IAAI;EAc/C;AAED;;;;;;;GAOG;AACH,wBAAgB,wBAAwB,CAAC,SAAS,EAAE,WAAW,EAAE,MAAM,EAAE,WAAW,UAInF;AAED;;;;GAIG;AACH,wBAAgB,UAAU,CAAC,MAAM,EAAE,MAAM,EAAE,SAAS,EAAE,WAAW,QAQhE"}

package/table/sticky-scrolling.js

@@ -0,0 +1,63 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import { getOverflowParents } from '../internal/utils/scrollable-containers';
+/**
+ * @param containerRef ref to surrounding container with sticky element
+ * @param stickyRef ref to sticky element scrolled inside of containerRef
+ * @param containerOffset offset between header and container
+ *                        originating borders or paddings
+ */
+export default function stickyScrolling(containerRef, stickyRef) {
+    var scrollToTop = function () {
+        if (!containerRef.current || !stickyRef.current) {
+            return;
+        }
+        var scrollingOffset = calculateScrollingOffset(containerRef.current, stickyRef.current);
+        if (scrollingOffset > 0) {
+            scrollUpBy(scrollingOffset, containerRef.current);
+        }
+    };
+    var scrollToItem = function (item) {
+        if (!item || !containerRef.current || !stickyRef.current) {
+            return;
+        }
+        var stickyBottom = stickyRef.current.getBoundingClientRect().bottom;
+        var scrollingOffset = stickyBottom - item.getBoundingClientRect().top;
+        if (scrollingOffset > 0) {
+            scrollUpBy(scrollingOffset, containerRef.current);
+        }
+    };
+    return {
+        scrollToTop: scrollToTop,
+        scrollToItem: scrollToItem
+    };
+}
+/**
+ * Calculates the scrolling offset between container and
+ * sticky element with container offset caused by border
+ * or padding
+ * @param container
+ * @param sticky element inside of container
+ * @param containerOffset caused by borders or paddings
+ */
+export function calculateScrollingOffset(container, sticky) {
+    var stickyRect = sticky.getBoundingClientRect();
+    var containerRect = container.getBoundingClientRect();
+    return stickyRect.top - containerRect.top;
+}
+/**
+ * Scrolls suitable parent of container up by amount of pixels
+ * @param amount pixels to be scrolled up
+ * @param container used to determine next parent element for scrolling
+ */
+export function scrollUpBy(amount, container) {
+    var parent = getOverflowParents(container);
+    if (parent.length) {
+        // Take next overflow parent in stack
+        parent[0].scrollTop -= amount;
+    }
+    else {
+        window.scrollTo({ top: window.pageYOffset - amount });
+    }
+}
+//# sourceMappingURL=sticky-scrolling.js.map

package/table/sticky-scrolling.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"sticky-scrolling.js","sourceRoot":"","sources":["../../../src/table/sticky-scrolling.ts"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,EAAE,kBAAkB,EAAE,MAAM,yCAAyC,CAAC;AAE7E;;;;;GAKG;AACH,MAAM,CAAC,OAAO,UAAU,eAAe,CACrC,YAAwD,EACxD,SAAqD;IAErD,IAAM,WAAW,GAAG;QAClB,IAAI,CAAC,YAAY,CAAC,OAAO,IAAI,CAAC,SAAS,CAAC,OAAO,EAAE;YAC/C,OAAO;SACR;QACD,IAAM,eAAe,GAAG,wBAAwB,CAAC,YAAY,CAAC,OAAO,EAAE,SAAS,CAAC,OAAO,CAAC,CAAC;QAC1F,IAAI,eAAe,GAAG,CAAC,EAAE;YACvB,UAAU,CAAC,eAAe,EAAE,YAAY,CAAC,OAAO,CAAC,CAAC;SACnD;IACH,CAAC,CAAC;IACF,IAAM,YAAY,GAAG,UAAC,IAAwB;QAC5C,IAAI,CAAC,IAAI,IAAI,CAAC,YAAY,CAAC,OAAO,IAAI,CAAC,SAAS,CAAC,OAAO,EAAE;YACxD,OAAO;SACR;QACD,IAAM,YAAY,GAAG,SAAS,CAAC,OAAO,CAAC,qBAAqB,EAAE,CAAC,MAAM,CAAC;QACtE,IAAM,eAAe,GAAG,YAAY,GAAG,IAAI,CAAC,qBAAqB,EAAE,CAAC,GAAG,CAAC;QACxE,IAAI,eAAe,GAAG,CAAC,EAAE;YACvB,UAAU,CAAC,eAAe,EAAE,YAAY,CAAC,OAAO,CAAC,CAAC;SACnD;IACH,CAAC,CAAC;IACF,OAAO;QACL,WAAW,aAAA;QACX,YAAY,cAAA;KACb,CAAC;AACJ,CAAC;AAED;;;;;;;GAOG;AACH,MAAM,UAAU,wBAAwB,CAAC,SAAsB,EAAE,MAAmB;IAClF,IAAM,UAAU,GAAG,MAAM,CAAC,qBAAqB,EAAE,CAAC;IAClD,IAAM,aAAa,GAAG,SAAS,CAAC,qBAAqB,EAAE,CAAC;IACxD,OAAO,UAAU,CAAC,GAAG,GAAG,aAAa,CAAC,GAAG,CAAC;AAC5C,CAAC;AAED;;;;GAIG;AACH,MAAM,UAAU,UAAU,CAAC,MAAc,EAAE,SAAsB;IAC/D,IAAM,MAAM,GAAG,kBAAkB,CAAC,SAAS,CAAC,CAAC;IAC7C,IAAI,MAAM,CAAC,MAAM,EAAE;QACjB,qCAAqC;QACrC,MAAM,CAAC,CAAC,CAAC,CAAC,SAAS,IAAI,MAAM,CAAC;KAC/B;SAAM;QACL,MAAM,CAAC,QAAQ,CAAC,EAAE,GAAG,EAAE,MAAM,CAAC,WAAW,GAAG,MAAM,EAAE,CAAC,CAAC;KACvD;AACH,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport { getOverflowParents } from '../internal/utils/scrollable-containers';\n\n/**\n * @param containerRef ref to surrounding container with sticky element\n * @param stickyRef ref to sticky element scrolled inside of containerRef\n * @param containerOffset offset between header and container\n *                        originating borders or paddings\n */\nexport default function stickyScrolling(\n  containerRef: React.MutableRefObject<HTMLElement | null>,\n  stickyRef: React.MutableRefObject<HTMLElement | null>\n) {\n  const scrollToTop = () => {\n    if (!containerRef.current || !stickyRef.current) {\n      return;\n    }\n    const scrollingOffset = calculateScrollingOffset(containerRef.current, stickyRef.current);\n    if (scrollingOffset > 0) {\n      scrollUpBy(scrollingOffset, containerRef.current);\n    }\n  };\n  const scrollToItem = (item: HTMLElement | null) => {\n    if (!item || !containerRef.current || !stickyRef.current) {\n      return;\n    }\n    const stickyBottom = stickyRef.current.getBoundingClientRect().bottom;\n    const scrollingOffset = stickyBottom - item.getBoundingClientRect().top;\n    if (scrollingOffset > 0) {\n      scrollUpBy(scrollingOffset, containerRef.current);\n    }\n  };\n  return {\n    scrollToTop,\n    scrollToItem,\n  };\n}\n\n/**\n * Calculates the scrolling offset between container and\n * sticky element with container offset caused by border\n * or padding\n * @param container\n * @param sticky element inside of container\n * @param containerOffset caused by borders or paddings\n */\nexport function calculateScrollingOffset(container: HTMLElement, sticky: HTMLElement) {\n  const stickyRect = sticky.getBoundingClientRect();\n  const containerRect = container.getBoundingClientRect();\n  return stickyRect.top - containerRect.top;\n}\n\n/**\n * Scrolls suitable parent of container up by amount of pixels\n * @param amount pixels to be scrolled up\n * @param container used to determine next parent element for scrolling\n */\nexport function scrollUpBy(amount: number, container: HTMLElement) {\n  const parent = getOverflowParents(container);\n  if (parent.length) {\n    // Take next overflow parent in stack\n    parent[0].scrollTop -= amount;\n  } else {\n    window.scrollTo({ top: window.pageYOffset - amount });\n  }\n}\n"]}

package/table/styles.css.js

@@ -0,0 +1,37 @@
+
+    import './styles.scoped.css';
+    export default {
+  "root": "awsui_root_wih1l_16hry_97",
+  "tools": "awsui_tools_wih1l_16hry_106",
+  "tools-filtering": "awsui_tools-filtering_wih1l_16hry_112",
+  "tools-align-right": "awsui_tools-align-right_wih1l_16hry_116",
+  "tools-pagination": "awsui_tools-pagination_wih1l_16hry_120",
+  "tools-preferences": "awsui_tools-preferences_wih1l_16hry_120",
+  "tools-small": "awsui_tools-small_wih1l_16hry_126",
+  "table": "awsui_table_wih1l_16hry_132",
+  "table-layout-fixed": "awsui_table-layout-fixed_wih1l_16hry_138",
+  "wrapper": "awsui_wrapper_wih1l_16hry_142",
+  "variant-stacked": "awsui_variant-stacked_wih1l_16hry_152",
+  "variant-container": "awsui_variant-container_wih1l_16hry_152",
+  "variant-embedded": "awsui_variant-embedded_wih1l_16hry_156",
+  "has-header": "awsui_has-header_wih1l_16hry_159",
+  "has-footer": "awsui_has-footer_wih1l_16hry_162",
+  "cell-merged": "awsui_cell-merged_wih1l_16hry_172",
+  "cell-merged-content": "awsui_cell-merged-content_wih1l_16hry_176",
+  "empty": "awsui_empty_wih1l_16hry_191",
+  "loading": "awsui_loading_wih1l_16hry_195",
+  "selection-control": "awsui_selection-control_wih1l_16hry_199",
+  "selection-control-header": "awsui_selection-control-header_wih1l_16hry_206",
+  "sticky-scrollbar": "awsui_sticky-scrollbar_wih1l_16hry_211",
+  "sticky-scrollbar-content": "awsui_sticky-scrollbar-content_wih1l_16hry_221",
+  "sticky-scrollbar-visible": "awsui_sticky-scrollbar-visible_wih1l_16hry_224",
+  "header-secondary": "awsui_header-secondary_wih1l_16hry_228",
+  "header-controls": "awsui_header-controls_wih1l_16hry_248",
+  "divider": "awsui_divider_wih1l_16hry_265",
+  "footer-wrapper": "awsui_footer-wrapper_wih1l_16hry_272",
+  "footer": "awsui_footer_wih1l_16hry_272",
+  "thead-active": "awsui_thead-active_wih1l_16hry_281",
+  "row": "awsui_row_wih1l_16hry_282",
+  "row-selected": "awsui_row-selected_wih1l_16hry_283"
+};
+  

package/table/styles.scoped.css

@@ -0,0 +1,324 @@
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/* stylelint-disable @cloudscape-design/no-motion-outside-of-mixin, selector-combinator-disallowed-list, selector-pseudo-class-no-unknown, selector-class-pattern */
+/* stylelint-enable @cloudscape-design/no-motion-outside-of-mixin, selector-combinator-disallowed-list, selector-pseudo-class-no-unknown, selector-class-pattern */
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/* Style used for links in slots/components that are text heavy, to help links stand out among 
+surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F73#description */
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+.awsui_root_wih1l_16hry_97:not(#\9) {
+  font-size: 14px;
+  font-size: var(--font-body-m-size-sregvd, 14px);
+  line-height: 22px;
+  line-height: var(--font-body-m-line-height-i7xxvv, 22px);
+  color: #000716;
+  color: var(--color-text-body-default-ajf1h5, #000716);
+  font-weight: 400;
+  font-family: "Open Sans", "Helvetica Neue", Roboto, Arial, sans-serif;
+  font-family: var(--font-family-base-qnistn, "Open Sans", "Helvetica Neue", Roboto, Arial, sans-serif);
+  width: 100%;
+}
+
+.awsui_tools_wih1l_16hry_106:not(#\9) {
+  display: flex;
+  align-items: flex-start;
+  flex-wrap: wrap;
+  padding: 8px 0 4px;
+  padding: var(--space-scaled-xs-6859qs, 8px) 0 var(--space-scaled-xxs-95dhkm, 4px);
+}
+.awsui_tools-filtering_wih1l_16hry_112:not(#\9) {
+  flex: 1 1 0%;
+  margin-right: 20px;
+  margin-right: var(--space-l-4vl6xu, 20px);
+}
+.awsui_tools-align-right_wih1l_16hry_116:not(#\9) {
+  display: flex;
+  margin-left: auto;
+}
+.awsui_tools-pagination_wih1l_16hry_120 + .awsui_tools-preferences_wih1l_16hry_120:not(#\9) {
+  border-left: 2px solid #e9ebed;
+  border-left: var(--border-divider-section-width-4wm2it, 2px) solid var(--color-border-divider-default-7s2wjw, #e9ebed);
+  box-sizing: border-box;
+  margin-left: 8px;
+  margin-left: var(--space-xs-rsr2qu, 8px);
+  padding-left: 8px;
+  padding-left: var(--space-xs-rsr2qu, 8px);
+}
+.awsui_tools-small_wih1l_16hry_126 > .awsui_tools-filtering_wih1l_16hry_112:not(#\9) {
+  margin-right: 0;
+  margin-bottom: 8px;
+  margin-bottom: var(--space-scaled-xs-6859qs, 8px);
+  flex-basis: 100%;
+}
+
+.awsui_table_wih1l_16hry_132:not(#\9) {
+  width: 100%;
+  border-spacing: 0;
+  position: relative;
+  box-sizing: border-box;
+}
+.awsui_table-layout-fixed_wih1l_16hry_138:not(#\9) {
+  table-layout: fixed;
+}
+
+.awsui_wrapper_wih1l_16hry_142:not(#\9) {
+  position: relative;
+  box-sizing: border-box;
+  width: 100%;
+  padding-top: 12px;
+  padding-top: var(--space-table-content-top-t15dd1, 12px);
+  padding-bottom: 4px;
+  padding-bottom: var(--space-table-content-bottom-pg6yvn, 4px);
+  overflow-x: auto;
+  border-top-right-radius: 16px;
+  border-top-right-radius: var(--border-container-radius-8dqnwf, 16px);
+  border-top-left-radius: 16px;
+  border-top-left-radius: var(--border-container-radius-8dqnwf, 16px);
+}
+.awsui_wrapper_wih1l_16hry_142.awsui_variant-stacked_wih1l_16hry_152 > .awsui_table_wih1l_16hry_132:not(#\9), .awsui_wrapper_wih1l_16hry_142.awsui_variant-container_wih1l_16hry_152 > .awsui_table_wih1l_16hry_132:not(#\9) {
+  padding-left: 24px;
+  padding-left: var(--space-table-horizontal-58vuca, 24px);
+  padding-right: 24px;
+  padding-right: var(--space-table-horizontal-58vuca, 24px);
+}
+.awsui_wrapper_wih1l_16hry_142.awsui_variant-embedded_wih1l_16hry_156:not(#\9) {
+  padding-bottom: 0px;
+  padding-bottom: var(--space-table-embedded-content-bottom-7vc5vt, 0px);
+}
+.awsui_wrapper_wih1l_16hry_142.awsui_has-header_wih1l_16hry_159:not(#\9) {
+  padding-top: 0px;
+}
+.awsui_wrapper_wih1l_16hry_142.awsui_has-footer_wih1l_16hry_162:not(#\9) {
+  padding-bottom: 0px;
+}
+.awsui_wrapper_wih1l_16hry_142[data-awsui-focus-visible=true]:not(#\9):focus {
+  outline: 2px dotted transparent;
+  outline-offset: 2px;
+  border-radius: 16px;
+  border-radius: var(--border-container-radius-8dqnwf, 16px);
+  box-shadow: 0 0 0 2px #0972d3;
+  box-shadow: 0 0 0 2px var(--color-border-item-focused-ap3b6s, #0972d3);
+}
+
+.awsui_cell-merged_wih1l_16hry_172:not(#\9) {
+  text-align: center;
+  padding: 0;
+}
+.awsui_cell-merged-content_wih1l_16hry_176:not(#\9) {
+  box-sizing: border-box;
+  width: 100%;
+  padding: 16px 20px 20px;
+  padding: var(--space-scaled-m-pv0fmt, 16px) var(--space-l-4vl6xu, 20px) var(--space-scaled-l-t03y3z, 20px);
+  /* stylelint-disable plugin/no-unsupported-browser-features */
+  /* stylelint-enable plugin/no-unsupported-browser-features */
+}
+@supports (position: sticky) {
+  .awsui_cell-merged-content_wih1l_16hry_176:not(#\9) {
+    position: sticky;
+    left: 0;
+    margin: 0 calc(-2 * 24px);
+    margin: 0 calc(-2 * var(--space-table-horizontal-58vuca, 24px));
+  }
+}
+
+.awsui_empty_wih1l_16hry_191:not(#\9) {
+  color: #5f6b7a;
+  color: var(--color-text-empty-fjv325, #5f6b7a);
+}
+
+.awsui_loading_wih1l_16hry_195:not(#\9) {
+  /* used in test-utils */
+}
+
+.awsui_selection-control_wih1l_16hry_199:not(#\9) {
+  position: relative;
+  box-sizing: border-box;
+  width: 54px;
+  max-width: 54px;
+  min-width: 54px;
+}
+.awsui_selection-control_wih1l_16hry_199.awsui_selection-control-header_wih1l_16hry_206:not(#\9) {
+  padding: 8px 20px;
+  padding: var(--space-scaled-xs-6859qs, 8px) var(--space-scaled-l-t03y3z, 20px);
+  border-left: 2px solid transparent;
+  border-left: var(--border-item-width-qbbbsa, 2px) solid transparent;
+}
+
+.awsui_sticky-scrollbar_wih1l_16hry_211:not(#\9) {
+  height: 15px;
+  position: fixed;
+  display: none;
+  overflow-x: auto;
+  overflow-y: hidden;
+  margin-top: -15px;
+  bottom: 0;
+  width: 100%;
+}
+.awsui_sticky-scrollbar-content_wih1l_16hry_221:not(#\9) {
+  height: 15px;
+}
+.awsui_sticky-scrollbar-visible_wih1l_16hry_224:not(#\9) {
+  display: block;
+}
+
+.awsui_header-secondary_wih1l_16hry_228:not(#\9) {
+  overflow: auto;
+  -ms-overflow-style: none;
+  /* Internet Explorer 10+ */
+  scrollbar-width: none;
+  /* Firefox */
+  box-sizing: border-box;
+  width: 100%;
+  border-radius: 0;
+  background: #ffffff;
+  background: var(--color-background-table-header-i1pa1g, #ffffff);
+}
+.awsui_header-secondary_wih1l_16hry_228.awsui_variant-stacked_wih1l_16hry_152 > .awsui_table_wih1l_16hry_132:not(#\9), .awsui_header-secondary_wih1l_16hry_228.awsui_variant-container_wih1l_16hry_152 > .awsui_table_wih1l_16hry_132:not(#\9) {
+  padding-left: 24px;
+  padding-left: var(--space-table-horizontal-58vuca, 24px);
+  padding-right: 24px;
+  padding-right: var(--space-table-horizontal-58vuca, 24px);
+}
+.awsui_header-secondary_wih1l_16hry_228:not(#\9)::-webkit-scrollbar {
+  display: none;
+  /* Safari and Chrome */
+}
+
+.awsui_header-controls_wih1l_16hry_248:not(#\9) {
+  padding-top: 12px;
+  padding-top: var(--space-container-header-vertical-zsjhel, 12px);
+  padding-bottom: 12px;
+  padding-bottom: var(--space-container-header-vertical-zsjhel, 12px);
+}
+.awsui_header-controls_wih1l_16hry_248.awsui_variant-stacked_wih1l_16hry_152:not(#\9), .awsui_header-controls_wih1l_16hry_248.awsui_variant-container_wih1l_16hry_152:not(#\9) {
+  padding-left: calc(24px + 0px);
+  padding-left: calc(var(--space-table-horizontal-58vuca, 24px) + var(--space-table-header-horizontal-et2ko8, 0px));
+  padding-right: calc(24px + 0px);
+  padding-right: calc(var(--space-table-horizontal-58vuca, 24px) + var(--space-table-header-horizontal-et2ko8, 0px));
+}
+.awsui_header-controls_wih1l_16hry_248.awsui_variant-embedded_wih1l_16hry_156:not(#\9) {
+  padding-left: 0px;
+  padding-left: var(--space-table-header-horizontal-et2ko8, 0px);
+  padding-right: 0px;
+  padding-right: var(--space-table-header-horizontal-et2ko8, 0px);
+  padding-top: 0px;
+  padding-top: var(--space-table-embedded-header-top-zf07fk, 0px);
+}
+.awsui_header-controls_wih1l_16hry_248 + .awsui_header-secondary_wih1l_16hry_228:not(#\9) {
+  border-top: 1px solid transparent;
+  border-top: var(--border-divider-list-width-hacikr, 1px) solid var(--color-border-container-divider-4ade7z, transparent);
+}
+
+.awsui_divider_wih1l_16hry_265:not(#\9) {
+  border: none;
+  margin: 0;
+  height: 0;
+  border-top: 2px solid #e9ebed;
+  border-top: var(--border-divider-section-width-4wm2it, 2px) solid var(--color-border-divider-default-7s2wjw, #e9ebed);
+}
+
+.awsui_footer-wrapper_wih1l_16hry_272.awsui_variant-stacked_wih1l_16hry_152:not(#\9), .awsui_footer-wrapper_wih1l_16hry_272.awsui_variant-container_wih1l_16hry_152:not(#\9) {
+  padding-left: 24px;
+  padding-left: var(--space-table-horizontal-58vuca, 24px);
+  padding-right: 24px;
+  padding-right: var(--space-table-horizontal-58vuca, 24px);
+}
+
+.awsui_footer_wih1l_16hry_272:not(#\9) {
+  padding: 12px 0px;
+  padding: var(--space-scaled-s-cu1hzn, 12px) var(--space-table-footer-horizontal-8o6sk8, 0px);
+}
+
+.awsui_thead-active_wih1l_16hry_281:not(#\9),
+.awsui_row_wih1l_16hry_282:not(#\9),
+.awsui_row-selected_wih1l_16hry_283:not(#\9) {
+  /* used in test-utils */
+}

package/table/styles.selectors.js

@@ -0,0 +1,38 @@
+
+    // es-module interop with Babel and Typescript
+    Object.defineProperty(exports, "__esModule", { value: true });
+    module.exports.default = {
+  "root": "awsui_root_wih1l_16hry_97",
+  "tools": "awsui_tools_wih1l_16hry_106",
+  "tools-filtering": "awsui_tools-filtering_wih1l_16hry_112",
+  "tools-align-right": "awsui_tools-align-right_wih1l_16hry_116",
+  "tools-pagination": "awsui_tools-pagination_wih1l_16hry_120",
+  "tools-preferences": "awsui_tools-preferences_wih1l_16hry_120",
+  "tools-small": "awsui_tools-small_wih1l_16hry_126",
+  "table": "awsui_table_wih1l_16hry_132",
+  "table-layout-fixed": "awsui_table-layout-fixed_wih1l_16hry_138",
+  "wrapper": "awsui_wrapper_wih1l_16hry_142",
+  "variant-stacked": "awsui_variant-stacked_wih1l_16hry_152",
+  "variant-container": "awsui_variant-container_wih1l_16hry_152",
+  "variant-embedded": "awsui_variant-embedded_wih1l_16hry_156",
+  "has-header": "awsui_has-header_wih1l_16hry_159",
+  "has-footer": "awsui_has-footer_wih1l_16hry_162",
+  "cell-merged": "awsui_cell-merged_wih1l_16hry_172",
+  "cell-merged-content": "awsui_cell-merged-content_wih1l_16hry_176",
+  "empty": "awsui_empty_wih1l_16hry_191",
+  "loading": "awsui_loading_wih1l_16hry_195",
+  "selection-control": "awsui_selection-control_wih1l_16hry_199",
+  "selection-control-header": "awsui_selection-control-header_wih1l_16hry_206",
+  "sticky-scrollbar": "awsui_sticky-scrollbar_wih1l_16hry_211",
+  "sticky-scrollbar-content": "awsui_sticky-scrollbar-content_wih1l_16hry_221",
+  "sticky-scrollbar-visible": "awsui_sticky-scrollbar-visible_wih1l_16hry_224",
+  "header-secondary": "awsui_header-secondary_wih1l_16hry_228",
+  "header-controls": "awsui_header-controls_wih1l_16hry_248",
+  "divider": "awsui_divider_wih1l_16hry_265",
+  "footer-wrapper": "awsui_footer-wrapper_wih1l_16hry_272",
+  "footer": "awsui_footer_wih1l_16hry_272",
+  "thead-active": "awsui_thead-active_wih1l_16hry_281",
+  "row": "awsui_row_wih1l_16hry_282",
+  "row-selected": "awsui_row-selected_wih1l_16hry_283"
+};
+  

package/table/thead.d.ts

@@ -0,0 +1,28 @@
+import React from 'react';
+import { TableProps } from './interfaces';
+import { SelectionControlProps } from './selection-control';
+import { NonCancelableEventHandler } from '../internal/events';
+export interface TheadProps {
+    containerWidth: number | null;
+    selectionType: TableProps.SelectionType | undefined;
+    columnDefinitions: ReadonlyArray<TableProps.ColumnDefinition<any>>;
+    sortingColumn: TableProps.SortingColumn<any> | undefined;
+    sortingDescending: boolean | undefined;
+    sortingDisabled: boolean | undefined;
+    variant: TableProps.Variant;
+    wrapLines: boolean | undefined;
+    resizableColumns: boolean | undefined;
+    selectAllProps: SelectionControlProps;
+    onFocusMove: ((sourceElement: HTMLElement, fromIndex: number, direction: -1 | 1) => void) | undefined;
+    onCellFocus?: (colIndex: number) => void;
+    onCellBlur?: () => void;
+    onResizeFinish: (newWidths: Record<string, number>) => void;
+    showFocusRing?: number | null;
+    onSortingChange: NonCancelableEventHandler<TableProps.SortingState<any>> | undefined;
+    sticky?: boolean;
+    hidden?: boolean;
+    stuck?: boolean;
+}
+declare const Thead: React.ForwardRefExoticComponent<TheadProps & React.RefAttributes<HTMLTableRowElement>>;
+export default Thead;
+//# sourceMappingURL=thead.d.ts.map

package/table/thead.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"thead.d.ts","sourceRoot":"","sources":["../../../src/table/thead.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC1C,OAAyB,EAAE,qBAAqB,EAAE,MAAM,qBAAqB,CAAC;AAE9E,OAAO,EAA0B,yBAAyB,EAAE,MAAM,oBAAoB,CAAC;AAQvF,MAAM,WAAW,UAAU;IACzB,cAAc,EAAE,MAAM,GAAG,IAAI,CAAC;IAC9B,aAAa,EAAE,UAAU,CAAC,aAAa,GAAG,SAAS,CAAC;IACpD,iBAAiB,EAAE,aAAa,CAAC,UAAU,CAAC,gBAAgB,CAAC,GAAG,CAAC,CAAC,CAAC;IACnE,aAAa,EAAE,UAAU,CAAC,aAAa,CAAC,GAAG,CAAC,GAAG,SAAS,CAAC;IACzD,iBAAiB,EAAE,OAAO,GAAG,SAAS,CAAC;IACvC,eAAe,EAAE,OAAO,GAAG,SAAS,CAAC;IACrC,OAAO,EAAE,UAAU,CAAC,OAAO,CAAC;IAC5B,SAAS,EAAE,OAAO,GAAG,SAAS,CAAC;IAC/B,gBAAgB,EAAE,OAAO,GAAG,SAAS,CAAC;IACtC,cAAc,EAAE,qBAAqB,CAAC;IACtC,WAAW,EAAE,CAAC,CAAC,aAAa,EAAE,WAAW,EAAE,SAAS,EAAE,MAAM,EAAE,SAAS,EAAE,CAAC,CAAC,GAAG,CAAC,KAAK,IAAI,CAAC,GAAG,SAAS,CAAC;IACtG,WAAW,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;IACzC,UAAU,CAAC,EAAE,MAAM,IAAI,CAAC;IACxB,cAAc,EAAE,CAAC,SAAS,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,KAAK,IAAI,CAAC;IAC5D,aAAa,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC9B,eAAe,EAAE,yBAAyB,CAAC,UAAU,CAAC,YAAY,CAAC,GAAG,CAAC,CAAC,GAAG,SAAS,CAAC;IACrF,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,KAAK,CAAC,EAAE,OAAO,CAAC;CACjB;AAED,QAAA,MAAM,KAAK,wFAoGV,CAAC;AAEF,eAAe,KAAK,CAAC"}

package/table/thead.js

@@ -0,0 +1,46 @@
+import { __assign } from "tslib";
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import clsx from 'clsx';
+import React from 'react';
+import SelectionControl from './selection-control';
+import { focusMarkers } from './use-selection';
+import { fireNonCancelableEvent } from '../internal/events';
+import { getColumnKey } from './utils';
+import { TableHeaderCell } from './header-cell';
+import { Resizer } from './resizer';
+import { useColumnWidths } from './use-column-widths';
+import styles from './styles.css.js';
+import headerCellStyles from './header-cell/styles.css.js';
+var Thead = React.forwardRef(function (_a, outerRef) {
+    var containerWidth = _a.containerWidth, selectionType = _a.selectionType, selectAllProps = _a.selectAllProps, columnDefinitions = _a.columnDefinitions, sortingColumn = _a.sortingColumn, sortingDisabled = _a.sortingDisabled, sortingDescending = _a.sortingDescending, resizableColumns = _a.resizableColumns, variant = _a.variant, wrapLines = _a.wrapLines, onFocusMove = _a.onFocusMove, onCellFocus = _a.onCellFocus, onCellBlur = _a.onCellBlur, onSortingChange = _a.onSortingChange, onResizeFinish = _a.onResizeFinish, _b = _a.showFocusRing, showFocusRing = _b === void 0 ? null : _b, _c = _a.sticky, sticky = _c === void 0 ? false : _c, _d = _a.hidden, hidden = _d === void 0 ? false : _d, _e = _a.stuck, stuck = _e === void 0 ? false : _e;
+    var headerCellClass = clsx(headerCellStyles['header-cell'], headerCellStyles["header-cell-variant-".concat(variant)], sticky && headerCellStyles['header-cell-sticky'], stuck && headerCellStyles['header-cell-stuck']);
+    var selectionCellClass = clsx(styles['selection-control'], styles['selection-control-header']);
+    var _f = useColumnWidths(), columnWidths = _f.columnWidths, totalWidth = _f.totalWidth, updateColumn = _f.updateColumn;
+    return (React.createElement("thead", { className: clsx(!hidden && styles['thead-active']) },
+        React.createElement("tr", __assign({}, focusMarkers.all, { ref: outerRef }),
+            selectionType === 'multi' && (React.createElement("th", { className: clsx(headerCellClass, selectionCellClass), scope: "col" },
+                React.createElement(SelectionControl, __assign({ onFocusDown: function (event) { return onFocusMove(event.target, -1, +1); } }, selectAllProps, (hidden ? { tabIndex: -1 } : {}))))),
+            selectionType === 'single' && (React.createElement("th", { className: clsx(headerCellClass, selectionCellClass), scope: "col" },
+                React.createElement("span", { "aria-hidden": true }, "\u00A0"))),
+            columnDefinitions.map(function (column, colIndex) {
+                var widthOverride;
+                if (resizableColumns) {
+                    if (columnWidths) {
+                        // use stateful value if available
+                        widthOverride = columnWidths[getColumnKey(column, colIndex)];
+                    }
+                    if (colIndex === columnDefinitions.length - 1 && containerWidth && containerWidth > totalWidth) {
+                        // let the last column grow and fill the container width
+                        widthOverride = 'auto';
+                    }
+                }
+                return (React.createElement(TableHeaderCell, { key: getColumnKey(column, colIndex), className: headerCellClass, style: {
+                        width: widthOverride || column.width,
+                        minWidth: sticky ? undefined : column.minWidth,
+                        maxWidth: resizableColumns || sticky ? undefined : column.maxWidth
+                    }, tabIndex: sticky ? -1 : 0, showFocusRing: colIndex === showFocusRing, column: column, activeSortingColumn: sortingColumn, sortingDescending: sortingDescending, sortingDisabled: sortingDisabled, wrapLines: wrapLines, resizer: resizableColumns && (React.createElement(Resizer, { onDragMove: function (newWidth) { return updateColumn(colIndex, newWidth); }, onFinish: function () { return onResizeFinish(columnWidths); } })), onClick: function (detail) { return fireNonCancelableEvent(onSortingChange, detail); }, onFocus: function () { return onCellFocus === null || onCellFocus === void 0 ? void 0 : onCellFocus(colIndex); }, onBlur: onCellBlur }));
+            }))));
+});
+export default Thead;
+//# sourceMappingURL=thead.js.map

package/table/thead.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"thead.js","sourceRoot":"","sources":["../../../src/table/thead.tsx"],"names":[],"mappings":";AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,IAAI,MAAM,MAAM,CAAC;AACxB,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,gBAA2C,MAAM,qBAAqB,CAAC;AAC9E,OAAO,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAC/C,OAAO,EAAE,sBAAsB,EAA6B,MAAM,oBAAoB,CAAC;AACvF,OAAO,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AACvC,OAAO,EAAE,eAAe,EAAE,MAAM,eAAe,CAAC;AAChD,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AACpC,OAAO,EAAE,eAAe,EAAE,MAAM,qBAAqB,CAAC;AACtD,OAAO,MAAM,MAAM,iBAAiB,CAAC;AACrC,OAAO,gBAAgB,MAAM,6BAA6B,CAAC;AAwB3D,IAAM,KAAK,GAAG,KAAK,CAAC,UAAU,CAC5B,UACE,EAoBa,EACb,QAAwC;QApBtC,cAAc,oBAAA,EACd,aAAa,mBAAA,EACb,cAAc,oBAAA,EACd,iBAAiB,uBAAA,EACjB,aAAa,mBAAA,EACb,eAAe,qBAAA,EACf,iBAAiB,uBAAA,EACjB,gBAAgB,sBAAA,EAChB,OAAO,aAAA,EACP,SAAS,eAAA,EACT,WAAW,iBAAA,EACX,WAAW,iBAAA,EACX,UAAU,gBAAA,EACV,eAAe,qBAAA,EACf,cAAc,oBAAA,EACd,qBAAoB,EAApB,aAAa,mBAAG,IAAI,KAAA,EACpB,cAAc,EAAd,MAAM,mBAAG,KAAK,KAAA,EACd,cAAc,EAAd,MAAM,mBAAG,KAAK,KAAA,EACd,aAAa,EAAb,KAAK,mBAAG,KAAK,KAAA;IAIf,IAAM,eAAe,GAAG,IAAI,CAC1B,gBAAgB,CAAC,aAAa,CAAC,EAC/B,gBAAgB,CAAC,8BAAuB,OAAO,CAAE,CAAC,EAClD,MAAM,IAAI,gBAAgB,CAAC,oBAAoB,CAAC,EAChD,KAAK,IAAI,gBAAgB,CAAC,mBAAmB,CAAC,CAC/C,CAAC;IACF,IAAM,kBAAkB,GAAG,IAAI,CAAC,MAAM,CAAC,mBAAmB,CAAC,EAAE,MAAM,CAAC,0BAA0B,CAAC,CAAC,CAAC;IAC3F,IAAA,KAA6C,eAAe,EAAE,EAA5D,YAAY,kBAAA,EAAE,UAAU,gBAAA,EAAE,YAAY,kBAAsB,CAAC;IAErE,OAAO,CACL,+BAAO,SAAS,EAAE,IAAI,CAAC,CAAC,MAAM,IAAI,MAAM,CAAC,cAAc,CAAC,CAAC;QACvD,uCAAQ,YAAY,CAAC,GAAG,IAAE,GAAG,EAAE,QAAQ;YACpC,aAAa,KAAK,OAAO,IAAI,CAC5B,4BAAI,SAAS,EAAE,IAAI,CAAC,eAAe,EAAE,kBAAkB,CAAC,EAAE,KAAK,EAAC,KAAK;gBACnE,oBAAC,gBAAgB,aACf,WAAW,EAAE,UAAA,KAAK,IAAI,OAAA,WAAY,CAAC,KAAK,CAAC,MAAqB,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,EAAjD,CAAiD,IACnE,cAAc,EACd,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,QAAQ,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC,EACpC,CACC,CACN;YACA,aAAa,KAAK,QAAQ,IAAI,CAC7B,4BAAI,SAAS,EAAE,IAAI,CAAC,eAAe,EAAE,kBAAkB,CAAC,EAAE,KAAK,EAAC,KAAK;gBACnE,6CAAmB,IAAI,aAGhB,CACJ,CACN;YACA,iBAAiB,CAAC,GAAG,CAAC,UAAC,MAAM,EAAE,QAAQ;gBACtC,IAAI,aAAa,CAAC;gBAClB,IAAI,gBAAgB,EAAE;oBACpB,IAAI,YAAY,EAAE;wBAChB,kCAAkC;wBAClC,aAAa,GAAG,YAAY,CAAC,YAAY,CAAC,MAAM,EAAE,QAAQ,CAAC,CAAC,CAAC;qBAC9D;oBACD,IAAI,QAAQ,KAAK,iBAAiB,CAAC,MAAM,GAAG,CAAC,IAAI,cAAc,IAAI,cAAc,GAAG,UAAU,EAAE;wBAC9F,wDAAwD;wBACxD,aAAa,GAAG,MAAM,CAAC;qBACxB;iBACF;gBACD,OAAO,CACL,oBAAC,eAAe,IACd,GAAG,EAAE,YAAY,CAAC,MAAM,EAAE,QAAQ,CAAC,EACnC,SAAS,EAAE,eAAe,EAC1B,KAAK,EAAE;wBACL,KAAK,EAAE,aAAa,IAAI,MAAM,CAAC,KAAK;wBACpC,QAAQ,EAAE,MAAM,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,MAAM,CAAC,QAAQ;wBAC9C,QAAQ,EAAE,gBAAgB,IAAI,MAAM,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,MAAM,CAAC,QAAQ;qBACnE,EACD,QAAQ,EAAE,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,EACzB,aAAa,EAAE,QAAQ,KAAK,aAAa,EACzC,MAAM,EAAE,MAAM,EACd,mBAAmB,EAAE,aAAa,EAClC,iBAAiB,EAAE,iBAAiB,EACpC,eAAe,EAAE,eAAe,EAChC,SAAS,EAAE,SAAS,EACpB,OAAO,EACL,gBAAgB,IAAI,CAClB,oBAAC,OAAO,IACN,UAAU,EAAE,UAAA,QAAQ,IAAI,OAAA,YAAY,CAAC,QAAQ,EAAE,QAAQ,CAAC,EAAhC,CAAgC,EACxD,QAAQ,EAAE,cAAM,OAAA,cAAc,CAAC,YAAY,CAAC,EAA5B,CAA4B,GAC5C,CACH,EAEH,OAAO,EAAE,UAAA,MAAM,IAAI,OAAA,sBAAsB,CAAC,eAAe,EAAE,MAAM,CAAC,EAA/C,CAA+C,EAClE,OAAO,EAAE,cAAM,OAAA,WAAW,aAAX,WAAW,uBAAX,WAAW,CAAG,QAAQ,CAAC,EAAvB,CAAuB,EACtC,MAAM,EAAE,UAAU,GAClB,CACH,CAAC;YACJ,CAAC,CAAC,CACC,CACC,CACT,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,KAAK,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport clsx from 'clsx';\nimport React from 'react';\nimport { TableProps } from './interfaces';\nimport SelectionControl, { SelectionControlProps } from './selection-control';\nimport { focusMarkers } from './use-selection';\nimport { fireNonCancelableEvent, NonCancelableEventHandler } from '../internal/events';\nimport { getColumnKey } from './utils';\nimport { TableHeaderCell } from './header-cell';\nimport { Resizer } from './resizer';\nimport { useColumnWidths } from './use-column-widths';\nimport styles from './styles.css.js';\nimport headerCellStyles from './header-cell/styles.css.js';\n\nexport interface TheadProps {\n  containerWidth: number | null;\n  selectionType: TableProps.SelectionType | undefined;\n  columnDefinitions: ReadonlyArray<TableProps.ColumnDefinition<any>>;\n  sortingColumn: TableProps.SortingColumn<any> | undefined;\n  sortingDescending: boolean | undefined;\n  sortingDisabled: boolean | undefined;\n  variant: TableProps.Variant;\n  wrapLines: boolean | undefined;\n  resizableColumns: boolean | undefined;\n  selectAllProps: SelectionControlProps;\n  onFocusMove: ((sourceElement: HTMLElement, fromIndex: number, direction: -1 | 1) => void) | undefined;\n  onCellFocus?: (colIndex: number) => void;\n  onCellBlur?: () => void;\n  onResizeFinish: (newWidths: Record<string, number>) => void;\n  showFocusRing?: number | null;\n  onSortingChange: NonCancelableEventHandler<TableProps.SortingState<any>> | undefined;\n  sticky?: boolean;\n  hidden?: boolean;\n  stuck?: boolean;\n}\n\nconst Thead = React.forwardRef(\n  (\n    {\n      containerWidth,\n      selectionType,\n      selectAllProps,\n      columnDefinitions,\n      sortingColumn,\n      sortingDisabled,\n      sortingDescending,\n      resizableColumns,\n      variant,\n      wrapLines,\n      onFocusMove,\n      onCellFocus,\n      onCellBlur,\n      onSortingChange,\n      onResizeFinish,\n      showFocusRing = null,\n      sticky = false,\n      hidden = false,\n      stuck = false,\n    }: TheadProps,\n    outerRef: React.Ref<HTMLTableRowElement>\n  ) => {\n    const headerCellClass = clsx(\n      headerCellStyles['header-cell'],\n      headerCellStyles[`header-cell-variant-${variant}`],\n      sticky && headerCellStyles['header-cell-sticky'],\n      stuck && headerCellStyles['header-cell-stuck']\n    );\n    const selectionCellClass = clsx(styles['selection-control'], styles['selection-control-header']);\n    const { columnWidths, totalWidth, updateColumn } = useColumnWidths();\n\n    return (\n      <thead className={clsx(!hidden && styles['thead-active'])}>\n        <tr {...focusMarkers.all} ref={outerRef}>\n          {selectionType === 'multi' && (\n            <th className={clsx(headerCellClass, selectionCellClass)} scope=\"col\">\n              <SelectionControl\n                onFocusDown={event => onFocusMove!(event.target as HTMLElement, -1, +1)}\n                {...selectAllProps}\n                {...(hidden ? { tabIndex: -1 } : {})}\n              />\n            </th>\n          )}\n          {selectionType === 'single' && (\n            <th className={clsx(headerCellClass, selectionCellClass)} scope=\"col\">\n              <span aria-hidden={true}>\n                {/*non-empty element to prevent table cell from collapsing in IE */}\n                &nbsp;\n              </span>\n            </th>\n          )}\n          {columnDefinitions.map((column, colIndex) => {\n            let widthOverride;\n            if (resizableColumns) {\n              if (columnWidths) {\n                // use stateful value if available\n                widthOverride = columnWidths[getColumnKey(column, colIndex)];\n              }\n              if (colIndex === columnDefinitions.length - 1 && containerWidth && containerWidth > totalWidth) {\n                // let the last column grow and fill the container width\n                widthOverride = 'auto';\n              }\n            }\n            return (\n              <TableHeaderCell\n                key={getColumnKey(column, colIndex)}\n                className={headerCellClass}\n                style={{\n                  width: widthOverride || column.width,\n                  minWidth: sticky ? undefined : column.minWidth,\n                  maxWidth: resizableColumns || sticky ? undefined : column.maxWidth,\n                }}\n                tabIndex={sticky ? -1 : 0}\n                showFocusRing={colIndex === showFocusRing}\n                column={column}\n                activeSortingColumn={sortingColumn}\n                sortingDescending={sortingDescending}\n                sortingDisabled={sortingDisabled}\n                wrapLines={wrapLines}\n                resizer={\n                  resizableColumns && (\n                    <Resizer\n                      onDragMove={newWidth => updateColumn(colIndex, newWidth)}\n                      onFinish={() => onResizeFinish(columnWidths)}\n                    />\n                  )\n                }\n                onClick={detail => fireNonCancelableEvent(onSortingChange, detail)}\n                onFocus={() => onCellFocus?.(colIndex)}\n                onBlur={onCellBlur}\n              />\n            );\n          })}\n        </tr>\n      </thead>\n    );\n  }\n);\n\nexport default Thead;\n"]}

package/table/tools-header.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+interface ToolsHeaderProps {
+    header: React.ReactNode;
+    filter?: React.ReactNode;
+    pagination?: React.ReactNode;
+    preferences?: React.ReactNode;
+}
+export default function ToolsHeader({ header, filter, pagination, preferences }: ToolsHeaderProps): JSX.Element;
+export {};
+//# sourceMappingURL=tools-header.d.ts.map

package/table/tools-header.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tools-header.d.ts","sourceRoot":"","sources":["../../../src/table/tools-header.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,UAAU,gBAAgB;IACxB,MAAM,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,UAAU,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC7B,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC/B;AAED,MAAM,CAAC,OAAO,UAAU,WAAW,CAAC,EAAE,MAAM,EAAE,MAAM,EAAE,UAAU,EAAE,WAAW,EAAE,EAAE,gBAAgB,eAkBhG"}

package/table/tools-header.js

@@ -0,0 +1,20 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import clsx from 'clsx';
+import React from 'react';
+import { useContainerBreakpoints } from '../internal/hooks/container-queries';
+import styles from './styles.css.js';
+export default function ToolsHeader(_a) {
+    var header = _a.header, filter = _a.filter, pagination = _a.pagination, preferences = _a.preferences;
+    var _b = useContainerBreakpoints(['xs']), breakpoint = _b[0], ref = _b[1];
+    var isSmall = breakpoint === 'default';
+    var hasTools = filter || pagination || preferences;
+    return (React.createElement(React.Fragment, null,
+        header,
+        hasTools && (React.createElement("div", { ref: ref, className: clsx(styles.tools, isSmall && styles['tools-small']) },
+            filter && React.createElement("div", { className: styles['tools-filtering'] }, filter),
+            React.createElement("div", { className: styles['tools-align-right'] },
+                pagination && React.createElement("div", { className: styles['tools-pagination'] }, pagination),
+                preferences && React.createElement("div", { className: styles['tools-preferences'] }, preferences))))));
+}
+//# sourceMappingURL=tools-header.js.map

package/table/tools-header.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tools-header.js","sourceRoot":"","sources":["../../../src/table/tools-header.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,IAAI,MAAM,MAAM,CAAC;AACxB,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,uBAAuB,EAAE,MAAM,qCAAqC,CAAC;AAC9E,OAAO,MAAM,MAAM,iBAAiB,CAAC;AASrC,MAAM,CAAC,OAAO,UAAU,WAAW,CAAC,EAA6D;QAA3D,MAAM,YAAA,EAAE,MAAM,YAAA,EAAE,UAAU,gBAAA,EAAE,WAAW,iBAAA;IACrE,IAAA,KAAoB,uBAAuB,CAAC,CAAC,IAAI,CAAC,CAAC,EAAlD,UAAU,QAAA,EAAE,GAAG,QAAmC,CAAC;IAC1D,IAAM,OAAO,GAAG,UAAU,KAAK,SAAS,CAAC;IACzC,IAAM,QAAQ,GAAG,MAAM,IAAI,UAAU,IAAI,WAAW,CAAC;IACrD,OAAO,CACL;QACG,MAAM;QACN,QAAQ,IAAI,CACX,6BAAK,GAAG,EAAE,GAAG,EAAE,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,KAAK,EAAE,OAAO,IAAI,MAAM,CAAC,aAAa,CAAC,CAAC;YAC3E,MAAM,IAAI,6BAAK,SAAS,EAAE,MAAM,CAAC,iBAAiB,CAAC,IAAG,MAAM,CAAO;YACpE,6BAAK,SAAS,EAAE,MAAM,CAAC,mBAAmB,CAAC;gBACxC,UAAU,IAAI,6BAAK,SAAS,EAAE,MAAM,CAAC,kBAAkB,CAAC,IAAG,UAAU,CAAO;gBAC5E,WAAW,IAAI,6BAAK,SAAS,EAAE,MAAM,CAAC,mBAAmB,CAAC,IAAG,WAAW,CAAO,CAC5E,CACF,CACP,CACA,CACJ,CAAC;AACJ,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport clsx from 'clsx';\nimport React from 'react';\nimport { useContainerBreakpoints } from '../internal/hooks/container-queries';\nimport styles from './styles.css.js';\n\ninterface ToolsHeaderProps {\n  header: React.ReactNode;\n  filter?: React.ReactNode;\n  pagination?: React.ReactNode;\n  preferences?: React.ReactNode;\n}\n\nexport default function ToolsHeader({ header, filter, pagination, preferences }: ToolsHeaderProps) {\n  const [breakpoint, ref] = useContainerBreakpoints(['xs']);\n  const isSmall = breakpoint === 'default';\n  const hasTools = filter || pagination || preferences;\n  return (\n    <>\n      {header}\n      {hasTools && (\n        <div ref={ref} className={clsx(styles.tools, isSmall && styles['tools-small'])}>\n          {filter && <div className={styles['tools-filtering']}>{filter}</div>}\n          <div className={styles['tools-align-right']}>\n            {pagination && <div className={styles['tools-pagination']}>{pagination}</div>}\n            {preferences && <div className={styles['tools-preferences']}>{preferences}</div>}\n          </div>\n        </div>\n      )}\n    </>\n  );\n}\n"]}