@cloudscape-design/components 3.0.714 → 3.0.716

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.
Files changed (53) hide show
  1. package/internal/environment.js +1 -1
  2. package/internal/environment.json +1 -1
  3. package/internal/manifest.json +1 -1
  4. package/package.json +1 -1
  5. package/property-filter/styles.css.js +38 -46
  6. package/property-filter/styles.scoped.css +44 -60
  7. package/property-filter/styles.selectors.js +38 -46
  8. package/property-filter/token-editor-inputs.d.ts +37 -0
  9. package/property-filter/token-editor-inputs.d.ts.map +1 -0
  10. package/property-filter/token-editor-inputs.js +59 -0
  11. package/property-filter/token-editor-inputs.js.map +1 -0
  12. package/property-filter/token-editor.d.ts +18 -39
  13. package/property-filter/token-editor.d.ts.map +1 -1
  14. package/property-filter/token-editor.js +106 -88
  15. package/property-filter/token-editor.js.map +1 -1
  16. package/property-filter/token.d.ts.map +1 -1
  17. package/property-filter/token.js +9 -1
  18. package/property-filter/token.js.map +1 -1
  19. package/radio-group/radio-button.d.ts +1 -0
  20. package/radio-group/radio-button.d.ts.map +1 -1
  21. package/radio-group/radio-button.js +2 -2
  22. package/radio-group/radio-button.js.map +1 -1
  23. package/test-utils/tsconfig.tsbuildinfo +1 -1
  24. package/tiles/analytics-metadata/interfaces.d.ts +14 -0
  25. package/tiles/analytics-metadata/interfaces.d.ts.map +1 -0
  26. package/tiles/analytics-metadata/interfaces.js +4 -0
  27. package/tiles/analytics-metadata/interfaces.js.map +1 -0
  28. package/tiles/analytics-metadata/styles.css.js +6 -0
  29. package/tiles/analytics-metadata/styles.scoped.css +7 -0
  30. package/tiles/analytics-metadata/styles.selectors.js +7 -0
  31. package/tiles/index.d.ts.map +1 -1
  32. package/tiles/index.js +8 -1
  33. package/tiles/index.js.map +1 -1
  34. package/tiles/internal.d.ts.map +1 -1
  35. package/tiles/internal.js +12 -1
  36. package/tiles/internal.js.map +1 -1
  37. package/tiles/tile.d.ts.map +1 -1
  38. package/tiles/tile.js +8 -4
  39. package/tiles/tile.js.map +1 -1
  40. package/toggle/analytics-metadata/interfaces.d.ts +13 -0
  41. package/toggle/analytics-metadata/interfaces.d.ts.map +1 -0
  42. package/toggle/analytics-metadata/interfaces.js +4 -0
  43. package/toggle/analytics-metadata/interfaces.js.map +1 -0
  44. package/toggle/index.js +1 -1
  45. package/toggle/index.js.map +1 -1
  46. package/toggle/internal.d.ts +4 -1
  47. package/toggle/internal.d.ts.map +1 -1
  48. package/toggle/internal.js +16 -2
  49. package/toggle/internal.js.map +1 -1
  50. package/property-filter/token-editor-grouped.d.ts +0 -32
  51. package/property-filter/token-editor-grouped.d.ts.map +0 -1
  52. package/property-filter/token-editor-grouped.js +0 -114
  53. package/property-filter/token-editor-grouped.js.map +0 -1
@@ -0,0 +1 @@
1
+ {"version":3,"file":"interfaces.d.ts","sourceRoot":"","sources":["../../../../src/tiles/analytics-metadata/interfaces.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,eAAe,EAAE,MAAM,kEAAkE,CAAC;AAEnG,MAAM,WAAW,qCAAqC;IACpD,MAAM,EAAE,OAAO,CAAC;IAChB,MAAM,EAAE;QACN,KAAK,EAAE,MAAM,CAAC;QACd,QAAQ,EAAE,MAAM,CAAC;QACjB,KAAK,EAAE,MAAM,CAAC;KACf,CAAC;CACH;AAED,MAAM,WAAW,wCAAwC;IACvD,IAAI,EAAE,aAAa,CAAC;IACpB,KAAK,EAAE,MAAM,GAAG,eAAe,CAAC;CACjC"}
@@ -0,0 +1,4 @@
1
+ // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
2
+ // SPDX-License-Identifier: Apache-2.0
3
+ export {};
4
+ //# sourceMappingURL=interfaces.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"interfaces.js","sourceRoot":"","sources":["../../../../src/tiles/analytics-metadata/interfaces.ts"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport { LabelIdentifier } from '@cloudscape-design/component-toolkit/internal/analytics-metadata';\n\nexport interface GeneratedAnalyticsMetadataTilesSelect {\n action: 'click';\n detail: {\n label: string;\n position: string;\n value: string;\n };\n}\n\nexport interface GeneratedAnalyticsMetadataTilesComponent {\n name: 'awsui.Tiles';\n label: string | LabelIdentifier;\n}\n"]}
@@ -0,0 +1,6 @@
1
+
2
+ import './styles.scoped.css';
3
+ export default {
4
+ "radio-button": "awsui_radio-button_feeqa_1rmzd_5"
5
+ };
6
+
@@ -0,0 +1,7 @@
1
+ /*
2
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
3
+ SPDX-License-Identifier: Apache-2.0
4
+ */
5
+ .awsui_radio-button_feeqa_1rmzd_5:not(#\9) {
6
+ /* used in analytics metadata */
7
+ }
@@ -0,0 +1,7 @@
1
+
2
+ // es-module interop with Babel and Typescript
3
+ Object.defineProperty(exports, "__esModule", { value: true });
4
+ module.exports.default = {
5
+ "radio-button": "awsui_radio-button_feeqa_1rmzd_5"
6
+ };
7
+
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/tiles/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAG1C,OAAO,EAAE,UAAU,EAAE,CAAC;AAEtB,QAAA,MAAM,KAAK,mFAKT,CAAC;AAGH,eAAe,KAAK,CAAC"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/tiles/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAO1B,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAG1C,OAAO,EAAE,UAAU,EAAE,CAAC;AAEtB,QAAA,MAAM,KAAK,mFAkBT,CAAC;AAGH,eAAe,KAAK,CAAC"}
package/tiles/index.js CHANGED
@@ -1,6 +1,7 @@
1
1
  // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
2
2
  // SPDX-License-Identifier: Apache-2.0
3
3
  import React from 'react';
4
+ import { getAnalyticsMetadataAttribute } from '@cloudscape-design/component-toolkit/internal/analytics-metadata';
4
5
  import useBaseComponent from '../internal/hooks/use-base-component';
5
6
  import { applyDisplayName } from '../internal/utils/apply-display-name';
6
7
  import InternalTiles from './internal';
@@ -8,7 +9,13 @@ const Tiles = React.forwardRef((props, ref) => {
8
9
  const baseComponentProps = useBaseComponent('Tiles', {
9
10
  props: { columns: props.columns },
10
11
  });
11
- return React.createElement(InternalTiles, Object.assign({ ref: ref }, props, baseComponentProps));
12
+ const componentAnalyticsMetadata = {
13
+ name: 'awsui.Tiles',
14
+ label: '',
15
+ };
16
+ return (React.createElement(InternalTiles, Object.assign({ ref: ref }, props, baseComponentProps, getAnalyticsMetadataAttribute({
17
+ component: componentAnalyticsMetadata,
18
+ }))));
12
19
  });
13
20
  applyDisplayName(Tiles, 'Tiles');
14
21
  export default Tiles;
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/tiles/index.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,gBAAgB,MAAM,sCAAsC,CAAC;AACpE,OAAO,EAAE,gBAAgB,EAAE,MAAM,sCAAsC,CAAC;AAExE,OAAO,aAAa,MAAM,YAAY,CAAC;AAIvC,MAAM,KAAK,GAAG,KAAK,CAAC,UAAU,CAAC,CAAC,KAAiB,EAAE,GAA8B,EAAE,EAAE;IACnF,MAAM,kBAAkB,GAAG,gBAAgB,CAAC,OAAO,EAAE;QACnD,KAAK,EAAE,EAAE,OAAO,EAAE,KAAK,CAAC,OAAO,EAAE;KAClC,CAAC,CAAC;IACH,OAAO,oBAAC,aAAa,kBAAC,GAAG,EAAE,GAAG,IAAM,KAAK,EAAM,kBAAkB,EAAI,CAAC;AACxE,CAAC,CAAC,CAAC;AAEH,gBAAgB,CAAC,KAAK,EAAE,OAAO,CAAC,CAAC;AACjC,eAAe,KAAK,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React from 'react';\n\nimport useBaseComponent from '../internal/hooks/use-base-component';\nimport { applyDisplayName } from '../internal/utils/apply-display-name';\nimport { TilesProps } from './interfaces';\nimport InternalTiles from './internal';\n\nexport { TilesProps };\n\nconst Tiles = React.forwardRef((props: TilesProps, ref: React.Ref<TilesProps.Ref>) => {\n const baseComponentProps = useBaseComponent('Tiles', {\n props: { columns: props.columns },\n });\n return <InternalTiles ref={ref} {...props} {...baseComponentProps} />;\n});\n\napplyDisplayName(Tiles, 'Tiles');\nexport default Tiles;\n"]}
1
+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/tiles/index.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,6BAA6B,EAAE,MAAM,kEAAkE,CAAC;AAEjH,OAAO,gBAAgB,MAAM,sCAAsC,CAAC;AACpE,OAAO,EAAE,gBAAgB,EAAE,MAAM,sCAAsC,CAAC;AAGxE,OAAO,aAAa,MAAM,YAAY,CAAC;AAIvC,MAAM,KAAK,GAAG,KAAK,CAAC,UAAU,CAAC,CAAC,KAAiB,EAAE,GAA8B,EAAE,EAAE;IACnF,MAAM,kBAAkB,GAAG,gBAAgB,CAAC,OAAO,EAAE;QACnD,KAAK,EAAE,EAAE,OAAO,EAAE,KAAK,CAAC,OAAO,EAAE;KAClC,CAAC,CAAC;IACH,MAAM,0BAA0B,GAA6C;QAC3E,IAAI,EAAE,aAAa;QACnB,KAAK,EAAE,EAAE;KACV,CAAC;IACF,OAAO,CACL,oBAAC,aAAa,kBACZ,GAAG,EAAE,GAAG,IACJ,KAAK,EACL,kBAAkB,EAClB,6BAA6B,CAAC;QAChC,SAAS,EAAE,0BAA0B;KACtC,CAAC,EACF,CACH,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,gBAAgB,CAAC,KAAK,EAAE,OAAO,CAAC,CAAC;AACjC,eAAe,KAAK,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React from 'react';\n\nimport { getAnalyticsMetadataAttribute } from '@cloudscape-design/component-toolkit/internal/analytics-metadata';\n\nimport useBaseComponent from '../internal/hooks/use-base-component';\nimport { applyDisplayName } from '../internal/utils/apply-display-name';\nimport { GeneratedAnalyticsMetadataTilesComponent } from './analytics-metadata/interfaces';\nimport { TilesProps } from './interfaces';\nimport InternalTiles from './internal';\n\nexport { TilesProps };\n\nconst Tiles = React.forwardRef((props: TilesProps, ref: React.Ref<TilesProps.Ref>) => {\n const baseComponentProps = useBaseComponent('Tiles', {\n props: { columns: props.columns },\n });\n const componentAnalyticsMetadata: GeneratedAnalyticsMetadataTilesComponent = {\n name: 'awsui.Tiles',\n label: '',\n };\n return (\n <InternalTiles\n ref={ref}\n {...props}\n {...baseComponentProps}\n {...getAnalyticsMetadataAttribute({\n component: componentAnalyticsMetadata,\n })}\n />\n );\n});\n\napplyDisplayName(Tiles, 'Tiles');\nexport default Tiles;\n"]}
@@ -1 +1 @@
1
- {"version":3,"file":"internal.d.ts","sourceRoot":"","sources":["../../../src/tiles/internal.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAO1B,OAAO,EAAE,0BAA0B,EAAE,MAAM,sCAAsC,CAAC;AAGlF,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAS1C,QAAA,MAAM,aAAa,qHA0DlB,CAAC;AAqBF,eAAe,aAAa,CAAC"}
1
+ {"version":3,"file":"internal.d.ts","sourceRoot":"","sources":["../../../src/tiles/internal.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAS1B,OAAO,EAAE,0BAA0B,EAAE,MAAM,sCAAsC,CAAC;AAIlF,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAU1C,QAAA,MAAM,aAAa,qHAoElB,CAAC;AAqBF,eAAe,aAAa,CAAC"}
package/tiles/internal.js CHANGED
@@ -3,6 +3,7 @@ import { __rest } from "tslib";
3
3
  // SPDX-License-Identifier: Apache-2.0
4
4
  import React from 'react';
5
5
  import clsx from 'clsx';
6
+ import { getAnalyticsMetadataAttribute } from '@cloudscape-design/component-toolkit/internal/analytics-metadata';
6
7
  import { getBaseProps } from '../internal/base-component';
7
8
  import { useFormFieldContext } from '../internal/context/form-field-context';
8
9
  import { useContainerBreakpoints } from '../internal/hooks/container-queries';
@@ -10,6 +11,7 @@ import useRadioGroupForwardFocus from '../internal/hooks/forward-focus/radio-gro
10
11
  import { useMergeRefs } from '../internal/hooks/use-merge-refs';
11
12
  import { useUniqueId } from '../internal/hooks/use-unique-id';
12
13
  import { Tile } from './tile';
14
+ import analyticsSelectors from './analytics-metadata/styles.css.js';
13
15
  import styles from './styles.css.js';
14
16
  const COLUMN_TRIGGERS = ['default', 'xxs', 'xs'];
15
17
  const InternalTiles = React.forwardRef((_a, ref) => {
@@ -23,7 +25,16 @@ const InternalTiles = React.forwardRef((_a, ref) => {
23
25
  const columnCount = getColumnCount(items, columns);
24
26
  return (React.createElement("div", Object.assign({ role: "radiogroup", "aria-label": ariaLabel, "aria-labelledby": ariaLabelledby, "aria-describedby": ariaDescribedby, "aria-required": ariaRequired, "aria-controls": ariaControls, "aria-readonly": readOnly ? 'true' : undefined }, baseProps, { className: clsx(baseProps.className, styles.root), ref: mergedRef }),
25
27
  React.createElement("div", { className: clsx(styles.columns, styles[`column-${columnCount}`]) }, items &&
26
- items.map((item, index) => (React.createElement(Tile, { ref: index === tileRefIndex ? tileRef : undefined, key: item.value, item: item, selected: item.value === value, name: name || generatedName, breakpoint: breakpoint, onChange: onChange, readOnly: readOnly }))))));
28
+ items.map((item, index) => (React.createElement(Tile, Object.assign({ ref: index === tileRefIndex ? tileRef : undefined, key: item.value, item: item, selected: item.value === value, name: name || generatedName, breakpoint: breakpoint, onChange: onChange, readOnly: readOnly }, (!item.disabled && !readOnly
29
+ ? getAnalyticsMetadataAttribute({
30
+ action: 'select',
31
+ detail: {
32
+ position: `${index + 1}`,
33
+ value: item.value,
34
+ label: `.${analyticsSelectors['radio-button']}`,
35
+ },
36
+ })
37
+ : {}))))))));
27
38
  });
28
39
  function getColumnCount(items, columns) {
29
40
  if (columns) {
@@ -1 +1 @@
1
- {"version":3,"file":"internal.js","sourceRoot":"","sources":["../../../src/tiles/internal.tsx"],"names":[],"mappings":";AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,IAAI,MAAM,MAAM,CAAC;AAExB,OAAO,EAAE,YAAY,EAAE,MAAM,4BAA4B,CAAC;AAC1D,OAAO,EAAE,mBAAmB,EAAE,MAAM,wCAAwC,CAAC;AAC7E,OAAO,EAAE,uBAAuB,EAAE,MAAM,qCAAqC,CAAC;AAC9E,OAAO,yBAAyB,MAAM,6CAA6C,CAAC;AAEpF,OAAO,EAAE,YAAY,EAAE,MAAM,kCAAkC,CAAC;AAChE,OAAO,EAAE,WAAW,EAAE,MAAM,iCAAiC,CAAC;AAE9D,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAC;AAE9B,OAAO,MAAM,MAAM,iBAAiB,CAAC;AAErC,MAAM,eAAe,GAA4B,CAAC,SAAS,EAAE,KAAK,EAAE,IAAI,CAAC,CAAC;AAI1E,MAAM,aAAa,GAAG,KAAK,CAAC,UAAU,CACpC,CACE,EAYqB,EACrB,GAA8B,EAC9B,EAAE;QAdF,EACE,IAAI,EACJ,KAAK,EACL,KAAK,EACL,SAAS,EACT,YAAY,EACZ,YAAY,EACZ,OAAO,EACP,QAAQ,EACR,QAAQ,EACR,iBAAiB,GAAG,IAAI,OAEL,EADhB,IAAI,cAXT,+HAYC,CADQ;IAIT,MAAM,SAAS,GAAG,YAAY,CAAC,IAAI,CAAC,CAAC;IACrC,MAAM,EAAE,eAAe,EAAE,cAAc,EAAE,GAAG,mBAAmB,CAAC,IAAI,CAAC,CAAC;IACtE,MAAM,aAAa,GAAG,WAAW,CAAC,cAAc,CAAC,CAAC;IAElD,MAAM,CAAC,OAAO,EAAE,YAAY,CAAC,GAAG,yBAAyB,CAAC,GAAG,EAAE,KAAK,EAAE,KAAK,CAAC,CAAC;IAC7E,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAG,uBAAuB,CAAC,eAAe,CAAC,CAAC;IAC7E,MAAM,SAAS,GAAG,YAAY,CAAC,aAAa,EAAE,iBAAiB,CAAC,CAAC;IAEjE,MAAM,WAAW,GAAG,cAAc,CAAC,KAAK,EAAE,OAAO,CAAC,CAAC;IAEnD,OAAO,CACL,2CACE,IAAI,EAAC,YAAY,gBACL,SAAS,qBACJ,cAAc,sBACb,eAAe,mBAClB,YAAY,mBACZ,YAAY,mBACZ,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,SAAS,IACxC,SAAS,IACb,SAAS,EAAE,IAAI,CAAC,SAAS,CAAC,SAAS,EAAE,MAAM,CAAC,IAAI,CAAC,EACjD,GAAG,EAAE,SAAS;QAEd,6BAAK,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,OAAO,EAAE,MAAM,CAAC,UAAU,WAAW,EAAE,CAAC,CAAC,IAClE,KAAK;YACJ,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,KAAK,EAAE,EAAE,CAAC,CACzB,oBAAC,IAAI,IACH,GAAG,EAAE,KAAK,KAAK,YAAY,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,SAAS,EACjD,GAAG,EAAE,IAAI,CAAC,KAAK,EACf,IAAI,EAAE,IAAI,EACV,QAAQ,EAAE,IAAI,CAAC,KAAK,KAAK,KAAK,EAC9B,IAAI,EAAE,IAAI,IAAI,aAAa,EAC3B,UAAU,EAAE,UAAU,EACtB,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,QAAQ,GAClB,CACH,CAAC,CACA,CACF,CACP,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,SAAS,cAAc,CACrB,KAA4D,EAC5D,OAA2B;IAE3B,IAAI,OAAO,EAAE;QACX,OAAO,OAAO,CAAC;KAChB;IAED,MAAM,MAAM,GAAG,KAAK,CAAC,CAAC,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC;IACxC,MAAM,aAAa,GAA2B;QAC5C,CAAC,EAAE,CAAC;QACJ,CAAC,EAAE,CAAC;QACJ,CAAC,EAAE,CAAC;QACJ,CAAC,EAAE,CAAC;QACJ,CAAC,EAAE,CAAC;KACL,CAAC;IACF,OAAO,aAAa,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC;AACpC,CAAC;AAED,eAAe,aAAa,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 { getBaseProps } from '../internal/base-component';\nimport { useFormFieldContext } from '../internal/context/form-field-context';\nimport { useContainerBreakpoints } from '../internal/hooks/container-queries';\nimport useRadioGroupForwardFocus from '../internal/hooks/forward-focus/radio-group';\nimport { InternalBaseComponentProps } from '../internal/hooks/use-base-component';\nimport { useMergeRefs } from '../internal/hooks/use-merge-refs';\nimport { useUniqueId } from '../internal/hooks/use-unique-id';\nimport { TilesProps } from './interfaces';\nimport { Tile } from './tile';\n\nimport styles from './styles.css.js';\n\nconst COLUMN_TRIGGERS: TilesProps.Breakpoint[] = ['default', 'xxs', 'xs'];\n\ntype InternalTilesProps = TilesProps & InternalBaseComponentProps;\n\nconst InternalTiles = React.forwardRef(\n (\n {\n name,\n value,\n items,\n ariaLabel,\n ariaRequired,\n ariaControls,\n columns,\n onChange,\n readOnly,\n __internalRootRef = null,\n ...rest\n }: InternalTilesProps,\n ref: React.Ref<TilesProps.Ref>\n ) => {\n const baseProps = getBaseProps(rest);\n const { ariaDescribedby, ariaLabelledby } = useFormFieldContext(rest);\n const generatedName = useUniqueId('awsui-tiles-');\n\n const [tileRef, tileRefIndex] = useRadioGroupForwardFocus(ref, items, value);\n const [breakpoint, breakpointRef] = useContainerBreakpoints(COLUMN_TRIGGERS);\n const mergedRef = useMergeRefs(breakpointRef, __internalRootRef);\n\n const columnCount = getColumnCount(items, columns);\n\n return (\n <div\n role=\"radiogroup\"\n aria-label={ariaLabel}\n aria-labelledby={ariaLabelledby}\n aria-describedby={ariaDescribedby}\n aria-required={ariaRequired}\n aria-controls={ariaControls}\n aria-readonly={readOnly ? 'true' : undefined}\n {...baseProps}\n className={clsx(baseProps.className, styles.root)}\n ref={mergedRef}\n >\n <div className={clsx(styles.columns, styles[`column-${columnCount}`])}>\n {items &&\n items.map((item, index) => (\n <Tile\n ref={index === tileRefIndex ? tileRef : undefined}\n key={item.value}\n item={item}\n selected={item.value === value}\n name={name || generatedName}\n breakpoint={breakpoint}\n onChange={onChange}\n readOnly={readOnly}\n />\n ))}\n </div>\n </div>\n );\n }\n);\n\nfunction getColumnCount(\n items: ReadonlyArray<TilesProps.TilesDefinition> | undefined,\n columns: number | undefined\n): number {\n if (columns) {\n return columns;\n }\n\n const nItems = items ? items.length : 0;\n const columnsLookup: Record<number, number> = {\n 0: 1,\n 1: 1,\n 2: 2,\n 4: 2,\n 8: 2,\n };\n return columnsLookup[nItems] || 3;\n}\n\nexport default InternalTiles;\n"]}
1
+ {"version":3,"file":"internal.js","sourceRoot":"","sources":["../../../src/tiles/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 from 'react';\nimport clsx from 'clsx';\n\nimport { getAnalyticsMetadataAttribute } from '@cloudscape-design/component-toolkit/internal/analytics-metadata';\n\nimport { getBaseProps } from '../internal/base-component';\nimport { useFormFieldContext } from '../internal/context/form-field-context';\nimport { useContainerBreakpoints } from '../internal/hooks/container-queries';\nimport useRadioGroupForwardFocus from '../internal/hooks/forward-focus/radio-group';\nimport { InternalBaseComponentProps } from '../internal/hooks/use-base-component';\nimport { useMergeRefs } from '../internal/hooks/use-merge-refs';\nimport { useUniqueId } from '../internal/hooks/use-unique-id';\nimport { GeneratedAnalyticsMetadataTilesSelect } from './analytics-metadata/interfaces';\nimport { TilesProps } from './interfaces';\nimport { Tile } from './tile';\n\nimport analyticsSelectors from './analytics-metadata/styles.css.js';\nimport styles from './styles.css.js';\n\nconst COLUMN_TRIGGERS: TilesProps.Breakpoint[] = ['default', 'xxs', 'xs'];\n\ntype InternalTilesProps = TilesProps & InternalBaseComponentProps;\n\nconst InternalTiles = React.forwardRef(\n (\n {\n name,\n value,\n items,\n ariaLabel,\n ariaRequired,\n ariaControls,\n columns,\n onChange,\n readOnly,\n __internalRootRef = null,\n ...rest\n }: InternalTilesProps,\n ref: React.Ref<TilesProps.Ref>\n ) => {\n const baseProps = getBaseProps(rest);\n const { ariaDescribedby, ariaLabelledby } = useFormFieldContext(rest);\n const generatedName = useUniqueId('awsui-tiles-');\n\n const [tileRef, tileRefIndex] = useRadioGroupForwardFocus(ref, items, value);\n const [breakpoint, breakpointRef] = useContainerBreakpoints(COLUMN_TRIGGERS);\n const mergedRef = useMergeRefs(breakpointRef, __internalRootRef);\n\n const columnCount = getColumnCount(items, columns);\n\n return (\n <div\n role=\"radiogroup\"\n aria-label={ariaLabel}\n aria-labelledby={ariaLabelledby}\n aria-describedby={ariaDescribedby}\n aria-required={ariaRequired}\n aria-controls={ariaControls}\n aria-readonly={readOnly ? 'true' : undefined}\n {...baseProps}\n className={clsx(baseProps.className, styles.root)}\n ref={mergedRef}\n >\n <div className={clsx(styles.columns, styles[`column-${columnCount}`])}>\n {items &&\n items.map((item, index) => (\n <Tile\n ref={index === tileRefIndex ? tileRef : undefined}\n key={item.value}\n item={item}\n selected={item.value === value}\n name={name || generatedName}\n breakpoint={breakpoint}\n onChange={onChange}\n readOnly={readOnly}\n {...(!item.disabled && !readOnly\n ? getAnalyticsMetadataAttribute({\n action: 'select',\n detail: {\n position: `${index + 1}`,\n value: item.value,\n label: `.${analyticsSelectors['radio-button']}`,\n } as Partial<GeneratedAnalyticsMetadataTilesSelect['detail']>,\n })\n : {})}\n />\n ))}\n </div>\n </div>\n );\n }\n);\n\nfunction getColumnCount(\n items: ReadonlyArray<TilesProps.TilesDefinition> | undefined,\n columns: number | undefined\n): number {\n if (columns) {\n return columns;\n }\n\n const nItems = items ? items.length : 0;\n const columnsLookup: Record<number, number> = {\n 0: 1,\n 1: 1,\n 2: 2,\n 4: 2,\n 8: 2,\n };\n return columnsLookup[nItems] || 3;\n}\n\nexport default InternalTiles;\n"]}
@@ -1 +1 @@
1
- {"version":3,"file":"tile.d.ts","sourceRoot":"","sources":["../../../src/tiles/tile.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAiB,MAAM,OAAO,CAAC;AAItC,OAAO,EAAE,uBAAuB,EAAE,MAAM,qCAAqC,CAAC;AAI9E,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAI1C,UAAU,SAAS;IACjB,IAAI,EAAE,UAAU,CAAC,eAAe,CAAC;IACjC,QAAQ,EAAE,OAAO,CAAC;IAClB,IAAI,EAAE,MAAM,CAAC;IACb,UAAU,EAAE,UAAU,CAAC,OAAO,uBAAuB,CAAC,CAAC,CAAC,CAAC,CAAC;IAC1D,QAAQ,EAAE,UAAU,CAAC,UAAU,CAAC,CAAC;IACjC,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,eAAO,MAAM,IAAI,oFA8ChB,CAAC"}
1
+ {"version":3,"file":"tile.d.ts","sourceRoot":"","sources":["../../../src/tiles/tile.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAiB,MAAM,OAAO,CAAC;AAMtC,OAAO,EAAE,uBAAuB,EAAE,MAAM,qCAAqC,CAAC;AAI9E,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAK1C,UAAU,SAAS;IACjB,IAAI,EAAE,UAAU,CAAC,eAAe,CAAC;IACjC,QAAQ,EAAE,OAAO,CAAC;IAClB,IAAI,EAAE,MAAM,CAAC;IACb,UAAU,EAAE,UAAU,CAAC,OAAO,uBAAuB,CAAC,CAAC,CAAC,CAAC,CAAC;IAC1D,QAAQ,EAAE,UAAU,CAAC,UAAU,CAAC,CAAC;IACjC,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,eAAO,MAAM,IAAI,oFAmDhB,CAAC"}
package/tiles/tile.js CHANGED
@@ -1,17 +1,21 @@
1
+ import { __rest } from "tslib";
1
2
  // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
2
3
  // SPDX-License-Identifier: Apache-2.0
3
4
  import React, { useRef } from 'react';
4
5
  import clsx from 'clsx';
6
+ import { copyAnalyticsMetadataAttribute } from '@cloudscape-design/component-toolkit/internal/analytics-metadata';
5
7
  import { fireNonCancelableEvent } from '../internal/events';
6
8
  import { useMergeRefs } from '../internal/hooks/use-merge-refs';
7
9
  import { useVisualRefresh } from '../internal/hooks/use-visual-mode';
8
10
  import RadioButton from '../radio-group/radio-button';
11
+ import analyticsSelectors from './analytics-metadata/styles.css.js';
9
12
  import styles from './styles.css.js';
10
- export const Tile = React.forwardRef(({ item, selected, name, breakpoint, onChange, readOnly }, forwardedRef) => {
13
+ export const Tile = React.forwardRef((_a, forwardedRef) => {
14
+ var { item, selected, name, breakpoint, onChange, readOnly } = _a, rest = __rest(_a, ["item", "selected", "name", "breakpoint", "onChange", "readOnly"]);
11
15
  const internalRef = useRef(null);
12
16
  const isVisualRefresh = useVisualRefresh();
13
17
  const mergedRef = useMergeRefs(internalRef, forwardedRef);
14
- return (React.createElement("div", { className: clsx(styles['tile-container'], { [styles['has-metadata']]: item.description || item.image }, { [styles.selected]: selected }, { [styles.disabled]: !!item.disabled }, { [styles.readonly]: readOnly }, { [styles.refresh]: isVisualRefresh }, styles[`breakpoint-${breakpoint}`]), "data-value": item.value, onClick: () => {
18
+ return (React.createElement("div", Object.assign({ className: clsx(styles['tile-container'], { [styles['has-metadata']]: item.description || item.image }, { [styles.selected]: selected }, { [styles.disabled]: !!item.disabled }, { [styles.readonly]: readOnly }, { [styles.refresh]: isVisualRefresh }, styles[`breakpoint-${breakpoint}`]), "data-value": item.value, onClick: () => {
15
19
  var _a;
16
20
  if (item.disabled || readOnly) {
17
21
  return;
@@ -20,9 +24,9 @@ export const Tile = React.forwardRef(({ item, selected, name, breakpoint, onChan
20
24
  if (!selected) {
21
25
  fireNonCancelableEvent(onChange, { value: item.value });
22
26
  }
23
- } },
27
+ } }, copyAnalyticsMetadataAttribute(rest)),
24
28
  React.createElement("div", { className: clsx(styles.control, { [styles['no-image']]: !item.image }) },
25
- React.createElement(RadioButton, { checked: selected, ref: mergedRef, name: name, value: item.value, label: item.label, description: item.description, disabled: item.disabled, controlId: item.controlId, readOnly: readOnly })),
29
+ React.createElement(RadioButton, { checked: selected, ref: mergedRef, name: name, value: item.value, label: item.label, description: item.description, disabled: item.disabled, controlId: item.controlId, readOnly: readOnly, className: analyticsSelectors['radio-button'] })),
26
30
  item.image && React.createElement("div", { className: clsx(styles.image, { [styles.disabled]: !!item.disabled }) }, item.image)));
27
31
  });
28
32
  //# sourceMappingURL=tile.js.map
package/tiles/tile.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"tile.js","sourceRoot":"","sources":["../../../src/tiles/tile.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,EAAE,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AACtC,OAAO,IAAI,MAAM,MAAM,CAAC;AAExB,OAAO,EAAE,sBAAsB,EAAE,MAAM,oBAAoB,CAAC;AAE5D,OAAO,EAAE,YAAY,EAAE,MAAM,kCAAkC,CAAC;AAChE,OAAO,EAAE,gBAAgB,EAAE,MAAM,mCAAmC,CAAC;AACrE,OAAO,WAAW,MAAM,6BAA6B,CAAC;AAGtD,OAAO,MAAM,MAAM,iBAAiB,CAAC;AAWrC,MAAM,CAAC,MAAM,IAAI,GAAG,KAAK,CAAC,UAAU,CAClC,CAAC,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAE,UAAU,EAAE,QAAQ,EAAE,QAAQ,EAAa,EAAE,YAAyC,EAAE,EAAE;IACjH,MAAM,WAAW,GAAG,MAAM,CAAmB,IAAI,CAAC,CAAC;IACnD,MAAM,eAAe,GAAG,gBAAgB,EAAE,CAAC;IAE3C,MAAM,SAAS,GAAG,YAAY,CAAC,WAAW,EAAE,YAAY,CAAC,CAAC;IAE1D,OAAO,CACL,6BACE,SAAS,EAAE,IAAI,CACb,MAAM,CAAC,gBAAgB,CAAC,EACxB,EAAE,CAAC,MAAM,CAAC,cAAc,CAAC,CAAC,EAAE,IAAI,CAAC,WAAW,IAAI,IAAI,CAAC,KAAK,EAAE,EAC5D,EAAE,CAAC,MAAM,CAAC,QAAQ,CAAC,EAAE,QAAQ,EAAE,EAC/B,EAAE,CAAC,MAAM,CAAC,QAAQ,CAAC,EAAE,CAAC,CAAC,IAAI,CAAC,QAAQ,EAAE,EACtC,EAAE,CAAC,MAAM,CAAC,QAAQ,CAAC,EAAE,QAAQ,EAAE,EAC/B,EAAE,CAAC,MAAM,CAAC,OAAO,CAAC,EAAE,eAAe,EAAE,EACrC,MAAM,CAAC,cAAc,UAAU,EAAE,CAAC,CACnC,gBACW,IAAI,CAAC,KAAK,EACtB,OAAO,EAAE,GAAG,EAAE;;YACZ,IAAI,IAAI,CAAC,QAAQ,IAAI,QAAQ,EAAE;gBAC7B,OAAO;aACR;YACD,MAAA,WAAW,CAAC,OAAO,0CAAE,KAAK,EAAE,CAAC;YAC7B,IAAI,CAAC,QAAQ,EAAE;gBACb,sBAAsB,CAAC,QAAQ,EAAE,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,CAAC,CAAC;aACzD;QACH,CAAC;QAED,6BAAK,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,OAAO,EAAE,EAAE,CAAC,MAAM,CAAC,UAAU,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,KAAK,EAAE,CAAC;YACzE,oBAAC,WAAW,IACV,OAAO,EAAE,QAAQ,EACjB,GAAG,EAAE,SAAS,EACd,IAAI,EAAE,IAAI,EACV,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,WAAW,EAAE,IAAI,CAAC,WAAW,EAC7B,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,QAAQ,EAAE,QAAQ,GAClB,CACE;QACL,IAAI,CAAC,KAAK,IAAI,6BAAK,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,KAAK,EAAE,EAAE,CAAC,MAAM,CAAC,QAAQ,CAAC,EAAE,CAAC,CAAC,IAAI,CAAC,QAAQ,EAAE,CAAC,IAAG,IAAI,CAAC,KAAK,CAAO,CACzG,CACP,CAAC;AACJ,CAAC,CACF,CAAC","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 { fireNonCancelableEvent } from '../internal/events';\nimport { useContainerBreakpoints } from '../internal/hooks/container-queries';\nimport { useMergeRefs } from '../internal/hooks/use-merge-refs';\nimport { useVisualRefresh } from '../internal/hooks/use-visual-mode';\nimport RadioButton from '../radio-group/radio-button';\nimport { TilesProps } from './interfaces';\n\nimport styles from './styles.css.js';\n\ninterface TileProps {\n item: TilesProps.TilesDefinition;\n selected: boolean;\n name: string;\n breakpoint: ReturnType<typeof useContainerBreakpoints>[0];\n onChange: TilesProps['onChange'];\n readOnly?: boolean;\n}\n\nexport const Tile = React.forwardRef(\n ({ item, selected, name, breakpoint, onChange, readOnly }: TileProps, forwardedRef: React.Ref<HTMLInputElement>) => {\n const internalRef = useRef<HTMLInputElement>(null);\n const isVisualRefresh = useVisualRefresh();\n\n const mergedRef = useMergeRefs(internalRef, forwardedRef);\n\n return (\n <div\n className={clsx(\n styles['tile-container'],\n { [styles['has-metadata']]: item.description || item.image },\n { [styles.selected]: selected },\n { [styles.disabled]: !!item.disabled },\n { [styles.readonly]: readOnly },\n { [styles.refresh]: isVisualRefresh },\n styles[`breakpoint-${breakpoint}`]\n )}\n data-value={item.value}\n onClick={() => {\n if (item.disabled || readOnly) {\n return;\n }\n internalRef.current?.focus();\n if (!selected) {\n fireNonCancelableEvent(onChange, { value: item.value });\n }\n }}\n >\n <div className={clsx(styles.control, { [styles['no-image']]: !item.image })}>\n <RadioButton\n checked={selected}\n ref={mergedRef}\n name={name}\n value={item.value}\n label={item.label}\n description={item.description}\n disabled={item.disabled}\n controlId={item.controlId}\n readOnly={readOnly}\n />\n </div>\n {item.image && <div className={clsx(styles.image, { [styles.disabled]: !!item.disabled })}>{item.image}</div>}\n </div>\n );\n }\n);\n"]}
1
+ {"version":3,"file":"tile.js","sourceRoot":"","sources":["../../../src/tiles/tile.tsx"],"names":[],"mappings":";AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,EAAE,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AACtC,OAAO,IAAI,MAAM,MAAM,CAAC;AAExB,OAAO,EAAE,8BAA8B,EAAE,MAAM,kEAAkE,CAAC;AAElH,OAAO,EAAE,sBAAsB,EAAE,MAAM,oBAAoB,CAAC;AAE5D,OAAO,EAAE,YAAY,EAAE,MAAM,kCAAkC,CAAC;AAChE,OAAO,EAAE,gBAAgB,EAAE,MAAM,mCAAmC,CAAC;AACrE,OAAO,WAAW,MAAM,6BAA6B,CAAC;AAGtD,OAAO,kBAAkB,MAAM,oCAAoC,CAAC;AACpE,OAAO,MAAM,MAAM,iBAAiB,CAAC;AAWrC,MAAM,CAAC,MAAM,IAAI,GAAG,KAAK,CAAC,UAAU,CAClC,CACE,EAA4E,EAC5E,YAAyC,EACzC,EAAE;QAFF,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAE,UAAU,EAAE,QAAQ,EAAE,QAAQ,OAAsB,EAAjB,IAAI,cAA/D,kEAAiE,CAAF;IAG/D,MAAM,WAAW,GAAG,MAAM,CAAmB,IAAI,CAAC,CAAC;IACnD,MAAM,eAAe,GAAG,gBAAgB,EAAE,CAAC;IAE3C,MAAM,SAAS,GAAG,YAAY,CAAC,WAAW,EAAE,YAAY,CAAC,CAAC;IAE1D,OAAO,CACL,2CACE,SAAS,EAAE,IAAI,CACb,MAAM,CAAC,gBAAgB,CAAC,EACxB,EAAE,CAAC,MAAM,CAAC,cAAc,CAAC,CAAC,EAAE,IAAI,CAAC,WAAW,IAAI,IAAI,CAAC,KAAK,EAAE,EAC5D,EAAE,CAAC,MAAM,CAAC,QAAQ,CAAC,EAAE,QAAQ,EAAE,EAC/B,EAAE,CAAC,MAAM,CAAC,QAAQ,CAAC,EAAE,CAAC,CAAC,IAAI,CAAC,QAAQ,EAAE,EACtC,EAAE,CAAC,MAAM,CAAC,QAAQ,CAAC,EAAE,QAAQ,EAAE,EAC/B,EAAE,CAAC,MAAM,CAAC,OAAO,CAAC,EAAE,eAAe,EAAE,EACrC,MAAM,CAAC,cAAc,UAAU,EAAE,CAAC,CACnC,gBACW,IAAI,CAAC,KAAK,EACtB,OAAO,EAAE,GAAG,EAAE;;YACZ,IAAI,IAAI,CAAC,QAAQ,IAAI,QAAQ,EAAE;gBAC7B,OAAO;aACR;YACD,MAAA,WAAW,CAAC,OAAO,0CAAE,KAAK,EAAE,CAAC;YAC7B,IAAI,CAAC,QAAQ,EAAE;gBACb,sBAAsB,CAAC,QAAQ,EAAE,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,CAAC,CAAC;aACzD;QACH,CAAC,IACG,8BAA8B,CAAC,IAAI,CAAC;QAExC,6BAAK,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,OAAO,EAAE,EAAE,CAAC,MAAM,CAAC,UAAU,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,KAAK,EAAE,CAAC;YACzE,oBAAC,WAAW,IACV,OAAO,EAAE,QAAQ,EACjB,GAAG,EAAE,SAAS,EACd,IAAI,EAAE,IAAI,EACV,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,WAAW,EAAE,IAAI,CAAC,WAAW,EAC7B,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,QAAQ,EAAE,QAAQ,EAClB,SAAS,EAAE,kBAAkB,CAAC,cAAc,CAAC,GAC7C,CACE;QACL,IAAI,CAAC,KAAK,IAAI,6BAAK,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,KAAK,EAAE,EAAE,CAAC,MAAM,CAAC,QAAQ,CAAC,EAAE,CAAC,CAAC,IAAI,CAAC,QAAQ,EAAE,CAAC,IAAG,IAAI,CAAC,KAAK,CAAO,CACzG,CACP,CAAC;AACJ,CAAC,CACF,CAAC","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 { copyAnalyticsMetadataAttribute } from '@cloudscape-design/component-toolkit/internal/analytics-metadata';\n\nimport { fireNonCancelableEvent } from '../internal/events';\nimport { useContainerBreakpoints } from '../internal/hooks/container-queries';\nimport { useMergeRefs } from '../internal/hooks/use-merge-refs';\nimport { useVisualRefresh } from '../internal/hooks/use-visual-mode';\nimport RadioButton from '../radio-group/radio-button';\nimport { TilesProps } from './interfaces';\n\nimport analyticsSelectors from './analytics-metadata/styles.css.js';\nimport styles from './styles.css.js';\n\ninterface TileProps {\n item: TilesProps.TilesDefinition;\n selected: boolean;\n name: string;\n breakpoint: ReturnType<typeof useContainerBreakpoints>[0];\n onChange: TilesProps['onChange'];\n readOnly?: boolean;\n}\n\nexport const Tile = React.forwardRef(\n (\n { item, selected, name, breakpoint, onChange, readOnly, ...rest }: TileProps,\n forwardedRef: React.Ref<HTMLInputElement>\n ) => {\n const internalRef = useRef<HTMLInputElement>(null);\n const isVisualRefresh = useVisualRefresh();\n\n const mergedRef = useMergeRefs(internalRef, forwardedRef);\n\n return (\n <div\n className={clsx(\n styles['tile-container'],\n { [styles['has-metadata']]: item.description || item.image },\n { [styles.selected]: selected },\n { [styles.disabled]: !!item.disabled },\n { [styles.readonly]: readOnly },\n { [styles.refresh]: isVisualRefresh },\n styles[`breakpoint-${breakpoint}`]\n )}\n data-value={item.value}\n onClick={() => {\n if (item.disabled || readOnly) {\n return;\n }\n internalRef.current?.focus();\n if (!selected) {\n fireNonCancelableEvent(onChange, { value: item.value });\n }\n }}\n {...copyAnalyticsMetadataAttribute(rest)}\n >\n <div className={clsx(styles.control, { [styles['no-image']]: !item.image })}>\n <RadioButton\n checked={selected}\n ref={mergedRef}\n name={name}\n value={item.value}\n label={item.label}\n description={item.description}\n disabled={item.disabled}\n controlId={item.controlId}\n readOnly={readOnly}\n className={analyticsSelectors['radio-button']}\n />\n </div>\n {item.image && <div className={clsx(styles.image, { [styles.disabled]: !!item.disabled })}>{item.image}</div>}\n </div>\n );\n }\n);\n"]}
@@ -0,0 +1,13 @@
1
+ import { LabelIdentifier } from '@cloudscape-design/component-toolkit/internal/analytics-metadata';
2
+ export interface GeneratedAnalyticsMetadataToggleSelect {
3
+ action: 'select';
4
+ detail: {
5
+ label: string;
6
+ selected: string;
7
+ };
8
+ }
9
+ export interface GeneratedAnalyticsMetadataToggleComponent {
10
+ name: 'awsui.Toggle';
11
+ label: string | LabelIdentifier;
12
+ }
13
+ //# sourceMappingURL=interfaces.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"interfaces.d.ts","sourceRoot":"","sources":["../../../../src/toggle/analytics-metadata/interfaces.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,eAAe,EAAE,MAAM,kEAAkE,CAAC;AAEnG,MAAM,WAAW,sCAAsC;IACrD,MAAM,EAAE,QAAQ,CAAC;IACjB,MAAM,EAAE;QACN,KAAK,EAAE,MAAM,CAAC;QACd,QAAQ,EAAE,MAAM,CAAC;KAClB,CAAC;CACH;AAED,MAAM,WAAW,yCAAyC;IACxD,IAAI,EAAE,cAAc,CAAC;IACrB,KAAK,EAAE,MAAM,GAAG,eAAe,CAAC;CACjC"}
@@ -0,0 +1,4 @@
1
+ // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
2
+ // SPDX-License-Identifier: Apache-2.0
3
+ export {};
4
+ //# sourceMappingURL=interfaces.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"interfaces.js","sourceRoot":"","sources":["../../../../src/toggle/analytics-metadata/interfaces.ts"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport { LabelIdentifier } from '@cloudscape-design/component-toolkit/internal/analytics-metadata';\n\nexport interface GeneratedAnalyticsMetadataToggleSelect {\n action: 'select';\n detail: {\n label: string;\n selected: string;\n };\n}\n\nexport interface GeneratedAnalyticsMetadataToggleComponent {\n name: 'awsui.Toggle';\n label: string | LabelIdentifier;\n}\n"]}
package/toggle/index.js CHANGED
@@ -6,7 +6,7 @@ import { applyDisplayName } from '../internal/utils/apply-display-name';
6
6
  import InternalToggle from './internal';
7
7
  const Toggle = React.forwardRef((props, ref) => {
8
8
  const baseComponentProps = useBaseComponent('Toggle');
9
- return React.createElement(InternalToggle, Object.assign({}, props, baseComponentProps, { ref: ref }));
9
+ return React.createElement(InternalToggle, Object.assign({}, props, baseComponentProps, { ref: ref, __injectAnalyticsComponentMetadata: true }));
10
10
  });
11
11
  applyDisplayName(Toggle, 'Toggle');
12
12
  export default Toggle;
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/toggle/index.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,gBAAgB,MAAM,sCAAsC,CAAC;AACpE,OAAO,EAAE,gBAAgB,EAAE,MAAM,sCAAsC,CAAC;AAExE,OAAO,cAAc,MAAM,YAAY,CAAC;AAIxC,MAAM,MAAM,GAAG,KAAK,CAAC,UAAU,CAA+B,CAAC,KAAK,EAAE,GAAG,EAAE,EAAE;IAC3E,MAAM,kBAAkB,GAAG,gBAAgB,CAAC,QAAQ,CAAC,CAAC;IACtD,OAAO,oBAAC,cAAc,oBAAK,KAAK,EAAM,kBAAkB,IAAE,GAAG,EAAE,GAAG,IAAI,CAAC;AACzE,CAAC,CAAC,CAAC;AAEH,gBAAgB,CAAC,MAAM,EAAE,QAAQ,CAAC,CAAC;AACnC,eAAe,MAAM,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React from 'react';\n\nimport useBaseComponent from '../internal/hooks/use-base-component';\nimport { applyDisplayName } from '../internal/utils/apply-display-name';\nimport { ToggleProps } from './interfaces';\nimport InternalToggle from './internal';\n\nexport { ToggleProps };\n\nconst Toggle = React.forwardRef<ToggleProps.Ref, ToggleProps>((props, ref) => {\n const baseComponentProps = useBaseComponent('Toggle');\n return <InternalToggle {...props} {...baseComponentProps} ref={ref} />;\n});\n\napplyDisplayName(Toggle, 'Toggle');\nexport default Toggle;\n"]}
1
+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/toggle/index.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,gBAAgB,MAAM,sCAAsC,CAAC;AACpE,OAAO,EAAE,gBAAgB,EAAE,MAAM,sCAAsC,CAAC;AAExE,OAAO,cAAc,MAAM,YAAY,CAAC;AAIxC,MAAM,MAAM,GAAG,KAAK,CAAC,UAAU,CAA+B,CAAC,KAAK,EAAE,GAAG,EAAE,EAAE;IAC3E,MAAM,kBAAkB,GAAG,gBAAgB,CAAC,QAAQ,CAAC,CAAC;IACtD,OAAO,oBAAC,cAAc,oBAAK,KAAK,EAAM,kBAAkB,IAAE,GAAG,EAAE,GAAG,EAAE,kCAAkC,EAAE,IAAI,IAAI,CAAC;AACnH,CAAC,CAAC,CAAC;AAEH,gBAAgB,CAAC,MAAM,EAAE,QAAQ,CAAC,CAAC;AACnC,eAAe,MAAM,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React from 'react';\n\nimport useBaseComponent from '../internal/hooks/use-base-component';\nimport { applyDisplayName } from '../internal/utils/apply-display-name';\nimport { ToggleProps } from './interfaces';\nimport InternalToggle from './internal';\n\nexport { ToggleProps };\n\nconst Toggle = React.forwardRef<ToggleProps.Ref, ToggleProps>((props, ref) => {\n const baseComponentProps = useBaseComponent('Toggle');\n return <InternalToggle {...props} {...baseComponentProps} ref={ref} __injectAnalyticsComponentMetadata={true} />;\n});\n\napplyDisplayName(Toggle, 'Toggle');\nexport default Toggle;\n"]}
@@ -1,6 +1,9 @@
1
1
  import React from 'react';
2
2
  import { InternalBaseComponentProps } from '../internal/hooks/use-base-component';
3
3
  import { ToggleProps } from './interfaces';
4
- declare const InternalToggle: React.ForwardRefExoticComponent<ToggleProps & InternalBaseComponentProps<any> & React.RefAttributes<ToggleProps.Ref>>;
4
+ interface InternalToggleProps extends ToggleProps, InternalBaseComponentProps {
5
+ __injectAnalyticsComponentMetadata?: boolean;
6
+ }
7
+ declare const InternalToggle: React.ForwardRefExoticComponent<InternalToggleProps & React.RefAttributes<ToggleProps.Ref>>;
5
8
  export default InternalToggle;
6
9
  //# sourceMappingURL=internal.d.ts.map
@@ -1 +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"}
1
+ {"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"}
@@ -3,6 +3,7 @@ import { __rest } from "tslib";
3
3
  // SPDX-License-Identifier: Apache-2.0
4
4
  import React, { useRef } from 'react';
5
5
  import clsx from 'clsx';
6
+ import { getAnalyticsMetadataAttribute, } from '@cloudscape-design/component-toolkit/internal/analytics-metadata';
6
7
  import { getBaseProps } from '../internal/base-component';
7
8
  import AbstractSwitch from '../internal/components/abstract-switch';
8
9
  import { useFormFieldContext } from '../internal/context/form-field-context';
@@ -10,10 +11,23 @@ import { fireNonCancelableEvent } from '../internal/events';
10
11
  import useForwardFocus from '../internal/hooks/forward-focus';
11
12
  import styles from './styles.css.js';
12
13
  const InternalToggle = React.forwardRef((_a, ref) => {
13
- 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"]);
14
+ 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"]);
14
15
  const { ariaDescribedby, ariaLabelledby } = useFormFieldContext(rest);
15
16
  const baseProps = getBaseProps(rest);
16
17
  const checkboxRef = useRef(null);
18
+ const analyticsMetadata = {};
19
+ const analyticsComponentMetadata = {
20
+ name: 'awsui.Toggle',
21
+ label: { root: 'self' },
22
+ };
23
+ if (__injectAnalyticsComponentMetadata) {
24
+ analyticsMetadata.component = analyticsComponentMetadata;
25
+ }
26
+ if (!disabled && !readOnly) {
27
+ analyticsMetadata.detail = {
28
+ selected: `${!checked}`,
29
+ };
30
+ }
17
31
  useForwardFocus(ref, checkboxRef);
18
32
  return (React.createElement(AbstractSwitch, Object.assign({}, baseProps, { className: clsx(styles.root, baseProps.className), controlClassName: clsx(styles['toggle-control'], {
19
33
  [styles['toggle-control-checked']]: checked,
@@ -31,7 +45,7 @@ const InternalToggle = React.forwardRef((_a, ref) => {
31
45
  [styles['toggle-handle-checked']]: checked,
32
46
  [styles['toggle-handle-disabled']]: disabled,
33
47
  [styles['toggle-handle-readonly']]: readOnly,
34
- }) }), __internalRootRef: __internalRootRef })));
48
+ }) }), __internalRootRef: __internalRootRef }, getAnalyticsMetadataAttribute(analyticsMetadata))));
35
49
  });
36
50
  export default InternalToggle;
37
51
  //# sourceMappingURL=internal.js.map
@@ -1 +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"]}
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 {\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"]}
@@ -1,32 +0,0 @@
1
- /// <reference types="react" />
2
- import { DropdownStatusProps } from '../internal/components/dropdown-status/interfaces';
3
- import { NonCancelableEventHandler } from '../internal/events';
4
- import { FormattedToken, GroupText, I18nStrings, InternalFilteringOption, InternalFilteringProperty, InternalFreeTextFiltering, InternalToken, LoadItemsDetail } from './interfaces';
5
- interface I18nStringsExt {
6
- tokenEditorTokenActionsLabel: (token: FormattedToken) => string;
7
- tokenEditorTokenRemoveLabel: (token: FormattedToken) => string;
8
- tokenEditorTokenRemoveFromGroupLabel: (token: FormattedToken) => string;
9
- tokenEditorAddNewTokenLabel: string;
10
- tokenEditorAddTokenActionsLabel: string;
11
- tokenEditorAddExistingTokenLabel: (token: FormattedToken) => string;
12
- }
13
- export interface TokenEditorProps {
14
- supportsGroups: boolean;
15
- asyncProperties?: boolean;
16
- asyncProps: DropdownStatusProps;
17
- customGroupsText: readonly GroupText[];
18
- freeTextFiltering: InternalFreeTextFiltering;
19
- filteringProperties: readonly InternalFilteringProperty[];
20
- filteringOptions: readonly InternalFilteringOption[];
21
- i18nStrings: I18nStrings & I18nStringsExt;
22
- onLoadItems?: NonCancelableEventHandler<LoadItemsDetail>;
23
- onSubmit: () => void;
24
- onDismiss: () => void;
25
- standaloneTokens: InternalToken[];
26
- onChangeStandalone: (newStandalone: InternalToken[]) => void;
27
- tempGroup: InternalToken[];
28
- onChangeTempGroup: (token: InternalToken[]) => void;
29
- }
30
- export declare function TokenEditor({ supportsGroups, asyncProperties, asyncProps, customGroupsText, freeTextFiltering, filteringProperties, filteringOptions, i18nStrings, onLoadItems, onSubmit, onDismiss, standaloneTokens, onChangeStandalone, tempGroup, onChangeTempGroup, }: TokenEditorProps): JSX.Element;
31
- export {};
32
- //# sourceMappingURL=token-editor-grouped.d.ts.map
@@ -1 +0,0 @@
1
- {"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"}
@@ -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"]}