@innovaccer/design-system 2.8.0-0 → 2.8.0

package/core/components/atoms/checkbox/__stories__/Group.story.tsx

@@ -3,7 +3,7 @@ import { Checkbox, Label } from '@/index';
 
 export const CheckboxGroup = () => (
   <div>
-    <Label>Problems</Label>
+    <Label className="mb-3">Problems</Label>
     <Checkbox label="Cardiovascular" defaultChecked={true} />
     <Checkbox label="Obesity" defaultChecked={true} className="mt-5" />
     <Checkbox label="Patient has language barriers" className="mt-5" />

package/core/components/atoms/checkbox/__stories__/Nested.story.tsx

@@ -51,6 +51,7 @@ export const NestedCheckboxes = () => {
               value={label}
               onChange={(c) => handleChildChange(c, ind)}
               defaultChecked={ind < 2}
+              className="mt-4"
             />
           );
         })}
@@ -105,6 +106,7 @@ const customCode = `() => {
                 checked={checked[ind]}
                 value={label}
                 onChange={c => handleChildChange(c, ind)}
+                className="mt-4"
               />
             );
           })

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

@@ -225,6 +225,9 @@ 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(() => {
     if (dropdownOpen) {
       const { width, minWidth, maxWidth } = props;
@@ -282,11 +285,28 @@ const DropdownList = (props: OptionsProps) => {
     return Dropdown;
   };
 
+  const animateClass = classNames({
+    ['fade-in']: dropdownOpen,
+    ['opacity-0']: true,
+    ['Dropdown-items']: true,
+    ['fade-out']: !dropdownOpen,
+  });
+
+  const getAnimateOrderStyle = (order: number) => {
+    const animateStyle: React.CSSProperties = {
+      animationDelay: (dropdownOpen ? order : order * -1) * 80 + 'ms',
+    };
+    return animateStyle;
+  };
+
   const getDropdownSectionClass = (showClearButton?: boolean) => {
-    return classNames({
-      ['Dropdown-section']: true,
-      ['Dropdown-section--withClear']: showClearButton,
-    });
+    return classNames(
+      {
+        ['Dropdown-section']: true,
+        ['Dropdown-section--withClear']: showClearButton,
+      },
+      animateClass
+    );
   };
 
   const dropdownClass = classNames(
@@ -301,11 +321,14 @@ const DropdownList = (props: OptionsProps) => {
     ['Dropdown-wrapper--wrap']: !truncateOption,
   });
 
-  const SelectAllClass = classNames({
-    ['Option-checkbox']: true,
-    ['Option-checkbox--active']: cursor === 0,
-    ['OptionWrapper']: true,
-  });
+  const SelectAllClass = classNames(
+    {
+      ['Option-checkbox']: true,
+      ['Option-checkbox--active']: cursor === 0,
+      ['OptionWrapper']: true,
+    },
+    animateClass
+  );
 
   const onToggleDropdown = (open: boolean, type?: string) => {
     toggleDropdown(open, type);
@@ -347,7 +370,7 @@ const DropdownList = (props: OptionsProps) => {
   const renderFooter = () => {
     const { footerLabel = 'Search for more options' } = props;
     return (
-      <div className={'Dropdown-footer'}>
+      <div className={`Dropdown-footer ${animateClass}`} style={getAnimateOrderStyle(++animateOrder)}>
         <Text size="small" appearance={'subtle'}>
           {footerLabel}
         </Text>
@@ -360,7 +383,7 @@ const DropdownList = (props: OptionsProps) => {
     const isClearDisabled = selected.every((option) => option.disabled);
 
     return (
-      <div className={getDropdownSectionClass(selectedGroup)}>
+      <div className={getDropdownSectionClass(selectedGroup)} style={getAnimateOrderStyle(++animateOrder)}>
         <Text size="small" appearance={'subtle'}>
           {group}
         </Text>
@@ -382,7 +405,7 @@ const DropdownList = (props: OptionsProps) => {
   const renderApplyButton = () => {
     const disable = _isEqual(previousSelected, tempSelected);
     return (
-      <div className={'Dropdown-buttonWrapper'}>
+      <div className={`Dropdown-buttonWrapper ${animateClass}`} style={getAnimateOrderStyle(++animateOrder)}>
         <Button
           ref={dropdownCancelButtonRef}
           className="mr-4"
@@ -410,7 +433,7 @@ const DropdownList = (props: OptionsProps) => {
 
   const renderSearch = () => {
     return (
-      <div className={'Dropdown-inputWrapper'}>
+      <div className={`Dropdown-inputWrapper ${animateClass}`} style={getAnimateOrderStyle(++animateOrder)}>
         <Input
           name="Dropdown-search"
           icon={'search'}
@@ -447,7 +470,11 @@ const DropdownList = (props: OptionsProps) => {
     const label = selectAllLabel.trim() ? selectAllLabel.trim() : 'Select All';
 
     return (
-      <div className={SelectAllClass} onMouseEnter={() => updateActiveOption(0, true)}>
+      <div
+        style={getAnimateOrderStyle(++animateOrder)}
+        className={SelectAllClass}
+        onMouseEnter={() => updateActiveOption(0, true)}
+      >
         <Checkbox
           label={label}
           onChange={onSelectAll}
@@ -470,22 +497,23 @@ const DropdownList = (props: OptionsProps) => {
 
     const active = selectAllPresent ? index + 1 === cursor : index === cursor;
     const optionIsSelected = tempSelected.findIndex((option) => option.value === item.value) !== -1;
-
     return (
-      <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 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>
     );
   };
 

package/core/components/atoms/popperWrapper/PopperWrapper.tsx

@@ -111,7 +111,6 @@ export class PopperWrapper extends React.Component<PopperWrapperProps, PopperWra
   _timer?: number;
   _throttleWait?: boolean;
   offsetMapping: Record<Offset, string>;
-  positionOffset: Record<PositionType, string>;
 
   static defaultProps = {
     on: 'click',
@@ -134,24 +133,6 @@ export class PopperWrapper extends React.Component<PopperWrapperProps, PopperWra
       large: '8px',
     };
 
-    this.positionOffset = {
-      'auto-start': 'top left',
-      auto: 'top',
-      'auto-end': 'top right',
-      'top-start': 'bottom left',
-      top: 'bottom',
-      'top-end': 'bottom right',
-      'right-start': 'top right',
-      right: 'top right',
-      'right-end': 'top right',
-      'bottom-end': 'top right',
-      bottom: 'top',
-      'bottom-start': 'top left',
-      'left-end': 'top left',
-      left: 'top left',
-      'left-start': 'top left',
-    };
-
     this.triggerRef = React.createRef();
     this.popupRef = React.createRef();
 
@@ -184,12 +165,6 @@ export class PopperWrapper extends React.Component<PopperWrapperProps, PopperWra
           zIndex: zIndex === undefined ? zIndex : zIndex + 1,
           isOpen: true,
         });
-      } else {
-        setTimeout(() => {
-          this.setState({
-            isOpen: false,
-          });
-        }, 120);
       }
     }
   }
@@ -344,31 +319,35 @@ export class PopperWrapper extends React.Component<PopperWrapperProps, PopperWra
     let classes = '';
 
     if (!animationClass) {
+      const maxHeight = this.popupRef.current?.offsetHeight;
+      // we need to check for transformStyles so that we open the popover at correct position (left/right)
       const transformStyles = this.popupRef.current?.style.getPropertyValue('transform');
-      if (transformStyles && !animationKeyframe) {
+      if (transformStyles && maxHeight && placement && !animationKeyframe) {
         const uniqueKey = Math.random().toString(36).substring(2, 6);
+        const isTop = placement.includes('top');
 
         const popperAnimation = `
         @keyframes popper-open-${uniqueKey} {
           from { 
-            transform: ${transformStyles} scaleY(0.5);
-            opacity: 0.5;
+            max-height: 0;
+            ${isTop ? `margin-top: ${maxHeight}px` : ''};
           }
           to {
-            transform: ${transformStyles} scaleY(1);
-            opacity: 1
+            max-height: ${maxHeight}px;
+            ${isTop ? `margin-top: 0px` : ''};
           }
         }
         @keyframes popper-close-${uniqueKey} {
           from {
-            transform: ${transformStyles} scaleY(1);
-            opacity: 1
+            max-height: ${maxHeight}px;
+            ${isTop ? `margin-top: 0px` : ''};
           }
           to {
-            transform: ${transformStyles} scaleY(0);
-            opacity: 0.5
+            max-height: 0;
+            ${isTop ? `margin-top: ${maxHeight}px` : ''};
           }
-        }`;
+        }
+        `;
 
         this.setState({
           animationKeyframe: popperAnimation,
@@ -376,16 +355,17 @@ export class PopperWrapper extends React.Component<PopperWrapperProps, PopperWra
         });
       }
 
+      // defining popper-fade-in custom keyframe as it is specific to popover usecase.
       const popperAnimationStyles = {
-        transformOrigin: this.positionOffset[this.props.placement],
         animation: open
-          ? `popper-open-${uniqueKey} 120ms cubic-bezier(0, 0, 0.38, 0.9)`
-          : `popper-close-${uniqueKey} 120ms cubic-bezier(0.2, 0, 1, 0.9)`,
+          ? `popper-open-${uniqueKey} 120ms cubic-bezier(0, 0, 0.38, 0.9), popper-fade-in 120ms`
+          : `popper-close-${uniqueKey} 120ms cubic-bezier(0.2, 0, 1, 0.9) 120ms, fadeOut 120ms 120ms`,
       };
 
       childrenStyles = {
         ...childrenStyles,
         ...popperAnimationStyles,
+        overflow: 'hidden',
       };
     } else {
       classes = classNames(
@@ -404,6 +384,13 @@ export class PopperWrapper extends React.Component<PopperWrapperProps, PopperWra
       'data-hide': outOfBoundaries,
       onMouseEnter: this.handleMouseEnter,
       onMouseLeave: this.handleMouseLeave,
+      onAnimationEnd: () => {
+        if (!open) {
+          this.setState({
+            isOpen: false,
+          });
+        }
+      },
     };
 
     const element = React.cloneElement(