npm - @intlayer/design-system - Versions diffs - 7.5.6 → 7.5.7 - Mend

@intlayer/design-system 7.5.6 → 7.5.7

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.

Files changed (192) hide show

package/dist/esm/components/DictionaryFieldEditor/ContentEditorView/TextEditor.mjs CHANGED Viewed

@@ -2,8 +2,8 @@
 import { Container } from "../../Container/index.mjs";
 import { Button, ButtonColor, ButtonSize, ButtonTextAlign, ButtonVariant } from "../../Button/Button.mjs";
-import { useAuditContentDeclarationField } from "../../../hooks/reactQuery.mjs";
 import { InputVariant } from "../../Input/Input.mjs";
+import { useAuditContentDeclarationField } from "../../../hooks/reactQuery.mjs";
 import { Label } from "../../Label/index.mjs";
 import { SwitchSelector, SwitchSelectorColor, SwitchSelectorSize } from "../../SwitchSelector/index.mjs";
 import { useLocaleSwitcherContent } from "../../LocaleSwitcherContentDropDown/LocaleSwitcherContentContext.mjs";
@@ -145,41 +145,50 @@ const EnumerationTextEditor = ({ section, keyPath, dictionary, renderSection })
 					return /* @__PURE__ */ jsxs(Fragment, { children: [
 						/* @__PURE__ */ jsx("tr", {
 							className: "mt-2 w-full",
-							children: /* @__PURE__ */ jsx("div", {
-								className: "flex flex-1",
-								children: /* @__PURE__ */ jsx(Button, {
-									label: removeEnumeration.label.value,
-									variant: ButtonVariant.HOVERABLE,
-									color: ButtonColor.TEXT,
-									Icon: Trash,
-									className: "ml-auto",
-									onClick: () => addEditedContent(dictionary.localId, void 0, childrenKeyPath),
-									children: removeEnumeration.text
+							children: /* @__PURE__ */ jsx("td", {
+								className: "w-full",
+								children: /* @__PURE__ */ jsx("div", {
+									className: "flex flex-1",
+									children: /* @__PURE__ */ jsx(Button, {
+										label: removeEnumeration.label.value,
+										variant: ButtonVariant.HOVERABLE,
+										color: ButtonColor.TEXT,
+										Icon: Trash,
+										className: "ml-auto",
+										onClick: () => addEditedContent(dictionary.localId, void 0, childrenKeyPath),
+										children: removeEnumeration.text
+									})
 								})
 							})
 						}),
 						/* @__PURE__ */ jsx("tr", {
 							className: "w-full p-2",
-							children: /* @__PURE__ */ jsx(EnumKeyInput, {
-								value: enumKey,
-								onChange: (value) => {
-									const preValueContent = section[NodeType.Enumeration];
-									const newValueContent = renameKey(preValueContent, enumKey, value);
-									const newValue = {
-										...section,
-										[NodeType.Enumeration]: newValueContent
-									};
-									addEditedContent(dictionary.localId, newValue, keyPath);
-								}
+							children: /* @__PURE__ */ jsx("td", {
+								className: "w-full",
+								children: /* @__PURE__ */ jsx(EnumKeyInput, {
+									value: enumKey,
+									onChange: (value) => {
+										const preValueContent = section[NodeType.Enumeration];
+										const newValueContent = renameKey(preValueContent, enumKey, value);
+										const newValue = {
+											...section,
+											[NodeType.Enumeration]: newValueContent
+										};
+										addEditedContent(dictionary.localId, newValue, keyPath);
+									}
+								})
 							})
 						}),
 						/* @__PURE__ */ jsx("tr", {
 							className: "block w-full",
-							children: /* @__PURE__ */ jsx(TextEditor, {
-								section: content[enumKey] ?? getEmptyNode(content[firstKey]),
-								keyPath: childrenKeyPath,
-								dictionary,
-								renderSection
+							children: /* @__PURE__ */ jsx("td", {
+								className: "w-full",
+								children: /* @__PURE__ */ jsx(TextEditor, {
+									section: content[enumKey] ?? getEmptyNode(content[firstKey]),
+									keyPath: childrenKeyPath,
+									dictionary,
+									renderSection
+								})
 							})
 						})
 					] }, enumKey);
@@ -219,14 +228,17 @@ const ConditionTextEditor = ({ section, keyPath, dictionary, renderSection }) =>
 				})
 			}, condKey), /* @__PURE__ */ jsx("tr", {
 				className: "block w-full",
-				children: /* @__PURE__ */ jsx(TextEditorContainer, {
-					section: content[condKey] ?? getEmptyNode(content.true),
-					keyPath: [...keyPath, {
-						type: NodeType.Condition,
-						key: condKey
-					}],
-					dictionary,
-					renderSection
+				children: /* @__PURE__ */ jsx("td", {
+					className: "w-full",
+					children: /* @__PURE__ */ jsx(TextEditorContainer, {
+						section: content[condKey] ?? getEmptyNode(content.true),
+						keyPath: [...keyPath, {
+							type: NodeType.Condition,
+							key: condKey
+						}],
+						dictionary,
+						renderSection
+					})
 				})
 			}, condKey)] }, condKey))
 		})
@@ -250,14 +262,17 @@ const GenderTextEditor = ({ section, keyPath, dictionary, renderSection }) => {
 				})
 			}, condKey), /* @__PURE__ */ jsx("tr", {
 				className: "block w-full",
-				children: /* @__PURE__ */ jsx(TextEditorContainer, {
-					section: content[condKey] ?? getEmptyNode(content.male),
-					keyPath: [...keyPath, {
-						type: NodeType.Gender,
-						key: condKey
-					}],
-					dictionary,
-					renderSection
+				children: /* @__PURE__ */ jsx("td", {
+					className: "w-full",
+					children: /* @__PURE__ */ jsx(TextEditorContainer, {
+						section: content[condKey] ?? getEmptyNode(content.male),
+						keyPath: [...keyPath, {
+							type: NodeType.Gender,
+							key: condKey
+						}],
+						dictionary,
+						renderSection
+					})
 				})
 			}, condKey)] }, condKey))
 		})
@@ -272,37 +287,46 @@ const ArrayTextEditor = ({ section, keyPath, dictionary, renderSection }) => {
 			className: "w-full",
 			children: /* @__PURE__ */ jsx("tbody", {
 				className: "flex w-full flex-col gap-2",
-				children: section.map((subSection, index) => /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsxs("tr", {
-					className: "mt-2 flex w-full items-center justify-between gap-2 p-2",
-					children: [/* @__PURE__ */ jsx("span", {
-						className: "text-xs",
-						children: String(index)
-					}), /* @__PURE__ */ jsx(Button, {
-						label: removeElement.label.value,
-						variant: ButtonVariant.HOVERABLE,
-						color: ButtonColor.NEUTRAL,
-						className: "ml-auto",
-						textAlign: ButtonTextAlign.LEFT,
-						onClick: () => {
-							const newKeyPath = [...keyPath, {
-								type: NodeType.Array,
-								key: section.length
-							}];
-							addEditedContent(dictionary.localId, void 0, newKeyPath);
-						},
-						Icon: Trash,
-						children: removeElement.text
-					})]
+				children: section.map((subSection, index) => /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("tr", {
+					className: "mt-2 w-full p-2",
+					children: /* @__PURE__ */ jsx("td", {
+						className: "w-full",
+						children: /* @__PURE__ */ jsxs("div", {
+							className: "flex w-full items-center justify-between gap-2",
+							children: [/* @__PURE__ */ jsx("span", {
+								className: "text-xs",
+								children: String(index)
+							}), /* @__PURE__ */ jsx(Button, {
+								label: removeElement.label.value,
+								variant: ButtonVariant.HOVERABLE,
+								color: ButtonColor.NEUTRAL,
+								className: "ml-auto",
+								textAlign: ButtonTextAlign.LEFT,
+								onClick: () => {
+									const newKeyPath = [...keyPath, {
+										type: NodeType.Array,
+										key: section.length
+									}];
+									addEditedContent(dictionary.localId, void 0, newKeyPath);
+								},
+								Icon: Trash,
+								children: removeElement.text
+							})]
+						})
+					})
 				}), /* @__PURE__ */ jsx("tr", {
 					className: "block w-full",
-					children: /* @__PURE__ */ jsx(TextEditorContainer, {
-						section: subSection ?? getEmptyNode(section[0]),
-						keyPath: [...keyPath, {
-							type: NodeType.Array,
-							key: index
-						}],
-						dictionary,
-						renderSection
+					children: /* @__PURE__ */ jsx("td", {
+						className: "w-full",
+						children: /* @__PURE__ */ jsx(TextEditorContainer, {
+							section: subSection ?? getEmptyNode(section[0]),
+							keyPath: [...keyPath, {
+								type: NodeType.Array,
+								key: index
+							}],
+							dictionary,
+							renderSection
+						})
 					})
 				})] }, JSON.stringify(subSection)))
 			})
@@ -344,11 +368,14 @@ const ObjectTextEditor = ({ section, keyPath, dictionary, renderSection }) => /*
 				})
 			}, JSON.stringify(subSection)), /* @__PURE__ */ jsx("tr", {
 				className: "block w-full",
-				children: /* @__PURE__ */ jsx(TextEditor, {
-					section: subSection,
-					keyPath: childKeyPath,
-					dictionary,
-					renderSection
+				children: /* @__PURE__ */ jsx("td", {
+					className: "w-full",
+					children: /* @__PURE__ */ jsx(TextEditor, {
+						section: subSection,
+						keyPath: childKeyPath,
+						dictionary,
+						renderSection
+					})
 				})
 			}, JSON.stringify(subSection))] }, key);
 		})
@@ -459,10 +486,13 @@ const NestedTextEditor = ({ keyPath, dictionary, renderSection, section, ...prop
 const TextEditor = ({ section, keyPath, dictionary, renderSection, isDarkMode }) => {
 	const { tsxNotEditable } = useIntlayer("navigation-view");
 	const nodeType = getNodeType(section);
-	if (nodeType === NodeType.ReactNode) return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("span", { children: "[React Node]" }), /* @__PURE__ */ jsx("span", {
-		className: "text-neutral text-xs",
-		children: tsxNotEditable
-	})] });
+	if (nodeType === NodeType.ReactNode) return /* @__PURE__ */ jsxs("div", {
+		className: "flex w-full flex-col gap-2",
+		children: [/* @__PURE__ */ jsx("span", { children: "(React Node)" }), /* @__PURE__ */ jsx("span", {
+			className: "flex text-neutral text-xs",
+			children: tsxNotEditable
+		})]
+	});
 	if (nodeType === NodeType.Nested) return /* @__PURE__ */ jsx(NestedTextEditor, {
 		dictionary,
 		renderSection,

package/dist/esm/components/DictionaryFieldEditor/ContentEditorView/TextEditor.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"TextEditor.mjs","names":["traceKeys: string[]","ContentEditorTextArea: FC<ContentEditorTextAreaProps>","ContentEditorTextAreaBase","editedContent","ContentEditorInput: FC<ContentEditorInputProps>","ContentEditorInputBase","ContentEditorToggle: FC<ContentEditorToggleProps>","TranslationTextEditor: FC<TextEditorProps>","content: any","EnumerationTextEditor: FC<TextEditorProps>","ConditionTextEditor: FC<TextEditorProps>","GenderTextEditor: FC<TextEditorProps>","ArrayTextEditor: FC<TextEditorProps>","newKeyPath: KeyPath[]","ObjectTextEditor: FC<TextEditorProps>","childKeyPath: KeyPath[]","MarkdownTextEditor: FC<TextEditorProps>","toggleContent","content","InsertionTextEditor: FC<TextEditorProps>","FileTextEditor: FC<TextEditorProps>","NestedTextEditor: FC<TextEditorProps>","TextEditor: FC<TextEditorProps>","TextEditorContainer: FC<TextEditorProps>"],"sources":["../../../../../src/components/DictionaryFieldEditor/ContentEditorView/TextEditor.tsx"],"sourcesContent":["'use client';\n\nimport {\n type ConditionContent,\n type EnumerationContent,\n type FileContent,\n type GenderContent,\n getEmptyNode,\n getLocaleName,\n getNodeType,\n type InsertionContent,\n type MarkdownContent,\n type TranslationContent,\n} from '@intlayer/core';\nimport { useConfiguration, useEditedContent } from '@intlayer/editor-react';\nimport {\n type ContentNode,\n type Dictionary,\n type KeyPath,\n type Locale,\n type LocalesValues,\n NodeType,\n} from '@intlayer/types';\nimport { Plus, Trash, WandSparkles } from 'lucide-react';\nimport { type FC, Fragment, type ReactNode, useState } from 'react';\nimport { useIntlayer, useLocale } from 'react-intlayer';\nimport { useAuditContentDeclarationField } from '../../../hooks';\nimport { renameKey } from '../../../utils/object';\nimport {\n Button,\n ButtonColor,\n ButtonSize,\n ButtonTextAlign,\n ButtonVariant,\n} from '../../Button';\nimport { Container } from '../../Container';\nimport {\n ContentEditorInput as ContentEditorInputBase,\n type ContentEditorInputProps as ContentEditorInputPropsBase,\n} from '../../ContentEditor/ContentEditorInput';\nimport {\n ContentEditorTextArea as ContentEditorTextAreaBase,\n type ContentEditorTextAreaProps as ContentEditorTextAreaPropsBase,\n} from '../../ContentEditor/ContentEditorTextArea';\nimport { InputVariant } from '../../Input';\nimport { Label } from '../../Label';\nimport { useLocaleSwitcherContent } from '../../LocaleSwitcherContentDropDown';\nimport { MarkdownRenderer } from '../../MarkDownRender';\nimport {\n SwitchSelector,\n type SwitchSelectorChoices,\n SwitchSelectorColor,\n type SwitchSelectorProps,\n SwitchSelectorSize,\n} from '../../SwitchSelector';\nimport { EnumKeyInput } from '../EnumKeyInput';\n\nexport const traceKeys: string[] = ['filePath', 'id', 'nodeType'];\n\ntype ContentEditorTextAreaProps = Omit<\n ContentEditorTextAreaPropsBase,\n 'onContentChange'\n> & {\n keyPath: KeyPath[];\n dictionary: Dictionary;\n};\n\nconst ContentEditorTextArea: FC<ContentEditorTextAreaProps> = ({\n keyPath,\n dictionary,\n ...props\n}) => {\n const { editedContent, addEditedContent } = useEditedContent();\n const configuration = useConfiguration();\n const { mutate: auditContentDeclarationField, isPending: isAuditing } =\n useAuditContentDeclarationField();\n\n return (\n <ContentEditorTextAreaBase\n variant={InputVariant.DEFAULT}\n onContentChange={(newValue) =>\n addEditedContent(dictionary.localId!, newValue, keyPath)\n }\n additionalButtons={\n <Button\n Icon={WandSparkles}\n label=\"Audit\"\n variant={ButtonVariant.HOVERABLE}\n size={ButtonSize.ICON_SM}\n color={ButtonColor.TEXT}\n className=\"cursor-pointer hover:scale-110\"\n isLoading={isAuditing}\n onClick={() => {\n auditContentDeclarationField(\n {\n fileContent: JSON.stringify({\n ...dictionary,\n ...(editedContent?.[dictionary.localId!] ?? {}),\n }),\n keyPath,\n locales: configuration.internationalization.locales ?? [],\n aiOptions: {\n apiKey: configuration.ai?.apiKey,\n model: configuration.ai?.model,\n temperature: configuration.ai?.temperature,\n },\n },\n {\n onSuccess: (response) => {\n if (!response?.data) return;\n\n try {\n const editedContent = response.data.fileContent as string;\n\n addEditedContent(\n dictionary.localId!,\n editedContent,\n keyPath\n );\n } catch (error) {\n console.error(error);\n }\n },\n }\n );\n }}\n />\n }\n {...props}\n />\n );\n};\n\ntype ContentEditorInputProps = Omit<\n ContentEditorInputPropsBase,\n 'onContentChange'\n> & {\n keyPath: KeyPath[];\n dictionary: Dictionary;\n};\n\nconst ContentEditorInput: FC<ContentEditorInputProps> = ({\n keyPath,\n dictionary,\n ...props\n}) => {\n const { addEditedContent } = useEditedContent();\n\n return (\n <ContentEditorInputBase\n variant={InputVariant.DEFAULT}\n onContentChange={(newValue) =>\n addEditedContent(dictionary.localId!, newValue, keyPath)\n }\n {...props}\n />\n );\n};\n\nconst toggleContent = [\n {\n content: 'False',\n value: false,\n },\n {\n content: 'True',\n value: true,\n },\n] as SwitchSelectorChoices<boolean>;\n\ntype ContentEditorToggleProps = SwitchSelectorProps & {\n dictionary: Dictionary;\n keyPath: KeyPath[];\n};\n\nconst ContentEditorToggle: FC<ContentEditorToggleProps> = ({\n dictionary,\n keyPath,\n ...props\n}) => {\n const { addEditedContent } = useEditedContent();\n\n return (\n <SwitchSelector\n choices={toggleContent}\n value={true}\n onChange={(value) =>\n addEditedContent(dictionary.localId!, value, keyPath)\n }\n color={SwitchSelectorColor.TEXT}\n size={SwitchSelectorSize.SM}\n {...props}\n />\n );\n};\n\nexport type TextEditorProps = {\n dictionary: Dictionary;\n keyPath: KeyPath[];\n section: ContentNode;\n isDarkMode?: boolean;\n renderSection?: (content: string) => ReactNode;\n onContentChange?: (newValue: string) => void;\n};\n\nconst TranslationTextEditor: FC<TextEditorProps> = ({\n section,\n keyPath,\n dictionary,\n renderSection,\n}: TextEditorProps) => {\n const { locale, defaultLocale } = useLocale();\n const { selectedLocales, availableLocales } = useLocaleSwitcherContent();\n\n const sectionContent = (section as TranslationContent<string>)[\n NodeType.Translation\n ] as Record<Locale, string>;\n\n const sectionContentKeys = Object.keys(sectionContent) as LocalesValues[];\n\n const isFiltered = availableLocales.length > selectedLocales.length;\n\n const localesList = isFiltered\n ? selectedLocales\n : // If the translation include content in other locales, we display all of them\n [...new Set([...availableLocales, ...sectionContentKeys])];\n\n const content: any = (section as TranslationContent<string>)[\n NodeType.Translation\n ];\n\n return (\n <table className=\"w-full\">\n <tbody className=\"flex w-full flex-col gap-2\">\n {localesList.map((translationKey) => (\n <Fragment key={translationKey}>\n <tr className=\"mt-2 w-full p-2 text-xs\">\n <td className=\"w-full\">\n {getLocaleName(translationKey, locale)}\n </td>\n </tr>\n <tr className=\"flex\">\n <td className=\"w-full\">\n <TextEditorContainer\n section={\n content[translationKey] ??\n getEmptyNode(content[defaultLocale])\n }\n keyPath={[\n ...keyPath,\n { type: NodeType.Translation, key: translationKey },\n ]}\n dictionary={dictionary}\n renderSection={renderSection}\n />\n </td>\n </tr>\n </Fragment>\n ))}\n </tbody>\n </table>\n );\n};\n\nconst EnumerationTextEditor: FC<TextEditorProps> = ({\n section,\n keyPath,\n dictionary,\n renderSection,\n}) => {\n const { addEditedContent } = useEditedContent();\n const { addNewEnumeration, removeEnumeration } =\n useIntlayer('navigation-view');\n\n const content = (section as EnumerationContent<string>)[NodeType.Enumeration];\n const firstKey = Object.keys(content)[0] as keyof typeof content;\n\n return (\n <div className=\"flex flex-col gap-2\">\n <table className=\"w-full\">\n <tbody className=\"flex w-full flex-col gap-2\">\n {Object.keys(\n (section as EnumerationContent<ContentNode>)[NodeType.Enumeration]\n ).map((enumKey) => {\n const childrenKeyPath = [\n ...keyPath,\n { type: NodeType.Enumeration },\n ] as KeyPath[];\n return (\n <Fragment key={enumKey}>\n <tr className=\"mt-2 w-full\">\n <div className=\"flex flex-1\">\n <Button\n label={removeEnumeration.label.value}\n variant={ButtonVariant.HOVERABLE}\n color={ButtonColor.TEXT}\n Icon={Trash}\n className=\"ml-auto\"\n onClick={() =>\n addEditedContent(\n dictionary.localId!,\n undefined,\n childrenKeyPath\n )\n }\n >\n {removeEnumeration.text}\n </Button>\n </div>\n </tr>\n <tr className=\"w-full p-2\">\n <EnumKeyInput\n value={enumKey}\n onChange={(value) => {\n const preValueContent = (\n section as EnumerationContent<string>\n )[NodeType.Enumeration];\n const newValueContent = renameKey(\n preValueContent,\n enumKey as keyof typeof preValueContent,\n value\n );\n const newValue = {\n ...(section as EnumerationContent<string>),\n [NodeType.Enumeration]: newValueContent,\n };\n\n addEditedContent(dictionary.localId!, newValue, keyPath);\n }}\n />\n </tr>\n <tr className=\"block w-full\">\n <TextEditor\n section={\n content[enumKey as keyof typeof content] ??\n getEmptyNode(content[firstKey])\n }\n keyPath={childrenKeyPath}\n dictionary={dictionary}\n renderSection={renderSection}\n />\n </tr>\n </Fragment>\n );\n })}\n </tbody>\n </table>\n\n <Button\n label={addNewEnumeration.label.value}\n variant={ButtonVariant.HOVERABLE}\n color={ButtonColor.NEUTRAL}\n textAlign={ButtonTextAlign.LEFT}\n isFullWidth\n onClick={() =>\n addEditedContent(\n dictionary.localId!,\n getEmptyNode(content[firstKey]) ?? '',\n [...keyPath, { type: NodeType.Enumeration, key: 'unknown' }]\n )\n }\n Icon={Plus}\n className=\"m-2\"\n >\n {addNewEnumeration.text}\n </Button>\n </div>\n );\n};\n\nconst ConditionTextEditor: FC<TextEditorProps> = ({\n section,\n keyPath,\n dictionary,\n renderSection,\n}) => {\n const content = (section as ConditionContent<string>)[NodeType.Condition];\n\n return (\n <table className=\"w-full\">\n <tbody className=\"flex w-full flex-col gap-2\">\n {['true', 'false', 'fallback'].map((condKey) => (\n <Fragment key={condKey}>\n <tr key={condKey} className=\"mt-2 block w-full p-2 text-xs\">\n <td className=\"w-full\">{String(condKey)}</td>\n </tr>\n <tr key={condKey} className=\"block w-full\">\n <TextEditorContainer\n section={\n content[condKey as keyof typeof content] ??\n getEmptyNode(content.true)\n }\n keyPath={[\n ...keyPath,\n {\n type: NodeType.Condition,\n key: condKey,\n } as KeyPath,\n ]}\n dictionary={dictionary}\n renderSection={renderSection}\n />\n </tr>\n </Fragment>\n ))}\n </tbody>\n </table>\n );\n};\n\nconst GenderTextEditor: FC<TextEditorProps> = ({\n section,\n keyPath,\n dictionary,\n renderSection,\n}) => {\n const content = (section as GenderContent<string>)[NodeType.Gender];\n\n return (\n <table className=\"w-full\">\n <tbody className=\"flex w-full flex-col gap-2\">\n {['male', 'female', 'fallback'].map((condKey) => (\n <Fragment key={condKey}>\n <tr key={condKey} className=\"mt-2 block w-full p-2 text-xs\">\n <td className=\"w-full\">{String(condKey)}</td>\n </tr>\n <tr key={condKey} className=\"block w-full\">\n <TextEditorContainer\n section={\n content[condKey as keyof typeof content] ??\n getEmptyNode(content.male)\n }\n keyPath={[\n ...keyPath,\n {\n type: NodeType.Gender,\n key: condKey,\n } as KeyPath,\n ]}\n dictionary={dictionary}\n renderSection={renderSection}\n />\n </tr>\n </Fragment>\n ))}\n </tbody>\n </table>\n );\n};\n\nconst ArrayTextEditor: FC<TextEditorProps> = ({\n section,\n keyPath,\n dictionary,\n renderSection,\n}) => {\n const { addEditedContent } = useEditedContent();\n const { addNewElement, removeElement } = useIntlayer('navigation-view');\n\n return (\n <div className=\"flex flex-col gap-2\">\n <table className=\"w-full\">\n <tbody className=\"flex w-full flex-col gap-2\">\n {(section as unknown as ContentNode[]).map((subSection, index) => (\n <Fragment key={JSON.stringify(subSection)}>\n <tr className=\"mt-2 flex w-full items-center justify-between gap-2 p-2\">\n <span className=\"text-xs\">{String(index)}</span>\n <Button\n label={removeElement.label.value}\n variant={ButtonVariant.HOVERABLE}\n color={ButtonColor.NEUTRAL}\n className=\"ml-auto\"\n textAlign={ButtonTextAlign.LEFT}\n onClick={() => {\n const newKeyPath: KeyPath[] = [\n ...keyPath,\n {\n type: NodeType.Array,\n key: (section as unknown as ContentNode[]).length,\n },\n ];\n addEditedContent(\n dictionary.localId!,\n undefined,\n newKeyPath\n );\n }}\n Icon={Trash}\n >\n {removeElement.text}\n </Button>\n </tr>\n\n <tr className=\"block w-full\">\n <TextEditorContainer\n section={\n subSection ??\n getEmptyNode((section as unknown as ContentNode[])[0])\n }\n keyPath={[\n ...keyPath,\n {\n type: NodeType.Array,\n key: index,\n },\n ]}\n dictionary={dictionary}\n renderSection={renderSection}\n />\n </tr>\n </Fragment>\n ))}\n </tbody>\n </table>\n <Button\n label={addNewElement.label.value}\n variant={ButtonVariant.HOVERABLE}\n color={ButtonColor.NEUTRAL}\n textAlign={ButtonTextAlign.LEFT}\n isFullWidth\n onClick={() => {\n const newKeyPath: KeyPath[] = [\n ...keyPath,\n {\n type: NodeType.Array,\n key: (section as unknown as ContentNode[]).length,\n },\n ];\n addEditedContent(\n dictionary.localId!,\n getEmptyNode((section as unknown as ContentNode[])[0]) ?? '',\n newKeyPath,\n false\n );\n }}\n Icon={Plus}\n >\n {addNewElement.text}\n </Button>\n </div>\n );\n};\n\nconst ObjectTextEditor: FC<TextEditorProps> = ({\n section,\n keyPath,\n dictionary,\n renderSection,\n}) => (\n <>\n <table className=\"w-full\">\n <tbody className=\"flex flex-col gap-2\">\n {Object.keys(section as unknown as Record<string, ContentNode>).map(\n (key) => {\n const childKeyPath: KeyPath[] = [\n ...keyPath,\n { type: NodeType.Object, key },\n ];\n const typedSection = section as unknown as Record<\n string,\n ContentNode\n >;\n const firstKey = Object.keys(\n typedSection\n )[0] as keyof typeof section;\n const subSection =\n typedSection[key as keyof typeof section] ??\n getEmptyNode(typedSection[firstKey]);\n\n return (\n <Fragment key={key}>\n <tr\n key={JSON.stringify(subSection)}\n className=\"mt-2 p-2 text-xs\"\n >\n <td className=\"w-full\">{String(key)}</td>\n </tr>\n <tr key={JSON.stringify(subSection)} className=\"block w-full\">\n <TextEditor\n section={subSection}\n keyPath={childKeyPath}\n dictionary={dictionary}\n renderSection={renderSection}\n />\n </tr>\n </Fragment>\n );\n }\n )}\n </tbody>\n </table>\n </>\n);\n\nenum MarkdownViewMode {\n Edit,\n Preview,\n}\n\nconst MarkdownTextEditor: FC<TextEditorProps> = ({\n section,\n keyPath,\n dictionary,\n isDarkMode,\n}) => {\n const [mode, setMode] = useState(MarkdownViewMode.Edit);\n const toggleContent = [\n {\n content: 'Edit',\n value: MarkdownViewMode.Edit,\n },\n {\n content: 'Preview',\n value: MarkdownViewMode.Preview,\n },\n ] as SwitchSelectorChoices<MarkdownViewMode>;\n const childKeyPath: KeyPath[] = [...keyPath, { type: NodeType.Markdown }];\n\n const content = (section as MarkdownContent<ContentNode>)[\n NodeType.Markdown\n ] as ContentNode;\n\n return (\n <div className=\"flex w-full flex-col justify-center gap-6 p-2\">\n <SwitchSelector\n choices={toggleContent}\n value={mode}\n onChange={setMode}\n color={SwitchSelectorColor.TEXT}\n size={SwitchSelectorSize.SM}\n className=\"ml-auto\"\n />\n\n <TextEditorContainer\n section={content}\n keyPath={childKeyPath}\n dictionary={dictionary}\n renderSection={\n mode === MarkdownViewMode.Preview\n ? (content) => (\n <MarkdownRenderer isDarkMode={isDarkMode}>\n {content}\n </MarkdownRenderer>\n )\n : undefined\n }\n />\n </div>\n );\n};\n\nconst InsertionTextEditor: FC<TextEditorProps> = ({\n section,\n keyPath,\n ...props\n}) => {\n const childKeyPath: KeyPath[] = [...keyPath, { type: NodeType.Insertion }];\n\n const content = (section as InsertionContent<ContentNode>)[\n NodeType.Insertion\n ];\n\n return (\n <div className=\"flex w-full flex-col justify-center gap-6 p-2\">\n <TextEditorContainer\n section={content}\n keyPath={childKeyPath}\n {...props}\n />\n </div>\n );\n};\n\nconst FileTextEditor: FC<TextEditorProps> = ({\n section,\n keyPath,\n ...props\n}) => {\n const childKeyPath: KeyPath[] = [...keyPath, { type: NodeType.File }];\n\n const fileUrl = (section as FileContent)[NodeType.File];\n const { content } = section as FileContent;\n\n return (\n <div className=\"flex w-full flex-col justify-center gap-6 p-2\">\n <span className=\"text-neutral text-sm\">{fileUrl} </span>\n <TextEditorContainer\n section={content}\n keyPath={childKeyPath}\n {...props}\n />\n </div>\n );\n};\n\nconst NestedTextEditor: FC<TextEditorProps> = ({\n keyPath,\n dictionary,\n renderSection,\n section,\n ...props\n}) => {\n const { addEditedContent } = useEditedContent();\n\n const content = (section as any)[NodeType.Nested];\n const childrenKeyPath = [...keyPath, { type: NodeType.Nested }] as KeyPath[];\n\n return (\n <div className=\"flex w-full flex-col gap-4 p-2\">\n <Label>Dictionary key</Label>\n <ContentEditorInputBase\n aria-label=\"Edit field\"\n type=\"text\"\n variant={InputVariant.DEFAULT}\n {...props}\n onContentChange={(newValue) => {\n addEditedContent(\n dictionary.localId!,\n {\n ...content,\n dictionaryKey: String(newValue),\n },\n childrenKeyPath\n );\n }}\n >\n {content.dictionaryKey ?? ''}\n </ContentEditorInputBase>\n\n <Label>Path (optional)</Label>\n <ContentEditorInputBase\n aria-label=\"Edit field\"\n type=\"text\"\n variant={InputVariant.DEFAULT}\n {...props}\n onContentChange={(newValue) => {\n addEditedContent(\n dictionary.localId!,\n {\n ...content,\n path: newValue !== '' ? newValue : undefined,\n },\n childrenKeyPath\n );\n }}\n >\n {content.path ?? ''}\n </ContentEditorInputBase>\n </div>\n );\n};\n\nexport const TextEditor: FC<TextEditorProps> = ({\n section,\n keyPath,\n dictionary,\n renderSection,\n isDarkMode,\n}) => {\n const { tsxNotEditable } = useIntlayer('navigation-view');\n const nodeType = getNodeType(section);\n\n if (nodeType === NodeType.ReactNode) {\n return (\n <>\n <span>[React Node]</span>\n <span className=\"text-neutral text-xs\">{tsxNotEditable}</span>\n </>\n );\n }\n\n if (nodeType === NodeType.Nested) {\n return (\n <NestedTextEditor\n dictionary={dictionary}\n renderSection={renderSection}\n keyPath={keyPath}\n section={section}\n />\n );\n }\n\n if (nodeType === NodeType.Translation) {\n return (\n <TranslationTextEditor\n dictionary={dictionary}\n renderSection={renderSection}\n keyPath={keyPath}\n section={section}\n />\n );\n }\n\n if (nodeType === NodeType.Enumeration) {\n return (\n <EnumerationTextEditor\n dictionary={dictionary}\n renderSection={renderSection}\n keyPath={keyPath}\n section={section}\n />\n );\n }\n\n if (nodeType === NodeType.Condition) {\n return (\n <ConditionTextEditor\n dictionary={dictionary}\n renderSection={renderSection}\n keyPath={keyPath}\n section={section}\n />\n );\n }\n\n if (nodeType === NodeType.Gender) {\n return (\n <GenderTextEditor\n dictionary={dictionary}\n renderSection={renderSection}\n keyPath={keyPath}\n section={section}\n />\n );\n }\n\n if (nodeType === NodeType.Insertion) {\n return (\n <InsertionTextEditor\n dictionary={dictionary}\n renderSection={renderSection}\n keyPath={keyPath}\n section={section}\n />\n );\n }\n\n if (nodeType === NodeType.Markdown) {\n return (\n <MarkdownTextEditor\n dictionary={dictionary}\n keyPath={keyPath}\n section={section}\n isDarkMode={isDarkMode}\n />\n );\n }\n\n if (nodeType === NodeType.File) {\n return (\n <FileTextEditor\n dictionary={dictionary}\n renderSection={renderSection}\n keyPath={keyPath}\n section={section}\n />\n );\n }\n\n if (nodeType === NodeType.Array) {\n return (\n <ArrayTextEditor\n dictionary={dictionary}\n renderSection={renderSection}\n keyPath={keyPath}\n section={section}\n />\n );\n }\n\n if (nodeType === NodeType.Object) {\n return (\n <ObjectTextEditor\n dictionary={dictionary}\n renderSection={renderSection}\n keyPath={keyPath}\n section={section}\n />\n );\n }\n\n if (nodeType === NodeType.Number) {\n return (\n <div className=\"w-full p-2\">\n <ContentEditorInput\n dictionary={dictionary}\n keyPath={keyPath}\n type=\"number\"\n aria-label=\"Edit field\"\n >\n {section as number}\n </ContentEditorInput>\n </div>\n );\n }\n\n if (nodeType === NodeType.Text) {\n return (\n <div className=\"w-full p-2\">\n {typeof renderSection === 'function' ? (\n renderSection(section as string)\n ) : (\n <ContentEditorTextArea\n variant={InputVariant.DEFAULT}\n aria-label=\"Edit field\"\n keyPath={keyPath}\n dictionary={dictionary}\n >\n {section as string}\n </ContentEditorTextArea>\n )}\n </div>\n );\n }\n\n if (nodeType === NodeType.Boolean) {\n return (\n <div className=\"w-full p-2\">\n <ContentEditorToggle\n dictionary={dictionary}\n keyPath={keyPath}\n value={section as boolean}\n />\n </div>\n );\n }\n\n return (\n <div className=\"w-full p-2\">\n Error. Format not supported.\n {JSON.stringify(section, null, 2)}\n {JSON.stringify(keyPath, null, 2)}\n NodeType : {nodeType}\n </div>\n );\n};\n\nexport const TextEditorContainer: FC<TextEditorProps> = (props) => (\n <Container\n border\n background=\"none\"\n className=\"top-6 flex h-full flex-1 flex-col gap-6 overflow-hidden p-2 md:sticky\"\n roundedSize=\"xl\"\n >\n <TextEditor {...props} />\n </Container>\n);\n"],"mappings":"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"}
1	+ {"version":3,"file":"TextEditor.mjs","names":["traceKeys: string[]","ContentEditorTextArea: FC<ContentEditorTextAreaProps>","ContentEditorTextAreaBase","editedContent","ContentEditorInput: FC<ContentEditorInputProps>","ContentEditorInputBase","ContentEditorToggle: FC<ContentEditorToggleProps>","TranslationTextEditor: FC<TextEditorProps>","content: any","EnumerationTextEditor: FC<TextEditorProps>","ConditionTextEditor: FC<TextEditorProps>","GenderTextEditor: FC<TextEditorProps>","ArrayTextEditor: FC<TextEditorProps>","newKeyPath: KeyPath[]","ObjectTextEditor: FC<TextEditorProps>","childKeyPath: KeyPath[]","MarkdownTextEditor: FC<TextEditorProps>","toggleContent","content","InsertionTextEditor: FC<TextEditorProps>","FileTextEditor: FC<TextEditorProps>","NestedTextEditor: FC<TextEditorProps>","TextEditor: FC<TextEditorProps>","TextEditorContainer: FC<TextEditorProps>"],"sources":["../../../../../src/components/DictionaryFieldEditor/ContentEditorView/TextEditor.tsx"],"sourcesContent":["'use client';\n\nimport {\n type ConditionContent,\n type EnumerationContent,\n type FileContent,\n type GenderContent,\n getEmptyNode,\n getLocaleName,\n getNodeType,\n type InsertionContent,\n type MarkdownContent,\n type TranslationContent,\n} from '@intlayer/core';\nimport { useConfiguration, useEditedContent } from '@intlayer/editor-react';\nimport {\n type ContentNode,\n type Dictionary,\n type KeyPath,\n type Locale,\n type LocalesValues,\n NodeType,\n} from '@intlayer/types';\nimport { Plus, Trash, WandSparkles } from 'lucide-react';\nimport { type FC, Fragment, type ReactNode, useState } from 'react';\nimport { useIntlayer, useLocale } from 'react-intlayer';\nimport { useAuditContentDeclarationField } from '../../../hooks';\nimport { renameKey } from '../../../utils/object';\nimport {\n Button,\n ButtonColor,\n ButtonSize,\n ButtonTextAlign,\n ButtonVariant,\n} from '../../Button';\nimport { Container } from '../../Container';\nimport {\n ContentEditorInput as ContentEditorInputBase,\n type ContentEditorInputProps as ContentEditorInputPropsBase,\n} from '../../ContentEditor/ContentEditorInput';\nimport {\n ContentEditorTextArea as ContentEditorTextAreaBase,\n type ContentEditorTextAreaProps as ContentEditorTextAreaPropsBase,\n} from '../../ContentEditor/ContentEditorTextArea';\nimport { InputVariant } from '../../Input';\nimport { Label } from '../../Label';\nimport { useLocaleSwitcherContent } from '../../LocaleSwitcherContentDropDown';\nimport { MarkdownRenderer } from '../../MarkDownRender';\nimport {\n SwitchSelector,\n type SwitchSelectorChoices,\n SwitchSelectorColor,\n type SwitchSelectorProps,\n SwitchSelectorSize,\n} from '../../SwitchSelector';\nimport { EnumKeyInput } from '../EnumKeyInput';\n\nexport const traceKeys: string[] = ['filePath', 'id', 'nodeType'];\n\ntype ContentEditorTextAreaProps = Omit<\n ContentEditorTextAreaPropsBase,\n 'onContentChange'\n> & {\n keyPath: KeyPath[];\n dictionary: Dictionary;\n};\n\nconst ContentEditorTextArea: FC<ContentEditorTextAreaProps> = ({\n keyPath,\n dictionary,\n ...props\n}) => {\n const { editedContent, addEditedContent } = useEditedContent();\n const configuration = useConfiguration();\n const { mutate: auditContentDeclarationField, isPending: isAuditing } =\n useAuditContentDeclarationField();\n\n return (\n <ContentEditorTextAreaBase\n variant={InputVariant.DEFAULT}\n onContentChange={(newValue) =>\n addEditedContent(dictionary.localId!, newValue, keyPath)\n }\n additionalButtons={\n <Button\n Icon={WandSparkles}\n label=\"Audit\"\n variant={ButtonVariant.HOVERABLE}\n size={ButtonSize.ICON_SM}\n color={ButtonColor.TEXT}\n className=\"cursor-pointer hover:scale-110\"\n isLoading={isAuditing}\n onClick={() => {\n auditContentDeclarationField(\n {\n fileContent: JSON.stringify({\n ...dictionary,\n ...(editedContent?.[dictionary.localId!] ?? {}),\n }),\n keyPath,\n locales: configuration.internationalization.locales ?? [],\n aiOptions: {\n apiKey: configuration.ai?.apiKey,\n model: configuration.ai?.model,\n temperature: configuration.ai?.temperature,\n },\n },\n {\n onSuccess: (response) => {\n if (!response?.data) return;\n\n try {\n const editedContent = response.data.fileContent as string;\n\n addEditedContent(\n dictionary.localId!,\n editedContent,\n keyPath\n );\n } catch (error) {\n console.error(error);\n }\n },\n }\n );\n }}\n />\n }\n {...props}\n />\n );\n};\n\ntype ContentEditorInputProps = Omit<\n ContentEditorInputPropsBase,\n 'onContentChange'\n> & {\n keyPath: KeyPath[];\n dictionary: Dictionary;\n};\n\nconst ContentEditorInput: FC<ContentEditorInputProps> = ({\n keyPath,\n dictionary,\n ...props\n}) => {\n const { addEditedContent } = useEditedContent();\n\n return (\n <ContentEditorInputBase\n variant={InputVariant.DEFAULT}\n onContentChange={(newValue) =>\n addEditedContent(dictionary.localId!, newValue, keyPath)\n }\n {...props}\n />\n );\n};\n\nconst toggleContent = [\n {\n content: 'False',\n value: false,\n },\n {\n content: 'True',\n value: true,\n },\n] as SwitchSelectorChoices<boolean>;\n\ntype ContentEditorToggleProps = SwitchSelectorProps & {\n dictionary: Dictionary;\n keyPath: KeyPath[];\n};\n\nconst ContentEditorToggle: FC<ContentEditorToggleProps> = ({\n dictionary,\n keyPath,\n ...props\n}) => {\n const { addEditedContent } = useEditedContent();\n\n return (\n <SwitchSelector\n choices={toggleContent}\n value={true}\n onChange={(value) =>\n addEditedContent(dictionary.localId!, value, keyPath)\n }\n color={SwitchSelectorColor.TEXT}\n size={SwitchSelectorSize.SM}\n {...props}\n />\n );\n};\n\nexport type TextEditorProps = {\n dictionary: Dictionary;\n keyPath: KeyPath[];\n section: ContentNode;\n isDarkMode?: boolean;\n renderSection?: (content: string) => ReactNode;\n onContentChange?: (newValue: string) => void;\n};\n\nconst TranslationTextEditor: FC<TextEditorProps> = ({\n section,\n keyPath,\n dictionary,\n renderSection,\n}: TextEditorProps) => {\n const { locale, defaultLocale } = useLocale();\n const { selectedLocales, availableLocales } = useLocaleSwitcherContent();\n\n const sectionContent = (section as TranslationContent<string>)[\n NodeType.Translation\n ] as Record<Locale, string>;\n\n const sectionContentKeys = Object.keys(sectionContent) as LocalesValues[];\n\n const isFiltered = availableLocales.length > selectedLocales.length;\n\n const localesList = isFiltered\n ? selectedLocales\n : // If the translation include content in other locales, we display all of them\n [...new Set([...availableLocales, ...sectionContentKeys])];\n\n const content: any = (section as TranslationContent<string>)[\n NodeType.Translation\n ];\n\n return (\n <table className=\"w-full\">\n <tbody className=\"flex w-full flex-col gap-2\">\n {localesList.map((translationKey) => (\n <Fragment key={translationKey}>\n <tr className=\"mt-2 w-full p-2 text-xs\">\n <td className=\"w-full\">\n {getLocaleName(translationKey, locale)}\n </td>\n </tr>\n <tr className=\"flex\">\n <td className=\"w-full\">\n <TextEditorContainer\n section={\n content[translationKey] ??\n getEmptyNode(content[defaultLocale])\n }\n keyPath={[\n ...keyPath,\n { type: NodeType.Translation, key: translationKey },\n ]}\n dictionary={dictionary}\n renderSection={renderSection}\n />\n </td>\n </tr>\n </Fragment>\n ))}\n </tbody>\n </table>\n );\n};\n\nconst EnumerationTextEditor: FC<TextEditorProps> = ({\n section,\n keyPath,\n dictionary,\n renderSection,\n}) => {\n const { addEditedContent } = useEditedContent();\n const { addNewEnumeration, removeEnumeration } =\n useIntlayer('navigation-view');\n\n const content = (section as EnumerationContent<string>)[NodeType.Enumeration];\n const firstKey = Object.keys(content)[0] as keyof typeof content;\n\n return (\n <div className=\"flex flex-col gap-2\">\n <table className=\"w-full\">\n <tbody className=\"flex w-full flex-col gap-2\">\n {Object.keys(\n (section as EnumerationContent<ContentNode>)[NodeType.Enumeration]\n ).map((enumKey) => {\n const childrenKeyPath = [\n ...keyPath,\n { type: NodeType.Enumeration },\n ] as KeyPath[];\n return (\n <Fragment key={enumKey}>\n <tr className=\"mt-2 w-full\">\n <td className=\"w-full\">\n <div className=\"flex flex-1\">\n <Button\n label={removeEnumeration.label.value}\n variant={ButtonVariant.HOVERABLE}\n color={ButtonColor.TEXT}\n Icon={Trash}\n className=\"ml-auto\"\n onClick={() =>\n addEditedContent(\n dictionary.localId!,\n undefined,\n childrenKeyPath\n )\n }\n >\n {removeEnumeration.text}\n </Button>\n </div>\n </td>\n </tr>\n <tr className=\"w-full p-2\">\n <td className=\"w-full\">\n <EnumKeyInput\n value={enumKey}\n onChange={(value) => {\n const preValueContent = (\n section as EnumerationContent<string>\n )[NodeType.Enumeration];\n const newValueContent = renameKey(\n preValueContent,\n enumKey as keyof typeof preValueContent,\n value\n );\n const newValue = {\n ...(section as EnumerationContent<string>),\n [NodeType.Enumeration]: newValueContent,\n };\n\n addEditedContent(\n dictionary.localId!,\n newValue,\n keyPath\n );\n }}\n />\n </td>\n </tr>\n <tr className=\"block w-full\">\n <td className=\"w-full\">\n <TextEditor\n section={\n content[enumKey as keyof typeof content] ??\n getEmptyNode(content[firstKey])\n }\n keyPath={childrenKeyPath}\n dictionary={dictionary}\n renderSection={renderSection}\n />\n </td>\n </tr>\n </Fragment>\n );\n })}\n </tbody>\n </table>\n\n <Button\n label={addNewEnumeration.label.value}\n variant={ButtonVariant.HOVERABLE}\n color={ButtonColor.NEUTRAL}\n textAlign={ButtonTextAlign.LEFT}\n isFullWidth\n onClick={() =>\n addEditedContent(\n dictionary.localId!,\n getEmptyNode(content[firstKey]) ?? '',\n [...keyPath, { type: NodeType.Enumeration, key: 'unknown' }]\n )\n }\n Icon={Plus}\n className=\"m-2\"\n >\n {addNewEnumeration.text}\n </Button>\n </div>\n );\n};\n\nconst ConditionTextEditor: FC<TextEditorProps> = ({\n section,\n keyPath,\n dictionary,\n renderSection,\n}) => {\n const content = (section as ConditionContent<string>)[NodeType.Condition];\n\n return (\n <table className=\"w-full\">\n <tbody className=\"flex w-full flex-col gap-2\">\n {['true', 'false', 'fallback'].map((condKey) => (\n <Fragment key={condKey}>\n <tr key={condKey} className=\"mt-2 block w-full p-2 text-xs\">\n <td className=\"w-full\">{String(condKey)}</td>\n </tr>\n <tr key={condKey} className=\"block w-full\">\n <td className=\"w-full\">\n <TextEditorContainer\n section={\n content[condKey as keyof typeof content] ??\n getEmptyNode(content.true)\n }\n keyPath={[\n ...keyPath,\n {\n type: NodeType.Condition,\n key: condKey,\n } as KeyPath,\n ]}\n dictionary={dictionary}\n renderSection={renderSection}\n />\n </td>\n </tr>\n </Fragment>\n ))}\n </tbody>\n </table>\n );\n};\n\nconst GenderTextEditor: FC<TextEditorProps> = ({\n section,\n keyPath,\n dictionary,\n renderSection,\n}) => {\n const content = (section as GenderContent<string>)[NodeType.Gender];\n\n return (\n <table className=\"w-full\">\n <tbody className=\"flex w-full flex-col gap-2\">\n {['male', 'female', 'fallback'].map((condKey) => (\n <Fragment key={condKey}>\n <tr key={condKey} className=\"mt-2 block w-full p-2 text-xs\">\n <td className=\"w-full\">{String(condKey)}</td>\n </tr>\n <tr key={condKey} className=\"block w-full\">\n <td className=\"w-full\">\n <TextEditorContainer\n section={\n content[condKey as keyof typeof content] ??\n getEmptyNode(content.male)\n }\n keyPath={[\n ...keyPath,\n {\n type: NodeType.Gender,\n key: condKey,\n } as KeyPath,\n ]}\n dictionary={dictionary}\n renderSection={renderSection}\n />\n </td>\n </tr>\n </Fragment>\n ))}\n </tbody>\n </table>\n );\n};\n\nconst ArrayTextEditor: FC<TextEditorProps> = ({\n section,\n keyPath,\n dictionary,\n renderSection,\n}) => {\n const { addEditedContent } = useEditedContent();\n const { addNewElement, removeElement } = useIntlayer('navigation-view');\n\n return (\n <div className=\"flex flex-col gap-2\">\n <table className=\"w-full\">\n <tbody className=\"flex w-full flex-col gap-2\">\n {(section as unknown as ContentNode[]).map((subSection, index) => (\n <Fragment key={JSON.stringify(subSection)}>\n <tr className=\"mt-2 w-full p-2\">\n <td className=\"w-full\">\n <div className=\"flex w-full items-center justify-between gap-2\">\n <span className=\"text-xs\">{String(index)}</span>\n <Button\n label={removeElement.label.value}\n variant={ButtonVariant.HOVERABLE}\n color={ButtonColor.NEUTRAL}\n className=\"ml-auto\"\n textAlign={ButtonTextAlign.LEFT}\n onClick={() => {\n const newKeyPath: KeyPath[] = [\n ...keyPath,\n {\n type: NodeType.Array,\n key: (section as unknown as ContentNode[]).length,\n },\n ];\n addEditedContent(\n dictionary.localId!,\n undefined,\n newKeyPath\n );\n }}\n Icon={Trash}\n >\n {removeElement.text}\n </Button>\n </div>\n </td>\n </tr>\n\n <tr className=\"block w-full\">\n <td className=\"w-full\">\n <TextEditorContainer\n section={\n subSection ??\n getEmptyNode((section as unknown as ContentNode[])[0])\n }\n keyPath={[\n ...keyPath,\n {\n type: NodeType.Array,\n key: index,\n },\n ]}\n dictionary={dictionary}\n renderSection={renderSection}\n />\n </td>\n </tr>\n </Fragment>\n ))}\n </tbody>\n </table>\n <Button\n label={addNewElement.label.value}\n variant={ButtonVariant.HOVERABLE}\n color={ButtonColor.NEUTRAL}\n textAlign={ButtonTextAlign.LEFT}\n isFullWidth\n onClick={() => {\n const newKeyPath: KeyPath[] = [\n ...keyPath,\n {\n type: NodeType.Array,\n key: (section as unknown as ContentNode[]).length,\n },\n ];\n addEditedContent(\n dictionary.localId!,\n getEmptyNode((section as unknown as ContentNode[])[0]) ?? '',\n newKeyPath,\n false\n );\n }}\n Icon={Plus}\n >\n {addNewElement.text}\n </Button>\n </div>\n );\n};\n\nconst ObjectTextEditor: FC<TextEditorProps> = ({\n section,\n keyPath,\n dictionary,\n renderSection,\n}) => (\n <>\n <table className=\"w-full\">\n <tbody className=\"flex flex-col gap-2\">\n {Object.keys(section as unknown as Record<string, ContentNode>).map(\n (key) => {\n const childKeyPath: KeyPath[] = [\n ...keyPath,\n { type: NodeType.Object, key },\n ];\n const typedSection = section as unknown as Record<\n string,\n ContentNode\n >;\n const firstKey = Object.keys(\n typedSection\n )[0] as keyof typeof section;\n const subSection =\n typedSection[key as keyof typeof section] ??\n getEmptyNode(typedSection[firstKey]);\n\n return (\n <Fragment key={key}>\n <tr\n key={JSON.stringify(subSection)}\n className=\"mt-2 p-2 text-xs\"\n >\n <td className=\"w-full\">{String(key)}</td>\n </tr>\n <tr key={JSON.stringify(subSection)} className=\"block w-full\">\n <td className=\"w-full\">\n <TextEditor\n section={subSection}\n keyPath={childKeyPath}\n dictionary={dictionary}\n renderSection={renderSection}\n />\n </td>\n </tr>\n </Fragment>\n );\n }\n )}\n </tbody>\n </table>\n </>\n);\n\nenum MarkdownViewMode {\n Edit,\n Preview,\n}\n\nconst MarkdownTextEditor: FC<TextEditorProps> = ({\n section,\n keyPath,\n dictionary,\n isDarkMode,\n}) => {\n const [mode, setMode] = useState(MarkdownViewMode.Edit);\n const toggleContent = [\n {\n content: 'Edit',\n value: MarkdownViewMode.Edit,\n },\n {\n content: 'Preview',\n value: MarkdownViewMode.Preview,\n },\n ] as SwitchSelectorChoices<MarkdownViewMode>;\n const childKeyPath: KeyPath[] = [...keyPath, { type: NodeType.Markdown }];\n\n const content = (section as MarkdownContent<ContentNode>)[\n NodeType.Markdown\n ] as ContentNode;\n\n return (\n <div className=\"flex w-full flex-col justify-center gap-6 p-2\">\n <SwitchSelector\n choices={toggleContent}\n value={mode}\n onChange={setMode}\n color={SwitchSelectorColor.TEXT}\n size={SwitchSelectorSize.SM}\n className=\"ml-auto\"\n />\n\n <TextEditorContainer\n section={content}\n keyPath={childKeyPath}\n dictionary={dictionary}\n renderSection={\n mode === MarkdownViewMode.Preview\n ? (content) => (\n <MarkdownRenderer isDarkMode={isDarkMode}>\n {content}\n </MarkdownRenderer>\n )\n : undefined\n }\n />\n </div>\n );\n};\n\nconst InsertionTextEditor: FC<TextEditorProps> = ({\n section,\n keyPath,\n ...props\n}) => {\n const childKeyPath: KeyPath[] = [...keyPath, { type: NodeType.Insertion }];\n\n const content = (section as InsertionContent<ContentNode>)[\n NodeType.Insertion\n ];\n\n return (\n <div className=\"flex w-full flex-col justify-center gap-6 p-2\">\n <TextEditorContainer\n section={content}\n keyPath={childKeyPath}\n {...props}\n />\n </div>\n );\n};\n\nconst FileTextEditor: FC<TextEditorProps> = ({\n section,\n keyPath,\n ...props\n}) => {\n const childKeyPath: KeyPath[] = [...keyPath, { type: NodeType.File }];\n\n const fileUrl = (section as FileContent)[NodeType.File];\n const { content } = section as FileContent;\n\n return (\n <div className=\"flex w-full flex-col justify-center gap-6 p-2\">\n <span className=\"text-neutral text-sm\">{fileUrl} </span>\n <TextEditorContainer\n section={content}\n keyPath={childKeyPath}\n {...props}\n />\n </div>\n );\n};\n\nconst NestedTextEditor: FC<TextEditorProps> = ({\n keyPath,\n dictionary,\n renderSection,\n section,\n ...props\n}) => {\n const { addEditedContent } = useEditedContent();\n\n const content = (section as any)[NodeType.Nested];\n const childrenKeyPath = [...keyPath, { type: NodeType.Nested }] as KeyPath[];\n\n return (\n <div className=\"flex w-full flex-col gap-4 p-2\">\n <Label>Dictionary key</Label>\n <ContentEditorInputBase\n aria-label=\"Edit field\"\n type=\"text\"\n variant={InputVariant.DEFAULT}\n {...props}\n onContentChange={(newValue) => {\n addEditedContent(\n dictionary.localId!,\n {\n ...content,\n dictionaryKey: String(newValue),\n },\n childrenKeyPath\n );\n }}\n >\n {content.dictionaryKey ?? ''}\n </ContentEditorInputBase>\n\n <Label>Path (optional)</Label>\n <ContentEditorInputBase\n aria-label=\"Edit field\"\n type=\"text\"\n variant={InputVariant.DEFAULT}\n {...props}\n onContentChange={(newValue) => {\n addEditedContent(\n dictionary.localId!,\n {\n ...content,\n path: newValue !== '' ? newValue : undefined,\n },\n childrenKeyPath\n );\n }}\n >\n {content.path ?? ''}\n </ContentEditorInputBase>\n </div>\n );\n};\n\nexport const TextEditor: FC<TextEditorProps> = ({\n section,\n keyPath,\n dictionary,\n renderSection,\n isDarkMode,\n}) => {\n const { tsxNotEditable } = useIntlayer('navigation-view');\n const nodeType = getNodeType(section);\n\n if (nodeType === NodeType.ReactNode) {\n return (\n <div className=\"flex w-full flex-col gap-2\">\n <span>(React Node)</span>\n <span className=\"flex text-neutral text-xs\">{tsxNotEditable}</span>\n </div>\n );\n }\n\n if (nodeType === NodeType.Nested) {\n return (\n <NestedTextEditor\n dictionary={dictionary}\n renderSection={renderSection}\n keyPath={keyPath}\n section={section}\n />\n );\n }\n\n if (nodeType === NodeType.Translation) {\n return (\n <TranslationTextEditor\n dictionary={dictionary}\n renderSection={renderSection}\n keyPath={keyPath}\n section={section}\n />\n );\n }\n\n if (nodeType === NodeType.Enumeration) {\n return (\n <EnumerationTextEditor\n dictionary={dictionary}\n renderSection={renderSection}\n keyPath={keyPath}\n section={section}\n />\n );\n }\n\n if (nodeType === NodeType.Condition) {\n return (\n <ConditionTextEditor\n dictionary={dictionary}\n renderSection={renderSection}\n keyPath={keyPath}\n section={section}\n />\n );\n }\n\n if (nodeType === NodeType.Gender) {\n return (\n <GenderTextEditor\n dictionary={dictionary}\n renderSection={renderSection}\n keyPath={keyPath}\n section={section}\n />\n );\n }\n\n if (nodeType === NodeType.Insertion) {\n return (\n <InsertionTextEditor\n dictionary={dictionary}\n renderSection={renderSection}\n keyPath={keyPath}\n section={section}\n />\n );\n }\n\n if (nodeType === NodeType.Markdown) {\n return (\n <MarkdownTextEditor\n dictionary={dictionary}\n keyPath={keyPath}\n section={section}\n isDarkMode={isDarkMode}\n />\n );\n }\n\n if (nodeType === NodeType.File) {\n return (\n <FileTextEditor\n dictionary={dictionary}\n renderSection={renderSection}\n keyPath={keyPath}\n section={section}\n />\n );\n }\n\n if (nodeType === NodeType.Array) {\n return (\n <ArrayTextEditor\n dictionary={dictionary}\n renderSection={renderSection}\n keyPath={keyPath}\n section={section}\n />\n );\n }\n\n if (nodeType === NodeType.Object) {\n return (\n <ObjectTextEditor\n dictionary={dictionary}\n renderSection={renderSection}\n keyPath={keyPath}\n section={section}\n />\n );\n }\n\n if (nodeType === NodeType.Number) {\n return (\n <div className=\"w-full p-2\">\n <ContentEditorInput\n dictionary={dictionary}\n keyPath={keyPath}\n type=\"number\"\n aria-label=\"Edit field\"\n >\n {section as number}\n </ContentEditorInput>\n </div>\n );\n }\n\n if (nodeType === NodeType.Text) {\n return (\n <div className=\"w-full p-2\">\n {typeof renderSection === 'function' ? (\n renderSection(section as string)\n ) : (\n <ContentEditorTextArea\n variant={InputVariant.DEFAULT}\n aria-label=\"Edit field\"\n keyPath={keyPath}\n dictionary={dictionary}\n >\n {section as string}\n </ContentEditorTextArea>\n )}\n </div>\n );\n }\n\n if (nodeType === NodeType.Boolean) {\n return (\n <div className=\"w-full p-2\">\n <ContentEditorToggle\n dictionary={dictionary}\n keyPath={keyPath}\n value={section as boolean}\n />\n </div>\n );\n }\n\n return (\n <div className=\"w-full p-2\">\n Error. Format not supported.\n {JSON.stringify(section, null, 2)}\n {JSON.stringify(keyPath, null, 2)}\n NodeType : {nodeType}\n </div>\n );\n};\n\nexport const TextEditorContainer: FC<TextEditorProps> = (props) => (\n <Container\n border\n background=\"none\"\n className=\"top-6 flex h-full flex-1 flex-col gap-6 overflow-hidden p-2 md:sticky\"\n roundedSize=\"xl\"\n >\n <TextEditor {...props} />\n </Container>\n);\n"],"mappings":"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"}

package/dist/esm/components/DictionaryFieldEditor/KeyPathBreadcrumb.mjs CHANGED Viewed

@@ -3,17 +3,18 @@ import { jsx } from "react/jsx-runtime";
 import { camelCaseToSentence } from "@intlayer/config/client";
 //#region src/components/DictionaryFieldEditor/KeyPathBreadcrumb.tsx
-const KeyPathBreadcrumb = ({ keyPath, dictionaryKey, onClickKeyPath, locale }) => {
+const KeyPathBreadcrumb = ({ keyPath, dictionaryKey, onClickKeyPath, locale, color, showDictionaryKey = true }) => {
 	return /* @__PURE__ */ jsx(Breadcrumb, {
-		links: [{
+		links: [...showDictionaryKey ? [{
 			text: camelCaseToSentence(dictionaryKey),
-			onClick: () => onClickKeyPath([])
-		}, ...keyPath.map((el, index) => ({
-			onClick: () => onClickKeyPath(keyPath.slice(0, index + 1)),
+			onClick: onClickKeyPath ? () => onClickKeyPath([]) : void 0
+		}] : [], ...keyPath.map((el, index) => ({
+			onClick: onClickKeyPath ? () => onClickKeyPath?.(keyPath.slice(0, index + 1)) : void 0,
 			text: el.key?.toString() ?? ""
 		}))],
 		locale,
-		elementType: "location"
+		elementType: "location",
+		color
 	});
 };

package/dist/esm/components/DictionaryFieldEditor/KeyPathBreadcrumb.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"KeyPathBreadcrumb.mjs","names":["KeyPathBreadcrumb: FC<KeyPathBreadcrumbProps>"],"sources":["../../../../src/components/DictionaryFieldEditor/KeyPathBreadcrumb.tsx"],"sourcesContent":["import { camelCaseToSentence } from '@intlayer/config/client';\nimport type { KeyPath, Locale } from '@intlayer/types';\nimport type { FC } from 'react';\nimport { Breadcrumb, type BreadcrumbLink } from '../Breadcrumb';\n\ntype KeyPathBreadcrumbProps = {\n dictionaryKey: string;\n keyPath: KeyPath[];\n onClickKeyPath: (keyPath: KeyPath[]) => void;\n locale?: Locale;\n};\n\nexport const KeyPathBreadcrumb: FC<KeyPathBreadcrumbProps> = ({\n keyPath,\n dictionaryKey,\n onClickKeyPath,\n locale,\n}) => {\n const formattedKeyPath: BreadcrumbLink[] = [\n {\n text: camelCaseToSentence(dictionaryKey),\n onClick: () => onClickKeyPath([]),\n },\n ...keyPath.map((el, index) => ({\n onClick: () =>\n ~~onClickKeyPath(\n keyPath\n~~ // With keyPath = [{type: NodeType.Object, key: '0'}, {type: NodeType.Array, key: '0'}, {type: NodeType.Object, key: '1'}]\n // If index is 0 -> onFocusKeyPath([{type: NodeType.Object, key: '0'}])\n // If index is 1 -> onFocusKeyPath([{type: NodeType.Object, key: '0'}, {type: NodeType.Array, key: '0'}])\n .slice(0, index + 1)\n ),\n text: el.key?.toString() ?? '',\n })),\n ];\n\n return (\n <Breadcrumb\n links={formattedKeyPath}\n locale={locale}\n elementType=\"location\"\n />\n );\n};\n"],"mappings":";;;;;~~AAYA~~,MAAaA,qBAAiD,EAC5D,SACA,eACA,gBACA,~~aACI~~;~~AAmBJ~~,QACE,oBAAC;EACC,~~OApBuC~~,CACzC;GACE,MAAM,oBAAoB,cAAc;GACxC,~~eAAe~~,eAAe,EAAE,CAAC;~~GAClC~~,~~EACD~~,GAAG,QAAQ,KAAK,IAAI,WAAW;GAC7B,~~eACE~~,~~eACE~~,~~QAIG~~,MAAM,GAAG,QAAQ,EAAE,~~CACvB~~;~~GACH~~,MAAM,GAAG,KAAK,UAAU,IAAI;GAC7B,EAAE,CACJ;EAKW;EACR,aAAY;~~GACZ~~"}
1	+ {"version":3,"file":"KeyPathBreadcrumb.mjs","names":["KeyPathBreadcrumb: FC<KeyPathBreadcrumbProps>"],"sources":["../../../../src/components/DictionaryFieldEditor/KeyPathBreadcrumb.tsx"],"sourcesContent":["import { camelCaseToSentence } from '@intlayer/config/client';\nimport type { KeyPath, Locale } from '@intlayer/types';\nimport type { FC } from 'react';\nimport { Breadcrumb, type BreadcrumbLink } from '../Breadcrumb';\nimport type { LinkColor } from '../Link';\n\ntype KeyPathBreadcrumbProps = {\n dictionaryKey: string;\n keyPath: KeyPath[];\n onClickKeyPath?: (keyPath: KeyPath[]) => void;\n locale?: Locale;\n color?: LinkColor \| `${LinkColor}`;\n showDictionaryKey?: boolean;\n};\n\nexport const KeyPathBreadcrumb: FC<KeyPathBreadcrumbProps> = ({\n keyPath,\n dictionaryKey,\n onClickKeyPath,\n locale,\n color,\n showDictionaryKey = true,\n}) => {\n const formattedKeyPath: BreadcrumbLink[] = [\n ...(showDictionaryKey\n ? [\n {\n text: camelCaseToSentence(dictionaryKey),\n onClick: onClickKeyPath ? () => onClickKeyPath([]) : undefined,\n },\n ]\n : []),\n ...keyPath.map((el, index) => ({\n onClick: onClickKeyPath\n ? () =>\n // With keyPath = [{type: NodeType.Object, key: '0'}, {type: NodeType.Array, key: '0'}, {type: NodeType.Object, key: '1'}]\n // If index is 0 -> onFocusKeyPath([{type: NodeType.Object, key: '0'}])\n // If index is 1 -> onFocusKeyPath([{type: NodeType.Object, key: '0'}, {type: NodeType.Array, key: '0'}])\n onClickKeyPath?.(keyPath.slice(0, index + 1))\n : undefined,\n\n text: el.key?.toString() ?? '',\n })),\n ];\n\n return (\n <Breadcrumb\n links={formattedKeyPath}\n locale={locale}\n elementType=\"location\"\n color={color}\n />\n );\n};\n"],"mappings":";;;;;AAeA,MAAaA,qBAAiD,EAC5D,SACA,eACA,gBACA,QACA,OACA,oBAAoB,WAChB;AAuBJ,QACE,oBAAC;EACC,OAxBuC,CACzC,GAAI,oBACA,CACE;GACE,MAAM,oBAAoB,cAAc;GACxC,SAAS,uBAAuB,eAAe,EAAE,CAAC,GAAG;GACtD,CACF,GACD,EAAE,EACN,GAAG,QAAQ,KAAK,IAAI,WAAW;GAC7B,SAAS,uBAKH,iBAAiB,QAAQ,MAAM,GAAG,QAAQ,EAAE,CAAC,GAC/C;GAEJ,MAAM,GAAG,KAAK,UAAU,IAAI;GAC7B,EAAE,CACJ;EAKW;EACR,aAAY;EACL;GACP"}

package/dist/esm/components/DictionaryFieldEditor/index.mjs CHANGED Viewed

@@ -1,6 +1,9 @@
+import { TextEditor, TextEditorContainer, traceKeys } from "./ContentEditorView/TextEditor.mjs";
+import { KeyPathBreadcrumb } from "./KeyPathBreadcrumb.mjs";
+import { ContentEditor } from "./ContentEditor.mjs";
 import { DictionaryCreationForm } from "./DictionaryCreationForm/DictionaryCreationForm.mjs";
 import { DictionaryFieldEditor } from "./DictionaryFieldEditor.mjs";
 import { VersionSwitcherProvider, useVersionSwitcher } from "./VersionSwitcherDropDown/VersionSwitcherContext.mjs";
 import { VersionSwitcher } from "./VersionSwitcherDropDown/VersionSwitcher.mjs";
-export { DictionaryCreationForm, DictionaryFieldEditor, VersionSwitcher, VersionSwitcherProvider, useVersionSwitcher };
+export { ContentEditor, DictionaryCreationForm, DictionaryFieldEditor, KeyPathBreadcrumb, TextEditor, TextEditorContainer, VersionSwitcher, VersionSwitcherProvider, traceKeys, useVersionSwitcher };

package/dist/esm/components/DropDown/index.mjs CHANGED Viewed

@@ -97,7 +97,7 @@ const Trigger = ({ children, identifier, className, label, ...props }) => /* @__
 	children
 });
 /**
-* Alignment options for the dropdown panel relative to the trigger
+* Horizontal alignment options for the dropdown panel relative to the trigger
 */
 let DropDownAlign = /* @__PURE__ */ function(DropDownAlign$1) {
 	/** Align panel to the start (left in LTR, right in RTL) of the trigger */
@@ -107,6 +107,16 @@ let DropDownAlign = /* @__PURE__ */ function(DropDownAlign$1) {
 	return DropDownAlign$1;
 }({});
 /**
+* Vertical alignment options for the dropdown panel relative to the trigger
+*/
+let DropDownYAlign = /* @__PURE__ */ function(DropDownYAlign$1) {
+	/** Position panel below the trigger (default) */
+	DropDownYAlign$1["BELOW"] = "below";
+	/** Position panel above the trigger */
+	DropDownYAlign$1["ABOVE"] = "above";
+	return DropDownYAlign$1;
+}({});
+/**
 * DropDown.Panel Component
 *
 * The content area that appears when the dropdown is triggered.
@@ -133,6 +143,11 @@ let DropDownAlign = /* @__PURE__ */ function(DropDownAlign$1) {
 * <DropDown.Panel identifier="menu" align={DropDownAlign.END} isOverable>
 *   <div>Right-aligned content</div>
 * </DropDown.Panel>
+*
+* // Panel opening above the trigger
+* <DropDown.Panel identifier="menu" yAlign={DropDownYAlign.ABOVE} isOverable>
+*   <div>Content appears above</div>
+* </DropDown.Panel>
 * ```
 *
 * @component
@@ -142,8 +157,8 @@ let DropDownAlign = /* @__PURE__ */ function(DropDownAlign$1) {
 * - Keyboard navigation support when isFocusable is enabled
 * - Screen reader announcements for state changes
 */
-const Panel = ({ children, isHidden = void 0, isOverable = false, isFocusable = false, align = DropDownAlign.START, identifier, className, ...props }) => /* @__PURE__ */ jsx("div", {
-	className: cn("absolute top-[calc(100%+0.5rem)] z-100 min-w-full", align === DropDownAlign.START && "left-0", align === DropDownAlign.END && "right-0", className),
+const Panel = ({ children, isHidden = void 0, isOverable = false, isFocusable = false, align = DropDownAlign.START, yAlign = DropDownYAlign.BELOW, identifier, className, ...props }) => /* @__PURE__ */ jsx("div", {
+	className: cn("absolute z-100 min-w-full", align === DropDownAlign.START && "left-0", align === DropDownAlign.END && "right-0", yAlign === DropDownYAlign.BELOW && "top-[calc(100%+0.5rem)]", yAlign === DropDownYAlign.ABOVE && "bottom-[calc(100%+0.5rem)]", className),
 	"aria-hidden": isHidden,
 	role: "region",
 	"aria-labelledby": `dropdown-trigger-${identifier}`,
@@ -159,5 +174,5 @@ DropDown.Trigger = Trigger;
 DropDown.Panel = Panel;
 //#endregion
-export { DropDown, DropDownAlign };
+export { DropDown, DropDownAlign, DropDownYAlign };
 //# sourceMappingURL=index.mjs.map

package/dist/esm/components/DropDown/index.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.mjs","names":["DropDown: DropDownType","Trigger: FC<TriggerProps>","Panel: FC<PanelProps>"],"sources":["../../../../src/components/DropDown/index.tsx"],"sourcesContent":["import type { FC, HTMLAttributes } from 'react';\nimport { cn } from '../../utils/cn';\nimport { Button, type ButtonProps } from '../Button';\nimport { MaxHeightSmoother } from '../MaxHeightSmoother';\n\n/*\n Props for the DropDown component\n /\nexport interface DropDownProps extends HTMLAttributes<HTMLDivElement> {\n /\n Unique identifier that links the trigger and panel for accessibility.\n * This is used to generate proper ARIA attributes.\n * @example \"user-menu\"\n * @example \"language-selector\"\n /\n identifier: string;\n}\n\nexport type DropDownType = FC<DropDownProps> & {\n Trigger: FC<TriggerProps>;\n Panel: FC<PanelProps>;\n};\n\n/\n DropDown Component\n \n A compound component that provides dropdown/popover functionality with flexible trigger mechanisms.\n * Supports hover, focus, and controlled visibility states with proper accessibility features.\n \n @example\n * ```tsx\n * // Basic hover dropdown\n * <DropDown identifier=\"menu\">\n * <DropDown.Trigger identifier=\"menu\">\n * Open Menu\n * </DropDown.Trigger>\n * <DropDown.Panel identifier=\"menu\" isOverable>\n * <div>Menu content</div>\n * </DropDown.Panel>\n * </DropDown>\n \n // Focus-based dropdown for accessibility\n * <DropDown identifier=\"accessible-menu\">\n * <DropDown.Trigger identifier=\"accessible-menu\">\n * Keyboard Accessible Menu\n * </DropDown.Trigger>\n * <DropDown.Panel identifier=\"accessible-menu\" isFocusable>\n * <div>Accessible content</div>\n * </DropDown.Panel>\n * </DropDown>\n \n // Controlled dropdown\n * <DropDown identifier=\"controlled\">\n * <DropDown.Trigger identifier=\"controlled\">\n * Controlled Menu\n * </DropDown.Trigger>\n * <DropDown.Panel identifier=\"controlled\" isHidden={!isOpen}>\n * <div>Controlled content</div>\n * </DropDown.Panel>\n * </DropDown>\n * ```\n \n @component\n * @accessibility\n * - Uses proper ARIA attributes (aria-haspopup, aria-labelledby, etc.)\n * - Supports keyboard navigation with focus management\n * - Screen reader compatible with proper role and labeling\n * - Maintains focus trap within dropdown when needed\n /\nexport const DropDown: DropDownType = ({\n children,\n className,\n identifier,\n ...props\n}) => (\n <div\n className={cn(`group/dropdown relative flex`, className)}\n aria-label={`DropDown ${identifier}`}\n id={`dropdown-container-${identifier}`}\n {...props}\n >\n {children}\n </div>\n);\n\n/\n Props for the DropDown.Trigger component\n /\nexport interface TriggerProps extends Partial<ButtonProps> {\n /\n Unique identifier that matches the parent DropDown identifier\n * @example \"user-menu\"\n /\n identifier: string;\n}\n\n/\n DropDown.Trigger Component\n \n The clickable/focusable element that controls the dropdown panel visibility.\n * Built on top of the Button component with enhanced dropdown-specific behaviors.\n \n @example\n * ```tsx\n * <DropDown.Trigger identifier=\"menu\">\n * <div>Click to open</div>\n * </DropDown.Trigger>\n * ```\n \n @component\n * @accessibility\n * - Automatically generates appropriate ARIA attributes\n * - Maintains proper focus management across browsers\n * - Works with keyboard navigation (Tab, Enter, Space)\n * - Announces dropdown state to screen readers\n \n @note Don't nest Button components inside the Trigger - it's already a button\n /\nconst Trigger: FC<TriggerProps> = ({\n children,\n identifier,\n className,\n label,\n ...props\n}) => (\n <Button\n className={cn([\n 'w-full cursor-pointer',\n 'group-focus-within/dropdown:bg-current/20 group-focus-within/dropdown:ring-4',\n className,\n ])}\n label={label ?? `Open panel ${identifier}`}\n aria-haspopup=\"true\"\n aria-controls={`dropdown-panel-${identifier}`}\n id={`dropdown-trigger-${identifier}`}\n onClick={(e) => {\n // Ensure focus behavior is consistent across all mobile browsers\n (e.currentTarget as HTMLButtonElement).focus();\n }}\n variant=\"none\"\n {...props}\n >\n {children}\n </Button>\n);\n\n/\n ~~Alignment~~ options for the dropdown panel relative to the trigger\n /\nexport enum DropDownAlign {\n /* Align panel to the start (left in LTR, right in RTL) of the trigger /\n START = 'start',\n /* Align panel to the end (right in LTR, left in RTL) of the trigger /\n END = 'end',\n}\n\n/\n Props for the DropDown.Panel component\n /\nexport interface PanelProps extends HTMLAttributes<HTMLDivElement> {\n /\n Whether the panel should be visible when the trigger is focused.\n * Enables keyboard accessibility for the dropdown.\n * @default false\n /\n isFocusable?: boolean;\n\n /\n Controls panel visibility explicitly.\n * - `true`: Panel is hidden\n * - `false`: Panel is visible\n * - `undefined`: Panel visibility controlled by hover/focus states\n * @default undefined\n /\n isHidden?: boolean;\n\n /\n Whether the panel should be visible when hovering over the trigger.\n * Provides quick access via mouse interaction.\n * @default false\n /\n isOverable?: boolean;\n\n /\n Unique identifier that matches the parent DropDown identifier\n * @example \"user-menu\"\n /\n identifier: string;\n\n /\n Horizontal alignment of the panel relative to the trigger\n * @default DropDownAlign.START\n /\n align?: DropDownAlign \| `${DropDownAlign}`;\n}\n\n/\n DropDown.Panel Component\n \n The content area that appears when the dropdown is triggered.\n * Supports multiple trigger methods (hover, focus, controlled) with smooth animations.\n \n @example\n * ```tsx\n * // Hover-triggered panel\n * <DropDown.Panel identifier=\"menu\" isOverable>\n * <div>Content appears on hover</div>\n * </DropDown.Panel>\n \n // Focus-triggered panel (accessible)\n * <DropDown.Panel identifier=\"menu\" isFocusable>\n * <div>Content appears on focus</div>\n * </DropDown.Panel>\n \n // Controlled panel\n * <DropDown.Panel identifier=\"menu\" isHidden={!isOpen}>\n * <div>Content visibility controlled externally</div>\n * </DropDown.Panel>\n \n // Right-aligned panel\n * <DropDown.Panel identifier=\"menu\" align={DropDownAlign.END} isOverable>\n * <div>Right-aligned content</div>\n * </DropDown.Panel>\n * ```\n \n @component\n * @accessibility\n * - Proper ARIA attributes (role, aria-labelledby, aria-hidden)\n * - Smooth height transitions with MaxHeightSmoother\n * - Keyboard navigation support when isFocusable is enabled\n * - Screen reader announcements for state changes\n */\nconst Panel: FC<PanelProps> = ({\n children,\n isHidden = undefined,\n isOverable = false,\n isFocusable = false,\n align = DropDownAlign.START,\n identifier,\n className,\n ...props\n}) => (\n <div\n className={cn(\n 'absolute ~~top-[calc(100%+0.5rem)]~~ z-100 min-w-full',\n align === DropDownAlign.START && 'left-0',\n align === DropDownAlign.END && 'right-0',\n className\n )}\n aria-hidden={isHidden}\n role=\"region\"\n aria-labelledby={`dropdown-trigger-${identifier}`}\n id={`dropdown-panel-${identifier}`}\n >\n <MaxHeightSmoother\n isHidden={isHidden}\n className={cn(\n 'overflow-x-visible',\n isHidden === false && 'invisible',\n isHidden === true && 'visible',\n isOverable &&\n 'group-hover/dropdown:visible group-hover/dropdown:grid-rows-[1fr]',\n isFocusable &&\n 'group-focus-within/dropdown:visible group-focus-within/dropdown:grid-rows-[1fr]'\n )}\n {...props}\n >\n {children}\n </MaxHeightSmoother>\n </div>\n);\n\nDropDown.Trigger = Trigger;\nDropDown.Panel = Panel;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAqEA,MAAaA,YAA0B,EACrC,UACA,WACA,YACA,GAAG,YAEH,oBAAC;CACC,WAAW,GAAG,gCAAgC,UAAU;CACxD,cAAY,YAAY;CACxB,IAAI,sBAAsB;CAC1B,GAAI;CAEH;EACG;;;;;;;;;;;;;;;;;;;;;;;AAoCR,MAAMC,WAA6B,EACjC,UACA,YACA,WACA,OACA,GAAG,YAEH,oBAAC;CACC,WAAW,GAAG;EACZ;EACA;EACA;EACD,CAAC;CACF,OAAO,SAAS,cAAc;CAC9B,iBAAc;CACd,iBAAe,kBAAkB;CACjC,IAAI,oBAAoB;CACxB,UAAU,MAAM;AAEd,EAAC,EAAE,cAAoC,OAAO;;CAEhD,SAAQ;CACR,GAAI;CAEH;EACM;;;;AAMX,IAAY,0DAAL;;AAEL;;AAEA~~;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA+EF~~,MAAMC,SAAyB,EAC7B,UACA,WAAW,QACX,aAAa,OACb,cAAc,OACd,QAAQ,cAAc,OACtB,YACA,WACA,GAAG,YAEH,oBAAC;CACC,WAAW,GACT,~~qDACA~~,UAAU,cAAc,SAAS,UACjC,UAAU,cAAc,OAAO,~~WAC~~/B,UACD;CACD,eAAa;CACb,MAAK;CACL,mBAAiB,oBAAoB;CACrC,IAAI,kBAAkB;WAEtB,oBAAC;EACW;EACV,WAAW,GACT,sBACA,aAAa,SAAS,aACtB,aAAa,QAAQ,WACrB,cACE,qEACF,eACE,kFACH;EACD,GAAI;EAEH;GACiB;EAChB;AAGR,SAAS,UAAU;AACnB,SAAS,QAAQ"}
1	+ {"version":3,"file":"index.mjs","names":["DropDown: DropDownType","Trigger: FC<TriggerProps>","Panel: FC<PanelProps>"],"sources":["../../../../src/components/DropDown/index.tsx"],"sourcesContent":["import type { FC, HTMLAttributes } from 'react';\nimport { cn } from '../../utils/cn';\nimport { Button, type ButtonProps } from '../Button';\nimport { MaxHeightSmoother } from '../MaxHeightSmoother';\n\n/*\n Props for the DropDown component\n /\nexport interface DropDownProps extends HTMLAttributes<HTMLDivElement> {\n /\n Unique identifier that links the trigger and panel for accessibility.\n * This is used to generate proper ARIA attributes.\n * @example \"user-menu\"\n * @example \"language-selector\"\n /\n identifier: string;\n}\n\nexport type DropDownType = FC<DropDownProps> & {\n Trigger: FC<TriggerProps>;\n Panel: FC<PanelProps>;\n};\n\n/\n DropDown Component\n \n A compound component that provides dropdown/popover functionality with flexible trigger mechanisms.\n * Supports hover, focus, and controlled visibility states with proper accessibility features.\n \n @example\n * ```tsx\n * // Basic hover dropdown\n * <DropDown identifier=\"menu\">\n * <DropDown.Trigger identifier=\"menu\">\n * Open Menu\n * </DropDown.Trigger>\n * <DropDown.Panel identifier=\"menu\" isOverable>\n * <div>Menu content</div>\n * </DropDown.Panel>\n * </DropDown>\n \n // Focus-based dropdown for accessibility\n * <DropDown identifier=\"accessible-menu\">\n * <DropDown.Trigger identifier=\"accessible-menu\">\n * Keyboard Accessible Menu\n * </DropDown.Trigger>\n * <DropDown.Panel identifier=\"accessible-menu\" isFocusable>\n * <div>Accessible content</div>\n * </DropDown.Panel>\n * </DropDown>\n \n // Controlled dropdown\n * <DropDown identifier=\"controlled\">\n * <DropDown.Trigger identifier=\"controlled\">\n * Controlled Menu\n * </DropDown.Trigger>\n * <DropDown.Panel identifier=\"controlled\" isHidden={!isOpen}>\n * <div>Controlled content</div>\n * </DropDown.Panel>\n * </DropDown>\n * ```\n \n @component\n * @accessibility\n * - Uses proper ARIA attributes (aria-haspopup, aria-labelledby, etc.)\n * - Supports keyboard navigation with focus management\n * - Screen reader compatible with proper role and labeling\n * - Maintains focus trap within dropdown when needed\n /\nexport const DropDown: DropDownType = ({\n children,\n className,\n identifier,\n ...props\n}) => (\n <div\n className={cn(`group/dropdown relative flex`, className)}\n aria-label={`DropDown ${identifier}`}\n id={`dropdown-container-${identifier}`}\n {...props}\n >\n {children}\n </div>\n);\n\n/\n Props for the DropDown.Trigger component\n /\nexport interface TriggerProps extends Partial<ButtonProps> {\n /\n Unique identifier that matches the parent DropDown identifier\n * @example \"user-menu\"\n /\n identifier: string;\n}\n\n/\n DropDown.Trigger Component\n \n The clickable/focusable element that controls the dropdown panel visibility.\n * Built on top of the Button component with enhanced dropdown-specific behaviors.\n \n @example\n * ```tsx\n * <DropDown.Trigger identifier=\"menu\">\n * <div>Click to open</div>\n * </DropDown.Trigger>\n * ```\n \n @component\n * @accessibility\n * - Automatically generates appropriate ARIA attributes\n * - Maintains proper focus management across browsers\n * - Works with keyboard navigation (Tab, Enter, Space)\n * - Announces dropdown state to screen readers\n \n @note Don't nest Button components inside the Trigger - it's already a button\n /\nconst Trigger: FC<TriggerProps> = ({\n children,\n identifier,\n className,\n label,\n ...props\n}) => (\n <Button\n className={cn([\n 'w-full cursor-pointer',\n 'group-focus-within/dropdown:bg-current/20 group-focus-within/dropdown:ring-4',\n className,\n ])}\n label={label ?? `Open panel ${identifier}`}\n aria-haspopup=\"true\"\n aria-controls={`dropdown-panel-${identifier}`}\n id={`dropdown-trigger-${identifier}`}\n onClick={(e) => {\n // Ensure focus behavior is consistent across all mobile browsers\n (e.currentTarget as HTMLButtonElement).focus();\n }}\n variant=\"none\"\n {...props}\n >\n {children}\n </Button>\n);\n\n/\n Horizontal alignment options for the dropdown panel relative to the trigger\n /\nexport enum DropDownAlign {\n /* Align panel to the start (left in LTR, right in RTL) of the trigger /\n START = 'start',\n /* Align panel to the end (right in LTR, left in RTL) of the trigger /\n END = 'end',\n}\n\n/\n Vertical alignment options for the dropdown panel relative to the trigger\n /\nexport enum DropDownYAlign {\n /* Position panel below the trigger (default) /\n BELOW = 'below',\n /* Position panel above the trigger /\n ABOVE = 'above',\n}\n\n/\n Props for the DropDown.Panel component\n /\nexport interface PanelProps extends HTMLAttributes<HTMLDivElement> {\n /\n Whether the panel should be visible when the trigger is focused.\n * Enables keyboard accessibility for the dropdown.\n * @default false\n /\n isFocusable?: boolean;\n\n /\n Controls panel visibility explicitly.\n * - `true`: Panel is hidden\n * - `false`: Panel is visible\n * - `undefined`: Panel visibility controlled by hover/focus states\n * @default undefined\n /\n isHidden?: boolean;\n\n /\n Whether the panel should be visible when hovering over the trigger.\n * Provides quick access via mouse interaction.\n * @default false\n /\n isOverable?: boolean;\n\n /\n Unique identifier that matches the parent DropDown identifier\n * @example \"user-menu\"\n /\n identifier: string;\n\n /\n Horizontal alignment of the panel relative to the trigger\n * @default DropDownAlign.START\n /\n align?: DropDownAlign \| `${DropDownAlign}`;\n\n /\n Vertical alignment of the panel relative to the trigger\n * @default DropDownYAlign.BELOW\n /\n yAlign?: DropDownYAlign \| `${DropDownYAlign}`;\n}\n\n/\n DropDown.Panel Component\n \n The content area that appears when the dropdown is triggered.\n * Supports multiple trigger methods (hover, focus, controlled) with smooth animations.\n \n @example\n * ```tsx\n * // Hover-triggered panel\n * <DropDown.Panel identifier=\"menu\" isOverable>\n * <div>Content appears on hover</div>\n * </DropDown.Panel>\n \n // Focus-triggered panel (accessible)\n * <DropDown.Panel identifier=\"menu\" isFocusable>\n * <div>Content appears on focus</div>\n * </DropDown.Panel>\n \n // Controlled panel\n * <DropDown.Panel identifier=\"menu\" isHidden={!isOpen}>\n * <div>Content visibility controlled externally</div>\n * </DropDown.Panel>\n \n // Right-aligned panel\n * <DropDown.Panel identifier=\"menu\" align={DropDownAlign.END} isOverable>\n * <div>Right-aligned content</div>\n * </DropDown.Panel>\n \n // Panel opening above the trigger\n * <DropDown.Panel identifier=\"menu\" yAlign={DropDownYAlign.ABOVE} isOverable>\n * <div>Content appears above</div>\n * </DropDown.Panel>\n * ```\n \n @component\n * @accessibility\n * - Proper ARIA attributes (role, aria-labelledby, aria-hidden)\n * - Smooth height transitions with MaxHeightSmoother\n * - Keyboard navigation support when isFocusable is enabled\n * - Screen reader announcements for state changes\n /\nconst Panel: FC<PanelProps> = ({\n children,\n isHidden = undefined,\n isOverable = false,\n isFocusable = false,\n align = DropDownAlign.START,\n yAlign = DropDownYAlign.BELOW,\n identifier,\n className,\n ...props\n}) => (\n <div\n className={cn(\n 'absolute z-100 min-w-full',\n / Horizontal positioning /\n align === DropDownAlign.START && 'left-0',\n align === DropDownAlign.END && 'right-0',\n / Vertical positioning */\n yAlign === DropDownYAlign.BELOW && 'top-[calc(100%+0.5rem)]',\n yAlign === DropDownYAlign.ABOVE && 'bottom-[calc(100%+0.5rem)]',\n className\n )}\n aria-hidden={isHidden}\n role=\"region\"\n aria-labelledby={`dropdown-trigger-${identifier}`}\n id={`dropdown-panel-${identifier}`}\n >\n <MaxHeightSmoother\n isHidden={isHidden}\n className={cn(\n 'overflow-x-visible',\n isHidden === false && 'invisible',\n isHidden === true && 'visible',\n isOverable &&\n 'group-hover/dropdown:visible group-hover/dropdown:grid-rows-[1fr]',\n isFocusable &&\n 'group-focus-within/dropdown:visible group-focus-within/dropdown:grid-rows-[1fr]'\n )}\n {...props}\n >\n {children}\n </MaxHeightSmoother>\n </div>\n);\n\nDropDown.Trigger = Trigger;\nDropDown.Panel = Panel;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAqEA,MAAaA,YAA0B,EACrC,UACA,WACA,YACA,GAAG,YAEH,oBAAC;CACC,WAAW,GAAG,gCAAgC,UAAU;CACxD,cAAY,YAAY;CACxB,IAAI,sBAAsB;CAC1B,GAAI;CAEH;EACG;;;;;;;;;;;;;;;;;;;;;;;AAoCR,MAAMC,WAA6B,EACjC,UACA,YACA,WACA,OACA,GAAG,YAEH,oBAAC;CACC,WAAW,GAAG;EACZ;EACA;EACA;EACD,CAAC;CACF,OAAO,SAAS,cAAc;CAC9B,iBAAc;CACd,iBAAe,kBAAkB;CACjC,IAAI,oBAAoB;CACxB,UAAU,MAAM;AAEd,EAAC,EAAE,cAAoC,OAAO;;CAEhD,SAAQ;CACR,GAAI;CAEH;EACM;;;;AAMX,IAAY,0DAAL;;AAEL;;AAEA;;;;;;AAMF,IAAY,4DAAL;;AAEL;;AAEA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA0FF,MAAMC,SAAyB,EAC7B,UACA,WAAW,QACX,aAAa,OACb,cAAc,OACd,QAAQ,cAAc,OACtB,SAAS,eAAe,OACxB,YACA,WACA,GAAG,YAEH,oBAAC;CACC,WAAW,GACT,6BAEA,UAAU,cAAc,SAAS,UACjC,UAAU,cAAc,OAAO,WAE/B,WAAW,eAAe,SAAS,2BACnC,WAAW,eAAe,SAAS,8BACnC,UACD;CACD,eAAa;CACb,MAAK;CACL,mBAAiB,oBAAoB;CACrC,IAAI,kBAAkB;WAEtB,oBAAC;EACW;EACV,WAAW,GACT,sBACA,aAAa,SAAS,aACtB,aAAa,QAAQ,WACrB,cACE,qEACF,eACE,kFACH;EACD,GAAI;EAEH;GACiB;EAChB;AAGR,SAAS,UAAU;AACnB,SAAS,QAAQ"}