@cloudflare/style-container 7.5.24 → 7.6.0

package/CHANGELOG.md

@@ -3,6 +3,42 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [7.6.0](http://stash.cfops.it:7999/fe/stratus/compare/@cloudflare/style-container@7.5.27...@cloudflare/style-container@7.6.0) (2022-01-07)
+
+
+### Features
+
+* **style-container:** A11Y-584 Add style filter function ([614c27d](http://stash.cfops.it:7999/fe/stratus/commits/614c27d))
+* **style-container:** A11Y-584 Export styleRuleProps ([084e735](http://stash.cfops.it:7999/fe/stratus/commits/084e735))
+
+
+
+
+
+## [7.5.27](http://stash.cfops.it:7999/fe/stratus/compare/@cloudflare/style-container@7.5.26...@cloudflare/style-container@7.5.27) (2021-12-28)
+
+**Note:** Version bump only for package @cloudflare/style-container
+
+
+
+
+
+## [7.5.26](http://stash.cfops.it:7999/fe/stratus/compare/@cloudflare/style-container@7.5.24...@cloudflare/style-container@7.5.26) (2021-12-21)
+
+**Note:** Version bump only for package @cloudflare/style-container
+
+
+
+
+
+## [7.5.25](http://stash.cfops.it:7999/fe/stratus/compare/@cloudflare/style-container@7.5.24...@cloudflare/style-container@7.5.25) (2021-12-21)
+
+**Note:** Version bump only for package @cloudflare/style-container
+
+
+
+
+
 ## [7.5.24](http://stash.cfops.it:7999/fe/stratus/compare/@cloudflare/style-container@7.5.23...@cloudflare/style-container@7.5.24) (2021-12-09)
 
 **Note:** Version bump only for package @cloudflare/style-container

package/dist/createStyledComponent.d.ts

@@ -25,7 +25,8 @@ declare const colorProps: readonly ["color", "backgroundColor", "borderColor", "
 declare const borderStyleProps: readonly ["borderStyle", "borderTopStyle", "borderBottomStyle", "borderLeftStyle", "borderRightStyle"];
 declare const borderWidthProps: readonly ["borderWidth", "borderTopWidth", "borderBottomWidth", "borderLeftWidth", "borderRightWidth"];
 declare const borderRadiusProps: readonly ["borderRadius", "borderTopLeftRadius", "borderTopRightRadius", "borderBottomLeftRadius", "borderbottomRightRadius"];
-declare const styleRuleProps: ("p" | "color" | "height" | "width" | "cursor" | "display" | "fontSize" | "fontWeight" | "textDecoration" | "textAlign" | "backgroundColor" | "borderColor" | "borderLeftColor" | "borderRightColor" | "borderTopColor" | "borderBottomColor" | "minWidth" | "minHeight" | "maxWidth" | "maxHeight" | "margin" | "marginTop" | "marginRight" | "marginLeft" | "padding" | "paddingTop" | "paddingRight" | "paddingLeft" | "borderRadius" | "verticalAlign" | "alignItems" | "alignSelf" | "borderBottomLeftRadius" | "borderBottomStyle" | "borderBottomWidth" | "borderLeftStyle" | "borderLeftWidth" | "borderRightStyle" | "borderRightWidth" | "borderTopLeftRadius" | "borderTopRightRadius" | "borderTopStyle" | "borderTopWidth" | "boxSizing" | "justifyContent" | "marginBottom" | "paddingBottom" | "textTransform" | "borderStyle" | "borderWidth" | "m" | "ml" | "mr" | "mt" | "mb" | "mx" | "my" | "pl" | "pr" | "pt" | "pb" | "px" | "py" | "borderbottomRightRadius")[];
+export declare const styleRuleProps: ("p" | "color" | "height" | "width" | "cursor" | "display" | "fontSize" | "fontWeight" | "textDecoration" | "textAlign" | "backgroundColor" | "borderColor" | "borderLeftColor" | "borderRightColor" | "borderTopColor" | "borderBottomColor" | "minWidth" | "minHeight" | "maxWidth" | "maxHeight" | "margin" | "marginTop" | "marginRight" | "marginLeft" | "padding" | "paddingTop" | "paddingRight" | "paddingLeft" | "borderRadius" | "verticalAlign" | "alignItems" | "alignSelf" | "borderBottomLeftRadius" | "borderBottomStyle" | "borderBottomWidth" | "borderLeftStyle" | "borderLeftWidth" | "borderRightStyle" | "borderRightWidth" | "borderTopLeftRadius" | "borderTopRightRadius" | "borderTopStyle" | "borderTopWidth" | "boxSizing" | "justifyContent" | "marginBottom" | "paddingBottom" | "textTransform" | "borderStyle" | "borderWidth" | "m" | "ml" | "mr" | "mt" | "mb" | "mx" | "my" | "pl" | "pr" | "pt" | "pb" | "px" | "py" | "borderbottomRightRadius")[];
+export declare function filterStyleProps<Type extends {}>(props: Type): Type;
 declare type StyleRuleProp = typeof styleRuleProps[number];
 declare type ExpandedCSSProperty<P extends StyleRuleProp> = P extends ShorthandSpacingProp ? ShorthandToLonghandMap[P][0] : P;
 declare type CSSPropertyValue<P> = P extends keyof React.CSSProperties ? React.CSSProperties[P] : never;

package/dist/index.d.ts

@@ -4,10 +4,10 @@ import applyStaticStyles from './applyStaticStyles';
 import applyTheme from './applyTheme';
 import createComponent from './createComponent';
 import createComponentStyles from './createComponentStyles';
-import createStyledComponent from './createStyledComponent';
+import createStyledComponent, { filterStyleProps } from './createStyledComponent';
 import withRenderer from './withRenderer';
 import { isValidElementProp, filterValidElementProps } from './isValidElementProp';
 import { WithTheme } from './types';
 export * from './types';
 export declare const withTheme: WithTheme;
-export { createComponent, applyTheme, ThemeProvider, FelaTheme, connect, combineRules, createComponentStyles, withRenderer, applyStaticStyles, createStyledComponent, isValidElementProp, filterValidElementProps };
+export { createComponent, applyTheme, ThemeProvider, FelaTheme, connect, combineRules, createComponentStyles, withRenderer, applyStaticStyles, createStyledComponent, isValidElementProp, filterValidElementProps, filterStyleProps };

package/es/createStyledComponent.js

@@ -35,7 +35,20 @@ const borderStyleProps = ['borderStyle', 'borderTopStyle', 'borderBottomStyle',
 const borderWidthProps = ['borderWidth', 'borderTopWidth', 'borderBottomWidth', 'borderLeftWidth', 'borderRightWidth'];
 const borderRadiusProps = ['borderRadius', 'borderTopLeftRadius', 'borderTopRightRadius', 'borderBottomLeftRadius', 'borderbottomRightRadius'];
 const additionalProps = ['fontSize', 'fontWeight', 'textAlign', 'display', 'width', 'verticalAlign', 'alignItems', 'alignSelf', 'justifyContent', 'textDecoration', 'textTransform', 'boxSizing', 'cursor'];
-const styleRuleProps = [...spacingProps, ...sizeProps, ...colorProps, ...borderStyleProps, ...borderWidthProps, ...borderRadiusProps, ...additionalProps];
+export const styleRuleProps = [...spacingProps, ...sizeProps, ...colorProps, ...borderStyleProps, ...borderWidthProps, ...borderRadiusProps, ...additionalProps];
+const stylesRulePropsSet = new Set(styleRuleProps); // Function to remove styling attributes from a Props object
+
+export function filterStyleProps(props) {
+  let newProps;
+  const properties = Object.keys(props);
+  properties.forEach(property => {
+    if (stylesRulePropsSet.has(property)) {
+      newProps = newProps || _objectSpread({}, props);
+      delete newProps[property];
+    }
+  });
+  return newProps || props;
+}
 // gotta broaden from Set<StyleRuleProp> to a ReadonlySet<string> so we can check
 // if arbitrary strings are in it via propsSet.has(maybeStyleRuleProp)
 const propsSet = new Set(styleRuleProps); // Function to construct the prop types object

package/es/index.js

@@ -6,9 +6,9 @@ import applyStaticStyles from './applyStaticStyles';
 import applyTheme from './applyTheme';
 import createComponent from './createComponent';
 import createComponentStyles from './createComponentStyles';
-import createStyledComponent from './createStyledComponent';
+import createStyledComponent, { filterStyleProps } from './createStyledComponent';
 import withRenderer from './withRenderer';
 import { isValidElementProp, filterValidElementProps } from './isValidElementProp';
 export * from './types';
 export const withTheme = _withTheme;
-export { createComponent, applyTheme, ThemeProvider, FelaTheme, connect, combineRules, createComponentStyles, withRenderer, applyStaticStyles, createStyledComponent, isValidElementProp, filterValidElementProps };
+export { createComponent, applyTheme, ThemeProvider, FelaTheme, connect, combineRules, createComponentStyles, withRenderer, applyStaticStyles, createStyledComponent, isValidElementProp, filterValidElementProps, filterStyleProps };

package/lib/createStyledComponent.js

@@ -3,7 +3,8 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.borderRadiusProps = exports.borderWidthProps = exports.borderStyleProps = exports.sizeProps = exports.spacingProps = exports.colorProps = exports.default = void 0;
+exports.filterStyleProps = filterStyleProps;
+exports.borderRadiusProps = exports.borderWidthProps = exports.borderStyleProps = exports.sizeProps = exports.spacingProps = exports.colorProps = exports.default = exports.styleRuleProps = void 0;
 
 var _reactDisplayName = _interopRequireDefault(require("react-display-name"));
 
@@ -19,10 +20,10 @@ var _types = require("./types");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? Object(arguments[i]) : {}; var ownKeys = Object.keys(source); if (typeof Object.getOwnPropertySymbols === 'function') { ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function (sym) { return Object.getOwnPropertyDescriptor(source, sym).enumerable; })); } ownKeys.forEach(function (key) { _defineProperty(target, key, source[key]); }); } return target; }
-
 function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
 
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? Object(arguments[i]) : {}; var ownKeys = Object.keys(source); if (typeof Object.getOwnPropertySymbols === 'function') { ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function (sym) { return Object.getOwnPropertyDescriptor(source, sym).enumerable; })); } ownKeys.forEach(function (key) { _defineProperty(target, key, source[key]); }); } return target; }
+
 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; }
 
 function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
@@ -74,6 +75,21 @@ var additionalProps = ['fontSize', 'fontWeight', 'textAlign', 'display', 'width'
 
 var styleRuleProps = _toConsumableArray(spacingProps).concat(sizeProps, colorProps, borderStyleProps, borderWidthProps, borderRadiusProps, additionalProps);
 
+exports.styleRuleProps = styleRuleProps;
+var stylesRulePropsSet = new Set(styleRuleProps); // Function to remove styling attributes from a Props object
+
+function filterStyleProps(props) {
+  var newProps;
+  var properties = Object.keys(props);
+  properties.forEach(function (property) {
+    if (stylesRulePropsSet.has(property)) {
+      newProps = newProps || _objectSpread({}, props);
+      delete newProps[property];
+    }
+  });
+  return newProps || props;
+}
+
 // gotta broaden from Set<StyleRuleProp> to a ReadonlySet<string> so we can check
 // if arbitrary strings are in it via propsSet.has(maybeStyleRuleProp)
 var propsSet = new Set(styleRuleProps); // Function to construct the prop types object

package/lib/index.js

@@ -1,5 +1,7 @@
 "use strict";
 
+function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -14,6 +16,7 @@ var _exportNames = {
   createComponent: true,
   createComponentStyles: true,
   createStyledComponent: true,
+  filterStyleProps: true,
   withRenderer: true,
   isValidElementProp: true,
   filterValidElementProps: true
@@ -72,6 +75,12 @@ Object.defineProperty(exports, "createStyledComponent", {
     return _createStyledComponent.default;
   }
 });
+Object.defineProperty(exports, "filterStyleProps", {
+  enumerable: true,
+  get: function get() {
+    return _createStyledComponent.filterStyleProps;
+  }
+});
 Object.defineProperty(exports, "withRenderer", {
   enumerable: true,
   get: function get() {
@@ -104,7 +113,7 @@ var _createComponent = _interopRequireDefault(require("./createComponent"));
 
 var _createComponentStyles = _interopRequireDefault(require("./createComponentStyles"));
 
-var _createStyledComponent = _interopRequireDefault(require("./createStyledComponent"));
+var _createStyledComponent = _interopRequireWildcard(require("./createStyledComponent"));
 
 var _withRenderer = _interopRequireDefault(require("./withRenderer"));
 
@@ -123,6 +132,10 @@ Object.keys(_types).forEach(function (key) {
   });
 });
 
+function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function _getRequireWildcardCache() { return cache; }; return cache; }
+
+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; }
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 // eslint-disable-line behance/no-deprecated

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@cloudflare/style-container",
   "description": "Cloudflare Style Container",
-  "version": "7.5.24",
+  "version": "7.6.0",
   "types": "./dist/index.d.ts",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -12,8 +12,8 @@
     "access": "public"
   },
   "dependencies": {
-    "@cloudflare/style-const": "^5.1.18",
-    "@cloudflare/types": "^6.11.16",
+    "@cloudflare/style-const": "^5.2.0",
+    "@cloudflare/types": "^6.11.19",
     "fela": "^11.6.1",
     "fela-tools": "^11.6.1",
     "lodash": "^4.17.10",
@@ -34,5 +34,5 @@
     "test-coverage": "stratus test --coverage",
     "test-watch": "stratus test --watch"
   },
-  "gitHead": "61e863a0ad6f04518b2f41a82d74411b777362a6"
+  "gitHead": "b7c207b9d1a4a78c3412f7ad4185e92ec36c4f5e"
 }