@arc-ui/components 12.0.0-beta.22 → 12.0.0-beta.23

package/lib/_shared/esm/ProgressStepperOverflow-fPkLltVO.mjs

@@ -1,140 +0,0 @@
-import { _ as __rest, a as __assign, f as filterAttrs } from './filter-attrs-B6CM-NUr.mjs';
-import React__default, { forwardRef, useState, useRef, useImperativeHandle, useEffect } from 'react';
-import { d as debounce } from './debounce-D_Nx5go6.mjs';
-import { P as ProgressStepper } from './ProgressStepper-CLBtBNy2.mjs';
-
-/** Use `ProgressStepperOverflow` to wrap `ProgressStepperItem`s and allow overflow behaviour. */
-var ProgressStepperOverflow = forwardRef(function (_a, stepperRef) {
-    var children = _a.children, onIndexChange = _a.onIndexChange, onLoadStep = _a.onLoadStep, size = _a.size, invertLabelPosition = _a.invertLabelPosition, _b = _a.offsetLeft, offsetLeft = _b === void 0 ? 24 : _b, props = __rest(_a, ["children", "onIndexChange", "onLoadStep", "size", "invertLabelPosition", "offsetLeft"]);
-    var _c = useState(onLoadStep ? onLoadStep : 0), activeIndex = _c[0], setActiveIndex = _c[1];
-    var _d = useState(0), closestScrolledIndex = _d[0], setClosestScrolledIndex = _d[1];
-    var _e = useState(true), lastStepVisible = _e[0], setLastStepVisible = _e[1];
-    var containerRef = useRef(null);
-    useImperativeHandle(stepperRef, function () { return ({
-        handleStepScroll: handleStepScroll,
-        scrollToStep: scrollToStep,
-        handleViewScroll: handleViewScroll,
-        isLastChildVisible: isLastChildVisible,
-    }); });
-    // Add Horizontal Scroll Event Listener
-    useEffect(function () {
-        var _a, _b;
-        var checkClosest = debounce(function () {
-            var closestIndex = findClosestIndex();
-            setClosestScrolledIndex(closestIndex);
-        }, 100);
-        var checkLastChild = debounce(function () {
-            var lastVisible = isLastChildVisible();
-            if (lastVisible) {
-                setLastStepVisible(true);
-            }
-            else
-                setLastStepVisible(false);
-        }, 100);
-        (_a = containerRef.current) === null || _a === void 0 ? void 0 : _a.addEventListener("scroll", checkLastChild);
-        (_b = containerRef.current) === null || _b === void 0 ? void 0 : _b.addEventListener("scroll", checkClosest);
-        return function () {
-            var _a;
-            (_a = containerRef.current) === null || _a === void 0 ? void 0 : _a.removeEventListener("scroll", checkClosest);
-            checkLastChild.cancel();
-        };
-    }, []);
-    // Scroll to activeIndex
-    useEffect(function () {
-        scrollTo();
-    }, [activeIndex]);
-    // Exposing changes in activeIndex outside of component
-    useEffect(function () {
-        onIndexChange === null || onIndexChange === void 0 ? void 0 : onIndexChange(closestScrolledIndex);
-        isLastChildVisible();
-    }, [closestScrolledIndex, onIndexChange, lastStepVisible]);
-    // helper functions - start
-    var getProgressStepper = function () { var _a; return (_a = containerRef.current) === null || _a === void 0 ? void 0 : _a.firstChild; };
-    var getStepChildren = function () {
-        var _a;
-        return Array.from(((_a = getProgressStepper()) === null || _a === void 0 ? void 0 : _a.children) || []);
-    };
-    var getLeftRects = function (children) {
-        var container = getProgressStepper();
-        if (!container)
-            return [];
-        var parentRect = container.getBoundingClientRect();
-        return children.map(function (child) {
-            var childRect = child.getBoundingClientRect();
-            return {
-                left: childRect.left - parentRect.left,
-            };
-        });
-    };
-    var indexOfClosest = function (values) {
-        return values.indexOf(Math.min.apply(Math, values));
-    };
-    // helper functions - end
-    var isLastChildVisible = function () {
-        var _a;
-        var steps = getStepChildren();
-        var lastStep = steps[steps.length - 1];
-        var rect = lastStep.getBoundingClientRect();
-        var containerRect = (_a = containerRef.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();
-        return rect.right <= containerRect.right;
-    };
-    // Used for onScroll function of scrolling without buttons
-    var findClosestIndex = function () {
-        var _a, _b;
-        var children = getStepChildren();
-        var scrolledAmount = (_b = (_a = containerRef.current) === null || _a === void 0 ? void 0 : _a.scrollLeft) !== null && _b !== void 0 ? _b : 0;
-        // compare the scrolled amount to the intial left edge distance for each step
-        var getScrollDistances = function (children, scrolledAmount) {
-            return getLeftRects(children).map(function (rect) {
-                return Math.abs(scrolledAmount - rect.left);
-            });
-        };
-        var closestIndex = indexOfClosest(getScrollDistances(children, scrolledAmount));
-        return closestIndex;
-    };
-    // Scroll active step to the far left of the page
-    var scrollTo = function () {
-        var _a, _b;
-        var activeStep = (_a = getProgressStepper()) === null || _a === void 0 ? void 0 : _a.children[activeIndex];
-        if (activeStep) {
-            (_b = containerRef.current) === null || _b === void 0 ? void 0 : _b.scrollTo({
-                left: activeStep.offsetLeft - offsetLeft,
-                behavior: "smooth",
-            });
-        }
-    };
-    var handleStepScroll = function (increment) {
-        // Account for any manual scrolling set closest index to active index
-        setActiveIndex(closestScrolledIndex);
-        var newIndex = closestScrolledIndex + increment;
-        setActiveIndex(newIndex);
-        // If clicking backwards to include half visible step
-        if (closestScrolledIndex + increment === activeIndex) {
-            scrollTo();
-        }
-        if (closestScrolledIndex + increment < 0) {
-            setActiveIndex(0);
-            scrollTo();
-        }
-    };
-    // Used to scroll by Parent width
-    var handleViewScroll = function (direction) {
-        var _a;
-        var clientWidth = ((_a = containerRef.current) === null || _a === void 0 ? void 0 : _a.clientWidth) || 0;
-        var stepper = containerRef.current;
-        if (!stepper)
-            return;
-        stepper.scrollBy({
-            left: direction ? clientWidth : -clientWidth,
-            behavior: "smooth",
-        });
-    };
-    // Used to set a specific step to jump to on a button click
-    var scrollToStep = function (step) {
-        setActiveIndex(step);
-    };
-    return (React__default.createElement("div", __assign({ ref: containerRef, className: "arc-ProgressStepperOverflow", style: { paddingLeft: offsetLeft } }, filterAttrs(props)),
-        React__default.createElement(ProgressStepper, { size: size, invertLabelPosition: invertLabelPosition, isFluid: false }, children)));
-});
-
-export { ProgressStepperOverflow as P };

package/lib/_shared/esm/RadioCardGroupInput-D7W28geB.mjs

@@ -1,50 +0,0 @@
-import { _ as __rest, a as __assign } from './filter-attrs-B6CM-NUr.mjs';
-import React__default, { createContext, useContext, forwardRef } from 'react';
-import { c as classNames } from './index-5C0-U8cc.mjs';
-import { c as capitaliseFirstLetter } from './capitalise-first-letter-Cubg2CS1.mjs';
-import { C as Context } from './Surface-Colbp3Zx.mjs';
-import { I as Icon } from './Icon-CcPOJcQm.mjs';
-
-var RadioContext = createContext({});
-var Provider = RadioContext.Provider;
-var useRadioContext = function () {
-    var context = useContext(RadioContext);
-    return context;
-};
-
-var RadioCard = forwardRef(function (_a, ref) {
-    var id = _a.id, icon = _a.icon, label = _a.label, support = _a.support, isDisabled = _a.isDisabled, checked = _a.checked, defaultChecked = _a.defaultChecked, changeEvent = _a.changeEvent, name = _a.name, blurEvent = _a.blurEvent, value = _a.value, children = _a.children, _b = _a.controlLocation, controlLocation = _b === void 0 ? "right" : _b, _c = _a.hideButton, hideButton = _c === void 0 ? false : _c;
-    var surface = useContext(Context).surface;
-    var idLabel = "".concat(id, "-label");
-    return (React__default.createElement("div", { className: classNames("arc-RadioCard", {
-            "arc-RadioCard--isDisabled": isDisabled,
-            "arc-RadioCard--onDarkSurface": surface === "dark",
-            "arc-RadioCard--isSelected": checked,
-        }) },
-        React__default.createElement("label", { id: idLabel, htmlFor: id },
-            React__default.createElement("input", { className: "arc-RadioCard-input", id: id, checked: checked, defaultChecked: defaultChecked, disabled: isDisabled, onChange: changeEvent, onBlur: blurEvent, name: name, ref: ref, type: "radio", value: value, "aria-checked": checked }),
-            React__default.createElement("div", { className: "arc-RadioCard-inner arc-RadioCard--control".concat(capitaliseFirstLetter(controlLocation)) },
-                icon && (React__default.createElement("div", { className: "arc-RadioCard-icon" },
-                    React__default.createElement(Icon, { icon: icon, size: 24 }))),
-                React__default.createElement("div", { className: "arc-RadioCard-content" },
-                    React__default.createElement("span", { className: "arc-RadioCard-label" }, label),
-                    support && (React__default.createElement("span", { className: "arc-RadioCard-support" }, support))),
-                children && (React__default.createElement("div", { className: "arc-RadioCard-customContent" }, children)),
-                !hideButton && (React__default.createElement("div", { className: classNames("arc-RadioCard-radioIcon", {
-                        "arc-RadioCard-radioIcon--isSelected": checked,
-                    }) }))))));
-});
-
-/**
- * Radio Card component.
- */
-var RadioCardGroupInput = forwardRef(function (_a, ref) {
-    var icon = _a.icon, support = _a.support, id = _a.id, isDisabled = _a.isDisabled, label = _a.label, value = _a.value, children = _a.children, controlLocation = _a.controlLocation, hideButton = _a.hideButton, props = __rest(_a, ["icon", "support", "id", "isDisabled", "label", "value", "children", "controlLocation", "hideButton"]);
-    var _b = useRadioContext(), name = _b.name, changeEvent = _b.changeEvent, checkedValue = _b.checkedValue, groupDisabled = _b.groupDisabled;
-    var isChecked = checkedValue === value ? true : false;
-    var checked = typeof changeEvent !== "function" ? undefined : isChecked;
-    var defaultChecked = typeof changeEvent !== "function" ? isChecked : undefined;
-    return (React__default.createElement(RadioCard, __assign({ icon: icon, ref: ref, id: id, support: support, label: label, name: name, defaultChecked: defaultChecked, checked: checked, changeEvent: changeEvent, value: value, isDisabled: isDisabled || groupDisabled, controlLocation: controlLocation, hideButton: hideButton }, props), children));
-});
-
-export { Provider as P, RadioCardGroupInput as R };

package/lib/_shared/esm/RadioGroupInput-zAWSV29m.mjs

@@ -1,50 +0,0 @@
-import { _ as __rest, a as __assign } from './filter-attrs-B6CM-NUr.mjs';
-import React__default, { createContext, useContext, forwardRef } from 'react';
-import { c as classNames } from './index-5C0-U8cc.mjs';
-import { C as Context } from './Surface-Colbp3Zx.mjs';
-import { V as VisuallyHidden } from './VisuallyHidden-DqAgoqJo.mjs';
-
-var RadioContext = createContext({});
-var Provider = RadioContext.Provider;
-var useRadioContext = function () {
-    var context = useContext(RadioContext);
-    return context;
-};
-
-var RadioGroupButton = forwardRef(function (_a, ref) {
-    var id = _a.id, changeEvent = _a.changeEvent, isDisabled = _a.isDisabled, size = _a.size, labelSize = _a.labelSize, checked = _a.checked, defaultChecked = _a.defaultChecked, radioButtonAlignment = _a.radioButtonAlignment, name = _a.name, blurEvent = _a.blurEvent, value = _a.value, label = _a.label, helper = _a.helper, hideLabel = _a.hideLabel, withMargin = _a.withMargin;
-    var surface = useContext(Context).surface;
-    var idLabel = "".concat(id, "-label");
-    return (React__default.createElement("div", { className: classNames({
-            "arc-RadioGroupButton": true,
-            "arc-RadioGroupButton--withMargin": withMargin,
-            "arc-RadioGroupButton--withMarginSmall": withMargin && size === "s",
-            "arc-RadioGroupButton--disabled": isDisabled,
-            "arc-RadioGroupButton--small": size === "s",
-            "arc-RadioGroupButton--smallLabel": labelSize === "s",
-            "arc-RadioGroupButton--onDarkSurface": surface === "dark",
-        }) },
-        React__default.createElement("label", { className: classNames("arc-RadioGroupButton-label", {
-                "arc-RadioGroupButton-label--alignTop": radioButtonAlignment === "top",
-            }), htmlFor: id, id: idLabel },
-            React__default.createElement("input", { className: "arc-RadioGroupButton-input", checked: checked, defaultChecked: defaultChecked, disabled: isDisabled, id: id, name: name, onBlur: blurEvent, onChange: changeEvent, ref: ref, type: "radio", value: value, "aria-checked": checked }),
-            React__default.createElement("span", { className: classNames({
-                    "arc-RadioGroupButton-label--marginTop": radioButtonAlignment === "top",
-                }) },
-                hideLabel ? React__default.createElement(VisuallyHidden, null, label) : label,
-                helper && (React__default.createElement("span", { className: "arc-RadioGroupButton-helper" }, helper))))));
-});
-
-/**
- * Radio Button component.
- */
-var RadioGroupInput = forwardRef(function (_a, ref) {
-    var helper = _a.helper, id = _a.id, isDisabled = _a.isDisabled, label = _a.label, _b = _a.radioButtonAlignment, radioButtonAlignment = _b === void 0 ? "center" : _b, value = _a.value, props = __rest(_a, ["helper", "id", "isDisabled", "label", "radioButtonAlignment", "value"]);
-    var _c = useRadioContext(), blurEvent = _c.blurEvent, changeEvent = _c.changeEvent, groupDisabled = _c.groupDisabled, checkedValue = _c.checkedValue, name = _c.name, size = _c.size;
-    var isChecked = checkedValue === value ? true : false;
-    var checked = typeof changeEvent !== "function" ? undefined : isChecked;
-    var defaultChecked = typeof changeEvent !== "function" ? isChecked : undefined;
-    return (React__default.createElement(RadioGroupButton, __assign({ withMargin: true, ref: ref, id: id, name: name, helper: helper, isDisabled: isDisabled || groupDisabled, size: size, radioButtonAlignment: radioButtonAlignment, label: label, defaultChecked: defaultChecked, checked: checked, changeEvent: changeEvent, blurEvent: blurEvent, value: value }, props)));
-});
-
-export { Provider as P, RadioGroupButton as R, RadioGroupInput as a };