@chakra-ui/form-control - npm Package Compare versions

Comparing version 1.0.0-next.4 to 1.0.0-next.5

CHANGELOG.md

@@ -6,2 +6,11 @@ # Change Log
 
+# [1.0.0-next.5](https://github.com/chakra-ui/chakra-ui/compare/@chakra-ui/form-control@1.0.0-next.4...@chakra-ui/form-control@1.0.0-next.5) (2020-07-15)
+
+**Note:** Version bump only for package @chakra-ui/form-control
+
+# Change Log
+
+All notable changes to this project will be documented in this file. See
+[Conventional Commits](https://conventionalcommits.org) for commit guidelines.
+
 # 1.0.0-next.4 (2020-07-01)
@@ -8,0 +17,0 @@

dist/cjs/form-control.js

@@ -84,13 +84,2 @@ "use strict";
 
-var StyledFormControl = (0, _system.chakra)("div", {
-  themeKey: "Form.Root",
-  baseStyle: {
-    width: "100%",
-    position: "relative"
-  },
-  attrs: {
-    role: "group"
-  }
-});
-
 /**
@@ -106,3 +95,6 @@ * FormControl
 var FormControl = /*#__PURE__*/(0, _system.forwardRef)(function FormControl(props, ref) {
-  var _useProvider = useProvider(props),
+  var styles = (0, _system.useStyleConfig)("Form", props);
+  var rest = (0, _system.omitThemingProps)(props);
+
+  var _useProvider = useProvider(rest),
       htmlProps = _useProvider.htmlProps,
@@ -115,7 +107,14 @@ context = _objectWithoutPropertiesLoose(_useProvider, ["htmlProps"]);
     value: context
-  }, /*#__PURE__*/React.createElement(StyledFormControl, _extends({
+  }, /*#__PURE__*/React.createElement(_system.StylesProvider, {
+    value: styles
+  }, /*#__PURE__*/React.createElement(_system.chakra.div, _extends({
+    role: "group",
     ref: ref
   }, htmlProps, {
-    className: _className
-  })));
+    className: _className,
+    __css: {
+      width: "100%",
+      position: "relative"
+    }
+  }))));
 });
@@ -127,11 +126,4 @@ exports.FormControl = FormControl;
 }
-/**
- * Label - Theming
- *
- * To style form labels globally, change the styles in `theme.components.FormLabel`
- */
 
-
 var StyledLabel = (0, _system.chakra)("label", {
-  themeKey: "Form.Label",
   baseStyle: {
@@ -149,3 +141,3 @@ display: "block",
  *
- * ♿️ Accessibilty: Every form field should have a form label.
+ * ♿️ Accessibility: Every form field should have a form label.
  */
@@ -156,6 +148,8 @@ var FormLabel = /*#__PURE__*/(0, _system.forwardRef)(function FormLabel(props, ref) {
 
+  var styles = (0, _system.useStyles)();
   var ownProps = (0, _useFormControl.useFormControlLabel)(rest);
   return /*#__PURE__*/React.createElement(StyledLabel, _extends({
     ref: ref,
-    className: (0, _utils.cx)("chakra-form__label", props.className)
+    className: (0, _utils.cx)("chakra-form__label", props.className),
+    __css: styles.label
   }, ownProps));
@@ -168,18 +162,3 @@ });
 }
-/**
- * RequiredIndicator - Theming
- *
- * To style the required indicator globally, change the styled in
- * `theme.components.Form` under the `RequiredIndicator` key
- */
 
-
-var StyledIndicator = (0, _system.chakra)("span", {
-  themeKey: "Form.RequiredIndicator",
-  attrs: {
-    role: "presentation",
-    "aria-hidden": true
-  }
-});
-
 /**
@@ -191,2 +170,3 @@ * Used to show a "required" text or an asterisks (*) to indicate that
   var field = useFormControlContext();
+  var styles = (0, _system.useStyles)();
   if (!(field == null ? void 0 : field.isRequired)) return null;
@@ -196,5 +176,8 @@
 
-  return /*#__PURE__*/React.createElement(StyledIndicator, _extends({
+  return /*#__PURE__*/React.createElement(_system.chakra.span, _extends({
+    role: "presentation",
+    "aria-hidden": true,
     ref: ref
   }, props, {
+    __css: styles.requiredIndicator,
     className: _className,
@@ -209,14 +192,3 @@ children: props.children || "*"
 }
-/**
- * FormHelperText - Theming
- *
- * To style the required indicator globally, change the styled in
- * `theme.components.Form` under the `HelperText` key
- */
 
-
-var StyledHelperText = (0, _system.chakra)("div", {
-  themeKey: "Form.HelperText"
-});
-
 /**
@@ -233,2 +205,3 @@ * FormHelperText
   var field = useFormControlContext();
+  var styles = (0, _system.useStyles)();
   /**
@@ -248,4 +221,5 @@ * Notify the field context when the help text is rendered on
 
-  return /*#__PURE__*/React.createElement(StyledHelperText, _extends({
-    ref: ref
+  return /*#__PURE__*/React.createElement(_system.chakra.div, _extends({
+    ref: ref,
+    __css: styles.helperText
   }, props, {
@@ -261,18 +235,7 @@ className: _className,
 }
-/**
- * ErrorText Theming
- *
- * To style the error text globally, change the styles in
- * `theme.components.Form` under the `ErrorText` key
- */
 
-
 var StyledErrorText = (0, _system.chakra)("div", {
-  themeKey: "Form.ErrorText",
   baseStyle: {
     display: "flex",
     alignItems: "center"
-  },
-  attrs: {
-    "aria-live": "polite"
   }
@@ -288,2 +251,3 @@ });
 
+  var styles = (0, _system.useStyles)();
   var field = useFormControlContext();
@@ -295,4 +259,6 @@ if (!(field == null ? void 0 : field.isInvalid)) return null;
   return /*#__PURE__*/React.createElement(StyledErrorText, _extends({
+    "aria-live": "polite",
     ref: ref
   }, props, {
+    __css: styles.errorText,
     className: _className,
@@ -314,5 +280,3 @@ id: (_props$id2 = props.id) != null ? _props$id2 : field == null ? void 0 : field.feedbackId
 var FormErrorIcon = /*#__PURE__*/(0, _system.forwardRef)(function FormErrorIcon(props, ref) {
-  var styles = (0, _system.useComponentStyle)({
-    themeKey: "Form.ErrorIcon"
-  });
+  var styles = (0, _system.useStyles)();
   var field = useFormControlContext();
@@ -325,5 +289,5 @@ if (!(field == null ? void 0 : field.isInvalid)) return null;
     ref: ref,
-    "aria-hidden": true,
-    sx: styles
+    "aria-hidden": true
   }, props, {
+    __css: styles.errorIcon,
     className: _className
@@ -330,0 +294,0 @@ }), /*#__PURE__*/React.createElement("path", {

dist/esm/form-control.js

@@ -7,3 +7,3 @@ function _extends() { _extends = Object.assign || 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); }
 import { Icon } from "@chakra-ui/icon";
-import { chakra, forwardRef, useComponentStyle } from "@chakra-ui/system";
+import { chakra, forwardRef, useStyles, StylesProvider, useStyleConfig, omitThemingProps } from "@chakra-ui/system";
 import { createContext, cx, __DEV__ } from "@chakra-ui/utils";
@@ -63,13 +63,2 @@ import * as React from "react";
 
-var StyledFormControl = chakra("div", {
-  themeKey: "Form.Root",
-  baseStyle: {
-    width: "100%",
-    position: "relative"
-  },
-  attrs: {
-    role: "group"
-  }
-});
-
 /**
@@ -85,3 +74,6 @@ * FormControl
 export var FormControl = /*#__PURE__*/forwardRef(function FormControl(props, ref) {
-  var _useProvider = useProvider(props),
+  var styles = useStyleConfig("Form", props);
+  var rest = omitThemingProps(props);
+
+  var _useProvider = useProvider(rest),
       {
@@ -96,7 +88,14 @@ htmlProps
     value: context
-  }, /*#__PURE__*/React.createElement(StyledFormControl, _extends({
+  }, /*#__PURE__*/React.createElement(StylesProvider, {
+    value: styles
+  }, /*#__PURE__*/React.createElement(chakra.div, _extends({
+    role: "group",
     ref: ref
   }, htmlProps, {
-    className: _className
-  })));
+    className: _className,
+    __css: {
+      width: "100%",
+      position: "relative"
+    }
+  }))));
 });
@@ -107,11 +106,4 @@
 }
-/**
- * Label - Theming
- *
- * To style form labels globally, change the styles in `theme.components.FormLabel`
- */
 
-
 var StyledLabel = chakra("label", {
-  themeKey: "Form.Label",
   baseStyle: {
@@ -129,3 +121,3 @@ display: "block",
  *
- * ♿️ Accessibilty: Every form field should have a form label.
+ * ♿️ Accessibility: Every form field should have a form label.
  */
@@ -135,6 +127,8 @@ export var FormLabel = /*#__PURE__*/forwardRef(function FormLabel(props, ref) {
 
+  var styles = useStyles();
   var ownProps = useFormControlLabel(rest);
   return /*#__PURE__*/React.createElement(StyledLabel, _extends({
     ref: ref,
-    className: cx("chakra-form__label", props.className)
+    className: cx("chakra-form__label", props.className),
+    __css: styles.label
   }, ownProps));
@@ -146,18 +140,3 @@ });
 }
-/**
- * RequiredIndicator - Theming
- *
- * To style the required indicator globally, change the styled in
- * `theme.components.Form` under the `RequiredIndicator` key
- */
 
-
-var StyledIndicator = chakra("span", {
-  themeKey: "Form.RequiredIndicator",
-  attrs: {
-    role: "presentation",
-    "aria-hidden": true
-  }
-});
-
 /**
@@ -169,2 +148,3 @@ * Used to show a "required" text or an asterisks (*) to indicate that
   var field = useFormControlContext();
+  var styles = useStyles();
   if (!(field == null ? void 0 : field.isRequired)) return null;
@@ -174,5 +154,8 @@
 
-  return /*#__PURE__*/React.createElement(StyledIndicator, _extends({
+  return /*#__PURE__*/React.createElement(chakra.span, _extends({
+    role: "presentation",
+    "aria-hidden": true,
     ref: ref
   }, props, {
+    __css: styles.requiredIndicator,
     className: _className,
@@ -186,14 +169,3 @@ children: props.children || "*"
 }
-/**
- * FormHelperText - Theming
- *
- * To style the required indicator globally, change the styled in
- * `theme.components.Form` under the `HelperText` key
- */
 
-
-var StyledHelperText = chakra("div", {
-  themeKey: "Form.HelperText"
-});
-
 /**
@@ -210,2 +182,3 @@ * FormHelperText
   var field = useFormControlContext();
+  var styles = useStyles();
   /**
@@ -223,4 +196,5 @@ * Notify the field context when the help text is rendered on
 
-  return /*#__PURE__*/React.createElement(StyledHelperText, _extends({
-    ref: ref
+  return /*#__PURE__*/React.createElement(chakra.div, _extends({
+    ref: ref,
+    __css: styles.helperText
   }, props, {
@@ -235,18 +209,7 @@ className: _className,
 }
-/**
- * ErrorText Theming
- *
- * To style the error text globally, change the styles in
- * `theme.components.Form` under the `ErrorText` key
- */
 
-
 var StyledErrorText = chakra("div", {
-  themeKey: "Form.ErrorText",
   baseStyle: {
     display: "flex",
     alignItems: "center"
-  },
-  attrs: {
-    "aria-live": "polite"
   }
@@ -262,2 +225,3 @@ });
 
+  var styles = useStyles();
   var field = useFormControlContext();
@@ -269,4 +233,6 @@ if (!(field == null ? void 0 : field.isInvalid)) return null;
   return /*#__PURE__*/React.createElement(StyledErrorText, _extends({
+    "aria-live": "polite",
     ref: ref
   }, props, {
+    __css: styles.errorText,
     className: _className,
@@ -287,5 +253,3 @@ id: (_props$id2 = props.id) != null ? _props$id2 : field == null ? void 0 : field.feedbackId
 export var FormErrorIcon = /*#__PURE__*/forwardRef(function FormErrorIcon(props, ref) {
-  var styles = useComponentStyle({
-    themeKey: "Form.ErrorIcon"
-  });
+  var styles = useStyles();
   var field = useFormControlContext();
@@ -298,5 +262,5 @@ if (!(field == null ? void 0 : field.isInvalid)) return null;
     ref: ref,
-    "aria-hidden": true,
-    sx: styles
+    "aria-hidden": true
   }, props, {
+    __css: styles.errorIcon,
     className: _className
@@ -303,0 +267,0 @@ }), /*#__PURE__*/React.createElement("path", {

package.json

 {
   "name": "@chakra-ui/form-control",
-  "version": "1.0.0-next.4",
+  "version": "1.0.0-next.5",
   "description": "React component to provide validation states to form fields",
@@ -53,14 +53,14 @@ "keywords": [
   "dependencies": {
-    "@chakra-ui/hooks": "^1.0.0-next.4",
-    "@chakra-ui/icon": "^1.0.0-next.4",
-    "@chakra-ui/utils": "^1.0.0-next.4"
+    "@chakra-ui/hooks": "^1.0.0-next.5",
+    "@chakra-ui/icon": "^1.0.0-next.5",
+    "@chakra-ui/utils": "^1.0.0-next.5"
   },
   "devDependencies": {
-    "@chakra-ui/system": "^1.0.0-next.4"
+    "@chakra-ui/system": "^1.0.0-next.5"
   },
   "peerDependencies": {
-    "@chakra-ui/system": ">0.8",
+    "@chakra-ui/system": "^1.0.0-next.4",
     "react": "16.x"
   },
-  "gitHead": "cdd5eac1db90ba33a07c009fb8dbcc4453d6ec01"
+  "gitHead": "24eec5d796d81b6fafbcfa7231fb2cb15e6d5a29"
 }

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Worsened metrics

Total package byte prevSize

195166

decreased by-1.5%

Lines of code

1515

decreased by-6.31%

Dependency changes

• + Added@chakra-ui/color-mode@1.4.8(transitive)

• + Added@chakra-ui/react-env@1.1.6(transitive)

• + Added@chakra-ui/styled-system@1.19.0(transitive)

• + Added@chakra-ui/system@1.12.1(transitive)

• + Addedcsstype@3.0.9(transitive)

• + Addedreact-fast-compare@3.2.0(transitive)

• + Addedtslib@2.8.1(transitive)

• - Removed@chakra-ui/anatomy@2.2.2(transitive)

• - Removed@chakra-ui/color-mode@2.2.0(transitive)

• - Removed@chakra-ui/object-utils@2.1.0(transitive)

• - Removed@chakra-ui/react-use-safe-layout-effect@2.1.0(transitive)

• - Removed@chakra-ui/react-utils@2.0.12(transitive)

• - Removed@chakra-ui/shared-utils@2.0.5(transitive)

• - Removed@chakra-ui/styled-system@2.9.2(transitive)

• - Removed@chakra-ui/system@2.6.2(transitive)

• - Removed@chakra-ui/theme@3.3.1(transitive)

• - Removed@chakra-ui/theme-tools@2.1.2(transitive)

• - Removed@chakra-ui/theme-utils@2.0.21(transitive)

• - Removed@chakra-ui/utils@2.0.15(transitive)

• - Removed@types/lodash.mergewith@4.6.7(transitive)

• - Removedcolor2k@2.0.3(transitive)

• - Removedcsstype@3.1.3(transitive)

• - Removedframesync@6.1.2(transitive)

• - Removedreact@18.3.1(transitive)

• - Removedreact-fast-compare@3.2.2(transitive)

• - Removedtslib@2.4.0(transitive)

• Updated@chakra-ui/hooks@^1.0.0-next.5

• Updated@chakra-ui/icon@^1.0.0-next.5

• Updated@chakra-ui/utils@^1.0.0-next.5