@awsui/components-react
Version:
On July 19th, 2022, we launched [Cloudscape Design System](https://cloudscape.design). Cloudscape is an evolution of AWS-UI. It consists of user interface guidelines, front-end components, design resources, and development tools for building intuitive, en
53 lines • 3.2 kB
JavaScript
// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
// SPDX-License-Identifier: Apache-2.0
import React from 'react';
import clsx from 'clsx';
import { getAnalyticsMetadataAttribute } from '@awsui/component-toolkit/internal/analytics-metadata';
import InternalIcon from '../../../icon/internal';
import { getBaseProps } from '../../base-component';
import { fireCancelableEvent, fireKeyboardEvent } from '../../events';
import analyticsSelectors from './analytics-metadata/styles.css.js';
import styles from './styles.css.js';
const ButtonTrigger = ({ children, pressed, hideCaret = false, disabled = false, readOnly = false, invalid = false, warning = false, inlineTokens, inFilteringToken, ariaHasPopup, ariaLabel, ariaLabelledby, ariaDescribedby, ariaControls, onKeyDown, onKeyUp, onMouseDown, onClick, onFocus, onBlur, autoFocus, ...restProps }, ref) => {
const baseProps = getBaseProps(restProps);
let attributes = {
...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 && 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,
};
if (!readOnly) {
attributes = {
...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)),
};
}
if (invalid) {
attributes['aria-invalid'] = invalid;
}
const analyticsMetadata = {
action: !pressed ? 'expand' : 'collapse',
detail: {
label: { root: 'self' },
},
};
return (React.createElement("button", { ref: ref, ...attributes, ...(disabled || readOnly ? {} : getAnalyticsMetadataAttribute(analyticsMetadata)) },
children,
!hideCaret && (React.createElement("span", { className: styles.arrow },
React.createElement(InternalIcon, { name: "caret-down-filled", variant: disabled || readOnly ? 'disabled' : 'normal' })))));
};
export default React.forwardRef(ButtonTrigger);
//# sourceMappingURL=index.js.map