@luscii-healthtech/web-ui 2.54.0 → 2.56.0

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

@@ -4,14 +4,17 @@ export declare type DropzonePresentationProps = {
     message?: string;
     icon?: IconKey;
     isHighlighted?: boolean;
+    isClickable?: boolean;
     ref?: Ref<HTMLDivElement>;
     children?: ReactNode;
     className?: string;
     dataTestId?: string;
+    horizontal?: boolean;
 };
-export declare type DropzoneProps = Omit<DropzonePresentationProps, "isHighlighted"> & {
+export declare type DropzoneProps = Omit<DropzonePresentationProps, "isHighlighted" | "isClickable"> & {
     draggableIdentifier: string | number;
     disabled?: boolean;
     data?: Record<string, unknown>;
     dataTestId?: string;
+    onClick?: React.HTMLAttributes<HTMLButtonElement>["onClick"];
 };

package/dist/web-ui-tailwind.css

@@ -837,6 +837,12 @@ video {
   background-color: rgba(242, 250, 253, var(--bg-opacity));
 }
 
+.hover\:bg-blue-100:hover {
+  --bg-opacity: 1;
+  background-color: #DFF6FF;
+  background-color: rgba(223, 246, 255, var(--bg-opacity));
+}
+
 .hover\:bg-blue-900:hover {
   --bg-opacity: 1;
   background-color: #045BAA;

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

@@ -2538,22 +2538,29 @@ var DraggableBaseList = function DraggableBaseList(_ref) {
   }));
 };
 
-var _excluded$4 = ["draggableIdentifier", "disabled", "data", "dataTestId"];
+var _excluded$4 = ["draggableIdentifier", "disabled", "data", "dataTestId", "onClick"];
 
 var DefaultState = function DefaultState(_ref) {
   var icon = _ref.icon,
-      message = _ref.message;
+      message = _ref.message,
+      _ref$horizontal = _ref.horizontal,
+      horizontal = _ref$horizontal === void 0 ? false : _ref$horizontal;
 
   if (!icon && !message) {
     return null;
   }
 
+  var className = classNames("p-4 flex items-center", {
+    "flex-col justify-center": !horizontal,
+    "flex-row w-full ": horizontal
+  });
   return /*#__PURE__*/React__default.createElement("div", {
-    className: "p-4 flex flex-col items-center justify-center"
+    className: className
   }, icon && /*#__PURE__*/React__default.createElement(Icon, {
     name: icon,
     className: classNames("text-blue-800", {
-      "mb-2": message
+      "mb-2": message && !horizontal,
+      "mr-2": horizontal
     })
   }), message && /*#__PURE__*/React__default.createElement(Text, {
     type: "base",
@@ -2567,20 +2574,24 @@ var DropzonePresentation = /*#__PURE__*/React.forwardRef(function (_ref2, ref) {
   var message = _ref2.message,
       icon = _ref2.icon,
       isHighlighted = _ref2.isHighlighted,
+      isClickable = _ref2.isClickable,
       className = _ref2.className,
       dataTestId = _ref2.dataTestId,
-      children = _ref2.children;
+      children = _ref2.children,
+      horizontal = _ref2.horizontal;
   var classes = classNames("bg-blue-50 border-2 border-blue-800 rounded flex items-center justify-center", {
     "border-dashed": !isHighlighted,
-    "border-solid": isHighlighted
+    "border-solid": isHighlighted,
+    "hover:bg-blue-100 transition-colors ease-in-out duration-300": isClickable
   }, className);
   return /*#__PURE__*/React__default.createElement("div", {
     className: classes,
     ref: ref,
     "data-test-id": dataTestId
-  }, children ? children : /*#__PURE__*/React__default.createElement(DefaultState, {
+  }, children || /*#__PURE__*/React__default.createElement(DefaultState, {
     icon: icon,
-    message: message
+    message: message,
+    horizontal: horizontal
   }));
 });
 var Dropzone = function Dropzone(_ref3) {
@@ -2588,6 +2599,7 @@ var Dropzone = function Dropzone(_ref3) {
       disabled = _ref3.disabled,
       data = _ref3.data,
       dataTestId = _ref3.dataTestId,
+      onClick = _ref3.onClick,
       props = _objectWithoutPropertiesLoose(_ref3, _excluded$4);
 
   var _useDroppable = core.useDroppable({
@@ -2598,12 +2610,23 @@ var Dropzone = function Dropzone(_ref3) {
       setNodeRef = _useDroppable.setNodeRef,
       isOver = _useDroppable.isOver;
 
-  return /*#__PURE__*/React__default.createElement(DropzonePresentation, _extends({
+  var presentation = /*#__PURE__*/React__default.createElement(DropzonePresentation, _extends({
     ref: setNodeRef,
-    isHighlighted: isOver
+    isHighlighted: isOver,
+    isClickable: onClick && !disabled
   }, props, {
     dataTestId: dataTestId != null ? dataTestId : "dropzone-" + identifier
   }));
+
+  if (onClick) {
+    return /*#__PURE__*/React__default.createElement("button", {
+      onClick: onClick,
+      disabled: disabled,
+      className: "block w-full"
+    }, presentation);
+  }
+
+  return presentation;
 };
 
 var SortableBaseListItem = function SortableBaseListItem(props) {