@arc-ui/components 12.0.0-beta.5 → 12.0.0-beta.8

package/dist/_shared/cjs/ContentSwitcher-1b789e2f.js

@@ -0,0 +1,98 @@
+'use strict';
+
+var index_es = require('./index.es-b404d2c5.js');
+var React = require('react');
+var index = require('./index-1e7a1fce.js');
+var Text = require('./Text-f6be8fdd.js');
+var index$1 = require('./index-9947ac13.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+var ContentSwitcherTab = React.forwardRef(function (_a, ref) {
+    var label = _a.label, value = _a.value, onClick = _a.onClick, props = index_es.__rest(_a, ["label", "value", "onClick"]);
+    return (React__default["default"].createElement(index.$69cb30bb0017df05$export$41fb9f06171c75f4, index_es.__assign({ className: "arc-ContentSwitcherTab", value: value, ref: ref, onClick: onClick }, index_es.filterDataAttrs(props)),
+        React__default["default"].createElement(Text.Text, { size: "m" }, label)));
+});
+
+var ContentSwitcherContent = function (_a) {
+    var children = _a.children, value = _a.value;
+    return (React__default["default"].createElement(index.$69cb30bb0017df05$export$7c6e2c02157bb7d2, { className: "arc-ContentSwitcherContent", value: value }, children));
+};
+
+var ContentSwitcherList = function (_a) {
+    var children = _a.children, type = _a.type, isJustified = _a.isJustified, ariaLabel = _a.ariaLabel, isInset = _a.isInset, props = index_es.__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 tabRefs = React.useRef([]);
+    var listRef = React.useRef(null);
+    var checkOverflow = function () {
+        if (listRef.current) {
+            setRightOverflow(listRef.current.scrollLeft + listRef.current.clientWidth <
+                listRef.current.scrollWidth);
+            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 handleScroll = function () {
+        checkOverflow();
+    };
+    React.useEffect(function () {
+        var list = listRef.current;
+        checkOverflow();
+        if (list) {
+            list.addEventListener("scroll", handleScroll);
+        }
+        return function () {
+            if (list) {
+                list.removeEventListener("scroll", handleScroll);
+            }
+        };
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
+    return (React__default["default"].createElement("span", { className: "arc-ContentSwitcherList-wrapper" },
+        React__default["default"].createElement(index.$69cb30bb0017df05$export$54c2e3dc7acea9f5, index_es.__assign({ className: index$1.classNames("arc-ContentSwitcherList", {
+                "arc-ContentSwitcherList--contained": type === "contained",
+                "arc-ContentSwitcherList--isJustified": isJustified,
+                "arc-ContentSwitcherList--isInset": isInset
+            }), ref: listRef, "aria-label": ariaLabel }, index_es.filterDataAttrs(props)),
+            React__default["default"].createElement("div", { className: "arc-ContentSwitcherList-inner" }, React__default["default"].Children.map(children, function (child, index) {
+                if (tabRefs) {
+                    return React__default["default"].cloneElement(child, {
+                        ref: function (el) { return (tabRefs.current[index] = el); },
+                        onClick: function () {
+                            return scrollTabIntoView({ current: tabRefs.current[index] });
+                        }
+                    });
+                }
+                else {
+                    return null;
+                }
+            }))),
+        React__default["default"].createElement("span", { className: "arc-ContentSwitcherList-overflowWrapper" },
+            leftOverflow && (React__default["default"].createElement("div", { className: "arc-ContentSwitcherList--leftOverflow", "data-testid": "arc-ContentSwitcherList--leftOverflow" })),
+            rightOverflow && (React__default["default"].createElement("div", { className: "arc-ContentSwitcherList--rightOverflow", "data-testid": "arc-ContentSwitcherList--rightOverflow" })))));
+};
+
+/** 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, props = index_es.__rest(_a, ["children", "defaultValue", "onValueChange", "activationMode"]);
+    return (React__default["default"].createElement("span", { className: "arc-ContentSwitcher" },
+        React__default["default"].createElement(index.$69cb30bb0017df05$export$be92b6f5f03c0fe9, index_es.__assign({ className: "arc-ContentSwitcher-root", defaultValue: defaultValue, onValueChange: onValueChange, activationMode: activationMode }, index_es.filterDataAttrs(props)), children)));
+};
+ContentSwitcher.Tab = ContentSwitcherTab;
+ContentSwitcher.List = ContentSwitcherList;
+ContentSwitcher.Content = ContentSwitcherContent;
+
+exports.ContentSwitcher = ContentSwitcher;

package/dist/_shared/cjs/ContentSwitcherDropdown-0de9f7e4.js

@@ -0,0 +1,47 @@
+'use strict';
+
+var index_es = require('./index.es-b404d2c5.js');
+var React = require('react');
+var index = require('./index-6b0bf2cc.js');
+var ThemeIcon = require('./ThemeIcon-6b10d20a.js');
+var component = require('./component-ae4b7058.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+var ContentSwitcherDropdown = function (_a) {
+    var defaultValue = _a.defaultValue, tabs = _a.tabs, onValueChange = _a.onValueChange, children = _a.children, props = index_es.__rest(_a, ["defaultValue", "tabs", "onValueChange", "children"]);
+    var initialValue = defaultValue || tabs[0].value;
+    var _b = component.useThemeElement(), themeElement = _b[0], setThemeElement = _b[1];
+    var _c = React.useState(initialValue), selectedValue = _c[0], setSelectedValue = _c[1];
+    return (React__default["default"].createElement(React__default["default"].Fragment, null,
+        React__default["default"].createElement(index.$cc7e05a45900e73f$export$be92b6f5f03c0fe9, { defaultValue: initialValue, onValueChange: children ? function (value) { return setSelectedValue(value); } : onValueChange },
+            React__default["default"].createElement("span", index_es.__assign({ className: "arc-ContentSwitcherDropdown-selectTriggerWrapper", ref: setThemeElement }, index_es.filterDataAttrs(props)),
+                React__default["default"].createElement(index.$cc7e05a45900e73f$export$41fb9f06171c75f4, { className: "arc-ContentSwitcherDropdown-selectTrigger" },
+                    React__default["default"].createElement(index.$cc7e05a45900e73f$export$4c8d1a57a761ef94, null),
+                    React__default["default"].createElement(index.$cc7e05a45900e73f$export$f04a61298a47a40f, { className: "arc-ContentSwitcherDropdown-selectTriggerIcon" },
+                        React__default["default"].createElement(ThemeIcon.ThemeIcon, { size: 24, icon: "selectTrigger" })))),
+            React__default["default"].createElement(index.$cc7e05a45900e73f$export$602eac185826482c, { container: themeElement },
+                React__default["default"].createElement(index.$cc7e05a45900e73f$export$7c6e2c02157bb7d2, { className: "arc-ContentSwitcherDropdown-selectContent", sideOffset: 8, position: "popper" },
+                    React__default["default"].createElement(index.$cc7e05a45900e73f$export$2f60d3ec9ad468f2, null),
+                    React__default["default"].createElement(index.$cc7e05a45900e73f$export$d5c6c08dc2d3ca7, null, tabs.map(function (item, index$1) { return (React__default["default"].createElement(index.$cc7e05a45900e73f$export$6d08773d2e66f8f2, { value: item.value, key: index$1, className: "arc-ContentSwitcherDropdown-selectItem", id: "arc-content-switcher-dropdown-trigger-".concat(item.value) },
+                        React__default["default"].createElement(index.$cc7e05a45900e73f$export$d6e5bf9c43ea9319, null, item.label),
+                        React__default["default"].createElement(index.$cc7e05a45900e73f$export$c3468e2714d175fa, null,
+                            React__default["default"].createElement(ThemeIcon.ThemeIcon, { size: 24, icon: "selectIndicator" })))); })),
+                    React__default["default"].createElement(index.$cc7e05a45900e73f$export$bf1aedc3039c8d63, null)))),
+        React__default["default"].Children.map(children, function (child) {
+            if (!React.isValidElement(child)) {
+                return null;
+            }
+            var isActive = child.props.value === selectedValue;
+            return (React__default["default"].createElement("div", index_es.__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 }, index_es.filterDataAttrs(child.props)), child));
+        })));
+};
+var ContentSwitcherDropdownContent = function (_a) {
+    var children = _a.children;
+    return React__default["default"].createElement(React__default["default"].Fragment, null, children);
+};
+ContentSwitcherDropdown.Content = ContentSwitcherDropdownContent;
+
+exports.ContentSwitcherDropdown = ContentSwitcherDropdown;