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

package/dist/_shared/esm/{index-f97466e9.js → index-14c7f4da.js}

@@ -1,5 +1,5 @@
 import React__default from 'react';
-import { $ as $c512c27ab02ef895$export$50c7b4e9d9f19c1, b as $6ed0406888f73fc4$export$c7b2cbe3552a0d05, c as $5e63c961fc1ce211$export$8c6ed5c666ac1360 } from './index-cace3545.js';
+import { $ as $c512c27ab02ef895$export$50c7b4e9d9f19c1, c as $6ed0406888f73fc4$export$c7b2cbe3552a0d05, g as $5e63c961fc1ce211$export$8c6ed5c666ac1360 } from './index-57d4cb34.js';
 
 // We have resorted to returning slots directly rather than exposing primitives that can then
 // be slotted like `<CollectionItem as={Slot}>…</CollectionItem>`.

package/dist/_shared/esm/{index-cace3545.js → index-57d4cb34.js}

@@ -1,4 +1,4 @@
-import { useCallback, createContext, useMemo, createElement, useContext, forwardRef, Children, isValidElement, cloneElement, Fragment, useEffect, useRef, useLayoutEffect, useState } from 'react';
+import { createContext, useMemo, createElement, useContext, useCallback, forwardRef, Children, isValidElement, cloneElement, Fragment, useLayoutEffect, useEffect, useRef, useState } from 'react';
 import { flushSync } from 'react-dom';
 
 function _extends() {
@@ -23,29 +23,6 @@ function $e42e1063c40fb3ef$export$b9ecd428b558ff10(originalEventHandler, ourEven
     };
 }
 
-/**
- * Set a given ref to a given value
- * This utility takes care of different types of refs: callback refs and RefObject(s)
- */ function $6ed0406888f73fc4$var$setRef(ref, value) {
-    if (typeof ref === 'function') ref(value);
-    else if (ref !== null && ref !== undefined) ref.current = value;
-}
-/**
- * A utility to compose multiple refs together
- * Accepts callback refs and RefObject(s)
- */ function $6ed0406888f73fc4$export$43e446d32b3d21af(...refs) {
-    return (node)=>refs.forEach((ref)=>$6ed0406888f73fc4$var$setRef(ref, node)
-        )
-    ;
-}
-/**
- * A custom hook that composes multiple refs
- * Accepts callback refs and RefObject(s)
- */ function $6ed0406888f73fc4$export$c7b2cbe3552a0d05(...refs) {
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    return useCallback($6ed0406888f73fc4$export$43e446d32b3d21af(...refs), refs);
-}
-
 /* -------------------------------------------------------------------------------------------------
  * createContextScope
  * -----------------------------------------------------------------------------------------------*/ function $c512c27ab02ef895$export$50c7b4e9d9f19c1(scopeName, createContextScopeDeps = []) {
@@ -143,6 +120,29 @@ function $e42e1063c40fb3ef$export$b9ecd428b558ff10(originalEventHandler, ourEven
     return createScope1;
 }
 
+/**
+ * Set a given ref to a given value
+ * This utility takes care of different types of refs: callback refs and RefObject(s)
+ */ function $6ed0406888f73fc4$var$setRef(ref, value) {
+    if (typeof ref === 'function') ref(value);
+    else if (ref !== null && ref !== undefined) ref.current = value;
+}
+/**
+ * A utility to compose multiple refs together
+ * Accepts callback refs and RefObject(s)
+ */ function $6ed0406888f73fc4$export$43e446d32b3d21af(...refs) {
+    return (node)=>refs.forEach((ref)=>$6ed0406888f73fc4$var$setRef(ref, node)
+        )
+    ;
+}
+/**
+ * A custom hook that composes multiple refs
+ * Accepts callback refs and RefObject(s)
+ */ function $6ed0406888f73fc4$export$c7b2cbe3552a0d05(...refs) {
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    return useCallback($6ed0406888f73fc4$export$43e446d32b3d21af(...refs), refs);
+}
+
 /* -------------------------------------------------------------------------------------------------
  * Slot
  * -----------------------------------------------------------------------------------------------*/ const $5e63c961fc1ce211$export$8c6ed5c666ac1360 = /*#__PURE__*/ forwardRef((props, forwardedRef)=>{
@@ -219,6 +219,14 @@ function $5e63c961fc1ce211$var$mergeProps(slotProps, childProps) {
     };
 }
 
+/**
+ * On the server, React emits a warning when calling `useLayoutEffect`.
+ * This is because neither `useLayoutEffect` nor `useEffect` run on the server.
+ * We use this safe version which suppresses the warning by replacing it with a noop on the server.
+ *
+ * See: https://reactjs.org/docs/hooks-reference.html#uselayouteffect
+ */ const $9f79659886946c16$export$e5c5a5f917a5871c = Boolean(globalThis === null || globalThis === void 0 ? void 0 : globalThis.document) ? useLayoutEffect : ()=>{};
+
 const $8927f6f2acc4f386$var$NODES = [
     'a',
     'button',
@@ -315,14 +323,6 @@ const $8927f6f2acc4f386$var$NODES = [
     , []);
 }
 
-/**
- * On the server, React emits a warning when calling `useLayoutEffect`.
- * This is because neither `useLayoutEffect` nor `useEffect` run on the server.
- * We use this safe version which suppresses the warning by replacing it with a noop on the server.
- *
- * See: https://reactjs.org/docs/hooks-reference.html#uselayouteffect
- */ const $9f79659886946c16$export$e5c5a5f917a5871c = Boolean(globalThis === null || globalThis === void 0 ? void 0 : globalThis.document) ? useLayoutEffect : ()=>{};
-
 function $71cd76cc60e0454e$export$6f32135080cb4c3({ prop: prop , defaultProp: defaultProp , onChange: onChange = ()=>{}  }) {
     const [uncontrolledProp, setUncontrolledProp] = $71cd76cc60e0454e$var$useUncontrolledState({
         defaultProp: defaultProp,
@@ -366,4 +366,4 @@ function $71cd76cc60e0454e$var$useUncontrolledState({ defaultProp: defaultProp ,
     return uncontrolledState;
 }
 
-export { $c512c27ab02ef895$export$50c7b4e9d9f19c1 as $, _extends as _, $71cd76cc60e0454e$export$6f32135080cb4c3 as a, $6ed0406888f73fc4$export$c7b2cbe3552a0d05 as b, $5e63c961fc1ce211$export$8c6ed5c666ac1360 as c, $e42e1063c40fb3ef$export$b9ecd428b558ff10 as d, $8927f6f2acc4f386$export$250ffa63cdc0d034 as e, $b1b2314f5f9a1d84$export$25bec8c6f54ee79a as f, $8927f6f2acc4f386$export$6d1a0317bde7de7f as g, $9f79659886946c16$export$e5c5a5f917a5871c as h };
+export { $c512c27ab02ef895$export$50c7b4e9d9f19c1 as $, _extends as _, $8927f6f2acc4f386$export$250ffa63cdc0d034 as a, $e42e1063c40fb3ef$export$b9ecd428b558ff10 as b, $6ed0406888f73fc4$export$c7b2cbe3552a0d05 as c, $71cd76cc60e0454e$export$6f32135080cb4c3 as d, $b1b2314f5f9a1d84$export$25bec8c6f54ee79a as e, $9f79659886946c16$export$e5c5a5f917a5871c as f, $5e63c961fc1ce211$export$8c6ed5c666ac1360 as g, $8927f6f2acc4f386$export$6d1a0317bde7de7f as h };

package/dist/_shared/esm/{Tabs-21ac7dfe.js → index-89a7c31c.js}

@@ -1,14 +1,8 @@
-import { _ as __rest, a as __assign, f as filterDataAttrs } from './index-288c66b5.js';
-import React__default, { forwardRef, createElement, useRef, useState, useEffect, useCallback, useContext } from 'react';
-import { $ as $c512c27ab02ef895$export$50c7b4e9d9f19c1, _ as _extends, b as $6ed0406888f73fc4$export$c7b2cbe3552a0d05, a as $71cd76cc60e0454e$export$6f32135080cb4c3, f as $b1b2314f5f9a1d84$export$25bec8c6f54ee79a, e as $8927f6f2acc4f386$export$250ffa63cdc0d034, d as $e42e1063c40fb3ef$export$b9ecd428b558ff10 } from './index-cace3545.js';
-import { $ as $e02a7d9cb1dc128c$export$c74125a8e3af6bb2 } from './index-f97466e9.js';
-import { $ as $1746a345f3d73bb7$export$f680877a34711e37 } from './index-7740883c.js';
-import { $ as $f631663db3294ace$export$b39126d51d94e6f3 } from './index-a624de47.js';
-import { $ as $921a889cee6df7e8$export$99c2b779aa4e8b8b } from './index-fa93ec97.js';
-import { I as Icon } from './Icon-512f834f.js';
-import { C as Context } from './Surface-71d21a9e.js';
-import { c as classNames } from './index-2e73c2e9.js';
-import { T as ThemeIcon } from './ThemeIcon-c2dc41a6.js';
+import { $ as $c512c27ab02ef895$export$50c7b4e9d9f19c1, a as $8927f6f2acc4f386$export$250ffa63cdc0d034, _ as _extends, b as $e42e1063c40fb3ef$export$b9ecd428b558ff10, c as $6ed0406888f73fc4$export$c7b2cbe3552a0d05, d as $71cd76cc60e0454e$export$6f32135080cb4c3, e as $b1b2314f5f9a1d84$export$25bec8c6f54ee79a } from './index-57d4cb34.js';
+import { forwardRef, useEffect, createElement, useRef, useState, useCallback } from 'react';
+import { $ as $e02a7d9cb1dc128c$export$c74125a8e3af6bb2 } from './index-14c7f4da.js';
+import { $ as $1746a345f3d73bb7$export$f680877a34711e37, a as $f631663db3294ace$export$b39126d51d94e6f3 } from './index-b9923ee4.js';
+import { $ as $921a889cee6df7e8$export$99c2b779aa4e8b8b } from './index-f2ddcbe2.js';
 
 const $d7bdfb9eb0fdf311$var$ENTRY_FOCUS = 'rovingFocusGroup.onEntryFocus';
 const $d7bdfb9eb0fdf311$var$EVENT_OPTIONS = {
@@ -377,82 +371,4 @@ 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 = __rest(_a, ["label", "value", "icon", "iconActive"]);
-    var surface = useContext(Context).surface;
-    return (React__default.createElement($69cb30bb0017df05$export$41fb9f06171c75f4, __assign({ className: classNames("arc-Tab-trigger", {
-            "arc-Tab-trigger--onDarkSurface": surface === "dark",
-            "arc-Tab-trigger--hasIcon": icon || iconActive
-        }), value: value }, filterDataAttrs(props)),
-        icon && (React__default.createElement("div", { className: "arc-Tab-triggerIcon", "data-testid": "arc-Tab-TriggerIcon" },
-            React__default.createElement(Icon, { icon: icon }))),
-        iconActive && (React__default.createElement("div", { className: "arc-Tab-triggerIcon arc-Tab-triggerIcon--active", "data-testid": "arc-Tab-TriggerIconActive" },
-            React__default.createElement(Icon, { icon: iconActive }))),
-        React__default.createElement("span", { className: "arc-Tab-triggerText" }, label)));
-};
-
-var TabContent = function (_a) {
-    var children = _a.children, value = _a.value;
-    return (React__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 = __rest(_a, ["children", "type", "isJustified", "ariaLabel"]);
-    var surface = useContext(Context).surface;
-    var tabsRef = useRef(null);
-    var _b = useState(false), rightOverflow = _b[0], setRightOverflow = _b[1];
-    var _c = 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);
-            }
-        }
-    };
-    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.createElement(React__default.Fragment, null,
-        React__default.createElement($69cb30bb0017df05$export$54c2e3dc7acea9f5, __assign({ onScroll: onScroll, className: classNames("arc-Tabs", {
-                "arc-Tabs--contained": type === "contained",
-                "arc-Tabs--isJustified": isJustified,
-                "arc-Tabs--onDarkSurface": surface === "dark"
-            }), ref: tabsRef, "aria-label": ariaLabel }, filterDataAttrs(props)), children),
-        leftOverflow && (React__default.createElement("button", { className: 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.createElement(ThemeIcon, { icon: "tabsPrevious", size: 40, color: "brand" }))),
-        rightOverflow && (React__default.createElement("button", { className: 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.createElement(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 = __rest(_a, ["children", "defaultValue", "onValueChange", "activationMode"]);
-    return (React__default.createElement($69cb30bb0017df05$export$be92b6f5f03c0fe9, __assign({ className: "arc-Tabs-root", defaultValue: defaultValue, onValueChange: onValueChange, activationMode: activationMode }, filterDataAttrs(props)), children));
-};
-Tabs.Tab = Tab;
-Tabs.List = TabsList;
-Tabs.Content = TabContent;
-
-export { Tabs as T };
+export { $69cb30bb0017df05$export$41fb9f06171c75f4 as $, $69cb30bb0017df05$export$7c6e2c02157bb7d2 as a, $69cb30bb0017df05$export$54c2e3dc7acea9f5 as b, $69cb30bb0017df05$export$be92b6f5f03c0fe9 as c };

package/dist/_shared/esm/{index-4e58de24.js → index-ac50b180.js}

@@ -1,5 +1,5 @@
-import { useState } from 'react';
-import { h as $9f79659886946c16$export$e5c5a5f917a5871c } from './index-cace3545.js';
+import { useState, useRef, useMemo } from 'react';
+import { f as $9f79659886946c16$export$e5c5a5f917a5871c } from './index-57d4cb34.js';
 
 function $db6c3485150b8e66$export$1ab7ae714698c4b8(element) {
     const [size, setSize] = useState(undefined);
@@ -48,4 +48,22 @@ function $db6c3485150b8e66$export$1ab7ae714698c4b8(element) {
     return size;
 }
 
-export { $db6c3485150b8e66$export$1ab7ae714698c4b8 as $ };
+function $010c2913dbd2fe3d$export$5cae361ad82dce8b(value) {
+    const ref = useRef({
+        value: value,
+        previous: value
+    }); // We compare values before making an update to ensure that
+    // a change has been made. This ensures the previous value is
+    // persisted correctly between renders.
+    return useMemo(()=>{
+        if (ref.current.value !== value) {
+            ref.current.previous = ref.current.value;
+            ref.current.value = value;
+        }
+        return ref.current.previous;
+    }, [
+        value
+    ]);
+}
+
+export { $db6c3485150b8e66$export$1ab7ae714698c4b8 as $, $010c2913dbd2fe3d$export$5cae361ad82dce8b as a };