@cloudflare/style-container 7.9.0 → 7.12.0

package/CHANGELOG.md

@@ -1,5 +1,23 @@
 # Change Log
 
+## 7.12.0
+
+### Minor Changes
+
+- d2309ba7da: Add gridTemplateColumns property to createStyledComponent
+
+## 7.11.0
+
+### Minor Changes
+
+- 0aca3a096c: added role to ariaAttributes on style-container
+
+## 7.10.0
+
+### Minor Changes
+
+- 77059b4a95: Add grid properties to components created with createStyledComponent
+
 ## 7.9.0
 
 ### Minor Changes

package/dist/createStyledComponent.d.ts

@@ -25,7 +25,7 @@ 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"];
-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")[];
+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" | "gridTemplateColumns")[];
 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;
@@ -34,7 +34,16 @@ declare type BreakpointStyle<V> = V | [V, V] | [V, V, V];
 declare type StyleProps = {
     [P in StyleRuleProp]?: BreakpointStyle<CSSPropertyValue<ExpandedCSSProperty<P>>>;
 };
-declare function createStyledComponent<AdditionalStyleProps = {}>(rule: StyleFn<ForceInference<'div'>, StyleProps & AdditionalStyleProps>): ComponentType<Compute<InferProps<'div'> & StyleProps & AdditionalStyleProps & InnerRefProp<'div'>>>;
-declare function createStyledComponent<Base extends BaseType, AdditionalStyleProps = {}>(rule: StyleFn<ForceInference<Base>, StyleProps & AdditionalStyleProps>, type?: Base, passthroughProps?: string[]): ComponentType<Compute<InferProps<Base> & StyleProps & AdditionalStyleProps & InnerRefProp<Base>>>;
+declare type GridAlignment = 'start' | 'end' | 'center' | 'stretch';
+declare type GridProps = {
+    gridColumnSpan?: number | number[] | 'all' | 'end';
+    gridColumnPad?: number | number[];
+    gridRowSpan?: number | number[];
+    gridRowPad?: number | number[];
+    gridAlign?: GridAlignment;
+    gridJustify?: GridAlignment;
+};
+declare function createStyledComponent<AdditionalStyleProps = {}>(rule: StyleFn<ForceInference<'div'>, StyleProps & AdditionalStyleProps>): ComponentType<Compute<InferProps<'div'> & StyleProps & AdditionalStyleProps & InnerRefProp<'div'> & GridProps>>;
+declare function createStyledComponent<Base extends BaseType, AdditionalStyleProps = {}>(rule: StyleFn<ForceInference<Base>, StyleProps & AdditionalStyleProps>, type?: Base, passthroughProps?: string[]): ComponentType<Compute<InferProps<Base> & StyleProps & AdditionalStyleProps & InnerRefProp<Base> & GridProps>>;
 export default createStyledComponent;
 export { colorProps, spacingProps, sizeProps, borderStyleProps, borderWidthProps, borderRadiusProps };

package/es/createStyledComponent.js

@@ -36,7 +36,7 @@ var colorProps = ['color', 'backgroundColor', 'borderColor', 'borderLeftColor',
 var borderStyleProps = ['borderStyle', 'borderTopStyle', 'borderBottomStyle', 'borderLeftStyle', 'borderRightStyle'];
 var borderWidthProps = ['borderWidth', 'borderTopWidth', 'borderBottomWidth', 'borderLeftWidth', 'borderRightWidth'];
 var borderRadiusProps = ['borderRadius', 'borderTopLeftRadius', 'borderTopRightRadius', 'borderBottomLeftRadius', 'borderbottomRightRadius'];
-var additionalProps = ['fontSize', 'fontWeight', 'textAlign', 'display', 'width', 'verticalAlign', 'alignItems', 'alignSelf', 'justifyContent', 'textDecoration', 'textTransform', 'boxSizing', 'cursor', 'flexDirection', 'flexBasis', 'flexGrow'];
+var additionalProps = ['fontSize', 'fontWeight', 'textAlign', 'display', 'width', 'verticalAlign', 'alignItems', 'alignSelf', 'justifyContent', 'textDecoration', 'textTransform', 'boxSizing', 'cursor', 'flexDirection', 'flexBasis', 'flexGrow', 'gridTemplateColumns'];
 export var styleRuleProps = [...spacingProps, ...sizeProps, ...colorProps, ...borderStyleProps, ...borderWidthProps, ...borderRadiusProps, ...additionalProps];
 var stylesRulePropsSet = new Set(styleRuleProps); // Function to remove styling attributes from a Props object
 

package/es/isValidElementProp.js

@@ -22,7 +22,7 @@ var globalAttributes = [
 'autoCapitalize', 'autoCorrect', 'autoSave', // 'color', probably best to not allow this attribute
 'itemProp', 'itemScope', 'itemType', 'itemID', 'itemRef', 'results', 'security', 'unselectable'];
 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'];
-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'];
+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', 'role'];
 var extendedAttributes = {
   a: ['download', 'href', 'hrefLang', 'media', 'rel', 'target', 'type', 'referrerPolicy'],
   area: ['alt', 'coords', 'download', 'href', 'hrefLang', 'media', 'rel', 'shape', 'target'],

package/lib/createStyledComponent.js

@@ -76,7 +76,7 @@ var borderWidthProps = ['borderWidth', 'borderTopWidth', 'borderBottomWidth', 'b
 exports.borderWidthProps = borderWidthProps;
 var borderRadiusProps = ['borderRadius', 'borderTopLeftRadius', 'borderTopRightRadius', 'borderBottomLeftRadius', 'borderbottomRightRadius'];
 exports.borderRadiusProps = borderRadiusProps;
-var additionalProps = ['fontSize', 'fontWeight', 'textAlign', 'display', 'width', 'verticalAlign', 'alignItems', 'alignSelf', 'justifyContent', 'textDecoration', 'textTransform', 'boxSizing', 'cursor', 'flexDirection', 'flexBasis', 'flexGrow'];
+var additionalProps = ['fontSize', 'fontWeight', 'textAlign', 'display', 'width', 'verticalAlign', 'alignItems', 'alignSelf', 'justifyContent', 'textDecoration', 'textTransform', 'boxSizing', 'cursor', 'flexDirection', 'flexBasis', 'flexGrow', 'gridTemplateColumns'];
 var styleRuleProps = [].concat(_toConsumableArray(spacingProps), sizeProps, colorProps, borderStyleProps, borderWidthProps, borderRadiusProps, additionalProps);
 exports.styleRuleProps = styleRuleProps;
 var stylesRulePropsSet = new Set(styleRuleProps); // Function to remove styling attributes from a Props object

package/lib/isValidElementProp.js

@@ -45,7 +45,7 @@ var globalAttributes = [
 'autoCapitalize', 'autoCorrect', 'autoSave', // 'color', probably best to not allow this attribute
 'itemProp', 'itemScope', 'itemType', 'itemID', 'itemRef', 'results', 'security', 'unselectable'];
 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'];
-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'];
+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', 'role'];
 exports.ariaAttributes = ariaAttributes;
 var extendedAttributes = {
   a: ['download', 'href', 'hrefLang', 'media', 'rel', 'target', 'type', 'referrerPolicy'],

package/package.json

@@ -1,8 +1,7 @@
 {
   "name": "@cloudflare/style-container",
   "description": "Cloudflare Style Container",
-  "version": "7.9.0",
-  "types": "./dist/index.d.ts",
+  "version": "7.12.0",
   "main": "lib/index.js",
   "module": "es/index.js",
   "author": "Vojtech Miksu <vojtech@cloudflare.com>",
@@ -10,7 +9,8 @@
   "publishConfig": {
     "access": "public",
     "main": "lib/index.js",
-    "module": "es/index.js"
+    "module": "es/index.js",
+    "types": "./dist/index.d.ts"
   },
   "dependencies": {
     "@cloudflare/types": "^6.15.15",
@@ -34,5 +34,6 @@
     "test": "stratus test",
     "test-coverage": "stratus test --coverage",
     "test-watch": "stratus test --watch"
-  }
+  },
+  "types": "./dist/index.d.ts"
 }