@ukic/canary-react 2.0.0-canary.12 → 2.0.0-canary.14

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.
@@ -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.12",
6
+ "version": "2.0.0-canary.14",
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.12",
32
- "@ukic/react": "^2.18.0",
33
- "@ukic/web-components": "^2.18.0"
31
+ "@ukic/canary-web-components": "^2.0.0-canary.14",
32
+ "@ukic/react": "^2.19.0",
33
+ "@ukic/web-components": "^2.19.0"
34
34
  },
35
35
  "devDependencies": {
36
36
  "@babel/core": "^7.16.0",
@@ -90,5 +90,6 @@
90
90
  "dist"
91
91
  ]
92
92
  },
93
- "license": "MIT"
93
+ "license": "MIT",
94
+ "gitHead": "5441c917fd593f7797ace93dc674a78006abb775"
94
95
  }
@@ -1,2 +0,0 @@
1
- import { FC } from "react";
2
- export declare const SlottedSVG: FC<any>;
@@ -1,36 +0,0 @@
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
- var __rest = (this && this.__rest) || function (s, e) {
13
- var t = {};
14
- for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
15
- t[p] = s[p];
16
- if (s != null && typeof Object.getOwnPropertySymbols === "function")
17
- for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
18
- if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
19
- t[p[i]] = s[p[i]];
20
- }
21
- return t;
22
- };
23
- import React from "react";
24
- var defaultProps = {
25
- xmlns: "http://www.w3.org/2000/svg",
26
- };
27
- function slot(name) {
28
- if (name === void 0) { name = ""; }
29
- return { ref: function (e) { return (e ? e.setAttribute("slot", name) : null); } };
30
- }
31
- export var SlottedSVG = function (_a) {
32
- var path = _a.path, slotName = _a.slot, children = _a.children, props = __rest(_a, ["path", "slot", "children"]);
33
- return (React.createElement("svg", __assign({}, slot(slotName), props, defaultProps),
34
- !!path && React.createElement("path", { d: path }),
35
- children));
36
- };