@cloudscape-design/components-themeable 3.0.730 → 3.0.732

package/lib/internal/template/toggle/internal.d.ts

@@ -1,6 +1,9 @@
 import React from 'react';
 import { InternalBaseComponentProps } from '../internal/hooks/use-base-component';
 import { ToggleProps } from './interfaces';
-declare const InternalToggle: React.ForwardRefExoticComponent<ToggleProps & InternalBaseComponentProps<any> & React.RefAttributes<ToggleProps.Ref>>;
+interface InternalToggleProps extends ToggleProps, InternalBaseComponentProps {
+    __injectAnalyticsComponentMetadata?: boolean;
+}
+declare const InternalToggle: React.ForwardRefExoticComponent<InternalToggleProps & React.RefAttributes<ToggleProps.Ref>>;
 export default InternalToggle;
 //# sourceMappingURL=internal.d.ts.map

package/lib/internal/template/toggle/internal.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"internal.d.ts","sourceRoot":"","sources":["../../../src/toggle/internal.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAiB,MAAM,OAAO,CAAC;AAQtC,OAAO,EAAE,0BAA0B,EAAE,MAAM,sCAAsC,CAAC;AAClF,OAAO,EAAE,WAAW,EAAE,MAAM,cAAc,CAAC;AAM3C,QAAA,MAAM,cAAc,uHA6EnB,CAAC;AAEF,eAAe,cAAc,CAAC"}
+{"version":3,"file":"internal.d.ts","sourceRoot":"","sources":["../../../src/toggle/internal.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAiB,MAAM,OAAO,CAAC;AAatC,OAAO,EAAE,0BAA0B,EAAE,MAAM,sCAAsC,CAAC;AAKlF,OAAO,EAAE,WAAW,EAAE,MAAM,cAAc,CAAC;AAI3C,UAAU,mBAAoB,SAAQ,WAAW,EAAE,0BAA0B;IAC3E,kCAAkC,CAAC,EAAE,OAAO,CAAC;CAC9C;AAED,QAAA,MAAM,cAAc,6FA+FnB,CAAC;AAEF,eAAe,cAAc,CAAC"}

package/lib/internal/template/toggle/internal.js

@@ -3,6 +3,7 @@ import { __rest } from "tslib";
 // SPDX-License-Identifier: Apache-2.0
 import React, { useRef } from 'react';
 import clsx from 'clsx';
+import { getAnalyticsMetadataAttribute, } from '@cloudscape-design/component-toolkit/internal/analytics-metadata';
 import { getBaseProps } from '../internal/base-component';
 import AbstractSwitch from '../internal/components/abstract-switch';
 import { useFormFieldContext } from '../internal/context/form-field-context';
@@ -10,10 +11,23 @@ import { fireNonCancelableEvent } from '../internal/events';
 import useForwardFocus from '../internal/hooks/forward-focus';
 import styles from './styles.css.js';
 const InternalToggle = React.forwardRef((_a, ref) => {
-    var { controlId, checked, name, disabled, readOnly, children, description, ariaLabel, ariaControls, onFocus, onBlur, onChange, __internalRootRef = null } = _a, rest = __rest(_a, ["controlId", "checked", "name", "disabled", "readOnly", "children", "description", "ariaLabel", "ariaControls", "onFocus", "onBlur", "onChange", "__internalRootRef"]);
+    var { controlId, checked, name, disabled, readOnly, children, description, ariaLabel, ariaControls, onFocus, onBlur, onChange, __internalRootRef = null, __injectAnalyticsComponentMetadata } = _a, rest = __rest(_a, ["controlId", "checked", "name", "disabled", "readOnly", "children", "description", "ariaLabel", "ariaControls", "onFocus", "onBlur", "onChange", "__internalRootRef", "__injectAnalyticsComponentMetadata"]);
     const { ariaDescribedby, ariaLabelledby } = useFormFieldContext(rest);
     const baseProps = getBaseProps(rest);
     const checkboxRef = useRef(null);
+    const analyticsMetadata = {};
+    const analyticsComponentMetadata = {
+        name: 'awsui.Toggle',
+        label: { root: 'self' },
+    };
+    if (__injectAnalyticsComponentMetadata) {
+        analyticsMetadata.component = analyticsComponentMetadata;
+    }
+    if (!disabled && !readOnly) {
+        analyticsMetadata.detail = {
+            selected: `${!checked}`,
+        };
+    }
     useForwardFocus(ref, checkboxRef);
     return (React.createElement(AbstractSwitch, Object.assign({}, baseProps, { className: clsx(styles.root, baseProps.className), controlClassName: clsx(styles['toggle-control'], {
             [styles['toggle-control-checked']]: checked,
@@ -31,7 +45,7 @@ const InternalToggle = React.forwardRef((_a, ref) => {
                 [styles['toggle-handle-checked']]: checked,
                 [styles['toggle-handle-disabled']]: disabled,
                 [styles['toggle-handle-readonly']]: readOnly,
-            }) }), __internalRootRef: __internalRootRef })));
+            }) }), __internalRootRef: __internalRootRef }, getAnalyticsMetadataAttribute(analyticsMetadata))));
 });
 export default InternalToggle;
 //# sourceMappingURL=internal.js.map

package/lib/internal/template/toggle/internal.js.map

@@ -1 +1 @@
-{"version":3,"file":"internal.js","sourceRoot":"","sources":["../../../src/toggle/internal.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React, { useRef } from 'react';\nimport clsx from 'clsx';\n\nimport { getBaseProps } from '../internal/base-component';\nimport AbstractSwitch from '../internal/components/abstract-switch';\nimport { useFormFieldContext } from '../internal/context/form-field-context';\nimport { fireNonCancelableEvent } from '../internal/events';\nimport useForwardFocus from '../internal/hooks/forward-focus';\nimport { InternalBaseComponentProps } from '../internal/hooks/use-base-component';\nimport { ToggleProps } from './interfaces';\n\nimport styles from './styles.css.js';\n\ntype InternalToggleProps = ToggleProps & InternalBaseComponentProps;\n\nconst InternalToggle = React.forwardRef<ToggleProps.Ref, InternalToggleProps>(\n  (\n    {\n      controlId,\n      checked,\n      name,\n      disabled,\n      readOnly,\n      children,\n      description,\n      ariaLabel,\n      ariaControls,\n      onFocus,\n      onBlur,\n      onChange,\n      __internalRootRef = null,\n      ...rest\n    },\n    ref\n  ) => {\n    const { ariaDescribedby, ariaLabelledby } = useFormFieldContext(rest);\n    const baseProps = getBaseProps(rest);\n    const checkboxRef = useRef<HTMLInputElement>(null);\n    useForwardFocus(ref, checkboxRef);\n\n    return (\n      <AbstractSwitch\n        {...baseProps}\n        className={clsx(styles.root, baseProps.className)}\n        controlClassName={clsx(styles['toggle-control'], {\n          [styles['toggle-control-checked']]: checked,\n          [styles['toggle-control-disabled']]: disabled,\n          [styles['toggle-control-readonly']]: readOnly,\n        })}\n        outlineClassName={styles.outline}\n        controlId={controlId}\n        disabled={disabled}\n        readOnly={readOnly}\n        label={children}\n        description={description}\n        descriptionBottomPadding={true}\n        ariaLabel={ariaLabel}\n        ariaLabelledby={ariaLabelledby}\n        ariaDescribedby={ariaDescribedby}\n        ariaControls={ariaControls}\n        nativeControl={nativeControlProps => (\n          <input\n            {...nativeControlProps}\n            ref={checkboxRef}\n            type=\"checkbox\"\n            checked={checked}\n            name={name}\n            aria-disabled={readOnly && !disabled ? 'true' : undefined}\n            onFocus={() => fireNonCancelableEvent(onFocus)}\n            onBlur={() => fireNonCancelableEvent(onBlur)}\n            // empty handler to suppress React controllability warning\n            onChange={() => {}}\n          />\n        )}\n        onClick={() => {\n          checkboxRef.current?.focus();\n          fireNonCancelableEvent(onChange, { checked: !checked });\n        }}\n        styledControl={\n          /*Using span, not div for HTML validity*/\n          <span\n            className={clsx(styles['toggle-handle'], {\n              [styles['toggle-handle-checked']]: checked,\n              [styles['toggle-handle-disabled']]: disabled,\n              [styles['toggle-handle-readonly']]: readOnly,\n            })}\n          />\n        }\n        __internalRootRef={__internalRootRef}\n      />\n    );\n  }\n);\n\nexport default InternalToggle;\n"]}
+{"version":3,"file":"internal.js","sourceRoot":"","sources":["../../../src/toggle/internal.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React, { useRef } from 'react';\nimport clsx from 'clsx';\n\nimport {\n  GeneratedAnalyticsMetadataFragment,\n  getAnalyticsMetadataAttribute,\n} from '@cloudscape-design/component-toolkit/internal/analytics-metadata';\n\nimport { getBaseProps } from '../internal/base-component';\nimport AbstractSwitch from '../internal/components/abstract-switch';\nimport { useFormFieldContext } from '../internal/context/form-field-context';\nimport { fireNonCancelableEvent } from '../internal/events';\nimport useForwardFocus from '../internal/hooks/forward-focus';\nimport { InternalBaseComponentProps } from '../internal/hooks/use-base-component';\nimport {\n  GeneratedAnalyticsMetadataToggleComponent,\n  GeneratedAnalyticsMetadataToggleSelect,\n} from './analytics-metadata/interfaces';\nimport { ToggleProps } from './interfaces';\n\nimport styles from './styles.css.js';\n\ninterface InternalToggleProps extends ToggleProps, InternalBaseComponentProps {\n  __injectAnalyticsComponentMetadata?: boolean;\n}\n\nconst InternalToggle = React.forwardRef<ToggleProps.Ref, InternalToggleProps>(\n  (\n    {\n      controlId,\n      checked,\n      name,\n      disabled,\n      readOnly,\n      children,\n      description,\n      ariaLabel,\n      ariaControls,\n      onFocus,\n      onBlur,\n      onChange,\n      __internalRootRef = null,\n      __injectAnalyticsComponentMetadata,\n      ...rest\n    },\n    ref\n  ) => {\n    const { ariaDescribedby, ariaLabelledby } = useFormFieldContext(rest);\n    const baseProps = getBaseProps(rest);\n    const checkboxRef = useRef<HTMLInputElement>(null);\n\n    const analyticsMetadata: GeneratedAnalyticsMetadataFragment = {};\n    const analyticsComponentMetadata: GeneratedAnalyticsMetadataToggleComponent = {\n      name: 'awsui.Toggle',\n      label: { root: 'self' },\n    };\n\n    if (__injectAnalyticsComponentMetadata) {\n      analyticsMetadata.component = analyticsComponentMetadata;\n    }\n\n    if (!disabled && !readOnly) {\n      analyticsMetadata.detail = {\n        selected: `${!checked}`,\n      } as Partial<GeneratedAnalyticsMetadataToggleSelect['detail']>;\n    }\n    useForwardFocus(ref, checkboxRef);\n\n    return (\n      <AbstractSwitch\n        {...baseProps}\n        className={clsx(styles.root, baseProps.className)}\n        controlClassName={clsx(styles['toggle-control'], {\n          [styles['toggle-control-checked']]: checked,\n          [styles['toggle-control-disabled']]: disabled,\n          [styles['toggle-control-readonly']]: readOnly,\n        })}\n        outlineClassName={styles.outline}\n        controlId={controlId}\n        disabled={disabled}\n        readOnly={readOnly}\n        label={children}\n        description={description}\n        descriptionBottomPadding={true}\n        ariaLabel={ariaLabel}\n        ariaLabelledby={ariaLabelledby}\n        ariaDescribedby={ariaDescribedby}\n        ariaControls={ariaControls}\n        nativeControl={nativeControlProps => (\n          <input\n            {...nativeControlProps}\n            ref={checkboxRef}\n            type=\"checkbox\"\n            checked={checked}\n            name={name}\n            aria-disabled={readOnly && !disabled ? 'true' : undefined}\n            onFocus={() => fireNonCancelableEvent(onFocus)}\n            onBlur={() => fireNonCancelableEvent(onBlur)}\n            // empty handler to suppress React controllability warning\n            onChange={() => {}}\n          />\n        )}\n        onClick={() => {\n          checkboxRef.current?.focus();\n          fireNonCancelableEvent(onChange, { checked: !checked });\n        }}\n        styledControl={\n          /*Using span, not div for HTML validity*/\n          <span\n            className={clsx(styles['toggle-handle'], {\n              [styles['toggle-handle-checked']]: checked,\n              [styles['toggle-handle-disabled']]: disabled,\n              [styles['toggle-handle-readonly']]: readOnly,\n            })}\n          />\n        }\n        __internalRootRef={__internalRootRef}\n        {...getAnalyticsMetadataAttribute(analyticsMetadata)}\n      />\n    );\n  }\n);\n\nexport default InternalToggle;\n"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cloudscape-design/components-themeable",
-  "version": "3.0.730",
+  "version": "3.0.732",
   "files": [
     "lib"
   ],

package/lib/internal/template/property-filter/token-editor-grouped.d.ts

@@ -1,32 +0,0 @@
-/// <reference types="react" />
-import { DropdownStatusProps } from '../internal/components/dropdown-status/interfaces';
-import { NonCancelableEventHandler } from '../internal/events';
-import { FormattedToken, GroupText, I18nStrings, InternalFilteringOption, InternalFilteringProperty, InternalFreeTextFiltering, InternalToken, LoadItemsDetail } from './interfaces';
-interface I18nStringsExt {
-    tokenEditorTokenActionsLabel: (token: FormattedToken) => string;
-    tokenEditorTokenRemoveLabel: (token: FormattedToken) => string;
-    tokenEditorTokenRemoveFromGroupLabel: (token: FormattedToken) => string;
-    tokenEditorAddNewTokenLabel: string;
-    tokenEditorAddTokenActionsLabel: string;
-    tokenEditorAddExistingTokenLabel: (token: FormattedToken) => string;
-}
-export interface TokenEditorProps {
-    supportsGroups: boolean;
-    asyncProperties?: boolean;
-    asyncProps: DropdownStatusProps;
-    customGroupsText: readonly GroupText[];
-    freeTextFiltering: InternalFreeTextFiltering;
-    filteringProperties: readonly InternalFilteringProperty[];
-    filteringOptions: readonly InternalFilteringOption[];
-    i18nStrings: I18nStrings & I18nStringsExt;
-    onLoadItems?: NonCancelableEventHandler<LoadItemsDetail>;
-    onSubmit: () => void;
-    onDismiss: () => void;
-    standaloneTokens: InternalToken[];
-    onChangeStandalone: (newStandalone: InternalToken[]) => void;
-    tempGroup: InternalToken[];
-    onChangeTempGroup: (token: InternalToken[]) => void;
-}
-export declare function TokenEditor({ supportsGroups, asyncProperties, asyncProps, customGroupsText, freeTextFiltering, filteringProperties, filteringOptions, i18nStrings, onLoadItems, onSubmit, onDismiss, standaloneTokens, onChangeStandalone, tempGroup, onChangeTempGroup, }: TokenEditorProps): JSX.Element;
-export {};
-//# sourceMappingURL=token-editor-grouped.d.ts.map

package/lib/internal/template/property-filter/token-editor-grouped.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"token-editor-grouped.d.ts","sourceRoot":"","sources":["../../../src/property-filter/token-editor-grouped.tsx"],"names":[],"mappings":";AAUA,OAAO,EAAE,mBAAmB,EAAE,MAAM,mDAAmD,CAAC;AAExF,OAAO,EAAE,yBAAyB,EAAE,MAAM,oBAAoB,CAAC;AAK/D,OAAO,EAEL,cAAc,EACd,SAAS,EACT,WAAW,EACX,uBAAuB,EACvB,yBAAyB,EACzB,yBAAyB,EACzB,aAAa,EACb,eAAe,EAChB,MAAM,cAAc,CAAC;AAMtB,UAAU,cAAc;IACtB,4BAA4B,EAAE,CAAC,KAAK,EAAE,cAAc,KAAK,MAAM,CAAC;IAChE,2BAA2B,EAAE,CAAC,KAAK,EAAE,cAAc,KAAK,MAAM,CAAC;IAC/D,oCAAoC,EAAE,CAAC,KAAK,EAAE,cAAc,KAAK,MAAM,CAAC;IACxE,2BAA2B,EAAE,MAAM,CAAC;IACpC,+BAA+B,EAAE,MAAM,CAAC;IACxC,gCAAgC,EAAE,CAAC,KAAK,EAAE,cAAc,KAAK,MAAM,CAAC;CACrE;AAED,MAAM,WAAW,gBAAgB;IAC/B,cAAc,EAAE,OAAO,CAAC;IACxB,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,UAAU,EAAE,mBAAmB,CAAC;IAChC,gBAAgB,EAAE,SAAS,SAAS,EAAE,CAAC;IACvC,iBAAiB,EAAE,yBAAyB,CAAC;IAC7C,mBAAmB,EAAE,SAAS,yBAAyB,EAAE,CAAC;IAC1D,gBAAgB,EAAE,SAAS,uBAAuB,EAAE,CAAC;IACrD,WAAW,EAAE,WAAW,GAAG,cAAc,CAAC;IAC1C,WAAW,CAAC,EAAE,yBAAyB,CAAC,eAAe,CAAC,CAAC;IACzD,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB,SAAS,EAAE,MAAM,IAAI,CAAC;IACtB,gBAAgB,EAAE,aAAa,EAAE,CAAC;IAClC,kBAAkB,EAAE,CAAC,aAAa,EAAE,aAAa,EAAE,KAAK,IAAI,CAAC;IAC7D,SAAS,EAAE,aAAa,EAAE,CAAC;IAC3B,iBAAiB,EAAE,CAAC,KAAK,EAAE,aAAa,EAAE,KAAK,IAAI,CAAC;CACrD;AAED,wBAAgB,WAAW,CAAC,EAC1B,cAAc,EACd,eAAe,EACf,UAAU,EACV,gBAAgB,EAChB,iBAAiB,EACjB,mBAAmB,EACnB,gBAAgB,EAChB,WAAW,EACX,WAAW,EACX,QAAQ,EACR,SAAS,EACT,gBAAgB,EAChB,kBAAkB,EAClB,SAAS,EACT,iBAAiB,GAClB,EAAE,gBAAgB,eAsIlB"}

package/lib/internal/template/property-filter/token-editor-grouped.js

@@ -1,114 +0,0 @@
-// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
-// SPDX-License-Identifier: Apache-2.0
-import React from 'react';
-import clsx from 'clsx';
-import InternalButton from '../button/internal';
-import InternalButtonDropdown from '../button-dropdown/internal';
-import InternalFormField from '../form-field/internal';
-import { FormFieldContext } from '../internal/context/form-field-context';
-import { useContainerBreakpoints } from '../internal/hooks/container-queries';
-import { useUniqueId } from '../internal/hooks/use-unique-id';
-import { getAllowedOperators } from './controller';
-import { getFormattedToken } from './i18n-utils';
-import { OperatorInput, PropertyInput, ValueInput } from './token-editor';
-import styles from './styles.css.js';
-import testUtilStyles from './test-classes/styles.css.js';
-export function TokenEditor({ supportsGroups, asyncProperties, asyncProps, customGroupsText, freeTextFiltering, filteringProperties, filteringOptions, i18nStrings, onLoadItems, onSubmit, onDismiss, standaloneTokens, onChangeStandalone, tempGroup, onChangeTempGroup, }) {
-    const groups = tempGroup.map((temporaryToken, index) => {
-        const setTemporaryToken = (newToken) => {
-            const copy = [...tempGroup];
-            copy[index] = newToken;
-            onChangeTempGroup(copy);
-        };
-        const property = temporaryToken.property;
-        const onChangePropertyKey = (newPropertyKey) => {
-            var _a;
-            const filteringProperty = filteringProperties.reduce((acc, property) => (property.propertyKey === newPropertyKey ? property : acc), undefined);
-            const allowedOperators = filteringProperty ? getAllowedOperators(filteringProperty) : freeTextFiltering.operators;
-            const operator = temporaryToken.operator && allowedOperators.indexOf(temporaryToken.operator) !== -1
-                ? temporaryToken.operator
-                : allowedOperators[0];
-            const matchedProperty = (_a = filteringProperties.find(property => property.propertyKey === newPropertyKey)) !== null && _a !== void 0 ? _a : null;
-            setTemporaryToken(Object.assign(Object.assign({}, temporaryToken), { property: matchedProperty, operator, value: null }));
-        };
-        const operator = temporaryToken.operator;
-        const onChangeOperator = (newOperator) => {
-            setTemporaryToken(Object.assign(Object.assign({}, temporaryToken), { operator: newOperator }));
-        };
-        const value = temporaryToken.value;
-        const onChangeValue = (newValue) => {
-            setTemporaryToken(Object.assign(Object.assign({}, temporaryToken), { value: newValue }));
-        };
-        return { token: temporaryToken, property, onChangePropertyKey, operator, onChangeOperator, value, onChangeValue };
-    });
-    return (React.createElement("div", { className: styles['token-editor-grouped'] },
-        React.createElement(TokenEditorFields, { supportsGroups: supportsGroups, tokens: groups.map(group => getFormattedToken(group.token, i18nStrings)), onRemove: index => {
-                const updated = tempGroup.filter((_, existingIndex) => existingIndex !== index);
-                onChangeTempGroup(updated);
-            }, onRemoveFromGroup: index => {
-                const removedToken = tempGroup[index];
-                const updated = tempGroup.filter((_, existingIndex) => existingIndex !== index);
-                onChangeTempGroup(updated);
-                onChangeStandalone([...standaloneTokens, removedToken]);
-            }, renderProperty: index => (React.createElement(PropertyInput, { property: groups[index].property, onChangePropertyKey: groups[index].onChangePropertyKey, asyncProps: asyncProperties ? asyncProps : null, filteringProperties: filteringProperties, onLoadItems: onLoadItems, customGroupsText: customGroupsText, i18nStrings: i18nStrings, freeTextFiltering: freeTextFiltering })), renderOperator: index => (React.createElement(OperatorInput, { property: groups[index].property, operator: groups[index].operator, onChangeOperator: groups[index].onChangeOperator, i18nStrings: i18nStrings, freeTextFiltering: freeTextFiltering, triggerVariant: "label" })), renderValue: index => (React.createElement(ValueInput, { property: groups[index].property, operator: groups[index].operator, value: groups[index].value, onChangeValue: groups[index].onChangeValue, asyncProps: asyncProps, filteringOptions: filteringOptions, onLoadItems: onLoadItems, i18nStrings: i18nStrings })), i18nStrings: i18nStrings }),
-        supportsGroups && (React.createElement("div", { className: clsx(styles['token-editor-grouped-add-token'], testUtilStyles['token-editor-token-add-actions']) },
-            React.createElement(InternalButtonDropdown, { variant: "normal", ariaLabel: i18nStrings.tokenEditorAddTokenActionsLabel, items: standaloneTokens.map((token, index) => ({
-                    id: index.toString(),
-                    text: i18nStrings.tokenEditorAddExistingTokenLabel(getFormattedToken(token, i18nStrings)),
-                })), onItemClick: ({ detail }) => {
-                    const index = parseInt(detail.id);
-                    if (!isNaN(index) && standaloneTokens[index]) {
-                        const addedToken = standaloneTokens[index];
-                        const updated = standaloneTokens.filter((_, existingIndex) => existingIndex !== index);
-                        onChangeStandalone(updated);
-                        onChangeTempGroup([...tempGroup, addedToken]);
-                    }
-                }, disabled: standaloneTokens.length === 0, mainAction: {
-                    text: i18nStrings.tokenEditorAddNewTokenLabel,
-                    onClick: () => onChangeTempGroup([...tempGroup, { property: null, operator: ':', value: null }]),
-                } }))),
-        React.createElement("div", { className: styles['token-editor-grouped-actions'] },
-            React.createElement(InternalButton, { formAction: "none", variant: "link", className: clsx(styles['token-editor-grouped-cancel'], testUtilStyles['token-editor-cancel']), onClick: onDismiss }, i18nStrings.cancelActionText),
-            React.createElement(InternalButton, { className: clsx(styles['token-editor-grouped-submit'], testUtilStyles['token-editor-submit']), formAction: "none", onClick: onSubmit }, i18nStrings.applyActionText))));
-}
-function TokenEditorFields({ tokens, supportsGroups, onRemove, onRemoveFromGroup, renderProperty, renderOperator, renderValue, i18nStrings, }) {
-    const [breakpoint, breakpointRef] = useContainerBreakpoints(['xs']);
-    const isNarrow = breakpoint === 'default';
-    const propertyLabelId = useUniqueId();
-    const operatorLabelId = useUniqueId();
-    const valueLabelId = useUniqueId();
-    const headers = (React.createElement("div", { className: styles['token-editor-grouped-grid-group'] },
-        React.createElement("div", { id: propertyLabelId, className: styles['token-editor-grouped-grid-header'] }, i18nStrings.propertyText),
-        React.createElement("div", { id: operatorLabelId, className: styles['token-editor-grouped-grid-header'] }, i18nStrings.operatorText),
-        React.createElement("div", { id: valueLabelId, className: styles['token-editor-grouped-grid-header'] }, i18nStrings.valueText),
-        React.createElement("div", { className: styles['token-editor-grouped-grid-header'] })));
-    return (React.createElement("div", { className: clsx(styles['token-editor-grouped-grid'], isNarrow && styles['token-editor-narrow']), ref: breakpointRef },
-        !isNarrow && headers,
-        tokens.map((token, index) => (React.createElement("div", { key: index, role: "group", "aria-label": `${token.propertyLabel} ${token.operator} ${token.value}`, className: styles['token-editor-grouped-grid-group'] },
-            React.createElement("div", { className: styles['token-editor-grouped-grid-cell'] },
-                React.createElement(TokenEditorField, { isNarrow: isNarrow, label: i18nStrings.propertyText, labelId: propertyLabelId, className: clsx(styles['token-editor-grouped-field-property'], testUtilStyles['token-editor-field-property']), index: index }, renderProperty(index))),
-            React.createElement("div", { className: styles['token-editor-grouped-grid-cell'] },
-                React.createElement(TokenEditorField, { isNarrow: isNarrow, label: i18nStrings.operatorText, labelId: operatorLabelId, className: clsx(styles['token-editor-grouped-field-operator'], testUtilStyles['token-editor-field-operator']), index: index }, renderOperator(index))),
-            React.createElement("div", { className: styles['token-editor-grouped-grid-cell'] },
-                React.createElement(TokenEditorField, { isNarrow: isNarrow, label: i18nStrings.valueText, labelId: valueLabelId, className: clsx(styles['token-editor-grouped-field-value'], testUtilStyles['token-editor-field-value']), index: index }, renderValue(index))),
-            React.createElement("div", { className: styles['token-editor-grouped-grid-cell'] }, supportsGroups && (React.createElement("div", { className: styles['token-editor-grouped-remove-token'] },
-                React.createElement(TokenEditorRemoveActions, { isNarrow: isNarrow, ariaLabel: i18nStrings.tokenEditorTokenActionsLabel(token), disabled: tokens.length === 1, items: [
-                        { id: 'remove', text: i18nStrings.tokenEditorTokenRemoveLabel(token) },
-                        { id: 'remove-from-group', text: i18nStrings.tokenEditorTokenRemoveFromGroupLabel(token) },
-                    ], onItemClick: itemId => {
-                        switch (itemId) {
-                            case 'remove':
-                                return onRemove(index);
-                            case 'remove-from-group':
-                                return onRemoveFromGroup(index);
-                        }
-                    }, index: index })))))))));
-}
-function TokenEditorField({ isNarrow, label, labelId, children, className, index, }) {
-    return isNarrow ? (React.createElement(InternalFormField, { label: label, className: className, "data-testindex": index }, children)) : (React.createElement(FormFieldContext.Provider, { value: { ariaLabelledby: labelId } },
-        React.createElement(InternalFormField, { className: className, "data-testindex": index }, children)));
-}
-function TokenEditorRemoveActions({ isNarrow, ariaLabel, disabled, items, onItemClick, index, }) {
-    return isNarrow ? (React.createElement(InternalButtonDropdown, { variant: "normal", ariaLabel: ariaLabel, items: items.slice(1), onItemClick: ({ detail }) => onItemClick(detail.id), disabled: disabled, mainAction: { text: items[0].text, onClick: () => onItemClick(items[0].id), disabled }, className: testUtilStyles['token-editor-token-remove-actions'], "data-testindex": index })) : (React.createElement(InternalButtonDropdown, { variant: "icon", ariaLabel: ariaLabel, items: items, onItemClick: ({ detail }) => onItemClick(detail.id), disabled: disabled, className: testUtilStyles['token-editor-token-remove-actions'], "data-testindex": index }));
-}
-//# sourceMappingURL=token-editor-grouped.js.map

package/lib/internal/template/property-filter/token-editor-grouped.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"token-editor-grouped.js","sourceRoot":"","sources":["../../../src/property-filter/token-editor-grouped.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 from 'react';\nimport clsx from 'clsx';\n\nimport InternalButton from '../button/internal';\nimport { ButtonDropdownProps } from '../button-dropdown/interfaces';\nimport InternalButtonDropdown from '../button-dropdown/internal';\nimport InternalFormField from '../form-field/internal';\nimport { DropdownStatusProps } from '../internal/components/dropdown-status/interfaces';\nimport { FormFieldContext } from '../internal/context/form-field-context';\nimport { NonCancelableEventHandler } from '../internal/events';\nimport { useContainerBreakpoints } from '../internal/hooks/container-queries';\nimport { useUniqueId } from '../internal/hooks/use-unique-id';\nimport { getAllowedOperators } from './controller';\nimport { getFormattedToken } from './i18n-utils';\nimport {\n  ComparisonOperator,\n  FormattedToken,\n  GroupText,\n  I18nStrings,\n  InternalFilteringOption,\n  InternalFilteringProperty,\n  InternalFreeTextFiltering,\n  InternalToken,\n  LoadItemsDetail,\n} from './interfaces';\nimport { OperatorInput, PropertyInput, ValueInput } from './token-editor';\n\nimport styles from './styles.css.js';\nimport testUtilStyles from './test-classes/styles.css.js';\n\ninterface I18nStringsExt {\n  tokenEditorTokenActionsLabel: (token: FormattedToken) => string;\n  tokenEditorTokenRemoveLabel: (token: FormattedToken) => string;\n  tokenEditorTokenRemoveFromGroupLabel: (token: FormattedToken) => string;\n  tokenEditorAddNewTokenLabel: string;\n  tokenEditorAddTokenActionsLabel: string;\n  tokenEditorAddExistingTokenLabel: (token: FormattedToken) => string;\n}\n\nexport interface TokenEditorProps {\n  supportsGroups: boolean;\n  asyncProperties?: boolean;\n  asyncProps: DropdownStatusProps;\n  customGroupsText: readonly GroupText[];\n  freeTextFiltering: InternalFreeTextFiltering;\n  filteringProperties: readonly InternalFilteringProperty[];\n  filteringOptions: readonly InternalFilteringOption[];\n  i18nStrings: I18nStrings & I18nStringsExt;\n  onLoadItems?: NonCancelableEventHandler<LoadItemsDetail>;\n  onSubmit: () => void;\n  onDismiss: () => void;\n  standaloneTokens: InternalToken[];\n  onChangeStandalone: (newStandalone: InternalToken[]) => void;\n  tempGroup: InternalToken[];\n  onChangeTempGroup: (token: InternalToken[]) => void;\n}\n\nexport function TokenEditor({\n  supportsGroups,\n  asyncProperties,\n  asyncProps,\n  customGroupsText,\n  freeTextFiltering,\n  filteringProperties,\n  filteringOptions,\n  i18nStrings,\n  onLoadItems,\n  onSubmit,\n  onDismiss,\n  standaloneTokens,\n  onChangeStandalone,\n  tempGroup,\n  onChangeTempGroup,\n}: TokenEditorProps) {\n  const groups = tempGroup.map((temporaryToken, index) => {\n    const setTemporaryToken = (newToken: InternalToken) => {\n      const copy = [...tempGroup];\n      copy[index] = newToken;\n      onChangeTempGroup(copy);\n    };\n    const property = temporaryToken.property;\n    const onChangePropertyKey = (newPropertyKey: undefined | string) => {\n      const filteringProperty = filteringProperties.reduce<InternalFilteringProperty | undefined>(\n        (acc, property) => (property.propertyKey === newPropertyKey ? property : acc),\n        undefined\n      );\n      const allowedOperators = filteringProperty ? getAllowedOperators(filteringProperty) : freeTextFiltering.operators;\n      const operator =\n        temporaryToken.operator && allowedOperators.indexOf(temporaryToken.operator) !== -1\n          ? temporaryToken.operator\n          : allowedOperators[0];\n      const matchedProperty = filteringProperties.find(property => property.propertyKey === newPropertyKey) ?? null;\n      setTemporaryToken({ ...temporaryToken, property: matchedProperty, operator, value: null });\n    };\n\n    const operator = temporaryToken.operator;\n    const onChangeOperator = (newOperator: ComparisonOperator) => {\n      setTemporaryToken({ ...temporaryToken, operator: newOperator });\n    };\n\n    const value = temporaryToken.value;\n    const onChangeValue = (newValue: unknown) => {\n      setTemporaryToken({ ...temporaryToken, value: newValue });\n    };\n\n    return { token: temporaryToken, property, onChangePropertyKey, operator, onChangeOperator, value, onChangeValue };\n  });\n  return (\n    <div className={styles['token-editor-grouped']}>\n      <TokenEditorFields\n        supportsGroups={supportsGroups}\n        tokens={groups.map(group => getFormattedToken(group.token, i18nStrings))}\n        onRemove={index => {\n          const updated = tempGroup.filter((_, existingIndex) => existingIndex !== index);\n          onChangeTempGroup(updated);\n        }}\n        onRemoveFromGroup={index => {\n          const removedToken = tempGroup[index];\n          const updated = tempGroup.filter((_, existingIndex) => existingIndex !== index);\n          onChangeTempGroup(updated);\n          onChangeStandalone([...standaloneTokens, removedToken]);\n        }}\n        renderProperty={index => (\n          <PropertyInput\n            property={groups[index].property}\n            onChangePropertyKey={groups[index].onChangePropertyKey}\n            asyncProps={asyncProperties ? asyncProps : null}\n            filteringProperties={filteringProperties}\n            onLoadItems={onLoadItems}\n            customGroupsText={customGroupsText}\n            i18nStrings={i18nStrings}\n            freeTextFiltering={freeTextFiltering}\n          />\n        )}\n        renderOperator={index => (\n          <OperatorInput\n            property={groups[index].property}\n            operator={groups[index].operator}\n            onChangeOperator={groups[index].onChangeOperator}\n            i18nStrings={i18nStrings}\n            freeTextFiltering={freeTextFiltering}\n            triggerVariant=\"label\"\n          />\n        )}\n        renderValue={index => (\n          <ValueInput\n            property={groups[index].property}\n            operator={groups[index].operator}\n            value={groups[index].value}\n            onChangeValue={groups[index].onChangeValue}\n            asyncProps={asyncProps}\n            filteringOptions={filteringOptions}\n            onLoadItems={onLoadItems}\n            i18nStrings={i18nStrings}\n          />\n        )}\n        i18nStrings={i18nStrings}\n      />\n\n      {supportsGroups && (\n        <div\n          className={clsx(styles['token-editor-grouped-add-token'], testUtilStyles['token-editor-token-add-actions'])}\n        >\n          <InternalButtonDropdown\n            variant=\"normal\"\n            ariaLabel={i18nStrings.tokenEditorAddTokenActionsLabel}\n            items={standaloneTokens.map((token, index) => ({\n              id: index.toString(),\n              text: i18nStrings.tokenEditorAddExistingTokenLabel(getFormattedToken(token, i18nStrings)),\n            }))}\n            onItemClick={({ detail }) => {\n              const index = parseInt(detail.id);\n              if (!isNaN(index) && standaloneTokens[index]) {\n                const addedToken = standaloneTokens[index];\n                const updated = standaloneTokens.filter((_, existingIndex) => existingIndex !== index);\n                onChangeStandalone(updated);\n                onChangeTempGroup([...tempGroup, addedToken]);\n              }\n            }}\n            disabled={standaloneTokens.length === 0}\n            mainAction={{\n              text: i18nStrings.tokenEditorAddNewTokenLabel,\n              onClick: () => onChangeTempGroup([...tempGroup, { property: null, operator: ':', value: null }]),\n            }}\n          />\n        </div>\n      )}\n\n      <div className={styles['token-editor-grouped-actions']}>\n        <InternalButton\n          formAction=\"none\"\n          variant=\"link\"\n          className={clsx(styles['token-editor-grouped-cancel'], testUtilStyles['token-editor-cancel'])}\n          onClick={onDismiss}\n        >\n          {i18nStrings.cancelActionText}\n        </InternalButton>\n        <InternalButton\n          className={clsx(styles['token-editor-grouped-submit'], testUtilStyles['token-editor-submit'])}\n          formAction=\"none\"\n          onClick={onSubmit}\n        >\n          {i18nStrings.applyActionText}\n        </InternalButton>\n      </div>\n    </div>\n  );\n}\n\ninterface TokenEditorLayout {\n  tokens: FormattedToken[];\n  supportsGroups: boolean;\n  onRemove: (index: number) => void;\n  onRemoveFromGroup: (index: number) => void;\n  renderProperty: (index: number) => React.ReactNode;\n  renderOperator: (index: number) => React.ReactNode;\n  renderValue: (index: number) => React.ReactNode;\n  i18nStrings: I18nStrings & I18nStringsExt;\n}\n\nfunction TokenEditorFields({\n  tokens,\n  supportsGroups,\n  onRemove,\n  onRemoveFromGroup,\n  renderProperty,\n  renderOperator,\n  renderValue,\n  i18nStrings,\n}: TokenEditorLayout) {\n  const [breakpoint, breakpointRef] = useContainerBreakpoints(['xs']);\n  const isNarrow = breakpoint === 'default';\n\n  const propertyLabelId = useUniqueId();\n  const operatorLabelId = useUniqueId();\n  const valueLabelId = useUniqueId();\n  const headers = (\n    <div className={styles['token-editor-grouped-grid-group']}>\n      <div id={propertyLabelId} className={styles['token-editor-grouped-grid-header']}>\n        {i18nStrings.propertyText}\n      </div>\n      <div id={operatorLabelId} className={styles['token-editor-grouped-grid-header']}>\n        {i18nStrings.operatorText}\n      </div>\n      <div id={valueLabelId} className={styles['token-editor-grouped-grid-header']}>\n        {i18nStrings.valueText}\n      </div>\n      <div className={styles['token-editor-grouped-grid-header']}></div>\n    </div>\n  );\n\n  return (\n    <div\n      className={clsx(styles['token-editor-grouped-grid'], isNarrow && styles['token-editor-narrow'])}\n      ref={breakpointRef}\n    >\n      {!isNarrow && headers}\n\n      {tokens.map((token, index) => (\n        <div\n          key={index}\n          role=\"group\"\n          aria-label={`${token.propertyLabel} ${token.operator} ${token.value}`}\n          className={styles['token-editor-grouped-grid-group']}\n        >\n          <div className={styles['token-editor-grouped-grid-cell']}>\n            <TokenEditorField\n              isNarrow={isNarrow}\n              label={i18nStrings.propertyText}\n              labelId={propertyLabelId}\n              className={clsx(\n                styles['token-editor-grouped-field-property'],\n                testUtilStyles['token-editor-field-property']\n              )}\n              index={index}\n            >\n              {renderProperty(index)}\n            </TokenEditorField>\n          </div>\n\n          <div className={styles['token-editor-grouped-grid-cell']}>\n            <TokenEditorField\n              isNarrow={isNarrow}\n              label={i18nStrings.operatorText}\n              labelId={operatorLabelId}\n              className={clsx(\n                styles['token-editor-grouped-field-operator'],\n                testUtilStyles['token-editor-field-operator']\n              )}\n              index={index}\n            >\n              {renderOperator(index)}\n            </TokenEditorField>\n          </div>\n\n          <div className={styles['token-editor-grouped-grid-cell']}>\n            <TokenEditorField\n              isNarrow={isNarrow}\n              label={i18nStrings.valueText}\n              labelId={valueLabelId}\n              className={clsx(styles['token-editor-grouped-field-value'], testUtilStyles['token-editor-field-value'])}\n              index={index}\n            >\n              {renderValue(index)}\n            </TokenEditorField>\n          </div>\n\n          <div className={styles['token-editor-grouped-grid-cell']}>\n            {supportsGroups && (\n              <div className={styles['token-editor-grouped-remove-token']}>\n                <TokenEditorRemoveActions\n                  isNarrow={isNarrow}\n                  ariaLabel={i18nStrings.tokenEditorTokenActionsLabel(token)}\n                  disabled={tokens.length === 1}\n                  items={[\n                    { id: 'remove', text: i18nStrings.tokenEditorTokenRemoveLabel(token) },\n                    { id: 'remove-from-group', text: i18nStrings.tokenEditorTokenRemoveFromGroupLabel(token) },\n                  ]}\n                  onItemClick={itemId => {\n                    switch (itemId) {\n                      case 'remove':\n                        return onRemove(index);\n                      case 'remove-from-group':\n                        return onRemoveFromGroup(index);\n                    }\n                  }}\n                  index={index}\n                />\n              </div>\n            )}\n          </div>\n        </div>\n      ))}\n    </div>\n  );\n}\n\nfunction TokenEditorField({\n  isNarrow,\n  label,\n  labelId,\n  children,\n  className,\n  index,\n}: {\n  isNarrow: boolean;\n  label: React.ReactNode;\n  labelId: string;\n  children: React.ReactNode;\n  className: string;\n  index: number;\n}) {\n  return isNarrow ? (\n    <InternalFormField label={label} className={className} data-testindex={index}>\n      {children}\n    </InternalFormField>\n  ) : (\n    <FormFieldContext.Provider value={{ ariaLabelledby: labelId }}>\n      <InternalFormField className={className} data-testindex={index}>\n        {children}\n      </InternalFormField>\n    </FormFieldContext.Provider>\n  );\n}\n\nfunction TokenEditorRemoveActions({\n  isNarrow,\n  ariaLabel,\n  disabled,\n  items,\n  onItemClick,\n  index,\n}: {\n  isNarrow: boolean;\n  ariaLabel: string;\n  disabled: boolean;\n  items: ButtonDropdownProps.Item[];\n  onItemClick: (itemId: string) => void;\n  index: number;\n}) {\n  return isNarrow ? (\n    <InternalButtonDropdown\n      variant=\"normal\"\n      ariaLabel={ariaLabel}\n      items={items.slice(1)}\n      onItemClick={({ detail }) => onItemClick(detail.id)}\n      disabled={disabled}\n      mainAction={{ text: items[0].text, onClick: () => onItemClick(items[0].id), disabled }}\n      className={testUtilStyles['token-editor-token-remove-actions']}\n      data-testindex={index}\n    />\n  ) : (\n    <InternalButtonDropdown\n      variant=\"icon\"\n      ariaLabel={ariaLabel}\n      items={items}\n      onItemClick={({ detail }) => onItemClick(detail.id)}\n      disabled={disabled}\n      className={testUtilStyles['token-editor-token-remove-actions']}\n      data-testindex={index}\n    />\n  );\n}\n"]}