remove public api changes

Author: pan-kot

pages/property-filter/common-props.tsx

@@ -1,6 +1,7 @@
 // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
 // SPDX-License-Identifier: Apache-2.0
 import { PropertyFilterProps } from '~components/property-filter';
+import { I18nStringsTokenGroups } from '~components/property-filter/interfaces';
 
 import {
   DateForm,
@@ -183,7 +184,9 @@ export const i18nStrings: PropertyFilterProps.I18nStrings = {
 
   formatToken,
   removeTokenButtonAriaLabel: token => `Remove token, ${formatToken(token)}`,
+};
 
+export const i18nStringsTokenGroups: I18nStringsTokenGroups = {
   groupEditAriaLabel: group => `Edit group with ${group.tokens.length} tokens`,
   tokenEditorTokenActionsAriaLabel: token => `Filter remove actions for ${formatToken(token)}`,
   tokenEditorTokenRemoveAriaLabel: token => `Remove filter, ${formatToken(token)}`,

pages/property-filter/split-panel-app-layout-integration.page.tsx

@@ -10,7 +10,7 @@ import Button from '~components/button';
 import Header from '~components/header';
 import I18nProvider from '~components/i18n';
 import messages from '~components/i18n/messages/all.en';
-import PropertyFilter from '~components/property-filter';
+import PropertyFilter from '~components/property-filter/internal';
 import SplitPanel from '~components/split-panel';
 import Table from '~components/table';
 
@@ -100,6 +100,8 @@ export default function () {
                   enableTokenGroups={true}
                   expandToViewport={true}
                   filteringEmpty="No properties"
+                  customGroupsText={[]}
+                  disableFreeTextFiltering={false}
                 />
               }
               columnDefinitions={columnDefinitions.slice(0, 2)}

pages/property-filter/token-editor.page.tsx

@@ -11,6 +11,7 @@ import {
   columnDefinitions,
   filteringProperties as commonFilteringProperties,
   i18nStrings,
+  i18nStringsTokenGroups,
   labels,
 } from './common-props';
 
@@ -27,6 +28,7 @@ const commonProps = {
   filteringProperties,
   filteringOptions: [],
   i18nStrings,
+  i18nStringsTokenGroups,
   countText: '5 matches',
   disableFreeTextFiltering: false,
   virtualScroll: true,

src/__tests__/__snapshots__/documenter.test.ts.snap

@@ -12177,12 +12177,6 @@ in order to prevent the user from changing the filtering query.",
       "optional": true,
       "type": "boolean",
     },
-    Object {
-      "defaultValue": "false",
-      "name": "enableTokenGroups",
-      "optional": true,
-      "type": "boolean",
-    },
     Object {
       "description": "By default, the dropdown height is constrained to fit inside the height of its next scrollable container element.
 Enabling this property will allow the dropdown to extend beyond that container by using fixed positioning and
@@ -12377,11 +12371,6 @@ operations are communicated to the user in another way.",
             "optional": true,
             "type": "(token: PropertyFilterProps.FormattedToken) => string",
           },
-          Object {
-            "name": "groupEditAriaLabel",
-            "optional": true,
-            "type": "(group: PropertyFilterProps.FormattedTokenGroup) => string",
-          },
           Object {
             "name": "groupPropertiesText",
             "optional": true,
@@ -12472,46 +12461,6 @@ operations are communicated to the user in another way.",
             "optional": true,
             "type": "(token: PropertyFilterProps.FormattedToken) => string",
           },
-          Object {
-            "name": "tokenEditorAddExistingTokenAriaLabel",
-            "optional": true,
-            "type": "(token: PropertyFilterProps.FormattedToken) => string",
-          },
-          Object {
-            "name": "tokenEditorAddExistingTokenLabel",
-            "optional": true,
-            "type": "(token: PropertyFilterProps.FormattedToken) => string",
-          },
-          Object {
-            "name": "tokenEditorAddNewTokenLabel",
-            "optional": true,
-            "type": "string",
-          },
-          Object {
-            "name": "tokenEditorAddTokenActionsAriaLabel",
-            "optional": true,
-            "type": "string",
-          },
-          Object {
-            "name": "tokenEditorTokenActionsAriaLabel",
-            "optional": true,
-            "type": "(token: PropertyFilterProps.FormattedToken) => string",
-          },
-          Object {
-            "name": "tokenEditorTokenRemoveAriaLabel",
-            "optional": true,
-            "type": "(token: PropertyFilterProps.FormattedToken) => string",
-          },
-          Object {
-            "name": "tokenEditorTokenRemoveFromGroupLabel",
-            "optional": true,
-            "type": "string",
-          },
-          Object {
-            "name": "tokenEditorTokenRemoveLabel",
-            "optional": true,
-            "type": "string",
-          },
           Object {
             "name": "tokenLimitShowFewer",
             "optional": true,

src/property-filter/__tests__/common.tsx

@@ -4,7 +4,14 @@
 import React, { useState } from 'react';
 
 import PropertyFilter from '../../../lib/components/property-filter';
-import { FilteringProperty, I18nStrings, InternalFilteringProperty, PropertyFilterProps, Token } from '../interfaces';
+import {
+  FilteringProperty,
+  I18nStrings,
+  I18nStringsTokenGroups,
+  InternalFilteringProperty,
+  PropertyFilterProps,
+  Token,
+} from '../interfaces';
 
 export const i18nStrings: I18nStrings = {
   dismissAriaLabel: 'Dismiss',
@@ -40,13 +47,16 @@ export const i18nStrings: I18nStrings = {
   enteredTextLabel: (text: string) => `Use: "${text}"`,
 
   formatToken: token => `${token.propertyLabel} ${formatOperator(token.operator)} ${token.value}`,
+  removeTokenButtonAriaLabel: (token: Token) =>
+    'Remove token ' + token.propertyKey + ' ' + formatOperator(token.operator) + ' ' + token.value,
+};
+
+export const i18nStringsTokenGroups: I18nStringsTokenGroups = {
   groupEditAriaLabel: group =>
     'Edit filter, ' +
     group.tokens
       .map(token => `${token.propertyLabel} ${formatOperator(token.operator)} ${token.value}`)
       .join(` ${group.operationLabel} `),
-  removeTokenButtonAriaLabel: (token: Token) =>
-    'Remove token ' + token.propertyKey + ' ' + formatOperator(token.operator) + ' ' + token.value,
   tokenEditorTokenActionsAriaLabel: token =>
     `Remove actions, ${token.propertyLabel} ${formatOperator(token.operator)} ${token.value}`,
   tokenEditorTokenRemoveAriaLabel: token =>

src/property-filter/__tests__/property-filter-token-editor.test.tsx

@@ -6,15 +6,11 @@ import { act, fireEvent, render } from '@testing-library/react';
 
 import TestI18nProvider from '../../../lib/components/i18n/testing';
 import { useMobile } from '../../../lib/components/internal/hooks/use-mobile';
-import PropertyFilter from '../../../lib/components/property-filter';
-import {
-  FilteringOption,
-  FilteringProperty,
-  PropertyFilterProps,
-  Ref,
-} from '../../../lib/components/property-filter/interfaces';
+import { FilteringOption, FilteringProperty, Ref } from '../../../lib/components/property-filter/interfaces';
+import PropertyFilterInternal, { PropertyFilterInternalProps } from '../../../lib/components/property-filter/internal';
 import createWrapper from '../../../lib/components/test-utils/dom';
-import { createDefaultProps, i18nStrings, providedI18nStrings } from './common';
+import { PropertyFilterWrapperInternal } from '../../../lib/components/test-utils/dom/property-filter';
+import { createDefaultProps, i18nStrings, i18nStringsTokenGroups, providedI18nStrings } from './common';
 
 jest.mock('../../../lib/components/internal/hooks/use-mobile', () => ({
   ...jest.requireActual('../../../lib/components/internal/hooks/use-mobile'),
@@ -69,20 +65,29 @@ const filteringOptions: readonly FilteringOption[] = [
   { propertyKey: 'default-operator', value: 'value' },
 ];
 
-const defaultProps = createDefaultProps(filteringProperties, filteringOptions);
-
-function renderComponent(props?: Partial<PropertyFilterProps & { ref: React.Ref<Ref> }>, withI18nProvider = false) {
+const defaultProps = {
+  filteringOptions: [],
+  customGroupsText: [],
+  disableFreeTextFiltering: false,
+  i18nStringsTokenGroups,
+  ...createDefaultProps(filteringProperties, filteringOptions),
+};
+
+function renderComponent(
+  props?: Partial<PropertyFilterInternalProps & { ref: React.Ref<Ref> }>,
+  withI18nProvider = false
+) {
   return withI18nProvider
     ? render(
         <TestI18nProvider messages={providedI18nStrings}>
-          <PropertyFilter {...defaultProps} {...props} />
+          <PropertyFilterInternal {...defaultProps} {...props} />
         </TestI18nProvider>
       )
-    : render(<PropertyFilter {...defaultProps} {...props} />);
+    : render(<PropertyFilterInternal {...defaultProps} {...props} />);
 }
 
 function openEditor(tokenIndex: number, options: { expandToViewport?: boolean; isMobile?: boolean }) {
-  const propertyFilter = createWrapper().findPropertyFilter()!;
+  const propertyFilter = new PropertyFilterWrapperInternal(createWrapper().findPropertyFilter()!.getElement());
   const token = propertyFilter.findTokens()[tokenIndex];
   if (token.findEditButton()) {
     token.findEditButton()!.click();
@@ -96,7 +101,7 @@ function findEditor(
   tokenIndex: number,
   { expandToViewport = false, isMobile = false }: { expandToViewport?: boolean; isMobile?: boolean }
 ) {
-  const propertyFilter = createWrapper().findPropertyFilter()!;
+  const propertyFilter = new PropertyFilterWrapperInternal(createWrapper().findPropertyFilter()!.getElement());
   const editor = propertyFilter.findTokens()[tokenIndex].findEditorDropdown({ expandToViewport })!;
   return editor
     ? {
@@ -467,7 +472,7 @@ describe('token editor with groups', () => {
     jest.mocked(useMobile).mockReturnValue(false);
   });
 
-  function render(props: Partial<PropertyFilterProps>) {
+  function render(props: Partial<PropertyFilterInternalProps>) {
     return renderComponent({ enableTokenGroups: true, ...props });
   }
 

src/property-filter/__tests__/property-filter-token-list.test.tsx

@@ -6,8 +6,10 @@ import { act, render } from '@testing-library/react';
 
 import PropertyFilter from '../../../lib/components/property-filter';
 import { PropertyFilterProps, Ref } from '../../../lib/components/property-filter/interfaces';
+import PropertyFilterInternal, { PropertyFilterInternalProps } from '../../../lib/components/property-filter/internal';
 import createWrapper, { PropertyFilterWrapper } from '../../../lib/components/test-utils/dom';
-import { createDefaultProps, i18nStrings, StatefulPropertyFilter } from './common';
+import { PropertyFilterWrapperInternal } from '../../../lib/components/test-utils/dom/property-filter';
+import { createDefaultProps, i18nStrings, i18nStringsTokenGroups, StatefulPropertyFilter } from './common';
 
 const defaultProps = createDefaultProps(
   [
@@ -301,13 +303,23 @@ describe('grouped token', () => {
   const tokenJane = { propertyKey: 'string', operator: '=', value: 'Jane' };
   const tokenJack = { propertyKey: 'string', operator: '=', value: 'Jack' };
 
-  function render(props: Partial<PropertyFilterProps>) {
-    const { propertyFilterWrapper: wrapper } = renderComponent({ ...props, enableTokenGroups: true });
-    return wrapper;
+  function renderInternalComponent(props: Partial<PropertyFilterInternalProps>) {
+    const { container } = render(
+      <PropertyFilterInternal
+        {...defaultProps}
+        enableTokenGroups={true}
+        i18nStringsTokenGroups={i18nStringsTokenGroups}
+        filteringOptions={[]}
+        customGroupsText={[]}
+        disableFreeTextFiltering={false}
+        {...props}
+      />
+    );
+    return new PropertyFilterWrapperInternal(container);
   }
 
   test('token group has correct ARIA label and edit button ARIA label', () => {
-    const wrapper = render({
+    const wrapper = renderInternalComponent({
       query: { operation: 'and', tokenGroups: [{ operation: 'or', tokens: [tokenJohn, tokenJane] }], tokens: [] },
     });
 
@@ -319,7 +331,7 @@ describe('grouped token', () => {
 
   test('changes group operation', () => {
     const onChange = jest.fn();
-    const wrapper = render({
+    const wrapper = renderInternalComponent({
       query: { operation: 'and', tokenGroups: [{ operation: 'and', tokens: [tokenJohn, tokenJane] }], tokens: [] },
       onChange,
     });
@@ -341,7 +353,7 @@ describe('grouped token', () => {
 
   test('removes token from group', () => {
     const onChange = jest.fn();
-    const wrapper = render({
+    const wrapper = renderInternalComponent({
       query: {
         operation: 'and',
         tokenGroups: [{ operation: 'and', tokens: [tokenJohn, tokenJane, tokenJack] }],

src/property-filter/filtering-token/__tests__/filtering-token.test.tsx

@@ -5,7 +5,7 @@ import React from 'react';
 import { render } from '@testing-library/react';
 
 import FilteringToken, { FilteringTokenProps } from '../../../../lib/components/property-filter/filtering-token';
-import { FilteringTokenWrapper } from '../../../../lib/components/test-utils/dom/property-filter';
+import { FilteringTokenWrapperInternal } from '../../../../lib/components/test-utils/dom/property-filter';
 
 const token1 = {
   content: 'property1 = value',
@@ -46,9 +46,11 @@ const defaultProps: FilteringTokenProps = {
   popoverSize: 'content',
 };
 
-function renderToken(props: Partial<FilteringTokenProps>): FilteringTokenWrapper {
+function renderToken(props: Partial<FilteringTokenProps>): FilteringTokenWrapperInternal {
   const { container } = render(<FilteringToken {...defaultProps} {...props} />);
-  return new FilteringTokenWrapper(container.querySelector<HTMLElement>(`.${FilteringTokenWrapper.rootSelector}`)!);
+  return new FilteringTokenWrapperInternal(
+    container.querySelector<HTMLElement>(`.${FilteringTokenWrapperInternal.rootSelector}`)!
+  );
 }
 
 test('renders a single token as role="group" with token ARIA label and dismiss button', () => {

src/property-filter/i18n-utils.ts

@@ -2,7 +2,14 @@
 // SPDX-License-Identifier: Apache-2.0
 
 import { useInternalI18n } from '../i18n/context';
-import { ComparisonOperator, FormattedToken, I18nStrings, InternalToken, InternalTokenGroup } from './interfaces';
+import {
+  ComparisonOperator,
+  FormattedToken,
+  I18nStrings,
+  I18nStringsTokenGroups,
+  InternalToken,
+  InternalTokenGroup,
+} from './interfaces';
 import { tokenGroupToTokens } from './utils';
 
 export type I18nStringsOperators = Pick<
@@ -20,32 +27,31 @@ export type I18nStringsOperators = Pick<
 >;
 
 // Replacing i18n function with ones taking internal tokens as argument.
-export type I18nStringsInternal = Omit<
-  I18nStrings,
-  | 'formatToken'
-  | 'removeTokenButtonAriaLabel'
-  | 'groupEditAriaLabel'
-  | 'tokenEditorTokenActionsAriaLabel'
-  | 'tokenEditorTokenRemoveAriaLabel'
-  | 'tokenEditorAddExistingTokenAriaLabel'
-  | 'tokenEditorAddExistingTokenLabel'
-> & {
-  formatToken: (token: InternalToken) => {
-    propertyLabel: string;
-    operator: string;
-    value: string;
-    formattedText: string;
+export type I18nStringsInternal = Omit<I18nStrings, 'formatToken' | 'removeTokenButtonAriaLabel'> &
+  Omit<
+    I18nStringsTokenGroups,
+    | 'groupEditAriaLabel'
+    | 'tokenEditorTokenActionsAriaLabel'
+    | 'tokenEditorTokenRemoveAriaLabel'
+    | 'tokenEditorAddExistingTokenAriaLabel'
+    | 'tokenEditorAddExistingTokenLabel'
+  > & {
+    formatToken: (token: InternalToken) => {
+      propertyLabel: string;
+      operator: string;
+      value: string;
+      formattedText: string;
+    };
+    groupAriaLabel: (group: InternalTokenGroup) => string;
+    groupEditAriaLabel: (group: InternalTokenGroup) => string;
+    removeTokenButtonAriaLabel: (token: InternalToken) => string;
+    tokenEditorTokenActionsAriaLabel: (token: InternalToken) => string;
+    tokenEditorTokenRemoveAriaLabel: (token: InternalToken) => string;
+    tokenEditorAddExistingTokenAriaLabel: (token: InternalToken) => string;
+    tokenEditorAddExistingTokenLabel: (token: InternalToken) => string;
   };
-  groupAriaLabel: (group: InternalTokenGroup) => string;
-  groupEditAriaLabel: (group: InternalTokenGroup) => string;
-  removeTokenButtonAriaLabel: (token: InternalToken) => string;
-  tokenEditorTokenActionsAriaLabel: (token: InternalToken) => string;
-  tokenEditorTokenRemoveAriaLabel: (token: InternalToken) => string;
-  tokenEditorAddExistingTokenAriaLabel: (token: InternalToken) => string;
-  tokenEditorAddExistingTokenLabel: (token: InternalToken) => string;
-};
 
-export function usePropertyFilterI18n(def: I18nStrings = {}): I18nStringsInternal {
+export function usePropertyFilterI18n(def: I18nStrings & I18nStringsTokenGroups = {}): I18nStringsInternal {
   const i18n = useInternalI18n('property-filter');
 
   const allPropertiesLabel = i18n('i18nStrings.allPropertiesLabel', def?.allPropertiesLabel);