@arc-ui/components 12.0.0-alpha.0 → 12.0.0-beta.10

package/dist/_shared/esm/ConditionalWrapper-b85979de.js

@@ -0,0 +1,8 @@
+import React__default from 'react';
+
+var ConditionalWrapper = function (_a) {
+    var condition = _a.condition, wrapper = _a.wrapper, fallback = _a.fallback, children = _a.children;
+    return (React__default.createElement(React__default.Fragment, null, condition ? wrapper(children) : fallback ? fallback(children) : children));
+};
+
+export { ConditionalWrapper as C };

package/dist/_shared/esm/ContentSwitcher-bc952e2f.js

@@ -0,0 +1,93 @@
+import { _ as __rest, a as __assign, f as filterDataAttrs } from './index.es-fc59ba8f.js';
+import React__default, { forwardRef, useState, useRef, useEffect } from 'react';
+import { $ as $69cb30bb0017df05$export$41fb9f06171c75f4, a as $69cb30bb0017df05$export$7c6e2c02157bb7d2, b as $69cb30bb0017df05$export$54c2e3dc7acea9f5, c as $69cb30bb0017df05$export$be92b6f5f03c0fe9 } from './index-b051f161.js';
+import { T as Text } from './Text-dc3f9cb5.js';
+import { c as classNames } from './index-2e73c2e9.js';
+
+var ContentSwitcherTab = forwardRef(function (_a, ref) {
+    var label = _a.label, value = _a.value, onClick = _a.onClick, props = __rest(_a, ["label", "value", "onClick"]);
+    return (React__default.createElement($69cb30bb0017df05$export$41fb9f06171c75f4, __assign({ className: "arc-ContentSwitcherTab", value: value, ref: ref, onClick: onClick }, filterDataAttrs(props)),
+        React__default.createElement(Text, { size: "m" }, label)));
+});
+
+var ContentSwitcherContent = function (_a) {
+    var children = _a.children, value = _a.value;
+    return (React__default.createElement($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 = __rest(_a, ["children", "type", "isJustified", "ariaLabel", "isInset"]);
+    var _b = useState(false), rightOverflow = _b[0], setRightOverflow = _b[1];
+    var _c = useState(false), leftOverflow = _c[0], setLeftOverflow = _c[1];
+    var tabRefs = useRef([]);
+    var listRef = 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 handleScroll = function () {
+        checkOverflow();
+    };
+    useEffect(function () {
+        requestAnimationFrame(checkOverflow);
+        var list = listRef.current;
+        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.createElement("span", { className: classNames("arc-ContentSwitcherList-wrapper", {
+            "arc-ContentSwitcherList-wrapper--isInset": isInset
+        }) },
+        React__default.createElement($69cb30bb0017df05$export$54c2e3dc7acea9f5, __assign({ className: classNames("arc-ContentSwitcherList", {
+                "arc-ContentSwitcherList--contained": type === "contained",
+                "arc-ContentSwitcherList--isJustified": isJustified
+            }), ref: listRef, "aria-label": ariaLabel }, filterDataAttrs(props)),
+            React__default.createElement("div", { className: "arc-ContentSwitcherList-inner" }, React__default.Children.map(children, function (child, index) {
+                if (tabRefs) {
+                    return React__default.cloneElement(child, {
+                        ref: function (el) { return (tabRefs.current[index] = el); },
+                        onClick: function () {
+                            return scrollTabIntoView({ current: tabRefs.current[index] });
+                        }
+                    });
+                }
+                else {
+                    return null;
+                }
+            }))),
+        React__default.createElement("span", { className: "arc-ContentSwitcherList-overflowWrapper" },
+            leftOverflow && (React__default.createElement("div", { className: "arc-ContentSwitcherList--leftOverflow", "data-testid": "arc-ContentSwitcherList--leftOverflow" })),
+            rightOverflow && (React__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, value = _a.value, props = __rest(_a, ["children", "defaultValue", "onValueChange", "activationMode", "value"]);
+    return (React__default.createElement("span", { className: "arc-ContentSwitcher" },
+        React__default.createElement($69cb30bb0017df05$export$be92b6f5f03c0fe9, __assign({ className: "arc-ContentSwitcher-root", defaultValue: defaultValue, onValueChange: onValueChange, activationMode: activationMode, value: value }, filterDataAttrs(props)), children)));
+};
+ContentSwitcher.Tab = ContentSwitcherTab;
+ContentSwitcher.List = ContentSwitcherList;
+ContentSwitcher.Content = ContentSwitcherContent;
+
+export { ContentSwitcher as C };

package/dist/_shared/esm/ContentSwitcherDropdown-1675387e.js

@@ -0,0 +1,58 @@
+import { _ as __rest, g as getTextWidth, a as __assign, f as filterDataAttrs } from './index.es-fc59ba8f.js';
+import React__default, { useState, isValidElement } from 'react';
+import { $ as $cc7e05a45900e73f$export$be92b6f5f03c0fe9, a as $cc7e05a45900e73f$export$41fb9f06171c75f4, b as $cc7e05a45900e73f$export$4c8d1a57a761ef94, c as $cc7e05a45900e73f$export$f04a61298a47a40f, d as $cc7e05a45900e73f$export$602eac185826482c, e as $cc7e05a45900e73f$export$7c6e2c02157bb7d2, f as $cc7e05a45900e73f$export$2f60d3ec9ad468f2, g as $cc7e05a45900e73f$export$d5c6c08dc2d3ca7, h as $cc7e05a45900e73f$export$6d08773d2e66f8f2, i as $cc7e05a45900e73f$export$d6e5bf9c43ea9319, j as $cc7e05a45900e73f$export$c3468e2714d175fa, k as $cc7e05a45900e73f$export$bf1aedc3039c8d63 } from './index-0ae42785.js';
+import { T as ThemeIcon } from './ThemeIcon-69de5351.js';
+import { u as useThemeElement } from './component-4448135f.js';
+import { c as classNames } from './index-2e73c2e9.js';
+
+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 = __rest(_a, ["defaultValue", "tabs", "onValueChange", "children", "isInset", "value", "ariaLabel", "isFluid", "width"]);
+    var initialValue = defaultValue || tabs[0].value;
+    var _d = useThemeElement(), themeElement = _d[0], setThemeElement = _d[1];
+    var _e = 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__default.createElement(React__default.Fragment, null,
+        React__default.createElement($cc7e05a45900e73f$export$be92b6f5f03c0fe9, { defaultValue: defaultValue, onValueChange: onValueChangeHandler, value: selectValue },
+            React__default.createElement("span", __assign({ className: classNames("arc-ContentSwitcherDropdown-selectTriggerWrapper", {
+                    "arc-ContentSwitcherDropdown-selectTriggerWrapper--isInset": isInset,
+                    "arc-ContentSwitcherDropdown-selectTriggerWrapper--isFluid": isFluid
+                }), ref: setThemeElement }, (!isFluid && {
+                style: {
+                    width: width ? width : LongestLabelWidth + 84
+                }
+            }), filterDataAttrs(props)),
+                React__default.createElement($cc7e05a45900e73f$export$41fb9f06171c75f4, { className: "arc-ContentSwitcherDropdown-selectTrigger", "aria-label": ariaLabel },
+                    React__default.createElement($cc7e05a45900e73f$export$4c8d1a57a761ef94, null),
+                    React__default.createElement($cc7e05a45900e73f$export$f04a61298a47a40f, { className: "arc-ContentSwitcherDropdown-selectTriggerIcon" },
+                        React__default.createElement(ThemeIcon, { size: 24, icon: "selectTrigger" })))),
+            React__default.createElement($cc7e05a45900e73f$export$602eac185826482c, { container: themeElement },
+                React__default.createElement($cc7e05a45900e73f$export$7c6e2c02157bb7d2, { className: "arc-ContentSwitcherDropdown-selectContent", sideOffset: 8, position: "popper" },
+                    React__default.createElement($cc7e05a45900e73f$export$2f60d3ec9ad468f2, null),
+                    React__default.createElement($cc7e05a45900e73f$export$d5c6c08dc2d3ca7, null, tabs.map(function (item, index) { return (React__default.createElement($cc7e05a45900e73f$export$6d08773d2e66f8f2, { value: item.value, key: index, className: "arc-ContentSwitcherDropdown-selectItem", id: "arc-content-switcher-dropdown-trigger-".concat(item.value) },
+                        React__default.createElement($cc7e05a45900e73f$export$d6e5bf9c43ea9319, null, item.label),
+                        React__default.createElement($cc7e05a45900e73f$export$c3468e2714d175fa, null,
+                            React__default.createElement(ThemeIcon, { size: 24, icon: "selectIndicator" })))); })),
+                    React__default.createElement($cc7e05a45900e73f$export$bf1aedc3039c8d63, null)))),
+        React__default.Children.map(children, function (child) {
+            if (!isValidElement(child)) {
+                return null;
+            }
+            var isActive = child.props.value === selectValue;
+            return (React__default.createElement("div", __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 }, filterDataAttrs(child.props)), child));
+        })));
+};
+var ContentSwitcherDropdownContent = function (_a) {
+    var children = _a.children;
+    return React__default.createElement(React__default.Fragment, null, children);
+};
+ContentSwitcherDropdown.Content = ContentSwitcherDropdownContent;
+
+export { ContentSwitcherDropdown as C };