@cloudscape-design/components-themeable 3.0.730 → 3.0.731
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/lib/internal/manifest.json +1 -1
- package/lib/internal/scss/property-filter/styles.scss +13 -23
- package/lib/internal/scss/tiles/analytics-metadata/styles.scss +8 -0
- package/lib/internal/template/internal/environment.js +1 -1
- package/lib/internal/template/internal/environment.json +1 -1
- package/lib/internal/template/property-filter/styles.css.js +38 -46
- package/lib/internal/template/property-filter/styles.scoped.css +44 -60
- package/lib/internal/template/property-filter/styles.selectors.js +38 -46
- package/lib/internal/template/property-filter/token-editor-inputs.d.ts +37 -0
- package/lib/internal/template/property-filter/token-editor-inputs.d.ts.map +1 -0
- package/lib/internal/template/property-filter/token-editor-inputs.js +59 -0
- package/lib/internal/template/property-filter/token-editor-inputs.js.map +1 -0
- package/lib/internal/template/property-filter/token-editor.d.ts +18 -39
- package/lib/internal/template/property-filter/token-editor.d.ts.map +1 -1
- package/lib/internal/template/property-filter/token-editor.js +106 -88
- package/lib/internal/template/property-filter/token-editor.js.map +1 -1
- package/lib/internal/template/property-filter/token.d.ts.map +1 -1
- package/lib/internal/template/property-filter/token.js +9 -1
- package/lib/internal/template/property-filter/token.js.map +1 -1
- package/lib/internal/template/radio-group/radio-button.d.ts +1 -0
- package/lib/internal/template/radio-group/radio-button.d.ts.map +1 -1
- package/lib/internal/template/radio-group/radio-button.js +2 -2
- package/lib/internal/template/radio-group/radio-button.js.map +1 -1
- package/lib/internal/template/tiles/analytics-metadata/interfaces.d.ts +14 -0
- package/lib/internal/template/tiles/analytics-metadata/interfaces.d.ts.map +1 -0
- package/lib/internal/template/tiles/analytics-metadata/interfaces.js +4 -0
- package/lib/internal/template/tiles/analytics-metadata/interfaces.js.map +1 -0
- package/lib/internal/template/tiles/analytics-metadata/styles.css.js +6 -0
- package/lib/internal/template/tiles/analytics-metadata/styles.scoped.css +7 -0
- package/lib/internal/template/tiles/analytics-metadata/styles.selectors.js +7 -0
- package/lib/internal/template/tiles/index.d.ts.map +1 -1
- package/lib/internal/template/tiles/index.js +8 -1
- package/lib/internal/template/tiles/index.js.map +1 -1
- package/lib/internal/template/tiles/internal.d.ts.map +1 -1
- package/lib/internal/template/tiles/internal.js +12 -1
- package/lib/internal/template/tiles/internal.js.map +1 -1
- package/lib/internal/template/tiles/tile.d.ts.map +1 -1
- package/lib/internal/template/tiles/tile.js +8 -4
- package/lib/internal/template/tiles/tile.js.map +1 -1
- package/lib/internal/template/toggle/analytics-metadata/interfaces.d.ts +13 -0
- package/lib/internal/template/toggle/analytics-metadata/interfaces.d.ts.map +1 -0
- package/lib/internal/template/toggle/analytics-metadata/interfaces.js +4 -0
- package/lib/internal/template/toggle/analytics-metadata/interfaces.js.map +1 -0
- package/lib/internal/template/toggle/index.js +1 -1
- package/lib/internal/template/toggle/index.js.map +1 -1
- package/lib/internal/template/toggle/internal.d.ts +4 -1
- package/lib/internal/template/toggle/internal.d.ts.map +1 -1
- package/lib/internal/template/toggle/internal.js +16 -2
- package/lib/internal/template/toggle/internal.js.map +1 -1
- package/package.json +1 -1
- package/lib/internal/template/property-filter/token-editor-grouped.d.ts +0 -32
- package/lib/internal/template/property-filter/token-editor-grouped.d.ts.map +0 -1
- package/lib/internal/template/property-filter/token-editor-grouped.js +0 -114
- package/lib/internal/template/property-filter/token-editor-grouped.js.map +0 -1
|
@@ -1,114 +0,0 @@
|
|
|
1
|
-
// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
|
|
2
|
-
// SPDX-License-Identifier: Apache-2.0
|
|
3
|
-
import React from 'react';
|
|
4
|
-
import clsx from 'clsx';
|
|
5
|
-
import InternalButton from '../button/internal';
|
|
6
|
-
import InternalButtonDropdown from '../button-dropdown/internal';
|
|
7
|
-
import InternalFormField from '../form-field/internal';
|
|
8
|
-
import { FormFieldContext } from '../internal/context/form-field-context';
|
|
9
|
-
import { useContainerBreakpoints } from '../internal/hooks/container-queries';
|
|
10
|
-
import { useUniqueId } from '../internal/hooks/use-unique-id';
|
|
11
|
-
import { getAllowedOperators } from './controller';
|
|
12
|
-
import { getFormattedToken } from './i18n-utils';
|
|
13
|
-
import { OperatorInput, PropertyInput, ValueInput } from './token-editor';
|
|
14
|
-
import styles from './styles.css.js';
|
|
15
|
-
import testUtilStyles from './test-classes/styles.css.js';
|
|
16
|
-
export function TokenEditor({ supportsGroups, asyncProperties, asyncProps, customGroupsText, freeTextFiltering, filteringProperties, filteringOptions, i18nStrings, onLoadItems, onSubmit, onDismiss, standaloneTokens, onChangeStandalone, tempGroup, onChangeTempGroup, }) {
|
|
17
|
-
const groups = tempGroup.map((temporaryToken, index) => {
|
|
18
|
-
const setTemporaryToken = (newToken) => {
|
|
19
|
-
const copy = [...tempGroup];
|
|
20
|
-
copy[index] = newToken;
|
|
21
|
-
onChangeTempGroup(copy);
|
|
22
|
-
};
|
|
23
|
-
const property = temporaryToken.property;
|
|
24
|
-
const onChangePropertyKey = (newPropertyKey) => {
|
|
25
|
-
var _a;
|
|
26
|
-
const filteringProperty = filteringProperties.reduce((acc, property) => (property.propertyKey === newPropertyKey ? property : acc), undefined);
|
|
27
|
-
const allowedOperators = filteringProperty ? getAllowedOperators(filteringProperty) : freeTextFiltering.operators;
|
|
28
|
-
const operator = temporaryToken.operator && allowedOperators.indexOf(temporaryToken.operator) !== -1
|
|
29
|
-
? temporaryToken.operator
|
|
30
|
-
: allowedOperators[0];
|
|
31
|
-
const matchedProperty = (_a = filteringProperties.find(property => property.propertyKey === newPropertyKey)) !== null && _a !== void 0 ? _a : null;
|
|
32
|
-
setTemporaryToken(Object.assign(Object.assign({}, temporaryToken), { property: matchedProperty, operator, value: null }));
|
|
33
|
-
};
|
|
34
|
-
const operator = temporaryToken.operator;
|
|
35
|
-
const onChangeOperator = (newOperator) => {
|
|
36
|
-
setTemporaryToken(Object.assign(Object.assign({}, temporaryToken), { operator: newOperator }));
|
|
37
|
-
};
|
|
38
|
-
const value = temporaryToken.value;
|
|
39
|
-
const onChangeValue = (newValue) => {
|
|
40
|
-
setTemporaryToken(Object.assign(Object.assign({}, temporaryToken), { value: newValue }));
|
|
41
|
-
};
|
|
42
|
-
return { token: temporaryToken, property, onChangePropertyKey, operator, onChangeOperator, value, onChangeValue };
|
|
43
|
-
});
|
|
44
|
-
return (React.createElement("div", { className: styles['token-editor-grouped'] },
|
|
45
|
-
React.createElement(TokenEditorFields, { supportsGroups: supportsGroups, tokens: groups.map(group => getFormattedToken(group.token, i18nStrings)), onRemove: index => {
|
|
46
|
-
const updated = tempGroup.filter((_, existingIndex) => existingIndex !== index);
|
|
47
|
-
onChangeTempGroup(updated);
|
|
48
|
-
}, onRemoveFromGroup: index => {
|
|
49
|
-
const removedToken = tempGroup[index];
|
|
50
|
-
const updated = tempGroup.filter((_, existingIndex) => existingIndex !== index);
|
|
51
|
-
onChangeTempGroup(updated);
|
|
52
|
-
onChangeStandalone([...standaloneTokens, removedToken]);
|
|
53
|
-
}, 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 }),
|
|
54
|
-
supportsGroups && (React.createElement("div", { className: clsx(styles['token-editor-grouped-add-token'], testUtilStyles['token-editor-token-add-actions']) },
|
|
55
|
-
React.createElement(InternalButtonDropdown, { variant: "normal", ariaLabel: i18nStrings.tokenEditorAddTokenActionsLabel, items: standaloneTokens.map((token, index) => ({
|
|
56
|
-
id: index.toString(),
|
|
57
|
-
text: i18nStrings.tokenEditorAddExistingTokenLabel(getFormattedToken(token, i18nStrings)),
|
|
58
|
-
})), onItemClick: ({ detail }) => {
|
|
59
|
-
const index = parseInt(detail.id);
|
|
60
|
-
if (!isNaN(index) && standaloneTokens[index]) {
|
|
61
|
-
const addedToken = standaloneTokens[index];
|
|
62
|
-
const updated = standaloneTokens.filter((_, existingIndex) => existingIndex !== index);
|
|
63
|
-
onChangeStandalone(updated);
|
|
64
|
-
onChangeTempGroup([...tempGroup, addedToken]);
|
|
65
|
-
}
|
|
66
|
-
}, disabled: standaloneTokens.length === 0, mainAction: {
|
|
67
|
-
text: i18nStrings.tokenEditorAddNewTokenLabel,
|
|
68
|
-
onClick: () => onChangeTempGroup([...tempGroup, { property: null, operator: ':', value: null }]),
|
|
69
|
-
} }))),
|
|
70
|
-
React.createElement("div", { className: styles['token-editor-grouped-actions'] },
|
|
71
|
-
React.createElement(InternalButton, { formAction: "none", variant: "link", className: clsx(styles['token-editor-grouped-cancel'], testUtilStyles['token-editor-cancel']), onClick: onDismiss }, i18nStrings.cancelActionText),
|
|
72
|
-
React.createElement(InternalButton, { className: clsx(styles['token-editor-grouped-submit'], testUtilStyles['token-editor-submit']), formAction: "none", onClick: onSubmit }, i18nStrings.applyActionText))));
|
|
73
|
-
}
|
|
74
|
-
function TokenEditorFields({ tokens, supportsGroups, onRemove, onRemoveFromGroup, renderProperty, renderOperator, renderValue, i18nStrings, }) {
|
|
75
|
-
const [breakpoint, breakpointRef] = useContainerBreakpoints(['xs']);
|
|
76
|
-
const isNarrow = breakpoint === 'default';
|
|
77
|
-
const propertyLabelId = useUniqueId();
|
|
78
|
-
const operatorLabelId = useUniqueId();
|
|
79
|
-
const valueLabelId = useUniqueId();
|
|
80
|
-
const headers = (React.createElement("div", { className: styles['token-editor-grouped-grid-group'] },
|
|
81
|
-
React.createElement("div", { id: propertyLabelId, className: styles['token-editor-grouped-grid-header'] }, i18nStrings.propertyText),
|
|
82
|
-
React.createElement("div", { id: operatorLabelId, className: styles['token-editor-grouped-grid-header'] }, i18nStrings.operatorText),
|
|
83
|
-
React.createElement("div", { id: valueLabelId, className: styles['token-editor-grouped-grid-header'] }, i18nStrings.valueText),
|
|
84
|
-
React.createElement("div", { className: styles['token-editor-grouped-grid-header'] })));
|
|
85
|
-
return (React.createElement("div", { className: clsx(styles['token-editor-grouped-grid'], isNarrow && styles['token-editor-narrow']), ref: breakpointRef },
|
|
86
|
-
!isNarrow && headers,
|
|
87
|
-
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'] },
|
|
88
|
-
React.createElement("div", { className: styles['token-editor-grouped-grid-cell'] },
|
|
89
|
-
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))),
|
|
90
|
-
React.createElement("div", { className: styles['token-editor-grouped-grid-cell'] },
|
|
91
|
-
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))),
|
|
92
|
-
React.createElement("div", { className: styles['token-editor-grouped-grid-cell'] },
|
|
93
|
-
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))),
|
|
94
|
-
React.createElement("div", { className: styles['token-editor-grouped-grid-cell'] }, supportsGroups && (React.createElement("div", { className: styles['token-editor-grouped-remove-token'] },
|
|
95
|
-
React.createElement(TokenEditorRemoveActions, { isNarrow: isNarrow, ariaLabel: i18nStrings.tokenEditorTokenActionsLabel(token), disabled: tokens.length === 1, items: [
|
|
96
|
-
{ id: 'remove', text: i18nStrings.tokenEditorTokenRemoveLabel(token) },
|
|
97
|
-
{ id: 'remove-from-group', text: i18nStrings.tokenEditorTokenRemoveFromGroupLabel(token) },
|
|
98
|
-
], onItemClick: itemId => {
|
|
99
|
-
switch (itemId) {
|
|
100
|
-
case 'remove':
|
|
101
|
-
return onRemove(index);
|
|
102
|
-
case 'remove-from-group':
|
|
103
|
-
return onRemoveFromGroup(index);
|
|
104
|
-
}
|
|
105
|
-
}, index: index })))))))));
|
|
106
|
-
}
|
|
107
|
-
function TokenEditorField({ isNarrow, label, labelId, children, className, index, }) {
|
|
108
|
-
return isNarrow ? (React.createElement(InternalFormField, { label: label, className: className, "data-testindex": index }, children)) : (React.createElement(FormFieldContext.Provider, { value: { ariaLabelledby: labelId } },
|
|
109
|
-
React.createElement(InternalFormField, { className: className, "data-testindex": index }, children)));
|
|
110
|
-
}
|
|
111
|
-
function TokenEditorRemoveActions({ isNarrow, ariaLabel, disabled, items, onItemClick, index, }) {
|
|
112
|
-
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 }));
|
|
113
|
-
}
|
|
114
|
-
//# sourceMappingURL=token-editor-grouped.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"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"]}
|