@luscii-healthtech/web-ui 23.2.0 → 23.2.2

package/dist/components/Icons/ExternalLinkIcon.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import { IconProps } from "./types/IconProps.type";
+declare const _default: (props: IconProps) => JSX.Element;
+export default _default;

package/dist/components/Icons/index.d.ts

@@ -27,6 +27,7 @@ export { default as EmailIcon } from "./EmailIcon";
 export { default as EmptyIcon } from "./EmptyIcon";
 export { default as ExclamationMarkIcon } from "./ExclamationMarkIcon";
 export { default as ExportIcon } from "./ExportIcon";
+export { default as ExternalLinkIcon } from "./ExternalLinkIcon";
 export { default as EyeClosedIcon } from "./EyeClosedIcon";
 export { default as EyeOpenIcon } from "./EyeOpenIcon";
 export { default as FilterIcon } from "./FilterIcon";

package/dist/components/Input/StyledInput.d.ts

@@ -6,7 +6,7 @@ export declare const StyledInput: React.ForwardRefExoticComponent<Omit<Omit<Reac
     type?: AllowedTextInputTypes | undefined;
     suffix?: string | undefined;
     prefix?: string | undefined;
-    icon?: "BellIcon" | "BluetoothIcon" | "BrushIcon" | "CalendarDayIcon" | "CalendarMonthIcon" | "CalendarRepeatIcon" | "ChartBarsIcon" | "ChartLineAndBarsIcon" | "ChatBubbleIcon" | "ChatBubbleWithTextIcon" | "CheckIcon" | "ChevronDoubleIcon" | "ChevronDownIcon" | "ChevronLeftIcon" | "ChevronRightIcon" | "ClockIcon" | "CogwheelIcon" | "CopyToClipboardIcon" | "CrossIcon" | "CrossInCircleIcon" | "CrossInFilledCircleIcon" | "DatabaseIcon" | "DragIndicatorIcon" | "EarthIcon" | "EmailIcon" | "EmptyIcon" | "ExclamationMarkIcon" | "ExportIcon" | "EyeClosedIcon" | "EyeOpenIcon" | "FilterIcon" | "FireIcon" | "FirstAidKitIcon" | "FlagIcon" | "ForwardIcon" | "GroupIcon" | "GroupOfThreeIcon" | "HamburgerIcon" | "HandshakeIcon" | "HeartIcon" | "HomeIcon" | "ImageIcon" | "InfoIcon" | "LifebuoyIcon" | "LightBulbIcon" | "LinkIcon" | "LockIcon" | "LogInIcon" | "LogOutIcon" | "MessageWithArrowIcon" | "MoreIcon" | "MouseIcon" | "NoteIcon" | "PageViewIcon" | "PatientIcon" | "PencilIcon" | "PhoneIcon" | "PieChartIcon" | "PinIcon" | "PlusIcon" | "PrinterIcon" | "RobotIcon" | "RocketIcon" | "SearchIcon" | "ShareIcon" | "SmallCircleIcon" | "SmallDiamondIcon" | "SmallSquareIcon" | "StarIcon" | "TrashBinIcon" | "TreeIcon" | "AddIcon" | "AlertsIcon" | "ChartIcon" | "ChatBoxIcon" | "DeleteIcon" | "DragIcon" | "EditIcon" | "EyeIcon" | "EyeIconSlashed" | "GearIcon" | "MessagesIcon" | "NotesIcon" | "PrintIcon" | "SpaceRocketIcon" | "SettingsIcon" | "RightArrowIcon" | "DownArrowIcon" | "LeftArrowIcon" | "WarningIcon" | "ChartLineColoredIcon" | "GearColoredIcon" | "GroupColoredIcon" | "StatusColoredIcon" | React.FC<IconProps> | undefined;
+    icon?: "BellIcon" | "BluetoothIcon" | "BrushIcon" | "CalendarDayIcon" | "CalendarMonthIcon" | "CalendarRepeatIcon" | "ChartBarsIcon" | "ChartLineAndBarsIcon" | "ChatBubbleIcon" | "ChatBubbleWithTextIcon" | "CheckIcon" | "ChevronDoubleIcon" | "ChevronDownIcon" | "ChevronLeftIcon" | "ChevronRightIcon" | "ClockIcon" | "CogwheelIcon" | "CopyToClipboardIcon" | "CrossIcon" | "CrossInCircleIcon" | "CrossInFilledCircleIcon" | "DatabaseIcon" | "DragIndicatorIcon" | "EarthIcon" | "EmailIcon" | "EmptyIcon" | "ExclamationMarkIcon" | "ExportIcon" | "ExternalLinkIcon" | "EyeClosedIcon" | "EyeOpenIcon" | "FilterIcon" | "FireIcon" | "FirstAidKitIcon" | "FlagIcon" | "ForwardIcon" | "GroupIcon" | "GroupOfThreeIcon" | "HamburgerIcon" | "HandshakeIcon" | "HeartIcon" | "HomeIcon" | "ImageIcon" | "InfoIcon" | "LifebuoyIcon" | "LightBulbIcon" | "LinkIcon" | "LockIcon" | "LogInIcon" | "LogOutIcon" | "MessageWithArrowIcon" | "MoreIcon" | "MouseIcon" | "NoteIcon" | "PageViewIcon" | "PatientIcon" | "PencilIcon" | "PhoneIcon" | "PieChartIcon" | "PinIcon" | "PlusIcon" | "PrinterIcon" | "RobotIcon" | "RocketIcon" | "SearchIcon" | "ShareIcon" | "SmallCircleIcon" | "SmallDiamondIcon" | "SmallSquareIcon" | "StarIcon" | "TrashBinIcon" | "TreeIcon" | "AddIcon" | "AlertsIcon" | "ChartIcon" | "ChatBoxIcon" | "DeleteIcon" | "DragIcon" | "EditIcon" | "EyeIcon" | "EyeIconSlashed" | "GearIcon" | "MessagesIcon" | "NotesIcon" | "PrintIcon" | "SpaceRocketIcon" | "SettingsIcon" | "RightArrowIcon" | "DownArrowIcon" | "LeftArrowIcon" | "WarningIcon" | "ChartLineColoredIcon" | "GearColoredIcon" | "GroupColoredIcon" | "StatusColoredIcon" | React.FC<IconProps> | undefined;
     width?: FormFieldWidth | undefined;
     isError?: boolean | undefined;
     isClearIconVisible?: boolean | undefined;

package/dist/index.development.js

@@ -24,12 +24,11 @@ var de = require('date-fns/locale/de');
 var fr = require('date-fns/locale/fr');
 var pt = require('date-fns/locale/pt');
 require('react-datepicker-v2/dist/react-datepicker.min.css');
-var ClipboardJS = require('clipboard');
+var omit = require('lodash.omit');
 var ReactSelect = require('react-select');
 var groupBy = require('lodash/groupBy');
 var debounce = require('lodash.debounce');
 var reactLazyLoadImageComponent = require('react-lazy-load-image-component');
-var omit = require('lodash.omit');
 var ReactQuill = require('react-quill');
 require('react-quill/dist/quill.snow.css');
 var react = require('@headlessui/react');
@@ -66,11 +65,10 @@ var ReactDatePicker__default = /*#__PURE__*/_interopDefault(ReactDatePicker);
 var PropTypes__default = /*#__PURE__*/_interopDefault(PropTypes);
 var moment__default = /*#__PURE__*/_interopDefault(moment);
 var ReactDatePicker__default$1 = /*#__PURE__*/_interopDefault(ReactDatePicker$1);
-var ClipboardJS__default = /*#__PURE__*/_interopDefault(ClipboardJS);
+var omit__default = /*#__PURE__*/_interopDefault(omit);
 var ReactSelect__default = /*#__PURE__*/_interopDefault(ReactSelect);
 var groupBy__default = /*#__PURE__*/_interopDefault(groupBy);
 var debounce__default = /*#__PURE__*/_interopDefault(debounce);
-var omit__default = /*#__PURE__*/_interopDefault(omit);
 var ReactQuill__default = /*#__PURE__*/_interopDefault(ReactQuill);
 var ToggleGroup__namespace = /*#__PURE__*/_interopNamespace(ToggleGroup);
 
@@ -394,6 +392,14 @@ const SvgExportIcon = (props) => React__namespace.default.createElement(
 );
 var ExportIcon = IconWrapper(SvgExportIcon);
 
+const SvgExternalLinkIcon = (props) => React__namespace.default.createElement(
+  "svg",
+  Object.assign({ xmlns: "http://www.w3.org/2000/svg", width: 24, height: 24, fill: "none", viewBox: "0 0 24 24" }, props),
+  React__namespace.default.createElement("path", { stroke: "currentColor", strokeLinecap: "round", strokeWidth: 2, d: "M10.563 6H6a2 2 0 0 0-2 2v11a2 2 0 0 0 2 2h11a2 2 0 0 0 2-2v-4.563" }),
+  React__namespace.default.createElement("path", { stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M9 16 20 5m0 0h-5m5 0v5" })
+);
+var ExternalLinkIcon = IconWrapper(SvgExternalLinkIcon);
+
 const SvgEyeClosedIcon = (props) => React__namespace.default.createElement(
   "svg",
   Object.assign({ xmlns: "http://www.w3.org/2000/svg", width: 24, height: 24, fill: "none", viewBox: "0 0 24 24" }, props),
@@ -737,6 +743,7 @@ var Icons = /*#__PURE__*/Object.freeze({
     EmptyIcon: EmptyIcon,
     ExclamationMarkIcon: ExclamationMarkIcon,
     ExportIcon: ExportIcon,
+    ExternalLinkIcon: ExternalLinkIcon,
     EyeClosedIcon: EyeClosedIcon,
     EyeIcon: EyeOpenIcon,
     EyeIconSlashed: EyeClosedIcon,
@@ -3193,51 +3200,87 @@ Dropdown.propTypes = {
   wider: PropTypes__default.default.bool
 };
 
+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", className, elevation, width } = props, attributes = __rest(props, ["as", "className", "elevation", "width"]);
+  const spacingClasses = createSpacingClassNames(spacingKeys, props);
+  const attributesWithoutSpacingKeys = omit__default.default(attributes, spacingKeys);
+  return React__namespace.default.createElement(Element, Object.assign({ className: classNames__default.default(spacingClasses, {
+    [`ui-shadow-${elevation}`]: elevation,
+    "ui-w-full": width === "full"
+  }, className) }, attributesWithoutSpacingKeys));
+};
+
+const Stack = (props) => {
+  const { children, gap, align = "start", justify = "normal", axis = "y", className, reverse } = props, attributes = __rest(props, ["children", "gap", "align", "justify", "axis", "className", "reverse"]);
+  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-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 InfoField = (props) => {
-  React.useEffect(() => {
-    const clipboard = new ClipboardJS__default.default("button");
-    clipboard.on("success", function(e) {
-      var _a;
-      (_a = props.onCopyToClipboard) === null || _a === void 0 ? void 0 : _a.call(props, e.text);
-      e.clearSelection();
-    });
-    return () => clipboard.destroy();
-  }, [props.onCopyToClipboard]);
-  let containerProps;
+  let boxProps = {};
   switch (props.linkType) {
     case "link":
-      containerProps = {
-        element: "a",
+      boxProps = {
+        as: "a",
         href: props.value,
         target: "_blank",
         rel: "noopener noreferrer"
       };
       break;
     case "tel":
-      containerProps = { element: "a", href: `tel:${props.value}` };
+      boxProps = {
+        as: "a",
+        href: `tel:${props.value}`
+      };
       break;
     case "clipboard":
-      containerProps = {
-        element: "button",
+      boxProps = {
+        as: "button",
         type: "button",
-        "data-clipboard-text": props.value
+        "data-clipboard-text": props.value,
+        onClick: () => {
+          window.navigator.clipboard.writeText(props.value).then(() => {
+            var _a;
+            return (_a = props.onCopyToClipboard) === null || _a === void 0 ? void 0 : _a.call(props, props.value);
+          });
+        }
       };
       break;
-    case "none":
-    default:
-      containerProps = { element: "div" };
-      break;
   }
-  const ContainerElement = containerProps.element;
   return React__namespace.default.createElement(
-    "div",
-    { className: classNames__default.default("ui-align-center ui-flex ui-flex-row ui-items-center", props.className) },
+    Stack,
+    { axis: "x", align: "center", gap: "s", className: props.className },
     props.icon,
     React__namespace.default.createElement(
-      ContainerElement,
-      Object.assign({ className: "ui-ml-3 ui-flex ui-flex-col ui-overflow-hidden first:ui-ml-0" }, containerProps),
-      React__namespace.default.createElement(Text, { text: props.label, type: "sm", color: "slate-500", className: classNames__default.default({ "ui-break-words": props.supportsMultiline }, { "ui-whitespace-no-wrap": !props.supportsMultiline }) }),
-      React__namespace.default.createElement(Text, { className: classNames__default.default({ "ui-break-words": props.supportsMultiline }, { "ui-whitespace-no-wrap": !props.supportsMultiline }), text: props.value, truncate: !props.supportsMultiline })
+      Stack,
+      Object.assign({}, boxProps, { className: "ui-overflow-hidden" }),
+      React__namespace.default.createElement(Text, { type: "sm", color: "slate-500", className: classNames__default.default({ "ui-break-words": props.supportsMultiline }, { "ui-whitespace-no-wrap": !props.supportsMultiline }) }, props.label),
+      React__namespace.default.createElement(Text, { className: classNames__default.default({ "ui-break-words": props.supportsMultiline }, { "ui-whitespace-no-wrap": !props.supportsMultiline }), truncate: !props.supportsMultiline }, props.value)
     )
   );
 };
@@ -5076,47 +5119,6 @@ const MediaPicker = React__namespace.default.forwardRef((props, ref) => {
   return React__namespace.default.createElement(ImagePickerInner, Object.assign({}, mappedProps, { innerRef: ref }));
 });
 
-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", className, elevation, width } = props, attributes = __rest(props, ["as", "className", "elevation", "width"]);
-  const spacingClasses = createSpacingClassNames(spacingKeys, props);
-  const attributesWithoutSpacingKeys = omit__default.default(attributes, spacingKeys);
-  return React__namespace.default.createElement(Element, Object.assign({ className: classNames__default.default(spacingClasses, {
-    [`ui-shadow-${elevation}`]: elevation,
-    "ui-w-full": width === "full"
-  }, className) }, attributesWithoutSpacingKeys));
-};
-
-const Stack = (props) => {
-  const { children, gap, align = "start", justify = "normal", axis = "y", className, reverse } = props, attributes = __rest(props, ["children", "gap", "align", "justify", "axis", "className", "reverse"]);
-  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-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 TagGroup = ({ children, tags, tagSize = "base", className }) => React__namespace.default.createElement(
   "div",
   { className: classNames__default.default("ui-flex ui-flex-row ui-flex-wrap ui-gap-2", className) },
@@ -5961,6 +5963,7 @@ exports.EmptyIcon = EmptyIcon;
 exports.EmptyListMessage = EmptyListMessage;
 exports.ExclamationMarkIcon = ExclamationMarkIcon;
 exports.ExportIcon = ExportIcon;
+exports.ExternalLinkIcon = ExternalLinkIcon;
 exports.EyeClosedIcon = EyeClosedIcon;
 exports.EyeIcon = EyeOpenIcon;
 exports.EyeIconSlashed = EyeClosedIcon;