@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

import { __rest } from "tslib";
// 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 InternalInput from '../input/internal';
import { getBaseProps } from '../internal/base-component';
import { useTableComponentsContext } from '../internal/context/table-component-context';
import { fireNonCancelableEvent } from '../internal/events';
import useForwardFocus from '../internal/hooks/forward-focus';
import { useUniqueId } from '../internal/hooks/use-unique-id';
import { joinStrings } from '../internal/utils/strings';
import { SearchResults } from './search-results';
import useDebounceSearchResultCallback from './use-debounce-search-result-callback';
import styles from './styles.css.js';
const InternalTextFilter = React.forwardRef((_a, ref) => {
    var _b;
    var { filteringText, filteringAriaLabel, filteringPlaceholder, filteringClearAriaLabel, controlId, ariaLabelledby, ariaDescribedby, disabled, countText, disableBrowserAutocorrect, onChange, onDelayedChange, loading = false, __internalRootRef } = _a, rest = __rest(_a, ["filteringText", "filteringAriaLabel", "filteringPlaceholder", "filteringClearAriaLabel", "controlId", "ariaLabelledby", "ariaDescribedby", "disabled", "countText", "disableBrowserAutocorrect", "onChange", "onDelayedChange", "loading", "__internalRootRef"]);
    const baseProps = getBaseProps(rest);
    const inputRef = useRef(null);
    const searchResultsRef = useRef(null);
    useForwardFocus(ref, inputRef);
    const searchResultsId = useUniqueId('text-filter-search-results');
    const showResults = filteringText && countText && !disabled;
    const tableComponentContext = useTableComponentsContext();
    if ((_b = tableComponentContext === null || tableComponentContext === void 0 ? void 0 : tableComponentContext.filterRef) === null || _b === void 0 ? void 0 : _b.current) {
        tableComponentContext.filterRef.current.filterText = filteringText;
    }
    useDebounceSearchResultCallback({
        searchQuery: filteringText,
        countText,
        loading,
        announceCallback: () => {
            var _a;
            (_a = searchResultsRef.current) === null || _a === void 0 ? void 0 : _a.reannounce();
        },
    });
    return (React.createElement("div", Object.assign({}, 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 }) }),
        showResults ? (React.createElement(SearchResults, { renderLiveRegion: !loading, id: searchResultsId, ref: searchResultsRef }, countText)) : null));
});
export default InternalTextFilter;
//# sourceMappingURL=internal.js.map