@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.
- package/CHANGELOG.md +43 -1
- package/README.md +27 -4
- package/cjs/components/Autocomplete/Autocomplete.md +15 -1
- package/cjs/components/ComboBox/ComboBox.md +32 -0
- package/cjs/components/DatePicker/DatePicker.md +18 -0
- package/cjs/components/FileUploader/FileUploader.d.ts +2 -1
- package/cjs/components/FileUploader/FileUploader.js +15 -2
- package/cjs/components/FileUploader/FileUploader.js.map +1 -1
- package/cjs/components/FxInput/FxInput.md +13 -0
- package/cjs/components/Input/Input.js +2 -1
- package/cjs/components/Input/Input.js.map +1 -1
- package/cjs/components/Input/Input.md +12 -0
- package/cjs/components/Input/Input.styles.d.ts +1 -0
- package/cjs/components/Input/Input.styles.js +17 -10
- package/cjs/components/Input/Input.styles.js.map +1 -1
- package/cjs/components/Loader/Loader.d.ts +11 -2
- package/cjs/components/Loader/Loader.js +10 -1
- package/cjs/components/Loader/Loader.js.map +1 -1
- package/cjs/components/Loader/Loader.md +30 -23
- package/cjs/components/ResponsiveLayout/ResponsiveLayout.d.ts +6 -5
- package/cjs/components/ResponsiveLayout/ResponsiveLayout.js +5 -9
- package/cjs/components/ResponsiveLayout/ResponsiveLayout.js.map +1 -1
- package/cjs/components/ResponsiveLayout/ResponsiveLayout.md +31 -0
- package/cjs/components/ResponsiveLayout/decorator.d.ts +1 -1
- package/cjs/components/ResponsiveLayout/types.d.ts +9 -1
- package/cjs/components/ResponsiveLayout/useResponsiveLayout.d.ts +2 -2
- package/cjs/components/ResponsiveLayout/useResponsiveLayout.js +31 -15
- package/cjs/components/ResponsiveLayout/useResponsiveLayout.js.map +1 -1
- package/cjs/components/Select/Select.md +14 -0
- package/cjs/components/Spinner/Spinner.d.ts +11 -2
- package/cjs/components/Spinner/Spinner.js +10 -1
- package/cjs/components/Spinner/Spinner.js.map +1 -1
- package/cjs/components/Textarea/Textarea.md +19 -0
- package/cjs/components/Token/Token.styles.js +2 -1
- package/cjs/components/Token/Token.styles.js.map +1 -1
- package/cjs/components/TokenInput/TokenInput.d.ts +3 -0
- package/cjs/components/TokenInput/TokenInput.js +56 -13
- package/cjs/components/TokenInput/TokenInput.js.map +1 -1
- package/cjs/components/TokenInput/TokenInput.md +26 -0
- package/cjs/components/TokenInput/TokenInput.styles.js +2 -1
- package/cjs/components/TokenInput/TokenInput.styles.js.map +1 -1
- package/cjs/internal/ThemeShowcase/VariablesCollector.d.ts +1 -1
- package/cjs/internal/ZIndex/ZIndex.d.ts +17 -3
- package/cjs/internal/ZIndex/ZIndex.js +55 -14
- package/cjs/internal/ZIndex/ZIndex.js.map +1 -1
- package/cjs/internal/themes/DefaultTheme.d.ts +2 -0
- package/cjs/internal/themes/DefaultTheme.js +8 -2
- package/cjs/internal/themes/DefaultTheme.js.map +1 -1
- package/cjs/lib/rootNode/getRootNode.d.ts +1 -1
- package/cjs/lib/rootNode/getRootNode.js +37 -12
- package/cjs/lib/rootNode/getRootNode.js.map +1 -1
- package/components/Autocomplete/Autocomplete.md +15 -1
- package/components/ComboBox/ComboBox.md +32 -0
- package/components/DatePicker/DatePicker.md +18 -0
- package/components/FileUploader/FileUploader/FileUploader.js +8 -3
- package/components/FileUploader/FileUploader/FileUploader.js.map +1 -1
- package/components/FileUploader/FileUploader.d.ts +2 -1
- package/components/FxInput/FxInput.md +13 -0
- package/components/Input/Input/Input.js +1 -1
- package/components/Input/Input/Input.js.map +1 -1
- package/components/Input/Input.md +12 -0
- package/components/Input/Input.styles/Input.styles.js +13 -10
- package/components/Input/Input.styles/Input.styles.js.map +1 -1
- package/components/Input/Input.styles.d.ts +1 -0
- package/components/Loader/Loader/Loader.js +3 -1
- package/components/Loader/Loader/Loader.js.map +1 -1
- package/components/Loader/Loader.d.ts +11 -2
- package/components/Loader/Loader.md +30 -23
- package/components/ResponsiveLayout/ResponsiveLayout/ResponsiveLayout.js +5 -8
- package/components/ResponsiveLayout/ResponsiveLayout/ResponsiveLayout.js.map +1 -1
- package/components/ResponsiveLayout/ResponsiveLayout.d.ts +6 -5
- package/components/ResponsiveLayout/ResponsiveLayout.md +31 -0
- package/components/ResponsiveLayout/decorator.d.ts +1 -1
- package/components/ResponsiveLayout/types.d.ts +9 -1
- package/components/ResponsiveLayout/useResponsiveLayout/useResponsiveLayout.js +42 -17
- package/components/ResponsiveLayout/useResponsiveLayout/useResponsiveLayout.js.map +1 -1
- package/components/ResponsiveLayout/useResponsiveLayout.d.ts +2 -2
- package/components/Select/Select.md +14 -0
- package/components/Spinner/Spinner/Spinner.js +1 -1
- package/components/Spinner/Spinner/Spinner.js.map +1 -1
- package/components/Spinner/Spinner.d.ts +11 -2
- package/components/Textarea/Textarea.md +19 -0
- package/components/Token/Token.styles/Token.styles.js +1 -1
- package/components/Token/Token.styles/Token.styles.js.map +1 -1
- package/components/TokenInput/TokenInput/TokenInput.js +82 -19
- package/components/TokenInput/TokenInput/TokenInput.js.map +1 -1
- package/components/TokenInput/TokenInput.d.ts +3 -0
- package/components/TokenInput/TokenInput.md +26 -0
- package/components/TokenInput/TokenInput.styles/TokenInput.styles.js +1 -1
- package/components/TokenInput/TokenInput.styles/TokenInput.styles.js.map +1 -1
- package/internal/ThemeShowcase/VariablesCollector.d.ts +1 -1
- package/internal/ZIndex/ZIndex/ZIndex.js +46 -27
- package/internal/ZIndex/ZIndex/ZIndex.js.map +1 -1
- package/internal/ZIndex/ZIndex.d.ts +17 -3
- package/internal/themes/DefaultTheme/DefaultTheme.js +11 -1
- package/internal/themes/DefaultTheme/DefaultTheme.js.map +1 -1
- package/internal/themes/DefaultTheme.d.ts +2 -0
- package/lib/rootNode/getRootNode/getRootNode.js +28 -10
- package/lib/rootNode/getRootNode/getRootNode.js.map +1 -1
- package/lib/rootNode/getRootNode.d.ts +1 -1
- 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
|
|
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
|
|
27
|
+
// also checking undefined for convenient usage
|
|
20
28
|
return null;
|
|
21
29
|
}
|
|
22
30
|
|
|
23
31
|
if (isElement(instance)) {
|
|
24
|
-
// instance can be
|
|
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
|
|
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
|
-
//
|
|
43
|
-
// or null (which is also OK, e.g. Popup/Tooltip/Hint before opening)
|
|
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
|
-
}
|
|
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
|
|
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
|
|
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.
|
|
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.
|
|
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": "
|
|
155
|
+
"tag": "latest"
|
|
173
156
|
}
|
|
174
157
|
}
|