@luscii-healthtech/web-ui 2.59.0 → 2.60.0

package/dist/components/Button/Button.d.ts

@@ -1,4 +1,8 @@
 import { BUTTON_ROLES, ButtonProps } from "./Button.types";
+/**
+ * TODO: We have to probably use [ButtonV2.tsx](../../components/ButtonV2/ButtonV2.tsx)
+ * to replace this component at some point.
+ */
 declare function Button(props: ButtonProps): JSX.Element;
 export default Button;
 export { BUTTON_ROLES };

package/dist/components/Page/CRUDPage.types.d.ts

@@ -15,10 +15,12 @@ declare type CRUDPagePropsWithoutHeaderOrTitle = {
     className?: string;
     isLoading?: boolean;
     isSubmitting?: boolean;
-    stepTitles?: StepsProps["orderedStepTitles"];
-    currentStep?: StepsProps["currentStep"];
-    localization?: StepsProps["localization"];
     children?: React.ReactNode;
+    steps?: {
+        titles: StepsProps["orderedStepTitles"];
+        currentStep: StepsProps["currentStep"];
+        localization: StepsProps["localization"];
+    };
 };
 export declare type CRUDPageProps = (CRUDPagePropsWithoutHeaderOrTitle & {
     title: CRUDPageTitle;

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

@@ -12,6 +12,7 @@ var lodash = require('lodash');
 var core = require('@dnd-kit/core');
 var sortable = require('@dnd-kit/sortable');
 var utilities = require('@dnd-kit/utilities');
+var ReactTooltip = _interopDefault(require('react-tooltip'));
 var ReactModal = _interopDefault(require('react-modal'));
 var PropTypes = _interopDefault(require('prop-types'));
 var Glider = _interopDefault(require('react-glider'));
@@ -3061,7 +3062,7 @@ var Spinner = function Spinner(props) {
   }));
 };
 
-var _excluded$b = ["onClick", "text", "textColor", "textHoverColor", "icon", "isDisabled", "isPending", "className"];
+var _excluded$b = ["onClick", "text", "textColor", "textHoverColor", "icon", "isDisabled", "isPending", "className", "title"];
 var ButtonV2 = /*#__PURE__*/React__default.forwardRef(function (_ref, innerRef) {
   var onClick = _ref.onClick,
       text = _ref.text,
@@ -3071,8 +3072,12 @@ var ButtonV2 = /*#__PURE__*/React__default.forwardRef(function (_ref, innerRef)
       isDisabled = _ref.isDisabled,
       isPending = _ref.isPending,
       className = _ref.className,
+      title = _ref.title,
       otherAttributes = _objectWithoutPropertiesLoose(_ref, _excluded$b);
 
+  var generatedId = React__default.useId();
+  var buttonTooltipId = otherAttributes.id ? "button-tooltip-id-" + otherAttributes.id : "button-tooltip-id-" + generatedId;
+
   function handleClick(event) {
     event.stopPropagation();
     onClick == null ? void 0 : onClick(event);
@@ -3092,7 +3097,11 @@ var ButtonV2 = /*#__PURE__*/React__default.forwardRef(function (_ref, innerRef)
     "pointer-events-none": isPending
   }, className);
   var textColorClass = allowedColors[textColor != null ? textColor : "base"];
-  return /*#__PURE__*/React__default.createElement("button", _extends({
+  var tooltipAttrs = title ? {
+    "data-tip": true,
+    "data-for": buttonTooltipId
+  } : {};
+  var buttonComponent = /*#__PURE__*/React__default.createElement("button", _extends({
     ref: innerRef
   }, otherAttributes, {
     className: buttonClassName,
@@ -3100,7 +3109,7 @@ var ButtonV2 = /*#__PURE__*/React__default.forwardRef(function (_ref, innerRef)
     onClick: handleClick,
     disabled: isDisabled,
     "aria-disabled": isDisabled
-  }), icon && !isPending && /*#__PURE__*/React__default.createElement(IconComponentOrKey, {
+  }, tooltipAttrs), icon && !isPending && /*#__PURE__*/React__default.createElement(IconComponentOrKey, {
     name: icon,
     className: "w-6 h-6 " + textColorClass
   }), isPending && /*#__PURE__*/React__default.createElement("span", {
@@ -3124,6 +3133,15 @@ var ButtonV2 = /*#__PURE__*/React__default.forwardRef(function (_ref, innerRef)
     hoverColor: textHoverColor,
     hoverInGroup: true
   }));
+
+  if (title) {
+    return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(ReactTooltip, {
+      effect: "solid",
+      id: buttonTooltipId
+    }, title), buttonComponent);
+  }
+
+  return buttonComponent;
 });
 
 var SecondaryButton = /*#__PURE__*/React__default.forwardRef(function (props, innerRef) {
@@ -3632,6 +3650,11 @@ var BUTTON_ROLES = {
 
 var _excluded$e = ["text", "role", "type", "title", "link", "isPending", "isDisabled", "onClick", "className", "iconName", "hasIcon", "dynamicIcon"];
 
+/**
+ * TODO: We have to probably use [ButtonV2.tsx](../../components/ButtonV2/ButtonV2.tsx)
+ * to replace this component at some point.
+ */
+
 function Button(props) {
   var _props$text = props.text,
       text = _props$text === void 0 ? "" : _props$text,
@@ -3657,6 +3680,8 @@ function Button(props) {
       dynamicIcon = props.dynamicIcon,
       otherAttributes = _objectWithoutPropertiesLoose(props, _excluded$e);
 
+  var generatedId = React__default.useId();
+  var buttonTooltipId = otherAttributes.id ? "button-tooltip-id-" + otherAttributes.id : "button-tooltip-id-" + generatedId;
   var hasAddIcon = className.includes("add-button");
   var hasEditIcon = className.includes("edit-button");
   var hasDeleteIcon = className.includes("delete-button");
@@ -3735,7 +3760,11 @@ function Button(props) {
     hidden: !text,
     "ml-3": hasIcon
   });
-  return /*#__PURE__*/React__default.createElement("button", _extends({}, otherAttributes, {
+  var tooltipAttrs = title ? {
+    "data-tip": true,
+    "data-for": buttonTooltipId
+  } : {};
+  var buttonComponent = /*#__PURE__*/React__default.createElement("button", _extends({}, otherAttributes, {
     "aria-disabled": isButtonDisabled,
     disabled: isButtonDisabled,
     className: containerClassName,
@@ -3743,7 +3772,7 @@ function Button(props) {
     type: type,
     title: title,
     "data-role": role
-  }), hasAddIcon && /*#__PURE__*/React__default.createElement(AddIcon, {
+  }, tooltipAttrs), hasAddIcon && /*#__PURE__*/React__default.createElement(AddIcon, {
     className: "w-5 h-5"
   }), hasEditIcon && /*#__PURE__*/React__default.createElement(EditIcon, {
     className: "w-5 h-5"
@@ -3775,6 +3804,15 @@ function Button(props) {
   })), /*#__PURE__*/React__default.createElement("span", {
     className: buttonTextClasses
   }, text));
+
+  if (title) {
+    return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(ReactTooltip, {
+      effect: "solid",
+      id: buttonTooltipId
+    }, title), buttonComponent);
+  }
+
+  return buttonComponent;
 }
 
 var css_248z$8 = ".entity-preview-dots.glider-dots {\n  padding-top: 1rem;\n}\n\n.entity-preview-dots.glider-dots .glider-dot {\n  height: 0.5rem;\n  width: 0.5rem;\n  margin: 0.25rem;\n  --bg-opacity: 1;\n  background-color: #F2FAFD;\n  background-color: rgba(242, 250, 253, var(--bg-opacity));\n}\n\n.entity-preview-dots.glider-dots .glider-dot:focus {\n  outline: 4px solid rgba(0, 159, 227, 0.3);\n  outline-offset: 0;\n}\n\n.entity-preview-dots.glider-dots .glider-dot.active, .entity-preview-dots.glider-dots .glider-dot:focus {\n  --bg-opacity: 1;\n  background-color: #0074DD;\n  background-color: rgba(0, 116, 221, var(--bg-opacity));\n}";
@@ -6656,20 +6694,17 @@ var PageHeader = function PageHeader(_ref) {
 };
 
 var CRUDPage = function CRUDPage(_ref) {
-  var stepTitles = _ref.stepTitles,
-      _ref$currentStep = _ref.currentStep,
-      currentStep = _ref$currentStep === void 0 ? 1 : _ref$currentStep,
-      submitButtonProps = _ref.submitButtonProps,
+  var submitButtonProps = _ref.submitButtonProps,
       cancelButtonProps = _ref.cancelButtonProps,
       className = _ref.className,
       children = _ref.children,
       isLoading = _ref.isLoading,
       isSubmitting = _ref.isSubmitting,
-      localization = _ref.localization,
       _ref$dataTestId = _ref.dataTestId,
       dataTestId = _ref$dataTestId === void 0 ? "page" : _ref$dataTestId,
       title = _ref.title,
-      header = _ref.header;
+      header = _ref.header,
+      steps = _ref.steps;
   var mergedClasses = classNames("cweb-crud-page", "w-full mb-0 mx-auto pb-8", className);
   var submitButton = submitButtonProps && /*#__PURE__*/React__default.createElement(PrimaryButton, _extends({
     "data-test-id": "submit-button",
@@ -6722,11 +6757,11 @@ var CRUDPage = function CRUDPage(_ref) {
     className: "flex flex-row justify-start align-center"
   }, pageHeader), /*#__PURE__*/React__default.createElement("div", {
     className: classNames("cweb-crud-page-form-container", "max-w-3xl mx-auto bg-white rounded lg p-6 mt-4")
-  }, stepTitles && stepTitles.length > 0 && localization && /*#__PURE__*/React__default.createElement(Steps, {
-    orderedStepTitles: stepTitles,
-    currentStep: currentStep,
+  }, steps && /*#__PURE__*/React__default.createElement(Steps, {
     className: "mb-4",
-    localization: localization
+    orderedStepTitles: steps.titles,
+    currentStep: steps.currentStep,
+    localization: steps.localization
   }), children, /*#__PURE__*/React__default.createElement(Line, {
     left: [cancelButton],
     right: [submitButton],