@ukic/canary-react 2.0.0-canary.11 → 2.0.0-canary.12
Sign up to get free protection for your applications and to get access to all the features.
- package/dist/components.d.ts +6 -7
- package/dist/components.js +11 -12
- package/dist/core/core.css +1 -1
- package/dist/index.d.ts +1 -1
- package/dist/index.js +1 -1
- package/dist/react-component-lib/createComponent.d.ts +10 -10
- package/dist/react-component-lib/createComponent.js +107 -107
- package/dist/react-component-lib/createOverlayComponent.d.ts +21 -21
- package/dist/react-component-lib/createOverlayComponent.js +190 -190
- package/dist/react-component-lib/index.d.ts +2 -2
- package/dist/react-component-lib/index.js +2 -2
- package/dist/react-component-lib/interfaces.d.ts +29 -29
- package/dist/react-component-lib/interfaces.js +1 -1
- package/dist/react-component-lib/slottedSVG.d.ts +2 -0
- package/dist/react-component-lib/slottedSVG.js +36 -0
- package/dist/react-component-lib/utils/attachProps.d.ts +16 -16
- package/dist/react-component-lib/utils/attachProps.js +108 -108
- package/dist/react-component-lib/utils/case.d.ts +2 -2
- package/dist/react-component-lib/utils/case.js +8 -8
- package/dist/react-component-lib/utils/dev.d.ts +2 -2
- package/dist/react-component-lib/utils/dev.js +12 -12
- package/dist/react-component-lib/utils/index.d.ts +10 -10
- package/dist/react-component-lib/utils/index.js +46 -46
- package/package.json +5 -6
@@ -1,108 +1,108 @@
|
|
1
|
-
import { camelToDashCase } from './case';
|
2
|
-
export var attachProps = function (node, newProps, oldProps) {
|
3
|
-
if (oldProps === void 0) { oldProps = {}; }
|
4
|
-
// some test frameworks don't render DOM elements, so we test here to make sure we are dealing with DOM first
|
5
|
-
if (node instanceof Element) {
|
6
|
-
// add any classes in className to the class list
|
7
|
-
var className = getClassName(node.classList, newProps, oldProps);
|
8
|
-
if (className !== '') {
|
9
|
-
node.className = className;
|
10
|
-
}
|
11
|
-
Object.keys(newProps).forEach(function (name) {
|
12
|
-
if (name === 'children' ||
|
13
|
-
name === 'style' ||
|
14
|
-
name === 'ref' ||
|
15
|
-
name === 'class' ||
|
16
|
-
name === 'className' ||
|
17
|
-
name === 'forwardedRef') {
|
18
|
-
return;
|
19
|
-
}
|
20
|
-
if (name.indexOf('on') === 0 && name[2] === name[2].toUpperCase()) {
|
21
|
-
var eventName = name.substring(2);
|
22
|
-
var eventNameLc = eventName[0].toLowerCase() + eventName.substring(1);
|
23
|
-
if (!isCoveredByReact(eventNameLc)) {
|
24
|
-
syncEvent(node, eventNameLc, newProps[name]);
|
25
|
-
}
|
26
|
-
}
|
27
|
-
else {
|
28
|
-
node[name] = newProps[name];
|
29
|
-
var propType = typeof newProps[name];
|
30
|
-
if (propType === 'string') {
|
31
|
-
node.setAttribute(camelToDashCase(name), newProps[name]);
|
32
|
-
}
|
33
|
-
}
|
34
|
-
});
|
35
|
-
}
|
36
|
-
};
|
37
|
-
export var getClassName = function (classList, newProps, oldProps) {
|
38
|
-
var newClassProp = newProps.className || newProps.class;
|
39
|
-
var oldClassProp = oldProps.className || oldProps.class;
|
40
|
-
// map the classes to Maps for performance
|
41
|
-
var currentClasses = arrayToMap(classList);
|
42
|
-
var incomingPropClasses = arrayToMap(newClassProp ? newClassProp.split(' ') : []);
|
43
|
-
var oldPropClasses = arrayToMap(oldClassProp ? oldClassProp.split(' ') : []);
|
44
|
-
var finalClassNames = [];
|
45
|
-
// loop through each of the current classes on the component
|
46
|
-
// to see if it should be a part of the classNames added
|
47
|
-
currentClasses.forEach(function (currentClass) {
|
48
|
-
if (incomingPropClasses.has(currentClass)) {
|
49
|
-
// add it as its already included in classnames coming in from newProps
|
50
|
-
finalClassNames.push(currentClass);
|
51
|
-
incomingPropClasses.delete(currentClass);
|
52
|
-
}
|
53
|
-
else if (!oldPropClasses.has(currentClass)) {
|
54
|
-
// add it as it has NOT been removed by user
|
55
|
-
finalClassNames.push(currentClass);
|
56
|
-
}
|
57
|
-
});
|
58
|
-
incomingPropClasses.forEach(function (s) { return finalClassNames.push(s); });
|
59
|
-
return finalClassNames.join(' ');
|
60
|
-
};
|
61
|
-
/**
|
62
|
-
* Transforms a React event name to a browser event name.
|
63
|
-
*/
|
64
|
-
export var transformReactEventName = function (eventNameSuffix) {
|
65
|
-
switch (eventNameSuffix) {
|
66
|
-
case 'doubleclick':
|
67
|
-
return 'dblclick';
|
68
|
-
}
|
69
|
-
return eventNameSuffix;
|
70
|
-
};
|
71
|
-
/**
|
72
|
-
* Checks if an event is supported in the current execution environment.
|
73
|
-
* @license Modernizr 3.0.0pre (Custom Build) | MIT
|
74
|
-
*/
|
75
|
-
export var isCoveredByReact = function (eventNameSuffix) {
|
76
|
-
if (typeof document === 'undefined') {
|
77
|
-
return true;
|
78
|
-
}
|
79
|
-
else {
|
80
|
-
var eventName = 'on' + transformReactEventName(eventNameSuffix);
|
81
|
-
var isSupported = eventName in document;
|
82
|
-
if (!isSupported) {
|
83
|
-
var element = document.createElement('div');
|
84
|
-
element.setAttribute(eventName, 'return;');
|
85
|
-
isSupported = typeof element[eventName] === 'function';
|
86
|
-
}
|
87
|
-
return isSupported;
|
88
|
-
}
|
89
|
-
};
|
90
|
-
export var syncEvent = function (node, eventName, newEventHandler) {
|
91
|
-
var eventStore = node.__events || (node.__events = {});
|
92
|
-
var oldEventHandler = eventStore[eventName];
|
93
|
-
// Remove old listener so they don't double up.
|
94
|
-
if (oldEventHandler) {
|
95
|
-
node.removeEventListener(eventName, oldEventHandler);
|
96
|
-
}
|
97
|
-
// Bind new listener.
|
98
|
-
node.addEventListener(eventName, (eventStore[eventName] = function handler(e) {
|
99
|
-
if (newEventHandler) {
|
100
|
-
newEventHandler.call(this, e);
|
101
|
-
}
|
102
|
-
}));
|
103
|
-
};
|
104
|
-
var arrayToMap = function (arr) {
|
105
|
-
var map = new Map();
|
106
|
-
arr.forEach(function (s) { return map.set(s, s); });
|
107
|
-
return map;
|
108
|
-
};
|
1
|
+
import { camelToDashCase } from './case';
|
2
|
+
export var attachProps = function (node, newProps, oldProps) {
|
3
|
+
if (oldProps === void 0) { oldProps = {}; }
|
4
|
+
// some test frameworks don't render DOM elements, so we test here to make sure we are dealing with DOM first
|
5
|
+
if (node instanceof Element) {
|
6
|
+
// add any classes in className to the class list
|
7
|
+
var className = getClassName(node.classList, newProps, oldProps);
|
8
|
+
if (className !== '') {
|
9
|
+
node.className = className;
|
10
|
+
}
|
11
|
+
Object.keys(newProps).forEach(function (name) {
|
12
|
+
if (name === 'children' ||
|
13
|
+
name === 'style' ||
|
14
|
+
name === 'ref' ||
|
15
|
+
name === 'class' ||
|
16
|
+
name === 'className' ||
|
17
|
+
name === 'forwardedRef') {
|
18
|
+
return;
|
19
|
+
}
|
20
|
+
if (name.indexOf('on') === 0 && name[2] === name[2].toUpperCase()) {
|
21
|
+
var eventName = name.substring(2);
|
22
|
+
var eventNameLc = eventName[0].toLowerCase() + eventName.substring(1);
|
23
|
+
if (!isCoveredByReact(eventNameLc)) {
|
24
|
+
syncEvent(node, eventNameLc, newProps[name]);
|
25
|
+
}
|
26
|
+
}
|
27
|
+
else {
|
28
|
+
node[name] = newProps[name];
|
29
|
+
var propType = typeof newProps[name];
|
30
|
+
if (propType === 'string') {
|
31
|
+
node.setAttribute(camelToDashCase(name), newProps[name]);
|
32
|
+
}
|
33
|
+
}
|
34
|
+
});
|
35
|
+
}
|
36
|
+
};
|
37
|
+
export var getClassName = function (classList, newProps, oldProps) {
|
38
|
+
var newClassProp = newProps.className || newProps.class;
|
39
|
+
var oldClassProp = oldProps.className || oldProps.class;
|
40
|
+
// map the classes to Maps for performance
|
41
|
+
var currentClasses = arrayToMap(classList);
|
42
|
+
var incomingPropClasses = arrayToMap(newClassProp ? newClassProp.split(' ') : []);
|
43
|
+
var oldPropClasses = arrayToMap(oldClassProp ? oldClassProp.split(' ') : []);
|
44
|
+
var finalClassNames = [];
|
45
|
+
// loop through each of the current classes on the component
|
46
|
+
// to see if it should be a part of the classNames added
|
47
|
+
currentClasses.forEach(function (currentClass) {
|
48
|
+
if (incomingPropClasses.has(currentClass)) {
|
49
|
+
// add it as its already included in classnames coming in from newProps
|
50
|
+
finalClassNames.push(currentClass);
|
51
|
+
incomingPropClasses.delete(currentClass);
|
52
|
+
}
|
53
|
+
else if (!oldPropClasses.has(currentClass)) {
|
54
|
+
// add it as it has NOT been removed by user
|
55
|
+
finalClassNames.push(currentClass);
|
56
|
+
}
|
57
|
+
});
|
58
|
+
incomingPropClasses.forEach(function (s) { return finalClassNames.push(s); });
|
59
|
+
return finalClassNames.join(' ');
|
60
|
+
};
|
61
|
+
/**
|
62
|
+
* Transforms a React event name to a browser event name.
|
63
|
+
*/
|
64
|
+
export var transformReactEventName = function (eventNameSuffix) {
|
65
|
+
switch (eventNameSuffix) {
|
66
|
+
case 'doubleclick':
|
67
|
+
return 'dblclick';
|
68
|
+
}
|
69
|
+
return eventNameSuffix;
|
70
|
+
};
|
71
|
+
/**
|
72
|
+
* Checks if an event is supported in the current execution environment.
|
73
|
+
* @license Modernizr 3.0.0pre (Custom Build) | MIT
|
74
|
+
*/
|
75
|
+
export var isCoveredByReact = function (eventNameSuffix) {
|
76
|
+
if (typeof document === 'undefined') {
|
77
|
+
return true;
|
78
|
+
}
|
79
|
+
else {
|
80
|
+
var eventName = 'on' + transformReactEventName(eventNameSuffix);
|
81
|
+
var isSupported = eventName in document;
|
82
|
+
if (!isSupported) {
|
83
|
+
var element = document.createElement('div');
|
84
|
+
element.setAttribute(eventName, 'return;');
|
85
|
+
isSupported = typeof element[eventName] === 'function';
|
86
|
+
}
|
87
|
+
return isSupported;
|
88
|
+
}
|
89
|
+
};
|
90
|
+
export var syncEvent = function (node, eventName, newEventHandler) {
|
91
|
+
var eventStore = node.__events || (node.__events = {});
|
92
|
+
var oldEventHandler = eventStore[eventName];
|
93
|
+
// Remove old listener so they don't double up.
|
94
|
+
if (oldEventHandler) {
|
95
|
+
node.removeEventListener(eventName, oldEventHandler);
|
96
|
+
}
|
97
|
+
// Bind new listener.
|
98
|
+
node.addEventListener(eventName, (eventStore[eventName] = function handler(e) {
|
99
|
+
if (newEventHandler) {
|
100
|
+
newEventHandler.call(this, e);
|
101
|
+
}
|
102
|
+
}));
|
103
|
+
};
|
104
|
+
var arrayToMap = function (arr) {
|
105
|
+
var map = new Map();
|
106
|
+
arr.forEach(function (s) { return map.set(s, s); });
|
107
|
+
return map;
|
108
|
+
};
|
@@ -1,2 +1,2 @@
|
|
1
|
-
export declare const dashToPascalCase: (str: string) => string;
|
2
|
-
export declare const camelToDashCase: (str: string) => string;
|
1
|
+
export declare const dashToPascalCase: (str: string) => string;
|
2
|
+
export declare const camelToDashCase: (str: string) => string;
|
@@ -1,8 +1,8 @@
|
|
1
|
-
export var dashToPascalCase = function (str) {
|
2
|
-
return str
|
3
|
-
.toLowerCase()
|
4
|
-
.split('-')
|
5
|
-
.map(function (segment) { return segment.charAt(0).toUpperCase() + segment.slice(1); })
|
6
|
-
.join('');
|
7
|
-
};
|
8
|
-
export var camelToDashCase = function (str) { return str.replace(/([A-Z])/g, function (m) { return "-".concat(m[0].toLowerCase()); }); };
|
1
|
+
export var dashToPascalCase = function (str) {
|
2
|
+
return str
|
3
|
+
.toLowerCase()
|
4
|
+
.split('-')
|
5
|
+
.map(function (segment) { return segment.charAt(0).toUpperCase() + segment.slice(1); })
|
6
|
+
.join('');
|
7
|
+
};
|
8
|
+
export var camelToDashCase = function (str) { return str.replace(/([A-Z])/g, function (m) { return "-".concat(m[0].toLowerCase()); }); };
|
@@ -1,2 +1,2 @@
|
|
1
|
-
export declare const isDevMode: () => boolean;
|
2
|
-
export declare const deprecationWarning: (key: string, message: string) => void;
|
1
|
+
export declare const isDevMode: () => boolean;
|
2
|
+
export declare const deprecationWarning: (key: string, message: string) => void;
|
@@ -1,12 +1,12 @@
|
|
1
|
-
export var isDevMode = function () {
|
2
|
-
return process && process.env && process.env.NODE_ENV === 'development';
|
3
|
-
};
|
4
|
-
var warnings = {};
|
5
|
-
export var deprecationWarning = function (key, message) {
|
6
|
-
if (isDevMode()) {
|
7
|
-
if (!warnings[key]) {
|
8
|
-
console.warn(message);
|
9
|
-
warnings[key] = true;
|
10
|
-
}
|
11
|
-
}
|
12
|
-
};
|
1
|
+
export var isDevMode = function () {
|
2
|
+
return process && process.env && process.env.NODE_ENV === 'development';
|
3
|
+
};
|
4
|
+
var warnings = {};
|
5
|
+
export var deprecationWarning = function (key, message) {
|
6
|
+
if (isDevMode()) {
|
7
|
+
if (!warnings[key]) {
|
8
|
+
console.warn(message);
|
9
|
+
warnings[key] = true;
|
10
|
+
}
|
11
|
+
}
|
12
|
+
};
|
@@ -1,10 +1,10 @@
|
|
1
|
-
import React from 'react';
|
2
|
-
import type { StyleReactProps } from '../interfaces';
|
3
|
-
export type StencilReactExternalProps<PropType, ElementType> = PropType & Omit<React.HTMLAttributes<ElementType>, 'style'> & StyleReactProps;
|
4
|
-
export type StencilReactForwardedRef<T> = ((instance: T | null) => void) | React.MutableRefObject<T | null> | null;
|
5
|
-
export declare const setRef: (ref: StencilReactForwardedRef<any> | React.Ref<any> | undefined, value: any) => void;
|
6
|
-
export declare const mergeRefs: (...refs: (StencilReactForwardedRef<any> | React.Ref<any> | undefined)[]) => React.RefCallback<any>;
|
7
|
-
export declare const createForwardRef: <PropType, ElementType>(ReactComponent: any, displayName: string) => React.ForwardRefExoticComponent<React.PropsWithoutRef<PropType & Omit<React.HTMLAttributes<ElementType>, "style"> & StyleReactProps> & React.RefAttributes<ElementType>>;
|
8
|
-
export declare const defineCustomElement: (tagName: string, customElement: any) => void;
|
9
|
-
export * from './attachProps';
|
10
|
-
export * from './case';
|
1
|
+
import React from 'react';
|
2
|
+
import type { StyleReactProps } from '../interfaces';
|
3
|
+
export type StencilReactExternalProps<PropType, ElementType> = PropType & Omit<React.HTMLAttributes<ElementType>, 'style'> & StyleReactProps;
|
4
|
+
export type StencilReactForwardedRef<T> = ((instance: T | null) => void) | React.MutableRefObject<T | null> | null;
|
5
|
+
export declare const setRef: (ref: StencilReactForwardedRef<any> | React.Ref<any> | undefined, value: any) => void;
|
6
|
+
export declare const mergeRefs: (...refs: (StencilReactForwardedRef<any> | React.Ref<any> | undefined)[]) => React.RefCallback<any>;
|
7
|
+
export declare const createForwardRef: <PropType, ElementType>(ReactComponent: any, displayName: string) => React.ForwardRefExoticComponent<React.PropsWithoutRef<PropType & Omit<React.HTMLAttributes<ElementType>, "style"> & StyleReactProps> & React.RefAttributes<ElementType>>;
|
8
|
+
export declare const defineCustomElement: (tagName: string, customElement: any) => void;
|
9
|
+
export * from './attachProps';
|
10
|
+
export * from './case';
|
@@ -1,46 +1,46 @@
|
|
1
|
-
var __assign = (this && this.__assign) || function () {
|
2
|
-
__assign = Object.assign || function(t) {
|
3
|
-
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
4
|
-
s = arguments[i];
|
5
|
-
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
|
6
|
-
t[p] = s[p];
|
7
|
-
}
|
8
|
-
return t;
|
9
|
-
};
|
10
|
-
return __assign.apply(this, arguments);
|
11
|
-
};
|
12
|
-
import React from 'react';
|
13
|
-
export var setRef = function (ref, value) {
|
14
|
-
if (typeof ref === 'function') {
|
15
|
-
ref(value);
|
16
|
-
}
|
17
|
-
else if (ref != null) {
|
18
|
-
// Cast as a MutableRef so we can assign current
|
19
|
-
ref.current = value;
|
20
|
-
}
|
21
|
-
};
|
22
|
-
export var mergeRefs = function () {
|
23
|
-
var refs = [];
|
24
|
-
for (var _i = 0; _i < arguments.length; _i++) {
|
25
|
-
refs[_i] = arguments[_i];
|
26
|
-
}
|
27
|
-
return function (value) {
|
28
|
-
refs.forEach(function (ref) {
|
29
|
-
setRef(ref, value);
|
30
|
-
});
|
31
|
-
};
|
32
|
-
};
|
33
|
-
export var createForwardRef = function (ReactComponent, displayName) {
|
34
|
-
var forwardRef = function (props, ref) {
|
35
|
-
return React.createElement(ReactComponent, __assign({}, props, { forwardedRef: ref }));
|
36
|
-
};
|
37
|
-
forwardRef.displayName = displayName;
|
38
|
-
return React.forwardRef(forwardRef);
|
39
|
-
};
|
40
|
-
export var defineCustomElement = function (tagName, customElement) {
|
41
|
-
if (customElement !== undefined && typeof customElements !== 'undefined' && !customElements.get(tagName)) {
|
42
|
-
customElements.define(tagName, customElement);
|
43
|
-
}
|
44
|
-
};
|
45
|
-
export * from './attachProps';
|
46
|
-
export * from './case';
|
1
|
+
var __assign = (this && this.__assign) || function () {
|
2
|
+
__assign = Object.assign || function(t) {
|
3
|
+
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
4
|
+
s = arguments[i];
|
5
|
+
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
|
6
|
+
t[p] = s[p];
|
7
|
+
}
|
8
|
+
return t;
|
9
|
+
};
|
10
|
+
return __assign.apply(this, arguments);
|
11
|
+
};
|
12
|
+
import React from 'react';
|
13
|
+
export var setRef = function (ref, value) {
|
14
|
+
if (typeof ref === 'function') {
|
15
|
+
ref(value);
|
16
|
+
}
|
17
|
+
else if (ref != null) {
|
18
|
+
// Cast as a MutableRef so we can assign current
|
19
|
+
ref.current = value;
|
20
|
+
}
|
21
|
+
};
|
22
|
+
export var mergeRefs = function () {
|
23
|
+
var refs = [];
|
24
|
+
for (var _i = 0; _i < arguments.length; _i++) {
|
25
|
+
refs[_i] = arguments[_i];
|
26
|
+
}
|
27
|
+
return function (value) {
|
28
|
+
refs.forEach(function (ref) {
|
29
|
+
setRef(ref, value);
|
30
|
+
});
|
31
|
+
};
|
32
|
+
};
|
33
|
+
export var createForwardRef = function (ReactComponent, displayName) {
|
34
|
+
var forwardRef = function (props, ref) {
|
35
|
+
return React.createElement(ReactComponent, __assign({}, props, { forwardedRef: ref }));
|
36
|
+
};
|
37
|
+
forwardRef.displayName = displayName;
|
38
|
+
return React.forwardRef(forwardRef);
|
39
|
+
};
|
40
|
+
export var defineCustomElement = function (tagName, customElement) {
|
41
|
+
if (customElement !== undefined && typeof customElements !== 'undefined' && !customElements.get(tagName)) {
|
42
|
+
customElements.define(tagName, customElement);
|
43
|
+
}
|
44
|
+
};
|
45
|
+
export * from './attachProps';
|
46
|
+
export * from './case';
|
package/package.json
CHANGED
@@ -3,7 +3,7 @@
|
|
3
3
|
"sideEffects": [
|
4
4
|
"*.css"
|
5
5
|
],
|
6
|
-
"version": "2.0.0-canary.
|
6
|
+
"version": "2.0.0-canary.12",
|
7
7
|
"description": "React-wrapped web components compiled using StencilJS",
|
8
8
|
"scripts": {
|
9
9
|
"build": "npm run clean && npm run compile && npm run copy:core-css && npm run copy:normalize-css",
|
@@ -28,9 +28,9 @@
|
|
28
28
|
"dist/"
|
29
29
|
],
|
30
30
|
"dependencies": {
|
31
|
-
"@ukic/canary-web-components": "^2.0.0-canary.
|
32
|
-
"@ukic/react": "^2.
|
33
|
-
"@ukic/web-components": "^2.
|
31
|
+
"@ukic/canary-web-components": "^2.0.0-canary.12",
|
32
|
+
"@ukic/react": "^2.18.0",
|
33
|
+
"@ukic/web-components": "^2.18.0"
|
34
34
|
},
|
35
35
|
"devDependencies": {
|
36
36
|
"@babel/core": "^7.16.0",
|
@@ -90,6 +90,5 @@
|
|
90
90
|
"dist"
|
91
91
|
]
|
92
92
|
},
|
93
|
-
"license": "MIT"
|
94
|
-
"gitHead": "3a062cfa85a5a6eb33b7988e2c9e6b93924b0692"
|
93
|
+
"license": "MIT"
|
95
94
|
}
|