@arc-ui/components 11.5.0 → 11.7.0

package/dist/_shared/esm/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/esm/{Surface-bb100ef8.d.ts → Surface-dde51789.d.ts}

@@ -12,12 +12,13 @@ declare const Surface: FC<SurfaceProps>;
 declare const backgrounds: readonly ["black", "brand", "brand-flat", "dark", "darker", "coral", "turquoise", "light", "lighter", "white"];
 declare const backgroundsBT: readonly ["black", "brand", "brand-flat", "dark", "darker", "coral", "turquoise", "light", "lighter", "white"];
 type SurfacePadding = "8" | "12" | "16" | "24" | "32" | "48" | "64";
+type SurfaceBackgroundColor = "black" | "brand" | "brand-flat" | "dark" | "darker" | "coral" | "turquoise" | "light" | "lighter" | "white";
 interface SurfaceProps extends HTMLAttributes<HTMLElement> {
     /**
      * Background colour of the Surface. Contents will change colour to meet
      * accessibility requirements.
      */
-    background?: typeof backgrounds[number];
+    background?: SurfaceBackgroundColor;
     /**
      * Content to display on the Surface.
      */
@@ -47,4 +48,4 @@ interface SurfaceProps extends HTMLAttributes<HTMLElement> {
      */
     paddingVertical?: SurfacePadding;
 }
-export { Surface, backgrounds, backgroundsBT, SurfacePadding, SurfaceProps, Context as SurfaceContext };
+export { Surface, backgrounds, backgroundsBT, SurfacePadding, SurfaceBackgroundColor, SurfaceProps, Context as SurfaceContext };

package/dist/_shared/esm/{Surface-bb100ef8.js → Surface-dde51789.js}

@@ -20,7 +20,7 @@ var Surface = function (_a) {
         surface = "dark";
     }
     return (React__default.createElement(Provider, { value: { surface: surface } },
-        React__default.createElement("div", __assign({ className: classNames((_b = {
+        React__default.createElement("div", __assign({ "data-testid": "arc-surface", className: classNames((_b = {
                     "arc-Surface": true
                 },
                 _b["arc-Surface--".concat(background &&

package/dist/_shared/esm/{Text-00e9743b.js → Text-14deb70e.js}

@@ -2,7 +2,7 @@ import { _ as __rest, a as __assign, f as filterDataAttrs } from './filter-data-
 import { c as classNames } from './index-2ae58626.js';
 import React__default, { useContext } from 'react';
 import { s as suffixModifier } from './suffix-modifier-7e640670.js';
-import { C as Context } from './Surface-bb100ef8.js';
+import { C as Context } from './Surface-dde51789.js';
 
 /**
  * Use `Text` to display text.

package/dist/_shared/esm/TextInput-62bb7dee.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/esm/TextInput-62bb7dee.js

@@ -0,0 +1,72 @@
+import { _ as __rest, a as __assign, f as filterDataAttrs } from './filter-data-attrs-afdb7d32.js';
+import { c as classNames } from './index-2ae58626.js';
+import React__default, { forwardRef, useContext, useState } from 'react';
+import { u as useAriaDescribedby, F as FormControl } from './FormControl-2fa7aae5.js';
+import { C as Context } from './Surface-dde51789.js';
+import { V as VisuallyHidden } from './VisuallyHidden-b9eebf71.js';
+
+/**
+ * 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 = 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 = __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 = useContext(Context).surface;
+    var _j = 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 = useAriaDescribedby({
+        errorMessage: errorMessage,
+        id: id,
+        helper: helper,
+        disclosureText: disclosureText
+    }).ariaDescribedby;
+    return (React__default.createElement("div", __assign({ className: classNames({
+            "arc-TextInput": true,
+            "arc-TextInput--withPasswordToggle": showPassword,
+            "arc-TextInput--invalid": errorMessage,
+            "arc-TextInput--onDarkSurface": surface === "dark"
+        }) }, filterDataAttrs(props)),
+        React__default.createElement(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.createElement("div", { className: "arc-TextInput-inputWrapper" },
+                React__default.createElement("input", __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.createElement(React__default.Fragment, null,
+                    React__default.createElement("button", { className: "arc-TextInput-passwordToggle", onClick: function () { return setShowPasswordToggle(function (p) { return !p; }); }, type: "button" }, showPasswordToggle ? "Hide" : "Show"),
+                    React__default.createElement(VisuallyHidden, null,
+                        React__default.createElement("div", { "aria-live": "polite" },
+                            React__default.createElement("p", null, showPasswordToggle
+                                ? "Your password is shown"
+                                : "Your password is hidden")))))))));
+});
+
+export { TextInput as T };

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

@@ -0,0 +1,75 @@
+/// <reference types="react" />
+import React from "react";
+import { FC } from "react";
+import { FormControlProps } from "./FormControl-2fa7aae5";
+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/esm/UniversalHeader-1c5a886d.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/esm/UniversalHeader-1c5a886d.js

@@ -0,0 +1,29 @@
+import { _ as __rest, a as __assign, f as filterDataAttrs } from './filter-data-attrs-afdb7d32.js';
+import React__default, { useEffect } from 'react';
+import { S as Surface } from './Surface-dde51789.js';
+
+/**
+ * Use `UniversalHeader` to display a group-level page header.
+ */
+var UniversalHeader = function (_a) {
+    var children = _a.children, props = __rest(_a, ["children"]);
+    useEffect(function () {
+        React__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.createElement("nav", __assign({ className: "arc-UniversalHeader" }, filterDataAttrs(props)),
+        React__default.createElement(Surface, { background: "light" },
+            React__default.createElement("ul", { className: "arc-UniversalHeader-items" }, children))));
+};
+var UniversalHeaderItem = function (_a) {
+    var children = _a.children, href = _a.href, props = __rest(_a, ["children", "href"]);
+    return (React__default.createElement("li", __assign({}, filterDataAttrs(props)),
+        React__default.createElement("a", { className: "arc-UniversalHeader-link", href: href }, children)));
+};
+UniversalHeaderItem.displayName = "UniversalHeader.Item";
+UniversalHeader.Item = UniversalHeaderItem;
+
+export { UniversalHeader as U };