@bit.rhplus/draggable-modal 0.0.16 → 0.0.18

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

@@ -0,0 +1,2 @@
+export default DraggableModal;
+declare function DraggableModal(props: any): import("react/jsx-runtime").JSX.Element;

package/dist/index.js

@@ -0,0 +1,160 @@
+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 { default as ConfigProvider } from 'antd/es/config-provider';
+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;
+};
+// Wrapper – podmíněné renderování = destroy on close (kompletní unmount při zavření)
+const DraggableModal = (props) => {
+    if (!props.open)
+        return null;
+    return _jsx(DraggableModalInner, { ...props });
+};
+// Inner komponenta – obsahuje veškerou logiku a stav
+// Při zavření se kompletně unmountuje → všechny hooks a stav jsou zničeny
+// Při otevření se vytvoří čerstvá instance → žádný starý stav
+const DraggableModalInner = (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({
+        left: 0,
+        top: 0,
+        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();
+        if (!targetRect) {
+            return;
+        }
+        setBounds({
+            left: -targetRect.left + uiData.x,
+            right: clientWidth - (targetRect.right - uiData.x),
+            top: -targetRect.top + uiData.y,
+            bottom: clientHeight - (targetRect.bottom - uiData.y),
+        });
+    };
+    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 = (_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') })] }));
+    const effectiveZIndex = props.zIndex || 99999999;
+    // Sdílený Modal komponent
+    const modalContent = (_jsx(Modal, { ...props, mask: !isInteractive, getContainer: getContainer || false, zIndex: effectiveZIndex, 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)
+    // ConfigProvider obaluje celý return — context se propaguje přes všechny vnořené portaly
+    return (_jsx(ConfigProvider, { theme: { token: { zIndexPopupBase: effectiveZIndex + 1 } }, getPopupContainer: () => document.body, children: _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

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

package/dist/interactiveStyle.css

@@ -0,0 +1,3 @@
+.ant-modal-wrap {
+  pointer-events: none !important;
+}

package/dist/preview-1775124667740.js

@@ -0,0 +1,7 @@
+;
+;
+
+export const compositions = [];
+export const overview = [];
+
+export const compositions_metadata = {"compositions":[]};

package/dist/style.css

@@ -0,0 +1,58 @@
+.ant-modal-content {
+  box-shadow: 0px 0px 56px 0px rgba(0, 0, 0, 2.15) !important;
+}
+
+.ant-modal-footer {
+  display: flex;
+  justify-content: flex-end; /* Tlačítka na pravou stranu */
+  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

@@ -1,6 +1,7 @@
 /* eslint-disable */
 import * as React from 'react';
 import { default as Modal } from 'antd/es/modal';
+import { default as ConfigProvider } from 'antd/es/config-provider';
 import Draggable from 'react-draggable';
 import ReactDOM from 'react-dom';
 import './style.css';
@@ -156,13 +157,15 @@ const DraggableModalInner = (props) => {
     </>
   );
 
+  const effectiveZIndex = props.zIndex || 99999999;
+
   // Sdílený Modal komponent
   const modalContent = (
     <Modal
       {...props}
       mask={!isInteractive}
       getContainer={getContainer || false} // false = renderovat v místě
-      zIndex={props.zIndex || 99999999}
+      zIndex={effectiveZIndex}
       width={resizable ? modalSize.width : props.width}
       title={
         <div
@@ -205,13 +208,19 @@ const DraggableModalInner = (props) => {
 
   // Pokud je getContainer funkce, použijeme portal
   // Jinak renderujeme přímo (zachová React context)
+  // ConfigProvider obaluje celý return — context se propaguje přes všechny vnořené portaly
   return (
-    <>
-      {typeof getContainer === 'function'
-        ? ReactDOM.createPortal(modalContent, getContainer())
-        : modalContent}
-      {resizable && antModalEl && ReactDOM.createPortal(resizeHandles, antModalEl)}
-    </>
+    <ConfigProvider
+      theme={{ token: { zIndexPopupBase: effectiveZIndex + 1 } }}
+      getPopupContainer={() => document.body}
+    >
+      <>
+        {typeof getContainer === 'function'
+          ? ReactDOM.createPortal(modalContent, getContainer())
+          : modalContent}
+        {resizable && antModalEl && ReactDOM.createPortal(resizeHandles, antModalEl)}
+      </>
+    </ConfigProvider>
   );
 };
 

package/package.json

@@ -1,19 +1,19 @@
 {
   "name": "@bit.rhplus/draggable-modal",
-  "version": "0.0.16",
+  "version": "0.0.18",
   "homepage": "https://bit.cloud/remote-scope/draggable-modal",
   "main": "dist/index.js",
   "componentId": {
     "scope": "remote-scope",
     "name": "draggable-modal",
-    "version": "0.0.16"
+    "version": "0.0.18"
   },
   "dependencies": {
     "antd": "^5.20.6",
     "react-draggable": "^4.4.6"
   },
   "devDependencies": {
-    "@bitdev/react.react-env": "4.0.14"
+    "@bitdev/react.react-env": "5.0.5"
   },
   "peerDependencies": {
     "react": "^17.0.0 || ^18.0.0 || ^19.0.0",

package/types/asset.d.ts

@@ -0,0 +1,43 @@
+declare module '*.png' {
+  const value: any;
+  export = value;
+}
+declare module '*.svg' {
+  import type { FunctionComponent, SVGProps } from 'react';
+
+  export const ReactComponent: FunctionComponent<
+    SVGProps<SVGSVGElement> & { title?: string }
+  >;
+  const src: string;
+  export default src;
+}
+
+// @TODO Gilad
+declare module '*.jpg' {
+  const value: any;
+  export = value;
+}
+declare module '*.jpeg' {
+  const value: any;
+  export = value;
+}
+declare module '*.gif' {
+  const value: any;
+  export = value;
+}
+declare module '*.bmp' {
+  const value: any;
+  export = value;
+}
+declare module '*.otf' {
+  const value: any;
+  export = value;
+}
+declare module '*.woff' {
+  const value: any;
+  export = value;
+}
+declare module '*.woff2' {
+  const value: any;
+  export = value;
+}

package/types/env.d.ts

@@ -0,0 +1,15 @@
+/// <reference types="vite/client" />
+
+export type ImportMetaEnv = Record<string, string>;
+
+interface ImportMeta {
+  readonly env: ImportMetaEnv
+}
+
+declare global {
+  namespace NodeJS {
+    interface ProcessEnv {
+      [key: string]: string;
+    }
+  }
+}

package/types/style.d.ts

@@ -0,0 +1,42 @@
+declare module '*.module.css' {
+  const classes: { readonly [key: string]: string };
+  export default classes;
+}
+declare module '*.module.scss' {
+  const classes: { readonly [key: string]: string };
+  export default classes;
+}
+declare module '*.module.sass' {
+  const classes: { readonly [key: string]: string };
+  export default classes;
+}
+
+declare module '*.module.less' {
+  const classes: { readonly [key: string]: string };
+  export default classes;
+}
+
+declare module '*.less' {
+  const classes: { readonly [key: string]: string };
+  export default classes;
+}
+
+declare module '*.css' {
+  const classes: { readonly [key: string]: string };
+  export default classes;
+}
+
+declare module '*.sass' {
+  const classes: { readonly [key: string]: string };
+  export default classes;
+}
+
+declare module '*.scss' {
+  const classes: { readonly [key: string]: string };
+  export default classes;
+}
+
+declare module '*.mdx' {
+  const component: any;
+  export default component;
+}