@arc-ui/components 11.6.0 → 11.8.0

package/dist/Switch/Switch.esm.js

@@ -1,19 +1,205 @@
-import React__default, { useState, forwardRef, useRef, createElement, useEffect, useContext } from 'react';
+import { _ as __rest, a as __assign, f as filterDataAttrs } from '../_shared/esm/filter-data-attrs-afdb7d32.js';
+import React__default, { useCallback, createContext, useMemo, createElement, useContext, useRef, useEffect, useState, forwardRef } from 'react';
 import { c as classNames } from '../_shared/esm/index-2ae58626.js';
-import { g as $9f79659886946c16$export$e5c5a5f917a5871c, $ as $c512c27ab02ef895$export$50c7b4e9d9f19c1, a as $6ed0406888f73fc4$export$c7b2cbe3552a0d05, h as $71cd76cc60e0454e$export$6f32135080cb4c3, d as $8927f6f2acc4f386$export$250ffa63cdc0d034, _ as _extends, e as $e42e1063c40fb3ef$export$b9ecd428b558ff10, i as $010c2913dbd2fe3d$export$5cae361ad82dce8b } from '../_shared/esm/index.module-599b86dd.js';
-import { I as Icon } from '../_shared/esm/Icon-fd247973.js';
+import { _ as _extends } from '../_shared/esm/extends-4575346e.js';
+import { a as $9f79659886946c16$export$e5c5a5f917a5871c, $ as $5e63c961fc1ce211$export$8c6ed5c666ac1360, b as $010c2913dbd2fe3d$export$5cae361ad82dce8b } from '../_shared/esm/index.module-5ed90b21.js';
+import 'react-dom';
+import { I as Icon } from '../_shared/esm/Icon-c1af47bc.js';
 import { B as BtIconTickAlt2Px_2 } from '../_shared/esm/BtIconTickAlt2Px-da97e9ae.js';
-import { C as Context } from '../_shared/esm/Surface-bb100ef8.js';
-import { F as FormControl } from '../_shared/esm/FormControl-5e3fdca3.js';
+import { C as Context } from '../_shared/esm/Surface-dde51789.js';
+import { F as FormControl } from '../_shared/esm/FormControl-f18e2f59.js';
 import { V as VerticalSpace } from '../_shared/esm/VerticalSpace-93980c9c.js';
-import { T as Text } from '../_shared/esm/Text-00e9743b.js';
-import 'react-dom';
-import '../_shared/esm/filter-data-attrs-afdb7d32.js';
+import { T as Text } from '../_shared/esm/Text-40457811.js';
 import '../_shared/esm/suffix-modifier-7e640670.js';
 import '../_shared/esm/BtIconAlert-55a6ed5c.js';
-import '../_shared/esm/DisclosureMini-022beae3.js';
+import '../_shared/esm/DisclosureMini-9b819941.js';
 import '../_shared/esm/BtIconChevronDown2Px-782876e2.js';
 
+function $e42e1063c40fb3ef$export$b9ecd428b558ff10(originalEventHandler, ourEventHandler, { checkForDefaultPrevented: checkForDefaultPrevented = true  } = {}) {
+    return function handleEvent(event) {
+        originalEventHandler === null || originalEventHandler === void 0 || originalEventHandler(event);
+        if (checkForDefaultPrevented === false || !event.defaultPrevented) return ourEventHandler === null || ourEventHandler === void 0 ? void 0 : ourEventHandler(event);
+    };
+}
+
+/**
+ * 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 = []) {
+    let defaultContexts = [];
+    /* -----------------------------------------------------------------------------------------------
+   * createContext
+   * ---------------------------------------------------------------------------------------------*/ function $c512c27ab02ef895$export$fd42f52fd3ae1109(rootComponentName, defaultContext) {
+        const BaseContext = /*#__PURE__*/ createContext(defaultContext);
+        const index = defaultContexts.length;
+        defaultContexts = [
+            ...defaultContexts,
+            defaultContext
+        ];
+        function Provider(props) {
+            const { scope: scope , children: children , ...context } = props;
+            const Context = (scope === null || scope === void 0 ? void 0 : scope[scopeName][index]) || BaseContext; // Only re-memoize when prop values change
+            // eslint-disable-next-line react-hooks/exhaustive-deps
+            const value = useMemo(()=>context
+            , Object.values(context));
+            return /*#__PURE__*/ createElement(Context.Provider, {
+                value: value
+            }, children);
+        }
+        function useContext$1(consumerName, scope) {
+            const Context = (scope === null || scope === void 0 ? void 0 : scope[scopeName][index]) || BaseContext;
+            const context = useContext(Context);
+            if (context) return context;
+            if (defaultContext !== undefined) return defaultContext; // if a defaultContext wasn't specified, it's a required context.
+            throw new Error(`\`${consumerName}\` must be used within \`${rootComponentName}\``);
+        }
+        Provider.displayName = rootComponentName + 'Provider';
+        return [
+            Provider,
+            useContext$1
+        ];
+    }
+    /* -----------------------------------------------------------------------------------------------
+   * createScope
+   * ---------------------------------------------------------------------------------------------*/ const createScope = ()=>{
+        const scopeContexts = defaultContexts.map((defaultContext)=>{
+            return /*#__PURE__*/ createContext(defaultContext);
+        });
+        return function useScope(scope) {
+            const contexts = (scope === null || scope === void 0 ? void 0 : scope[scopeName]) || scopeContexts;
+            return useMemo(()=>({
+                    [`__scope${scopeName}`]: {
+                        ...scope,
+                        [scopeName]: contexts
+                    }
+                })
+            , [
+                scope,
+                contexts
+            ]);
+        };
+    };
+    createScope.scopeName = scopeName;
+    return [
+        $c512c27ab02ef895$export$fd42f52fd3ae1109,
+        $c512c27ab02ef895$var$composeContextScopes(createScope, ...createContextScopeDeps)
+    ];
+}
+/* -------------------------------------------------------------------------------------------------
+ * composeContextScopes
+ * -----------------------------------------------------------------------------------------------*/ function $c512c27ab02ef895$var$composeContextScopes(...scopes) {
+    const baseScope = scopes[0];
+    if (scopes.length === 1) return baseScope;
+    const createScope1 = ()=>{
+        const scopeHooks = scopes.map((createScope)=>({
+                useScope: createScope(),
+                scopeName: createScope.scopeName
+            })
+        );
+        return function useComposedScopes(overrideScopes) {
+            const nextScopes1 = scopeHooks.reduce((nextScopes, { useScope: useScope , scopeName: scopeName  })=>{
+                // We are calling a hook inside a callback which React warns against to avoid inconsistent
+                // renders, however, scoping doesn't have render side effects so we ignore the rule.
+                // eslint-disable-next-line react-hooks/rules-of-hooks
+                const scopeProps = useScope(overrideScopes);
+                const currentScope = scopeProps[`__scope${scopeName}`];
+                return {
+                    ...nextScopes,
+                    ...currentScope
+                };
+            }, {});
+            return useMemo(()=>({
+                    [`__scope${baseScope.scopeName}`]: nextScopes1
+                })
+            , [
+                nextScopes1
+            ]);
+        };
+    };
+    createScope1.scopeName = baseScope.scopeName;
+    return createScope1;
+}
+
+/**
+ * A custom hook that converts a callback to a ref to avoid triggering re-renders when passed as a
+ * prop or avoid re-executing effects when passed as a dependency
+ */ function $b1b2314f5f9a1d84$export$25bec8c6f54ee79a(callback) {
+    const callbackRef = useRef(callback);
+    useEffect(()=>{
+        callbackRef.current = callback;
+    }); // https://github.com/facebook/react/issues/19240
+    return useMemo(()=>(...args)=>{
+            var _callbackRef$current;
+            return (_callbackRef$current = callbackRef.current) === null || _callbackRef$current === void 0 ? void 0 : _callbackRef$current.call(callbackRef, ...args);
+        }
+    , []);
+}
+
+function $71cd76cc60e0454e$export$6f32135080cb4c3({ prop: prop , defaultProp: defaultProp , onChange: onChange = ()=>{}  }) {
+    const [uncontrolledProp, setUncontrolledProp] = $71cd76cc60e0454e$var$useUncontrolledState({
+        defaultProp: defaultProp,
+        onChange: onChange
+    });
+    const isControlled = prop !== undefined;
+    const value1 = isControlled ? prop : uncontrolledProp;
+    const handleChange = $b1b2314f5f9a1d84$export$25bec8c6f54ee79a(onChange);
+    const setValue = useCallback((nextValue)=>{
+        if (isControlled) {
+            const setter = nextValue;
+            const value = typeof nextValue === 'function' ? setter(prop) : nextValue;
+            if (value !== prop) handleChange(value);
+        } else setUncontrolledProp(nextValue);
+    }, [
+        isControlled,
+        prop,
+        setUncontrolledProp,
+        handleChange
+    ]);
+    return [
+        value1,
+        setValue
+    ];
+}
+function $71cd76cc60e0454e$var$useUncontrolledState({ defaultProp: defaultProp , onChange: onChange  }) {
+    const uncontrolledState = useState(defaultProp);
+    const [value] = uncontrolledState;
+    const prevValueRef = useRef(value);
+    const handleChange = $b1b2314f5f9a1d84$export$25bec8c6f54ee79a(onChange);
+    useEffect(()=>{
+        if (prevValueRef.current !== value) {
+            handleChange(value);
+            prevValueRef.current = value;
+        }
+    }, [
+        value,
+        prevValueRef,
+        handleChange
+    ]);
+    return uncontrolledState;
+}
+
 function $db6c3485150b8e66$export$1ab7ae714698c4b8(element) {
     const [size, setSize] = useState(undefined);
     $9f79659886946c16$export$e5c5a5f917a5871c(()=>{
@@ -61,6 +247,44 @@ function $db6c3485150b8e66$export$1ab7ae714698c4b8(element) {
     return size;
 }
 
+const $8927f6f2acc4f386$var$NODES = [
+    'a',
+    'button',
+    'div',
+    'h2',
+    'h3',
+    'img',
+    'label',
+    'li',
+    'nav',
+    'ol',
+    'p',
+    'span',
+    'svg',
+    'ul'
+]; // Temporary while we await merge of this fix:
+// https://github.com/DefinitelyTyped/DefinitelyTyped/pull/55396
+// prettier-ignore
+/* -------------------------------------------------------------------------------------------------
+ * Primitive
+ * -----------------------------------------------------------------------------------------------*/ const $8927f6f2acc4f386$export$250ffa63cdc0d034 = $8927f6f2acc4f386$var$NODES.reduce((primitive, node)=>{
+    const Node = /*#__PURE__*/ forwardRef((props, forwardedRef)=>{
+        const { asChild: asChild , ...primitiveProps } = props;
+        const Comp = asChild ? $5e63c961fc1ce211$export$8c6ed5c666ac1360 : node;
+        useEffect(()=>{
+            window[Symbol.for('radix-ui')] = true;
+        }, []);
+        return /*#__PURE__*/ createElement(Comp, _extends({}, primitiveProps, {
+            ref: forwardedRef
+        }));
+    });
+    Node.displayName = `Primitive.${node}`;
+    return {
+        ...primitive,
+        [node]: Node
+    };
+}, {});
+
 /* -------------------------------------------------------------------------------------------------
  * Switch
  * -----------------------------------------------------------------------------------------------*/ const $6be4966fd9bbc698$var$SWITCH_NAME = 'Switch';
@@ -177,16 +401,16 @@ const $6be4966fd9bbc698$export$6521433ed15a34db = $6be4966fd9bbc698$export$4d07b
 
 /** Use `Switch` to toggle between checked and not checked. */
 var Switch = function (_a) {
-    var defaultChecked = _a.defaultChecked, onCheckedChange = _a.onCheckedChange, label = _a.label, name = _a.name, onBlur = _a.onBlur, value = _a.value, _b = _a.isDisabled, isDisabled = _b === void 0 ? false : _b, errorMessage = _a.errorMessage, id = _a.id, _c = _a.labelSize, labelSize = _c === void 0 ? "s" : _c, statusText = _a.statusText, _d = _a.hideLabel, hideLabel = _d === void 0 ? false : _d;
+    var defaultChecked = _a.defaultChecked, onCheckedChange = _a.onCheckedChange, label = _a.label, name = _a.name, onBlur = _a.onBlur, value = _a.value, _b = _a.isDisabled, isDisabled = _b === void 0 ? false : _b, errorMessage = _a.errorMessage, id = _a.id, _c = _a.labelSize, labelSize = _c === void 0 ? "s" : _c, statusText = _a.statusText, _d = _a.hideLabel, hideLabel = _d === void 0 ? false : _d, props = __rest(_a, ["defaultChecked", "onCheckedChange", "label", "name", "onBlur", "value", "isDisabled", "errorMessage", "id", "labelSize", "statusText", "hideLabel"]);
     var surface = useContext(Context).surface;
     return (React__default.createElement(FormControl, { errorMessage: errorMessage, htmlFor: id, isDisabled: isDisabled, label: hideLabel ? "" : label, labelSize: labelSize, requirementStatus: "not-applicable" },
         !hideLabel && React__default.createElement(VerticalSpace, { size: "8" }),
         React__default.createElement("div", { className: "arc-Switch-container" },
-            React__default.createElement($6be4966fd9bbc698$export$be92b6f5f03c0fe9, { id: id, "aria-label": label, defaultChecked: defaultChecked, name: name, value: value, onBlur: onBlur, onCheckedChange: onCheckedChange, disabled: isDisabled, className: classNames("arc-Switch", {
+            React__default.createElement($6be4966fd9bbc698$export$be92b6f5f03c0fe9, __assign({ id: id, "aria-label": label, defaultChecked: defaultChecked, name: name, value: value, onBlur: onBlur, onCheckedChange: onCheckedChange, disabled: isDisabled, className: classNames("arc-Switch", {
                     "arc-Switch--large": labelSize === "l",
                     "arc-Switch--isDisabled": isDisabled,
                     "arc-Switch--onDarkSurface": surface === "dark"
-                }) },
+                }) }, filterDataAttrs(props)),
                 React__default.createElement("div", { className: "arc-Switch-wrapper" },
                     React__default.createElement($6be4966fd9bbc698$export$6521433ed15a34db, { className: "arc-Switch-thumb" },
                         React__default.createElement("div", { className: "arc-Switch-thumbIcon" },

package/dist/Tabs/Tabs.cjs.d.ts

@@ -0,0 +1,75 @@
+import { FC, ReactNode } from "react";
+import { ArcIcon } from "../_shared/cjs/arc-icon-17594b2f";
+declare const Tab: FC<TabProps>;
+interface TabProps {
+    /**
+     * Label to display on the Tab
+     */
+    label: string;
+    /**
+     * Value to link `Tab` to `TabContent`
+     */
+    value: string;
+    /**
+     * Determine what icon to display within the Tab.
+     */
+    icon?: ArcIcon;
+    /**
+     * Determine what to display when `Tab` is active
+     */
+    iconActive?: ArcIcon;
+}
+declare const TabContent: FC<TabContentProps>;
+interface TabContentProps {
+    /**
+     * Content to display
+     */
+    children: ReactNode;
+    /**
+     * This value links the `TabContent` with `Tab`
+     */
+    value: string;
+}
+declare const TabsList: FC<TabsListProps>;
+interface TabsListProps {
+    /**
+     * Contents of the `Tabs` Should contain `Tab`
+     */
+    children: ReactNode;
+    /**
+     * Determine if `Tabs` should be justified
+     */
+    isJustified?: boolean;
+    /**
+     * Determine the type of `Tabs`. Default is standard
+     */
+    type?: "standard" | "contained";
+    /**
+     * Determine a accessible label for `Tabs`
+     */
+    ariaLabel?: string;
+}
+declare const Tabs: FC<TabsProps> & {
+    Tab: typeof Tab;
+    Content: typeof TabContent;
+    List: typeof TabsList;
+};
+interface TabsProps {
+    /**
+     * Render children
+     */
+    children: ReactNode;
+    /**
+     * Default to an inital value of a tab. If this is left blank it is possible for there to be no active tabs
+     */
+    defaultValue?: string;
+    /**
+     * Event handler called when the value changes.
+     */
+    onValueChange?: (value: string) => void;
+    /**
+     * When automatic, tabs are activated when receiving focus. When manual, tabs are activated when clicked.
+     */
+    activationMode?: "automatic" | "manual";
+}
+export { Tabs };