@luscii-healthtech/web-ui 2.55.0 → 2.56.0

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

@@ -4,15 +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,7 +2538,7 @@ 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,
@@ -2574,13 +2574,15 @@ 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,
       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,
@@ -2597,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({
@@ -2607,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) {