@macive/ui 0.0.1 → 0.0.2

package/dist/src/components/Switch/Switch.js

@@ -0,0 +1,97 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Switch = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = __importStar(require("react"));
+/**
+ * Renders a switch component
+ *
+ * @param props - The props for the component
+ * @returns The rendered component
+ */
+// export const Switch: React.FC<SwitchProps> = ({ label, checked, className, onChange, error }) => {
+exports.Switch = react_1.default.forwardRef((props, ref) => {
+    const { label, checked: initialChecked, /**className = '' */ onChange, error, ...rest } = props;
+    const [checked, setChecked] = (0, react_1.useState)(initialChecked || false);
+    const handleToggle = (event) => {
+        setChecked(event.target.checked);
+        if (onChange) {
+            onChange(event);
+        }
+    };
+    const Component = error
+        ? ({ children }) => ((0, jsx_runtime_1.jsx)("div", { className: 'flex h-max flex-col space-y-1', children: children }))
+        : ({ children }) => (0, jsx_runtime_1.jsx)(react_1.Fragment, { children: children });
+    return ((0, jsx_runtime_1.jsxs)(Component, { children: [(0, jsx_runtime_1.jsxs)("div", { className: `switch-container flex items-center justify-between `, children: [(0, jsx_runtime_1.jsx)("label", { htmlFor: rest.name, className: 'mr-4 ', children: label }), (0, jsx_runtime_1.jsx)("input", { ref: ref, onChange: handleToggle, className: 'switch-checkbox', id: rest.name, type: 'checkbox', ...rest }), (0, jsx_runtime_1.jsx)("label", { style: { background: checked ? '#2196f3' : '#ccc' }, className: 'switch-label', htmlFor: rest.name, children: (0, jsx_runtime_1.jsx)("span", { className: `switch-button` }) }), (0, jsx_runtime_1.jsx)("style", { jsx: 'true', children: `
+          .switch-checkbox {
+            height: 0;
+            width: 0;
+            visibility: hidden;
+          }
+
+          .switch-label {
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            cursor: pointer;
+            width: 50px;
+            height: 25px;
+            background: grey;
+            border-radius: 50px;
+            position: relative;
+            transition: background-color 0.2s;
+          }
+
+          .switch-label .switch-button {
+            content: '';
+            position: absolute;
+            top: 2px;
+            left: 2px;
+            width: 25px;
+            height: 20px;
+            border-radius: 50px;
+            // transition: 0.2s;
+            background: #fff;
+            box-shadow: 0 0 2px 0 rgba(10, 10, 10, 0.29);
+          }
+
+          .switch-checkbox:checked + .switch-label .switch-button {
+            left: calc(100% - 2px);
+            transform: translateX(-100%);
+          }
+
+          .switch-label:active .switch-button {
+            width: 60px;
+          }
+
+          .error-message {
+            color: red;
+            font-size: 12px;
+            margin-top: 4px;
+          }
+        ` })] }), error && (0, jsx_runtime_1.jsx)("div", { className: 'error-message', children: error })] }));
+});
+exports.Switch.displayName = 'SwitchBox';

package/dist/src/components/Switch/index.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Switch = void 0;
+var Switch_1 = require("./Switch");
+Object.defineProperty(exports, "Switch", { enumerable: true, get: function () { return Switch_1.Switch; } });

package/dist/src/components/Tabs/Tabs.classnames.js

@@ -0,0 +1,22 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const TabsClassnames = {
+    "Underline": "Tabs-Underline",
+    "Tabs": "Tabs-Tabs",
+    "fitted": "Tabs-fitted",
+    "TabContainer": "Tabs-TabContainer",
+    "Title": "Tabs-Title",
+    "fillSpace": "Tabs-fillSpace",
+    "Tab": "Tabs-Tab",
+    "Tab-selected": "Tabs-Tab-selected",
+    "titleWithIcon": "Tabs-titleWithIcon",
+    "Panel": "Tabs-Panel",
+    "Panel-hidden": "Tabs-Panel-hidden",
+    "Item": "Tabs-Item",
+    "DisclosureTab": "Tabs-DisclosureTab",
+    "DisclosureTab-visible": "Tabs-DisclosureTab-visible",
+    "DisclosureActivator": "Tabs-DisclosureActivator",
+    "Title::before": "Tabs-Title::before",
+    "TabMeasurer": "Tabs-TabMeasurer"
+};
+exports.default = TabsClassnames;

package/dist/src/components/Tabs/Tabs.js

@@ -0,0 +1,184 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Tabs = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const css_1 = require("../../utilities/css");
+const i18n_1 = require("../../utilities/i18n");
+const Box_1 = require("../Box");
+const Icon_1 = require("../Icon");
+const Popover_1 = require("../Popover");
+const Icons_1 = require("../Icons");
+const components_1 = require("./components");
+const Tabs_classnames_1 = __importDefault(require("./Tabs.classnames"));
+const utilities_1 = require("./utilities");
+class TabsInner extends react_1.PureComponent {
+    constructor() {
+        super(...arguments);
+        this.state = {
+            disclosureWidth: 0,
+            containerWidth: Infinity,
+            tabWidths: [],
+            visibleTabs: [],
+            hiddenTabs: [],
+            showDisclosure: false,
+            tabToFocus: -1,
+        };
+        this.handleKeyPress = (event) => {
+            const { tabToFocus, visibleTabs, hiddenTabs, showDisclosure } = this.state;
+            const key = event.key;
+            const tabsArrayInOrder = showDisclosure ? visibleTabs.concat(hiddenTabs) : [...visibleTabs];
+            let newFocus = tabsArrayInOrder.indexOf(tabToFocus);
+            if (key === 'ArrowRight') {
+                newFocus += 1;
+                if (newFocus === tabsArrayInOrder.length) {
+                    newFocus = 0;
+                }
+            }
+            if (key === 'ArrowLeft') {
+                if (newFocus === -1 || newFocus === 0) {
+                    newFocus = tabsArrayInOrder.length - 1;
+                }
+                else {
+                    newFocus -= 1;
+                }
+            }
+            this.setState({
+                tabToFocus: tabsArrayInOrder[newFocus],
+            });
+        };
+        this.renderTabMarkup = (tab, index) => {
+            const { selected, children } = this.props;
+            const { tabToFocus } = this.state;
+            const tabPanelID = tab.panelID || `${tab.id}-panel`;
+            return ((0, jsx_runtime_1.jsx)(components_1.Tab, { id: tab.id, siblingTabHasFocus: tabToFocus > -1, focused: index === tabToFocus, selected: index === selected, onClick: this.handleTabClick, panelID: children ? tabPanelID : undefined, accessibilityLabel: tab.accessibilityLabel, url: tab.url, children: tab.content }, `${index}-${tab.id}`));
+        };
+        this.handleFocus = (event) => {
+            const { selected, tabs } = this.props;
+            // If we are explicitly focusing a non-selected tab, this focuses it
+            const target = event.target;
+            if (target.classList.contains(Tabs_classnames_1.default.Tab) || target.classList.contains(Tabs_classnames_1.default.Item)) {
+                let tabToFocus = -1;
+                tabs.every((tab, index) => {
+                    if (tab.id === target.id) {
+                        tabToFocus = index;
+                        return false;
+                    }
+                    return true;
+                });
+                this.setState({ tabToFocus });
+                return;
+            }
+            if (target.classList.contains(Tabs_classnames_1.default.DisclosureActivator)) {
+                return;
+            }
+            // If we are coming in from somewhere other than another tab, focus the
+            // selected tab, and the focus (click) is not on the disclosure activator,
+            // focus the selected tab
+            if (!event.relatedTarget) {
+                this.setState({ tabToFocus: selected });
+                return;
+            }
+            const relatedTarget = event.relatedTarget;
+            if (relatedTarget instanceof HTMLElement &&
+                !relatedTarget.classList.contains(Tabs_classnames_1.default.Tab) &&
+                !relatedTarget.classList.contains(Tabs_classnames_1.default.Item) &&
+                !relatedTarget.classList.contains(Tabs_classnames_1.default.DisclosureActivator)) {
+                this.setState({ tabToFocus: selected });
+            }
+        };
+        this.handleBlur = (event) => {
+            // If we blur and the target is not another tab, forget the focus position
+            if (event.relatedTarget == null) {
+                this.setState({ tabToFocus: -1 });
+                return;
+            }
+            const target = event.relatedTarget;
+            // If we are going to anywhere other than another tab, lose the last focused tab
+            if (target instanceof HTMLElement &&
+                !target.classList.contains(Tabs_classnames_1.default.Tab) &&
+                !target.classList.contains(Tabs_classnames_1.default.Item)) {
+                this.setState({ tabToFocus: -1 });
+            }
+        };
+        this.handleDisclosureActivatorClick = () => {
+            this.setState(({ showDisclosure }) => ({ showDisclosure: !showDisclosure }));
+        };
+        this.handleClose = () => {
+            this.setState({
+                showDisclosure: false,
+            });
+        };
+        this.handleMeasurement = (measurements) => {
+            const { tabs, selected } = this.props;
+            const { tabToFocus } = this.state;
+            const { hiddenTabWidths: tabWidths, containerWidth, disclosureWidth } = measurements;
+            const { visibleTabs, hiddenTabs } = (0, utilities_1.getVisibleAndHiddenTabIndices)(tabs, selected, disclosureWidth, tabWidths, containerWidth);
+            this.setState({
+                tabToFocus: tabToFocus === -1 ? -1 : selected,
+                visibleTabs,
+                hiddenTabs,
+                disclosureWidth,
+                containerWidth,
+                tabWidths,
+            });
+        };
+        this.handleTabClick = (id) => {
+            const { tabs, onSelect = noop } = this.props;
+            const tab = tabs.find((aTab) => aTab.id === id);
+            if (tab == null) {
+                return;
+            }
+            const selectedIndex = tabs.indexOf(tab);
+            onSelect(selectedIndex);
+        };
+    }
+    static getDerivedStateFromProps(nextProps, prevState) {
+        const { disclosureWidth, tabWidths, containerWidth } = prevState;
+        const { visibleTabs, hiddenTabs } = (0, utilities_1.getVisibleAndHiddenTabIndices)(nextProps.tabs, nextProps.selected, disclosureWidth, tabWidths, containerWidth);
+        return {
+            visibleTabs,
+            hiddenTabs,
+            selected: nextProps.selected,
+        };
+    }
+    render() {
+        const { tabs, selected, fitted, children, i18n, disclosureText } = this.props;
+        const { tabToFocus, visibleTabs, hiddenTabs, showDisclosure } = this.state;
+        const disclosureTabs = hiddenTabs.map((tabIndex) => tabs[tabIndex]);
+        const panelMarkup = children
+            ? tabs.map((_tab, index) => {
+                return selected === index ? ((0, jsx_runtime_1.jsx)(components_1.Panel, { id: tabs[index].panelID || `${tabs[index].id}-panel`, tabID: tabs[index].id, children: children }, tabs[index].id)) : ((0, jsx_runtime_1.jsx)(components_1.Panel, { id: tabs[index].panelID || `${tabs[index].id}-panel`, tabID: tabs[index].id, hidden: true }, tabs[index].id));
+            })
+            : null;
+        const tabsMarkup = visibleTabs
+            .sort((tabA, tabB) => tabA - tabB)
+            .map((tabIndex) => this.renderTabMarkup(tabs[tabIndex], tabIndex));
+        const disclosureActivatorVisible = visibleTabs.length < tabs.length;
+        const hasCustomDisclosure = Boolean(disclosureText);
+        const classname = (0, css_1.classNames)(Tabs_classnames_1.default.Tabs, fitted && Tabs_classnames_1.default.fitted, disclosureActivatorVisible && Tabs_classnames_1.default.fillSpace);
+        const disclosureTabClassName = (0, css_1.classNames)(Tabs_classnames_1.default.DisclosureTab, disclosureActivatorVisible && Tabs_classnames_1.default['DisclosureTab-visible']);
+        const disclosureButtonClassName = (0, css_1.classNames)(Tabs_classnames_1.default.DisclosureActivator, hasCustomDisclosure && Tabs_classnames_1.default.Tab);
+        const disclosureButtonContentWrapperClassName = (0, css_1.classNames)(Tabs_classnames_1.default.Title, hasCustomDisclosure && Tabs_classnames_1.default.titleWithIcon);
+        const disclosureButtonContent = hasCustomDisclosure ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [disclosureText, (0, jsx_runtime_1.jsx)(Icon_1.Icon, { source: Icons_1.MaLeft, color: 'subdued' })] })) : ((0, jsx_runtime_1.jsx)(Icon_1.Icon, { source: Icons_1.MaMore, color: 'subdued' }));
+        const disclosureButton = ((0, jsx_runtime_1.jsx)("button", { type: 'button', className: disclosureButtonClassName, onClick: this.handleDisclosureActivatorClick, "aria-label": i18n.translate('Polaris.Tabs.toggleTabsLabel'), children: (0, jsx_runtime_1.jsx)("span", { className: disclosureButtonContentWrapperClassName, children: disclosureButtonContent }) }));
+        const activator = disclosureText ? ((0, jsx_runtime_1.jsx)("div", { className: Tabs_classnames_1.default.TabContainer, children: disclosureButton })) : (disclosureButton);
+        return ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsxs)(Box_1.Box, { borderBlockEndWidth: '1', borderColor: 'border-subdued', paddingInlineStart: '2', paddingInlineEnd: '2', children: [(0, jsx_runtime_1.jsx)(components_1.TabMeasurer, { tabToFocus: tabToFocus, activator: activator, selected: selected, tabs: tabs, siblingTabHasFocus: tabToFocus > -1, handleMeasurement: this.handleMeasurement }), (0, jsx_runtime_1.jsxs)("ul", { role: 'tablist', className: classname, onFocus: this.handleFocus, onBlur: this.handleBlur, onKeyDown: handleKeyDown, onKeyUp: this.handleKeyPress, children: [tabsMarkup, (0, jsx_runtime_1.jsx)("li", { className: disclosureTabClassName, role: 'presentation', children: (0, jsx_runtime_1.jsx)(Popover_1.Popover, { preferredPosition: 'below', activator: activator, active: disclosureActivatorVisible && showDisclosure, onClose: this.handleClose, autofocusTarget: 'first-node', children: (0, jsx_runtime_1.jsx)(components_1.List, { focusIndex: hiddenTabs.indexOf(tabToFocus), disclosureTabs: disclosureTabs, onClick: this.handleTabClick, onKeyPress: this.handleKeyPress }) }) })] })] }), panelMarkup] }));
+    }
+}
+function noop() { }
+function handleKeyDown(event) {
+    const { key } = event;
+    if (key === 'ArrowLeft' || key === 'ArrowRight') {
+        event.preventDefault();
+        event.stopPropagation();
+    }
+}
+function Tabs(props) {
+    const i18n = (0, i18n_1.useI18n)();
+    return (0, jsx_runtime_1.jsx)(TabsInner, { ...props, i18n: i18n });
+}
+exports.Tabs = Tabs;

package/dist/src/components/Tabs/components/Item/Item.js

@@ -0,0 +1,53 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Item = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const css_1 = require("../../../../utilities/css");
+const features_1 = require("../../../../utilities/features");
+const UnstyledLink_1 = require("../../../UnstyledLink");
+const Tabs_classnames_1 = __importDefault(require("../../Tabs.classnames"));
+class Item extends react_1.PureComponent {
+    constructor() {
+        super(...arguments);
+        this.focusedNode = null;
+        this.setFocusedNode = (node) => {
+            this.focusedNode = node;
+        };
+    }
+    componentDidMount() {
+        const { focusedNode } = this;
+        const { focused } = this.props;
+        if (focusedNode && focusedNode instanceof HTMLElement && focused) {
+            focusedNode.focus();
+        }
+    }
+    componentDidUpdate() {
+        const { focusedNode } = this;
+        const { focused } = this.props;
+        if (focusedNode && focusedNode instanceof HTMLElement && focused) {
+            focusedNode.focus();
+        }
+    }
+    render() {
+        const { id, panelID, children, url, accessibilityLabel, onClick = noop } = this.props;
+        const classname = (0, css_1.classNames)(Tabs_classnames_1.default.Item);
+        const sharedProps = {
+            id,
+            ref: this.setFocusedNode,
+            onClick,
+            className: classname,
+            'aria-controls': panelID,
+            'aria-selected': false,
+            'aria-label': accessibilityLabel,
+        };
+        const markup = url ? ((0, jsx_runtime_1.jsx)(UnstyledLink_1.UnstyledLink, { ...sharedProps, url: url, children: children })) : ((0, jsx_runtime_1.jsx)("button", { ...sharedProps, type: 'button', children: children }));
+        return (0, jsx_runtime_1.jsx)("li", { children: markup });
+    }
+}
+exports.Item = Item;
+Item.contextType = features_1.FeaturesContext;
+function noop() { }

package/dist/src/components/Tabs/components/Item/index.js

@@ -0,0 +1,17 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./Item"), exports);

package/dist/src/components/Tabs/components/List/List.js

@@ -0,0 +1,21 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.List = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const Item_1 = require("../Item");
+const Box_1 = require("../../../Box");
+function List({ focusIndex, disclosureTabs, onClick = noop, onKeyPress = noop, }) {
+    const tabs = disclosureTabs.map(({ id, content, ...tabProps }, index) => {
+        return ((0, jsx_runtime_1.jsx)(Item_1.Item, { ...tabProps, id: id, focused: index === focusIndex, onClick: onClick.bind(null, id), children: content }, id));
+    });
+    return ((0, jsx_runtime_1.jsx)("div", { onKeyDown: handleKeyDown, onKeyUp: onKeyPress, children: (0, jsx_runtime_1.jsx)(Box_1.Box, { as: "ul", padding: "2", children: tabs }) }));
+}
+exports.List = List;
+function noop() { }
+function handleKeyDown(event) {
+    const { key } = event;
+    if (key === 'ArrowLeft' || key === 'ArrowRight') {
+        event.preventDefault();
+        event.stopPropagation();
+    }
+}

package/dist/src/components/Tabs/components/List/index.js

@@ -0,0 +1,17 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./List"), exports);

package/dist/src/components/Tabs/components/Panel/Panel.js

@@ -0,0 +1,14 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Panel = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const css_1 = require("../../../../utilities/css");
+const Tabs_classnames_1 = __importDefault(require("../../Tabs.classnames"));
+function Panel({ hidden, id, tabID, children }) {
+    const className = (0, css_1.classNames)(Tabs_classnames_1.default.Panel, hidden && Tabs_classnames_1.default['Panel-hidden']);
+    return ((0, jsx_runtime_1.jsx)("div", { className: className, id: id, role: 'tabpanel', "aria-labelledby": tabID, tabIndex: -1, children: children }));
+}
+exports.Panel = Panel;

package/dist/src/components/Tabs/components/Panel/index.js

@@ -0,0 +1,17 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./Panel"), exports);

package/dist/src/components/Tabs/components/Tab/Tab.js

@@ -0,0 +1,64 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Tab = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const css_1 = require("../../../../utilities/css");
+const focus_1 = require("../../../../utilities/focus");
+const UnstyledLink_1 = require("../../../UnstyledLink");
+const Tabs_classnames_1 = __importDefault(require("../../Tabs.classnames"));
+function Tab({ id, focused, siblingTabHasFocus, children, onClick, selected, url, panelID, measuring, accessibilityLabel, }) {
+    const wasSelected = (0, react_1.useRef)(selected);
+    const panelFocused = (0, react_1.useRef)(false);
+    const node = (0, react_1.useRef)(null);
+    // A tab can start selected when it is moved from the disclosure dropdown
+    // into the main list, so we need to send focus from the tab to the panel
+    // on mount and update
+    (0, react_1.useEffect)(() => {
+        if (measuring) {
+            return;
+        }
+        // Because of timing issues with the render, we may still have the old,
+        // in-disclosure version of the tab that has focus. Check for this
+        // as a second indicator of focus
+        const itemHadFocus = focused || (document.activeElement && document.activeElement.id === id);
+        // If we just check for selected, the panel for the active tab will
+        // be focused on page load, which we don’t want
+        if (itemHadFocus && selected && panelID != null && !panelFocused.current) {
+            focusPanelID(panelID);
+            panelFocused.current = true;
+        }
+        if (selected && !wasSelected.current && panelID != null) {
+            focusPanelID(panelID);
+        }
+        else if (focused && node.current != null) {
+            (0, focus_1.focusFirstFocusableNode)(node.current);
+        }
+        wasSelected.current = selected;
+    }, [focused, id, measuring, panelID, selected]);
+    const handleClick = onClick && onClick.bind(null, id);
+    const className = (0, css_1.classNames)(Tabs_classnames_1.default.Tab, selected && Tabs_classnames_1.default['Tab-selected']);
+    let tabIndex;
+    if (selected && !siblingTabHasFocus && !measuring) {
+        tabIndex = 0;
+    }
+    else if (focused && !measuring) {
+        tabIndex = 0;
+    }
+    else {
+        tabIndex = -1;
+    }
+    const tabContainerClassNames = (0, css_1.classNames)(Tabs_classnames_1.default.TabContainer, selected && Tabs_classnames_1.default.Underline);
+    const markup = url ? ((0, jsx_runtime_1.jsx)(UnstyledLink_1.UnstyledLink, { id: id, url: url, role: 'tab', tabIndex: tabIndex, onClick: handleClick, className: className, "aria-selected": selected, "aria-controls": panelID, "aria-label": accessibilityLabel, onMouseUp: focus_1.handleMouseUpByBlurring, children: (0, jsx_runtime_1.jsx)("span", { className: Tabs_classnames_1.default.Title, children: children }) })) : ((0, jsx_runtime_1.jsx)("button", { id: id, role: 'tab', type: 'button', tabIndex: tabIndex, className: className, onClick: handleClick, "aria-selected": selected, "aria-controls": panelID, "aria-label": accessibilityLabel, onMouseUp: focus_1.handleMouseUpByBlurring, children: (0, jsx_runtime_1.jsx)("span", { className: Tabs_classnames_1.default.Title, children: children }) }));
+    return ((0, jsx_runtime_1.jsx)("li", { className: tabContainerClassNames, ref: node, role: 'presentation', children: markup }));
+}
+exports.Tab = Tab;
+function focusPanelID(panelID) {
+    const panel = document.getElementById(panelID);
+    if (panel) {
+        panel.focus({ preventScroll: true });
+    }
+}

package/dist/src/components/Tabs/components/Tab/index.js

@@ -0,0 +1,17 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./Tab"), exports);

package/dist/src/components/Tabs/components/TabMeasurer/TabMeasurer.js

@@ -0,0 +1,54 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TabMeasurer = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+// eslint-disable-next-line import/no-deprecated
+const css_1 = require("../../../../utilities/css");
+const use_component_did_mount_1 = require("../../../../utilities/use-component-did-mount");
+const EventListener_1 = require("../../../EventListener");
+const Tabs_classnames_1 = __importDefault(require("../../Tabs.classnames"));
+const Tab_1 = require("../Tab");
+exports.TabMeasurer = (0, react_1.memo)(function TabMeasurer({ selected, tabs, activator, tabToFocus, siblingTabHasFocus, handleMeasurement: handleMeasurementProp, }) {
+    const containerNode = (0, react_1.useRef)(null);
+    const animationFrame = (0, react_1.useRef)(null);
+    const handleMeasurement = (0, react_1.useCallback)(() => {
+        if (animationFrame.current) {
+            cancelAnimationFrame(animationFrame.current);
+        }
+        animationFrame.current = requestAnimationFrame(() => {
+            if (!containerNode.current) {
+                return;
+            }
+            const containerWidth = containerNode.current.offsetWidth;
+            const hiddenTabNodes = containerNode.current.children;
+            const hiddenTabNodesArray = Array.from(hiddenTabNodes);
+            const hiddenTabWidths = hiddenTabNodesArray.map((node) => {
+                return Math.ceil(node.getBoundingClientRect().width);
+            });
+            const disclosureWidth = hiddenTabWidths.pop() || 0;
+            handleMeasurementProp({
+                containerWidth,
+                disclosureWidth,
+                hiddenTabWidths,
+            });
+        });
+    }, [handleMeasurementProp]);
+    (0, react_1.useEffect)(() => {
+        handleMeasurement();
+    }, [handleMeasurement, tabs]);
+    (0, use_component_did_mount_1.useComponentDidMount)(() => {
+        if (process.env.NODE_ENV === 'development') {
+            setTimeout(handleMeasurement, 0);
+        }
+    });
+    const tabsMarkup = tabs.map((tab, index) => {
+        return ((0, jsx_runtime_1.jsx)(Tab_1.Tab, { measuring: true, id: `${tab.id}Measurer`, siblingTabHasFocus: siblingTabHasFocus, focused: index === tabToFocus, selected: index === selected, onClick: noop, url: tab.url, children: tab.content }, `${index}${tab.id}Hidden`));
+    });
+    const classname = (0, css_1.classNames)(Tabs_classnames_1.default.Tabs, Tabs_classnames_1.default.TabMeasurer);
+    return ((0, jsx_runtime_1.jsxs)("div", { className: classname, ref: containerNode, children: [(0, jsx_runtime_1.jsx)(EventListener_1.EventListener, { event: 'resize', handler: handleMeasurement }), tabsMarkup, activator] }));
+});
+function noop() { }

package/dist/src/components/Tabs/components/TabMeasurer/index.js

@@ -0,0 +1,17 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./TabMeasurer"), exports);

package/dist/src/components/Tabs/components/index.js

@@ -0,0 +1,21 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./Item"), exports);
+__exportStar(require("./List"), exports);
+__exportStar(require("./Panel"), exports);
+__exportStar(require("./Tab"), exports);
+__exportStar(require("./TabMeasurer"), exports);

package/dist/src/components/Tabs/index.js

@@ -0,0 +1,17 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./Tabs"), exports);