@radix-ui/react-label - npm Package Compare versions

Comparing version 1.0.0 to 2.0.0-rc.1

dist/index.d.ts

 import * as React from "react";
 import * as Radix from "@radix-ui/react-primitive";
 import { Primitive } from "@radix-ui/react-primitive";
-type PrimitiveSpanProps = Radix.ComponentPropsWithoutRef<typeof Primitive.span>;
-export interface LabelProps extends PrimitiveSpanProps {
-    htmlFor?: string;
+type PrimitiveLabelProps = Radix.ComponentPropsWithoutRef<typeof Primitive.label>;
+export interface LabelProps extends PrimitiveLabelProps {
 }
-export const Label: React.ForwardRefExoticComponent<LabelProps & React.RefAttributes<HTMLSpanElement>>;
-export const useLabelContext: (element?: HTMLElement | null | undefined) => string | undefined;
-export const Root: React.ForwardRefExoticComponent<LabelProps & React.RefAttributes<HTMLSpanElement>>;
+export const Label: React.ForwardRefExoticComponent<LabelProps & React.RefAttributes<HTMLLabelElement>>;
+export const Root: React.ForwardRefExoticComponent<LabelProps & React.RefAttributes<HTMLLabelElement>>;
 
 //# sourceMappingURL=index.d.ts.map

dist/index.js

 var $RyX6d$babelruntimehelpersextends = require("@babel/runtime/helpers/extends");
 var $RyX6d$react = require("react");
-var $RyX6d$radixuireactcontext = require("@radix-ui/react-context");
-var $RyX6d$radixuireactcomposerefs = require("@radix-ui/react-compose-refs");
 var $RyX6d$radixuireactprimitive = require("@radix-ui/react-primitive");
-var $RyX6d$radixuireactid = require("@radix-ui/react-id");
 
@@ -17,60 +14,11 @@ function $parcel$export(e, n, v, s) {
 $parcel$export(module.exports, "Root", () => $2583d9c3eccdd4e2$export$be92b6f5f03c0fe9);
-$parcel$export(module.exports, "useLabelContext", () => $2583d9c3eccdd4e2$export$feddbbf47baabdb9);
 
 
 
-
-
-
 /* -------------------------------------------------------------------------------------------------
  * Label
  * -----------------------------------------------------------------------------------------------*/ const $2583d9c3eccdd4e2$var$NAME = 'Label';
-const [$2583d9c3eccdd4e2$var$LabelProvider, $2583d9c3eccdd4e2$var$useLabelContextImpl] = $RyX6d$radixuireactcontext.createContext($2583d9c3eccdd4e2$var$NAME, {
-    id: undefined,
-    controlRef: {
-        current: null
-    }
-});
 const $2583d9c3eccdd4e2$export$b04be29aa201d4f5 = /*#__PURE__*/ $RyX6d$react.forwardRef((props, forwardedRef)=>{
-    const { htmlFor: htmlFor , id: idProp , ...labelProps } = props;
-    const controlRef = $RyX6d$react.useRef(null);
-    const ref = $RyX6d$react.useRef(null);
-    const composedRefs = $RyX6d$radixuireactcomposerefs.useComposedRefs(forwardedRef, ref);
-    const id = $RyX6d$radixuireactid.useId(idProp);
-    $RyX6d$react.useEffect(()=>{
-        if (htmlFor) {
-            const element = document.getElementById(htmlFor);
-            const label = ref.current;
-            if (label && element) {
-                const getAriaLabel = ()=>element.getAttribute('aria-labelledby')
-                ;
-                const ariaLabelledBy1 = [
-                    id,
-                    getAriaLabel()
-                ].filter(Boolean).join(' ');
-                element.setAttribute('aria-labelledby', ariaLabelledBy1);
-                controlRef.current = element;
-                return ()=>{
-                    var _getAriaLabel;
-                    /**
-           * We get the latest attribute value because at the time that this cleanup fires,
-           * the values from the closure may have changed.
-           */ const ariaLabelledBy = (_getAriaLabel = getAriaLabel()) === null || _getAriaLabel === void 0 ? void 0 : _getAriaLabel.replace(id, '');
-                    if (ariaLabelledBy === '') element.removeAttribute('aria-labelledby');
-                    else if (ariaLabelledBy) element.setAttribute('aria-labelledby', ariaLabelledBy);
-                };
-            }
-        }
-    }, [
-        id,
-        htmlFor
-    ]);
-    return /*#__PURE__*/ $RyX6d$react.createElement($2583d9c3eccdd4e2$var$LabelProvider, {
-        id: id,
-        controlRef: controlRef
-    }, /*#__PURE__*/ $RyX6d$react.createElement($RyX6d$radixuireactprimitive.Primitive.span, ($parcel$interopDefault($RyX6d$babelruntimehelpersextends))({
-        role: "label",
-        id: id
-    }, labelProps, {
-        ref: composedRefs,
+    return /*#__PURE__*/ $RyX6d$react.createElement($RyX6d$radixuireactprimitive.Primitive.label, ($parcel$interopDefault($RyX6d$babelruntimehelpersextends))({}, props, {
+        ref: forwardedRef,
         onMouseDown: (event)=>{
@@ -80,20 +28,4 @@ var _props$onMouseDown;
             if (!event.defaultPrevented && event.detail > 1) event.preventDefault();
-        },
-        onClick: (event)=>{
-            var _props$onClick;
-            (_props$onClick = props.onClick) === null || _props$onClick === void 0 || _props$onClick.call(props, event);
-            if (!controlRef.current || event.defaultPrevented) return;
-            const isClickingControl = controlRef.current.contains(event.target); // Ensure event was generated by a user action
-            // https://developer.mozilla.org/en-US/docs/Web/API/Event/isTrusted
-            const isUserClick = event.isTrusted === true;
-            /**
-       * When a label is wrapped around the control it labels, we trigger the appropriate events
-       * on the control when the label is clicked. We do nothing if the user is already clicking the
-       * control inside the label.
-       */ if (!isClickingControl && isUserClick) {
-                controlRef.current.click();
-                controlRef.current.focus();
-            }
         }
-    })));
+    }));
 });
@@ -103,14 +35,3 @@ /*#__PURE__*/ Object.assign($2583d9c3eccdd4e2$export$b04be29aa201d4f5, {
 });
-/* -----------------------------------------------------------------------------------------------*/ const $2583d9c3eccdd4e2$export$feddbbf47baabdb9 = (element)=>{
-    const context = $2583d9c3eccdd4e2$var$useLabelContextImpl('LabelConsumer');
-    const { controlRef: controlRef  } = context;
-    $RyX6d$react.useEffect(()=>{
-        if (element) controlRef.current = element;
-    }, [
-        element,
-        controlRef
-    ]);
-    return context.id;
-};
-const $2583d9c3eccdd4e2$export$be92b6f5f03c0fe9 = $2583d9c3eccdd4e2$export$b04be29aa201d4f5;
+/* -----------------------------------------------------------------------------------------------*/ const $2583d9c3eccdd4e2$export$be92b6f5f03c0fe9 = $2583d9c3eccdd4e2$export$b04be29aa201d4f5;
 
@@ -117,0 +38,0 @@

dist/index.module.js

 import $7V4JZ$babelruntimehelpersesmextends from "@babel/runtime/helpers/esm/extends";
-import {forwardRef as $7V4JZ$forwardRef, useRef as $7V4JZ$useRef, useEffect as $7V4JZ$useEffect, createElement as $7V4JZ$createElement} from "react";
-import {createContext as $7V4JZ$createContext} from "@radix-ui/react-context";
-import {useComposedRefs as $7V4JZ$useComposedRefs} from "@radix-ui/react-compose-refs";
+import {forwardRef as $7V4JZ$forwardRef, createElement as $7V4JZ$createElement} from "react";
 import {Primitive as $7V4JZ$Primitive} from "@radix-ui/react-primitive";
-import {useId as $7V4JZ$useId} from "@radix-ui/react-id";
 
@@ -11,56 +8,8 @@
 
-
-
-
 /* -------------------------------------------------------------------------------------------------
  * Label
  * -----------------------------------------------------------------------------------------------*/ const $b73a6c6685e72184$var$NAME = 'Label';
-const [$b73a6c6685e72184$var$LabelProvider, $b73a6c6685e72184$var$useLabelContextImpl] = $7V4JZ$createContext($b73a6c6685e72184$var$NAME, {
-    id: undefined,
-    controlRef: {
-        current: null
-    }
-});
 const $b73a6c6685e72184$export$b04be29aa201d4f5 = /*#__PURE__*/ $7V4JZ$forwardRef((props, forwardedRef)=>{
-    const { htmlFor: htmlFor , id: idProp , ...labelProps } = props;
-    const controlRef = $7V4JZ$useRef(null);
-    const ref = $7V4JZ$useRef(null);
-    const composedRefs = $7V4JZ$useComposedRefs(forwardedRef, ref);
-    const id = $7V4JZ$useId(idProp);
-    $7V4JZ$useEffect(()=>{
-        if (htmlFor) {
-            const element = document.getElementById(htmlFor);
-            const label = ref.current;
-            if (label && element) {
-                const getAriaLabel = ()=>element.getAttribute('aria-labelledby')
-                ;
-                const ariaLabelledBy1 = [
-                    id,
-                    getAriaLabel()
-                ].filter(Boolean).join(' ');
-                element.setAttribute('aria-labelledby', ariaLabelledBy1);
-                controlRef.current = element;
-                return ()=>{
-                    var _getAriaLabel;
-                    /**
-           * We get the latest attribute value because at the time that this cleanup fires,
-           * the values from the closure may have changed.
-           */ const ariaLabelledBy = (_getAriaLabel = getAriaLabel()) === null || _getAriaLabel === void 0 ? void 0 : _getAriaLabel.replace(id, '');
-                    if (ariaLabelledBy === '') element.removeAttribute('aria-labelledby');
-                    else if (ariaLabelledBy) element.setAttribute('aria-labelledby', ariaLabelledBy);
-                };
-            }
-        }
-    }, [
-        id,
-        htmlFor
-    ]);
-    return /*#__PURE__*/ $7V4JZ$createElement($b73a6c6685e72184$var$LabelProvider, {
-        id: id,
-        controlRef: controlRef
-    }, /*#__PURE__*/ $7V4JZ$createElement($7V4JZ$Primitive.span, $7V4JZ$babelruntimehelpersesmextends({
-        role: "label",
-        id: id
-    }, labelProps, {
-        ref: composedRefs,
+    return /*#__PURE__*/ $7V4JZ$createElement($7V4JZ$Primitive.label, $7V4JZ$babelruntimehelpersesmextends({}, props, {
+        ref: forwardedRef,
         onMouseDown: (event)=>{
@@ -70,20 +19,4 @@ var _props$onMouseDown;
             if (!event.defaultPrevented && event.detail > 1) event.preventDefault();
-        },
-        onClick: (event)=>{
-            var _props$onClick;
-            (_props$onClick = props.onClick) === null || _props$onClick === void 0 || _props$onClick.call(props, event);
-            if (!controlRef.current || event.defaultPrevented) return;
-            const isClickingControl = controlRef.current.contains(event.target); // Ensure event was generated by a user action
-            // https://developer.mozilla.org/en-US/docs/Web/API/Event/isTrusted
-            const isUserClick = event.isTrusted === true;
-            /**
-       * When a label is wrapped around the control it labels, we trigger the appropriate events
-       * on the control when the label is clicked. We do nothing if the user is already clicking the
-       * control inside the label.
-       */ if (!isClickingControl && isUserClick) {
-                controlRef.current.click();
-                controlRef.current.focus();
-            }
         }
-    })));
+    }));
 });
@@ -93,14 +26,3 @@ /*#__PURE__*/ Object.assign($b73a6c6685e72184$export$b04be29aa201d4f5, {
 });
-/* -----------------------------------------------------------------------------------------------*/ const $b73a6c6685e72184$export$feddbbf47baabdb9 = (element)=>{
-    const context = $b73a6c6685e72184$var$useLabelContextImpl('LabelConsumer');
-    const { controlRef: controlRef  } = context;
-    $7V4JZ$useEffect(()=>{
-        if (element) controlRef.current = element;
-    }, [
-        element,
-        controlRef
-    ]);
-    return context.id;
-};
-const $b73a6c6685e72184$export$be92b6f5f03c0fe9 = $b73a6c6685e72184$export$b04be29aa201d4f5;
+/* -----------------------------------------------------------------------------------------------*/ const $b73a6c6685e72184$export$be92b6f5f03c0fe9 = $b73a6c6685e72184$export$b04be29aa201d4f5;
 
@@ -110,3 +32,3 @@
 
-export {$b73a6c6685e72184$export$b04be29aa201d4f5 as Label, $b73a6c6685e72184$export$be92b6f5f03c0fe9 as Root, $b73a6c6685e72184$export$feddbbf47baabdb9 as useLabelContext};
+export {$b73a6c6685e72184$export$b04be29aa201d4f5 as Label, $b73a6c6685e72184$export$be92b6f5f03c0fe9 as Root};
 //# sourceMappingURL=index.module.js.map

package.json

 {
   "name": "@radix-ui/react-label",
-  "version": "1.0.0",
+  "version": "2.0.0-rc.1",
   "license": "MIT",
@@ -20,6 +20,3 @@ "source": "src/index.ts",
     "@babel/runtime": "^7.13.10",
-    "@radix-ui/react-compose-refs": "1.0.0",
-    "@radix-ui/react-context": "1.0.0",
-    "@radix-ui/react-id": "1.0.0",
-    "@radix-ui/react-primitive": "1.0.0"
+    "@radix-ui/react-primitive": "1.0.1-rc.1"
   },
@@ -37,3 +34,4 @@ "peerDependencies": {
     "url": "https://github.com/radix-ui/primitives/issues"
-  }
+  },
+  "stableVersion": "1.0.0"
 }

New alerts

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

Found 1 instance in 1 package

Improved metrics

Dependency count

4

-42.86%

Worsened metrics

Total package byte prevSize

10235

-65.23%

Lines of code

60

-71.83%

Number of low quality alerts

1

Infinity%

Dependency changes

• + Added

  @radix-ui/react-primitive@1.0.1-rc.1
  (transitive)

• - Removed

  @radix-ui/react-compose-refs@1.0.0

• - Removed

  @radix-ui/react-context@1.0.0

• - Removed

  @radix-ui/react-id@1.0.0

• - Removed

  @radix-ui/react-context@1.0.0
  (transitive)

• - Removed

  @radix-ui/react-id@1.0.0
  (transitive)

• - Removed

  @radix-ui/react-primitive@1.0.0
  (transitive)

• - Removed

  @radix-ui/react-use-layout-effect@1.0.0
  (transitive)

• Updated

  @radix-ui/react-primitive@1.0.1-rc.1