@digigov/react-core 2.0.0-rc.23 → 2.0.0-rc.25

package/src/TableHeadCell/index.test.tsx

@@ -3,87 +3,201 @@ import { render } from '@testing-library/react';
 
 import Table from '@digigov/react-core/Table';
 import TableHead from '@digigov/react-core/TableHead';
-import TableRow from '@digigov/react-core/TableRow';
 import TableHeadCell from '@digigov/react-core/TableHeadCell';
+import TableRow from '@digigov/react-core/TableRow';
 
 it('renders the Table with no props', () => {
-  expect(render(<Table><TableHead><TableRow><TableHeadCell>hello</TableHeadCell></TableRow></TableHead></Table>).baseElement).toMatchSnapshot();
+  expect(
+    render(
+      <Table>
+        <TableHead>
+          <TableRow>
+            <TableHeadCell>hello</TableHeadCell>
+          </TableRow>
+        </TableHead>
+      </Table>
+    ).baseElement
+  ).toMatchSnapshot();
 });
 
 it('renders the Table with dataType="numeric" prop', () => {
   expect(
-    render(<Table><TableHead><TableRow><TableHeadCell dataType="numeric">hello</TableHeadCell></TableRow></TableHead></Table>).baseElement
+    render(
+      <Table>
+        <TableHead>
+          <TableRow>
+            <TableHeadCell dataType="numeric">hello</TableHeadCell>
+          </TableRow>
+        </TableHead>
+      </Table>
+    ).baseElement
   ).toMatchSnapshot();
 });
 
 it('renders the TableHeadCell with width=one-quarter', () => {
   expect(
-    render(<Table><TableHead><TableRow><TableHeadCell width={'25%'}></TableHeadCell></TableRow></TableHead></Table>).baseElement
+    render(
+      <Table>
+        <TableHead>
+          <TableRow>
+            <TableHeadCell width={'25%'}></TableHeadCell>
+          </TableRow>
+        </TableHead>
+      </Table>
+    ).baseElement
   ).toMatchSnapshot();
 });
 
 it('renders the TableHeadCell with width=one-third', () => {
   expect(
-    render(<Table><TableHead><TableRow><TableHeadCell width={'33.3%'}></TableHeadCell></TableRow></TableHead></Table>).baseElement
+    render(
+      <Table>
+        <TableHead>
+          <TableRow>
+            <TableHeadCell width={'33.3%'}></TableHeadCell>
+          </TableRow>
+        </TableHead>
+      </Table>
+    ).baseElement
   ).toMatchSnapshot();
 });
 
 it('renders the TableHeadCell with width=one-half', () => {
   expect(
-    render(<Table><TableHead><TableRow><TableHeadCell width={'50%'}></TableHeadCell></TableRow></TableHead></Table>).baseElement
+    render(
+      <Table>
+        <TableHead>
+          <TableRow>
+            <TableHeadCell width={'50%'}></TableHeadCell>
+          </TableRow>
+        </TableHead>
+      </Table>
+    ).baseElement
   ).toMatchSnapshot();
 });
 
 it('renders the TableHeadCell with width=two-thirds', () => {
   expect(
-    render(<Table><TableHead><TableRow><TableHeadCell width={'66.6%'}></TableHeadCell></TableRow></TableHead></Table>).baseElement
+    render(
+      <Table>
+        <TableHead>
+          <TableRow>
+            <TableHeadCell width={'66.6%'}></TableHeadCell>
+          </TableRow>
+        </TableHead>
+      </Table>
+    ).baseElement
   ).toMatchSnapshot();
 });
 
 it('renders the TableHeadCell with width=three-quarters', () => {
   expect(
-    render(<Table><TableHead><TableRow><TableHeadCell width={'75%'}></TableHeadCell></TableRow></TableHead></Table>).baseElement
+    render(
+      <Table>
+        <TableHead>
+          <TableRow>
+            <TableHeadCell width={'75%'}></TableHeadCell>
+          </TableRow>
+        </TableHead>
+      </Table>
+    ).baseElement
   ).toMatchSnapshot();
 });
 
 it('renders the TableHeadCell with width=full', () => {
   expect(
-    render(<Table><TableHead><TableRow><TableHeadCell width={'full'}></TableHeadCell></TableRow></TableHead></Table>).baseElement
+    render(
+      <Table>
+        <TableHead>
+          <TableRow>
+            <TableHeadCell width={'full'}></TableHeadCell>
+          </TableRow>
+        </TableHead>
+      </Table>
+    ).baseElement
   ).toMatchSnapshot();
 });
 
 it('renders the TableHeadCell with dataType="numeric" width=one-quarter', () => {
   expect(
-    render(<Table><TableHead><TableRow><TableHeadCell dataType="numeric" width={'25%'}></TableHeadCell></TableRow></TableHead></Table>).baseElement
+    render(
+      <Table>
+        <TableHead>
+          <TableRow>
+            <TableHeadCell dataType="numeric" width={'25%'}></TableHeadCell>
+          </TableRow>
+        </TableHead>
+      </Table>
+    ).baseElement
   ).toMatchSnapshot();
 });
 
 it('renders the TableHeadCell with dataType="numeric" and width=one-third', () => {
   expect(
-    render(<Table><TableHead><TableRow><TableHeadCell dataType="numeric" width={'33.3%'}></TableHeadCell></TableRow></TableHead></Table>).baseElement
+    render(
+      <Table>
+        <TableHead>
+          <TableRow>
+            <TableHeadCell dataType="numeric" width={'33.3%'}></TableHeadCell>
+          </TableRow>
+        </TableHead>
+      </Table>
+    ).baseElement
   ).toMatchSnapshot();
 });
 
 it('renders the TableHeadCell with dataType="numeric" and dataType="numeric" and   width=one-half', () => {
   expect(
-    render(<Table><TableHead><TableRow><TableHeadCell dataType="numeric" width={'50%'}></TableHeadCell></TableRow></TableHead></Table>).baseElement
+    render(
+      <Table>
+        <TableHead>
+          <TableRow>
+            <TableHeadCell dataType="numeric" width={'50%'}></TableHeadCell>
+          </TableRow>
+        </TableHead>
+      </Table>
+    ).baseElement
   ).toMatchSnapshot();
 });
 
 it('renders the TableHeadCell with dataType="numeric" and width=two-thirds', () => {
   expect(
-    render(<Table><TableHead><TableRow><TableHeadCell dataType="numeric" width={'66.6%'}></TableHeadCell></TableRow></TableHead></Table>).baseElement
+    render(
+      <Table>
+        <TableHead>
+          <TableRow>
+            <TableHeadCell dataType="numeric" width={'66.6%'}></TableHeadCell>
+          </TableRow>
+        </TableHead>
+      </Table>
+    ).baseElement
   ).toMatchSnapshot();
 });
 
 it('renders the TableHeadCell with dataType="numeric" and width=three-quarters', () => {
   expect(
-    render(<Table><TableHead><TableRow><TableHeadCell dataType="numeric" width={'75%'}></TableHeadCell></TableRow></TableHead></Table>).baseElement
+    render(
+      <Table>
+        <TableHead>
+          <TableRow>
+            <TableHeadCell dataType="numeric" width={'75%'}></TableHeadCell>
+          </TableRow>
+        </TableHead>
+      </Table>
+    ).baseElement
   ).toMatchSnapshot();
 });
 
 it('renders the TableHeadCell dataType="numeric" and with width=full', () => {
   expect(
-    render(<Table><TableHead><TableRow><TableHeadCell dataType="numeric" width={'full'}></TableHeadCell></TableRow></TableHead></Table>).baseElement
+    render(
+      <Table>
+        <TableHead>
+          <TableRow>
+            <TableHeadCell dataType="numeric" width={'full'}></TableHeadCell>
+          </TableRow>
+        </TableHead>
+      </Table>
+    ).baseElement
   ).toMatchSnapshot();
 });

package/src/TableLoaderBackground/index.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import clsx from 'clsx';
 import Base, { BaseProps } from '@digigov/react-core/Base';
 
-export interface TableLoaderBackgroundProps extends BaseProps<'div'> { }
+export interface TableLoaderBackgroundProps extends BaseProps<'div'> {}
 /**
  * Use TableLoaderBackground component in tables in order to add blur and opacity background when data are loading.
  * TableLoaderBackground is the parent component and takes as children the LoaderContainer component.

package/src/TableNoDataRow/index.test.tsx

@@ -6,5 +6,13 @@ import TableBody from '@digigov/react-core/TableBody';
 import TableNoDataRow from '@digigov/react-core/TableNoDataRow';
 
 it('renders the Table with no props', () => {
-  expect(render(<Table><TableBody><TableNoDataRow></TableNoDataRow></TableBody></Table>).baseElement).toMatchSnapshot();
+  expect(
+    render(
+      <Table>
+        <TableBody>
+          <TableNoDataRow></TableNoDataRow>
+        </TableBody>
+      </Table>
+    ).baseElement
+  ).toMatchSnapshot();
 });

package/src/TableNoDataRow/index.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import clsx from 'clsx';
 import Base, { BaseProps } from '@digigov/react-core/Base';
 
-export interface TableNoDataRowProps extends BaseProps<'td'> { }
+export interface TableNoDataRowProps extends BaseProps<'td'> {}
 /**
  * Use TableNoDataRow inside the Table component when there is no data to show.
  * you can use colSpan prop attribute to expand the td width

package/src/TableRow/index.test.tsx

@@ -6,12 +6,36 @@ import TableBody from '@digigov/react-core/TableBody';
 import TableRow from '@digigov/react-core/TableRow';
 
 it('renders the Table with no props', () => {
-  expect(render(<Table><TableBody><TableRow></TableRow></TableBody></Table>).baseElement).toMatchSnapshot();
+  expect(
+    render(
+      <Table>
+        <TableBody>
+          <TableRow></TableRow>
+        </TableBody>
+      </Table>
+    ).baseElement
+  ).toMatchSnapshot();
 });
 
 it('renders the Table with highlight prop', () => {
-  expect(render(<Table><TableBody><TableRow highlight></TableRow></TableBody></Table>).baseElement).toMatchSnapshot();
+  expect(
+    render(
+      <Table>
+        <TableBody>
+          <TableRow highlight></TableRow>
+        </TableBody>
+      </Table>
+    ).baseElement
+  ).toMatchSnapshot();
 });
 it('renders the Table with color="secondary" prop', () => {
-  expect(render(<Table><TableBody><TableRow color="secondary"></TableRow></TableBody></Table>).baseElement).toMatchSnapshot();
+  expect(
+    render(
+      <Table>
+        <TableBody>
+          <TableRow color="secondary"></TableRow>
+        </TableBody>
+      </Table>
+    ).baseElement
+  ).toMatchSnapshot();
 });

package/src/TableSortIconContainer/index.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import clsx from 'clsx';
 import Base, { BaseProps } from '@digigov/react-core/Base';
 
-export interface TableSortIconContainerProps extends BaseProps<'div'> { }
+export interface TableSortIconContainerProps extends BaseProps<'div'> {}
 /**
  *
  * Use TableSortIconContainer to wrap CaretIcon like ascending descending style.

package/src/TabsHeading/index.test.tsx

@@ -4,13 +4,19 @@ import { render } from '@testing-library/react';
 import TabsHeading from '@digigov/react-core/TabsHeading';
 
 it('renders the TabsHeading with no props', () => {
-  expect(render(<TabsHeading>hello</TabsHeading>).baseElement).toMatchSnapshot();
+  expect(
+    render(<TabsHeading>hello</TabsHeading>).baseElement
+  ).toMatchSnapshot();
 });
 
 it('renders the TabsHeading with size=m', () => {
-  expect(render(<TabsHeading size={'md'}>hello</TabsHeading>).baseElement).toMatchSnapshot();
+  expect(
+    render(<TabsHeading size={'md'}>hello</TabsHeading>).baseElement
+  ).toMatchSnapshot();
 });
 
 it('renders the TabsHeading with size=s', () => {
-  expect(render(<TabsHeading size={'sm'}>hello</TabsHeading>).baseElement).toMatchSnapshot();
+  expect(
+    render(<TabsHeading size={'sm'}>hello</TabsHeading>).baseElement
+  ).toMatchSnapshot();
 });

package/src/TabsHeading/index.tsx

@@ -19,7 +19,7 @@ export interface TabsHeadingProps extends HiddenProps {
 export const TabsHeading = React.forwardRef<
   HTMLHeadingElement,
   TabsHeadingProps
->(function TabsHeading({ size = 'sm', className, children, ...props }, ref) {
+>(function TabsHeading({ size = 'sm', children, ...props }, ref) {
   return (
     <Hidden ref={ref} {...props} mdUp>
       <Heading size={size}>{children}</Heading>

package/src/TabsList/index.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import clsx from 'clsx';
 import Base, { BaseProps } from '@digigov/react-core/Base';
 
-export interface TabsListProps extends BaseProps<'ul'> { }
+export interface TabsListProps extends BaseProps<'ul'> {}
 /**
  * TabsList should be inside the Tabs component.
  * Inside the TabsList should be a list of TabsListItem components.

package/src/TabsListItemBase/__snapshots__/index.test.tsx.snap

@@ -20,15 +20,17 @@ exports[`renders the TabsListItemBase with href and open=false 1`] = `
 </body>
 `;
 
-exports[`renders the TabsListItemBase with no props 1`] = `
+exports[`renders the TabsListItemBase with href and open=true 1`] = `
 <body>
   <div>
     <li
-      class="ds-tabs__list-item"
+      class="ds-tabs__list-item ds-tabs__list-item-selected"
       role="presentation"
     >
       <a
+        aria-selected="true"
         class="ds-tabs__tab"
+        href="/"
         role="tab"
       >
         hello
@@ -38,7 +40,7 @@ exports[`renders the TabsListItemBase with no props 1`] = `
 </body>
 `;
 
-exports[`renders the TabsListItemBase with open=false 1`] = `
+exports[`renders the TabsListItemBase with no props 1`] = `
 <body>
   <div>
     <li
@@ -46,7 +48,6 @@ exports[`renders the TabsListItemBase with open=false 1`] = `
       role="presentation"
     >
       <a
-        aria-selected="false"
         class="ds-tabs__tab"
         role="tab"
       >
@@ -57,15 +58,15 @@ exports[`renders the TabsListItemBase with open=false 1`] = `
 </body>
 `;
 
-exports[`renders the TabsListItemBase with open=true 1`] = `
+exports[`renders the TabsListItemBase with open=false 1`] = `
 <body>
   <div>
     <li
-      class="ds-tabs__list-item ds-tabs__list-item-selected"
+      class="ds-tabs__list-item"
       role="presentation"
     >
       <a
-        aria-selected="true"
+        aria-selected="false"
         class="ds-tabs__tab"
         role="tab"
       >
@@ -76,7 +77,7 @@ exports[`renders the TabsListItemBase with open=true 1`] = `
 </body>
 `;
 
-exports[`renders the TabsListItemBase with open=true 2`] = `
+exports[`renders the TabsListItemBase with open=true 1`] = `
 <body>
   <div>
     <li
@@ -86,7 +87,6 @@ exports[`renders the TabsListItemBase with open=true 2`] = `
       <a
         aria-selected="true"
         class="ds-tabs__tab"
-        href="/"
         role="tab"
       >
         hello

package/src/TabsListItemBase/index.test.tsx

@@ -4,7 +4,9 @@ import { render } from '@testing-library/react';
 import TabsListItemBase from '@digigov/react-core/TabsListItemBase';
 
 it('renders the TabsListItemBase with no props', () => {
-  expect(render(<TabsListItemBase>hello</TabsListItemBase>).baseElement).toMatchSnapshot();
+  expect(
+    render(<TabsListItemBase>hello</TabsListItemBase>).baseElement
+  ).toMatchSnapshot();
 });
 
 it('renders the TabsListItemBase with open=true', () => {
@@ -27,7 +29,7 @@ it('renders the TabsListItemBase with href and open=false', () => {
     ).baseElement
   ).toMatchSnapshot();
 });
-it('renders the TabsListItemBase with open=true', () => {
+it('renders the TabsListItemBase with href and open=true', () => {
   expect(
     render(
       <TabsListItemBase href="/" open={true}>

package/src/TabsPanelBase/index.test.tsx

@@ -4,7 +4,9 @@ import { render } from '@testing-library/react';
 import TabsPanelBase from '@digigov/react-core/TabsPanelBase';
 
 it('renders the TabsPanelBase with no props', () => {
-  expect(render(<TabsPanelBase>hello</TabsPanelBase>).baseElement).toMatchSnapshot();
+  expect(
+    render(<TabsPanelBase>hello</TabsPanelBase>).baseElement
+  ).toMatchSnapshot();
 });
 
 it('renders the TabsPanelBase with active=true', () => {
@@ -14,7 +16,9 @@ it('renders the TabsPanelBase with active=true', () => {
 });
 
 it('renders the TabsPanelBase with active', () => {
-  expect(render(<TabsPanelBase active>hello</TabsPanelBase>).baseElement).toMatchSnapshot();
+  expect(
+    render(<TabsPanelBase active>hello</TabsPanelBase>).baseElement
+  ).toMatchSnapshot();
 });
 
 it('renders the TabsPanelBase with active=false', () => {

package/src/TaskList/index.test.tsx

@@ -8,5 +8,7 @@ it('renders the TaskList with no prop', () => {
 });
 
 it('renders the TaskList with dense prop', () => {
-  expect(render(<TaskList dense>hello</TaskList>).baseElement).toMatchSnapshot();
+  expect(
+    render(<TaskList dense>hello</TaskList>).baseElement
+  ).toMatchSnapshot();
 });

package/src/TaskListItem/index.test.tsx

@@ -4,5 +4,7 @@ import { render } from '@testing-library/react';
 import TaskListItem from '@digigov/react-core/TaskListItem';
 
 it('renders the TaskListItem with no prop', () => {
-  expect(render(<TaskListItem>hello</TaskListItem>).baseElement).toMatchSnapshot();
+  expect(
+    render(<TaskListItem>hello</TaskListItem>).baseElement
+  ).toMatchSnapshot();
 });

package/src/TaskListItem/index.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import clsx from 'clsx';
 import Base, { BaseProps } from '@digigov/react-core/Base';
 
-export interface TaskListItemProps extends BaseProps<'li'> { }
+export interface TaskListItemProps extends BaseProps<'li'> {}
 /**
  * TaskListItem must be inside TaskList compoenent.
  */

package/src/TaskListItemContent/index.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import clsx from 'clsx';
 import Base, { BaseProps } from '@digigov/react-core/Base';
 
-export interface TaskListItemContentProps extends BaseProps<'div'> { }
+export interface TaskListItemContentProps extends BaseProps<'div'> {}
 /**
  * TaskListItemContent component is used as a content for TaskList component.
  * TaskListItemContent component must be used inside TaskList component as child, after TaskListItemHeading.

package/src/TaskListItemHeading/index.test.tsx

@@ -10,11 +10,13 @@ it('renders the TaskListItemHeading with no prop', () => {
 });
 it('renders the TaskListItemHeading with size = "md" prop', () => {
   expect(
-    render(<TaskListItemHeading size="md">hello</TaskListItemHeading>).baseElement
+    render(<TaskListItemHeading size="md">hello</TaskListItemHeading>)
+      .baseElement
   ).toMatchSnapshot();
 });
 it('renders the TaskListItemHeading with size = "sm" prop', () => {
   expect(
-    render(<TaskListItemHeading size="sm">hello</TaskListItemHeading>).baseElement
+    render(<TaskListItemHeading size="sm">hello</TaskListItemHeading>)
+      .baseElement
   ).toMatchSnapshot();
 });

package/src/TaskListItemTag/index.test.tsx

@@ -4,7 +4,9 @@ import { render } from '@testing-library/react';
 import TaskListItemTag from '@digigov/react-core/TaskListItemTag';
 
 it('renders the TaskListItemTag with no props', () => {
-  expect(render(<TaskListItemTag>hello</TaskListItemTag>).baseElement).toMatchSnapshot();
+  expect(
+    render(<TaskListItemTag>hello</TaskListItemTag>).baseElement
+  ).toMatchSnapshot();
 });
 it('renders the TaskListItemTag with status="info" props', () => {
   expect(
@@ -18,6 +20,7 @@ it('renders the TaskListItemTag with color="primary" props', () => {
 });
 it('renders the TaskListItemTag with color="secondary" props', () => {
   expect(
-    render(<TaskListItemTag color="secondary">hello</TaskListItemTag>).baseElement
+    render(<TaskListItemTag color="secondary">hello</TaskListItemTag>)
+      .baseElement
   ).toMatchSnapshot();
 });

package/src/TextArea/index.test.tsx

@@ -4,32 +4,48 @@ import { render } from '@testing-library/react';
 import TextArea from '@digigov/react-core/TextArea';
 
 it('renders the TextArea with no props', () => {
-  expect(render(<TextArea defaultValue="hello" />).baseElement).toMatchSnapshot();
+  expect(
+    render(<TextArea defaultValue="hello" />).baseElement
+  ).toMatchSnapshot();
 });
 
 it('renders the TextArea with value props', () => {
-  expect(render(<TextArea value="hello" onChange={() => {}} />).baseElement).toMatchSnapshot();
+  expect(
+    render(<TextArea value="hello" onChange={() => {}} />).baseElement
+  ).toMatchSnapshot();
 });
 
 it('renders the TextArea with rows=4', () => {
-  expect(render(<TextArea rows={4} defaultValue="hello" />).baseElement).toMatchSnapshot();
+  expect(
+    render(<TextArea rows={4} defaultValue="hello" />).baseElement
+  ).toMatchSnapshot();
 });
 
 it('renders the TextArea with rows=5', () => {
-  expect(render(<TextArea rows={5} defaultValue="hello" />).baseElement).toMatchSnapshot();
+  expect(
+    render(<TextArea rows={5} defaultValue="hello" />).baseElement
+  ).toMatchSnapshot();
 });
 
 it('renders the TextArea with rows=6', () => {
-  expect(render(<TextArea rows={6} defaultValue="hello" />).baseElement).toMatchSnapshot();
+  expect(
+    render(<TextArea rows={6} defaultValue="hello" />).baseElement
+  ).toMatchSnapshot();
 });
 
 it('renders the TextArea with rows=7', () => {
-  expect(render(<TextArea rows={7} defaultValue="hello" />).baseElement).toMatchSnapshot();
+  expect(
+    render(<TextArea rows={7} defaultValue="hello" />).baseElement
+  ).toMatchSnapshot();
 });
 
 it('renders the TextArea with rows=8', () => {
-  expect(render(<TextArea rows={8} defaultValue="hello" />).baseElement).toMatchSnapshot();
+  expect(
+    render(<TextArea rows={8} defaultValue="hello" />).baseElement
+  ).toMatchSnapshot();
 });
 it('renders the TextArea with dense prop', () => {
-  expect(render(<TextArea dense defaultValue="hello" />).baseElement).toMatchSnapshot();
+  expect(
+    render(<TextArea dense defaultValue="hello" />).baseElement
+  ).toMatchSnapshot();
 });

package/src/TextArea/index.tsx

@@ -1,2 +1,2 @@
 export * from '@digigov/react-core/TextArea/index.web';
-export {default as default} from '@digigov/react-core/TextArea/index.web';
+export { default as default } from '@digigov/react-core/TextArea/index.web';

package/src/TextArea/index.web.tsx

@@ -23,10 +23,7 @@ export interface TextAreaProps extends BaseProps<'textarea'> {
  * amount of text that’s longer than a single line.
  */
 export const TextArea = React.forwardRef<HTMLTextAreaElement, TextAreaProps>(
-  function TextArea(
-    { name, rows, error, dense, className, ...props },
-    ref
-  ) {
+  function TextArea({ name, rows, error, dense, className, ...props }, ref) {
     const defaultRows = dense ? 3 : 6;
     return (
       <Base

package/src/TextInput/index.native.tsx

@@ -1,11 +1,11 @@
-import extend from '@digigov/react-core/utils/extend.native';
-import CoreTextInput from '@digigov/react-core/TextInput/index.web';
 import clsx from 'clsx';
+import CoreTextInput from '@digigov/react-core/TextInput/index.web';
+import extend from '@digigov/react-core/utils/extend.native';
 export const TextInput = extend(CoreTextInput, ({ className, ...props }) => {
   return {
     ...props,
     className: clsx(className, {
-      'ds-input__wrapper': props.maxWidth === undefined,
+      'ds-input__wrapper': true,
       'ds-input--disabled': props.disabled,
       [`ds-input--width-${props.maxWidth}__wrapper`]:
         props.maxWidth !== undefined,