@dr.pogodin/react-utils 1.30.2 → 1.31.1

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

package/build/production/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/production/shared/components/ScalableRect/index.js

@@ -1,21 +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:"EznFz3",children:/*#__PURE__*/(0,_jsxRuntime.jsx)("div",{className:"_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/production/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":"gLAAA,IAAAA,UAAA,CAAAC,sBAAA,CAAAC,OAAA,gBACAA,OAAA,UAAuC,IAAAC,WAAA,CAAAD,OAAA,sBAUvC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,GACA,KAAM,CAAAE,YAA6C,CAAGA,CAAC,CACrDC,QAAQ,CACRC,SAAS,CACTC,KACF,CAAC,GAAK,CACJ,KAAM,CAAAC,GAAG,CAAGD,KAAK,CAAEE,KAAK,CAAC,GAAG,CAAC,CAC7B,KAAM,CAAAC,aAAa,CAAI,GAAG,GAAG,CAAGC,UAAU,CAACH,GAAG,CAAC,CAAC,CAAC,CAAC,CAAIG,UAAU,CAACH,GAAG,CAAC,CAAC,CAAC,CAAE,GAAE,CAE3E;AACF;AACA;AACA;AACA;AACA;AACA,wDACE,KAAM,CAAAI,IAAI,cACR,GAAAT,WAAA,CAAAU,GAAA,SACEC,KAAK,CAAE,CAAEJ,aAAc,CAAE,CACzBJ,SAAS,CAAC,QAAW,CAAAD,QAAA,cAErB,GAAAF,WAAA,CAAAU,GAAA,SAAKP,SAAS,CAAC,SAAS,CAAAD,QAAA,CACrBA,QAAQ,CACN,CAAC,CACH,CACN,CACD,MAAO,CAAAC,SAAS,cACd,GAAAH,WAAA,CAAAU,GAAA,SAAKP,SAAS,CAAEA,SAAU,CAAAD,QAAA,CACvBO,IAAI,CACF,CAAC,CACJA,IACN,CAAC,CAEDR,YAAY,CAACW,YAAY,CAAG,CAC1BV,QAAQ,CAAE,IAAI,CACdC,SAAS,CAAEU,SAAS,CACpBT,KAAK,CAAE,KACT,CAAC,CAEDH,YAAY,CAACa,SAAS,CAAG,CACvBZ,QAAQ,CAAEa,kBAAE,CAACC,IAAI,CACjBb,SAAS,CAAEY,kBAAE,CAACE,MAAM,CACpBb,KAAK,CAAEA,CAACc,KAAK,CAAEC,IAAI,GAAK,CACtB,KAAM,CAAAf,KAAK,CAAGc,KAAK,CAACC,IAAI,CAAC,CAEzB;AACA,GAAIf,KAAK,GAAKS,SAAS,CAAE,MAAO,KAAI,CAEpC;AACA,GAAI,MAAO,CAAAT,KAAK,GAAK,QAAQ,CAAE,CAC7B,MAAO,CAAAgB,KAAK,CAAC,iCAA+B,CAC9C,CAEA;AACA,GAAI,CAAChB,KAAK,CAACiB,KAAK,CAAC,SAAS,CAAC,CAAE,CAC3B,MAAO,CAAAD,KAAK,CAAC,yCAAqC,CACpD,CAEA;AACA,MAAO,KACT,CACF,CAAC,CAAC,IAAAE,QAAA,CAAAC,OAAA,CAAAC,OAAA,CAEavB,YAAY","ignoreList":[]}

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

@@ -1,17 +0,0 @@
-/// <reference types="react" />
-import { type Theme } from '@dr.pogodin/react-themes';
-declare const validThemeKeys: readonly ["arrow", "container", "dropdown", "hiddenOption", "label", "option", "select"];
-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;
-};
-declare const ThemedDropdown: import("@dr.pogodin/react-themes").ThemedComponent<PropsT>;
-export default ThemedDropdown;

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

@@ -1,19 +0,0 @@
-import { type ReactNode } from 'react';
-import './style.scss';
-type PropsT = {
-    children?: ReactNode;
-    className?: string;
-    ratio?: `${number}:${number}`;
-};
-/**
- * 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.
- */
-declare const ScalableRect: React.FunctionComponent<PropsT>;
-export default ScalableRect;

package/build/types-scss/src/shared/components/ScalableRect/style.scss.d.ts

@@ -1,2 +0,0 @@
-export declare const container: string;
-export declare const wrapper: string;

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

@@ -1,84 +0,0 @@
-import PT from 'prop-types';
-import { type ReactNode } from 'react';
-
-import './style.scss';
-
-type PropsT = {
-  children?: ReactNode;
-  className?: string;
-  ratio?: `${number}:${number}`,
-};
-
-/**
- * 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: React.FunctionComponent<PropsT> = ({
-  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 = (
-    <div
-      style={{ paddingBottom }}
-      styleName="container"
-    >
-      <div styleName="wrapper">
-        {children}
-      </div>
-    </div>
-  );
-  return className ? (
-    <div className={className}>
-      {rect}
-    </div>
-  ) : rect;
-};
-
-ScalableRect.defaultProps = {
-  children: null,
-  className: undefined,
-  ratio: '1:1',
-};
-
-ScalableRect.propTypes = {
-  children: PT.node,
-  className: PT.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;
-  },
-};
-
-export default ScalableRect;

package/src/shared/components/ScalableRect/style.scss

@@ -1,10 +0,0 @@
-.container {
-  position: relative;
-  width: 100%;
-}
-
-.wrapper {
-  height: 100%;
-  position: absolute;
-  width: 100%;
-}