@cloudscape-design/components-themeable 3.0.158 → 3.0.160
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/lib/internal/manifest.json +1 -1
- package/lib/internal/scss/select/parts/styles.scss +0 -9
- package/lib/internal/scss/table/body-cell/styles.scss +29 -131
- package/lib/internal/scss/table/header-cell/styles.scss +7 -15
- package/lib/internal/template/button/internal.d.ts +0 -1
- package/lib/internal/template/button/internal.d.ts.map +1 -1
- package/lib/internal/template/button/internal.js +2 -2
- package/lib/internal/template/button/internal.js.map +1 -1
- package/lib/internal/template/cards/index.d.ts.map +1 -1
- package/lib/internal/template/cards/index.js +6 -1
- package/lib/internal/template/cards/index.js.map +1 -1
- package/lib/internal/template/form-field/interfaces.d.ts +0 -10
- package/lib/internal/template/form-field/interfaces.d.ts.map +1 -1
- package/lib/internal/template/form-field/interfaces.js.map +1 -1
- package/lib/internal/template/form-field/internal.d.ts +1 -1
- package/lib/internal/template/form-field/internal.d.ts.map +1 -1
- package/lib/internal/template/form-field/internal.js +4 -5
- package/lib/internal/template/form-field/internal.js.map +1 -1
- package/lib/internal/template/input/internal.d.ts.map +1 -1
- package/lib/internal/template/input/internal.js +4 -16
- package/lib/internal/template/input/internal.js.map +1 -1
- package/lib/internal/template/internal/context/form-field-context.d.ts +2 -6
- package/lib/internal/template/internal/context/form-field-context.d.ts.map +1 -1
- package/lib/internal/template/internal/context/form-field-context.js +1 -7
- package/lib/internal/template/internal/context/form-field-context.js.map +1 -1
- package/lib/internal/template/internal/environment.js +1 -1
- package/lib/internal/template/{table → internal/hooks}/use-mouse-down-target.d.ts +0 -0
- package/lib/internal/template/internal/hooks/use-mouse-down-target.d.ts.map +1 -0
- package/lib/internal/template/{table → internal/hooks}/use-mouse-down-target.js +1 -1
- package/lib/internal/template/internal/hooks/use-mouse-down-target.js.map +1 -0
- package/lib/internal/template/internal/types.d.ts +0 -9
- package/lib/internal/template/internal/types.d.ts.map +1 -1
- package/lib/internal/template/internal/types.js +2 -0
- package/lib/internal/template/internal/types.js.map +1 -1
- package/lib/internal/template/select/parts/styles.css.js +9 -9
- package/lib/internal/template/select/parts/styles.scoped.css +9 -27
- package/lib/internal/template/select/parts/styles.selectors.js +9 -9
- package/lib/internal/template/table/body-cell/index.d.ts +20 -11
- package/lib/internal/template/table/body-cell/index.d.ts.map +1 -1
- package/lib/internal/template/table/body-cell/index.js +9 -48
- package/lib/internal/template/table/body-cell/index.js.map +1 -1
- package/lib/internal/template/table/body-cell/styles.css.js +12 -18
- package/lib/internal/template/table/body-cell/styles.scoped.css +46 -229
- package/lib/internal/template/table/body-cell/styles.selectors.js +12 -18
- package/lib/internal/template/table/header-cell/index.d.ts +7 -8
- package/lib/internal/template/table/header-cell/index.d.ts.map +1 -1
- package/lib/internal/template/table/header-cell/index.js +2 -6
- package/lib/internal/template/table/header-cell/index.js.map +1 -1
- package/lib/internal/template/table/header-cell/styles.css.js +18 -19
- package/lib/internal/template/table/header-cell/styles.scoped.css +35 -40
- package/lib/internal/template/table/header-cell/styles.selectors.js +18 -19
- package/lib/internal/template/table/header-cell/utils.d.ts +1 -1
- package/lib/internal/template/table/header-cell/utils.d.ts.map +1 -1
- package/lib/internal/template/table/interfaces.d.ts +10 -85
- package/lib/internal/template/table/interfaces.d.ts.map +1 -1
- package/lib/internal/template/table/interfaces.js.map +1 -1
- package/lib/internal/template/table/internal.d.ts.map +1 -1
- package/lib/internal/template/table/internal.js +19 -69
- package/lib/internal/template/table/internal.js.map +1 -1
- package/lib/internal/template/table/thead.d.ts.map +1 -1
- package/lib/internal/template/table/thead.js +1 -1
- package/lib/internal/template/table/thead.js.map +1 -1
- package/lib/internal/template/table/utils.d.ts +1 -1
- package/lib/internal/template/table/utils.d.ts.map +1 -1
- package/lib/internal/template/test-utils/dom/table/index.d.ts +0 -4
- package/lib/internal/template/test-utils/dom/table/index.js +5 -21
- package/lib/internal/template/test-utils/dom/table/index.js.map +1 -1
- package/lib/internal/template/test-utils/selectors/table/index.d.ts +0 -4
- package/lib/internal/template/test-utils/selectors/table/index.js +5 -21
- package/lib/internal/template/test-utils/selectors/table/index.js.map +1 -1
- package/lib/internal/template/test-utils/tsconfig.tsbuildinfo +1 -1
- package/package.json +1 -1
- package/lib/internal/template/table/body-cell/click-away.d.ts +0 -9
- package/lib/internal/template/table/body-cell/click-away.d.ts.map +0 -1
- package/lib/internal/template/table/body-cell/click-away.js +0 -38
- package/lib/internal/template/table/body-cell/click-away.js.map +0 -1
- package/lib/internal/template/table/body-cell/inline-editor.d.ts +0 -12
- package/lib/internal/template/table/body-cell/inline-editor.d.ts.map +0 -1
- package/lib/internal/template/table/body-cell/inline-editor.js +0 -88
- package/lib/internal/template/table/body-cell/inline-editor.js.map +0 -1
- package/lib/internal/template/table/body-cell/td-element.d.ts +0 -21
- package/lib/internal/template/table/body-cell/td-element.d.ts.map +0 -1
- package/lib/internal/template/table/body-cell/td-element.js +0 -11
- package/lib/internal/template/table/body-cell/td-element.js.map +0 -1
- package/lib/internal/template/table/body-cell/use-stable-scroll-position.d.ts +0 -17
- package/lib/internal/template/table/body-cell/use-stable-scroll-position.d.ts.map +0 -1
- package/lib/internal/template/table/body-cell/use-stable-scroll-position.js +0 -48
- package/lib/internal/template/table/body-cell/use-stable-scroll-position.js.map +0 -1
- package/lib/internal/template/table/use-mouse-down-target.d.ts.map +0 -1
- package/lib/internal/template/table/use-mouse-down-target.js.map +0 -1
- package/lib/internal/template/table/use-table-focus-navigation.d.ts +0 -16
- package/lib/internal/template/table/use-table-focus-navigation.d.ts.map +0 -1
- package/lib/internal/template/table/use-table-focus-navigation.js +0 -131
- package/lib/internal/template/table/use-table-focus-navigation.js.map +0 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"internal.d.ts","sourceRoot":"","sources":["../../../src/input/internal.tsx"],"names":[],"mappings":"AAEA,OAAO,
|
|
1
|
+
{"version":3,"file":"internal.d.ts","sourceRoot":"","sources":["../../../src/input/internal.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAyC,MAAM,OAAO,CAAC;AAG9D,OAAO,EAAE,SAAS,EAAE,MAAM,oBAAoB,CAAC;AAG/C,OAAO,EAA6C,yBAAyB,EAAE,MAAM,oBAAoB,CAAC;AAC1G,OAAO,EAAE,UAAU,EAAE,cAAc,EAAE,gBAAgB,EAAE,gBAAgB,EAAE,MAAM,cAAc,CAAC;AAC9F,OAAO,EAAE,kBAAkB,EAAgB,MAAM,4BAA4B,CAAC;AAG9E,OAAO,EAAE,+BAA+B,EAAuB,MAAM,wCAAwC,CAAC;AAC9G,OAAO,EAAE,0BAA0B,EAAE,MAAM,sCAAsC,CAAC;AAElF,MAAM,WAAW,kBACf,SAAQ,kBAAkB,EACxB,cAAc,EACd,IAAI,CAAC,UAAU,EAAE,MAAM,CAAC,EACxB,gBAAgB,EAChB,+BAA+B,EAC/B,0BAA0B;IAC5B,IAAI,CAAC,EAAE,UAAU,CAAC,MAAM,CAAC,GAAG,cAAc,CAAC;IAC3C,UAAU,CAAC,EAAE,SAAS,CAAC,MAAM,CAAC,CAAC;IAC/B,iBAAiB,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IACzC,iBAAiB,CAAC,EAAE,MAAM,IAAI,CAAC;IAE/B,WAAW,CAAC,EAAE,SAAS,CAAC,MAAM,CAAC,CAAC;IAChC,kBAAkB,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC1C,kBAAkB,CAAC,EAAE,MAAM,IAAI,CAAC;IAEhC,kBAAkB,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;IACzC,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAE3B,gBAAgB,CAAC,EAAE,yBAAyB,CAAC,gBAAgB,CAAC,CAAC;IAC/D,kBAAkB,CAAC,EAAE,yBAAyB,CAAC;QAAE,aAAa,EAAE,IAAI,GAAG,IAAI,CAAA;KAAE,CAAC,CAAC;IAE/E,uBAAuB,CAAC,EAAE,OAAO,CAAC;CACnC;;AAwJD,wBAA+C"}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { __assign, __rest } from "tslib";
|
|
2
2
|
// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
|
|
3
3
|
// SPDX-License-Identifier: Apache-2.0
|
|
4
|
-
import React, {
|
|
4
|
+
import React, { useRef } from 'react';
|
|
5
5
|
import clsx from 'clsx';
|
|
6
6
|
import { useMergeRefs } from '../internal/hooks/use-merge-refs';
|
|
7
7
|
import InternalIcon from '../icon/internal';
|
|
@@ -31,14 +31,8 @@ function InternalInput(_a, ref) {
|
|
|
31
31
|
__rightIcon = __rightIcon !== null && __rightIcon !== void 0 ? __rightIcon : searchProps.__rightIcon;
|
|
32
32
|
__onRightIconClick = __onRightIconClick !== null && __onRightIconClick !== void 0 ? __onRightIconClick : searchProps.__onRightIconClick;
|
|
33
33
|
var formFieldContext = useFormFieldContext(rest);
|
|
34
|
-
var _g = __inheritFormFieldProps
|
|
35
|
-
|
|
36
|
-
: __assign({ __useReactAutofocus: undefined }, rest), ariaLabelledby = _g.ariaLabelledby, ariaDescribedby = _g.ariaDescribedby, controlId = _g.controlId, invalid = _g.invalid, __useReactAutofocus = _g.__useReactAutofocus;
|
|
37
|
-
var autoFocusEnabled = (__nativeAttributes === null || __nativeAttributes === void 0 ? void 0 : __nativeAttributes.autoFocus) || autoFocus;
|
|
38
|
-
var reactAutofocusProps = __useReactAutofocus
|
|
39
|
-
? { autoFocus: !autoFocusEnabled, 'data-awsui-react-autofocus': autoFocusEnabled }
|
|
40
|
-
: {};
|
|
41
|
-
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 = {},
|
|
34
|
+
var _g = __inheritFormFieldProps ? formFieldContext : rest, ariaLabelledby = _g.ariaLabelledby, ariaDescribedby = _g.ariaDescribedby, controlId = _g.controlId, invalid = _g.invalid;
|
|
35
|
+
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 = {},
|
|
42
36
|
_b[styles['input-readonly']] = readOnly,
|
|
43
37
|
_b[styles['input-invalid']] = invalid,
|
|
44
38
|
_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); }),
|
|
@@ -46,7 +40,7 @@ function InternalInput(_a, ref) {
|
|
|
46
40
|
value: value !== null && value !== void 0 ? value : '', onChange: onChange && (function (event) { return handleChange(event.target.value); }), onBlur: function (e) {
|
|
47
41
|
onBlur && fireNonCancelableEvent(onBlur);
|
|
48
42
|
__onBlurWithDetail && fireNonCancelableEvent(__onBlurWithDetail, { relatedTarget: e.relatedTarget });
|
|
49
|
-
}, onFocus: onFocus && (function () { return fireNonCancelableEvent(onFocus); }) }, __nativeAttributes)
|
|
43
|
+
}, onFocus: onFocus && (function () { return fireNonCancelableEvent(onFocus); }) }, __nativeAttributes);
|
|
50
44
|
if (type === 'number') {
|
|
51
45
|
// Chrome and Safari have a weird built-in behavior of letting focused
|
|
52
46
|
// number inputs be controlled by scrolling on them. However, they don't
|
|
@@ -70,12 +64,6 @@ function InternalInput(_a, ref) {
|
|
|
70
64
|
if (attributes.type === 'visualSearch') {
|
|
71
65
|
attributes.type = 'text';
|
|
72
66
|
}
|
|
73
|
-
useEffect(function () {
|
|
74
|
-
var _a;
|
|
75
|
-
if (__useReactAutofocus && autoFocusEnabled) {
|
|
76
|
-
(_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus({ preventScroll: true });
|
|
77
|
-
}
|
|
78
|
-
}, [__useReactAutofocus, autoFocusEnabled]);
|
|
79
67
|
return (React.createElement("div", __assign({}, baseProps, { className: clsx(baseProps.className, styles['input-container']), ref: __internalRootRef }),
|
|
80
68
|
__leftIcon && (React.createElement("span", { onClick: __onLeftIconClick, className: iconClassName('left', !!__onLeftIconClick) },
|
|
81
69
|
React.createElement(InternalIcon, { name: __leftIcon, variant: disabled ? 'disabled' : __leftIconVariant }))),
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"internal.js","sourceRoot":"","sources":["../../../src/input/internal.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 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"]}
|
|
1
|
+
{"version":3,"file":"internal.js","sourceRoot":"","sources":["../../../src/input/internal.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 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"]}
|
|
@@ -39,10 +39,6 @@ export interface FormFieldValidationControlProps extends FormFieldControlProps {
|
|
|
39
39
|
*/
|
|
40
40
|
invalid?: boolean;
|
|
41
41
|
}
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
}
|
|
45
|
-
export declare const FormFieldContext: import("react").Context<InternalFormFieldControlProps>;
|
|
46
|
-
export declare function useFormFieldContext(props: FormFieldValidationControlProps): InternalFormFieldControlProps;
|
|
47
|
-
export {};
|
|
42
|
+
export declare const FormFieldContext: import("react").Context<FormFieldValidationControlProps>;
|
|
43
|
+
export declare function useFormFieldContext(props: FormFieldValidationControlProps): FormFieldValidationControlProps;
|
|
48
44
|
//# sourceMappingURL=form-field-context.d.ts.map
|
|
@@ -1 +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,
|
|
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"}
|
|
@@ -11,12 +11,6 @@ function applyDefault(fields, defaults, keys) {
|
|
|
11
11
|
}
|
|
12
12
|
export function useFormFieldContext(props) {
|
|
13
13
|
var context = useContext(FormFieldContext);
|
|
14
|
-
return applyDefault(props, context, [
|
|
15
|
-
'invalid',
|
|
16
|
-
'controlId',
|
|
17
|
-
'ariaLabelledby',
|
|
18
|
-
'ariaDescribedby',
|
|
19
|
-
'__useReactAutofocus',
|
|
20
|
-
]);
|
|
14
|
+
return applyDefault(props, context, ['invalid', 'controlId', 'ariaLabelledby', 'ariaDescribedby']);
|
|
21
15
|
}
|
|
22
16
|
//# sourceMappingURL=form-field-context.js.map
|
|
@@ -1 +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;
|
|
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"]}
|
|
File without changes
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"use-mouse-down-target.d.ts","sourceRoot":"","sources":["../../../../src/internal/hooks/use-mouse-down-target.ts"],"names":[],"mappings":"AAqBA;;;GAGG;AACH,MAAM,CAAC,OAAO,UAAU,kBAAkB,sBAMzC"}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
|
|
2
2
|
// SPDX-License-Identifier: Apache-2.0
|
|
3
3
|
import { useRef } from 'react';
|
|
4
|
-
import { createSingletonHandler } from '
|
|
4
|
+
import { createSingletonHandler } from './use-singleton-handler';
|
|
5
5
|
var useEventListenersSingleton = createSingletonHandler(function (setTarget) {
|
|
6
6
|
function handleMouseDown(event) {
|
|
7
7
|
setTarget(event.target);
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"use-mouse-down-target.js","sourceRoot":"","sources":["../../../../src/internal/hooks/use-mouse-down-target.ts"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AAEtC,OAAO,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,sBAAsB,EAAE,MAAM,yBAAyB,CAAC;AAEjE,IAAM,0BAA0B,GAAG,sBAAsB,CAAc,UAAA,SAAS;IAC9E,SAAS,eAAe,CAAC,KAAiB;QACxC,SAAS,CAAC,KAAK,CAAC,MAAc,CAAC,CAAC;IAClC,CAAC;IACD,SAAS,aAAa;QACpB,SAAS,CAAC,IAAI,CAAC,CAAC;IAClB,CAAC;IACD,MAAM,CAAC,gBAAgB,CAAC,WAAW,EAAE,eAAe,CAAC,CAAC;IACtD,MAAM,CAAC,gBAAgB,CAAC,SAAS,EAAE,aAAa,CAAC,CAAC;IAClD,OAAO;QACL,MAAM,CAAC,mBAAmB,CAAC,WAAW,EAAE,eAAe,CAAC,CAAC;QACzD,MAAM,CAAC,mBAAmB,CAAC,SAAS,EAAE,aAAa,CAAC,CAAC;IACvD,CAAC,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH;;;GAGG;AACH,MAAM,CAAC,OAAO,UAAU,kBAAkB;IACxC,IAAM,kBAAkB,GAAG,MAAM,CAAc,IAAI,CAAC,CAAC;IACrD,0BAA0B,CAAC,UAAA,MAAM;QAC/B,kBAAkB,CAAC,OAAO,GAAG,MAAM,CAAC;IACtC,CAAC,CAAC,CAAC;IACH,OAAO,cAAM,OAAA,kBAAkB,CAAC,OAAO,EAA1B,CAA0B,CAAC;AAC1C,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport { useRef } from 'react';\nimport { createSingletonHandler } from './use-singleton-handler';\n\nconst useEventListenersSingleton = createSingletonHandler<Node | null>(setTarget => {\n function handleMouseDown(event: MouseEvent) {\n setTarget(event.target as Node);\n }\n function handleKeyDown() {\n setTarget(null);\n }\n window.addEventListener('mousedown', handleMouseDown);\n window.addEventListener('keydown', handleKeyDown);\n return () => {\n window.removeEventListener('mousedown', handleMouseDown);\n window.removeEventListener('keydown', handleKeyDown);\n };\n});\n\n/**\n * Captures last mouse down target and clears it on keydown.\n * @returns a callback to get the last detected mouse down target.\n */\nexport default function useMouseDownTarget() {\n const mouseDownTargetRef = useRef<null | Node>(null);\n useEventListenersSingleton(target => {\n mouseDownTargetRef.current = target;\n });\n return () => mouseDownTargetRef.current;\n}\n"]}
|
|
@@ -14,13 +14,4 @@
|
|
|
14
14
|
export type SomeRequired<Type, Keys extends keyof Type> = Type & {
|
|
15
15
|
[Key in Keys]-?: Type[Key];
|
|
16
16
|
};
|
|
17
|
-
/**
|
|
18
|
-
* Utility type that makes a union of given type and undefined.
|
|
19
|
-
* @example
|
|
20
|
-
* ```
|
|
21
|
-
* type OptionalString = Optional<string>
|
|
22
|
-
* type OptionalStringOrNumber = Optional<string | number>
|
|
23
|
-
* ```
|
|
24
|
-
*/
|
|
25
|
-
export type Optional<Type> = Type | undefined;
|
|
26
17
|
//# sourceMappingURL=types.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/internal/types.ts"],"names":[],"mappings":"
|
|
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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"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
|
|
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"]}
|
|
@@ -1,14 +1,14 @@
|
|
|
1
1
|
|
|
2
2
|
import './styles.scoped.css';
|
|
3
3
|
export default {
|
|
4
|
-
"placeholder": "
|
|
5
|
-
"item": "
|
|
6
|
-
"checkbox": "
|
|
7
|
-
"filter": "
|
|
8
|
-
"trigger": "
|
|
9
|
-
"layout-strut": "awsui_layout-
|
|
10
|
-
"list-bottom": "awsui_list-
|
|
11
|
-
"selected-icon": "awsui_selected-
|
|
12
|
-
"show-label-tag": "awsui_show-label-
|
|
4
|
+
"placeholder": "awsui_placeholder_dwuol_mf4fo_93",
|
|
5
|
+
"item": "awsui_item_dwuol_mf4fo_98",
|
|
6
|
+
"checkbox": "awsui_checkbox_dwuol_mf4fo_102",
|
|
7
|
+
"filter": "awsui_filter_dwuol_mf4fo_111",
|
|
8
|
+
"trigger": "awsui_trigger_dwuol_mf4fo_116",
|
|
9
|
+
"layout-strut": "awsui_layout-strut_dwuol_mf4fo_122",
|
|
10
|
+
"list-bottom": "awsui_list-bottom_dwuol_mf4fo_128",
|
|
11
|
+
"selected-icon": "awsui_selected-icon_dwuol_mf4fo_132",
|
|
12
|
+
"show-label-tag": "awsui_show-label-tag_dwuol_mf4fo_136"
|
|
13
13
|
};
|
|
14
14
|
|
|
@@ -90,16 +90,16 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
|
|
|
90
90
|
Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
|
|
91
91
|
SPDX-License-Identifier: Apache-2.0
|
|
92
92
|
*/
|
|
93
|
-
.
|
|
93
|
+
.awsui_placeholder_dwuol_mf4fo_93:not(#\9) {
|
|
94
94
|
color: var(--color-text-input-placeholder-rtvjp5, #687078);
|
|
95
95
|
font-style: italic;
|
|
96
96
|
}
|
|
97
97
|
|
|
98
|
-
.
|
|
98
|
+
.awsui_item_dwuol_mf4fo_98:not(#\9) {
|
|
99
99
|
display: flex;
|
|
100
100
|
align-items: center;
|
|
101
101
|
}
|
|
102
|
-
.
|
|
102
|
+
.awsui_item_dwuol_mf4fo_98 > .awsui_checkbox_dwuol_mf4fo_102:not(#\9) {
|
|
103
103
|
position: relative;
|
|
104
104
|
min-height: var(--size-control-eyly4k, 14px);
|
|
105
105
|
min-width: var(--size-control-eyly4k, 14px);
|
|
@@ -108,49 +108,31 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
|
|
|
108
108
|
margin-right: var(--space-field-horizontal-z3i1c8, 8px);
|
|
109
109
|
}
|
|
110
110
|
|
|
111
|
-
.
|
|
111
|
+
.awsui_filter_dwuol_mf4fo_111:not(#\9) {
|
|
112
112
|
z-index: 4;
|
|
113
113
|
flex-shrink: 0;
|
|
114
114
|
}
|
|
115
115
|
|
|
116
|
-
.
|
|
116
|
+
.awsui_trigger_dwuol_mf4fo_116:not(#\9) {
|
|
117
117
|
white-space: nowrap;
|
|
118
118
|
overflow: hidden;
|
|
119
119
|
text-overflow: ellipsis;
|
|
120
120
|
}
|
|
121
|
-
.awsui_trigger_dwuol_1dfho_116[data-awsui-focus-visible=true]:not(#\9):focus {
|
|
122
|
-
position: relative;
|
|
123
|
-
}
|
|
124
|
-
.awsui_trigger_dwuol_1dfho_116[data-awsui-focus-visible=true]:not(#\9):focus {
|
|
125
|
-
outline: 2px dotted transparent;
|
|
126
|
-
outline-offset: calc(calc(-1 * var(--space-scaled-xs-6859qs, 8px)) - 1px);
|
|
127
|
-
}
|
|
128
|
-
.awsui_trigger_dwuol_1dfho_116[data-awsui-focus-visible=true]:not(#\9):focus::before {
|
|
129
|
-
content: " ";
|
|
130
|
-
display: block;
|
|
131
|
-
position: absolute;
|
|
132
|
-
left: calc(-1 * calc(-1 * var(--space-scaled-xs-6859qs, 8px)));
|
|
133
|
-
top: calc(-1 * calc(-1 * var(--space-scaled-xxs-95dhkm, 4px)));
|
|
134
|
-
width: calc(100% + 2 * calc(-1 * var(--space-scaled-xs-6859qs, 8px)));
|
|
135
|
-
height: calc(100% + 2 * calc(-1 * var(--space-scaled-xxs-95dhkm, 4px)));
|
|
136
|
-
border-radius: var(--border-radius-control-default-focus-ring-hekmgc, 2px);
|
|
137
|
-
box-shadow: 0 0 0 2px var(--color-border-item-focused-n5kd8g, #0073bb);
|
|
138
|
-
}
|
|
139
121
|
|
|
140
|
-
.awsui_layout-
|
|
122
|
+
.awsui_layout-strut_dwuol_mf4fo_122:not(#\9) {
|
|
141
123
|
width: 100%;
|
|
142
124
|
position: relative;
|
|
143
125
|
transform: translate3d(0, 0, 0);
|
|
144
126
|
}
|
|
145
127
|
|
|
146
|
-
.awsui_list-
|
|
128
|
+
.awsui_list-bottom_dwuol_mf4fo_128:not(#\9) {
|
|
147
129
|
/* used in unit-tests */
|
|
148
130
|
}
|
|
149
131
|
|
|
150
|
-
.awsui_selected-
|
|
132
|
+
.awsui_selected-icon_dwuol_mf4fo_132:not(#\9) {
|
|
151
133
|
color: var(--color-border-item-focused-n5kd8g, #0073bb);
|
|
152
134
|
}
|
|
153
135
|
|
|
154
|
-
.awsui_show-label-
|
|
136
|
+
.awsui_show-label-tag_dwuol_mf4fo_136 > .awsui_selected-icon_dwuol_mf4fo_132:not(#\9) {
|
|
155
137
|
padding-left: var(--space-scaled-s-cu1hzn, 12px);
|
|
156
138
|
}
|
|
@@ -2,14 +2,14 @@
|
|
|
2
2
|
// es-module interop with Babel and Typescript
|
|
3
3
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
4
4
|
module.exports.default = {
|
|
5
|
-
"placeholder": "
|
|
6
|
-
"item": "
|
|
7
|
-
"checkbox": "
|
|
8
|
-
"filter": "
|
|
9
|
-
"trigger": "
|
|
10
|
-
"layout-strut": "awsui_layout-
|
|
11
|
-
"list-bottom": "awsui_list-
|
|
12
|
-
"selected-icon": "awsui_selected-
|
|
13
|
-
"show-label-tag": "awsui_show-label-
|
|
5
|
+
"placeholder": "awsui_placeholder_dwuol_mf4fo_93",
|
|
6
|
+
"item": "awsui_item_dwuol_mf4fo_98",
|
|
7
|
+
"checkbox": "awsui_checkbox_dwuol_mf4fo_102",
|
|
8
|
+
"filter": "awsui_filter_dwuol_mf4fo_111",
|
|
9
|
+
"trigger": "awsui_trigger_dwuol_mf4fo_116",
|
|
10
|
+
"layout-strut": "awsui_layout-strut_dwuol_mf4fo_122",
|
|
11
|
+
"list-bottom": "awsui_list-bottom_dwuol_mf4fo_128",
|
|
12
|
+
"selected-icon": "awsui_selected-icon_dwuol_mf4fo_132",
|
|
13
|
+
"show-label-tag": "awsui_show-label-tag_dwuol_mf4fo_136"
|
|
14
14
|
};
|
|
15
15
|
|
|
@@ -1,16 +1,25 @@
|
|
|
1
|
+
import React from 'react';
|
|
1
2
|
import { TableProps } from '../interfaces';
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
3
|
+
interface TableBodyCellProps {
|
|
4
|
+
className?: string;
|
|
5
|
+
style?: React.CSSProperties;
|
|
6
|
+
wrapLines: boolean | undefined;
|
|
7
|
+
isFirstRow: boolean;
|
|
8
|
+
isLastRow: boolean;
|
|
9
|
+
isEvenRow?: boolean;
|
|
10
|
+
stripedRows?: boolean;
|
|
11
|
+
isSelected: boolean;
|
|
12
|
+
isNextSelected: boolean;
|
|
13
|
+
isPrevSelected: boolean;
|
|
14
|
+
children?: React.ReactNode;
|
|
15
|
+
hasSelection?: boolean;
|
|
16
|
+
hasFooter?: boolean;
|
|
17
|
+
}
|
|
18
|
+
export declare function TableBodyCell({ className, style, children, wrapLines, isFirstRow, isLastRow, isSelected, isNextSelected, isPrevSelected, isEvenRow, stripedRows, hasSelection, hasFooter, }: TableBodyCellProps): JSX.Element;
|
|
19
|
+
interface TableBodyCellContentProps<ItemType> extends TableBodyCellProps {
|
|
20
|
+
column: TableProps.ColumnDefinition<ItemType>;
|
|
5
21
|
item: ItemType;
|
|
6
|
-
isEditing: boolean;
|
|
7
|
-
onEditStart: () => void;
|
|
8
|
-
onEditEnd: () => void;
|
|
9
|
-
submitEdit?: TableProps.SubmitEditFunction<ItemType, ValueType>;
|
|
10
|
-
ariaLabels: TableProps['ariaLabels'];
|
|
11
22
|
}
|
|
12
|
-
export declare function
|
|
13
|
-
isEditable: boolean;
|
|
14
|
-
}): JSX.Element;
|
|
23
|
+
export declare function TableBodyCellContent<ItemType>({ item, column, ...rest }: TableBodyCellContentProps<ItemType>): JSX.Element;
|
|
15
24
|
export {};
|
|
16
25
|
//# sourceMappingURL=index.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/table/body-cell/index.tsx"],"names":[],"mappings":"
|
|
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"}
|
|
@@ -3,54 +3,15 @@ import { __assign, __rest } from "tslib";
|
|
|
3
3
|
// SPDX-License-Identifier: Apache-2.0
|
|
4
4
|
import clsx from 'clsx';
|
|
5
5
|
import styles from './styles.css.js';
|
|
6
|
-
import React
|
|
7
|
-
import
|
|
8
|
-
import { useEffectOnUpdate } from '../../internal/hooks/use-effect-on-update';
|
|
9
|
-
import Button from '../../button/internal';
|
|
10
|
-
import { TableTdElement } from './td-element';
|
|
11
|
-
import { InlineEditor } from './inline-editor';
|
|
12
|
-
import { useStableScrollPosition } from './use-stable-scroll-position';
|
|
13
|
-
var readonlyState = Object.freeze({
|
|
14
|
-
isEditing: false,
|
|
15
|
-
currentValue: undefined,
|
|
16
|
-
setValue: function () { }
|
|
17
|
-
});
|
|
18
|
-
var submitHandlerFallback = function () {
|
|
19
|
-
throw new Error('The function `handleSubmit` is required for editable columns');
|
|
20
|
-
};
|
|
21
|
-
function TableCellEditable(_a) {
|
|
22
|
-
var _b;
|
|
23
|
-
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"]);
|
|
24
|
-
var editActivateRef = useRef(null);
|
|
25
|
-
var cellRef = useRef(null);
|
|
26
|
-
var focusVisible = useFocusVisible();
|
|
27
|
-
var _c = useStableScrollPosition(cellRef), storeScrollPosition = _c.storeScrollPosition, restoreScrollPosition = _c.restoreScrollPosition;
|
|
28
|
-
var handleEditStart = function () {
|
|
29
|
-
storeScrollPosition();
|
|
30
|
-
if (!isEditing) {
|
|
31
|
-
onEditStart();
|
|
32
|
-
}
|
|
33
|
-
};
|
|
34
|
-
var scheduleRestoreScrollPosition = useCallback(function () { return setTimeout(restoreScrollPosition, 0); }, [restoreScrollPosition]);
|
|
35
|
-
var tdNativeAttributes = __assign(__assign({}, focusVisible), { onFocus: scheduleRestoreScrollPosition, 'data-inline-editing-active': isEditing.toString() });
|
|
36
|
-
useEffectOnUpdate(function () {
|
|
37
|
-
if (!isEditing && editActivateRef.current) {
|
|
38
|
-
editActivateRef.current.focus({ preventScroll: true });
|
|
39
|
-
}
|
|
40
|
-
var timer = scheduleRestoreScrollPosition();
|
|
41
|
-
return function () { return clearTimeout(timer); };
|
|
42
|
-
}, [isEditing, scheduleRestoreScrollPosition]);
|
|
43
|
-
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,
|
|
44
|
-
column.cell(item, readonlyState),
|
|
45
|
-
React.createElement("span", { className: styles['body-cell-editor'] },
|
|
46
|
-
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" }))))));
|
|
47
|
-
}
|
|
6
|
+
import React from 'react';
|
|
7
|
+
import { useVisualRefresh } from '../../internal/hooks/use-visual-mode';
|
|
48
8
|
export function TableBodyCell(_a) {
|
|
49
|
-
var
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
9
|
+
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;
|
|
10
|
+
var isVisualRefresh = useVisualRefresh();
|
|
11
|
+
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));
|
|
12
|
+
}
|
|
13
|
+
export function TableBodyCellContent(_a) {
|
|
14
|
+
var item = _a.item, column = _a.column, rest = __rest(_a, ["item", "column"]);
|
|
15
|
+
return React.createElement(TableBodyCell, __assign({}, rest), column.cell(item));
|
|
55
16
|
}
|
|
56
17
|
//# sourceMappingURL=index.js.map
|
|
@@ -1 +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,
|
|
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"]}
|
|
@@ -1,23 +1,17 @@
|
|
|
1
1
|
|
|
2
2
|
import './styles.scoped.css';
|
|
3
3
|
export default {
|
|
4
|
-
"body-cell": "awsui_body-
|
|
5
|
-
"body-cell-wrap": "awsui_body-cell-
|
|
6
|
-
"
|
|
7
|
-
"
|
|
8
|
-
"body-cell-
|
|
9
|
-
"
|
|
10
|
-
"
|
|
11
|
-
"body-cell-
|
|
12
|
-
"body-cell-
|
|
13
|
-
"
|
|
14
|
-
"has-
|
|
15
|
-
"
|
|
16
|
-
"body-cell-next-selected": "awsui_body-cell-next-selected_c6tup_164cf_176",
|
|
17
|
-
"body-cell-prev-selected": "awsui_body-cell-prev-selected_c6tup_164cf_180",
|
|
18
|
-
"body-cell-editor": "awsui_body-cell-editor_c6tup_164cf_204",
|
|
19
|
-
"body-cell-editor-form": "awsui_body-cell-editor-form_c6tup_164cf_214",
|
|
20
|
-
"body-cell-editor-row": "awsui_body-cell-editor-row_c6tup_164cf_223",
|
|
21
|
-
"body-cell-editor-controls": "awsui_body-cell-editor-controls_c6tup_164cf_233"
|
|
4
|
+
"body-cell": "awsui_body-cell_c6tup_nv0er_9",
|
|
5
|
+
"body-cell-wrap": "awsui_body-cell-wrap_c6tup_nv0er_18",
|
|
6
|
+
"body-cell-first-row": "awsui_body-cell-first-row_c6tup_nv0er_30",
|
|
7
|
+
"body-cell-last-row": "awsui_body-cell-last-row_c6tup_nv0er_33",
|
|
8
|
+
"body-cell-selected": "awsui_body-cell-selected_c6tup_nv0er_33",
|
|
9
|
+
"has-footer": "awsui_has-footer_c6tup_nv0er_33",
|
|
10
|
+
"body-cell-shaded": "awsui_body-cell-shaded_c6tup_nv0er_43",
|
|
11
|
+
"body-cell-next-selected": "awsui_body-cell-next-selected_c6tup_nv0er_65",
|
|
12
|
+
"body-cell-prev-selected": "awsui_body-cell-prev-selected_c6tup_nv0er_69",
|
|
13
|
+
"is-visual-refresh": "awsui_is-visual-refresh_c6tup_nv0er_98",
|
|
14
|
+
"has-selection": "awsui_has-selection_c6tup_nv0er_114",
|
|
15
|
+
"has-striped-rows": "awsui_has-striped-rows_c6tup_nv0er_117"
|
|
22
16
|
};
|
|
23
17
|
|