@dr.pogodin/react-utils 1.31.2 → 1.33.0

package/build/types-code/shared/components/selectors/index.d.ts

@@ -1,3 +1,4 @@
 export { default as CustomDropdown } from './CustomDropdown';
 export { default as Dropdown } from './NativeDropdown';
 export { default as Switch } from './Switch';
+export { type OptionT, type OptionsT, optionValidator, optionsValidator, } from './common';

package/config/webpack/app-base.js

@@ -282,6 +282,15 @@ function configFactory(ops) {
                                 modules: {
                                     getLocalIdent: utils_1.getLocalIdent,
                                     localIdentName: o.cssLocalIdent,
+                                    // TODO: This flag defaults `true` for ES module builds since
+                                    // css-loader@7.0.0:
+                                    // https://github.com/webpack-contrib/css-loader/releases/tag/v7.0.0
+                                    // For now we'll keep it `false` to avoid a breaking change for
+                                    // host projects, and also because babel-plugin-react-css-modules
+                                    // we rely upon is pending an upgrade to support named style
+                                    // imports:
+                                    // https://github.com/birdofpreyru/babel-plugin-react-css-modules/issues/44
+                                    namedExport: false,
                                 },
                             },
                         }, {

package/config/webpack/lib-base.js

@@ -103,6 +103,15 @@ function configFactory(ops) {
                                 modules: {
                                     getLocalIdent: utils_1.getLocalIdent,
                                     localIdentName: ops.cssLocalIdent,
+                                    // TODO: This flag defaults `true` for ES module builds since
+                                    // css-loader@7.0.0:
+                                    // https://github.com/webpack-contrib/css-loader/releases/tag/v7.0.0
+                                    // For now we'll keep it `false` to avoid a breaking change for
+                                    // host projects, and also because babel-plugin-react-css-modules
+                                    // we rely upon is pending an upgrade to support named style
+                                    // imports:
+                                    // https://github.com/birdofpreyru/babel-plugin-react-css-modules/issues/44
+                                    namedExport: false,
                                 },
                             },
                         }, {

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.31.2",
+  "version": "1.33.0",
   "bin": {
     "react-utils-build": "bin/build.js",
     "react-utils-setup": "bin/setup.js"
@@ -8,11 +8,11 @@
     "url": "https://github.com/birdofpreyru/react-utils/issues"
   },
   "dependencies": {
-    "@babel/runtime": "^7.24.1",
-    "@dr.pogodin/babel-plugin-react-css-modules": "^6.12.0",
+    "@babel/runtime": "^7.24.4",
+    "@dr.pogodin/babel-plugin-react-css-modules": "^6.13.0",
     "@dr.pogodin/csurf": "^1.13.0",
     "@dr.pogodin/js-utils": "^0.0.9",
-    "@dr.pogodin/react-global-state": "^0.13.0",
+    "@dr.pogodin/react-global-state": "^0.14.0",
     "@dr.pogodin/react-themes": "^1.6.0",
     "@jest/environment": "^29.7.0",
     "axios": "^1.6.8",
@@ -26,7 +26,7 @@
     "express": "^4.19.2",
     "helmet": "^7.1.0",
     "http-status-codes": "^2.3.0",
-    "joi": "^17.12.2",
+    "joi": "^17.12.3",
     "lodash": "^4.17.21",
     "morgan": "^1.10.0",
     "node-forge": "^1.3.1",
@@ -48,20 +48,20 @@
   "description": "Collection of generic ReactJS components and utils",
   "devDependencies": {
     "@babel/cli": "^7.24.1",
-    "@babel/core": "^7.24.3",
+    "@babel/core": "^7.24.4",
     "@babel/eslint-parser": "^7.24.1",
     "@babel/eslint-plugin": "^7.23.5",
     "@babel/node": "^7.23.9",
     "@babel/plugin-transform-runtime": "^7.24.3",
-    "@babel/preset-env": "^7.24.3",
+    "@babel/preset-env": "^7.24.4",
     "@babel/preset-react": "^7.24.1",
     "@babel/preset-typescript": "^7.24.1",
     "@babel/register": "^7.23.7",
     "@dr.pogodin/babel-plugin-transform-assets": "^1.2.2",
     "@dr.pogodin/babel-preset-svgr": "^1.8.0",
     "@pmmmwh/react-refresh-webpack-plugin": "^0.5.11",
-    "@tsconfig/recommended": "^1.0.4",
-    "@tsd/typescript": "^5.4.3",
+    "@tsconfig/recommended": "^1.0.6",
+    "@tsd/typescript": "^5.4.4",
     "@types/compression": "^1.7.5",
     "@types/config": "^3.3.4",
     "@types/cookie": "^0.6.0",
@@ -73,8 +73,8 @@
     "@types/morgan": "^1.9.9",
     "@types/node-forge": "^1.3.11",
     "@types/pretty": "^2.0.3",
-    "@types/react": "^18.2.72",
-    "@types/react-dom": "^18.2.22",
+    "@types/react": "^18.2.74",
+    "@types/react-dom": "^18.2.24",
     "@types/react-helmet": "^6.1.11",
     "@types/react-test-renderer": "^18.0.7",
     "@types/request-ip": "^0.0.41",
@@ -88,21 +88,21 @@
     "babel-loader": "^9.1.3",
     "babel-plugin-module-resolver": "^5.0.0",
     "core-js": "^3.36.1",
-    "css-loader": "^6.10.0",
+    "css-loader": "^7.0.0",
     "css-minimizer-webpack-plugin": "^6.0.0",
     "eslint": "^8.57.0",
     "eslint-config-airbnb": "^19.0.4",
     "eslint-config-airbnb-typescript": "^18.0.0",
     "eslint-import-resolver-babel-module": "^5.3.2",
     "eslint-plugin-import": "^2.29.1",
-    "eslint-plugin-jest": "^27.9.0",
+    "eslint-plugin-jest": "^28.0.0",
     "eslint-plugin-jsx-a11y": "^6.8.0",
     "eslint-plugin-react": "^7.34.1",
     "eslint-plugin-react-hooks": "^4.6.0",
     "identity-obj-proxy": "^3.0.0",
     "jest": "^29.7.0",
     "jest-environment-jsdom": "^29.7.0",
-    "memfs": "^4.8.0",
+    "memfs": "^4.8.1",
     "mini-css-extract-plugin": "^2.8.1",
     "mockdate": "^3.0.5",
     "nodelist-foreach-polyfill": "^1.2.0",
@@ -114,18 +114,18 @@
     "react-test-renderer": "^18.2.0",
     "regenerator-runtime": "^0.14.1",
     "resolve-url-loader": "^5.0.0",
-    "sass": "^1.72.0",
+    "sass": "^1.74.1",
     "sass-loader": "^14.1.1",
     "sitemap": "^7.1.1",
     "stylelint": "^16.3.1",
-    "stylelint-config-standard-scss": "^13.0.0",
+    "stylelint-config-standard-scss": "^13.1.0",
     "supertest": "^6.3.4",
     "tsc-alias": "^1.8.8",
     "typed-scss-modules": "^8.0.1",
-    "typescript": "^5.4.3",
-    "typescript-eslint": "^7.4.0",
+    "typescript": "^5.4.4",
+    "typescript-eslint": "^7.5.0",
     "webpack": "^5.91.0",
-    "webpack-dev-middleware": "^7.1.1",
+    "webpack-dev-middleware": "^7.2.1",
     "webpack-hot-middleware": "^2.26.1",
     "webpack-merge": "^5.10.0",
     "workbox-core": "^7.0.0",

package/src/shared/components/selectors/CustomDropdown/Options/index.tsx

@@ -48,7 +48,19 @@ const Options = forwardRef<RefT, PropsT>(({
   const opsRef = useRef<HTMLDivElement>(null);
 
   useImperativeHandle(ref, () => ({
-    measure: () => opsRef.current?.getBoundingClientRect(),
+    measure: () => {
+      const e = opsRef.current?.parentElement;
+      if (!e) return undefined;
+
+      const rect = opsRef.current?.getBoundingClientRect();
+      const style = window.getComputedStyle(e);
+      const mBottom = parseFloat(style.marginBottom);
+      const mTop = parseFloat(style.marginTop);
+
+      rect.height += mBottom + mTop;
+
+      return rect;
+    },
   }), []);
 
   const optionNodes: React.ReactNode[] = [];
@@ -59,10 +71,14 @@ const Options = forwardRef<RefT, PropsT>(({
       optionNodes.push(
         <div
           className={optionClass}
-          onClick={() => onChange(iValue)}
+          onClick={(e) => {
+            onChange(iValue);
+            e.stopPropagation();
+          }}
           onKeyDown={(e) => {
             if (e.key === 'Enter') {
               onChange(iValue);
+              e.stopPropagation();
             }
           }}
           key={iValue}

package/src/shared/components/selectors/CustomDropdown/index.tsx

@@ -70,7 +70,9 @@ PropsT<React.ReactNode, (value: string) => void>
     };
   }, [active]);
 
-  const openList = () => {
+  const openList = (
+    e: React.KeyboardEvent<HTMLDivElement> | React.MouseEvent<HTMLDivElement>,
+  ) => {
     const view = window.visualViewport;
     const rect = dropdownRef.current!.getBoundingClientRect();
     setActive(true);
@@ -86,6 +88,8 @@ PropsT<React.ReactNode, (value: string) => void>
       top: view?.height || 0,
       width: rect.width,
     });
+
+    e.stopPropagation();
   };
 
   let selected: React.ReactNode = <>&zwnj;</>;
@@ -118,7 +122,7 @@ PropsT<React.ReactNode, (value: string) => void>
         className={theme.dropdown}
         onClick={openList}
         onKeyDown={(e) => {
-          if (e.key === 'Enter') openList();
+          if (e.key === 'Enter') openList(e);
         }}
         ref={dropdownRef}
         role="listbox"

package/src/shared/components/selectors/index.ts

@@ -1,3 +1,10 @@
 export { default as CustomDropdown } from './CustomDropdown';
 export { default as Dropdown } from './NativeDropdown';
 export { default as Switch } from './Switch';
+
+export {
+  type OptionT,
+  type OptionsT,
+  optionValidator,
+  optionsValidator,
+} from './common';

package/build/types-scss/__tests__/js/config/publicPath support/__assets__/style.scss.d.ts

@@ -1 +0,0 @@
-export declare const container: string;

package/build/types-scss/__tests__/js/config/stylename-generation/__assets__/MockPackageA/TestComponent/style.scss.d.ts

@@ -1 +0,0 @@
-export declare const testClassName: string;

package/build/types-scss/__tests__/js/config/stylename-generation/__assets__/MockPackageB/TestComponent/style.scss.d.ts

@@ -1 +0,0 @@
-export declare const testClassName: string;

package/build/types-scss/__tests__/js/config/stylename-generation/__assets__/style.scss.d.ts

@@ -1 +0,0 @@
-export declare const sampleClassName: string;

package/build/types-scss/__tests__/js/shared/components/NavLink/styles.scss.d.ts

@@ -1 +0,0 @@
-export declare const navLink: string;

package/build/types-scss/__tests__/js/shared/utils/splitComponent/__assets__/SampleScene/ComponentA/style.scss.d.ts

@@ -1 +0,0 @@
-export declare const container: string;

package/build/types-scss/__tests__/js/shared/utils/splitComponent/__assets__/SampleScene/ComponentB/style.scss.d.ts

@@ -1 +0,0 @@
-export declare const container: string;

package/build/types-scss/__tests__/js/shared/utils/splitComponent/__assets__/SampleScene/ComponentC/style.scss.d.ts

@@ -1 +0,0 @@
-export declare const container: string;

package/build/types-scss/__tests__/js/shared/utils/splitComponent/__assets__/SampleScene/style.scss.d.ts

@@ -1 +0,0 @@
-export declare const container: string;

package/build/types-scss/__tests__/ts/config/publicPath support/__assets__/style.scss.d.ts

@@ -1 +0,0 @@
-export declare const container: string;

package/build/types-scss/__tests__/ts/config/stylename-generation/__assets__/MockPackageA/TestComponent/style.scss.d.ts

@@ -1 +0,0 @@
-export declare const testClassName: string;

package/build/types-scss/__tests__/ts/config/stylename-generation/__assets__/MockPackageB/TestComponent/style.scss.d.ts

@@ -1 +0,0 @@
-export declare const testClassName: string;

package/build/types-scss/__tests__/ts/config/stylename-generation/__assets__/style.scss.d.ts

@@ -1 +0,0 @@
-export declare const sampleClassName: string;

package/build/types-scss/__tests__/ts/shared/components/NavLink/styles.scss.d.ts

@@ -1 +0,0 @@
-export declare const navLink: string;

package/build/types-scss/__tests__/ts/shared/utils/splitComponent/__assets__/SampleScene/ComponentA/style.scss.d.ts

@@ -1 +0,0 @@
-export declare const container: string;

package/build/types-scss/__tests__/ts/shared/utils/splitComponent/__assets__/SampleScene/ComponentB/style.scss.d.ts

@@ -1 +0,0 @@
-export declare const container: string;

package/build/types-scss/__tests__/ts/shared/utils/splitComponent/__assets__/SampleScene/ComponentC/style.scss.d.ts

@@ -1 +0,0 @@
-export declare const container: string;

package/build/types-scss/__tests__/ts/shared/utils/splitComponent/__assets__/SampleScene/style.scss.d.ts

@@ -1 +0,0 @@
-export declare const container: string;