@dr.pogodin/react-utils 1.30.2 → 1.31.0

package/build/development/shared/components/selectors/CustomDropdown/index.js

@@ -0,0 +1,105 @@
+"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 _react = require("react");
+var _reactThemes = _interopRequireDefault(require("@dr.pogodin/react-themes"));
+var _Options = _interopRequireDefault(require("./Options"));
+var _common = require("../common");
+var _jsxRuntime = require("react/jsx-runtime");
+const defaultTheme = {
+  "context": "-dr-pogodin-react-utils___src-shared-components-selectors-CustomDropdown-theme___context___9Tod5r",
+  "ad": "-dr-pogodin-react-utils___src-shared-components-selectors-CustomDropdown-theme___ad___R58zIg",
+  "hoc": "-dr-pogodin-react-utils___src-shared-components-selectors-CustomDropdown-theme___hoc___O-Tp1i",
+  "container": "-dr-pogodin-react-utils___src-shared-components-selectors-CustomDropdown-theme___container___oQKv0Y",
+  "label": "-dr-pogodin-react-utils___src-shared-components-selectors-CustomDropdown-theme___label___YUPUNs",
+  "dropdown": "-dr-pogodin-react-utils___src-shared-components-selectors-CustomDropdown-theme___dropdown___pNEyAA",
+  "option": "-dr-pogodin-react-utils___src-shared-components-selectors-CustomDropdown-theme___option___LD2Kzy",
+  "select": "-dr-pogodin-react-utils___src-shared-components-selectors-CustomDropdown-theme___select___LP5azC",
+  "arrow": "-dr-pogodin-react-utils___src-shared-components-selectors-CustomDropdown-theme___arrow___-wscve",
+  "active": "-dr-pogodin-react-utils___src-shared-components-selectors-CustomDropdown-theme___active___k2UDsV"
+};
+const BaseCustomDropdown = ({
+  filter,
+  label,
+  onChange,
+  options,
+  theme,
+  value
+}) => {
+  if (!options) throw Error('Internal error');
+  const dropdownRef = (0, _react.useRef)(null);
+
+  // If "null" the dropdown is closed, otherwise it is displayed
+  // at the specified coordinates.
+  const [anchor, setAnchor] = (0, _react.useState)(null);
+  const openList = () => {
+    setAnchor(dropdownRef.current.getBoundingClientRect());
+  };
+  let selected = /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
+    children: "\u200C"
+  });
+  for (let i = 0; i < options.length; ++i) {
+    const option = options[i];
+    if (!filter || filter(option)) {
+      const [iValue, iName] = (0, _common.optionValueName)(option);
+      if (iValue === value) {
+        selected = iName;
+        break;
+      }
+    }
+  }
+  let containerClassName = theme.container;
+  if (anchor) containerClassName += ` ${theme.active}`;
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+    className: containerClassName,
+    children: [label === undefined ? null : /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: theme.label,
+      children: label
+    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      className: theme.dropdown,
+      onClick: openList,
+      onKeyDown: e => {
+        if (e.key === 'Enter') openList();
+      },
+      ref: dropdownRef,
+      role: "listbox",
+      tabIndex: 0,
+      children: [selected, /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        className: theme.arrow
+      })]
+    }), anchor ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_Options.default, {
+      anchorRect: anchor,
+      containerClass: theme.select || '',
+      onCancel: () => setAnchor(null),
+      onChange: newValue => {
+        setAnchor(null);
+        if (onChange) onChange(newValue);
+      },
+      optionClass: theme.option || '',
+      options: options
+    }) : null]
+  });
+};
+const ThemedCustomDropdown = (0, _reactThemes.default)(BaseCustomDropdown, 'CustomDropdown', _common.validThemeKeys, defaultTheme);
+BaseCustomDropdown.propTypes = {
+  filter: _propTypes.default.func,
+  label: _propTypes.default.node,
+  onChange: _propTypes.default.func,
+  options: _propTypes.default.arrayOf(_common.optionValidator.isRequired),
+  theme: ThemedCustomDropdown.themeType.isRequired,
+  value: _propTypes.default.string
+};
+BaseCustomDropdown.defaultProps = {
+  filter: undefined,
+  label: undefined,
+  onChange: undefined,
+  options: [],
+  value: undefined
+};
+var _default = exports.default = ThemedCustomDropdown;
+//# sourceMappingURL=index.js.map

package/build/development/shared/components/selectors/CustomDropdown/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["_propTypes","_interopRequireDefault","require","_react","_reactThemes","_Options","_common","_jsxRuntime","defaultTheme","BaseCustomDropdown","filter","label","onChange","options","theme","value","Error","dropdownRef","useRef","anchor","setAnchor","useState","openList","current","getBoundingClientRect","selected","jsx","Fragment","children","i","length","option","iValue","iName","optionValueName","containerClassName","container","active","jsxs","className","undefined","dropdown","onClick","onKeyDown","e","key","ref","role","tabIndex","arrow","default","anchorRect","containerClass","select","onCancel","newValue","optionClass","ThemedCustomDropdown","themed","validThemeKeys","propTypes","PT","func","node","arrayOf","optionValidator","isRequired","themeType","string","defaultProps","_default","exports"],"sources":["../../../../../../src/shared/components/selectors/CustomDropdown/index.tsx"],"sourcesContent":["import PT from 'prop-types';\nimport { useRef, useState } from 'react';\n\nimport themed from '@dr.pogodin/react-themes';\n\nimport Options from './Options';\n\nimport defaultTheme from './theme.scss';\n\nimport {\n  type PropsT,\n  optionValidator,\n  optionValueName,\n  validThemeKeys,\n} from '../common';\n\nconst BaseCustomDropdown: React.FunctionComponent<\nPropsT<React.ReactNode, (value: string) => void>\n> = ({\n  filter,\n  label,\n  onChange,\n  options,\n  theme,\n  value,\n}) => {\n  if (!options) throw Error('Internal error');\n\n  const dropdownRef = useRef<HTMLDivElement>(null);\n\n  // If \"null\" the dropdown is closed, otherwise it is displayed\n  // at the specified coordinates.\n  const [anchor, setAnchor] = useState<DOMRect | null>(null);\n\n  const openList = () => {\n    setAnchor(dropdownRef.current!.getBoundingClientRect());\n  };\n\n  let selected: React.ReactNode = <>&zwnj;</>;\n  for (let i = 0; i < options.length; ++i) {\n    const option = options[i];\n    if (!filter || filter(option)) {\n      const [iValue, iName] = optionValueName(option);\n      if (iValue === value) {\n        selected = iName;\n        break;\n      }\n    }\n  }\n\n  let containerClassName = theme.container;\n  if (anchor) containerClassName += ` ${theme.active}`;\n\n  return (\n    <div className={containerClassName}>\n      {label === undefined ? null : (\n        <div className={theme.label}>{label}</div>\n      )}\n      <div\n        className={theme.dropdown}\n        onClick={openList}\n        onKeyDown={(e) => {\n          if (e.key === 'Enter') openList();\n        }}\n        ref={dropdownRef}\n        role=\"listbox\"\n        tabIndex={0}\n      >\n        {selected}\n        <div className={theme.arrow} />\n      </div>\n      {\n        anchor ? (\n          <Options\n            anchorRect={anchor}\n            containerClass={theme.select || ''}\n            onCancel={() => setAnchor(null)}\n            onChange={(newValue) => {\n              setAnchor(null);\n              if (onChange) onChange(newValue);\n            }}\n            optionClass={theme.option || ''}\n            options={options}\n          />\n        ) : null\n      }\n    </div>\n  );\n};\n\nconst ThemedCustomDropdown = themed(\n  BaseCustomDropdown,\n  'CustomDropdown',\n  validThemeKeys,\n  defaultTheme,\n);\n\nBaseCustomDropdown.propTypes = {\n  filter: PT.func,\n  label: PT.node,\n  onChange: PT.func,\n  options: PT.arrayOf(optionValidator.isRequired),\n  theme: ThemedCustomDropdown.themeType.isRequired,\n  value: PT.string,\n};\n\nBaseCustomDropdown.defaultProps = {\n  filter: undefined,\n  label: undefined,\n  onChange: undefined,\n  options: [],\n  value: undefined,\n};\n\nexport default ThemedCustomDropdown;\n"],"mappings":"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","ignoreList":[]}

package/build/development/shared/components/{Dropdown → selectors/NativeDropdown}/index.js

@@ -7,20 +7,22 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _reactThemes = _interopRequireDefault(require("@dr.pogodin/react-themes"));
+var _common = require("../common");
 var _jsxRuntime = require("react/jsx-runtime");
+// Implements dropdown based on the native HTML <select> element.
 const defaultTheme = {
-  "context": "-dr-pogodin-react-utils___src-shared-components-Dropdown-theme___context___haRIry",
-  "ad": "-dr-pogodin-react-utils___src-shared-components-Dropdown-theme___ad___D4XHG2",
-  "hoc": "-dr-pogodin-react-utils___src-shared-components-Dropdown-theme___hoc___N3nd34",
-  "dropdown": "-dr-pogodin-react-utils___src-shared-components-Dropdown-theme___dropdown___-LiQj8",
-  "arrow": "-dr-pogodin-react-utils___src-shared-components-Dropdown-theme___arrow___-zPK7Y",
-  "container": "-dr-pogodin-react-utils___src-shared-components-Dropdown-theme___container___9CQpeA",
-  "label": "-dr-pogodin-react-utils___src-shared-components-Dropdown-theme___label___Gv0kyu",
-  "option": "-dr-pogodin-react-utils___src-shared-components-Dropdown-theme___option___xmsujA",
-  "hiddenOption": "-dr-pogodin-react-utils___src-shared-components-Dropdown-theme___hiddenOption___RdW3yR",
-  "select": "-dr-pogodin-react-utils___src-shared-components-Dropdown-theme___select___JXK1uw"
+  "context": "-dr-pogodin-react-utils___src-shared-components-selectors-NativeDropdown-theme___context___xHyZo4",
+  "ad": "-dr-pogodin-react-utils___src-shared-components-selectors-NativeDropdown-theme___ad___ADu59e",
+  "hoc": "-dr-pogodin-react-utils___src-shared-components-selectors-NativeDropdown-theme___hoc___FTP2bb",
+  "dropdown": "-dr-pogodin-react-utils___src-shared-components-selectors-NativeDropdown-theme___dropdown___kI9A9U",
+  "arrow": "-dr-pogodin-react-utils___src-shared-components-selectors-NativeDropdown-theme___arrow___DubGkT",
+  "container": "-dr-pogodin-react-utils___src-shared-components-selectors-NativeDropdown-theme___container___WtSZPd",
+  "active": "-dr-pogodin-react-utils___src-shared-components-selectors-NativeDropdown-theme___active___ayMn7O",
+  "label": "-dr-pogodin-react-utils___src-shared-components-selectors-NativeDropdown-theme___label___K7JYKw",
+  "option": "-dr-pogodin-react-utils___src-shared-components-selectors-NativeDropdown-theme___option___27pZ6W",
+  "hiddenOption": "-dr-pogodin-react-utils___src-shared-components-selectors-NativeDropdown-theme___hiddenOption___clAKFJ",
+  "select": "-dr-pogodin-react-utils___src-shared-components-selectors-NativeDropdown-theme___select___N0Fc14"
 };
-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
@@ -44,30 +46,23 @@ const Dropdown = ({
   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;
-      let optionName;
-      if (typeof option === 'string') {
-        optionName = option;
-        optionValue = option;
-      } else {
-        optionName = option.name || option.value;
-        optionValue = option.value;
-      }
-      isValidValue ||= optionValue === value;
+      const [iValue, iName] = (0, _common.optionValueName)(option);
+      isValidValue ||= iValue === value;
       optionElements.push( /*#__PURE__*/(0, _jsxRuntime.jsx)("option", {
         className: theme.option,
-        value: optionValue,
-        children: optionName
-      }, optionValue));
+        value: iValue,
+        children: iName
+      }, iValue));
     }
   }
 
@@ -83,7 +78,7 @@ const Dropdown = ({
   }, "__reactUtilsHiddenOption");
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
     className: theme.container,
-    children: [label === undefined ? null : /*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
+    children: [label === undefined ? null : /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
       className: theme.label,
       children: label
     }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
@@ -94,21 +89,17 @@ const Dropdown = ({
         value: value,
         children: [hiddenOption, optionElements]
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-        className: theme.arrow,
-        children: "\u25BC"
+        className: theme.arrow
       })]
     })]
   });
 };
-const ThemedDropdown = (0, _reactThemes.default)(Dropdown, 'Dropdown', validThemeKeys, defaultTheme);
+const ThemedDropdown = (0, _reactThemes.default)(Dropdown, 'Dropdown', _common.validThemeKeys, defaultTheme);
 Dropdown.propTypes = {
   filter: _propTypes.default.func,
-  label: _propTypes.default.string,
+  label: _propTypes.default.node,
   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),
+  options: _common.optionsValidator,
   theme: ThemedDropdown.themeType.isRequired,
   value: _propTypes.default.string
 };

package/build/development/shared/components/selectors/NativeDropdown/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["_propTypes","_interopRequireDefault","require","_reactThemes","_common","_jsxRuntime","defaultTheme","Dropdown","filter","label","onChange","options","theme","value","Error","isValidValue","optionElements","i","length","option","iValue","iName","optionValueName","push","jsx","className","children","hiddenOption","disabled","jsxs","container","undefined","dropdown","select","arrow","ThemedDropdown","themed","validThemeKeys","propTypes","PT","func","node","optionsValidator","themeType","isRequired","string","defaultProps","_default","exports","default"],"sources":["../../../../../../src/shared/components/selectors/NativeDropdown/index.tsx"],"sourcesContent":["// Implements dropdown based on the native HTML <select> element.\n\nimport PT from 'prop-types';\n\nimport themed from '@dr.pogodin/react-themes';\n\nimport defaultTheme from './theme.scss';\n\nimport {\n  type PropsT,\n  optionsValidator,\n  optionValueName,\n  validThemeKeys,\n} from '../common';\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<string>> = ({\n  filter,\n  label,\n  onChange,\n  options,\n  theme,\n  value,\n}) => {\n  if (!options) throw Error('Internal error');\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      const [iValue, iName] = optionValueName(option);\n      isValidValue ||= iValue === value;\n      optionElements.push(\n        <option className={theme.option} key={iValue} value={iValue}>\n          {iName}\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 : <div className={theme.label}>{label}</div> }\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} />\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.node,\n  onChange: PT.func,\n  options: optionsValidator,\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/selectors/Switch/index.js

@@ -0,0 +1,76 @@
+"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 _common = require("../common");
+var _jsxRuntime = require("react/jsx-runtime");
+const defaultTheme = {
+  "context": "-dr-pogodin-react-utils___src-shared-components-selectors-Switch-theme___context___VMHfnP",
+  "ad": "-dr-pogodin-react-utils___src-shared-components-selectors-Switch-theme___ad___HNliRC",
+  "hoc": "-dr-pogodin-react-utils___src-shared-components-selectors-Switch-theme___hoc___2Ue-db",
+  "container": "-dr-pogodin-react-utils___src-shared-components-selectors-Switch-theme___container___AWNvRj",
+  "option": "-dr-pogodin-react-utils___src-shared-components-selectors-Switch-theme___option___fUfIAd",
+  "selected": "-dr-pogodin-react-utils___src-shared-components-selectors-Switch-theme___selected___Wco-qk",
+  "switch": "-dr-pogodin-react-utils___src-shared-components-selectors-Switch-theme___switch___HR5LN5"
+};
+const validThemeKeys = ['container', 'label', 'option', 'selected', 'switch'];
+const BaseSwitch = ({
+  label,
+  onChange,
+  options,
+  theme,
+  value
+}) => {
+  if (!options || !theme.option) throw Error('Internal error');
+  const optionNodes = [];
+  for (let i = 0; i < options?.length; ++i) {
+    const [iValue, iName] = (0, _common.optionValueName)(options[i]);
+    let className = theme.option;
+    let onPress;
+    if (iValue === value) className += ` ${theme.selected}`;else if (onChange) onPress = () => onChange(iValue);
+    optionNodes.push(onPress ? /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: className,
+      onClick: onPress,
+      onKeyDown: e => {
+        if (onPress && e.key === 'Enter') onPress();
+      },
+      role: "button",
+      tabIndex: 0,
+      children: iName
+    }, iValue) : /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: className,
+      children: iName
+    }, iValue));
+  }
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+    className: theme.container,
+    children: [label ? /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: theme.label,
+      children: label
+    }) : null, /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: theme.switch,
+      children: optionNodes
+    })]
+  });
+};
+const ThemedSwitch = (0, _reactThemes.default)(BaseSwitch, 'Switch', validThemeKeys, defaultTheme);
+BaseSwitch.propTypes = {
+  label: _propTypes.default.node,
+  onChange: _propTypes.default.func,
+  options: _common.optionsValidator,
+  theme: ThemedSwitch.themeType.isRequired,
+  value: _propTypes.default.string
+};
+BaseSwitch.defaultProps = {
+  label: undefined,
+  onChange: undefined,
+  options: [],
+  value: undefined
+};
+var _default = exports.default = ThemedSwitch;
+//# sourceMappingURL=index.js.map

package/build/development/shared/components/selectors/Switch/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["_propTypes","_interopRequireDefault","require","_reactThemes","_common","_jsxRuntime","defaultTheme","validThemeKeys","BaseSwitch","label","onChange","options","theme","value","option","Error","optionNodes","i","length","iValue","iName","optionValueName","className","onPress","selected","push","jsx","onClick","onKeyDown","e","key","role","tabIndex","children","jsxs","container","switch","ThemedSwitch","themed","propTypes","PT","node","func","optionsValidator","themeType","isRequired","string","defaultProps","undefined","_default","exports","default"],"sources":["../../../../../../src/shared/components/selectors/Switch/index.tsx"],"sourcesContent":["import PT from 'prop-types';\nimport themed, { type Theme } from '@dr.pogodin/react-themes';\n\nimport { type OptionsT, optionsValidator, optionValueName } from '../common';\n\nimport defaultTheme from './theme.scss';\n\nconst validThemeKeys = [\n  'container',\n  'label',\n  'option',\n  'selected',\n  'switch',\n] as const;\n\ntype PropsT = {\n  label?: React.ReactNode;\n  onChange?: (value: string) => void;\n  options?: Readonly<OptionsT<React.ReactNode>>;\n  theme: Theme<typeof validThemeKeys>;\n  value?: string;\n};\n\nconst BaseSwitch: React.FunctionComponent<PropsT> = ({\n  label,\n  onChange,\n  options,\n  theme,\n  value,\n}) => {\n  if (!options || !theme.option) throw Error('Internal error');\n\n  const optionNodes: React.ReactNode[] = [];\n  for (let i = 0; i < options?.length; ++i) {\n    const [iValue, iName] = optionValueName(options[i]);\n\n    let className: string = theme.option;\n    let onPress: (() => void) | undefined;\n    if (iValue === value) className += ` ${theme.selected}`;\n    else if (onChange) onPress = () => onChange(iValue);\n\n    optionNodes.push(\n      onPress ? (\n        <div\n          className={className}\n          onClick={onPress}\n          onKeyDown={(e) => {\n            if (onPress && e.key === 'Enter') onPress();\n          }}\n          key={iValue}\n          role=\"button\"\n          tabIndex={0}\n        >\n          {iName}\n        </div>\n      ) : (\n        <div className={className} key={iValue}>{iName}</div>\n      ),\n    );\n  }\n\n  return (\n    <div className={theme.container}>\n      {label ? <div className={theme.label}>{label}</div> : null}\n      <div className={theme.switch}>\n        {optionNodes}\n      </div>\n    </div>\n  );\n};\n\nconst ThemedSwitch = themed(\n  BaseSwitch,\n  'Switch',\n  validThemeKeys,\n  defaultTheme,\n);\n\nBaseSwitch.propTypes = {\n  label: PT.node,\n  onChange: PT.func,\n  options: optionsValidator,\n  theme: ThemedSwitch.themeType.isRequired,\n  value: PT.string,\n};\n\nBaseSwitch.defaultProps = {\n  label: undefined,\n  onChange: undefined,\n  options: [],\n  value: undefined,\n};\n\nexport default ThemedSwitch;\n"],"mappings":"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","ignoreList":[]}

package/build/development/shared/components/selectors/common.js

@@ -0,0 +1,24 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.optionValidator = void 0;
+exports.optionValueName = optionValueName;
+exports.validThemeKeys = exports.optionsValidator = void 0;
+var _propTypes = _interopRequireDefault(require("prop-types"));
+// The stuff common between different dropdown implementations.
+
+const validThemeKeys = exports.validThemeKeys = ['active', 'arrow', 'container', 'dropdown', 'hiddenOption', 'label', 'option', 'select'];
+const optionValidator = exports.optionValidator = _propTypes.default.oneOfType([_propTypes.default.shape({
+  name: _propTypes.default.string,
+  value: _propTypes.default.string.isRequired
+}).isRequired, _propTypes.default.string.isRequired]);
+const optionsValidator = exports.optionsValidator = _propTypes.default.arrayOf(optionValidator.isRequired);
+
+/** Returns option value and name as a tuple. */
+function optionValueName(option) {
+  return typeof option === 'string' ? [option, option] : [option.value, option.name ?? option.value];
+}
+//# sourceMappingURL=common.js.map

package/build/development/shared/components/selectors/common.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"common.js","names":["_propTypes","_interopRequireDefault","require","validThemeKeys","exports","optionValidator","PT","oneOfType","shape","name","string","value","isRequired","optionsValidator","arrayOf","optionValueName","option"],"sources":["../../../../../src/shared/components/selectors/common.ts"],"sourcesContent":["// The stuff common between different dropdown implementations.\n\nimport PT from 'prop-types';\n\nimport type { Theme } from '@dr.pogodin/react-themes';\n\nexport const validThemeKeys = [\n  'active',\n  'arrow',\n  'container',\n  'dropdown',\n  'hiddenOption',\n  'label',\n  'option',\n  'select',\n] as const;\n\nexport type OptionT<NameT> = {\n  name?: NameT | null;\n  value: string;\n};\n\nexport type OptionsT<NameT> = Array<OptionT<NameT> | string>;\n\nexport type PropsT<\n  NameT,\n  OnChangeT = React.ChangeEventHandler<HTMLSelectElement>,\n> = {\n  filter?: (item: OptionT<NameT> | string) => boolean;\n  label?: React.ReactNode;\n  onChange?: OnChangeT;\n  options?: OptionsT<NameT>;\n  theme: Theme<typeof validThemeKeys>;\n  value?: string;\n};\n\nexport const optionValidator = PT.oneOfType([\n  PT.shape({\n    name: PT.string,\n    value: PT.string.isRequired,\n  }).isRequired,\n  PT.string.isRequired,\n]);\n\nexport const optionsValidator = PT.arrayOf(optionValidator.isRequired);\n\n/** Returns option value and name as a tuple. */\nexport function optionValueName<NameT>(\n  option: OptionT<NameT> | string,\n): [string, NameT | string] {\n  return typeof option === 'string'\n    ? [option, option]\n    : [option.value, option.name ?? option.value];\n}\n"],"mappings":";;;;;;;;;AAEA,IAAAA,UAAA,GAAAC,sBAAA,CAAAC,OAAA;AAFA;;AAMO,MAAMC,cAAc,GAAAC,OAAA,CAAAD,cAAA,GAAG,CAC5B,QAAQ,EACR,OAAO,EACP,WAAW,EACX,UAAU,EACV,cAAc,EACd,OAAO,EACP,QAAQ,EACR,QAAQ,CACA;AAqBH,MAAME,eAAe,GAAAD,OAAA,CAAAC,eAAA,GAAGC,kBAAE,CAACC,SAAS,CAAC,CAC1CD,kBAAE,CAACE,KAAK,CAAC;EACPC,IAAI,EAAEH,kBAAE,CAACI,MAAM;EACfC,KAAK,EAAEL,kBAAE,CAACI,MAAM,CAACE;AACnB,CAAC,CAAC,CAACA,UAAU,EACbN,kBAAE,CAACI,MAAM,CAACE,UAAU,CACrB,CAAC;AAEK,MAAMC,gBAAgB,GAAAT,OAAA,CAAAS,gBAAA,GAAGP,kBAAE,CAACQ,OAAO,CAACT,eAAe,CAACO,UAAU,CAAC;;AAEtE;AACO,SAASG,eAAeA,CAC7BC,MAA+B,EACL;EAC1B,OAAO,OAAOA,MAAM,KAAK,QAAQ,GAC7B,CAACA,MAAM,EAAEA,MAAM,CAAC,GAChB,CAACA,MAAM,CAACL,KAAK,EAAEK,MAAM,CAACP,IAAI,IAAIO,MAAM,CAACL,KAAK,CAAC;AACjD","ignoreList":[]}

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

@@ -0,0 +1,28 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "CustomDropdown", {
+  enumerable: true,
+  get: function () {
+    return _CustomDropdown.default;
+  }
+});
+Object.defineProperty(exports, "Dropdown", {
+  enumerable: true,
+  get: function () {
+    return _NativeDropdown.default;
+  }
+});
+Object.defineProperty(exports, "Switch", {
+  enumerable: true,
+  get: function () {
+    return _Switch.default;
+  }
+});
+var _CustomDropdown = _interopRequireDefault(require("./CustomDropdown"));
+var _NativeDropdown = _interopRequireDefault(require("./NativeDropdown"));
+var _Switch = _interopRequireDefault(require("./Switch"));
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["_CustomDropdown","_interopRequireDefault","require","_NativeDropdown","_Switch"],"sources":["../../../../../src/shared/components/selectors/index.ts"],"sourcesContent":["export { default as CustomDropdown } from './CustomDropdown';\nexport { default as Dropdown } from './NativeDropdown';\nexport { default as Switch } from './Switch';\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AAAA,IAAAA,eAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,eAAA,GAAAF,sBAAA,CAAAC,OAAA;AACA,IAAAE,OAAA,GAAAH,sBAAA,CAAAC,OAAA","ignoreList":[]}