@cloudscape-design/components 3.0.32 → 3.0.35

package/property-filter/property-filter-autosuggest.js

@@ -38,20 +38,18 @@ var PropertyFilterAutosuggest = React.forwardRef(function (props, ref) {
     var _a;
     var value = props.value, onChange = props.onChange, onLoadItems = props.onLoadItems, options = props.options, _b = props.filteringType, filteringType = _b === void 0 ? 'auto' : _b, _c = props.statusType, statusType = _c === void 0 ? 'finished' : _c, placeholder = props.placeholder, disabled = props.disabled, ariaLabel = props.ariaLabel, enteredTextLabel = props.enteredTextLabel, onKeyDown = props.onKeyDown, virtualScroll = props.virtualScroll, expandToViewport = props.expandToViewport, filterText = props.filterText, onOpen = props.onOpen, onOptionClick = props.onOptionClick, hideEnteredTextOption = props.hideEnteredTextOption, rest = __rest(props, ["value", "onChange", "onLoadItems", "options", "filteringType", "statusType", "placeholder", "disabled", "ariaLabel", "enteredTextLabel", "onKeyDown", "virtualScroll", "expandToViewport", "filterText", "onOpen", "onOptionClick", "hideEnteredTextOption"]);
     var highlightText = filterText === undefined ? value : filterText;
-    var isKeyboard = useRef(false);
     var _d = useState(false), open = _d[0], setOpen = _d[1];
     var _e = useAutosuggestItems({
         options: options || [],
         filterValue: value,
         filterText: highlightText,
         filteringType: filteringType,
-        isKeyboard: isKeyboard,
         hideEnteredTextLabel: hideEnteredTextOption
-    }), items = _e.items, highlightedOption = _e.highlightedOption, highlightedIndex = _e.highlightedIndex, highlightedType = _e.highlightedType, moveHighlight = _e.moveHighlight, resetHighlight = _e.resetHighlight, setHighlightedIndex = _e.setHighlightedIndex;
+    }), autosuggestItemsState = _e[0], autosuggestItemsHandlers = _e[1];
     var openDropdown = function () { return setOpen(true); };
     var closeDropdown = function () {
         setOpen(false);
-        resetHighlight();
+        autosuggestItemsHandlers.resetHighlightWithKeyboard();
     };
     var handleBlur = function (event) {
         var _a;
@@ -69,13 +67,13 @@ var PropertyFilterAutosuggest = React.forwardRef(function (props, ref) {
             closeDropdown();
         }
         else {
-            resetHighlight();
+            autosuggestItemsHandlers.resetHighlightWithKeyboard();
         }
     };
     var selectHighlighted = function () {
-        if (highlightedOption) {
-            if (isInteractive(highlightedOption)) {
-                selectOption(highlightedOption);
+        if (autosuggestItemsState.highlightedOption) {
+            if (isInteractive(autosuggestItemsState.highlightedOption)) {
+                selectOption(autosuggestItemsState.highlightedOption);
             }
         }
         else {
@@ -85,10 +83,10 @@ var PropertyFilterAutosuggest = React.forwardRef(function (props, ref) {
     var fireLoadMore = useLoadMoreItems(onLoadItems);
     var handleInputChange = function (e) {
         openDropdown();
-        resetHighlight();
+        autosuggestItemsHandlers.resetHighlightWithKeyboard();
         onChange && onChange(e);
     };
-    var handleKeyDown = useKeyboardHandler(moveHighlight, openDropdown, selectHighlighted, isKeyboard, open, onKeyDown);
+    var handleKeyDown = useKeyboardHandler(autosuggestItemsHandlers.moveHighlightWithKeyboard, openDropdown, selectHighlighted, open, onKeyDown);
     var handleLoadMore = useCallback(function () {
         options && options.length && statusType === 'pending' && fireLoadMore(false, false);
     }, [fireLoadMore, options, statusType]);
@@ -107,8 +105,8 @@ var PropertyFilterAutosuggest = React.forwardRef(function (props, ref) {
     var dropdownId = useUniqueId('dropdown');
     var listId = useUniqueId('list');
     // From an a11y point of view we only count the dropdown as 'expanded' if there are items that a user can dropdown into
-    var expanded = open && items.length > 1;
-    var highlightedOptionId = highlightedOption ? generateUniqueId() : undefined;
+    var expanded = open && autosuggestItemsState.items.length > 1;
+    var highlightedOptionId = autosuggestItemsState.highlightedOption ? generateUniqueId() : undefined;
     var nativeAttributes = {
         placeholder: placeholder,
         onClick: openDropdown,
@@ -128,7 +126,7 @@ var PropertyFilterAutosuggest = React.forwardRef(function (props, ref) {
             fireLoadMore(true, false, '');
         }
     };
-    var isEmpty = !value && !items.length;
+    var isEmpty = !value && !autosuggestItemsState.items.length;
     var showRecoveryLink = open && statusType === 'error' && props.recoveryText;
     var dropdownStatus = useDropdownStatus(__assign(__assign({}, props), { isEmpty: isEmpty, onRecoveryClick: handleRecoveryClick }));
     var handleMouseDown = function (event) {
@@ -137,7 +135,7 @@ var PropertyFilterAutosuggest = React.forwardRef(function (props, ref) {
     };
     return (React.createElement("div", __assign({}, baseProps, { className: clsx(styles.root, baseProps.className), onBlur: handleBlur }),
         React.createElement(Dropdown, { minWidth: DROPDOWN_WIDTH, stretchWidth: false, trigger: React.createElement(InternalInput, __assign({ type: "search", value: value, onChange: handleInputChange, __onDelayedInput: function (event) { return fireLoadMore(true, false, event.detail.value); }, onFocus: handleInputFocus, onKeyDown: handleKeyDown, disabled: disabled, ref: inputRef, autoComplete: false, __nativeAttributes: nativeAttributes }, formFieldContext, { controlId: controlId })), onMouseDown: handleMouseDown, open: open, dropdownId: dropdownId, footer: dropdownStatus.isSticky ? (React.createElement("div", { ref: dropdownFooterRef, className: styles['dropdown-footer'] },
-                React.createElement(DropdownFooter, { content: dropdownStatus.content, hasItems: items.length >= 1 }))) : null, expandToViewport: expandToViewport, hasContent: items.length >= 1 || dropdownStatus.content !== null, trapFocus: !!showRecoveryLink }, open && (React.createElement(AutosuggestOptionsList, { options: items, highlightedOption: highlightedOption, selectOption: selectOption, highlightedIndex: highlightedIndex, setHighlightedIndex: setHighlightedIndex, highlightedOptionId: highlightedOptionId, highlightText: highlightText, listId: listId, controlId: controlId, enteredTextLabel: enteredTextLabel, handleLoadMore: handleLoadMore, hasDropdownStatus: dropdownStatus.content !== null, virtualScroll: virtualScroll, listBottom: !dropdownStatus.isSticky ? React.createElement(DropdownFooter, { content: dropdownStatus.content }) : null, isKeyboard: isKeyboard, highlightedType: highlightedType })))));
+                React.createElement(DropdownFooter, { content: dropdownStatus.content, hasItems: autosuggestItemsState.items.length >= 1 }))) : null, expandToViewport: expandToViewport, hasContent: autosuggestItemsState.items.length >= 1 || dropdownStatus.content !== null, trapFocus: !!showRecoveryLink }, open && (React.createElement(AutosuggestOptionsList, { autosuggestItemsState: autosuggestItemsState, autosuggestItemsHandlers: autosuggestItemsHandlers, selectOption: selectOption, highlightedOptionId: highlightedOptionId, highlightText: highlightText, listId: listId, controlId: controlId, enteredTextLabel: enteredTextLabel, handleLoadMore: handleLoadMore, hasDropdownStatus: dropdownStatus.content !== null, virtualScroll: virtualScroll, listBottom: !dropdownStatus.isSticky ? React.createElement(DropdownFooter, { content: dropdownStatus.content }) : null })))));
 });
 export default PropertyFilterAutosuggest;
 //# sourceMappingURL=property-filter-autosuggest.js.map

package/property-filter/property-filter-autosuggest.js.map

@@ -1 +1 @@
-{"version":3,"file":"property-filter-autosuggest.js","sourceRoot":"","sources":["../../../src/property-filter/property-filter-autosuggest.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, { Ref, useCallback, useRef, useState } from 'react';\n\nimport { useKeyboardHandler } from '../autosuggest/controller';\nimport { useAutosuggestItems } from '../autosuggest/options-controller';\nimport { AutosuggestItem, AutosuggestProps } from '../autosuggest/interfaces';\n\nimport Dropdown from '../internal/components/dropdown';\nimport { useDropdownStatus } from '../internal/components/dropdown-status';\nimport DropdownFooter from '../internal/components/dropdown-footer';\n\nimport { useFormFieldContext } from '../internal/context/form-field-context';\nimport { getBaseProps } from '../internal/base-component';\nimport { generateUniqueId, useUniqueId } from '../internal/hooks/use-unique-id';\nimport useForwardFocus from '../internal/hooks/forward-focus';\nimport { fireNonCancelableEvent, CancelableEventHandler } from '../internal/events';\nimport InternalInput from '../input/internal';\nimport { InputProps } from '../input/interfaces';\nimport styles from '../autosuggest/styles.css.js';\nimport { fireCancelableEvent } from '../internal/events/index';\nimport { InternalBaseComponentProps } from '../internal/hooks/use-base-component';\nimport AutosuggestOptionsList from '../autosuggest/options-list';\n\nconst DROPDOWN_WIDTH = 300;\n\nexport interface PropertyFilterAutosuggestProps extends AutosuggestProps, InternalBaseComponentProps {\n  filterText?: string;\n  onOpen?: CancelableEventHandler<null>;\n  onOptionClick?: CancelableEventHandler<AutosuggestProps.Option>;\n  hideEnteredTextOption?: boolean;\n}\n\nconst isInteractive = (option?: AutosuggestItem) => {\n  return !!option && !option.disabled && option.type !== 'parent';\n};\n\nconst useLoadMoreItems = (onLoadItems: AutosuggestProps['onLoadItems']) => {\n  const lastFilteringText = useRef<string | null>(null);\n  return useCallback(\n    (firstPage: boolean, samePage: boolean, filteringText?: string) => {\n      if (samePage || !firstPage || filteringText === undefined || lastFilteringText.current !== filteringText) {\n        if (filteringText !== undefined) {\n          lastFilteringText.current = filteringText;\n        }\n        if (lastFilteringText.current !== null && onLoadItems) {\n          fireNonCancelableEvent(onLoadItems, { filteringText: lastFilteringText.current, firstPage, samePage });\n        }\n      }\n    },\n    [onLoadItems]\n  );\n};\n\nconst PropertyFilterAutosuggest = React.forwardRef(\n  (props: PropertyFilterAutosuggestProps, ref: Ref<InputProps.Ref>) => {\n    const {\n      value,\n      onChange,\n      onLoadItems,\n      options,\n      filteringType = 'auto',\n      statusType = 'finished',\n      placeholder,\n      disabled,\n      ariaLabel,\n      enteredTextLabel,\n      onKeyDown,\n      virtualScroll,\n      expandToViewport,\n      filterText,\n      onOpen,\n      onOptionClick,\n      hideEnteredTextOption,\n      ...rest\n    } = props;\n    const highlightText = filterText === undefined ? value : filterText;\n\n    const isKeyboard = useRef(false);\n    const [open, setOpen] = useState(false);\n    const {\n      items,\n      highlightedOption,\n      highlightedIndex,\n      highlightedType,\n      moveHighlight,\n      resetHighlight,\n      setHighlightedIndex,\n    } = useAutosuggestItems({\n      options: options || [],\n      filterValue: value,\n      filterText: highlightText,\n      filteringType,\n      isKeyboard,\n      hideEnteredTextLabel: hideEnteredTextOption,\n    });\n    const openDropdown = () => setOpen(true);\n    const closeDropdown = () => {\n      setOpen(false);\n      resetHighlight();\n    };\n    const handleBlur: React.FocusEventHandler = event => {\n      if (\n        event.currentTarget.contains(event.relatedTarget) ||\n        dropdownFooterRef.current?.contains(event.relatedTarget)\n      ) {\n        return;\n      }\n      closeDropdown();\n    };\n    const selectOption = (option: AutosuggestItem) => {\n      const value = option.value || '';\n      fireNonCancelableEvent(onChange, { value });\n      const selectedCancelled = fireCancelableEvent(onOptionClick, option);\n      if (!selectedCancelled) {\n        closeDropdown();\n      } else {\n        resetHighlight();\n      }\n    };\n    const selectHighlighted = () => {\n      if (highlightedOption) {\n        if (isInteractive(highlightedOption)) {\n          selectOption(highlightedOption);\n        }\n      } else {\n        closeDropdown();\n      }\n    };\n\n    const fireLoadMore = useLoadMoreItems(onLoadItems);\n\n    const handleInputChange: InputProps['onChange'] = e => {\n      openDropdown();\n      resetHighlight();\n      onChange && onChange(e);\n    };\n\n    const handleKeyDown = useKeyboardHandler(\n      moveHighlight,\n      openDropdown,\n      selectHighlighted,\n      isKeyboard,\n      open,\n      onKeyDown\n    );\n    const handleLoadMore = useCallback(() => {\n      options && options.length && statusType === 'pending' && fireLoadMore(false, false);\n    }, [fireLoadMore, options, statusType]);\n    const handleRecoveryClick = useCallback(() => {\n      fireLoadMore(false, true);\n      inputRef.current?.focus();\n    }, [fireLoadMore]);\n\n    const formFieldContext = useFormFieldContext(rest);\n    const baseProps = getBaseProps(rest);\n    const inputRef = useRef<HTMLInputElement>(null);\n    const dropdownFooterRef = useRef<HTMLDivElement>(null);\n    useForwardFocus(ref, inputRef);\n\n    const selfControlId = useUniqueId('input');\n    const controlId = formFieldContext.controlId ?? selfControlId;\n    const dropdownId = useUniqueId('dropdown');\n    const listId = useUniqueId('list');\n\n    // From an a11y point of view we only count the dropdown as 'expanded' if there are items that a user can dropdown into\n    const expanded = open && items.length > 1;\n    const highlightedOptionId = highlightedOption ? generateUniqueId() : undefined;\n    const nativeAttributes = {\n      placeholder,\n      onClick: openDropdown,\n      role: 'combobox',\n      'aria-autocomplete': 'list',\n      'aria-expanded': expanded,\n      'aria-controls': listId,\n      // 'aria-owns' needed for safari+vo to announce activedescendant content\n      'aria-owns': listId,\n      'aria-label': ariaLabel,\n      'aria-activedescendant': highlightedOptionId,\n    };\n\n    const handleInputFocus: InputProps['onFocus'] = () => {\n      const openPrevented = fireCancelableEvent(onOpen, null);\n      if (!openPrevented) {\n        openDropdown();\n        fireLoadMore(true, false, '');\n      }\n    };\n\n    const isEmpty = !value && !items.length;\n    const showRecoveryLink = open && statusType === 'error' && props.recoveryText;\n    const dropdownStatus = useDropdownStatus({ ...props, isEmpty, onRecoveryClick: handleRecoveryClick });\n\n    const handleMouseDown = (event: React.MouseEvent) => {\n      // prevent currently focused element from losing it\n      event.preventDefault();\n    };\n\n    return (\n      <div {...baseProps} className={clsx(styles.root, baseProps.className)} onBlur={handleBlur}>\n        <Dropdown\n          minWidth={DROPDOWN_WIDTH}\n          stretchWidth={false}\n          trigger={\n            <InternalInput\n              type=\"search\"\n              value={value}\n              onChange={handleInputChange}\n              __onDelayedInput={event => fireLoadMore(true, false, event.detail.value)}\n              onFocus={handleInputFocus}\n              onKeyDown={handleKeyDown}\n              disabled={disabled}\n              ref={inputRef}\n              autoComplete={false}\n              __nativeAttributes={nativeAttributes}\n              {...formFieldContext}\n              controlId={controlId}\n            />\n          }\n          onMouseDown={handleMouseDown}\n          open={open}\n          dropdownId={dropdownId}\n          footer={\n            dropdownStatus.isSticky ? (\n              <div ref={dropdownFooterRef} className={styles['dropdown-footer']}>\n                <DropdownFooter content={dropdownStatus.content} hasItems={items.length >= 1} />\n              </div>\n            ) : null\n          }\n          expandToViewport={expandToViewport}\n          hasContent={items.length >= 1 || dropdownStatus.content !== null}\n          trapFocus={!!showRecoveryLink}\n        >\n          {open && (\n            <AutosuggestOptionsList\n              options={items}\n              highlightedOption={highlightedOption}\n              selectOption={selectOption}\n              highlightedIndex={highlightedIndex}\n              setHighlightedIndex={setHighlightedIndex}\n              highlightedOptionId={highlightedOptionId}\n              highlightText={highlightText}\n              listId={listId}\n              controlId={controlId}\n              enteredTextLabel={enteredTextLabel}\n              handleLoadMore={handleLoadMore}\n              hasDropdownStatus={dropdownStatus.content !== null}\n              virtualScroll={virtualScroll}\n              listBottom={!dropdownStatus.isSticky ? <DropdownFooter content={dropdownStatus.content} /> : null}\n              isKeyboard={isKeyboard}\n              highlightedType={highlightedType}\n            />\n          )}\n        </Dropdown>\n      </div>\n    );\n  }\n);\n\nexport default PropertyFilterAutosuggest;\n"]}
+{"version":3,"file":"property-filter-autosuggest.js","sourceRoot":"","sources":["../../../src/property-filter/property-filter-autosuggest.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, { Ref, useCallback, useRef, useState } from 'react';\n\nimport { useKeyboardHandler } from '../autosuggest/controller';\nimport { useAutosuggestItems } from '../autosuggest/options-controller';\nimport { AutosuggestItem, AutosuggestProps } from '../autosuggest/interfaces';\n\nimport Dropdown from '../internal/components/dropdown';\nimport { useDropdownStatus } from '../internal/components/dropdown-status';\nimport DropdownFooter from '../internal/components/dropdown-footer';\n\nimport { useFormFieldContext } from '../internal/context/form-field-context';\nimport { getBaseProps } from '../internal/base-component';\nimport { generateUniqueId, useUniqueId } from '../internal/hooks/use-unique-id';\nimport useForwardFocus from '../internal/hooks/forward-focus';\nimport { fireNonCancelableEvent, CancelableEventHandler } from '../internal/events';\nimport InternalInput from '../input/internal';\nimport { InputProps } from '../input/interfaces';\nimport styles from '../autosuggest/styles.css.js';\nimport { fireCancelableEvent } from '../internal/events/index';\nimport { InternalBaseComponentProps } from '../internal/hooks/use-base-component';\nimport AutosuggestOptionsList from '../autosuggest/options-list';\n\nconst DROPDOWN_WIDTH = 300;\n\nexport interface PropertyFilterAutosuggestProps extends AutosuggestProps, InternalBaseComponentProps {\n  filterText?: string;\n  onOpen?: CancelableEventHandler<null>;\n  onOptionClick?: CancelableEventHandler<AutosuggestProps.Option>;\n  hideEnteredTextOption?: boolean;\n}\n\nconst isInteractive = (option?: AutosuggestItem) => {\n  return !!option && !option.disabled && option.type !== 'parent';\n};\n\nconst useLoadMoreItems = (onLoadItems: AutosuggestProps['onLoadItems']) => {\n  const lastFilteringText = useRef<string | null>(null);\n  return useCallback(\n    (firstPage: boolean, samePage: boolean, filteringText?: string) => {\n      if (samePage || !firstPage || filteringText === undefined || lastFilteringText.current !== filteringText) {\n        if (filteringText !== undefined) {\n          lastFilteringText.current = filteringText;\n        }\n        if (lastFilteringText.current !== null && onLoadItems) {\n          fireNonCancelableEvent(onLoadItems, { filteringText: lastFilteringText.current, firstPage, samePage });\n        }\n      }\n    },\n    [onLoadItems]\n  );\n};\n\nconst PropertyFilterAutosuggest = React.forwardRef(\n  (props: PropertyFilterAutosuggestProps, ref: Ref<InputProps.Ref>) => {\n    const {\n      value,\n      onChange,\n      onLoadItems,\n      options,\n      filteringType = 'auto',\n      statusType = 'finished',\n      placeholder,\n      disabled,\n      ariaLabel,\n      enteredTextLabel,\n      onKeyDown,\n      virtualScroll,\n      expandToViewport,\n      filterText,\n      onOpen,\n      onOptionClick,\n      hideEnteredTextOption,\n      ...rest\n    } = props;\n    const highlightText = filterText === undefined ? value : filterText;\n\n    const [open, setOpen] = useState(false);\n    const [autosuggestItemsState, autosuggestItemsHandlers] = useAutosuggestItems({\n      options: options || [],\n      filterValue: value,\n      filterText: highlightText,\n      filteringType,\n      hideEnteredTextLabel: hideEnteredTextOption,\n    });\n    const openDropdown = () => setOpen(true);\n    const closeDropdown = () => {\n      setOpen(false);\n      autosuggestItemsHandlers.resetHighlightWithKeyboard();\n    };\n    const handleBlur: React.FocusEventHandler = event => {\n      if (\n        event.currentTarget.contains(event.relatedTarget) ||\n        dropdownFooterRef.current?.contains(event.relatedTarget)\n      ) {\n        return;\n      }\n      closeDropdown();\n    };\n    const selectOption = (option: AutosuggestItem) => {\n      const value = option.value || '';\n      fireNonCancelableEvent(onChange, { value });\n      const selectedCancelled = fireCancelableEvent(onOptionClick, option);\n      if (!selectedCancelled) {\n        closeDropdown();\n      } else {\n        autosuggestItemsHandlers.resetHighlightWithKeyboard();\n      }\n    };\n    const selectHighlighted = () => {\n      if (autosuggestItemsState.highlightedOption) {\n        if (isInteractive(autosuggestItemsState.highlightedOption)) {\n          selectOption(autosuggestItemsState.highlightedOption);\n        }\n      } else {\n        closeDropdown();\n      }\n    };\n\n    const fireLoadMore = useLoadMoreItems(onLoadItems);\n\n    const handleInputChange: InputProps['onChange'] = e => {\n      openDropdown();\n      autosuggestItemsHandlers.resetHighlightWithKeyboard();\n      onChange && onChange(e);\n    };\n\n    const handleKeyDown = useKeyboardHandler(\n      autosuggestItemsHandlers.moveHighlightWithKeyboard,\n      openDropdown,\n      selectHighlighted,\n      open,\n      onKeyDown\n    );\n    const handleLoadMore = useCallback(() => {\n      options && options.length && statusType === 'pending' && fireLoadMore(false, false);\n    }, [fireLoadMore, options, statusType]);\n    const handleRecoveryClick = useCallback(() => {\n      fireLoadMore(false, true);\n      inputRef.current?.focus();\n    }, [fireLoadMore]);\n\n    const formFieldContext = useFormFieldContext(rest);\n    const baseProps = getBaseProps(rest);\n    const inputRef = useRef<HTMLInputElement>(null);\n    const dropdownFooterRef = useRef<HTMLDivElement>(null);\n    useForwardFocus(ref, inputRef);\n\n    const selfControlId = useUniqueId('input');\n    const controlId = formFieldContext.controlId ?? selfControlId;\n    const dropdownId = useUniqueId('dropdown');\n    const listId = useUniqueId('list');\n\n    // From an a11y point of view we only count the dropdown as 'expanded' if there are items that a user can dropdown into\n    const expanded = open && autosuggestItemsState.items.length > 1;\n    const highlightedOptionId = autosuggestItemsState.highlightedOption ? generateUniqueId() : undefined;\n    const nativeAttributes = {\n      placeholder,\n      onClick: openDropdown,\n      role: 'combobox',\n      'aria-autocomplete': 'list',\n      'aria-expanded': expanded,\n      'aria-controls': listId,\n      // 'aria-owns' needed for safari+vo to announce activedescendant content\n      'aria-owns': listId,\n      'aria-label': ariaLabel,\n      'aria-activedescendant': highlightedOptionId,\n    };\n\n    const handleInputFocus: InputProps['onFocus'] = () => {\n      const openPrevented = fireCancelableEvent(onOpen, null);\n      if (!openPrevented) {\n        openDropdown();\n        fireLoadMore(true, false, '');\n      }\n    };\n\n    const isEmpty = !value && !autosuggestItemsState.items.length;\n    const showRecoveryLink = open && statusType === 'error' && props.recoveryText;\n    const dropdownStatus = useDropdownStatus({ ...props, isEmpty, onRecoveryClick: handleRecoveryClick });\n\n    const handleMouseDown = (event: React.MouseEvent) => {\n      // prevent currently focused element from losing it\n      event.preventDefault();\n    };\n\n    return (\n      <div {...baseProps} className={clsx(styles.root, baseProps.className)} onBlur={handleBlur}>\n        <Dropdown\n          minWidth={DROPDOWN_WIDTH}\n          stretchWidth={false}\n          trigger={\n            <InternalInput\n              type=\"search\"\n              value={value}\n              onChange={handleInputChange}\n              __onDelayedInput={event => fireLoadMore(true, false, event.detail.value)}\n              onFocus={handleInputFocus}\n              onKeyDown={handleKeyDown}\n              disabled={disabled}\n              ref={inputRef}\n              autoComplete={false}\n              __nativeAttributes={nativeAttributes}\n              {...formFieldContext}\n              controlId={controlId}\n            />\n          }\n          onMouseDown={handleMouseDown}\n          open={open}\n          dropdownId={dropdownId}\n          footer={\n            dropdownStatus.isSticky ? (\n              <div ref={dropdownFooterRef} className={styles['dropdown-footer']}>\n                <DropdownFooter content={dropdownStatus.content} hasItems={autosuggestItemsState.items.length >= 1} />\n              </div>\n            ) : null\n          }\n          expandToViewport={expandToViewport}\n          hasContent={autosuggestItemsState.items.length >= 1 || dropdownStatus.content !== null}\n          trapFocus={!!showRecoveryLink}\n        >\n          {open && (\n            <AutosuggestOptionsList\n              autosuggestItemsState={autosuggestItemsState}\n              autosuggestItemsHandlers={autosuggestItemsHandlers}\n              selectOption={selectOption}\n              highlightedOptionId={highlightedOptionId}\n              highlightText={highlightText}\n              listId={listId}\n              controlId={controlId}\n              enteredTextLabel={enteredTextLabel}\n              handleLoadMore={handleLoadMore}\n              hasDropdownStatus={dropdownStatus.content !== null}\n              virtualScroll={virtualScroll}\n              listBottom={!dropdownStatus.isSticky ? <DropdownFooter content={dropdownStatus.content} /> : null}\n            />\n          )}\n        </Dropdown>\n      </div>\n    );\n  }\n);\n\nexport default PropertyFilterAutosuggest;\n"]}

package/property-filter/token-editor.d.ts

@@ -1,12 +1,13 @@
 import React from 'react';
 import { AutosuggestProps } from '../autosuggest/interfaces';
 import { PropertyFilterProps } from './interfaces';
+declare type AsyncProps = Pick<AutosuggestProps, 'empty' | 'loadingText' | 'finishedText' | 'errorText' | 'recoveryText' | 'statusType'>;
 interface TokenEditorProps extends Pick<PropertyFilterProps, 'filteringProperties' | 'filteringOptions' | 'onLoadItems' | 'i18nStrings' | 'asyncProperties' | 'customGroupsText' | 'disableFreeTextFiltering' | 'disabled' | 'expandToViewport'> {
     token: PropertyFilterProps.Token;
     triggerComponent?: React.ReactNode;
     setToken: (newToken: PropertyFilterProps.Token) => void;
-    asyncProps: Pick<AutosuggestProps, 'empty' | 'loadingText' | 'finishedText' | 'errorText' | 'recoveryText' | 'statusType'>;
+    asyncProps: AsyncProps;
 }
-export declare const TokenEditor: (props: TokenEditorProps) => JSX.Element;
+export declare const TokenEditor: ({ asyncProperties, asyncProps, customGroupsText, disableFreeTextFiltering, expandToViewport, filteringOptions, filteringProperties, i18nStrings, onLoadItems, setToken, token, triggerComponent, }: TokenEditorProps) => JSX.Element;
 export {};
 //# sourceMappingURL=token-editor.d.ts.map

package/property-filter/token-editor.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"token-editor.d.ts","sourceRoot":"","sources":["../../../src/property-filter/token-editor.tsx"],"names":[],"mappings":"AAEA,OAAO,KAA2B,MAAM,OAAO,CAAC;AAOhD,OAAO,EAAE,gBAAgB,EAAE,MAAM,2BAA2B,CAAC;AAK7D,OAAO,EAAE,mBAAmB,EAAE,MAAM,cAAc,CAAC;AAWnD,UAAU,gBACR,SAAQ,IAAI,CACV,mBAAmB,EACjB,qBAAqB,GACrB,kBAAkB,GAClB,aAAa,GACb,aAAa,GACb,iBAAiB,GACjB,kBAAkB,GAClB,0BAA0B,GAC1B,UAAU,GACV,kBAAkB,CACrB;IACD,KAAK,EAAE,mBAAmB,CAAC,KAAK,CAAC;IACjC,gBAAgB,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACnC,QAAQ,EAAE,CAAC,QAAQ,EAAE,mBAAmB,CAAC,KAAK,KAAK,IAAI,CAAC;IACxD,UAAU,EAAE,IAAI,CACd,gBAAgB,EAChB,OAAO,GAAG,aAAa,GAAG,cAAc,GAAG,WAAW,GAAG,cAAc,GAAG,YAAY,CACvF,CAAC;CACH;AAiLD,eAAO,MAAM,WAAW,UAAW,gBAAgB,gBAyClD,CAAC"}
+{"version":3,"file":"token-editor.d.ts","sourceRoot":"","sources":["../../../src/property-filter/token-editor.tsx"],"names":[],"mappings":"AAEA,OAAO,KAA2B,MAAM,OAAO,CAAC;AAOhD,OAAO,EAAE,gBAAgB,EAAE,MAAM,2BAA2B,CAAC;AAK7D,OAAO,EAAE,mBAAmB,EAAE,MAAM,cAAc,CAAC;AAanD,aAAK,UAAU,GAAG,IAAI,CACpB,gBAAgB,EAChB,OAAO,GAAG,aAAa,GAAG,cAAc,GAAG,WAAW,GAAG,cAAc,GAAG,YAAY,CACvF,CAAC;AAEF,UAAU,gBACR,SAAQ,IAAI,CACV,mBAAmB,EACjB,qBAAqB,GACrB,kBAAkB,GAClB,aAAa,GACb,aAAa,GACb,iBAAiB,GACjB,kBAAkB,GAClB,0BAA0B,GAC1B,UAAU,GACV,kBAAkB,CACrB;IACD,KAAK,EAAE,mBAAmB,CAAC,KAAK,CAAC;IACjC,gBAAgB,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACnC,QAAQ,EAAE,CAAC,QAAQ,EAAE,mBAAmB,CAAC,KAAK,KAAK,IAAI,CAAC;IACxD,UAAU,EAAE,UAAU,CAAC;CACxB;AAsKD,eAAO,MAAM,WAAW,uMAarB,gBAAgB,gBAiGlB,CAAC"}

package/property-filter/token-editor.js

@@ -12,16 +12,12 @@ import { useUniqueId } from '../internal/hooks/use-unique-id/index';
 import styles from './styles.css.js';
 import { useLoadItems } from './use-load-items';
 import { getAllowedOperators, getPropertyOptions, getPropertyByKey, operatorToDescription, getPropertySuggestions, } from './controller';
-var EditingFields = function (_a) {
-    var _b;
-    var temporaryToken = _a.temporaryToken, setTemporaryToken = _a.setTemporaryToken, asyncProps = _a.asyncProps, asyncProperties = _a.asyncProperties, filteringProperties = _a.filteringProperties, filteringOptions = _a.filteringOptions, onLoadItems = _a.onLoadItems, customGroupsText = _a.customGroupsText, i18nStrings = _a.i18nStrings, disableFreeTextFiltering = _a.disableFreeTextFiltering;
-    var fields = [];
-    var property = temporaryToken.propertyKey !== undefined
-        ? getPropertyByKey(filteringProperties, temporaryToken.propertyKey)
-        : undefined;
+var freeTextOperators = [':', '!:'];
+function PropertyInput(_a) {
+    var propertyKey = _a.propertyKey, onChangePropertyKey = _a.onChangePropertyKey, asyncProps = _a.asyncProps, filteringProperties = _a.filteringProperties, onLoadItems = _a.onLoadItems, customGroupsText = _a.customGroupsText, i18nStrings = _a.i18nStrings, disableFreeTextFiltering = _a.disableFreeTextFiltering;
+    var property = propertyKey !== undefined ? getPropertyByKey(filteringProperties, propertyKey) : undefined;
     var propertySelectHandlers = useLoadItems(onLoadItems);
-    var asyncPropertySelectProps = asyncProperties
-        ? __assign(__assign({}, asyncProps), propertySelectHandlers) : {};
+    var asyncPropertySelectProps = asyncProps ? __assign(__assign({}, asyncProps), propertySelectHandlers) : {};
     var propertyOptions = getPropertySuggestions(filteringProperties, customGroupsText, i18nStrings, function (_a) {
         var propertyLabel = _a.propertyLabel, key = _a.key;
         return ({
@@ -37,90 +33,84 @@ var EditingFields = function (_a) {
     if (!disableFreeTextFiltering) {
         propertyOptions.unshift(allPropertiesOption);
     }
-    var propertyControlId = useUniqueId('property');
-    var propertySelect = (React.createElement(InternalSelect, __assign({ controlId: propertyControlId, options: propertyOptions, selectedOption: property
-            ? {
-                value: temporaryToken.propertyKey,
-                label: property.propertyLabel
-            }
-            : allPropertiesOption, onChange: function (e) {
-            var _a;
-            var filteringProperty = ((_a = e.detail.selectedOption) === null || _a === void 0 ? void 0 : _a.value)
-                ? filteringProperties.reduce(function (acc, property) { return (property.key === e.detail.selectedOption.value ? property : acc); }, undefined)
-                : undefined;
-            var allowedOperators = filteringProperty
-                ? getAllowedOperators(filteringProperty)
-                : freeTextOperators;
-            var operator = temporaryToken.operator;
-            if (temporaryToken.operator && allowedOperators.indexOf(temporaryToken.operator) === -1) {
-                operator = allowedOperators[0];
-            }
-            setTemporaryToken(__assign(__assign({}, temporaryToken), { operator: operator, propertyKey: e.detail.selectedOption.value }));
-        } }, asyncPropertySelectProps)));
-    fields.push({
-        text: i18nStrings.propertyText,
-        className: styles['property-selector'],
-        control: propertySelect,
-        controlId: propertyControlId
-    });
-    var operatorText = temporaryToken.operator;
+    var controlId = useUniqueId('property');
+    return (React.createElement("div", { className: clsx(styles['token-editor-line'], styles['property-selector']), key: i18nStrings.propertyText },
+        React.createElement("label", { className: styles['token-editor-label'], htmlFor: controlId }, i18nStrings.propertyText),
+        React.createElement("div", { className: styles['token-editor-field'] },
+            React.createElement(InternalSelect, __assign({ controlId: controlId, options: propertyOptions, selectedOption: property
+                    ? {
+                        value: propertyKey !== null && propertyKey !== void 0 ? propertyKey : undefined,
+                        label: property.propertyLabel
+                    }
+                    : allPropertiesOption, onChange: function (e) { return onChangePropertyKey(e.detail.selectedOption.value); } }, asyncPropertySelectProps)))));
+}
+function OperatorInput(_a) {
+    var propertyKey = _a.propertyKey, operator = _a.operator, onChangeOperator = _a.onChangeOperator, filteringProperties = _a.filteringProperties, i18nStrings = _a.i18nStrings;
+    var property = propertyKey !== undefined ? getPropertyByKey(filteringProperties, propertyKey) : undefined;
     var freeTextOperators = [':', '!:'];
     var operatorOptions = (property ? getAllowedOperators(property) : freeTextOperators).map(function (operator) { return ({
         value: operator,
         label: operator,
         description: operatorToDescription(operator, i18nStrings)
     }); });
-    var operatorControlId = useUniqueId('operator');
-    var operatorSelect = temporaryToken && (React.createElement(InternalSelect, { controlId: operatorControlId, options: operatorOptions, triggerVariant: "option", selectedOption: operatorText
-            ? {
-                value: operatorText,
-                label: operatorText,
-                description: operatorToDescription(operatorText, i18nStrings)
-            }
-            : null, onChange: function (e) {
-            e.detail.selectedOption.value &&
-                setTemporaryToken(__assign(__assign({}, temporaryToken), { operator: e.detail.selectedOption.value }));
-        }, disabled: !temporaryToken }));
-    fields.push({
-        text: i18nStrings.operatorText,
-        className: styles['operator-selector'],
-        control: operatorSelect,
-        controlId: operatorControlId
-    });
+    var contorlId = useUniqueId('operator');
+    return (React.createElement("div", { className: clsx(styles['token-editor-line'], styles['operator-selector']), key: i18nStrings.operatorText },
+        React.createElement("label", { className: styles['token-editor-label'], htmlFor: contorlId }, i18nStrings.operatorText),
+        React.createElement("div", { className: styles['token-editor-field'] },
+            React.createElement(InternalSelect, { controlId: contorlId, options: operatorOptions, triggerVariant: "option", selectedOption: operator
+                    ? {
+                        value: operator,
+                        label: operator,
+                        description: operatorToDescription(operator, i18nStrings)
+                    }
+                    : null, onChange: function (e) { return onChangeOperator(e.detail.selectedOption.value); } }))));
+}
+function ValueInput(_a) {
+    var _b;
+    var propertyKey = _a.propertyKey, operator = _a.operator, value = _a.value, onChangeValue = _a.onChangeValue, asyncProps = _a.asyncProps, filteringProperties = _a.filteringProperties, filteringOptions = _a.filteringOptions, onLoadItems = _a.onLoadItems, i18nStrings = _a.i18nStrings;
+    var property = propertyKey !== undefined ? getPropertyByKey(filteringProperties, propertyKey) : undefined;
     var valueOptions = property ? (_b = getPropertyOptions(property, filteringOptions)) === null || _b === void 0 ? void 0 : _b.map(function (_a) {
         var value = _a.value;
         return ({ value: value });
     }) : [];
     var valueAutosuggestHandlers = useLoadItems(onLoadItems, '', property);
-    var asyncValueAutosuggesProps = temporaryToken.propertyKey
+    var asyncValueAutosuggesProps = propertyKey
         ? __assign(__assign({}, valueAutosuggestHandlers), asyncProps) : { empty: asyncProps.empty };
-    var valueControlId = useUniqueId('value');
-    var valueAutosuggest = temporaryToken && (React.createElement(InternalAutosuggest, __assign({ controlId: valueControlId, enteredTextLabel: i18nStrings.enteredTextLabel, value: temporaryToken.value || '', onChange: function (e) {
-            setTemporaryToken(__assign(__assign({}, temporaryToken), { value: e.detail.value }));
-        }, disabled: !operatorText, options: valueOptions }, asyncValueAutosuggesProps, { virtualScroll: true })));
-    fields.push({
-        text: i18nStrings.valueText,
-        className: styles['value-selector'],
-        control: valueAutosuggest,
-        controlId: valueControlId
-    });
-    return (React.createElement("div", null,
-        React.createElement(InternalSpaceBetween, { size: "l" }, fields.map(function (_a) {
-            var text = _a.text, control = _a.control, className = _a.className, controlId = _a.controlId;
-            return (React.createElement("div", { className: clsx(styles['token-editor-line'], className), key: text },
-                React.createElement("label", { className: styles['token-editor-label'], htmlFor: controlId }, text),
-                React.createElement("div", { className: styles['token-editor-field'] }, control)));
-        }))));
-};
-export var TokenEditor = function (props) {
-    var token = props.token, triggerComponent = props.triggerComponent, setToken = props.setToken, i18nStrings = props.i18nStrings, expandToViewport = props.expandToViewport;
-    var _a = useState(token), temporaryToken = _a[0], setTemporaryToken = _a[1];
+    var controlId = useUniqueId('value');
+    return (React.createElement("div", { className: clsx(styles['token-editor-line'], styles['value-selector']), key: i18nStrings.valueText },
+        React.createElement("label", { className: styles['token-editor-label'], htmlFor: controlId }, i18nStrings.valueText),
+        React.createElement("div", { className: styles['token-editor-field'] },
+            React.createElement(InternalAutosuggest, __assign({ controlId: controlId, enteredTextLabel: i18nStrings.enteredTextLabel, value: value !== null && value !== void 0 ? value : '', onChange: function (e) { return onChangeValue(e.detail.value); }, disabled: !operator, options: valueOptions }, asyncValueAutosuggesProps, { virtualScroll: true })))));
+}
+export var TokenEditor = function (_a) {
+    var asyncProperties = _a.asyncProperties, asyncProps = _a.asyncProps, customGroupsText = _a.customGroupsText, disableFreeTextFiltering = _a.disableFreeTextFiltering, expandToViewport = _a.expandToViewport, filteringOptions = _a.filteringOptions, filteringProperties = _a.filteringProperties, i18nStrings = _a.i18nStrings, onLoadItems = _a.onLoadItems, setToken = _a.setToken, token = _a.token, triggerComponent = _a.triggerComponent;
+    var _b = useState(token), temporaryToken = _b[0], setTemporaryToken = _b[1];
     var popoverRef = useRef(null);
     var closePopover = function () {
         popoverRef.current && popoverRef.current.dismissPopover();
     };
+    var propertyKey = temporaryToken.propertyKey;
+    var onChangePropertyKey = function (newPropertyKey) {
+        var filteringProperty = filteringProperties.reduce(function (acc, property) { return (property.key === newPropertyKey ? property : acc); }, undefined);
+        var allowedOperators = filteringProperty ? getAllowedOperators(filteringProperty) : freeTextOperators;
+        var operator = temporaryToken.operator && allowedOperators.indexOf(temporaryToken.operator) !== -1
+            ? temporaryToken.operator
+            : allowedOperators[0];
+        setTemporaryToken(__assign(__assign({}, temporaryToken), { propertyKey: newPropertyKey, operator: operator }));
+    };
+    var operator = temporaryToken.operator;
+    var onChangeOperator = function (newOperator) {
+        setTemporaryToken(__assign(__assign({}, temporaryToken), { operator: newOperator }));
+    };
+    var value = temporaryToken.value;
+    var onChangeValue = function (newValue) {
+        setTemporaryToken(__assign(__assign({}, temporaryToken), { value: newValue }));
+    };
     return (React.createElement(InternalPopover, { ref: popoverRef, className: styles['token-label'], triggerType: "text", header: i18nStrings.editTokenHeader, size: "large", position: "right", dismissAriaLabel: i18nStrings.dismissAriaLabel, __onOpen: function () { return setTemporaryToken(token); }, renderWithPortal: expandToViewport, content: React.createElement("div", { className: styles['token-editor'] },
-            React.createElement(EditingFields, __assign({}, props, { temporaryToken: temporaryToken, setTemporaryToken: setTemporaryToken })),
+            React.createElement(InternalSpaceBetween, { size: "l" },
+                React.createElement(PropertyInput, { propertyKey: propertyKey, onChangePropertyKey: onChangePropertyKey, asyncProps: asyncProperties ? asyncProps : null, filteringProperties: filteringProperties, onLoadItems: onLoadItems, customGroupsText: customGroupsText, i18nStrings: i18nStrings, disableFreeTextFiltering: disableFreeTextFiltering }),
+                React.createElement(OperatorInput, { propertyKey: propertyKey, operator: operator, onChangeOperator: onChangeOperator, filteringProperties: filteringProperties, i18nStrings: i18nStrings }),
+                React.createElement(ValueInput, { propertyKey: propertyKey, operator: operator, value: value, onChangeValue: onChangeValue, asyncProps: asyncProps, filteringProperties: filteringProperties, filteringOptions: filteringOptions, onLoadItems: onLoadItems, i18nStrings: i18nStrings })),
             React.createElement("div", { className: styles['token-editor-actions'] },
                 React.createElement(InternalButton, { variant: "link", className: styles['token-editor-cancel'], onClick: closePopover }, i18nStrings.cancelActionText),
                 React.createElement(InternalButton, { className: styles['token-editor-submit'], onClick: function () {

package/property-filter/token-editor.js.map

@@ -1 +1 @@
-{"version":3,"file":"token-editor.js","sourceRoot":"","sources":["../../../src/property-filter/token-editor.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 } from 'react';\nimport clsx from 'clsx';\n\nimport { SelectProps } from '../select/interfaces';\nimport InternalSelect from '../select/internal';\nimport InternalSpaceBetween from '../space-between/internal';\nimport InternalAutosuggest from '../autosuggest/internal';\nimport { AutosuggestProps } from '../autosuggest/interfaces';\nimport InternalPopover, { InternalPopoverRef } from '../popover/internal';\nimport { InternalButton } from '../button/internal';\nimport { useUniqueId } from '../internal/hooks/use-unique-id/index';\n\nimport { PropertyFilterProps } from './interfaces';\nimport styles from './styles.css.js';\nimport { useLoadItems } from './use-load-items';\nimport {\n  getAllowedOperators,\n  getPropertyOptions,\n  getPropertyByKey,\n  operatorToDescription,\n  getPropertySuggestions,\n} from './controller';\n\ninterface TokenEditorProps\n  extends Pick<\n    PropertyFilterProps,\n    | 'filteringProperties'\n    | 'filteringOptions'\n    | 'onLoadItems'\n    | 'i18nStrings'\n    | 'asyncProperties'\n    | 'customGroupsText'\n    | 'disableFreeTextFiltering'\n    | 'disabled'\n    | 'expandToViewport'\n  > {\n  token: PropertyFilterProps.Token;\n  triggerComponent?: React.ReactNode;\n  setToken: (newToken: PropertyFilterProps.Token) => void;\n  asyncProps: Pick<\n    AutosuggestProps,\n    'empty' | 'loadingText' | 'finishedText' | 'errorText' | 'recoveryText' | 'statusType'\n  >;\n}\n\nconst EditingFields = ({\n  temporaryToken,\n  setTemporaryToken,\n  asyncProps,\n  asyncProperties,\n  filteringProperties,\n  filteringOptions,\n  onLoadItems,\n  customGroupsText,\n  i18nStrings,\n  disableFreeTextFiltering,\n}: TokenEditorProps & {\n  temporaryToken: PropertyFilterProps.Token;\n  setTemporaryToken: (token: PropertyFilterProps.Token) => void;\n}) => {\n  const fields = [];\n  const property =\n    temporaryToken.propertyKey !== undefined\n      ? getPropertyByKey(filteringProperties, temporaryToken.propertyKey)\n      : undefined;\n  const propertySelectHandlers = useLoadItems(onLoadItems);\n  const asyncPropertySelectProps = asyncProperties\n    ? {\n        ...asyncProps,\n        ...propertySelectHandlers,\n      }\n    : {};\n  const propertyOptions: (SelectProps.Option | SelectProps.OptionGroup)[] = getPropertySuggestions(\n    filteringProperties,\n    customGroupsText,\n    i18nStrings,\n    ({ propertyLabel, key }) => ({\n      value: key,\n      label: propertyLabel,\n      dontCloseOnSelect: true,\n    })\n  );\n  const allPropertiesOption = {\n    label: i18nStrings.allPropertiesLabel,\n    value: undefined,\n  };\n  if (!disableFreeTextFiltering) {\n    propertyOptions.unshift(allPropertiesOption);\n  }\n\n  const propertyControlId = useUniqueId('property');\n  const propertySelect = (\n    <InternalSelect\n      controlId={propertyControlId}\n      options={propertyOptions}\n      selectedOption={\n        property\n          ? {\n              value: temporaryToken.propertyKey,\n              label: property.propertyLabel,\n            }\n          : allPropertiesOption\n      }\n      onChange={e => {\n        const filteringProperty = e.detail.selectedOption?.value\n          ? filteringProperties.reduce<PropertyFilterProps.FilteringProperty | undefined>(\n              (acc, property) => (property.key === e.detail.selectedOption.value ? property : acc),\n              undefined\n            )\n          : undefined;\n        const allowedOperators: PropertyFilterProps.ComparisonOperator[] = filteringProperty\n          ? getAllowedOperators(filteringProperty)\n          : freeTextOperators;\n        let operator = temporaryToken.operator;\n        if (temporaryToken.operator && allowedOperators.indexOf(temporaryToken.operator) === -1) {\n          operator = allowedOperators[0];\n        }\n        setTemporaryToken({\n          ...temporaryToken,\n          operator,\n          propertyKey: e.detail.selectedOption.value,\n        });\n      }}\n      {...asyncPropertySelectProps}\n    />\n  );\n  fields.push({\n    text: i18nStrings.propertyText,\n    className: styles['property-selector'],\n    control: propertySelect,\n    controlId: propertyControlId,\n  });\n\n  const operatorText = temporaryToken.operator;\n  const freeTextOperators: PropertyFilterProps.ComparisonOperator[] = [':', '!:'];\n  const operatorOptions = (property ? getAllowedOperators(property) : freeTextOperators).map(operator => ({\n    value: operator,\n    label: operator,\n    description: operatorToDescription(operator, i18nStrings),\n  }));\n  const operatorControlId = useUniqueId('operator');\n  const operatorSelect = temporaryToken && (\n    <InternalSelect\n      controlId={operatorControlId}\n      options={operatorOptions}\n      triggerVariant=\"option\"\n      selectedOption={\n        operatorText\n          ? {\n              value: operatorText,\n              label: operatorText,\n              description: operatorToDescription(operatorText, i18nStrings),\n            }\n          : null\n      }\n      onChange={e => {\n        e.detail.selectedOption.value &&\n          setTemporaryToken({\n            ...temporaryToken,\n            operator: e.detail.selectedOption.value as PropertyFilterProps.ComparisonOperator,\n          });\n      }}\n      disabled={!temporaryToken}\n    />\n  );\n  fields.push({\n    text: i18nStrings.operatorText,\n    className: styles['operator-selector'],\n    control: operatorSelect,\n    controlId: operatorControlId,\n  });\n\n  const valueOptions = property ? getPropertyOptions(property, filteringOptions)?.map(({ value }) => ({ value })) : [];\n  const valueAutosuggestHandlers = useLoadItems(onLoadItems, '', property);\n  const asyncValueAutosuggesProps = temporaryToken.propertyKey\n    ? {\n        ...valueAutosuggestHandlers,\n        ...asyncProps,\n      }\n    : { empty: asyncProps.empty };\n  const valueControlId = useUniqueId('value');\n  const valueAutosuggest = temporaryToken && (\n    <InternalAutosuggest\n      controlId={valueControlId}\n      enteredTextLabel={i18nStrings.enteredTextLabel}\n      value={temporaryToken.value || ''}\n      onChange={e => {\n        setTemporaryToken({\n          ...temporaryToken,\n          value: e.detail.value,\n        });\n      }}\n      disabled={!operatorText}\n      options={valueOptions}\n      {...asyncValueAutosuggesProps}\n      virtualScroll={true}\n    />\n  );\n  fields.push({\n    text: i18nStrings.valueText,\n    className: styles['value-selector'],\n    control: valueAutosuggest,\n    controlId: valueControlId,\n  });\n  return (\n    <div>\n      <InternalSpaceBetween size=\"l\">\n        {fields.map(({ text, control, className, controlId }) => (\n          <div className={clsx(styles['token-editor-line'], className)} key={text}>\n            <label className={styles['token-editor-label']} htmlFor={controlId}>\n              {text}\n            </label>\n            <div className={styles['token-editor-field']}>{control}</div>\n          </div>\n        ))}\n      </InternalSpaceBetween>\n    </div>\n  );\n};\n\nexport const TokenEditor = (props: TokenEditorProps) => {\n  const { token, triggerComponent, setToken, i18nStrings, expandToViewport } = props;\n  const [temporaryToken, setTemporaryToken] = useState<PropertyFilterProps.Token>(token);\n  const popoverRef = useRef<InternalPopoverRef>(null);\n  const closePopover = () => {\n    popoverRef.current && popoverRef.current.dismissPopover();\n  };\n  return (\n    <InternalPopover\n      ref={popoverRef}\n      className={styles['token-label']}\n      triggerType=\"text\"\n      header={i18nStrings.editTokenHeader}\n      size=\"large\"\n      position=\"right\"\n      dismissAriaLabel={i18nStrings.dismissAriaLabel}\n      __onOpen={() => setTemporaryToken(token)}\n      renderWithPortal={expandToViewport}\n      content={\n        <div className={styles['token-editor']}>\n          <EditingFields {...props} temporaryToken={temporaryToken} setTemporaryToken={setTemporaryToken} />\n          <div className={styles['token-editor-actions']}>\n            <InternalButton variant=\"link\" className={styles['token-editor-cancel']} onClick={closePopover}>\n              {i18nStrings.cancelActionText}\n            </InternalButton>\n            <InternalButton\n              className={styles['token-editor-submit']}\n              onClick={() => {\n                setToken(temporaryToken as PropertyFilterProps.Token);\n                closePopover();\n              }}\n            >\n              {i18nStrings.applyActionText}\n            </InternalButton>\n          </div>\n        </div>\n      }\n    >\n      {triggerComponent}\n    </InternalPopover>\n  );\n};\n"]}
+{"version":3,"file":"token-editor.js","sourceRoot":"","sources":["../../../src/property-filter/token-editor.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 } from 'react';\nimport clsx from 'clsx';\n\nimport { SelectProps } from '../select/interfaces';\nimport InternalSelect from '../select/internal';\nimport InternalSpaceBetween from '../space-between/internal';\nimport InternalAutosuggest from '../autosuggest/internal';\nimport { AutosuggestProps } from '../autosuggest/interfaces';\nimport InternalPopover, { InternalPopoverRef } from '../popover/internal';\nimport { InternalButton } from '../button/internal';\nimport { useUniqueId } from '../internal/hooks/use-unique-id/index';\n\nimport { PropertyFilterProps } from './interfaces';\nimport styles from './styles.css.js';\nimport { useLoadItems } from './use-load-items';\nimport {\n  getAllowedOperators,\n  getPropertyOptions,\n  getPropertyByKey,\n  operatorToDescription,\n  getPropertySuggestions,\n} from './controller';\n\nconst freeTextOperators: PropertyFilterProps.ComparisonOperator[] = [':', '!:'];\n\ntype AsyncProps = Pick<\n  AutosuggestProps,\n  'empty' | 'loadingText' | 'finishedText' | 'errorText' | 'recoveryText' | 'statusType'\n>;\n\ninterface TokenEditorProps\n  extends Pick<\n    PropertyFilterProps,\n    | 'filteringProperties'\n    | 'filteringOptions'\n    | 'onLoadItems'\n    | 'i18nStrings'\n    | 'asyncProperties'\n    | 'customGroupsText'\n    | 'disableFreeTextFiltering'\n    | 'disabled'\n    | 'expandToViewport'\n  > {\n  token: PropertyFilterProps.Token;\n  triggerComponent?: React.ReactNode;\n  setToken: (newToken: PropertyFilterProps.Token) => void;\n  asyncProps: AsyncProps;\n}\n\ninterface PropertyInputProps\n  extends Pick<\n    PropertyFilterProps,\n    'filteringProperties' | 'onLoadItems' | 'i18nStrings' | 'customGroupsText' | 'disableFreeTextFiltering'\n  > {\n  propertyKey: undefined | string;\n  onChangePropertyKey: (propertyKey: undefined | string) => void;\n  asyncProps: null | AsyncProps;\n}\n\nfunction PropertyInput({\n  propertyKey,\n  onChangePropertyKey,\n  asyncProps,\n  filteringProperties,\n  onLoadItems,\n  customGroupsText,\n  i18nStrings,\n  disableFreeTextFiltering,\n}: PropertyInputProps) {\n  const property = propertyKey !== undefined ? getPropertyByKey(filteringProperties, propertyKey) : undefined;\n  const propertySelectHandlers = useLoadItems(onLoadItems);\n  const asyncPropertySelectProps = asyncProps ? { ...asyncProps, ...propertySelectHandlers } : {};\n  const propertyOptions: (SelectProps.Option | SelectProps.OptionGroup)[] = getPropertySuggestions(\n    filteringProperties,\n    customGroupsText,\n    i18nStrings,\n    ({ propertyLabel, key }) => ({\n      value: key,\n      label: propertyLabel,\n      dontCloseOnSelect: true,\n    })\n  );\n  const allPropertiesOption = {\n    label: i18nStrings.allPropertiesLabel,\n    value: undefined,\n  };\n  if (!disableFreeTextFiltering) {\n    propertyOptions.unshift(allPropertiesOption);\n  }\n  const controlId = useUniqueId('property');\n\n  return (\n    <div className={clsx(styles['token-editor-line'], styles['property-selector'])} key={i18nStrings.propertyText}>\n      <label className={styles['token-editor-label']} htmlFor={controlId}>\n        {i18nStrings.propertyText}\n      </label>\n      <div className={styles['token-editor-field']}>\n        <InternalSelect\n          controlId={controlId}\n          options={propertyOptions}\n          selectedOption={\n            property\n              ? {\n                  value: propertyKey ?? undefined,\n                  label: property.propertyLabel,\n                }\n              : allPropertiesOption\n          }\n          onChange={e => onChangePropertyKey(e.detail.selectedOption.value)}\n          {...asyncPropertySelectProps}\n        />\n      </div>\n    </div>\n  );\n}\n\ninterface OperatorInputProps extends Pick<PropertyFilterProps, 'filteringProperties' | 'i18nStrings'> {\n  propertyKey: undefined | string;\n  operator: undefined | PropertyFilterProps.ComparisonOperator;\n  onChangeOperator: (operator: PropertyFilterProps.ComparisonOperator) => void;\n}\n\nfunction OperatorInput({\n  propertyKey,\n  operator,\n  onChangeOperator,\n  filteringProperties,\n  i18nStrings,\n}: OperatorInputProps) {\n  const property = propertyKey !== undefined ? getPropertyByKey(filteringProperties, propertyKey) : undefined;\n  const freeTextOperators: PropertyFilterProps.ComparisonOperator[] = [':', '!:'];\n  const operatorOptions = (property ? getAllowedOperators(property) : freeTextOperators).map(operator => ({\n    value: operator,\n    label: operator,\n    description: operatorToDescription(operator, i18nStrings),\n  }));\n  const contorlId = useUniqueId('operator');\n\n  return (\n    <div className={clsx(styles['token-editor-line'], styles['operator-selector'])} key={i18nStrings.operatorText}>\n      <label className={styles['token-editor-label']} htmlFor={contorlId}>\n        {i18nStrings.operatorText}\n      </label>\n      <div className={styles['token-editor-field']}>\n        <InternalSelect\n          controlId={contorlId}\n          options={operatorOptions}\n          triggerVariant=\"option\"\n          selectedOption={\n            operator\n              ? {\n                  value: operator,\n                  label: operator,\n                  description: operatorToDescription(operator, i18nStrings),\n                }\n              : null\n          }\n          onChange={e => onChangeOperator(e.detail.selectedOption.value as PropertyFilterProps.ComparisonOperator)}\n        />\n      </div>\n    </div>\n  );\n}\n\ninterface ValueInputProps\n  extends Pick<PropertyFilterProps, 'filteringProperties' | 'filteringOptions' | 'onLoadItems' | 'i18nStrings'> {\n  propertyKey: undefined | string;\n  operator: undefined | PropertyFilterProps.ComparisonOperator;\n  value: undefined | string;\n  onChangeValue: (value: string) => void;\n  asyncProps: AsyncProps;\n}\n\nfunction ValueInput({\n  propertyKey,\n  operator,\n  value,\n  onChangeValue,\n  asyncProps,\n  filteringProperties,\n  filteringOptions,\n  onLoadItems,\n  i18nStrings,\n}: ValueInputProps) {\n  const property = propertyKey !== undefined ? getPropertyByKey(filteringProperties, propertyKey) : undefined;\n  const valueOptions = property ? getPropertyOptions(property, filteringOptions)?.map(({ value }) => ({ value })) : [];\n  const valueAutosuggestHandlers = useLoadItems(onLoadItems, '', property);\n  const asyncValueAutosuggesProps = propertyKey\n    ? { ...valueAutosuggestHandlers, ...asyncProps }\n    : { empty: asyncProps.empty };\n  const controlId = useUniqueId('value');\n\n  return (\n    <div className={clsx(styles['token-editor-line'], styles['value-selector'])} key={i18nStrings.valueText}>\n      <label className={styles['token-editor-label']} htmlFor={controlId}>\n        {i18nStrings.valueText}\n      </label>\n      <div className={styles['token-editor-field']}>\n        <InternalAutosuggest\n          controlId={controlId}\n          enteredTextLabel={i18nStrings.enteredTextLabel}\n          value={value ?? ''}\n          onChange={e => onChangeValue(e.detail.value)}\n          disabled={!operator}\n          options={valueOptions}\n          {...asyncValueAutosuggesProps}\n          virtualScroll={true}\n        />\n      </div>\n    </div>\n  );\n}\n\nexport const TokenEditor = ({\n  asyncProperties,\n  asyncProps,\n  customGroupsText,\n  disableFreeTextFiltering,\n  expandToViewport,\n  filteringOptions,\n  filteringProperties,\n  i18nStrings,\n  onLoadItems,\n  setToken,\n  token,\n  triggerComponent,\n}: TokenEditorProps) => {\n  const [temporaryToken, setTemporaryToken] = useState<PropertyFilterProps.Token>(token);\n  const popoverRef = useRef<InternalPopoverRef>(null);\n  const closePopover = () => {\n    popoverRef.current && popoverRef.current.dismissPopover();\n  };\n\n  const propertyKey = temporaryToken.propertyKey;\n  const onChangePropertyKey = (newPropertyKey: undefined | string) => {\n    const filteringProperty = filteringProperties.reduce<PropertyFilterProps.FilteringProperty | undefined>(\n      (acc, property) => (property.key === newPropertyKey ? property : acc),\n      undefined\n    );\n    const allowedOperators = filteringProperty ? getAllowedOperators(filteringProperty) : freeTextOperators;\n    const operator =\n      temporaryToken.operator && allowedOperators.indexOf(temporaryToken.operator) !== -1\n        ? temporaryToken.operator\n        : allowedOperators[0];\n    setTemporaryToken({ ...temporaryToken, propertyKey: newPropertyKey, operator });\n  };\n\n  const operator = temporaryToken.operator;\n  const onChangeOperator = (newOperator: PropertyFilterProps.ComparisonOperator) => {\n    setTemporaryToken({ ...temporaryToken, operator: newOperator });\n  };\n\n  const value = temporaryToken.value;\n  const onChangeValue = (newValue: string) => {\n    setTemporaryToken({ ...temporaryToken, value: newValue });\n  };\n\n  return (\n    <InternalPopover\n      ref={popoverRef}\n      className={styles['token-label']}\n      triggerType=\"text\"\n      header={i18nStrings.editTokenHeader}\n      size=\"large\"\n      position=\"right\"\n      dismissAriaLabel={i18nStrings.dismissAriaLabel}\n      __onOpen={() => setTemporaryToken(token)}\n      renderWithPortal={expandToViewport}\n      content={\n        <div className={styles['token-editor']}>\n          <InternalSpaceBetween size=\"l\">\n            <PropertyInput\n              propertyKey={propertyKey}\n              onChangePropertyKey={onChangePropertyKey}\n              asyncProps={asyncProperties ? asyncProps : null}\n              filteringProperties={filteringProperties}\n              onLoadItems={onLoadItems}\n              customGroupsText={customGroupsText}\n              i18nStrings={i18nStrings}\n              disableFreeTextFiltering={disableFreeTextFiltering}\n            />\n\n            <OperatorInput\n              propertyKey={propertyKey}\n              operator={operator}\n              onChangeOperator={onChangeOperator}\n              filteringProperties={filteringProperties}\n              i18nStrings={i18nStrings}\n            />\n\n            <ValueInput\n              propertyKey={propertyKey}\n              operator={operator}\n              value={value}\n              onChangeValue={onChangeValue}\n              asyncProps={asyncProps}\n              filteringProperties={filteringProperties}\n              filteringOptions={filteringOptions}\n              onLoadItems={onLoadItems}\n              i18nStrings={i18nStrings}\n            />\n          </InternalSpaceBetween>\n\n          <div className={styles['token-editor-actions']}>\n            <InternalButton variant=\"link\" className={styles['token-editor-cancel']} onClick={closePopover}>\n              {i18nStrings.cancelActionText}\n            </InternalButton>\n            <InternalButton\n              className={styles['token-editor-submit']}\n              onClick={() => {\n                setToken(temporaryToken as PropertyFilterProps.Token);\n                closePopover();\n              }}\n            >\n              {i18nStrings.applyActionText}\n            </InternalButton>\n          </div>\n        </div>\n      }\n    >\n      {triggerComponent}\n    </InternalPopover>\n  );\n};\n"]}

package/property-filter/use-load-items.d.ts

@@ -7,7 +7,7 @@ import { PropertyFilterProps } from './interfaces';
  * the same event from firing twice in a row. This means, refocusing the control sometimes results in
  * `onLoadItems` firing, but sometimes not.
  */
-export declare const useLoadItems: (onLoadItems: PropertyFilterProps['onLoadItems'], focusFilteringText?: string | undefined, currentFilteringProperty?: import("@cloudscape-design/collection-hooks").PropertyFilterProperty | undefined, currentFilteringText?: string | undefined, currentFilteringOperator?: import("@cloudscape-design/collection-hooks").PropertyFilterOperator | undefined) => {
+export declare const useLoadItems: (onLoadItems: PropertyFilterProps['onLoadItems'], focusFilteringText?: string | undefined, currentFilteringProperty?: PropertyFilterProps.FilteringProperty | undefined, currentFilteringText?: string | undefined, currentFilteringOperator?: import("@cloudscape-design/collection-hooks").PropertyFilterOperator | undefined) => {
     onBlur: () => void;
     onFocus: () => void;
     onLoadItems: NonCancelableEventHandler<import("../internal/components/dropdown/interfaces").OptionsLoadItemsDetail>;

package/radio-group/radio-button.js

@@ -11,7 +11,7 @@ export default function RadioButton(_a) {
     var _b, _c;
     var name = _a.name, label = _a.label, value = _a.value, checked = _a.checked, withoutLabel = _a.withoutLabel, description = _a.description, disabled = _a.disabled, controlId = _a.controlId, onChange = _a.onChange;
     var isVisualRefresh = useVisualRefresh();
-    return (React.createElement(AbstractSwitch, { className: clsx(styles.radio, description && styles['radio--has-description']), controlClassName: styles['radio-control'], label: label, description: description, disabled: disabled, controlId: controlId, nativeControl: function (nativeControlProps) { return (React.createElement("input", __assign({}, nativeControlProps, { className: styles.input, type: "radio", name: name, value: value, checked: checked, onChange: onChange && (function () { return fireNonCancelableEvent(onChange, { value: value }); }) }))); }, styledControl: React.createElement("svg", { viewBox: "0 0 100 100", focusable: "false", "aria-hidden": "true" },
+    return (React.createElement(AbstractSwitch, { className: clsx(styles.radio, description && styles['radio--has-description']), controlClassName: styles['radio-control'], outlineClassName: styles.outline, label: label, description: description, disabled: disabled, controlId: controlId, nativeControl: function (nativeControlProps) { return (React.createElement("input", __assign({}, nativeControlProps, { type: "radio", name: name, value: value, checked: checked, onChange: onChange && (function () { return fireNonCancelableEvent(onChange, { value: value }); }) }))); }, styledControl: React.createElement("svg", { viewBox: "0 0 100 100", focusable: "false", "aria-hidden": "true" },
             React.createElement("circle", { className: clsx(styles['styled-circle-border'], (_b = {}, _b[styles['styled-circle-disabled']] = disabled, _b)), strokeWidth: isVisualRefresh ? 12 : 8, cx: 50, cy: 50, r: isVisualRefresh ? 44 : 46 }),
             React.createElement("circle", { className: clsx(styles['styled-circle-fill'], (_c = {},
                     _c[styles['styled-circle-disabled']] = disabled,

package/radio-group/radio-button.js.map

@@ -1 +1 @@
-{"version":3,"file":"radio-button.js","sourceRoot":"","sources":["../../../src/radio-group/radio-button.tsx"],"names":[],"mappings":";AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,IAAI,MAAM,MAAM,CAAC;AACxB,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,cAAc,MAAM,wCAAwC,CAAC;AACpE,OAAO,EAAE,sBAAsB,EAA6B,MAAM,oBAAoB,CAAC;AACvF,OAAO,EAAE,gBAAgB,EAAE,MAAM,mCAAmC,CAAC;AAErE,OAAO,MAAM,MAAM,iBAAiB,CAAC;AASrC,MAAM,CAAC,OAAO,UAAU,WAAW,CAAC,EAUjB;;QATjB,IAAI,UAAA,EACJ,KAAK,WAAA,EACL,KAAK,WAAA,EACL,OAAO,aAAA,EACP,YAAY,kBAAA,EACZ,WAAW,iBAAA,EACX,QAAQ,cAAA,EACR,SAAS,eAAA,EACT,QAAQ,cAAA;IAER,IAAM,eAAe,GAAG,gBAAgB,EAAE,CAAC;IAC3C,OAAO,CACL,oBAAC,cAAc,IACb,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,KAAK,EAAE,WAAW,IAAI,MAAM,CAAC,wBAAwB,CAAC,CAAC,EAC9E,gBAAgB,EAAE,MAAM,CAAC,eAAe,CAAC,EACzC,KAAK,EAAE,KAAK,EACZ,WAAW,EAAE,WAAW,EACxB,QAAQ,EAAE,QAAQ,EAClB,SAAS,EAAE,SAAS,EACpB,aAAa,EAAE,UAAA,kBAAkB,IAAI,OAAA,CACnC,0CACM,kBAAkB,IACtB,SAAS,EAAE,MAAM,CAAC,KAAK,EACvB,IAAI,EAAC,OAAO,EACZ,IAAI,EAAE,IAAI,EACV,KAAK,EAAE,KAAK,EACZ,OAAO,EAAE,OAAO,EAChB,QAAQ,EAAE,QAAQ,IAAI,CAAC,cAAM,OAAA,sBAAsB,CAAC,QAAQ,EAAE,EAAE,KAAK,OAAA,EAAE,CAAC,EAA3C,CAA2C,CAAC,IACzE,CACH,EAVoC,CAUpC,EACD,aAAa,EACX,6BAAK,OAAO,EAAC,aAAa,EAAC,SAAS,EAAC,OAAO,iBAAa,MAAM;YAC7D,gCACE,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,sBAAsB,CAAC,YAAI,GAAC,MAAM,CAAC,wBAAwB,CAAC,IAAG,QAAQ,MAAG,EACjG,WAAW,EAAE,eAAe,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,EACrC,EAAE,EAAE,EAAE,EACN,EAAE,EAAE,EAAE,EACN,CAAC,EAAE,eAAe,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE,GAC5B;YACF,gCACE,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,oBAAoB,CAAC;oBAC1C,GAAC,MAAM,CAAC,wBAAwB,CAAC,IAAG,QAAQ;oBAC5C,GAAC,MAAM,CAAC,uBAAuB,CAAC,IAAG,OAAO;wBAC1C,EACF,WAAW,EAAE,EAAE,EACf,EAAE,EAAE,EAAE,EACN,EAAE,EAAE,EAAE,EACN,CAAC,EAAE,EAAE,GACL,CACE,EAER,YAAY,EAAE,YAAY,GAC1B,CACH,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';\nimport AbstractSwitch from '../internal/components/abstract-switch';\nimport { fireNonCancelableEvent, NonCancelableEventHandler } from '../internal/events';\nimport { useVisualRefresh } from '../internal/hooks/use-visual-mode';\nimport { RadioGroupProps } from './interfaces';\nimport styles from './styles.css.js';\n\ninterface RadioButtonProps extends RadioGroupProps.RadioButtonDefinition {\n  name: string;\n  checked: boolean;\n  withoutLabel?: boolean;\n  onChange?: NonCancelableEventHandler<RadioGroupProps.ChangeDetail>;\n}\n\nexport default function RadioButton({\n  name,\n  label,\n  value,\n  checked,\n  withoutLabel,\n  description,\n  disabled,\n  controlId,\n  onChange,\n}: RadioButtonProps) {\n  const isVisualRefresh = useVisualRefresh();\n  return (\n    <AbstractSwitch\n      className={clsx(styles.radio, description && styles['radio--has-description'])}\n      controlClassName={styles['radio-control']}\n      label={label}\n      description={description}\n      disabled={disabled}\n      controlId={controlId}\n      nativeControl={nativeControlProps => (\n        <input\n          {...nativeControlProps}\n          className={styles.input}\n          type=\"radio\"\n          name={name}\n          value={value}\n          checked={checked}\n          onChange={onChange && (() => fireNonCancelableEvent(onChange, { value }))}\n        />\n      )}\n      styledControl={\n        <svg viewBox=\"0 0 100 100\" focusable=\"false\" aria-hidden=\"true\">\n          <circle\n            className={clsx(styles['styled-circle-border'], { [styles['styled-circle-disabled']]: disabled })}\n            strokeWidth={isVisualRefresh ? 12 : 8}\n            cx={50}\n            cy={50}\n            r={isVisualRefresh ? 44 : 46}\n          />\n          <circle\n            className={clsx(styles['styled-circle-fill'], {\n              [styles['styled-circle-disabled']]: disabled,\n              [styles['styled-circle-checked']]: checked,\n            })}\n            strokeWidth={30}\n            cx={50}\n            cy={50}\n            r={35}\n          />\n        </svg>\n      }\n      withoutLabel={withoutLabel}\n    />\n  );\n}\n"]}
+{"version":3,"file":"radio-button.js","sourceRoot":"","sources":["../../../src/radio-group/radio-button.tsx"],"names":[],"mappings":";AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,IAAI,MAAM,MAAM,CAAC;AACxB,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,cAAc,MAAM,wCAAwC,CAAC;AACpE,OAAO,EAAE,sBAAsB,EAA6B,MAAM,oBAAoB,CAAC;AACvF,OAAO,EAAE,gBAAgB,EAAE,MAAM,mCAAmC,CAAC;AAErE,OAAO,MAAM,MAAM,iBAAiB,CAAC;AASrC,MAAM,CAAC,OAAO,UAAU,WAAW,CAAC,EAUjB;;QATjB,IAAI,UAAA,EACJ,KAAK,WAAA,EACL,KAAK,WAAA,EACL,OAAO,aAAA,EACP,YAAY,kBAAA,EACZ,WAAW,iBAAA,EACX,QAAQ,cAAA,EACR,SAAS,eAAA,EACT,QAAQ,cAAA;IAER,IAAM,eAAe,GAAG,gBAAgB,EAAE,CAAC;IAC3C,OAAO,CACL,oBAAC,cAAc,IACb,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,KAAK,EAAE,WAAW,IAAI,MAAM,CAAC,wBAAwB,CAAC,CAAC,EAC9E,gBAAgB,EAAE,MAAM,CAAC,eAAe,CAAC,EACzC,gBAAgB,EAAE,MAAM,CAAC,OAAO,EAChC,KAAK,EAAE,KAAK,EACZ,WAAW,EAAE,WAAW,EACxB,QAAQ,EAAE,QAAQ,EAClB,SAAS,EAAE,SAAS,EACpB,aAAa,EAAE,UAAA,kBAAkB,IAAI,OAAA,CACnC,0CACM,kBAAkB,IACtB,IAAI,EAAC,OAAO,EACZ,IAAI,EAAE,IAAI,EACV,KAAK,EAAE,KAAK,EACZ,OAAO,EAAE,OAAO,EAChB,QAAQ,EAAE,QAAQ,IAAI,CAAC,cAAM,OAAA,sBAAsB,CAAC,QAAQ,EAAE,EAAE,KAAK,OAAA,EAAE,CAAC,EAA3C,CAA2C,CAAC,IACzE,CACH,EAToC,CASpC,EACD,aAAa,EACX,6BAAK,OAAO,EAAC,aAAa,EAAC,SAAS,EAAC,OAAO,iBAAa,MAAM;YAC7D,gCACE,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,sBAAsB,CAAC,YAAI,GAAC,MAAM,CAAC,wBAAwB,CAAC,IAAG,QAAQ,MAAG,EACjG,WAAW,EAAE,eAAe,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,EACrC,EAAE,EAAE,EAAE,EACN,EAAE,EAAE,EAAE,EACN,CAAC,EAAE,eAAe,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE,GAC5B;YACF,gCACE,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,oBAAoB,CAAC;oBAC1C,GAAC,MAAM,CAAC,wBAAwB,CAAC,IAAG,QAAQ;oBAC5C,GAAC,MAAM,CAAC,uBAAuB,CAAC,IAAG,OAAO;wBAC1C,EACF,WAAW,EAAE,EAAE,EACf,EAAE,EAAE,EAAE,EACN,EAAE,EAAE,EAAE,EACN,CAAC,EAAE,EAAE,GACL,CACE,EAER,YAAY,EAAE,YAAY,GAC1B,CACH,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';\nimport AbstractSwitch from '../internal/components/abstract-switch';\nimport { fireNonCancelableEvent, NonCancelableEventHandler } from '../internal/events';\nimport { useVisualRefresh } from '../internal/hooks/use-visual-mode';\nimport { RadioGroupProps } from './interfaces';\nimport styles from './styles.css.js';\n\ninterface RadioButtonProps extends RadioGroupProps.RadioButtonDefinition {\n  name: string;\n  checked: boolean;\n  withoutLabel?: boolean;\n  onChange?: NonCancelableEventHandler<RadioGroupProps.ChangeDetail>;\n}\n\nexport default function RadioButton({\n  name,\n  label,\n  value,\n  checked,\n  withoutLabel,\n  description,\n  disabled,\n  controlId,\n  onChange,\n}: RadioButtonProps) {\n  const isVisualRefresh = useVisualRefresh();\n  return (\n    <AbstractSwitch\n      className={clsx(styles.radio, description && styles['radio--has-description'])}\n      controlClassName={styles['radio-control']}\n      outlineClassName={styles.outline}\n      label={label}\n      description={description}\n      disabled={disabled}\n      controlId={controlId}\n      nativeControl={nativeControlProps => (\n        <input\n          {...nativeControlProps}\n          type=\"radio\"\n          name={name}\n          value={value}\n          checked={checked}\n          onChange={onChange && (() => fireNonCancelableEvent(onChange, { value }))}\n        />\n      )}\n      styledControl={\n        <svg viewBox=\"0 0 100 100\" focusable=\"false\" aria-hidden=\"true\">\n          <circle\n            className={clsx(styles['styled-circle-border'], { [styles['styled-circle-disabled']]: disabled })}\n            strokeWidth={isVisualRefresh ? 12 : 8}\n            cx={50}\n            cy={50}\n            r={isVisualRefresh ? 44 : 46}\n          />\n          <circle\n            className={clsx(styles['styled-circle-fill'], {\n              [styles['styled-circle-disabled']]: disabled,\n              [styles['styled-circle-checked']]: checked,\n            })}\n            strokeWidth={30}\n            cx={50}\n            cy={50}\n            r={35}\n          />\n        </svg>\n      }\n      withoutLabel={withoutLabel}\n    />\n  );\n}\n"]}

package/radio-group/styles.css.js

@@ -1,14 +1,14 @@
 
     import './styles.scoped.css';
     export default {
-  "root": "awsui_root_1mabk_r7q1e_93",
-  "radio": "awsui_radio_1mabk_r7q1e_105",
-  "radio--has-description": "awsui_radio--has-description_1mabk_r7q1e_113",
-  "radio-control": "awsui_radio-control_1mabk_r7q1e_117",
-  "input": "awsui_input_1mabk_r7q1e_125",
-  "styled-circle-border": "awsui_styled-circle-border_1mabk_r7q1e_147",
-  "styled-circle-disabled": "awsui_styled-circle-disabled_1mabk_r7q1e_151",
-  "styled-circle-fill": "awsui_styled-circle-fill_1mabk_r7q1e_156",
-  "styled-circle-checked": "awsui_styled-circle-checked_1mabk_r7q1e_162"
+  "root": "awsui_root_1mabk_1y9l8_93",
+  "radio": "awsui_radio_1mabk_1y9l8_105",
+  "radio--has-description": "awsui_radio--has-description_1mabk_1y9l8_113",
+  "radio-control": "awsui_radio-control_1mabk_1y9l8_117",
+  "outline": "awsui_outline_1mabk_1y9l8_125",
+  "styled-circle-border": "awsui_styled-circle-border_1mabk_1y9l8_144",
+  "styled-circle-disabled": "awsui_styled-circle-disabled_1mabk_1y9l8_148",
+  "styled-circle-fill": "awsui_styled-circle-fill_1mabk_1y9l8_153",
+  "styled-circle-checked": "awsui_styled-circle-checked_1mabk_1y9l8_159"
 };