@twilio-paste/skeleton-loader - npm Package Compare versions

Comparing version 5.0.0 to 5.0.1

dist/index.d.ts

 import * as React from 'react';
 import type { BoxElementProps } from '@twilio-paste/box';
 import type { LayoutProps, BorderRadiusProps } from '@twilio-paste/style-props';
-export interface SkeletonLoaderProps extends React.HTMLAttributes<HTMLDivElement>, Pick<BoxElementProps, 'element'>, Omit<LayoutProps, 'verticalAlign'>, BorderRadiusProps {
+import type { HTMLPasteProps } from '@twilio-paste/types';
+export interface SkeletonLoaderProps extends HTMLPasteProps<'div'>, Pick<BoxElementProps, 'element'>, Omit<LayoutProps, 'verticalAlign'>, BorderRadiusProps {
 }
@@ -6,0 +7,0 @@ declare const SkeletonLoader: React.ForwardRefExoticComponent<SkeletonLoaderProps & React.RefAttributes<HTMLDivElement>>;

dist/index.debug.es.js

@@ -1,33 +0,1 @@
-var __defProp = Object.defineProperty;
-var __defProps = Object.defineProperties;
-var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
-var __getOwnPropSymbols = Object.getOwnPropertySymbols;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __propIsEnum = Object.prototype.propertyIsEnumerable;
-var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues = (a, b) => {
-  for (var prop in b || (b = {}))
-    if (__hasOwnProp.call(b, prop))
-      __defNormalProp(a, prop, b[prop]);
-  if (__getOwnPropSymbols)
-    for (var prop of __getOwnPropSymbols(b)) {
-      if (__propIsEnum.call(b, prop))
-        __defNormalProp(a, prop, b[prop]);
-    }
-  return a;
-};
-var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
-var __objRest = (source, exclude) => {
-  var target = {};
-  for (var prop in source)
-    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
-      target[prop] = source[prop];
-  if (source != null && __getOwnPropSymbols)
-    for (var prop of __getOwnPropSymbols(source)) {
-      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
-        target[prop] = source[prop];
-    }
-  return target;
-};
-
 // src/index.tsx
@@ -71,37 +39,23 @@ import * as React from "react";
 var SkeletonLoader = React.forwardRef(
-  (_a, ref) => {
-    var _b = _a, {
-      borderBottomLeftRadius,
-      borderBottomRightRadius,
-      borderRadius = "borderRadius20",
-      borderTopLeftRadius,
-      borderTopRightRadius,
-      element = "SKELETON_LOADER",
-      display,
-      height = "sizeIcon20",
-      maxHeight,
-      maxWidth,
-      minHeight,
-      minWidth,
-      size = null,
-      width = null
-    } = _b, props = __objRest(_b, [
-      "borderBottomLeftRadius",
-      "borderBottomRightRadius",
-      "borderRadius",
-      "borderTopLeftRadius",
-      "borderTopRightRadius",
-      "element",
-      "display",
-      "height",
-      "maxHeight",
-      "maxWidth",
-      "minHeight",
-      "minWidth",
-      "size",
-      "width"
-    ]);
+  ({
+    borderBottomLeftRadius,
+    borderBottomRightRadius,
+    borderRadius = "borderRadius20",
+    borderTopLeftRadius,
+    borderTopRightRadius,
+    element = "SKELETON_LOADER",
+    display,
+    height = "sizeIcon20",
+    maxHeight,
+    maxWidth,
+    minHeight,
+    minWidth,
+    size = null,
+    width = null,
+    ...props
+  }, ref) => {
     return /* @__PURE__ */ React.createElement(
       Box,
-      __spreadProps(__spreadValues({}, safelySpreadBoxProps(props)), {
+      {
+        ...safelySpreadBoxProps(props),
         "aria-busy": "true",
@@ -128,3 +82,3 @@ backgroundColor: "colorBackgroundStrong",
         ref
-      }),
+      },
       /* @__PURE__ */ React.createElement(SkeletonLoaderInner, null)
@@ -131,0 +85,0 @@ );

dist/index.debug.js

 "use strict";
 var __create = Object.create;
 var __defProp = Object.defineProperty;
-var __defProps = Object.defineProperties;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
 var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getOwnPropSymbols = Object.getOwnPropertySymbols;
 var __getProtoOf = Object.getPrototypeOf;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __propIsEnum = Object.prototype.propertyIsEnumerable;
-var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues = (a, b) => {
-  for (var prop in b || (b = {}))
-    if (__hasOwnProp.call(b, prop))
-      __defNormalProp(a, prop, b[prop]);
-  if (__getOwnPropSymbols)
-    for (var prop of __getOwnPropSymbols(b)) {
-      if (__propIsEnum.call(b, prop))
-        __defNormalProp(a, prop, b[prop]);
-    }
-  return a;
-};
-var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
-var __objRest = (source, exclude) => {
-  var target = {};
-  for (var prop in source)
-    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
-      target[prop] = source[prop];
-  if (source != null && __getOwnPropSymbols)
-    for (var prop of __getOwnPropSymbols(source)) {
-      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
-        target[prop] = source[prop];
-    }
-  return target;
-};
 var __export = (target, all) => {
@@ -98,37 +69,23 @@ for (var name in all)
 var SkeletonLoader = React.forwardRef(
-  (_a, ref) => {
-    var _b = _a, {
-      borderBottomLeftRadius,
-      borderBottomRightRadius,
-      borderRadius = "borderRadius20",
-      borderTopLeftRadius,
-      borderTopRightRadius,
-      element = "SKELETON_LOADER",
-      display,
-      height = "sizeIcon20",
-      maxHeight,
-      maxWidth,
-      minHeight,
-      minWidth,
-      size = null,
-      width = null
-    } = _b, props = __objRest(_b, [
-      "borderBottomLeftRadius",
-      "borderBottomRightRadius",
-      "borderRadius",
-      "borderTopLeftRadius",
-      "borderTopRightRadius",
-      "element",
-      "display",
-      "height",
-      "maxHeight",
-      "maxWidth",
-      "minHeight",
-      "minWidth",
-      "size",
-      "width"
-    ]);
+  ({
+    borderBottomLeftRadius,
+    borderBottomRightRadius,
+    borderRadius = "borderRadius20",
+    borderTopLeftRadius,
+    borderTopRightRadius,
+    element = "SKELETON_LOADER",
+    display,
+    height = "sizeIcon20",
+    maxHeight,
+    maxWidth,
+    minHeight,
+    minWidth,
+    size = null,
+    width = null,
+    ...props
+  }, ref) => {
     return /* @__PURE__ */ React.createElement(
       import_box.Box,
-      __spreadProps(__spreadValues({}, (0, import_box.safelySpreadBoxProps)(props)), {
+      {
+        ...(0, import_box.safelySpreadBoxProps)(props),
         "aria-busy": "true",
@@ -155,3 +112,3 @@ backgroundColor: "colorBackgroundStrong",
         ref
-      }),
+      },
       /* @__PURE__ */ React.createElement(SkeletonLoaderInner, null)
@@ -158,0 +115,0 @@ );

dist/index.es.js

@@ -1,2 +0,2 @@
-var __defProp=Object.defineProperty,__defProps=Object.defineProperties;var __getOwnPropDescs=Object.getOwnPropertyDescriptors;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},__spreadProps=(a,b)=>__defProps(a,__getOwnPropDescs(b));var __objRest=(source,exclude)=>{var target={};for(var prop in source)__hasOwnProp.call(source,prop)&&exclude.indexOf(prop)<0&&(target[prop]=source[prop]);if(source!=null&&__getOwnPropSymbols)for(var prop of __getOwnPropSymbols(source))exclude.indexOf(prop)<0&&__propIsEnum.call(source,prop)&&(target[prop]=source[prop]);return target};import*as React from"react";import{styled,themeGet}from"@twilio-paste/styling-library";import{Box,safelySpreadBoxProps}from"@twilio-paste/box";import{keyframes}from"@twilio-paste/styling-library";var SkeletonLoaderKeyframes=keyframes`
+import*as React from"react";import{styled,themeGet}from"@twilio-paste/styling-library";import{Box,safelySpreadBoxProps}from"@twilio-paste/box";import{keyframes}from"@twilio-paste/styling-library";var SkeletonLoaderKeyframes=keyframes`
   0% {
@@ -27,2 +27,2 @@ transform: translateX(-100%) skew(155deg);
   animation-iteration-count: infinite;
-`,SkeletonLoader=React.forwardRef((_a,ref)=>{var _b=_a,{borderBottomLeftRadius,borderBottomRightRadius,borderRadius="borderRadius20",borderTopLeftRadius,borderTopRightRadius,element="SKELETON_LOADER",display,height="sizeIcon20",maxHeight,maxWidth,minHeight,minWidth,size=null,width=null}=_b,props=__objRest(_b,["borderBottomLeftRadius","borderBottomRightRadius","borderRadius","borderTopLeftRadius","borderTopRightRadius","element","display","height","maxHeight","maxWidth","minHeight","minWidth","size","width"]);return React.createElement(Box,__spreadProps(__spreadValues({},safelySpreadBoxProps(props)),{"aria-busy":"true",backgroundColor:"colorBackgroundStrong",borderBottomLeftRadius,borderBottomRightRadius,borderRadius,borderTopLeftRadius,borderTopRightRadius,display,element,height,maxHeight,maxWidth,minHeight,minWidth,overflow:"hidden",pointerEvents:"none",position:"relative",userSelect:"none",size,width,ref}),React.createElement(SkeletonLoaderInner,null))});SkeletonLoader.displayName="SkeletonLoader";export{SkeletonLoader};
+`,SkeletonLoader=React.forwardRef(({borderBottomLeftRadius,borderBottomRightRadius,borderRadius="borderRadius20",borderTopLeftRadius,borderTopRightRadius,element="SKELETON_LOADER",display,height="sizeIcon20",maxHeight,maxWidth,minHeight,minWidth,size=null,width=null,...props},ref)=>React.createElement(Box,{...safelySpreadBoxProps(props),"aria-busy":"true",backgroundColor:"colorBackgroundStrong",borderBottomLeftRadius,borderBottomRightRadius,borderRadius,borderTopLeftRadius,borderTopRightRadius,display,element,height,maxHeight,maxWidth,minHeight,minWidth,overflow:"hidden",pointerEvents:"none",position:"relative",userSelect:"none",size,width,ref},React.createElement(SkeletonLoaderInner,null)));SkeletonLoader.displayName="SkeletonLoader";export{SkeletonLoader};

dist/index.js

@@ -1,2 +0,2 @@
-"use strict";var __create=Object.create;var __defProp=Object.defineProperty,__defProps=Object.defineProperties,__getOwnPropDesc=Object.getOwnPropertyDescriptor,__getOwnPropDescs=Object.getOwnPropertyDescriptors,__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},__spreadProps=(a,b)=>__defProps(a,__getOwnPropDescs(b));var __objRest=(source,exclude)=>{var target={};for(var prop in source)__hasOwnProp.call(source,prop)&&exclude.indexOf(prop)<0&&(target[prop]=source[prop]);if(source!=null&&__getOwnPropSymbols)for(var prop of __getOwnPropSymbols(source))exclude.indexOf(prop)<0&&__propIsEnum.call(source,prop)&&(target[prop]=source[prop]);return target};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,{SkeletonLoader:()=>SkeletonLoader});module.exports=__toCommonJS(src_exports);var React=__toESM(require("react")),import_styling_library2=require("@twilio-paste/styling-library"),import_box=require("@twilio-paste/box");var import_styling_library=require("@twilio-paste/styling-library"),SkeletonLoaderKeyframes=import_styling_library.keyframes`
+"use strict";var __create=Object.create;var __defProp=Object.defineProperty;var __getOwnPropDesc=Object.getOwnPropertyDescriptor;var __getOwnPropNames=Object.getOwnPropertyNames;var __getProtoOf=Object.getPrototypeOf,__hasOwnProp=Object.prototype.hasOwnProperty;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,{SkeletonLoader:()=>SkeletonLoader});module.exports=__toCommonJS(src_exports);var React=__toESM(require("react")),import_styling_library2=require("@twilio-paste/styling-library"),import_box=require("@twilio-paste/box");var import_styling_library=require("@twilio-paste/styling-library"),SkeletonLoaderKeyframes=import_styling_library.keyframes`
   0% {
@@ -27,2 +27,2 @@ transform: translateX(-100%) skew(155deg);
   animation-iteration-count: infinite;
-`,SkeletonLoader=React.forwardRef((_a,ref)=>{var _b=_a,{borderBottomLeftRadius,borderBottomRightRadius,borderRadius="borderRadius20",borderTopLeftRadius,borderTopRightRadius,element="SKELETON_LOADER",display,height="sizeIcon20",maxHeight,maxWidth,minHeight,minWidth,size=null,width=null}=_b,props=__objRest(_b,["borderBottomLeftRadius","borderBottomRightRadius","borderRadius","borderTopLeftRadius","borderTopRightRadius","element","display","height","maxHeight","maxWidth","minHeight","minWidth","size","width"]);return React.createElement(import_box.Box,__spreadProps(__spreadValues({},(0,import_box.safelySpreadBoxProps)(props)),{"aria-busy":"true",backgroundColor:"colorBackgroundStrong",borderBottomLeftRadius,borderBottomRightRadius,borderRadius,borderTopLeftRadius,borderTopRightRadius,display,element,height,maxHeight,maxWidth,minHeight,minWidth,overflow:"hidden",pointerEvents:"none",position:"relative",userSelect:"none",size,width,ref}),React.createElement(SkeletonLoaderInner,null))});SkeletonLoader.displayName="SkeletonLoader";0&&(module.exports={SkeletonLoader});
+`,SkeletonLoader=React.forwardRef(({borderBottomLeftRadius,borderBottomRightRadius,borderRadius="borderRadius20",borderTopLeftRadius,borderTopRightRadius,element="SKELETON_LOADER",display,height="sizeIcon20",maxHeight,maxWidth,minHeight,minWidth,size=null,width=null,...props},ref)=>React.createElement(import_box.Box,{...(0,import_box.safelySpreadBoxProps)(props),"aria-busy":"true",backgroundColor:"colorBackgroundStrong",borderBottomLeftRadius,borderBottomRightRadius,borderRadius,borderTopLeftRadius,borderTopRightRadius,display,element,height,maxHeight,maxWidth,minHeight,minWidth,overflow:"hidden",pointerEvents:"none",position:"relative",userSelect:"none",size,width,ref},React.createElement(SkeletonLoaderInner,null)));SkeletonLoader.displayName="SkeletonLoader";0&&(module.exports={SkeletonLoader});

package.json

 {
   "name": "@twilio-paste/skeleton-loader",
-  "version": "5.0.0",
+  "version": "5.0.1",
   "category": "data display",
@@ -23,3 +23,2 @@ "status": "production",
     "build:js": "NODE_ENV=development node build.js",
-    "build:props": "typedoc --tsconfig ./tsconfig.json --json ./dist/prop-types.json",
     "clean": "rm -rf ./dist",
@@ -49,7 +48,7 @@ "tsc": "tsc"
     "@twilio-paste/customization": "^7.0.0",
-    "@twilio-paste/design-tokens": "^9.0.2",
+    "@twilio-paste/design-tokens": "^9.3.0",
     "@twilio-paste/style-props": "^8.0.0",
     "@twilio-paste/styling-library": "^2.0.0",
     "@twilio-paste/theme": "^10.0.0",
-    "@twilio-paste/types": "^5.0.0",
+    "@twilio-paste/types": "^5.0.1",
     "@types/react": "^18.0.27",
@@ -56,0 +55,0 @@ "@types/react-dom": "^18.0.10",

Fixed alerts

Minified code

Quality

This package contains minified code. This may be harmless in some cases where minified code is included in packaged libraries, however packages on npm should not minify code.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

105096

0.95%

Number of low quality alerts

1

-50%

Worsened metrics

Lines of code

277

-25.94%

No dependency changes