@skbkontur/icons 1.10.0 → 1.11.0-support-shadow-dom.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.
- package/esm/internal/BaseIcon.js +10 -9
- package/esm/internal/cssRules.d.ts +1 -0
- package/esm/internal/cssRules.js +6 -0
- package/esm/internal/injectCss.d.ts +6 -0
- package/esm/internal/injectCss.js +60 -0
- package/esm/internal/utils.d.ts +21 -0
- package/esm/internal/utils.js +34 -0
- package/internal/BaseIcon.js +9 -8
- package/internal/cssRules.d.ts +1 -0
- package/internal/cssRules.js +9 -0
- package/internal/injectCss.d.ts +6 -0
- package/internal/injectCss.js +64 -0
- package/internal/utils.d.ts +21 -0
- package/internal/utils.js +38 -0
- package/package.json +1 -1
package/esm/internal/BaseIcon.js
CHANGED
|
@@ -1,20 +1,21 @@
|
|
|
1
1
|
import { __assign, __rest } from "tslib";
|
|
2
2
|
/* eslint-disable react/display-name */
|
|
3
|
-
import React, { useEffect } from 'react';
|
|
3
|
+
import React, { useEffect, useRef } from 'react';
|
|
4
4
|
import { IconDataTids } from './Icon';
|
|
5
5
|
import { forwardRef } from '../helpers/forwardRef';
|
|
6
|
+
import { mergeRefs } from './utils';
|
|
7
|
+
import { injectCss } from './injectCss';
|
|
6
8
|
export var BaseIcon = forwardRef('BaseIcon', function (_a, ref) {
|
|
7
9
|
var color = _a.color, size = _a.size, style = _a.style, _b = _a["aria-hidden"], ariaHidden = _b === void 0 ? true : _b, _c = _a.viewBoxSize, viewBoxSize = _c === void 0 ? 16 : _c, _d = _a.align, align = _d === void 0 ? 'center' : _d, children = _a.children, rest = __rest(_a, ["color", "size", "style", 'aria-hidden', "viewBoxSize", "align", "children"]);
|
|
10
|
+
var innerRef = useRef(null);
|
|
8
11
|
useEffect(function () {
|
|
9
|
-
var
|
|
10
|
-
if (
|
|
11
|
-
|
|
12
|
-
style_1.id = styleId;
|
|
13
|
-
style_1.innerHTML = "\n .ui-parking-icon-centered {\n display: -webkit-inline-box;\n display: inline-flex;\n\n -webkit-box-align: center;\n align-items: center;\n }\n\n .ui-parking-icon-centered::before {\n /*\n * ZERO WIDTH SPACE\n *\n * Symbol to align to baseline\n *\n * @see https://www.fileformat.info/info/unicode/char/200b/index.htm\n */\n content: '\\200B';\n }\n\n .ui-parking-icon-base {\n outline: none;\n }\n\n .ui-parking-icon-base:focus-visible {\n outline: blue auto 5px;\n }\n ";
|
|
14
|
-
document.getElementsByTagName('head')[0].appendChild(style_1);
|
|
12
|
+
var element = innerRef.current;
|
|
13
|
+
if (!element) {
|
|
14
|
+
return;
|
|
15
15
|
}
|
|
16
|
-
|
|
17
|
-
|
|
16
|
+
injectCss(element);
|
|
17
|
+
}, [innerRef.current]);
|
|
18
|
+
var icon = (React.createElement("svg", __assign({ "data-tid": IconDataTids.root, ref: mergeRefs([innerRef, ref]), width: size || viewBoxSize, height: size || viewBoxSize, className: "ui-parking-icon-base", style: Object.assign({
|
|
18
19
|
fill: color !== null && color !== void 0 ? color : 'currentColor',
|
|
19
20
|
marginBottom: align === 'none' || align === 'center' ? 0 : '-0.1875em',
|
|
20
21
|
flexShrink: 0,
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export declare const CSSRules: readonly string[];
|
|
@@ -0,0 +1,6 @@
|
|
|
1
|
+
export var CSSRules = [
|
|
2
|
+
".ui-parking-icon-centered { \n display: -webkit-inline-box;\n display: inline-flex;\n -webkit-box-align: center;\n align-items: center; \n }",
|
|
3
|
+
".ui-parking-icon-centered::before {\n /*\n * ZERO WIDTH SPACE\n *\n * Symbol to align to baseline\n *\n * @see https://www.fileformat.info/info/unicode/char/200b/index.htm\n */\n content: '\\200B';\n }",
|
|
4
|
+
".ui-parking-icon-base { \n outline: none; \n }",
|
|
5
|
+
".ui-parking-icon-base:focus-visible { \n outline: blue auto 5px; \n }",
|
|
6
|
+
];
|
|
@@ -0,0 +1,60 @@
|
|
|
1
|
+
import { CSSRules } from './cssRules';
|
|
2
|
+
function checkRuleExists(rootNodeStyles, cssText) {
|
|
3
|
+
return rootNodeStyles.some(function (cssRules) { return Array.from(cssRules).some(function (r) { return r.cssText === cssText; }); });
|
|
4
|
+
}
|
|
5
|
+
/**
|
|
6
|
+
* ponyfill for old browsers aka ie11, delete after drop support
|
|
7
|
+
*/
|
|
8
|
+
function getRootNode(node) {
|
|
9
|
+
return typeof Node === 'function' && Object.prototype.hasOwnProperty.call(Node.prototype, 'getRootNode')
|
|
10
|
+
? node.getRootNode()
|
|
11
|
+
: node.ownerDocument;
|
|
12
|
+
}
|
|
13
|
+
/**
|
|
14
|
+
* Whether the current browser supports `adoptedStyleSheets`.
|
|
15
|
+
* https://github.com/lit/lit-element/blob/master/src/lib/css-tag.ts#L14
|
|
16
|
+
*/
|
|
17
|
+
var supportsAdoptingStyleSheets = Boolean(typeof window !== 'undefined' &&
|
|
18
|
+
window.ShadowRoot &&
|
|
19
|
+
(window.ShadyCSS === undefined || window.ShadyCSS.nativeShadow) &&
|
|
20
|
+
'adoptedStyleSheets' in Document.prototype &&
|
|
21
|
+
'replace' in CSSStyleSheet.prototype);
|
|
22
|
+
export function injectCss(element) {
|
|
23
|
+
var _a;
|
|
24
|
+
var rootNode = getRootNode(element);
|
|
25
|
+
if (!rootNode) {
|
|
26
|
+
return;
|
|
27
|
+
}
|
|
28
|
+
if (supportsAdoptingStyleSheets) {
|
|
29
|
+
var currentWindow = element.ownerDocument.defaultView;
|
|
30
|
+
if (!currentWindow) {
|
|
31
|
+
return;
|
|
32
|
+
}
|
|
33
|
+
var typedRootNode = rootNode;
|
|
34
|
+
var rootNodeStyles_1 = typedRootNode.adoptedStyleSheets.map(function (item) { return item.cssRules; });
|
|
35
|
+
var cssRulesStyleSheet_1 = new currentWindow.CSSStyleSheet();
|
|
36
|
+
CSSRules.forEach(function (rule) { return cssRulesStyleSheet_1.insertRule(rule); });
|
|
37
|
+
var filteredStyleSheet_1 = new currentWindow.CSSStyleSheet();
|
|
38
|
+
Array.from(cssRulesStyleSheet_1.cssRules).forEach(function (cssRule) {
|
|
39
|
+
if (!checkRuleExists(rootNodeStyles_1, cssRule.cssText)) {
|
|
40
|
+
filteredStyleSheet_1.insertRule(cssRule.cssText);
|
|
41
|
+
}
|
|
42
|
+
});
|
|
43
|
+
if (filteredStyleSheet_1.cssRules.length > 0) {
|
|
44
|
+
typedRootNode.adoptedStyleSheets.push(filteredStyleSheet_1);
|
|
45
|
+
}
|
|
46
|
+
}
|
|
47
|
+
else {
|
|
48
|
+
var styleId = 'ui-parking-icons-style';
|
|
49
|
+
var isShadowRoot = !!rootNode.host;
|
|
50
|
+
var rootElement = isShadowRoot ? rootNode.firstElementChild : rootNode;
|
|
51
|
+
var hasInsertStyles = (_a = rootElement) === null || _a === void 0 ? void 0 : _a.querySelector("#" + styleId);
|
|
52
|
+
var elementForStyle = isShadowRoot ? rootElement : rootElement.getElementsByTagName('head')[0];
|
|
53
|
+
if (!hasInsertStyles) {
|
|
54
|
+
var style = element.ownerDocument.createElement('style');
|
|
55
|
+
style.id = styleId;
|
|
56
|
+
style.innerHTML = CSSRules.join('');
|
|
57
|
+
elementForStyle === null || elementForStyle === void 0 ? void 0 : elementForStyle.appendChild(style);
|
|
58
|
+
}
|
|
59
|
+
}
|
|
60
|
+
}
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Проверяет, не является ли переданный аргумент null или undefined и исключает типы null и undefined из типа аргумента
|
|
3
|
+
*
|
|
4
|
+
* @param value Значение, которое нужно проверить и исключить из него типы
|
|
5
|
+
* @returns Возвращает true, если переданный аргумент не является null или undefined иначе false
|
|
6
|
+
*/
|
|
7
|
+
export declare const isNonNullable: <T>(value: T) => value is NonNullable<T>;
|
|
8
|
+
/**
|
|
9
|
+
* Merges two or more refs into one.
|
|
10
|
+
*
|
|
11
|
+
* @param refs Array of refs.
|
|
12
|
+
* @returns A single ref composing all the refs passed.
|
|
13
|
+
*
|
|
14
|
+
* @example
|
|
15
|
+
* const SomeComponent = forwardRef((props, ref) => {
|
|
16
|
+
* const localRef = useRef();
|
|
17
|
+
*
|
|
18
|
+
* return <div ref={mergeRefs([localRef, ref])} />;
|
|
19
|
+
* });
|
|
20
|
+
*/
|
|
21
|
+
export declare function mergeRefs<T = any>(refs: Array<React.MutableRefObject<T> | React.LegacyRef<T>>): (value: any) => void;
|
|
@@ -0,0 +1,34 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Проверяет, не является ли переданный аргумент null или undefined и исключает типы null и undefined из типа аргумента
|
|
3
|
+
*
|
|
4
|
+
* @param value Значение, которое нужно проверить и исключить из него типы
|
|
5
|
+
* @returns Возвращает true, если переданный аргумент не является null или undefined иначе false
|
|
6
|
+
*/
|
|
7
|
+
export var isNonNullable = function (value) {
|
|
8
|
+
return value !== null && value !== undefined;
|
|
9
|
+
};
|
|
10
|
+
/**
|
|
11
|
+
* Merges two or more refs into one.
|
|
12
|
+
*
|
|
13
|
+
* @param refs Array of refs.
|
|
14
|
+
* @returns A single ref composing all the refs passed.
|
|
15
|
+
*
|
|
16
|
+
* @example
|
|
17
|
+
* const SomeComponent = forwardRef((props, ref) => {
|
|
18
|
+
* const localRef = useRef();
|
|
19
|
+
*
|
|
20
|
+
* return <div ref={mergeRefs([localRef, ref])} />;
|
|
21
|
+
* });
|
|
22
|
+
*/
|
|
23
|
+
export function mergeRefs(refs) {
|
|
24
|
+
return function (value) {
|
|
25
|
+
refs.forEach(function (ref) {
|
|
26
|
+
if (typeof ref === 'function') {
|
|
27
|
+
return ref(value);
|
|
28
|
+
}
|
|
29
|
+
else if (isNonNullable(ref)) {
|
|
30
|
+
return (ref.current = value);
|
|
31
|
+
}
|
|
32
|
+
});
|
|
33
|
+
};
|
|
34
|
+
}
|
package/internal/BaseIcon.js
CHANGED
|
@@ -6,18 +6,19 @@ var tslib_1 = require("tslib");
|
|
|
6
6
|
var react_1 = tslib_1.__importStar(require("react"));
|
|
7
7
|
var Icon_1 = require("./Icon");
|
|
8
8
|
var forwardRef_1 = require("../helpers/forwardRef");
|
|
9
|
+
var utils_1 = require("./utils");
|
|
10
|
+
var injectCss_1 = require("./injectCss");
|
|
9
11
|
exports.BaseIcon = forwardRef_1.forwardRef('BaseIcon', function (_a, ref) {
|
|
10
12
|
var color = _a.color, size = _a.size, style = _a.style, _b = _a["aria-hidden"], ariaHidden = _b === void 0 ? true : _b, _c = _a.viewBoxSize, viewBoxSize = _c === void 0 ? 16 : _c, _d = _a.align, align = _d === void 0 ? 'center' : _d, children = _a.children, rest = tslib_1.__rest(_a, ["color", "size", "style", 'aria-hidden', "viewBoxSize", "align", "children"]);
|
|
13
|
+
var innerRef = react_1.useRef(null);
|
|
11
14
|
react_1.useEffect(function () {
|
|
12
|
-
var
|
|
13
|
-
if (
|
|
14
|
-
|
|
15
|
-
style_1.id = styleId;
|
|
16
|
-
style_1.innerHTML = "\n .ui-parking-icon-centered {\n display: -webkit-inline-box;\n display: inline-flex;\n\n -webkit-box-align: center;\n align-items: center;\n }\n\n .ui-parking-icon-centered::before {\n /*\n * ZERO WIDTH SPACE\n *\n * Symbol to align to baseline\n *\n * @see https://www.fileformat.info/info/unicode/char/200b/index.htm\n */\n content: '\\200B';\n }\n\n .ui-parking-icon-base {\n outline: none;\n }\n\n .ui-parking-icon-base:focus-visible {\n outline: blue auto 5px;\n }\n ";
|
|
17
|
-
document.getElementsByTagName('head')[0].appendChild(style_1);
|
|
15
|
+
var element = innerRef.current;
|
|
16
|
+
if (!element) {
|
|
17
|
+
return;
|
|
18
18
|
}
|
|
19
|
-
|
|
20
|
-
|
|
19
|
+
injectCss_1.injectCss(element);
|
|
20
|
+
}, [innerRef.current]);
|
|
21
|
+
var icon = (react_1.default.createElement("svg", tslib_1.__assign({ "data-tid": Icon_1.IconDataTids.root, ref: utils_1.mergeRefs([innerRef, ref]), width: size || viewBoxSize, height: size || viewBoxSize, className: "ui-parking-icon-base", style: Object.assign({
|
|
21
22
|
fill: color !== null && color !== void 0 ? color : 'currentColor',
|
|
22
23
|
marginBottom: align === 'none' || align === 'center' ? 0 : '-0.1875em',
|
|
23
24
|
flexShrink: 0,
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export declare const CSSRules: readonly string[];
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
+
exports.CSSRules = void 0;
|
|
4
|
+
exports.CSSRules = [
|
|
5
|
+
".ui-parking-icon-centered { \n display: -webkit-inline-box;\n display: inline-flex;\n -webkit-box-align: center;\n align-items: center; \n }",
|
|
6
|
+
".ui-parking-icon-centered::before {\n /*\n * ZERO WIDTH SPACE\n *\n * Symbol to align to baseline\n *\n * @see https://www.fileformat.info/info/unicode/char/200b/index.htm\n */\n content: '\\200B';\n }",
|
|
7
|
+
".ui-parking-icon-base { \n outline: none; \n }",
|
|
8
|
+
".ui-parking-icon-base:focus-visible { \n outline: blue auto 5px; \n }",
|
|
9
|
+
];
|
|
@@ -0,0 +1,64 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
+
exports.injectCss = void 0;
|
|
4
|
+
var cssRules_1 = require("./cssRules");
|
|
5
|
+
function checkRuleExists(rootNodeStyles, cssText) {
|
|
6
|
+
return rootNodeStyles.some(function (cssRules) { return Array.from(cssRules).some(function (r) { return r.cssText === cssText; }); });
|
|
7
|
+
}
|
|
8
|
+
/**
|
|
9
|
+
* ponyfill for old browsers aka ie11, delete after drop support
|
|
10
|
+
*/
|
|
11
|
+
function getRootNode(node) {
|
|
12
|
+
return typeof Node === 'function' && Object.prototype.hasOwnProperty.call(Node.prototype, 'getRootNode')
|
|
13
|
+
? node.getRootNode()
|
|
14
|
+
: node.ownerDocument;
|
|
15
|
+
}
|
|
16
|
+
/**
|
|
17
|
+
* Whether the current browser supports `adoptedStyleSheets`.
|
|
18
|
+
* https://github.com/lit/lit-element/blob/master/src/lib/css-tag.ts#L14
|
|
19
|
+
*/
|
|
20
|
+
var supportsAdoptingStyleSheets = Boolean(typeof window !== 'undefined' &&
|
|
21
|
+
window.ShadowRoot &&
|
|
22
|
+
(window.ShadyCSS === undefined || window.ShadyCSS.nativeShadow) &&
|
|
23
|
+
'adoptedStyleSheets' in Document.prototype &&
|
|
24
|
+
'replace' in CSSStyleSheet.prototype);
|
|
25
|
+
function injectCss(element) {
|
|
26
|
+
var _a;
|
|
27
|
+
var rootNode = getRootNode(element);
|
|
28
|
+
if (!rootNode) {
|
|
29
|
+
return;
|
|
30
|
+
}
|
|
31
|
+
if (supportsAdoptingStyleSheets) {
|
|
32
|
+
var currentWindow = element.ownerDocument.defaultView;
|
|
33
|
+
if (!currentWindow) {
|
|
34
|
+
return;
|
|
35
|
+
}
|
|
36
|
+
var typedRootNode = rootNode;
|
|
37
|
+
var rootNodeStyles_1 = typedRootNode.adoptedStyleSheets.map(function (item) { return item.cssRules; });
|
|
38
|
+
var cssRulesStyleSheet_1 = new currentWindow.CSSStyleSheet();
|
|
39
|
+
cssRules_1.CSSRules.forEach(function (rule) { return cssRulesStyleSheet_1.insertRule(rule); });
|
|
40
|
+
var filteredStyleSheet_1 = new currentWindow.CSSStyleSheet();
|
|
41
|
+
Array.from(cssRulesStyleSheet_1.cssRules).forEach(function (cssRule) {
|
|
42
|
+
if (!checkRuleExists(rootNodeStyles_1, cssRule.cssText)) {
|
|
43
|
+
filteredStyleSheet_1.insertRule(cssRule.cssText);
|
|
44
|
+
}
|
|
45
|
+
});
|
|
46
|
+
if (filteredStyleSheet_1.cssRules.length > 0) {
|
|
47
|
+
typedRootNode.adoptedStyleSheets.push(filteredStyleSheet_1);
|
|
48
|
+
}
|
|
49
|
+
}
|
|
50
|
+
else {
|
|
51
|
+
var styleId = 'ui-parking-icons-style';
|
|
52
|
+
var isShadowRoot = !!rootNode.host;
|
|
53
|
+
var rootElement = isShadowRoot ? rootNode.firstElementChild : rootNode;
|
|
54
|
+
var hasInsertStyles = (_a = rootElement) === null || _a === void 0 ? void 0 : _a.querySelector("#" + styleId);
|
|
55
|
+
var elementForStyle = isShadowRoot ? rootElement : rootElement.getElementsByTagName('head')[0];
|
|
56
|
+
if (!hasInsertStyles) {
|
|
57
|
+
var style = element.ownerDocument.createElement('style');
|
|
58
|
+
style.id = styleId;
|
|
59
|
+
style.innerHTML = cssRules_1.CSSRules.join('');
|
|
60
|
+
elementForStyle === null || elementForStyle === void 0 ? void 0 : elementForStyle.appendChild(style);
|
|
61
|
+
}
|
|
62
|
+
}
|
|
63
|
+
}
|
|
64
|
+
exports.injectCss = injectCss;
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Проверяет, не является ли переданный аргумент null или undefined и исключает типы null и undefined из типа аргумента
|
|
3
|
+
*
|
|
4
|
+
* @param value Значение, которое нужно проверить и исключить из него типы
|
|
5
|
+
* @returns Возвращает true, если переданный аргумент не является null или undefined иначе false
|
|
6
|
+
*/
|
|
7
|
+
export declare const isNonNullable: <T>(value: T) => value is NonNullable<T>;
|
|
8
|
+
/**
|
|
9
|
+
* Merges two or more refs into one.
|
|
10
|
+
*
|
|
11
|
+
* @param refs Array of refs.
|
|
12
|
+
* @returns A single ref composing all the refs passed.
|
|
13
|
+
*
|
|
14
|
+
* @example
|
|
15
|
+
* const SomeComponent = forwardRef((props, ref) => {
|
|
16
|
+
* const localRef = useRef();
|
|
17
|
+
*
|
|
18
|
+
* return <div ref={mergeRefs([localRef, ref])} />;
|
|
19
|
+
* });
|
|
20
|
+
*/
|
|
21
|
+
export declare function mergeRefs<T = any>(refs: Array<React.MutableRefObject<T> | React.LegacyRef<T>>): (value: any) => void;
|
|
@@ -0,0 +1,38 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
+
exports.mergeRefs = exports.isNonNullable = void 0;
|
|
4
|
+
/**
|
|
5
|
+
* Проверяет, не является ли переданный аргумент null или undefined и исключает типы null и undefined из типа аргумента
|
|
6
|
+
*
|
|
7
|
+
* @param value Значение, которое нужно проверить и исключить из него типы
|
|
8
|
+
* @returns Возвращает true, если переданный аргумент не является null или undefined иначе false
|
|
9
|
+
*/
|
|
10
|
+
exports.isNonNullable = function (value) {
|
|
11
|
+
return value !== null && value !== undefined;
|
|
12
|
+
};
|
|
13
|
+
/**
|
|
14
|
+
* Merges two or more refs into one.
|
|
15
|
+
*
|
|
16
|
+
* @param refs Array of refs.
|
|
17
|
+
* @returns A single ref composing all the refs passed.
|
|
18
|
+
*
|
|
19
|
+
* @example
|
|
20
|
+
* const SomeComponent = forwardRef((props, ref) => {
|
|
21
|
+
* const localRef = useRef();
|
|
22
|
+
*
|
|
23
|
+
* return <div ref={mergeRefs([localRef, ref])} />;
|
|
24
|
+
* });
|
|
25
|
+
*/
|
|
26
|
+
function mergeRefs(refs) {
|
|
27
|
+
return function (value) {
|
|
28
|
+
refs.forEach(function (ref) {
|
|
29
|
+
if (typeof ref === 'function') {
|
|
30
|
+
return ref(value);
|
|
31
|
+
}
|
|
32
|
+
else if (exports.isNonNullable(ref)) {
|
|
33
|
+
return (ref.current = value);
|
|
34
|
+
}
|
|
35
|
+
});
|
|
36
|
+
};
|
|
37
|
+
}
|
|
38
|
+
exports.mergeRefs = mergeRefs;
|