@arc-ui/components 11.4.2 → 11.6.0

package/dist/_shared/cjs/SubNavItem-a84d1bf4.d.ts

@@ -0,0 +1,48 @@
+import { FC, ReactNode } from "react";
+declare const SubNavItem: FC<SubNavItemProps>;
+interface SubNavItemProps {
+    /**
+     * Contents of the SubNavItem. Must be SiteHeader.ItemGroup or
+     * SiteHeader.Column components.
+     */
+    children?: ReactNode;
+    /**
+     * Should the SubNavItem be the default open item in a
+     * SiteHeader.NavItemWithSubNav? If not specified, the default open item will
+     * be set automatically.
+     */
+    isDefaultItem?: boolean;
+    /**
+     * Optionally shift the SubNavItem-link upwards (in "desktop" viewports only)
+     * to close off any empty space between items due to content size.
+     */
+    offsetXL?: "24" | "48";
+    /**
+     * Content to display in the SubNavItem panel promo area.
+     */
+    promo?: ReactNode;
+    /**
+     * A URL to link to when the SubNavItem is clicked or touched. Only applies if
+     * `children` are not present.
+     */
+    href?: string;
+    /**
+     * Optional subtitle text for the SubNavItem.
+     */
+    subTitle?: string;
+    /**
+     * Title text for the SubNavItem.
+     */
+    title: string;
+    /**
+     * Text to display in top-level link inside the SubNavItem panel. Only
+     * applies if both `children` are present and `href` is true. If not
+     * provided, top-level link text will be automatically generated from `title`.
+     */
+    viewAllTitle?: string;
+    /**
+     * On click handler.
+     */
+    onClick?: () => void;
+}
+export { SubNavItem, SubNavItemProps };

package/dist/_shared/cjs/{Surface-d6b8010e.js → Surface-6da0a78e.js}

@@ -1,7 +1,7 @@
 'use strict';
 
-var index = require('./index-78b35bc1.js');
-var index$1 = require('./index-45bfb67b.js');
+var filterDataAttrs = require('./filter-data-attrs-a30dcf5f.js');
+var index = require('./index-45bfb67b.js');
 var React = require('react');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
@@ -16,7 +16,7 @@ var Provider = Context.Provider;
  */
 var Surface = function (_a) {
     var _b;
-    var background = _a.background, children = _a.children, _c = _a.growVertically, growVertically = _c === void 0 ? false : _c, padding = _a.padding, paddingHorizontal = _a.paddingHorizontal, paddingVertical = _a.paddingVertical, props = index.__rest(_a, ["background", "children", "growVertically", "padding", "paddingHorizontal", "paddingVertical"]);
+    var background = _a.background, children = _a.children, _c = _a.growVertically, growVertically = _c === void 0 ? false : _c, padding = _a.padding, paddingHorizontal = _a.paddingHorizontal, paddingVertical = _a.paddingVertical, props = filterDataAttrs.__rest(_a, ["background", "children", "growVertically", "padding", "paddingHorizontal", "paddingVertical"]);
     var surface = "light";
     if (background === "black" ||
         background === "brand" ||
@@ -26,16 +26,16 @@ var Surface = function (_a) {
         surface = "dark";
     }
     return (React__default["default"].createElement(Provider, { value: { surface: surface } },
-        React__default["default"].createElement("div", index.__assign({ className: index$1.classNames((_b = {
+        React__default["default"].createElement("div", filterDataAttrs.__assign({ className: index.classNames((_b = {
                     "arc-Surface": true
                 },
                 _b["arc-Surface--".concat(background &&
-                    index.camelCase(background), "Background")] = background,
+                    filterDataAttrs.camelCase(background), "Background")] = background,
                 _b["arc-Surface--growVertically"] = growVertically,
                 _b["arc-Surface--padding".concat(padding)] = padding,
                 _b["arc-Surface--paddingHorizontal".concat(paddingHorizontal)] = paddingHorizontal,
                 _b["arc-Surface--paddingVertical".concat(paddingVertical)] = paddingVertical,
-                _b)) }, index.filterDataAttrs(props)), children)));
+                _b)) }, filterDataAttrs.filterDataAttrs(props)), children)));
 };
 var backgroundsShared = [
     "black",
@@ -49,8 +49,8 @@ var backgroundsShared = [
     "lighter",
     "white"
 ];
-var backgrounds = index.__spreadArray([], backgroundsShared, true);
-var backgroundsBT = index.__spreadArray([], backgroundsShared, true);
+var backgrounds = filterDataAttrs.__spreadArray([], backgroundsShared, true);
+var backgroundsBT = filterDataAttrs.__spreadArray([], backgroundsShared, true);
 
 exports.Context = Context;
 exports.Surface = Surface;

package/dist/_shared/cjs/{Text-1d3844be.js → Text-6f2827e6.js}

@@ -1,10 +1,10 @@
 'use strict';
 
-var index = require('./index-78b35bc1.js');
-var index$1 = require('./index-45bfb67b.js');
+var filterDataAttrs = require('./filter-data-attrs-a30dcf5f.js');
+var index = require('./index-45bfb67b.js');
 var React = require('react');
-var suffixModifier = require('./suffix-modifier-edf7851e.js');
-var Surface = require('./Surface-d6b8010e.js');
+var suffixModifier = require('./suffix-modifier-1ee2da04.js');
+var Surface = require('./Surface-6da0a78e.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -15,9 +15,9 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
  */
 var Text = function (_a) {
     var _b;
-    var _c = _a.align, align = _c === void 0 ? "left" : _c, children = _a.children, _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, props = index.__rest(_a, ["align", "children", "isInline", "isMeasured", "size", "tone"]);
+    var _c = _a.align, align = _c === void 0 ? "left" : _c, children = _a.children, _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, props = filterDataAttrs.__rest(_a, ["align", "children", "isInline", "isMeasured", "size", "tone"]);
     var surface = React.useContext(Surface.Context).surface;
-    return (React__default["default"].createElement("span", index.__assign({ className: index$1.classNames((_b = {
+    return (React__default["default"].createElement("span", filterDataAttrs.__assign({ className: index.classNames((_b = {
                 "arc-Text": true
             },
             _b[suffixModifier.suffixModifier("arc-Text--align", align)] = align !== "left",
@@ -26,7 +26,7 @@ var Text = function (_a) {
             _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)) }, index.filterDataAttrs(props)), children));
+            _b)) }, filterDataAttrs.filterDataAttrs(props)), children));
 };
 
 exports.Text = Text;

package/dist/_shared/cjs/TextInput-33314fc4.d.ts

@@ -0,0 +1,10 @@
+import { TextInputProps } from "./TextInput-7ed03a48";
+/**
+ * Infer the correct inputMode, pattern and type if specifying a `number` type.
+ */
+declare const useNumericInput: (props: Pick<TextInputProps, "inputMode" | "pattern" | "type">) => {
+    inputMode: "tel" | "url" | "email" | "numeric" | undefined;
+    pattern: string | undefined;
+    type: "text" | "tel" | "url" | "email" | "password" | undefined;
+};
+export { useNumericInput };

package/dist/_shared/cjs/TextInput-33314fc4.js

@@ -0,0 +1,78 @@
+'use strict';
+
+var filterDataAttrs = require('./filter-data-attrs-a30dcf5f.js');
+var index = require('./index-45bfb67b.js');
+var React = require('react');
+var FormControl = require('./FormControl-9aaddd54.js');
+var Surface = require('./Surface-6da0a78e.js');
+var VisuallyHidden = require('./VisuallyHidden-e2c8b291.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+/**
+ * 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 };
+};
+
+/**
+ * Use `TextInput` to allow custom user text entry with a keyboard.
+ */
+var TextInput = React.forwardRef(function (_a, ref) {
+    var _b = _a.defaultValue, defaultValue = _b === void 0 ? "" : _b, errorMessage = _a.errorMessage, helper = _a.helper, id = _a.id, inputMode = _a.inputMode, _c = _a.isDisabled, isDisabled = _c === void 0 ? false : _c, _d = _a.isReadOnly, isReadOnly = _d === void 0 ? false : _d, _e = _a.isRequired, isRequired = _e === void 0 ? false : _e, label = _a.label, _f = _a.labelSize, labelSize = _f === void 0 ? "l" : _f, maxLength = _a.maxLength, minLength = _a.minLength, name = _a.name, onBlur = _a.onBlur, onChange = _a.onChange, 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, props = filterDataAttrs.__rest(_a, ["defaultValue", "errorMessage", "helper", "id", "inputMode", "isDisabled", "isReadOnly", "isRequired", "label", "labelSize", "maxLength", "minLength", "name", "onBlur", "onChange", "onClickDisclosure", "pattern", "type", "showPassword", "value", "disclosureTitle", "disclosureText"]);
+    var surface = React.useContext(Surface.Context).surface;
+    var _j = React.useState(false), showPasswordToggle = _j[0], setShowPasswordToggle = _j[1];
+    var inferredInputProps = useNumericInput({
+        inputMode: inputMode,
+        pattern: pattern,
+        type: showPasswordToggle ? "text" : type
+    });
+    // Although this is used within FormControlWrapper, it's deterministic so we can call it here too
+    var ariaDescribedby = FormControl.useAriaDescribedby({
+        errorMessage: errorMessage,
+        id: id,
+        helper: helper,
+        disclosureText: disclosureText
+    }).ariaDescribedby;
+    return (React__default["default"].createElement("div", filterDataAttrs.__assign({ className: index.classNames({
+            "arc-TextInput": true,
+            "arc-TextInput--withPasswordToggle": showPassword,
+            "arc-TextInput--invalid": errorMessage,
+            "arc-TextInput--onDarkSurface": surface === "dark"
+        }) }, filterDataAttrs.filterDataAttrs(props)),
+        React__default["default"].createElement(FormControl.FormControl, { errorMessage: errorMessage, helper: helper, htmlFor: id, isDisabled: isDisabled, label: label, labelSize: labelSize, requirementStatus: isRequired ? "required" : "optional", disclosureTitle: disclosureTitle, disclosureText: disclosureText, onClickDisclosure: onClickDisclosure },
+            React__default["default"].createElement("div", { className: "arc-TextInput-inputWrapper" },
+                React__default["default"].createElement("input", filterDataAttrs.__assign({ "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, readOnly: isReadOnly, ref: ref, required: isRequired, value: typeof value !== "undefined" ? value : undefined }, inferredInputProps)),
+                showPassword && (React__default["default"].createElement(React__default["default"].Fragment, null,
+                    React__default["default"].createElement("button", { className: "arc-TextInput-passwordToggle", onClick: function () { return setShowPasswordToggle(function (p) { return !p; }); }, type: "button" }, showPasswordToggle ? "Hide" : "Show"),
+                    React__default["default"].createElement(VisuallyHidden.VisuallyHidden, null,
+                        React__default["default"].createElement("div", { "aria-live": "polite" },
+                            React__default["default"].createElement("p", null, showPasswordToggle
+                                ? "Your password is shown"
+                                : "Your password is hidden")))))))));
+});
+
+exports.TextInput = TextInput;

package/dist/_shared/cjs/TextInput-7ed03a48.d.ts

@@ -0,0 +1,75 @@
+/// <reference types="react" />
+import React from "react";
+import { FC } from "react";
+import { FormControlProps } from "./FormControl-9aaddd54";
+type EventType = React.ChangeEvent<HTMLInputElement>;
+/**
+ * Use `TextInput` to allow custom user text entry with a keyboard.
+ */
+declare const TextInput: FC<TextInputProps>;
+interface TextInputProps extends Omit<FormControlProps, "children" | "elementType" | "htmlFor" | "requirementStatus" | "helperUnderLabel" | "supplementaryInfo"> {
+    /**
+     * Uncontrolled default value of the TextInput. If the TextInput is controlled
+     * via `value`/`onChange`, `defaultValue` will be ignored.
+     */
+    defaultValue?: string;
+    /**
+     * ID for the TextInput.
+     */
+    id: string;
+    /**
+     * Mode for the input. If not defined, inferred by type.
+     */
+    inputMode?: "email" | "numeric" | "tel" | "url";
+    /**
+     * Should the control be disabled?
+     */
+    isDisabled?: boolean;
+    /**
+     * Should the control be read-only?
+     */
+    isReadOnly?: boolean;
+    /**
+     * Should the control be required?
+     */
+    isRequired?: boolean;
+    /**
+     * Maximum number of characters.
+     */
+    maxLength?: number;
+    /**
+     * Minimum number of characters.
+     */
+    minLength?: number;
+    /**
+     * Name of the input.
+     */
+    name?: string;
+    /**
+     * Function to call when the TextInput loses focus.
+     */
+    onBlur?: (e: EventType) => void;
+    /**
+     * Callback function commonly used to update the TextInput's controlled
+     * `value`, for example `e => setValue(e.target.value)`.
+     */
+    onChange?: (e: EventType) => void;
+    /**
+     * Validation regex pattern.
+     */
+    pattern?: string;
+    /**
+     * Enable button to toggle TextInput type from `Selected Type` to `Text`
+     */
+    showPassword?: boolean;
+    /**
+     * Type for the input. `number` will be changed to `text` and set the `numeric` inputMode.
+     */
+    type?: "email" | "number" | "password" | "tel" | "text" | "url";
+    /**
+     * Current value of the TextInput. Must be controlled via an
+     * `onChange` callback function. Otherwise, use `defaultValue` (or `isReadOnly`).
+     */
+    value?: string;
+}
+export { TextInput, TextInputProps };

package/dist/_shared/cjs/UniversalHeader-cc1d9e5a.d.ts

@@ -0,0 +1,26 @@
+import { FC, ReactNode } from "react";
+/**
+ * Use `UniversalHeader` to display a group-level page header.
+ */
+declare const UniversalHeader: FC<UniversalHeaderProps> & {
+    Item: typeof UniversalHeaderItem;
+};
+declare const UniversalHeaderItem: FC<UniversalHeaderItemProps>;
+interface UniversalHeaderItemProps {
+    /**
+     * Contents of the UniversalHeaderItem.
+     */
+    children: ReactNode;
+    /**
+     * A URL to link to when the Item is clicked or touched.
+     */
+    href: string;
+}
+interface UniversalHeaderProps {
+    /**
+     * Contents of the UniversalHeader. Must be
+     * UniversalHeader.Item components.
+     */
+    children: ReactNode;
+}
+export { UniversalHeader, UniversalHeaderItem, UniversalHeaderItemProps, UniversalHeaderProps };

package/dist/_shared/cjs/UniversalHeader-cc1d9e5a.js

@@ -0,0 +1,35 @@
+'use strict';
+
+var filterDataAttrs = require('./filter-data-attrs-a30dcf5f.js');
+var React = require('react');
+var Surface = require('./Surface-6da0a78e.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+/**
+ * Use `UniversalHeader` to display a group-level page header.
+ */
+var UniversalHeader = function (_a) {
+    var children = _a.children, props = filterDataAttrs.__rest(_a, ["children"]);
+    React.useEffect(function () {
+        React__default["default"].Children.map(children, function (item) {
+            if (item && item.type !== UniversalHeaderItem) {
+                throw new Error("Illegal child passed to <UniversalHeader />. Ensure to only use <UniversalHeader.Item />.");
+            }
+        });
+    }, [children]);
+    return (React__default["default"].createElement("nav", filterDataAttrs.__assign({ className: "arc-UniversalHeader" }, filterDataAttrs.filterDataAttrs(props)),
+        React__default["default"].createElement(Surface.Surface, { background: "light" },
+            React__default["default"].createElement("ul", { className: "arc-UniversalHeader-items" }, children))));
+};
+var UniversalHeaderItem = function (_a) {
+    var children = _a.children, href = _a.href, props = filterDataAttrs.__rest(_a, ["children", "href"]);
+    return (React__default["default"].createElement("li", filterDataAttrs.__assign({}, filterDataAttrs.filterDataAttrs(props)),
+        React__default["default"].createElement("a", { className: "arc-UniversalHeader-link", href: href }, children)));
+};
+UniversalHeaderItem.displayName = "UniversalHeader.Item";
+UniversalHeader.Item = UniversalHeaderItem;
+
+exports.UniversalHeader = UniversalHeader;

package/dist/_shared/cjs/{VerticalSpace-7aed88ab.js → VerticalSpace-86f697e7.js}

@@ -1,7 +1,7 @@
 'use strict';
 
-var index = require('./index-78b35bc1.js');
-var index$1 = require('./index-45bfb67b.js');
+var filterDataAttrs = require('./filter-data-attrs-a30dcf5f.js');
+var index = require('./index-45bfb67b.js');
 var React = require('react');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
@@ -13,8 +13,8 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
  */
 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, sizeS = _a.sizeS, sizeM = _a.sizeM, sizeL = _a.sizeL, sizeXL = _a.sizeXL, props = index.__rest(_a, ["isDebugVisible", "size", "sizeS", "sizeM", "sizeL", "sizeXL"]);
-    return (React__default["default"].createElement("div", index.__assign({ className: index$1.classNames((_b = {
+    var _c = _a.isDebugVisible, isDebugVisible = _c === void 0 ? false : _c, _d = _a.size, size = _d === void 0 ? "24" : _d, sizeS = _a.sizeS, sizeM = _a.sizeM, sizeL = _a.sizeL, sizeXL = _a.sizeXL, props = filterDataAttrs.__rest(_a, ["isDebugVisible", "size", "sizeS", "sizeM", "sizeL", "sizeXL"]);
+    return (React__default["default"].createElement("div", filterDataAttrs.__assign({ className: index.classNames((_b = {
                 "arc-VerticalSpace": true
             },
             _b["arc-VerticalSpace--size".concat(size)] = size,
@@ -23,7 +23,7 @@ var VerticalSpace = function (_a) {
             _b["arc-VerticalSpace--sizeL".concat(sizeL)] = sizeL && sizeL,
             _b["arc-VerticalSpace--sizeXL".concat(sizeXL)] = sizeXL && sizeXL,
             _b["arc-VerticalSpace--debugVisible"] = isDebugVisible,
-            _b)) }, index.filterDataAttrs(props))));
+            _b)) }, filterDataAttrs.filterDataAttrs(props))));
 };
 
 exports.VerticalSpace = VerticalSpace;