@innovaccer/design-system 2.9.1 → 3.0.0-2

package/core/components/molecules/sidesheet/Sidesheet.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import * as ReactDOM from 'react-dom';
 import classNames from 'classnames';
-import { Row, Column, Backdrop, OutsideClick, Button, Tooltip } from '@/index';
+import { Row, Column, Backdrop, OutsideClick, Button } from '@/index';
 import { ColumnProps } from '@/index.type';
 import { OverlayFooter } from '@/components/molecules/overlayFooter';
 import { OverlayHeader, OverlayHeaderProps } from '@/components/molecules/overlayHeader';
@@ -171,9 +171,18 @@ class Sidesheet extends React.Component<SidesheetProps, SidesheetState> {
 
         if (this.props.closeOnEscape) OverlayManager.add(this.sidesheetRef.current);
       } else {
-        this.setState({
-          animate: false,
-        });
+        this.setState(
+          {
+            animate: false,
+          },
+          () => {
+            window.setTimeout(() => {
+              this.setState({
+                open: false,
+              });
+            }, 120);
+          }
+        );
 
         if (this.props.closeOnEscape) OverlayManager.remove(this.sidesheetRef.current);
       }
@@ -190,14 +199,6 @@ class Sidesheet extends React.Component<SidesheetProps, SidesheetState> {
     }
   }
 
-  handleAnimationEnd() {
-    if (!this.state.animate) {
-      this.setState({
-        open: false,
-      });
-    }
-  }
-
   render() {
     const { animate, open, zIndex } = this.state;
     const {
@@ -229,6 +230,7 @@ class Sidesheet extends React.Component<SidesheetProps, SidesheetState> {
       ['Overlay-container']: true,
       ['fade-in']: animate,
       ['Overlay-container--open']: animate,
+      ['fade-out']: !animate,
       ['Overlay-container--close']: !animate,
     });
 
@@ -262,7 +264,6 @@ class Sidesheet extends React.Component<SidesheetProps, SidesheetState> {
         data-layer={true}
         style={{ zIndex }}
         ref={this.sidesheetRef}
-        onAnimationEnd={this.handleAnimationEnd}
       >
         <Column data-test="DesignSystem-Sidesheet" {...baseProps} className={classes} size={sidesheetWidth[dimension]}>
           <div className={headerClass}>
@@ -272,16 +273,14 @@ class Sidesheet extends React.Component<SidesheetProps, SidesheetState> {
               {!!header && header}
             </Column>
             <Column className="flex-grow-0">
-              <Tooltip tooltip="Close">
-                <Button
-                  icon="close"
-                  appearance="transparent"
-                  data-test="DesignSystem-Sidesheet--CloseButton"
-                  onClick={(event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
-                    if (onClose) onClose(event, 'IconClick');
-                  }}
-                />
-              </Tooltip>
+              <Button
+                icon="close"
+                appearance="transparent"
+                data-test="DesignSystem-Sidesheet--CloseButton"
+                onClick={(event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
+                  if (onClose) onClose(event, 'IconClick');
+                }}
+              />
             </Column>
           </div>
           <OverlayBody data-test="DesignSystem-Sidesheet--OverlayBody" className={bodyClass}>

package/core/components/molecules/sidesheet/__tests__/__snapshots__/Sidesheet.test.tsx.snap

@@ -51,29 +51,24 @@ exports[`Sidesheet component
             class="Col flex-grow-0"
             data-test="DesignSystem-Column"
           >
-            <style />
-            <div
-              class="OutsideClick PopperWrapper-trigger"
+            <button
+              class="Button Button--regular Button--regularSquare Button--transparent"
+              data-test="DesignSystem-Sidesheet--CloseButton"
+              tabindex="0"
             >
-              <button
-                class="Button Button--regular Button--regularSquare Button--transparent"
-                data-test="DesignSystem-Sidesheet--CloseButton"
-                tabindex="0"
+              <div
+                class="Button-icon"
               >
-                <div
-                  class="Button-icon"
+                <i
+                  class="material-icons material-icons-round Icon Icon--default"
+                  data-test="DesignSystem-Button--Icon"
+                  role="button"
+                  style="font-size: 16px; width: 16px;"
                 >
-                  <i
-                    class="material-icons material-icons-round Icon Icon--default"
-                    data-test="DesignSystem-Button--Icon"
-                    role="button"
-                    style="font-size: 16px; width: 16px;"
-                  >
-                    close_round
-                  </i>
-                </div>
-              </button>
-            </div>
+                  close_round
+                </i>
+              </div>
+            </button>
           </div>
         </div>
         <div
@@ -145,29 +140,24 @@ exports[`Sidesheet component
             class="Col flex-grow-0"
             data-test="DesignSystem-Column"
           >
-            <style />
-            <div
-              class="OutsideClick PopperWrapper-trigger"
+            <button
+              class="Button Button--regular Button--regularSquare Button--transparent"
+              data-test="DesignSystem-Sidesheet--CloseButton"
+              tabindex="0"
             >
-              <button
-                class="Button Button--regular Button--regularSquare Button--transparent"
-                data-test="DesignSystem-Sidesheet--CloseButton"
-                tabindex="0"
+              <div
+                class="Button-icon"
               >
-                <div
-                  class="Button-icon"
+                <i
+                  class="material-icons material-icons-round Icon Icon--default"
+                  data-test="DesignSystem-Button--Icon"
+                  role="button"
+                  style="font-size: 16px; width: 16px;"
                 >
-                  <i
-                    class="material-icons material-icons-round Icon Icon--default"
-                    data-test="DesignSystem-Button--Icon"
-                    role="button"
-                    style="font-size: 16px; width: 16px;"
-                  >
-                    close_round
-                  </i>
-                </div>
-              </button>
-            </div>
+                  close_round
+                </i>
+              </div>
+            </button>
           </div>
         </div>
         <div

package/core/components/molecules/tooltip/Tooltip.tsx

@@ -15,16 +15,6 @@ const tooltipPropsList = [
   'hideOnReferenceEscape',
   'closeOnScroll',
 ] as const;
-const positionValue = {
-  bottom: 'bottom',
-  top: 'top',
-  'top-start': 'top',
-  'top-end': 'top',
-  'bottom-start': 'bottom',
-  'bottom-end': 'bottom',
-  left: 'left',
-  right: 'right',
-};
 type TooltipPopperProps = typeof tooltipPropsList[number];
 export interface TooltipProps extends Omit<PopoverProps, TooltipPopperProps>, BaseProps {
   /**
@@ -49,16 +39,7 @@ export const Tooltip = (props: TooltipProps) => {
   );
 
   return (
-    <Popover
-      trigger={children}
-      on={'hover'}
-      offset={'medium'}
-      {...rest}
-      animationClass={{
-        open: `Tooltip-animation-open-${positionValue[props.position]}`,
-        close: `Tooltip-animation-close-${positionValue[props.position]}`,
-      }}
-    >
+    <Popover trigger={children} on={'hover'} offset={'medium'} {...rest}>
       {tooltipWrapper}
     </Popover>
   );

package/core/components/organisms/dateRangePicker/DateRangePicker.tsx

@@ -241,10 +241,9 @@ export class DateRangePicker extends React.Component<DateRangePickerProps, DateR
           else onRangeChange(undefined, undefined, sValue, eValue);
         }
       }
-
       if (this.state.startDate && this.state.endDate) {
         this.setState({
-          open: false,
+          open: !this.state.open,
         });
       }
     }

package/core/components/organisms/dateRangePicker/__tests__/__snapshots__/DateRangePicker.test.tsx.snap

@@ -42792,7 +42792,7 @@ exports[`DateRangePicker component
     class="Popover DateRangePicker DateRangePicker--left"
     data-layer="true"
     data-test="DesignSystem-Popover"
-    style="position: absolute; top: 0px; left: 0px; opacity: 0; pointer-events: none; animation: popper-open- 120ms cubic-bezier(0, 0, 0.38, 0.9), popper-fade-in 120ms; overflow: hidden;"
+    style="position: absolute; top: 0px; left: 0px; opacity: 0; pointer-events: none; transform-origin: top left; animation: popper-open- 120ms cubic-bezier(0, 0, 0.38, 0.9);"
   >
     <div
       class="Calendar-wrapper"
@@ -43964,7 +43964,7 @@ exports[`DateRangePicker component
     class="Popover DateRangePicker DateRangePicker--left"
     data-layer="true"
     data-test="DesignSystem-Popover"
-    style="position: absolute; top: 0px; left: 0px; opacity: 0; pointer-events: none; animation: popper-open- 120ms cubic-bezier(0, 0, 0.38, 0.9), popper-fade-in 120ms; overflow: hidden;"
+    style="position: absolute; top: 0px; left: 0px; opacity: 0; pointer-events: none; transform-origin: top left; animation: popper-open- 120ms cubic-bezier(0, 0, 0.38, 0.9);"
   >
     <div
       class="Calendar-wrapper"
@@ -45136,7 +45136,7 @@ exports[`DateRangePicker component
     class="Popover DateRangePicker DateRangePicker--left"
     data-layer="true"
     data-test="DesignSystem-Popover"
-    style="position: absolute; top: 0px; left: 0px; opacity: 0; pointer-events: none; animation: popper-open- 120ms cubic-bezier(0, 0, 0.38, 0.9), popper-fade-in 120ms; overflow: hidden;"
+    style="position: absolute; top: 0px; left: 0px; opacity: 0; pointer-events: none; transform-origin: top left; animation: popper-open- 120ms cubic-bezier(0, 0, 0.38, 0.9);"
   >
     <div
       class="Calendar-wrapper"
@@ -47408,7 +47408,7 @@ exports[`DateRangePicker component
     class="Popover DateRangePicker DateRangePicker--left"
     data-layer="true"
     data-test="DesignSystem-Popover"
-    style="position: absolute; top: 0px; left: 0px; opacity: 0; pointer-events: none; animation: popper-open- 120ms cubic-bezier(0, 0, 0.38, 0.9), popper-fade-in 120ms; overflow: hidden;"
+    style="position: absolute; top: 0px; left: 0px; opacity: 0; pointer-events: none; transform-origin: top left; animation: popper-open- 120ms cubic-bezier(0, 0, 0.38, 0.9);"
   >
     <div
       class="Calendar-wrapper"
@@ -48580,7 +48580,7 @@ exports[`DateRangePicker component
     class="Popover DateRangePicker DateRangePicker--left"
     data-layer="true"
     data-test="DesignSystem-Popover"
-    style="position: absolute; top: 0px; left: 0px; opacity: 0; pointer-events: none; animation: popper-open- 120ms cubic-bezier(0, 0, 0.38, 0.9), popper-fade-in 120ms; overflow: hidden;"
+    style="position: absolute; top: 0px; left: 0px; opacity: 0; pointer-events: none; transform-origin: top left; animation: popper-open- 120ms cubic-bezier(0, 0, 0.38, 0.9);"
   >
     <div
       class="Calendar-wrapper"
@@ -49752,7 +49752,7 @@ exports[`DateRangePicker component
     class="Popover DateRangePicker DateRangePicker--left"
     data-layer="true"
     data-test="DesignSystem-Popover"
-    style="position: absolute; top: 0px; left: 0px; opacity: 0; pointer-events: none; animation: popper-open- 120ms cubic-bezier(0, 0, 0.38, 0.9), popper-fade-in 120ms; overflow: hidden;"
+    style="position: absolute; top: 0px; left: 0px; opacity: 0; pointer-events: none; transform-origin: top left; animation: popper-open- 120ms cubic-bezier(0, 0, 0.38, 0.9);"
   >
     <div
       class="Calendar-wrapper"

package/core/components/organisms/grid/GridBody.tsx

@@ -86,7 +86,8 @@ export const GridBody = (props: GridBodyProps) => {
         className="Grid-body"
         minItemHeight={minRowHeight[size]}
         totalLength={dataLength}
-        length={dataLength}
+        length={20}
+        buffer={7}
         renderItem={renderRow}
       />
     </>

package/core/components/organisms/pageHeader/__stories__/variants/withTabs.story.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import PageHeader from '../../PageHeader';
-import { Button, Text, Tab, TabsWrapper, Pills } from '@/index';
+import { Button, Text, Tab, TabsWrapper, Badge } from '@/index';
 import { action } from '@storybook/addon-actions';
 import { updateKnob } from '@/utils/storybookEventEmitter';
 import { number, text, boolean } from '@storybook/addon-knobs';
@@ -24,7 +24,7 @@ export const withTabs = () => {
           label={
             <>
               <div className="Tab-count">
-                <Pills appearance="secondary">2</Pills>
+                <Badge appearance="secondary">2</Badge>
               </div>
               <Text appearance={active !== 0 ? 'subtle' : undefined}>Tab 1</Text>
             </>
@@ -36,7 +36,7 @@ export const withTabs = () => {
           label={
             <>
               <div className="Tab-count">
-                <Pills appearance="secondary">12</Pills>
+                <Badge appearance="secondary">12</Badge>
               </div>
               <Text appearance={active !== 1 ? 'subtle' : undefined}>Tab 2</Text>
             </>
@@ -48,7 +48,7 @@ export const withTabs = () => {
           label={
             <>
               <div className="Tab-count">
-                <Pills appearance="secondary">5</Pills>
+                <Badge appearance="secondary">5</Badge>
               </div>
               <Text appearance={active !== 2 ? 'subtle' : undefined}>Tab 3</Text>
             </>
@@ -95,7 +95,7 @@ const customCode = `() => {
           label={(
             <>
               <div className="Tab-count">
-                <Pills appearance="secondary">2</Pills>
+                <Badge appearance="secondary">2</Badge>
               </div>
               <Text appearance={active !== 0 ? 'subtle' : undefined}>Tab 1</Text>
             </>
@@ -107,7 +107,7 @@ const customCode = `() => {
           label={(
             <>
               <div className="Tab-count">
-                <Pills appearance="secondary">12</Pills>
+                <Badge appearance="secondary">12</Badge>
               </div>
               <Text appearance={active !== 1 ? 'subtle' : undefined}>Tab 2</Text>
             </>
@@ -119,7 +119,7 @@ const customCode = `() => {
           label={(
             <>
               <div className="Tab-count">
-                <Pills appearance="secondary">5</Pills>
+                <Badge appearance="secondary">5</Badge>
               </div>
               <Text appearance={active !== 2 ? 'subtle' : undefined}>Tab 3</Text>
             </>

package/core/components/organisms/table/Table.tsx

@@ -184,6 +184,7 @@ interface SharedTableProps extends BaseProps {
    *    data: RowData;
    *    schema: GridProps['schema'];
    *    loading: boolean;
+   *    expanded: boolean;
    * }
    * </pre>
    */

package/core/components/organisms/table/__stories__/NestedTableWithNestedCard.story.tsx

@@ -89,7 +89,7 @@ export const nestedTableWithNestedCards = () => {
   ];
 
   const nestedRowRenderer = (props: any) => (
-    <CardSubdued className="ml-7 mb-4 mt-3 mr-4">
+    <CardSubdued className="ml-7">
       <div className="d-flex flex-row">
         <div style={{ width: '17%' }}>
           <Text weight="medium">Type</Text>
@@ -239,7 +239,7 @@ const customCode = `() => {
       return false;
     }
     return (
-      <CardSubdued className="ml-7 mb-4 mt-3 mr-4">
+      <CardSubdued className="ml-7">
         <div className="d-flex flex-row">
           <div style={{ width: '17%' }}>
             <Text weight="medium">Type</Text>

package/core/components/organisms/verticalNav/MenuItem.tsx

@@ -13,12 +13,10 @@ export interface MenuItemProps extends BaseProps {
   isChildren?: boolean;
   isChildrenVisible?: boolean;
   onClick?: (menu: Menu) => void;
-  customItemRenderer?: (props: MenuItemProps) => JSX.Element;
 }
 
 export const MenuItem = (props: MenuItemProps) => {
-  const { menu, isActive, expanded, rounded, hasSubmenu, isChildren, isChildrenVisible, onClick, customItemRenderer } =
-    props;
+  const { menu, isActive, expanded, rounded, hasSubmenu, isChildren, isChildrenVisible, onClick } = props;
 
   const baseProps = extractBaseProps(props);
 
@@ -72,9 +70,7 @@ export const MenuItem = (props: MenuItemProps) => {
 
   if (!expanded && !menu.icon) return null;
 
-  return customItemRenderer ? (
-    customItemRenderer(props)
-  ) : (
+  return (
     // TODO(a11y)
     // eslint-disable-next-line
     <div className={ItemClass} {...baseProps} onClick={onClickHandler}>

package/core/components/organisms/verticalNav/VerticalNav.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import classNames from 'classnames';
 import { Text } from '@/index';
-import { MenuItem, MenuItemProps } from './MenuItem';
+import { MenuItem } from './MenuItem';
 import { BaseProps, extractBaseProps } from '@/utils/types';
 import { getMenu, isMenuActive, ActiveMenu, Menu } from '@/utils/navigationHelper';
 
@@ -54,10 +54,6 @@ export interface VerticalNavProps extends BaseProps {
    * Only one SubMenu visible at a time**(applicable only for type: `vertical`)**
    */
   autoCollapse: boolean;
-  /**
-   * Option to pass Custom Item Renderer
-   */
-  customItemRenderer?: (props: MenuItemProps) => JSX.Element;
 }
 
 /**
@@ -65,7 +61,7 @@ export interface VerticalNavProps extends BaseProps {
  */
 
 export const VerticalNav = (props: VerticalNavProps) => {
-  const { menus, active, onClick, expanded, rounded, autoCollapse, className, customItemRenderer } = props;
+  const { menus, active, onClick, expanded, rounded, autoCollapse, className } = props;
 
   const [menuState, setMenuState] = React.useState<Record<string, boolean>>({});
   const baseProps = extractBaseProps(props);
@@ -141,7 +137,6 @@ export const VerticalNav = (props: VerticalNavProps) => {
             rounded={rounded}
             isChildrenVisible={isChildrenVisible}
             onClick={onClickHandler}
-            customItemRenderer={customItemRenderer}
           />
           {menuState[menu.name] &&
             menu.subMenu &&
@@ -156,7 +151,6 @@ export const VerticalNav = (props: VerticalNavProps) => {
                   rounded={rounded}
                   onClick={onClickHandler}
                   isActive={isMenuActive(menus, subMenu, active)}
-                  customItemRenderer={customItemRenderer}
                 />
               );
             })}

package/core/utils/__tests__/__snapshots__/TS.test.tsx.snap

@@ -2623,168 +2623,7 @@ exports[`TS renders children 1`] = `
         />
       </div>
       <div
-        class="VS-item Grid-rowWrapper"
-      >
-        <div
-          class="Grid-row Grid-row--body"
-        />
-      </div>
-      <div
-        class="VS-item Grid-rowWrapper"
-      >
-        <div
-          class="Grid-row Grid-row--body"
-        />
-      </div>
-      <div
-        class="VS-item Grid-rowWrapper"
-      >
-        <div
-          class="Grid-row Grid-row--body"
-        />
-      </div>
-      <div
-        class="VS-item Grid-rowWrapper"
-      >
-        <div
-          class="Grid-row Grid-row--body"
-        />
-      </div>
-      <div
-        class="VS-item Grid-rowWrapper"
-      >
-        <div
-          class="Grid-row Grid-row--body"
-        />
-      </div>
-      <div
-        class="VS-item Grid-rowWrapper"
-      >
-        <div
-          class="Grid-row Grid-row--body"
-        />
-      </div>
-      <div
-        class="VS-item Grid-rowWrapper"
-      >
-        <div
-          class="Grid-row Grid-row--body"
-        />
-      </div>
-      <div
-        class="VS-item Grid-rowWrapper"
-      >
-        <div
-          class="Grid-row Grid-row--body"
-        />
-      </div>
-      <div
-        class="VS-item Grid-rowWrapper"
-      >
-        <div
-          class="Grid-row Grid-row--body"
-        />
-      </div>
-      <div
-        class="VS-item Grid-rowWrapper"
-      >
-        <div
-          class="Grid-row Grid-row--body"
-        />
-      </div>
-      <div
-        class="VS-item Grid-rowWrapper"
-      >
-        <div
-          class="Grid-row Grid-row--body"
-        />
-      </div>
-      <div
-        class="VS-item Grid-rowWrapper"
-      >
-        <div
-          class="Grid-row Grid-row--body"
-        />
-      </div>
-      <div
-        class="VS-item Grid-rowWrapper"
-      >
-        <div
-          class="Grid-row Grid-row--body"
-        />
-      </div>
-      <div
-        class="VS-item Grid-rowWrapper"
-      >
-        <div
-          class="Grid-row Grid-row--body"
-        />
-      </div>
-      <div
-        class="VS-item Grid-rowWrapper"
-      >
-        <div
-          class="Grid-row Grid-row--body"
-        />
-      </div>
-      <div
-        class="VS-item Grid-rowWrapper"
-      >
-        <div
-          class="Grid-row Grid-row--body"
-        />
-      </div>
-      <div
-        class="VS-item Grid-rowWrapper"
-      >
-        <div
-          class="Grid-row Grid-row--body"
-        />
-      </div>
-      <div
-        class="VS-item Grid-rowWrapper"
-      >
-        <div
-          class="Grid-row Grid-row--body"
-        />
-      </div>
-      <div
-        class="VS-item Grid-rowWrapper"
-      >
-        <div
-          class="Grid-row Grid-row--body"
-        />
-      </div>
-      <div
-        class="VS-item Grid-rowWrapper"
-      >
-        <div
-          class="Grid-row Grid-row--body"
-        />
-      </div>
-      <div
-        class="VS-item Grid-rowWrapper"
-      >
-        <div
-          class="Grid-row Grid-row--body"
-        />
-      </div>
-      <div
-        class="VS-item Grid-rowWrapper"
-      >
-        <div
-          class="Grid-row Grid-row--body"
-        />
-      </div>
-      <div
-        class="VS-item Grid-rowWrapper"
-      >
-        <div
-          class="Grid-row Grid-row--body"
-        />
-      </div>
-      <div
-        style="flex-shrink: 0; height: 0px;"
+        style="flex-shrink: 0; height: 920px;"
       />
     </div>
   </div>

package/core/utils/docPage/index.tsx

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import React, { useContext } from 'react';
 import { Title, Description, Canvas, ArgsTable } from '@storybook/addon-docs/blocks';
 import { renderToStaticMarkup } from 'react-dom/server';
 import reactElementToJSXString from 'react-element-to-jsx-string';
@@ -14,6 +14,10 @@ import generateImports from './generateImports';
 import * as componentLib from '@/index';
 import classNames from 'classnames';
 
+import { DocsContext } from '@storybook/addon-docs/dist/esm/blocks/DocsContext';
+import { SourceContext } from '@storybook/addon-docs/dist/esm/blocks/SourceContainer';
+import { getSourceProps } from '@storybook/addon-docs/dist/esm/blocks/Source';
+
 export interface Example {
   title: string;
   description?: string;
@@ -302,7 +306,7 @@ export const docPage = () => {
     title,
     description,
     props: propsAttr,
-    customCode,
+    // customCode,
     noHtml,
     noStory,
     noProps = isEmbed,
@@ -317,6 +321,15 @@ export const docPage = () => {
   });
   const docPageTitle: string = title || displayName;
 
+  // get raw sourc of the story
+  const docsContext = useContext(DocsContext);
+  const sourceContext = useContext(SourceContext);
+  const raw = getSourceProps({ ids: [storyId] }, docsContext, sourceContext);
+  const code = `${raw.code}`;
+  console.log(code);
+  const customCode = code;
+  // END: get raw sourc of the story
+
   return (
     <div className={pageClassnames}>
       {!isEmbed && !isEmbedWithProp && (