@twilio-paste/input - npm Package Compare versions

Comparing version 9.0.2 to 9.1.0

dist/DecrementButton.d.ts

@@ -1,11 +0,11 @@
-import * as React from 'react';
-import type { BoxProps } from '@twilio-paste/box';
-import { type ButtonProps } from '@twilio-paste/button';
-import type { HTMLPasteProps } from '@twilio-paste/types';
-export interface DecrementButtonProps extends HTMLPasteProps<'button'> {
+import type { BoxProps } from "@twilio-paste/box";
+import { type ButtonProps } from "@twilio-paste/button";
+import type { HTMLPasteProps } from "@twilio-paste/types";
+import * as React from "react";
+export interface DecrementButtonProps extends HTMLPasteProps<"button"> {
     i18nStepDownLabel?: string;
-    element?: BoxProps['element'];
-    tabIndex?: ButtonProps['tabIndex'];
+    element?: BoxProps["element"];
+    tabIndex?: ButtonProps["tabIndex"];
 }
 export declare const DecrementButton: React.ForwardRefExoticComponent<DecrementButtonProps & React.RefAttributes<HTMLButtonElement>>;
 //# sourceMappingURL=DecrementButton.d.ts.map

dist/IncrementButton.d.ts

@@ -1,11 +0,11 @@
-import * as React from 'react';
-import type { BoxProps } from '@twilio-paste/box';
-import { type ButtonProps } from '@twilio-paste/button';
-import type { HTMLPasteProps } from '@twilio-paste/types';
-export interface IncrementButtonProps extends HTMLPasteProps<'button'> {
+import type { BoxProps } from "@twilio-paste/box";
+import { type ButtonProps } from "@twilio-paste/button";
+import type { HTMLPasteProps } from "@twilio-paste/types";
+import * as React from "react";
+export interface IncrementButtonProps extends HTMLPasteProps<"button"> {
     i18nStepUpLabel?: string;
-    element?: BoxProps['element'];
-    tabIndex?: ButtonProps['tabIndex'];
+    element?: BoxProps["element"];
+    tabIndex?: ButtonProps["tabIndex"];
 }
 export declare const IncrementButton: React.ForwardRefExoticComponent<IncrementButtonProps & React.RefAttributes<HTMLButtonElement>>;
 //# sourceMappingURL=IncrementButton.d.ts.map

dist/index.d.ts

@@ -1,2 +0,2 @@
-export * from './Input';
+export * from "./Input";
 //# sourceMappingURL=index.d.ts.map

dist/index.debug.es.js

 // src/Input.tsx
-import * as React3 from "react";
-import { useMergeRefs } from "@twilio-paste/utils";
 import { Box } from "@twilio-paste/box";
 import { InputBox } from "@twilio-paste/input-box";
+import { useMergeRefs } from "@twilio-paste/utils";
+import * as React3 from "react";
 
-// src/utils.ts
-var PROPS_TO_BLOCK = ["className", "style", "size", "height", "width"];
-var safelySpreadFormControlProps = (props) => {
-  return Object.keys(props).reduce((newProps, key) => {
-    if (!PROPS_TO_BLOCK.includes(key)) {
-      newProps[key] = props[key];
-    }
-    return newProps;
-  }, {});
-};
-
 // src/DecrementButton.tsx
-import * as React from "react";
 import { Button } from "@twilio-paste/button";
 import { ChevronDownIcon } from "@twilio-paste/icons/esm/ChevronDownIcon";
+import * as React from "react";
 var DecrementButton = React.forwardRef(
@@ -52,5 +41,5 @@ ({ i18nStepDownLabel = "step value down", element, ...props }, ref) => {
 // src/IncrementButton.tsx
-import * as React2 from "react";
 import { Button as Button2 } from "@twilio-paste/button";
 import { ChevronUpIcon } from "@twilio-paste/icons/esm/ChevronUpIcon";
+import * as React2 from "react";
 var IncrementButton = React2.forwardRef(
@@ -85,2 +74,13 @@ ({ i18nStepUpLabel = "step value up", element, ...props }, ref) => {
 
+// src/utils.ts
+var PROPS_TO_BLOCK = ["className", "style", "size", "height", "width"];
+var safelySpreadFormControlProps = (props) => {
+  return Object.keys(props).reduce((newProps, key) => {
+    if (!PROPS_TO_BLOCK.includes(key)) {
+      newProps[key] = props[key];
+    }
+    return newProps;
+  }, {});
+};
+
 // src/Input.tsx
@@ -87,0 +87,0 @@ var InputElement = React3.forwardRef(({ element, ...props }, ref) => {

dist/index.debug.js

@@ -35,22 +35,11 @@ "use strict";
 // src/Input.tsx
-var React3 = __toESM(require("react"));
-var import_utils = require("@twilio-paste/utils");
 var import_box = require("@twilio-paste/box");
 var import_input_box = require("@twilio-paste/input-box");
+var import_utils = require("@twilio-paste/utils");
+var React3 = __toESM(require("react"));
 
-// src/utils.ts
-var PROPS_TO_BLOCK = ["className", "style", "size", "height", "width"];
-var safelySpreadFormControlProps = (props) => {
-  return Object.keys(props).reduce((newProps, key) => {
-    if (!PROPS_TO_BLOCK.includes(key)) {
-      newProps[key] = props[key];
-    }
-    return newProps;
-  }, {});
-};
-
 // src/DecrementButton.tsx
-var React = __toESM(require("react"));
 var import_button = require("@twilio-paste/button");
 var import_ChevronDownIcon = require("@twilio-paste/icons/cjs/ChevronDownIcon");
+var React = __toESM(require("react"));
 var DecrementButton = React.forwardRef(
@@ -86,5 +75,5 @@ ({ i18nStepDownLabel = "step value down", element, ...props }, ref) => {
 // src/IncrementButton.tsx
-var React2 = __toESM(require("react"));
 var import_button2 = require("@twilio-paste/button");
 var import_ChevronUpIcon = require("@twilio-paste/icons/cjs/ChevronUpIcon");
+var React2 = __toESM(require("react"));
 var IncrementButton = React2.forwardRef(
@@ -119,2 +108,13 @@ ({ i18nStepUpLabel = "step value up", element, ...props }, ref) => {
 
+// src/utils.ts
+var PROPS_TO_BLOCK = ["className", "style", "size", "height", "width"];
+var safelySpreadFormControlProps = (props) => {
+  return Object.keys(props).reduce((newProps, key) => {
+    if (!PROPS_TO_BLOCK.includes(key)) {
+      newProps[key] = props[key];
+    }
+    return newProps;
+  }, {});
+};
+
 // src/Input.tsx
@@ -121,0 +121,0 @@ var InputElement = React3.forwardRef(({ element, ...props }, ref) => {

dist/index.es.js

@@ -1,1 +0,1 @@
-import*as React3 from"react";import{useMergeRefs}from"@twilio-paste/utils";import{Box}from"@twilio-paste/box";import{InputBox}from"@twilio-paste/input-box";var PROPS_TO_BLOCK=["className","style","size","height","width"],safelySpreadFormControlProps=props=>Object.keys(props).reduce((newProps,key)=>(PROPS_TO_BLOCK.includes(key)||(newProps[key]=props[key]),newProps),{});import*as React from"react";import{Button}from"@twilio-paste/button";import{ChevronDownIcon}from"@twilio-paste/icons/esm/ChevronDownIcon";var DecrementButton=React.forwardRef(({i18nStepDownLabel="step value down",element,...props},ref)=>React.createElement(Button,{...props,ref,element:`${element}_DECREMENT_BUTTON`,variant:"reset",size:"reset",type:"button",borderRadius:"borderRadius20",backgroundColor:"colorBackground",marginRight:"space30"},React.createElement(ChevronDownIcon,{decorative:!1,title:i18nStepDownLabel,size:"sizeIcon05",element:`${element}_DECREMENT_ICON`})));DecrementButton.displayName="Decrement";import*as React2 from"react";import{Button as Button2}from"@twilio-paste/button";import{ChevronUpIcon}from"@twilio-paste/icons/esm/ChevronUpIcon";var IncrementButton=React2.forwardRef(({i18nStepUpLabel="step value up",element,...props},ref)=>React2.createElement(Button2,{...props,ref,element:`${element}_INCREMENT_BUTTON`,variant:"reset",size:"reset",type:"button",borderRadius:"borderRadius20",backgroundColor:"colorBackground",marginRight:"space30"},React2.createElement(ChevronUpIcon,{decorative:!1,title:i18nStepUpLabel,size:"sizeIcon05",element:`${element}_INCREMENT_ICON`})));IncrementButton.displayName="Increment";var InputElement=React3.forwardRef(({element,...props},ref)=>React3.createElement(Box,{appearance:"none",as:"input",backgroundColor:"transparent",border:"none",borderRadius:"borderRadius20",boxShadow:"none",color:"inherit",cursor:(props.type==="date"||props.type==="time")&&!props.readOnly&&!props.disabled?"text":"auto",display:"block",element,fontFamily:"inherit",fontSize:"fontSize30",fontWeight:"fontWeightMedium",lineHeight:"lineHeight20",margin:"space0",outline:"none",paddingBottom:"space30",paddingLeft:"space40",paddingRight:"space40",paddingTop:"space30",resize:"none",width:"100%",variant:props.variant,ref,_placeholder:{color:props.variant==="inverse"?"colorTextInverseWeaker":"colorTextWeak",fontStyle:"italic"},_focus_placeholder:{color:props.variant==="inverse"?"colorTextInverseWeaker":"colorTextWeak"},_disabled:{color:props.variant==="inverse"?"colorTextInverseWeakest":"colorTextWeaker",cursor:"not-allowed","-webkit-text-fill-color":props.variant==="inverse"?"colorTextInverseWeakest":"colorTextWeaker","-webkit-opacity":"1"},__webkit_datetime_edit:{display:"flex"},__webkit_calendar_picker_indicator_hover:{cursor:props.readOnly||props.disabled?"default":"pointer"},__webkit_inner_spin_button:{display:"none",margin:"space0"},__webkit_outer_spin_button:{display:"none",margin:"space0"},"-moz-appearance":"textfield",...props}));InputElement.displayName="InputElement";var Input=React3.forwardRef(({disabled,element="INPUT",hasError,id,insertAfter,insertBefore,max,min,name,placeholder,readOnly,required,step,type,value,variant,i18nStepUpLabel,i18nStepDownLabel,...props},ref)=>{let typeProps={type},internalRef=React3.useRef(),mergedRef=useMergeRefs(internalRef,ref),[showIncrement,setShowIncrement]=React3.useState(!0),[showDecrement,setShowDecrement]=React3.useState(!0),[internalValue,setInternalValue]=React3.useState(props.defaultValue?props.defaultValue:"0");return React3.useEffect(()=>{if(type!=="number")return;if(disabled){setShowDecrement(!1),setShowIncrement(!1);return}let numVal=Number(internalValue),numStep=step&&!isNaN(Number(step))?Number(step):1,numMax=Number(max);if(isNaN(numMax))return;let numMin=Number(min);isNaN(numMin)||((numMax-numMin)%numStep!==0&&console.error("[Paste Input]: when using min/max, and step values with a Number Input, please make sure that the min and max are multiples of the step value."),numVal<numMax&&numVal+numStep<=numMax?setShowIncrement(!0):setShowIncrement(!1),numVal>numMin&&numVal-numStep>=numMin?setShowDecrement(!0):setShowDecrement(!1))},[max,min,step,disabled,type,internalValue]),React3.createElement(InputBox,{disabled,element,hasError,insertAfter,insertBefore,readOnly,type,variant},React3.createElement(InputElement,{"aria-invalid":hasError,"aria-readonly":readOnly,...safelySpreadFormControlProps(props),...typeProps,disabled,element:`${element}_ELEMENT`,id,name,max,min,placeholder,readOnly,ref:mergedRef,required,step,value,variant,onChange:event=>{props.onChange!=null&&typeof props.onChange=="function"&&props.onChange(event),setInternalValue(event.target.value)}}),type==="number"?React3.createElement(Box,{display:"flex",flexDirection:"column",rowGap:"space10",justifyContent:"center",element:`${element}_STEP_WRAPPER`},showIncrement?React3.createElement(IncrementButton,{element,onClick:()=>{internalRef.current?.stepUp();let ev=new Event("change",{bubbles:!0});internalRef.current?.dispatchEvent(ev),internalRef.current?.focus()},i18nStepUpLabel}):React3.createElement(Box,{height:"12px",width:"12px",element:`${element}_INCREMENT_PLACEHOLDER`}),showDecrement?React3.createElement(DecrementButton,{element,onClick:()=>{internalRef.current?.stepDown();let ev=new Event("change",{bubbles:!0});internalRef.current?.dispatchEvent(ev),internalRef.current?.focus()},i18nStepDownLabel}):React3.createElement(Box,{height:"12px",width:"12px",element:`${element}_DECREMENT_PLACEHOLDER`})):React3.createElement(React3.Fragment,null))});Input.displayName="Input";export{Input,InputElement};
+import{Box}from"@twilio-paste/box";import{InputBox}from"@twilio-paste/input-box";import{useMergeRefs}from"@twilio-paste/utils";import*as React3 from"react";import{Button}from"@twilio-paste/button";import{ChevronDownIcon}from"@twilio-paste/icons/esm/ChevronDownIcon";import*as React from"react";var DecrementButton=React.forwardRef(({i18nStepDownLabel="step value down",element,...props},ref)=>React.createElement(Button,{...props,ref,element:`${element}_DECREMENT_BUTTON`,variant:"reset",size:"reset",type:"button",borderRadius:"borderRadius20",backgroundColor:"colorBackground",marginRight:"space30"},React.createElement(ChevronDownIcon,{decorative:!1,title:i18nStepDownLabel,size:"sizeIcon05",element:`${element}_DECREMENT_ICON`})));DecrementButton.displayName="Decrement";import{Button as Button2}from"@twilio-paste/button";import{ChevronUpIcon}from"@twilio-paste/icons/esm/ChevronUpIcon";import*as React2 from"react";var IncrementButton=React2.forwardRef(({i18nStepUpLabel="step value up",element,...props},ref)=>React2.createElement(Button2,{...props,ref,element:`${element}_INCREMENT_BUTTON`,variant:"reset",size:"reset",type:"button",borderRadius:"borderRadius20",backgroundColor:"colorBackground",marginRight:"space30"},React2.createElement(ChevronUpIcon,{decorative:!1,title:i18nStepUpLabel,size:"sizeIcon05",element:`${element}_INCREMENT_ICON`})));IncrementButton.displayName="Increment";var PROPS_TO_BLOCK=["className","style","size","height","width"],safelySpreadFormControlProps=props=>Object.keys(props).reduce((newProps,key)=>(PROPS_TO_BLOCK.includes(key)||(newProps[key]=props[key]),newProps),{});var InputElement=React3.forwardRef(({element,...props},ref)=>React3.createElement(Box,{appearance:"none",as:"input",backgroundColor:"transparent",border:"none",borderRadius:"borderRadius20",boxShadow:"none",color:"inherit",cursor:(props.type==="date"||props.type==="time")&&!props.readOnly&&!props.disabled?"text":"auto",display:"block",element,fontFamily:"inherit",fontSize:"fontSize30",fontWeight:"fontWeightMedium",lineHeight:"lineHeight20",margin:"space0",outline:"none",paddingBottom:"space30",paddingLeft:"space40",paddingRight:"space40",paddingTop:"space30",resize:"none",width:"100%",variant:props.variant,ref,_placeholder:{color:props.variant==="inverse"?"colorTextInverseWeaker":"colorTextWeak",fontStyle:"italic"},_focus_placeholder:{color:props.variant==="inverse"?"colorTextInverseWeaker":"colorTextWeak"},_disabled:{color:props.variant==="inverse"?"colorTextInverseWeakest":"colorTextWeaker",cursor:"not-allowed","-webkit-text-fill-color":props.variant==="inverse"?"colorTextInverseWeakest":"colorTextWeaker","-webkit-opacity":"1"},__webkit_datetime_edit:{display:"flex"},__webkit_calendar_picker_indicator_hover:{cursor:props.readOnly||props.disabled?"default":"pointer"},__webkit_inner_spin_button:{display:"none",margin:"space0"},__webkit_outer_spin_button:{display:"none",margin:"space0"},"-moz-appearance":"textfield",...props}));InputElement.displayName="InputElement";var Input=React3.forwardRef(({disabled,element="INPUT",hasError,id,insertAfter,insertBefore,max,min,name,placeholder,readOnly,required,step,type,value,variant,i18nStepUpLabel,i18nStepDownLabel,...props},ref)=>{let typeProps={type},internalRef=React3.useRef(),mergedRef=useMergeRefs(internalRef,ref),[showIncrement,setShowIncrement]=React3.useState(!0),[showDecrement,setShowDecrement]=React3.useState(!0),[internalValue,setInternalValue]=React3.useState(props.defaultValue?props.defaultValue:"0");return React3.useEffect(()=>{if(type!=="number")return;if(disabled){setShowDecrement(!1),setShowIncrement(!1);return}let numVal=Number(internalValue),numStep=step&&!isNaN(Number(step))?Number(step):1,numMax=Number(max);if(isNaN(numMax))return;let numMin=Number(min);isNaN(numMin)||((numMax-numMin)%numStep!==0&&console.error("[Paste Input]: when using min/max, and step values with a Number Input, please make sure that the min and max are multiples of the step value."),numVal<numMax&&numVal+numStep<=numMax?setShowIncrement(!0):setShowIncrement(!1),numVal>numMin&&numVal-numStep>=numMin?setShowDecrement(!0):setShowDecrement(!1))},[max,min,step,disabled,type,internalValue]),React3.createElement(InputBox,{disabled,element,hasError,insertAfter,insertBefore,readOnly,type,variant},React3.createElement(InputElement,{"aria-invalid":hasError,"aria-readonly":readOnly,...safelySpreadFormControlProps(props),...typeProps,disabled,element:`${element}_ELEMENT`,id,name,max,min,placeholder,readOnly,ref:mergedRef,required,step,value,variant,onChange:event=>{props.onChange!=null&&typeof props.onChange=="function"&&props.onChange(event),setInternalValue(event.target.value)}}),type==="number"?React3.createElement(Box,{display:"flex",flexDirection:"column",rowGap:"space10",justifyContent:"center",element:`${element}_STEP_WRAPPER`},showIncrement?React3.createElement(IncrementButton,{element,onClick:()=>{internalRef.current?.stepUp();let ev=new Event("change",{bubbles:!0});internalRef.current?.dispatchEvent(ev),internalRef.current?.focus()},i18nStepUpLabel}):React3.createElement(Box,{height:"12px",width:"12px",element:`${element}_INCREMENT_PLACEHOLDER`}),showDecrement?React3.createElement(DecrementButton,{element,onClick:()=>{internalRef.current?.stepDown();let ev=new Event("change",{bubbles:!0});internalRef.current?.dispatchEvent(ev),internalRef.current?.focus()},i18nStepDownLabel}):React3.createElement(Box,{height:"12px",width:"12px",element:`${element}_DECREMENT_PLACEHOLDER`})):React3.createElement(React3.Fragment,null))});Input.displayName="Input";export{Input,InputElement};

dist/index.js

@@ -1,1 +0,1 @@
-"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,{Input:()=>Input,InputElement:()=>InputElement});module.exports=__toCommonJS(src_exports);var React3=__toESM(require("react")),import_utils=require("@twilio-paste/utils"),import_box=require("@twilio-paste/box"),import_input_box=require("@twilio-paste/input-box");var PROPS_TO_BLOCK=["className","style","size","height","width"],safelySpreadFormControlProps=props=>Object.keys(props).reduce((newProps,key)=>(PROPS_TO_BLOCK.includes(key)||(newProps[key]=props[key]),newProps),{});var React=__toESM(require("react")),import_button=require("@twilio-paste/button"),import_ChevronDownIcon=require("@twilio-paste/icons/cjs/ChevronDownIcon"),DecrementButton=React.forwardRef(({i18nStepDownLabel="step value down",element,...props},ref)=>React.createElement(import_button.Button,{...props,ref,element:`${element}_DECREMENT_BUTTON`,variant:"reset",size:"reset",type:"button",borderRadius:"borderRadius20",backgroundColor:"colorBackground",marginRight:"space30"},React.createElement(import_ChevronDownIcon.ChevronDownIcon,{decorative:!1,title:i18nStepDownLabel,size:"sizeIcon05",element:`${element}_DECREMENT_ICON`})));DecrementButton.displayName="Decrement";var React2=__toESM(require("react")),import_button2=require("@twilio-paste/button"),import_ChevronUpIcon=require("@twilio-paste/icons/cjs/ChevronUpIcon"),IncrementButton=React2.forwardRef(({i18nStepUpLabel="step value up",element,...props},ref)=>React2.createElement(import_button2.Button,{...props,ref,element:`${element}_INCREMENT_BUTTON`,variant:"reset",size:"reset",type:"button",borderRadius:"borderRadius20",backgroundColor:"colorBackground",marginRight:"space30"},React2.createElement(import_ChevronUpIcon.ChevronUpIcon,{decorative:!1,title:i18nStepUpLabel,size:"sizeIcon05",element:`${element}_INCREMENT_ICON`})));IncrementButton.displayName="Increment";var InputElement=React3.forwardRef(({element,...props},ref)=>React3.createElement(import_box.Box,{appearance:"none",as:"input",backgroundColor:"transparent",border:"none",borderRadius:"borderRadius20",boxShadow:"none",color:"inherit",cursor:(props.type==="date"||props.type==="time")&&!props.readOnly&&!props.disabled?"text":"auto",display:"block",element,fontFamily:"inherit",fontSize:"fontSize30",fontWeight:"fontWeightMedium",lineHeight:"lineHeight20",margin:"space0",outline:"none",paddingBottom:"space30",paddingLeft:"space40",paddingRight:"space40",paddingTop:"space30",resize:"none",width:"100%",variant:props.variant,ref,_placeholder:{color:props.variant==="inverse"?"colorTextInverseWeaker":"colorTextWeak",fontStyle:"italic"},_focus_placeholder:{color:props.variant==="inverse"?"colorTextInverseWeaker":"colorTextWeak"},_disabled:{color:props.variant==="inverse"?"colorTextInverseWeakest":"colorTextWeaker",cursor:"not-allowed","-webkit-text-fill-color":props.variant==="inverse"?"colorTextInverseWeakest":"colorTextWeaker","-webkit-opacity":"1"},__webkit_datetime_edit:{display:"flex"},__webkit_calendar_picker_indicator_hover:{cursor:props.readOnly||props.disabled?"default":"pointer"},__webkit_inner_spin_button:{display:"none",margin:"space0"},__webkit_outer_spin_button:{display:"none",margin:"space0"},"-moz-appearance":"textfield",...props}));InputElement.displayName="InputElement";var Input=React3.forwardRef(({disabled,element="INPUT",hasError,id,insertAfter,insertBefore,max,min,name,placeholder,readOnly,required,step,type,value,variant,i18nStepUpLabel,i18nStepDownLabel,...props},ref)=>{let typeProps={type},internalRef=React3.useRef(),mergedRef=(0,import_utils.useMergeRefs)(internalRef,ref),[showIncrement,setShowIncrement]=React3.useState(!0),[showDecrement,setShowDecrement]=React3.useState(!0),[internalValue,setInternalValue]=React3.useState(props.defaultValue?props.defaultValue:"0");return React3.useEffect(()=>{if(type!=="number")return;if(disabled){setShowDecrement(!1),setShowIncrement(!1);return}let numVal=Number(internalValue),numStep=step&&!isNaN(Number(step))?Number(step):1,numMax=Number(max);if(isNaN(numMax))return;let numMin=Number(min);isNaN(numMin)||((numMax-numMin)%numStep!==0&&console.error("[Paste Input]: when using min/max, and step values with a Number Input, please make sure that the min and max are multiples of the step value."),numVal<numMax&&numVal+numStep<=numMax?setShowIncrement(!0):setShowIncrement(!1),numVal>numMin&&numVal-numStep>=numMin?setShowDecrement(!0):setShowDecrement(!1))},[max,min,step,disabled,type,internalValue]),React3.createElement(import_input_box.InputBox,{disabled,element,hasError,insertAfter,insertBefore,readOnly,type,variant},React3.createElement(InputElement,{"aria-invalid":hasError,"aria-readonly":readOnly,...safelySpreadFormControlProps(props),...typeProps,disabled,element:`${element}_ELEMENT`,id,name,max,min,placeholder,readOnly,ref:mergedRef,required,step,value,variant,onChange:event=>{props.onChange!=null&&typeof props.onChange=="function"&&props.onChange(event),setInternalValue(event.target.value)}}),type==="number"?React3.createElement(import_box.Box,{display:"flex",flexDirection:"column",rowGap:"space10",justifyContent:"center",element:`${element}_STEP_WRAPPER`},showIncrement?React3.createElement(IncrementButton,{element,onClick:()=>{internalRef.current?.stepUp();let ev=new Event("change",{bubbles:!0});internalRef.current?.dispatchEvent(ev),internalRef.current?.focus()},i18nStepUpLabel}):React3.createElement(import_box.Box,{height:"12px",width:"12px",element:`${element}_INCREMENT_PLACEHOLDER`}),showDecrement?React3.createElement(DecrementButton,{element,onClick:()=>{internalRef.current?.stepDown();let ev=new Event("change",{bubbles:!0});internalRef.current?.dispatchEvent(ev),internalRef.current?.focus()},i18nStepDownLabel}):React3.createElement(import_box.Box,{height:"12px",width:"12px",element:`${element}_DECREMENT_PLACEHOLDER`})):React3.createElement(React3.Fragment,null))});Input.displayName="Input";
+"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,{Input:()=>Input,InputElement:()=>InputElement});module.exports=__toCommonJS(src_exports);var import_box=require("@twilio-paste/box"),import_input_box=require("@twilio-paste/input-box"),import_utils=require("@twilio-paste/utils"),React3=__toESM(require("react"));var import_button=require("@twilio-paste/button"),import_ChevronDownIcon=require("@twilio-paste/icons/cjs/ChevronDownIcon"),React=__toESM(require("react")),DecrementButton=React.forwardRef(({i18nStepDownLabel="step value down",element,...props},ref)=>React.createElement(import_button.Button,{...props,ref,element:`${element}_DECREMENT_BUTTON`,variant:"reset",size:"reset",type:"button",borderRadius:"borderRadius20",backgroundColor:"colorBackground",marginRight:"space30"},React.createElement(import_ChevronDownIcon.ChevronDownIcon,{decorative:!1,title:i18nStepDownLabel,size:"sizeIcon05",element:`${element}_DECREMENT_ICON`})));DecrementButton.displayName="Decrement";var import_button2=require("@twilio-paste/button"),import_ChevronUpIcon=require("@twilio-paste/icons/cjs/ChevronUpIcon"),React2=__toESM(require("react")),IncrementButton=React2.forwardRef(({i18nStepUpLabel="step value up",element,...props},ref)=>React2.createElement(import_button2.Button,{...props,ref,element:`${element}_INCREMENT_BUTTON`,variant:"reset",size:"reset",type:"button",borderRadius:"borderRadius20",backgroundColor:"colorBackground",marginRight:"space30"},React2.createElement(import_ChevronUpIcon.ChevronUpIcon,{decorative:!1,title:i18nStepUpLabel,size:"sizeIcon05",element:`${element}_INCREMENT_ICON`})));IncrementButton.displayName="Increment";var PROPS_TO_BLOCK=["className","style","size","height","width"],safelySpreadFormControlProps=props=>Object.keys(props).reduce((newProps,key)=>(PROPS_TO_BLOCK.includes(key)||(newProps[key]=props[key]),newProps),{});var InputElement=React3.forwardRef(({element,...props},ref)=>React3.createElement(import_box.Box,{appearance:"none",as:"input",backgroundColor:"transparent",border:"none",borderRadius:"borderRadius20",boxShadow:"none",color:"inherit",cursor:(props.type==="date"||props.type==="time")&&!props.readOnly&&!props.disabled?"text":"auto",display:"block",element,fontFamily:"inherit",fontSize:"fontSize30",fontWeight:"fontWeightMedium",lineHeight:"lineHeight20",margin:"space0",outline:"none",paddingBottom:"space30",paddingLeft:"space40",paddingRight:"space40",paddingTop:"space30",resize:"none",width:"100%",variant:props.variant,ref,_placeholder:{color:props.variant==="inverse"?"colorTextInverseWeaker":"colorTextWeak",fontStyle:"italic"},_focus_placeholder:{color:props.variant==="inverse"?"colorTextInverseWeaker":"colorTextWeak"},_disabled:{color:props.variant==="inverse"?"colorTextInverseWeakest":"colorTextWeaker",cursor:"not-allowed","-webkit-text-fill-color":props.variant==="inverse"?"colorTextInverseWeakest":"colorTextWeaker","-webkit-opacity":"1"},__webkit_datetime_edit:{display:"flex"},__webkit_calendar_picker_indicator_hover:{cursor:props.readOnly||props.disabled?"default":"pointer"},__webkit_inner_spin_button:{display:"none",margin:"space0"},__webkit_outer_spin_button:{display:"none",margin:"space0"},"-moz-appearance":"textfield",...props}));InputElement.displayName="InputElement";var Input=React3.forwardRef(({disabled,element="INPUT",hasError,id,insertAfter,insertBefore,max,min,name,placeholder,readOnly,required,step,type,value,variant,i18nStepUpLabel,i18nStepDownLabel,...props},ref)=>{let typeProps={type},internalRef=React3.useRef(),mergedRef=(0,import_utils.useMergeRefs)(internalRef,ref),[showIncrement,setShowIncrement]=React3.useState(!0),[showDecrement,setShowDecrement]=React3.useState(!0),[internalValue,setInternalValue]=React3.useState(props.defaultValue?props.defaultValue:"0");return React3.useEffect(()=>{if(type!=="number")return;if(disabled){setShowDecrement(!1),setShowIncrement(!1);return}let numVal=Number(internalValue),numStep=step&&!isNaN(Number(step))?Number(step):1,numMax=Number(max);if(isNaN(numMax))return;let numMin=Number(min);isNaN(numMin)||((numMax-numMin)%numStep!==0&&console.error("[Paste Input]: when using min/max, and step values with a Number Input, please make sure that the min and max are multiples of the step value."),numVal<numMax&&numVal+numStep<=numMax?setShowIncrement(!0):setShowIncrement(!1),numVal>numMin&&numVal-numStep>=numMin?setShowDecrement(!0):setShowDecrement(!1))},[max,min,step,disabled,type,internalValue]),React3.createElement(import_input_box.InputBox,{disabled,element,hasError,insertAfter,insertBefore,readOnly,type,variant},React3.createElement(InputElement,{"aria-invalid":hasError,"aria-readonly":readOnly,...safelySpreadFormControlProps(props),...typeProps,disabled,element:`${element}_ELEMENT`,id,name,max,min,placeholder,readOnly,ref:mergedRef,required,step,value,variant,onChange:event=>{props.onChange!=null&&typeof props.onChange=="function"&&props.onChange(event),setInternalValue(event.target.value)}}),type==="number"?React3.createElement(import_box.Box,{display:"flex",flexDirection:"column",rowGap:"space10",justifyContent:"center",element:`${element}_STEP_WRAPPER`},showIncrement?React3.createElement(IncrementButton,{element,onClick:()=>{internalRef.current?.stepUp();let ev=new Event("change",{bubbles:!0});internalRef.current?.dispatchEvent(ev),internalRef.current?.focus()},i18nStepUpLabel}):React3.createElement(import_box.Box,{height:"12px",width:"12px",element:`${element}_INCREMENT_PLACEHOLDER`}),showDecrement?React3.createElement(DecrementButton,{element,onClick:()=>{internalRef.current?.stepDown();let ev=new Event("change",{bubbles:!0});internalRef.current?.dispatchEvent(ev),internalRef.current?.focus()},i18nStepDownLabel}):React3.createElement(import_box.Box,{height:"12px",width:"12px",element:`${element}_DECREMENT_PLACEHOLDER`})):React3.createElement(React3.Fragment,null))});Input.displayName="Input";

dist/Input.d.ts

@@ -1,7 +0,7 @@
-import * as React from 'react';
-import type { BoxProps, BoxStyleProps } from '@twilio-paste/box';
-import type { InputBoxTypes } from '@twilio-paste/input-box';
-import type { HTMLPasteProps } from '@twilio-paste/types';
-export type InputVariants = 'default' | 'inverse';
-export interface InputProps extends HTMLPasteProps<'input'>, Pick<BoxProps, 'element'> {
+import type { BoxProps, BoxStyleProps } from "@twilio-paste/box";
+import type { InputBoxTypes } from "@twilio-paste/input-box";
+import type { HTMLPasteProps } from "@twilio-paste/types";
+import * as React from "react";
+export type InputVariants = "default" | "inverse";
+export interface InputProps extends HTMLPasteProps<"input">, Pick<BoxProps, "element"> {
     disabled?: boolean;
@@ -23,5 +23,5 @@ hasError?: boolean;
     width?: never;
-    padding?: 'space0';
-    paddingRight?: BoxStyleProps['paddingRight'];
-    cursor?: BoxStyleProps['cursor'];
+    padding?: "space0";
+    paddingRight?: BoxStyleProps["paddingRight"];
+    cursor?: BoxStyleProps["cursor"];
     i18nStepUpLabel?: string;
@@ -28,0 +28,0 @@ i18nStepDownLabel?: string;

package.json

 {
   "name": "@twilio-paste/input",
-  "version": "9.0.2",
+  "version": "9.1.0",
   "category": "user input",
@@ -46,3 +46,2 @@ "status": "production",
     "@types/react-dom": "^16.8.6 || ^17.0.2 || ^18.0.10",
-    "prop-types": "^15.7.2",
     "react": "^16.8.6 || ^17.0.2 || ^18.0.0",
@@ -52,14 +51,14 @@ "react-dom": "^16.8.6 || ^17.0.2 || ^18.0.0"
   "devDependencies": {
-    "@twilio-paste/anchor": "^12.0.0",
+    "@twilio-paste/anchor": "^12.1.0",
     "@twilio-paste/animation-library": "^2.0.0",
-    "@twilio-paste/box": "^10.0.0",
-    "@twilio-paste/button": "^14.0.2",
+    "@twilio-paste/box": "^10.1.0",
+    "@twilio-paste/button": "^14.1.0",
     "@twilio-paste/color-contrast-utils": "^5.0.0",
-    "@twilio-paste/customization": "^8.0.0",
-    "@twilio-paste/design-tokens": "^10.1.0",
-    "@twilio-paste/icons": "^12.1.0",
-    "@twilio-paste/input-box": "^10.0.1",
-    "@twilio-paste/spinner": "^14.0.0",
-    "@twilio-paste/stack": "^8.0.0",
-    "@twilio-paste/style-props": "^9.0.0",
+    "@twilio-paste/customization": "^8.1.0",
+    "@twilio-paste/design-tokens": "^10.2.0",
+    "@twilio-paste/icons": "^12.2.0",
+    "@twilio-paste/input-box": "^10.1.0",
+    "@twilio-paste/spinner": "^14.1.0",
+    "@twilio-paste/stack": "^8.1.0",
+    "@twilio-paste/style-props": "^9.1.0",
     "@twilio-paste/styling-library": "^3.0.0",
@@ -72,6 +71,6 @@ "@twilio-paste/theme": "^11.0.1",
     "@types/react-dom": "^18.0.10",
-    "prop-types": "^15.7.2",
     "react": "^18.0.0",
-    "react-dom": "^18.0.0"
+    "react-dom": "^18.0.0",
+    "typescript": "^4.9.4"
   }
 }

No alert changes

Improved metrics

Dependency count

21

decreased by-4.55%

Worsened metrics

Total package byte prevSize

131734

decreased by-1.22%

No dependency changes