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

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

@@ -1,20 +1,10 @@
 'use strict';
 
-var index$5 = require('./index-df60851b.js');
+var index$1 = require('./index-76f7dd53.js');
 var React = require('react');
-var index$1 = require('./index-3dd54df1.js');
-var index = require('./index-0c6319ec.js');
-var index$3 = require('./index-7aa7f96a.js');
-var index$2 = require('./index-dcfdd5da.js');
-var index$4 = require('./index-996dec94.js');
-var Icon = require('./Icon-0ec0c1fb.js');
-var Surface = require('./Surface-8599dbe4.js');
-var index$6 = require('./index-9947ac13.js');
-var ThemeIcon = require('./ThemeIcon-ee814862.js');
-
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
-
-var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+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 = {
@@ -130,7 +120,7 @@ const $d7bdfb9eb0fdf311$export$8699f7c8af148338 = /*#__PURE__*/ React.forwardRef
  * -----------------------------------------------------------------------------------------------*/ const $d7bdfb9eb0fdf311$var$ITEM_NAME = 'RovingFocusGroupItem';
 const $d7bdfb9eb0fdf311$export$ab9df7c53fe8454 = /*#__PURE__*/ React.forwardRef((props, forwardedRef)=>{
     const { __scopeRovingFocusGroup: __scopeRovingFocusGroup , focusable: focusable = true , active: active = false , tabStopId: tabStopId , ...itemProps } = props;
-    const autoId = index$3.$1746a345f3d73bb7$export$f680877a34711e37();
+    const autoId = index$2.$1746a345f3d73bb7$export$f680877a34711e37();
     const id = tabStopId || autoId;
     const context = $d7bdfb9eb0fdf311$var$useRovingFocusContext($d7bdfb9eb0fdf311$var$ITEM_NAME, __scopeRovingFocusGroup);
     const isCurrentTabStop = context.currentTabStopId === id;
@@ -257,7 +247,7 @@ const $69cb30bb0017df05$export$b2539bed5023c21c = /*#__PURE__*/ React.forwardRef
     });
     return /*#__PURE__*/ React.createElement($69cb30bb0017df05$var$TabsProvider, {
         scope: __scopeTabs,
-        baseId: index$3.$1746a345f3d73bb7$export$f680877a34711e37(),
+        baseId: index$2.$1746a345f3d73bb7$export$f680877a34711e37(),
         value: value,
         onValueChange: setValue,
         orientation: orientation,
@@ -353,7 +343,7 @@ const $69cb30bb0017df05$export$bd905d70e8fd2ebb = /*#__PURE__*/ React.forwardRef
         return ()=>cancelAnimationFrame(rAF)
         ;
     }, []);
-    return /*#__PURE__*/ React.createElement(index$4.$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, index$1._extends({
             "data-state": isSelected ? 'active' : 'inactive',
@@ -383,82 +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 = index$5.__rest(_a, ["label", "value", "icon", "iconActive"]);
-    var surface = React.useContext(Surface.Context).surface;
-    return (React__default["default"].createElement($69cb30bb0017df05$export$41fb9f06171c75f4, index$5.__assign({ className: index$6.classNames("arc-Tab-trigger", {
-            "arc-Tab-trigger--onDarkSurface": surface === "dark",
-            "arc-Tab-trigger--hasIcon": icon || iconActive
-        }), value: value }, index$5.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 = index$5.__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, index$5.__assign({ onScroll: onScroll, className: index$6.classNames("arc-Tabs", {
-                "arc-Tabs--contained": type === "contained",
-                "arc-Tabs--isJustified": isJustified,
-                "arc-Tabs--onDarkSurface": surface === "dark"
-            }), ref: tabsRef, "aria-label": ariaLabel }, index$5.filterDataAttrs(props)), children),
-        leftOverflow && (React__default["default"].createElement("button", { className: index$6.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$6.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" })))));
-};
-
-/** Use `Tabs` to allow users to navigate between different sections of relevant content. */
-var Tabs = function (_a) {
-    var children = _a.children, defaultValue = _a.defaultValue, onValueChange = _a.onValueChange, activationMode = _a.activationMode, props = index$5.__rest(_a, ["children", "defaultValue", "onValueChange", "activationMode"]);
-    return (React__default["default"].createElement($69cb30bb0017df05$export$be92b6f5f03c0fe9, index$5.__assign({ className: "arc-Tabs-root", defaultValue: defaultValue, onValueChange: onValueChange, activationMode: activationMode }, index$5.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;

package/dist/_shared/cjs/{index-3d629205.js → index-2bf59363.js}

@@ -1,7 +1,24 @@
 'use strict';
 
-var index = require('./index-3dd54df1.js');
 var React = require('react');
+var index = require('./index-76f7dd53.js');
+
+/**
+ * Listens for when the escape key is down
+ */ function $addc16e1bbe58fd0$export$3a72a57244d6e765(onEscapeKeyDownProp, ownerDocument = globalThis === null || globalThis === void 0 ? void 0 : globalThis.document) {
+    const onEscapeKeyDown = index.$b1b2314f5f9a1d84$export$25bec8c6f54ee79a(onEscapeKeyDownProp);
+    React.useEffect(()=>{
+        const handleKeyDown = (event)=>{
+            if (event.key === 'Escape') onEscapeKeyDown(event);
+        };
+        ownerDocument.addEventListener('keydown', handleKeyDown);
+        return ()=>ownerDocument.removeEventListener('keydown', handleKeyDown)
+        ;
+    }, [
+        onEscapeKeyDown,
+        ownerDocument
+    ]);
+}
 
 const $ea1ef594cf570d83$export$439d29a4e110a164 = /*#__PURE__*/ React.forwardRef((props, forwardedRef)=>{
     return /*#__PURE__*/ React.createElement(index.$8927f6f2acc4f386$export$250ffa63cdc0d034.span, index._extends({}, props, {
@@ -23,4 +40,5 @@ const $ea1ef594cf570d83$export$439d29a4e110a164 = /*#__PURE__*/ React.forwardRef
     }));
 });
 
+exports.$addc16e1bbe58fd0$export$3a72a57244d6e765 = $addc16e1bbe58fd0$export$3a72a57244d6e765;
 exports.$ea1ef594cf570d83$export$439d29a4e110a164 = $ea1ef594cf570d83$export$439d29a4e110a164;

package/dist/_shared/cjs/{index-996dec94.js → index-527f962b.js}

@@ -2,7 +2,7 @@
 
 var React = require('react');
 var ReactDOM = require('react-dom');
-var index = require('./index-3dd54df1.js');
+var index = require('./index-76f7dd53.js');
 
 function $fe963b355347cc68$export$3e6543de14f8614f(initialState, machine) {
     return React.useReducer((state, event)=>{