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

Comparing version 1.3.0 to 1.3.1

CHANGELOG.md

 # Change Log
 
+## 1.3.1
+
+### Patch Changes
+
+- [`d86a0f6b4`](https://github.com/chakra-ui/chakra-ui/commit/d86a0f6b4cfcaaf759559325c8fe8b9376f7548b)
+  Thanks [@segunadebayo](https://github.com/segunadebayo)! - - Refactor form
+  label to use prop getter instead of hook for better consistency
+  - Replace `withFlushSync` with `scheduleMicrotask` callback to prevent
+    ReactDOM warning when an element us focused by calling `.focus()`. This
+    works as well in concurrent mode.
+- Updated dependencies
+  [[`87a03b320`](https://github.com/chakra-ui/chakra-ui/commit/87a03b320b62e639ca4a891186f202cb839a8402),
+  [`1a04a41bd`](https://github.com/chakra-ui/chakra-ui/commit/1a04a41bd2285069011a738fff422ba1a6fcce94),
+  [`e481ba491`](https://github.com/chakra-ui/chakra-ui/commit/e481ba4914a7f163d93d4c22e2e457f1afb08721)]:
+  - @chakra-ui/react-utils@1.1.1
+  - @chakra-ui/utils@1.5.1
+  - @chakra-ui/hooks@1.3.1
+  - @chakra-ui/icon@1.1.5
+
 ## 1.3.0
@@ -4,0 +23,0 @@

dist/cjs/form-control.js

@@ -92,2 +92,23 @@ "use strict";
   }, [helpTextId]);
+  var getLabelProps = React.useCallback(function (props, forwardedRef) {
+    var _props$id, _props$htmlFor;
+
+    if (props === void 0) {
+      props = {};
+    }
+
+    if (forwardedRef === void 0) {
+      forwardedRef = null;
+    }
+
+    return _extends({}, props, {
+      ref: forwardedRef,
+      "data-focus": (0, _utils.dataAttr)(isFocused),
+      "data-disabled": (0, _utils.dataAttr)(isDisabled),
+      "data-invalid": (0, _utils.dataAttr)(isInvalid),
+      "data-readonly": (0, _utils.dataAttr)(isReadOnly),
+      id: (_props$id = props.id) != null ? _props$id : labelId,
+      htmlFor: (_props$htmlFor = props.htmlFor) != null ? _props$htmlFor : id
+    });
+  }, [id, isDisabled, isFocused, isInvalid, isReadOnly, labelId]);
   var getErrorMessageProps = React.useCallback(function (props, forwardedRef) {
@@ -130,2 +151,21 @@ if (props === void 0) {
   }, [htmlProps]);
+  var getRequiredIndicatorProps = React.useCallback(function (props, forwardedRef) {
+    if (props === void 0) {
+      props = {};
+    }
+
+    if (forwardedRef === void 0) {
+      forwardedRef = null;
+    }
+
+    return _extends({}, props, {
+      ref: forwardedRef,
+      role: "presentation",
+      "aria-hidden": true,
+      children: props.children || "*"
+    });
+  }, []);
+  var onFocus = React.useCallback(function () {
+    (0, _utils.scheduleMicrotask)(setFocus.on);
+  }, [setFocus]);
   return {
@@ -137,3 +177,3 @@ isRequired: !!isRequired,
     isFocused: !!isFocused,
-    onFocus: (0, _reactUtils.withFlushSync)(setFocus.on),
+    onFocus: onFocus,
     onBlur: setFocus.off,
@@ -151,3 +191,5 @@ hasFeedbackText: hasFeedbackText,
     getErrorMessageProps: getErrorMessageProps,
-    getRootProps: getRootProps
+    getRootProps: getRootProps,
+    getLabelProps: getLabelProps,
+    getRequiredIndicatorProps: getRequiredIndicatorProps
   };
@@ -154,0 +196,0 @@ }

dist/cjs/form-label.js

 "use strict";
 
 exports.__esModule = true;
-exports.useFieldLabel = useFieldLabel;
 exports.RequiredIndicator = exports.FormLabel = void 0;
@@ -19,20 +18,6 @@
 
-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; }
-
 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); }
 
-function useFieldLabel(props) {
-  var _props$id, _props$htmlFor;
+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; }
 
-  var field = (0, _formControl.useFormControlContext)();
-  return _extends({}, props, {
-    "data-focus": (0, _utils.dataAttr)(field == null ? void 0 : field.isFocused),
-    "data-disabled": (0, _utils.dataAttr)(field == null ? void 0 : field.isDisabled),
-    "data-invalid": (0, _utils.dataAttr)(field == null ? void 0 : field.isInvalid),
-    "data-readonly": (0, _utils.dataAttr)(field == null ? void 0 : field.isReadOnly),
-    id: (_props$id = props.id) != null ? _props$id : field == null ? void 0 : field.labelId,
-    htmlFor: (_props$htmlFor = props.htmlFor) != null ? _props$htmlFor : field == null ? void 0 : field.id
-  });
-}
-
 /**
@@ -56,6 +41,4 @@ * Used to enhance the usability of form controls.
 
-  var ownProps = useFieldLabel(rest);
   var field = (0, _formControl.useFormControlContext)();
-  return /*#__PURE__*/React.createElement(_system.chakra.label, _extends({
-    ref: ref,
+  return /*#__PURE__*/React.createElement(_system.chakra.label, _extends({}, field == null ? void 0 : field.getLabelProps(rest, ref), {
     className: (0, _utils.cx)("chakra-form__label", props.className),
@@ -66,3 +49,3 @@ __css: _extends({
     }, styles)
-  }, ownProps), children, field != null && field.isRequired ? requiredIndicator : null);
+  }), children, field != null && field.isRequired ? requiredIndicator : null);
 });
@@ -80,20 +63,10 @@ exports.FormLabel = FormLabel;
 var RequiredIndicator = /*#__PURE__*/(0, _system.forwardRef)(function (props, ref) {
-  var children = props.children,
-      className = props.className,
-      rest = _objectWithoutPropertiesLoose(props, ["children", "className"]);
-
   var field = (0, _formControl.useFormControlContext)();
   var styles = (0, _system.useStyles)();
   if (!(field != null && field.isRequired)) return null;
-
-  var _className = (0, _utils.cx)("chakra-form__required-indicator", className);
-
-  return /*#__PURE__*/React.createElement(_system.chakra.span, _extends({
-    role: "presentation",
-    "aria-hidden": true,
-    ref: ref
-  }, rest, {
+  var className = (0, _utils.cx)("chakra-form__required-indicator", props.className);
+  return /*#__PURE__*/React.createElement(_system.chakra.span, _extends({}, field == null ? void 0 : field.getRequiredIndicatorProps(props, ref), {
     __css: styles.requiredIndicator,
-    className: _className
-  }), children || "*");
+    className: className
+  }));
 });
@@ -100,0 +73,0 @@ exports.RequiredIndicator = RequiredIndicator;

dist/esm/form-control.js

@@ -7,4 +7,4 @@ 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 { chakra, forwardRef, omitThemingProps, StylesProvider, useMultiStyleConfig, useStyles } from "@chakra-ui/system";
-import { cx, __DEV__ } from "@chakra-ui/utils";
-import { createContext, withFlushSync, mergeRefs } from "@chakra-ui/react-utils";
+import { cx, dataAttr, __DEV__, scheduleMicrotask } from "@chakra-ui/utils";
+import { createContext, mergeRefs } from "@chakra-ui/react-utils";
 import * as React from "react";
@@ -69,2 +69,23 @@ var [FormControlProvider, useFormControlContext] = createContext({
   }, [helpTextId]);
+  var getLabelProps = React.useCallback(function (props, forwardedRef) {
+    var _props$id, _props$htmlFor;
+
+    if (props === void 0) {
+      props = {};
+    }
+
+    if (forwardedRef === void 0) {
+      forwardedRef = null;
+    }
+
+    return _extends({}, props, {
+      ref: forwardedRef,
+      "data-focus": dataAttr(isFocused),
+      "data-disabled": dataAttr(isDisabled),
+      "data-invalid": dataAttr(isInvalid),
+      "data-readonly": dataAttr(isReadOnly),
+      id: (_props$id = props.id) != null ? _props$id : labelId,
+      htmlFor: (_props$htmlFor = props.htmlFor) != null ? _props$htmlFor : id
+    });
+  }, [id, isDisabled, isFocused, isInvalid, isReadOnly, labelId]);
   var getErrorMessageProps = React.useCallback(function (props, forwardedRef) {
@@ -107,2 +128,21 @@ if (props === void 0) {
   }, [htmlProps]);
+  var getRequiredIndicatorProps = React.useCallback(function (props, forwardedRef) {
+    if (props === void 0) {
+      props = {};
+    }
+
+    if (forwardedRef === void 0) {
+      forwardedRef = null;
+    }
+
+    return _extends({}, props, {
+      ref: forwardedRef,
+      role: "presentation",
+      "aria-hidden": true,
+      children: props.children || "*"
+    });
+  }, []);
+  var onFocus = React.useCallback(() => {
+    scheduleMicrotask(setFocus.on);
+  }, [setFocus]);
   return {
@@ -114,3 +154,3 @@ isRequired: !!isRequired,
     isFocused: !!isFocused,
-    onFocus: withFlushSync(setFocus.on),
+    onFocus,
     onBlur: setFocus.off,
@@ -128,3 +168,5 @@ hasFeedbackText,
     getErrorMessageProps,
-    getRootProps
+    getRootProps,
+    getLabelProps,
+    getRequiredIndicatorProps
   };
@@ -131,0 +173,0 @@ }

dist/esm/form-label.js

@@ -0,23 +1,10 @@
+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); }
+
 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; }
 
-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 { chakra, forwardRef, omitThemingProps, useStyleConfig, useStyles } from "@chakra-ui/system";
-import { cx, dataAttr, __DEV__ } from "@chakra-ui/utils";
+import { cx, __DEV__ } from "@chakra-ui/utils";
 import * as React from "react";
 import { useFormControlContext } from "./form-control";
-export function useFieldLabel(props) {
-  var _props$id, _props$htmlFor;
 
-  var field = useFormControlContext();
-  return _extends({}, props, {
-    "data-focus": dataAttr(field == null ? void 0 : field.isFocused),
-    "data-disabled": dataAttr(field == null ? void 0 : field.isDisabled),
-    "data-invalid": dataAttr(field == null ? void 0 : field.isInvalid),
-    "data-readonly": dataAttr(field == null ? void 0 : field.isReadOnly),
-    id: (_props$id = props.id) != null ? _props$id : field == null ? void 0 : field.labelId,
-    htmlFor: (_props$htmlFor = props.htmlFor) != null ? _props$htmlFor : field == null ? void 0 : field.id
-  });
-}
-
 /**
@@ -41,6 +28,4 @@ * Used to enhance the usability of form controls.
 
-  var ownProps = useFieldLabel(rest);
   var field = useFormControlContext();
-  return /*#__PURE__*/React.createElement(chakra.label, _extends({
-    ref: ref,
+  return /*#__PURE__*/React.createElement(chakra.label, _extends({}, field == null ? void 0 : field.getLabelProps(rest, ref), {
     className: cx("chakra-form__label", props.className),
@@ -51,3 +36,3 @@ __css: _extends({
     }, styles)
-  }, ownProps), children, field != null && field.isRequired ? requiredIndicator : null);
+  }), children, field != null && field.isRequired ? requiredIndicator : null);
 });
@@ -64,22 +49,10 @@
 export var RequiredIndicator = /*#__PURE__*/forwardRef((props, ref) => {
-  var {
-    children,
-    className
-  } = props,
-      rest = _objectWithoutPropertiesLoose(props, ["children", "className"]);
-
   var field = useFormControlContext();
   var styles = useStyles();
   if (!(field != null && field.isRequired)) return null;
-
-  var _className = cx("chakra-form__required-indicator", className);
-
-  return /*#__PURE__*/React.createElement(chakra.span, _extends({
-    role: "presentation",
-    "aria-hidden": true,
-    ref: ref
-  }, rest, {
+  var className = cx("chakra-form__required-indicator", props.className);
+  return /*#__PURE__*/React.createElement(chakra.span, _extends({}, field == null ? void 0 : field.getRequiredIndicatorProps(props, ref), {
     __css: styles.requiredIndicator,
-    className: _className
-  }), children || "*");
+    className: className
+  }));
 });
@@ -86,0 +59,0 @@

dist/types/form-control.d.ts

 import { HTMLChakraProps, ThemingProps } from "@chakra-ui/system";
-import { PropGetter } from "@chakra-ui/react-utils";
+import { PropGetter, PropGetterV2 } from "@chakra-ui/react-utils";
 import * as React from "react";
@@ -49,3 +49,3 @@ export interface FormControlOptions {
     isFocused: boolean;
-    onFocus: (event: any) => void;
+    onFocus: () => void;
     onBlur: () => void;
@@ -69,4 +69,6 @@ hasFeedbackText: boolean;
     getErrorMessageProps: PropGetter<any, {}>;
-    getRootProps: PropGetter<any, {}>;
-}, "isRequired" | "isInvalid" | "isReadOnly" | "isDisabled" | "id" | "isFocused" | "onFocus" | "onBlur" | "hasFeedbackText" | "setHasFeedbackText" | "hasHelpText" | "setHasHelpText" | "labelId" | "feedbackId" | "helpTextId" | "getHelpTextProps" | "getErrorMessageProps">;
+    getRootProps: PropGetterV2<"div", {}>;
+    getLabelProps: PropGetterV2<"label", {}>;
+    getRequiredIndicatorProps: PropGetter<any, {}>;
+}, "isRequired" | "isInvalid" | "isReadOnly" | "isDisabled" | "id" | "onFocus" | "onBlur" | "isFocused" | "hasFeedbackText" | "setHasFeedbackText" | "hasHelpText" | "setHasHelpText" | "labelId" | "feedbackId" | "helpTextId" | "getHelpTextProps" | "getErrorMessageProps" | "getLabelProps" | "getRequiredIndicatorProps">;
 export { useFormControlContext };
@@ -73,0 +75,0 @@ export interface FormControlProps extends HTMLChakraProps<"div">, ThemingProps<"FormControl">, FormControlContext {

dist/types/form-label.d.ts

 import { HTMLChakraProps, ThemingProps } from "@chakra-ui/system";
-import { Dict } from "@chakra-ui/utils";
 import * as React from "react";
-export declare function useFieldLabel(props: Dict): {
-    "data-focus": boolean | "true" | "false";
-    "data-disabled": boolean | "true" | "false";
-    "data-invalid": boolean | "true" | "false";
-    "data-readonly": boolean | "true" | "false";
-    id: any;
-    htmlFor: any;
-};
 export interface FormLabelProps extends HTMLChakraProps<"label">, ThemingProps<"FormLabel"> {
@@ -13,0 +4,0 @@ /**

package.json

 {
   "name": "@chakra-ui/form-control",
-  "version": "1.3.0",
+  "version": "1.3.1",
   "description": "React component to provide validation states to form fields",
@@ -58,9 +58,9 @@ "keywords": [
   "dependencies": {
-    "@chakra-ui/hooks": "1.3.0",
-    "@chakra-ui/icon": "1.1.4",
-    "@chakra-ui/react-utils": "1.1.0",
-    "@chakra-ui/utils": "1.5.0"
+    "@chakra-ui/hooks": "1.3.1",
+    "@chakra-ui/icon": "1.1.5",
+    "@chakra-ui/react-utils": "1.1.1",
+    "@chakra-ui/utils": "1.5.1"
   },
   "devDependencies": {
-    "@chakra-ui/system": "1.6.0",
+    "@chakra-ui/system": "1.6.1",
     "react": "^17.0.1"
@@ -67,0 +67,0 @@ },

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

Improved metrics

Total package byte prevSize

118834

increased by2.6%

Lines of code

985

increased by2.39%

Dependency changes

• + Added@chakra-ui/hooks@1.3.1(transitive)

• + Added@chakra-ui/icon@1.1.5(transitive)

• + Added@chakra-ui/react-utils@1.1.1(transitive)

• + Added@chakra-ui/utils@1.5.1(transitive)

• - Removed@chakra-ui/hooks@1.3.0(transitive)

• - Removed@chakra-ui/icon@1.1.4(transitive)

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

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

• - Removedreact-dom@18.3.1(transitive)

• - Removedscheduler@0.23.2(transitive)

• Updated@chakra-ui/hooks@1.3.1

• Updated@chakra-ui/icon@1.1.5

• Updated@chakra-ui/react-utils@1.1.1

• Updated@chakra-ui/utils@1.5.1