@cloudscape-design/components 3.0.756 → 3.0.757
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/file-upload/internal.js +5 -3
- package/file-upload/internal.js.map +1 -1
- package/internal/components/button-trigger/index.d.ts +1 -1
- package/internal/components/button-trigger/index.d.ts.map +1 -1
- package/internal/components/button-trigger/index.js +1 -1
- package/internal/components/button-trigger/index.js.map +1 -1
- package/internal/components/button-trigger/styles.css.js +13 -11
- package/internal/components/button-trigger/styles.scoped.css +30 -26
- package/internal/components/button-trigger/styles.selectors.js +13 -11
- package/internal/environment.js +1 -1
- package/internal/environment.json +1 -1
- package/internal/hooks/use-list-focus-controller.d.ts +3 -3
- package/internal/hooks/use-list-focus-controller.d.ts.map +1 -1
- package/internal/hooks/use-list-focus-controller.js +7 -8
- package/internal/hooks/use-list-focus-controller.js.map +1 -1
- package/internal/manifest.json +1 -1
- package/package.json +1 -1
- package/property-filter/filtering-token/index.d.ts.map +1 -1
- package/property-filter/filtering-token/index.js +6 -4
- package/property-filter/filtering-token/index.js.map +1 -1
- package/property-filter/interfaces.d.ts +4 -2
- package/property-filter/interfaces.d.ts.map +1 -1
- package/property-filter/interfaces.js.map +1 -1
- package/property-filter/internal.d.ts.map +1 -1
- package/property-filter/internal.js +11 -3
- package/property-filter/internal.js.map +1 -1
- package/property-filter/token-editor.d.ts.map +1 -1
- package/property-filter/token-editor.js +5 -3
- package/property-filter/token-editor.js.map +1 -1
- package/select/internal.d.ts +1 -1
- package/select/internal.d.ts.map +1 -1
- package/select/internal.js +1 -1
- package/select/internal.js.map +1 -1
- package/select/parts/trigger.d.ts +1 -1
- package/select/parts/trigger.d.ts.map +1 -1
- package/select/parts/trigger.js.map +1 -1
- package/token-group/internal.d.ts.map +1 -1
- package/token-group/internal.js +4 -2
- package/token-group/internal.js.map +1 -1
package/file-upload/internal.js
CHANGED
|
@@ -28,13 +28,15 @@ function InternalFileUpload(_a, externalRef) {
|
|
|
28
28
|
var _b;
|
|
29
29
|
var { accept, ariaRequired, multiple = false, onChange, value, tokenLimit, showFileSize, showFileLastModified, showFileThumbnail, i18nStrings, __internalRootRef = null, constraintText, errorText, warningText, fileErrors, fileWarnings } = _a, restProps = __rest(_a, ["accept", "ariaRequired", "multiple", "onChange", "value", "tokenLimit", "showFileSize", "showFileLastModified", "showFileThumbnail", "i18nStrings", "__internalRootRef", "constraintText", "errorText", "warningText", "fileErrors", "fileWarnings"]);
|
|
30
30
|
const [nextFocusIndex, setNextFocusIndex] = useState(null);
|
|
31
|
-
const onFocusMoved = () => setNextFocusIndex(null);
|
|
32
31
|
const tokenListRef = useListFocusController({
|
|
33
32
|
nextFocusIndex,
|
|
34
|
-
onFocusMoved
|
|
33
|
+
onFocusMoved: target => {
|
|
34
|
+
target.focus();
|
|
35
|
+
setNextFocusIndex(null);
|
|
36
|
+
},
|
|
35
37
|
listItemSelector: `.${tokenListStyles['list-item']}`,
|
|
36
38
|
showMoreSelector: `.${tokenListStyles.toggle}`,
|
|
37
|
-
|
|
39
|
+
fallbackSelector: `.${fileInputStyles['upload-input']}`,
|
|
38
40
|
});
|
|
39
41
|
const baseProps = getBaseProps(restProps);
|
|
40
42
|
const metadata = { showFileSize, showFileLastModified, showFileThumbnail };
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"internal.js","sourceRoot":"","sources":["../../../src/file-upload/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\n\nimport React, { ForwardedRef, useRef, useState } from 'react';\nimport clsx from 'clsx';\n\nimport { warnOnce } from '@cloudscape-design/component-toolkit/internal';\n\nimport InternalBox from '../box/internal';\nimport { ButtonProps } from '../button/interfaces';\nimport { useFormFieldContext } from '../contexts/form-field';\nimport { ConstraintText, FormFieldError, FormFieldWarning } from '../form-field/internal';\nimport { getBaseProps } from '../internal/base-component';\nimport TokenList from '../internal/components/token-list';\nimport { fireNonCancelableEvent } from '../internal/events';\nimport checkControlled from '../internal/hooks/check-controlled';\nimport { InternalBaseComponentProps } from '../internal/hooks/use-base-component';\nimport { useListFocusController } from '../internal/hooks/use-list-focus-controller';\nimport { useMergeRefs } from '../internal/hooks/use-merge-refs';\nimport { useUniqueId } from '../internal/hooks/use-unique-id';\nimport { joinStrings } from '../internal/utils/strings';\nimport InternalSpaceBetween from '../space-between/internal';\nimport { Token } from '../token-group/token';\nimport { Dropzone, useDropzoneVisible } from './dropzone';\nimport FileInput from './file-input';\nimport { FileOption } from './file-option';\nimport { FileUploadProps } from './interfaces';\n\nimport tokenListStyles from '../internal/components/token-list/styles.css.js';\nimport fileInputStyles from './file-input/styles.css.js';\nimport styles from './styles.css.js';\n\ntype InternalFileUploadProps = FileUploadProps & InternalBaseComponentProps;\n\nexport default React.forwardRef(InternalFileUpload);\n\nfunction InternalFileUpload(\n {\n accept,\n ariaRequired,\n multiple = false,\n onChange,\n value,\n tokenLimit,\n showFileSize,\n showFileLastModified,\n showFileThumbnail,\n i18nStrings,\n __internalRootRef = null,\n constraintText,\n errorText,\n warningText,\n fileErrors,\n fileWarnings,\n ...restProps\n }: InternalFileUploadProps,\n externalRef: ForwardedRef<ButtonProps.Ref>\n) {\n const [nextFocusIndex, setNextFocusIndex] = useState<null | number>(null);\n const onFocusMoved = () => setNextFocusIndex(null);\n const tokenListRef = useListFocusController({\n nextFocusIndex,\n onFocusMoved,\n listItemSelector: `.${tokenListStyles['list-item']}`,\n showMoreSelector: `.${tokenListStyles.toggle}`,\n outsideSelector: `.${fileInputStyles['upload-input']}`,\n });\n\n const baseProps = getBaseProps(restProps);\n const metadata = { showFileSize, showFileLastModified, showFileThumbnail };\n\n const errorId = useUniqueId('error-');\n const warningId = useUniqueId('warning-');\n const constraintTextId = useUniqueId('constraint-text-');\n\n const fileInputRef = useRef<ButtonProps.Ref>(null);\n const ref = useMergeRefs(fileInputRef, externalRef);\n\n checkControlled('FileUpload', 'value', value, 'onChange', onChange);\n\n if (!multiple && value.length > 1) {\n warnOnce('FileUpload', 'Value must be an array of size 0 or 1 when `multiple=false`.');\n }\n\n const handleFilesChange = (newFiles: File[]) => {\n const newValue = multiple ? [...value, ...newFiles] : newFiles[0] ? newFiles : [...value];\n fireNonCancelableEvent(onChange, { value: newValue });\n };\n\n const onFileRemove = (removeFileIndex: number) => {\n const newValue = value.filter((_, fileIndex) => fileIndex !== removeFileIndex);\n fireNonCancelableEvent(onChange, { value: newValue });\n setNextFocusIndex(removeFileIndex);\n };\n\n const isDropzoneVisible = useDropzoneVisible(multiple);\n\n const showWarning = warningText && !errorText;\n\n if (warningText && errorText) {\n warnOnce('FileUpload', 'Both `errorText` and `warningText` exist. `warningText` will not be shown.');\n }\n\n const formFieldContext = useFormFieldContext(restProps);\n const ariaDescribedBy = joinStrings(\n restProps.ariaDescribedby ?? formFieldContext.ariaDescribedby,\n errorText ? errorId : undefined,\n showWarning ? warningId : undefined,\n constraintText ? constraintTextId : undefined\n );\n\n const hasError = Boolean(errorText || fileErrors?.filter(Boolean).length);\n const invalid = restProps.invalid || formFieldContext.invalid || hasError;\n\n return (\n <InternalSpaceBetween\n {...baseProps}\n size=\"xs\"\n className={clsx(baseProps.className, styles.root)}\n __internalRootRef={__internalRootRef}\n ref={tokenListRef}\n >\n <InternalBox>\n {isDropzoneVisible ? (\n <Dropzone onChange={handleFilesChange}>{i18nStrings.dropzoneText(multiple)}</Dropzone>\n ) : (\n <FileInput\n ref={ref}\n accept={accept}\n ariaRequired={ariaRequired}\n multiple={multiple}\n onChange={handleFilesChange}\n value={value}\n {...restProps}\n ariaDescribedby={ariaDescribedBy}\n invalid={invalid}\n >\n {i18nStrings.uploadButtonText(multiple)}\n </FileInput>\n )}\n\n {(constraintText || errorText || warningText) && (\n <div className={styles.hints}>\n {errorText && (\n <FormFieldError id={errorId} errorIconAriaLabel={i18nStrings?.errorIconAriaLabel}>\n {errorText}\n </FormFieldError>\n )}\n {showWarning && (\n <FormFieldWarning id={warningId} warningIconAriaLabel={i18nStrings?.warningIconAriaLabel}>\n {warningText}\n </FormFieldWarning>\n )}\n {constraintText && (\n <ConstraintText id={constraintTextId} hasValidationText={!!errorText || !!warningText}>\n {constraintText}\n </ConstraintText>\n )}\n </div>\n )}\n </InternalBox>\n\n {!multiple && value.length > 0 ? (\n <InternalBox>\n <Token\n ariaLabel={value[0].name}\n dismissLabel={i18nStrings.removeFileAriaLabel(0)}\n onDismiss={() => onFileRemove(0)}\n errorText={fileErrors?.[0]}\n warningText={fileWarnings?.[0]}\n errorIconAriaLabel={i18nStrings.errorIconAriaLabel}\n warningIconAriaLabel={i18nStrings.warningIconAriaLabel}\n data-index={0}\n >\n <FileOption file={value[0]} metadata={metadata} i18nStrings={i18nStrings} />\n </Token>\n </InternalBox>\n ) : null}\n\n {multiple && value.length > 0 ? (\n <InternalBox>\n <TokenList\n alignment=\"vertical\"\n items={value}\n renderItem={(file, fileIndex) => (\n <Token\n ariaLabel={file.name}\n dismissLabel={i18nStrings.removeFileAriaLabel(fileIndex)}\n onDismiss={() => onFileRemove(fileIndex)}\n errorText={fileErrors?.[fileIndex]}\n warningText={fileWarnings?.[fileIndex]}\n errorIconAriaLabel={i18nStrings.errorIconAriaLabel}\n warningIconAriaLabel={i18nStrings.warningIconAriaLabel}\n data-index={fileIndex}\n >\n <FileOption file={file} metadata={metadata} i18nStrings={i18nStrings} />\n </Token>\n )}\n limit={tokenLimit}\n i18nStrings={{\n limitShowFewer: i18nStrings.limitShowFewer,\n limitShowMore: i18nStrings.limitShowMore,\n }}\n />\n </InternalBox>\n ) : null}\n </InternalSpaceBetween>\n );\n}\n"]}
|
|
1
|
+
{"version":3,"file":"internal.js","sourceRoot":"","sources":["../../../src/file-upload/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\n\nimport React, { ForwardedRef, useRef, useState } from 'react';\nimport clsx from 'clsx';\n\nimport { warnOnce } from '@cloudscape-design/component-toolkit/internal';\n\nimport InternalBox from '../box/internal';\nimport { ButtonProps } from '../button/interfaces';\nimport { useFormFieldContext } from '../contexts/form-field';\nimport { ConstraintText, FormFieldError, FormFieldWarning } from '../form-field/internal';\nimport { getBaseProps } from '../internal/base-component';\nimport TokenList from '../internal/components/token-list';\nimport { fireNonCancelableEvent } from '../internal/events';\nimport checkControlled from '../internal/hooks/check-controlled';\nimport { InternalBaseComponentProps } from '../internal/hooks/use-base-component';\nimport { useListFocusController } from '../internal/hooks/use-list-focus-controller';\nimport { useMergeRefs } from '../internal/hooks/use-merge-refs';\nimport { useUniqueId } from '../internal/hooks/use-unique-id';\nimport { joinStrings } from '../internal/utils/strings';\nimport InternalSpaceBetween from '../space-between/internal';\nimport { Token } from '../token-group/token';\nimport { Dropzone, useDropzoneVisible } from './dropzone';\nimport FileInput from './file-input';\nimport { FileOption } from './file-option';\nimport { FileUploadProps } from './interfaces';\n\nimport tokenListStyles from '../internal/components/token-list/styles.css.js';\nimport fileInputStyles from './file-input/styles.css.js';\nimport styles from './styles.css.js';\n\ntype InternalFileUploadProps = FileUploadProps & InternalBaseComponentProps;\n\nexport default React.forwardRef(InternalFileUpload);\n\nfunction InternalFileUpload(\n {\n accept,\n ariaRequired,\n multiple = false,\n onChange,\n value,\n tokenLimit,\n showFileSize,\n showFileLastModified,\n showFileThumbnail,\n i18nStrings,\n __internalRootRef = null,\n constraintText,\n errorText,\n warningText,\n fileErrors,\n fileWarnings,\n ...restProps\n }: InternalFileUploadProps,\n externalRef: ForwardedRef<ButtonProps.Ref>\n) {\n const [nextFocusIndex, setNextFocusIndex] = useState<null | number>(null);\n const tokenListRef = useListFocusController({\n nextFocusIndex,\n onFocusMoved: target => {\n target.focus();\n setNextFocusIndex(null);\n },\n listItemSelector: `.${tokenListStyles['list-item']}`,\n showMoreSelector: `.${tokenListStyles.toggle}`,\n fallbackSelector: `.${fileInputStyles['upload-input']}`,\n });\n\n const baseProps = getBaseProps(restProps);\n const metadata = { showFileSize, showFileLastModified, showFileThumbnail };\n\n const errorId = useUniqueId('error-');\n const warningId = useUniqueId('warning-');\n const constraintTextId = useUniqueId('constraint-text-');\n\n const fileInputRef = useRef<ButtonProps.Ref>(null);\n const ref = useMergeRefs(fileInputRef, externalRef);\n\n checkControlled('FileUpload', 'value', value, 'onChange', onChange);\n\n if (!multiple && value.length > 1) {\n warnOnce('FileUpload', 'Value must be an array of size 0 or 1 when `multiple=false`.');\n }\n\n const handleFilesChange = (newFiles: File[]) => {\n const newValue = multiple ? [...value, ...newFiles] : newFiles[0] ? newFiles : [...value];\n fireNonCancelableEvent(onChange, { value: newValue });\n };\n\n const onFileRemove = (removeFileIndex: number) => {\n const newValue = value.filter((_, fileIndex) => fileIndex !== removeFileIndex);\n fireNonCancelableEvent(onChange, { value: newValue });\n setNextFocusIndex(removeFileIndex);\n };\n\n const isDropzoneVisible = useDropzoneVisible(multiple);\n\n const showWarning = warningText && !errorText;\n\n if (warningText && errorText) {\n warnOnce('FileUpload', 'Both `errorText` and `warningText` exist. `warningText` will not be shown.');\n }\n\n const formFieldContext = useFormFieldContext(restProps);\n const ariaDescribedBy = joinStrings(\n restProps.ariaDescribedby ?? formFieldContext.ariaDescribedby,\n errorText ? errorId : undefined,\n showWarning ? warningId : undefined,\n constraintText ? constraintTextId : undefined\n );\n\n const hasError = Boolean(errorText || fileErrors?.filter(Boolean).length);\n const invalid = restProps.invalid || formFieldContext.invalid || hasError;\n\n return (\n <InternalSpaceBetween\n {...baseProps}\n size=\"xs\"\n className={clsx(baseProps.className, styles.root)}\n __internalRootRef={__internalRootRef}\n ref={tokenListRef}\n >\n <InternalBox>\n {isDropzoneVisible ? (\n <Dropzone onChange={handleFilesChange}>{i18nStrings.dropzoneText(multiple)}</Dropzone>\n ) : (\n <FileInput\n ref={ref}\n accept={accept}\n ariaRequired={ariaRequired}\n multiple={multiple}\n onChange={handleFilesChange}\n value={value}\n {...restProps}\n ariaDescribedby={ariaDescribedBy}\n invalid={invalid}\n >\n {i18nStrings.uploadButtonText(multiple)}\n </FileInput>\n )}\n\n {(constraintText || errorText || warningText) && (\n <div className={styles.hints}>\n {errorText && (\n <FormFieldError id={errorId} errorIconAriaLabel={i18nStrings?.errorIconAriaLabel}>\n {errorText}\n </FormFieldError>\n )}\n {showWarning && (\n <FormFieldWarning id={warningId} warningIconAriaLabel={i18nStrings?.warningIconAriaLabel}>\n {warningText}\n </FormFieldWarning>\n )}\n {constraintText && (\n <ConstraintText id={constraintTextId} hasValidationText={!!errorText || !!warningText}>\n {constraintText}\n </ConstraintText>\n )}\n </div>\n )}\n </InternalBox>\n\n {!multiple && value.length > 0 ? (\n <InternalBox>\n <Token\n ariaLabel={value[0].name}\n dismissLabel={i18nStrings.removeFileAriaLabel(0)}\n onDismiss={() => onFileRemove(0)}\n errorText={fileErrors?.[0]}\n warningText={fileWarnings?.[0]}\n errorIconAriaLabel={i18nStrings.errorIconAriaLabel}\n warningIconAriaLabel={i18nStrings.warningIconAriaLabel}\n data-index={0}\n >\n <FileOption file={value[0]} metadata={metadata} i18nStrings={i18nStrings} />\n </Token>\n </InternalBox>\n ) : null}\n\n {multiple && value.length > 0 ? (\n <InternalBox>\n <TokenList\n alignment=\"vertical\"\n items={value}\n renderItem={(file, fileIndex) => (\n <Token\n ariaLabel={file.name}\n dismissLabel={i18nStrings.removeFileAriaLabel(fileIndex)}\n onDismiss={() => onFileRemove(fileIndex)}\n errorText={fileErrors?.[fileIndex]}\n warningText={fileWarnings?.[fileIndex]}\n errorIconAriaLabel={i18nStrings.errorIconAriaLabel}\n warningIconAriaLabel={i18nStrings.warningIconAriaLabel}\n data-index={fileIndex}\n >\n <FileOption file={file} metadata={metadata} i18nStrings={i18nStrings} />\n </Token>\n )}\n limit={tokenLimit}\n i18nStrings={{\n limitShowFewer: i18nStrings.limitShowFewer,\n limitShowMore: i18nStrings.limitShowMore,\n }}\n />\n </InternalBox>\n ) : null}\n </InternalSpaceBetween>\n );\n}\n"]}
|
|
@@ -9,7 +9,7 @@ export interface ButtonTriggerProps extends BaseComponentProps {
|
|
|
9
9
|
readOnly?: boolean;
|
|
10
10
|
invalid?: boolean;
|
|
11
11
|
warning?: boolean;
|
|
12
|
-
inFilteringToken?:
|
|
12
|
+
inFilteringToken?: 'root' | 'nested';
|
|
13
13
|
inlineTokens?: boolean;
|
|
14
14
|
ariaHasPopup?: 'true' | 'listbox' | 'dialog';
|
|
15
15
|
ariaControls?: string;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/internal/components/button-trigger/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAA+B,MAAM,OAAO,CAAC;AAMpD,OAAO,EAAE,kBAAkB,EAAgB,MAAM,sBAAsB,CAAC;AACxE,OAAO,EAAE,aAAa,EAAE,sBAAsB,EAA0C,MAAM,cAAc,CAAC;AAM7G,MAAM,WAAW,kBAAmB,SAAQ,kBAAkB;IAC5D,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,gBAAgB,CAAC,EAAE,
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/internal/components/button-trigger/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAA+B,MAAM,OAAO,CAAC;AAMpD,OAAO,EAAE,kBAAkB,EAAgB,MAAM,sBAAsB,CAAC;AACxE,OAAO,EAAE,aAAa,EAAE,sBAAsB,EAA0C,MAAM,cAAc,CAAC;AAM7G,MAAM,WAAW,kBAAmB,SAAQ,kBAAkB;IAC5D,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,gBAAgB,CAAC,EAAE,MAAM,GAAG,QAAQ,CAAC;IACrC,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,YAAY,CAAC,EAAE,MAAM,GAAG,SAAS,GAAG,QAAQ,CAAC;IAC7C,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,SAAS,CAAC,EAAE,sBAAsB,CAAC,aAAa,CAAC,CAAC;IAClD,OAAO,CAAC,EAAE,sBAAsB,CAAC,aAAa,CAAC,CAAC;IAChD,WAAW,CAAC,EAAE,sBAAsB,CAAC;IACrC,OAAO,CAAC,EAAE,sBAAsB,CAAC;IACjC,OAAO,CAAC,EAAE,sBAAsB,CAAC;IACjC,MAAM,CAAC,EAAE,sBAAsB,CAAC;QAAE,aAAa,EAAE,IAAI,GAAG,IAAI,CAAA;KAAE,CAAC,CAAC;IAChE,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAiGD,yBAAiB,kBAAkB,CAAC;IAClC,UAAiB,GAAG;QAClB,KAAK,IAAI,IAAI,CAAC;KACf;CACF;;AAED,wBAA+C"}
|
|
@@ -12,7 +12,7 @@ import styles from './styles.css.js';
|
|
|
12
12
|
const ButtonTrigger = (_a, ref) => {
|
|
13
13
|
var { children, pressed = false, hideCaret = false, disabled = false, readOnly = false, invalid = false, warning = false, inlineTokens, inFilteringToken, ariaHasPopup, ariaLabel, ariaLabelledby, ariaDescribedby, ariaControls, onKeyDown, onKeyUp, onMouseDown, onClick, onFocus, onBlur, autoFocus } = _a, restProps = __rest(_a, ["children", "pressed", "hideCaret", "disabled", "readOnly", "invalid", "warning", "inlineTokens", "inFilteringToken", "ariaHasPopup", "ariaLabel", "ariaLabelledby", "ariaDescribedby", "ariaControls", "onKeyDown", "onKeyUp", "onMouseDown", "onClick", "onFocus", "onBlur", "autoFocus"]);
|
|
14
14
|
const baseProps = getBaseProps(restProps);
|
|
15
|
-
let attributes = Object.assign(Object.assign({}, baseProps), { type: 'button', className: clsx(styles['button-trigger'], analyticsSelectors['button-trigger'], baseProps.className, pressed && styles.pressed, disabled && styles.disabled, invalid && styles.invalid, warning && !invalid && styles.warning, !hideCaret && styles['has-caret'], readOnly && styles.readonly, inFilteringToken && styles[
|
|
15
|
+
let attributes = Object.assign(Object.assign({}, baseProps), { type: 'button', className: clsx(styles['button-trigger'], analyticsSelectors['button-trigger'], baseProps.className, pressed && styles.pressed, disabled && styles.disabled, invalid && styles.invalid, warning && !invalid && styles.warning, !hideCaret && styles['has-caret'], readOnly && styles.readonly, inFilteringToken && styles[`in-filtering-token-${inFilteringToken}`], inlineTokens && styles['inline-tokens']), disabled: disabled, 'aria-expanded': pressed, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledby, 'aria-describedby': ariaDescribedby, 'aria-haspopup': ariaHasPopup !== null && ariaHasPopup !== void 0 ? ariaHasPopup : 'listbox', 'aria-controls': ariaControls, 'aria-disabled': readOnly && !disabled ? 'true' : undefined, autoFocus });
|
|
16
16
|
if (!readOnly) {
|
|
17
17
|
attributes = Object.assign(Object.assign({}, attributes), { onKeyDown: onKeyDown && (event => fireKeyboardEvent(onKeyDown, event)), onKeyUp: onKeyUp && (event => fireKeyboardEvent(onKeyUp, event)), onMouseDown: onMouseDown && (event => fireCancelableEvent(onMouseDown, {}, event)), onClick: onClick && (event => fireCancelableEvent(onClick, {}, event)), onFocus: onFocus && (event => fireCancelableEvent(onFocus, {}, event)), onBlur: onBlur && (event => fireCancelableEvent(onBlur, { relatedTarget: event.relatedTarget }, event)) });
|
|
18
18
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/internal/components/button-trigger/index.tsx"],"names":[],"mappings":";AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAA+B,MAAM,OAAO,CAAC;AACpD,OAAO,IAAI,MAAM,MAAM,CAAC;AAExB,OAAO,EAAE,6BAA6B,EAAE,MAAM,kEAAkE,CAAC;AAEjH,OAAO,YAAY,MAAM,wBAAwB,CAAC;AAClD,OAAO,EAAsB,YAAY,EAAE,MAAM,sBAAsB,CAAC;AACxE,OAAO,EAAyC,mBAAmB,EAAE,iBAAiB,EAAE,MAAM,cAAc,CAAC;AAG7G,OAAO,kBAAkB,MAAM,oCAAoC,CAAC;AACpE,OAAO,MAAM,MAAM,iBAAiB,CAAC;AA0BrC,MAAM,aAAa,GAAG,CACpB,EAuBqB,EACrB,GAAiC,EACjC,EAAE;QAzBF,EACE,QAAQ,EACR,OAAO,GAAG,KAAK,EACf,SAAS,GAAG,KAAK,EACjB,QAAQ,GAAG,KAAK,EAChB,QAAQ,GAAG,KAAK,EAChB,OAAO,GAAG,KAAK,EACf,OAAO,GAAG,KAAK,EACf,YAAY,EACZ,gBAAgB,EAChB,YAAY,EACZ,SAAS,EACT,cAAc,EACd,eAAe,EACf,YAAY,EACZ,SAAS,EACT,OAAO,EACP,WAAW,EACX,OAAO,EACP,OAAO,EACP,MAAM,EACN,SAAS,OAEU,EADhB,SAAS,cAtBd,4RAuBC,CADa;IAId,MAAM,SAAS,GAAG,YAAY,CAAC,SAAS,CAAC,CAAC;IAC1C,IAAI,UAAU,mCACT,SAAS,KACZ,IAAI,EAAE,QAAQ,EACd,SAAS,EAAE,IAAI,CACb,MAAM,CAAC,gBAAgB,CAAC,EACxB,kBAAkB,CAAC,gBAAgB,CAAC,EACpC,SAAS,CAAC,SAAS,EACnB,OAAO,IAAI,MAAM,CAAC,OAAO,EACzB,QAAQ,IAAI,MAAM,CAAC,QAAQ,EAC3B,OAAO,IAAI,MAAM,CAAC,OAAO,EACzB,OAAO,IAAI,CAAC,OAAO,IAAI,MAAM,CAAC,OAAO,EACrC,CAAC,SAAS,IAAI,MAAM,CAAC,WAAW,CAAC,EACjC,QAAQ,IAAI,MAAM,CAAC,QAAQ,EAC3B,gBAAgB,IAAI,MAAM,CAAC,
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/internal/components/button-trigger/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 React, { ButtonHTMLAttributes } from 'react';\nimport clsx from 'clsx';\n\nimport { getAnalyticsMetadataAttribute } from '@cloudscape-design/component-toolkit/internal/analytics-metadata';\n\nimport InternalIcon from '../../../icon/internal';\nimport { BaseComponentProps, getBaseProps } from '../../base-component';\nimport { BaseKeyDetail, CancelableEventHandler, fireCancelableEvent, fireKeyboardEvent } from '../../events';\nimport { GeneratedAnalyticsMetadataButtonTriggerExpand } from './analytics-metadata/interfaces';\n\nimport analyticsSelectors from './analytics-metadata/styles.css.js';\nimport styles from './styles.css.js';\n\nexport interface ButtonTriggerProps extends BaseComponentProps {\n children?: React.ReactNode;\n pressed?: boolean;\n hideCaret?: boolean;\n disabled?: boolean;\n readOnly?: boolean;\n invalid?: boolean;\n warning?: boolean;\n inFilteringToken?: 'root' | 'nested';\n inlineTokens?: boolean;\n ariaHasPopup?: 'true' | 'listbox' | 'dialog';\n ariaControls?: string;\n ariaLabel?: string;\n ariaLabelledby?: string;\n ariaDescribedby?: string;\n onKeyDown?: CancelableEventHandler<BaseKeyDetail>;\n onKeyUp?: CancelableEventHandler<BaseKeyDetail>;\n onMouseDown?: CancelableEventHandler;\n onClick?: CancelableEventHandler;\n onFocus?: CancelableEventHandler;\n onBlur?: CancelableEventHandler<{ relatedTarget: Node | null }>;\n autoFocus?: boolean;\n}\n\nconst ButtonTrigger = (\n {\n children,\n pressed = false,\n hideCaret = false,\n disabled = false,\n readOnly = false,\n invalid = false,\n warning = false,\n inlineTokens,\n inFilteringToken,\n ariaHasPopup,\n ariaLabel,\n ariaLabelledby,\n ariaDescribedby,\n ariaControls,\n onKeyDown,\n onKeyUp,\n onMouseDown,\n onClick,\n onFocus,\n onBlur,\n autoFocus,\n ...restProps\n }: ButtonTriggerProps,\n ref: React.Ref<HTMLButtonElement>\n) => {\n const baseProps = getBaseProps(restProps);\n let attributes: ButtonHTMLAttributes<HTMLButtonElement> = {\n ...baseProps,\n type: 'button',\n className: clsx(\n styles['button-trigger'],\n analyticsSelectors['button-trigger'],\n baseProps.className,\n pressed && styles.pressed,\n disabled && styles.disabled,\n invalid && styles.invalid,\n warning && !invalid && styles.warning,\n !hideCaret && styles['has-caret'],\n readOnly && styles.readonly,\n inFilteringToken && styles[`in-filtering-token-${inFilteringToken}`],\n inlineTokens && styles['inline-tokens']\n ),\n disabled: disabled,\n 'aria-expanded': pressed,\n 'aria-label': ariaLabel,\n 'aria-labelledby': ariaLabelledby,\n 'aria-describedby': ariaDescribedby,\n 'aria-haspopup': ariaHasPopup ?? 'listbox',\n 'aria-controls': ariaControls,\n 'aria-disabled': readOnly && !disabled ? 'true' : undefined,\n autoFocus,\n };\n\n if (!readOnly) {\n attributes = {\n ...attributes,\n onKeyDown: onKeyDown && (event => fireKeyboardEvent(onKeyDown, event)),\n onKeyUp: onKeyUp && (event => fireKeyboardEvent(onKeyUp, event)),\n onMouseDown: onMouseDown && (event => fireCancelableEvent(onMouseDown, {}, event)),\n onClick: onClick && (event => fireCancelableEvent(onClick, {}, event)),\n onFocus: onFocus && (event => fireCancelableEvent(onFocus, {}, event)),\n onBlur: onBlur && (event => fireCancelableEvent(onBlur, { relatedTarget: event.relatedTarget }, event)),\n };\n }\n\n if (invalid) {\n attributes['aria-invalid'] = invalid;\n }\n\n const analyticsMetadata: GeneratedAnalyticsMetadataButtonTriggerExpand = {\n action: 'expand',\n detail: {\n label: { root: 'self' },\n expanded: `${!pressed}`,\n },\n };\n\n return (\n <button\n ref={ref}\n {...attributes}\n {...(disabled || readOnly ? {} : getAnalyticsMetadataAttribute(analyticsMetadata))}\n >\n {children}\n {!hideCaret && (\n <span className={styles.arrow}>\n <InternalIcon name=\"caret-down-filled\" variant={disabled || readOnly ? 'disabled' : 'normal'} />\n </span>\n )}\n </button>\n );\n};\n\nexport namespace ButtonTriggerProps {\n export interface Ref {\n focus(): void;\n }\n}\n\nexport default React.forwardRef(ButtonTrigger);\n"]}
|
|
@@ -1,16 +1,18 @@
|
|
|
1
1
|
|
|
2
2
|
import './styles.scoped.css';
|
|
3
3
|
export default {
|
|
4
|
-
"button-trigger": "awsui_button-
|
|
5
|
-
"arrow": "
|
|
6
|
-
"in-filtering-token": "awsui_in-filtering-
|
|
7
|
-
"
|
|
8
|
-
"
|
|
9
|
-
"
|
|
10
|
-
"
|
|
11
|
-
"
|
|
12
|
-
"
|
|
13
|
-
"
|
|
14
|
-
"
|
|
4
|
+
"button-trigger": "awsui_button-trigger_18eso_x19ol_157",
|
|
5
|
+
"arrow": "awsui_arrow_18eso_x19ol_157",
|
|
6
|
+
"in-filtering-token-root": "awsui_in-filtering-token-root_18eso_x19ol_220",
|
|
7
|
+
"in-filtering-token-nested": "awsui_in-filtering-token-nested_18eso_x19ol_220",
|
|
8
|
+
"has-caret": "awsui_has-caret_18eso_x19ol_254",
|
|
9
|
+
"placeholder": "awsui_placeholder_18eso_x19ol_257",
|
|
10
|
+
"pressed": "awsui_pressed_18eso_x19ol_270",
|
|
11
|
+
"disabled": "awsui_disabled_18eso_x19ol_273",
|
|
12
|
+
"in-filtering-token": "awsui_in-filtering-token_18eso_x19ol_220",
|
|
13
|
+
"readonly": "awsui_readonly_18eso_x19ol_289",
|
|
14
|
+
"invalid": "awsui_invalid_18eso_x19ol_311",
|
|
15
|
+
"warning": "awsui_warning_18eso_x19ol_320",
|
|
16
|
+
"inline-tokens": "awsui_inline-tokens_18eso_x19ol_329"
|
|
15
17
|
};
|
|
16
18
|
|
|
@@ -154,21 +154,21 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
|
|
|
154
154
|
Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
|
|
155
155
|
SPDX-License-Identifier: Apache-2.0
|
|
156
156
|
*/
|
|
157
|
-
.awsui_button-
|
|
157
|
+
.awsui_button-trigger_18eso_x19ol_157 > .awsui_arrow_18eso_x19ol_157:not(#\9) {
|
|
158
158
|
transition: transform var(--motion-duration-rotate-180-dpvl4m, 135ms) var(--motion-easing-rotate-180-e270ko, cubic-bezier(0.165, 0.84, 0.44, 1));
|
|
159
159
|
}
|
|
160
160
|
@media (prefers-reduced-motion: reduce) {
|
|
161
|
-
.awsui_button-
|
|
161
|
+
.awsui_button-trigger_18eso_x19ol_157 > .awsui_arrow_18eso_x19ol_157:not(#\9) {
|
|
162
162
|
animation: none;
|
|
163
163
|
transition: none;
|
|
164
164
|
}
|
|
165
165
|
}
|
|
166
|
-
.awsui-motion-disabled .awsui_button-
|
|
166
|
+
.awsui-motion-disabled .awsui_button-trigger_18eso_x19ol_157 > .awsui_arrow_18eso_x19ol_157:not(#\9), .awsui-mode-entering .awsui_button-trigger_18eso_x19ol_157 > .awsui_arrow_18eso_x19ol_157:not(#\9) {
|
|
167
167
|
animation: none;
|
|
168
168
|
transition: none;
|
|
169
169
|
}
|
|
170
170
|
|
|
171
|
-
.awsui_button-
|
|
171
|
+
.awsui_button-trigger_18eso_x19ol_157:not(#\9) {
|
|
172
172
|
border-collapse: separate;
|
|
173
173
|
border-spacing: 0;
|
|
174
174
|
box-sizing: border-box;
|
|
@@ -218,7 +218,7 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
|
|
|
218
218
|
border-inline: var(--border-field-width-09w7vk, 2px) solid var(--color-border-input-default-1zl7hq, #7d8998);
|
|
219
219
|
min-block-size: var(--size-vertical-input-v5iwwf, 32px);
|
|
220
220
|
}
|
|
221
|
-
.awsui_button-
|
|
221
|
+
.awsui_button-trigger_18eso_x19ol_157.awsui_in-filtering-token-root_18eso_x19ol_220:not(#\9), .awsui_button-trigger_18eso_x19ol_157.awsui_in-filtering-token-nested_18eso_x19ol_220:not(#\9) {
|
|
222
222
|
padding-block: 0px;
|
|
223
223
|
padding-inline: var(--space-field-horizontal-gg19kw, 12px);
|
|
224
224
|
border-color: var(--color-border-item-selected-k00wlz, #0972d3);
|
|
@@ -227,14 +227,14 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
|
|
|
227
227
|
block-size: 100%;
|
|
228
228
|
min-block-size: unset;
|
|
229
229
|
}
|
|
230
|
-
body[data-awsui-focus-visible=true] .awsui_button-
|
|
230
|
+
body[data-awsui-focus-visible=true] .awsui_button-trigger_18eso_x19ol_157.awsui_in-filtering-token-root_18eso_x19ol_220:not(#\9):focus, body[data-awsui-focus-visible=true] .awsui_button-trigger_18eso_x19ol_157.awsui_in-filtering-token-nested_18eso_x19ol_220:not(#\9):focus {
|
|
231
231
|
position: relative;
|
|
232
232
|
}
|
|
233
|
-
body[data-awsui-focus-visible=true] .awsui_button-
|
|
233
|
+
body[data-awsui-focus-visible=true] .awsui_button-trigger_18eso_x19ol_157.awsui_in-filtering-token-root_18eso_x19ol_220:not(#\9):focus, body[data-awsui-focus-visible=true] .awsui_button-trigger_18eso_x19ol_157.awsui_in-filtering-token-nested_18eso_x19ol_220:not(#\9):focus {
|
|
234
234
|
outline: 2px dotted transparent;
|
|
235
235
|
outline-offset: calc(var(--space-filtering-token-operation-select-focus-outline-gutter-0ailok, -5px) - 1px);
|
|
236
236
|
}
|
|
237
|
-
body[data-awsui-focus-visible=true] .awsui_button-
|
|
237
|
+
body[data-awsui-focus-visible=true] .awsui_button-trigger_18eso_x19ol_157.awsui_in-filtering-token-root_18eso_x19ol_220:not(#\9):focus::before, body[data-awsui-focus-visible=true] .awsui_button-trigger_18eso_x19ol_157.awsui_in-filtering-token-nested_18eso_x19ol_220:not(#\9):focus::before {
|
|
238
238
|
content: " ";
|
|
239
239
|
display: block;
|
|
240
240
|
position: absolute;
|
|
@@ -248,51 +248,55 @@ body[data-awsui-focus-visible=true] .awsui_button-trigger_18eso_7wfnm_157.awsui_
|
|
|
248
248
|
border-end-end-radius: var(--border-radius-control-default-focus-ring-u8zbsz, 4px);
|
|
249
249
|
box-shadow: 0 0 0 2px var(--color-border-item-focused-b2ntyl, #0972d3);
|
|
250
250
|
}
|
|
251
|
-
.awsui_button-
|
|
251
|
+
.awsui_button-trigger_18eso_x19ol_157.awsui_in-filtering-token-nested_18eso_x19ol_220:not(#\9) {
|
|
252
|
+
border-start-start-radius: calc(var(--border-radius-input-plgbrq, 8px) / 2);
|
|
253
|
+
border-end-start-radius: calc(var(--border-radius-input-plgbrq, 8px) / 2);
|
|
254
|
+
}
|
|
255
|
+
.awsui_button-trigger_18eso_x19ol_157.awsui_has-caret_18eso_x19ol_254:not(#\9) {
|
|
252
256
|
padding-inline-end: var(--space-field-icon-offset-csk9vw, 36px);
|
|
253
257
|
}
|
|
254
|
-
.awsui_button-
|
|
258
|
+
.awsui_button-trigger_18eso_x19ol_157 > .awsui_placeholder_18eso_x19ol_257:not(#\9) {
|
|
255
259
|
color: var(--color-text-input-placeholder-mx1ygd, #5f6b7a);
|
|
256
260
|
font-style: italic;
|
|
257
261
|
}
|
|
258
|
-
.awsui_button-
|
|
262
|
+
.awsui_button-trigger_18eso_x19ol_157 > .awsui_arrow_18eso_x19ol_157:not(#\9) {
|
|
259
263
|
position: absolute;
|
|
260
264
|
inset-inline-end: var(--space-field-horizontal-gg19kw, 12px);
|
|
261
265
|
inset-block-start: calc(50% - var(--line-height-body-m-30ar75, 20px) / 2);
|
|
262
266
|
color: var(--color-text-button-inline-icon-default-s3yux9, #0972d3);
|
|
263
267
|
}
|
|
264
|
-
.awsui_button-
|
|
268
|
+
.awsui_button-trigger_18eso_x19ol_157:not(#\9):hover > .awsui_arrow_18eso_x19ol_157 {
|
|
265
269
|
color: var(--color-text-button-inline-icon-hover-my2daf, #033160);
|
|
266
270
|
}
|
|
267
|
-
.awsui_button-
|
|
271
|
+
.awsui_button-trigger_18eso_x19ol_157.awsui_pressed_18eso_x19ol_270 > .awsui_arrow_18eso_x19ol_157:not(#\9) {
|
|
268
272
|
transform: rotate(-180deg);
|
|
269
273
|
}
|
|
270
|
-
.awsui_button-
|
|
274
|
+
.awsui_button-trigger_18eso_x19ol_157.awsui_disabled_18eso_x19ol_273:not(#\9) {
|
|
271
275
|
background-color: var(--color-background-input-disabled-ab59a3, #e9ebed);
|
|
272
276
|
border-block: var(--border-field-width-09w7vk, 2px) solid var(--color-border-input-disabled-rx2aau, #e9ebed);
|
|
273
277
|
border-inline: var(--border-field-width-09w7vk, 2px) solid var(--color-border-input-disabled-rx2aau, #e9ebed);
|
|
274
278
|
color: var(--color-text-input-disabled-f8pjm5, #9ba7b6);
|
|
275
279
|
cursor: auto;
|
|
276
280
|
}
|
|
277
|
-
.awsui_button-
|
|
281
|
+
.awsui_button-trigger_18eso_x19ol_157.awsui_disabled_18eso_x19ol_273 > .awsui_arrow_18eso_x19ol_157:not(#\9) {
|
|
278
282
|
color: var(--color-text-button-inline-icon-disabled-mz5gmn, #9ba7b6);
|
|
279
283
|
}
|
|
280
|
-
.awsui_button-
|
|
284
|
+
.awsui_button-trigger_18eso_x19ol_157.awsui_disabled_18eso_x19ol_273.awsui_in-filtering-token_18eso_x19ol_220:not(#\9) {
|
|
281
285
|
border-color: var(--color-border-control-disabled-bv2kkn, #d1d5db);
|
|
282
286
|
}
|
|
283
|
-
.awsui_button-
|
|
287
|
+
.awsui_button-trigger_18eso_x19ol_157.awsui_disabled_18eso_x19ol_273 > .awsui_placeholder_18eso_x19ol_257:not(#\9) {
|
|
284
288
|
color: var(--color-text-input-placeholder-disabled-abhb0d, #9ba7b6);
|
|
285
289
|
}
|
|
286
|
-
.awsui_button-
|
|
290
|
+
.awsui_button-trigger_18eso_x19ol_157.awsui_readonly_18eso_x19ol_289:not(#\9):not(.awsui_button-trigger_18eso_x19ol_157.awsui_disabled_18eso_x19ol_273) {
|
|
287
291
|
background-color: var(--color-background-input-default-igdh5e, #ffffff);
|
|
288
292
|
border-block: var(--border-field-width-09w7vk, 2px) solid var(--color-border-input-disabled-rx2aau, #e9ebed);
|
|
289
293
|
border-inline: var(--border-field-width-09w7vk, 2px) solid var(--color-border-input-disabled-rx2aau, #e9ebed);
|
|
290
294
|
}
|
|
291
|
-
.awsui_button-
|
|
295
|
+
.awsui_button-trigger_18eso_x19ol_157:not(#\9):focus {
|
|
292
296
|
outline: none;
|
|
293
297
|
text-decoration: none;
|
|
294
298
|
}
|
|
295
|
-
body[data-awsui-focus-visible=true] .awsui_button-
|
|
299
|
+
body[data-awsui-focus-visible=true] .awsui_button-trigger_18eso_x19ol_157:not(#\9):not(.awsui_in-filtering-token_18eso_x19ol_220):focus {
|
|
296
300
|
outline: 2px dotted transparent;
|
|
297
301
|
border-block: var(--border-field-width-09w7vk, 2px) solid var(--color-border-input-focused-3d15sl, #033160);
|
|
298
302
|
border-inline: var(--border-field-width-09w7vk, 2px) solid var(--color-border-input-focused-3d15sl, #033160);
|
|
@@ -302,27 +306,27 @@ body[data-awsui-focus-visible=true] .awsui_button-trigger_18eso_7wfnm_157:not(#\
|
|
|
302
306
|
border-end-end-radius: var(--border-radius-input-plgbrq, 8px);
|
|
303
307
|
box-shadow: 0 0 0 var(--border-control-focus-ring-shadow-spread-0ctpjf, 0px) var(--color-border-item-focused-b2ntyl, #0972d3);
|
|
304
308
|
}
|
|
305
|
-
.awsui_button-
|
|
309
|
+
.awsui_button-trigger_18eso_x19ol_157:not(#\9):not(.awsui_in-filtering-token_18eso_x19ol_220):invalid {
|
|
306
310
|
box-shadow: none;
|
|
307
311
|
}
|
|
308
|
-
.awsui_button-
|
|
312
|
+
.awsui_button-trigger_18eso_x19ol_157:not(#\9):not(.awsui_in-filtering-token_18eso_x19ol_220).awsui_invalid_18eso_x19ol_311, .awsui_button-trigger_18eso_x19ol_157:not(#\9):not(.awsui_in-filtering-token_18eso_x19ol_220).awsui_invalid_18eso_x19ol_311:focus {
|
|
309
313
|
color: var(--color-text-status-error-wdvepn, #d91515);
|
|
310
314
|
border-color: var(--color-text-status-error-wdvepn, #d91515);
|
|
311
315
|
padding-inline-start: calc(var(--space-field-horizontal-gg19kw, 12px) - (var(--border-invalid-width-5ktjp2, 8px) - var(--border-field-width-09w7vk, 2px)));
|
|
312
316
|
border-inline-start-width: var(--border-invalid-width-5ktjp2, 8px);
|
|
313
317
|
}
|
|
314
|
-
.awsui_button-
|
|
318
|
+
.awsui_button-trigger_18eso_x19ol_157:not(#\9):not(.awsui_in-filtering-token_18eso_x19ol_220).awsui_invalid_18eso_x19ol_311:focus, .awsui_button-trigger_18eso_x19ol_157:not(#\9):not(.awsui_in-filtering-token_18eso_x19ol_220).awsui_invalid_18eso_x19ol_311:focus:focus {
|
|
315
319
|
box-shadow: 0 0 0 var(--border-control-invalid-focus-ring-shadow-spread-fhmbjn, 2px) var(--color-border-item-focused-b2ntyl, #0972d3);
|
|
316
320
|
}
|
|
317
|
-
.awsui_button-
|
|
321
|
+
.awsui_button-trigger_18eso_x19ol_157:not(#\9):not(.awsui_in-filtering-token_18eso_x19ol_220).awsui_warning_18eso_x19ol_320, .awsui_button-trigger_18eso_x19ol_157:not(#\9):not(.awsui_in-filtering-token_18eso_x19ol_220).awsui_warning_18eso_x19ol_320:focus {
|
|
318
322
|
color: var(--color-text-status-warning-yik8vi, #8d6605);
|
|
319
323
|
border-color: var(--color-text-status-warning-yik8vi, #8d6605);
|
|
320
324
|
padding-inline-start: calc(var(--space-field-horizontal-gg19kw, 12px) - (var(--border-invalid-width-5ktjp2, 8px) - var(--border-field-width-09w7vk, 2px)));
|
|
321
325
|
border-inline-start-width: var(--border-invalid-width-5ktjp2, 8px);
|
|
322
326
|
}
|
|
323
|
-
.awsui_button-
|
|
327
|
+
.awsui_button-trigger_18eso_x19ol_157:not(#\9):not(.awsui_in-filtering-token_18eso_x19ol_220).awsui_warning_18eso_x19ol_320:focus, .awsui_button-trigger_18eso_x19ol_157:not(#\9):not(.awsui_in-filtering-token_18eso_x19ol_220).awsui_warning_18eso_x19ol_320:focus:focus {
|
|
324
328
|
box-shadow: 0 0 0 var(--border-control-invalid-focus-ring-shadow-spread-fhmbjn, 2px) var(--color-border-item-focused-b2ntyl, #0972d3);
|
|
325
329
|
}
|
|
326
|
-
.awsui_button-
|
|
330
|
+
.awsui_button-trigger_18eso_x19ol_157.awsui_inline-tokens_18eso_x19ol_329:not(#\9) {
|
|
327
331
|
padding-block: 0;
|
|
328
332
|
}
|
|
@@ -2,16 +2,18 @@
|
|
|
2
2
|
// es-module interop with Babel and Typescript
|
|
3
3
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
4
4
|
module.exports.default = {
|
|
5
|
-
"button-trigger": "awsui_button-
|
|
6
|
-
"arrow": "
|
|
7
|
-
"in-filtering-token": "awsui_in-filtering-
|
|
8
|
-
"
|
|
9
|
-
"
|
|
10
|
-
"
|
|
11
|
-
"
|
|
12
|
-
"
|
|
13
|
-
"
|
|
14
|
-
"
|
|
15
|
-
"
|
|
5
|
+
"button-trigger": "awsui_button-trigger_18eso_x19ol_157",
|
|
6
|
+
"arrow": "awsui_arrow_18eso_x19ol_157",
|
|
7
|
+
"in-filtering-token-root": "awsui_in-filtering-token-root_18eso_x19ol_220",
|
|
8
|
+
"in-filtering-token-nested": "awsui_in-filtering-token-nested_18eso_x19ol_220",
|
|
9
|
+
"has-caret": "awsui_has-caret_18eso_x19ol_254",
|
|
10
|
+
"placeholder": "awsui_placeholder_18eso_x19ol_257",
|
|
11
|
+
"pressed": "awsui_pressed_18eso_x19ol_270",
|
|
12
|
+
"disabled": "awsui_disabled_18eso_x19ol_273",
|
|
13
|
+
"in-filtering-token": "awsui_in-filtering-token_18eso_x19ol_220",
|
|
14
|
+
"readonly": "awsui_readonly_18eso_x19ol_289",
|
|
15
|
+
"invalid": "awsui_invalid_18eso_x19ol_311",
|
|
16
|
+
"warning": "awsui_warning_18eso_x19ol_320",
|
|
17
|
+
"inline-tokens": "awsui_inline-tokens_18eso_x19ol_329"
|
|
16
18
|
};
|
|
17
19
|
|
package/internal/environment.js
CHANGED
|
@@ -1,11 +1,11 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
2
|
interface UseListFocusControllerOptions {
|
|
3
3
|
nextFocusIndex: null | number;
|
|
4
|
-
onFocusMoved
|
|
4
|
+
onFocusMoved: (target: HTMLElement, targetType: 'next' | 'prev' | 'show-more' | 'fallback') => void;
|
|
5
5
|
listItemSelector: string;
|
|
6
|
-
|
|
6
|
+
fallbackSelector?: string;
|
|
7
7
|
showMoreSelector?: string;
|
|
8
8
|
}
|
|
9
|
-
export declare function useListFocusController({ nextFocusIndex, onFocusMoved, listItemSelector,
|
|
9
|
+
export declare function useListFocusController({ nextFocusIndex, onFocusMoved, listItemSelector, fallbackSelector, showMoreSelector, }: UseListFocusControllerOptions): import("react").RefObject<HTMLDivElement>;
|
|
10
10
|
export {};
|
|
11
11
|
//# sourceMappingURL=use-list-focus-controller.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"use-list-focus-controller.d.ts","sourceRoot":"","sources":["../../../../src/internal/hooks/use-list-focus-controller.tsx"],"names":[],"mappings":";AAOA,UAAU,6BAA6B;IACrC,cAAc,EAAE,IAAI,GAAG,MAAM,CAAC;IAC9B,YAAY,
|
|
1
|
+
{"version":3,"file":"use-list-focus-controller.d.ts","sourceRoot":"","sources":["../../../../src/internal/hooks/use-list-focus-controller.tsx"],"names":[],"mappings":";AAOA,UAAU,6BAA6B;IACrC,cAAc,EAAE,IAAI,GAAG,MAAM,CAAC;IAC9B,YAAY,EAAE,CAAC,MAAM,EAAE,WAAW,EAAE,UAAU,EAAE,MAAM,GAAG,MAAM,GAAG,WAAW,GAAG,UAAU,KAAK,IAAI,CAAC;IACpG,gBAAgB,EAAE,MAAM,CAAC;IACzB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,gBAAgB,CAAC,EAAE,MAAM,CAAC;CAC3B;AAED,wBAAgB,sBAAsB,CAAC,EACrC,cAAc,EACd,YAAY,EACZ,gBAAgB,EAChB,gBAAgB,EAChB,gBAAgB,GACjB,EAAE,6BAA6B,6CA2C/B"}
|
|
@@ -2,14 +2,14 @@
|
|
|
2
2
|
// SPDX-License-Identifier: Apache-2.0
|
|
3
3
|
import { useEffect, useRef } from 'react';
|
|
4
4
|
import { getFirstFocusable, isFocusable } from '../components/focus-lock/utils.js';
|
|
5
|
-
export function useListFocusController({ nextFocusIndex, onFocusMoved, listItemSelector,
|
|
5
|
+
export function useListFocusController({ nextFocusIndex, onFocusMoved, listItemSelector, fallbackSelector, showMoreSelector, }) {
|
|
6
6
|
const tokenListRef = useRef(null);
|
|
7
7
|
useEffect(() => {
|
|
8
8
|
if (nextFocusIndex === undefined || nextFocusIndex === null || tokenListRef.current === null) {
|
|
9
9
|
return;
|
|
10
10
|
}
|
|
11
11
|
const tokenElements = tokenListRef.current.querySelectorAll(listItemSelector);
|
|
12
|
-
const
|
|
12
|
+
const fallbackElement = fallbackSelector ? selectElement(tokenListRef.current, fallbackSelector) : null;
|
|
13
13
|
const toggleButton = showMoreSelector ? selectElement(tokenListRef.current, showMoreSelector) : null;
|
|
14
14
|
let closestPrevIndex = Number.NEGATIVE_INFINITY;
|
|
15
15
|
let closestNextIndex = Number.POSITIVE_INFINITY;
|
|
@@ -25,21 +25,20 @@ export function useListFocusController({ nextFocusIndex, onFocusMoved, listItemS
|
|
|
25
25
|
}
|
|
26
26
|
const nextElement = tokenElements[closestNextIndex];
|
|
27
27
|
const prevElement = tokenElements[closestPrevIndex];
|
|
28
|
-
const focusTarget = getFirstEligible(nextElement, prevElement, toggleButton,
|
|
28
|
+
const focusTarget = getFirstEligible({ id: 'next', element: nextElement }, { id: 'prev', element: prevElement }, { id: 'show-more', element: toggleButton }, { id: 'fallback', element: fallbackElement });
|
|
29
29
|
if (focusTarget) {
|
|
30
|
-
focusTarget.
|
|
31
|
-
onFocusMoved === null || onFocusMoved === void 0 ? void 0 : onFocusMoved(focusTarget);
|
|
30
|
+
onFocusMoved(focusTarget.element, focusTarget.id);
|
|
32
31
|
}
|
|
33
32
|
// Expecting onFocusMoved to be pure
|
|
34
33
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
35
|
-
}, [nextFocusIndex, listItemSelector,
|
|
34
|
+
}, [nextFocusIndex, listItemSelector, fallbackSelector, showMoreSelector]);
|
|
36
35
|
return tokenListRef;
|
|
37
36
|
}
|
|
38
37
|
function getFirstEligible(...elements) {
|
|
39
|
-
for (const element of elements) {
|
|
38
|
+
for (const { id, element } of elements) {
|
|
40
39
|
const focusable = element ? getFocusableElement(element) : null;
|
|
41
40
|
if (focusable) {
|
|
42
|
-
return focusable;
|
|
41
|
+
return { id, element: focusable };
|
|
43
42
|
}
|
|
44
43
|
}
|
|
45
44
|
return null;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"use-list-focus-controller.js","sourceRoot":"","sources":["../../../../src/internal/hooks/use-list-focus-controller.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AAEtC,OAAO,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AAE1C,OAAO,EAAE,iBAAiB,EAAE,WAAW,EAAE,MAAM,mCAAmC,CAAC;AAUnF,MAAM,UAAU,sBAAsB,CAAC,EACrC,cAAc,EACd,YAAY,EACZ,gBAAgB,EAChB,
|
|
1
|
+
{"version":3,"file":"use-list-focus-controller.js","sourceRoot":"","sources":["../../../../src/internal/hooks/use-list-focus-controller.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\n\nimport { useEffect, useRef } from 'react';\n\nimport { getFirstFocusable, isFocusable } from '../components/focus-lock/utils.js';\n\ninterface UseListFocusControllerOptions {\n nextFocusIndex: null | number;\n onFocusMoved: (target: HTMLElement, targetType: 'next' | 'prev' | 'show-more' | 'fallback') => void;\n listItemSelector: string;\n fallbackSelector?: string;\n showMoreSelector?: string;\n}\n\nexport function useListFocusController({\n nextFocusIndex,\n onFocusMoved,\n listItemSelector,\n fallbackSelector,\n showMoreSelector,\n}: UseListFocusControllerOptions) {\n const tokenListRef = useRef<HTMLDivElement>(null);\n\n useEffect(() => {\n if (nextFocusIndex === undefined || nextFocusIndex === null || tokenListRef.current === null) {\n return;\n }\n\n const tokenElements = tokenListRef.current.querySelectorAll(listItemSelector);\n const fallbackElement = fallbackSelector ? selectElement(tokenListRef.current, fallbackSelector) : null;\n const toggleButton = showMoreSelector ? selectElement(tokenListRef.current, showMoreSelector) : null;\n\n let closestPrevIndex = Number.NEGATIVE_INFINITY;\n let closestNextIndex = Number.POSITIVE_INFINITY;\n\n for (let activeIndex = 0; activeIndex < tokenElements.length; activeIndex++) {\n if (activeIndex < nextFocusIndex) {\n closestPrevIndex =\n nextFocusIndex - activeIndex < nextFocusIndex - closestPrevIndex ? activeIndex : closestPrevIndex;\n } else {\n closestNextIndex =\n activeIndex - nextFocusIndex < closestNextIndex - nextFocusIndex ? activeIndex : closestNextIndex;\n }\n }\n\n const nextElement = tokenElements[closestNextIndex];\n const prevElement = tokenElements[closestPrevIndex];\n const focusTarget = getFirstEligible(\n { id: 'next', element: nextElement } as const,\n { id: 'prev', element: prevElement } as const,\n { id: 'show-more', element: toggleButton } as const,\n { id: 'fallback', element: fallbackElement } as const\n );\n\n if (focusTarget) {\n onFocusMoved(focusTarget.element, focusTarget.id);\n }\n\n // Expecting onFocusMoved to be pure\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [nextFocusIndex, listItemSelector, fallbackSelector, showMoreSelector]);\n\n return tokenListRef;\n}\n\nfunction getFirstEligible<Key>(\n ...elements: Array<{ id: Key; element: null | Element }>\n): null | { id: Key; element: HTMLElement } {\n for (const { id, element } of elements) {\n const focusable = element ? getFocusableElement(element) : null;\n if (focusable) {\n return { id, element: focusable };\n }\n }\n return null;\n}\n\nfunction getFocusableElement(element: Element): null | HTMLElement {\n if (!(element instanceof HTMLElement)) {\n return null;\n }\n if (isFocusable(element)) {\n return element;\n }\n return getFirstFocusable(element);\n}\n\nfunction selectElement(container: HTMLElement, selector: string): null | Element {\n if (container.matches(selector)) {\n return container;\n }\n return container.querySelector(selector);\n}\n"]}
|
package/internal/manifest.json
CHANGED
package/package.json
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/property-filter/filtering-token/index.tsx"],"names":[],"mappings":"AAGA,OAAO,KAA4D,MAAM,OAAO,CAAC;AAYjF,OAAwB,EAAE,oBAAoB,EAAsB,MAAM,wBAAwB,CAAC;AAOnG,yBAAiB,mBAAmB,CAAC;IACnC,KAAY,SAAS,GAAG,KAAK,GAAG,IAAI,CAAC;CACtC;AAED,MAAM,WAAW,mBAAmB;IAClC,MAAM,EAAE,SAAS,EAAE,CAAC;IACpB,SAAS,EAAE,mBAAmB,CAAC,SAAS,CAAC;IACzC,cAAc,EAAE,mBAAmB,CAAC,SAAS,CAAC;IAC9C,aAAa,EAAE,OAAO,CAAC;IACvB,OAAO,EAAE,MAAM,CAAC;IAChB,MAAM,EAAE,MAAM,CAAC;IACf,cAAc,EAAE,MAAM,CAAC;IACvB,kBAAkB,EAAE,MAAM,CAAC;IAC3B,kBAAkB,EAAE,MAAM,CAAC;IAC3B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,iBAAiB,EAAE,CAAC,SAAS,EAAE,mBAAmB,CAAC,SAAS,KAAK,IAAI,CAAC;IACtE,sBAAsB,EAAE,CAAC,SAAS,EAAE,mBAAmB,CAAC,SAAS,KAAK,IAAI,CAAC;IAC3E,cAAc,EAAE,CAAC,UAAU,EAAE,MAAM,KAAK,IAAI,CAAC;IAC7C,aAAa,EAAE,KAAK,CAAC,SAAS,CAAC;IAC/B,YAAY,EAAE,MAAM,CAAC;IACrB,sBAAsB,CAAC,EAAE,MAAM,CAAC;IAChC,sBAAsB,EAAE,OAAO,CAAC;IAChC,YAAY,CAAC,EAAE,MAAM,IAAI,CAAC;IAC1B,SAAS,EAAE,OAAO,CAAC;IACnB,WAAW,EAAE,oBAAoB,CAAC,MAAM,CAAC,CAAC;CAC3C;AAED,MAAM,WAAW,iBAAiB;IAChC,WAAW,IAAI,IAAI,CAAC;CACrB;AAED,UAAU,SAAS;IACjB,OAAO,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,SAAS,EAAE,MAAM,CAAC;IAClB,gBAAgB,EAAE,MAAM,CAAC;CAC1B;AAED,QAAA,MAAM,cAAc,+
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/property-filter/filtering-token/index.tsx"],"names":[],"mappings":"AAGA,OAAO,KAA4D,MAAM,OAAO,CAAC;AAYjF,OAAwB,EAAE,oBAAoB,EAAsB,MAAM,wBAAwB,CAAC;AAOnG,yBAAiB,mBAAmB,CAAC;IACnC,KAAY,SAAS,GAAG,KAAK,GAAG,IAAI,CAAC;CACtC;AAED,MAAM,WAAW,mBAAmB;IAClC,MAAM,EAAE,SAAS,EAAE,CAAC;IACpB,SAAS,EAAE,mBAAmB,CAAC,SAAS,CAAC;IACzC,cAAc,EAAE,mBAAmB,CAAC,SAAS,CAAC;IAC9C,aAAa,EAAE,OAAO,CAAC;IACvB,OAAO,EAAE,MAAM,CAAC;IAChB,MAAM,EAAE,MAAM,CAAC;IACf,cAAc,EAAE,MAAM,CAAC;IACvB,kBAAkB,EAAE,MAAM,CAAC;IAC3B,kBAAkB,EAAE,MAAM,CAAC;IAC3B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,iBAAiB,EAAE,CAAC,SAAS,EAAE,mBAAmB,CAAC,SAAS,KAAK,IAAI,CAAC;IACtE,sBAAsB,EAAE,CAAC,SAAS,EAAE,mBAAmB,CAAC,SAAS,KAAK,IAAI,CAAC;IAC3E,cAAc,EAAE,CAAC,UAAU,EAAE,MAAM,KAAK,IAAI,CAAC;IAC7C,aAAa,EAAE,KAAK,CAAC,SAAS,CAAC;IAC/B,YAAY,EAAE,MAAM,CAAC;IACrB,sBAAsB,CAAC,EAAE,MAAM,CAAC;IAChC,sBAAsB,EAAE,OAAO,CAAC;IAChC,YAAY,CAAC,EAAE,MAAM,IAAI,CAAC;IAC1B,SAAS,EAAE,OAAO,CAAC;IACnB,WAAW,EAAE,oBAAoB,CAAC,MAAM,CAAC,CAAC;CAC3C;AAED,MAAM,WAAW,iBAAiB;IAChC,WAAW,IAAI,IAAI,CAAC;CACrB;AAED,UAAU,SAAS;IACjB,OAAO,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,SAAS,EAAE,MAAM,CAAC;IAClB,gBAAgB,EAAE,MAAM,CAAC;CAC1B;AAED,QAAA,MAAM,cAAc,+FA+InB,CAAC;AAEF,eAAe,cAAc,CAAC"}
|
|
@@ -15,12 +15,14 @@ import styles from './styles.css.js';
|
|
|
15
15
|
const FilteringToken = forwardRef((_a, ref) => {
|
|
16
16
|
var { tokens, showOperation, operation, groupOperation, andText, orText, groupAriaLabel, operationAriaLabel, groupEditAriaLabel, disabled = false, onChangeOperation, onChangeGroupOperation, onDismissToken, editorContent, editorHeader, editorDismissAriaLabel, editorExpandToViewport, onEditorOpen, hasGroups, popoverSize } = _a, rest = __rest(_a, ["tokens", "showOperation", "operation", "groupOperation", "andText", "orText", "groupAriaLabel", "operationAriaLabel", "groupEditAriaLabel", "disabled", "onChangeOperation", "onChangeGroupOperation", "onDismissToken", "editorContent", "editorHeader", "editorDismissAriaLabel", "editorExpandToViewport", "onEditorOpen", "hasGroups", "popoverSize"]);
|
|
17
17
|
const [nextFocusIndex, setNextFocusIndex] = useState(null);
|
|
18
|
-
const onFocusMoved = () => setNextFocusIndex(null);
|
|
19
18
|
const tokenListRef = useListFocusController({
|
|
20
19
|
nextFocusIndex,
|
|
21
|
-
onFocusMoved
|
|
20
|
+
onFocusMoved: target => {
|
|
21
|
+
target.focus();
|
|
22
|
+
setNextFocusIndex(null);
|
|
23
|
+
},
|
|
22
24
|
listItemSelector: `.${styles['inner-root']}`,
|
|
23
|
-
|
|
25
|
+
fallbackSelector: `.${styles.root}`,
|
|
24
26
|
});
|
|
25
27
|
const popoverRef = useRef(null);
|
|
26
28
|
const popoverProps = {
|
|
@@ -62,7 +64,7 @@ const TokenGroup = forwardRef((_a, ref) => {
|
|
|
62
64
|
tokenAction)));
|
|
63
65
|
});
|
|
64
66
|
function OperationSelector({ operation, onChange, ariaLabel, andText, orText, parent, disabled, }) {
|
|
65
|
-
return (React.createElement(InternalSelect, { __inFilteringToken:
|
|
67
|
+
return (React.createElement(InternalSelect, { __inFilteringToken: parent ? 'root' : 'nested', className: clsx(parent
|
|
66
68
|
? clsx(styles.select, testUtilStyles['filtering-token-select'])
|
|
67
69
|
: clsx(styles['inner-select'], testUtilStyles['filtering-token-inner-select'])), options: [
|
|
68
70
|
{ value: 'and', label: andText },
|