@embeddable.com/remarkable-ui 2.0.43 → 2.0.45

package/dist/index.js

@@ -1,6 +1,6 @@
 import {
   styles
-} from "./chunk-54RMM3OQ.js";
+} from "./chunk-TZ3EDAGU.js";
 
 // src/components/charts/bars/BarChart.tsx
 import { useRef } from "react";
@@ -1861,7 +1861,7 @@ var TableBodyCellWithCopy = ({
   value,
   align = "left",
   children,
-  style
+  style: style2
 }) => {
   const [isPressedCopy, setIsPressedCopy] = useState5(false);
   const handleCopy = () => {
@@ -1874,7 +1874,7 @@ var TableBodyCellWithCopy = ({
     "td",
     {
       title: value,
-      style: { textAlign: align, ...style },
+      style: { textAlign: align, ...style2 },
       onMouseLeave: () => setIsPressedCopy(false),
       children: [
         /* @__PURE__ */ jsx12(
@@ -1923,7 +1923,7 @@ var TablePagination = ({
     if (totalPages && page >= totalPages) {
       onPageChange(0);
     }
-  }, [totalPages, page]);
+  }, [totalPages, page, onPageChange]);
   return /* @__PURE__ */ jsx13("div", { className: styles10.tablePagination, "aria-label": "Table pagination controls", children: /* @__PURE__ */ jsxs7("div", { className: styles10.tablePaginationCentral, children: [
     /* @__PURE__ */ jsxs7("div", { className: styles10.tablePaginationCentralButtons, children: [
       /* @__PURE__ */ jsx13(
@@ -2182,8 +2182,9 @@ var DateRangePickerChevron = ({
   const rotation = orientation === "left" ? void 0 : "rotate(180deg)";
   const isSmallChevron = size === SMALL_SIZE;
   return /* @__PURE__ */ jsx16(
-    "button",
+    "span",
     {
+      "data-testid": "date-range-picker-chevron",
       className: clsx9(styles12.chevron, isSmallChevron && styles12.small),
       style: {
         transform: rotation
@@ -2300,7 +2301,7 @@ import { forwardRef as forwardRef3 } from "react";
 // src/components/shared/GhostButton/GhostButton.tsx
 import React3 from "react";
 import clsx11 from "clsx";
-import styles14 from "./GhostButton.module-JZ7YOOU5.module.css";
+import styles14 from "./GhostButton.module-33OGL7WW.module.css";
 import { jsx as jsx20, jsxs as jsxs12 } from "react/jsx-runtime";
 var GhostButton = React3.forwardRef(
   ({ startIcon: StartIcon, endIcon: EndIcon, children, className, ...props }, ref) => {
@@ -2565,7 +2566,7 @@ import { forwardRef as forwardRef5 } from "react";
 
 // src/components/editors/inputs/shared/InputField/InputField.tsx
 import { IconX as IconX2 } from "@tabler/icons-react";
-import styles20 from "./InputField.module-LDLOMDBK.module.css";
+import styles20 from "./InputField.module-DWUIQOWJ.module.css";
 import clsx16 from "clsx";
 import { forwardRef as forwardRef4 } from "react";
 import { jsx as jsx26, jsxs as jsxs16 } from "react/jsx-runtime";
@@ -2693,7 +2694,7 @@ import { Fragment as Fragment6, useEffect as useEffect8, useMemo as useMemo5, us
 
 // src/components/editors/selects/shared/SelectFieldContent/SelectFieldOptions/SelectFieldOption/SelectFieldOption.tsx
 import * as DropdownMenu2 from "@radix-ui/react-dropdown-menu";
-import styles21 from "./SelectFieldOption.module-SH3TOVNB.module.css";
+import styles21 from "./SelectFieldOption.module-ZXJXUZWN.module.css";
 import clsx17 from "clsx";
 import { jsx as jsx29, jsxs as jsxs18 } from "react/jsx-runtime";
 var SelectListOption = ({
@@ -2786,6 +2787,7 @@ var MultiSelectField = ({
   label,
   required,
   disabled,
+  disableApplyButton,
   isClearable,
   isLoading,
   isSearchable,
@@ -2796,6 +2798,7 @@ var MultiSelectField = ({
   values = [],
   avoidCollisions,
   onChange,
+  onPendingChange,
   onSearch,
   error = false,
   errorMessage
@@ -2808,6 +2811,7 @@ var MultiSelectField = ({
   useSelectSearchFocus(isOpen, searchFieldRef);
   useEffect8(() => {
     setPreValues(values);
+    onPendingChange?.(values);
   }, [JSON.stringify(values)]);
   useEffect8(() => {
     if (isLoading) {
@@ -2833,9 +2837,13 @@ var MultiSelectField = ({
     e.preventDefault();
     if (!newValue) return;
     if (preValues.includes(newValue)) {
-      setPreValues(preValues.filter((v) => v !== newValue));
+      const next = preValues.filter((v) => v !== newValue);
+      setPreValues(next);
+      onPendingChange?.(next);
     } else {
-      setPreValues([...preValues, newValue]);
+      const next = [...preValues, newValue];
+      setPreValues(next);
+      onPendingChange?.(next);
     }
   };
   const handleSearch = (newSearch) => {
@@ -2851,6 +2859,7 @@ var MultiSelectField = ({
   const handleClearAll = () => {
     setSearchValue("");
     onSearch?.("");
+    onPendingChange?.([]);
     onChange([]);
   };
   const hasError = error || !!errorMessage;
@@ -2919,7 +2928,7 @@ var MultiSelectField = ({
             Button,
             {
               className: styles23.submitButton,
-              disabled: isSubmitDisabled || isLoading,
+              disabled: isSubmitDisabled || isLoading || disableApplyButton,
               variant: "primary",
               size: "medium",
               onClick: () => handleSave(preValues),
@@ -3252,61 +3261,227 @@ var CardFeedback = ({
   ] });
 };
 
-// src/components/shared/Overlay/Overlay.tsx
+// src/components/shared/GhostButtonIcon/GhostButtonIcon.tsx
+import React5 from "react";
 import clsx22 from "clsx";
-import styles29 from "./Overlay.module-FCW64VWM.module.css";
+import style from "./GhostButtonIcon.module-6J6DJCE6.module.css";
 import { jsx as jsx38 } from "react/jsx-runtime";
+var GhostButtonIcon = React5.forwardRef(
+  ({ icon: Icon, className, ...props }, ref) => {
+    return /* @__PURE__ */ jsx38("button", { ref, className: clsx22(style.ghostButtonIcon, className), ...props, children: /* @__PURE__ */ jsx38(Icon, {}) });
+  }
+);
+GhostButtonIcon.displayName = "GhostButtonIcon";
+
+// src/components/shared/Overlay/Overlay.tsx
+import clsx23 from "clsx";
+import styles29 from "./Overlay.module-FCW64VWM.module.css";
+import { jsx as jsx39 } from "react/jsx-runtime";
 var Overlay = ({ className, children }) => {
-  return /* @__PURE__ */ jsx38("div", { className: clsx22(styles29.overlay, className), children });
+  return /* @__PURE__ */ jsx39("div", { className: clsx23(styles29.overlay, className), children });
 };
 
 // src/components/shared/Skeleton/Skeleton.tsx
 import styles30 from "./Skeleton.module-ZN5S5VRF.module.css";
-import { jsx as jsx39 } from "react/jsx-runtime";
+import { jsx as jsx40 } from "react/jsx-runtime";
 var Skeleton = () => {
-  return /* @__PURE__ */ jsx39("div", { className: styles30.skeleton });
+  return /* @__PURE__ */ jsx40("div", { className: styles30.skeleton });
 };
 
 // src/components/shared/Typography/Typography.tsx
 import styles31 from "./Typography.module-SW6CT55P.module.css";
-import clsx23 from "clsx";
-import { jsx as jsx40 } from "react/jsx-runtime";
+import clsx24 from "clsx";
+import { jsx as jsx41 } from "react/jsx-runtime";
 function Typography({
   children,
   as: Component = "p",
   className,
-  style,
+  style: style2,
   title
 }) {
-  return /* @__PURE__ */ jsx40(Component, { title, className: clsx23(styles31.typography, className), style, children });
+  return /* @__PURE__ */ jsx41(Component, { title, className: clsx24(styles31.typography, className), style: style2, children });
 }
 
 // src/components/shared/Divider/Divider.tsx
-import clsx24 from "clsx";
+import clsx25 from "clsx";
 import styles32 from "./Divider.module-2BOWHKT3.module.css";
-import { jsx as jsx41 } from "react/jsx-runtime";
+import { jsx as jsx42 } from "react/jsx-runtime";
 var getStyle2 = (color, thickness, vertical) => {
-  const style = {};
-  if (color) style.backgroundColor = color;
+  const style2 = {};
+  if (color) style2.backgroundColor = color;
   if (thickness) {
     if (vertical) {
-      style.width = thickness;
+      style2.width = thickness;
     } else {
-      style.height = thickness;
+      style2.height = thickness;
     }
   }
-  return style;
+  return style2;
 };
 var Divider = ({ color, thickness, vertical, className }) => {
-  return /* @__PURE__ */ jsx41(
+  return /* @__PURE__ */ jsx42(
     "div",
     {
-      className: clsx24(styles32.divider, vertical && styles32.vertical, className),
+      className: clsx25(styles32.divider, vertical && styles32.vertical, className),
       style: getStyle2(color, thickness, vertical)
     }
   );
 };
 
+// src/components/shared/Markdown/Markdown.tsx
+import { useMemo as useMemo7 } from "react";
+import ReactMarkdown from "react-markdown";
+import remarkGfm from "remark-gfm";
+import styles33 from "./Markdown.module-AIJ2C4S2.module.css";
+import { jsx as jsx43 } from "react/jsx-runtime";
+var normalizeEscapedNewlines = (input) => input?.replaceAll(String.raw`\n`, "\n");
+var Markdown = ({ content }) => {
+  const resolvedContent = useMemo7(() => {
+    return normalizeEscapedNewlines(content);
+  }, [content]);
+  return /* @__PURE__ */ jsx43("div", { className: styles33.markdown, children: /* @__PURE__ */ jsx43(ReactMarkdown, { remarkPlugins: [remarkGfm], children: resolvedContent }) });
+};
+
+// src/components/shared/MarkdownEditor/MarkdownEditor.tsx
+import {
+  IconBold,
+  IconCode,
+  IconEye,
+  IconH1,
+  IconItalic,
+  IconLink,
+  IconList,
+  IconPencil,
+  IconStrikethrough
+} from "@tabler/icons-react";
+import { useRef as useRef12, useState as useState10 } from "react";
+import styles34 from "./MarkdownEditor.module-2R7P4ZIL.module.css";
+
+// src/components/shared/MarkdownEditor/MarkdownEditor.utils.ts
+var MAX_HISTORY = 100;
+var applyWrap = (value, start, end, syntax) => value.slice(0, start) + syntax + value.slice(start, end) + syntax + value.slice(end);
+var applyLinePrefix = (value, start, prefix) => {
+  const lineStart = value.lastIndexOf("\n", start - 1) + 1;
+  return value.slice(0, lineStart) + prefix + value.slice(lineStart);
+};
+
+// src/components/shared/MarkdownEditor/MarkdownEditor.tsx
+import { jsx as jsx44, jsxs as jsxs25 } from "react/jsx-runtime";
+var MarkdownEditor = ({
+  value: valueProp,
+  onChange,
+  placeholder
+}) => {
+  const value = valueProp ?? "";
+  const textareaRef = useRef12(null);
+  const [history, setHistory] = useState10({ entries: [value], index: 0 });
+  const [isPreview, setIsPreview] = useState10(false);
+  const handleChange = (newValue) => {
+    setHistory((prev) => {
+      const entries = [...prev.entries.slice(0, prev.index + 1), newValue];
+      const capped = entries.length > MAX_HISTORY ? entries.slice(-MAX_HISTORY) : entries;
+      return { entries: capped, index: capped.length - 1 };
+    });
+    onChange?.(newValue);
+  };
+  const applyEdit = (edit) => {
+    const textarea = textareaRef.current;
+    if (!textarea) return;
+    const { selectionStart: start, selectionEnd: end } = textarea;
+    const result = edit(value, start, end);
+    handleChange(result.value);
+    requestAnimationFrame(() => {
+      textarea.focus();
+      textarea.setSelectionRange(...result.cursor);
+    });
+  };
+  const handleWrap = (syntax) => applyEdit((text, start, end) => ({
+    value: applyWrap(text, start, end, syntax),
+    cursor: [start + syntax.length, end + syntax.length]
+  }));
+  const handlePrefix = (prefix) => applyEdit((text, start) => ({
+    value: applyLinePrefix(text, start, prefix),
+    cursor: [start + prefix.length, start + prefix.length]
+  }));
+  const handleLink = () => applyEdit((text, start, end) => ({
+    value: text.slice(0, start) + `[${text.slice(start, end)}]()` + text.slice(end),
+    cursor: [end + 3, end + 3]
+    // cursor inside the ()
+  }));
+  const navigate = (delta) => {
+    const newIndex = history.index + delta;
+    if (newIndex < 0 || newIndex >= history.entries.length) return;
+    const entry = history.entries[newIndex];
+    if (entry === void 0) return;
+    setHistory((prev) => ({ ...prev, index: newIndex }));
+    onChange?.(entry);
+  };
+  const handleKeyDown = (e) => {
+    if (!e.ctrlKey && !e.metaKey) return;
+    const key = `${e.shiftKey ? "shift+" : ""}${e.key.toLowerCase()}`;
+    const actions = {
+      z: () => navigate(-1),
+      "shift+z": () => navigate(1),
+      y: () => navigate(1),
+      b: () => handleWrap("**"),
+      i: () => handleWrap("*"),
+      k: handleLink,
+      "`": () => handleWrap("`"),
+      "shift+x": () => handleWrap("~~")
+    };
+    const action = actions[key];
+    if (action) {
+      e.preventDefault();
+      action();
+    }
+  };
+  const toolbarButtons = [
+    { icon: IconBold, label: "Bold", onClick: () => handleWrap("**") },
+    { icon: IconItalic, label: "Italic", onClick: () => handleWrap("*") },
+    { icon: IconStrikethrough, label: "Strikethrough", onClick: () => handleWrap("~~") },
+    { icon: IconCode, label: "Code", onClick: () => handleWrap("`") },
+    { icon: IconH1, label: "Heading", onClick: () => handlePrefix("# ") },
+    { icon: IconList, label: "Bullet list", onClick: () => handlePrefix("- ") },
+    { icon: IconLink, label: "Link", onClick: handleLink }
+  ];
+  return /* @__PURE__ */ jsxs25("div", { className: styles34.container, children: [
+    /* @__PURE__ */ jsxs25("div", { className: styles34.toolbar, children: [
+      toolbarButtons.map(({ icon, label, onClick }) => /* @__PURE__ */ jsx44(
+        GhostButtonIcon,
+        {
+          icon,
+          "aria-label": label,
+          disabled: isPreview,
+          onMouseDown: (e) => e.preventDefault(),
+          onClick
+        },
+        label
+      )),
+      /* @__PURE__ */ jsx44("div", { className: styles34.toolbarSpacer }),
+      /* @__PURE__ */ jsx44(
+        GhostButtonIcon,
+        {
+          icon: isPreview ? IconPencil : IconEye,
+          "aria-label": isPreview ? "Edit" : "Preview",
+          onMouseDown: (e) => e.preventDefault(),
+          onClick: () => setIsPreview((prev) => !prev)
+        }
+      )
+    ] }),
+    isPreview ? /* @__PURE__ */ jsx44("div", { className: styles34.preview, children: /* @__PURE__ */ jsx44(Markdown, { content: value }) }) : /* @__PURE__ */ jsx44(
+      "textarea",
+      {
+        ref: textareaRef,
+        className: styles34.markdownEditor,
+        value,
+        onChange: (e) => handleChange(e.target.value),
+        onKeyDown: handleKeyDown,
+        placeholder
+      }
+    )
+  ] });
+};
+
 // src/utils/object.utils.ts
 var shallowEqual = (object1, object2) => {
   const keys1 = Object.keys(object1 ?? {});
@@ -3338,9 +3513,12 @@ export {
   FieldFeedback,
   FieldHeader,
   GhostButton,
+  GhostButtonIcon,
   HeatMap,
   KpiChart,
   LineChart,
+  Markdown,
+  MarkdownEditor,
   MultiSelectField,
   NumberField,
   Overlay,