@dr.pogodin/react-utils 1.33.0 → 1.33.2

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

@@ -1,7 +1,7 @@
 /// <reference types="react" />
 import { type Theme } from '@dr.pogodin/react-themes';
 import { type OptionsT } from '../common';
-declare const validThemeKeys: readonly ["container", "label", "option", "selected", "switch"];
+declare const validThemeKeys: readonly ["container", "label", "option", "options", "selected"];
 type PropsT = {
     label?: React.ReactNode;
     onChange?: (value: string) => void;

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

@@ -15,13 +15,9 @@ export type PropsT<NameT, OnChangeT = React.ChangeEventHandler<HTMLSelectElement
     theme: Theme<typeof validThemeKeys>;
     value?: string;
 };
-export declare const optionValidator: PT.Requireable<NonNullable<string | NonNullable<PT.InferProps<{
-    name: PT.Requireable<string>;
-    value: PT.Validator<string>;
-}>>>>;
-export declare const optionsValidator: PT.Requireable<NonNullable<NonNullable<string | NonNullable<PT.InferProps<{
-    name: PT.Requireable<string>;
-    value: PT.Validator<string>;
-}>>>>[]>;
+export declare const optionValidator: PT.Requireable<OptionT<React.ReactNode> | string>;
+export declare const optionsValidator: PT.Requireable<NonNullable<string | OptionT<React.ReactNode>>[]>;
+export declare const stringOptionValidator: PT.Requireable<OptionT<string> | string>;
+export declare const stringOptionsValidator: PT.Requireable<NonNullable<string | OptionT<string>>[]>;
 /** Returns option value and name as a tuple. */
 export declare function optionValueName<NameT>(option: OptionT<NameT> | string): [string, NameT | string];

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

@@ -3,4 +3,5 @@ export declare const container: string;
 export declare const context: string;
 export declare const hoc: string;
 export declare const option: string;
+export declare const options: string;
 export declare const selected: string;

package/config/webpack/app-base.js

@@ -282,14 +282,11 @@ 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:
+                                    // 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
+                                    // We'll keep it `false` to avoid a breaking change for dependant
+                                    // projects, and I am also not sure what are the benefits of
+                                    // named CSS exports anyway.
                                     namedExport: false,
                                 },
                             },

package/config/webpack/lib-base.js

@@ -103,14 +103,11 @@ 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:
+                                    // 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
+                                    // We'll keep it `false` to avoid a breaking change for dependant
+                                    // projects, and I am also not sure what are the benefits of
+                                    // named CSS exports anyway.
                                     namedExport: false,
                                 },
                             },

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.33.0",
+  "version": "1.33.2",
   "bin": {
     "react-utils-build": "bin/build.js",
     "react-utils-setup": "bin/setup.js"
@@ -9,7 +9,7 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.24.4",
-    "@dr.pogodin/babel-plugin-react-css-modules": "^6.13.0",
+    "@dr.pogodin/babel-plugin-react-css-modules": "^6.13.1",
     "@dr.pogodin/csurf": "^1.13.0",
     "@dr.pogodin/js-utils": "^0.0.9",
     "@dr.pogodin/react-global-state": "^0.14.0",
@@ -95,7 +95,7 @@
     "eslint-config-airbnb-typescript": "^18.0.0",
     "eslint-import-resolver-babel-module": "^5.3.2",
     "eslint-plugin-import": "^2.29.1",
-    "eslint-plugin-jest": "^28.0.0",
+    "eslint-plugin-jest": "^28.2.0",
     "eslint-plugin-jsx-a11y": "^6.8.0",
     "eslint-plugin-react": "^7.34.1",
     "eslint-plugin-react-hooks": "^4.6.0",

package/src/shared/components/Checkbox/index.tsx

@@ -25,6 +25,7 @@ const Checkbox: React.FunctionComponent<PropT> = ({
       checked={checked}
       className={theme.checkbox}
       onChange={onChange}
+      onClick={(e) => e.stopPropagation()}
       type="checkbox"
     />
   </div>

package/src/shared/components/Modal/index.tsx

@@ -109,9 +109,17 @@ const BaseModal: React.FunctionComponent<PropsT> = ({
         <div
           aria-label="Cancel"
           className={theme.overlay}
-          onClick={() => onCancel && onCancel()}
+          onClick={(e) => {
+            if (onCancel) {
+              onCancel();
+              e.stopPropagation();
+            }
+          }}
           onKeyDown={(e) => {
-            if (e.key === 'Escape' && onCancel) onCancel();
+            if (e.key === 'Escape' && onCancel) {
+              onCancel();
+              e.stopPropagation();
+            }
           }}
           ref={(node) => {
             if (node && node !== overlayRef.current) {
@@ -122,9 +130,23 @@ const BaseModal: React.FunctionComponent<PropsT> = ({
           role="button"
           tabIndex={0}
         />
+        {
+          // NOTE: These rules are disabled because our intention is to keep
+          // the element non-interactive (thus not on the keyboard focus chain),
+          // and it has `onClick` handler merely to stop propagation of click
+          // events to its parent container. This is needed because, for example
+          // when the modal is wrapped into an interactive element we don't want
+          // any clicks inside the modal to bubble-up to that parent element
+          // (because visually and logically the modal dialog does not belong
+          // to its parent container, where it technically belongs from
+          // the HTML mark-up perpective).
+          /* eslint-disable jsx-a11y/click-events-have-key-events,
+             jsx-a11y/no-noninteractive-element-interactions */
+        }
         <div
           aria-modal="true"
           className={theme.container}
+          onClick={(e) => e.stopPropagation()}
           onWheel={(event) => event.stopPropagation()}
           ref={containerRef}
           role="dialog"
@@ -132,6 +154,8 @@ const BaseModal: React.FunctionComponent<PropsT> = ({
         >
           {children}
         </div>
+        {/* eslint-enable jsx-a11y/click-events-have-key-events,
+            jsx-a11y/no-noninteractive-element-interactions */}
         <div
           onFocus={() => {
             overlayRef.current?.focus();

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

@@ -8,8 +8,8 @@ import defaultTheme from './theme.scss';
 
 import {
   type PropsT,
-  optionsValidator,
   optionValueName,
+  stringOptionsValidator,
   validThemeKeys,
 } from '../common';
 
@@ -102,7 +102,7 @@ Dropdown.propTypes = {
   filter: PT.func,
   label: PT.node,
   onChange: PT.func,
-  options: optionsValidator,
+  options: stringOptionsValidator,
   theme: ThemedDropdown.themeType.isRequired,
   value: PT.string,
 };

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

@@ -9,8 +9,8 @@ const validThemeKeys = [
   'container',
   'label',
   'option',
+  'options',
   'selected',
-  'switch',
 ] as const;
 
 type PropsT = {
@@ -62,7 +62,7 @@ const BaseSwitch: React.FunctionComponent<PropsT> = ({
   return (
     <div className={theme.container}>
       {label ? <div className={theme.label}>{label}</div> : null}
-      <div className={theme.switch}>
+      <div className={theme.options}>
         {optionNodes}
       </div>
     </div>

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

@@ -26,7 +26,7 @@
     cursor: default;
   }
 
-  &.switch {
+  &.options {
     align-items: center;
     background: whitesmoke;
     border: 1px solid gray;

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

@@ -38,9 +38,10 @@ export type PropsT<
   value?: string;
 };
 
-export const optionValidator = PT.oneOfType([
+export const optionValidator:
+PT.Requireable<OptionT<React.ReactNode> | string> = PT.oneOfType([
   PT.shape({
-    name: PT.string,
+    name: PT.node,
     value: PT.string.isRequired,
   }).isRequired,
   PT.string.isRequired,
@@ -48,6 +49,17 @@ export const optionValidator = PT.oneOfType([
 
 export const optionsValidator = PT.arrayOf(optionValidator.isRequired);
 
+export const stringOptionValidator:
+PT.Requireable<OptionT<string> | string> = PT.oneOfType([
+  PT.shape({
+    name: PT.string,
+    value: PT.string.isRequired,
+  }).isRequired,
+  PT.string.isRequired,
+]);
+
+export const stringOptionsValidator = PT.arrayOf(stringOptionValidator.isRequired);
+
 /** Returns option value and name as a tuple. */
 export function optionValueName<NameT>(
   option: OptionT<NameT> | string,