ekm-ui 0.3.89 → 0.3.93

package/dist/table-result-block.js

@@ -1,23 +1,24 @@
-export { e as TableResultBlock } from './chunk-PZSZTHB6.js';
+export { e as TableResultBlock } from './chunk-46XKR7EO.js';
+import './chunk-ZHMUFBQM.js';
+import './chunk-YZ2YZSNQ.js';
+import './chunk-E62SCYLR.js';
+import './chunk-X6RBGNFS.js';
+import './chunk-7Q6OMA2A.js';
 import './chunk-RHBXFO7R.js';
-import './chunk-CVZY2CLV.js';
+import './chunk-5VOOMPCL.js';
 import './chunk-N7JQ6EAC.js';
 import './chunk-HVNLAQA6.js';
 import './chunk-52VBZOHL.js';
-import './chunk-ZHMUFBQM.js';
-import './chunk-E62SCYLR.js';
-import './chunk-Q3HXAUZP.js';
+import './chunk-7WJGATIR.js';
+import './chunk-RTRHNOTP.js';
 import './chunk-JHGOFDVG.js';
 import './chunk-4E6CDLVE.js';
 import './chunk-XXP5K6Y4.js';
-import './chunk-X6RBGNFS.js';
-import './chunk-7Q6OMA2A.js';
-import './chunk-5QCQEH52.js';
+import './chunk-5GLAT3VP.js';
 import './chunk-QCHLLBHM.js';
 import './chunk-LIXVY47P.js';
 import './chunk-G2WGEIWK.js';
-import './chunk-7WJGATIR.js';
-import './chunk-RTRHNOTP.js';
+import './chunk-3NO5IHBO.js';
 import './chunk-SFEJDNIA.js';
 import './chunk-E5KIDP3Z.js';
 import './chunk-TBJGGVSZ.js';
@@ -40,10 +41,10 @@ import './chunk-6YBVKGQW.js';
 import './chunk-ISA6E23B.js';
 import './chunk-7Z2AKRKU.js';
 import './chunk-WSRPB5OU.js';
-import './chunk-4GDWK5BI.js';
+import './chunk-YOHYKIR3.js';
 import './chunk-DSJ5TRZW.js';
-import './chunk-UUMCAKW4.js';
-import './chunk-4RKNVFVG.js';
+import './chunk-E4USZ2Q3.js';
+import './chunk-F47A36U7.js';
 import './chunk-M4UBHZDH.js';
 import './chunk-TMO76FWT.js';
 import './chunk-YDCYBJPC.js';

package/dist/text-row.js

@@ -1,4 +1,5 @@
-export { a as TextRow } from './chunk-5QCQEH52.js';
+export { a as TextRow } from './chunk-5GLAT3VP.js';
+import './chunk-F47A36U7.js';
 import './chunk-Z4LPO673.js';
 //# sourceMappingURL=out.js.map
 //# sourceMappingURL=text-row.js.map

package/dist/toast/index.js

@@ -1,4 +1,4 @@
-export { a as ToastContext, b as ToastProvider, c as useToast } from '../chunk-Q3HXAUZP.js';
+export { a as ToastContext, b as ToastProvider, c as useToast } from '../chunk-YZ2YZSNQ.js';
 import '../chunk-Z4LPO673.js';
 //# sourceMappingURL=out.js.map
 //# sourceMappingURL=index.js.map

package/package.json

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

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

@@ -0,0 +1,77 @@
+// @ts-nocheck
+import PropTypes from "prop-types";
+import { Checkbox } from "../checkbox";
+
+export function CountryListing({countryData, selectedCountries, countrySelectCallback}) {
+
+  return (
+    <div
+      id="country-list"
+      className={`h-[500px] overflow-y-auto rounded-md border`}
+    >
+      {(countryData || []).map((c) => {
+        const countrySelected = selectedCountries.some(s => s.CountryCode === c.CountryCode)
+        return (
+          <CountryRow
+            key={`country-row-${c.ID}`}
+            country={c}
+            selected={countrySelected}
+            callback={countrySelectCallback}
+          />
+        );
+      })}
+    </div>
+  );
+}
+
+const CountryRow = ({country, selected, callback}) => {
+
+  const handleCountrySelection = () => {
+    callback({Id: country.ID, Country: country.Country, CountryCode: country.CountryCode}, selected)
+  }
+
+  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`}
+      onClick={handleCountrySelection}
+    >
+      <div className="flex items-center ml-3">
+        <div className="flex-shrink-0">
+          <Checkbox id={`cb-country-${country.ID}`} checked={selected} onChange={() => {}} />
+        </div>
+        <div className="ml-4">
+          <img
+            src={`https://shared.ekmcdn.com/images/uifw/flags/4x3/${country.CountryCode.toLowerCase()}.svg`}
+            alt={country.CountryName}
+            onError={(e) => {
+              e.target.onerror = null
+              e.target.src = 'https://shared.ekmcdn.com/images/uifw/flags/4x3/unknown.svg'
+            }}
+            className="h-9 w-12 rounded-sm"
+          />
+        </div>
+        <div className="ml-4">
+          <div className="font-medium text-gray-900">{country.Country}</div>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+CountryListing.propTypes = {
+  /** Array of countries to list in the form { Id: 383, CountryCode 'CN': Country: 'China'} */
+  countryData: PropTypes.array.isRequired, 
+  /** Array of selected countries in the form { Id: 383, CountryCode 'CN': Country: 'China'} */
+  selectedCountries: PropTypes.array.isRequired, 
+  /** Callback to handle selection of a country */
+  countrySelectCallback: PropTypes.func.isRequired,
+}
+
+CountryRow.propTypes = {
+  /** Details of country */
+  country: PropTypes.object.isRequired,
+  /** Whether country is selected */
+  selected: PropTypes.bool.isRequired, 
+  /** Callback to handle selection of the country */
+  callback: PropTypes.func.isRequired,
+}

package/src/country-picker/country-modal.tsx

@@ -0,0 +1,236 @@
+// @ts-nocheck
+import pluralize from "pluralize";
+import PropTypes from "prop-types";
+import {
+  useEffect,
+  useReducer,
+  useRef,
+  useState,
+} from "react";
+import { HiClipboardList } from "react-icons/hi";
+import { Button } from "../button";
+import { Search } from "../search/search";
+import { TableResultBlock } from "../table-result-block";
+import { Modal } from "../modal";
+import { CountryListing } from "./country-listing";
+
+const Status = Object.freeze({
+  EMPTY: "EMPTY",
+  LOADING: "LOADING",
+  LOADED: "LOADED",
+  SEARCH_RESULTS: "SEARCH-RESULTS",
+  SEARCH_EMPTY: "SEARCH-EMPTY",
+});
+
+const initialState = Object.freeze({
+  mode: Status.LOADING,
+  searchDisabled: false,
+});
+
+function CountryPickerReducer(state, action) {
+  switch (action.type) {
+    case Status.EMPTY:
+      return {
+        mode: Status.EMPTY,
+        searchDisabled: true,
+      };
+    case Status.LOADING:
+      return initialState;
+    case Status.LOADED:
+      return {
+        mode: Status.LOADED,
+        searchDisabled: false,
+      };
+    case Status.SEARCH_RESULTS:
+      return {
+        mode: Status.SEARCH_RESULTS,
+        searchDisabled: false,
+      };
+    case Status.SEARCH_EMPTY:
+      return {
+        mode: Status.SEARCH_EMPTY,
+        searchDisabled: false,
+      };
+    default:
+      throw new Error("Unknown file picker state: " + action.page ?? "");
+  }
+}
+
+export function CountryPicker({initialLoadComplete, allCountryData, preSelected = [], 
+  onClose, callback}) {
+  const [state, dispatch] = useReducer(CountryPickerReducer, initialState);
+  const [search, setSearch] = useState("");
+  const [displayedCountries, setDisplayedCountries] = useState([]);
+  // Selected State
+  const [selectedCountries, setSelectedCountries] = useState([])
+  const allCountriesRef = useRef([])
+
+  useEffect(() => {
+    if (allCountryData?.length > 0 || initialLoadComplete) {
+      allCountriesRef.current = allCountryData
+      performSearch('')
+    }
+  }, [allCountryData])
+
+  useEffect(() => {
+    setSelectedCountries(preSelected)
+  }, [preSelected])
+
+  const handleSearchRequest = (searchTerm) => {
+    const newSearchText = searchTerm.text ?? "";
+    const oldSearchText = search ?? "";
+    if (newSearchText != oldSearchText) {
+      dispatch({ type: Status.LOADING });
+      performSearch(newSearchText)
+    }
+    setSearch(newSearchText);
+  };
+
+  const performSearch = (searchText) => {
+    const newCountries = searchText ? allCountriesRef.current.filter(c => c.Country.toLowerCase().includes(searchText.toLowerCase())) :
+      allCountriesRef.current
+      if (newCountries?.length > 0) {
+        setDisplayedCountries(newCountries)
+        dispatch({type: searchText?.length > 0 ? Status.SEARCH_RESULTS : Status.LOADED})
+      } else {
+        setDisplayedCountries([])
+        dispatch({type: searchText?.length > 0 ? Status.SEARCH_EMPTY : Status.EMPTY})
+      }
+
+  }
+
+  const handleAddLocations = () => {
+    callback(selectedCountries);
+  };
+
+  const handleCountrySelection = (details, selected) => {
+    const newCountries = selected ? selectedCountries.filter( c => c.CountryCode != details.CountryCode) :
+      [...selectedCountries, details]
+    setSelectedCountries(newCountries)
+}
+
+  const renderList = () => {
+    switch (state.mode) {
+      case Status.EMPTY:
+        return (
+          <NoResultsView
+            title="No Countries"
+            msg="Available countries will appear here"
+          />
+        );
+      case Status.LOADING:
+        return (
+          <NoResultsView
+            title="Loading Countries"
+            msg="Don't worry, this won't take long..."
+            showSpinner={true}
+          />
+        );
+      case Status.SEARCH_RESULTS:
+      case Status.LOADED:
+        return (
+          <CountryListing
+            countryData={displayedCountries}
+            selectedCountries={selectedCountries}
+            countrySelectCallback={handleCountrySelection}
+          />
+        );
+      case Status.SEARCH_EMPTY:
+        return (
+          <NoResultsView
+            title="No Countries Found"
+            msg="No countries were found matching your search"
+            blockHeight="h-[460px]"
+          />
+        );
+
+      default:
+        break;
+    }
+  };
+
+  const renderContent = () => (
+    <>
+      {selectedCountries?.length > 0 && (
+        <div className="mb-4 rounded-md border border-orange-200 bg-yellow-50 p-4">
+          <p className="text-center text-sm text-yellow-800">
+            {`${pluralize("country", selectedCountries?.length, true)} selected.`}
+            <span
+              onClick={() => setSelectedCountries([])}
+              className="cursor-pointer text-primary-600 hover:underline"
+            >{` Clear Selection.`}</span>
+          </p>
+        </div>
+      )}
+      <Search
+        id="locationSearch"
+        placeholder="Search for countries"
+        disabled={state.searchDisabled}
+        callback={handleSearchRequest}
+      />
+      <div className="mb-4 mt-4">
+        {(state.mode === Status.SEARCH_RESULTS ||
+          state.mode === Status.SEARCH_EMPTY) &&
+          search.length > 0 && (
+            <span className="ms-1 text-sm font-medium text-gray-500 dark:text-gray-400 md:ms-2">{`Showing results for..."${search}"`}</span>
+          )}
+      </div>
+      {renderList()}
+    </>
+  );
+
+  return (
+    <Modal
+      show={true}
+      onClose={onClose}
+      title="Choose Locations"
+      size="md"
+    >
+      <Modal.Body>
+        <div className="h-full">{renderContent()}</div>
+      </Modal.Body>
+      <Modal.Footer>
+        <div className={`flex-grow grid grid-col-2 grid-flow-col gap-4`}>
+          <Button color="light" onClick={onClose}>
+            Close
+          </Button>
+          <Button
+            color="success"
+            onClick={handleAddLocations}
+            disabled={selectedCountries?.length === 0}
+          >
+            Add Locations
+          </Button>
+        </div>
+      </Modal.Footer>      
+    </Modal>
+  );
+
+}
+
+const NoResultsView =({title, msg, blockHeight="h-[500px]", showSpinner = false}) => {
+  return (
+    <div className={`${blockHeight} flex items-center justify-center`}>
+      <TableResultBlock
+        icon={!showSpinner && <HiClipboardList className="mb-4 h-16 w-16 text-gray-500 dark:text-gray-400" />}
+        title={title}
+        message={msg}
+        spinner={showSpinner}
+      />
+    </div>
+  )
+}
+
+CountryPicker.propTypes = {
+  /** Boolean to indicate that the load of the country data this is passed to this component has been completed */
+  initialLoadComplete: PropTypes.bool.isRequired,
+  /** Array of all the country data in the form { Id: 383, CountryCode 'CN': Country: 'China'} */
+  allCountryData: PropTypes.array.isRequired,   
+  /** Array of preselected countries in the form { Id: 383, CountryCode 'CN': Country: 'China'} */
+  preSelected: PropTypes.array.isRequired,
+  /** Callback to close the modal */
+  onClose: PropTypes.func.isRequired,
+  /** Callback which returns an array of the selected products in the form  { Id: 383, CountryCode 'CN': Country: 'China'} */
+  callback: PropTypes.func.isRequired,
+
+}

package/src/index.tsx

@@ -54,9 +54,10 @@ export { Spinner } from "./spinner";
 export { FeaturePageGroup } from "./featurePageComponents/feature-page-group";
 export { TableResultBlock } from "./table-result-block";
 export { DateRangePicker } from "./date-range-picker";
-export { ProductPicker } from "./product-picker/product-drawer";
+export { ProductPicker } from "./product-picker/product-modal";
 export { TestComponent } from "./test-component";
 export { NBUI_Container } from "./nbui/nbui-container";
 export { NBUI_Card } from "./nbui/nbui-card";
+export { CountryPicker} from "./country-picker/country-modal";
 
 import "./styles.css";

package/src/label.tsx

@@ -1,15 +1,11 @@
 //@ts-nocheck
-import { twMerge } from "tailwind-merge";
 
 export function Label({ children, ...props }) {
   return (
     <label
-      className={twMerge(
-        "text-sm font-medium text-gray-900 dark:text-white",
-        props.className && props.className
-      )}
-      data-testid="flowbite-label"
       {...props}
+      className={`text-sm font-medium text-gray-900 dark:text-white ${props.className ? props.className : ''}`}
+      data-testid="flowbite-label"      
     >
       {children}
     </label>

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

@@ -10,7 +10,6 @@ function BuildImageUrl(imageUrl) {
 }
 
 export function Listing({
-  border,
   products,
   isMore,
   selected,
@@ -53,14 +52,14 @@ export function Listing({
     <div
       id="product-list"
       ref={scrollRef}
-      className={`${border} overflow-y-auto rounded-md border`}
+      className={`h-[500px] overflow-y-auto rounded-md border`}
     >
       {(products || []).map((p) => {
         return (
           <ProductRow
-            key={`product-row-${p.Name}`}
+            key={`product-row-${p.ProductId}`}
             product={p}
-            selected={selected.includes(p.ProductId)}
+            selected={selected.has(p.ProductId)}
             callback={handleProductSelection}
           />
         );
@@ -70,7 +69,7 @@ export function Listing({
   );
 }
 
-function ProductRow({ product, selected = false, callback }) {
+function ProductRow({ product, selected, callback }) {
   const handleProductSelection = (e) => {
     callback(product.ProductId);
   };
@@ -84,7 +83,7 @@ function ProductRow({ product, selected = false, callback }) {
       <div className="ml-3 flex items-center">
         <div className="flex-shrink-0">
           <Checkbox
-            id={`cb-prod-${product.Id}`}
+            id={`cb-prod-${product.ProductId}`}
             name={product.Name}
             checked={selected}
             onChange={() => {}}
@@ -113,7 +112,7 @@ function ProductRow({ product, selected = false, callback }) {
         </div>
         <div className="ml-4">
           <div className=" font-medium text-gray-900">{product.Name}</div>
-          {product.Categories.length > 0 ? (
+          {product.Categories?.length > 0 ? (
             <div className="text-xs text-gray-500">{`${
               product.CategoryName
             } & ${pluralize("other", product.Categories.length, true)}`}</div>
@@ -134,14 +133,12 @@ function ProductRow({ product, selected = false, callback }) {
 }
 
 Listing.propTypes = {
-  /** Border style to use*/
-  border: PropTypes.string,
-  /** Array of files to list */
+  /** Array of products to list */
   products: PropTypes.array,
   /** Boolean to indicate if there are more products to load */
   isMore: PropTypes.bool,
-  /** Name of the selected file */
-  selected: PropTypes.array,
+  /** Set of selected ids */
+  selected: PropTypes.instanceOf(Set),
   /** Current page */
   page: PropTypes.number,
   /** Total number of pages */