@arc-ui/components 11.24.2 → 11.26.0

package/dist/_shared/cjs/{index-74004a9c.js → index-4edec793.js}

@@ -1,7 +1,7 @@
 'use strict';
 
 var React = require('react');
-var index = require('./index-dd1d18ea.js');
+var index = require('./index-7641213c.js');
 
 /**
  * Listens for when the escape key is down

package/dist/_shared/cjs/{index-dd1d18ea.js → index-7641213c.js}

@@ -2,7 +2,7 @@
 
 var React = require('react');
 var _extends = require('./extends-8c5e4b48.js');
-var $7SXl2$reactdom = require('react-dom');
+var ReactDOM = require('react-dom');
 
 function $e42e1063c40fb3ef$export$b9ecd428b558ff10(originalEventHandler, ourEventHandler, { checkForDefaultPrevented: checkForDefaultPrevented = true  } = {}) {
     return function handleEvent(event) {
@@ -284,7 +284,7 @@ const $8927f6f2acc4f386$var$NODES = [
  * this utility with them. This is because it's possible for those handlers to be called implicitly during render
  * e.g. when focus is within a component as it is unmounted, or when managing focus on mount.
  */ function $8927f6f2acc4f386$export$6d1a0317bde7de7f(target, event) {
-    if (target) $7SXl2$reactdom.flushSync(()=>target.dispatchEvent(event)
+    if (target) ReactDOM.flushSync(()=>target.dispatchEvent(event)
     );
 }
 
@@ -311,6 +311,130 @@ const $8927f6f2acc4f386$var$NODES = [
  * See: https://reactjs.org/docs/hooks-reference.html#uselayouteffect
  */ const $9f79659886946c16$export$e5c5a5f917a5871c = Boolean(globalThis === null || globalThis === void 0 ? void 0 : globalThis.document) ? React.useLayoutEffect : ()=>{};
 
+function $fe963b355347cc68$export$3e6543de14f8614f(initialState, machine) {
+    return React.useReducer((state, event)=>{
+        const nextState = machine[state][event];
+        return nextState !== null && nextState !== void 0 ? nextState : state;
+    }, initialState);
+}
+
+
+const $921a889cee6df7e8$export$99c2b779aa4e8b8b = (props)=>{
+    const { present: present , children: children  } = props;
+    const presence = $921a889cee6df7e8$var$usePresence(present);
+    const child = typeof children === 'function' ? children({
+        present: presence.isPresent
+    }) : React.Children.only(children);
+    const ref = $6ed0406888f73fc4$export$c7b2cbe3552a0d05(presence.ref, child.ref);
+    const forceMount = typeof children === 'function';
+    return forceMount || presence.isPresent ? /*#__PURE__*/ React.cloneElement(child, {
+        ref: ref
+    }) : null;
+};
+$921a889cee6df7e8$export$99c2b779aa4e8b8b.displayName = 'Presence';
+/* -------------------------------------------------------------------------------------------------
+ * usePresence
+ * -----------------------------------------------------------------------------------------------*/ function $921a889cee6df7e8$var$usePresence(present) {
+    const [node1, setNode] = React.useState();
+    const stylesRef = React.useRef({});
+    const prevPresentRef = React.useRef(present);
+    const prevAnimationNameRef = React.useRef('none');
+    const initialState = present ? 'mounted' : 'unmounted';
+    const [state, send] = $fe963b355347cc68$export$3e6543de14f8614f(initialState, {
+        mounted: {
+            UNMOUNT: 'unmounted',
+            ANIMATION_OUT: 'unmountSuspended'
+        },
+        unmountSuspended: {
+            MOUNT: 'mounted',
+            ANIMATION_END: 'unmounted'
+        },
+        unmounted: {
+            MOUNT: 'mounted'
+        }
+    });
+    React.useEffect(()=>{
+        const currentAnimationName = $921a889cee6df7e8$var$getAnimationName(stylesRef.current);
+        prevAnimationNameRef.current = state === 'mounted' ? currentAnimationName : 'none';
+    }, [
+        state
+    ]);
+    $9f79659886946c16$export$e5c5a5f917a5871c(()=>{
+        const styles = stylesRef.current;
+        const wasPresent = prevPresentRef.current;
+        const hasPresentChanged = wasPresent !== present;
+        if (hasPresentChanged) {
+            const prevAnimationName = prevAnimationNameRef.current;
+            const currentAnimationName = $921a889cee6df7e8$var$getAnimationName(styles);
+            if (present) send('MOUNT');
+            else if (currentAnimationName === 'none' || (styles === null || styles === void 0 ? void 0 : styles.display) === 'none') // If there is no exit animation or the element is hidden, animations won't run
+            // so we unmount instantly
+            send('UNMOUNT');
+            else {
+                /**
+         * When `present` changes to `false`, we check changes to animation-name to
+         * determine whether an animation has started. We chose this approach (reading
+         * computed styles) because there is no `animationrun` event and `animationstart`
+         * fires after `animation-delay` has expired which would be too late.
+         */ const isAnimating = prevAnimationName !== currentAnimationName;
+                if (wasPresent && isAnimating) send('ANIMATION_OUT');
+                else send('UNMOUNT');
+            }
+            prevPresentRef.current = present;
+        }
+    }, [
+        present,
+        send
+    ]);
+    $9f79659886946c16$export$e5c5a5f917a5871c(()=>{
+        if (node1) {
+            /**
+       * Triggering an ANIMATION_OUT during an ANIMATION_IN will fire an `animationcancel`
+       * event for ANIMATION_IN after we have entered `unmountSuspended` state. So, we
+       * make sure we only trigger ANIMATION_END for the currently active animation.
+       */ const handleAnimationEnd = (event)=>{
+                const currentAnimationName = $921a889cee6df7e8$var$getAnimationName(stylesRef.current);
+                const isCurrentAnimation = currentAnimationName.includes(event.animationName);
+                if (event.target === node1 && isCurrentAnimation) // With React 18 concurrency this update is applied
+                // a frame after the animation ends, creating a flash of visible content.
+                // By manually flushing we ensure they sync within a frame, removing the flash.
+                ReactDOM.flushSync(()=>send('ANIMATION_END')
+                );
+            };
+            const handleAnimationStart = (event)=>{
+                if (event.target === node1) // if animation occurred, store its name as the previous animation.
+                prevAnimationNameRef.current = $921a889cee6df7e8$var$getAnimationName(stylesRef.current);
+            };
+            node1.addEventListener('animationstart', handleAnimationStart);
+            node1.addEventListener('animationcancel', handleAnimationEnd);
+            node1.addEventListener('animationend', handleAnimationEnd);
+            return ()=>{
+                node1.removeEventListener('animationstart', handleAnimationStart);
+                node1.removeEventListener('animationcancel', handleAnimationEnd);
+                node1.removeEventListener('animationend', handleAnimationEnd);
+            };
+        } else // Transition to the unmounted state if the node is removed prematurely.
+        // We avoid doing so during cleanup as the node may change but still exist.
+        send('ANIMATION_END');
+    }, [
+        node1,
+        send
+    ]);
+    return {
+        isPresent: [
+            'mounted',
+            'unmountSuspended'
+        ].includes(state),
+        ref: React.useCallback((node)=>{
+            if (node) stylesRef.current = getComputedStyle(node);
+            setNode(node);
+        }, [])
+    };
+}
+/* -----------------------------------------------------------------------------------------------*/ function $921a889cee6df7e8$var$getAnimationName(styles) {
+    return (styles === null || styles === void 0 ? void 0 : styles.animationName) || 'none';
+}
+
 function $71cd76cc60e0454e$export$6f32135080cb4c3({ prop: prop , defaultProp: defaultProp , onChange: onChange = ()=>{}  }) {
     const [uncontrolledProp, setUncontrolledProp] = $71cd76cc60e0454e$var$useUncontrolledState({
         defaultProp: defaultProp,
@@ -359,6 +483,7 @@ exports.$6ed0406888f73fc4$export$c7b2cbe3552a0d05 = $6ed0406888f73fc4$export$c7b
 exports.$71cd76cc60e0454e$export$6f32135080cb4c3 = $71cd76cc60e0454e$export$6f32135080cb4c3;
 exports.$8927f6f2acc4f386$export$250ffa63cdc0d034 = $8927f6f2acc4f386$export$250ffa63cdc0d034;
 exports.$8927f6f2acc4f386$export$6d1a0317bde7de7f = $8927f6f2acc4f386$export$6d1a0317bde7de7f;
+exports.$921a889cee6df7e8$export$99c2b779aa4e8b8b = $921a889cee6df7e8$export$99c2b779aa4e8b8b;
 exports.$9f79659886946c16$export$e5c5a5f917a5871c = $9f79659886946c16$export$e5c5a5f917a5871c;
 exports.$b1b2314f5f9a1d84$export$25bec8c6f54ee79a = $b1b2314f5f9a1d84$export$25bec8c6f54ee79a;
 exports.$c512c27ab02ef895$export$50c7b4e9d9f19c1 = $c512c27ab02ef895$export$50c7b4e9d9f19c1;

package/dist/_shared/cjs/{index-9f99d686.js → index-af744fa9.js}

@@ -1,7 +1,7 @@
 'use strict';
 
 var React = require('react');
-var index = require('./index-dd1d18ea.js');
+var index = require('./index-7641213c.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 

package/dist/_shared/cjs/{index-6eb396a3.js → index-fb0cad18.js}

@@ -1,7 +1,7 @@
 'use strict';
 
 var React = require('react');
-var index = require('./index-dd1d18ea.js');
+var index = require('./index-7641213c.js');
 
 function _interopNamespace(e) {
     if (e && e.__esModule) return e;

package/dist/_shared/esm/{Button-a7d134c6.js → Button-5b48b7ce.js}

@@ -12,7 +12,7 @@ import { C as Context } from './Surface-0ca6817d.js';
  */
 var Button = forwardRef(function (_a, ref) {
     var _b;
-    var ariaLabel = _a.ariaLabel, _c = _a.fill, fill = _c === void 0 ? "solid" : _c, href = _a.href, icon = _a.icon, _d = _a.iconPosition, iconPosition = _d === void 0 ? "afterText" : _d, id = _a.id, _e = _a.isDisabled, isDisabled = _e === void 0 ? false : _e, _f = _a.isDisplayBlock, isDisplayBlock = _f === void 0 ? false : _f, _g = _a.isFullWidth, isFullWidth = _g === void 0 ? false : _g, label = _a.label, onClick = _a.onClick, rel = _a.rel, _h = _a.size, size = _h === void 0 ? "m" : _h, supportingText = _a.supportingText, target = _a.target, type = _a.type, form = _a.form, props = __rest(_a, ["ariaLabel", "fill", "href", "icon", "iconPosition", "id", "isDisabled", "isDisplayBlock", "isFullWidth", "label", "onClick", "rel", "size", "supportingText", "target", "type", "form"]);
+    var ariaLabel = _a.ariaLabel, ariaControls = _a.ariaControls, ariaExpanded = _a.ariaExpanded, ariaHasPopup = _a.ariaHasPopup, _c = _a.fill, fill = _c === void 0 ? "solid" : _c, href = _a.href, icon = _a.icon, _d = _a.iconPosition, iconPosition = _d === void 0 ? "afterText" : _d, id = _a.id, _e = _a.isDisabled, isDisabled = _e === void 0 ? false : _e, _f = _a.isDisplayBlock, isDisplayBlock = _f === void 0 ? false : _f, _g = _a.isFullWidth, isFullWidth = _g === void 0 ? false : _g, label = _a.label, onClick = _a.onClick, rel = _a.rel, _h = _a.size, size = _h === void 0 ? "m" : _h, supportingText = _a.supportingText, target = _a.target, type = _a.type, form = _a.form, props = __rest(_a, ["ariaLabel", "ariaControls", "ariaExpanded", "ariaHasPopup", "fill", "href", "icon", "iconPosition", "id", "isDisabled", "isDisplayBlock", "isFullWidth", "label", "onClick", "rel", "size", "supportingText", "target", "type", "form"]);
     var surface = useContext(Context).surface;
     var buttonClasses = classNames((_b = {
             "arc-Button": true,
@@ -33,12 +33,12 @@ var Button = forwardRef(function (_a, ref) {
         React__default.createElement("span", { className: "arc-Button-supportingText" }, supportingText))) : (React__default.createElement("span", { className: "arc-Button-text" }, label));
     var buttonIcon = icon || fill === "flat" ? (React__default.createElement(ButtonIcon, { icon: icon, isChevron: !icon && fill === "flat", isBeforeText: iconPosition === "beforeText" })) : null;
     if (href && !isDisabled) {
-        return (React__default.createElement("a", __assign({}, commonProps, { "aria-label": ariaLabel, className: buttonClasses, href: href, rel: rel, target: target }),
+        return (React__default.createElement("a", __assign({}, commonProps, { "aria-label": ariaLabel, "aria-haspopup": ariaHasPopup, "aria-controls": ariaControls, "aria-expanded": ariaExpanded, className: buttonClasses, href: href, rel: rel, target: target }),
             React__default.createElement("span", { className: "arc-Button-inner" },
                 buttonText,
                 buttonIcon)));
     }
-    return (React__default.createElement("button", __assign({}, commonProps, { "aria-label": ariaLabel, className: buttonClasses, disabled: isDisabled, type: type, form: form }),
+    return (React__default.createElement("button", __assign({}, commonProps, { "aria-label": ariaLabel, "aria-haspopup": ariaHasPopup, "aria-controls": ariaControls, "aria-expanded": ariaExpanded, className: buttonClasses, disabled: isDisabled, type: type, form: form }),
         React__default.createElement("span", { className: "arc-Button-inner" },
             buttonText,
             buttonIcon)));

package/dist/_shared/esm/{SiteHeader.rehydrator-2ec02ee7.js → SiteHeader.rehydrator-8f3c5d6e.js}

@@ -7,7 +7,7 @@ import { h as handleLinkClick } from './handle-link-click-f64f55a2.js';
 import { a as BtIconChevronRight2Px, B as BtIconChevronLeft2Px } from './BtIconChevronRight2Px.esm-75e92636.js';
 import { S as Surface } from './Surface-0ca6817d.js';
 import { B as BrandLogo } from './BrandLogo-1af78f76.js';
-import { B as Button } from './Button-a7d134c6.js';
+import { B as Button } from './Button-5b48b7ce.js';
 import { s as suffixModifier } from './suffix-modifier-3d548e45.js';
 import { T as Text } from './Text-14f586ac.js';
 

package/dist/_shared/esm/{SiteHeaderV2-a7c1b1cb.js → SiteHeaderV2-cb081752.js}

@@ -8,7 +8,7 @@ import { h as handleLinkClick } from './handle-link-click-f64f55a2.js';
 import { B as BtIconChevronRightMid } from './BtIconChevronRightMid.esm-32268f1a.js';
 import { C as ConditionalWrapper } from './ConditionalWrapper-59be8f35.js';
 import { B as BtIconChevronLeft2Px, a as BtIconChevronRight2Px } from './BtIconChevronRight2Px.esm-75e92636.js';
-import { B as Button } from './Button-a7d134c6.js';
+import { B as Button } from './Button-5b48b7ce.js';
 import { s as suffixModifier } from './suffix-modifier-3d548e45.js';
 import { T as Text } from './Text-14f586ac.js';
 import { I as Icon } from './Icon-15799695.js';

package/dist/_shared/esm/{Tabs-9485cab6.js → Tabs-959e885d.js}

@@ -1,16 +1,20 @@
 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 React__default, { useContext, createContext, forwardRef, createElement, useRef, useState, useEffect, useCallback } 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 { f as $c512c27ab02ef895$export$50c7b4e9d9f19c1, $ as $6ed0406888f73fc4$export$c7b2cbe3552a0d05, g as $71cd76cc60e0454e$export$6f32135080cb4c3, c as $b1b2314f5f9a1d84$export$25bec8c6f54ee79a, a as $8927f6f2acc4f386$export$250ffa63cdc0d034, b as $e42e1063c40fb3ef$export$b9ecd428b558ff10, h as $921a889cee6df7e8$export$99c2b779aa4e8b8b } from './index-0ae23b06.js';
+import { $ as $e02a7d9cb1dc128c$export$c74125a8e3af6bb2 } from './index-9e54cc7d.js';
+import { $ as $1746a345f3d73bb7$export$f680877a34711e37 } from './index-af7b6e55.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';
 
+const $f631663db3294ace$var$DirectionContext = /*#__PURE__*/ createContext(undefined);
+/* -----------------------------------------------------------------------------------------------*/ function $f631663db3294ace$export$b39126d51d94e6f3(localDir) {
+    const globalDir = useContext($f631663db3294ace$var$DirectionContext);
+    return localDir || globalDir || 'ltr';
+}
+
 const $d7bdfb9eb0fdf311$var$ENTRY_FOCUS = 'rovingFocusGroup.onEntryFocus';
 const $d7bdfb9eb0fdf311$var$EVENT_OPTIONS = {
     bubbles: false,

package/dist/_shared/esm/{Toast-fcbfc194.js → Toast-a590067d.js}

@@ -1,12 +1,10 @@
 import { _ as __rest, a as __assign, f as filterDataAttrs } from './filter-data-attrs-ea8f4ed4.js';
 import React__default, { forwardRef, useContext, useState, useEffect, createElement, useRef, createContext, useCallback, useMemo, Fragment } from 'react';
 import { _ as _extends } from './extends-8cc61aad.js';
-import $7SXl2$reactdom__default, { createPortal } from 'react-dom';
-import { b as $6ed0406888f73fc4$export$c7b2cbe3552a0d05, e as $8927f6f2acc4f386$export$250ffa63cdc0d034, d as $e42e1063c40fb3ef$export$b9ecd428b558ff10, f as $b1b2314f5f9a1d84$export$25bec8c6f54ee79a, g as $8927f6f2acc4f386$export$6d1a0317bde7de7f, $ as $c512c27ab02ef895$export$50c7b4e9d9f19c1, h as $9f79659886946c16$export$e5c5a5f917a5871c, a as $71cd76cc60e0454e$export$6f32135080cb4c3 } from './index-7b531fa7.js';
-import { $ as $e02a7d9cb1dc128c$export$c74125a8e3af6bb2 } from './index-044da8d0.js';
-import { $ as $addc16e1bbe58fd0$export$3a72a57244d6e765 } from './index-2cfab9f2.js';
-import { $ as $921a889cee6df7e8$export$99c2b779aa4e8b8b } from './index-ca72c9d5.js';
-import { $ as $ea1ef594cf570d83$export$439d29a4e110a164 } from './index-25a5b393.js';
+import ReactDOM__default, { createPortal } from 'react-dom';
+import { $ as $6ed0406888f73fc4$export$c7b2cbe3552a0d05, a as $8927f6f2acc4f386$export$250ffa63cdc0d034, b as $e42e1063c40fb3ef$export$b9ecd428b558ff10, c as $b1b2314f5f9a1d84$export$25bec8c6f54ee79a, d as $8927f6f2acc4f386$export$6d1a0317bde7de7f, f as $c512c27ab02ef895$export$50c7b4e9d9f19c1, e as $9f79659886946c16$export$e5c5a5f917a5871c, g as $71cd76cc60e0454e$export$6f32135080cb4c3, h as $921a889cee6df7e8$export$99c2b779aa4e8b8b } from './index-0ae23b06.js';
+import { $ as $e02a7d9cb1dc128c$export$c74125a8e3af6bb2 } from './index-9e54cc7d.js';
+import { $ as $addc16e1bbe58fd0$export$3a72a57244d6e765 } from './index-ebe72f34.js';
 import { c as classNames } from './index-2e73c2e9.js';
 import { B as BtIconCrossAlt2Px } from './BtIconCrossAlt2Px.esm-7165ab1a.js';
 import { B as BtIconNotification, a as BtIconAlertTriangle, b as BtIconTick } from './BtIconTick.esm-e265098f.js';
@@ -265,11 +263,31 @@ const $5cb92bef7577960e$export$aecb2ddcb55c95be = $5cb92bef7577960e$export$4d5eb
 const $f1701beae083dbae$export$602eac185826482c = /*#__PURE__*/ forwardRef((props, forwardedRef)=>{
     var _globalThis$document;
     const { container: container = globalThis === null || globalThis === void 0 ? void 0 : (_globalThis$document = globalThis.document) === null || _globalThis$document === void 0 ? void 0 : _globalThis$document.body , ...portalProps } = props;
-    return container ? /*#__PURE__*/ $7SXl2$reactdom__default.createPortal(/*#__PURE__*/ createElement($8927f6f2acc4f386$export$250ffa63cdc0d034.div, _extends({}, portalProps, {
+    return container ? /*#__PURE__*/ ReactDOM__default.createPortal(/*#__PURE__*/ createElement($8927f6f2acc4f386$export$250ffa63cdc0d034.div, _extends({}, portalProps, {
         ref: forwardedRef
     })), container) : null;
 });
 
+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
+        }
+    }));
+});
+
 /* -------------------------------------------------------------------------------------------------
  * ToastProvider
  * -----------------------------------------------------------------------------------------------*/ const $054eb8030ebde76e$var$PROVIDER_NAME = 'ToastProvider';

package/dist/_shared/esm/{UniversalHeader-80c7313f.js → UniversalHeader-96bfbacc.js}

@@ -1,5 +1,6 @@
 import { _ as __rest, a as __assign, f as filterDataAttrs } from './filter-data-attrs-ea8f4ed4.js';
 import React__default, { useEffect } from 'react';
+import { c as classNames } from './index-2e73c2e9.js';
 import { S as Surface } from './Surface-0ca6817d.js';
 
 /**
@@ -21,9 +22,12 @@ var UniversalHeader = function (_a) {
                 ContentSlot && (React__default.createElement("li", { className: "arc-UniversalHeader-contentSlot" }, ContentSlot))))));
 };
 var UniversalHeaderItem = function (_a) {
-    var children = _a.children, href = _a.href, props = __rest(_a, ["children", "href"]);
+    var children = _a.children, href = _a.href, _b = _a.isActive, isActive = _b === void 0 ? false : _b, props = __rest(_a, ["children", "href", "isActive"]);
     return (React__default.createElement("li", __assign({}, filterDataAttrs(props)),
-        React__default.createElement("a", { className: "arc-UniversalHeader-link", href: href }, children)));
+        React__default.createElement("a", { className: classNames({
+                "arc-UniversalHeader-link": true,
+                "arc-UniversalHeader-link--isActive": isActive
+            }), href: href }, children)));
 };
 UniversalHeader.Item = UniversalHeaderItem;