@cloudscape-design/components 3.0.31 → 3.0.34

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

@@ -0,0 +1,143 @@
+import { __assign, __rest } from "tslib";
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import clsx from 'clsx';
+import React, { useCallback, useRef, useState } from 'react';
+import { useKeyboardHandler } from '../autosuggest/controller';
+import { useAutosuggestItems } from '../autosuggest/options-controller';
+import Dropdown from '../internal/components/dropdown';
+import { useDropdownStatus } from '../internal/components/dropdown-status';
+import DropdownFooter from '../internal/components/dropdown-footer';
+import { useFormFieldContext } from '../internal/context/form-field-context';
+import { getBaseProps } from '../internal/base-component';
+import { generateUniqueId, useUniqueId } from '../internal/hooks/use-unique-id';
+import useForwardFocus from '../internal/hooks/forward-focus';
+import { fireNonCancelableEvent } from '../internal/events';
+import InternalInput from '../input/internal';
+import styles from '../autosuggest/styles.css.js';
+import { fireCancelableEvent } from '../internal/events/index';
+import AutosuggestOptionsList from '../autosuggest/options-list';
+var DROPDOWN_WIDTH = 300;
+var isInteractive = function (option) {
+    return !!option && !option.disabled && option.type !== 'parent';
+};
+var useLoadMoreItems = function (onLoadItems) {
+    var lastFilteringText = useRef(null);
+    return useCallback(function (firstPage, samePage, filteringText) {
+        if (samePage || !firstPage || filteringText === undefined || lastFilteringText.current !== filteringText) {
+            if (filteringText !== undefined) {
+                lastFilteringText.current = filteringText;
+            }
+            if (lastFilteringText.current !== null && onLoadItems) {
+                fireNonCancelableEvent(onLoadItems, { filteringText: lastFilteringText.current, firstPage: firstPage, samePage: samePage });
+            }
+        }
+    }, [onLoadItems]);
+};
+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;
+    var openDropdown = function () { return setOpen(true); };
+    var closeDropdown = function () {
+        setOpen(false);
+        resetHighlight();
+    };
+    var handleBlur = function (event) {
+        var _a;
+        if (event.currentTarget.contains(event.relatedTarget) ||
+            ((_a = dropdownFooterRef.current) === null || _a === void 0 ? void 0 : _a.contains(event.relatedTarget))) {
+            return;
+        }
+        closeDropdown();
+    };
+    var selectOption = function (option) {
+        var value = option.value || '';
+        fireNonCancelableEvent(onChange, { value: value });
+        var selectedCancelled = fireCancelableEvent(onOptionClick, option);
+        if (!selectedCancelled) {
+            closeDropdown();
+        }
+        else {
+            resetHighlight();
+        }
+    };
+    var selectHighlighted = function () {
+        if (highlightedOption) {
+            if (isInteractive(highlightedOption)) {
+                selectOption(highlightedOption);
+            }
+        }
+        else {
+            closeDropdown();
+        }
+    };
+    var fireLoadMore = useLoadMoreItems(onLoadItems);
+    var handleInputChange = function (e) {
+        openDropdown();
+        resetHighlight();
+        onChange && onChange(e);
+    };
+    var handleKeyDown = useKeyboardHandler(moveHighlight, openDropdown, selectHighlighted, isKeyboard, open, onKeyDown);
+    var handleLoadMore = useCallback(function () {
+        options && options.length && statusType === 'pending' && fireLoadMore(false, false);
+    }, [fireLoadMore, options, statusType]);
+    var handleRecoveryClick = useCallback(function () {
+        var _a;
+        fireLoadMore(false, true);
+        (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+    }, [fireLoadMore]);
+    var formFieldContext = useFormFieldContext(rest);
+    var baseProps = getBaseProps(rest);
+    var inputRef = useRef(null);
+    var dropdownFooterRef = useRef(null);
+    useForwardFocus(ref, inputRef);
+    var selfControlId = useUniqueId('input');
+    var controlId = (_a = formFieldContext.controlId) !== null && _a !== void 0 ? _a : selfControlId;
+    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 nativeAttributes = {
+        placeholder: placeholder,
+        onClick: openDropdown,
+        role: 'combobox',
+        'aria-autocomplete': 'list',
+        'aria-expanded': expanded,
+        'aria-controls': listId,
+        // 'aria-owns' needed for safari+vo to announce activedescendant content
+        'aria-owns': listId,
+        'aria-label': ariaLabel,
+        'aria-activedescendant': highlightedOptionId
+    };
+    var handleInputFocus = function () {
+        var openPrevented = fireCancelableEvent(onOpen, null);
+        if (!openPrevented) {
+            openDropdown();
+            fireLoadMore(true, false, '');
+        }
+    };
+    var isEmpty = !value && !items.length;
+    var showRecoveryLink = open && statusType === 'error' && props.recoveryText;
+    var dropdownStatus = useDropdownStatus(__assign(__assign({}, props), { isEmpty: isEmpty, onRecoveryClick: handleRecoveryClick }));
+    var handleMouseDown = function (event) {
+        // prevent currently focused element from losing it
+        event.preventDefault();
+    };
+    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 })))));
+});
+export default PropertyFilterAutosuggest;
+//# sourceMappingURL=property-filter-autosuggest.js.map

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

@@ -0,0 +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"]}

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/tabs/tab-header-bar.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"tab-header-bar.d.ts","sourceRoot":"","sources":["../../../src/tabs/tab-header-bar.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAiBzC,MAAM,WAAW,iBAAiB;IAChC,QAAQ,EAAE,CAAC,YAAY,EAAE,SAAS,CAAC,YAAY,KAAK,IAAI,CAAC;IACzD,WAAW,EAAE,SAAS,CAAC,aAAa,CAAC,CAAC;IACtC,IAAI,EAAE,SAAS,CAAC,MAAM,CAAC,CAAC;IACxB,OAAO,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC9B,WAAW,EAAE,MAAM,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,cAAc,CAAC,EAAE,MAAM,CAAC;CACzB;AAED,wBAAgB,YAAY,CAAC,EAC3B,QAAQ,EACR,WAAW,EACX,IAAI,EACJ,OAAO,EACP,WAAW,EACX,SAAS,EACT,cAAc,GACf,EAAE,iBAAiB,eAkRnB"}
+{"version":3,"file":"tab-header-bar.d.ts","sourceRoot":"","sources":["../../../src/tabs/tab-header-bar.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAiBzC,MAAM,WAAW,iBAAiB;IAChC,QAAQ,EAAE,CAAC,YAAY,EAAE,SAAS,CAAC,YAAY,KAAK,IAAI,CAAC;IACzD,WAAW,EAAE,SAAS,CAAC,aAAa,CAAC,CAAC;IACtC,IAAI,EAAE,SAAS,CAAC,MAAM,CAAC,CAAC;IACxB,OAAO,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC9B,WAAW,EAAE,MAAM,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,cAAc,CAAC,EAAE,MAAM,CAAC;CACzB;AAED,wBAAgB,YAAY,CAAC,EAC3B,QAAQ,EACR,WAAW,EACX,IAAI,EACJ,OAAO,EACP,WAAW,EACX,SAAS,EACT,cAAc,GACf,EAAE,iBAAiB,eAoRnB"}

package/tabs/tab-header-bar.js

@@ -95,10 +95,10 @@ export function TabHeaderBar(_a) {
     //converted span to div as list should not be a child of span for HTML validation
     React.createElement("div", { className: classes, ref: containerRef },
         horizontalOverflow && (React.createElement("span", { ref: leftOverflowButton, className: leftButtonClasses },
-            React.createElement(InternalButton, { variant: "icon", iconName: "angle-left", __nativeAttributes: paginationButtonAttributes, disabled: !leftOverflow, onClick: function () { return onPaginationClick(headerBarRef, -1); } }))),
+            React.createElement(InternalButton, { formAction: "none", variant: "icon", iconName: "angle-left", __nativeAttributes: paginationButtonAttributes, disabled: !leftOverflow, onClick: function () { return onPaginationClick(headerBarRef, -1); } }))),
         React.createElement("ul", { role: "tablist", className: styles['tabs-header-list'], "aria-label": ariaLabel, "aria-labelledby": ariaLabelledby, ref: headerBarRef, onScroll: onScroll }, tabs.map(renderTabHeader)),
         horizontalOverflow && (React.createElement("span", { className: rightButtonClasses },
-            React.createElement(InternalButton, { variant: "icon", iconName: "angle-right", __nativeAttributes: paginationButtonAttributes, disabled: !rightOverflow, onClick: function () { return onPaginationClick(headerBarRef, 1); } })))));
+            React.createElement(InternalButton, { formAction: "none", variant: "icon", iconName: "angle-right", __nativeAttributes: paginationButtonAttributes, disabled: !rightOverflow, onClick: function () { return onPaginationClick(headerBarRef, 1); } })))));
     function renderTabHeader(tab) {
         var _a;
         var enabledTabsWithCurrentTab = tabs.filter(function (tab) { return !tab.disabled || tab.id === activeTabId; });

package/tabs/tab-header-bar.js.map

@@ -1 +1 @@
-{"version":3,"file":"tab-header-bar.js","sourceRoot":"","sources":["../../../src/tabs/tab-header-bar.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, { useRef, useState, useEffect } from 'react';\nimport { TabsProps } from './interfaces';\nimport clsx from 'clsx';\nimport styles from './styles.css.js';\nimport { InternalButton } from '../button/internal';\nimport useFocusVisible from '../internal/hooks/focus-visible';\nimport { useContainerQuery } from '../internal/hooks/container-queries';\nimport { KeyCode } from '../internal/keycode';\nimport {\n  onPaginationClick,\n  hasHorizontalOverflow,\n  hasLeftOverflow,\n  hasRightOverflow,\n  scrollIntoView,\n} from './scroll-utils';\nimport { isPlainLeftClick } from '../internal/events';\nimport { useVisualRefresh } from '../internal/hooks/use-visual-mode';\n\nexport interface TabHeaderBarProps {\n  onChange: (changeDetail: TabsProps.ChangeDetail) => void;\n  activeTabId: TabsProps['activeTabId'];\n  tabs: TabsProps['tabs'];\n  variant: TabsProps['variant'];\n  idNamespace: string;\n  ariaLabel?: string;\n  ariaLabelledby?: string;\n}\n\nexport function TabHeaderBar({\n  onChange,\n  activeTabId,\n  tabs,\n  variant,\n  idNamespace,\n  ariaLabel,\n  ariaLabelledby,\n}: TabHeaderBarProps) {\n  const focusVisible = useFocusVisible();\n\n  const headerBarRef = useRef<HTMLUListElement>(null);\n  const activeTabHeaderRef = useRef<HTMLAnchorElement>(null);\n  const leftOverflowButton = useRef<HTMLElement>(null);\n\n  const isVisualRefresh = useVisualRefresh();\n\n  const [widthChange, containerRef] = useContainerQuery<number>(rect => rect.width);\n  const tabRefs = useRef<Map<string, HTMLElement>>(new Map());\n  const [horizontalOverflow, setHorizontalOverflow] = useState(false);\n  const [leftOverflow, setLeftOverflow] = useState(false);\n  const [rightOverflow, setRightOverflow] = useState(false);\n\n  useEffect(() => {\n    if (headerBarRef.current) {\n      setHorizontalOverflow(hasHorizontalOverflow(headerBarRef.current, leftOverflowButton));\n      setLeftOverflow(hasLeftOverflow(headerBarRef.current));\n      setRightOverflow(hasRightOverflow(headerBarRef.current));\n    }\n  }, [widthChange, tabs]);\n\n  const scrollIntoViewIfPossible = (smooth: boolean) => {\n    if (!activeTabId) {\n      return;\n    }\n    const activeTabRef = tabRefs.current.get(activeTabId);\n    if (activeTabRef && headerBarRef.current) {\n      scrollIntoView(activeTabRef, headerBarRef.current, smooth);\n    }\n  };\n\n  useEffect(() => {\n    // Delay scrollIntoView as the position is depending on parent elements\n    // (effects are called inside-out in the component tree).\n    // Wait one frame to allow parents to complete it's calculation.\n    requestAnimationFrame(() => {\n      scrollIntoViewIfPossible(false);\n    });\n    // Non-smooth scrolling should not be called upon activeId change\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [horizontalOverflow, widthChange, tabs.length]);\n\n  useEffect(() => {\n    scrollIntoViewIfPossible(true);\n    // Smooth scrolling should only be called upon activeId change\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [activeTabId]);\n\n  useEffect(() => {\n    /*\n     When the selected tab changes and we are currently already focused on a tab,\n     move the focus to the newly selected tab.\n    */\n    if (headerBarRef.current?.contains(document.activeElement)) {\n      if (document.activeElement !== activeTabHeaderRef.current) {\n        activeTabHeaderRef.current?.focus({ preventScroll: true });\n      }\n    }\n  }, [activeTabId]);\n\n  const onScroll = () => {\n    if (headerBarRef.current) {\n      setLeftOverflow(hasLeftOverflow(headerBarRef.current));\n      setRightOverflow(hasRightOverflow(headerBarRef.current));\n    }\n  };\n\n  const classes = clsx({\n    [styles['tabs-header']]: true,\n    [styles['tabs-header-with-divider']]: variant === 'default' || isVisualRefresh,\n  });\n\n  const leftButtonClasses = clsx({\n    [styles['pagination-button']]: true,\n    [styles['pagination-button-left']]: true,\n    [styles['pagination-button-left-scrollable']]: leftOverflow,\n  });\n\n  const rightButtonClasses = clsx({\n    [styles['pagination-button']]: true,\n    [styles['pagination-button-right']]: true,\n    [styles['pagination-button-right-scrollable']]: rightOverflow,\n  });\n\n  const paginationButtonAttributes = {\n    'aria-hidden': true,\n    tabIndex: -1,\n  };\n\n  return (\n    //converted span to div as list should not be a child of span for HTML validation\n    <div className={classes} ref={containerRef}>\n      {horizontalOverflow && (\n        <span ref={leftOverflowButton} className={leftButtonClasses}>\n          <InternalButton\n            variant=\"icon\"\n            iconName=\"angle-left\"\n            __nativeAttributes={paginationButtonAttributes}\n            disabled={!leftOverflow}\n            onClick={() => onPaginationClick(headerBarRef, -1)}\n          />\n        </span>\n      )}\n      <ul\n        role=\"tablist\"\n        className={styles['tabs-header-list']}\n        aria-label={ariaLabel}\n        aria-labelledby={ariaLabelledby}\n        ref={headerBarRef}\n        onScroll={onScroll}\n      >\n        {tabs.map(renderTabHeader)}\n      </ul>\n      {horizontalOverflow && (\n        <span className={rightButtonClasses}>\n          <InternalButton\n            variant=\"icon\"\n            iconName=\"angle-right\"\n            __nativeAttributes={paginationButtonAttributes}\n            disabled={!rightOverflow}\n            onClick={() => onPaginationClick(headerBarRef, 1)}\n          />\n        </span>\n      )}\n    </div>\n  );\n\n  function renderTabHeader(tab: TabsProps.Tab) {\n    const enabledTabsWithCurrentTab = tabs.filter(tab => !tab.disabled || tab.id === activeTabId);\n\n    const highlightTab = function (enabledTabIndex: number) {\n      const tab = enabledTabsWithCurrentTab[enabledTabIndex];\n      if (tab.id === activeTabId) {\n        return;\n      }\n\n      onChange({ activeTabId: tab.id, activeTabHref: tab.href });\n    };\n\n    const handleKeyDown = function (\n      event: React.KeyboardEvent<HTMLAnchorElement> | React.KeyboardEvent<HTMLButtonElement>\n    ) {\n      const { keyCode } = event;\n      const specialKeys = [KeyCode.right, KeyCode.left, KeyCode.end, KeyCode.home, KeyCode.pageUp, KeyCode.pageDown];\n      if (specialKeys.indexOf(keyCode) === -1) {\n        return;\n      }\n      event.preventDefault();\n      const activeIndex = enabledTabsWithCurrentTab.indexOf(tab);\n      switch (keyCode) {\n        case KeyCode.right:\n          if (activeIndex + 1 === enabledTabsWithCurrentTab.length) {\n            highlightTab(0);\n          } else {\n            highlightTab(activeIndex + 1);\n          }\n          return;\n        case KeyCode.left:\n          if (activeIndex === 0) {\n            highlightTab(enabledTabsWithCurrentTab.length - 1);\n          } else {\n            highlightTab(activeIndex - 1);\n          }\n          return;\n        case KeyCode.end:\n          highlightTab(enabledTabsWithCurrentTab.length - 1);\n          return;\n        case KeyCode.home:\n          highlightTab(0);\n          return;\n        case KeyCode.pageDown:\n          if (rightOverflow) {\n            onPaginationClick(headerBarRef, 1);\n          }\n          return;\n        case KeyCode.pageUp:\n          if (leftOverflow) {\n            onPaginationClick(headerBarRef, -1);\n          }\n          return;\n      }\n    };\n\n    const clickTab = (event: React.MouseEvent) => {\n      if (tab.disabled) {\n        event.preventDefault();\n        return;\n      }\n\n      // if the primary mouse button is clicked with a modifier key, the browser will handle opening a new tab\n      const specialKey = !isPlainLeftClick(event);\n      if (specialKey && tab.href) {\n        return;\n      }\n\n      event.preventDefault();\n      // for browsers that do not focus buttons on button click\n      if (!tab.href) {\n        const clickedTabRef = tabRefs.current.get(tab.id);\n        if (clickedTabRef) {\n          const childElement = clickedTabRef.firstChild as HTMLButtonElement;\n          if (childElement && childElement !== document.activeElement) {\n            childElement.focus({ preventScroll: true });\n          }\n        }\n      }\n\n      if (tab.id === activeTabId) {\n        return;\n      }\n\n      onChange({ activeTabId: tab.id, activeTabHref: tab.href });\n    };\n\n    const classes = clsx({\n      [styles['tabs-tab-link']]: true,\n      [styles.refresh]: isVisualRefresh,\n      [styles['tabs-tab-active']]: activeTabId === tab.id && !tab.disabled,\n      [styles['tabs-tab-disabled']]: tab.disabled,\n    });\n\n    const commonProps: (JSX.IntrinsicElements['a'] | JSX.IntrinsicElements['button']) & { 'data-testid': string } = {\n      className: classes,\n      ...focusVisible,\n      role: 'tab',\n      'aria-selected': tab.id === activeTabId,\n      'aria-controls': `${idNamespace}-${tab.id}-panel`,\n      'data-testid': tab.id,\n      children: <span className={styles['tabs-tab-label']}>{tab.label}</span>,\n    };\n\n    if (tab.disabled) {\n      commonProps['aria-disabled'] = 'true';\n    } else {\n      commonProps.onClick = clickTab;\n    }\n\n    if (tab.id === activeTabId) {\n      commonProps.ref = activeTabHeaderRef;\n      commonProps.tabIndex = 0;\n      commonProps.onKeyDown = (\n        event: React.KeyboardEvent<HTMLAnchorElement> | React.KeyboardEvent<HTMLButtonElement>\n      ) => handleKeyDown(event);\n    } else {\n      commonProps.tabIndex = -1;\n    }\n\n    let trigger = null;\n    if (tab.href) {\n      const anchorProps = commonProps as JSX.IntrinsicElements['a'];\n      anchorProps.href = tab.href;\n      trigger = <a {...anchorProps} />;\n    } else {\n      const buttonProps = commonProps as JSX.IntrinsicElements['button'];\n      buttonProps.type = 'button';\n      if (tab.disabled) {\n        buttonProps.disabled = true;\n      }\n      trigger = <button {...buttonProps} />;\n    }\n\n    return (\n      <li\n        ref={element => tabRefs.current.set(tab.id, element as HTMLElement)}\n        className={styles['tabs-tab']}\n        role=\"presentation\"\n        key={tab.id}\n      >\n        {trigger}\n      </li>\n    );\n  }\n}\n"]}
+{"version":3,"file":"tab-header-bar.js","sourceRoot":"","sources":["../../../src/tabs/tab-header-bar.tsx"],"names":[],"mappings":";AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,EAAE,EAAE,MAAM,EAAE,QAAQ,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAE3D,OAAO,IAAI,MAAM,MAAM,CAAC;AACxB,OAAO,MAAM,MAAM,iBAAiB,CAAC;AACrC,OAAO,EAAE,cAAc,EAAE,MAAM,oBAAoB,CAAC;AACpD,OAAO,eAAe,MAAM,iCAAiC,CAAC;AAC9D,OAAO,EAAE,iBAAiB,EAAE,MAAM,qCAAqC,CAAC;AACxE,OAAO,EAAE,OAAO,EAAE,MAAM,qBAAqB,CAAC;AAC9C,OAAO,EACL,iBAAiB,EACjB,qBAAqB,EACrB,eAAe,EACf,gBAAgB,EAChB,cAAc,GACf,MAAM,gBAAgB,CAAC;AACxB,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AACtD,OAAO,EAAE,gBAAgB,EAAE,MAAM,mCAAmC,CAAC;AAYrE,MAAM,UAAU,YAAY,CAAC,EAQT;;QAPlB,QAAQ,cAAA,EACR,WAAW,iBAAA,EACX,IAAI,UAAA,EACJ,OAAO,aAAA,EACP,WAAW,iBAAA,EACX,SAAS,eAAA,EACT,cAAc,oBAAA;IAEd,IAAM,YAAY,GAAG,eAAe,EAAE,CAAC;IAEvC,IAAM,YAAY,GAAG,MAAM,CAAmB,IAAI,CAAC,CAAC;IACpD,IAAM,kBAAkB,GAAG,MAAM,CAAoB,IAAI,CAAC,CAAC;IAC3D,IAAM,kBAAkB,GAAG,MAAM,CAAc,IAAI,CAAC,CAAC;IAErD,IAAM,eAAe,GAAG,gBAAgB,EAAE,CAAC;IAErC,IAAA,KAA8B,iBAAiB,CAAS,UAAA,IAAI,IAAI,OAAA,IAAI,CAAC,KAAK,EAAV,CAAU,CAAC,EAA1E,WAAW,QAAA,EAAE,YAAY,QAAiD,CAAC;IAClF,IAAM,OAAO,GAAG,MAAM,CAA2B,IAAI,GAAG,EAAE,CAAC,CAAC;IACtD,IAAA,KAA8C,QAAQ,CAAC,KAAK,CAAC,EAA5D,kBAAkB,QAAA,EAAE,qBAAqB,QAAmB,CAAC;IAC9D,IAAA,KAAkC,QAAQ,CAAC,KAAK,CAAC,EAAhD,YAAY,QAAA,EAAE,eAAe,QAAmB,CAAC;IAClD,IAAA,KAAoC,QAAQ,CAAC,KAAK,CAAC,EAAlD,aAAa,QAAA,EAAE,gBAAgB,QAAmB,CAAC;IAE1D,SAAS,CAAC;QACR,IAAI,YAAY,CAAC,OAAO,EAAE;YACxB,qBAAqB,CAAC,qBAAqB,CAAC,YAAY,CAAC,OAAO,EAAE,kBAAkB,CAAC,CAAC,CAAC;YACvF,eAAe,CAAC,eAAe,CAAC,YAAY,CAAC,OAAO,CAAC,CAAC,CAAC;YACvD,gBAAgB,CAAC,gBAAgB,CAAC,YAAY,CAAC,OAAO,CAAC,CAAC,CAAC;SAC1D;IACH,CAAC,EAAE,CAAC,WAAW,EAAE,IAAI,CAAC,CAAC,CAAC;IAExB,IAAM,wBAAwB,GAAG,UAAC,MAAe;QAC/C,IAAI,CAAC,WAAW,EAAE;YAChB,OAAO;SACR;QACD,IAAM,YAAY,GAAG,OAAO,CAAC,OAAO,CAAC,GAAG,CAAC,WAAW,CAAC,CAAC;QACtD,IAAI,YAAY,IAAI,YAAY,CAAC,OAAO,EAAE;YACxC,cAAc,CAAC,YAAY,EAAE,YAAY,CAAC,OAAO,EAAE,MAAM,CAAC,CAAC;SAC5D;IACH,CAAC,CAAC;IAEF,SAAS,CAAC;QACR,uEAAuE;QACvE,yDAAyD;QACzD,gEAAgE;QAChE,qBAAqB,CAAC;YACpB,wBAAwB,CAAC,KAAK,CAAC,CAAC;QAClC,CAAC,CAAC,CAAC;QACH,iEAAiE;QACjE,uDAAuD;IACzD,CAAC,EAAE,CAAC,kBAAkB,EAAE,WAAW,EAAE,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC;IAEnD,SAAS,CAAC;QACR,wBAAwB,CAAC,IAAI,CAAC,CAAC;QAC/B,8DAA8D;QAC9D,uDAAuD;IACzD,CAAC,EAAE,CAAC,WAAW,CAAC,CAAC,CAAC;IAElB,SAAS,CAAC;;QACR;;;UAGE;QACF,IAAI,MAAA,YAAY,CAAC,OAAO,0CAAE,QAAQ,CAAC,QAAQ,CAAC,aAAa,CAAC,EAAE;YAC1D,IAAI,QAAQ,CAAC,aAAa,KAAK,kBAAkB,CAAC,OAAO,EAAE;gBACzD,MAAA,kBAAkB,CAAC,OAAO,0CAAE,KAAK,CAAC,EAAE,aAAa,EAAE,IAAI,EAAE,CAAC,CAAC;aAC5D;SACF;IACH,CAAC,EAAE,CAAC,WAAW,CAAC,CAAC,CAAC;IAElB,IAAM,QAAQ,GAAG;QACf,IAAI,YAAY,CAAC,OAAO,EAAE;YACxB,eAAe,CAAC,eAAe,CAAC,YAAY,CAAC,OAAO,CAAC,CAAC,CAAC;YACvD,gBAAgB,CAAC,gBAAgB,CAAC,YAAY,CAAC,OAAO,CAAC,CAAC,CAAC;SAC1D;IACH,CAAC,CAAC;IAEF,IAAM,OAAO,GAAG,IAAI;QAClB,GAAC,MAAM,CAAC,aAAa,CAAC,IAAG,IAAI;QAC7B,GAAC,MAAM,CAAC,0BAA0B,CAAC,IAAG,OAAO,KAAK,SAAS,IAAI,eAAe;YAC9E,CAAC;IAEH,IAAM,iBAAiB,GAAG,IAAI;QAC5B,GAAC,MAAM,CAAC,mBAAmB,CAAC,IAAG,IAAI;QACnC,GAAC,MAAM,CAAC,wBAAwB,CAAC,IAAG,IAAI;QACxC,GAAC,MAAM,CAAC,mCAAmC,CAAC,IAAG,YAAY;YAC3D,CAAC;IAEH,IAAM,kBAAkB,GAAG,IAAI;QAC7B,GAAC,MAAM,CAAC,mBAAmB,CAAC,IAAG,IAAI;QACnC,GAAC,MAAM,CAAC,yBAAyB,CAAC,IAAG,IAAI;QACzC,GAAC,MAAM,CAAC,oCAAoC,CAAC,IAAG,aAAa;YAC7D,CAAC;IAEH,IAAM,0BAA0B,GAAG;QACjC,aAAa,EAAE,IAAI;QACnB,QAAQ,EAAE,CAAC,CAAC;KACb,CAAC;IAEF,OAAO;IACL,iFAAiF;IACjF,6BAAK,SAAS,EAAE,OAAO,EAAE,GAAG,EAAE,YAAY;QACvC,kBAAkB,IAAI,CACrB,8BAAM,GAAG,EAAE,kBAAkB,EAAE,SAAS,EAAE,iBAAiB;YACzD,oBAAC,cAAc,IACb,UAAU,EAAC,MAAM,EACjB,OAAO,EAAC,MAAM,EACd,QAAQ,EAAC,YAAY,EACrB,kBAAkB,EAAE,0BAA0B,EAC9C,QAAQ,EAAE,CAAC,YAAY,EACvB,OAAO,EAAE,cAAM,OAAA,iBAAiB,CAAC,YAAY,EAAE,CAAC,CAAC,CAAC,EAAnC,CAAmC,GAClD,CACG,CACR;QACD,4BACE,IAAI,EAAC,SAAS,EACd,SAAS,EAAE,MAAM,CAAC,kBAAkB,CAAC,gBACzB,SAAS,qBACJ,cAAc,EAC/B,GAAG,EAAE,YAAY,EACjB,QAAQ,EAAE,QAAQ,IAEjB,IAAI,CAAC,GAAG,CAAC,eAAe,CAAC,CACvB;QACJ,kBAAkB,IAAI,CACrB,8BAAM,SAAS,EAAE,kBAAkB;YACjC,oBAAC,cAAc,IACb,UAAU,EAAC,MAAM,EACjB,OAAO,EAAC,MAAM,EACd,QAAQ,EAAC,aAAa,EACtB,kBAAkB,EAAE,0BAA0B,EAC9C,QAAQ,EAAE,CAAC,aAAa,EACxB,OAAO,EAAE,cAAM,OAAA,iBAAiB,CAAC,YAAY,EAAE,CAAC,CAAC,EAAlC,CAAkC,GACjD,CACG,CACR,CACG,CACP,CAAC;IAEF,SAAS,eAAe,CAAC,GAAkB;;QACzC,IAAM,yBAAyB,GAAG,IAAI,CAAC,MAAM,CAAC,UAAA,GAAG,IAAI,OAAA,CAAC,GAAG,CAAC,QAAQ,IAAI,GAAG,CAAC,EAAE,KAAK,WAAW,EAAvC,CAAuC,CAAC,CAAC;QAE9F,IAAM,YAAY,GAAG,UAAU,eAAuB;YACpD,IAAM,GAAG,GAAG,yBAAyB,CAAC,eAAe,CAAC,CAAC;YACvD,IAAI,GAAG,CAAC,EAAE,KAAK,WAAW,EAAE;gBAC1B,OAAO;aACR;YAED,QAAQ,CAAC,EAAE,WAAW,EAAE,GAAG,CAAC,EAAE,EAAE,aAAa,EAAE,GAAG,CAAC,IAAI,EAAE,CAAC,CAAC;QAC7D,CAAC,CAAC;QAEF,IAAM,aAAa,GAAG,UACpB,KAAsF;YAE9E,IAAA,OAAO,GAAK,KAAK,QAAV,CAAW;YAC1B,IAAM,WAAW,GAAG,CAAC,OAAO,CAAC,KAAK,EAAE,OAAO,CAAC,IAAI,EAAE,OAAO,CAAC,GAAG,EAAE,OAAO,CAAC,IAAI,EAAE,OAAO,CAAC,MAAM,EAAE,OAAO,CAAC,QAAQ,CAAC,CAAC;YAC/G,IAAI,WAAW,CAAC,OAAO,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC,EAAE;gBACvC,OAAO;aACR;YACD,KAAK,CAAC,cAAc,EAAE,CAAC;YACvB,IAAM,WAAW,GAAG,yBAAyB,CAAC,OAAO,CAAC,GAAG,CAAC,CAAC;YAC3D,QAAQ,OAAO,EAAE;gBACf,KAAK,OAAO,CAAC,KAAK;oBAChB,IAAI,WAAW,GAAG,CAAC,KAAK,yBAAyB,CAAC,MAAM,EAAE;wBACxD,YAAY,CAAC,CAAC,CAAC,CAAC;qBACjB;yBAAM;wBACL,YAAY,CAAC,WAAW,GAAG,CAAC,CAAC,CAAC;qBAC/B;oBACD,OAAO;gBACT,KAAK,OAAO,CAAC,IAAI;oBACf,IAAI,WAAW,KAAK,CAAC,EAAE;wBACrB,YAAY,CAAC,yBAAyB,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC;qBACpD;yBAAM;wBACL,YAAY,CAAC,WAAW,GAAG,CAAC,CAAC,CAAC;qBAC/B;oBACD,OAAO;gBACT,KAAK,OAAO,CAAC,GAAG;oBACd,YAAY,CAAC,yBAAyB,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC;oBACnD,OAAO;gBACT,KAAK,OAAO,CAAC,IAAI;oBACf,YAAY,CAAC,CAAC,CAAC,CAAC;oBAChB,OAAO;gBACT,KAAK,OAAO,CAAC,QAAQ;oBACnB,IAAI,aAAa,EAAE;wBACjB,iBAAiB,CAAC,YAAY,EAAE,CAAC,CAAC,CAAC;qBACpC;oBACD,OAAO;gBACT,KAAK,OAAO,CAAC,MAAM;oBACjB,IAAI,YAAY,EAAE;wBAChB,iBAAiB,CAAC,YAAY,EAAE,CAAC,CAAC,CAAC,CAAC;qBACrC;oBACD,OAAO;aACV;QACH,CAAC,CAAC;QAEF,IAAM,QAAQ,GAAG,UAAC,KAAuB;YACvC,IAAI,GAAG,CAAC,QAAQ,EAAE;gBAChB,KAAK,CAAC,cAAc,EAAE,CAAC;gBACvB,OAAO;aACR;YAED,wGAAwG;YACxG,IAAM,UAAU,GAAG,CAAC,gBAAgB,CAAC,KAAK,CAAC,CAAC;YAC5C,IAAI,UAAU,IAAI,GAAG,CAAC,IAAI,EAAE;gBAC1B,OAAO;aACR;YAED,KAAK,CAAC,cAAc,EAAE,CAAC;YACvB,yDAAyD;YACzD,IAAI,CAAC,GAAG,CAAC,IAAI,EAAE;gBACb,IAAM,aAAa,GAAG,OAAO,CAAC,OAAO,CAAC,GAAG,CAAC,GAAG,CAAC,EAAE,CAAC,CAAC;gBAClD,IAAI,aAAa,EAAE;oBACjB,IAAM,YAAY,GAAG,aAAa,CAAC,UAA+B,CAAC;oBACnE,IAAI,YAAY,IAAI,YAAY,KAAK,QAAQ,CAAC,aAAa,EAAE;wBAC3D,YAAY,CAAC,KAAK,CAAC,EAAE,aAAa,EAAE,IAAI,EAAE,CAAC,CAAC;qBAC7C;iBACF;aACF;YAED,IAAI,GAAG,CAAC,EAAE,KAAK,WAAW,EAAE;gBAC1B,OAAO;aACR;YAED,QAAQ,CAAC,EAAE,WAAW,EAAE,GAAG,CAAC,EAAE,EAAE,aAAa,EAAE,GAAG,CAAC,IAAI,EAAE,CAAC,CAAC;QAC7D,CAAC,CAAC;QAEF,IAAM,OAAO,GAAG,IAAI;YAClB,GAAC,MAAM,CAAC,eAAe,CAAC,IAAG,IAAI;YAC/B,GAAC,MAAM,CAAC,OAAO,IAAG,eAAe;YACjC,GAAC,MAAM,CAAC,iBAAiB,CAAC,IAAG,WAAW,KAAK,GAAG,CAAC,EAAE,IAAI,CAAC,GAAG,CAAC,QAAQ;YACpE,GAAC,MAAM,CAAC,mBAAmB,CAAC,IAAG,GAAG,CAAC,QAAQ;gBAC3C,CAAC;QAEH,IAAM,WAAW,uBACf,SAAS,EAAE,OAAO,IACf,YAAY,KACf,IAAI,EAAE,KAAK,EACX,eAAe,EAAE,GAAG,CAAC,EAAE,KAAK,WAAW,EACvC,eAAe,EAAE,UAAG,WAAW,cAAI,GAAG,CAAC,EAAE,WAAQ,EACjD,aAAa,EAAE,GAAG,CAAC,EAAE,EACrB,QAAQ,EAAE,8BAAM,SAAS,EAAE,MAAM,CAAC,gBAAgB,CAAC,IAAG,GAAG,CAAC,KAAK,CAAQ,GACxE,CAAC;QAEF,IAAI,GAAG,CAAC,QAAQ,EAAE;YAChB,WAAW,CAAC,eAAe,CAAC,GAAG,MAAM,CAAC;SACvC;aAAM;YACL,WAAW,CAAC,OAAO,GAAG,QAAQ,CAAC;SAChC;QAED,IAAI,GAAG,CAAC,EAAE,KAAK,WAAW,EAAE;YAC1B,WAAW,CAAC,GAAG,GAAG,kBAAkB,CAAC;YACrC,WAAW,CAAC,QAAQ,GAAG,CAAC,CAAC;YACzB,WAAW,CAAC,SAAS,GAAG,UACtB,KAAsF,IACnF,OAAA,aAAa,CAAC,KAAK,CAAC,EAApB,CAAoB,CAAC;SAC3B;aAAM;YACL,WAAW,CAAC,QAAQ,GAAG,CAAC,CAAC,CAAC;SAC3B;QAED,IAAI,OAAO,GAAG,IAAI,CAAC;QACnB,IAAI,GAAG,CAAC,IAAI,EAAE;YACZ,IAAM,WAAW,GAAG,WAAyC,CAAC;YAC9D,WAAW,CAAC,IAAI,GAAG,GAAG,CAAC,IAAI,CAAC;YAC5B,OAAO,GAAG,sCAAO,WAAW,EAAI,CAAC;SAClC;aAAM;YACL,IAAM,WAAW,GAAG,WAA8C,CAAC;YACnE,WAAW,CAAC,IAAI,GAAG,QAAQ,CAAC;YAC5B,IAAI,GAAG,CAAC,QAAQ,EAAE;gBAChB,WAAW,CAAC,QAAQ,GAAG,IAAI,CAAC;aAC7B;YACD,OAAO,GAAG,2CAAY,WAAW,EAAI,CAAC;SACvC;QAED,OAAO,CACL,4BACE,GAAG,EAAE,UAAA,OAAO,IAAI,OAAA,OAAO,CAAC,OAAO,CAAC,GAAG,CAAC,GAAG,CAAC,EAAE,EAAE,OAAsB,CAAC,EAAnD,CAAmD,EACnE,SAAS,EAAE,MAAM,CAAC,UAAU,CAAC,EAC7B,IAAI,EAAC,cAAc,EACnB,GAAG,EAAE,GAAG,CAAC,EAAE,IAEV,OAAO,CACL,CACN,CAAC;IACJ,CAAC;AACH,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React, { useRef, useState, useEffect } from 'react';\nimport { TabsProps } from './interfaces';\nimport clsx from 'clsx';\nimport styles from './styles.css.js';\nimport { InternalButton } from '../button/internal';\nimport useFocusVisible from '../internal/hooks/focus-visible';\nimport { useContainerQuery } from '../internal/hooks/container-queries';\nimport { KeyCode } from '../internal/keycode';\nimport {\n  onPaginationClick,\n  hasHorizontalOverflow,\n  hasLeftOverflow,\n  hasRightOverflow,\n  scrollIntoView,\n} from './scroll-utils';\nimport { isPlainLeftClick } from '../internal/events';\nimport { useVisualRefresh } from '../internal/hooks/use-visual-mode';\n\nexport interface TabHeaderBarProps {\n  onChange: (changeDetail: TabsProps.ChangeDetail) => void;\n  activeTabId: TabsProps['activeTabId'];\n  tabs: TabsProps['tabs'];\n  variant: TabsProps['variant'];\n  idNamespace: string;\n  ariaLabel?: string;\n  ariaLabelledby?: string;\n}\n\nexport function TabHeaderBar({\n  onChange,\n  activeTabId,\n  tabs,\n  variant,\n  idNamespace,\n  ariaLabel,\n  ariaLabelledby,\n}: TabHeaderBarProps) {\n  const focusVisible = useFocusVisible();\n\n  const headerBarRef = useRef<HTMLUListElement>(null);\n  const activeTabHeaderRef = useRef<HTMLAnchorElement>(null);\n  const leftOverflowButton = useRef<HTMLElement>(null);\n\n  const isVisualRefresh = useVisualRefresh();\n\n  const [widthChange, containerRef] = useContainerQuery<number>(rect => rect.width);\n  const tabRefs = useRef<Map<string, HTMLElement>>(new Map());\n  const [horizontalOverflow, setHorizontalOverflow] = useState(false);\n  const [leftOverflow, setLeftOverflow] = useState(false);\n  const [rightOverflow, setRightOverflow] = useState(false);\n\n  useEffect(() => {\n    if (headerBarRef.current) {\n      setHorizontalOverflow(hasHorizontalOverflow(headerBarRef.current, leftOverflowButton));\n      setLeftOverflow(hasLeftOverflow(headerBarRef.current));\n      setRightOverflow(hasRightOverflow(headerBarRef.current));\n    }\n  }, [widthChange, tabs]);\n\n  const scrollIntoViewIfPossible = (smooth: boolean) => {\n    if (!activeTabId) {\n      return;\n    }\n    const activeTabRef = tabRefs.current.get(activeTabId);\n    if (activeTabRef && headerBarRef.current) {\n      scrollIntoView(activeTabRef, headerBarRef.current, smooth);\n    }\n  };\n\n  useEffect(() => {\n    // Delay scrollIntoView as the position is depending on parent elements\n    // (effects are called inside-out in the component tree).\n    // Wait one frame to allow parents to complete it's calculation.\n    requestAnimationFrame(() => {\n      scrollIntoViewIfPossible(false);\n    });\n    // Non-smooth scrolling should not be called upon activeId change\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [horizontalOverflow, widthChange, tabs.length]);\n\n  useEffect(() => {\n    scrollIntoViewIfPossible(true);\n    // Smooth scrolling should only be called upon activeId change\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [activeTabId]);\n\n  useEffect(() => {\n    /*\n     When the selected tab changes and we are currently already focused on a tab,\n     move the focus to the newly selected tab.\n    */\n    if (headerBarRef.current?.contains(document.activeElement)) {\n      if (document.activeElement !== activeTabHeaderRef.current) {\n        activeTabHeaderRef.current?.focus({ preventScroll: true });\n      }\n    }\n  }, [activeTabId]);\n\n  const onScroll = () => {\n    if (headerBarRef.current) {\n      setLeftOverflow(hasLeftOverflow(headerBarRef.current));\n      setRightOverflow(hasRightOverflow(headerBarRef.current));\n    }\n  };\n\n  const classes = clsx({\n    [styles['tabs-header']]: true,\n    [styles['tabs-header-with-divider']]: variant === 'default' || isVisualRefresh,\n  });\n\n  const leftButtonClasses = clsx({\n    [styles['pagination-button']]: true,\n    [styles['pagination-button-left']]: true,\n    [styles['pagination-button-left-scrollable']]: leftOverflow,\n  });\n\n  const rightButtonClasses = clsx({\n    [styles['pagination-button']]: true,\n    [styles['pagination-button-right']]: true,\n    [styles['pagination-button-right-scrollable']]: rightOverflow,\n  });\n\n  const paginationButtonAttributes = {\n    'aria-hidden': true,\n    tabIndex: -1,\n  };\n\n  return (\n    //converted span to div as list should not be a child of span for HTML validation\n    <div className={classes} ref={containerRef}>\n      {horizontalOverflow && (\n        <span ref={leftOverflowButton} className={leftButtonClasses}>\n          <InternalButton\n            formAction=\"none\"\n            variant=\"icon\"\n            iconName=\"angle-left\"\n            __nativeAttributes={paginationButtonAttributes}\n            disabled={!leftOverflow}\n            onClick={() => onPaginationClick(headerBarRef, -1)}\n          />\n        </span>\n      )}\n      <ul\n        role=\"tablist\"\n        className={styles['tabs-header-list']}\n        aria-label={ariaLabel}\n        aria-labelledby={ariaLabelledby}\n        ref={headerBarRef}\n        onScroll={onScroll}\n      >\n        {tabs.map(renderTabHeader)}\n      </ul>\n      {horizontalOverflow && (\n        <span className={rightButtonClasses}>\n          <InternalButton\n            formAction=\"none\"\n            variant=\"icon\"\n            iconName=\"angle-right\"\n            __nativeAttributes={paginationButtonAttributes}\n            disabled={!rightOverflow}\n            onClick={() => onPaginationClick(headerBarRef, 1)}\n          />\n        </span>\n      )}\n    </div>\n  );\n\n  function renderTabHeader(tab: TabsProps.Tab) {\n    const enabledTabsWithCurrentTab = tabs.filter(tab => !tab.disabled || tab.id === activeTabId);\n\n    const highlightTab = function (enabledTabIndex: number) {\n      const tab = enabledTabsWithCurrentTab[enabledTabIndex];\n      if (tab.id === activeTabId) {\n        return;\n      }\n\n      onChange({ activeTabId: tab.id, activeTabHref: tab.href });\n    };\n\n    const handleKeyDown = function (\n      event: React.KeyboardEvent<HTMLAnchorElement> | React.KeyboardEvent<HTMLButtonElement>\n    ) {\n      const { keyCode } = event;\n      const specialKeys = [KeyCode.right, KeyCode.left, KeyCode.end, KeyCode.home, KeyCode.pageUp, KeyCode.pageDown];\n      if (specialKeys.indexOf(keyCode) === -1) {\n        return;\n      }\n      event.preventDefault();\n      const activeIndex = enabledTabsWithCurrentTab.indexOf(tab);\n      switch (keyCode) {\n        case KeyCode.right:\n          if (activeIndex + 1 === enabledTabsWithCurrentTab.length) {\n            highlightTab(0);\n          } else {\n            highlightTab(activeIndex + 1);\n          }\n          return;\n        case KeyCode.left:\n          if (activeIndex === 0) {\n            highlightTab(enabledTabsWithCurrentTab.length - 1);\n          } else {\n            highlightTab(activeIndex - 1);\n          }\n          return;\n        case KeyCode.end:\n          highlightTab(enabledTabsWithCurrentTab.length - 1);\n          return;\n        case KeyCode.home:\n          highlightTab(0);\n          return;\n        case KeyCode.pageDown:\n          if (rightOverflow) {\n            onPaginationClick(headerBarRef, 1);\n          }\n          return;\n        case KeyCode.pageUp:\n          if (leftOverflow) {\n            onPaginationClick(headerBarRef, -1);\n          }\n          return;\n      }\n    };\n\n    const clickTab = (event: React.MouseEvent) => {\n      if (tab.disabled) {\n        event.preventDefault();\n        return;\n      }\n\n      // if the primary mouse button is clicked with a modifier key, the browser will handle opening a new tab\n      const specialKey = !isPlainLeftClick(event);\n      if (specialKey && tab.href) {\n        return;\n      }\n\n      event.preventDefault();\n      // for browsers that do not focus buttons on button click\n      if (!tab.href) {\n        const clickedTabRef = tabRefs.current.get(tab.id);\n        if (clickedTabRef) {\n          const childElement = clickedTabRef.firstChild as HTMLButtonElement;\n          if (childElement && childElement !== document.activeElement) {\n            childElement.focus({ preventScroll: true });\n          }\n        }\n      }\n\n      if (tab.id === activeTabId) {\n        return;\n      }\n\n      onChange({ activeTabId: tab.id, activeTabHref: tab.href });\n    };\n\n    const classes = clsx({\n      [styles['tabs-tab-link']]: true,\n      [styles.refresh]: isVisualRefresh,\n      [styles['tabs-tab-active']]: activeTabId === tab.id && !tab.disabled,\n      [styles['tabs-tab-disabled']]: tab.disabled,\n    });\n\n    const commonProps: (JSX.IntrinsicElements['a'] | JSX.IntrinsicElements['button']) & { 'data-testid': string } = {\n      className: classes,\n      ...focusVisible,\n      role: 'tab',\n      'aria-selected': tab.id === activeTabId,\n      'aria-controls': `${idNamespace}-${tab.id}-panel`,\n      'data-testid': tab.id,\n      children: <span className={styles['tabs-tab-label']}>{tab.label}</span>,\n    };\n\n    if (tab.disabled) {\n      commonProps['aria-disabled'] = 'true';\n    } else {\n      commonProps.onClick = clickTab;\n    }\n\n    if (tab.id === activeTabId) {\n      commonProps.ref = activeTabHeaderRef;\n      commonProps.tabIndex = 0;\n      commonProps.onKeyDown = (\n        event: React.KeyboardEvent<HTMLAnchorElement> | React.KeyboardEvent<HTMLButtonElement>\n      ) => handleKeyDown(event);\n    } else {\n      commonProps.tabIndex = -1;\n    }\n\n    let trigger = null;\n    if (tab.href) {\n      const anchorProps = commonProps as JSX.IntrinsicElements['a'];\n      anchorProps.href = tab.href;\n      trigger = <a {...anchorProps} />;\n    } else {\n      const buttonProps = commonProps as JSX.IntrinsicElements['button'];\n      buttonProps.type = 'button';\n      if (tab.disabled) {\n        buttonProps.disabled = true;\n      }\n      trigger = <button {...buttonProps} />;\n    }\n\n    return (\n      <li\n        ref={element => tabRefs.current.set(tab.id, element as HTMLElement)}\n        className={styles['tabs-tab']}\n        role=\"presentation\"\n        key={tab.id}\n      >\n        {trigger}\n      </li>\n    );\n  }\n}\n"]}