npm - @innovaccer/design-system - Versions diffs - 2.7.0 → 2.8.0-0 - Mend

@innovaccer/design-system 2.7.0 → 2.8.0-0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (50) hide show

package/core/components/atoms/chip/__tests__/__snapshots__/Chip.test.tsx.snap CHANGED Viewed

@@ -6,7 +6,7 @@ exports[`Chip component
 <body>
   <div>
     <div
-      class="Chip Chip--Action"
+      class="Chip-wrapper Chip Chip--Action"
       data-test="DesignSystem-Chip--GenericChip"
     >
       <span
@@ -24,7 +24,7 @@ exports[`Chip component
 <body>
   <div>
     <div
-      class="Chip Chip--Action"
+      class="Chip-wrapper Chip Chip--Action"
       data-test="DesignSystem-Chip--GenericChip"
     >
       <span
@@ -42,7 +42,7 @@ exports[`Chip component
 <body>
   <div>
     <div
-      class="Chip Chip-Action--disabled"
+      class="Chip-wrapper Chip Chip-Action--disabled"
       data-test="DesignSystem-Chip--GenericChip"
     >
       <span
@@ -60,7 +60,7 @@ exports[`Chip component
 <body>
   <div>
     <div
-      class="Chip Chip--Input"
+      class="Chip-wrapper Chip Chip--Input"
       data-test="DesignSystem-Chip--GenericChip"
     >
       <span
@@ -78,7 +78,7 @@ exports[`Chip component
 <body>
   <div>
     <div
-      class="Chip Chip--Input"
+      class="Chip-wrapper Chip Chip--Input"
       data-test="DesignSystem-Chip--GenericChip"
     >
       <span
@@ -96,7 +96,7 @@ exports[`Chip component
 <body>
   <div>
     <div
-      class="Chip Chip-Input--disabled"
+      class="Chip-wrapper Chip Chip-Input--disabled"
       data-test="DesignSystem-Chip--GenericChip"
     >
       <span
@@ -114,7 +114,7 @@ exports[`Chip component
 <body>
   <div>
     <div
-      class="Chip Chip--Selection"
+      class="Chip-wrapper Chip Chip--Selection"
       data-test="DesignSystem-Chip--GenericChip"
     >
       <span
@@ -132,7 +132,7 @@ exports[`Chip component
 <body>
   <div>
     <div
-      class="Chip Chip--Selection"
+      class="Chip-wrapper Chip Chip--Selection"
       data-test="DesignSystem-Chip--GenericChip"
     >
       <span
@@ -150,7 +150,7 @@ exports[`Chip component
 <body>
   <div>
     <div
-      class="Chip Chip-Selection--disabled"
+      class="Chip-wrapper Chip Chip-Selection--disabled"
       data-test="DesignSystem-Chip--GenericChip"
     >
       <span
@@ -168,7 +168,7 @@ exports[`Chip component
 <body>
   <div>
     <div
-      class="Chip Chip--Selection"
+      class="Chip-wrapper Chip Chip--Selection"
       data-test="DesignSystem-Chip--GenericChip"
     >
       <span
@@ -186,7 +186,7 @@ exports[`Chip component
 <body>
   <div>
     <div
-      class="Chip Chip--Selection Chip-Selection--selected"
+      class="Chip-wrapper Chip Chip--Selection Chip-Selection--selected"
       data-test="DesignSystem-Chip--GenericChip"
     >
       <span

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

@@ -13,7 +13,7 @@ exports[`ChipGroup component
         class="ChipGroup-item"
       >
         <div
-          class="Chip Chip--action"
+          class="Chip-wrapper Chip Chip--action"
           data-test="DesignSystem-ChipGroup--Chip"
         >
           <i
@@ -36,7 +36,7 @@ exports[`ChipGroup component
         class="ChipGroup-item"
       >
         <div
-          class="Chip Chip--input"
+          class="Chip-wrapper Chip Chip--input"
           data-test="DesignSystem-ChipGroup--Chip"
         >
           <i
@@ -68,7 +68,7 @@ exports[`ChipGroup component
         class="ChipGroup-item"
       >
         <div
-          class="Chip Chip--selection Chip-selection--selected"
+          class="Chip-wrapper Chip Chip--selection Chip-selection--selected"
           data-test="DesignSystem-ChipGroup--Chip"
         >
           <i
@@ -100,7 +100,7 @@ exports[`ChipGroup component
         class="ChipGroup-item"
       >
         <div
-          class="Chip Chip--selection"
+          class="Chip-wrapper Chip Chip--selection"
           data-test="DesignSystem-ChipGroup--Chip"
         >
           <i

package/core/components/atoms/dropdown/DropdownButton.tsx CHANGED Viewed

@@ -93,7 +93,7 @@ const DropdownButton = React.forwardRef<HTMLButtonElement, DropdownButtonProps>(
       {!menu && (
         <div className="DropdownButton-wrapper">
           {inlineLabel && (
-            <Text appearance="subtle" className="mr-4">
+            <Text appearance="subtle" className="mr-4 white-space-nowrap">
               {`${inlineLabel.trim().charAt(0).toUpperCase()}${inlineLabel.trim().slice(1)}`}
             </Text>
           )}

package/core/components/atoms/dropdown/__tests__/__snapshots__/Dropdown.test.tsx.snap CHANGED Viewed

@@ -8,6 +8,7 @@ exports[`Dropdown component
     <div
       class="Dropdown"
     >
+      <style />
       <div
         class="OutsideClick PopperWrapper-trigger w-100"
       >
@@ -49,6 +50,7 @@ exports[`Dropdown component
     <div
       class="Dropdown"
     >
+      <style />
       <div
         class="OutsideClick PopperWrapper-trigger w-100"
       >
@@ -90,6 +92,7 @@ exports[`Dropdown component
     <div
       class="Dropdown"
     >
+      <style />
       <div
         class="OutsideClick PopperWrapper-trigger w-100"
       >
@@ -131,6 +134,7 @@ exports[`Dropdown component
     <div
       class="Dropdown"
     >
+      <style />
       <div
         class="OutsideClick PopperWrapper-trigger w-100"
       >
@@ -172,6 +176,7 @@ exports[`Dropdown component
     <div
       class="Dropdown"
     >
+      <style />
       <div
         class="OutsideClick PopperWrapper-trigger w-100"
       >
@@ -220,6 +225,7 @@ exports[`Dropdown component
     <div
       class="Dropdown"
     >
+      <style />
       <div
         class="OutsideClick PopperWrapper-trigger w-100"
       >
@@ -234,7 +240,7 @@ exports[`Dropdown component
             class="DropdownButton-wrapper"
           >
             <span
-              class="Text Text--subtle Text--regular mr-4"
+              class="Text Text--subtle Text--regular mr-4 white-space-nowrap"
               data-test="DesignSystem-Text"
             >
               Label
@@ -267,6 +273,7 @@ exports[`Dropdown component
     <div
       class="Dropdown"
     >
+      <style />
       <div
         class="OutsideClick PopperWrapper-trigger w-100"
       >
@@ -308,6 +315,7 @@ exports[`Dropdown component
     <div
       class="Dropdown"
     >
+      <style />
       <div
         class="OutsideClick PopperWrapper-trigger w-100"
       >
@@ -357,6 +365,7 @@ exports[`Dropdown component
     <div
       class="Dropdown"
     >
+      <style />
       <div
         class="OutsideClick PopperWrapper-trigger w-100"
       >
@@ -372,7 +381,7 @@ exports[`Dropdown component
             class="DropdownButton-wrapper"
           >
             <span
-              class="Text Text--subtle Text--regular mr-4"
+              class="Text Text--subtle Text--regular mr-4 white-space-nowrap"
               data-test="DesignSystem-Text"
             >
               Label
@@ -405,6 +414,7 @@ exports[`Dropdown component
     <div
       class="Dropdown"
     >
+      <style />
       <div
         class="OutsideClick PopperWrapper-trigger w-100"
       >
@@ -447,6 +457,7 @@ exports[`Dropdown component
     <div
       class="Dropdown"
     >
+      <style />
       <div
         class="OutsideClick PopperWrapper-trigger w-100"
       >
@@ -488,6 +499,7 @@ exports[`Dropdown component
     <div
       class="Dropdown"
     >
+      <style />
       <div
         class="OutsideClick PopperWrapper-trigger w-100"
       >
@@ -529,6 +541,7 @@ exports[`Dropdown component
     <div
       class="Dropdown"
     >
+      <style />
       <div
         class="OutsideClick PopperWrapper-trigger w-100"
       >
@@ -570,6 +583,7 @@ exports[`Dropdown component
     <div
       class="Dropdown"
     >
+      <style />
       <div
         class="OutsideClick PopperWrapper-trigger w-100"
       >
@@ -611,6 +625,7 @@ exports[`Dropdown component
     <div
       class="Dropdown"
     >
+      <style />
       <div
         class="OutsideClick PopperWrapper-trigger w-100"
       >
@@ -652,6 +667,7 @@ exports[`Dropdown component
     <div
       class="Dropdown"
     >
+      <style />
       <div
         class="OutsideClick PopperWrapper-trigger"
       >
@@ -684,6 +700,7 @@ exports[`Dropdown component
     <div
       class="Dropdown"
     >
+      <style />
       <div
         class="OutsideClick PopperWrapper-trigger w-100"
       >
@@ -725,6 +742,7 @@ exports[`Dropdown component
     <div
       class="Dropdown"
     >
+      <style />
       <div
         class="OutsideClick PopperWrapper-trigger w-100"
       >
@@ -766,6 +784,7 @@ exports[`Dropdown component
     <div
       class="Dropdown"
     >
+      <style />
       <div
         class="OutsideClick PopperWrapper-trigger w-100"
       >
@@ -807,6 +826,7 @@ exports[`Dropdown component
     <div
       class="Dropdown"
     >
+      <style />
       <div
         class="OutsideClick PopperWrapper-trigger w-100"
       >
@@ -848,6 +868,7 @@ exports[`Dropdown component
     <div
       class="Dropdown"
     >
+      <style />
       <div
         class="OutsideClick PopperWrapper-trigger w-100"
       >
@@ -889,6 +910,7 @@ exports[`Dropdown component
     <div
       class="Dropdown"
     >
+      <style />
       <div
         class="OutsideClick PopperWrapper-trigger w-100"
       >
@@ -930,6 +952,7 @@ exports[`Dropdown component
     <div
       class="Dropdown"
     >
+      <style />
       <div
         class="OutsideClick PopperWrapper-trigger w-100"
       >
@@ -971,6 +994,7 @@ exports[`Dropdown component
     <div
       class="Dropdown"
     >
+      <style />
       <div
         class="OutsideClick PopperWrapper-trigger w-100"
       >
@@ -1012,6 +1036,7 @@ exports[`Dropdown component
     <div
       class="Dropdown"
     >
+      <style />
       <div
         class="OutsideClick PopperWrapper-trigger w-100"
       >
@@ -1053,6 +1078,7 @@ exports[`Dropdown component
     <div
       class="Dropdown"
     >
+      <style />
       <div
         class="OutsideClick PopperWrapper-trigger w-100"
       >
@@ -1094,6 +1120,7 @@ exports[`Dropdown component
     <div
       class="Dropdown"
     >
+      <style />
       <div
         class="OutsideClick PopperWrapper-trigger w-100"
       >

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

@@ -86,10 +86,22 @@ export interface PopperWrapperProps {
    * type: 'onMouseLeave' | 'onMouseEnter' | 'outsideClick' | 'onClick';
    */
   onToggle: (open: boolean, type?: string) => void;
+  /*
+   * animationClass is for providing custom animations for open/close of the popover
+   * animationClass.open - takes animation class when popover is open
+   * animationClass.close - takes animation class when popover is close
+   */
+  animationClass?: {
+    open: string;
+    close: string;
+  };
 }
 interface PopperWrapperState {
   zIndex?: number;
+  animationKeyframe: string;
+  isOpen: boolean;
+  uniqueKey: string;
 }
 export class PopperWrapper extends React.Component<PopperWrapperProps, PopperWrapperState> {
@@ -99,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',
@@ -112,7 +125,7 @@ export class PopperWrapper extends React.Component<PopperWrapperProps, PopperWra
   constructor(props: PopperWrapperProps) {
     super(props);
-    this.state = {};
+    this.state = { animationKeyframe: '', isOpen: this.props.open || false, uniqueKey: '' };
     this.hoverableDelay = 100;
     this.offsetMapping = {
@@ -120,6 +133,25 @@ export class PopperWrapper extends React.Component<PopperWrapperProps, PopperWra
       medium: '4px',
       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();
@@ -141,13 +173,23 @@ export class PopperWrapper extends React.Component<PopperWrapperProps, PopperWra
     }
     if (prevProps.open !== this.props.open) {
       this._throttleWait = false;
+      this.setState({
+        animationKeyframe: '',
+      });
       if (this.props.open) {
         const triggerElement = this.triggerRef.current;
         const zIndex = this.getZIndexForLayer(triggerElement);
         this.setState({
           zIndex: zIndex === undefined ? zIndex : zIndex + 1,
+          isOpen: true,
         });
+      } else {
+        setTimeout(() => {
+          this.setState({
+            isOpen: false,
+          });
+        }, 120);
       }
     }
   }
@@ -292,31 +334,94 @@ export class PopperWrapper extends React.Component<PopperWrapperProps, PopperWra
   }
   getPopperChildren({ ref, style, placement, outOfBoundaries }: PopperChildrenProps) {
-    const { offset, children } = this.props;
-    const { zIndex } = this.state;
+    const { offset, children, open, animationClass } = this.props;
+    const { zIndex, animationKeyframe, uniqueKey } = this.state;
     const newStyle = offset ? this.getUpdatedStyle(style, placement, offset) : style;
+    let childrenStyles = {
+      ...newStyle,
+      zIndex,
+    };
+    let classes = '';
+    if (!animationClass) {
+      const transformStyles = this.popupRef.current?.style.getPropertyValue('transform');
+      if (transformStyles && !animationKeyframe) {
+        const uniqueKey = Math.random().toString(36).substring(2, 6);
+        const popperAnimation = `
+        @keyframes popper-open-${uniqueKey} {
+          from {
+            transform: ${transformStyles} scaleY(0.5);
+            opacity: 0.5;
+          }
+          to {
+            transform: ${transformStyles} scaleY(1);
+            opacity: 1
+          }
+        }
+        @keyframes popper-close-${uniqueKey} {
+          from {
+            transform: ${transformStyles} scaleY(1);
+            opacity: 1
+          }
+          to {
+            transform: ${transformStyles} scaleY(0);
+            opacity: 0.5
+          }
+        }`;
+        this.setState({
+          animationKeyframe: popperAnimation,
+          uniqueKey,
+        });
+      }
-    const element = React.cloneElement(children, {
+      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)`,
+      };
+      childrenStyles = {
+        ...childrenStyles,
+        ...popperAnimationStyles,
+      };
+    } else {
+      classes = classNames(
+        {
+          [`${animationClass.open}`]: open,
+          [`${animationClass.close}`]: !open,
+        },
+        children.props.className
+      );
+    }
+    const childProps = {
       ref,
-      style: {
-        ...newStyle,
-        zIndex,
-      },
+      style: childrenStyles,
       'data-placement': placement,
       'data-hide': outOfBoundaries,
       onMouseEnter: this.handleMouseEnter,
       onMouseLeave: this.handleMouseLeave,
-    });
+    };
+    const element = React.cloneElement(
+      children,
+      animationClass ? { ...childProps, className: classes } : { ...childProps }
+    );
     return element;
   }
   render() {
-    const { placement, appendToBody, open, hide, boundaryElement } = this.props;
+    const { placement, appendToBody, hide, boundaryElement } = this.props;
+    const { animationKeyframe, isOpen } = this.state;
     return (
       <Manager>
+        <style>{animationKeyframe}</style>
         <Reference innerRef={this.triggerRef}>{({ ref }) => this.getTriggerElement(ref)}</Reference>
-        {open &&
+        {isOpen &&
           appendToBody &&
           ReactDOM.createPortal(
             <Popper
@@ -331,7 +436,7 @@ export class PopperWrapper extends React.Component<PopperWrapperProps, PopperWra
             </Popper>,
             document.body
           )}
-        {open && !appendToBody && (
+        {isOpen && !appendToBody && (
           <Popper placement={placement} innerRef={this.popupRef}>
             {this.getPopperChildren}
           </Popper>

package/core/components/molecules/chipInput/__tests__/__snapshots__/ChipInput.test.tsx.snap CHANGED Viewed

@@ -13,7 +13,7 @@ exports[`ChipInput component
         class="ChipInput-wrapper"
       >
         <div
-          class="Chip Chip--input my-2 mx-2"
+          class="Chip-wrapper Chip Chip--input my-2 mx-2"
           data-test="DesignSystem-ChipInput--Chip"
         >
           <span
@@ -33,7 +33,7 @@ exports[`ChipInput component
           </i>
         </div>
         <div
-          class="Chip Chip--input my-2 mx-2"
+          class="Chip-wrapper Chip Chip--input my-2 mx-2"
           data-test="DesignSystem-ChipInput--Chip"
         >
           <span
@@ -86,7 +86,7 @@ exports[`ChipInput component
         class="ChipInput-wrapper"
       >
         <div
-          class="Chip Chip-input--disabled my-2 mx-2"
+          class="Chip-wrapper Chip Chip-input--disabled my-2 mx-2"
           data-test="DesignSystem-ChipInput--Chip"
         >
           <span
@@ -106,7 +106,7 @@ exports[`ChipInput component
           </i>
         </div>
         <div
-          class="Chip Chip-input--disabled my-2 mx-2"
+          class="Chip-wrapper Chip Chip-input--disabled my-2 mx-2"
           data-test="DesignSystem-ChipInput--Chip"
         >
           <span

package/core/components/molecules/editableChipInput/__tests__/__snapshots__/EditableChipInput.test.tsx.snap CHANGED Viewed

@@ -20,7 +20,7 @@ exports[`EditableChipInput component
           data-test="DesignSystem-EditableChipInput--Default"
         >
           <div
-            class="Chip Chip--input my-2 mx-2"
+            class="Chip-wrapper Chip Chip--input my-2 mx-2"
             data-test="DesignSystem-EditableChipInput--Chip"
           >
             <span
@@ -40,7 +40,7 @@ exports[`EditableChipInput component
             </i>
           </div>
           <div
-            class="Chip Chip--input my-2 mx-2"
+            class="Chip-wrapper Chip Chip--input my-2 mx-2"
             data-test="DesignSystem-EditableChipInput--Chip"
           >
             <span
@@ -86,7 +86,7 @@ exports[`EditableChipInput component
           data-test="DesignSystem-EditableChipInput--Default"
         >
           <div
-            class="Chip Chip--input my-2 mx-2"
+            class="Chip-wrapper Chip Chip--input my-2 mx-2"
             data-test="DesignSystem-EditableChipInput--Chip"
           >
             <span
@@ -106,7 +106,7 @@ exports[`EditableChipInput component
             </i>
           </div>
           <div
-            class="Chip Chip--input my-2 mx-2"
+            class="Chip-wrapper Chip Chip--input my-2 mx-2"
             data-test="DesignSystem-EditableChipInput--Chip"
           >
             <span

package/core/components/molecules/editableDropdown/__tests__/__snapshots__/EditableDropdown.test.tsx.snap CHANGED Viewed

@@ -19,6 +19,7 @@ exports[`EditableDropdown component
           class="Dropdown d-none"
           data-test="DesignSystem-EditableDropdown--Dropdown"
         >
+          <style />
           <div
             class="OutsideClick PopperWrapper-trigger w-100"
           >