intlayer-editor 3.3.4 → 3.3.6

package/dist/cjs/DictionaryEditionDrawer/DictionaryEditionDrawer.cjs

@@ -28,6 +28,7 @@ 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_shallow = require("zustand/shallow");
 var import_useDictionaryListDrawer = require('../DictionaryListDrawer/useDictionaryListDrawer.cjs');
 var import_useDictionaryEditionDrawer = require('./useDictionaryEditionDrawer.cjs');
 const DictionaryEditionDrawerContent = ({ locale, identifier, handleOnBack }) => {
@@ -118,7 +119,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} from '@intlayer/design-system';\nimport { useGetAllDictionaries } from '@intlayer/design-system/hooks';\nimport { useCallback, useEffect, useState, type FC } from 'react';\nimport { useShallow } from 'zustand/shallow';\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(\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;AAoD4B;AAhD5B,2BAOO;AACP,mBAAsC;AACtC,mBAA0D;AAC1D,qBAA2B;AAC3B,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;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,35 +19,49 @@ 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 { isOpen, open, close } = (0, import_design_system.useRightDrawerStore)(id)(
+    (0, import_shallow.useShallow)((e) => ({
+      isOpen: e.isOpen,
+      open: e.open,
+      close: 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
+      });
+      open();
+    },
+    [open, setFocusedContent]
+  );
   return {
     isOpen,
     focusedContent,
@@ -57,34 +71,9 @@ const useDictionaryEditionDrawer = (dictionaryId) => {
     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
-  };
-};
 // 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 { isOpen, open, close } = useRightDrawerStore(id)(\n    useShallow((e) => ({\n      isOpen: e.isOpen,\n      open: e.open,\n      close: 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      open();\n    },\n    [open, setFocusedContent]\n  );\n\n  return {\n    isOpen,\n    focusedContent,\n    setDictionariesRecord,\n    getEditedContentValue,\n    open: openDictionaryEditionDrawer,\n    close,\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,QAAQ,MAAM,MAAM,QAAI,0CAAoB,EAAE;AAAA,QACpD,2BAAW,CAAC,OAAO;AAAA,MACjB,QAAQ,EAAE;AAAA,MACV,MAAM,EAAE;AAAA,MACR,OAAO,EAAE;AAAA,IACX,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,WAAK;AAAA,IACP;AAAA,IACA,CAAC,MAAM,iBAAiB;AAAA,EAC1B;AAEA,SAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,MAAM;AAAA,IACN;AAAA,EACF;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,40 +26,66 @@ 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_react = require("react");
+var import_shallow = require("zustand/shallow");
+var import_useDictionaryEditionDrawer = require('../DictionaryEditionDrawer/useDictionaryEditionDrawer.cjs');
 var import_useDictionaryListDrawer = require('./useDictionaryListDrawer.cjs');
+const DictionaryDrawerConnector = ({
+  dictionaryId
+}) => {
+  const rightDrawerStore = (0, import_design_system.useRightDrawerStore)(dictionaryId)();
+  (0, import_react.useEffect)(() => {
+    rightDrawerStore.open();
+  }, [rightDrawerStore]);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, {});
+};
 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 { closeDictionaryListDrawer } = (0, import_useDictionaryListDrawer.useDictionaryListDrawer)(
+    (0, import_shallow.useShallow)((s) => ({
+      closeDictionaryListDrawer: s.close
+    }))
+  );
+  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 [clickedDictionaryId, setClickedDictionaryId] = (0, import_react.useState)();
   const handleClickDictionary = (dictionaryId) => {
+    closeDictionaryListDrawer();
     const { filePath } = dictionaries[dictionaryId];
-    close();
-    openDictionaryEditionDrawer({ dictionaryId, dictionaryPath: filePath });
+    setFocusedContent({
+      dictionaryId,
+      dictionaryPath: filePath
+    });
+    setClickedDictionaryId((0, import_useDictionaryEditionDrawer.getDrawerIdentifier)(dictionaryId));
   };
-  const isDictionaryEdited = (dictionaryId) => Object.keys(editedContent).includes(dictionaryId);
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-    import_design_system.RightDrawer,
-    {
-      title: "Dictionary list",
-      identifier: import_useDictionaryListDrawer.dictionaryListDrawerIdentifier,
-      children: dictionaryKeyList.map((dictionaryId) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-        import_design_system.Button,
-        {
-          label: `Open dictionary editor ${dictionaryId}`,
-          onClick: () => handleClickDictionary(dictionaryId),
-          variant: "hoverable",
-          color: "text",
-          IconRight: import_lucide_react.ChevronRight,
-          size: "md",
-          isFullWidth: true,
-          children: isDictionaryEdited(dictionaryId) ? `\u270E ${dictionaryId}` : dictionaryId
-        }
-      ) }, dictionaryId))
-    }
+  const isDictionaryEdited = (0, import_react.useCallback)(
+    (dictionaryId) => Object.keys(editedContent).includes(dictionaryId),
+    [editedContent]
   );
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+    clickedDictionaryId && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(DictionaryDrawerConnector, { dictionaryId: clickedDictionaryId }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_design_system.RightDrawer, { title: "Dictionary list", identifier: "dictionaryListDrawer", children: dictionaryKeyList.map((dictionaryId) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_design_system.Button,
+      {
+        label: `Open dictionary editor ${dictionaryId}`,
+        onClick: () => handleClickDictionary(dictionaryId),
+        variant: "hoverable",
+        color: "text",
+        IconRight: import_lucide_react.ChevronRight,
+        size: "md",
+        isFullWidth: true,
+        children: isDictionaryEdited(dictionaryId) ? `\u270E ${dictionaryId}` : dictionaryId
+      }
+    ) }, 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 { useState, useEffect, useCallback, useMemo, FC } from 'react';\nimport { useShallow } from 'zustand/shallow';\nimport { getDrawerIdentifier } from '../DictionaryEditionDrawer/useDictionaryEditionDrawer';\nimport { useDictionaryListDrawer } from './useDictionaryListDrawer';\n\ntype DictionaryDrawerConnectorProps = {\n  dictionaryId: string;\n};\nconst DictionaryDrawerConnector: FC<DictionaryDrawerConnectorProps> = ({\n  dictionaryId,\n}) => {\n  const rightDrawerStore = useRightDrawerStore(dictionaryId)();\n\n  useEffect(() => {\n    rightDrawerStore.open();\n  }, [rightDrawerStore]);\n\n  return <></>;\n};\n\nexport const DictionaryListDrawer: FC = () => {\n  const { all: dictionaries } = useGetAllDictionaries();\n  const dictionaryKeyList = useMemo(\n    () => Object.keys(dictionaries) as Locales[],\n    [dictionaries]\n  );\n  const { closeDictionaryListDrawer } = useDictionaryListDrawer(\n    useShallow((s) => ({\n      closeDictionaryListDrawer: s.close,\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 [clickedDictionaryId, setClickedDictionaryId] = useState<string>();\n\n  const handleClickDictionary = (dictionaryId: string) => {\n    closeDictionaryListDrawer();\n\n    const { filePath } = dictionaries[dictionaryId];\n    setFocusedContent({\n      dictionaryId,\n      dictionaryPath: filePath,\n    });\n\n    setClickedDictionaryId(getDrawerIdentifier(dictionaryId));\n  };\n\n  const isDictionaryEdited = useCallback(\n    (dictionaryId: string) => Object.keys(editedContent).includes(dictionaryId),\n    [editedContent]\n  );\n\n  return (\n    <>\n      {clickedDictionaryId && (\n        <DictionaryDrawerConnector dictionaryId={clickedDictionaryId} />\n      )}\n      <RightDrawer title=\"Dictionary list\" identifier=\"dictionaryListDrawer\">\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;AA6BS;AA1BT,2BAMO;AACP,mBAAsC;AACtC,0BAA6B;AAC7B,mBAA8D;AAC9D,qBAA2B;AAC3B,wCAAoC;AACpC,qCAAwC;AAKxC,MAAM,4BAAgE,CAAC;AAAA,EACrE;AACF,MAAM;AACJ,QAAM,uBAAmB,0CAAoB,YAAY,EAAE;AAE3D,8BAAU,MAAM;AACd,qBAAiB,KAAK;AAAA,EACxB,GAAG,CAAC,gBAAgB,CAAC;AAErB,SAAO,2EAAE;AACX;AAEO,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;AACA,QAAM,EAAE,0BAA0B,QAAI;AAAA,QACpC,2BAAW,CAAC,OAAO;AAAA,MACjB,2BAA2B,EAAE;AAAA,IAC/B,EAAE;AAAA,EACJ;AACA,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,CAAC,qBAAqB,sBAAsB,QAAI,uBAAiB;AAEvE,QAAM,wBAAwB,CAAC,iBAAyB;AACtD,8BAA0B;AAE1B,UAAM,EAAE,SAAS,IAAI,aAAa,YAAY;AAC9C,sBAAkB;AAAA,MAChB;AAAA,MACA,gBAAgB;AAAA,IAClB,CAAC;AAED,+BAAuB,uDAAoB,YAAY,CAAC;AAAA,EAC1D;AAEA,QAAM,yBAAqB;AAAA,IACzB,CAAC,iBAAyB,OAAO,KAAK,aAAa,EAAE,SAAS,YAAY;AAAA,IAC1E,CAAC,aAAa;AAAA,EAChB;AAEA,SACE,4EACG;AAAA,2BACC,4CAAC,6BAA0B,cAAc,qBAAqB;AAAA,IAEhE,4CAAC,oCAAY,OAAM,mBAAkB,YAAW,wBAC7C,4BAAkB,IAAI,CAAC,iBACtB,4CAAC,SACC;AAAA,MAAC;AAAA;AAAA,QACC,OAAO,0BAA0B,YAAY;AAAA,QAC7C,SAAS,MAAM,sBAAsB,YAAY;AAAA,QACjD,SAAQ;AAAA,QACR,OAAM;AAAA,QACN,WAAW;AAAA,QACX,MAAK;AAAA,QACL,aAAW;AAAA,QAEV,6BAAmB,YAAY,IAC5B,UAAK,YAAY,KACjB;AAAA;AAAA,IACN,KAbQ,YAcV,CACD,GACH;AAAA,KACF;AAEJ;","names":[]}

package/dist/cjs/DictionaryListDrawer/useDictionaryListDrawer.cjs

@@ -24,7 +24,9 @@ __export(useDictionaryListDrawer_exports, {
 module.exports = __toCommonJS(useDictionaryListDrawer_exports);
 var import_design_system = require("@intlayer/design-system");
 const dictionaryListDrawerIdentifier = "dictionaryList";
-const useDictionaryListDrawer = () => (0, import_design_system.useRightDrawerStore)(dictionaryListDrawerIdentifier)();
+const useDictionaryListDrawer = (0, import_design_system.useRightDrawerStore)(
+  dictionaryListDrawerIdentifier
+);
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   dictionaryListDrawerIdentifier,

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

@@ -1 +1 @@
-{"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":[]}
+{"version":3,"sources":["../../../src/DictionaryListDrawer/useDictionaryListDrawer.ts"],"sourcesContent":["import { useRightDrawerStore } from '@intlayer/design-system';\n\nexport const dictionaryListDrawerIdentifier = 'dictionaryList';\n\nexport const useDictionaryListDrawer = useRightDrawerStore(\n  dictionaryListDrawerIdentifier\n);\n"],"mappings":";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,2BAAoC;AAE7B,MAAM,iCAAiC;AAEvC,MAAM,8BAA0B;AAAA,EACrC;AACF;","names":[]}

package/dist/esm/DictionaryEditionDrawer/DictionaryEditionDrawer.mjs

@@ -10,6 +10,7 @@ import {
 } from "@intlayer/design-system";
 import { useGetAllDictionaries } from "@intlayer/design-system/hooks";
 import { useCallback, useEffect, useState } from "react";
+import { useShallow } from "zustand/shallow";
 import { useDictionaryListDrawer } from '../DictionaryListDrawer/useDictionaryListDrawer.mjs';
 import {
   useDictionaryEditionDrawer,
@@ -103,7 +104,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} from '@intlayer/design-system';\nimport { useGetAllDictionaries } from '@intlayer/design-system/hooks';\nimport { useCallback, useEffect, useState, type FC } from 'react';\nimport { useShallow } from 'zustand/shallow';\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(\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":";AAoD4B,wBAKxB,YALwB;AAhD5B;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,6BAA6B;AACtC,SAAS,aAAa,WAAW,gBAAyB;AAC1D,SAAS,kBAAkB;AAC3B,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;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,30 +3,45 @@ 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 { isOpen, open, close } = useRightDrawerStore(id)(
+    useShallow((e) => ({
+      isOpen: e.isOpen,
+      open: e.open,
+      close: 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
+      });
+      open();
+    },
+    [open, setFocusedContent]
+  );
   return {
     isOpen,
     focusedContent,
@@ -36,33 +51,8 @@ const useDictionaryEditionDrawer = (dictionaryId) => {
     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
-  };
-};
 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 { isOpen, open, close } = useRightDrawerStore(id)(\n    useShallow((e) => ({\n      isOpen: e.isOpen,\n      open: e.open,\n      close: 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      open();\n    },\n    [open, setFocusedContent]\n  );\n\n  return {\n    isOpen,\n    focusedContent,\n    setDictionariesRecord,\n    getEditedContentValue,\n    open: openDictionaryEditionDrawer,\n    close,\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,QAAQ,MAAM,MAAM,IAAI,oBAAoB,EAAE;AAAA,IACpD,WAAW,CAAC,OAAO;AAAA,MACjB,QAAQ,EAAE;AAAA,MACV,MAAM,EAAE;AAAA,MACR,OAAO,EAAE;AAAA,IACX,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,WAAK;AAAA,IACP;AAAA,IACA,CAAC,MAAM,iBAAiB;AAAA,EAC1B;AAEA,SAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,MAAM;AAAA,IACN;AAAA,EACF;AACF;","names":["dictionaryId"]}

package/dist/esm/DictionaryListDrawer/DictionaryListDrawer.mjs

@@ -1,48 +1,74 @@
-import { jsx } from "react/jsx-runtime";
+"use client";
+import { Fragment, jsx, jsxs } 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 { useState, useEffect, useCallback, useMemo } from "react";
+import { useShallow } from "zustand/shallow";
+import { getDrawerIdentifier } from '../DictionaryEditionDrawer/useDictionaryEditionDrawer.mjs';
+import { useDictionaryListDrawer } from './useDictionaryListDrawer.mjs';
+const DictionaryDrawerConnector = ({
+  dictionaryId
+}) => {
+  const rightDrawerStore = useRightDrawerStore(dictionaryId)();
+  useEffect(() => {
+    rightDrawerStore.open();
+  }, [rightDrawerStore]);
+  return /* @__PURE__ */ jsx(Fragment, {});
+};
 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 { closeDictionaryListDrawer } = useDictionaryListDrawer(
+    useShallow((s) => ({
+      closeDictionaryListDrawer: s.close
+    }))
+  );
+  const editedContent = useEditedContentStore(
+    useShallow((s) => s.editedContent)
+  );
+  const setFocusedContent = useEditionPanelStore(
+    useShallow((s) => s.setFocusedContent)
+  );
+  const [clickedDictionaryId, setClickedDictionaryId] = useState();
   const handleClickDictionary = (dictionaryId) => {
+    closeDictionaryListDrawer();
     const { filePath } = dictionaries[dictionaryId];
-    close();
-    openDictionaryEditionDrawer({ dictionaryId, dictionaryPath: filePath });
+    setFocusedContent({
+      dictionaryId,
+      dictionaryPath: filePath
+    });
+    setClickedDictionaryId(getDrawerIdentifier(dictionaryId));
   };
-  const isDictionaryEdited = (dictionaryId) => Object.keys(editedContent).includes(dictionaryId);
-  return /* @__PURE__ */ jsx(
-    RightDrawer,
-    {
-      title: "Dictionary list",
-      identifier: dictionaryListDrawerIdentifier,
-      children: dictionaryKeyList.map((dictionaryId) => /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(
-        Button,
-        {
-          label: `Open dictionary editor ${dictionaryId}`,
-          onClick: () => handleClickDictionary(dictionaryId),
-          variant: "hoverable",
-          color: "text",
-          IconRight: ChevronRight,
-          size: "md",
-          isFullWidth: true,
-          children: isDictionaryEdited(dictionaryId) ? `\u270E ${dictionaryId}` : dictionaryId
-        }
-      ) }, dictionaryId))
-    }
+  const isDictionaryEdited = useCallback(
+    (dictionaryId) => Object.keys(editedContent).includes(dictionaryId),
+    [editedContent]
   );
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    clickedDictionaryId && /* @__PURE__ */ jsx(DictionaryDrawerConnector, { dictionaryId: clickedDictionaryId }),
+    /* @__PURE__ */ jsx(RightDrawer, { title: "Dictionary list", identifier: "dictionaryListDrawer", children: dictionaryKeyList.map((dictionaryId) => /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(
+      Button,
+      {
+        label: `Open dictionary editor ${dictionaryId}`,
+        onClick: () => handleClickDictionary(dictionaryId),
+        variant: "hoverable",
+        color: "text",
+        IconRight: ChevronRight,
+        size: "md",
+        isFullWidth: true,
+        children: isDictionaryEdited(dictionaryId) ? `\u270E ${dictionaryId}` : dictionaryId
+      }
+    ) }, 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 { useState, useEffect, useCallback, useMemo, FC } from 'react';\nimport { useShallow } from 'zustand/shallow';\nimport { getDrawerIdentifier } from '../DictionaryEditionDrawer/useDictionaryEditionDrawer';\nimport { useDictionaryListDrawer } from './useDictionaryListDrawer';\n\ntype DictionaryDrawerConnectorProps = {\n  dictionaryId: string;\n};\nconst DictionaryDrawerConnector: FC<DictionaryDrawerConnectorProps> = ({\n  dictionaryId,\n}) => {\n  const rightDrawerStore = useRightDrawerStore(dictionaryId)();\n\n  useEffect(() => {\n    rightDrawerStore.open();\n  }, [rightDrawerStore]);\n\n  return <></>;\n};\n\nexport const DictionaryListDrawer: FC = () => {\n  const { all: dictionaries } = useGetAllDictionaries();\n  const dictionaryKeyList = useMemo(\n    () => Object.keys(dictionaries) as Locales[],\n    [dictionaries]\n  );\n  const { closeDictionaryListDrawer } = useDictionaryListDrawer(\n    useShallow((s) => ({\n      closeDictionaryListDrawer: s.close,\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 [clickedDictionaryId, setClickedDictionaryId] = useState<string>();\n\n  const handleClickDictionary = (dictionaryId: string) => {\n    closeDictionaryListDrawer();\n\n    const { filePath } = dictionaries[dictionaryId];\n    setFocusedContent({\n      dictionaryId,\n      dictionaryPath: filePath,\n    });\n\n    setClickedDictionaryId(getDrawerIdentifier(dictionaryId));\n  };\n\n  const isDictionaryEdited = useCallback(\n    (dictionaryId: string) => Object.keys(editedContent).includes(dictionaryId),\n    [editedContent]\n  );\n\n  return (\n    <>\n      {clickedDictionaryId && (\n        <DictionaryDrawerConnector dictionaryId={clickedDictionaryId} />\n      )}\n      <RightDrawer title=\"Dictionary list\" identifier=\"dictionaryListDrawer\">\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":";AA6BS,wBAyCL,YAzCK;AA1BT;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,6BAA6B;AACtC,SAAS,oBAAoB;AAC7B,SAAS,UAAU,WAAW,aAAa,eAAmB;AAC9D,SAAS,kBAAkB;AAC3B,SAAS,2BAA2B;AACpC,SAAS,+BAA+B;AAKxC,MAAM,4BAAgE,CAAC;AAAA,EACrE;AACF,MAAM;AACJ,QAAM,mBAAmB,oBAAoB,YAAY,EAAE;AAE3D,YAAU,MAAM;AACd,qBAAiB,KAAK;AAAA,EACxB,GAAG,CAAC,gBAAgB,CAAC;AAErB,SAAO,gCAAE;AACX;AAEO,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;AACA,QAAM,EAAE,0BAA0B,IAAI;AAAA,IACpC,WAAW,CAAC,OAAO;AAAA,MACjB,2BAA2B,EAAE;AAAA,IAC/B,EAAE;AAAA,EACJ;AACA,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,CAAC,qBAAqB,sBAAsB,IAAI,SAAiB;AAEvE,QAAM,wBAAwB,CAAC,iBAAyB;AACtD,8BAA0B;AAE1B,UAAM,EAAE,SAAS,IAAI,aAAa,YAAY;AAC9C,sBAAkB;AAAA,MAChB;AAAA,MACA,gBAAgB;AAAA,IAClB,CAAC;AAED,2BAAuB,oBAAoB,YAAY,CAAC;AAAA,EAC1D;AAEA,QAAM,qBAAqB;AAAA,IACzB,CAAC,iBAAyB,OAAO,KAAK,aAAa,EAAE,SAAS,YAAY;AAAA,IAC1E,CAAC,aAAa;AAAA,EAChB;AAEA,SACE,iCACG;AAAA,2BACC,oBAAC,6BAA0B,cAAc,qBAAqB;AAAA,IAEhE,oBAAC,eAAY,OAAM,mBAAkB,YAAW,wBAC7C,4BAAkB,IAAI,CAAC,iBACtB,oBAAC,SACC;AAAA,MAAC;AAAA;AAAA,QACC,OAAO,0BAA0B,YAAY;AAAA,QAC7C,SAAS,MAAM,sBAAsB,YAAY;AAAA,QACjD,SAAQ;AAAA,QACR,OAAM;AAAA,QACN,WAAW;AAAA,QACX,MAAK;AAAA,QACL,aAAW;AAAA,QAEV,6BAAmB,YAAY,IAC5B,UAAK,YAAY,KACjB;AAAA;AAAA,IACN,KAbQ,YAcV,CACD,GACH;AAAA,KACF;AAEJ;","names":[]}

package/dist/esm/DictionaryListDrawer/useDictionaryListDrawer.mjs

@@ -1,6 +1,8 @@
 import { useRightDrawerStore } from "@intlayer/design-system";
 const dictionaryListDrawerIdentifier = "dictionaryList";
-const useDictionaryListDrawer = () => useRightDrawerStore(dictionaryListDrawerIdentifier)();
+const useDictionaryListDrawer = useRightDrawerStore(
+  dictionaryListDrawerIdentifier
+);
 export {
   dictionaryListDrawerIdentifier,
   useDictionaryListDrawer

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

@@ -1 +1 @@
-{"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":[]}
+{"version":3,"sources":["../../../src/DictionaryListDrawer/useDictionaryListDrawer.ts"],"sourcesContent":["import { useRightDrawerStore } from '@intlayer/design-system';\n\nexport const dictionaryListDrawerIdentifier = 'dictionaryList';\n\nexport const useDictionaryListDrawer = useRightDrawerStore(\n  dictionaryListDrawerIdentifier\n);\n"],"mappings":"AAAA,SAAS,2BAA2B;AAE7B,MAAM,iCAAiC;AAEvC,MAAM,0BAA0B;AAAA,EACrC;AACF;","names":[]}

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;AAWvD,OAAO,EAAoC,KAAK,EAAE,EAAE,MAAM,OAAO,CAAC;AAGlE,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,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,EAA6C,EAAE,EAAE,MAAM,OAAO,CAAC;AAoBtE,eAAO,MAAM,oBAAoB,EAAE,EA+DlC,CAAC"}

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

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

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

@@ -1 +1 @@
-{"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"}
+{"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;;;;GAEnC,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "intlayer-editor",
-  "version": "3.3.4",
+  "version": "3.3.6",
   "private": false,
   "description": "IntLayer Editor is a tool that allow you to edit your IntLayer declaration files using a graphical interface.",
   "keywords": [
@@ -73,11 +73,10 @@
     "magic-regexp": "^0.8.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
-    "webpack": "^5.96.1",
     "zustand": "^5.0.1",
-    "@intlayer/config": "^3.3.4",
-    "@intlayer/design-system": "^3.3.4",
-    "@intlayer/core": "^3.3.4"
+    "@intlayer/config": "^3.3.6",
+    "@intlayer/design-system": "^3.3.6",
+    "@intlayer/core": "^3.3.6"
   },
   "devDependencies": {
     "@babel/generator": "7.26.2",
@@ -99,15 +98,15 @@
     "tsup": "^8.3.5",
     "typescript": "^5.7.2",
     "@utils/eslint-config": "^1.0.4",
-    "@utils/ts-config": "^1.0.4",
     "@utils/ts-config-types": "^1.0.4",
-    "@utils/tsup-config": "^1.0.4"
+    "@utils/tsup-config": "^1.0.4",
+    "@utils/ts-config": "^1.0.4"
   },
   "peerDependencies": {
-    "@intlayer/config": "^3.3.4",
-    "@intlayer/core": "^3.3.4",
-    "@intlayer/design-system": "^3.3.4",
-    "react-intlayer": "^3.3.4"
+    "@intlayer/config": "^3.3.6",
+    "@intlayer/core": "^3.3.6",
+    "@intlayer/design-system": "^3.3.6",
+    "react-intlayer": "^3.3.6"
   },
   "engines": {
     "node": ">=14.18"
@@ -125,10 +124,6 @@
     "lint:fix": "eslint . --cache --fix",
     "prettier": "prettier . --check",
     "prettier:fix": "prettier . --write",
-    "serve": "webpack serve --config ./webpack.config.ts",
-    "start:dev": "node --experimental-specifier-resolution=node --loader ts-node/esm --watch src/index.ts",
-    "transpile": "webpack --config ./webpack.config.ts",
-    "typecheck": "tsup --project ./tsconfig.json --noEmit",
-    "watch": "webpack --config ./webpack.config.ts --watch"
+    "typecheck": "tsup --project ./tsconfig.json --noEmit"
   }
 }