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

package/dist/_shared/cjs/{Tabs-ade6d6b6.js → index-1e7a1fce.js}

@@ -1,25 +1,10 @@
 'use strict';
 
-var filterDataAttrs = require('./filter-data-attrs-1c9a530c.js');
+var index$1 = require('./index-76f7dd53.js');
 var React = require('react');
-var _extends = require('./extends-8c5e4b48.js');
-var index$1 = require('./index-4aa11039.js');
-var index = require('./index-23b4f49f.js');
-var index$2 = require('./index-d75774a9.js');
-var Icon = require('./Icon-a47b6c0a.js');
-var Surface = require('./Surface-038db6e1.js');
-var index$3 = require('./index-9947ac13.js');
-var ThemeIcon = require('./ThemeIcon-9534f091.js');
-
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
-
-var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
-
-const $f631663db3294ace$var$DirectionContext = /*#__PURE__*/ React.createContext(undefined);
-/* -----------------------------------------------------------------------------------------------*/ function $f631663db3294ace$export$b39126d51d94e6f3(localDir) {
-    const globalDir = React.useContext($f631663db3294ace$var$DirectionContext);
-    return localDir || globalDir || 'ltr';
-}
+var index = require('./index-dbc843d3.js');
+var index$2 = require('./index-879e71ee.js');
+var index$3 = require('./index-527f962b.js');
 
 const $d7bdfb9eb0fdf311$var$ENTRY_FOCUS = 'rovingFocusGroup.onEntryFocus';
 const $d7bdfb9eb0fdf311$var$EVENT_OPTIONS = {
@@ -39,7 +24,7 @@ const $d7bdfb9eb0fdf311$export$8699f7c8af148338 = /*#__PURE__*/ React.forwardRef
         scope: props.__scopeRovingFocusGroup
     }, /*#__PURE__*/ React.createElement($d7bdfb9eb0fdf311$var$Collection.Slot, {
         scope: props.__scopeRovingFocusGroup
-    }, /*#__PURE__*/ React.createElement($d7bdfb9eb0fdf311$var$RovingFocusGroupImpl, _extends._extends({}, props, {
+    }, /*#__PURE__*/ React.createElement($d7bdfb9eb0fdf311$var$RovingFocusGroupImpl, index$1._extends({}, props, {
         ref: forwardedRef
     }))));
 });
@@ -47,7 +32,7 @@ const $d7bdfb9eb0fdf311$export$8699f7c8af148338 = /*#__PURE__*/ React.forwardRef
     const { __scopeRovingFocusGroup: __scopeRovingFocusGroup , orientation: orientation , loop: loop = false , dir: dir , currentTabStopId: currentTabStopIdProp , defaultCurrentTabStopId: defaultCurrentTabStopId , onCurrentTabStopIdChange: onCurrentTabStopIdChange , onEntryFocus: onEntryFocus , ...groupProps } = props;
     const ref = React.useRef(null);
     const composedRefs = index$1.$6ed0406888f73fc4$export$c7b2cbe3552a0d05(forwardedRef, ref);
-    const direction = $f631663db3294ace$export$b39126d51d94e6f3(dir);
+    const direction = index$2.$f631663db3294ace$export$b39126d51d94e6f3(dir);
     const [currentTabStopId = null, setCurrentTabStopId] = index$1.$71cd76cc60e0454e$export$6f32135080cb4c3({
         prop: currentTabStopIdProp,
         defaultProp: defaultCurrentTabStopId,
@@ -86,7 +71,7 @@ const $d7bdfb9eb0fdf311$export$8699f7c8af148338 = /*#__PURE__*/ React.forwardRef
         onFocusableItemRemove: React.useCallback(()=>setFocusableItemsCount((prevCount)=>prevCount - 1
             )
         , [])
-    }, /*#__PURE__*/ React.createElement(index$1.$8927f6f2acc4f386$export$250ffa63cdc0d034.div, _extends._extends({
+    }, /*#__PURE__*/ React.createElement(index$1.$8927f6f2acc4f386$export$250ffa63cdc0d034.div, index$1._extends({
         tabIndex: isTabbingBackOut || focusableItemsCount === 0 ? -1 : 0,
         "data-orientation": orientation
     }, groupProps, {
@@ -157,7 +142,7 @@ const $d7bdfb9eb0fdf311$export$ab9df7c53fe8454 = /*#__PURE__*/ React.forwardRef(
         id: id,
         focusable: focusable,
         active: active
-    }, /*#__PURE__*/ React.createElement(index$1.$8927f6f2acc4f386$export$250ffa63cdc0d034.span, _extends._extends({
+    }, /*#__PURE__*/ React.createElement(index$1.$8927f6f2acc4f386$export$250ffa63cdc0d034.span, index$1._extends({
         tabIndex: isCurrentTabStop ? 0 : -1,
         "data-orientation": context.orientation
     }, itemProps, {
@@ -254,7 +239,7 @@ const $69cb30bb0017df05$var$useRovingFocusGroupScope = $d7bdfb9eb0fdf311$export$
 const [$69cb30bb0017df05$var$TabsProvider, $69cb30bb0017df05$var$useTabsContext] = $69cb30bb0017df05$var$createTabsContext($69cb30bb0017df05$var$TABS_NAME);
 const $69cb30bb0017df05$export$b2539bed5023c21c = /*#__PURE__*/ React.forwardRef((props, forwardedRef)=>{
     const { __scopeTabs: __scopeTabs , value: valueProp , onValueChange: onValueChange , defaultValue: defaultValue , orientation: orientation = 'horizontal' , dir: dir , activationMode: activationMode = 'automatic' , ...tabsProps } = props;
-    const direction = $f631663db3294ace$export$b39126d51d94e6f3(dir);
+    const direction = index$2.$f631663db3294ace$export$b39126d51d94e6f3(dir);
     const [value, setValue] = index$1.$71cd76cc60e0454e$export$6f32135080cb4c3({
         prop: valueProp,
         onChange: onValueChange,
@@ -268,7 +253,7 @@ const $69cb30bb0017df05$export$b2539bed5023c21c = /*#__PURE__*/ React.forwardRef
         orientation: orientation,
         dir: direction,
         activationMode: activationMode
-    }, /*#__PURE__*/ React.createElement(index$1.$8927f6f2acc4f386$export$250ffa63cdc0d034.div, _extends._extends({
+    }, /*#__PURE__*/ React.createElement(index$1.$8927f6f2acc4f386$export$250ffa63cdc0d034.div, index$1._extends({
         dir: direction,
         "data-orientation": orientation
     }, tabsProps, {
@@ -282,13 +267,13 @@ const $69cb30bb0017df05$export$9712d22edc0d78c1 = /*#__PURE__*/ React.forwardRef
     const { __scopeTabs: __scopeTabs , loop: loop = true , ...listProps } = props;
     const context = $69cb30bb0017df05$var$useTabsContext($69cb30bb0017df05$var$TAB_LIST_NAME, __scopeTabs);
     const rovingFocusGroupScope = $69cb30bb0017df05$var$useRovingFocusGroupScope(__scopeTabs);
-    return /*#__PURE__*/ React.createElement($d7bdfb9eb0fdf311$export$be92b6f5f03c0fe9, _extends._extends({
+    return /*#__PURE__*/ React.createElement($d7bdfb9eb0fdf311$export$be92b6f5f03c0fe9, index$1._extends({
         asChild: true
     }, rovingFocusGroupScope, {
         orientation: context.orientation,
         dir: context.dir,
         loop: loop
-    }), /*#__PURE__*/ React.createElement(index$1.$8927f6f2acc4f386$export$250ffa63cdc0d034.div, _extends._extends({
+    }), /*#__PURE__*/ React.createElement(index$1.$8927f6f2acc4f386$export$250ffa63cdc0d034.div, index$1._extends({
         role: "tablist",
         "aria-orientation": context.orientation
     }, listProps, {
@@ -305,12 +290,12 @@ const $69cb30bb0017df05$export$8114b9fdfdf9f3ba = /*#__PURE__*/ React.forwardRef
     const triggerId = $69cb30bb0017df05$var$makeTriggerId(context.baseId, value);
     const contentId = $69cb30bb0017df05$var$makeContentId(context.baseId, value);
     const isSelected = value === context.value;
-    return /*#__PURE__*/ React.createElement($d7bdfb9eb0fdf311$export$6d08773d2e66f8f2, _extends._extends({
+    return /*#__PURE__*/ React.createElement($d7bdfb9eb0fdf311$export$6d08773d2e66f8f2, index$1._extends({
         asChild: true
     }, rovingFocusGroupScope, {
         focusable: !disabled,
         active: isSelected
-    }), /*#__PURE__*/ React.createElement(index$1.$8927f6f2acc4f386$export$250ffa63cdc0d034.button, _extends._extends({
+    }), /*#__PURE__*/ React.createElement(index$1.$8927f6f2acc4f386$export$250ffa63cdc0d034.button, index$1._extends({
         type: "button",
         role: "tab",
         "aria-selected": isSelected,
@@ -358,9 +343,9 @@ const $69cb30bb0017df05$export$bd905d70e8fd2ebb = /*#__PURE__*/ React.forwardRef
         return ()=>cancelAnimationFrame(rAF)
         ;
     }, []);
-    return /*#__PURE__*/ React.createElement(index$1.$921a889cee6df7e8$export$99c2b779aa4e8b8b, {
+    return /*#__PURE__*/ React.createElement(index$3.$921a889cee6df7e8$export$99c2b779aa4e8b8b, {
         present: forceMount || isSelected
-    }, ({ present: present  })=>/*#__PURE__*/ React.createElement(index$1.$8927f6f2acc4f386$export$250ffa63cdc0d034.div, _extends._extends({
+    }, ({ present: present  })=>/*#__PURE__*/ React.createElement(index$1.$8927f6f2acc4f386$export$250ffa63cdc0d034.div, index$1._extends({
             "data-state": isSelected ? 'active' : 'inactive',
             "data-orientation": context.orientation,
             role: "tabpanel",
@@ -388,81 +373,7 @@ const $69cb30bb0017df05$export$54c2e3dc7acea9f5 = $69cb30bb0017df05$export$9712d
 const $69cb30bb0017df05$export$41fb9f06171c75f4 = $69cb30bb0017df05$export$8114b9fdfdf9f3ba;
 const $69cb30bb0017df05$export$7c6e2c02157bb7d2 = $69cb30bb0017df05$export$bd905d70e8fd2ebb;
 
-var Tab = function (_a) {
-    var label = _a.label, value = _a.value, icon = _a.icon, iconActive = _a.iconActive, props = filterDataAttrs.__rest(_a, ["label", "value", "icon", "iconActive"]);
-    var surface = React.useContext(Surface.Context).surface;
-    return (React__default["default"].createElement($69cb30bb0017df05$export$41fb9f06171c75f4, filterDataAttrs.__assign({ className: index$3.classNames("arc-Tab-trigger", {
-            "arc-Tab-trigger--onDarkSurface": surface === "dark",
-            "arc-Tab-trigger--hasIcon": icon || iconActive
-        }), value: value }, filterDataAttrs.filterDataAttrs(props)),
-        icon && (React__default["default"].createElement("div", { className: "arc-Tab-triggerIcon", "data-testid": "arc-Tab-TriggerIcon" },
-            React__default["default"].createElement(Icon.Icon, { icon: icon }))),
-        iconActive && (React__default["default"].createElement("div", { className: "arc-Tab-triggerIcon arc-Tab-triggerIcon--active", "data-testid": "arc-Tab-TriggerIconActive" },
-            React__default["default"].createElement(Icon.Icon, { icon: iconActive }))),
-        React__default["default"].createElement("span", { className: "arc-Tab-triggerText" }, label)));
-};
-
-var TabContent = function (_a) {
-    var children = _a.children, value = _a.value;
-    return (React__default["default"].createElement($69cb30bb0017df05$export$7c6e2c02157bb7d2, { className: "arc-Tab-content", value: value }, children));
-};
-
-var TabsList = function (_a) {
-    var children = _a.children, type = _a.type, isJustified = _a.isJustified, ariaLabel = _a.ariaLabel, props = filterDataAttrs.__rest(_a, ["children", "type", "isJustified", "ariaLabel"]);
-    var surface = React.useContext(Surface.Context).surface;
-    var tabsRef = React.useRef(null);
-    var _b = React.useState(false), rightOverflow = _b[0], setRightOverflow = _b[1];
-    var _c = React.useState(false), leftOverflow = _c[0], setLeftOverflow = _c[1];
-    var checkOverflow = function (element) {
-        if (element) {
-            if (element.scrollWidth > element.clientWidth) {
-                setRightOverflow(true);
-            }
-            if (element.scrollLeft + 10 >=
-                element.scrollWidth - element.clientWidth) {
-                setRightOverflow(false);
-            }
-            if (element.scrollLeft >= 1) {
-                setLeftOverflow(true);
-            }
-            else {
-                setLeftOverflow(false);
-            }
-        }
-    };
-    React.useEffect(function () {
-        checkOverflow(tabsRef.current);
-    }, []);
-    var scrollTabs = function (scrollAmount) {
-        if (tabsRef.current) {
-            tabsRef.current.scrollLeft += scrollAmount;
-        }
-    };
-    var onScroll = function (event) {
-        checkOverflow(event.currentTarget);
-    };
-    return (React__default["default"].createElement(React__default["default"].Fragment, null,
-        React__default["default"].createElement($69cb30bb0017df05$export$54c2e3dc7acea9f5, filterDataAttrs.__assign({ onScroll: onScroll, className: index$3.classNames("arc-Tabs", {
-                "arc-Tabs--contained": type === "contained",
-                "arc-Tabs--isJustified": isJustified,
-                "arc-Tabs--onDarkSurface": surface === "dark"
-            }), ref: tabsRef, "aria-label": ariaLabel }, filterDataAttrs.filterDataAttrs(props)), children),
-        leftOverflow && (React__default["default"].createElement("button", { className: index$3.classNames("arc-Tabs-overflowIcon arc-Tabs-overflowIcon--left", {
-                "arc-Tabs-overflowIcon--onDarkSurface": surface === "dark"
-            }), onClick: function () { return scrollTabs(-300); }, "aria-label": "Scroll Tabs Left", "data-testid": "arc-Tabs-overflowIconLeft" },
-            React__default["default"].createElement(ThemeIcon.ThemeIcon, { icon: "tabsPrevious", size: 40, color: "brand" }))),
-        rightOverflow && (React__default["default"].createElement("button", { className: index$3.classNames("arc-Tabs-overflowIcon", {
-                "arc-Tabs-overflowIcon--onDarkSurface": surface === "dark"
-            }), onClick: function () { return scrollTabs(300); }, "aria-label": "Scroll Tabs Right", "data-testid": "arc-Tabs-overflowIconRight" },
-            React__default["default"].createElement(ThemeIcon.ThemeIcon, { icon: "tabsNext", size: 40, color: "brand" })))));
-};
-
-var Tabs = function (_a) {
-    var children = _a.children, defaultValue = _a.defaultValue, onValueChange = _a.onValueChange, activationMode = _a.activationMode, props = filterDataAttrs.__rest(_a, ["children", "defaultValue", "onValueChange", "activationMode"]);
-    return (React__default["default"].createElement($69cb30bb0017df05$export$be92b6f5f03c0fe9, filterDataAttrs.__assign({ className: "arc-Tabs-root", defaultValue: defaultValue, onValueChange: onValueChange, activationMode: activationMode }, filterDataAttrs.filterDataAttrs(props)), children));
-};
-Tabs.Tab = Tab;
-Tabs.List = TabsList;
-Tabs.Content = TabContent;
-
-exports.Tabs = Tabs;
+exports.$69cb30bb0017df05$export$41fb9f06171c75f4 = $69cb30bb0017df05$export$41fb9f06171c75f4;
+exports.$69cb30bb0017df05$export$54c2e3dc7acea9f5 = $69cb30bb0017df05$export$54c2e3dc7acea9f5;
+exports.$69cb30bb0017df05$export$7c6e2c02157bb7d2 = $69cb30bb0017df05$export$7c6e2c02157bb7d2;
+exports.$69cb30bb0017df05$export$be92b6f5f03c0fe9 = $69cb30bb0017df05$export$be92b6f5f03c0fe9;