@awsui/components-react/text-filter/internal.js

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

// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
// SPDX-License-Identifier: Apache-2.0
import React, { useRef } from 'react';
import clsx from 'clsx';
import { useUniqueId } from '@awsui/component-toolkit/internal';
import InternalInput from '../input/internal';
import { getBaseProps } from '../internal/base-component';
import { fireNonCancelableEvent } from '../internal/events';
import useForwardFocus from '../internal/hooks/forward-focus';
import { joinStrings } from '../internal/utils/strings';
import { useTableIntegration } from './analytics/use-table-integration';
import { SearchResults } from './search-results';
import useDebounceSearchResultCallback from './use-debounce-search-result-callback';
import styles from './styles.css.js';
const InternalTextFilter = React.forwardRef(({ filteringText, filteringAriaLabel, filteringPlaceholder, filteringClearAriaLabel, controlId, ariaLabelledby, ariaDescribedby, disabled, countText, disableBrowserAutocorrect, onChange, onDelayedChange, loading = false, style, __internalRootRef, ...rest }, ref) => {
    const baseProps = getBaseProps(rest);
    const inputRef = useRef(null);
    const searchResultsRef = useRef(null);
    useForwardFocus(ref, inputRef);
    useTableIntegration(filteringText, countText);
    const searchResultsId = useUniqueId('text-filter-search-results');
    const showResults = filteringText && countText && !disabled;
    useDebounceSearchResultCallback({
        searchQuery: filteringText,
        countText,
        loading,
        announceCallback: () => {
            var _a;
            (_a = searchResultsRef.current) === null || _a === void 0 ? void 0 : _a.reannounce();
        },
    });
    return (React.createElement("div", { ...baseProps, className: clsx(baseProps.className, styles.root), ref: __internalRootRef },
        React.createElement(InternalInput, { __inheritFormFieldProps: true, disableBrowserAutocorrect: disableBrowserAutocorrect, ref: inputRef, className: styles.input, type: "search", ariaLabel: filteringAriaLabel, placeholder: filteringPlaceholder, value: filteringText, disabled: disabled, controlId: controlId, ariaLabelledby: ariaLabelledby, ariaDescribedby: joinStrings(showResults ? searchResultsId : undefined, ariaDescribedby), autoComplete: false, clearAriaLabel: filteringClearAriaLabel, onChange: event => fireNonCancelableEvent(onChange, { filteringText: event.detail.value }), __onDelayedInput: event => fireNonCancelableEvent(onDelayedChange, { filteringText: event.detail.value }), style: style }),
        showResults ? (React.createElement(SearchResults, { renderLiveRegion: !loading, id: searchResultsId, ref: searchResultsRef }, countText)) : null));
});
export default InternalTextFilter;
//# sourceMappingURL=internal.js.map