@stenajs-webui/core - npm Package Compare versions

Comparing version 0.0.31 to 0.0.32

dist/index.d.ts

@@ -28,2 +28,3 @@ export * from "./theme/hooks/UseTheme";
 export * from "./theme/ThemeContext";
+export * from "./theme/ThemeProvider";
 export * from "./theme/DefaultTheme";
@@ -30,0 +31,0 @@ export * from "./theme/Theme";

dist/index.es.js

@@ -1,5 +0,6 @@
-import { createContext, useMemo, createElement, useContext, useState, useCallback, useEffect, useRef } from 'react';
+import { createContext, useContext, useMemo, createElement, useState, useCallback, useEffect, useRef } from 'react';
+import styled from '@emotion/styled';
+import isPropValid from '@emotion/is-prop-valid';
+import { alignItems, background, border, borderRight, borderLeft, borderTop, borderBottom, borderColor, borderRadius, borderStyle, borderWidth, boxShadow, flex, flexWrap, justifyContent, overflow, position, layout, zIndex, left, right, top, bottom, fontSize, fontFamily, fontWeight, textAlign } from 'styled-system';
 import { merge, debounce } from 'lodash';
-import styled from '@emotion/styled';
-import { alignItems, background, border, borderRight, borderLeft, borderTop, borderBottom, borderColor, borderRadius, borderStyle, borderWidth, boxShadow, flex, flexWrap, height, justifyContent, minHeight, minWidth, maxHeight, maxWidth, overflow, position, width, zIndex, left, right, top, bottom, fontSize, fontFamily, fontWeight, textAlign } from 'styled-system';
 
@@ -73,13 +74,3 @@ var defaultTheme = {
 
-var mergeTheme = function (theme, partialTheme) {
-    return merge({}, theme, partialTheme);
-};
-
 var ThemeContext = createContext(defaultTheme);
-var ThemeProvider = function (_a) {
-    var value = _a.value, children = _a.children;
-    var parentTheme = useTheme();
-    var mergedValue = useMemo(function () { return mergeTheme(parentTheme, value); }, [parentTheme, value]);
-    return (createElement(ThemeContext.Provider, { value: mergedValue }, children));
-};
 
@@ -196,5 +187,17 @@ var useTheme = function () {
 
-var FlexBox = styled.div(templateObject_1$2 || (templateObject_1$2 = __makeTemplateObject(["\n  box-sizing: border-box;\n  display: ", ";\n  ", ";\n  ", ";\n  ", ";\n  ", ";\n  ", ";\n  ", ";\n  ", ";\n  ", ";\n  ", ";\n  ", ";\n  ", ";\n  ", ";\n  ", "\n  ", ";\n  flex-direction: ", ";\n  ", ";\n  ", ";\n  ", ";\n  ", ";\n  ", ";\n  ", ";\n  ", ";\n  ", ";\n  padding: ", "px\n    ", "px;\n  ", "\n  ", ";\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  :hover {\n    background: ", ";\n    border: ", ";\n  }\n"], ["\n  box-sizing: border-box;\n  display: ", ";\n  ", ";\n  ", ";\n  ", ";\n  ", ";\n  ", ";\n  ", ";\n  ", ";\n  ", ";\n  ", ";\n  ", ";\n  ", ";\n  ", ";\n  ", "\n  ", ";\n  flex-direction: ",
-    ";\n  ", ";\n  ", ";\n  ", ";\n  ", ";\n  ", ";\n  ", ";\n  ", ";\n  ", ";\n  padding: ",
-    "px\n    ", "px;\n  ", "\n  ", ";\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  :hover {\n    background: ", ";\n    border: ", ";\n  }\n"])), function (props) { return props.display || "flex"; }, alignItems, background, border, borderRight, borderLeft, borderTop, borderBottom, borderColor, borderRadius, borderStyle, borderWidth, boxShadow, function (_a) {
+var excludedProps = ["spacing", "indent", "width", "height", "color"];
+var isExcludedWebUiProp = function (propName) {
+    return excludedProps.indexOf(propName) !== -1;
+};
+var getPaddingRule = function (props) {
+    return props.spacing || props.indent
+        ? "padding: " + numberOrZero(props.spacing) * (props.themeSpacing || 10) + "px\n    " + numberOrZero(props.indent) * (props.themeIndent || 10) + "px;"
+        : "";
+};
+var FlexBox = styled("div", {
+    shouldForwardProp: function (propName) {
+        return isExcludedWebUiProp(propName) ? false : isPropValid(propName);
+    }
+})(templateObject_1$2 || (templateObject_1$2 = __makeTemplateObject(["\n  box-sizing: border-box;\n  display: ", ";\n  ", ";\n  ", ";\n  ", ";\n  ", ";\n  ", ";\n  ", ";\n  ", ";\n  ", ";\n  ", ";\n  ", ";\n  ", ";\n  ", ";\n  ", "\n  ", ";\n  flex-direction: ", ";\n  ", ";\n  ", ";\n  ", ";\n  ", "\n  ", ";\n  ", ";\n  ", ";\n  ", ";\n  ", ";\n  ", ";\n  ", ";\n  :hover {\n    background: ", ";\n    border: ", ";\n  }\n"], ["\n  box-sizing: border-box;\n  display: ", ";\n  ", ";\n  ", ";\n  ", ";\n  ", ";\n  ", ";\n  ", ";\n  ", ";\n  ", ";\n  ", ";\n  ", ";\n  ", ";\n  ", ";\n  ", "\n  ", ";\n  flex-direction: ",
+    ";\n  ", ";\n  ", ";\n  ", ";\n  ", "\n  ", ";\n  ", ";\n  ", ";\n  ", ";\n  ", ";\n  ", ";\n  ", ";\n  :hover {\n    background: ", ";\n    border: ", ";\n  }\n"])), function (props) { return props.display || "flex"; }, alignItems, background, border, borderRight, borderLeft, borderTop, borderBottom, borderColor, borderRadius, borderStyle, borderWidth, boxShadow, function (_a) {
     var color = _a.color;
@@ -204,5 +207,3 @@ return (color ? "color: " + color + ";" : "");
     return (props.row && "row") || props.flexDirection || "column";
-}, flexWrap, height, justifyContent, minHeight, minWidth, maxHeight, maxWidth, overflow, function (props) {
-    return numberOrZero(props.spacing) * (props.themeSpacing || 10);
-}, function (props) { return numberOrZero(props.indent) * (props.themeIndent || 10); }, position, width, zIndex, left, right, top, bottom, function (_a) {
+}, flexWrap, justifyContent, overflow, getPaddingRule, position, layout, zIndex, left, right, top, bottom, function (_a) {
     var hoverBackground = _a.hoverBackground;
@@ -326,3 +327,17 @@ return hoverBackground;
 
-var SpanWithHover = styled.span(templateObject_1$3 || (templateObject_1$3 = __makeTemplateObject(["\n  ", ";\n  ", ";\n  ", ";\n  ", ";\n  ", "\n  user-select: ", ";\n  text-decoration: ", ";\n  white-space: ", ";\n  font-style: ", ";\n  :hover {\n    ", ";\n  }\n"], ["\n  ", ";\n  ", ";\n  ", ";\n  ", ";\n  ", "\n  user-select: ", ";\n  text-decoration: ", ";\n  white-space: ", ";\n  font-style: ", ";\n  :hover {\n    ",
+var excludedProps$1 = [
+    "fontSize",
+    "fontWeight",
+    "fontFamily",
+    "color",
+    "textAlign"
+];
+var isExcludedWebuiProp = function (propName) {
+    return excludedProps$1.indexOf(propName) !== -1;
+};
+var SpanWithHover = styled("span", {
+    shouldForwardProp: function (propName) {
+        return isExcludedWebuiProp(propName) ? false : isPropValid(propName);
+    }
+})(templateObject_1$3 || (templateObject_1$3 = __makeTemplateObject(["\n  ", ";\n  ", ";\n  ", ";\n  ", ";\n  ", ";\n  user-select: ", ";\n  text-decoration: ", ";\n  white-space: ", ";\n  font-style: ", ";\n  :hover {\n    ", ";\n  }\n"], ["\n  ", ";\n  ", ";\n  ", ";\n  ", ";\n  ", ";\n  user-select: ", ";\n  text-decoration: ", ";\n  white-space: ", ";\n  font-style: ", ";\n  :hover {\n    ",
     ";\n  }\n"])), function (_a) {
@@ -387,2 +402,13 @@ var color = _a.color;
 
+var mergeTheme = function (theme, partialTheme) {
+    return merge({}, theme, partialTheme);
+};
+
+var ThemeProvider = function (_a) {
+    var value = _a.value, children = _a.children;
+    var parentTheme = useTheme();
+    var mergedValue = useMemo(function () { return mergeTheme(parentTheme, value); }, [parentTheme, value]);
+    return (createElement(ThemeContext.Provider, { value: mergedValue }, children));
+};
+
 var useBoolean = function (initialValue) {
@@ -389,0 +415,0 @@ var _a = useState(initialValue), value = _a[0], setValue = _a[1];

dist/index.js

@@ -8,5 +8,6 @@ 'use strict';
 var React = require('react');
-var lodash = require('lodash');
 var styled = _interopDefault(require('@emotion/styled'));
+var isPropValid = _interopDefault(require('@emotion/is-prop-valid'));
 var styledSystem = require('styled-system');
+var lodash = require('lodash');
 
@@ -80,13 +81,3 @@ var defaultTheme = {
 
-var mergeTheme = function (theme, partialTheme) {
-    return lodash.merge({}, theme, partialTheme);
-};
-
 var ThemeContext = React.createContext(defaultTheme);
-var ThemeProvider = function (_a) {
-    var value = _a.value, children = _a.children;
-    var parentTheme = useTheme();
-    var mergedValue = React.useMemo(function () { return mergeTheme(parentTheme, value); }, [parentTheme, value]);
-    return (React.createElement(ThemeContext.Provider, { value: mergedValue }, children));
-};
 
@@ -203,5 +194,17 @@ var useTheme = function () {
 
-var FlexBox = styled.div(templateObject_1$2 || (templateObject_1$2 = __makeTemplateObject(["\n  box-sizing: border-box;\n  display: ", ";\n  ", ";\n  ", ";\n  ", ";\n  ", ";\n  ", ";\n  ", ";\n  ", ";\n  ", ";\n  ", ";\n  ", ";\n  ", ";\n  ", ";\n  ", "\n  ", ";\n  flex-direction: ", ";\n  ", ";\n  ", ";\n  ", ";\n  ", ";\n  ", ";\n  ", ";\n  ", ";\n  ", ";\n  padding: ", "px\n    ", "px;\n  ", "\n  ", ";\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  :hover {\n    background: ", ";\n    border: ", ";\n  }\n"], ["\n  box-sizing: border-box;\n  display: ", ";\n  ", ";\n  ", ";\n  ", ";\n  ", ";\n  ", ";\n  ", ";\n  ", ";\n  ", ";\n  ", ";\n  ", ";\n  ", ";\n  ", ";\n  ", "\n  ", ";\n  flex-direction: ",
-    ";\n  ", ";\n  ", ";\n  ", ";\n  ", ";\n  ", ";\n  ", ";\n  ", ";\n  ", ";\n  padding: ",
-    "px\n    ", "px;\n  ", "\n  ", ";\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  :hover {\n    background: ", ";\n    border: ", ";\n  }\n"])), function (props) { return props.display || "flex"; }, styledSystem.alignItems, styledSystem.background, styledSystem.border, styledSystem.borderRight, styledSystem.borderLeft, styledSystem.borderTop, styledSystem.borderBottom, styledSystem.borderColor, styledSystem.borderRadius, styledSystem.borderStyle, styledSystem.borderWidth, styledSystem.boxShadow, function (_a) {
+var excludedProps = ["spacing", "indent", "width", "height", "color"];
+var isExcludedWebUiProp = function (propName) {
+    return excludedProps.indexOf(propName) !== -1;
+};
+var getPaddingRule = function (props) {
+    return props.spacing || props.indent
+        ? "padding: " + numberOrZero(props.spacing) * (props.themeSpacing || 10) + "px\n    " + numberOrZero(props.indent) * (props.themeIndent || 10) + "px;"
+        : "";
+};
+var FlexBox = styled("div", {
+    shouldForwardProp: function (propName) {
+        return isExcludedWebUiProp(propName) ? false : isPropValid(propName);
+    }
+})(templateObject_1$2 || (templateObject_1$2 = __makeTemplateObject(["\n  box-sizing: border-box;\n  display: ", ";\n  ", ";\n  ", ";\n  ", ";\n  ", ";\n  ", ";\n  ", ";\n  ", ";\n  ", ";\n  ", ";\n  ", ";\n  ", ";\n  ", ";\n  ", "\n  ", ";\n  flex-direction: ", ";\n  ", ";\n  ", ";\n  ", ";\n  ", "\n  ", ";\n  ", ";\n  ", ";\n  ", ";\n  ", ";\n  ", ";\n  ", ";\n  :hover {\n    background: ", ";\n    border: ", ";\n  }\n"], ["\n  box-sizing: border-box;\n  display: ", ";\n  ", ";\n  ", ";\n  ", ";\n  ", ";\n  ", ";\n  ", ";\n  ", ";\n  ", ";\n  ", ";\n  ", ";\n  ", ";\n  ", ";\n  ", "\n  ", ";\n  flex-direction: ",
+    ";\n  ", ";\n  ", ";\n  ", ";\n  ", "\n  ", ";\n  ", ";\n  ", ";\n  ", ";\n  ", ";\n  ", ";\n  ", ";\n  :hover {\n    background: ", ";\n    border: ", ";\n  }\n"])), function (props) { return props.display || "flex"; }, styledSystem.alignItems, styledSystem.background, styledSystem.border, styledSystem.borderRight, styledSystem.borderLeft, styledSystem.borderTop, styledSystem.borderBottom, styledSystem.borderColor, styledSystem.borderRadius, styledSystem.borderStyle, styledSystem.borderWidth, styledSystem.boxShadow, function (_a) {
     var color = _a.color;
@@ -211,5 +214,3 @@ return (color ? "color: " + color + ";" : "");
     return (props.row && "row") || props.flexDirection || "column";
-}, styledSystem.flexWrap, styledSystem.height, styledSystem.justifyContent, styledSystem.minHeight, styledSystem.minWidth, styledSystem.maxHeight, styledSystem.maxWidth, styledSystem.overflow, function (props) {
-    return numberOrZero(props.spacing) * (props.themeSpacing || 10);
-}, function (props) { return numberOrZero(props.indent) * (props.themeIndent || 10); }, styledSystem.position, styledSystem.width, styledSystem.zIndex, styledSystem.left, styledSystem.right, styledSystem.top, styledSystem.bottom, function (_a) {
+}, styledSystem.flexWrap, styledSystem.justifyContent, styledSystem.overflow, getPaddingRule, styledSystem.position, styledSystem.layout, styledSystem.zIndex, styledSystem.left, styledSystem.right, styledSystem.top, styledSystem.bottom, function (_a) {
     var hoverBackground = _a.hoverBackground;
@@ -333,3 +334,17 @@ return hoverBackground;
 
-var SpanWithHover = styled.span(templateObject_1$3 || (templateObject_1$3 = __makeTemplateObject(["\n  ", ";\n  ", ";\n  ", ";\n  ", ";\n  ", "\n  user-select: ", ";\n  text-decoration: ", ";\n  white-space: ", ";\n  font-style: ", ";\n  :hover {\n    ", ";\n  }\n"], ["\n  ", ";\n  ", ";\n  ", ";\n  ", ";\n  ", "\n  user-select: ", ";\n  text-decoration: ", ";\n  white-space: ", ";\n  font-style: ", ";\n  :hover {\n    ",
+var excludedProps$1 = [
+    "fontSize",
+    "fontWeight",
+    "fontFamily",
+    "color",
+    "textAlign"
+];
+var isExcludedWebuiProp = function (propName) {
+    return excludedProps$1.indexOf(propName) !== -1;
+};
+var SpanWithHover = styled("span", {
+    shouldForwardProp: function (propName) {
+        return isExcludedWebuiProp(propName) ? false : isPropValid(propName);
+    }
+})(templateObject_1$3 || (templateObject_1$3 = __makeTemplateObject(["\n  ", ";\n  ", ";\n  ", ";\n  ", ";\n  ", ";\n  user-select: ", ";\n  text-decoration: ", ";\n  white-space: ", ";\n  font-style: ", ";\n  :hover {\n    ", ";\n  }\n"], ["\n  ", ";\n  ", ";\n  ", ";\n  ", ";\n  ", ";\n  user-select: ", ";\n  text-decoration: ", ";\n  white-space: ", ";\n  font-style: ", ";\n  :hover {\n    ",
     ";\n  }\n"])), function (_a) {
@@ -394,2 +409,13 @@ var color = _a.color;
 
+var mergeTheme = function (theme, partialTheme) {
+    return lodash.merge({}, theme, partialTheme);
+};
+
+var ThemeProvider = function (_a) {
+    var value = _a.value, children = _a.children;
+    var parentTheme = useTheme();
+    var mergedValue = React.useMemo(function () { return mergeTheme(parentTheme, value); }, [parentTheme, value]);
+    return (React.createElement(ThemeContext.Provider, { value: mergedValue }, children));
+};
+
 var useBoolean = function (initialValue) {
@@ -396,0 +422,0 @@ var _a = React.useState(initialValue), value = _a[0], setValue = _a[1];

dist/theme/ThemeContext.d.ts

 import * as React from "react";
-import { PartialTheme, Theme } from "./Theme";
+import { Theme } from "./Theme";
 export declare type ThemeContextValue = Theme;
 export declare const ThemeContext: React.Context<Theme>;
-interface ThemeProviderProps {
-    value: PartialTheme;
-}
-export declare const ThemeProvider: React.FC<ThemeProviderProps>;
-export {};

package.json

 {
   "name": "@stenajs-webui/core",
-  "version": "0.0.31",
+  "version": "0.0.32",
   "description": "",
@@ -35,3 +35,3 @@ "author": "mattias800",
     "@types/react-dom": ">=16.8.4",
-    "@types/styled-system": ">=4.1.0",
+    "@types/styled-system": ">=5.0.1",
     "lodash": ">=4.17.11",
@@ -41,3 +41,3 @@ "prop-types": ">=15.5.4",
     "react-dom": ">=16.8.6",
-    "styled-system": ">=4.1.0"
+    "styled-system": ">=5.0.18"
   },
@@ -51,3 +51,3 @@ "devDependencies": {
     "@types/react-dom": "^16.8.4",
-    "@types/styled-system": "^4.1.0",
+    "@types/styled-system": "^5.0.1",
     "lodash": "^4.17.11",
@@ -57,3 +57,3 @@ "prop-types": "^15.5.4",
     "react-dom": "^16.8.6",
-    "styled-system": "^4.1.0"
+    "styled-system": "^5.0.18"
   },
@@ -63,3 +63,6 @@ "files": [
   ],
-  "gitHead": "90b632f7993d6bed34eee4d35dcb13f131494be1"
+  "gitHead": "328fbf60f13d5ddf8e0c8be9e3cc8e3d6cae67ef",
+  "dependencies": {
+    "@emotion/is-prop-valid": "^0.8.2"
+  }
 }

No alert changes

Improved metrics

Total package byte prevSize

169446

2.59%

Number of package files

67

3.08%

Lines of code

1513

3.49%

Worsened metrics

Dependency count

12

9.09%

Dependency changes

• + Added

  @emotion/is-prop-valid@^0.8.2

• + Added

  @emotion/is-prop-valid@0.8.8
  (transitive)

• + Added

  @emotion/memoize@0.7.4
  (transitive)

• + Added

  @types/react@19.1.0
  (transitive)

• + Added

  @types/react-dom@19.1.1
  (transitive)

• - Removed

  @types/react@19.0.12
  (transitive)

• - Removed

  @types/react-dom@19.0.4
  (transitive)