@dr.pogodin/react-utils 1.36.2 → 1.38.0

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

@@ -1,5 +1,5 @@
 import type { Theme } from '@dr.pogodin/react-themes';
-type ThemeKeyT = 'active' | 'arrow' | 'container' | 'dropdown' | 'hiddenOption' | 'label' | 'option' | 'select' | 'upward';
+type ThemeKeyT = 'active' | 'arrow' | 'container' | 'dropdown' | 'hiddenOption' | 'label' | 'option' | 'select' | 'invalid' | 'upward';
 export type ValueT = number | string;
 export type OptionT<NameT> = {
     name?: NameT | null;

package/build/types-scss/src/shared/components/selectors/NativeDropdown/theme.scss.d.ts

@@ -6,6 +6,7 @@ export declare const context: string;
 export declare const dropdown: string;
 export declare const hiddenOption: string;
 export declare const hoc: string;
+export declare const invalid: string;
 export declare const label: string;
 export declare const option: string;
 export declare const select: string;

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.36.2",
+  "version": "1.38.0",
   "bin": {
     "react-utils-build": "bin/build.js",
     "react-utils-setup": "bin/setup.js"
@@ -12,13 +12,13 @@
     "@dr.pogodin/babel-plugin-react-css-modules": "^6.13.2",
     "@dr.pogodin/csurf": "^1.13.0",
     "@dr.pogodin/js-utils": "^0.0.12",
-    "@dr.pogodin/react-global-state": "^0.14.2",
+    "@dr.pogodin/react-global-state": "^0.15.0",
     "@dr.pogodin/react-themes": "^1.7.0",
     "@jest/environment": "^29.7.0",
     "axios": "^1.7.2",
     "commander": "^12.1.0",
     "compression": "^1.7.4",
-    "config": "^3.3.11",
+    "config": "^3.3.12",
     "cookie": "^0.6.0",
     "cookie-parser": "^1.4.6",
     "cross-env": "^7.0.3",
@@ -30,12 +30,12 @@
     "lodash": "^4.17.21",
     "morgan": "^1.10.0",
     "node-forge": "^1.3.1",
-    "qs": "^6.12.1",
+    "qs": "^6.12.2",
     "raf": "^3.4.1",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-helmet": "^6.1.0",
-    "react-router-dom": "^6.23.1",
+    "react-router-dom": "^6.24.1",
     "request-ip": "^3.3.0",
     "rimraf": "^5.0.7",
     "serialize-javascript": "^6.0.2",
@@ -59,10 +59,10 @@
     "@dr.pogodin/babel-plugin-transform-assets": "^1.2.2",
     "@dr.pogodin/babel-preset-svgr": "^1.8.0",
     "@pmmmwh/react-refresh-webpack-plugin": "^0.5.15",
-    "@testing-library/dom": "^10.2.0",
+    "@testing-library/dom": "^10.3.0",
     "@testing-library/react": "^16.0.0",
     "@testing-library/user-event": "^14.5.2",
-    "@tsconfig/recommended": "^1.0.6",
+    "@tsconfig/recommended": "^1.0.7",
     "@types/compression": "^1.7.5",
     "@types/config": "^3.3.4",
     "@types/cookie": "^0.6.0",
@@ -70,7 +70,7 @@
     "@types/csurf": "^1.11.5",
     "@types/express": "^4.17.21",
     "@types/jest": "^29.5.12",
-    "@types/lodash": "^4.17.5",
+    "@types/lodash": "^4.17.6",
     "@types/morgan": "^1.9.9",
     "@types/node-forge": "^1.3.11",
     "@types/pretty": "^2.0.3",
@@ -106,7 +106,7 @@
     "mini-css-extract-plugin": "^2.9.0",
     "mockdate": "^3.0.5",
     "nodelist-foreach-polyfill": "^1.2.0",
-    "postcss": "^8.4.38",
+    "postcss": "^8.4.39",
     "postcss-loader": "^8.1.1",
     "postcss-scss": "^4.0.9",
     "pretty": "^2.0.0",
@@ -122,12 +122,12 @@
     "tsc-alias": "^1.8.10",
     "tstyche": "^2.0.0",
     "typed-scss-modules": "^8.0.1",
-    "typescript": "^5.5.2",
-    "typescript-eslint": "^7.13.1",
+    "typescript": "^5.5.3",
+    "typescript-eslint": "^7.15.0",
     "webpack": "^5.92.1",
     "webpack-dev-middleware": "^7.2.1",
     "webpack-hot-middleware": "^2.26.1",
-    "webpack-merge": "^5.10.0",
+    "webpack-merge": "^6.0.1",
     "workbox-core": "^7.1.0",
     "workbox-precaching": "^7.1.0",
     "workbox-webpack-plugin": "^7.1.0"

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

@@ -66,12 +66,15 @@ const Dropdown: React.FunctionComponent<PropsT<string>> = ({
     </option>
   );
 
+  let selectClassName = theme.select;
+  if (!isValidValue) selectClassName += ` ${theme.invalid}`;
+
   return (
     <div className={theme.container}>
       { label === undefined ? null : <div className={theme.label}>{label}</div> }
       <div className={theme.dropdown}>
         <select
-          className={theme.select}
+          className={selectClassName}
           onChange={onChange}
           value={value}
         >

package/src/shared/components/selectors/NativeDropdown/theme.scss

@@ -4,6 +4,8 @@
 .context,
 .ad.hoc {
   &.dropdown {
+    display: flex;
+    overflow: hidden;
     position: relative;
   }
 
@@ -45,7 +47,7 @@
     margin: 0 0.6em 0 1.5em;
   }
 
-  &.option { /* Empty style */ }
+  &.option { color: black; }
   &.hiddenOption { display: none; }
 
   &.select {
@@ -56,6 +58,7 @@
     color: inherit;
     cursor: pointer;
     display: inline-block;
+    flex: 1;
     font: inherit;
     outline: none;
     padding: 0.3em 3.3em calc(0.3em + 1px) 1.2em;
@@ -70,5 +73,7 @@
       border-color: blue;
       box-shadow: 0 0 3px 1px lightblue;
     }
+
+    &.invalid { color: gray; }
   }
 }

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

@@ -12,6 +12,11 @@ type ThemeKeyT =
   | 'option'
   | 'select'
 
+  // TODO: This is currently only valid for (native) <Dropdown>,
+  // other kinds of selectors should be evaluated, and aligned with this
+  // feature, if appropriate.
+  | 'invalid'
+
   // TODO: This is only valid for <CustomDropdown>, thus we need to re-factor it
   // into a separate theme spec for that component.
   | 'upward';