@lax-wp/design-system 0.13.41 → 0.13.42
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/components/data-display/code-editor/CodeEditor.cjs.js +1 -1
- package/dist/components/data-display/code-editor/CodeEditor.cjs.js.map +1 -1
- package/dist/components/data-display/code-editor/CodeEditor.es.js +38 -38
- package/dist/components/data-display/code-editor/CodeEditor.es.js.map +1 -1
- package/dist/components/data-display/tag/Tag.cjs.js +1 -1
- package/dist/components/data-display/tag/Tag.cjs.js.map +1 -1
- package/dist/components/data-display/tag/Tag.es.js +9 -9
- package/dist/components/data-display/tag/Tag.es.js.map +1 -1
- package/dist/components/floating-bar/FloatingBar.cjs.js +1 -1
- package/dist/components/floating-bar/FloatingBar.cjs.js.map +1 -1
- package/dist/components/floating-bar/FloatingBar.es.js +1 -1
- package/dist/components/floating-bar/FloatingBar.es.js.map +1 -1
- package/dist/components/forms/search-bar/SearchBar.cjs.js +1 -1
- package/dist/components/forms/search-bar/SearchBar.cjs.js.map +1 -1
- package/dist/components/forms/search-bar/SearchBar.es.js +1 -1
- package/dist/components/forms/search-bar/SearchBar.es.js.map +1 -1
- package/package.json +1 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CodeEditor.es.js","sources":["../../../../src/components/data-display/code-editor/CodeEditor.tsx"],"sourcesContent":["/* eslint-disable @typescript-eslint/no-explicit-any */\nimport Editor, { type OnMount } from '@monaco-editor/react';\nimport classNames from 'classnames';\nimport { type FC, useCallback, useEffect, useRef, useState } from 'react';\nimport { FullScreen, useFullScreenHandle } from 'react-full-screen';\nimport { toast } from 'react-toastify';\nimport { useMonaco } from '../../../hooks/useMonaco';\nimport { usePythonSyntax } from '../../../hooks/usePythonSyntax';\nimport { type CodeEditorProps } from '../../../types';\nimport { systemMessages } from '../../../utils/messageConstants';\nimport { JsonGrid } from './JsonGrid';\nimport Tooltip from '../../tooltip/Tooltip';\nimport { Toggle } from '../../forms/toggle/Toggle';\nimport { cn } from '../../../lib/utils';\nimport { CodeIcon, GridOnIcon } from '../../icon';\n\n// Icon class styling (matching web portal)\nconst iconClass = classNames(\n 'text-neutral-600 cursor-pointer hover:text-neutral-800',\n 'dark:text-neutral-300 dark:hover:text-neutral-50'\n);\n\n// Material Icons converted to SVG components (matching web portal icons)\nconst AddIcon = ({ fontSize }: { fontSize: number }) => (\n <svg width={fontSize} height={fontSize} viewBox=\"0 0 24 24\" fill=\"currentColor\">\n <path d=\"M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z\" />\n </svg>\n);\n\nconst ContentPasteRoundedIcon = ({ fontSize }: { fontSize: number }) => (\n <svg width={fontSize} height={fontSize} viewBox=\"0 0 24 24\" fill=\"currentColor\" className={iconClass}>\n <path d=\"M19 2h-4.18C14.4.84 13.3 0 12 0S9.6.84 9.18 2H5c-1.1 0-2 .9-2 2v16c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm-7 0c.55 0 1 .45 1 1s-.45 1-1 1-1-.45-1-1 .45-1 1-1zm7 18H5V4h2v3h10V4h2v16z\" />\n </svg>\n);\n\nconst DarkModeOutlinedIcon = ({ fontSize }: { fontSize: number }) => (\n <svg width={fontSize} height={fontSize} viewBox=\"0 0 24 24\" fill=\"currentColor\" className={iconClass}>\n <path d=\"M9.5 2c-1.82 0-3.53.5-5 1.35 2.99 1.73 5 4.95 5 8.65s-2.01 6.92-5 8.65c1.47.85 3.18 1.35 5 1.35 5.52 0 10-4.48 10-10S15.02 2 9.5 2z\" />\n </svg>\n);\n\nconst FileDownloadRoundedIcon = ({ fontSize }: { fontSize: number }) => (\n <svg width={fontSize} height={fontSize} viewBox=\"0 0 24 24\" fill=\"currentColor\" className={iconClass}>\n <path d=\"M18 15v3H6v-3H4v3c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2v-3h-2zm-1-4-5 5-5-5h3V4h4v7h3z\" />\n </svg>\n);\n\nconst FullscreenRoundedIcon = ({ fontSize }: { fontSize: number }) => (\n <svg width={fontSize} height={fontSize} viewBox=\"0 0 24 24\" fill=\"currentColor\" className={iconClass}>\n <path d=\"M7 14H5v5h5v-2H7v-3zm-2-4h2V7h3V5H5v5zm12 7h-3v2h5v-5h-2v3zM14 5v2h3v3h2V5h-5z\" />\n </svg>\n);\n\nconst KeyboardDoubleArrowDownIcon = ({ fontSize }: { fontSize: number }) => (\n <svg width={fontSize} height={fontSize} viewBox=\"0 0 24 24\" fill=\"currentColor\" className={iconClass}>\n <path d=\"M18 6.41 16.59 5 12 9.58 7.41 5 6 6.41l6 6z\" />\n <path d=\"m18 13-1.41-1.41L12 16.17l-4.59-4.58L6 13l6 6z\" />\n </svg>\n);\n\nconst KeyboardDoubleArrowUpIcon = ({ fontSize }: { fontSize: number }) => (\n <svg width={fontSize} height={fontSize} viewBox=\"0 0 24 24\" fill=\"currentColor\" className={iconClass}>\n <path d=\"M6 17.59 7.41 19 12 14.42 16.59 19 18 17.59l-6-6z\" />\n <path d=\"m6 11 1.41 1.41L12 7.83l4.59 4.58L18 11l-6-6z\" />\n </svg>\n);\n\nconst LightModeOutlinedIcon = ({ fontSize }: { fontSize: number }) => (\n <svg width={fontSize} height={fontSize} viewBox=\"0 0 24 24\" fill=\"currentColor\" className={iconClass}>\n <path d=\"M12 9c1.65 0 3 1.35 3 3s-1.35 3-3 3-3-1.35-3-3 1.35-3 3-3m0-2c-2.76 0-5 2.24-5 5s2.24 5 5 5 5-2.24 5-5-2.24-5-5-5zM2 13h2c.55 0 1-.45 1-1s-.45-1-1-1H2c-.55 0-1 .45-1 1s.45 1 1 1zm18 0h2c.55 0 1-.45 1-1s-.45-1-1-1h-2c-.55 0-1 .45-1 1s.45 1 1 1zM11 2v2c0 .55.45 1 1 1s1-.45 1-1V2c0-.55-.45-1-1-1s-1 .45-1 1zm0 18v2c0 .55.45 1 1 1s1-.45 1-1v-2c0-.55-.45-1-1-1s-1 .45-1 1zM5.99 4.58c-.39-.39-1.03-.39-1.41 0-.39.39-.39 1.03 0 1.41l1.06 1.06c.39.39 1.03.39 1.41 0s.39-1.03 0-1.41L5.99 4.58zm12.37 12.37c-.39-.39-1.03-.39-1.41 0-.39.39-.39 1.03 0 1.41l1.06 1.06c.39.39 1.03.39 1.41 0 .39-.39.39-1.03 0-1.41l-1.06-1.06zm1.06-10.96c.39-.39.39-1.03 0-1.41-.39-.39-1.03-.39-1.41 0l-1.06 1.06c-.39.39-.39 1.03 0 1.41s1.03.39 1.41 0l1.06-1.06zM7.05 18.36c.39-.39.39-1.03 0-1.41-.39-.39-1.03-.39-1.41 0l-1.06 1.06c-.39.39-.39 1.03 0 1.41s1.03.39 1.41 0l1.06-1.06z\" />\n </svg>\n);\n\nconst SubjectOutlinedIcon = ({ fontSize }: { fontSize: number }) => (\n <svg width={fontSize} height={fontSize} viewBox=\"0 0 24 24\" fill=\"currentColor\" className={iconClass}>\n <path d=\"M14 17H4v2h10v-2zm6-8H4v2h16V9zM4 15h16v-2H4v2zM4 5v2h16V5H4z\" />\n </svg>\n);\n\ntype TTabKey = 'JSON' | 'Grid';\n\nexport const CodeEditor: FC<CodeEditorProps> = ({\n value,\n onChange = () => false,\n withFullScreen = true,\n withTheme = true,\n isEditMode = false,\n height = \"55vh\",\n language = \"json\",\n monacoEditor,\n isShowCopy = true,\n isShowDownload = true,\n setIsDisableSave,\n withJsonGrid = true,\n editorTheme: externalEditorTheme,\n setEditorTheme: externalSetEditorTheme,\n theme: externalTheme,\n className,\n enableAutoFormatting = true,\n renderToolbarActions,\n onBlockClick,\n focusBlock,\n focusBlockTopLevelOnly = false,\n}) => {\n const editorRef = useRef<any>(null);\n\n // Internal theme state (used when not provided by parent)\n const [internalEditorTheme, setInternalEditorTheme] = useState<\n \"vs\" | \"vs-dark\"\n >(\"vs\");\n const [internalTheme, setInternalTheme] = useState<\"light\" | \"dark\">(\"light\");\n\n // Use external theme if provided, otherwise use internal\n const editorTheme = externalEditorTheme ?? internalEditorTheme;\n const theme = externalTheme ?? internalTheme;\n const setEditorTheme =\n externalSetEditorTheme ??\n ((newTheme: \"vs\" | \"vs-dark\") => {\n setInternalEditorTheme(newTheme);\n setInternalTheme(newTheme === \"vs-dark\" ? \"dark\" : \"light\");\n });\n\n const [allExpanded, setAllExpanded] = useState<boolean>(false);\n const [currentEditorModel, setCurrentEditorModel] = useState<any>(null);\n const monacoInstance = useMonaco();\n\n // Use provided monacoEditor prop or fall back to our managed instance\n const activeMonacoEditor = monacoEditor || monacoInstance;\n\n const {\n handleFormatCode: handleFormatPythonCode,\n pythonError,\n pythonLoading,\n } = usePythonSyntax({\n code: value,\n setCode: onChange,\n currentEditorModel,\n monacoEditor: activeMonacoEditor,\n enable: isEditMode === true && language === \"python\",\n });\n\n const fullScreenHandle = useFullScreenHandle();\n const [activeTab, setActiveTab] = useState<TTabKey>(\"JSON\");\n const [isAddKeyModalOpen, setIsAddKeyModalOpen] = useState(false);\n const isLanguageJson = language === \"json\";\n\n const toggleFocusMode = () => {\n if (fullScreenHandle?.active) {\n fullScreenHandle.exit();\n } else {\n fullScreenHandle.enter();\n }\n };\n\n const onBlockClickRef = useRef(onBlockClick);\n onBlockClickRef.current = onBlockClick;\n\n const detectBlock = useCallback(\n async (editor: any, lineNumber: number, column: number) => {\n if (!onBlockClickRef.current) return;\n\n const model = editor.getModel();\n if (!model) return;\n\n const getTextForRange = (startLine: number, endLine: number) =>\n model.getValueInRange({\n startLineNumber: startLine,\n startColumn: 1,\n endLineNumber: endLine,\n endColumn: model.getLineMaxColumn(endLine),\n });\n\n const emitBlock = (\n startLine: number,\n endLine: number,\n text: string,\n kind?: string,\n parentBlock?: { startLine: number; endLine: number; text: string; kind?: string }\n ) => {\n onBlockClickRef.current!({\n startLine,\n endLine,\n text,\n kind,\n cursorLine: lineNumber,\n cursorColumn: column,\n parentBlock,\n });\n };\n\n try {\n const foldingContrib = editor.getContribution(\n \"editor.contrib.folding\"\n );\n if (foldingContrib) {\n const foldingModel = await (foldingContrib as any).getFoldingModel();\n if (foldingModel?.regions) {\n const regions = foldingModel.regions;\n const totalLines = model.getLineCount();\n\n // Collect all folding ranges that contain the cursor line\n const containingRanges: {\n start: number;\n end: number;\n size: number;\n kind?: string;\n }[] = [];\n\n for (let i = 0; i < regions.length; i++) {\n const start = regions.getStartLineNumber(i);\n const foldEnd = regions.getEndLineNumber(i);\n const end = Math.min(foldEnd + 1, totalLines);\n const size = end - start;\n\n if (lineNumber >= start && lineNumber <= end) {\n const rawKind = regions.getType(i);\n const kind =\n rawKind === 1\n ? \"comment\"\n : rawKind === 2\n ? \"imports\"\n : rawKind === 3\n ? \"region\"\n : undefined;\n containingRanges.push({ start, end, size, kind });\n }\n }\n\n if (containingRanges.length > 0) {\n // Sort by size: smallest first (innermost) → largest last (outermost)\n containingRanges.sort((a, b) => a.size - b.size);\n\n const innermost = containingRanges[0];\n const text = getTextForRange(innermost.start, innermost.end);\n\n // Find the outermost block that isn't the root document range.\n // Walk from largest to smallest, skip any range that starts at\n // line 1 and ends at the last line (that's the root `{}`).\n let outermost: typeof containingRanges[number] | undefined;\n for (let j = containingRanges.length - 1; j > 0; j--) {\n const r = containingRanges[j];\n const isRoot = r.start <= 1 && r.end >= totalLines;\n if (!isRoot) {\n outermost = r;\n break;\n }\n }\n\n const parentBlock =\n outermost && outermost !== innermost\n ? {\n startLine: outermost.start,\n endLine: outermost.end,\n text: getTextForRange(outermost.start, outermost.end),\n kind: outermost.kind,\n }\n : undefined;\n\n emitBlock(innermost.start, innermost.end, text, innermost.kind, parentBlock);\n return;\n }\n }\n }\n\n // Bracket matching fallback — no parent detection available\n const position = { lineNumber, column };\n const brackets = model.bracketPairs?.findEnclosingBrackets?.(position);\n\n if (brackets && brackets.length === 2) {\n const [openRange, closeRange] = brackets;\n const startLine = openRange.startLineNumber;\n const endLine = closeRange.endLineNumber;\n const text = getTextForRange(startLine, endLine);\n emitBlock(startLine, endLine, text);\n return;\n }\n\n // Full document fallback\n const totalLines = model.getLineCount();\n const text = model.getValue();\n emitBlock(1, totalLines, text);\n } catch {\n // Editor not ready — ignore silently\n }\n },\n []\n );\n\n // Navigate to a block when focusBlock changes\n useEffect(() => {\n if (!focusBlock || !editorRef.current) return;\n\n const editor = editorRef.current;\n const model = editor.getModel();\n if (!model) return;\n\n const allMatches = model.findMatches(\n focusBlock,\n true,\n false,\n true,\n null,\n false\n );\n\n if (allMatches.length === 0) return;\n\n let match = allMatches[0];\n\n if (focusBlockTopLevelOnly && allMatches.length > 1) {\n // A top-level key in formatted JSON has minimal leading whitespace\n // (one indent level). Find the match closest to column 1.\n let bestCol = Infinity;\n for (const m of allMatches) {\n const lineContent = model.getLineContent(m.range.startLineNumber);\n const leadingSpaces = lineContent.length - lineContent.trimStart().length;\n if (leadingSpaces < bestCol) {\n bestCol = leadingSpaces;\n match = m;\n }\n }\n }\n\n const matchLine = match.range.startLineNumber;\n const matchCol = match.range.startColumn;\n\n // Move cursor to the match with smooth scroll\n editor.setPosition({ lineNumber: matchLine, column: matchCol });\n editor.revealLineInCenter(matchLine, 1);\n\n // Find the enclosing block and highlight it\n const findAndHighlightBlock = async () => {\n try {\n // Try folding ranges first\n const foldingContrib = editor.getContribution(\n \"editor.contrib.folding\"\n );\n if (foldingContrib) {\n const foldingModel = await (foldingContrib as any).getFoldingModel();\n if (foldingModel?.regions) {\n const regions = foldingModel.regions;\n let bestStart = -1;\n let bestEnd = -1;\n let bestSize = Infinity;\n\n for (let i = 0; i < regions.length; i++) {\n const start = regions.getStartLineNumber(i);\n const foldEnd = regions.getEndLineNumber(i);\n const end = Math.min(foldEnd + 1, model.getLineCount());\n const size = end - start;\n\n if (\n matchLine >= start &&\n matchLine <= end &&\n size < bestSize\n ) {\n bestStart = start;\n bestEnd = end;\n bestSize = size;\n }\n }\n\n if (bestStart !== -1) {\n editor.setSelection({\n startLineNumber: bestStart,\n startColumn: 1,\n endLineNumber: bestEnd,\n endColumn: model.getLineMaxColumn(bestEnd),\n });\n editor.revealRangeInCenter({\n startLineNumber: bestStart,\n startColumn: 1,\n endLineNumber: bestEnd,\n endColumn: model.getLineMaxColumn(bestEnd),\n }, 1);\n return;\n }\n }\n }\n\n // Fall back to bracket matching\n const position = { lineNumber: matchLine, column: matchCol };\n const brackets =\n model.bracketPairs?.findEnclosingBrackets?.(position);\n\n if (brackets && brackets.length === 2) {\n const [openRange, closeRange] = brackets;\n editor.setSelection({\n startLineNumber: openRange.startLineNumber,\n startColumn: 1,\n endLineNumber: closeRange.endLineNumber,\n endColumn: model.getLineMaxColumn(closeRange.endLineNumber),\n });\n editor.revealRangeInCenter({\n startLineNumber: openRange.startLineNumber,\n startColumn: 1,\n endLineNumber: closeRange.endLineNumber,\n endColumn: model.getLineMaxColumn(closeRange.endLineNumber),\n }, 1);\n return;\n }\n\n // Last resort — just highlight the matched text\n editor.setSelection(match.range);\n } catch {\n // Folding model not ready — just highlight the match\n editor.setSelection(match.range);\n }\n };\n\n // Small delay to let folding model compute after content may have changed\n requestAnimationFrame(() => {\n findAndHighlightBlock();\n });\n }, [focusBlock, focusBlockTopLevelOnly]);\n\n const handleEditorDidMount: OnMount = (editor) => {\n editorRef.current = editor;\n\n const initializeEditor = () => {\n try {\n if (language === \"python\") {\n const model = editor.getModel();\n if (model) {\n setCurrentEditorModel(model);\n }\n }\n\n if (language === \"json\" && enableAutoFormatting) {\n requestAnimationFrame(() => {\n handleFormatCode();\n });\n }\n } catch (error) {\n console.warn(\"Failed to initialize editor:\", error);\n }\n };\n\n if (editor.getModel()) {\n initializeEditor();\n } else {\n const disposable = editor.onDidChangeModel(() => {\n initializeEditor();\n disposable.dispose();\n });\n }\n\n // Detect block on mouse click — use onMouseDown + small delay so cursor\n // position is settled before we read it\n if (onBlockClickRef.current) {\n editor.onMouseDown(() => {\n requestAnimationFrame(() => {\n const pos = editor.getPosition();\n if (pos) {\n detectBlock(editor, pos.lineNumber, pos.column);\n }\n });\n });\n }\n };\n\n const handleFormatJsonCode = () => {\n try {\n const parsedJson = JSON.parse(value);\n const formattedJson = JSON.stringify(parsedJson, null, 4);\n onChange(formattedJson);\n\n // Also update the editor model if it exists\n if (currentEditorModel && activeMonacoEditor) {\n activeMonacoEditor.editor.setModelMarkers(\n currentEditorModel,\n \"json\",\n []\n );\n }\n } catch (error) {\n // Display error visually instead of logging to console\n if (currentEditorModel && activeMonacoEditor) {\n const errorMessage =\n error instanceof Error ? error.message : \"Invalid JSON\";\n try {\n activeMonacoEditor.editor.setModelMarkers(\n currentEditorModel,\n \"json\",\n [\n {\n startLineNumber: 1,\n startColumn: 1,\n endLineNumber: 1,\n endColumn: 1,\n message: `Cannot format: ${errorMessage}`,\n severity: activeMonacoEditor.MarkerSeverity.Error,\n },\n ]\n );\n } catch (markerError) {\n console.warn(\"Failed to set JSON error markers:\", markerError);\n }\n }\n }\n };\n\n const handleFormatCode = () => {\n if (language === \"python\") {\n handleFormatPythonCode();\n return;\n }\n\n if (language === \"json\") {\n handleFormatJsonCode();\n return;\n }\n\n if (editorRef.current) {\n try {\n const formatAction = editorRef.current.getAction(\n \"editor.action.formatDocument\"\n );\n if (formatAction) {\n formatAction.run();\n }\n } catch (error) {\n console.warn(\"Failed to format document:\", error);\n }\n }\n };\n\n const handleChange = (newValue: string | undefined) => {\n if (typeof newValue === \"string\") {\n onChange(newValue);\n }\n };\n\n useEffect(() => {\n if (setIsDisableSave) {\n setIsDisableSave(pythonError || pythonLoading);\n }\n }, [pythonError, pythonLoading, setIsDisableSave]);\n\n // Don't render the editor until Monaco is ready (unless we have a provided instance)\n if (!monacoEditor && !monacoInstance) {\n return (\n <div className=\"flex items-center justify-center p-8 border border-neutral-200 dark:border-neutral-700 rounded-lg\">\n <div className=\"text-neutral-600 dark:text-neutral-400\">\n Loading editor...\n </div>\n </div>\n );\n }\n\n const hoverClass = classNames(\n \"hover:bg-neutral-300 hover:dark:bg-neutral-700 p-0.5 rounded-md flex items-center justify-center\"\n );\n\n const handleCopyCode = () => {\n if (language === \"python\") {\n try {\n let formattedCode = value;\n if (formattedCode) {\n formattedCode = formattedCode\n .replace(/\\r\\n/g, \"\\n\")\n .replace(/\\r/g, \"\\n\");\n formattedCode = formattedCode\n .split(\"\\n\")\n .map((line) => line.trimEnd())\n .join(\"\\n\");\n formattedCode = formattedCode.replace(/\\n+$/, \"\") + \"\\n\";\n }\n\n navigator?.clipboard\n ?.writeText(formattedCode)\n .then(() => {\n // show success toast (kept silent as in web portal)\n })\n .catch((_error: unknown) => {\n const error = _error as Error;\n toast.error(\n error?.message || systemMessages.copyFailure(\"Python Code\"),\n {\n toastId: systemMessages.copyFailure(\"Python Code\"),\n }\n );\n });\n } catch (_error: unknown) {\n const error = _error as Error;\n toast.error(\n error?.message || systemMessages.copyFailure(\"Python Code\"),\n {\n toastId: systemMessages.copyFailure(\"Python Code\"),\n }\n );\n }\n } else if (language === \"json\") {\n try {\n const parsedJson = JSON.parse(value);\n const formattedJson = JSON.stringify(parsedJson, null, 4);\n navigator?.clipboard?.writeText(formattedJson);\n } catch (_error: unknown) {\n const error = _error as Error;\n toast.error(error?.message || systemMessages.copyFailure(\"JSON Code\"), {\n toastId: systemMessages.copyFailure(\"JSON Code\"),\n });\n }\n } else {\n navigator?.clipboard?.writeText(value);\n }\n };\n\n const getConfig = (code: string) => {\n if (code === \"python\") {\n return {\n type: \"text/x-python\",\n extension: \"py\",\n };\n }\n if (code === \"json\") {\n return {\n type: \"application/json\",\n extension: \"json\",\n };\n }\n return {\n type: \"text/plain\",\n extension: \"txt\",\n };\n };\n\n // Sanitize filename utility (matching web portal implementation)\n const sanitizeFilename = (filename: string, fallback: string): string => {\n // Remove or replace potentially dangerous characters\n const sanitized = filename\n .replace(/[<>:\"/\\\\|?*\\x00-\\x1f]/g, \"_\") // Replace illegal chars\n .replace(/\\.{2,}/g, \".\") // Replace multiple dots\n .replace(/^\\.+|\\.+$/g, \"\") // Remove leading/trailing dots\n .trim();\n\n return sanitized || fallback;\n };\n\n const handleDownloadCode = () => {\n try {\n const blob = new Blob([value], { type: getConfig(language)?.type });\n const url = URL.createObjectURL(blob);\n const anchor = document.createElement(\"a\");\n anchor.href = url;\n const extension = getConfig(language)?.extension || \"txt\";\n const sanitizedExtension = sanitizeFilename(extension, \"txt\");\n anchor.download = sanitizeFilename(\n `code_${Date.now()}.${sanitizedExtension}`,\n `code_${Date.now()}.${sanitizedExtension}`\n );\n document.body.appendChild(anchor);\n anchor.click();\n document.body.removeChild(anchor);\n URL.revokeObjectURL(url);\n } catch (_error: unknown) {\n const error = _error as Error;\n toast.error(\n error?.message || systemMessages.copyFailure(\"Code download\"),\n {\n toastId: systemMessages.copyFailure(\"Code download\"),\n }\n );\n }\n };\n\n return (\n <FullScreen handle={fullScreenHandle} className=\"h-full\">\n <div\n className={cn(\n \"relative border border-neutral-200 dark:border-neutral-700 rounded-lg h-full overflow-hidden\",\n className\n )}\n id=\"code-editor-container-with-json-grid\"\n >\n <div\n className={classNames(\n `px-3 py-2 flex items-center bg-neutral-50 dark:bg-neutral-800`,\n // withJsonGrid\n // ? \"border-none\"\n // : \"border-b border-neutral-200 dark:border-neutral-700\",\n \"border-b border-neutral-200 dark:border-neutral-700\",\n isLanguageJson ? \"justify-between\" : \"justify-end\"\n )}\n >\n {isLanguageJson && withJsonGrid ? (\n <Toggle\n isChecked={activeTab === \"Grid\"}\n onChange={(checked) => setActiveTab(checked ? \"Grid\" : \"JSON\")}\n statusText=''\n hideStatus\n withIcon\n tooltip={activeTab === \"JSON\" ? \"Grid view\" : \"Code view\"}\n icon={{\n checkedIcon: <GridOnIcon fontSize={6} className=\"cursor-pointer !block text-primary-600 dark:text-neutral-300\" />,\n uncheckedIcon: <CodeIcon fontSize={10} className=\"cursor-pointer !block text-neutral-700 dark:text-neutral-400\" />,\n }}\n />\n ) : null}\n <div className=\"flex items-center gap-0.5\">\n {renderToolbarActions?.({\n editor: editorRef.current,\n value,\n onChange,\n language,\n isEditMode,\n activeTab,\n })}\n {activeTab === \"Grid\" && isEditMode && withJsonGrid && (\n <span className=\"flex items-center justify-center border-r border-neutral-200 dark:border-neutral-700 mr-1.5 pr-1.5\">\n <Tooltip title=\"Add key\">\n <button\n type='button'\n id=\"btn-code-editor-json-grid-up\"\n onClick={() => setIsAddKeyModalOpen(true)}\n className={classNames(\n \"p-0.5 rounded-md flex items-center justify-center\",\n \"hover:bg-primary-100 hover:dark:bg-neutral-800 text-primary-600 dark:text-neutral-100\"\n )}\n >\n <AddIcon fontSize={16} />\n </button>\n </Tooltip>\n </span>\n )}\n {activeTab === \"Grid\" ? (\n <>\n <Tooltip title=\"Collapse all\">\n <button\n type='button'\n id=\"btn-code-editor-json-grid-up\"\n onClick={() => setAllExpanded(false)}\n className={hoverClass}\n >\n <KeyboardDoubleArrowUpIcon fontSize={16} />\n </button>\n </Tooltip>\n\n <Tooltip title=\"Expand all\">\n <button\n type='button'\n id=\"btn-code-editor-json-grid-down\"\n onClick={() => setAllExpanded(true)}\n className={hoverClass}\n >\n <KeyboardDoubleArrowDownIcon fontSize={16} />\n </button>\n </Tooltip>\n </>\n ) : null}\n {activeTab === \"JSON\" && withJsonGrid ? (\n <Tooltip title=\"Format\">\n <button\n type='button'\n id=\"btn-code-editor-format-code\"\n onClick={handleFormatCode}\n className={hoverClass}\n >\n <SubjectOutlinedIcon fontSize={14} />\n </button>\n </Tooltip>\n ) : null}\n {withTheme && activeTab === \"JSON\" && withJsonGrid ? (\n <Tooltip\n title={editorTheme === \"vs\" ? \"Dark mode\" : \"Light mode\"}\n >\n <button\n type='button'\n id=\"btn-code-editor-with-theme\"\n onClick={() =>\n setEditorTheme(editorTheme === \"vs\" ? \"vs-dark\" : \"vs\")\n }\n className={hoverClass}\n >\n {editorTheme === \"vs\" ? (\n <DarkModeOutlinedIcon fontSize={14} />\n ) : (\n <LightModeOutlinedIcon fontSize={14} />\n )}\n </button>\n </Tooltip>\n ) : null}\n {(language === \"python\" || language === \"json\") && isShowCopy ? (\n <Tooltip title=\"Copy\">\n <button\n type='button'\n id=\"btn-code-editor-copy-code\"\n onClick={handleCopyCode}\n className={hoverClass}\n >\n <ContentPasteRoundedIcon fontSize={14} />\n </button>\n </Tooltip>\n ) : null}\n {(language === \"python\" || language === \"json\") &&\n isShowDownload ? (\n <Tooltip title=\"Download\">\n <button\n type='button'\n id=\"btn-code-editor-download-code\"\n onClick={handleDownloadCode}\n className={hoverClass}\n >\n <FileDownloadRoundedIcon fontSize={14} />\n </button>\n </Tooltip>\n ) : null}\n {withFullScreen ? (\n <Tooltip title=\"Fullscreen\">\n <button\n onClick={toggleFocusMode}\n type='button'\n id=\"btn-code-editor-fullscreen\"\n className={hoverClass}\n >\n <FullscreenRoundedIcon fontSize={14} />\n </button>\n </Tooltip>\n ) : null}\n </div>\n </div>\n\n {activeTab === \"Grid\" && language === \"json\" ? (\n <div>\n <JsonGrid\n isFullScreen={fullScreenHandle?.active}\n allExpanded={allExpanded}\n toggleAll={() => setAllExpanded((prev) => !prev)}\n isEditMode={Boolean(isEditMode)}\n isDarkMode={theme === \"dark\"}\n style={{\n height: fullScreenHandle?.active ? \"100vh\" : height,\n }}\n value={value}\n onChange={onChange}\n setIsAddKeyModalOpen={setIsAddKeyModalOpen}\n isAddKeyModalOpen={isAddKeyModalOpen}\n />\n </div>\n ) : (\n <Editor\n height={fullScreenHandle?.active ? \"100vh\" : height}\n language={language}\n value={value}\n onChange={handleChange}\n theme={editorTheme}\n onMount={handleEditorDidMount}\n options={{\n fontSize: 16,\n folding: true,\n fontFamily: \"Menlo, Monaco, 'Courier New', monospace\",\n fontLigatures: true,\n readOnly: !isEditMode,\n }}\n />\n )}\n </div>\n </FullScreen>\n );\n};\n"],"names":["iconClass","classNames","AddIcon","fontSize","jsx","ContentPasteRoundedIcon","DarkModeOutlinedIcon","FileDownloadRoundedIcon","FullscreenRoundedIcon","KeyboardDoubleArrowDownIcon","KeyboardDoubleArrowUpIcon","LightModeOutlinedIcon","SubjectOutlinedIcon","CodeEditor","value","onChange","withFullScreen","withTheme","isEditMode","height","language","monacoEditor","isShowCopy","isShowDownload","setIsDisableSave","withJsonGrid","externalEditorTheme","externalSetEditorTheme","externalTheme","className","enableAutoFormatting","renderToolbarActions","onBlockClick","focusBlock","focusBlockTopLevelOnly","editorRef","useRef","internalEditorTheme","setInternalEditorTheme","useState","internalTheme","setInternalTheme","editorTheme","theme","setEditorTheme","newTheme","allExpanded","setAllExpanded","currentEditorModel","setCurrentEditorModel","monacoInstance","useMonaco","activeMonacoEditor","handleFormatPythonCode","pythonError","pythonLoading","usePythonSyntax","fullScreenHandle","useFullScreenHandle","activeTab","setActiveTab","isAddKeyModalOpen","setIsAddKeyModalOpen","isLanguageJson","toggleFocusMode","onBlockClickRef","detectBlock","useCallback","editor","lineNumber","column","model","getTextForRange","startLine","endLine","emitBlock","text","kind","parentBlock","foldingContrib","foldingModel","regions","totalLines","containingRanges","start","foldEnd","end","size","rawKind","a","b","innermost","outermost","j","r","position","brackets","openRange","closeRange","useEffect","allMatches","match","bestCol","m","lineContent","leadingSpaces","matchLine","matchCol","findAndHighlightBlock","bestStart","bestEnd","bestSize","handleEditorDidMount","initializeEditor","handleFormatCode","error","disposable","pos","handleFormatJsonCode","parsedJson","formattedJson","errorMessage","markerError","formatAction","handleChange","newValue","hoverClass","handleCopyCode","formattedCode","line","_error","toast","systemMessages","getConfig","code","sanitizeFilename","filename","fallback","handleDownloadCode","blob","url","anchor","extension","sanitizedExtension","FullScreen","jsxs","cn","Toggle","checked","GridOnIcon","CodeIcon","Tooltip","Fragment","JsonGrid","prev","Editor"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"CodeEditor.es.js","sources":["../../../../src/components/data-display/code-editor/CodeEditor.tsx"],"sourcesContent":["/* eslint-disable @typescript-eslint/no-explicit-any */\nimport Editor, { type OnMount } from '@monaco-editor/react';\nimport classNames from 'classnames';\nimport { type FC, useCallback, useEffect, useRef, useState } from 'react';\nimport { FullScreen, useFullScreenHandle } from 'react-full-screen';\nimport { toast } from 'react-toastify';\nimport { useMonaco } from '../../../hooks/useMonaco';\nimport { usePythonSyntax } from '../../../hooks/usePythonSyntax';\nimport { type CodeEditorProps } from '../../../types';\nimport { systemMessages } from '../../../utils/messageConstants';\nimport { JsonGrid } from './JsonGrid';\nimport Tooltip from '../../tooltip/Tooltip';\nimport { Toggle } from '../../forms/toggle/Toggle';\nimport { cn } from '../../../lib/utils';\nimport { CodeIcon, GridOnIcon } from '../../icon';\n\n// Icon class styling (matching web portal)\nconst iconClass = classNames(\n 'text-neutral-600 cursor-pointer hover:text-neutral-800',\n 'dark:text-neutral-300 dark:hover:text-neutral-50'\n);\n\n// Material Icons converted to SVG components (matching web portal icons)\nconst AddIcon = ({ fontSize }: { fontSize: number }) => (\n <svg width={fontSize} height={fontSize} viewBox=\"0 0 24 24\" fill=\"currentColor\">\n <path d=\"M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z\" />\n </svg>\n);\n\nconst ContentPasteRoundedIcon = ({ fontSize }: { fontSize: number }) => (\n <svg width={fontSize} height={fontSize} viewBox=\"0 0 24 24\" fill=\"currentColor\" className={iconClass}>\n <path d=\"M19 2h-4.18C14.4.84 13.3 0 12 0S9.6.84 9.18 2H5c-1.1 0-2 .9-2 2v16c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm-7 0c.55 0 1 .45 1 1s-.45 1-1 1-1-.45-1-1 .45-1 1-1zm7 18H5V4h2v3h10V4h2v16z\" />\n </svg>\n);\n\nconst DarkModeOutlinedIcon = ({ fontSize }: { fontSize: number }) => (\n <svg width={fontSize} height={fontSize} viewBox=\"0 0 24 24\" fill=\"currentColor\" className={iconClass}>\n <path d=\"M9.5 2c-1.82 0-3.53.5-5 1.35 2.99 1.73 5 4.95 5 8.65s-2.01 6.92-5 8.65c1.47.85 3.18 1.35 5 1.35 5.52 0 10-4.48 10-10S15.02 2 9.5 2z\" />\n </svg>\n);\n\nconst FileDownloadRoundedIcon = ({ fontSize }: { fontSize: number }) => (\n <svg width={fontSize} height={fontSize} viewBox=\"0 0 24 24\" fill=\"currentColor\" className={iconClass}>\n <path d=\"M18 15v3H6v-3H4v3c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2v-3h-2zm-1-4-5 5-5-5h3V4h4v7h3z\" />\n </svg>\n);\n\nconst FullscreenRoundedIcon = ({ fontSize }: { fontSize: number }) => (\n <svg width={fontSize} height={fontSize} viewBox=\"0 0 24 24\" fill=\"currentColor\" className={iconClass}>\n <path d=\"M7 14H5v5h5v-2H7v-3zm-2-4h2V7h3V5H5v5zm12 7h-3v2h5v-5h-2v3zM14 5v2h3v3h2V5h-5z\" />\n </svg>\n);\n\nconst KeyboardDoubleArrowDownIcon = ({ fontSize }: { fontSize: number }) => (\n <svg width={fontSize} height={fontSize} viewBox=\"0 0 24 24\" fill=\"currentColor\" className={iconClass}>\n <path d=\"M18 6.41 16.59 5 12 9.58 7.41 5 6 6.41l6 6z\" />\n <path d=\"m18 13-1.41-1.41L12 16.17l-4.59-4.58L6 13l6 6z\" />\n </svg>\n);\n\nconst KeyboardDoubleArrowUpIcon = ({ fontSize }: { fontSize: number }) => (\n <svg width={fontSize} height={fontSize} viewBox=\"0 0 24 24\" fill=\"currentColor\" className={iconClass}>\n <path d=\"M6 17.59 7.41 19 12 14.42 16.59 19 18 17.59l-6-6z\" />\n <path d=\"m6 11 1.41 1.41L12 7.83l4.59 4.58L18 11l-6-6z\" />\n </svg>\n);\n\nconst LightModeOutlinedIcon = ({ fontSize }: { fontSize: number }) => (\n <svg width={fontSize} height={fontSize} viewBox=\"0 0 24 24\" fill=\"currentColor\" className={iconClass}>\n <path d=\"M12 9c1.65 0 3 1.35 3 3s-1.35 3-3 3-3-1.35-3-3 1.35-3 3-3m0-2c-2.76 0-5 2.24-5 5s2.24 5 5 5 5-2.24 5-5-2.24-5-5-5zM2 13h2c.55 0 1-.45 1-1s-.45-1-1-1H2c-.55 0-1 .45-1 1s.45 1 1 1zm18 0h2c.55 0 1-.45 1-1s-.45-1-1-1h-2c-.55 0-1 .45-1 1s.45 1 1 1zM11 2v2c0 .55.45 1 1 1s1-.45 1-1V2c0-.55-.45-1-1-1s-1 .45-1 1zm0 18v2c0 .55.45 1 1 1s1-.45 1-1v-2c0-.55-.45-1-1-1s-1 .45-1 1zM5.99 4.58c-.39-.39-1.03-.39-1.41 0-.39.39-.39 1.03 0 1.41l1.06 1.06c.39.39 1.03.39 1.41 0s.39-1.03 0-1.41L5.99 4.58zm12.37 12.37c-.39-.39-1.03-.39-1.41 0-.39.39-.39 1.03 0 1.41l1.06 1.06c.39.39 1.03.39 1.41 0 .39-.39.39-1.03 0-1.41l-1.06-1.06zm1.06-10.96c.39-.39.39-1.03 0-1.41-.39-.39-1.03-.39-1.41 0l-1.06 1.06c-.39.39-.39 1.03 0 1.41s1.03.39 1.41 0l1.06-1.06zM7.05 18.36c.39-.39.39-1.03 0-1.41-.39-.39-1.03-.39-1.41 0l-1.06 1.06c-.39.39-.39 1.03 0 1.41s1.03.39 1.41 0l1.06-1.06z\" />\n </svg>\n);\n\nconst SubjectOutlinedIcon = ({ fontSize }: { fontSize: number }) => (\n <svg width={fontSize} height={fontSize} viewBox=\"0 0 24 24\" fill=\"currentColor\" className={iconClass}>\n <path d=\"M14 17H4v2h10v-2zm6-8H4v2h16V9zM4 15h16v-2H4v2zM4 5v2h16V5H4z\" />\n </svg>\n);\n\ntype TTabKey = 'JSON' | 'Grid';\n\nexport const CodeEditor: FC<CodeEditorProps> = ({\n value,\n onChange = () => false,\n withFullScreen = true,\n withTheme = true,\n isEditMode = false,\n height = \"55vh\",\n language = \"json\",\n monacoEditor,\n isShowCopy = true,\n isShowDownload = true,\n setIsDisableSave,\n withJsonGrid = true,\n editorTheme: externalEditorTheme,\n setEditorTheme: externalSetEditorTheme,\n theme: externalTheme,\n className,\n enableAutoFormatting = true,\n renderToolbarActions,\n onBlockClick,\n focusBlock,\n focusBlockTopLevelOnly = false,\n}) => {\n const editorRef = useRef<any>(null);\n\n // Internal theme state (used when not provided by parent)\n const [internalEditorTheme, setInternalEditorTheme] = useState<\n \"vs\" | \"vs-dark\"\n >(\"vs\");\n const [internalTheme, setInternalTheme] = useState<\"light\" | \"dark\">(\"light\");\n\n // Use external theme if provided, otherwise use internal\n const editorTheme = externalEditorTheme ?? internalEditorTheme;\n const theme = externalTheme ?? internalTheme;\n const setEditorTheme =\n externalSetEditorTheme ??\n ((newTheme: \"vs\" | \"vs-dark\") => {\n setInternalEditorTheme(newTheme);\n setInternalTheme(newTheme === \"vs-dark\" ? \"dark\" : \"light\");\n });\n\n const [allExpanded, setAllExpanded] = useState<boolean>(false);\n const [currentEditorModel, setCurrentEditorModel] = useState<any>(null);\n const monacoInstance = useMonaco();\n\n // Use provided monacoEditor prop or fall back to our managed instance\n const activeMonacoEditor = monacoEditor || monacoInstance;\n\n const {\n handleFormatCode: handleFormatPythonCode,\n pythonError,\n pythonLoading,\n } = usePythonSyntax({\n code: value,\n setCode: onChange,\n currentEditorModel,\n monacoEditor: activeMonacoEditor,\n enable: isEditMode === true && language === \"python\",\n });\n\n const fullScreenHandle = useFullScreenHandle();\n const [activeTab, setActiveTab] = useState<TTabKey>(\"JSON\");\n const [isAddKeyModalOpen, setIsAddKeyModalOpen] = useState(false);\n const isLanguageJson = language === \"json\";\n\n const toggleFocusMode = () => {\n if (fullScreenHandle?.active) {\n fullScreenHandle.exit();\n } else {\n fullScreenHandle.enter();\n }\n };\n\n const onBlockClickRef = useRef(onBlockClick);\n onBlockClickRef.current = onBlockClick;\n\n const detectBlock = useCallback(\n async (editor: any, lineNumber: number, column: number) => {\n if (!onBlockClickRef.current) return;\n\n const model = editor.getModel();\n if (!model) return;\n\n const getTextForRange = (startLine: number, endLine: number) =>\n model.getValueInRange({\n startLineNumber: startLine,\n startColumn: 1,\n endLineNumber: endLine,\n endColumn: model.getLineMaxColumn(endLine),\n });\n\n const emitBlock = (\n startLine: number,\n endLine: number,\n text: string,\n kind?: string,\n parentBlock?: { startLine: number; endLine: number; text: string; kind?: string }\n ) => {\n onBlockClickRef.current!({\n startLine,\n endLine,\n text,\n kind,\n cursorLine: lineNumber,\n cursorColumn: column,\n parentBlock,\n });\n };\n\n try {\n const foldingContrib = editor.getContribution(\n \"editor.contrib.folding\"\n );\n if (foldingContrib) {\n const foldingModel = await (foldingContrib as any).getFoldingModel();\n if (foldingModel?.regions) {\n const regions = foldingModel.regions;\n const totalLines = model.getLineCount();\n\n // Collect all folding ranges that contain the cursor line\n const containingRanges: {\n start: number;\n end: number;\n size: number;\n kind?: string;\n }[] = [];\n\n for (let i = 0; i < regions.length; i++) {\n const start = regions.getStartLineNumber(i);\n const foldEnd = regions.getEndLineNumber(i);\n const end = Math.min(foldEnd + 1, totalLines);\n const size = end - start;\n\n if (lineNumber >= start && lineNumber <= end) {\n const rawKind = regions.getType(i);\n const kind =\n rawKind === 1\n ? \"comment\"\n : rawKind === 2\n ? \"imports\"\n : rawKind === 3\n ? \"region\"\n : undefined;\n containingRanges.push({ start, end, size, kind });\n }\n }\n\n if (containingRanges.length > 0) {\n // Sort by size: smallest first (innermost) → largest last (outermost)\n containingRanges.sort((a, b) => a.size - b.size);\n\n const innermost = containingRanges[0];\n const text = getTextForRange(innermost.start, innermost.end);\n\n // Find the outermost block that isn't the root document range.\n // Walk from largest to smallest, skip any range that starts at\n // line 1 and ends at the last line (that's the root `{}`).\n let outermost: typeof containingRanges[number] | undefined;\n for (let j = containingRanges.length - 1; j > 0; j--) {\n const r = containingRanges[j];\n const isRoot = r.start <= 1 && r.end >= totalLines;\n if (!isRoot) {\n outermost = r;\n break;\n }\n }\n\n const parentBlock =\n outermost && outermost !== innermost\n ? {\n startLine: outermost.start,\n endLine: outermost.end,\n text: getTextForRange(outermost.start, outermost.end),\n kind: outermost.kind,\n }\n : undefined;\n\n emitBlock(innermost.start, innermost.end, text, innermost.kind, parentBlock);\n return;\n }\n }\n }\n\n // Bracket matching fallback — no parent detection available\n const position = { lineNumber, column };\n const brackets = model.bracketPairs?.findEnclosingBrackets?.(position);\n\n if (brackets && brackets.length === 2) {\n const [openRange, closeRange] = brackets;\n const startLine = openRange.startLineNumber;\n const endLine = closeRange.endLineNumber;\n const text = getTextForRange(startLine, endLine);\n emitBlock(startLine, endLine, text);\n return;\n }\n\n // Full document fallback\n const totalLines = model.getLineCount();\n const text = model.getValue();\n emitBlock(1, totalLines, text);\n } catch {\n // Editor not ready — ignore silently\n }\n },\n []\n );\n\n // Navigate to a block when focusBlock changes\n useEffect(() => {\n if (!focusBlock || !editorRef.current) return;\n\n const editor = editorRef.current;\n const model = editor.getModel();\n if (!model) return;\n\n const allMatches = model.findMatches(\n focusBlock,\n true,\n false,\n true,\n null,\n false\n );\n\n if (allMatches.length === 0) return;\n\n let match = allMatches[0];\n\n if (focusBlockTopLevelOnly && allMatches.length > 1) {\n // A top-level key in formatted JSON has minimal leading whitespace\n // (one indent level). Find the match closest to column 1.\n let bestCol = Infinity;\n for (const m of allMatches) {\n const lineContent = model.getLineContent(m.range.startLineNumber);\n const leadingSpaces = lineContent.length - lineContent.trimStart().length;\n if (leadingSpaces < bestCol) {\n bestCol = leadingSpaces;\n match = m;\n }\n }\n }\n\n const matchLine = match.range.startLineNumber;\n const matchCol = match.range.startColumn;\n\n // Move cursor to the match with smooth scroll\n editor.setPosition({ lineNumber: matchLine, column: matchCol });\n editor.revealLineInCenter(matchLine, 1);\n\n // Find the enclosing block and highlight it\n const findAndHighlightBlock = async () => {\n try {\n // Try folding ranges first\n const foldingContrib = editor.getContribution(\n \"editor.contrib.folding\"\n );\n if (foldingContrib) {\n const foldingModel = await (foldingContrib as any).getFoldingModel();\n if (foldingModel?.regions) {\n const regions = foldingModel.regions;\n let bestStart = -1;\n let bestEnd = -1;\n let bestSize = Infinity;\n\n for (let i = 0; i < regions.length; i++) {\n const start = regions.getStartLineNumber(i);\n const foldEnd = regions.getEndLineNumber(i);\n const end = Math.min(foldEnd + 1, model.getLineCount());\n const size = end - start;\n\n if (\n matchLine >= start &&\n matchLine <= end &&\n size < bestSize\n ) {\n bestStart = start;\n bestEnd = end;\n bestSize = size;\n }\n }\n\n if (bestStart !== -1) {\n editor.setSelection({\n startLineNumber: bestStart,\n startColumn: 1,\n endLineNumber: bestEnd,\n endColumn: model.getLineMaxColumn(bestEnd),\n });\n editor.revealRangeInCenter({\n startLineNumber: bestStart,\n startColumn: 1,\n endLineNumber: bestEnd,\n endColumn: model.getLineMaxColumn(bestEnd),\n }, 1);\n return;\n }\n }\n }\n\n // Fall back to bracket matching\n const position = { lineNumber: matchLine, column: matchCol };\n const brackets =\n model.bracketPairs?.findEnclosingBrackets?.(position);\n\n if (brackets && brackets.length === 2) {\n const [openRange, closeRange] = brackets;\n editor.setSelection({\n startLineNumber: openRange.startLineNumber,\n startColumn: 1,\n endLineNumber: closeRange.endLineNumber,\n endColumn: model.getLineMaxColumn(closeRange.endLineNumber),\n });\n editor.revealRangeInCenter({\n startLineNumber: openRange.startLineNumber,\n startColumn: 1,\n endLineNumber: closeRange.endLineNumber,\n endColumn: model.getLineMaxColumn(closeRange.endLineNumber),\n }, 1);\n return;\n }\n\n // Last resort — just highlight the matched text\n editor.setSelection(match.range);\n } catch {\n // Folding model not ready — just highlight the match\n editor.setSelection(match.range);\n }\n };\n\n // Small delay to let folding model compute after content may have changed\n requestAnimationFrame(() => {\n findAndHighlightBlock();\n });\n }, [focusBlock, focusBlockTopLevelOnly]);\n\n const handleEditorDidMount: OnMount = (editor) => {\n editorRef.current = editor;\n\n const initializeEditor = () => {\n try {\n if (language === \"python\") {\n const model = editor.getModel();\n if (model) {\n setCurrentEditorModel(model);\n }\n }\n\n if (language === \"json\" && enableAutoFormatting) {\n requestAnimationFrame(() => {\n handleFormatCode();\n });\n }\n } catch (error) {\n console.warn(\"Failed to initialize editor:\", error);\n }\n };\n\n if (editor.getModel()) {\n initializeEditor();\n } else {\n const disposable = editor.onDidChangeModel(() => {\n initializeEditor();\n disposable.dispose();\n });\n }\n\n // Detect block on mouse click — use onMouseDown + small delay so cursor\n // position is settled before we read it\n if (onBlockClickRef.current) {\n editor.onMouseDown(() => {\n requestAnimationFrame(() => {\n const pos = editor.getPosition();\n if (pos) {\n detectBlock(editor, pos.lineNumber, pos.column);\n }\n });\n });\n }\n };\n\n const handleFormatJsonCode = () => {\n try {\n const parsedJson = JSON.parse(value);\n const formattedJson = JSON.stringify(parsedJson, null, 4);\n onChange(formattedJson);\n\n // Also update the editor model if it exists\n if (currentEditorModel && activeMonacoEditor) {\n activeMonacoEditor.editor.setModelMarkers(\n currentEditorModel,\n \"json\",\n []\n );\n }\n } catch (error) {\n // Display error visually instead of logging to console\n if (currentEditorModel && activeMonacoEditor) {\n const errorMessage =\n error instanceof Error ? error.message : \"Invalid JSON\";\n try {\n activeMonacoEditor.editor.setModelMarkers(\n currentEditorModel,\n \"json\",\n [\n {\n startLineNumber: 1,\n startColumn: 1,\n endLineNumber: 1,\n endColumn: 1,\n message: `Cannot format: ${errorMessage}`,\n severity: activeMonacoEditor.MarkerSeverity.Error,\n },\n ]\n );\n } catch (markerError) {\n console.warn(\"Failed to set JSON error markers:\", markerError);\n }\n }\n }\n };\n\n const handleFormatCode = () => {\n if (language === \"python\") {\n handleFormatPythonCode();\n return;\n }\n\n if (language === \"json\") {\n handleFormatJsonCode();\n return;\n }\n\n if (editorRef.current) {\n try {\n const formatAction = editorRef.current.getAction(\n \"editor.action.formatDocument\"\n );\n if (formatAction) {\n formatAction.run();\n }\n } catch (error) {\n console.warn(\"Failed to format document:\", error);\n }\n }\n };\n\n const handleChange = (newValue: string | undefined) => {\n if (typeof newValue === \"string\") {\n onChange(newValue);\n }\n };\n\n useEffect(() => {\n if (setIsDisableSave) {\n setIsDisableSave(pythonError || pythonLoading);\n }\n }, [pythonError, pythonLoading, setIsDisableSave]);\n\n // Don't render the editor until Monaco is ready (unless we have a provided instance)\n if (!monacoEditor && !monacoInstance) {\n return (\n <div className=\"flex items-center justify-center p-8 border border-neutral-200 dark:border-neutral-700 rounded-lg\">\n <div className=\"text-neutral-600 dark:text-neutral-400\">\n Loading editor...\n </div>\n </div>\n );\n }\n\n const hoverClass = classNames(\n \"hover:bg-neutral-300 hover:dark:bg-neutral-700 p-0.5 rounded-md flex items-center justify-center\"\n );\n\n const handleCopyCode = () => {\n if (language === \"python\") {\n try {\n let formattedCode = value;\n if (formattedCode) {\n formattedCode = formattedCode\n .replace(/\\r\\n/g, \"\\n\")\n .replace(/\\r/g, \"\\n\");\n formattedCode = formattedCode\n .split(\"\\n\")\n .map((line) => line.trimEnd())\n .join(\"\\n\");\n formattedCode = formattedCode.replace(/\\n+$/, \"\") + \"\\n\";\n }\n\n navigator?.clipboard\n ?.writeText(formattedCode)\n .then(() => {\n // show success toast (kept silent as in web portal)\n })\n .catch((_error: unknown) => {\n const error = _error as Error;\n toast.error(\n error?.message || systemMessages.copyFailure(\"Python Code\"),\n {\n toastId: systemMessages.copyFailure(\"Python Code\"),\n }\n );\n });\n } catch (_error: unknown) {\n const error = _error as Error;\n toast.error(\n error?.message || systemMessages.copyFailure(\"Python Code\"),\n {\n toastId: systemMessages.copyFailure(\"Python Code\"),\n }\n );\n }\n } else if (language === \"json\") {\n try {\n const parsedJson = JSON.parse(value);\n const formattedJson = JSON.stringify(parsedJson, null, 4);\n navigator?.clipboard?.writeText(formattedJson);\n } catch (_error: unknown) {\n const error = _error as Error;\n toast.error(error?.message || systemMessages.copyFailure(\"JSON Code\"), {\n toastId: systemMessages.copyFailure(\"JSON Code\"),\n });\n }\n } else {\n navigator?.clipboard?.writeText(value);\n }\n };\n\n const getConfig = (code: string) => {\n if (code === \"python\") {\n return {\n type: \"text/x-python\",\n extension: \"py\",\n };\n }\n if (code === \"json\") {\n return {\n type: \"application/json\",\n extension: \"json\",\n };\n }\n return {\n type: \"text/plain\",\n extension: \"txt\",\n };\n };\n\n // Sanitize filename utility (matching web portal implementation)\n const sanitizeFilename = (filename: string, fallback: string): string => {\n // Remove or replace potentially dangerous characters\n const sanitized = filename\n .replace(/[<>:\"/\\\\|?*\\x00-\\x1f]/g, \"_\") // Replace illegal chars\n .replace(/\\.{2,}/g, \".\") // Replace multiple dots\n .replace(/^\\.+|\\.+$/g, \"\") // Remove leading/trailing dots\n .trim();\n\n return sanitized || fallback;\n };\n\n const handleDownloadCode = () => {\n try {\n const blob = new Blob([value], { type: getConfig(language)?.type });\n const url = URL.createObjectURL(blob);\n const anchor = document.createElement(\"a\");\n anchor.href = url;\n const extension = getConfig(language)?.extension || \"txt\";\n const sanitizedExtension = sanitizeFilename(extension, \"txt\");\n anchor.download = sanitizeFilename(\n `code_${Date.now()}.${sanitizedExtension}`,\n `code_${Date.now()}.${sanitizedExtension}`\n );\n document.body.appendChild(anchor);\n anchor.click();\n document.body.removeChild(anchor);\n URL.revokeObjectURL(url);\n } catch (_error: unknown) {\n const error = _error as Error;\n toast.error(\n error?.message || systemMessages.copyFailure(\"Code download\"),\n {\n toastId: systemMessages.copyFailure(\"Code download\"),\n }\n );\n }\n };\n\n return (\n <FullScreen handle={fullScreenHandle} className=\"h-full\">\n <div\n className={cn(\n \"relative border border-neutral-200 dark:border-neutral-700 rounded-lg h-full overflow-hidden\",\n className\n )}\n id=\"code-editor-container-with-json-grid\"\n >\n <div\n className={classNames(\n `px-3 py-2 flex items-center bg-neutral-50 dark:bg-neutral-800`,\n // withJsonGrid\n // ? \"border-none\"\n // : \"border-b border-neutral-200 dark:border-neutral-700\",\n \"border-b border-neutral-200 dark:border-neutral-700\",\n isLanguageJson ? \"justify-between\" : \"justify-end\"\n )}\n >\n {isLanguageJson && withJsonGrid ? (\n <Toggle\n isChecked={activeTab === \"Grid\"}\n onChange={(checked) => setActiveTab(checked ? \"Grid\" : \"JSON\")}\n statusText=''\n hideStatus\n withIcon\n tooltip={activeTab === \"JSON\" ? \"Grid view\" : \"Code view\"}\n icon={{\n checkedIcon: <GridOnIcon className=\"cursor-pointer !block text-primary-600 dark:text-neutral-300 h-2xs w-2xs lg:h-xs lg:w-xs\" />,\n uncheckedIcon: <CodeIcon className=\"cursor-pointer !block text-neutral-700 dark:text-neutral-400 h-2xs w-2xs lg:h-xs lg:w-xs\" />,\n }}\n />\n ) : null}\n <div className=\"flex items-center gap-0.5\">\n {renderToolbarActions?.({\n editor: editorRef.current,\n value,\n onChange,\n language,\n isEditMode,\n activeTab,\n })}\n {activeTab === \"Grid\" && isEditMode && withJsonGrid && (\n <span className=\"flex items-center justify-center border-r border-neutral-200 dark:border-neutral-700 mr-1.5 pr-1.5\">\n <Tooltip title=\"Add key\">\n <button\n type='button'\n id=\"btn-code-editor-json-grid-up\"\n onClick={() => setIsAddKeyModalOpen(true)}\n className={classNames(\n \"p-0.5 rounded-md flex items-center justify-center\",\n \"hover:bg-primary-100 hover:dark:bg-neutral-800 text-primary-600 dark:text-neutral-100\"\n )}\n >\n <AddIcon fontSize={16} />\n </button>\n </Tooltip>\n </span>\n )}\n {activeTab === \"Grid\" ? (\n <>\n <Tooltip title=\"Collapse all\">\n <button\n type='button'\n id=\"btn-code-editor-json-grid-up\"\n onClick={() => setAllExpanded(false)}\n className={hoverClass}\n >\n <KeyboardDoubleArrowUpIcon fontSize={16} />\n </button>\n </Tooltip>\n\n <Tooltip title=\"Expand all\">\n <button\n type='button'\n id=\"btn-code-editor-json-grid-down\"\n onClick={() => setAllExpanded(true)}\n className={hoverClass}\n >\n <KeyboardDoubleArrowDownIcon fontSize={16} />\n </button>\n </Tooltip>\n </>\n ) : null}\n {activeTab === \"JSON\" && withJsonGrid ? (\n <Tooltip title=\"Format\">\n <button\n type='button'\n id=\"btn-code-editor-format-code\"\n onClick={handleFormatCode}\n className={hoverClass}\n >\n <SubjectOutlinedIcon fontSize={14} />\n </button>\n </Tooltip>\n ) : null}\n {withTheme && activeTab === \"JSON\" && withJsonGrid ? (\n <Tooltip\n title={editorTheme === \"vs\" ? \"Dark mode\" : \"Light mode\"}\n >\n <button\n type='button'\n id=\"btn-code-editor-with-theme\"\n onClick={() =>\n setEditorTheme(editorTheme === \"vs\" ? \"vs-dark\" : \"vs\")\n }\n className={hoverClass}\n >\n {editorTheme === \"vs\" ? (\n <DarkModeOutlinedIcon fontSize={14} />\n ) : (\n <LightModeOutlinedIcon fontSize={14} />\n )}\n </button>\n </Tooltip>\n ) : null}\n {(language === \"python\" || language === \"json\") && isShowCopy ? (\n <Tooltip title=\"Copy\">\n <button\n type='button'\n id=\"btn-code-editor-copy-code\"\n onClick={handleCopyCode}\n className={hoverClass}\n >\n <ContentPasteRoundedIcon fontSize={14} />\n </button>\n </Tooltip>\n ) : null}\n {(language === \"python\" || language === \"json\") &&\n isShowDownload ? (\n <Tooltip title=\"Download\">\n <button\n type='button'\n id=\"btn-code-editor-download-code\"\n onClick={handleDownloadCode}\n className={hoverClass}\n >\n <FileDownloadRoundedIcon fontSize={14} />\n </button>\n </Tooltip>\n ) : null}\n {withFullScreen ? (\n <Tooltip title=\"Fullscreen\">\n <button\n onClick={toggleFocusMode}\n type='button'\n id=\"btn-code-editor-fullscreen\"\n className={hoverClass}\n >\n <FullscreenRoundedIcon fontSize={14} />\n </button>\n </Tooltip>\n ) : null}\n </div>\n </div>\n\n {activeTab === \"Grid\" && language === \"json\" ? (\n <div>\n <JsonGrid\n isFullScreen={fullScreenHandle?.active}\n allExpanded={allExpanded}\n toggleAll={() => setAllExpanded((prev) => !prev)}\n isEditMode={Boolean(isEditMode)}\n isDarkMode={theme === \"dark\"}\n style={{\n height: fullScreenHandle?.active ? \"100vh\" : height,\n }}\n value={value}\n onChange={onChange}\n setIsAddKeyModalOpen={setIsAddKeyModalOpen}\n isAddKeyModalOpen={isAddKeyModalOpen}\n />\n </div>\n ) : (\n <Editor\n height={fullScreenHandle?.active ? \"100vh\" : height}\n language={language}\n value={value}\n onChange={handleChange}\n theme={editorTheme}\n onMount={handleEditorDidMount}\n options={{\n fontSize: 16,\n folding: true,\n fontFamily: \"Menlo, Monaco, 'Courier New', monospace\",\n fontLigatures: true,\n readOnly: !isEditMode,\n }}\n />\n )}\n </div>\n </FullScreen>\n );\n};\n"],"names":["iconClass","classNames","AddIcon","fontSize","jsx","ContentPasteRoundedIcon","DarkModeOutlinedIcon","FileDownloadRoundedIcon","FullscreenRoundedIcon","KeyboardDoubleArrowDownIcon","KeyboardDoubleArrowUpIcon","LightModeOutlinedIcon","SubjectOutlinedIcon","CodeEditor","value","onChange","withFullScreen","withTheme","isEditMode","height","language","monacoEditor","isShowCopy","isShowDownload","setIsDisableSave","withJsonGrid","externalEditorTheme","externalSetEditorTheme","externalTheme","className","enableAutoFormatting","renderToolbarActions","onBlockClick","focusBlock","focusBlockTopLevelOnly","editorRef","useRef","internalEditorTheme","setInternalEditorTheme","useState","internalTheme","setInternalTheme","editorTheme","theme","setEditorTheme","newTheme","allExpanded","setAllExpanded","currentEditorModel","setCurrentEditorModel","monacoInstance","useMonaco","activeMonacoEditor","handleFormatPythonCode","pythonError","pythonLoading","usePythonSyntax","fullScreenHandle","useFullScreenHandle","activeTab","setActiveTab","isAddKeyModalOpen","setIsAddKeyModalOpen","isLanguageJson","toggleFocusMode","onBlockClickRef","detectBlock","useCallback","editor","lineNumber","column","model","getTextForRange","startLine","endLine","emitBlock","text","kind","parentBlock","foldingContrib","foldingModel","regions","totalLines","containingRanges","start","foldEnd","end","size","rawKind","a","b","innermost","outermost","j","r","position","brackets","openRange","closeRange","useEffect","allMatches","match","bestCol","m","lineContent","leadingSpaces","matchLine","matchCol","findAndHighlightBlock","bestStart","bestEnd","bestSize","handleEditorDidMount","initializeEditor","handleFormatCode","error","disposable","pos","handleFormatJsonCode","parsedJson","formattedJson","errorMessage","markerError","formatAction","handleChange","newValue","hoverClass","handleCopyCode","formattedCode","line","_error","toast","systemMessages","getConfig","code","sanitizeFilename","filename","fallback","handleDownloadCode","blob","url","anchor","extension","sanitizedExtension","FullScreen","jsxs","cn","Toggle","checked","GridOnIcon","CodeIcon","Tooltip","Fragment","JsonGrid","prev","Editor"],"mappings":"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"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime"),N=require("../../../_virtual/index.cjs.js"),_=require("react"),L=require("react-router-dom"),O=require("../../icons/CloseIcon.cjs.js"),I=require("../../tooltip/Tooltip.cjs.js"),k={primary:"bg-primary-50 border-primary-100 text-primary-600 dark:bg-primary-900 dark:border-primary-800 dark:text-primary-400",success:"bg-green-50 border-green-200 text-green-700 dark:bg-green-950 dark:border-green-900 dark:text-green-300",warning:"bg-yellow-50 border-yellow-200 text-yellow-700 dark:bg-yellow-950 dark:border-yellow-900 dark:text-yellow-300",error:"bg-red-50 border-red-200 text-red-700 dark:bg-red-950 dark:border-red-900 dark:text-red-300",neutral:"bg-gray-50 border-gray-200 text-gray-700 dark:bg-gray-900 dark:border-gray-700 dark:text-gray-300",red:"bg-red-50 border-red-200 text-red-700 dark:bg-red-950 dark:border-red-900 dark:text-red-300",green:"bg-green-50 border-green-200 text-green-700 dark:bg-green-950 dark:border-green-900 dark:text-green-300",blue:"bg-blue-50 border-blue-200 text-blue-700 dark:bg-blue-950 dark:border-blue-900 dark:text-blue-300",teal:"bg-teal-50 border-teal-200 text-teal-700 dark:bg-teal-950 dark:border-teal-900 dark:text-teal-300",orange:"bg-orange-50 border-orange-200 text-orange-700 dark:bg-orange-950 dark:border-orange-900 dark:text-orange-300",peach:"bg-peach-50 border-peach-200 text-peach-700 dark:bg-peach-950 dark:border-peach-900 dark:text-peach-300",navy:"bg-slate-50 border-slate-200 text-slate-700 dark:bg-slate-900 dark:border-slate-700 dark:text-slate-300",gray:"bg-gray-50 border-gray-200 text-gray-700 dark:bg-gray-900 dark:border-gray-700 dark:text-gray-300",grey:"bg-gray-50 border-gray-200 text-gray-700 dark:bg-gray-900 dark:border-gray-700 dark:text-gray-300",yellow:"bg-yellow-50 border-yellow-200 text-yellow-700 dark:bg-yellow-950 dark:border-yellow-900 dark:text-yellow-300",purple:"bg-purple-50 border-purple-200 text-purple-700 dark:bg-purple-950 dark:border-purple-900 dark:text-purple-300"},C=/^#[0-9a-fA-F]{6}$/,W=/^(?:[a-z][a-z\d+\-.]*:|\/\/)/i,B=(e,r)=>r?"":e?k[e.toLowerCase()]??k.primary:k.primary,F=e=>{const r=e.trim().toLowerCase();return C.test(r)?r:void 0},P=e=>W.test(e),X=e=>{switch(e){case"xs":return"text-3xs leading-3 px-1 border-[0.5px] rounded";case"lg":return"text-sm leading-5 px-1.5 border rounded-md";case"sm":return"text-2xs leading-4 px-1 border-[0.5px] rounded";default:return"text-xs leading-4 px-1.5 border rounded-md"}},j=_.forwardRef(({label:e,href:r,color:l,size:v="md",className:R,onClick:s,onMouseDown:n,truncate:i,isHashColor:E=!1,theme:g,icon:$,removable:S=!1,onRemove:m,onUpload:h,acceptsUpload:w=!1,tooltip:A=!1,"aria-label":b,role:x},c)=>{const d=typeof l=="string"&&(E||C.test(l))?F(l):void 0,q=!!d,y={maxWidth:"100%",...d?{backgroundColor:`${d}26`,borderColor:`${d}59`,color:d}:{}},o=!!(s||w||r),z=!!(r&&P(r)),H=a=>{const T=a.target.files?.[0];T&&h&&h(T),a.target.value=""},p=N("inline-flex items-center font-medium",B(l,q),X(v),o&&"cursor-pointer hover:opacity-80",R),f=t.jsxs("div",{className:"flex items-center gap-0.5 min-w-0 overflow-hidden",style:{maxWidth:"100%"},children:[$,i?t.jsx("p",{title:e,className:N("overflow-hidden whitespace-nowrap text-ellipsis",o&&"cursor-pointer"),style:{maxWidth:"100%"},children:e.length>i?`${e.slice(0,i)}...`:e}):t.jsx("p",{className:"overflow-hidden whitespace-nowrap text-ellipsis",style:{maxWidth:"100%"},children:e}),w&&t.jsx("input",{type:"file",onChange:H,className:"absolute inset-0 h-full w-full cursor-pointer opacity-0","aria-label":`Upload file for ${e}`}),S&&m&&t.jsx("button",{onClick:m,className:"ml-1 flex-shrink-0","aria-label":`Remove ${e}`,type:"button",children:t.jsx(O.CloseIcon,{size:12,className:"cursor-pointer"})})]}),u=A?t.jsx(I,{title:e,delayShow:!0,children:f}):f;return r?z?t.jsx("a",{ref:c,href:r,className:p,style:y,onMouseDown:n,onClick:s,"aria-label":b||`Tag: ${e}`,role:x,"data-theme":g,children:u}):t.jsx(L.Link,{ref:c,to:r,className:p,style:y,onMouseDown:n,onClick:s,"aria-label":b||`Tag: ${e}`,role:x,"data-theme":g,children:u}):t.jsx("div",{ref:c,className:p,style:y,onMouseDown:n,onClick:s,onKeyDown:o?a=>{(a.key==="Enter"||a.key===" ")&&(a.preventDefault(),a.currentTarget.click())}:void 0,"aria-label":b||`Tag: ${e}`,role:x??(o?"button":void 0),tabIndex:o?0:void 0,"data-theme":g,children:u})});j.displayName="Tag";exports.Tag=j;
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime"),N=require("../../../_virtual/index.cjs.js"),_=require("react"),L=require("react-router-dom"),O=require("../../icons/CloseIcon.cjs.js"),I=require("../../tooltip/Tooltip.cjs.js"),k={primary:"bg-primary-50 border-primary-100 text-primary-600 dark:bg-primary-900 dark:border-primary-800 dark:text-primary-400",success:"bg-green-50 border-green-200 text-green-700 dark:bg-green-950 dark:border-green-900 dark:text-green-300",warning:"bg-yellow-50 border-yellow-200 text-yellow-700 dark:bg-yellow-950 dark:border-yellow-900 dark:text-yellow-300",error:"bg-red-50 border-red-200 text-red-700 dark:bg-red-950 dark:border-red-900 dark:text-red-300",neutral:"bg-gray-50 border-gray-200 text-gray-700 dark:bg-gray-900 dark:border-gray-700 dark:text-gray-300",red:"bg-red-50 border-red-200 text-red-700 dark:bg-red-950 dark:border-red-900 dark:text-red-300",green:"bg-green-50 border-green-200 text-green-700 dark:bg-green-950 dark:border-green-900 dark:text-green-300",blue:"bg-blue-50 border-blue-200 text-blue-700 dark:bg-blue-950 dark:border-blue-900 dark:text-blue-300",teal:"bg-teal-50 border-teal-200 text-teal-700 dark:bg-teal-950 dark:border-teal-900 dark:text-teal-300",orange:"bg-orange-50 border-orange-200 text-orange-700 dark:bg-orange-950 dark:border-orange-900 dark:text-orange-300",peach:"bg-peach-50 border-peach-200 text-peach-700 dark:bg-peach-950 dark:border-peach-900 dark:text-peach-300",navy:"bg-slate-50 border-slate-200 text-slate-700 dark:bg-slate-900 dark:border-slate-700 dark:text-slate-300",gray:"bg-gray-50 border-gray-200 text-gray-700 dark:bg-gray-900 dark:border-gray-700 dark:text-gray-300",grey:"bg-gray-50 border-gray-200 text-gray-700 dark:bg-gray-900 dark:border-gray-700 dark:text-gray-300",yellow:"bg-yellow-50 border-yellow-200 text-yellow-700 dark:bg-yellow-950 dark:border-yellow-900 dark:text-yellow-300",purple:"bg-purple-50 border-purple-200 text-purple-700 dark:bg-purple-950 dark:border-purple-900 dark:text-purple-300"},C=/^#[0-9a-fA-F]{6}$/,W=/^(?:[a-z][a-z\d+\-.]*:|\/\/)/i,B=(e,r)=>r?"":e?k[e.toLowerCase()]??k.primary:k.primary,F=e=>{const r=e.trim().toLowerCase();return C.test(r)?r:void 0},P=e=>W.test(e),X=e=>{switch(e){case"xs":return"text-3xs leading-3 px-1 border-[0.5px] rounded";case"lg":return"text-sm leading-5 px-1.5 border rounded-md";case"sm":return"text-2xs leading-4 px-1 border-[0.5px] rounded";default:return"text-xs leading-4 px-1.5 border rounded-md"}},j=_.forwardRef(({label:e,href:r,color:l,size:v="md",className:R,onClick:s,onMouseDown:n,truncate:i,isHashColor:E=!1,theme:g,icon:$,removable:S=!1,onRemove:m,onUpload:h,acceptsUpload:w=!1,tooltip:A=!1,"aria-label":b,role:x},c)=>{const d=typeof l=="string"&&(E||C.test(l))?F(l):void 0,q=!!d,y={maxWidth:"100%",...d?{backgroundColor:`${d}26`,borderColor:`${d}59`,color:d}:{}},o=!!(s||w||r),z=!!(r&&P(r)),H=a=>{const T=a.target.files?.[0];T&&h&&h(T),a.target.value=""},p=N("inline-flex items-center font-medium py-0.5",B(l,q),X(v),o&&"cursor-pointer hover:opacity-80",R),f=t.jsxs("div",{className:"flex items-center gap-0.5 min-w-0 overflow-hidden",style:{maxWidth:"100%"},children:[$,i?t.jsx("p",{title:e,className:N("overflow-hidden whitespace-nowrap text-ellipsis",o&&"cursor-pointer"),style:{maxWidth:"100%"},children:e.length>i?`${e.slice(0,i)}...`:e}):t.jsx("p",{className:"overflow-hidden whitespace-nowrap text-ellipsis",style:{maxWidth:"100%"},children:e}),w&&t.jsx("input",{type:"file",onChange:H,className:"absolute inset-0 h-full w-full cursor-pointer opacity-0","aria-label":`Upload file for ${e}`}),S&&m&&t.jsx("button",{onClick:m,className:"ml-1 flex-shrink-0","aria-label":`Remove ${e}`,type:"button",children:t.jsx(O.CloseIcon,{size:12,className:"cursor-pointer"})})]}),u=A?t.jsx(I,{title:e,delayShow:!0,children:f}):f;return r?z?t.jsx("a",{ref:c,href:r,className:p,style:y,onMouseDown:n,onClick:s,"aria-label":b||`Tag: ${e}`,role:x,"data-theme":g,children:u}):t.jsx(L.Link,{ref:c,to:r,className:p,style:y,onMouseDown:n,onClick:s,"aria-label":b||`Tag: ${e}`,role:x,"data-theme":g,children:u}):t.jsx("div",{ref:c,className:p,style:y,onMouseDown:n,onClick:s,onKeyDown:o?a=>{(a.key==="Enter"||a.key===" ")&&(a.preventDefault(),a.currentTarget.click())}:void 0,"aria-label":b||`Tag: ${e}`,role:x??(o?"button":void 0),tabIndex:o?0:void 0,"data-theme":g,children:u})});j.displayName="Tag";exports.Tag=j;
|
|
2
2
|
//# sourceMappingURL=Tag.cjs.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Tag.cjs.js","sources":["../../../../src/components/data-display/tag/Tag.tsx"],"sourcesContent":["import cn from \"classnames\";\nimport { forwardRef, type CSSProperties, type Ref } from \"react\";\nimport { Link } from \"react-router-dom\";\nimport { CloseIcon } from \"../../icons/CloseIcon\";\nimport Tooltip from \"../../tooltip/Tooltip\";\n\n/**\n * Available tag size options\n */\nexport type TagSize = \"xs\" | \"sm\" | \"md\" | \"lg\";\n\n/**\n * Available color names for tags\n */\nexport type TagColor =\n | \"primary\"\n | \"success\"\n | \"warning\"\n | \"error\"\n | \"neutral\"\n | \"red\"\n | \"green\"\n | \"blue\"\n | \"teal\"\n | \"yellow\"\n | \"orange\"\n | \"peach\"\n | \"purple\"\n | \"navy\"\n | \"gray\"\n | \"grey\";\n\nexport type ThemeMode = \"light\" | \"dark\";\n\n/**\n * Upload handler function type\n */\nexport type UploadHandler = (file: File) => void | Promise<void>;\n\n/**\n * Props for the Tag component\n */\nexport interface TagProps {\n /** The text content to display */\n label: string;\n /** Router path or external URL */\n href?: string;\n /** Color name or hex color value (example: #3B82F6 or red) */\n color?: string;\n /** Size variant */\n size?: TagSize;\n /** Additional CSS classes */\n className?: string;\n /** Click handler for the tag */\n onClick?: (e: React.MouseEvent<HTMLElement, MouseEvent>) => void;\n /** Mouse down handler */\n onMouseDown?: (e: React.MouseEvent<HTMLElement, MouseEvent>) => void;\n /** Maximum character length before truncation */\n truncate?: number;\n /** Treat `color` as a hex color string (e.g. `#3B82F6` or `3b82f6`). When true, the value is applied as a hex regardless of named-color matches. */\n isHashColor?: boolean;\n /** Theme mode */\n theme?: ThemeMode;\n /** Icon to display before the label */\n icon?: React.ReactNode;\n /** Whether the tag is removable (shows close button) */\n removable?: boolean;\n /** Handler for remove button click */\n onRemove?: (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;\n /** Upload handler function */\n onUpload?: UploadHandler;\n /** Whether the tag accepts file uploads */\n acceptsUpload?: boolean;\n /** Whether to show a tooltip with the label on hover */\n tooltip?: boolean;\n /** Custom aria-label for accessibility */\n \"aria-label\"?: string;\n /** ARIA role override */\n role?: React.AriaRole;\n}\n\n/**\n * Tag component displays labels with customizable colors and styling\n *\n * @example\n * ```tsx\n * <Tag label=\"React\" color=\"blue\" size=\"md\" />\n * <Tag label=\"TypeScript\" color=\"#3178c6\" isHashColor />\n * <Tag label=\"Removable\" removable onRemove={handleRemove} />\n * <Tag label=\"Upload\" acceptsUpload onUpload={handleUpload} />\n * ```\n */\nconst TAG_COLOR_CLASSES: Record<TagColor, string> = {\n primary: \"bg-primary-50 border-primary-100 text-primary-600 dark:bg-primary-900 dark:border-primary-800 dark:text-primary-400\",\n success: \"bg-green-50 border-green-200 text-green-700 dark:bg-green-950 dark:border-green-900 dark:text-green-300\",\n warning: \"bg-yellow-50 border-yellow-200 text-yellow-700 dark:bg-yellow-950 dark:border-yellow-900 dark:text-yellow-300\",\n error: \"bg-red-50 border-red-200 text-red-700 dark:bg-red-950 dark:border-red-900 dark:text-red-300\",\n neutral: \"bg-gray-50 border-gray-200 text-gray-700 dark:bg-gray-900 dark:border-gray-700 dark:text-gray-300\",\n red: \"bg-red-50 border-red-200 text-red-700 dark:bg-red-950 dark:border-red-900 dark:text-red-300\",\n green: \"bg-green-50 border-green-200 text-green-700 dark:bg-green-950 dark:border-green-900 dark:text-green-300\",\n blue: \"bg-blue-50 border-blue-200 text-blue-700 dark:bg-blue-950 dark:border-blue-900 dark:text-blue-300\",\n teal: \"bg-teal-50 border-teal-200 text-teal-700 dark:bg-teal-950 dark:border-teal-900 dark:text-teal-300\",\n orange: \"bg-orange-50 border-orange-200 text-orange-700 dark:bg-orange-950 dark:border-orange-900 dark:text-orange-300\",\n peach: \"bg-peach-50 border-peach-200 text-peach-700 dark:bg-peach-950 dark:border-peach-900 dark:text-peach-300\",\n navy: \"bg-slate-50 border-slate-200 text-slate-700 dark:bg-slate-900 dark:border-slate-700 dark:text-slate-300\",\n gray: \"bg-gray-50 border-gray-200 text-gray-700 dark:bg-gray-900 dark:border-gray-700 dark:text-gray-300\",\n grey: \"bg-gray-50 border-gray-200 text-gray-700 dark:bg-gray-900 dark:border-gray-700 dark:text-gray-300\",\n yellow: \"bg-yellow-50 border-yellow-200 text-yellow-700 dark:bg-yellow-950 dark:border-yellow-900 dark:text-yellow-300\",\n purple: \"bg-purple-50 border-purple-200 text-purple-700 dark:bg-purple-950 dark:border-purple-900 dark:text-purple-300\",\n};\n\nconst HEX_COLOR_PATTERN = /^#[0-9a-fA-F]{6}$/;\nconst EXTERNAL_HREF_PATTERN = /^(?:[a-z][a-z\\d+\\-.]*:|\\/\\/)/i;\n\nconst getColorClasses = (color?: string, isHexColor?: boolean): string => {\n if (isHexColor) return \"\";\n if (!color) return TAG_COLOR_CLASSES.primary;\n return TAG_COLOR_CLASSES[color.toLowerCase() as TagColor] ?? TAG_COLOR_CLASSES.primary;\n};\n\n/**\n * Normalize a 6-digit hex color string to lowercase `#rrggbb`.\n * Returns `undefined` if the value isn't a valid 6-digit hex.\n */\nconst normalizeHex = (value: string): string | undefined => {\n const trimmed = value.trim().toLowerCase();\n return HEX_COLOR_PATTERN.test(trimmed) ? trimmed : undefined;\n};\n\nconst isExternalHref = (href: string): boolean => EXTERNAL_HREF_PATTERN.test(href);\n\n/**\n * Get size-based styling classes\n */\nconst getSizeClasses = (size: TagSize): string => {\n switch (size) {\n case \"xs\":\n return \"text-3xs leading-3 px-1 border-[0.5px] rounded\";\n case \"lg\":\n return \"text-sm leading-5 px-1.5 border rounded-md\";\n case \"sm\":\n return \"text-2xs leading-4 px-1 border-[0.5px] rounded\";\n default: // md\n return \"text-xs leading-4 px-1.5 border rounded-md\";\n }\n};\n\nexport const Tag = forwardRef<HTMLElement, TagProps>(\n (\n {\n label,\n href,\n color,\n size = 'md',\n className,\n onClick,\n onMouseDown,\n truncate,\n isHashColor = false,\n theme,\n icon,\n removable = false,\n onRemove,\n onUpload,\n acceptsUpload = false,\n tooltip = false,\n \"aria-label\": ariaLabel,\n role,\n },\n ref\n ) => {\n const normalizedHex =\n typeof color === \"string\" && (isHashColor || HEX_COLOR_PATTERN.test(color))\n ? normalizeHex(color)\n : undefined;\n const isHexColor = Boolean(normalizedHex);\n const tagStyle: CSSProperties = {\n maxWidth: \"100%\",\n ...(normalizedHex\n ? {\n backgroundColor: `${normalizedHex}26`,\n borderColor: `${normalizedHex}59`,\n color: normalizedHex,\n }\n : {}),\n };\n const isInteractive = Boolean(onClick || acceptsUpload || href);\n const shouldRenderAnchor = Boolean(href && isExternalHref(href));\n\n /**\n * Handle file upload\n */\n const handleFileUpload = (event: React.ChangeEvent<HTMLInputElement>) => {\n const file = event.target.files?.[0];\n if (file && onUpload) {\n onUpload(file);\n }\n // Reset input value to allow same file selection\n event.target.value = '';\n };\n\n const tagClassName = cn(\n \"inline-flex items-center font-medium\",\n getColorClasses(color, isHexColor),\n getSizeClasses(size),\n isInteractive && \"cursor-pointer hover:opacity-80\",\n className\n );\n\n const inner = (\n <div className=\"flex items-center gap-0.5 min-w-0 overflow-hidden\" style={{ maxWidth: \"100%\" }}>\n {icon}\n\n {truncate ? (\n <p\n title={label}\n className={cn(\n \"overflow-hidden whitespace-nowrap text-ellipsis\",\n isInteractive && \"cursor-pointer\"\n )}\n style={{ maxWidth: \"100%\" }}\n >\n {label.length > truncate ? `${label.slice(0, truncate)}...` : label}\n </p>\n ) : (\n <p className=\"overflow-hidden whitespace-nowrap text-ellipsis\" style={{ maxWidth: \"100%\" }}>\n {label}\n </p>\n )}\n\n {acceptsUpload && (\n <input\n type=\"file\"\n onChange={handleFileUpload}\n className=\"absolute inset-0 h-full w-full cursor-pointer opacity-0\"\n aria-label={`Upload file for ${label}`}\n />\n )}\n\n {removable && onRemove && (\n <button\n onClick={onRemove}\n className=\"ml-1 flex-shrink-0\"\n aria-label={`Remove ${label}`}\n type=\"button\"\n >\n <CloseIcon size={12} className=\"cursor-pointer\" />\n </button>\n )}\n </div>\n );\n\n const content = tooltip ? <Tooltip title={label} delayShow>{inner}</Tooltip> : inner;\n\n if (href) {\n if (shouldRenderAnchor) {\n return (\n <a\n ref={ref as Ref<HTMLAnchorElement>}\n href={href}\n className={tagClassName}\n style={tagStyle}\n onMouseDown={onMouseDown}\n onClick={onClick}\n aria-label={ariaLabel || `Tag: ${label}`}\n role={role}\n data-theme={theme}\n >\n {content}\n </a>\n );\n }\n\n return (\n <Link\n ref={ref as Ref<HTMLAnchorElement>}\n to={href}\n className={tagClassName}\n style={tagStyle}\n onMouseDown={onMouseDown}\n onClick={onClick}\n aria-label={ariaLabel || `Tag: ${label}`}\n role={role}\n data-theme={theme}\n >\n {content}\n </Link>\n );\n }\n\n return (\n <div\n ref={ref as Ref<HTMLDivElement>}\n className={tagClassName}\n style={tagStyle}\n onMouseDown={onMouseDown}\n onClick={onClick}\n onKeyDown={\n isInteractive\n ? (event) => {\n if (event.key === \"Enter\" || event.key === \" \") {\n event.preventDefault();\n event.currentTarget.click();\n }\n }\n : undefined\n }\n aria-label={ariaLabel || `Tag: ${label}`}\n role={role ?? (isInteractive ? \"button\" : undefined)}\n tabIndex={isInteractive ? 0 : undefined}\n data-theme={theme}\n >\n {content}\n </div>\n );\n }\n);\n\nTag.displayName = \"Tag\";\n"],"names":["TAG_COLOR_CLASSES","HEX_COLOR_PATTERN","EXTERNAL_HREF_PATTERN","getColorClasses","color","isHexColor","normalizeHex","value","trimmed","isExternalHref","href","getSizeClasses","size","Tag","forwardRef","label","className","onClick","onMouseDown","truncate","isHashColor","theme","icon","removable","onRemove","onUpload","acceptsUpload","tooltip","ariaLabel","role","ref","normalizedHex","tagStyle","isInteractive","shouldRenderAnchor","handleFileUpload","event","file","tagClassName","cn","inner","jsx","CloseIcon","content","Tooltip","Link"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"Tag.cjs.js","sources":["../../../../src/components/data-display/tag/Tag.tsx"],"sourcesContent":["import cn from \"classnames\";\nimport { forwardRef, type CSSProperties, type Ref } from \"react\";\nimport { Link } from \"react-router-dom\";\nimport { CloseIcon } from \"../../icons/CloseIcon\";\nimport Tooltip from \"../../tooltip/Tooltip\";\n\n/**\n * Available tag size options\n */\nexport type TagSize = \"xs\" | \"sm\" | \"md\" | \"lg\";\n\n/**\n * Available color names for tags\n */\nexport type TagColor =\n | \"primary\"\n | \"success\"\n | \"warning\"\n | \"error\"\n | \"neutral\"\n | \"red\"\n | \"green\"\n | \"blue\"\n | \"teal\"\n | \"yellow\"\n | \"orange\"\n | \"peach\"\n | \"purple\"\n | \"navy\"\n | \"gray\"\n | \"grey\";\n\nexport type ThemeMode = \"light\" | \"dark\";\n\n/**\n * Upload handler function type\n */\nexport type UploadHandler = (file: File) => void | Promise<void>;\n\n/**\n * Props for the Tag component\n */\nexport interface TagProps {\n /** The text content to display */\n label: string;\n /** Router path or external URL */\n href?: string;\n /** Color name or hex color value (example: #3B82F6 or red) */\n color?: string;\n /** Size variant */\n size?: TagSize;\n /** Additional CSS classes */\n className?: string;\n /** Click handler for the tag */\n onClick?: (e: React.MouseEvent<HTMLElement, MouseEvent>) => void;\n /** Mouse down handler */\n onMouseDown?: (e: React.MouseEvent<HTMLElement, MouseEvent>) => void;\n /** Maximum character length before truncation */\n truncate?: number;\n /** Treat `color` as a hex color string (e.g. `#3B82F6` or `3b82f6`). When true, the value is applied as a hex regardless of named-color matches. */\n isHashColor?: boolean;\n /** Theme mode */\n theme?: ThemeMode;\n /** Icon to display before the label */\n icon?: React.ReactNode;\n /** Whether the tag is removable (shows close button) */\n removable?: boolean;\n /** Handler for remove button click */\n onRemove?: (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;\n /** Upload handler function */\n onUpload?: UploadHandler;\n /** Whether the tag accepts file uploads */\n acceptsUpload?: boolean;\n /** Whether to show a tooltip with the label on hover */\n tooltip?: boolean;\n /** Custom aria-label for accessibility */\n \"aria-label\"?: string;\n /** ARIA role override */\n role?: React.AriaRole;\n}\n\n/**\n * Tag component displays labels with customizable colors and styling\n *\n * @example\n * ```tsx\n * <Tag label=\"React\" color=\"blue\" size=\"md\" />\n * <Tag label=\"TypeScript\" color=\"#3178c6\" isHashColor />\n * <Tag label=\"Removable\" removable onRemove={handleRemove} />\n * <Tag label=\"Upload\" acceptsUpload onUpload={handleUpload} />\n * ```\n */\nconst TAG_COLOR_CLASSES: Record<TagColor, string> = {\n primary: \"bg-primary-50 border-primary-100 text-primary-600 dark:bg-primary-900 dark:border-primary-800 dark:text-primary-400\",\n success: \"bg-green-50 border-green-200 text-green-700 dark:bg-green-950 dark:border-green-900 dark:text-green-300\",\n warning: \"bg-yellow-50 border-yellow-200 text-yellow-700 dark:bg-yellow-950 dark:border-yellow-900 dark:text-yellow-300\",\n error: \"bg-red-50 border-red-200 text-red-700 dark:bg-red-950 dark:border-red-900 dark:text-red-300\",\n neutral: \"bg-gray-50 border-gray-200 text-gray-700 dark:bg-gray-900 dark:border-gray-700 dark:text-gray-300\",\n red: \"bg-red-50 border-red-200 text-red-700 dark:bg-red-950 dark:border-red-900 dark:text-red-300\",\n green: \"bg-green-50 border-green-200 text-green-700 dark:bg-green-950 dark:border-green-900 dark:text-green-300\",\n blue: \"bg-blue-50 border-blue-200 text-blue-700 dark:bg-blue-950 dark:border-blue-900 dark:text-blue-300\",\n teal: \"bg-teal-50 border-teal-200 text-teal-700 dark:bg-teal-950 dark:border-teal-900 dark:text-teal-300\",\n orange: \"bg-orange-50 border-orange-200 text-orange-700 dark:bg-orange-950 dark:border-orange-900 dark:text-orange-300\",\n peach: \"bg-peach-50 border-peach-200 text-peach-700 dark:bg-peach-950 dark:border-peach-900 dark:text-peach-300\",\n navy: \"bg-slate-50 border-slate-200 text-slate-700 dark:bg-slate-900 dark:border-slate-700 dark:text-slate-300\",\n gray: \"bg-gray-50 border-gray-200 text-gray-700 dark:bg-gray-900 dark:border-gray-700 dark:text-gray-300\",\n grey: \"bg-gray-50 border-gray-200 text-gray-700 dark:bg-gray-900 dark:border-gray-700 dark:text-gray-300\",\n yellow: \"bg-yellow-50 border-yellow-200 text-yellow-700 dark:bg-yellow-950 dark:border-yellow-900 dark:text-yellow-300\",\n purple: \"bg-purple-50 border-purple-200 text-purple-700 dark:bg-purple-950 dark:border-purple-900 dark:text-purple-300\",\n};\n\nconst HEX_COLOR_PATTERN = /^#[0-9a-fA-F]{6}$/;\nconst EXTERNAL_HREF_PATTERN = /^(?:[a-z][a-z\\d+\\-.]*:|\\/\\/)/i;\n\nconst getColorClasses = (color?: string, isHexColor?: boolean): string => {\n if (isHexColor) return \"\";\n if (!color) return TAG_COLOR_CLASSES.primary;\n return TAG_COLOR_CLASSES[color.toLowerCase() as TagColor] ?? TAG_COLOR_CLASSES.primary;\n};\n\n/**\n * Normalize a 6-digit hex color string to lowercase `#rrggbb`.\n * Returns `undefined` if the value isn't a valid 6-digit hex.\n */\nconst normalizeHex = (value: string): string | undefined => {\n const trimmed = value.trim().toLowerCase();\n return HEX_COLOR_PATTERN.test(trimmed) ? trimmed : undefined;\n};\n\nconst isExternalHref = (href: string): boolean => EXTERNAL_HREF_PATTERN.test(href);\n\n/**\n * Get size-based styling classes\n */\nconst getSizeClasses = (size: TagSize): string => {\n switch (size) {\n case \"xs\":\n return \"text-3xs leading-3 px-1 border-[0.5px] rounded\";\n case \"lg\":\n return \"text-sm leading-5 px-1.5 border rounded-md\";\n case \"sm\":\n return \"text-2xs leading-4 px-1 border-[0.5px] rounded\";\n default: // md\n return \"text-xs leading-4 px-1.5 border rounded-md\";\n }\n};\n\nexport const Tag = forwardRef<HTMLElement, TagProps>(\n (\n {\n label,\n href,\n color,\n size = 'md',\n className,\n onClick,\n onMouseDown,\n truncate,\n isHashColor = false,\n theme,\n icon,\n removable = false,\n onRemove,\n onUpload,\n acceptsUpload = false,\n tooltip = false,\n \"aria-label\": ariaLabel,\n role,\n },\n ref\n ) => {\n const normalizedHex =\n typeof color === \"string\" && (isHashColor || HEX_COLOR_PATTERN.test(color))\n ? normalizeHex(color)\n : undefined;\n const isHexColor = Boolean(normalizedHex);\n const tagStyle: CSSProperties = {\n maxWidth: \"100%\",\n ...(normalizedHex\n ? {\n backgroundColor: `${normalizedHex}26`,\n borderColor: `${normalizedHex}59`,\n color: normalizedHex,\n }\n : {}),\n };\n const isInteractive = Boolean(onClick || acceptsUpload || href);\n const shouldRenderAnchor = Boolean(href && isExternalHref(href));\n\n /**\n * Handle file upload\n */\n const handleFileUpload = (event: React.ChangeEvent<HTMLInputElement>) => {\n const file = event.target.files?.[0];\n if (file && onUpload) {\n onUpload(file);\n }\n // Reset input value to allow same file selection\n event.target.value = '';\n };\n\n const tagClassName = cn(\n \"inline-flex items-center font-medium py-0.5\",\n getColorClasses(color, isHexColor),\n getSizeClasses(size),\n isInteractive && \"cursor-pointer hover:opacity-80\",\n className\n );\n\n const inner = (\n <div className=\"flex items-center gap-0.5 min-w-0 overflow-hidden\" style={{ maxWidth: \"100%\" }}>\n {icon}\n\n {truncate ? (\n <p\n title={label}\n className={cn(\n \"overflow-hidden whitespace-nowrap text-ellipsis\",\n isInteractive && \"cursor-pointer\"\n )}\n style={{ maxWidth: \"100%\" }}\n >\n {label.length > truncate ? `${label.slice(0, truncate)}...` : label}\n </p>\n ) : (\n <p className=\"overflow-hidden whitespace-nowrap text-ellipsis\" style={{ maxWidth: \"100%\" }}>\n {label}\n </p>\n )}\n\n {acceptsUpload && (\n <input\n type=\"file\"\n onChange={handleFileUpload}\n className=\"absolute inset-0 h-full w-full cursor-pointer opacity-0\"\n aria-label={`Upload file for ${label}`}\n />\n )}\n\n {removable && onRemove && (\n <button\n onClick={onRemove}\n className=\"ml-1 flex-shrink-0\"\n aria-label={`Remove ${label}`}\n type=\"button\"\n >\n <CloseIcon size={12} className=\"cursor-pointer\" />\n </button>\n )}\n </div>\n );\n\n const content = tooltip ? <Tooltip title={label} delayShow>{inner}</Tooltip> : inner;\n\n if (href) {\n if (shouldRenderAnchor) {\n return (\n <a\n ref={ref as Ref<HTMLAnchorElement>}\n href={href}\n className={tagClassName}\n style={tagStyle}\n onMouseDown={onMouseDown}\n onClick={onClick}\n aria-label={ariaLabel || `Tag: ${label}`}\n role={role}\n data-theme={theme}\n >\n {content}\n </a>\n );\n }\n\n return (\n <Link\n ref={ref as Ref<HTMLAnchorElement>}\n to={href}\n className={tagClassName}\n style={tagStyle}\n onMouseDown={onMouseDown}\n onClick={onClick}\n aria-label={ariaLabel || `Tag: ${label}`}\n role={role}\n data-theme={theme}\n >\n {content}\n </Link>\n );\n }\n\n return (\n <div\n ref={ref as Ref<HTMLDivElement>}\n className={tagClassName}\n style={tagStyle}\n onMouseDown={onMouseDown}\n onClick={onClick}\n onKeyDown={\n isInteractive\n ? (event) => {\n if (event.key === \"Enter\" || event.key === \" \") {\n event.preventDefault();\n event.currentTarget.click();\n }\n }\n : undefined\n }\n aria-label={ariaLabel || `Tag: ${label}`}\n role={role ?? (isInteractive ? \"button\" : undefined)}\n tabIndex={isInteractive ? 0 : undefined}\n data-theme={theme}\n >\n {content}\n </div>\n );\n }\n);\n\nTag.displayName = \"Tag\";\n"],"names":["TAG_COLOR_CLASSES","HEX_COLOR_PATTERN","EXTERNAL_HREF_PATTERN","getColorClasses","color","isHexColor","normalizeHex","value","trimmed","isExternalHref","href","getSizeClasses","size","Tag","forwardRef","label","className","onClick","onMouseDown","truncate","isHashColor","theme","icon","removable","onRemove","onUpload","acceptsUpload","tooltip","ariaLabel","role","ref","normalizedHex","tagStyle","isInteractive","shouldRenderAnchor","handleFileUpload","event","file","tagClassName","cn","inner","jsx","CloseIcon","content","Tooltip","Link"],"mappings":"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"}
|
|
@@ -56,7 +56,7 @@ const k = {
|
|
|
56
56
|
"aria-label": b,
|
|
57
57
|
role: p
|
|
58
58
|
}, x) => {
|
|
59
|
-
const d = typeof l == "string" && ($ || C.test(l)) ? P(l) : void 0, H = !!d,
|
|
59
|
+
const d = typeof l == "string" && ($ || C.test(l)) ? P(l) : void 0, H = !!d, y = {
|
|
60
60
|
maxWidth: "100%",
|
|
61
61
|
...d ? {
|
|
62
62
|
backgroundColor: `${d}26`,
|
|
@@ -66,8 +66,8 @@ const k = {
|
|
|
66
66
|
}, o = !!(n || h || e), S = !!(e && X(e)), _ = (a) => {
|
|
67
67
|
const N = a.target.files?.[0];
|
|
68
68
|
N && f && f(N), a.target.value = "";
|
|
69
|
-
},
|
|
70
|
-
"inline-flex items-center font-medium",
|
|
69
|
+
}, c = T(
|
|
70
|
+
"inline-flex items-center font-medium py-0.5",
|
|
71
71
|
j(l, H),
|
|
72
72
|
G(v),
|
|
73
73
|
o && "cursor-pointer hover:opacity-80",
|
|
@@ -111,8 +111,8 @@ const k = {
|
|
|
111
111
|
{
|
|
112
112
|
ref: x,
|
|
113
113
|
href: e,
|
|
114
|
-
className:
|
|
115
|
-
style:
|
|
114
|
+
className: c,
|
|
115
|
+
style: y,
|
|
116
116
|
onMouseDown: s,
|
|
117
117
|
onClick: n,
|
|
118
118
|
"aria-label": b || `Tag: ${r}`,
|
|
@@ -125,8 +125,8 @@ const k = {
|
|
|
125
125
|
{
|
|
126
126
|
ref: x,
|
|
127
127
|
to: e,
|
|
128
|
-
className:
|
|
129
|
-
style:
|
|
128
|
+
className: c,
|
|
129
|
+
style: y,
|
|
130
130
|
onMouseDown: s,
|
|
131
131
|
onClick: n,
|
|
132
132
|
"aria-label": b || `Tag: ${r}`,
|
|
@@ -138,8 +138,8 @@ const k = {
|
|
|
138
138
|
"div",
|
|
139
139
|
{
|
|
140
140
|
ref: x,
|
|
141
|
-
className:
|
|
142
|
-
style:
|
|
141
|
+
className: c,
|
|
142
|
+
style: y,
|
|
143
143
|
onMouseDown: s,
|
|
144
144
|
onClick: n,
|
|
145
145
|
onKeyDown: o ? (a) => {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Tag.es.js","sources":["../../../../src/components/data-display/tag/Tag.tsx"],"sourcesContent":["import cn from \"classnames\";\nimport { forwardRef, type CSSProperties, type Ref } from \"react\";\nimport { Link } from \"react-router-dom\";\nimport { CloseIcon } from \"../../icons/CloseIcon\";\nimport Tooltip from \"../../tooltip/Tooltip\";\n\n/**\n * Available tag size options\n */\nexport type TagSize = \"xs\" | \"sm\" | \"md\" | \"lg\";\n\n/**\n * Available color names for tags\n */\nexport type TagColor =\n | \"primary\"\n | \"success\"\n | \"warning\"\n | \"error\"\n | \"neutral\"\n | \"red\"\n | \"green\"\n | \"blue\"\n | \"teal\"\n | \"yellow\"\n | \"orange\"\n | \"peach\"\n | \"purple\"\n | \"navy\"\n | \"gray\"\n | \"grey\";\n\nexport type ThemeMode = \"light\" | \"dark\";\n\n/**\n * Upload handler function type\n */\nexport type UploadHandler = (file: File) => void | Promise<void>;\n\n/**\n * Props for the Tag component\n */\nexport interface TagProps {\n /** The text content to display */\n label: string;\n /** Router path or external URL */\n href?: string;\n /** Color name or hex color value (example: #3B82F6 or red) */\n color?: string;\n /** Size variant */\n size?: TagSize;\n /** Additional CSS classes */\n className?: string;\n /** Click handler for the tag */\n onClick?: (e: React.MouseEvent<HTMLElement, MouseEvent>) => void;\n /** Mouse down handler */\n onMouseDown?: (e: React.MouseEvent<HTMLElement, MouseEvent>) => void;\n /** Maximum character length before truncation */\n truncate?: number;\n /** Treat `color` as a hex color string (e.g. `#3B82F6` or `3b82f6`). When true, the value is applied as a hex regardless of named-color matches. */\n isHashColor?: boolean;\n /** Theme mode */\n theme?: ThemeMode;\n /** Icon to display before the label */\n icon?: React.ReactNode;\n /** Whether the tag is removable (shows close button) */\n removable?: boolean;\n /** Handler for remove button click */\n onRemove?: (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;\n /** Upload handler function */\n onUpload?: UploadHandler;\n /** Whether the tag accepts file uploads */\n acceptsUpload?: boolean;\n /** Whether to show a tooltip with the label on hover */\n tooltip?: boolean;\n /** Custom aria-label for accessibility */\n \"aria-label\"?: string;\n /** ARIA role override */\n role?: React.AriaRole;\n}\n\n/**\n * Tag component displays labels with customizable colors and styling\n *\n * @example\n * ```tsx\n * <Tag label=\"React\" color=\"blue\" size=\"md\" />\n * <Tag label=\"TypeScript\" color=\"#3178c6\" isHashColor />\n * <Tag label=\"Removable\" removable onRemove={handleRemove} />\n * <Tag label=\"Upload\" acceptsUpload onUpload={handleUpload} />\n * ```\n */\nconst TAG_COLOR_CLASSES: Record<TagColor, string> = {\n primary: \"bg-primary-50 border-primary-100 text-primary-600 dark:bg-primary-900 dark:border-primary-800 dark:text-primary-400\",\n success: \"bg-green-50 border-green-200 text-green-700 dark:bg-green-950 dark:border-green-900 dark:text-green-300\",\n warning: \"bg-yellow-50 border-yellow-200 text-yellow-700 dark:bg-yellow-950 dark:border-yellow-900 dark:text-yellow-300\",\n error: \"bg-red-50 border-red-200 text-red-700 dark:bg-red-950 dark:border-red-900 dark:text-red-300\",\n neutral: \"bg-gray-50 border-gray-200 text-gray-700 dark:bg-gray-900 dark:border-gray-700 dark:text-gray-300\",\n red: \"bg-red-50 border-red-200 text-red-700 dark:bg-red-950 dark:border-red-900 dark:text-red-300\",\n green: \"bg-green-50 border-green-200 text-green-700 dark:bg-green-950 dark:border-green-900 dark:text-green-300\",\n blue: \"bg-blue-50 border-blue-200 text-blue-700 dark:bg-blue-950 dark:border-blue-900 dark:text-blue-300\",\n teal: \"bg-teal-50 border-teal-200 text-teal-700 dark:bg-teal-950 dark:border-teal-900 dark:text-teal-300\",\n orange: \"bg-orange-50 border-orange-200 text-orange-700 dark:bg-orange-950 dark:border-orange-900 dark:text-orange-300\",\n peach: \"bg-peach-50 border-peach-200 text-peach-700 dark:bg-peach-950 dark:border-peach-900 dark:text-peach-300\",\n navy: \"bg-slate-50 border-slate-200 text-slate-700 dark:bg-slate-900 dark:border-slate-700 dark:text-slate-300\",\n gray: \"bg-gray-50 border-gray-200 text-gray-700 dark:bg-gray-900 dark:border-gray-700 dark:text-gray-300\",\n grey: \"bg-gray-50 border-gray-200 text-gray-700 dark:bg-gray-900 dark:border-gray-700 dark:text-gray-300\",\n yellow: \"bg-yellow-50 border-yellow-200 text-yellow-700 dark:bg-yellow-950 dark:border-yellow-900 dark:text-yellow-300\",\n purple: \"bg-purple-50 border-purple-200 text-purple-700 dark:bg-purple-950 dark:border-purple-900 dark:text-purple-300\",\n};\n\nconst HEX_COLOR_PATTERN = /^#[0-9a-fA-F]{6}$/;\nconst EXTERNAL_HREF_PATTERN = /^(?:[a-z][a-z\\d+\\-.]*:|\\/\\/)/i;\n\nconst getColorClasses = (color?: string, isHexColor?: boolean): string => {\n if (isHexColor) return \"\";\n if (!color) return TAG_COLOR_CLASSES.primary;\n return TAG_COLOR_CLASSES[color.toLowerCase() as TagColor] ?? TAG_COLOR_CLASSES.primary;\n};\n\n/**\n * Normalize a 6-digit hex color string to lowercase `#rrggbb`.\n * Returns `undefined` if the value isn't a valid 6-digit hex.\n */\nconst normalizeHex = (value: string): string | undefined => {\n const trimmed = value.trim().toLowerCase();\n return HEX_COLOR_PATTERN.test(trimmed) ? trimmed : undefined;\n};\n\nconst isExternalHref = (href: string): boolean => EXTERNAL_HREF_PATTERN.test(href);\n\n/**\n * Get size-based styling classes\n */\nconst getSizeClasses = (size: TagSize): string => {\n switch (size) {\n case \"xs\":\n return \"text-3xs leading-3 px-1 border-[0.5px] rounded\";\n case \"lg\":\n return \"text-sm leading-5 px-1.5 border rounded-md\";\n case \"sm\":\n return \"text-2xs leading-4 px-1 border-[0.5px] rounded\";\n default: // md\n return \"text-xs leading-4 px-1.5 border rounded-md\";\n }\n};\n\nexport const Tag = forwardRef<HTMLElement, TagProps>(\n (\n {\n label,\n href,\n color,\n size = 'md',\n className,\n onClick,\n onMouseDown,\n truncate,\n isHashColor = false,\n theme,\n icon,\n removable = false,\n onRemove,\n onUpload,\n acceptsUpload = false,\n tooltip = false,\n \"aria-label\": ariaLabel,\n role,\n },\n ref\n ) => {\n const normalizedHex =\n typeof color === \"string\" && (isHashColor || HEX_COLOR_PATTERN.test(color))\n ? normalizeHex(color)\n : undefined;\n const isHexColor = Boolean(normalizedHex);\n const tagStyle: CSSProperties = {\n maxWidth: \"100%\",\n ...(normalizedHex\n ? {\n backgroundColor: `${normalizedHex}26`,\n borderColor: `${normalizedHex}59`,\n color: normalizedHex,\n }\n : {}),\n };\n const isInteractive = Boolean(onClick || acceptsUpload || href);\n const shouldRenderAnchor = Boolean(href && isExternalHref(href));\n\n /**\n * Handle file upload\n */\n const handleFileUpload = (event: React.ChangeEvent<HTMLInputElement>) => {\n const file = event.target.files?.[0];\n if (file && onUpload) {\n onUpload(file);\n }\n // Reset input value to allow same file selection\n event.target.value = '';\n };\n\n const tagClassName = cn(\n \"inline-flex items-center font-medium\",\n getColorClasses(color, isHexColor),\n getSizeClasses(size),\n isInteractive && \"cursor-pointer hover:opacity-80\",\n className\n );\n\n const inner = (\n <div className=\"flex items-center gap-0.5 min-w-0 overflow-hidden\" style={{ maxWidth: \"100%\" }}>\n {icon}\n\n {truncate ? (\n <p\n title={label}\n className={cn(\n \"overflow-hidden whitespace-nowrap text-ellipsis\",\n isInteractive && \"cursor-pointer\"\n )}\n style={{ maxWidth: \"100%\" }}\n >\n {label.length > truncate ? `${label.slice(0, truncate)}...` : label}\n </p>\n ) : (\n <p className=\"overflow-hidden whitespace-nowrap text-ellipsis\" style={{ maxWidth: \"100%\" }}>\n {label}\n </p>\n )}\n\n {acceptsUpload && (\n <input\n type=\"file\"\n onChange={handleFileUpload}\n className=\"absolute inset-0 h-full w-full cursor-pointer opacity-0\"\n aria-label={`Upload file for ${label}`}\n />\n )}\n\n {removable && onRemove && (\n <button\n onClick={onRemove}\n className=\"ml-1 flex-shrink-0\"\n aria-label={`Remove ${label}`}\n type=\"button\"\n >\n <CloseIcon size={12} className=\"cursor-pointer\" />\n </button>\n )}\n </div>\n );\n\n const content = tooltip ? <Tooltip title={label} delayShow>{inner}</Tooltip> : inner;\n\n if (href) {\n if (shouldRenderAnchor) {\n return (\n <a\n ref={ref as Ref<HTMLAnchorElement>}\n href={href}\n className={tagClassName}\n style={tagStyle}\n onMouseDown={onMouseDown}\n onClick={onClick}\n aria-label={ariaLabel || `Tag: ${label}`}\n role={role}\n data-theme={theme}\n >\n {content}\n </a>\n );\n }\n\n return (\n <Link\n ref={ref as Ref<HTMLAnchorElement>}\n to={href}\n className={tagClassName}\n style={tagStyle}\n onMouseDown={onMouseDown}\n onClick={onClick}\n aria-label={ariaLabel || `Tag: ${label}`}\n role={role}\n data-theme={theme}\n >\n {content}\n </Link>\n );\n }\n\n return (\n <div\n ref={ref as Ref<HTMLDivElement>}\n className={tagClassName}\n style={tagStyle}\n onMouseDown={onMouseDown}\n onClick={onClick}\n onKeyDown={\n isInteractive\n ? (event) => {\n if (event.key === \"Enter\" || event.key === \" \") {\n event.preventDefault();\n event.currentTarget.click();\n }\n }\n : undefined\n }\n aria-label={ariaLabel || `Tag: ${label}`}\n role={role ?? (isInteractive ? \"button\" : undefined)}\n tabIndex={isInteractive ? 0 : undefined}\n data-theme={theme}\n >\n {content}\n </div>\n );\n }\n);\n\nTag.displayName = \"Tag\";\n"],"names":["TAG_COLOR_CLASSES","HEX_COLOR_PATTERN","EXTERNAL_HREF_PATTERN","getColorClasses","color","isHexColor","normalizeHex","value","trimmed","isExternalHref","href","getSizeClasses","size","Tag","forwardRef","label","className","onClick","onMouseDown","truncate","isHashColor","theme","icon","removable","onRemove","onUpload","acceptsUpload","tooltip","ariaLabel","role","ref","normalizedHex","tagStyle","isInteractive","shouldRenderAnchor","handleFileUpload","event","file","tagClassName","cn","inner","jsx","CloseIcon","content","Tooltip","Link"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"Tag.es.js","sources":["../../../../src/components/data-display/tag/Tag.tsx"],"sourcesContent":["import cn from \"classnames\";\nimport { forwardRef, type CSSProperties, type Ref } from \"react\";\nimport { Link } from \"react-router-dom\";\nimport { CloseIcon } from \"../../icons/CloseIcon\";\nimport Tooltip from \"../../tooltip/Tooltip\";\n\n/**\n * Available tag size options\n */\nexport type TagSize = \"xs\" | \"sm\" | \"md\" | \"lg\";\n\n/**\n * Available color names for tags\n */\nexport type TagColor =\n | \"primary\"\n | \"success\"\n | \"warning\"\n | \"error\"\n | \"neutral\"\n | \"red\"\n | \"green\"\n | \"blue\"\n | \"teal\"\n | \"yellow\"\n | \"orange\"\n | \"peach\"\n | \"purple\"\n | \"navy\"\n | \"gray\"\n | \"grey\";\n\nexport type ThemeMode = \"light\" | \"dark\";\n\n/**\n * Upload handler function type\n */\nexport type UploadHandler = (file: File) => void | Promise<void>;\n\n/**\n * Props for the Tag component\n */\nexport interface TagProps {\n /** The text content to display */\n label: string;\n /** Router path or external URL */\n href?: string;\n /** Color name or hex color value (example: #3B82F6 or red) */\n color?: string;\n /** Size variant */\n size?: TagSize;\n /** Additional CSS classes */\n className?: string;\n /** Click handler for the tag */\n onClick?: (e: React.MouseEvent<HTMLElement, MouseEvent>) => void;\n /** Mouse down handler */\n onMouseDown?: (e: React.MouseEvent<HTMLElement, MouseEvent>) => void;\n /** Maximum character length before truncation */\n truncate?: number;\n /** Treat `color` as a hex color string (e.g. `#3B82F6` or `3b82f6`). When true, the value is applied as a hex regardless of named-color matches. */\n isHashColor?: boolean;\n /** Theme mode */\n theme?: ThemeMode;\n /** Icon to display before the label */\n icon?: React.ReactNode;\n /** Whether the tag is removable (shows close button) */\n removable?: boolean;\n /** Handler for remove button click */\n onRemove?: (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;\n /** Upload handler function */\n onUpload?: UploadHandler;\n /** Whether the tag accepts file uploads */\n acceptsUpload?: boolean;\n /** Whether to show a tooltip with the label on hover */\n tooltip?: boolean;\n /** Custom aria-label for accessibility */\n \"aria-label\"?: string;\n /** ARIA role override */\n role?: React.AriaRole;\n}\n\n/**\n * Tag component displays labels with customizable colors and styling\n *\n * @example\n * ```tsx\n * <Tag label=\"React\" color=\"blue\" size=\"md\" />\n * <Tag label=\"TypeScript\" color=\"#3178c6\" isHashColor />\n * <Tag label=\"Removable\" removable onRemove={handleRemove} />\n * <Tag label=\"Upload\" acceptsUpload onUpload={handleUpload} />\n * ```\n */\nconst TAG_COLOR_CLASSES: Record<TagColor, string> = {\n primary: \"bg-primary-50 border-primary-100 text-primary-600 dark:bg-primary-900 dark:border-primary-800 dark:text-primary-400\",\n success: \"bg-green-50 border-green-200 text-green-700 dark:bg-green-950 dark:border-green-900 dark:text-green-300\",\n warning: \"bg-yellow-50 border-yellow-200 text-yellow-700 dark:bg-yellow-950 dark:border-yellow-900 dark:text-yellow-300\",\n error: \"bg-red-50 border-red-200 text-red-700 dark:bg-red-950 dark:border-red-900 dark:text-red-300\",\n neutral: \"bg-gray-50 border-gray-200 text-gray-700 dark:bg-gray-900 dark:border-gray-700 dark:text-gray-300\",\n red: \"bg-red-50 border-red-200 text-red-700 dark:bg-red-950 dark:border-red-900 dark:text-red-300\",\n green: \"bg-green-50 border-green-200 text-green-700 dark:bg-green-950 dark:border-green-900 dark:text-green-300\",\n blue: \"bg-blue-50 border-blue-200 text-blue-700 dark:bg-blue-950 dark:border-blue-900 dark:text-blue-300\",\n teal: \"bg-teal-50 border-teal-200 text-teal-700 dark:bg-teal-950 dark:border-teal-900 dark:text-teal-300\",\n orange: \"bg-orange-50 border-orange-200 text-orange-700 dark:bg-orange-950 dark:border-orange-900 dark:text-orange-300\",\n peach: \"bg-peach-50 border-peach-200 text-peach-700 dark:bg-peach-950 dark:border-peach-900 dark:text-peach-300\",\n navy: \"bg-slate-50 border-slate-200 text-slate-700 dark:bg-slate-900 dark:border-slate-700 dark:text-slate-300\",\n gray: \"bg-gray-50 border-gray-200 text-gray-700 dark:bg-gray-900 dark:border-gray-700 dark:text-gray-300\",\n grey: \"bg-gray-50 border-gray-200 text-gray-700 dark:bg-gray-900 dark:border-gray-700 dark:text-gray-300\",\n yellow: \"bg-yellow-50 border-yellow-200 text-yellow-700 dark:bg-yellow-950 dark:border-yellow-900 dark:text-yellow-300\",\n purple: \"bg-purple-50 border-purple-200 text-purple-700 dark:bg-purple-950 dark:border-purple-900 dark:text-purple-300\",\n};\n\nconst HEX_COLOR_PATTERN = /^#[0-9a-fA-F]{6}$/;\nconst EXTERNAL_HREF_PATTERN = /^(?:[a-z][a-z\\d+\\-.]*:|\\/\\/)/i;\n\nconst getColorClasses = (color?: string, isHexColor?: boolean): string => {\n if (isHexColor) return \"\";\n if (!color) return TAG_COLOR_CLASSES.primary;\n return TAG_COLOR_CLASSES[color.toLowerCase() as TagColor] ?? TAG_COLOR_CLASSES.primary;\n};\n\n/**\n * Normalize a 6-digit hex color string to lowercase `#rrggbb`.\n * Returns `undefined` if the value isn't a valid 6-digit hex.\n */\nconst normalizeHex = (value: string): string | undefined => {\n const trimmed = value.trim().toLowerCase();\n return HEX_COLOR_PATTERN.test(trimmed) ? trimmed : undefined;\n};\n\nconst isExternalHref = (href: string): boolean => EXTERNAL_HREF_PATTERN.test(href);\n\n/**\n * Get size-based styling classes\n */\nconst getSizeClasses = (size: TagSize): string => {\n switch (size) {\n case \"xs\":\n return \"text-3xs leading-3 px-1 border-[0.5px] rounded\";\n case \"lg\":\n return \"text-sm leading-5 px-1.5 border rounded-md\";\n case \"sm\":\n return \"text-2xs leading-4 px-1 border-[0.5px] rounded\";\n default: // md\n return \"text-xs leading-4 px-1.5 border rounded-md\";\n }\n};\n\nexport const Tag = forwardRef<HTMLElement, TagProps>(\n (\n {\n label,\n href,\n color,\n size = 'md',\n className,\n onClick,\n onMouseDown,\n truncate,\n isHashColor = false,\n theme,\n icon,\n removable = false,\n onRemove,\n onUpload,\n acceptsUpload = false,\n tooltip = false,\n \"aria-label\": ariaLabel,\n role,\n },\n ref\n ) => {\n const normalizedHex =\n typeof color === \"string\" && (isHashColor || HEX_COLOR_PATTERN.test(color))\n ? normalizeHex(color)\n : undefined;\n const isHexColor = Boolean(normalizedHex);\n const tagStyle: CSSProperties = {\n maxWidth: \"100%\",\n ...(normalizedHex\n ? {\n backgroundColor: `${normalizedHex}26`,\n borderColor: `${normalizedHex}59`,\n color: normalizedHex,\n }\n : {}),\n };\n const isInteractive = Boolean(onClick || acceptsUpload || href);\n const shouldRenderAnchor = Boolean(href && isExternalHref(href));\n\n /**\n * Handle file upload\n */\n const handleFileUpload = (event: React.ChangeEvent<HTMLInputElement>) => {\n const file = event.target.files?.[0];\n if (file && onUpload) {\n onUpload(file);\n }\n // Reset input value to allow same file selection\n event.target.value = '';\n };\n\n const tagClassName = cn(\n \"inline-flex items-center font-medium py-0.5\",\n getColorClasses(color, isHexColor),\n getSizeClasses(size),\n isInteractive && \"cursor-pointer hover:opacity-80\",\n className\n );\n\n const inner = (\n <div className=\"flex items-center gap-0.5 min-w-0 overflow-hidden\" style={{ maxWidth: \"100%\" }}>\n {icon}\n\n {truncate ? (\n <p\n title={label}\n className={cn(\n \"overflow-hidden whitespace-nowrap text-ellipsis\",\n isInteractive && \"cursor-pointer\"\n )}\n style={{ maxWidth: \"100%\" }}\n >\n {label.length > truncate ? `${label.slice(0, truncate)}...` : label}\n </p>\n ) : (\n <p className=\"overflow-hidden whitespace-nowrap text-ellipsis\" style={{ maxWidth: \"100%\" }}>\n {label}\n </p>\n )}\n\n {acceptsUpload && (\n <input\n type=\"file\"\n onChange={handleFileUpload}\n className=\"absolute inset-0 h-full w-full cursor-pointer opacity-0\"\n aria-label={`Upload file for ${label}`}\n />\n )}\n\n {removable && onRemove && (\n <button\n onClick={onRemove}\n className=\"ml-1 flex-shrink-0\"\n aria-label={`Remove ${label}`}\n type=\"button\"\n >\n <CloseIcon size={12} className=\"cursor-pointer\" />\n </button>\n )}\n </div>\n );\n\n const content = tooltip ? <Tooltip title={label} delayShow>{inner}</Tooltip> : inner;\n\n if (href) {\n if (shouldRenderAnchor) {\n return (\n <a\n ref={ref as Ref<HTMLAnchorElement>}\n href={href}\n className={tagClassName}\n style={tagStyle}\n onMouseDown={onMouseDown}\n onClick={onClick}\n aria-label={ariaLabel || `Tag: ${label}`}\n role={role}\n data-theme={theme}\n >\n {content}\n </a>\n );\n }\n\n return (\n <Link\n ref={ref as Ref<HTMLAnchorElement>}\n to={href}\n className={tagClassName}\n style={tagStyle}\n onMouseDown={onMouseDown}\n onClick={onClick}\n aria-label={ariaLabel || `Tag: ${label}`}\n role={role}\n data-theme={theme}\n >\n {content}\n </Link>\n );\n }\n\n return (\n <div\n ref={ref as Ref<HTMLDivElement>}\n className={tagClassName}\n style={tagStyle}\n onMouseDown={onMouseDown}\n onClick={onClick}\n onKeyDown={\n isInteractive\n ? (event) => {\n if (event.key === \"Enter\" || event.key === \" \") {\n event.preventDefault();\n event.currentTarget.click();\n }\n }\n : undefined\n }\n aria-label={ariaLabel || `Tag: ${label}`}\n role={role ?? (isInteractive ? \"button\" : undefined)}\n tabIndex={isInteractive ? 0 : undefined}\n data-theme={theme}\n >\n {content}\n </div>\n );\n }\n);\n\nTag.displayName = \"Tag\";\n"],"names":["TAG_COLOR_CLASSES","HEX_COLOR_PATTERN","EXTERNAL_HREF_PATTERN","getColorClasses","color","isHexColor","normalizeHex","value","trimmed","isExternalHref","href","getSizeClasses","size","Tag","forwardRef","label","className","onClick","onMouseDown","truncate","isHashColor","theme","icon","removable","onRemove","onUpload","acceptsUpload","tooltip","ariaLabel","role","ref","normalizedHex","tagStyle","isInteractive","shouldRenderAnchor","handleFileUpload","event","file","tagClassName","cn","inner","jsx","CloseIcon","content","Tooltip","Link"],"mappings":"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"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const a=require("react/jsx-runtime"),C=require("antd"),i=require("../../_virtual/index.cjs.js"),g=require("framer-motion"),c=require("react"),T=require("react-i18next"),n=require("../data-display/typography/Typography.cjs.js"),B=require("../buttons/option-button/OptionButton.cjs.js"),L=require("../button/IconButton.cjs.js"),w=require("../tooltip/Tooltip.cjs.js"),q=require("../icon/icons.generated.cjs.js"),R=({size:r=24,fill:o="currentColor",className:p})=>a.jsx("svg",{className:p,width:r,height:r,viewBox:"0 0 20 20",fill:o,xmlns:"http://www.w3.org/2000/svg",children:a.jsx("path",{d:"M10.0002 11.1666L5.91683 15.2499C5.76405 15.4027 5.56961 15.4791 5.3335 15.4791C5.09739 15.4791 4.90294 15.4027 4.75016 15.2499C4.59738 15.0971 4.521 14.9027 4.521 14.6666C4.521 14.4305 4.59738 14.236 4.75016 14.0833L8.8335 9.99992L4.75016 5.91659C4.59738 5.76381 4.521 5.56936 4.521 5.33325C4.521 5.09714 4.59738 4.9027 4.75016 4.74992C4.90294 4.59714 5.09739 4.52075 5.3335 4.52075C5.56961 4.52075 5.76405 4.59714 5.91683 4.74992L10.0002 8.83325L14.0835 4.74992C14.2363 4.59714 14.4307 4.52075 14.6668 4.52075C14.9029 4.52075 15.0974 4.59714 15.2502 4.74992C15.4029 4.9027 15.4793 5.09714 15.4793 5.33325C15.4793 5.56936 15.4029 5.76381 15.2502 5.91659L11.1668 9.99992L15.2502 14.0833C15.4029 14.236 15.4793 14.4305 15.4793 14.6666C15.4793 14.9027 15.4029 15.0971 15.2502 15.2499C15.0974 15.4027 14.9029 15.4791 14.6668 15.4791C14.4307 15.4791 14.2363 15.4027 14.0835 15.2499L10.0002 11.1666Z"})}),F=({fill:r="#cccccc",className:o})=>a.jsx("svg",{height:"20",width:"20",viewBox:"0 0 20 20",focusable:"false",className:o,children:a.jsx("path",{fill:r,d:"M4.516 7.548c0.436-0.446 1.043-0.481 1.576 0l3.908 3.747 3.908-3.747c0.533-0.481 1.141-0.446 1.574 0 0.436 0.445 0.408 1.197 0 1.615-0.406 0.418-4.695 4.502-4.695 4.502-0.217 0.223-0.502 0.335-0.787 0.335s-0.57-0.112-0.789-0.335c0 0-4.287-4.084-4.695-4.502s-0.436-1.17 0-1.615z"})}),j=r=>{const{show:o,isFlowDashboard:p,onClose:k,actionItems:m,selectedItemsCount:N,deleteConfig:d,showActionBg:D}=r,{t:h}=T.useTranslation(),[y,u]=c.useState(!1),[I,b]=c.useState(!0),t=c.useRef(null),f=c.useRef(null);c.useEffect(()=>{const e=new ResizeObserver(()=>{if(t.current&&f.current){const s=t.current.scrollWidth-100;m.length*180+100>s?b(!1):b(!0)}});return t.current&&e.observe(t.current),()=>{t.current&&e.unobserve(t.current)}});const l={label:h("Delete"),icon:a.jsx(q.DeleteIcon,{size:16,className:"text-error-500"}),onClick:d?.onClick,...d},x=m.filter(e=>e.visible!==!1).map((e,s)=>({key:s,label:a.jsx(B.OptionButton,{icon:e.dropdownIcon,text:e?.label||"",onClick:e.onClick,className:"font-inter text-base font-medium text-black-900 dark:text-black-200 gap-1.5"}),children:e.dropdownItems,disabled:!1}));return o?a.jsx(g.motion.div,{initial:{y:20,opacity:0},animate:{y:0,opacity:1},exit:{y:20,opacity:0},transition:{duration:.2,ease:[.4,0,.2,1],opacity:{duration:.15}},ref:t,className:i("h-[40px]",p?"ml-60 w-1/2":"w-full"),children:a.jsxs("div",{className:i("h-[40px] border py-1.5 px-2 text-white bg-primary-800 dark:bg-black-700 flex justify-between items-center"),children:[a.jsxs("div",{className:"flex items-center",children:[a.jsx(L,{tooltip:"Close",variant:"ghost",onClick:k,className:"!p-0 text-white hover:opacity-80 hover:rotate-90 transition-all duration-200",children:a.jsx(R,{size:20})}),a.jsxs("div",{className:"flex items-center gap-1.5 ml-2",children:[a.jsx("span",{className:"text-primary-600 dark:text-black-100 bg-primary-50 dark:bg-black-800 border-primary-200 dark:border-black-800 text-xs leading-4 font-normal border rounded-full pr-2 pl-2",children:N||0}),a.jsx(n.Typography,{size:"extra-small",appearance:"custom",className:"text-white",children:h("Selected")})]})]}),a.jsx("div",{ref:f,className:i("h-[36px] flex items-center rounded-full font-inter",D?"bg-primary-900 dark:bg-black-800 px-[10px] rounded-[43px]":""),children:I?a.jsxs(g.motion.div,{initial:{opacity:0},animate:{opacity:1},transition:{duration:.2},className:"flex bg-primary-800 dark:bg-black-800 px-4 rounded-full",children:[m.map((e,s)=>e.visible!==!1&&a.jsx("div",{children:e.type==="dropdown"?a.jsx(C.Dropdown,{menu:{items:e.dropdownItems},trigger:[e.dropdownTrigger||"click"],overlayClassName:"!min-w-[148px]",placement:"bottomRight",getPopupContainer:v=>v.parentElement,open:y,onOpenChange:u,children:a.jsx("button",{id:`btn-floating-bar-${e.label}`,onClick:e.onClick,disabled:e.disabled,className:i(e?.label?"flex items-center mx-1 gap-1.5 py-1 pr-3 pl-2 rounded-md text-white hover:text-primary-50 hover:scale-105 transition-all duration-200 bg-transparent":"bg-transparent p-1.5 rounded-xl transition-all duration-200 hover:scale-105 hover:opacity-80",e?.hideLabel&&"!p-1.5",(e.label==="Delete"||e.label==="Remove"||e.label==="Delete user"||e.label==="Delete Permanently")&&"!text-error-500",e.disabled&&"opacity-70"),children:a.jsxs(w,{hideTooltip:!e.tooltip,title:e.tooltip,className:"flex items-center",children:[e.icon,!e?.hideLabel&&e.label&&a.jsx(n.Typography,{size:"small",variant:"medium",className:"text-inherit ml-1.5",appearance:"custom",children:e.label})]})},s)}):a.jsx("button",{id:`btn-floating-bar-${e.label}`,onClick:e.onClick,disabled:e.disabled,className:i(e?.label?"flex items-center mx-1 gap-1.5 py-1 pr-3 pl-2 rounded-md text-white hover:text-primary-50 hover:scale-105 transition-all duration-200 bg-transparent":"bg-transparent p-1.5 rounded-xl transition-all duration-200 hover:scale-105 hover:opacity-80",e?.hideLabel&&"!p-1.5",(e.label==="Delete"||e.label==="Remove"||e.label==="Delete Permanently")&&"!text-error-500",e.disabled&&"opacity-70"),children:a.jsxs(w,{hideTooltip:!e.tooltip,title:e.tooltip,className:"flex items-center",children:[e.icon,!e?.hideLabel&&e.label&&a.jsx(n.Typography,{size:"small",variant:"medium",className:"text-inherit ml-1.5",appearance:"custom",children:e.label})]})})},s)),d?a.jsxs("button",{id:`btn-floating-bar-${l.label}`,onClick:l.onClick,disabled:l.disabled,className:i("flex items-center gap-1.5 py-1 pr-3 pl-2 rounded-md hover:scale-105 hover:opacity-80 transition-all duration-200",l.disabled&&"opacity-70"),children:[l.icon,a.jsx(n.Typography,{size:"small",variant:"medium",className:"text-error-500",appearance:"custom",children:l.label})]}):null]}):a.jsxs(g.motion.div,{initial:{opacity:0},animate:{opacity:1},transition:{duration:.2},className:"minw-[150px] p-1.5 flex items-center",children:[a.jsx(C.Dropdown,{menu:{items:x},trigger:["click"],overlayClassName:"!min-w-[148px]",placement:"bottomRight",getPopupContainer:e=>e.parentElement,open:y,onOpenChange:u,children:a.jsxs("button",{id:"btn-floating-bar-actions",disabled:x.length===0,className:i("flex items-center gap-1.5 px-2 py-1 w-22 h-7 rounded-full bg-primary-700 hover:scale-105 hover:opacity-80 transition-all duration-200",x.length===0&&"opacity-60 hover:scale-100 hover:opacity-60"),type:"button",children:[a.jsx(n.Typography,{size:"small",variant:"medium",className:"text-white",children:h("Actions")}),a.jsx(F,{fill:"#FFFFFF",className:"w-[16px] h-[16px]"})]})}),d?a.jsxs("button",{id:`btn-floating-bar-${l.label}`,onClick:l.onClick,disabled:l.disabled,className:i("flex items-center gap-1.5 py-1 pr-3 pl-2 rounded-md hover:scale-105 hover:opacity-80 transition-all duration-200",l.disabled&&"opacity-70"),type:"button",children:[l.icon,a.jsx(n.Typography,{size:"small",variant:"medium",className:"text-error-500",appearance:"custom",children:l.label})]}):null]})})]})}):null};j.displayName="FloatingBar";exports.FloatingBar=j;
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const a=require("react/jsx-runtime"),C=require("antd"),i=require("../../_virtual/index.cjs.js"),g=require("framer-motion"),c=require("react"),T=require("react-i18next"),n=require("../data-display/typography/Typography.cjs.js"),B=require("../buttons/option-button/OptionButton.cjs.js"),L=require("../button/IconButton.cjs.js"),w=require("../tooltip/Tooltip.cjs.js"),q=require("../icon/icons.generated.cjs.js"),R=({size:r=24,fill:o="currentColor",className:p})=>a.jsx("svg",{className:p,width:r,height:r,viewBox:"0 0 20 20",fill:o,xmlns:"http://www.w3.org/2000/svg",children:a.jsx("path",{d:"M10.0002 11.1666L5.91683 15.2499C5.76405 15.4027 5.56961 15.4791 5.3335 15.4791C5.09739 15.4791 4.90294 15.4027 4.75016 15.2499C4.59738 15.0971 4.521 14.9027 4.521 14.6666C4.521 14.4305 4.59738 14.236 4.75016 14.0833L8.8335 9.99992L4.75016 5.91659C4.59738 5.76381 4.521 5.56936 4.521 5.33325C4.521 5.09714 4.59738 4.9027 4.75016 4.74992C4.90294 4.59714 5.09739 4.52075 5.3335 4.52075C5.56961 4.52075 5.76405 4.59714 5.91683 4.74992L10.0002 8.83325L14.0835 4.74992C14.2363 4.59714 14.4307 4.52075 14.6668 4.52075C14.9029 4.52075 15.0974 4.59714 15.2502 4.74992C15.4029 4.9027 15.4793 5.09714 15.4793 5.33325C15.4793 5.56936 15.4029 5.76381 15.2502 5.91659L11.1668 9.99992L15.2502 14.0833C15.4029 14.236 15.4793 14.4305 15.4793 14.6666C15.4793 14.9027 15.4029 15.0971 15.2502 15.2499C15.0974 15.4027 14.9029 15.4791 14.6668 15.4791C14.4307 15.4791 14.2363 15.4027 14.0835 15.2499L10.0002 11.1666Z"})}),F=({fill:r="#cccccc",className:o})=>a.jsx("svg",{height:"20",width:"20",viewBox:"0 0 20 20",focusable:"false",className:o,children:a.jsx("path",{fill:r,d:"M4.516 7.548c0.436-0.446 1.043-0.481 1.576 0l3.908 3.747 3.908-3.747c0.533-0.481 1.141-0.446 1.574 0 0.436 0.445 0.408 1.197 0 1.615-0.406 0.418-4.695 4.502-4.695 4.502-0.217 0.223-0.502 0.335-0.787 0.335s-0.57-0.112-0.789-0.335c0 0-4.287-4.084-4.695-4.502s-0.436-1.17 0-1.615z"})}),j=r=>{const{show:o,isFlowDashboard:p,onClose:k,actionItems:m,selectedItemsCount:N,deleteConfig:d,showActionBg:D}=r,{t:h}=T.useTranslation(),[y,u]=c.useState(!1),[I,b]=c.useState(!0),t=c.useRef(null),f=c.useRef(null);c.useEffect(()=>{const e=new ResizeObserver(()=>{if(t.current&&f.current){const s=t.current.scrollWidth-100;m.length*180+100>s?b(!1):b(!0)}});return t.current&&e.observe(t.current),()=>{t.current&&e.unobserve(t.current)}});const l={label:h("Delete"),icon:a.jsx(q.DeleteIcon,{size:16,className:"text-error-500"}),onClick:d?.onClick,...d},x=m.filter(e=>e.visible!==!1).map((e,s)=>({key:s,label:a.jsx(B.OptionButton,{icon:e.dropdownIcon,text:e?.label||"",onClick:e.onClick,className:"font-inter text-base font-medium text-black-900 dark:text-black-200 gap-1.5"}),children:e.dropdownItems,disabled:!1}));return o?a.jsx(g.motion.div,{initial:{y:20,opacity:0},animate:{y:0,opacity:1},exit:{y:20,opacity:0},transition:{duration:.2,ease:[.4,0,.2,1],opacity:{duration:.15}},ref:t,className:i("h-[40px]",p?"ml-60 w-1/2":"w-full"),children:a.jsxs("div",{className:i("h-[40px] border py-1.5 px-2 text-white bg-primary-800 dark:bg-black-700 flex justify-between items-center"),children:[a.jsxs("div",{className:"flex items-center",children:[a.jsx(L,{tooltip:"Close",variant:"ghost",onClick:k,className:"!p-0 text-white hover:opacity-80 hover:rotate-90 transition-all duration-200",children:a.jsx(R,{size:20})}),a.jsxs("div",{className:"flex items-center gap-1.5 ml-2",children:[a.jsx("span",{className:"text-primary-600 dark:text-black-100 bg-primary-50 dark:bg-black-800 border-primary-200 dark:border-black-800 text-xs leading-4 font-normal border rounded-full pr-2 pl-2",children:N||0}),a.jsx(n.Typography,{size:"extra-small",appearance:"custom",className:"text-white",children:h("Selected")})]})]}),a.jsx("div",{ref:f,className:i("h-[36px] flex items-center rounded-full font-inter",D?"bg-primary-900 dark:bg-black-800 px-[10px] rounded-[43px]":""),children:I?a.jsxs(g.motion.div,{initial:{opacity:0},animate:{opacity:1},transition:{duration:.2},className:"flex bg-primary-800 dark:bg-black-800 px-4 rounded-full",children:[m.map((e,s)=>e.visible!==!1&&a.jsx("div",{children:e.type==="dropdown"?a.jsx(C.Dropdown,{menu:{items:e.dropdownItems},trigger:[e.dropdownTrigger||"click"],overlayClassName:"!min-w-[148px]",placement:"bottomRight",getPopupContainer:v=>v.parentElement,open:y,onOpenChange:u,children:a.jsx("button",{id:`btn-floating-bar-${e.label}`,onClick:e.onClick,disabled:e.disabled,className:i(e?.label?"flex items-center mx-1 gap-1.5 py-1 pr-3 pl-2 rounded-md text-white hover:text-primary-50 hover:scale-105 transition-all duration-200 bg-transparent":"bg-transparent p-1.5 rounded-xl transition-all duration-200 hover:scale-105 hover:opacity-80",e?.hideLabel&&"!p-1.5",(e.label==="Delete"||e.label==="Remove"||e.label==="Delete user"||e.label==="Move to trash"||e.label==="Delete Permanently")&&"!text-error-500",e.disabled&&"opacity-70"),children:a.jsxs(w,{hideTooltip:!e.tooltip,title:e.tooltip,className:"flex items-center",children:[e.icon,!e?.hideLabel&&e.label&&a.jsx(n.Typography,{size:"small",variant:"medium",className:"text-inherit ml-1.5",appearance:"custom",children:e.label})]})},s)}):a.jsx("button",{id:`btn-floating-bar-${e.label}`,onClick:e.onClick,disabled:e.disabled,className:i(e?.label?"flex items-center mx-1 gap-1.5 py-1 pr-3 pl-2 rounded-md text-white hover:text-primary-50 hover:scale-105 transition-all duration-200 bg-transparent":"bg-transparent p-1.5 rounded-xl transition-all duration-200 hover:scale-105 hover:opacity-80",e?.hideLabel&&"!p-1.5",(e.label==="Delete"||e.label==="Remove"||e.label==="Delete Permanently")&&"!text-error-500",e.disabled&&"opacity-70"),children:a.jsxs(w,{hideTooltip:!e.tooltip,title:e.tooltip,className:"flex items-center",children:[e.icon,!e?.hideLabel&&e.label&&a.jsx(n.Typography,{size:"small",variant:"medium",className:"text-inherit ml-1.5",appearance:"custom",children:e.label})]})})},s)),d?a.jsxs("button",{id:`btn-floating-bar-${l.label}`,onClick:l.onClick,disabled:l.disabled,className:i("flex items-center gap-1.5 py-1 pr-3 pl-2 rounded-md hover:scale-105 hover:opacity-80 transition-all duration-200",l.disabled&&"opacity-70"),children:[l.icon,a.jsx(n.Typography,{size:"small",variant:"medium",className:"text-error-500",appearance:"custom",children:l.label})]}):null]}):a.jsxs(g.motion.div,{initial:{opacity:0},animate:{opacity:1},transition:{duration:.2},className:"minw-[150px] p-1.5 flex items-center",children:[a.jsx(C.Dropdown,{menu:{items:x},trigger:["click"],overlayClassName:"!min-w-[148px]",placement:"bottomRight",getPopupContainer:e=>e.parentElement,open:y,onOpenChange:u,children:a.jsxs("button",{id:"btn-floating-bar-actions",disabled:x.length===0,className:i("flex items-center gap-1.5 px-2 py-1 w-22 h-7 rounded-full bg-primary-700 hover:scale-105 hover:opacity-80 transition-all duration-200",x.length===0&&"opacity-60 hover:scale-100 hover:opacity-60"),type:"button",children:[a.jsx(n.Typography,{size:"small",variant:"medium",className:"text-white",children:h("Actions")}),a.jsx(F,{fill:"#FFFFFF",className:"w-[16px] h-[16px]"})]})}),d?a.jsxs("button",{id:`btn-floating-bar-${l.label}`,onClick:l.onClick,disabled:l.disabled,className:i("flex items-center gap-1.5 py-1 pr-3 pl-2 rounded-md hover:scale-105 hover:opacity-80 transition-all duration-200",l.disabled&&"opacity-70"),type:"button",children:[l.icon,a.jsx(n.Typography,{size:"small",variant:"medium",className:"text-error-500",appearance:"custom",children:l.label})]}):null]})})]})}):null};j.displayName="FloatingBar";exports.FloatingBar=j;
|
|
2
2
|
//# sourceMappingURL=FloatingBar.cjs.js.map
|