@innovaccer/design-system 2.6.0 → 2.7.0-0

package/core/components/atoms/button/Button.tsx

@@ -4,9 +4,9 @@ import classNames from 'classnames';
 import { BaseProps, BaseHtmlProps } from '@/utils/types';
 
 export type ButtonType = 'button' | 'submit' | 'reset';
-export type Appearance = 'basic' | 'primary' | 'success' | 'alert' | 'transparent';
-export type Size = 'tiny' | 'regular' | 'large';
-export type Alignment = 'left' | 'right';
+export type ButtonAppearance = 'basic' | 'primary' | 'success' | 'alert' | 'transparent';
+export type ButtonSize = 'tiny' | 'regular' | 'large';
+export type ButtonAlignment = 'left' | 'right';
 
 export interface ButtonProps extends BaseProps, BaseHtmlProps<HTMLButtonElement> {
   /**
@@ -17,12 +17,15 @@ export interface ButtonProps extends BaseProps, BaseHtmlProps<HTMLButtonElement>
    * The size of `Button`
    * @default "regular"
    */
-  size?: Size;
+  size?: ButtonSize;
   /**
    * Color of the `Button`
+   *
+   * **'success' has been deprecated and all success button types will now be changed to primary button automatically**
+   *
    * @default "basic"
    */
-  appearance?: Appearance;
+  appearance?: ButtonAppearance;
   /**
    * Disables the `Button`, making it unable to be pressed
    */
@@ -54,7 +57,7 @@ export interface ButtonProps extends BaseProps, BaseHtmlProps<HTMLButtonElement>
    * Align icon left or right
    * @default "left"
    */
-  iconAlign?: Alignment;
+  iconAlign?: ButtonAlignment;
   /**
    * Determines if size of icon is large
    *
@@ -88,7 +91,7 @@ export interface ButtonProps extends BaseProps, BaseHtmlProps<HTMLButtonElement>
   onMouseLeave?: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
 }
 
-const sizeMapping: Record<Size, number> = {
+const sizeMapping: Record<ButtonSize, number> = {
   tiny: 12,
   regular: 16,
   large: 20,

package/core/components/atoms/button/__stories__/index.story.tsx

@@ -7,7 +7,7 @@ import Button from '../Button';
 export const all = () => {
   const type = select('type', ['button', 'submit', 'reset'], undefined);
 
-  const appearance = select('appearance', ['basic', 'primary', 'success', 'alert', 'transparent'], undefined);
+  const appearance = select('appearance', ['basic', 'primary', 'alert', 'transparent'], undefined);
 
   const size = select('size', ['tiny', 'regular', 'large'], undefined);
 

package/core/components/atoms/button/__stories__/variants/Appearance.story.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { text } from '@storybook/addon-knobs';
 import { action } from '@storybook/addon-actions';
-import Button, { Appearance } from '../../Button';
+import Button, { ButtonAppearance } from '../../Button';
 import Text from '@/components/atoms/text';
 
 // CSF format story
@@ -10,7 +10,7 @@ export const appearance = () => {
   const expanded = false;
   const loading = false;
 
-  const appearances: Appearance[] = ['basic', 'primary', 'success', 'alert', 'transparent'];
+  const appearances: ButtonAppearance[] = ['basic', 'primary', 'alert', 'transparent'];
 
   const children = text('children', 'Button');
 

package/core/components/atoms/button/__stories__/variants/Expanded.story.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { text } from '@storybook/addon-knobs';
 import { action } from '@storybook/addon-actions';
-import Button, { Appearance } from '../../Button';
+import Button, { ButtonAppearance } from '../../Button';
 import Text from '@/components/atoms/text';
 
 // CSF format story
@@ -10,7 +10,7 @@ export const expanded = () => {
   const ButtonExpanded = true;
   const loading = false;
 
-  const appearances: Appearance[] = ['basic', 'primary', 'success', 'alert'];
+  const appearances: ButtonAppearance[] = ['basic', 'primary', 'alert'];
 
   const children = text('children', 'Button');
 

package/core/components/atoms/button/__stories__/variants/icon/IconLeft.story.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { text } from '@storybook/addon-knobs';
 import { action } from '@storybook/addon-actions';
-import Button, { Size } from '../../../Button';
+import Button, { ButtonSize } from '../../../Button';
 import Text from '@/components/atoms/text';
 
 // CSF format story
@@ -11,7 +11,7 @@ export const iconLeft = () => {
   const loading = false;
   const iconAlign = 'left';
 
-  const size: Size[] = ['tiny', 'regular', 'large'];
+  const size: ButtonSize[] = ['tiny', 'regular', 'large'];
 
   const icon = text('icon', 'refresh');
   const children = text('children', 'Button');

package/core/components/atoms/button/__stories__/variants/icon/IconRight.story.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { text } from '@storybook/addon-knobs';
 import { action } from '@storybook/addon-actions';
-import Button, { Size } from '../../../Button';
+import Button, { ButtonSize } from '../../../Button';
 import Text from '@/components/atoms/text';
 
 // CSF format story
@@ -11,7 +11,7 @@ export const iconRight = () => {
   const loading = false;
   const iconAlign = 'right';
 
-  const size: Size[] = ['tiny', 'regular', 'large'];
+  const size: ButtonSize[] = ['tiny', 'regular', 'large'];
 
   const icon = text('icon', 'refresh');
   const children = text('children', 'Button');

package/core/components/atoms/button/__tests__/Button.test.tsx

@@ -10,7 +10,7 @@ const buttonType = ['button', 'submit', 'reset'];
 const icon = 'events';
 const iconAlign = ['left', 'right'];
 const sizes: Props['size'][] = ['tiny', 'regular', 'large'];
-const appearance = ['basic', 'primary', 'success', 'alert', 'transparent'];
+const appearance = ['basic', 'primary', 'alert', 'transparent'];
 const sizeMapping: Record<MakeRequired<Props['size']>, number> = {
   tiny: 12,
   regular: 16,

package/core/components/atoms/button/__tests__/__snapshots__/Button.test.tsx.snap

@@ -306,108 +306,6 @@ exports[`Button component
 </body>
 `;
 
-exports[`Button component 
-  appearance: "success", disabled: true
- 1`] = `
-<body>
-  <div>
-    <button
-      class="Button Button--regular Button--success Button--iconAlign-left"
-      data-test="DesignSystem-Button"
-      disabled=""
-      tabindex="0"
-    >
-      Button
-    </button>
-  </div>
-</body>
-`;
-
-exports[`Button component 
-  appearance: "success", expanded: false
- 1`] = `
-<body>
-  <div>
-    <button
-      class="Button Button--regular Button--success Button--iconAlign-left"
-      data-test="DesignSystem-Button"
-      tabindex="0"
-    >
-      Button
-    </button>
-  </div>
-</body>
-`;
-
-exports[`Button component 
-  appearance: "success", expanded: true
- 1`] = `
-<body>
-  <div>
-    <button
-      class="Button Button--expanded Button--regular Button--success Button--iconAlign-left"
-      data-test="DesignSystem-Button"
-      tabindex="0"
-    >
-      Button
-    </button>
-  </div>
-</body>
-`;
-
-exports[`Button component 
-  appearance: "success", loading: true
- 1`] = `
-<body>
-  <div>
-    <button
-      class="Button Button--regular Button--success Button--iconAlign-left"
-      data-test="DesignSystem-Button"
-      disabled=""
-      tabindex="0"
-    >
-      <svg
-        class="Spinner Spinner--small Button-spinner"
-        data-test="DesignSystem-Button--Spinner"
-        viewBox="0 0 50 50"
-      >
-        <circle
-          class="Circle Circle--white"
-          cx="25"
-          cy="25"
-          fill="none"
-          r="20"
-          stroke-miterlimit="10"
-          stroke-width="4"
-        />
-      </svg>
-      <span
-        class="Text Text--default Text--regular Button-text Button-text--hidden"
-        data-test="DesignSystem-Text"
-      >
-        Button
-      </span>
-    </button>
-  </div>
-</body>
-`;
-
-exports[`Button component 
-  appearance: "success", selected: true
- 1`] = `
-<body>
-  <div>
-    <button
-      class="Button Button--regular Button--success Button--iconAlign-left"
-      data-test="DesignSystem-Button"
-      tabindex="0"
-    >
-      Button
-    </button>
-  </div>
-</body>
-`;
-
 exports[`Button component 
   appearance: "transparent", disabled: true
  1`] = `
@@ -957,41 +855,6 @@ exports[`Button component with no children
 </body>
 `;
 
-exports[`Button component with no children 
-  appearance: "success", loading: true
- 1`] = `
-<body>
-  <div>
-    <button
-      class="Button Button--regular Button--regularSquare Button--success"
-      data-test="DesignSystem-Button"
-      disabled=""
-      tabindex="0"
-    >
-      <svg
-        class="Spinner Spinner--small Button-spinner"
-        data-test="DesignSystem-Button--Spinner"
-        viewBox="0 0 50 50"
-      >
-        <circle
-          class="Circle Circle--white"
-          cx="25"
-          cy="25"
-          fill="none"
-          r="20"
-          stroke-miterlimit="10"
-          stroke-width="4"
-        />
-      </svg>
-      <span
-        class="Text Text--default Text--regular Button-text Button-text--hidden"
-        data-test="DesignSystem-Text"
-      />
-    </button>
-  </div>
-</body>
-`;
-
 exports[`Button component with no children 
   appearance: "transparent", loading: true
  1`] = `

package/core/components/atoms/card/__stories__/empty.story.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { Card, CardBody, CardHeader, Heading, Row, Column, Paragraph, Button, EmptyState } from '@/index';
+import { Card, CardBody, CardHeader, Heading, Row, Column, Button, EmptyState } from '@/index';
 import image from './assets/empty.png';
 
 // CSF format story

package/core/components/atoms/card/__stories__/nested.story.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import * as React from 'react';
 import { Card, Row, Column, CardHeader, CardBody, Heading, Text, Badge } from '@/index';
 
 export const CardWithinACard = () => {

package/core/components/atoms/card/__stories__/scroll.story.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import * as React from 'react';
 import { Card, Text, List, CardHeader, Heading, Paragraph } from '@/index';
 import { data } from './data';
 

package/core/components/atoms/checkbox/Checkbox.tsx

@@ -4,16 +4,15 @@ import Text from '@/components/atoms/text';
 import Icon from '@/components/atoms/icon';
 import { BaseProps, OmitNativeProps } from '@/utils/types';
 import uidGenerator from '@/utils/uidGenerator';
-export type Size = 'regular' | 'tiny';
-
-type ChangeEvent = React.ChangeEvent<HTMLInputElement>;
+import { ChangeEvent } from '@/common.type';
+export type CheckBoxSize = 'regular' | 'tiny';
 
 export interface CheckboxProps extends BaseProps, OmitNativeProps<HTMLInputElement, 'onChange'> {
   /**
    * Size of the `Checkbox`
    * @default "regular"
    */
-  size?: Size;
+  size?: CheckBoxSize;
   /**
    * Default value of checked (Used in case of uncontrolled `Checkbox`)
    */
@@ -85,17 +84,17 @@ export const Checkbox = React.forwardRef<HTMLInputElement, CheckboxProps>((props
     return ref.current as HTMLInputElement;
   });
 
-  const [checked, setChecked] = React.useState(props.checked === undefined ? defaultChecked : props.checked);
+  const [checked, setChecked] = React.useState(checkedProp === undefined ? defaultChecked : checkedProp);
 
   React.useEffect(() => {
     setIndeterminate(indeterminate);
   }, [indeterminate]);
 
   React.useEffect(() => {
-    if (props.checked !== undefined) {
-      setChecked(props.checked);
+    if (checkedProp !== undefined) {
+      setChecked(checkedProp);
     }
-  }, [props.checked]);
+  }, [checkedProp]);
 
   const CheckboxClass = classNames(
     {
@@ -129,7 +128,7 @@ export const Checkbox = React.forwardRef<HTMLInputElement, CheckboxProps>((props
   };
 
   const onChangeHandler = (e: React.ChangeEvent<HTMLInputElement>) => {
-    if (props.checked === undefined) {
+    if (checkedProp === undefined) {
       setChecked(e.target.checked);
       setIndeterminate(e.target.indeterminate);
     }

package/core/components/atoms/checkbox/__stories__/variants/Size.story.tsx

@@ -1,12 +1,12 @@
 import * as React from 'react';
 import { text } from '@storybook/addon-knobs';
 import Checkbox from '../../index';
-import { Size } from '../../Checkbox';
+import { CheckBoxSize } from '../../Checkbox';
 import Text from '@/components/atoms/text';
 
 // CSF format story
 export const size = () => {
-  const sizes: Size[] = ['tiny', 'regular'];
+  const sizes: CheckBoxSize[] = ['tiny', 'regular'];
   const label = text('label', 'Checkbox');
   return (
     <div className="d-flex">

package/core/components/atoms/chip/Chip.tsx

@@ -3,7 +3,7 @@ import GenericChip from '../_chip';
 import classNames from 'classnames';
 import { BaseProps, extractBaseProps } from '@/utils/types';
 
-export type Type = 'action' | 'selection' | 'input';
+export type ChipType = 'action' | 'selection' | 'input';
 export type Name = number | string;
 
 export interface ChipProps extends BaseProps {
@@ -30,7 +30,7 @@ export interface ChipProps extends BaseProps {
   /**
    * Type of chip
    */
-  type: Type;
+  type: ChipType;
   /**
    * Handler to be called when Chip is closed
    */
@@ -60,6 +60,7 @@ export const Chip = (props: ChipProps) => {
       [`Chip-${type}--disabled`]: disabled,
       [`Chip--${type}`]: type && !disabled,
       [`Chip-${type}--selected`]: selected && !disabled,
+      [`Chip-selection--selectedDisabled`]: type === 'selection' && selected && disabled,
     },
     className
   );

package/core/components/atoms/chip/__stories__/variants/Selection.story.tsx

@@ -42,6 +42,23 @@ export const Selection = () => {
         <br />
         <Text weight="strong">Selected: true</Text>
       </div>
+      <div className="mr-9">
+        <Chip
+          icon={icon}
+          label={label}
+          clearButton={true}
+          type="selection"
+          onClose={action(`onClose: ${name}`)}
+          onClick={action(`onClick: ${name}`)}
+          selected={true}
+          disabled={true}
+          name={'chip'}
+        />
+        <br />
+        <Text weight="strong">Selected: true</Text>
+        <br></br>
+        <Text weight="strong">Disabled: true</Text>
+      </div>
     </div>
   );
 };

package/core/components/atoms/chip/__stories__/variants/Type.story.tsx

@@ -1,10 +1,10 @@
 import * as React from 'react';
 import { boolean, text } from '@storybook/addon-knobs';
-import Chip, { Type } from '../../Chip';
+import Chip, { ChipType } from '../../Chip';
 import { action } from '@storybook/addon-actions';
 import Text from '@/components/atoms/text';
 export const Types = () => {
-  const types: Type[] = ['action', 'selection', 'input'];
+  const types: ChipType[] = ['action', 'selection', 'input'];
   const icon = text('icon', 'assessment');
   const label = text('label', 'ChipLabel');
   const clearButton = boolean('clearButton', true);

package/core/components/atoms/chip/__tests__/Chip.test.tsx

@@ -131,4 +131,11 @@ describe('Chip component', () => {
     fireEvent.click(onClose);
     expect(FunctionValue).toHaveBeenCalled();
   });
+
+  it('renders chip component with prop: selected, disabled and type selection', () => {
+    const { queryByTestId } = render(
+      <Chip label="Chip" name="Chip" type="selection" disabled={true} selected={true} />
+    );
+    expect(queryByTestId('DesignSystem-Chip--GenericChip')).toHaveClass('Chip-selection--selectedDisabled');
+  });
 });

package/core/components/atoms/chipGroup/__tests__/__snapshots__/chipGroup.test.tsx.snap

@@ -39,7 +39,7 @@ exports[`ChipGroup component
           data-test="DesignSystem-ChipGroup--Chip"
         >
           <i
-            class="material-icons material-icons-round Icon Icon--default Chip-icon Chip-icon--left"
+            class="material-icons material-icons-round Icon Chip-icon Chip-icon--left"
             data-test="DesignSystem-GenericChip--Icon"
             style="font-size: 16px; width: 16px;"
           >
@@ -52,7 +52,7 @@ exports[`ChipGroup component
             Input
           </span>
           <i
-            class="material-icons material-icons-round Icon Icon--subtle Chip-icon Chip-icon--right cursor-pointer"
+            class="material-icons material-icons-round Icon Chip-icon Chip-icon--right cursor-pointer"
             data-test="DesignSystem-GenericChip--clearButton"
             role="button"
             style="font-size: 16px; width: 16px;"
@@ -77,7 +77,7 @@ exports[`ChipGroup component
             assessment_round
           </i>
           <span
-            class="Text Text--default Text--regular"
+            class="Text Text--link Text--regular"
             data-test="DesignSystem-GenericChip--Text"
           >
             Selection
@@ -101,7 +101,7 @@ exports[`ChipGroup component
           data-test="DesignSystem-ChipGroup--Chip"
         >
           <i
-            class="material-icons material-icons-round Icon Icon--default Chip-icon Chip-icon--left"
+            class="material-icons material-icons-round Icon Chip-icon Chip-icon--left"
             data-test="DesignSystem-GenericChip--Icon"
             style="font-size: 16px; width: 16px;"
           >
@@ -114,7 +114,7 @@ exports[`ChipGroup component
             Selection
           </span>
           <i
-            class="material-icons material-icons-round Icon Icon--subtle Chip-icon Chip-icon--right cursor-pointer"
+            class="material-icons material-icons-round Icon Chip-icon Chip-icon--right cursor-pointer"
             data-test="DesignSystem-GenericChip--clearButton"
             role="button"
             style="font-size: 16px; width: 16px;"

package/core/components/atoms/chipGroup/__tests__/chipGroup.test.tsx

@@ -3,9 +3,9 @@ import { render, fireEvent } from '@testing-library/react';
 import { testHelper, filterUndefined, valueHelper, testMessageHelper } from '@/utils/testHelper';
 import { ChipGroup } from '@/index';
 import { ChipGroupProps as Props } from '@/index.type';
-import { Type } from '../../chip/Chip';
+import { ChipType } from '../../chip/Chip';
 
-const type: Type[] = ['action', 'input', 'selection'];
+const type: ChipType[] = ['action', 'input', 'selection'];
 const FunctionValue = jest.fn();
 const onClick = jest.fn();
 const onClose = jest.fn();

package/core/components/atoms/chipGroup/_stories_/index.story.tsx

@@ -1,9 +1,9 @@
 import * as React from 'react';
-import { Type } from '../../chip/Chip';
+import { ChipType } from '../../chip/Chip';
 import { action } from '@storybook/addon-actions';
 import { ChipGroup } from '../ChipGroup';
 export const all = () => {
-  const type: Type[] = ['action', 'input', 'selection'];
+  const type: ChipType[] = ['action', 'input', 'selection'];
   const list = [
     {
       label: 'Action',

package/core/components/atoms/dropdown/Dropdown.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { debounce } from 'throttle-debounce';
-import DropdownList, { DropdownListProps, SelectAll, Selected, ChangeEvent } from './DropdownList';
-import { OptionSchema as Option } from './option';
+import DropdownList, { DropdownListProps, SelectAll, Selected } from './DropdownList';
+import { OptionSchema } from './option';
 import {
   getSearchedOptions,
   getSelectAll,
@@ -12,11 +12,12 @@ import {
   _isSelectAllPresent,
 } from './utility';
 import { BaseProps } from '@/utils/types';
+import { ChangeEvent } from '@/common.type';
 
 type fetchOptionsFunction = (searchTerm: string) => Promise<{
   searchTerm?: string;
   count: number;
-  options: Option[];
+  options: OptionSchema[];
 }>;
 
 export type EventType =
@@ -33,7 +34,7 @@ interface ControlledProps {
    * Array of selected options <br/>
    *  **Denotes `Controlled Dropdown`**
    */
-  selected?: Option[];
+  selected?: OptionSchema[];
   /**
    * Callback function to handle different event types in controlled dropdown <br/>
    * **Event type here refers to `clicking on option` / `clicking on Clear, Cancel or Apply button`** <br/>
@@ -49,7 +50,7 @@ interface ControlledProps {
    * | 'apply-selected' | Array of previously selected options | Array of recently selected options |
    * | 'cancel-selected' | Array of previously selected options | Array of recently selected options |
    */
-  onUpdate?: (type: EventType, options?: Option | Option[], recentSelected?: Option[]) => void;
+  onUpdate?: (type: EventType, options?: OptionSchema | OptionSchema[], recentSelected?: OptionSchema[]) => void;
 }
 
 interface SyncProps {
@@ -79,7 +80,7 @@ interface SyncProps {
    * | disabled | Disables the option, making it unable to be pressed | |
    * | group | Defines group to which the option belongs | |
    */
-  options: Option[];
+  options: OptionSchema[];
   /**
    * <pre style="font-family: monospace; font-size: 13px; background: #f8f8f8">
    * Adds loaders inside `Dropdown` when waiting for an action to complete.
@@ -114,7 +115,7 @@ interface TriggerProps {
   /**
    * Callback function to change the label of trigger when options are selected
    */
-  customLabel?: (selected: number, totalOptions?: number, selectedOptions?: Option[]) => string;
+  customLabel?: (selected: number, totalOptions?: number, selectedOptions?: OptionSchema[]) => string;
   /**
    * Adds custom trigger
    */
@@ -206,7 +207,7 @@ export type DropdownProps = ControlledDropdownProps & UncontrolledDropdownProps;
 interface DropdownState {
   async: boolean;
   searchInit: boolean;
-  options: Option[];
+  options: OptionSchema[];
   loading?: boolean;
   optionsApplied: boolean;
   open?: boolean;
@@ -215,9 +216,9 @@ interface DropdownState {
   searchedOptionsLength: number;
   triggerLabel: string;
   selectAll: SelectAll;
-  selected: Option[];
-  tempSelected: Option[];
-  previousSelected: Option[];
+  selected: OptionSchema[];
+  tempSelected: OptionSchema[];
+  previousSelected: OptionSchema[];
 }
 
 /**
@@ -326,7 +327,7 @@ export class Dropdown extends React.Component<DropdownProps, DropdownState> {
     }
   }
 
-  getDisabledOptions = (options: Option[] = []) => {
+  getDisabledOptions = (options: OptionSchema[] = []) => {
     return options.filter((option) => option.disabled);
   };
 
@@ -342,7 +343,7 @@ export class Dropdown extends React.Component<DropdownProps, DropdownState> {
     });
   };
 
-  getUnSelectedOptions = (options: Option[], init: boolean) => {
+  getUnSelectedOptions = (options: OptionSchema[], init: boolean) => {
     if (options.length) {
       if (!init) {
         return options.filter(
@@ -362,7 +363,7 @@ export class Dropdown extends React.Component<DropdownProps, DropdownState> {
     return options;
   };
 
-  getSelectedOptions = (options: Option[], init: boolean) => {
+  getSelectedOptions = (options: OptionSchema[], init: boolean) => {
     const { selected = [] } = this.props;
     if (options.length) {
       if (!init) return this.state.tempSelected;
@@ -493,7 +494,7 @@ export class Dropdown extends React.Component<DropdownProps, DropdownState> {
     return label;
   };
 
-  updateSelectedOptions = (selectedArray: Option[], isSingleSelect: boolean, isControlled?: boolean) => {
+  updateSelectedOptions = (selectedArray: OptionSchema[], isSingleSelect: boolean, isControlled?: boolean) => {
     const { optionsLength, previousSelected, selected, loading, open } = this.state;
 
     const { onChange, withCheckbox, showApplyButton, closeOnSelect, name, onPopperToggle } = this.props;
@@ -528,7 +529,7 @@ export class Dropdown extends React.Component<DropdownProps, DropdownState> {
     }
   };
 
-  onOptionSelect = (option: Option) => {
+  onOptionSelect = (option: OptionSchema) => {
     const { onUpdate, selected } = this.props;
 
     if (_isControlled(selected)) {
@@ -539,7 +540,7 @@ export class Dropdown extends React.Component<DropdownProps, DropdownState> {
     this.updateSelectedOptions([option], true);
   };
 
-  onSelect = (option: Option, checked: boolean) => {
+  onSelect = (option: OptionSchema, checked: boolean) => {
     const { onUpdate, selected, showApplyButton } = this.props;
 
     if (_isControlled(selected) && !showApplyButton) {