@uipath/apollo-wind 2.57.0 → 2.57.1

package/dist/components/ui/alert-dialog.cjs

@@ -43,6 +43,7 @@ const external_react_namespaceObject = require("react");
 const external_button_cjs_namespaceObject = require("./button.cjs");
 const external_portal_container_cjs_namespaceObject = require("./portal-container.cjs");
 const index_cjs_namespaceObject = require("../../lib/index.cjs");
+const dialog_surface_cjs_namespaceObject = require("../../lib/dialog-surface.cjs");
 const AlertDialog = (props)=>/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(react_alert_dialog_namespaceObject.Root, {
         "data-slot": "alert-dialog",
         ...props
@@ -75,7 +76,7 @@ const AlertDialogContent = /*#__PURE__*/ external_react_namespaceObject.forwardR
             /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(react_alert_dialog_namespaceObject.Content, {
                 ref: ref,
                 "data-slot": "alert-dialog-content",
-                className: (0, index_cjs_namespaceObject.cn)('fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg', className),
+                className: (0, index_cjs_namespaceObject.cn)(dialog_surface_cjs_namespaceObject.dialogSurfaceClassName, 'fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 rounded-2xl p-6 duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%]', className),
                 ...props
             })
         ]
@@ -84,27 +85,27 @@ const AlertDialogContent = /*#__PURE__*/ external_react_namespaceObject.forwardR
 AlertDialogContent.displayName = react_alert_dialog_namespaceObject.Content.displayName;
 const AlertDialogHeader = ({ className, ...props })=>/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
         "data-slot": "alert-dialog-header",
-        className: (0, index_cjs_namespaceObject.cn)('flex flex-col space-y-2 text-center sm:text-left', className),
+        className: (0, index_cjs_namespaceObject.cn)('flex flex-col gap-2 text-center sm:text-left', className),
         ...props
     });
 AlertDialogHeader.displayName = 'AlertDialogHeader';
 const AlertDialogFooter = ({ className, ...props })=>/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
         "data-slot": "alert-dialog-footer",
-        className: (0, index_cjs_namespaceObject.cn)('flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2', className),
+        className: (0, index_cjs_namespaceObject.cn)('flex flex-col-reverse gap-2 sm:flex-row sm:justify-end', className),
         ...props
     });
 AlertDialogFooter.displayName = 'AlertDialogFooter';
 const AlertDialogTitle = /*#__PURE__*/ external_react_namespaceObject.forwardRef(({ className, ...props }, ref)=>/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(react_alert_dialog_namespaceObject.Title, {
         ref: ref,
         "data-slot": "alert-dialog-title",
-        className: (0, index_cjs_namespaceObject.cn)('text-lg font-semibold', className),
+        className: (0, index_cjs_namespaceObject.cn)('text-lg leading-none font-semibold', className),
         ...props
     }));
 AlertDialogTitle.displayName = react_alert_dialog_namespaceObject.Title.displayName;
 const AlertDialogDescription = /*#__PURE__*/ external_react_namespaceObject.forwardRef(({ className, ...props }, ref)=>/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(react_alert_dialog_namespaceObject.Description, {
         ref: ref,
         "data-slot": "alert-dialog-description",
-        className: (0, index_cjs_namespaceObject.cn)('text-sm text-muted-foreground', className),
+        className: (0, index_cjs_namespaceObject.cn)('text-foreground-muted text-sm', className),
         ...props
     }));
 AlertDialogDescription.displayName = react_alert_dialog_namespaceObject.Description.displayName;
@@ -120,7 +121,7 @@ const AlertDialogCancel = /*#__PURE__*/ external_react_namespaceObject.forwardRe
         "data-slot": "alert-dialog-cancel",
         className: (0, index_cjs_namespaceObject.cn)((0, external_button_cjs_namespaceObject.buttonVariants)({
             variant: 'outline'
-        }), 'mt-2 sm:mt-0', className),
+        }), className),
         ...props
     }));
 AlertDialogCancel.displayName = react_alert_dialog_namespaceObject.Cancel.displayName;

package/dist/components/ui/alert-dialog.js

@@ -5,6 +5,7 @@ import { forwardRef } from "react";
 import { buttonVariants } from "./button.js";
 import { useResolvedPortalContainer } from "./portal-container.js";
 import { cn } from "../../lib/index.js";
+import { dialogSurfaceClassName } from "../../lib/dialog-surface.js";
 const AlertDialog = (props)=>/*#__PURE__*/ jsx(Root, {
         "data-slot": "alert-dialog",
         ...props
@@ -37,7 +38,7 @@ const AlertDialogContent = /*#__PURE__*/ forwardRef(({ className, container, ...
             /*#__PURE__*/ jsx(Content, {
                 ref: ref,
                 "data-slot": "alert-dialog-content",
-                className: cn('fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg', className),
+                className: cn(dialogSurfaceClassName, 'fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 rounded-2xl p-6 duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%]', className),
                 ...props
             })
         ]
@@ -46,27 +47,27 @@ const AlertDialogContent = /*#__PURE__*/ forwardRef(({ className, container, ...
 AlertDialogContent.displayName = Content.displayName;
 const AlertDialogHeader = ({ className, ...props })=>/*#__PURE__*/ jsx("div", {
         "data-slot": "alert-dialog-header",
-        className: cn('flex flex-col space-y-2 text-center sm:text-left', className),
+        className: cn('flex flex-col gap-2 text-center sm:text-left', className),
         ...props
     });
 AlertDialogHeader.displayName = 'AlertDialogHeader';
 const AlertDialogFooter = ({ className, ...props })=>/*#__PURE__*/ jsx("div", {
         "data-slot": "alert-dialog-footer",
-        className: cn('flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2', className),
+        className: cn('flex flex-col-reverse gap-2 sm:flex-row sm:justify-end', className),
         ...props
     });
 AlertDialogFooter.displayName = 'AlertDialogFooter';
 const AlertDialogTitle = /*#__PURE__*/ forwardRef(({ className, ...props }, ref)=>/*#__PURE__*/ jsx(Title, {
         ref: ref,
         "data-slot": "alert-dialog-title",
-        className: cn('text-lg font-semibold', className),
+        className: cn('text-lg leading-none font-semibold', className),
         ...props
     }));
 AlertDialogTitle.displayName = Title.displayName;
 const AlertDialogDescription = /*#__PURE__*/ forwardRef(({ className, ...props }, ref)=>/*#__PURE__*/ jsx(Description, {
         ref: ref,
         "data-slot": "alert-dialog-description",
-        className: cn('text-sm text-muted-foreground', className),
+        className: cn('text-foreground-muted text-sm', className),
         ...props
     }));
 AlertDialogDescription.displayName = Description.displayName;
@@ -82,7 +83,7 @@ const AlertDialogCancel = /*#__PURE__*/ forwardRef(({ className, ...props }, ref
         "data-slot": "alert-dialog-cancel",
         className: cn(buttonVariants({
             variant: 'outline'
-        }), 'mt-2 sm:mt-0', className),
+        }), className),
         ...props
     }));
 AlertDialogCancel.displayName = Cancel.displayName;

package/dist/components/ui/code-editors.shared.cjs

@@ -0,0 +1,323 @@
+"use strict";
+var __webpack_require__ = {};
+(()=>{
+    __webpack_require__.n = (module)=>{
+        var getter = module && module.__esModule ? ()=>module['default'] : ()=>module;
+        __webpack_require__.d(getter, {
+            a: getter
+        });
+        return getter;
+    };
+})();
+(()=>{
+    __webpack_require__.d = (exports1, definition)=>{
+        for(var key in definition)if (__webpack_require__.o(definition, key) && !__webpack_require__.o(exports1, key)) Object.defineProperty(exports1, key, {
+            enumerable: true,
+            get: definition[key]
+        });
+    };
+})();
+(()=>{
+    __webpack_require__.o = (obj, prop)=>Object.prototype.hasOwnProperty.call(obj, prop);
+})();
+(()=>{
+    __webpack_require__.r = (exports1)=>{
+        if ("u" > typeof Symbol && Symbol.toStringTag) Object.defineProperty(exports1, Symbol.toStringTag, {
+            value: 'Module'
+        });
+        Object.defineProperty(exports1, '__esModule', {
+            value: true
+        });
+    };
+})();
+var __webpack_exports__ = {};
+__webpack_require__.r(__webpack_exports__);
+__webpack_require__.d(__webpack_exports__, {
+    registerAllMonacoThemes: ()=>registerAllMonacoThemes,
+    editorThemeConfigs: ()=>editorThemeConfigs,
+    LiveMonacoEditor: ()=>LiveMonacoEditor,
+    useEditorThemeConfig: ()=>useEditorThemeConfig,
+    monacoSample: ()=>monacoSample,
+    monacoFullSample: ()=>monacoFullSample
+});
+const jsx_runtime_namespaceObject = require("react/jsx-runtime");
+const react_namespaceObject = require("@monaco-editor/react");
+var react_default = /*#__PURE__*/ __webpack_require__.n(react_namespaceObject);
+const external_react_namespaceObject = require("react");
+const index_cjs_namespaceObject = require("../../editor-themes/index.cjs");
+const editorThemeConfigs = [
+    {
+        key: 'future-dark',
+        label: 'Future Dark',
+        monacoThemeName: 'apollo-future-dark',
+        monacoExport: 'apolloFutureDarkMonaco',
+        cmExport: 'apolloFutureDarkCodeMirror',
+        monacoThemeObj: index_cjs_namespaceObject.apolloFutureDarkMonaco,
+        cmTokens: index_cjs_namespaceObject.apolloFutureDarkCodeMirror,
+        isDark: true,
+        family: 'Future'
+    },
+    {
+        key: 'future-light',
+        label: 'Future Light',
+        monacoThemeName: 'apollo-future-light',
+        monacoExport: 'apolloFutureLightMonaco',
+        cmExport: 'apolloFutureLightCodeMirror',
+        monacoThemeObj: index_cjs_namespaceObject.apolloFutureLightMonaco,
+        cmTokens: index_cjs_namespaceObject.apolloFutureLightCodeMirror,
+        isDark: false,
+        family: 'Future'
+    },
+    {
+        key: 'dark',
+        label: 'Dark',
+        monacoThemeName: 'apollo-core-dark',
+        monacoExport: 'apolloCoreDarkMonaco',
+        cmExport: 'apolloCoreDarkCodeMirror',
+        monacoThemeObj: index_cjs_namespaceObject.apolloCoreDarkMonaco,
+        cmTokens: index_cjs_namespaceObject.apolloCoreDarkCodeMirror,
+        isDark: true,
+        family: 'Core'
+    },
+    {
+        key: 'light',
+        label: 'Light',
+        monacoThemeName: 'apollo-core-light',
+        monacoExport: 'apolloCoreLightMonaco',
+        cmExport: 'apolloCoreLightCodeMirror',
+        monacoThemeObj: index_cjs_namespaceObject.apolloCoreLightMonaco,
+        cmTokens: index_cjs_namespaceObject.apolloCoreLightCodeMirror,
+        isDark: false,
+        family: 'Core'
+    },
+    {
+        key: 'dark-hc',
+        label: 'Dark High Contrast',
+        monacoThemeName: 'apollo-core-dark-hc',
+        monacoExport: 'apolloCoreDarkHCMonaco',
+        cmExport: 'apolloCoreDarkHCCodeMirror',
+        monacoThemeObj: index_cjs_namespaceObject.apolloCoreDarkHCMonaco,
+        cmTokens: index_cjs_namespaceObject.apolloCoreDarkHCCodeMirror,
+        isDark: true,
+        family: 'Core HC'
+    },
+    {
+        key: 'light-hc',
+        label: 'Light High Contrast',
+        monacoThemeName: 'apollo-core-light-hc',
+        monacoExport: 'apolloCoreLightHCMonaco',
+        cmExport: 'apolloCoreLightHCCodeMirror',
+        monacoThemeObj: index_cjs_namespaceObject.apolloCoreLightHCMonaco,
+        cmTokens: index_cjs_namespaceObject.apolloCoreLightHCCodeMirror,
+        isDark: false,
+        family: 'Core HC'
+    }
+];
+const monacoFullSample = `import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+
+type SortDirection = 'asc' | 'desc';
+
+interface Column<T> {
+  key: keyof T;
+  header: string;
+  sortable?: boolean;
+  render?: (value: T[keyof T], row: T) => ReactNode;
+}
+
+interface TableProps<T> {
+  data: T[];
+  columns: Column<T>[];
+  pageSize?: number;
+}
+
+export function DataTable<T extends { id: string | number }>({
+  data,
+  columns,
+  pageSize = 10,
+}: TableProps<T>) {
+  const [query, setQuery] = useState('');
+  const [sortKey, setSortKey] = useState<keyof T | null>(null);
+  const [sortDir, setSortDir] = useState<SortDirection>('asc');
+  const [page, setPage] = useState(1);
+
+  useEffect(() => { setPage(1); }, [query, sortKey, sortDir]);
+
+  const filtered = useMemo(() => {
+    if (!query.trim()) return data;
+    const q = query.toLowerCase();
+    return data.filter((row) =>
+      columns.some((col) => String(row[col.key]).toLowerCase().includes(q))
+    );
+  }, [data, columns, query]);
+
+  const sorted = useMemo(() => {
+    if (!sortKey) return filtered;
+    return [...filtered].sort((a, b) => {
+      const cmp = a[sortKey] < b[sortKey] ? -1 : a[sortKey] > b[sortKey] ? 1 : 0;
+      return sortDir === 'asc' ? cmp : -cmp;
+    });
+  }, [filtered, sortKey, sortDir]);
+
+  return (
+    <div className="flex flex-col gap-4">
+      <input
+        className="rounded-lg border border-border px-3 py-2 text-sm"
+        placeholder="Search..."
+        value={query}
+        onChange={(e) => setQuery(e.target.value)}
+      />
+      <table className="w-full text-sm">
+        <thead>
+          <tr className="border-b border-border">
+            {columns.map((col) => (
+              <th key={String(col.key)} className="px-4 py-2 text-left">
+                {col.header}
+              </th>
+            ))}
+          </tr>
+        </thead>
+      </table>
+    </div>
+  );
+}`.trim();
+const monacoSample = `interface WorkflowNode {
+  id: string;
+  type: 'action' | 'condition' | 'trigger';
+  executionStatus: 'NotExecuted' | 'InProgress' | 'Completed' | 'Failed';
+}
+
+function getNextNodes(node: WorkflowNode): string[] {
+  if (node.executionStatus === 'Completed') {
+    return node.type === 'condition'
+      ? ['true-branch', 'false-branch']
+      : ['next'];
+  }
+  return [];
+}`.trim();
+let monacoThemesRegistered = false;
+function registerAllMonacoThemes(monaco) {
+    if (monacoThemesRegistered) return;
+    for (const cfg of editorThemeConfigs)monaco.editor.defineTheme(cfg.monacoThemeName, cfg.monacoThemeObj);
+    monacoThemesRegistered = true;
+}
+let demoDefaultsUsers = 0;
+let savedTypescriptDefaults = null;
+function acquireDemoTypescriptDefaults(monaco) {
+    demoDefaultsUsers += 1;
+    if (demoDefaultsUsers > 1) return;
+    const ts = monaco.languages.typescript.typescriptDefaults;
+    savedTypescriptDefaults = {
+        diagnostics: ts.getDiagnosticsOptions(),
+        compiler: ts.getCompilerOptions()
+    };
+    ts.setDiagnosticsOptions({
+        ...ts.getDiagnosticsOptions(),
+        noSemanticValidation: true
+    });
+    ts.setCompilerOptions({
+        ...ts.getCompilerOptions(),
+        jsx: monaco.languages.typescript.JsxEmit.Preserve
+    });
+}
+function releaseDemoTypescriptDefaults(monaco) {
+    demoDefaultsUsers -= 1;
+    if (demoDefaultsUsers > 0 || !savedTypescriptDefaults) return;
+    const ts = monaco.languages.typescript.typescriptDefaults;
+    ts.setDiagnosticsOptions(savedTypescriptDefaults.diagnostics);
+    ts.setCompilerOptions(savedTypescriptDefaults.compiler);
+    savedTypescriptDefaults = null;
+}
+function LiveMonacoEditor({ themeConfig, height = '220px', value, onChange, onMount, language = "typescript", options = {} }) {
+    const extension = 'json' === language ? 'json' : 'tsx';
+    const modelPath = `file:///editor-${(0, external_react_namespaceObject.useId)().replace(/[^a-zA-Z0-9]/g, '')}.${extension}`;
+    const monacoRef = (0, external_react_namespaceObject.useRef)(null);
+    (0, external_react_namespaceObject.useEffect)(()=>()=>{
+            if (monacoRef.current) releaseDemoTypescriptDefaults(monacoRef.current);
+            monacoRef.current = null;
+        }, []);
+    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(react_default(), {
+        height: height,
+        path: modelPath,
+        defaultLanguage: language,
+        ...onChange ? {
+            value: value ?? ''
+        } : {
+            defaultValue: value ?? monacoSample
+        },
+        theme: themeConfig.monacoThemeName,
+        beforeMount: (monaco)=>{
+            registerAllMonacoThemes(monaco);
+            if (!monacoRef.current) {
+                monacoRef.current = monaco;
+                acquireDemoTypescriptDefaults(monaco);
+            }
+        },
+        onChange: onChange,
+        onMount: onMount,
+        options: {
+            fontSize: 13,
+            lineHeight: 20,
+            minimap: {
+                enabled: false
+            },
+            scrollBeyondLastLine: false,
+            wordWrap: 'on',
+            fontFamily: 'ui-monospace, SFMono-Regular, "SF Mono", Consolas, "Liberation Mono", Menlo, monospace',
+            padding: {
+                top: 16,
+                bottom: 16
+            },
+            lineNumbers: 'on',
+            glyphMargin: false,
+            folding: false,
+            renderLineHighlight: 'line',
+            hideCursorInOverviewRuler: true,
+            overviewRulerBorder: false,
+            scrollbar: {
+                vertical: 'auto',
+                horizontal: 'hidden',
+                alwaysConsumeMouseWheel: false
+            },
+            automaticLayout: true,
+            fixedOverflowWidgets: true,
+            ...options
+        }
+    });
+}
+const futureDarkConfig = editorThemeConfigs[0];
+function getStorybookThemeConfig() {
+    const keys = editorThemeConfigs.map((c)=>c.key);
+    const found = Array.from(document.body.classList).find((c)=>keys.includes(c));
+    return editorThemeConfigs.find((c)=>c.key === found) ?? futureDarkConfig;
+}
+function useEditorThemeConfig() {
+    const [themeConfig, setThemeConfig] = (0, external_react_namespaceObject.useState)(getStorybookThemeConfig);
+    (0, external_react_namespaceObject.useEffect)(()=>{
+        const observer = new MutationObserver(()=>setThemeConfig(getStorybookThemeConfig()));
+        observer.observe(document.body, {
+            attributes: true,
+            attributeFilter: [
+                'class'
+            ]
+        });
+        return ()=>observer.disconnect();
+    }, []);
+    return themeConfig;
+}
+exports.LiveMonacoEditor = __webpack_exports__.LiveMonacoEditor;
+exports.editorThemeConfigs = __webpack_exports__.editorThemeConfigs;
+exports.monacoFullSample = __webpack_exports__.monacoFullSample;
+exports.monacoSample = __webpack_exports__.monacoSample;
+exports.registerAllMonacoThemes = __webpack_exports__.registerAllMonacoThemes;
+exports.useEditorThemeConfig = __webpack_exports__.useEditorThemeConfig;
+for(var __rspack_i in __webpack_exports__)if (-1 === [
+    "LiveMonacoEditor",
+    "editorThemeConfigs",
+    "monacoFullSample",
+    "monacoSample",
+    "registerAllMonacoThemes",
+    "useEditorThemeConfig"
+].indexOf(__rspack_i)) exports[__rspack_i] = __webpack_exports__[__rspack_i];
+Object.defineProperty(exports, '__esModule', {
+    value: true
+});