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

@innovaccer/design-system 2.5.0 → 2.7.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 (462) hide show

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

@@ -28,40 +28,9 @@ exports[`Toast component
           </h5>
           <i
             class="material-icons material-icons-round Icon Icon--white Toast-icon Toast-icon--right Toast-icon--alert"
+            role="button"
             style="font-size: 16px; width: 16px;"
-          >
-            close_round
-          </i>
-        </div>
-      </div>
-    </div>
-  </div>
-</body>
-`;
-exports[`Toast component
-  title: "Sample Toast", appearance: "default", onClose: "[Function]"
- 1`] = `
-<body>
-  <div>
-    <div
-      class="Toast Toast--default"
-    >
-      <div
-        class="Toast-body"
-      >
-        <div
-          class="Toast-title"
-        >
-          <h5
-            class="Heading Heading--s Heading--white Toast-heading Toast-heading--default"
-            data-test="DesignSystem-Heading"
-          >
-            Sample Toast
-          </h5>
-          <i
-            class="material-icons material-icons-round Icon Icon--white Toast-icon Toast-icon--right Toast-icon--default"
-            style="font-size: 16px; width: 16px;"
+            tabindex="0"
           >
             close_round
           </i>
@@ -100,7 +69,9 @@ exports[`Toast component
           </h5>
           <i
             class="material-icons material-icons-round Icon Icon--white Toast-icon Toast-icon--right Toast-icon--info"
+            role="button"
             style="font-size: 16px; width: 16px;"
+            tabindex="0"
           >
             close_round
           </i>
@@ -139,7 +110,9 @@ exports[`Toast component
           </h5>
           <i
             class="material-icons material-icons-round Icon Icon--white Toast-icon Toast-icon--right Toast-icon--success"
+            role="button"
             style="font-size: 16px; width: 16px;"
+            tabindex="0"
           >
             close_round
           </i>
@@ -178,7 +151,9 @@ exports[`Toast component
           </h5>
           <i
             class="material-icons material-icons-round Icon Icon--default Toast-icon Toast-icon--right Toast-icon--warning"
+            role="button"
             style="font-size: 16px; width: 16px;"
+            tabindex="0"
           >
             close_round
           </i>
@@ -217,7 +192,9 @@ exports[`Toast component
           </h5>
           <i
             class="material-icons material-icons-round Icon Icon--white Toast-icon Toast-icon--right Toast-icon--alert"
+            role="button"
             style="font-size: 16px; width: 16px;"
+            tabindex="0"
           >
             close_round
           </i>
@@ -262,7 +239,9 @@ exports[`Toast component
           </h5>
           <i
             class="material-icons material-icons-round Icon Icon--white Toast-icon Toast-icon--right Toast-icon--alert"
+            role="button"
             style="font-size: 16px; width: 16px;"
+            tabindex="0"
           >
             close_round
           </i>
@@ -293,98 +272,6 @@ exports[`Toast component
 </body>
 `;
-exports[`Toast component
-  title: "Sample Toast", message: "Sample string", appearance: "default", onClose: "[Function]"
- 1`] = `
-<body>
-  <div>
-    <div
-      class="Toast Toast--withMessage Toast--default"
-    >
-      <div
-        class="Toast-body"
-      >
-        <div
-          class="Toast-title Toast-title--withMessage"
-        >
-          <h5
-            class="Heading Heading--s Heading--white Toast-heading Toast-heading--default"
-            data-test="DesignSystem-Heading"
-          >
-            Sample Toast
-          </h5>
-          <i
-            class="material-icons material-icons-round Icon Icon--white Toast-icon Toast-icon--right Toast-icon--default"
-            style="font-size: 16px; width: 16px;"
-          >
-            close_round
-          </i>
-        </div>
-        <span
-          class="Text Text--white Text--regular Toast-text Toast-text--default"
-          data-test="DesignSystem-Text"
-        >
-          Sample string
-        </span>
-      </div>
-    </div>
-  </div>
-</body>
-`;
-exports[`Toast component
-  title: "Sample Toast", message: "Sample string", appearance: "default", onClose: "[Function]", actions: [{"label":"Action 1","onClick":"[Function]"}]
- 1`] = `
-<body>
-  <div>
-    <div
-      class="Toast Toast--withMessage Toast--default"
-    >
-      <div
-        class="Toast-body"
-      >
-        <div
-          class="Toast-title Toast-title--withMessage"
-        >
-          <h5
-            class="Heading Heading--s Heading--white Toast-heading Toast-heading--default"
-            data-test="DesignSystem-Heading"
-          >
-            Sample Toast
-          </h5>
-          <i
-            class="material-icons material-icons-round Icon Icon--white Toast-icon Toast-icon--right Toast-icon--default"
-            style="font-size: 16px; width: 16px;"
-          >
-            close_round
-          </i>
-        </div>
-        <span
-          class="Text Text--white Text--regular Toast-text Toast-text--default"
-          data-test="DesignSystem-Text"
-        >
-          Sample string
-        </span>
-        <div
-          class="Toast-actions"
-        >
-          <button
-            class="Button Button--tiny Toast-actionButton Toast-actionButton--default"
-          >
-            <span
-              class="Text Text--white Text--regular"
-              data-test="DesignSystem-Text"
-            >
-              Action 1
-            </span>
-          </button>
-        </div>
-      </div>
-    </div>
-  </div>
-</body>
-`;
 exports[`Toast component
   title: "Sample Toast", message: "Sample string", appearance: "info", onClose: "[Function]"
  1`] = `
@@ -413,7 +300,9 @@ exports[`Toast component
           </h5>
           <i
             class="material-icons material-icons-round Icon Icon--white Toast-icon Toast-icon--right Toast-icon--info"
+            role="button"
             style="font-size: 16px; width: 16px;"
+            tabindex="0"
           >
             close_round
           </i>
@@ -458,7 +347,9 @@ exports[`Toast component
           </h5>
           <i
             class="material-icons material-icons-round Icon Icon--white Toast-icon Toast-icon--right Toast-icon--info"
+            role="button"
             style="font-size: 16px; width: 16px;"
+            tabindex="0"
           >
             close_round
           </i>
@@ -517,7 +408,9 @@ exports[`Toast component
           </h5>
           <i
             class="material-icons material-icons-round Icon Icon--white Toast-icon Toast-icon--right Toast-icon--success"
+            role="button"
             style="font-size: 16px; width: 16px;"
+            tabindex="0"
           >
             close_round
           </i>
@@ -562,7 +455,9 @@ exports[`Toast component
           </h5>
           <i
             class="material-icons material-icons-round Icon Icon--white Toast-icon Toast-icon--right Toast-icon--success"
+            role="button"
             style="font-size: 16px; width: 16px;"
+            tabindex="0"
           >
             close_round
           </i>
@@ -621,7 +516,9 @@ exports[`Toast component
           </h5>
           <i
             class="material-icons material-icons-round Icon Icon--default Toast-icon Toast-icon--right Toast-icon--warning"
+            role="button"
             style="font-size: 16px; width: 16px;"
+            tabindex="0"
           >
             close_round
           </i>
@@ -666,7 +563,9 @@ exports[`Toast component
           </h5>
           <i
             class="material-icons material-icons-round Icon Icon--default Toast-icon Toast-icon--right Toast-icon--warning"
+            role="button"
             style="font-size: 16px; width: 16px;"
+            tabindex="0"
           >
             close_round
           </i>

package/core/components/css-utilities/Schema.tsx CHANGED Viewed

@@ -1,5 +1,5 @@
 import { Schema } from '../organisms/grid';
-import React from 'react';
+import * as React from 'react';
 import { GridCell, Button } from '@/index';
 const copyCode = (val: string) => navigator.clipboard.writeText(val);

package/core/components/css-utilities/Spacing/Schema.tsx CHANGED Viewed

@@ -1,6 +1,6 @@
 import { Schema } from '../../organisms/grid';
 import { GridCell, Button } from '@/index';
-import React from 'react';
+import * as React from 'react';
 const copyCode = (val: string) => navigator.clipboard.writeText(val);

package/core/components/molecules/chatMessage/Box.tsx CHANGED Viewed

@@ -33,11 +33,14 @@ export const Box = (props: InternalBoxProps) => {
     className
   );
+  /* TODO(a11y): fix accessibility  */
+  /* eslint-disable  */
   return (
     <div {...baseProps} className={MessageClass} onClick={onClick} data-test="DesignSystem-ChatMessage--Box">
       {children}
     </div>
   );
+  /* eslint-enable  */
 };
 Box.displayName = 'Box';

package/core/components/molecules/chipInput/ChipInput.tsx CHANGED Viewed

@@ -190,6 +190,8 @@ export const ChipInput = (props: ChipInputProps) => {
   });
   return (
+    /* TODO(a11y): fix accessibility  */
+    /* eslint-disable  */
     <div data-test="DesignSystem-ChipInput" {...baseProps} className={ChipInputClass} onClick={onClickHandler}>
       <div className="ChipInput-wrapper">
         {chips && chips.length > 0 && chipComponents}
@@ -206,6 +208,7 @@ export const ChipInput = (props: ChipInputProps) => {
           onChange={onInputChangeHandler}
           onKeyDown={onKeyDownHandler}
         />
+        {/* eslint-enable */}
       </div>
       {chips.length > 0 && (
         <Icon

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

@@ -23,9 +23,11 @@ exports[`ChipInput component
             1020
           </span>
           <i
-            class="material-icons material-icons-round Icon Icon--subtle Chip-icon Chip-icon--right cursor-pointer"
+            class="material-icons material-icons-round Icon Chip-icon Chip-icon--right cursor-pointer"
             data-test="DesignSystem-GenericChip--clearButton"
+            role="button"
             style="font-size: 16px; width: 16px;"
+            tabindex="0"
           >
             clear_round
           </i>
@@ -41,9 +43,11 @@ exports[`ChipInput component
             80
           </span>
           <i
-            class="material-icons material-icons-round Icon Icon--subtle Chip-icon Chip-icon--right cursor-pointer"
+            class="material-icons material-icons-round Icon Chip-icon Chip-icon--right cursor-pointer"
             data-test="DesignSystem-GenericChip--clearButton"
+            role="button"
             style="font-size: 16px; width: 16px;"
+            tabindex="0"
           >
             clear_round
           </i>
@@ -58,7 +62,9 @@ exports[`ChipInput component
       <i
         class="material-icons material-icons-round Icon Icon--subtle ChipInput-icon"
         data-test="DesignSystem-ChipInput--Icon"
+        role="button"
         style="font-size: 16px; width: 16px;"
+        tabindex="0"
       >
         close_round
       </i>
@@ -92,7 +98,9 @@ exports[`ChipInput component
           <i
             class="material-icons material-icons-round Icon Icon--disabled Chip-icon Chip-icon--right"
             data-test="DesignSystem-GenericChip--clearButton"
+            role="button"
             style="font-size: 16px; width: 16px;"
+            tabindex="0"
           >
             clear_round
           </i>
@@ -110,7 +118,9 @@ exports[`ChipInput component
           <i
             class="material-icons material-icons-round Icon Icon--disabled Chip-icon Chip-icon--right"
             data-test="DesignSystem-GenericChip--clearButton"
+            role="button"
             style="font-size: 16px; width: 16px;"
+            tabindex="0"
           >
             clear_round
           </i>
@@ -126,7 +136,9 @@ exports[`ChipInput component
       <i
         class="material-icons material-icons-round Icon Icon--subtle ChipInput-icon"
         data-test="DesignSystem-ChipInput--Icon"
+        role="button"
         style="font-size: 16px; width: 16px;"
+        tabindex="0"
       >
         close_round
       </i>

package/core/components/molecules/dropzone/Dropzone.tsx CHANGED Viewed

@@ -1,4 +1,4 @@
-import React from 'react';
+import * as React from 'react';
 import classNames from 'classnames';
 import { Icon, Text } from '@/index';
 import DropzoneBase, { DropzoneBaseProps } from './DropzoneBase';
@@ -7,7 +7,7 @@ import DropzoneError from './DropzoneError';
 import { BaseProps, extractBaseProps } from '@/utils/types';
 import { fileErrorMessages } from './FileErrors';
-export type Type = 'standard' | 'compressed' | 'tight';
+export type DropZoneType = 'standard' | 'compressed' | 'tight';
 export interface DropzoneProps extends BaseProps, DropzoneBaseProps {
   /**
@@ -17,7 +17,7 @@ export interface DropzoneProps extends BaseProps, DropzoneBaseProps {
   /**
    * Size of `Dropzone`
    */
-  type: Type;
+  type: DropZoneType;
   /**
    * Description of maximum size in `FileUploader`
    */
@@ -70,6 +70,8 @@ export const Dropzone = (props: DropzoneProps) => {
             <Text size="large" weight="strong" className="mr-2" appearance={disabled ? 'disabled' : 'default'}>
               Drag your files here or
             </Text>
+            {/* TODO(a11y): fix accessibility  */}
+            {/* eslint-disable */}
             <span className="cursor-pointer" onClick={open}>
               <Text size="large" weight="strong" appearance={disabled ? 'disabled' : 'link'}>
                 browse files
@@ -77,6 +79,7 @@ export const Dropzone = (props: DropzoneProps) => {
             </span>
             <input {...getInputProps()} />
           </span>
+          {/* eslint-enable */}
           {formatLabel && <Text appearance={disabled ? 'disabled' : 'subtle'}>{formatLabel}</Text>}
           {sizeLabel && <Text appearance={disabled ? 'disabled' : 'subtle'}>{sizeLabel}</Text>}
           {sampleFileLink && <div className="mt-5">{sampleFileLink}</div>}

package/core/components/molecules/dropzone/DropzoneBase.tsx CHANGED Viewed

@@ -106,7 +106,7 @@ export interface DropzoneBaseProps extends BaseProps {
    * @param {FileRejection[]} fileRejections
    * @param {(DragEvent|Event)} event
    */
-  onDropRejected?: (event: DragEvent | Event, rejectedFiles: FileRejection[]) => any;
+  onDropRejected?: (event: DragEvent | Event, rejectedFiles: FileRejection[]) => void;
   /**
    * Custom validation function
@@ -149,8 +149,8 @@ export const DropzoneBase = (props: DropzoneBaseProps) => {
     validator,
   } = props;
-  const rootRef = useRef(null);
-  const inputRef = useRef(null);
+  const rootRef = useRef<HTMLDivElement>(null);
+  const inputRef = useRef<HTMLInputElement>(null);
   const [state, dispatch] = useReducer(reducer, initialState);
   const { isFocused, isFileDialogActive, draggedFiles } = state;
@@ -158,9 +158,9 @@ export const DropzoneBase = (props: DropzoneBaseProps) => {
   const openFileDialog = useCallback(() => {
     if (inputRef.current) {
       dispatch({ type: 'openDialog' });
-      // @ts-ignore
-      inputRef.current.value = null;
-      // @ts-ignore
+      inputRef.current.value = '';
       inputRef.current.click();
     }
   }, [dispatch]);
@@ -169,10 +169,9 @@ export const DropzoneBase = (props: DropzoneBaseProps) => {
     if (isFileDialogActive) {
       setTimeout(() => {
         if (inputRef.current) {
-          // @ts-ignore
           const { files } = inputRef.current;
-          if (!files.length) {
+          if (!files || !files.length) {
             dispatch({ type: 'closeDialog' });
             if (typeof onFileDialogCancel === 'function') {
@@ -193,7 +192,6 @@ export const DropzoneBase = (props: DropzoneBaseProps) => {
   // Cb to open the file dialog when SPACE/ENTER occurs on the dropzone
   const onKeyDownCb = useCallback(
     (event) => {
-      // @ts-ignore
       if (!rootRef.current || !rootRef.current.isEqualNode(event.target)) {
         return;
       }
@@ -215,11 +213,11 @@ export const DropzoneBase = (props: DropzoneBaseProps) => {
     dispatch({ type: 'blur' });
   }, []);
-  const dragTargetsRef = useRef([]);
+  const dragTargetsRef = useRef<HTMLElement[]>([]);
-  const onDocumentDrop = (event: any) => {
-    // @ts-ignore
-    if (rootRef.current && rootRef.current.contains(event.target)) {
+  const onDocumentDrop = (event: DragEvent) => {
+    // Not every event target type is element so we have to check if it is.
+    if (event.target instanceof HTMLDivElement && rootRef.current && rootRef.current.contains(event.target)) {
       return;
     }
     event.preventDefault();
@@ -245,7 +243,6 @@ export const DropzoneBase = (props: DropzoneBaseProps) => {
       event.preventDefault();
       event.persist();
-      // @ts-ignore
       dragTargetsRef.current = [...dragTargetsRef.current, event.target];
       if (isEvtWithFiles(event)) {
@@ -294,11 +291,7 @@ export const DropzoneBase = (props: DropzoneBaseProps) => {
       event.preventDefault();
       event.persist();
-      const targets = dragTargetsRef.current.filter(
-        // @ts-ignore
-        (target) => rootRef.current && rootRef.current.contains(target)
-      );
-      // @ts-ignore
+      const targets = dragTargetsRef.current.filter((target) => rootRef.current && rootRef.current.contains(target));
       const targetIdx = targets.indexOf(event.target);
       if (targetIdx !== -1) {
         targets.splice(targetIdx, 1);
@@ -336,7 +329,10 @@ export const DropzoneBase = (props: DropzoneBaseProps) => {
           }
           const acceptedFiles: File[] = [];
-          const fileRejections: any[] = [];
+          const fileRejections: {
+            file: File;
+            errors: FileError[];
+          }[] = [];
           files.forEach((file: File) => {
             const [accepted, acceptError] = fileAccepted(file, accept);
@@ -351,8 +347,8 @@ export const DropzoneBase = (props: DropzoneBaseProps) => {
               if (customErrors) {
                 errors = errors.concat(customErrors);
               }
-              fileRejections.push({ file, errors: errors.filter((e) => e) });
+              const filteredErrors = errors.filter((e) => e) as Array<FileError>;
+              fileRejections.push({ file, errors: filteredErrors });
             }
           });
@@ -380,18 +376,10 @@ export const DropzoneBase = (props: DropzoneBaseProps) => {
     [multiple, accept, minSize, maxSize, getFilesFromEvent, onDrop, onDropAccepted, onDropRejected]
   );
-  const composeHandler = (fn: any) => {
+  const composeDragHandler = (fn: (event: DragEvent) => void) => {
     return disabled ? null : fn;
   };
-  const composeKeyboardHandler = (_fn: any) => {
-    return null;
-  };
-  const composeDragHandler = (fn: any) => {
-    return composeHandler(fn);
-  };
   const getRootProps = useMemo(
     () =>
       ({
@@ -406,10 +394,6 @@ export const DropzoneBase = (props: DropzoneBaseProps) => {
         onDropCallback,
         ...rest
       }: any = {}) => ({
-        onKeyDown: composeKeyboardHandler(composeEventHandlers(onKeyDown, onKeyDownCb)),
-        onFocus: composeKeyboardHandler(composeEventHandlers(onFocus, onFocusCb)),
-        onBlur: composeKeyboardHandler(composeEventHandlers(onBlur, onBlurCb)),
-        // onClick: composeHandler(composeEventHandlers(onClick, onClickCb)),
         onDragEnter: composeDragHandler(composeEventHandlers(onDragEnterCallback, onDragEnterCb)),
         onDragOver: composeDragHandler(composeEventHandlers(onDragOverCallback, onDragOverCb)),
         onDragLeave: composeDragHandler(composeEventHandlers(onDragLeaveCallback, onDragLeaveCb)),
@@ -432,8 +416,8 @@ export const DropzoneBase = (props: DropzoneBaseProps) => {
           multiple,
           type: 'file',
           style: { display: 'none' },
-          onChange: composeHandler(composeEventHandlers(onChange, onDropCb)),
-          onClick: composeHandler(composeEventHandlers(onClick, onInputElementClick)),
+          onChange: composeDragHandler(composeEventHandlers(onChange, onDropCb)),
+          onClick: composeDragHandler(composeEventHandlers(onClick, onInputElementClick)),
           autoComplete: 'off',
           tabIndex: -1,
           [refKey]: inputRef,
@@ -463,7 +447,7 @@ export const DropzoneBase = (props: DropzoneBaseProps) => {
     draggedFiles,
     fileError,
     isFocused: isFocused && !disabled,
-    open: composeHandler(openFileDialog),
+    open: composeDragHandler(openFileDialog),
   };
 };

package/core/components/molecules/dropzone/FileSelectorUtils.tsx CHANGED Viewed

@@ -16,7 +16,7 @@ export const COMMON_MIME_TYPES = new Map([
 const FILES_TO_IGNORE = ['.DS_Store', 'Thumbs.db'];
-interface FileArray extends Array<FileValue> {}
+type FileArray = Array<FileValue>;
 type FileValue = FileWithPath | FileArray[];