ekm-ui 0.3.74 → 0.3.78

package/src/date-range-picker.tsx

@@ -1,5 +1,5 @@
 //@ts-nocheck
-import { useState, useRef, useMemo, createContext } from 'react'
+import { useState, useRef, useMemo, useEffect, createContext } from 'react'
 //@ts-nocheck
 import { Select } from './select'
 import { Button } from './button'
@@ -13,120 +13,143 @@ const DropdownContext = createContext()
 
 // BUTTON CLASSES
 const buttonProps = variantProps({
-  base: 'pl-2 pr-2 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',
-      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',
+      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",
     },
     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',
-})
+});
 
 const dateRangeType = Object.freeze({
-  SELECT: { value: 0, display: 'Select Date Range' },
-  TODAY: { value: 2, display: 'Today' },
-  WEEK: { value: 3, display: 'Last Week' },
-  MONTH: { value: 4, display: 'Last Month' },
-  THREE_MONTH: { value: 5, display: 'Last 3 Months' },
-  YEAR: { value: 6, display: 'Last Year' },
-  CUSTOM: { value: 7, display: 'Custom Date Range' },
-})
+  SELECT: { value: 0, display: "Select Date Range" },
+  TODAY: { value: 2, display: "Today" },
+  WEEK: { value: 3, display: "Last Week" },
+  MONTH: { value: 4, display: "Last Month" },
+  THREE_MONTH: { value: 5, display: "Last 3 Months" },
+  YEAR: { value: 6, display: "Last Year" },
+  CUSTOM: { value: 7, display: "Custom Date Range" },
+});
 
 function getSelectOptions(currentValue) {
   const options = [
     { value: dateRangeType.TODAY.value, display: dateRangeType.TODAY.display },
     { value: dateRangeType.WEEK.value, display: dateRangeType.WEEK.display },
     { value: dateRangeType.MONTH.value, display: dateRangeType.MONTH.display },
-    { value: dateRangeType.THREE_MONTH.value, display: dateRangeType.THREE_MONTH.display },
+    {
+      value: dateRangeType.THREE_MONTH.value,
+      display: dateRangeType.THREE_MONTH.display,
+    },
     { value: dateRangeType.YEAR.value, display: dateRangeType.YEAR.display },
-    { value: dateRangeType.CUSTOM.value, display: dateRangeType.CUSTOM.display },
-  ]
+    {
+      value: dateRangeType.CUSTOM.value,
+      display: dateRangeType.CUSTOM.display,
+    },
+  ];
 
-  if (currentValue === dateRangeType.SELECT.value) options.unshift({ value: dateRangeType.SELECT.value, display: dateRangeType.SELECT.display })
-  return options
+  if (currentValue === dateRangeType.SELECT.value)
+    options.unshift({
+      value: dateRangeType.SELECT.value,
+      display: dateRangeType.SELECT.display,
+    });
+  return options;
 }
 
 function dateRangeCalculation(dateType) {
-  var d = new Date()
-  let obj = { From: null, To: null }
+  var d = new Date();
+  let obj = { From: null, To: null };
   switch (dateType) {
     case dateRangeType.TODAY.value:
-      obj.From = new Date()
-      break
+      obj.From = new Date();
+      break;
     case dateRangeType.WEEK.value:
-      d.setDate(d.getDate() - 7)
-      obj.From = d
-      break
+      d.setDate(d.getDate() - 7);
+      obj.From = d;
+      break;
     case dateRangeType.MONTH.value:
-      d.setMonth(d.getMonth() - 1)
-      obj.From = d
-      break
+      d.setMonth(d.getMonth() - 1);
+      obj.From = d;
+      break;
     case dateRangeType.THREE_MONTH.value:
-      d.setMonth(d.getMonth() - 3)
-      obj.From = d
-      break
+      d.setMonth(d.getMonth() - 3);
+      obj.From = d;
+      break;
     case dateRangeType.YEAR.value:
-      d.setFullYear(d.getFullYear() - 1)
-      obj.From = d
-      break
+      d.setFullYear(d.getFullYear() - 1);
+      obj.From = d;
+      break;
 
     default:
-      break
+      break;
   }
 
-  if (!obj) return
+  if (!obj) return;
 
-  obj.From = obj.From
-  obj.To = new Date()
+  obj.From = obj.From;
+  obj.To = new Date();
 
-  return obj
+  return obj;
 }
 
 export function DateRangePicker({ id, className='', title = 'Date Range', type = 'rect', color = 'lightGray', align = 'left', size = 'sm', callback }) {
-  const [showDropdown, setShowDropdown] = useState(DropdownState.CLOSED)
+  const [showDropdown, setShowDropdown] = useState(false)
   const handleShowDropdown = () => {
-    setShowDropdown(DropdownState.OPEN)
+    setShowDropdown(true)
   }
 
+  const ref = useRef(null)
+
+  useEffect(() => {
+    const handleClickOutside = (e) => {
+      if (ref.current && !ref.current.contains(e.target)) {
+        setShowDropdown(false)
+      }
+    }
+
+    document.addEventListener('click', handleClickOutside, true)
+    return () => {
+      document.removeEventListener('click', handleClickOutside, true)
+    }
+  }, [])
+
   const MinDate = useMemo(() => {
-    var d = new Date()
-    d.setDate(d.getDate() - 1)
-    return d
-  }, [new Date().getDay()])
+    var d = new Date();
+    d.setDate(d.getDate() - 1);
+    return d;
+  }, [new Date().getDay()]);
 
   const MaxDate = useMemo(() => {
-    return new Date(new Date().setMinutes(0, 0, 0))
-  }, [new Date().getDay()])
+    return new Date(new Date().setMinutes(0, 0, 0));
+  }, [new Date().getDay()]);
 
-  const [err, setErr] = useState(false)
-  const [dateErr, setDateErr] = useState(false)
+  const [err, setErr] = useState(false);
+  const [dateErr, setDateErr] = useState(false);
 
   const {
     control,
@@ -136,90 +159,99 @@ export function DateRangePicker({ id, className='', title = 'Date Range', type =
     formState: { errors },
   } = useForm({
     defaultValues: {
-      start: MinDate.toISOString().split('T')[0],
-      end: MaxDate.toISOString().split('T')[0],
+      start: MinDate.toISOString().split("T")[0],
+      end: MaxDate.toISOString().split("T")[0],
       dateSelect: dateRangeType.SELECT.value,
     },
-  })
+  });
 
-  const watchDateType = watch('dateSelect')
+  const watchDateType = watch("dateSelect");
   const debouncedExport = useRef(
     debounce((data) => {
-      exportRequest(data)
-    }, 1000),
-  ).current
+      exportRequest(data);
+    }, 1000)
+  ).current;
 
   const handleCancel = (e) => {
-    e.preventDefault()
-    setShowDropdown(false)
-    setDateErr(false)
-    reset()
-  }
+    e.preventDefault();
+    setShowDropdown(false);
+    setDateErr(false);
+    reset();
+  };
 
   const onSubmit = (data) => {
-    debouncedExport(data)
-  }
+    debouncedExport(data);
+  };
 
   const exportRequest = (data) => {
     if (data.emptyChk) {
-      setErr(true)
-      return
+      setErr(true);
+      return;
     }
 
-    const mode = getSelectOptions(parseInt(data.dateSelect)).find((x) => x.value === parseInt(data.dateSelect))
-    let fromDate = new Date(data.start)
-    let toDate = new Date(data.end)
+    const mode = getSelectOptions(parseInt(data.dateSelect)).find(
+      (x) => x.value === parseInt(data.dateSelect)
+    );
+    let fromDate = new Date(data.start);
+    let toDate = new Date(data.end);
 
     if (mode.value < dateRangeType.CUSTOM.value) {
-      let obj = dateRangeCalculation(mode.value)
-      fromDate = obj.From
-      toDate = obj.To
+      let obj = dateRangeCalculation(mode.value);
+      fromDate = obj.From;
+      toDate = obj.To;
     }
 
-    fromDate.setUTCHours(0, 0, 0, 0)
+    fromDate.setUTCHours(0, 0, 0, 0);
 
-    toDate.setUTCHours(23, 59, 59, 59)
+    toDate.setUTCHours(23, 59, 59, 59);
 
     if (toDate < fromDate) {
-      setDateErr(true)
-      return
+      setDateErr(true);
+      return;
     }
-    
+
     callback({
       Mode: mode,
       From: fromDate,
       To: toDate,
-    })
+    });
 
     reset()
-    setShowDropdown(DropdownState.CLOSED)
+    setShowDropdown(false)
   }
 
   const onChanged = () => {
-    if (dateErr) setDateErr(false)
-  }
+    if (dateErr) setDateErr(false);
+  };
 
   const renderContent = () => (
     <div className={className}>
-      <FormRow label="Date Range" htmlFor="dateSelect" className="mb-4" helperText="Please choose date range from which you want to export.">
+      <FormRow
+        label="Date Range"
+        htmlFor="dateSelect"
+        className="mb-4"
+        helperText="Please choose date range from which you want to export."
+      >
         <Controller
           name="dateSelect"
           control={control}
           rules={{
-            required: 'Please select a date range.',
-            validate: { selected: (r) => r !== 0 || 'Please select a date range.' },
+            required: "Please select a date range.",
+            validate: {
+              selected: (r) => r !== 0 || "Please select a date range.",
+            },
           }}
           render={({ field }) => (
             <Select
               id="dateSelect"
               defaultValue={field.value}
               onChange={(e) => {
-                field.onChange(e)
-                onChanged()
+                field.onChange(e);
+                onChanged();
               }}
               options={getSelectOptions(field.value)}
               ref={field.ref}
-              color={errors.dateSelect ? 'failure' : 'gray'}
+              color={errors.dateSelect ? "failure" : "gray"}
             />
           )}
         />
@@ -231,8 +263,12 @@ export function DateRangePicker({ id, className='', title = 'Date Range', type =
               name="start"
               control={control}
               rules={{
-                required: 'A start date is required.',
-                validate: { whitespace: (v) => (v?.toString().trim() || '').length > 0 || 'A start date is required.' },
+                required: "A start date is required.",
+                validate: {
+                  whitespace: (v) =>
+                    (v?.toString().trim() || "").length > 0 ||
+                    "A start date is required.",
+                },
               }}
               render={({ field }) => (
                 <div className="w-50 pr-1">
@@ -244,23 +280,31 @@ export function DateRangePicker({ id, className='', title = 'Date Range', type =
                     name="start"
                     max={MinDate}
                     onChange={(e) => {
-                      field.onChange(e)
-                      onChanged()
+                      field.onChange(e);
+                      onChanged();
                     }}
-                    className="block w-full mt-1"
-                    color={errors.start ? 'failure' : 'gray'}
+                    className="mt-1 block w-full"
+                    color={errors.start ? "failure" : "gray"}
                   />
                 </div>
               )}
             />
-            {errors.start && <div className="text-sm text-red-600 dark:text-red-500 mt-1">{errors.start.message}</div>}
+            {errors.start && (
+              <div className="mt-1 text-sm text-red-600 dark:text-red-500">
+                {errors.start.message}
+              </div>
+            )}
 
             <Controller
               name="end"
               control={control}
               rules={{
-                required: 'An end date is required.',
-                validate: { whitespace: (v) => (v?.toString().trim() || '').length > 0 || 'An end date is required.' },
+                required: "An end date is required.",
+                validate: {
+                  whitespace: (v) =>
+                    (v?.toString().trim() || "").length > 0 ||
+                    "An end date is required.",
+                },
               }}
               render={({ field }) => (
                 <div className="w-50 pr-1">
@@ -272,11 +316,11 @@ export function DateRangePicker({ id, className='', title = 'Date Range', type =
                     name="end"
                     max={MaxDate}
                     onChange={(e) => {
-                      field.onChange(e)
-                      onChanged()
+                      field.onChange(e);
+                      onChanged();
                     }}
-                    className="block w-full mt-1"
-                    color={errors.end ? 'failure' : 'gray'}
+                    className="mt-1 block w-full"
+                    color={errors.end ? "failure" : "gray"}
                   />
                 </div>
               )}
@@ -285,11 +329,23 @@ export function DateRangePicker({ id, className='', title = 'Date Range', type =
         </>
       )}
       <div className="h-4">
-        {errors.end && <div className="text-sm text-red-600 dark:text-red-500 mt-1">{errors.end.message}</div>}
-        {errors.dateSelect && <div className=" z-50 text-sm text-red-600 dark:text-red-500 ">{errors.dateSelect.message}</div>}
-        {dateErr && <div className="text-sm text-red-600 dark:text-red-500 mt-1">A valid custom date range is required.</div>}
+        {errors.end && (
+          <div className="mt-1 text-sm text-red-600 dark:text-red-500">
+            {errors.end.message}
+          </div>
+        )}
+        {errors.dateSelect && (
+          <div className=" z-50 text-sm text-red-600 dark:text-red-500 ">
+            {errors.dateSelect.message}
+          </div>
+        )}
+        {dateErr && (
+          <div className="mt-1 text-sm text-red-600 dark:text-red-500">
+            A valid custom date range is required.
+          </div>
+        )}
       </div>
-      <div className="flex gap-4 justify-end">
+      <div className="flex justify-end gap-4">
         <Button color="gray" size="sm" outline onClick={handleCancel}>
           Cancel
         </Button>
@@ -298,30 +354,36 @@ export function DateRangePicker({ id, className='', title = 'Date Range', type =
         </Button>
       </div>
     </div>
-  )
+  );
 
   return (
     <div id={`${id}-panel`} className="relative">
       <DropdownContext.Provider value={{ showDropdown, setShowDropdown }}>
-        <button id={id} {...buttonProps({ color, size, type })} data-dropdown-toggle={`${id}-dropdown`} type="button" onClick={handleShowDropdown}>
-          {title}
-          {type === 'rect' && <BiChevronDown className="pointer-events-none" />}
+        <button id={id} 
+          {...buttonProps({ color, size, type })} 
+          data-dropdown-toggle={`${id}-dropdown`} 
+          type="button" 
+          onClick={handleShowDropdown}
+        >
+          <span className='flex-auto'>{title}</span>
+          {type === 'rect' && <span className='items-right flex justify-end'><BiChevronDown className="pointer-events-none" /></span>}
         </button>
         <div
           id={`${id}-dropdown`}
-          className={`z-50 w-80 mt-2 absolute ${
-            showDropdown === DropdownState.OPEN ? '' : 'hidden'
-          } ${align === 'left' ? 'left-0' : 'right-0'} bg-white divide-y divide-gray-100 rounded-lg shadow w-44 dark:bg-gray-700`}
+          ref={ref}
+          className={`z-50 w-full md:w-80 mt-2 absolute ${
+            showDropdown ? '' : 'hidden'
+          } ${align === 'left' ? 'left-0' : 'right-0'} bg-white divide-y divide-gray-100 rounded-lg shadow dark:bg-gray-700`}
         >
-          <div className=" py-2 text-sm text-gray-700 dark:text-gray-200" aria-labelledby="dropdownDefaultButton">
+          <div className="py-2 text-sm text-gray-700 dark:text-gray-200" aria-labelledby="dropdownDefaultButton">
             <form className="space-y-6 p-3" onSubmit={handleSubmit(onSubmit)}>
-              {showDropdown === DropdownState.OPEN && renderContent()}
+              {showDropdown && renderContent()}
             </form>
           </div>
         </div>
       </DropdownContext.Provider>
     </div>
-  )
+  );
 }
 
 DateRangePicker.propTypes = {
@@ -332,18 +394,25 @@ DateRangePicker.propTypes = {
   /** This is the title for the DateRangePicker component defaults to 'Date Range'*/
   title: PropTypes.string,
   /** Type of button for the DateRangePicker component defaults to 'rect'*/
-  type: PropTypes.oneOf(['rect', 'round']),
+  type: PropTypes.oneOf(["rect", "round"]),
   /** Color of the button for the DateRangePicker component defaults to 'lightGray'*/
-  color: PropTypes.oneOf(['blue', 'gray', 'lightGray', 'green', 'red', 'yellow']),
+  color: PropTypes.oneOf([
+    "blue",
+    "gray",
+    "lightGray",
+    "green",
+    "red",
+    "yellow",
+  ]),
   /** Aligns the dropdown protion of the DateRangePicker to either the left or right of the button. Defaults to align with the left side of the button*/
-  align: PropTypes.oneOf(['left', 'right']),
+  align: PropTypes.oneOf(["left", "right"]),
   /** Size of the button for the DateRangePicker component defaults to 'sm'*/
-  size: PropTypes.oneOf(['sm', 'md', 'lg']),
+  size: PropTypes.oneOf(["sm", "md", "lg"]),
   /** Callback function for the DateRangePicker component outputs the chosen date range in the following format eg:{From:"2024-03-03T00:00:00.000Z" To:"2024-05-03T00:00:00.000Z" Mode:{
     "value": 7,
     "display": "Custom Date Range"
 }} */
   callback: PropTypes.func.isRequired,
-}
+};
 
-DateRangePicker.displayName = "DateRangePicker"
+DateRangePicker.displayName = "DateRangePicker";

package/src/drag-and-drop.tsx

@@ -1,10 +1,10 @@
 // @ts-nocheck
+import PropTypes from "prop-types";
 import { useEffect, useState } from "react";
-import { BsCloudUpload, BsFillCheckCircleFill } from "react-icons/bs";
 import { BiSearch } from "react-icons/bi";
+import { BsCloudUpload, BsFillCheckCircleFill } from "react-icons/bs";
 import { FaTimesCircle } from "react-icons/fa";
 import { Button } from "./index";
-import PropTypes from "prop-types";
 
 const DragStates = Object.freeze({
   NONE: "none",
@@ -109,7 +109,7 @@ export function DragAndDrop({
       <p className="text-xs text-gray-500 dark:text-gray-400">{subtitle}</p>
       {pickerCallback && (
         <div className="mt-5">
-          <Button color="info" onClick={handleLaunchFilePicker}>
+          <Button color="default" onClick={handleLaunchFilePicker}>
             <BiSearch className="mr-2" />
             Browse File Manager
           </Button>
@@ -227,4 +227,4 @@ DragAndDrop.propTypes = {
   pickerCallback: PropTypes.func,
 };
 
-DragAndDrop.displayName = "DragAndDrop"
+DragAndDrop.displayName = "DragAndDrop";

package/src/draggable-stacked-list-item.tsx

@@ -1,8 +1,8 @@
 // @ts-nocheck
-import { ToggleSwitch } from "./toggleswitch";
-import { HiEllipsisVertical } from "react-icons/hi2";
 import { useSortable } from "@dnd-kit/sortable";
 import { CSS } from "@dnd-kit/utilities";
+import { HiEllipsisVertical } from "react-icons/hi2";
+import { ToggleSwitch } from "./toggleswitch";
 
 type Props = {
   id: number;

package/src/drawer.tsx

@@ -1,8 +1,8 @@
 // THIS DRAWER IS FROM THE FLOWBITE LIBRARY PAGE
 
-import { useEffect, useCallback, useState } from "react";
 import type { DrawerInterface, DrawerOptions } from "flowbite";
 import { Drawer as FBDrawer } from "flowbite";
+import { useCallback, useEffect, useState } from "react";
 import { HiXMark } from "react-icons/hi2";
 
 type Props = {
@@ -75,4 +75,4 @@ export function Drawer({ show, onClose, children, title }: Props) {
   );
 }
 
-Drawer.displayName = "Drawer"
+Drawer.displayName = "Drawer";