@innovaccer/design-system 2.5.0 → 2.7.0-0

package/core/components/organisms/grid/Cell.tsx

@@ -28,10 +28,12 @@ type BodyCellProps = SharedCellProps & {
   expandedState: [boolean, React.Dispatch<React.SetStateAction<boolean>>];
 };
 
-export type CellProps = (HeaderCellProps | BodyCellProps) & {
-  isHead?: boolean;
-  firstCell: boolean;
-};
+export type CellProps = Partial<HeaderCellProps> &
+  Partial<BodyCellProps> &
+  SharedCellProps & {
+    isHead?: boolean;
+    firstCell: boolean;
+  };
 
 const HeaderCell = (props: HeaderCellProps) => {
   const context = React.useContext(GridContext);
@@ -112,6 +114,8 @@ const HeaderCell = (props: HeaderCellProps) => {
 
   return (
     <div key={name} className={classes} ref={el}>
+      {/* TODO(a11y) */}
+      {/* eslint-disable-next-line */}
       <div
         className="Grid-cellContent"
         data-test="DesignSystem-Grid-cellContent"
@@ -188,6 +192,8 @@ const HeaderCell = (props: HeaderCellProps) => {
         </>
       )}
       {schema.resizable && (
+        //TODO(a11y)
+        //eslint-disable-next-line
         <span
           className="Grid-cellResize"
           onMouseDown={() => {
@@ -261,24 +267,16 @@ export const Cell = (props: CellProps) => {
     isHead,
     firstCell,
     schema,
-    // @ts-ignore
     data,
-    // @ts-ignore
     rowIndex,
     colIndex,
-    // @ts-ignore
     expandedState,
-    // @ts-ignore
     onSelectAll,
-    // @ts-ignore
     onMenuChange,
-    // @ts-ignore
     onFilterChange,
-    // @ts-ignore
     updateColumnSchema,
-    // @ts-ignore
     reorderColumn,
-  } = props;
+  } = props as CellProps;
 
   const { draggable, separator, nestedRows, ref, withCheckbox } = context;
 
@@ -319,7 +317,7 @@ export const Cell = (props: CellProps) => {
             type: pinned || '',
           };
 
-          if (from.type === to.type) reorderColumn(from.name, to.name);
+          if (from.type === to.type && reorderColumn) reorderColumn(from.name, to.name);
         }
       }}
       style={{
@@ -333,13 +331,19 @@ export const Cell = (props: CellProps) => {
           colIndex={colIndex}
           schema={schema}
           onSelectAll={onSelectAll}
-          onMenuChange={onMenuChange}
-          onFilterChange={onFilterChange}
-          updateColumnSchema={updateColumnSchema}
-          reorderColumn={reorderColumn}
+          onMenuChange={onMenuChange!}
+          onFilterChange={onFilterChange!}
+          updateColumnSchema={updateColumnSchema!}
+          reorderColumn={reorderColumn!}
         />
       ) : (
-        <BodyCell rowIndex={rowIndex} colIndex={colIndex} data={data} schema={schema} expandedState={expandedState} />
+        <BodyCell
+          rowIndex={rowIndex!}
+          colIndex={colIndex}
+          data={data!}
+          schema={schema}
+          expandedState={expandedState!}
+        />
       )}
     </div>
   );

package/core/components/organisms/grid/Grid.tsx

@@ -288,6 +288,9 @@ export interface GridState {
 
 export class Grid extends React.Component<GridProps, GridState> {
   static defaultProps: GridProps;
+  gridRef: GridRef = null;
+  isHeadSyncing = false;
+  isBodySyncing = false;
 
   constructor(props: GridProps) {
     super(props);
@@ -327,10 +330,6 @@ export class Grid extends React.Component<GridProps, GridState> {
     }
   }
 
-  gridRef: GridRef = null;
-  isHeadSyncing: boolean = false;
-  isBodySyncing: boolean = false;
-
   addScrollListeners() {
     const gridHeadEl = this.gridRef!.querySelector('.Grid-head');
     const gridBodyEl = this.gridRef!.querySelector('.Grid-body');

package/core/components/organisms/grid/GridBody.tsx

@@ -1,5 +1,4 @@
 import * as React from 'react';
-// @ts-ignore
 import VirtualScroll from 'react-dynamic-virtual-scroll';
 import { GridRow } from './GridRow';
 import { GridState, onSelectFn, Schema, updatePrevPageInfoFunction } from './Grid';

package/core/components/organisms/grid/GridContext.ts

@@ -1,4 +1,4 @@
-import React from 'react';
+import * as React from 'react';
 import { GridProps } from '@/index.type';
 import { GridRef } from './Grid';
 import defaultProps from './defaultProps';

package/core/components/organisms/grid/GridRow.tsx

@@ -46,6 +46,8 @@ export const GridRow = (props: GridRowProps) => {
     if (!show || !withCheckbox) return null;
 
     return (
+      // TODO(a11y)
+      // eslint-disable-next-line
       <div className="Grid-cell Grid-cell--body Grid-cell--checkbox" onClick={(e) => e.stopPropagation()}>
         {loading ? (
           <Placeholder />
@@ -102,6 +104,8 @@ export const GridRow = (props: GridRowProps) => {
 
   return (
     <div className={wrapperClasses}>
+      {/* TODO(a11y)  */}
+      {/* eslint-disable-next-line */}
       <div className={rowClasses} onClick={onClickHandler} ref={rowRef}>
         {renderSchema(leftPinnedSchema, !!leftPinnedSchema.length, 'left')}
         {renderSchema(unpinnedSchema, !leftPinnedSchema.length && !!unpinnedSchema.length)}

package/core/components/organisms/grid/__stories__/_common_/editableSchema.tsx

@@ -1,7 +1,5 @@
 import * as React from 'react';
 import { Schema } from '../../Grid';
-// @ts-ignore
-import iconImg from './image.png';
 import { GridCellProps } from '../../GridCell';
 import { PlaceholderParagraph, EditableInput } from '@/index';
 
@@ -89,7 +87,7 @@ const schema: Schema = [
     resizable: true,
     align: 'center',
     cellType: 'ICON',
-    translate: (_) => ({
+    translate: () => ({
       icon: 'events',
     }),
     // separator: true,

package/core/components/organisms/grid/__stories__/_common_/fetchData.ts

@@ -1,12 +1,12 @@
-import { fetchDataFunction, Schema, RowData } from '../../Grid';
+import { fetchDataFunction, RowData } from '../../Grid';
 import data from './data';
-const schema: Schema = require('./schema').default;
+import schema from './schema';
 import { filterData, sortData } from '../../utility';
 
 export const fetchData: fetchDataFunction = (options) => {
   const { page, pageSize, sortingList, filterList, searchTerm } = options;
 
-  const onSearch = (d: RowData, searchTerm: string = '') => {
+  const onSearch = (d: RowData, searchTerm = '') => {
     return (
       d.firstName.toLowerCase().match(searchTerm.toLowerCase()) ||
       d.lastName.toLowerCase().match(searchTerm.toLowerCase())

package/core/components/organisms/grid/__stories__/_common_/loaderSchema.ts

@@ -1,5 +1,3 @@
-// @ts-ignore
-import image from './image.png';
 import { GridProps } from '../../Grid';
 import schema from './schema';
 

package/core/components/organisms/grid/__stories__/_common_/schema.tsx

@@ -1,7 +1,5 @@
 import * as React from 'react';
 import { Schema } from '../../Grid';
-// @ts-ignore
-import iconImg from './image.png';
 import { Icon, GridCell } from '@/index';
 
 const schema: Schema = [
@@ -88,7 +86,7 @@ const schema: Schema = [
     resizable: true,
     align: 'center',
     cellType: 'ICON',
-    translate: (_) => ({
+    translate: () => ({
       icon: 'events',
     }),
     // separator: true,

package/core/components/organisms/grid/__stories__/_common_/simpleLoaderSchema.ts

@@ -1,5 +1,3 @@
-// @ts-ignore
-import image from './image.png';
 import { GridProps } from '../../Grid';
 
 const loaderSchema: GridProps['loaderSchema'] = [

package/core/components/organisms/grid/__stories__/_common_/statusSchema.ts

@@ -1,6 +1,4 @@
 import { Schema } from '../../Grid';
-// @ts-ignore
-import iconImg from './image.png';
 
 const schema: Schema = [
   {

package/core/components/organisms/horizontalNav/HorizontalNav.tsx

@@ -69,6 +69,8 @@ export const HorizontalNav = (props: HorizontalNavProps) => {
     });
 
     return (
+      // TODO(a11y)
+      // eslint-disable-next-line
       <div data-test="DesignSystem-HorizontalNav" key={index} className={menuClasses} onClick={onClickHandler(menu)}>
         {renderIcon(menu, isActive)}
         <Text

package/core/components/organisms/inlineMessage/InlineMessage.tsx

@@ -2,8 +2,8 @@ import * as React from 'react';
 import classNames from 'classnames';
 import { Icon, Text } from '@/index';
 import { BaseProps, extractBaseProps } from '@/utils/types';
+import { MessageAppearance } from '@/common.type';
 
-export type Appearance = 'default' | 'alert' | 'info' | 'success' | 'warning';
 const IconMapping = {
   success: 'check_circle',
   info: 'info',
@@ -15,7 +15,7 @@ export interface InlineMessageProps extends BaseProps {
   /**
    * Color of `Inline Message`
    */
-  appearance: Appearance;
+  appearance: MessageAppearance;
   /**
    * Description of `Inline Message`
    */
@@ -53,11 +53,9 @@ export const InlineMessage = (props: InlineMessageProps) => {
           className={IconClass}
         />
       )}
-      <div>
-        <Text data-test="DesignSystem-InlineMessage--Description" className={DescriptionClass}>
-          {description}
-        </Text>
-      </div>
+      <Text data-test="DesignSystem-InlineMessage--Description" className={DescriptionClass}>
+        {description}
+      </Text>
     </div>
   );
 };

package/core/components/organisms/inlineMessage/__tests__/InlineMessage.test.tsx

@@ -1,10 +1,11 @@
 import * as React from 'react';
 import { render, screen } from '@testing-library/react';
 import { testHelper, filterUndefined, valueHelper, testMessageHelper } from '@/utils/testHelper';
-import { Appearance, InlineMessage } from '../InlineMessage';
+import { InlineMessage } from '../InlineMessage';
 import { InlineMessageProps as Props } from '@/index.type';
+import { MessageAppearance } from '@/common.type';
 
-const appearance: Appearance[] = ['default', 'alert', 'info', 'success', 'warning'];
+const appearance: MessageAppearance[] = ['default', 'alert', 'info', 'success', 'warning'];
 
 const description = 'Inline Message here.';
 

package/core/components/organisms/inlineMessage/__tests__/__snapshots__/InlineMessage.test.tsx.snap

@@ -16,14 +16,12 @@ exports[`InlineMessage component
       >
         error_round
       </i>
-      <div>
-        <span
-          class="Text Text--default Text--regular InlineMessage-text--alert"
-          data-test="DesignSystem-InlineMessage--Description"
-        >
-          Inline Message here.
-        </span>
-      </div>
+      <span
+        class="Text Text--default Text--regular InlineMessage-text--alert"
+        data-test="DesignSystem-InlineMessage--Description"
+      >
+        Inline Message here.
+      </span>
     </div>
   </div>
 </body>
@@ -38,14 +36,12 @@ exports[`InlineMessage component
       class="InlineMessage"
       data-test="DesignSystem-InlineMessage"
     >
-      <div>
-        <span
-          class="Text Text--default Text--regular InlineMessage-text--default"
-          data-test="DesignSystem-InlineMessage--Description"
-        >
-          Inline Message here.
-        </span>
-      </div>
+      <span
+        class="Text Text--default Text--regular InlineMessage-text--default"
+        data-test="DesignSystem-InlineMessage--Description"
+      >
+        Inline Message here.
+      </span>
     </div>
   </div>
 </body>
@@ -67,14 +63,12 @@ exports[`InlineMessage component
       >
         info_round
       </i>
-      <div>
-        <span
-          class="Text Text--default Text--regular InlineMessage-text--info"
-          data-test="DesignSystem-InlineMessage--Description"
-        >
-          Inline Message here.
-        </span>
-      </div>
+      <span
+        class="Text Text--default Text--regular InlineMessage-text--info"
+        data-test="DesignSystem-InlineMessage--Description"
+      >
+        Inline Message here.
+      </span>
     </div>
   </div>
 </body>
@@ -96,14 +90,12 @@ exports[`InlineMessage component
       >
         check_circle_round
       </i>
-      <div>
-        <span
-          class="Text Text--default Text--regular InlineMessage-text--success"
-          data-test="DesignSystem-InlineMessage--Description"
-        >
-          Inline Message here.
-        </span>
-      </div>
+      <span
+        class="Text Text--default Text--regular InlineMessage-text--success"
+        data-test="DesignSystem-InlineMessage--Description"
+      >
+        Inline Message here.
+      </span>
     </div>
   </div>
 </body>
@@ -125,14 +117,12 @@ exports[`InlineMessage component
       >
         warning_round
       </i>
-      <div>
-        <span
-          class="Text Text--default Text--regular InlineMessage-text--warning"
-          data-test="DesignSystem-InlineMessage--Description"
-        >
-          Inline Message here.
-        </span>
-      </div>
+      <span
+        class="Text Text--default Text--regular InlineMessage-text--warning"
+        data-test="DesignSystem-InlineMessage--Description"
+      >
+        Inline Message here.
+      </span>
     </div>
   </div>
 </body>

package/core/components/organisms/list/__stories__/_common_/types.tsx

@@ -1,4 +1,7 @@
 import { SyncListProps, AsyncListProps } from '@/components/organisms/list';
 
+// TODO(eslint): Fix this
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
 export const SyncList = (_props: SyncListProps) => {};
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
 export const AsyncList = (_props: AsyncListProps) => {};

package/core/components/organisms/list/__stories__/index.story.tsx

@@ -12,22 +12,8 @@ import { SyncList, AsyncList } from './_common_/types';
 export const all = () => {
   const async = boolean('async', true);
 
-  let loading;
-  let error;
-  let applyData;
-  let applySchema;
   const applyLoaderSchema = boolean('applyLoaderSchema', true);
 
-  if (!async) {
-    loading = boolean('loading', false);
-
-    error = boolean('error', false);
-
-    applySchema = boolean('applySchema', true);
-
-    applyData = boolean('applyData', true);
-  }
-
   const type = select('type', ['resource', 'data'], 'resource');
 
   const size = select('size', ['comfortable', 'standard', 'compressed', 'tight'], 'comfortable');
@@ -46,8 +32,6 @@ export const all = () => {
 
   const multipleSorting = boolean('multipleSorting', false);
 
-  const headCellTooltip = boolean('headCellTooltip', false);
-
   const separator = boolean('separator', false);
 
   let dataAttr = {};

package/core/components/organisms/navigation/VerticalNavigation.tsx

@@ -137,6 +137,8 @@ export const VerticalNavigation = (props: VerticalNavigationProps) => {
 
     return (
       <div key={index} data-test="DesignSystem-Navigation-VerticalNavigation--menuWrapper">
+        {/* TODO(a11y) */}
+        {/* eslint-disable-next-line */}
         <div
           data-test="DesignSystem-Navigation-VerticalNavigation--menuItem"
           className={menuClasses}
@@ -179,6 +181,8 @@ export const VerticalNavigation = (props: VerticalNavigationProps) => {
               });
 
               return (
+                // TODO(a11y)
+                // eslint-disable-next-line
                 <div
                   data-test="DesignSystem-Navigation-VerticalNavigation--subMenu"
                   key={ind}

package/core/components/organisms/table/Table.tsx

@@ -23,7 +23,7 @@ export interface ErrorTemplateProps {
 
 export type FilterPosition = 'GRID' | 'HEADER';
 
-interface SyncProps {
+interface TableSyncProps {
   /**
    * <pre className="DocPage-codeBlock">
    *    Data: RowData[]
@@ -326,7 +326,7 @@ interface SharedTableProps extends BaseProps {
   filterPosition: FilterPosition;
 }
 
-export type SyncTableProps = SharedTableProps & SyncProps;
+export type SyncTableProps = SharedTableProps & TableSyncProps;
 export type AsyncTableProps = SharedTableProps & AsyncProps;
 export type TableProps = AsyncTableProps & SyncTableProps;
 
@@ -718,6 +718,7 @@ export class Table extends React.Component<TableProps, TableState> {
         <div className="Table-grid">
           <Grid
             {...this.state}
+            key={this.state.searchTerm}
             updateData={this.updateData}
             updateSchema={this.updateSchema}
             updateSortingList={this.updateSortingList}

package/core/components/organisms/table/__stories__/CompressedTable.story.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import * as React from 'react';
 import { Card, Table } from '@/index';
 import { TableProps } from '@/index.type';
 import { AsyncTable, SyncTable } from './_common_/types';

package/core/components/organisms/table/__stories__/DataTable.story.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import * as React from 'react';
 import { Card, Table } from '@/index';
 import { TableProps } from '@/index.type';
 import { AsyncTable, SyncTable } from './_common_/types';

package/core/components/organisms/table/__stories__/NestedTableWithNestedCard.story.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import * as React from 'react';
 import { Card, Table, CardSubdued, Text } from '@/index';
 import { AsyncTable, SyncTable } from './_common_/types';
 import { TableProps } from '@/index.type';

package/core/components/organisms/table/__stories__/PinnedColumn.story.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import * as React from 'react';
 import { Card, Table } from '@/index';
 import { TableProps } from '@/index.type';
 import { AsyncTable, SyncTable } from './_common_/types';

package/core/components/organisms/table/__stories__/ResourceTable.story.tsx

@@ -135,7 +135,7 @@ export const resourceTable = () => {
           <div style={{ width: 'var(--spacing-3)' }} className="ml-6">
             <Dropdown
               triggerOptions={{
-                customTrigger: (_label: string) => <Button icon="more_horiz" appearance="transparent" />,
+                customTrigger: () => <Button icon="more_horiz" appearance="transparent" />,
               }}
               menu={true}
               align="left"
@@ -268,6 +268,7 @@ const customCode = `
                   { label: 'Edit', value: 'Edit' },
                   { label: 'Delete', value: 'Delete' }
                 ]}
+                popoverOptions={{appendToBody:false}}
               />
             </div>
           </div>
@@ -286,7 +287,7 @@ const customCode = `
         withHeader={true}
         filterPosition="HEADER"
         onSelect={(rowIndex, selected, selectedList, selectAll) =>
-          console.log(\`\on-select:- rowIndex: \${rowIndex} selected: \${selected} selectedList: \${JSON.stringify(selectedList)} selectAll: \${selectAll}\`)
+          console.log(\`on-select:- rowIndex: \${rowIndex} selected: \${selected} selectedList: \${JSON.stringify(selectedList)} selectAll: \${selectAll}\`)
         }
         headerOptions={{
           withSearch: true
@@ -304,7 +305,7 @@ const customCode = `
         withPagination={true}
         paginationType="basic"
         pageSize={4}
-        onPageChange={newPage => console.log(\`\on-page-change:- \${newPage}\`)}
+        onPageChange={newPage => console.log(\`on-page-change:- \${newPage}\`)}
       />
     </Card>
   );

package/core/components/organisms/table/__stories__/Selection.story.tsx

@@ -239,7 +239,7 @@ const customCode = `
           withHeader={true}
           withCheckbox={true}
           onSelect={(rowIndex, selected, selectedList, selectAll) =>
-            console.log(\`\on-select:- rowIndex: \${rowIndex} selected: \${selected} selectedList: \${JSON.stringify(selectedList)} selectAll: \${selectAll}\`)
+            console.log(\`on-select:- rowIndex: \${rowIndex} selected: \${selected} selectedList: \${JSON.stringify(selectedList)} selectAll: \${selectAll}\`)
           }
           headerOptions={{
             withSearch: true
@@ -252,7 +252,7 @@ const customCode = `
           }}
           withPagination={true}
           pageSize={5}
-          onPageChange={newPage => console.log(\`\on-page-change:- \${newPage}\`)}
+          onPageChange={newPage => console.log(\`on-page-change:- \${newPage}\`)}
         />
       </Card>
   );

package/core/components/organisms/table/__stories__/StandardTable.story.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import * as React from 'react';
 import { Card, Table } from '@/index';
 import { TableProps } from '@/index.type';
 import { AsyncTable, SyncTable } from './_common_/types';

package/core/components/organisms/table/__stories__/TableAsDescriptionList.story.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import * as React from 'react';
 import { Card, List, Text, Button } from '@/index';
 import { TableProps } from '@/index.type';
 import { AsyncTable, SyncTable } from './_common_/types';
@@ -162,7 +162,7 @@ const customCode = `() => {
                 appearance="transparent"
                 onClick={e => e.stopPropagation()}
               >
-                {\`\can \${rights}\`}
+                {\`can \${rights}\`}
               </Button>
             );
           }

package/core/components/organisms/table/__stories__/TableAsOptionList.story.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import * as React from 'react';
 import { Card, List, Text } from '@/index';
 import { TableProps } from '@/index.type';
 import { AsyncTable, SyncTable } from './_common_/types';
@@ -109,7 +109,7 @@ const customCode = `() => {
             );
           }}
           onRowClick={(rowData, rowIndex) =>
-            console.log(\`\on-row-click:- rowIndex: \${rowIndex} data: \${JSON.stringify(rowData)}\`)
+            console.log(\`on-row-click:- rowIndex: \${rowIndex} data: \${JSON.stringify(rowData)}\`)
           }
         />
       </Card>

package/core/components/organisms/table/__stories__/TightStory.story.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import * as React from 'react';
 import { Card, Table } from '@/index';
 import { TableProps } from '@/index.type';
 import { AsyncTable, SyncTable } from './_common_/types';

package/core/components/organisms/table/__stories__/_common_/types.tsx

@@ -1,4 +1,7 @@
 import { SyncTableProps, AsyncTableProps } from '@/components/organisms/table';
 
+// TODO(eslint): Fix this
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
 export const SyncTable = (_props: SyncTableProps) => {};
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
 export const AsyncTable = (_props: AsyncTableProps) => {};