@innovaccer/design-system 2.6.0 → 2.7.0-0

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

@@ -51,12 +51,18 @@ type SelectionPos = {
   end: number;
 };
 
+type InputMaskType = React.ForwardRefExoticComponent<InputProps & MaskProps & React.RefAttributes<HTMLInputElement>> & {
+  utils: {
+    getDefaultValue: typeof getDefaultValue;
+  };
+};
+
 /**
  * It works as Uncontrolled Input
  *
  * **Updated value can be passed**
  */
-export const InputMask = React.forwardRef<HTMLInputElement, InputMaskProps>((props, forwardRef) => {
+const InputMask = React.forwardRef<HTMLInputElement, InputMaskProps>((props, forwardRef) => {
   const {
     mask: maskProp,
     value: valueProp,
@@ -76,39 +82,46 @@ export const InputMask = React.forwardRef<HTMLInputElement, InputMaskProps>((pro
     ...rest
   } = props;
 
-  const getNewCursorPosition = (type: 'left' | 'right', position: number): number => {
-    if (type === 'right') {
-      for (let i = position; i < mask.length; i++) {
-        if (isEditable(i)) return i;
+  const isEditable = React.useCallback((pos: number) => typeof mask[pos] === 'object', [mask]);
+
+  const getNewCursorPosition = React.useCallback(
+    (type: 'left' | 'right', position: number): number => {
+      if (type === 'right') {
+        for (let i = position; i < mask.length; i++) {
+          if (isEditable(i)) return i;
+        }
+        return mask.length;
       }
-      return mask.length;
-    }
-    if (type === 'left') {
-      for (let i = position; i >= 0; i--) {
-        if (isEditable(i - 1)) return i;
+      if (type === 'left') {
+        for (let i = position; i >= 0; i--) {
+          if (isEditable(i - 1)) return i;
+        }
+        return 0;
       }
-      return 0;
-    }
-    return position;
-  };
+      return position;
+    },
+    [mask, isEditable]
+  );
 
-  const getDefaultSelection = () => {
+  const getDefaultSelection = React.useCallback(() => {
     const pos = getNewCursorPosition('right', 0);
     return { start: pos, end: pos };
-  };
+  }, [getNewCursorPosition]);
 
-  const getPlaceholderValue = (start: number = 0, end: number = mask.length - 1) =>
-    getDefaultValue(mask, placeholderChar).slice(start, end + 1);
-
-  const getSelectionLength = (val: SelectionPos) => Math.abs(val.end - val.start);
+  const getPlaceholderValue = React.useCallback(
+    (start = 0, end: number = mask.length - 1) => getDefaultValue(mask, placeholderChar).slice(start, end + 1),
+    [mask, placeholderChar]
+  );
 
-  const isEditable = (pos: number) => typeof mask[pos] === 'object';
+  const defaultPlaceholderValue = React.useMemo(() => getPlaceholderValue(), [getPlaceholderValue]);
+  const defaultSelection = React.useMemo(() => getDefaultSelection(), [getDefaultSelection]);
 
+  const ref = React.useRef<HTMLInputElement>(null);
   const deferId = React.useRef<number | undefined>();
-  const selectionRef = React.useRef<number>(0);
+  const selectionPos = React.useRef<SelectionPos>(defaultSelection);
+  const newSelectionPos = React.useRef<number>(0);
+
   const [value, setValue] = React.useState<string>(defaultValue || valueProp || '');
-  const [selection, setSelection] = React.useState<SelectionPos>(getDefaultSelection());
-  const ref = React.useRef<HTMLInputElement>(null);
 
   React.useImperativeHandle(forwardRef, () => ref.current as HTMLInputElement);
 
@@ -116,149 +129,195 @@ export const InputMask = React.forwardRef<HTMLInputElement, InputMaskProps>((pro
     setValue(valueProp || '');
   }, [valueProp]);
 
-  const setCursorPosition = (val: number) => setSelectionPos({ start: val, end: val });
+  React.useEffect(() => {
+    setCursorPosition(newSelectionPos.current);
+  }, [value]);
 
-  const getCurrSelection = () => ({
-    start: ref.current?.selectionStart || 0,
-    end: ref.current?.selectionEnd || 0,
-  });
+  const getSelectionLength = React.useCallback((val: SelectionPos) => Math.abs(val.end - val.start), []);
 
-  const setSelectionPos = (pos: SelectionPos): void => {
-    if (ref.current) {
-      const el = ref.current;
-      const start = Math.min(pos.start, pos.end);
-      const end = Math.max(pos.start, pos.end);
-      el.setSelectionRange(start, end);
-    }
-  };
+  const getCurrSelection = React.useCallback(
+    () => ({
+      start: ref.current?.selectionStart || 0,
+      end: ref.current?.selectionEnd || 0,
+    }),
+    [ref.current]
+  );
 
-  const updateSelection = () => {
-    setSelection(getCurrSelection());
+  const setSelectionPos = React.useCallback(
+    (pos: SelectionPos): void => {
+      if (ref.current) {
+        const el = ref.current;
+        const start = Math.min(pos.start, pos.end);
+        const end = Math.max(pos.start, pos.end);
+        el.setSelectionRange(start, end);
+      }
+    },
+    [ref.current]
+  );
 
-    deferId.current = window.requestAnimationFrame(updateSelection);
-  };
+  const setCursorPosition = React.useCallback(
+    (val: number) => setSelectionPos({ start: val, end: val }),
+    [setSelectionPos]
+  );
 
-  const insertAtIndex = (currValue: string, index: number, iterator: number = 0) => {
-    let newValue = '';
-    const newIndex = index + 1;
-    let newIterator = iterator;
+  const insertAtIndex = React.useCallback(
+    (currValue: string, index: number, iterator = 0) => {
+      let newValue = '';
+      const newIndex = index + 1;
+      let newIterator = iterator;
 
-    if (index >= mask.length) {
-      return newValue;
-    }
+      if (index >= mask.length) {
+        return newValue;
+      }
 
-    if (iterator >= currValue.length) {
-      selectionRef.current = index;
-      return newValue;
-    }
+      if (iterator >= currValue.length) {
+        selectionPos.current = { start: index, end: index };
+        return newValue;
+      }
 
-    const m = mask[index];
-    if (isEditable(index)) {
-      if (currValue[iterator].match(m)) {
-        newValue += currValue[iterator];
+      const m = mask[index];
+      if (isEditable(index)) {
+        if (currValue[iterator].match(m)) {
+          newValue += currValue[iterator];
+        } else {
+          newValue += placeholderChar;
+        }
+        newIterator++;
       } else {
-        newValue += placeholderChar;
+        newValue += m;
       }
-      newIterator++;
-    } else {
-      newValue += m;
-    }
 
-    newValue += insertAtIndex(currValue, newIndex, newIterator);
+      newValue += insertAtIndex(currValue, newIndex, newIterator);
 
-    return newValue;
-  };
+      return newValue;
+    },
+    [mask, placeholderChar, isEditable]
+  );
 
-  const onChangeHandler = (e: React.ChangeEvent<HTMLInputElement>) => {
-    const inputVal = e.currentTarget.value;
-
-    const currSelection = getCurrSelection();
-    const start = Math.min(selection.start, currSelection.start);
-    const end = currSelection.end;
-
-    let cursorPosition = start;
-    let enteredVal = '';
-    let updatedVal = '';
-    let removedLength = 0;
-    let insertedStringLength = 0;
-
-    enteredVal = inputVal.slice(start, end);
-    updatedVal = insertAtIndex(enteredVal, start);
-    insertedStringLength = updatedVal.length;
-    if (currSelection.end > selection.end) {
-      removedLength = insertedStringLength ? getSelectionLength(selection) : 0;
-    } else if (inputVal.length < value.length) {
-      removedLength = value.length - inputVal.length;
-    }
-
-    cursorPosition += insertedStringLength;
-
-    const maskedVal = value.split('');
-    for (let i = 0; i < insertedStringLength; i++) {
-      maskedVal[start + i] = updatedVal[i];
-    }
-    for (let i = 0; i < removedLength; i++) {
-      const index = start + insertedStringLength + i;
-      maskedVal[index] = getPlaceholderValue(index, index);
-    }
-
-    const newCursorPosition = getNewCursorPosition(removedLength ? 'left' : 'right', cursorPosition);
-    if (removedLength === 1 && !updatedVal.length && !isEditable(cursorPosition) && newCursorPosition > 0) {
-      cursorPosition = newCursorPosition;
-      cursorPosition--;
-      maskedVal[cursorPosition] = placeholderChar;
-    } else if (removedLength !== 1) {
-      cursorPosition = newCursorPosition;
-    }
-
-    const newValue = maskedVal.slice(0, mask.length).join('');
-    window.requestAnimationFrame(() => setCursorPosition(cursorPosition));
-
-    if (Utils.validators.isValid(validators, newValue) && newValue !== value) {
-      setValue(newValue);
-      if (onChange) onChange(e, newValue);
-    }
-  };
+  const updateSelection = React.useCallback(() => {
+    selectionPos.current = getCurrSelection();
 
-  const onBlurHandler = (e: React.ChangeEvent<HTMLInputElement>) => {
-    let inputVal = e.currentTarget.value;
+    deferId.current = window.requestAnimationFrame(updateSelection);
+  }, [selectionPos.current, getCurrSelection]);
+
+  const onChangeHandler = React.useCallback(
+    (e: React.ChangeEvent<HTMLInputElement>) => {
+      const inputVal = e.currentTarget.value;
+
+      const currSelection = getCurrSelection();
+      const start = Math.min(selectionPos.current.start, currSelection.start);
+      const end = currSelection.end;
+
+      let cursorPosition = start;
+      let enteredVal = '';
+      let updatedVal = '';
+      let removedLength = 0;
+      let insertedStringLength = 0;
+
+      enteredVal = inputVal.slice(start, end);
+      updatedVal = insertAtIndex(enteredVal, start);
+      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;
+      }
 
-    if (clearOnEmptyBlur) {
-      if (inputVal === getPlaceholderValue()) {
-        setValue('');
-        inputVal = '';
+      cursorPosition += insertedStringLength;
+
+      const maskedVal = value.split('');
+      for (let i = 0; i < insertedStringLength; i++) {
+        maskedVal[start + i] = updatedVal[i];
+      }
+      for (let i = 0; i < removedLength; i++) {
+        const index = start + insertedStringLength + i;
+        maskedVal[index] = getPlaceholderValue(index, index);
       }
-    }
 
-    if (onBlur) onBlur(e, inputVal);
+      const newCursorPosition = getNewCursorPosition(removedLength ? 'left' : 'right', cursorPosition);
+      if (removedLength === 1 && !updatedVal.length && !isEditable(cursorPosition) && newCursorPosition > 0) {
+        cursorPosition = newCursorPosition;
+        cursorPosition--;
+        maskedVal[cursorPosition] = placeholderChar;
+      } else if (removedLength !== 1) {
+        cursorPosition = newCursorPosition;
+      }
 
-    if (deferId.current) window.cancelAnimationFrame(deferId.current);
-  };
+      const newValue = maskedVal.slice(0, mask.length).join('');
+      newSelectionPos.current = cursorPosition;
 
-  const onClearHandler = (e: React.MouseEvent<HTMLElement> | React.KeyboardEvent<HTMLElement>) => {
-    // setValue('');
-    // window.requestAnimationFrame(() => ref.current!.blur());
-    setValue(getPlaceholderValue());
-    window.requestAnimationFrame(() => setCursorPosition(getDefaultSelection().start));
+      if (newValue !== value && Utils.validators.isValid(validators, newValue)) {
+        setValue(newValue);
+        onChange?.(e, newValue);
+      } else {
+        window.requestAnimationFrame(() => setCursorPosition(newSelectionPos.current));
+      }
+    },
+    [
+      selectionPos.current,
+      validators,
+      getCurrSelection,
+      insertAtIndex,
+      getSelectionLength,
+      getPlaceholderValue,
+      getNewCursorPosition,
+      isEditable,
+      setCursorPosition,
+      setValue,
+      onChange,
+    ]
+  );
 
-    if (onClear) onClear(e);
-  };
+  const onBlurHandler = React.useCallback(
+    (e: React.ChangeEvent<HTMLInputElement>) => {
+      let inputVal = e.currentTarget.value;
 
-  const onFocusHandler = (e: React.FocusEvent<HTMLInputElement>) => {
-    deferId.current = window.requestAnimationFrame(updateSelection);
-    if (!value) {
-      setValue(getPlaceholderValue());
-      window.requestAnimationFrame(() => setSelectionPos(getDefaultSelection()));
-    }
+      if (clearOnEmptyBlur) {
+        if (inputVal === defaultPlaceholderValue) {
+          setValue('');
+          inputVal = '';
+        }
+      }
 
-    if (onFocus) onFocus(e);
-  };
+      onBlur?.(e, inputVal);
+
+      if (deferId.current) window.cancelAnimationFrame(deferId.current);
+    },
+    [clearOnEmptyBlur, deferId.current, getPlaceholderValue, setValue, onBlur]
+  );
+
+  const onClearHandler = React.useCallback(
+    (e: React.MouseEvent<HTMLElement> | React.KeyboardEvent<HTMLElement>) => {
+      newSelectionPos.current = defaultSelection.start;
+      setValue(defaultPlaceholderValue);
+
+      onClear?.(e);
+    },
+    [setValue, getPlaceholderValue, setCursorPosition, getDefaultSelection, onClear]
+  );
+
+  const onFocusHandler = React.useCallback(
+    (e: React.FocusEvent<HTMLInputElement>) => {
+      deferId.current = window.requestAnimationFrame(updateSelection);
+      if (!value) {
+        newSelectionPos.current = defaultSelection.start;
+        setValue(getPlaceholderValue());
+      }
 
-  const classes = classNames(
-    {
-      'd-flex flex-column flex-grow-1': true,
+      onFocus?.(e);
     },
-    className
+    [deferId.current, value, updateSelection, setValue, setSelectionPos, onFocus]
+  );
+
+  const classes = React.useMemo(
+    () =>
+      classNames(
+        {
+          'd-flex flex-column flex-grow-1': true,
+        },
+        className
+      ),
+    [className]
   );
 
   return (
@@ -283,9 +342,16 @@ export const InputMask = React.forwardRef<HTMLInputElement, InputMaskProps>((pro
 });
 
 InputMask.displayName = 'InputMask';
-// @ts-ignore
-InputMask.utils = {
+// we are adding a new property which is not present in default interface
+// we could have explicitly added the interface above with definition
+// but then it would force us to marks utils as optional
+// as we cannot add new properties by defining the InputMask
+// that would cause user to use `!` everywhere or check for utils
+(InputMask as InputMaskType).utils = {
   getDefaultValue,
 };
 
-export default InputMask;
+const X = InputMask as InputMaskType;
+
+export { X as InputMask };
+export default X as InputMaskType;

package/core/components/molecules/inputMask/__stories__/index.story.tsx

@@ -59,7 +59,31 @@ export const all = () => {
   );
 };
 
+const customCode = `// import { Utils } from '@innovaccer/design-system';
+
+() => {
+  const dateMask = Utils.masks.date['mm/dd/yyyy'];
+  const dateValidator = (val) => Utils.validators.date(val, 'mm/dd/yyyy');
+
+  return (
+    <div className="w-25">
+      <InputMask
+        mask={dateMask}
+        validators={dateValidator}
+      />
+    </div>
+  );
+};
+`;
+
 export default {
   title: 'Components/InputMask/All',
   component: InputMask,
+  parameters: {
+    docs: {
+      docPage: {
+        customCode,
+      },
+    },
+  },
 };

package/core/components/molecules/modal/Modal.tsx

@@ -2,18 +2,16 @@ import * as React from 'react';
 import * as ReactDOM from 'react-dom';
 import classNames from 'classnames';
 import { BaseProps, extractBaseProps } from '@/utils/types';
-import { OverlayFooter, OverlayFooterProps } from '@/components/molecules/overlayFooter';
+import { OverlayFooter } from '@/components/molecules/overlayFooter';
 import { OverlayHeader, OverlayHeaderProps } from '@/components/molecules/overlayHeader';
 import { OverlayBody } from '@/components/molecules/overlayBody';
 import { Row, Column, Backdrop, OutsideClick, Button } from '@/index';
 import { ColumnProps } from '@/index.type';
 import { getWrapperElement, getUpdatedZIndex, closeOnEscapeKeypress } from '@/utils/overlayHelper';
 import OverlayManager from '@/utils/OverlayManager';
+import { FooterOptions } from '@/common.type';
+export type ModalDimension = 'small' | 'medium' | 'large';
 
-export type Dimension = 'small' | 'medium' | 'large';
-type FooterOptions = {
-  actions: OverlayFooterProps['actions'];
-};
 export interface ModalProps extends BaseProps {
   /**
    * Callback for `Modal` close event on backdrop click
@@ -26,7 +24,7 @@ export interface ModalProps extends BaseProps {
   /**
    * Dimension of `Modal`
    */
-  dimension: Dimension;
+  dimension: ModalDimension;
   /**
    * Handles open/close state
    */

package/core/components/molecules/modal/__stories__/Confirmation.story.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { action } from '@storybook/addon-actions';
-import { Modal, ModalDescription, Button, Paragraph, Text } from '@/index';
+import { Modal, Button, Paragraph, Text } from '@/index';
 
 export const confirmations = () => {
   const [open, setOpen] = React.useState(true);

package/core/components/molecules/placeholder/Placeholder.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import classNames from 'classnames';
 import { BaseProps, extractBaseProps } from '@/utils/types';
-import PlaceholderImage, { Size } from '@/components/atoms/placeholderImage';
+import PlaceholderImage, { PlaceholderImageSize } from '@/components/atoms/placeholderImage';
 import { PlaceholderParagraphProps } from '@/components/atoms/placeholderParagraph';
 
 export interface PlaceholderProps extends BaseProps {
@@ -16,7 +16,7 @@ export interface PlaceholderProps extends BaseProps {
   /**
    * Specifies dimension of `Placeholder`
    */
-  imageSize: Size;
+  imageSize: PlaceholderImageSize;
   /**
    * To be rendered in `Placeholder` wrapper
    */

package/core/components/molecules/popover/Popover.tsx

@@ -86,7 +86,7 @@ export const Popover = (props: PopoverProps) => {
     onToggle,
     className,
     hideOnReferenceEscape,
-    boundaryElement,
+    boundaryElement = document.body,
     ...rest
   } = props;
 
@@ -140,19 +140,12 @@ export const Popover = (props: PopoverProps) => {
 };
 
 Popover.displayName = 'Popover';
-// Popover.defaultProps = {
-//   ...filterProps(PopperWrapper.defaultProps, propsList, true),
-//   offset: 'large',
-//   position: 'bottom',
-//   hideOnReferenceEscape: true,
-//   customStyle: {},
-// }
+
 Popover.defaultProps = Object.assign({}, filterProps(PopperWrapper.defaultProps, propsList, true), {
   offset: 'large',
   position: 'bottom',
   hideOnReferenceEscape: true,
   customStyle: {},
-  boundaryElement: document.body,
 });
 
 export default Popover;

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

@@ -3,17 +3,15 @@ import * as ReactDOM from 'react-dom';
 import classNames from 'classnames';
 import { Row, Column, Backdrop, OutsideClick, Button } from '@/index';
 import { ColumnProps } from '@/index.type';
-import { OverlayFooter, OverlayFooterProps } from '@/components/molecules/overlayFooter';
+import { OverlayFooter } from '@/components/molecules/overlayFooter';
 import { OverlayHeader, OverlayHeaderProps } from '@/components/molecules/overlayHeader';
 import { OverlayBody } from '@/components/molecules/overlayBody';
 import { BaseProps, extractBaseProps } from '@/utils/types';
 import { getWrapperElement, getUpdatedZIndex, closeOnEscapeKeypress } from '@/utils/overlayHelper';
 import OverlayManager from '@/utils/OverlayManager';
+import { FooterOptions } from '@/common.type';
 
-export type Dimension = 'regular' | 'large';
-type FooterOptions = {
-  actions: OverlayFooterProps['actions'];
-};
+export type SidesheetDimension = 'regular' | 'large';
 
 export interface SidesheetProps extends BaseProps {
   /**
@@ -55,7 +53,7 @@ export interface SidesheetProps extends BaseProps {
    *
    * Dimension: `large` | `regular`
    */
-  dimension: Dimension;
+  dimension: SidesheetDimension;
   /**
    * Handles open/close state
    */
@@ -108,7 +106,7 @@ interface SidesheetState {
   zIndex?: number;
 }
 
-const sidesheetWidth: Record<Dimension, ColumnProps['size']> = {
+const sidesheetWidth: Record<SidesheetDimension, ColumnProps['size']> = {
   regular: '6',
   large: '10',
 };