@cloudflare/style-container 7.8.46 → 7.9.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/CHANGELOG.md +1032 -2869
- package/dist/createStyledComponent.d.ts +2 -2
- package/es/applyStaticStyles.js +11 -7
- package/es/applyTheme.js +7 -6
- package/es/createComponent.js +3 -5
- package/es/createComponentStyles.js +1 -1
- package/es/createStyledComponent.js +47 -47
- package/es/index.js +1 -1
- package/es/isValidElementProp.js +25 -23
- package/es/mergeThemes.js +5 -1
- package/es/withRenderer.js +3 -3
- package/lib/applyStaticStyles.js +6 -4
- package/lib/applyTheme.js +23 -20
- package/lib/createComponent.js +2 -4
- package/lib/createStyledComponent.js +18 -31
- package/lib/index.js +24 -23
- package/lib/isValidElementProp.js +5 -3
- package/lib/types.js +1 -1
- package/lib/withRenderer.js +4 -4
- package/package.json +7 -7
|
@@ -19,13 +19,13 @@ declare const shorthandSpacingProps: {
|
|
|
19
19
|
};
|
|
20
20
|
declare type ShorthandToLonghandMap = typeof shorthandSpacingProps;
|
|
21
21
|
declare type ShorthandSpacingProp = keyof ShorthandToLonghandMap;
|
|
22
|
-
declare const spacingProps: ("p" | "margin" | "
|
|
22
|
+
declare const spacingProps: ("p" | "margin" | "marginLeft" | "marginRight" | "marginTop" | "marginBottom" | "padding" | "paddingLeft" | "paddingRight" | "paddingTop" | "paddingBottom" | "gap" | "m" | "ml" | "mr" | "mt" | "mb" | "mx" | "my" | "pl" | "pr" | "pt" | "pb" | "px" | "py")[];
|
|
23
23
|
declare const sizeProps: readonly ["width", "height", "minWidth", "minHeight", "maxWidth", "maxHeight"];
|
|
24
24
|
declare const colorProps: readonly ["color", "backgroundColor", "borderColor", "borderLeftColor", "borderRightColor", "borderTopColor", "borderBottomColor"];
|
|
25
25
|
declare const borderStyleProps: readonly ["borderStyle", "borderTopStyle", "borderBottomStyle", "borderLeftStyle", "borderRightStyle"];
|
|
26
26
|
declare const borderWidthProps: readonly ["borderWidth", "borderTopWidth", "borderBottomWidth", "borderLeftWidth", "borderRightWidth"];
|
|
27
27
|
declare const borderRadiusProps: readonly ["borderRadius", "borderTopLeftRadius", "borderTopRightRadius", "borderBottomLeftRadius", "borderbottomRightRadius"];
|
|
28
|
-
export declare const styleRuleProps: ("p" | "color" | "height" | "width" | "cursor" | "display" | "fontSize" | "fontWeight" | "textDecoration" | "
|
|
28
|
+
export declare const styleRuleProps: ("p" | "color" | "height" | "width" | "cursor" | "display" | "fontSize" | "fontWeight" | "textDecoration" | "borderColor" | "margin" | "marginLeft" | "marginRight" | "marginTop" | "marginBottom" | "padding" | "paddingLeft" | "paddingRight" | "paddingTop" | "paddingBottom" | "gap" | "m" | "ml" | "mr" | "mt" | "mb" | "mx" | "my" | "pl" | "pr" | "pt" | "pb" | "px" | "py" | "minWidth" | "minHeight" | "maxWidth" | "maxHeight" | "backgroundColor" | "borderLeftColor" | "borderRightColor" | "borderTopColor" | "borderBottomColor" | "borderStyle" | "borderTopStyle" | "borderBottomStyle" | "borderLeftStyle" | "borderRightStyle" | "borderWidth" | "borderTopWidth" | "borderBottomWidth" | "borderLeftWidth" | "borderRightWidth" | "borderRadius" | "borderTopLeftRadius" | "borderTopRightRadius" | "borderBottomLeftRadius" | "borderbottomRightRadius" | "textAlign" | "verticalAlign" | "alignItems" | "alignSelf" | "justifyContent" | "textTransform" | "boxSizing" | "flexDirection" | "flexBasis" | "flexGrow")[];
|
|
29
29
|
export declare function filterStyleProps<Type extends {}>(props: Type): Type;
|
|
30
30
|
declare type StyleRuleProp = typeof styleRuleProps[number];
|
|
31
31
|
declare type ExpandedCSSProperty<P extends StyleRuleProp> = P extends ShorthandSpacingProp ? ShorthandToLonghandMap[P][0] : P;
|
package/es/applyStaticStyles.js
CHANGED
|
@@ -1,3 +1,5 @@
|
|
|
1
|
+
var _excluded = ["theme"];
|
|
2
|
+
|
|
1
3
|
function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
|
|
2
4
|
|
|
3
5
|
function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
|
|
@@ -9,20 +11,22 @@ import { withTheme, RendererContext } from 'react-fela'; // eslint-disable-line
|
|
|
9
11
|
import getReactDisplayName from 'react-display-name';
|
|
10
12
|
|
|
11
13
|
function applyStaticStyles(staticStyles, ComponentToWrap) {
|
|
12
|
-
|
|
14
|
+
var CompWithStaticStyles = _ref => {
|
|
13
15
|
var _renderer$renderStati;
|
|
14
16
|
|
|
15
|
-
|
|
16
|
-
|
|
17
|
+
var {
|
|
18
|
+
theme
|
|
19
|
+
} = _ref,
|
|
20
|
+
passThroughProps = _objectWithoutProperties(_ref, _excluded);
|
|
17
21
|
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
22
|
+
var renderer = useContext(RendererContext);
|
|
23
|
+
var contextTheme = theme || {};
|
|
24
|
+
var result = typeof staticStyles === 'function' ? staticStyles(contextTheme) : staticStyles;
|
|
21
25
|
renderer === null || renderer === void 0 ? void 0 : (_renderer$renderStati = renderer.renderStatic) === null || _renderer$renderStati === void 0 ? void 0 : _renderer$renderStati.call(renderer, result);
|
|
22
26
|
return /*#__PURE__*/React.createElement(ComponentToWrap, passThroughProps);
|
|
23
27
|
};
|
|
24
28
|
|
|
25
|
-
|
|
29
|
+
var WithThemeHOC = withTheme(CompWithStaticStyles);
|
|
26
30
|
WithThemeHOC.displayName = getReactDisplayName(ComponentToWrap);
|
|
27
31
|
return WithThemeHOC;
|
|
28
32
|
}
|
package/es/applyTheme.js
CHANGED
|
@@ -7,7 +7,11 @@ import { withTheme, ThemeProvider } from 'react-fela'; // eslint-disable-line be
|
|
|
7
7
|
import mergeThemes from './mergeThemes';
|
|
8
8
|
import getReactDisplayName from 'react-display-name';
|
|
9
9
|
|
|
10
|
-
function applyTheme(ComponentToWrap
|
|
10
|
+
function applyTheme(ComponentToWrap) {
|
|
11
|
+
for (var _len = arguments.length, themes = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
|
|
12
|
+
themes[_key - 1] = arguments[_key];
|
|
13
|
+
}
|
|
14
|
+
|
|
11
15
|
if (!ComponentToWrap) {
|
|
12
16
|
throw new InvalidComponentError(ComponentToWrap);
|
|
13
17
|
}
|
|
@@ -23,7 +27,7 @@ function applyTheme(ComponentToWrap, ...themes) {
|
|
|
23
27
|
|
|
24
28
|
_defineProperty(ThemedComponent, "_isFelaComponent", true);
|
|
25
29
|
|
|
26
|
-
|
|
30
|
+
var WithThemeHOC = withTheme(ThemedComponent);
|
|
27
31
|
WithThemeHOC.displayName = getReactDisplayName(ComponentToWrap);
|
|
28
32
|
return WithThemeHOC;
|
|
29
33
|
}
|
|
@@ -31,10 +35,7 @@ function applyTheme(ComponentToWrap, ...themes) {
|
|
|
31
35
|
export default applyTheme;
|
|
32
36
|
export class InvalidComponentError extends Error {
|
|
33
37
|
constructor(component) {
|
|
34
|
-
super(
|
|
35
|
-
|
|
36
|
-
_defineProperty(this, "component", void 0);
|
|
37
|
-
|
|
38
|
+
super("applyTheme received an invalid first argument: ".concat(component));
|
|
38
39
|
this.component = component;
|
|
39
40
|
}
|
|
40
41
|
|
package/es/createComponent.js
CHANGED
|
@@ -2,15 +2,13 @@ import isValidElementProp from './isValidElementProp';
|
|
|
2
2
|
import { createComponent as createFelaComponent } from 'react-fela';
|
|
3
3
|
import getReactDisplayName from 'react-display-name';
|
|
4
4
|
import { objectKeys } from './types';
|
|
5
|
-
|
|
5
|
+
var EMPTY_PASSTHROUGH_PROPS = []; // the order of these overloads is important to allow the compiler to
|
|
6
6
|
// correctly resolve to the right function signature
|
|
7
7
|
|
|
8
8
|
function createComponent(rule, base, passthroughProps) {
|
|
9
|
-
var
|
|
9
|
+
var _base = base !== null && base !== void 0 ? base : 'div';
|
|
10
10
|
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
const Component = createFelaComponent(rule, _base, (_passthroughProps = passthroughProps) !== null && _passthroughProps !== void 0 ? _passthroughProps : _base._isFelaComponent ? // fela merges the passthrough props of nested style components,
|
|
11
|
+
var Component = createFelaComponent(rule, _base, passthroughProps !== null && passthroughProps !== void 0 ? passthroughProps : _base._isFelaComponent ? // fela merges the passthrough props of nested style components,
|
|
14
12
|
// so if we're wrapping another style component we want to defer
|
|
15
13
|
// determining passthrough props to a leaf-level component
|
|
16
14
|
EMPTY_PASSTHROUGH_PROPS : typeof _base !== 'string' ? // A plain React component
|
|
@@ -2,7 +2,7 @@ import { connect } from 'react-fela'; // eslint-disable-line behance/no-deprecat
|
|
|
2
2
|
|
|
3
3
|
import getReactDisplayName from 'react-display-name';
|
|
4
4
|
export function createComponentStyles(styleFunctions, component) {
|
|
5
|
-
|
|
5
|
+
var ConnectedComponent = connect(styleFunctions)(component);
|
|
6
6
|
ConnectedComponent.displayName = getReactDisplayName(component);
|
|
7
7
|
return ConnectedComponent;
|
|
8
8
|
}
|
|
@@ -1,4 +1,6 @@
|
|
|
1
|
-
function
|
|
1
|
+
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
|
|
2
|
+
|
|
3
|
+
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
|
|
2
4
|
|
|
3
5
|
function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
|
|
4
6
|
|
|
@@ -9,10 +11,10 @@ import createComponent from './createComponent';
|
|
|
9
11
|
import { variables as theme } from '@cloudflare/style-const'; // eslint-disable-line behance/no-deprecated
|
|
10
12
|
|
|
11
13
|
import { objectKeys } from './types';
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
14
|
+
var sizePropType = PropTypes.oneOfType([PropTypes.string, PropTypes.array, PropTypes.number]);
|
|
15
|
+
var scalePropType = PropTypes.oneOfType([PropTypes.string, PropTypes.number, PropTypes.array]);
|
|
16
|
+
var longhandSpacingProps = ['margin', 'marginLeft', 'marginRight', 'marginTop', 'marginBottom', 'padding', 'paddingLeft', 'paddingRight', 'paddingTop', 'paddingBottom', 'gap'];
|
|
17
|
+
var shorthandSpacingProps = {
|
|
16
18
|
m: ['margin'],
|
|
17
19
|
ml: ['marginLeft'],
|
|
18
20
|
mr: ['marginRight'],
|
|
@@ -28,19 +30,19 @@ const shorthandSpacingProps = {
|
|
|
28
30
|
px: ['paddingLeft', 'paddingRight'],
|
|
29
31
|
py: ['paddingTop', 'paddingBottom']
|
|
30
32
|
};
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
export
|
|
39
|
-
|
|
33
|
+
var spacingProps = [...longhandSpacingProps, ...objectKeys(shorthandSpacingProps)];
|
|
34
|
+
var sizeProps = ['width', 'height', 'minWidth', 'minHeight', 'maxWidth', 'maxHeight'];
|
|
35
|
+
var colorProps = ['color', 'backgroundColor', 'borderColor', 'borderLeftColor', 'borderRightColor', 'borderTopColor', 'borderBottomColor'];
|
|
36
|
+
var borderStyleProps = ['borderStyle', 'borderTopStyle', 'borderBottomStyle', 'borderLeftStyle', 'borderRightStyle'];
|
|
37
|
+
var borderWidthProps = ['borderWidth', 'borderTopWidth', 'borderBottomWidth', 'borderLeftWidth', 'borderRightWidth'];
|
|
38
|
+
var borderRadiusProps = ['borderRadius', 'borderTopLeftRadius', 'borderTopRightRadius', 'borderBottomLeftRadius', 'borderbottomRightRadius'];
|
|
39
|
+
var additionalProps = ['fontSize', 'fontWeight', 'textAlign', 'display', 'width', 'verticalAlign', 'alignItems', 'alignSelf', 'justifyContent', 'textDecoration', 'textTransform', 'boxSizing', 'cursor', 'flexDirection', 'flexBasis', 'flexGrow'];
|
|
40
|
+
export var styleRuleProps = [...spacingProps, ...sizeProps, ...colorProps, ...borderStyleProps, ...borderWidthProps, ...borderRadiusProps, ...additionalProps];
|
|
41
|
+
var stylesRulePropsSet = new Set(styleRuleProps); // Function to remove styling attributes from a Props object
|
|
40
42
|
|
|
41
43
|
export function filterStyleProps(props) {
|
|
42
|
-
|
|
43
|
-
|
|
44
|
+
var newProps;
|
|
45
|
+
var properties = Object.keys(props);
|
|
44
46
|
properties.forEach(property => {
|
|
45
47
|
if (stylesRulePropsSet.has(property)) {
|
|
46
48
|
newProps = newProps || _objectSpread({}, props);
|
|
@@ -51,10 +53,10 @@ export function filterStyleProps(props) {
|
|
|
51
53
|
}
|
|
52
54
|
// gotta broaden from Set<StyleRuleProp> to a ReadonlySet<string> so we can check
|
|
53
55
|
// if arbitrary strings are in it via propsSet.has(maybeStyleRuleProp)
|
|
54
|
-
|
|
56
|
+
var propsSet = new Set(styleRuleProps); // Function to construct the prop types object
|
|
55
57
|
|
|
56
|
-
|
|
57
|
-
|
|
58
|
+
var makePropTypes = () => {
|
|
59
|
+
var propTypes = {
|
|
58
60
|
fontSize: scalePropType,
|
|
59
61
|
textAlign: sizePropType,
|
|
60
62
|
display: sizePropType,
|
|
@@ -62,59 +64,59 @@ const makePropTypes = () => {
|
|
|
62
64
|
verticalAlign: sizePropType
|
|
63
65
|
};
|
|
64
66
|
|
|
65
|
-
for (
|
|
67
|
+
for (var prop of [...spacingProps, ...borderWidthProps, ...borderRadiusProps]) {
|
|
66
68
|
propTypes[prop] = scalePropType;
|
|
67
69
|
}
|
|
68
70
|
|
|
69
|
-
for (
|
|
70
|
-
propTypes[
|
|
71
|
+
for (var _prop of [...colorProps, ...borderStyleProps]) {
|
|
72
|
+
propTypes[_prop] = PropTypes.string;
|
|
71
73
|
}
|
|
72
74
|
|
|
73
|
-
for (
|
|
74
|
-
propTypes[
|
|
75
|
+
for (var _prop2 of sizeProps) {
|
|
76
|
+
propTypes[_prop2] = sizePropType;
|
|
75
77
|
}
|
|
76
78
|
|
|
77
79
|
return propTypes;
|
|
78
80
|
};
|
|
79
81
|
|
|
80
|
-
|
|
82
|
+
var styledPropTypes = makePropTypes(); // Fela rule which turns component props into a style object
|
|
81
83
|
|
|
82
|
-
|
|
84
|
+
var propsRule = props => Object.keys(props).filter(prop => propsSet.has(prop)).reduce((o, prop) => (o[prop] = props[prop], o), {}); // Static breakpoints
|
|
83
85
|
|
|
84
86
|
|
|
85
|
-
|
|
87
|
+
var bp = [null, "tablet", "desktop"]; // Ensure value is an array
|
|
86
88
|
|
|
87
|
-
|
|
89
|
+
var arr = n => Array.isArray(n) ? n : [n]; // Wrap a value in an object with a property name
|
|
88
90
|
// assignValueToProperty("margin")(32) returns {margin: 32}
|
|
89
91
|
|
|
90
92
|
|
|
91
|
-
|
|
93
|
+
var assignValueToProperty = property => val => ({
|
|
92
94
|
[property]: val
|
|
93
95
|
}); // Transform object array into breakpoint syntax
|
|
94
96
|
// [{margin: 32}, {margin: 64}] into [{margin: 32}, {"@media screen and (min-width: )": {margin: 64}}]
|
|
95
97
|
|
|
96
98
|
|
|
97
|
-
|
|
99
|
+
var media = (style, i) => {
|
|
98
100
|
if (style === null || style === undefined) return null;
|
|
99
|
-
|
|
101
|
+
var breakpoint = bp[i];
|
|
100
102
|
return breakpoint ? {
|
|
101
103
|
[breakpoint]: style
|
|
102
104
|
} : style;
|
|
103
105
|
};
|
|
104
106
|
|
|
105
107
|
// Recursive object merge
|
|
106
|
-
|
|
108
|
+
var merge = (a, b) => Object.assign({}, a, b, Object.keys(b).reduce((obj, key) => Object.assign(obj, {
|
|
107
109
|
[key]: a[key] !== null && typeof a[key] === 'object' ? merge(a[key], b[key]) : b[key]
|
|
108
110
|
}), {}));
|
|
109
111
|
|
|
110
|
-
|
|
111
|
-
|
|
112
|
+
var processRules = customRules => {
|
|
113
|
+
var rules = _objectSpread({}, customRules); // Expand shorthand spacing properties
|
|
112
114
|
|
|
113
115
|
|
|
114
116
|
['padding', 'margin'].forEach(property => {
|
|
115
117
|
if (rules.hasOwnProperty(property)) {
|
|
116
118
|
['Top', 'Bottom', 'Left', 'Right'].forEach(position => {
|
|
117
|
-
|
|
119
|
+
var attr = "".concat(property).concat(position); // Don't overwrite pre-existing longhand properties
|
|
118
120
|
|
|
119
121
|
if (!rules[attr]) {
|
|
120
122
|
rules[attr] = rules[property];
|
|
@@ -133,13 +135,13 @@ const processRules = customRules => {
|
|
|
133
135
|
}); // Convert spacing scales
|
|
134
136
|
|
|
135
137
|
rules = Object.keys(rules).filter(property => spacingProps.includes(property)).map(property => {
|
|
136
|
-
|
|
138
|
+
var propValues = arr(rules[property]).map(val => theme.space[val] || val).map(assignValueToProperty(property)).map(media).reduce(merge, {});
|
|
137
139
|
delete rules[property];
|
|
138
140
|
return propValues;
|
|
139
141
|
}).reduce(merge, rules); // Convert colors to theme
|
|
140
142
|
|
|
141
143
|
rules = Object.keys(rules).filter(property => colorProps.includes(property)).map(property => {
|
|
142
|
-
|
|
144
|
+
var propValues = arr(rules[property]).map(val => {
|
|
143
145
|
// Handle nested '.' syntax
|
|
144
146
|
if (val && val.includes('.')) {
|
|
145
147
|
// Attempt to access nested values, otherwise return what was passed
|
|
@@ -159,21 +161,21 @@ const processRules = customRules => {
|
|
|
159
161
|
}).reduce(merge, rules); // font-size
|
|
160
162
|
|
|
161
163
|
if (rules.fontSize) {
|
|
162
|
-
|
|
164
|
+
var fontSize = arr(rules.fontSize).map(val => theme.fontSizes[val] || val).map(assignValueToProperty('fontSize')).map(media).reduce(merge, {});
|
|
163
165
|
delete rules.fontSize;
|
|
164
166
|
rules = merge(rules, fontSize);
|
|
165
167
|
} // display
|
|
166
168
|
|
|
167
169
|
|
|
168
170
|
if (rules.display) {
|
|
169
|
-
|
|
171
|
+
var display = arr(rules.display).map(assignValueToProperty('display')).map(media).reduce(merge, {});
|
|
170
172
|
delete rules.display;
|
|
171
173
|
rules = merge(rules, display);
|
|
172
174
|
} // width
|
|
173
175
|
|
|
174
176
|
|
|
175
177
|
if (rules.width) {
|
|
176
|
-
|
|
178
|
+
var width = arr(rules.width).map(assignValueToProperty('width')).map(media).reduce(merge, {});
|
|
177
179
|
delete rules.width;
|
|
178
180
|
rules = merge(rules, width);
|
|
179
181
|
}
|
|
@@ -181,18 +183,16 @@ const processRules = customRules => {
|
|
|
181
183
|
return rules;
|
|
182
184
|
};
|
|
183
185
|
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
const makeStyledRule = rule => {
|
|
187
|
-
var _rule;
|
|
186
|
+
var emptyRule = () => ({});
|
|
188
187
|
|
|
189
|
-
|
|
188
|
+
var makeStyledRule = rule => {
|
|
189
|
+
var combinedRules = combineRules(rule !== null && rule !== void 0 ? rule : emptyRule, propsRule);
|
|
190
190
|
return (props, renderer) => processRules(combinedRules(props, renderer));
|
|
191
191
|
};
|
|
192
192
|
|
|
193
193
|
function createStyledComponent(rule, type, passthroughProps) {
|
|
194
|
-
|
|
195
|
-
|
|
194
|
+
var styledRule = makeStyledRule(rule);
|
|
195
|
+
var Component = createComponent(styledRule, type, passthroughProps);
|
|
196
196
|
Component.propTypes = styledPropTypes;
|
|
197
197
|
|
|
198
198
|
if (typeof type === 'function') {
|
package/es/index.js
CHANGED
|
@@ -10,5 +10,5 @@ import createStyledComponent, { filterStyleProps } from './createStyledComponent
|
|
|
10
10
|
import withRenderer from './withRenderer';
|
|
11
11
|
import { ariaAttributes, isValidElementProp, filterValidElementProps } from './isValidElementProp';
|
|
12
12
|
export * from './types';
|
|
13
|
-
export
|
|
13
|
+
export var withTheme = _withTheme;
|
|
14
14
|
export { createComponent, ariaAttributes, applyTheme, ThemeProvider, FelaTheme, connect, combineRules, createComponentStyles, withRenderer, applyStaticStyles, createStyledComponent, isValidElementProp, filterValidElementProps, filterStyleProps };
|
package/es/isValidElementProp.js
CHANGED
|
@@ -1,10 +1,12 @@
|
|
|
1
|
-
function
|
|
1
|
+
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
|
|
2
|
+
|
|
3
|
+
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
|
|
2
4
|
|
|
3
5
|
function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
|
|
4
6
|
|
|
5
7
|
import memoize from 'lodash/memoize';
|
|
6
8
|
import pickBy from 'lodash/pickBy';
|
|
7
|
-
|
|
9
|
+
var globalAttributes = [
|
|
8
10
|
/* React-specific Attributes */
|
|
9
11
|
'defaultChecked', 'defaultValue', 'suppressContentEditableWarning', 'suppressHydrationWarning', 'children', 'dangerouslySetInnerHTML',
|
|
10
12
|
/* Standard HTML Attributes */
|
|
@@ -19,9 +21,9 @@ const globalAttributes = [
|
|
|
19
21
|
/* Non-standard Attributes */
|
|
20
22
|
'autoCapitalize', 'autoCorrect', 'autoSave', // 'color', probably best to not allow this attribute
|
|
21
23
|
'itemProp', 'itemScope', 'itemType', 'itemID', 'itemRef', 'results', 'security', 'unselectable'];
|
|
22
|
-
|
|
23
|
-
export
|
|
24
|
-
|
|
24
|
+
var htmlElements = ['a', 'abbr', 'address', 'area', 'article', 'aside', 'audio', 'b', 'base', 'bdi', 'bdo', 'big', 'blockquote', 'body', 'br', 'button', 'canvas', 'caption', 'cite', 'code', 'col', 'colgroup', 'data', 'datalist', 'dd', 'del', 'details', 'dfn', 'dialog', 'div', 'dl', 'dt', 'em', 'embed', 'fieldset', 'figcaption', 'figure', 'footer', 'form', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'head', 'header', 'hgroup', 'hr', 'html', 'i', 'iframe', 'img', 'input', 'ins', 'kbd', 'keygen', 'label', 'legend', 'li', 'link', 'main', 'map', 'mark', 'menu', 'menuitem', 'meta', 'meter', 'nav', 'noscript', 'object', 'ol', 'optgroup', 'option', 'output', 'p', 'param', 'picture', 'pre', 'progress', 'q', 'rp', 'rt', 'ruby', 's', 'samp', 'script', 'section', 'select', 'small', 'source', 'span', 'strong', 'style', 'sub', 'summary', 'sup', 'table', 'tbody', 'td', 'textarea', 'tfoot', 'th', 'thead', 'time', 'title', 'tr', 'track', 'u', 'ul', 'var', 'video', 'wbr'];
|
|
25
|
+
export var ariaAttributes = ['aria-activedescendant', 'aria-atomic', 'aria-autocomplete', 'aria-busy', 'aria-checked', 'aria-colcount', 'aria-colindex', 'aria-colspan', 'aria-controls', 'aria-current', 'aria-describedby', 'aria-details', 'aria-disabled', 'aria-dropeffect', 'aria-errormessage', 'aria-expanded', 'aria-flowto', 'aria-grabbed', 'aria-haspopup', 'aria-hidden', 'aria-invalid', 'aria-keyshortcuts', 'aria-label', 'aria-labelledby', 'aria-level', 'aria-live', 'aria-modal', 'aria-multiline', 'aria-multiselectable', 'aria-orientation', 'aria-owns', 'aria-placeholder', 'aria-posinset', 'aria-pressed', 'aria-readonly', 'aria-relevant', 'aria-required', 'aria-roledescription', 'aria-rowcount', 'aria-rowindex', 'aria-rowspan', 'aria-selected', 'aria-setsize', 'aria-sort', 'aria-valuemax', 'aria-valuemin', 'aria-valuenow', 'aria-valuetext'];
|
|
26
|
+
var extendedAttributes = {
|
|
25
27
|
a: ['download', 'href', 'hrefLang', 'media', 'rel', 'target', 'type', 'referrerPolicy'],
|
|
26
28
|
area: ['alt', 'coords', 'download', 'href', 'hrefLang', 'media', 'rel', 'shape', 'target'],
|
|
27
29
|
audio: ['autoPlay', 'controls', 'controlsList', 'crossOrigin', 'loop', 'mediaGroup', 'muted', 'playsinline', 'preload', 'src'],
|
|
@@ -72,32 +74,32 @@ const extendedAttributes = {
|
|
|
72
74
|
track: ['default', 'kind', 'label', 'src', 'srcLang'],
|
|
73
75
|
video: ['autoPlay', 'controls', 'controlsList', 'crossOrigin', 'loop', 'mediaGroup', 'muted', 'playsinline', 'preload', 'src', 'height', 'playsInline', 'poster', 'width']
|
|
74
76
|
};
|
|
75
|
-
|
|
76
|
-
|
|
77
|
+
var svgElements = ['animate', 'animateMotion', 'animateTransform', 'circle', 'clipPath', 'defs', 'desc', 'ellipse', 'feBlend', 'feColorMatrix', 'feComponentTransfer', 'feComposite', 'feConvolveMatrix', 'feDiffuseLighting', 'feDisplacementMap', 'feDistantLight', 'feDropShadow', 'feFlood', 'feFuncA', 'feFuncB', 'feFuncG', 'feFuncR', 'feGaussianBlur', 'feImage', 'feMerge', 'feMergeNode', 'feMorphology', 'feOffset', 'fePointLight', 'feSpecularLighting', 'feSpotLight', 'feTile', 'feTurbulence', 'filter', 'foreignObject', 'g', 'image', 'line', 'linearGradient', 'marker', 'mask', 'metadata', 'mpath', 'path', 'pattern', 'polygon', 'polyline', 'radialGradient', 'rect', 'stop', 'svg', 'switch', 'symbol', 'text', 'textPath', 'tspan', 'use', 'view'];
|
|
78
|
+
var svgAttributes = ['accentHeight', 'accumulate', 'additive', 'alignmentBaseline', 'allowReorder', 'alphabetic', 'amplitude', 'arabicForm', 'ascent', 'attributeName', 'attributeType', 'autoReverse', 'azimuth', 'baseFrequency', 'baselineShift', 'baseProfile', 'bbox', 'begin', 'bias', 'by', 'calcMode', 'capHeight', 'clip', 'clipPath', 'clipPathUnits', 'clipRule', 'color', 'colorInterpolation', 'colorInterpolationFilters', 'colorProfile', 'colorRendering', 'contentScriptType', 'contentStyleType', 'cursor', 'cx', 'cy', 'd', 'decelerate', 'descent', 'diffuseConstant', 'direction', 'display', 'divisor', 'dominantBaseline', 'dur', 'dx', 'dy', 'edgeMode', 'elevation', 'enableBackground', 'end', 'exponent', 'externalResourcesRequired', 'fill', 'fillOpacity', 'fillRule', 'filter', 'filterRes', 'filterUnits', 'floodColor', 'floodOpacity', 'focusable', 'fontFamily', 'fontSize', 'fontSizeAdjust', 'fontStretch', 'fontStyle', 'fontVariant', 'fontWeight', 'format', 'from', 'fx', 'fy', 'g1', 'g2', 'glyphName', 'glyphOrientationHorizontal', 'glyphOrientationVertical', 'glyphRef', 'gradientTransform', 'gradientUnits', // 'hanging' DEPRECATED,
|
|
77
79
|
'height', 'horizAdvX', 'horizOriginX', 'href', 'ideographic', 'imageRendering', 'in2', 'in', 'intercept', 'k1', 'k2', 'k3', 'k4', 'k', 'kernelMatrix', 'kernelUnitLength', 'kerning', 'keyPoints', 'keySplines', 'keyTimes', 'lengthAdjust', 'letterSpacing', 'lightingColor', 'limitingConeAngle', 'local', 'markerEnd', 'markerHeight', 'markerMid', 'markerStart', 'markerUnits', 'markerWidth', 'mask', 'maskContentUnits', 'maskUnits', 'mathematical', 'max', 'media', 'method', 'min', 'mode', 'name', 'numOctaves', 'offset', 'opacity', 'operator', 'order', 'orient', 'orientation', 'origin', 'overflow', 'overlinePosition', 'overlineThickness', 'paintOrder', 'panose1', 'pathLength', 'patternContentUnits', 'patternTransform', 'patternUnits', 'pointerEvents', 'points', 'pointsAtX', 'pointsAtY', 'pointsAtZ', 'preserveAlpha', 'preserveAspectRatio', 'primitiveUnits', 'r', 'radius', 'refX', 'refY', 'renderingIntent', 'repeatCount', 'repeatDur', 'requiredExtensions', 'requiredFeatures', 'restart', 'result', 'rotate', 'rx', 'ry', 'scale', 'seed', 'shapeRendering', 'slope', 'spacing', 'specularConstant', 'specularExponent', 'speed', 'spreadMethod', 'startOffset', 'stdDeviation', 'stemh', 'stemv', 'stitchTiles', 'stopColor', 'stopOpacity', 'strikethroughPosition', 'strikethroughThickness', 'string', 'stroke', 'strokeDasharray', 'strokeDashoffset', 'strokeLinecap', 'strokeLinejoin', 'strokeMiterlimit', 'strokeOpacity', 'strokeWidth', 'surfaceScale', 'systemLanguage', 'tableValues', 'target', 'targetX', 'targetY', 'textAnchor', 'textDecoration', 'textLength', 'textRendering', 'to', 'transform', 'type', 'u1', 'u2', 'underlinePosition', 'underlineThickness', 'unicode', 'unicodeBidi', 'unicodeRange', 'unitsPerEm', 'vAlphabetic', 'values', 'vectorEffect', 'version', 'vertAdvY', 'vertOriginX', 'vertOriginY', 'vHanging', 'vIdeographic', 'viewBox', 'viewTarget', 'visibility', 'vMathematical', 'width', 'widths', 'wordSpacing', 'writingMode', 'x1', 'x2', 'x', 'xChannelSelector', 'xHeight', 'xlinkActuate', 'xlinkArcrole', 'xlinkHref', 'xlinkRole', 'xlinkShow', 'xlinkTitle', 'xlinkType', 'xmlBase', 'xmlLang', 'xmlns', 'xmlnsXlink', 'xmlSpace', 'y1', 'y2', 'y', 'yChannelSelector', 'z', 'zoomAndPan'];
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
80
|
+
var eventHandlerPattern = "on[A-Z]\\w+";
|
|
81
|
+
var globalAttributePattern = globalAttributes.join('|');
|
|
82
|
+
var dataAttributePattern = "data(?:-\\w+)+";
|
|
83
|
+
var ariaAttributePattern = ariaAttributes.join('|');
|
|
84
|
+
var htmlRegexMap = htmlElements.reduce((map, tag) => {
|
|
85
|
+
var extendedAttrs = extendedAttributes[tag] || [];
|
|
86
|
+
var patterns = [eventHandlerPattern, globalAttributePattern, dataAttributePattern, ariaAttributePattern, ...extendedAttrs].join('|');
|
|
85
87
|
return Object.assign(map, {
|
|
86
|
-
[tag]: new RegExp(
|
|
88
|
+
[tag]: new RegExp("^(?:".concat(patterns, ")$"))
|
|
87
89
|
});
|
|
88
90
|
}, {});
|
|
89
|
-
|
|
90
|
-
|
|
91
|
+
var svgRegexMap = svgElements.reduce((map, tag) => {
|
|
92
|
+
var patterns = [eventHandlerPattern, globalAttributePattern, dataAttributePattern, ariaAttributePattern, ...svgAttributes].join('|');
|
|
91
93
|
return Object.assign(map, {
|
|
92
|
-
[tag]: new RegExp(
|
|
94
|
+
[tag]: new RegExp("^(?:".concat(patterns, ")$"))
|
|
93
95
|
});
|
|
94
96
|
}, {});
|
|
95
97
|
|
|
96
|
-
|
|
98
|
+
var elementRegexMap = _objectSpread(_objectSpread({}, htmlRegexMap), svgRegexMap);
|
|
97
99
|
|
|
98
|
-
export
|
|
99
|
-
|
|
100
|
+
export var isValidElementProp = memoize((tag, attr) => {
|
|
101
|
+
var regex = elementRegexMap[tag];
|
|
100
102
|
return regex ? regex.test(attr) : false;
|
|
101
|
-
}, (tag, attr) =>
|
|
102
|
-
export
|
|
103
|
+
}, (tag, attr) => "".concat(tag, "#").concat(attr));
|
|
104
|
+
export var filterValidElementProps = (tag, props) => pickBy(props, (val, prop) => isValidElementProp(tag, prop));
|
|
103
105
|
export default isValidElementProp;
|
package/es/mergeThemes.js
CHANGED
|
@@ -1,4 +1,8 @@
|
|
|
1
|
-
|
|
1
|
+
var mergeThemes = function mergeThemes(baseTheme) {
|
|
2
|
+
for (var _len = arguments.length, themes = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
|
|
3
|
+
themes[_key - 1] = arguments[_key];
|
|
4
|
+
}
|
|
5
|
+
|
|
2
6
|
if (themes) {
|
|
3
7
|
return themes.reduce((acc, theme) => {
|
|
4
8
|
if (typeof theme === 'function') {
|
package/es/withRenderer.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
function _extends() { _extends = Object.assign
|
|
1
|
+
function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
|
|
2
2
|
|
|
3
3
|
/* eslint-disable behance/no-deprecated */
|
|
4
4
|
import React, { useContext } from 'react';
|
|
@@ -6,8 +6,8 @@ import getReactDisplayName from 'react-display-name';
|
|
|
6
6
|
import { RendererContext } from 'react-fela';
|
|
7
7
|
|
|
8
8
|
function withRenderer(ComponentToWrap) {
|
|
9
|
-
|
|
10
|
-
|
|
9
|
+
var WithRendererComponent = props => {
|
|
10
|
+
var renderer = useContext(RendererContext);
|
|
11
11
|
return /*#__PURE__*/React.createElement(ComponentToWrap, _extends({
|
|
12
12
|
renderer: renderer
|
|
13
13
|
}, props));
|
package/lib/applyStaticStyles.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
|
|
3
|
-
function _typeof(obj) { "@babel/helpers - typeof";
|
|
3
|
+
function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
|
|
4
4
|
|
|
5
5
|
Object.defineProperty(exports, "__esModule", {
|
|
6
6
|
value: true
|
|
@@ -13,11 +13,13 @@ var _reactFela = require("react-fela");
|
|
|
13
13
|
|
|
14
14
|
var _reactDisplayName = _interopRequireDefault(require("react-display-name"));
|
|
15
15
|
|
|
16
|
+
var _excluded = ["theme"];
|
|
17
|
+
|
|
16
18
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
17
19
|
|
|
18
|
-
function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var
|
|
20
|
+
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
|
|
19
21
|
|
|
20
|
-
function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
|
|
22
|
+
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
|
|
21
23
|
|
|
22
24
|
function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
|
|
23
25
|
|
|
@@ -28,7 +30,7 @@ function applyStaticStyles(staticStyles, ComponentToWrap) {
|
|
|
28
30
|
var _renderer$renderStati;
|
|
29
31
|
|
|
30
32
|
var theme = _ref.theme,
|
|
31
|
-
passThroughProps = _objectWithoutProperties(_ref,
|
|
33
|
+
passThroughProps = _objectWithoutProperties(_ref, _excluded);
|
|
32
34
|
|
|
33
35
|
var renderer = (0, _react.useContext)(_reactFela.RendererContext);
|
|
34
36
|
var contextTheme = theme || {};
|