@bit.rhplus/draggable-modal 0.0.12 → 0.0.14

package/RESIZING_GUIDE.md

@@ -0,0 +1,344 @@
+# Návod: Resize modálního okna bez knihovny
+
+Kompletní průvodce implementací resize (změna velikosti myší) na Ant Design 5 modálním okně v Reactu — bez použití jakékoliv resize knihovny.
+
+---
+
+## Kontext
+
+Komponenta `DraggableModal` rozšiřuje Ant Design `<Modal>` o drag (přetahování) pomocí `react-draggable`. Cílem bylo přidat i resize — změnu velikosti táhnutím za hrany/rohy.
+
+**Důležité:** `react-draggable` je výhradně pro drag. Resize nenabízí. Musíme ho implementovat ručně.
+
+---
+
+## Jak resize funguje — princip
+
+Resize funguje na třech fázích mouse eventů:
+
+```
+mousedown na handle → zapamatuj startovní pozici a rozměry
+  ↓
+mousemove na document → počítej delta, aktualizuj stav
+  ↓
+mouseup na document → ukonči resize, odregistruj listenery
+```
+
+Klíč je přidávat `mousemove`/`mouseup` na **`document`**, ne na handle. Jinak by myš opuštění handle resize přerušila.
+
+---
+
+## Krok 1: Stav pro rozměry
+
+```js
+const parseWidth = (w) => {
+  if (typeof w === 'number') return w;
+  if (typeof w === 'string') { const n = parseInt(w, 10); return isNaN(n) ? 520 : n; }
+  return 520;
+};
+
+const [modalSize, setModalSize] = React.useState({
+  width: parseWidth(props.width), // vždy číslo (ne "1400px")
+  height: null,                   // null = auto výška z obsahu
+});
+```
+
+**Proč `parseWidth`?**
+Ant Design přijímá `width` jako číslo i string (`"1400px"`). My potřebujeme číslo pro matematiku (`startW + dx`). Parsujeme hned při inicializaci.
+
+**Proč `height: null`?**
+Výchozí výška modalu je `auto` — určená obsahem. Výšku začínáme sledovat až při prvním resize (pak ji fixujeme na pixely).
+
+---
+
+## Krok 2: Resize handles — průhledné aktivní zóny
+
+Handles jsou prázdné `<div>` elementy bez viditelného obsahu. Stačí jim nastavit správný `cursor` a dostatečnou plochu pro klik.
+
+```css
+.drm-handle {
+  position: absolute;
+  z-index: 10;
+  user-select: none;
+  pointer-events: auto; /* KRITICKÉ — viz sekce Nástrahy */
+}
+
+/* Pravá hrana */
+.drm-handle-e  { top: 12px; right: -4px; width: 8px; height: calc(100% - 24px); cursor: e-resize; }
+
+/* Levá hrana */
+.drm-handle-w  { top: 12px; left: -4px;  width: 8px; height: calc(100% - 24px); cursor: w-resize; }
+
+/* Spodní hrana */
+.drm-handle-s  { bottom: -4px; left: 12px; width: calc(100% - 24px); height: 8px; cursor: s-resize; }
+
+/* Pravý dolní roh */
+.drm-handle-se { bottom: -4px; right: -4px; width: 16px; height: 16px; cursor: se-resize; }
+
+/* Levý dolní roh */
+.drm-handle-sw { bottom: -4px; left: -4px;  width: 16px; height: 16px; cursor: sw-resize; }
+```
+
+Handles jsou umístěny na `-4px` vně okna (polovina šířky 8px přesahuje). To vytváří přirozený aktivní prostor na samé hraně.
+
+---
+
+## Krok 3: Logika resize
+
+```js
+const handleResizeStart = (e, direction) => {
+  e.preventDefault();
+  e.stopPropagation(); // zabrání spuštění drag při tahu za handle
+
+  // Změříme aktuální rozměry z DOM (ne ze stavu — stav může být zaostalý)
+  const modalEl    = draggleRef.current?.querySelector('.ant-modal');
+  const contentEl  = draggleRef.current?.querySelector('.ant-modal-content');
+  const startX = e.clientX;
+  const startY = e.clientY;
+  const startW = modalEl?.offsetWidth   || modalSize.width;
+  const startH = contentEl?.offsetHeight || modalSize.height || 400;
+
+  const onMouseMove = (moveEvent) => {
+    const dx = moveEvent.clientX - startX; // kolik px jsme se posunuli
+    const dy = moveEvent.clientY - startY;
+
+    setModalSize(prev => {
+      let newW = prev.width;
+      let newH = prev.height !== null ? prev.height : startH;
+
+      if (direction.includes('e')) newW = Math.max(300, startW + dx); // tah doprava
+      if (direction.includes('w')) newW = Math.max(300, startW - dx); // tah doleva
+      if (direction.includes('s')) newH = Math.max(200, startH + dy); // tah dolů
+
+      return { width: newW, height: newH };
+    });
+  };
+
+  const onMouseUp = () => {
+    document.removeEventListener('mousemove', onMouseMove);
+    document.removeEventListener('mouseup', onMouseUp);
+  };
+
+  // DŮLEŽITÉ: listenery na document, ne na handle
+  document.addEventListener('mousemove', onMouseMove);
+  document.addEventListener('mouseup', onMouseUp);
+};
+```
+
+**Proč čteme z DOM a ne ze stavu?**
+Při zahájení resize chceme **aktuální vizuální rozměry**. Stav `modalSize` může být zaostalý o render cyklus. `offsetWidth`/`offsetHeight` vrací vždy aktuální hodnotu z DOM.
+
+**Minimální rozměry:**
+`Math.max(300, ...)` a `Math.max(200, ...)` zabrání zborcení layoutu.
+
+---
+
+## Krok 4: Aplikace rozměrů na modal
+
+```jsx
+<Modal
+  {...props}
+  width={resizable ? modalSize.width : props.width}
+  styles={resolveStyles()}
+>
+```
+
+```js
+const resolveStyles = () => {
+  if (resizable && modalSize.height !== null) {
+    return {
+      body: {
+        paddingBottom: '30px',
+        height: `calc(${modalSize.height}px - 110px)`, // odečteme header + footer
+        overflow: 'auto',
+        display: 'flex',
+        flexDirection: 'column',
+      },
+      content: {
+        height: `${modalSize.height}px`,
+        display: 'flex',
+        flexDirection: 'column',
+      },
+    };
+  }
+  // ... fallback pro statický height prop
+};
+```
+
+`110px` je odhadovaná výška headeru + footeru. `overflow: auto` na body zajistí scrollování při přetečení obsahu.
+
+---
+
+## Krok 5: Kam umístit handles — nástraha Ant Design
+
+Naivní přístup: vložit handles přímo do `modalRender` wrapperu:
+
+```jsx
+// ❌ NEFUNGUJE
+modalRender={(modal) => (
+  <Draggable>
+    <div ref={draggleRef}>
+      {modal}
+      {resizeHandles} {/* <-- tady NE */}
+    </div>
+  </Draggable>
+)}
+```
+
+**Proč ne?** Wrapper div je block-level element — má šířku `100% viewportu`. Handles s `position: absolute; right: -4px` se zobrazí na okraji viewportu, ne modálního okna. Uživatel je nevidí.
+
+```
+.ant-modal-wrap (100vw)
+  [draggleRef div = 100vw]      ← handles jsou tady → špatně
+    .ant-modal (1400px, margin:auto)
+      .ant-modal-content
+```
+
+### Správné řešení: ReactDOM.createPortal do `.ant-modal-content`
+
+```jsx
+// ✅ SPRÁVNĚ
+{resizable && antModalEl && ReactDOM.createPortal(resizeHandles, antModalEl)}
+// antModalEl = element .ant-modal-content
+```
+
+`.ant-modal-content` má `position: relative` → handles s `position: absolute` jsou relativní k němu. Handles jsou přesně na hranách viditelného okna.
+
+```
+.ant-modal-content (position: relative)  ← portal target
+  .ant-modal-header
+  .ant-modal-body
+  .ant-modal-footer
+  [drm-handle-e]   ← position: absolute, right: -4px  ✓
+  [drm-handle-se]  ← position: absolute, bottom: -4px, right: -4px  ✓
+```
+
+---
+
+## Krok 6: Detekce `.ant-modal-content` elementu
+
+Portal cíl musíme najít v DOM poté, co Ant Design modal narenduje. Použijeme `useLayoutEffect` — běží synchronně po DOM mutaci:
+
+```js
+const [antModalEl, setAntModalEl] = React.useState(null);
+
+React.useLayoutEffect(() => {
+  if (resizable && open && draggleRef.current) {
+    setAntModalEl(draggleRef.current.querySelector('.ant-modal-content'));
+  } else {
+    setAntModalEl(null);
+  }
+}, [resizable, open]);
+```
+
+**Proč `useLayoutEffect` a ne `useEffect`?**
+`useEffect` běží asynchronně po paint — uživatel by na první render viděl modal bez handles. `useLayoutEffect` běží synchronně před paint, takže handles se objeví ihned s modalem (druhý render, ale bez vizuálního bliknutí).
+
+**Tok na první otevření:**
+1. `open` změní na `true` → první render → `antModalEl` je `null` → handles se nevykreslí
+2. `useLayoutEffect` najde `.ant-modal-content`, zavolá `setAntModalEl`
+3. Druhý render → handles se vykreslí přes portal
+4. Vše synchronní — uživatel nevidí blikání
+
+---
+
+## Nástraha: `pointer-events: none` na `.ant-modal`
+
+Ant Design 5 nastavuje na `.ant-modal`:
+
+```js
+// node_modules/antd/es/modal/style/index.js
+'.ant-modal': {
+  pointerEvents: 'none', // ← zabraňuje klikům mimo .ant-modal-content
+}
+'.ant-modal-content': {
+  pointerEvents: 'auto', // ← re-aktivuje pro obsah
+}
+```
+
+Pokud bychom portálovali handles do `.ant-modal` (ne do `.ant-modal-content`), handles by dědily `pointer-events: none` → `onMouseDown` by se nikdy nespustil.
+
+Proto portálujeme do `.ant-modal-content` (má `pointer-events: auto`) + přidáme `pointer-events: auto` na `.drm-handle` jako pojistku.
+
+---
+
+## Nástraha: `e.stopPropagation()` na resize handle
+
+Draggable wrapper obaluje celý modal. Bez `stopPropagation` by `mousedown` na resize handle také spustil drag. Výsledek: modal se táhne místo resize.
+
+```js
+const handleResizeStart = (e, direction) => {
+  e.preventDefault();
+  e.stopPropagation(); // zabrání bubblingu k Draggable
+  // ...
+};
+```
+
+---
+
+## Výsledný strom v DOM
+
+```
+[draggleRef div]           ← Draggable wrapper (full-width)
+  .ant-modal               ← width prop → kontroluje vizuální šířku
+    .ant-modal-content     ← portal target (position: relative)
+      .ant-modal-header
+      .ant-modal-body
+      .ant-modal-footer
+      .drm-handle-e        ← right: -4px, výška okna
+      .drm-handle-w        ← left: -4px, výška okna
+      .drm-handle-s        ← bottom: -4px, šířka okna
+      .drm-handle-se       ← bottom: -4px, right: -4px
+      .drm-handle-sw       ← bottom: -4px, left: -4px
+```
+
+---
+
+## Kompletní flow resize
+
+```
+Uživatel → mousedown na .drm-handle-se
+  ↓
+handleResizeStart('se')
+  - e.stopPropagation() → Draggable nezačne drag
+  - uloží: startX, startY, startW (.ant-modal.offsetWidth), startH (.ant-modal-content.offsetHeight)
+  - registruje: document.onmousemove, document.onmouseup
+  ↓
+Uživatel táhne myší
+  ↓
+onMouseMove
+  - dx = clientX - startX, dy = clientY - startY
+  - 'se' → newW = max(300, startW + dx), newH = max(200, startH + dy)
+  - setModalSize({ width: newW, height: newH })
+  ↓
+React re-render
+  - <Modal width={newW}> → .ant-modal dostane novou šířku
+  - styles.content.height = newH → .ant-modal-content dostane novou výšku
+  - handles v portalu se přesunou s .ant-modal-content
+  ↓
+Uživatel pustí myš
+  ↓
+onMouseUp → removeEventListener (cleanup)
+```
+
+---
+
+## Použití
+
+```jsx
+// Resize zapnut (default)
+<DraggableModal open={open} onCancel={onClose} title="Okno" width={800}>
+  obsah
+</DraggableModal>
+
+// Resize vypnut
+<DraggableModal resizable={false} open={open} onCancel={onClose} title="Okno">
+  obsah
+</DraggableModal>
+```
+
+---
+
+## Proč ne knihovna (re-resizable, react-resizable)?
+
+Obě fungují na principu wrapperu kolem elementu. Pro Ant Design Modal je problém, že wrapper musí obalit `.ant-modal`, ale `.ant-modal` je renderován interně knihovnou — nemáme nad ním přímou kontrolu z JSX. Ruční implementace pomocí mouse eventů je přímočařejší a nevyžaduje nové závislosti.

package/dist/RESIZING_GUIDE.md

@@ -0,0 +1,344 @@
+# Návod: Resize modálního okna bez knihovny
+
+Kompletní průvodce implementací resize (změna velikosti myší) na Ant Design 5 modálním okně v Reactu — bez použití jakékoliv resize knihovny.
+
+---
+
+## Kontext
+
+Komponenta `DraggableModal` rozšiřuje Ant Design `<Modal>` o drag (přetahování) pomocí `react-draggable`. Cílem bylo přidat i resize — změnu velikosti táhnutím za hrany/rohy.
+
+**Důležité:** `react-draggable` je výhradně pro drag. Resize nenabízí. Musíme ho implementovat ručně.
+
+---
+
+## Jak resize funguje — princip
+
+Resize funguje na třech fázích mouse eventů:
+
+```
+mousedown na handle → zapamatuj startovní pozici a rozměry
+  ↓
+mousemove na document → počítej delta, aktualizuj stav
+  ↓
+mouseup na document → ukonči resize, odregistruj listenery
+```
+
+Klíč je přidávat `mousemove`/`mouseup` na **`document`**, ne na handle. Jinak by myš opuštění handle resize přerušila.
+
+---
+
+## Krok 1: Stav pro rozměry
+
+```js
+const parseWidth = (w) => {
+  if (typeof w === 'number') return w;
+  if (typeof w === 'string') { const n = parseInt(w, 10); return isNaN(n) ? 520 : n; }
+  return 520;
+};
+
+const [modalSize, setModalSize] = React.useState({
+  width: parseWidth(props.width), // vždy číslo (ne "1400px")
+  height: null,                   // null = auto výška z obsahu
+});
+```
+
+**Proč `parseWidth`?**
+Ant Design přijímá `width` jako číslo i string (`"1400px"`). My potřebujeme číslo pro matematiku (`startW + dx`). Parsujeme hned při inicializaci.
+
+**Proč `height: null`?**
+Výchozí výška modalu je `auto` — určená obsahem. Výšku začínáme sledovat až při prvním resize (pak ji fixujeme na pixely).
+
+---
+
+## Krok 2: Resize handles — průhledné aktivní zóny
+
+Handles jsou prázdné `<div>` elementy bez viditelného obsahu. Stačí jim nastavit správný `cursor` a dostatečnou plochu pro klik.
+
+```css
+.drm-handle {
+  position: absolute;
+  z-index: 10;
+  user-select: none;
+  pointer-events: auto; /* KRITICKÉ — viz sekce Nástrahy */
+}
+
+/* Pravá hrana */
+.drm-handle-e  { top: 12px; right: -4px; width: 8px; height: calc(100% - 24px); cursor: e-resize; }
+
+/* Levá hrana */
+.drm-handle-w  { top: 12px; left: -4px;  width: 8px; height: calc(100% - 24px); cursor: w-resize; }
+
+/* Spodní hrana */
+.drm-handle-s  { bottom: -4px; left: 12px; width: calc(100% - 24px); height: 8px; cursor: s-resize; }
+
+/* Pravý dolní roh */
+.drm-handle-se { bottom: -4px; right: -4px; width: 16px; height: 16px; cursor: se-resize; }
+
+/* Levý dolní roh */
+.drm-handle-sw { bottom: -4px; left: -4px;  width: 16px; height: 16px; cursor: sw-resize; }
+```
+
+Handles jsou umístěny na `-4px` vně okna (polovina šířky 8px přesahuje). To vytváří přirozený aktivní prostor na samé hraně.
+
+---
+
+## Krok 3: Logika resize
+
+```js
+const handleResizeStart = (e, direction) => {
+  e.preventDefault();
+  e.stopPropagation(); // zabrání spuštění drag při tahu za handle
+
+  // Změříme aktuální rozměry z DOM (ne ze stavu — stav může být zaostalý)
+  const modalEl    = draggleRef.current?.querySelector('.ant-modal');
+  const contentEl  = draggleRef.current?.querySelector('.ant-modal-content');
+  const startX = e.clientX;
+  const startY = e.clientY;
+  const startW = modalEl?.offsetWidth   || modalSize.width;
+  const startH = contentEl?.offsetHeight || modalSize.height || 400;
+
+  const onMouseMove = (moveEvent) => {
+    const dx = moveEvent.clientX - startX; // kolik px jsme se posunuli
+    const dy = moveEvent.clientY - startY;
+
+    setModalSize(prev => {
+      let newW = prev.width;
+      let newH = prev.height !== null ? prev.height : startH;
+
+      if (direction.includes('e')) newW = Math.max(300, startW + dx); // tah doprava
+      if (direction.includes('w')) newW = Math.max(300, startW - dx); // tah doleva
+      if (direction.includes('s')) newH = Math.max(200, startH + dy); // tah dolů
+
+      return { width: newW, height: newH };
+    });
+  };
+
+  const onMouseUp = () => {
+    document.removeEventListener('mousemove', onMouseMove);
+    document.removeEventListener('mouseup', onMouseUp);
+  };
+
+  // DŮLEŽITÉ: listenery na document, ne na handle
+  document.addEventListener('mousemove', onMouseMove);
+  document.addEventListener('mouseup', onMouseUp);
+};
+```
+
+**Proč čteme z DOM a ne ze stavu?**
+Při zahájení resize chceme **aktuální vizuální rozměry**. Stav `modalSize` může být zaostalý o render cyklus. `offsetWidth`/`offsetHeight` vrací vždy aktuální hodnotu z DOM.
+
+**Minimální rozměry:**
+`Math.max(300, ...)` a `Math.max(200, ...)` zabrání zborcení layoutu.
+
+---
+
+## Krok 4: Aplikace rozměrů na modal
+
+```jsx
+<Modal
+  {...props}
+  width={resizable ? modalSize.width : props.width}
+  styles={resolveStyles()}
+>
+```
+
+```js
+const resolveStyles = () => {
+  if (resizable && modalSize.height !== null) {
+    return {
+      body: {
+        paddingBottom: '30px',
+        height: `calc(${modalSize.height}px - 110px)`, // odečteme header + footer
+        overflow: 'auto',
+        display: 'flex',
+        flexDirection: 'column',
+      },
+      content: {
+        height: `${modalSize.height}px`,
+        display: 'flex',
+        flexDirection: 'column',
+      },
+    };
+  }
+  // ... fallback pro statický height prop
+};
+```
+
+`110px` je odhadovaná výška headeru + footeru. `overflow: auto` na body zajistí scrollování při přetečení obsahu.
+
+---
+
+## Krok 5: Kam umístit handles — nástraha Ant Design
+
+Naivní přístup: vložit handles přímo do `modalRender` wrapperu:
+
+```jsx
+// ❌ NEFUNGUJE
+modalRender={(modal) => (
+  <Draggable>
+    <div ref={draggleRef}>
+      {modal}
+      {resizeHandles} {/* <-- tady NE */}
+    </div>
+  </Draggable>
+)}
+```
+
+**Proč ne?** Wrapper div je block-level element — má šířku `100% viewportu`. Handles s `position: absolute; right: -4px` se zobrazí na okraji viewportu, ne modálního okna. Uživatel je nevidí.
+
+```
+.ant-modal-wrap (100vw)
+  [draggleRef div = 100vw]      ← handles jsou tady → špatně
+    .ant-modal (1400px, margin:auto)
+      .ant-modal-content
+```
+
+### Správné řešení: ReactDOM.createPortal do `.ant-modal-content`
+
+```jsx
+// ✅ SPRÁVNĚ
+{resizable && antModalEl && ReactDOM.createPortal(resizeHandles, antModalEl)}
+// antModalEl = element .ant-modal-content
+```
+
+`.ant-modal-content` má `position: relative` → handles s `position: absolute` jsou relativní k němu. Handles jsou přesně na hranách viditelného okna.
+
+```
+.ant-modal-content (position: relative)  ← portal target
+  .ant-modal-header
+  .ant-modal-body
+  .ant-modal-footer
+  [drm-handle-e]   ← position: absolute, right: -4px  ✓
+  [drm-handle-se]  ← position: absolute, bottom: -4px, right: -4px  ✓
+```
+
+---
+
+## Krok 6: Detekce `.ant-modal-content` elementu
+
+Portal cíl musíme najít v DOM poté, co Ant Design modal narenduje. Použijeme `useLayoutEffect` — běží synchronně po DOM mutaci:
+
+```js
+const [antModalEl, setAntModalEl] = React.useState(null);
+
+React.useLayoutEffect(() => {
+  if (resizable && open && draggleRef.current) {
+    setAntModalEl(draggleRef.current.querySelector('.ant-modal-content'));
+  } else {
+    setAntModalEl(null);
+  }
+}, [resizable, open]);
+```
+
+**Proč `useLayoutEffect` a ne `useEffect`?**
+`useEffect` běží asynchronně po paint — uživatel by na první render viděl modal bez handles. `useLayoutEffect` běží synchronně před paint, takže handles se objeví ihned s modalem (druhý render, ale bez vizuálního bliknutí).
+
+**Tok na první otevření:**
+1. `open` změní na `true` → první render → `antModalEl` je `null` → handles se nevykreslí
+2. `useLayoutEffect` najde `.ant-modal-content`, zavolá `setAntModalEl`
+3. Druhý render → handles se vykreslí přes portal
+4. Vše synchronní — uživatel nevidí blikání
+
+---
+
+## Nástraha: `pointer-events: none` na `.ant-modal`
+
+Ant Design 5 nastavuje na `.ant-modal`:
+
+```js
+// node_modules/antd/es/modal/style/index.js
+'.ant-modal': {
+  pointerEvents: 'none', // ← zabraňuje klikům mimo .ant-modal-content
+}
+'.ant-modal-content': {
+  pointerEvents: 'auto', // ← re-aktivuje pro obsah
+}
+```
+
+Pokud bychom portálovali handles do `.ant-modal` (ne do `.ant-modal-content`), handles by dědily `pointer-events: none` → `onMouseDown` by se nikdy nespustil.
+
+Proto portálujeme do `.ant-modal-content` (má `pointer-events: auto`) + přidáme `pointer-events: auto` na `.drm-handle` jako pojistku.
+
+---
+
+## Nástraha: `e.stopPropagation()` na resize handle
+
+Draggable wrapper obaluje celý modal. Bez `stopPropagation` by `mousedown` na resize handle také spustil drag. Výsledek: modal se táhne místo resize.
+
+```js
+const handleResizeStart = (e, direction) => {
+  e.preventDefault();
+  e.stopPropagation(); // zabrání bubblingu k Draggable
+  // ...
+};
+```
+
+---
+
+## Výsledný strom v DOM
+
+```
+[draggleRef div]           ← Draggable wrapper (full-width)
+  .ant-modal               ← width prop → kontroluje vizuální šířku
+    .ant-modal-content     ← portal target (position: relative)
+      .ant-modal-header
+      .ant-modal-body
+      .ant-modal-footer
+      .drm-handle-e        ← right: -4px, výška okna
+      .drm-handle-w        ← left: -4px, výška okna
+      .drm-handle-s        ← bottom: -4px, šířka okna
+      .drm-handle-se       ← bottom: -4px, right: -4px
+      .drm-handle-sw       ← bottom: -4px, left: -4px
+```
+
+---
+
+## Kompletní flow resize
+
+```
+Uživatel → mousedown na .drm-handle-se
+  ↓
+handleResizeStart('se')
+  - e.stopPropagation() → Draggable nezačne drag
+  - uloží: startX, startY, startW (.ant-modal.offsetWidth), startH (.ant-modal-content.offsetHeight)
+  - registruje: document.onmousemove, document.onmouseup
+  ↓
+Uživatel táhne myší
+  ↓
+onMouseMove
+  - dx = clientX - startX, dy = clientY - startY
+  - 'se' → newW = max(300, startW + dx), newH = max(200, startH + dy)
+  - setModalSize({ width: newW, height: newH })
+  ↓
+React re-render
+  - <Modal width={newW}> → .ant-modal dostane novou šířku
+  - styles.content.height = newH → .ant-modal-content dostane novou výšku
+  - handles v portalu se přesunou s .ant-modal-content
+  ↓
+Uživatel pustí myš
+  ↓
+onMouseUp → removeEventListener (cleanup)
+```
+
+---
+
+## Použití
+
+```jsx
+// Resize zapnut (default)
+<DraggableModal open={open} onCancel={onClose} title="Okno" width={800}>
+  obsah
+</DraggableModal>
+
+// Resize vypnut
+<DraggableModal resizable={false} open={open} onCancel={onClose} title="Okno">
+  obsah
+</DraggableModal>
+```
+
+---
+
+## Proč ne knihovna (re-resizable, react-resizable)?
+
+Obě fungují na principu wrapperu kolem elementu. Pro Ant Design Modal je problém, že wrapper musí obalit `.ant-modal`, ale `.ant-modal` je renderován interně knihovnou — nemáme nad ním přímou kontrolu z JSX. Ruční implementace pomocí mouse eventů je přímočařejší a nevyžaduje nové závislosti.

package/dist/index.d.ts

@@ -1,3 +1,2 @@
 export default DraggableModal;
-declare function DraggableModal(props: any): React.ReactPortal | null;
-import * as React from 'react';
+declare function DraggableModal(props: any): import("react/jsx-runtime").JSX.Element | null;

package/dist/index.js

@@ -1,12 +1,21 @@
-import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 /* eslint-disable */
 import * as React from 'react';
 import { default as Modal } from 'antd/es/modal';
 import Draggable from 'react-draggable';
 import ReactDOM from 'react-dom';
 import './style.css';
+const parseWidth = (w) => {
+    if (typeof w === 'number')
+        return w;
+    if (typeof w === 'string') {
+        const n = parseInt(w, 10);
+        return isNaN(n) ? 520 : n;
+    }
+    return 520;
+};
 const DraggableModal = (props) => {
-    const { open, onOk, onCancel, isInteractive = false, title, children, getContainer, height } = props;
+    const { open, onOk, onCancel, isInteractive = false, title, children, getContainer, height, resizable = true } = props;
     const draggleRef = React.useRef(null);
     const [disabled, setDisabled] = React.useState(true);
     const [bounds, setBounds] = React.useState({
@@ -15,11 +24,25 @@ const DraggableModal = (props) => {
         bottom: 0,
         right: 0,
     });
+    const [modalSize, setModalSize] = React.useState({
+        width: parseWidth(props.width),
+        height: null,
+    });
+    const [antModalEl, setAntModalEl] = React.useState(null);
+    const [dragPos, setDragPos] = React.useState({ x: 0, y: 0 });
     React.useEffect(() => {
         if (isInteractive) {
             import('./interactiveStyle.css');
         }
     }, [isInteractive]);
+    React.useLayoutEffect(() => {
+        if (resizable && open && draggleRef.current) {
+            setAntModalEl(draggleRef.current.querySelector('.ant-modal-content'));
+        }
+        else {
+            setAntModalEl(null);
+        }
+    }, [resizable, open]);
     const onStart = (_event, uiData) => {
         const { clientWidth, clientHeight } = window.document.documentElement;
         const targetRect = draggleRef.current?.getBoundingClientRect();
@@ -33,28 +56,95 @@ const DraggableModal = (props) => {
             bottom: clientHeight - (targetRect.bottom - uiData.y),
         });
     };
-    return (open && getContainer ? (ReactDOM.createPortal(_jsx(Modal, { ...props, mask: !isInteractive, getContainer: false, zIndex: props.zIndex || 99999999, height: height, title: _jsx("div", { style: { width: '100%', cursor: 'move' }, onMouseOver: () => {
-                if (disabled) {
-                    setDisabled(false);
-                }
-            }, onMouseOut: () => {
-                setDisabled(true);
-            }, onFocus: () => { }, onBlur: () => { }, children: title }), open: open, onOk: onOk, onCancel: onCancel, styles: {
+    const handleResizeStart = (e, direction) => {
+        e.preventDefault();
+        e.stopPropagation();
+        const modalEl = draggleRef.current?.querySelector('.ant-modal');
+        const contentEl = draggleRef.current?.querySelector('.ant-modal-content');
+        const startX = e.clientX;
+        const startY = e.clientY;
+        const startW = modalEl?.offsetWidth || modalSize.width;
+        const startH = contentEl?.offsetHeight || modalSize.height || 400;
+        const startDragX = dragPos.x;
+        const onMouseMove = (moveEvent) => {
+            const dx = moveEvent.clientX - startX;
+            const dy = moveEvent.clientY - startY;
+            setModalSize(prev => {
+                let newW = prev.width;
+                let newH = prev.height !== null ? prev.height : startH;
+                if (direction.includes('e'))
+                    newW = Math.max(300, startW + dx);
+                if (direction.includes('w'))
+                    newW = Math.max(300, startW - dx);
+                if (direction.includes('s'))
+                    newH = Math.max(200, startH + dy);
+                return { width: newW, height: newH };
+            });
+            // Kompenzace: Ant Design centruje modal přes margin:auto.
+            // Při změně width se levý okraj posune o dx/2 — opravíme pozici Draggable.
+            if (direction.includes('e') || direction.includes('w')) {
+                setDragPos(prev => ({ ...prev, x: startDragX + dx / 2 }));
+            }
+        };
+        const onMouseUp = () => {
+            document.removeEventListener('mousemove', onMouseMove);
+            document.removeEventListener('mouseup', onMouseUp);
+        };
+        document.addEventListener('mousemove', onMouseMove);
+        document.addEventListener('mouseup', onMouseUp);
+    };
+    const resolveStyles = () => {
+        if (resizable && modalSize.height !== null) {
+            return {
+                body: {
+                    paddingBottom: '30px',
+                    height: `calc(${modalSize.height}px - 110px)`,
+                    overflow: 'auto',
+                    display: 'flex',
+                    flexDirection: 'column',
+                    boxSizing: 'border-box',
+                },
+                content: {
+                    height: `${modalSize.height}px`,
+                    display: 'flex',
+                    flexDirection: 'column',
+                },
+            };
+        }
+        return {
             body: {
                 paddingBottom: '30px',
                 ...(height && {
                     height: `calc(${height} - 110px)`,
                     overflow: 'hidden',
                     display: 'flex',
-                    flexDirection: 'column'
-                })
+                    flexDirection: 'column',
+                    boxSizing: 'border-box',
+                }),
             },
             content: height ? {
                 height: height,
                 display: 'flex',
-                flexDirection: 'column'
-            } : {}
-        }, modalRender: (modal) => (_jsx(Draggable, { disabled: disabled, bounds: bounds, onStart: (event, uiData) => onStart(event, uiData), children: _jsx("div", { ref: draggleRef, children: modal }) })), children: _jsx(_Fragment, { children: children }) }), getContainer())) : null);
+                flexDirection: 'column',
+            } : {},
+        };
+    };
+    const resizeHandles = (_jsxs(_Fragment, { children: [_jsx("div", { className: "drm-handle drm-handle-e", onMouseDown: (e) => handleResizeStart(e, 'e') }), _jsx("div", { className: "drm-handle drm-handle-w", onMouseDown: (e) => handleResizeStart(e, 'w') }), _jsx("div", { className: "drm-handle drm-handle-s", onMouseDown: (e) => handleResizeStart(e, 's') }), _jsx("div", { className: "drm-handle drm-handle-se", onMouseDown: (e) => handleResizeStart(e, 'se') }), _jsx("div", { className: "drm-handle drm-handle-sw", onMouseDown: (e) => handleResizeStart(e, 'sw') })] }));
+    // Sdílený Modal komponent
+    const modalContent = (_jsx(Modal, { ...props, mask: !isInteractive, getContainer: getContainer || false, zIndex: props.zIndex || 99999999, width: resizable ? modalSize.width : props.width, title: _jsx("div", { style: { width: '100%', cursor: 'move' }, onMouseOver: () => {
+                if (disabled) {
+                    setDisabled(false);
+                }
+            }, onMouseOut: () => {
+                setDisabled(true);
+            }, onFocus: () => { }, onBlur: () => { }, children: title }), open: open, onOk: onOk, onCancel: onCancel, styles: resolveStyles(), modalRender: (modal) => (_jsx(Draggable, { disabled: disabled, bounds: bounds, position: dragPos, onDrag: (e, data) => setDragPos({ x: data.x, y: data.y }), onStart: (event, uiData) => onStart(event, uiData), children: _jsx("div", { ref: draggleRef, style: { position: 'relative' }, children: modal }) })), children: _jsx(_Fragment, { children: children }) }));
+    // Pokud je getContainer funkce, použijeme portal
+    // Jinak renderujeme přímo (zachová React context)
+    if (!open)
+        return null;
+    return (_jsxs(_Fragment, { children: [typeof getContainer === 'function'
+                ? ReactDOM.createPortal(modalContent, getContainer())
+                : modalContent, resizable && antModalEl && ReactDOM.createPortal(resizeHandles, antModalEl)] }));
 };
 export default DraggableModal;
 //# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../index.jsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../index.jsx"],"names":[],"mappings":"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"}

package/dist/style.css

@@ -8,3 +8,51 @@
   gap: 8px; /* Mezery mezi tlačítky */
   padding-top: 50px;
 }
+
+/* Resize handles */
+.drm-handle {
+  position: absolute;
+  z-index: 10;
+  user-select: none;
+  pointer-events: auto;
+}
+
+.drm-handle-e {
+  top: 12px;
+  right: -4px;
+  width: 8px;
+  height: calc(100% - 24px);
+  cursor: e-resize;
+}
+
+.drm-handle-w {
+  top: 12px;
+  left: -4px;
+  width: 8px;
+  height: calc(100% - 24px);
+  cursor: w-resize;
+}
+
+.drm-handle-s {
+  bottom: -4px;
+  left: 12px;
+  width: calc(100% - 24px);
+  height: 8px;
+  cursor: s-resize;
+}
+
+.drm-handle-se {
+  bottom: -4px;
+  right: -4px;
+  width: 16px;
+  height: 16px;
+  cursor: se-resize;
+}
+
+.drm-handle-sw {
+  bottom: -4px;
+  left: -4px;
+  width: 16px;
+  height: 16px;
+  cursor: sw-resize;
+}

package/index.jsx

@@ -5,9 +5,14 @@ import Draggable from 'react-draggable';
 import ReactDOM from 'react-dom';
 import './style.css';
 
+const parseWidth = (w) => {
+  if (typeof w === 'number') return w;
+  if (typeof w === 'string') { const n = parseInt(w, 10); return isNaN(n) ? 520 : n; }
+  return 520;
+};
 
 const DraggableModal = (props) => {
-  const { open, onOk, onCancel, isInteractive = false, title, children, getContainer, height } = props;
+  const { open, onOk, onCancel, isInteractive = false, title, children, getContainer, height, resizable = true } = props;
   const draggleRef = React.useRef(null);
   const [disabled, setDisabled] = React.useState(true);
   const [bounds, setBounds] = React.useState({
@@ -16,6 +21,12 @@ const DraggableModal = (props) => {
     bottom: 0,
     right: 0,
   });
+  const [modalSize, setModalSize] = React.useState({
+    width: parseWidth(props.width),
+    height: null,
+  });
+  const [antModalEl, setAntModalEl] = React.useState(null);
+  const [dragPos, setDragPos] = React.useState({ x: 0, y: 0 });
 
   React.useEffect(() => {
     if (isInteractive) {
@@ -23,6 +34,14 @@ const DraggableModal = (props) => {
     }
   }, [isInteractive]);
 
+  React.useLayoutEffect(() => {
+    if (resizable && open && draggleRef.current) {
+      setAntModalEl(draggleRef.current.querySelector('.ant-modal-content'));
+    } else {
+      setAntModalEl(null);
+    }
+  }, [resizable, open]);
+
   const onStart = (_event, uiData) => {
     const { clientWidth, clientHeight } = window.document.documentElement;
     const targetRect = draggleRef.current?.getBoundingClientRect();
@@ -37,67 +56,156 @@ const DraggableModal = (props) => {
     });
   };
 
-  return (
-    open && getContainer ? (
-      ReactDOM.createPortal(
-        <Modal
-          {...props}
-          mask={!isInteractive}
-          getContainer={false} // Zajistí, že modal bude přímo vložen do portálu
-          zIndex={props.zIndex || 99999999}
-          height={height}
-          title={
-            <div
-              style={{ width: '100%', cursor: 'move' }}
-              onMouseOver={() => {
-                if (disabled) {
-                  setDisabled(false);
-                }
-              }}
-              onMouseOut={() => {
-                setDisabled(true);
-              }}
-              onFocus={() => { }}
-              onBlur={() => { }}
-            >
-              {title}
-            </div>
-          }
-          open={open}
-          onOk={onOk}
-          onCancel={onCancel}
-          styles={{ 
-            body: { 
-              paddingBottom: '30px',
-              ...(height && { 
-                height: `calc(${height} - 110px)`, 
-                overflow: 'hidden',
-                display: 'flex',
-                flexDirection: 'column'
-              })
-            },
-            content: height ? { 
-              height: height,
-              display: 'flex',
-              flexDirection: 'column'
-            } : {}
+  const handleResizeStart = (e, direction) => {
+    e.preventDefault();
+    e.stopPropagation();
+
+    const modalEl = draggleRef.current?.querySelector('.ant-modal');
+    const contentEl = draggleRef.current?.querySelector('.ant-modal-content');
+    const startX = e.clientX;
+    const startY = e.clientY;
+    const startW = modalEl?.offsetWidth || modalSize.width;
+    const startH = contentEl?.offsetHeight || modalSize.height || 400;
+    const startDragX = dragPos.x;
+
+    const onMouseMove = (moveEvent) => {
+      const dx = moveEvent.clientX - startX;
+      const dy = moveEvent.clientY - startY;
+
+      setModalSize(prev => {
+        let newW = prev.width;
+        let newH = prev.height !== null ? prev.height : startH;
+
+        if (direction.includes('e')) newW = Math.max(300, startW + dx);
+        if (direction.includes('w')) newW = Math.max(300, startW - dx);
+        if (direction.includes('s')) newH = Math.max(200, startH + dy);
+
+        return { width: newW, height: newH };
+      });
+
+      // Kompenzace: Ant Design centruje modal přes margin:auto.
+      // Při změně width se levý okraj posune o dx/2 — opravíme pozici Draggable.
+      if (direction.includes('e') || direction.includes('w')) {
+        setDragPos(prev => ({ ...prev, x: startDragX + dx / 2 }));
+      }
+    };
+
+    const onMouseUp = () => {
+      document.removeEventListener('mousemove', onMouseMove);
+      document.removeEventListener('mouseup', onMouseUp);
+    };
+
+    document.addEventListener('mousemove', onMouseMove);
+    document.addEventListener('mouseup', onMouseUp);
+  };
+
+  const resolveStyles = () => {
+    if (resizable && modalSize.height !== null) {
+      return {
+        body: {
+          paddingBottom: '30px',
+          height: `calc(${modalSize.height}px - 110px)`,
+          overflow: 'auto',
+          display: 'flex',
+          flexDirection: 'column',
+          boxSizing: 'border-box',
+        },
+        content: {
+          height: `${modalSize.height}px`,
+          display: 'flex',
+          flexDirection: 'column',
+        },
+      };
+    }
+
+    return {
+      body: {
+        paddingBottom: '30px',
+        ...(height && {
+          height: `calc(${height} - 110px)`,
+          overflow: 'hidden',
+          display: 'flex',
+          flexDirection: 'column',
+          boxSizing: 'border-box',
+        }),
+      },
+      content: height ? {
+        height: height,
+        display: 'flex',
+        flexDirection: 'column',
+      } : {},
+    };
+  };
+
+  const resizeHandles = (
+    <>
+      <div className="drm-handle drm-handle-e" onMouseDown={(e) => handleResizeStart(e, 'e')} />
+      <div className="drm-handle drm-handle-w" onMouseDown={(e) => handleResizeStart(e, 'w')} />
+      <div className="drm-handle drm-handle-s" onMouseDown={(e) => handleResizeStart(e, 's')} />
+      <div className="drm-handle drm-handle-se" onMouseDown={(e) => handleResizeStart(e, 'se')} />
+      <div className="drm-handle drm-handle-sw" onMouseDown={(e) => handleResizeStart(e, 'sw')} />
+    </>
+  );
+
+  // Sdílený Modal komponent
+  const modalContent = (
+    <Modal
+      {...props}
+      mask={!isInteractive}
+      getContainer={getContainer || false} // false = renderovat v místě
+      zIndex={props.zIndex || 99999999}
+      width={resizable ? modalSize.width : props.width}
+      title={
+        <div
+          style={{ width: '100%', cursor: 'move' }}
+          onMouseOver={() => {
+            if (disabled) {
+              setDisabled(false);
+            }
           }}
-          modalRender={(modal) => (
-            <Draggable
-              disabled={disabled}
-              bounds={bounds}
-              onStart={(event, uiData) => onStart(event, uiData)}
-            >
-              <div ref={draggleRef}>{modal}</div>
-            </Draggable>
-          )}
+          onMouseOut={() => {
+            setDisabled(true);
+          }}
+          onFocus={() => { }}
+          onBlur={() => { }}
+        >
+          {title}
+        </div>
+      }
+      open={open}
+      onOk={onOk}
+      onCancel={onCancel}
+      styles={resolveStyles()}
+      modalRender={(modal) => (
+        <Draggable
+          disabled={disabled}
+          bounds={bounds}
+          position={dragPos}
+          onDrag={(e, data) => setDragPos({ x: data.x, y: data.y })}
+          onStart={(event, uiData) => onStart(event, uiData)}
         >
-          <>{children}</>
-        </Modal>,
-        getContainer()
-      )
-    ) : null
+          <div ref={draggleRef} style={{ position: 'relative' }}>
+            {modal}
+          </div>
+        </Draggable>
+      )}
+    >
+      <>{children}</>
+    </Modal>
+  );
+
+  // Pokud je getContainer funkce, použijeme portal
+  // Jinak renderujeme přímo (zachová React context)
+  if (!open) return null;
+
+  return (
+    <>
+      {typeof getContainer === 'function'
+        ? ReactDOM.createPortal(modalContent, getContainer())
+        : modalContent}
+      {resizable && antModalEl && ReactDOM.createPortal(resizeHandles, antModalEl)}
+    </>
   );
 };
 
-export default DraggableModal;
+export default DraggableModal;

package/package.json

@@ -1,23 +1,23 @@
 {
   "name": "@bit.rhplus/draggable-modal",
-  "version": "0.0.12",
+  "version": "0.0.14",
   "homepage": "https://bit.cloud/remote-scope/draggable-modal",
   "main": "dist/index.js",
   "componentId": {
     "scope": "remote-scope",
     "name": "draggable-modal",
-    "version": "0.0.12"
+    "version": "0.0.14"
   },
   "dependencies": {
     "antd": "^5.20.6",
     "react-draggable": "^4.4.6"
   },
   "devDependencies": {
-    "@teambit/react.react-env": "1.0.132"
+    "@teambit/react.react-env": "1.3.1"
   },
   "peerDependencies": {
-    "react": "^17.0.0 || ^18.0.0",
-    "react-dom": "^17.0.0 || ^18.0.0"
+    "react": "^17.0.0 || ^18.0.0 || ^19.0.0",
+    "react-dom": "^17.0.0 || ^18.0.0 || ^19.0.0"
   },
   "license": "SEE LICENSE IN UNLICENSED",
   "optionalDependencies": {},

package/style.css

@@ -8,3 +8,51 @@
   gap: 8px; /* Mezery mezi tlačítky */
   padding-top: 50px;
 }
+
+/* Resize handles */
+.drm-handle {
+  position: absolute;
+  z-index: 10;
+  user-select: none;
+  pointer-events: auto;
+}
+
+.drm-handle-e {
+  top: 12px;
+  right: -4px;
+  width: 8px;
+  height: calc(100% - 24px);
+  cursor: e-resize;
+}
+
+.drm-handle-w {
+  top: 12px;
+  left: -4px;
+  width: 8px;
+  height: calc(100% - 24px);
+  cursor: w-resize;
+}
+
+.drm-handle-s {
+  bottom: -4px;
+  left: 12px;
+  width: calc(100% - 24px);
+  height: 8px;
+  cursor: s-resize;
+}
+
+.drm-handle-se {
+  bottom: -4px;
+  right: -4px;
+  width: 16px;
+  height: 16px;
+  cursor: se-resize;
+}
+
+.drm-handle-sw {
+  bottom: -4px;
+  left: -4px;
+  width: 16px;
+  height: 16px;
+  cursor: sw-resize;
+}