@doist/reactist 25.1.1 → 26.0.0

package/lib/modal/modal-stories-components.d.ts

@@ -30,7 +30,7 @@ declare namespace ModalButton {
 type WithOptionals<Props, Keys extends keyof Props> = Omit<Props, Keys> & Partial<Pick<Props, Keys>>;
 declare function Modal(props: WithOptionals<ModalProps, 'isOpen' | 'onDismiss' | 'width' | 'height'>): React.JSX.Element;
 declare function ModalHeader(props: WithOptionals<ModalHeaderProps, 'withDivider' | 'button'>): React.JSX.Element;
-declare const ModalBody: typeof ModalComponents.ModalBody;
+declare const ModalBody: React.ForwardRefExoticComponent<Omit<ModalComponents.ModalBodyProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
 declare function ModalFooter(props: WithOptionals<ModalFooterProps, 'withDivider'>): React.JSX.Element;
 declare function ModalActions(props: WithOptionals<ModalFooterProps, 'withDivider'>): React.JSX.Element;
 /**

package/lib/modal/modal.d.ts

@@ -143,7 +143,7 @@ export interface ModalBodyProps extends DivProps, ObfuscatedClassName {
  * Renders the body of a modal.
  *
  * Convenient to use alongside ModalHeader and/or ModalFooter as needed. It ensures, among other
- * things, that the contet of the modal body expands or contracts depending on the modal height
+ * things, that the content of the modal body expands or contracts depending on the modal height
  * setting or the size of the content. The body content also automatically scrolls when it's too
  * large to fit the available space.
  *
@@ -151,7 +151,7 @@ export interface ModalBodyProps extends DivProps, ObfuscatedClassName {
  * @see ModalHeader
  * @see ModalFooter
  */
-export declare function ModalBody({ exceptionallySetClassName, children, ...props }: ModalBodyProps): React.JSX.Element;
+export declare const ModalBody: React.ForwardRefExoticComponent<Omit<ModalBodyProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
 export interface ModalFooterProps extends DivProps, ObfuscatedClassName {
     /**
      * The contant of the modal footer.

package/lib/modal/modal.js

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("../_virtual/_rollupPluginBabelHelpers.js"),t=require("react"),a=require("classnames"),n=require("react-focus-lock"),l=require("aria-hidden"),r=require("@ariakit/react"),o=require("../icons/close-icon.js"),i=require("../columns/columns.js"),u=require("../inline/inline.js"),c=require("../divider/divider.js"),s=require("../box/box.js"),d=require("../button/button.js"),m=require("./modal.module.css.js");function p(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}function f(e){if(e&&e.__esModule)return e;var t=Object.create(null);return e&&Object.keys(e).forEach((function(a){if("default"!==a){var n=Object.getOwnPropertyDescriptor(e,a);Object.defineProperty(t,a,n.get?n:{enumerable:!0,get:function(){return e[a]}})}})),t.default=e,t}var h=f(t),b=p(a),x=p(n);const g=["isOpen","onDismiss","height","width","exceptionallySetClassName","exceptionallySetOverlayClassName","autoFocus","hideOnEscape","hideOnInteractOutside","children","portalElement","onKeyDown","className"],E=["children","button","withDivider","exceptionallySetClassName"],v=["exceptionallySetClassName","children"],y=["exceptionallySetClassName","withDivider"],j=["children"],C=h.createContext({onDismiss:void 0,height:"fitContent"});function S(e){return!(e.ownerDocument===document&&"iframe"===e.tagName.toLowerCase())}function O(t){const{onDismiss:a}=h.useContext(C),[n,l]=h.useState(!1),[r,i]=h.useState(!1);return h.useEffect((function(){r?l(!0):i(!0)}),[r]),h.createElement(d.IconButton,e.objectSpread2(e.objectSpread2({},t),{},{variant:"quaternary",onClick:a,icon:h.createElement(o.CloseIcon,null),tabIndex:n?0:-1}))}function w(t){let{exceptionallySetClassName:a,withDivider:n=!1}=t,l=e.objectWithoutProperties(t,y);return h.createElement(h.Fragment,null,n?h.createElement(c.Divider,null):null,h.createElement(s.Box,e.objectSpread2(e.objectSpread2({as:"footer"},l),{},{className:a,padding:"large"})))}exports.Modal=function(t){let{isOpen:a,onDismiss:n,height:o="fitContent",width:i="medium",exceptionallySetClassName:u,exceptionallySetOverlayClassName:c,autoFocus:d=!0,hideOnEscape:p=!0,hideOnInteractOutside:f=!0,children:E,portalElement:v,onKeyDown:y}=t,j=e.objectWithoutProperties(t,g);const O=h.useCallback(e=>{e||null==n||n()},[n]),w=r.useDialogStore({open:a,setOpen:O}),D=h.useMemo(()=>({onDismiss:n,height:o}),[n,o]),N=h.useRef(null),P=h.useRef(null),q=h.useRef(null),B=h.useCallback(e=>{var t,a;null!=(t=P.current)&&t.contains(e.target)||null==(a=q.current)||!a.contains(e.target)||(e.stopPropagation(),null==n||n())},[n]);h.useLayoutEffect((function(){if(a&&N.current)return l.hideOthers(N.current)}),[a]);const F=h.useCallback((function(e){p&&null!=n&&"Escape"===e.key&&!e.defaultPrevented&&(e.stopPropagation(),n()),null==y||y(e)}),[n,p,y]);return a?h.createElement(r.Portal,{portalRef:N,portalElement:v},h.createElement(s.Box,{"data-testid":"modal-overlay","data-overlay":!0,className:b.default(m.default.overlay,m.default[o],m.default[i],c),onPointerDown:f?B:void 0,ref:q},h.createElement(x.default,{autoFocus:d,whiteList:S,returnFocus:!0,crossFrame:!1},h.createElement(r.Dialog,e.objectSpread2(e.objectSpread2({},j),{},{ref:P,render:h.createElement(s.Box,{borderRadius:"full",background:"default",display:"flex",flexDirection:"column",overflow:"hidden",height:"expand"===o?"full":void 0,flexGrow:"expand"===o?1:0}),className:b.default(u,m.default.container),store:w,preventBodyScroll:!0,modal:!1,autoFocus:!1,autoFocusOnShow:!1,autoFocusOnHide:!1,portal:!1,backdrop:!1,hideOnInteractOutside:!1,hideOnEscape:!1,onKeyDown:F}),h.createElement(C.Provider,{value:D},E))))):null},exports.ModalActions=function(t){let{children:a}=t,n=e.objectWithoutProperties(t,j);return h.createElement(w,e.objectSpread2({},n),h.createElement(u.Inline,{align:"right",space:"large"},a))},exports.ModalBody=function(t){let{exceptionallySetClassName:a,children:n}=t,l=e.objectWithoutProperties(t,v);const{height:r}=h.useContext(C);return h.createElement(s.Box,e.objectSpread2(e.objectSpread2({},l),{},{className:a,flexGrow:"expand"===r?1:0,height:"expand"===r?"full":void 0,overflow:"auto"}),h.createElement(s.Box,{padding:"large",paddingBottom:"xxlarge"},n))},exports.ModalCloseButton=O,exports.ModalFooter=w,exports.ModalHeader=function(t){let{children:a,button:n=!0,withDivider:l=!1,exceptionallySetClassName:r}=t,o=e.objectWithoutProperties(t,E);return h.createElement(h.Fragment,null,h.createElement(s.Box,e.objectSpread2(e.objectSpread2({},o),{},{as:"header",paddingLeft:"large",paddingRight:!1===n||null===n?"large":"small",paddingY:"small",className:r}),h.createElement(i.Columns,{space:"large",alignY:"center"},h.createElement(i.Column,{width:"auto"},a),!1===n||null===n?h.createElement("div",{className:m.default.headerContent}):h.createElement(i.Column,{width:"content",exceptionallySetClassName:m.default.buttonContainer,"data-testid":"button-container"},"boolean"==typeof n?h.createElement(O,{"aria-label":"Close modal",autoFocus:!1}):n))),l?h.createElement(c.Divider,null):null)};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("../_virtual/_rollupPluginBabelHelpers.js"),t=require("react"),a=require("classnames"),n=require("react-focus-lock"),r=require("aria-hidden"),l=require("@ariakit/react"),o=require("../icons/close-icon.js"),i=require("../columns/columns.js"),c=require("../inline/inline.js"),u=require("../divider/divider.js"),s=require("../box/box.js"),d=require("../button/button.js"),m=require("./modal.module.css.js");function p(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}function f(e){if(e&&e.__esModule)return e;var t=Object.create(null);return e&&Object.keys(e).forEach((function(a){if("default"!==a){var n=Object.getOwnPropertyDescriptor(e,a);Object.defineProperty(t,a,n.get?n:{enumerable:!0,get:function(){return e[a]}})}})),t.default=e,t}var h=f(t),b=p(a),x=p(n);const g=["isOpen","onDismiss","height","width","exceptionallySetClassName","exceptionallySetOverlayClassName","autoFocus","hideOnEscape","hideOnInteractOutside","children","portalElement","onKeyDown","className"],E=["children","button","withDivider","exceptionallySetClassName"],v=["exceptionallySetClassName","children"],y=["exceptionallySetClassName","withDivider"],j=["children"],C=h.createContext({onDismiss:void 0,height:"fitContent"});function S(e){return!(e.ownerDocument===document&&"iframe"===e.tagName.toLowerCase())}function O(t){const{onDismiss:a}=h.useContext(C),[n,r]=h.useState(!1),[l,i]=h.useState(!1);return h.useEffect((function(){l?r(!0):i(!0)}),[l]),h.createElement(d.IconButton,e.objectSpread2(e.objectSpread2({},t),{},{variant:"quaternary",onClick:a,icon:h.createElement(o.CloseIcon,null),tabIndex:n?0:-1}))}const w=t.forwardRef((function(t,a){let{exceptionallySetClassName:n,children:r}=t,l=e.objectWithoutProperties(t,v);const{height:o}=h.useContext(C);return h.createElement(s.Box,e.objectSpread2(e.objectSpread2({},l),{},{ref:a,className:n,flexGrow:"expand"===o?1:0,height:"expand"===o?"full":void 0,overflow:"auto"}),h.createElement(s.Box,{padding:"large",paddingBottom:"xxlarge"},r))}));function D(t){let{exceptionallySetClassName:a,withDivider:n=!1}=t,r=e.objectWithoutProperties(t,y);return h.createElement(h.Fragment,null,n?h.createElement(u.Divider,null):null,h.createElement(s.Box,e.objectSpread2(e.objectSpread2({as:"footer"},r),{},{className:a,padding:"large"})))}exports.Modal=function(t){let{isOpen:a,onDismiss:n,height:o="fitContent",width:i="medium",exceptionallySetClassName:c,exceptionallySetOverlayClassName:u,autoFocus:d=!0,hideOnEscape:p=!0,hideOnInteractOutside:f=!0,children:E,portalElement:v,onKeyDown:y}=t,j=e.objectWithoutProperties(t,g);const O=h.useCallback(e=>{e||null==n||n()},[n]),w=l.useDialogStore({open:a,setOpen:O}),D=h.useMemo(()=>({onDismiss:n,height:o}),[n,o]),N=h.useRef(null),P=h.useRef(null),q=h.useRef(null),B=h.useCallback(e=>{var t,a;null!=(t=P.current)&&t.contains(e.target)||null==(a=q.current)||!a.contains(e.target)||(e.stopPropagation(),null==n||n())},[n]);h.useLayoutEffect((function(){if(a&&N.current)return r.hideOthers(N.current)}),[a]);const F=h.useCallback((function(e){p&&null!=n&&"Escape"===e.key&&!e.defaultPrevented&&(e.stopPropagation(),n()),null==y||y(e)}),[n,p,y]);return a?h.createElement(l.Portal,{portalRef:N,portalElement:v},h.createElement(s.Box,{"data-testid":"modal-overlay","data-overlay":!0,className:b.default(m.default.overlay,m.default[o],m.default[i],u),onPointerDown:f?B:void 0,ref:q},h.createElement(x.default,{autoFocus:d,whiteList:S,returnFocus:!0,crossFrame:!1},h.createElement(l.Dialog,e.objectSpread2(e.objectSpread2({},j),{},{ref:P,render:h.createElement(s.Box,{borderRadius:"full",background:"default",display:"flex",flexDirection:"column",overflow:"hidden",height:"expand"===o?"full":void 0,flexGrow:"expand"===o?1:0}),className:b.default(c,m.default.container),store:w,preventBodyScroll:!0,modal:!1,autoFocus:!1,autoFocusOnShow:!1,autoFocusOnHide:!1,portal:!1,backdrop:!1,hideOnInteractOutside:!1,hideOnEscape:!1,onKeyDown:F}),h.createElement(C.Provider,{value:D},E))))):null},exports.ModalActions=function(t){let{children:a}=t,n=e.objectWithoutProperties(t,j);return h.createElement(D,e.objectSpread2({},n),h.createElement(c.Inline,{align:"right",space:"large"},a))},exports.ModalBody=w,exports.ModalCloseButton=O,exports.ModalFooter=D,exports.ModalHeader=function(t){let{children:a,button:n=!0,withDivider:r=!1,exceptionallySetClassName:l}=t,o=e.objectWithoutProperties(t,E);return h.createElement(h.Fragment,null,h.createElement(s.Box,e.objectSpread2(e.objectSpread2({},o),{},{as:"header",paddingLeft:"large",paddingRight:!1===n||null===n?"large":"small",paddingY:"small",className:l}),h.createElement(i.Columns,{space:"large",alignY:"center"},h.createElement(i.Column,{width:"auto"},a),!1===n||null===n?h.createElement("div",{className:m.default.headerContent}):h.createElement(i.Column,{width:"content",exceptionallySetClassName:m.default.buttonContainer,"data-testid":"button-container"},"boolean"==typeof n?h.createElement(O,{"aria-label":"Close modal",autoFocus:!1}):n))),r?h.createElement(u.Divider,null):null)};
 //# sourceMappingURL=modal.js.map

package/lib/modal/modal.js.map

@@ -1 +1 @@
-{"version":3,"file":"modal.js","sources":["../../src/modal/modal.tsx"],"sourcesContent":["import * as React from 'react'\nimport classNames from 'classnames'\nimport FocusLock from 'react-focus-lock'\nimport { hideOthers } from 'aria-hidden'\n\nimport { Dialog, DialogOptions, useDialogStore, Portal, PortalOptions } from '@ariakit/react'\n\nimport { CloseIcon } from '../icons/close-icon'\nimport { Column, Columns } from '../columns'\nimport { Inline } from '../inline'\nimport { Divider } from '../divider'\nimport { Box } from '../box'\nimport { IconButtonProps, IconButton } from '../button'\n\nimport styles from './modal.module.css'\nimport type { ObfuscatedClassName } from '../utils/common-types'\n\ntype ModalWidth = 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'full'\ntype ModalHeightMode = 'expand' | 'fitContent'\n\n//\n// ModalContext\n//\n\ntype ModalContextValue = {\n    onDismiss?(this: void): void\n    height: ModalHeightMode\n}\n\nconst ModalContext = React.createContext<ModalContextValue>({\n    onDismiss: undefined,\n    height: 'fitContent',\n})\n\n//\n// Modal container\n//\n\ntype DivProps = Omit<\n    React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLDivElement>, HTMLDivElement>,\n    'className' | 'children' | `aria-label` | `aria-labelledby`\n>\n\nexport interface ModalProps extends DivProps, ObfuscatedClassName {\n    /**\n     * The content of the modal.\n     */\n    children: React.ReactNode\n\n    /**\n     * Whether the modal is open and visible or not.\n     */\n    isOpen: boolean\n\n    /**\n     * Called when the user triggers closing the modal.\n     */\n    onDismiss?(): void\n\n    /**\n     * A descriptive setting for how wide the modal should aim to be, depending on how much space\n     * it has on screen.\n     * @default 'medium'\n     */\n    width?: ModalWidth\n\n    /**\n     * A descriptive setting for how tall the modal should aim to be.\n     *\n     * - 'expand': the modal aims to fill most of the available screen height, leaving only a small\n     *   padding above and below.\n     * - 'fitContent': the modal shrinks to the smallest size that allow it to fit its content.\n     *\n     * In either case, if content does not fit, the content of the main body is set to scroll\n     * (provided you use `ModalBody`) so that the modal never has to strech vertically beyond the\n     * viewport boundaries.\n     *\n     * If you do not use `ModalBody`, the modal still prevents overflow, and you are in charge of\n     * the inner layout to ensure scroll, or whatever other strategy you may want.\n     */\n    height?: ModalHeightMode\n\n    /**\n     * Whether to set or not the focus initially to the first focusable element inside the modal.\n     */\n    autoFocus?: boolean\n\n    /**\n     * Controls if the modal is dismissed when pressing \"Escape\".\n     */\n    hideOnEscape?: DialogOptions['hideOnEscape']\n\n    /**\n     * Controls if the modal is dismissed when clicking outside the modal body, on the overlay.\n     */\n    hideOnInteractOutside?: DialogOptions['hideOnInteractOutside']\n\n    /**\n     * An escape hatch in case you need to provide a custom class name to the overlay element.\n     */\n    exceptionallySetOverlayClassName?: string\n\n    /**\n     * Defines a string value that labels the current modal for assistive technologies.\n     */\n    'aria-label'?: string\n\n    /**\n     * Identifies the element (or elements) that labels the current modal for assistive technologies.\n     */\n    'aria-labelledby'?: string\n\n    /**\n     * An HTML element or a memoized callback function that returns an HTML element to be used as\n     * the portal element. By default, the portal element will be a `div` element appended to the\n     * `document.body`.\n     *\n     * @default HTMLDivElement\n     *\n     * @example\n     * const [portal, setPortal] = useState(null);\n     * <Portal portalElement={portal} />;\n     * <div ref={setPortal} />;\n     *\n     * @example\n     * const getPortalElement = useCallback(() => {\n     *   const div = document.createElement(\"div\");\n     *   const portalRoot = document.getElementById(\"portal-root\");\n     *   portalRoot.appendChild(div);\n     *   return div;\n     * }, []);\n     * <Portal portalElement={getPortalElement} />;\n     */\n    portalElement?: PortalOptions['portalElement']\n}\n\nfunction isNotInternalFrame(element: HTMLElement) {\n    return !(element.ownerDocument === document && element.tagName.toLowerCase() === 'iframe')\n}\n\n/**\n * Renders a modal that sits on top of the rest of the content in the entire page.\n *\n * Follows the WAI-ARIA Dialog (Modal) Pattern.\n *\n * @see ModalHeader\n * @see ModalFooter\n * @see ModalBody\n */\nexport function Modal({\n    isOpen,\n    onDismiss,\n    height = 'fitContent',\n    width = 'medium',\n    exceptionallySetClassName,\n    exceptionallySetOverlayClassName,\n    autoFocus = true,\n    hideOnEscape = true,\n    hideOnInteractOutside = true,\n    children,\n    portalElement,\n    onKeyDown,\n    // @ts-expect-error we want to make sure to not pass it to the Dialog component\n    className,\n    ...props\n}: ModalProps) {\n    const setOpen = React.useCallback(\n        (visible: boolean) => {\n            if (!visible) {\n                onDismiss?.()\n            }\n        },\n        [onDismiss],\n    )\n    const store = useDialogStore({ open: isOpen, setOpen })\n\n    const contextValue: ModalContextValue = React.useMemo(() => ({ onDismiss, height }), [\n        onDismiss,\n        height,\n    ])\n\n    const portalRef = React.useRef<HTMLElement | null>(null)\n    const dialogRef = React.useRef<HTMLDivElement | null>(null)\n    const backdropRef = React.useRef<HTMLDivElement | null>(null)\n    const handleBackdropClick = React.useCallback(\n        (event: React.MouseEvent) => {\n            if (\n                // The focus lock element takes up the same space as the backdrop and is where the event bubbles up from,\n                // so instead of checking the backdrop as the event target, we need to make sure it's just above the dialog\n                !dialogRef.current?.contains(event.target as Node) &&\n                // Events fired from other portals will bubble up to the backdrop, even if it isn't a child in the DOM\n                backdropRef.current?.contains(event.target as Node)\n            ) {\n                event.stopPropagation()\n                onDismiss?.()\n            }\n        },\n        [onDismiss],\n    )\n\n    React.useLayoutEffect(\n        function disableAccessibilityTreeOutside() {\n            if (!isOpen || !portalRef.current) {\n                return\n            }\n\n            return hideOthers(portalRef.current)\n        },\n        [isOpen],\n    )\n\n    const handleKeyDown = React.useCallback(\n        function handleKeyDown(event: React.KeyboardEvent<HTMLDivElement>) {\n            if (\n                hideOnEscape &&\n                onDismiss != null &&\n                event.key === 'Escape' &&\n                !event.defaultPrevented\n            ) {\n                event.stopPropagation()\n                onDismiss()\n            }\n            onKeyDown?.(event)\n        },\n        [onDismiss, hideOnEscape, onKeyDown],\n    )\n\n    if (!isOpen) {\n        return null\n    }\n\n    return (\n        <Portal portalRef={portalRef} portalElement={portalElement}>\n            <Box\n                data-testid=\"modal-overlay\"\n                data-overlay\n                className={classNames(\n                    styles.overlay,\n                    styles[height],\n                    styles[width],\n                    exceptionallySetOverlayClassName,\n                )}\n                /**\n                 * We're using `onPointerDown` instead of `onClick` to prevent the modal from\n                 * closing when the click starts inside the modal and ends on the backdrop.\n                 */\n                onPointerDown={hideOnInteractOutside ? handleBackdropClick : undefined}\n                ref={backdropRef}\n            >\n                <FocusLock\n                    autoFocus={autoFocus}\n                    whiteList={isNotInternalFrame}\n                    returnFocus={true}\n                    crossFrame={false}\n                >\n                    <Dialog\n                        {...props}\n                        ref={dialogRef}\n                        render={\n                            <Box\n                                borderRadius=\"full\"\n                                background=\"default\"\n                                display=\"flex\"\n                                flexDirection=\"column\"\n                                overflow=\"hidden\"\n                                height={height === 'expand' ? 'full' : undefined}\n                                flexGrow={height === 'expand' ? 1 : 0}\n                            />\n                        }\n                        className={classNames(exceptionallySetClassName, styles.container)}\n                        store={store}\n                        preventBodyScroll\n                        // Disable focus lock as we set up our own using ReactFocusLock\n                        modal={false}\n                        autoFocus={false}\n                        autoFocusOnShow={false}\n                        autoFocusOnHide={false}\n                        // Disable portal and backdrop as we control their markup\n                        portal={false}\n                        backdrop={false}\n                        hideOnInteractOutside={false}\n                        hideOnEscape={false}\n                        onKeyDown={handleKeyDown}\n                    >\n                        <ModalContext.Provider value={contextValue}>\n                            {children}\n                        </ModalContext.Provider>\n                    </Dialog>\n                </FocusLock>\n            </Box>\n        </Portal>\n    )\n}\n\n//\n// ModalCloseButton\n//\n\nexport interface ModalCloseButtonProps\n    extends Omit<\n        IconButtonProps,\n        'type' | 'variant' | 'icon' | 'disabled' | 'loading' | 'tabIndex' | 'ref'\n    > {\n    /**\n     * The descriptive label of the button.\n     */\n    'aria-label': string\n}\n\n/**\n * The close button rendered by ModalHeader. Provided independently so that consumers can customize\n * the button's label.\n *\n * @see ModalHeader\n */\nexport function ModalCloseButton(props: ModalCloseButtonProps) {\n    const { onDismiss } = React.useContext(ModalContext)\n    const [includeInTabOrder, setIncludeInTabOrder] = React.useState(false)\n    const [isMounted, setIsMounted] = React.useState(false)\n\n    React.useEffect(\n        function skipAutoFocus() {\n            if (isMounted) {\n                setIncludeInTabOrder(true)\n            } else {\n                setIsMounted(true)\n            }\n        },\n        [isMounted],\n    )\n\n    return (\n        <IconButton\n            {...props}\n            variant=\"quaternary\"\n            onClick={onDismiss}\n            icon={<CloseIcon />}\n            tabIndex={includeInTabOrder ? 0 : -1}\n        />\n    )\n}\n\n//\n// ModalHeader\n//\n\nexport interface ModalHeaderProps extends DivProps, ObfuscatedClassName {\n    /**\n     * The content of the header.\n     */\n    children: React.ReactNode\n\n    /**\n     * Allows to provide a custom button element, or to omit the close button if set to false.\n     * @see ModalCloseButton\n     */\n    button?: React.ReactNode | boolean\n\n    /**\n     * Whether to render a divider line below the header.\n     * @default false\n     */\n    withDivider?: boolean\n}\n\n/**\n * Renders a standard modal header area with an optional close button.\n *\n * @see Modal\n * @see ModalFooter\n * @see ModalBody\n */\nexport function ModalHeader({\n    children,\n    button = true,\n    withDivider = false,\n    exceptionallySetClassName,\n    ...props\n}: ModalHeaderProps) {\n    return (\n        <>\n            <Box\n                {...props}\n                as=\"header\"\n                paddingLeft=\"large\"\n                paddingRight={button === false || button === null ? 'large' : 'small'}\n                paddingY=\"small\"\n                className={exceptionallySetClassName}\n            >\n                <Columns space=\"large\" alignY=\"center\">\n                    <Column width=\"auto\">{children}</Column>\n                    {button === false || button === null ? (\n                        <div className={styles.headerContent} />\n                    ) : (\n                        <Column\n                            width=\"content\"\n                            exceptionallySetClassName={styles.buttonContainer}\n                            data-testid=\"button-container\"\n                        >\n                            {typeof button === 'boolean' ? (\n                                <ModalCloseButton aria-label=\"Close modal\" autoFocus={false} />\n                            ) : (\n                                button\n                            )}\n                        </Column>\n                    )}\n                </Columns>\n            </Box>\n            {withDivider ? <Divider /> : null}\n        </>\n    )\n}\n\n//\n// ModalBody\n//\n\nexport interface ModalBodyProps extends DivProps, ObfuscatedClassName {\n    /**\n     * The content of the modal body.\n     */\n    children: React.ReactNode\n}\n\n/**\n * Renders the body of a modal.\n *\n * Convenient to use alongside ModalHeader and/or ModalFooter as needed. It ensures, among other\n * things, that the contet of the modal body expands or contracts depending on the modal height\n * setting or the size of the content. The body content also automatically scrolls when it's too\n * large to fit the available space.\n *\n * @see Modal\n * @see ModalHeader\n * @see ModalFooter\n */\nexport function ModalBody({ exceptionallySetClassName, children, ...props }: ModalBodyProps) {\n    const { height } = React.useContext(ModalContext)\n    return (\n        <Box\n            {...props}\n            className={exceptionallySetClassName}\n            flexGrow={height === 'expand' ? 1 : 0}\n            height={height === 'expand' ? 'full' : undefined}\n            overflow=\"auto\"\n        >\n            <Box padding=\"large\" paddingBottom=\"xxlarge\">\n                {children}\n            </Box>\n        </Box>\n    )\n}\n\n//\n// ModalFooter\n//\n\nexport interface ModalFooterProps extends DivProps, ObfuscatedClassName {\n    /**\n     * The contant of the modal footer.\n     */\n    children: React.ReactNode\n    /**\n     * Whether to render a divider line below the footer.\n     * @default false\n     */\n    withDivider?: boolean\n}\n\n/**\n * Renders a standard modal footer area.\n *\n * @see Modal\n * @see ModalHeader\n * @see ModalBody\n */\nexport function ModalFooter({\n    exceptionallySetClassName,\n    withDivider = false,\n    ...props\n}: ModalFooterProps) {\n    return (\n        <>\n            {withDivider ? <Divider /> : null}\n            <Box as=\"footer\" {...props} className={exceptionallySetClassName} padding=\"large\" />\n        </>\n    )\n}\n\n//\n// ModalActions\n//\n\nexport type ModalActionsProps = ModalFooterProps\n\n/**\n * A specific version of the ModalFooter, tailored to showing an inline list of actions (buttons).\n * @see ModalFooter\n */\nexport function ModalActions({ children, ...props }: ModalActionsProps) {\n    return (\n        <ModalFooter {...props}>\n            <Inline align=\"right\" space=\"large\">\n                {children}\n            </Inline>\n        </ModalFooter>\n    )\n}\n"],"names":["ModalContext","React","createContext","onDismiss","undefined","height","isNotInternalFrame","element","ownerDocument","document","tagName","toLowerCase","ModalCloseButton","props","useContext","includeInTabOrder","setIncludeInTabOrder","useState","isMounted","setIsMounted","useEffect","createElement","IconButton","variant","onClick","icon","CloseIcon","tabIndex","ModalFooter","_ref4","exceptionallySetClassName","withDivider","_objectWithoutProperties","objectWithoutProperties","_excluded4","Fragment","Divider","Box","_objectSpread","objectSpread2","as","className","padding","_ref","isOpen","width","exceptionallySetOverlayClassName","autoFocus","hideOnEscape","hideOnInteractOutside","children","portalElement","onKeyDown","_excluded","setOpen","useCallback","visible","store","useDialogStore","open","contextValue","useMemo","portalRef","useRef","dialogRef","backdropRef","handleBackdropClick","event","_dialogRef$current","_backdropRef$current","current","contains","target","stopPropagation","useLayoutEffect","hideOthers","handleKeyDown","key","defaultPrevented","Portal","data-overlay","classNames","styles","overlay","onPointerDown","ref","FocusLock","whiteList","returnFocus","crossFrame","Dialog","render","borderRadius","background","display","flexDirection","overflow","flexGrow","container","preventBodyScroll","modal","autoFocusOnShow","autoFocusOnHide","portal","backdrop","Provider","value","_ref5","_excluded5","Inline","align","space","_ref3","_excluded3","paddingBottom","_ref2","button","_excluded2","paddingLeft","paddingRight","paddingY","Columns","alignY","Column","headerContent","buttonContainer","data-testid","aria-label"],"mappings":"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"}
+{"version":3,"file":"modal.js","sources":["../../src/modal/modal.tsx"],"sourcesContent":["import * as React from 'react'\nimport classNames from 'classnames'\nimport FocusLock from 'react-focus-lock'\nimport { hideOthers } from 'aria-hidden'\n\nimport { Dialog, DialogOptions, useDialogStore, Portal, PortalOptions } from '@ariakit/react'\n\nimport { CloseIcon } from '../icons/close-icon'\nimport { Column, Columns } from '../columns'\nimport { Inline } from '../inline'\nimport { Divider } from '../divider'\nimport { Box } from '../box'\nimport { IconButtonProps, IconButton } from '../button'\n\nimport styles from './modal.module.css'\nimport type { ObfuscatedClassName } from '../utils/common-types'\nimport { forwardRef } from 'react'\n\ntype ModalWidth = 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'full'\ntype ModalHeightMode = 'expand' | 'fitContent'\n\n//\n// ModalContext\n//\n\ntype ModalContextValue = {\n    onDismiss?(this: void): void\n    height: ModalHeightMode\n}\n\nconst ModalContext = React.createContext<ModalContextValue>({\n    onDismiss: undefined,\n    height: 'fitContent',\n})\n\n//\n// Modal container\n//\n\ntype DivProps = Omit<\n    React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLDivElement>, HTMLDivElement>,\n    'className' | 'children' | `aria-label` | `aria-labelledby`\n>\n\nexport interface ModalProps extends DivProps, ObfuscatedClassName {\n    /**\n     * The content of the modal.\n     */\n    children: React.ReactNode\n\n    /**\n     * Whether the modal is open and visible or not.\n     */\n    isOpen: boolean\n\n    /**\n     * Called when the user triggers closing the modal.\n     */\n    onDismiss?(): void\n\n    /**\n     * A descriptive setting for how wide the modal should aim to be, depending on how much space\n     * it has on screen.\n     * @default 'medium'\n     */\n    width?: ModalWidth\n\n    /**\n     * A descriptive setting for how tall the modal should aim to be.\n     *\n     * - 'expand': the modal aims to fill most of the available screen height, leaving only a small\n     *   padding above and below.\n     * - 'fitContent': the modal shrinks to the smallest size that allow it to fit its content.\n     *\n     * In either case, if content does not fit, the content of the main body is set to scroll\n     * (provided you use `ModalBody`) so that the modal never has to strech vertically beyond the\n     * viewport boundaries.\n     *\n     * If you do not use `ModalBody`, the modal still prevents overflow, and you are in charge of\n     * the inner layout to ensure scroll, or whatever other strategy you may want.\n     */\n    height?: ModalHeightMode\n\n    /**\n     * Whether to set or not the focus initially to the first focusable element inside the modal.\n     */\n    autoFocus?: boolean\n\n    /**\n     * Controls if the modal is dismissed when pressing \"Escape\".\n     */\n    hideOnEscape?: DialogOptions['hideOnEscape']\n\n    /**\n     * Controls if the modal is dismissed when clicking outside the modal body, on the overlay.\n     */\n    hideOnInteractOutside?: DialogOptions['hideOnInteractOutside']\n\n    /**\n     * An escape hatch in case you need to provide a custom class name to the overlay element.\n     */\n    exceptionallySetOverlayClassName?: string\n\n    /**\n     * Defines a string value that labels the current modal for assistive technologies.\n     */\n    'aria-label'?: string\n\n    /**\n     * Identifies the element (or elements) that labels the current modal for assistive technologies.\n     */\n    'aria-labelledby'?: string\n\n    /**\n     * An HTML element or a memoized callback function that returns an HTML element to be used as\n     * the portal element. By default, the portal element will be a `div` element appended to the\n     * `document.body`.\n     *\n     * @default HTMLDivElement\n     *\n     * @example\n     * const [portal, setPortal] = useState(null);\n     * <Portal portalElement={portal} />;\n     * <div ref={setPortal} />;\n     *\n     * @example\n     * const getPortalElement = useCallback(() => {\n     *   const div = document.createElement(\"div\");\n     *   const portalRoot = document.getElementById(\"portal-root\");\n     *   portalRoot.appendChild(div);\n     *   return div;\n     * }, []);\n     * <Portal portalElement={getPortalElement} />;\n     */\n    portalElement?: PortalOptions['portalElement']\n}\n\nfunction isNotInternalFrame(element: HTMLElement) {\n    return !(element.ownerDocument === document && element.tagName.toLowerCase() === 'iframe')\n}\n\n/**\n * Renders a modal that sits on top of the rest of the content in the entire page.\n *\n * Follows the WAI-ARIA Dialog (Modal) Pattern.\n *\n * @see ModalHeader\n * @see ModalFooter\n * @see ModalBody\n */\nexport function Modal({\n    isOpen,\n    onDismiss,\n    height = 'fitContent',\n    width = 'medium',\n    exceptionallySetClassName,\n    exceptionallySetOverlayClassName,\n    autoFocus = true,\n    hideOnEscape = true,\n    hideOnInteractOutside = true,\n    children,\n    portalElement,\n    onKeyDown,\n    // @ts-expect-error we want to make sure to not pass it to the Dialog component\n    className,\n    ...props\n}: ModalProps) {\n    const setOpen = React.useCallback(\n        (visible: boolean) => {\n            if (!visible) {\n                onDismiss?.()\n            }\n        },\n        [onDismiss],\n    )\n    const store = useDialogStore({ open: isOpen, setOpen })\n\n    const contextValue: ModalContextValue = React.useMemo(() => ({ onDismiss, height }), [\n        onDismiss,\n        height,\n    ])\n\n    const portalRef = React.useRef<HTMLElement | null>(null)\n    const dialogRef = React.useRef<HTMLDivElement | null>(null)\n    const backdropRef = React.useRef<HTMLDivElement | null>(null)\n    const handleBackdropClick = React.useCallback(\n        (event: React.MouseEvent) => {\n            if (\n                // The focus lock element takes up the same space as the backdrop and is where the event bubbles up from,\n                // so instead of checking the backdrop as the event target, we need to make sure it's just above the dialog\n                !dialogRef.current?.contains(event.target as Node) &&\n                // Events fired from other portals will bubble up to the backdrop, even if it isn't a child in the DOM\n                backdropRef.current?.contains(event.target as Node)\n            ) {\n                event.stopPropagation()\n                onDismiss?.()\n            }\n        },\n        [onDismiss],\n    )\n\n    React.useLayoutEffect(\n        function disableAccessibilityTreeOutside() {\n            if (!isOpen || !portalRef.current) {\n                return\n            }\n\n            return hideOthers(portalRef.current)\n        },\n        [isOpen],\n    )\n\n    const handleKeyDown = React.useCallback(\n        function handleKeyDown(event: React.KeyboardEvent<HTMLDivElement>) {\n            if (\n                hideOnEscape &&\n                onDismiss != null &&\n                event.key === 'Escape' &&\n                !event.defaultPrevented\n            ) {\n                event.stopPropagation()\n                onDismiss()\n            }\n            onKeyDown?.(event)\n        },\n        [onDismiss, hideOnEscape, onKeyDown],\n    )\n\n    if (!isOpen) {\n        return null\n    }\n\n    return (\n        <Portal portalRef={portalRef} portalElement={portalElement}>\n            <Box\n                data-testid=\"modal-overlay\"\n                data-overlay\n                className={classNames(\n                    styles.overlay,\n                    styles[height],\n                    styles[width],\n                    exceptionallySetOverlayClassName,\n                )}\n                /**\n                 * We're using `onPointerDown` instead of `onClick` to prevent the modal from\n                 * closing when the click starts inside the modal and ends on the backdrop.\n                 */\n                onPointerDown={hideOnInteractOutside ? handleBackdropClick : undefined}\n                ref={backdropRef}\n            >\n                <FocusLock\n                    autoFocus={autoFocus}\n                    whiteList={isNotInternalFrame}\n                    returnFocus={true}\n                    crossFrame={false}\n                >\n                    <Dialog\n                        {...props}\n                        ref={dialogRef}\n                        render={\n                            <Box\n                                borderRadius=\"full\"\n                                background=\"default\"\n                                display=\"flex\"\n                                flexDirection=\"column\"\n                                overflow=\"hidden\"\n                                height={height === 'expand' ? 'full' : undefined}\n                                flexGrow={height === 'expand' ? 1 : 0}\n                            />\n                        }\n                        className={classNames(exceptionallySetClassName, styles.container)}\n                        store={store}\n                        preventBodyScroll\n                        // Disable focus lock as we set up our own using ReactFocusLock\n                        modal={false}\n                        autoFocus={false}\n                        autoFocusOnShow={false}\n                        autoFocusOnHide={false}\n                        // Disable portal and backdrop as we control their markup\n                        portal={false}\n                        backdrop={false}\n                        hideOnInteractOutside={false}\n                        hideOnEscape={false}\n                        onKeyDown={handleKeyDown}\n                    >\n                        <ModalContext.Provider value={contextValue}>\n                            {children}\n                        </ModalContext.Provider>\n                    </Dialog>\n                </FocusLock>\n            </Box>\n        </Portal>\n    )\n}\n\n//\n// ModalCloseButton\n//\n\nexport interface ModalCloseButtonProps\n    extends Omit<\n        IconButtonProps,\n        'type' | 'variant' | 'icon' | 'disabled' | 'loading' | 'tabIndex' | 'ref'\n    > {\n    /**\n     * The descriptive label of the button.\n     */\n    'aria-label': string\n}\n\n/**\n * The close button rendered by ModalHeader. Provided independently so that consumers can customize\n * the button's label.\n *\n * @see ModalHeader\n */\nexport function ModalCloseButton(props: ModalCloseButtonProps) {\n    const { onDismiss } = React.useContext(ModalContext)\n    const [includeInTabOrder, setIncludeInTabOrder] = React.useState(false)\n    const [isMounted, setIsMounted] = React.useState(false)\n\n    React.useEffect(\n        function skipAutoFocus() {\n            if (isMounted) {\n                setIncludeInTabOrder(true)\n            } else {\n                setIsMounted(true)\n            }\n        },\n        [isMounted],\n    )\n\n    return (\n        <IconButton\n            {...props}\n            variant=\"quaternary\"\n            onClick={onDismiss}\n            icon={<CloseIcon />}\n            tabIndex={includeInTabOrder ? 0 : -1}\n        />\n    )\n}\n\n//\n// ModalHeader\n//\n\nexport interface ModalHeaderProps extends DivProps, ObfuscatedClassName {\n    /**\n     * The content of the header.\n     */\n    children: React.ReactNode\n\n    /**\n     * Allows to provide a custom button element, or to omit the close button if set to false.\n     * @see ModalCloseButton\n     */\n    button?: React.ReactNode | boolean\n\n    /**\n     * Whether to render a divider line below the header.\n     * @default false\n     */\n    withDivider?: boolean\n}\n\n/**\n * Renders a standard modal header area with an optional close button.\n *\n * @see Modal\n * @see ModalFooter\n * @see ModalBody\n */\nexport function ModalHeader({\n    children,\n    button = true,\n    withDivider = false,\n    exceptionallySetClassName,\n    ...props\n}: ModalHeaderProps) {\n    return (\n        <>\n            <Box\n                {...props}\n                as=\"header\"\n                paddingLeft=\"large\"\n                paddingRight={button === false || button === null ? 'large' : 'small'}\n                paddingY=\"small\"\n                className={exceptionallySetClassName}\n            >\n                <Columns space=\"large\" alignY=\"center\">\n                    <Column width=\"auto\">{children}</Column>\n                    {button === false || button === null ? (\n                        <div className={styles.headerContent} />\n                    ) : (\n                        <Column\n                            width=\"content\"\n                            exceptionallySetClassName={styles.buttonContainer}\n                            data-testid=\"button-container\"\n                        >\n                            {typeof button === 'boolean' ? (\n                                <ModalCloseButton aria-label=\"Close modal\" autoFocus={false} />\n                            ) : (\n                                button\n                            )}\n                        </Column>\n                    )}\n                </Columns>\n            </Box>\n            {withDivider ? <Divider /> : null}\n        </>\n    )\n}\n\n//\n// ModalBody\n//\n\nexport interface ModalBodyProps extends DivProps, ObfuscatedClassName {\n    /**\n     * The content of the modal body.\n     */\n    children: React.ReactNode\n}\n\n/**\n * Renders the body of a modal.\n *\n * Convenient to use alongside ModalHeader and/or ModalFooter as needed. It ensures, among other\n * things, that the content of the modal body expands or contracts depending on the modal height\n * setting or the size of the content. The body content also automatically scrolls when it's too\n * large to fit the available space.\n *\n * @see Modal\n * @see ModalHeader\n * @see ModalFooter\n */\nexport const ModalBody = forwardRef<HTMLDivElement, ModalBodyProps>(function ModalBody(\n    { exceptionallySetClassName, children, ...props },\n    ref,\n) {\n    const { height } = React.useContext(ModalContext)\n    return (\n        <Box\n            {...props}\n            ref={ref}\n            className={exceptionallySetClassName}\n            flexGrow={height === 'expand' ? 1 : 0}\n            height={height === 'expand' ? 'full' : undefined}\n            overflow=\"auto\"\n        >\n            <Box padding=\"large\" paddingBottom=\"xxlarge\">\n                {children}\n            </Box>\n        </Box>\n    )\n})\n\n//\n// ModalFooter\n//\n\nexport interface ModalFooterProps extends DivProps, ObfuscatedClassName {\n    /**\n     * The contant of the modal footer.\n     */\n    children: React.ReactNode\n    /**\n     * Whether to render a divider line below the footer.\n     * @default false\n     */\n    withDivider?: boolean\n}\n\n/**\n * Renders a standard modal footer area.\n *\n * @see Modal\n * @see ModalHeader\n * @see ModalBody\n */\nexport function ModalFooter({\n    exceptionallySetClassName,\n    withDivider = false,\n    ...props\n}: ModalFooterProps) {\n    return (\n        <>\n            {withDivider ? <Divider /> : null}\n            <Box as=\"footer\" {...props} className={exceptionallySetClassName} padding=\"large\" />\n        </>\n    )\n}\n\n//\n// ModalActions\n//\n\nexport type ModalActionsProps = ModalFooterProps\n\n/**\n * A specific version of the ModalFooter, tailored to showing an inline list of actions (buttons).\n * @see ModalFooter\n */\nexport function ModalActions({ children, ...props }: ModalActionsProps) {\n    return (\n        <ModalFooter {...props}>\n            <Inline align=\"right\" space=\"large\">\n                {children}\n            </Inline>\n        </ModalFooter>\n    )\n}\n"],"names":["ModalContext","React","createContext","onDismiss","undefined","height","isNotInternalFrame","element","ownerDocument","document","tagName","toLowerCase","ModalCloseButton","props","useContext","includeInTabOrder","setIncludeInTabOrder","useState","isMounted","setIsMounted","useEffect","createElement","IconButton","variant","onClick","icon","CloseIcon","tabIndex","ModalBody","forwardRef","ref","exceptionallySetClassName","children","_ref3","_objectWithoutProperties","objectWithoutProperties","_excluded3","Box","className","flexGrow","overflow","padding","paddingBottom","ModalFooter","_ref4","withDivider","_excluded4","Fragment","Divider","_objectSpread","objectSpread2","as","_ref","isOpen","width","exceptionallySetOverlayClassName","autoFocus","hideOnEscape","hideOnInteractOutside","portalElement","onKeyDown","_excluded","setOpen","useCallback","visible","store","useDialogStore","open","contextValue","useMemo","portalRef","useRef","dialogRef","backdropRef","handleBackdropClick","event","_dialogRef$current","_backdropRef$current","current","contains","target","stopPropagation","useLayoutEffect","hideOthers","handleKeyDown","key","defaultPrevented","Portal","data-overlay","classNames","styles","overlay","onPointerDown","FocusLock","whiteList","returnFocus","crossFrame","Dialog","render","borderRadius","background","display","flexDirection","container","preventBodyScroll","modal","autoFocusOnShow","autoFocusOnHide","portal","backdrop","Provider","value","_ref5","_excluded5","Inline","align","space","_ref2","button","_excluded2","paddingLeft","paddingRight","paddingY","Columns","alignY","Column","headerContent","buttonContainer","data-testid","aria-label"],"mappings":"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"}

package/lib/password-field/password-field.d.ts

@@ -3,6 +3,7 @@ import { TextFieldProps } from '../text-field';
 import type { BaseFieldVariantProps } from '../base-field';
 interface PasswordFieldProps extends Omit<TextFieldProps, 'type' | 'startSlot' | 'endSlot'>, BaseFieldVariantProps {
     togglePasswordLabel?: string;
+    endSlot?: React.ReactElement | string | number;
 }
 declare const PasswordField: React.ForwardRefExoticComponent<Omit<PasswordFieldProps, "ref"> & React.RefAttributes<HTMLInputElement>>;
 export { PasswordField };

package/lib/password-field/password-field.js

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("../_virtual/_rollupPluginBabelHelpers.js"),r=require("react"),t=require("../icons/password-visible-icon.js"),o=require("../icons/password-hidden-icon.js"),i=require("../text-field/text-field.js"),n=require("../button/button.js");function s(e){if(e&&e.__esModule)return e;var r=Object.create(null);return e&&Object.keys(e).forEach((function(t){if("default"!==t){var o=Object.getOwnPropertyDescriptor(e,t);Object.defineProperty(r,t,o.get?o:{enumerable:!0,get:function(){return e[t]}})}})),r.default=e,r}var a=s(r);const l=["togglePasswordLabel"];exports.PasswordField=a.forwardRef((function(r,s){let{togglePasswordLabel:c="Toggle password visibility"}=r,u=e.objectWithoutProperties(r,l);const[d,b]=a.useState(!1),f=d?t.PasswordVisibleIcon:o.PasswordHiddenIcon;return a.createElement(i.TextField,e.objectSpread2(e.objectSpread2({},u),{},{ref:s,type:d?"text":"password",endSlot:a.createElement(n.IconButton,{variant:"quaternary",icon:a.createElement(f,{"aria-hidden":!0}),"aria-label":c,onClick:()=>b(e=>!e)})}))}));
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("../_virtual/_rollupPluginBabelHelpers.js"),t=require("react"),r=require("../icons/password-visible-icon.js"),o=require("../icons/password-hidden-icon.js"),n=require("../text-field/text-field.js"),i=require("../button/button.js");function a(e){if(e&&e.__esModule)return e;var t=Object.create(null);return e&&Object.keys(e).forEach((function(r){if("default"!==r){var o=Object.getOwnPropertyDescriptor(e,r);Object.defineProperty(t,r,o.get?o:{enumerable:!0,get:function(){return e[r]}})}})),t.default=e,t}var s=a(t);const l=["togglePasswordLabel","endSlot"];exports.PasswordField=s.forwardRef((function(t,a){let{togglePasswordLabel:c="Toggle password visibility",endSlot:u}=t,d=e.objectWithoutProperties(t,l);const[b,f]=s.useState(!1),p=b?r.PasswordVisibleIcon:o.PasswordHiddenIcon;return s.createElement(n.TextField,e.objectSpread2(e.objectSpread2({},d),{},{ref:a,type:b?"text":"password",endSlot:s.createElement(s.Fragment,null,u,s.createElement(i.IconButton,{variant:"quaternary",icon:s.createElement(p,{"aria-hidden":!0}),"aria-label":c,onClick:()=>f(e=>!e)}))}))}));
 //# sourceMappingURL=password-field.js.map

package/lib/password-field/password-field.js.map

@@ -1 +1 @@
-{"version":3,"file":"password-field.js","sources":["../../src/password-field/password-field.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { PasswordVisibleIcon } from '../icons/password-visible-icon'\nimport { PasswordHiddenIcon } from '../icons/password-hidden-icon'\n\nimport { TextField, TextFieldProps } from '../text-field'\nimport { IconButton } from '../button'\n\nimport type { BaseFieldVariantProps } from '../base-field'\n\ninterface PasswordFieldProps\n    extends Omit<TextFieldProps, 'type' | 'startSlot' | 'endSlot'>,\n        BaseFieldVariantProps {\n    togglePasswordLabel?: string\n}\n\nconst PasswordField = React.forwardRef<HTMLInputElement, PasswordFieldProps>(function PasswordField(\n    { togglePasswordLabel = 'Toggle password visibility', ...props },\n    ref,\n) {\n    const [isPasswordVisible, setPasswordVisible] = React.useState(false)\n    const Icon = isPasswordVisible ? PasswordVisibleIcon : PasswordHiddenIcon\n    return (\n        <TextField\n            {...props}\n            ref={ref}\n            // @ts-expect-error TextField does not support type=\"password\", so we override the type check here\n            type={isPasswordVisible ? 'text' : 'password'}\n            endSlot={\n                <IconButton\n                    variant=\"quaternary\"\n                    icon={<Icon aria-hidden />}\n                    aria-label={togglePasswordLabel}\n                    onClick={() => setPasswordVisible((v) => !v)}\n                />\n            }\n        />\n    )\n})\n\nexport { PasswordField }\nexport type { PasswordFieldProps }\n"],"names":["React","forwardRef","ref","togglePasswordLabel","_ref","props","_objectWithoutProperties","objectWithoutProperties","_excluded","isPasswordVisible","setPasswordVisible","useState","Icon","PasswordVisibleIcon","PasswordHiddenIcon","TextField","type","endSlot","IconButton","variant","icon","createElement","aria-hidden","aria-label","onClick","v"],"mappings":"yoBAgBsBA,EAAMC,YAAiD,SAEzEC,EAAAA,GAAG,IADHC,oBAAEA,EAAsB,8BACrBC,EADsDC,EACtDC,EAAAC,wBAAAH,EAAAI,GAEH,MAAOC,EAAmBC,GAAsBV,EAAMW,UAAS,GACzDC,EAAOH,EAAoBI,EAAHA,oBAAyBC,qBACvD,OACId,gBAACe,+CACOV,GADR,GAAA,CAEIH,IAAKA,EAELc,KAAMP,EAAoB,OAAS,WACnCQ,QACIjB,gBAACkB,aAAU,CACPC,QAAQ,aACRC,KAAMpB,EAAAqB,cAACT,EAAmB,CAAAU,eAAA,IAAAC,aACdpB,EACZqB,QAAS,IAAMd,EAAoBe,IAAOA"}
+{"version":3,"file":"password-field.js","sources":["../../src/password-field/password-field.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { PasswordVisibleIcon } from '../icons/password-visible-icon'\nimport { PasswordHiddenIcon } from '../icons/password-hidden-icon'\n\nimport { TextField, TextFieldProps } from '../text-field'\nimport { IconButton } from '../button'\n\nimport type { BaseFieldVariantProps } from '../base-field'\n\ninterface PasswordFieldProps\n    extends Omit<TextFieldProps, 'type' | 'startSlot' | 'endSlot'>,\n        BaseFieldVariantProps {\n    togglePasswordLabel?: string\n    endSlot?: React.ReactElement | string | number\n}\n\nconst PasswordField = React.forwardRef<HTMLInputElement, PasswordFieldProps>(function PasswordField(\n    { togglePasswordLabel = 'Toggle password visibility', endSlot, ...props },\n    ref,\n) {\n    const [isPasswordVisible, setPasswordVisible] = React.useState(false)\n    const Icon = isPasswordVisible ? PasswordVisibleIcon : PasswordHiddenIcon\n    return (\n        <TextField\n            {...props}\n            ref={ref}\n            // @ts-expect-error TextField does not support type=\"password\", so we override the type check here\n            type={isPasswordVisible ? 'text' : 'password'}\n            endSlot={\n                <>\n                    {endSlot}\n                    <IconButton\n                        variant=\"quaternary\"\n                        icon={<Icon aria-hidden />}\n                        aria-label={togglePasswordLabel}\n                        onClick={() => setPasswordVisible((v) => !v)}\n                    />\n                </>\n            }\n        />\n    )\n})\n\nexport { PasswordField }\nexport type { PasswordFieldProps }\n"],"names":["React","forwardRef","ref","togglePasswordLabel","endSlot","_ref","props","_objectWithoutProperties","objectWithoutProperties","_excluded","isPasswordVisible","setPasswordVisible","useState","Icon","PasswordVisibleIcon","PasswordHiddenIcon","TextField","type","createElement","Fragment","IconButton","variant","icon","aria-hidden","aria-label","onClick","v"],"mappings":"mpBAiBsBA,EAAMC,YAAiD,SAEzEC,EAAAA,GAAG,IADHC,oBAAEA,EAAsB,6BAAxBC,QAAsDA,GACnDC,EAD+DC,EAC/DC,EAAAC,wBAAAH,EAAAI,GAEH,MAAOC,EAAmBC,GAAsBX,EAAMY,UAAS,GACzDC,EAAOH,EAAoBI,EAAHA,oBAAyBC,qBACvD,OACIf,gBAACgB,+CACOV,GADR,GAAA,CAEIJ,IAAKA,EAELe,KAAMP,EAAoB,OAAS,WACnCN,QACIJ,EAAAkB,cAAAlB,EAAAmB,SAAA,KACKf,EACDJ,EAAAkB,cAACE,aAAU,CACPC,QAAQ,aACRC,KAAMtB,EAAAkB,cAACL,EAAI,CAAAU,eAAA,IACCC,aAAArB,EACZsB,QAAS,IAAMd,EAAoBe,IAAOA"}

package/lib/select-field/select-field.js

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("../_virtual/_rollupPluginBabelHelpers.js"),r=require("react"),t=require("../base-field/base-field.js"),a=require("../box/box.js"),l=require("./select-field.module.css.js");function i(e){if(e&&e.__esModule)return e;var r=Object.create(null);return e&&Object.keys(e).forEach((function(t){if("default"!==t){var a=Object.getOwnPropertyDescriptor(e,t);Object.defineProperty(r,t,a.get?a:{enumerable:!0,get:function(){return e[t]}})}})),r.default=e,r}var d=i(r);const n=["variant","id","label","secondaryLabel","auxiliaryLabel","hint","message","tone","maxWidth","children","hidden","aria-describedby"];function c(r){return d.createElement("svg",e.objectSpread2({width:"16",height:"16",fill:"none",xmlns:"http://www.w3.org/2000/svg"},r),d.createElement("path",{d:"M11.646 5.646a.5.5 0 0 1 .708.708l-4 4a.5.5 0 0 1-.708 0l-4-4a.5.5 0 1 1 .708-.708L8 9.293l3.646-3.647z",fill:"currentColor"}))}exports.SelectField=d.forwardRef((function(r,i){let{variant:o="default",id:s,label:u,secondaryLabel:b,auxiliaryLabel:f,hint:h,message:p,tone:m,maxWidth:j,children:y,hidden:x,"aria-describedby":g}=r,v=e.objectWithoutProperties(r,n);return d.createElement(t.BaseField,{variant:o,id:s,label:u,secondaryLabel:b,auxiliaryLabel:f,hint:h,message:p,tone:m,maxWidth:j,hidden:x,"aria-describedby":g},r=>d.createElement(a.Box,{"data-testid":"select-wrapper",className:[l.default.selectWrapper,"error"===m?l.default.error:null,"bordered"===o?l.default.bordered:null]},d.createElement("select",e.objectSpread2(e.objectSpread2(e.objectSpread2({},v),r),{},{ref:i}),y),d.createElement(c,{"aria-hidden":!0})))}));
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("../_virtual/_rollupPluginBabelHelpers.js"),r=require("react"),t=require("../base-field/base-field.js"),a=require("../box/box.js"),l=require("./select-field.module.css.js");function i(e){if(e&&e.__esModule)return e;var r=Object.create(null);return e&&Object.keys(e).forEach((function(t){if("default"!==t){var a=Object.getOwnPropertyDescriptor(e,t);Object.defineProperty(r,t,a.get?a:{enumerable:!0,get:function(){return e[t]}})}})),r.default=e,r}var n=i(r);const d=["variant","id","label","value","auxiliaryLabel","message","tone","maxWidth","children","hidden","aria-describedby","onChange"];function o(r){return n.createElement("svg",e.objectSpread2({width:"16",height:"16",fill:"none",xmlns:"http://www.w3.org/2000/svg"},r),n.createElement("path",{d:"M11.646 5.646a.5.5 0 0 1 .708.708l-4 4a.5.5 0 0 1-.708 0l-4-4a.5.5 0 1 1 .708-.708L8 9.293l3.646-3.647z",fill:"currentColor"}))}exports.SelectField=n.forwardRef((function(r,i){let{variant:u="default",id:c,label:s,value:b,auxiliaryLabel:f,message:h,tone:p,maxWidth:m,children:g,hidden:j,"aria-describedby":v,onChange:x}=r,y=e.objectWithoutProperties(r,d);return n.createElement(t.BaseField,{variant:u,id:c,label:s,value:b,auxiliaryLabel:f,message:h,tone:p,maxWidth:m,hidden:j,"aria-describedby":v},r=>n.createElement(a.Box,{"data-testid":"select-wrapper",className:[l.default.selectWrapper,"error"===p?l.default.error:null,"bordered"===u?l.default.bordered:null]},n.createElement("select",e.objectSpread2(e.objectSpread2(e.objectSpread2({},y),r),{},{ref:i,onChange:e=>{null==x||x(e)}}),g),n.createElement(o,{"aria-hidden":!0})))}));
 //# sourceMappingURL=select-field.js.map

package/lib/select-field/select-field.js.map

@@ -1 +1 @@
-{"version":3,"file":"select-field.js","sources":["../../src/select-field/select-field.tsx"],"sourcesContent":["import * as React from 'react'\nimport { BaseField, BaseFieldVariantProps, FieldComponentProps } from '../base-field'\nimport { Box } from '../box'\nimport styles from './select-field.module.css'\n\ninterface SelectFieldProps extends FieldComponentProps<HTMLSelectElement>, BaseFieldVariantProps {}\n\nconst SelectField = React.forwardRef<HTMLSelectElement, SelectFieldProps>(function SelectField(\n    {\n        variant = 'default',\n        id,\n        label,\n        secondaryLabel,\n        auxiliaryLabel,\n        hint,\n        message,\n        tone,\n        maxWidth,\n        children,\n        hidden,\n        'aria-describedby': ariaDescribedBy,\n        ...props\n    },\n    ref,\n) {\n    return (\n        <BaseField\n            variant={variant}\n            id={id}\n            label={label}\n            secondaryLabel={secondaryLabel}\n            auxiliaryLabel={auxiliaryLabel}\n            hint={hint}\n            message={message}\n            tone={tone}\n            maxWidth={maxWidth}\n            hidden={hidden}\n            aria-describedby={ariaDescribedBy}\n        >\n            {(extraProps) => (\n                <Box\n                    data-testid=\"select-wrapper\"\n                    className={[\n                        styles.selectWrapper,\n                        tone === 'error' ? styles.error : null,\n                        variant === 'bordered' ? styles.bordered : null,\n                    ]}\n                >\n                    <select {...props} {...extraProps} ref={ref}>\n                        {children}\n                    </select>\n                    <SelectChevron aria-hidden />\n                </Box>\n            )}\n        </BaseField>\n    )\n})\n\nfunction SelectChevron(props: JSX.IntrinsicElements['svg']) {\n    return (\n        <svg width=\"16\" height=\"16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" {...props}>\n            <path\n                d=\"M11.646 5.646a.5.5 0 0 1 .708.708l-4 4a.5.5 0 0 1-.708 0l-4-4a.5.5 0 1 1 .708-.708L8 9.293l3.646-3.647z\"\n                fill=\"currentColor\"\n            />\n        </svg>\n    )\n}\n\nexport { SelectField }\nexport type { SelectFieldProps }\n"],"names":["SelectChevron","props","React","createElement","_objectSpread","width","height","fill","xmlns","d","forwardRef","ref","variant","id","label","secondaryLabel","auxiliaryLabel","hint","message","tone","maxWidth","children","hidden","aria-describedby","ariaDescribedBy","_ref","_objectWithoutProperties","objectWithoutProperties","_excluded","BaseField","extraProps","Box","data-testid","className","styles","selectWrapper","error","bordered","objectSpread2","aria-hidden"],"mappings":"uqBA0DA,SAASA,EAAcC,GACnB,OACIC,EAAKC,cAAA,MAALC,gBAAA,CAAKC,MAAM,KAAKC,OAAO,KAAKC,KAAK,OAAOC,MAAM,8BAAiCP,GAC3EC,EACIC,cAAA,OAAA,CAAAM,EAAE,0GACFF,KAAK,sCAxDDL,EAAMQ,YAAgD,SAgBtEC,EAAAA,GAAG,IAfHC,QACIA,EAAU,UADdC,GAEIA,EAFJC,MAGIA,EAHJC,eAIIA,EAJJC,eAKIA,EALJC,KAMIA,EANJC,QAOIA,EAPJC,KAQIA,EARJC,SASIA,EATJC,SAUIA,EAVJC,OAWIA,EACAC,mBAAoBC,GAGrBC,EAFIxB,EAEJyB,EAAAC,wBAAAF,EAAAG,GAEH,OACI1B,EAACC,cAAA0B,YACG,CAAAjB,QAASA,EACTC,GAAIA,EACJC,MAAOA,EACPC,eAAgBA,EAChBC,eAAgBA,EAChBC,KAAMA,EACNC,QAASA,EACTC,KAAMA,EACNC,SAAUA,EACVE,OAAQA,EAAMC,mBACIC,GAEhBM,GACE5B,EAACC,cAAA4B,MACe,CAAAC,cAAA,iBACZC,UAAW,CACPC,EAAM,QAACC,cACE,UAAThB,EAAmBe,EAAM,QAACE,MAAQ,KACtB,aAAZxB,EAAyBsB,EAAAA,QAAOG,SAAW,OAG/CnC,EAAYC,cAAA,SAAZC,EAAAkC,cAAAlC,EAAAkC,cAAAlC,gBAAA,GAAYH,GAAW6B,GAAvB,GAAA,CAAmCnB,IAAKA,IACnCU,GAELnB,EAAAC,cAACH,EAA4B,CAAAuC,eAAA"}
+{"version":3,"file":"select-field.js","sources":["../../src/select-field/select-field.tsx"],"sourcesContent":["import * as React from 'react'\nimport { BaseField, BaseFieldVariantProps, FieldComponentProps } from '../base-field'\nimport { Box } from '../box'\nimport styles from './select-field.module.css'\n\ninterface SelectFieldProps extends FieldComponentProps<HTMLSelectElement>, BaseFieldVariantProps {}\n\nconst SelectField = React.forwardRef<HTMLSelectElement, SelectFieldProps>(function SelectField(\n    {\n        variant = 'default',\n        id,\n        label,\n        value,\n        auxiliaryLabel,\n        message,\n        tone,\n        maxWidth,\n        children,\n        hidden,\n        'aria-describedby': ariaDescribedBy,\n        onChange: originalOnChange,\n        ...props\n    },\n    ref,\n) {\n    return (\n        <BaseField\n            variant={variant}\n            id={id}\n            label={label}\n            value={value}\n            auxiliaryLabel={auxiliaryLabel}\n            message={message}\n            tone={tone}\n            maxWidth={maxWidth}\n            hidden={hidden}\n            aria-describedby={ariaDescribedBy}\n        >\n            {(extraProps) => (\n                <Box\n                    data-testid=\"select-wrapper\"\n                    className={[\n                        styles.selectWrapper,\n                        tone === 'error' ? styles.error : null,\n                        variant === 'bordered' ? styles.bordered : null,\n                    ]}\n                >\n                    <select\n                        {...props}\n                        {...extraProps}\n                        ref={ref}\n                        onChange={(event) => {\n                            originalOnChange?.(event)\n                        }}\n                    >\n                        {children}\n                    </select>\n                    <SelectChevron aria-hidden />\n                </Box>\n            )}\n        </BaseField>\n    )\n})\n\nfunction SelectChevron(props: JSX.IntrinsicElements['svg']) {\n    return (\n        <svg width=\"16\" height=\"16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" {...props}>\n            <path\n                d=\"M11.646 5.646a.5.5 0 0 1 .708.708l-4 4a.5.5 0 0 1-.708 0l-4-4a.5.5 0 1 1 .708-.708L8 9.293l3.646-3.647z\"\n                fill=\"currentColor\"\n            />\n        </svg>\n    )\n}\n\nexport { SelectField }\nexport type { SelectFieldProps }\n"],"names":["SelectChevron","props","React","createElement","_objectSpread","width","height","fill","xmlns","d","forwardRef","ref","variant","id","label","value","auxiliaryLabel","message","tone","maxWidth","children","hidden","aria-describedby","ariaDescribedBy","onChange","originalOnChange","_ref","_objectWithoutProperties","objectWithoutProperties","_excluded","BaseField","extraProps","Box","data-testid","className","styles","selectWrapper","error","bordered","objectSpread2","event","aria-hidden"],"mappings":"kqBAgEA,SAASA,EAAcC,GACnB,OACIC,EAAKC,cAAA,MAALC,gBAAA,CAAKC,MAAM,KAAKC,OAAO,KAAKC,KAAK,OAAOC,MAAM,8BAAiCP,GAC3EC,EACIC,cAAA,OAAA,CAAAM,EAAE,0GACFF,KAAK,sCA9DDL,EAAMQ,YAAgD,SAgBtEC,EAAAA,GAAG,IAfHC,QACIA,EAAU,UADdC,GAEIA,EAFJC,MAGIA,EAHJC,MAIIA,EAJJC,eAKIA,EALJC,QAMIA,EANJC,KAOIA,EAPJC,SAQIA,EARJC,SASIA,EATJC,OAUIA,EACAC,mBAAoBC,EACpBC,SAAUC,GAGXC,EAFIzB,EAEJ0B,EAAAC,wBAAAF,EAAAG,GAEH,OACI3B,EAACC,cAAA2B,YACG,CAAAlB,QAASA,EACTC,GAAIA,EACJC,MAAOA,EACPC,MAAOA,EACPC,eAAgBA,EAChBC,QAASA,EACTC,KAAMA,EACNC,SAAUA,EACVE,OAAQA,EACUC,mBAAAC,GAEhBQ,GACE7B,EAACC,cAAA6B,MACe,CAAAC,cAAA,iBACZC,UAAW,CACPC,EAAM,QAACC,cACE,UAATlB,EAAmBiB,EAAM,QAACE,MAAQ,KACtB,aAAZzB,EAAyBuB,EAAAA,QAAOG,SAAW,OAG/CpC,EAAAC,cAAA,SAAAC,EAAAmC,cAAAnC,EAAAmC,cAAAnC,gBAAA,GACQH,GACA8B,GAFR,GAAA,CAGIpB,IAAKA,EACLa,SAAWgB,IACP,MAAAf,GAAAA,EAAmBe,MAGtBpB,GAELlB,EAAAC,cAACH,EAA4B,CAAAyC,eAAA"}

package/lib/switch-field/switch-field.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { FieldComponentProps } from '../base-field';
-interface SwitchFieldProps extends Omit<FieldComponentProps<HTMLInputElement>, 'type' | 'secondaryLabel' | 'auxiliaryLabel' | 'maxWidth' | 'aria-describedby' | 'aria-label' | 'aria-labelledby'> {
+interface SwitchFieldProps extends Omit<FieldComponentProps<HTMLInputElement>, 'type' | 'auxiliaryLabel' | 'maxWidth' | 'aria-describedby' | 'aria-label' | 'aria-labelledby'> {
     /**
      * Identifies the element (or elements) that describes the switch for assistive technologies.
      */

package/lib/switch-field/switch-field.js

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("../_virtual/_rollupPluginBabelHelpers.js"),l=require("react"),a=require("../box/box.js"),t=require("../stack/stack.js"),r=require("../text/text.js"),i=require("../hidden-visually/hidden-visually.js"),n=require("../base-field/base-field.js"),d=require("../utils/common-helpers.js"),u=require("./switch-field.module.css.js");function s(e){if(e&&e.__esModule)return e;var l=Object.create(null);return e&&Object.keys(e).forEach((function(a){if("default"!==a){var t=Object.getOwnPropertyDescriptor(e,a);Object.defineProperty(l,a,t.get?t:{enumerable:!0,get:function(){return e[a]}})}})),l.default=e,l}var c=s(l);const o=["label","hint","disabled","hidden","defaultChecked","id","aria-describedby","aria-label","aria-labelledby","onChange"];exports.SwitchField=c.forwardRef((function(l,s){var b,f,h;let{label:p,hint:y,disabled:m=!1,hidden:j,defaultChecked:v,id:k,"aria-describedby":g,"aria-label":x,"aria-labelledby":q,onChange:E}=l,S=e.objectWithoutProperties(l,o);const B=d.useId(k),C=d.useId(),O=null!=g?g:y?C:void 0,P=null!=x?x:void 0,_=null!=q?q:void 0,[w,N]=c.useState(!1),[F,H]=c.useState(null!=(b=null!=(f=S.checked)?f:v)&&b),I=null!=(h=S.checked)?h:F;return c.createElement(t.Stack,{space:"small",hidden:j},c.createElement(a.Box,{className:[u.default.container,m?u.default.disabled:null,I?u.default.checked:null,w?u.default.keyFocused:null],as:"label",display:"flex",alignItems:"center"},c.createElement(a.Box,{position:"relative",display:"inlineBlock",overflow:"visible",marginRight:"small",flexShrink:0,className:u.default.toggle},c.createElement(i.HiddenVisually,null,c.createElement("input",e.objectSpread2(e.objectSpread2({},S),{},{id:B,type:"checkbox",disabled:m,"aria-describedby":O,"aria-label":P,"aria-labelledby":_,ref:s,checked:I,onChange:e=>{null==E||E(e),e.defaultPrevented||H(e.currentTarget.checked)},onBlur:e=>{N(!1),null==S||null==S.onBlur||S.onBlur(e)},onKeyUp:e=>{N(!0),null==S||null==S.onKeyUp||S.onKeyUp(e)}}))),c.createElement("span",{className:u.default.handle})),c.createElement(r.Text,{exceptionallySetClassName:u.default.label},p)),y?c.createElement(n.FieldHint,{id:C},y):null)}));
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("../_virtual/_rollupPluginBabelHelpers.js"),l=require("react"),a=require("../box/box.js"),t=require("../stack/stack.js"),r=require("../text/text.js"),n=require("../hidden-visually/hidden-visually.js"),i=require("../base-field/base-field.js"),d=require("../utils/common-helpers.js"),u=require("./switch-field.module.css.js");function s(e){if(e&&e.__esModule)return e;var l=Object.create(null);return e&&Object.keys(e).forEach((function(a){if("default"!==a){var t=Object.getOwnPropertyDescriptor(e,a);Object.defineProperty(l,a,t.get?t:{enumerable:!0,get:function(){return e[a]}})}})),l.default=e,l}var c=s(l);const o=["label","message","tone","disabled","hidden","defaultChecked","id","aria-describedby","aria-label","aria-labelledby","onChange"];exports.SwitchField=c.forwardRef((function(l,s){var b,f,h;let{label:p,message:m,tone:y="neutral",disabled:g=!1,hidden:j,defaultChecked:v,id:k,"aria-describedby":x,"aria-label":q,"aria-labelledby":E,onChange:S}=l,B=e.objectWithoutProperties(l,o);const C=d.useId(k),O=d.useId(),P=null!=x?x:m?O:void 0,_=null!=q?q:void 0,w=null!=E?E:void 0,[N,F]=c.useState(!1),[I,K]=c.useState(null!=(b=null!=(f=B.checked)?f:v)&&b),M=null!=(h=B.checked)?h:I;return c.createElement(t.Stack,{space:"small",hidden:j},c.createElement(a.Box,{className:[u.default.container,g?u.default.disabled:null,M?u.default.checked:null,N?u.default.keyFocused:null],as:"label",display:"flex",alignItems:"center"},c.createElement(a.Box,{position:"relative",display:"inlineBlock",overflow:"visible",marginRight:"small",flexShrink:0,className:u.default.toggle},c.createElement(n.HiddenVisually,null,c.createElement("input",e.objectSpread2(e.objectSpread2({},B),{},{id:C,type:"checkbox",disabled:g,"aria-describedby":P,"aria-label":_,"aria-labelledby":w,ref:s,checked:M,onChange:e=>{null==S||S(e),e.defaultPrevented||K(e.currentTarget.checked)},onBlur:e=>{F(!1),null==B||null==B.onBlur||B.onBlur(e)},onKeyUp:e=>{F(!0),null==B||null==B.onKeyUp||B.onKeyUp(e)}}))),c.createElement("span",{className:u.default.handle})),c.createElement(r.Text,{exceptionallySetClassName:u.default.label},p)),m?c.createElement(i.FieldMessage,{id:O,tone:y},m):null)}));
 //# sourceMappingURL=switch-field.js.map

package/lib/switch-field/switch-field.js.map

@@ -1 +1 @@
-{"version":3,"file":"switch-field.js","sources":["../../src/switch-field/switch-field.tsx"],"sourcesContent":["import * as React from 'react'\nimport { Box } from '../box'\nimport { Stack } from '../stack'\nimport { Text } from '../text'\nimport { HiddenVisually } from '../hidden-visually'\nimport { FieldComponentProps, FieldHint } from '../base-field'\nimport { useId } from '../utils/common-helpers'\nimport styles from './switch-field.module.css'\n\ninterface SwitchFieldProps\n    extends Omit<\n        FieldComponentProps<HTMLInputElement>,\n        | 'type'\n        | 'secondaryLabel'\n        | 'auxiliaryLabel'\n        | 'maxWidth'\n        | 'aria-describedby'\n        | 'aria-label'\n        | 'aria-labelledby'\n    > {\n    /**\n     * Identifies the element (or elements) that describes the switch for assistive technologies.\n     */\n    'aria-describedby'?: string\n\n    /**\n     * Defines a string value that labels the current switch for assistive technologies.\n     */\n    'aria-label'?: string\n\n    /**\n     * Identifies the element (or elements) that labels the current switch for assistive technologies.\n     */\n    'aria-labelledby'?: string\n}\n\nconst SwitchField = React.forwardRef<HTMLInputElement, SwitchFieldProps>(function SwitchField(\n    {\n        label,\n        hint,\n        disabled = false,\n        hidden,\n        defaultChecked,\n        id: originalId,\n        'aria-describedby': originalAriaDescribedBy,\n        'aria-label': originalAriaLabel,\n        'aria-labelledby': originalAriaLabelledby,\n        onChange,\n        ...props\n    },\n    ref,\n) {\n    const id = useId(originalId)\n    const hintId = useId()\n\n    const ariaDescribedBy = originalAriaDescribedBy ?? (hint ? hintId : undefined)\n    const ariaLabel = originalAriaLabel ?? undefined\n    const ariaLabelledBy = originalAriaLabelledby ?? undefined\n\n    const [keyFocused, setKeyFocused] = React.useState(false)\n    const [checkedState, setChecked] = React.useState(props.checked ?? defaultChecked ?? false)\n    const isChecked = props.checked ?? checkedState\n\n    return (\n        <Stack space=\"small\" hidden={hidden}>\n            <Box\n                className={[\n                    styles.container,\n                    disabled ? styles.disabled : null,\n                    isChecked ? styles.checked : null,\n                    keyFocused ? styles.keyFocused : null,\n                ]}\n                as=\"label\"\n                display=\"flex\"\n                alignItems=\"center\"\n            >\n                <Box\n                    position=\"relative\"\n                    display=\"inlineBlock\"\n                    overflow=\"visible\"\n                    marginRight=\"small\"\n                    flexShrink={0}\n                    className={styles.toggle}\n                >\n                    <HiddenVisually>\n                        <input\n                            {...props}\n                            id={id}\n                            type=\"checkbox\"\n                            disabled={disabled}\n                            aria-describedby={ariaDescribedBy}\n                            aria-label={ariaLabel}\n                            aria-labelledby={ariaLabelledBy}\n                            ref={ref}\n                            checked={isChecked}\n                            onChange={(event) => {\n                                onChange?.(event)\n                                if (!event.defaultPrevented) {\n                                    setChecked(event.currentTarget.checked)\n                                }\n                            }}\n                            onBlur={(event) => {\n                                setKeyFocused(false)\n                                props?.onBlur?.(event)\n                            }}\n                            onKeyUp={(event) => {\n                                setKeyFocused(true)\n                                props?.onKeyUp?.(event)\n                            }}\n                        />\n                    </HiddenVisually>\n                    <span className={styles.handle} />\n                </Box>\n                <Text exceptionallySetClassName={styles.label}>{label}</Text>\n            </Box>\n            {hint ? <FieldHint id={hintId}>{hint}</FieldHint> : null}\n        </Stack>\n    )\n})\n\nexport { SwitchField }\nexport type { SwitchFieldProps }\n"],"names":["React","forwardRef","ref","_ref2","_props$checked","_props$checked2","label","hint","disabled","hidden","defaultChecked","id","originalId","aria-describedby","originalAriaDescribedBy","aria-label","originalAriaLabel","aria-labelledby","originalAriaLabelledby","onChange","_ref","props","_objectWithoutProperties","objectWithoutProperties","_excluded","useId","hintId","ariaDescribedBy","undefined","ariaLabel","ariaLabelledBy","keyFocused","setKeyFocused","useState","checkedState","setChecked","checked","isChecked","createElement","Stack","space","Box","className","styles","container","as","display","alignItems","position","overflow","marginRight","flexShrink","toggle","HiddenVisually","type","event","defaultPrevented","currentTarget","onBlur","onKeyUp","handle","Text","exceptionallySetClassName","FieldHint"],"mappings":"q0BAoCoBA,EAAMC,YAA+C,SAcrEC,EAAAA,GAAG,IAAAC,EAAAC,EAAAC,EAAA,IAbHC,MACIA,EADJC,KAEIA,EAFJC,SAGIA,GAAW,EAHfC,OAIIA,EAJJC,eAKIA,EACAC,GAAIC,EACJC,mBAAoBC,EACpBC,aAAcC,EACdC,kBAAmBC,EATvBC,SAUIA,GAGDC,EAFIC,EAEJC,EAAAC,wBAAAH,EAAAI,GAEH,MAAMb,EAAKc,QAAMb,GACXc,EAASD,EAAAA,QAETE,EAAkBb,MAAAA,EAAAA,EAA4BP,EAAOmB,OAASE,EAC9DC,EAAYb,MAAAA,EAAAA,OAAqBY,EACjCE,EAAiBZ,MAAAA,EAAAA,OAA0BU,GAE1CG,EAAYC,GAAiBhC,EAAMiC,UAAS,IAC5CC,EAAcC,GAAcnC,EAAMiC,SAAN,OAAeZ,EAAf,OAAeA,EAAAA,EAAMe,SAArBhC,EAAgCM,IAAhCP,GAC7BkC,SAAYhB,EAAAA,EAAMe,WAAWF,EAEnC,OACIlC,EAACsC,cAAAC,QAAM,CAAAC,MAAM,QAAQ/B,OAAQA,GACzBT,EAACsC,cAAAG,MACG,CAAAC,UAAW,CACPC,EAAAA,QAAOC,UACPpC,EAAWmC,EAAAA,QAAOnC,SAAW,KAC7B6B,EAAYM,EAAM,QAACP,QAAU,KAC7BL,EAAaY,EAAM,QAACZ,WAAa,MAErCc,GAAG,QACHC,QAAQ,OACRC,WAAW,UAEX/C,EAACsC,cAAAG,MACG,CAAAO,SAAS,WACTF,QAAQ,cACRG,SAAS,UACTC,YAAY,QACZC,WAAY,EACZT,UAAWC,EAAM,QAACS,QAElBpD,EAAAsC,cAACe,iBAAc,KACXrD,EAAAsC,cAAA,2CACQjB,GADR,GAAA,CAEIV,GAAIA,EACJ2C,KAAK,WACL9C,SAAUA,qBACQmB,EAAeZ,aACrBc,EAASZ,kBACJa,EACjB5B,IAAKA,EACLkC,QAASC,EACTlB,SAAWoC,IACP,MAAApC,GAAAA,EAAWoC,GACNA,EAAMC,kBACPrB,EAAWoB,EAAME,cAAcrB,UAGvCsB,OAASH,IACLvB,GAAc,GACT,MAALX,SAAAA,EAAOqC,QAAPrC,EAAOqC,OAASH,IAEpBI,QAAUJ,IACNvB,GAAc,GACT,MAALX,SAAAA,EAAOsC,SAAPtC,EAAOsC,QAAUJ,QAI7BvD,EAAAsC,cAAA,OAAA,CAAMI,UAAWC,EAAM,QAACiB,UAE5B5D,EAACsC,cAAAuB,OAAK,CAAAC,0BAA2BnB,EAAM,QAACrC,OAAQA,IAEnDC,EAAOP,gBAAC+D,EAAAA,UAAS,CAACpD,GAAIe,GAASnB,GAAoB"}
+{"version":3,"file":"switch-field.js","sources":["../../src/switch-field/switch-field.tsx"],"sourcesContent":["import * as React from 'react'\nimport { Box } from '../box'\nimport { Stack } from '../stack'\nimport { Text } from '../text'\nimport { HiddenVisually } from '../hidden-visually'\nimport { FieldComponentProps, FieldMessage } from '../base-field'\nimport { useId } from '../utils/common-helpers'\nimport styles from './switch-field.module.css'\n\ninterface SwitchFieldProps\n    extends Omit<\n        FieldComponentProps<HTMLInputElement>,\n        | 'type'\n        | 'auxiliaryLabel'\n        | 'maxWidth'\n        | 'aria-describedby'\n        | 'aria-label'\n        | 'aria-labelledby'\n    > {\n    /**\n     * Identifies the element (or elements) that describes the switch for assistive technologies.\n     */\n    'aria-describedby'?: string\n\n    /**\n     * Defines a string value that labels the current switch for assistive technologies.\n     */\n    'aria-label'?: string\n\n    /**\n     * Identifies the element (or elements) that labels the current switch for assistive technologies.\n     */\n    'aria-labelledby'?: string\n}\n\nconst SwitchField = React.forwardRef<HTMLInputElement, SwitchFieldProps>(function SwitchField(\n    {\n        label,\n        message,\n        tone = 'neutral',\n        disabled = false,\n        hidden,\n        defaultChecked,\n        id: originalId,\n        'aria-describedby': originalAriaDescribedBy,\n        'aria-label': originalAriaLabel,\n        'aria-labelledby': originalAriaLabelledby,\n        onChange,\n        ...props\n    },\n    ref,\n) {\n    const id = useId(originalId)\n    const messageId = useId()\n\n    const ariaDescribedBy = originalAriaDescribedBy ?? (message ? messageId : undefined)\n    const ariaLabel = originalAriaLabel ?? undefined\n    const ariaLabelledBy = originalAriaLabelledby ?? undefined\n\n    const [keyFocused, setKeyFocused] = React.useState(false)\n    const [checkedState, setChecked] = React.useState(props.checked ?? defaultChecked ?? false)\n    const isChecked = props.checked ?? checkedState\n\n    return (\n        <Stack space=\"small\" hidden={hidden}>\n            <Box\n                className={[\n                    styles.container,\n                    disabled ? styles.disabled : null,\n                    isChecked ? styles.checked : null,\n                    keyFocused ? styles.keyFocused : null,\n                ]}\n                as=\"label\"\n                display=\"flex\"\n                alignItems=\"center\"\n            >\n                <Box\n                    position=\"relative\"\n                    display=\"inlineBlock\"\n                    overflow=\"visible\"\n                    marginRight=\"small\"\n                    flexShrink={0}\n                    className={styles.toggle}\n                >\n                    <HiddenVisually>\n                        <input\n                            {...props}\n                            id={id}\n                            type=\"checkbox\"\n                            disabled={disabled}\n                            aria-describedby={ariaDescribedBy}\n                            aria-label={ariaLabel}\n                            aria-labelledby={ariaLabelledBy}\n                            ref={ref}\n                            checked={isChecked}\n                            onChange={(event) => {\n                                onChange?.(event)\n                                if (!event.defaultPrevented) {\n                                    setChecked(event.currentTarget.checked)\n                                }\n                            }}\n                            onBlur={(event) => {\n                                setKeyFocused(false)\n                                props?.onBlur?.(event)\n                            }}\n                            onKeyUp={(event) => {\n                                setKeyFocused(true)\n                                props?.onKeyUp?.(event)\n                            }}\n                        />\n                    </HiddenVisually>\n                    <span className={styles.handle} />\n                </Box>\n                <Text exceptionallySetClassName={styles.label}>{label}</Text>\n            </Box>\n            {message ? (\n                <FieldMessage id={messageId} tone={tone}>\n                    {message}\n                </FieldMessage>\n            ) : null}\n        </Stack>\n    )\n})\n\nexport { SwitchField }\nexport type { SwitchFieldProps }\n"],"names":["React","forwardRef","ref","_ref2","_props$checked","_props$checked2","label","message","tone","disabled","hidden","defaultChecked","id","originalId","aria-describedby","originalAriaDescribedBy","aria-label","originalAriaLabel","aria-labelledby","originalAriaLabelledby","onChange","_ref","props","_objectWithoutProperties","objectWithoutProperties","_excluded","useId","messageId","ariaDescribedBy","undefined","ariaLabel","ariaLabelledBy","keyFocused","setKeyFocused","useState","checkedState","setChecked","checked","isChecked","createElement","Stack","space","Box","className","styles","container","as","display","alignItems","position","overflow","marginRight","flexShrink","toggle","HiddenVisually","type","event","defaultPrevented","currentTarget","onBlur","onKeyUp","handle","Text","exceptionallySetClassName","FieldMessage"],"mappings":"+0BAmCoBA,EAAMC,YAA+C,SAerEC,EAAAA,GAAG,IAAAC,EAAAC,EAAAC,EAAA,IAdHC,MACIA,EADJC,QAEIA,EAFJC,KAGIA,EAAO,UAHXC,SAIIA,GAAW,EAJfC,OAKIA,EALJC,eAMIA,EACAC,GAAIC,EACJC,mBAAoBC,EACpBC,aAAcC,EACdC,kBAAmBC,EAVvBC,SAWIA,GAGDC,EAFIC,EAEJC,EAAAC,wBAAAH,EAAAI,GAEH,MAAMb,EAAKc,QAAMb,GACXc,EAAYD,EAAAA,QAEZE,EAAkBb,MAAAA,EAAAA,EAA4BR,EAAUoB,OAAYE,EACpEC,EAAYb,MAAAA,EAAAA,OAAqBY,EACjCE,EAAiBZ,MAAAA,EAAAA,OAA0BU,GAE1CG,EAAYC,GAAiBjC,EAAMkC,UAAS,IAC5CC,EAAcC,GAAcpC,EAAMkC,SAAN,OAAeZ,EAAf,OAAeA,EAAAA,EAAMe,SAArBjC,EAAgCO,IAAhCR,GAC7BmC,SAAYhB,EAAAA,EAAMe,WAAWF,EAEnC,OACInC,EAACuC,cAAAC,QAAM,CAAAC,MAAM,QAAQ/B,OAAQA,GACzBV,EAACuC,cAAAG,MACG,CAAAC,UAAW,CACPC,EAAAA,QAAOC,UACPpC,EAAWmC,EAAAA,QAAOnC,SAAW,KAC7B6B,EAAYM,EAAM,QAACP,QAAU,KAC7BL,EAAaY,EAAM,QAACZ,WAAa,MAErCc,GAAG,QACHC,QAAQ,OACRC,WAAW,UAEXhD,EAACuC,cAAAG,MACG,CAAAO,SAAS,WACTF,QAAQ,cACRG,SAAS,UACTC,YAAY,QACZC,WAAY,EACZT,UAAWC,EAAM,QAACS,QAElBrD,EAAAuC,cAACe,iBAAc,KACXtD,EAAAuC,cAAA,2CACQjB,GADR,GAAA,CAEIV,GAAIA,EACJ2C,KAAK,WACL9C,SAAUA,qBACQmB,EAAeZ,aACrBc,EAASZ,kBACJa,EACjB7B,IAAKA,EACLmC,QAASC,EACTlB,SAAWoC,IACP,MAAApC,GAAAA,EAAWoC,GACNA,EAAMC,kBACPrB,EAAWoB,EAAME,cAAcrB,UAGvCsB,OAASH,IACLvB,GAAc,GACT,MAALX,SAAAA,EAAOqC,QAAPrC,EAAOqC,OAASH,IAEpBI,QAAUJ,IACNvB,GAAc,GACT,MAALX,SAAAA,EAAOsC,SAAPtC,EAAOsC,QAAUJ,QAI7BxD,EAAAuC,cAAA,OAAA,CAAMI,UAAWC,EAAM,QAACiB,UAE5B7D,EAACuC,cAAAuB,OAAK,CAAAC,0BAA2BnB,EAAM,QAACtC,OAAQA,IAEnDC,EACGP,EAAAuC,cAACyB,EAAAA,aAAa,CAAApD,GAAIe,EAAWnB,KAAMA,GAC9BD,GAEL"}

package/lib/text-area/text-area.d.ts

@@ -15,9 +15,17 @@ interface TextAreaProps extends FieldComponentProps<HTMLTextAreaElement>, BaseFi
      */
     rows?: number;
     /**
-     * If `true`, the textarea will auto-expand or shrink vertically to fit the content.
+     * If `true`, the textarea will be automatically resized to fit the content, and the ability to
+     * manually resize the textarea will be disabled.
      */
     autoExpand?: boolean;
+    /**
+     * If `true`, the ability to manually resize the textarea will be disabled.
+     *
+     * When `autoExpand` is true, this property serves no purpose, because the ability to manually
+     * resize the textarea is always disabled when `autoExpand` is true.
+     */
+    disableResize?: boolean;
 }
 declare const TextArea: React.ForwardRefExoticComponent<Omit<TextAreaProps, "ref"> & React.RefAttributes<HTMLTextAreaElement>>;
 export { TextArea };

package/lib/text-area/text-area.js

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("../_virtual/_rollupPluginBabelHelpers.js"),r=require("react"),a=require("use-callback-ref"),t=require("../base-field/base-field.js"),n=require("../box/box.js"),i=require("./text-area.module.css.js");function l(e){if(e&&e.__esModule)return e;var r=Object.create(null);return e&&Object.keys(e).forEach((function(a){if("default"!==a){var t=Object.getOwnPropertyDescriptor(e,a);Object.defineProperty(r,a,t.get?t:{enumerable:!0,get:function(){return e[a]}})}})),r.default=e,r}var u=l(r);const d=["variant","id","label","secondaryLabel","auxiliaryLabel","hint","message","tone","maxWidth","hidden","aria-describedby","rows","autoExpand"];exports.TextArea=u.forwardRef((function(r,l){let{variant:s="default",id:o,label:c,secondaryLabel:f,auxiliaryLabel:b,hint:p,message:x,tone:m,maxWidth:v,hidden:y,"aria-describedby":j,rows:h,autoExpand:E=!1}=r,g=e.objectWithoutProperties(r,d);const L=u.useRef(null),q=u.useRef(null),w=a.useMergeRefs([l,q]);return u.useEffect((function(){const e=L.current;function r(r){e&&(e.dataset.replicatedValue=r)}function a(e){r(e.currentTarget.value)}const t=q.current;if(t&&E)return r(t.value),t.addEventListener("input",a),()=>t.removeEventListener("input",a)}),[E]),u.createElement(t.BaseField,{variant:s,id:o,label:c,secondaryLabel:f,auxiliaryLabel:b,hint:p,message:x,tone:m,hidden:y,"aria-describedby":j,className:[i.default.textAreaContainer,"error"===m?i.default.error:null,"bordered"===s?i.default.bordered:null],maxWidth:v},r=>u.createElement(n.Box,{width:"full",display:"flex",className:i.default.innerContainer,ref:L},u.createElement("textarea",e.objectSpread2(e.objectSpread2(e.objectSpread2({},g),r),{},{ref:w,rows:h,className:E?i.default.autoExpand:void 0}))))}));
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("../_virtual/_rollupPluginBabelHelpers.js"),a=require("react"),t=require("classnames"),r=require("use-callback-ref"),n=require("../base-field/base-field.js"),l=require("../box/box.js"),u=require("./text-area.module.css.js");function i(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}function s(e){if(e&&e.__esModule)return e;var a=Object.create(null);return e&&Object.keys(e).forEach((function(t){if("default"!==t){var r=Object.getOwnPropertyDescriptor(e,t);Object.defineProperty(a,t,r.get?r:{enumerable:!0,get:function(){return e[t]}})}})),a.default=e,a}var d=s(a),o=i(t);const c=["variant","id","label","value","auxiliaryLabel","message","tone","maxWidth","maxLength","hidden","aria-describedby","rows","autoExpand","disableResize","onChange"],f=["onChange"];exports.TextArea=d.forwardRef((function(a,t){let{variant:i="default",id:s,label:b,value:x,auxiliaryLabel:m,message:p,tone:h,maxWidth:g,maxLength:v,hidden:j,"aria-describedby":y,rows:E,autoExpand:L=!1,disableResize:R=!1,onChange:q}=a,C=e.objectWithoutProperties(a,c);const w=d.useRef(null),O=d.useRef(null),P=r.useMergeRefs([t,O]),_=o.default([L?u.default.disableResize:null,R?u.default.disableResize:null]);return d.useEffect((function(){const e=w.current;function a(a){e&&(e.dataset.replicatedValue=a)}function t(e){a(e.currentTarget.value)}const r=O.current;if(r&&L)return a(r.value),r.addEventListener("input",t),()=>r.removeEventListener("input",t)}),[L]),d.createElement(n.BaseField,{variant:i,id:s,label:b,value:x,auxiliaryLabel:m,message:p,tone:h,hidden:j,"aria-describedby":y,className:[u.default.textAreaContainer,"error"===h?u.default.error:null,"bordered"===i?u.default.bordered:null],maxWidth:g,maxLength:v},a=>{let{onChange:t}=a,r=e.objectWithoutProperties(a,f);return d.createElement(l.Box,{width:"full",display:"flex",className:u.default.innerContainer,ref:w},d.createElement("textarea",e.objectSpread2(e.objectSpread2(e.objectSpread2({},C),r),{},{ref:P,rows:E,className:_,maxLength:v,onChange:e=>{null==q||q(e),null==t||t(e)}})))})}));
 //# sourceMappingURL=text-area.js.map

package/lib/text-area/text-area.js.map

@@ -1 +1 @@
-{"version":3,"file":"text-area.js","sources":["../../src/text-area/text-area.tsx"],"sourcesContent":["import * as React from 'react'\nimport { useMergeRefs } from 'use-callback-ref'\nimport { BaseField, BaseFieldVariantProps, FieldComponentProps } from '../base-field'\nimport { Box } from '../box'\nimport styles from './text-area.module.css'\n\ninterface TextAreaProps extends FieldComponentProps<HTMLTextAreaElement>, BaseFieldVariantProps {\n    /**\n     * The number of visible text lines for the text area.\n     *\n     * If it is specified, it must be a positive integer. If it is not specified, the default\n     * value is 2 (set by the browser).\n     *\n     * When `autoExpand` is true, this value serves the purpose of specifying the minimum number\n     * of rows that the textarea will shrink to when the content is not large enough to make it\n     * expand.\n     *\n     * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea#attr-rows\n     */\n    rows?: number\n\n    /**\n     * If `true`, the textarea will auto-expand or shrink vertically to fit the content.\n     */\n    autoExpand?: boolean\n}\n\nconst TextArea = React.forwardRef<HTMLTextAreaElement, TextAreaProps>(function TextArea(\n    {\n        variant = 'default',\n        id,\n        label,\n        secondaryLabel,\n        auxiliaryLabel,\n        hint,\n        message,\n        tone,\n        maxWidth,\n        hidden,\n        'aria-describedby': ariaDescribedBy,\n        rows,\n        autoExpand = false,\n        ...props\n    },\n    ref,\n) {\n    const containerRef = React.useRef<HTMLDivElement>(null)\n    const internalRef = React.useRef<HTMLTextAreaElement>(null)\n    const combinedRef = useMergeRefs([ref, internalRef])\n\n    React.useEffect(\n        function setupAutoExpand() {\n            const containerElement = containerRef.current\n\n            function handleAutoExpand(value: string) {\n                if (containerElement) {\n                    containerElement.dataset.replicatedValue = value\n                }\n            }\n\n            function handleInput(event: Event) {\n                handleAutoExpand((event.currentTarget as HTMLTextAreaElement).value)\n            }\n\n            const textAreaElement = internalRef.current\n            if (!textAreaElement || !autoExpand) {\n                return undefined\n            }\n\n            // Apply change initially, in case the text area has a non-empty initial value\n            handleAutoExpand(textAreaElement.value)\n\n            textAreaElement.addEventListener('input', handleInput)\n            return () => textAreaElement.removeEventListener('input', handleInput)\n        },\n        [autoExpand],\n    )\n\n    return (\n        <BaseField\n            variant={variant}\n            id={id}\n            label={label}\n            secondaryLabel={secondaryLabel}\n            auxiliaryLabel={auxiliaryLabel}\n            hint={hint}\n            message={message}\n            tone={tone}\n            hidden={hidden}\n            aria-describedby={ariaDescribedBy}\n            className={[\n                styles.textAreaContainer,\n                tone === 'error' ? styles.error : null,\n                variant === 'bordered' ? styles.bordered : null,\n            ]}\n            maxWidth={maxWidth}\n        >\n            {(extraProps) => (\n                <Box\n                    width=\"full\"\n                    display=\"flex\"\n                    className={styles.innerContainer}\n                    ref={containerRef}\n                >\n                    <textarea\n                        {...props}\n                        {...extraProps}\n                        ref={combinedRef}\n                        rows={rows}\n                        className={autoExpand ? styles.autoExpand : undefined}\n                    />\n                </Box>\n            )}\n        </BaseField>\n    )\n})\n\nexport { TextArea }\nexport type { TextAreaProps }\n"],"names":["React","forwardRef","ref","variant","id","label","secondaryLabel","auxiliaryLabel","hint","message","tone","maxWidth","hidden","aria-describedby","ariaDescribedBy","rows","autoExpand","_ref","props","_objectWithoutProperties","objectWithoutProperties","_excluded","containerRef","useRef","internalRef","combinedRef","useMergeRefs","useEffect","containerElement","current","handleAutoExpand","value","dataset","replicatedValue","handleInput","event","currentTarget","textAreaElement","addEventListener","removeEventListener","createElement","BaseField","className","styles","textAreaContainer","error","bordered","extraProps","Box","width","display","innerContainer","_objectSpread","objectSpread2","undefined"],"mappings":"4tBA2BiBA,EAAMC,YAA+C,SAiBlEC,EAAAA,GAAG,IAhBHC,QACIA,EAAU,UADdC,GAEIA,EAFJC,MAGIA,EAHJC,eAIIA,EAJJC,eAKIA,EALJC,KAMIA,EANJC,QAOIA,EAPJC,KAQIA,EARJC,SASIA,EATJC,OAUIA,EACAC,mBAAoBC,EAXxBC,KAYIA,EAZJC,WAaIA,GAAa,GAGdC,EAFIC,EAEJC,EAAAC,wBAAAH,EAAAI,GAEH,MAAMC,EAAetB,EAAMuB,OAAuB,MAC5CC,EAAcxB,EAAMuB,OAA4B,MAChDE,EAAcC,EAAYA,aAAC,CAACxB,EAAKsB,IA8BvC,OA5BAxB,EAAM2B,WACF,WACI,MAAMC,EAAmBN,EAAaO,QAEtC,SAASC,EAAiBC,GAClBH,IACAA,EAAiBI,QAAQC,gBAAkBF,GAInD,SAASG,EAAYC,GACjBL,EAAkBK,EAAMC,cAAsCL,OAGlE,MAAMM,EAAkBb,EAAYK,QACpC,GAAKQ,GAAoBrB,EAQzB,OAHAc,EAAiBO,EAAgBN,OAEjCM,EAAgBC,iBAAiB,QAASJ,GACnC,IAAMG,EAAgBE,oBAAoB,QAASL,KAE9D,CAAClB,IAIDhB,EAACwC,cAAAC,aACGtC,QAASA,EACTC,GAAIA,EACJC,MAAOA,EACPC,eAAgBA,EAChBC,eAAgBA,EAChBC,KAAMA,EACNC,QAASA,EACTC,KAAMA,EACNE,OAAQA,qBACUE,EAClB4B,UAAW,CACPC,EAAM,QAACC,kBACE,UAATlC,EAAmBiC,EAAM,QAACE,MAAQ,KACtB,aAAZ1C,EAAyBwC,EAAAA,QAAOG,SAAW,MAE/CnC,SAAUA,GAERoC,GACE/C,EAACwC,cAAAQ,MACG,CAAAC,MAAM,OACNC,QAAQ,OACRR,UAAWC,EAAM,QAACQ,eAClBjD,IAAKoB,GAELtB,EAAAwC,cAAA,WAAAY,EAAAC,cAAAD,EAAAC,cAAAD,gBAAA,GACQlC,GACA6B,GAFR,GAAA,CAGI7C,IAAKuB,EACLV,KAAMA,EACN2B,UAAW1B,EAAa2B,UAAO3B,gBAAasC"}
+{"version":3,"file":"text-area.js","sources":["../../src/text-area/text-area.tsx"],"sourcesContent":["import * as React from 'react'\nimport classNames from 'classnames'\nimport { useMergeRefs } from 'use-callback-ref'\nimport { BaseField, BaseFieldVariantProps, FieldComponentProps } from '../base-field'\nimport { Box } from '../box'\nimport styles from './text-area.module.css'\n\ninterface TextAreaProps extends FieldComponentProps<HTMLTextAreaElement>, BaseFieldVariantProps {\n    /**\n     * The number of visible text lines for the text area.\n     *\n     * If it is specified, it must be a positive integer. If it is not specified, the default\n     * value is 2 (set by the browser).\n     *\n     * When `autoExpand` is true, this value serves the purpose of specifying the minimum number\n     * of rows that the textarea will shrink to when the content is not large enough to make it\n     * expand.\n     *\n     * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea#attr-rows\n     */\n    rows?: number\n\n    /**\n     * If `true`, the textarea will be automatically resized to fit the content, and the ability to\n     * manually resize the textarea will be disabled.\n     */\n    autoExpand?: boolean\n\n    /**\n     * If `true`, the ability to manually resize the textarea will be disabled.\n     *\n     * When `autoExpand` is true, this property serves no purpose, because the ability to manually\n     * resize the textarea is always disabled when `autoExpand` is true.\n     */\n    disableResize?: boolean\n}\n\nconst TextArea = React.forwardRef<HTMLTextAreaElement, TextAreaProps>(function TextArea(\n    {\n        variant = 'default',\n        id,\n        label,\n        value,\n        auxiliaryLabel,\n        message,\n        tone,\n        maxWidth,\n        maxLength,\n        hidden,\n        'aria-describedby': ariaDescribedBy,\n        rows,\n        autoExpand = false,\n        disableResize = false,\n        onChange: originalOnChange,\n        ...props\n    },\n    ref,\n) {\n    const containerRef = React.useRef<HTMLDivElement>(null)\n    const internalRef = React.useRef<HTMLTextAreaElement>(null)\n    const combinedRef = useMergeRefs([ref, internalRef])\n\n    const textAreaClassName = classNames([\n        autoExpand ? styles.disableResize : null,\n        disableResize ? styles.disableResize : null,\n    ])\n\n    React.useEffect(\n        function setupAutoExpand() {\n            const containerElement = containerRef.current\n\n            function handleAutoExpand(value: string) {\n                if (containerElement) {\n                    containerElement.dataset.replicatedValue = value\n                }\n            }\n\n            function handleInput(event: Event) {\n                handleAutoExpand((event.currentTarget as HTMLTextAreaElement).value)\n            }\n\n            const textAreaElement = internalRef.current\n            if (!textAreaElement || !autoExpand) {\n                return undefined\n            }\n\n            // Apply change initially, in case the text area has a non-empty initial value\n            handleAutoExpand(textAreaElement.value)\n\n            textAreaElement.addEventListener('input', handleInput)\n            return () => textAreaElement.removeEventListener('input', handleInput)\n        },\n        [autoExpand],\n    )\n\n    return (\n        <BaseField\n            variant={variant}\n            id={id}\n            label={label}\n            value={value}\n            auxiliaryLabel={auxiliaryLabel}\n            message={message}\n            tone={tone}\n            hidden={hidden}\n            aria-describedby={ariaDescribedBy}\n            className={[\n                styles.textAreaContainer,\n                tone === 'error' ? styles.error : null,\n                variant === 'bordered' ? styles.bordered : null,\n            ]}\n            maxWidth={maxWidth}\n            maxLength={maxLength}\n        >\n            {({ onChange, ...extraProps }) => (\n                <Box\n                    width=\"full\"\n                    display=\"flex\"\n                    className={styles.innerContainer}\n                    ref={containerRef}\n                >\n                    <textarea\n                        {...props}\n                        {...extraProps}\n                        ref={combinedRef}\n                        rows={rows}\n                        className={textAreaClassName}\n                        maxLength={maxLength}\n                        onChange={(event) => {\n                            originalOnChange?.(event)\n                            onChange?.(event)\n                        }}\n                    />\n                </Box>\n            )}\n        </BaseField>\n    )\n})\n\nexport { TextArea }\nexport type { TextAreaProps }\n"],"names":["React","forwardRef","ref","variant","id","label","value","auxiliaryLabel","message","tone","maxWidth","maxLength","hidden","aria-describedby","ariaDescribedBy","rows","autoExpand","disableResize","onChange","originalOnChange","_ref","props","_objectWithoutProperties","objectWithoutProperties","_excluded","containerRef","useRef","internalRef","combinedRef","useMergeRefs","textAreaClassName","classNames","styles","useEffect","containerElement","current","handleAutoExpand","dataset","replicatedValue","handleInput","event","currentTarget","textAreaElement","addEventListener","removeEventListener","createElement","BaseField","className","textAreaContainer","error","bordered","_ref2","extraProps","_excluded2","Box","width","display","innerContainer","_objectSpread","objectSpread2"],"mappings":"y2BAqCiBA,EAAMC,YAA+C,SAmBlEC,EAAAA,GAAG,IAlBHC,QACIA,EAAU,UADdC,GAEIA,EAFJC,MAGIA,EAHJC,MAIIA,EAJJC,eAKIA,EALJC,QAMIA,EANJC,KAOIA,EAPJC,SAQIA,EARJC,UASIA,EATJC,OAUIA,EACAC,mBAAoBC,EAXxBC,KAYIA,EAZJC,WAaIA,GAAa,EAbjBC,cAcIA,GAAgB,EAChBC,SAAUC,GAGXC,EAFIC,EAEJC,EAAAC,wBAAAH,EAAAI,GAEH,MAAMC,EAAezB,EAAM0B,OAAuB,MAC5CC,EAAc3B,EAAM0B,OAA4B,MAChDE,EAAcC,EAAYA,aAAC,CAAC3B,EAAKyB,IAEjCG,EAAoBC,EAAAA,QAAW,CACjCf,EAAagB,EAAAA,QAAOf,cAAgB,KACpCA,EAAgBe,EAAM,QAACf,cAAgB,OA+B3C,OA5BAjB,EAAMiC,WACF,WACI,MAAMC,EAAmBT,EAAaU,QAEtC,SAASC,EAAiB9B,GAClB4B,IACAA,EAAiBG,QAAQC,gBAAkBhC,GAInD,SAASiC,EAAYC,GACjBJ,EAAkBI,EAAMC,cAAsCnC,OAGlE,MAAMoC,EAAkBf,EAAYQ,QACpC,GAAKO,GAAoB1B,EAQzB,OAHAoB,EAAiBM,EAAgBpC,OAEjCoC,EAAgBC,iBAAiB,QAASJ,GACnC,IAAMG,EAAgBE,oBAAoB,QAASL,KAE9D,CAACvB,IAIDhB,EAAC6C,cAAAC,YACG,CAAA3C,QAASA,EACTC,GAAIA,EACJC,MAAOA,EACPC,MAAOA,EACPC,eAAgBA,EAChBC,QAASA,EACTC,KAAMA,EACNG,OAAQA,qBACUE,EAClBiC,UAAW,CACPf,EAAM,QAACgB,kBACE,UAATvC,EAAmBuB,EAAM,QAACiB,MAAQ,KACtB,aAAZ9C,EAAyB6B,EAAAA,QAAOkB,SAAW,MAE/CxC,SAAUA,EACVC,UAAWA,GAEVwC,IAAA,IAACjC,SAAEA,GAAHiC,EAAgBC,EAAhB9B,EAAAC,wBAAA4B,EAAAE,GAAA,OACGrD,EAAC6C,cAAAS,OACGC,MAAM,OACNC,QAAQ,OACRT,UAAWf,EAAM,QAACyB,eAClBvD,IAAKuB,GAELzB,EACQ6C,cAAA,WADRa,EAAAC,cAAAD,EAAAC,cAAAD,gBAAA,GACQrC,GACA+B,GAFR,GAAA,CAGIlD,IAAK0B,EACLb,KAAMA,EACNgC,UAAWjB,EACXnB,UAAWA,EACXO,SAAWsB,IACP,MAAArB,GAAAA,EAAmBqB,GACnB,MAAAtB,GAAAA,EAAWsB"}

package/lib/text-area/text-area.module.css.js

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.default={textAreaContainer:"_55ccf266",innerContainer:"_89bb7098",bordered:"_02a47358",error:"_704ff540",autoExpand:"_145ca8f0"};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.default={textAreaContainer:"a95cb864",innerContainer:"ab9873f7",bordered:"de380efd",error:"_29a9d12f",disableResize:"_44f7147e"};
 //# sourceMappingURL=text-area.module.css.js.map

package/lib/text-field/text-field.js

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("../_virtual/_rollupPluginBabelHelpers.js"),r=require("react"),t=require("../base-field/base-field.js"),a=require("../box/box.js"),l=require("./text-field.module.css.js"),i=require("use-callback-ref");function n(e){if(e&&e.__esModule)return e;var r=Object.create(null);return e&&Object.keys(e).forEach((function(t){if("default"!==t){var a=Object.getOwnPropertyDescriptor(e,t);Object.defineProperty(r,t,a.get?a:{enumerable:!0,get:function(){return e[t]}})}})),r.default=e,r}var d=n(r);const s=["variant","id","label","secondaryLabel","auxiliaryLabel","hint","message","tone","type","maxWidth","hidden","aria-describedby","startSlot","endSlot"];exports.TextField=d.forwardRef((function(r,n){let{variant:o="default",id:u,label:c,secondaryLabel:b,auxiliaryLabel:f,hint:m,message:x,tone:p,type:y="text",maxWidth:g,hidden:h,"aria-describedby":j,startSlot:v,endSlot:L}=r,S=e.objectWithoutProperties(r,s);const q=d.useRef(null),E=i.useMergeRefs([n,q]);function O(e){var r;e.currentTarget!==E.current&&(null==(r=q.current)||r.focus())}return d.createElement(t.BaseField,{variant:o,id:u,label:c,secondaryLabel:b,auxiliaryLabel:f,hint:m,message:x,tone:p,maxWidth:g,hidden:h,"aria-describedby":j},r=>d.createElement(a.Box,{display:"flex",alignItems:"center",className:[l.default.inputWrapper,"error"===p?l.default.error:null,"bordered"===o?l.default.bordered:null],onClick:O},v?d.createElement(a.Box,{className:l.default.slot,display:"flex",marginRight:"bordered"===o?"xsmall":"-xsmall",marginLeft:"bordered"===o?"-xsmall":"xsmall"},v):null,d.createElement("input",e.objectSpread2(e.objectSpread2(e.objectSpread2({},S),r),{},{type:y,ref:E})),L?d.createElement(a.Box,{className:l.default.slot,display:"flex",marginRight:"bordered"===o?"-xsmall":"xsmall",marginLeft:"bordered"===o?"xsmall":"-xsmall"},L):null))}));
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("../_virtual/_rollupPluginBabelHelpers.js"),r=require("react"),t=require("../base-field/base-field.js"),a=require("../box/box.js"),l=require("./text-field.module.css.js"),n=require("use-callback-ref");function i(e){if(e&&e.__esModule)return e;var r=Object.create(null);return e&&Object.keys(e).forEach((function(t){if("default"!==t){var a=Object.getOwnPropertyDescriptor(e,t);Object.defineProperty(r,t,a.get?a:{enumerable:!0,get:function(){return e[t]}})}})),r.default=e,r}var u=i(r);const d=["variant","id","label","value","auxiliaryLabel","message","tone","type","maxWidth","maxLength","hidden","aria-describedby","startSlot","endSlot","onChange"],s=["onChange"];exports.TextField=u.forwardRef((function(r,i){let{variant:o="default",id:c,label:b,value:f,auxiliaryLabel:m,message:x,tone:g,type:p="text",maxWidth:h,maxLength:y,hidden:j,"aria-describedby":v,startSlot:L,endSlot:O,onChange:S}=r,q=e.objectWithoutProperties(r,d);const C=u.useRef(null),E=n.useMergeRefs([i,C]);function P(e){var r;e.currentTarget!==E.current&&(null==(r=C.current)||r.focus())}return u.createElement(t.BaseField,{variant:o,id:c,label:b,value:f,auxiliaryLabel:m,message:x,tone:g,maxWidth:h,maxLength:y,hidden:j,"aria-describedby":v},r=>{let{onChange:t}=r,n=e.objectWithoutProperties(r,s);return u.createElement(a.Box,{display:"flex",alignItems:"center",className:[l.default.inputWrapper,"error"===g?l.default.error:null,"bordered"===o?l.default.bordered:null,q.readOnly?l.default.readOnly:null],onClick:P},L?u.createElement(a.Box,{className:l.default.slot,display:"flex",marginRight:"bordered"===o?"xsmall":"-xsmall",marginLeft:"bordered"===o?"-xsmall":"xsmall"},L):null,u.createElement("input",e.objectSpread2(e.objectSpread2(e.objectSpread2({},q),n),{},{type:p,ref:E,maxLength:y,onChange:e=>{null==S||S(e),null==t||t(e)}})),O?u.createElement(a.Box,{className:l.default.slot,display:"flex",marginRight:"bordered"===o?"-xsmall":"xsmall",marginLeft:"bordered"===o?"xsmall":"-xsmall"},O):null)})}));
 //# sourceMappingURL=text-field.js.map

package/lib/text-field/text-field.js.map

@@ -1 +1 @@
-{"version":3,"file":"text-field.js","sources":["../../src/text-field/text-field.tsx"],"sourcesContent":["import * as React from 'react'\nimport { BaseField, BaseFieldVariantProps } from '../base-field'\nimport { Box } from '../box'\nimport styles from './text-field.module.css'\nimport type { FieldComponentProps } from '../base-field'\nimport { useMergeRefs } from 'use-callback-ref'\n\ntype TextFieldType = 'email' | 'search' | 'tel' | 'text' | 'url'\n\ninterface TextFieldProps\n    extends Omit<FieldComponentProps<HTMLInputElement>, 'type'>,\n        BaseFieldVariantProps {\n    type?: TextFieldType\n    startSlot?: React.ReactElement | string | number\n    endSlot?: React.ReactElement | string | number\n}\n\nconst TextField = React.forwardRef<HTMLInputElement, TextFieldProps>(function TextField(\n    {\n        variant = 'default',\n        id,\n        label,\n        secondaryLabel,\n        auxiliaryLabel,\n        hint,\n        message,\n        tone,\n        type = 'text',\n        maxWidth,\n        hidden,\n        'aria-describedby': ariaDescribedBy,\n        startSlot,\n        endSlot,\n        ...props\n    },\n    ref,\n) {\n    const internalRef = React.useRef<HTMLInputElement>(null)\n    const combinedRef = useMergeRefs([ref, internalRef])\n\n    function handleClick(event: React.MouseEvent) {\n        if (event.currentTarget === combinedRef.current) return\n        internalRef.current?.focus()\n    }\n\n    return (\n        <BaseField\n            variant={variant}\n            id={id}\n            label={label}\n            secondaryLabel={secondaryLabel}\n            auxiliaryLabel={auxiliaryLabel}\n            hint={hint}\n            message={message}\n            tone={tone}\n            maxWidth={maxWidth}\n            hidden={hidden}\n            aria-describedby={ariaDescribedBy}\n        >\n            {(extraProps) => (\n                <Box\n                    display=\"flex\"\n                    alignItems=\"center\"\n                    className={[\n                        styles.inputWrapper,\n                        tone === 'error' ? styles.error : null,\n                        variant === 'bordered' ? styles.bordered : null,\n                    ]}\n                    onClick={handleClick}\n                >\n                    {startSlot ? (\n                        <Box\n                            className={styles.slot}\n                            display=\"flex\"\n                            marginRight={variant === 'bordered' ? 'xsmall' : '-xsmall'}\n                            marginLeft={variant === 'bordered' ? '-xsmall' : 'xsmall'}\n                        >\n                            {startSlot}\n                        </Box>\n                    ) : null}\n                    <input {...props} {...extraProps} type={type} ref={combinedRef} />\n                    {endSlot ? (\n                        <Box\n                            className={styles.slot}\n                            display=\"flex\"\n                            marginRight={variant === 'bordered' ? '-xsmall' : 'xsmall'}\n                            marginLeft={variant === 'bordered' ? 'xsmall' : '-xsmall'}\n                        >\n                            {endSlot}\n                        </Box>\n                    ) : null}\n                </Box>\n            )}\n        </BaseField>\n    )\n})\n\nexport { TextField }\nexport type { TextFieldProps, TextFieldType }\n"],"names":["React","forwardRef","ref","variant","id","label","secondaryLabel","auxiliaryLabel","hint","message","tone","type","maxWidth","hidden","aria-describedby","ariaDescribedBy","startSlot","endSlot","_ref","props","_objectWithoutProperties","objectWithoutProperties","_excluded","internalRef","useRef","combinedRef","useMergeRefs","handleClick","event","_internalRef$current","currentTarget","current","focus","createElement","BaseField","extraProps","Box","display","alignItems","className","styles","inputWrapper","error","bordered","onClick","slot","marginRight","marginLeft"],"mappings":"uuBAiBkBA,EAAMC,YAA6C,SAkBjEC,EAAAA,GAAG,IAjBHC,QACIA,EAAU,UADdC,GAEIA,EAFJC,MAGIA,EAHJC,eAIIA,EAJJC,eAKIA,EALJC,KAMIA,EANJC,QAOIA,EAPJC,KAQIA,EARJC,KASIA,EAAO,OATXC,SAUIA,EAVJC,OAWIA,EACAC,mBAAoBC,EAZxBC,UAaIA,EAbJC,QAcIA,GAGDC,EAFIC,EAEJC,EAAAC,wBAAAH,EAAAI,GAEH,MAAMC,EAAcvB,EAAMwB,OAAyB,MAC7CC,EAAcC,EAAYA,aAAC,CAACxB,EAAKqB,IAEvC,SAASI,EAAYC,GAAuB,IAAAC,EACpCD,EAAME,gBAAkBL,EAAYM,UACxC,OAAAF,EAAAN,EAAYQ,UAAZF,EAAqBG,SAGzB,OACIhC,EAAAiC,cAACC,YAAS,CACN/B,QAASA,EACTC,GAAIA,EACJC,MAAOA,EACPC,eAAgBA,EAChBC,eAAgBA,EAChBC,KAAMA,EACNC,QAASA,EACTC,KAAMA,EACNE,SAAUA,EACVC,OAAQA,EAAMC,mBACIC,GAEhBoB,GACEnC,EAAAiC,cAACG,MAAG,CACAC,QAAQ,OACRC,WAAW,SACXC,UAAW,CACPC,EAAM,QAACC,aACE,UAAT/B,EAAmB8B,EAAM,QAACE,MAAQ,KACtB,aAAZvC,EAAyBqC,EAAAA,QAAOG,SAAW,MAE/CC,QAASjB,GAERX,EACGhB,gBAACoC,MAAG,CACAG,UAAWC,EAAM,QAACK,KAClBR,QAAQ,OACRS,YAAyB,aAAZ3C,EAAyB,SAAW,UACjD4C,WAAwB,aAAZ5C,EAAyB,UAAY,UAEhDa,GAEL,KACJhB,EAAWiC,cAAA,QAAAd,EAAAA,cAAAA,EAAAA,cAAAA,EAAAA,cAAAA,GAAAA,GAAWgB,GAAtB,GAAA,CAAkCxB,KAAMA,EAAMT,IAAKuB,KAClDR,EACGjB,EAAAiC,cAACG,EAAAA,IAAG,CACAG,UAAWC,EAAM,QAACK,KAClBR,QAAQ,OACRS,YAAyB,aAAZ3C,EAAyB,UAAY,SAClD4C,WAAwB,aAAZ5C,EAAyB,SAAW,WAE/Cc,GAEL"}
+{"version":3,"file":"text-field.js","sources":["../../src/text-field/text-field.tsx"],"sourcesContent":["import * as React from 'react'\nimport { BaseField, BaseFieldVariantProps } from '../base-field'\nimport { Box } from '../box'\nimport styles from './text-field.module.css'\nimport type { FieldComponentProps } from '../base-field'\nimport { useMergeRefs } from 'use-callback-ref'\n\ntype TextFieldType = 'email' | 'search' | 'tel' | 'text' | 'url'\n\ninterface TextFieldProps\n    extends Omit<FieldComponentProps<HTMLInputElement>, 'type'>,\n        BaseFieldVariantProps {\n    type?: TextFieldType\n    startSlot?: React.ReactElement | string | number\n    endSlot?: React.ReactElement | string | number\n}\n\nconst TextField = React.forwardRef<HTMLInputElement, TextFieldProps>(function TextField(\n    {\n        variant = 'default',\n        id,\n        label,\n        value,\n        auxiliaryLabel,\n        message,\n        tone,\n        type = 'text',\n        maxWidth,\n        maxLength,\n        hidden,\n        'aria-describedby': ariaDescribedBy,\n        startSlot,\n        endSlot,\n        onChange: originalOnChange,\n        ...props\n    },\n    ref,\n) {\n    const internalRef = React.useRef<HTMLInputElement>(null)\n    const combinedRef = useMergeRefs([ref, internalRef])\n\n    function handleClick(event: React.MouseEvent) {\n        if (event.currentTarget === combinedRef.current) return\n        internalRef.current?.focus()\n    }\n\n    return (\n        <BaseField\n            variant={variant}\n            id={id}\n            label={label}\n            value={value}\n            auxiliaryLabel={auxiliaryLabel}\n            message={message}\n            tone={tone}\n            maxWidth={maxWidth}\n            maxLength={maxLength}\n            hidden={hidden}\n            aria-describedby={ariaDescribedBy}\n        >\n            {({ onChange, ...extraProps }) => (\n                <Box\n                    display=\"flex\"\n                    alignItems=\"center\"\n                    className={[\n                        styles.inputWrapper,\n                        tone === 'error' ? styles.error : null,\n                        variant === 'bordered' ? styles.bordered : null,\n                        props.readOnly ? styles.readOnly : null,\n                    ]}\n                    onClick={handleClick}\n                >\n                    {startSlot ? (\n                        <Box\n                            className={styles.slot}\n                            display=\"flex\"\n                            marginRight={variant === 'bordered' ? 'xsmall' : '-xsmall'}\n                            marginLeft={variant === 'bordered' ? '-xsmall' : 'xsmall'}\n                        >\n                            {startSlot}\n                        </Box>\n                    ) : null}\n                    <input\n                        {...props}\n                        {...extraProps}\n                        type={type}\n                        ref={combinedRef}\n                        maxLength={maxLength}\n                        onChange={(event) => {\n                            originalOnChange?.(event)\n                            onChange?.(event)\n                        }}\n                    />\n                    {endSlot ? (\n                        <Box\n                            className={styles.slot}\n                            display=\"flex\"\n                            marginRight={variant === 'bordered' ? '-xsmall' : 'xsmall'}\n                            marginLeft={variant === 'bordered' ? 'xsmall' : '-xsmall'}\n                        >\n                            {endSlot}\n                        </Box>\n                    ) : null}\n                </Box>\n            )}\n        </BaseField>\n    )\n})\n\nexport { TextField }\nexport type { TextFieldProps, TextFieldType }\n"],"names":["React","forwardRef","ref","variant","id","label","value","auxiliaryLabel","message","tone","type","maxWidth","maxLength","hidden","aria-describedby","ariaDescribedBy","startSlot","endSlot","onChange","originalOnChange","_ref","props","_objectWithoutProperties","objectWithoutProperties","_excluded","internalRef","useRef","combinedRef","useMergeRefs","handleClick","event","_internalRef$current","currentTarget","current","focus","createElement","BaseField","_ref2","extraProps","_excluded2","Box","display","alignItems","className","styles","inputWrapper","error","bordered","readOnly","onClick","slot","marginRight","marginLeft"],"mappings":"6vBAiBkBA,EAAMC,YAA6C,SAmBjEC,EAAAA,GAAG,IAlBHC,QACIA,EAAU,UADdC,GAEIA,EAFJC,MAGIA,EAHJC,MAIIA,EAJJC,eAKIA,EALJC,QAMIA,EANJC,KAOIA,EAPJC,KAQIA,EAAO,OARXC,SASIA,EATJC,UAUIA,EAVJC,OAWIA,EACAC,mBAAoBC,EAZxBC,UAaIA,EAbJC,QAcIA,EACAC,SAAUC,GAGXC,EAFIC,EAEJC,EAAAC,wBAAAH,EAAAI,GAEH,MAAMC,EAAczB,EAAM0B,OAAyB,MAC7CC,EAAcC,EAAYA,aAAC,CAAC1B,EAAKuB,IAEvC,SAASI,EAAYC,GAAuB,IAAAC,EACpCD,EAAME,gBAAkBL,EAAYM,UACxC,OAAAF,EAAAN,EAAYQ,UAAZF,EAAqBG,SAGzB,OACIlC,EAAAmC,cAACC,YAAS,CACNjC,QAASA,EACTC,GAAIA,EACJC,MAAOA,EACPC,MAAOA,EACPC,eAAgBA,EAChBC,QAASA,EACTC,KAAMA,EACNE,SAAUA,EACVC,UAAWA,EACXC,OAAQA,EACUC,mBAAAC,GAEjBsB,IAAA,IAACnB,SAAEA,GAAHmB,EAAgBC,EAAhBhB,EAAAC,wBAAAc,EAAAE,GAAA,OACGvC,EAAAmC,cAACK,MACG,CAAAC,QAAQ,OACRC,WAAW,SACXC,UAAW,CACPC,EAAM,QAACC,aACE,UAATpC,EAAmBmC,EAAM,QAACE,MAAQ,KACtB,aAAZ3C,EAAyByC,EAAM,QAACG,SAAW,KAC3C1B,EAAM2B,SAAWJ,EAAM,QAACI,SAAW,MAEvCC,QAASpB,GAERb,EACGhB,gBAACwC,MAAG,CACAG,UAAWC,EAAM,QAACM,KAClBT,QAAQ,OACRU,YAAyB,aAAZhD,EAAyB,SAAW,UACjDiD,WAAwB,aAAZjD,EAAyB,UAAY,UAEhDa,GAEL,KACJhB,EACQmC,cAAA,QAAAd,EAAAA,cAAAA,EAAAA,cAAAA,EAAAA,cAAAA,GAAAA,GACAiB,GAFR,GAAA,CAGI5B,KAAMA,EACNR,IAAKyB,EACLf,UAAWA,EACXM,SAAWY,IACP,MAAAX,GAAAA,EAAmBW,GACnB,MAAAZ,GAAAA,EAAWY,OAGlBb,EACGjB,EAAAmC,cAACK,EAAAA,IAAG,CACAG,UAAWC,EAAM,QAACM,KAClBT,QAAQ,OACRU,YAAyB,aAAZhD,EAAyB,UAAY,SAClDiD,WAAwB,aAAZjD,EAAyB,SAAW,WAE/Cc,GAEL"}

package/lib/text-field/text-field.module.css.js

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.default={inputWrapper:"dea25485",bordered:"_80b6b376",error:"_1a32867a",slot:"dbbd207e"};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.default={inputWrapper:"f2de4e8d",readOnly:"ee26e40c",bordered:"_3afb1a56",error:"f3ff9f57",slot:"_3eb7b0ef"};
 //# sourceMappingURL=text-field.module.css.js.map

package/package.json

@@ -6,7 +6,7 @@
         "email": "henning@doist.com",
         "url": "http://doist.com"
     },
-    "version": "25.1.1",
+    "version": "26.0.0",
     "license": "MIT",
     "homepage": "https://github.com/Doist/reactist#readme",
     "repository": {

package/styles/base-field.css

@@ -4,6 +4,7 @@
 ._68ab48ca{min-width:0}._6fa2b565{min-width:var(--reactist-width-xsmall)}.dd50fabd{min-width:var(--reactist-width-small)}.e7e2c808{min-width:var(--reactist-width-medium)}._6abbe25e{min-width:var(--reactist-width-large)}._54f479ac{min-width:var(--reactist-width-xlarge)}._148492bc{max-width:var(--reactist-width-xsmall)}.bd023b96{max-width:var(--reactist-width-small)}.e102903f{max-width:var(--reactist-width-medium)}._0e8d76d7{max-width:var(--reactist-width-large)}._47a031d0{max-width:var(--reactist-width-xlarge)}.cd4c8183{max-width:100%}._5f5959e8{width:0}._8c75067a{width:100%}._56a651f6{width:auto}._26f87bb8{width:-moz-max-content;width:-webkit-max-content;width:max-content}._07a6ab44{width:-moz-min-content;width:-webkit-min-content;width:min-content}.a87016fa{width:-moz-fit-content;width:-webkit-fit-content;width:fit-content}._1a972e50{width:var(--reactist-width-xsmall)}.c96d8261{width:var(--reactist-width-small)}.f3829d42{width:var(--reactist-width-medium)}._2caef228{width:var(--reactist-width-large)}._069e1491{width:var(--reactist-width-xlarge)}
 ._64ed24f4{gap:0}._2580a74b{gap:var(--reactist-spacing-xsmall)}.c68f8bf6{gap:var(--reactist-spacing-small)}._43e5f8e9{gap:var(--reactist-spacing-medium)}._966b120f{gap:var(--reactist-spacing-large)}.f957894c{gap:var(--reactist-spacing-xlarge)}._8cca104b{gap:var(--reactist-spacing-xxlarge)}@media (min-width:768px){._5797cee2{gap:0}._9015672f{gap:var(--reactist-spacing-xsmall)}._7ec86eec{gap:var(--reactist-spacing-small)}._714d7179{gap:var(--reactist-spacing-medium)}.ae1deb59{gap:var(--reactist-spacing-large)}.e1cfce55{gap:var(--reactist-spacing-xlarge)}._168a8ff8{gap:var(--reactist-spacing-xxlarge)}}@media (min-width:992px){._43e2b619{gap:0}._0ea9bf88{gap:var(--reactist-spacing-xsmall)}.d451307a{gap:var(--reactist-spacing-small)}.bf93cf66{gap:var(--reactist-spacing-medium)}._1430cddf{gap:var(--reactist-spacing-large)}.fa00c93e{gap:var(--reactist-spacing-xlarge)}._6f3aee54{gap:var(--reactist-spacing-xxlarge)}}
 .a83bd4e0{font-family:var(--reactist-font-family);font-size:var(--reactist-font-size-body);font-weight:var(--reactist-font-weight-regular);color:var(--reactist-content-primary)}._266d6623{font-size:var(--reactist-font-size-caption)}.a8d37c6e{font-size:var(--reactist-font-size-copy)}._39f4eb1f{font-size:var(--reactist-font-size-subtitle)}._7be5c531{font-weight:var(--reactist-font-weight-medium)}.e214ff2e{font-weight:var(--reactist-font-weight-strong)}._6a3e5ade{color:var(--reactist-content-secondary)}._8f5b5f2b{color:var(--reactist-content-danger)}._9ae47ae4{color:var(--reactist-content-positive)}._969f18f7{display:-webkit-box;-webkit-box-orient:vertical;overflow:hidden}._2f303ac3{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.d3e04245{-webkit-line-clamp:2}._33411704{-webkit-line-clamp:3}.bfc32640{-webkit-line-clamp:4}.f813c82f{-webkit-line-clamp:5}
-._7acdc928{font-family:var(--reactist-font-family)}._7acdc928 ._815bad88,._7acdc928 label{padding-bottom:var(--reactist-spacing-small)}._7acdc928.e35886fe{border-radius:var(--reactist-border-radius-large);border:1px solid var(--reactist-inputs-idle);padding:var(--reactist-spacing-small);padding-bottom:var(--reactist-spacing-xsmall);overflow:clip}._7acdc928.e35886fe label{flex-grow:1;cursor:text}._7acdc928.e35886fe label span{cursor:default}._7acdc928.e35886fe:focus-within{border-color:var(--reactist-inputs-focus)!important}._7acdc928.e35886fe._6c7b5dc8{border-color:var(--reactist-inputs-alert)!important}._7acdc928.e35886fe .ec74af87{font-weight:500}._7acdc928.e35886fe ._815bad88{font-size:var(--reactist-font-size-caption)}._7acdc928:not(.e35886fe) .ec74af87{font-weight:var(--reactist-font-weight-strong)}._7acdc928:not(.e35886fe) ._815bad88{font-size:var(--reactist-font-size-body)}._6db0ec44{color:var(--reactist-content-secondary)}._815bad88{text-align:right}._05c35af8{vertical-align:bottom}
+.d5ff04da{font-family:var(--reactist-font-family)}.d5ff04da ._8d2b52f1,.d5ff04da label{padding-bottom:var(--reactist-spacing-small)}.d5ff04da._49c37b27{border-radius:var(--reactist-border-radius-large);border:1px solid var(--reactist-inputs-idle);padding:var(--reactist-spacing-small);padding-bottom:var(--reactist-spacing-xsmall);overflow:clip}.d5ff04da._49c37b27 label{flex-grow:1;cursor:text}.d5ff04da._49c37b27 label span{cursor:default}.d5ff04da._49c37b27:focus-within{border-color:var(--reactist-inputs-focus)!important}.d5ff04da._49c37b27._922ff337{border-color:var(--reactist-inputs-alert)!important}.d5ff04da._49c37b27 .af23c791{font-weight:500}.d5ff04da._49c37b27 ._8d2b52f1{font-size:var(--reactist-font-size-caption)}.d5ff04da:not(._49c37b27) .af23c791{font-weight:var(--reactist-font-weight-strong)}.d5ff04da:not(._49c37b27) ._8d2b52f1{font-size:var(--reactist-font-size-body)}._8d2b52f1{text-align:right}._75edcef6{vertical-align:bottom}
 ._3f3a401c{border-bottom:1px solid var(--reactist-divider-primary)}._03b05b70{border-bottom:1px solid var(--reactist-divider-secondary)}.b6f67ff8{border-bottom:1px solid var(--reactist-divider-tertiary)}
-:root{--reactist-spinner-tint:var(--reactist-bg-brand);--reactist-spinner-fill:var(--reactist-framework-fill-crest)}@-webkit-keyframes _54fbe2b3{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}@keyframes _54fbe2b3{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}._51539197{-webkit-animation-name:_54fbe2b3;animation-name:_54fbe2b3;-webkit-animation-duration:1.2s;animation-duration:1.2s;-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite;-webkit-animation-timing-function:linear;animation-timing-function:linear}.a0c466ed{fill:var(--reactist-spinner-tint)}._745b73d3{fill:var(--reactist-spinner-fill)}
+:root{--reactist-spinner-tint:var(--reactist-bg-brand);--reactist-spinner-fill:var(--reactist-framework-fill-crest)}@-webkit-keyframes _54fbe2b3{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}@keyframes _54fbe2b3{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}._51539197{-webkit-animation-name:_54fbe2b3;animation-name:_54fbe2b3;-webkit-animation-duration:1.2s;animation-duration:1.2s;-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite;-webkit-animation-timing-function:linear;animation-timing-function:linear}.a0c466ed{fill:var(--reactist-spinner-tint)}._745b73d3{fill:var(--reactist-spinner-fill)}
+.eae3d34f,.eae3d34f>:last-child{--reactist-columns-gap:0px}._9b4012c9{--reactist-columns-gap:var(--reactist-spacing-xsmall)}.e35e0320{--reactist-columns-gap:var(--reactist-spacing-small)}._0703e67f{--reactist-columns-gap:var(--reactist-spacing-medium)}._1cf15621{--reactist-columns-gap:var(--reactist-spacing-large)}._1c7dff67{--reactist-columns-gap:var(--reactist-spacing-xlarge)}._25bee9b6{--reactist-columns-gap:var(--reactist-spacing-xxlarge)}._4bb9987d{flex-basis:content}._9dd31975{flex-basis:auto}._38d11c0e{flex-basis:calc(50% - var(--reactist-columns-gap))}._7ac225c6{flex-basis:calc(33.33333% - var(--reactist-columns-gap))}._9c340680{flex-basis:calc(66.66667% - var(--reactist-columns-gap))}._81cb99d2{flex-basis:calc(25% - var(--reactist-columns-gap))}._10fd355f{flex-basis:calc(75% - var(--reactist-columns-gap))}._3ee66520{flex-basis:calc(20% - var(--reactist-columns-gap))}.df1201a5{flex-basis:calc(40% - var(--reactist-columns-gap))}.f772e0b2{flex-basis:calc(60% - var(--reactist-columns-gap))}._880cbbb1{flex-basis:calc(80% - var(--reactist-columns-gap))}

package/styles/base-field.module.css.css

@@ -1 +1 @@
-._7acdc928{font-family:var(--reactist-font-family)}._7acdc928 ._815bad88,._7acdc928 label{padding-bottom:var(--reactist-spacing-small)}._7acdc928.e35886fe{border-radius:var(--reactist-border-radius-large);border:1px solid var(--reactist-inputs-idle);padding:var(--reactist-spacing-small);padding-bottom:var(--reactist-spacing-xsmall);overflow:clip}._7acdc928.e35886fe label{flex-grow:1;cursor:text}._7acdc928.e35886fe label span{cursor:default}._7acdc928.e35886fe:focus-within{border-color:var(--reactist-inputs-focus)!important}._7acdc928.e35886fe._6c7b5dc8{border-color:var(--reactist-inputs-alert)!important}._7acdc928.e35886fe .ec74af87{font-weight:500}._7acdc928.e35886fe ._815bad88{font-size:var(--reactist-font-size-caption)}._7acdc928:not(.e35886fe) .ec74af87{font-weight:var(--reactist-font-weight-strong)}._7acdc928:not(.e35886fe) ._815bad88{font-size:var(--reactist-font-size-body)}._6db0ec44{color:var(--reactist-content-secondary)}._815bad88{text-align:right}._05c35af8{vertical-align:bottom}
+.d5ff04da{font-family:var(--reactist-font-family)}.d5ff04da ._8d2b52f1,.d5ff04da label{padding-bottom:var(--reactist-spacing-small)}.d5ff04da._49c37b27{border-radius:var(--reactist-border-radius-large);border:1px solid var(--reactist-inputs-idle);padding:var(--reactist-spacing-small);padding-bottom:var(--reactist-spacing-xsmall);overflow:clip}.d5ff04da._49c37b27 label{flex-grow:1;cursor:text}.d5ff04da._49c37b27 label span{cursor:default}.d5ff04da._49c37b27:focus-within{border-color:var(--reactist-inputs-focus)!important}.d5ff04da._49c37b27._922ff337{border-color:var(--reactist-inputs-alert)!important}.d5ff04da._49c37b27 .af23c791{font-weight:500}.d5ff04da._49c37b27 ._8d2b52f1{font-size:var(--reactist-font-size-caption)}.d5ff04da:not(._49c37b27) .af23c791{font-weight:var(--reactist-font-weight-strong)}.d5ff04da:not(._49c37b27) ._8d2b52f1{font-size:var(--reactist-font-size-body)}._8d2b52f1{text-align:right}._75edcef6{vertical-align:bottom}