@dr.pogodin/react-utils 1.30.2 → 1.31.0

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/build/development/shared/components/Dropdown/index.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.js","names":["_propTypes","_interopRequireDefault","require","_reactThemes","_jsxRuntime","defaultTheme","validThemeKeys","Dropdown","filter","label","onChange","options","theme","value","isValidValue","optionElements","i","length","option","optionValue","optionName","name","push","jsx","className","children","hiddenOption","disabled","jsxs","container","undefined","dropdown","select","arrow","ThemedDropdown","themed","propTypes","PT","func","string","arrayOf","oneOfType","shape","isRequired","themeType","defaultProps","_default","exports","default"],"sources":["../../../../../src/shared/components/Dropdown/index.tsx"],"sourcesContent":["import PT from 'prop-types';\n\nimport themed, { type Theme } from '@dr.pogodin/react-themes';\n\nimport defaultTheme from './theme.scss';\n\nconst validThemeKeys = [\n  'arrow',\n  'container',\n  'dropdown',\n  'hiddenOption',\n  'label',\n  'option',\n  'select',\n] as const;\n\ntype DropdownOptionT = {\n  name?: string | null;\n  value: string;\n};\n\ntype PropsT = {\n  filter?: (item: DropdownOptionT | string) => boolean;\n  label?: string;\n  onChange?: React.ChangeEventHandler<HTMLSelectElement>;\n  options?: Array<DropdownOptionT | string>;\n  theme: Theme<typeof validThemeKeys>;\n  value?: string;\n};\n\n/**\n * Implements a themeable dropdown list. Internally it is rendered with help of\n * the standard HTML `<select>` element, thus the styling support is somewhat\n * limited.\n * @param [props] Component properties.\n * @param [props.filter] Options filter function. If provided, only\n * those elements of `options` list will be used by the dropdown, for which this\n * filter returns `true`.\n * @param [props.label] Dropdown label.\n * @param [props.onChange] Selection event handler.\n * @param [props.options=[]] Array of dropdown\n * options. For string elements the option value and name will be the same.\n * It is allowed to mix DropdownOption and string elements in the same option\n * list.\n * @param [props.theme] _Ad hoc_ theme.\n * @param [props.value] Currently selected value.\n * @param [props....]\n * [Other theming properties](https://www.npmjs.com/package/@dr.pogodin/react-themes#themed-component-properties)\n */\nconst Dropdown: React.FunctionComponent<PropsT> = ({\n  filter,\n  label,\n  onChange,\n  options = [],\n  theme,\n  value,\n}) => {\n  let isValidValue = false;\n  const optionElements = [];\n\n  for (let i = 0; i < options.length; ++i) {\n    const option = options[i];\n    if (!filter || filter(option)) {\n      let optionValue: string;\n      let optionName: string;\n      if (typeof option === 'string') {\n        optionName = option;\n        optionValue = option;\n      } else {\n        optionName = option.name || option.value;\n        optionValue = option.value;\n      }\n      isValidValue ||= optionValue === value;\n      optionElements.push(\n        <option className={theme.option} key={optionValue} value={optionValue}>\n          {optionName}\n        </option>,\n      );\n    }\n  }\n\n  // NOTE: This element represents the current `value` when it does not match\n  // any valid option. In Chrome, and some other browsers, we are able to hide\n  // it from the opened dropdown; in others, e.g. Safari, the best we can do is\n  // to show it as disabled.\n  const hiddenOption = isValidValue ? null : (\n    <option\n      disabled\n      className={theme.hiddenOption}\n      key=\"__reactUtilsHiddenOption\"\n      value={value}\n    >\n      {value}\n    </option>\n  );\n\n  return (\n    <div className={theme.container}>\n      { label === undefined ? null : <p className={theme.label}>{label}</p> }\n      <div className={theme.dropdown}>\n        <select\n          className={theme.select}\n          onChange={onChange}\n          value={value}\n        >\n          {hiddenOption}\n          {optionElements}\n        </select>\n        <div className={theme.arrow}>▼</div>\n      </div>\n    </div>\n  );\n};\n\nconst ThemedDropdown = themed(\n  Dropdown,\n  'Dropdown',\n  validThemeKeys,\n  defaultTheme,\n);\n\nDropdown.propTypes = {\n  filter: PT.func,\n  label: PT.string,\n  onChange: PT.func,\n  options: PT.arrayOf(\n    PT.oneOfType([\n      PT.shape({\n        name: PT.string,\n        value: PT.string.isRequired,\n      }),\n      PT.string,\n    ]).isRequired,\n  ),\n  theme: ThemedDropdown.themeType.isRequired,\n  value: PT.string,\n};\n\nDropdown.defaultProps = {\n  filter: undefined,\n  label: undefined,\n  onChange: undefined,\n  options: [],\n  value: '',\n};\n\nexport default ThemedDropdown;\n"],"mappings":"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","ignoreList":[]}

package/build/development/shared/components/ScalableRect/index.js

@@ -1,80 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _propTypes = _interopRequireDefault(require("prop-types"));
-require("react");
-var _jsxRuntime = require("react/jsx-runtime");
-/**
- * The `<ScalableRect>` component implements container keeping given aspect
- * ratio, while its width is altered.
- *
- * **Children:** Component children are rendered as the component's content.
- * @param {object} props
- * @param {string} [props.className] CSS class for component container.
- * @param {string} [props.ratio=1:1] Ratio of the rendered rectangle sides,
- * in `W:H` form.
- */
-const ScalableRect = ({
-  children,
-  className,
-  ratio
-}) => {
-  const aux = ratio.split(':');
-  const paddingBottom = `${100 * parseFloat(aux[1]) / parseFloat(aux[0])}%`;
-
-  /* NOTE: In case the following code looks strange to you, mind that we want to
-   * allow the user to set custom styles on this component. If user passes in a
-   * "className" prop (possibly "styleName", but that one is converted to
-   * "className" by Babel just before being passed into this component), it
-   * should not interfere with the sizing behavior, thus we need an extra <div>
-   * level in this component; however, if user does not need a custom styling,
-   * we can save one level of HTML code, so we do it. */
-  const rect = /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-    style: {
-      paddingBottom
-    },
-    className: "-dr-pogodin-react-utils___src-shared-components-ScalableRect-style___container___EznFz3",
-    children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-      className: "-dr-pogodin-react-utils___src-shared-components-ScalableRect-style___wrapper___0vb7tq",
-      children: children
-    })
-  });
-  return className ? /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-    className: className,
-    children: rect
-  }) : rect;
-};
-ScalableRect.defaultProps = {
-  children: null,
-  className: undefined,
-  ratio: '1:1'
-};
-ScalableRect.propTypes = {
-  children: _propTypes.default.node,
-  className: _propTypes.default.string,
-  ratio: (props, name) => {
-    const ratio = props[name];
-
-    // "ratio" prop is not required (defaults "1:1").
-    if (ratio === undefined) return null;
-
-    // If given, "ratio" must be a string.
-    if (typeof ratio !== 'string') {
-      return Error('"ratio" prop must be a string');
-    }
-
-    // If given, "ratio" must have "H:W" format.
-    if (!ratio.match(/\d+:\d+/)) {
-      return Error('"ratio" prop must have "H:W" format');
-    }
-
-    // Everything looks right.
-    return null;
-  }
-};
-var _default = exports.default = ScalableRect;
-//# sourceMappingURL=index.js.map

package/build/development/shared/components/ScalableRect/index.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.js","names":["_propTypes","_interopRequireDefault","require","_jsxRuntime","ScalableRect","children","className","ratio","aux","split","paddingBottom","parseFloat","rect","jsx","style","defaultProps","undefined","propTypes","PT","node","string","props","name","Error","match","_default","exports","default"],"sources":["../../../../../src/shared/components/ScalableRect/index.tsx"],"sourcesContent":["import PT from 'prop-types';\nimport { type ReactNode } from 'react';\n\nimport './style.scss';\n\ntype PropsT = {\n  children?: ReactNode;\n  className?: string;\n  ratio?: `${number}:${number}`,\n};\n\n/**\n * The `<ScalableRect>` component implements container keeping given aspect\n * ratio, while its width is altered.\n *\n * **Children:** Component children are rendered as the component's content.\n * @param {object} props\n * @param {string} [props.className] CSS class for component container.\n * @param {string} [props.ratio=1:1] Ratio of the rendered rectangle sides,\n * in `W:H` form.\n */\nconst ScalableRect: React.FunctionComponent<PropsT> = ({\n  children,\n  className,\n  ratio,\n}) => {\n  const aux = ratio!.split(':');\n  const paddingBottom = `${(100 * parseFloat(aux[1])) / parseFloat(aux[0])}%`;\n\n  /* NOTE: In case the following code looks strange to you, mind that we want to\n   * allow the user to set custom styles on this component. If user passes in a\n   * \"className\" prop (possibly \"styleName\", but that one is converted to\n   * \"className\" by Babel just before being passed into this component), it\n   * should not interfere with the sizing behavior, thus we need an extra <div>\n   * level in this component; however, if user does not need a custom styling,\n   * we can save one level of HTML code, so we do it. */\n  const rect = (\n    <div\n      style={{ paddingBottom }}\n      styleName=\"container\"\n    >\n      <div styleName=\"wrapper\">\n        {children}\n      </div>\n    </div>\n  );\n  return className ? (\n    <div className={className}>\n      {rect}\n    </div>\n  ) : rect;\n};\n\nScalableRect.defaultProps = {\n  children: null,\n  className: undefined,\n  ratio: '1:1',\n};\n\nScalableRect.propTypes = {\n  children: PT.node,\n  className: PT.string,\n  ratio: (props, name) => {\n    const ratio = props[name];\n\n    // \"ratio\" prop is not required (defaults \"1:1\").\n    if (ratio === undefined) return null;\n\n    // If given, \"ratio\" must be a string.\n    if (typeof ratio !== 'string') {\n      return Error('\"ratio\" prop must be a string');\n    }\n\n    // If given, \"ratio\" must have \"H:W\" format.\n    if (!ratio.match(/\\d+:\\d+/)) {\n      return Error('\"ratio\" prop must have \"H:W\" format');\n    }\n\n    // Everything looks right.\n    return null;\n  },\n};\n\nexport default ScalableRect;\n"],"mappings":";;;;;;;AAAA,IAAAA,UAAA,GAAAC,sBAAA,CAAAC,OAAA;AACAA,OAAA;AAAuC,IAAAC,WAAA,GAAAD,OAAA;AAUvC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAME,YAA6C,GAAGA,CAAC;EACrDC,QAAQ;EACRC,SAAS;EACTC;AACF,CAAC,KAAK;EACJ,MAAMC,GAAG,GAAGD,KAAK,CAAEE,KAAK,CAAC,GAAG,CAAC;EAC7B,MAAMC,aAAa,GAAI,GAAG,GAAG,GAAGC,UAAU,CAACH,GAAG,CAAC,CAAC,CAAC,CAAC,GAAIG,UAAU,CAACH,GAAG,CAAC,CAAC,CAAC,CAAE,GAAE;;EAE3E;AACF;AACA;AACA;AACA;AACA;AACA;EACE,MAAMI,IAAI,gBACR,IAAAT,WAAA,CAAAU,GAAA;IACEC,KAAK,EAAE;MAAEJ;IAAc,CAAE;IACzBJ,SAAS,EAAC,yFAAW;IAAAD,QAAA,eAErB,IAAAF,WAAA,CAAAU,GAAA;MAAKP,SAAS,EAAC,uFAAS;MAAAD,QAAA,EACrBA;IAAQ,CACN;EAAC,CACH,CACN;EACD,OAAOC,SAAS,gBACd,IAAAH,WAAA,CAAAU,GAAA;IAAKP,SAAS,EAAEA,SAAU;IAAAD,QAAA,EACvBO;EAAI,CACF,CAAC,GACJA,IAAI;AACV,CAAC;AAEDR,YAAY,CAACW,YAAY,GAAG;EAC1BV,QAAQ,EAAE,IAAI;EACdC,SAAS,EAAEU,SAAS;EACpBT,KAAK,EAAE;AACT,CAAC;AAEDH,YAAY,CAACa,SAAS,GAAG;EACvBZ,QAAQ,EAAEa,kBAAE,CAACC,IAAI;EACjBb,SAAS,EAAEY,kBAAE,CAACE,MAAM;EACpBb,KAAK,EAAEA,CAACc,KAAK,EAAEC,IAAI,KAAK;IACtB,MAAMf,KAAK,GAAGc,KAAK,CAACC,IAAI,CAAC;;IAEzB;IACA,IAAIf,KAAK,KAAKS,SAAS,EAAE,OAAO,IAAI;;IAEpC;IACA,IAAI,OAAOT,KAAK,KAAK,QAAQ,EAAE;MAC7B,OAAOgB,KAAK,CAAC,+BAA+B,CAAC;IAC/C;;IAEA;IACA,IAAI,CAAChB,KAAK,CAACiB,KAAK,CAAC,SAAS,CAAC,EAAE;MAC3B,OAAOD,KAAK,CAAC,qCAAqC,CAAC;IACrD;;IAEA;IACA,OAAO,IAAI;EACb;AACF,CAAC;AAAC,IAAAE,QAAA,GAAAC,OAAA,CAAAC,OAAA,GAEavB,YAAY","ignoreList":[]}

package/build/production/shared/components/Dropdown/index.js

@@ -1,24 +0,0 @@
-"use strict";var _interopRequireDefault=require("@babel/runtime/helpers/interopRequireDefault");Object.defineProperty(exports,"__esModule",{value:true});exports.default=void 0;var _propTypes=_interopRequireDefault(require("prop-types"));var _reactThemes=_interopRequireDefault(require("@dr.pogodin/react-themes"));var _jsxRuntime=require("react/jsx-runtime");const defaultTheme={"context":"haRIry","ad":"D4XHG2","hoc":"N3nd34","dropdown":"-LiQj8","arrow":"-zPK7Y","container":"_9CQpeA","label":"Gv0kyu","option":"xmsujA","hiddenOption":"RdW3yR","select":"JXK1uw"};const validThemeKeys=["arrow","container","dropdown","hiddenOption","label","option","select"];/**
- * Implements a themeable dropdown list. Internally it is rendered with help of
- * the standard HTML `<select>` element, thus the styling support is somewhat
- * limited.
- * @param [props] Component properties.
- * @param [props.filter] Options filter function. If provided, only
- * those elements of `options` list will be used by the dropdown, for which this
- * filter returns `true`.
- * @param [props.label] Dropdown label.
- * @param [props.onChange] Selection event handler.
- * @param [props.options=[]] Array of dropdown
- * options. For string elements the option value and name will be the same.
- * It is allowed to mix DropdownOption and string elements in the same option
- * list.
- * @param [props.theme] _Ad hoc_ theme.
- * @param [props.value] Currently selected value.
- * @param [props....]
- * [Other theming properties](https://www.npmjs.com/package/@dr.pogodin/react-themes#themed-component-properties)
- */const Dropdown=({filter,label,onChange,options=[],theme,value})=>{let isValidValue=false;const optionElements=[];for(let i=0;i<options.length;++i){const option=options[i];if(!filter||filter(option)){let optionValue;let optionName;if(typeof option==="string"){optionName=option;optionValue=option}else{optionName=option.name||option.value;optionValue=option.value}isValidValue||=optionValue===value;optionElements.push(/*#__PURE__*/(0,_jsxRuntime.jsx)("option",{className:theme.option,value:optionValue,children:optionName},optionValue))}}// NOTE: This element represents the current `value` when it does not match
-// any valid option. In Chrome, and some other browsers, we are able to hide
-// it from the opened dropdown; in others, e.g. Safari, the best we can do is
-// to show it as disabled.
-const hiddenOption=isValidValue?null:/*#__PURE__*/(0,_jsxRuntime.jsx)("option",{disabled:true,className:theme.hiddenOption,value:value,children:value},"__reactUtilsHiddenOption");return/*#__PURE__*/(0,_jsxRuntime.jsxs)("div",{className:theme.container,children:[label===undefined?null:/*#__PURE__*/(0,_jsxRuntime.jsx)("p",{className:theme.label,children:label}),/*#__PURE__*/(0,_jsxRuntime.jsxs)("div",{className:theme.dropdown,children:[/*#__PURE__*/(0,_jsxRuntime.jsxs)("select",{className:theme.select,onChange:onChange,value:value,children:[hiddenOption,optionElements]}),/*#__PURE__*/(0,_jsxRuntime.jsx)("div",{className:theme.arrow,children:"\u25BC"})]})]})};const ThemedDropdown=(0,_reactThemes.default)(Dropdown,"Dropdown",validThemeKeys,defaultTheme);Dropdown.propTypes={filter:_propTypes.default.func,label:_propTypes.default.string,onChange:_propTypes.default.func,options:_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.shape({name:_propTypes.default.string,value:_propTypes.default.string.isRequired}),_propTypes.default.string]).isRequired),theme:ThemedDropdown.themeType.isRequired,value:_propTypes.default.string};Dropdown.defaultProps={filter:undefined,label:undefined,onChange:undefined,options:[],value:""};var _default=exports.default=ThemedDropdown;
-//# sourceMappingURL=index.js.map