@cloudscape-design/components-themeable 3.0.1382 → 3.0.1384
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/container/styles.scss +5 -4
- package/lib/internal/scss/input/styles.scss +4 -0
- package/lib/internal/scss/internal/components/button-trigger/styles.scss +4 -0
- package/lib/internal/scss/internal/components/control-group/styles.scss +53 -0
- package/lib/internal/scss/internal/generated/custom-css-properties/index.scss +176 -175
- package/lib/internal/scss/internal/styles/forms/mixins.scss +58 -17
- package/lib/internal/scss/modal/styles.scss +6 -0
- package/lib/internal/scss/prompt-input/styles.scss +4 -0
- package/lib/internal/scss/segmented-control/segment.scss +5 -0
- package/lib/internal/scss/segmented-control/styles.scss +29 -4
- package/lib/internal/scss/side-navigation/styles.scss +13 -6
- package/lib/internal/scss/steps/styles.scss +1 -1
- package/lib/internal/template/alert/styles.css.js +27 -27
- package/lib/internal/template/alert/styles.scoped.css +50 -50
- package/lib/internal/template/alert/styles.selectors.js +27 -27
- package/lib/internal/template/annotation-context/annotation/styles.css.js +13 -13
- package/lib/internal/template/annotation-context/annotation/styles.scoped.css +21 -21
- package/lib/internal/template/annotation-context/annotation/styles.selectors.js +13 -13
- package/lib/internal/template/app-layout/notifications/styles.css.js +3 -3
- package/lib/internal/template/app-layout/notifications/styles.scoped.css +7 -7
- package/lib/internal/template/app-layout/notifications/styles.selectors.js +3 -3
- package/lib/internal/template/app-layout/visual-refresh/styles.css.js +86 -86
- package/lib/internal/template/app-layout/visual-refresh/styles.scoped.css +258 -258
- package/lib/internal/template/app-layout/visual-refresh/styles.selectors.js +86 -86
- package/lib/internal/template/app-layout/visual-refresh-toolbar/drawer/styles.css.js +32 -32
- package/lib/internal/template/app-layout/visual-refresh-toolbar/drawer/styles.scoped.css +89 -89
- package/lib/internal/template/app-layout/visual-refresh-toolbar/drawer/styles.selectors.js +32 -32
- package/lib/internal/template/app-layout/visual-refresh-toolbar/navigation/styles.css.js +6 -6
- package/lib/internal/template/app-layout/visual-refresh-toolbar/navigation/styles.scoped.css +13 -13
- package/lib/internal/template/app-layout/visual-refresh-toolbar/navigation/styles.selectors.js +6 -6
- package/lib/internal/template/app-layout/visual-refresh-toolbar/skeleton/styles.css.js +30 -30
- package/lib/internal/template/app-layout/visual-refresh-toolbar/skeleton/styles.scoped.css +68 -68
- package/lib/internal/template/app-layout/visual-refresh-toolbar/skeleton/styles.selectors.js +30 -30
- package/lib/internal/template/attribute-editor/styles.css.js +15 -15
- package/lib/internal/template/attribute-editor/styles.scoped.css +28 -28
- package/lib/internal/template/attribute-editor/styles.selectors.js +15 -15
- package/lib/internal/template/breadcrumb-group/item/styles.css.js +7 -7
- package/lib/internal/template/breadcrumb-group/item/styles.scoped.css +28 -28
- package/lib/internal/template/breadcrumb-group/item/styles.selectors.js +7 -7
- package/lib/internal/template/button/styles.css.js +23 -23
- package/lib/internal/template/button/styles.scoped.css +261 -261
- package/lib/internal/template/button/styles.selectors.js +23 -23
- package/lib/internal/template/button-dropdown/item-element/styles.css.js +21 -21
- package/lib/internal/template/button-dropdown/item-element/styles.scoped.css +37 -37
- package/lib/internal/template/button-dropdown/item-element/styles.selectors.js +21 -21
- package/lib/internal/template/cards/styles.css.js +39 -39
- package/lib/internal/template/cards/styles.scoped.css +41 -41
- package/lib/internal/template/cards/styles.selectors.js +39 -39
- package/lib/internal/template/checkbox/styles.css.js +3 -3
- package/lib/internal/template/checkbox/styles.scoped.css +10 -10
- package/lib/internal/template/checkbox/styles.selectors.js +3 -3
- package/lib/internal/template/container/style.d.ts +1 -15
- package/lib/internal/template/container/style.d.ts.map +1 -1
- package/lib/internal/template/container/style.js +6 -2
- package/lib/internal/template/container/style.js.map +1 -1
- package/lib/internal/template/container/styles.css.js +34 -34
- package/lib/internal/template/container/styles.scoped.css +87 -87
- package/lib/internal/template/container/styles.selectors.js +34 -34
- package/lib/internal/template/content-layout/styles.css.js +14 -14
- package/lib/internal/template/content-layout/styles.scoped.css +27 -27
- package/lib/internal/template/content-layout/styles.selectors.js +14 -14
- package/lib/internal/template/dropdown/styles.css.js +20 -20
- package/lib/internal/template/dropdown/styles.scoped.css +49 -49
- package/lib/internal/template/dropdown/styles.selectors.js +20 -20
- package/lib/internal/template/expandable-section/expandable-section-header.d.ts.map +1 -1
- package/lib/internal/template/expandable-section/expandable-section-header.js +1 -1
- package/lib/internal/template/expandable-section/expandable-section-header.js.map +1 -1
- package/lib/internal/template/expandable-section/interfaces.d.ts +4 -4
- package/lib/internal/template/expandable-section/interfaces.js.map +1 -1
- package/lib/internal/template/file-token-group/styles.css.js +23 -23
- package/lib/internal/template/file-token-group/styles.scoped.css +36 -36
- package/lib/internal/template/file-token-group/styles.selectors.js +23 -23
- package/lib/internal/template/flashbar/styles.css.js +50 -50
- package/lib/internal/template/flashbar/styles.scoped.css +184 -184
- package/lib/internal/template/flashbar/styles.selectors.js +50 -50
- package/lib/internal/template/help-panel/styles.css.js +6 -6
- package/lib/internal/template/help-panel/styles.scoped.css +72 -72
- package/lib/internal/template/help-panel/styles.selectors.js +6 -6
- package/lib/internal/template/input/internal.d.ts.map +1 -1
- package/lib/internal/template/input/internal.js +10 -4
- package/lib/internal/template/input/internal.js.map +1 -1
- package/lib/internal/template/input/styles.css.js +36 -29
- package/lib/internal/template/input/styles.scoped.css +168 -137
- package/lib/internal/template/input/styles.selectors.js +36 -29
- package/lib/internal/template/internal/base-component/styles.scoped.css +1 -1
- package/lib/internal/template/internal/components/autosuggest-input/index.d.ts.map +1 -1
- package/lib/internal/template/internal/components/autosuggest-input/index.js +4 -1
- package/lib/internal/template/internal/components/autosuggest-input/index.js.map +1 -1
- package/lib/internal/template/internal/components/button-trigger/index.d.ts +2 -0
- package/lib/internal/template/internal/components/button-trigger/index.d.ts.map +1 -1
- package/lib/internal/template/internal/components/button-trigger/index.js +3 -2
- package/lib/internal/template/internal/components/button-trigger/index.js.map +1 -1
- package/lib/internal/template/internal/components/button-trigger/styles.css.js +21 -14
- package/lib/internal/template/internal/components/button-trigger/styles.scoped.css +63 -33
- package/lib/internal/template/internal/components/button-trigger/styles.selectors.js +21 -14
- package/lib/internal/template/internal/components/control-group/grouped-control-styles.d.ts +10 -0
- package/lib/internal/template/internal/components/control-group/grouped-control-styles.d.ts.map +1 -0
- package/lib/internal/template/internal/components/control-group/grouped-control-styles.js +14 -0
- package/lib/internal/template/internal/components/control-group/grouped-control-styles.js.map +1 -0
- package/lib/internal/template/internal/components/control-group/index.d.ts +9 -0
- package/lib/internal/template/internal/components/control-group/index.d.ts.map +1 -0
- package/lib/internal/template/internal/components/control-group/index.js +20 -0
- package/lib/internal/template/internal/components/control-group/index.js.map +1 -0
- package/lib/internal/template/internal/components/control-group/styles.css.js +13 -0
- package/lib/internal/template/internal/components/control-group/styles.scoped.css +63 -0
- package/lib/internal/template/internal/components/control-group/styles.selectors.js +14 -0
- package/lib/internal/template/internal/components/drag-handle-wrapper/styles.css.js +30 -30
- package/lib/internal/template/internal/components/drag-handle-wrapper/styles.scoped.css +58 -58
- package/lib/internal/template/internal/components/drag-handle-wrapper/styles.selectors.js +30 -30
- package/lib/internal/template/internal/components/focus-lock/index.d.ts +6 -0
- package/lib/internal/template/internal/components/focus-lock/index.d.ts.map +1 -1
- package/lib/internal/template/internal/components/focus-lock/index.js +8 -3
- package/lib/internal/template/internal/components/focus-lock/index.js.map +1 -1
- package/lib/internal/template/internal/components/option/styles.css.js +17 -17
- package/lib/internal/template/internal/components/option/styles.scoped.css +31 -31
- package/lib/internal/template/internal/components/option/styles.selectors.js +17 -17
- package/lib/internal/template/internal/components/radio-button/styles.css.js +7 -7
- package/lib/internal/template/internal/components/radio-button/styles.scoped.css +17 -17
- package/lib/internal/template/internal/components/radio-button/styles.selectors.js +7 -7
- package/lib/internal/template/internal/components/selectable-item/styles.css.js +22 -22
- package/lib/internal/template/internal/components/selectable-item/styles.scoped.css +57 -57
- package/lib/internal/template/internal/components/selectable-item/styles.selectors.js +22 -22
- package/lib/internal/template/internal/components/token-list/styles.css.js +10 -10
- package/lib/internal/template/internal/components/token-list/styles.scoped.css +25 -25
- package/lib/internal/template/internal/components/token-list/styles.selectors.js +10 -10
- package/lib/internal/template/internal/context/control-group-context.d.ts +30 -0
- package/lib/internal/template/internal/context/control-group-context.d.ts.map +1 -0
- package/lib/internal/template/internal/context/control-group-context.js +24 -0
- package/lib/internal/template/internal/context/control-group-context.js.map +1 -0
- package/lib/internal/template/internal/environment.js +2 -2
- package/lib/internal/template/internal/environment.json +2 -2
- package/lib/internal/template/internal/generated/custom-css-properties/index.d.ts +1 -0
- package/lib/internal/template/internal/generated/custom-css-properties/index.d.ts.map +1 -1
- package/lib/internal/template/internal/generated/custom-css-properties/index.js +175 -174
- package/lib/internal/template/internal/generated/custom-css-properties/index.js.map +1 -1
- package/lib/internal/template/item-card/styles.css.js +14 -14
- package/lib/internal/template/item-card/styles.scoped.css +63 -63
- package/lib/internal/template/item-card/styles.selectors.js +14 -14
- package/lib/internal/template/link/styles.css.js +21 -21
- package/lib/internal/template/link/styles.scoped.css +104 -104
- package/lib/internal/template/link/styles.selectors.js +21 -21
- package/lib/internal/template/modal/index.d.ts +1 -1
- package/lib/internal/template/modal/index.d.ts.map +1 -1
- package/lib/internal/template/modal/index.js +6 -5
- package/lib/internal/template/modal/index.js.map +1 -1
- package/lib/internal/template/modal/interfaces.d.ts +7 -0
- package/lib/internal/template/modal/interfaces.d.ts.map +1 -1
- package/lib/internal/template/modal/interfaces.js.map +1 -1
- package/lib/internal/template/modal/internal.js +23 -6
- package/lib/internal/template/modal/internal.js.map +1 -1
- package/lib/internal/template/modal/styles.css.js +32 -31
- package/lib/internal/template/modal/styles.scoped.css +51 -48
- package/lib/internal/template/modal/styles.selectors.js +32 -31
- package/lib/internal/template/multiselect/internal.d.ts.map +1 -1
- package/lib/internal/template/multiselect/internal.js +17 -10
- package/lib/internal/template/multiselect/internal.js.map +1 -1
- package/lib/internal/template/progress-bar/styles.css.js +19 -19
- package/lib/internal/template/progress-bar/styles.scoped.css +58 -58
- package/lib/internal/template/progress-bar/styles.selectors.js +19 -19
- package/lib/internal/template/prompt-input/styles.css.js +26 -26
- package/lib/internal/template/prompt-input/styles.scoped.css +109 -109
- package/lib/internal/template/prompt-input/styles.selectors.js +26 -26
- package/lib/internal/template/segmented-control/internal-segmented-control.d.ts +6 -1
- package/lib/internal/template/segmented-control/internal-segmented-control.d.ts.map +1 -1
- package/lib/internal/template/segmented-control/internal-segmented-control.js +8 -3
- package/lib/internal/template/segmented-control/internal-segmented-control.js.map +1 -1
- package/lib/internal/template/segmented-control/internal.d.ts.map +1 -1
- package/lib/internal/template/segmented-control/internal.js +5 -2
- package/lib/internal/template/segmented-control/internal.js.map +1 -1
- package/lib/internal/template/segmented-control/segment.d.ts +1 -0
- package/lib/internal/template/segmented-control/segment.d.ts.map +1 -1
- package/lib/internal/template/segmented-control/segment.js +2 -2
- package/lib/internal/template/segmented-control/segment.js.map +1 -1
- package/lib/internal/template/segmented-control/styles.css.js +26 -16
- package/lib/internal/template/segmented-control/styles.scoped.css +106 -46
- package/lib/internal/template/segmented-control/styles.selectors.js +26 -16
- package/lib/internal/template/select/internal.d.ts.map +1 -1
- package/lib/internal/template/select/internal.js +11 -8
- package/lib/internal/template/select/internal.js.map +1 -1
- package/lib/internal/template/select/parts/styles.css.js +21 -21
- package/lib/internal/template/select/parts/styles.scoped.css +24 -24
- package/lib/internal/template/select/parts/styles.selectors.js +21 -21
- package/lib/internal/template/select/parts/trigger.d.ts +2 -0
- package/lib/internal/template/select/parts/trigger.d.ts.map +1 -1
- package/lib/internal/template/select/parts/trigger.js +2 -2
- package/lib/internal/template/select/parts/trigger.js.map +1 -1
- package/lib/internal/template/side-navigation/styles.css.js +64 -64
- package/lib/internal/template/side-navigation/styles.scoped.css +119 -114
- package/lib/internal/template/side-navigation/styles.selectors.js +64 -64
- package/lib/internal/template/slider/styles.css.js +26 -26
- package/lib/internal/template/slider/styles.scoped.css +165 -165
- package/lib/internal/template/slider/styles.selectors.js +26 -26
- package/lib/internal/template/spinner/styles.css.js +14 -14
- package/lib/internal/template/spinner/styles.scoped.css +40 -40
- package/lib/internal/template/spinner/styles.selectors.js +14 -14
- package/lib/internal/template/steps/styles.css.js +17 -17
- package/lib/internal/template/steps/styles.scoped.css +35 -35
- package/lib/internal/template/steps/styles.selectors.js +17 -17
- package/lib/internal/template/table/styles.css.js +37 -37
- package/lib/internal/template/table/styles.scoped.css +46 -46
- package/lib/internal/template/table/styles.selectors.js +37 -37
- package/lib/internal/template/tabs/styles.css.js +30 -30
- package/lib/internal/template/tabs/styles.scoped.css +76 -76
- package/lib/internal/template/tabs/styles.selectors.js +30 -30
- package/lib/internal/template/tag-editor/styles.css.js +3 -3
- package/lib/internal/template/tag-editor/styles.scoped.css +13 -13
- package/lib/internal/template/tag-editor/styles.selectors.js +3 -3
- package/lib/internal/template/text-content/styles.css.js +1 -1
- package/lib/internal/template/text-content/styles.scoped.css +66 -66
- package/lib/internal/template/text-content/styles.selectors.js +1 -1
- package/lib/internal/template/textarea/styles.css.js +9 -9
- package/lib/internal/template/textarea/styles.scoped.css +51 -55
- package/lib/internal/template/textarea/styles.selectors.js +9 -9
- package/lib/internal/template/toggle/styles.css.js +10 -10
- package/lib/internal/template/toggle/styles.scoped.css +22 -22
- package/lib/internal/template/toggle/styles.selectors.js +10 -10
- package/lib/internal/template/token/styles.css.js +14 -14
- package/lib/internal/template/token/styles.scoped.css +46 -46
- package/lib/internal/template/token/styles.selectors.js +14 -14
- package/package.json +1 -1
|
@@ -7,6 +7,7 @@ import InternalDropdown from '../../../dropdown/internal';
|
|
|
7
7
|
import InternalInput from '../../../input/internal';
|
|
8
8
|
import { getBaseProps } from '../../base-component';
|
|
9
9
|
import { getBreakpointValue } from '../../breakpoints';
|
|
10
|
+
import { ResetGroupedControlContext } from '../../context/control-group-context';
|
|
10
11
|
import { useFormFieldContext } from '../../context/form-field-context';
|
|
11
12
|
import { fireCancelableEvent, fireNonCancelableEvent } from '../../events';
|
|
12
13
|
import { useIMEComposition } from '../../hooks/use-ime-composition';
|
|
@@ -185,7 +186,9 @@ const AutosuggestInput = React.forwardRef(({ value, onChange, onBlur, onFocus, o
|
|
|
185
186
|
}
|
|
186
187
|
};
|
|
187
188
|
return (React.createElement("div", { ...baseProps, className: clsx(baseProps.className, styles.root), ref: __internalRootRef },
|
|
188
|
-
React.createElement(InternalDropdown, { minWidth: getDropdownMinWidth({ expandToViewport, triggerWidth, dropdownWidth }), maxWidth: getBreakpointValue('xxs'), contentKey: dropdownContentKey, onFocus: handleFocus, onBlur: handleBlur, trigger: React.createElement(InternalInput, { type: "visualSearch", value: value, onChange: event => handleChange(event.detail.value), __onDelayedInput: event => handleDelayedInput(event.detail.value), onKeyDown: handleKeyDown, onKeyUp: onKeyUp, disabled: disabled, disableBrowserAutocorrect: disableBrowserAutocorrect, readOnly: readOnly, ariaRequired: ariaRequired, clearAriaLabel: clearAriaLabel, ref: inputRef, autoComplete: false, nativeInputAttributes: processAttributes(nativeAttributes, nativeInputAttributes, 'Autosuggest'), __skipNativeAttributesWarnings: Object.keys(nativeAttributes), style: style, ...formFieldContext }), onMouseDown: handleDropdownMouseDown, open: open && (!!dropdownContent || !!dropdownFooter), footer: dropdownFooterRef && (React.createElement("div", { ref: dropdownFooterRef, className: styles['dropdown-footer'], onKeyDown: handleDropdownKeyDown },
|
|
189
|
+
React.createElement(InternalDropdown, { minWidth: getDropdownMinWidth({ expandToViewport, triggerWidth, dropdownWidth }), maxWidth: getBreakpointValue('xxs'), contentKey: dropdownContentKey, onFocus: handleFocus, onBlur: handleBlur, trigger: React.createElement(InternalInput, { type: "visualSearch", value: value, onChange: event => handleChange(event.detail.value), __onDelayedInput: event => handleDelayedInput(event.detail.value), onKeyDown: handleKeyDown, onKeyUp: onKeyUp, disabled: disabled, disableBrowserAutocorrect: disableBrowserAutocorrect, readOnly: readOnly, ariaRequired: ariaRequired, clearAriaLabel: clearAriaLabel, ref: inputRef, autoComplete: false, nativeInputAttributes: processAttributes(nativeAttributes, nativeInputAttributes, 'Autosuggest'), __skipNativeAttributesWarnings: Object.keys(nativeAttributes), style: style, ...formFieldContext }), onMouseDown: handleDropdownMouseDown, open: open && (!!dropdownContent || !!dropdownFooter), footer: dropdownFooterRef && (React.createElement("div", { ref: dropdownFooterRef, className: styles['dropdown-footer'], onKeyDown: handleDropdownKeyDown },
|
|
190
|
+
React.createElement(ResetGroupedControlContext, null, open && dropdownFooter ? dropdownFooter : null))), expandToViewport: expandToViewport, loopFocus: loopFocus, content: open && dropdownContent ? (React.createElement("div", { ref: dropdownContentRef, className: styles['dropdown-content'] },
|
|
191
|
+
React.createElement(ResetGroupedControlContext, null, dropdownContent))) : null })));
|
|
189
192
|
});
|
|
190
193
|
export default AutosuggestInput;
|
|
191
194
|
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/internal/components/autosuggest-input/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\n\nimport React, { Ref, useEffect, useImperativeHandle, useRef, useState } from 'react';\nimport clsx from 'clsx';\n\nimport { useResizeObserver } from '@cloudscape-design/component-toolkit/internal';\n\nimport { AutosuggestProps } from '../../../autosuggest/interfaces';\nimport { ExpandToViewport } from '../../../dropdown/interfaces';\nimport InternalDropdown from '../../../dropdown/internal';\nimport {\n BaseChangeDetail,\n BaseInputProps,\n InputAutoCorrect,\n InputClearLabel,\n InputKeyEvents,\n InputProps,\n} from '../../../input/interfaces';\nimport InternalInput from '../../../input/internal';\nimport { BaseComponentProps } from '../../../types/base-component';\nimport { BaseKeyDetail, NonCancelableEventHandler } from '../../../types/events';\nimport { FormFieldValidationControlProps } from '../../../types/form-field';\nimport { getBaseProps } from '../../base-component';\nimport { getBreakpointValue } from '../../breakpoints';\nimport { useFormFieldContext } from '../../context/form-field-context';\nimport { fireCancelableEvent, fireNonCancelableEvent } from '../../events';\nimport { InternalBaseComponentProps } from '../../hooks/use-base-component';\nimport { useIMEComposition } from '../../hooks/use-ime-composition';\nimport { KeyCode } from '../../keycode';\nimport { getDropdownMinWidth } from '../../utils/get-dropdown-min-width';\nimport { nodeBelongs } from '../../utils/node-belongs';\nimport { processAttributes } from '../../utils/with-native-attributes';\n\nimport styles from './styles.css.js';\n\ninterface AutosuggestInputProps\n extends BaseComponentProps,\n BaseInputProps,\n InputAutoCorrect,\n InputKeyEvents,\n InputClearLabel,\n FormFieldValidationControlProps,\n ExpandToViewport,\n InternalBaseComponentProps {\n ariaControls?: string;\n ariaActivedescendant?: string;\n dropdownExpanded?: boolean;\n dropdownContentKey?: string;\n dropdownContentFocusable?: boolean;\n dropdownContent?: React.ReactNode;\n dropdownFooter?: React.ReactNode;\n dropdownWidth?: number;\n loopFocus?: boolean;\n onCloseDropdown?: NonCancelableEventHandler<null>;\n onDelayedInput?: NonCancelableEventHandler<BaseChangeDetail>;\n onPressArrowDown?: () => void;\n onPressArrowUp?: () => void;\n onPressEnter?: () => boolean;\n style?: InputProps['style'];\n}\n\ninterface AutosuggestInputFocusOptions {\n preventDropdown?: boolean;\n}\n\nexport interface AutosuggestInputRef extends AutosuggestProps.Ref {\n focus(options?: AutosuggestInputFocusOptions): void;\n open(): void;\n close(): void;\n}\n\nconst AutosuggestInput = React.forwardRef(\n (\n {\n value,\n onChange,\n onBlur,\n onFocus,\n onKeyUp,\n onKeyDown,\n name,\n placeholder,\n disabled,\n readOnly,\n autoFocus,\n ariaLabel,\n ariaRequired,\n disableBrowserAutocorrect = false,\n expandToViewport,\n ariaControls,\n ariaActivedescendant,\n clearAriaLabel,\n dropdownExpanded = true,\n dropdownContentKey,\n dropdownContentFocusable = false,\n dropdownContent = null,\n dropdownFooter = null,\n dropdownWidth,\n loopFocus,\n nativeInputAttributes,\n onCloseDropdown,\n onDelayedInput,\n onPressArrowDown,\n onPressArrowUp,\n onPressEnter,\n style,\n __internalRootRef,\n ...restProps\n }: AutosuggestInputProps,\n ref: Ref<AutosuggestInputRef>\n ) => {\n const baseProps = getBaseProps(restProps);\n const formFieldContext = useFormFieldContext(restProps);\n\n const inputRef = useRef<HTMLInputElement>(null);\n const dropdownContentRef = useRef<HTMLDivElement>(null);\n const dropdownFooterRef = useRef<HTMLDivElement>(null);\n const preventOpenOnFocusRef = useRef(false);\n const preventCloseOnBlurRef = useRef(false);\n const [triggerWidth, setTriggerWidth] = useState<number | null>(null);\n useResizeObserver(\n () => inputRef.current,\n entry => entry.borderBoxWidth > 0 && setTriggerWidth(entry.borderBoxWidth)\n );\n\n const [open, setOpen] = useState(false);\n\n const openDropdown = () => !readOnly && setOpen(true);\n\n const closeDropdown = () => {\n setOpen(false);\n fireNonCancelableEvent(onCloseDropdown, null);\n };\n\n const { isComposing } = useIMEComposition(inputRef);\n\n useImperativeHandle(ref, () => ({\n focus(options?: AutosuggestInputFocusOptions) {\n if (options?.preventDropdown) {\n preventOpenOnFocusRef.current = true;\n }\n inputRef.current?.focus();\n },\n select() {\n inputRef.current?.select();\n },\n open: openDropdown,\n close: closeDropdown,\n }));\n\n const handleBlur = () => {\n if (!preventCloseOnBlurRef.current) {\n closeDropdown();\n fireNonCancelableEvent(onBlur, null);\n }\n };\n\n const handleFocus = () => {\n if (!preventOpenOnFocusRef.current) {\n openDropdown();\n fireNonCancelableEvent(onFocus, null);\n }\n preventOpenOnFocusRef.current = false;\n };\n\n const fireKeydown = (event: CustomEvent<BaseKeyDetail>) => fireCancelableEvent(onKeyDown, event.detail, event);\n\n // Shared ESC key handler logic for both input and dropdown elements\n // When returnFocus is true (from dropdown elements), focus returns to input after closing\n const handleEscapeKey = (returnFocus: boolean) => {\n if (open) {\n closeDropdown();\n if (returnFocus) {\n // Return focus to input when closing from dropdown elements (e.g., recovery button)\n inputRef.current?.focus();\n }\n } else if (value) {\n fireNonCancelableEvent(onChange, { value: '' });\n }\n };\n\n const handleKeyDown = (event: CustomEvent<BaseKeyDetail>) => {\n switch (event.detail.keyCode) {\n case KeyCode.down: {\n onPressArrowDown?.();\n openDropdown();\n event.preventDefault();\n break;\n }\n case KeyCode.up: {\n onPressArrowUp?.();\n openDropdown();\n event.preventDefault();\n break;\n }\n case KeyCode.enter: {\n if (isComposing()) {\n event.preventDefault();\n return;\n }\n\n if (open) {\n if (!onPressEnter?.()) {\n closeDropdown();\n }\n event.preventDefault();\n }\n fireKeydown(event);\n break;\n }\n case KeyCode.escape: {\n // Use shared ESC handler, without focus restoration since ESC came from input\n handleEscapeKey(false);\n if (open || value) {\n event.stopPropagation();\n }\n event.preventDefault();\n fireKeydown(event);\n break;\n }\n default: {\n fireKeydown(event);\n }\n }\n };\n\n const handleChange = (value: string) => {\n openDropdown();\n fireNonCancelableEvent(onChange, { value });\n };\n\n const handleDelayedInput = (value: string) => {\n fireNonCancelableEvent(onDelayedInput, { value });\n };\n\n const handleDropdownMouseDown: React.MouseEventHandler = event => {\n // Prevent currently focused element from losing focus.\n if (!dropdownContentFocusable) {\n event.preventDefault();\n }\n // Prevent closing dropdown on click inside.\n else {\n preventCloseOnBlurRef.current = true;\n requestAnimationFrame(() => {\n preventCloseOnBlurRef.current = false;\n });\n }\n };\n\n const expanded = open && dropdownExpanded;\n const nativeAttributes: BaseInputProps['nativeInputAttributes'] = {\n name,\n placeholder,\n autoFocus,\n onClick: openDropdown,\n role: 'combobox',\n 'aria-autocomplete': 'list',\n 'aria-expanded': expanded,\n 'aria-controls': open ? ariaControls : undefined,\n // 'aria-owns' needed for safari+vo to announce activedescendant content\n 'aria-owns': open ? ariaControls : undefined,\n 'aria-label': ariaLabel,\n 'aria-activedescendant': ariaActivedescendant,\n };\n\n // Closes dropdown when outside click is detected.\n // Similar to the internal dropdown implementation but includes the target as well.\n useEffect(() => {\n if (!open) {\n return;\n }\n\n const clickListener = (event: MouseEvent) => {\n if (\n !nodeBelongs(inputRef.current, event.target) &&\n !nodeBelongs(dropdownContentRef.current, event.target) &&\n !nodeBelongs(dropdownFooterRef.current, event.target)\n ) {\n closeDropdown();\n }\n };\n\n window.addEventListener('mousedown', clickListener);\n\n return () => {\n window.removeEventListener('mousedown', clickListener);\n };\n\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [open]);\n\n const handleDropdownKeyDown: React.KeyboardEventHandler = event => {\n // Handle ESC key from focusable elements inside the dropdown (e.g., recovery button)\n // but NOT from the input itself (that's handled by handleKeyDown)\n const isFromInput = event.target === inputRef.current || nodeBelongs(inputRef.current, event.target);\n\n if (event.key === 'Escape' && !isFromInput) {\n event.stopPropagation();\n event.preventDefault();\n // Use shared ESC handler with focus restoration since ESC came from dropdown element\n handleEscapeKey(true);\n }\n };\n\n return (\n <div {...baseProps} className={clsx(baseProps.className, styles.root)} ref={__internalRootRef}>\n <InternalDropdown\n minWidth={getDropdownMinWidth({ expandToViewport, triggerWidth, dropdownWidth })}\n maxWidth={getBreakpointValue('xxs')} // AWSUI-19898\n contentKey={dropdownContentKey}\n onFocus={handleFocus}\n onBlur={handleBlur}\n trigger={\n <InternalInput\n type=\"visualSearch\"\n value={value}\n onChange={event => handleChange(event.detail.value)}\n __onDelayedInput={event => handleDelayedInput(event.detail.value)}\n onKeyDown={handleKeyDown}\n onKeyUp={onKeyUp}\n disabled={disabled}\n disableBrowserAutocorrect={disableBrowserAutocorrect}\n readOnly={readOnly}\n ariaRequired={ariaRequired}\n clearAriaLabel={clearAriaLabel}\n ref={inputRef}\n autoComplete={false}\n nativeInputAttributes={processAttributes(nativeAttributes, nativeInputAttributes, 'Autosuggest')}\n __skipNativeAttributesWarnings={Object.keys(nativeAttributes)}\n style={style}\n {...formFieldContext}\n />\n }\n onMouseDown={handleDropdownMouseDown}\n open={open && (!!dropdownContent || !!dropdownFooter)}\n footer={\n dropdownFooterRef && (\n <div ref={dropdownFooterRef} className={styles['dropdown-footer']} onKeyDown={handleDropdownKeyDown}>\n {open && dropdownFooter ? dropdownFooter : null}\n </div>\n )\n }\n expandToViewport={expandToViewport}\n loopFocus={loopFocus}\n content={\n open && dropdownContent ? (\n <div ref={dropdownContentRef} className={styles['dropdown-content']}>\n {dropdownContent}\n </div>\n ) : null\n }\n />\n </div>\n );\n }\n);\n\nexport default AutosuggestInput;\n"]}
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/internal/components/autosuggest-input/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\n\nimport React, { Ref, useEffect, useImperativeHandle, useRef, useState } from 'react';\nimport clsx from 'clsx';\n\nimport { useResizeObserver } from '@cloudscape-design/component-toolkit/internal';\n\nimport { AutosuggestProps } from '../../../autosuggest/interfaces';\nimport { ExpandToViewport } from '../../../dropdown/interfaces';\nimport InternalDropdown from '../../../dropdown/internal';\nimport {\n BaseChangeDetail,\n BaseInputProps,\n InputAutoCorrect,\n InputClearLabel,\n InputKeyEvents,\n InputProps,\n} from '../../../input/interfaces';\nimport InternalInput from '../../../input/internal';\nimport { BaseComponentProps } from '../../../types/base-component';\nimport { BaseKeyDetail, NonCancelableEventHandler } from '../../../types/events';\nimport { FormFieldValidationControlProps } from '../../../types/form-field';\nimport { getBaseProps } from '../../base-component';\nimport { getBreakpointValue } from '../../breakpoints';\nimport { ResetGroupedControlContext } from '../../context/control-group-context';\nimport { useFormFieldContext } from '../../context/form-field-context';\nimport { fireCancelableEvent, fireNonCancelableEvent } from '../../events';\nimport { InternalBaseComponentProps } from '../../hooks/use-base-component';\nimport { useIMEComposition } from '../../hooks/use-ime-composition';\nimport { KeyCode } from '../../keycode';\nimport { getDropdownMinWidth } from '../../utils/get-dropdown-min-width';\nimport { nodeBelongs } from '../../utils/node-belongs';\nimport { processAttributes } from '../../utils/with-native-attributes';\n\nimport styles from './styles.css.js';\n\ninterface AutosuggestInputProps\n extends BaseComponentProps,\n BaseInputProps,\n InputAutoCorrect,\n InputKeyEvents,\n InputClearLabel,\n FormFieldValidationControlProps,\n ExpandToViewport,\n InternalBaseComponentProps {\n ariaControls?: string;\n ariaActivedescendant?: string;\n dropdownExpanded?: boolean;\n dropdownContentKey?: string;\n dropdownContentFocusable?: boolean;\n dropdownContent?: React.ReactNode;\n dropdownFooter?: React.ReactNode;\n dropdownWidth?: number;\n loopFocus?: boolean;\n onCloseDropdown?: NonCancelableEventHandler<null>;\n onDelayedInput?: NonCancelableEventHandler<BaseChangeDetail>;\n onPressArrowDown?: () => void;\n onPressArrowUp?: () => void;\n onPressEnter?: () => boolean;\n style?: InputProps['style'];\n}\n\ninterface AutosuggestInputFocusOptions {\n preventDropdown?: boolean;\n}\n\nexport interface AutosuggestInputRef extends AutosuggestProps.Ref {\n focus(options?: AutosuggestInputFocusOptions): void;\n open(): void;\n close(): void;\n}\n\nconst AutosuggestInput = React.forwardRef(\n (\n {\n value,\n onChange,\n onBlur,\n onFocus,\n onKeyUp,\n onKeyDown,\n name,\n placeholder,\n disabled,\n readOnly,\n autoFocus,\n ariaLabel,\n ariaRequired,\n disableBrowserAutocorrect = false,\n expandToViewport,\n ariaControls,\n ariaActivedescendant,\n clearAriaLabel,\n dropdownExpanded = true,\n dropdownContentKey,\n dropdownContentFocusable = false,\n dropdownContent = null,\n dropdownFooter = null,\n dropdownWidth,\n loopFocus,\n nativeInputAttributes,\n onCloseDropdown,\n onDelayedInput,\n onPressArrowDown,\n onPressArrowUp,\n onPressEnter,\n style,\n __internalRootRef,\n ...restProps\n }: AutosuggestInputProps,\n ref: Ref<AutosuggestInputRef>\n ) => {\n const baseProps = getBaseProps(restProps);\n const formFieldContext = useFormFieldContext(restProps);\n\n const inputRef = useRef<HTMLInputElement>(null);\n const dropdownContentRef = useRef<HTMLDivElement>(null);\n const dropdownFooterRef = useRef<HTMLDivElement>(null);\n const preventOpenOnFocusRef = useRef(false);\n const preventCloseOnBlurRef = useRef(false);\n const [triggerWidth, setTriggerWidth] = useState<number | null>(null);\n useResizeObserver(\n () => inputRef.current,\n entry => entry.borderBoxWidth > 0 && setTriggerWidth(entry.borderBoxWidth)\n );\n\n const [open, setOpen] = useState(false);\n\n const openDropdown = () => !readOnly && setOpen(true);\n\n const closeDropdown = () => {\n setOpen(false);\n fireNonCancelableEvent(onCloseDropdown, null);\n };\n\n const { isComposing } = useIMEComposition(inputRef);\n\n useImperativeHandle(ref, () => ({\n focus(options?: AutosuggestInputFocusOptions) {\n if (options?.preventDropdown) {\n preventOpenOnFocusRef.current = true;\n }\n inputRef.current?.focus();\n },\n select() {\n inputRef.current?.select();\n },\n open: openDropdown,\n close: closeDropdown,\n }));\n\n const handleBlur = () => {\n if (!preventCloseOnBlurRef.current) {\n closeDropdown();\n fireNonCancelableEvent(onBlur, null);\n }\n };\n\n const handleFocus = () => {\n if (!preventOpenOnFocusRef.current) {\n openDropdown();\n fireNonCancelableEvent(onFocus, null);\n }\n preventOpenOnFocusRef.current = false;\n };\n\n const fireKeydown = (event: CustomEvent<BaseKeyDetail>) => fireCancelableEvent(onKeyDown, event.detail, event);\n\n // Shared ESC key handler logic for both input and dropdown elements\n // When returnFocus is true (from dropdown elements), focus returns to input after closing\n const handleEscapeKey = (returnFocus: boolean) => {\n if (open) {\n closeDropdown();\n if (returnFocus) {\n // Return focus to input when closing from dropdown elements (e.g., recovery button)\n inputRef.current?.focus();\n }\n } else if (value) {\n fireNonCancelableEvent(onChange, { value: '' });\n }\n };\n\n const handleKeyDown = (event: CustomEvent<BaseKeyDetail>) => {\n switch (event.detail.keyCode) {\n case KeyCode.down: {\n onPressArrowDown?.();\n openDropdown();\n event.preventDefault();\n break;\n }\n case KeyCode.up: {\n onPressArrowUp?.();\n openDropdown();\n event.preventDefault();\n break;\n }\n case KeyCode.enter: {\n if (isComposing()) {\n event.preventDefault();\n return;\n }\n\n if (open) {\n if (!onPressEnter?.()) {\n closeDropdown();\n }\n event.preventDefault();\n }\n fireKeydown(event);\n break;\n }\n case KeyCode.escape: {\n // Use shared ESC handler, without focus restoration since ESC came from input\n handleEscapeKey(false);\n if (open || value) {\n event.stopPropagation();\n }\n event.preventDefault();\n fireKeydown(event);\n break;\n }\n default: {\n fireKeydown(event);\n }\n }\n };\n\n const handleChange = (value: string) => {\n openDropdown();\n fireNonCancelableEvent(onChange, { value });\n };\n\n const handleDelayedInput = (value: string) => {\n fireNonCancelableEvent(onDelayedInput, { value });\n };\n\n const handleDropdownMouseDown: React.MouseEventHandler = event => {\n // Prevent currently focused element from losing focus.\n if (!dropdownContentFocusable) {\n event.preventDefault();\n }\n // Prevent closing dropdown on click inside.\n else {\n preventCloseOnBlurRef.current = true;\n requestAnimationFrame(() => {\n preventCloseOnBlurRef.current = false;\n });\n }\n };\n\n const expanded = open && dropdownExpanded;\n const nativeAttributes: BaseInputProps['nativeInputAttributes'] = {\n name,\n placeholder,\n autoFocus,\n onClick: openDropdown,\n role: 'combobox',\n 'aria-autocomplete': 'list',\n 'aria-expanded': expanded,\n 'aria-controls': open ? ariaControls : undefined,\n // 'aria-owns' needed for safari+vo to announce activedescendant content\n 'aria-owns': open ? ariaControls : undefined,\n 'aria-label': ariaLabel,\n 'aria-activedescendant': ariaActivedescendant,\n };\n\n // Closes dropdown when outside click is detected.\n // Similar to the internal dropdown implementation but includes the target as well.\n useEffect(() => {\n if (!open) {\n return;\n }\n\n const clickListener = (event: MouseEvent) => {\n if (\n !nodeBelongs(inputRef.current, event.target) &&\n !nodeBelongs(dropdownContentRef.current, event.target) &&\n !nodeBelongs(dropdownFooterRef.current, event.target)\n ) {\n closeDropdown();\n }\n };\n\n window.addEventListener('mousedown', clickListener);\n\n return () => {\n window.removeEventListener('mousedown', clickListener);\n };\n\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [open]);\n\n const handleDropdownKeyDown: React.KeyboardEventHandler = event => {\n // Handle ESC key from focusable elements inside the dropdown (e.g., recovery button)\n // but NOT from the input itself (that's handled by handleKeyDown)\n const isFromInput = event.target === inputRef.current || nodeBelongs(inputRef.current, event.target);\n\n if (event.key === 'Escape' && !isFromInput) {\n event.stopPropagation();\n event.preventDefault();\n // Use shared ESC handler with focus restoration since ESC came from dropdown element\n handleEscapeKey(true);\n }\n };\n\n return (\n <div {...baseProps} className={clsx(baseProps.className, styles.root)} ref={__internalRootRef}>\n <InternalDropdown\n minWidth={getDropdownMinWidth({ expandToViewport, triggerWidth, dropdownWidth })}\n maxWidth={getBreakpointValue('xxs')} // AWSUI-19898\n contentKey={dropdownContentKey}\n onFocus={handleFocus}\n onBlur={handleBlur}\n trigger={\n <InternalInput\n type=\"visualSearch\"\n value={value}\n onChange={event => handleChange(event.detail.value)}\n __onDelayedInput={event => handleDelayedInput(event.detail.value)}\n onKeyDown={handleKeyDown}\n onKeyUp={onKeyUp}\n disabled={disabled}\n disableBrowserAutocorrect={disableBrowserAutocorrect}\n readOnly={readOnly}\n ariaRequired={ariaRequired}\n clearAriaLabel={clearAriaLabel}\n ref={inputRef}\n autoComplete={false}\n nativeInputAttributes={processAttributes(nativeAttributes, nativeInputAttributes, 'Autosuggest')}\n __skipNativeAttributesWarnings={Object.keys(nativeAttributes)}\n style={style}\n {...formFieldContext}\n />\n }\n onMouseDown={handleDropdownMouseDown}\n open={open && (!!dropdownContent || !!dropdownFooter)}\n footer={\n dropdownFooterRef && (\n <div ref={dropdownFooterRef} className={styles['dropdown-footer']} onKeyDown={handleDropdownKeyDown}>\n <ResetGroupedControlContext>\n {open && dropdownFooter ? dropdownFooter : null}\n </ResetGroupedControlContext>\n </div>\n )\n }\n expandToViewport={expandToViewport}\n loopFocus={loopFocus}\n content={\n open && dropdownContent ? (\n <div ref={dropdownContentRef} className={styles['dropdown-content']}>\n <ResetGroupedControlContext>{dropdownContent}</ResetGroupedControlContext>\n </div>\n ) : null\n }\n />\n </div>\n );\n }\n);\n\nexport default AutosuggestInput;\n"]}
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import { BaseComponentProps } from '../../../types/base-component';
|
|
3
3
|
import { BaseKeyDetail, CancelableEventHandler } from '../../../types/events';
|
|
4
|
+
import { GroupedControlContextProps } from '../../context/control-group-context';
|
|
4
5
|
export interface ButtonTriggerProps extends BaseComponentProps {
|
|
5
6
|
children?: React.ReactNode;
|
|
6
7
|
pressed?: boolean;
|
|
@@ -25,6 +26,7 @@ export interface ButtonTriggerProps extends BaseComponentProps {
|
|
|
25
26
|
}>;
|
|
26
27
|
hasCustomContent?: boolean;
|
|
27
28
|
autoFocus?: boolean;
|
|
29
|
+
groupedControlProps?: GroupedControlContextProps;
|
|
28
30
|
}
|
|
29
31
|
export declare namespace ButtonTriggerProps {
|
|
30
32
|
interface Ref {
|
|
@@ -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;AAOpD,OAAO,EAAE,kBAAkB,EAAE,MAAM,+BAA+B,CAAC;AACnE,OAAO,EAAE,aAAa,EAAE,sBAAsB,EAAE,MAAM,uBAAuB,CAAC;
|
|
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;AAOpD,OAAO,EAAE,kBAAkB,EAAE,MAAM,+BAA+B,CAAC;AACnE,OAAO,EAAE,aAAa,EAAE,sBAAsB,EAAE,MAAM,uBAAuB,CAAC;AAE9E,OAAO,EAAE,0BAA0B,EAAE,MAAM,qCAAqC,CAAC;AAWjF,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,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,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,mBAAmB,CAAC,EAAE,0BAA0B,CAAC;CAClD;AA4GD,yBAAiB,kBAAkB,CAAC;IAClC,UAAiB,GAAG;QAClB,KAAK,IAAI,IAAI,CAAC;KACf;CACF;;AAED,wBAA+C"}
|
|
@@ -7,14 +7,15 @@ import { getAnalyticsMetadataAttribute } from '@cloudscape-design/component-tool
|
|
|
7
7
|
import InternalIcon from '../../../icon/internal';
|
|
8
8
|
import { getBaseProps } from '../../base-component';
|
|
9
9
|
import { fireCancelableEvent, fireKeyboardEvent } from '../../events';
|
|
10
|
+
import { getGroupedControlClassNames } from '../control-group/grouped-control-styles';
|
|
10
11
|
import analyticsSelectors from './analytics-metadata/styles.css.js';
|
|
11
12
|
import styles from './styles.css.js';
|
|
12
|
-
const ButtonTrigger = ({ children, pressed, hideCaret = false, disabled = false, readOnly = false, invalid = false, warning = false, inlineTokens, inFilteringToken, ariaHasPopup, ariaLabelledby, ariaDescribedby, ariaControls, onKeyDown, onKeyUp, onMouseDown, onClick, onFocus, onBlur, hasCustomContent = false, autoFocus, ...restProps }, ref) => {
|
|
13
|
+
const ButtonTrigger = ({ children, pressed, hideCaret = false, disabled = false, readOnly = false, invalid = false, warning = false, inlineTokens, inFilteringToken, ariaHasPopup, ariaLabelledby, ariaDescribedby, ariaControls, onKeyDown, onKeyUp, onMouseDown, onClick, onFocus, onBlur, hasCustomContent = false, autoFocus, groupedControlProps = { position: null, direction: 'horizontal' }, ...restProps }, ref) => {
|
|
13
14
|
const baseProps = getBaseProps(restProps);
|
|
14
15
|
let attributes = {
|
|
15
16
|
...baseProps,
|
|
16
17
|
type: 'button',
|
|
17
|
-
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 && styles[`in-filtering-token-${inFilteringToken}`], inlineTokens && styles['inline-tokens'], !!hasCustomContent && styles['custom-option']),
|
|
18
|
+
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 && styles[`in-filtering-token-${inFilteringToken}`], inlineTokens && styles['inline-tokens'], ...getGroupedControlClassNames(styles, groupedControlProps), !!hasCustomContent && styles['custom-option']),
|
|
18
19
|
disabled: disabled,
|
|
19
20
|
'aria-expanded': pressed,
|
|
20
21
|
'aria-labelledby': ariaLabelledby,
|
|
@@ -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,aAAa,EAAE,KAAK,EAAE,MAAM,+CAA+C,CAAC;AACrF,OAAO,EAAE,6BAA6B,EAAE,MAAM,kEAAkE,CAAC;AAEjH,OAAO,YAAY,MAAM,wBAAwB,CAAC;AAGlD,OAAO,EAAE,YAAY,EAAE,MAAM,sBAAsB,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 { isThemeActive, Theme } from '@cloudscape-design/component-toolkit/internal';\nimport { getAnalyticsMetadataAttribute } from '@cloudscape-design/component-toolkit/internal/analytics-metadata';\n\nimport InternalIcon from '../../../icon/internal';\nimport { BaseComponentProps } from '../../../types/base-component';\nimport { BaseKeyDetail, CancelableEventHandler } from '../../../types/events';\nimport { getBaseProps } from '../../base-component';\nimport { GroupedControlContextProps } from '../../context/control-group-context';\nimport { fireCancelableEvent, fireKeyboardEvent } from '../../events';\nimport { getGroupedControlClassNames } from '../control-group/grouped-control-styles';\nimport {\n GeneratedAnalyticsMetadataButtonTriggerCollapse,\n GeneratedAnalyticsMetadataButtonTriggerExpand,\n} 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 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 hasCustomContent?: boolean;\n autoFocus?: boolean;\n groupedControlProps?: GroupedControlContextProps;\n}\n\nconst ButtonTrigger = (\n {\n children,\n pressed,\n hideCaret = false,\n disabled = false,\n readOnly = false,\n invalid = false,\n warning = false,\n inlineTokens,\n inFilteringToken,\n ariaHasPopup,\n ariaLabelledby,\n ariaDescribedby,\n ariaControls,\n onKeyDown,\n onKeyUp,\n onMouseDown,\n onClick,\n onFocus,\n onBlur,\n hasCustomContent = false,\n autoFocus,\n groupedControlProps = { position: null, direction: 'horizontal' },\n ...restProps\n }: ButtonTriggerProps,\n ref: React.Ref<HTMLButtonElement>\n) => {\n const baseProps = getBaseProps(restProps);\n\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'],\n inFilteringToken && styles[`in-filtering-token-${inFilteringToken}`],\n inlineTokens && styles['inline-tokens'],\n ...getGroupedControlClassNames(styles, groupedControlProps),\n !!hasCustomContent && styles['custom-option']\n ),\n disabled: disabled,\n 'aria-expanded': pressed,\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:\n | GeneratedAnalyticsMetadataButtonTriggerExpand\n | GeneratedAnalyticsMetadataButtonTriggerCollapse = {\n action: !pressed ? 'expand' : 'collapse',\n detail: {\n label: { root: 'self' },\n },\n };\n\n return (\n <button\n ref={ref}\n {...attributes}\n data-awsui-motion-trigger=\"hover\"\n {...(disabled || readOnly ? {} : getAnalyticsMetadataAttribute(analyticsMetadata))}\n >\n {children}\n {!hideCaret && (\n <span className={styles.arrow}>\n <InternalIcon\n name={isThemeActive(Theme.OneTheme) ? 'angle-down' : 'caret-down-filled'}\n size={isThemeActive(Theme.OneTheme) ? 'x-small' : 'normal'}\n variant={disabled || readOnly ? 'disabled' : 'normal'}\n nativeAttributes={{ 'data-awsui-motion-target': '' }}\n />\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,19 +1,26 @@
|
|
|
1
1
|
|
|
2
2
|
import './styles.scoped.css';
|
|
3
3
|
export default {
|
|
4
|
-
"button-trigger": "awsui_button-
|
|
5
|
-
"arrow": "
|
|
6
|
-
"in-filtering-token-root": "awsui_in-filtering-token-
|
|
7
|
-
"in-filtering-token-nested": "awsui_in-filtering-token-
|
|
8
|
-
"has-caret": "awsui_has-
|
|
9
|
-
"placeholder": "
|
|
10
|
-
"pressed": "
|
|
11
|
-
"disabled": "
|
|
12
|
-
"in-filtering-token": "awsui_in-filtering-
|
|
13
|
-
"readonly": "
|
|
14
|
-
"invalid": "
|
|
15
|
-
"warning": "
|
|
16
|
-
"custom-option": "awsui_custom-
|
|
17
|
-
"inline-tokens": "awsui_inline-
|
|
4
|
+
"button-trigger": "awsui_button-trigger_18eso_15t5f_17",
|
|
5
|
+
"arrow": "awsui_arrow_18eso_15t5f_17",
|
|
6
|
+
"in-filtering-token-root": "awsui_in-filtering-token-root_18eso_15t5f_77",
|
|
7
|
+
"in-filtering-token-nested": "awsui_in-filtering-token-nested_18eso_15t5f_77",
|
|
8
|
+
"has-caret": "awsui_has-caret_18eso_15t5f_113",
|
|
9
|
+
"placeholder": "awsui_placeholder_18eso_15t5f_116",
|
|
10
|
+
"pressed": "awsui_pressed_18eso_15t5f_129",
|
|
11
|
+
"disabled": "awsui_disabled_18eso_15t5f_132",
|
|
12
|
+
"in-filtering-token": "awsui_in-filtering-token_18eso_15t5f_77",
|
|
13
|
+
"readonly": "awsui_readonly_18eso_15t5f_153",
|
|
14
|
+
"invalid": "awsui_invalid_18eso_15t5f_174",
|
|
15
|
+
"warning": "awsui_warning_18eso_15t5f_183",
|
|
16
|
+
"custom-option": "awsui_custom-option_18eso_15t5f_192",
|
|
17
|
+
"inline-tokens": "awsui_inline-tokens_18eso_15t5f_197",
|
|
18
|
+
"grouped": "awsui_grouped_18eso_15t5f_200",
|
|
19
|
+
"grouped-horizontal-first": "awsui_grouped-horizontal-first_18eso_15t5f_206",
|
|
20
|
+
"grouped-horizontal-middle": "awsui_grouped-horizontal-middle_18eso_15t5f_210",
|
|
21
|
+
"grouped-horizontal-last": "awsui_grouped-horizontal-last_18eso_15t5f_216",
|
|
22
|
+
"grouped-vertical-first": "awsui_grouped-vertical-first_18eso_15t5f_220",
|
|
23
|
+
"grouped-vertical-middle": "awsui_grouped-vertical-middle_18eso_15t5f_224",
|
|
24
|
+
"grouped-vertical-last": "awsui_grouped-vertical-last_18eso_15t5f_230"
|
|
18
25
|
};
|
|
19
26
|
|
|
@@ -14,21 +14,21 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
|
|
|
14
14
|
Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
|
|
15
15
|
SPDX-License-Identifier: Apache-2.0
|
|
16
16
|
*/
|
|
17
|
-
.awsui_button-
|
|
17
|
+
.awsui_button-trigger_18eso_15t5f_17 > .awsui_arrow_18eso_15t5f_17:not(#\9) {
|
|
18
18
|
transition: transform var(--motion-duration-rotate-180-69rh8b, 135ms) var(--motion-easing-rotate-180-nmpsiw, cubic-bezier(0.165, 0.84, 0.44, 1));
|
|
19
19
|
}
|
|
20
20
|
@media (prefers-reduced-motion: reduce) {
|
|
21
|
-
.awsui_button-
|
|
21
|
+
.awsui_button-trigger_18eso_15t5f_17 > .awsui_arrow_18eso_15t5f_17:not(#\9) {
|
|
22
22
|
animation: none;
|
|
23
23
|
transition: none;
|
|
24
24
|
}
|
|
25
25
|
}
|
|
26
|
-
.awsui-motion-disabled .awsui_button-
|
|
26
|
+
.awsui-motion-disabled .awsui_button-trigger_18eso_15t5f_17 > .awsui_arrow_18eso_15t5f_17:not(#\9), .awsui-mode-entering .awsui_button-trigger_18eso_15t5f_17 > .awsui_arrow_18eso_15t5f_17:not(#\9) {
|
|
27
27
|
animation: none;
|
|
28
28
|
transition: none;
|
|
29
29
|
}
|
|
30
30
|
|
|
31
|
-
.awsui_button-
|
|
31
|
+
.awsui_button-trigger_18eso_15t5f_17:not(#\9) {
|
|
32
32
|
border-collapse: separate;
|
|
33
33
|
border-spacing: 0;
|
|
34
34
|
box-sizing: border-box;
|
|
@@ -74,7 +74,7 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
|
|
|
74
74
|
border-inline: var(--border-width-field-2365x3, 1px) solid var(--color-border-input-default-jtkw9d, #687078);
|
|
75
75
|
min-block-size: var(--size-vertical-input-5g8cy5, 32px);
|
|
76
76
|
}
|
|
77
|
-
.awsui_button-
|
|
77
|
+
.awsui_button-trigger_18eso_15t5f_17.awsui_in-filtering-token-root_18eso_15t5f_77:not(#\9), .awsui_button-trigger_18eso_15t5f_17.awsui_in-filtering-token-nested_18eso_15t5f_77:not(#\9) {
|
|
78
78
|
padding-block: 0px;
|
|
79
79
|
padding-inline: var(--space-field-horizontal-anki5k, 8px);
|
|
80
80
|
border-block-width: var(--border-width-token-p4a0gu, 1px);
|
|
@@ -85,14 +85,14 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
|
|
|
85
85
|
block-size: 100%;
|
|
86
86
|
min-block-size: unset;
|
|
87
87
|
}
|
|
88
|
-
body[data-awsui-focus-visible=true] .awsui_button-
|
|
88
|
+
body[data-awsui-focus-visible=true] .awsui_button-trigger_18eso_15t5f_17.awsui_in-filtering-token-root_18eso_15t5f_77:not(#\9):focus, body[data-awsui-focus-visible=true] .awsui_button-trigger_18eso_15t5f_17.awsui_in-filtering-token-nested_18eso_15t5f_77:not(#\9):focus {
|
|
89
89
|
position: relative;
|
|
90
90
|
}
|
|
91
|
-
body[data-awsui-focus-visible=true] .awsui_button-
|
|
91
|
+
body[data-awsui-focus-visible=true] .awsui_button-trigger_18eso_15t5f_17.awsui_in-filtering-token-root_18eso_15t5f_77:not(#\9):focus, body[data-awsui-focus-visible=true] .awsui_button-trigger_18eso_15t5f_17.awsui_in-filtering-token-nested_18eso_15t5f_77:not(#\9):focus {
|
|
92
92
|
outline: 2px dotted transparent;
|
|
93
93
|
outline-offset: calc(var(--space-filtering-token-operation-select-focus-outline-gutter-677p72, 0px) - 1px);
|
|
94
94
|
}
|
|
95
|
-
body[data-awsui-focus-visible=true] .awsui_button-
|
|
95
|
+
body[data-awsui-focus-visible=true] .awsui_button-trigger_18eso_15t5f_17.awsui_in-filtering-token-root_18eso_15t5f_77:not(#\9):focus::before, body[data-awsui-focus-visible=true] .awsui_button-trigger_18eso_15t5f_17.awsui_in-filtering-token-nested_18eso_15t5f_77:not(#\9):focus::before {
|
|
96
96
|
content: " ";
|
|
97
97
|
display: block;
|
|
98
98
|
position: absolute;
|
|
@@ -106,40 +106,40 @@ body[data-awsui-focus-visible=true] .awsui_button-trigger_18eso_tx2n8_17.awsui_i
|
|
|
106
106
|
border-end-end-radius: var(--border-radius-control-default-focus-ring-akwhsf, 2px);
|
|
107
107
|
box-shadow: 0 0 0 2px var(--color-border-item-focused-sewkzn, #0073bb);
|
|
108
108
|
}
|
|
109
|
-
.awsui_button-
|
|
109
|
+
.awsui_button-trigger_18eso_15t5f_17.awsui_in-filtering-token-nested_18eso_15t5f_77:not(#\9) {
|
|
110
110
|
border-start-start-radius: calc(var(--border-radius-input-k1q34z, 2px) / 2);
|
|
111
111
|
border-end-start-radius: calc(var(--border-radius-input-k1q34z, 2px) / 2);
|
|
112
112
|
}
|
|
113
|
-
.awsui_button-
|
|
113
|
+
.awsui_button-trigger_18eso_15t5f_17.awsui_has-caret_18eso_15t5f_113:not(#\9) {
|
|
114
114
|
padding-inline-end: var(--space-field-icon-offset-2wydv9, 32px);
|
|
115
115
|
}
|
|
116
|
-
.awsui_button-
|
|
116
|
+
.awsui_button-trigger_18eso_15t5f_17 > .awsui_placeholder_18eso_15t5f_116:not(#\9) {
|
|
117
117
|
color: var(--color-text-input-placeholder-l6klmg, #687078);
|
|
118
118
|
font-style: italic;
|
|
119
119
|
}
|
|
120
|
-
.awsui_button-
|
|
120
|
+
.awsui_button-trigger_18eso_15t5f_17 > .awsui_arrow_18eso_15t5f_17:not(#\9) {
|
|
121
121
|
position: absolute;
|
|
122
122
|
inset-inline-end: var(--space-field-horizontal-anki5k, 8px);
|
|
123
123
|
inset-block-start: calc(50% - var(--line-height-body-m-5xw6xo, 22px) / 2);
|
|
124
124
|
color: var(--color-text-button-inline-icon-default-yujzfi, #545b64);
|
|
125
125
|
}
|
|
126
|
-
.awsui_button-
|
|
126
|
+
.awsui_button-trigger_18eso_15t5f_17:not(#\9):hover > .awsui_arrow_18eso_15t5f_17 {
|
|
127
127
|
color: var(--color-text-button-inline-icon-hover-kxgkw7, #16191f);
|
|
128
128
|
}
|
|
129
|
-
.awsui_button-
|
|
129
|
+
.awsui_button-trigger_18eso_15t5f_17.awsui_pressed_18eso_15t5f_129 > .awsui_arrow_18eso_15t5f_17:not(#\9) {
|
|
130
130
|
transform: rotate(-180deg);
|
|
131
131
|
}
|
|
132
|
-
.awsui_button-
|
|
132
|
+
.awsui_button-trigger_18eso_15t5f_17.awsui_disabled_18eso_15t5f_132:not(#\9) {
|
|
133
133
|
background-color: var(--color-background-input-disabled-pyvhb1, #eaeded);
|
|
134
134
|
border-block: var(--border-width-field-2365x3, 1px) solid var(--color-border-input-disabled-5m31k6, #eaeded);
|
|
135
135
|
border-inline: var(--border-width-field-2365x3, 1px) solid var(--color-border-input-disabled-5m31k6, #eaeded);
|
|
136
136
|
color: var(--color-text-input-disabled-s4k7tb, #879596);
|
|
137
137
|
cursor: auto;
|
|
138
138
|
}
|
|
139
|
-
.awsui_button-
|
|
139
|
+
.awsui_button-trigger_18eso_15t5f_17.awsui_disabled_18eso_15t5f_132 > .awsui_arrow_18eso_15t5f_17:not(#\9) {
|
|
140
140
|
color: var(--color-text-button-inline-icon-disabled-yeab6p, #aab7b8);
|
|
141
141
|
}
|
|
142
|
-
.awsui_button-
|
|
142
|
+
.awsui_button-trigger_18eso_15t5f_17.awsui_disabled_18eso_15t5f_132.awsui_in-filtering-token_18eso_15t5f_77:not(#\9) {
|
|
143
143
|
background-color: var(--color-background-input-disabled-pyvhb1, #eaeded);
|
|
144
144
|
border-block: var(--border-width-token-p4a0gu, 1px) solid var(--color-border-input-disabled-5m31k6, #eaeded);
|
|
145
145
|
border-inline: var(--border-width-token-p4a0gu, 1px) solid var(--color-border-input-disabled-5m31k6, #eaeded);
|
|
@@ -147,58 +147,88 @@ body[data-awsui-focus-visible=true] .awsui_button-trigger_18eso_tx2n8_17.awsui_i
|
|
|
147
147
|
cursor: auto;
|
|
148
148
|
border-color: var(--color-border-control-disabled-dh8zaw, #d5dbdb);
|
|
149
149
|
}
|
|
150
|
-
.awsui_button-
|
|
150
|
+
.awsui_button-trigger_18eso_15t5f_17.awsui_disabled_18eso_15t5f_132 > .awsui_placeholder_18eso_15t5f_116:not(#\9) {
|
|
151
151
|
color: var(--color-text-input-placeholder-disabled-8cf69l, #687078);
|
|
152
152
|
}
|
|
153
|
-
.awsui_button-
|
|
153
|
+
.awsui_button-trigger_18eso_15t5f_17.awsui_readonly_18eso_15t5f_153:not(#\9):not(.awsui_button-trigger_18eso_15t5f_17.awsui_disabled_18eso_15t5f_132):not(.awsui_button-trigger_18eso_15t5f_17.awsui_in-filtering-token_18eso_15t5f_77) {
|
|
154
154
|
background-color: var(--color-background-input-default-1u0v1p, #ffffff);
|
|
155
155
|
border-block: var(--border-width-field-2365x3, 1px) solid var(--color-border-input-disabled-5m31k6, #eaeded);
|
|
156
156
|
border-inline: var(--border-width-field-2365x3, 1px) solid var(--color-border-input-disabled-5m31k6, #eaeded);
|
|
157
157
|
}
|
|
158
|
-
.awsui_button-
|
|
158
|
+
.awsui_button-trigger_18eso_15t5f_17.awsui_readonly_18eso_15t5f_153:not(#\9):not(.awsui_button-trigger_18eso_15t5f_17.awsui_disabled_18eso_15t5f_132) {
|
|
159
159
|
-webkit-user-select: text;
|
|
160
160
|
user-select: text;
|
|
161
161
|
}
|
|
162
|
-
.awsui_button-
|
|
162
|
+
.awsui_button-trigger_18eso_15t5f_17:not(#\9):focus {
|
|
163
163
|
outline: none;
|
|
164
164
|
text-decoration: none;
|
|
165
165
|
}
|
|
166
|
-
body[data-awsui-focus-visible=true] .awsui_button-
|
|
166
|
+
body[data-awsui-focus-visible=true] .awsui_button-trigger_18eso_15t5f_17:not(#\9):not(.awsui_in-filtering-token_18eso_15t5f_77):focus {
|
|
167
167
|
outline: 2px dotted transparent;
|
|
168
168
|
border-block: var(--border-width-field-2365x3, 1px) solid var(--color-border-input-focused-ppoq5z, #0073bb);
|
|
169
169
|
border-inline: var(--border-width-field-2365x3, 1px) solid var(--color-border-input-focused-ppoq5z, #0073bb);
|
|
170
|
-
border-start-start-radius: var(--border-radius-input-k1q34z, 2px);
|
|
171
|
-
border-start-end-radius: var(--border-radius-input-k1q34z, 2px);
|
|
172
|
-
border-end-start-radius: var(--border-radius-input-k1q34z, 2px);
|
|
173
|
-
border-end-end-radius: var(--border-radius-input-k1q34z, 2px);
|
|
174
170
|
box-shadow: 0 0 0 var(--border-control-focus-ring-shadow-spread-iijyo6, 1px) var(--color-border-item-focused-sewkzn, #0073bb);
|
|
175
171
|
}
|
|
176
|
-
.awsui_button-
|
|
172
|
+
.awsui_button-trigger_18eso_15t5f_17:not(#\9):not(.awsui_in-filtering-token_18eso_15t5f_77):invalid {
|
|
177
173
|
box-shadow: none;
|
|
178
174
|
}
|
|
179
|
-
.awsui_button-
|
|
175
|
+
.awsui_button-trigger_18eso_15t5f_17:not(#\9):not(.awsui_in-filtering-token_18eso_15t5f_77).awsui_invalid_18eso_15t5f_174, .awsui_button-trigger_18eso_15t5f_17:not(#\9):not(.awsui_in-filtering-token_18eso_15t5f_77).awsui_invalid_18eso_15t5f_174:focus {
|
|
180
176
|
color: var(--color-text-status-error-ri38gt, #d13212);
|
|
181
177
|
border-color: var(--color-text-status-error-ri38gt, #d13212);
|
|
182
178
|
padding-inline-start: calc(var(--space-field-horizontal-anki5k, 8px) - (var(--border-invalid-width-b183os, 4px) - var(--border-width-field-2365x3, 1px)));
|
|
183
179
|
border-inline-start-width: var(--border-invalid-width-b183os, 4px);
|
|
184
180
|
}
|
|
185
|
-
.awsui_button-
|
|
181
|
+
.awsui_button-trigger_18eso_15t5f_17:not(#\9):not(.awsui_in-filtering-token_18eso_15t5f_77).awsui_invalid_18eso_15t5f_174:focus, .awsui_button-trigger_18eso_15t5f_17:not(#\9):not(.awsui_in-filtering-token_18eso_15t5f_77).awsui_invalid_18eso_15t5f_174:focus:focus {
|
|
186
182
|
box-shadow: 0 0 0 var(--border-control-invalid-focus-ring-shadow-spread-bl5nmx, 1px) var(--color-border-item-focused-sewkzn, #0073bb);
|
|
187
183
|
}
|
|
188
|
-
.awsui_button-
|
|
184
|
+
.awsui_button-trigger_18eso_15t5f_17:not(#\9):not(.awsui_in-filtering-token_18eso_15t5f_77).awsui_warning_18eso_15t5f_183, .awsui_button-trigger_18eso_15t5f_17:not(#\9):not(.awsui_in-filtering-token_18eso_15t5f_77).awsui_warning_18eso_15t5f_183:focus {
|
|
189
185
|
color: var(--color-text-status-warning-fabq6h, #906806);
|
|
190
186
|
border-color: var(--color-text-status-warning-fabq6h, #906806);
|
|
191
187
|
padding-inline-start: calc(var(--space-field-horizontal-anki5k, 8px) - (var(--border-invalid-width-b183os, 4px) - var(--border-width-field-2365x3, 1px)));
|
|
192
188
|
border-inline-start-width: var(--border-invalid-width-b183os, 4px);
|
|
193
189
|
}
|
|
194
|
-
.awsui_button-
|
|
190
|
+
.awsui_button-trigger_18eso_15t5f_17:not(#\9):not(.awsui_in-filtering-token_18eso_15t5f_77).awsui_warning_18eso_15t5f_183:focus, .awsui_button-trigger_18eso_15t5f_17:not(#\9):not(.awsui_in-filtering-token_18eso_15t5f_77).awsui_warning_18eso_15t5f_183:focus:focus {
|
|
195
191
|
box-shadow: 0 0 0 var(--border-control-invalid-focus-ring-shadow-spread-bl5nmx, 1px) var(--color-border-item-focused-sewkzn, #0073bb);
|
|
196
192
|
}
|
|
197
|
-
.awsui_button-
|
|
193
|
+
.awsui_button-trigger_18eso_15t5f_17.awsui_custom-option_18eso_15t5f_192:not(#\9) {
|
|
198
194
|
padding-block: 0;
|
|
199
195
|
padding-inline-start: 0;
|
|
200
196
|
overflow: clip;
|
|
201
197
|
}
|
|
202
|
-
.awsui_button-
|
|
198
|
+
.awsui_button-trigger_18eso_15t5f_17.awsui_inline-tokens_18eso_15t5f_197:not(#\9) {
|
|
203
199
|
padding-block: 0;
|
|
200
|
+
}
|
|
201
|
+
.awsui_button-trigger_18eso_15t5f_17.awsui_grouped_18eso_15t5f_200:not(#\9) {
|
|
202
|
+
border-start-start-radius: var(--border-radius-input-k1q34z, 2px);
|
|
203
|
+
border-start-end-radius: var(--border-radius-input-k1q34z, 2px);
|
|
204
|
+
border-end-start-radius: var(--border-radius-input-k1q34z, 2px);
|
|
205
|
+
border-end-end-radius: var(--border-radius-input-k1q34z, 2px);
|
|
206
|
+
}
|
|
207
|
+
.awsui_button-trigger_18eso_15t5f_17.awsui_grouped-horizontal-first_18eso_15t5f_206:not(#\9) {
|
|
208
|
+
border-start-end-radius: 0;
|
|
209
|
+
border-end-end-radius: 0;
|
|
210
|
+
}
|
|
211
|
+
.awsui_button-trigger_18eso_15t5f_17.awsui_grouped-horizontal-middle_18eso_15t5f_210:not(#\9) {
|
|
212
|
+
border-start-start-radius: 0;
|
|
213
|
+
border-start-end-radius: 0;
|
|
214
|
+
border-end-start-radius: 0;
|
|
215
|
+
border-end-end-radius: 0;
|
|
216
|
+
}
|
|
217
|
+
.awsui_button-trigger_18eso_15t5f_17.awsui_grouped-horizontal-last_18eso_15t5f_216:not(#\9) {
|
|
218
|
+
border-start-start-radius: 0;
|
|
219
|
+
border-end-start-radius: 0;
|
|
220
|
+
}
|
|
221
|
+
.awsui_button-trigger_18eso_15t5f_17.awsui_grouped-vertical-first_18eso_15t5f_220:not(#\9) {
|
|
222
|
+
border-end-start-radius: 0;
|
|
223
|
+
border-end-end-radius: 0;
|
|
224
|
+
}
|
|
225
|
+
.awsui_button-trigger_18eso_15t5f_17.awsui_grouped-vertical-middle_18eso_15t5f_224:not(#\9) {
|
|
226
|
+
border-start-start-radius: 0;
|
|
227
|
+
border-start-end-radius: 0;
|
|
228
|
+
border-end-start-radius: 0;
|
|
229
|
+
border-end-end-radius: 0;
|
|
230
|
+
}
|
|
231
|
+
.awsui_button-trigger_18eso_15t5f_17.awsui_grouped-vertical-last_18eso_15t5f_230:not(#\9) {
|
|
232
|
+
border-start-start-radius: 0;
|
|
233
|
+
border-start-end-radius: 0;
|
|
204
234
|
}
|
|
@@ -2,19 +2,26 @@
|
|
|
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-root": "awsui_in-filtering-token-
|
|
8
|
-
"in-filtering-token-nested": "awsui_in-filtering-token-
|
|
9
|
-
"has-caret": "awsui_has-
|
|
10
|
-
"placeholder": "
|
|
11
|
-
"pressed": "
|
|
12
|
-
"disabled": "
|
|
13
|
-
"in-filtering-token": "awsui_in-filtering-
|
|
14
|
-
"readonly": "
|
|
15
|
-
"invalid": "
|
|
16
|
-
"warning": "
|
|
17
|
-
"custom-option": "awsui_custom-
|
|
18
|
-
"inline-tokens": "awsui_inline-
|
|
5
|
+
"button-trigger": "awsui_button-trigger_18eso_15t5f_17",
|
|
6
|
+
"arrow": "awsui_arrow_18eso_15t5f_17",
|
|
7
|
+
"in-filtering-token-root": "awsui_in-filtering-token-root_18eso_15t5f_77",
|
|
8
|
+
"in-filtering-token-nested": "awsui_in-filtering-token-nested_18eso_15t5f_77",
|
|
9
|
+
"has-caret": "awsui_has-caret_18eso_15t5f_113",
|
|
10
|
+
"placeholder": "awsui_placeholder_18eso_15t5f_116",
|
|
11
|
+
"pressed": "awsui_pressed_18eso_15t5f_129",
|
|
12
|
+
"disabled": "awsui_disabled_18eso_15t5f_132",
|
|
13
|
+
"in-filtering-token": "awsui_in-filtering-token_18eso_15t5f_77",
|
|
14
|
+
"readonly": "awsui_readonly_18eso_15t5f_153",
|
|
15
|
+
"invalid": "awsui_invalid_18eso_15t5f_174",
|
|
16
|
+
"warning": "awsui_warning_18eso_15t5f_183",
|
|
17
|
+
"custom-option": "awsui_custom-option_18eso_15t5f_192",
|
|
18
|
+
"inline-tokens": "awsui_inline-tokens_18eso_15t5f_197",
|
|
19
|
+
"grouped": "awsui_grouped_18eso_15t5f_200",
|
|
20
|
+
"grouped-horizontal-first": "awsui_grouped-horizontal-first_18eso_15t5f_206",
|
|
21
|
+
"grouped-horizontal-middle": "awsui_grouped-horizontal-middle_18eso_15t5f_210",
|
|
22
|
+
"grouped-horizontal-last": "awsui_grouped-horizontal-last_18eso_15t5f_216",
|
|
23
|
+
"grouped-vertical-first": "awsui_grouped-vertical-first_18eso_15t5f_220",
|
|
24
|
+
"grouped-vertical-middle": "awsui_grouped-vertical-middle_18eso_15t5f_224",
|
|
25
|
+
"grouped-vertical-last": "awsui_grouped-vertical-last_18eso_15t5f_230"
|
|
19
26
|
};
|
|
20
27
|
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
import { GroupedControlContextProps } from '../../context/control-group-context';
|
|
2
|
+
/**
|
|
3
|
+
* Builds the shared grouped-control CSS classes for a consumer.
|
|
4
|
+
*
|
|
5
|
+
* Returns an empty list when the control is not in a group (falsy `position`),
|
|
6
|
+
* otherwise the `grouped` base class plus the position/direction modifier.
|
|
7
|
+
* Spread the result into `clsx(...)` at the call site.
|
|
8
|
+
*/
|
|
9
|
+
export declare function getGroupedControlClassNames(styles: Record<string, string>, { position, direction }: GroupedControlContextProps): string[];
|
|
10
|
+
//# sourceMappingURL=grouped-control-styles.d.ts.map
|
package/lib/internal/template/internal/components/control-group/grouped-control-styles.d.ts.map
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"grouped-control-styles.d.ts","sourceRoot":"","sources":["../../../../../src/internal/components/control-group/grouped-control-styles.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,0BAA0B,EAAE,MAAM,qCAAqC,CAAC;AAEjF;;;;;;GAMG;AACH,wBAAgB,2BAA2B,CACzC,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,EAC9B,EAAE,QAAQ,EAAE,SAAS,EAAE,EAAE,0BAA0B,GAClD,MAAM,EAAE,CAKV"}
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Builds the shared grouped-control CSS classes for a consumer.
|
|
3
|
+
*
|
|
4
|
+
* Returns an empty list when the control is not in a group (falsy `position`),
|
|
5
|
+
* otherwise the `grouped` base class plus the position/direction modifier.
|
|
6
|
+
* Spread the result into `clsx(...)` at the call site.
|
|
7
|
+
*/
|
|
8
|
+
export function getGroupedControlClassNames(styles, { position, direction }) {
|
|
9
|
+
if (!position) {
|
|
10
|
+
return [];
|
|
11
|
+
}
|
|
12
|
+
return [styles.grouped, styles[`grouped-${direction}-${position}`]];
|
|
13
|
+
}
|
|
14
|
+
//# sourceMappingURL=grouped-control-styles.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"grouped-control-styles.js","sourceRoot":"","sources":["../../../../../src/internal/components/control-group/grouped-control-styles.ts"],"names":[],"mappings":"AAIA;;;;;;GAMG;AACH,MAAM,UAAU,2BAA2B,CACzC,MAA8B,EAC9B,EAAE,QAAQ,EAAE,SAAS,EAA8B;IAEnD,IAAI,CAAC,QAAQ,EAAE,CAAC;QACd,OAAO,EAAE,CAAC;IACZ,CAAC;IACD,OAAO,CAAC,MAAM,CAAC,OAAO,EAAE,MAAM,CAAC,WAAW,SAAS,IAAI,QAAQ,EAAE,CAAC,CAAC,CAAC;AACtE,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport { GroupedControlContextProps } from '../../context/control-group-context';\n\n/**\n * Builds the shared grouped-control CSS classes for a consumer.\n *\n * Returns an empty list when the control is not in a group (falsy `position`),\n * otherwise the `grouped` base class plus the position/direction modifier.\n * Spread the result into `clsx(...)` at the call site.\n */\nexport function getGroupedControlClassNames(\n styles: Record<string, string>,\n { position, direction }: GroupedControlContextProps\n): string[] {\n if (!position) {\n return [];\n }\n return [styles.grouped, styles[`grouped-${direction}-${position}`]];\n}\n"]}
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { BaseComponentProps } from '../../../types/base-component';
|
|
3
|
+
import { GroupedControlDirection } from '../../context/control-group-context';
|
|
4
|
+
export interface InternalControlGroupProps extends BaseComponentProps {
|
|
5
|
+
children?: React.ReactNode;
|
|
6
|
+
direction?: GroupedControlDirection;
|
|
7
|
+
}
|
|
8
|
+
export default function InternalControlGroup({ children, direction, ...props }: InternalControlGroupProps): JSX.Element;
|
|
9
|
+
//# sourceMappingURL=index.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/internal/components/control-group/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,EAAE,kBAAkB,EAAE,MAAM,+BAA+B,CAAC;AAEnE,OAAO,EAEL,uBAAuB,EAExB,MAAM,qCAAqC,CAAC;AAK7C,MAAM,WAAW,yBAA0B,SAAQ,kBAAkB;IACnE,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,SAAS,CAAC,EAAE,uBAAuB,CAAC;CACrC;AAED,MAAM,CAAC,OAAO,UAAU,oBAAoB,CAAC,EAC3C,QAAQ,EACR,SAAwB,EACxB,GAAG,KAAK,EACT,EAAE,yBAAyB,eAuB3B"}
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
|
|
2
|
+
// SPDX-License-Identifier: Apache-2.0
|
|
3
|
+
import React from 'react';
|
|
4
|
+
import clsx from 'clsx';
|
|
5
|
+
import { getBaseProps } from '../../base-component';
|
|
6
|
+
import { GroupedControlContext, } from '../../context/control-group-context';
|
|
7
|
+
import { flattenChildren } from '../../utils/flatten-children';
|
|
8
|
+
import styles from './styles.css.js';
|
|
9
|
+
export default function InternalControlGroup({ children, direction = 'horizontal', ...props }) {
|
|
10
|
+
const baseProps = getBaseProps(props);
|
|
11
|
+
const flattenedChildren = flattenChildren(children, 'ControlGroup');
|
|
12
|
+
const controlCount = flattenedChildren.length;
|
|
13
|
+
return (React.createElement("div", { ...baseProps, role: "group", className: clsx(baseProps.className, styles.root, styles[`root-${direction}`]) }, flattenedChildren.map((child, index) => {
|
|
14
|
+
const key = child && typeof child === 'object' ? child.key : undefined;
|
|
15
|
+
const position = controlCount === 1 ? 'only' : index === 0 ? 'first' : index === controlCount - 1 ? 'last' : 'middle';
|
|
16
|
+
return (React.createElement("div", { key: key ? String(key) : index, className: clsx(styles.control, styles[`control-${position}-${direction}`]) },
|
|
17
|
+
React.createElement(GroupedControlContext.Provider, { value: { position, direction } }, child)));
|
|
18
|
+
})));
|
|
19
|
+
}
|
|
20
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/internal/components/control-group/index.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,IAAI,MAAM,MAAM,CAAC;AAGxB,OAAO,EAAE,YAAY,EAAE,MAAM,sBAAsB,CAAC;AACpD,OAAO,EACL,qBAAqB,GAGtB,MAAM,qCAAqC,CAAC;AAC7C,OAAO,EAAE,eAAe,EAAE,MAAM,8BAA8B,CAAC;AAE/D,OAAO,MAAM,MAAM,iBAAiB,CAAC;AAOrC,MAAM,CAAC,OAAO,UAAU,oBAAoB,CAAC,EAC3C,QAAQ,EACR,SAAS,GAAG,YAAY,EACxB,GAAG,KAAK,EACkB;IAC1B,MAAM,SAAS,GAAG,YAAY,CAAC,KAAK,CAAC,CAAC;IAEtC,MAAM,iBAAiB,GAAG,eAAe,CAAC,QAAQ,EAAE,cAAc,CAAC,CAAC;IACpE,MAAM,YAAY,GAAG,iBAAiB,CAAC,MAAM,CAAC;IAE9C,OAAO,CACL,gCAAS,SAAS,EAAE,IAAI,EAAC,OAAO,EAAC,SAAS,EAAE,IAAI,CAAC,SAAS,CAAC,SAAS,EAAE,MAAM,CAAC,IAAI,EAAE,MAAM,CAAC,QAAQ,SAAS,EAAE,CAAC,CAAC,IAC5G,iBAAiB,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,KAAK,EAAE,EAAE;QACtC,MAAM,GAAG,GAAG,KAAK,IAAI,OAAO,KAAK,KAAK,QAAQ,CAAC,CAAC,CAAE,KAAgC,CAAC,GAAG,CAAC,CAAC,CAAC,SAAS,CAAC;QACnG,MAAM,QAAQ,GACZ,YAAY,KAAK,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,KAAK,KAAK,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,KAAK,KAAK,YAAY,GAAG,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,QAAQ,CAAC;QACvG,OAAO,CACL,6BACE,GAAG,EAAE,GAAG,CAAC,CAAC,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,KAAK,EAC9B,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,OAAO,EAAE,MAAM,CAAC,WAAW,QAAQ,IAAI,SAAS,EAAE,CAAC,CAAC;YAE3E,oBAAC,qBAAqB,CAAC,QAAQ,IAAC,KAAK,EAAE,EAAE,QAAQ,EAAE,SAAS,EAAE,IAAG,KAAK,CAAkC,CACpG,CACP,CAAC;IACJ,CAAC,CAAC,CACE,CACP,CAAC;AACJ,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React from 'react';\nimport clsx from 'clsx';\n\nimport { BaseComponentProps } from '../../../types/base-component';\nimport { getBaseProps } from '../../base-component';\nimport {\n GroupedControlContext,\n GroupedControlDirection,\n GroupedControlPosition,\n} from '../../context/control-group-context';\nimport { flattenChildren } from '../../utils/flatten-children';\n\nimport styles from './styles.css.js';\n\nexport interface InternalControlGroupProps extends BaseComponentProps {\n children?: React.ReactNode;\n direction?: GroupedControlDirection;\n}\n\nexport default function InternalControlGroup({\n children,\n direction = 'horizontal',\n ...props\n}: InternalControlGroupProps) {\n const baseProps = getBaseProps(props);\n\n const flattenedChildren = flattenChildren(children, 'ControlGroup');\n const controlCount = flattenedChildren.length;\n\n return (\n <div {...baseProps} role=\"group\" className={clsx(baseProps.className, styles.root, styles[`root-${direction}`])}>\n {flattenedChildren.map((child, index) => {\n const key = child && typeof child === 'object' ? (child as Record<'key', unknown>).key : undefined;\n const position: GroupedControlPosition =\n controlCount === 1 ? 'only' : index === 0 ? 'first' : index === controlCount - 1 ? 'last' : 'middle';\n return (\n <div\n key={key ? String(key) : index}\n className={clsx(styles.control, styles[`control-${position}-${direction}`])}\n >\n <GroupedControlContext.Provider value={{ position, direction }}>{child}</GroupedControlContext.Provider>\n </div>\n );\n })}\n </div>\n );\n}\n"]}
|