ekm-ui 0.3.24 → 0.3.28

package/dist/stacked-list-item.mjs

@@ -1,23 +1,24 @@
-export { a as StackedListItem } from './chunk-3LWR4ASZ.mjs';
+export { a as StackedListItem } from './chunk-KJPNVM7M.mjs';
 import './chunk-EHJJX6ZZ.mjs';
 import './chunk-YFGQ3B3L.mjs';
-import './chunk-LNK7V5RH.mjs';
+import './chunk-45QX7OUO.mjs';
 import './chunk-QWPN2UNV.mjs';
 import './chunk-ASCPOK5F.mjs';
+import './chunk-25FJ277C.mjs';
 import './chunk-FAFXVD4P.mjs';
-import './chunk-ONI5FUPW.mjs';
-import './chunk-A6OC3NNV.mjs';
+import './chunk-MA4QT7NM.mjs';
+import './chunk-XFCPRHEY.mjs';
+import './chunk-BRWFUWH7.mjs';
 import './chunk-256SAVHD.mjs';
 import './chunk-VPLCWU7T.mjs';
 import './chunk-PPMW7YAZ.mjs';
-import './chunk-XFCPRHEY.mjs';
+import './chunk-5CGIKL2Y.mjs';
 import './chunk-NTGEZMHP.mjs';
 import './chunk-E7S3XFB4.mjs';
 import './chunk-RMX72FR3.mjs';
 import './chunk-2IL2LP47.mjs';
 import './chunk-KBXHNBM5.mjs';
 import './chunk-EPWIDK35.mjs';
-import './chunk-25FJ277C.mjs';
 import './chunk-BIU2AAPZ.mjs';
 import './chunk-D6H235SZ.mjs';
 import './chunk-S4LI5APF.mjs';

package/dist/table-header/table-header.mjs

@@ -1,4 +1,4 @@
-export { a as TableHeader } from '../chunk-LNK7V5RH.mjs';
+export { a as TableHeader } from '../chunk-45QX7OUO.mjs';
 import '../chunk-PUJZGK7Y.mjs';
 import '../chunk-23SJGKDR.mjs';
 //# sourceMappingURL=out.js.map

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ekm-ui",
-  "version": "0.3.24",
+  "version": "0.3.28",
   "sideEffects": [
     "**/*.css"
   ],

package/src/file-picker/file-listing.tsx

@@ -1,6 +1,6 @@
 // @ts-nocheck
 import { useEffect, useRef } from 'react'
-import { Radio } from 'flowbite-react'
+import { Radio } from '../radio'
 import PropTypes from 'prop-types'
 
 // FOR USE WITH THE FILE PICKER COMPONENT - ONLY
@@ -52,7 +52,7 @@ function FileRow({ file, selected = false, callback }) {
     >
       <div className="flex items-center ml-3">
         <div className="flex-shrink-0">
-          <Radio name={file.Name} checked={selected} readOnly />
+          <Radio id={file.Name} name={file.Name} checked={selected} readOnly />
         </div>
         <div className="ml-4">
           <img className="h-10 w-10 rounded-md" src={`https://files.ekmcdn.com/${file.Uri}`} alt="" />
@@ -70,29 +70,29 @@ function FileRow({ file, selected = false, callback }) {
 }
 
 Listing.propTypes = {
-    /** Border style to use*/
-    border: PropTypes.string,
-    /** Array of files to list */
-    files: PropTypes.array,
-    /** Boolean to indicate if there are more files to load */
-    isMore: PropTypes.bool,
-    /** Name of the selected file */
-    selected: PropTypes.string,
-    /** Current page */
-    page: PropTypes.number,
-    /** Total number of pages */
-    pages: PropTypes.number,
-    /** Callback function to handle events */
-    callback: PropTypes.func,
+  /** Border style to use*/
+  border: PropTypes.string,
+  /** Array of files to list */
+  files: PropTypes.array,
+  /** Boolean to indicate if there are more files to load */
+  isMore: PropTypes.bool,
+  /** Name of the selected file */
+  selected: PropTypes.string,
+  /** Current page */
+  page: PropTypes.number,
+  /** Total number of pages */
+  pages: PropTypes.number,
+  /** Callback function to handle events */
+  callback: PropTypes.func,
 }
 
 FileRow.propTypes = {
-    /** File object to display */
-    file: PropTypes.object,
-    /** Boolean to indicate if the file is selected */
-    selected: PropTypes.bool,
-    /** Callback function to handle events */
-    callback: PropTypes.func,
+  /** File object to display */
+  file: PropTypes.object,
+  /** Boolean to indicate if the file is selected */
+  selected: PropTypes.bool,
+  /** Callback function to handle events */
+  callback: PropTypes.func,
 }
 
 function InfiniteLoader() {
@@ -129,4 +129,3 @@ function writeDate(date) {
     return 'Unknown'
   }
 }
-

package/src/file-picker/file-picker.tsx

@@ -10,12 +10,14 @@ import { HiOutlineSearch } from 'react-icons/hi'
 import Listing from './file-listing'
 import PropTypes from 'prop-types'
 
+
 const apiUrl = '/admin/api/common/directoryinformation/'
 const Status = Object.freeze({
   EMPTY: 'EMPTY',
   SEARCH_LOADING: 'SEARCH-LOADING',
   LOADING: 'LOADING',
   LOADED: 'LOADED',
+  LOADED_NO_DRAG: 'LOADED_NO_DRAG',
   SEARCH_RESULTS: 'SEARCH-RESULTS',
   SEARCH_EMPTY: 'SEARCH-EMPTY',
   UPLOAD_ERROR: 'ERROR',
@@ -24,7 +26,6 @@ const Status = Object.freeze({
 
 const initialState = Object.freeze({
   mode: Status.LOADING,
-  footerBorder: 'border-t',
   actionBtnTxt: 'I Accept',
   actionBtnColor: 'success',
   listSize: 'h-5/6',
@@ -37,7 +38,6 @@ function FilePickerReducer(state, action) {
     case Status.EMPTY:
       return {
         mode: Status.EMPTY,
-        footerBorder: 'border-t',
         actionBtnTxt: 'Add Image',
         actionBtnColor: 'blue',
         listSize: 'h-5/6',
@@ -49,17 +49,24 @@ function FilePickerReducer(state, action) {
     case Status.LOADED:
       return {
         mode: Status.LOADED,
-        footerBorder: '',
         actionBtnTxt: 'I Accept',
         actionBtnColor: 'success',
-        listSize: 'h-2/3',
+        listSize: 'h-[68.666667%]',
+        listBorder: 'border',
+        searchDisabled: false,
+      }
+    case Status.LOADED_NO_DRAG:
+      return {
+        mode: Status.LOADED_NO_DRAG,
+        actionBtnTxt: 'I Accept',
+        actionBtnColor: 'success',
+        listSize: 'h-[87.666667%]',
         listBorder: 'border',
         searchDisabled: false,
       }
     case Status.SEARCH_RESULTS:
       return {
         mode: Status.SEARCH_RESULTS,
-        footerBorder: '',
         actionBtnTxt: 'I Accept',
         actionBtnColor: 'success',
         listSize: 'h-5/6',
@@ -69,7 +76,6 @@ function FilePickerReducer(state, action) {
     case Status.SEARCH_EMPTY:
       return {
         mode: Status.SEARCH_EMPTY,
-        footerBorder: 'border-t',
         actionBtnTxt: 'I Accept',
         actionBtnColor: 'success',
         listSize: 'h-5/6',
@@ -88,7 +94,7 @@ function FilePickerReducer(state, action) {
  * be handled by the parent/calling component
  */
 
-export function FilePicker({ appUrl, uri, show, onClose, callback }) {
+export function FilePicker({ appUrl, uri, show, hideDrag = false, onClose, callback }) {
   const searchFieldRef = useRef()
   const [state, dispatch] = useReducer(FilePickerReducer, { mode: Status.LOADING, footerBorder: 'border-t' })
   const [totalPages, setTotalPages] = useState(0)
@@ -157,7 +163,8 @@ export function FilePicker({ appUrl, uri, show, onClose, callback }) {
       if (search?.length > 0) {
         dispatch({ type: data.Items.Data.length > 0 ? Status.SEARCH_RESULTS : Status.SEARCH_EMPTY })
       } else {
-        dispatch({ type: data.Items.Data.length > 0 ? Status.LOADED : Status.EMPTY })
+        const loadedState = hideDrag ? Status.LOADED_NO_DRAG : Status.LOADED
+        dispatch({ type: data.Items.Data.length > 0 ? loadedState : Status.EMPTY })
       }
 
       setUploadedImage('none')
@@ -170,12 +177,14 @@ export function FilePicker({ appUrl, uri, show, onClose, callback }) {
   }
 
   const handleDragEnter = (e) => {
+    if (hidedrag) return
     setDragging(true)
     searchFieldRef.current.removeFocus()
     e.preventDefault()
   }
 
   const handleDragLeave = (e) => {
+    if (hidedrag) return
     setDragging(false)
   }
 
@@ -265,7 +274,7 @@ export function FilePicker({ appUrl, uri, show, onClose, callback }) {
     if (!err) return state.listSize
 
     if (state.mode === Status.LOADED) return 'h-2/4'
-    if (state.mode === Status.SEARCH_RESULTS) {
+    if (state.mode === Status.SEARCH_RESULTS || state.mode === Status.LOADED_NO_DRAG) {
       return 'h-2/3'
     } else {
       return state.listSize
@@ -280,9 +289,10 @@ export function FilePicker({ appUrl, uri, show, onClose, callback }) {
         return <LoadingPlaceholder />
       case Status.SEARCH_RESULTS:
       case Status.LOADED:
+      case Status.LOADED_NO_DRAG:
         return (
           <Listing
-            border={calculateListSize()}
+            border={state.listSize}
             files={files}
             isMore={currentPageRef.current < listAttributeRef.current.pages}
             selected={selected?.Name}
@@ -313,7 +323,7 @@ export function FilePicker({ appUrl, uri, show, onClose, callback }) {
             <p>There was an error uploading the file. Please try again.</p>
           </AlertBanner>
         )}
-        {state.mode !== Status.SEARCH_RESULTS && state.mode !== Status.SEARCH_EMPTY && (
+        {state.mode !== Status.SEARCH_RESULTS && state.mode !== Status.SEARCH_EMPTY && !hideDrag && (
           <div className="h-68">
             <DragAndDrop uploaded={uploadedImage} callback={handleFileUpload} errorCallback={handleDropError} />
           </div>
@@ -336,13 +346,10 @@ export function FilePicker({ appUrl, uri, show, onClose, callback }) {
   return (
     <Drawer show={show} onClose={handleClose} title="File Picker" onHide={() => {}}>
       <div className="h-full" onDragEnter={handleDragEnter}>
-        {show && dragging && renderOversizedDropZone()}
+        {show && dragging && !hidedrag && renderOversizedDropZone()}
         {show && renderContent()}
       </div>
-      <div
-        className={`grid grid-cols-2 grid-flow-col gap-4 bottom-0 mt-0 pt-2 ${state.footerBorder} bg-white border-gray-200 dark:border-gray-600`}
-        style={{ marginTop: '-50px' }}
-      >
+      <div className={`grid grid-cols-2 grid-flow-col gap-4 bottom-0 mt-0 pt-2 bg-white  dark:border-gray-600`} style={{ marginTop: '-50px' }}>
         <Button color="light" onClick={handleClose}>
           Close
         </Button>
@@ -354,7 +361,6 @@ export function FilePicker({ appUrl, uri, show, onClose, callback }) {
   )
 }
 
-
 FilePicker.propTypes = {
   /** The url of the app */
   appUrl: PropTypes.string.isRequired,
@@ -362,6 +368,8 @@ FilePicker.propTypes = {
   uri: PropTypes.string.isRequired,
   /** Show the drawer */
   show: PropTypes.bool.isRequired,
+  /** Hides the the drag and drop and assosiated functionality */
+  hideDrag: PropTypes.bool,
   /** Callback to close the drawer */
   onClose: PropTypes.func.isRequired,
   /** Callback to return the selected image */

package/src/index.tsx

@@ -47,5 +47,6 @@ export { TextInput } from "./textinput";
 export { FilePicker } from "./file-picker/file-picker";
 export { ToggleSwitch } from "./toggleswitch";
 export { Card } from "./card";
+export { ProgressBar } from "./progress-bar";
 
 import "./styles.css";

package/src/progress-bar.tsx

@@ -0,0 +1,37 @@
+//@ts-nocheck
+import PropTypes from 'prop-types'
+
+const colors = Object.freeze({
+  primary: 'bg-blue-600 dark:bg-blue-500',
+  secondary: 'bg-gray-600 dark:bg-gray-500',
+  success: 'bg-green-600 dark:bg-green-500',
+  danger: 'bg-red-600 dark:bg-red-500',
+  warning: 'bg-yellow-600 dark:bg-yellow-500',
+  info: 'bg-blue-600 dark:bg-blue-500',
+  light: 'bg-gray-100 dark:bg-gray-900',
+  dark: 'bg-gray-800 dark:bg-gray-200',
+})
+
+const sizes = Object.freeze({
+  sm: 'h-1.5 mb-4',
+  md: 'h-2.5 mb-4',
+  lg: 'h-4 mb-4',
+  xl: 'h-6',
+})
+
+export function ProgressBar({ progress, size = 'md', color='primary'}) {
+  return (
+    <div className={`w-full bg-gray-200 rounded-full ${sizes[size]} mb-4 dark:bg-gray-700`}>
+      <div className={`${sizes[size]} rounded-full ${colors[color]}`} style={{ width: `${progress}%` }}></div>
+    </div>
+  )
+}
+
+ProgressBar.propTypes = {
+  /** Current progress to be shown (defaults to 0) */
+    progress: PropTypes.number.isRequired,
+   /** Size of the progress bar (defaults to md) */
+    size: PropTypes.oneOf(['sm', 'md', 'lg', 'xl']),
+    /** Color of the progress bar (defaults to primary) */
+  color: PropTypes.oneOf(['primary', 'secondary', 'success', 'danger', 'warning', 'info', 'light', 'dark']),
+}

package/src/table-header/table-header.tsx

@@ -1,137 +1,151 @@
 //@ts-nocheck
-import React, { useState, useEffect, useRef, useCallback } from 'react'
-import PropTypes from 'prop-types'
-import { Checkbox, Label, Tooltip } from 'flowbite-react'
-import _, { isEqual } from 'lodash'
-import { HiOutlineChevronUp, HiOutlineChevronDown, HiExclamationCircle } from 'react-icons/hi'
+import React, { useState, useEffect, useRef, useCallback } from "react";
+import PropTypes from "prop-types";
+import { Checkbox, Label, Tooltip } from "flowbite-react";
+import _, { isEqual } from "lodash";
+import {
+  HiOutlineChevronUp,
+  HiOutlineChevronDown,
+  HiExclamationCircle,
+} from "react-icons/hi";
 
 function useDebounceEffect(effect, delay, deps) {
-  const renderRef = useRef(0)
-  const handlerRef = useRef(null)
-  const callback = useCallback(effect, deps)
+  const renderRef = useRef(0);
+  const handlerRef = useRef(null);
+  const callback = useCallback(effect, deps);
 
   useEffect(() => {
     if (renderRef.current !== 1) {
-      renderRef.current += 1 // Ignore running on first render
+      renderRef.current += 1; // Ignore running on first render
     } else {
       handlerRef.current = setTimeout(() => {
-        callback()
-      }, delay)
+        callback();
+      }, delay);
     }
     return () => {
-      clearTimeout(handlerRef.current)
-    }
-  }, [callback, delay])
+      clearTimeout(handlerRef.current);
+    };
+  }, [callback, delay]);
 }
 // This is used to perform deep object comparisson instead
 // of using the useEffect method.
 function useDeepEffect(effectFunc, deps) {
-  const isFirst = useRef(true)
-  const prevDeps = useRef(deps)
+  const isFirst = useRef(true);
+  const prevDeps = useRef(deps);
 
   useEffect(() => {
-    const isSame = prevDeps.current.every((obj, index) => isEqual(obj, deps[index]))
-    if (isFirst.current || !isSame) effectFunc()
-    isFirst.current = false
-    prevDeps.current = deps
-  }, deps)
+    const isSame = prevDeps.current.every((obj, index) =>
+      isEqual(obj, deps[index])
+    );
+    if (isFirst.current || !isSame) effectFunc();
+    isFirst.current = false;
+    prevDeps.current = deps;
+  }, deps);
 }
 
 // This is used to represent a single header and should be
 // used only with the Table header.
 function TableHeaderItem({ ...props }) {
-  const HeaderSortModes = { ASC: 'ASC', DSC: 'DSC', OFF: 'OFF' }
-  const [sort, setSort] = useState(HeaderSortModes.OFF)
-  const [hitCount, setHitCount] = useState(0) // required for debounce
+  const HeaderSortModes = { ASC: "ASC", DSC: "DSC", OFF: "OFF" };
+  const [sort, setSort] = useState(HeaderSortModes.OFF);
+  const [hitCount, setHitCount] = useState(0); // required for debounce
 
-  const { title, layout, sortable, override, callback, tooltip } = props
+  const { title, layout, sortable, override, callback, tooltip } = props;
 
   const cycleSortMode = () => {
-    if (!sortable) return
-    let newSort = sort
+    if (!sortable) return;
+    let newSort = sort;
     switch (sort) {
       case HeaderSortModes.OFF:
-        newSort = HeaderSortModes.DSC
-        break
+        newSort = HeaderSortModes.DSC;
+        break;
       case HeaderSortModes.ASC:
-        newSort = HeaderSortModes.OFF
-        break
+        newSort = HeaderSortModes.OFF;
+        break;
       case HeaderSortModes.DSC:
-        newSort = HeaderSortModes.ASC
-        break
+        newSort = HeaderSortModes.ASC;
+        break;
       default:
-        break
+        break;
     }
     // Only update if mode changes.
     if (newSort !== sort) {
-      setSort(newSort)
-      callback({ title, sort: newSort })
+      setSort(newSort);
+      callback({ title, sort: newSort });
     }
-  }
+  };
 
   useDebounceEffect(
     () => {
       // Prevents triggering on first render
-      if (hitCount > 0) cycleSortMode()
+      if (hitCount > 0) cycleSortMode();
     },
     500,
-    [hitCount],
-  )
+    [hitCount]
+  );
 
   // This is used to force a sort state on the header via props.
   useDeepEffect(() => {
-    if (override == null) return
+    if (override == null) return;
 
     if (title !== override.title) {
       if (sort !== HeaderSortModes.OFF) {
-        setSort(HeaderSortModes.OFF)
+        setSort(HeaderSortModes.OFF);
       }
-      return
+      return;
     }
     if (title === override.title && sort !== override.sort) {
-      if (Object.values(HeaderSortModes).indexOf(override.sort) === -1) return
-      let newSort = override.sort
+      if (Object.values(HeaderSortModes).indexOf(override.sort) === -1) return;
+      let newSort = override.sort;
       switch (override.sort) {
         case HeaderSortModes.OFF:
-          newSort = HeaderSortModes.OFF
-          break
+          newSort = HeaderSortModes.OFF;
+          break;
         case HeaderSortModes.ASC:
-          newSort = HeaderSortModes.ASC
-          break
+          newSort = HeaderSortModes.ASC;
+          break;
         case HeaderSortModes.DSC:
-          newSort = HeaderSortModes.DSC
-          break
+          newSort = HeaderSortModes.DSC;
+          break;
         default:
-          break
+          break;
       }
       // Only update if mode changes.
       if (newSort !== sort) {
-        setSort(newSort)
+        setSort(newSort);
       }
     }
-  }, [override])
+  }, [override]);
 
   const renderCheveron = () => {
     return sort === HeaderSortModes.ASC ? (
       <HiOutlineChevronUp className="float-right ml-2 " fontSize="20px" />
     ) : (
       <HiOutlineChevronDown className="float-right ml-2 " fontSize="20px" />
-    )
-  }
+    );
+  };
 
   return (
-    <div className={`${layout} ${sortable ? 'cursor-pointer' : ''} ${tooltip != null ? ' d-flex align-items-center float-left' : ''} `}>
+    <div
+      className={`${layout} ${sortable ? "cursor-pointer" : ""} ${
+        tooltip != null ? " d-flex align-items-center float-left" : ""
+      } `}
+    >
       <span onClick={() => setHitCount(hitCount + 1)}>{title}</span>
       {sortable && sort !== HeaderSortModes.OFF && renderCheveron()}
       {tooltip != null && (
         <div className="float-right ml-2">
-          <Tooltip key={`tooltipName-${title}`} placement="bottom" content={tooltip}>
+          <Tooltip
+            key={`tooltipName-${title}`}
+            placement="bottom"
+            content={tooltip}
+          >
             <HiExclamationCircle fontSize="20px" color="#555555" />
           </Tooltip>
         </div>
       )}
     </div>
-  )
+  );
 }
 
 TableHeaderItem.propTypes = {
@@ -144,61 +158,73 @@ TableHeaderItem.propTypes = {
   }),
   callback: PropTypes.func,
   tooltip: PropTypes.string,
-}
+};
 
 TableHeaderItem.defaultProps = {
-  layout: 'col-2 font-weight-bold',
+  layout: "col-2 font-weight-bold",
   sortable: false,
   override: null,
   tooltip: null,
-}
+};
 
 export function TableHeader({
   config,
   callback,
   forceCheckedState = false,
   checkboxCallback,
-  layout = 'form-row tableHeader--custom align-items-center d-none d-lg-flex',
+  layout = "form-row tableHeader--custom align-items-center d-none d-lg-flex",
   forceSort,
   selected = 0,
   actions,
 }) {
-  const HeaderSortModes = { ASC: 'ASC', DSC: 'DSC', OFF: 'OFF' }
-  const [changeSortTo, setChangeSortTo] = useState(null)
-  const [checked, setChecked] = useState(forceCheckedState)
+  const HeaderSortModes = { ASC: "ASC", DSC: "DSC", OFF: "OFF" };
+  const [changeSortTo, setChangeSortTo] = useState(null);
+  const [checked, setChecked] = useState(forceCheckedState);
 
   const handleHeaderSort = (sortBy) => {
-    setChangeSortTo(sortBy)
-    callback(sortBy)
-  }
+    setChangeSortTo(sortBy);
+    callback(sortBy);
+  };
 
   const handleHeaderCheckbox = () => {
-    let status = !checked
-    setChecked(status)
-    checkboxCallback(status)
-  }
+    let status = !checked;
+    setChecked(status);
+    checkboxCallback(status);
+  };
 
   useDeepEffect(() => {
-    if (forceSort == null) return
-    if (forceSort.title == null || forceSort.sort == null) return
+    if (forceSort == null) return;
+    if (forceSort.title == null || forceSort.sort == null) return;
 
     if (Object.values(HeaderSortModes).indexOf(forceSort.sort) !== -1) {
-      setChangeSortTo({ title: forceSort.title, sort: forceSort.sort })
+      setChangeSortTo({ title: forceSort.title, sort: forceSort.sort });
     }
-  }, [forceSort])
+  }, [forceSort]);
 
   useEffect(() => {
-    setChecked(forceCheckedState)
-  }, [forceCheckedState])
+    setChecked(forceCheckedState);
+  }, [forceCheckedState]);
 
   return (
     <div className={layout}>
       {config.checkbox && (
-        <div className="col-1 font-weight-bold">
-          <Checkbox id="checkAll" className="custom-control-input " checked={checked} onChange={() => {}} />
+        <div className={`col-1 font-weight-bold ${config.checkboxLayout}`}>
+          <Checkbox
+            id="checkAll"
+            className="custom-control-input "
+            checked={checked}
+            onChange={() => {}}
+          />
           <div className="-mt-1.5">
-            <Label className="-mt-1.5" htmlFor="checkAll" style={{ fontSize: '14px', fontWeight: '700 !important' }} onClick={handleHeaderCheckbox}>
-              {!config.hideSelectedNum && (checked || selected > 0) ? `${selected} Selected` : ''}
+            <Label
+              className="-mt-1.5"
+              htmlFor="checkAll"
+              style={{ fontSize: "14px", fontWeight: "700 !important" }}
+              onClick={handleHeaderCheckbox}
+            >
+              {!config.hideSelectedNum && (checked || selected > 0)
+                ? `${selected} Selected`
+                : ""}
             </Label>
           </div>
         </div>
@@ -217,10 +243,10 @@ export function TableHeader({
                 callback={handleHeaderSort}
                 tooltip={val.tooltip}
               />
-            )
+            );
           })}
     </div>
-  )
+  );
 }
 
 TableHeader.propTypes = {
@@ -234,7 +260,7 @@ TableHeader.propTypes = {
         layout: PropTypes.string,
         sortable: PropTypes.bool,
         tooltip: PropTypes.string,
-      }),
+      })
     ).isRequired,
   }).isRequired,
   /** Optional setting the checkbox*/
@@ -258,4 +284,4 @@ TableHeader.propTypes = {
   callback: PropTypes.func.isRequired,
   /** Optional return call triggered when the optional header checkbox is clicked */
   checkboxCallback: PropTypes.func,
-}
+};