@twilio-paste/spinner - npm Package Compare versions

Comparing version 11.0.1 to 11.0.2

dist/constants.d.ts

 /// <reference types="react" />
-declare type CircleGeometryProps = Pick<React.SVGProps<SVGCircleElement>, 'cx' | 'cy' | 'r'>;
+type CircleGeometryProps = Pick<React.SVGProps<SVGCircleElement>, 'cx' | 'cy' | 'r'>;
 export declare const circleGeometry: CircleGeometryProps;
@@ -4,0 +4,0 @@ export declare const circleCircumference: number;

dist/index.debug.es.js

@@ -20,3 +20,3 @@ var __defProp = Object.defineProperty;
 import * as React from "react";
-import * as PropTypes from "prop-types";
+import PropTypes from "prop-types";
 import { useUID } from "@twilio-paste/uid-library";
@@ -89,40 +89,33 @@ import { IconWrapper } from "@twilio-paste/icons/esm/helpers/IconWrapper";
 // src/index.tsx
-var Spinner = React.forwardRef(({ size, color = "currentColor", title, as, display, decorative, delay = 250, element = "SPINNER" }, ref) => {
-  const titleId = `spinner-${useUID()}`;
-  const {
-    borderWidths: { borderWidth40 }
-  } = useTheme();
-  const [show, setShow] = React.useState(delay === 0);
-  if (!decorative && title == null) {
-    throw new Error("[Spinner]: Missing a title for non-decorative icon.");
+var Spinner = React.forwardRef(
+  ({ size, color = "currentColor", title, as, display, decorative, delay = 250, element = "SPINNER" }, ref) => {
+    const titleId = `spinner-${useUID()}`;
+    const {
+      borderWidths: { borderWidth40 }
+    } = useTheme();
+    const [show, setShow] = React.useState(delay === 0);
+    if (!decorative && title == null) {
+      throw new Error("[Spinner]: Missing a title for non-decorative icon.");
+    }
+    React.useEffect(() => {
+      if (delay === 0)
+        return void 0;
+      const showTimer = setTimeout(() => setShow(true), delay);
+      return () => clearTimeout(showTimer);
+    }, [delay]);
+    return /* @__PURE__ */ React.createElement(
+      IconWrapper,
+      {
+        as,
+        element,
+        display,
+        size,
+        color,
+        "aria-hidden": decorative,
+        ref
+      },
+      /* @__PURE__ */ React.createElement(StyledSvg, { viewBox: "0 0 100 100", xmlns: "http://www.w3.org/2000/svg", "aria-labelledby": titleId }, title ? /* @__PURE__ */ React.createElement("title", { id: titleId }, title) : null, /* @__PURE__ */ React.createElement("g", { strokeWidth: borderWidth40, stroke: "currentColor", strokeLinecap: "round", fill: "transparent" }, /* @__PURE__ */ React.createElement(StyledCircleTrack, __spreadValues({}, circleGeometry)), /* @__PURE__ */ React.createElement(AnimatedStyledCircle, __spreadValues({ show }, circleGeometry))))
+    );
   }
-  React.useEffect(() => {
-    if (delay === 0)
-      return void 0;
-    const showTimer = setTimeout(() => setShow(true), delay);
-    return () => clearTimeout(showTimer);
-  }, [delay]);
-  return /* @__PURE__ */ React.createElement(IconWrapper, {
-    as,
-    element,
-    display,
-    size,
-    color,
-    "aria-hidden": decorative,
-    ref
-  }, /* @__PURE__ */ React.createElement(StyledSvg, {
-    viewBox: "0 0 100 100",
-    xmlns: "http://www.w3.org/2000/svg",
-    "aria-labelledby": titleId
-  }, title ? /* @__PURE__ */ React.createElement("title", {
-    id: titleId
-  }, title) : null, /* @__PURE__ */ React.createElement("g", {
-    strokeWidth: borderWidth40,
-    stroke: "currentColor",
-    strokeLinecap: "round",
-    fill: "transparent"
-  }, /* @__PURE__ */ React.createElement(StyledCircleTrack, __spreadValues({}, circleGeometry)), /* @__PURE__ */ React.createElement(AnimatedStyledCircle, __spreadValues({
-    show
-  }, circleGeometry)))));
-});
+);
 Spinner.displayName = "Spinner";
@@ -129,0 +122,0 @@ Spinner.propTypes = {

dist/index.debug.js

@@ -0,1 +1,2 @@
+"use strict";
 var __create = Object.create;
@@ -33,3 +34,6 @@ var __defProp = Object.defineProperty;
 };
-var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target, mod));
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
@@ -44,3 +48,3 @@
 var React = __toESM(require("react"));
-var PropTypes = __toESM(require("prop-types"));
+var import_prop_types = __toESM(require("prop-types"));
 var import_uid_library = require("@twilio-paste/uid-library");
@@ -113,45 +117,38 @@ var import_IconWrapper = require("@twilio-paste/icons/cjs/helpers/IconWrapper");
 // src/index.tsx
-var Spinner = React.forwardRef(({ size, color = "currentColor", title, as, display, decorative, delay = 250, element = "SPINNER" }, ref) => {
-  const titleId = `spinner-${(0, import_uid_library.useUID)()}`;
-  const {
-    borderWidths: { borderWidth40 }
-  } = (0, import_theme.useTheme)();
-  const [show, setShow] = React.useState(delay === 0);
-  if (!decorative && title == null) {
-    throw new Error("[Spinner]: Missing a title for non-decorative icon.");
+var Spinner = React.forwardRef(
+  ({ size, color = "currentColor", title, as, display, decorative, delay = 250, element = "SPINNER" }, ref) => {
+    const titleId = `spinner-${(0, import_uid_library.useUID)()}`;
+    const {
+      borderWidths: { borderWidth40 }
+    } = (0, import_theme.useTheme)();
+    const [show, setShow] = React.useState(delay === 0);
+    if (!decorative && title == null) {
+      throw new Error("[Spinner]: Missing a title for non-decorative icon.");
+    }
+    React.useEffect(() => {
+      if (delay === 0)
+        return void 0;
+      const showTimer = setTimeout(() => setShow(true), delay);
+      return () => clearTimeout(showTimer);
+    }, [delay]);
+    return /* @__PURE__ */ React.createElement(
+      import_IconWrapper.IconWrapper,
+      {
+        as,
+        element,
+        display,
+        size,
+        color,
+        "aria-hidden": decorative,
+        ref
+      },
+      /* @__PURE__ */ React.createElement(StyledSvg, { viewBox: "0 0 100 100", xmlns: "http://www.w3.org/2000/svg", "aria-labelledby": titleId }, title ? /* @__PURE__ */ React.createElement("title", { id: titleId }, title) : null, /* @__PURE__ */ React.createElement("g", { strokeWidth: borderWidth40, stroke: "currentColor", strokeLinecap: "round", fill: "transparent" }, /* @__PURE__ */ React.createElement(StyledCircleTrack, __spreadValues({}, circleGeometry)), /* @__PURE__ */ React.createElement(AnimatedStyledCircle, __spreadValues({ show }, circleGeometry))))
+    );
   }
-  React.useEffect(() => {
-    if (delay === 0)
-      return void 0;
-    const showTimer = setTimeout(() => setShow(true), delay);
-    return () => clearTimeout(showTimer);
-  }, [delay]);
-  return /* @__PURE__ */ React.createElement(import_IconWrapper.IconWrapper, {
-    as,
-    element,
-    display,
-    size,
-    color,
-    "aria-hidden": decorative,
-    ref
-  }, /* @__PURE__ */ React.createElement(StyledSvg, {
-    viewBox: "0 0 100 100",
-    xmlns: "http://www.w3.org/2000/svg",
-    "aria-labelledby": titleId
-  }, title ? /* @__PURE__ */ React.createElement("title", {
-    id: titleId
-  }, title) : null, /* @__PURE__ */ React.createElement("g", {
-    strokeWidth: borderWidth40,
-    stroke: "currentColor",
-    strokeLinecap: "round",
-    fill: "transparent"
-  }, /* @__PURE__ */ React.createElement(StyledCircleTrack, __spreadValues({}, circleGeometry)), /* @__PURE__ */ React.createElement(AnimatedStyledCircle, __spreadValues({
-    show
-  }, circleGeometry)))));
-});
+);
 Spinner.displayName = "Spinner";
 Spinner.propTypes = {
-  title: PropTypes.string,
-  delay: PropTypes.number,
-  element: PropTypes.string,
+  title: import_prop_types.default.string,
+  delay: import_prop_types.default.number,
+  element: import_prop_types.default.string,
   size: import_style_props.isIconSizeTokenProp
@@ -158,0 +155,0 @@ };

dist/index.es.js

@@ -1,2 +0,2 @@
-var __defProp=Object.defineProperty;var __getOwnPropSymbols=Object.getOwnPropertySymbols;var __hasOwnProp=Object.prototype.hasOwnProperty,__propIsEnum=Object.prototype.propertyIsEnumerable;var __defNormalProp=(obj,key,value)=>key in obj?__defProp(obj,key,{enumerable:!0,configurable:!0,writable:!0,value}):obj[key]=value,__spreadValues=(a,b)=>{for(var prop in b||(b={}))__hasOwnProp.call(b,prop)&&__defNormalProp(a,prop,b[prop]);if(__getOwnPropSymbols)for(var prop of __getOwnPropSymbols(b))__propIsEnum.call(b,prop)&&__defNormalProp(a,prop,b[prop]);return a};import*as React from"react";import*as PropTypes from"prop-types";import{useUID}from"@twilio-paste/uid-library";import{IconWrapper}from"@twilio-paste/icons/esm/helpers/IconWrapper";import{useTheme}from"@twilio-paste/theme";import{isIconSizeTokenProp}from"@twilio-paste/style-props";import{styled}from"@twilio-paste/styling-library";import{keyframes}from"@twilio-paste/styling-library";var circleGeometry={cx:50,cy:50,r:45},circleCircumference=Math.PI*2*45;var SvgKeyframes=keyframes`
+var __defProp=Object.defineProperty;var __getOwnPropSymbols=Object.getOwnPropertySymbols;var __hasOwnProp=Object.prototype.hasOwnProperty,__propIsEnum=Object.prototype.propertyIsEnumerable;var __defNormalProp=(obj,key,value)=>key in obj?__defProp(obj,key,{enumerable:!0,configurable:!0,writable:!0,value}):obj[key]=value,__spreadValues=(a,b)=>{for(var prop in b||(b={}))__hasOwnProp.call(b,prop)&&__defNormalProp(a,prop,b[prop]);if(__getOwnPropSymbols)for(var prop of __getOwnPropSymbols(b))__propIsEnum.call(b,prop)&&__defNormalProp(a,prop,b[prop]);return a};import*as React from"react";import PropTypes from"prop-types";import{useUID}from"@twilio-paste/uid-library";import{IconWrapper}from"@twilio-paste/icons/esm/helpers/IconWrapper";import{useTheme}from"@twilio-paste/theme";import{isIconSizeTokenProp}from"@twilio-paste/style-props";import{styled}from"@twilio-paste/styling-library";import{keyframes}from"@twilio-paste/styling-library";var circleGeometry={cx:50,cy:50,r:45},circleCircumference=Math.PI*2*45;var SvgKeyframes=keyframes`
   0%,
@@ -3,0 +3,0 @@ 15% {

dist/index.js

@@ -1,2 +0,2 @@
-var __create=Object.create;var __defProp=Object.defineProperty;var __getOwnPropDesc=Object.getOwnPropertyDescriptor;var __getOwnPropNames=Object.getOwnPropertyNames,__getOwnPropSymbols=Object.getOwnPropertySymbols,__getProtoOf=Object.getPrototypeOf,__hasOwnProp=Object.prototype.hasOwnProperty,__propIsEnum=Object.prototype.propertyIsEnumerable;var __defNormalProp=(obj,key,value)=>key in obj?__defProp(obj,key,{enumerable:!0,configurable:!0,writable:!0,value}):obj[key]=value,__spreadValues=(a,b)=>{for(var prop in b||(b={}))__hasOwnProp.call(b,prop)&&__defNormalProp(a,prop,b[prop]);if(__getOwnPropSymbols)for(var prop of __getOwnPropSymbols(b))__propIsEnum.call(b,prop)&&__defNormalProp(a,prop,b[prop]);return a};var __export=(target,all)=>{for(var name in all)__defProp(target,name,{get:all[name],enumerable:!0})},__copyProps=(to,from,except,desc)=>{if(from&&typeof from=="object"||typeof from=="function")for(let key of __getOwnPropNames(from))!__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(isNodeMode||!mod||!mod.__esModule?__defProp(target,"default",{value:mod,enumerable:!0}):target,mod)),__toCommonJS=mod=>__copyProps(__defProp({},"__esModule",{value:!0}),mod);var src_exports={};__export(src_exports,{Spinner:()=>Spinner});module.exports=__toCommonJS(src_exports);var React=__toESM(require("react")),PropTypes=__toESM(require("prop-types")),import_uid_library=require("@twilio-paste/uid-library"),import_IconWrapper=require("@twilio-paste/icons/cjs/helpers/IconWrapper"),import_theme=require("@twilio-paste/theme"),import_style_props=require("@twilio-paste/style-props");var import_styling_library2=require("@twilio-paste/styling-library");var import_styling_library=require("@twilio-paste/styling-library");var circleGeometry={cx:50,cy:50,r:45},circleCircumference=Math.PI*2*45;var SvgKeyframes=import_styling_library.keyframes`
+"use strict";var __create=Object.create;var __defProp=Object.defineProperty;var __getOwnPropDesc=Object.getOwnPropertyDescriptor;var __getOwnPropNames=Object.getOwnPropertyNames,__getOwnPropSymbols=Object.getOwnPropertySymbols,__getProtoOf=Object.getPrototypeOf,__hasOwnProp=Object.prototype.hasOwnProperty,__propIsEnum=Object.prototype.propertyIsEnumerable;var __defNormalProp=(obj,key,value)=>key in obj?__defProp(obj,key,{enumerable:!0,configurable:!0,writable:!0,value}):obj[key]=value,__spreadValues=(a,b)=>{for(var prop in b||(b={}))__hasOwnProp.call(b,prop)&&__defNormalProp(a,prop,b[prop]);if(__getOwnPropSymbols)for(var prop of __getOwnPropSymbols(b))__propIsEnum.call(b,prop)&&__defNormalProp(a,prop,b[prop]);return a};var __export=(target,all)=>{for(var name in all)__defProp(target,name,{get:all[name],enumerable:!0})},__copyProps=(to,from,except,desc)=>{if(from&&typeof from=="object"||typeof from=="function")for(let key of __getOwnPropNames(from))!__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(isNodeMode||!mod||!mod.__esModule?__defProp(target,"default",{value:mod,enumerable:!0}):target,mod)),__toCommonJS=mod=>__copyProps(__defProp({},"__esModule",{value:!0}),mod);var src_exports={};__export(src_exports,{Spinner:()=>Spinner});module.exports=__toCommonJS(src_exports);var React=__toESM(require("react")),import_prop_types=__toESM(require("prop-types")),import_uid_library=require("@twilio-paste/uid-library"),import_IconWrapper=require("@twilio-paste/icons/cjs/helpers/IconWrapper"),import_theme=require("@twilio-paste/theme"),import_style_props=require("@twilio-paste/style-props");var import_styling_library2=require("@twilio-paste/styling-library");var import_styling_library=require("@twilio-paste/styling-library");var circleGeometry={cx:50,cy:50,r:45},circleCircumference=Math.PI*2*45;var SvgKeyframes=import_styling_library.keyframes`
   0%,
@@ -25,2 +25,2 @@ 15% {
   }
-`;var StyledCircleTrack=import_styling_library2.styled.circle({transformOrigin:"center",opacity:.25}),AnimatedStyledCircle=import_styling_library2.styled.circle(({show})=>({transformOrigin:"center",animation:`1.5s ease-in-out infinite both ${CircleKeyframes}`,strokeDasharray:circleCircumference,opacity:show?1:0})),StyledSvg=import_styling_library2.styled.svg({height:"100%",width:"100%",display:"block",animation:`4.25s linear infinite both ${SvgKeyframes}`});var Spinner=React.forwardRef(({size,color="currentColor",title,as,display,decorative,delay=250,element="SPINNER"},ref)=>{let titleId=`spinner-${(0,import_uid_library.useUID)()}`,{borderWidths:{borderWidth40}}=(0,import_theme.useTheme)(),[show,setShow]=React.useState(delay===0);if(!decorative&&title==null)throw new Error("[Spinner]: Missing a title for non-decorative icon.");return React.useEffect(()=>{if(delay===0)return;let showTimer=setTimeout(()=>setShow(!0),delay);return()=>clearTimeout(showTimer)},[delay]),React.createElement(import_IconWrapper.IconWrapper,{as,element,display,size,color,"aria-hidden":decorative,ref},React.createElement(StyledSvg,{viewBox:"0 0 100 100",xmlns:"http://www.w3.org/2000/svg","aria-labelledby":titleId},title?React.createElement("title",{id:titleId},title):null,React.createElement("g",{strokeWidth:borderWidth40,stroke:"currentColor",strokeLinecap:"round",fill:"transparent"},React.createElement(StyledCircleTrack,__spreadValues({},circleGeometry)),React.createElement(AnimatedStyledCircle,__spreadValues({show},circleGeometry)))))});Spinner.displayName="Spinner";Spinner.propTypes={title:PropTypes.string,delay:PropTypes.number,element:PropTypes.string,size:import_style_props.isIconSizeTokenProp};0&&(module.exports={Spinner});
+`;var StyledCircleTrack=import_styling_library2.styled.circle({transformOrigin:"center",opacity:.25}),AnimatedStyledCircle=import_styling_library2.styled.circle(({show})=>({transformOrigin:"center",animation:`1.5s ease-in-out infinite both ${CircleKeyframes}`,strokeDasharray:circleCircumference,opacity:show?1:0})),StyledSvg=import_styling_library2.styled.svg({height:"100%",width:"100%",display:"block",animation:`4.25s linear infinite both ${SvgKeyframes}`});var Spinner=React.forwardRef(({size,color="currentColor",title,as,display,decorative,delay=250,element="SPINNER"},ref)=>{let titleId=`spinner-${(0,import_uid_library.useUID)()}`,{borderWidths:{borderWidth40}}=(0,import_theme.useTheme)(),[show,setShow]=React.useState(delay===0);if(!decorative&&title==null)throw new Error("[Spinner]: Missing a title for non-decorative icon.");return React.useEffect(()=>{if(delay===0)return;let showTimer=setTimeout(()=>setShow(!0),delay);return()=>clearTimeout(showTimer)},[delay]),React.createElement(import_IconWrapper.IconWrapper,{as,element,display,size,color,"aria-hidden":decorative,ref},React.createElement(StyledSvg,{viewBox:"0 0 100 100",xmlns:"http://www.w3.org/2000/svg","aria-labelledby":titleId},title?React.createElement("title",{id:titleId},title):null,React.createElement("g",{strokeWidth:borderWidth40,stroke:"currentColor",strokeLinecap:"round",fill:"transparent"},React.createElement(StyledCircleTrack,__spreadValues({},circleGeometry)),React.createElement(AnimatedStyledCircle,__spreadValues({show},circleGeometry)))))});Spinner.displayName="Spinner";Spinner.propTypes={title:import_prop_types.default.string,delay:import_prop_types.default.number,element:import_prop_types.default.string,size:import_style_props.isIconSizeTokenProp};0&&(module.exports={Spinner});

package.json

 {
   "name": "@twilio-paste/spinner",
-  "version": "11.0.1",
+  "version": "11.0.2",
   "category": "feedback",
@@ -41,6 +41,6 @@ "status": "production",
   "devDependencies": {
-    "@twilio-paste/box": "^7.1.1",
-    "@twilio-paste/design-tokens": "^8.1.2",
+    "@twilio-paste/box": "^7.1.2",
+    "@twilio-paste/design-tokens": "^8.3.0",
     "@twilio-paste/icons": "^9.3.1",
-    "@twilio-paste/style-props": "^6.1.1",
+    "@twilio-paste/style-props": "^6.1.2",
     "@twilio-paste/styling-library": "^1.0.3",
@@ -47,0 +47,0 @@ "@twilio-paste/theme": "^8.0.3",

No alert changes

Improved metrics

Total package byte prevSize

106534

increased by2.64%

Worsened metrics

Lines of code

385

decreased by-2.04%

No dependency changes