ekm-ui 0.3.78 → 0.3.83

package/dist/table-result-block.js

@@ -0,0 +1,60 @@
+export { e as TableResultBlock } from './chunk-PZIZGHZJ.js';
+import './chunk-F5B2GEIL.js';
+import './chunk-N7JQ6EAC.js';
+import './chunk-HVNLAQA6.js';
+import './chunk-52VBZOHL.js';
+import './chunk-O7YHGDMR.js';
+import './chunk-Q3HXAUZP.js';
+import './chunk-E62SCYLR.js';
+import './chunk-JHGOFDVG.js';
+import './chunk-4E6CDLVE.js';
+import './chunk-XXP5K6Y4.js';
+import './chunk-RHBXFO7R.js';
+import './chunk-P4BV63ZR.js';
+import './chunk-QCHLLBHM.js';
+import './chunk-LIXVY47P.js';
+import './chunk-G2WGEIWK.js';
+import './chunk-7WJGATIR.js';
+import './chunk-RTRHNOTP.js';
+import './chunk-RS2EPFQY.js';
+import './chunk-E5KIDP3Z.js';
+import './chunk-TBJGGVSZ.js';
+import './chunk-QKHEEDZ4.js';
+import './chunk-WVAVR5V6.js';
+import './chunk-CNJDESTL.js';
+import './chunk-TXDBBVCI.js';
+import './chunk-HTXOCBXA.js';
+import './chunk-EEMQBWYJ.js';
+import './chunk-4EVAA6B6.js';
+import './chunk-IY6WVOAI.js';
+import './chunk-VGGEDWFD.js';
+import './chunk-TKQKGJ3X.js';
+import './chunk-LJMVG4UJ.js';
+import './chunk-QMOPWIA3.js';
+import './chunk-SLIZ4TDR.js';
+import './chunk-FPELMAZN.js';
+import './chunk-H25Q2T5N.js';
+import './chunk-WTBH4TDX.js';
+import './chunk-U6EF2JHT.js';
+import './chunk-ISA6E23B.js';
+import './chunk-7Z2AKRKU.js';
+import './chunk-WSRPB5OU.js';
+import './chunk-MD4AM55R.js';
+import './chunk-DSJ5TRZW.js';
+import './chunk-QP53HWTU.js';
+import './chunk-4RKNVFVG.js';
+import './chunk-M4UBHZDH.js';
+import './chunk-TMO76FWT.js';
+import './chunk-YDCYBJPC.js';
+import './chunk-ELWZ674J.js';
+import './chunk-GI7QHCYX.js';
+import './chunk-2OPJLYW6.js';
+import './chunk-P5IM3T4M.js';
+import './chunk-TRVGXTCI.js';
+import './chunk-TOLCGTOY.js';
+import './chunk-BLUJNMXF.js';
+import './chunk-TJMI4DH2.js';
+import './chunk-6LHL364H.js';
+import './chunk-Z4LPO673.js';
+//# sourceMappingURL=out.js.map
+//# sourceMappingURL=table-result-block.js.map

package/dist/test-component.d.ts

@@ -0,0 +1,5 @@
+declare function TestComponent({ defaultColour }: {
+    defaultColour?: string | undefined;
+}): JSX.Element;
+
+export { TestComponent };

package/dist/test-component.js

@@ -0,0 +1,4 @@
+export { a as TestComponent } from './chunk-WVAVR5V6.js';
+import './chunk-Z4LPO673.js';
+//# sourceMappingURL=out.js.map
+//# sourceMappingURL=test-component.js.map

package/dist/text-row.js

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

package/dist/textarea.js

@@ -0,0 +1,5 @@
+export { a as TextArea } from './chunk-QCHLLBHM.js';
+import './chunk-6LHL364H.js';
+import './chunk-Z4LPO673.js';
+//# sourceMappingURL=out.js.map
+//# sourceMappingURL=textarea.js.map

package/dist/textinput.js

@@ -0,0 +1,5 @@
+export { a as TextInput } from './chunk-HTXOCBXA.js';
+import './chunk-6LHL364H.js';
+import './chunk-Z4LPO673.js';
+//# sourceMappingURL=out.js.map
+//# sourceMappingURL=textinput.js.map

package/dist/toast/{index.mjs → index.js}

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

package/dist/toggleswitch.js

@@ -0,0 +1,5 @@
+export { a as ToggleSwitch } from './chunk-TMO76FWT.js';
+import './chunk-6LHL364H.js';
+import './chunk-Z4LPO673.js';
+//# sourceMappingURL=out.js.map
+//# sourceMappingURL=toggleswitch.js.map

package/dist/tooltip/tooltip.js

@@ -0,0 +1,4 @@
+export { a as ToolTip } from '../chunk-E62SCYLR.js';
+import '../chunk-Z4LPO673.js';
+//# sourceMappingURL=out.js.map
+//# sourceMappingURL=tooltip.js.map

package/dist/video-dashboard-notification.js

@@ -0,0 +1,4 @@
+export { a as VideoDashboardNotification } from './chunk-LIXVY47P.js';
+import './chunk-Z4LPO673.js';
+//# sourceMappingURL=out.js.map
+//# sourceMappingURL=video-dashboard-notification.js.map

package/dist/video-modal.js

@@ -0,0 +1,4 @@
+export { a as VideoModal } from './chunk-G2WGEIWK.js';
+import './chunk-Z4LPO673.js';
+//# sourceMappingURL=out.js.map
+//# sourceMappingURL=video-modal.js.map

package/package.json

@@ -1,17 +1,23 @@
 {
   "name": "ekm-ui",
-  "version": "0.3.78",
+  "version": "0.3.83",
   "sideEffects": [
     "**/*.css"
   ],
-  "main": "./dist/index.mjs",
-  "types": "./dist/index.d.ts",
+  "type": "module",
   "exports": {
-    ".": "./dist",
-    "./index.mjs": "./dist/index.mjs",
+    ".": "./dist/index.js",
     "./styles.css": "./dist/index.css"
   },
   "license": "MIT",
+  "tsup": {
+    "entry": [
+      "src/index.ts"
+    ],
+    "splitting": false,
+    "sourcemap": true,
+    "clean": true
+  },
   "scripts": {
     "build": "tsup",
     "dev": "tsup --watch",
@@ -19,45 +25,20 @@
     "lint": "eslint \"**/*.ts*\""
   },
   "devDependencies": {
-    "@types/react": "^18.2.0",
+    "@types/is-function": "^1.0.3",
+    "@types/react": "^17.0.2",
     "@types/react-color": "^3.0.6",
-    "@types/react-dom": "^18.2.0",
+    "@types/react-dom": "^17.0.2",
+    "react": "^17.0.2",
     "eslint": "^7.32.0",
     "eslint-config-custom": "*",
     "postcss": "^8.4.20",
-    "react": "^17.0.2",
     "tailwind-config": "*",
     "tsconfig": "*",
     "tsup": "^6.1.3",
     "typescript": "^4.5.2"
   },
   "dependencies": {
-    "@ckeditor/ckeditor5-alignment": "38.0.1",
-    "@ckeditor/ckeditor5-autoformat": "38.0.1",
-    "@ckeditor/ckeditor5-basic-styles": "38.0.1",
-    "@ckeditor/ckeditor5-block-quote": "38.0.1",
-    "@ckeditor/ckeditor5-code-block": "38.0.1",
-    "@ckeditor/ckeditor5-core": "38.0.1",
-    "@ckeditor/ckeditor5-dev-utils": "37.0.1",
-    "@ckeditor/ckeditor5-editor-decoupled": "38.0.1",
-    "@ckeditor/ckeditor5-engine": "38.0.1",
-    "@ckeditor/ckeditor5-enter": "38.0.1",
-    "@ckeditor/ckeditor5-essentials": "38.0.1",
-    "@ckeditor/ckeditor5-heading": "38.0.1",
-    "@ckeditor/ckeditor5-image": "38.0.1",
-    "@ckeditor/ckeditor5-indent": "38.0.1",
-    "@ckeditor/ckeditor5-link": "38.0.1",
-    "@ckeditor/ckeditor5-list": "38.0.1",
-    "@ckeditor/ckeditor5-paragraph": "38.0.1",
-    "@ckeditor/ckeditor5-paste-from-office": "38.0.1",
-    "@ckeditor/ckeditor5-react": "6.0.0",
-    "@ckeditor/ckeditor5-remove-format": "38.0.1",
-    "@ckeditor/ckeditor5-table": "38.0.1",
-    "@ckeditor/ckeditor5-theme-lark": "38.0.1",
-    "@ckeditor/ckeditor5-typing": "38.0.1",
-    "@ckeditor/ckeditor5-ui": "38.0.1",
-    "@ckeditor/ckeditor5-undo": "38.0.1",
-    "@ckeditor/ckeditor5-utils": "38.0.1",
     "@dnd-kit/core": "^6.0.8",
     "@dnd-kit/sortable": "^7.0.2",
     "@dnd-kit/utilities": "^3.2.1",
@@ -71,6 +52,6 @@
     "pluralize": "^8.0.0",
     "react-color": "^2.19.3",
     "react-hook-form": "^7.51.0",
-    "react-icons": "^4.8.0"
+    "react-icons": "^5.2.0"
   }
 }

package/src/alert-banner.tsx

@@ -1,7 +1,4 @@
-//@ts-nocheck
-
 import { variantProps } from "classname-variants/react";
-import { FaTimes } from "react-icons/fa";
 import {
   FaTimes,
   FaInfoCircle,
@@ -34,11 +31,11 @@ const alertProps = variantProps({
       true: "rounded-lg",
       false: "rounded-none",
     },
-    defaultVariants: {
-      type: "info",
-      rounded: true,
-      size: "md",
-    },
+  },
+  defaultVariants: {
+    type: "info",
+    rounded: true,
+    size: "md",
   },
 });
 
@@ -59,7 +56,21 @@ const dismissProps = variantProps({
   },
 });
 
-export function AlertBanner({ children, type, showIcon, onDismiss, rounded }) {
+type AlertBannerProps = {
+  children: React.ReactNode;
+  type: "info" | "success" | "warning" | "danger";
+  showIcon: boolean;
+  onDismiss: () => void;
+  rounded: boolean;
+};
+
+export function AlertBanner({
+  children,
+  type,
+  showIcon,
+  onDismiss,
+  rounded,
+}: AlertBannerProps) {
   const renderIcon = () => {
     switch (type) {
       case "info":
@@ -76,7 +87,7 @@ export function AlertBanner({ children, type, showIcon, onDismiss, rounded }) {
   };
 
   return (
-    <div {...alertProps({ type, rounded })} role="alert">
+    <div {...alertProps({ type, rounded, size: "md" })} role="alert">
       {showIcon && (
         <div className="mr-3 mt-1 inline h-4 w-4 flex-shrink-0">
           {renderIcon()}

package/src/avatar.tsx

@@ -1,6 +1,6 @@
-//@ts-nocheck
 import { twMerge } from "tailwind-merge";
 import PropTypes from "prop-types";
+import React from "react";
 
 const avatarSize = Object.freeze({
   xs: "w-6 h-6",
@@ -18,7 +18,7 @@ const fontSize = Object.freeze({
   xl: "text-7xl",
 });
 
-var colorMap = Object.freeze({
+var colorMap: { [key: string]: string } = Object.freeze({
   A: "bg-red-200",
   B: "bg-red-200",
   C: "bg-red-200",
@@ -47,6 +47,14 @@ var colorMap = Object.freeze({
   Z: "bg-orange-200",
 });
 
+type AvatarProps = {
+  children: React.ReactNode;
+  size: keyof typeof avatarSize;
+  placeholderInitials?: string;
+  rounded: boolean;
+  img?: string;
+};
+
 export function Avatar({
   children,
   img,
@@ -54,11 +62,11 @@ export function Avatar({
   placeholderInitials,
   rounded,
   ...props
-}) {
-  const bgColor =
-    placeholderInitials !== ""
-      ? colorMap[placeholderInitials[0].toUpperCase()]
-      : "bg-gray-100";
+}: AvatarProps) {
+  const bgColor = placeholderInitials
+    ? colorMap[placeholderInitials[0].toUpperCase()]
+    : "bg-gray-100";
+
   return img ? (
     <img
       src={img}
@@ -85,7 +93,7 @@ export function Avatar({
           size ? fontSize[size] : "text-md"
         )}
       >
-        {placeholderInitials.toUpperCase()}
+        {placeholderInitials?.toUpperCase()}
       </span>
     </div>
   );

package/src/color-picker.tsx

@@ -1,20 +1,20 @@
-import { useEffect, useRef, useState } from "react";
+//@ts-nocheck
+import { useState, useRef, useEffect } from "react";
 import { SketchPicker } from "react-color";
+import PropTypes from "prop-types";
 
-type Props = {
-  defaultColour?: string;
-  onChange?: Function;
-  onComplete?: Function; // To reduce renders in the parent this cb is best, depending upon the context it is called
-};
 
 export function ColorPicker({
   defaultColour = "#ff00ff",
   onChange,
   onComplete,
-}: Props) {
+}) {
+  const [showPicker, setShowPicker] = useState(false);
+  const [colour, setColour] = useState(defaultColour);
   const ref = useRef<any>(null);
+
   useEffect(() => {
-    const handleClickOutside = (e: MouseEvent) => {
+    const handleClickOutside = (e) => {
       if (ref.current && !ref.current.contains(e.target)) {
         setShowPicker(false);
       }
@@ -26,15 +26,13 @@ export function ColorPicker({
     };
   }, []);
 
-  const [showPicker, setShowPicker] = useState(false);
-  const [colour, setColour] = useState(defaultColour);
-  const handleChange = (color: any) => {
+  const handleChange = (color) => {
     const hex = color.hex;
     setColour(hex);
     if (onChange != null) onChange(hex);
   };
 
-  const handleChangeComplete = (color: any) => {
+  const handleChangeComplete = (color) => {
     // We don't set the colour here as it is done in onChange
     if (onComplete != null) onComplete(color.hex);
   };
@@ -67,4 +65,13 @@ export function ColorPicker({
   );
 }
 
-ColorPicker.displayName = "ColorPicker";
+ColorPicker.proptypes = {
+
+  defaultColour: PropTypes.string,
+  onChange: PropTypes.func,
+  onComplete: PropTypes.func,
+};
+
+ColorPicker.displayName = "ColorPicker"
+
+

package/src/index.tsx

@@ -3,7 +3,6 @@ export { FormRow } from "./form-row";
 export { Navbar } from "./navbar/navbar";
 export { Sidebar } from "./sidebar/sidebar";
 export { LoveFooter } from "./love-footer";
-export { RichTextEditor } from "./rich-text-editor";
 export { ToastProvider, useToast } from "./toast";
 export { NoResultsBlock } from "./no-results-block";
 export { StackedListItem } from "./stacked-list-item";
@@ -56,5 +55,6 @@ 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 {TestComponent} from "./test-component";
 
 import "./styles.css";

package/src/navbar/navbar.tsx

@@ -1,3 +1,4 @@
+//@ts-nocheck
 import {
   Avatar,
   Button,

package/src/no-results-block.tsx

@@ -1,3 +1,4 @@
+
 type Props = {
   title: string;
   icon: JSX.Element;
@@ -6,13 +7,7 @@ type Props = {
   children?: JSX.Element;
 };
 
-export function NoResultsBlock({
-  icon,
-  title,
-  text,
-  children,
-  buttons,
-}: Props) {
+export function NoResultsBlock({ icon, title, text, children, buttons }: Props) {
   return (
     <div className="flex flex-col items-center justify-between px-4 py-16 sm:px-8">
       {icon}

package/src/page-header.tsx

@@ -6,9 +6,10 @@ type Props = {
   text?: string | Element[];
   children?: JSX.Element;
   breadcrumbs: Array<{ linkLabel: string; linkURL: string }>;
+  extras: JSX.Element;
 };
 
-export function PageHeader({ children, title, text, breadcrumbs }: Props) {
+export function PageHeader({ children, title, text, breadcrumbs, extras }: Props) {
   return (
     <div className="border-b bg-white p-8 shadow-sm dark:border-gray-700 dark:bg-gray-800 lg:flex lg:items-center lg:justify-between">
       <div className="flex w-full flex-wrap items-center justify-between gap-x-8 gap-y-4 sm:flex-nowrap ">
@@ -29,14 +30,16 @@ export function PageHeader({ children, title, text, breadcrumbs }: Props) {
               );
             })}
           </Breadcrumb>
+          <div className='flex items-center'>
           <h2 className="mt-2 text-xl font-semibold leading-7 text-gray-900 dark:text-white sm:truncate">
             {title}
-          </h2>
+            </h2>
+          {extras}
+        </div>      
           <p className=" text-sm font-normal text-gray-500 dark:text-gray-400">
             {text}
           </p>
         </div>
-
         <div className="mt-1 flex flex-shrink-0 flex-col sm:mt-0 sm:flex-row sm:flex-wrap sm:space-x-6">
           {children}
         </div>

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

@@ -93,7 +93,7 @@ function ProductRow({ product, selected = false, callback }) {
         <div className="ml-4">
           {product.Image && product.IamgeName !== "[URL-DownloadRequested]" ? (
             <img
-              className="h-10 w-10 rounded-md"
+              className="h-10 w-10 rounded-sm"
               src={product.Image}
               alt={product.Name}
               onError={(e) => {
@@ -102,7 +102,6 @@ function ProductRow({ product, selected = false, callback }) {
                   "/admin/Content/images/no-image-discount.png"
                 )}`;
               }}
-              className="h-10 w-10 rounded-sm"
             />
           ) : (
             <img

package/src/select.tsx

@@ -43,11 +43,11 @@ 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]),
+  defaultValue: PropTypes.oneOfType([PropTypes.string, PropTypes.number, PropTypes.bool]),
   /** Array of objects with value and display properties */
   options: PropTypes.arrayOf(
     PropTypes.shape({
-      value: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
+      value: PropTypes.oneOfType([PropTypes.string, PropTypes.number, PropTypes.bool])
         .isRequired,
       display: PropTypes.string.isRequired,
     })

package/src/sidebar/sidebar.tsx

@@ -1,3 +1,4 @@
+//@ts-nocheck
 import classNames from "classnames";
 import { Sidebar as FlowbiteSidebar, TextInput } from "flowbite-react";
 import { HiSearch } from "react-icons/hi";

package/src/test-component.tsx

@@ -0,0 +1,13 @@
+import { useState, useRef } from "react";
+
+export function TestComponent({ defaultColour = "#ff00ff" }) {
+    console.log("Test Component Here - 54693");
+  //const [showPicker, setShowPicker] = useState(false);
+  const [colour, setColour] = useState('');
+  //const ref = useRef(null);
+  return (
+    <div>
+          <h1>Test Component Here - 54693</h1>
+    </div>
+  );
+}

package/src/textinput.tsx

@@ -76,6 +76,7 @@ export const TextInput = forwardRef(function TextInput(props, ref) {
             disabled={disabled}
             onChange={props.onChange}
             value={props.value}
+            onKeyDown={props.onKeyDown}
           />
         </div>
       </div>
@@ -100,6 +101,7 @@ export const TextInput = forwardRef(function TextInput(props, ref) {
             name={props.name}
             onChange={props.onChange}
             value={props.value}
+            onKeyDown={props.onKeyDown}
           />
           {position == "right" && (
             <span className="rounded-e-0 inline-flex items-center rounded-r-lg border border-gray-300 bg-gray-200 px-3 text-sm text-gray-900 dark:border-gray-600 dark:bg-gray-600 dark:text-gray-400">
@@ -125,6 +127,7 @@ export const TextInput = forwardRef(function TextInput(props, ref) {
             name={props.name}
             onChange={props.onChange}
             value={props.value}
+            onKeyDown={props.onKeyDown}
             {...textInputProps({ color })}
           />
         </div>

package/src/toast/index.tsx

@@ -53,8 +53,8 @@ export function ToastProvider({ children }: { children: React.ReactNode }) {
         aria-live="assertive"
         className="pointer-events-none fixed inset-0 right-0 z-50 flex flex-col items-end px-4 py-6 sm:items-end sm:p-6"
       >
-        {toasts.map((toast: ToastEvent) => (
-          <Toast type={toast.type} text={toast.text} />
+        {toasts.map((toast: ToastEvent, index:number) => (
+          <Toast key={`${toast.type}-${index}`} type={toast.type} text={toast.text} />
         ))}
       </div>
     </ToastContext.Provider>

package/dist/alert-banner.mjs

@@ -1,5 +0,0 @@
-export { a as AlertBanner } from './chunk-PT4IH2KW.mjs';
-import './chunk-PUJZGK7Y.mjs';
-import './chunk-23SJGKDR.mjs';
-//# sourceMappingURL=out.js.map
-//# sourceMappingURL=alert-banner.mjs.map

package/dist/alert.mjs

@@ -1,4 +0,0 @@
-export { a as Alert } from './chunk-S3J72WZM.mjs';
-import './chunk-23SJGKDR.mjs';
-//# sourceMappingURL=out.js.map
-//# sourceMappingURL=alert.mjs.map

package/dist/avatar.mjs

@@ -1,6 +0,0 @@
-export { a as Avatar } from './chunk-EX5FMSQL.mjs';
-import './chunk-GBY2NNWZ.mjs';
-import './chunk-PUJZGK7Y.mjs';
-import './chunk-23SJGKDR.mjs';
-//# sourceMappingURL=out.js.map
-//# sourceMappingURL=avatar.mjs.map

package/dist/badge.mjs

@@ -1,6 +0,0 @@
-export { a as Badge } from './chunk-EH3ZVEVT.mjs';
-import './chunk-GBY2NNWZ.mjs';
-import './chunk-PUJZGK7Y.mjs';
-import './chunk-23SJGKDR.mjs';
-//# sourceMappingURL=out.js.map
-//# sourceMappingURL=badge.mjs.map

package/dist/breadcrumb.mjs

@@ -1,5 +0,0 @@
-export { a as Breadcrumb, b as BreadcrumbHome, c as BreadcrumbItem } from './chunk-E6KQBM7F.mjs';
-import './chunk-PUJZGK7Y.mjs';
-import './chunk-23SJGKDR.mjs';
-//# sourceMappingURL=out.js.map
-//# sourceMappingURL=breadcrumb.mjs.map

package/dist/button-group-item.mjs

@@ -1,4 +0,0 @@
-export { a as ButtonGroupItem } from './chunk-SAXGEQRG.mjs';
-import './chunk-23SJGKDR.mjs';
-//# sourceMappingURL=out.js.map
-//# sourceMappingURL=button-group-item.mjs.map

package/dist/button.mjs

@@ -1,6 +0,0 @@
-export { a as Button } from './chunk-QHJF4QWW.mjs';
-import './chunk-GBY2NNWZ.mjs';
-import './chunk-PUJZGK7Y.mjs';
-import './chunk-23SJGKDR.mjs';
-//# sourceMappingURL=out.js.map
-//# sourceMappingURL=button.mjs.map