@cloudscape-design/components 3.0.693 → 3.0.695

package/popover/styles.selectors.js

@@ -2,55 +2,57 @@
     // es-module interop with Babel and Typescript
     Object.defineProperty(exports, "__esModule", { value: true });
     module.exports.default = {
-  "arrow": "awsui_arrow_xjuzf_dzn3k_193",
-  "arrow-outer": "awsui_arrow-outer_xjuzf_dzn3k_197",
-  "arrow-inner": "awsui_arrow-inner_xjuzf_dzn3k_197",
-  "refresh": "awsui_refresh_xjuzf_dzn3k_232",
-  "arrow-position-right-top": "awsui_arrow-position-right-top_xjuzf_dzn3k_242",
-  "arrow-position-right-bottom": "awsui_arrow-position-right-bottom_xjuzf_dzn3k_242",
-  "arrow-position-left-top": "awsui_arrow-position-left-top_xjuzf_dzn3k_245",
-  "arrow-position-left-bottom": "awsui_arrow-position-left-bottom_xjuzf_dzn3k_245",
-  "arrow-position-top-center": "awsui_arrow-position-top-center_xjuzf_dzn3k_248",
-  "arrow-position-top-right": "awsui_arrow-position-top-right_xjuzf_dzn3k_248",
-  "arrow-position-top-left": "awsui_arrow-position-top-left_xjuzf_dzn3k_248",
-  "arrow-position-top-responsive": "awsui_arrow-position-top-responsive_xjuzf_dzn3k_248",
-  "arrow-position-bottom-center": "awsui_arrow-position-bottom-center_xjuzf_dzn3k_251",
-  "arrow-position-bottom-right": "awsui_arrow-position-bottom-right_xjuzf_dzn3k_251",
-  "arrow-position-bottom-left": "awsui_arrow-position-bottom-left_xjuzf_dzn3k_251",
-  "arrow-position-bottom-responsive": "awsui_arrow-position-bottom-responsive_xjuzf_dzn3k_251",
-  "body": "awsui_body_xjuzf_dzn3k_351",
-  "body-overflow-visible": "awsui_body-overflow-visible_xjuzf_dzn3k_390",
-  "has-dismiss": "awsui_has-dismiss_xjuzf_dzn3k_394",
-  "dismiss": "awsui_dismiss_xjuzf_dzn3k_399",
-  "dismiss-control": "awsui_dismiss-control_xjuzf_dzn3k_407",
-  "header-row": "awsui_header-row_xjuzf_dzn3k_411",
-  "header": "awsui_header_xjuzf_dzn3k_411",
-  "content": "awsui_content_xjuzf_dzn3k_436",
-  "content-overflow-visible": "awsui_content-overflow-visible_xjuzf_dzn3k_444",
-  "container": "awsui_container_xjuzf_dzn3k_544",
-  "container-body": "awsui_container-body_xjuzf_dzn3k_552",
-  "container-body-variant-annotation": "awsui_container-body-variant-annotation_xjuzf_dzn3k_595",
-  "container-body-size-small": "awsui_container-body-size-small_xjuzf_dzn3k_600",
-  "fixed-width": "awsui_fixed-width_xjuzf_dzn3k_603",
-  "container-body-size-medium": "awsui_container-body-size-medium_xjuzf_dzn3k_607",
-  "container-body-size-large": "awsui_container-body-size-large_xjuzf_dzn3k_614",
-  "container-arrow": "awsui_container-arrow_xjuzf_dzn3k_626",
-  "container-arrow-position-right-top": "awsui_container-arrow-position-right-top_xjuzf_dzn3k_630",
-  "container-arrow-position-right-bottom": "awsui_container-arrow-position-right-bottom_xjuzf_dzn3k_630",
-  "container-arrow-position-left-top": "awsui_container-arrow-position-left-top_xjuzf_dzn3k_647",
-  "container-arrow-position-left-bottom": "awsui_container-arrow-position-left-bottom_xjuzf_dzn3k_647",
-  "container-arrow-position-top-center": "awsui_container-arrow-position-top-center_xjuzf_dzn3k_664",
-  "container-arrow-position-top-right": "awsui_container-arrow-position-top-right_xjuzf_dzn3k_664",
-  "container-arrow-position-top-left": "awsui_container-arrow-position-top-left_xjuzf_dzn3k_664",
-  "container-arrow-position-top-responsive": "awsui_container-arrow-position-top-responsive_xjuzf_dzn3k_664",
-  "container-arrow-position-bottom-center": "awsui_container-arrow-position-bottom-center_xjuzf_dzn3k_680",
-  "container-arrow-position-bottom-right": "awsui_container-arrow-position-bottom-right_xjuzf_dzn3k_684",
-  "container-arrow-position-bottom-left": "awsui_container-arrow-position-bottom-left_xjuzf_dzn3k_688",
-  "awsui-motion-fade-in": "awsui_awsui-motion-fade-in_xjuzf_dzn3k_1",
-  "root": "awsui_root_xjuzf_dzn3k_832",
-  "trigger": "awsui_trigger_xjuzf_dzn3k_868",
-  "overflow-ellipsis": "awsui_overflow-ellipsis_xjuzf_dzn3k_875",
-  "trigger-type-text": "awsui_trigger-type-text_xjuzf_dzn3k_883",
-  "popover-inline-content": "awsui_popover-inline-content_xjuzf_dzn3k_919"
+  "arrow": "awsui_arrow_xjuzf_1pat3_193",
+  "arrow-outer": "awsui_arrow-outer_xjuzf_1pat3_197",
+  "arrow-inner": "awsui_arrow-inner_xjuzf_1pat3_197",
+  "refresh": "awsui_refresh_xjuzf_1pat3_232",
+  "arrow-position-right-top": "awsui_arrow-position-right-top_xjuzf_1pat3_242",
+  "arrow-position-right-bottom": "awsui_arrow-position-right-bottom_xjuzf_1pat3_242",
+  "arrow-position-left-top": "awsui_arrow-position-left-top_xjuzf_1pat3_245",
+  "arrow-position-left-bottom": "awsui_arrow-position-left-bottom_xjuzf_1pat3_245",
+  "arrow-position-top-center": "awsui_arrow-position-top-center_xjuzf_1pat3_248",
+  "arrow-position-top-right": "awsui_arrow-position-top-right_xjuzf_1pat3_248",
+  "arrow-position-top-left": "awsui_arrow-position-top-left_xjuzf_1pat3_248",
+  "arrow-position-top-responsive": "awsui_arrow-position-top-responsive_xjuzf_1pat3_248",
+  "arrow-position-bottom-center": "awsui_arrow-position-bottom-center_xjuzf_1pat3_251",
+  "arrow-position-bottom-right": "awsui_arrow-position-bottom-right_xjuzf_1pat3_251",
+  "arrow-position-bottom-left": "awsui_arrow-position-bottom-left_xjuzf_1pat3_251",
+  "arrow-position-bottom-responsive": "awsui_arrow-position-bottom-responsive_xjuzf_1pat3_251",
+  "body": "awsui_body_xjuzf_1pat3_351",
+  "body-overflow-visible": "awsui_body-overflow-visible_xjuzf_1pat3_390",
+  "has-dismiss": "awsui_has-dismiss_xjuzf_1pat3_394",
+  "dismiss": "awsui_dismiss_xjuzf_1pat3_399",
+  "dismiss-control": "awsui_dismiss-control_xjuzf_1pat3_407",
+  "header-row": "awsui_header-row_xjuzf_1pat3_411",
+  "header": "awsui_header_xjuzf_1pat3_411",
+  "content": "awsui_content_xjuzf_1pat3_436",
+  "content-overflow-visible": "awsui_content-overflow-visible_xjuzf_1pat3_444",
+  "container": "awsui_container_xjuzf_1pat3_544",
+  "container-body": "awsui_container-body_xjuzf_1pat3_552",
+  "container-body-variant-annotation": "awsui_container-body-variant-annotation_xjuzf_1pat3_595",
+  "container-body-size-small": "awsui_container-body-size-small_xjuzf_1pat3_600",
+  "fixed-width": "awsui_fixed-width_xjuzf_1pat3_603",
+  "container-body-size-medium": "awsui_container-body-size-medium_xjuzf_1pat3_607",
+  "container-body-size-large": "awsui_container-body-size-large_xjuzf_1pat3_614",
+  "container-arrow": "awsui_container-arrow_xjuzf_1pat3_626",
+  "container-arrow-position-right-top": "awsui_container-arrow-position-right-top_xjuzf_1pat3_630",
+  "container-arrow-position-right-bottom": "awsui_container-arrow-position-right-bottom_xjuzf_1pat3_630",
+  "container-arrow-position-left-top": "awsui_container-arrow-position-left-top_xjuzf_1pat3_647",
+  "container-arrow-position-left-bottom": "awsui_container-arrow-position-left-bottom_xjuzf_1pat3_647",
+  "container-arrow-position-top-center": "awsui_container-arrow-position-top-center_xjuzf_1pat3_664",
+  "container-arrow-position-top-right": "awsui_container-arrow-position-top-right_xjuzf_1pat3_664",
+  "container-arrow-position-top-left": "awsui_container-arrow-position-top-left_xjuzf_1pat3_664",
+  "container-arrow-position-top-responsive": "awsui_container-arrow-position-top-responsive_xjuzf_1pat3_664",
+  "container-arrow-position-bottom-center": "awsui_container-arrow-position-bottom-center_xjuzf_1pat3_680",
+  "container-arrow-position-bottom-right": "awsui_container-arrow-position-bottom-right_xjuzf_1pat3_684",
+  "container-arrow-position-bottom-left": "awsui_container-arrow-position-bottom-left_xjuzf_1pat3_688",
+  "awsui-motion-fade-in": "awsui_awsui-motion-fade-in_xjuzf_1pat3_1",
+  "root": "awsui_root_xjuzf_1pat3_832",
+  "root-filtering-token": "awsui_root-filtering-token_xjuzf_1pat3_868",
+  "trigger": "awsui_trigger_xjuzf_1pat3_872",
+  "overflow-ellipsis": "awsui_overflow-ellipsis_xjuzf_1pat3_879",
+  "trigger-type-text": "awsui_trigger-type-text_xjuzf_1pat3_887",
+  "trigger-type-filtering-token": "awsui_trigger-type-filtering-token_xjuzf_1pat3_923",
+  "popover-inline-content": "awsui_popover-inline-content_xjuzf_1pat3_927"
 };
   

package/property-filter/filtering-token/index.d.ts

@@ -3,17 +3,34 @@ export declare namespace FilteringTokenProps {
     type Operation = 'and' | 'or';
 }
 export interface FilteringTokenProps {
-    ariaLabel?: string;
-    showOperation: boolean;
+    tokens: TokenItem[];
     operation: FilteringTokenProps.Operation;
+    groupOperation: FilteringTokenProps.Operation;
+    showOperation: boolean;
     andText: string;
     orText: string;
-    dismissAriaLabel?: string;
-    operatorAriaLabel?: string;
+    groupAriaLabel: string;
+    operationAriaLabel: string;
+    groupEditAriaLabel: string;
     disabled?: boolean;
-    children: React.ReactNode;
-    onChange: (op: FilteringTokenProps.Operation) => void;
-    onDismiss: () => void;
+    onChangeOperation: (operation: FilteringTokenProps.Operation) => void;
+    onChangeGroupOperation: (operation: FilteringTokenProps.Operation) => void;
+    onDismissToken: (tokenIndex: number) => void;
+    editorContent: React.ReactNode;
+    editorHeader: string;
+    editorDismissAriaLabel: string;
+    editorExpandToViewport: boolean;
+    onEditorOpen?: () => void;
+    hasGroups: boolean;
+}
+export interface FilteringTokenRef {
+    closeEditor(): void;
+}
+interface TokenItem {
+    content: React.ReactNode;
+    ariaLabel: string;
+    dismissAriaLabel: string;
 }
-export default function FilteringToken({ ariaLabel, showOperation, operation, andText, orText, dismissAriaLabel, operatorAriaLabel, disabled, children, onChange, onDismiss, }: FilteringTokenProps): JSX.Element;
+declare const FilteringToken: React.ForwardRefExoticComponent<FilteringTokenProps & React.RefAttributes<FilteringTokenRef>>;
+export default FilteringToken;
 //# sourceMappingURL=index.d.ts.map

package/property-filter/filtering-token/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/property-filter/filtering-token/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAS1B,yBAAiB,mBAAmB,CAAC;IACnC,KAAY,SAAS,GAAG,KAAK,GAAG,IAAI,CAAC;CACtC;AAED,MAAM,WAAW,mBAAmB;IAClC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,aAAa,EAAE,OAAO,CAAC;IACvB,SAAS,EAAE,mBAAmB,CAAC,SAAS,CAAC;IACzC,OAAO,EAAE,MAAM,CAAC;IAChB,MAAM,EAAE,MAAM,CAAC;IACf,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAE1B,QAAQ,EAAE,CAAC,EAAE,EAAE,mBAAmB,CAAC,SAAS,KAAK,IAAI,CAAC;IACtD,SAAS,EAAE,MAAM,IAAI,CAAC;CACvB;AAED,MAAM,CAAC,OAAO,UAAU,cAAc,CAAC,EACrC,SAAS,EACT,aAAa,EACb,SAAS,EACT,OAAO,EACP,MAAM,EACN,gBAAgB,EAChB,iBAAiB,EACjB,QAAQ,EACR,QAAQ,EACR,QAAQ,EACR,SAAS,GACV,EAAE,mBAAmB,eAkCrB"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/property-filter/filtering-token/index.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAkD,MAAM,OAAO,CAAC;AAYvE,yBAAiB,mBAAmB,CAAC;IACnC,KAAY,SAAS,GAAG,KAAK,GAAG,IAAI,CAAC;CACtC;AAED,MAAM,WAAW,mBAAmB;IAClC,MAAM,EAAE,SAAS,EAAE,CAAC;IACpB,SAAS,EAAE,mBAAmB,CAAC,SAAS,CAAC;IACzC,cAAc,EAAE,mBAAmB,CAAC,SAAS,CAAC;IAC9C,aAAa,EAAE,OAAO,CAAC;IACvB,OAAO,EAAE,MAAM,CAAC;IAChB,MAAM,EAAE,MAAM,CAAC;IACf,cAAc,EAAE,MAAM,CAAC;IACvB,kBAAkB,EAAE,MAAM,CAAC;IAC3B,kBAAkB,EAAE,MAAM,CAAC;IAC3B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,iBAAiB,EAAE,CAAC,SAAS,EAAE,mBAAmB,CAAC,SAAS,KAAK,IAAI,CAAC;IACtE,sBAAsB,EAAE,CAAC,SAAS,EAAE,mBAAmB,CAAC,SAAS,KAAK,IAAI,CAAC;IAC3E,cAAc,EAAE,CAAC,UAAU,EAAE,MAAM,KAAK,IAAI,CAAC;IAC7C,aAAa,EAAE,KAAK,CAAC,SAAS,CAAC;IAC/B,YAAY,EAAE,MAAM,CAAC;IACrB,sBAAsB,EAAE,MAAM,CAAC;IAC/B,sBAAsB,EAAE,OAAO,CAAC;IAChC,YAAY,CAAC,EAAE,MAAM,IAAI,CAAC;IAC1B,SAAS,EAAE,OAAO,CAAC;CACpB;AAED,MAAM,WAAW,iBAAiB;IAChC,WAAW,IAAI,IAAI,CAAC;CACrB;AAED,UAAU,SAAS;IACjB,OAAO,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,SAAS,EAAE,MAAM,CAAC;IAClB,gBAAgB,EAAE,MAAM,CAAC;CAC1B;AAED,QAAA,MAAM,cAAc,+FAsHnB,CAAC;AAEF,eAAe,cAAc,CAAC"}

package/property-filter/filtering-token/index.js

@@ -1,20 +1,60 @@
 // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
 // SPDX-License-Identifier: Apache-2.0
-import React from 'react';
+import React, { forwardRef, useImperativeHandle, useRef } from 'react';
 import clsx from 'clsx';
+import { useDensityMode } from '@cloudscape-design/component-toolkit/internal';
 import InternalIcon from '../../icon/internal';
+import InternalPopover from '../../popover/internal';
 import InternalSelect from '../../select/internal';
 import testUtilStyles from '../test-classes/styles.css.js';
 import styles from './styles.css.js';
-export default function FilteringToken({ ariaLabel, showOperation, operation, andText, orText, dismissAriaLabel, operatorAriaLabel, disabled, children, onChange, onDismiss, }) {
-    return (React.createElement("div", { className: clsx(styles.root, testUtilStyles['filtering-token']), role: "group", "aria-label": ariaLabel },
-        showOperation && (React.createElement(InternalSelect, { __inFilteringToken: true, className: clsx(styles.select, testUtilStyles['filtering-token-select']), options: [
-                { value: 'and', label: andText },
-                { value: 'or', label: orText },
-            ], selectedOption: { value: operation, label: operation === 'and' ? andText : orText }, onChange: e => onChange(e.detail.selectedOption.value), disabled: disabled, ariaLabel: operatorAriaLabel })),
-        React.createElement("div", { className: clsx(styles.token, showOperation && styles['show-operation'], disabled && styles['token-disabled']), "aria-disabled": disabled },
-            React.createElement("div", { className: clsx(styles['token-content'], testUtilStyles['filtering-token-content']) }, children),
-            React.createElement("button", { type: "button", className: clsx(styles['dismiss-button'], testUtilStyles['filtering-token-dismiss-button']), "aria-label": dismissAriaLabel, onClick: onDismiss, disabled: disabled },
-                React.createElement(InternalIcon, { name: "close" })))));
+const FilteringToken = forwardRef(({ tokens, showOperation, operation, groupOperation, andText, orText, groupAriaLabel, operationAriaLabel, groupEditAriaLabel, disabled = false, onChangeOperation, onChangeGroupOperation, onDismissToken, editorContent, editorHeader, editorDismissAriaLabel, editorExpandToViewport, onEditorOpen, hasGroups, }, ref) => {
+    const popoverRef = useRef(null);
+    const popoverProps = {
+        content: editorContent,
+        triggerType: 'text',
+        header: editorHeader,
+        size: 'large',
+        position: 'right',
+        dismissAriaLabel: editorDismissAriaLabel,
+        renderWithPortal: editorExpandToViewport,
+        __onOpen: onEditorOpen,
+    };
+    useImperativeHandle(ref, () => ({ closeEditor: () => { var _a; return (_a = popoverRef.current) === null || _a === void 0 ? void 0 : _a.dismissPopover(); } }));
+    return (React.createElement(TokenGroup, { ariaLabel: tokens.length === 1 ? tokens[0].ariaLabel : groupAriaLabel, operation: showOperation && (React.createElement(OperationSelector, { operation: operation, onChange: onChangeOperation, ariaLabel: operationAriaLabel, andText: andText, orText: orText, parent: true, disabled: disabled })), tokenAction: tokens.length === 1 ? (React.createElement(TokenDismissButton, { ariaLabel: tokens[0].dismissAriaLabel, onClick: () => onDismissToken(0), parent: true, disabled: disabled })) : (React.createElement(InternalPopover, Object.assign({ ref: popoverRef }, popoverProps, { triggerType: "filtering-token" }),
+            React.createElement(TokenEditButton, { ariaLabel: groupEditAriaLabel, disabled: disabled }))), parent: true, grouped: tokens.length > 1, disabled: disabled, hasGroups: hasGroups }, tokens.length === 1 ? (React.createElement(InternalPopover, Object.assign({ ref: popoverRef }, popoverProps), tokens[0].content)) : (React.createElement("ul", { className: styles.list }, tokens.map((token, index) => (React.createElement("li", { key: index },
+        React.createElement(TokenGroup, { ariaLabel: token.ariaLabel, operation: index !== 0 && (React.createElement(OperationSelector, { operation: groupOperation, onChange: onChangeGroupOperation, ariaLabel: operationAriaLabel, andText: andText, orText: orText, parent: false, disabled: disabled })), tokenAction: React.createElement(TokenDismissButton, { ariaLabel: token.dismissAriaLabel, onClick: () => onDismissToken(index), parent: false, disabled: disabled }), parent: false, grouped: false, disabled: disabled, hasGroups: false }, token.content))))))));
+});
+export default FilteringToken;
+function TokenGroup({ ariaLabel, children, operation, tokenAction, parent, grouped, disabled, hasGroups, }) {
+    const groupRef = useRef(null);
+    const isCompactMode = useDensityMode(groupRef) === 'compact';
+    return (React.createElement("div", { ref: groupRef, className: clsx(parent
+            ? clsx(styles.root, testUtilStyles['filtering-token'])
+            : clsx(styles['inner-root'], testUtilStyles['filtering-token-inner']), hasGroups && styles['has-groups'], isCompactMode && styles['compact-mode']), role: "group", "aria-label": ariaLabel },
+        operation,
+        React.createElement("div", { className: clsx(styles.token, !!operation && styles['show-operation'], grouped && styles.grouped, disabled && styles['token-disabled']), "aria-disabled": disabled },
+            React.createElement("div", { className: clsx(parent
+                    ? clsx(styles['token-content'], testUtilStyles['filtering-token-content'])
+                    : clsx(styles['inner-token-content'], testUtilStyles['filtering-token-inner-content']), grouped && styles['token-content-grouped']) }, children),
+            tokenAction)));
+}
+function OperationSelector({ operation, onChange, ariaLabel, andText, orText, parent, disabled, }) {
+    return (React.createElement(InternalSelect, { __inFilteringToken: true, className: clsx(parent
+            ? clsx(styles.select, testUtilStyles['filtering-token-select'])
+            : clsx(styles['inner-select'], testUtilStyles['filtering-token-inner-select'])), options: [
+            { value: 'and', label: andText },
+            { value: 'or', label: orText },
+        ], selectedOption: { value: operation, label: operation === 'and' ? andText : orText }, onChange: e => onChange(e.detail.selectedOption.value), disabled: disabled, ariaLabel: ariaLabel }));
+}
+function TokenDismissButton({ ariaLabel, onClick, parent, disabled, }) {
+    return (React.createElement("button", { type: "button", className: clsx(parent
+            ? clsx(styles['dismiss-button'], testUtilStyles['filtering-token-dismiss-button'])
+            : clsx(styles['inner-dismiss-button'], testUtilStyles['filtering-token-inner-dismiss-button'])), "aria-label": ariaLabel, onClick: onClick, disabled: disabled },
+        React.createElement(InternalIcon, { name: "close" })));
+}
+function TokenEditButton({ ariaLabel, disabled }) {
+    return (React.createElement("button", { type: "button", className: clsx(styles['edit-button'], testUtilStyles['filtering-token-edit-button']), "aria-label": ariaLabel, disabled: disabled },
+        React.createElement(InternalIcon, { name: "edit" })));
 }
 //# sourceMappingURL=index.js.map

package/property-filter/filtering-token/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/property-filter/filtering-token/index.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,IAAI,MAAM,MAAM,CAAC;AAExB,OAAO,YAAY,MAAM,qBAAqB,CAAC;AAC/C,OAAO,cAAc,MAAM,uBAAuB,CAAC;AAEnD,OAAO,cAAc,MAAM,+BAA+B,CAAC;AAC3D,OAAO,MAAM,MAAM,iBAAiB,CAAC;AAsBrC,MAAM,CAAC,OAAO,UAAU,cAAc,CAAC,EACrC,SAAS,EACT,aAAa,EACb,SAAS,EACT,OAAO,EACP,MAAM,EACN,gBAAgB,EAChB,iBAAiB,EACjB,QAAQ,EACR,QAAQ,EACR,QAAQ,EACR,SAAS,GACW;IACpB,OAAO,CACL,6BAAK,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,IAAI,EAAE,cAAc,CAAC,iBAAiB,CAAC,CAAC,EAAE,IAAI,EAAC,OAAO,gBAAa,SAAS;QACrG,aAAa,IAAI,CAChB,oBAAC,cAAc,IACb,kBAAkB,EAAE,IAAI,EACxB,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,MAAM,EAAE,cAAc,CAAC,wBAAwB,CAAC,CAAC,EACxE,OAAO,EAAE;gBACP,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,OAAO,EAAE;gBAChC,EAAE,KAAK,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,EAAE;aAC/B,EACD,cAAc,EAAE,EAAE,KAAK,EAAE,SAAS,EAAE,KAAK,EAAE,SAAS,KAAK,KAAK,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM,EAAE,EACnF,QAAQ,EAAE,CAAC,CAAC,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,cAAc,CAAC,KAAsC,CAAC,EACvF,QAAQ,EAAE,QAAQ,EAClB,SAAS,EAAE,iBAAiB,GAC5B,CACH;QACD,6BACE,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,KAAK,EAAE,aAAa,IAAI,MAAM,CAAC,gBAAgB,CAAC,EAAE,QAAQ,IAAI,MAAM,CAAC,gBAAgB,CAAC,CAAC,mBAC/F,QAAQ;YAEvB,6BAAK,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,eAAe,CAAC,EAAE,cAAc,CAAC,yBAAyB,CAAC,CAAC,IAAG,QAAQ,CAAO;YAC1G,gCACE,IAAI,EAAC,QAAQ,EACb,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,gBAAgB,CAAC,EAAE,cAAc,CAAC,gCAAgC,CAAC,CAAC,gBAC/E,gBAAgB,EAC5B,OAAO,EAAE,SAAS,EAClB,QAAQ,EAAE,QAAQ;gBAElB,oBAAC,YAAY,IAAC,IAAI,EAAC,OAAO,GAAG,CACtB,CACL,CACF,CACP,CAAC;AACJ,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React from 'react';\nimport clsx from 'clsx';\n\nimport InternalIcon from '../../icon/internal';\nimport InternalSelect from '../../select/internal';\n\nimport testUtilStyles from '../test-classes/styles.css.js';\nimport styles from './styles.css.js';\n\nexport namespace FilteringTokenProps {\n  export type Operation = 'and' | 'or';\n}\n\nexport interface FilteringTokenProps {\n  ariaLabel?: string;\n  showOperation: boolean;\n  operation: FilteringTokenProps.Operation;\n  andText: string;\n  orText: string;\n  dismissAriaLabel?: string;\n  operatorAriaLabel?: string;\n  disabled?: boolean;\n\n  children: React.ReactNode;\n\n  onChange: (op: FilteringTokenProps.Operation) => void;\n  onDismiss: () => void;\n}\n\nexport default function FilteringToken({\n  ariaLabel,\n  showOperation,\n  operation,\n  andText,\n  orText,\n  dismissAriaLabel,\n  operatorAriaLabel,\n  disabled,\n  children,\n  onChange,\n  onDismiss,\n}: FilteringTokenProps) {\n  return (\n    <div className={clsx(styles.root, testUtilStyles['filtering-token'])} role=\"group\" aria-label={ariaLabel}>\n      {showOperation && (\n        <InternalSelect\n          __inFilteringToken={true}\n          className={clsx(styles.select, testUtilStyles['filtering-token-select'])}\n          options={[\n            { value: 'and', label: andText },\n            { value: 'or', label: orText },\n          ]}\n          selectedOption={{ value: operation, label: operation === 'and' ? andText : orText }}\n          onChange={e => onChange(e.detail.selectedOption.value as FilteringTokenProps.Operation)}\n          disabled={disabled}\n          ariaLabel={operatorAriaLabel}\n        />\n      )}\n      <div\n        className={clsx(styles.token, showOperation && styles['show-operation'], disabled && styles['token-disabled'])}\n        aria-disabled={disabled}\n      >\n        <div className={clsx(styles['token-content'], testUtilStyles['filtering-token-content'])}>{children}</div>\n        <button\n          type=\"button\"\n          className={clsx(styles['dismiss-button'], testUtilStyles['filtering-token-dismiss-button'])}\n          aria-label={dismissAriaLabel}\n          onClick={onDismiss}\n          disabled={disabled}\n        >\n          <InternalIcon name=\"close\" />\n        </button>\n      </div>\n    </div>\n  );\n}\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/property-filter/filtering-token/index.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport React, { forwardRef, useImperativeHandle, useRef } from 'react';\nimport clsx from 'clsx';\n\nimport { useDensityMode } from '@cloudscape-design/component-toolkit/internal';\n\nimport InternalIcon from '../../icon/internal';\nimport InternalPopover, { InternalPopoverProps, InternalPopoverRef } from '../../popover/internal';\nimport InternalSelect from '../../select/internal';\n\nimport testUtilStyles from '../test-classes/styles.css.js';\nimport styles from './styles.css.js';\n\nexport namespace FilteringTokenProps {\n  export type Operation = 'and' | 'or';\n}\n\nexport interface FilteringTokenProps {\n  tokens: TokenItem[];\n  operation: FilteringTokenProps.Operation;\n  groupOperation: FilteringTokenProps.Operation;\n  showOperation: boolean;\n  andText: string;\n  orText: string;\n  groupAriaLabel: string;\n  operationAriaLabel: string;\n  groupEditAriaLabel: string;\n  disabled?: boolean;\n  onChangeOperation: (operation: FilteringTokenProps.Operation) => void;\n  onChangeGroupOperation: (operation: FilteringTokenProps.Operation) => void;\n  onDismissToken: (tokenIndex: number) => void;\n  editorContent: React.ReactNode;\n  editorHeader: string;\n  editorDismissAriaLabel: string;\n  editorExpandToViewport: boolean;\n  onEditorOpen?: () => void;\n  hasGroups: boolean;\n}\n\nexport interface FilteringTokenRef {\n  closeEditor(): void;\n}\n\ninterface TokenItem {\n  content: React.ReactNode;\n  ariaLabel: string;\n  dismissAriaLabel: string;\n}\n\nconst FilteringToken = forwardRef(\n  (\n    {\n      tokens,\n      showOperation,\n      operation,\n      groupOperation,\n      andText,\n      orText,\n      groupAriaLabel,\n      operationAriaLabel,\n      groupEditAriaLabel,\n      disabled = false,\n      onChangeOperation,\n      onChangeGroupOperation,\n      onDismissToken,\n      editorContent,\n      editorHeader,\n      editorDismissAriaLabel,\n      editorExpandToViewport,\n      onEditorOpen,\n      hasGroups,\n    }: FilteringTokenProps,\n    ref: React.Ref<FilteringTokenRef>\n  ) => {\n    const popoverRef = useRef<InternalPopoverRef>(null);\n    const popoverProps: InternalPopoverProps = {\n      content: editorContent,\n      triggerType: 'text',\n      header: editorHeader,\n      size: 'large',\n      position: 'right',\n      dismissAriaLabel: editorDismissAriaLabel,\n      renderWithPortal: editorExpandToViewport,\n      __onOpen: onEditorOpen,\n    };\n    useImperativeHandle(ref, () => ({ closeEditor: () => popoverRef.current?.dismissPopover() }));\n\n    return (\n      <TokenGroup\n        ariaLabel={tokens.length === 1 ? tokens[0].ariaLabel : groupAriaLabel}\n        operation={\n          showOperation && (\n            <OperationSelector\n              operation={operation}\n              onChange={onChangeOperation}\n              ariaLabel={operationAriaLabel}\n              andText={andText}\n              orText={orText}\n              parent={true}\n              disabled={disabled}\n            />\n          )\n        }\n        tokenAction={\n          tokens.length === 1 ? (\n            <TokenDismissButton\n              ariaLabel={tokens[0].dismissAriaLabel}\n              onClick={() => onDismissToken(0)}\n              parent={true}\n              disabled={disabled}\n            />\n          ) : (\n            <InternalPopover ref={popoverRef} {...popoverProps} triggerType=\"filtering-token\">\n              <TokenEditButton ariaLabel={groupEditAriaLabel} disabled={disabled} />\n            </InternalPopover>\n          )\n        }\n        parent={true}\n        grouped={tokens.length > 1}\n        disabled={disabled}\n        hasGroups={hasGroups}\n      >\n        {tokens.length === 1 ? (\n          <InternalPopover ref={popoverRef} {...popoverProps}>\n            {tokens[0].content}\n          </InternalPopover>\n        ) : (\n          <ul className={styles.list}>\n            {tokens.map((token, index) => (\n              <li key={index}>\n                <TokenGroup\n                  ariaLabel={token.ariaLabel}\n                  operation={\n                    index !== 0 && (\n                      <OperationSelector\n                        operation={groupOperation}\n                        onChange={onChangeGroupOperation}\n                        ariaLabel={operationAriaLabel}\n                        andText={andText}\n                        orText={orText}\n                        parent={false}\n                        disabled={disabled}\n                      />\n                    )\n                  }\n                  tokenAction={\n                    <TokenDismissButton\n                      ariaLabel={token.dismissAriaLabel}\n                      onClick={() => onDismissToken(index)}\n                      parent={false}\n                      disabled={disabled}\n                    />\n                  }\n                  parent={false}\n                  grouped={false}\n                  disabled={disabled}\n                  hasGroups={false}\n                >\n                  {token.content}\n                </TokenGroup>\n              </li>\n            ))}\n          </ul>\n        )}\n      </TokenGroup>\n    );\n  }\n);\n\nexport default FilteringToken;\n\nfunction TokenGroup({\n  ariaLabel,\n  children,\n  operation,\n  tokenAction,\n  parent,\n  grouped,\n  disabled,\n  hasGroups,\n}: {\n  ariaLabel?: string;\n  children: React.ReactNode;\n  operation: React.ReactNode;\n  tokenAction: React.ReactNode;\n  parent: boolean;\n  grouped: boolean;\n  disabled: boolean;\n  hasGroups: boolean;\n}) {\n  const groupRef = useRef<HTMLDivElement>(null);\n  const isCompactMode = useDensityMode(groupRef) === 'compact';\n  return (\n    <div\n      ref={groupRef}\n      className={clsx(\n        parent\n          ? clsx(styles.root, testUtilStyles['filtering-token'])\n          : clsx(styles['inner-root'], testUtilStyles['filtering-token-inner']),\n        hasGroups && styles['has-groups'],\n        isCompactMode && styles['compact-mode']\n      )}\n      role=\"group\"\n      aria-label={ariaLabel}\n    >\n      {operation}\n\n      <div\n        className={clsx(\n          styles.token,\n          !!operation && styles['show-operation'],\n          grouped && styles.grouped,\n          disabled && styles['token-disabled']\n        )}\n        aria-disabled={disabled}\n      >\n        <div\n          className={clsx(\n            parent\n              ? clsx(styles['token-content'], testUtilStyles['filtering-token-content'])\n              : clsx(styles['inner-token-content'], testUtilStyles['filtering-token-inner-content']),\n            grouped && styles['token-content-grouped']\n          )}\n        >\n          {children}\n        </div>\n\n        {tokenAction}\n      </div>\n    </div>\n  );\n}\n\nfunction OperationSelector({\n  operation,\n  onChange,\n  ariaLabel,\n  andText,\n  orText,\n  parent,\n  disabled,\n}: {\n  operation: FilteringTokenProps.Operation;\n  onChange: (operation: FilteringTokenProps.Operation) => void;\n  andText: string;\n  orText: string;\n  ariaLabel: string;\n  parent: boolean;\n  disabled?: boolean;\n}) {\n  return (\n    <InternalSelect\n      __inFilteringToken={true}\n      className={clsx(\n        parent\n          ? clsx(styles.select, testUtilStyles['filtering-token-select'])\n          : clsx(styles['inner-select'], testUtilStyles['filtering-token-inner-select'])\n      )}\n      options={[\n        { value: 'and', label: andText },\n        { value: 'or', label: orText },\n      ]}\n      selectedOption={{ value: operation, label: operation === 'and' ? andText : orText }}\n      onChange={e => onChange(e.detail.selectedOption.value as FilteringTokenProps.Operation)}\n      disabled={disabled}\n      ariaLabel={ariaLabel}\n    />\n  );\n}\n\nfunction TokenDismissButton({\n  ariaLabel,\n  onClick,\n  parent,\n  disabled,\n}: {\n  ariaLabel: string;\n  onClick: () => void;\n  parent: boolean;\n  disabled?: boolean;\n}) {\n  return (\n    <button\n      type=\"button\"\n      className={clsx(\n        parent\n          ? clsx(styles['dismiss-button'], testUtilStyles['filtering-token-dismiss-button'])\n          : clsx(styles['inner-dismiss-button'], testUtilStyles['filtering-token-inner-dismiss-button'])\n      )}\n      aria-label={ariaLabel}\n      onClick={onClick}\n      disabled={disabled}\n    >\n      <InternalIcon name=\"close\" />\n    </button>\n  );\n}\n\nfunction TokenEditButton({ ariaLabel, disabled }: { ariaLabel: string; disabled?: boolean }) {\n  return (\n    <button\n      type=\"button\"\n      className={clsx(styles['edit-button'], testUtilStyles['filtering-token-edit-button'])}\n      aria-label={ariaLabel}\n      disabled={disabled}\n    >\n      <InternalIcon name=\"edit\" />\n    </button>\n  );\n}\n"]}

package/property-filter/filtering-token/styles.css.js

@@ -1,12 +1,23 @@
 
     import './styles.scoped.css';
     export default {
-  "root": "awsui_root_19bso_1g39x_101",
-  "token": "awsui_token_19bso_1g39x_106",
-  "show-operation": "awsui_show-operation_19bso_1g39x_121",
-  "select": "awsui_select_19bso_1g39x_127",
-  "token-content": "awsui_token-content_19bso_1g39x_131",
-  "dismiss-button": "awsui_dismiss-button_19bso_1g39x_136",
-  "token-disabled": "awsui_token-disabled_19bso_1g39x_178"
+  "root": "awsui_root_19bso_2jqfz_101",
+  "inner-root": "awsui_inner-root_19bso_2jqfz_102",
+  "has-groups": "awsui_has-groups_19bso_2jqfz_138",
+  "compact-mode": "awsui_compact-mode_19bso_2jqfz_142",
+  "token": "awsui_token_19bso_2jqfz_147",
+  "inner-token": "awsui_inner-token_19bso_2jqfz_148",
+  "grouped": "awsui_grouped_19bso_2jqfz_161",
+  "list": "awsui_list_19bso_2jqfz_166",
+  "show-operation": "awsui_show-operation_19bso_2jqfz_177",
+  "select": "awsui_select_19bso_2jqfz_183",
+  "inner-select": "awsui_inner-select_19bso_2jqfz_184",
+  "token-content": "awsui_token-content_19bso_2jqfz_188",
+  "token-content-grouped": "awsui_token-content-grouped_19bso_2jqfz_194",
+  "inner-token-content": "awsui_inner-token-content_19bso_2jqfz_199",
+  "edit-button": "awsui_edit-button_19bso_2jqfz_204",
+  "dismiss-button": "awsui_dismiss-button_19bso_2jqfz_205",
+  "inner-dismiss-button": "awsui_inner-dismiss-button_19bso_2jqfz_206",
+  "token-disabled": "awsui_token-disabled_19bso_2jqfz_264"
 };
   

package/property-filter/filtering-token/styles.scoped.css

@@ -98,13 +98,55 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
  Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
  SPDX-License-Identifier: Apache-2.0
 */
-.awsui_root_19bso_1g39x_101:not(#\9) {
+.awsui_root_19bso_2jqfz_101:not(#\9),
+.awsui_inner-root_19bso_2jqfz_102:not(#\9) {
+  border-collapse: separate;
+  border-spacing: 0;
+  box-sizing: border-box;
+  caption-side: top;
+  cursor: auto;
+  direction: inherit;
+  empty-cells: show;
+  font-family: serif;
+  font-size: medium;
+  font-style: normal;
+  font-variant: normal;
+  font-weight: 400;
+  font-stretch: normal;
+  line-height: normal;
+  -webkit-hyphens: none;
+          hyphens: none;
+  letter-spacing: normal;
+  list-style: disc outside none;
+  tab-size: 8;
+  text-align: start;
+  text-indent: 0;
+  text-shadow: none;
+  text-transform: none;
+  visibility: visible;
+  white-space: normal;
+  word-spacing: normal;
+  font-size: var(--font-size-body-m-x4okxb, 14px);
+  line-height: var(--line-height-body-m-30ar75, 20px);
+  color: var(--color-text-body-default-at06ol, #000716);
+  font-weight: 400;
+  font-family: var(--font-family-base-dnvic8, "Open Sans", "Helvetica Neue", Roboto, Arial, sans-serif);
+  -webkit-font-smoothing: auto;
+  -moz-osx-font-smoothing: auto;
   display: flex;
   align-content: stretch;
 }
+.awsui_root_19bso_2jqfz_101.awsui_has-groups_19bso_2jqfz_138:not(#\9),
+.awsui_inner-root_19bso_2jqfz_102.awsui_has-groups_19bso_2jqfz_138:not(#\9) {
+  min-block-size: calc(2px + var(--size-vertical-input-v5iwwf, 32px));
+}
+.awsui_root_19bso_2jqfz_101.awsui_has-groups_19bso_2jqfz_138.awsui_compact-mode_19bso_2jqfz_142:not(#\9),
+.awsui_inner-root_19bso_2jqfz_102.awsui_has-groups_19bso_2jqfz_138.awsui_compact-mode_19bso_2jqfz_142:not(#\9) {
+  min-block-size: calc(2px + 2 * var(--border-field-width-09w7vk, 2px) + var(--size-vertical-input-v5iwwf, 32px));
+}
 
-.awsui_token_19bso_1g39x_106:not(#\9) {
-  flex-grow: 1;
+.awsui_token_19bso_2jqfz_147:not(#\9),
+.awsui_inner-token_19bso_2jqfz_148:not(#\9) {
   border-block: var(--border-field-width-09w7vk, 2px) solid var(--color-border-item-selected-k00wlz, #0972d3);
   border-inline: var(--border-field-width-09w7vk, 2px) solid var(--color-border-item-selected-k00wlz, #0972d3);
   display: flex;
@@ -117,23 +159,52 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   color: var(--color-text-body-default-at06ol, #000716);
   box-sizing: border-box;
 }
+.awsui_token_19bso_2jqfz_147.awsui_grouped_19bso_2jqfz_161:not(#\9),
+.awsui_inner-token_19bso_2jqfz_148.awsui_grouped_19bso_2jqfz_161:not(#\9) {
+  justify-content: space-between;
+}
+
+.awsui_list_19bso_2jqfz_166:not(#\9) {
+  list-style: none;
+  margin-block: 0;
+  margin-inline: 0;
+  padding-block: 0;
+  padding-inline: 0;
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--space-xs-zb16t3, 8px);
+}
 
-.awsui_show-operation_19bso_1g39x_121:not(#\9) {
+.awsui_show-operation_19bso_2jqfz_177:not(#\9) {
   border-inline-start: none;
   border-start-start-radius: 0;
   border-end-start-radius: 0;
 }
 
-.awsui_select_19bso_1g39x_127:not(#\9) {
+.awsui_select_19bso_2jqfz_183:not(#\9),
+.awsui_inner-select_19bso_2jqfz_184:not(#\9) {
   /* used in test-utils */
 }
 
-.awsui_token-content_19bso_1g39x_131:not(#\9) {
+.awsui_token-content_19bso_2jqfz_188:not(#\9) {
+  display: flex;
+  align-items: center;
   padding-block: var(--space-scaled-xxs-7597g1, 4px);
   padding-inline: var(--space-field-horizontal-gg19kw, 12px);
 }
+.awsui_token-content-grouped_19bso_2jqfz_194:not(#\9) {
+  padding-block: 2px;
+  padding-inline: var(--space-field-horizontal-gg19kw, 12px);
+}
+
+.awsui_inner-token-content_19bso_2jqfz_199:not(#\9) {
+  padding-block: 1px;
+  padding-inline: var(--space-field-horizontal-gg19kw, 12px);
+}
 
-.awsui_dismiss-button_19bso_1g39x_136:not(#\9) {
+.awsui_edit-button_19bso_2jqfz_204:not(#\9),
+.awsui_dismiss-button_19bso_2jqfz_205:not(#\9),
+.awsui_inner-dismiss-button_19bso_2jqfz_206:not(#\9) {
   inline-size: 30px;
   margin-block: 0;
   margin-inline: 0;
@@ -145,14 +216,20 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   background-color: transparent;
   border-inline-start: var(--border-field-width-09w7vk, 2px) solid var(--color-border-item-selected-k00wlz, #0972d3);
 }
-body[data-awsui-focus-visible=true] .awsui_dismiss-button_19bso_1g39x_136:not(#\9):focus {
+body[data-awsui-focus-visible=true] .awsui_edit-button_19bso_2jqfz_204:not(#\9):focus,
+body[data-awsui-focus-visible=true] .awsui_dismiss-button_19bso_2jqfz_205:not(#\9):focus,
+body[data-awsui-focus-visible=true] .awsui_inner-dismiss-button_19bso_2jqfz_206:not(#\9):focus {
   position: relative;
 }
-body[data-awsui-focus-visible=true] .awsui_dismiss-button_19bso_1g39x_136:not(#\9):focus {
+body[data-awsui-focus-visible=true] .awsui_edit-button_19bso_2jqfz_204:not(#\9):focus,
+body[data-awsui-focus-visible=true] .awsui_dismiss-button_19bso_2jqfz_205:not(#\9):focus,
+body[data-awsui-focus-visible=true] .awsui_inner-dismiss-button_19bso_2jqfz_206:not(#\9):focus {
   outline: 2px dotted transparent;
   outline-offset: calc(var(--space-filtering-token-dismiss-button-focus-outline-gutter-76gsim, -5px) - 1px);
 }
-body[data-awsui-focus-visible=true] .awsui_dismiss-button_19bso_1g39x_136:not(#\9):focus::before {
+body[data-awsui-focus-visible=true] .awsui_edit-button_19bso_2jqfz_204:not(#\9):focus::before,
+body[data-awsui-focus-visible=true] .awsui_dismiss-button_19bso_2jqfz_205:not(#\9):focus::before,
+body[data-awsui-focus-visible=true] .awsui_inner-dismiss-button_19bso_2jqfz_206:not(#\9):focus::before {
   content: " ";
   display: block;
   position: absolute;
@@ -166,22 +243,28 @@ body[data-awsui-focus-visible=true] .awsui_dismiss-button_19bso_1g39x_136:not(#\
   border-end-end-radius: var(--border-radius-control-default-focus-ring-u8zbsz, 4px);
   box-shadow: 0 0 0 2px var(--color-border-item-focused-b2ntyl, #0972d3);
 }
-.awsui_dismiss-button_19bso_1g39x_136:not(#\9):focus {
+.awsui_edit-button_19bso_2jqfz_204:not(#\9):focus,
+.awsui_dismiss-button_19bso_2jqfz_205:not(#\9):focus,
+.awsui_inner-dismiss-button_19bso_2jqfz_206:not(#\9):focus {
   outline: none;
   text-decoration: none;
 }
-.awsui_dismiss-button_19bso_1g39x_136:not(#\9):hover {
+.awsui_edit-button_19bso_2jqfz_204:not(#\9):hover,
+.awsui_dismiss-button_19bso_2jqfz_205:not(#\9):hover,
+.awsui_inner-dismiss-button_19bso_2jqfz_206:not(#\9):hover {
   cursor: pointer;
   color: var(--color-text-interactive-hover-mj8add, #000716);
 }
+.awsui_edit-button_19bso_2jqfz_204:not(#\9):disabled,
+.awsui_dismiss-button_19bso_2jqfz_205:not(#\9):disabled,
+.awsui_inner-dismiss-button_19bso_2jqfz_206:not(#\9):disabled {
+  color: var(--color-text-interactive-disabled-z7a3t4, #9ba7b6);
+  border-color: var(--color-border-control-disabled-bv2kkn, #d1d5db);
+}
 
-.awsui_token-disabled_19bso_1g39x_178:not(#\9) {
+.awsui_token-disabled_19bso_2jqfz_264:not(#\9) {
   border-color: var(--color-border-control-disabled-bv2kkn, #d1d5db);
   background-color: var(--color-background-container-content-4un1ap, #ffffff);
   color: var(--color-text-disabled-f4c52h, #9ba7b6);
   pointer-events: none;
-}
-.awsui_token-disabled_19bso_1g39x_178 > .awsui_dismiss-button_19bso_1g39x_136:not(#\9) {
-  color: var(--color-text-interactive-disabled-z7a3t4, #9ba7b6);
-  border-color: var(--color-border-control-disabled-bv2kkn, #d1d5db);
 }

package/property-filter/filtering-token/styles.selectors.js

@@ -2,12 +2,23 @@
     // es-module interop with Babel and Typescript
     Object.defineProperty(exports, "__esModule", { value: true });
     module.exports.default = {
-  "root": "awsui_root_19bso_1g39x_101",
-  "token": "awsui_token_19bso_1g39x_106",
-  "show-operation": "awsui_show-operation_19bso_1g39x_121",
-  "select": "awsui_select_19bso_1g39x_127",
-  "token-content": "awsui_token-content_19bso_1g39x_131",
-  "dismiss-button": "awsui_dismiss-button_19bso_1g39x_136",
-  "token-disabled": "awsui_token-disabled_19bso_1g39x_178"
+  "root": "awsui_root_19bso_2jqfz_101",
+  "inner-root": "awsui_inner-root_19bso_2jqfz_102",
+  "has-groups": "awsui_has-groups_19bso_2jqfz_138",
+  "compact-mode": "awsui_compact-mode_19bso_2jqfz_142",
+  "token": "awsui_token_19bso_2jqfz_147",
+  "inner-token": "awsui_inner-token_19bso_2jqfz_148",
+  "grouped": "awsui_grouped_19bso_2jqfz_161",
+  "list": "awsui_list_19bso_2jqfz_166",
+  "show-operation": "awsui_show-operation_19bso_2jqfz_177",
+  "select": "awsui_select_19bso_2jqfz_183",
+  "inner-select": "awsui_inner-select_19bso_2jqfz_184",
+  "token-content": "awsui_token-content_19bso_2jqfz_188",
+  "token-content-grouped": "awsui_token-content-grouped_19bso_2jqfz_194",
+  "inner-token-content": "awsui_inner-token-content_19bso_2jqfz_199",
+  "edit-button": "awsui_edit-button_19bso_2jqfz_204",
+  "dismiss-button": "awsui_dismiss-button_19bso_2jqfz_205",
+  "inner-dismiss-button": "awsui_inner-dismiss-button_19bso_2jqfz_206",
+  "token-disabled": "awsui_token-disabled_19bso_2jqfz_264"
 };
   

package/property-filter/styles.css.js

@@ -1,37 +1,36 @@
 
     import './styles.scoped.css';
     export default {
-  "root": "awsui_root_1wzqe_1ktx1_97",
-  "search-field": "awsui_search-field_1wzqe_1ktx1_132",
-  "input-wrapper": "awsui_input-wrapper_1wzqe_1ktx1_138",
-  "add-token": "awsui_add-token_1wzqe_1ktx1_142",
-  "tokens": "awsui_tokens_1wzqe_1ktx1_149",
-  "token-operator": "awsui_token-operator_1wzqe_1ktx1_154",
-  "property-editor": "awsui_property-editor_1wzqe_1ktx1_158",
-  "token-editor": "awsui_token-editor_1wzqe_1ktx1_159",
-  "property-editor-form": "awsui_property-editor-form_1wzqe_1ktx1_164",
-  "token-editor-form": "awsui_token-editor-form_1wzqe_1ktx1_165",
-  "property-editor-field-property": "awsui_property-editor-field-property_1wzqe_1ktx1_168",
-  "token-editor-field-property": "awsui_token-editor-field-property_1wzqe_1ktx1_169",
-  "property-editor-field-operator": "awsui_property-editor-field-operator_1wzqe_1ktx1_172",
-  "token-editor-field-operator": "awsui_token-editor-field-operator_1wzqe_1ktx1_173",
-  "property-editor-field-value": "awsui_property-editor-field-value_1wzqe_1ktx1_176",
-  "token-editor-field-value": "awsui_token-editor-field-value_1wzqe_1ktx1_177",
-  "property-editor-cancel": "awsui_property-editor-cancel_1wzqe_1ktx1_180",
-  "token-editor-cancel": "awsui_token-editor-cancel_1wzqe_1ktx1_181",
-  "property-editor-submit": "awsui_property-editor-submit_1wzqe_1ktx1_184",
-  "token-editor-submit": "awsui_token-editor-submit_1wzqe_1ktx1_185",
-  "property-editor-actions": "awsui_property-editor-actions_1wzqe_1ktx1_188",
-  "token-editor-actions": "awsui_token-editor-actions_1wzqe_1ktx1_189",
-  "custom-content-wrapper": "awsui_custom-content-wrapper_1wzqe_1ktx1_207",
-  "custom-control": "awsui_custom-control_1wzqe_1ktx1_211",
-  "input": "awsui_input_1wzqe_1ktx1_138",
-  "results": "awsui_results_1wzqe_1ktx1_219",
-  "token-trigger": "awsui_token-trigger_1wzqe_1ktx1_224",
-  "remove-all": "awsui_remove-all_1wzqe_1ktx1_229",
-  "token-label": "awsui_token-label_1wzqe_1ktx1_230",
-  "join-operation": "awsui_join-operation_1wzqe_1ktx1_231",
-  "custom-filter-actions": "awsui_custom-filter-actions_1wzqe_1ktx1_232",
-  "constraint": "awsui_constraint_1wzqe_1ktx1_236"
+  "root": "awsui_root_1wzqe_1phcq_97",
+  "search-field": "awsui_search-field_1wzqe_1phcq_132",
+  "input-wrapper": "awsui_input-wrapper_1wzqe_1phcq_138",
+  "add-token": "awsui_add-token_1wzqe_1phcq_142",
+  "tokens": "awsui_tokens_1wzqe_1phcq_149",
+  "token-operator": "awsui_token-operator_1wzqe_1phcq_154",
+  "property-editor": "awsui_property-editor_1wzqe_1phcq_158",
+  "token-editor": "awsui_token-editor_1wzqe_1phcq_159",
+  "property-editor-form": "awsui_property-editor-form_1wzqe_1phcq_164",
+  "token-editor-form": "awsui_token-editor-form_1wzqe_1phcq_165",
+  "property-editor-field-property": "awsui_property-editor-field-property_1wzqe_1phcq_168",
+  "token-editor-field-property": "awsui_token-editor-field-property_1wzqe_1phcq_169",
+  "property-editor-field-operator": "awsui_property-editor-field-operator_1wzqe_1phcq_172",
+  "token-editor-field-operator": "awsui_token-editor-field-operator_1wzqe_1phcq_173",
+  "property-editor-field-value": "awsui_property-editor-field-value_1wzqe_1phcq_176",
+  "token-editor-field-value": "awsui_token-editor-field-value_1wzqe_1phcq_177",
+  "property-editor-cancel": "awsui_property-editor-cancel_1wzqe_1phcq_180",
+  "token-editor-cancel": "awsui_token-editor-cancel_1wzqe_1phcq_181",
+  "property-editor-submit": "awsui_property-editor-submit_1wzqe_1phcq_184",
+  "token-editor-submit": "awsui_token-editor-submit_1wzqe_1phcq_185",
+  "property-editor-actions": "awsui_property-editor-actions_1wzqe_1phcq_188",
+  "token-editor-actions": "awsui_token-editor-actions_1wzqe_1phcq_189",
+  "custom-content-wrapper": "awsui_custom-content-wrapper_1wzqe_1phcq_207",
+  "custom-control": "awsui_custom-control_1wzqe_1phcq_211",
+  "input": "awsui_input_1wzqe_1phcq_138",
+  "results": "awsui_results_1wzqe_1phcq_219",
+  "token-trigger": "awsui_token-trigger_1wzqe_1phcq_224",
+  "remove-all": "awsui_remove-all_1wzqe_1phcq_229",
+  "join-operation": "awsui_join-operation_1wzqe_1phcq_230",
+  "custom-filter-actions": "awsui_custom-filter-actions_1wzqe_1phcq_231",
+  "constraint": "awsui_constraint_1wzqe_1phcq_235"
 };