ekm-ui 0.3.74 → 0.3.78

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

@@ -1,98 +1,137 @@
 // @ts-nocheck
-import { useState, useEffect, useRef } from 'react'
-import { Checkbox } from '../checkbox'
-import PropTypes from 'prop-types'
-import pluralize from 'pluralize'
+import pluralize from "pluralize";
+import PropTypes from "prop-types";
+import { useEffect, useRef, useState } from "react";
+import { Checkbox } from "../checkbox";
 // FOR USE WITH THE PRODUCT PICKER COMPONENT - ONLY
 
 function BuildImageUrl(imageUrl) {
-    return `${window.resourceSettings.imageBasePath}${imageUrl}?v=${window.resourceSettings.version}`;
-  }
+  return `${window.resourceSettings.imageBasePath}${imageUrl}?v=${window.resourceSettings.version}`;
+}
 
-export function Listing({ border, products, isMore, selected, page, pages, callback }) {
-  const scrollRef = useRef()
-  const [showLoader, setShowLoader] = useState(false)
+export function Listing({
+  border,
+  products,
+  isMore,
+  selected,
+  page,
+  pages,
+  callback,
+}) {
+  const scrollRef = useRef();
+  const [showLoader, setShowLoader] = useState(false);
 
   useEffect(() => {
-    const element = document.querySelector('#product-list')
-    if (element && !element.hasAttribute('scroll')) scrollRef.current.addEventListener('scroll', handleScroll)
-    if (scrollRef.current != null) scrollRef.current.scrollTop = 0
+    const element = document.querySelector("#product-list");
+    if (element && !element.hasAttribute("scroll"))
+      scrollRef.current.addEventListener("scroll", handleScroll);
+    if (scrollRef.current != null) scrollRef.current.scrollTop = 0;
     return () => {
-      const element = document.querySelector('#product-list')
-      if (element && element.hasAttribute('scroll')) scrollRef.current.removeEventListener('scroll', handleScroll)
-    }
-  }, [])
+      const element = document.querySelector("#product-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) {
-      setShowLoader(true)
-      callback({ type: 'FETCH_DATA', payload: true })
+      setShowLoader(true);
+      callback({ type: "FETCH_DATA", payload: true });
     }
-  }
+  };
 
   const handleProductSelection = (id) => {
-    callback({ type: 'SELECTION', payload: id })
-  }
+    callback({ type: "SELECTION", payload: id });
+  };
 
   return (
-    <div id="product-list" ref={scrollRef} className={`${border} border rounded-md overflow-y-auto`}>
+    <div
+      id="product-list"
+      ref={scrollRef}
+      className={`${border} overflow-y-auto rounded-md border`}
+    >
       {(products || []).map((p) => {
-        return <ProductRow key={`product-row-${p.Name}`} product={p} selected={selected.includes(p.ProductId)} callback={handleProductSelection} />
+        return (
+          <ProductRow
+            key={`product-row-${p.Name}`}
+            product={p}
+            selected={selected.includes(p.ProductId)}
+            callback={handleProductSelection}
+          />
+        );
       })}
       {isMore && page < pages && showLoader && <InfiniteLoader />}
     </div>
-  )
+  );
 }
 
 function ProductRow({ product, selected = false, callback }) {
   const handleProductSelection = (e) => {
-    callback(product.ProductId)
-  }
+    callback(product.ProductId);
+  };
   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={handleProductSelection}
     >
-      <div className="flex items-center ml-3">
+      <div className="ml-3 flex items-center">
         <div className="flex-shrink-0">
-          <Checkbox id={`cb-prod-${product.Id}`} name={product.Name} checked={selected} onChange={() => {}} />
+          <Checkbox
+            id={`cb-prod-${product.Id}`}
+            name={product.Name}
+            checked={selected}
+            onChange={() => {}}
+          />
         </div>
         <div className="ml-4">
-          {product.Image && product.IamgeName !== '[URL-DownloadRequested]' ? (
+          {product.Image && product.IamgeName !== "[URL-DownloadRequested]" ? (
             <img
               className="h-10 w-10 rounded-md"
               src={product.Image}
               alt={product.Name}
               onError={(e) => {
-                e.target.onerror = null
-                e.target.src = `${BuildImageUrl('/admin/Content/images/no-image-discount.png')}`
+                e.target.onerror = null;
+                e.target.src = `${BuildImageUrl(
+                  "/admin/Content/images/no-image-discount.png"
+                )}`;
               }}
               className="h-10 w-10 rounded-sm"
             />
           ) : (
-            <img src={BuildImageUrl('/admin/Content/images/no-image-discount.png')} alt={product.Name} className="h-10 w-10 rounded-sm" />
+            <img
+              src={BuildImageUrl("/admin/Content/images/no-image-discount.png")}
+              alt={product.Name}
+              className="h-10 w-10 rounded-sm"
+            />
           )}
         </div>
         <div className="ml-4">
           <div className=" font-medium text-gray-900">{product.Name}</div>
           {product.Categories.length > 0 ? (
-            <div className="text-xs text-gray-500">{`${product.CategoryName} & ${pluralize('other', product.Categories.length, true)}`}</div>
+            <div className="text-xs text-gray-500">{`${
+              product.CategoryName
+            } & ${pluralize("other", product.Categories.length, true)}`}</div>
           ) : (
             <div className="text-xs text-gray-500">{product.CategoryName}</div>
           )}
         </div>
       </div>
       <div className="ml-4 flex-shrink-0">
-        <span className="text-sm mr-3 text-gray-500">{`${globalThis.globalSettings.CurrencySymbol}${product.Price.toFixed(
-          globalThis.globalSettings.CurrencyExponent ?? 2,
+        <span className="mr-3 text-sm text-gray-500">{`${
+          globalThis.globalSettings.CurrencySymbol
+        }${product.Price.toFixed(
+          globalThis.globalSettings.CurrencyExponent ?? 2
         )}`}</span>
       </div>
     </div>
-  )
+  );
 }
 
 Listing.propTypes = {
@@ -110,7 +149,7 @@ Listing.propTypes = {
   pages: PropTypes.number,
   /** Callback function to handle events */
   callback: PropTypes.func,
-}
+};
 
 ProductRow.propTypes = {
   /** Product object to display */
@@ -119,15 +158,15 @@ ProductRow.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"
@@ -143,5 +182,5 @@ function InfiniteLoader() {
         </svg>
       </div>
     </div>
-  )
+  );
 }

package/src/progress-bar.tsx

@@ -1,37 +1,51 @@
 //@ts-nocheck
-import PropTypes from 'prop-types'
+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',
-})
+  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',
-})
+  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'}) {
+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
+      className={`w-full rounded-full bg-gray-200 ${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']),
-}
+  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/radio.tsx

@@ -1,23 +1,23 @@
 //@ts-nocheck
-import { forwardRef } from "react";
 import PropTypes from "prop-types";
+import { forwardRef } from "react";
 
 export const Radio = forwardRef(function Radio(props, ref) {
   return (
-      <input
-        id={props.id}
-        ref={ref}
-        type="radio"
-        className={`h-4 w-4 rounded-full border-gray-300 bg-gray-100 text-blue-600 focus:ring-2 focus:ring-blue-500 dark:border-gray-600 dark:bg-gray-700 dark:ring-offset-gray-800 dark:focus:ring-blue-600 ${
-          props.disabled && "opacity-50"
-        }`}
-        {...props}
-      />
+    <input
+      id={props.id}
+      ref={ref}
+      type="radio"
+      className={`h-4 w-4 rounded-full border-gray-300 bg-gray-100 text-blue-600 focus:ring-2 focus:ring-blue-500 dark:border-gray-600 dark:bg-gray-700 dark:ring-offset-gray-800 dark:focus:ring-blue-600 ${
+        props.disabled && "opacity-50"
+      }`}
+      {...props}
+    />
   );
 });
 
 Radio.propTypes = {
-  /** Id for Radio */  
+  /** Id for Radio */
   id: PropTypes.string.isRequired,
   /** Bool to determine if radio has been checked */
   checked: PropTypes.bool,

package/src/rich-text-editor/headless-editor.ts

@@ -4,9 +4,12 @@ import DecoupledEditorBase from "@ckeditor/ckeditor5-editor-decoupled/src/decoup
 
 import Alignment from "@ckeditor/ckeditor5-alignment/src/alignment";
 import Autoformat from "@ckeditor/ckeditor5-autoformat/src/autoformat";
-import BlockQuote from "@ckeditor/ckeditor5-block-quote/src/blockquote";
 import Bold from "@ckeditor/ckeditor5-basic-styles/src/bold";
 import Code from "@ckeditor/ckeditor5-basic-styles/src/code";
+import Italic from "@ckeditor/ckeditor5-basic-styles/src/italic";
+import Strikethrough from "@ckeditor/ckeditor5-basic-styles/src/strikethrough";
+import Underline from "@ckeditor/ckeditor5-basic-styles/src/underline";
+import BlockQuote from "@ckeditor/ckeditor5-block-quote/src/blockquote";
 import CodeBlock from "@ckeditor/ckeditor5-code-block/src/codeblock";
 import Essentials from "@ckeditor/ckeditor5-essentials/src/essentials";
 import Heading from "@ckeditor/ckeditor5-heading/src/heading";
@@ -15,21 +18,18 @@ import ImageCaption from "@ckeditor/ckeditor5-image/src/imagecaption";
 import ImageResize from "@ckeditor/ckeditor5-image/src/imageresize";
 import ImageStyle from "@ckeditor/ckeditor5-image/src/imagestyle";
 import ImageToolbar from "@ckeditor/ckeditor5-image/src/imagetoolbar";
+import PictureEditing from "@ckeditor/ckeditor5-image/src/pictureediting";
 import Indent from "@ckeditor/ckeditor5-indent/src/indent";
 import IndentBlock from "@ckeditor/ckeditor5-indent/src/indentblock";
-import Italic from "@ckeditor/ckeditor5-basic-styles/src/italic";
 import Link from "@ckeditor/ckeditor5-link/src/link";
 import List from "@ckeditor/ckeditor5-list/src/list";
 import ListProperties from "@ckeditor/ckeditor5-list/src/listproperties";
 import Paragraph from "@ckeditor/ckeditor5-paragraph/src/paragraph";
 import PasteFromOffice from "@ckeditor/ckeditor5-paste-from-office/src/pastefromoffice";
-import PictureEditing from "@ckeditor/ckeditor5-image/src/pictureediting";
 import RemoveFormat from "@ckeditor/ckeditor5-remove-format/src/removeformat";
-import Strikethrough from "@ckeditor/ckeditor5-basic-styles/src/strikethrough";
 import Table from "@ckeditor/ckeditor5-table/src/table";
 import TableToolbar from "@ckeditor/ckeditor5-table/src/tabletoolbar";
 import TextTransformation from "@ckeditor/ckeditor5-typing/src/texttransformation";
-import Underline from "@ckeditor/ckeditor5-basic-styles/src/underline";
 
 class HeadlessEditor extends DecoupledEditorBase {}
 

package/src/search/search.tsx

@@ -1,13 +1,13 @@
 //@ts-nocheck
+import PropTypes from "prop-types";
 import {
-  useState,
-  useRef,
+  forwardRef,
   useCallback,
   useEffect,
-  forwardRef,
   useImperativeHandle,
+  useRef,
+  useState,
 } from "react";
-import PropTypes from "prop-types";
 
 function useDebounceEffect(effect, delay, deps) {
   const instanceRef = useRef(0);

package/src/select.tsx

@@ -1,6 +1,6 @@
 //@ts-nocheck
-import { forwardRef } from "react";
 import PropTypes from "prop-types";
+import { forwardRef } from "react";
 
 export const Select = forwardRef(function Select(props, ref) {
   return (
@@ -43,8 +43,7 @@ Select.propTypes = {
   /** Optional label for the dropdown */
   label: PropTypes.string,
   /** Optional inital selected value must match the value of an element of an object in the options array. (defaults to first value in the list)*/
-  defaultValue: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
-    .isRequired,
+  defaultValue: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
   /** Array of objects with value and display properties */
   options: PropTypes.arrayOf(
     PropTypes.shape({

package/src/sort/sort.tsx

@@ -1,65 +1,67 @@
 //@ts-nocheck
 import { useState, useRef, useEffect } from 'react'
 import PropTypes from 'prop-types'
+import { BiChevronDown } from 'react-icons/bi'
 
-export function Sort({ list, align = 'left', callback }) {
-  const [hidden, setHidden] = useState(true)
-  const counter = useRef(0)
+export function Sort({ list, align = "left", callback }) {
+  const [hidden, setHidden] = useState(true);
+  const counter = useRef(0);
 
-  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 handleSelection = (val) => {
-    counter.current += 1
+    counter.current += 1;
     // ensures that each selection object is unique.
-    setHidden(true)
-    callback(Object.assign(val, { count: counter.current }))
-  }
+    setHidden(true);
+    callback(Object.assign(val, { count: counter.current }));
+  };
   return (
     <div className="relative">
       <button
-        id="dropdownDefaultButton"
+        id="sortButton"
         data-dropdown-toggle="dropdown"
-        className="bg-white border-2 border-slate-300 focus:ring-4 focus:outline-none focus:ring-slate-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center inline-flex items-center"
+        className="text-slate-700 bg-white border border-gray-300 focus:ring-4 focus:outline-none focus:ring-gray-300 dark:bg-gray-700 dark:border-gray-600 font-medium rounded-lg text-sm px-5 py-2.5 text-center inline-flex items-center w-full md:w-auto"
         type="button"
         onClick={() => setHidden(!hidden)}
       >
-        Sort
-        <svg xmlns="http://www.w3.org/2000/svg" fill="none" aria-hidden="true" className="w-2.5 h-2.5 ml-2.5" viewBox="0 0 10 6">
-          <path stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="m1 1 4 4 4-4" />
-        </svg>
+        <span className='flex-auto'>Sort</span>
+        <span className='items-right flex justify-end'><BiChevronDown className="pointer-events-none" /></span>
       </button>
 
       <div
-        id="dropdown"
+        id="sortDropdown"
         ref={ref}
-        className={`z-10 ${hidden ? 'hidden' : ''} absolute ${align === 'left' ? 'left-0' : 'right-0'} bg-white divide-y divide-gray-100 rounded-lg shadow w-44 dark:bg-gray-700`}
+        className={`z-10 ${hidden ? 'hidden' : ''} absolute w-full md:w-44 ${align === 'left' ? 'left-0' : 'right-0'} bg-white divide-y divide-gray-100 rounded-lg shadow dark:bg-gray-700`}
       >
-        <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"
+        >
           {(list || []).map((val) => {
             return (
               <li key={`ddi=${val.value}`} onClick={() => handleSelection(val)}>
-                <a href="javascript:undefined;" className="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white">
+                <span className="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white cursor-pointer">
                   {val.display}
-                </a>
+                </span>
               </li>
-            )
+            );
           })}
         </ul>
       </div>
     </div>
-  )
+  );
 }
 
 Sort.propTypes = {
@@ -70,14 +72,14 @@ Sort.propTypes = {
       value: PropTypes.string.isRequired,
       name: PropTypes.string.isRequired,
       sort: PropTypes.string.isRequired,
-    }),
+    })
   ).isRequired,
   /** Aligns the dropdown protion of the sort 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"]),
   /** Returns{ display, value, name, sort, count} */
   callback: PropTypes.func.isRequired,
-}
+};
 
-Sort.displayName = "Sort"
+Sort.displayName = "Sort";

package/src/spinner.tsx

@@ -3,7 +3,7 @@ export function Spinner() {
     <div role="status">
       <svg
         aria-hidden="true"
-        className="inline w-14 h-14 text-gray-200 animate-spin dark:text-gray-600 fill-blue-600"
+        className="inline h-14 w-14 animate-spin fill-blue-600 text-gray-200 dark:text-gray-600"
         viewBox="0 0 100 101"
         fill="none"
         xmlns="http://www.w3.org/2000/svg"
@@ -18,7 +18,7 @@ export function Spinner() {
         />
       </svg>
     </div>
-  )
+  );
 }
 
-Spinner.displayName = "Spinner"
+Spinner.displayName = "Spinner";

package/src/stacked-list-item.tsx

@@ -1,6 +1,6 @@
 //@ts-nocheck
-import { Avatar } from "./";
 import { Badge } from "flowbite-react";
+import { Avatar } from "./";
 
 type Props = {
   id: number;