@cloudscape-design/components-themeable 3.0.157 → 3.0.158

package/lib/internal/template/input/internal.js

@@ -1,7 +1,7 @@
 import { __assign, __rest } from "tslib";
 // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
 // SPDX-License-Identifier: Apache-2.0
-import React, { useRef } from 'react';
+import React, { useEffect, useRef } from 'react';
 import clsx from 'clsx';
 import { useMergeRefs } from '../internal/hooks/use-merge-refs';
 import InternalIcon from '../icon/internal';
@@ -31,8 +31,14 @@ function InternalInput(_a, ref) {
     __rightIcon = __rightIcon !== null && __rightIcon !== void 0 ? __rightIcon : searchProps.__rightIcon;
     __onRightIconClick = __onRightIconClick !== null && __onRightIconClick !== void 0 ? __onRightIconClick : searchProps.__onRightIconClick;
     var formFieldContext = useFormFieldContext(rest);
-    var _g = __inheritFormFieldProps ? formFieldContext : rest, ariaLabelledby = _g.ariaLabelledby, ariaDescribedby = _g.ariaDescribedby, controlId = _g.controlId, invalid = _g.invalid;
-    var attributes = __assign({ 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledby, 'aria-describedby': ariaDescribedby, name: name, placeholder: placeholder, autoFocus: autoFocus, id: controlId, className: clsx(styles.input, type && styles["input-type-".concat(type)], __rightIcon && styles['input-has-icon-right'], __leftIcon && styles['input-has-icon-left'], __noBorderRadius && styles['input-has-no-border-radius'], (_b = {},
+    var _g = __inheritFormFieldProps
+        ? formFieldContext
+        : __assign({ __useReactAutofocus: undefined }, rest), ariaLabelledby = _g.ariaLabelledby, ariaDescribedby = _g.ariaDescribedby, controlId = _g.controlId, invalid = _g.invalid, __useReactAutofocus = _g.__useReactAutofocus;
+    var autoFocusEnabled = (__nativeAttributes === null || __nativeAttributes === void 0 ? void 0 : __nativeAttributes.autoFocus) || autoFocus;
+    var reactAutofocusProps = __useReactAutofocus
+        ? { autoFocus: !autoFocusEnabled, 'data-awsui-react-autofocus': autoFocusEnabled }
+        : {};
+    var attributes = __assign(__assign({ 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledby, 'aria-describedby': ariaDescribedby, name: name, placeholder: placeholder, autoFocus: autoFocus, id: controlId, className: clsx(styles.input, type && styles["input-type-".concat(type)], __rightIcon && styles['input-has-icon-right'], __leftIcon && styles['input-has-icon-left'], __noBorderRadius && styles['input-has-no-border-radius'], (_b = {},
             _b[styles['input-readonly']] = readOnly,
             _b[styles['input-invalid']] = invalid,
             _b)), autoComplete: convertAutoComplete(autoComplete), disabled: disabled, readOnly: readOnly, type: type, step: step, inputMode: inputMode, spellCheck: spellcheck, onKeyDown: onKeyDown && (function (event) { return fireKeyboardEvent(onKeyDown, event); }), onKeyUp: onKeyUp && (function (event) { return fireKeyboardEvent(onKeyUp, event); }), 
@@ -40,7 +46,7 @@ function InternalInput(_a, ref) {
         value: value !== null && value !== void 0 ? value : '', onChange: onChange && (function (event) { return handleChange(event.target.value); }), onBlur: function (e) {
             onBlur && fireNonCancelableEvent(onBlur);
             __onBlurWithDetail && fireNonCancelableEvent(__onBlurWithDetail, { relatedTarget: e.relatedTarget });
-        }, onFocus: onFocus && (function () { return fireNonCancelableEvent(onFocus); }) }, __nativeAttributes);
+        }, onFocus: onFocus && (function () { return fireNonCancelableEvent(onFocus); }) }, __nativeAttributes), reactAutofocusProps);
     if (type === 'number') {
         // Chrome and Safari have a weird built-in behavior of letting focused
         // number inputs be controlled by scrolling on them. However, they don't
@@ -64,6 +70,12 @@ function InternalInput(_a, ref) {
     if (attributes.type === 'visualSearch') {
         attributes.type = 'text';
     }
+    useEffect(function () {
+        var _a;
+        if (__useReactAutofocus && autoFocusEnabled) {
+            (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus({ preventScroll: true });
+        }
+    }, [__useReactAutofocus, autoFocusEnabled]);
     return (React.createElement("div", __assign({}, baseProps, { className: clsx(baseProps.className, styles['input-container']), ref: __internalRootRef }),
         __leftIcon && (React.createElement("span", { onClick: __onLeftIconClick, className: iconClassName('left', !!__onLeftIconClick) },
             React.createElement(InternalIcon, { name: __leftIcon, variant: disabled ? 'disabled' : __leftIconVariant }))),

package/lib/internal/template/input/internal.js.map

@@ -1 +1 @@
-{"version":3,"file":"internal.js","sourceRoot":"","sources":["../../../src/input/internal.tsx"],"names":[],"mappings":";AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,EAAE,EAA0B,MAAM,EAAE,MAAM,OAAO,CAAC;AAC9D,OAAO,IAAI,MAAM,MAAM,CAAC;AACxB,OAAO,EAAE,YAAY,EAAE,MAAM,kCAAkC,CAAC;AAEhE,OAAO,YAAY,MAAM,kBAAkB,CAAC;AAC5C,OAAO,MAAM,MAAM,iBAAiB,CAAC;AACrC,OAAO,EAAE,sBAAsB,EAAE,iBAAiB,EAA6B,MAAM,oBAAoB,CAAC;AAE1G,OAAO,EAAsB,YAAY,EAAE,MAAM,4BAA4B,CAAC;AAC9E,OAAO,EAAE,cAAc,EAAE,mBAAmB,EAAE,MAAM,SAAS,CAAC;AAC9D,OAAO,EAAE,mBAAmB,EAAE,MAAM,yCAAyC,CAAC;AAC9E,OAAO,EAAmC,mBAAmB,EAAE,MAAM,wCAAwC,CAAC;AA4B9G,IAAM,aAAa,GAAG,UAAC,QAAgB,EAAE,UAAmB;;IAC1D,OAAA,IAAI,CAAC,MAAM,CAAC,YAAY,CAAC,EAAE,MAAM,CAAC,qBAAc,QAAQ,CAAE,CAAC,YAAI,GAAC,MAAM,CAAC,sBAAsB,CAAC,IAAG,UAAU,MAAG;AAA9G,CAA8G,CAAC;AACjH,IAAM,gBAAgB,GAAsB,UAAA,CAAC,IAAI,OAAA,CAAC,CAAC,cAAc,EAAE,EAAlB,CAAkB,CAAC;AAEpE,SAAS,aAAa,CACpB,EAqCqB,EACrB,GAA0B;;IArCxB,IAAA,YAAa,EAAb,IAAI,mBAAG,MAAM,KAAA,EACb,IAAI,UAAA,EACJ,SAAS,eAAA,EACT,oBAAmB,EAAnB,YAAY,mBAAG,IAAI,KAAA,EACnB,SAAS,eAAA,EACT,IAAI,UAAA,EACJ,KAAK,WAAA,EACL,WAAW,iBAAA,EACX,SAAS,eAAA,EACT,QAAQ,cAAA,EACR,QAAQ,cAAA,EACR,yBAAyB,+BAAA,EACzB,UAAU,gBAAA,EACV,gBAAgB,sBAAA,EAEhB,UAAU,gBAAA,EACV,yBAA4B,EAA5B,iBAAiB,mBAAG,QAAQ,KAAA,EAC5B,iBAAiB,uBAAA,EAEjB,YAAY,kBAAA,EAEZ,WAAW,iBAAA,EACX,0BAA6B,EAA7B,kBAAkB,mBAAG,QAAQ,KAAA,EAC7B,kBAAkB,wBAAA,EAElB,SAAS,eAAA,EACT,OAAO,aAAA,EACP,QAAQ,cAAA,EACR,gBAAgB,sBAAA,EAChB,kBAAkB,wBAAA,EAClB,MAAM,YAAA,EACN,OAAO,aAAA,EACP,kBAAkB,wBAAA,EAClB,iBAAiB,uBAAA,EACjB,uBAAuB,6BAAA,EACpB,IAAI,cApCT,0eAqCC,CADQ;IAIT,IAAM,SAAS,GAAG,YAAY,CAAC,IAAI,CAAC,CAAC;IACrC,IAAM,gBAAgB,GAAG,mBAAmB,CAAC,UAAC,KAAa,IAAK,OAAA,sBAAsB,CAAC,gBAAgB,EAAE,EAAE,KAAK,OAAA,EAAE,CAAC,EAAnD,CAAmD,CAAC,CAAC;IAErH,IAAM,YAAY,GAAG,UAAC,KAAa;QACjC,gBAAgB,CAAC,KAAK,CAAC,CAAC;QACxB,sBAAsB,CAAC,QAAQ,EAAE,EAAE,KAAK,OAAA,EAAE,CAAC,CAAC;IAC9C,CAAC,CAAC;IAEF,IAAM,QAAQ,GAAG,MAAM,CAAmB,IAAI,CAAC,CAAC;IAChD,IAAM,WAAW,GAAG,cAAc,CAAC,IAAI,EAAE,QAAQ,EAAE,QAAQ,EAAE,KAAK,EAAE,QAAQ,EAAE,YAAY,CAAC,CAAC;IAC5F,UAAU,GAAG,UAAU,aAAV,UAAU,cAAV,UAAU,GAAI,WAAW,CAAC,UAAU,CAAC;IAClD,WAAW,GAAG,WAAW,aAAX,WAAW,cAAX,WAAW,GAAI,WAAW,CAAC,WAAW,CAAC;IACrD,kBAAkB,GAAG,kBAAkB,aAAlB,kBAAkB,cAAlB,kBAAkB,GAAI,WAAW,CAAC,kBAAkB,CAAC;IAE1E,IAAM,gBAAgB,GAAG,mBAAmB,CAAC,IAAI,CAAC,CAAC;IAC7C,IAAA,KAA0D,uBAAuB,CAAC,CAAC,CAAC,gBAAgB,CAAC,CAAC,CAAC,IAAI,EAAzG,cAAc,oBAAA,EAAE,eAAe,qBAAA,EAAE,SAAS,eAAA,EAAE,OAAO,aAAsD,CAAC;IAElH,IAAM,UAAU,cACd,YAAY,EAAE,SAAS,EACvB,iBAAiB,EAAE,cAAc,EACjC,kBAAkB,EAAE,eAAe,EACnC,IAAI,MAAA,EACJ,WAAW,aAAA,EACX,SAAS,WAAA,EACT,EAAE,EAAE,SAAS,EACb,SAAS,EAAE,IAAI,CACb,MAAM,CAAC,KAAK,EACZ,IAAI,IAAI,MAAM,CAAC,qBAAc,IAAI,CAAE,CAAC,EACpC,WAAW,IAAI,MAAM,CAAC,sBAAsB,CAAC,EAC7C,UAAU,IAAI,MAAM,CAAC,qBAAqB,CAAC,EAC3C,gBAAgB,IAAI,MAAM,CAAC,4BAA4B,CAAC;YAEtD,GAAC,MAAM,CAAC,gBAAgB,CAAC,IAAG,QAAQ;YACpC,GAAC,MAAM,CAAC,eAAe,CAAC,IAAG,OAAO;gBAErC,EACD,YAAY,EAAE,mBAAmB,CAAC,YAAY,CAAC,EAC/C,QAAQ,UAAA,EACR,QAAQ,UAAA,EACR,IAAI,MAAA,EACJ,IAAI,MAAA,EACJ,SAAS,WAAA,EACT,UAAU,EAAE,UAAU,EACtB,SAAS,EAAE,SAAS,IAAI,CAAC,UAAA,KAAK,IAAI,OAAA,iBAAiB,CAAC,SAAS,EAAE,KAAK,CAAC,EAAnC,CAAmC,CAAC,EACtE,OAAO,EAAE,OAAO,IAAI,CAAC,UAAA,KAAK,IAAI,OAAA,iBAAiB,CAAC,OAAO,EAAE,KAAK,CAAC,EAAjC,CAAiC,CAAC;QAChE,yFAAyF;QACzF,KAAK,EAAE,KAAK,aAAL,KAAK,cAAL,KAAK,GAAI,EAAE,EAClB,QAAQ,EAAE,QAAQ,IAAI,CAAC,UAAA,KAAK,IAAI,OAAA,YAAY,CAAC,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC,EAAhC,CAAgC,CAAC,EACjE,MAAM,EAAE,UAAA,CAAC;YACP,MAAM,IAAI,sBAAsB,CAAC,MAAM,CAAC,CAAC;YACzC,kBAAkB,IAAI,sBAAsB,CAAC,kBAAkB,EAAE,EAAE,aAAa,EAAE,CAAC,CAAC,aAAa,EAAE,CAAC,CAAC;QACvG,CAAC,EACD,OAAO,EAAE,OAAO,IAAI,CAAC,cAAM,OAAA,sBAAsB,CAAC,OAAO,CAAC,EAA/B,CAA+B,CAAC,IACxD,kBAAkB,CACtB,CAAC;IAEF,IAAI,IAAI,KAAK,QAAQ,EAAE;QACrB,sEAAsE;QACtE,wEAAwE;QACxE,yEAAyE;QACzE,2CAA2C;QAC3C,UAAU,CAAC,OAAO,GAAG,UAAA,KAAK,IAAI,OAAA,KAAK,CAAC,aAAa,CAAC,IAAI,EAAE,EAA1B,CAA0B,CAAC;KAC1D;IAED,IAAI,yBAAyB,EAAE;QAC7B,UAAU,CAAC,WAAW,GAAG,KAAK,CAAC;QAC/B,UAAU,CAAC,cAAc,GAAG,KAAK,CAAC;KACnC;IAED,mDAAmD;IACnD,IAAI,YAAY,EAAE;QAChB,UAAU,CAAC,eAAe,CAAC,GAAG,MAAM,CAAC;KACtC;IACD,IAAI,OAAO,EAAE;QACX,UAAU,CAAC,cAAc,CAAC,GAAG,MAAM,CAAC;KACrC;IAED,IAAM,SAAS,GAAG,YAAY,CAAC,GAAG,EAAE,QAAQ,CAAC,CAAC;IAE9C,oDAAoD;IACpD,IAAI,UAAU,CAAC,IAAI,KAAK,cAAc,EAAE;QACtC,UAAU,CAAC,IAAI,GAAG,MAAM,CAAC;KAC1B;IAED,OAAO,CACL,wCAAS,SAAS,IAAE,SAAS,EAAE,IAAI,CAAC,SAAS,CAAC,SAAS,EAAE,MAAM,CAAC,iBAAiB,CAAC,CAAC,EAAE,GAAG,EAAE,iBAAiB;QACxG,UAAU,IAAI,CACb,8BAAM,OAAO,EAAE,iBAAiB,EAAE,SAAS,EAAE,aAAa,CAAC,MAAM,EAAE,CAAC,CAAC,iBAAiB,CAAC;YACrF,oBAAC,YAAY,IAAC,IAAI,EAAE,UAAU,EAAE,OAAO,EAAE,QAAQ,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,iBAAiB,GAAI,CACjF,CACR;QACD,wCAAO,GAAG,EAAE,SAAS,IAAM,UAAU,EAAI;QACxC,WAAW,IAAI,CACd,8BACE,OAAO,EAAE,kBAAkB,EAC3B,WAAW,EAAE,gBAAgB,EAC7B,SAAS,EAAE,aAAa,CAAC,OAAO,EAAE,CAAC,CAAC,kBAAkB,CAAC;YAEvD,oBAAC,YAAY,IAAC,IAAI,EAAE,WAAW,EAAE,OAAO,EAAE,QAAQ,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,kBAAkB,GAAI,CACnF,CACR,CACG,CACP,CAAC;AACJ,CAAC;AAED,eAAe,KAAK,CAAC,UAAU,CAAC,aAAa,CAAC,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React, { MouseEventHandler, Ref, useRef } from 'react';\nimport clsx from 'clsx';\nimport { useMergeRefs } from '../internal/hooks/use-merge-refs';\nimport { IconProps } from '../icon/interfaces';\nimport InternalIcon from '../icon/internal';\nimport styles from './styles.css.js';\nimport { fireNonCancelableEvent, fireKeyboardEvent, NonCancelableEventHandler } from '../internal/events';\nimport { InputProps, BaseInputProps, InputAutoCorrect, BaseChangeDetail } from './interfaces';\nimport { BaseComponentProps, getBaseProps } from '../internal/base-component';\nimport { useSearchProps, convertAutoComplete } from './utils';\nimport { useDebounceCallback } from '../internal/hooks/use-debounce-callback';\nimport { FormFieldValidationControlProps, useFormFieldContext } from '../internal/context/form-field-context';\nimport { InternalBaseComponentProps } from '../internal/hooks/use-base-component';\n\nexport interface InternalInputProps\n  extends BaseComponentProps,\n    BaseInputProps,\n    Omit<InputProps, 'type'>,\n    InputAutoCorrect,\n    FormFieldValidationControlProps,\n    InternalBaseComponentProps {\n  type?: InputProps['type'] | 'visualSearch';\n  __leftIcon?: IconProps['name'];\n  __leftIconVariant?: IconProps['variant'];\n  __onLeftIconClick?: () => void;\n\n  __rightIcon?: IconProps['name'];\n  __rightIconVariant?: IconProps['variant'];\n  __onRightIconClick?: () => void;\n\n  __nativeAttributes?: Record<string, any>;\n  __noBorderRadius?: boolean;\n\n  __onDelayedInput?: NonCancelableEventHandler<BaseChangeDetail>;\n  __onBlurWithDetail?: NonCancelableEventHandler<{ relatedTarget: Node | null }>;\n\n  __inheritFormFieldProps?: boolean;\n}\n\nconst iconClassName = (position: string, hasHandler: boolean) =>\n  clsx(styles['input-icon'], styles[`input-icon-${position}`], { [styles['input-icon-hoverable']]: hasHandler });\nconst preventMouseDown: MouseEventHandler = e => e.preventDefault();\n\nfunction InternalInput(\n  {\n    type = 'text',\n    step,\n    inputMode,\n    autoComplete = true,\n    ariaLabel,\n    name,\n    value,\n    placeholder,\n    autoFocus,\n    disabled,\n    readOnly,\n    disableBrowserAutocorrect,\n    spellcheck,\n    __noBorderRadius,\n\n    __leftIcon,\n    __leftIconVariant = 'subtle',\n    __onLeftIconClick,\n\n    ariaRequired,\n\n    __rightIcon,\n    __rightIconVariant = 'normal',\n    __onRightIconClick,\n\n    onKeyDown,\n    onKeyUp,\n    onChange,\n    __onDelayedInput,\n    __onBlurWithDetail,\n    onBlur,\n    onFocus,\n    __nativeAttributes,\n    __internalRootRef,\n    __inheritFormFieldProps,\n    ...rest\n  }: InternalInputProps,\n  ref: Ref<HTMLInputElement>\n) {\n  const baseProps = getBaseProps(rest);\n  const fireDelayedInput = useDebounceCallback((value: string) => fireNonCancelableEvent(__onDelayedInput, { value }));\n\n  const handleChange = (value: string) => {\n    fireDelayedInput(value);\n    fireNonCancelableEvent(onChange, { value });\n  };\n\n  const inputRef = useRef<HTMLInputElement>(null);\n  const searchProps = useSearchProps(type, disabled, readOnly, value, inputRef, handleChange);\n  __leftIcon = __leftIcon ?? searchProps.__leftIcon;\n  __rightIcon = __rightIcon ?? searchProps.__rightIcon;\n  __onRightIconClick = __onRightIconClick ?? searchProps.__onRightIconClick;\n\n  const formFieldContext = useFormFieldContext(rest);\n  const { ariaLabelledby, ariaDescribedby, controlId, invalid } = __inheritFormFieldProps ? formFieldContext : rest;\n\n  const attributes: React.InputHTMLAttributes<HTMLInputElement> = {\n    'aria-label': ariaLabel,\n    'aria-labelledby': ariaLabelledby,\n    'aria-describedby': ariaDescribedby,\n    name,\n    placeholder,\n    autoFocus,\n    id: controlId,\n    className: clsx(\n      styles.input,\n      type && styles[`input-type-${type}`],\n      __rightIcon && styles['input-has-icon-right'],\n      __leftIcon && styles['input-has-icon-left'],\n      __noBorderRadius && styles['input-has-no-border-radius'],\n      {\n        [styles['input-readonly']]: readOnly,\n        [styles['input-invalid']]: invalid,\n      }\n    ),\n    autoComplete: convertAutoComplete(autoComplete),\n    disabled,\n    readOnly,\n    type,\n    step,\n    inputMode,\n    spellCheck: spellcheck,\n    onKeyDown: onKeyDown && (event => fireKeyboardEvent(onKeyDown, event)),\n    onKeyUp: onKeyUp && (event => fireKeyboardEvent(onKeyUp, event)),\n    // We set a default value on the component in order to force it into the controlled mode.\n    value: value ?? '',\n    onChange: onChange && (event => handleChange(event.target.value)),\n    onBlur: e => {\n      onBlur && fireNonCancelableEvent(onBlur);\n      __onBlurWithDetail && fireNonCancelableEvent(__onBlurWithDetail, { relatedTarget: e.relatedTarget });\n    },\n    onFocus: onFocus && (() => fireNonCancelableEvent(onFocus)),\n    ...__nativeAttributes,\n  };\n\n  if (type === 'number') {\n    // Chrome and Safari have a weird built-in behavior of letting focused\n    // number inputs be controlled by scrolling on them. However, they don't\n    // lock the browser's scroll, so it's very easy to accidentally increment\n    // the input while scrolling down the page.\n    attributes.onWheel = event => event.currentTarget.blur();\n  }\n\n  if (disableBrowserAutocorrect) {\n    attributes.autoCorrect = 'off';\n    attributes.autoCapitalize = 'off';\n  }\n\n  // ensure aria properties are string literal \"true\"\n  if (ariaRequired) {\n    attributes['aria-required'] = 'true';\n  }\n  if (invalid) {\n    attributes['aria-invalid'] = 'true';\n  }\n\n  const mergedRef = useMergeRefs(ref, inputRef);\n\n  // type = \"visualSearch\" renders a type=\"text' input\n  if (attributes.type === 'visualSearch') {\n    attributes.type = 'text';\n  }\n\n  return (\n    <div {...baseProps} className={clsx(baseProps.className, styles['input-container'])} ref={__internalRootRef}>\n      {__leftIcon && (\n        <span onClick={__onLeftIconClick} className={iconClassName('left', !!__onLeftIconClick)}>\n          <InternalIcon name={__leftIcon} variant={disabled ? 'disabled' : __leftIconVariant} />\n        </span>\n      )}\n      <input ref={mergedRef} {...attributes} />\n      {__rightIcon && (\n        <span\n          onClick={__onRightIconClick}\n          onMouseDown={preventMouseDown}\n          className={iconClassName('right', !!__onRightIconClick)}\n        >\n          <InternalIcon name={__rightIcon} variant={disabled ? 'disabled' : __rightIconVariant} />\n        </span>\n      )}\n    </div>\n  );\n}\n\nexport default React.forwardRef(InternalInput);\n"]}
+{"version":3,"file":"internal.js","sourceRoot":"","sources":["../../../src/input/internal.tsx"],"names":[],"mappings":";AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,EAAE,EAA0B,SAAS,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AACzE,OAAO,IAAI,MAAM,MAAM,CAAC;AACxB,OAAO,EAAE,YAAY,EAAE,MAAM,kCAAkC,CAAC;AAEhE,OAAO,YAAY,MAAM,kBAAkB,CAAC;AAC5C,OAAO,MAAM,MAAM,iBAAiB,CAAC;AACrC,OAAO,EAAE,sBAAsB,EAAE,iBAAiB,EAA6B,MAAM,oBAAoB,CAAC;AAE1G,OAAO,EAAsB,YAAY,EAAE,MAAM,4BAA4B,CAAC;AAC9E,OAAO,EAAE,cAAc,EAAE,mBAAmB,EAAE,MAAM,SAAS,CAAC;AAC9D,OAAO,EAAE,mBAAmB,EAAE,MAAM,yCAAyC,CAAC;AAC9E,OAAO,EAAmC,mBAAmB,EAAE,MAAM,wCAAwC,CAAC;AA4B9G,IAAM,aAAa,GAAG,UAAC,QAAgB,EAAE,UAAmB;;IAC1D,OAAA,IAAI,CAAC,MAAM,CAAC,YAAY,CAAC,EAAE,MAAM,CAAC,qBAAc,QAAQ,CAAE,CAAC,YAAI,GAAC,MAAM,CAAC,sBAAsB,CAAC,IAAG,UAAU,MAAG;AAA9G,CAA8G,CAAC;AACjH,IAAM,gBAAgB,GAAsB,UAAA,CAAC,IAAI,OAAA,CAAC,CAAC,cAAc,EAAE,EAAlB,CAAkB,CAAC;AAEpE,SAAS,aAAa,CACpB,EAqCqB,EACrB,GAA0B;;IArCxB,IAAA,YAAa,EAAb,IAAI,mBAAG,MAAM,KAAA,EACb,IAAI,UAAA,EACJ,SAAS,eAAA,EACT,oBAAmB,EAAnB,YAAY,mBAAG,IAAI,KAAA,EACnB,SAAS,eAAA,EACT,IAAI,UAAA,EACJ,KAAK,WAAA,EACL,WAAW,iBAAA,EACX,SAAS,eAAA,EACT,QAAQ,cAAA,EACR,QAAQ,cAAA,EACR,yBAAyB,+BAAA,EACzB,UAAU,gBAAA,EACV,gBAAgB,sBAAA,EAEhB,UAAU,gBAAA,EACV,yBAA4B,EAA5B,iBAAiB,mBAAG,QAAQ,KAAA,EAC5B,iBAAiB,uBAAA,EAEjB,YAAY,kBAAA,EAEZ,WAAW,iBAAA,EACX,0BAA6B,EAA7B,kBAAkB,mBAAG,QAAQ,KAAA,EAC7B,kBAAkB,wBAAA,EAElB,SAAS,eAAA,EACT,OAAO,aAAA,EACP,QAAQ,cAAA,EACR,gBAAgB,sBAAA,EAChB,kBAAkB,wBAAA,EAClB,MAAM,YAAA,EACN,OAAO,aAAA,EACP,kBAAkB,wBAAA,EAClB,iBAAiB,uBAAA,EACjB,uBAAuB,6BAAA,EACpB,IAAI,cApCT,0eAqCC,CADQ;IAIT,IAAM,SAAS,GAAG,YAAY,CAAC,IAAI,CAAC,CAAC;IACrC,IAAM,gBAAgB,GAAG,mBAAmB,CAAC,UAAC,KAAa,IAAK,OAAA,sBAAsB,CAAC,gBAAgB,EAAE,EAAE,KAAK,OAAA,EAAE,CAAC,EAAnD,CAAmD,CAAC,CAAC;IAErH,IAAM,YAAY,GAAG,UAAC,KAAa;QACjC,gBAAgB,CAAC,KAAK,CAAC,CAAC;QACxB,sBAAsB,CAAC,QAAQ,EAAE,EAAE,KAAK,OAAA,EAAE,CAAC,CAAC;IAC9C,CAAC,CAAC;IAEF,IAAM,QAAQ,GAAG,MAAM,CAAmB,IAAI,CAAC,CAAC;IAChD,IAAM,WAAW,GAAG,cAAc,CAAC,IAAI,EAAE,QAAQ,EAAE,QAAQ,EAAE,KAAK,EAAE,QAAQ,EAAE,YAAY,CAAC,CAAC;IAC5F,UAAU,GAAG,UAAU,aAAV,UAAU,cAAV,UAAU,GAAI,WAAW,CAAC,UAAU,CAAC;IAClD,WAAW,GAAG,WAAW,aAAX,WAAW,cAAX,WAAW,GAAI,WAAW,CAAC,WAAW,CAAC;IACrD,kBAAkB,GAAG,kBAAkB,aAAlB,kBAAkB,cAAlB,kBAAkB,GAAI,WAAW,CAAC,kBAAkB,CAAC;IAE1E,IAAM,gBAAgB,GAAG,mBAAmB,CAAC,IAAI,CAAC,CAAC;IAC7C,IAAA,KAA+E,uBAAuB;QAC1G,CAAC,CAAC,gBAAgB;QAClB,CAAC,YAAG,mBAAmB,EAAE,SAAS,IAAK,IAAI,CAAE,EAFvC,cAAc,oBAAA,EAAE,eAAe,qBAAA,EAAE,SAAS,eAAA,EAAE,OAAO,aAAA,EAAE,mBAAmB,yBAEjC,CAAC;IAEhD,IAAM,gBAAgB,GAAG,CAAA,kBAAkB,aAAlB,kBAAkB,uBAAlB,kBAAkB,CAAE,SAAS,KAAI,SAAS,CAAC;IACpE,IAAM,mBAAmB,GAAG,mBAAmB;QAC7C,CAAC,CAAC,EAAE,SAAS,EAAE,CAAC,gBAAgB,EAAE,4BAA4B,EAAE,gBAAgB,EAAE;QAClF,CAAC,CAAC,EAAE,CAAC;IAEP,IAAM,UAAU,uBACd,YAAY,EAAE,SAAS,EACvB,iBAAiB,EAAE,cAAc,EACjC,kBAAkB,EAAE,eAAe,EACnC,IAAI,MAAA,EACJ,WAAW,aAAA,EACX,SAAS,WAAA,EACT,EAAE,EAAE,SAAS,EACb,SAAS,EAAE,IAAI,CACb,MAAM,CAAC,KAAK,EACZ,IAAI,IAAI,MAAM,CAAC,qBAAc,IAAI,CAAE,CAAC,EACpC,WAAW,IAAI,MAAM,CAAC,sBAAsB,CAAC,EAC7C,UAAU,IAAI,MAAM,CAAC,qBAAqB,CAAC,EAC3C,gBAAgB,IAAI,MAAM,CAAC,4BAA4B,CAAC;YAEtD,GAAC,MAAM,CAAC,gBAAgB,CAAC,IAAG,QAAQ;YACpC,GAAC,MAAM,CAAC,eAAe,CAAC,IAAG,OAAO;gBAErC,EACD,YAAY,EAAE,mBAAmB,CAAC,YAAY,CAAC,EAC/C,QAAQ,UAAA,EACR,QAAQ,UAAA,EACR,IAAI,MAAA,EACJ,IAAI,MAAA,EACJ,SAAS,WAAA,EACT,UAAU,EAAE,UAAU,EACtB,SAAS,EAAE,SAAS,IAAI,CAAC,UAAA,KAAK,IAAI,OAAA,iBAAiB,CAAC,SAAS,EAAE,KAAK,CAAC,EAAnC,CAAmC,CAAC,EACtE,OAAO,EAAE,OAAO,IAAI,CAAC,UAAA,KAAK,IAAI,OAAA,iBAAiB,CAAC,OAAO,EAAE,KAAK,CAAC,EAAjC,CAAiC,CAAC;QAChE,yFAAyF;QACzF,KAAK,EAAE,KAAK,aAAL,KAAK,cAAL,KAAK,GAAI,EAAE,EAClB,QAAQ,EAAE,QAAQ,IAAI,CAAC,UAAA,KAAK,IAAI,OAAA,YAAY,CAAC,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC,EAAhC,CAAgC,CAAC,EACjE,MAAM,EAAE,UAAA,CAAC;YACP,MAAM,IAAI,sBAAsB,CAAC,MAAM,CAAC,CAAC;YACzC,kBAAkB,IAAI,sBAAsB,CAAC,kBAAkB,EAAE,EAAE,aAAa,EAAE,CAAC,CAAC,aAAa,EAAE,CAAC,CAAC;QACvG,CAAC,EACD,OAAO,EAAE,OAAO,IAAI,CAAC,cAAM,OAAA,sBAAsB,CAAC,OAAO,CAAC,EAA/B,CAA+B,CAAC,IACxD,kBAAkB,GAClB,mBAAmB,CACvB,CAAC;IAEF,IAAI,IAAI,KAAK,QAAQ,EAAE;QACrB,sEAAsE;QACtE,wEAAwE;QACxE,yEAAyE;QACzE,2CAA2C;QAC3C,UAAU,CAAC,OAAO,GAAG,UAAA,KAAK,IAAI,OAAA,KAAK,CAAC,aAAa,CAAC,IAAI,EAAE,EAA1B,CAA0B,CAAC;KAC1D;IAED,IAAI,yBAAyB,EAAE;QAC7B,UAAU,CAAC,WAAW,GAAG,KAAK,CAAC;QAC/B,UAAU,CAAC,cAAc,GAAG,KAAK,CAAC;KACnC;IAED,mDAAmD;IACnD,IAAI,YAAY,EAAE;QAChB,UAAU,CAAC,eAAe,CAAC,GAAG,MAAM,CAAC;KACtC;IACD,IAAI,OAAO,EAAE;QACX,UAAU,CAAC,cAAc,CAAC,GAAG,MAAM,CAAC;KACrC;IAED,IAAM,SAAS,GAAG,YAAY,CAAC,GAAG,EAAE,QAAQ,CAAC,CAAC;IAE9C,oDAAoD;IACpD,IAAI,UAAU,CAAC,IAAI,KAAK,cAAc,EAAE;QACtC,UAAU,CAAC,IAAI,GAAG,MAAM,CAAC;KAC1B;IAED,SAAS,CAAC;;QACR,IAAI,mBAAmB,IAAI,gBAAgB,EAAE;YAC3C,MAAA,QAAQ,CAAC,OAAO,0CAAE,KAAK,CAAC,EAAE,aAAa,EAAE,IAAI,EAAE,CAAC,CAAC;SAClD;IACH,CAAC,EAAE,CAAC,mBAAmB,EAAE,gBAAgB,CAAC,CAAC,CAAC;IAE5C,OAAO,CACL,wCAAS,SAAS,IAAE,SAAS,EAAE,IAAI,CAAC,SAAS,CAAC,SAAS,EAAE,MAAM,CAAC,iBAAiB,CAAC,CAAC,EAAE,GAAG,EAAE,iBAAiB;QACxG,UAAU,IAAI,CACb,8BAAM,OAAO,EAAE,iBAAiB,EAAE,SAAS,EAAE,aAAa,CAAC,MAAM,EAAE,CAAC,CAAC,iBAAiB,CAAC;YACrF,oBAAC,YAAY,IAAC,IAAI,EAAE,UAAU,EAAE,OAAO,EAAE,QAAQ,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,iBAAiB,GAAI,CACjF,CACR;QACD,wCAAO,GAAG,EAAE,SAAS,IAAM,UAAU,EAAI;QACxC,WAAW,IAAI,CACd,8BACE,OAAO,EAAE,kBAAkB,EAC3B,WAAW,EAAE,gBAAgB,EAC7B,SAAS,EAAE,aAAa,CAAC,OAAO,EAAE,CAAC,CAAC,kBAAkB,CAAC;YAEvD,oBAAC,YAAY,IAAC,IAAI,EAAE,WAAW,EAAE,OAAO,EAAE,QAAQ,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,kBAAkB,GAAI,CACnF,CACR,CACG,CACP,CAAC;AACJ,CAAC;AAED,eAAe,KAAK,CAAC,UAAU,CAAC,aAAa,CAAC,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React, { MouseEventHandler, Ref, useEffect, useRef } from 'react';\nimport clsx from 'clsx';\nimport { useMergeRefs } from '../internal/hooks/use-merge-refs';\nimport { IconProps } from '../icon/interfaces';\nimport InternalIcon from '../icon/internal';\nimport styles from './styles.css.js';\nimport { fireNonCancelableEvent, fireKeyboardEvent, NonCancelableEventHandler } from '../internal/events';\nimport { InputProps, BaseInputProps, InputAutoCorrect, BaseChangeDetail } from './interfaces';\nimport { BaseComponentProps, getBaseProps } from '../internal/base-component';\nimport { useSearchProps, convertAutoComplete } from './utils';\nimport { useDebounceCallback } from '../internal/hooks/use-debounce-callback';\nimport { FormFieldValidationControlProps, useFormFieldContext } from '../internal/context/form-field-context';\nimport { InternalBaseComponentProps } from '../internal/hooks/use-base-component';\n\nexport interface InternalInputProps\n  extends BaseComponentProps,\n    BaseInputProps,\n    Omit<InputProps, 'type'>,\n    InputAutoCorrect,\n    FormFieldValidationControlProps,\n    InternalBaseComponentProps {\n  type?: InputProps['type'] | 'visualSearch';\n  __leftIcon?: IconProps['name'];\n  __leftIconVariant?: IconProps['variant'];\n  __onLeftIconClick?: () => void;\n\n  __rightIcon?: IconProps['name'];\n  __rightIconVariant?: IconProps['variant'];\n  __onRightIconClick?: () => void;\n\n  __nativeAttributes?: Record<string, any>;\n  __noBorderRadius?: boolean;\n\n  __onDelayedInput?: NonCancelableEventHandler<BaseChangeDetail>;\n  __onBlurWithDetail?: NonCancelableEventHandler<{ relatedTarget: Node | null }>;\n\n  __inheritFormFieldProps?: boolean;\n}\n\nconst iconClassName = (position: string, hasHandler: boolean) =>\n  clsx(styles['input-icon'], styles[`input-icon-${position}`], { [styles['input-icon-hoverable']]: hasHandler });\nconst preventMouseDown: MouseEventHandler = e => e.preventDefault();\n\nfunction InternalInput(\n  {\n    type = 'text',\n    step,\n    inputMode,\n    autoComplete = true,\n    ariaLabel,\n    name,\n    value,\n    placeholder,\n    autoFocus,\n    disabled,\n    readOnly,\n    disableBrowserAutocorrect,\n    spellcheck,\n    __noBorderRadius,\n\n    __leftIcon,\n    __leftIconVariant = 'subtle',\n    __onLeftIconClick,\n\n    ariaRequired,\n\n    __rightIcon,\n    __rightIconVariant = 'normal',\n    __onRightIconClick,\n\n    onKeyDown,\n    onKeyUp,\n    onChange,\n    __onDelayedInput,\n    __onBlurWithDetail,\n    onBlur,\n    onFocus,\n    __nativeAttributes,\n    __internalRootRef,\n    __inheritFormFieldProps,\n    ...rest\n  }: InternalInputProps,\n  ref: Ref<HTMLInputElement>\n) {\n  const baseProps = getBaseProps(rest);\n  const fireDelayedInput = useDebounceCallback((value: string) => fireNonCancelableEvent(__onDelayedInput, { value }));\n\n  const handleChange = (value: string) => {\n    fireDelayedInput(value);\n    fireNonCancelableEvent(onChange, { value });\n  };\n\n  const inputRef = useRef<HTMLInputElement>(null);\n  const searchProps = useSearchProps(type, disabled, readOnly, value, inputRef, handleChange);\n  __leftIcon = __leftIcon ?? searchProps.__leftIcon;\n  __rightIcon = __rightIcon ?? searchProps.__rightIcon;\n  __onRightIconClick = __onRightIconClick ?? searchProps.__onRightIconClick;\n\n  const formFieldContext = useFormFieldContext(rest);\n  const { ariaLabelledby, ariaDescribedby, controlId, invalid, __useReactAutofocus } = __inheritFormFieldProps\n    ? formFieldContext\n    : { __useReactAutofocus: undefined, ...rest };\n\n  const autoFocusEnabled = __nativeAttributes?.autoFocus || autoFocus;\n  const reactAutofocusProps = __useReactAutofocus\n    ? { autoFocus: !autoFocusEnabled, 'data-awsui-react-autofocus': autoFocusEnabled }\n    : {};\n\n  const attributes: React.InputHTMLAttributes<HTMLInputElement> = {\n    'aria-label': ariaLabel,\n    'aria-labelledby': ariaLabelledby,\n    'aria-describedby': ariaDescribedby,\n    name,\n    placeholder,\n    autoFocus,\n    id: controlId,\n    className: clsx(\n      styles.input,\n      type && styles[`input-type-${type}`],\n      __rightIcon && styles['input-has-icon-right'],\n      __leftIcon && styles['input-has-icon-left'],\n      __noBorderRadius && styles['input-has-no-border-radius'],\n      {\n        [styles['input-readonly']]: readOnly,\n        [styles['input-invalid']]: invalid,\n      }\n    ),\n    autoComplete: convertAutoComplete(autoComplete),\n    disabled,\n    readOnly,\n    type,\n    step,\n    inputMode,\n    spellCheck: spellcheck,\n    onKeyDown: onKeyDown && (event => fireKeyboardEvent(onKeyDown, event)),\n    onKeyUp: onKeyUp && (event => fireKeyboardEvent(onKeyUp, event)),\n    // We set a default value on the component in order to force it into the controlled mode.\n    value: value ?? '',\n    onChange: onChange && (event => handleChange(event.target.value)),\n    onBlur: e => {\n      onBlur && fireNonCancelableEvent(onBlur);\n      __onBlurWithDetail && fireNonCancelableEvent(__onBlurWithDetail, { relatedTarget: e.relatedTarget });\n    },\n    onFocus: onFocus && (() => fireNonCancelableEvent(onFocus)),\n    ...__nativeAttributes,\n    ...reactAutofocusProps,\n  };\n\n  if (type === 'number') {\n    // Chrome and Safari have a weird built-in behavior of letting focused\n    // number inputs be controlled by scrolling on them. However, they don't\n    // lock the browser's scroll, so it's very easy to accidentally increment\n    // the input while scrolling down the page.\n    attributes.onWheel = event => event.currentTarget.blur();\n  }\n\n  if (disableBrowserAutocorrect) {\n    attributes.autoCorrect = 'off';\n    attributes.autoCapitalize = 'off';\n  }\n\n  // ensure aria properties are string literal \"true\"\n  if (ariaRequired) {\n    attributes['aria-required'] = 'true';\n  }\n  if (invalid) {\n    attributes['aria-invalid'] = 'true';\n  }\n\n  const mergedRef = useMergeRefs(ref, inputRef);\n\n  // type = \"visualSearch\" renders a type=\"text' input\n  if (attributes.type === 'visualSearch') {\n    attributes.type = 'text';\n  }\n\n  useEffect(() => {\n    if (__useReactAutofocus && autoFocusEnabled) {\n      inputRef.current?.focus({ preventScroll: true });\n    }\n  }, [__useReactAutofocus, autoFocusEnabled]);\n\n  return (\n    <div {...baseProps} className={clsx(baseProps.className, styles['input-container'])} ref={__internalRootRef}>\n      {__leftIcon && (\n        <span onClick={__onLeftIconClick} className={iconClassName('left', !!__onLeftIconClick)}>\n          <InternalIcon name={__leftIcon} variant={disabled ? 'disabled' : __leftIconVariant} />\n        </span>\n      )}\n      <input ref={mergedRef} {...attributes} />\n      {__rightIcon && (\n        <span\n          onClick={__onRightIconClick}\n          onMouseDown={preventMouseDown}\n          className={iconClassName('right', !!__onRightIconClick)}\n        >\n          <InternalIcon name={__rightIcon} variant={disabled ? 'disabled' : __rightIconVariant} />\n        </span>\n      )}\n    </div>\n  );\n}\n\nexport default React.forwardRef(InternalInput);\n"]}

package/lib/internal/template/internal/context/form-field-context.d.ts

@@ -39,6 +39,10 @@ export interface FormFieldValidationControlProps extends FormFieldControlProps {
      */
     invalid?: boolean;
 }
-export declare const FormFieldContext: import("react").Context<FormFieldValidationControlProps>;
-export declare function useFormFieldContext(props: FormFieldValidationControlProps): FormFieldValidationControlProps;
+interface InternalFormFieldControlProps extends FormFieldValidationControlProps {
+    __useReactAutofocus?: boolean;
+}
+export declare const FormFieldContext: import("react").Context<InternalFormFieldControlProps>;
+export declare function useFormFieldContext(props: FormFieldValidationControlProps): InternalFormFieldControlProps;
+export {};
 //# sourceMappingURL=form-field-context.d.ts.map

package/lib/internal/template/internal/context/form-field-context.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"form-field-context.d.ts","sourceRoot":"","sources":["../../../../src/internal/context/form-field-context.ts"],"names":[],"mappings":"AAIA,MAAM,WAAW,qBAAqB;IACpC;;;;;;OAMG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;;;;;;;OAQG;IACH,cAAc,CAAC,EAAE,MAAM,CAAC;IAExB;;;;;;;;;OASG;IACH,eAAe,CAAC,EAAE,MAAM,CAAC;CAC1B;AAED,MAAM,WAAW,+BAAgC,SAAQ,qBAAqB;IAC5E;;;;;;OAMG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAED,eAAO,MAAM,gBAAgB,0DAAqD,CAAC;AAUnF,wBAAgB,mBAAmB,CAAC,KAAK,EAAE,+BAA+B,mCAGzE"}
+{"version":3,"file":"form-field-context.d.ts","sourceRoot":"","sources":["../../../../src/internal/context/form-field-context.ts"],"names":[],"mappings":"AAIA,MAAM,WAAW,qBAAqB;IACpC;;;;;;OAMG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;;;;;;;OAQG;IACH,cAAc,CAAC,EAAE,MAAM,CAAC;IAExB;;;;;;;;;OASG;IACH,eAAe,CAAC,EAAE,MAAM,CAAC;CAC1B;AAED,MAAM,WAAW,+BAAgC,SAAQ,qBAAqB;IAC5E;;;;;;OAMG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAED,UAAU,6BAA8B,SAAQ,+BAA+B;IAC7E,mBAAmB,CAAC,EAAE,OAAO,CAAC;CAC/B;AAED,eAAO,MAAM,gBAAgB,wDAAmD,CAAC;AAUjF,wBAAgB,mBAAmB,CAAC,KAAK,EAAE,+BAA+B,iCASzE"}

package/lib/internal/template/internal/context/form-field-context.js

@@ -11,6 +11,12 @@ function applyDefault(fields, defaults, keys) {
 }
 export function useFormFieldContext(props) {
     var context = useContext(FormFieldContext);
-    return applyDefault(props, context, ['invalid', 'controlId', 'ariaLabelledby', 'ariaDescribedby']);
+    return applyDefault(props, context, [
+        'invalid',
+        'controlId',
+        'ariaLabelledby',
+        'ariaDescribedby',
+        '__useReactAutofocus',
+    ]);
 }
 //# sourceMappingURL=form-field-context.js.map

package/lib/internal/template/internal/context/form-field-context.js.map

@@ -1 +1 @@
-{"version":3,"file":"form-field-context.js","sourceRoot":"","sources":["../../../../src/internal/context/form-field-context.ts"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,EAAE,UAAU,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AA+ClD,MAAM,CAAC,IAAM,gBAAgB,GAAG,aAAa,CAAkC,EAAE,CAAC,CAAC;AAEnF,SAAS,YAAY,CAAI,MAAS,EAAE,QAAW,EAAE,IAAiB;IAChE,IAAM,MAAM,GAAM,EAAE,CAAC;IACrB,IAAI,CAAC,OAAO,CAAC,UAAA,GAAG;QACd,MAAM,CAAC,GAAG,CAAC,GAAG,MAAM,CAAC,GAAG,CAAC,KAAK,SAAS,CAAC,CAAC,CAAC,QAAQ,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC;IACxE,CAAC,CAAC,CAAC;IACH,OAAO,MAAM,CAAC;AAChB,CAAC;AAED,MAAM,UAAU,mBAAmB,CAAC,KAAsC;IACxE,IAAM,OAAO,GAAG,UAAU,CAAC,gBAAgB,CAAC,CAAC;IAC7C,OAAO,YAAY,CAAC,KAAK,EAAE,OAAO,EAAE,CAAC,SAAS,EAAE,WAAW,EAAE,gBAAgB,EAAE,iBAAiB,CAAC,CAAC,CAAC;AACrG,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport { useContext, createContext } from 'react';\n\nexport interface FormFieldControlProps {\n  /**\n   * Specifies the ID of the native form element. You can use it to relate\n   * a label element's `for` attribute to this control.\n   *\n   * It defaults to an automatically generated ID that\n   * is provided by its parent form field component.\n   */\n  controlId?: string;\n\n  /**\n   * Adds `aria-labelledby` to the component. If you're using this component within a form field,\n   * don't set this property because the form field component automatically sets it.\n   *\n   * Use this property if the component isn't surrounded by a form field, or you want to override the value\n   * automatically set by the form field (for example, if you have two components within a single form field).\n   *\n   * To use it correctly, define an ID for the element you want to use as label and set the property to that ID.\n   */\n  ariaLabelledby?: string;\n\n  /**\n   * Adds `aria-describedby` to the component. If you're using this component within a form field,\n   * don't set this property because the form field component automatically sets it.\n   *\n   * Use this property if the component isn't surrounded by a form field, or you want to override the value\n   * automatically set by the form field (for example, if you have two components within a single form field).\n   *\n   * To use it correctly, define an ID for each element that you want to use as a description\n   * and set the property to a string of each ID separated by spaces (for example, `\"id1 id2 id3\"`).\n   */\n  ariaDescribedby?: string;\n}\n\nexport interface FormFieldValidationControlProps extends FormFieldControlProps {\n  /**\n   * Overrides the invalidation state. Usually the invalid state\n   * comes from the parent `FormField`component,\n   * however sometimes you need to override its\n   * state when you have more than one input within a\n   * single form field.\n   */\n  invalid?: boolean;\n}\n\nexport const FormFieldContext = createContext<FormFieldValidationControlProps>({});\n\nfunction applyDefault<T>(fields: T, defaults: T, keys: (keyof T)[]) {\n  const result = <T>{};\n  keys.forEach(key => {\n    result[key] = fields[key] === undefined ? defaults[key] : fields[key];\n  });\n  return result;\n}\n\nexport function useFormFieldContext(props: FormFieldValidationControlProps) {\n  const context = useContext(FormFieldContext);\n  return applyDefault(props, context, ['invalid', 'controlId', 'ariaLabelledby', 'ariaDescribedby']);\n}\n"]}
+{"version":3,"file":"form-field-context.js","sourceRoot":"","sources":["../../../../src/internal/context/form-field-context.ts"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,EAAE,UAAU,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAmDlD,MAAM,CAAC,IAAM,gBAAgB,GAAG,aAAa,CAAgC,EAAE,CAAC,CAAC;AAEjF,SAAS,YAAY,CAAI,MAAS,EAAE,QAAW,EAAE,IAAiB;IAChE,IAAM,MAAM,GAAM,EAAE,CAAC;IACrB,IAAI,CAAC,OAAO,CAAC,UAAA,GAAG;QACd,MAAM,CAAC,GAAG,CAAC,GAAG,MAAM,CAAC,GAAG,CAAC,KAAK,SAAS,CAAC,CAAC,CAAC,QAAQ,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC;IACxE,CAAC,CAAC,CAAC;IACH,OAAO,MAAM,CAAC;AAChB,CAAC;AAED,MAAM,UAAU,mBAAmB,CAAC,KAAsC;IACxE,IAAM,OAAO,GAAG,UAAU,CAAC,gBAAgB,CAAC,CAAC;IAC7C,OAAO,YAAY,CAAgC,KAAK,EAAE,OAAO,EAAE;QACjE,SAAS;QACT,WAAW;QACX,gBAAgB;QAChB,iBAAiB;QACjB,qBAAqB;KACtB,CAAC,CAAC;AACL,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport { useContext, createContext } from 'react';\n\nexport interface FormFieldControlProps {\n  /**\n   * Specifies the ID of the native form element. You can use it to relate\n   * a label element's `for` attribute to this control.\n   *\n   * It defaults to an automatically generated ID that\n   * is provided by its parent form field component.\n   */\n  controlId?: string;\n\n  /**\n   * Adds `aria-labelledby` to the component. If you're using this component within a form field,\n   * don't set this property because the form field component automatically sets it.\n   *\n   * Use this property if the component isn't surrounded by a form field, or you want to override the value\n   * automatically set by the form field (for example, if you have two components within a single form field).\n   *\n   * To use it correctly, define an ID for the element you want to use as label and set the property to that ID.\n   */\n  ariaLabelledby?: string;\n\n  /**\n   * Adds `aria-describedby` to the component. If you're using this component within a form field,\n   * don't set this property because the form field component automatically sets it.\n   *\n   * Use this property if the component isn't surrounded by a form field, or you want to override the value\n   * automatically set by the form field (for example, if you have two components within a single form field).\n   *\n   * To use it correctly, define an ID for each element that you want to use as a description\n   * and set the property to a string of each ID separated by spaces (for example, `\"id1 id2 id3\"`).\n   */\n  ariaDescribedby?: string;\n}\n\nexport interface FormFieldValidationControlProps extends FormFieldControlProps {\n  /**\n   * Overrides the invalidation state. Usually the invalid state\n   * comes from the parent `FormField`component,\n   * however sometimes you need to override its\n   * state when you have more than one input within a\n   * single form field.\n   */\n  invalid?: boolean;\n}\n\ninterface InternalFormFieldControlProps extends FormFieldValidationControlProps {\n  __useReactAutofocus?: boolean;\n}\n\nexport const FormFieldContext = createContext<InternalFormFieldControlProps>({});\n\nfunction applyDefault<T>(fields: T, defaults: T, keys: (keyof T)[]) {\n  const result = <T>{};\n  keys.forEach(key => {\n    result[key] = fields[key] === undefined ? defaults[key] : fields[key];\n  });\n  return result;\n}\n\nexport function useFormFieldContext(props: FormFieldValidationControlProps) {\n  const context = useContext(FormFieldContext);\n  return applyDefault<InternalFormFieldControlProps>(props, context, [\n    'invalid',\n    'controlId',\n    'ariaLabelledby',\n    'ariaDescribedby',\n    '__useReactAutofocus',\n  ]);\n}\n"]}

package/lib/internal/template/internal/environment.js

@@ -1,5 +1,5 @@
 
-    export var PACKAGE_VERSION = '3.0.0 (500b1e2)';
+    export var PACKAGE_VERSION = '3.0.0 (faa9ec9)';
     export var THEME = 'open-source-visual-refresh';
     export var ALWAYS_VISUAL_REFRESH = true;
     

package/lib/internal/template/internal/types.d.ts

@@ -14,4 +14,13 @@
 export type SomeRequired<Type, Keys extends keyof Type> = Type & {
     [Key in Keys]-?: Type[Key];
 };
+/**
+ * Utility type that makes a union of given type and undefined.
+ * @example
+ * ```
+ * type OptionalString = Optional<string>
+ * type OptionalStringOrNumber = Optional<string | number>
+ * ```
+ */
+export type Optional<Type> = Type | undefined;
 //# sourceMappingURL=types.d.ts.map

package/lib/internal/template/internal/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/internal/types.ts"],"names":[],"mappings":"AAGA;;;;;;;;;;;;GAYG;AACH,MAAM,MAAM,YAAY,CAAC,IAAI,EAAE,IAAI,SAAS,MAAM,IAAI,IAAI,IAAI,GAAG;KAC9D,GAAG,IAAI,IAAI,CAAC,CAAC,GAAG,IAAI,CAAC,GAAG,CAAC;CAC3B,CAAC"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/internal/types.ts"],"names":[],"mappings":"AAEA;;;;;;;;;;;;GAYG;AACH,MAAM,MAAM,YAAY,CAAC,IAAI,EAAE,IAAI,SAAS,MAAM,IAAI,IAAI,IAAI,GAAG;KAC9D,GAAG,IAAI,IAAI,CAAC,CAAC,GAAG,IAAI,CAAC,GAAG,CAAC;CAC3B,CAAC;AAEF;;;;;;;GAOG;AACH,MAAM,MAAM,QAAQ,CAAC,IAAI,IAAI,IAAI,GAAG,SAAS,CAAC"}

package/lib/internal/template/internal/types.js

@@ -1,4 +1,2 @@
-// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
-// SPDX-License-Identifier: Apache-2.0
 export {};
 //# sourceMappingURL=types.js.map

package/lib/internal/template/internal/types.js.map

@@ -1 +1 @@
-{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../src/internal/types.ts"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\n\n/**\n * Makes specified properties required.\n *\n * @example\n * ```\n * import { AlertProps } from '~components/alert/interfaces'\n *\n * type InternalAlertProps = SomeRequired<AlertProps, 'type'>\n *\n * function Alert(props: AlertProps) { ... }\n * function InternalAlert(props: InternalAlertProps) { ... }\n * ```\n */\nexport type SomeRequired<Type, Keys extends keyof Type> = Type & {\n  [Key in Keys]-?: Type[Key];\n};\n"]}
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../src/internal/types.ts"],"names":[],"mappings":"","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\n/**\n * Makes specified properties required.\n *\n * @example\n * ```\n * import { AlertProps } from '~components/alert/interfaces'\n *\n * type InternalAlertProps = SomeRequired<AlertProps, 'type'>\n *\n * function Alert(props: AlertProps) { ... }\n * function InternalAlert(props: InternalAlertProps) { ... }\n * ```\n */\nexport type SomeRequired<Type, Keys extends keyof Type> = Type & {\n  [Key in Keys]-?: Type[Key];\n};\n\n/**\n * Utility type that makes a union of given type and undefined.\n * @example\n * ```\n * type OptionalString = Optional<string>\n * type OptionalStringOrNumber = Optional<string | number>\n * ```\n */\nexport type Optional<Type> = Type | undefined;\n"]}

package/lib/internal/template/select/parts/styles.css.js

@@ -1,14 +1,14 @@
 
     import './styles.scoped.css';
     export default {
-  "placeholder": "awsui_placeholder_dwuol_mf4fo_93",
-  "item": "awsui_item_dwuol_mf4fo_98",
-  "checkbox": "awsui_checkbox_dwuol_mf4fo_102",
-  "filter": "awsui_filter_dwuol_mf4fo_111",
-  "trigger": "awsui_trigger_dwuol_mf4fo_116",
-  "layout-strut": "awsui_layout-strut_dwuol_mf4fo_122",
-  "list-bottom": "awsui_list-bottom_dwuol_mf4fo_128",
-  "selected-icon": "awsui_selected-icon_dwuol_mf4fo_132",
-  "show-label-tag": "awsui_show-label-tag_dwuol_mf4fo_136"
+  "placeholder": "awsui_placeholder_dwuol_1dfho_93",
+  "item": "awsui_item_dwuol_1dfho_98",
+  "checkbox": "awsui_checkbox_dwuol_1dfho_102",
+  "filter": "awsui_filter_dwuol_1dfho_111",
+  "trigger": "awsui_trigger_dwuol_1dfho_116",
+  "layout-strut": "awsui_layout-strut_dwuol_1dfho_140",
+  "list-bottom": "awsui_list-bottom_dwuol_1dfho_146",
+  "selected-icon": "awsui_selected-icon_dwuol_1dfho_150",
+  "show-label-tag": "awsui_show-label-tag_dwuol_1dfho_154"
 };
   

package/lib/internal/template/select/parts/styles.scoped.css

@@ -90,16 +90,16 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
  Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
  SPDX-License-Identifier: Apache-2.0
 */
-.awsui_placeholder_dwuol_mf4fo_93:not(#\9) {
+.awsui_placeholder_dwuol_1dfho_93:not(#\9) {
   color: var(--color-text-input-placeholder-rtvjp5, #687078);
   font-style: italic;
 }
 
-.awsui_item_dwuol_mf4fo_98:not(#\9) {
+.awsui_item_dwuol_1dfho_98:not(#\9) {
   display: flex;
   align-items: center;
 }
-.awsui_item_dwuol_mf4fo_98 > .awsui_checkbox_dwuol_mf4fo_102:not(#\9) {
+.awsui_item_dwuol_1dfho_98 > .awsui_checkbox_dwuol_1dfho_102:not(#\9) {
   position: relative;
   min-height: var(--size-control-eyly4k, 14px);
   min-width: var(--size-control-eyly4k, 14px);
@@ -108,31 +108,49 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   margin-right: var(--space-field-horizontal-z3i1c8, 8px);
 }
 
-.awsui_filter_dwuol_mf4fo_111:not(#\9) {
+.awsui_filter_dwuol_1dfho_111:not(#\9) {
   z-index: 4;
   flex-shrink: 0;
 }
 
-.awsui_trigger_dwuol_mf4fo_116:not(#\9) {
+.awsui_trigger_dwuol_1dfho_116:not(#\9) {
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
 }
+.awsui_trigger_dwuol_1dfho_116[data-awsui-focus-visible=true]:not(#\9):focus {
+  position: relative;
+}
+.awsui_trigger_dwuol_1dfho_116[data-awsui-focus-visible=true]:not(#\9):focus {
+  outline: 2px dotted transparent;
+  outline-offset: calc(calc(-1 * var(--space-scaled-xs-6859qs, 8px)) - 1px);
+}
+.awsui_trigger_dwuol_1dfho_116[data-awsui-focus-visible=true]:not(#\9):focus::before {
+  content: " ";
+  display: block;
+  position: absolute;
+  left: calc(-1 * calc(-1 * var(--space-scaled-xs-6859qs, 8px)));
+  top: calc(-1 * calc(-1 * var(--space-scaled-xxs-95dhkm, 4px)));
+  width: calc(100% + 2 * calc(-1 * var(--space-scaled-xs-6859qs, 8px)));
+  height: calc(100% + 2 * calc(-1 * var(--space-scaled-xxs-95dhkm, 4px)));
+  border-radius: var(--border-radius-control-default-focus-ring-hekmgc, 2px);
+  box-shadow: 0 0 0 2px var(--color-border-item-focused-n5kd8g, #0073bb);
+}
 
-.awsui_layout-strut_dwuol_mf4fo_122:not(#\9) {
+.awsui_layout-strut_dwuol_1dfho_140:not(#\9) {
   width: 100%;
   position: relative;
   transform: translate3d(0, 0, 0);
 }
 
-.awsui_list-bottom_dwuol_mf4fo_128:not(#\9) {
+.awsui_list-bottom_dwuol_1dfho_146:not(#\9) {
   /* used in unit-tests */
 }
 
-.awsui_selected-icon_dwuol_mf4fo_132:not(#\9) {
+.awsui_selected-icon_dwuol_1dfho_150:not(#\9) {
   color: var(--color-border-item-focused-n5kd8g, #0073bb);
 }
 
-.awsui_show-label-tag_dwuol_mf4fo_136 > .awsui_selected-icon_dwuol_mf4fo_132:not(#\9) {
+.awsui_show-label-tag_dwuol_1dfho_154 > .awsui_selected-icon_dwuol_1dfho_150:not(#\9) {
   padding-left: var(--space-scaled-s-cu1hzn, 12px);
 }

package/lib/internal/template/select/parts/styles.selectors.js

@@ -2,14 +2,14 @@
     // es-module interop with Babel and Typescript
     Object.defineProperty(exports, "__esModule", { value: true });
     module.exports.default = {
-  "placeholder": "awsui_placeholder_dwuol_mf4fo_93",
-  "item": "awsui_item_dwuol_mf4fo_98",
-  "checkbox": "awsui_checkbox_dwuol_mf4fo_102",
-  "filter": "awsui_filter_dwuol_mf4fo_111",
-  "trigger": "awsui_trigger_dwuol_mf4fo_116",
-  "layout-strut": "awsui_layout-strut_dwuol_mf4fo_122",
-  "list-bottom": "awsui_list-bottom_dwuol_mf4fo_128",
-  "selected-icon": "awsui_selected-icon_dwuol_mf4fo_132",
-  "show-label-tag": "awsui_show-label-tag_dwuol_mf4fo_136"
+  "placeholder": "awsui_placeholder_dwuol_1dfho_93",
+  "item": "awsui_item_dwuol_1dfho_98",
+  "checkbox": "awsui_checkbox_dwuol_1dfho_102",
+  "filter": "awsui_filter_dwuol_1dfho_111",
+  "trigger": "awsui_trigger_dwuol_1dfho_116",
+  "layout-strut": "awsui_layout-strut_dwuol_1dfho_140",
+  "list-bottom": "awsui_list-bottom_dwuol_1dfho_146",
+  "selected-icon": "awsui_selected-icon_dwuol_1dfho_150",
+  "show-label-tag": "awsui_show-label-tag_dwuol_1dfho_154"
 };
   

package/lib/internal/template/table/body-cell/click-away.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+export declare function useClickAway(onClick: () => void): React.MutableRefObject<any>;
+interface ClickAwayActive {
+    onClick: () => void;
+    children: React.ReactNode;
+}
+export declare function ClickAway({ onClick, children }: ClickAwayActive): JSX.Element;
+export {};
+//# sourceMappingURL=click-away.d.ts.map

package/lib/internal/template/table/body-cell/click-away.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"click-away.d.ts","sourceRoot":"","sources":["../../../../src/table/body-cell/click-away.tsx"],"names":[],"mappings":"AAEA,OAAO,KAA4B,MAAM,OAAO,CAAC;AAIjD,wBAAgB,YAAY,CAAC,OAAO,EAAE,MAAM,IAAI,+BAgB/C;AAED,UAAU,eAAe;IACvB,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AACD,wBAAgB,SAAS,CAAC,EAAE,OAAO,EAAE,QAAQ,EAAE,EAAE,eAAe,eAa/D"}

package/lib/internal/template/table/body-cell/click-away.js

@@ -0,0 +1,38 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import React, { useEffect, useRef } from 'react';
+import { containsOrEqual } from '../../internal/utils/dom';
+import { useStableEventHandler } from '../../internal/hooks/use-stable-event-handler';
+export function useClickAway(onClick) {
+    var awayRef = useRef(null);
+    var onClickStable = useStableEventHandler(onClick);
+    useEffect(function () {
+        function handleClick(event) {
+            if (!containsOrEqual(awayRef.current, event.target)) {
+                onClickStable();
+            }
+        }
+        // contains returns wrong result if the next render would remove the element
+        // but capture phase happens before the render, so returns correct result
+        // Ref: https://github.com/facebook/react/issues/20325
+        document.addEventListener('click', handleClick, { capture: true });
+        return function () { return document.removeEventListener('click', handleClick, { capture: true }); };
+    }, [onClickStable]);
+    return awayRef;
+}
+export function ClickAway(_a) {
+    var onClick = _a.onClick, children = _a.children;
+    var onClickStable = useStableEventHandler(onClick);
+    var ref = useRef(null);
+    useEffect(function () {
+        function handleClick(event) {
+            if (!containsOrEqual(ref.current, event.target)) {
+                onClickStable();
+            }
+        }
+        document.addEventListener('click', handleClick, true);
+        return function () { return document.removeEventListener('click', handleClick, true); };
+    }, [onClickStable]);
+    return React.createElement("span", { ref: ref }, children);
+}
+//# sourceMappingURL=click-away.js.map

package/lib/internal/template/table/body-cell/click-away.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"click-away.js","sourceRoot":"","sources":["../../../../src/table/body-cell/click-away.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,EAAE,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AACjD,OAAO,EAAE,eAAe,EAAE,MAAM,0BAA0B,CAAC;AAC3D,OAAO,EAAE,qBAAqB,EAAE,MAAM,+CAA+C,CAAC;AAEtF,MAAM,UAAU,YAAY,CAAC,OAAmB;IAC9C,IAAM,OAAO,GAAG,MAAM,CAAM,IAAI,CAAC,CAAC;IAClC,IAAM,aAAa,GAAG,qBAAqB,CAAC,OAAO,CAAC,CAAC;IACrD,SAAS,CAAC;QACR,SAAS,WAAW,CAAC,KAAY;YAC/B,IAAI,CAAC,eAAe,CAAC,OAAO,CAAC,OAAO,EAAE,KAAK,CAAC,MAAc,CAAC,EAAE;gBAC3D,aAAa,EAAE,CAAC;aACjB;QACH,CAAC;QACD,4EAA4E;QAC5E,yEAAyE;QACzE,sDAAsD;QACtD,QAAQ,CAAC,gBAAgB,CAAC,OAAO,EAAE,WAAW,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,CAAC;QACnE,OAAO,cAAM,OAAA,QAAQ,CAAC,mBAAmB,CAAC,OAAO,EAAE,WAAW,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,EAArE,CAAqE,CAAC;IACrF,CAAC,EAAE,CAAC,aAAa,CAAC,CAAC,CAAC;IACpB,OAAO,OAAO,CAAC;AACjB,CAAC;AAMD,MAAM,UAAU,SAAS,CAAC,EAAsC;QAApC,OAAO,aAAA,EAAE,QAAQ,cAAA;IAC3C,IAAM,aAAa,GAAG,qBAAqB,CAAC,OAAO,CAAC,CAAC;IACrD,IAAM,GAAG,GAAG,MAAM,CAAkB,IAAI,CAAC,CAAC;IAC1C,SAAS,CAAC;QACR,SAAS,WAAW,CAAC,KAAY;YAC/B,IAAI,CAAC,eAAe,CAAC,GAAG,CAAC,OAAO,EAAE,KAAK,CAAC,MAAc,CAAC,EAAE;gBACvD,aAAa,EAAE,CAAC;aACjB;QACH,CAAC;QACD,QAAQ,CAAC,gBAAgB,CAAC,OAAO,EAAE,WAAW,EAAE,IAAI,CAAC,CAAC;QACtD,OAAO,cAAM,OAAA,QAAQ,CAAC,mBAAmB,CAAC,OAAO,EAAE,WAAW,EAAE,IAAI,CAAC,EAAxD,CAAwD,CAAC;IACxE,CAAC,EAAE,CAAC,aAAa,CAAC,CAAC,CAAC;IACpB,OAAO,8BAAM,GAAG,EAAE,GAAG,IAAG,QAAQ,CAAQ,CAAC;AAC3C,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React, { useEffect, useRef } from 'react';\nimport { containsOrEqual } from '../../internal/utils/dom';\nimport { useStableEventHandler } from '../../internal/hooks/use-stable-event-handler';\n\nexport function useClickAway(onClick: () => void) {\n  const awayRef = useRef<any>(null);\n  const onClickStable = useStableEventHandler(onClick);\n  useEffect(() => {\n    function handleClick(event: Event) {\n      if (!containsOrEqual(awayRef.current, event.target as Node)) {\n        onClickStable();\n      }\n    }\n    // contains returns wrong result if the next render would remove the element\n    // but capture phase happens before the render, so returns correct result\n    // Ref: https://github.com/facebook/react/issues/20325\n    document.addEventListener('click', handleClick, { capture: true });\n    return () => document.removeEventListener('click', handleClick, { capture: true });\n  }, [onClickStable]);\n  return awayRef;\n}\n\ninterface ClickAwayActive {\n  onClick: () => void;\n  children: React.ReactNode;\n}\nexport function ClickAway({ onClick, children }: ClickAwayActive) {\n  const onClickStable = useStableEventHandler(onClick);\n  const ref = useRef<HTMLSpanElement>(null);\n  useEffect(() => {\n    function handleClick(event: Event) {\n      if (!containsOrEqual(ref.current, event.target as Node)) {\n        onClickStable();\n      }\n    }\n    document.addEventListener('click', handleClick, true);\n    return () => document.removeEventListener('click', handleClick, true);\n  }, [onClickStable]);\n  return <span ref={ref}>{children}</span>;\n}\n"]}

package/lib/internal/template/table/body-cell/index.d.ts

@@ -1,25 +1,16 @@
-import React from 'react';
 import { TableProps } from '../interfaces';
-interface TableBodyCellProps {
-    className?: string;
-    style?: React.CSSProperties;
-    wrapLines: boolean | undefined;
-    isFirstRow: boolean;
-    isLastRow: boolean;
-    isEvenRow?: boolean;
-    stripedRows?: boolean;
-    isSelected: boolean;
-    isNextSelected: boolean;
-    isPrevSelected: boolean;
-    children?: React.ReactNode;
-    hasSelection?: boolean;
-    hasFooter?: boolean;
-}
-export declare function TableBodyCell({ className, style, children, wrapLines, isFirstRow, isLastRow, isSelected, isNextSelected, isPrevSelected, isEvenRow, stripedRows, hasSelection, hasFooter, }: TableBodyCellProps): JSX.Element;
-interface TableBodyCellContentProps<ItemType> extends TableBodyCellProps {
-    column: TableProps.ColumnDefinition<ItemType>;
+import { TableTdElementProps } from './td-element';
+interface TableBodyCellProps<ItemType, ValueType> extends TableTdElementProps {
+    column: TableProps.EditableColumnDefinition<ItemType, ValueType>;
     item: ItemType;
+    isEditing: boolean;
+    onEditStart: () => void;
+    onEditEnd: () => void;
+    submitEdit?: TableProps.SubmitEditFunction<ItemType, ValueType>;
+    ariaLabels: TableProps['ariaLabels'];
 }
-export declare function TableBodyCellContent<ItemType>({ item, column, ...rest }: TableBodyCellContentProps<ItemType>): JSX.Element;
+export declare function TableBodyCell<ItemType, ValueType>({ isEditable, ...rest }: TableBodyCellProps<ItemType, ValueType> & {
+    isEditable: boolean;
+}): JSX.Element;
 export {};
 //# sourceMappingURL=index.d.ts.map

package/lib/internal/template/table/body-cell/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/table/body-cell/index.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAG3C,UAAU,kBAAkB;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B,SAAS,EAAE,OAAO,GAAG,SAAS,CAAC;IAC/B,UAAU,EAAE,OAAO,CAAC;IACpB,SAAS,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,UAAU,EAAE,OAAO,CAAC;IACpB,cAAc,EAAE,OAAO,CAAC;IACxB,cAAc,EAAE,OAAO,CAAC;IACxB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAED,wBAAgB,aAAa,CAAC,EAC5B,SAAS,EACT,KAAK,EACL,QAAQ,EACR,SAAS,EACT,UAAU,EACV,SAAS,EACT,UAAU,EACV,cAAc,EACd,cAAc,EACd,SAAS,EACT,WAAW,EACX,YAAY,EACZ,SAAS,GACV,EAAE,kBAAkB,eAyBpB;AAED,UAAU,yBAAyB,CAAC,QAAQ,CAAE,SAAQ,kBAAkB;IACtE,MAAM,EAAE,UAAU,CAAC,gBAAgB,CAAC,QAAQ,CAAC,CAAC;IAC9C,IAAI,EAAE,QAAQ,CAAC;CAChB;AAED,wBAAgB,oBAAoB,CAAC,QAAQ,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,GAAG,IAAI,EAAE,EAAE,yBAAyB,CAAC,QAAQ,CAAC,eAE5G"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/table/body-cell/index.tsx"],"names":[],"mappings":"AASA,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAC3C,OAAO,EAAkB,mBAAmB,EAAE,MAAM,cAAc,CAAC;AAcnE,UAAU,kBAAkB,CAAC,QAAQ,EAAE,SAAS,CAAE,SAAQ,mBAAmB;IAC3E,MAAM,EAAE,UAAU,CAAC,wBAAwB,CAAC,QAAQ,EAAE,SAAS,CAAC,CAAC;IACjE,IAAI,EAAE,QAAQ,CAAC;IACf,SAAS,EAAE,OAAO,CAAC;IACnB,WAAW,EAAE,MAAM,IAAI,CAAC;IACxB,SAAS,EAAE,MAAM,IAAI,CAAC;IACtB,UAAU,CAAC,EAAE,UAAU,CAAC,kBAAkB,CAAC,QAAQ,EAAE,SAAS,CAAC,CAAC;IAChE,UAAU,EAAE,UAAU,CAAC,YAAY,CAAC,CAAC;CACtC;AAsFD,wBAAgB,aAAa,CAAC,QAAQ,EAAE,SAAS,EAAE,EACjD,UAAU,EACV,GAAG,IAAI,EACR,EAAE,kBAAkB,CAAC,QAAQ,EAAE,SAAS,CAAC,GAAG;IAAE,UAAU,EAAE,OAAO,CAAA;CAAE,eAMnE"}

package/lib/internal/template/table/body-cell/index.js

@@ -3,15 +3,54 @@ import { __assign, __rest } from "tslib";
 // SPDX-License-Identifier: Apache-2.0
 import clsx from 'clsx';
 import styles from './styles.css.js';
-import React from 'react';
-import { useVisualRefresh } from '../../internal/hooks/use-visual-mode';
-export function TableBodyCell(_a) {
-    var className = _a.className, style = _a.style, children = _a.children, wrapLines = _a.wrapLines, isFirstRow = _a.isFirstRow, isLastRow = _a.isLastRow, isSelected = _a.isSelected, isNextSelected = _a.isNextSelected, isPrevSelected = _a.isPrevSelected, isEvenRow = _a.isEvenRow, stripedRows = _a.stripedRows, hasSelection = _a.hasSelection, hasFooter = _a.hasFooter;
-    var isVisualRefresh = useVisualRefresh();
-    return (React.createElement("td", { style: style, className: clsx(className, styles['body-cell'], wrapLines && styles['body-cell-wrap'], isFirstRow && styles['body-cell-first-row'], isLastRow && styles['body-cell-last-row'], isSelected && styles['body-cell-selected'], isNextSelected && styles['body-cell-next-selected'], isPrevSelected && styles['body-cell-prev-selected'], !isEvenRow && stripedRows && styles['body-cell-shaded'], stripedRows && styles['has-striped-rows'], isVisualRefresh && styles['is-visual-refresh'], hasSelection && styles['has-selection'], hasFooter && styles['has-footer']) }, children));
+import React, { useCallback, useRef } from 'react';
+import useFocusVisible from '../../internal/hooks/focus-visible';
+import { useEffectOnUpdate } from '../../internal/hooks/use-effect-on-update';
+import Button from '../../button/internal';
+import { TableTdElement } from './td-element';
+import { InlineEditor } from './inline-editor';
+import { useStableScrollPosition } from './use-stable-scroll-position';
+var readonlyState = Object.freeze({
+    isEditing: false,
+    currentValue: undefined,
+    setValue: function () { }
+});
+var submitHandlerFallback = function () {
+    throw new Error('The function `handleSubmit` is required for editable columns');
+};
+function TableCellEditable(_a) {
+    var _b;
+    var className = _a.className, item = _a.item, column = _a.column, isEditing = _a.isEditing, onEditStart = _a.onEditStart, onEditEnd = _a.onEditEnd, submitEdit = _a.submitEdit, ariaLabels = _a.ariaLabels, isVisualRefresh = _a.isVisualRefresh, rest = __rest(_a, ["className", "item", "column", "isEditing", "onEditStart", "onEditEnd", "submitEdit", "ariaLabels", "isVisualRefresh"]);
+    var editActivateRef = useRef(null);
+    var cellRef = useRef(null);
+    var focusVisible = useFocusVisible();
+    var _c = useStableScrollPosition(cellRef), storeScrollPosition = _c.storeScrollPosition, restoreScrollPosition = _c.restoreScrollPosition;
+    var handleEditStart = function () {
+        storeScrollPosition();
+        if (!isEditing) {
+            onEditStart();
+        }
+    };
+    var scheduleRestoreScrollPosition = useCallback(function () { return setTimeout(restoreScrollPosition, 0); }, [restoreScrollPosition]);
+    var tdNativeAttributes = __assign(__assign({}, focusVisible), { onFocus: scheduleRestoreScrollPosition, 'data-inline-editing-active': isEditing.toString() });
+    useEffectOnUpdate(function () {
+        if (!isEditing && editActivateRef.current) {
+            editActivateRef.current.focus({ preventScroll: true });
+        }
+        var timer = scheduleRestoreScrollPosition();
+        return function () { return clearTimeout(timer); };
+    }, [isEditing, scheduleRestoreScrollPosition]);
+    return (React.createElement(TableTdElement, __assign({}, rest, { nativeAttributes: tdNativeAttributes, className: clsx(className, styles['body-cell-editable'], isEditing && styles['body-cell-edit-active'], isVisualRefresh && styles['is-visual-refresh']), onClick: handleEditStart, ref: cellRef }), isEditing ? (React.createElement(InlineEditor, { ariaLabels: ariaLabels, column: column, item: item, onEditEnd: onEditEnd, submitEdit: submitEdit !== null && submitEdit !== void 0 ? submitEdit : submitHandlerFallback, __onRender: restoreScrollPosition })) : (React.createElement(React.Fragment, null,
+        column.cell(item, readonlyState),
+        React.createElement("span", { className: styles['body-cell-editor'] },
+            React.createElement(Button, { __hideFocusOutline: true, __internalRootRef: editActivateRef, ariaLabel: (_b = ariaLabels === null || ariaLabels === void 0 ? void 0 : ariaLabels.activateEditLabel) === null || _b === void 0 ? void 0 : _b.call(ariaLabels, column), formAction: "none", iconName: "edit", variant: "inline-icon" }))))));
 }
-export function TableBodyCellContent(_a) {
-    var item = _a.item, column = _a.column, rest = __rest(_a, ["item", "column"]);
-    return React.createElement(TableBodyCell, __assign({}, rest), column.cell(item));
+export function TableBodyCell(_a) {
+    var isEditable = _a.isEditable, rest = __rest(_a, ["isEditable"]);
+    if (isEditable || rest.isEditing) {
+        return React.createElement(TableCellEditable, __assign({}, rest));
+    }
+    var column = rest.column, item = rest.item;
+    return React.createElement(TableTdElement, __assign({}, rest), column.cell(item, readonlyState));
 }
 //# sourceMappingURL=index.js.map

package/lib/internal/template/table/body-cell/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/table/body-cell/index.tsx"],"names":[],"mappings":";AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,IAAI,MAAM,MAAM,CAAC;AACxB,OAAO,MAAM,MAAM,iBAAiB,CAAC;AACrC,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,gBAAgB,EAAE,MAAM,sCAAsC,CAAC;AAkBxE,MAAM,UAAU,aAAa,CAAC,EAcT;QAbnB,SAAS,eAAA,EACT,KAAK,WAAA,EACL,QAAQ,cAAA,EACR,SAAS,eAAA,EACT,UAAU,gBAAA,EACV,SAAS,eAAA,EACT,UAAU,gBAAA,EACV,cAAc,oBAAA,EACd,cAAc,oBAAA,EACd,SAAS,eAAA,EACT,WAAW,iBAAA,EACX,YAAY,kBAAA,EACZ,SAAS,eAAA;IAET,IAAM,eAAe,GAAG,gBAAgB,EAAE,CAAC;IAE3C,OAAO,CACL,4BACE,KAAK,EAAE,KAAK,EACZ,SAAS,EAAE,IAAI,CACb,SAAS,EACT,MAAM,CAAC,WAAW,CAAC,EACnB,SAAS,IAAI,MAAM,CAAC,gBAAgB,CAAC,EACrC,UAAU,IAAI,MAAM,CAAC,qBAAqB,CAAC,EAC3C,SAAS,IAAI,MAAM,CAAC,oBAAoB,CAAC,EACzC,UAAU,IAAI,MAAM,CAAC,oBAAoB,CAAC,EAC1C,cAAc,IAAI,MAAM,CAAC,yBAAyB,CAAC,EACnD,cAAc,IAAI,MAAM,CAAC,yBAAyB,CAAC,EACnD,CAAC,SAAS,IAAI,WAAW,IAAI,MAAM,CAAC,kBAAkB,CAAC,EACvD,WAAW,IAAI,MAAM,CAAC,kBAAkB,CAAC,EACzC,eAAe,IAAI,MAAM,CAAC,mBAAmB,CAAC,EAC9C,YAAY,IAAI,MAAM,CAAC,eAAe,CAAC,EACvC,SAAS,IAAI,MAAM,CAAC,YAAY,CAAC,CAClC,IAEA,QAAQ,CACN,CACN,CAAC;AACJ,CAAC;AAOD,MAAM,UAAU,oBAAoB,CAAW,EAA8D;IAA5D,IAAA,IAAI,UAAA,EAAE,MAAM,YAAA,EAAK,IAAI,cAAvB,kBAAyB,CAAF;IACpE,OAAO,oBAAC,aAAa,eAAK,IAAI,GAAG,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAiB,CAAC;AACtE,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport clsx from 'clsx';\nimport styles from './styles.css.js';\nimport React from 'react';\nimport { TableProps } from '../interfaces';\nimport { useVisualRefresh } from '../../internal/hooks/use-visual-mode';\n\ninterface TableBodyCellProps {\n  className?: string;\n  style?: React.CSSProperties;\n  wrapLines: boolean | undefined;\n  isFirstRow: boolean;\n  isLastRow: boolean;\n  isEvenRow?: boolean;\n  stripedRows?: boolean;\n  isSelected: boolean;\n  isNextSelected: boolean;\n  isPrevSelected: boolean;\n  children?: React.ReactNode;\n  hasSelection?: boolean;\n  hasFooter?: boolean;\n}\n\nexport function TableBodyCell({\n  className,\n  style,\n  children,\n  wrapLines,\n  isFirstRow,\n  isLastRow,\n  isSelected,\n  isNextSelected,\n  isPrevSelected,\n  isEvenRow,\n  stripedRows,\n  hasSelection,\n  hasFooter,\n}: TableBodyCellProps) {\n  const isVisualRefresh = useVisualRefresh();\n\n  return (\n    <td\n      style={style}\n      className={clsx(\n        className,\n        styles['body-cell'],\n        wrapLines && styles['body-cell-wrap'],\n        isFirstRow && styles['body-cell-first-row'],\n        isLastRow && styles['body-cell-last-row'],\n        isSelected && styles['body-cell-selected'],\n        isNextSelected && styles['body-cell-next-selected'],\n        isPrevSelected && styles['body-cell-prev-selected'],\n        !isEvenRow && stripedRows && styles['body-cell-shaded'],\n        stripedRows && styles['has-striped-rows'],\n        isVisualRefresh && styles['is-visual-refresh'],\n        hasSelection && styles['has-selection'],\n        hasFooter && styles['has-footer']\n      )}\n    >\n      {children}\n    </td>\n  );\n}\n\ninterface TableBodyCellContentProps<ItemType> extends TableBodyCellProps {\n  column: TableProps.ColumnDefinition<ItemType>;\n  item: ItemType;\n}\n\nexport function TableBodyCellContent<ItemType>({ item, column, ...rest }: TableBodyCellContentProps<ItemType>) {\n  return <TableBodyCell {...rest}>{column.cell(item)}</TableBodyCell>;\n}\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/table/body-cell/index.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport clsx from 'clsx';\nimport styles from './styles.css.js';\nimport React, { useCallback, useRef } from 'react';\nimport useFocusVisible from '../../internal/hooks/focus-visible';\nimport { useEffectOnUpdate } from '../../internal/hooks/use-effect-on-update';\nimport Button from '../../button/internal';\nimport { ButtonProps } from '../../button/interfaces';\nimport { TableProps } from '../interfaces';\nimport { TableTdElement, TableTdElementProps } from './td-element';\nimport { InlineEditor } from './inline-editor';\nimport { useStableScrollPosition } from './use-stable-scroll-position';\n\nconst readonlyState = Object.freeze({\n  isEditing: false,\n  currentValue: undefined,\n  setValue: () => {},\n});\n\nconst submitHandlerFallback = () => {\n  throw new Error('The function `handleSubmit` is required for editable columns');\n};\n\ninterface TableBodyCellProps<ItemType, ValueType> extends TableTdElementProps {\n  column: TableProps.EditableColumnDefinition<ItemType, ValueType>;\n  item: ItemType;\n  isEditing: boolean;\n  onEditStart: () => void;\n  onEditEnd: () => void;\n  submitEdit?: TableProps.SubmitEditFunction<ItemType, ValueType>;\n  ariaLabels: TableProps['ariaLabels'];\n}\n\nfunction TableCellEditable<ItemType, ValueType>({\n  className,\n  item,\n  column,\n  isEditing,\n  onEditStart,\n  onEditEnd,\n  submitEdit,\n  ariaLabels,\n  isVisualRefresh,\n  ...rest\n}: TableBodyCellProps<ItemType, ValueType>) {\n  const editActivateRef = useRef<ButtonProps.Ref>(null);\n  const cellRef = useRef<HTMLTableCellElement>(null);\n  const focusVisible = useFocusVisible();\n  const { storeScrollPosition, restoreScrollPosition } = useStableScrollPosition(cellRef);\n\n  const handleEditStart = () => {\n    storeScrollPosition();\n    if (!isEditing) {\n      onEditStart();\n    }\n  };\n\n  const scheduleRestoreScrollPosition = useCallback(\n    () => setTimeout(restoreScrollPosition, 0),\n    [restoreScrollPosition]\n  );\n\n  const tdNativeAttributes = {\n    ...(focusVisible as Record<string, string>),\n    onFocus: scheduleRestoreScrollPosition,\n    'data-inline-editing-active': isEditing.toString(),\n  };\n\n  useEffectOnUpdate(() => {\n    if (!isEditing && editActivateRef.current) {\n      editActivateRef.current.focus({ preventScroll: true });\n    }\n    const timer = scheduleRestoreScrollPosition();\n    return () => clearTimeout(timer);\n  }, [isEditing, scheduleRestoreScrollPosition]);\n\n  return (\n    <TableTdElement\n      {...rest}\n      nativeAttributes={tdNativeAttributes as TableTdElementProps['nativeAttributes']}\n      className={clsx(\n        className,\n        styles['body-cell-editable'],\n        isEditing && styles['body-cell-edit-active'],\n        isVisualRefresh && styles['is-visual-refresh']\n      )}\n      onClick={handleEditStart}\n      ref={cellRef}\n    >\n      {isEditing ? (\n        <InlineEditor\n          ariaLabels={ariaLabels}\n          column={column}\n          item={item}\n          onEditEnd={onEditEnd}\n          submitEdit={submitEdit ?? submitHandlerFallback}\n          __onRender={restoreScrollPosition}\n        />\n      ) : (\n        <>\n          {column.cell(item, readonlyState)}\n          <span className={styles['body-cell-editor']}>\n            <Button\n              __hideFocusOutline={true}\n              __internalRootRef={editActivateRef}\n              ariaLabel={ariaLabels?.activateEditLabel?.(column)}\n              formAction=\"none\"\n              iconName=\"edit\"\n              variant=\"inline-icon\"\n            />\n          </span>\n        </>\n      )}\n    </TableTdElement>\n  );\n}\n\nexport function TableBodyCell<ItemType, ValueType>({\n  isEditable,\n  ...rest\n}: TableBodyCellProps<ItemType, ValueType> & { isEditable: boolean }) {\n  if (isEditable || rest.isEditing) {\n    return <TableCellEditable {...rest} />;\n  }\n  const { column, item } = rest;\n  return <TableTdElement {...rest}>{column.cell(item, readonlyState)}</TableTdElement>;\n}\n"]}

package/lib/internal/template/table/body-cell/inline-editor.d.ts

@@ -0,0 +1,12 @@
+import { TableProps } from '../interfaces';
+interface InlineEditorProps<ItemType, ValueType> {
+    ariaLabels: TableProps['ariaLabels'];
+    column: TableProps.EditableColumnDefinition<ItemType, ValueType>;
+    item: ItemType;
+    onEditEnd: () => void;
+    submitEdit: TableProps.SubmitEditFunction<ItemType, ValueType>;
+    __onRender?: () => void;
+}
+export declare function InlineEditor<ItemType, ValueType>({ ariaLabels, item, column, onEditEnd, submitEdit, __onRender, }: InlineEditorProps<ItemType, ValueType>): JSX.Element;
+export {};
+//# sourceMappingURL=inline-editor.d.ts.map

package/lib/internal/template/table/body-cell/inline-editor.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"inline-editor.d.ts","sourceRoot":"","sources":["../../../../src/table/body-cell/inline-editor.tsx"],"names":[],"mappings":"AAOA,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAO3C,UAAU,iBAAiB,CAAC,QAAQ,EAAE,SAAS;IAC7C,UAAU,EAAE,UAAU,CAAC,YAAY,CAAC,CAAC;IACrC,MAAM,EAAE,UAAU,CAAC,wBAAwB,CAAC,QAAQ,EAAE,SAAS,CAAC,CAAC;IACjE,IAAI,EAAE,QAAQ,CAAC;IACf,SAAS,EAAE,MAAM,IAAI,CAAC;IACtB,UAAU,EAAE,UAAU,CAAC,kBAAkB,CAAC,QAAQ,EAAE,SAAS,CAAC,CAAC;IAC/D,UAAU,CAAC,EAAE,MAAM,IAAI,CAAC;CACzB;AAED,wBAAgB,YAAY,CAAC,QAAQ,EAAE,SAAS,EAAE,EAChD,UAAU,EACV,IAAI,EACJ,MAAM,EACN,SAAS,EACT,UAAU,EACV,UAAU,GACX,EAAE,iBAAiB,CAAC,QAAQ,EAAE,SAAS,CAAC,eAqGxC"}