@luscii-healthtech/web-ui 30.0.4 → 30.1.1

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

@@ -2,7 +2,10 @@
 import type { IconKey, IconProps } from "../../Icons/types/IconProps.type";
 import type { NotificationBannerColor } from "../../NotificationBanner/NotificationBanner";
 interface ConfirmationDialogTexts {
-    message: string | string[];
+    /**
+     * You can also use the `children` prop for this.
+     */
+    message?: string | string[];
     confirmLabel: string;
     cancelLabel: string;
 }
@@ -16,6 +19,7 @@ export interface ConfirmationDialogChoice<T extends string = string> {
     };
 }
 export interface ConfirmationDialogProps {
+    children?: React.ReactNode;
     texts: ConfirmationDialogTexts;
     isOpen: boolean;
     onCancel: () => void;

package/dist/index.development.js

@@ -7,11 +7,11 @@ var isString = require('lodash/isString');
 var lodash = require('lodash');
 var core = require('@dnd-kit/core');
 var sortable = require('@dnd-kit/sortable');
+var omit = require('lodash.omit');
 var reactLazyLoadImageComponent = require('react-lazy-load-image-component');
 var utilities = require('@dnd-kit/utilities');
 var ReactTooltip = require('react-tooltip');
 var router = require('@reach/router');
-var omit = require('lodash.omit');
 var ReactModal = require('react-modal');
 var Glider = require('react-glider');
 require('glider-js/glider.min.css');
@@ -58,8 +58,8 @@ function _interopNamespace(e) {
 var React__namespace = /*#__PURE__*/_interopNamespace(React);
 var classNames__default = /*#__PURE__*/_interopDefault(classNames);
 var isString__default = /*#__PURE__*/_interopDefault(isString);
-var ReactTooltip__default = /*#__PURE__*/_interopDefault(ReactTooltip);
 var omit__default = /*#__PURE__*/_interopDefault(omit);
+var ReactTooltip__default = /*#__PURE__*/_interopDefault(ReactTooltip);
 var ReactModal__default = /*#__PURE__*/_interopDefault(ReactModal);
 var Glider__default = /*#__PURE__*/_interopDefault(Glider);
 var ReactDatePicker__default = /*#__PURE__*/_interopDefault(ReactDatePicker);
@@ -1280,6 +1280,178 @@ const DragHandle = React.forwardRef((_a, ref) => {
   );
 });
 
+const ELEVATION = {
+  surface: "none",
+  base: "0px 1px 3px rgba(0, 0, 0, 0.1), 0px 1px 2px rgba(0, 0, 0, 0.06)",
+  small: "0px 1px 2px rgba(0, 0, 0, 0.05)",
+  medium: "0px 4px 6px -1px rgba(0, 0, 0, 0.1), 0px 2px 4px -1px rgba(0, 0, 0, 0.06)",
+  large: "0px 10px 15px -3px rgba(0, 0, 0, 0.1), 0px 4px 6px -2px rgba(0, 0, 0, 0.05)",
+  extraLarge: "0px 6px 10px rgba(0, 0, 0, 0.14), 0px 1px 18px rgba(0, 0, 0, 0.12), 0px 3px 5px rgba(0, 0, 0, 0.2)",
+  drag: "0px 20px 25px -5px rgba(0, 0, 0, 0.1), 0px 10px 10px -5px rgba(0, 0, 0, 0.04)"
+};
+
+const createShadowClassName = (elevation, options) => {
+  if (!elevation || !ELEVATION[elevation]) {
+    return "";
+  }
+  const { modifier, transition } = options || {};
+  let transitionClassName = "";
+  if (transition) {
+    transitionClassName = classNames__default.default({
+      "hover:ui-transition-shadow ui-duration-300": modifier === "hover",
+      "focus:ui-transition-shadow ui-duration-300": modifier === "focus",
+      "active:ui-transition-shadow ui-duration-300": modifier === "active"
+    });
+  }
+  if (!modifier) {
+    return classNames__default.default({
+      "ui-shadow-base": elevation === "base",
+      "ui-shadow-small": elevation === "small",
+      "ui-shadow-medium": elevation === "medium",
+      "ui-shadow-large": elevation === "large",
+      "ui-shadow-surface": elevation === "surface",
+      "ui-shadow-extraLarge": elevation === "extraLarge",
+      "ui-shadow-drag": elevation === "drag"
+    }, transitionClassName);
+  }
+  if (modifier === "hover") {
+    return classNames__default.default({
+      "hover:ui-shadow-base": elevation === "base",
+      "hover:ui-shadow-small": elevation === "small",
+      "hover:ui-shadow-medium": elevation === "medium",
+      "hover:ui-shadow-large": elevation === "large",
+      "hover:ui-shadow-surface": elevation === "surface",
+      "hover:ui-shadow-extraLarge": elevation === "extraLarge",
+      "hover:ui-shadow-drag": elevation === "drag"
+    }, transitionClassName);
+  }
+  if (modifier === "focus") {
+    return classNames__default.default({
+      "focus:ui-shadow-base": elevation === "base",
+      "focus:ui-shadow-small": elevation === "small",
+      "focus:ui-shadow-medium": elevation === "medium",
+      "focus:ui-shadow-large": elevation === "large",
+      "focus:ui-shadow-surface": elevation === "surface",
+      "focus:ui-shadow-extraLarge": elevation === "extraLarge",
+      "focus:ui-shadow-drag": elevation === "drag"
+    }, transitionClassName);
+  }
+  return classNames__default.default({
+    "active:ui-shadow-base": elevation === "base",
+    "active:ui-shadow-small": elevation === "small",
+    "active:ui-shadow-medium": elevation === "medium",
+    "active:ui-shadow-large": elevation === "large",
+    "active:ui-shadow-surface": elevation === "surface",
+    "active:ui-shadow-extraLarge": elevation === "extraLarge",
+    "active:ui-shadow-drag": elevation === "drag"
+  }, transitionClassName);
+};
+
+const SIZES = {
+  /**
+   * Represents the tiny size of 4px.
+   */
+  xxxxs: "4px",
+  /**
+   * Represents a very extra extra small size of 6px.
+   */
+  xxxs: "6px",
+  /**
+   * Represents an extra extra small size of 8px.
+   */
+  xxs: "8px",
+  /**
+   * Represents an extra small size of 10px.
+   */
+  xs: "10px",
+  /**
+   * Represents a small size of 12px.
+   */
+  s: "12px",
+  /**
+   * Represents a medium size of 16px.
+   */
+  m: "16px",
+  /**
+   * Represents a large size of 24px.
+   */
+  l: "24px",
+  /**
+   * Represents an extra large size of 32px.
+   */
+  xl: "32px",
+  /**
+   * Represents an extra extra large size of 32px.
+   */
+  xxl: "32px"
+};
+
+const createRadiusClassName = (borderRadius) => {
+  if (!borderRadius || !SIZES[borderRadius]) {
+    return "";
+  }
+  return classNames__default.default({
+    "ui-radius-xxxxs": borderRadius === "xxxxs",
+    "ui-radius-xxxs": borderRadius === "xxxs",
+    "ui-radius-xxs": borderRadius === "xxs",
+    "ui-radius-xs": borderRadius === "xs",
+    "ui-radius-s": borderRadius === "s",
+    "ui-radius-m": borderRadius === "m",
+    "ui-radius-l": borderRadius === "l",
+    "ui-radius-xl": borderRadius === "xl",
+    "ui-radius-xxl": borderRadius === "xxl"
+  });
+};
+
+const spacingKeys = [
+  "p",
+  "pt",
+  "pr",
+  "pb",
+  "pl",
+  "px",
+  "py",
+  "m",
+  "mt",
+  "mr",
+  "mb",
+  "ml",
+  "mx",
+  "my"
+];
+const createSpacingClassNames = (keys, spacingProps) => {
+  return keys.filter((key) => spacingProps[key]).map((key) => `ui-${key}-${spacingProps[key]}`).join(" ");
+};
+const Box = (props) => {
+  const { as: Element = "div", borderRadius, className, elevation, width } = props, attributes = __rest(props, ["as", "borderRadius", "className", "elevation", "width"]);
+  const spacingClasses = createSpacingClassNames(spacingKeys, props);
+  const shadowClassName = createShadowClassName(elevation);
+  const borderRadiusClassName = createRadiusClassName(borderRadius);
+  const attributesWithoutSpacingKeys = omit__default.default(attributes, spacingKeys);
+  return React__namespace.default.createElement(Element, Object.assign({ className: classNames__default.default(spacingClasses, {
+    "ui-bg-slate-100": props.backgroundColor === "base",
+    "ui-bg-blue-50": props.backgroundColor === "blue",
+    "ui-bg-red-50": props.backgroundColor === "red",
+    " ui-bg-green-50": props.backgroundColor === "green",
+    " ui-bg-amber-50": props.backgroundColor === "amber",
+    [`ui-w-${width}`]: width && width !== "full",
+    "ui-w-full": width === "full"
+  }, className, shadowClassName, borderRadiusClassName) }, attributesWithoutSpacingKeys));
+};
+
+const Stack = (props) => {
+  const { children, gap, align = "start", justify = "normal", axis = "y", className, reverse, wrap = false } = props, attributes = __rest(props, ["children", "gap", "align", "justify", "axis", "className", "reverse", "wrap"]);
+  const stackClasses = classNames__default.default(`ui-flex`, {
+    "ui-flex-row": axis === "x",
+    "ui-flex-col": axis === "y",
+    "ui-flex-row-reverse": axis === "x" && reverse,
+    "ui-flex-col-reverse": axis === "y" && reverse,
+    "ui-flex-wrap": wrap,
+    [`ui-gap-${gap}`]: gap
+  }, `ui-items-${align} ui-justify-${justify}`);
+  return React__namespace.default.createElement(Box, Object.assign({ className: classNames__default.default(stackClasses, className) }, attributes), children);
+};
+
 var img$i = "data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 18 18' fill='none'%3e%3cpath d='M18 16V2C18 0.9 17.1 0 16 0H2C0.9 0 0 0.9 0 2V16C0 17.1 0.9 18 2 18H16C17.1 18 18 17.1 18 16ZM5.9 10.98L8 13.51L11.1 9.52C11.3 9.26 11.7 9.26 11.9 9.53L15.41 14.21C15.66 14.54 15.42 15.01 15.01 15.01H3.02C2.6 15.01 2.37 14.53 2.63 14.2L5.12 11C5.31 10.74 5.69 10.73 5.9 10.98Z' fill='%23D1D5DB'/%3e%3c/svg%3e";
 
 const Image$1 = (_a) => {
@@ -1352,7 +1524,7 @@ const BaseListItem = React__namespace.default.forwardRef(({ itemId, title, toolt
       subtitle && (typeof subtitle === "string" ? React__namespace.default.createElement(Text, { variant: "sm", color: "slate-500" }, subtitle) : subtitle)
     ),
     React__namespace.default.createElement("div", { className: "ui-flex-grow" }),
-    React__namespace.default.createElement("div", { className: classNames__default.default({
+    React__namespace.default.createElement(Stack, { axis: "x", gap: "m", align: "center", className: classNames__default.default({
       "ui-opacity-0": onlyShowAccessoriesOnHover,
       "group-hover:ui-opacity-100": onlyShowAccessoriesOnHover
     }) }, accessories)
@@ -2075,178 +2247,6 @@ const CenteredHero = ({ title, text, image, buttons = [], background = "slate-50
   );
 };
 
-const ELEVATION = {
-  surface: "none",
-  base: "0px 1px 3px rgba(0, 0, 0, 0.1), 0px 1px 2px rgba(0, 0, 0, 0.06)",
-  small: "0px 1px 2px rgba(0, 0, 0, 0.05)",
-  medium: "0px 4px 6px -1px rgba(0, 0, 0, 0.1), 0px 2px 4px -1px rgba(0, 0, 0, 0.06)",
-  large: "0px 10px 15px -3px rgba(0, 0, 0, 0.1), 0px 4px 6px -2px rgba(0, 0, 0, 0.05)",
-  extraLarge: "0px 6px 10px rgba(0, 0, 0, 0.14), 0px 1px 18px rgba(0, 0, 0, 0.12), 0px 3px 5px rgba(0, 0, 0, 0.2)",
-  drag: "0px 20px 25px -5px rgba(0, 0, 0, 0.1), 0px 10px 10px -5px rgba(0, 0, 0, 0.04)"
-};
-
-const createShadowClassName = (elevation, options) => {
-  if (!elevation || !ELEVATION[elevation]) {
-    return "";
-  }
-  const { modifier, transition } = options || {};
-  let transitionClassName = "";
-  if (transition) {
-    transitionClassName = classNames__default.default({
-      "hover:ui-transition-shadow ui-duration-300": modifier === "hover",
-      "focus:ui-transition-shadow ui-duration-300": modifier === "focus",
-      "active:ui-transition-shadow ui-duration-300": modifier === "active"
-    });
-  }
-  if (!modifier) {
-    return classNames__default.default({
-      "ui-shadow-base": elevation === "base",
-      "ui-shadow-small": elevation === "small",
-      "ui-shadow-medium": elevation === "medium",
-      "ui-shadow-large": elevation === "large",
-      "ui-shadow-surface": elevation === "surface",
-      "ui-shadow-extraLarge": elevation === "extraLarge",
-      "ui-shadow-drag": elevation === "drag"
-    }, transitionClassName);
-  }
-  if (modifier === "hover") {
-    return classNames__default.default({
-      "hover:ui-shadow-base": elevation === "base",
-      "hover:ui-shadow-small": elevation === "small",
-      "hover:ui-shadow-medium": elevation === "medium",
-      "hover:ui-shadow-large": elevation === "large",
-      "hover:ui-shadow-surface": elevation === "surface",
-      "hover:ui-shadow-extraLarge": elevation === "extraLarge",
-      "hover:ui-shadow-drag": elevation === "drag"
-    }, transitionClassName);
-  }
-  if (modifier === "focus") {
-    return classNames__default.default({
-      "focus:ui-shadow-base": elevation === "base",
-      "focus:ui-shadow-small": elevation === "small",
-      "focus:ui-shadow-medium": elevation === "medium",
-      "focus:ui-shadow-large": elevation === "large",
-      "focus:ui-shadow-surface": elevation === "surface",
-      "focus:ui-shadow-extraLarge": elevation === "extraLarge",
-      "focus:ui-shadow-drag": elevation === "drag"
-    }, transitionClassName);
-  }
-  return classNames__default.default({
-    "active:ui-shadow-base": elevation === "base",
-    "active:ui-shadow-small": elevation === "small",
-    "active:ui-shadow-medium": elevation === "medium",
-    "active:ui-shadow-large": elevation === "large",
-    "active:ui-shadow-surface": elevation === "surface",
-    "active:ui-shadow-extraLarge": elevation === "extraLarge",
-    "active:ui-shadow-drag": elevation === "drag"
-  }, transitionClassName);
-};
-
-const SIZES = {
-  /**
-   * Represents the tiny size of 4px.
-   */
-  xxxxs: "4px",
-  /**
-   * Represents a very extra extra small size of 6px.
-   */
-  xxxs: "6px",
-  /**
-   * Represents an extra extra small size of 8px.
-   */
-  xxs: "8px",
-  /**
-   * Represents an extra small size of 10px.
-   */
-  xs: "10px",
-  /**
-   * Represents a small size of 12px.
-   */
-  s: "12px",
-  /**
-   * Represents a medium size of 16px.
-   */
-  m: "16px",
-  /**
-   * Represents a large size of 24px.
-   */
-  l: "24px",
-  /**
-   * Represents an extra large size of 32px.
-   */
-  xl: "32px",
-  /**
-   * Represents an extra extra large size of 32px.
-   */
-  xxl: "32px"
-};
-
-const createRadiusClassName = (borderRadius) => {
-  if (!borderRadius || !SIZES[borderRadius]) {
-    return "";
-  }
-  return classNames__default.default({
-    "ui-radius-xxxxs": borderRadius === "xxxxs",
-    "ui-radius-xxxs": borderRadius === "xxxs",
-    "ui-radius-xxs": borderRadius === "xxs",
-    "ui-radius-xs": borderRadius === "xs",
-    "ui-radius-s": borderRadius === "s",
-    "ui-radius-m": borderRadius === "m",
-    "ui-radius-l": borderRadius === "l",
-    "ui-radius-xl": borderRadius === "xl",
-    "ui-radius-xxl": borderRadius === "xxl"
-  });
-};
-
-const spacingKeys = [
-  "p",
-  "pt",
-  "pr",
-  "pb",
-  "pl",
-  "px",
-  "py",
-  "m",
-  "mt",
-  "mr",
-  "mb",
-  "ml",
-  "mx",
-  "my"
-];
-const createSpacingClassNames = (keys, spacingProps) => {
-  return keys.filter((key) => spacingProps[key]).map((key) => `ui-${key}-${spacingProps[key]}`).join(" ");
-};
-const Box = (props) => {
-  const { as: Element = "div", borderRadius, className, elevation, width } = props, attributes = __rest(props, ["as", "borderRadius", "className", "elevation", "width"]);
-  const spacingClasses = createSpacingClassNames(spacingKeys, props);
-  const shadowClassName = createShadowClassName(elevation);
-  const borderRadiusClassName = createRadiusClassName(borderRadius);
-  const attributesWithoutSpacingKeys = omit__default.default(attributes, spacingKeys);
-  return React__namespace.default.createElement(Element, Object.assign({ className: classNames__default.default(spacingClasses, {
-    "ui-bg-slate-100": props.backgroundColor === "base",
-    "ui-bg-blue-50": props.backgroundColor === "blue",
-    "ui-bg-red-50": props.backgroundColor === "red",
-    " ui-bg-green-50": props.backgroundColor === "green",
-    " ui-bg-amber-50": props.backgroundColor === "amber",
-    [`ui-w-${width}`]: width && width !== "full",
-    "ui-w-full": width === "full"
-  }, className, shadowClassName, borderRadiusClassName) }, attributesWithoutSpacingKeys));
-};
-
-const Stack = (props) => {
-  const { children, gap, align = "start", justify = "normal", axis = "y", className, reverse, wrap = false } = props, attributes = __rest(props, ["children", "gap", "align", "justify", "axis", "className", "reverse", "wrap"]);
-  const stackClasses = classNames__default.default(`ui-flex`, {
-    "ui-flex-row": axis === "x",
-    "ui-flex-col": axis === "y",
-    "ui-flex-row-reverse": axis === "x" && reverse,
-    "ui-flex-col-reverse": axis === "y" && reverse,
-    "ui-flex-wrap": wrap,
-    [`ui-gap-${gap}`]: gap
-  }, `ui-items-${align} ui-justify-${justify}`);
-  return React__namespace.default.createElement(Box, Object.assign({ className: classNames__default.default(stackClasses, className) }, attributes), children);
-};
-
 const AccordionListActions = (props) => {
   return React__namespace.default.createElement("div", { className: "ui-flex ui-flex-row ui-flex-wrap ui-justify-start ui-gap-3" }, props.children);
 };
@@ -2929,7 +2929,8 @@ const ConfirmationDialogMessage = (props) => {
 
 const ConfirmationDialog = (_a) => {
   var { dataTestId = "confirmation-dialog-modal" } = _a, props = __rest(_a, ["dataTestId"]);
-  const { choices } = props;
+  const { children, choices } = props;
+  const { message } = props.texts;
   const [selectedChoice, setSelectedChoice] = React.useState(choices === null || choices === void 0 ? void 0 : choices.options.find((choice) => choice.value === choices.defaultChoice));
   const handleOnCloseClick = () => {
     if (!props.isProcessing) {
@@ -2964,7 +2965,8 @@ const ConfirmationDialog = (_a) => {
       "div",
       { className: "ui-min-h-13 ui-space-y-4" },
       React__namespace.default.createElement(ConfirmationDialogTitle, { title: props.withTitle }),
-      React__namespace.default.createElement(ConfirmationDialogMessage, { message: props.texts.message }),
+      children,
+      message && React__namespace.default.createElement(ConfirmationDialogMessage, { message }),
       React__namespace.default.createElement(ConfirmationDialogChoices, { choices: props.choices, onChoiceChangeCallback: onChoiceChange, selectedChoice })
     )
   );