@innovaccer/design-system 2.12.0-0 → 2.13.1-0

package/CHANGELOG.md

@@ -1,4 +1,82 @@
 
+## 2.13.0  (2022-06-21)
+
+### Highlights
+NA
+
+### Breaking changes
+NA
+
+### Migration guide
+NA
+
+### Deprecations
+NA
+
+### Features
+NA
+
+### Fixes
+*  fix(timepicker): fix placeholder value getting disappear (1ac69560)
+*  fix(modal): fix modal closing animation (d0236cfe)
+*  fix(popover): fix popover animation flickering issue (3c01529b)
+*  fix(inputMask): fix cursor position on input mask (cbd7f31a)
+*  fix(grid): fix grid loading state (aa3672bb)
+*  fix(grid): fix loading state in grid (0a8719d5)
+*  fix(datepicker): reset to default on blur state (d5565fd2)
+*  fix(docs): remove checkbox from mobile nav (3d4aa0f1)
+*  fix(datePicker): fix event handlers for datepicker (f79e3c29)
+*  fix(docs): fix links on mobile overview page (17e621ba)
+*  fix(docs): add missing images (17483411)
+
+### Improvements
+NA
+
+### Documentation
+*  docs(docs): add checkbox in mobile (929861d6)
+*  docs(docs): add help text in web components (c5e9fd8a)
+
+-------------------
+
+## 2.13.0-0  (2022-06-20)
+
+### Highlights
+NA
+
+### Breaking changes
+NA
+
+### Migration guide
+NA
+
+### Deprecations
+NA
+
+### Features
+NA
+
+### Fixes
+*  fix(timepicker): fix placeholder value getting disappear (1ac69560)
+*  fix(modal): fix modal closing animation (d0236cfe)
+*  fix(popover): fix popover animation flickering issue (3c01529b)
+*  fix(inputMask): fix cursor position on input mask (cbd7f31a)
+*  fix(grid): fix grid loading state (aa3672bb)
+*  fix(grid): fix loading state in grid (0a8719d5)
+*  fix(datepicker): reset to default on blur state (d5565fd2)
+*  fix(docs): remove checkbox from mobile nav (3d4aa0f1)
+*  fix(datePicker): fix event handlers for datepicker (f79e3c29)
+*  fix(docs): fix links on mobile overview page (17e621ba)
+*  fix(docs): add missing images (17483411)
+
+### Improvements
+NA
+
+### Documentation
+*  docs(docs): add checkbox in mobile (929861d6)
+*  docs(docs): add help text in web components (c5e9fd8a)
+
+-------------------
+
 ## 2.10.0-0  (2022-03-30)
 
 ### Highlights

package/core/components/atoms/metricInput/__stories__/DefaultMetric.story.jsx

@@ -30,7 +30,7 @@ const customCode = `() => {
 
   return (
     <div className="d-flex align-items-center">
-      <Label htmlFor="metric-input" className="mr-5">
+      <Label htmlFor="metric-input" className="mr-5">  No. of Days </Label>
       <div style={{ width: 'var(--spacing-6)' }}>
         <MetricInput
           id="metric-input"

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

@@ -102,6 +102,7 @@ interface PopperWrapperState {
   animationKeyframe: string;
   isOpen: boolean;
   uniqueKey: string;
+  showClosingAnimation: boolean;
 }
 
 export class PopperWrapper extends React.Component<PopperWrapperProps, PopperWrapperState> {
@@ -124,7 +125,12 @@ export class PopperWrapper extends React.Component<PopperWrapperProps, PopperWra
   constructor(props: PopperWrapperProps) {
     super(props);
 
-    this.state = { animationKeyframe: '', isOpen: this.props.open || false, uniqueKey: '' };
+    this.state = {
+      animationKeyframe: '',
+      isOpen: this.props.open || false,
+      uniqueKey: '',
+      showClosingAnimation: false,
+    };
 
     this.hoverableDelay = 100;
     this.offsetMapping = {
@@ -213,6 +219,9 @@ export class PopperWrapper extends React.Component<PopperWrapperProps, PopperWra
       const { onToggle } = this.props;
 
       onToggle(true, 'mouseEnter');
+      this.setState(() => {
+        return { isOpen: true };
+      });
     }
   }
 
@@ -224,6 +233,19 @@ export class PopperWrapper extends React.Component<PopperWrapperProps, PopperWra
         this.mouseMoveHandler();
       } else {
         onToggle(false, 'mouseLeave');
+        this.setState(
+          {
+            showClosingAnimation: true,
+          },
+          () => {
+            window.setTimeout(() => {
+              this.setState({
+                showClosingAnimation: false,
+                isOpen: false,
+              });
+            }, 120);
+          }
+        );
       }
     }
   }
@@ -370,8 +392,8 @@ export class PopperWrapper extends React.Component<PopperWrapperProps, PopperWra
     } else {
       classes = classNames(
         {
-          [`${animationClass.open}`]: open,
-          [`${animationClass.close}`]: !open,
+          [`${animationClass.open}`]: this.state.isOpen,
+          [`${animationClass.close}`]: this.state.showClosingAnimation,
         },
         children.props.className
       );

package/core/components/molecules/inputMask/InputMask.tsx

@@ -79,6 +79,7 @@ const InputMask = React.forwardRef<HTMLInputElement, InputMaskProps>((props, for
     onFocus,
     onClear,
     className,
+    id,
     ...rest
   } = props;
 
@@ -216,16 +217,18 @@ const InputMask = React.forwardRef<HTMLInputElement, InputMaskProps>((props, for
 
       enteredVal = inputVal.slice(start, end);
       updatedVal = insertAtIndex(enteredVal, start);
+      let oldValue = value;
+      if (oldValue.length === 0 && id === 'parent-TimePicker') {
+        oldValue = defaultPlaceholderValue;
+      }
       insertedStringLength = updatedVal.length;
       if (currSelection.end > selectionPos.current.end) {
         removedLength = insertedStringLength ? getSelectionLength(selectionPos.current) : 0;
-      } else if (inputVal.length < value.length) {
-        removedLength = value.length - inputVal.length;
+      } else if (inputVal.length < oldValue.length) {
+        removedLength = oldValue.length - inputVal.length;
       }
 
-      cursorPosition += insertedStringLength;
-
-      const maskedVal = value.split('');
+      const maskedVal = oldValue.split('');
       for (let i = 0; i < insertedStringLength; i++) {
         maskedVal[start + i] = updatedVal[i];
       }
@@ -234,6 +237,16 @@ const InputMask = React.forwardRef<HTMLInputElement, InputMaskProps>((props, for
         maskedVal[index] = getPlaceholderValue(index, index);
       }
 
+      const enteredValue = maskedVal.slice(0, mask.length).join('');
+      if (
+        updatedVal !== placeholderChar &&
+        updatedVal !== '' &&
+        !updatedVal.includes(placeholderChar) &&
+        Utils.validators.isValid(validators, enteredValue)
+      ) {
+        cursorPosition += insertedStringLength;
+      }
+
       const newCursorPosition = getNewCursorPosition(removedLength ? 'left' : 'right', cursorPosition);
       if (removedLength === 1 && !updatedVal.length && !isEditable(cursorPosition) && newCursorPosition > 0) {
         cursorPosition = newCursorPosition;
@@ -245,10 +258,14 @@ const InputMask = React.forwardRef<HTMLInputElement, InputMaskProps>((props, for
 
       const newValue = maskedVal.slice(0, mask.length).join('');
       newSelectionPos.current = cursorPosition;
-
-      if (newValue !== value && Utils.validators.isValid(validators, newValue)) {
-        setValue(newValue);
-        onChange?.(e, newValue);
+      if (newValue !== oldValue && Utils.validators.isValid(validators, newValue)) {
+        if (defaultPlaceholderValue === '__:__ _M') {
+          setValue(newValue.toUpperCase());
+          onChange?.(e, newValue.toUpperCase());
+        } else {
+          setValue(newValue);
+          onChange?.(e, newValue);
+        }
       } else {
         window.requestAnimationFrame(() => setCursorPosition(newSelectionPos.current));
       }
@@ -271,7 +288,6 @@ const InputMask = React.forwardRef<HTMLInputElement, InputMaskProps>((props, for
   const onBlurHandler = React.useCallback(
     (e: React.ChangeEvent<HTMLInputElement>) => {
       let inputVal = e.currentTarget.value;
-
       if (clearOnEmptyBlur) {
         if (inputVal === defaultPlaceholderValue) {
           setValue('');

package/core/components/molecules/modal/__stories__/Scrolling.story.jsx

@@ -88,8 +88,8 @@ export const scrolling = () => {
         }}
         footer={
           <>
-            <Button onClick={action('Cancel button click')}>Cancel</Button>
-            <Button appearance="primary" className="ml-4" onClick={action('Next button click')}>
+            <Button onClick={() => action('Cancel button click')}>Cancel</Button>
+            <Button appearance="primary" className="ml-4" onClick={() => action('Next button click')}>
               Next
             </Button>
           </>
@@ -162,8 +162,8 @@ const customCode = `() => {
         }}
         footer={(
           <>
-            <Button  onClick={console.log('Cancel button click')}>Cancel</Button>
-            <Button appearance="primary" className="ml-4" onClick={console.log('Next button click')}>Next</Button>
+            <Button  onClick={() => console.log('Cancel button click')}>Cancel</Button>
+            <Button appearance="primary" className="ml-4" onClick={() => console.log('Next button click')}>Next</Button>
           </>
         )}
         seperator={true}

package/core/components/molecules/popover/__stories__/variants/boundaryElement.story.jsx

@@ -38,8 +38,8 @@ export const boundaryElement = () => {
   const ref = React.useRef<HTMLDivElement>(null);
 
   return (
-    <div ref={ref} style={{ height: 150, border: '1px dashed', padding: 20, overflow: 'auto' }}>
-      <Popover {...options} boundaryElement={ref}>
+    <div ref={ref.current} style={{ height: 150, border: '1px dashed', padding: 20, overflow: 'auto' }}>
+      <Popover {...options} boundaryElement={ref.current}>
         <div style={{ width: 100 }} className="mx-6 my-6">
           <Text>Popup</Text>
           <Button className="mt-4" appearance="primary" onClick={action('button clicked inside popover')}>

package/core/components/organisms/datePicker/DatePicker.tsx

@@ -47,7 +47,7 @@ export type DatePickerProps = SharedProps & {
   /**
    * Props to be used for `InputMask`
    */
-  inputOptions: Omit<InputMaskProps, 'mask' | 'value' | 'onChange' | 'onBlur' | 'onClear'>;
+  inputOptions: Omit<InputMaskProps, 'mask' | 'value'>;
   /**
    * custom Validator for `DatePicker`
    *
@@ -146,7 +146,7 @@ export class DatePicker extends React.Component<DatePickerProps, DatePickerState
     const { year: daYear, month: daMonth, date: daDate } = getDateInfo(disabledAfter);
 
     return !date
-      ? true
+      ? false
       : compareDate(date, 'less', dbYear, dbMonth, dbDate) || compareDate(date, 'more', daYear, daMonth, daDate);
   };
 

package/core/components/organisms/datePicker/Trigger.tsx

@@ -19,6 +19,7 @@ export const Trigger = (props: TriggerProps) => {
   const { placeholderChar = '_' } = inputOptions;
 
   const onChangeHandler = (_e: React.ChangeEvent<HTMLInputElement>, val?: string) => {
+    const { onChange } = inputOptions;
     setState({
       open: true,
     });
@@ -27,23 +28,35 @@ export const Trigger = (props: TriggerProps) => {
       const d = translateToDate(inputFormat, val, validators);
       setState({ date: d });
     }
+
+    if (onChange) onChange(_e);
   };
 
   const onBlurHandler = (_e: React.ChangeEvent<HTMLInputElement>, val?: string) => {
+    const { onBlur } = inputOptions;
     setState({
       init: true,
     });
 
-    if (!val || val.includes(placeholderChar)) {
-      setState({ date: undefined });
+    const hasNumber = /\d/;
+
+    if (val && hasNumber.test(val) && val.includes(placeholderChar)) {
+      setState({ error: true });
+    } else if ((val && !hasNumber.test(val)) || !val) {
+      setState({ error: false });
     }
+
+    if (onBlur) onBlur(_e, val || '');
   };
 
-  const onClearHandler = () => {
+  const onClearHandler = (e: React.MouseEvent<HTMLElement> | React.KeyboardEvent<HTMLElement>) => {
+    const { onClear } = inputOptions;
     setState({
       init: true,
       date: undefined,
     });
+
+    if (onClear) onClear(e);
   };
 
   const showError = inputOptions.error || (inputOptions.required && error && init);
@@ -68,7 +81,7 @@ export const Trigger = (props: TriggerProps) => {
       onClear={onClearHandler}
       caption={showError ? errorMessage : ''}
       validators={[inputValidator]}
-      clearOnEmptyBlur={false}
+      clearOnEmptyBlur={true}
     />
   );
 };

package/core/components/organisms/datePicker/__tests__/DatePicker.test.tsx

@@ -112,42 +112,6 @@ describe('renders DatePicker component Event Handlers ', () => {
     expect(getByTestId('DesignSystem-Popover')).toBeInTheDocument();
   });
 
-  it('checks onCancel Event in case of required:true', () => {
-    const { getByTestId, getAllByTestId } = render(
-      <DatePicker
-        onDateChange={FunctionValue}
-        withInput={true}
-        date={newDate}
-        inputOptions={{
-          required: true,
-        }}
-      />
-    );
-    const closeIcon = getByTestId('DesignSystem-Input--closeIcon');
-    expect(closeIcon).toBeInTheDocument();
-    fireEvent.click(closeIcon);
-    expect(getByTestId('DesignSystem-Caption')).toBeInTheDocument();
-    expect(getAllByTestId('DesignSystem-Text')[0]).toHaveTextContent('Invalid value');
-  });
-
-  it('checks for custom caption onCancel Event', () => {
-    const { getByTestId, getAllByTestId } = render(
-      <DatePicker
-        onDateChange={FunctionValue}
-        withInput={true}
-        date={newDate}
-        inputOptions={{
-          required: true,
-          caption: 'Invalid Date Entered',
-        }}
-      />
-    );
-    const closeIcon = getByTestId('DesignSystem-Input--closeIcon');
-    fireEvent.click(closeIcon);
-    expect(getByTestId('DesignSystem-Caption')).toBeInTheDocument();
-    expect(getAllByTestId('DesignSystem-Text')[0]).toHaveTextContent('Invalid Date Entered');
-  });
-
   it('checks for custom placeholderChar option onClose Event', () => {
     const { getByTestId } = render(
       <DatePicker
@@ -166,11 +130,15 @@ describe('renders DatePicker component Event Handlers ', () => {
   });
 
   it('checks onBlur Event', () => {
-    const { getByTestId } = render(<DatePicker onDateChange={FunctionValue} withInput={true} date={newDate} />);
-    const closeIcon = getByTestId('DesignSystem-Input--closeIcon');
+    const { getByTestId } = render(<DatePicker onDateChange={FunctionValue} withInput={true} />);
     const input = getByTestId('DesignSystem-Input');
-    fireEvent.click(closeIcon);
     fireEvent.blur(input);
     expect(input).toHaveValue('__/__/____');
   });
+  it('checks onFocus Event', () => {
+    const { getByTestId } = render(<DatePicker onDateChange={FunctionValue} withInput={true} />);
+    const input = getByTestId('DesignSystem-Input');
+    fireEvent.focus(input);
+    expect(input).toHaveValue('__/__/____');
+  });
 });

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

@@ -76,6 +76,20 @@ export const SingleInputTrigger = (props: TriggerProps) => {
     });
   };
 
+  const getErrorState = (currentVal: string, siblingVal: string) => {
+    const hasNumber = /\d/;
+
+    if (currentVal && siblingVal && !currentVal.includes(placeholderChar) && siblingVal.includes(placeholderChar)) {
+      return true;
+    } else if (currentVal && hasNumber.test(currentVal) && currentVal.includes(placeholderChar)) {
+      return true;
+    } else if ((currentVal && !hasNumber.test(currentVal)) || !currentVal) {
+      return false;
+    }
+
+    return null;
+  };
+
   const onBlurHandler = (_e: React.ChangeEvent<HTMLInputElement>, val: string) => {
     setState({
       init: true,
@@ -85,6 +99,13 @@ export const SingleInputTrigger = (props: TriggerProps) => {
     const startVal = date[0];
     const endVal = date[1];
 
+    const startErr = getErrorState(startVal, endVal);
+    const endErr = getErrorState(endVal, startVal);
+
+    if (startErr !== null && endErr !== null) {
+      setState({ startError: startErr, endError: endErr });
+    }
+
     if (!startVal || startVal.includes(placeholderChar)) setState({ startDate: undefined });
     if (!endVal || endVal.includes(placeholderChar)) setState({ endDate: undefined });
   };
@@ -123,7 +144,7 @@ export const SingleInputTrigger = (props: TriggerProps) => {
           error={showError}
           caption={showError ? errorMessage : ''}
           validators={[inputValidator]}
-          clearOnEmptyBlur={false}
+          clearOnEmptyBlur={true}
         />
       </Column>
     </Row>

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

@@ -66,12 +66,29 @@ export const Trigger = (props: TriggerProps) => {
     setState({
       init: true,
     });
+    const hasNumber = /\d/;
+
     if (type === 'start') {
       const { placeholderChar = '_' } = startInputOptions;
+
+      if (val && hasNumber.test(val) && val.includes(placeholderChar)) {
+        setState({ startError: true });
+      } else if ((val && !hasNumber.test(val)) || !val) {
+        setState({ startError: false });
+      }
+
       if (!val || val.includes(placeholderChar)) setState({ startDate: undefined });
     }
+
     if (type === 'end') {
       const { placeholderChar = '_' } = endInputOptions;
+
+      if (val && hasNumber.test(val) && val.includes(placeholderChar)) {
+        setState({ endError: true });
+      } else if ((val && !hasNumber.test(val)) || !val) {
+        setState({ endError: false });
+      }
+
       if (!val || val.includes(placeholderChar)) setState({ endDate: undefined });
     }
   };
@@ -145,7 +162,7 @@ export const Trigger = (props: TriggerProps) => {
           error={showStartError}
           caption={showStartError ? startErrorMessage : ''}
           validators={[inputValidator]}
-          clearOnEmptyBlur={false}
+          clearOnEmptyBlur={true}
         />
       </Column>
       <Column size={'6'} sizeXS={'12'} className="DateRangePicker-input DateRangePicker-input--endDate">
@@ -177,7 +194,7 @@ export const Trigger = (props: TriggerProps) => {
           error={showEndError}
           caption={showEndError ? endErrorMessage : ''}
           validators={[inputValidator]}
-          clearOnEmptyBlur={false}
+          clearOnEmptyBlur={true}
         />
       </Column>
     </Row>

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

@@ -1,6 +1,8 @@
 import * as React from 'react';
+// import VirtualScroll from 'react-dynamic-virtual-scroll';
 import { GridRow } from './GridRow';
 import { GridState, onSelectFn, Schema, updatePrevPageInfoFunction } from './Grid';
+// import { GridProps } from '@/index.type';
 import GridContext from './GridContext';
 
 export interface GridBodyProps {
@@ -13,7 +15,7 @@ export interface GridBodyProps {
 export const GridBody = (props: GridBodyProps) => {
   const context = React.useContext(GridContext);
 
-  const { data, ref, loading, error, page, errorTemplate } = context;
+  const { data, ref, loading, error, withPagination, page, pageSize, totalRecords, errorTemplate } = context;
 
   if (!loading && error) {
     return errorTemplate ? (typeof errorTemplate === 'function' ? errorTemplate({}) : errorTemplate) : null;
@@ -38,6 +40,16 @@ export const GridBody = (props: GridBodyProps) => {
     };
   }, []);
 
+  const totalPages = Math.ceil(totalRecords / pageSize);
+  const isLastPage = withPagination && page === totalPages;
+  const dataLength = isLastPage
+    ? totalRecords - (page - 1) * pageSize
+    : loading
+    ? pageSize
+    : withPagination
+    ? Math.min(totalRecords, pageSize)
+    : totalRecords;
+
   const renderRow = (rowIndex: number, item: object) => {
     return (
       <GridRow
@@ -50,14 +62,19 @@ export const GridBody = (props: GridBodyProps) => {
     );
   };
 
+  const getArrayList = () => {
+    if (loading && !data.length) {
+      return [...Array(dataLength).map((x) => x)];
+    }
+    return data;
+  };
+
   return (
-    <>
-      <div className="Grid-body">
-        {data.map((item, i) => {
-          return renderRow(i, item);
-        })}
-      </div>
-    </>
+    <div className="Grid-body">
+      {getArrayList().map((item, i) => {
+        return renderRow(i, item);
+      })}
+    </div>
   );
 };
 

package/core/components/organisms/grid/__stories__/variants/loading.story.jsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { Grid } from '@/index';
 
-export const loading = () => {
+export const GridLoadingState = () => {
   const schema = [
     {
       name: 'name',
@@ -44,7 +44,7 @@ const customCode = `() => {
 `;
 
 export default {
-  title: 'Components/Grid/Variants/Loading',
+  title: 'Components/Grid/Variants/Grid Loading State',
   parameters: {
     docs: {
       docPage: {