ekm-ui 0.3.43 → 0.3.46

package/src/search/search.tsx

@@ -1,110 +1,143 @@
 //@ts-nocheck
-import { useState, useRef, useCallback, useEffect, forwardRef, useImperativeHandle } from 'react'
-import PropTypes from 'prop-types'
+import {
+  useState,
+  useRef,
+  useCallback,
+  useEffect,
+  forwardRef,
+  useImperativeHandle,
+} from "react";
+import PropTypes from "prop-types";
 
 function useDebounceEffect(effect, delay, deps) {
-  const instanceRef = useRef(0)
-  const handlerRef = useRef(null)
-  const callback = useCallback(effect, deps)
+  const instanceRef = useRef(0);
+  const handlerRef = useRef(null);
+  const callback = useCallback(effect, deps);
 
   useEffect(() => {
     if (instanceRef.current === 0) {
-      instanceRef.current = 1
+      instanceRef.current = 1;
     } else {
       handlerRef.current = setTimeout(() => {
-        callback()
-      }, delay)
+        callback();
+      }, delay);
     }
     return () => {
-      clearTimeout(handlerRef.current)
-    }
-  }, [callback, delay])
+      clearTimeout(handlerRef.current);
+    };
+  }, [callback, delay]);
 }
 
 export const Search = forwardRef(function Search(
-  { id, categories = [], delay = 1500, placeholder = 'Enter a keyword to search...', callback, disabled = false, initialValue = '' },
-  reference,
+  {
+    id,
+    categories = [],
+    delay = 1500,
+    placeholder = "Enter a keyword to search...",
+    callback,
+    disabled = false,
+    initialValue = "",
+  },
+  reference
 ) {
   // Create state based on config
   const [state, setState] = useState({
     text: null,
     category: categories?.length > 0 ? categories[0] : null,
-  })
-  const [currentSearchValue, setCurrentSearchValue] = useState(initialValue)
-  const [hidden, setHidden] = useState(true)
+  });
+  const [currentSearchValue, setCurrentSearchValue] = useState(initialValue);
+  const [hidden, setHidden] = useState(true);
 
   useImperativeHandle(reference, () => ({
     clear: () => {
-      setCurrentSearchValue('')
-      setState({ ...state, text: '' })
+      setCurrentSearchValue("");
+      setState({ ...state, text: "" });
     },
     removeFocus: () => {
-      document.getElementById(`${id}-search-input`).blur()
+      document.getElementById(`${id}-search-input`).blur();
     },
-  }))
+  }));
 
   const handleSearchChange = (e) => {
-    setCurrentSearchValue(e.target.value)
-    setState({ ...state, text: e.target.value })
-  }
+    setCurrentSearchValue(e.target.value);
+    setState({ ...state, text: e.target.value });
+  };
 
   const handleTypeChange = (e, selection) => {
-    e.preventDefault()
-    setState({ ...state, category: selection })
-    setHidden(true)
-  }
+    e.preventDefault();
+    setState({ ...state, category: selection });
+    setHidden(true);
+  };
 
   const handleKeyDown = (e) => {
     if ((e.charCode || e.keyCode) === 13) {
-      e.preventDefault()
+      e.preventDefault();
     }
-  }
+  };
 
   useDebounceEffect(
     () => {
-      callback(state)
+      callback(state);
     },
     delay,
-    [state.text, state.category],
-  )
+    [state.text, state.category]
+  );
   useEffect(() => {
-    if (initialValue !== currentSearchValue) setCurrentSearchValue(initialValue)
-  }, [initialValue])
+    if (initialValue !== currentSearchValue)
+      setCurrentSearchValue(initialValue);
+  }, [initialValue]);
 
-  const ref = useRef(null)
+  const ref = useRef(null);
   useEffect(() => {
     const handleClickOutside = (e) => {
       if (ref.current && !ref.current.contains(e.target)) {
-        setHidden(true)
+        setHidden(true);
       }
-    }
+    };
 
-    document.addEventListener('click', handleClickOutside, true)
+    document.addEventListener("click", handleClickOutside, true);
     return () => {
-      document.removeEventListener('click', handleClickOutside, true)
-    }
-  }, [])
+      document.removeEventListener("click", handleClickOutside, true);
+    };
+  }, []);
 
   const renderDropdown = () => (
     <>
       <button
         id={`${id}-dropdown-button`}
         data-dropdown-toggle="dropdown"
-        className="absolute top-0 right-0 p-2.5 flex-shrink-0 z-10 inline-flex items-center py-2.5 px-4 text-sm font-medium text-center text-gray-900 bg-white border border-gray-300 dark:border-gray-700 dark:text-white rounded-r-lg hover:bg-gray-200 focus:ring-4 focus:outline-none focus:ring-gray-300 dark:bg-gray-600 dark:hover:bg-gray-700 dark:focus:ring-gray-800"
+        className="absolute right-0 top-0 z-10 inline-flex flex-shrink-0 items-center rounded-r-lg border border-gray-300 bg-white p-2.5 px-4 py-2.5 text-center text-sm font-medium text-gray-900 hover:bg-gray-200 focus:outline-none focus:ring-4 focus:ring-gray-300 dark:border-gray-700 dark:bg-gray-600 dark:text-white dark:hover:bg-gray-700 dark:focus:ring-gray-800"
         type="button"
         onClick={() => setHidden(!hidden)}
       >
         {state.category.display}
-        <svg className="w-2.5 h-2.5 ml-2.5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 10 6">
-          <path stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="m1 1 4 4 4-4" />
+        <svg
+          className="ml-2.5 h-2.5 w-2.5"
+          aria-hidden="true"
+          xmlns="http://www.w3.org/2000/svg"
+          fill="none"
+          viewBox="0 0 10 6"
+        >
+          <path
+            stroke="currentColor"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            strokeWidth="2"
+            d="m1 1 4 4 4-4"
+          />
         </svg>
       </button>
       <div
         id={`${id}-dropdown`}
         ref={ref}
-        className={`z-10 ${hidden ? 'hidden' : ''} absolute right-0 bg-white divide-y divide-gray-100 rounded-r-lg shadow w-44 dark:bg-gray-700`}
+        className={`z-10 ${
+          hidden ? "hidden" : ""
+        } absolute right-0 w-44 divide-y divide-gray-100 rounded-r-lg bg-white shadow dark:bg-gray-700`}
       >
-        <ul className="py-2 text-sm text-gray-700 dark:text-gray-200" aria-labelledby="dropdown-button">
+        <ul
+          className="py-2 text-sm text-gray-700 dark:text-gray-200"
+          aria-labelledby="dropdown-button"
+        >
           {(categories || []).map((x) => {
             return (
               <li key={`gst-${x.display}`}>
@@ -116,12 +149,12 @@ export const Search = forwardRef(function Search(
                   {x.display}
                 </a>
               </li>
-            )
+            );
           })}
         </ul>
       </div>
     </>
-  )
+  );
 
   return (
     <div className="flex">
@@ -136,13 +169,13 @@ export const Search = forwardRef(function Search(
           onKeyDown={handleKeyDown}
           disabled={disabled}
           id={`${id}-search-input`}
-          className="block p-2.5 w-full text-sm text-gray-900 rounded-lg bg-gray-50  border-r-gray-300  border-r-2 border border-gray-300 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:border-blue-500"
+          className="block w-full rounded-lg border border-r-2 border-gray-300 border-r-gray-300  bg-gray-50  p-2.5 text-sm text-gray-900 focus:border-blue-500 focus:ring-blue-500 dark:border-gray-600 dark:bg-gray-700 dark:text-white dark:placeholder-gray-400 dark:focus:border-blue-500"
         />
         {categories?.length > 0 && renderDropdown()}
       </div>
     </div>
-  )
-})
+  );
+});
 
 Search.propTypes = {
   /** Optional List of categories that the search term can be applied to. If supplied
@@ -157,8 +190,9 @@ Search.propTypes = {
       /**
        * The value set when the item is selected.
        */
-      value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
-    }),
+      value: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
+        .isRequired,
+    })
   ),
   /**
    * The delay between requests made to the server when typing in milliseconds.
@@ -182,4 +216,6 @@ Search.propTypes = {
    * If not set, the search bar will just be empty.
    */
   initialValue: PropTypes.string,
-}
+};
+
+Search.displayName = "Search";

package/src/select.tsx

@@ -1,7 +1,7 @@
 //@ts-nocheck
-
 import { forwardRef } from "react";
 import PropTypes from "prop-types";
+
 export const Select = forwardRef(function Select(props, ref) {
   return (
     <>
@@ -57,4 +57,4 @@ Select.propTypes = {
   onChange: PropTypes.func.isRequired,
 };
 
-
+Select.displayName = "Select";

package/src/sort/sort.tsx

@@ -79,3 +79,5 @@ Sort.propTypes = {
   /** Returns{ display, value, name, sort, count} */
   callback: PropTypes.func.isRequired,
 }
+
+Sort.displayName = "Sort"

package/src/stacked-list-item.tsx

@@ -76,3 +76,5 @@ export function StackedListItem({
     </li>
   );
 }
+
+StackedListItem.displayName = "StackedListItem"

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

@@ -285,3 +285,5 @@ TableHeader.propTypes = {
   /** Optional return call triggered when the optional header checkbox is clicked */
   checkboxCallback: PropTypes.func,
 };
+
+TableHeader.displayName = "TableHeader";

package/src/text-row.tsx

@@ -22,3 +22,5 @@ export function TextRow({ children, title, text, border, className }: Props) {
     </div>
   );
 }
+
+TextRow.displayName = "TextRow"

package/src/toast/index.tsx

@@ -61,6 +61,8 @@ export function ToastProvider({ children }: { children: React.ReactNode }) {
   );
 }
 
+ToastProvider.displayName = "ToastProvider"
+
 type ToastEvent = {
   type: "success" | "error" | "warning" | "info";
   text: string;