@luscii-healthtech/web-ui 0.6.1 → 0.7.1

package/dist/components/List/List.d.ts

@@ -1,7 +1,5 @@
 /// <reference types="react" />
-import { ListItemProps } from "./ListItem";
-export interface ListProps {
-    items: ListItemProps[];
-}
-export declare const List: ({ items }: ListProps) => JSX.Element;
+import { ListProps, ListItemProps, OnAssetLoadErrorPayload } from "./List.types";
+export { ListProps, ListItemProps, OnAssetLoadErrorPayload };
+export declare const List: ({ items, onAssetLoadError }: ListProps) => JSX.Element;
 export default List;

package/dist/components/List/List.types.d.ts

@@ -0,0 +1,17 @@
+/// <reference types="react" />
+import { IconProps } from "../Icons/types/IconProps.type";
+export interface ListItemProps {
+    itemId: string | number;
+    title: string;
+    subtitle?: string;
+    icon?: React.FunctionComponent<IconProps> | null | string;
+    accessories?: JSX.Element[];
+    handleItemClick?: () => void;
+    onAssetLoadError?: (payload: OnAssetLoadErrorPayload) => void;
+    tooltipId?: string;
+}
+export declare type OnAssetLoadErrorPayload = Pick<ListItemProps, "itemId" | "subtitle" | "title" | "icon">;
+export interface ListProps {
+    items: ListItemProps[];
+    onAssetLoadError?: (payload: OnAssetLoadErrorPayload) => void;
+}

package/dist/components/List/ListItem.d.ts

@@ -1,13 +1,4 @@
-import React from "react";
-import { IconProps } from "../Icons/types/IconProps.type";
-export interface ListItemProps {
-    itemId: string | number;
-    title: string;
-    subTitle?: string;
-    icon?: React.FunctionComponent<IconProps> | null;
-    accessories?: JSX.Element[];
-    handleItemClick?: () => void;
-    tooltipId?: string;
-}
-export declare const ListItem: ({ icon, subTitle, title, accessories, tooltipId, ...restProps }: ListItemProps) => JSX.Element;
+/// <reference types="react" />
+import { ListItemProps } from "./List.types";
+export declare const ListItem: ({ icon, subtitle, title, accessories, tooltipId, onAssetLoadError, ...restProps }: ListItemProps) => JSX.Element;
 export default ListItem;

package/dist/index.d.ts

@@ -21,7 +21,7 @@ export { Table, TableProps } from "./components/Table/Table";
 export { TableFieldConfig, TableFieldContent, TableFieldText, TableFieldAction, } from "./components/Table/Table.types";
 export { LoadingIndicator, LoadingIndicatorProps, } from "./components/LoadingIndicator/LoadingIndicator";
 export { default as Menu } from "./components/Menu/Menu";
-export { List } from "./components/List/List";
+export { List, ListProps, ListItemProps, OnAssetLoadErrorPayload, } from "./components/List/List";
 export { MultiSelect } from "./components/MultiSelect/MultiSelect";
 export { NavLayout, NavMenuLayoutProps } from "./components/NavMenu/NavLayout";
 export { NavMenu, NavMenuElement } from "./components/NavMenu/NavMenu";

package/dist/web-ui.cjs.development.js

@@ -370,6 +370,11 @@ var ButtonV2 = function ButtonV2(_ref) {
       className = _ref.className,
       otherAttributes = _objectWithoutPropertiesLoose(_ref, _excluded);
 
+  function handleClick(event) {
+    event.stopPropagation();
+    onClick == null ? void 0 : onClick(event);
+  }
+
   if (!text && !icon) {
     console.error("A text or an icon is required to use this component, please make sure to pass at least one of them as a prop.");
     return /*#__PURE__*/React__default.createElement("span", null, "Invalid props passed to this component.");
@@ -386,7 +391,7 @@ var ButtonV2 = function ButtonV2(_ref) {
   return /*#__PURE__*/React__default.createElement("button", Object.assign({}, otherAttributes, {
     className: buttonClassName,
     type: "button",
-    onClick: onClick,
+    onClick: handleClick,
     disabled: isDisabled,
     "aria-disabled": isDisabled
   }), icon && /*#__PURE__*/React__default.createElement(icon, {
@@ -2093,7 +2098,7 @@ function TableBodyRowDataCell(props) {
     text: content.tag.text,
     colorTheme: content.tag.color
   })), /*#__PURE__*/React__default.createElement(Text, {
-    className: "py-4 text-left leading-5 break-all",
+    className: "py-4 leading-5 text-left break-all",
     text: content.text === "" ? emptyFieldContentText : content.text,
     type: "base"
   })), isTableFieldAction(content) && /*#__PURE__*/React__default.createElement("div", {
@@ -2106,8 +2111,7 @@ function TableBodyRowDataCell(props) {
       className: "ml-2 first:ml-0",
       key: action.key,
       icon: action.icon,
-      onClick: function onClick(event) {
-        event.stopPropagation();
+      onClick: function onClick() {
         action.handleClick(props.item);
       }
     });
@@ -2468,12 +2472,12 @@ function Table(_ref) {
   var showEmptyView = !isPristine && !isLoading && !(items && items.length > 0);
   return /*#__PURE__*/React__default.createElement("table", Object.assign({
     className: classNames("w-full rounded-lg bg-white border-collapse table-auto", className)
-  }, otherAttributes), showHeader && /*#__PURE__*/React__default.createElement(TableHeader, {
+  }, otherAttributes), showHeader ? /*#__PURE__*/React__default.createElement(TableHeader, {
     className: "border-b border-slate-100",
     fieldConfigurations: fieldConfigurations
-  }), /*#__PURE__*/React__default.createElement(TableBody, {
+  }) : null, /*#__PURE__*/React__default.createElement(TableBody, {
     className: classNames({
-      "border-b border-slate-100": !showEmptyView && paginationMenuProps && paginationMenuProps.pageCount > 1
+      "border-b border-slate-100": !showEmptyView && paginationMenuProps && paginationMenuProps.currentPageNumber > 0 && paginationMenuProps.pageCount > 0
     }),
     items: items,
     fieldConfigurations: fieldConfigurations,
@@ -2482,10 +2486,10 @@ function Table(_ref) {
     isLoading: isLoading,
     showEmptyView: showEmptyView,
     onRowClick: onRowClick
-  }), !showEmptyView && paginationMenuProps && paginationMenuProps.pageCount > 1 && /*#__PURE__*/React__default.createElement(TableFooter, {
+  }), !showEmptyView && paginationMenuProps && paginationMenuProps.currentPageNumber > 0 && paginationMenuProps.pageCount > 0 ? /*#__PURE__*/React__default.createElement(TableFooter, {
     colSpan: fieldConfigurations.length,
     paginationMenuProps: paginationMenuProps
-  }));
+  }) : null);
 }
 
 var css_248z$d = ".cweb-menu > .cweb-menu-content {\n  min-width: 300px;\n  border-radius: 4px;\n  background-color: #ffffff;\n}\n\n.cweb-menu > .cweb-menu-button {\n  display: flex;\n  justify-content: flex-start;\n  flex-direction: row;\n  align-items: flex-start;\n  width: 44px;\n  height: 44px;\n  background: url(\"data:image/svg+xml,%3Csvg width%3D%2244%22 height%3D%2244%22 viewBox%3D%220 0 44 44%22 fill%3D%22none%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Crect width%3D%2244%22 height%3D%2244%22 rx%3D%2222%22 fill%3D%22%23E5F5FC%22%2F%3E%3Ccircle cx%3D%2222%22 cy%3D%2215%22 r%3D%223%22 fill%3D%22%23009FE3%22%2F%3E%3Ccircle cx%3D%2222%22 cy%3D%2222%22 r%3D%223%22 fill%3D%22%23009FE3%22%2F%3E%3Ccircle cx%3D%2222%22 cy%3D%2230%22 r%3D%223%22 fill%3D%22%23009FE3%22%2F%3E%3C%2Fsvg%3E\") no-repeat center;\n  transition: 0.2s ease;\n  background-size: contain;\n}\n\n.cweb-menu > .cweb-menu-button:hover {\n  width: 44px;\n  height: 44px;\n  background: url(\"data:image/svg+xml,%3Csvg width%3D%2244%22 height%3D%2244%22 viewBox%3D%220 0 44 44%22 fill%3D%22none%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Crect width%3D%2244%22 height%3D%2244%22 rx%3D%2222%22 fill%3D%22%23B3E3F7%22%2F%3E%3Ccircle cx%3D%2222%22 cy%3D%2215%22 r%3D%223%22 fill%3D%22%23009FE3%22%2F%3E%3Ccircle cx%3D%2222%22 cy%3D%2222%22 r%3D%223%22 fill%3D%22%23009FE3%22%2F%3E%3Ccircle cx%3D%2222%22 cy%3D%2230%22 r%3D%223%22 fill%3D%22%23009FE3%22%2F%3E%3C%2Fsvg%3E\") no-repeat center;\n  transition: 0.2s ease;\n}\n";
@@ -2571,32 +2575,54 @@ Menu.propTypes = {
   children: PropTypes.node.isRequired
 };
 
-var _excluded$9 = ["icon", "subTitle", "title", "accessories", "tooltipId"];
+var _excluded$9 = ["icon", "subtitle", "title", "accessories", "tooltipId", "onAssetLoadError"];
 var ListItem = function ListItem(_ref) {
   var icon = _ref.icon,
-      subTitle = _ref.subTitle,
+      subtitle = _ref.subtitle,
       title = _ref.title,
       accessories = _ref.accessories,
       tooltipId = _ref.tooltipId,
+      onAssetLoadError = _ref.onAssetLoadError,
       restProps = _objectWithoutPropertiesLoose(_ref, _excluded$9);
 
+  function onListItemIconLoadError() {
+    console.error({
+      message: "Url from icon failed to load, please check the props passed to `ListItem`.",
+      icon: icon,
+      title: title,
+      subtitle: subtitle
+    });
+    onAssetLoadError == null ? void 0 : onAssetLoadError({
+      title: title,
+      subtitle: subtitle,
+      itemId: restProps.itemId,
+      icon: icon
+    });
+  }
+
   return /*#__PURE__*/React__default.createElement("li", {
-    className: classNames("flex flex-row items-center space-x-4", "p-4 border-b last:border-b-0 border-slate-200", {
-      "cursor-pointer": restProps.handleItemClick
+    className: classNames("flex flex-row items-center space-x-4 bg-white", "p-4 border-b last:border-b-0 border-slate-200", {
+      "cursor-pointer": restProps.handleItemClick,
+      "hover:bg-blue-50 transition-colors ease-in-out duration-300": restProps.handleItemClick
     }),
     onClick: restProps.handleItemClick,
     "data-tip": restProps.itemId,
     "data-for": tooltipId
-  }, icon && /*#__PURE__*/React__default.createElement(icon, {
+  }, icon && typeof icon === "function" && /*#__PURE__*/React__default.createElement(icon, {
     className: "w-6 h-6"
+  }), icon && typeof icon === "string" && /*#__PURE__*/React__default.createElement("img", {
+    src: icon,
+    alt: "list-item-icon",
+    className: "w-6 h-6 text-sm",
+    onError: onListItemIconLoadError
   }), /*#__PURE__*/React__default.createElement("div", {
     className: classNames({
       "pl-10": icon === null
     })
   }, /*#__PURE__*/React__default.createElement(Text, {
     text: title
-  }), subTitle && /*#__PURE__*/React__default.createElement(Text, {
-    text: subTitle,
+  }), subtitle && /*#__PURE__*/React__default.createElement(Text, {
+    text: subtitle,
     type: "sm"
   })), /*#__PURE__*/React__default.createElement("div", {
     className: "flex-grow"
@@ -2604,12 +2630,14 @@ var ListItem = function ListItem(_ref) {
 };
 
 var List = function List(_ref) {
-  var items = _ref.items;
+  var items = _ref.items,
+      onAssetLoadError = _ref.onAssetLoadError;
   return /*#__PURE__*/React__default.createElement("ul", {
-    className: classNames("list-none")
+    className: classNames("list-none bg-white")
   }, items.map(function (item) {
     return /*#__PURE__*/React__default.createElement(ListItem, Object.assign({}, item, {
-      key: item.itemId
+      key: item.itemId,
+      onAssetLoadError: onAssetLoadError
     }));
   }));
 };