@arc-ui/components 11.1.0 → 11.2.0

package/dist/index.js

@@ -35785,6 +35785,10 @@ var Select = function (_a) {
         onChange && onChange(value);
         setSelectedValue(value);
     };
+    var getSelectedValueName = function (value) {
+        var _a;
+        return (_a = options.find(function (option) { return option.value === value; })) === null || _a === void 0 ? void 0 : _a.name;
+    };
     return (React__default["default"].createElement(FormControl, { errorMessage: errorMessage, helper: helper, htmlFor: id, label: label, labelSize: labelSize, requirementStatus: isRequired ? "required" : "optional", isDisabled: isDisabled, disclosureText: disclosureText, disclosureTitle: disclosureTitle, onClickDisclosure: onClickDisclosure },
         React__default["default"].createElement($cc7e05a45900e73f$export$be92b6f5f03c0fe9, { name: name, required: isRequired, disabled: isDisabled, defaultOpen: isDefaultOpen, value: selectedValue, onOpenChange: onOpenChange, onValueChange: function (value) { return onValueChange(value); } },
             React__default["default"].createElement($cc7e05a45900e73f$export$41fb9f06171c75f4, { id: id, name: name, onBlur: onBlur, className: classNames("arc-Select-trigger", {
@@ -35792,7 +35796,7 @@ var Select = function (_a) {
                     "arc-Select-trigger--onDarkSurface": surface === "dark",
                     "arc-Select-trigger--invalid": errorMessage
                 }) },
-                React__default["default"].createElement($cc7e05a45900e73f$export$4c8d1a57a761ef94, { asChild: true, "aria-label": selectedValue }, !selectedValue ? (React__default["default"].createElement("span", { "aria-hidden": true, className: "arc-Select-placeHolder" }, placeholder)) : (React__default["default"].createElement("span", { className: "arc-Select-valueItem" }, selectedValue))),
+                React__default["default"].createElement($cc7e05a45900e73f$export$4c8d1a57a761ef94, { asChild: true, "aria-label": getSelectedValueName(selectedValue) }, !selectedValue ? (React__default["default"].createElement("span", { "aria-hidden": true, className: "arc-Select-placeHolder" }, placeholder)) : (React__default["default"].createElement("span", { className: "arc-Select-valueItem" }, getSelectedValueName(selectedValue)))),
                 React__default["default"].createElement($cc7e05a45900e73f$export$f04a61298a47a40f, { className: "arc-Select-triggerIcon" },
                     React__default["default"].createElement(Icon, { icon: BtIconChevronDown2Px_2, size: 20 }))),
             React__default["default"].createElement($cc7e05a45900e73f$export$602eac185826482c, { container: arcRootElement },
@@ -36542,6 +36546,208 @@ SiteHeaderRehydrator.NavItemRehydrator = NavItemRehydrator;
 SiteHeaderRehydrator.NavItemWithSubNavRehydrator = NavItemWithSubNavRehydrator;
 SiteHeaderRehydrator.SubNavItemRehydrator = SubNavItemRehydrator;
 
+function $db6c3485150b8e66$export$1ab7ae714698c4b8(element) {
+    const [size, setSize] = React$a.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;
+}
+
+/* -------------------------------------------------------------------------------------------------
+ * Switch
+ * -----------------------------------------------------------------------------------------------*/ const $6be4966fd9bbc698$var$SWITCH_NAME = 'Switch';
+const [$6be4966fd9bbc698$var$createSwitchContext, $6be4966fd9bbc698$export$cf7f5f17f69cbd43] = $c512c27ab02ef895$export$50c7b4e9d9f19c1($6be4966fd9bbc698$var$SWITCH_NAME);
+const [$6be4966fd9bbc698$var$SwitchProvider, $6be4966fd9bbc698$var$useSwitchContext] = $6be4966fd9bbc698$var$createSwitchContext($6be4966fd9bbc698$var$SWITCH_NAME);
+const $6be4966fd9bbc698$export$b5d5cf8927ab7262 = /*#__PURE__*/ React$a.forwardRef((props, forwardedRef)=>{
+    const { __scopeSwitch: __scopeSwitch , name: name , checked: checkedProp , defaultChecked: defaultChecked , required: required , disabled: disabled , value: value = 'on' , onCheckedChange: onCheckedChange , ...switchProps } = props;
+    const [button, setButton] = React$a.useState(null);
+    const composedRefs = $6ed0406888f73fc4$export$c7b2cbe3552a0d05(forwardedRef, (node)=>setButton(node)
+    );
+    const hasConsumerStoppedPropagationRef = React$a.useRef(false); // We set this to true by default so that events bubble to forms without JS (SSR)
+    const isFormControl = button ? Boolean(button.closest('form')) : true;
+    const [checked = false, setChecked] = $71cd76cc60e0454e$export$6f32135080cb4c3({
+        prop: checkedProp,
+        defaultProp: defaultChecked,
+        onChange: onCheckedChange
+    });
+    return /*#__PURE__*/ React$a.createElement($6be4966fd9bbc698$var$SwitchProvider, {
+        scope: __scopeSwitch,
+        checked: checked,
+        disabled: disabled
+    }, /*#__PURE__*/ React$a.createElement($8927f6f2acc4f386$export$250ffa63cdc0d034.button, _extends({
+        type: "button",
+        role: "switch",
+        "aria-checked": checked,
+        "aria-required": required,
+        "data-state": $6be4966fd9bbc698$var$getState(checked),
+        "data-disabled": disabled ? '' : undefined,
+        disabled: disabled,
+        value: value
+    }, switchProps, {
+        ref: composedRefs,
+        onClick: $e42e1063c40fb3ef$export$b9ecd428b558ff10(props.onClick, (event)=>{
+            setChecked((prevChecked)=>!prevChecked
+            );
+            if (isFormControl) {
+                hasConsumerStoppedPropagationRef.current = event.isPropagationStopped(); // if switch is in a form, stop propagation from the button so that we only propagate
+                // one click event (from the input). We propagate changes from an input so that native
+                // form validation works and form events reflect switch updates.
+                if (!hasConsumerStoppedPropagationRef.current) event.stopPropagation();
+            }
+        })
+    })), isFormControl && /*#__PURE__*/ React$a.createElement($6be4966fd9bbc698$var$BubbleInput, {
+        control: button,
+        bubbles: !hasConsumerStoppedPropagationRef.current,
+        name: name,
+        value: value,
+        checked: checked,
+        required: required,
+        disabled: disabled // We transform because the input is absolutely positioned but we have
+        ,
+        style: {
+            transform: 'translateX(-100%)'
+        }
+    }));
+});
+/* -------------------------------------------------------------------------------------------------
+ * SwitchThumb
+ * -----------------------------------------------------------------------------------------------*/ const $6be4966fd9bbc698$var$THUMB_NAME = 'SwitchThumb';
+const $6be4966fd9bbc698$export$4d07bf653ea69106 = /*#__PURE__*/ React$a.forwardRef((props, forwardedRef)=>{
+    const { __scopeSwitch: __scopeSwitch , ...thumbProps } = props;
+    const context = $6be4966fd9bbc698$var$useSwitchContext($6be4966fd9bbc698$var$THUMB_NAME, __scopeSwitch);
+    return /*#__PURE__*/ React$a.createElement($8927f6f2acc4f386$export$250ffa63cdc0d034.span, _extends({
+        "data-state": $6be4966fd9bbc698$var$getState(context.checked),
+        "data-disabled": context.disabled ? '' : undefined
+    }, thumbProps, {
+        ref: forwardedRef
+    }));
+});
+/* ---------------------------------------------------------------------------------------------- */ const $6be4966fd9bbc698$var$BubbleInput = (props)=>{
+    const { control: control , checked: checked , bubbles: bubbles = true , ...inputProps } = props;
+    const ref = React$a.useRef(null);
+    const prevChecked = $010c2913dbd2fe3d$export$5cae361ad82dce8b(checked);
+    const controlSize = $db6c3485150b8e66$export$1ab7ae714698c4b8(control); // Bubble checked change to parents (e.g form change event)
+    React$a.useEffect(()=>{
+        const input = ref.current;
+        const inputProto = window.HTMLInputElement.prototype;
+        const descriptor = Object.getOwnPropertyDescriptor(inputProto, 'checked');
+        const setChecked = descriptor.set;
+        if (prevChecked !== checked && setChecked) {
+            const event = new Event('click', {
+                bubbles: bubbles
+            });
+            setChecked.call(input, checked);
+            input.dispatchEvent(event);
+        }
+    }, [
+        prevChecked,
+        checked,
+        bubbles
+    ]);
+    return /*#__PURE__*/ React$a.createElement("input", _extends({
+        type: "checkbox",
+        "aria-hidden": true,
+        defaultChecked: checked
+    }, inputProps, {
+        tabIndex: -1,
+        ref: ref,
+        style: {
+            ...props.style,
+            ...controlSize,
+            position: 'absolute',
+            pointerEvents: 'none',
+            opacity: 0,
+            margin: 0
+        }
+    }));
+};
+function $6be4966fd9bbc698$var$getState(checked) {
+    return checked ? 'checked' : 'unchecked';
+}
+const $6be4966fd9bbc698$export$be92b6f5f03c0fe9 = $6be4966fd9bbc698$export$b5d5cf8927ab7262;
+const $6be4966fd9bbc698$export$6521433ed15a34db = $6be4966fd9bbc698$export$4d07bf653ea69106;
+
+/**
+ * Use `VerticalSpace` to create vertical space between components.
+ */
+var VerticalSpace = function (_a) {
+    var _b;
+    var _c = _a.isDebugVisible, isDebugVisible = _c === void 0 ? false : _c, _d = _a.size, size = _d === void 0 ? "24" : _d, props = __rest$2(_a, ["isDebugVisible", "size"]);
+    return (React__default["default"].createElement("div", __assign$2({ className: classNames((_b = {
+                "arc-VerticalSpace": true
+            },
+            _b["arc-VerticalSpace--size".concat(size)] = size && size !== "24",
+            _b["arc-VerticalSpace--debugVisible"] = isDebugVisible,
+            _b)) }, filterDataAttrs(props))));
+};
+
+/** 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 surface = React$a.useContext(Context$3).surface;
+    return (React__default["default"].createElement(FormControl, { errorMessage: errorMessage, htmlFor: id, isDisabled: isDisabled, label: hideLabel ? "" : label, labelSize: labelSize, requirementStatus: "not-applicable" },
+        !hideLabel && React__default["default"].createElement(VerticalSpace, { size: "8" }),
+        React__default["default"].createElement("div", { className: "arc-Switch-container" },
+            React__default["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", {
+                    "arc-Switch--large": labelSize === "l",
+                    "arc-Switch--isDisabled": isDisabled,
+                    "arc-Switch--onDarkSurface": surface === "dark"
+                }) },
+                React__default["default"].createElement("div", { className: "arc-Switch-wrapper" },
+                    React__default["default"].createElement($6be4966fd9bbc698$export$6521433ed15a34db, { className: "arc-Switch-thumb" },
+                        React__default["default"].createElement("div", { className: "arc-Switch-thumbIcon" },
+                            React__default["default"].createElement("div", { className: "arc-Switch-icon", "data-testid": "arc-switch-thumb-icon" },
+                                React__default["default"].createElement(Icon, { icon: BtIconTickAlt2Px_2, color: surface === "dark" ? "brand" : "brand", size: labelSize === "l" ? 24 : 16 })))))),
+            React__default["default"].createElement("div", { className: classNames("arc-Switch-statusText", {
+                    "arc-Switch-statusText--isDisabled": isDisabled,
+                    "arc-Switch-statusText--onDarkSurface": surface === "dark"
+                }) },
+                React__default["default"].createElement(Text, { size: labelSize },
+                    " ",
+                    statusText,
+                    " ")))));
+};
+
 /** Use `Badge` component to visually display a small amount of information, such as notification counts or status indicators. */
 var Badge = function (_a) {
     var _b, _c;
@@ -36614,20 +36820,6 @@ var Truncate = function (_a) {
     return (React__default["default"].createElement("div", { className: "arc-Truncate", style: { maxWidth: "".concat(maxWidth, "%") }, title: title }, children));
 };
 
-/**
- * Use `VerticalSpace` to create vertical space between components.
- */
-var VerticalSpace = function (_a) {
-    var _b;
-    var _c = _a.isDebugVisible, isDebugVisible = _c === void 0 ? false : _c, _d = _a.size, size = _d === void 0 ? "24" : _d, props = __rest$2(_a, ["isDebugVisible", "size"]);
-    return (React__default["default"].createElement("div", __assign$2({ className: classNames((_b = {
-                "arc-VerticalSpace": true
-            },
-            _b["arc-VerticalSpace--size".concat(size)] = size && size !== "24",
-            _b["arc-VerticalSpace--debugVisible"] = isDebugVisible,
-            _b)) }, filterDataAttrs(props))));
-};
-
 exports.Align = Align;
 exports.Badge = Badge;
 exports.Base = Base;
@@ -36659,6 +36851,7 @@ exports.SiteHeader = SiteHeader;
 exports.SiteHeaderRehydrator = SiteHeaderRehydrator;
 exports.Surface = Surface;
 exports.SurfaceContext = Context$3;
+exports.Switch = Switch;
 exports.Text = Text;
 exports.TextInput = TextInput;
 exports.Truncate = Truncate;