@uipath/apollo-wind 2.57.0 → 2.57.1

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

@@ -0,0 +1,264 @@
+import { jsx } from "react/jsx-runtime";
+import react from "@monaco-editor/react";
+import { useEffect, useId, useRef, useState } from "react";
+import { apolloCoreDarkCodeMirror, apolloCoreDarkHCCodeMirror, apolloCoreDarkHCMonaco, apolloCoreDarkMonaco, apolloCoreLightCodeMirror, apolloCoreLightHCCodeMirror, apolloCoreLightHCMonaco, apolloCoreLightMonaco, apolloFutureDarkCodeMirror, apolloFutureDarkMonaco, apolloFutureLightCodeMirror, apolloFutureLightMonaco } from "../../editor-themes/index.js";
+const editorThemeConfigs = [
+    {
+        key: 'future-dark',
+        label: 'Future Dark',
+        monacoThemeName: 'apollo-future-dark',
+        monacoExport: 'apolloFutureDarkMonaco',
+        cmExport: 'apolloFutureDarkCodeMirror',
+        monacoThemeObj: apolloFutureDarkMonaco,
+        cmTokens: apolloFutureDarkCodeMirror,
+        isDark: true,
+        family: 'Future'
+    },
+    {
+        key: 'future-light',
+        label: 'Future Light',
+        monacoThemeName: 'apollo-future-light',
+        monacoExport: 'apolloFutureLightMonaco',
+        cmExport: 'apolloFutureLightCodeMirror',
+        monacoThemeObj: apolloFutureLightMonaco,
+        cmTokens: apolloFutureLightCodeMirror,
+        isDark: false,
+        family: 'Future'
+    },
+    {
+        key: 'dark',
+        label: 'Dark',
+        monacoThemeName: 'apollo-core-dark',
+        monacoExport: 'apolloCoreDarkMonaco',
+        cmExport: 'apolloCoreDarkCodeMirror',
+        monacoThemeObj: apolloCoreDarkMonaco,
+        cmTokens: apolloCoreDarkCodeMirror,
+        isDark: true,
+        family: 'Core'
+    },
+    {
+        key: 'light',
+        label: 'Light',
+        monacoThemeName: 'apollo-core-light',
+        monacoExport: 'apolloCoreLightMonaco',
+        cmExport: 'apolloCoreLightCodeMirror',
+        monacoThemeObj: apolloCoreLightMonaco,
+        cmTokens: apolloCoreLightCodeMirror,
+        isDark: false,
+        family: 'Core'
+    },
+    {
+        key: 'dark-hc',
+        label: 'Dark High Contrast',
+        monacoThemeName: 'apollo-core-dark-hc',
+        monacoExport: 'apolloCoreDarkHCMonaco',
+        cmExport: 'apolloCoreDarkHCCodeMirror',
+        monacoThemeObj: apolloCoreDarkHCMonaco,
+        cmTokens: apolloCoreDarkHCCodeMirror,
+        isDark: true,
+        family: 'Core HC'
+    },
+    {
+        key: 'light-hc',
+        label: 'Light High Contrast',
+        monacoThemeName: 'apollo-core-light-hc',
+        monacoExport: 'apolloCoreLightHCMonaco',
+        cmExport: 'apolloCoreLightHCCodeMirror',
+        monacoThemeObj: apolloCoreLightHCMonaco,
+        cmTokens: 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-${useId().replace(/[^a-zA-Z0-9]/g, '')}.${extension}`;
+    const monacoRef = useRef(null);
+    useEffect(()=>()=>{
+            if (monacoRef.current) releaseDemoTypescriptDefaults(monacoRef.current);
+            monacoRef.current = null;
+        }, []);
+    return /*#__PURE__*/ jsx(react, {
+        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] = useState(getStorybookThemeConfig);
+    useEffect(()=>{
+        const observer = new MutationObserver(()=>setThemeConfig(getStorybookThemeConfig()));
+        observer.observe(document.body, {
+            attributes: true,
+            attributeFilter: [
+                'class'
+            ]
+        });
+        return ()=>observer.disconnect();
+    }, []);
+    return themeConfig;
+}
+export { LiveMonacoEditor, editorThemeConfigs, monacoFullSample, monacoSample, registerAllMonacoThemes, useEditorThemeConfig };

package/dist/components/ui/dialog.cjs

@@ -53,6 +53,7 @@ const external_lucide_react_namespaceObject = require("lucide-react");
 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 dialog_surface_cjs_namespaceObject = require("../../lib/dialog-surface.cjs");
 const index_cjs_namespaceObject = require("../../lib/index.cjs");
 function Dialog({ ...props }) {
     return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(react_dialog_namespaceObject.Root, {
@@ -73,7 +74,7 @@ function DialogPortal({ ...props }) {
         ...props
     });
 }
-const dialogContentVariants = (0, external_class_variance_authority_namespaceObject.cva)('bg-surface-raised text-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 relative z-50 border border-border-subtle shadow-xl duration-200', {
+const dialogContentVariants = (0, external_class_variance_authority_namespaceObject.cva)(`${dialog_surface_cjs_namespaceObject.dialogSurfaceClassName} data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 relative z-50 duration-200`, {
     variants: {
         variant: {
             default: 'grid w-full max-w-[calc(100%-2rem)] gap-4 rounded-2xl p-6 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 sm:max-w-lg',

package/dist/components/ui/dialog.js

@@ -6,6 +6,7 @@ import { Maximize2, Minimize2, XIcon } from "lucide-react";
 import { forwardRef, useState } from "react";
 import { Button } from "./button.js";
 import { useResolvedPortalContainer } from "./portal-container.js";
+import { dialogSurfaceClassName } from "../../lib/dialog-surface.js";
 import { cn } from "../../lib/index.js";
 function Dialog({ ...props }) {
     return /*#__PURE__*/ jsx(Root, {
@@ -26,7 +27,7 @@ function DialogPortal({ ...props }) {
         ...props
     });
 }
-const dialogContentVariants = cva('bg-surface-raised text-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 relative z-50 border border-border-subtle shadow-xl duration-200', {
+const dialogContentVariants = cva(`${dialogSurfaceClassName} data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 relative z-50 duration-200`, {
     variants: {
         variant: {
             default: 'grid w-full max-w-[calc(100%-2rem)] gap-4 rounded-2xl p-6 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 sm:max-w-lg',

package/dist/components/ui/index.cjs

@@ -45,7 +45,7 @@ var __webpack_modules__ = {
     "./combobox" (module) {
         module.exports = require("./combobox.cjs");
     },
-    "./command" (module) {
+    "@/components/ui/command" (module) {
         module.exports = require("./command.cjs");
     },
     "@/components/ui/context-menu" (module) {
@@ -69,7 +69,7 @@ var __webpack_modules__ = {
     "@/components/ui/dropdown-menu" (module) {
         module.exports = require("./dropdown-menu.cjs");
     },
-    "./editable-cell" (module) {
+    "@/components/ui/editable-cell" (module) {
         module.exports = require("./editable-cell.cjs");
     },
     "./empty-state" (module) {
@@ -171,22 +171,22 @@ var __webpack_modules__ = {
     "./switch" (module) {
         module.exports = require("./switch.cjs");
     },
-    "./table" (module) {
+    "@/components/ui/table" (module) {
         module.exports = require("./table.cjs");
     },
     "./tabs" (module) {
         module.exports = require("./tabs.cjs");
     },
-    "./textarea" (module) {
+    "@/components/ui/textarea" (module) {
         module.exports = require("./textarea.cjs");
     },
     "./toggle-group" (module) {
         module.exports = require("./toggle-group.cjs");
     },
-    "./toggle" (module) {
+    "@/components/ui/toggle" (module) {
         module.exports = require("./toggle.cjs");
     },
-    "./tooltip" (module) {
+    "@/components/ui/tooltip" (module) {
         module.exports = require("./tooltip.cjs");
     },
     "./tree-view" (module) {
@@ -347,7 +347,7 @@ var __webpack_exports__ = {};
         "default"
     ].indexOf(__rspack_import_key) < 0) __rspack_reexport[__rspack_import_key] = ()=>_combobox__rspack_import_14[__rspack_import_key];
     __webpack_require__.d(__webpack_exports__, __rspack_reexport);
-    var _command__rspack_import_15 = __webpack_require__("./command");
+    var _command__rspack_import_15 = __webpack_require__("@/components/ui/command");
     var __rspack_reexport = {};
     for(const __rspack_import_key in _command__rspack_import_15)if ([
         "TreeView",
@@ -403,7 +403,7 @@ var __webpack_exports__ = {};
         "default"
     ].indexOf(__rspack_import_key) < 0) __rspack_reexport[__rspack_import_key] = ()=>_dropdown_menu__rspack_import_22[__rspack_import_key];
     __webpack_require__.d(__webpack_exports__, __rspack_reexport);
-    var _editable_cell__rspack_import_23 = __webpack_require__("./editable-cell");
+    var _editable_cell__rspack_import_23 = __webpack_require__("@/components/ui/editable-cell");
     var __rspack_reexport = {};
     for(const __rspack_import_key in _editable_cell__rspack_import_23)if ([
         "TreeView",
@@ -641,7 +641,7 @@ var __webpack_exports__ = {};
         "default"
     ].indexOf(__rspack_import_key) < 0) __rspack_reexport[__rspack_import_key] = ()=>_switch__rspack_import_56[__rspack_import_key];
     __webpack_require__.d(__webpack_exports__, __rspack_reexport);
-    var _table__rspack_import_57 = __webpack_require__("./table");
+    var _table__rspack_import_57 = __webpack_require__("@/components/ui/table");
     var __rspack_reexport = {};
     for(const __rspack_import_key in _table__rspack_import_57)if ([
         "TreeView",
@@ -655,14 +655,14 @@ var __webpack_exports__ = {};
         "default"
     ].indexOf(__rspack_import_key) < 0) __rspack_reexport[__rspack_import_key] = ()=>_tabs__rspack_import_58[__rspack_import_key];
     __webpack_require__.d(__webpack_exports__, __rspack_reexport);
-    var _textarea__rspack_import_59 = __webpack_require__("./textarea");
+    var _textarea__rspack_import_59 = __webpack_require__("@/components/ui/textarea");
     var __rspack_reexport = {};
     for(const __rspack_import_key in _textarea__rspack_import_59)if ([
         "TreeView",
         "default"
     ].indexOf(__rspack_import_key) < 0) __rspack_reexport[__rspack_import_key] = ()=>_textarea__rspack_import_59[__rspack_import_key];
     __webpack_require__.d(__webpack_exports__, __rspack_reexport);
-    var _toggle__rspack_import_60 = __webpack_require__("./toggle");
+    var _toggle__rspack_import_60 = __webpack_require__("@/components/ui/toggle");
     var __rspack_reexport = {};
     for(const __rspack_import_key in _toggle__rspack_import_60)if ([
         "TreeView",
@@ -676,7 +676,7 @@ var __webpack_exports__ = {};
         "default"
     ].indexOf(__rspack_import_key) < 0) __rspack_reexport[__rspack_import_key] = ()=>_toggle_group__rspack_import_61[__rspack_import_key];
     __webpack_require__.d(__webpack_exports__, __rspack_reexport);
-    var _tooltip__rspack_import_62 = __webpack_require__("./tooltip");
+    var _tooltip__rspack_import_62 = __webpack_require__("@/components/ui/tooltip");
     var __rspack_reexport = {};
     for(const __rspack_import_key in _tooltip__rspack_import_62)if ([
         "TreeView",

package/dist/lib/dialog-surface.cjs

@@ -0,0 +1,36 @@
+"use strict";
+var __webpack_require__ = {};
+(()=>{
+    __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__, {
+    dialogSurfaceClassName: ()=>dialogSurfaceClassName
+});
+const dialogSurfaceClassName = 'bg-surface-raised text-foreground border border-border-subtle shadow-xl';
+exports.dialogSurfaceClassName = __webpack_exports__.dialogSurfaceClassName;
+for(var __rspack_i in __webpack_exports__)if (-1 === [
+    "dialogSurfaceClassName"
+].indexOf(__rspack_i)) exports[__rspack_i] = __webpack_exports__[__rspack_i];
+Object.defineProperty(exports, '__esModule', {
+    value: true
+});

package/dist/lib/dialog-surface.d.ts

@@ -0,0 +1 @@
+export declare const dialogSurfaceClassName = "bg-surface-raised text-foreground border border-border-subtle shadow-xl";

package/dist/lib/dialog-surface.js

@@ -0,0 +1,2 @@
+const dialogSurfaceClassName = 'bg-surface-raised text-foreground border border-border-subtle shadow-xl';
+export { dialogSurfaceClassName };

package/dist/styles.css

@@ -1159,6 +1159,9 @@
   .h-\[400px\] {
     height: 400px;
   }
+  .h-\[420px\] {
+    height: 420px;
+  }
   .h-\[500px\] {
     height: 500px;
   }
@@ -6294,14 +6297,14 @@
       }
     }
   }
-  .sm\:mt-0 {
+  .sm\:max-w-2xl {
     @media (width >= 40rem) {
-      margin-top: calc(var(--spacing) * 0);
+      max-width: var(--container-2xl);
     }
   }
-  .sm\:max-w-2xl {
+  .sm\:max-w-3xl {
     @media (width >= 40rem) {
-      max-width: var(--container-2xl);
+      max-width: var(--container-3xl);
     }
   }
   .sm\:max-w-lg {
@@ -6358,11 +6361,6 @@
       }
     }
   }
-  .sm\:rounded-lg {
-    @media (width >= 40rem) {
-      border-radius: var(--radius-lg);
-    }
-  }
   .sm\:border-t-0 {
     @media (width >= 40rem) {
       border-top-style: var(--tw-border-style);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uipath/apollo-wind",
-  "version": "2.57.0",
+  "version": "2.57.1",
   "description": "UiPath wind design system - A Tailwind CSS based React component library",
   "type": "module",
   "main": "./dist/index.js",