intlayer-editor 3.3.5 → 3.4.6

package/dist/cjs/ContentSelectorWrapper.cjs

@@ -46,7 +46,10 @@ const ContentSelectorWrapper = ({
     }),
     [dictionaryId, dictionaryPath, keyPath, open]
   );
-  const isSelected = (isOpen && (focusedContent?.keyPath?.length ?? 0) > 0 && (0, import_core.isSameKeyPath)(focusedContent?.keyPath ?? [], keyPath)) ?? false;
+  const isSelected = (0, import_react.useMemo)(
+    () => (isOpen && (focusedContent?.keyPath?.length ?? 0) > 0 && (0, import_core.isSameKeyPath)(focusedContent?.keyPath ?? [], keyPath)) ?? false,
+    [focusedContent, isOpen, keyPath]
+  );
   (0, import_react.useEffect)(() => {
     if (isEditorEnabled && editedValue && typeof editedValue === "string") {
       setDisplayedChildren(editedValue);

package/dist/cjs/ContentSelectorWrapper.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/ContentSelectorWrapper.tsx"],"sourcesContent":["'use client';\n\nimport { isSameKeyPath, type KeyPath } from '@intlayer/core';\nimport { ContentSelector } from '@intlayer/design-system';\nimport {\n  useCallback,\n  useEffect,\n  useState,\n  type FC,\n  type ReactNode,\n} from 'react';\nimport { useIntlayerEditorContext } from './IntlayerEditorProvider';\nimport { useDictionaryEditionDrawer } from './DictionaryEditionDrawer/useDictionaryEditionDrawer';\n\ntype ContentSelectorWrapperProps = {\n  children: ReactNode;\n  dictionaryId: string;\n  dictionaryPath: string;\n  keyPath: KeyPath[];\n};\n\nexport const ContentSelectorWrapper: FC<ContentSelectorWrapperProps> = ({\n  children,\n  dictionaryId,\n  dictionaryPath,\n  keyPath,\n}) => {\n  const { open, getEditedContentValue, focusedContent, isOpen } =\n    useDictionaryEditionDrawer(dictionaryId);\n  const editedValue = getEditedContentValue(dictionaryId, keyPath);\n  const { isEditorEnabled } = useIntlayerEditorContext();\n  const [displayedChildren, setDisplayedChildren] =\n    useState<ReactNode>(children);\n\n  const handleSelect = useCallback(\n    () =>\n      open({\n        dictionaryId,\n        dictionaryPath,\n        keyPath,\n      }),\n    [dictionaryId, dictionaryPath, keyPath, open]\n  );\n\n  const isSelected =\n    (isOpen &&\n      (focusedContent?.keyPath?.length ?? 0) > 0 &&\n      isSameKeyPath(focusedContent?.keyPath ?? [], keyPath)) ??\n    false;\n\n  useEffect(() => {\n    // Use useEffect to avoid 'Text content does not match server-rendered HTML' error\n    if (isEditorEnabled && editedValue && typeof editedValue === 'string') {\n      setDisplayedChildren(editedValue);\n    }\n  }, [editedValue, isEditorEnabled]);\n\n  if (!isEditorEnabled) {\n    return children;\n  }\n\n  return (\n    <ContentSelector onSelect={handleSelect} isSelecting={isSelected}>\n      {displayedChildren}\n    </ContentSelector>\n  );\n};\n"],"mappings":";;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AA8DI;AA5DJ,kBAA4C;AAC5C,2BAAgC;AAChC,mBAMO;AACP,oCAAyC;AACzC,wCAA2C;AASpC,MAAM,yBAA0D,CAAC;AAAA,EACtE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAAM;AACJ,QAAM,EAAE,MAAM,uBAAuB,gBAAgB,OAAO,QAC1D,8DAA2B,YAAY;AACzC,QAAM,cAAc,sBAAsB,cAAc,OAAO;AAC/D,QAAM,EAAE,gBAAgB,QAAI,wDAAyB;AACrD,QAAM,CAAC,mBAAmB,oBAAoB,QAC5C,uBAAoB,QAAQ;AAE9B,QAAM,mBAAe;AAAA,IACnB,MACE,KAAK;AAAA,MACH;AAAA,MACA;AAAA,MACA;AAAA,IACF,CAAC;AAAA,IACH,CAAC,cAAc,gBAAgB,SAAS,IAAI;AAAA,EAC9C;AAEA,QAAM,cACH,WACE,gBAAgB,SAAS,UAAU,KAAK,SACzC,2BAAc,gBAAgB,WAAW,CAAC,GAAG,OAAO,MACtD;AAEF,8BAAU,MAAM;AAEd,QAAI,mBAAmB,eAAe,OAAO,gBAAgB,UAAU;AACrE,2BAAqB,WAAW;AAAA,IAClC;AAAA,EACF,GAAG,CAAC,aAAa,eAAe,CAAC;AAEjC,MAAI,CAAC,iBAAiB;AACpB,WAAO;AAAA,EACT;AAEA,SACE,4CAAC,wCAAgB,UAAU,cAAc,aAAa,YACnD,6BACH;AAEJ;","names":[]}
+{"version":3,"sources":["../../src/ContentSelectorWrapper.tsx"],"sourcesContent":["'use client';\n\nimport { isSameKeyPath, type KeyPath } from '@intlayer/core';\nimport { ContentSelector } from '@intlayer/design-system';\nimport {\n  useCallback,\n  useEffect,\n  useState,\n  useMemo,\n  type FC,\n  type ReactNode,\n} from 'react';\nimport { useIntlayerEditorContext } from './IntlayerEditorProvider';\nimport { useDictionaryEditionDrawer } from './DictionaryEditionDrawer/useDictionaryEditionDrawer';\n\ntype ContentSelectorWrapperProps = {\n  children: ReactNode;\n  dictionaryId: string;\n  dictionaryPath: string;\n  keyPath: KeyPath[];\n};\n\nexport const ContentSelectorWrapper: FC<ContentSelectorWrapperProps> = ({\n  children,\n  dictionaryId,\n  dictionaryPath,\n  keyPath,\n}) => {\n  const { open, getEditedContentValue, focusedContent, isOpen } =\n    useDictionaryEditionDrawer(dictionaryId);\n  const editedValue = getEditedContentValue(dictionaryId, keyPath);\n  const { isEditorEnabled } = useIntlayerEditorContext();\n  const [displayedChildren, setDisplayedChildren] =\n    useState<ReactNode>(children);\n\n  const handleSelect = useCallback(\n    () =>\n      open({\n        dictionaryId,\n        dictionaryPath,\n        keyPath,\n      }),\n    [dictionaryId, dictionaryPath, keyPath, open]\n  );\n\n  const isSelected = useMemo(\n    () =>\n      (isOpen &&\n        (focusedContent?.keyPath?.length ?? 0) > 0 &&\n        isSameKeyPath(focusedContent?.keyPath ?? [], keyPath)) ??\n      false,\n    [focusedContent, isOpen, keyPath]\n  );\n\n  useEffect(() => {\n    // Use useEffect to avoid 'Text content does not match server-rendered HTML' error\n    if (isEditorEnabled && editedValue && typeof editedValue === 'string') {\n      setDisplayedChildren(editedValue);\n    }\n  }, [editedValue, isEditorEnabled]);\n\n  if (!isEditorEnabled) {\n    return children;\n  }\n\n  return (\n    <ContentSelector onSelect={handleSelect} isSelecting={isSelected}>\n      {displayedChildren}\n    </ContentSelector>\n  );\n};\n"],"mappings":";;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAkEI;AAhEJ,kBAA4C;AAC5C,2BAAgC;AAChC,mBAOO;AACP,oCAAyC;AACzC,wCAA2C;AASpC,MAAM,yBAA0D,CAAC;AAAA,EACtE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAAM;AACJ,QAAM,EAAE,MAAM,uBAAuB,gBAAgB,OAAO,QAC1D,8DAA2B,YAAY;AACzC,QAAM,cAAc,sBAAsB,cAAc,OAAO;AAC/D,QAAM,EAAE,gBAAgB,QAAI,wDAAyB;AACrD,QAAM,CAAC,mBAAmB,oBAAoB,QAC5C,uBAAoB,QAAQ;AAE9B,QAAM,mBAAe;AAAA,IACnB,MACE,KAAK;AAAA,MACH;AAAA,MACA;AAAA,MACA;AAAA,IACF,CAAC;AAAA,IACH,CAAC,cAAc,gBAAgB,SAAS,IAAI;AAAA,EAC9C;AAEA,QAAM,iBAAa;AAAA,IACjB,OACG,WACE,gBAAgB,SAAS,UAAU,KAAK,SACzC,2BAAc,gBAAgB,WAAW,CAAC,GAAG,OAAO,MACtD;AAAA,IACF,CAAC,gBAAgB,QAAQ,OAAO;AAAA,EAClC;AAEA,8BAAU,MAAM;AAEd,QAAI,mBAAmB,eAAe,OAAO,gBAAgB,UAAU;AACrE,2BAAqB,WAAW;AAAA,IAClC;AAAA,EACF,GAAG,CAAC,aAAa,eAAe,CAAC;AAEjC,MAAI,CAAC,iBAAiB;AACpB,WAAO;AAAA,EACT;AAEA,SACE,4CAAC,wCAAgB,UAAU,cAAc,aAAa,YACnD,6BACH;AAEJ;","names":[]}

package/dist/cjs/DictionaryEditionDrawer/DictionaryEditionDrawer.cjs

@@ -28,7 +28,9 @@ var import_jsx_runtime = require("react/jsx-runtime");
 var import_design_system = require("@intlayer/design-system");
 var import_hooks = require("@intlayer/design-system/hooks");
 var import_react = require("react");
-var import_useDictionaryListDrawer = require('../DictionaryListDrawer/useDictionaryListDrawer.cjs');
+var import_react_intlayer = require("react-intlayer");
+var import_shallow = require("zustand/shallow");
+var import_dictionaryListDrawerIdentifier = require('../DictionaryListDrawer/dictionaryListDrawerIdentifier.cjs');
 var import_useDictionaryEditionDrawer = require('./useDictionaryEditionDrawer.cjs');
 const DictionaryEditionDrawerContent = ({ locale, identifier, handleOnBack }) => {
   const [keyPathEditionModal, setKeyPathEditionModal] = (0, import_react.useState)(null);
@@ -53,7 +55,11 @@ const DictionaryEditionDrawerContent = ({ locale, identifier, handleOnBack }) =>
         isOpen: keyPathEditionModal !== null,
         onClose: () => setKeyPathEditionModal(null),
         hasCloseButton: true,
-        title: "Edit field",
+        title: (0, import_react_intlayer.t)({
+          en: "Edit field",
+          fr: "Modifier le champ",
+          es: "Editar campo"
+        }),
         size: "xl",
         transparency: "lg",
         children: dictionary && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
@@ -83,7 +89,9 @@ const DictionaryEditionDrawer = ({
 }) => {
   const id = (0, import_useDictionaryEditionDrawer.getDrawerIdentifier)(dictionaryId);
   const { focusedContent, close } = (0, import_useDictionaryEditionDrawer.useDictionaryEditionDrawer)(dictionaryId);
-  const { open: openDictionaryListDrawer } = (0, import_useDictionaryListDrawer.useDictionaryListDrawer)();
+  const { openDictionaryListDrawer } = (0, import_design_system.useRightDrawerStore)((s) => ({
+    openDictionaryListDrawer: () => s.open(import_dictionaryListDrawerIdentifier.dictionaryListDrawerIdentifier)
+  }));
   const handleOnBack = () => {
     close();
     openDictionaryListDrawer();
@@ -103,7 +111,11 @@ const DictionaryEditionDrawer = ({
       ),
       backButton: {
         onBack: handleOnBack,
-        text: "Dictionary list"
+        text: (0, import_react_intlayer.t)({
+          en: "Dictionary list",
+          fr: "Liste des dictionnaires",
+          es: "Lista de diccionarios"
+        })
       },
       children: focusedContent && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
         DictionaryEditionDrawerContent,
@@ -118,7 +130,9 @@ const DictionaryEditionDrawer = ({
   );
 };
 const DictionaryEditionDrawerController = ({ locale, localeList, setLocale }) => {
-  const focusedContent = (0, import_design_system.useEditionPanelStore)((s) => s.focusedContent);
+  const focusedContent = (0, import_design_system.useEditionPanelStore)(
+    (0, import_shallow.useShallow)((s) => s.focusedContent)
+  );
   const dictionaryId = focusedContent?.dictionaryId;
   if (!dictionaryId) {
     return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, {});

package/dist/cjs/DictionaryEditionDrawer/DictionaryEditionDrawer.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/DictionaryEditionDrawer/DictionaryEditionDrawer.tsx"],"sourcesContent":["'use client';\n\nimport type { Locales } from '@intlayer/config/client';\nimport type { Dictionary, KeyPath } from '@intlayer/core';\nimport {\n  RightDrawer,\n  DictionaryEditor,\n  LocaleSwitcher,\n  Modal,\n  useEditionPanelStore,\n  DictionaryFieldEditor,\n} from '@intlayer/design-system';\nimport { useGetAllDictionaries } from '@intlayer/design-system/hooks';\nimport { useCallback, useEffect, useState, type FC } from 'react';\nimport { useDictionaryListDrawer } from '../DictionaryListDrawer/useDictionaryListDrawer';\nimport {\n  type FileContent as FileContentWithDictionaryPath,\n  useDictionaryEditionDrawer,\n  getDrawerIdentifier,\n} from './useDictionaryEditionDrawer';\n\ntype DictionaryEditionDrawerContentProps = {\n  focusedContent: FileContentWithDictionaryPath;\n  locale: Locales;\n  identifier: string;\n  handleOnBack: () => void;\n};\n\nexport const DictionaryEditionDrawerContent: FC<\n  DictionaryEditionDrawerContentProps\n> = ({ locale, identifier, handleOnBack }) => {\n  const [keyPathEditionModal, setKeyPathEditionModal] = useState<\n    KeyPath[] | null\n  >(null);\n  const { setDictionariesRecord, focusedContent } =\n    useDictionaryEditionDrawer(identifier);\n  const { all: dictionaries } = useGetAllDictionaries();\n\n  const onClickDictionaryList = useCallback(() => {\n    setKeyPathEditionModal(null);\n    handleOnBack();\n  }, [handleOnBack]);\n\n  useEffect(() => {\n    if (dictionaries) {\n      setDictionariesRecord(dictionaries);\n    }\n  }, [setDictionariesRecord, dictionaries]);\n\n  const dictionaryId = focusedContent?.dictionaryId;\n\n  if (!dictionaryId) return <>No dictionary focused</>;\n\n  const dictionary: Dictionary = dictionaries[dictionaryId];\n\n  return (\n    <>\n      <Modal\n        isOpen={keyPathEditionModal !== null}\n        onClose={() => setKeyPathEditionModal(null)}\n        hasCloseButton\n        title=\"Edit field\"\n        size=\"xl\"\n        transparency=\"lg\"\n      >\n        {dictionary && (\n          <DictionaryFieldEditor\n            dictionary={dictionary}\n            onClickDictionaryList={onClickDictionaryList}\n          />\n        )}\n      </Modal>\n      <DictionaryEditor\n        dictionary={dictionary}\n        locale={locale}\n        onClickEdit={setKeyPathEditionModal}\n      />\n    </>\n  );\n};\n\ntype DictionaryEditionDrawerProps = DictionaryEditionDrawerControllerProps & {\n  dictionaryId: string;\n};\n\nexport const DictionaryEditionDrawer: FC<DictionaryEditionDrawerProps> = ({\n  locale,\n  localeList,\n  setLocale,\n  dictionaryId,\n}) => {\n  const id = getDrawerIdentifier(dictionaryId);\n\n  const { focusedContent, close } = useDictionaryEditionDrawer(dictionaryId);\n  const { open: openDictionaryListDrawer } = useDictionaryListDrawer();\n\n  const handleOnBack = () => {\n    close();\n    openDictionaryListDrawer();\n  };\n\n  return (\n    <RightDrawer\n      title={dictionaryId}\n      identifier={id}\n      header={\n        <LocaleSwitcher\n          setLocale={setLocale}\n          locale={locale}\n          localeList={localeList}\n        />\n      }\n      backButton={{\n        onBack: handleOnBack,\n        text: 'Dictionary list',\n      }}\n    >\n      {focusedContent && (\n        <DictionaryEditionDrawerContent\n          focusedContent={focusedContent}\n          locale={locale}\n          identifier={id}\n          handleOnBack={handleOnBack}\n        />\n      )}\n    </RightDrawer>\n  );\n};\n\ntype DictionaryEditionDrawerControllerProps = {\n  locale: Locales;\n  localeList: Locales[];\n  setLocale: (locale: Locales) => void;\n};\n\nexport const DictionaryEditionDrawerController: FC<\n  DictionaryEditionDrawerControllerProps\n> = ({ locale, localeList, setLocale }) => {\n  const focusedContent = useEditionPanelStore((s) => s.focusedContent);\n  const dictionaryId: string | undefined = focusedContent?.dictionaryId;\n\n  if (!dictionaryId) {\n    return <></>;\n  }\n\n  return (\n    <DictionaryEditionDrawer\n      locale={locale}\n      localeList={localeList}\n      setLocale={setLocale}\n      dictionaryId={dictionaryId}\n    />\n  );\n};\n"],"mappings":";;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAmD4B;AA/C5B,2BAOO;AACP,mBAAsC;AACtC,mBAA0D;AAC1D,qCAAwC;AACxC,wCAIO;AASA,MAAM,iCAET,CAAC,EAAE,QAAQ,YAAY,aAAa,MAAM;AAC5C,QAAM,CAAC,qBAAqB,sBAAsB,QAAI,uBAEpD,IAAI;AACN,QAAM,EAAE,uBAAuB,eAAe,QAC5C,8DAA2B,UAAU;AACvC,QAAM,EAAE,KAAK,aAAa,QAAI,oCAAsB;AAEpD,QAAM,4BAAwB,0BAAY,MAAM;AAC9C,2BAAuB,IAAI;AAC3B,iBAAa;AAAA,EACf,GAAG,CAAC,YAAY,CAAC;AAEjB,8BAAU,MAAM;AACd,QAAI,cAAc;AAChB,4BAAsB,YAAY;AAAA,IACpC;AAAA,EACF,GAAG,CAAC,uBAAuB,YAAY,CAAC;AAExC,QAAM,eAAe,gBAAgB;AAErC,MAAI,CAAC,aAAc,QAAO,2EAAE,mCAAqB;AAEjD,QAAM,aAAyB,aAAa,YAAY;AAExD,SACE,4EACE;AAAA;AAAA,MAAC;AAAA;AAAA,QACC,QAAQ,wBAAwB;AAAA,QAChC,SAAS,MAAM,uBAAuB,IAAI;AAAA,QAC1C,gBAAc;AAAA,QACd,OAAM;AAAA,QACN,MAAK;AAAA,QACL,cAAa;AAAA,QAEZ,wBACC;AAAA,UAAC;AAAA;AAAA,YACC;AAAA,YACA;AAAA;AAAA,QACF;AAAA;AAAA,IAEJ;AAAA,IACA;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA;AAAA,QACA,aAAa;AAAA;AAAA,IACf;AAAA,KACF;AAEJ;AAMO,MAAM,0BAA4D,CAAC;AAAA,EACxE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAAM;AACJ,QAAM,SAAK,uDAAoB,YAAY;AAE3C,QAAM,EAAE,gBAAgB,MAAM,QAAI,8DAA2B,YAAY;AACzE,QAAM,EAAE,MAAM,yBAAyB,QAAI,wDAAwB;AAEnE,QAAM,eAAe,MAAM;AACzB,UAAM;AACN,6BAAyB;AAAA,EAC3B;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACC,OAAO;AAAA,MACP,YAAY;AAAA,MACZ,QACE;AAAA,QAAC;AAAA;AAAA,UACC;AAAA,UACA;AAAA,UACA;AAAA;AAAA,MACF;AAAA,MAEF,YAAY;AAAA,QACV,QAAQ;AAAA,QACR,MAAM;AAAA,MACR;AAAA,MAEC,4BACC;AAAA,QAAC;AAAA;AAAA,UACC;AAAA,UACA;AAAA,UACA,YAAY;AAAA,UACZ;AAAA;AAAA,MACF;AAAA;AAAA,EAEJ;AAEJ;AAQO,MAAM,oCAET,CAAC,EAAE,QAAQ,YAAY,UAAU,MAAM;AACzC,QAAM,qBAAiB,2CAAqB,CAAC,MAAM,EAAE,cAAc;AACnE,QAAM,eAAmC,gBAAgB;AAEzD,MAAI,CAAC,cAAc;AACjB,WAAO,2EAAE;AAAA,EACX;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA;AAAA,EACF;AAEJ;","names":[]}
+{"version":3,"sources":["../../../src/DictionaryEditionDrawer/DictionaryEditionDrawer.tsx"],"sourcesContent":["'use client';\n\nimport type { Locales } from '@intlayer/config/client';\nimport type { Dictionary, KeyPath } from '@intlayer/core';\nimport {\n  RightDrawer,\n  DictionaryEditor,\n  LocaleSwitcher,\n  Modal,\n  useEditionPanelStore,\n  DictionaryFieldEditor,\n  useRightDrawerStore,\n} from '@intlayer/design-system';\nimport { useGetAllDictionaries } from '@intlayer/design-system/hooks';\nimport { useCallback, useEffect, useState, type FC } from 'react';\nimport { t } from 'react-intlayer';\nimport { useShallow } from 'zustand/shallow';\nimport { dictionaryListDrawerIdentifier } from '../DictionaryListDrawer/dictionaryListDrawerIdentifier';\nimport {\n  type FileContent as FileContentWithDictionaryPath,\n  useDictionaryEditionDrawer,\n  getDrawerIdentifier,\n} from './useDictionaryEditionDrawer';\n\ntype DictionaryEditionDrawerContentProps = {\n  focusedContent: FileContentWithDictionaryPath;\n  locale: Locales;\n  identifier: string;\n  handleOnBack: () => void;\n};\n\nexport const DictionaryEditionDrawerContent: FC<\n  DictionaryEditionDrawerContentProps\n> = ({ locale, identifier, handleOnBack }) => {\n  const [keyPathEditionModal, setKeyPathEditionModal] = useState<\n    KeyPath[] | null\n  >(null);\n  const { setDictionariesRecord, focusedContent } =\n    useDictionaryEditionDrawer(identifier);\n  const { all: dictionaries } = useGetAllDictionaries();\n\n  const onClickDictionaryList = useCallback(() => {\n    setKeyPathEditionModal(null);\n    handleOnBack();\n  }, [handleOnBack]);\n\n  useEffect(() => {\n    if (dictionaries) {\n      setDictionariesRecord(dictionaries);\n    }\n  }, [setDictionariesRecord, dictionaries]);\n\n  const dictionaryId = focusedContent?.dictionaryId;\n\n  if (!dictionaryId) return <>No dictionary focused</>;\n\n  const dictionary: Dictionary = dictionaries[dictionaryId];\n\n  return (\n    <>\n      <Modal\n        isOpen={keyPathEditionModal !== null}\n        onClose={() => setKeyPathEditionModal(null)}\n        hasCloseButton\n        title={t({\n          en: 'Edit field',\n          fr: 'Modifier le champ',\n          es: 'Editar campo',\n        })}\n        size=\"xl\"\n        transparency=\"lg\"\n      >\n        {dictionary && (\n          <DictionaryFieldEditor\n            dictionary={dictionary}\n            onClickDictionaryList={onClickDictionaryList}\n          />\n        )}\n      </Modal>\n      <DictionaryEditor\n        dictionary={dictionary}\n        locale={locale}\n        onClickEdit={setKeyPathEditionModal}\n      />\n    </>\n  );\n};\n\ntype DictionaryEditionDrawerProps = DictionaryEditionDrawerControllerProps & {\n  dictionaryId: string;\n};\n\nexport const DictionaryEditionDrawer: FC<DictionaryEditionDrawerProps> = ({\n  locale,\n  localeList,\n  setLocale,\n  dictionaryId,\n}) => {\n  const id = getDrawerIdentifier(dictionaryId);\n\n  const { focusedContent, close } = useDictionaryEditionDrawer(dictionaryId);\n  const { openDictionaryListDrawer } = useRightDrawerStore((s) => ({\n    openDictionaryListDrawer: () => s.open(dictionaryListDrawerIdentifier),\n  }));\n\n  const handleOnBack = () => {\n    close();\n    openDictionaryListDrawer();\n  };\n\n  return (\n    <RightDrawer\n      title={dictionaryId}\n      identifier={id}\n      header={\n        <LocaleSwitcher\n          setLocale={setLocale}\n          locale={locale}\n          localeList={localeList}\n        />\n      }\n      backButton={{\n        onBack: handleOnBack,\n        text: t({\n          en: 'Dictionary list',\n          fr: 'Liste des dictionnaires',\n          es: 'Lista de diccionarios',\n        }),\n      }}\n    >\n      {focusedContent && (\n        <DictionaryEditionDrawerContent\n          focusedContent={focusedContent}\n          locale={locale}\n          identifier={id}\n          handleOnBack={handleOnBack}\n        />\n      )}\n    </RightDrawer>\n  );\n};\n\ntype DictionaryEditionDrawerControllerProps = {\n  locale: Locales;\n  localeList: Locales[];\n  setLocale: (locale: Locales) => void;\n};\n\nexport const DictionaryEditionDrawerController: FC<\n  DictionaryEditionDrawerControllerProps\n> = ({ locale, localeList, setLocale }) => {\n  const focusedContent = useEditionPanelStore(\n    useShallow((s) => s.focusedContent)\n  );\n  const dictionaryId: string | undefined = focusedContent?.dictionaryId;\n\n  if (!dictionaryId) {\n    return <></>;\n  }\n\n  return (\n    <DictionaryEditionDrawer\n      locale={locale}\n      localeList={localeList}\n      setLocale={setLocale}\n      dictionaryId={dictionaryId}\n    />\n  );\n};\n"],"mappings":";;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAsD4B;AAlD5B,2BAQO;AACP,mBAAsC;AACtC,mBAA0D;AAC1D,4BAAkB;AAClB,qBAA2B;AAC3B,4CAA+C;AAC/C,wCAIO;AASA,MAAM,iCAET,CAAC,EAAE,QAAQ,YAAY,aAAa,MAAM;AAC5C,QAAM,CAAC,qBAAqB,sBAAsB,QAAI,uBAEpD,IAAI;AACN,QAAM,EAAE,uBAAuB,eAAe,QAC5C,8DAA2B,UAAU;AACvC,QAAM,EAAE,KAAK,aAAa,QAAI,oCAAsB;AAEpD,QAAM,4BAAwB,0BAAY,MAAM;AAC9C,2BAAuB,IAAI;AAC3B,iBAAa;AAAA,EACf,GAAG,CAAC,YAAY,CAAC;AAEjB,8BAAU,MAAM;AACd,QAAI,cAAc;AAChB,4BAAsB,YAAY;AAAA,IACpC;AAAA,EACF,GAAG,CAAC,uBAAuB,YAAY,CAAC;AAExC,QAAM,eAAe,gBAAgB;AAErC,MAAI,CAAC,aAAc,QAAO,2EAAE,mCAAqB;AAEjD,QAAM,aAAyB,aAAa,YAAY;AAExD,SACE,4EACE;AAAA;AAAA,MAAC;AAAA;AAAA,QACC,QAAQ,wBAAwB;AAAA,QAChC,SAAS,MAAM,uBAAuB,IAAI;AAAA,QAC1C,gBAAc;AAAA,QACd,WAAO,yBAAE;AAAA,UACP,IAAI;AAAA,UACJ,IAAI;AAAA,UACJ,IAAI;AAAA,QACN,CAAC;AAAA,QACD,MAAK;AAAA,QACL,cAAa;AAAA,QAEZ,wBACC;AAAA,UAAC;AAAA;AAAA,YACC;AAAA,YACA;AAAA;AAAA,QACF;AAAA;AAAA,IAEJ;AAAA,IACA;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA;AAAA,QACA,aAAa;AAAA;AAAA,IACf;AAAA,KACF;AAEJ;AAMO,MAAM,0BAA4D,CAAC;AAAA,EACxE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAAM;AACJ,QAAM,SAAK,uDAAoB,YAAY;AAE3C,QAAM,EAAE,gBAAgB,MAAM,QAAI,8DAA2B,YAAY;AACzE,QAAM,EAAE,yBAAyB,QAAI,0CAAoB,CAAC,OAAO;AAAA,IAC/D,0BAA0B,MAAM,EAAE,KAAK,oEAA8B;AAAA,EACvE,EAAE;AAEF,QAAM,eAAe,MAAM;AACzB,UAAM;AACN,6BAAyB;AAAA,EAC3B;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACC,OAAO;AAAA,MACP,YAAY;AAAA,MACZ,QACE;AAAA,QAAC;AAAA;AAAA,UACC;AAAA,UACA;AAAA,UACA;AAAA;AAAA,MACF;AAAA,MAEF,YAAY;AAAA,QACV,QAAQ;AAAA,QACR,UAAM,yBAAE;AAAA,UACN,IAAI;AAAA,UACJ,IAAI;AAAA,UACJ,IAAI;AAAA,QACN,CAAC;AAAA,MACH;AAAA,MAEC,4BACC;AAAA,QAAC;AAAA;AAAA,UACC;AAAA,UACA;AAAA,UACA,YAAY;AAAA,UACZ;AAAA;AAAA,MACF;AAAA;AAAA,EAEJ;AAEJ;AAQO,MAAM,oCAET,CAAC,EAAE,QAAQ,YAAY,UAAU,MAAM;AACzC,QAAM,qBAAiB;AAAA,QACrB,2BAAW,CAAC,MAAM,EAAE,cAAc;AAAA,EACpC;AACA,QAAM,eAAmC,gBAAgB;AAEzD,MAAI,CAAC,cAAc;AACjB,WAAO,2EAAE;AAAA,EACX;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA;AAAA,EACF;AAEJ;","names":[]}

package/dist/cjs/DictionaryEditionDrawer/useDictionaryEditionDrawer.cjs

@@ -19,72 +19,61 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 var useDictionaryEditionDrawer_exports = {};
 __export(useDictionaryEditionDrawer_exports, {
   getDrawerIdentifier: () => getDrawerIdentifier,
-  useDictionaryEditionDrawer: () => useDictionaryEditionDrawer,
-  useDictionaryEditionDrawerControl: () => useDictionaryEditionDrawerControl
+  useDictionaryEditionDrawer: () => useDictionaryEditionDrawer
 });
 module.exports = __toCommonJS(useDictionaryEditionDrawer_exports);
 var import_design_system = require("@intlayer/design-system");
+var import_react = require("react");
+var import_shallow = require("zustand/shallow");
 const getDrawerIdentifier = (dictionaryId) => `dictionary_edition_${dictionaryId}`;
 const useDictionaryEditionDrawer = (dictionaryId) => {
   const id = getDrawerIdentifier(dictionaryId);
-  const { isOpen, open, close } = (0, import_design_system.useRightDrawerStore)(id)();
-  const { setDictionariesRecord, getEditedContentValue } = (0, import_design_system.useEditedContentStore)((s) => ({
-    setDictionariesRecord: s.setDictionariesRecord,
-    getEditedContentValue: s.getEditedContentValue
-  }));
-  const { setFocusedContent, focusedContent } = (0, import_design_system.useEditionPanelStore)((s) => ({
-    focusedContent: s.focusedContent,
-    setFocusedContent: s.setFocusedContent
-  }));
-  const openDictionaryEditionDrawer = ({
-    dictionaryId: dictionaryId2,
-    dictionaryPath,
-    keyPath = []
-  }) => {
-    setFocusedContent({
+  const { isOpenDrawer, openDrawer, closeDrawer } = (0, import_design_system.useRightDrawerStore)(
+    (0, import_shallow.useShallow)((e) => ({
+      isOpenDrawer: e.isOpen,
+      openDrawer: e.open,
+      closeDrawer: e.close
+    }))
+  );
+  const { setDictionariesRecord, getEditedContentValue } = (0, import_design_system.useEditedContentStore)(
+    (0, import_shallow.useShallow)((s) => ({
+      setDictionariesRecord: s.setDictionariesRecord,
+      getEditedContentValue: s.getEditedContentValue
+    }))
+  );
+  const { setFocusedContent, focusedContent } = (0, import_design_system.useEditionPanelStore)(
+    (0, import_shallow.useShallow)((s) => ({
+      focusedContent: s.focusedContent,
+      setFocusedContent: s.setFocusedContent
+    }))
+  );
+  const openDictionaryEditionDrawer = (0, import_react.useCallback)(
+    ({
       dictionaryId: dictionaryId2,
       dictionaryPath,
-      keyPath
-    });
-    open();
-  };
+      keyPath = []
+    }) => {
+      setFocusedContent({
+        dictionaryId: dictionaryId2,
+        dictionaryPath,
+        keyPath
+      });
+      openDrawer(id);
+    },
+    [openDrawer, setFocusedContent]
+  );
   return {
-    isOpen,
+    isOpen: isOpenDrawer(id),
     focusedContent,
     setDictionariesRecord,
     getEditedContentValue,
     open: openDictionaryEditionDrawer,
-    close
-  };
-};
-const useDictionaryEditionDrawerControl = () => {
-  const setFocusedContent = (0, import_design_system.useEditionPanelStore)((s) => s.setFocusedContent);
-  const open = ({
-    dictionaryId,
-    dictionaryPath,
-    keyPath = []
-  }) => {
-    setFocusedContent({
-      dictionaryId,
-      dictionaryPath,
-      keyPath
-    });
-    const id = getDrawerIdentifier(dictionaryId);
-    (0, import_design_system.useRightDrawerStore)(id).getState().open();
-  };
-  const close = (dictionaryId) => {
-    const id = getDrawerIdentifier(dictionaryId);
-    (0, import_design_system.useRightDrawerStore)(id).getState().close();
-  };
-  return {
-    open,
-    close
+    close: () => closeDrawer(id)
   };
 };
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   getDrawerIdentifier,
-  useDictionaryEditionDrawer,
-  useDictionaryEditionDrawerControl
+  useDictionaryEditionDrawer
 });
 //# sourceMappingURL=useDictionaryEditionDrawer.cjs.map

package/dist/cjs/DictionaryEditionDrawer/useDictionaryEditionDrawer.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/DictionaryEditionDrawer/useDictionaryEditionDrawer.ts"],"sourcesContent":["import type { Dictionary, DictionaryValue, KeyPath } from '@intlayer/core';\nimport {\n  useRightDrawerStore,\n  useEditedContentStore,\n  useEditionPanelStore,\n} from '@intlayer/design-system';\n\nexport const getDrawerIdentifier = (dictionaryId: string) =>\n  `dictionary_edition_${dictionaryId}`;\n\ntype DictionaryId = string;\ntype DictionaryPath = string;\n\nexport type FileContent = {\n  dictionaryPath?: DictionaryPath;\n  dictionaryId: string;\n  keyPath?: KeyPath[];\n};\n\ntype DictionaryEditionDrawer = {\n  focusedContent: FileContent | null;\n  isOpen: boolean;\n  open: (content: FileContent) => void;\n  close: () => void;\n  setDictionariesRecord: (\n    dictionariesRecord: Record<DictionaryId, Dictionary>\n  ) => void;\n  getEditedContentValue: (\n    dictionaryId: DictionaryId,\n    keyPath: KeyPath[]\n  ) => DictionaryValue | undefined;\n};\n\ntype OpenDictionaryEditionDrawerProps = {\n  dictionaryId: string;\n  dictionaryPath?: string;\n  keyPath?: KeyPath[];\n};\n\nexport const useDictionaryEditionDrawer = (\n  dictionaryId: string\n): DictionaryEditionDrawer => {\n  const id = getDrawerIdentifier(dictionaryId);\n  const { isOpen, open, close } = useRightDrawerStore(id)();\n  const { setDictionariesRecord, getEditedContentValue } =\n    useEditedContentStore((s) => ({\n      setDictionariesRecord: s.setDictionariesRecord,\n      getEditedContentValue: s.getEditedContentValue,\n    }));\n  const { setFocusedContent, focusedContent } = useEditionPanelStore((s) => ({\n    focusedContent: s.focusedContent,\n    setFocusedContent: s.setFocusedContent,\n  }));\n\n  const openDictionaryEditionDrawer = ({\n    dictionaryId,\n    dictionaryPath,\n    keyPath = [],\n  }: OpenDictionaryEditionDrawerProps) => {\n    setFocusedContent({\n      dictionaryId,\n      dictionaryPath,\n      keyPath,\n    });\n\n    open();\n  };\n\n  return {\n    isOpen,\n    focusedContent,\n    setDictionariesRecord,\n    getEditedContentValue,\n    open: openDictionaryEditionDrawer,\n    close,\n  };\n};\n\ntype DictionaryEditionDrawerControl = {\n  open: (content: FileContent) => void;\n  close: (dictionaryId: string) => void;\n};\n\nexport const useDictionaryEditionDrawerControl =\n  (): DictionaryEditionDrawerControl => {\n    const setFocusedContent = useEditionPanelStore((s) => s.setFocusedContent);\n\n    const open = ({\n      dictionaryId,\n      dictionaryPath,\n      keyPath = [],\n    }: OpenDictionaryEditionDrawerProps) => {\n      setFocusedContent({\n        dictionaryId,\n        dictionaryPath,\n        keyPath,\n      });\n\n      const id = getDrawerIdentifier(dictionaryId);\n\n      useRightDrawerStore(id).getState().open();\n    };\n\n    const close = (dictionaryId: string) => {\n      const id = getDrawerIdentifier(dictionaryId);\n\n      useRightDrawerStore(id).getState().close();\n    };\n\n    return {\n      open,\n      close,\n    };\n  };\n"],"mappings":";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AACA,2BAIO;AAEA,MAAM,sBAAsB,CAAC,iBAClC,sBAAsB,YAAY;AA+B7B,MAAM,6BAA6B,CACxC,iBAC4B;AAC5B,QAAM,KAAK,oBAAoB,YAAY;AAC3C,QAAM,EAAE,QAAQ,MAAM,MAAM,QAAI,0CAAoB,EAAE,EAAE;AACxD,QAAM,EAAE,uBAAuB,sBAAsB,QACnD,4CAAsB,CAAC,OAAO;AAAA,IAC5B,uBAAuB,EAAE;AAAA,IACzB,uBAAuB,EAAE;AAAA,EAC3B,EAAE;AACJ,QAAM,EAAE,mBAAmB,eAAe,QAAI,2CAAqB,CAAC,OAAO;AAAA,IACzE,gBAAgB,EAAE;AAAA,IAClB,mBAAmB,EAAE;AAAA,EACvB,EAAE;AAEF,QAAM,8BAA8B,CAAC;AAAA,IACnC,cAAAA;AAAA,IACA;AAAA,IACA,UAAU,CAAC;AAAA,EACb,MAAwC;AACtC,sBAAkB;AAAA,MAChB,cAAAA;AAAA,MACA;AAAA,MACA;AAAA,IACF,CAAC;AAED,SAAK;AAAA,EACP;AAEA,SAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,MAAM;AAAA,IACN;AAAA,EACF;AACF;AAOO,MAAM,oCACX,MAAsC;AACpC,QAAM,wBAAoB,2CAAqB,CAAC,MAAM,EAAE,iBAAiB;AAEzE,QAAM,OAAO,CAAC;AAAA,IACZ;AAAA,IACA;AAAA,IACA,UAAU,CAAC;AAAA,EACb,MAAwC;AACtC,sBAAkB;AAAA,MAChB;AAAA,MACA;AAAA,MACA;AAAA,IACF,CAAC;AAED,UAAM,KAAK,oBAAoB,YAAY;AAE3C,kDAAoB,EAAE,EAAE,SAAS,EAAE,KAAK;AAAA,EAC1C;AAEA,QAAM,QAAQ,CAAC,iBAAyB;AACtC,UAAM,KAAK,oBAAoB,YAAY;AAE3C,kDAAoB,EAAE,EAAE,SAAS,EAAE,MAAM;AAAA,EAC3C;AAEA,SAAO;AAAA,IACL;AAAA,IACA;AAAA,EACF;AACF;","names":["dictionaryId"]}
+{"version":3,"sources":["../../../src/DictionaryEditionDrawer/useDictionaryEditionDrawer.ts"],"sourcesContent":["import type { Dictionary, DictionaryValue, KeyPath } from '@intlayer/core';\nimport {\n  useRightDrawerStore,\n  useEditedContentStore,\n  useEditionPanelStore,\n} from '@intlayer/design-system';\nimport { useCallback } from 'react';\nimport { useShallow } from 'zustand/shallow';\n\nexport const getDrawerIdentifier = (dictionaryId: string) =>\n  `dictionary_edition_${dictionaryId}`;\n\ntype DictionaryId = string;\ntype DictionaryPath = string;\n\nexport type FileContent = {\n  dictionaryPath?: DictionaryPath;\n  dictionaryId: string;\n  keyPath?: KeyPath[];\n};\n\ntype DictionaryEditionDrawer = {\n  focusedContent: FileContent | null;\n  isOpen: boolean;\n  open: (content: FileContent) => void;\n  close: () => void;\n  setDictionariesRecord: (\n    dictionariesRecord: Record<DictionaryId, Dictionary>\n  ) => void;\n  getEditedContentValue: (\n    dictionaryId: DictionaryId,\n    keyPath: KeyPath[]\n  ) => DictionaryValue | undefined;\n};\n\ntype OpenDictionaryEditionDrawerProps = {\n  dictionaryId: string;\n  dictionaryPath?: string;\n  keyPath?: KeyPath[];\n};\n\nexport const useDictionaryEditionDrawer = (\n  dictionaryId: string\n): DictionaryEditionDrawer => {\n  const id = getDrawerIdentifier(dictionaryId);\n  const { isOpenDrawer, openDrawer, closeDrawer } = useRightDrawerStore(\n    useShallow((e) => ({\n      isOpenDrawer: e.isOpen,\n      openDrawer: e.open,\n      closeDrawer: e.close,\n    }))\n  );\n  const { setDictionariesRecord, getEditedContentValue } =\n    useEditedContentStore(\n      useShallow((s) => ({\n        setDictionariesRecord: s.setDictionariesRecord,\n        getEditedContentValue: s.getEditedContentValue,\n      }))\n    );\n  const { setFocusedContent, focusedContent } = useEditionPanelStore(\n    useShallow((s) => ({\n      focusedContent: s.focusedContent,\n      setFocusedContent: s.setFocusedContent,\n    }))\n  );\n\n  const openDictionaryEditionDrawer = useCallback(\n    ({\n      dictionaryId,\n      dictionaryPath,\n      keyPath = [],\n    }: OpenDictionaryEditionDrawerProps) => {\n      setFocusedContent({\n        dictionaryId,\n        dictionaryPath,\n        keyPath,\n      });\n\n      openDrawer(id);\n    },\n    [openDrawer, setFocusedContent]\n  );\n\n  return {\n    isOpen: isOpenDrawer(id),\n    focusedContent,\n    setDictionariesRecord,\n    getEditedContentValue,\n    open: openDictionaryEditionDrawer,\n    close: () => closeDrawer(id),\n  };\n};\n"],"mappings":";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AACA,2BAIO;AACP,mBAA4B;AAC5B,qBAA2B;AAEpB,MAAM,sBAAsB,CAAC,iBAClC,sBAAsB,YAAY;AA+B7B,MAAM,6BAA6B,CACxC,iBAC4B;AAC5B,QAAM,KAAK,oBAAoB,YAAY;AAC3C,QAAM,EAAE,cAAc,YAAY,YAAY,QAAI;AAAA,QAChD,2BAAW,CAAC,OAAO;AAAA,MACjB,cAAc,EAAE;AAAA,MAChB,YAAY,EAAE;AAAA,MACd,aAAa,EAAE;AAAA,IACjB,EAAE;AAAA,EACJ;AACA,QAAM,EAAE,uBAAuB,sBAAsB,QACnD;AAAA,QACE,2BAAW,CAAC,OAAO;AAAA,MACjB,uBAAuB,EAAE;AAAA,MACzB,uBAAuB,EAAE;AAAA,IAC3B,EAAE;AAAA,EACJ;AACF,QAAM,EAAE,mBAAmB,eAAe,QAAI;AAAA,QAC5C,2BAAW,CAAC,OAAO;AAAA,MACjB,gBAAgB,EAAE;AAAA,MAClB,mBAAmB,EAAE;AAAA,IACvB,EAAE;AAAA,EACJ;AAEA,QAAM,kCAA8B;AAAA,IAClC,CAAC;AAAA,MACC,cAAAA;AAAA,MACA;AAAA,MACA,UAAU,CAAC;AAAA,IACb,MAAwC;AACtC,wBAAkB;AAAA,QAChB,cAAAA;AAAA,QACA;AAAA,QACA;AAAA,MACF,CAAC;AAED,iBAAW,EAAE;AAAA,IACf;AAAA,IACA,CAAC,YAAY,iBAAiB;AAAA,EAChC;AAEA,SAAO;AAAA,IACL,QAAQ,aAAa,EAAE;AAAA,IACvB;AAAA,IACA;AAAA,IACA;AAAA,IACA,MAAM;AAAA,IACN,OAAO,MAAM,YAAY,EAAE;AAAA,EAC7B;AACF;","names":["dictionaryId"]}

package/dist/cjs/DictionaryListDrawer/DictionaryListDrawer.cjs

@@ -1,4 +1,5 @@
 "use strict";
+"use client";
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
@@ -25,25 +26,46 @@ var import_jsx_runtime = require("react/jsx-runtime");
 var import_design_system = require("@intlayer/design-system");
 var import_hooks = require("@intlayer/design-system/hooks");
 var import_lucide_react = require("lucide-react");
-var import_DictionaryEditionDrawer = require('../DictionaryEditionDrawer/index.cjs');
-var import_useDictionaryListDrawer = require('./useDictionaryListDrawer.cjs');
+var import_react = require("react");
+var import_shallow = require("zustand/shallow");
+var import_useDictionaryEditionDrawer = require('../DictionaryEditionDrawer/useDictionaryEditionDrawer.cjs');
+var import_dictionaryListDrawerIdentifier = require('./dictionaryListDrawerIdentifier.cjs');
 const DictionaryListDrawer = () => {
   const { all: dictionaries } = (0, import_hooks.useGetAllDictionaries)();
-  const dictionaryKeyList = Object.keys(dictionaries);
-  const { open: openDictionaryEditionDrawer } = (0, import_DictionaryEditionDrawer.useDictionaryEditionDrawerControl)();
-  const { close } = (0, import_useDictionaryListDrawer.useDictionaryListDrawer)();
-  const editedContent = (0, import_design_system.useEditedContentStore)((s) => s.editedContent);
+  const dictionaryKeyList = (0, import_react.useMemo)(
+    () => Object.keys(dictionaries),
+    [dictionaries]
+  );
+  const { closeDrawer, openDrawer } = (0, import_design_system.useRightDrawerStore)(
+    (0, import_shallow.useShallow)((s) => ({
+      closeDrawer: s.close,
+      openDrawer: s.open
+    }))
+  );
+  const editedContent = (0, import_design_system.useEditedContentStore)(
+    (0, import_shallow.useShallow)((s) => s.editedContent)
+  );
+  const setFocusedContent = (0, import_design_system.useEditionPanelStore)(
+    (0, import_shallow.useShallow)((s) => s.setFocusedContent)
+  );
   const handleClickDictionary = (dictionaryId) => {
+    closeDrawer(import_dictionaryListDrawerIdentifier.dictionaryListDrawerIdentifier);
     const { filePath } = dictionaries[dictionaryId];
-    close();
-    openDictionaryEditionDrawer({ dictionaryId, dictionaryPath: filePath });
+    setFocusedContent({
+      dictionaryId,
+      dictionaryPath: filePath
+    });
+    openDrawer((0, import_useDictionaryEditionDrawer.getDrawerIdentifier)(dictionaryId));
   };
-  const isDictionaryEdited = (dictionaryId) => Object.keys(editedContent).includes(dictionaryId);
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+  const isDictionaryEdited = (0, import_react.useCallback)(
+    (dictionaryId) => Object.keys(editedContent).includes(dictionaryId),
+    [editedContent]
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
     import_design_system.RightDrawer,
     {
       title: "Dictionary list",
-      identifier: import_useDictionaryListDrawer.dictionaryListDrawerIdentifier,
+      identifier: import_dictionaryListDrawerIdentifier.dictionaryListDrawerIdentifier,
       children: dictionaryKeyList.map((dictionaryId) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
         import_design_system.Button,
         {
@@ -58,7 +80,7 @@ const DictionaryListDrawer = () => {
         }
       ) }, dictionaryId))
     }
-  );
+  ) });
 };
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {

package/dist/cjs/DictionaryListDrawer/DictionaryListDrawer.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/DictionaryListDrawer/DictionaryListDrawer.tsx"],"sourcesContent":["import type { Locales } from '@intlayer/config/client';\nimport {\n  RightDrawer,\n  Button,\n  useEditedContentStore,\n} from '@intlayer/design-system';\nimport { useGetAllDictionaries } from '@intlayer/design-system/hooks';\nimport { ChevronRight } from 'lucide-react';\nimport type { FC } from 'react';\nimport { useDictionaryEditionDrawerControl } from '../DictionaryEditionDrawer/index';\nimport {\n  dictionaryListDrawerIdentifier,\n  useDictionaryListDrawer,\n} from './useDictionaryListDrawer';\n\nexport const DictionaryListDrawer: FC = () => {\n  const { all: dictionaries } = useGetAllDictionaries();\n  const dictionaryKeyList = Object.keys(dictionaries) as Locales[];\n  const { open: openDictionaryEditionDrawer } =\n    useDictionaryEditionDrawerControl();\n  const { close } = useDictionaryListDrawer();\n  const editedContent = useEditedContentStore((s) => s.editedContent);\n\n  const handleClickDictionary = (dictionaryId: string) => {\n    const { filePath } = dictionaries[dictionaryId];\n\n    close();\n    openDictionaryEditionDrawer({ dictionaryId, dictionaryPath: filePath });\n  };\n\n  const isDictionaryEdited = (dictionaryId: string) =>\n    Object.keys(editedContent).includes(dictionaryId);\n\n  return (\n    <RightDrawer\n      title=\"Dictionary list\"\n      identifier={dictionaryListDrawerIdentifier}\n    >\n      {dictionaryKeyList.map((dictionaryId) => (\n        <div key={dictionaryId}>\n          <Button\n            label={`Open dictionary editor ${dictionaryId}`}\n            onClick={() => handleClickDictionary(dictionaryId)}\n            variant=\"hoverable\"\n            color=\"text\"\n            IconRight={ChevronRight}\n            size=\"md\"\n            isFullWidth\n          >\n            {isDictionaryEdited(dictionaryId)\n              ? `✎ ${dictionaryId}`\n              : dictionaryId}\n          </Button>\n        </div>\n      ))}\n    </RightDrawer>\n  );\n};\n"],"mappings":";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAwCU;AAvCV,2BAIO;AACP,mBAAsC;AACtC,0BAA6B;AAE7B,qCAAkD;AAClD,qCAGO;AAEA,MAAM,uBAA2B,MAAM;AAC5C,QAAM,EAAE,KAAK,aAAa,QAAI,oCAAsB;AACpD,QAAM,oBAAoB,OAAO,KAAK,YAAY;AAClD,QAAM,EAAE,MAAM,4BAA4B,QACxC,kEAAkC;AACpC,QAAM,EAAE,MAAM,QAAI,wDAAwB;AAC1C,QAAM,oBAAgB,4CAAsB,CAAC,MAAM,EAAE,aAAa;AAElE,QAAM,wBAAwB,CAAC,iBAAyB;AACtD,UAAM,EAAE,SAAS,IAAI,aAAa,YAAY;AAE9C,UAAM;AACN,gCAA4B,EAAE,cAAc,gBAAgB,SAAS,CAAC;AAAA,EACxE;AAEA,QAAM,qBAAqB,CAAC,iBAC1B,OAAO,KAAK,aAAa,EAAE,SAAS,YAAY;AAElD,SACE;AAAA,IAAC;AAAA;AAAA,MACC,OAAM;AAAA,MACN,YAAY;AAAA,MAEX,4BAAkB,IAAI,CAAC,iBACtB,4CAAC,SACC;AAAA,QAAC;AAAA;AAAA,UACC,OAAO,0BAA0B,YAAY;AAAA,UAC7C,SAAS,MAAM,sBAAsB,YAAY;AAAA,UACjD,SAAQ;AAAA,UACR,OAAM;AAAA,UACN,WAAW;AAAA,UACX,MAAK;AAAA,UACL,aAAW;AAAA,UAEV,6BAAmB,YAAY,IAC5B,UAAK,YAAY,KACjB;AAAA;AAAA,MACN,KAbQ,YAcV,CACD;AAAA;AAAA,EACH;AAEJ;","names":[]}
+{"version":3,"sources":["../../../src/DictionaryListDrawer/DictionaryListDrawer.tsx"],"sourcesContent":["'use client';\n\nimport { Locales } from '@intlayer/config';\nimport {\n  RightDrawer,\n  Button,\n  useEditedContentStore,\n  useEditionPanelStore,\n  useRightDrawerStore,\n} from '@intlayer/design-system';\nimport { useGetAllDictionaries } from '@intlayer/design-system/hooks';\nimport { ChevronRight } from 'lucide-react';\nimport { useCallback, useMemo, FC } from 'react';\nimport { useShallow } from 'zustand/shallow';\nimport { getDrawerIdentifier } from '../DictionaryEditionDrawer/useDictionaryEditionDrawer';\nimport { dictionaryListDrawerIdentifier } from './dictionaryListDrawerIdentifier';\n\nexport const DictionaryListDrawer: FC = () => {\n  const { all: dictionaries } = useGetAllDictionaries();\n  const dictionaryKeyList = useMemo(\n    () => Object.keys(dictionaries) as Locales[],\n    [dictionaries]\n  );\n\n  const { closeDrawer, openDrawer } = useRightDrawerStore(\n    useShallow((s) => ({\n      closeDrawer: s.close,\n      openDrawer: s.open,\n    }))\n  );\n\n  const editedContent = useEditedContentStore(\n    useShallow((s) => s.editedContent)\n  );\n  const setFocusedContent = useEditionPanelStore(\n    useShallow((s) => s.setFocusedContent)\n  );\n\n  const handleClickDictionary = (dictionaryId: string) => {\n    closeDrawer(dictionaryListDrawerIdentifier);\n\n    const { filePath } = dictionaries[dictionaryId];\n    setFocusedContent({\n      dictionaryId,\n      dictionaryPath: filePath,\n    });\n\n    openDrawer(getDrawerIdentifier(dictionaryId));\n  };\n\n  const isDictionaryEdited = useCallback(\n    (dictionaryId: string) => Object.keys(editedContent).includes(dictionaryId),\n    [editedContent]\n  );\n\n  return (\n    <>\n      <RightDrawer\n        title=\"Dictionary list\"\n        identifier={dictionaryListDrawerIdentifier}\n      >\n        {dictionaryKeyList.map((dictionaryId) => (\n          <div key={dictionaryId}>\n            <Button\n              label={`Open dictionary editor ${dictionaryId}`}\n              onClick={() => handleClickDictionary(dictionaryId)}\n              variant=\"hoverable\"\n              color=\"text\"\n              IconRight={ChevronRight}\n              size=\"md\"\n              isFullWidth\n            >\n              {isDictionaryEdited(dictionaryId)\n                ? `✎ ${dictionaryId}`\n                : dictionaryId}\n            </Button>\n          </div>\n        ))}\n      </RightDrawer>\n    </>\n  );\n};\n"],"mappings":";;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAwDI;AArDJ,2BAMO;AACP,mBAAsC;AACtC,0BAA6B;AAC7B,mBAAyC;AACzC,qBAA2B;AAC3B,wCAAoC;AACpC,4CAA+C;AAExC,MAAM,uBAA2B,MAAM;AAC5C,QAAM,EAAE,KAAK,aAAa,QAAI,oCAAsB;AACpD,QAAM,wBAAoB;AAAA,IACxB,MAAM,OAAO,KAAK,YAAY;AAAA,IAC9B,CAAC,YAAY;AAAA,EACf;AAEA,QAAM,EAAE,aAAa,WAAW,QAAI;AAAA,QAClC,2BAAW,CAAC,OAAO;AAAA,MACjB,aAAa,EAAE;AAAA,MACf,YAAY,EAAE;AAAA,IAChB,EAAE;AAAA,EACJ;AAEA,QAAM,oBAAgB;AAAA,QACpB,2BAAW,CAAC,MAAM,EAAE,aAAa;AAAA,EACnC;AACA,QAAM,wBAAoB;AAAA,QACxB,2BAAW,CAAC,MAAM,EAAE,iBAAiB;AAAA,EACvC;AAEA,QAAM,wBAAwB,CAAC,iBAAyB;AACtD,gBAAY,oEAA8B;AAE1C,UAAM,EAAE,SAAS,IAAI,aAAa,YAAY;AAC9C,sBAAkB;AAAA,MAChB;AAAA,MACA,gBAAgB;AAAA,IAClB,CAAC;AAED,mBAAW,uDAAoB,YAAY,CAAC;AAAA,EAC9C;AAEA,QAAM,yBAAqB;AAAA,IACzB,CAAC,iBAAyB,OAAO,KAAK,aAAa,EAAE,SAAS,YAAY;AAAA,IAC1E,CAAC,aAAa;AAAA,EAChB;AAEA,SACE,2EACE;AAAA,IAAC;AAAA;AAAA,MACC,OAAM;AAAA,MACN,YAAY;AAAA,MAEX,4BAAkB,IAAI,CAAC,iBACtB,4CAAC,SACC;AAAA,QAAC;AAAA;AAAA,UACC,OAAO,0BAA0B,YAAY;AAAA,UAC7C,SAAS,MAAM,sBAAsB,YAAY;AAAA,UACjD,SAAQ;AAAA,UACR,OAAM;AAAA,UACN,WAAW;AAAA,UACX,MAAK;AAAA,UACL,aAAW;AAAA,UAEV,6BAAmB,YAAY,IAC5B,UAAK,YAAY,KACjB;AAAA;AAAA,MACN,KAbQ,YAcV,CACD;AAAA;AAAA,EACH,GACF;AAEJ;","names":[]}

package/dist/cjs/DictionaryListDrawer/{useDictionaryListDrawer.cjs → dictionaryListDrawerIdentifier.cjs}

@@ -16,18 +16,14 @@ var __copyProps = (to, from, except, desc) => {
   return to;
 };
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-var useDictionaryListDrawer_exports = {};
-__export(useDictionaryListDrawer_exports, {
-  dictionaryListDrawerIdentifier: () => dictionaryListDrawerIdentifier,
-  useDictionaryListDrawer: () => useDictionaryListDrawer
+var dictionaryListDrawerIdentifier_exports = {};
+__export(dictionaryListDrawerIdentifier_exports, {
+  dictionaryListDrawerIdentifier: () => dictionaryListDrawerIdentifier
 });
-module.exports = __toCommonJS(useDictionaryListDrawer_exports);
-var import_design_system = require("@intlayer/design-system");
+module.exports = __toCommonJS(dictionaryListDrawerIdentifier_exports);
 const dictionaryListDrawerIdentifier = "dictionaryList";
-const useDictionaryListDrawer = () => (0, import_design_system.useRightDrawerStore)(dictionaryListDrawerIdentifier)();
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
-  dictionaryListDrawerIdentifier,
-  useDictionaryListDrawer
+  dictionaryListDrawerIdentifier
 });
-//# sourceMappingURL=useDictionaryListDrawer.cjs.map
+//# sourceMappingURL=dictionaryListDrawerIdentifier.cjs.map

package/dist/cjs/DictionaryListDrawer/dictionaryListDrawerIdentifier.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/DictionaryListDrawer/dictionaryListDrawerIdentifier.ts"],"sourcesContent":["export const dictionaryListDrawerIdentifier = 'dictionaryList';\n"],"mappings":";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAO,MAAM,iCAAiC;","names":[]}

package/dist/cjs/DictionaryListDrawer/index.cjs

@@ -16,10 +16,10 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 var DictionaryListDrawer_exports = {};
 module.exports = __toCommonJS(DictionaryListDrawer_exports);
 __reExport(DictionaryListDrawer_exports, require('./DictionaryListDrawer.cjs'), module.exports);
-__reExport(DictionaryListDrawer_exports, require('./useDictionaryListDrawer.cjs'), module.exports);
+__reExport(DictionaryListDrawer_exports, require('./dictionaryListDrawerIdentifier.cjs'), module.exports);
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   ...require('./DictionaryListDrawer.cjs'),
-  ...require('./useDictionaryListDrawer.cjs')
+  ...require('./dictionaryListDrawerIdentifier.cjs')
 });
 //# sourceMappingURL=index.cjs.map

package/dist/cjs/DictionaryListDrawer/index.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/DictionaryListDrawer/index.ts"],"sourcesContent":["export * from './DictionaryListDrawer';\nexport * from './useDictionaryListDrawer';\n"],"mappings":";;;;;;;;;;;;;;;AAAA;AAAA;AAAA,yCAAc,mCAAd;AACA,yCAAc,sCADd;","names":[]}
+{"version":3,"sources":["../../../src/DictionaryListDrawer/index.ts"],"sourcesContent":["export * from './DictionaryListDrawer';\nexport * from './dictionaryListDrawerIdentifier';\n"],"mappings":";;;;;;;;;;;;;;;AAAA;AAAA;AAAA,yCAAc,mCAAd;AACA,yCAAc,6CADd;","names":[]}

package/dist/esm/ContentSelectorWrapper.mjs

@@ -5,7 +5,8 @@ import { ContentSelector } from "@intlayer/design-system";
 import {
   useCallback,
   useEffect,
-  useState
+  useState,
+  useMemo
 } from "react";
 import { useIntlayerEditorContext } from './IntlayerEditorProvider.mjs';
 import { useDictionaryEditionDrawer } from './DictionaryEditionDrawer/useDictionaryEditionDrawer.mjs';
@@ -27,7 +28,10 @@ const ContentSelectorWrapper = ({
     }),
     [dictionaryId, dictionaryPath, keyPath, open]
   );
-  const isSelected = (isOpen && (focusedContent?.keyPath?.length ?? 0) > 0 && isSameKeyPath(focusedContent?.keyPath ?? [], keyPath)) ?? false;
+  const isSelected = useMemo(
+    () => (isOpen && (focusedContent?.keyPath?.length ?? 0) > 0 && isSameKeyPath(focusedContent?.keyPath ?? [], keyPath)) ?? false,
+    [focusedContent, isOpen, keyPath]
+  );
   useEffect(() => {
     if (isEditorEnabled && editedValue && typeof editedValue === "string") {
       setDisplayedChildren(editedValue);

package/dist/esm/ContentSelectorWrapper.mjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/ContentSelectorWrapper.tsx"],"sourcesContent":["'use client';\n\nimport { isSameKeyPath, type KeyPath } from '@intlayer/core';\nimport { ContentSelector } from '@intlayer/design-system';\nimport {\n  useCallback,\n  useEffect,\n  useState,\n  type FC,\n  type ReactNode,\n} from 'react';\nimport { useIntlayerEditorContext } from './IntlayerEditorProvider';\nimport { useDictionaryEditionDrawer } from './DictionaryEditionDrawer/useDictionaryEditionDrawer';\n\ntype ContentSelectorWrapperProps = {\n  children: ReactNode;\n  dictionaryId: string;\n  dictionaryPath: string;\n  keyPath: KeyPath[];\n};\n\nexport const ContentSelectorWrapper: FC<ContentSelectorWrapperProps> = ({\n  children,\n  dictionaryId,\n  dictionaryPath,\n  keyPath,\n}) => {\n  const { open, getEditedContentValue, focusedContent, isOpen } =\n    useDictionaryEditionDrawer(dictionaryId);\n  const editedValue = getEditedContentValue(dictionaryId, keyPath);\n  const { isEditorEnabled } = useIntlayerEditorContext();\n  const [displayedChildren, setDisplayedChildren] =\n    useState<ReactNode>(children);\n\n  const handleSelect = useCallback(\n    () =>\n      open({\n        dictionaryId,\n        dictionaryPath,\n        keyPath,\n      }),\n    [dictionaryId, dictionaryPath, keyPath, open]\n  );\n\n  const isSelected =\n    (isOpen &&\n      (focusedContent?.keyPath?.length ?? 0) > 0 &&\n      isSameKeyPath(focusedContent?.keyPath ?? [], keyPath)) ??\n    false;\n\n  useEffect(() => {\n    // Use useEffect to avoid 'Text content does not match server-rendered HTML' error\n    if (isEditorEnabled && editedValue && typeof editedValue === 'string') {\n      setDisplayedChildren(editedValue);\n    }\n  }, [editedValue, isEditorEnabled]);\n\n  if (!isEditorEnabled) {\n    return children;\n  }\n\n  return (\n    <ContentSelector onSelect={handleSelect} isSelecting={isSelected}>\n      {displayedChildren}\n    </ContentSelector>\n  );\n};\n"],"mappings":";AA8DI;AA5DJ,SAAS,qBAAmC;AAC5C,SAAS,uBAAuB;AAChC;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,OAGK;AACP,SAAS,gCAAgC;AACzC,SAAS,kCAAkC;AASpC,MAAM,yBAA0D,CAAC;AAAA,EACtE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAAM;AACJ,QAAM,EAAE,MAAM,uBAAuB,gBAAgB,OAAO,IAC1D,2BAA2B,YAAY;AACzC,QAAM,cAAc,sBAAsB,cAAc,OAAO;AAC/D,QAAM,EAAE,gBAAgB,IAAI,yBAAyB;AACrD,QAAM,CAAC,mBAAmB,oBAAoB,IAC5C,SAAoB,QAAQ;AAE9B,QAAM,eAAe;AAAA,IACnB,MACE,KAAK;AAAA,MACH;AAAA,MACA;AAAA,MACA;AAAA,IACF,CAAC;AAAA,IACH,CAAC,cAAc,gBAAgB,SAAS,IAAI;AAAA,EAC9C;AAEA,QAAM,cACH,WACE,gBAAgB,SAAS,UAAU,KAAK,KACzC,cAAc,gBAAgB,WAAW,CAAC,GAAG,OAAO,MACtD;AAEF,YAAU,MAAM;AAEd,QAAI,mBAAmB,eAAe,OAAO,gBAAgB,UAAU;AACrE,2BAAqB,WAAW;AAAA,IAClC;AAAA,EACF,GAAG,CAAC,aAAa,eAAe,CAAC;AAEjC,MAAI,CAAC,iBAAiB;AACpB,WAAO;AAAA,EACT;AAEA,SACE,oBAAC,mBAAgB,UAAU,cAAc,aAAa,YACnD,6BACH;AAEJ;","names":[]}
+{"version":3,"sources":["../../src/ContentSelectorWrapper.tsx"],"sourcesContent":["'use client';\n\nimport { isSameKeyPath, type KeyPath } from '@intlayer/core';\nimport { ContentSelector } from '@intlayer/design-system';\nimport {\n  useCallback,\n  useEffect,\n  useState,\n  useMemo,\n  type FC,\n  type ReactNode,\n} from 'react';\nimport { useIntlayerEditorContext } from './IntlayerEditorProvider';\nimport { useDictionaryEditionDrawer } from './DictionaryEditionDrawer/useDictionaryEditionDrawer';\n\ntype ContentSelectorWrapperProps = {\n  children: ReactNode;\n  dictionaryId: string;\n  dictionaryPath: string;\n  keyPath: KeyPath[];\n};\n\nexport const ContentSelectorWrapper: FC<ContentSelectorWrapperProps> = ({\n  children,\n  dictionaryId,\n  dictionaryPath,\n  keyPath,\n}) => {\n  const { open, getEditedContentValue, focusedContent, isOpen } =\n    useDictionaryEditionDrawer(dictionaryId);\n  const editedValue = getEditedContentValue(dictionaryId, keyPath);\n  const { isEditorEnabled } = useIntlayerEditorContext();\n  const [displayedChildren, setDisplayedChildren] =\n    useState<ReactNode>(children);\n\n  const handleSelect = useCallback(\n    () =>\n      open({\n        dictionaryId,\n        dictionaryPath,\n        keyPath,\n      }),\n    [dictionaryId, dictionaryPath, keyPath, open]\n  );\n\n  const isSelected = useMemo(\n    () =>\n      (isOpen &&\n        (focusedContent?.keyPath?.length ?? 0) > 0 &&\n        isSameKeyPath(focusedContent?.keyPath ?? [], keyPath)) ??\n      false,\n    [focusedContent, isOpen, keyPath]\n  );\n\n  useEffect(() => {\n    // Use useEffect to avoid 'Text content does not match server-rendered HTML' error\n    if (isEditorEnabled && editedValue && typeof editedValue === 'string') {\n      setDisplayedChildren(editedValue);\n    }\n  }, [editedValue, isEditorEnabled]);\n\n  if (!isEditorEnabled) {\n    return children;\n  }\n\n  return (\n    <ContentSelector onSelect={handleSelect} isSelecting={isSelected}>\n      {displayedChildren}\n    </ContentSelector>\n  );\n};\n"],"mappings":";AAkEI;AAhEJ,SAAS,qBAAmC;AAC5C,SAAS,uBAAuB;AAChC;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OAGK;AACP,SAAS,gCAAgC;AACzC,SAAS,kCAAkC;AASpC,MAAM,yBAA0D,CAAC;AAAA,EACtE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAAM;AACJ,QAAM,EAAE,MAAM,uBAAuB,gBAAgB,OAAO,IAC1D,2BAA2B,YAAY;AACzC,QAAM,cAAc,sBAAsB,cAAc,OAAO;AAC/D,QAAM,EAAE,gBAAgB,IAAI,yBAAyB;AACrD,QAAM,CAAC,mBAAmB,oBAAoB,IAC5C,SAAoB,QAAQ;AAE9B,QAAM,eAAe;AAAA,IACnB,MACE,KAAK;AAAA,MACH;AAAA,MACA;AAAA,MACA;AAAA,IACF,CAAC;AAAA,IACH,CAAC,cAAc,gBAAgB,SAAS,IAAI;AAAA,EAC9C;AAEA,QAAM,aAAa;AAAA,IACjB,OACG,WACE,gBAAgB,SAAS,UAAU,KAAK,KACzC,cAAc,gBAAgB,WAAW,CAAC,GAAG,OAAO,MACtD;AAAA,IACF,CAAC,gBAAgB,QAAQ,OAAO;AAAA,EAClC;AAEA,YAAU,MAAM;AAEd,QAAI,mBAAmB,eAAe,OAAO,gBAAgB,UAAU;AACrE,2BAAqB,WAAW;AAAA,IAClC;AAAA,EACF,GAAG,CAAC,aAAa,eAAe,CAAC;AAEjC,MAAI,CAAC,iBAAiB;AACpB,WAAO;AAAA,EACT;AAEA,SACE,oBAAC,mBAAgB,UAAU,cAAc,aAAa,YACnD,6BACH;AAEJ;","names":[]}

package/dist/esm/DictionaryEditionDrawer/DictionaryEditionDrawer.mjs

@@ -6,11 +6,14 @@ import {
   LocaleSwitcher,
   Modal,
   useEditionPanelStore,
-  DictionaryFieldEditor
+  DictionaryFieldEditor,
+  useRightDrawerStore
 } from "@intlayer/design-system";
 import { useGetAllDictionaries } from "@intlayer/design-system/hooks";
 import { useCallback, useEffect, useState } from "react";
-import { useDictionaryListDrawer } from '../DictionaryListDrawer/useDictionaryListDrawer.mjs';
+import { t } from "react-intlayer";
+import { useShallow } from "zustand/shallow";
+import { dictionaryListDrawerIdentifier } from '../DictionaryListDrawer/dictionaryListDrawerIdentifier.mjs';
 import {
   useDictionaryEditionDrawer,
   getDrawerIdentifier
@@ -38,7 +41,11 @@ const DictionaryEditionDrawerContent = ({ locale, identifier, handleOnBack }) =>
         isOpen: keyPathEditionModal !== null,
         onClose: () => setKeyPathEditionModal(null),
         hasCloseButton: true,
-        title: "Edit field",
+        title: t({
+          en: "Edit field",
+          fr: "Modifier le champ",
+          es: "Editar campo"
+        }),
         size: "xl",
         transparency: "lg",
         children: dictionary && /* @__PURE__ */ jsx(
@@ -68,7 +75,9 @@ const DictionaryEditionDrawer = ({
 }) => {
   const id = getDrawerIdentifier(dictionaryId);
   const { focusedContent, close } = useDictionaryEditionDrawer(dictionaryId);
-  const { open: openDictionaryListDrawer } = useDictionaryListDrawer();
+  const { openDictionaryListDrawer } = useRightDrawerStore((s) => ({
+    openDictionaryListDrawer: () => s.open(dictionaryListDrawerIdentifier)
+  }));
   const handleOnBack = () => {
     close();
     openDictionaryListDrawer();
@@ -88,7 +97,11 @@ const DictionaryEditionDrawer = ({
       ),
       backButton: {
         onBack: handleOnBack,
-        text: "Dictionary list"
+        text: t({
+          en: "Dictionary list",
+          fr: "Liste des dictionnaires",
+          es: "Lista de diccionarios"
+        })
       },
       children: focusedContent && /* @__PURE__ */ jsx(
         DictionaryEditionDrawerContent,
@@ -103,7 +116,9 @@ const DictionaryEditionDrawer = ({
   );
 };
 const DictionaryEditionDrawerController = ({ locale, localeList, setLocale }) => {
-  const focusedContent = useEditionPanelStore((s) => s.focusedContent);
+  const focusedContent = useEditionPanelStore(
+    useShallow((s) => s.focusedContent)
+  );
   const dictionaryId = focusedContent?.dictionaryId;
   if (!dictionaryId) {
     return /* @__PURE__ */ jsx(Fragment, {});

package/dist/esm/DictionaryEditionDrawer/DictionaryEditionDrawer.mjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/DictionaryEditionDrawer/DictionaryEditionDrawer.tsx"],"sourcesContent":["'use client';\n\nimport type { Locales } from '@intlayer/config/client';\nimport type { Dictionary, KeyPath } from '@intlayer/core';\nimport {\n  RightDrawer,\n  DictionaryEditor,\n  LocaleSwitcher,\n  Modal,\n  useEditionPanelStore,\n  DictionaryFieldEditor,\n} from '@intlayer/design-system';\nimport { useGetAllDictionaries } from '@intlayer/design-system/hooks';\nimport { useCallback, useEffect, useState, type FC } from 'react';\nimport { useDictionaryListDrawer } from '../DictionaryListDrawer/useDictionaryListDrawer';\nimport {\n  type FileContent as FileContentWithDictionaryPath,\n  useDictionaryEditionDrawer,\n  getDrawerIdentifier,\n} from './useDictionaryEditionDrawer';\n\ntype DictionaryEditionDrawerContentProps = {\n  focusedContent: FileContentWithDictionaryPath;\n  locale: Locales;\n  identifier: string;\n  handleOnBack: () => void;\n};\n\nexport const DictionaryEditionDrawerContent: FC<\n  DictionaryEditionDrawerContentProps\n> = ({ locale, identifier, handleOnBack }) => {\n  const [keyPathEditionModal, setKeyPathEditionModal] = useState<\n    KeyPath[] | null\n  >(null);\n  const { setDictionariesRecord, focusedContent } =\n    useDictionaryEditionDrawer(identifier);\n  const { all: dictionaries } = useGetAllDictionaries();\n\n  const onClickDictionaryList = useCallback(() => {\n    setKeyPathEditionModal(null);\n    handleOnBack();\n  }, [handleOnBack]);\n\n  useEffect(() => {\n    if (dictionaries) {\n      setDictionariesRecord(dictionaries);\n    }\n  }, [setDictionariesRecord, dictionaries]);\n\n  const dictionaryId = focusedContent?.dictionaryId;\n\n  if (!dictionaryId) return <>No dictionary focused</>;\n\n  const dictionary: Dictionary = dictionaries[dictionaryId];\n\n  return (\n    <>\n      <Modal\n        isOpen={keyPathEditionModal !== null}\n        onClose={() => setKeyPathEditionModal(null)}\n        hasCloseButton\n        title=\"Edit field\"\n        size=\"xl\"\n        transparency=\"lg\"\n      >\n        {dictionary && (\n          <DictionaryFieldEditor\n            dictionary={dictionary}\n            onClickDictionaryList={onClickDictionaryList}\n          />\n        )}\n      </Modal>\n      <DictionaryEditor\n        dictionary={dictionary}\n        locale={locale}\n        onClickEdit={setKeyPathEditionModal}\n      />\n    </>\n  );\n};\n\ntype DictionaryEditionDrawerProps = DictionaryEditionDrawerControllerProps & {\n  dictionaryId: string;\n};\n\nexport const DictionaryEditionDrawer: FC<DictionaryEditionDrawerProps> = ({\n  locale,\n  localeList,\n  setLocale,\n  dictionaryId,\n}) => {\n  const id = getDrawerIdentifier(dictionaryId);\n\n  const { focusedContent, close } = useDictionaryEditionDrawer(dictionaryId);\n  const { open: openDictionaryListDrawer } = useDictionaryListDrawer();\n\n  const handleOnBack = () => {\n    close();\n    openDictionaryListDrawer();\n  };\n\n  return (\n    <RightDrawer\n      title={dictionaryId}\n      identifier={id}\n      header={\n        <LocaleSwitcher\n          setLocale={setLocale}\n          locale={locale}\n          localeList={localeList}\n        />\n      }\n      backButton={{\n        onBack: handleOnBack,\n        text: 'Dictionary list',\n      }}\n    >\n      {focusedContent && (\n        <DictionaryEditionDrawerContent\n          focusedContent={focusedContent}\n          locale={locale}\n          identifier={id}\n          handleOnBack={handleOnBack}\n        />\n      )}\n    </RightDrawer>\n  );\n};\n\ntype DictionaryEditionDrawerControllerProps = {\n  locale: Locales;\n  localeList: Locales[];\n  setLocale: (locale: Locales) => void;\n};\n\nexport const DictionaryEditionDrawerController: FC<\n  DictionaryEditionDrawerControllerProps\n> = ({ locale, localeList, setLocale }) => {\n  const focusedContent = useEditionPanelStore((s) => s.focusedContent);\n  const dictionaryId: string | undefined = focusedContent?.dictionaryId;\n\n  if (!dictionaryId) {\n    return <></>;\n  }\n\n  return (\n    <DictionaryEditionDrawer\n      locale={locale}\n      localeList={localeList}\n      setLocale={setLocale}\n      dictionaryId={dictionaryId}\n    />\n  );\n};\n"],"mappings":";AAmD4B,wBAKxB,YALwB;AA/C5B;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,6BAA6B;AACtC,SAAS,aAAa,WAAW,gBAAyB;AAC1D,SAAS,+BAA+B;AACxC;AAAA,EAEE;AAAA,EACA;AAAA,OACK;AASA,MAAM,iCAET,CAAC,EAAE,QAAQ,YAAY,aAAa,MAAM;AAC5C,QAAM,CAAC,qBAAqB,sBAAsB,IAAI,SAEpD,IAAI;AACN,QAAM,EAAE,uBAAuB,eAAe,IAC5C,2BAA2B,UAAU;AACvC,QAAM,EAAE,KAAK,aAAa,IAAI,sBAAsB;AAEpD,QAAM,wBAAwB,YAAY,MAAM;AAC9C,2BAAuB,IAAI;AAC3B,iBAAa;AAAA,EACf,GAAG,CAAC,YAAY,CAAC;AAEjB,YAAU,MAAM;AACd,QAAI,cAAc;AAChB,4BAAsB,YAAY;AAAA,IACpC;AAAA,EACF,GAAG,CAAC,uBAAuB,YAAY,CAAC;AAExC,QAAM,eAAe,gBAAgB;AAErC,MAAI,CAAC,aAAc,QAAO,gCAAE,mCAAqB;AAEjD,QAAM,aAAyB,aAAa,YAAY;AAExD,SACE,iCACE;AAAA;AAAA,MAAC;AAAA;AAAA,QACC,QAAQ,wBAAwB;AAAA,QAChC,SAAS,MAAM,uBAAuB,IAAI;AAAA,QAC1C,gBAAc;AAAA,QACd,OAAM;AAAA,QACN,MAAK;AAAA,QACL,cAAa;AAAA,QAEZ,wBACC;AAAA,UAAC;AAAA;AAAA,YACC;AAAA,YACA;AAAA;AAAA,QACF;AAAA;AAAA,IAEJ;AAAA,IACA;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA;AAAA,QACA,aAAa;AAAA;AAAA,IACf;AAAA,KACF;AAEJ;AAMO,MAAM,0BAA4D,CAAC;AAAA,EACxE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAAM;AACJ,QAAM,KAAK,oBAAoB,YAAY;AAE3C,QAAM,EAAE,gBAAgB,MAAM,IAAI,2BAA2B,YAAY;AACzE,QAAM,EAAE,MAAM,yBAAyB,IAAI,wBAAwB;AAEnE,QAAM,eAAe,MAAM;AACzB,UAAM;AACN,6BAAyB;AAAA,EAC3B;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACC,OAAO;AAAA,MACP,YAAY;AAAA,MACZ,QACE;AAAA,QAAC;AAAA;AAAA,UACC;AAAA,UACA;AAAA,UACA;AAAA;AAAA,MACF;AAAA,MAEF,YAAY;AAAA,QACV,QAAQ;AAAA,QACR,MAAM;AAAA,MACR;AAAA,MAEC,4BACC;AAAA,QAAC;AAAA;AAAA,UACC;AAAA,UACA;AAAA,UACA,YAAY;AAAA,UACZ;AAAA;AAAA,MACF;AAAA;AAAA,EAEJ;AAEJ;AAQO,MAAM,oCAET,CAAC,EAAE,QAAQ,YAAY,UAAU,MAAM;AACzC,QAAM,iBAAiB,qBAAqB,CAAC,MAAM,EAAE,cAAc;AACnE,QAAM,eAAmC,gBAAgB;AAEzD,MAAI,CAAC,cAAc;AACjB,WAAO,gCAAE;AAAA,EACX;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA;AAAA,EACF;AAEJ;","names":[]}
+{"version":3,"sources":["../../../src/DictionaryEditionDrawer/DictionaryEditionDrawer.tsx"],"sourcesContent":["'use client';\n\nimport type { Locales } from '@intlayer/config/client';\nimport type { Dictionary, KeyPath } from '@intlayer/core';\nimport {\n  RightDrawer,\n  DictionaryEditor,\n  LocaleSwitcher,\n  Modal,\n  useEditionPanelStore,\n  DictionaryFieldEditor,\n  useRightDrawerStore,\n} from '@intlayer/design-system';\nimport { useGetAllDictionaries } from '@intlayer/design-system/hooks';\nimport { useCallback, useEffect, useState, type FC } from 'react';\nimport { t } from 'react-intlayer';\nimport { useShallow } from 'zustand/shallow';\nimport { dictionaryListDrawerIdentifier } from '../DictionaryListDrawer/dictionaryListDrawerIdentifier';\nimport {\n  type FileContent as FileContentWithDictionaryPath,\n  useDictionaryEditionDrawer,\n  getDrawerIdentifier,\n} from './useDictionaryEditionDrawer';\n\ntype DictionaryEditionDrawerContentProps = {\n  focusedContent: FileContentWithDictionaryPath;\n  locale: Locales;\n  identifier: string;\n  handleOnBack: () => void;\n};\n\nexport const DictionaryEditionDrawerContent: FC<\n  DictionaryEditionDrawerContentProps\n> = ({ locale, identifier, handleOnBack }) => {\n  const [keyPathEditionModal, setKeyPathEditionModal] = useState<\n    KeyPath[] | null\n  >(null);\n  const { setDictionariesRecord, focusedContent } =\n    useDictionaryEditionDrawer(identifier);\n  const { all: dictionaries } = useGetAllDictionaries();\n\n  const onClickDictionaryList = useCallback(() => {\n    setKeyPathEditionModal(null);\n    handleOnBack();\n  }, [handleOnBack]);\n\n  useEffect(() => {\n    if (dictionaries) {\n      setDictionariesRecord(dictionaries);\n    }\n  }, [setDictionariesRecord, dictionaries]);\n\n  const dictionaryId = focusedContent?.dictionaryId;\n\n  if (!dictionaryId) return <>No dictionary focused</>;\n\n  const dictionary: Dictionary = dictionaries[dictionaryId];\n\n  return (\n    <>\n      <Modal\n        isOpen={keyPathEditionModal !== null}\n        onClose={() => setKeyPathEditionModal(null)}\n        hasCloseButton\n        title={t({\n          en: 'Edit field',\n          fr: 'Modifier le champ',\n          es: 'Editar campo',\n        })}\n        size=\"xl\"\n        transparency=\"lg\"\n      >\n        {dictionary && (\n          <DictionaryFieldEditor\n            dictionary={dictionary}\n            onClickDictionaryList={onClickDictionaryList}\n          />\n        )}\n      </Modal>\n      <DictionaryEditor\n        dictionary={dictionary}\n        locale={locale}\n        onClickEdit={setKeyPathEditionModal}\n      />\n    </>\n  );\n};\n\ntype DictionaryEditionDrawerProps = DictionaryEditionDrawerControllerProps & {\n  dictionaryId: string;\n};\n\nexport const DictionaryEditionDrawer: FC<DictionaryEditionDrawerProps> = ({\n  locale,\n  localeList,\n  setLocale,\n  dictionaryId,\n}) => {\n  const id = getDrawerIdentifier(dictionaryId);\n\n  const { focusedContent, close } = useDictionaryEditionDrawer(dictionaryId);\n  const { openDictionaryListDrawer } = useRightDrawerStore((s) => ({\n    openDictionaryListDrawer: () => s.open(dictionaryListDrawerIdentifier),\n  }));\n\n  const handleOnBack = () => {\n    close();\n    openDictionaryListDrawer();\n  };\n\n  return (\n    <RightDrawer\n      title={dictionaryId}\n      identifier={id}\n      header={\n        <LocaleSwitcher\n          setLocale={setLocale}\n          locale={locale}\n          localeList={localeList}\n        />\n      }\n      backButton={{\n        onBack: handleOnBack,\n        text: t({\n          en: 'Dictionary list',\n          fr: 'Liste des dictionnaires',\n          es: 'Lista de diccionarios',\n        }),\n      }}\n    >\n      {focusedContent && (\n        <DictionaryEditionDrawerContent\n          focusedContent={focusedContent}\n          locale={locale}\n          identifier={id}\n          handleOnBack={handleOnBack}\n        />\n      )}\n    </RightDrawer>\n  );\n};\n\ntype DictionaryEditionDrawerControllerProps = {\n  locale: Locales;\n  localeList: Locales[];\n  setLocale: (locale: Locales) => void;\n};\n\nexport const DictionaryEditionDrawerController: FC<\n  DictionaryEditionDrawerControllerProps\n> = ({ locale, localeList, setLocale }) => {\n  const focusedContent = useEditionPanelStore(\n    useShallow((s) => s.focusedContent)\n  );\n  const dictionaryId: string | undefined = focusedContent?.dictionaryId;\n\n  if (!dictionaryId) {\n    return <></>;\n  }\n\n  return (\n    <DictionaryEditionDrawer\n      locale={locale}\n      localeList={localeList}\n      setLocale={setLocale}\n      dictionaryId={dictionaryId}\n    />\n  );\n};\n"],"mappings":";AAsD4B,wBAKxB,YALwB;AAlD5B;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,6BAA6B;AACtC,SAAS,aAAa,WAAW,gBAAyB;AAC1D,SAAS,SAAS;AAClB,SAAS,kBAAkB;AAC3B,SAAS,sCAAsC;AAC/C;AAAA,EAEE;AAAA,EACA;AAAA,OACK;AASA,MAAM,iCAET,CAAC,EAAE,QAAQ,YAAY,aAAa,MAAM;AAC5C,QAAM,CAAC,qBAAqB,sBAAsB,IAAI,SAEpD,IAAI;AACN,QAAM,EAAE,uBAAuB,eAAe,IAC5C,2BAA2B,UAAU;AACvC,QAAM,EAAE,KAAK,aAAa,IAAI,sBAAsB;AAEpD,QAAM,wBAAwB,YAAY,MAAM;AAC9C,2BAAuB,IAAI;AAC3B,iBAAa;AAAA,EACf,GAAG,CAAC,YAAY,CAAC;AAEjB,YAAU,MAAM;AACd,QAAI,cAAc;AAChB,4BAAsB,YAAY;AAAA,IACpC;AAAA,EACF,GAAG,CAAC,uBAAuB,YAAY,CAAC;AAExC,QAAM,eAAe,gBAAgB;AAErC,MAAI,CAAC,aAAc,QAAO,gCAAE,mCAAqB;AAEjD,QAAM,aAAyB,aAAa,YAAY;AAExD,SACE,iCACE;AAAA;AAAA,MAAC;AAAA;AAAA,QACC,QAAQ,wBAAwB;AAAA,QAChC,SAAS,MAAM,uBAAuB,IAAI;AAAA,QAC1C,gBAAc;AAAA,QACd,OAAO,EAAE;AAAA,UACP,IAAI;AAAA,UACJ,IAAI;AAAA,UACJ,IAAI;AAAA,QACN,CAAC;AAAA,QACD,MAAK;AAAA,QACL,cAAa;AAAA,QAEZ,wBACC;AAAA,UAAC;AAAA;AAAA,YACC;AAAA,YACA;AAAA;AAAA,QACF;AAAA;AAAA,IAEJ;AAAA,IACA;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA;AAAA,QACA,aAAa;AAAA;AAAA,IACf;AAAA,KACF;AAEJ;AAMO,MAAM,0BAA4D,CAAC;AAAA,EACxE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAAM;AACJ,QAAM,KAAK,oBAAoB,YAAY;AAE3C,QAAM,EAAE,gBAAgB,MAAM,IAAI,2BAA2B,YAAY;AACzE,QAAM,EAAE,yBAAyB,IAAI,oBAAoB,CAAC,OAAO;AAAA,IAC/D,0BAA0B,MAAM,EAAE,KAAK,8BAA8B;AAAA,EACvE,EAAE;AAEF,QAAM,eAAe,MAAM;AACzB,UAAM;AACN,6BAAyB;AAAA,EAC3B;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACC,OAAO;AAAA,MACP,YAAY;AAAA,MACZ,QACE;AAAA,QAAC;AAAA;AAAA,UACC;AAAA,UACA;AAAA,UACA;AAAA;AAAA,MACF;AAAA,MAEF,YAAY;AAAA,QACV,QAAQ;AAAA,QACR,MAAM,EAAE;AAAA,UACN,IAAI;AAAA,UACJ,IAAI;AAAA,UACJ,IAAI;AAAA,QACN,CAAC;AAAA,MACH;AAAA,MAEC,4BACC;AAAA,QAAC;AAAA;AAAA,UACC;AAAA,UACA;AAAA,UACA,YAAY;AAAA,UACZ;AAAA;AAAA,MACF;AAAA;AAAA,EAEJ;AAEJ;AAQO,MAAM,oCAET,CAAC,EAAE,QAAQ,YAAY,UAAU,MAAM;AACzC,QAAM,iBAAiB;AAAA,IACrB,WAAW,CAAC,MAAM,EAAE,cAAc;AAAA,EACpC;AACA,QAAM,eAAmC,gBAAgB;AAEzD,MAAI,CAAC,cAAc;AACjB,WAAO,gCAAE;AAAA,EACX;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA;AAAA,EACF;AAEJ;","names":[]}

package/dist/esm/DictionaryEditionDrawer/useDictionaryEditionDrawer.mjs

@@ -3,66 +3,56 @@ import {
   useEditedContentStore,
   useEditionPanelStore
 } from "@intlayer/design-system";
+import { useCallback } from "react";
+import { useShallow } from "zustand/shallow";
 const getDrawerIdentifier = (dictionaryId) => `dictionary_edition_${dictionaryId}`;
 const useDictionaryEditionDrawer = (dictionaryId) => {
   const id = getDrawerIdentifier(dictionaryId);
-  const { isOpen, open, close } = useRightDrawerStore(id)();
-  const { setDictionariesRecord, getEditedContentValue } = useEditedContentStore((s) => ({
-    setDictionariesRecord: s.setDictionariesRecord,
-    getEditedContentValue: s.getEditedContentValue
-  }));
-  const { setFocusedContent, focusedContent } = useEditionPanelStore((s) => ({
-    focusedContent: s.focusedContent,
-    setFocusedContent: s.setFocusedContent
-  }));
-  const openDictionaryEditionDrawer = ({
-    dictionaryId: dictionaryId2,
-    dictionaryPath,
-    keyPath = []
-  }) => {
-    setFocusedContent({
+  const { isOpenDrawer, openDrawer, closeDrawer } = useRightDrawerStore(
+    useShallow((e) => ({
+      isOpenDrawer: e.isOpen,
+      openDrawer: e.open,
+      closeDrawer: e.close
+    }))
+  );
+  const { setDictionariesRecord, getEditedContentValue } = useEditedContentStore(
+    useShallow((s) => ({
+      setDictionariesRecord: s.setDictionariesRecord,
+      getEditedContentValue: s.getEditedContentValue
+    }))
+  );
+  const { setFocusedContent, focusedContent } = useEditionPanelStore(
+    useShallow((s) => ({
+      focusedContent: s.focusedContent,
+      setFocusedContent: s.setFocusedContent
+    }))
+  );
+  const openDictionaryEditionDrawer = useCallback(
+    ({
       dictionaryId: dictionaryId2,
       dictionaryPath,
-      keyPath
-    });
-    open();
-  };
+      keyPath = []
+    }) => {
+      setFocusedContent({
+        dictionaryId: dictionaryId2,
+        dictionaryPath,
+        keyPath
+      });
+      openDrawer(id);
+    },
+    [openDrawer, setFocusedContent]
+  );
   return {
-    isOpen,
+    isOpen: isOpenDrawer(id),
     focusedContent,
     setDictionariesRecord,
     getEditedContentValue,
     open: openDictionaryEditionDrawer,
-    close
-  };
-};
-const useDictionaryEditionDrawerControl = () => {
-  const setFocusedContent = useEditionPanelStore((s) => s.setFocusedContent);
-  const open = ({
-    dictionaryId,
-    dictionaryPath,
-    keyPath = []
-  }) => {
-    setFocusedContent({
-      dictionaryId,
-      dictionaryPath,
-      keyPath
-    });
-    const id = getDrawerIdentifier(dictionaryId);
-    useRightDrawerStore(id).getState().open();
-  };
-  const close = (dictionaryId) => {
-    const id = getDrawerIdentifier(dictionaryId);
-    useRightDrawerStore(id).getState().close();
-  };
-  return {
-    open,
-    close
+    close: () => closeDrawer(id)
   };
 };
 export {
   getDrawerIdentifier,
-  useDictionaryEditionDrawer,
-  useDictionaryEditionDrawerControl
+  useDictionaryEditionDrawer
 };
 //# sourceMappingURL=useDictionaryEditionDrawer.mjs.map

package/dist/esm/DictionaryEditionDrawer/useDictionaryEditionDrawer.mjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/DictionaryEditionDrawer/useDictionaryEditionDrawer.ts"],"sourcesContent":["import type { Dictionary, DictionaryValue, KeyPath } from '@intlayer/core';\nimport {\n  useRightDrawerStore,\n  useEditedContentStore,\n  useEditionPanelStore,\n} from '@intlayer/design-system';\n\nexport const getDrawerIdentifier = (dictionaryId: string) =>\n  `dictionary_edition_${dictionaryId}`;\n\ntype DictionaryId = string;\ntype DictionaryPath = string;\n\nexport type FileContent = {\n  dictionaryPath?: DictionaryPath;\n  dictionaryId: string;\n  keyPath?: KeyPath[];\n};\n\ntype DictionaryEditionDrawer = {\n  focusedContent: FileContent | null;\n  isOpen: boolean;\n  open: (content: FileContent) => void;\n  close: () => void;\n  setDictionariesRecord: (\n    dictionariesRecord: Record<DictionaryId, Dictionary>\n  ) => void;\n  getEditedContentValue: (\n    dictionaryId: DictionaryId,\n    keyPath: KeyPath[]\n  ) => DictionaryValue | undefined;\n};\n\ntype OpenDictionaryEditionDrawerProps = {\n  dictionaryId: string;\n  dictionaryPath?: string;\n  keyPath?: KeyPath[];\n};\n\nexport const useDictionaryEditionDrawer = (\n  dictionaryId: string\n): DictionaryEditionDrawer => {\n  const id = getDrawerIdentifier(dictionaryId);\n  const { isOpen, open, close } = useRightDrawerStore(id)();\n  const { setDictionariesRecord, getEditedContentValue } =\n    useEditedContentStore((s) => ({\n      setDictionariesRecord: s.setDictionariesRecord,\n      getEditedContentValue: s.getEditedContentValue,\n    }));\n  const { setFocusedContent, focusedContent } = useEditionPanelStore((s) => ({\n    focusedContent: s.focusedContent,\n    setFocusedContent: s.setFocusedContent,\n  }));\n\n  const openDictionaryEditionDrawer = ({\n    dictionaryId,\n    dictionaryPath,\n    keyPath = [],\n  }: OpenDictionaryEditionDrawerProps) => {\n    setFocusedContent({\n      dictionaryId,\n      dictionaryPath,\n      keyPath,\n    });\n\n    open();\n  };\n\n  return {\n    isOpen,\n    focusedContent,\n    setDictionariesRecord,\n    getEditedContentValue,\n    open: openDictionaryEditionDrawer,\n    close,\n  };\n};\n\ntype DictionaryEditionDrawerControl = {\n  open: (content: FileContent) => void;\n  close: (dictionaryId: string) => void;\n};\n\nexport const useDictionaryEditionDrawerControl =\n  (): DictionaryEditionDrawerControl => {\n    const setFocusedContent = useEditionPanelStore((s) => s.setFocusedContent);\n\n    const open = ({\n      dictionaryId,\n      dictionaryPath,\n      keyPath = [],\n    }: OpenDictionaryEditionDrawerProps) => {\n      setFocusedContent({\n        dictionaryId,\n        dictionaryPath,\n        keyPath,\n      });\n\n      const id = getDrawerIdentifier(dictionaryId);\n\n      useRightDrawerStore(id).getState().open();\n    };\n\n    const close = (dictionaryId: string) => {\n      const id = getDrawerIdentifier(dictionaryId);\n\n      useRightDrawerStore(id).getState().close();\n    };\n\n    return {\n      open,\n      close,\n    };\n  };\n"],"mappings":"AACA;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAEA,MAAM,sBAAsB,CAAC,iBAClC,sBAAsB,YAAY;AA+B7B,MAAM,6BAA6B,CACxC,iBAC4B;AAC5B,QAAM,KAAK,oBAAoB,YAAY;AAC3C,QAAM,EAAE,QAAQ,MAAM,MAAM,IAAI,oBAAoB,EAAE,EAAE;AACxD,QAAM,EAAE,uBAAuB,sBAAsB,IACnD,sBAAsB,CAAC,OAAO;AAAA,IAC5B,uBAAuB,EAAE;AAAA,IACzB,uBAAuB,EAAE;AAAA,EAC3B,EAAE;AACJ,QAAM,EAAE,mBAAmB,eAAe,IAAI,qBAAqB,CAAC,OAAO;AAAA,IACzE,gBAAgB,EAAE;AAAA,IAClB,mBAAmB,EAAE;AAAA,EACvB,EAAE;AAEF,QAAM,8BAA8B,CAAC;AAAA,IACnC,cAAAA;AAAA,IACA;AAAA,IACA,UAAU,CAAC;AAAA,EACb,MAAwC;AACtC,sBAAkB;AAAA,MAChB,cAAAA;AAAA,MACA;AAAA,MACA;AAAA,IACF,CAAC;AAED,SAAK;AAAA,EACP;AAEA,SAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,MAAM;AAAA,IACN;AAAA,EACF;AACF;AAOO,MAAM,oCACX,MAAsC;AACpC,QAAM,oBAAoB,qBAAqB,CAAC,MAAM,EAAE,iBAAiB;AAEzE,QAAM,OAAO,CAAC;AAAA,IACZ;AAAA,IACA;AAAA,IACA,UAAU,CAAC;AAAA,EACb,MAAwC;AACtC,sBAAkB;AAAA,MAChB;AAAA,MACA;AAAA,MACA;AAAA,IACF,CAAC;AAED,UAAM,KAAK,oBAAoB,YAAY;AAE3C,wBAAoB,EAAE,EAAE,SAAS,EAAE,KAAK;AAAA,EAC1C;AAEA,QAAM,QAAQ,CAAC,iBAAyB;AACtC,UAAM,KAAK,oBAAoB,YAAY;AAE3C,wBAAoB,EAAE,EAAE,SAAS,EAAE,MAAM;AAAA,EAC3C;AAEA,SAAO;AAAA,IACL;AAAA,IACA;AAAA,EACF;AACF;","names":["dictionaryId"]}
+{"version":3,"sources":["../../../src/DictionaryEditionDrawer/useDictionaryEditionDrawer.ts"],"sourcesContent":["import type { Dictionary, DictionaryValue, KeyPath } from '@intlayer/core';\nimport {\n  useRightDrawerStore,\n  useEditedContentStore,\n  useEditionPanelStore,\n} from '@intlayer/design-system';\nimport { useCallback } from 'react';\nimport { useShallow } from 'zustand/shallow';\n\nexport const getDrawerIdentifier = (dictionaryId: string) =>\n  `dictionary_edition_${dictionaryId}`;\n\ntype DictionaryId = string;\ntype DictionaryPath = string;\n\nexport type FileContent = {\n  dictionaryPath?: DictionaryPath;\n  dictionaryId: string;\n  keyPath?: KeyPath[];\n};\n\ntype DictionaryEditionDrawer = {\n  focusedContent: FileContent | null;\n  isOpen: boolean;\n  open: (content: FileContent) => void;\n  close: () => void;\n  setDictionariesRecord: (\n    dictionariesRecord: Record<DictionaryId, Dictionary>\n  ) => void;\n  getEditedContentValue: (\n    dictionaryId: DictionaryId,\n    keyPath: KeyPath[]\n  ) => DictionaryValue | undefined;\n};\n\ntype OpenDictionaryEditionDrawerProps = {\n  dictionaryId: string;\n  dictionaryPath?: string;\n  keyPath?: KeyPath[];\n};\n\nexport const useDictionaryEditionDrawer = (\n  dictionaryId: string\n): DictionaryEditionDrawer => {\n  const id = getDrawerIdentifier(dictionaryId);\n  const { isOpenDrawer, openDrawer, closeDrawer } = useRightDrawerStore(\n    useShallow((e) => ({\n      isOpenDrawer: e.isOpen,\n      openDrawer: e.open,\n      closeDrawer: e.close,\n    }))\n  );\n  const { setDictionariesRecord, getEditedContentValue } =\n    useEditedContentStore(\n      useShallow((s) => ({\n        setDictionariesRecord: s.setDictionariesRecord,\n        getEditedContentValue: s.getEditedContentValue,\n      }))\n    );\n  const { setFocusedContent, focusedContent } = useEditionPanelStore(\n    useShallow((s) => ({\n      focusedContent: s.focusedContent,\n      setFocusedContent: s.setFocusedContent,\n    }))\n  );\n\n  const openDictionaryEditionDrawer = useCallback(\n    ({\n      dictionaryId,\n      dictionaryPath,\n      keyPath = [],\n    }: OpenDictionaryEditionDrawerProps) => {\n      setFocusedContent({\n        dictionaryId,\n        dictionaryPath,\n        keyPath,\n      });\n\n      openDrawer(id);\n    },\n    [openDrawer, setFocusedContent]\n  );\n\n  return {\n    isOpen: isOpenDrawer(id),\n    focusedContent,\n    setDictionariesRecord,\n    getEditedContentValue,\n    open: openDictionaryEditionDrawer,\n    close: () => closeDrawer(id),\n  };\n};\n"],"mappings":"AACA;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,mBAAmB;AAC5B,SAAS,kBAAkB;AAEpB,MAAM,sBAAsB,CAAC,iBAClC,sBAAsB,YAAY;AA+B7B,MAAM,6BAA6B,CACxC,iBAC4B;AAC5B,QAAM,KAAK,oBAAoB,YAAY;AAC3C,QAAM,EAAE,cAAc,YAAY,YAAY,IAAI;AAAA,IAChD,WAAW,CAAC,OAAO;AAAA,MACjB,cAAc,EAAE;AAAA,MAChB,YAAY,EAAE;AAAA,MACd,aAAa,EAAE;AAAA,IACjB,EAAE;AAAA,EACJ;AACA,QAAM,EAAE,uBAAuB,sBAAsB,IACnD;AAAA,IACE,WAAW,CAAC,OAAO;AAAA,MACjB,uBAAuB,EAAE;AAAA,MACzB,uBAAuB,EAAE;AAAA,IAC3B,EAAE;AAAA,EACJ;AACF,QAAM,EAAE,mBAAmB,eAAe,IAAI;AAAA,IAC5C,WAAW,CAAC,OAAO;AAAA,MACjB,gBAAgB,EAAE;AAAA,MAClB,mBAAmB,EAAE;AAAA,IACvB,EAAE;AAAA,EACJ;AAEA,QAAM,8BAA8B;AAAA,IAClC,CAAC;AAAA,MACC,cAAAA;AAAA,MACA;AAAA,MACA,UAAU,CAAC;AAAA,IACb,MAAwC;AACtC,wBAAkB;AAAA,QAChB,cAAAA;AAAA,QACA;AAAA,QACA;AAAA,MACF,CAAC;AAED,iBAAW,EAAE;AAAA,IACf;AAAA,IACA,CAAC,YAAY,iBAAiB;AAAA,EAChC;AAEA,SAAO;AAAA,IACL,QAAQ,aAAa,EAAE;AAAA,IACvB;AAAA,IACA;AAAA,IACA;AAAA,IACA,MAAM;AAAA,IACN,OAAO,MAAM,YAAY,EAAE;AAAA,EAC7B;AACF;","names":["dictionaryId"]}

package/dist/esm/DictionaryListDrawer/DictionaryListDrawer.mjs

@@ -1,29 +1,50 @@
-import { jsx } from "react/jsx-runtime";
+"use client";
+import { Fragment, jsx } from "react/jsx-runtime";
 import {
   RightDrawer,
   Button,
-  useEditedContentStore
+  useEditedContentStore,
+  useEditionPanelStore,
+  useRightDrawerStore
 } from "@intlayer/design-system";
 import { useGetAllDictionaries } from "@intlayer/design-system/hooks";
 import { ChevronRight } from "lucide-react";
-import { useDictionaryEditionDrawerControl } from '../DictionaryEditionDrawer/index.mjs';
-import {
-  dictionaryListDrawerIdentifier,
-  useDictionaryListDrawer
-} from './useDictionaryListDrawer.mjs';
+import { useCallback, useMemo } from "react";
+import { useShallow } from "zustand/shallow";
+import { getDrawerIdentifier } from '../DictionaryEditionDrawer/useDictionaryEditionDrawer.mjs';
+import { dictionaryListDrawerIdentifier } from './dictionaryListDrawerIdentifier.mjs';
 const DictionaryListDrawer = () => {
   const { all: dictionaries } = useGetAllDictionaries();
-  const dictionaryKeyList = Object.keys(dictionaries);
-  const { open: openDictionaryEditionDrawer } = useDictionaryEditionDrawerControl();
-  const { close } = useDictionaryListDrawer();
-  const editedContent = useEditedContentStore((s) => s.editedContent);
+  const dictionaryKeyList = useMemo(
+    () => Object.keys(dictionaries),
+    [dictionaries]
+  );
+  const { closeDrawer, openDrawer } = useRightDrawerStore(
+    useShallow((s) => ({
+      closeDrawer: s.close,
+      openDrawer: s.open
+    }))
+  );
+  const editedContent = useEditedContentStore(
+    useShallow((s) => s.editedContent)
+  );
+  const setFocusedContent = useEditionPanelStore(
+    useShallow((s) => s.setFocusedContent)
+  );
   const handleClickDictionary = (dictionaryId) => {
+    closeDrawer(dictionaryListDrawerIdentifier);
     const { filePath } = dictionaries[dictionaryId];
-    close();
-    openDictionaryEditionDrawer({ dictionaryId, dictionaryPath: filePath });
+    setFocusedContent({
+      dictionaryId,
+      dictionaryPath: filePath
+    });
+    openDrawer(getDrawerIdentifier(dictionaryId));
   };
-  const isDictionaryEdited = (dictionaryId) => Object.keys(editedContent).includes(dictionaryId);
-  return /* @__PURE__ */ jsx(
+  const isDictionaryEdited = useCallback(
+    (dictionaryId) => Object.keys(editedContent).includes(dictionaryId),
+    [editedContent]
+  );
+  return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx(
     RightDrawer,
     {
       title: "Dictionary list",
@@ -42,7 +63,7 @@ const DictionaryListDrawer = () => {
         }
       ) }, dictionaryId))
     }
-  );
+  ) });
 };
 export {
   DictionaryListDrawer

package/dist/esm/DictionaryListDrawer/DictionaryListDrawer.mjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/DictionaryListDrawer/DictionaryListDrawer.tsx"],"sourcesContent":["import type { Locales } from '@intlayer/config/client';\nimport {\n  RightDrawer,\n  Button,\n  useEditedContentStore,\n} from '@intlayer/design-system';\nimport { useGetAllDictionaries } from '@intlayer/design-system/hooks';\nimport { ChevronRight } from 'lucide-react';\nimport type { FC } from 'react';\nimport { useDictionaryEditionDrawerControl } from '../DictionaryEditionDrawer/index';\nimport {\n  dictionaryListDrawerIdentifier,\n  useDictionaryListDrawer,\n} from './useDictionaryListDrawer';\n\nexport const DictionaryListDrawer: FC = () => {\n  const { all: dictionaries } = useGetAllDictionaries();\n  const dictionaryKeyList = Object.keys(dictionaries) as Locales[];\n  const { open: openDictionaryEditionDrawer } =\n    useDictionaryEditionDrawerControl();\n  const { close } = useDictionaryListDrawer();\n  const editedContent = useEditedContentStore((s) => s.editedContent);\n\n  const handleClickDictionary = (dictionaryId: string) => {\n    const { filePath } = dictionaries[dictionaryId];\n\n    close();\n    openDictionaryEditionDrawer({ dictionaryId, dictionaryPath: filePath });\n  };\n\n  const isDictionaryEdited = (dictionaryId: string) =>\n    Object.keys(editedContent).includes(dictionaryId);\n\n  return (\n    <RightDrawer\n      title=\"Dictionary list\"\n      identifier={dictionaryListDrawerIdentifier}\n    >\n      {dictionaryKeyList.map((dictionaryId) => (\n        <div key={dictionaryId}>\n          <Button\n            label={`Open dictionary editor ${dictionaryId}`}\n            onClick={() => handleClickDictionary(dictionaryId)}\n            variant=\"hoverable\"\n            color=\"text\"\n            IconRight={ChevronRight}\n            size=\"md\"\n            isFullWidth\n          >\n            {isDictionaryEdited(dictionaryId)\n              ? `✎ ${dictionaryId}`\n              : dictionaryId}\n          </Button>\n        </div>\n      ))}\n    </RightDrawer>\n  );\n};\n"],"mappings":"AAwCU;AAvCV;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,6BAA6B;AACtC,SAAS,oBAAoB;AAE7B,SAAS,yCAAyC;AAClD;AAAA,EACE;AAAA,EACA;AAAA,OACK;AAEA,MAAM,uBAA2B,MAAM;AAC5C,QAAM,EAAE,KAAK,aAAa,IAAI,sBAAsB;AACpD,QAAM,oBAAoB,OAAO,KAAK,YAAY;AAClD,QAAM,EAAE,MAAM,4BAA4B,IACxC,kCAAkC;AACpC,QAAM,EAAE,MAAM,IAAI,wBAAwB;AAC1C,QAAM,gBAAgB,sBAAsB,CAAC,MAAM,EAAE,aAAa;AAElE,QAAM,wBAAwB,CAAC,iBAAyB;AACtD,UAAM,EAAE,SAAS,IAAI,aAAa,YAAY;AAE9C,UAAM;AACN,gCAA4B,EAAE,cAAc,gBAAgB,SAAS,CAAC;AAAA,EACxE;AAEA,QAAM,qBAAqB,CAAC,iBAC1B,OAAO,KAAK,aAAa,EAAE,SAAS,YAAY;AAElD,SACE;AAAA,IAAC;AAAA;AAAA,MACC,OAAM;AAAA,MACN,YAAY;AAAA,MAEX,4BAAkB,IAAI,CAAC,iBACtB,oBAAC,SACC;AAAA,QAAC;AAAA;AAAA,UACC,OAAO,0BAA0B,YAAY;AAAA,UAC7C,SAAS,MAAM,sBAAsB,YAAY;AAAA,UACjD,SAAQ;AAAA,UACR,OAAM;AAAA,UACN,WAAW;AAAA,UACX,MAAK;AAAA,UACL,aAAW;AAAA,UAEV,6BAAmB,YAAY,IAC5B,UAAK,YAAY,KACjB;AAAA;AAAA,MACN,KAbQ,YAcV,CACD;AAAA;AAAA,EACH;AAEJ;","names":[]}
+{"version":3,"sources":["../../../src/DictionaryListDrawer/DictionaryListDrawer.tsx"],"sourcesContent":["'use client';\n\nimport { Locales } from '@intlayer/config';\nimport {\n  RightDrawer,\n  Button,\n  useEditedContentStore,\n  useEditionPanelStore,\n  useRightDrawerStore,\n} from '@intlayer/design-system';\nimport { useGetAllDictionaries } from '@intlayer/design-system/hooks';\nimport { ChevronRight } from 'lucide-react';\nimport { useCallback, useMemo, FC } from 'react';\nimport { useShallow } from 'zustand/shallow';\nimport { getDrawerIdentifier } from '../DictionaryEditionDrawer/useDictionaryEditionDrawer';\nimport { dictionaryListDrawerIdentifier } from './dictionaryListDrawerIdentifier';\n\nexport const DictionaryListDrawer: FC = () => {\n  const { all: dictionaries } = useGetAllDictionaries();\n  const dictionaryKeyList = useMemo(\n    () => Object.keys(dictionaries) as Locales[],\n    [dictionaries]\n  );\n\n  const { closeDrawer, openDrawer } = useRightDrawerStore(\n    useShallow((s) => ({\n      closeDrawer: s.close,\n      openDrawer: s.open,\n    }))\n  );\n\n  const editedContent = useEditedContentStore(\n    useShallow((s) => s.editedContent)\n  );\n  const setFocusedContent = useEditionPanelStore(\n    useShallow((s) => s.setFocusedContent)\n  );\n\n  const handleClickDictionary = (dictionaryId: string) => {\n    closeDrawer(dictionaryListDrawerIdentifier);\n\n    const { filePath } = dictionaries[dictionaryId];\n    setFocusedContent({\n      dictionaryId,\n      dictionaryPath: filePath,\n    });\n\n    openDrawer(getDrawerIdentifier(dictionaryId));\n  };\n\n  const isDictionaryEdited = useCallback(\n    (dictionaryId: string) => Object.keys(editedContent).includes(dictionaryId),\n    [editedContent]\n  );\n\n  return (\n    <>\n      <RightDrawer\n        title=\"Dictionary list\"\n        identifier={dictionaryListDrawerIdentifier}\n      >\n        {dictionaryKeyList.map((dictionaryId) => (\n          <div key={dictionaryId}>\n            <Button\n              label={`Open dictionary editor ${dictionaryId}`}\n              onClick={() => handleClickDictionary(dictionaryId)}\n              variant=\"hoverable\"\n              color=\"text\"\n              IconRight={ChevronRight}\n              size=\"md\"\n              isFullWidth\n            >\n              {isDictionaryEdited(dictionaryId)\n                ? `✎ ${dictionaryId}`\n                : dictionaryId}\n            </Button>\n          </div>\n        ))}\n      </RightDrawer>\n    </>\n  );\n};\n"],"mappings":";AAwDI,mBAOQ,WAPR;AArDJ;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,6BAA6B;AACtC,SAAS,oBAAoB;AAC7B,SAAS,aAAa,eAAmB;AACzC,SAAS,kBAAkB;AAC3B,SAAS,2BAA2B;AACpC,SAAS,sCAAsC;AAExC,MAAM,uBAA2B,MAAM;AAC5C,QAAM,EAAE,KAAK,aAAa,IAAI,sBAAsB;AACpD,QAAM,oBAAoB;AAAA,IACxB,MAAM,OAAO,KAAK,YAAY;AAAA,IAC9B,CAAC,YAAY;AAAA,EACf;AAEA,QAAM,EAAE,aAAa,WAAW,IAAI;AAAA,IAClC,WAAW,CAAC,OAAO;AAAA,MACjB,aAAa,EAAE;AAAA,MACf,YAAY,EAAE;AAAA,IAChB,EAAE;AAAA,EACJ;AAEA,QAAM,gBAAgB;AAAA,IACpB,WAAW,CAAC,MAAM,EAAE,aAAa;AAAA,EACnC;AACA,QAAM,oBAAoB;AAAA,IACxB,WAAW,CAAC,MAAM,EAAE,iBAAiB;AAAA,EACvC;AAEA,QAAM,wBAAwB,CAAC,iBAAyB;AACtD,gBAAY,8BAA8B;AAE1C,UAAM,EAAE,SAAS,IAAI,aAAa,YAAY;AAC9C,sBAAkB;AAAA,MAChB;AAAA,MACA,gBAAgB;AAAA,IAClB,CAAC;AAED,eAAW,oBAAoB,YAAY,CAAC;AAAA,EAC9C;AAEA,QAAM,qBAAqB;AAAA,IACzB,CAAC,iBAAyB,OAAO,KAAK,aAAa,EAAE,SAAS,YAAY;AAAA,IAC1E,CAAC,aAAa;AAAA,EAChB;AAEA,SACE,gCACE;AAAA,IAAC;AAAA;AAAA,MACC,OAAM;AAAA,MACN,YAAY;AAAA,MAEX,4BAAkB,IAAI,CAAC,iBACtB,oBAAC,SACC;AAAA,QAAC;AAAA;AAAA,UACC,OAAO,0BAA0B,YAAY;AAAA,UAC7C,SAAS,MAAM,sBAAsB,YAAY;AAAA,UACjD,SAAQ;AAAA,UACR,OAAM;AAAA,UACN,WAAW;AAAA,UACX,MAAK;AAAA,UACL,aAAW;AAAA,UAEV,6BAAmB,YAAY,IAC5B,UAAK,YAAY,KACjB;AAAA;AAAA,MACN,KAbQ,YAcV,CACD;AAAA;AAAA,EACH,GACF;AAEJ;","names":[]}

package/dist/esm/DictionaryListDrawer/dictionaryListDrawerIdentifier.mjs

@@ -0,0 +1,5 @@
+const dictionaryListDrawerIdentifier = "dictionaryList";
+export {
+  dictionaryListDrawerIdentifier
+};
+//# sourceMappingURL=dictionaryListDrawerIdentifier.mjs.map

package/dist/esm/DictionaryListDrawer/dictionaryListDrawerIdentifier.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/DictionaryListDrawer/dictionaryListDrawerIdentifier.ts"],"sourcesContent":["export const dictionaryListDrawerIdentifier = 'dictionaryList';\n"],"mappings":"AAAO,MAAM,iCAAiC;","names":[]}

package/dist/esm/DictionaryListDrawer/index.mjs

@@ -1,3 +1,3 @@
 export * from './DictionaryListDrawer.mjs';
-export * from './useDictionaryListDrawer.mjs';
+export * from './dictionaryListDrawerIdentifier.mjs';
 //# sourceMappingURL=index.mjs.map

package/dist/esm/DictionaryListDrawer/index.mjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/DictionaryListDrawer/index.ts"],"sourcesContent":["export * from './DictionaryListDrawer';\nexport * from './useDictionaryListDrawer';\n"],"mappings":"AAAA,cAAc;AACd,cAAc;","names":[]}
+{"version":3,"sources":["../../../src/DictionaryListDrawer/index.ts"],"sourcesContent":["export * from './DictionaryListDrawer';\nexport * from './dictionaryListDrawerIdentifier';\n"],"mappings":"AAAA,cAAc;AACd,cAAc;","names":[]}

package/dist/types/ContentSelectorWrapper.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ContentSelectorWrapper.d.ts","sourceRoot":"","sources":["../../src/ContentSelectorWrapper.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAiB,KAAK,OAAO,EAAE,MAAM,gBAAgB,CAAC;AAE7D,OAAO,EAIL,KAAK,EAAE,EACP,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAIf,KAAK,2BAA2B,GAAG;IACjC,QAAQ,EAAE,SAAS,CAAC;IACpB,YAAY,EAAE,MAAM,CAAC;IACrB,cAAc,EAAE,MAAM,CAAC;IACvB,OAAO,EAAE,OAAO,EAAE,CAAC;CACpB,CAAC;AAEF,eAAO,MAAM,sBAAsB,EAAE,EAAE,CAAC,2BAA2B,CA6ClE,CAAC"}
+{"version":3,"file":"ContentSelectorWrapper.d.ts","sourceRoot":"","sources":["../../src/ContentSelectorWrapper.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAiB,KAAK,OAAO,EAAE,MAAM,gBAAgB,CAAC;AAE7D,OAAO,EAKL,KAAK,EAAE,EACP,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAIf,KAAK,2BAA2B,GAAG;IACjC,QAAQ,EAAE,SAAS,CAAC;IACpB,YAAY,EAAE,MAAM,CAAC;IACrB,cAAc,EAAE,MAAM,CAAC;IACvB,OAAO,EAAE,OAAO,EAAE,CAAC;CACpB,CAAC;AAEF,eAAO,MAAM,sBAAsB,EAAE,EAAE,CAAC,2BAA2B,CAgDlE,CAAC"}

package/dist/types/DictionaryEditionDrawer/DictionaryEditionDrawer.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DictionaryEditionDrawer.d.ts","sourceRoot":"","sources":["../../../src/DictionaryEditionDrawer/DictionaryEditionDrawer.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,yBAAyB,CAAC;AAWvD,OAAO,EAAoC,KAAK,EAAE,EAAE,MAAM,OAAO,CAAC;AAElE,OAAO,EACL,KAAK,WAAW,IAAI,6BAA6B,EAGlD,MAAM,8BAA8B,CAAC;AAEtC,KAAK,mCAAmC,GAAG;IACzC,cAAc,EAAE,6BAA6B,CAAC;IAC9C,MAAM,EAAE,OAAO,CAAC;IAChB,UAAU,EAAE,MAAM,CAAC;IACnB,YAAY,EAAE,MAAM,IAAI,CAAC;CAC1B,CAAC;AAEF,eAAO,MAAM,8BAA8B,EAAE,EAAE,CAC7C,mCAAmC,CAkDpC,CAAC;AAEF,KAAK,4BAA4B,GAAG,sCAAsC,GAAG;IAC3E,YAAY,EAAE,MAAM,CAAC;CACtB,CAAC;AAEF,eAAO,MAAM,uBAAuB,EAAE,EAAE,CAAC,4BAA4B,CA0CpE,CAAC;AAEF,KAAK,sCAAsC,GAAG;IAC5C,MAAM,EAAE,OAAO,CAAC;IAChB,UAAU,EAAE,OAAO,EAAE,CAAC;IACtB,SAAS,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;CACtC,CAAC;AAEF,eAAO,MAAM,iCAAiC,EAAE,EAAE,CAChD,sCAAsC,CAiBvC,CAAC"}
+{"version":3,"file":"DictionaryEditionDrawer.d.ts","sourceRoot":"","sources":["../../../src/DictionaryEditionDrawer/DictionaryEditionDrawer.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,yBAAyB,CAAC;AAYvD,OAAO,EAAoC,KAAK,EAAE,EAAE,MAAM,OAAO,CAAC;AAIlE,OAAO,EACL,KAAK,WAAW,IAAI,6BAA6B,EAGlD,MAAM,8BAA8B,CAAC;AAEtC,KAAK,mCAAmC,GAAG;IACzC,cAAc,EAAE,6BAA6B,CAAC;IAC9C,MAAM,EAAE,OAAO,CAAC;IAChB,UAAU,EAAE,MAAM,CAAC;IACnB,YAAY,EAAE,MAAM,IAAI,CAAC;CAC1B,CAAC;AAEF,eAAO,MAAM,8BAA8B,EAAE,EAAE,CAC7C,mCAAmC,CAsDpC,CAAC;AAEF,KAAK,4BAA4B,GAAG,sCAAsC,GAAG;IAC3E,YAAY,EAAE,MAAM,CAAC;CACtB,CAAC;AAEF,eAAO,MAAM,uBAAuB,EAAE,EAAE,CAAC,4BAA4B,CAgDpE,CAAC;AAEF,KAAK,sCAAsC,GAAG;IAC5C,MAAM,EAAE,OAAO,CAAC;IAChB,UAAU,EAAE,OAAO,EAAE,CAAC;IACtB,SAAS,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;CACtC,CAAC;AAEF,eAAO,MAAM,iCAAiC,EAAE,EAAE,CAChD,sCAAsC,CAmBvC,CAAC"}

package/dist/types/DictionaryEditionDrawer/useDictionaryEditionDrawer.d.ts

@@ -16,10 +16,5 @@ type DictionaryEditionDrawer = {
     getEditedContentValue: (dictionaryId: DictionaryId, keyPath: KeyPath[]) => DictionaryValue | undefined;
 };
 export declare const useDictionaryEditionDrawer: (dictionaryId: string) => DictionaryEditionDrawer;
-type DictionaryEditionDrawerControl = {
-    open: (content: FileContent) => void;
-    close: (dictionaryId: string) => void;
-};
-export declare const useDictionaryEditionDrawerControl: () => DictionaryEditionDrawerControl;
 export {};
 //# sourceMappingURL=useDictionaryEditionDrawer.d.ts.map

package/dist/types/DictionaryEditionDrawer/useDictionaryEditionDrawer.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useDictionaryEditionDrawer.d.ts","sourceRoot":"","sources":["../../../src/DictionaryEditionDrawer/useDictionaryEditionDrawer.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,eAAe,EAAE,OAAO,EAAE,MAAM,gBAAgB,CAAC;AAO3E,eAAO,MAAM,mBAAmB,iBAAkB,MAAM,WAClB,CAAC;AAEvC,KAAK,YAAY,GAAG,MAAM,CAAC;AAC3B,KAAK,cAAc,GAAG,MAAM,CAAC;AAE7B,MAAM,MAAM,WAAW,GAAG;IACxB,cAAc,CAAC,EAAE,cAAc,CAAC;IAChC,YAAY,EAAE,MAAM,CAAC;IACrB,OAAO,CAAC,EAAE,OAAO,EAAE,CAAC;CACrB,CAAC;AAEF,KAAK,uBAAuB,GAAG;IAC7B,cAAc,EAAE,WAAW,GAAG,IAAI,CAAC;IACnC,MAAM,EAAE,OAAO,CAAC;IAChB,IAAI,EAAE,CAAC,OAAO,EAAE,WAAW,KAAK,IAAI,CAAC;IACrC,KAAK,EAAE,MAAM,IAAI,CAAC;IAClB,qBAAqB,EAAE,CACrB,kBAAkB,EAAE,MAAM,CAAC,YAAY,EAAE,UAAU,CAAC,KACjD,IAAI,CAAC;IACV,qBAAqB,EAAE,CACrB,YAAY,EAAE,YAAY,EAC1B,OAAO,EAAE,OAAO,EAAE,KACf,eAAe,GAAG,SAAS,CAAC;CAClC,CAAC;AAQF,eAAO,MAAM,0BAA0B,iBACvB,MAAM,KACnB,uBAmCF,CAAC;AAEF,KAAK,8BAA8B,GAAG;IACpC,IAAI,EAAE,CAAC,OAAO,EAAE,WAAW,KAAK,IAAI,CAAC;IACrC,KAAK,EAAE,CAAC,YAAY,EAAE,MAAM,KAAK,IAAI,CAAC;CACvC,CAAC;AAEF,eAAO,MAAM,iCAAiC,QACxC,8BA6BH,CAAC"}
+{"version":3,"file":"useDictionaryEditionDrawer.d.ts","sourceRoot":"","sources":["../../../src/DictionaryEditionDrawer/useDictionaryEditionDrawer.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,eAAe,EAAE,OAAO,EAAE,MAAM,gBAAgB,CAAC;AAS3E,eAAO,MAAM,mBAAmB,iBAAkB,MAAM,WAClB,CAAC;AAEvC,KAAK,YAAY,GAAG,MAAM,CAAC;AAC3B,KAAK,cAAc,GAAG,MAAM,CAAC;AAE7B,MAAM,MAAM,WAAW,GAAG;IACxB,cAAc,CAAC,EAAE,cAAc,CAAC;IAChC,YAAY,EAAE,MAAM,CAAC;IACrB,OAAO,CAAC,EAAE,OAAO,EAAE,CAAC;CACrB,CAAC;AAEF,KAAK,uBAAuB,GAAG;IAC7B,cAAc,EAAE,WAAW,GAAG,IAAI,CAAC;IACnC,MAAM,EAAE,OAAO,CAAC;IAChB,IAAI,EAAE,CAAC,OAAO,EAAE,WAAW,KAAK,IAAI,CAAC;IACrC,KAAK,EAAE,MAAM,IAAI,CAAC;IAClB,qBAAqB,EAAE,CACrB,kBAAkB,EAAE,MAAM,CAAC,YAAY,EAAE,UAAU,CAAC,KACjD,IAAI,CAAC;IACV,qBAAqB,EAAE,CACrB,YAAY,EAAE,YAAY,EAC1B,OAAO,EAAE,OAAO,EAAE,KACf,eAAe,GAAG,SAAS,CAAC;CAClC,CAAC;AAQF,eAAO,MAAM,0BAA0B,iBACvB,MAAM,KACnB,uBAgDF,CAAC"}

package/dist/types/DictionaryListDrawer/DictionaryListDrawer.d.ts

@@ -1,3 +1,3 @@
-import type { FC } from 'react';
+import { FC } from 'react';
 export declare const DictionaryListDrawer: FC;
 //# sourceMappingURL=DictionaryListDrawer.d.ts.map

package/dist/types/DictionaryListDrawer/DictionaryListDrawer.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DictionaryListDrawer.d.ts","sourceRoot":"","sources":["../../../src/DictionaryListDrawer/DictionaryListDrawer.tsx"],"names":[],"mappings":"AAQA,OAAO,KAAK,EAAE,EAAE,EAAE,MAAM,OAAO,CAAC;AAOhC,eAAO,MAAM,oBAAoB,EAAE,EA0ClC,CAAC"}
+{"version":3,"file":"DictionaryListDrawer.d.ts","sourceRoot":"","sources":["../../../src/DictionaryListDrawer/DictionaryListDrawer.tsx"],"names":[],"mappings":"AAYA,OAAO,EAAwB,EAAE,EAAE,MAAM,OAAO,CAAC;AAKjD,eAAO,MAAM,oBAAoB,EAAE,EAgElC,CAAC"}

package/dist/types/DictionaryListDrawer/dictionaryListDrawerIdentifier.d.ts

@@ -0,0 +1,2 @@
+export declare const dictionaryListDrawerIdentifier = "dictionaryList";
+//# sourceMappingURL=dictionaryListDrawerIdentifier.d.ts.map

package/dist/types/DictionaryListDrawer/dictionaryListDrawerIdentifier.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"dictionaryListDrawerIdentifier.d.ts","sourceRoot":"","sources":["../../../src/DictionaryListDrawer/dictionaryListDrawerIdentifier.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,8BAA8B,mBAAmB,CAAC"}

package/dist/types/DictionaryListDrawer/index.d.ts

@@ -1,3 +1,3 @@
 export * from './DictionaryListDrawer';
-export * from './useDictionaryListDrawer';
+export * from './dictionaryListDrawerIdentifier';
 //# sourceMappingURL=index.d.ts.map

package/dist/types/DictionaryListDrawer/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/DictionaryListDrawer/index.ts"],"names":[],"mappings":"AAAA,cAAc,wBAAwB,CAAC;AACvC,cAAc,2BAA2B,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/DictionaryListDrawer/index.ts"],"names":[],"mappings":"AAAA,cAAc,wBAAwB,CAAC;AACvC,cAAc,kCAAkC,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "intlayer-editor",
-  "version": "3.3.5",
+  "version": "3.4.6",
   "private": false,
   "description": "IntLayer Editor is a tool that allow you to edit your IntLayer declaration files using a graphical interface.",
   "keywords": [
@@ -69,14 +69,14 @@
     "body-parser": "^1.20.3",
     "commander": "^12.1.0",
     "express": "^4.21.1",
-    "lucide-react": "^0.456.0",
+    "lucide-react": "^0.468.0",
     "magic-regexp": "^0.8.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "zustand": "^5.0.1",
-    "@intlayer/core": "^3.3.5",
-    "@intlayer/config": "^3.3.5",
-    "@intlayer/design-system": "^3.3.5"
+    "@intlayer/config": "^3.4.6",
+    "@intlayer/core": "^3.4.6",
+    "@intlayer/design-system": "^3.4.6"
   },
   "devDependencies": {
     "@babel/generator": "7.26.2",
@@ -103,10 +103,10 @@
     "@utils/tsup-config": "^1.0.4"
   },
   "peerDependencies": {
-    "@intlayer/config": "^3.3.5",
-    "@intlayer/design-system": "^3.3.5",
-    "@intlayer/core": "^3.3.5",
-    "react-intlayer": "^3.3.5"
+    "@intlayer/config": "^3.4.6",
+    "@intlayer/core": "^3.4.6",
+    "@intlayer/design-system": "^3.4.6",
+    "react-intlayer": "^3.4.6"
   },
   "engines": {
     "node": ">=14.18"

package/dist/cjs/DictionaryListDrawer/useDictionaryListDrawer.cjs.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../../../src/DictionaryListDrawer/useDictionaryListDrawer.ts"],"sourcesContent":["import { useRightDrawerStore } from '@intlayer/design-system';\n\nexport const dictionaryListDrawerIdentifier = 'dictionaryList';\n\nexport const useDictionaryListDrawer = () =>\n  useRightDrawerStore(dictionaryListDrawerIdentifier)();\n"],"mappings":";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,2BAAoC;AAE7B,MAAM,iCAAiC;AAEvC,MAAM,0BAA0B,UACrC,0CAAoB,8BAA8B,EAAE;","names":[]}

package/dist/esm/DictionaryListDrawer/useDictionaryListDrawer.mjs

@@ -1,8 +0,0 @@
-import { useRightDrawerStore } from "@intlayer/design-system";
-const dictionaryListDrawerIdentifier = "dictionaryList";
-const useDictionaryListDrawer = () => useRightDrawerStore(dictionaryListDrawerIdentifier)();
-export {
-  dictionaryListDrawerIdentifier,
-  useDictionaryListDrawer
-};
-//# sourceMappingURL=useDictionaryListDrawer.mjs.map

package/dist/esm/DictionaryListDrawer/useDictionaryListDrawer.mjs.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../../../src/DictionaryListDrawer/useDictionaryListDrawer.ts"],"sourcesContent":["import { useRightDrawerStore } from '@intlayer/design-system';\n\nexport const dictionaryListDrawerIdentifier = 'dictionaryList';\n\nexport const useDictionaryListDrawer = () =>\n  useRightDrawerStore(dictionaryListDrawerIdentifier)();\n"],"mappings":"AAAA,SAAS,2BAA2B;AAE7B,MAAM,iCAAiC;AAEvC,MAAM,0BAA0B,MACrC,oBAAoB,8BAA8B,EAAE;","names":[]}

package/dist/types/DictionaryListDrawer/useDictionaryListDrawer.d.ts

@@ -1,7 +0,0 @@
-export declare const dictionaryListDrawerIdentifier = "dictionaryList";
-export declare const useDictionaryListDrawer: () => {
-    isOpen: boolean;
-    open: () => void;
-    close: () => void;
-};
-//# sourceMappingURL=useDictionaryListDrawer.d.ts.map

package/dist/types/DictionaryListDrawer/useDictionaryListDrawer.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"useDictionaryListDrawer.d.ts","sourceRoot":"","sources":["../../../src/DictionaryListDrawer/useDictionaryListDrawer.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,8BAA8B,mBAAmB,CAAC;AAE/D,eAAO,MAAM,uBAAuB;;;;CACmB,CAAC"}