feat: remove qs, upgrade dependencies & misc improvements (#58)

Author: AlessioGr

.gitignore

@@ -3,3 +3,6 @@ node_modules
 package-lock.json
 dist
 dist-demo
+/.idea/*
+!/.idea/runConfigurations
+!/.idea/payload.iml

package.json

@@ -2,8 +2,27 @@
   "name": "@faceless-ui/modal",
   "version": "3.0.0-beta.0",
   "type": "module",
-  "main": "dist/index.js",
-  "types": "dist/index.d.ts",
+  "main": "src/index.ts",
+  "types": "src/index.ts",
+  "exports": {
+    ".": {
+      "import": "./src/index.ts",
+      "types": "./src/index.ts",
+      "default": "./src/index.ts"
+    }
+  },
+  "publishConfig": {
+    "main": "dist/index.js",
+    "types": "dist/index.d.ts",
+    "exports": {
+      ".": {
+        "import": "./dist/index.js",
+        "types": "./dist/index.d.ts",
+        "default": "./dist/index.js"
+      }
+    }
+  },
+  "sideEffects": false,
   "homepage:": "https://facelessui.com/docs/modal",
   "repository": "[email protected]:faceless-ui/modal.git",
   "description": "America's next top modal",
@@ -56,10 +75,9 @@
     "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0-rc.0"
   },
   "dependencies": {
-    "body-scroll-lock": "^3.1.5",
-    "focus-trap": "^6.9.2",
-    "qs": "^6.9.1",
-    "react-transition-group": "^4.4.2"
+    "body-scroll-lock": "4.0.0-beta.0",
+    "focus-trap": "7.5.4",
+    "react-transition-group": "4.4.5"
   },
   "devDependencies": {
     "@pmmmwh/react-refresh-webpack-plugin": "^0.5.5",
@@ -88,7 +106,7 @@
     "react-refresh": "^0.13.0",
     "react-refresh-typescript": "^2.0.4",
     "ts-loader": "^9.5.1",
-    "typescript": "^5.4.5",
+    "typescript": "5.5.2",
     "webpack": "^5.91.0",
     "webpack-cli": "^5.1.4",
     "webpack-dev-server": "^5.0.4"

src/Modal/index.tsx

@@ -1,5 +1,5 @@
 'use client'
-import * as focusTrap from 'focus-trap';
+import type { Options } from 'focus-trap';
 import React, { Fragment, ElementType, HTMLProps } from 'react';
 import { asModal } from '../asModal/index.js';
 import { IModalContext } from '../ModalProvider/context.js';
@@ -27,10 +27,10 @@ export interface ModalProps extends Omit<HTMLProps<HTMLElement>, 'children'> {
   openOnInit?: boolean
   children?: React.ReactNode | ChildFunction
   trapFocus?: boolean
-  focusTrapOptions?: focusTrap.Options
+  focusTrapOptions?: Options
 }
 
-const Modal: React.FC<ModalPropsWithContext & {
+const _Modal: React.FC<ModalPropsWithContext & {
   children?: React.ReactNode | ChildFunction
 }> = (props) => {
   const { children } = props;
@@ -53,4 +53,4 @@ const Modal: React.FC<ModalPropsWithContext & {
   return null;
 };
 
-export default asModal(Modal);
+export const Modal = asModal(_Modal)

src/ModalContainer/index.tsx

@@ -2,7 +2,7 @@
 import React, { MouseEvent, ElementType, HTMLProps } from 'react';
 import { CSSTransition } from 'react-transition-group';
 import { useModal } from '../useModal/index.js';
-import generateTransitionClasses from '../ModalProvider/generateTransitionClasses.js';
+import { generateTransitionClasses } from '../ModalProvider/generateTransitionClasses.js';
 
 export const containerBaseClass = 'modal-container';
 

src/ModalProvider/generateCSS.tsx

@@ -1,7 +1,7 @@
 import { containerBaseClass } from '../ModalContainer/index.js';
 import { itemBaseClass } from '../asModal/index.js';
 
-const CSS = ({
+export const generateCSS = ({
   classPrefix,
   zIndex,
 }: {
@@ -47,4 +47,3 @@ const CSS = ({
   `);
 };
 
-export default CSS;

src/ModalProvider/generateTransitionClasses.ts

@@ -1,4 +1,4 @@
-const generateTransitionClasses = (baseClass: string): Record<string, unknown> => {
+export const generateTransitionClasses = (baseClass: string): Record<string, unknown> => {
   if (baseClass) {
     return ({
       appear: `${baseClass}--appear`,
@@ -14,5 +14,3 @@ const generateTransitionClasses = (baseClass: string): Record<string, unknown> =
   }
   return {};
 };
-
-export default generateTransitionClasses;

src/ModalProvider/index.tsx

@@ -7,11 +7,10 @@ import React, {
   useCallback,
   useReducer,
 } from 'react';
-import queryString from 'qs';
 import { disableBodyScroll, enableBodyScroll } from 'body-scroll-lock';
-import generateCSS from './generateCSS.js';
+import { generateCSS } from './generateCSS.js';
 import { ModalContext, ModalState } from './context.js';
-import reducer from './reducer.js';
+import { reducer } from './reducer.js';
 
 export type ModalProviderProps = {
   generateCSS?: boolean
@@ -25,21 +24,22 @@ export type ModalProviderProps = {
 
 const getSearchQuery = () => {
   if (typeof window !== 'undefined') {
-    return queryString.parse(
-      window.location.search,
-      { ignoreQueryPrefix: true },
-    );
+    return new URLSearchParams(window.location.search);
   }
 };
 
 const getModalParamArray = (): string[] => {
   const searchQuery = getSearchQuery();
   let params: string[] = [];
-  if (searchQuery && searchQuery.modal) {
-    if (typeof searchQuery.modal === 'string') {
-      params = [searchQuery.modal];
-    } else if (Array.isArray(searchQuery.modal)) {
-      params = searchQuery.modal as string[];
+  if (searchQuery) {
+    const modalParam = searchQuery.get('modal');
+    if (modalParam) {
+      // Check if the parameter contains a comma, indicating multiple values
+      if (modalParam.includes(',')) {
+        params = modalParam.split(',');
+      } else {
+        params = [modalParam];
+      }
     }
   }
   return params;
@@ -124,12 +124,13 @@ export const ModalProvider: React.FC<ModalProviderProps> = (props) => {
 
     if (typeof handleParamChange === 'boolean' && handleParamChange) {
       const openModals = Object.keys(modalState).filter((slug) => modalState[slug].isOpen);
-      const queryWithModal = queryString.stringify({
-        modal: openModals
-      }, {
-        addQueryPrefix: true,
-        encode: false,
-      });
+      const params = new URLSearchParams();
+
+      for (const modal of openModals) {
+        params.append('modal', modal);
+      }
+
+      const queryWithModal = params.toString() ? `?${params}` : '';
       const newURL = `${window.location.pathname}${queryWithModal}`;
       window.history.pushState({}, '', newURL);
     }

src/ModalProvider/reducer.ts

@@ -51,7 +51,7 @@ export type Action = UPDATE_MODAL
   | CLOSE_LATEST_MODAL
   | CLOSE_ALL_MODALS;
 
-const reducer = (
+export const reducer = (
   state: ModalState,
   action: Action,
 ): ModalState => {
@@ -191,5 +191,3 @@ const reducer = (
 
   return newState;
 };
-
-export default reducer;

src/asModal/index.tsx

@@ -7,9 +7,9 @@ import React, {
 import ReactDOM from 'react-dom';
 import { CSSTransition } from 'react-transition-group';
 import { useModal } from '../useModal/index.js';
-import generateTransitionClasses from '../ModalProvider/generateTransitionClasses.js';
+import { generateTransitionClasses } from '../ModalProvider/generateTransitionClasses.js';
 import { ModalProps } from '../Modal/index.js';
-import * as focusTrap from 'focus-trap'; // ESM
+import { createFocusTrap, type FocusTrap }from 'focus-trap';
 
 export const itemBaseClass = 'modal-item';
 
@@ -22,7 +22,7 @@ export const asModal = <P extends ModalProps>(
     const modalRef = useRef(null);
     const [layTrap, setLayTrap] = useState(false);
     const trapHasBeenLayed = useRef(false);
-    const [trap, setTrap] = useState<focusTrap.FocusTrap | null>(null);
+    const [trap, setTrap] = useState<FocusTrap | null>(null);
 
     const {
       modalState,
@@ -66,7 +66,7 @@ export const asModal = <P extends ModalProps>(
         const currentModal = modalRef.current;
 
         if (trapHasBeenLayed.current === false && currentModal) {
-          const newTrap = focusTrap.createFocusTrap(currentModal, {
+          const newTrap = createFocusTrap(currentModal, {
             ...focusTrapOptions,
             fallbackFocus: focusTrapOptions?.fallbackFocus || currentModal,
             allowOutsideClick: typeof focusTrapOptions.allowOutsideClick !== 'undefined' ? focusTrapOptions.allowOutsideClick : true,

src/index.ts

@@ -1,5 +1,5 @@
 export { asModal } from './asModal/index.js';
-export { default as Modal } from './Modal/index.js';
+export { Modal } from './Modal/index.js';
 export { ModalContainer } from './ModalContainer/index.js';
 export { ModalContext } from './ModalProvider/context.js';
 export { ModalProvider } from './ModalProvider/index.js';

tsconfig.json

@@ -8,21 +8,21 @@
     "resolveJsonModule": true,
     "strict": true,
     "sourceMap": true,
-    "jsx": "react",
+    "jsx": "react-jsx",
     "skipLibCheck": true,
     "esModuleInterop": true,
     "declaration": true,
     "declarationDir": "./dist",
     "paths": {
-      "@faceless-ui/modal": ["./src/index.ts"],
-    },
+      "@faceless-ui/modal": ["./src/index.ts"]
+    }
   },
   "include": [
     "src/**/*",
-    "demo/**/*",
+    "demo/**/*"
   ],
   "exclude": [
     "**/*.test.js",
-    "node_modules",
+    "node_modules"
   ]
 }