@cloudscape-design/components-themeable 3.0.0

package/internal/template/multiselect/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/multiselect/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,EAAE,gBAAgB,EAAE,MAAM,cAAc,CAAC;AAGhD,OAAO,EAAE,gBAAgB,EAAE,CAAC;AAE5B,QAAA,MAAM,WAAW,+FA4BhB,CAAC;AAGF,eAAe,WAAW,CAAC"}

package/internal/template/multiselect/index.js

@@ -0,0 +1,15 @@
+import { __assign, __rest } from "tslib";
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import React from 'react';
+import useBaseComponent from '../internal/hooks/use-base-component';
+import { applyDisplayName } from '../internal/utils/apply-display-name';
+import InternalMultiselect from './internal';
+var Multiselect = React.forwardRef(function (_a, ref) {
+    var _b = _a.options, options = _b === void 0 ? [] : _b, _c = _a.filteringType, filteringType = _c === void 0 ? 'none' : _c, _d = _a.statusType, statusType = _d === void 0 ? 'finished' : _d, _e = _a.selectedOptions, selectedOptions = _e === void 0 ? [] : _e, _f = _a.keepOpen, keepOpen = _f === void 0 ? true : _f, _g = _a.hideTokens, hideTokens = _g === void 0 ? false : _g, restProps = __rest(_a, ["options", "filteringType", "statusType", "selectedOptions", "keepOpen", "hideTokens"]);
+    var baseComponentProps = useBaseComponent('Multiselect');
+    return (React.createElement(InternalMultiselect, __assign({ options: options, filteringType: filteringType, statusType: statusType, selectedOptions: selectedOptions, keepOpen: keepOpen, hideTokens: hideTokens }, restProps, baseComponentProps, { ref: ref })));
+});
+applyDisplayName(Multiselect, 'Multiselect');
+export default Multiselect;
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/multiselect/index.tsx"],"names":[],"mappings":";AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,gBAAgB,MAAM,sCAAsC,CAAC;AACpE,OAAO,EAAE,gBAAgB,EAAE,MAAM,sCAAsC,CAAC;AAExE,OAAO,mBAAmB,MAAM,YAAY,CAAC;AAI7C,IAAM,WAAW,GAAG,KAAK,CAAC,UAAU,CAClC,UACE,EAQmB,EACnB,GAAoC;IARlC,IAAA,eAAY,EAAZ,OAAO,mBAAG,EAAE,KAAA,EACZ,qBAAsB,EAAtB,aAAa,mBAAG,MAAM,KAAA,EACtB,kBAAuB,EAAvB,UAAU,mBAAG,UAAU,KAAA,EACvB,uBAAoB,EAApB,eAAe,mBAAG,EAAE,KAAA,EACpB,gBAAe,EAAf,QAAQ,mBAAG,IAAI,KAAA,EACf,kBAAkB,EAAlB,UAAU,mBAAG,KAAK,KAAA,EACf,SAAS,cAPd,uFAQC,CADa;IAId,IAAM,kBAAkB,GAAG,gBAAgB,CAAC,aAAa,CAAC,CAAC;IAC3D,OAAO,CACL,oBAAC,mBAAmB,aAClB,OAAO,EAAE,OAAO,EAChB,aAAa,EAAE,aAAa,EAC5B,UAAU,EAAE,UAAU,EACtB,eAAe,EAAE,eAAe,EAChC,QAAQ,EAAE,QAAQ,EAClB,UAAU,EAAE,UAAU,IAClB,SAAS,EACT,kBAAkB,IACtB,GAAG,EAAE,GAAG,IACR,CACH,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,gBAAgB,CAAC,WAAW,EAAE,aAAa,CAAC,CAAC;AAC7C,eAAe,WAAW,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React from 'react';\nimport useBaseComponent from '../internal/hooks/use-base-component';\nimport { applyDisplayName } from '../internal/utils/apply-display-name';\nimport { MultiselectProps } from './interfaces';\nimport InternalMultiselect from './internal';\n\nexport { MultiselectProps };\n\nconst Multiselect = React.forwardRef(\n  (\n    {\n      options = [],\n      filteringType = 'none',\n      statusType = 'finished',\n      selectedOptions = [],\n      keepOpen = true,\n      hideTokens = false,\n      ...restProps\n    }: MultiselectProps,\n    ref: React.Ref<MultiselectProps.Ref>\n  ) => {\n    const baseComponentProps = useBaseComponent('Multiselect');\n    return (\n      <InternalMultiselect\n        options={options}\n        filteringType={filteringType}\n        statusType={statusType}\n        selectedOptions={selectedOptions}\n        keepOpen={keepOpen}\n        hideTokens={hideTokens}\n        {...restProps}\n        {...baseComponentProps}\n        ref={ref}\n      />\n    );\n  }\n);\n\napplyDisplayName(Multiselect, 'Multiselect');\nexport default Multiselect;\n"]}

package/internal/template/multiselect/interfaces.d.ts

@@ -0,0 +1,58 @@
+import { OptionDefinition, OptionGroup as OptionGroupDefinition } from '../internal/components/option/interfaces';
+import { NonCancelableEventHandler } from '../internal/events';
+import { BaseSelectProps } from '../select/interfaces';
+export interface MultiselectProps extends BaseSelectProps {
+    /**
+     * Specifies the currently selected options.
+     * Provide an empty array to clear the selection.
+     */
+    selectedOptions: ReadonlyArray<MultiselectProps.Option>;
+    /**
+     * Determines whether the dropdown list stays open after the user selects an item.
+     */
+    keepOpen?: boolean;
+    /**
+     * Specifies the maximum number of displayed tokens. If the property isn't set, all of the tokens are displayed.
+     */
+    tokenLimit?: number;
+    /**
+     * Hides the tokens displayed underneath the component.
+     * Only use this if the selected options are displayed elsewhere on the page.
+     */
+    hideTokens?: boolean;
+    /**
+     * Specifies an `aria-label` for the token deselection button.
+     */
+    deselectAriaLabel?: MultiselectProps.DeselectAriaLabelFunction;
+    /**
+     * An object containing all the localized strings required by the component.
+     * Note that the string for `tokenLimitShowMore` should not contain the number of hidden tokens
+     * because it will be added by the component automatically.
+     */
+    i18nStrings?: MultiselectProps.I18nStrings;
+    /**
+     * Called when the user selects or deselects an option.
+     * The event `detail` contains the current `selectedOptions`.
+     */
+    onChange?: NonCancelableEventHandler<MultiselectProps.MultiselectChangeDetail>;
+}
+export declare namespace MultiselectProps {
+    type Option = OptionDefinition;
+    type OptionGroup = OptionGroupDefinition;
+    type Options = ReadonlyArray<Option | OptionGroup>;
+    type DeselectAriaLabelFunction = (option: Option) => string;
+    interface I18nStrings {
+        tokenLimitShowFewer?: string;
+        tokenLimitShowMore?: string;
+    }
+    interface MultiselectChangeDetail {
+        selectedOptions: ReadonlyArray<Option>;
+    }
+    interface Ref {
+        /**
+         * Sets focus on the element without opening the dropdown or showing a visual focus indicator.
+         */
+        focus(): void;
+    }
+}
+//# sourceMappingURL=interfaces.d.ts.map

package/internal/template/multiselect/interfaces.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"interfaces.d.ts","sourceRoot":"","sources":["../../../src/multiselect/interfaces.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,gBAAgB,EAAE,WAAW,IAAI,qBAAqB,EAAE,MAAM,0CAA0C,CAAC;AAClH,OAAO,EAAE,yBAAyB,EAAE,MAAM,oBAAoB,CAAC;AAE/D,OAAO,EAAE,eAAe,EAAE,MAAM,sBAAsB,CAAC;AAEvD,MAAM,WAAW,gBAAiB,SAAQ,eAAe;IACvD;;;OAGG;IACH,eAAe,EAAE,aAAa,CAAC,gBAAgB,CAAC,MAAM,CAAC,CAAC;IACxD;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;OAEG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;OAEG;IACH,iBAAiB,CAAC,EAAE,gBAAgB,CAAC,yBAAyB,CAAC;IAC/D;;;;OAIG;IACH,WAAW,CAAC,EAAE,gBAAgB,CAAC,WAAW,CAAC;IAC3C;;;OAGG;IACH,QAAQ,CAAC,EAAE,yBAAyB,CAAC,gBAAgB,CAAC,uBAAuB,CAAC,CAAC;CAChF;AAED,yBAAiB,gBAAgB,CAAC;IAChC,KAAY,MAAM,GAAG,gBAAgB,CAAC;IACtC,KAAY,WAAW,GAAG,qBAAqB,CAAC;IAChD,KAAY,OAAO,GAAG,aAAa,CAAC,MAAM,GAAG,WAAW,CAAC,CAAC;IAC1D,KAAY,yBAAyB,GAAG,CAAC,MAAM,EAAE,MAAM,KAAK,MAAM,CAAC;IAEnE,UAAiB,WAAW;QAC1B,mBAAmB,CAAC,EAAE,MAAM,CAAC;QAC7B,kBAAkB,CAAC,EAAE,MAAM,CAAC;KAC7B;IAED,UAAiB,uBAAuB;QACtC,eAAe,EAAE,aAAa,CAAC,MAAM,CAAC,CAAC;KACxC;IAED,UAAiB,GAAG;QAClB;;WAEG;QACH,KAAK,IAAI,IAAI,CAAC;KACf;CACF"}

package/internal/template/multiselect/interfaces.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=interfaces.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"interfaces.js","sourceRoot":"","sources":["../../../src/multiselect/interfaces.ts"],"names":[],"mappings":"","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport { OptionDefinition, OptionGroup as OptionGroupDefinition } from '../internal/components/option/interfaces';\nimport { NonCancelableEventHandler } from '../internal/events';\n\nimport { BaseSelectProps } from '../select/interfaces';\n\nexport interface MultiselectProps extends BaseSelectProps {\n  /**\n   * Specifies the currently selected options.\n   * Provide an empty array to clear the selection.\n   */\n  selectedOptions: ReadonlyArray<MultiselectProps.Option>;\n  /**\n   * Determines whether the dropdown list stays open after the user selects an item.\n   */\n  keepOpen?: boolean;\n  /**\n   * Specifies the maximum number of displayed tokens. If the property isn't set, all of the tokens are displayed.\n   */\n  tokenLimit?: number;\n  /**\n   * Hides the tokens displayed underneath the component.\n   * Only use this if the selected options are displayed elsewhere on the page.\n   */\n  hideTokens?: boolean;\n  /**\n   * Specifies an `aria-label` for the token deselection button.\n   */\n  deselectAriaLabel?: MultiselectProps.DeselectAriaLabelFunction;\n  /**\n   * An object containing all the localized strings required by the component.\n   * Note that the string for `tokenLimitShowMore` should not contain the number of hidden tokens\n   * because it will be added by the component automatically.\n   */\n  i18nStrings?: MultiselectProps.I18nStrings;\n  /**\n   * Called when the user selects or deselects an option.\n   * The event `detail` contains the current `selectedOptions`.\n   */\n  onChange?: NonCancelableEventHandler<MultiselectProps.MultiselectChangeDetail>;\n}\n\nexport namespace MultiselectProps {\n  export type Option = OptionDefinition;\n  export type OptionGroup = OptionGroupDefinition;\n  export type Options = ReadonlyArray<Option | OptionGroup>;\n  export type DeselectAriaLabelFunction = (option: Option) => string;\n\n  export interface I18nStrings {\n    tokenLimitShowFewer?: string;\n    tokenLimitShowMore?: string;\n  }\n\n  export interface MultiselectChangeDetail {\n    selectedOptions: ReadonlyArray<Option>;\n  }\n\n  export interface Ref {\n    /**\n     * Sets focus on the element without opening the dropdown or showing a visual focus indicator.\n     */\n    focus(): void;\n  }\n}\n"]}

package/internal/template/multiselect/internal.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+import { InternalBaseComponentProps } from '../internal/hooks/use-base-component/index.js';
+import { MultiselectProps } from './interfaces';
+declare const InternalMultiselect: React.ForwardRefExoticComponent<MultiselectProps & InternalBaseComponentProps & React.RefAttributes<MultiselectProps.Ref>>;
+export default InternalMultiselect;
+//# sourceMappingURL=internal.d.ts.map

package/internal/template/multiselect/internal.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"internal.d.ts","sourceRoot":"","sources":["../../../src/multiselect/internal.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAmD,MAAM,OAAO,CAAC;AAIxE,OAAO,EAAE,0BAA0B,EAAE,MAAM,+CAA+C,CAAC;AA0B3F,OAAO,EAAE,gBAAgB,EAAE,MAAM,cAAc,CAAC;AAKhD,QAAA,MAAM,mBAAmB,4HA2QxB,CAAC;AAEF,eAAe,mBAAmB,CAAC"}

package/internal/template/multiselect/internal.js

@@ -0,0 +1,171 @@
+import { __assign, __rest, __spreadArray } 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 clsx from 'clsx';
+import { useMergeRefs } from '../internal/hooks/use-merge-refs';
+import { useFormFieldContext } from '../internal/context/form-field-context';
+import { getBaseProps } from '../internal/base-component';
+import { fireNonCancelableEvent } from '../internal/events';
+import { useUniqueId } from '../internal/hooks/use-unique-id';
+import { isGroup } from '../internal/components/option/utils/filter-options';
+import DropdownFooter from '../internal/components/dropdown-footer/index.js';
+import { prepareOptions } from '../internal/components/option/utils/prepare-options';
+import Dropdown from '../internal/components/dropdown';
+import { useDropdownStatus } from '../internal/components/dropdown-status';
+import { useSelect } from '../select/utils/use-select';
+import { useNativeSearch } from '../select/utils/use-native-search';
+import { useLoadItems } from '../select/utils/use-load-items';
+import { useAnnouncement } from '../select/utils/use-announcement';
+import { findOptionIndex } from '../select/utils/connect-options';
+import PlainList from '../select/parts/plain-list';
+import VirtualList from '../select/parts/virtual-list';
+import { checkOptionValueField } from '../select/utils/check-option-value-field.js';
+import Filter from '../select/parts/filter';
+import Trigger from '../select/parts/trigger';
+import TokenGroup from '../token-group/index.js';
+import styles from './styles.css.js';
+var InternalMultiselect = React.forwardRef(function (_a, externalRef) {
+    var _b;
+    var _c = _a.options, options = _c === void 0 ? [] : _c, _d = _a.filteringType, filteringType = _d === void 0 ? 'none' : _d, filteringPlaceholder = _a.filteringPlaceholder, filteringAriaLabel = _a.filteringAriaLabel, ariaRequired = _a.ariaRequired, placeholder = _a.placeholder, disabled = _a.disabled, ariaLabel = _a.ariaLabel, _e = _a.statusType, statusType = _e === void 0 ? 'finished' : _e, empty = _a.empty, loadingText = _a.loadingText, finishedText = _a.finishedText, errorText = _a.errorText, recoveryText = _a.recoveryText, noMatch = _a.noMatch, selectedAriaLabel = _a.selectedAriaLabel, renderHighlightedAriaLive = _a.renderHighlightedAriaLive, _f = _a.selectedOptions, selectedOptions = _f === void 0 ? [] : _f, deselectAriaLabel = _a.deselectAriaLabel, _g = _a.keepOpen, keepOpen = _g === void 0 ? true : _g, tokenLimit = _a.tokenLimit, i18nStrings = _a.i18nStrings, onBlur = _a.onBlur, onFocus = _a.onFocus, onLoadItems = _a.onLoadItems, onChange = _a.onChange, virtualScroll = _a.virtualScroll, _h = _a.hideTokens, hideTokens = _h === void 0 ? false : _h, expandToViewport = _a.expandToViewport, _j = _a.__internalRootRef, __internalRootRef = _j === void 0 ? null : _j, restProps = __rest(_a, ["options", "filteringType", "filteringPlaceholder", "filteringAriaLabel", "ariaRequired", "placeholder", "disabled", "ariaLabel", "statusType", "empty", "loadingText", "finishedText", "errorText", "recoveryText", "noMatch", "selectedAriaLabel", "renderHighlightedAriaLive", "selectedOptions", "deselectAriaLabel", "keepOpen", "tokenLimit", "i18nStrings", "onBlur", "onFocus", "onLoadItems", "onChange", "virtualScroll", "hideTokens", "expandToViewport", "__internalRootRef"]);
+    checkOptionValueField('Multiselect', 'options', options);
+    var baseProps = getBaseProps(restProps);
+    var formFieldContext = useFormFieldContext(restProps);
+    var _k = useLoadItems({
+        onLoadItems: onLoadItems,
+        options: options,
+        statusType: statusType
+    }), handleLoadMore = _k.handleLoadMore, handleRecoveryClick = _k.handleRecoveryClick, fireLoadItems = _k.fireLoadItems;
+    var useInteractiveGroups = true;
+    var _l = useState(''), filteringValue = _l[0], setFilteringValue = _l[1];
+    var _m = prepareOptions(options, filteringType, filteringValue), filteredOptions = _m.filteredOptions, parentMap = _m.parentMap;
+    var updateSelectedOption = useCallback(function (option) {
+        var filtered = filteredOptions.filter(function (item) { return item.type !== 'parent'; }).map(function (item) { return 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
+        var isAllChildrenSelected = function (optionsArray) {
+            return optionsArray.every(function (item) { return findOptionIndex(selectedOptions, item) > -1 || item.disabled; });
+        };
+        var intersection = function (visibleOptions, options) {
+            return visibleOptions.filter(function (item) { return findOptionIndex(options, item) > -1 && !item.disabled; });
+        };
+        var union = function (visibleOptions, options) {
+            return visibleOptions.filter(function (item) { return findOptionIndex(options, item) === -1; }).concat(options);
+        };
+        var select = function (options, selectedOptions) {
+            return union(selectedOptions, options);
+        };
+        var unselect = function (options, selectedOptions) {
+            return selectedOptions.filter(function (option) { return findOptionIndex(options, option) === -1; });
+        };
+        var newSelectedOptions = __spreadArray([], selectedOptions, true);
+        if (isGroup(option)) {
+            var visibleOptions = intersection(__spreadArray([], option.options, true), 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]);
+    var rootRef = useRef(null);
+    var selfControlId = useUniqueId('trigger');
+    var controlId = (_b = formFieldContext.controlId) !== null && _b !== void 0 ? _b : selfControlId;
+    var scrollToIndex = useRef(null);
+    var _o = useSelect({
+        selectedOptions: selectedOptions,
+        updateSelectedOption: updateSelectedOption,
+        options: filteredOptions,
+        filteringType: filteringType,
+        onFocus: onFocus,
+        onBlur: onBlur,
+        externalRef: externalRef,
+        keepOpen: keepOpen,
+        fireLoadItems: fireLoadItems,
+        setFilteringValue: setFilteringValue,
+        useInteractiveGroups: useInteractiveGroups
+    }), isOpen = _o.isOpen, highlightedOption = _o.highlightedOption, highlightedIndex = _o.highlightedIndex, getTriggerProps = _o.getTriggerProps, getFilterProps = _o.getFilterProps, getMenuProps = _o.getMenuProps, getOptionProps = _o.getOptionProps, isKeyboard = _o.isKeyboard, highlightOption = _o.highlightOption, announceSelected = _o.announceSelected;
+    var handleNativeSearch = useNativeSearch({
+        isEnabled: filteringType === 'none' && isOpen,
+        options: filteredOptions,
+        highlightOption: highlightOption,
+        highlightedOption: highlightedOption === null || highlightedOption === void 0 ? void 0 : highlightedOption.option,
+        isKeyboard: isKeyboard,
+        useInteractiveGroups: useInteractiveGroups
+    });
+    var isEmpty = !options || options.length === 0;
+    var isNoMatch = filteredOptions && filteredOptions.length === 0;
+    var dropdownStatus = useDropdownStatus({
+        statusType: statusType,
+        empty: empty,
+        loadingText: loadingText,
+        finishedText: finishedText,
+        errorText: errorText,
+        recoveryText: recoveryText,
+        isEmpty: isEmpty,
+        isNoMatch: isNoMatch,
+        noMatch: noMatch,
+        onRecoveryClick: handleRecoveryClick
+    });
+    var filter = (React.createElement(Filter, __assign({ filteringType: filteringType, placeholder: filteringPlaceholder, ariaLabel: filteringAriaLabel, ariaRequired: ariaRequired, value: filteringValue }, getFilterProps())));
+    var trigger = (React.createElement(Trigger, __assign({ placeholder: placeholder, disabled: disabled, ariaLabel: ariaLabel, triggerProps: getTriggerProps(disabled), selectedOption: null, isOpen: isOpen }, formFieldContext, { controlId: controlId })));
+    var menuProps = __assign(__assign({}, getMenuProps()), { onLoadMore: handleLoadMore, ariaLabelledby: controlId });
+    var announcement = useAnnouncement({
+        announceSelected: announceSelected,
+        highlightedOption: highlightedOption,
+        getParent: function (option) { var _a; return (_a = parentMap.get(option)) === null || _a === void 0 ? void 0 : _a.option; },
+        selectedAriaLabel: selectedAriaLabel,
+        renderHighlightedAriaLive: renderHighlightedAriaLive
+    });
+    var tokens = selectedOptions.map(function (option) { return ({
+        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: deselectAriaLabel ? deselectAriaLabel(option) : undefined
+    }); });
+    useEffect(function () {
+        var _a;
+        (_a = scrollToIndex.current) === null || _a === void 0 ? void 0 : _a.call(scrollToIndex, highlightedIndex);
+    }, [highlightedIndex]);
+    var ListComponent = virtualScroll ? VirtualList : PlainList;
+    var handleMouseDown = function (event) {
+        var target = event.target;
+        if (target !== document.activeElement) {
+            // prevent currently focused element from losing it
+            event.preventDefault();
+        }
+    };
+    var showTokens = !hideTokens && tokens.length > 0;
+    var handleTokenDismiss = function (_a) {
+        var detail = _a.detail;
+        var optionToDeselect = selectedOptions[detail.itemIndex];
+        updateSelectedOption(optionToDeselect);
+        var targetRef = getTriggerProps().ref;
+        if (targetRef.current) {
+            targetRef.current.focus();
+        }
+    };
+    var tokenGroupI18nStrings = {
+        limitShowFewer: i18nStrings === null || i18nStrings === void 0 ? void 0 : i18nStrings.tokenLimitShowFewer,
+        limitShowMore: i18nStrings === null || i18nStrings === void 0 ? void 0 : i18nStrings.tokenLimitShowMore
+    };
+    var mergedRef = useMergeRefs(rootRef, __internalRootRef);
+    return (React.createElement("div", __assign({}, baseProps, { ref: mergedRef, className: clsx(styles.root, baseProps.className), onKeyPress: handleNativeSearch }),
+        React.createElement(Dropdown, { open: isOpen, trigger: trigger, header: filter, onMouseDown: handleMouseDown, footer: dropdownStatus.isSticky ? React.createElement(DropdownFooter, { content: dropdownStatus.content }) : null, expandToViewport: expandToViewport },
+            React.createElement(ListComponent, { listBottom: !dropdownStatus.isSticky ? React.createElement(DropdownFooter, { content: dropdownStatus.content }) : null, menuProps: menuProps, getOptionProps: getOptionProps, filteredOptions: filteredOptions, filteringValue: filteringValue, isKeyboard: isKeyboard.current, ref: scrollToIndex, hasDropdownStatus: dropdownStatus.content !== null, checkboxes: true, useInteractiveGroups: useInteractiveGroups, screenReaderContent: announcement })),
+        showTokens && (React.createElement(TokenGroup, { limit: tokenLimit, items: tokens, onDismiss: handleTokenDismiss, i18nStrings: tokenGroupI18nStrings }))));
+});
+export default InternalMultiselect;
+//# sourceMappingURL=internal.js.map

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

@@ -0,0 +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';\nimport { useMergeRefs } from '../internal/hooks/use-merge-refs';\n\nimport { InternalBaseComponentProps } from '../internal/hooks/use-base-component/index.js';\nimport { useFormFieldContext } from '../internal/context/form-field-context';\nimport { getBaseProps } from '../internal/base-component';\nimport { fireNonCancelableEvent } from '../internal/events';\nimport { useUniqueId } from '../internal/hooks/use-unique-id';\nimport { isGroup } from '../internal/components/option/utils/filter-options';\n\nimport DropdownFooter from '../internal/components/dropdown-footer/index.js';\nimport { prepareOptions } from '../internal/components/option/utils/prepare-options';\nimport { OptionDefinition, OptionGroup } from '../internal/components/option/interfaces';\nimport Dropdown from '../internal/components/dropdown';\nimport { useDropdownStatus } from '../internal/components/dropdown-status';\n\nimport { useSelect, MenuProps } from '../select/utils/use-select';\nimport { useNativeSearch } from '../select/utils/use-native-search';\nimport { useLoadItems } from '../select/utils/use-load-items';\nimport { useAnnouncement } from '../select/utils/use-announcement';\nimport { findOptionIndex } from '../select/utils/connect-options';\nimport PlainList, { SelectListProps } from '../select/parts/plain-list';\nimport VirtualList from '../select/parts/virtual-list';\nimport { checkOptionValueField } from '../select/utils/check-option-value-field.js';\nimport Filter from '../select/parts/filter';\nimport Trigger from '../select/parts/trigger';\n\nimport TokenGroup, { TokenGroupProps } from '../token-group/index.js';\n\nimport { MultiselectProps } from './interfaces';\nimport styles from './styles.css.js';\n\ntype InternalMultiselectProps = MultiselectProps & InternalBaseComponentProps;\n\nconst InternalMultiselect = React.forwardRef(\n  (\n    {\n      options = [],\n      filteringType = 'none',\n      filteringPlaceholder,\n      filteringAriaLabel,\n      ariaRequired,\n      placeholder,\n      disabled,\n      ariaLabel,\n      statusType = 'finished',\n      empty,\n      loadingText,\n      finishedText,\n      errorText,\n      recoveryText,\n      noMatch,\n      selectedAriaLabel,\n      renderHighlightedAriaLive,\n      selectedOptions = [],\n      deselectAriaLabel,\n      keepOpen = true,\n      tokenLimit,\n      i18nStrings,\n      onBlur,\n      onFocus,\n      onLoadItems,\n      onChange,\n      virtualScroll,\n      hideTokens = false,\n      expandToViewport,\n      __internalRootRef = null,\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\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 } = prepareOptions(options, filteringType, filteringValue);\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 scrollToIndex = useRef<SelectListProps.SelectListRef>(null);\n    const {\n      isOpen,\n      highlightedOption,\n      highlightedIndex,\n      getTriggerProps,\n      getFilterProps,\n      getMenuProps,\n      getOptionProps,\n      isKeyboard,\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    });\n\n    const handleNativeSearch = useNativeSearch({\n      isEnabled: filteringType === 'none' && isOpen,\n      options: filteredOptions,\n      highlightOption: highlightOption,\n      highlightedOption: highlightedOption?.option,\n      isKeyboard,\n      useInteractiveGroups,\n    });\n\n    const isEmpty = !options || options.length === 0;\n    const isNoMatch = filteredOptions && filteredOptions.length === 0;\n    const dropdownStatus = useDropdownStatus({\n      statusType,\n      empty,\n      loadingText,\n      finishedText,\n      errorText,\n      recoveryText,\n      isEmpty,\n      isNoMatch,\n      noMatch,\n      onRecoveryClick: handleRecoveryClick,\n    });\n\n    const filter = (\n      <Filter\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        ariaLabel={ariaLabel}\n        triggerProps={getTriggerProps(disabled)}\n        selectedOption={null}\n        isOpen={isOpen}\n        {...formFieldContext}\n        controlId={controlId}\n      />\n    );\n\n    const menuProps: MenuProps = {\n      ...getMenuProps(),\n      onLoadMore: handleLoadMore,\n      ariaLabelledby: controlId,\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: deselectAriaLabel ? deselectAriaLabel(option) : undefined,\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 && 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    return (\n      <div\n        {...baseProps}\n        ref={mergedRef}\n        className={clsx(styles.root, baseProps.className)}\n        onKeyPress={handleNativeSearch}\n      >\n        <Dropdown\n          open={isOpen}\n          trigger={trigger}\n          header={filter}\n          onMouseDown={handleMouseDown}\n          footer={dropdownStatus.isSticky ? <DropdownFooter content={dropdownStatus.content} /> : null}\n          expandToViewport={expandToViewport}\n        >\n          <ListComponent\n            listBottom={!dropdownStatus.isSticky ? <DropdownFooter content={dropdownStatus.content} /> : null}\n            menuProps={menuProps}\n            getOptionProps={getOptionProps}\n            filteredOptions={filteredOptions}\n            filteringValue={filteringValue}\n            isKeyboard={isKeyboard.current}\n            ref={scrollToIndex}\n            hasDropdownStatus={dropdownStatus.content !== null}\n            checkboxes={true}\n            useInteractiveGroups={useInteractiveGroups}\n            screenReaderContent={announcement}\n          />\n        </Dropdown>\n        {showTokens && (\n          <TokenGroup\n            limit={tokenLimit}\n            items={tokens}\n            onDismiss={handleTokenDismiss}\n            i18nStrings={tokenGroupI18nStrings}\n          />\n        )}\n      </div>\n    );\n  }\n);\n\nexport default InternalMultiselect;\n"]}

package/internal/template/multiselect/styles.css.js

@@ -0,0 +1,6 @@
+
+    import './styles.scoped.css';
+    export default {
+  "root": "awsui_root_f8g6q_wid5c_93"
+};
+  

package/internal/template/multiselect/styles.scoped.css

@@ -0,0 +1,133 @@
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/* stylelint-disable @cloudscape-design/no-motion-outside-of-mixin, selector-combinator-disallowed-list, selector-pseudo-class-no-unknown, selector-class-pattern */
+/* stylelint-enable @cloudscape-design/no-motion-outside-of-mixin, selector-combinator-disallowed-list, selector-pseudo-class-no-unknown, selector-class-pattern */
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/* Style used for links in slots/components that are text heavy, to help links stand out among 
+surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F73#description */
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+.awsui_root_f8g6q_wid5c_93:not(#\9) {
+  /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
+  border-collapse: separate;
+  border-spacing: 0;
+  caption-side: top;
+  cursor: auto;
+  direction: ltr;
+  empty-cells: show;
+  font-family: serif;
+  font-size: medium;
+  font-style: normal;
+  font-variant: normal;
+  font-weight: normal;
+  font-stretch: normal;
+  line-height: normal;
+  -webkit-hyphens: none;
+      -ms-hyphens: none;
+          hyphens: none;
+  letter-spacing: normal;
+  list-style: disc outside none;
+  tab-size: 8;
+  text-align: left;
+  text-align-last: auto;
+  text-indent: 0;
+  text-shadow: none;
+  text-transform: none;
+  visibility: visible;
+  white-space: normal;
+  widows: 2;
+  word-spacing: normal;
+  box-sizing: border-box;
+  font-size: 14px;
+  font-size: var(--font-body-m-size-sregvd, 14px);
+  line-height: 22px;
+  line-height: var(--font-body-m-line-height-i7xxvv, 22px);
+  color: #16191f;
+  color: var(--color-text-body-default-7m2b3r, #16191f);
+  font-weight: 400;
+  font-family: "Noto Sans", "Helvetica Neue", Roboto, Arial, sans-serif;
+  font-family: var(--font-family-base-mylvzb, "Noto Sans", "Helvetica Neue", Roboto, Arial, sans-serif);
+}

package/internal/template/multiselect/styles.selectors.js

@@ -0,0 +1,7 @@
+
+    // es-module interop with Babel and Typescript
+    Object.defineProperty(exports, "__esModule", { value: true });
+    module.exports.default = {
+  "root": "awsui_root_f8g6q_wid5c_93"
+};
+