@innovaccer/design-system 2.13.1 → 2.13.2

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

@@ -3,7 +3,7 @@ import { scrollIntoView, _isEqual, _isSelectAllPresent } from './utility';
 import { Popover, Checkbox, Button, Text, Input } from '@/index';
 import { PopoverProps } from '@/index.type';
 import DropdownButton, { TriggerProps } from './DropdownButton';
-import Option, { ClickEvent, OptionRendererProps, OptionSchema } from './option';
+import Option, { OptionRendererProps, OptionSchema } from './option';
 import classNames from 'classnames';
 import Loading from './Loading';
 import { BaseProps, extractBaseProps } from '@/utils/types';
@@ -322,7 +322,7 @@ const DropdownList = (props: OptionsProps) => {
 
   const SelectAllClass = classNames(
     {
-      ['Option-checkbox']: !selected,
+      ['Option-checkbox']: true,
       ['Option-checkbox--active']: cursor === 0,
       ['OptionWrapper']: true,
     },
@@ -347,10 +347,6 @@ const DropdownList = (props: OptionsProps) => {
 
   const optionClickHandler = (item: any) => {
     props.onOptionSelect(item);
-    if (withCheckbox) {
-      const optionIsSelected = tempSelected.findIndex((option) => option.value === item.value) !== -1;
-      props.onSelect(item, !optionIsSelected);
-    }
     dropdownTriggerRef.current?.focus();
   };
 
@@ -512,11 +508,7 @@ const DropdownList = (props: OptionsProps) => {
           active={active}
           checkboxes={withCheckbox}
           menu={menu}
-          onClick={(e: ClickEvent) => {
-            e.preventDefault();
-            e.stopPropagation();
-            optionClickHandler(item);
-          }}
+          onClick={() => optionClickHandler(item)}
           onChange={(e) => props.onSelect(item, e.target.checked)}
           optionType={props.optionType}
         />

package/core/components/atoms/dropdown/option/CheckboxOption.tsx

@@ -5,7 +5,7 @@ import { Text, MetaList } from '@/index';
 import { MetaListProps } from '@/index.type';
 
 const CheckboxOption = (props: OptionTypeProps) => {
-  const { className, selected, optionData, onClickHandler, onChangeHandler, onUpdateActiveOption, dataTest } = props;
+  const { className, selected, optionData, onChangeHandler, onUpdateActiveOption, dataTest } = props;
   const { subInfo, label, disabled } = optionData;
 
   const renderSubInfo = (subInfo: string | MetaListProps) => {
@@ -39,19 +39,12 @@ const CheckboxOption = (props: OptionTypeProps) => {
   };
 
   return (
-    //eslint-disable-next-line
-    <div
-      onClick={onClickHandler}
-      className={className}
-      onMouseEnter={onUpdateActiveOption}
-      data-test={dataTest}
-      data-disabled={disabled}
-    >
+    <div className={className} onMouseEnter={onUpdateActiveOption} data-test={dataTest} data-disabled={disabled}>
       <Checkbox
-        onChange={onChangeHandler}
         label={label}
         disabled={disabled}
         checked={selected}
+        onChange={onChangeHandler}
         tabIndex={-1}
         className={`OptionCheckbox ${subInfo ? 'pb-0' : ''}`}
         data-test={`${dataTest}--Checkbox`}

package/core/components/atoms/dropdown/option/index.tsx

@@ -66,7 +66,7 @@ interface OptionProps extends OptionRendererProps {
   index: number;
   active?: boolean;
   menu?: boolean;
-  onClick?: (event: ClickEvent) => void;
+  onClick?: () => void;
   onChange?: (event: ChangeEvent) => void;
   updateActiveOption?: (index: number) => void;
 }
@@ -94,7 +94,7 @@ const Option = (props: OptionProps) => {
   });
 
   const CheckboxClassName = classNames({
-    ['Option-checkbox']: !selected,
+    ['Option-checkbox']: true,
     ['Option-checkbox--active']: active,
     ['OptionWrapper']: true,
   });
@@ -119,7 +119,7 @@ const Option = (props: OptionProps) => {
     e.stopPropagation();
     if (disabled) return;
 
-    if (onClick) onClick(e);
+    if (onClick) onClick();
   };
 
   const onChangeHandler = (e: ChangeEvent) => {

package/css/dist/index.css

@@ -2155,14 +2155,6 @@ body {
   padding-right: var(--spacing-l);
 }
 
-.Option:active {
-  background-color: var(--jal-lighter);
-}
-
-.Option > .Checkbox-input {
-  background-color: var(--white);
-}
-
 .OptionCheckbox {
   width: 100%;
   padding-left: var(--spacing-l);
@@ -2170,18 +2162,6 @@ body {
   padding-bottom: 6px;
 }
 
-.Option-checkbox > .OptionCheckbox > .Checkbox-outerWrapper {
-  background-color: var(--shadow-0);
-}
-
-.Option-checkbox:hover > .OptionCheckbox > .Checkbox-outerWrapper > .Checkbox-input ~ .Checkbox-wrapper {
-  border: var(--spacing-xs) solid var(--stone-dark);
-}
-
-.Option-checkbox:active > .OptionCheckbox > .Checkbox-outerWrapper > .Checkbox-input ~ .Checkbox-wrapper {
-  background-color: var(--secondary-light);
-}
-
 .Option--active,
 .Option-checkbox--active {
   background-color: var(--secondary-lightest);