@innovaccer/design-system 2.13.3 → 2.13.4-2

package/core/components/atoms/button/__stories__/SplitButton.story.jsx

@@ -3,7 +3,6 @@ import Button from '@/components/atoms/button';
 import Dropdown from '@/components/atoms/dropdown';
 
 export const splitButton = () => {
-
   const options = [
     {
       label: 'Download All',
@@ -24,7 +23,7 @@ export const splitButton = () => {
         <Dropdown menu={true} icon="expand_more" options={options} />
       </div>
     </div>
-  )
+  );
 };
 
 export default {

package/core/components/atoms/checkbox/__stories__/Alignment.story.jsx

@@ -1,36 +1,38 @@
 import * as React from 'react';
-import { Checkbox, Label, Row, Column, Text } from '@/index';
+import { Checkbox, Label, Row, Column, Heading } from '@/index';
 
-const days = ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'];
+export const AlignmentOfCheckboxGroup = () => {
+  const days = ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'];
 
-export const AlignmentOfCheckboxGroup = () => (
-  <div>
-    <Row>
-      <Column>
-        <Label>Days</Label>
-        {days.map((day, index) => {
-          return <Checkbox key={index} label={day} defaultChecked={index < 2} className={index !== 0 ? 'mt-4' : ''} />;
-        })}
-        <div className="pt-5">
-          <Text>Vertical Alignment</Text>
-        </div>
-      </Column>
-      <Column>
-        <Label>Days</Label>
-        <div className="d-flex">
+  return (
+    <div>
+      <Row>
+        <Column>
+          <Heading size="s">Horizontal Alignment</Heading>
+          <Label>Days</Label>
+          <div className="d-flex">
+            {days.map((day, index) => {
+              return (
+                <Checkbox className={index !== 0 ? 'ml-7' : ''} key={index} label={day} defaultChecked={index < 2} />
+              );
+            })}
+          </div>
+        </Column>
+      </Row>
+      <Row>
+        <Column className="pt-5 mt-8">
+          <Heading size="s">Vertical Alignment</Heading>
+          <Label>Days</Label>
           {days.map((day, index) => {
             return (
-              <Checkbox className={index !== 0 ? 'ml-7' : ''} key={index} label={day} defaultChecked={index < 2} />
+              <Checkbox key={index} label={day} defaultChecked={index < 2} className={index !== 0 ? 'mt-4' : ''} />
             );
           })}
-        </div>
-        <div className="pt-5">
-          <Text>Horizontal Alignment</Text>
-        </div>
-      </Column>
-    </Row>
-  </div>
-);
+        </Column>
+      </Row>
+    </div>
+  );
+};
 
 export default {
   title: 'Components/Checkbox/Alignment Of Checkbox Group',

package/core/components/atoms/checkbox/__stories__/variants/Controlled.story.jsx

@@ -7,7 +7,7 @@ export const controlledCheckbox = () => {
 
   const handleParentChange = (event) => {
     const updatedChecked = event.target.checked;
-    window.setTimeout(() => {
+    this.window.setTimeout(() => {
       setChecked(updatedChecked);
     }, 2000);
   };
@@ -20,7 +20,7 @@ const customCode = `() => {
 
   const handleParentChange = (event) => {
     const updatedChecked = event.target.checked;
-    window.setTimeout(() => {
+    this.window.setTimeout(() => {
       setChecked(updatedChecked);
     }, 2000);
   };

package/core/components/atoms/chip/__stories__/index.story.jsx

@@ -27,8 +27,8 @@ export const all = () => {
       clearButton={clearButton}
       disabled={disabled}
       type={type}
-      onClose={action(`onClose: ${name}`)}
-      onClick={action(`onClick: ${name}`)}
+      onClose={action(`onClose: ${label}`)}
+      onClick={action(`onClick: ${label}`)}
       selected={selected}
       name={'chip'}
     />

package/core/components/atoms/chip/__stories__/variants/Action.story.jsx

@@ -16,8 +16,8 @@ export const Action = () => {
               icon={icon}
               label={label}
               disabled={booleanvalue}
-              onClose={action(`onClose: ${name}`)}
-              onClick={action(`onClick: ${name}`)}
+              onClose={action(`onClose: ${label}`)}
+              onClick={action(`onClick: ${label}`)}
               type="action"
               name={'chip'}
             />

package/core/components/atoms/chip/__stories__/variants/Input.story.jsx

@@ -17,8 +17,8 @@ export const Input = () => {
               clearButton={true}
               disabled={booleanvalue}
               type="input"
-              onClose={action(`onClose: ${name}`)}
-              onClick={action(`onClick: ${name}`)}
+              onClose={action(`onClose: ${label}`)}
+              onClick={action(`onClick: ${label}`)}
               name={'chip'}
             />
             <br />

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

@@ -17,8 +17,8 @@ export const Selection = () => {
               clearButton={true}
               disabled={booleanvalue}
               type="selection"
-              onClose={action(`onClose: ${name}`)}
-              onClick={action(`onClick: ${name}`)}
+              onClose={action(`onClose: ${label}`)}
+              onClick={action(`onClick: ${label}`)}
               selected={false}
               name={'chip'}
             />
@@ -33,8 +33,8 @@ export const Selection = () => {
           label={label}
           clearButton={true}
           type="selection"
-          onClose={action(`onClose: ${name}`)}
-          onClick={action(`onClick: ${name}`)}
+          onClose={action(`onClose: ${label}`)}
+          onClick={action(`onClick: ${label}`)}
           selected={true}
           name={'chip'}
         />
@@ -47,8 +47,8 @@ export const Selection = () => {
           label={label}
           clearButton={true}
           type="selection"
-          onClose={action(`onClose: ${name}`)}
-          onClick={action(`onClick: ${name}`)}
+          onClose={action(`onClose: ${label}`)}
+          onClick={action(`onClick: ${label}`)}
           selected={true}
           disabled={true}
           name={'chip'}

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

@@ -20,8 +20,8 @@ export const Types = () => {
               clearButton={clearButton}
               disabled={disabled}
               type={type}
-              onClose={action(`onClose: ${name}`)}
-              onClick={action(`onClick: ${name}`)}
+              onClose={action(`onClose: ${label}`)}
+              onClick={action(`onClick: ${label}`)}
               selected={selected}
               name={'chip'}
             />

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

@@ -38,7 +38,7 @@ export const all = () => {
     },
   ];
 
-  return <ChipGroup onClose={action(`onClose: ${name}`)} onClick={action(`onClick: ${name}`)} list={list} />;
+  return <ChipGroup onClose={action(`onClose event`)} onClick={action(`onClick event`)} list={list} />;
 };
 export default {
   title: 'Components/ChipGroup/All',

package/core/components/atoms/collapsible/__stories__/CustomTrigger.story.jsx

@@ -1,50 +1,18 @@
 import * as React from 'react';
 import Collapsible from '@/components/atoms/collapsible';
-import { Icon, VerticalNav, Heading } from '@/index';
+import { Icon, Text, Heading } from '@/index';
 
 // CSF format story
 export const CustomTrigger = () => {
   const [expanded, setExpanded] = React.useState(false);
-  const [active, setActive] = React.useState({
-    name: 'To-do\'s.Due',
-  });
-
-  const data = [
-    {
-      name: 'To-do\'s',
-      label: 'To-do\'s',
-      icon: 'assignment_ind',
-      count: 31,
-      subMenu: [
-        {
-          name: 'To-do\'s.Due',
-          label: 'Due',
-          count: 31
-        },
-        {
-          name: 'To-do\'s.Completed',
-          label: 'Completed',
-          count: 0
-        },
-      ],
-    },
-    {
-      name: 'Received',
-      label: 'Received',
-      count: 0
-    },
-    {
-      name: 'Sent',
-      label: 'Sent',
-      count: 5
-    },
-  ];
 
   return (
     <div>
-      <div className='d-flex align-items-center mb-3'>
+      <div className="d-flex align-items-center mb-3">
         <Icon name="menu" className="cursor-pointer" onClick={() => setExpanded(!expanded)}></Icon>
-        <Heading size='s' className="ml-4">Click to Open</Heading>
+        <Heading size="s" className="ml-4">
+          Click to Open
+        </Heading>
       </div>
       <Collapsible withTrigger={false} expanded={expanded} height="100vh">
         <div className="d-flex pt-4">
@@ -58,40 +26,6 @@ export const CustomTrigger = () => {
 
 const customCode = `() => {
   const [expanded, setExpanded] = React.useState(false);
-  const [active, setActive] = React.useState({
-    name: 'TODOs.Due',
-  });
-
-  const data = [
-    {
-      name: 'TODOs',
-      label: 'TODOs',
-      icon: 'assignment_ind',
-      count: 31,
-      subMenu: [
-        {
-          name: 'TODOs.Due',
-          label: 'Due',
-          count: 31
-        },
-        {
-          name: 'TODOs.Completed',
-          label: 'Completed',
-          count: 0
-        },
-      ],
-    },
-    {
-      name: 'Received',
-      label: 'Received',
-      count: 0
-    },
-    {
-      name: 'Sent',
-      label: 'Sent',
-      count: 5
-    },
-  ];
 
   return (
     <div>

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

@@ -10,6 +10,7 @@ import {
   _showSelectedItems,
   _isOpenControlled,
   _isSelectAllPresent,
+  scrollToOptionIndex,
 } from './utility';
 import { BaseProps } from '@/utils/types';
 import { ChangeEvent } from '@/common.type';
@@ -192,6 +193,10 @@ interface SharedDropdownProps extends DropdownListProps, BaseProps {
    * Callback function called when dropdown is closed
    */
   onClose?: (selected: any[], name?: string | number) => void;
+  /**
+   * Specify the option index which needs to be focused
+   */
+  tabIndex?: number;
 }
 
 type SyncDropdownProps = SyncProps & SharedDropdownProps;
@@ -219,6 +224,7 @@ interface DropdownState {
   selected: OptionSchema[];
   tempSelected: OptionSchema[];
   previousSelected: OptionSchema[];
+  scrollIndex?: number;
 }
 
 /**
@@ -383,6 +389,11 @@ export class Dropdown extends React.Component<DropdownProps, DropdownState> {
 
     fetchFunction(searchTerm).then((res: any) => {
       const { options, count } = res;
+      if (res.scrollToIndex) {
+        setTimeout(() => {
+          scrollToOptionIndex(res.scrollToIndex, options);
+        }, 0);
+      }
       if (!res.searchTerm || (res.searchTerm && res.searchTerm === this.state.searchTerm)) {
         updatedAsync = searchTerm === '' ? count > this.staticLimit : updatedAsync;
 
@@ -395,6 +406,7 @@ export class Dropdown extends React.Component<DropdownProps, DropdownState> {
 
         this.setState({
           ...this.state,
+          scrollIndex: res.scrollToIndex || 0,
           optionsLength,
           loading: false,
           async: updatedAsync,
@@ -716,14 +728,17 @@ export class Dropdown extends React.Component<DropdownProps, DropdownState> {
       selectAll,
       triggerLabel,
       previousSelected,
+      scrollIndex,
     } = this.state;
 
     const { withSelectAll = true, withCheckbox } = this.props;
 
-    const { triggerOptions = {}, selected, ...rest } = this.props;
+    const { triggerOptions = {}, selected, tabIndex, ...rest } = this.props;
     const remainingOptionsLen = searchedOptionsLength - options.length;
 
-    const firstEnabledOption = _isSelectAllPresent(searchTerm, remainingOptionsLen, withSelectAll, withCheckbox)
+    const firstEnabledOption = tabIndex
+      ? tabIndex
+      : _isSelectAllPresent(searchTerm, remainingOptionsLen, withSelectAll, withCheckbox)
       ? 0
       : options.findIndex((option) => !option.disabled);
 
@@ -752,6 +767,7 @@ export class Dropdown extends React.Component<DropdownProps, DropdownState> {
         onOptionSelect={this.onOptionSelect}
         onSelectAll={this.onSelectAll}
         customTrigger={triggerOptions.customTrigger}
+        scrollIndex={scrollIndex}
         {...rest}
       />
     );

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

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { scrollIntoView, _isEqual, _isSelectAllPresent } from './utility';
+import { scrollIntoView, _isEqual, _isSelectAllPresent, scrollToOptionIndex } from './utility';
 import { Popover, Checkbox, Button, Text, Input } from '@/index';
 import { PopoverProps } from '@/index.type';
 import DropdownButton, { TriggerProps } from './DropdownButton';
@@ -145,6 +145,11 @@ export interface DropdownListProps extends TriggerAndOptionProps {
    * Adds custom placeholder to searchBar
    */
   searchPlaceholder?: string;
+  /**
+   * Specify index of option where cursor should scroll
+   * @ignore
+   */
+  scrollIndex?: number;
 }
 
 interface OptionsProps extends DropdownListProps, BaseProps {
@@ -212,6 +217,7 @@ const DropdownList = (props: OptionsProps) => {
     toggleDropdown,
     className,
     searchPlaceholder = 'Search..',
+    scrollIndex,
   } = props;
 
   const baseProps = extractBaseProps(props);
@@ -225,10 +231,8 @@ const DropdownList = (props: OptionsProps) => {
   const [popoverStyle, setPopoverStyle] = React.useState<PopoverProps['customStyle']>();
   const [cursor, setCursor] = React.useState(firstEnabledOption);
 
-  // Re-initializes its value to 0 on every re-render
-  let animateOrder = 0;
-
   React.useEffect(() => {
+    let timer: any;
     if (dropdownOpen) {
       const { width, minWidth, maxWidth } = props;
       const popperWidth = triggerRef.current?.clientWidth;
@@ -241,7 +245,18 @@ const DropdownList = (props: OptionsProps) => {
       };
 
       setPopoverStyle(popperWrapperStyle);
+
+      // scrolls to current time
+      if (scrollIndex && tempSelected.length === 0) {
+        timer = setTimeout(() => {
+          scrollToOptionIndex(scrollIndex, listOptions);
+        }, 100);
+      }
     }
+
+    return () => {
+      clearTimeout(timer);
+    };
   }, [dropdownOpen]);
 
   React.useEffect(() => {
@@ -285,27 +300,11 @@ const DropdownList = (props: OptionsProps) => {
     return Dropdown;
   };
 
-  const animateClass = classNames({
-    ['fade-in']: dropdownOpen,
-    ['opacity-0']: dropdownOpen,
-    ['Dropdown-items']: true,
-  });
-
-  const getAnimateOrderStyle = (order: number) => {
-    const animateStyle: React.CSSProperties = {
-      animationDelay: dropdownOpen ? order * 20 + 'ms' : '',
-    };
-    return animateStyle;
-  };
-
   const getDropdownSectionClass = (showClearButton?: boolean) => {
-    return classNames(
-      {
-        ['Dropdown-section']: true,
-        ['Dropdown-section--withClear']: showClearButton,
-      },
-      animateClass
-    );
+    return classNames({
+      ['Dropdown-section']: true,
+      ['Dropdown-section--withClear']: showClearButton,
+    });
   };
 
   const dropdownClass = classNames(
@@ -320,14 +319,11 @@ const DropdownList = (props: OptionsProps) => {
     ['Dropdown-wrapper--wrap']: !truncateOption,
   });
 
-  const SelectAllClass = classNames(
-    {
-      ['Option-checkbox']: true,
-      ['Option-checkbox--active']: cursor === 0,
-      ['OptionWrapper']: true,
-    },
-    animateClass
-  );
+  const SelectAllClass = classNames({
+    ['Option-checkbox']: true,
+    ['Option-checkbox--active']: cursor === 0,
+    ['OptionWrapper']: true,
+  });
 
   const onToggleDropdown = (open: boolean, type?: string) => {
     toggleDropdown(open, type);
@@ -369,7 +365,7 @@ const DropdownList = (props: OptionsProps) => {
   const renderFooter = () => {
     const { footerLabel = 'Search for more options' } = props;
     return (
-      <div className={`Dropdown-footer ${animateClass}`} style={getAnimateOrderStyle(++animateOrder)}>
+      <div className="Dropdown-footer">
         <Text size="small" appearance={'subtle'}>
           {footerLabel}
         </Text>
@@ -382,7 +378,7 @@ const DropdownList = (props: OptionsProps) => {
     const isClearDisabled = selected.every((option) => option.disabled);
 
     return (
-      <div className={getDropdownSectionClass(selectedGroup)} style={getAnimateOrderStyle(++animateOrder)}>
+      <div className={getDropdownSectionClass(selectedGroup)}>
         <Text size="small" appearance={'subtle'}>
           {group}
         </Text>
@@ -404,7 +400,7 @@ const DropdownList = (props: OptionsProps) => {
   const renderApplyButton = () => {
     const disable = _isEqual(previousSelected, tempSelected);
     return (
-      <div className={`Dropdown-buttonWrapper ${animateClass}`} style={getAnimateOrderStyle(++animateOrder)}>
+      <div className="Dropdown-buttonWrapper">
         <Button
           ref={dropdownCancelButtonRef}
           className="mr-4"
@@ -432,7 +428,7 @@ const DropdownList = (props: OptionsProps) => {
 
   const renderSearch = () => {
     return (
-      <div className={`Dropdown-inputWrapper ${animateClass}`} style={getAnimateOrderStyle(++animateOrder)}>
+      <div className="Dropdown-inputWrapper">
         <Input
           name="Dropdown-search"
           icon={'search'}
@@ -469,11 +465,7 @@ const DropdownList = (props: OptionsProps) => {
     const label = selectAllLabel.trim() ? selectAllLabel.trim() : 'Select All';
 
     return (
-      <div
-        style={getAnimateOrderStyle(++animateOrder)}
-        className={SelectAllClass}
-        onMouseEnter={() => updateActiveOption(0, true)}
-      >
+      <div className={SelectAllClass} onMouseEnter={() => updateActiveOption(0, true)}>
         <Checkbox
           label={label}
           onChange={onSelectAll}
@@ -497,22 +489,20 @@ const DropdownList = (props: OptionsProps) => {
     const active = selectAllPresent ? index + 1 === cursor : index === cursor;
     const optionIsSelected = tempSelected.findIndex((option) => option.value === item.value) !== -1;
     return (
-      <div style={getAnimateOrderStyle(++animateOrder)} className={animateClass}>
-        <Option
-          optionData={item}
-          truncateOption={truncateOption}
-          selected={optionIsSelected}
-          index={index}
-          updateActiveOption={updateActiveOption}
-          optionRenderer={optionRenderer}
-          active={active}
-          checkboxes={withCheckbox}
-          menu={menu}
-          onClick={() => optionClickHandler(item)}
-          onChange={(e) => props.onSelect(item, e.target.checked)}
-          optionType={props.optionType}
-        />
-      </div>
+      <Option
+        optionData={item}
+        truncateOption={truncateOption}
+        selected={optionIsSelected}
+        index={index}
+        updateActiveOption={updateActiveOption}
+        optionRenderer={optionRenderer}
+        active={active}
+        checkboxes={withCheckbox}
+        menu={menu}
+        onClick={() => optionClickHandler(item)}
+        onChange={(e) => props.onSelect(item, e.target.checked)}
+        optionType={props.optionType}
+      />
     );
   };
 

package/core/components/atoms/dropdown/__stories__/CustomSearchPlaceholder.story.jsx

@@ -23,10 +23,10 @@ export const customSearchPlaceholder = () => {
     },
   ];
   return (
-  <div className="mb-10 w-25">
-    <Label withInput={true}>Gender</Label>
-    <Dropdown options={options} searchPlaceholder="Search Gender" withSearch={true} />
-  </div>
+    <div className="mb-10 w-25">
+      <Label withInput={true}>Gender</Label>
+      <Dropdown options={options} searchPlaceholder="Search Gender" withSearch={true} />
+    </div>
   );
 };
 

package/core/components/atoms/dropdown/__stories__/DropdownItemsWithCheckbox.story.jsx

@@ -22,9 +22,7 @@ export const dropdownItemsWithCheckbox = () => {
       value: '56_above',
     },
   ];
-   return (
-  <Dropdown options={options} withCheckbox={true} className="w-25" placeholder="Select" />
-  );
+  return <Dropdown options={options} withCheckbox={true} className="w-25" placeholder="Select" />;
 };
 
 export default {

package/core/components/atoms/dropdown/__stories__/DropdownItemsWithIcon.story.jsx

@@ -26,10 +26,8 @@ export const dropdownItemsWithIcon = () => {
       icon: 'check',
     },
   ];
-   return (
-  <Dropdown options={options} optionType="WITH_ICON" className="w-25" placeholder="Select status" />
-  );
-}
+  return <Dropdown options={options} optionType="WITH_ICON" className="w-25" placeholder="Select status" />;
+};
 
 export default {
   title: 'Components/Dropdown/Dropdown Items With Icon',

package/core/components/atoms/dropdown/__stories__/DropdownItemsWithInfo.story.jsx

@@ -3,8 +3,7 @@ import { Dropdown } from '@/index';
 import { Uncontrolled, Controlled } from './_common_/types';
 
 // CSF format story
-export const dropdownItemsWithSubInfo = () =>{
-
+export const dropdownItemsWithSubInfo = () => {
   const options = [
     {
       label: 'Lawson, Joy',
@@ -23,9 +22,7 @@ export const dropdownItemsWithSubInfo = () =>{
     },
   ];
 
-  return (
-  <Dropdown options={options} optionType="WITH_META" className="w-25" placeholder="Select Recipient" />
-  );
+  return <Dropdown options={options} optionType="WITH_META" className="w-25" placeholder="Select Recipient" />;
 };
 
 export default {

package/core/components/atoms/dropdown/__stories__/DropdownWIthIcon.story.jsx

@@ -2,9 +2,8 @@ import * as React from 'react';
 import { Dropdown } from '@/index';
 import { Uncontrolled, Controlled } from './_common_/types';
 
-
 // CSF format story
-export const dropdownWithIcon = () =>{
+export const dropdownWithIcon = () => {
   const options = [
     {
       label: 'Alabama',
@@ -204,9 +203,9 @@ export const dropdownWithIcon = () =>{
     },
   ];
   return (
-  <Dropdown options={options} icon="location_on" className="w-25" placeholder="Select state" staticLimit={100} />
+    <Dropdown options={options} icon="location_on" className="w-25" placeholder="Select state" staticLimit={100} />
   );
-}
+};
 
 export default {
   title: 'Components/Dropdown/Dropdown With Icon',

package/core/components/atoms/dropdown/__stories__/DropdownWithActionButtons.story.jsx

@@ -47,16 +47,16 @@ export const dropdownWithActionButtons = () => {
     },
   ];
   return (
-  <Dropdown
-    options={options}
-    withSearch={true}
-    className="w-25"
-    placeholder="Select problem"
-    withCheckbox={true}
-    showApplyButton={true}
-  />
+    <Dropdown
+      options={options}
+      withSearch={true}
+      className="w-25"
+      placeholder="Select problem"
+      withCheckbox={true}
+      showApplyButton={true}
+    />
   );
-}
+};
 
 export default {
   title: 'Components/Dropdown/Dropdown With Action Buttons',