@dr.pogodin/react-utils 1.33.0 → 1.33.1

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/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.33.0",
+  "version": "1.33.1",
   "bin": {
     "react-utils-build": "bin/build.js",
     "react-utils-setup": "bin/setup.js"

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/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,