@luscii-healthtech/web-ui 0.6.2 → 0.7.2

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/components/Table/Table.types.d.ts

@@ -10,6 +10,7 @@ export interface TableFieldConfig<Item> {
 export declare type TableFieldContent<Item> = TableFieldText | [TableFieldAction<Item>?, TableFieldAction<Item>?];
 export interface TableFieldText {
     text: string;
+    breakAllWord?: boolean;
     tag?: {
         text: string;
         color: TagColorTheme;

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,10 @@ 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: classNames("py-4 text-left leading-5", {
+      "break-all": content.breakAllWord,
+      "break-words": !content.breakAllWord
+    }),
     text: content.text === "" ? emptyFieldContentText : content.text,
     type: "base"
   })), isTableFieldAction(content) && /*#__PURE__*/React__default.createElement("div", {
@@ -2106,8 +2114,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);
       }
     });
@@ -2571,32 +2578,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 +2633,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
     }));
   }));
 };