@skbkontur/icons 1.10.0 → 1.11.0-support-shadow-dom.1

package/esm/helpers/forwardRef.d.ts

@@ -1,6 +1,7 @@
 import React from 'react';
+import type { ForwardRefRenderFunction } from './types';
 export interface ReactUIComponentWithRef<T, P> extends React.NamedExoticComponent<React.PropsWithoutRef<P> & React.RefAttributes<T>>, Pick<React.ForwardRefExoticComponent<P>, 'propTypes'> {
     __KONTUR_REACT_UI__: string;
     __KONTUR_ICON__: boolean;
 }
-export declare function forwardRef<ElementType, Props>(name: string, render: React.RefForwardingComponent<ElementType, Props>): ReactUIComponentWithRef<ElementType, Props>;
+export declare function forwardRef<ElementType, Props>(name: string, render: ForwardRefRenderFunction<ElementType, Props>): ReactUIComponentWithRef<ElementType, Props>;

package/esm/helpers/types.d.ts

@@ -0,0 +1,12 @@
+import type { ReactElement } from 'react';
+interface MutableRefObject<T> {
+    current: T;
+}
+declare type ForwardedRef<T> = ((instance: T | null) => void) | MutableRefObject<T | null> | null;
+export interface ForwardRefRenderFunction<T, P = {}> {
+    (props: P, ref: ForwardedRef<T>): ReactElement | null;
+    displayName?: string | undefined;
+    defaultProps?: never | undefined;
+    propTypes?: never | undefined;
+}
+export {};

package/esm/internal/BaseIcon.js

@@ -1,20 +1,21 @@
 import { __assign, __rest } from "tslib";
 /* eslint-disable react/display-name */
-import React, { useEffect } from 'react';
+import React, { useEffect, useRef } from 'react';
 import { IconDataTids } from './Icon';
 import { forwardRef } from '../helpers/forwardRef';
+import { mergeRefs } from './utils';
+import { injectCss } from './injectCss';
 export var BaseIcon = forwardRef('BaseIcon', function (_a, ref) {
     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"]);
+    var innerRef = useRef(null);
     useEffect(function () {
-        var styleId = 'ui-parking-icons-style';
-        if (document.getElementById(styleId) === null) {
-            var style_1 = document.createElement('style');
-            style_1.id = styleId;
-            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        ";
-            document.getElementsByTagName('head')[0].appendChild(style_1);
+        var element = innerRef.current;
+        if (!element) {
+            return;
         }
-    }, []);
-    var icon = (React.createElement("svg", __assign({ "data-tid": IconDataTids.root, ref: ref, width: size || viewBoxSize, height: size || viewBoxSize, className: "ui-parking-icon-base", style: Object.assign({
+        injectCss(element);
+    }, [innerRef.current]);
+    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({
             fill: color !== null && color !== void 0 ? color : 'currentColor',
             marginBottom: align === 'none' || align === 'center' ? 0 : '-0.1875em',
             flexShrink: 0,

package/esm/internal/Icon.d.ts

@@ -1,4 +1,6 @@
 import React, { AllHTMLAttributes, AriaAttributes } from 'react';
+import { BaseIconProps as BaseIconPropsWithoutRef, BaseIconRefType } from './BaseIcon';
+import type { ReactUIComponentWithRef } from '../helpers/forwardRef';
 export declare const breakpoints: readonly [16, 20, 24, 32, 64];
 export declare const weights: readonly ["light", "regular", "solid"];
 export declare const MAX_LIGHT_POSITION = 1;
@@ -8,9 +10,9 @@ export declare type IconName = string;
 export declare type IconSize = typeof breakpoints[number];
 export declare type IconWeight = typeof weights[number];
 export declare type IconSizes = Record<number, {
-    light?: React.ReactNode;
-    regular: React.ReactNode;
-    solid?: React.ReactNode;
+    light?: ReactUIComponentWithRef<SVGSVGElement, BaseIconProps>;
+    regular: ReactUIComponentWithRef<SVGSVGElement, BaseIconProps>;
+    solid?: ReactUIComponentWithRef<SVGSVGElement, BaseIconProps>;
 }>;
 interface IconInterface {
     sizes: IconSizes;
@@ -21,6 +23,9 @@ export interface IconProps extends React.SVGAttributes<SVGElement>, Pick<AllHTML
     color?: string;
     align?: 'center' | 'baseline' | 'none';
 }
+interface BaseIconProps extends BaseIconPropsWithoutRef {
+    ref: React.Ref<BaseIconRefType>;
+}
 export declare const DEFAULT_ICON_SIZE: IconSize;
 export declare const DEFAULT_ICON_WEIGHT: IconWeight;
 export declare const IconDataTids: {

package/esm/internal/cssRules.d.ts

@@ -0,0 +1 @@
+export declare const CSSRules: readonly string[];

package/esm/internal/cssRules.js

@@ -0,0 +1,6 @@
+export var CSSRules = [
+    ".ui-parking-icon-centered { \n    display: -webkit-inline-box;\n    display: inline-flex;\n    -webkit-box-align: center;\n    align-items: center; \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  }",
+    ".ui-parking-icon-base { \n    outline: none; \n  }",
+    ".ui-parking-icon-base:focus-visible { \n    outline: blue auto 5px; \n  }",
+];

package/esm/internal/injectCss.d.ts

@@ -0,0 +1,6 @@
+declare global {
+    interface Window {
+        ShadyCSS: any;
+    }
+}
+export declare function injectCss(element: Element): void;

package/esm/internal/injectCss.js

@@ -0,0 +1,60 @@
+import { CSSRules } from './cssRules';
+function checkRuleExists(rootNodeStyles, cssText) {
+    return rootNodeStyles.some(function (cssRules) { return Array.from(cssRules).some(function (r) { return r.cssText === cssText; }); });
+}
+/**
+ * ponyfill for old browsers aka ie11, delete after drop support
+ */
+function getRootNode(node) {
+    return typeof Node === 'function' && Object.prototype.hasOwnProperty.call(Node.prototype, 'getRootNode')
+        ? node.getRootNode()
+        : node.ownerDocument;
+}
+/**
+ * Whether the current browser supports `adoptedStyleSheets`.
+ * https://github.com/lit/lit-element/blob/master/src/lib/css-tag.ts#L14
+ */
+var supportsAdoptingStyleSheets = Boolean(typeof window !== 'undefined' &&
+    window.ShadowRoot &&
+    (window.ShadyCSS === undefined || window.ShadyCSS.nativeShadow) &&
+    'adoptedStyleSheets' in Document.prototype &&
+    'replace' in CSSStyleSheet.prototype);
+export function injectCss(element) {
+    var _a;
+    var rootNode = getRootNode(element);
+    if (!rootNode) {
+        return;
+    }
+    if (supportsAdoptingStyleSheets) {
+        var currentWindow = element.ownerDocument.defaultView;
+        if (!currentWindow) {
+            return;
+        }
+        var typedRootNode = rootNode;
+        var rootNodeStyles_1 = typedRootNode.adoptedStyleSheets.map(function (item) { return item.cssRules; });
+        var cssRulesStyleSheet_1 = new currentWindow.CSSStyleSheet();
+        CSSRules.forEach(function (rule) { return cssRulesStyleSheet_1.insertRule(rule); });
+        var filteredStyleSheet_1 = new currentWindow.CSSStyleSheet();
+        Array.from(cssRulesStyleSheet_1.cssRules).forEach(function (cssRule) {
+            if (!checkRuleExists(rootNodeStyles_1, cssRule.cssText)) {
+                filteredStyleSheet_1.insertRule(cssRule.cssText);
+            }
+        });
+        if (filteredStyleSheet_1.cssRules.length > 0) {
+            typedRootNode.adoptedStyleSheets.push(filteredStyleSheet_1);
+        }
+    }
+    else {
+        var styleId = 'ui-parking-icons-style';
+        var isShadowRoot = !!rootNode.host;
+        var rootElement = isShadowRoot ? rootNode.firstElementChild : rootNode;
+        var hasInsertStyles = (_a = rootElement) === null || _a === void 0 ? void 0 : _a.querySelector("#" + styleId);
+        var elementForStyle = isShadowRoot ? rootElement : rootElement.getElementsByTagName('head')[0];
+        if (!hasInsertStyles) {
+            var style = element.ownerDocument.createElement('style');
+            style.id = styleId;
+            style.innerHTML = CSSRules.join('');
+            elementForStyle === null || elementForStyle === void 0 ? void 0 : elementForStyle.appendChild(style);
+        }
+    }
+}

package/esm/internal/utils.d.ts

@@ -0,0 +1,21 @@
+/**
+ * Проверяет, не является ли переданный аргумент null или undefined и исключает типы null и undefined из типа аргумента
+ *
+ * @param value Значение, которое нужно проверить и исключить из него типы
+ * @returns Возвращает true, если переданный аргумент не является null или undefined иначе false
+ */
+export declare const isNonNullable: <T>(value: T) => value is NonNullable<T>;
+/**
+ * Merges two or more refs into one.
+ *
+ * @param refs Array of refs.
+ * @returns A single ref composing all the refs passed.
+ *
+ * @example
+ * const SomeComponent = forwardRef((props, ref) => {
+ *  const localRef = useRef();
+ *
+ *  return <div ref={mergeRefs([localRef, ref])} />;
+ * });
+ */
+export declare function mergeRefs<T = any>(refs: Array<React.MutableRefObject<T> | React.LegacyRef<T>>): (value: any) => void;

package/esm/internal/utils.js

@@ -0,0 +1,34 @@
+/**
+ * Проверяет, не является ли переданный аргумент null или undefined и исключает типы null и undefined из типа аргумента
+ *
+ * @param value Значение, которое нужно проверить и исключить из него типы
+ * @returns Возвращает true, если переданный аргумент не является null или undefined иначе false
+ */
+export var isNonNullable = function (value) {
+    return value !== null && value !== undefined;
+};
+/**
+ * Merges two or more refs into one.
+ *
+ * @param refs Array of refs.
+ * @returns A single ref composing all the refs passed.
+ *
+ * @example
+ * const SomeComponent = forwardRef((props, ref) => {
+ *  const localRef = useRef();
+ *
+ *  return <div ref={mergeRefs([localRef, ref])} />;
+ * });
+ */
+export function mergeRefs(refs) {
+    return function (value) {
+        refs.forEach(function (ref) {
+            if (typeof ref === 'function') {
+                return ref(value);
+            }
+            else if (isNonNullable(ref)) {
+                return (ref.current = value);
+            }
+        });
+    };
+}

package/helpers/forwardRef.d.ts

@@ -1,6 +1,7 @@
 import React from 'react';
+import type { ForwardRefRenderFunction } from './types';
 export interface ReactUIComponentWithRef<T, P> extends React.NamedExoticComponent<React.PropsWithoutRef<P> & React.RefAttributes<T>>, Pick<React.ForwardRefExoticComponent<P>, 'propTypes'> {
     __KONTUR_REACT_UI__: string;
     __KONTUR_ICON__: boolean;
 }
-export declare function forwardRef<ElementType, Props>(name: string, render: React.RefForwardingComponent<ElementType, Props>): ReactUIComponentWithRef<ElementType, Props>;
+export declare function forwardRef<ElementType, Props>(name: string, render: ForwardRefRenderFunction<ElementType, Props>): ReactUIComponentWithRef<ElementType, Props>;

package/helpers/types.d.ts

@@ -0,0 +1,12 @@
+import type { ReactElement } from 'react';
+interface MutableRefObject<T> {
+    current: T;
+}
+declare type ForwardedRef<T> = ((instance: T | null) => void) | MutableRefObject<T | null> | null;
+export interface ForwardRefRenderFunction<T, P = {}> {
+    (props: P, ref: ForwardedRef<T>): ReactElement | null;
+    displayName?: string | undefined;
+    defaultProps?: never | undefined;
+    propTypes?: never | undefined;
+}
+export {};

package/helpers/types.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/internal/BaseIcon.js

@@ -6,18 +6,19 @@ var tslib_1 = require("tslib");
 var react_1 = tslib_1.__importStar(require("react"));
 var Icon_1 = require("./Icon");
 var forwardRef_1 = require("../helpers/forwardRef");
+var utils_1 = require("./utils");
+var injectCss_1 = require("./injectCss");
 exports.BaseIcon = forwardRef_1.forwardRef('BaseIcon', function (_a, ref) {
     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"]);
+    var innerRef = react_1.useRef(null);
     react_1.useEffect(function () {
-        var styleId = 'ui-parking-icons-style';
-        if (document.getElementById(styleId) === null) {
-            var style_1 = document.createElement('style');
-            style_1.id = styleId;
-            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        ";
-            document.getElementsByTagName('head')[0].appendChild(style_1);
+        var element = innerRef.current;
+        if (!element) {
+            return;
         }
-    }, []);
-    var icon = (react_1.default.createElement("svg", tslib_1.__assign({ "data-tid": Icon_1.IconDataTids.root, ref: ref, width: size || viewBoxSize, height: size || viewBoxSize, className: "ui-parking-icon-base", style: Object.assign({
+        injectCss_1.injectCss(element);
+    }, [innerRef.current]);
+    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({
             fill: color !== null && color !== void 0 ? color : 'currentColor',
             marginBottom: align === 'none' || align === 'center' ? 0 : '-0.1875em',
             flexShrink: 0,

package/internal/Icon.d.ts

@@ -1,4 +1,6 @@
 import React, { AllHTMLAttributes, AriaAttributes } from 'react';
+import { BaseIconProps as BaseIconPropsWithoutRef, BaseIconRefType } from './BaseIcon';
+import type { ReactUIComponentWithRef } from '../helpers/forwardRef';
 export declare const breakpoints: readonly [16, 20, 24, 32, 64];
 export declare const weights: readonly ["light", "regular", "solid"];
 export declare const MAX_LIGHT_POSITION = 1;
@@ -8,9 +10,9 @@ export declare type IconName = string;
 export declare type IconSize = typeof breakpoints[number];
 export declare type IconWeight = typeof weights[number];
 export declare type IconSizes = Record<number, {
-    light?: React.ReactNode;
-    regular: React.ReactNode;
-    solid?: React.ReactNode;
+    light?: ReactUIComponentWithRef<SVGSVGElement, BaseIconProps>;
+    regular: ReactUIComponentWithRef<SVGSVGElement, BaseIconProps>;
+    solid?: ReactUIComponentWithRef<SVGSVGElement, BaseIconProps>;
 }>;
 interface IconInterface {
     sizes: IconSizes;
@@ -21,6 +23,9 @@ export interface IconProps extends React.SVGAttributes<SVGElement>, Pick<AllHTML
     color?: string;
     align?: 'center' | 'baseline' | 'none';
 }
+interface BaseIconProps extends BaseIconPropsWithoutRef {
+    ref: React.Ref<BaseIconRefType>;
+}
 export declare const DEFAULT_ICON_SIZE: IconSize;
 export declare const DEFAULT_ICON_WEIGHT: IconWeight;
 export declare const IconDataTids: {

package/internal/cssRules.d.ts

@@ -0,0 +1 @@
+export declare const CSSRules: readonly string[];

package/internal/cssRules.js

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CSSRules = void 0;
+exports.CSSRules = [
+    ".ui-parking-icon-centered { \n    display: -webkit-inline-box;\n    display: inline-flex;\n    -webkit-box-align: center;\n    align-items: center; \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  }",
+    ".ui-parking-icon-base { \n    outline: none; \n  }",
+    ".ui-parking-icon-base:focus-visible { \n    outline: blue auto 5px; \n  }",
+];

package/internal/injectCss.d.ts

@@ -0,0 +1,6 @@
+declare global {
+    interface Window {
+        ShadyCSS: any;
+    }
+}
+export declare function injectCss(element: Element): void;

package/internal/injectCss.js

@@ -0,0 +1,64 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.injectCss = void 0;
+var cssRules_1 = require("./cssRules");
+function checkRuleExists(rootNodeStyles, cssText) {
+    return rootNodeStyles.some(function (cssRules) { return Array.from(cssRules).some(function (r) { return r.cssText === cssText; }); });
+}
+/**
+ * ponyfill for old browsers aka ie11, delete after drop support
+ */
+function getRootNode(node) {
+    return typeof Node === 'function' && Object.prototype.hasOwnProperty.call(Node.prototype, 'getRootNode')
+        ? node.getRootNode()
+        : node.ownerDocument;
+}
+/**
+ * Whether the current browser supports `adoptedStyleSheets`.
+ * https://github.com/lit/lit-element/blob/master/src/lib/css-tag.ts#L14
+ */
+var supportsAdoptingStyleSheets = Boolean(typeof window !== 'undefined' &&
+    window.ShadowRoot &&
+    (window.ShadyCSS === undefined || window.ShadyCSS.nativeShadow) &&
+    'adoptedStyleSheets' in Document.prototype &&
+    'replace' in CSSStyleSheet.prototype);
+function injectCss(element) {
+    var _a;
+    var rootNode = getRootNode(element);
+    if (!rootNode) {
+        return;
+    }
+    if (supportsAdoptingStyleSheets) {
+        var currentWindow = element.ownerDocument.defaultView;
+        if (!currentWindow) {
+            return;
+        }
+        var typedRootNode = rootNode;
+        var rootNodeStyles_1 = typedRootNode.adoptedStyleSheets.map(function (item) { return item.cssRules; });
+        var cssRulesStyleSheet_1 = new currentWindow.CSSStyleSheet();
+        cssRules_1.CSSRules.forEach(function (rule) { return cssRulesStyleSheet_1.insertRule(rule); });
+        var filteredStyleSheet_1 = new currentWindow.CSSStyleSheet();
+        Array.from(cssRulesStyleSheet_1.cssRules).forEach(function (cssRule) {
+            if (!checkRuleExists(rootNodeStyles_1, cssRule.cssText)) {
+                filteredStyleSheet_1.insertRule(cssRule.cssText);
+            }
+        });
+        if (filteredStyleSheet_1.cssRules.length > 0) {
+            typedRootNode.adoptedStyleSheets.push(filteredStyleSheet_1);
+        }
+    }
+    else {
+        var styleId = 'ui-parking-icons-style';
+        var isShadowRoot = !!rootNode.host;
+        var rootElement = isShadowRoot ? rootNode.firstElementChild : rootNode;
+        var hasInsertStyles = (_a = rootElement) === null || _a === void 0 ? void 0 : _a.querySelector("#" + styleId);
+        var elementForStyle = isShadowRoot ? rootElement : rootElement.getElementsByTagName('head')[0];
+        if (!hasInsertStyles) {
+            var style = element.ownerDocument.createElement('style');
+            style.id = styleId;
+            style.innerHTML = cssRules_1.CSSRules.join('');
+            elementForStyle === null || elementForStyle === void 0 ? void 0 : elementForStyle.appendChild(style);
+        }
+    }
+}
+exports.injectCss = injectCss;

package/internal/utils.d.ts

@@ -0,0 +1,21 @@
+/**
+ * Проверяет, не является ли переданный аргумент null или undefined и исключает типы null и undefined из типа аргумента
+ *
+ * @param value Значение, которое нужно проверить и исключить из него типы
+ * @returns Возвращает true, если переданный аргумент не является null или undefined иначе false
+ */
+export declare const isNonNullable: <T>(value: T) => value is NonNullable<T>;
+/**
+ * Merges two or more refs into one.
+ *
+ * @param refs Array of refs.
+ * @returns A single ref composing all the refs passed.
+ *
+ * @example
+ * const SomeComponent = forwardRef((props, ref) => {
+ *  const localRef = useRef();
+ *
+ *  return <div ref={mergeRefs([localRef, ref])} />;
+ * });
+ */
+export declare function mergeRefs<T = any>(refs: Array<React.MutableRefObject<T> | React.LegacyRef<T>>): (value: any) => void;

package/internal/utils.js

@@ -0,0 +1,38 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.mergeRefs = exports.isNonNullable = void 0;
+/**
+ * Проверяет, не является ли переданный аргумент null или undefined и исключает типы null и undefined из типа аргумента
+ *
+ * @param value Значение, которое нужно проверить и исключить из него типы
+ * @returns Возвращает true, если переданный аргумент не является null или undefined иначе false
+ */
+exports.isNonNullable = function (value) {
+    return value !== null && value !== undefined;
+};
+/**
+ * Merges two or more refs into one.
+ *
+ * @param refs Array of refs.
+ * @returns A single ref composing all the refs passed.
+ *
+ * @example
+ * const SomeComponent = forwardRef((props, ref) => {
+ *  const localRef = useRef();
+ *
+ *  return <div ref={mergeRefs([localRef, ref])} />;
+ * });
+ */
+function mergeRefs(refs) {
+    return function (value) {
+        refs.forEach(function (ref) {
+            if (typeof ref === 'function') {
+                return ref(value);
+            }
+            else if (exports.isNonNullable(ref)) {
+                return (ref.current = value);
+            }
+        });
+    };
+}
+exports.mergeRefs = mergeRefs;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@skbkontur/icons",
   "description": "react-ui-icons",
-  "version": "1.10.0",
+  "version": "1.11.0-support-shadow-dom.1",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
   },