@arc-ui/components 12.0.0-beta7 → 12.0.0

package/lib/_shared/cjs/TemplateBanner-CzDAL0lq.cjs

@@ -0,0 +1,84 @@
+'use strict';
+
+var tslib_es6 = require('./tslib.es6-CCZ3TN_7.cjs');
+var React = require('react');
+var index = require('./index-CTlXMLug.cjs');
+var filterAttrs = require('./filter-attrs-D19P2s1V.cjs');
+var VerticalSpace = require('./VerticalSpace-DLQUYsvc.cjs');
+var Box = require('./Box-Va2g7Gdp.cjs');
+var Heading = require('./Heading-BYBmZkmS.cjs');
+var GridRow = require('./GridRow-l_SePUqV.cjs');
+require('./index-DR8Rkav9.cjs');
+var BannerImage = require('./BannerImage-CYHLvtfL.cjs');
+var Visible = require('./Visible-Ca2H20zc.cjs');
+
+var BannerRow = function (_a) {
+    var isReversed = _a.isReversed, children = _a.children;
+    return (React.createElement(React.Fragment, null,
+        React.createElement(Visible.Visible, { xs: true, s: true },
+            React.createElement(GridRow.GridRow, { "data-testid": "arc-TemplateBanner-gridRow-mobile" }, children)),
+        React.createElement(Visible.Visible, { m: true, l: true, xl: true, xxl: true },
+            React.createElement(GridRow.GridRow, { "data-testid": "arc-TemplateBanner-gridRow-desktop", direction: isReversed ? "row-reverse" : "row" }, children))));
+};
+
+/** Use `TemplateBanner` as a base structure for banner components; other banner variants extend or consume this template. */
+var TemplateBanner = function (_a) {
+    var heading = _a.heading, _b = _a.fontStyle, fontStyle = _b === void 0 ? "default" : _b, label = _a.label, _c = _a.labelLevel, labelLevel = _c === void 0 ? "3" : _c, text = _a.text, img = _a.img, _d = _a.contentRatio, contentRatio = _d === void 0 ? "1/1" : _d, children = _a.children, _e = _a.alignment, alignment = _e === void 0 ? "center" : _e, additionalTopMargin = _a.additionalTopMargin, _f = _a.minHeight, minHeight = _f === void 0 ? 454 : _f, minHeightM = _a.minHeightM, minHeightL = _a.minHeightL, minHeightXL = _a.minHeightXL, _g = _a.headingSize, headingSize = _g === void 0 ? "xl" : _g, _h = _a.isReversed, isReversed = _h === void 0 ? false : _h, _j = _a.isElevated, isElevated = _j === void 0 ? false : _j, _k = _a.headingLevel, headingLevel = _k === void 0 ? "2" : _k, _l = _a.type, type = _l === void 0 ? "light" : _l, props = tslib_es6.__rest(_a, ["heading", "fontStyle", "label", "labelLevel", "text", "img", "contentRatio", "children", "alignment", "additionalTopMargin", "minHeight", "minHeightM", "minHeightL", "minHeightXL", "headingSize", "isReversed", "isElevated", "headingLevel", "type"]);
+    var backgrounds = {
+        dark: "dark-brand-02",
+        light: "light-white",
+        contained: "light-white",
+    };
+    var imageAlignment = {
+        bottom: "end",
+        top: "start",
+        center: "center",
+    };
+    var isContained = type === "contained";
+    var borderWidth = isContained && !isElevated ? "thin" : undefined;
+    var columnWithImgWidths = {
+        "1/0": 12,
+        "2/3": 8,
+        "1/1": 6,
+    };
+    var templateBannerStyles = {
+        "--template-banner-min-height": "".concat(minHeight, "px"),
+        "--template-banner-min-height-m": minHeightM ? "".concat(minHeightM, "px") : "auto",
+        "--template-banner-min-height-l": minHeightL ? "".concat(minHeightL, "px") : "auto",
+        "--template-banner-min-height-xl": minHeightXL
+            ? "".concat(minHeightXL, "px")
+            : "auto",
+    };
+    return (React.createElement("div", tslib_es6.__assign({ style: templateBannerStyles, className: index.classNames("arc-TemplateBanner arc-TemplateBanner-background--".concat(type), {
+            "arc-TemplateBanner--elevation": isElevated,
+            "arc-TemplateBanner--minHeightM": minHeightM,
+            "arc-TemplateBanner--minHeightL": minHeightL,
+            "arc-TemplateBanner--minHeightXL": minHeightXL,
+        }) }, filterAttrs.filterAttrs(props)),
+        React.createElement(Box.Box, { isBorderRadius: true, "data-testid": "arc-TemplateBanner-box", borderWidth: borderWidth, surface: backgrounds[type], isSurfaceTransparent: !isContained },
+            React.createElement(GridRow.Grid, { isGutterless: true, isFluid: true },
+                React.createElement(BannerRow, { "data-testid": "arc-TemplateBanner-gridRow", isReversed: isReversed },
+                    React.createElement(GridRow.GridCol, { "data-testid": "arc-TemplateBanner-contentCol", align: {
+                            m: alignment === "start" ? "start" : "center",
+                            xs: !img || contentRatio === "1/0" ? "center" : "start",
+                        }, xs: 12, order: { xs: isContained && isReversed ? 1 : 0, m: 0 }, m: img ? columnWithImgWidths[contentRatio] : 12 },
+                        React.createElement("div", { className: index.classNames("arc-TemplateBanner-content", {
+                                "arc-TemplateBanner-content--additionalTopMargin": additionalTopMargin && alignment === "start",
+                            }) },
+                            label && (React.createElement(React.Fragment, null,
+                                React.createElement(Heading.Heading, { level: labelLevel, fontStyle: "overline", isWordWrap: false }, label),
+                                React.createElement(VerticalSpace.VerticalSpace, { size: "8" }))),
+                            React.createElement(Heading.Heading, { level: headingLevel, size: headingSize, fontStyle: fontStyle, isWordWrap: false }, heading),
+                            text && (React.createElement(React.Fragment, null,
+                                React.createElement(VerticalSpace.VerticalSpace, { size: "16" }),
+                                React.createElement("span", { className: "arc-TemplateBanner-text" }, text))),
+                            children && (React.createElement("span", null,
+                                React.createElement(VerticalSpace.VerticalSpace, { size: "32" }),
+                                children)))),
+                    img && contentRatio !== "1/0" && (React.createElement(GridRow.GridCol, tslib_es6.__assign({ "data-testid": "arc-TemplateBanner-imageCol", align: img.fit !== "cover"
+                            ? { m: imageAlignment[img.alignment || "center"] }
+                            : undefined, xs: 12 }, (contentRatio === "2/3" && img ? { m: 4 } : { m: 6 })),
+                        React.createElement(BannerImage.BannerImage, tslib_es6.__assign({ ariaHidden: true }, img)))))))));
+};
+
+exports.TemplateBanner = TemplateBanner;

package/lib/_shared/cjs/Text-jwsn80lQ.cjs

@@ -0,0 +1,30 @@
+'use strict';
+
+var tslib_es6 = require('./tslib.es6-CCZ3TN_7.cjs');
+var React = require('react');
+var index = require('./index-CTlXMLug.cjs');
+var suffixModifier = require('./suffix-modifier-DLUGR-yG.cjs');
+var filterAttrs = require('./filter-attrs-D19P2s1V.cjs');
+var Surface = require('./Surface-DIU5ciDT.cjs');
+
+/**
+ * Use `Text` to display text.
+ */
+var Text = function (_a) {
+    var _b;
+    var _c = _a.align, align = _c === void 0 ? "left" : _c, children = _a.children, id = _a.id, _d = _a.isInline, isInline = _d === void 0 ? false : _d, _e = _a.isMeasured, isMeasured = _e === void 0 ? false : _e, _f = _a.size, size = _f === void 0 ? "m" : _f, _g = _a.tone, tone = _g === void 0 ? "default" : _g, _h = _a.elementType, elementType = _h === void 0 ? "span" : _h, props = tslib_es6.__rest(_a, ["align", "children", "id", "isInline", "isMeasured", "size", "tone", "elementType"]);
+    var surface = React.useContext(Surface.Context).surface;
+    var Element = elementType;
+    return (React.createElement(Element, tslib_es6.__assign({ id: id, className: index.classNames((_b = {
+                "arc-Text": true
+            },
+            _b[suffixModifier.suffixModifier("arc-Text--align", align)] = align !== "left",
+            _b["arc-Text--inline"] = isInline,
+            _b["arc-Text--measured"] = isMeasured,
+            _b["arc-Text--size".concat(size && size.toUpperCase())] = size && size !== "m",
+            _b["arc-Text--".concat(tone)] = tone !== "default",
+            _b["arc-Text--onDarkSurface"] = surface === "dark",
+            _b)) }, filterAttrs.filterAttrs(props)), children));
+};
+
+exports.Text = Text;

package/lib/_shared/cjs/TextInput-BHzuoI7E.cjs

@@ -0,0 +1,163 @@
+'use strict';
+
+var tslib_es6 = require('./tslib.es6-CCZ3TN_7.cjs');
+var React = require('react');
+var index = require('./index-CTlXMLug.cjs');
+var filterAttrs = require('./filter-attrs-D19P2s1V.cjs');
+var FormControl = require('./FormControl-TtboqHRx.cjs');
+var Surface = require('./Surface-DIU5ciDT.cjs');
+var VisuallyHidden = require('./VisuallyHidden-CQg3cOVK.cjs');
+var Spinner = require('./Spinner-427lpnHI.cjs');
+var Icon = require('./Icon-Dk2XHa7V.cjs');
+var Tooltip = require('./Tooltip-CEb7YEP2.cjs');
+var ThemeIcon = require('./ThemeIcon-CwYN77IF.cjs');
+
+/**
+ * Infer the correct inputMode, pattern and type if specifying a `number` type.
+ */
+var useNumericInput = function (props) {
+    var type = props.type === "number" ? "text" : props.type;
+    var inputMode = props.inputMode;
+    if (!props.inputMode) {
+        if (props.type === "email") {
+            inputMode = "email";
+        }
+        else if (props.type === "number") {
+            inputMode = "numeric";
+        }
+        else if (props.type === "tel") {
+            inputMode = "tel";
+        }
+        else if (props.type === "url") {
+            inputMode = "url";
+        }
+    }
+    var pattern = props.pattern;
+    if (!props.pattern && props.type === "number") {
+        pattern = "[0-9]*";
+    }
+    return { inputMode: inputMode, pattern: pattern, type: type };
+};
+
+var InputIcon = function (_a) {
+    var _b;
+    var isButton = _a.isButton, isReadOnly = _a.isReadOnly, isDisabled = _a.isDisabled, _c = _a.size, size = _c === void 0 ? "m" : _c, tooltip = _a.tooltip, themeIcon = _a.themeIcon, icon = _a.icon;
+    var buttonIconSizeMap = {
+        s: 16,
+        m: 24,
+        l: 28,
+    };
+    // Static icons don't have padding
+    var iconSizeMap = {
+        s: 24,
+        m: 32,
+        l: 36,
+    };
+    var iconSize = isButton ? buttonIconSizeMap[size] : iconSizeMap[size];
+    var iconElement = icon && !themeIcon ? (React.createElement(Icon.Icon, { icon: icon, size: iconSize })) : themeIcon ? (React.createElement(ThemeIcon.ThemeIcon, { icon: themeIcon, size: iconSize })) : null;
+    if (!isButton) {
+        return React.createElement("div", { className: "arc-TextInput-iconSlot" }, iconElement);
+    }
+    var button = (React.createElement("button", { ref: isButton.ref, className: index.classNames({
+            "arc-TextInput-inputIcon": true,
+            "arc-TextInput-inputIcon--isReadOnly": isReadOnly,
+            "arc-TextInput-inputIcon--isDisabled": isDisabled,
+        }), disabled: isReadOnly || isDisabled, "aria-label": isButton.label, onFocus: isButton.onFocus, onClick: function (e) {
+            var _a;
+            e.preventDefault();
+            (_a = isButton.onClick) === null || _a === void 0 ? void 0 : _a.call(isButton);
+        } }, iconElement));
+    return tooltip && !isDisabled && !isReadOnly ? (React.createElement(Tooltip.Tooltip, { side: (_b = tooltip.side) !== null && _b !== void 0 ? _b : "bottom", title: tooltip.title, delayDuration: 500, asChild: true },
+        React.createElement("div", { style: { width: "fit-content", display: "flex" } }, button))) : (React.createElement("div", { style: { width: "fit-content", display: "flex" } }, button));
+};
+
+var TrailingSlot = function (_a) {
+    var _b;
+    var trailingSlot = _a.trailingSlot, showPassword = _a.showPassword, isPasswordVisible = _a.isPasswordVisible, onTogglePassword = _a.onTogglePassword, isLoading = _a.isLoading, clearButton = _a.clearButton, isDisabled = _a.isDisabled, isReadOnly = _a.isReadOnly, _c = _a.size, size = _c === void 0 ? "m" : _c;
+    var spinnerSizeMap = {
+        s: 16,
+        m: 24,
+        l: 24,
+    };
+    var spinnerSize = spinnerSizeMap[size];
+    return (React.createElement("span", { className: "arc-TextInput-trailingSlot" },
+        trailingSlot && !showPassword && !isLoading && !clearButton && (React.createElement(React.Fragment, null, trailingSlot)),
+        (clearButton === null || clearButton === void 0 ? void 0 : clearButton.onClick) && !showPassword && !isLoading && (React.createElement(InputIcon, { themeIcon: "textInputClear", isReadOnly: isReadOnly, isDisabled: isDisabled, tooltip: {
+                title: (_b = clearButton.tooltipLabel) !== null && _b !== void 0 ? _b : "Clear",
+                side: "bottom",
+            }, isButton: { onClick: clearButton.onClick, label: "Clear Input" }, size: size })),
+        showPassword && !isLoading && (React.createElement(React.Fragment, null,
+            React.createElement(InputIcon, { isDisabled: isDisabled, isReadOnly: isReadOnly, themeIcon: isPasswordVisible
+                    ? "textInputShowPassword"
+                    : "textInputHidePassword", tooltip: {
+                    title: isPasswordVisible ? "Hide password" : "Show password",
+                }, isButton: {
+                    onClick: function () {
+                        if (onTogglePassword) {
+                            onTogglePassword();
+                        }
+                    },
+                    label: isPasswordVisible ? "Hide password" : "Show password",
+                }, size: size }),
+            React.createElement(VisuallyHidden.VisuallyHidden, null,
+                React.createElement("div", { "aria-live": "polite" },
+                    React.createElement("p", null, isPasswordVisible
+                        ? "Your password is shown"
+                        : "Your password is hidden"))))),
+        React.createElement("div", { "aria-live": "polite" }, isLoading && !isDisabled && (React.createElement("div", { className: "arc-TextInput-spinner" },
+            React.createElement(Spinner.Spinner, { size: spinnerSize }),
+            React.createElement(VisuallyHidden.VisuallyHidden, null, "loading"))))));
+};
+
+/** Use `TextInput` as a single-line field that allows users to enter short text, such as names, email, search queries or passwords. */
+var TextInputComponent = React.forwardRef(function (_a, ref) {
+    var _b;
+    var _c = _a.defaultValue, defaultValue = _c === void 0 ? "" : _c, errorMessage = _a.errorMessage, helper = _a.helper, hideLabel = _a.hideLabel, id = _a.id, inputMode = _a.inputMode, _d = _a.isDisabled, isDisabled = _d === void 0 ? false : _d, _e = _a.isReadOnly, isReadOnly = _e === void 0 ? false : _e, _f = _a.isRequired, isRequired = _f === void 0 ? false : _f, label = _a.label, maxLength = _a.maxLength, minLength = _a.minLength, name = _a.name, onBlur = _a.onBlur, onFocus = _a.onFocus, onChange = _a.onChange, placeholder = _a.placeholder, onClickDisclosure = _a.onClickDisclosure, pattern = _a.pattern, _g = _a.type, type = _g === void 0 ? "text" : _g, _h = _a.showPassword, showPassword = _h === void 0 ? false : _h, value = _a.value, disclosureTitle = _a.disclosureTitle, disclosureText = _a.disclosureText, _j = _a.size, size = _j === void 0 ? "m" : _j, leadingSlot = _a.leadingSlot, trailingSlot = _a.trailingSlot, _k = _a.inputAlignment, inputAlignment = _k === void 0 ? "left" : _k, width = _a.width, autoComplete = _a.autoComplete, isLoading = _a.isLoading, isErrorAlert = _a.isErrorAlert, prefix = _a.prefix, suffix = _a.suffix, clearButton = _a.clearButton, props = tslib_es6.__rest(_a, ["defaultValue", "errorMessage", "helper", "hideLabel", "id", "inputMode", "isDisabled", "isReadOnly", "isRequired", "label", "maxLength", "minLength", "name", "onBlur", "onFocus", "onChange", "placeholder", "onClickDisclosure", "pattern", "type", "showPassword", "value", "disclosureTitle", "disclosureText", "size", "leadingSlot", "trailingSlot", "inputAlignment", "width", "autoComplete", "isLoading", "isErrorAlert", "prefix", "suffix", "clearButton"]);
+    var _l = React.useState(false), showPasswordToggle = _l[0], setShowPasswordToggle = _l[1];
+    var inferredInputProps = useNumericInput({
+        inputMode: inputMode,
+        pattern: pattern,
+        type: showPassword && showPasswordToggle ? "text" : type,
+    });
+    var surface = React.useContext(Surface.Context).surface;
+    // Although this is used within FormControlWrapper, it's deterministic so we can call it here too
+    var ariaDescribedby = FormControl.useAriaDescribedby({
+        id: id,
+        errorMessage: errorMessage,
+        helper: helper,
+        disclosureText: disclosureText,
+    }).ariaDescribedby;
+    return (React.createElement("div", tslib_es6.__assign({ className: index.classNames((_b = {
+                "arc-TextInput": true,
+                "arc-TextInput--withAdditionalControl": showPassword,
+                "arc-TextInput--alignRight": inputAlignment === "right",
+                "arc-TextInput--withPasswordToggle": showPassword,
+                "arc-TextInput--isDisabled": isDisabled,
+                "arc-TextInput--invalid": errorMessage,
+                "arc-TextInput--onDarkSurface": surface === "dark",
+                "arc-TextInput--withPrefix": leadingSlot || prefix,
+                "arc-TextInput--withSuffix": trailingSlot || suffix,
+                "arc-TextInput--withClearButton": clearButton
+            },
+            _b["arc-TextInput--size".concat(size && size.toUpperCase())] = size && size !== "m",
+            _b)) }, filterAttrs.filterAttrs(props)),
+        React.createElement(FormControl.FormControl, { errorMessage: errorMessage, helper: helper, htmlFor: id, isDisabled: isDisabled, label: label, hideLabel: hideLabel, labelSize: size, requirementStatus: isRequired ? "required" : "optional", disclosureTitle: disclosureTitle, disclosureText: disclosureText, onClickDisclosure: onClickDisclosure, isErrorAlert: isErrorAlert },
+            React.createElement("div", { className: "arc-TextInput-inputWrapper", style: { width: width, marginTop: hideLabel ? 0 : undefined } },
+                prefix && (React.createElement("span", { className: "arc-TextInput-prefix arc-TextInput-affixes", "aria-hidden": true }, prefix)),
+                leadingSlot && (React.createElement("span", { className: "arc-TextInput-leadingSlot" }, leadingSlot)),
+                React.createElement("input", tslib_es6.__assign({ placeholder: placeholder, "aria-describedby": ariaDescribedby, "aria-invalid": errorMessage ? "true" : "false", className: "arc-TextInput-input", defaultValue: typeof value !== "undefined" ? undefined : defaultValue, disabled: isDisabled, id: id, maxLength: maxLength, minLength: minLength, name: name, onChange: onChange, onBlur: onBlur, onFocus: onFocus, readOnly: isReadOnly, ref: ref, required: isRequired, value: typeof value !== "undefined" ? value : undefined, autoComplete: autoComplete }, inferredInputProps)),
+                (trailingSlot ||
+                    showPassword ||
+                    isLoading ||
+                    (clearButton === null || clearButton === void 0 ? void 0 : clearButton.onClick)) && (React.createElement(TrailingSlot, { showPassword: showPassword, isReadOnly: isReadOnly, isLoading: isLoading, clearButton: clearButton, trailingSlot: trailingSlot, isPasswordVisible: showPasswordToggle, onTogglePassword: function () { return setShowPasswordToggle(function (prev) { return !prev; }); }, size: size, isDisabled: isDisabled })),
+                suffix && (React.createElement("span", { className: "arc-TextInput-suffix arc-TextInput-affixes", "aria-hidden": true }, suffix))))));
+});
+/**
+ * Use `TextInput` to allow users to enter short form text.
+ */
+var TextInput = React.forwardRef(function (props, ref) { return React.createElement(TextInputComponent, tslib_es6.__assign({ ref: ref }, props)); });
+var TextInputWithPlaceHolder = React.forwardRef(function (props, ref) { return React.createElement(TextInputComponent, tslib_es6.__assign({ ref: ref }, props)); });
+
+exports.InputIcon = InputIcon;
+exports.TextInput = TextInput;
+exports.TextInputWithPlaceHolder = TextInputWithPlaceHolder;

package/lib/_shared/cjs/ThemeIcon-CwYN77IF.cjs

@@ -0,0 +1,25 @@
+'use strict';
+
+var tslib_es6 = require('./tslib.es6-CCZ3TN_7.cjs');
+var React = require('react');
+var index = require('./index-CTlXMLug.cjs');
+var suffixModifier = require('./suffix-modifier-DLUGR-yG.cjs');
+var filterAttrs = require('./filter-attrs-D19P2s1V.cjs');
+var Surface = require('./Surface-DIU5ciDT.cjs');
+
+/** Use `ThemeIcon` to display an icon that allows switching between theme-specific icons. */
+var ThemeIcon = function (_a) {
+    var _b;
+    var size = _a.size, icon = _a.icon, _c = _a.color, color = _c === void 0 ? "auto" : _c, props = tslib_es6.__rest(_a, ["size", "icon", "color"]);
+    var surface = React.useContext(Surface.Context).surface;
+    return (React.createElement("span", tslib_es6.__assign({ style: {
+            height: size,
+            width: size,
+        }, className: index.classNames("arc-ThemeIcon", "arc-ThemeIcon--".concat(icon), (_b = {
+                "arc-ThemeIcon--onDarkSurface": surface === "dark"
+            },
+            _b[suffixModifier.suffixModifier("arc-ThemeIcon--color", color)] = color !== "auto",
+            _b)) }, filterAttrs.filterAttrs(props))));
+};
+
+exports.ThemeIcon = ThemeIcon;