@parallelworks/ui 0.1.0 → 0.3.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/assets/editor.worker-CuBRIwi-.js +14776 -0
- package/dist/assets/json.worker-8ytS02vz.js +22161 -0
- package/dist/assets/yaml.worker-DJC-VUcv.js +48367 -0
- package/dist/chunks/CodePreviewEditor-CSPRILMp.js +61 -0
- package/dist/chunks/Indicator-hBSIxOPK.js +39 -0
- package/dist/chunks/Loader-DQiZ75fa.js +25 -0
- package/dist/chunks/Markdown-C5Re2ezs.js +101 -0
- package/dist/chunks/MarkdownImpl-Bq4QhrtA.js +33 -0
- package/dist/chunks/Modal-sOUEwebV.js +121 -0
- package/dist/chunks/Monaco-CC4ak1JG.js +717 -0
- package/dist/chunks/Provider-DvVvScTQ.js +391 -0
- package/dist/chunks/StatusBadge-DXp4zkSd.js +46 -0
- package/dist/chunks/SwitchToggle-2uRw8ZeJ.js +725 -0
- package/dist/chunks/SwitchToggleSmall-FcsaYSTs.js +14 -0
- package/dist/chunks/Table-C5z6qWjM.js +91 -0
- package/dist/chunks/Tooltip-WgbiC_nd.js +71 -0
- package/dist/chunks/editor-D55tumuZ.js +372 -0
- package/dist/chunks/lib-DTgL8klR.js +191 -0
- package/dist/chunks/list-7PyDF1tz.js +465 -0
- package/dist/components/CollapsiblePanel.d.ts +27 -0
- package/dist/components/CopyToClipboard.d.ts +17 -0
- package/dist/components/Dropdown.d.ts +24 -0
- package/dist/components/Indicator.d.ts +4 -0
- package/dist/components/Listbox.d.ts +18 -0
- package/dist/components/Markdown.d.ts +7 -0
- package/dist/components/MarkdownImpl.d.ts +2 -0
- package/dist/components/MultiSelect.d.ts +19 -0
- package/dist/components/Overview.d.ts +12 -0
- package/dist/components/Provider.d.ts +438 -0
- package/dist/components/SectionHeader.d.ts +6 -0
- package/dist/components/SwitchToggle.d.ts +12 -0
- package/dist/components/SwitchToggleSmall.d.ts +6 -0
- package/dist/components/dropdownUtils.d.ts +18 -0
- package/dist/editor/Editor.d.ts +2 -0
- package/dist/editor/EditorField.d.ts +11 -0
- package/dist/editor/FormCodePanel.d.ts +8 -0
- package/dist/editor/Monaco.d.ts +31 -0
- package/dist/editor/index.d.ts +7 -0
- package/dist/editor/index.js +2 -0
- package/dist/editor/themes.d.ts +4 -0
- package/dist/editor/useCssIsDark.d.ts +6 -0
- package/dist/editor/workers.d.ts +6 -0
- package/dist/file-explorer/FileExplorer.d.ts +23 -0
- package/dist/file-explorer/FileExplorerContext.d.ts +17 -0
- package/dist/file-explorer/FilePreview/CodePreviewEditor.d.ts +6 -0
- package/dist/file-explorer/FilePreview/Inline.d.ts +13 -0
- package/dist/file-explorer/FilePreview/StreamedBadge.d.ts +1 -0
- package/dist/file-explorer/FilePreview/Viewer.d.ts +15 -0
- package/dist/file-explorer/FilePreview/index.d.ts +15 -0
- package/dist/file-explorer/FilePreview/parse.d.ts +24 -0
- package/dist/file-explorer/FilePreview/previewCache.d.ts +26 -0
- package/dist/file-explorer/FilePreview/previewType.d.ts +21 -0
- package/dist/file-explorer/FilePreview/readCappedBytes.d.ts +37 -0
- package/dist/file-explorer/FilePreview/useObjectBlobUrl.d.ts +16 -0
- package/dist/file-explorer/FilePreview/useObjectText.d.ts +23 -0
- package/dist/file-explorer/FilePreview/usePresignedUrl.d.ts +12 -0
- package/dist/file-explorer/FileRow.d.ts +35 -0
- package/dist/file-explorer/FileRowsWindow.d.ts +43 -0
- package/dist/file-explorer/FileTable.d.ts +26 -0
- package/dist/file-explorer/FileTableHeaders.d.ts +13 -0
- package/dist/file-explorer/LoadMoreRow.d.ts +15 -0
- package/dist/file-explorer/TreeView.d.ts +28 -0
- package/dist/file-explorer/helpers.d.ts +47 -0
- package/dist/file-explorer/index.d.ts +10 -0
- package/dist/file-explorer/index.js +5646 -0
- package/dist/file-explorer/lib/batch.d.ts +3 -0
- package/dist/file-explorer/lib/errors.d.ts +3 -0
- package/dist/file-explorer/lib/fileExplorer.d.ts +32 -0
- package/dist/file-explorer/lib/paging.d.ts +93 -0
- package/dist/file-explorer/lib/types.d.ts +92 -0
- package/dist/file-explorer/lib/utils.d.ts +37 -0
- package/dist/file-explorer/toasts.d.ts +9 -0
- package/dist/file-explorer/treeRows.d.ts +35 -0
- package/dist/file-explorer/useNearEnd.d.ts +7 -0
- package/dist/form/FieldWrapper.d.ts +10 -0
- package/dist/form/Fields/BooleanField.d.ts +12 -0
- package/dist/form/Fields/BucketReadOnlyField.d.ts +7 -0
- package/dist/form/Fields/CheckboxGroupField.d.ts +18 -0
- package/dist/form/Fields/ColorField.d.ts +8 -0
- package/dist/form/Fields/DropdownField.d.ts +24 -0
- package/dist/form/Fields/DurationField.d.ts +13 -0
- package/dist/form/Fields/LabelField.d.ts +9 -0
- package/dist/form/Fields/MultiDropdownField.d.ts +18 -0
- package/dist/form/Fields/NumberField.d.ts +13 -0
- package/dist/form/Fields/ObjectField.d.ts +8 -0
- package/dist/form/Fields/RadioField.d.ts +9 -0
- package/dist/form/Fields/RangeField.d.ts +11 -0
- package/dist/form/Fields/ResourceOptionIcon.d.ts +11 -0
- package/dist/form/Fields/StepField.d.ts +3 -0
- package/dist/form/Fields/StringField.d.ts +17 -0
- package/dist/form/Fields/TextAreaField.d.ts +8 -0
- package/dist/form/Fields/durationValidity.d.ts +2 -0
- package/dist/form/Form.d.ts +105 -0
- package/dist/form/SpecialTypes/DropdownWrapper.d.ts +14 -0
- package/dist/form/SpecialTypes/FormikCustomDropdown.d.ts +53 -0
- package/dist/form/SpecialTypes/FormikCustomInput.d.ts +17 -0
- package/dist/form/SpecialTypes/FormikMultiSelectDropdown.d.ts +13 -0
- package/dist/form/SpecialTypes/FormikNumericInput.d.ts +9 -0
- package/dist/form/SpecialTypes/index.d.ts +3 -0
- package/dist/form/Wizard/WizardContainer.d.ts +5 -0
- package/dist/form/Wizard/WizardNavigation.d.ts +2 -0
- package/dist/form/Wizard/WizardStepContent.d.ts +8 -0
- package/dist/form/Wizard/WizardStepIndicator.d.ts +2 -0
- package/dist/form/Wizard/types.d.ts +171 -0
- package/dist/form/Wizard/useWizardState.d.ts +28 -0
- package/dist/form/Wizard/utils.d.ts +2 -0
- package/dist/form/fieldRegistry.d.ts +7 -0
- package/dist/form/index.d.ts +16 -0
- package/dist/form/index.js +2319 -0
- package/dist/form/lib.d.ts +15 -0
- package/dist/form/types/fieldComponentTypes.d.ts +32 -0
- package/dist/form/types/fieldTypes.d.ts +80 -0
- package/dist/form/types/workflow-schema.d.ts +1107 -0
- package/dist/form/useParsedOpts.d.ts +5 -0
- package/dist/form/usePrevious.d.ts +1 -0
- package/dist/form/utils/checkShowIfObject.d.ts +1 -0
- package/dist/form/utils/getParentValue.d.ts +1 -0
- package/dist/form/utils/getPlaceholder.d.ts +2 -0
- package/dist/form/utils/getValueUsingPath.d.ts +1 -0
- package/dist/form/utils/pwResolver.d.ts +18 -0
- package/dist/form/utils/secondaryField.d.ts +8 -0
- package/dist/form/utils/slurmDuration.d.ts +15 -0
- package/dist/icons.d.ts +1 -1
- package/dist/icons.js +2 -2
- package/dist/index.d.ts +17 -0
- package/dist/index.js +42 -350
- package/dist/list/ListTable.d.ts +63 -0
- package/dist/list/RowContextMenu.d.ts +113 -0
- package/dist/list/index.d.ts +2 -0
- package/dist/list/index.js +2 -0
- package/dist/logviewer/LogViewer.d.ts +18 -0
- package/dist/logviewer/index.d.ts +1 -0
- package/dist/logviewer/index.js +534 -0
- package/dist/logviewer/logviewer.css +70 -0
- package/dist/styles/theme.css +30 -0
- package/dist/styles.css +1 -1
- package/dist/workflow/AnnotationBanner.d.ts +5 -0
- package/dist/workflow/Collapse.d.ts +6 -0
- package/dist/workflow/DependencyGraph.d.ts +15 -0
- package/dist/workflow/JobSummary.d.ts +38 -0
- package/dist/workflow/MatrixGroup.d.ts +41 -0
- package/dist/workflow/Reveal.d.ts +7 -0
- package/dist/workflow/TreeView.d.ts +42 -0
- package/dist/workflow/index.d.ts +1 -0
- package/dist/workflow/index.js +2331 -0
- package/package.json +71 -6
|
@@ -0,0 +1,5 @@
|
|
|
1
|
+
import { type WorkflowVariables } from '@parallelworks/workflow-parser';
|
|
2
|
+
/**
|
|
3
|
+
* useMemo won't work here — Formik values changes on every keystroke, so this hook extracts which inputs.* keys the schema references and re-parses only when those change. Defaults `userVars`/`secretKeys` to empty — callers in React scope should pass them from `useUserVars()` so the parser leaves `${{ var.SECRET }}` literal during template eval (otherwise the recursive substitution turns `"https://${{ var.PAT }}@host/"` into `"https://@host/"`).
|
|
4
|
+
*/
|
|
5
|
+
export declare function useParsedOpts(rawOptions: Record<string, any>, values: Record<string, any>, organizationVariables: WorkflowVariables | undefined, userVars?: Record<string, string>, secretKeys?: string[]): Record<string, any>;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export declare function usePrevious<T>(value: T): T | undefined;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export declare function checkShowIfObject(showIfObject: object, formValues: object, index?: number): boolean[];
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export declare function getParentValue(index: number | undefined, targetField: any, values: object, dependentPath: string, field: any): unknown;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export declare function getValueUsingPath(obj: Record<string, any>, path: string): any | undefined;
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
interface OptionWithValue {
|
|
2
|
+
value: {
|
|
3
|
+
name?: string;
|
|
4
|
+
user?: string;
|
|
5
|
+
namespace?: string;
|
|
6
|
+
type?: string;
|
|
7
|
+
} | undefined;
|
|
8
|
+
}
|
|
9
|
+
interface OptionCategory {
|
|
10
|
+
options: OptionWithValue[];
|
|
11
|
+
}
|
|
12
|
+
export interface PwResolverOptions {
|
|
13
|
+
ownerKey: 'user' | 'namespace';
|
|
14
|
+
specialCase?: (name: string, owner?: string) => unknown | undefined;
|
|
15
|
+
}
|
|
16
|
+
export declare function resolvePwString(raw: unknown, options: OptionCategory[], fallbackUsername: string, opts: PwResolverOptions): unknown;
|
|
17
|
+
export declare function resolvePwValue(currentValue: unknown, options: OptionCategory[], fallbackUsername: string, opts: PwResolverOptions): unknown;
|
|
18
|
+
export {};
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
type SecondaryOption = {
|
|
2
|
+
value?: unknown;
|
|
3
|
+
secondaryValue?: unknown;
|
|
4
|
+
options?: unknown[];
|
|
5
|
+
};
|
|
6
|
+
export declare function findSecondaryOption(options: unknown[], value: unknown): SecondaryOption | undefined;
|
|
7
|
+
export declare function applySecondaryField(secondaryField: string | string[] | undefined, secondaryValue: unknown, setFieldValue: (field: string, value: unknown) => void): void;
|
|
8
|
+
export {};
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
export declare function parseSlurmDuration(text: string): number | null;
|
|
2
|
+
export declare function formatSecondsAsSlurmDuration(totalSeconds: number): string;
|
|
3
|
+
export declare const FLEX_MAX_DURATION_RANGE: {
|
|
4
|
+
min: number;
|
|
5
|
+
max: number;
|
|
6
|
+
};
|
|
7
|
+
export declare const FLEX_WAIT_TIME_RANGE: {
|
|
8
|
+
min: number;
|
|
9
|
+
max: number;
|
|
10
|
+
};
|
|
11
|
+
export declare const STANDARD_MAX_DURATION_RANGE: {
|
|
12
|
+
min: number;
|
|
13
|
+
max: number;
|
|
14
|
+
};
|
|
15
|
+
export declare function collectPartitionDurationIssues(partitions: unknown[] | undefined, invalidDurationPaths: string[]): string[];
|
package/dist/icons.d.ts
CHANGED
|
@@ -4,7 +4,7 @@ import { BsZoomIn as ChartZoomIcon, BsLayers as InfrastructureLayersIcon, BsCurr
|
|
|
4
4
|
import { FaInfoCircle as InfoIcon } from 'react-icons/fa';
|
|
5
5
|
export type { IconType } from 'react-icons';
|
|
6
6
|
export { AiOutlineRollback as RollbackIcon } from 'react-icons/ai';
|
|
7
|
-
export { BiExpandVertical as ExpandVerticalIcon, BiBuildings as OrganizationIcon, BiPause as PauseIcon, BiSolidCheckShield as ShieldIcon, BiPlay as StartIcon, BiStop as StopIcon, BiSolidTrashAlt as TrashIcon, } from 'react-icons/bi';
|
|
7
|
+
export { BiBell as UnmuteIcon, BiBellOff as MuteIcon, BiExpandVertical as ExpandVerticalIcon, BiBuildings as OrganizationIcon, BiPause as PauseIcon, BiSolidCheckShield as ShieldIcon, BiPlay as StartIcon, BiStop as StopIcon, BiSolidTrashAlt as TrashIcon, } from 'react-icons/bi';
|
|
8
8
|
export { BsStar as PinIcon, BsStarFill as PinFilledIcon, BsGrid as GridIcon, BsBucket as BucketIcon, BsArrowsCollapse as CollapseIcon, BsThreeDotsVertical as MenuIcon, BsThreeDots as MoreIcon, BsSearch as SearchOutlineIcon, BsTerminalFill as UserWorkspaceFillIcon, BsTerminal as UserWorkspaceIcon, BsFileEarmarkZip as ZipIcon, BsMusicNoteBeamed as MusicIcon, } from 'react-icons/bs';
|
|
9
9
|
export { FaAmazon as AmazonIcon, FaCentos as CentOSIcon, FaCog as CogIcon, FaExclamationTriangle as WarningTriangleIcon, FaFile as FileSolidIcon, FaFilePdf as PdfSolidIcon, FaFolder as FolderSolidIcon, FaGithub as GitHubIcon, FaImage as ImageSolidIcon, FaLinux as LinuxIcon, FaPaperclip as AttachmentIcon, FaRedhat as RedHatIcon, FaRobot as RobotIcon, FaShieldAlt as ShieldAltIcon, FaStop as StopSolidIcon, FaSuse as SuseIcon, FaUbuntu as UbuntuIcon, FaUsers as AccessIcon, FaPlus as AddIcon, FaAngleDown as AngleDownIcon, FaAngleLeft as AngleLeftIcon, FaAngleRight as AngleRightIcon, FaAngleUp as AngleUpIcon, FaArrowDown as ArrowDownIcon, FaArrowLeft as ArrowLeftIcon, FaArrowRight as ArrowRightIcon, FaArrowUp as ArrowUpIcon, FaCaretDown as CaretDownIcon, FaChartLine as ChartIcon, FaComments as ChatIcon, FaCheck as CheckIcon, FaChevronDown as ChevronDownIcon, FaChevronUp as ChevronUpIcon, FaCloud as CloudIcon, FaDollarSign as CostDashboardIcon, FaDocker as DockerIcon, FaCloudDownloadAlt as DownloadIcon, FaEdit as EditIcon, FaRunning as ExecuteWorkflow, FaExpand as ExpandIcon, FaFilter as FilterIcon, FaFlask as FlaskIcon, FaRegFolder as FolderIcon, FaCogs as GearsIcon, FaGlobe as GlobeIcon, FaEye as HiddenFalseIcon, FaEyeSlash as HiddenTrueIcon, FaRegFileImage as ImageIcon, FaKey as KeyIcon, FaLink as LinkIcon, FaLock as LockIcon, FaGlobeAmericas as MarketplaceIcon, FaRegCircle as NotRunningIcon, FaOpenid as OIDCIcon, FaRocket as PartnerIcon, FaKey as PasswordIcon, FaChartPie as PieChartIcon, FaPowerOff as PowerIcon, FaPrint as PrintIcon, FaGlobeAmericas as PublishIcon, FaQrcode as QRCodeIcon, FaLayerGroup as ResourceGroupIcon, FaUndoAlt as RetryIcon, FaSave as SaveIcon, FaList as SchedulerIcon, FaSearch as SearchIcon, FaUsers as SharingIcon, FaCompress as ShrinkIcon, FaDesktop as SnapshotIcon, FaSlack as SlackIcon, FaTerminal as TerminalIcon, FaTimes as TimesIcon, FaQuestionCircle as UserGuideIcon, FaStar as FeaturedIcon, FaUser as UserIcon, FaUsers as UsersIcon, FaWindows as WindowsIcon, } from 'react-icons/fa';
|
|
10
10
|
export { FaApple as AppleIcon, FaArrowsRotate as RefreshArrowsIcon, FaDebian as DebianIcon, FaWandMagicSparkles as CustomizeIcon, FaFilterCircleXmark as FilterClearIcon, FaRegFolderOpen as FolderOpenIcon, FaLocationDot as IpAddressIcon, FaUpRightFromSquare as NewWindowIcon, FaInbox as NotificationInboxIcon, FaRegFilePdf as PdfIcon, } from 'react-icons/fa6';
|
package/dist/icons.js
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import cx from "classnames";
|
|
2
|
-
import { BiBuildings as OrganizationIcon, BiError as ErrorIcon, BiExpandVertical as ExpandVerticalIcon, BiPause as PauseIcon, BiPlay as StartIcon, BiSolidCheckShield as ShieldIcon, BiSolidTrashAlt as TrashIcon, BiStop as StopIcon } from "react-icons/bi";
|
|
2
|
+
import { BiBell as UnmuteIcon, BiBellOff as MuteIcon, BiBuildings as OrganizationIcon, BiError as ErrorIcon, BiExpandVertical as ExpandVerticalIcon, BiPause as PauseIcon, BiPlay as StartIcon, BiSolidCheckShield as ShieldIcon, BiSolidTrashAlt as TrashIcon, BiStop as StopIcon } from "react-icons/bi";
|
|
3
3
|
import { BsArrowsCollapse as CollapseIcon, BsBucket as BucketIcon, BsCurrencyDollar as MoneyIcon, BsFileEarmarkZip as ZipIcon, BsGrid as GridIcon, BsLayers as InfrastructureLayersIcon, BsMusicNoteBeamed as MusicIcon, BsSearch as SearchOutlineIcon, BsStar as PinIcon, BsStarFill as PinFilledIcon, BsTerminal as UserWorkspaceIcon, BsTerminalFill as UserWorkspaceFillIcon, BsThreeDots as MoreIcon, BsThreeDotsVertical as MenuIcon, BsZoomIn as ChartZoomIcon } from "react-icons/bs";
|
|
4
4
|
import { FaAmazon as AmazonIcon, FaAngleDown as AngleDownIcon, FaAngleLeft as AngleLeftIcon, FaAngleRight as AngleRightIcon, FaAngleUp as AngleUpIcon, FaArrowDown as ArrowDownIcon, FaArrowLeft as ArrowLeftIcon, FaArrowRight as ArrowRightIcon, FaArrowUp as ArrowUpIcon, FaCaretDown as CaretDownIcon, FaCentos as CentOSIcon, FaChartLine as ChartIcon, FaChartPie as PieChartIcon, FaCheck as CheckIcon, FaChevronDown as ChevronDownIcon, FaChevronUp as ChevronUpIcon, FaCircleNotch, FaCloud as CloudIcon, FaCloudDownloadAlt as DownloadIcon, FaCog as CogIcon, FaCogs as GearsIcon, FaComments as ChatIcon, FaCompress as ShrinkIcon, FaDesktop as SnapshotIcon, FaDocker as DockerIcon, FaDollarSign as CostDashboardIcon, FaEdit as EditIcon, FaExclamationTriangle as WarningTriangleIcon, FaExpand as ExpandIcon, FaEye as HiddenFalseIcon, FaEyeSlash as HiddenTrueIcon, FaFile as FileSolidIcon, FaFilePdf as PdfSolidIcon, FaFilter as FilterIcon, FaFlask as FlaskIcon, FaFolder as FolderSolidIcon, FaGithub as GitHubIcon, FaGlobe as GlobeIcon, FaGlobeAmericas as MarketplaceIcon, FaGlobeAmericas as PublishIcon, FaImage as ImageSolidIcon, FaInfoCircle as InfoIcon, FaKey as KeyIcon, FaKey as PasswordIcon, FaLayerGroup as ResourceGroupIcon, FaLink as LinkIcon, FaLinux as LinuxIcon, FaList as SchedulerIcon, FaLock as LockIcon, FaOpenid as OIDCIcon, FaPaperclip as AttachmentIcon, FaPlus as AddIcon, FaPowerOff as PowerIcon, FaPrint as PrintIcon, FaQrcode as QRCodeIcon, FaQuestionCircle as UserGuideIcon, FaRedhat as RedHatIcon, FaRegCircle as NotRunningIcon, FaRegFileImage as ImageIcon, FaRegFolder as FolderIcon, FaRobot as RobotIcon, FaRocket as PartnerIcon, FaRunning as ExecuteWorkflow, FaSave as SaveIcon, FaSearch as SearchIcon, FaShieldAlt as ShieldAltIcon, FaSlack as SlackIcon, FaStar as FeaturedIcon, FaStop as StopSolidIcon, FaSuse as SuseIcon, FaTerminal as TerminalIcon, FaTimes as TimesIcon, FaUbuntu as UbuntuIcon, FaUndoAlt as RetryIcon, FaUser as UserIcon, FaUsers as AccessIcon, FaUsers as SharingIcon, FaUsers as UsersIcon, FaWindows as WindowsIcon } from "react-icons/fa";
|
|
5
5
|
import { jsx } from "react/jsx-runtime";
|
|
@@ -35,4 +35,4 @@ function LoaderIcon({ className, ...props }) {
|
|
|
35
35
|
});
|
|
36
36
|
}
|
|
37
37
|
//#endregion
|
|
38
|
-
export { APIIcon, AccessIcon, AddIcon, AlertCircleIcon, AlertFillIcon, AlertIcon, AmazonIcon, AngleDownIcon, AngleLeftIcon, AngleRightIcon, AngleUpIcon, AnthropicIcon, AppleIcon, ArchiveIcon, ArrowDownIcon, ArrowLeftIcon, ArrowRightIcon, ArrowRightStrokeIcon, ArrowUpIcon, AttachmentIcon, BucketIcon, BuildWorkflowIcon, CalendarIcon, CancelIcon, CaretDownIcon, CentOSIcon, ChartIcon, ChartZoomIcon, ChatIcon, CheckIcon, CheckMarkIcon, CheckStrokeIcon, ChevronDownIcon, ChevronDownStrokeIcon, ChevronLeftIcon, ChevronRightIcon, ChevronUpIcon, ClearIcon, ClipboardIcon, ClockIcon, CloseIcon, CloudIcon, CloudUploadIcon, ClusterIcon, CogIcon, CollapseIcon, ComputeIcon, ConnectIcon, CopyIcon, CostDashboardIcon, CustomizeIcon, DebianIcon, DisableCostIcon, DisableUserIcon, DiskIcon, DisplayIcon, DockerIcon, DocumentIcon, DownloadFileIcon, DownloadIcon, DragHandleIcon, DuplicateIcon, EditIcon, EditorIcon, EnableCostIcon, EnableUserIcon, EndpointIcon, ErrorCheckmark, ErrorIcon, EventsIcon, ExecuteWorkflow, ExpandIcon, ExpandVerticalIcon, ExternalLink, EyeIcon, EyeOffIcon, FailIcon, FavoriteIcon, FavoriteOutlineIcon, FeaturedIcon, FileIcon, FileSolidIcon, FileTextIcon, FilesystemIcon, FilterClearIcon, FilterIcon, FlaskIcon, FolderIcon, FolderOpenIcon, FolderSolidIcon, FolderTreeIcon, ForbiddenIcon, ForkIcon, GearIcon, GearsIcon, GitHubIcon, GlobeIcon, GridIcon, HealthMonitoringIcon, HelmIcon, HiddenFalseIcon, HiddenTrueIcon, HistoryIcon, HomeIcon, IdCardIcon, ImageIcon, ImageSolidIcon, ImpersonateIcon, InboxIcon, InfoCircleIcon, InfoIcon, InfrastructureLayersIcon, InstallIcon, IpAddressIcon, JsonIcon, KeyIcon, KubernetesIcon, KubernetesNamespaceIcon, LanguageIcon, LicenseIcon, LinkIcon, LinuxIcon, LoaderIcon, LockIcon, MFA, MailIcon, MarketplaceIcon, MenuIcon, MinimizeIcon, MlIcon, MoneyIcon, MonitorIcon, MoonIcon, MoreIcon, MusicIcon, NewChatIcon, NewWindowIcon, NotRunningIcon, NotificationFillIcon, NotificationInboxIcon, OIDCIcon, OpenAIIcon, OpenInNewGraphIcon, OrganizationIcon, PartnerIcon, PasswordIcon, PauseIcon, PdfIcon, PdfSolidIcon, PieChartIcon, PinFilledIcon, PinIcon, PlusOutlineIcon, PowerIcon, PowershellIcon, PrintIcon, PublishIcon, QRCodeIcon, QuotaIcon, RedHatIcon, RefreshArrowsIcon, RefreshIcon, ReplayIcon, ResourceGroupIcon, RetryIcon, RobotIcon, RollbackIcon, RunWorkflowIcon, RunningIcon, SaveIcon, SchedulerIcon, SearchIcon, SearchOutlineIcon, ServerIcon, SettingsIcon, ShareIcon, SharingIcon, ShieldAltIcon, ShieldIcon, ShieldOutlineIcon, ShrinkIcon, SidebarCloseIcon, SidebarIcon, SidebarOpenIcon, SignOutIcon, SkipIcon, SlackIcon, SnapshotIcon, SortDownIcon, SortUnsortedIcon, SortUpIcon, SparklesIcon, SplitIcon, SpreadsheetIcon, StartIcon, StopIcon, StopSolidIcon, StorageIcon, SubdomainIcon, SuccessCheckmark, SuccessIcon, SunIcon, SuseIcon, TerminalIcon, ThinkingIcon, TimesIcon, TooltipIcon, TrashIcon, TunnelIcon, UbuntuIcon, UnfavoriteIcon, UploadIcon, UserGuideIcon, UserIcon, UserWorkspaceFillIcon, UserWorkspaceIcon, UsersIcon, VideoIcon, WarningIcon, WarningTriangleIcon, WindowsIcon, XIcon, XStrokeIcon, ZapIcon, ZipIcon, ZoomInIcon, ZoomOutIcon };
|
|
38
|
+
export { APIIcon, AccessIcon, AddIcon, AlertCircleIcon, AlertFillIcon, AlertIcon, AmazonIcon, AngleDownIcon, AngleLeftIcon, AngleRightIcon, AngleUpIcon, AnthropicIcon, AppleIcon, ArchiveIcon, ArrowDownIcon, ArrowLeftIcon, ArrowRightIcon, ArrowRightStrokeIcon, ArrowUpIcon, AttachmentIcon, BucketIcon, BuildWorkflowIcon, CalendarIcon, CancelIcon, CaretDownIcon, CentOSIcon, ChartIcon, ChartZoomIcon, ChatIcon, CheckIcon, CheckMarkIcon, CheckStrokeIcon, ChevronDownIcon, ChevronDownStrokeIcon, ChevronLeftIcon, ChevronRightIcon, ChevronUpIcon, ClearIcon, ClipboardIcon, ClockIcon, CloseIcon, CloudIcon, CloudUploadIcon, ClusterIcon, CogIcon, CollapseIcon, ComputeIcon, ConnectIcon, CopyIcon, CostDashboardIcon, CustomizeIcon, DebianIcon, DisableCostIcon, DisableUserIcon, DiskIcon, DisplayIcon, DockerIcon, DocumentIcon, DownloadFileIcon, DownloadIcon, DragHandleIcon, DuplicateIcon, EditIcon, EditorIcon, EnableCostIcon, EnableUserIcon, EndpointIcon, ErrorCheckmark, ErrorIcon, EventsIcon, ExecuteWorkflow, ExpandIcon, ExpandVerticalIcon, ExternalLink, EyeIcon, EyeOffIcon, FailIcon, FavoriteIcon, FavoriteOutlineIcon, FeaturedIcon, FileIcon, FileSolidIcon, FileTextIcon, FilesystemIcon, FilterClearIcon, FilterIcon, FlaskIcon, FolderIcon, FolderOpenIcon, FolderSolidIcon, FolderTreeIcon, ForbiddenIcon, ForkIcon, GearIcon, GearsIcon, GitHubIcon, GlobeIcon, GridIcon, HealthMonitoringIcon, HelmIcon, HiddenFalseIcon, HiddenTrueIcon, HistoryIcon, HomeIcon, IdCardIcon, ImageIcon, ImageSolidIcon, ImpersonateIcon, InboxIcon, InfoCircleIcon, InfoIcon, InfrastructureLayersIcon, InstallIcon, IpAddressIcon, JsonIcon, KeyIcon, KubernetesIcon, KubernetesNamespaceIcon, LanguageIcon, LicenseIcon, LinkIcon, LinuxIcon, LoaderIcon, LockIcon, MFA, MailIcon, MarketplaceIcon, MenuIcon, MinimizeIcon, MlIcon, MoneyIcon, MonitorIcon, MoonIcon, MoreIcon, MusicIcon, MuteIcon, NewChatIcon, NewWindowIcon, NotRunningIcon, NotificationFillIcon, NotificationInboxIcon, OIDCIcon, OpenAIIcon, OpenInNewGraphIcon, OrganizationIcon, PartnerIcon, PasswordIcon, PauseIcon, PdfIcon, PdfSolidIcon, PieChartIcon, PinFilledIcon, PinIcon, PlusOutlineIcon, PowerIcon, PowershellIcon, PrintIcon, PublishIcon, QRCodeIcon, QuotaIcon, RedHatIcon, RefreshArrowsIcon, RefreshIcon, ReplayIcon, ResourceGroupIcon, RetryIcon, RobotIcon, RollbackIcon, RunWorkflowIcon, RunningIcon, SaveIcon, SchedulerIcon, SearchIcon, SearchOutlineIcon, ServerIcon, SettingsIcon, ShareIcon, SharingIcon, ShieldAltIcon, ShieldIcon, ShieldOutlineIcon, ShrinkIcon, SidebarCloseIcon, SidebarIcon, SidebarOpenIcon, SignOutIcon, SkipIcon, SlackIcon, SnapshotIcon, SortDownIcon, SortUnsortedIcon, SortUpIcon, SparklesIcon, SplitIcon, SpreadsheetIcon, StartIcon, StopIcon, StopSolidIcon, StorageIcon, SubdomainIcon, SuccessCheckmark, SuccessIcon, SunIcon, SuseIcon, TerminalIcon, ThinkingIcon, TimesIcon, TooltipIcon, TrashIcon, TunnelIcon, UbuntuIcon, UnfavoriteIcon, UnmuteIcon, UploadIcon, UserGuideIcon, UserIcon, UserWorkspaceFillIcon, UserWorkspaceIcon, UsersIcon, VideoIcon, WarningIcon, WarningTriangleIcon, WindowsIcon, XIcon, XStrokeIcon, ZapIcon, ZipIcon, ZoomInIcon, ZoomOutIcon };
|
package/dist/index.d.ts
CHANGED
|
@@ -1,10 +1,27 @@
|
|
|
1
1
|
export * from './theme/index.js';
|
|
2
2
|
export { default as Callout } from './components/Callout.js';
|
|
3
|
+
export { default as CopyToClipboard } from './components/CopyToClipboard.js';
|
|
4
|
+
export { CopyCodeBlock } from './components/CopyToClipboard.js';
|
|
3
5
|
export { default as DescriptionList } from './components/DescriptionList.js';
|
|
4
6
|
export { DescriptionListItem } from './components/DescriptionList.js';
|
|
7
|
+
export { default as Dropdown } from './components/Dropdown.js';
|
|
8
|
+
export type { IProps as DropdownProps } from './components/Dropdown.js';
|
|
9
|
+
export { DropdownCaret, filterOption, flattenOptions, isCategory, isOption, } from './components/dropdownUtils.js';
|
|
10
|
+
export type { ICategory, IOptions } from './components/dropdownUtils.js';
|
|
5
11
|
export { default as EmptyState } from './components/EmptyState.js';
|
|
12
|
+
export { default as CustomListbox } from './components/Listbox.js';
|
|
6
13
|
export { default as Loader } from './components/Loader.js';
|
|
14
|
+
export { default as Markdown } from './components/Markdown.js';
|
|
15
|
+
export type { MarkdownProps } from './components/Markdown.js';
|
|
7
16
|
export { default as Modal, type ModalProps } from './components/Modal.js';
|
|
17
|
+
export { default as MultiSelectDropdown } from './components/MultiSelect.js';
|
|
18
|
+
export { Overview } from './components/Overview.js';
|
|
19
|
+
export { UIProvider, useNavigation, useNotify, useProvisionCorsRules, useRunFile, useSlots, useStrings, useWorkflowJsonResolver, type RunFileResult, type WorkflowJsonRef, type UIData, type UINavigation, type UINotify, type UISlots, type UIStrings, } from './components/Provider.js';
|
|
20
|
+
export { Indicator } from './components/Indicator.js';
|
|
21
|
+
export { ControlledCollapsiblePanel, MaybeCollapsible, UncontrolledCollapsiblePanel, } from './components/CollapsiblePanel.js';
|
|
22
|
+
export { default as SectionHeader } from './components/SectionHeader.js';
|
|
23
|
+
export { default as SwitchToggleSmall } from './components/SwitchToggleSmall.js';
|
|
8
24
|
export { StatusBadge, StatusDot } from './components/StatusBadge.js';
|
|
25
|
+
export { default as SwitchToggle } from './components/SwitchToggle.js';
|
|
9
26
|
export { CompactTable, Table } from './components/Table.js';
|
|
10
27
|
export { formatTooltipContent, GlobalTooltip, TOOLTIP_ID, TooltipInfo, } from './components/Tooltip.js';
|
package/dist/index.js
CHANGED
|
@@ -1,95 +1,18 @@
|
|
|
1
1
|
import { DEFAULT_PRESET, THEME_PRESETS, THEME_TOKENS, applyTheme, contrastRatio, deriveTheme, isDarkColor } from "./theme/index.js";
|
|
2
|
-
import {
|
|
2
|
+
import { i as Callout, n as CopyCodeBlock, r as CopyToClipboard, t as Markdown } from "./chunks/Markdown-C5Re2ezs.js";
|
|
3
|
+
import { a as useProvisionCorsRules, c as useStrings, i as useNotify, l as useWorkflowJsonResolver, o as useRunFile, r as useNavigation, s as useSlots, t as UIProvider } from "./chunks/Provider-DvVvScTQ.js";
|
|
4
|
+
import { i as formatTooltipContent, n as TOOLTIP_ID, r as TooltipInfo, t as GlobalTooltip } from "./chunks/Tooltip-WgbiC_nd.js";
|
|
5
|
+
import { a as UncontrolledCollapsiblePanel, c as Dropdown, d as flattenOptions, f as isCategory, i as MaybeCollapsible, l as DropdownCaret, n as SectionHeader, o as MultiSelectDropdown, p as isOption, r as ControlledCollapsiblePanel, s as CustomListbox, t as SwitchToggle, u as filterOption } from "./chunks/SwitchToggle-2uRw8ZeJ.js";
|
|
6
|
+
import { t as Loader } from "./chunks/Loader-DQiZ75fa.js";
|
|
7
|
+
import { t as Modal } from "./chunks/Modal-sOUEwebV.js";
|
|
8
|
+
import { t as Indicator } from "./chunks/Indicator-hBSIxOPK.js";
|
|
9
|
+
import { t as SwitchToggleSmall } from "./chunks/SwitchToggleSmall-FcsaYSTs.js";
|
|
10
|
+
import { n as StatusDot, t as StatusBadge } from "./chunks/StatusBadge-DXp4zkSd.js";
|
|
11
|
+
import { n as Table, t as CompactTable } from "./chunks/Table-C5z6qWjM.js";
|
|
3
12
|
import cx from "classnames";
|
|
4
13
|
import { Fragment, jsx, jsxs } from "react/jsx-runtime";
|
|
5
|
-
import React
|
|
6
|
-
import
|
|
7
|
-
import { createPortal } from "react-dom";
|
|
8
|
-
//#region src/components/Callout.tsx
|
|
9
|
-
function CalloutIcon({ type }) {
|
|
10
|
-
if (type === "warning" || type === "error") return /* @__PURE__ */ jsx(AlertIcon, { className: "h-6 w-6 mr-4 text-lg" });
|
|
11
|
-
else return /* @__PURE__ */ jsx(InfoIcon, { className: "h-6 w-6 mr-4 text-lg" });
|
|
12
|
-
}
|
|
13
|
-
function Callout({ type, className = "", children }) {
|
|
14
|
-
return /* @__PURE__ */ jsx("div", {
|
|
15
|
-
className: cx(className, type === "warning" && "bg-orange-100 border-orange-500 text-orange-700", type === "error" && "bg-red-100 border-red-500 text-red-700", type === "info" && "bg-blue-100 border-blue-500 text-blue-700", "border-t-4 rounded-b px-4 py-3 shadow-md my-4"),
|
|
16
|
-
role: "alert",
|
|
17
|
-
children: /* @__PURE__ */ jsxs("div", {
|
|
18
|
-
className: "flex",
|
|
19
|
-
children: [/* @__PURE__ */ jsx("div", {
|
|
20
|
-
className: "py-1",
|
|
21
|
-
children: /* @__PURE__ */ jsx(CalloutIcon, { type })
|
|
22
|
-
}), /* @__PURE__ */ jsx("div", { children })]
|
|
23
|
-
})
|
|
24
|
-
});
|
|
25
|
-
}
|
|
26
|
-
//#endregion
|
|
27
|
-
//#region src/components/Tooltip.tsx
|
|
28
|
-
var TOOLTIP_ID = "global-tooltip";
|
|
29
|
-
var linkRegex = /\[([^\]]+)\]\((https?:\/\/[^\s)]+)\)/g;
|
|
30
|
-
function formatLine(line) {
|
|
31
|
-
const nodes = [];
|
|
32
|
-
let last = 0;
|
|
33
|
-
for (const match of line.matchAll(linkRegex)) {
|
|
34
|
-
if (match.index > last) nodes.push(line.slice(last, match.index));
|
|
35
|
-
nodes.push(/* @__PURE__ */ jsx("a", {
|
|
36
|
-
href: match[2],
|
|
37
|
-
target: "_blank",
|
|
38
|
-
rel: "noopener noreferrer",
|
|
39
|
-
className: "underline",
|
|
40
|
-
children: match[1]
|
|
41
|
-
}, match.index));
|
|
42
|
-
last = match.index + match[0].length;
|
|
43
|
-
}
|
|
44
|
-
if (last < line.length) nodes.push(line.slice(last));
|
|
45
|
-
return nodes;
|
|
46
|
-
}
|
|
47
|
-
/** Tooltip text can come from untrusted sources (workflow YAML), so all markup is literal text — only `[text](url)` links and newlines are parsed. */
|
|
48
|
-
function formatTooltipContent(content) {
|
|
49
|
-
if (typeof content !== "string") return content || null;
|
|
50
|
-
if (!content) return null;
|
|
51
|
-
return content.split(/<br\s*\/?>|\n/i).map((line, idx) => /* @__PURE__ */ jsxs(Fragment$1, { children: [idx > 0 && /* @__PURE__ */ jsx("br", {}), formatLine(line)] }, idx));
|
|
52
|
-
}
|
|
53
|
-
function KbdShortcut({ keys }) {
|
|
54
|
-
return /* @__PURE__ */ jsx("span", {
|
|
55
|
-
className: "inline-flex items-center gap-1 align-middle",
|
|
56
|
-
children: keys.split("+").map((part) => part.trim()).filter(Boolean).map((part, idx) => /* @__PURE__ */ jsxs(Fragment$1, { children: [idx > 0 && /* @__PURE__ */ jsx("span", {
|
|
57
|
-
className: "opacity-60 text-[11px]",
|
|
58
|
-
children: "+"
|
|
59
|
-
}), /* @__PURE__ */ jsx("kbd", {
|
|
60
|
-
className: "inline-flex items-center justify-center min-w-[18px] h-[18px] px-1 rounded border border-white/30 bg-white/10 font-sans text-[11px] font-semibold leading-none",
|
|
61
|
-
children: part
|
|
62
|
-
})] }, `${part}-${idx}`))
|
|
63
|
-
});
|
|
64
|
-
}
|
|
65
|
-
/** Singleton rendered at layout root; anchors opt in via data-tooltip-id={TOOLTIP_ID}, data-tooltip-content, and data-tooltip-shortcut. */
|
|
66
|
-
function GlobalTooltip() {
|
|
67
|
-
return /* @__PURE__ */ jsx(Tooltip, {
|
|
68
|
-
id: TOOLTIP_ID,
|
|
69
|
-
className: "max-w-lg break-words config-tips normal-case text-left z-[10000]",
|
|
70
|
-
place: "top",
|
|
71
|
-
render: ({ content, activeAnchor }) => {
|
|
72
|
-
const body = formatTooltipContent(content);
|
|
73
|
-
const shortcut = activeAnchor?.getAttribute("data-tooltip-shortcut");
|
|
74
|
-
if (!shortcut) return body;
|
|
75
|
-
return /* @__PURE__ */ jsxs("span", {
|
|
76
|
-
className: "inline-flex items-center gap-2",
|
|
77
|
-
children: [body, /* @__PURE__ */ jsx(KbdShortcut, { keys: shortcut })]
|
|
78
|
-
});
|
|
79
|
-
}
|
|
80
|
-
});
|
|
81
|
-
}
|
|
82
|
-
function TooltipInfo({ text, className = "", children, place = "top", tabIndex }) {
|
|
83
|
-
return /* @__PURE__ */ jsx("div", {
|
|
84
|
-
"data-tooltip-id": TOOLTIP_ID,
|
|
85
|
-
"data-tooltip-content": text,
|
|
86
|
-
"data-tooltip-place": place,
|
|
87
|
-
className,
|
|
88
|
-
tabIndex,
|
|
89
|
-
children: children || /* @__PURE__ */ jsx(TooltipIcon, { className: "tooltip" })
|
|
90
|
-
});
|
|
91
|
-
}
|
|
92
|
-
//#endregion
|
|
14
|
+
import React from "react";
|
|
15
|
+
import Skeleton from "react-loading-skeleton";
|
|
93
16
|
//#region src/components/DescriptionList.tsx
|
|
94
17
|
function DescriptionListItem({ label, children, tooltip, className, ...props }) {
|
|
95
18
|
return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsxs("dt", {
|
|
@@ -152,270 +75,39 @@ function EmptyState({ title, description, action, icon: Icon }) {
|
|
|
152
75
|
});
|
|
153
76
|
}
|
|
154
77
|
//#endregion
|
|
155
|
-
//#region src/components/
|
|
156
|
-
function
|
|
157
|
-
const loaderColor = color || "text-(--theme-element,#3b82f6)";
|
|
158
|
-
const fontSize = typeof size === "number" ? `${size}px` : size;
|
|
78
|
+
//#region src/components/Overview.tsx
|
|
79
|
+
function Overview({ Icon, name, type, children, right, className, loading, iconSize = 75 }) {
|
|
159
80
|
return /* @__PURE__ */ jsxs("div", {
|
|
160
|
-
className: cx(
|
|
161
|
-
children: [
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
warning: "bg-yellow-500 text-white hover:bg-yellow-700",
|
|
182
|
-
info: "bg-(--theme-element,#06354f) text-(--theme-element-text,#ffffff) hover:opacity-90"
|
|
183
|
-
};
|
|
184
|
-
function Modal({ isOpen, close, cancelAction = noop, children, title = "", text = "", actionLabel = "", cancelLabel = "Cancel", action, closeAfterAction = true, type = "destructive", className = "", showButtons = true, disableAction = false, loading = false, padding = true, fitWidth = false, dimScreen = true, ignoreOutsideClickClose = false }) {
|
|
185
|
-
const [pending, setPending] = useState(false);
|
|
186
|
-
const actionFiredRef = useRef(false);
|
|
187
|
-
const panelRef = useRef(null);
|
|
188
|
-
const titleId = useId();
|
|
189
|
-
const inFlight = loading || pending;
|
|
190
|
-
const inFlightRef = useRef(inFlight);
|
|
191
|
-
inFlightRef.current = inFlight;
|
|
192
|
-
useEffect(() => {
|
|
193
|
-
if (isOpen) actionFiredRef.current = false;
|
|
194
|
-
}, [isOpen]);
|
|
195
|
-
useEffect(() => {
|
|
196
|
-
if (!isOpen) return;
|
|
197
|
-
const previouslyFocused = document.activeElement;
|
|
198
|
-
const previousOverflow = document.body.style.overflow;
|
|
199
|
-
document.body.style.overflow = "hidden";
|
|
200
|
-
panelRef.current?.focus();
|
|
201
|
-
return () => {
|
|
202
|
-
document.body.style.overflow = previousOverflow;
|
|
203
|
-
previouslyFocused?.focus?.();
|
|
204
|
-
};
|
|
205
|
-
}, [isOpen]);
|
|
206
|
-
const trapFocus = useCallback((e) => {
|
|
207
|
-
if (e.key !== "Tab" || !panelRef.current) return;
|
|
208
|
-
const focusable = panelRef.current.querySelectorAll(FOCUSABLE);
|
|
209
|
-
if (focusable.length === 0) {
|
|
210
|
-
e.preventDefault();
|
|
211
|
-
return;
|
|
212
|
-
}
|
|
213
|
-
const first = focusable[0];
|
|
214
|
-
const last = focusable[focusable.length - 1];
|
|
215
|
-
if (e.shiftKey && document.activeElement === first) {
|
|
216
|
-
e.preventDefault();
|
|
217
|
-
last.focus();
|
|
218
|
-
} else if (!e.shiftKey && document.activeElement === last) {
|
|
219
|
-
e.preventDefault();
|
|
220
|
-
first.focus();
|
|
221
|
-
}
|
|
222
|
-
}, []);
|
|
223
|
-
const closeRef = useRef(close);
|
|
224
|
-
closeRef.current = close;
|
|
225
|
-
useEffect(() => {
|
|
226
|
-
if (!isOpen) return;
|
|
227
|
-
const onKey = (e) => {
|
|
228
|
-
if (e.key === "Escape" && !inFlightRef.current) closeRef.current();
|
|
229
|
-
};
|
|
230
|
-
window.addEventListener("keydown", onKey);
|
|
231
|
-
return () => window.removeEventListener("keydown", onKey);
|
|
232
|
-
}, [isOpen]);
|
|
233
|
-
const runAction = useCallback(async () => {
|
|
234
|
-
if (actionFiredRef.current) return;
|
|
235
|
-
actionFiredRef.current = true;
|
|
236
|
-
setPending(true);
|
|
237
|
-
try {
|
|
238
|
-
await action?.();
|
|
239
|
-
if (closeAfterAction) closeRef.current();
|
|
240
|
-
else actionFiredRef.current = false;
|
|
241
|
-
} finally {
|
|
242
|
-
setPending(false);
|
|
243
|
-
}
|
|
244
|
-
}, [action, closeAfterAction]);
|
|
245
|
-
if (!isOpen) return null;
|
|
246
|
-
return createPortal(/* @__PURE__ */ jsxs("div", {
|
|
247
|
-
className: "fixed z-250 inset-0 flex w-screen items-center justify-center p-4",
|
|
248
|
-
role: "dialog",
|
|
249
|
-
"aria-modal": "true",
|
|
250
|
-
...title ? { "aria-labelledby": titleId } : {},
|
|
251
|
-
onKeyDown: trapFocus,
|
|
252
|
-
children: [/* @__PURE__ */ jsx("div", {
|
|
253
|
-
className: cx("fixed inset-0", dimScreen && "bg-gray-500/75"),
|
|
254
|
-
onClick: inFlight || ignoreOutsideClickClose ? void 0 : close
|
|
255
|
-
}), /* @__PURE__ */ jsxs("div", {
|
|
256
|
-
ref: panelRef,
|
|
257
|
-
tabIndex: -1,
|
|
258
|
-
className: cx(className, "relative inline-block align-bottom rounded-lg text-left shadow-xl z-50 sm:my-8 sm:align-middle max-h-full overflow-y-auto", "bg-(--theme-panel-bg,#ffffff) text-(--theme-panel,#000000)", padding && "px-4 pt-5 pb-4 sm:p-6", fitWidth ? "sm:w-min-[32rem]" : "sm:max-w-lg sm:w-full"),
|
|
259
|
-
children: [/* @__PURE__ */ jsxs("div", { children: [title && /* @__PURE__ */ jsx("h3", {
|
|
260
|
-
id: titleId,
|
|
261
|
-
className: "text-center text-xl leading-6 font-semibold",
|
|
262
|
-
children: title
|
|
263
|
-
}), /* @__PURE__ */ jsxs("div", {
|
|
264
|
-
className: cx(title.length !== 0 && "mt-2"),
|
|
265
|
-
children: [text && /* @__PURE__ */ jsx("p", {
|
|
266
|
-
className: "text-sm text-center",
|
|
267
|
-
children: text
|
|
268
|
-
}), children]
|
|
269
|
-
})] }), showButtons && /* @__PURE__ */ jsxs("div", {
|
|
270
|
-
className: "mt-5 sm:mt-6 grid grid-cols-2 gap-3 grid-flow-row-dense",
|
|
271
|
-
children: [/* @__PURE__ */ jsx("button", {
|
|
272
|
-
type: "button",
|
|
273
|
-
className: cx("self-center cursor-pointer px-3 py-1.5 rounded-md text-xs font-medium whitespace-nowrap flex items-center justify-center", "border border-(--theme-border,#d1d5db) hover:bg-(--theme-hover,#f3f4f6)", inFlight && "cursor-wait"),
|
|
274
|
-
onClick: () => {
|
|
275
|
-
cancelAction();
|
|
276
|
-
close();
|
|
277
|
-
},
|
|
278
|
-
disabled: inFlight,
|
|
279
|
-
children: cancelLabel
|
|
280
|
-
}), /* @__PURE__ */ jsx("button", {
|
|
281
|
-
type: "button",
|
|
282
|
-
className: cx("self-center cursor-pointer px-3 py-1.5 rounded-md text-xs font-medium whitespace-nowrap flex items-center justify-center", "disabled:opacity-50 disabled:cursor-not-allowed", actionClasses[type], loading && "cursor-wait"),
|
|
283
|
-
onClick: runAction,
|
|
284
|
-
disabled: disableAction || inFlight,
|
|
285
|
-
children: actionLabel
|
|
286
|
-
})]
|
|
287
|
-
})]
|
|
288
|
-
})]
|
|
289
|
-
}), document.body);
|
|
290
|
-
}
|
|
291
|
-
//#endregion
|
|
292
|
-
//#region src/components/StatusBadge.tsx
|
|
293
|
-
var variantStyles = {
|
|
294
|
-
default: "bg-(--theme-muted-panel-bg) text-(--theme-app) border-(--theme-border)",
|
|
295
|
-
success: "bg-emerald-500/10 text-emerald-500 border-emerald-500/20",
|
|
296
|
-
warning: "bg-amber-500/10 text-amber-500 border-amber-500/20",
|
|
297
|
-
error: "bg-red-500/10 text-red-500 border-red-500/20",
|
|
298
|
-
info: "bg-blue-500/10 text-blue-500 border-blue-500/20",
|
|
299
|
-
muted: "bg-(--theme-muted-panel-bg)/50 text-(--theme-muted-text-color) border-(--theme-border)"
|
|
300
|
-
};
|
|
301
|
-
var pulseColors = {
|
|
302
|
-
default: "bg-(--theme-app)",
|
|
303
|
-
success: "bg-emerald-500",
|
|
304
|
-
warning: "bg-amber-500",
|
|
305
|
-
error: "bg-red-500",
|
|
306
|
-
info: "bg-blue-500",
|
|
307
|
-
muted: "bg-(--theme-muted-text-color)"
|
|
308
|
-
};
|
|
309
|
-
function StatusBadge({ children, variant = "default", pulse = false, size = "sm", className }) {
|
|
310
|
-
return /* @__PURE__ */ jsxs("span", {
|
|
311
|
-
className: cx("inline-flex items-center gap-1.5 rounded-full border font-medium", size === "sm" && "px-2 py-0.5 text-[10px]", size === "md" && "px-2.5 py-1 text-xs", variantStyles[variant], className),
|
|
312
|
-
children: [pulse && /* @__PURE__ */ jsxs("span", {
|
|
313
|
-
className: "relative flex h-2 w-2",
|
|
314
|
-
children: [/* @__PURE__ */ jsx("span", { className: cx("absolute inline-flex h-full w-full animate-ping rounded-full opacity-75", pulseColors[variant]) }), /* @__PURE__ */ jsx("span", { className: cx("relative inline-flex h-2 w-2 rounded-full", pulseColors[variant]) })]
|
|
315
|
-
}), children]
|
|
316
|
-
});
|
|
317
|
-
}
|
|
318
|
-
function StatusDot({ variant = "default", pulse = false, size = 8, className }) {
|
|
319
|
-
return /* @__PURE__ */ jsxs("span", {
|
|
320
|
-
className: cx("relative inline-flex", className),
|
|
321
|
-
style: {
|
|
322
|
-
width: size,
|
|
323
|
-
height: size
|
|
324
|
-
},
|
|
325
|
-
children: [pulse && /* @__PURE__ */ jsx("span", { className: cx("absolute inline-flex h-full w-full animate-ping rounded-full opacity-75", pulseColors[variant]) }), /* @__PURE__ */ jsx("span", {
|
|
326
|
-
className: cx("relative inline-flex rounded-full", pulseColors[variant]),
|
|
327
|
-
style: {
|
|
328
|
-
width: size,
|
|
329
|
-
height: size
|
|
330
|
-
}
|
|
331
|
-
})]
|
|
332
|
-
});
|
|
333
|
-
}
|
|
334
|
-
//#endregion
|
|
335
|
-
//#region src/components/Table.tsx
|
|
336
|
-
function Item({ wrap = false, children, className, colspan = 1, ...tdProps }) {
|
|
337
|
-
const yPadding = className?.includes("py-") ? "" : "py-4";
|
|
338
|
-
const xPadding = className?.includes("px-") ? "" : "px-2";
|
|
339
|
-
return /* @__PURE__ */ jsx("td", {
|
|
340
|
-
...tdProps,
|
|
341
|
-
colSpan: colspan,
|
|
342
|
-
className: cx(yPadding, xPadding, wrap ? "" : "whitespace-nowrap", className),
|
|
343
|
-
children
|
|
344
|
-
});
|
|
345
|
-
}
|
|
346
|
-
function CompactItem({ wrap = false, children, className, colspan = 1, ...tdProps }) {
|
|
347
|
-
return /* @__PURE__ */ jsx("td", {
|
|
348
|
-
...tdProps,
|
|
349
|
-
colSpan: colspan,
|
|
350
|
-
className: cx("px-2 text-sm font-medium", !wrap && "whitespace-nowrap", className),
|
|
351
|
-
children
|
|
352
|
-
});
|
|
353
|
-
}
|
|
354
|
-
function Header({ children, className, style, colspan = 1, onClick, caps = true }) {
|
|
355
|
-
return /* @__PURE__ */ jsx("th", {
|
|
356
|
-
scope: "col",
|
|
357
|
-
colSpan: colspan,
|
|
358
|
-
style,
|
|
359
|
-
className: cx(className, className?.includes("py-") ? "" : "py-3", className?.includes("px-") ? "" : "px-3", className?.includes("text-") ? "" : "text-left", "text-xs font-medium", caps ? "uppercase tracking-wider" : "", onClick && "cursor-pointer hover:opacity-80 transition-opacity"),
|
|
360
|
-
onClick,
|
|
361
|
-
children
|
|
362
|
-
});
|
|
363
|
-
}
|
|
364
|
-
var isHeaderChild = (child) => {
|
|
365
|
-
if (!React.isValidElement(child)) return false;
|
|
366
|
-
return child.type === Header || typeof child.type === "function" && child.type.isTableHeader === true;
|
|
367
|
-
};
|
|
368
|
-
var getHeaders = (children) => children.filter(isHeaderChild);
|
|
369
|
-
function Table({ borderless = false, panel = true, className = "", wrapperClassName = "", tbodyClassName = "divide-y", theadClassName = "theme-muted-panel", children, roundedTop = false, rounded = false, roundedBottom = false, isLoading = false, tableProps }) {
|
|
370
|
-
const ChildrenArr = React.Children.toArray(children);
|
|
371
|
-
const Headers = getHeaders(ChildrenArr);
|
|
372
|
-
return /* @__PURE__ */ jsx("div", {
|
|
373
|
-
className: cx("flex flex-col w-full", !wrapperClassName.split(" ").some((cls) => cls.startsWith("overflow-")) && "overflow-hidden", wrapperClassName),
|
|
374
|
-
children: isLoading ? /* @__PURE__ */ jsx("div", {
|
|
375
|
-
className: "flex justify-center items-center h-32",
|
|
376
|
-
children: /* @__PURE__ */ jsx(Loader, {})
|
|
377
|
-
}) : /* @__PURE__ */ jsx("div", {
|
|
378
|
-
className: cx("align-middle inline-block min-w-full overflow-x-auto", panel && "theme-panel", !borderless && "border theme-border", rounded && "rounded-2xl", roundedBottom && "rounded-b-2xl", roundedTop && "rounded-t-2xl"),
|
|
379
|
-
children: /* @__PURE__ */ jsxs("table", {
|
|
380
|
-
className: cx(className, "min-w-full divide-y theme-border"),
|
|
381
|
-
...tableProps,
|
|
382
|
-
children: [/* @__PURE__ */ jsx("thead", {
|
|
383
|
-
className: theadClassName,
|
|
384
|
-
children: /* @__PURE__ */ jsx("tr", { children: Headers })
|
|
385
|
-
}), /* @__PURE__ */ jsx("tbody", {
|
|
386
|
-
className: tbodyClassName,
|
|
387
|
-
children: ChildrenArr.filter((c) => !isHeaderChild(c))
|
|
388
|
-
})]
|
|
389
|
-
})
|
|
390
|
-
})
|
|
391
|
-
});
|
|
392
|
-
}
|
|
393
|
-
function CompactTable({ wrapperClassName = "", className = "", tbodyClassName = "divide-y", children, roundedTop = false, rounded = false, roundedBottom = false }) {
|
|
394
|
-
const ChildrenArr = React.Children.toArray(children);
|
|
395
|
-
const Headers = getHeaders(ChildrenArr);
|
|
396
|
-
return /* @__PURE__ */ jsx("div", {
|
|
397
|
-
className: cx("flex flex-col w-full", !wrapperClassName.split(" ").some((cls) => cls.startsWith("overflow-")) && "overflow-hidden", wrapperClassName),
|
|
398
|
-
children: /* @__PURE__ */ jsx("div", {
|
|
399
|
-
className: cx("theme-panel inline-block min-w-full align-middle overflow-x-auto", rounded && "rounded-2xl", roundedBottom && "rounded-b-2xl pb-1", roundedTop && "rounded-t-2xl"),
|
|
400
|
-
children: /* @__PURE__ */ jsxs("table", {
|
|
401
|
-
className: cx("min-w-full divide-y theme-border", className),
|
|
402
|
-
children: [/* @__PURE__ */ jsx("thead", {
|
|
403
|
-
className: "theme-muted-panel",
|
|
404
|
-
children: /* @__PURE__ */ jsx("tr", {
|
|
405
|
-
className: "divide-x",
|
|
406
|
-
children: Headers
|
|
81
|
+
className: cx("flex items-center w-full", className),
|
|
82
|
+
children: [
|
|
83
|
+
loading ? /* @__PURE__ */ jsx(Skeleton, {
|
|
84
|
+
width: iconSize,
|
|
85
|
+
height: iconSize,
|
|
86
|
+
circle: true
|
|
87
|
+
}) : Icon,
|
|
88
|
+
/* @__PURE__ */ jsx("div", {
|
|
89
|
+
className: "flex flex-col min-w-0 flex-1",
|
|
90
|
+
children: loading ? /* @__PURE__ */ jsx(Skeleton, {
|
|
91
|
+
count: 2,
|
|
92
|
+
height: 12
|
|
93
|
+
}) : /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
94
|
+
/* @__PURE__ */ jsx("div", {
|
|
95
|
+
className: "font-semibold text-xl tracking-tight",
|
|
96
|
+
children: name
|
|
97
|
+
}),
|
|
98
|
+
type && /* @__PURE__ */ jsx("p", { children: type }),
|
|
99
|
+
/* @__PURE__ */ jsx("div", {
|
|
100
|
+
className: "flex flex-row gap-x-2",
|
|
101
|
+
children
|
|
407
102
|
})
|
|
408
|
-
})
|
|
409
|
-
|
|
410
|
-
|
|
411
|
-
|
|
103
|
+
] })
|
|
104
|
+
}),
|
|
105
|
+
right && /* @__PURE__ */ jsx("div", {
|
|
106
|
+
className: "shrink-0 self-center",
|
|
107
|
+
children: right
|
|
412
108
|
})
|
|
413
|
-
|
|
109
|
+
]
|
|
414
110
|
});
|
|
415
111
|
}
|
|
416
|
-
Table.Header = Header;
|
|
417
|
-
Table.Item = Item;
|
|
418
|
-
CompactTable.Header = Header;
|
|
419
|
-
CompactTable.Item = CompactItem;
|
|
420
112
|
//#endregion
|
|
421
|
-
export { Callout, CompactTable, DEFAULT_PRESET, DescriptionList, DescriptionListItem, EmptyState, GlobalTooltip, Loader, Modal, StatusBadge, StatusDot, THEME_PRESETS, THEME_TOKENS, TOOLTIP_ID, Table, TooltipInfo, applyTheme, contrastRatio, deriveTheme, formatTooltipContent, isDarkColor };
|
|
113
|
+
export { Callout, CompactTable, ControlledCollapsiblePanel, CopyCodeBlock, CopyToClipboard, CustomListbox, DEFAULT_PRESET, DescriptionList, DescriptionListItem, Dropdown, DropdownCaret, EmptyState, GlobalTooltip, Indicator, Loader, Markdown, MaybeCollapsible, Modal, MultiSelectDropdown, Overview, SectionHeader, StatusBadge, StatusDot, SwitchToggle, SwitchToggleSmall, THEME_PRESETS, THEME_TOKENS, TOOLTIP_ID, Table, TooltipInfo, UIProvider, UncontrolledCollapsiblePanel, applyTheme, contrastRatio, deriveTheme, filterOption, flattenOptions, formatTooltipContent, isCategory, isDarkColor, isOption, useNavigation, useNotify, useProvisionCorsRules, useRunFile, useSlots, useStrings, useWorkflowJsonResolver };
|
|
@@ -0,0 +1,63 @@
|
|
|
1
|
+
import type { MouseEvent as ReactMouseEvent, ReactNode } from 'react';
|
|
2
|
+
/** table-auto + horizontal scroll; the name column has a min-width floor so it can't be crushed. */
|
|
3
|
+
export declare const listTableProps: {
|
|
4
|
+
readonly borderless: true;
|
|
5
|
+
readonly panel: false;
|
|
6
|
+
readonly rounded: false;
|
|
7
|
+
readonly theadClassName: 'text-(--theme-muted-text-color)';
|
|
8
|
+
readonly tbodyClassName: 'divide-y border-b border-(--theme-border) divide-(--theme-border)';
|
|
9
|
+
readonly className: 'table-auto w-full [&_td:first-child]:pl-4 [&_th:first-child]:pl-4 [&_td:last-child]:pr-4 [&_th:last-child]:pr-4';
|
|
10
|
+
};
|
|
11
|
+
/** Widths come only from the header row, so a windowed body cannot shift the
|
|
12
|
+
* columns as different content scrolls into view. */
|
|
13
|
+
export declare const listTableFixedProps: {
|
|
14
|
+
readonly borderless: true;
|
|
15
|
+
readonly panel: false;
|
|
16
|
+
readonly rounded: false;
|
|
17
|
+
readonly theadClassName: 'text-(--theme-muted-text-color)';
|
|
18
|
+
readonly tbodyClassName: 'divide-y border-b border-(--theme-border) divide-(--theme-border)';
|
|
19
|
+
readonly className: string;
|
|
20
|
+
};
|
|
21
|
+
export declare function NameCell({ icon, name, subtitle, href, }: {
|
|
22
|
+
icon: ReactNode;
|
|
23
|
+
name: string;
|
|
24
|
+
subtitle?: string;
|
|
25
|
+
href: string | null;
|
|
26
|
+
}): import("react").JSX.Element;
|
|
27
|
+
export declare function GroupRow({ label, count, colSpan, }: {
|
|
28
|
+
label: string;
|
|
29
|
+
count: number;
|
|
30
|
+
colSpan: number;
|
|
31
|
+
}): import("react").JSX.Element;
|
|
32
|
+
export declare function ListError({ error, noun, }: {
|
|
33
|
+
error: unknown;
|
|
34
|
+
noun?: string;
|
|
35
|
+
}): import("react").JSX.Element;
|
|
36
|
+
export declare function ListSkeleton({ rows }: {
|
|
37
|
+
rows?: number;
|
|
38
|
+
}): import("react").JSX.Element;
|
|
39
|
+
/** Prevents the name column from being crushed under table-auto layout during horizontal overflow. */
|
|
40
|
+
export declare const NAME_MIN_WIDTH_PX = 200;
|
|
41
|
+
/** Width the trailing actions column reserves for `count` always-visible
|
|
42
|
+
* buttons plus the hover `⋯` trigger. */
|
|
43
|
+
export declare function actionsColumnWidth(count: number): number;
|
|
44
|
+
/** Shared leading selection checkbox for multi-select rows: stops the row-click
|
|
45
|
+
* and suppresses shift-click text selection. Wrap in <Table.Item> for `leading`. */
|
|
46
|
+
export declare function RowSelectCheckbox({ checked, label, onToggle, }: {
|
|
47
|
+
checked: boolean;
|
|
48
|
+
label: string;
|
|
49
|
+
onToggle: (e: ReactMouseEvent) => void;
|
|
50
|
+
}): import("react").JSX.Element;
|
|
51
|
+
/** Sizes to fit pinned buttons + ⋯; below ~44rem only ⋯ remains. Pass a view's
|
|
52
|
+
* chrome (structurally: showActions + actionsWidth) or actionCount. */
|
|
53
|
+
export declare function ListActionsHeader({ view, actionCount, className, }: {
|
|
54
|
+
view?: {
|
|
55
|
+
showActions: boolean;
|
|
56
|
+
actionsWidth: number;
|
|
57
|
+
};
|
|
58
|
+
actionCount?: number;
|
|
59
|
+
className?: string;
|
|
60
|
+
}): import("react").JSX.Element | null;
|
|
61
|
+
export declare namespace ListActionsHeader {
|
|
62
|
+
var isTableHeader: boolean;
|
|
63
|
+
}
|