@cloudscape-design/components 3.0.0

package/table/use-sticky-scrollbar.js

@@ -0,0 +1,114 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import { ResizeObserver } from '@juggle/resize-observer';
+import { useEffect, useState } from 'react';
+import styles from './styles.css.js';
+import { getOverflowParentDimensions } from '../internal/utils/scrollable-containers';
+import { browserScrollbarSize } from '../internal/utils/browser-scrollbar-size';
+import { supportsStickyPosition, getContainingBlock } from '../internal/utils/dom';
+var updatePosition = function (tableEl, wrapperEl, scrollbarEl, scrollbarContentEl, hasContainingBlock, consideredFooterHeight) {
+    if (!tableEl || !scrollbarEl || !wrapperEl) {
+        return;
+    }
+    // parent is either some container or document itself
+    var parent = getOverflowParentDimensions(wrapperEl)[0];
+    var parentBottom = parent.top + parent.height;
+    // table bottom is visible when
+    // 1. table bottom reached end of the window
+    // 2. table bottom is not overlapped by footer
+    var _a = tableEl.getBoundingClientRect(), tableTop = _a.top, tableBottom = _a.bottom, tableWidth = _a.width;
+    var wrapperWidth = wrapperEl.getBoundingClientRect().width;
+    //scrollbar correction is needed for
+    // #1 when scrollbars are constantly visible,
+    // we want no visible break when switching between fake and real scrollbars
+    // #2 when scrollbars are visible only on scrolling and half transparent (on mac)
+    // we want to avoid any overlap between fake and real scrollbar
+    // using 15 px as a height of transparent scrollbar on mac
+    var scrollbarHeight = browserScrollbarSize().height;
+    var scrollBarCorrection = scrollbarHeight > 0 ? scrollbarHeight : -15 / 2;
+    var tableBottomIsVisible = parentBottom - consideredFooterHeight >= tableBottom + scrollBarCorrection;
+    var tableTopIsHidden = tableTop >= parentBottom - consideredFooterHeight - scrollBarCorrection;
+    var areaIsScrollable = tableWidth > wrapperWidth;
+    if (tableBottomIsVisible || tableTopIsHidden || !areaIsScrollable) {
+        scrollbarEl.classList.remove(styles['sticky-scrollbar-visible']);
+    }
+    else {
+        // when scrollbar is not displayed scrollLeft property cannot be set by useScrollSync
+        // that's why syncing it separately
+        if (!scrollbarEl.classList.contains(styles['sticky-scrollbar-visible'])) {
+            requestAnimationFrame(function () {
+                scrollbarEl.scrollLeft = wrapperEl.scrollLeft;
+            });
+        }
+        scrollbarEl.classList.add(styles['sticky-scrollbar-visible']);
+    }
+    if (scrollbarHeight && scrollbarEl && scrollbarContentEl) {
+        scrollbarEl.style.height = "".concat(scrollbarHeight, "px");
+        scrollbarContentEl.style.height = "".concat(scrollbarHeight, "px");
+    }
+    if (tableEl && wrapperEl && scrollbarContentEl && scrollbarEl) {
+        var parent_1 = getOverflowParentDimensions(wrapperEl)[0];
+        var wrapperElRect = wrapperEl.getBoundingClientRect();
+        var tableElRect = tableEl.getBoundingClientRect();
+        scrollbarEl.style.width = "".concat(wrapperElRect.width, "px");
+        scrollbarContentEl.style.width = "".concat(tableElRect.width, "px");
+        // when using sticky scrollbars in containers
+        // we agreed to ignore dynamic bottom calculations for footer overlap
+        scrollbarEl.style.left = hasContainingBlock ? '0px' : "".concat(wrapperElRect.left, "px");
+        scrollbarEl.style.top = hasContainingBlock
+            ? '0px'
+            : "".concat(Math.min(parent_1.top + parent_1.height, window.innerHeight - consideredFooterHeight), "px");
+    }
+};
+export function useStickyScrollbar(scrollbarRef, scrollbarContentRef, tableRef, wrapperRef, footerHeight) {
+    // We don't take into account containing-block calculations because that would
+    // unnecessarily overcomplicate the position logic. For now, we assume that a
+    // containing block, if present, is below the app layout and above the overflow
+    // parent, which is a pretty safe assumption.
+    var _a = useState(false), hasContainingBlock = _a[0], setHasContainingBlock = _a[1];
+    var consideredFooterHeight = hasContainingBlock ? 0 : footerHeight;
+    useEffect(function () {
+        if (supportsStickyPosition()) {
+            var scrollHandler_1 = function () {
+                updatePosition(tableRef.current, wrapperRef.current, scrollbarRef.current, scrollbarContentRef.current, hasContainingBlock, consideredFooterHeight);
+            };
+            scrollHandler_1();
+            window.addEventListener('scroll', scrollHandler_1, true);
+            return function () {
+                window.removeEventListener('scroll', scrollHandler_1, true);
+            };
+        }
+    }, [scrollbarRef, tableRef, wrapperRef, consideredFooterHeight, scrollbarContentRef, hasContainingBlock]);
+    var wrapperEl = wrapperRef.current;
+    useEffect(function () {
+        if (wrapperEl && supportsStickyPosition()) {
+            setHasContainingBlock(!!getContainingBlock(wrapperEl));
+        }
+    }, [wrapperEl]);
+    useEffect(function () {
+        if (supportsStickyPosition() && tableRef.current) {
+            var observer_1 = new ResizeObserver(function (entries) {
+                if (scrollbarContentRef.current) {
+                    scrollbarContentRef.current.style.width = "".concat(entries[0].borderBoxSize[0].inlineSize, "px");
+                    updatePosition(tableRef.current, wrapperRef.current, scrollbarRef.current, scrollbarContentRef.current, hasContainingBlock, consideredFooterHeight);
+                }
+            });
+            observer_1.observe(tableRef.current);
+            return function () {
+                observer_1.disconnect();
+            };
+        }
+    }, [scrollbarContentRef, scrollbarRef, tableRef, wrapperRef, consideredFooterHeight, hasContainingBlock]);
+    useEffect(function () {
+        if (supportsStickyPosition()) {
+            var resizeHandler_1 = function () {
+                updatePosition(tableRef.current, wrapperRef.current, scrollbarRef.current, scrollbarContentRef.current, hasContainingBlock, consideredFooterHeight);
+            };
+            window.addEventListener('resize', resizeHandler_1);
+            return function () {
+                window.removeEventListener('resize', resizeHandler_1);
+            };
+        }
+    }, [tableRef, wrapperRef, scrollbarRef, scrollbarContentRef, hasContainingBlock, consideredFooterHeight]);
+}
+//# sourceMappingURL=use-sticky-scrollbar.js.map

package/table/use-sticky-scrollbar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-sticky-scrollbar.js","sourceRoot":"","sources":["../../../src/table/use-sticky-scrollbar.ts"],"names":[],"mappings":"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","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport { ResizeObserver } from '@juggle/resize-observer';\nimport { RefObject, useEffect, useState } from 'react';\nimport styles from './styles.css.js';\n\nimport { getOverflowParentDimensions } from '../internal/utils/scrollable-containers';\nimport { browserScrollbarSize } from '../internal/utils/browser-scrollbar-size';\nimport { supportsStickyPosition, getContainingBlock } from '../internal/utils/dom';\n\nconst updatePosition = (\n  tableEl: HTMLElement | null,\n  wrapperEl: HTMLElement | null,\n  scrollbarEl: HTMLElement | null,\n  scrollbarContentEl: HTMLElement | null,\n  hasContainingBlock: boolean,\n  consideredFooterHeight: number\n) => {\n  if (!tableEl || !scrollbarEl || !wrapperEl) {\n    return;\n  }\n\n  // parent is either some container or document itself\n  const parent = getOverflowParentDimensions(wrapperEl)[0];\n  const parentBottom = parent.top + parent.height;\n\n  // table bottom is visible when\n  // 1. table bottom reached end of the window\n  // 2. table bottom is not overlapped by footer\n  const { top: tableTop, bottom: tableBottom, width: tableWidth } = tableEl.getBoundingClientRect();\n  const { width: wrapperWidth } = wrapperEl.getBoundingClientRect();\n\n  //scrollbar correction is needed for\n  // #1 when scrollbars are constantly visible,\n  // we want no visible break when switching between fake and real scrollbars\n  // #2 when scrollbars are visible only on scrolling and half transparent (on mac)\n  // we want to avoid any overlap between fake and real scrollbar\n  // using 15 px as a height of transparent scrollbar on mac\n  const scrollbarHeight = browserScrollbarSize().height;\n  const scrollBarCorrection = scrollbarHeight > 0 ? scrollbarHeight : -15 / 2;\n  const tableBottomIsVisible = parentBottom - consideredFooterHeight >= tableBottom + scrollBarCorrection;\n  const tableTopIsHidden = tableTop >= parentBottom - consideredFooterHeight - scrollBarCorrection;\n  const areaIsScrollable = tableWidth > wrapperWidth;\n\n  if (tableBottomIsVisible || tableTopIsHidden || !areaIsScrollable) {\n    scrollbarEl.classList.remove(styles['sticky-scrollbar-visible']);\n  } else {\n    // when scrollbar is not displayed scrollLeft property cannot be set by useScrollSync\n    // that's why syncing it separately\n    if (!scrollbarEl.classList.contains(styles['sticky-scrollbar-visible'])) {\n      requestAnimationFrame(() => {\n        scrollbarEl.scrollLeft = wrapperEl.scrollLeft;\n      });\n    }\n\n    scrollbarEl.classList.add(styles['sticky-scrollbar-visible']);\n  }\n\n  if (scrollbarHeight && scrollbarEl && scrollbarContentEl) {\n    scrollbarEl.style.height = `${scrollbarHeight}px`;\n    scrollbarContentEl.style.height = `${scrollbarHeight}px`;\n  }\n\n  if (tableEl && wrapperEl && scrollbarContentEl && scrollbarEl) {\n    const parent = getOverflowParentDimensions(wrapperEl)[0];\n\n    const wrapperElRect = wrapperEl.getBoundingClientRect();\n    const tableElRect = tableEl.getBoundingClientRect();\n    scrollbarEl.style.width = `${wrapperElRect.width}px`;\n    scrollbarContentEl.style.width = `${tableElRect.width}px`;\n\n    // when using sticky scrollbars in containers\n    // we agreed to ignore dynamic bottom calculations for footer overlap\n    scrollbarEl.style.left = hasContainingBlock ? '0px' : `${wrapperElRect.left}px`;\n    scrollbarEl.style.top = hasContainingBlock\n      ? '0px'\n      : `${Math.min(parent.top + parent.height, window.innerHeight - consideredFooterHeight)}px`;\n  }\n};\n\nexport function useStickyScrollbar(\n  scrollbarRef: RefObject<HTMLDivElement>,\n  scrollbarContentRef: RefObject<HTMLDivElement>,\n  tableRef: RefObject<HTMLTableElement>,\n  wrapperRef: RefObject<HTMLDivElement>,\n  footerHeight: number\n) {\n  // We don't take into account containing-block calculations because that would\n  // unnecessarily overcomplicate the position logic. For now, we assume that a\n  // containing block, if present, is below the app layout and above the overflow\n  // parent, which is a pretty safe assumption.\n  const [hasContainingBlock, setHasContainingBlock] = useState(false);\n  const consideredFooterHeight = hasContainingBlock ? 0 : footerHeight;\n\n  useEffect(() => {\n    if (supportsStickyPosition()) {\n      const scrollHandler = () => {\n        updatePosition(\n          tableRef.current,\n          wrapperRef.current,\n          scrollbarRef.current,\n          scrollbarContentRef.current,\n          hasContainingBlock,\n          consideredFooterHeight\n        );\n      };\n      scrollHandler();\n      window.addEventListener('scroll', scrollHandler, true);\n      return () => {\n        window.removeEventListener('scroll', scrollHandler, true);\n      };\n    }\n  }, [scrollbarRef, tableRef, wrapperRef, consideredFooterHeight, scrollbarContentRef, hasContainingBlock]);\n\n  const wrapperEl = wrapperRef.current;\n  useEffect(() => {\n    if (wrapperEl && supportsStickyPosition()) {\n      setHasContainingBlock(!!getContainingBlock(wrapperEl));\n    }\n  }, [wrapperEl]);\n\n  useEffect(() => {\n    if (supportsStickyPosition() && tableRef.current) {\n      const observer = new ResizeObserver(entries => {\n        if (scrollbarContentRef.current) {\n          scrollbarContentRef.current.style.width = `${entries[0].borderBoxSize[0].inlineSize}px`;\n          updatePosition(\n            tableRef.current,\n            wrapperRef.current,\n            scrollbarRef.current,\n            scrollbarContentRef.current,\n            hasContainingBlock,\n            consideredFooterHeight\n          );\n        }\n      });\n      observer.observe(tableRef.current);\n      return () => {\n        observer.disconnect();\n      };\n    }\n  }, [scrollbarContentRef, scrollbarRef, tableRef, wrapperRef, consideredFooterHeight, hasContainingBlock]);\n\n  useEffect(() => {\n    if (supportsStickyPosition()) {\n      const resizeHandler = () => {\n        updatePosition(\n          tableRef.current,\n          wrapperRef.current,\n          scrollbarRef.current,\n          scrollbarContentRef.current,\n          hasContainingBlock,\n          consideredFooterHeight\n        );\n      };\n      window.addEventListener('resize', resizeHandler);\n      return () => {\n        window.removeEventListener('resize', resizeHandler);\n      };\n    }\n  }, [tableRef, wrapperRef, scrollbarRef, scrollbarContentRef, hasContainingBlock, consideredFooterHeight]);\n}\n"]}

package/table/utils.d.ts

@@ -0,0 +1,9 @@
+import { InternalContainerProps } from '../container/internal';
+import { TableProps } from './interfaces';
+export declare const applyTrackBy: <T>(trackBy: TableProps.TrackBy<T>, item: T) => any;
+export declare const getItemKey: <T>(trackBy: TableProps.TrackBy<T> | undefined, item: T, index: number) => any;
+export declare const getTrackableValue: <T>(trackBy: TableProps.TrackBy<T> | undefined, item: T) => any;
+export declare const getColumnKey: <T>(column: TableProps.ColumnDefinition<T>, index: number) => string | number;
+export declare const toContainerVariant: (variant: TableProps.Variant | undefined) => InternalContainerProps['variant'];
+export declare function checkSortingState<T>(columnDefinitions: ReadonlyArray<TableProps.ColumnDefinition<T>>, sortingComparator: TableProps.SortingColumn<T>['sortingComparator']): void;
+//# sourceMappingURL=utils.d.ts.map

package/table/utils.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../../src/table/utils.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,sBAAsB,EAAE,MAAM,uBAAuB,CAAC;AAC/D,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAG1C,eAAO,MAAM,YAAY,qDAKxB,CAAC;AAEF,eAAO,MAAM,UAAU,kEAAmE,MAAM,QAK/F,CAAC;AAEF,eAAO,MAAM,iBAAiB,iEAK7B,CAAC;AAEF,eAAO,MAAM,YAAY,qDAAsD,MAAM,oBAEpF,CAAC;AAEF,eAAO,MAAM,kBAAkB,YAAa,WAAW,OAAO,GAAG,SAAS,KAAG,sBAAsB,CAAC,SAAS,CAG5G,CAAC;AAEF,wBAAgB,iBAAiB,CAAC,CAAC,EACjC,iBAAiB,EAAE,aAAa,CAAC,UAAU,CAAC,gBAAgB,CAAC,CAAC,CAAC,CAAC,EAChE,iBAAiB,EAAE,UAAU,CAAC,aAAa,CAAC,CAAC,CAAC,CAAC,mBAAmB,CAAC,QASpE"}

package/table/utils.js

@@ -0,0 +1,33 @@
+import { warnOnce } from '../internal/logging';
+export var applyTrackBy = function (trackBy, item) {
+    if (typeof trackBy === 'function') {
+        return trackBy(item);
+    }
+    return item[trackBy];
+};
+export var getItemKey = function (trackBy, item, index) {
+    if (!trackBy) {
+        return index;
+    }
+    return applyTrackBy(trackBy, item);
+};
+export var getTrackableValue = function (trackBy, item) {
+    if (!trackBy) {
+        return item;
+    }
+    return applyTrackBy(trackBy, item);
+};
+export var getColumnKey = function (column, index) {
+    return column.id || index;
+};
+export var toContainerVariant = function (variant) {
+    var isDefaultVariant = !variant || variant === 'container';
+    return isDefaultVariant ? 'default' : variant;
+};
+export function checkSortingState(columnDefinitions, sortingComparator) {
+    var matchedColumn = columnDefinitions.filter(function (column) { return column.sortingComparator === sortingComparator; })[0];
+    if (!matchedColumn) {
+        warnOnce('Table', 'Currently active sorting comparator was not found in any columns. Make sure to provide the same comparator function instance on each render.');
+    }
+}
+//# sourceMappingURL=utils.js.map

package/table/utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.js","sourceRoot":"","sources":["../../../src/table/utils.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,QAAQ,EAAE,MAAM,qBAAqB,CAAC;AAE/C,MAAM,CAAC,IAAM,YAAY,GAAG,UAAI,OAA8B,EAAE,IAAO;IACrE,IAAI,OAAO,OAAO,KAAK,UAAU,EAAE;QACjC,OAAO,OAAO,CAAC,IAAI,CAAC,CAAC;KACtB;IACD,OAAQ,IAAY,CAAC,OAAO,CAAC,CAAC;AAChC,CAAC,CAAC;AAEF,MAAM,CAAC,IAAM,UAAU,GAAG,UAAI,OAA0C,EAAE,IAAO,EAAE,KAAa;IAC9F,IAAI,CAAC,OAAO,EAAE;QACZ,OAAO,KAAK,CAAC;KACd;IACD,OAAO,YAAY,CAAC,OAAO,EAAE,IAAI,CAAC,CAAC;AACrC,CAAC,CAAC;AAEF,MAAM,CAAC,IAAM,iBAAiB,GAAG,UAAI,OAA0C,EAAE,IAAO;IACtF,IAAI,CAAC,OAAO,EAAE;QACZ,OAAO,IAAI,CAAC;KACb;IACD,OAAO,YAAY,CAAC,OAAO,EAAE,IAAI,CAAC,CAAC;AACrC,CAAC,CAAC;AAEF,MAAM,CAAC,IAAM,YAAY,GAAG,UAAI,MAAsC,EAAE,KAAa;IACnF,OAAO,MAAM,CAAC,EAAE,IAAI,KAAK,CAAC;AAC5B,CAAC,CAAC;AAEF,MAAM,CAAC,IAAM,kBAAkB,GAAG,UAAC,OAAuC;IACxE,IAAM,gBAAgB,GAAG,CAAC,OAAO,IAAI,OAAO,KAAK,WAAW,CAAC;IAC7D,OAAO,gBAAgB,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,OAAO,CAAC;AAChD,CAAC,CAAC;AAEF,MAAM,UAAU,iBAAiB,CAC/B,iBAAgE,EAChE,iBAAmE;IAEnE,IAAM,aAAa,GAAG,iBAAiB,CAAC,MAAM,CAAC,UAAA,MAAM,IAAI,OAAA,MAAM,CAAC,iBAAiB,KAAK,iBAAiB,EAA9C,CAA8C,CAAC,CAAC,CAAC,CAAC,CAAC;IAC5G,IAAI,CAAC,aAAa,EAAE;QAClB,QAAQ,CACN,OAAO,EACP,8IAA8I,CAC/I,CAAC;KACH;AACH,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport { InternalContainerProps } from '../container/internal';\nimport { TableProps } from './interfaces';\nimport { warnOnce } from '../internal/logging';\n\nexport const applyTrackBy = <T>(trackBy: TableProps.TrackBy<T>, item: T) => {\n  if (typeof trackBy === 'function') {\n    return trackBy(item);\n  }\n  return (item as any)[trackBy];\n};\n\nexport const getItemKey = <T>(trackBy: TableProps.TrackBy<T> | undefined, item: T, index: number) => {\n  if (!trackBy) {\n    return index;\n  }\n  return applyTrackBy(trackBy, item);\n};\n\nexport const getTrackableValue = <T>(trackBy: TableProps.TrackBy<T> | undefined, item: T) => {\n  if (!trackBy) {\n    return item;\n  }\n  return applyTrackBy(trackBy, item);\n};\n\nexport const getColumnKey = <T>(column: TableProps.ColumnDefinition<T>, index: number) => {\n  return column.id || index;\n};\n\nexport const toContainerVariant = (variant: TableProps.Variant | undefined): InternalContainerProps['variant'] => {\n  const isDefaultVariant = !variant || variant === 'container';\n  return isDefaultVariant ? 'default' : variant;\n};\n\nexport function checkSortingState<T>(\n  columnDefinitions: ReadonlyArray<TableProps.ColumnDefinition<T>>,\n  sortingComparator: TableProps.SortingColumn<T>['sortingComparator']\n) {\n  const matchedColumn = columnDefinitions.filter(column => column.sortingComparator === sortingComparator)[0];\n  if (!matchedColumn) {\n    warnOnce(\n      'Table',\n      'Currently active sorting comparator was not found in any columns. Make sure to provide the same comparator function instance on each render.'\n    );\n  }\n}\n"]}

package/tabs/index.d.ts

@@ -0,0 +1,5 @@
+import { TabsProps } from './interfaces';
+export { TabsProps };
+export declare const nextGeneratedId: () => string;
+export default function Tabs({ tabs, variant, onChange, activeTabId: controlledTabId, ariaLabel, ariaLabelledby, disableContentPaddings, ...rest }: TabsProps): JSX.Element;
+//# sourceMappingURL=index.d.ts.map

package/tabs/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/tabs/index.tsx"],"names":[],"mappings":"AAMA,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AASzC,OAAO,EAAE,SAAS,EAAE,CAAC;AAGrB,eAAO,MAAM,eAAe,cAA+E,CAAC;AAU5G,MAAM,CAAC,OAAO,UAAU,IAAI,CAAC,EAC3B,IAAI,EACJ,OAAmB,EACnB,QAAQ,EACR,WAAW,EAAE,eAAe,EAC5B,SAAS,EACT,cAAc,EACd,sBAA8B,EAC9B,GAAG,IAAI,EACR,EAAE,SAAS,eAqFX"}

package/tabs/index.js

@@ -0,0 +1,73 @@
+import { __assign, __rest } from "tslib";
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import React, { useState } from 'react';
+import { getBaseProps } from '../internal/base-component';
+import { fireNonCancelableEvent } from '../internal/events';
+import InternalContainer from '../container/internal';
+import clsx from 'clsx';
+import styles from './styles.css.js';
+import { TabHeaderBar } from './tab-header-bar';
+import { useControllable } from '../internal/hooks/use-controllable';
+import { applyDisplayName } from '../internal/utils/apply-display-name';
+import useBaseComponent from '../internal/hooks/use-base-component';
+import { checkSafeUrl } from '../internal/utils/check-safe-url';
+var lastGeneratedId = 0;
+export var nextGeneratedId = function () { return "awsui-tabs-".concat(lastGeneratedId++, "-").concat(Math.round(Math.random() * 10000)); };
+function firstEnabledTab(tabs) {
+    var enabledTabs = tabs.filter(function (tab) { return !tab.disabled; });
+    if (enabledTabs.length > 0) {
+        return enabledTabs[0];
+    }
+    return null;
+}
+export default function Tabs(_a) {
+    var _b, _c;
+    var tabs = _a.tabs, _d = _a.variant, variant = _d === void 0 ? 'default' : _d, onChange = _a.onChange, controlledTabId = _a.activeTabId, ariaLabel = _a.ariaLabel, ariaLabelledby = _a.ariaLabelledby, _e = _a.disableContentPaddings, disableContentPaddings = _e === void 0 ? false : _e, rest = __rest(_a, ["tabs", "variant", "onChange", "activeTabId", "ariaLabel", "ariaLabelledby", "disableContentPaddings"]);
+    for (var _i = 0, tabs_1 = tabs; _i < tabs_1.length; _i++) {
+        var tab = tabs_1[_i];
+        checkSafeUrl('Tabs', tab.href);
+    }
+    var __internalRootRef = useBaseComponent('Tabs').__internalRootRef;
+    var idNamespace = useState(function () { return nextGeneratedId(); })[0];
+    var _f = useControllable(controlledTabId, onChange, (_c = (_b = firstEnabledTab(tabs)) === null || _b === void 0 ? void 0 : _b.id) !== null && _c !== void 0 ? _c : '', {
+        componentName: 'Tabs',
+        controlledProp: 'activeTabId',
+        changeHandler: 'onChange'
+    }), activeTabId = _f[0], setActiveTabId = _f[1];
+    var baseProps = getBaseProps(rest);
+    var content = function () {
+        var _a;
+        var selectedTab = tabs.filter(function (tab) { return tab.id === activeTabId; })[0];
+        var renderContent = function (tab) {
+            var _a;
+            var isContentActive = tab === selectedTab && !selectedTab.disabled && selectedTab.content;
+            var classes = clsx((_a = {},
+                _a[styles['tabs-content']] = true,
+                _a[styles['tabs-content-active']] = isContentActive,
+                _a));
+            var contentAttributes = {
+                className: classes,
+                role: 'tabpanel',
+                id: "".concat(idNamespace, "-").concat(tab.id, "-panel"),
+                key: "".concat(idNamespace, "-").concat(tab.id, "-panel")
+            };
+            return React.createElement("div", __assign({}, contentAttributes), isContentActive && selectedTab.content);
+        };
+        return (React.createElement("div", { className: clsx(variant === 'container' ? styles['tabs-container-content-wrapper'] : styles['tabs-content-wrapper'], (_a = {},
+                _a[styles['with-paddings']] = !disableContentPaddings,
+                _a)) }, tabs.map(renderContent)));
+    };
+    var header = (React.createElement(TabHeaderBar, { activeTabId: activeTabId, variant: variant, idNamespace: idNamespace, ariaLabel: ariaLabel, ariaLabelledby: ariaLabelledby, tabs: tabs, onChange: function (changeDetail) {
+            setActiveTabId(changeDetail.activeTabId);
+            fireNonCancelableEvent(onChange, changeDetail);
+        } }));
+    if (variant === 'container') {
+        return (React.createElement(InternalContainer, __assign({ header: header, disableHeaderPaddings: true }, baseProps, { className: clsx(baseProps.className, styles.root), __internalRootRef: __internalRootRef, disableContentPaddings: disableContentPaddings }), content()));
+    }
+    return (React.createElement("div", __assign({}, baseProps, { className: clsx(baseProps.className, styles.root, styles.tabs), ref: __internalRootRef }),
+        header,
+        content()));
+}
+applyDisplayName(Tabs, 'Tabs');
+//# sourceMappingURL=index.js.map

package/tabs/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/tabs/index.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React, { useState } from 'react';\nimport { getBaseProps } from '../internal/base-component';\nimport { fireNonCancelableEvent } from '../internal/events';\nimport InternalContainer from '../container/internal';\nimport { TabsProps } from './interfaces';\nimport clsx from 'clsx';\nimport styles from './styles.css.js';\nimport { TabHeaderBar } from './tab-header-bar';\nimport { useControllable } from '../internal/hooks/use-controllable';\nimport { applyDisplayName } from '../internal/utils/apply-display-name';\nimport useBaseComponent from '../internal/hooks/use-base-component';\nimport { checkSafeUrl } from '../internal/utils/check-safe-url';\n\nexport { TabsProps };\n\nlet lastGeneratedId = 0;\nexport const nextGeneratedId = () => `awsui-tabs-${lastGeneratedId++}-${Math.round(Math.random() * 10000)}`;\n\nfunction firstEnabledTab(tabs: ReadonlyArray<TabsProps.Tab>) {\n  const enabledTabs = tabs.filter(tab => !tab.disabled);\n  if (enabledTabs.length > 0) {\n    return enabledTabs[0];\n  }\n  return null;\n}\n\nexport default function Tabs({\n  tabs,\n  variant = 'default',\n  onChange,\n  activeTabId: controlledTabId,\n  ariaLabel,\n  ariaLabelledby,\n  disableContentPaddings = false,\n  ...rest\n}: TabsProps) {\n  for (const tab of tabs) {\n    checkSafeUrl('Tabs', tab.href);\n  }\n  const { __internalRootRef } = useBaseComponent('Tabs');\n  const [idNamespace] = useState(() => nextGeneratedId());\n\n  const [activeTabId, setActiveTabId] = useControllable(controlledTabId, onChange, firstEnabledTab(tabs)?.id ?? '', {\n    componentName: 'Tabs',\n    controlledProp: 'activeTabId',\n    changeHandler: 'onChange',\n  });\n\n  const baseProps = getBaseProps(rest);\n\n  const content = () => {\n    const selectedTab = tabs.filter(tab => tab.id === activeTabId)[0];\n    const renderContent = (tab: TabsProps.Tab) => {\n      const isContentActive = tab === selectedTab && !selectedTab.disabled && selectedTab.content;\n\n      const classes = clsx({\n        [styles['tabs-content']]: true,\n        [styles['tabs-content-active']]: isContentActive,\n      });\n\n      const contentAttributes: JSX.IntrinsicElements['div'] = {\n        className: classes,\n        role: 'tabpanel',\n        id: `${idNamespace}-${tab.id}-panel`,\n        key: `${idNamespace}-${tab.id}-panel`,\n      };\n\n      return <div {...contentAttributes}>{isContentActive && selectedTab.content}</div>;\n    };\n\n    return (\n      <div\n        className={clsx(\n          variant === 'container' ? styles['tabs-container-content-wrapper'] : styles['tabs-content-wrapper'],\n          {\n            [styles['with-paddings']]: !disableContentPaddings,\n          }\n        )}\n      >\n        {tabs.map(renderContent)}\n      </div>\n    );\n  };\n\n  const header = (\n    <TabHeaderBar\n      activeTabId={activeTabId}\n      variant={variant}\n      idNamespace={idNamespace}\n      ariaLabel={ariaLabel}\n      ariaLabelledby={ariaLabelledby}\n      tabs={tabs}\n      onChange={changeDetail => {\n        setActiveTabId(changeDetail.activeTabId);\n        fireNonCancelableEvent(onChange, changeDetail);\n      }}\n    />\n  );\n\n  if (variant === 'container') {\n    return (\n      <InternalContainer\n        header={header}\n        disableHeaderPaddings={true}\n        {...baseProps}\n        className={clsx(baseProps.className, styles.root)}\n        __internalRootRef={__internalRootRef}\n        disableContentPaddings={disableContentPaddings}\n      >\n        {content()}\n      </InternalContainer>\n    );\n  }\n\n  return (\n    <div {...baseProps} className={clsx(baseProps.className, styles.root, styles.tabs)} ref={__internalRootRef}>\n      {header}\n      {content()}\n    </div>\n  );\n}\n\napplyDisplayName(Tabs, 'Tabs');\n"]}

package/tabs/interfaces.d.ts

@@ -0,0 +1,90 @@
+import { BaseComponentProps } from '../internal/base-component';
+import { NonCancelableEventHandler } from '../internal/events';
+export interface TabsProps extends BaseComponentProps {
+    /**
+     * Specifies the tabs to display. Each tab object has the following properties:
+     *
+     * - `id` (string) - The tab identifier. This value needs to be passed to the Tabs component as `activeTabId` to select this tab.
+     * - `label` (ReactNode) - Tab label shown in the UI.
+     * - `content` (ReactNode) - (Optional) Tab content to render in the container.
+     * - `disabled` (boolean) - (Optional) Specifies if this tab is disabled.
+     * - `href` (string) - (Optional) You can use this parameter to change the default `href` of the internal tab anchor. The
+     *    `click` event default behavior is prevented, unless the user clicks the tab with a key modifier (that is, CTRL,
+     *    ALT, SHIFT, META). This enables the user to open new browser tabs with an initially selected component tab,
+     *    if your application routing can handle such deep links. You can manually update routing on the current page
+     *    using the `activeTabHref` property of the `change` event's detail.
+     */
+    tabs: ReadonlyArray<TabsProps.Tab>;
+    /**
+     * The possible visual variants of tabs are the following:
+     * * `default` - Use in any context.
+     * * `container` - A variant with borders, for use alongside other containers.
+     */
+    variant?: TabsProps.Variant;
+    /**
+     * Called whenever the user selects a different tab.
+     * The event's `detail` contains the new `activeTabId`.
+     */
+    onChange?: NonCancelableEventHandler<TabsProps.ChangeDetail>;
+    /**
+     * The `id` of the currently active tab.
+     * * If you don't set this property, the component activates the first tab and switches tabs automatically when a tab header is clicked (that is, uncontrolled behavior).
+     * * If you explicitly set this property, you must set define an `onChange` handler to update the property when a tab header is clicked (that is, controlled behavior).
+     */
+    activeTabId?: string;
+    /**
+     * Provides an `aria-label` to the tab container.
+     * Don't use `ariaLabel` and `ariaLabelledby` at the same time.
+     */
+    ariaLabel?: string;
+    /**
+     * Sets the `aria-labelledby` property on the tab container.
+     * If there's a visible label element that you can reference, use this instead of `ariaLabel`.
+     * Don't use `ariaLabel` and `ariaLabelledby` at the same time.
+     */
+    ariaLabelledby?: string;
+    /**
+     * Determines whether the tab content has padding. If `true`, removes the default padding from the tab content area.
+     */
+    disableContentPaddings?: boolean;
+}
+export declare namespace TabsProps {
+    type Variant = 'default' | 'container';
+    interface Tab {
+        /**
+         * The tab id. This value will be need to be passed to the Tabs component as `activeTabId` to select this tab.
+         */
+        id: string;
+        /**
+         * Tab label shown in the UI.
+         */
+        label: React.ReactNode;
+        /**
+         * Tab content to render in the container.
+         */
+        content?: React.ReactNode;
+        /**
+         * Whether this tab is disabled.
+         */
+        disabled?: boolean;
+        /**
+         * You can use this parameter to change the default `href` of the internal tab anchor. The
+         * `click` event default behavior is prevented, unless the user clicks the tab with a key modifier (CTRL,
+         * ALT, SHIFT, META). This allows to open new browser tabs with an initially selected component tab,
+         * when the routing can handle such deep links. You can manually update routing on the current page
+         * using the `activeTabHref` property of the `change` event's detail.
+         */
+        href?: string;
+    }
+    interface ChangeDetail {
+        /**
+         * The ID of the clicked tab.
+         */
+        activeTabId: string;
+        /**
+         * The `href` attribute of the clicked tab, if defined.
+         */
+        activeTabHref?: string;
+    }
+}
+//# sourceMappingURL=interfaces.d.ts.map

package/tabs/interfaces.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"interfaces.d.ts","sourceRoot":"","sources":["../../../src/tabs/interfaces.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AAChE,OAAO,EAAE,yBAAyB,EAAE,MAAM,oBAAoB,CAAC;AAE/D,MAAM,WAAW,SAAU,SAAQ,kBAAkB;IACnD;;;;;;;;;;;;OAYG;IACH,IAAI,EAAE,aAAa,CAAC,SAAS,CAAC,GAAG,CAAC,CAAC;IAEnC;;;;OAIG;IACH,OAAO,CAAC,EAAE,SAAS,CAAC,OAAO,CAAC;IAE5B;;;OAGG;IACH,QAAQ,CAAC,EAAE,yBAAyB,CAAC,SAAS,CAAC,YAAY,CAAC,CAAC;IAE7D;;;;OAIG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IAErB;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;;;OAIG;IACH,cAAc,CAAC,EAAE,MAAM,CAAC;IAExB;;OAEG;IACH,sBAAsB,CAAC,EAAE,OAAO,CAAC;CAClC;AACD,yBAAiB,SAAS,CAAC;IACzB,KAAY,OAAO,GAAG,SAAS,GAAG,WAAW,CAAC;IAE9C,UAAiB,GAAG;QAClB;;WAEG;QACH,EAAE,EAAE,MAAM,CAAC;QACX;;WAEG;QACH,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC;QACvB;;WAEG;QACH,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;QAC1B;;WAEG;QACH,QAAQ,CAAC,EAAE,OAAO,CAAC;QACnB;;;;;;WAMG;QACH,IAAI,CAAC,EAAE,MAAM,CAAC;KACf;IAED,UAAiB,YAAY;QAC3B;;WAEG;QACH,WAAW,EAAE,MAAM,CAAC;QACpB;;WAEG;QACH,aAAa,CAAC,EAAE,MAAM,CAAC;KACxB;CACF"}

package/tabs/interfaces.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=interfaces.js.map

package/tabs/interfaces.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"interfaces.js","sourceRoot":"","sources":["../../../src/tabs/interfaces.ts"],"names":[],"mappings":"","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport { BaseComponentProps } from '../internal/base-component';\nimport { NonCancelableEventHandler } from '../internal/events';\n\nexport interface TabsProps extends BaseComponentProps {\n  /**\n   * Specifies the tabs to display. Each tab object has the following properties:\n   *\n   * - `id` (string) - The tab identifier. This value needs to be passed to the Tabs component as `activeTabId` to select this tab.\n   * - `label` (ReactNode) - Tab label shown in the UI.\n   * - `content` (ReactNode) - (Optional) Tab content to render in the container.\n   * - `disabled` (boolean) - (Optional) Specifies if this tab is disabled.\n   * - `href` (string) - (Optional) You can use this parameter to change the default `href` of the internal tab anchor. The\n   *    `click` event default behavior is prevented, unless the user clicks the tab with a key modifier (that is, CTRL,\n   *    ALT, SHIFT, META). This enables the user to open new browser tabs with an initially selected component tab,\n   *    if your application routing can handle such deep links. You can manually update routing on the current page\n   *    using the `activeTabHref` property of the `change` event's detail.\n   */\n  tabs: ReadonlyArray<TabsProps.Tab>;\n\n  /**\n   * The possible visual variants of tabs are the following:\n   * * `default` - Use in any context.\n   * * `container` - A variant with borders, for use alongside other containers.\n   */\n  variant?: TabsProps.Variant;\n\n  /**\n   * Called whenever the user selects a different tab.\n   * The event's `detail` contains the new `activeTabId`.\n   */\n  onChange?: NonCancelableEventHandler<TabsProps.ChangeDetail>;\n\n  /**\n   * The `id` of the currently active tab.\n   * * If you don't set this property, the component activates the first tab and switches tabs automatically when a tab header is clicked (that is, uncontrolled behavior).\n   * * If you explicitly set this property, you must set define an `onChange` handler to update the property when a tab header is clicked (that is, controlled behavior).\n   */\n  activeTabId?: string;\n\n  /**\n   * Provides an `aria-label` to the tab container.\n   * Don't use `ariaLabel` and `ariaLabelledby` at the same time.\n   */\n  ariaLabel?: string;\n\n  /**\n   * Sets the `aria-labelledby` property on the tab container.\n   * If there's a visible label element that you can reference, use this instead of `ariaLabel`.\n   * Don't use `ariaLabel` and `ariaLabelledby` at the same time.\n   */\n  ariaLabelledby?: string;\n\n  /**\n   * Determines whether the tab content has padding. If `true`, removes the default padding from the tab content area.\n   */\n  disableContentPaddings?: boolean;\n}\nexport namespace TabsProps {\n  export type Variant = 'default' | 'container';\n\n  export interface Tab {\n    /**\n     * The tab id. This value will be need to be passed to the Tabs component as `activeTabId` to select this tab.\n     */\n    id: string;\n    /**\n     * Tab label shown in the UI.\n     */\n    label: React.ReactNode;\n    /**\n     * Tab content to render in the container.\n     */\n    content?: React.ReactNode;\n    /**\n     * Whether this tab is disabled.\n     */\n    disabled?: boolean;\n    /**\n     * You can use this parameter to change the default `href` of the internal tab anchor. The\n     * `click` event default behavior is prevented, unless the user clicks the tab with a key modifier (CTRL,\n     * ALT, SHIFT, META). This allows to open new browser tabs with an initially selected component tab,\n     * when the routing can handle such deep links. You can manually update routing on the current page\n     * using the `activeTabHref` property of the `change` event's detail.\n     */\n    href?: string;\n  }\n\n  export interface ChangeDetail {\n    /**\n     * The ID of the clicked tab.\n     */\n    activeTabId: string;\n    /**\n     * The `href` attribute of the clicked tab, if defined.\n     */\n    activeTabHref?: string;\n  }\n}\n"]}

package/tabs/native-smooth-scroll-supported.d.ts

@@ -0,0 +1,2 @@
+export default function (): boolean;
+//# sourceMappingURL=native-smooth-scroll-supported.d.ts.map

package/tabs/native-smooth-scroll-supported.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"native-smooth-scroll-supported.d.ts","sourceRoot":"","sources":["../../../src/tabs/native-smooth-scroll-supported.ts"],"names":[],"mappings":"AAIA,MAAM,CAAC,OAAO,sBAEb"}

package/tabs/native-smooth-scroll-supported.js

@@ -0,0 +1,7 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+// This function is in a separate file to allow for mocking in unit tests
+export default function () {
+    return 'scrollBehavior' in document.documentElement.style;
+}
+//# sourceMappingURL=native-smooth-scroll-supported.js.map

package/tabs/native-smooth-scroll-supported.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"native-smooth-scroll-supported.js","sourceRoot":"","sources":["../../../src/tabs/native-smooth-scroll-supported.ts"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AAEtC,yEAAyE;AACzE,MAAM,CAAC,OAAO;IACZ,OAAO,gBAAgB,IAAI,QAAQ,CAAC,eAAe,CAAC,KAAK,CAAC;AAC5D,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\n\n// This function is in a separate file to allow for mocking in unit tests\nexport default function () {\n  return 'scrollBehavior' in document.documentElement.style;\n}\n"]}

package/tabs/scroll-utils.d.ts

@@ -0,0 +1,6 @@
+export declare const onPaginationClick: (headerBarRef: React.RefObject<HTMLUListElement>, direction: number) => void;
+export declare const hasHorizontalOverflow: (headerBar: HTMLElement, leftOverflowButton: React.RefObject<HTMLElement>) => boolean;
+export declare const hasLeftOverflow: (headerBar: HTMLElement) => boolean;
+export declare const hasRightOverflow: (headerBar: HTMLElement) => boolean;
+export declare const scrollIntoView: (tabHeader: HTMLElement, headerBar: HTMLElement, smooth?: boolean) => void;
+//# sourceMappingURL=scroll-utils.d.ts.map

package/tabs/scroll-utils.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"scroll-utils.d.ts","sourceRoot":"","sources":["../../../src/tabs/scroll-utils.ts"],"names":[],"mappings":"AAIA,eAAO,MAAM,iBAAiB,iBAAkB,MAAM,SAAS,CAAC,gBAAgB,CAAC,aAAa,MAAM,KAAG,IAkBtG,CAAC;AAEF,eAAO,MAAM,qBAAqB,cACrB,WAAW,sBACF,MAAM,SAAS,CAAC,WAAW,CAAC,KAC/C,OAMF,CAAC;AAEF,eAAO,MAAM,eAAe,cAAe,WAAW,KAAG,OAExD,CAAC;AAEF,eAAO,MAAM,gBAAgB,cAAe,WAAW,KAAG,OAIzD,CAAC;AAEF,eAAO,MAAM,cAAc,cAAe,WAAW,aAAa,WAAW,uBAAkB,IAoB9F,CAAC"}

package/tabs/scroll-utils.js

@@ -0,0 +1,51 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import smoothScroll from './smooth-scroll';
+export var onPaginationClick = function (headerBarRef, direction) {
+    if (!(headerBarRef === null || headerBarRef === void 0 ? void 0 : headerBarRef.current)) {
+        return;
+    }
+    var element = headerBarRef.current;
+    // Scroll each paginated section by 75% of what is already visible
+    var paginatedSectionSize = Math.ceil(element.clientWidth * 0.75);
+    if (direction === 1) {
+        smoothScroll(element, Math.min(element.scrollLeft + paginatedSectionSize, element.scrollWidth - element.offsetWidth));
+    }
+    if (direction === -1) {
+        smoothScroll(element, Math.max(element.scrollLeft - paginatedSectionSize, 0));
+    }
+};
+export var hasHorizontalOverflow = function (headerBar, leftOverflowButton) {
+    var offsetWidth = headerBar.offsetWidth, scrollWidth = headerBar.scrollWidth;
+    // Need to account for pagination button width when deciding if there would be overflow without them
+    var paginationButtonsWidth = leftOverflowButton.current && 2 * leftOverflowButton.current.offsetWidth;
+    return paginationButtonsWidth ? scrollWidth > offsetWidth + paginationButtonsWidth : scrollWidth > offsetWidth;
+};
+export var hasLeftOverflow = function (headerBar) {
+    return headerBar.scrollLeft > 0;
+};
+export var hasRightOverflow = function (headerBar) {
+    var offsetWidth = headerBar.offsetWidth, scrollLeft = headerBar.scrollLeft, scrollWidth = headerBar.scrollWidth;
+    // scrollLeft can be a decimal value on systems using display scaling
+    return Math.ceil(scrollLeft) < scrollWidth - offsetWidth;
+};
+export var scrollIntoView = function (tabHeader, headerBar, smooth) {
+    if (smooth === void 0) { smooth = true; }
+    if (!tabHeader || !headerBar) {
+        return;
+    }
+    // Extra left and right margin to always make the focus ring visible
+    var margin = 2;
+    var updatedLeftScroll = headerBar.scrollLeft;
+    // Anchor tab to left of scroll parent
+    updatedLeftScroll = Math.min(updatedLeftScroll, tabHeader.offsetLeft - margin);
+    // Anchor tab to right of scroll parent
+    updatedLeftScroll = Math.max(updatedLeftScroll, tabHeader.offsetLeft + tabHeader.offsetWidth - headerBar.offsetWidth + margin);
+    if (smooth) {
+        smoothScroll(headerBar, updatedLeftScroll);
+    }
+    else {
+        headerBar.scrollLeft = updatedLeftScroll;
+    }
+};
+//# sourceMappingURL=scroll-utils.js.map

package/tabs/scroll-utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"scroll-utils.js","sourceRoot":"","sources":["../../../src/tabs/scroll-utils.ts"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,YAAY,MAAM,iBAAiB,CAAC;AAE3C,MAAM,CAAC,IAAM,iBAAiB,GAAG,UAAC,YAA+C,EAAE,SAAiB;IAClG,IAAI,CAAC,CAAA,YAAY,aAAZ,YAAY,uBAAZ,YAAY,CAAE,OAAO,CAAA,EAAE;QAC1B,OAAO;KACR;IACD,IAAM,OAAO,GAAG,YAAY,CAAC,OAAO,CAAC;IAErC,kEAAkE;IAClE,IAAM,oBAAoB,GAAG,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,WAAW,GAAG,IAAI,CAAC,CAAC;IAEnE,IAAI,SAAS,KAAK,CAAC,EAAE;QACnB,YAAY,CACV,OAAO,EACP,IAAI,CAAC,GAAG,CAAC,OAAO,CAAC,UAAU,GAAG,oBAAoB,EAAE,OAAO,CAAC,WAAW,GAAG,OAAO,CAAC,WAAW,CAAC,CAC/F,CAAC;KACH;IACD,IAAI,SAAS,KAAK,CAAC,CAAC,EAAE;QACpB,YAAY,CAAC,OAAO,EAAE,IAAI,CAAC,GAAG,CAAC,OAAO,CAAC,UAAU,GAAG,oBAAoB,EAAE,CAAC,CAAC,CAAC,CAAC;KAC/E;AACH,CAAC,CAAC;AAEF,MAAM,CAAC,IAAM,qBAAqB,GAAG,UACnC,SAAsB,EACtB,kBAAgD;IAExC,IAAA,WAAW,GAAkB,SAAS,YAA3B,EAAE,WAAW,GAAK,SAAS,YAAd,CAAe;IAE/C,oGAAoG;IACpG,IAAM,sBAAsB,GAAG,kBAAkB,CAAC,OAAO,IAAI,CAAC,GAAG,kBAAkB,CAAC,OAAO,CAAC,WAAW,CAAC;IACxG,OAAO,sBAAsB,CAAC,CAAC,CAAC,WAAW,GAAG,WAAW,GAAG,sBAAsB,CAAC,CAAC,CAAC,WAAW,GAAG,WAAW,CAAC;AACjH,CAAC,CAAC;AAEF,MAAM,CAAC,IAAM,eAAe,GAAG,UAAC,SAAsB;IACpD,OAAO,SAAS,CAAC,UAAU,GAAG,CAAC,CAAC;AAClC,CAAC,CAAC;AAEF,MAAM,CAAC,IAAM,gBAAgB,GAAG,UAAC,SAAsB;IAC7C,IAAA,WAAW,GAA8B,SAAS,YAAvC,EAAE,UAAU,GAAkB,SAAS,WAA3B,EAAE,WAAW,GAAK,SAAS,YAAd,CAAe;IAC3D,qEAAqE;IACrE,OAAO,IAAI,CAAC,IAAI,CAAC,UAAU,CAAC,GAAG,WAAW,GAAG,WAAW,CAAC;AAC3D,CAAC,CAAC;AAEF,MAAM,CAAC,IAAM,cAAc,GAAG,UAAC,SAAsB,EAAE,SAAsB,EAAE,MAAa;IAAb,uBAAA,EAAA,aAAa;IAC1F,IAAI,CAAC,SAAS,IAAI,CAAC,SAAS,EAAE;QAC5B,OAAO;KACR;IACD,oEAAoE;IACpE,IAAM,MAAM,GAAG,CAAC,CAAC;IACjB,IAAI,iBAAiB,GAAG,SAAS,CAAC,UAAU,CAAC;IAE7C,sCAAsC;IACtC,iBAAiB,GAAG,IAAI,CAAC,GAAG,CAAC,iBAAiB,EAAE,SAAS,CAAC,UAAU,GAAG,MAAM,CAAC,CAAC;IAC/E,uCAAuC;IACvC,iBAAiB,GAAG,IAAI,CAAC,GAAG,CAC1B,iBAAiB,EACjB,SAAS,CAAC,UAAU,GAAG,SAAS,CAAC,WAAW,GAAG,SAAS,CAAC,WAAW,GAAG,MAAM,CAC9E,CAAC;IACF,IAAI,MAAM,EAAE;QACV,YAAY,CAAC,SAAS,EAAE,iBAAiB,CAAC,CAAC;KAC5C;SAAM;QACL,SAAS,CAAC,UAAU,GAAG,iBAAiB,CAAC;KAC1C;AACH,CAAC,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport smoothScroll from './smooth-scroll';\n\nexport const onPaginationClick = (headerBarRef: React.RefObject<HTMLUListElement>, direction: number): void => {\n  if (!headerBarRef?.current) {\n    return;\n  }\n  const element = headerBarRef.current;\n\n  // Scroll each paginated section by 75% of what is already visible\n  const paginatedSectionSize = Math.ceil(element.clientWidth * 0.75);\n\n  if (direction === 1) {\n    smoothScroll(\n      element,\n      Math.min(element.scrollLeft + paginatedSectionSize, element.scrollWidth - element.offsetWidth)\n    );\n  }\n  if (direction === -1) {\n    smoothScroll(element, Math.max(element.scrollLeft - paginatedSectionSize, 0));\n  }\n};\n\nexport const hasHorizontalOverflow = (\n  headerBar: HTMLElement,\n  leftOverflowButton: React.RefObject<HTMLElement>\n): boolean => {\n  const { offsetWidth, scrollWidth } = headerBar;\n\n  // Need to account for pagination button width when deciding if there would be overflow without them\n  const paginationButtonsWidth = leftOverflowButton.current && 2 * leftOverflowButton.current.offsetWidth;\n  return paginationButtonsWidth ? scrollWidth > offsetWidth + paginationButtonsWidth : scrollWidth > offsetWidth;\n};\n\nexport const hasLeftOverflow = (headerBar: HTMLElement): boolean => {\n  return headerBar.scrollLeft > 0;\n};\n\nexport const hasRightOverflow = (headerBar: HTMLElement): boolean => {\n  const { offsetWidth, scrollLeft, scrollWidth } = headerBar;\n  // scrollLeft can be a decimal value on systems using display scaling\n  return Math.ceil(scrollLeft) < scrollWidth - offsetWidth;\n};\n\nexport const scrollIntoView = (tabHeader: HTMLElement, headerBar: HTMLElement, smooth = true): void => {\n  if (!tabHeader || !headerBar) {\n    return;\n  }\n  // Extra left and right margin to always make the focus ring visible\n  const margin = 2;\n  let updatedLeftScroll = headerBar.scrollLeft;\n\n  // Anchor tab to left of scroll parent\n  updatedLeftScroll = Math.min(updatedLeftScroll, tabHeader.offsetLeft - margin);\n  // Anchor tab to right of scroll parent\n  updatedLeftScroll = Math.max(\n    updatedLeftScroll,\n    tabHeader.offsetLeft + tabHeader.offsetWidth - headerBar.offsetWidth + margin\n  );\n  if (smooth) {\n    smoothScroll(headerBar, updatedLeftScroll);\n  } else {\n    headerBar.scrollLeft = updatedLeftScroll;\n  }\n};\n"]}

package/tabs/smooth-scroll.d.ts

@@ -0,0 +1,3 @@
+declare const smoothScroll: (element: HTMLElement, to: number) => void;
+export default smoothScroll;
+//# sourceMappingURL=smooth-scroll.d.ts.map

package/tabs/smooth-scroll.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"smooth-scroll.d.ts","sourceRoot":"","sources":["../../../src/tabs/smooth-scroll.ts"],"names":[],"mappings":"AA8CA,QAAA,MAAM,YAAY,YAAa,WAAW,MAAM,MAAM,SAarD,CAAC;AAEF,eAAe,YAAY,CAAC"}

package/tabs/smooth-scroll.js

@@ -0,0 +1,48 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import { isMotionDisabled } from '../internal/motion';
+import isNativeSmoothScrollingSupported from './native-smooth-scroll-supported';
+// The scroll speed depends on the scrolling distance. The equation below is an interpolation of measurements in Chrome.
+var getScrollSpeed = function (pixels) { return 0.0015 * Math.abs(pixels) + 0.558; };
+var getScrollTime = function (pixels) { return Math.round(Math.abs(pixels) / getScrollSpeed(pixels)); };
+var now = function () { return (window.performance ? window.performance.now() : Date.now()); };
+var ease = function (k) {
+    return 0.5 * (1 - Math.cos(Math.PI * k));
+};
+var step = function (context) {
+    var time = now();
+    var elapsed = Math.min((time - context.startTime) / context.scrollTime, 1);
+    var value = ease(elapsed);
+    var currentX = context.startX + (context.endX - context.startX) * value;
+    context.scrollable.scrollLeft = currentX;
+    // scroll more if we have not reached our destination
+    if (currentX !== context.endX) {
+        requestAnimationFrame(function () { return step(context); });
+    }
+};
+var simulateSmoothScroll = function (element, endX) {
+    var startX = element.scrollLeft;
+    step({
+        scrollable: element,
+        startX: startX,
+        endX: endX,
+        startTime: now(),
+        scrollTime: getScrollTime(endX - startX)
+    });
+};
+var smoothScroll = function (element, to) {
+    if (isMotionDisabled(element)) {
+        element.scrollLeft = to;
+        return;
+    }
+    if (isNativeSmoothScrollingSupported() && element.scrollTo) {
+        element.scrollTo({
+            left: to,
+            behavior: 'smooth'
+        });
+        return;
+    }
+    simulateSmoothScroll(element, to);
+};
+export default smoothScroll;
+//# sourceMappingURL=smooth-scroll.js.map

package/tabs/smooth-scroll.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"smooth-scroll.js","sourceRoot":"","sources":["../../../src/tabs/smooth-scroll.ts"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AACtD,OAAO,gCAAgC,MAAM,kCAAkC,CAAC;AAUhF,wHAAwH;AACxH,IAAM,cAAc,GAAG,UAAC,MAAc,IAAK,OAAA,MAAM,GAAG,IAAI,CAAC,GAAG,CAAC,MAAM,CAAC,GAAG,KAAK,EAAjC,CAAiC,CAAC;AAC7E,IAAM,aAAa,GAAG,UAAC,MAAc,IAAK,OAAA,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,GAAG,CAAC,MAAM,CAAC,GAAG,cAAc,CAAC,MAAM,CAAC,CAAC,EAArD,CAAqD,CAAC;AAEhG,IAAM,GAAG,GAAG,cAAM,OAAA,CAAC,MAAM,CAAC,WAAW,CAAC,CAAC,CAAC,MAAM,CAAC,WAAW,CAAC,GAAG,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,GAAG,EAAE,CAAC,EAA5D,CAA4D,CAAC;AAE/E,IAAM,IAAI,GAAG,UAAC,CAAS;IACrB,OAAO,GAAG,GAAG,CAAC,CAAC,GAAG,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE,GAAG,CAAC,CAAC,CAAC,CAAC;AAC3C,CAAC,CAAC;AAEF,IAAM,IAAI,GAAG,UAAC,OAAsB;IAClC,IAAM,IAAI,GAAG,GAAG,EAAE,CAAC;IACnB,IAAM,OAAO,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,IAAI,GAAG,OAAO,CAAC,SAAS,CAAC,GAAG,OAAO,CAAC,UAAU,EAAE,CAAC,CAAC,CAAC;IAC7E,IAAM,KAAK,GAAG,IAAI,CAAC,OAAO,CAAC,CAAC;IAC5B,IAAM,QAAQ,GAAG,OAAO,CAAC,MAAM,GAAG,CAAC,OAAO,CAAC,IAAI,GAAG,OAAO,CAAC,MAAM,CAAC,GAAG,KAAK,CAAC;IAC1E,OAAO,CAAC,UAAU,CAAC,UAAU,GAAG,QAAQ,CAAC;IACzC,qDAAqD;IACrD,IAAI,QAAQ,KAAK,OAAO,CAAC,IAAI,EAAE;QAC7B,qBAAqB,CAAC,cAAM,OAAA,IAAI,CAAC,OAAO,CAAC,EAAb,CAAa,CAAC,CAAC;KAC5C;AACH,CAAC,CAAC;AAEF,IAAM,oBAAoB,GAAG,UAAC,OAAoB,EAAE,IAAY;IAC9D,IAAM,MAAM,GAAG,OAAO,CAAC,UAAU,CAAC;IAClC,IAAI,CAAC;QACH,UAAU,EAAE,OAAO;QACnB,MAAM,QAAA;QACN,IAAI,MAAA;QACJ,SAAS,EAAE,GAAG,EAAE;QAChB,UAAU,EAAE,aAAa,CAAC,IAAI,GAAG,MAAM,CAAC;KACzC,CAAC,CAAC;AACL,CAAC,CAAC;AAEF,IAAM,YAAY,GAAG,UAAC,OAAoB,EAAE,EAAU;IACpD,IAAI,gBAAgB,CAAC,OAAO,CAAC,EAAE;QAC7B,OAAO,CAAC,UAAU,GAAG,EAAE,CAAC;QACxB,OAAO;KACR;IACD,IAAI,gCAAgC,EAAE,IAAI,OAAO,CAAC,QAAQ,EAAE;QAC1D,OAAO,CAAC,QAAQ,CAAC;YACf,IAAI,EAAE,EAAE;YACR,QAAQ,EAAE,QAAQ;SACnB,CAAC,CAAC;QACH,OAAO;KACR;IACD,oBAAoB,CAAC,OAAO,EAAE,EAAE,CAAC,CAAC;AACpC,CAAC,CAAC;AAEF,eAAe,YAAY,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport { isMotionDisabled } from '../internal/motion';\nimport isNativeSmoothScrollingSupported from './native-smooth-scroll-supported';\n\ninterface ScrollContext {\n  scrollable: HTMLElement;\n  startX: number;\n  endX: number;\n  startTime: number;\n  scrollTime: number;\n}\n\n// The scroll speed depends on the scrolling distance. The equation below is an interpolation of measurements in Chrome.\nconst getScrollSpeed = (pixels: number) => 0.0015 * Math.abs(pixels) + 0.558;\nconst getScrollTime = (pixels: number) => Math.round(Math.abs(pixels) / getScrollSpeed(pixels));\n\nconst now = () => (window.performance ? window.performance.now() : Date.now());\n\nconst ease = (k: number): number => {\n  return 0.5 * (1 - Math.cos(Math.PI * k));\n};\n\nconst step = (context: ScrollContext): void => {\n  const time = now();\n  const elapsed = Math.min((time - context.startTime) / context.scrollTime, 1);\n  const value = ease(elapsed);\n  const currentX = context.startX + (context.endX - context.startX) * value;\n  context.scrollable.scrollLeft = currentX;\n  // scroll more if we have not reached our destination\n  if (currentX !== context.endX) {\n    requestAnimationFrame(() => step(context));\n  }\n};\n\nconst simulateSmoothScroll = (element: HTMLElement, endX: number): void => {\n  const startX = element.scrollLeft;\n  step({\n    scrollable: element,\n    startX,\n    endX,\n    startTime: now(),\n    scrollTime: getScrollTime(endX - startX),\n  });\n};\n\nconst smoothScroll = (element: HTMLElement, to: number) => {\n  if (isMotionDisabled(element)) {\n    element.scrollLeft = to;\n    return;\n  }\n  if (isNativeSmoothScrollingSupported() && element.scrollTo) {\n    element.scrollTo({\n      left: to,\n      behavior: 'smooth',\n    });\n    return;\n  }\n  simulateSmoothScroll(element, to);\n};\n\nexport default smoothScroll;\n"]}

package/tabs/styles.css.js

@@ -0,0 +1,26 @@
+
+    import './styles.scoped.css';
+    export default {
+  "tabs-header": "awsui_tabs-header_14rmt_1jw77_186",
+  "tabs-header-list": "awsui_tabs-header-list_14rmt_1jw77_192",
+  "pagination-button": "awsui_pagination-button_14rmt_1jw77_209",
+  "pagination-button-left": "awsui_pagination-button-left_14rmt_1jw77_214",
+  "pagination-button-left-scrollable": "awsui_pagination-button-left-scrollable_14rmt_1jw77_217",
+  "pagination-button-right": "awsui_pagination-button-right_14rmt_1jw77_221",
+  "pagination-button-right-scrollable": "awsui_pagination-button-right-scrollable_14rmt_1jw77_224",
+  "tabs-tab": "awsui_tabs-tab_14rmt_1jw77_229",
+  "tabs-tab-label": "awsui_tabs-tab-label_14rmt_1jw77_240",
+  "tabs-tab-link": "awsui_tabs-tab-link_14rmt_1jw77_256",
+  "tabs-tab-disabled": "awsui_tabs-tab-disabled_14rmt_1jw77_313",
+  "refresh": "awsui_refresh_14rmt_1jw77_330",
+  "tabs-tab-active": "awsui_tabs-tab-active_14rmt_1jw77_344",
+  "tabs-header-with-divider": "awsui_tabs-header-with-divider_14rmt_1jw77_351",
+  "root": "awsui_root_14rmt_1jw77_355",
+  "tabs": "awsui_tabs_14rmt_1jw77_186",
+  "tabs-content-wrapper": "awsui_tabs-content-wrapper_14rmt_1jw77_372",
+  "with-paddings": "awsui_with-paddings_14rmt_1jw77_372",
+  "tabs-container-content-wrapper": "awsui_tabs-container-content-wrapper_14rmt_1jw77_376",
+  "tabs-content": "awsui_tabs-content_14rmt_1jw77_372",
+  "tabs-content-active": "awsui_tabs-content-active_14rmt_1jw77_384"
+};
+