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

Comparing version 1.0.3 to 1.1.0-rc.1

dist/index.d.ts

@@ -1,7 +0,19 @@
-import * as React from "react";
-import * as Radix from "@radix-ui/react-primitive";
-import { Primitive } from "@radix-ui/react-primitive";
-export const createSwitchScope: import("@radix-ui/react-context").CreateScope;
-type PrimitiveButtonProps = Radix.ComponentPropsWithoutRef<typeof Primitive.button>;
-export interface SwitchProps extends PrimitiveButtonProps {
+import * as React from 'react';
+import * as Radix from '@radix-ui/react-primitive';
+import { Primitive } from '@radix-ui/react-primitive';
+
+declare type Scope<C = any> = {
+    [scopeName: string]: React.Context<C>[];
+} | undefined;
+declare type ScopeHook = (scope: Scope) => {
+    [__scopeProp: string]: Scope;
+};
+interface CreateScope {
+    scopeName: string;
+    (): ScopeHook;
+}
+
+declare const createSwitchScope: CreateScope;
+declare type PrimitiveButtonProps = Radix.ComponentPropsWithoutRef<typeof Primitive.button>;
+interface SwitchProps extends PrimitiveButtonProps {
     checked?: boolean;
@@ -12,10 +24,10 @@ defaultChecked?: boolean;
 }
-export const Switch: React.ForwardRefExoticComponent<SwitchProps & React.RefAttributes<HTMLButtonElement>>;
-type PrimitiveSpanProps = Radix.ComponentPropsWithoutRef<typeof Primitive.span>;
-export interface SwitchThumbProps extends PrimitiveSpanProps {
+declare const Switch: React.ForwardRefExoticComponent<SwitchProps & React.RefAttributes<HTMLButtonElement>>;
+declare type PrimitiveSpanProps = Radix.ComponentPropsWithoutRef<typeof Primitive.span>;
+interface SwitchThumbProps extends PrimitiveSpanProps {
 }
-export const SwitchThumb: React.ForwardRefExoticComponent<SwitchThumbProps & React.RefAttributes<HTMLSpanElement>>;
-export const Root: React.ForwardRefExoticComponent<SwitchProps & React.RefAttributes<HTMLButtonElement>>;
-export const Thumb: React.ForwardRefExoticComponent<SwitchThumbProps & React.RefAttributes<HTMLSpanElement>>;
+declare const SwitchThumb: React.ForwardRefExoticComponent<SwitchThumbProps & React.RefAttributes<HTMLSpanElement>>;
+declare const Root: React.ForwardRefExoticComponent<SwitchProps & React.RefAttributes<HTMLButtonElement>>;
+declare const Thumb: React.ForwardRefExoticComponent<SwitchThumbProps & React.RefAttributes<HTMLSpanElement>>;
 
-//# sourceMappingURL=index.d.ts.map
+export { Root, Switch, type SwitchProps, SwitchThumb, type SwitchThumbProps, Thumb, createSwitchScope };

dist/index.js

@@ -1,155 +0,166 @@
-var $cWV9h$babelruntimehelpersextends = require("@babel/runtime/helpers/extends");
-var $cWV9h$react = require("react");
-var $cWV9h$radixuiprimitive = require("@radix-ui/primitive");
-var $cWV9h$radixuireactcomposerefs = require("@radix-ui/react-compose-refs");
-var $cWV9h$radixuireactcontext = require("@radix-ui/react-context");
-var $cWV9h$radixuireactusecontrollablestate = require("@radix-ui/react-use-controllable-state");
-var $cWV9h$radixuireactuseprevious = require("@radix-ui/react-use-previous");
-var $cWV9h$radixuireactusesize = require("@radix-ui/react-use-size");
-var $cWV9h$radixuireactprimitive = require("@radix-ui/react-primitive");
+"use strict";
+(() => {
+  var __create = Object.create;
+  var __defProp = Object.defineProperty;
+  var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+  var __getOwnPropNames = Object.getOwnPropertyNames;
+  var __getProtoOf = Object.getPrototypeOf;
+  var __hasOwnProp = Object.prototype.hasOwnProperty;
+  var __require = /* @__PURE__ */ ((x) => typeof require !== "undefined" ? require : typeof Proxy !== "undefined" ? new Proxy(x, {
+    get: (a, b) => (typeof require !== "undefined" ? require : a)[b]
+  }) : x)(function(x) {
+    if (typeof require !== "undefined") return require.apply(this, arguments);
+    throw Error('Dynamic require of "' + x + '" is not supported');
+  });
+  var __copyProps = (to, from, except, desc) => {
+    if (from && typeof from === "object" || typeof from === "function") {
+      for (let key of __getOwnPropNames(from))
+        if (!__hasOwnProp.call(to, key) && key !== except)
+          __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+    }
+    return to;
+  };
+  var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+    // If the importer is in node compatibility mode or this is not an ESM
+    // file that has been converted to a CommonJS file using a Babel-
+    // compatible transform (i.e. "__esModule" has not been set), then set
+    // "default" to the CommonJS "module.exports" for node compatibility.
+    isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+    mod
+  ));
 
-function $parcel$export(e, n, v, s) {
-  Object.defineProperty(e, n, {get: v, set: s, enumerable: true, configurable: true});
-}
-function $parcel$interopDefault(a) {
-  return a && a.__esModule ? a.default : a;
-}
-
-$parcel$export(module.exports, "createSwitchScope", () => $4465bdeb0ef4ccd7$export$cf7f5f17f69cbd43);
-$parcel$export(module.exports, "Switch", () => $4465bdeb0ef4ccd7$export$b5d5cf8927ab7262);
-$parcel$export(module.exports, "SwitchThumb", () => $4465bdeb0ef4ccd7$export$4d07bf653ea69106);
-$parcel$export(module.exports, "Root", () => $4465bdeb0ef4ccd7$export$be92b6f5f03c0fe9);
-$parcel$export(module.exports, "Thumb", () => $4465bdeb0ef4ccd7$export$6521433ed15a34db);
-
-
-
-
-
-
-
-
-
-/* -------------------------------------------------------------------------------------------------
- * Switch
- * -----------------------------------------------------------------------------------------------*/ const $4465bdeb0ef4ccd7$var$SWITCH_NAME = 'Switch';
-const [$4465bdeb0ef4ccd7$var$createSwitchContext, $4465bdeb0ef4ccd7$export$cf7f5f17f69cbd43] = $cWV9h$radixuireactcontext.createContextScope($4465bdeb0ef4ccd7$var$SWITCH_NAME);
-const [$4465bdeb0ef4ccd7$var$SwitchProvider, $4465bdeb0ef4ccd7$var$useSwitchContext] = $4465bdeb0ef4ccd7$var$createSwitchContext($4465bdeb0ef4ccd7$var$SWITCH_NAME);
-const $4465bdeb0ef4ccd7$export$b5d5cf8927ab7262 = /*#__PURE__*/ $cWV9h$react.forwardRef((props, forwardedRef)=>{
-    const { __scopeSwitch: __scopeSwitch , name: name , checked: checkedProp , defaultChecked: defaultChecked , required: required , disabled: disabled , value: value = 'on' , onCheckedChange: onCheckedChange , ...switchProps } = props;
-    const [button, setButton] = $cWV9h$react.useState(null);
-    const composedRefs = $cWV9h$radixuireactcomposerefs.useComposedRefs(forwardedRef, (node)=>setButton(node)
-    );
-    const hasConsumerStoppedPropagationRef = $cWV9h$react.useRef(false); // We set this to true by default so that events bubble to forms without JS (SSR)
-    const isFormControl = button ? Boolean(button.closest('form')) : true;
-    const [checked = false, setChecked] = $cWV9h$radixuireactusecontrollablestate.useControllableState({
+  // packages/react/switch/src/Switch.tsx
+  var React = __toESM(__require("react"));
+  var import_primitive = __require("@radix-ui/primitive");
+  var import_react_compose_refs = __require("@radix-ui/react-compose-refs");
+  var import_react_context = __require("@radix-ui/react-context");
+  var import_react_use_controllable_state = __require("@radix-ui/react-use-controllable-state");
+  var import_react_use_previous = __require("@radix-ui/react-use-previous");
+  var import_react_use_size = __require("@radix-ui/react-use-size");
+  var import_react_primitive = __require("@radix-ui/react-primitive");
+  var import_jsx_runtime = __require("react/jsx-runtime");
+  var SWITCH_NAME = "Switch";
+  var [createSwitchContext, createSwitchScope] = (0, import_react_context.createContextScope)(SWITCH_NAME);
+  var [SwitchProvider, useSwitchContext] = createSwitchContext(SWITCH_NAME);
+  var Switch = React.forwardRef(
+    (props, forwardedRef) => {
+      const {
+        __scopeSwitch,
+        name,
+        checked: checkedProp,
+        defaultChecked,
+        required,
+        disabled,
+        value = "on",
+        onCheckedChange,
+        ...switchProps
+      } = props;
+      const [button, setButton] = React.useState(null);
+      const composedRefs = (0, import_react_compose_refs.useComposedRefs)(forwardedRef, (node) => setButton(node));
+      const hasConsumerStoppedPropagationRef = React.useRef(false);
+      const isFormControl = button ? Boolean(button.closest("form")) : true;
+      const [checked = false, setChecked] = (0, import_react_use_controllable_state.useControllableState)({
         prop: checkedProp,
         defaultProp: defaultChecked,
         onChange: onCheckedChange
-    });
-    return /*#__PURE__*/ $cWV9h$react.createElement($4465bdeb0ef4ccd7$var$SwitchProvider, {
-        scope: __scopeSwitch,
-        checked: checked,
-        disabled: disabled
-    }, /*#__PURE__*/ $cWV9h$react.createElement($cWV9h$radixuireactprimitive.Primitive.button, ($parcel$interopDefault($cWV9h$babelruntimehelpersextends))({
-        type: "button",
-        role: "switch",
-        "aria-checked": checked,
-        "aria-required": required,
-        "data-state": $4465bdeb0ef4ccd7$var$getState(checked),
-        "data-disabled": disabled ? '' : undefined,
-        disabled: disabled,
-        value: value
-    }, switchProps, {
-        ref: composedRefs,
-        onClick: $cWV9h$radixuiprimitive.composeEventHandlers(props.onClick, (event)=>{
-            setChecked((prevChecked)=>!prevChecked
-            );
-            if (isFormControl) {
-                hasConsumerStoppedPropagationRef.current = event.isPropagationStopped(); // if switch is in a form, stop propagation from the button so that we only propagate
-                // one click event (from the input). We propagate changes from an input so that native
-                // form validation works and form events reflect switch updates.
+      });
+      return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(SwitchProvider, { scope: __scopeSwitch, checked, disabled, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          import_react_primitive.Primitive.button,
+          {
+            type: "button",
+            role: "switch",
+            "aria-checked": checked,
+            "aria-required": required,
+            "data-state": getState(checked),
+            "data-disabled": disabled ? "" : void 0,
+            disabled,
+            value,
+            ...switchProps,
+            ref: composedRefs,
+            onClick: (0, import_primitive.composeEventHandlers)(props.onClick, (event) => {
+              setChecked((prevChecked) => !prevChecked);
+              if (isFormControl) {
+                hasConsumerStoppedPropagationRef.current = event.isPropagationStopped();
                 if (!hasConsumerStoppedPropagationRef.current) event.stopPropagation();
-            }
-        })
-    })), isFormControl && /*#__PURE__*/ $cWV9h$react.createElement($4465bdeb0ef4ccd7$var$BubbleInput, {
-        control: button,
-        bubbles: !hasConsumerStoppedPropagationRef.current,
-        name: name,
-        value: value,
-        checked: checked,
-        required: required,
-        disabled: disabled // We transform because the input is absolutely positioned but we have
-        ,
-        style: {
-            transform: 'translateX(-100%)'
+              }
+            })
+          }
+        ),
+        isFormControl && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          BubbleInput,
+          {
+            control: button,
+            bubbles: !hasConsumerStoppedPropagationRef.current,
+            name,
+            value,
+            checked,
+            required,
+            disabled,
+            style: { transform: "translateX(-100%)" }
+          }
+        )
+      ] });
+    }
+  );
+  Switch.displayName = SWITCH_NAME;
+  var THUMB_NAME = "SwitchThumb";
+  var SwitchThumb = React.forwardRef(
+    (props, forwardedRef) => {
+      const { __scopeSwitch, ...thumbProps } = props;
+      const context = useSwitchContext(THUMB_NAME, __scopeSwitch);
+      return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        import_react_primitive.Primitive.span,
+        {
+          "data-state": getState(context.checked),
+          "data-disabled": context.disabled ? "" : void 0,
+          ...thumbProps,
+          ref: forwardedRef
         }
-    }));
-});
-/*#__PURE__*/ Object.assign($4465bdeb0ef4ccd7$export$b5d5cf8927ab7262, {
-    displayName: $4465bdeb0ef4ccd7$var$SWITCH_NAME
-});
-/* -------------------------------------------------------------------------------------------------
- * SwitchThumb
- * -----------------------------------------------------------------------------------------------*/ const $4465bdeb0ef4ccd7$var$THUMB_NAME = 'SwitchThumb';
-const $4465bdeb0ef4ccd7$export$4d07bf653ea69106 = /*#__PURE__*/ $cWV9h$react.forwardRef((props, forwardedRef)=>{
-    const { __scopeSwitch: __scopeSwitch , ...thumbProps } = props;
-    const context = $4465bdeb0ef4ccd7$var$useSwitchContext($4465bdeb0ef4ccd7$var$THUMB_NAME, __scopeSwitch);
-    return /*#__PURE__*/ $cWV9h$react.createElement($cWV9h$radixuireactprimitive.Primitive.span, ($parcel$interopDefault($cWV9h$babelruntimehelpersextends))({
-        "data-state": $4465bdeb0ef4ccd7$var$getState(context.checked),
-        "data-disabled": context.disabled ? '' : undefined
-    }, thumbProps, {
-        ref: forwardedRef
-    }));
-});
-/*#__PURE__*/ Object.assign($4465bdeb0ef4ccd7$export$4d07bf653ea69106, {
-    displayName: $4465bdeb0ef4ccd7$var$THUMB_NAME
-});
-/* ---------------------------------------------------------------------------------------------- */ const $4465bdeb0ef4ccd7$var$BubbleInput = (props)=>{
-    const { control: control , checked: checked , bubbles: bubbles = true , ...inputProps } = props;
-    const ref = $cWV9h$react.useRef(null);
-    const prevChecked = $cWV9h$radixuireactuseprevious.usePrevious(checked);
-    const controlSize = $cWV9h$radixuireactusesize.useSize(control); // Bubble checked change to parents (e.g form change event)
-    $cWV9h$react.useEffect(()=>{
-        const input = ref.current;
-        const inputProto = window.HTMLInputElement.prototype;
-        const descriptor = Object.getOwnPropertyDescriptor(inputProto, 'checked');
-        const setChecked = descriptor.set;
-        if (prevChecked !== checked && setChecked) {
-            const event = new Event('click', {
-                bubbles: bubbles
-            });
-            setChecked.call(input, checked);
-            input.dispatchEvent(event);
-        }
-    }, [
-        prevChecked,
-        checked,
-        bubbles
-    ]);
-    return /*#__PURE__*/ $cWV9h$react.createElement("input", ($parcel$interopDefault($cWV9h$babelruntimehelpersextends))({
+      );
+    }
+  );
+  SwitchThumb.displayName = THUMB_NAME;
+  var BubbleInput = (props) => {
+    const { control, checked, bubbles = true, ...inputProps } = props;
+    const ref = React.useRef(null);
+    const prevChecked = (0, import_react_use_previous.usePrevious)(checked);
+    const controlSize = (0, import_react_use_size.useSize)(control);
+    React.useEffect(() => {
+      const input = ref.current;
+      const inputProto = window.HTMLInputElement.prototype;
+      const descriptor = Object.getOwnPropertyDescriptor(inputProto, "checked");
+      const setChecked = descriptor.set;
+      if (prevChecked !== checked && setChecked) {
+        const event = new Event("click", { bubbles });
+        setChecked.call(input, checked);
+        input.dispatchEvent(event);
+      }
+    }, [prevChecked, checked, bubbles]);
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      "input",
+      {
         type: "checkbox",
         "aria-hidden": true,
-        defaultChecked: checked
-    }, inputProps, {
+        defaultChecked: checked,
+        ...inputProps,
         tabIndex: -1,
-        ref: ref,
+        ref,
         style: {
-            ...props.style,
-            ...controlSize,
-            position: 'absolute',
-            pointerEvents: 'none',
-            opacity: 0,
-            margin: 0
+          ...props.style,
+          ...controlSize,
+          position: "absolute",
+          pointerEvents: "none",
+          opacity: 0,
+          margin: 0
         }
-    }));
-};
-function $4465bdeb0ef4ccd7$var$getState(checked) {
-    return checked ? 'checked' : 'unchecked';
-}
-const $4465bdeb0ef4ccd7$export$be92b6f5f03c0fe9 = $4465bdeb0ef4ccd7$export$b5d5cf8927ab7262;
-const $4465bdeb0ef4ccd7$export$6521433ed15a34db = $4465bdeb0ef4ccd7$export$4d07bf653ea69106;
-
-
-
-
+      }
+    );
+  };
+  function getState(checked) {
+    return checked ? "checked" : "unchecked";
+  }
+  var Root = Switch;
+  var Thumb = SwitchThumb;
+})();
 //# sourceMappingURL=index.js.map

package.json

 {
   "name": "@radix-ui/react-switch",
-  "version": "1.0.3",
+  "version": "1.1.0-rc.1",
   "license": "MIT",
@@ -31,10 +31,9 @@ "exports": {
   "dependencies": {
-    "@babel/runtime": "^7.13.10",
-    "@radix-ui/primitive": "1.0.1",
-    "@radix-ui/react-compose-refs": "1.0.1",
-    "@radix-ui/react-context": "1.0.1",
-    "@radix-ui/react-primitive": "1.0.3",
-    "@radix-ui/react-use-controllable-state": "1.0.1",
-    "@radix-ui/react-use-previous": "1.0.1",
-    "@radix-ui/react-use-size": "1.0.1"
+    "@radix-ui/primitive": "1.1.0-rc.1",
+    "@radix-ui/react-compose-refs": "1.1.0-rc.1",
+    "@radix-ui/react-context": "1.1.0-rc.1",
+    "@radix-ui/react-primitive": "1.1.0-rc.1",
+    "@radix-ui/react-use-controllable-state": "1.1.0-rc.1",
+    "@radix-ui/react-use-previous": "1.1.0-rc.1",
+    "@radix-ui/react-use-size": "1.1.0-rc.1"
   },
@@ -62,3 +61,4 @@ "peerDependencies": {
     "url": "https://github.com/radix-ui/primitives/issues"
-  }
+  },
+  "stableVersion": "1.0.3"
 }

New alerts

Dynamic require

Supply chain risk

Dynamic require can indicate the package is performing dangerous or unsafe dynamic code execution.

Found 1 instance in 1 package

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

11

decreased by-8.33%

Lines of code

335

increased by15.52%

Worsened metrics

Total package byte prevSize

34634

decreased by-22.78%

Number of package files

8

decreased by-11.11%

Number of low quality alerts

1

increased byInfinity%

Number of low supply chain risk alerts

3

increased byInfinity%

Dependency changes

• + Added@radix-ui/primitive@1.1.0-rc.1(transitive)

• + Added@radix-ui/react-compose-refs@1.1.0-rc.1(transitive)

• + Added@radix-ui/react-context@1.1.0-rc.1(transitive)

• + Added@radix-ui/react-primitive@1.1.0-rc.1(transitive)

• + Added@radix-ui/react-slot@1.1.0-rc.1(transitive)

• + Added@radix-ui/react-use-callback-ref@1.1.0-rc.1(transitive)

• + Added@radix-ui/react-use-controllable-state@1.1.0-rc.1(transitive)

• + Added@radix-ui/react-use-layout-effect@1.1.0-rc.1(transitive)

• + Added@radix-ui/react-use-previous@1.1.0-rc.1(transitive)

• + Added@radix-ui/react-use-size@1.1.0-rc.1(transitive)

• - Removed@babel/runtime@^7.13.10

• - Removed@babel/runtime@7.26.7(transitive)

• - Removed@radix-ui/primitive@1.0.1(transitive)

• - Removed@radix-ui/react-compose-refs@1.0.1(transitive)

• - Removed@radix-ui/react-context@1.0.1(transitive)

• - Removed@radix-ui/react-primitive@1.0.3(transitive)

• - Removed@radix-ui/react-slot@1.0.2(transitive)

• - Removed@radix-ui/react-use-callback-ref@1.0.1(transitive)

• - Removed@radix-ui/react-use-controllable-state@1.0.1(transitive)

• - Removed@radix-ui/react-use-layout-effect@1.0.1(transitive)

• - Removed@radix-ui/react-use-previous@1.0.1(transitive)

• - Removed@radix-ui/react-use-size@1.0.1(transitive)

• - Removedregenerator-runtime@0.14.1(transitive)

• Updated@radix-ui/primitive@1.1.0-rc.1

• Updated@radix-ui/react-compose-refs@1.1.0-rc.1

• Updated@radix-ui/react-context@1.1.0-rc.1

• Updated@radix-ui/react-primitive@1.1.0-rc.1

• Updated@radix-ui/react-use-controllable-state@1.1.0-rc.1

• Updated@radix-ui/react-use-previous@1.1.0-rc.1

• Updated@radix-ui/react-use-size@1.1.0-rc.1