@arc-ui/components 11.25.0 → 12.0.0-beta.10

package/dist/_shared/esm/{index-efa9be1a.js → index-13458236.js}

@@ -1,5 +1,6 @@
 import * as React from 'react';
-import { h as $9f79659886946c16$export$e5c5a5f917a5871c } from './index-7b531fa7.js';
+import { useContext, createContext } from 'react';
+import { g as $9f79659886946c16$export$e5c5a5f917a5871c } from './index-7f23bb37.js';
 
 const $1746a345f3d73bb7$var$useReactId = React['useId'.toString()] || (()=>undefined
 );
@@ -15,4 +16,10 @@ function $1746a345f3d73bb7$export$f680877a34711e37(deterministicId) {
     return deterministicId || (id ? `radix-${id}` : '');
 }
 
-export { $1746a345f3d73bb7$export$f680877a34711e37 as $ };
+const $f631663db3294ace$var$DirectionContext = /*#__PURE__*/ createContext(undefined);
+/* -----------------------------------------------------------------------------------------------*/ function $f631663db3294ace$export$b39126d51d94e6f3(localDir) {
+    const globalDir = useContext($f631663db3294ace$var$DirectionContext);
+    return localDir || globalDir || 'ltr';
+}
+
+export { $1746a345f3d73bb7$export$f680877a34711e37 as $, $f631663db3294ace$export$b39126d51d94e6f3 as a };

package/dist/_shared/esm/{index-044da8d0.js → index-2403936c.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-7b531fa7.js';
+import { $ as $c512c27ab02ef895$export$50c7b4e9d9f19c1, c as $6ed0406888f73fc4$export$c7b2cbe3552a0d05, h as $5e63c961fc1ce211$export$8c6ed5c666ac1360 } from './index-7f23bb37.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-6bdce6c5.js

@@ -0,0 +1,69 @@
+import { useState, useRef, useMemo } from 'react';
+import { g as $9f79659886946c16$export$e5c5a5f917a5871c } from './index-7f23bb37.js';
+
+function $db6c3485150b8e66$export$1ab7ae714698c4b8(element) {
+    const [size, setSize] = useState(undefined);
+    $9f79659886946c16$export$e5c5a5f917a5871c(()=>{
+        if (element) {
+            // provide size as early as possible
+            setSize({
+                width: element.offsetWidth,
+                height: element.offsetHeight
+            });
+            const resizeObserver = new ResizeObserver((entries)=>{
+                if (!Array.isArray(entries)) return;
+                 // Since we only observe the one element, we don't need to loop over the
+                // array
+                if (!entries.length) return;
+                const entry = entries[0];
+                let width;
+                let height;
+                if ('borderBoxSize' in entry) {
+                    const borderSizeEntry = entry['borderBoxSize']; // iron out differences between browsers
+                    const borderSize = Array.isArray(borderSizeEntry) ? borderSizeEntry[0] : borderSizeEntry;
+                    width = borderSize['inlineSize'];
+                    height = borderSize['blockSize'];
+                } else {
+                    // for browsers that don't support `borderBoxSize`
+                    // we calculate it ourselves to get the correct border box.
+                    width = element.offsetWidth;
+                    height = element.offsetHeight;
+                }
+                setSize({
+                    width: width,
+                    height: height
+                });
+            });
+            resizeObserver.observe(element, {
+                box: 'border-box'
+            });
+            return ()=>resizeObserver.unobserve(element)
+            ;
+        } else // We only want to reset to `undefined` when the element becomes `null`,
+        // not if it changes to another element.
+        setSize(undefined);
+    }, [
+        element
+    ]);
+    return size;
+}
+
+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 };

package/dist/_shared/esm/{index-ca72c9d5.js → index-7868cc59.js}

@@ -1,6 +1,6 @@
 import { Children, cloneElement, useState, useRef, useEffect, useCallback, useReducer } from 'react';
 import { flushSync } from 'react-dom';
-import { b as $6ed0406888f73fc4$export$c7b2cbe3552a0d05, h as $9f79659886946c16$export$e5c5a5f917a5871c } from './index-7b531fa7.js';
+import { c as $6ed0406888f73fc4$export$c7b2cbe3552a0d05, g as $9f79659886946c16$export$e5c5a5f917a5871c } from './index-7f23bb37.js';
 
 function $fe963b355347cc68$export$3e6543de14f8614f(initialState, machine) {
     return useReducer((state, event)=>{

package/dist/_shared/esm/{index-7b531fa7.js → index-7f23bb37.js}

@@ -1,7 +1,21 @@
-import { useCallback, createContext, useMemo, createElement, useContext, forwardRef, Children, isValidElement, cloneElement, Fragment, useEffect, useRef, useLayoutEffect, useState } from 'react';
-import { _ as _extends } from './extends-8cc61aad.js';
+import { createContext, useMemo, createElement, useContext, useCallback, forwardRef, Children, isValidElement, cloneElement, Fragment, useLayoutEffect, useEffect, useRef, useState } from 'react';
 import { flushSync } from 'react-dom';
 
+function _extends() {
+  _extends = Object.assign ? Object.assign.bind() : function (target) {
+    for (var i = 1; i < arguments.length; i++) {
+      var source = arguments[i];
+      for (var key in source) {
+        if (Object.prototype.hasOwnProperty.call(source, key)) {
+          target[key] = source[key];
+        }
+      }
+    }
+    return target;
+  };
+  return _extends.apply(this, arguments);
+}
+
 function $e42e1063c40fb3ef$export$b9ecd428b558ff10(originalEventHandler, ourEventHandler, { checkForDefaultPrevented: checkForDefaultPrevented = true  } = {}) {
     return function handleEvent(event) {
         originalEventHandler === null || originalEventHandler === void 0 || originalEventHandler(event);
@@ -9,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 = []) {
@@ -129,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)=>{
@@ -205,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',
@@ -301,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,
@@ -352,4 +366,4 @@ function $71cd76cc60e0454e$var$useUncontrolledState({ defaultProp: defaultProp ,
     return uncontrolledState;
 }
 
-export { $c512c27ab02ef895$export$50c7b4e9d9f19c1 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, $8927f6f2acc4f386$export$6d1a0317bde7de7f as f, $9f79659886946c16$export$e5c5a5f917a5871c as g, $5e63c961fc1ce211$export$8c6ed5c666ac1360 as h };

package/dist/_shared/esm/index-a41a5e50.js

@@ -0,0 +1,41 @@
+import { useEffect, forwardRef, createElement } from 'react';
+import { e as $b1b2314f5f9a1d84$export$25bec8c6f54ee79a, a as $8927f6f2acc4f386$export$250ffa63cdc0d034, _ as _extends } from './index-7f23bb37.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 = $b1b2314f5f9a1d84$export$25bec8c6f54ee79a(onEscapeKeyDownProp);
+    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__*/ forwardRef((props, forwardedRef)=>{
+    return /*#__PURE__*/ createElement($8927f6f2acc4f386$export$250ffa63cdc0d034.span, _extends({}, props, {
+        ref: forwardedRef,
+        style: {
+            // See: https://github.com/twbs/bootstrap/blob/master/scss/mixins/_screen-reader.scss
+            position: 'absolute',
+            border: 0,
+            width: 1,
+            height: 1,
+            padding: 0,
+            margin: -1,
+            overflow: 'hidden',
+            clip: 'rect(0, 0, 0, 0)',
+            whiteSpace: 'nowrap',
+            wordWrap: 'normal',
+            ...props.style
+        }
+    }));
+});
+
+export { $addc16e1bbe58fd0$export$3a72a57244d6e765 as $, $ea1ef594cf570d83$export$439d29a4e110a164 as a };

package/dist/_shared/esm/{Tabs-9485cab6.js → index-b051f161.js}

@@ -1,15 +1,8 @@
-import { _ as __rest, a as __assign, f as filterDataAttrs } from './filter-data-attrs-ea8f4ed4.js';
-import React__default, { forwardRef, createElement, useRef, useState, useEffect, useCallback, useContext } from 'react';
-import { _ as _extends } from './extends-8cc61aad.js';
-import { $ as $c512c27ab02ef895$export$50c7b4e9d9f19c1, 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-7b531fa7.js';
-import { $ as $e02a7d9cb1dc128c$export$c74125a8e3af6bb2 } from './index-044da8d0.js';
-import { $ as $1746a345f3d73bb7$export$f680877a34711e37 } from './index-efa9be1a.js';
-import { $ as $f631663db3294ace$export$b39126d51d94e6f3 } from './index-a624de47.js';
-import { $ as $921a889cee6df7e8$export$99c2b779aa4e8b8b } from './index-ca72c9d5.js';
-import { I as Icon } from './Icon-15799695.js';
-import { C as Context } from './Surface-0ca6817d.js';
-import { c as classNames } from './index-2e73c2e9.js';
-import { B as BtIconArrowRightFill } from './BtIconArrowRightFill.esm-99019d1a.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-7f23bb37.js';
+import { forwardRef, useEffect, createElement, useRef, useState, useCallback } from 'react';
+import { $ as $e02a7d9cb1dc128c$export$c74125a8e3af6bb2 } from './index-2403936c.js';
+import { $ as $1746a345f3d73bb7$export$f680877a34711e37, a as $f631663db3294ace$export$b39126d51d94e6f3 } from './index-13458236.js';
+import { $ as $921a889cee6df7e8$export$99c2b779aa4e8b8b } from './index-7868cc59.js';
 
 const $d7bdfb9eb0fdf311$var$ENTRY_FOCUS = 'rovingFocusGroup.onEntryFocus';
 const $d7bdfb9eb0fdf311$var$EVENT_OPTIONS = {
@@ -378,99 +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 }))),
-        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));
-};
-
-const BtIconArrowLeftFill = (props) =>
-  /*#__PURE__*/ React__default.createElement(
-    "svg",
-    Object.assign(
-      {
-        xmlns: "http://www.w3.org/2000/svg",
-        viewBox: "0 0 32 32",
-      },
-      props,
-    ),
-    /*#__PURE__*/ React__default.createElement("defs", null),
-    /*#__PURE__*/ React__default.createElement("path", {
-      d: "M30,16A14,14,0,1,0,16,30,14,14,0,0,0,30,16ZM13.14648,20.35352,8.793,16l4.35351-4.35352a.5.5,0,0,1,.707.707L10.707,15.5H22.5a.5.5,0,0,1,0,1H10.707l3.14649,3.14648a.5.5,0,0,1-.707.707Z",
-      fill: "currentColor",
-    }),
-  );
-
-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(Icon, { icon: BtIconArrowLeftFill, 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(Icon, { icon: BtIconArrowRightFill, 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 };