@cloudscape-design/components-themeable 3.0.782 → 3.0.784

package/lib/internal/template/multiselect/internal.js

@@ -1,142 +1,47 @@
 import { __rest } from "tslib";
 // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
 // SPDX-License-Identifier: Apache-2.0
-import React, { useCallback, useEffect, useRef, useState } from 'react';
+import React, { useState } from 'react';
 import clsx from 'clsx';
-import { warnOnce } from '@cloudscape-design/component-toolkit/internal';
 import { useInternalI18n } from '../i18n/context';
 import { getBaseProps } from '../internal/base-component';
 import Dropdown from '../internal/components/dropdown';
 import DropdownFooter from '../internal/components/dropdown-footer/index.js';
-import { useDropdownStatus } from '../internal/components/dropdown-status';
-import { isGroup } from '../internal/components/option/utils/filter-options';
-import { prepareOptions } from '../internal/components/option/utils/prepare-options';
 import ScreenreaderOnly from '../internal/components/screenreader-only';
 import { useFormFieldContext } from '../internal/context/form-field-context';
-import { fireNonCancelableEvent } from '../internal/events';
-import { useMergeRefs } from '../internal/hooks/use-merge-refs';
 import { useUniqueId } from '../internal/hooks/use-unique-id';
 import { joinStrings } from '../internal/utils/strings';
 import Filter from '../select/parts/filter';
 import PlainList from '../select/parts/plain-list';
 import Trigger from '../select/parts/trigger';
 import VirtualList from '../select/parts/virtual-list';
-import { checkOptionValueField } from '../select/utils/check-option-value-field.js';
-import { findOptionIndex } from '../select/utils/connect-options';
-import { useAnnouncement } from '../select/utils/use-announcement';
-import { useLoadItems } from '../select/utils/use-load-items';
-import { useNativeSearch } from '../select/utils/use-native-search';
-import { useSelect } from '../select/utils/use-select';
 import InternalTokenGroup from '../token-group/internal';
+import { useMultiselect } from './use-multiselect';
 import styles from './styles.css.js';
 const InternalMultiselect = React.forwardRef((_a, externalRef) => {
     var _b;
-    var { options = [], filteringType = 'none', filteringPlaceholder, filteringAriaLabel, filteringClearAriaLabel, filteringResultsText, ariaRequired, placeholder, disabled, readOnly, ariaLabel, statusType = 'finished', empty, loadingText, finishedText, errorText, noMatch, renderHighlightedAriaLive, selectedOptions = [], deselectAriaLabel, keepOpen = true, tokenLimit, i18nStrings, onBlur, onFocus, onLoadItems, onChange, virtualScroll, inlineTokens = false, hideTokens = false, expandToViewport, tokenLimitShowFewerAriaLabel, tokenLimitShowMoreAriaLabel, __internalRootRef = null, autoFocus } = _a, restProps = __rest(_a, ["options", "filteringType", "filteringPlaceholder", "filteringAriaLabel", "filteringClearAriaLabel", "filteringResultsText", "ariaRequired", "placeholder", "disabled", "readOnly", "ariaLabel", "statusType", "empty", "loadingText", "finishedText", "errorText", "noMatch", "renderHighlightedAriaLive", "selectedOptions", "deselectAriaLabel", "keepOpen", "tokenLimit", "i18nStrings", "onBlur", "onFocus", "onLoadItems", "onChange", "virtualScroll", "inlineTokens", "hideTokens", "expandToViewport", "tokenLimitShowFewerAriaLabel", "tokenLimitShowMoreAriaLabel", "__internalRootRef", "autoFocus"]);
-    checkOptionValueField('Multiselect', 'options', options);
+    var { options, filteringType, filteringPlaceholder, filteringAriaLabel, filteringClearAriaLabel, ariaRequired, placeholder, disabled, readOnly, ariaLabel, selectedOptions, deselectAriaLabel, tokenLimit, i18nStrings, virtualScroll, inlineTokens = false, hideTokens, expandToViewport, tokenLimitShowFewerAriaLabel, tokenLimitShowMoreAriaLabel, __internalRootRef = null, autoFocus } = _a, restProps = __rest(_a, ["options", "filteringType", "filteringPlaceholder", "filteringAriaLabel", "filteringClearAriaLabel", "ariaRequired", "placeholder", "disabled", "readOnly", "ariaLabel", "selectedOptions", "deselectAriaLabel", "tokenLimit", "i18nStrings", "virtualScroll", "inlineTokens", "hideTokens", "expandToViewport", "tokenLimitShowFewerAriaLabel", "tokenLimitShowMoreAriaLabel", "__internalRootRef", "autoFocus"]);
     const baseProps = getBaseProps(restProps);
     const formFieldContext = useFormFieldContext(restProps);
     const i18n = useInternalI18n('multiselect');
-    const i18nCommon = useInternalI18n('select');
-    const recoveryText = i18nCommon('recoveryText', restProps.recoveryText);
-    const errorIconAriaLabel = i18nCommon('errorIconAriaLabel', restProps.errorIconAriaLabel);
-    const selectedAriaLabel = i18nCommon('selectedAriaLabel', restProps.selectedAriaLabel);
-    if (restProps.recoveryText && !onLoadItems) {
-        warnOnce('Multiselect', '`onLoadItems` must be provided for `recoveryText` to be displayed.');
-    }
-    const { handleLoadMore, handleRecoveryClick, fireLoadItems } = useLoadItems({
-        onLoadItems,
-        options,
-        statusType,
-    });
-    const useInteractiveGroups = true;
-    const [filteringValue, setFilteringValue] = useState('');
-    const { filteredOptions, parentMap, totalCount, matchesCount } = prepareOptions(options, filteringType, filteringValue);
-    const updateSelectedOption = useCallback((option) => {
-        const filtered = filteredOptions.filter(item => item.type !== 'parent').map(item => item.option);
-        // switch between selection and deselection behavior, ignores disabled options to prevent
-        // getting stuck on one behavior when an option is disabled and its state cannot be changed
-        const isAllChildrenSelected = (optionsArray) => optionsArray.every(item => findOptionIndex(selectedOptions, item) > -1 || item.disabled);
-        const intersection = (visibleOptions, options) => visibleOptions.filter(item => findOptionIndex(options, item) > -1 && !item.disabled);
-        const union = (visibleOptions, options) => visibleOptions.filter(item => findOptionIndex(options, item) === -1).concat(options);
-        const select = (options, selectedOptions) => {
-            return union(selectedOptions, options);
-        };
-        const unselect = (options, selectedOptions) => {
-            return selectedOptions.filter(option => findOptionIndex(options, option) === -1);
-        };
-        let newSelectedOptions = [...selectedOptions];
-        if (isGroup(option)) {
-            const visibleOptions = intersection([...option.options], filtered);
-            newSelectedOptions = isAllChildrenSelected(visibleOptions)
-                ? unselect(visibleOptions, newSelectedOptions)
-                : select(visibleOptions, newSelectedOptions);
-        }
-        else {
-            newSelectedOptions = isAllChildrenSelected([option])
-                ? unselect([option], newSelectedOptions)
-                : select([option], newSelectedOptions);
-        }
-        fireNonCancelableEvent(onChange, {
-            selectedOptions: newSelectedOptions,
-        });
-    }, [onChange, selectedOptions, filteredOptions]);
-    const rootRef = useRef(null);
     const selfControlId = useUniqueId('trigger');
     const controlId = (_b = formFieldContext.controlId) !== null && _b !== void 0 ? _b : selfControlId;
-    const multiSelectAriaLabelId = useUniqueId('multiselect-arialabel-');
+    const ariaLabelId = useUniqueId('multiselect-arialabel-');
     const footerId = useUniqueId('footer');
-    const scrollToIndex = useRef(null);
-    const { isOpen, highlightType, highlightedOption, highlightedIndex, getTriggerProps, getDropdownProps, getFilterProps, getMenuProps, getOptionProps, highlightOption, announceSelected, } = useSelect({
+    const [filteringValue, setFilteringValue] = useState('');
+    const multiselectProps = useMultiselect(Object.assign({ options,
         selectedOptions,
-        updateSelectedOption,
-        options: filteredOptions,
         filteringType,
-        onFocus,
-        onBlur,
-        externalRef,
-        keepOpen,
-        fireLoadItems,
+        disabled,
+        deselectAriaLabel,
+        controlId,
+        ariaLabelId,
+        footerId,
+        filteringValue,
         setFilteringValue,
-        useInteractiveGroups,
-        statusType,
-    });
-    const handleNativeSearch = useNativeSearch({
-        isEnabled: filteringType === 'none' && isOpen,
-        options: filteredOptions,
-        highlightOption: highlightOption,
-        highlightedOption: highlightedOption === null || highlightedOption === void 0 ? void 0 : highlightedOption.option,
-        useInteractiveGroups,
-    });
-    const isEmpty = !options || options.length === 0;
-    const isNoMatch = filteredOptions && filteredOptions.length === 0;
-    const isFiltered = filteringType !== 'none' && filteringValue.length > 0 && filteredOptions && filteredOptions.length > 0;
-    const filteredText = isFiltered ? filteringResultsText === null || filteringResultsText === void 0 ? void 0 : filteringResultsText(matchesCount, totalCount) : undefined;
-    const dropdownStatus = useDropdownStatus({
-        statusType,
-        empty,
-        loadingText,
-        finishedText,
-        errorText,
-        recoveryText,
-        isEmpty,
-        isNoMatch,
-        noMatch,
-        isFiltered,
-        filteringResultsText: filteredText,
-        onRecoveryClick: handleRecoveryClick,
-        errorIconAriaLabel: errorIconAriaLabel,
-        hasRecoveryCallback: !!onLoadItems,
-    });
-    const filter = (React.createElement(Filter, Object.assign({ clearAriaLabel: filteringClearAriaLabel, filteringType: filteringType, placeholder: filteringPlaceholder, ariaLabel: filteringAriaLabel, ariaRequired: ariaRequired, value: filteringValue }, getFilterProps())));
-    const trigger = (React.createElement(Trigger, Object.assign({ placeholder: placeholder, disabled: disabled, readOnly: readOnly, triggerProps: getTriggerProps(disabled, autoFocus), selectedOption: null, selectedOptions: selectedOptions, triggerVariant: inlineTokens ? 'tokens' : 'placeholder', isOpen: isOpen }, formFieldContext, { controlId: controlId, ariaLabelledby: joinStrings(formFieldContext.ariaLabelledby, multiSelectAriaLabelId) })));
-    const menuProps = Object.assign(Object.assign({}, getMenuProps()), { onLoadMore: handleLoadMore, ariaLabelledby: joinStrings(multiSelectAriaLabelId, controlId), ariaDescribedby: dropdownStatus.content ? footerId : undefined });
-    const announcement = useAnnouncement({
-        announceSelected,
-        highlightedOption,
-        getParent: option => { var _a; return (_a = parentMap.get(option)) === null || _a === void 0 ? void 0 : _a.option; },
-        selectedAriaLabel,
-        renderHighlightedAriaLive,
-    });
+        externalRef }, restProps));
+    const filter = (React.createElement(Filter, Object.assign({ clearAriaLabel: filteringClearAriaLabel, filteringType: filteringType, placeholder: filteringPlaceholder, ariaLabel: filteringAriaLabel, ariaRequired: ariaRequired, value: filteringValue }, multiselectProps.getFilterProps())));
+    const trigger = (React.createElement(Trigger, Object.assign({ placeholder: placeholder, disabled: disabled, readOnly: readOnly, triggerProps: multiselectProps.getTriggerProps(disabled, autoFocus), selectedOption: null, selectedOptions: selectedOptions, triggerVariant: inlineTokens ? 'tokens' : 'placeholder', isOpen: multiselectProps.isOpen }, formFieldContext, { controlId: controlId, ariaLabelledby: joinStrings(formFieldContext.ariaLabelledby, ariaLabelId) })));
     const tokens = selectedOptions.map(option => ({
         label: option.label,
         disabled: disabled || option.disabled,
@@ -149,38 +54,19 @@ const InternalMultiselect = React.forwardRef((_a, externalRef) => {
         tags: option.tags,
         dismissLabel: i18n('deselectAriaLabel', deselectAriaLabel === null || deselectAriaLabel === void 0 ? void 0 : deselectAriaLabel(option), format => { var _a; return format({ option__label: (_a = option.label) !== null && _a !== void 0 ? _a : '' }); }),
     }));
-    useEffect(() => {
-        var _a;
-        (_a = scrollToIndex.current) === null || _a === void 0 ? void 0 : _a.call(scrollToIndex, highlightedIndex);
-    }, [highlightedIndex]);
     const ListComponent = virtualScroll ? VirtualList : PlainList;
-    const handleMouseDown = (event) => {
-        const target = event.target;
-        if (target !== document.activeElement) {
-            // prevent currently focused element from losing it
-            event.preventDefault();
-        }
-    };
     const showTokens = !hideTokens && !inlineTokens && tokens.length > 0;
-    const handleTokenDismiss = ({ detail }) => {
-        const optionToDeselect = selectedOptions[detail.itemIndex];
-        updateSelectedOption(optionToDeselect);
-        const targetRef = getTriggerProps().ref;
-        if (targetRef.current) {
-            targetRef.current.focus();
-        }
-    };
     const tokenGroupI18nStrings = {
         limitShowFewer: i18nStrings === null || i18nStrings === void 0 ? void 0 : i18nStrings.tokenLimitShowFewer,
         limitShowMore: i18nStrings === null || i18nStrings === void 0 ? void 0 : i18nStrings.tokenLimitShowMore,
     };
-    const mergedRef = useMergeRefs(rootRef, __internalRootRef);
-    const dropdownProps = getDropdownProps();
-    return (React.createElement("div", Object.assign({}, baseProps, { ref: mergedRef, className: clsx(styles.root, baseProps.className), onKeyPress: handleNativeSearch }),
-        React.createElement(Dropdown, Object.assign({}, dropdownProps, { ariaLabelledby: dropdownProps.dropdownContentRole ? joinStrings(multiSelectAriaLabelId, controlId) : undefined, ariaDescribedby: dropdownProps.dropdownContentRole ? (dropdownStatus.content ? footerId : undefined) : undefined, open: isOpen, trigger: trigger, header: filter, onMouseDown: handleMouseDown, footer: dropdownStatus.isSticky ? (React.createElement(DropdownFooter, { content: isOpen ? dropdownStatus.content : null, id: footerId })) : null, expandToViewport: expandToViewport, stretchBeyondTriggerWidth: true }),
-            React.createElement(ListComponent, { listBottom: !dropdownStatus.isSticky ? (React.createElement(DropdownFooter, { content: isOpen ? dropdownStatus.content : null, id: footerId })) : null, menuProps: menuProps, getOptionProps: getOptionProps, filteredOptions: filteredOptions, filteringValue: filteringValue, ref: scrollToIndex, hasDropdownStatus: dropdownStatus.content !== null, checkboxes: true, useInteractiveGroups: useInteractiveGroups, screenReaderContent: announcement, highlightType: highlightType })),
-        showTokens && (React.createElement(InternalTokenGroup, { className: styles.tokens, alignment: "horizontal", limit: tokenLimit, items: tokens, onDismiss: handleTokenDismiss, i18nStrings: tokenGroupI18nStrings, limitShowMoreAriaLabel: tokenLimitShowMoreAriaLabel, limitShowFewerAriaLabel: tokenLimitShowFewerAriaLabel, disableOuterPadding: true, readOnly: readOnly })),
-        React.createElement(ScreenreaderOnly, { id: multiSelectAriaLabelId }, ariaLabel)));
+    const dropdownStatus = multiselectProps.dropdownStatus;
+    const dropdownProps = multiselectProps.getDropdownProps();
+    return (React.createElement("div", Object.assign({}, baseProps, { ref: __internalRootRef, className: clsx(styles.root, baseProps.className) }, multiselectProps.getWrapperProps()),
+        React.createElement(Dropdown, Object.assign({}, dropdownProps, { ariaLabelledby: dropdownProps.dropdownContentRole ? joinStrings(ariaLabelId, controlId) : undefined, ariaDescribedby: dropdownProps.dropdownContentRole ? (dropdownStatus.content ? footerId : undefined) : undefined, open: multiselectProps.isOpen, trigger: trigger, header: filter, footer: dropdownStatus.isSticky ? (React.createElement(DropdownFooter, { content: multiselectProps.isOpen ? dropdownStatus.content : null, id: footerId })) : null, expandToViewport: expandToViewport, stretchBeyondTriggerWidth: true }),
+            React.createElement(ListComponent, { listBottom: !dropdownStatus.isSticky ? (React.createElement(DropdownFooter, { content: multiselectProps.isOpen ? dropdownStatus.content : null, id: footerId })) : null, menuProps: multiselectProps.getMenuProps(), getOptionProps: multiselectProps.getOptionProps, filteredOptions: multiselectProps.filteredOptions, filteringValue: filteringValue, ref: multiselectProps.scrollToIndex, hasDropdownStatus: dropdownStatus.content !== null, checkboxes: true, useInteractiveGroups: true, screenReaderContent: multiselectProps.announcement, highlightType: multiselectProps.highlightType })),
+        showTokens && (React.createElement(InternalTokenGroup, Object.assign({}, multiselectProps.getTokenProps(), { className: styles.tokens, alignment: "horizontal", limit: tokenLimit, items: tokens, i18nStrings: tokenGroupI18nStrings, limitShowMoreAriaLabel: tokenLimitShowMoreAriaLabel, limitShowFewerAriaLabel: tokenLimitShowFewerAriaLabel, disableOuterPadding: true, readOnly: readOnly }))),
+        React.createElement(ScreenreaderOnly, { id: ariaLabelId }, ariaLabel)));
 });
 export default InternalMultiselect;
 //# sourceMappingURL=internal.js.map

package/lib/internal/template/multiselect/internal.js.map

@@ -1 +1 @@
-{"version":3,"file":"internal.js","sourceRoot":"","sources":["../../../src/multiselect/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\nimport React, { useCallback, useEffect, useRef, useState } from 'react';\nimport clsx from 'clsx';\n\nimport { warnOnce } from '@cloudscape-design/component-toolkit/internal';\n\nimport { useInternalI18n } from '../i18n/context';\nimport { getBaseProps } from '../internal/base-component';\nimport Dropdown from '../internal/components/dropdown';\nimport DropdownFooter from '../internal/components/dropdown-footer/index.js';\nimport { useDropdownStatus } from '../internal/components/dropdown-status';\nimport { OptionDefinition, OptionGroup } from '../internal/components/option/interfaces';\nimport { isGroup } from '../internal/components/option/utils/filter-options';\nimport { prepareOptions } from '../internal/components/option/utils/prepare-options';\nimport ScreenreaderOnly from '../internal/components/screenreader-only';\nimport { useFormFieldContext } from '../internal/context/form-field-context';\nimport { fireNonCancelableEvent } from '../internal/events';\nimport { InternalBaseComponentProps } from '../internal/hooks/use-base-component/index.js';\nimport { useMergeRefs } from '../internal/hooks/use-merge-refs';\nimport { useUniqueId } from '../internal/hooks/use-unique-id';\nimport { joinStrings } from '../internal/utils/strings';\nimport Filter from '../select/parts/filter';\nimport PlainList, { SelectListProps } from '../select/parts/plain-list';\nimport Trigger from '../select/parts/trigger';\nimport VirtualList from '../select/parts/virtual-list';\nimport { checkOptionValueField } from '../select/utils/check-option-value-field.js';\nimport { findOptionIndex } from '../select/utils/connect-options';\nimport { useAnnouncement } from '../select/utils/use-announcement';\nimport { useLoadItems } from '../select/utils/use-load-items';\nimport { useNativeSearch } from '../select/utils/use-native-search';\nimport { MenuProps, useSelect } from '../select/utils/use-select';\nimport { TokenGroupProps } from '../token-group/interfaces';\nimport InternalTokenGroup from '../token-group/internal';\nimport { MultiselectProps } from './interfaces';\n\nimport styles from './styles.css.js';\n\ntype InternalMultiselectProps = MultiselectProps & InternalBaseComponentProps & { inlineTokens?: boolean };\n\nconst InternalMultiselect = React.forwardRef(\n  (\n    {\n      options = [],\n      filteringType = 'none',\n      filteringPlaceholder,\n      filteringAriaLabel,\n      filteringClearAriaLabel,\n      filteringResultsText,\n      ariaRequired,\n      placeholder,\n      disabled,\n      readOnly,\n      ariaLabel,\n      statusType = 'finished',\n      empty,\n      loadingText,\n      finishedText,\n      errorText,\n      noMatch,\n      renderHighlightedAriaLive,\n      selectedOptions = [],\n      deselectAriaLabel,\n      keepOpen = true,\n      tokenLimit,\n      i18nStrings,\n      onBlur,\n      onFocus,\n      onLoadItems,\n      onChange,\n      virtualScroll,\n      inlineTokens = false,\n      hideTokens = false,\n      expandToViewport,\n      tokenLimitShowFewerAriaLabel,\n      tokenLimitShowMoreAriaLabel,\n      __internalRootRef = null,\n      autoFocus,\n      ...restProps\n    }: InternalMultiselectProps,\n    externalRef: React.Ref<MultiselectProps.Ref>\n  ) => {\n    checkOptionValueField('Multiselect', 'options', options);\n\n    const baseProps = getBaseProps(restProps);\n    const formFieldContext = useFormFieldContext(restProps);\n    const i18n = useInternalI18n('multiselect');\n\n    const i18nCommon = useInternalI18n('select');\n    const recoveryText = i18nCommon('recoveryText', restProps.recoveryText);\n    const errorIconAriaLabel = i18nCommon('errorIconAriaLabel', restProps.errorIconAriaLabel);\n    const selectedAriaLabel = i18nCommon('selectedAriaLabel', restProps.selectedAriaLabel);\n\n    if (restProps.recoveryText && !onLoadItems) {\n      warnOnce('Multiselect', '`onLoadItems` must be provided for `recoveryText` to be displayed.');\n    }\n\n    const { handleLoadMore, handleRecoveryClick, fireLoadItems } = useLoadItems({\n      onLoadItems,\n      options,\n      statusType,\n    });\n    const useInteractiveGroups = true;\n    const [filteringValue, setFilteringValue] = useState('');\n    const { filteredOptions, parentMap, totalCount, matchesCount } = prepareOptions(\n      options,\n      filteringType,\n      filteringValue\n    );\n\n    const updateSelectedOption = useCallback(\n      (option: OptionDefinition | OptionGroup) => {\n        const filtered = filteredOptions.filter(item => item.type !== 'parent').map(item => item.option);\n\n        // switch between selection and deselection behavior, ignores disabled options to prevent\n        // getting stuck on one behavior when an option is disabled and its state cannot be changed\n        const isAllChildrenSelected = (optionsArray: OptionDefinition[]) =>\n          optionsArray.every(item => findOptionIndex(selectedOptions, item) > -1 || item.disabled);\n        const intersection = (visibleOptions: OptionDefinition[], options: OptionDefinition[]) =>\n          visibleOptions.filter(item => findOptionIndex(options, item) > -1 && !item.disabled);\n        const union = (visibleOptions: OptionDefinition[], options: OptionDefinition[]) =>\n          visibleOptions.filter(item => findOptionIndex(options, item) === -1).concat(options);\n        const select = (options: OptionDefinition[], selectedOptions: OptionDefinition[]) => {\n          return union(selectedOptions, options);\n        };\n        const unselect = (options: OptionDefinition[], selectedOptions: OptionDefinition[]) => {\n          return selectedOptions.filter(option => findOptionIndex(options, option) === -1);\n        };\n        let newSelectedOptions = [...selectedOptions];\n\n        if (isGroup(option)) {\n          const visibleOptions = intersection([...option.options], filtered);\n          newSelectedOptions = isAllChildrenSelected(visibleOptions)\n            ? unselect(visibleOptions, newSelectedOptions)\n            : select(visibleOptions, newSelectedOptions);\n        } else {\n          newSelectedOptions = isAllChildrenSelected([option])\n            ? unselect([option], newSelectedOptions)\n            : select([option], newSelectedOptions);\n        }\n\n        fireNonCancelableEvent(onChange, {\n          selectedOptions: newSelectedOptions,\n        });\n      },\n      [onChange, selectedOptions, filteredOptions]\n    );\n\n    const rootRef = useRef<HTMLDivElement>(null);\n\n    const selfControlId = useUniqueId('trigger');\n    const controlId = formFieldContext.controlId ?? selfControlId;\n\n    const multiSelectAriaLabelId = useUniqueId('multiselect-arialabel-');\n\n    const footerId = useUniqueId('footer');\n\n    const scrollToIndex = useRef<SelectListProps.SelectListRef>(null);\n    const {\n      isOpen,\n      highlightType,\n      highlightedOption,\n      highlightedIndex,\n      getTriggerProps,\n      getDropdownProps,\n      getFilterProps,\n      getMenuProps,\n      getOptionProps,\n      highlightOption,\n      announceSelected,\n    } = useSelect({\n      selectedOptions,\n      updateSelectedOption,\n      options: filteredOptions,\n      filteringType,\n      onFocus,\n      onBlur,\n      externalRef,\n      keepOpen,\n      fireLoadItems,\n      setFilteringValue,\n      useInteractiveGroups,\n      statusType,\n    });\n\n    const handleNativeSearch = useNativeSearch({\n      isEnabled: filteringType === 'none' && isOpen,\n      options: filteredOptions,\n      highlightOption: highlightOption,\n      highlightedOption: highlightedOption?.option,\n      useInteractiveGroups,\n    });\n\n    const isEmpty = !options || options.length === 0;\n    const isNoMatch = filteredOptions && filteredOptions.length === 0;\n    const isFiltered =\n      filteringType !== 'none' && filteringValue.length > 0 && filteredOptions && filteredOptions.length > 0;\n    const filteredText = isFiltered ? filteringResultsText?.(matchesCount, totalCount) : undefined;\n    const dropdownStatus = useDropdownStatus({\n      statusType,\n      empty,\n      loadingText,\n      finishedText,\n      errorText,\n      recoveryText,\n      isEmpty,\n      isNoMatch,\n      noMatch,\n      isFiltered,\n      filteringResultsText: filteredText,\n      onRecoveryClick: handleRecoveryClick,\n      errorIconAriaLabel: errorIconAriaLabel,\n      hasRecoveryCallback: !!onLoadItems,\n    });\n\n    const filter = (\n      <Filter\n        clearAriaLabel={filteringClearAriaLabel}\n        filteringType={filteringType}\n        placeholder={filteringPlaceholder}\n        ariaLabel={filteringAriaLabel}\n        ariaRequired={ariaRequired}\n        value={filteringValue}\n        {...getFilterProps()}\n      />\n    );\n\n    const trigger = (\n      <Trigger\n        placeholder={placeholder}\n        disabled={disabled}\n        readOnly={readOnly}\n        triggerProps={getTriggerProps(disabled, autoFocus)}\n        selectedOption={null}\n        selectedOptions={selectedOptions}\n        triggerVariant={inlineTokens ? 'tokens' : 'placeholder'}\n        isOpen={isOpen}\n        {...formFieldContext}\n        controlId={controlId}\n        ariaLabelledby={joinStrings(formFieldContext.ariaLabelledby, multiSelectAriaLabelId)}\n      />\n    );\n\n    const menuProps: MenuProps = {\n      ...getMenuProps(),\n      onLoadMore: handleLoadMore,\n      ariaLabelledby: joinStrings(multiSelectAriaLabelId, controlId),\n      ariaDescribedby: dropdownStatus.content ? footerId : undefined,\n    };\n\n    const announcement = useAnnouncement({\n      announceSelected,\n      highlightedOption,\n      getParent: option => parentMap.get(option)?.option as undefined | OptionGroup,\n      selectedAriaLabel,\n      renderHighlightedAriaLive,\n    });\n\n    const tokens: TokenGroupProps['items'] = selectedOptions.map(option => ({\n      label: option.label,\n      disabled: disabled || option.disabled,\n      labelTag: option.labelTag,\n      description: option.description,\n      iconAlt: option.iconAlt,\n      iconName: option.iconName,\n      iconUrl: option.iconUrl,\n      iconSvg: option.iconSvg,\n      tags: option.tags,\n      dismissLabel: i18n('deselectAriaLabel', deselectAriaLabel?.(option), format =>\n        format({ option__label: option.label ?? '' })\n      ),\n    }));\n\n    useEffect(() => {\n      scrollToIndex.current?.(highlightedIndex);\n    }, [highlightedIndex]);\n\n    const ListComponent = virtualScroll ? VirtualList : PlainList;\n\n    const handleMouseDown = (event: React.MouseEvent) => {\n      const target = event.target as HTMLElement;\n\n      if (target !== document.activeElement) {\n        // prevent currently focused element from losing it\n        event.preventDefault();\n      }\n    };\n\n    const showTokens = !hideTokens && !inlineTokens && tokens.length > 0;\n    const handleTokenDismiss: TokenGroupProps['onDismiss'] = ({ detail }) => {\n      const optionToDeselect = selectedOptions[detail.itemIndex];\n      updateSelectedOption(optionToDeselect);\n      const targetRef = getTriggerProps().ref;\n      if (targetRef.current) {\n        targetRef.current.focus();\n      }\n    };\n\n    const tokenGroupI18nStrings: TokenGroupProps.I18nStrings = {\n      limitShowFewer: i18nStrings?.tokenLimitShowFewer,\n      limitShowMore: i18nStrings?.tokenLimitShowMore,\n    };\n\n    const mergedRef = useMergeRefs(rootRef, __internalRootRef);\n\n    const dropdownProps = getDropdownProps();\n\n    return (\n      <div\n        {...baseProps}\n        ref={mergedRef}\n        className={clsx(styles.root, baseProps.className)}\n        onKeyPress={handleNativeSearch}\n      >\n        <Dropdown\n          {...dropdownProps}\n          ariaLabelledby={\n            dropdownProps.dropdownContentRole ? joinStrings(multiSelectAriaLabelId, controlId) : undefined\n          }\n          ariaDescribedby={\n            dropdownProps.dropdownContentRole ? (dropdownStatus.content ? footerId : undefined) : undefined\n          }\n          open={isOpen}\n          trigger={trigger}\n          header={filter}\n          onMouseDown={handleMouseDown}\n          footer={\n            dropdownStatus.isSticky ? (\n              <DropdownFooter content={isOpen ? dropdownStatus.content : null} id={footerId} />\n            ) : null\n          }\n          expandToViewport={expandToViewport}\n          stretchBeyondTriggerWidth={true}\n        >\n          <ListComponent\n            listBottom={\n              !dropdownStatus.isSticky ? (\n                <DropdownFooter content={isOpen ? dropdownStatus.content : null} id={footerId} />\n              ) : null\n            }\n            menuProps={menuProps}\n            getOptionProps={getOptionProps}\n            filteredOptions={filteredOptions}\n            filteringValue={filteringValue}\n            ref={scrollToIndex}\n            hasDropdownStatus={dropdownStatus.content !== null}\n            checkboxes={true}\n            useInteractiveGroups={useInteractiveGroups}\n            screenReaderContent={announcement}\n            highlightType={highlightType}\n          />\n        </Dropdown>\n        {showTokens && (\n          <InternalTokenGroup\n            className={styles.tokens}\n            alignment=\"horizontal\"\n            limit={tokenLimit}\n            items={tokens}\n            onDismiss={handleTokenDismiss}\n            i18nStrings={tokenGroupI18nStrings}\n            limitShowMoreAriaLabel={tokenLimitShowMoreAriaLabel}\n            limitShowFewerAriaLabel={tokenLimitShowFewerAriaLabel}\n            disableOuterPadding={true}\n            readOnly={readOnly}\n          />\n        )}\n        <ScreenreaderOnly id={multiSelectAriaLabelId}>{ariaLabel}</ScreenreaderOnly>\n      </div>\n    );\n  }\n);\n\nexport default InternalMultiselect;\n"]}
+{"version":3,"file":"internal.js","sourceRoot":"","sources":["../../../src/multiselect/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\nimport React, { useState } from 'react';\nimport clsx from 'clsx';\n\nimport { useInternalI18n } from '../i18n/context';\nimport { getBaseProps } from '../internal/base-component';\nimport Dropdown from '../internal/components/dropdown';\nimport DropdownFooter from '../internal/components/dropdown-footer/index.js';\nimport ScreenreaderOnly from '../internal/components/screenreader-only';\nimport { useFormFieldContext } from '../internal/context/form-field-context';\nimport { InternalBaseComponentProps } from '../internal/hooks/use-base-component/index.js';\nimport { useUniqueId } from '../internal/hooks/use-unique-id';\nimport { SomeRequired } from '../internal/types';\nimport { joinStrings } from '../internal/utils/strings';\nimport Filter from '../select/parts/filter';\nimport PlainList from '../select/parts/plain-list';\nimport Trigger from '../select/parts/trigger';\nimport VirtualList from '../select/parts/virtual-list';\nimport { TokenGroupProps } from '../token-group/interfaces';\nimport InternalTokenGroup from '../token-group/internal';\nimport { MultiselectProps } from './interfaces';\nimport { useMultiselect } from './use-multiselect';\n\nimport styles from './styles.css.js';\n\ntype InternalMultiselectProps = SomeRequired<\n  MultiselectProps,\n  'options' | 'selectedOptions' | 'filteringType' | 'statusType' | 'keepOpen' | 'hideTokens'\n> &\n  InternalBaseComponentProps & { inlineTokens?: boolean };\n\nconst InternalMultiselect = React.forwardRef(\n  (\n    {\n      options,\n      filteringType,\n      filteringPlaceholder,\n      filteringAriaLabel,\n      filteringClearAriaLabel,\n      ariaRequired,\n      placeholder,\n      disabled,\n      readOnly,\n      ariaLabel,\n      selectedOptions,\n      deselectAriaLabel,\n      tokenLimit,\n      i18nStrings,\n      virtualScroll,\n      inlineTokens = false,\n      hideTokens,\n      expandToViewport,\n      tokenLimitShowFewerAriaLabel,\n      tokenLimitShowMoreAriaLabel,\n      __internalRootRef = null,\n      autoFocus,\n      ...restProps\n    }: InternalMultiselectProps,\n    externalRef: React.Ref<MultiselectProps.Ref>\n  ) => {\n    const baseProps = getBaseProps(restProps);\n    const formFieldContext = useFormFieldContext(restProps);\n    const i18n = useInternalI18n('multiselect');\n\n    const selfControlId = useUniqueId('trigger');\n    const controlId = formFieldContext.controlId ?? selfControlId;\n    const ariaLabelId = useUniqueId('multiselect-arialabel-');\n    const footerId = useUniqueId('footer');\n\n    const [filteringValue, setFilteringValue] = useState('');\n    const multiselectProps = useMultiselect({\n      options,\n      selectedOptions,\n      filteringType,\n      disabled,\n      deselectAriaLabel,\n      controlId,\n      ariaLabelId,\n      footerId,\n      filteringValue,\n      setFilteringValue,\n      externalRef,\n      ...restProps,\n    });\n\n    const filter = (\n      <Filter\n        clearAriaLabel={filteringClearAriaLabel}\n        filteringType={filteringType}\n        placeholder={filteringPlaceholder}\n        ariaLabel={filteringAriaLabel}\n        ariaRequired={ariaRequired}\n        value={filteringValue}\n        {...multiselectProps.getFilterProps()}\n      />\n    );\n\n    const trigger = (\n      <Trigger\n        placeholder={placeholder}\n        disabled={disabled}\n        readOnly={readOnly}\n        triggerProps={multiselectProps.getTriggerProps(disabled, autoFocus)}\n        selectedOption={null}\n        selectedOptions={selectedOptions}\n        triggerVariant={inlineTokens ? 'tokens' : 'placeholder'}\n        isOpen={multiselectProps.isOpen}\n        {...formFieldContext}\n        controlId={controlId}\n        ariaLabelledby={joinStrings(formFieldContext.ariaLabelledby, ariaLabelId)}\n      />\n    );\n\n    const tokens: TokenGroupProps['items'] = selectedOptions.map(option => ({\n      label: option.label,\n      disabled: disabled || option.disabled,\n      labelTag: option.labelTag,\n      description: option.description,\n      iconAlt: option.iconAlt,\n      iconName: option.iconName,\n      iconUrl: option.iconUrl,\n      iconSvg: option.iconSvg,\n      tags: option.tags,\n      dismissLabel: i18n('deselectAriaLabel', deselectAriaLabel?.(option), format =>\n        format({ option__label: option.label ?? '' })\n      ),\n    }));\n\n    const ListComponent = virtualScroll ? VirtualList : PlainList;\n\n    const showTokens = !hideTokens && !inlineTokens && tokens.length > 0;\n\n    const tokenGroupI18nStrings: TokenGroupProps.I18nStrings = {\n      limitShowFewer: i18nStrings?.tokenLimitShowFewer,\n      limitShowMore: i18nStrings?.tokenLimitShowMore,\n    };\n\n    const dropdownStatus = multiselectProps.dropdownStatus;\n    const dropdownProps = multiselectProps.getDropdownProps();\n\n    return (\n      <div\n        {...baseProps}\n        ref={__internalRootRef}\n        className={clsx(styles.root, baseProps.className)}\n        {...multiselectProps.getWrapperProps()}\n      >\n        <Dropdown\n          {...dropdownProps}\n          ariaLabelledby={dropdownProps.dropdownContentRole ? joinStrings(ariaLabelId, controlId) : undefined}\n          ariaDescribedby={\n            dropdownProps.dropdownContentRole ? (dropdownStatus.content ? footerId : undefined) : undefined\n          }\n          open={multiselectProps.isOpen}\n          trigger={trigger}\n          header={filter}\n          footer={\n            dropdownStatus.isSticky ? (\n              <DropdownFooter content={multiselectProps.isOpen ? dropdownStatus.content : null} id={footerId} />\n            ) : null\n          }\n          expandToViewport={expandToViewport}\n          stretchBeyondTriggerWidth={true}\n        >\n          <ListComponent\n            listBottom={\n              !dropdownStatus.isSticky ? (\n                <DropdownFooter content={multiselectProps.isOpen ? dropdownStatus.content : null} id={footerId} />\n              ) : null\n            }\n            menuProps={multiselectProps.getMenuProps()}\n            getOptionProps={multiselectProps.getOptionProps}\n            filteredOptions={multiselectProps.filteredOptions}\n            filteringValue={filteringValue}\n            ref={multiselectProps.scrollToIndex}\n            hasDropdownStatus={dropdownStatus.content !== null}\n            checkboxes={true}\n            useInteractiveGroups={true}\n            screenReaderContent={multiselectProps.announcement}\n            highlightType={multiselectProps.highlightType}\n          />\n        </Dropdown>\n\n        {showTokens && (\n          <InternalTokenGroup\n            {...multiselectProps.getTokenProps()}\n            className={styles.tokens}\n            alignment=\"horizontal\"\n            limit={tokenLimit}\n            items={tokens}\n            i18nStrings={tokenGroupI18nStrings}\n            limitShowMoreAriaLabel={tokenLimitShowMoreAriaLabel}\n            limitShowFewerAriaLabel={tokenLimitShowFewerAriaLabel}\n            disableOuterPadding={true}\n            readOnly={readOnly}\n          />\n        )}\n\n        <ScreenreaderOnly id={ariaLabelId}>{ariaLabel}</ScreenreaderOnly>\n      </div>\n    );\n  }\n);\n\nexport default InternalMultiselect;\n"]}

package/lib/internal/template/multiselect/use-multiselect.d.ts

@@ -0,0 +1,64 @@
+import React from 'react';
+import { DropdownStatusProps } from '../internal/components/dropdown-status';
+import { SomeRequired } from '../internal/types';
+import { SelectListProps } from '../select/parts/plain-list';
+import { TokenGroupProps } from '../token-group/interfaces';
+import { MultiselectProps } from './interfaces';
+type UseMultiselectOptions = SomeRequired<Pick<MultiselectProps, 'options' | 'selectedOptions' | 'filteringType' | 'filteringResultsText' | 'disabled' | 'noMatch' | 'renderHighlightedAriaLive' | 'deselectAriaLabel' | 'keepOpen' | 'onBlur' | 'onFocus' | 'onLoadItems' | 'onChange' | 'selectedAriaLabel'> & DropdownStatusProps & {
+    controlId: string;
+    ariaLabelId: string;
+    footerId: string;
+    filteringValue: string;
+    setFilteringValue: (value: string) => void;
+    externalRef: React.Ref<MultiselectProps.Ref>;
+}, 'options' | 'selectedOptions' | 'filteringType' | 'statusType' | 'keepOpen'>;
+export declare function useMultiselect({ options, filteringType, filteringResultsText, disabled, statusType, empty, loadingText, finishedText, errorText, noMatch, renderHighlightedAriaLive, selectedOptions, deselectAriaLabel, keepOpen, onBlur, onFocus, onLoadItems, onChange, controlId, ariaLabelId, footerId, filteringValue, setFilteringValue, externalRef, ...restProps }: UseMultiselectOptions): {
+    isOpen: boolean;
+    tokens: readonly TokenGroupProps.Item[];
+    announcement: string;
+    dropdownStatus: import("../internal/components/dropdown-status").DropdownStatusResult;
+    filteringValue: string;
+    filteredOptions: readonly import("../internal/components/option/interfaces").DropdownOption[];
+    highlightType: import("../internal/components/options-list/utils/use-highlight-option").HighlightType;
+    scrollToIndex: React.RefObject<SelectListProps.SelectListRef>;
+    getFilterProps: () => Partial<import("../select/parts/filter").FilterProps>;
+    getTriggerProps: (disabled?: boolean, autoFocus?: boolean) => import("../select/utils/use-select").SelectTriggerProps;
+    getMenuProps: () => {
+        onLoadMore: () => void;
+        ariaLabelledby: string | undefined;
+        ariaDescribedby: string | undefined;
+        open?: boolean | undefined;
+        position?: import("csstype").Property.Position | undefined;
+        className?: string | undefined;
+        id?: string | undefined;
+        role?: "listbox" | "menu" | "list" | undefined;
+        onFocus?: import("../internal/events").NonCancelableEventHandler<{}> | undefined;
+        onBlur?: import("../internal/events").NonCancelableEventHandler<{
+            relatedTarget: Node | null;
+        }> | undefined;
+        onKeyDown?: import("../internal/events").CancelableEventHandler<import("../internal/events").BaseKeyDetail> | undefined;
+        onMouseMove?: ((itemIndex: number) => void) | undefined;
+        onMouseUp?: ((itemIndex: number) => void) | undefined;
+        ariaLabel?: string | undefined;
+        statusType: DropdownStatusProps.StatusType;
+        nativeAttributes?: Record<string, any> | undefined;
+        decreaseBlockMargin?: boolean | undefined;
+        ref: React.RefObject<HTMLUListElement>;
+    };
+    getOptionProps: (option: import("../internal/components/option/interfaces").DropdownOption, index: number) => any;
+    getTokenProps: () => {
+        onDismiss: import("../internal/events").NonCancelableEventHandler<TokenGroupProps.DismissDetail>;
+    };
+    getDropdownProps: () => {
+        onMouseDown: (event: React.MouseEvent) => void;
+        onFocus?: import("../internal/events").NonCancelableEventHandler<Pick<React.FocusEvent<Element, Element>, "target" | "relatedTarget">> | undefined;
+        onBlur?: import("../internal/events").NonCancelableEventHandler<Pick<React.FocusEvent<Element, Element>, "target" | "relatedTarget">> | undefined;
+        dropdownContentId?: string | undefined;
+        dropdownContentRole?: string | undefined;
+    };
+    getWrapperProps: () => {
+        onKeyDown: (event: React.KeyboardEvent<Element>) => void;
+    };
+};
+export {};
+//# sourceMappingURL=use-multiselect.d.ts.map

package/lib/internal/template/multiselect/use-multiselect.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-multiselect.d.ts","sourceRoot":"","sources":["../../../src/multiselect/use-multiselect.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAyC,MAAM,OAAO,CAAC;AAK9D,OAAO,EAAE,mBAAmB,EAAqB,MAAM,wCAAwC,CAAC;AAKhG,OAAO,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAEjD,OAAO,EAAE,eAAe,EAAE,MAAM,4BAA4B,CAAC;AAO7D,OAAO,EAAE,eAAe,EAAE,MAAM,2BAA2B,CAAC;AAC5D,OAAO,EAAE,gBAAgB,EAAE,MAAM,cAAc,CAAC;AAEhD,KAAK,qBAAqB,GAAG,YAAY,CACvC,IAAI,CACF,gBAAgB,EACd,SAAS,GACT,iBAAiB,GACjB,eAAe,GACf,sBAAsB,GACtB,UAAU,GACV,SAAS,GACT,2BAA2B,GAC3B,mBAAmB,GACnB,UAAU,GACV,QAAQ,GACR,SAAS,GACT,aAAa,GACb,UAAU,GACV,mBAAmB,CACtB,GACC,mBAAmB,GAAG;IACpB,SAAS,EAAE,MAAM,CAAC;IAClB,WAAW,EAAE,MAAM,CAAC;IACpB,QAAQ,EAAE,MAAM,CAAC;IACjB,cAAc,EAAE,MAAM,CAAC;IACvB,iBAAiB,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAC3C,WAAW,EAAE,KAAK,CAAC,GAAG,CAAC,gBAAgB,CAAC,GAAG,CAAC,CAAC;CAC9C,EACH,SAAS,GAAG,iBAAiB,GAAG,eAAe,GAAG,YAAY,GAAG,UAAU,CAC5E,CAAC;AAEF,wBAAgB,cAAc,CAAC,EAC7B,OAAO,EACP,aAAa,EACb,oBAAoB,EACpB,QAAQ,EACR,UAAU,EACV,KAAK,EACL,WAAW,EACX,YAAY,EACZ,SAAS,EACT,OAAO,EACP,yBAAyB,EACzB,eAAe,EACf,iBAAiB,EACjB,QAAQ,EACR,MAAM,EACN,OAAO,EACP,WAAW,EACX,QAAQ,EACR,SAAS,EACT,WAAW,EACX,QAAQ,EACR,cAAc,EACd,iBAAiB,EACjB,WAAW,EACX,GAAG,SAAS,EACb,EAAE,qBAAqB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;6BAoJc,gBAAgB;;;;;;;;;EAwCrD"}

package/lib/internal/template/multiselect/use-multiselect.js

@@ -0,0 +1,163 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import { __rest } from "tslib";
+import { useCallback, useEffect, useRef } from 'react';
+import { warnOnce } from '@cloudscape-design/component-toolkit/internal';
+import { useInternalI18n } from '../i18n/context';
+import { useDropdownStatus } from '../internal/components/dropdown-status';
+import { isGroup } from '../internal/components/option/utils/filter-options';
+import { prepareOptions } from '../internal/components/option/utils/prepare-options';
+import { fireNonCancelableEvent } from '../internal/events';
+import { joinStrings } from '../internal/utils/strings';
+import { checkOptionValueField } from '../select/utils/check-option-value-field.js';
+import { findOptionIndex } from '../select/utils/connect-options';
+import { useAnnouncement } from '../select/utils/use-announcement';
+import { useLoadItems } from '../select/utils/use-load-items';
+import { useNativeSearch } from '../select/utils/use-native-search';
+import { useSelect } from '../select/utils/use-select';
+export function useMultiselect(_a) {
+    var { options, filteringType, filteringResultsText, disabled, statusType, empty, loadingText, finishedText, errorText, noMatch, renderHighlightedAriaLive, selectedOptions, deselectAriaLabel, keepOpen, onBlur, onFocus, onLoadItems, onChange, controlId, ariaLabelId, footerId, filteringValue, setFilteringValue, externalRef } = _a, restProps = __rest(_a, ["options", "filteringType", "filteringResultsText", "disabled", "statusType", "empty", "loadingText", "finishedText", "errorText", "noMatch", "renderHighlightedAriaLive", "selectedOptions", "deselectAriaLabel", "keepOpen", "onBlur", "onFocus", "onLoadItems", "onChange", "controlId", "ariaLabelId", "footerId", "filteringValue", "setFilteringValue", "externalRef"]);
+    checkOptionValueField('Multiselect', 'options', options);
+    const i18n = useInternalI18n('multiselect');
+    const i18nCommon = useInternalI18n('select');
+    const recoveryText = i18nCommon('recoveryText', restProps.recoveryText);
+    const errorIconAriaLabel = i18nCommon('errorIconAriaLabel', restProps.errorIconAriaLabel);
+    const selectedAriaLabel = i18nCommon('selectedAriaLabel', restProps.selectedAriaLabel);
+    if (restProps.recoveryText && !onLoadItems) {
+        warnOnce('Multiselect', '`onLoadItems` must be provided for `recoveryText` to be displayed.');
+    }
+    const { handleLoadMore, handleRecoveryClick, fireLoadItems } = useLoadItems({
+        onLoadItems,
+        options,
+        statusType,
+    });
+    const useInteractiveGroups = true;
+    const { filteredOptions, parentMap, totalCount, matchesCount } = prepareOptions(options, filteringType, filteringValue);
+    const updateSelectedOption = useCallback((option) => {
+        const filtered = filteredOptions.filter(item => item.type !== 'parent').map(item => item.option);
+        // switch between selection and deselection behavior, ignores disabled options to prevent
+        // getting stuck on one behavior when an option is disabled and its state cannot be changed
+        const isAllChildrenSelected = (optionsArray) => optionsArray.every(item => findOptionIndex(selectedOptions, item) > -1 || item.disabled);
+        const intersection = (visibleOptions, options) => visibleOptions.filter(item => findOptionIndex(options, item) > -1 && !item.disabled);
+        const union = (visibleOptions, options) => visibleOptions.filter(item => findOptionIndex(options, item) === -1).concat(options);
+        const select = (options, selectedOptions) => {
+            return union(selectedOptions, options);
+        };
+        const unselect = (options, selectedOptions) => {
+            return selectedOptions.filter(option => findOptionIndex(options, option) === -1);
+        };
+        let newSelectedOptions = [...selectedOptions];
+        if (isGroup(option)) {
+            const visibleOptions = intersection([...option.options], filtered);
+            newSelectedOptions = isAllChildrenSelected(visibleOptions)
+                ? unselect(visibleOptions, newSelectedOptions)
+                : select(visibleOptions, newSelectedOptions);
+        }
+        else {
+            newSelectedOptions = isAllChildrenSelected([option])
+                ? unselect([option], newSelectedOptions)
+                : select([option], newSelectedOptions);
+        }
+        fireNonCancelableEvent(onChange, {
+            selectedOptions: newSelectedOptions,
+        });
+    }, [onChange, selectedOptions, filteredOptions]);
+    const scrollToIndex = useRef(null);
+    const { isOpen, highlightType, highlightedOption, highlightedIndex, getTriggerProps, getDropdownProps, getFilterProps, getMenuProps, getOptionProps, highlightOption, announceSelected, } = useSelect({
+        selectedOptions,
+        updateSelectedOption,
+        options: filteredOptions,
+        filteringType,
+        onFocus,
+        onBlur,
+        externalRef,
+        keepOpen,
+        fireLoadItems,
+        setFilteringValue,
+        useInteractiveGroups,
+        statusType,
+    });
+    const wrapperOnKeyDown = useNativeSearch({
+        isEnabled: filteringType === 'none' && isOpen,
+        options: filteredOptions,
+        highlightOption: highlightOption,
+        highlightedOption: highlightedOption === null || highlightedOption === void 0 ? void 0 : highlightedOption.option,
+        useInteractiveGroups,
+    });
+    const isEmpty = !options || options.length === 0;
+    const isNoMatch = filteredOptions && filteredOptions.length === 0;
+    const isFiltered = filteringType !== 'none' && filteringValue.length > 0 && filteredOptions && filteredOptions.length > 0;
+    const filteredText = isFiltered ? filteringResultsText === null || filteringResultsText === void 0 ? void 0 : filteringResultsText(matchesCount, totalCount) : undefined;
+    const dropdownStatus = useDropdownStatus({
+        statusType,
+        empty,
+        loadingText,
+        finishedText,
+        errorText,
+        recoveryText,
+        isEmpty,
+        isNoMatch,
+        noMatch,
+        isFiltered,
+        filteringResultsText: filteredText,
+        onRecoveryClick: handleRecoveryClick,
+        errorIconAriaLabel: errorIconAriaLabel,
+        hasRecoveryCallback: !!onLoadItems,
+    });
+    const announcement = useAnnouncement({
+        announceSelected,
+        highlightedOption,
+        getParent: option => { var _a; return (_a = parentMap.get(option)) === null || _a === void 0 ? void 0 : _a.option; },
+        selectedAriaLabel,
+        renderHighlightedAriaLive,
+    });
+    const tokens = selectedOptions.map(option => ({
+        label: option.label,
+        disabled: disabled || option.disabled,
+        labelTag: option.labelTag,
+        description: option.description,
+        iconAlt: option.iconAlt,
+        iconName: option.iconName,
+        iconUrl: option.iconUrl,
+        iconSvg: option.iconSvg,
+        tags: option.tags,
+        dismissLabel: i18n('deselectAriaLabel', deselectAriaLabel === null || deselectAriaLabel === void 0 ? void 0 : deselectAriaLabel(option), format => { var _a; return format({ option__label: (_a = option.label) !== null && _a !== void 0 ? _a : '' }); }),
+    }));
+    useEffect(() => {
+        var _a;
+        (_a = scrollToIndex.current) === null || _a === void 0 ? void 0 : _a.call(scrollToIndex, highlightedIndex);
+    }, [highlightedIndex]);
+    const dropdownOnMouseDown = (event) => {
+        const target = event.target;
+        if (target !== document.activeElement) {
+            // prevent currently focused element from losing it
+            event.preventDefault();
+        }
+    };
+    const tokenOnDismiss = ({ detail }) => {
+        const optionToDeselect = selectedOptions[detail.itemIndex];
+        updateSelectedOption(optionToDeselect);
+        const targetRef = getTriggerProps().ref;
+        if (targetRef.current) {
+            targetRef.current.focus();
+        }
+    };
+    return {
+        isOpen,
+        tokens,
+        announcement,
+        dropdownStatus,
+        filteringValue,
+        filteredOptions,
+        highlightType,
+        scrollToIndex,
+        getFilterProps,
+        getTriggerProps,
+        getMenuProps: () => (Object.assign(Object.assign({}, getMenuProps()), { onLoadMore: handleLoadMore, ariaLabelledby: joinStrings(ariaLabelId, controlId), ariaDescribedby: dropdownStatus.content ? footerId : undefined })),
+        getOptionProps,
+        getTokenProps: () => ({ onDismiss: tokenOnDismiss }),
+        getDropdownProps: () => (Object.assign(Object.assign({}, getDropdownProps()), { onMouseDown: dropdownOnMouseDown })),
+        getWrapperProps: () => ({ onKeyDown: wrapperOnKeyDown }),
+    };
+}
+//# sourceMappingURL=use-multiselect.js.map

package/lib/internal/template/multiselect/use-multiselect.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-multiselect.js","sourceRoot":"","sources":["../../../src/multiselect/use-multiselect.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, { useCallback, useEffect, useRef } from 'react';\n\nimport { warnOnce } from '@cloudscape-design/component-toolkit/internal';\n\nimport { useInternalI18n } from '../i18n/context';\nimport { DropdownStatusProps, useDropdownStatus } from '../internal/components/dropdown-status';\nimport { OptionDefinition, OptionGroup } from '../internal/components/option/interfaces';\nimport { isGroup } from '../internal/components/option/utils/filter-options';\nimport { prepareOptions } from '../internal/components/option/utils/prepare-options';\nimport { fireNonCancelableEvent } from '../internal/events';\nimport { SomeRequired } from '../internal/types';\nimport { joinStrings } from '../internal/utils/strings';\nimport { SelectListProps } from '../select/parts/plain-list';\nimport { checkOptionValueField } from '../select/utils/check-option-value-field.js';\nimport { findOptionIndex } from '../select/utils/connect-options';\nimport { useAnnouncement } from '../select/utils/use-announcement';\nimport { useLoadItems } from '../select/utils/use-load-items';\nimport { useNativeSearch } from '../select/utils/use-native-search';\nimport { useSelect } from '../select/utils/use-select';\nimport { TokenGroupProps } from '../token-group/interfaces';\nimport { MultiselectProps } from './interfaces';\n\ntype UseMultiselectOptions = SomeRequired<\n  Pick<\n    MultiselectProps,\n    | 'options'\n    | 'selectedOptions'\n    | 'filteringType'\n    | 'filteringResultsText'\n    | 'disabled'\n    | 'noMatch'\n    | 'renderHighlightedAriaLive'\n    | 'deselectAriaLabel'\n    | 'keepOpen'\n    | 'onBlur'\n    | 'onFocus'\n    | 'onLoadItems'\n    | 'onChange'\n    | 'selectedAriaLabel'\n  > &\n    DropdownStatusProps & {\n      controlId: string;\n      ariaLabelId: string;\n      footerId: string;\n      filteringValue: string;\n      setFilteringValue: (value: string) => void;\n      externalRef: React.Ref<MultiselectProps.Ref>;\n    },\n  'options' | 'selectedOptions' | 'filteringType' | 'statusType' | 'keepOpen'\n>;\n\nexport function useMultiselect({\n  options,\n  filteringType,\n  filteringResultsText,\n  disabled,\n  statusType,\n  empty,\n  loadingText,\n  finishedText,\n  errorText,\n  noMatch,\n  renderHighlightedAriaLive,\n  selectedOptions,\n  deselectAriaLabel,\n  keepOpen,\n  onBlur,\n  onFocus,\n  onLoadItems,\n  onChange,\n  controlId,\n  ariaLabelId,\n  footerId,\n  filteringValue,\n  setFilteringValue,\n  externalRef,\n  ...restProps\n}: UseMultiselectOptions) {\n  checkOptionValueField('Multiselect', 'options', options);\n\n  const i18n = useInternalI18n('multiselect');\n  const i18nCommon = useInternalI18n('select');\n  const recoveryText = i18nCommon('recoveryText', restProps.recoveryText);\n  const errorIconAriaLabel = i18nCommon('errorIconAriaLabel', restProps.errorIconAriaLabel);\n  const selectedAriaLabel = i18nCommon('selectedAriaLabel', restProps.selectedAriaLabel);\n\n  if (restProps.recoveryText && !onLoadItems) {\n    warnOnce('Multiselect', '`onLoadItems` must be provided for `recoveryText` to be displayed.');\n  }\n\n  const { handleLoadMore, handleRecoveryClick, fireLoadItems } = useLoadItems({\n    onLoadItems,\n    options,\n    statusType,\n  });\n  const useInteractiveGroups = true;\n  const { filteredOptions, parentMap, totalCount, matchesCount } = prepareOptions(\n    options,\n    filteringType,\n    filteringValue\n  );\n\n  const updateSelectedOption = useCallback(\n    (option: OptionDefinition | OptionGroup) => {\n      const filtered = filteredOptions.filter(item => item.type !== 'parent').map(item => item.option);\n\n      // switch between selection and deselection behavior, ignores disabled options to prevent\n      // getting stuck on one behavior when an option is disabled and its state cannot be changed\n      const isAllChildrenSelected = (optionsArray: OptionDefinition[]) =>\n        optionsArray.every(item => findOptionIndex(selectedOptions, item) > -1 || item.disabled);\n      const intersection = (visibleOptions: OptionDefinition[], options: OptionDefinition[]) =>\n        visibleOptions.filter(item => findOptionIndex(options, item) > -1 && !item.disabled);\n      const union = (visibleOptions: OptionDefinition[], options: OptionDefinition[]) =>\n        visibleOptions.filter(item => findOptionIndex(options, item) === -1).concat(options);\n      const select = (options: OptionDefinition[], selectedOptions: OptionDefinition[]) => {\n        return union(selectedOptions, options);\n      };\n      const unselect = (options: OptionDefinition[], selectedOptions: OptionDefinition[]) => {\n        return selectedOptions.filter(option => findOptionIndex(options, option) === -1);\n      };\n      let newSelectedOptions = [...selectedOptions];\n\n      if (isGroup(option)) {\n        const visibleOptions = intersection([...option.options], filtered);\n        newSelectedOptions = isAllChildrenSelected(visibleOptions)\n          ? unselect(visibleOptions, newSelectedOptions)\n          : select(visibleOptions, newSelectedOptions);\n      } else {\n        newSelectedOptions = isAllChildrenSelected([option])\n          ? unselect([option], newSelectedOptions)\n          : select([option], newSelectedOptions);\n      }\n\n      fireNonCancelableEvent(onChange, {\n        selectedOptions: newSelectedOptions,\n      });\n    },\n    [onChange, selectedOptions, filteredOptions]\n  );\n\n  const scrollToIndex = useRef<SelectListProps.SelectListRef>(null);\n  const {\n    isOpen,\n    highlightType,\n    highlightedOption,\n    highlightedIndex,\n    getTriggerProps,\n    getDropdownProps,\n    getFilterProps,\n    getMenuProps,\n    getOptionProps,\n    highlightOption,\n    announceSelected,\n  } = useSelect({\n    selectedOptions,\n    updateSelectedOption,\n    options: filteredOptions,\n    filteringType,\n    onFocus,\n    onBlur,\n    externalRef,\n    keepOpen,\n    fireLoadItems,\n    setFilteringValue,\n    useInteractiveGroups,\n    statusType,\n  });\n\n  const wrapperOnKeyDown = useNativeSearch({\n    isEnabled: filteringType === 'none' && isOpen,\n    options: filteredOptions,\n    highlightOption: highlightOption,\n    highlightedOption: highlightedOption?.option,\n    useInteractiveGroups,\n  });\n\n  const isEmpty = !options || options.length === 0;\n  const isNoMatch = filteredOptions && filteredOptions.length === 0;\n  const isFiltered =\n    filteringType !== 'none' && filteringValue.length > 0 && filteredOptions && filteredOptions.length > 0;\n  const filteredText = isFiltered ? filteringResultsText?.(matchesCount, totalCount) : undefined;\n  const dropdownStatus = useDropdownStatus({\n    statusType,\n    empty,\n    loadingText,\n    finishedText,\n    errorText,\n    recoveryText,\n    isEmpty,\n    isNoMatch,\n    noMatch,\n    isFiltered,\n    filteringResultsText: filteredText,\n    onRecoveryClick: handleRecoveryClick,\n    errorIconAriaLabel: errorIconAriaLabel,\n    hasRecoveryCallback: !!onLoadItems,\n  });\n\n  const announcement = useAnnouncement({\n    announceSelected,\n    highlightedOption,\n    getParent: option => parentMap.get(option)?.option as undefined | OptionGroup,\n    selectedAriaLabel,\n    renderHighlightedAriaLive,\n  });\n\n  const tokens: TokenGroupProps['items'] = selectedOptions.map(option => ({\n    label: option.label,\n    disabled: disabled || option.disabled,\n    labelTag: option.labelTag,\n    description: option.description,\n    iconAlt: option.iconAlt,\n    iconName: option.iconName,\n    iconUrl: option.iconUrl,\n    iconSvg: option.iconSvg,\n    tags: option.tags,\n    dismissLabel: i18n('deselectAriaLabel', deselectAriaLabel?.(option), format =>\n      format({ option__label: option.label ?? '' })\n    ),\n  }));\n\n  useEffect(() => {\n    scrollToIndex.current?.(highlightedIndex);\n  }, [highlightedIndex]);\n\n  const dropdownOnMouseDown = (event: React.MouseEvent) => {\n    const target = event.target as HTMLElement;\n\n    if (target !== document.activeElement) {\n      // prevent currently focused element from losing it\n      event.preventDefault();\n    }\n  };\n\n  const tokenOnDismiss: TokenGroupProps['onDismiss'] = ({ detail }) => {\n    const optionToDeselect = selectedOptions[detail.itemIndex];\n    updateSelectedOption(optionToDeselect);\n    const targetRef = getTriggerProps().ref;\n    if (targetRef.current) {\n      targetRef.current.focus();\n    }\n  };\n\n  return {\n    isOpen,\n    tokens,\n    announcement,\n    dropdownStatus,\n    filteringValue,\n    filteredOptions,\n    highlightType,\n    scrollToIndex,\n    getFilterProps,\n    getTriggerProps,\n    getMenuProps: () => ({\n      ...getMenuProps(),\n      onLoadMore: handleLoadMore,\n      ariaLabelledby: joinStrings(ariaLabelId, controlId),\n      ariaDescribedby: dropdownStatus.content ? footerId : undefined,\n    }),\n    getOptionProps,\n    getTokenProps: () => ({ onDismiss: tokenOnDismiss }),\n    getDropdownProps: () => ({ ...getDropdownProps(), onMouseDown: dropdownOnMouseDown }),\n    getWrapperProps: () => ({ onKeyDown: wrapperOnKeyDown }),\n  };\n}\n"]}

package/lib/internal/template/prompt-input/interfaces.d.ts

@@ -64,6 +64,22 @@ export interface PromptInputProps extends BaseInputProps, InputKeyEvents, InputA
      * Specifies the maximum number of lines of text the textarea will expand to.
      */
     maxRows?: number;
+    /**
+     * Use this slot to add secondary actions to the prompt input.
+     */
+    secondaryActions?: React.ReactNode;
+    /**
+     * Use this slot to add secondary content, such as file attachments, to the prompt input.
+     */
+    secondaryContent?: React.ReactNode;
+    /**
+     * Determines whether the secondary actions area of the input has padding. If true, removes the default padding from the secondary actions area.
+     */
+    disableSecondaryActionsPaddings?: boolean;
+    /**
+     * Determines whether the secondary content area of the input has padding. If true, removes the default padding from the secondary content area.
+     */
+    disableSecondaryContentPaddings?: boolean;
 }
 export declare namespace PromptInputProps {
     type KeyDetail = BaseKeyDetail;

package/lib/internal/template/prompt-input/interfaces.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"interfaces.d.ts","sourceRoot":"","sources":["../../../src/prompt-input/interfaces.ts"],"names":[],"mappings":";AAEA,OAAO,EAAE,SAAS,EAAE,MAAM,oBAAoB,CAAC;AAC/C,OAAO,EACL,gBAAgB,EAChB,cAAc,EACd,iBAAiB,EACjB,gBAAgB,EAChB,cAAc,EACd,eAAe,EAChB,MAAM,qBAAqB,CAAC;AAC7B,OAAO,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AAChE,OAAO,EAAE,+BAA+B,EAAE,MAAM,wCAAwC,CAAC;AACzF,OAAO,EAAE,aAAa,EAAE,yBAAyB,EAAE,MAAM,oBAAoB,CAAC;AAE9E,MAAM,WAAW,gBACf,SAAQ,cAAc,EACpB,cAAc,EACd,gBAAgB,EAChB,iBAAiB,EACjB,eAAe,EACf,kBAAkB,EAClB,+BAA+B;IACjC;;;OAGG;IACH,QAAQ,CAAC,EAAE,yBAAyB,CAAC,gBAAgB,CAAC,YAAY,CAAC,CAAC;IACpE;;OAEG;IACH,oBAAoB,CAAC,EAAE,SAAS,CAAC,IAAI,CAAC;IACtC;;;;OAIG;IACH,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B;;;;;;;;;;;;;;;;;;;;OAoBG;IACH,mBAAmB,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACtC;;;OAGG;IACH,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B;;;OAGG;IACH,qBAAqB,CAAC,EAAE,MAAM,CAAC;IAE/B;;OAEG;IACH,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAE9B;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IAEjB;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB;AAED,yBAAiB,gBAAgB,CAAC;IAChC,KAAY,SAAS,GAAG,aAAa,CAAC;IACtC,KAAY,YAAY,GAAG,gBAAgB,CAAC;IAE5C,UAAiB,GAAG;QAClB;;WAEG;QACH,KAAK,IAAI,IAAI,CAAC;QAEd;;WAEG;QACH,MAAM,IAAI,IAAI,CAAC;KAChB;CACF"}
+{"version":3,"file":"interfaces.d.ts","sourceRoot":"","sources":["../../../src/prompt-input/interfaces.ts"],"names":[],"mappings":";AAEA,OAAO,EAAE,SAAS,EAAE,MAAM,oBAAoB,CAAC;AAC/C,OAAO,EACL,gBAAgB,EAChB,cAAc,EACd,iBAAiB,EACjB,gBAAgB,EAChB,cAAc,EACd,eAAe,EAChB,MAAM,qBAAqB,CAAC;AAC7B,OAAO,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AAChE,OAAO,EAAE,+BAA+B,EAAE,MAAM,wCAAwC,CAAC;AACzF,OAAO,EAAE,aAAa,EAAE,yBAAyB,EAAE,MAAM,oBAAoB,CAAC;AAE9E,MAAM,WAAW,gBACf,SAAQ,cAAc,EACpB,cAAc,EACd,gBAAgB,EAChB,iBAAiB,EACjB,eAAe,EACf,kBAAkB,EAClB,+BAA+B;IACjC;;;OAGG;IACH,QAAQ,CAAC,EAAE,yBAAyB,CAAC,gBAAgB,CAAC,YAAY,CAAC,CAAC;IACpE;;OAEG;IACH,oBAAoB,CAAC,EAAE,SAAS,CAAC,IAAI,CAAC;IACtC;;;;OAIG;IACH,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B;;;;;;;;;;;;;;;;;;;;OAoBG;IACH,mBAAmB,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACtC;;;OAGG;IACH,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B;;;OAGG;IACH,qBAAqB,CAAC,EAAE,MAAM,CAAC;IAE/B;;OAEG;IACH,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAE9B;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IAEjB;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IAEjB;;OAEG;IACH,gBAAgB,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAEnC;;OAEG;IACH,gBAAgB,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAEnC;;OAEG;IACH,+BAA+B,CAAC,EAAE,OAAO,CAAC;IAE1C;;OAEG;IACH,+BAA+B,CAAC,EAAE,OAAO,CAAC;CAC3C;AAED,yBAAiB,gBAAgB,CAAC;IAChC,KAAY,SAAS,GAAG,aAAa,CAAC;IACtC,KAAY,YAAY,GAAG,gBAAgB,CAAC;IAE5C,UAAiB,GAAG;QAClB;;WAEG;QACH,KAAK,IAAI,IAAI,CAAC;QAEd;;WAEG;QACH,MAAM,IAAI,IAAI,CAAC;KAChB;CACF"}