@dr.pogodin/react-utils 1.30.2 → 1.31.1

package/src/shared/components/index.ts

@@ -2,16 +2,16 @@
  * Just an aggregation of all exported components into a single module.
  */
 
+export * from 'components/selectors';
+
 export { default as Button } from 'components/Button';
 export { default as Checkbox } from 'components/Checkbox';
-export { default as Dropdown } from 'components/Dropdown';
 export { default as Input } from 'components/Input';
 export { default as Link } from 'components/Link';
 export { default as PageLayout } from 'components/PageLayout';
 export { default as MetaTags } from 'components/MetaTags';
 export { default as Modal, BaseModal } from 'components/Modal';
 export { default as NavLink } from 'components/NavLink';
-export { default as ScalableRect } from 'components/ScalableRect';
 export { default as Throbber } from 'components/Throbber';
 export { default as WithTooltip } from 'components/WithTooltip';
 export { default as YouTubeVideo } from 'components/YouTubeVideo';

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

@@ -0,0 +1,107 @@
+import PT from 'prop-types';
+
+import { BaseModal } from 'components/Modal';
+
+import S from './style.scss';
+
+import {
+  type OptionT,
+  type OptionsT,
+  optionsValidator,
+  optionValueName,
+} from '../../common';
+
+type PropsT = {
+  anchorRect: {
+    bottom: number;
+    left: number;
+    width: number;
+  };
+  containerClass: string;
+  filter?: (item: OptionT<React.ReactNode> | string) => boolean;
+  optionClass: string;
+  options: OptionsT<React.ReactNode>;
+  onCancel: () => void;
+  onChange: (value: string) => void;
+};
+
+const Options: React.FunctionComponent<PropsT> = ({
+  anchorRect,
+  containerClass,
+  filter,
+  onCancel,
+  onChange,
+  optionClass,
+  options,
+}) => {
+  const optionNodes: React.ReactNode[] = [];
+  for (let i = 0; i < options.length; ++i) {
+    const option = options[i];
+    if (!filter || filter(option)) {
+      const [iValue, iName] = optionValueName(option);
+      optionNodes.push(
+        <div
+          className={optionClass}
+          onClick={() => onChange(iValue)}
+          onKeyDown={(e) => {
+            if (e.key === 'Enter') {
+              onChange(iValue);
+            }
+          }}
+          key={iValue}
+          role="button"
+          tabIndex={0}
+        >
+          {iName}
+        </div>,
+      );
+    }
+  }
+
+  return (
+    <BaseModal
+      // Closes the dropdown (cancels the selection) on any page scrolling attempt.
+      // This is the same native <select> elements do on scrolling, and at least for
+      // now we have no reason to deal with complications needed to support open
+      // dropdowns during the scrolling (that would need to re-position it in
+      // response to the position changes of the root dropdown element).
+      cancelOnScrolling
+      containerStyle={{
+        left: anchorRect.left,
+        top: anchorRect.bottom,
+        width: anchorRect.width,
+      }}
+      dontDisableScrolling
+      onCancel={onCancel}
+      theme={{
+        ad: '',
+        hoc: '',
+        container: containerClass,
+        context: '',
+        overlay: S.overlay,
+      }}
+    >
+      {optionNodes}
+    </BaseModal>
+  );
+};
+
+Options.propTypes = {
+  anchorRect: PT.shape({
+    bottom: PT.number.isRequired,
+    left: PT.number.isRequired,
+    width: PT.number.isRequired,
+  }).isRequired,
+  containerClass: PT.string.isRequired,
+  filter: PT.func,
+  onCancel: PT.func.isRequired,
+  onChange: PT.func.isRequired,
+  optionClass: PT.string.isRequired,
+  options: optionsValidator.isRequired,
+};
+
+Options.defaultProps = {
+  filter: undefined,
+};
+
+export default Options;

package/src/shared/components/selectors/CustomDropdown/Options/style.scss

@@ -0,0 +1,6 @@
+.overlay {
+  inset: 0;
+  opacity: 0.2;
+  position: fixed;
+  z-index: 1000;
+}

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

@@ -0,0 +1,115 @@
+import PT from 'prop-types';
+import { useRef, useState } from 'react';
+
+import themed from '@dr.pogodin/react-themes';
+
+import Options from './Options';
+
+import defaultTheme from './theme.scss';
+
+import {
+  type PropsT,
+  optionValidator,
+  optionValueName,
+  validThemeKeys,
+} from '../common';
+
+const BaseCustomDropdown: React.FunctionComponent<
+PropsT<React.ReactNode, (value: string) => void>
+> = ({
+  filter,
+  label,
+  onChange,
+  options,
+  theme,
+  value,
+}) => {
+  if (!options) throw Error('Internal error');
+
+  const dropdownRef = useRef<HTMLDivElement>(null);
+
+  // If "null" the dropdown is closed, otherwise it is displayed
+  // at the specified coordinates.
+  const [anchor, setAnchor] = useState<DOMRect | null>(null);
+
+  const openList = () => {
+    setAnchor(dropdownRef.current!.getBoundingClientRect());
+  };
+
+  let selected: React.ReactNode = <>&zwnj;</>;
+  for (let i = 0; i < options.length; ++i) {
+    const option = options[i];
+    if (!filter || filter(option)) {
+      const [iValue, iName] = optionValueName(option);
+      if (iValue === value) {
+        selected = iName;
+        break;
+      }
+    }
+  }
+
+  let containerClassName = theme.container;
+  if (anchor) containerClassName += ` ${theme.active}`;
+
+  return (
+    <div className={containerClassName}>
+      {label === undefined ? null : (
+        <div className={theme.label}>{label}</div>
+      )}
+      <div
+        className={theme.dropdown}
+        onClick={openList}
+        onKeyDown={(e) => {
+          if (e.key === 'Enter') openList();
+        }}
+        ref={dropdownRef}
+        role="listbox"
+        tabIndex={0}
+      >
+        {selected}
+        <div className={theme.arrow} />
+      </div>
+      {
+        anchor ? (
+          <Options
+            anchorRect={anchor}
+            containerClass={theme.select || ''}
+            onCancel={() => setAnchor(null)}
+            onChange={(newValue) => {
+              setAnchor(null);
+              if (onChange) onChange(newValue);
+            }}
+            optionClass={theme.option || ''}
+            options={options}
+          />
+        ) : null
+      }
+    </div>
+  );
+};
+
+const ThemedCustomDropdown = themed(
+  BaseCustomDropdown,
+  'CustomDropdown',
+  validThemeKeys,
+  defaultTheme,
+);
+
+BaseCustomDropdown.propTypes = {
+  filter: PT.func,
+  label: PT.node,
+  onChange: PT.func,
+  options: PT.arrayOf(optionValidator.isRequired),
+  theme: ThemedCustomDropdown.themeType.isRequired,
+  value: PT.string,
+};
+
+BaseCustomDropdown.defaultProps = {
+  filter: undefined,
+  label: undefined,
+  onChange: undefined,
+  options: [],
+  value: undefined,
+};
+
+export default ThemedCustomDropdown;

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

@@ -0,0 +1,90 @@
+*,
+.context,
+.ad.hoc {
+  // The outermost dropdown container, holding together the label (if any),
+  // and the select element with arrow. Note, that the dropdown option list,
+  // when opened, exists completely outside the dropdown DOM hierarchy, and
+  // is aligned into the correct position by JS.
+  &.container {
+    align-items: center;
+    display: inline-flex;
+    margin: 0.1em;
+    position: relative;
+  }
+
+  // Styling of default label next to the dropdown (has no effect on custom
+  // non-string label node, if provided).
+  &.label {
+    margin: 0 0.6em 0 1.2em;
+  }
+
+  &.dropdown {
+    border: 1px solid gray;
+    border-radius: 0.3em;
+    cursor: pointer;
+    min-width: 200px;
+    outline: none;
+    padding: 0.3em 3.0em 0.3em 0.6em;
+    position: relative;
+    user-select: none;
+
+    &:focus {
+      border-color: blue;
+      box-shadow: 0 0 3px 1px lightblue;
+    }
+  }
+
+  &.option {
+    cursor: pointer;
+    outline: none ;
+    padding: 0 0.6em;
+
+    &:focus {
+      background: royalblue;
+      color: white;
+    }
+
+    &:hover {
+      background: royalblue;
+      color: white;
+    }
+  }
+
+  &.select {
+    background: white;
+    border: 1px solid gray;
+    border-radius: 0 0 0.3em 0.3em;
+    border-top: none;
+    box-shadow: 0 6px 12px 3px lightgray;
+    position: fixed;
+    top: 20px;
+    left: 10px;
+    z-index: 1001;
+  }
+
+  &.arrow {
+    background-image: linear-gradient(to top, lightgray, white 50%, white);
+    border-left: 1px solid gray;
+    border-radius: 0 0.3em 0.3em 0;
+    bottom: 0;
+    padding: 0.3em 0.6em;
+    position: absolute;
+    right: 0;
+    top: 0;
+
+    &::after {
+      content: '▼';
+    }
+  }
+
+  &.active {
+    .arrow {
+      border-radius: 0 0.3em 0 0;
+    }
+
+    .dropdown {
+      border-color: blue;
+      border-radius: 0.3em 0.3em 0 0;
+    }
+  }
+}

package/src/shared/components/{Dropdown → selectors/NativeDropdown}/index.tsx

@@ -1,32 +1,17 @@
+// Implements dropdown based on the native HTML <select> element.
+
 import PT from 'prop-types';
 
-import themed, { type Theme } from '@dr.pogodin/react-themes';
+import themed from '@dr.pogodin/react-themes';
 
 import defaultTheme from './theme.scss';
 
-const validThemeKeys = [
-  'arrow',
-  'container',
-  'dropdown',
-  'hiddenOption',
-  'label',
-  'option',
-  'select',
-] as const;
-
-type DropdownOptionT = {
-  name?: string | null;
-  value: string;
-};
-
-type PropsT = {
-  filter?: (item: DropdownOptionT | string) => boolean;
-  label?: string;
-  onChange?: React.ChangeEventHandler<HTMLSelectElement>;
-  options?: Array<DropdownOptionT | string>;
-  theme: Theme<typeof validThemeKeys>;
-  value?: string;
-};
+import {
+  type PropsT,
+  optionsValidator,
+  optionValueName,
+  validThemeKeys,
+} from '../common';
 
 /**
  * Implements a themeable dropdown list. Internally it is rendered with help of
@@ -47,33 +32,27 @@ type PropsT = {
  * @param [props....]
  * [Other theming properties](https://www.npmjs.com/package/@dr.pogodin/react-themes#themed-component-properties)
  */
-const Dropdown: React.FunctionComponent<PropsT> = ({
+const Dropdown: React.FunctionComponent<PropsT<string>> = ({
   filter,
   label,
   onChange,
-  options = [],
+  options,
   theme,
   value,
 }) => {
+  if (!options) throw Error('Internal error');
+
   let isValidValue = false;
   const optionElements = [];
 
   for (let i = 0; i < options.length; ++i) {
     const option = options[i];
     if (!filter || filter(option)) {
-      let optionValue: string;
-      let optionName: string;
-      if (typeof option === 'string') {
-        optionName = option;
-        optionValue = option;
-      } else {
-        optionName = option.name || option.value;
-        optionValue = option.value;
-      }
-      isValidValue ||= optionValue === value;
+      const [iValue, iName] = optionValueName(option);
+      isValidValue ||= iValue === value;
       optionElements.push(
-        <option className={theme.option} key={optionValue} value={optionValue}>
-          {optionName}
+        <option className={theme.option} key={iValue} value={iValue}>
+          {iName}
         </option>,
       );
     }
@@ -96,7 +75,7 @@ const Dropdown: React.FunctionComponent<PropsT> = ({
 
   return (
     <div className={theme.container}>
-      { label === undefined ? null : <p className={theme.label}>{label}</p> }
+      { label === undefined ? null : <div className={theme.label}>{label}</div> }
       <div className={theme.dropdown}>
         <select
           className={theme.select}
@@ -106,7 +85,7 @@ const Dropdown: React.FunctionComponent<PropsT> = ({
           {hiddenOption}
           {optionElements}
         </select>
-        <div className={theme.arrow}>▼</div>
+        <div className={theme.arrow} />
       </div>
     </div>
   );
@@ -121,17 +100,9 @@ const ThemedDropdown = themed(
 
 Dropdown.propTypes = {
   filter: PT.func,
-  label: PT.string,
+  label: PT.node,
   onChange: PT.func,
-  options: PT.arrayOf(
-    PT.oneOfType([
-      PT.shape({
-        name: PT.string,
-        value: PT.string.isRequired,
-      }),
-      PT.string,
-    ]).isRequired,
-  ),
+  options: optionsValidator,
   theme: ThemedDropdown.themeType.isRequired,
   value: PT.string,
 };

package/src/shared/components/{Dropdown → selectors/NativeDropdown}/theme.scss

@@ -17,6 +17,10 @@
     position: absolute;
     right: 0;
     top: 0;
+
+    &::after {
+      content: '▼';
+    }
   }
 
   &.container {
@@ -26,6 +30,7 @@
     position: relative;
   }
 
+  .active + &.arrow,
   :active + &.arrow {
     background-image: linear-gradient(to bottom, lightgray, white 50%, white);
     border-bottom-right-radius: 0;

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

@@ -0,0 +1,94 @@
+import PT from 'prop-types';
+import themed, { type Theme } from '@dr.pogodin/react-themes';
+
+import { type OptionsT, optionsValidator, optionValueName } from '../common';
+
+import defaultTheme from './theme.scss';
+
+const validThemeKeys = [
+  'container',
+  'label',
+  'option',
+  'selected',
+  'switch',
+] as const;
+
+type PropsT = {
+  label?: React.ReactNode;
+  onChange?: (value: string) => void;
+  options?: Readonly<OptionsT<React.ReactNode>>;
+  theme: Theme<typeof validThemeKeys>;
+  value?: string;
+};
+
+const BaseSwitch: React.FunctionComponent<PropsT> = ({
+  label,
+  onChange,
+  options,
+  theme,
+  value,
+}) => {
+  if (!options || !theme.option) throw Error('Internal error');
+
+  const optionNodes: React.ReactNode[] = [];
+  for (let i = 0; i < options?.length; ++i) {
+    const [iValue, iName] = optionValueName(options[i]);
+
+    let className: string = theme.option;
+    let onPress: (() => void) | undefined;
+    if (iValue === value) className += ` ${theme.selected}`;
+    else if (onChange) onPress = () => onChange(iValue);
+
+    optionNodes.push(
+      onPress ? (
+        <div
+          className={className}
+          onClick={onPress}
+          onKeyDown={(e) => {
+            if (onPress && e.key === 'Enter') onPress();
+          }}
+          key={iValue}
+          role="button"
+          tabIndex={0}
+        >
+          {iName}
+        </div>
+      ) : (
+        <div className={className} key={iValue}>{iName}</div>
+      ),
+    );
+  }
+
+  return (
+    <div className={theme.container}>
+      {label ? <div className={theme.label}>{label}</div> : null}
+      <div className={theme.switch}>
+        {optionNodes}
+      </div>
+    </div>
+  );
+};
+
+const ThemedSwitch = themed(
+  BaseSwitch,
+  'Switch',
+  validThemeKeys,
+  defaultTheme,
+);
+
+BaseSwitch.propTypes = {
+  label: PT.node,
+  onChange: PT.func,
+  options: optionsValidator,
+  theme: ThemedSwitch.themeType.isRequired,
+  value: PT.string,
+};
+
+BaseSwitch.defaultProps = {
+  label: undefined,
+  onChange: undefined,
+  options: [],
+  value: undefined,
+};
+
+export default ThemedSwitch;

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

@@ -0,0 +1,39 @@
+*,
+.context,
+.ad.hoc {
+  &.container {
+    align-items: center;
+    display: flex;
+    gap: 0.6em;
+  }
+
+  &.option {
+    border: 1px solid transparent;
+    border-radius: 0.3em;
+    cursor: pointer;
+    outline: none;
+    padding: 0 0.9em;
+
+    &:focus {
+      border-color: blue;
+      box-shadow: 0 0 3px 1px lightblue;
+    }
+  }
+
+  &.selected {
+    border: 1px solid gray;
+    background: white;
+    cursor: default;
+  }
+
+  &.switch {
+    align-items: center;
+    background: whitesmoke;
+    border: 1px solid gray;
+    border-radius: 0.3em;
+    display: flex;
+    gap: 0.3em;
+    padding: 0.3em;
+    user-select: none;
+  }
+}

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

@@ -0,0 +1,54 @@
+// The stuff common between different dropdown implementations.
+
+import PT from 'prop-types';
+
+import type { Theme } from '@dr.pogodin/react-themes';
+
+export const validThemeKeys = [
+  'active',
+  'arrow',
+  'container',
+  'dropdown',
+  'hiddenOption',
+  'label',
+  'option',
+  'select',
+] as const;
+
+export type OptionT<NameT> = {
+  name?: NameT | null;
+  value: string;
+};
+
+export type OptionsT<NameT> = Array<OptionT<NameT> | string>;
+
+export type PropsT<
+  NameT,
+  OnChangeT = React.ChangeEventHandler<HTMLSelectElement>,
+> = {
+  filter?: (item: OptionT<NameT> | string) => boolean;
+  label?: React.ReactNode;
+  onChange?: OnChangeT;
+  options?: OptionsT<NameT>;
+  theme: Theme<typeof validThemeKeys>;
+  value?: string;
+};
+
+export const optionValidator = PT.oneOfType([
+  PT.shape({
+    name: PT.string,
+    value: PT.string.isRequired,
+  }).isRequired,
+  PT.string.isRequired,
+]);
+
+export const optionsValidator = PT.arrayOf(optionValidator.isRequired);
+
+/** Returns option value and name as a tuple. */
+export function optionValueName<NameT>(
+  option: OptionT<NameT> | string,
+): [string, NameT | string] {
+  return typeof option === 'string'
+    ? [option, option]
+    : [option.value, option.name ?? option.value];
+}

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

@@ -0,0 +1,3 @@
+export { default as CustomDropdown } from './CustomDropdown';
+export { default as Dropdown } from './NativeDropdown';
+export { default as Switch } from './Switch';

package/src/shared/utils/jest/E2eSsrEnv.ts

@@ -87,7 +87,11 @@ export default class E2eSsrEnv extends JsdomEnv {
     this.loadWebpackConfig();
 
     const compiler = webpack(this.global.webpackConfig as webpack.Configuration);
-    compiler.outputFileSystem = this.global.webpackOutputFs;
+
+    // TODO: The "as typeof compiler.outputFileSystem" piece below is a workaround
+    // for the Webpack regression: https://github.com/webpack/webpack/issues/18242
+    compiler.outputFileSystem = this.global.webpackOutputFs as typeof compiler.outputFileSystem;
+
     return new Promise<void>((done, fail) => {
       compiler.run((err, stats) => {
         if (err) fail(err);