@skbkontur/react-ui 4.4.0 → 4.5.2

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 (101) hide show
  1. package/CHANGELOG.md +43 -1
  2. package/README.md +27 -4
  3. package/cjs/components/Autocomplete/Autocomplete.md +15 -1
  4. package/cjs/components/ComboBox/ComboBox.md +32 -0
  5. package/cjs/components/DatePicker/DatePicker.md +18 -0
  6. package/cjs/components/FileUploader/FileUploader.d.ts +2 -1
  7. package/cjs/components/FileUploader/FileUploader.js +15 -2
  8. package/cjs/components/FileUploader/FileUploader.js.map +1 -1
  9. package/cjs/components/FxInput/FxInput.md +13 -0
  10. package/cjs/components/Input/Input.js +2 -1
  11. package/cjs/components/Input/Input.js.map +1 -1
  12. package/cjs/components/Input/Input.md +12 -0
  13. package/cjs/components/Input/Input.styles.d.ts +1 -0
  14. package/cjs/components/Input/Input.styles.js +17 -10
  15. package/cjs/components/Input/Input.styles.js.map +1 -1
  16. package/cjs/components/Loader/Loader.d.ts +11 -2
  17. package/cjs/components/Loader/Loader.js +10 -1
  18. package/cjs/components/Loader/Loader.js.map +1 -1
  19. package/cjs/components/Loader/Loader.md +30 -23
  20. package/cjs/components/ResponsiveLayout/ResponsiveLayout.d.ts +6 -5
  21. package/cjs/components/ResponsiveLayout/ResponsiveLayout.js +5 -9
  22. package/cjs/components/ResponsiveLayout/ResponsiveLayout.js.map +1 -1
  23. package/cjs/components/ResponsiveLayout/ResponsiveLayout.md +31 -0
  24. package/cjs/components/ResponsiveLayout/decorator.d.ts +1 -1
  25. package/cjs/components/ResponsiveLayout/types.d.ts +9 -1
  26. package/cjs/components/ResponsiveLayout/useResponsiveLayout.d.ts +2 -2
  27. package/cjs/components/ResponsiveLayout/useResponsiveLayout.js +31 -15
  28. package/cjs/components/ResponsiveLayout/useResponsiveLayout.js.map +1 -1
  29. package/cjs/components/Select/Select.md +14 -0
  30. package/cjs/components/Spinner/Spinner.d.ts +11 -2
  31. package/cjs/components/Spinner/Spinner.js +10 -1
  32. package/cjs/components/Spinner/Spinner.js.map +1 -1
  33. package/cjs/components/Textarea/Textarea.md +19 -0
  34. package/cjs/components/Token/Token.styles.js +2 -1
  35. package/cjs/components/Token/Token.styles.js.map +1 -1
  36. package/cjs/components/TokenInput/TokenInput.d.ts +3 -0
  37. package/cjs/components/TokenInput/TokenInput.js +56 -13
  38. package/cjs/components/TokenInput/TokenInput.js.map +1 -1
  39. package/cjs/components/TokenInput/TokenInput.md +26 -0
  40. package/cjs/components/TokenInput/TokenInput.styles.js +2 -1
  41. package/cjs/components/TokenInput/TokenInput.styles.js.map +1 -1
  42. package/cjs/internal/ThemeShowcase/VariablesCollector.d.ts +1 -1
  43. package/cjs/internal/ZIndex/ZIndex.d.ts +17 -3
  44. package/cjs/internal/ZIndex/ZIndex.js +55 -14
  45. package/cjs/internal/ZIndex/ZIndex.js.map +1 -1
  46. package/cjs/internal/themes/DefaultTheme.d.ts +2 -0
  47. package/cjs/internal/themes/DefaultTheme.js +8 -2
  48. package/cjs/internal/themes/DefaultTheme.js.map +1 -1
  49. package/cjs/lib/rootNode/getRootNode.d.ts +1 -1
  50. package/cjs/lib/rootNode/getRootNode.js +37 -12
  51. package/cjs/lib/rootNode/getRootNode.js.map +1 -1
  52. package/components/Autocomplete/Autocomplete.md +15 -1
  53. package/components/ComboBox/ComboBox.md +32 -0
  54. package/components/DatePicker/DatePicker.md +18 -0
  55. package/components/FileUploader/FileUploader/FileUploader.js +8 -3
  56. package/components/FileUploader/FileUploader/FileUploader.js.map +1 -1
  57. package/components/FileUploader/FileUploader.d.ts +2 -1
  58. package/components/FxInput/FxInput.md +13 -0
  59. package/components/Input/Input/Input.js +1 -1
  60. package/components/Input/Input/Input.js.map +1 -1
  61. package/components/Input/Input.md +12 -0
  62. package/components/Input/Input.styles/Input.styles.js +13 -10
  63. package/components/Input/Input.styles/Input.styles.js.map +1 -1
  64. package/components/Input/Input.styles.d.ts +1 -0
  65. package/components/Loader/Loader/Loader.js +3 -1
  66. package/components/Loader/Loader/Loader.js.map +1 -1
  67. package/components/Loader/Loader.d.ts +11 -2
  68. package/components/Loader/Loader.md +30 -23
  69. package/components/ResponsiveLayout/ResponsiveLayout/ResponsiveLayout.js +5 -8
  70. package/components/ResponsiveLayout/ResponsiveLayout/ResponsiveLayout.js.map +1 -1
  71. package/components/ResponsiveLayout/ResponsiveLayout.d.ts +6 -5
  72. package/components/ResponsiveLayout/ResponsiveLayout.md +31 -0
  73. package/components/ResponsiveLayout/decorator.d.ts +1 -1
  74. package/components/ResponsiveLayout/types.d.ts +9 -1
  75. package/components/ResponsiveLayout/useResponsiveLayout/useResponsiveLayout.js +42 -17
  76. package/components/ResponsiveLayout/useResponsiveLayout/useResponsiveLayout.js.map +1 -1
  77. package/components/ResponsiveLayout/useResponsiveLayout.d.ts +2 -2
  78. package/components/Select/Select.md +14 -0
  79. package/components/Spinner/Spinner/Spinner.js +1 -1
  80. package/components/Spinner/Spinner/Spinner.js.map +1 -1
  81. package/components/Spinner/Spinner.d.ts +11 -2
  82. package/components/Textarea/Textarea.md +19 -0
  83. package/components/Token/Token.styles/Token.styles.js +1 -1
  84. package/components/Token/Token.styles/Token.styles.js.map +1 -1
  85. package/components/TokenInput/TokenInput/TokenInput.js +82 -19
  86. package/components/TokenInput/TokenInput/TokenInput.js.map +1 -1
  87. package/components/TokenInput/TokenInput.d.ts +3 -0
  88. package/components/TokenInput/TokenInput.md +26 -0
  89. package/components/TokenInput/TokenInput.styles/TokenInput.styles.js +1 -1
  90. package/components/TokenInput/TokenInput.styles/TokenInput.styles.js.map +1 -1
  91. package/internal/ThemeShowcase/VariablesCollector.d.ts +1 -1
  92. package/internal/ZIndex/ZIndex/ZIndex.js +46 -27
  93. package/internal/ZIndex/ZIndex/ZIndex.js.map +1 -1
  94. package/internal/ZIndex/ZIndex.d.ts +17 -3
  95. package/internal/themes/DefaultTheme/DefaultTheme.js +11 -1
  96. package/internal/themes/DefaultTheme/DefaultTheme.js.map +1 -1
  97. package/internal/themes/DefaultTheme.d.ts +2 -0
  98. package/lib/rootNode/getRootNode/getRootNode.js +28 -10
  99. package/lib/rootNode/getRootNode/getRootNode.js.map +1 -1
  100. package/lib/rootNode/getRootNode.d.ts +1 -1
  101. package/package.json +3 -20
@@ -1,10 +1,11 @@
1
1
  /* eslint-disable react/no-find-dom-node */
2
2
  import { findDOMNode } from 'react-dom';
3
+ import warning from 'warning';
3
4
  import { isElement, isNode } from "../../SSRSafe";
4
5
  import { canUseDOM } from "../../client";
5
6
  import { isInstanceWithRootNode } from "../rootNodeDecorator";
6
7
  /**
7
- * Extracts component's root `Element` out of it's instance
8
+ * Extracts component's root Element (HTMLElement/SVGElement) out of it's instance
8
9
  * following the "StrictMode support convention" (@see README.md#strictmode, #2518).
9
10
  *
10
11
  * Replaces findDOMNode but falls back to it if "convention" is not respected.
@@ -14,14 +15,21 @@ import { isInstanceWithRootNode } from "../rootNodeDecorator";
14
15
  */
15
16
 
16
17
  export var getRootNode = function getRootNode(instance) {
18
+ /**
19
+ * Options of what instance can be:
20
+ * 1. null or undefined
21
+ * 2. DOM Element
22
+ * 3. class Component instance (object)
23
+ * 4. literally anything, returned from useImperativeHandle
24
+ */
17
25
  if (!canUseDOM || !instance) {
18
26
  // instance can be `null` if component was unmounted
19
- // also checking undefined for convinient usage
27
+ // also checking undefined for convenient usage
20
28
  return null;
21
29
  }
22
30
 
23
31
  if (isElement(instance)) {
24
- // instance can be a `Element` already if comming
32
+ // instance can be an Element already if its coming
25
33
  // from Refs of intrinsic elements (<div />, <button />, etc.)
26
34
  return instance;
27
35
  }
@@ -31,7 +39,7 @@ export var getRootNode = function getRootNode(instance) {
31
39
  if (isInstanceWithRootNode(instance)) {
32
40
  // it happened to be that native Node interface also has
33
41
  // the "getRootNode" method, but we can ignore it here
34
- // because we'd already checked the instance on being an `Element`
42
+ // because we'd already checked the instance on being an Element
35
43
  // which is a subclass of Node, so, just fixing types here
36
44
  if (!isNode(instance)) {
37
45
  rootNode = instance.getRootNode();
@@ -39,15 +47,25 @@ export var getRootNode = function getRootNode(instance) {
39
47
  }
40
48
 
41
49
  if (rootNode !== undefined) {
42
- // at this point, it is rather `Element` (what we are looking for)
43
- // or null (which is also OK, e.g. Popup/Tooltip/Hint before opening), so, just return it
50
+ // the getter exists and has returned something, it should be what we are looking for
51
+ // probably its an Element or null (which is also OK, e.g. Popup/Tooltip/Hint before opening)
44
52
  return rootNode;
45
- } // node is undefined, which means that the instance's root node getter doesn't exists or returns the undefined
46
- // anyway, it tell us that the convention is not respected (by the component itself or its children),
47
- // so, we have to fall back to the deprecated findDOMNode, which always works but breaks StrictMode
53
+ }
48
54
 
55
+ try {
56
+ // rootNode is undefined, which means that the getter doesn't exists or returns the undefined
57
+ // anyway, it tell us that the convention is not respected,
58
+ // so, we have to fall back to the deprecated findDOMNode, which breaks StrictMode
59
+ // instance can still be a class component or an imperative handle (i.e., anything, except null/undefined/Element)
60
+ rootNode = findDOMNode(instance);
61
+ } catch (e) {
62
+ // but findDOMNode doesn`t accept everything that instance can be at this point,
63
+ // so we have to handle exceptions
64
+ // see https://github.com/facebook/react/blob/cae63505/packages/react-dom/src/__tests__/findDOMNode-test.js#L66-L86
65
+ warning(false, '[getRootNode]: can`t fallback to findDOMNode.' + '\n' + 'See https://github.com/skbkontur/retail-ui/blob/master/packages/react-ui/README.md#strictmode' + '\n\n' + e.message);
66
+ return null;
67
+ } // the findDOMNode can also return Text, but we are only interested in Elements, so just filter it
49
68
 
50
- rootNode = findDOMNode(instance); // the findDOMNode can also return Text, but we are only intrested in HTMLElements, so just filter it
51
69
 
52
70
  return isElement(rootNode) ? rootNode : null;
53
71
  };
@@ -1 +1 @@
1
- {"version":3,"sources":["getRootNode.ts"],"names":["findDOMNode","isElement","isNode","canUseDOM","isInstanceWithRootNode","getRootNode","instance","rootNode","undefined"],"mappings":"AAAA;AACA,SAASA,WAAT,QAA4B,WAA5B;;;;AAIA,SAASC,SAAT,EAAoBC,MAApB,QAAkC,YAAlC;AACA,SAASC,SAAT,QAA0B,WAA1B;;AAEA,SAASC,sBAAT,QAAuC,qBAAvC;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA,OAAO,IAAMC,WAAW,GAAG,SAAdA,WAAc,CAACC,QAAD,EAAgE;AACzF,MAAI,CAACH,SAAD,IAAc,CAACG,QAAnB,EAA6B;AAC3B;AACA;AACA,WAAO,IAAP;AACD;;AAED,MAAIL,SAAS,CAACK,QAAD,CAAb,EAAyB;AACvB;AACA;AACA,WAAOA,QAAP;AACD;;AAED,MAAIC,QAAJ;;AAEA,MAAIH,sBAAsB,CAACE,QAAD,CAA1B,EAAsC;AACpC;AACA;AACA;AACA;AACA,QAAI,CAACJ,MAAM,CAACI,QAAD,CAAX,EAAuB;AACrBC,MAAAA,QAAQ,GAAGD,QAAQ,CAACD,WAAT,EAAX;AACD;AACF;;AAED,MAAIE,QAAQ,KAAKC,SAAjB,EAA4B;AAC1B;AACA;AACA,WAAOD,QAAP;AACD;;AAED;AACA;AACA;AACAA,EAAAA,QAAQ,GAAGP,WAAW,CAACM,QAAD,CAAtB;;AAEA;AACA,SAAOL,SAAS,CAACM,QAAD,CAAT,GAAsBA,QAAtB,GAAiC,IAAxC;AACD,CAtCM","sourcesContent":["/* eslint-disable react/no-find-dom-node */\nimport { findDOMNode } from 'react-dom';\nimport React from 'react';\n\nimport { Nullable } from '../../typings/utility-types';\nimport { isElement, isNode } from '../SSRSafe';\nimport { canUseDOM } from '../client';\n\nimport { isInstanceWithRootNode } from './rootNodeDecorator';\n\n/**\n * Extracts component's root `Element` out of it's instance\n * following the \"StrictMode support convention\" (@see README.md#strictmode, #2518).\n *\n * Replaces findDOMNode but falls back to it if \"convention\" is not respected.\n *\n * @param instance Component's instance provided by React.Ref or `this` inside class-components.\n * @returns Component's root `Element` or null\n */\n\nexport const getRootNode = (instance: Nullable<React.ReactInstance>): Nullable<Element> => {\n if (!canUseDOM || !instance) {\n // instance can be `null` if component was unmounted\n // also checking undefined for convinient usage\n return null;\n }\n\n if (isElement(instance)) {\n // instance can be a `Element` already if comming\n // from Refs of intrinsic elements (<div />, <button />, etc.)\n return instance;\n }\n\n let rootNode;\n\n if (isInstanceWithRootNode(instance)) {\n // it happened to be that native Node interface also has\n // the \"getRootNode\" method, but we can ignore it here\n // because we'd already checked the instance on being an `Element`\n // which is a subclass of Node, so, just fixing types here\n if (!isNode(instance)) {\n rootNode = instance.getRootNode();\n }\n }\n\n if (rootNode !== undefined) {\n // at this point, it is rather `Element` (what we are looking for)\n // or null (which is also OK, e.g. Popup/Tooltip/Hint before opening), so, just return it\n return rootNode;\n }\n\n // node is undefined, which means that the instance's root node getter doesn't exists or returns the undefined\n // anyway, it tell us that the convention is not respected (by the component itself or its children),\n // so, we have to fall back to the deprecated findDOMNode, which always works but breaks StrictMode\n rootNode = findDOMNode(instance);\n\n // the findDOMNode can also return Text, but we are only intrested in HTMLElements, so just filter it\n return isElement(rootNode) ? rootNode : null;\n};\n"]}
1
+ {"version":3,"sources":["getRootNode.ts"],"names":["findDOMNode","warning","isElement","isNode","canUseDOM","isInstanceWithRootNode","getRootNode","instance","rootNode","undefined","e","message"],"mappings":"AAAA;AACA,SAASA,WAAT,QAA4B,WAA5B;;AAEA,OAAOC,OAAP,MAAoB,SAApB;;;AAGA,SAASC,SAAT,EAAoBC,MAApB,QAAkC,YAAlC;AACA,SAASC,SAAT,QAA0B,WAA1B;;AAEA,SAASC,sBAAT,QAAuC,qBAAvC;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA,OAAO,IAAMC,WAAW,GAAG,SAAdA,WAAc,CAACC,QAAD,EAAgE;AACzF;AACF;AACA;AACA;AACA;AACA;AACA;;AAEE,MAAI,CAACH,SAAD,IAAc,CAACG,QAAnB,EAA6B;AAC3B;AACA;AACA,WAAO,IAAP;AACD;;AAED,MAAIL,SAAS,CAACK,QAAD,CAAb,EAAyB;AACvB;AACA;AACA,WAAOA,QAAP;AACD;;AAED,MAAIC,QAAJ;;AAEA,MAAIH,sBAAsB,CAACE,QAAD,CAA1B,EAAsC;AACpC;AACA;AACA;AACA;AACA,QAAI,CAACJ,MAAM,CAACI,QAAD,CAAX,EAAuB;AACrBC,MAAAA,QAAQ,GAAGD,QAAQ,CAACD,WAAT,EAAX;AACD;AACF;;AAED,MAAIE,QAAQ,KAAKC,SAAjB,EAA4B;AAC1B;AACA;AACA,WAAOD,QAAP;AACD;;AAED,MAAI;AACF;AACA;AACA;AACA;AACAA,IAAAA,QAAQ,GAAGR,WAAW,CAACO,QAAD,CAAtB;AACD,GAND,CAME,OAAOG,CAAP,EAAU;AACV;AACA;AACA;AACAT,IAAAA,OAAO;AACL,SADK;AAEL;AACE,QADF;AAEE,mGAFF;AAGE,UAHF;AAIES,IAAAA,CAAC,CAACC,OANC,CAAP;;AAQA,WAAO,IAAP;AACD;;AAED;AACA,SAAOT,SAAS,CAACM,QAAD,CAAT,GAAsBA,QAAtB,GAAiC,IAAxC;AACD,CA9DM","sourcesContent":["/* eslint-disable react/no-find-dom-node */\nimport { findDOMNode } from 'react-dom';\nimport React from 'react';\nimport warning from 'warning';\n\nimport { Nullable } from '../../typings/utility-types';\nimport { isElement, isNode } from '../SSRSafe';\nimport { canUseDOM } from '../client';\n\nimport { isInstanceWithRootNode } from './rootNodeDecorator';\n\n/**\n * Extracts component's root Element (HTMLElement/SVGElement) out of it's instance\n * following the \"StrictMode support convention\" (@see README.md#strictmode, #2518).\n *\n * Replaces findDOMNode but falls back to it if \"convention\" is not respected.\n *\n * @param instance Component's instance provided by React.Ref or `this` inside class-components.\n * @returns Component's root `Element` or null\n */\n\nexport const getRootNode = (instance: Nullable<React.ReactInstance>): Nullable<Element> => {\n /**\n * Options of what instance can be:\n * 1. null or undefined\n * 2. DOM Element\n * 3. class Component instance (object)\n * 4. literally anything, returned from useImperativeHandle\n */\n\n if (!canUseDOM || !instance) {\n // instance can be `null` if component was unmounted\n // also checking undefined for convenient usage\n return null;\n }\n\n if (isElement(instance)) {\n // instance can be an Element already if its coming\n // from Refs of intrinsic elements (<div />, <button />, etc.)\n return instance;\n }\n\n let rootNode;\n\n if (isInstanceWithRootNode(instance)) {\n // it happened to be that native Node interface also has\n // the \"getRootNode\" method, but we can ignore it here\n // because we'd already checked the instance on being an Element\n // which is a subclass of Node, so, just fixing types here\n if (!isNode(instance)) {\n rootNode = instance.getRootNode();\n }\n }\n\n if (rootNode !== undefined) {\n // the getter exists and has returned something, it should be what we are looking for\n // probably its an Element or null (which is also OK, e.g. Popup/Tooltip/Hint before opening)\n return rootNode;\n }\n\n try {\n // rootNode is undefined, which means that the getter doesn't exists or returns the undefined\n // anyway, it tell us that the convention is not respected,\n // so, we have to fall back to the deprecated findDOMNode, which breaks StrictMode\n // instance can still be a class component or an imperative handle (i.e., anything, except null/undefined/Element)\n rootNode = findDOMNode(instance);\n } catch (e) {\n // but findDOMNode doesn`t accept everything that instance can be at this point,\n // so we have to handle exceptions\n // see https://github.com/facebook/react/blob/cae63505/packages/react-dom/src/__tests__/findDOMNode-test.js#L66-L86\n warning(\n false,\n '[getRootNode]: can`t fallback to findDOMNode.' +\n '\\n' +\n 'See https://github.com/skbkontur/retail-ui/blob/master/packages/react-ui/README.md#strictmode' +\n '\\n\\n' +\n e.message,\n );\n return null;\n }\n\n // the findDOMNode can also return Text, but we are only interested in Elements, so just filter it\n return isElement(rootNode) ? rootNode : null;\n};\n"]}
@@ -1,7 +1,7 @@
1
1
  import React from 'react';
2
2
  import { Nullable } from '../../typings/utility-types';
3
3
  /**
4
- * Extracts component's root `Element` out of it's instance
4
+ * Extracts component's root Element (HTMLElement/SVGElement) out of it's instance
5
5
  * following the "StrictMode support convention" (@see README.md#strictmode, #2518).
6
6
  *
7
7
  * Replaces findDOMNode but falls back to it if "convention" is not respected.
package/package.json CHANGED
@@ -1,11 +1,11 @@
1
1
  {
2
2
  "name": "@skbkontur/react-ui",
3
- "version": "4.4.0",
3
+ "version": "4.5.2",
4
4
  "description": "UI Components",
5
5
  "main": "cjs/index.js",
6
6
  "module": "index.js",
7
7
  "sideEffects": false,
8
- "homepage": "https://tech.skbkontur.ru/react-ui/4.4.0/",
8
+ "homepage": "https://tech.skbkontur.ru/react-ui/4.5.2/",
9
9
  "repository": {
10
10
  "type": "git",
11
11
  "url": "git@github.com:skbkontur/retail-ui.git"
@@ -151,24 +151,7 @@
151
151
  "react": ">=16.9",
152
152
  "react-dom": ">=16.9"
153
153
  },
154
- "jest": {
155
- "testResultsProcessor": "jest-teamcity-reporter",
156
- "moduleNameMapper": {
157
- "\\.(css|less)$": "identity-obj-proxy"
158
- },
159
- "transform": {
160
- "\\.[jt]sx?$": "babel-jest"
161
- },
162
- "testRegex": "__tests__(\\\\|/).*(\\.|-)test\\.(j|t)sx?$",
163
- "testEnvironment": "jsdom",
164
- "setupFilesAfterEnv": [
165
- "<rootDir>/test-setup.js"
166
- ],
167
- "transformIgnorePatterns": [
168
- "<rootDir>/node_modules/"
169
- ]
170
- },
171
154
  "publishConfig": {
172
- "tag": "old-version"
155
+ "tag": "latest"
173
156
  }
174
157
  }