@arc-ui/components 12.0.0-beta.13 → 12.0.0-beta.15

package/lib/_shared/cjs/ComboBox-CmVMpsxn.cjs

@@ -0,0 +1,291 @@
+'use client';
+'use strict';
+
+var filterAttrs = require('./filter-attrs-eK6E_34o.cjs');
+var React = require('react');
+var index$2 = require('./index-Cn7XSNle.cjs');
+var index$1 = require('./index-CTlXMLug.cjs');
+var FormControl = require('./FormControl-D3-JbAVb.cjs');
+var index = require('./index-DXNM3D1d.cjs');
+var Box = require('./Box-COPXU1Jf.cjs');
+var Icon = require('./Icon-DdqFr6bT.cjs');
+var ThemeIcon = require('./ThemeIcon-BoxbjTaQ.cjs');
+
+const BtIconChevronDown2Px = (props) =>
+  /*#__PURE__*/ React.createElement(
+    "svg",
+    Object.assign(
+      {
+        xmlns: "http://www.w3.org/2000/svg",
+        viewBox: "0 0 32 32",
+      },
+      props,
+    ),
+    /*#__PURE__*/ React.createElement("defs", null),
+    /*#__PURE__*/ React.createElement("path", {
+      d: "M15.99316,23.91406,2.294,10.207A.99989.99989,0,1,1,3.708,8.793l12.28515,12.293L28.292,8.793A.99989.99989,0,1,1,29.70605,10.207Z",
+      fill: "currentColor",
+    }),
+  );
+
+var filterOptions = function (options, value) {
+    return options.filter(function (option) {
+        return value ? option.toLowerCase().includes(value.toLowerCase()) : true;
+    });
+};
+var getSelectedOptions = function (option, selectedOptions) {
+    return selectedOptions.indexOf(option) !== -1
+        ? selectedOptions.filter(function (selectedOption) { return selectedOption !== option; })
+        : filterAttrs.__spreadArray(filterAttrs.__spreadArray([], selectedOptions, true), [option], false);
+};
+var findOptionIndex = function (options, searchOption) {
+    return options.findIndex(function (option) { return option === searchOption; });
+};
+var isSelected = function (option, selectedOptions) {
+    return selectedOptions.some(function (selectedOption) { return option === selectedOption; });
+};
+
+var reducer = function (initialOptions) {
+    return function (state, action) {
+        switch (action.type) {
+            case "OPEN": {
+                var isMultiSelectable = action.payload.isMultiSelectable;
+                var selectedOptions = state.selectedOptions, options = state.options;
+                return filterAttrs.__assign(filterAttrs.__assign({}, state), { isExpanded: true, highlightedOptionIndex: isMultiSelectable && selectedOptions.length
+                        ? findOptionIndex(options, selectedOptions[selectedOptions.length - 1])
+                        : 0 });
+            }
+            case "CLOSE": {
+                return filterAttrs.__assign(filterAttrs.__assign({}, state), { isExpanded: false, highlightedOptionIndex: 0 });
+            }
+            case "INPUT_CHANGE": {
+                var _a = action.payload, value = _a.value, isAutocomplete = _a.isAutocomplete;
+                return filterAttrs.__assign(filterAttrs.__assign({}, state), { value: value, options: isAutocomplete
+                        ? filterOptions(initialOptions, value)
+                        : state.options, highlightedOptionIndex: 0, isExpanded: true });
+            }
+            case "SINGLE_SELECT": {
+                var _b = action.payload, selectedOption = _b.option, isAutocomplete = _b.isAutocomplete;
+                return filterAttrs.__assign(filterAttrs.__assign({}, state), { isExpanded: false, options: isAutocomplete
+                        ? filterOptions(initialOptions, selectedOption)
+                        : state.options, value: selectedOption });
+            }
+            case "MULTI_SELECT": {
+                var selectedOption = action.payload.option;
+                var selectedOptions = state.selectedOptions, options = state.options;
+                var newSelectedOptions = getSelectedOptions(selectedOption, selectedOptions);
+                return filterAttrs.__assign(filterAttrs.__assign({}, state), { value: "", options: initialOptions, highlightedOptionIndex: findOptionIndex(options, selectedOption), selectedOptions: newSelectedOptions });
+            }
+            case "MULTI_SELECT_REMOVE": {
+                var option_1 = action.payload.option;
+                var selectedOptions = state.selectedOptions;
+                return filterAttrs.__assign(filterAttrs.__assign({}, state), { selectedOptions: selectedOptions.filter(function (selectedOption) { return option_1 !== selectedOption; }) });
+            }
+            case "KEYDOWN": {
+                var _c = action.payload, key = _c.key, isAutocomplete = _c.isAutocomplete, isMultiSelectable = _c.isMultiSelectable;
+                var isExpanded = state.isExpanded, highlightedOptionIndex = state.highlightedOptionIndex, options = state.options, selectedOptions = state.selectedOptions;
+                if (key === "Escape" && isExpanded) {
+                    return filterAttrs.__assign(filterAttrs.__assign({}, state), { isExpanded: false, highlightedOptionIndex: 0 });
+                }
+                if (key === "ArrowDown" && isExpanded) {
+                    return filterAttrs.__assign(filterAttrs.__assign({}, state), { highlightedOptionIndex: highlightedOptionIndex === options.length - 1
+                            ? 0
+                            : highlightedOptionIndex + 1 });
+                }
+                if (key === "ArrowUp" && isExpanded) {
+                    return filterAttrs.__assign(filterAttrs.__assign({}, state), { highlightedOptionIndex: highlightedOptionIndex === 0
+                            ? options.length - 1
+                            : highlightedOptionIndex - 1 });
+                }
+                if (key === "ArrowDown" && !isExpanded) {
+                    return filterAttrs.__assign(filterAttrs.__assign({}, state), { isExpanded: true, highlightedOptionIndex: isMultiSelectable && selectedOptions.length
+                            ? findOptionIndex(options, selectedOptions[selectedOptions.length - 1])
+                            : 0 });
+                }
+                if (key === "ArrowUp" && !isExpanded) {
+                    return filterAttrs.__assign(filterAttrs.__assign({}, state), { isExpanded: true, highlightedOptionIndex: isMultiSelectable && selectedOptions.length
+                            ? findOptionIndex(options, selectedOptions[selectedOptions.length - 1])
+                            : options.length - 1 });
+                }
+                if (key === "Enter" && isExpanded) {
+                    if (isMultiSelectable) {
+                        var newSelectedOptionIds = getSelectedOptions(options[highlightedOptionIndex], selectedOptions);
+                        return filterAttrs.__assign(filterAttrs.__assign({}, state), { value: "", options: initialOptions, selectedOptions: newSelectedOptionIds });
+                    }
+                    else {
+                        return filterAttrs.__assign(filterAttrs.__assign({}, state), { isExpanded: false, options: isAutocomplete
+                                ? filterOptions(initialOptions, options[highlightedOptionIndex])
+                                : options, value: options[highlightedOptionIndex] });
+                    }
+                }
+                return state;
+            }
+            default:
+                return state;
+        }
+    };
+};
+
+var ComboBox = React.forwardRef(function (_a, ref) {
+    var name = _a.name, onBlur = _a.onBlur, onFocus = _a.onFocus, label = _a.label, helper = _a.helper, id = _a.id, initialOptions = _a.options, hideLabel = _a.hideLabel, isFluid = _a.isFluid, errorMessage = _a.errorMessage, disclosureTitle = _a.disclosureTitle, disclosureText = _a.disclosureText, onClickDisclosure = _a.onClickDisclosure, listBoxAriaLabel = _a.listBoxAriaLabel, _b = _a.defaultValue, defaultValue = _b === void 0 ? "" : _b, _c = _a.labelSize, labelSize = _c === void 0 ? "l" : _c, _d = _a.isMultiSelectable, isMultiSelectable = _d === void 0 ? false : _d, _e = _a.isDisabled, isDisabled = _e === void 0 ? false : _e, _f = _a.isRequired, isRequired = _f === void 0 ? false : _f, _g = _a.isAutocomplete, isAutocomplete = _g === void 0 ? false : _g, props = filterAttrs.__rest(_a, ["name", "onBlur", "onFocus", "label", "helper", "id", "options", "hideLabel", "isFluid", "errorMessage", "disclosureTitle", "disclosureText", "onClickDisclosure", "listBoxAriaLabel", "defaultValue", "labelSize", "isMultiSelectable", "isDisabled", "isRequired", "isAutocomplete"]);
+    var listBoxId = React.useId();
+    var listItemRefs = React.useRef([]);
+    var containerRef = React.useRef(null);
+    var inputRef = React.useRef(null);
+    var _h = index.useThemeElement(), themeElement = _h[0], setThemeElement = _h[1];
+    var _j = React.useReducer(reducer(initialOptions), {
+        isExpanded: false,
+        value: defaultValue,
+        options: initialOptions,
+        highlightedOptionIndex: 0,
+        selectedOptions: [],
+    }), _k = _j[0], isExpanded = _k.isExpanded, value = _k.value, options = _k.options, highlightedOptionIndex = _k.highlightedOptionIndex, selectedOptions = _k.selectedOptions, dispatch = _j[1];
+    var ariaDescribedby = FormControl.useAriaDescribedby({
+        errorMessage: errorMessage,
+        id: id,
+        helper: helper,
+        disclosureText: disclosureText,
+    }).ariaDescribedby;
+    var getTextInputRef = function (elementRef) {
+        inputRef.current = elementRef;
+        if (ref && typeof ref === "object") {
+            ref.current = elementRef;
+        }
+        if (ref && typeof ref === "function") {
+            ref(elementRef);
+        }
+    };
+    var setScrollPosition = function (listEl) {
+        var listItemEl = listItemRefs.current[highlightedOptionIndex];
+        if (listItemEl && listEl) {
+            var selectedOptionIsBelowOverFlow = listItemEl.offsetTop + listItemEl.offsetHeight >
+                listEl.offsetHeight + listEl.scrollTop;
+            var selectedOptionIsAboveOverFlow = listItemEl.offsetTop < listEl.scrollTop;
+            if (selectedOptionIsBelowOverFlow) {
+                listEl.scrollTop =
+                    listItemEl.offsetTop +
+                        listItemEl.offsetHeight -
+                        listEl.offsetHeight;
+            }
+            if (selectedOptionIsAboveOverFlow) {
+                listEl.scrollTop = listItemEl.offsetTop;
+            }
+        }
+    };
+    var onItemClick = function (itemOption) {
+        return function (e) {
+            var _a;
+            e.preventDefault();
+            if (isMultiSelectable) {
+                dispatch({
+                    type: "MULTI_SELECT",
+                    payload: {
+                        option: itemOption,
+                    },
+                });
+            }
+            else {
+                dispatch({
+                    type: "SINGLE_SELECT",
+                    payload: {
+                        isAutocomplete: isAutocomplete,
+                        option: itemOption,
+                    },
+                });
+            }
+            (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+        };
+    };
+    var onInputChange = function (e) {
+        dispatch({
+            type: "INPUT_CHANGE",
+            payload: {
+                isAutocomplete: isAutocomplete,
+                value: e.target.value,
+            },
+        });
+    };
+    var onInputClick = function () {
+        isAutocomplete &&
+            dispatch({
+                type: "OPEN",
+                payload: {
+                    isMultiSelectable: isMultiSelectable,
+                },
+            });
+    };
+    var onInteractOutside = function (e) {
+        if (containerRef.current &&
+            !containerRef.current.contains(e.currentTarget)) {
+            dispatch({
+                type: "CLOSE",
+            });
+        }
+    };
+    var onInputKeyDown = function (e) {
+        dispatch({
+            type: "KEYDOWN",
+            payload: {
+                key: e.key,
+                isAutocomplete: isAutocomplete,
+                isMultiSelectable: isMultiSelectable,
+            },
+        });
+    };
+    var onMultiSelectRemove = function (option) { return function (e) {
+        var _a;
+        e.preventDefault();
+        e.stopPropagation();
+        dispatch({
+            type: "MULTI_SELECT_REMOVE",
+            payload: {
+                option: option,
+            },
+        });
+        (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+    }; };
+    var onOpenAutoFocus = function (e) {
+        var _a;
+        e.preventDefault();
+        (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+    };
+    return (React.createElement("div", { ref: setThemeElement, className: index$1.classNames("arc-ComboBox", {
+            "arc-ComboBox--constrained": !isFluid,
+        }) },
+        React.createElement("div", { ref: containerRef },
+            React.createElement(index$2.Root2, { open: isExpanded },
+                React.createElement(FormControl.FormControl, { errorMessage: errorMessage, helper: helper, htmlFor: id, isDisabled: isDisabled, label: label, hideLabel: hideLabel, labelSize: labelSize, requirementStatus: isRequired ? "required" : "optional", disclosureTitle: disclosureTitle, disclosureText: disclosureText, onClickDisclosure: onClickDisclosure },
+                    React.createElement("div", { onClick: onInputClick, className: index$1.classNames("arc-ComboBox-container", {
+                            "arc-ComboBox-container--cursor": isAutocomplete,
+                        }) },
+                        React.createElement("div", { className: index$1.classNames("arc-ComboBox-inputWrapper", {
+                                "arc-ComboBox-inputWrapper--multiSelect": isMultiSelectable,
+                            }) },
+                            selectedOptions.length > 0 &&
+                                selectedOptions.map(function (option, i) { return (React.createElement("div", { className: "arc-ComboBox-tag", key: "".concat(listBoxId, "-selectedOption-").concat(i) },
+                                    React.createElement("span", null, option),
+                                    React.createElement("button", { className: "arc-ComboBox-tagButton", "aria-label": "".concat(option, ", press space or enter to remove"), onClick: onMultiSelectRemove(option) },
+                                        React.createElement(ThemeIcon.ThemeIcon, { icon: "tagRemove", color: "brand", size: 20 })))); }),
+                            React.createElement("input", filterAttrs.__assign({ className: "arc-ComboBox-input", ref: getTextInputRef, "aria-describedby": ariaDescribedby, "aria-invalid": errorMessage ? "true" : "false", type: "text", role: "combobox", autoComplete: "off", "aria-autocomplete": "list", "aria-controls": listBoxId, "aria-expanded": isExpanded, "aria-activedescendant": highlightedOptionIndex
+                                    ? "".concat(listBoxId, "-").concat(highlightedOptionIndex)
+                                    : undefined, id: id, name: name, onFocus: onFocus, onBlur: onBlur, onChange: onInputChange, onKeyDown: onInputKeyDown, disabled: isDisabled, required: isRequired, value: value }, filterAttrs.filterAttrs(props)))),
+                        isAutocomplete && (React.createElement("div", { className: index$1.classNames("arc-ComboBox-inputIcon", {
+                                "arc-ComboBox-inputIcon--expanded": isExpanded,
+                            }) },
+                            React.createElement(Icon.Icon, { isPresentationIcon: true, icon: BtIconChevronDown2Px, size: 24 }))))),
+                React.createElement(index$2.Anchor2, null),
+                React.createElement(index$2.Portal, { container: themeElement },
+                    React.createElement(index$2.Content2, { align: "start", sideOffset: 5, onInteractOutside: onInteractOutside, onOpenAutoFocus: onOpenAutoFocus },
+                        React.createElement("div", { className: "arc-ComboBox-listboxContainer" },
+                            React.createElement(Box.Box, { elevationLevel: "1" },
+                                React.createElement("ul", { ref: setScrollPosition, id: listBoxId, className: "arc-ComboBox-list", role: "listbox", "aria-label": listBoxAriaLabel, "aria-multiselectable": isMultiSelectable }, options.length ? (options.map(function (option, i) { return (React.createElement("li", { id: "".concat(listBoxId, "-").concat(i), ref: function (el) { return (listItemRefs.current[i] = el); }, key: option, className: index$1.classNames("arc-ComboBox-listItem", {
+                                        "arc-ComboBox-listItem--highlighted": i === highlightedOptionIndex,
+                                    }), onMouseDown: onItemClick(option), role: "option", "aria-selected": isSelected(option, selectedOptions) },
+                                    React.createElement("div", { className: "arc-ComboBox-listItemText" }, option),
+                                    React.createElement("div", { className: index$1.classNames("arc-ComboBox-listItemIcon", {
+                                            "arc-ComboBox-listItemIcon--visible": isSelected(option, selectedOptions),
+                                        }) },
+                                        React.createElement(ThemeIcon.ThemeIcon, { size: 20, icon: "selectIndicator" })))); })) : (React.createElement("li", { className: "arc-ComboBox-listItem", role: "option", "aria-selected": false, "aria-disabled": true }, "No matches found")))))))))));
+});
+
+exports.ComboBox = ComboBox;

package/lib/_shared/cjs/ContentSwitcherDropdown-CWP2-zun.cjs

@@ -0,0 +1,71 @@
+'use strict';
+
+var filterAttrs = require('./filter-attrs-eK6E_34o.cjs');
+var React = require('react');
+var index$2 = require('./index-CTlXMLug.cjs');
+var index$1 = require('./index-BcWpGxUd.cjs');
+var ThemeIcon = require('./ThemeIcon-BoxbjTaQ.cjs');
+var index = require('./index-DXNM3D1d.cjs');
+
+// src/get-text-width/get-text-width.ts
+var getTextWidth = (text, font) => {
+  const canvas = document.createElement("canvas");
+  const context = canvas.getContext("2d");
+  if (context) {
+    context.font = getComputedStyle(document.body).font;
+    return context.measureText(text).width;
+  }
+  return 0;
+};
+
+var ContentSwitcherDropdown = function (_a) {
+    var defaultValue = _a.defaultValue, tabs = _a.tabs, onValueChange = _a.onValueChange, children = _a.children, _b = _a.isInset, isInset = _b === void 0 ? false : _b, value = _a.value, ariaLabel = _a.ariaLabel, _c = _a.isFluid, isFluid = _c === void 0 ? false : _c, width = _a.width, props = filterAttrs.__rest(_a, ["defaultValue", "tabs", "onValueChange", "children", "isInset", "value", "ariaLabel", "isFluid", "width"]);
+    var initialValue = defaultValue || tabs[0].value;
+    var _d = index.useThemeElement(), themeElement = _d[0], setThemeElement = _d[1];
+    var _e = React.useState(initialValue), uncontrolledValue = _e[0], setUncontrolledValue = _e[1];
+    var isControlled = typeof value !== "undefined";
+    var selectValue = isControlled ? value : uncontrolledValue;
+    var onValueChangeHandler = function (value) {
+        onValueChange && onValueChange(value);
+        setUncontrolledValue(value);
+    };
+    var LongestLabelWidth = getTextWidth(tabs.reduce(function (longest, current) {
+        return current.label.length > longest.length ? current.label : longest;
+    }, ""));
+    return (React.createElement(React.Fragment, null,
+        React.createElement(index$1.Root2, { defaultValue: defaultValue, onValueChange: onValueChangeHandler, value: selectValue },
+            React.createElement("span", filterAttrs.__assign({ className: index$2.classNames("arc-ContentSwitcherDropdown-selectTriggerWrapper", {
+                    "arc-ContentSwitcherDropdown-selectTriggerWrapper--isInset": isInset,
+                    "arc-ContentSwitcherDropdown-selectTriggerWrapper--isFluid": isFluid,
+                }), ref: setThemeElement }, (!isFluid && {
+                style: {
+                    width: width ? width : LongestLabelWidth + 84,
+                },
+            }), filterAttrs.filterAttrs(props)),
+                React.createElement(index$1.Trigger, { className: "arc-ContentSwitcherDropdown-selectTrigger", "aria-label": ariaLabel },
+                    React.createElement(index$1.Value, null),
+                    React.createElement(index$1.Icon, { className: "arc-ContentSwitcherDropdown-selectTriggerIcon" },
+                        React.createElement(ThemeIcon.ThemeIcon, { size: 24, icon: "selectTrigger" })))),
+            React.createElement(index$1.Portal, { container: themeElement },
+                React.createElement(index$1.Content2, { className: "arc-ContentSwitcherDropdown-selectContent", sideOffset: 8, position: "popper" },
+                    React.createElement(index$1.ScrollUpButton, null),
+                    React.createElement(index$1.Viewport, null, tabs.map(function (item, index) { return (React.createElement(index$1.Item, { value: item.value, key: index, className: "arc-ContentSwitcherDropdown-selectItem", id: "arc-content-switcher-dropdown-trigger-".concat(item.value) },
+                        React.createElement(index$1.ItemText, null, item.label),
+                        React.createElement(index$1.ItemIndicator, null,
+                            React.createElement(ThemeIcon.ThemeIcon, { size: 24, icon: "selectIndicator" })))); })),
+                    React.createElement(index$1.ScrollDownButton, null)))),
+        React.Children.map(children, function (child) {
+            if (!React.isValidElement(child)) {
+                return null;
+            }
+            var isActive = child.props.value === selectValue;
+            return (React.createElement("div", filterAttrs.__assign({ role: "tabpanel", className: "arc-ContentSwitcherDropdown-content", id: "arc-content-switcher-dropdown-content-".concat(child.props.value), "aria-labelledby": "arc-content-switcher-dropdown-trigger-".concat(child.props.value), "data-state": isActive ? "active" : "inactive", tabIndex: 0, hidden: !isActive }, filterAttrs.filterAttrs(child.props)), child));
+        })));
+};
+var ContentSwitcherDropdownContent = function (_a) {
+    var children = _a.children;
+    return React.createElement(React.Fragment, null, children);
+};
+
+exports.ContentSwitcherDropdown = ContentSwitcherDropdown;
+exports.ContentSwitcherDropdownContent = ContentSwitcherDropdownContent;

package/lib/_shared/cjs/ContentSwitcherList-I7jCZn8C.cjs

@@ -0,0 +1,98 @@
+'use strict';
+
+var filterAttrs = require('./filter-attrs-eK6E_34o.cjs');
+var React = require('react');
+var index = require('./index-BCu-VH8y.cjs');
+var debounce = require('./debounce-BeIT3oyF.cjs');
+var index$1 = require('./index-CTlXMLug.cjs');
+
+/** Use `ContentSwitcher` to allow users to navigate between different sections of relevant content. */
+var ContentSwitcher = function (_a) {
+    var children = _a.children, defaultValue = _a.defaultValue, onValueChange = _a.onValueChange, activationMode = _a.activationMode, value = _a.value, props = filterAttrs.__rest(_a, ["children", "defaultValue", "onValueChange", "activationMode", "value"]);
+    return (React.createElement("span", { className: "arc-ContentSwitcher" },
+        React.createElement(index.$69cb30bb0017df05$export$be92b6f5f03c0fe9, filterAttrs.__assign({ className: "arc-ContentSwitcher-root", defaultValue: defaultValue, onValueChange: onValueChange, activationMode: activationMode, value: value }, filterAttrs.filterAttrs(props)), children)));
+};
+
+var ContentSwitcherContent = function (_a) {
+    var children = _a.children, value = _a.value;
+    return (React.createElement(index.$69cb30bb0017df05$export$7c6e2c02157bb7d2, { className: "arc-ContentSwitcherContent", value: value },
+        React.createElement("div", { className: "arc-ContentSwitcherContent-wrapper" }, children)));
+};
+
+var ContentSwitcherList = function (_a) {
+    var children = _a.children, type = _a.type, isJustified = _a.isJustified, ariaLabel = _a.ariaLabel, isInset = _a.isInset, props = filterAttrs.__rest(_a, ["children", "type", "isJustified", "ariaLabel", "isInset"]);
+    var _b = React.useState(false), rightOverflow = _b[0], setRightOverflow = _b[1];
+    var _c = React.useState(false), leftOverflow = _c[0], setLeftOverflow = _c[1];
+    var _d = React.useState(0), contentSwitcherListWidth = _d[0], setContentSwitcherListWidth = _d[1];
+    var tabRefs = React.useRef([]);
+    var listRef = React.useRef(null);
+    var checkOverflow = function () {
+        if (listRef.current) {
+            setRightOverflow(listRef.current.scrollLeft + listRef.current.clientWidth <
+                listRef.current.scrollWidth - 1);
+            setLeftOverflow(listRef.current.scrollLeft > 0);
+        }
+    };
+    var scrollTabIntoView = function (tabRef) {
+        if (tabRef.current && listRef.current) {
+            var scrollLeft = tabRef.current.offsetLeft -
+                listRef.current.clientWidth / 2 +
+                tabRef.current.clientWidth / 2;
+            listRef.current.scrollTo({
+                left: scrollLeft,
+                behavior: "smooth",
+            });
+        }
+    };
+    var handleResize = debounce.debounce(function () {
+        if (listRef.current) {
+            setContentSwitcherListWidth(listRef.current.clientWidth);
+        }
+    }, 100);
+    React.useEffect(function () {
+        var list = listRef.current;
+        var updateLayout = function () {
+            checkOverflow();
+            handleResize();
+        };
+        // Initial check on mount
+        updateLayout();
+        if (list) {
+            list.addEventListener("scroll", checkOverflow);
+            window.addEventListener("resize", updateLayout);
+        }
+        return function () {
+            if (list) {
+                list.removeEventListener("scroll", checkOverflow);
+            }
+            window.removeEventListener("resize", updateLayout);
+        };
+    }, [children, checkOverflow, handleResize]);
+    return (React.createElement("span", { className: index$1.classNames("arc-ContentSwitcherList-wrapper", {
+            "arc-ContentSwitcherList-wrapper--isInset": isInset,
+        }) },
+        React.createElement(index.$69cb30bb0017df05$export$54c2e3dc7acea9f5, filterAttrs.__assign({ className: index$1.classNames("arc-ContentSwitcherList", {
+                "arc-ContentSwitcherList--contained": type === "contained",
+                "arc-ContentSwitcherList--isJustified": isJustified,
+            }), ref: listRef, "aria-label": ariaLabel }, filterAttrs.filterAttrs(props)),
+            React.createElement("div", { className: "arc-ContentSwitcherList-inner" }, React.Children.map(children, function (child, index) {
+                if (tabRefs) {
+                    return React.cloneElement(child, {
+                        ref: function (el) { return (tabRefs.current[index] = el); },
+                        onClick: function () {
+                            return scrollTabIntoView({ current: tabRefs.current[index] });
+                        },
+                    });
+                }
+                else {
+                    return null;
+                }
+            }))),
+        React.createElement("span", { className: "arc-ContentSwitcherList-overflowWrapper", style: { width: contentSwitcherListWidth } },
+            leftOverflow && (React.createElement("div", { className: "arc-ContentSwitcherList--leftOverflow", "data-testid": "arc-ContentSwitcherList--leftOverflow" })),
+            rightOverflow && (React.createElement("div", { className: "arc-ContentSwitcherList--rightOverflow", "data-testid": "arc-ContentSwitcherList--rightOverflow" })))));
+};
+
+exports.ContentSwitcher = ContentSwitcher;
+exports.ContentSwitcherContent = ContentSwitcherContent;
+exports.ContentSwitcherList = ContentSwitcherList;

package/lib/_shared/cjs/ContentSwitcherTab-B387Qs3I.cjs

@@ -0,0 +1,14 @@
+'use strict';
+
+var filterAttrs = require('./filter-attrs-eK6E_34o.cjs');
+var React = require('react');
+var index = require('./index-BCu-VH8y.cjs');
+var Text = require('./Text-Cr5nmYmx.cjs');
+
+var ContentSwitcherTab = React.forwardRef(function (_a, ref) {
+    var label = _a.label, value = _a.value, onClick = _a.onClick, props = filterAttrs.__rest(_a, ["label", "value", "onClick"]);
+    return (React.createElement(index.$69cb30bb0017df05$export$41fb9f06171c75f4, filterAttrs.__assign({ className: "arc-ContentSwitcherTab", value: value, ref: ref, onClick: onClick }, filterAttrs.filterAttrs(props)),
+        React.createElement(Text.Text, { size: "m" }, label)));
+});
+
+exports.ContentSwitcherTab = ContentSwitcherTab;