@cloudscape-design/components 3.0.110 → 3.0.112

package/select/internal.js.map

@@ -1 +1 @@
-{"version":3,"file":"internal.js","sourceRoot":"","sources":["../../../src/select/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, useRef, useEffect } from 'react';\nimport clsx from 'clsx';\nimport styles from './styles.css.js';\n\nimport Dropdown from '../internal/components/dropdown';\nimport { useDropdownStatus } from '../internal/components/dropdown-status';\nimport Filter from './parts/filter';\nimport Trigger from './parts/trigger';\nimport { useUniqueId } from '../internal/hooks/use-unique-id';\n\nimport { getBaseProps } from '../internal/base-component';\nimport { SelectProps } from './interfaces';\nimport { prepareOptions } from '../internal/components/option/utils/prepare-options';\nimport { useSelect } from './utils/use-select';\nimport { checkOptionValueField } from './utils/check-option-value-field';\nimport { useNativeSearch } from './utils/use-native-search';\nimport { fireNonCancelableEvent } from '../internal/events';\nimport { useLoadItems } from './utils/use-load-items';\nimport { useAnnouncement } from './utils/use-announcement';\nimport { useFormFieldContext } from '../internal/context/form-field-context';\nimport PlainList, { SelectListProps } from './parts/plain-list';\nimport VirtualList from './parts/virtual-list';\nimport DropdownFooter from '../internal/components/dropdown-footer';\nimport checkControlled from '../internal/hooks/check-controlled';\nimport { InternalBaseComponentProps } from '../internal/hooks/use-base-component';\nimport { useMergeRefs } from '../internal/hooks/use-merge-refs';\nimport { OptionGroup } from '../internal/components/option/interfaces.js';\nimport { SomeRequired } from '../internal/types.js';\n\nexport interface InternalSelectProps extends SomeRequired<SelectProps, 'options'>, InternalBaseComponentProps {\n  __inFilteringToken?: boolean;\n}\n\nconst InternalSelect = 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      triggerVariant = 'label',\n      selectedAriaLabel,\n      renderHighlightedAriaLive,\n      selectedOption,\n      onBlur,\n      onFocus,\n      onLoadItems,\n      onChange,\n      virtualScroll,\n      expandToViewport,\n      __inFilteringToken,\n      __internalRootRef = null,\n      ...restProps\n    }: InternalSelectProps,\n    externalRef: React.Ref<SelectProps.Ref>\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\n    checkControlled('Select', 'selectedOption', selectedOption, 'onChange', onChange);\n\n    checkOptionValueField('Select', 'options', options);\n\n    const [filteringValue, setFilteringValue] = useState('');\n\n    const { filteredOptions, parentMap } = prepareOptions(options, filteringType, filteringValue);\n\n    const rootRef = useRef<HTMLDivElement>(null);\n    const triggerRef = useRef<HTMLButtonElement>(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      highlightType,\n      highlightedOption,\n      highlightedIndex,\n      getTriggerProps,\n      getDropdownProps,\n      getFilterProps,\n      getMenuProps,\n      getOptionProps,\n      highlightOption,\n      selectOption,\n      announceSelected,\n    } = useSelect({\n      selectedOptions: selectedOption ? [selectedOption] : [],\n      updateSelectedOption: option => fireNonCancelableEvent(onChange, { selectedOption: option }),\n      options: filteredOptions,\n      filteringType,\n      onBlur,\n      onFocus,\n      externalRef,\n      fireLoadItems,\n      setFilteringValue,\n    });\n\n    const handleNativeSearch = useNativeSearch({\n      isEnabled: filteringType === 'none',\n      options: filteredOptions,\n      highlightOption: !isOpen ? selectOption : highlightOption,\n      highlightedOption: !isOpen ? selectedOption : highlightedOption?.option,\n    });\n\n    useEffect(() => {\n      scrollToIndex.current?.(highlightedIndex);\n    }, [highlightedIndex]);\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        ref={triggerRef}\n        placeholder={placeholder}\n        disabled={disabled}\n        ariaLabel={ariaLabel}\n        triggerVariant={triggerVariant}\n        triggerProps={getTriggerProps(disabled)}\n        selectedOption={selectedOption}\n        isOpen={isOpen}\n        inFilteringToken={__inFilteringToken}\n        {...formFieldContext}\n        controlId={controlId}\n      />\n    );\n\n    const menuProps = {\n      ...getMenuProps(),\n      onLoadMore: handleLoadMore,\n      ariaLabelledby: controlId,\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 announcement = useAnnouncement({\n      announceSelected,\n      highlightedOption,\n      getParent: option => parentMap.get(option)?.option as undefined | OptionGroup,\n      selectedAriaLabel,\n      renderHighlightedAriaLive,\n    });\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 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          {...getDropdownProps()}\n          open={isOpen}\n          stretchTriggerHeight={__inFilteringToken}\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            ref={scrollToIndex}\n            hasDropdownStatus={dropdownStatus.content !== null}\n            screenReaderContent={announcement}\n            highlightType={highlightType}\n          />\n        </Dropdown>\n      </div>\n    );\n  }\n);\n\nexport default InternalSelect;\n"]}
+{"version":3,"file":"internal.js","sourceRoot":"","sources":["../../../src/select/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, useRef, useEffect } from 'react';\nimport clsx from 'clsx';\nimport styles from './styles.css.js';\n\nimport Dropdown from '../internal/components/dropdown';\nimport { useDropdownStatus } from '../internal/components/dropdown-status';\nimport Filter from './parts/filter';\nimport Trigger from './parts/trigger';\nimport { useUniqueId } from '../internal/hooks/use-unique-id';\n\nimport { getBaseProps } from '../internal/base-component';\nimport { SelectProps } from './interfaces';\nimport { prepareOptions } from '../internal/components/option/utils/prepare-options';\nimport { useSelect } from './utils/use-select';\nimport { checkOptionValueField } from './utils/check-option-value-field';\nimport { useNativeSearch } from './utils/use-native-search';\nimport { fireNonCancelableEvent } from '../internal/events';\nimport { useLoadItems } from './utils/use-load-items';\nimport { useAnnouncement } from './utils/use-announcement';\nimport { useFormFieldContext } from '../internal/context/form-field-context';\nimport PlainList, { SelectListProps } from './parts/plain-list';\nimport VirtualList from './parts/virtual-list';\nimport DropdownFooter from '../internal/components/dropdown-footer';\nimport checkControlled from '../internal/hooks/check-controlled';\nimport { InternalBaseComponentProps } from '../internal/hooks/use-base-component';\nimport { useMergeRefs } from '../internal/hooks/use-merge-refs';\nimport { OptionGroup } from '../internal/components/option/interfaces.js';\nimport { SomeRequired } from '../internal/types.js';\nimport ScreenreaderOnly from '../internal/components/screenreader-only/index.js';\nimport { joinStrings } from '../internal/utils/strings/join-strings.js';\n\nexport interface InternalSelectProps extends SomeRequired<SelectProps, 'options'>, InternalBaseComponentProps {\n  __inFilteringToken?: boolean;\n}\n\nconst InternalSelect = 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      triggerVariant = 'label',\n      selectedAriaLabel,\n      renderHighlightedAriaLive,\n      selectedOption,\n      onBlur,\n      onFocus,\n      onLoadItems,\n      onChange,\n      virtualScroll,\n      expandToViewport,\n      __inFilteringToken,\n      __internalRootRef = null,\n      ...restProps\n    }: InternalSelectProps,\n    externalRef: React.Ref<SelectProps.Ref>\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\n    checkControlled('Select', 'selectedOption', selectedOption, 'onChange', onChange);\n\n    checkOptionValueField('Select', 'options', options);\n\n    const [filteringValue, setFilteringValue] = useState('');\n\n    const { filteredOptions, parentMap } = prepareOptions(options, filteringType, filteringValue);\n\n    const rootRef = useRef<HTMLDivElement>(null);\n    const triggerRef = useRef<HTMLButtonElement>(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      highlightType,\n      highlightedOption,\n      highlightedIndex,\n      getTriggerProps,\n      getDropdownProps,\n      getFilterProps,\n      getMenuProps,\n      getOptionProps,\n      highlightOption,\n      selectOption,\n      announceSelected,\n    } = useSelect({\n      selectedOptions: selectedOption ? [selectedOption] : [],\n      updateSelectedOption: option => fireNonCancelableEvent(onChange, { selectedOption: option }),\n      options: filteredOptions,\n      filteringType,\n      onBlur,\n      onFocus,\n      externalRef,\n      fireLoadItems,\n      setFilteringValue,\n    });\n\n    const handleNativeSearch = useNativeSearch({\n      isEnabled: filteringType === 'none',\n      options: filteredOptions,\n      highlightOption: !isOpen ? selectOption : highlightOption,\n      highlightedOption: !isOpen ? selectedOption : highlightedOption?.option,\n    });\n\n    const selectAriaLabelId = useUniqueId('select-arialabel-');\n\n    useEffect(() => {\n      scrollToIndex.current?.(highlightedIndex);\n    }, [highlightedIndex]);\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        ref={triggerRef}\n        placeholder={placeholder}\n        disabled={disabled}\n        triggerVariant={triggerVariant}\n        triggerProps={getTriggerProps(disabled)}\n        selectedOption={selectedOption}\n        isOpen={isOpen}\n        inFilteringToken={__inFilteringToken}\n        {...formFieldContext}\n        controlId={controlId}\n        ariaLabelledby={joinStrings(formFieldContext.ariaLabelledby, selectAriaLabelId)}\n      />\n    );\n\n    const menuProps = {\n      ...getMenuProps(),\n      onLoadMore: handleLoadMore,\n      ariaLabelledby: joinStrings(selectAriaLabelId, controlId),\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 announcement = useAnnouncement({\n      announceSelected,\n      highlightedOption,\n      getParent: option => parentMap.get(option)?.option as undefined | OptionGroup,\n      selectedAriaLabel,\n      renderHighlightedAriaLive,\n    });\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 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          {...getDropdownProps()}\n          open={isOpen}\n          stretchTriggerHeight={__inFilteringToken}\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            ref={scrollToIndex}\n            hasDropdownStatus={dropdownStatus.content !== null}\n            screenReaderContent={announcement}\n            highlightType={highlightType}\n          />\n        </Dropdown>\n        <ScreenreaderOnly id={selectAriaLabelId}>{ariaLabel}</ScreenreaderOnly>\n      </div>\n    );\n  }\n);\n\nexport default InternalSelect;\n"]}

package/select/parts/trigger.d.ts

@@ -6,7 +6,6 @@ import { SelectTriggerProps } from '../utils/use-select';
 export interface TriggerProps extends FormFieldValidationControlProps {
     placeholder: string | undefined;
     disabled: boolean | undefined;
-    ariaLabel: string | undefined;
     triggerProps: SelectTriggerProps;
     selectedOption: OptionDefinition | null;
     isOpen?: boolean;

package/select/parts/trigger.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"trigger.d.ts","sourceRoot":"","sources":["../../../../src/select/parts/trigger.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAkB,MAAM,OAAO,CAAC;AAIvC,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAE5C,OAAO,EAAE,gBAAgB,EAAE,MAAM,6CAA6C,CAAC;AAC/E,OAAO,EAAE,+BAA+B,EAAE,MAAM,2CAA2C,CAAC;AAG5F,OAAO,EAAE,kBAAkB,EAAE,MAAM,qBAAqB,CAAC;AAGzD,MAAM,WAAW,YAAa,SAAQ,+BAA+B;IACnE,WAAW,EAAE,MAAM,GAAG,SAAS,CAAC;IAChC,QAAQ,EAAE,OAAO,GAAG,SAAS,CAAC;IAC9B,SAAS,EAAE,MAAM,GAAG,SAAS,CAAC;IAC9B,YAAY,EAAE,kBAAkB,CAAC;IACjC,cAAc,EAAE,gBAAgB,GAAG,IAAI,CAAC;IACxC,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,cAAc,CAAC,EAAE,WAAW,CAAC,cAAc,CAAC;IAC5C,gBAAgB,CAAC,EAAE,OAAO,CAAC;CAC5B;AAED,QAAA,MAAM,OAAO,wFAiEZ,CAAC;AAEF,eAAe,OAAO,CAAC"}
+{"version":3,"file":"trigger.d.ts","sourceRoot":"","sources":["../../../../src/select/parts/trigger.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAkB,MAAM,OAAO,CAAC;AAIvC,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAE5C,OAAO,EAAE,gBAAgB,EAAE,MAAM,6CAA6C,CAAC;AAC/E,OAAO,EAAE,+BAA+B,EAAE,MAAM,2CAA2C,CAAC;AAG5F,OAAO,EAAE,kBAAkB,EAAE,MAAM,qBAAqB,CAAC;AAGzD,MAAM,WAAW,YAAa,SAAQ,+BAA+B;IACnE,WAAW,EAAE,MAAM,GAAG,SAAS,CAAC;IAChC,QAAQ,EAAE,OAAO,GAAG,SAAS,CAAC;IAC9B,YAAY,EAAE,kBAAkB,CAAC;IACjC,cAAc,EAAE,gBAAgB,GAAG,IAAI,CAAC;IACxC,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,cAAc,CAAC,EAAE,WAAW,CAAC,cAAc,CAAC;IAC5C,gBAAgB,CAAC,EAAE,OAAO,CAAC;CAC5B;AAED,QAAA,MAAM,OAAO,wFAuDZ,CAAC;AAEF,eAAe,OAAO,CAAC"}

package/select/parts/trigger.js

@@ -7,28 +7,24 @@ import clsx from 'clsx';
 import ButtonTrigger from '../../internal/components/button-trigger';
 import styles from './styles.css.js';
 import Option from '../../internal/components/option';
-import { generateUniqueId, useUniqueId } from '../../internal/hooks/use-unique-id';
-import ScreenreaderOnly from '../../internal/components/screenreader-only';
+import { generateUniqueId } from '../../internal/hooks/use-unique-id';
+import { joinStrings } from '../../internal/utils/strings';
 var Trigger = React.forwardRef(function (_a, ref) {
-    var ariaLabelledby = _a.ariaLabelledby, ariaDescribedby = _a.ariaDescribedby, controlId = _a.controlId, invalid = _a.invalid, triggerProps = _a.triggerProps, selectedOption = _a.selectedOption, triggerVariant = _a.triggerVariant, inFilteringToken = _a.inFilteringToken, isOpen = _a.isOpen, placeholder = _a.placeholder, disabled = _a.disabled, ariaLabel = _a.ariaLabel;
+    var ariaLabelledby = _a.ariaLabelledby, ariaDescribedby = _a.ariaDescribedby, controlId = _a.controlId, invalid = _a.invalid, triggerProps = _a.triggerProps, selectedOption = _a.selectedOption, triggerVariant = _a.triggerVariant, inFilteringToken = _a.inFilteringToken, isOpen = _a.isOpen, placeholder = _a.placeholder, disabled = _a.disabled;
     var id = useMemo(function () { return controlId !== null && controlId !== void 0 ? controlId : generateUniqueId(); }, [controlId]);
+    var triggerContentId = generateUniqueId('trigger-content-');
     var triggerContent = null;
     if (!selectedOption) {
-        triggerContent = (React.createElement("span", { "aria-disabled": "true", className: clsx(styles.placeholder, styles.trigger), id: triggerProps.ariaLabelledby }, placeholder));
+        triggerContent = (React.createElement("span", { "aria-disabled": "true", className: clsx(styles.placeholder, styles.trigger), id: triggerContentId }, placeholder));
     }
     else if (triggerVariant === 'option') {
-        triggerContent = (React.createElement(Option, { id: triggerProps.ariaLabelledby, option: __assign(__assign({}, selectedOption), { disabled: disabled }), triggerVariant: true }));
+        triggerContent = React.createElement(Option, { id: triggerContentId, option: __assign(__assign({}, selectedOption), { disabled: disabled }), triggerVariant: true });
     }
     else {
-        triggerContent = (React.createElement("span", { id: triggerProps.ariaLabelledby, className: styles.trigger }, selectedOption.label || selectedOption.value));
+        triggerContent = (React.createElement("span", { id: triggerContentId, className: styles.trigger }, selectedOption.label || selectedOption.value));
     }
     var mergedRef = useMergeRefs(triggerProps.ref, ref);
-    var calendarDescriptionId = useUniqueId('select-arialabel-');
-    return (React.createElement(ButtonTrigger, __assign({}, triggerProps, { id: id, ref: mergedRef, pressed: isOpen, disabled: disabled, invalid: invalid, inFilteringToken: inFilteringToken, ariaDescribedby: ariaDescribedby, ariaLabelledby: [ariaLabelledby, calendarDescriptionId, triggerProps.ariaLabelledby]
-            .filter(function (label) { return !!label; })
-            .join(' ') }),
-        triggerContent,
-        React.createElement(ScreenreaderOnly, { id: calendarDescriptionId }, ariaLabel)));
+    return (React.createElement(ButtonTrigger, __assign({}, triggerProps, { id: id, ref: mergedRef, pressed: isOpen, disabled: disabled, invalid: invalid, inFilteringToken: inFilteringToken, ariaDescribedby: ariaDescribedby, ariaLabelledby: joinStrings(ariaLabelledby, triggerContentId) }), triggerContent));
 });
 export default Trigger;
 //# sourceMappingURL=trigger.js.map

package/select/parts/trigger.js.map

@@ -1 +1 @@
-{"version":3,"file":"trigger.js","sourceRoot":"","sources":["../../../../src/select/parts/trigger.tsx"],"names":[],"mappings":";AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,EAAE,YAAY,EAAE,MAAM,qCAAqC,CAAC;AACnE,OAAO,IAAI,MAAM,MAAM,CAAC;AACxB,OAAO,aAAa,MAAM,0CAA0C,CAAC;AAErE,OAAO,MAAM,MAAM,iBAAiB,CAAC;AAGrC,OAAO,MAAM,MAAM,kCAAkC,CAAC;AACtD,OAAO,EAAE,gBAAgB,EAAE,WAAW,EAAE,MAAM,oCAAoC,CAAC;AAEnF,OAAO,gBAAgB,MAAM,6CAA6C,CAAC;AAa3E,IAAM,OAAO,GAAG,KAAK,CAAC,UAAU,CAC9B,UACE,EAae,EACf,GAAiC;QAb/B,cAAc,oBAAA,EACd,eAAe,qBAAA,EACf,SAAS,eAAA,EACT,OAAO,aAAA,EACP,YAAY,kBAAA,EACZ,cAAc,oBAAA,EACd,cAAc,oBAAA,EACd,gBAAgB,sBAAA,EAChB,MAAM,YAAA,EACN,WAAW,iBAAA,EACX,QAAQ,cAAA,EACR,SAAS,eAAA;IAIX,IAAM,EAAE,GAAG,OAAO,CAAC,cAAM,OAAA,SAAS,aAAT,SAAS,cAAT,SAAS,GAAI,gBAAgB,EAAE,EAA/B,CAA+B,EAAE,CAAC,SAAS,CAAC,CAAC,CAAC;IAEvE,IAAI,cAAc,GAAG,IAAI,CAAC;IAC1B,IAAI,CAAC,cAAc,EAAE;QACnB,cAAc,GAAG,CACf,+CACgB,MAAM,EACpB,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,WAAW,EAAE,MAAM,CAAC,OAAO,CAAC,EACnD,EAAE,EAAE,YAAY,CAAC,cAAc,IAE9B,WAAW,CACP,CACR,CAAC;KACH;SAAM,IAAI,cAAc,KAAK,QAAQ,EAAE;QACtC,cAAc,GAAG,CACf,oBAAC,MAAM,IAAC,EAAE,EAAE,YAAY,CAAC,cAAc,EAAE,MAAM,wBAAO,cAAc,KAAE,QAAQ,UAAA,KAAI,cAAc,EAAE,IAAI,GAAI,CAC3G,CAAC;KACH;SAAM;QACL,cAAc,GAAG,CACf,8BAAM,EAAE,EAAE,YAAY,CAAC,cAAc,EAAE,SAAS,EAAE,MAAM,CAAC,OAAO,IAC7D,cAAc,CAAC,KAAK,IAAI,cAAc,CAAC,KAAK,CACxC,CACR,CAAC;KACH;IAED,IAAM,SAAS,GAAG,YAAY,CAAC,YAAY,CAAC,GAAG,EAAE,GAAG,CAAC,CAAC;IACtD,IAAM,qBAAqB,GAAG,WAAW,CAAC,mBAAmB,CAAC,CAAC;IAE/D,OAAO,CACL,oBAAC,aAAa,eACR,YAAY,IAChB,EAAE,EAAE,EAAE,EACN,GAAG,EAAE,SAAS,EACd,OAAO,EAAE,MAAM,EACf,QAAQ,EAAE,QAAQ,EAClB,OAAO,EAAE,OAAO,EAChB,gBAAgB,EAAE,gBAAgB,EAClC,eAAe,EAAE,eAAe,EAChC,cAAc,EAAE,CAAC,cAAc,EAAE,qBAAqB,EAAE,YAAY,CAAC,cAAc,CAAC;aACjF,MAAM,CAAC,UAAA,KAAK,IAAI,OAAA,CAAC,CAAC,KAAK,EAAP,CAAO,CAAC;aACxB,IAAI,CAAC,GAAG,CAAC;QAEX,cAAc;QACf,oBAAC,gBAAgB,IAAC,EAAE,EAAE,qBAAqB,IAAG,SAAS,CAAoB,CAC7D,CACjB,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,OAAO,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React, { useMemo } from 'react';\nimport { useMergeRefs } from '../../internal/hooks/use-merge-refs';\nimport clsx from 'clsx';\nimport ButtonTrigger from '../../internal/components/button-trigger';\nimport { SelectProps } from '../interfaces';\nimport styles from './styles.css.js';\nimport { OptionDefinition } from '../../internal/components/option/interfaces';\nimport { FormFieldValidationControlProps } from '../../internal/context/form-field-context';\nimport Option from '../../internal/components/option';\nimport { generateUniqueId, useUniqueId } from '../../internal/hooks/use-unique-id';\nimport { SelectTriggerProps } from '../utils/use-select';\nimport ScreenreaderOnly from '../../internal/components/screenreader-only';\n\nexport interface TriggerProps extends FormFieldValidationControlProps {\n  placeholder: string | undefined;\n  disabled: boolean | undefined;\n  ariaLabel: string | undefined;\n  triggerProps: SelectTriggerProps;\n  selectedOption: OptionDefinition | null;\n  isOpen?: boolean;\n  triggerVariant?: SelectProps.TriggerVariant;\n  inFilteringToken?: boolean;\n}\n\nconst Trigger = React.forwardRef(\n  (\n    {\n      ariaLabelledby,\n      ariaDescribedby,\n      controlId,\n      invalid,\n      triggerProps,\n      selectedOption,\n      triggerVariant,\n      inFilteringToken,\n      isOpen,\n      placeholder,\n      disabled,\n      ariaLabel,\n    }: TriggerProps,\n    ref: React.Ref<HTMLButtonElement>\n  ) => {\n    const id = useMemo(() => controlId ?? generateUniqueId(), [controlId]);\n\n    let triggerContent = null;\n    if (!selectedOption) {\n      triggerContent = (\n        <span\n          aria-disabled=\"true\"\n          className={clsx(styles.placeholder, styles.trigger)}\n          id={triggerProps.ariaLabelledby}\n        >\n          {placeholder}\n        </span>\n      );\n    } else if (triggerVariant === 'option') {\n      triggerContent = (\n        <Option id={triggerProps.ariaLabelledby} option={{ ...selectedOption, disabled }} triggerVariant={true} />\n      );\n    } else {\n      triggerContent = (\n        <span id={triggerProps.ariaLabelledby} className={styles.trigger}>\n          {selectedOption.label || selectedOption.value}\n        </span>\n      );\n    }\n\n    const mergedRef = useMergeRefs(triggerProps.ref, ref);\n    const calendarDescriptionId = useUniqueId('select-arialabel-');\n\n    return (\n      <ButtonTrigger\n        {...triggerProps}\n        id={id}\n        ref={mergedRef}\n        pressed={isOpen}\n        disabled={disabled}\n        invalid={invalid}\n        inFilteringToken={inFilteringToken}\n        ariaDescribedby={ariaDescribedby}\n        ariaLabelledby={[ariaLabelledby, calendarDescriptionId, triggerProps.ariaLabelledby]\n          .filter(label => !!label)\n          .join(' ')}\n      >\n        {triggerContent}\n        <ScreenreaderOnly id={calendarDescriptionId}>{ariaLabel}</ScreenreaderOnly>\n      </ButtonTrigger>\n    );\n  }\n);\n\nexport default Trigger;\n"]}
+{"version":3,"file":"trigger.js","sourceRoot":"","sources":["../../../../src/select/parts/trigger.tsx"],"names":[],"mappings":";AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,EAAE,YAAY,EAAE,MAAM,qCAAqC,CAAC;AACnE,OAAO,IAAI,MAAM,MAAM,CAAC;AACxB,OAAO,aAAa,MAAM,0CAA0C,CAAC;AAErE,OAAO,MAAM,MAAM,iBAAiB,CAAC;AAGrC,OAAO,MAAM,MAAM,kCAAkC,CAAC;AACtD,OAAO,EAAE,gBAAgB,EAAE,MAAM,oCAAoC,CAAC;AAEtE,OAAO,EAAE,WAAW,EAAE,MAAM,8BAA8B,CAAC;AAY3D,IAAM,OAAO,GAAG,KAAK,CAAC,UAAU,CAC9B,UACE,EAYe,EACf,GAAiC;QAZ/B,cAAc,oBAAA,EACd,eAAe,qBAAA,EACf,SAAS,eAAA,EACT,OAAO,aAAA,EACP,YAAY,kBAAA,EACZ,cAAc,oBAAA,EACd,cAAc,oBAAA,EACd,gBAAgB,sBAAA,EAChB,MAAM,YAAA,EACN,WAAW,iBAAA,EACX,QAAQ,cAAA;IAIV,IAAM,EAAE,GAAG,OAAO,CAAC,cAAM,OAAA,SAAS,aAAT,SAAS,cAAT,SAAS,GAAI,gBAAgB,EAAE,EAA/B,CAA+B,EAAE,CAAC,SAAS,CAAC,CAAC,CAAC;IACvE,IAAM,gBAAgB,GAAG,gBAAgB,CAAC,kBAAkB,CAAC,CAAC;IAE9D,IAAI,cAAc,GAAG,IAAI,CAAC;IAC1B,IAAI,CAAC,cAAc,EAAE;QACnB,cAAc,GAAG,CACf,+CAAoB,MAAM,EAAC,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,WAAW,EAAE,MAAM,CAAC,OAAO,CAAC,EAAE,EAAE,EAAE,gBAAgB,IACjG,WAAW,CACP,CACR,CAAC;KACH;SAAM,IAAI,cAAc,KAAK,QAAQ,EAAE;QACtC,cAAc,GAAG,oBAAC,MAAM,IAAC,EAAE,EAAE,gBAAgB,EAAE,MAAM,wBAAO,cAAc,KAAE,QAAQ,UAAA,KAAI,cAAc,EAAE,IAAI,GAAI,CAAC;KAClH;SAAM;QACL,cAAc,GAAG,CACf,8BAAM,EAAE,EAAE,gBAAgB,EAAE,SAAS,EAAE,MAAM,CAAC,OAAO,IAClD,cAAc,CAAC,KAAK,IAAI,cAAc,CAAC,KAAK,CACxC,CACR,CAAC;KACH;IAED,IAAM,SAAS,GAAG,YAAY,CAAC,YAAY,CAAC,GAAG,EAAE,GAAG,CAAC,CAAC;IAEtD,OAAO,CACL,oBAAC,aAAa,eACR,YAAY,IAChB,EAAE,EAAE,EAAE,EACN,GAAG,EAAE,SAAS,EACd,OAAO,EAAE,MAAM,EACf,QAAQ,EAAE,QAAQ,EAClB,OAAO,EAAE,OAAO,EAChB,gBAAgB,EAAE,gBAAgB,EAClC,eAAe,EAAE,eAAe,EAChC,cAAc,EAAE,WAAW,CAAC,cAAc,EAAE,gBAAgB,CAAC,KAE5D,cAAc,CACD,CACjB,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,OAAO,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React, { useMemo } from 'react';\nimport { useMergeRefs } from '../../internal/hooks/use-merge-refs';\nimport clsx from 'clsx';\nimport ButtonTrigger from '../../internal/components/button-trigger';\nimport { SelectProps } from '../interfaces';\nimport styles from './styles.css.js';\nimport { OptionDefinition } from '../../internal/components/option/interfaces';\nimport { FormFieldValidationControlProps } from '../../internal/context/form-field-context';\nimport Option from '../../internal/components/option';\nimport { generateUniqueId } from '../../internal/hooks/use-unique-id';\nimport { SelectTriggerProps } from '../utils/use-select';\nimport { joinStrings } from '../../internal/utils/strings';\n\nexport interface TriggerProps extends FormFieldValidationControlProps {\n  placeholder: string | undefined;\n  disabled: boolean | undefined;\n  triggerProps: SelectTriggerProps;\n  selectedOption: OptionDefinition | null;\n  isOpen?: boolean;\n  triggerVariant?: SelectProps.TriggerVariant;\n  inFilteringToken?: boolean;\n}\n\nconst Trigger = React.forwardRef(\n  (\n    {\n      ariaLabelledby,\n      ariaDescribedby,\n      controlId,\n      invalid,\n      triggerProps,\n      selectedOption,\n      triggerVariant,\n      inFilteringToken,\n      isOpen,\n      placeholder,\n      disabled,\n    }: TriggerProps,\n    ref: React.Ref<HTMLButtonElement>\n  ) => {\n    const id = useMemo(() => controlId ?? generateUniqueId(), [controlId]);\n    const triggerContentId = generateUniqueId('trigger-content-');\n\n    let triggerContent = null;\n    if (!selectedOption) {\n      triggerContent = (\n        <span aria-disabled=\"true\" className={clsx(styles.placeholder, styles.trigger)} id={triggerContentId}>\n          {placeholder}\n        </span>\n      );\n    } else if (triggerVariant === 'option') {\n      triggerContent = <Option id={triggerContentId} option={{ ...selectedOption, disabled }} triggerVariant={true} />;\n    } else {\n      triggerContent = (\n        <span id={triggerContentId} className={styles.trigger}>\n          {selectedOption.label || selectedOption.value}\n        </span>\n      );\n    }\n\n    const mergedRef = useMergeRefs(triggerProps.ref, ref);\n\n    return (\n      <ButtonTrigger\n        {...triggerProps}\n        id={id}\n        ref={mergedRef}\n        pressed={isOpen}\n        disabled={disabled}\n        invalid={invalid}\n        inFilteringToken={inFilteringToken}\n        ariaDescribedby={ariaDescribedby}\n        ariaLabelledby={joinStrings(ariaLabelledby, triggerContentId)}\n      >\n        {triggerContent}\n      </ButtonTrigger>\n    );\n  }\n);\n\nexport default Trigger;\n"]}

package/select/utils/use-select.d.ts

@@ -26,7 +26,6 @@ export interface SelectTriggerProps {
     ref: RefObject<HTMLButtonElement>;
     onMouseDown?: (event: CustomEvent) => void;
     onKeyDown?: (event: CustomEvent<BaseKeyDetail>) => void;
-    ariaLabelledby?: string;
     onFocus: NonCancelableEventHandler;
 }
 export interface RecoveryLinkProps {

package/select/utils/use-select.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"use-select.d.ts","sourceRoot":"","sources":["../../../../src/select/utils/use-select.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACzC,OAAO,EAAE,aAAa,EAAE,MAAM,+CAA+C,CAAC;AAC9E,OAAO,EAAE,cAAc,EAAE,gBAAgB,EAAe,MAAM,6CAA6C,CAAC;AAS5G,OAAO,EAAE,gBAAgB,EAAE,MAAM,wCAAwC,CAAC;AAC1E,OAAO,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAC9C,OAAO,EAAE,SAAS,EAAE,MAAM,eAAe,CAAC;AAE1C,OAAO,EACL,aAAa,EACb,yBAAyB,EACzB,sBAAsB,EAEvB,MAAM,uBAAuB,CAAC;AAE/B,oBAAY,SAAS,GAAG,IAAI,CAAC,gBAAgB,EAAE,UAAU,CAAC,GAAG;IAAE,GAAG,EAAE,KAAK,CAAC,SAAS,CAAC,gBAAgB,CAAC,CAAA;CAAE,CAAC;AACxG,oBAAY,cAAc,GAAG,CAAC,MAAM,EAAE,cAAc,EAAE,KAAK,EAAE,MAAM,KAAK,SAAS,CAAC;AAElF,UAAU,cAAc;IACtB,eAAe,EAAE,aAAa,CAAC,gBAAgB,CAAC,CAAC;IACjD,oBAAoB,EAAE,CAAC,MAAM,EAAE,gBAAgB,KAAK,IAAI,CAAC;IACzD,OAAO,EAAE,aAAa,CAAC,cAAc,CAAC,CAAC;IACvC,aAAa,EAAE,MAAM,CAAC;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,MAAM,CAAC,EAAE,yBAAyB,CAAC;IACnC,OAAO,CAAC,EAAE,yBAAyB,CAAC;IACpC,WAAW,EAAE,KAAK,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;IAC5B,aAAa,EAAE,CAAC,aAAa,EAAE,MAAM,KAAK,IAAI,CAAC;IAC/C,iBAAiB,EAAE,CAAC,aAAa,EAAE,MAAM,KAAK,IAAI,CAAC;IACnD,oBAAoB,CAAC,EAAE,OAAO,CAAC;CAChC;AAED,MAAM,WAAW,kBAAkB;IACjC,GAAG,EAAE,SAAS,CAAC,iBAAiB,CAAC,CAAC;IAClC,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,WAAW,KAAK,IAAI,CAAC;IAC3C,SAAS,CAAC,EAAE,CAAC,KAAK,EAAE,WAAW,CAAC,aAAa,CAAC,KAAK,IAAI,CAAC;IACxD,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,OAAO,EAAE,yBAAyB,CAAC;CACpC;AAED,MAAM,WAAW,iBAAiB;IAChC,GAAG,EAAE,SAAS,CAAC,iBAAiB,CAAC,CAAC;IAClC,MAAM,EAAE,sBAAsB,CAAC;QAAE,aAAa,EAAE,IAAI,GAAG,IAAI,CAAA;KAAE,CAAC,CAAC;CAChE;AAED,wBAAgB,SAAS,CAAC,EACxB,eAAe,EACf,oBAAoB,EACpB,OAAO,EACP,aAAa,EACb,MAAM,EACN,OAAO,EACP,WAAW,EACX,QAAQ,EACR,aAAa,EACb,iBAAiB,EACjB,oBAA4B,GAC7B,EAAE,cAAc;;;;;;4BA+Ee,KAAK,aAAa,EAAE,SAAS,GAAG,QAAQ,CAAC;;0BA0B5C,QAAQ,WAAW,CAAC;6BAyDf,cAAc,SAAS,MAAM;;;;EA6D9D"}
+{"version":3,"file":"use-select.d.ts","sourceRoot":"","sources":["../../../../src/select/utils/use-select.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACzC,OAAO,EAAE,aAAa,EAAE,MAAM,+CAA+C,CAAC;AAC9E,OAAO,EAAE,cAAc,EAAE,gBAAgB,EAAe,MAAM,6CAA6C,CAAC;AAS5G,OAAO,EAAE,gBAAgB,EAAE,MAAM,wCAAwC,CAAC;AAC1E,OAAO,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAC9C,OAAO,EAAE,SAAS,EAAE,MAAM,eAAe,CAAC;AAE1C,OAAO,EACL,aAAa,EACb,yBAAyB,EACzB,sBAAsB,EAEvB,MAAM,uBAAuB,CAAC;AAG/B,oBAAY,SAAS,GAAG,IAAI,CAAC,gBAAgB,EAAE,UAAU,CAAC,GAAG;IAAE,GAAG,EAAE,KAAK,CAAC,SAAS,CAAC,gBAAgB,CAAC,CAAA;CAAE,CAAC;AACxG,oBAAY,cAAc,GAAG,CAAC,MAAM,EAAE,cAAc,EAAE,KAAK,EAAE,MAAM,KAAK,SAAS,CAAC;AAElF,UAAU,cAAc;IACtB,eAAe,EAAE,aAAa,CAAC,gBAAgB,CAAC,CAAC;IACjD,oBAAoB,EAAE,CAAC,MAAM,EAAE,gBAAgB,KAAK,IAAI,CAAC;IACzD,OAAO,EAAE,aAAa,CAAC,cAAc,CAAC,CAAC;IACvC,aAAa,EAAE,MAAM,CAAC;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,MAAM,CAAC,EAAE,yBAAyB,CAAC;IACnC,OAAO,CAAC,EAAE,yBAAyB,CAAC;IACpC,WAAW,EAAE,KAAK,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;IAC5B,aAAa,EAAE,CAAC,aAAa,EAAE,MAAM,KAAK,IAAI,CAAC;IAC/C,iBAAiB,EAAE,CAAC,aAAa,EAAE,MAAM,KAAK,IAAI,CAAC;IACnD,oBAAoB,CAAC,EAAE,OAAO,CAAC;CAChC;AAED,MAAM,WAAW,kBAAkB;IACjC,GAAG,EAAE,SAAS,CAAC,iBAAiB,CAAC,CAAC;IAClC,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,WAAW,KAAK,IAAI,CAAC;IAC3C,SAAS,CAAC,EAAE,CAAC,KAAK,EAAE,WAAW,CAAC,aAAa,CAAC,KAAK,IAAI,CAAC;IACxD,OAAO,EAAE,yBAAyB,CAAC;CACpC;AAED,MAAM,WAAW,iBAAiB;IAChC,GAAG,EAAE,SAAS,CAAC,iBAAiB,CAAC,CAAC;IAClC,MAAM,EAAE,sBAAsB,CAAC;QAAE,aAAa,EAAE,IAAI,GAAG,IAAI,CAAA;KAAE,CAAC,CAAC;CAChE;AAED,wBAAgB,SAAS,CAAC,EACxB,eAAe,EACf,oBAAoB,EACpB,OAAO,EACP,aAAa,EACb,MAAM,EACN,OAAO,EACP,WAAW,EACX,QAAQ,EACR,aAAa,EACb,iBAAiB,EACjB,oBAA4B,GAC7B,EAAE,cAAc;;;;;;4BA+Ee,KAAK,aAAa,EAAE,SAAS,GAAG,QAAQ,CAAC;;0BAuB5C,QAAQ,WAAW,CAAC;6BAyDf,cAAc,SAAS,MAAM;;;;EA6D9D"}

package/select/utils/use-select.js

@@ -3,11 +3,12 @@ import { useEffect, useRef } from 'react';
 import { useHighlightedOption } from '../../internal/components/options-list/utils/use-highlight-option';
 import { useOpenState } from '../../internal/components/options-list/utils/use-open-state';
 import { useMenuKeyboard, useTriggerKeyboard } from '../../internal/components/options-list/utils/use-keyboard';
-import { useIds, getOptionId } from '../../internal/components/options-list/utils/use-ids';
+import { getOptionId } from '../../internal/components/options-list/utils/use-ids';
 import { connectOptionsByValue } from './connect-options';
 import useForwardFocus from '../../internal/hooks/forward-focus';
 import { usePrevious } from '../../internal/hooks/use-previous';
 import { fireNonCancelableEvent, } from '../../internal/events';
+import { useUniqueId } from '../../internal/hooks/use-unique-id';
 export function useSelect(_a) {
     var selectedOptions = _a.selectedOptions, updateSelectedOption = _a.updateSelectedOption, options = _a.options, filteringType = _a.filteringType, onBlur = _a.onBlur, onFocus = _a.onFocus, externalRef = _a.externalRef, keepOpen = _a.keepOpen, fireLoadItems = _a.fireLoadItems, setFilteringValue = _a.setFilteringValue, _b = _a.useInteractiveGroups, useInteractiveGroups = _b === void 0 ? false : _b;
     var interactivityCheck = useInteractiveGroups ? isGroupInteractive : isInteractive;
@@ -41,7 +42,7 @@ export function useSelect(_a) {
         closeDropdown();
     };
     var hasSelectedOption = __selectedOptions.length > 0;
-    var _g = useIds({ hasSelectedOption: hasSelectedOption }), selectedOptionId = _g.selectedOptionId, menuId = _g.menuId;
+    var menuId = useUniqueId('option-list');
     var highlightedOptionId = getOptionId(menuId, highlightedIndex);
     var selectOption = function (option) {
         var _a;
@@ -91,9 +92,6 @@ export function useSelect(_a) {
             };
             triggerProps.onKeyDown = triggerKeyDownHandler;
         }
-        if (hasSelectedOption) {
-            triggerProps.ariaLabelledby = selectedOptionId;
-        }
         return triggerProps;
     };
     var getFilterProps = function () {

package/select/utils/use-select.js.map

@@ -1 +1 @@
-{"version":3,"file":"use-select.js","sourceRoot":"","sources":["../../../../src/select/utils/use-select.ts"],"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, { RefObject } from 'react';\nimport { DropdownProps } from '../../internal/components/dropdown/interfaces';\nimport { DropdownOption, OptionDefinition, OptionGroup } from '../../internal/components/option/interfaces';\nimport { isInteractive, isGroupInteractive, isGroup } from '../../internal/components/option/utils/filter-options';\nimport { useEffect, useRef } from 'react';\nimport { useHighlightedOption } from '../../internal/components/options-list/utils/use-highlight-option';\nimport { useOpenState } from '../../internal/components/options-list/utils/use-open-state';\nimport { useMenuKeyboard, useTriggerKeyboard } from '../../internal/components/options-list/utils/use-keyboard';\nimport { useIds, getOptionId } from '../../internal/components/options-list/utils/use-ids';\nimport { connectOptionsByValue } from './connect-options';\nimport useForwardFocus from '../../internal/hooks/forward-focus';\nimport { OptionsListProps } from '../../internal/components/options-list';\nimport { FilterProps } from '../parts/filter';\nimport { ItemProps } from '../parts/item';\nimport { usePrevious } from '../../internal/hooks/use-previous';\nimport {\n  BaseKeyDetail,\n  NonCancelableEventHandler,\n  CancelableEventHandler,\n  fireNonCancelableEvent,\n} from '../../internal/events';\n\nexport type MenuProps = Omit<OptionsListProps, 'children'> & { ref: React.RefObject<HTMLUListElement> };\nexport type GetOptionProps = (option: DropdownOption, index: number) => ItemProps;\n\ninterface UseSelectProps {\n  selectedOptions: ReadonlyArray<OptionDefinition>;\n  updateSelectedOption: (option: OptionDefinition) => void;\n  options: ReadonlyArray<DropdownOption>;\n  filteringType: string;\n  keepOpen?: boolean;\n  onBlur?: NonCancelableEventHandler;\n  onFocus?: NonCancelableEventHandler;\n  externalRef: React.Ref<any>;\n  fireLoadItems: (filteringText: string) => void;\n  setFilteringValue: (filteringText: string) => void;\n  useInteractiveGroups?: boolean;\n}\n\nexport interface SelectTriggerProps {\n  ref: RefObject<HTMLButtonElement>;\n  onMouseDown?: (event: CustomEvent) => void;\n  onKeyDown?: (event: CustomEvent<BaseKeyDetail>) => void;\n  ariaLabelledby?: string;\n  onFocus: NonCancelableEventHandler;\n}\n\nexport interface RecoveryLinkProps {\n  ref: RefObject<HTMLAnchorElement>;\n  onBlur: CancelableEventHandler<{ relatedTarget: Node | null }>;\n}\n\nexport function useSelect({\n  selectedOptions,\n  updateSelectedOption,\n  options,\n  filteringType,\n  onBlur,\n  onFocus,\n  externalRef,\n  keepOpen,\n  fireLoadItems,\n  setFilteringValue,\n  useInteractiveGroups = false,\n}: UseSelectProps) {\n  const interactivityCheck = useInteractiveGroups ? isGroupInteractive : isInteractive;\n\n  const isHighlightable = (option?: DropdownOption) => !!option && (useInteractiveGroups || option.type !== 'parent');\n\n  const filterRef = useRef<HTMLInputElement>(null);\n  const triggerRef = useRef<HTMLButtonElement>(null);\n  const menuRef = useRef<HTMLUListElement>(null);\n  const hasFilter = filteringType !== 'none';\n  const activeRef = hasFilter ? filterRef : menuRef;\n  const isSelectingUsingSpace = useRef<boolean>(false);\n  const __selectedOptions = connectOptionsByValue(options, selectedOptions);\n  const __selectedValuesSet = selectedOptions.reduce((selectedValuesSet: Set<string>, item: OptionDefinition) => {\n    if (item.value) {\n      selectedValuesSet.add(item.value);\n    }\n    return selectedValuesSet;\n  }, new Set<string>());\n  const [\n    { highlightType, highlightedOption, highlightedIndex },\n    {\n      moveHighlightWithKeyboard,\n      resetHighlightWithKeyboard,\n      setHighlightedIndexWithMouse,\n      highlightOptionWithKeyboard,\n      goHomeWithKeyboard,\n      goEndWithKeyboard,\n    },\n  ] = useHighlightedOption({ options, isHighlightable });\n\n  const { isOpen, openDropdown, closeDropdown, toggleDropdown } = useOpenState({\n    onOpen: () => fireLoadItems(''),\n    onClose: () => {\n      resetHighlightWithKeyboard();\n      setFilteringValue('');\n    },\n  });\n\n  const handleFocus = () => {\n    fireNonCancelableEvent(onFocus, {});\n  };\n\n  const handleBlur = () => {\n    fireNonCancelableEvent(onBlur, {});\n    closeDropdown();\n  };\n\n  const hasSelectedOption = __selectedOptions.length > 0;\n  const { selectedOptionId, menuId } = useIds({ hasSelectedOption });\n  const highlightedOptionId = getOptionId(menuId, highlightedIndex);\n\n  const selectOption = (option?: DropdownOption) => {\n    isSelectingUsingSpace.current = false;\n    const optionToSelect = option || highlightedOption;\n    if (!optionToSelect || !interactivityCheck(optionToSelect)) {\n      return;\n    }\n    updateSelectedOption(optionToSelect.option);\n    if (!keepOpen) {\n      triggerRef.current?.focus();\n      closeDropdown();\n    }\n  };\n\n  const activeKeyDownHandler = useMenuKeyboard({\n    moveHighlight: moveHighlightWithKeyboard,\n    selectOption,\n    goHome: goHomeWithKeyboard,\n    goEnd: goEndWithKeyboard,\n    closeDropdown: () => {\n      triggerRef.current?.focus();\n      closeDropdown();\n    },\n    isSelectingUsingSpace,\n    preventNativeSpace: !hasFilter,\n  });\n\n  const triggerKeyDownHandler = useTriggerKeyboard({ openDropdown, goHome: goHomeWithKeyboard });\n\n  const getDropdownProps: () => Pick<DropdownProps, 'onFocus' | 'onBlur'> = () => ({\n    onFocus: handleFocus,\n    onBlur: handleBlur,\n  });\n\n  const getTriggerProps = (disabled = false) => {\n    const triggerProps: SelectTriggerProps = {\n      ref: triggerRef,\n      onFocus: () => closeDropdown(),\n    };\n    if (!disabled) {\n      triggerProps.onMouseDown = (event: CustomEvent) => {\n        event.preventDefault(); // prevent current focus from blurring as it immediately closes the dropdown\n        if (isOpen) {\n          triggerRef.current?.focus();\n        }\n        toggleDropdown();\n      };\n      triggerProps.onKeyDown = triggerKeyDownHandler;\n    }\n    if (hasSelectedOption) {\n      triggerProps.ariaLabelledby = selectedOptionId;\n    }\n    return triggerProps;\n  };\n\n  const getFilterProps = (): Partial<FilterProps> => {\n    if (!hasFilter) {\n      return {};\n    }\n\n    return {\n      ref: filterRef,\n      onKeyDown: activeKeyDownHandler,\n      onChange: event => {\n        setFilteringValue(event.detail.value);\n        resetHighlightWithKeyboard();\n      },\n      __onDelayedInput: event => {\n        fireLoadItems(event.detail.value);\n      },\n      __nativeAttributes: {\n        'aria-activedescendant': highlightedOptionId,\n        ['aria-owns']: menuId,\n        ['aria-controls']: menuId,\n      },\n    };\n  };\n\n  const getMenuProps = () => {\n    const menuProps: MenuProps = {\n      id: menuId,\n      ref: menuRef,\n      open: isOpen,\n      onMouseUp: itemIndex => {\n        if (itemIndex > -1) {\n          selectOption(options[itemIndex]);\n        }\n      },\n      onMouseMove: itemIndex => {\n        if (itemIndex > -1) {\n          setHighlightedIndexWithMouse(itemIndex);\n        }\n      },\n    };\n    if (!hasFilter) {\n      menuProps.onKeyDown = activeKeyDownHandler;\n      menuProps.nativeAttributes = {\n        'aria-activedescendant': highlightedOptionId,\n      };\n    }\n    return menuProps;\n  };\n  const getGroupState = (option: OptionGroup) => {\n    const totalSelected = option.options.filter(item => !!item.value && __selectedValuesSet.has(item.value)).length;\n    const hasSelected = totalSelected > 0;\n    const allSelected = totalSelected === option.options.length;\n    return {\n      selected: hasSelected && allSelected,\n      indeterminate: hasSelected && !allSelected,\n    };\n  };\n\n  const getOptionProps = (option: DropdownOption, index: number) => {\n    const highlighted = option === highlightedOption;\n    const groupState = isGroup(option.option) ? getGroupState(option.option) : undefined;\n    const selected = __selectedOptions.indexOf(option) > -1 || !!groupState?.selected;\n    const nextOption = options[index + 1]?.option;\n    const isNextSelected =\n      !!nextOption && isGroup(nextOption)\n        ? getGroupState(nextOption).selected\n        : __selectedOptions.indexOf(options[index + 1]) > -1;\n\n    const optionProps: any = {\n      key: index,\n      option,\n      highlighted,\n      selected,\n      isNextSelected,\n      indeterminate: !!groupState?.indeterminate,\n      ['data-mouse-target']: isHighlightable(option) ? index : -1,\n      id: getOptionId(menuId, index),\n    };\n\n    return optionProps;\n  };\n\n  const prevOpen = usePrevious<boolean>(isOpen);\n  useEffect(() => {\n    // highlight the first selected option, when opening the Select component\n    if (isOpen && !prevOpen && hasSelectedOption) {\n      setHighlightedIndexWithMouse(options.indexOf(__selectedOptions[0]));\n    }\n  }, [isOpen, __selectedOptions, hasSelectedOption, setHighlightedIndexWithMouse, options, prevOpen]);\n\n  useEffect(() => {\n    if (isOpen) {\n      // dropdown-fit calculations ensure that the dropdown will fit inside the current\n      // viewport, so prevent the browser from trying to scroll it into view (e.g. if\n      // scroll-padding-top is set on a parent)\n      activeRef.current?.focus({ preventScroll: true });\n    }\n  }, [isOpen, activeRef]);\n\n  useForwardFocus(externalRef, triggerRef as React.RefObject<HTMLElement>);\n  const highlightedGroupSelected =\n    !!highlightedOption && isGroup(highlightedOption.option) && getGroupState(highlightedOption.option).selected;\n  const announceSelected =\n    !!highlightedOption && (__selectedOptions.indexOf(highlightedOption) > -1 || highlightedGroupSelected);\n\n  return {\n    isOpen,\n    highlightedOption,\n    highlightedIndex,\n    highlightType,\n    getTriggerProps,\n    getDropdownProps,\n    getMenuProps,\n    getFilterProps,\n    getOptionProps,\n    highlightOption: highlightOptionWithKeyboard,\n    selectOption,\n    announceSelected,\n  };\n}\n"]}
+{"version":3,"file":"use-select.js","sourceRoot":"","sources":["../../../../src/select/utils/use-select.ts"],"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, { RefObject } from 'react';\nimport { DropdownProps } from '../../internal/components/dropdown/interfaces';\nimport { DropdownOption, OptionDefinition, OptionGroup } from '../../internal/components/option/interfaces';\nimport { isInteractive, isGroupInteractive, isGroup } from '../../internal/components/option/utils/filter-options';\nimport { useEffect, useRef } from 'react';\nimport { useHighlightedOption } from '../../internal/components/options-list/utils/use-highlight-option';\nimport { useOpenState } from '../../internal/components/options-list/utils/use-open-state';\nimport { useMenuKeyboard, useTriggerKeyboard } from '../../internal/components/options-list/utils/use-keyboard';\nimport { getOptionId } from '../../internal/components/options-list/utils/use-ids';\nimport { connectOptionsByValue } from './connect-options';\nimport useForwardFocus from '../../internal/hooks/forward-focus';\nimport { OptionsListProps } from '../../internal/components/options-list';\nimport { FilterProps } from '../parts/filter';\nimport { ItemProps } from '../parts/item';\nimport { usePrevious } from '../../internal/hooks/use-previous';\nimport {\n  BaseKeyDetail,\n  NonCancelableEventHandler,\n  CancelableEventHandler,\n  fireNonCancelableEvent,\n} from '../../internal/events';\nimport { useUniqueId } from '../../internal/hooks/use-unique-id';\n\nexport type MenuProps = Omit<OptionsListProps, 'children'> & { ref: React.RefObject<HTMLUListElement> };\nexport type GetOptionProps = (option: DropdownOption, index: number) => ItemProps;\n\ninterface UseSelectProps {\n  selectedOptions: ReadonlyArray<OptionDefinition>;\n  updateSelectedOption: (option: OptionDefinition) => void;\n  options: ReadonlyArray<DropdownOption>;\n  filteringType: string;\n  keepOpen?: boolean;\n  onBlur?: NonCancelableEventHandler;\n  onFocus?: NonCancelableEventHandler;\n  externalRef: React.Ref<any>;\n  fireLoadItems: (filteringText: string) => void;\n  setFilteringValue: (filteringText: string) => void;\n  useInteractiveGroups?: boolean;\n}\n\nexport interface SelectTriggerProps {\n  ref: RefObject<HTMLButtonElement>;\n  onMouseDown?: (event: CustomEvent) => void;\n  onKeyDown?: (event: CustomEvent<BaseKeyDetail>) => void;\n  onFocus: NonCancelableEventHandler;\n}\n\nexport interface RecoveryLinkProps {\n  ref: RefObject<HTMLAnchorElement>;\n  onBlur: CancelableEventHandler<{ relatedTarget: Node | null }>;\n}\n\nexport function useSelect({\n  selectedOptions,\n  updateSelectedOption,\n  options,\n  filteringType,\n  onBlur,\n  onFocus,\n  externalRef,\n  keepOpen,\n  fireLoadItems,\n  setFilteringValue,\n  useInteractiveGroups = false,\n}: UseSelectProps) {\n  const interactivityCheck = useInteractiveGroups ? isGroupInteractive : isInteractive;\n\n  const isHighlightable = (option?: DropdownOption) => !!option && (useInteractiveGroups || option.type !== 'parent');\n\n  const filterRef = useRef<HTMLInputElement>(null);\n  const triggerRef = useRef<HTMLButtonElement>(null);\n  const menuRef = useRef<HTMLUListElement>(null);\n  const hasFilter = filteringType !== 'none';\n  const activeRef = hasFilter ? filterRef : menuRef;\n  const isSelectingUsingSpace = useRef<boolean>(false);\n  const __selectedOptions = connectOptionsByValue(options, selectedOptions);\n  const __selectedValuesSet = selectedOptions.reduce((selectedValuesSet: Set<string>, item: OptionDefinition) => {\n    if (item.value) {\n      selectedValuesSet.add(item.value);\n    }\n    return selectedValuesSet;\n  }, new Set<string>());\n  const [\n    { highlightType, highlightedOption, highlightedIndex },\n    {\n      moveHighlightWithKeyboard,\n      resetHighlightWithKeyboard,\n      setHighlightedIndexWithMouse,\n      highlightOptionWithKeyboard,\n      goHomeWithKeyboard,\n      goEndWithKeyboard,\n    },\n  ] = useHighlightedOption({ options, isHighlightable });\n\n  const { isOpen, openDropdown, closeDropdown, toggleDropdown } = useOpenState({\n    onOpen: () => fireLoadItems(''),\n    onClose: () => {\n      resetHighlightWithKeyboard();\n      setFilteringValue('');\n    },\n  });\n\n  const handleFocus = () => {\n    fireNonCancelableEvent(onFocus, {});\n  };\n\n  const handleBlur = () => {\n    fireNonCancelableEvent(onBlur, {});\n    closeDropdown();\n  };\n\n  const hasSelectedOption = __selectedOptions.length > 0;\n  const menuId = useUniqueId('option-list');\n  const highlightedOptionId = getOptionId(menuId, highlightedIndex);\n\n  const selectOption = (option?: DropdownOption) => {\n    isSelectingUsingSpace.current = false;\n    const optionToSelect = option || highlightedOption;\n    if (!optionToSelect || !interactivityCheck(optionToSelect)) {\n      return;\n    }\n    updateSelectedOption(optionToSelect.option);\n    if (!keepOpen) {\n      triggerRef.current?.focus();\n      closeDropdown();\n    }\n  };\n\n  const activeKeyDownHandler = useMenuKeyboard({\n    moveHighlight: moveHighlightWithKeyboard,\n    selectOption,\n    goHome: goHomeWithKeyboard,\n    goEnd: goEndWithKeyboard,\n    closeDropdown: () => {\n      triggerRef.current?.focus();\n      closeDropdown();\n    },\n    isSelectingUsingSpace,\n    preventNativeSpace: !hasFilter,\n  });\n\n  const triggerKeyDownHandler = useTriggerKeyboard({ openDropdown, goHome: goHomeWithKeyboard });\n\n  const getDropdownProps: () => Pick<DropdownProps, 'onFocus' | 'onBlur'> = () => ({\n    onFocus: handleFocus,\n    onBlur: handleBlur,\n  });\n\n  const getTriggerProps = (disabled = false) => {\n    const triggerProps: SelectTriggerProps = {\n      ref: triggerRef,\n      onFocus: () => closeDropdown(),\n    };\n    if (!disabled) {\n      triggerProps.onMouseDown = (event: CustomEvent) => {\n        event.preventDefault(); // prevent current focus from blurring as it immediately closes the dropdown\n        if (isOpen) {\n          triggerRef.current?.focus();\n        }\n        toggleDropdown();\n      };\n      triggerProps.onKeyDown = triggerKeyDownHandler;\n    }\n    return triggerProps;\n  };\n\n  const getFilterProps = (): Partial<FilterProps> => {\n    if (!hasFilter) {\n      return {};\n    }\n\n    return {\n      ref: filterRef,\n      onKeyDown: activeKeyDownHandler,\n      onChange: event => {\n        setFilteringValue(event.detail.value);\n        resetHighlightWithKeyboard();\n      },\n      __onDelayedInput: event => {\n        fireLoadItems(event.detail.value);\n      },\n      __nativeAttributes: {\n        'aria-activedescendant': highlightedOptionId,\n        ['aria-owns']: menuId,\n        ['aria-controls']: menuId,\n      },\n    };\n  };\n\n  const getMenuProps = () => {\n    const menuProps: MenuProps = {\n      id: menuId,\n      ref: menuRef,\n      open: isOpen,\n      onMouseUp: itemIndex => {\n        if (itemIndex > -1) {\n          selectOption(options[itemIndex]);\n        }\n      },\n      onMouseMove: itemIndex => {\n        if (itemIndex > -1) {\n          setHighlightedIndexWithMouse(itemIndex);\n        }\n      },\n    };\n    if (!hasFilter) {\n      menuProps.onKeyDown = activeKeyDownHandler;\n      menuProps.nativeAttributes = {\n        'aria-activedescendant': highlightedOptionId,\n      };\n    }\n    return menuProps;\n  };\n  const getGroupState = (option: OptionGroup) => {\n    const totalSelected = option.options.filter(item => !!item.value && __selectedValuesSet.has(item.value)).length;\n    const hasSelected = totalSelected > 0;\n    const allSelected = totalSelected === option.options.length;\n    return {\n      selected: hasSelected && allSelected,\n      indeterminate: hasSelected && !allSelected,\n    };\n  };\n\n  const getOptionProps = (option: DropdownOption, index: number) => {\n    const highlighted = option === highlightedOption;\n    const groupState = isGroup(option.option) ? getGroupState(option.option) : undefined;\n    const selected = __selectedOptions.indexOf(option) > -1 || !!groupState?.selected;\n    const nextOption = options[index + 1]?.option;\n    const isNextSelected =\n      !!nextOption && isGroup(nextOption)\n        ? getGroupState(nextOption).selected\n        : __selectedOptions.indexOf(options[index + 1]) > -1;\n\n    const optionProps: any = {\n      key: index,\n      option,\n      highlighted,\n      selected,\n      isNextSelected,\n      indeterminate: !!groupState?.indeterminate,\n      ['data-mouse-target']: isHighlightable(option) ? index : -1,\n      id: getOptionId(menuId, index),\n    };\n\n    return optionProps;\n  };\n\n  const prevOpen = usePrevious<boolean>(isOpen);\n  useEffect(() => {\n    // highlight the first selected option, when opening the Select component\n    if (isOpen && !prevOpen && hasSelectedOption) {\n      setHighlightedIndexWithMouse(options.indexOf(__selectedOptions[0]));\n    }\n  }, [isOpen, __selectedOptions, hasSelectedOption, setHighlightedIndexWithMouse, options, prevOpen]);\n\n  useEffect(() => {\n    if (isOpen) {\n      // dropdown-fit calculations ensure that the dropdown will fit inside the current\n      // viewport, so prevent the browser from trying to scroll it into view (e.g. if\n      // scroll-padding-top is set on a parent)\n      activeRef.current?.focus({ preventScroll: true });\n    }\n  }, [isOpen, activeRef]);\n\n  useForwardFocus(externalRef, triggerRef as React.RefObject<HTMLElement>);\n  const highlightedGroupSelected =\n    !!highlightedOption && isGroup(highlightedOption.option) && getGroupState(highlightedOption.option).selected;\n  const announceSelected =\n    !!highlightedOption && (__selectedOptions.indexOf(highlightedOption) > -1 || highlightedGroupSelected);\n\n  return {\n    isOpen,\n    highlightedOption,\n    highlightedIndex,\n    highlightType,\n    getTriggerProps,\n    getDropdownProps,\n    getMenuProps,\n    getFilterProps,\n    getOptionProps,\n    highlightOption: highlightOptionWithKeyboard,\n    selectOption,\n    announceSelected,\n  };\n}\n"]}

package/tiles/index.d.ts

@@ -1,4 +1,6 @@
+import React from 'react';
 import { TilesProps } from './interfaces';
 export { TilesProps };
-export default function Tiles(props: TilesProps): JSX.Element;
+declare const Tiles: React.ForwardRefExoticComponent<TilesProps & React.RefAttributes<TilesProps.Ref>>;
+export default Tiles;
 //# sourceMappingURL=index.d.ts.map

package/tiles/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/tiles/index.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAK1C,OAAO,EAAE,UAAU,EAAE,CAAC;AAEtB,MAAM,CAAC,OAAO,UAAU,KAAK,CAAC,KAAK,EAAE,UAAU,eAG9C"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/tiles/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAK1C,OAAO,EAAE,UAAU,EAAE,CAAC;AAEtB,QAAA,MAAM,KAAK,mFAGT,CAAC;AAGH,eAAe,KAAK,CAAC"}

package/tiles/index.js

@@ -5,9 +5,10 @@ import React from 'react';
 import { applyDisplayName } from '../internal/utils/apply-display-name';
 import useBaseComponent from '../internal/hooks/use-base-component';
 import InternalTiles from './internal';
-export default function Tiles(props) {
+var Tiles = React.forwardRef(function (props, ref) {
     var baseComponentProps = useBaseComponent('Tiles');
-    return React.createElement(InternalTiles, __assign({}, props, baseComponentProps));
-}
+    return React.createElement(InternalTiles, __assign({ ref: ref }, props, baseComponentProps));
+});
 applyDisplayName(Tiles, 'Tiles');
+export default Tiles;
 //# sourceMappingURL=index.js.map

package/tiles/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/tiles/index.tsx"],"names":[],"mappings":";AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,gBAAgB,EAAE,MAAM,sCAAsC,CAAC;AACxE,OAAO,gBAAgB,MAAM,sCAAsC,CAAC;AACpE,OAAO,aAAa,MAAM,YAAY,CAAC;AAIvC,MAAM,CAAC,OAAO,UAAU,KAAK,CAAC,KAAiB;IAC7C,IAAM,kBAAkB,GAAG,gBAAgB,CAAC,OAAO,CAAC,CAAC;IACrD,OAAO,oBAAC,aAAa,eAAK,KAAK,EAAM,kBAAkB,EAAI,CAAC;AAC9D,CAAC;AAED,gBAAgB,CAAC,KAAK,EAAE,OAAO,CAAC,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React from 'react';\nimport { TilesProps } from './interfaces';\nimport { applyDisplayName } from '../internal/utils/apply-display-name';\nimport useBaseComponent from '../internal/hooks/use-base-component';\nimport InternalTiles from './internal';\n\nexport { TilesProps };\n\nexport default function Tiles(props: TilesProps) {\n  const baseComponentProps = useBaseComponent('Tiles');\n  return <InternalTiles {...props} {...baseComponentProps} />;\n}\n\napplyDisplayName(Tiles, 'Tiles');\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/tiles/index.tsx"],"names":[],"mappings":";AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,gBAAgB,EAAE,MAAM,sCAAsC,CAAC;AACxE,OAAO,gBAAgB,MAAM,sCAAsC,CAAC;AACpE,OAAO,aAAa,MAAM,YAAY,CAAC;AAIvC,IAAM,KAAK,GAAG,KAAK,CAAC,UAAU,CAAC,UAAC,KAAiB,EAAE,GAA8B;IAC/E,IAAM,kBAAkB,GAAG,gBAAgB,CAAC,OAAO,CAAC,CAAC;IACrD,OAAO,oBAAC,aAAa,aAAC,GAAG,EAAE,GAAG,IAAM,KAAK,EAAM,kBAAkB,EAAI,CAAC;AACxE,CAAC,CAAC,CAAC;AAEH,gBAAgB,CAAC,KAAK,EAAE,OAAO,CAAC,CAAC;AACjC,eAAe,KAAK,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React from 'react';\nimport { TilesProps } from './interfaces';\nimport { applyDisplayName } from '../internal/utils/apply-display-name';\nimport useBaseComponent from '../internal/hooks/use-base-component';\nimport InternalTiles from './internal';\n\nexport { TilesProps };\n\nconst Tiles = React.forwardRef((props: TilesProps, ref: React.Ref<TilesProps.Ref>) => {\n  const baseComponentProps = useBaseComponent('Tiles');\n  return <InternalTiles ref={ref} {...props} {...baseComponentProps} />;\n});\n\napplyDisplayName(Tiles, 'Tiles');\nexport default Tiles;\n"]}

package/tiles/interfaces.d.ts

@@ -54,5 +54,11 @@ export declare namespace TilesProps {
     interface ChangeDetail {
         value: string;
     }
+    interface Ref {
+        /**
+         * Sets input focus onto the UI control.
+         */
+        focus(): void;
+    }
 }
 //# sourceMappingURL=interfaces.d.ts.map

package/tiles/interfaces.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"interfaces.d.ts","sourceRoot":"","sources":["../../../src/tiles/interfaces.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AAChE,OAAO,EAAE,yBAAyB,EAAE,MAAM,oBAAoB,CAAC;AAC/D,OAAO,EAAE,qBAAqB,EAAE,MAAM,wCAAwC,CAAC;AAC/E,OAAO,EAAE,UAAU,IAAI,WAAW,EAAE,MAAM,yBAAyB,CAAC;AAEpE,MAAM,WAAW,UAAW,SAAQ,kBAAkB,EAAE,qBAAqB;IAC3E;;;OAGG;IACH,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;IAErB;;;;;;;;;;OAUG;IACH,KAAK,CAAC,EAAE,aAAa,CAAC,UAAU,CAAC,eAAe,CAAC,CAAC;IAElD;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;OAEG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;IAEvB;;;;OAIG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IAEjB;;OAEG;IACH,QAAQ,CAAC,EAAE,yBAAyB,CAAC,UAAU,CAAC,YAAY,CAAC,CAAC;CAC/D;AAED,yBAAiB,UAAU,CAAC;IAC1B,KAAY,UAAU,GAAG,WAAW,CAAC;IACrC,UAAiB,eAAe;QAC9B,KAAK,EAAE,MAAM,CAAC;QACd,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC;QACvB,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;QAC9B,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;QACxB,QAAQ,CAAC,EAAE,OAAO,CAAC;QACnB,SAAS,CAAC,EAAE,MAAM,CAAC;KACpB;IAED,UAAiB,YAAY;QAC3B,KAAK,EAAE,MAAM,CAAC;KACf;CACF"}
+{"version":3,"file":"interfaces.d.ts","sourceRoot":"","sources":["../../../src/tiles/interfaces.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AAChE,OAAO,EAAE,yBAAyB,EAAE,MAAM,oBAAoB,CAAC;AAC/D,OAAO,EAAE,qBAAqB,EAAE,MAAM,wCAAwC,CAAC;AAC/E,OAAO,EAAE,UAAU,IAAI,WAAW,EAAE,MAAM,yBAAyB,CAAC;AAEpE,MAAM,WAAW,UAAW,SAAQ,kBAAkB,EAAE,qBAAqB;IAC3E;;;OAGG;IACH,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;IAErB;;;;;;;;;;OAUG;IACH,KAAK,CAAC,EAAE,aAAa,CAAC,UAAU,CAAC,eAAe,CAAC,CAAC;IAElD;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;OAEG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;IAEvB;;;;OAIG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IAEjB;;OAEG;IACH,QAAQ,CAAC,EAAE,yBAAyB,CAAC,UAAU,CAAC,YAAY,CAAC,CAAC;CAC/D;AAED,yBAAiB,UAAU,CAAC;IAC1B,KAAY,UAAU,GAAG,WAAW,CAAC;IACrC,UAAiB,eAAe;QAC9B,KAAK,EAAE,MAAM,CAAC;QACd,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC;QACvB,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;QAC9B,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;QACxB,QAAQ,CAAC,EAAE,OAAO,CAAC;QACnB,SAAS,CAAC,EAAE,MAAM,CAAC;KACpB;IAED,UAAiB,YAAY;QAC3B,KAAK,EAAE,MAAM,CAAC;KACf;IAED,UAAiB,GAAG;QAClB;;WAEG;QACH,KAAK,IAAI,IAAI,CAAC;KACf;CACF"}

package/tiles/interfaces.js.map

@@ -1 +1 @@
-{"version":3,"file":"interfaces.js","sourceRoot":"","sources":["../../../src/tiles/interfaces.ts"],"names":[],"mappings":"","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React from 'react';\nimport { BaseComponentProps } from '../internal/base-component';\nimport { NonCancelableEventHandler } from '../internal/events';\nimport { FormFieldControlProps } from '../internal/context/form-field-context';\nimport { Breakpoint as _Breakpoint } from '../internal/breakpoints';\n\nexport interface TilesProps extends BaseComponentProps, FormFieldControlProps {\n  /**\n   * Specifies the value of the selected tile.\n   * If you want to clear the selection, use `null`.\n   */\n  value: string | null;\n\n  /**\n   * List of tile definitions. Each tile has the following properties:\n   *\n   * - `value` [string] - The value that will be associated with the tile. This is the value the tiles will get when the radio button is selected.\n   * - `label` [ReactNode] - A short description for the option the tile represents.\n   * - `description` [ReactNode] - (Optional) Further explanatory guidance on the tile option, shown below the `label`.\n   * - `image` [ReactNode] - (Optional) Visually distinctive image for the tile option, shown below the `description`.\n   * - `disabled` [boolean] - (Optional) Specifies whether the tile is disabled. Users can't select disabled tiles.\n   * - `controlId` [string] - (Optional) The ID of the internal input. You can use this to relate a label element's `for` attribute to this control.\n   *            We recommend that you don't set this property because it's automatically set by the tiles component.\n   */\n  items?: ReadonlyArray<TilesProps.TilesDefinition>;\n\n  /**\n   * Adds `aria-label` on the group. Don't set this property if you are using this form element within a form field\n   * because the form field component automatically sets the correct labels to make the component accessible.\n   */\n  ariaLabel?: string;\n\n  /**\n   * Adds `aria-required` on the group.\n   */\n  ariaRequired?: boolean;\n\n  /**\n   * The number of columns for the tiles to be displayed in. Valid values are integers between 1 and 4.\n   * If no value is specified, the number of columns is determined based on the number of items, with a maximum of 3.\n   * It is set to 2 if 4 or 8 items are supplied in order to optimize the layout.\n   */\n  columns?: number;\n\n  /**\n   * Called when the user selects a different tile.\n   */\n  onChange?: NonCancelableEventHandler<TilesProps.ChangeDetail>;\n}\n\nexport namespace TilesProps {\n  export type Breakpoint = _Breakpoint;\n  export interface TilesDefinition {\n    value: string;\n    label: React.ReactNode;\n    description?: React.ReactNode;\n    image?: React.ReactNode;\n    disabled?: boolean;\n    controlId?: string;\n  }\n\n  export interface ChangeDetail {\n    value: string;\n  }\n}\n"]}
+{"version":3,"file":"interfaces.js","sourceRoot":"","sources":["../../../src/tiles/interfaces.ts"],"names":[],"mappings":"","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React from 'react';\nimport { BaseComponentProps } from '../internal/base-component';\nimport { NonCancelableEventHandler } from '../internal/events';\nimport { FormFieldControlProps } from '../internal/context/form-field-context';\nimport { Breakpoint as _Breakpoint } from '../internal/breakpoints';\n\nexport interface TilesProps extends BaseComponentProps, FormFieldControlProps {\n  /**\n   * Specifies the value of the selected tile.\n   * If you want to clear the selection, use `null`.\n   */\n  value: string | null;\n\n  /**\n   * List of tile definitions. Each tile has the following properties:\n   *\n   * - `value` [string] - The value that will be associated with the tile. This is the value the tiles will get when the radio button is selected.\n   * - `label` [ReactNode] - A short description for the option the tile represents.\n   * - `description` [ReactNode] - (Optional) Further explanatory guidance on the tile option, shown below the `label`.\n   * - `image` [ReactNode] - (Optional) Visually distinctive image for the tile option, shown below the `description`.\n   * - `disabled` [boolean] - (Optional) Specifies whether the tile is disabled. Users can't select disabled tiles.\n   * - `controlId` [string] - (Optional) The ID of the internal input. You can use this to relate a label element's `for` attribute to this control.\n   *            We recommend that you don't set this property because it's automatically set by the tiles component.\n   */\n  items?: ReadonlyArray<TilesProps.TilesDefinition>;\n\n  /**\n   * Adds `aria-label` on the group. Don't set this property if you are using this form element within a form field\n   * because the form field component automatically sets the correct labels to make the component accessible.\n   */\n  ariaLabel?: string;\n\n  /**\n   * Adds `aria-required` on the group.\n   */\n  ariaRequired?: boolean;\n\n  /**\n   * The number of columns for the tiles to be displayed in. Valid values are integers between 1 and 4.\n   * If no value is specified, the number of columns is determined based on the number of items, with a maximum of 3.\n   * It is set to 2 if 4 or 8 items are supplied in order to optimize the layout.\n   */\n  columns?: number;\n\n  /**\n   * Called when the user selects a different tile.\n   */\n  onChange?: NonCancelableEventHandler<TilesProps.ChangeDetail>;\n}\n\nexport namespace TilesProps {\n  export type Breakpoint = _Breakpoint;\n  export interface TilesDefinition {\n    value: string;\n    label: React.ReactNode;\n    description?: React.ReactNode;\n    image?: React.ReactNode;\n    disabled?: boolean;\n    controlId?: string;\n  }\n\n  export interface ChangeDetail {\n    value: string;\n  }\n\n  export interface Ref {\n    /**\n     * Sets input focus onto the UI control.\n     */\n    focus(): void;\n  }\n}\n"]}

package/tiles/internal.d.ts

@@ -1,6 +1,6 @@
+import React from 'react';
 import { TilesProps } from './interfaces';
 import { InternalBaseComponentProps } from '../internal/hooks/use-base-component';
-declare type InternalTilesProps = TilesProps & InternalBaseComponentProps;
-export default function InternalTiles({ value, items, ariaLabel, ariaRequired, columns, onChange, __internalRootRef, ...rest }: InternalTilesProps): JSX.Element;
-export {};
+declare const InternalTiles: React.ForwardRefExoticComponent<TilesProps & InternalBaseComponentProps & React.RefAttributes<TilesProps.Ref>>;
+export default InternalTiles;
 //# sourceMappingURL=internal.d.ts.map

package/tiles/internal.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"internal.d.ts","sourceRoot":"","sources":["../../../src/tiles/internal.tsx"],"names":[],"mappings":"AAMA,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAM1C,OAAO,EAAE,0BAA0B,EAAE,MAAM,sCAAsC,CAAC;AAMlF,aAAK,kBAAkB,GAAG,UAAU,GAAG,0BAA0B,CAAC;AAElE,MAAM,CAAC,OAAO,UAAU,aAAa,CAAC,EACpC,KAAK,EACL,KAAK,EACL,SAAS,EACT,YAAY,EACZ,OAAO,EACP,QAAQ,EACR,iBAAwB,EACxB,GAAG,IAAI,EACR,EAAE,kBAAkB,eAiDpB"}
+{"version":3,"file":"internal.d.ts","sourceRoot":"","sources":["../../../src/tiles/internal.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAM1C,OAAO,EAAE,0BAA0B,EAAE,MAAM,sCAAsC,CAAC;AASlF,QAAA,MAAM,aAAa,gHA2ClB,CAAC;AAqBF,eAAe,aAAa,CAAC"}

package/tiles/internal.js

@@ -10,31 +10,34 @@ import { useUniqueId } from '../internal/hooks/use-unique-id';
 import { useContainerBreakpoints } from '../internal/hooks/container-queries';
 import { useMergeRefs } from '../internal/hooks/use-merge-refs';
 import { Tile } from './tile';
+import useRadioGroupForwardFocus from '../internal/hooks/forward-focus/radio-group';
 var COLUMN_TRIGGERS = ['default', 'xxs', 'xs'];
-export default function InternalTiles(_a) {
+var InternalTiles = React.forwardRef(function (_a, ref) {
     var value = _a.value, items = _a.items, ariaLabel = _a.ariaLabel, ariaRequired = _a.ariaRequired, columns = _a.columns, onChange = _a.onChange, _b = _a.__internalRootRef, __internalRootRef = _b === void 0 ? null : _b, rest = __rest(_a, ["value", "items", "ariaLabel", "ariaRequired", "columns", "onChange", "__internalRootRef"]);
-    var getColumns = function () {
-        if (columns) {
-            return columns;
-        }
-        var nItems = items ? items.length : 0;
-        var columnsLookup = {
-            0: 1,
-            1: 1,
-            2: 2,
-            4: 2,
-            8: 2
-        };
-        return columnsLookup[nItems] || 3;
-    };
-    var _c = useFormFieldContext(rest), ariaDescribedby = _c.ariaDescribedby, ariaLabelledby = _c.ariaLabelledby;
     var baseProps = getBaseProps(rest);
+    var _c = useFormFieldContext(rest), ariaDescribedby = _c.ariaDescribedby, ariaLabelledby = _c.ariaLabelledby;
     var generatedName = useUniqueId('awsui-tiles-');
-    var nColumns = getColumns();
-    var _d = useContainerBreakpoints(COLUMN_TRIGGERS), breakpoint = _d[0], ref = _d[1];
-    var mergedRef = useMergeRefs(ref, __internalRootRef);
+    var _d = useRadioGroupForwardFocus(ref, items, value), tileRef = _d[0], tileRefIndex = _d[1];
+    var _e = useContainerBreakpoints(COLUMN_TRIGGERS), breakpoint = _e[0], breakpointRef = _e[1];
+    var mergedRef = useMergeRefs(breakpointRef, __internalRootRef);
+    var columnCount = getColumnCount(items, columns);
     return (React.createElement("div", __assign({ role: "radiogroup", "aria-label": ariaLabel, "aria-labelledby": ariaLabelledby, "aria-describedby": ariaDescribedby, "aria-required": ariaRequired }, baseProps, { className: clsx(baseProps.className, styles.root), ref: mergedRef }),
-        React.createElement("div", { className: clsx(styles.columns, styles["column-".concat(nColumns)]) }, items &&
-            items.map(function (item) { return (React.createElement(Tile, { key: item.value, item: item, selected: item.value === value, name: generatedName, breakpoint: breakpoint, onChange: onChange })); }))));
+        React.createElement("div", { className: clsx(styles.columns, styles["column-".concat(columnCount)]) }, items &&
+            items.map(function (item, index) { return (React.createElement(Tile, { ref: index === tileRefIndex ? tileRef : undefined, key: item.value, item: item, selected: item.value === value, name: generatedName, breakpoint: breakpoint, onChange: onChange })); }))));
+});
+function getColumnCount(items, columns) {
+    if (columns) {
+        return columns;
+    }
+    var nItems = items ? items.length : 0;
+    var columnsLookup = {
+        0: 1,
+        1: 1,
+        2: 2,
+        4: 2,
+        8: 2
+    };
+    return columnsLookup[nItems] || 3;
 }
+export default InternalTiles;
 //# sourceMappingURL=internal.js.map

package/tiles/internal.js.map

@@ -1 +1 @@
-{"version":3,"file":"internal.js","sourceRoot":"","sources":["../../../src/tiles/internal.tsx"],"names":[],"mappings":";AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,IAAI,MAAM,MAAM,CAAC;AACxB,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,YAAY,EAAE,MAAM,4BAA4B,CAAC;AAE1D,OAAO,MAAM,MAAM,iBAAiB,CAAC;AAErC,OAAO,EAAE,mBAAmB,EAAE,MAAM,wCAAwC,CAAC;AAC7E,OAAO,EAAE,WAAW,EAAE,MAAM,iCAAiC,CAAC;AAC9D,OAAO,EAAE,uBAAuB,EAAE,MAAM,qCAAqC,CAAC;AAE9E,OAAO,EAAE,YAAY,EAAE,MAAM,kCAAkC,CAAC;AAChE,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAC;AAE9B,IAAM,eAAe,GAA4B,CAAC,SAAS,EAAE,KAAK,EAAE,IAAI,CAAC,CAAC;AAI1E,MAAM,CAAC,OAAO,UAAU,aAAa,CAAC,EASjB;IARnB,IAAA,KAAK,WAAA,EACL,KAAK,WAAA,EACL,SAAS,eAAA,EACT,YAAY,kBAAA,EACZ,OAAO,aAAA,EACP,QAAQ,cAAA,EACR,yBAAwB,EAAxB,iBAAiB,mBAAG,IAAI,KAAA,EACrB,IAAI,cAR6B,2FASrC,CADQ;IAEP,IAAM,UAAU,GAAG;QACjB,IAAI,OAAO,EAAE;YACX,OAAO,OAAO,CAAC;SAChB;QAED,IAAM,MAAM,GAAG,KAAK,CAAC,CAAC,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC;QACxC,IAAM,aAAa,GAA2B;YAC5C,CAAC,EAAE,CAAC;YACJ,CAAC,EAAE,CAAC;YACJ,CAAC,EAAE,CAAC;YACJ,CAAC,EAAE,CAAC;YACJ,CAAC,EAAE,CAAC;SACL,CAAC;QACF,OAAO,aAAa,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC;IACpC,CAAC,CAAC;IACI,IAAA,KAAsC,mBAAmB,CAAC,IAAI,CAAC,EAA7D,eAAe,qBAAA,EAAE,cAAc,oBAA8B,CAAC;IACtE,IAAM,SAAS,GAAG,YAAY,CAAC,IAAI,CAAC,CAAC;IACrC,IAAM,aAAa,GAAG,WAAW,CAAC,cAAc,CAAC,CAAC;IAClD,IAAM,QAAQ,GAAG,UAAU,EAAE,CAAC;IACxB,IAAA,KAAoB,uBAAuB,CAAC,eAAe,CAAC,EAA3D,UAAU,QAAA,EAAE,GAAG,QAA4C,CAAC;IACnE,IAAM,SAAS,GAAG,YAAY,CAAC,GAAG,EAAE,iBAAiB,CAAC,CAAC;IAEvD,OAAO,CACL,sCACE,IAAI,EAAC,YAAY,gBACL,SAAS,qBACJ,cAAc,sBACb,eAAe,mBAClB,YAAY,IACvB,SAAS,IACb,SAAS,EAAE,IAAI,CAAC,SAAS,CAAC,SAAS,EAAE,MAAM,CAAC,IAAI,CAAC,EACjD,GAAG,EAAE,SAAS;QAEd,6BAAK,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,OAAO,EAAE,MAAM,CAAC,iBAAU,QAAQ,CAAE,CAAC,CAAC,IAC/D,KAAK;YACJ,KAAK,CAAC,GAAG,CAAC,UAAA,IAAI,IAAI,OAAA,CAChB,oBAAC,IAAI,IACH,GAAG,EAAE,IAAI,CAAC,KAAK,EACf,IAAI,EAAE,IAAI,EACV,QAAQ,EAAE,IAAI,CAAC,KAAK,KAAK,KAAK,EAC9B,IAAI,EAAE,aAAa,EACnB,UAAU,EAAE,UAAU,EACtB,QAAQ,EAAE,QAAQ,GAClB,CACH,EATiB,CASjB,CAAC,CACA,CACF,CACP,CAAC;AACJ,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport clsx from 'clsx';\nimport React from 'react';\n\nimport { getBaseProps } from '../internal/base-component';\nimport { TilesProps } from './interfaces';\nimport styles from './styles.css.js';\n\nimport { useFormFieldContext } from '../internal/context/form-field-context';\nimport { useUniqueId } from '../internal/hooks/use-unique-id';\nimport { useContainerBreakpoints } from '../internal/hooks/container-queries';\nimport { InternalBaseComponentProps } from '../internal/hooks/use-base-component';\nimport { useMergeRefs } from '../internal/hooks/use-merge-refs';\nimport { Tile } from './tile';\n\nconst COLUMN_TRIGGERS: TilesProps.Breakpoint[] = ['default', 'xxs', 'xs'];\n\ntype InternalTilesProps = TilesProps & InternalBaseComponentProps;\n\nexport default function InternalTiles({\n  value,\n  items,\n  ariaLabel,\n  ariaRequired,\n  columns,\n  onChange,\n  __internalRootRef = null,\n  ...rest\n}: InternalTilesProps) {\n  const getColumns = () => {\n    if (columns) {\n      return columns;\n    }\n\n    const nItems = items ? items.length : 0;\n    const columnsLookup: Record<number, number> = {\n      0: 1,\n      1: 1,\n      2: 2,\n      4: 2,\n      8: 2,\n    };\n    return columnsLookup[nItems] || 3;\n  };\n  const { ariaDescribedby, ariaLabelledby } = useFormFieldContext(rest);\n  const baseProps = getBaseProps(rest);\n  const generatedName = useUniqueId('awsui-tiles-');\n  const nColumns = getColumns();\n  const [breakpoint, ref] = useContainerBreakpoints(COLUMN_TRIGGERS);\n  const mergedRef = useMergeRefs(ref, __internalRootRef);\n\n  return (\n    <div\n      role=\"radiogroup\"\n      aria-label={ariaLabel}\n      aria-labelledby={ariaLabelledby}\n      aria-describedby={ariaDescribedby}\n      aria-required={ariaRequired}\n      {...baseProps}\n      className={clsx(baseProps.className, styles.root)}\n      ref={mergedRef}\n    >\n      <div className={clsx(styles.columns, styles[`column-${nColumns}`])}>\n        {items &&\n          items.map(item => (\n            <Tile\n              key={item.value}\n              item={item}\n              selected={item.value === value}\n              name={generatedName}\n              breakpoint={breakpoint}\n              onChange={onChange}\n            />\n          ))}\n      </div>\n    </div>\n  );\n}\n"]}
+{"version":3,"file":"internal.js","sourceRoot":"","sources":["../../../src/tiles/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 clsx from 'clsx';\nimport React from 'react';\n\nimport { getBaseProps } from '../internal/base-component';\nimport { TilesProps } from './interfaces';\nimport styles from './styles.css.js';\n\nimport { useFormFieldContext } from '../internal/context/form-field-context';\nimport { useUniqueId } from '../internal/hooks/use-unique-id';\nimport { useContainerBreakpoints } from '../internal/hooks/container-queries';\nimport { InternalBaseComponentProps } from '../internal/hooks/use-base-component';\nimport { useMergeRefs } from '../internal/hooks/use-merge-refs';\nimport { Tile } from './tile';\nimport useRadioGroupForwardFocus from '../internal/hooks/forward-focus/radio-group';\n\nconst COLUMN_TRIGGERS: TilesProps.Breakpoint[] = ['default', 'xxs', 'xs'];\n\ntype InternalTilesProps = TilesProps & InternalBaseComponentProps;\n\nconst InternalTiles = React.forwardRef(\n  (\n    { value, items, ariaLabel, ariaRequired, columns, onChange, __internalRootRef = null, ...rest }: InternalTilesProps,\n    ref: React.Ref<TilesProps.Ref>\n  ) => {\n    const baseProps = getBaseProps(rest);\n    const { ariaDescribedby, ariaLabelledby } = useFormFieldContext(rest);\n    const generatedName = useUniqueId('awsui-tiles-');\n\n    const [tileRef, tileRefIndex] = useRadioGroupForwardFocus(ref, items, value);\n    const [breakpoint, breakpointRef] = useContainerBreakpoints(COLUMN_TRIGGERS);\n    const mergedRef = useMergeRefs(breakpointRef, __internalRootRef);\n\n    const columnCount = getColumnCount(items, columns);\n\n    return (\n      <div\n        role=\"radiogroup\"\n        aria-label={ariaLabel}\n        aria-labelledby={ariaLabelledby}\n        aria-describedby={ariaDescribedby}\n        aria-required={ariaRequired}\n        {...baseProps}\n        className={clsx(baseProps.className, styles.root)}\n        ref={mergedRef}\n      >\n        <div className={clsx(styles.columns, styles[`column-${columnCount}`])}>\n          {items &&\n            items.map((item, index) => (\n              <Tile\n                ref={index === tileRefIndex ? tileRef : undefined}\n                key={item.value}\n                item={item}\n                selected={item.value === value}\n                name={generatedName}\n                breakpoint={breakpoint}\n                onChange={onChange}\n              />\n            ))}\n        </div>\n      </div>\n    );\n  }\n);\n\nfunction getColumnCount(\n  items: ReadonlyArray<TilesProps.TilesDefinition> | undefined,\n  columns: number | undefined\n): number {\n  if (columns) {\n    return columns;\n  }\n\n  const nItems = items ? items.length : 0;\n  const columnsLookup: Record<number, number> = {\n    0: 1,\n    1: 1,\n    2: 2,\n    4: 2,\n    8: 2,\n  };\n  return columnsLookup[nItems] || 3;\n}\n\nexport default InternalTiles;\n"]}

package/tiles/tile.d.ts

@@ -1,3 +1,4 @@
+import React from 'react';
 import { TilesProps } from './interfaces';
 import { useContainerBreakpoints } from '../internal/hooks/container-queries';
 interface TileProps {
@@ -7,6 +8,6 @@ interface TileProps {
     breakpoint: ReturnType<typeof useContainerBreakpoints>[0];
     onChange: TilesProps['onChange'];
 }
-export declare function Tile({ item, selected, name, breakpoint, onChange }: TileProps): JSX.Element;
+export declare const Tile: React.ForwardRefExoticComponent<TileProps & React.RefAttributes<HTMLInputElement>>;
 export {};
 //# sourceMappingURL=tile.d.ts.map

package/tiles/tile.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"tile.d.ts","sourceRoot":"","sources":["../../../src/tiles/tile.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAI1C,OAAO,EAAE,uBAAuB,EAAE,MAAM,qCAAqC,CAAC;AAG9E,UAAU,SAAS;IACjB,IAAI,EAAE,UAAU,CAAC,eAAe,CAAC;IACjC,QAAQ,EAAE,OAAO,CAAC;IAClB,IAAI,EAAE,MAAM,CAAC;IACb,UAAU,EAAE,UAAU,CAAC,OAAO,uBAAuB,CAAC,CAAC,CAAC,CAAC,CAAC;IAC1D,QAAQ,EAAE,UAAU,CAAC,UAAU,CAAC,CAAC;CAClC;AAED,wBAAgB,IAAI,CAAC,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAE,UAAU,EAAE,QAAQ,EAAE,EAAE,SAAS,eAuC7E"}
+{"version":3,"file":"tile.d.ts","sourceRoot":"","sources":["../../../src/tiles/tile.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAiB,MAAM,OAAO,CAAC;AAEtC,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAI1C,OAAO,EAAE,uBAAuB,EAAE,MAAM,qCAAqC,CAAC;AAI9E,UAAU,SAAS;IACjB,IAAI,EAAE,UAAU,CAAC,eAAe,CAAC;IACjC,QAAQ,EAAE,OAAO,CAAC;IAClB,IAAI,EAAE,MAAM,CAAC;IACb,UAAU,EAAE,UAAU,CAAC,OAAO,uBAAuB,CAAC,CAAC,CAAC,CAAC,CAAC;IAC1D,QAAQ,EAAE,UAAU,CAAC,UAAU,CAAC,CAAC;CAClC;AAED,eAAO,MAAM,IAAI,oFA2ChB,CAAC"}

package/tiles/tile.js

@@ -5,23 +5,25 @@ import React, { useRef } from 'react';
 import RadioButton from '../radio-group/radio-button';
 import styles from './styles.css.js';
 import { fireNonCancelableEvent } from '../internal/events';
-export function Tile(_a) {
+import { useMergeRefs } from '../internal/hooks/use-merge-refs';
+export var Tile = React.forwardRef(function (_a, forwardedRef) {
     var _b, _c, _d, _e, _f;
     var item = _a.item, selected = _a.selected, name = _a.name, breakpoint = _a.breakpoint, onChange = _a.onChange;
-    var radioButtonRef = useRef(null);
+    var internalRef = useRef(null);
     var controlId = item.controlId || "".concat(name, "-value-").concat(item.value);
+    var mergedRef = useMergeRefs(internalRef, forwardedRef);
     return (React.createElement("div", { className: clsx(styles['tile-container'], (_b = {}, _b[styles['has-metadata']] = item.description || item.image, _b), (_c = {}, _c[styles.selected] = selected, _c), (_d = {}, _d[styles.disabled] = !!item.disabled, _d), styles["breakpoint-".concat(breakpoint)]), "data-value": item.value, onClick: function () {
             var _a;
             if (item.disabled) {
                 return;
             }
-            (_a = radioButtonRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+            (_a = internalRef.current) === null || _a === void 0 ? void 0 : _a.focus();
             if (!selected) {
                 fireNonCancelableEvent(onChange, { value: item.value });
             }
         } },
         React.createElement("div", { className: clsx(styles.control, (_e = {}, _e[styles['no-image']] = !item.image, _e)) },
-            React.createElement(RadioButton, { checked: selected, ref: radioButtonRef, name: name, value: item.value, label: item.label, description: item.description, disabled: item.disabled, controlId: controlId })),
+            React.createElement(RadioButton, { checked: selected, ref: mergedRef, name: name, value: item.value, label: item.label, description: item.description, disabled: item.disabled, controlId: controlId })),
         item.image && React.createElement("div", { className: clsx(styles.image, (_f = {}, _f[styles.disabled] = !!item.disabled, _f)) }, item.image)));
-}
+});
 //# sourceMappingURL=tile.js.map

package/tiles/tile.js.map

@@ -1 +1 @@
-{"version":3,"file":"tile.js","sourceRoot":"","sources":["../../../src/tiles/tile.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,IAAI,MAAM,MAAM,CAAC;AACxB,OAAO,KAAK,EAAE,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AAGtC,OAAO,WAAW,MAAM,6BAA6B,CAAC;AACtD,OAAO,MAAM,MAAM,iBAAiB,CAAC;AAGrC,OAAO,EAAE,sBAAsB,EAAE,MAAM,oBAAoB,CAAC;AAU5D,MAAM,UAAU,IAAI,CAAC,EAAyD;;QAAvD,IAAI,UAAA,EAAE,QAAQ,cAAA,EAAE,IAAI,UAAA,EAAE,UAAU,gBAAA,EAAE,QAAQ,cAAA;IAC/D,IAAM,cAAc,GAAG,MAAM,CAAmB,IAAI,CAAC,CAAC;IACtD,IAAM,SAAS,GAAG,IAAI,CAAC,SAAS,IAAI,UAAG,IAAI,oBAAU,IAAI,CAAC,KAAK,CAAE,CAAC;IAElE,OAAO,CACL,6BACE,SAAS,EAAE,IAAI,CACb,MAAM,CAAC,gBAAgB,CAAC,YACtB,GAAC,MAAM,CAAC,cAAc,CAAC,IAAG,IAAI,CAAC,WAAW,IAAI,IAAI,CAAC,KAAK,iBACxD,GAAC,MAAM,CAAC,QAAQ,IAAG,QAAQ,iBAC3B,GAAC,MAAM,CAAC,QAAQ,IAAG,CAAC,CAAC,IAAI,CAAC,QAAQ,OACpC,MAAM,CAAC,qBAAc,UAAU,CAAE,CAAC,CACnC,gBACW,IAAI,CAAC,KAAK,EACtB,OAAO,EAAE;;YACP,IAAI,IAAI,CAAC,QAAQ,EAAE;gBACjB,OAAO;aACR;YACD,MAAA,cAAc,CAAC,OAAO,0CAAE,KAAK,EAAE,CAAC;YAChC,IAAI,CAAC,QAAQ,EAAE;gBACb,sBAAsB,CAAC,QAAQ,EAAE,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,CAAC,CAAC;aACzD;QACH,CAAC;QAED,6BAAK,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,OAAO,YAAI,GAAC,MAAM,CAAC,UAAU,CAAC,IAAG,CAAC,IAAI,CAAC,KAAK,MAAG;YACzE,oBAAC,WAAW,IACV,OAAO,EAAE,QAAQ,EACjB,GAAG,EAAE,cAAc,EACnB,IAAI,EAAE,IAAI,EACV,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,WAAW,EAAE,IAAI,CAAC,WAAW,EAC7B,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,SAAS,EAAE,SAAS,GACpB,CACE;QACL,IAAI,CAAC,KAAK,IAAI,6BAAK,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,KAAK,YAAI,GAAC,MAAM,CAAC,QAAQ,IAAG,CAAC,CAAC,IAAI,CAAC,QAAQ,MAAG,IAAG,IAAI,CAAC,KAAK,CAAO,CACzG,CACP,CAAC;AACJ,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport clsx from 'clsx';\nimport React, { useRef } from 'react';\n\nimport { TilesProps } from './interfaces';\nimport RadioButton from '../radio-group/radio-button';\nimport styles from './styles.css.js';\n\nimport { useContainerBreakpoints } from '../internal/hooks/container-queries';\nimport { fireNonCancelableEvent } from '../internal/events';\n\ninterface TileProps {\n  item: TilesProps.TilesDefinition;\n  selected: boolean;\n  name: string;\n  breakpoint: ReturnType<typeof useContainerBreakpoints>[0];\n  onChange: TilesProps['onChange'];\n}\n\nexport function Tile({ item, selected, name, breakpoint, onChange }: TileProps) {\n  const radioButtonRef = useRef<HTMLInputElement>(null);\n  const controlId = item.controlId || `${name}-value-${item.value}`;\n\n  return (\n    <div\n      className={clsx(\n        styles['tile-container'],\n        { [styles['has-metadata']]: item.description || item.image },\n        { [styles.selected]: selected },\n        { [styles.disabled]: !!item.disabled },\n        styles[`breakpoint-${breakpoint}`]\n      )}\n      data-value={item.value}\n      onClick={() => {\n        if (item.disabled) {\n          return;\n        }\n        radioButtonRef.current?.focus();\n        if (!selected) {\n          fireNonCancelableEvent(onChange, { value: item.value });\n        }\n      }}\n    >\n      <div className={clsx(styles.control, { [styles['no-image']]: !item.image })}>\n        <RadioButton\n          checked={selected}\n          ref={radioButtonRef}\n          name={name}\n          value={item.value}\n          label={item.label}\n          description={item.description}\n          disabled={item.disabled}\n          controlId={controlId}\n        />\n      </div>\n      {item.image && <div className={clsx(styles.image, { [styles.disabled]: !!item.disabled })}>{item.image}</div>}\n    </div>\n  );\n}\n"]}
+{"version":3,"file":"tile.js","sourceRoot":"","sources":["../../../src/tiles/tile.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,IAAI,MAAM,MAAM,CAAC;AACxB,OAAO,KAAK,EAAE,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AAGtC,OAAO,WAAW,MAAM,6BAA6B,CAAC;AACtD,OAAO,MAAM,MAAM,iBAAiB,CAAC;AAGrC,OAAO,EAAE,sBAAsB,EAAE,MAAM,oBAAoB,CAAC;AAC5D,OAAO,EAAE,YAAY,EAAE,MAAM,kCAAkC,CAAC;AAUhE,MAAM,CAAC,IAAM,IAAI,GAAG,KAAK,CAAC,UAAU,CAClC,UAAC,EAAyD,EAAE,YAAyC;;QAAlG,IAAI,UAAA,EAAE,QAAQ,cAAA,EAAE,IAAI,UAAA,EAAE,UAAU,gBAAA,EAAE,QAAQ,cAAA;IAC3C,IAAM,WAAW,GAAG,MAAM,CAAmB,IAAI,CAAC,CAAC;IACnD,IAAM,SAAS,GAAG,IAAI,CAAC,SAAS,IAAI,UAAG,IAAI,oBAAU,IAAI,CAAC,KAAK,CAAE,CAAC;IAElE,IAAM,SAAS,GAAG,YAAY,CAAC,WAAW,EAAE,YAAY,CAAC,CAAC;IAE1D,OAAO,CACL,6BACE,SAAS,EAAE,IAAI,CACb,MAAM,CAAC,gBAAgB,CAAC,YACtB,GAAC,MAAM,CAAC,cAAc,CAAC,IAAG,IAAI,CAAC,WAAW,IAAI,IAAI,CAAC,KAAK,iBACxD,GAAC,MAAM,CAAC,QAAQ,IAAG,QAAQ,iBAC3B,GAAC,MAAM,CAAC,QAAQ,IAAG,CAAC,CAAC,IAAI,CAAC,QAAQ,OACpC,MAAM,CAAC,qBAAc,UAAU,CAAE,CAAC,CACnC,gBACW,IAAI,CAAC,KAAK,EACtB,OAAO,EAAE;;YACP,IAAI,IAAI,CAAC,QAAQ,EAAE;gBACjB,OAAO;aACR;YACD,MAAA,WAAW,CAAC,OAAO,0CAAE,KAAK,EAAE,CAAC;YAC7B,IAAI,CAAC,QAAQ,EAAE;gBACb,sBAAsB,CAAC,QAAQ,EAAE,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,CAAC,CAAC;aACzD;QACH,CAAC;QAED,6BAAK,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,OAAO,YAAI,GAAC,MAAM,CAAC,UAAU,CAAC,IAAG,CAAC,IAAI,CAAC,KAAK,MAAG;YACzE,oBAAC,WAAW,IACV,OAAO,EAAE,QAAQ,EACjB,GAAG,EAAE,SAAS,EACd,IAAI,EAAE,IAAI,EACV,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,WAAW,EAAE,IAAI,CAAC,WAAW,EAC7B,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,SAAS,EAAE,SAAS,GACpB,CACE;QACL,IAAI,CAAC,KAAK,IAAI,6BAAK,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,KAAK,YAAI,GAAC,MAAM,CAAC,QAAQ,IAAG,CAAC,CAAC,IAAI,CAAC,QAAQ,MAAG,IAAG,IAAI,CAAC,KAAK,CAAO,CACzG,CACP,CAAC;AACJ,CAAC,CACF,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport clsx from 'clsx';\nimport React, { useRef } from 'react';\n\nimport { TilesProps } from './interfaces';\nimport RadioButton from '../radio-group/radio-button';\nimport styles from './styles.css.js';\n\nimport { useContainerBreakpoints } from '../internal/hooks/container-queries';\nimport { fireNonCancelableEvent } from '../internal/events';\nimport { useMergeRefs } from '../internal/hooks/use-merge-refs';\n\ninterface TileProps {\n  item: TilesProps.TilesDefinition;\n  selected: boolean;\n  name: string;\n  breakpoint: ReturnType<typeof useContainerBreakpoints>[0];\n  onChange: TilesProps['onChange'];\n}\n\nexport const Tile = React.forwardRef(\n  ({ item, selected, name, breakpoint, onChange }: TileProps, forwardedRef: React.Ref<HTMLInputElement>) => {\n    const internalRef = useRef<HTMLInputElement>(null);\n    const controlId = item.controlId || `${name}-value-${item.value}`;\n\n    const mergedRef = useMergeRefs(internalRef, forwardedRef);\n\n    return (\n      <div\n        className={clsx(\n          styles['tile-container'],\n          { [styles['has-metadata']]: item.description || item.image },\n          { [styles.selected]: selected },\n          { [styles.disabled]: !!item.disabled },\n          styles[`breakpoint-${breakpoint}`]\n        )}\n        data-value={item.value}\n        onClick={() => {\n          if (item.disabled) {\n            return;\n          }\n          internalRef.current?.focus();\n          if (!selected) {\n            fireNonCancelableEvent(onChange, { value: item.value });\n          }\n        }}\n      >\n        <div className={clsx(styles.control, { [styles['no-image']]: !item.image })}>\n          <RadioButton\n            checked={selected}\n            ref={mergedRef}\n            name={name}\n            value={item.value}\n            label={item.label}\n            description={item.description}\n            disabled={item.disabled}\n            controlId={controlId}\n          />\n        </div>\n        {item.image && <div className={clsx(styles.image, { [styles.disabled]: !!item.disabled })}>{item.image}</div>}\n      </div>\n    );\n  }\n);\n"]}