ekm-ui 0.3.74 → 0.3.78

package/src/dropdown.tsx

@@ -1,117 +1,128 @@
 //@ts-nocheck
-import { variantProps } from 'classname-variants/react'
-import { useState, createContext, useContext, useEffect, useRef } from 'react'
-import { BiChevronDown } from 'react-icons/bi'
-import PropTypes from 'prop-types'
-const DropdownContext = createContext()
+import { variantProps } from "classname-variants/react";
+import PropTypes from "prop-types";
+import { createContext, useContext, useEffect, useState } from "react";
+import { BiChevronDown } from "react-icons/bi";
+const DropdownContext = createContext();
 
 // BUTTON CLASSES
 const buttonProps = variantProps({
-  base: 'focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium text-sm py-2.5 text-center inline-flex items-center dark:text-white',
+  base: 'focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium text-sm py-2.5 text-center inline-flex items-center dark:text-white w-full md:w-auto',
   variants: {
     color: {
-      blue: 'text-white bg-blue-700 hover:bg-blue-800 dark:bg-blue-600 dark:hover:bg-blue-700 focus:ring-blue-300',
-      gray: 'text-white bg-gray-400 hover:bg-gray-600 dark:bg-gray-600 dark:hover:bg-gray-700 focus:ring-gray-300',
+      blue: "text-white bg-blue-700 hover:bg-blue-800 dark:bg-blue-600 dark:hover:bg-blue-700 focus:ring-blue-300",
+      gray: "text-white bg-gray-400 hover:bg-gray-600 dark:bg-gray-600 dark:hover:bg-gray-700 focus:ring-gray-300",
       lightGray:
-        'text-slate-700 bg-white focus:ring-slate-300 border border-gray-300 dark:bg-gray-700 dark:border-gray-600 focus:ring-blue-300',
-      green: 'text-white bg-green-700 hover:bg-green-800 dark:bg-green-600 dark:hover:bg-green-700 focus:ring-green-300',
-      red: 'text-white bg-red-700 hover:bg-red-800 dark:bg-red-600 dark:hover:bg-red-700 focus:ring-red-300',
-      yellow: 'text-white bg-yellow-700 hover:bg-yellow-800 dark:bg-yellow-600 dark:hover:bg-yellow-700 focus:ring-yellow-300',
+        "text-slate-700 bg-white focus:ring-slate-300 border border-gray-300 dark:bg-gray-700 dark:border-gray-600 focus:ring-blue-300",
+      green:
+        "text-white bg-green-700 hover:bg-green-800 dark:bg-green-600 dark:hover:bg-green-700 focus:ring-green-300",
+      red: "text-white bg-red-700 hover:bg-red-800 dark:bg-red-600 dark:hover:bg-red-700 focus:ring-red-300",
+      yellow:
+        "text-white bg-yellow-700 hover:bg-yellow-800 dark:bg-yellow-600 dark:hover:bg-yellow-700 focus:ring-yellow-300",
     },
     size: {
-      sm: 'px-5 py-1.5',
-      md: 'px-5 py-2.5',
-      lg: 'px-5 py-3.5',
+      sm: "px-5 py-1.5",
+      md: "px-5 py-2.5",
+      lg: "px-5 py-3.5",
       // WORKAROUND: Compound variants don't work with classname-variants/react (revisit later)
-      rsm: 'px-2.5 py-2.5',
-      rmd: 'px-3.5 py-3.5',
-      rlg: 'px-4.5 py-4.5',
+      rsm: "px-2.5 py-2.5",
+      rmd: "px-3.5 py-3.5",
+      rlg: "px-4.5 py-4.5",
     },
     type: {
-      rect: 'rounded-lg',
-      round: 'rounded-full',
+      rect: "rounded-lg",
+      round: "rounded-full",
     },
     defaultVariants: {
-      color: 'blue',
-      size: 'md',
-      type: 'rect',
+      color: "blue",
+      size: "md",
+      type: "rect",
     },
   },
-})
-
-const DropdownState = Object.freeze({
-  OPEN: 'open',
-  CLOSED: 'closed',
-})
+});
 
 export function Dropdown({ id, label, type, color, size, children }) {
-  const [showDropdown, setShowDropdown] = useState(DropdownState.CLOSED)
-  const handleShowDropdown = () => {
-    const currState = showDropdown
-    setShowDropdown(currState === DropdownState.CLOSED ? DropdownState.OPEN : DropdownState.CLOSED)
-  }
-
+  const [showDropdown, setShowDropdown] = useState(false)
+  
   useEffect(() => {
+    
     const handleClickOutside = (e) => {
-      if (e.target.id === id) return
-      setShowDropdown(DropdownState.CLOSED)
+      if (e.target.id === id || e.target.id === `${id}-span` || e.target.id === `${id}-chevron`) return
+      setShowDropdown(false)
     }
 
-    document.addEventListener('click', handleClickOutside)
+    document.addEventListener("click", handleClickOutside);
 
     return () => {
-      document.removeEventListener('click', handleClickOutside)
-    }
-  }, [])
+      document.removeEventListener("click", handleClickOutside);
+    };
+  }, []);
+
+  const handleShowDropdown = () => {
+    setShowDropdown(prevState => !prevState)
+  }
+
 
   return (
     <div className="relative">
       <DropdownContext.Provider value={{ showDropdown, setShowDropdown }}>
-        <button id={id} {...buttonProps({ color, size, type })} data-dropdown-toggle={`${id}-dropdown`} type="button" onClick={handleShowDropdown}>
-          {label}
-          {type === 'rect' && <BiChevronDown className="pointer-events-none" />}
+        <button id={id} 
+          {...buttonProps({ color, size, type })} 
+          data-dropdown-toggle={`${id}-dropdown`} 
+          type="button"
+          onClick={() => handleShowDropdown(true)}
+        >
+          <span id={`${id}-span`}className='flex-auto' >{label}</span>
+          {type === 'rect' && <span id={`${id}-chevron`} className='items-right flex justify-end'><BiChevronDown className="pointer-events-none" /></span>}
         </button>
         <div
-          id={`${id}-dropdown`}
-          className={`z-50 mt-2 absolute ${
-            showDropdown === DropdownState.OPEN ? '' : 'hidden'
-          } bg-white divide-y divide-gray-100 rounded-lg shadow w-44 dark:bg-gray-700`}
+          id={`${showDropdown}${id}-dropdown`}
+          className={
+            `z-50 mt-2 absolute w-full md:w-44 bg-white divide-y divide-gray-100 rounded-lg shadow dark:bg-gray-700 ${
+              showDropdown ? '' : 'hidden'
+            }`}
         >
-          <ul className="py-2 text-sm text-gray-700 dark:text-gray-200" aria-labelledby="dropdownDefaultButton">
+          <ul
+            className="py-2 text-sm text-gray-700 dark:text-gray-200"
+            aria-labelledby="dropdownDefaultButton"
+          >
             {children}
           </ul>
         </div>
       </DropdownContext.Provider>
     </div>
-  )
+  );
 }
 
 export function DropdownDivider() {
   return (
     <li>
-      <hr className="h-px my-2 bg-gray-200 border-0 dark:bg-gray-700" />
+      <hr className="my-2 h-px border-0 bg-gray-200 dark:bg-gray-700" />
     </li>
-  )
+  );
 }
 
 export function DropdownItem({ callback, children }) {
-  const context = useContext(DropdownContext)
+  const context = useContext(DropdownContext);
 
   const handleSelection = () => {
-    context.setShowDropdown(false)
-    callback()
-  }
+    context.setShowDropdown(false);
+    callback();
+  };
   return (
     <li>
-      <div className="block px-4 py-2 cursor-pointer hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white" onClick={handleSelection}>
+      <div
+        className="block cursor-pointer px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white"
+        onClick={handleSelection}
+      >
         {children}
       </div>
     </li>
-  )
+  );
 }
 
-Dropdown.Divider = DropdownDivider
-Dropdown.Item = DropdownItem
+Dropdown.Divider = DropdownDivider;
+Dropdown.Item = DropdownItem;
 
 Dropdown.propTypes = {
   /** Unique id for the dropdown */
@@ -119,25 +130,32 @@ Dropdown.propTypes = {
   /** Components to be rendered as Part of the Compound Component*/
   children: PropTypes.node.isRequired,
   /** Shape of the button rectangle or round */
-  type: PropTypes.oneOf(['rect', 'round']),
+  type: PropTypes.oneOf(["rect", "round"]),
   /** Size of the button sm,md,lg used for rectangle and rsm, rmd, rlg used for a round button */
-  size: PropTypes.oneOf(['sm', 'md', 'lg', 'rsm', 'rmd', 'rlg']),
+  size: PropTypes.oneOf(["sm", "md", "lg", "rsm", "rmd", "rlg"]),
   /** Colour of the button based upon predefined values */
-  color: PropTypes.oneOf(['blue', 'gray', 'lightGray', 'green', 'red', 'yellow']),
+  color: PropTypes.oneOf([
+    "blue",
+    "gray",
+    "lightGray",
+    "green",
+    "red",
+    "yellow",
+  ]),
   /** Rectangle should have a text label eg:'Dropdown' and a round type should take an icon element eg:'...' */
   label: PropTypes.oneOfType([PropTypes.string, PropTypes.node]).isRequired,
-}
+};
 Dropdown.defaultProps = {
-  type: 'rect',
-  size: 'md',
-  color: 'blue',
-  label: 'Dropdown',
-}
+  type: "rect",
+  size: "md",
+  color: "blue",
+  label: "Dropdown",
+};
 DropdownItem.propTypes = {
   /** Returns value of the dropdown item selected*/
   callback: PropTypes.func.isRequired,
-}
+};
 
-Dropdown.displayName = 'Dropdown'
-DropdownDivider.displayName = 'Dropdown.Divider'
-DropdownItem.displayName = 'Dropdown.Item'
+Dropdown.displayName = "Dropdown";
+DropdownDivider.displayName = "Dropdown.Divider";
+DropdownItem.displayName = "Dropdown.Item";

package/src/featurePageComponents/feature-page-group.tsx

@@ -1,4 +1,3 @@
-import { Button } from "flowbite-react";
 import { Disclosure } from "@headlessui/react";
 
 type Props = {

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

@@ -1,72 +1,107 @@
 // @ts-nocheck
-import { useEffect, useRef } from 'react'
-import { Radio } from '../radio'
-import PropTypes from 'prop-types'
+import PropTypes from "prop-types";
+import { useEffect, useRef } from "react";
+import { Radio } from "../radio";
 
 // FOR USE WITH THE FILE PICKER COMPONENT - ONLY
 
-export default function Listing({ border, files, isMore, selected, page, pages, callback }) {
-  const scrollRef = useRef()
+export default function Listing({
+  border,
+  files,
+  isMore,
+  selected,
+  page,
+  pages,
+  callback,
+}) {
+  const scrollRef = useRef();
 
   useEffect(() => {
-    const element = document.querySelector('#img-file-list')
-    if (element && !element.hasAttribute('scroll')) scrollRef.current.addEventListener('scroll', handleScroll)
-    if (scrollRef.current != null) scrollRef.current.scrollTop = 0
+    const element = document.querySelector("#img-file-list");
+    if (element && !element.hasAttribute("scroll"))
+      scrollRef.current.addEventListener("scroll", handleScroll);
+    if (scrollRef.current != null) scrollRef.current.scrollTop = 0;
     return () => {
-      const element = document.querySelector('#img-file-list')
-      if (element && element.hasAttribute('scroll')) scrollRef.current.removeEventListener('scroll', handleScroll)
-    }
-  }, [])
+      const element = document.querySelector("#img-file-list");
+      if (element && element.hasAttribute("scroll"))
+        scrollRef.current.removeEventListener("scroll", handleScroll);
+    };
+  }, []);
 
   const handleScroll = () => {
-    if (!isMore) return
-    const offset = scrollRef.current.scrollHeight - scrollRef.current.offsetHeight
-    const scroll = Math.floor(scrollRef.current.scrollTop)
+    if (!isMore) return;
+    const offset =
+      scrollRef.current.scrollHeight - scrollRef.current.offsetHeight;
+    const scroll = Math.floor(scrollRef.current.scrollTop);
     // the '-2 & +2' is used as a buffer, otherwise '==' positioning of the scroll becomes too accurate.
     if (scroll == offset || scroll + 2 == offset || scroll - 2 == offset) {
-      callback({ type: 'FETCH_DATA', payload: true })
+      callback({ type: "FETCH_DATA", payload: true });
     }
-  }
+  };
 
   const handleImageSelection = (fileName) => {
-    callback({ type: 'SELECTION', payload: selected === fileName ? '' : fileName })
-  }
+    callback({
+      type: "SELECTION",
+      payload: selected === fileName ? "" : fileName,
+    });
+  };
 
   return (
-    <div id="img-file-list" ref={scrollRef} className={`${border} border rounded-md overflow-y-auto`}>
+    <div
+      id="img-file-list"
+      ref={scrollRef}
+      className={`${border} overflow-y-auto rounded-md border`}
+    >
       {(files || []).map((f) => {
-        return <FileRow key={`file-row-${f.Name}`} file={f} selected={selected === f.Name} callback={handleImageSelection} />
+        return (
+          <FileRow
+            key={`file-row-${f.Name}`}
+            file={f}
+            selected={selected === f.Name}
+            callback={handleImageSelection}
+          />
+        );
       })}
       {isMore && page < pages && <InfiniteLoader />}
     </div>
-  )
+  );
 }
 
 function FileRow({ file, selected = false, callback }) {
   return (
     <div
-      className={`flex items-center pt-4 pb-4 mt-1 mb-1 ${selected && 'bg-blue-50'} justify-between border-b border-gray-100 cursor-pointer`}
+      className={`mb-1 mt-1 flex items-center pb-4 pt-4 ${
+        selected && "bg-blue-50"
+      } cursor-pointer justify-between border-b border-gray-100`}
       onClick={() => {
-        callback(file)
+        callback(file);
       }}
     >
-      <div className="flex items-center ml-3">
+      <div className="ml-3 flex items-center">
         <div className="flex-shrink-0">
           <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="" />
+          <img
+            className="h-10 w-10 rounded-md"
+            src={`https://files.ekmcdn.com/${file.Uri}`}
+            alt=""
+          />
         </div>
         <div className="ml-4">
           <div className=" font-medium text-gray-900">{file.Name}</div>
-          {file.Size && <div className="text-xs text-gray-500">{file.Size}</div>}
+          {file.Size && (
+            <div className="text-xs text-gray-500">{file.Size}</div>
+          )}
         </div>
       </div>
       <div className="ml-4 flex-shrink-0">
-        <span className="text-sm mr-3 text-gray-500">{writeDate(file.LastWriteTime)}</span>
+        <span className="mr-3 text-sm text-gray-500">
+          {writeDate(file.LastWriteTime)}
+        </span>
       </div>
     </div>
-  )
+  );
 }
 
 Listing.propTypes = {
@@ -84,7 +119,7 @@ Listing.propTypes = {
   pages: PropTypes.number,
   /** Callback function to handle events */
   callback: PropTypes.func,
-}
+};
 
 FileRow.propTypes = {
   /** File object to display */
@@ -93,15 +128,15 @@ FileRow.propTypes = {
   selected: PropTypes.bool,
   /** Callback function to handle events */
   callback: PropTypes.func,
-}
+};
 
 function InfiniteLoader() {
   return (
-    <div className="flex justify-center pt-4 pb-4 mt-1 mb-1">
+    <div className="mb-1 mt-1 flex justify-center pb-4 pt-4">
       <div role="status">
         <svg
           aria-hidden="true"
-          className="inline-block w-8 h-8 text-gray-200 animate-spin dark:text-gray-600 fill-gray-600 dark:fill-gray-300"
+          className="inline-block h-8 w-8 animate-spin fill-gray-600 text-gray-200 dark:fill-gray-300 dark:text-gray-600"
           viewBox="0 0 100 101"
           fill="none"
           xmlns="http://www.w3.org/2000/svg"
@@ -117,15 +152,28 @@ function InfiniteLoader() {
         </svg>
       </div>
     </div>
-  )
+  );
 }
 
 function writeDate(date) {
   try {
-    const d = new Date(date)
-    const months = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December']
-    return d.getDate() + ' ' + months[d.getMonth()] + ' ' + d.getFullYear()
+    const d = new Date(date);
+    const months = [
+      "January",
+      "February",
+      "March",
+      "April",
+      "May",
+      "June",
+      "July",
+      "August",
+      "September",
+      "October",
+      "November",
+      "December",
+    ];
+    return d.getDate() + " " + months[d.getMonth()] + " " + d.getFullYear();
   } catch (err) {
-    return 'Unknown'
+    return "Unknown";
   }
 }