@innovaccer/design-system 2.9.1 → 3.0.0-2

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

@@ -225,9 +225,6 @@ 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;
@@ -285,27 +282,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 +301,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 +347,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 +360,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 +382,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 +410,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 +447,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}
@@ -496,23 +470,22 @@ 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/popperWrapper/PopperWrapper.tsx

@@ -111,6 +111,7 @@ export class PopperWrapper extends React.Component<PopperWrapperProps, PopperWra
   _timer?: number;
   _throttleWait?: boolean;
   offsetMapping: Record<Offset, string>;
+  positionOffset: Record<PositionType, string>;
 
   static defaultProps = {
     on: 'click',
@@ -133,6 +134,24 @@ 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();
 
@@ -165,6 +184,12 @@ export class PopperWrapper extends React.Component<PopperWrapperProps, PopperWra
           zIndex: zIndex === undefined ? zIndex : zIndex + 1,
           isOpen: true,
         });
+      } else {
+        setTimeout(() => {
+          this.setState({
+            isOpen: false,
+          });
+        }, 120);
       }
     }
   }
@@ -319,35 +344,31 @@ 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 && maxHeight && placement && !animationKeyframe) {
+      if (transformStyles && !animationKeyframe) {
         const uniqueKey = Math.random().toString(36).substring(2, 6);
-        const isTop = placement.includes('top');
 
         const popperAnimation = `
         @keyframes popper-open-${uniqueKey} {
           from { 
-            max-height: 0;
-            ${isTop ? `margin-top: ${maxHeight}px` : ''};
+            transform: ${transformStyles} scaleY(0.5);
+            opacity: 0.5;
           }
           to {
-            max-height: ${maxHeight}px;
-            ${isTop ? `margin-top: 0px` : ''};
+            transform: ${transformStyles} scaleY(1);
+            opacity: 1
           }
         }
         @keyframes popper-close-${uniqueKey} {
           from {
-            max-height: ${maxHeight}px;
-            ${isTop ? `margin-top: 0px` : ''};
+            transform: ${transformStyles} scaleY(1);
+            opacity: 1
           }
           to {
-            max-height: 0;
-            ${isTop ? `margin-top: ${maxHeight}px` : ''};
+            transform: ${transformStyles} scaleY(0);
+            opacity: 0.5
           }
-        }
-        `;
+        }`;
 
         this.setState({
           animationKeyframe: popperAnimation,
@@ -355,17 +376,16 @@ 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-fade-in 120ms`
-          : `popper-close-${uniqueKey} 120ms cubic-bezier(0.2, 0, 1, 0.9) 120ms, fadeOut 120ms 120ms`,
+          ? `popper-open-${uniqueKey} 120ms cubic-bezier(0, 0, 0.38, 0.9)`
+          : `popper-close-${uniqueKey} 120ms cubic-bezier(0.2, 0, 1, 0.9)`,
       };
 
       childrenStyles = {
         ...childrenStyles,
         ...popperAnimationStyles,
-        overflow: 'hidden',
       };
     } else {
       classes = classNames(
@@ -384,13 +404,6 @@ 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(

package/core/components/atoms/toast/__stories__/WithDescription.story.tsx

@@ -2,9 +2,7 @@ import * as React from 'react';
 import { Toast } from '@/index';
 
 // CSF format story
-export const toastWithDescription = () => (
-  <Toast appearance="success" title="Message sent successfully" message="Description goes here" />
-);
+export const toastWithDescription = () => <Toast appearance="success" title="Message sent successfully" />;
 
 export default {
   title: 'Components/Toast/Toast With Description',

package/core/components/css-utilities/designTokens/Data.tsx

@@ -161,21 +161,3 @@ export const gridBreakpointData = [
   { token: '--grid-l-breakpoint', value: '992px' },
   { token: '--grid-xl-breakpoint', value: '1200px' },
 ];
-
-export const transitionsCurveData = [
-  { token: '--standard-productive-curve', value: 'cubic-bezier(0.2, 0, 0.38, 0.9)' },
-  { token: '--standard-expressive-curve', value: 'cubic-bezier(0.4, 0.14, 0.3, 1)' },
-  { token: '--entrance-productive-curve', value: 'cubic-bezier(0, 0, 0.38, 0.9)' },
-  { token: '--entrance-expressive-curve', value: 'cubic-bezier(0, 0, 0.3, 1)' },
-  { token: '--exit-productive-curve', value: 'cubic-bezier(0.2, 0, 1, 0.9)' },
-  { token: '--exit-expressive-curve', value: 'cubic-bezier(0.4, 0.14, 1, 1)' },
-];
-
-export const transitionsDurationData = [
-  { token: '--duration--fast-01', value: '80ms' },
-  { token: '--duration--fast-02', value: '120ms' },
-  { token: '--duration--moderate-01', value: '160ms' },
-  { token: '--duration--moderate-02', value: '240ms' },
-  { token: '--duration--slow-01', value: '400ms' },
-  { token: '--duration--slow-02', value: '720ms' },
-];