@prom-ui/core 0.1.2 → 0.3.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (118) hide show
  1. package/Avatar/package.json +1 -1
  2. package/Backdrop/package.json +1 -1
  3. package/Body/package.json +1 -1
  4. package/BodyProvider/package.json +1 -1
  5. package/Box/package.json +1 -1
  6. package/Button/package.json +1 -1
  7. package/ButtonPageUp/package.json +1 -1
  8. package/Checkbox/package.json +1 -1
  9. package/Flex/package.json +1 -1
  10. package/Grid/package.json +1 -1
  11. package/Icon/package.json +1 -1
  12. package/Image/package.json +1 -1
  13. package/ImageEmoji/package.json +1 -1
  14. package/Input/package.json +1 -1
  15. package/InputField/package.json +1 -1
  16. package/KeyPress/cjs/index.development.js +5 -1
  17. package/KeyPress/cjs/index.development.v2.js +5 -1
  18. package/KeyPress/cjs/index.production.js +1 -1
  19. package/KeyPress/cjs/index.production.v2.js +1 -1
  20. package/KeyPress/index.d.ts +2 -0
  21. package/KeyPress/package.json +1 -1
  22. package/Line/package.json +1 -1
  23. package/Link/package.json +1 -1
  24. package/List/package.json +1 -1
  25. package/Media/{context.d.ts → MediaProvider.d.ts} +2 -2
  26. package/Media/cjs/index.development.js +16 -48
  27. package/Media/cjs/index.development.v2.js +16 -48
  28. package/Media/cjs/index.production.js +1 -1
  29. package/Media/cjs/index.production.v2.js +1 -1
  30. package/Media/index.d.ts +15 -7
  31. package/Media/package.json +2 -2
  32. package/OutsideClick/cjs/index.development.js +5 -1
  33. package/OutsideClick/cjs/index.development.v2.js +5 -1
  34. package/OutsideClick/cjs/index.production.js +1 -1
  35. package/OutsideClick/cjs/index.production.v2.js +1 -1
  36. package/OutsideClick/index.d.ts +2 -1
  37. package/OutsideClick/package.json +1 -1
  38. package/Overlay/package.json +1 -1
  39. package/Picture/package.json +1 -1
  40. package/PortableOverlay/package.json +1 -1
  41. package/Portal/cjs/index.development.js +1 -1
  42. package/Portal/cjs/index.development.v2.js +1 -1
  43. package/Portal/cjs/index.production.js +1 -1
  44. package/Portal/cjs/index.production.v2.js +1 -1
  45. package/Portal/package.json +1 -1
  46. package/QRCode/package.json +1 -1
  47. package/Rating/package.json +1 -1
  48. package/SafeQuery/package.json +1 -1
  49. package/Scroll/package.json +1 -1
  50. package/ScrollControls/package.json +1 -1
  51. package/SideOverlay/package.json +1 -1
  52. package/SimpleSlider/package.json +1 -1
  53. package/Skeleton/package.json +1 -1
  54. package/Spinner/package.json +1 -1
  55. package/Text/package.json +1 -1
  56. package/TextEmoji/package.json +1 -1
  57. package/Tooltip/package.json +1 -1
  58. package/Tumbler/package.json +1 -1
  59. package/base/colors-dark.css +83 -37
  60. package/package.json +5 -4
  61. package/useDebounce/cjs/index.development.js +32 -0
  62. package/useDebounce/cjs/index.development.v2.js +32 -0
  63. package/useDebounce/cjs/index.production.js +1 -0
  64. package/useDebounce/cjs/index.production.v2.js +1 -0
  65. package/useDebounce/index.d.ts +4 -0
  66. package/useDebounce/index.js +7 -0
  67. package/useDebounce/index.v2.js +7 -0
  68. package/useDebounce/package.json +9 -0
  69. package/useIsMounted/cjs/index.development.js +21 -0
  70. package/useIsMounted/cjs/index.development.v2.js +21 -0
  71. package/useIsMounted/cjs/index.production.js +1 -0
  72. package/useIsMounted/cjs/index.production.v2.js +1 -0
  73. package/useIsMounted/index.d.ts +4 -0
  74. package/useIsMounted/index.js +7 -0
  75. package/useIsMounted/index.v2.js +7 -0
  76. package/useIsMounted/package.json +9 -0
  77. package/useKeyPress/cjs/index.development.js +60 -0
  78. package/useKeyPress/cjs/index.development.v2.js +60 -0
  79. package/useKeyPress/cjs/index.production.js +1 -0
  80. package/useKeyPress/cjs/index.production.v2.js +1 -0
  81. package/useKeyPress/index.d.ts +6 -0
  82. package/useKeyPress/index.js +7 -0
  83. package/useKeyPress/index.v2.js +7 -0
  84. package/useKeyPress/package.json +9 -0
  85. package/useMedia/cjs/index.development.js +27 -0
  86. package/useMedia/cjs/index.development.v2.js +27 -0
  87. package/useMedia/cjs/index.production.js +1 -0
  88. package/useMedia/cjs/index.production.v2.js +1 -0
  89. package/useMedia/index.d.ts +21 -0
  90. package/useMedia/index.js +7 -0
  91. package/useMedia/index.v2.js +7 -0
  92. package/useMedia/package.json +12 -0
  93. package/useOutsideClick/cjs/index.development.js +16 -0
  94. package/useOutsideClick/cjs/index.development.v2.js +16 -0
  95. package/useOutsideClick/cjs/index.production.js +1 -0
  96. package/useOutsideClick/cjs/index.production.v2.js +1 -0
  97. package/useOutsideClick/index.d.ts +5 -0
  98. package/useOutsideClick/index.js +7 -0
  99. package/useOutsideClick/index.v2.js +7 -0
  100. package/useOutsideClick/package.json +12 -0
  101. package/usePortal/cjs/index.development.js +85 -0
  102. package/usePortal/cjs/index.development.v2.js +85 -0
  103. package/usePortal/cjs/index.production.js +1 -0
  104. package/usePortal/cjs/index.production.v2.js +1 -0
  105. package/usePortal/index.d.ts +12 -0
  106. package/usePortal/index.js +7 -0
  107. package/usePortal/index.v2.js +7 -0
  108. package/usePortal/package.json +9 -0
  109. package/useScrollPosition/cjs/index.development.js +12 -0
  110. package/useScrollPosition/cjs/index.development.v2.js +12 -0
  111. package/useScrollPosition/cjs/index.production.js +1 -0
  112. package/useScrollPosition/cjs/index.production.v2.js +1 -0
  113. package/useScrollPosition/index.d.ts +5 -0
  114. package/useScrollPosition/index.js +7 -0
  115. package/useScrollPosition/index.v2.js +7 -0
  116. package/useScrollPosition/package.json +12 -0
  117. package/Media/breakpoints.d.ts +0 -17
  118. package/Media/useMedia.d.ts +0 -7
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@prom-ui/core/Avatar",
3
- "version": "0.1.2",
3
+ "version": "0.3.0",
4
4
  "main": "index.js",
5
5
  "types": "index.d.ts",
6
6
  "sideEffects": [
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@prom-ui/core/Backdrop",
3
- "version": "0.1.2",
3
+ "version": "0.3.0",
4
4
  "main": "index.js",
5
5
  "types": "index.d.ts",
6
6
  "sideEffects": [
package/Body/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@prom-ui/core/Body",
3
- "version": "0.1.2",
3
+ "version": "0.3.0",
4
4
  "main": "index.js",
5
5
  "types": "index.d.ts",
6
6
  "sideEffects": [
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@prom-ui/core/BodyProvider",
3
- "version": "0.1.2",
3
+ "version": "0.3.0",
4
4
  "main": "index.js",
5
5
  "types": "index.d.ts",
6
6
  "sideEffects": [
package/Box/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@prom-ui/core/Box",
3
- "version": "0.1.2",
3
+ "version": "0.3.0",
4
4
  "main": "index.js",
5
5
  "types": "index.d.ts",
6
6
  "sideEffects": [
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@prom-ui/core/Button",
3
- "version": "0.1.2",
3
+ "version": "0.3.0",
4
4
  "main": "index.js",
5
5
  "types": "index.d.ts",
6
6
  "sideEffects": [
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@prom-ui/core/ButtonPageUp",
3
- "version": "0.1.2",
3
+ "version": "0.3.0",
4
4
  "main": "index.js",
5
5
  "types": "index.d.ts",
6
6
  "sideEffects": [
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@prom-ui/core/Checkbox",
3
- "version": "0.1.2",
3
+ "version": "0.3.0",
4
4
  "main": "index.js",
5
5
  "types": "index.d.ts",
6
6
  "sideEffects": [
package/Flex/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@prom-ui/core/Flex",
3
- "version": "0.1.2",
3
+ "version": "0.3.0",
4
4
  "main": "index.js",
5
5
  "types": "index.d.ts",
6
6
  "sideEffects": [
package/Grid/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@prom-ui/core/Grid",
3
- "version": "0.1.2",
3
+ "version": "0.3.0",
4
4
  "main": "index.js",
5
5
  "types": "index.d.ts",
6
6
  "sideEffects": [
package/Icon/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@prom-ui/core/Icon",
3
- "version": "0.1.2",
3
+ "version": "0.3.0",
4
4
  "main": "index.js",
5
5
  "types": "index.d.ts",
6
6
  "sideEffects": [
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@prom-ui/core/Image",
3
- "version": "0.1.2",
3
+ "version": "0.3.0",
4
4
  "main": "index.js",
5
5
  "types": "index.d.ts",
6
6
  "sideEffects": [
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@prom-ui/core/ImageEmoji",
3
- "version": "0.1.2",
3
+ "version": "0.3.0",
4
4
  "main": "index.js",
5
5
  "types": "index.d.ts",
6
6
  "sideEffects": [
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@prom-ui/core/Input",
3
- "version": "0.1.2",
3
+ "version": "0.3.0",
4
4
  "main": "index.js",
5
5
  "types": "index.d.ts",
6
6
  "sideEffects": [
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@prom-ui/core/InputField",
3
- "version": "0.1.2",
3
+ "version": "0.3.0",
4
4
  "main": "index.js",
5
5
  "types": "index.d.ts",
6
6
  "sideEffects": [
@@ -3,7 +3,7 @@
3
3
  Object.defineProperty(exports, '__esModule', { value: true });
4
4
 
5
5
  var React = require('react');
6
- var useKeyPress = require('@prom-ui/hooks/useKeyPress');
6
+ var useKeyPress = require('@prom-ui/core/useKeyPress');
7
7
 
8
8
  function _interopNamespaceCompat(e) {
9
9
  if (e && typeof e === 'object' && 'default' in e) return e;
@@ -50,4 +50,8 @@ var KeyPress = function (_a) {
50
50
  return null;
51
51
  };
52
52
 
53
+ Object.defineProperty(exports, 'useKeyPress', {
54
+ enumerable: true,
55
+ get: function () { return useKeyPress.useKeyPress; }
56
+ });
53
57
  exports.KeyPress = KeyPress;
@@ -3,7 +3,7 @@
3
3
  Object.defineProperty(exports, '__esModule', { value: true });
4
4
 
5
5
  var React = require('react');
6
- var useKeyPress = require('@prom-ui/hooks/useKeyPress');
6
+ var useKeyPress = require('@prom-ui/core/useKeyPress');
7
7
 
8
8
  function _interopNamespaceCompat(e) {
9
9
  if (e && typeof e === 'object' && 'default' in e) return e;
@@ -50,4 +50,8 @@ var KeyPress = function (_a) {
50
50
  return null;
51
51
  };
52
52
 
53
+ Object.defineProperty(exports, 'useKeyPress', {
54
+ enumerable: true,
55
+ get: function () { return useKeyPress.useKeyPress; }
56
+ });
53
57
  exports.KeyPress = KeyPress;
@@ -1 +1 @@
1
- "use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react"),r=require("@prom-ui/hooks/useKeyPress");function t(e){if(e&&"object"==typeof e&&"default"in e)return e;var r=Object.create(null);return e&&Object.keys(e).forEach((function(t){if("default"!==t){var n=Object.getOwnPropertyDescriptor(e,t);Object.defineProperty(r,t,n.get?n:{enumerable:!0,get:function(){return e[t]}})}})),r.default=e,Object.freeze(r)}var n=t(e),o=function(e){var t=e.code,n=e.onKeyDown,o=e.onKeyUp;return r.useKeyPress(t,n,o),null};exports.KeyPress=function(e){var r=e.isActive,t=void 0===r||r,u=e.code,c=e.onKeyDown,i=void 0===c?function(){}:c,f=e.onKeyUp,s=void 0===f?function(){}:f;return t?n.createElement(o,{code:u,onKeyDown:i,onKeyUp:s}):null};
1
+ "use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react"),r=require("@prom-ui/core/useKeyPress");function t(e){if(e&&"object"==typeof e&&"default"in e)return e;var r=Object.create(null);return e&&Object.keys(e).forEach((function(t){if("default"!==t){var n=Object.getOwnPropertyDescriptor(e,t);Object.defineProperty(r,t,n.get?n:{enumerable:!0,get:function(){return e[t]}})}})),r.default=e,Object.freeze(r)}var n=t(e),o=function(e){var t=e.code,n=e.onKeyDown,o=e.onKeyUp;return r.useKeyPress(t,n,o),null};Object.defineProperty(exports,"useKeyPress",{enumerable:!0,get:function(){return r.useKeyPress}}),exports.KeyPress=function(e){var r=e.isActive,t=void 0===r||r,u=e.code,c=e.onKeyDown,i=void 0===c?function(){}:c,s=e.onKeyUp,f=void 0===s?function(){}:s;return t?n.createElement(o,{code:u,onKeyDown:i,onKeyUp:f}):null};
@@ -1 +1 @@
1
- "use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react"),r=require("@prom-ui/hooks/useKeyPress");function t(e){if(e&&"object"==typeof e&&"default"in e)return e;var r=Object.create(null);return e&&Object.keys(e).forEach((function(t){if("default"!==t){var n=Object.getOwnPropertyDescriptor(e,t);Object.defineProperty(r,t,n.get?n:{enumerable:!0,get:function(){return e[t]}})}})),r.default=e,Object.freeze(r)}var n=t(e),o=function(e){var t=e.code,n=e.onKeyDown,o=e.onKeyUp;return r.useKeyPress(t,n,o),null};exports.KeyPress=function(e){var r=e.isActive,t=void 0===r||r,u=e.code,c=e.onKeyDown,i=void 0===c?function(){}:c,f=e.onKeyUp,s=void 0===f?function(){}:f;return t?n.createElement(o,{code:u,onKeyDown:i,onKeyUp:s}):null};
1
+ "use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react"),r=require("@prom-ui/core/useKeyPress");function t(e){if(e&&"object"==typeof e&&"default"in e)return e;var r=Object.create(null);return e&&Object.keys(e).forEach((function(t){if("default"!==t){var n=Object.getOwnPropertyDescriptor(e,t);Object.defineProperty(r,t,n.get?n:{enumerable:!0,get:function(){return e[t]}})}})),r.default=e,Object.freeze(r)}var n=t(e),o=function(e){var t=e.code,n=e.onKeyDown,o=e.onKeyUp;return r.useKeyPress(t,n,o),null};Object.defineProperty(exports,"useKeyPress",{enumerable:!0,get:function(){return r.useKeyPress}}),exports.KeyPress=function(e){var r=e.isActive,t=void 0===r||r,u=e.code,c=e.onKeyDown,i=void 0===c?function(){}:c,s=e.onKeyUp,f=void 0===s?function(){}:s;return t?n.createElement(o,{code:u,onKeyDown:i,onKeyUp:f}):null};
@@ -1,4 +1,5 @@
1
1
  import * as React from 'react';
2
+ import { useKeyPress } from '@prom-ui/core/useKeyPress';
2
3
  export type KeyPressProps = {
3
4
  /** Если передать `false` компонент перестанет работать */
4
5
  isActive?: boolean;
@@ -10,3 +11,4 @@ export type KeyPressProps = {
10
11
  onKeyUp?: (e: KeyboardEvent) => void;
11
12
  };
12
13
  export declare const KeyPress: React.FC<KeyPressProps>;
14
+ export { useKeyPress };
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@prom-ui/core/KeyPress",
3
- "version": "0.1.2",
3
+ "version": "0.3.0",
4
4
  "main": "index.js",
5
5
  "types": "index.d.ts",
6
6
  "sideEffects": [
package/Line/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@prom-ui/core/Line",
3
- "version": "0.1.2",
3
+ "version": "0.3.0",
4
4
  "main": "index.js",
5
5
  "types": "index.d.ts",
6
6
  "sideEffects": [
package/Link/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@prom-ui/core/Link",
3
- "version": "0.1.2",
3
+ "version": "0.3.0",
4
4
  "main": "index.js",
5
5
  "types": "index.d.ts",
6
6
  "sideEffects": [
package/List/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@prom-ui/core/List",
3
- "version": "0.1.2",
3
+ "version": "0.3.0",
4
4
  "main": "index.js",
5
5
  "types": "index.d.ts",
6
6
  "sideEffects": [
@@ -1,8 +1,8 @@
1
1
  import React from 'react';
2
- import { tSCREEN_BREAKPOINTS } from './breakpoints';
2
+ import { SCREEN_BREAKPOINTS } from '@prom-ui/core/useMedia';
3
3
  export type MediaProviderProps = {
4
4
  children?: React.ReactNode;
5
5
  resetOnMount?: boolean;
6
- width?: tSCREEN_BREAKPOINTS;
6
+ width?: keyof typeof SCREEN_BREAKPOINTS;
7
7
  };
8
8
  export declare const MediaProvider: React.FC<MediaProviderProps>;
@@ -2,48 +2,13 @@
2
2
 
3
3
  Object.defineProperty(exports, '__esModule', { value: true });
4
4
 
5
- var reactResponsive = require('react-responsive');
5
+ var useMedia = require('@prom-ui/core/useMedia');
6
6
  var React = require('react');
7
- var PropTypes = require('prop-types');
7
+ var reactResponsive = require('react-responsive');
8
8
 
9
9
  function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
10
10
 
11
11
  var React__default = /*#__PURE__*/_interopDefaultCompat(React);
12
- var PropTypes__default = /*#__PURE__*/_interopDefaultCompat(PropTypes);
13
-
14
- var MIN_SCREEN_WIDTH = 1;
15
- var SCREEN_BREAKPOINTS = {
16
- small: 480,
17
- medium: 768,
18
- large: 960,
19
- wide: 1200,
20
- huge: 1400
21
- };
22
- var SCREEN_BREAKPOINTS_PROXY = new Proxy(SCREEN_BREAKPOINTS, {
23
- get: function (target, key) {
24
- if (!target.hasOwnProperty(key)) {
25
- var keyListStr = JSON.stringify(Object.keys(target));
26
- throw new Error("Media received unknown width \"".concat(key, "\". You should use one of ").concat(keyListStr));
27
- }
28
- return target[key];
29
- }
30
- });
31
- var getBreakPoint = function (key) {
32
- // Use proxy in debug mode, to ensure that we are reading only existing breakpoints
33
- if (process.env.NODE_ENV !== 'production') {
34
- return SCREEN_BREAKPOINTS_PROXY[key];
35
- }
36
- return SCREEN_BREAKPOINTS[key];
37
- };
38
-
39
- var useMedia = function (_a) {
40
- var minWidth = _a.minWidth,
41
- maxWidth = _a.maxWidth;
42
- return reactResponsive.useMediaQuery({
43
- minWidth: minWidth ? getBreakPoint(minWidth) : MIN_SCREEN_WIDTH,
44
- maxWidth: maxWidth ? getBreakPoint(maxWidth) - 1 : undefined
45
- });
46
- };
47
12
 
48
13
  var MediaProvider = function (_a) {
49
14
  var _b = _a.resetOnMount,
@@ -51,7 +16,7 @@ var MediaProvider = function (_a) {
51
16
  width = _a.width,
52
17
  children = _a.children;
53
18
  var _c = React.useState({
54
- width: width ? getBreakPoint(width) : MIN_SCREEN_WIDTH
19
+ width: width ? useMedia.SCREEN_BREAKPOINTS[width] : 1
55
20
  }),
56
21
  value = _c[0],
57
22
  setValue = _c[1];
@@ -64,20 +29,16 @@ var MediaProvider = function (_a) {
64
29
  value: value
65
30
  }, children);
66
31
  };
67
- // MediaProvider.defaultProps = {
68
- // resetOnMount: false,
69
- // };
70
- MediaProvider.propTypes = {
71
- resetOnMount: PropTypes__default.default.bool,
72
- // children: PropTypes.node.isRequired,
73
- width: PropTypes__default.default.oneOf(['small', 'medium', 'large', 'wide', 'huge'])
74
- };
75
32
 
33
+ // PDS core
34
+ /**
35
+ * Компонент отображает соответствующий контент от состояние медиа-запроса и обновляет его при изменении размера окна браузера.
36
+ */
76
37
  var Media = function (_a) {
77
38
  var minWidth = _a.minWidth,
78
39
  maxWidth = _a.maxWidth,
79
40
  children = _a.children;
80
- var matchMedia = useMedia({
41
+ var matchMedia = useMedia.useMedia({
81
42
  minWidth: minWidth,
82
43
  maxWidth: maxWidth
83
44
  });
@@ -87,6 +48,13 @@ var Media = function (_a) {
87
48
  return null;
88
49
  };
89
50
 
51
+ Object.defineProperty(exports, 'SCREEN_BREAKPOINTS', {
52
+ enumerable: true,
53
+ get: function () { return useMedia.SCREEN_BREAKPOINTS; }
54
+ });
55
+ Object.defineProperty(exports, 'useMedia', {
56
+ enumerable: true,
57
+ get: function () { return useMedia.useMedia; }
58
+ });
90
59
  exports.Media = Media;
91
60
  exports.MediaProvider = MediaProvider;
92
- exports.useMedia = useMedia;
@@ -2,48 +2,13 @@
2
2
 
3
3
  Object.defineProperty(exports, '__esModule', { value: true });
4
4
 
5
- var reactResponsive = require('react-responsive');
5
+ var useMedia = require('@prom-ui/core/useMedia');
6
6
  var React = require('react');
7
- var PropTypes = require('prop-types');
7
+ var reactResponsive = require('react-responsive');
8
8
 
9
9
  function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
10
10
 
11
11
  var React__default = /*#__PURE__*/_interopDefaultCompat(React);
12
- var PropTypes__default = /*#__PURE__*/_interopDefaultCompat(PropTypes);
13
-
14
- var MIN_SCREEN_WIDTH = 1;
15
- var SCREEN_BREAKPOINTS = {
16
- small: 480,
17
- medium: 768,
18
- large: 960,
19
- wide: 1200,
20
- huge: 1400
21
- };
22
- var SCREEN_BREAKPOINTS_PROXY = new Proxy(SCREEN_BREAKPOINTS, {
23
- get: function (target, key) {
24
- if (!target.hasOwnProperty(key)) {
25
- var keyListStr = JSON.stringify(Object.keys(target));
26
- throw new Error("Media received unknown width \"".concat(key, "\". You should use one of ").concat(keyListStr));
27
- }
28
- return target[key];
29
- }
30
- });
31
- var getBreakPoint = function (key) {
32
- // Use proxy in debug mode, to ensure that we are reading only existing breakpoints
33
- if (process.env.NODE_ENV !== 'production') {
34
- return SCREEN_BREAKPOINTS_PROXY[key];
35
- }
36
- return SCREEN_BREAKPOINTS[key];
37
- };
38
-
39
- var useMedia = function (_a) {
40
- var minWidth = _a.minWidth,
41
- maxWidth = _a.maxWidth;
42
- return reactResponsive.useMediaQuery({
43
- minWidth: minWidth ? getBreakPoint(minWidth) : MIN_SCREEN_WIDTH,
44
- maxWidth: maxWidth ? getBreakPoint(maxWidth) - 1 : undefined
45
- });
46
- };
47
12
 
48
13
  var MediaProvider = function (_a) {
49
14
  var _b = _a.resetOnMount,
@@ -51,7 +16,7 @@ var MediaProvider = function (_a) {
51
16
  width = _a.width,
52
17
  children = _a.children;
53
18
  var _c = React.useState({
54
- width: width ? getBreakPoint(width) : MIN_SCREEN_WIDTH
19
+ width: width ? useMedia.SCREEN_BREAKPOINTS[width] : 1
55
20
  }),
56
21
  value = _c[0],
57
22
  setValue = _c[1];
@@ -64,20 +29,16 @@ var MediaProvider = function (_a) {
64
29
  value: value
65
30
  }, children);
66
31
  };
67
- // MediaProvider.defaultProps = {
68
- // resetOnMount: false,
69
- // };
70
- MediaProvider.propTypes = {
71
- resetOnMount: PropTypes__default.default.bool,
72
- // children: PropTypes.node.isRequired,
73
- width: PropTypes__default.default.oneOf(['small', 'medium', 'large', 'wide', 'huge'])
74
- };
75
32
 
33
+ // PDS core
34
+ /**
35
+ * Компонент отображает соответствующий контент от состояние медиа-запроса и обновляет его при изменении размера окна браузера.
36
+ */
76
37
  var Media = function (_a) {
77
38
  var minWidth = _a.minWidth,
78
39
  maxWidth = _a.maxWidth,
79
40
  children = _a.children;
80
- var matchMedia = useMedia({
41
+ var matchMedia = useMedia.useMedia({
81
42
  minWidth: minWidth,
82
43
  maxWidth: maxWidth
83
44
  });
@@ -87,6 +48,13 @@ var Media = function (_a) {
87
48
  return null;
88
49
  };
89
50
 
51
+ Object.defineProperty(exports, 'SCREEN_BREAKPOINTS', {
52
+ enumerable: true,
53
+ get: function () { return useMedia.SCREEN_BREAKPOINTS; }
54
+ });
55
+ Object.defineProperty(exports, 'useMedia', {
56
+ enumerable: true,
57
+ get: function () { return useMedia.useMedia; }
58
+ });
90
59
  exports.Media = Media;
91
60
  exports.MediaProvider = MediaProvider;
92
- exports.useMedia = useMedia;
@@ -1 +1 @@
1
- "use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react-responsive"),t=require("react"),r=require("prop-types");function i(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var n=i(t),o=i(r),u={small:480,medium:768,large:960,wide:1200,huge:1400},d=new Proxy(u,{get:function(e,t){if(!e.hasOwnProperty(t)){var r=JSON.stringify(Object.keys(e));throw new Error('Media received unknown width "'.concat(t,'". You should use one of ').concat(r))}return e[t]}}),a=function(e){return"production"!==process.env.NODE_ENV?d[e]:u[e]},s=function(t){var r=t.minWidth,i=t.maxWidth;return e.useMediaQuery({minWidth:r?a(r):1,maxWidth:i?a(i)-1:void 0})},c=function(r){var i=r.resetOnMount,o=void 0!==i&&i,u=r.width,d=r.children,s=t.useState({width:u?a(u):1}),c=s[0],l=s[1];return t.useEffect((function(){o&&l(void 0)}),[]),n.default.createElement(e.Context.Provider,{value:c},d)};c.propTypes={resetOnMount:o.default.bool,width:o.default.oneOf(["small","medium","large","wide","huge"])};exports.Media=function(e){var t=e.minWidth,r=e.maxWidth,i=e.children;return s({minWidth:t,maxWidth:r})?i:null},exports.MediaProvider=c,exports.useMedia=s;
1
+ "use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("@prom-ui/core/useMedia"),t=require("react"),r=require("react-responsive");function i(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var n=i(t);Object.defineProperty(exports,"SCREEN_BREAKPOINTS",{enumerable:!0,get:function(){return e.SCREEN_BREAKPOINTS}}),Object.defineProperty(exports,"useMedia",{enumerable:!0,get:function(){return e.useMedia}}),exports.Media=function(t){var r=t.minWidth,i=t.maxWidth,n=t.children;return e.useMedia({minWidth:r,maxWidth:i})?n:null},exports.MediaProvider=function(i){var u=i.resetOnMount,o=void 0!==u&&u,d=i.width,a=i.children,c=t.useState({width:d?e.SCREEN_BREAKPOINTS[d]:1}),s=c[0],f=c[1];return t.useEffect((function(){o&&f(void 0)}),[]),n.default.createElement(r.Context.Provider,{value:s},a)};
@@ -1 +1 @@
1
- "use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react-responsive"),t=require("react"),r=require("prop-types");function i(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var n=i(t),o=i(r),u={small:480,medium:768,large:960,wide:1200,huge:1400},d=new Proxy(u,{get:function(e,t){if(!e.hasOwnProperty(t)){var r=JSON.stringify(Object.keys(e));throw new Error('Media received unknown width "'.concat(t,'". You should use one of ').concat(r))}return e[t]}}),a=function(e){return"production"!==process.env.NODE_ENV?d[e]:u[e]},s=function(t){var r=t.minWidth,i=t.maxWidth;return e.useMediaQuery({minWidth:r?a(r):1,maxWidth:i?a(i)-1:void 0})},c=function(r){var i=r.resetOnMount,o=void 0!==i&&i,u=r.width,d=r.children,s=t.useState({width:u?a(u):1}),c=s[0],l=s[1];return t.useEffect((function(){o&&l(void 0)}),[]),n.default.createElement(e.Context.Provider,{value:c},d)};c.propTypes={resetOnMount:o.default.bool,width:o.default.oneOf(["small","medium","large","wide","huge"])};exports.Media=function(e){var t=e.minWidth,r=e.maxWidth,i=e.children;return s({minWidth:t,maxWidth:r})?i:null},exports.MediaProvider=c,exports.useMedia=s;
1
+ "use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("@prom-ui/core/useMedia"),t=require("react"),r=require("react-responsive");function i(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var n=i(t);Object.defineProperty(exports,"SCREEN_BREAKPOINTS",{enumerable:!0,get:function(){return e.SCREEN_BREAKPOINTS}}),Object.defineProperty(exports,"useMedia",{enumerable:!0,get:function(){return e.useMedia}}),exports.Media=function(t){var r=t.minWidth,i=t.maxWidth,n=t.children;return e.useMedia({minWidth:r,maxWidth:i})?n:null},exports.MediaProvider=function(i){var u=i.resetOnMount,o=void 0!==u&&u,d=i.width,a=i.children,c=t.useState({width:d?e.SCREEN_BREAKPOINTS[d]:1}),s=c[0],f=c[1];return t.useEffect((function(){o&&f(void 0)}),[]),n.default.createElement(r.Context.Provider,{value:s},a)};
package/Media/index.d.ts CHANGED
@@ -1,12 +1,20 @@
1
1
  import * as React from 'react';
2
- import { tSCREEN_BREAKPOINTS } from './breakpoints';
3
- import { useMedia } from './useMedia';
4
- import { MediaProvider } from './context';
2
+ import { useMedia, SCREEN_BREAKPOINTS } from '@prom-ui/core/useMedia';
3
+ export { MediaProvider } from './MediaProvider';
5
4
  export type MediaProps = {
6
- minWidth?: tSCREEN_BREAKPOINTS;
7
- maxWidth?: tSCREEN_BREAKPOINTS;
8
- /** React children */
5
+ /**
6
+ * Аналог CSS медиа правила `@media (min-width: ...)`
7
+ */
8
+ minWidth?: keyof typeof SCREEN_BREAKPOINTS;
9
+ /**
10
+ * Аналог CSS медиа правила `@media (max-width: ...)`
11
+ */
12
+ maxWidth?: keyof typeof SCREEN_BREAKPOINTS;
13
+ /** @ignore */
9
14
  children?: any;
10
15
  };
11
- export { useMedia, MediaProvider };
16
+ /**
17
+ * Компонент отображает соответствующий контент от состояние медиа-запроса и обновляет его при изменении размера окна браузера.
18
+ */
12
19
  export declare const Media: React.FC<MediaProps>;
20
+ export { useMedia, SCREEN_BREAKPOINTS };
@@ -1,12 +1,12 @@
1
1
  {
2
2
  "name": "@prom-ui/core/Media",
3
- "version": "0.1.2",
3
+ "version": "0.3.0",
4
4
  "main": "index.js",
5
5
  "types": "index.d.ts",
6
6
  "sideEffects": [
7
7
  "*.css"
8
8
  ],
9
9
  "dependencies": {
10
- "react-responsive": "^8.1.0"
10
+ "react-responsive": "^9.0.2"
11
11
  }
12
12
  }
@@ -3,7 +3,7 @@
3
3
  Object.defineProperty(exports, '__esModule', { value: true });
4
4
 
5
5
  var React = require('react');
6
- var useOutsideClick = require('@prom-ui/hooks/useOutsideClick');
6
+ var useOutsideClick = require('@prom-ui/core/useOutsideClick');
7
7
 
8
8
  function _interopNamespaceCompat(e) {
9
9
  if (e && typeof e === 'object' && 'default' in e) return e;
@@ -78,4 +78,8 @@ var OutsideClick = function (_a) {
78
78
  }), children);
79
79
  };
80
80
 
81
+ Object.defineProperty(exports, 'useOutsideClick', {
82
+ enumerable: true,
83
+ get: function () { return useOutsideClick.useOutsideClick; }
84
+ });
81
85
  exports.OutsideClick = OutsideClick;
@@ -3,7 +3,7 @@
3
3
  Object.defineProperty(exports, '__esModule', { value: true });
4
4
 
5
5
  var React = require('react');
6
- var useOutsideClick = require('@prom-ui/hooks/useOutsideClick');
6
+ var useOutsideClick = require('@prom-ui/core/useOutsideClick');
7
7
 
8
8
  function _interopNamespaceCompat(e) {
9
9
  if (e && typeof e === 'object' && 'default' in e) return e;
@@ -78,4 +78,8 @@ var OutsideClick = function (_a) {
78
78
  }), children);
79
79
  };
80
80
 
81
+ Object.defineProperty(exports, 'useOutsideClick', {
82
+ enumerable: true,
83
+ get: function () { return useOutsideClick.useOutsideClick; }
84
+ });
81
85
  exports.OutsideClick = OutsideClick;
@@ -1 +1 @@
1
- "use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react"),t=require("@prom-ui/hooks/useOutsideClick");function r(e){if(e&&"object"==typeof e&&"default"in e)return e;var t=Object.create(null);return e&&Object.keys(e).forEach((function(r){if("default"!==r){var n=Object.getOwnPropertyDescriptor(e,r);Object.defineProperty(t,r,n.get?n:{enumerable:!0,get:function(){return e[r]}})}})),t.default=e,Object.freeze(t)}var n=r(e),i=function(){return i=Object.assign||function(e){for(var t,r=1,n=arguments.length;r<n;r++)for(var i in t=arguments[r])Object.prototype.hasOwnProperty.call(t,i)&&(e[i]=t[i]);return e},i.apply(this,arguments)};exports.OutsideClick=function(e){var r=e.children,o=e.isActive,c=void 0===o||o,u=e.onClick,l=function(e,t){var r={};for(var n in e)Object.prototype.hasOwnProperty.call(e,n)&&t.indexOf(n)<0&&(r[n]=e[n]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var i=0;for(n=Object.getOwnPropertySymbols(e);i<n.length;i++)t.indexOf(n[i])<0&&Object.prototype.propertyIsEnumerable.call(e,n[i])&&(r[n[i]]=e[n[i]])}return r}(e,["children","isActive","onClick"]),a=t.useOutsideClick(u)[0];return c?n.createElement("div",i({},l,{ref:a}),r):n.createElement("div",null,r)};
1
+ "use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react"),t=require("@prom-ui/core/useOutsideClick");function r(e){if(e&&"object"==typeof e&&"default"in e)return e;var t=Object.create(null);return e&&Object.keys(e).forEach((function(r){if("default"!==r){var n=Object.getOwnPropertyDescriptor(e,r);Object.defineProperty(t,r,n.get?n:{enumerable:!0,get:function(){return e[r]}})}})),t.default=e,Object.freeze(t)}var n=r(e),i=function(){return i=Object.assign||function(e){for(var t,r=1,n=arguments.length;r<n;r++)for(var i in t=arguments[r])Object.prototype.hasOwnProperty.call(t,i)&&(e[i]=t[i]);return e},i.apply(this,arguments)};Object.defineProperty(exports,"useOutsideClick",{enumerable:!0,get:function(){return t.useOutsideClick}}),exports.OutsideClick=function(e){var r=e.children,c=e.isActive,o=void 0===c||c,u=e.onClick,l=function(e,t){var r={};for(var n in e)Object.prototype.hasOwnProperty.call(e,n)&&t.indexOf(n)<0&&(r[n]=e[n]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var i=0;for(n=Object.getOwnPropertySymbols(e);i<n.length;i++)t.indexOf(n[i])<0&&Object.prototype.propertyIsEnumerable.call(e,n[i])&&(r[n[i]]=e[n[i]])}return r}(e,["children","isActive","onClick"]),a=t.useOutsideClick(u)[0];return o?n.createElement("div",i({},l,{ref:a}),r):n.createElement("div",null,r)};
@@ -1 +1 @@
1
- "use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react"),t=require("@prom-ui/hooks/useOutsideClick");function r(e){if(e&&"object"==typeof e&&"default"in e)return e;var t=Object.create(null);return e&&Object.keys(e).forEach((function(r){if("default"!==r){var n=Object.getOwnPropertyDescriptor(e,r);Object.defineProperty(t,r,n.get?n:{enumerable:!0,get:function(){return e[r]}})}})),t.default=e,Object.freeze(t)}var n=r(e),i=function(){return i=Object.assign||function(e){for(var t,r=1,n=arguments.length;r<n;r++)for(var i in t=arguments[r])Object.prototype.hasOwnProperty.call(t,i)&&(e[i]=t[i]);return e},i.apply(this,arguments)};exports.OutsideClick=function(e){var r=e.children,o=e.isActive,c=void 0===o||o,u=e.onClick,l=function(e,t){var r={};for(var n in e)Object.prototype.hasOwnProperty.call(e,n)&&t.indexOf(n)<0&&(r[n]=e[n]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var i=0;for(n=Object.getOwnPropertySymbols(e);i<n.length;i++)t.indexOf(n[i])<0&&Object.prototype.propertyIsEnumerable.call(e,n[i])&&(r[n[i]]=e[n[i]])}return r}(e,["children","isActive","onClick"]),a=t.useOutsideClick(u)[0];return c?n.createElement("div",i({},l,{ref:a}),r):n.createElement("div",null,r)};
1
+ "use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react"),t=require("@prom-ui/core/useOutsideClick");function r(e){if(e&&"object"==typeof e&&"default"in e)return e;var t=Object.create(null);return e&&Object.keys(e).forEach((function(r){if("default"!==r){var n=Object.getOwnPropertyDescriptor(e,r);Object.defineProperty(t,r,n.get?n:{enumerable:!0,get:function(){return e[r]}})}})),t.default=e,Object.freeze(t)}var n=r(e),i=function(){return i=Object.assign||function(e){for(var t,r=1,n=arguments.length;r<n;r++)for(var i in t=arguments[r])Object.prototype.hasOwnProperty.call(t,i)&&(e[i]=t[i]);return e},i.apply(this,arguments)};Object.defineProperty(exports,"useOutsideClick",{enumerable:!0,get:function(){return t.useOutsideClick}}),exports.OutsideClick=function(e){var r=e.children,c=e.isActive,o=void 0===c||c,u=e.onClick,l=function(e,t){var r={};for(var n in e)Object.prototype.hasOwnProperty.call(e,n)&&t.indexOf(n)<0&&(r[n]=e[n]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var i=0;for(n=Object.getOwnPropertySymbols(e);i<n.length;i++)t.indexOf(n[i])<0&&Object.prototype.propertyIsEnumerable.call(e,n[i])&&(r[n[i]]=e[n[i]])}return r}(e,["children","isActive","onClick"]),a=t.useOutsideClick(u)[0];return o?n.createElement("div",i({},l,{ref:a}),r):n.createElement("div",null,r)};
@@ -1,4 +1,5 @@
1
1
  import * as React from 'react';
2
+ import { useOutsideClick } from '@prom-ui/core/useOutsideClick';
2
3
  type OutsideClickProps = {
3
4
  /** React children */
4
5
  children?: React.ReactNode;
@@ -8,4 +9,4 @@ type OutsideClickProps = {
8
9
  onClick: () => void;
9
10
  };
10
11
  export declare const OutsideClick: React.FC<OutsideClickProps>;
11
- export {};
12
+ export { useOutsideClick };
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@prom-ui/core/OutsideClick",
3
- "version": "0.1.2",
3
+ "version": "0.3.0",
4
4
  "main": "index.js",
5
5
  "types": "index.d.ts",
6
6
  "sideEffects": [
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@prom-ui/core/Overlay",
3
- "version": "0.1.2",
3
+ "version": "0.3.0",
4
4
  "main": "index.js",
5
5
  "types": "index.d.ts",
6
6
  "sideEffects": [
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@prom-ui/core/Picture",
3
- "version": "0.1.2",
3
+ "version": "0.3.0",
4
4
  "main": "index.js",
5
5
  "types": "index.d.ts",
6
6
  "sideEffects": [
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@prom-ui/core/PortableOverlay",
3
- "version": "0.1.2",
3
+ "version": "0.3.0",
4
4
  "main": "index.js",
5
5
  "types": "index.d.ts",
6
6
  "sideEffects": [
@@ -4,7 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
4
4
 
5
5
  var React = require('react');
6
6
  var reactDom = require('react-dom');
7
- var usePortal = require('@prom-ui/hooks/usePortal');
7
+ var usePortal = require('@prom-ui/core/usePortal');
8
8
 
9
9
  function _interopNamespaceCompat(e) {
10
10
  if (e && typeof e === 'object' && 'default' in e) return e;
@@ -4,7 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
4
4
 
5
5
  var React = require('react');
6
6
  var reactDom = require('react-dom');
7
- var usePortal = require('@prom-ui/hooks/usePortal');
7
+ var usePortal = require('@prom-ui/core/usePortal');
8
8
 
9
9
  function _interopNamespaceCompat(e) {
10
10
  if (e && typeof e === 'object' && 'default' in e) return e;