carbon-react 162.10.0 → 162.12.0-beta.1

package/esm/components/textarea/textarea.component.d.ts

@@ -1,138 +0,0 @@
-import React from "react";
-import { MarginProps } from "styled-system";
-import { IconType } from "../icon";
-import { ValidationProps } from "../../__internal__/validations";
-import { TagProps } from "../../__internal__/utils/helpers/tags";
-import { BorderRadiusType } from "../box/box.component";
-export declare const parseValueUnit: (str: string) => number;
-export declare const getDefaultMinHeightBySize: (size: "small" | "medium" | "large") => number;
-export interface TextareaProps extends ValidationProps, MarginProps, Omit<React.TextareaHTMLAttributes<HTMLTextAreaElement>, "size">, TagProps {
-    /** Prop to specify the aria-labelledby property of the component */
-    "aria-labelledby"?: string;
-    /** id of the input */
-    id?: string;
-    /** @deprecated [Legacy] The default value alignment on the input. This property is deprecated and will be removed in future versions. */
-    align?: "left" | "right";
-    /**
-     * @deprecated [Legacy] Specify a custom border radius for the input. This prop is retained for
-     * backwards compatibility but no longer has any effect (use `borderRadius` instead).
-     * This property is deprecated and will be removed in future versions.
-     */
-    inputBorderRadius?: BorderRadiusType | BorderRadiusType[];
-    /**
-     * @deprecated [Legacy] Id of the validation icon. This prop no longer has any effect as the
-     * legacy validation icon has been removed. This property is deprecated and will be removed
-     * in future versions.
-     */
-    validationIconId?: string;
-    /**
-     * @deprecated Breakpoint for adaptive label (inline labels change to top aligned).
-     * This prop no longer has any effect - responsive label behaviour should be handled by
-     * the implementing team. It is retained for backwards compatibility and will be removed
-     * in future versions.
-     **/
-    adaptiveLabelBreakpoint?: number;
-    /** Automatically focus the input on component mount */
-    autoFocus?: boolean;
-    /** Character limit of the textarea */
-    characterLimit?: number;
-    /** Type of the icon that will be rendered next to the input */
-    children?: React.ReactNode;
-    /** If true, the component will be disabled */
-    disabled?: boolean;
-    /**
-     * Indicate that error has occurred.
-     * Pass string to display icon, tooltip and red border.
-     * Pass true boolean to only display red border.
-     */
-    error?: boolean | string;
-    /** Allows the Textareas Height to change based on user input */
-    expandable?: boolean;
-    /** Specifies the number of visible text lines. When set, the textarea expands up to this maximum height. */
-    maxRows?: number;
-    /** A hint string rendered before the input but after the label. Intended to describe the purpose or content of the input. */
-    inputHint?: string;
-    /** @deprecated [Legacy] Help content to be displayed under an input. This property is deprecated and will be removed in future versions. */
-    fieldHelp?: React.ReactNode;
-    /** @deprecated [Legacy] Aria label for rendered help component. This property is deprecated and will be removed in future versions. */
-    helpAriaLabel?: string;
-    /**
-     * @deprecated [Legacy] Indicate additional information.
-     * Pass string to display icon, tooltip and blue border.
-     * Pass true boolean to only display blue border.
-     * This property is deprecated and will be removed in future versions.
-     */
-    info?: boolean | string;
-    /**
-     * <a href="https://brand.sage.com/d/NdbrveWvNheA/foundations#/icons/icons" target="_blank">List of supported icons</a>
-     *
-     * Icon to display inside of the Textarea
-     */
-    inputIcon?: IconType;
-    /** @deprecated [Legacy] Width of an input in percentage. Works only when labelInline is true. This property is deprecated and will be removed in future versions. */
-    inputWidth?: number;
-    /**
-     * Prop for specifying the max width of the input.
-     * Leaving the `maxWidth` prop with no value will default the width to '100%'
-     */
-    maxWidth?: string;
-    /** The content of the label for the input */
-    label?: string;
-    /** @deprecated Label alignment. This property is deprecated and will be removed in future versions. */
-    labelAlign?: "left" | "right";
-    /**
-     * @deprecated [Legacy] Text applied to label help tooltip. When opted into new design validations
-     * it will render as a hint above the input, unless an `inputHint`
-     * prop is also passed. This property is deprecated and will be removed in future versions.
-     */
-    labelHelp?: React.ReactNode;
-    /** When true, label is placed in line an input */
-    labelInline?: boolean;
-    /** @deprecated [Legacy] Spacing between label and a field for inline label, given number will be multiplied by base spacing unit (8). This property is deprecated and will be removed in future versions. */
-    labelSpacing?: 1 | 2;
-    /** @deprecated [Legacy] Width of a label in percentage. Works only when labelInline is true. This property is deprecated and will be removed in future versions. */
-    labelWidth?: number;
-    /** Name of the input */
-    name?: string;
-    /** Callback fired when the user types in the Textarea */
-    onChange: (ev: React.ChangeEvent<HTMLTextAreaElement>) => void;
-    /** Placeholder text for the component */
-    placeholder?: string;
-    /** Adds readOnly property */
-    readOnly?: boolean;
-    /**
-     * @deprecated [Legacy] Flag to configure component as optional. If the value of this component is not required, use the `required` prop and set it to false instead. This property is deprecated and will be removed in future versions.
-     */
-    isOptional?: boolean;
-    /** The number of visible text lines for the control. When set, this determines the height of the textarea, and the minHeight property is ignored. */
-    rows?: number;
-    /** @deprecated [Legacy] Overrides the default tooltip position. This property is deprecated and will be removed in future versions. */
-    tooltipPosition?: "top" | "bottom" | "left" | "right";
-    /** @deprecated [Legacy] When true, validation icon will be placed on label instead of being placed on the input. This property is deprecated and will be removed in future versions. */
-    validationOnLabel?: boolean;
-    /** The value of the Textbox */
-    value: string;
-    /**
-     * Indicate that warning has occurred.
-     * Pass string to display icon, tooltip and orange border.
-     * Pass true boolean to only display orange border.
-     */
-    warning?: boolean | string;
-    /** @deprecated Specify a custom border radius for the component. Any valid border-radius design token, or an array of border-radius design tokens. This property is deprecated and will be removed in future versions.*/
-    borderRadius?: BorderRadiusType | BorderRadiusType[];
-    /** @deprecated Hides the borders for the component. Please note that validation and focus styling will still be applied. This property is deprecated and will be removed in future versions. */
-    hideBorders?: boolean;
-    /** Specify the minimum height. This property is only applied if rows is not set. */
-    minHeight?: number;
-    /** Render the ValidationMessage above the Textarea when validationRedesignOptIn flag is set */
-    validationMessagePositionTop?: boolean;
-    /** @deprecated Override the variant component. This property is deprecated and will be removed in future versions. */
-    as?: React.ElementType;
-    /** Specify the resize behavior of the textarea */
-    resize?: "none" | "both" | "horizontal" | "vertical";
-    /** Size of the textarea. */
-    size?: "small" | "medium" | "large";
-}
-export declare const Textarea: React.ForwardRefExoticComponent<TextareaProps & React.RefAttributes<HTMLTextAreaElement>>;
-export { Textarea as OriginalTextarea };
-export default Textarea;

package/esm/components/textarea/textarea.component.js

@@ -1 +0,0 @@
-import{jsxs as e,jsx as n,Fragment as r}from"react/jsx-runtime";import i,{useContext as t,useState as l,useRef as o,useCallback as a,useEffect as s}from"react";import d from"../../__internal__/utils/helpers/tags/tags.js";import"../../__internal__/legacy-input/input.component.js";import u from"../../__internal__/legacy-input/input-presentation.component.js";import p from"../../hooks/useCharacterCount/useCharacterCount.js";import{InputContext as c,InputBehaviour as m}from"../../__internal__/input-behaviour/input-behaviour.component.js";import{InputGroupContext as b}from"../../__internal__/input-behaviour/input-group-behaviour.component.js";import h from"../../__internal__/input-icon-toggle/input-icon-toggle.component.js";import g from"../../__internal__/utils/helpers/guid/index.js";import f,{StyledTextareaInput as v,StyledTextareaFieldLine as _,StyledTextareaLabelContainer as y,StyledTextareaValidationContainer as O}from"./textarea.style.js";import{TooltipProvider as j}from"../../__internal__/tooltip-provider/index.js";import w from"../../hooks/__internal__/useInputAccessibility/useInputAccessibility.js";import x from"../../__internal__/error-border/error-border.style.js";import $ from"../../__internal__/validation-message/validation-message.component.js";import I from"../../__internal__/utils/logger/index.js";import{HintText as H}from"../../__internal__/hint-text/hint-text.component.js";import"../../style/utils/filter-styled-system-padding-props.js";import P from"../../style/utils/filter-styled-system-margin-props.js";import L from"../fieldset/__internal__/fieldset.context.js";import S from"../../__internal__/label/label.component.js";import{globalFontStaticCompRegularL as z,globalFontStaticCompRegularM as B,globalFontStaticCompRegularS as R,globalSpaceCompM as F,globalSpaceCompS as W,globalSpaceCompXs as A}from"./__internal__/tokens/index.js";function E(e,n,r){return n in e?Object.defineProperty(e,n,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[n]=r,e}function T(e){for(var n=1;n<arguments.length;n++){var r=null!=arguments[n]?arguments[n]:{},i=Object.keys(r);"function"==typeof Object.getOwnPropertySymbols&&(i=i.concat(Object.getOwnPropertySymbols(r).filter((function(e){return Object.getOwnPropertyDescriptor(r,e).enumerable})))),i.forEach((function(n){E(e,n,r[n])}))}return e}const C=e=>{const n=e.match(/^(-?\d*\.?\d+)(px|em|rem|%)$/);return n?parseFloat(n[1]):(I.warn(`Unexpected value/unit format: "${e}"`),0)},k={small:parseFloat(R.lineHeight.toString())*C(R.fontSize),medium:parseFloat(B.lineHeight.toString())*C(B.fontSize),large:parseFloat(z.lineHeight.toString())*C(z.fontSize)},q={small:C(A),medium:C(W),large:C(F)},D=e=>3*k[e]+2*q[e];let M=!1,N=!1;const U=i.forwardRef(((i,z)=>{var{"aria-labelledby":B,"aria-describedby":R,autoFocus:F,inputHint:W,fieldHelp:A,label:E,children:C,characterLimit:U,onChange:G,onFocus:J,onBlur:K,disabled:Q=!1,labelInline:V,labelAlign:X,labelHelp:Y,labelSpacing:Z,inputIcon:ee,id:ne,error:re,warning:ie,info:te,name:le,readOnly:oe=!1,placeholder:ae,expandable:se=!1,rows:de,validationOnLabel:ue=!1,adaptiveLabelBreakpoint:pe,inputWidth:ce,maxWidth:me,labelWidth:be=30,tooltipPosition:he,value:ge,"data-element":fe,"data-role":ve,helpAriaLabel:_e,borderRadius:ye,hideBorders:Oe=!1,required:je,isOptional:we,minHeight:xe,validationMessagePositionTop:$e=!0,resize:Ie="none",size:He="medium",maxRows:Pe,as:Le,align:Se,inputBorderRadius:ze,validationIconId:Be}=i,Re=function(e,n){if(null==e)return{};var r,i,t=function(e,n){if(null==e)return{};var r,i,t={},l=Object.keys(e);for(i=0;i<l.length;i++)r=l[i],n.indexOf(r)>=0||(t[r]=e[r]);return t}(e,n);if(Object.getOwnPropertySymbols){var l=Object.getOwnPropertySymbols(e);for(i=0;i<l.length;i++)r=l[i],n.indexOf(r)>=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(t[r]=e[r])}return t}(i,["aria-labelledby","aria-describedby","autoFocus","inputHint","fieldHelp","label","children","characterLimit","onChange","onFocus","onBlur","disabled","labelInline","labelAlign","labelHelp","labelSpacing","inputIcon","id","error","warning","info","name","readOnly","placeholder","expandable","rows","validationOnLabel","adaptiveLabelBreakpoint","inputWidth","maxWidth","labelWidth","tooltipPosition","value","data-element","data-role","helpAriaLabel","borderRadius","hideBorders","required","isOptional","minHeight","validationMessagePositionTop","resize","size","maxRows","as","align","inputBorderRadius","validationIconId"]);!M&&we&&(M=!0,I.deprecate("`isOptional` is deprecated in TextArea and support will soon be removed. If the value of this component is not required, use the `required` prop and set it to false instead."));const{hasError:Fe,required:We}=t(L),Ae=V,[Ee,Te]=l(D(He)),{current:Ce}=o(ne||g()),ke=o(null),qe=a((e=>{ke.current=e,z&&("current"in z?z.current=e:z(e))}),[z]),[De,Me]=l("off");s((()=>{const e=ke.current;if(!e)return;const n=()=>{e.classList.toggle("has-scrollbar",e.scrollHeight>e.clientHeight)};n(),e.addEventListener("input",n);const r=new ResizeObserver(n);return r.observe(e),()=>{e.removeEventListener("input",n),r.disconnect()}}),[]),Array.isArray(ye)&&ye.length>4&&!N&&(I.warn("The `borderRadius` prop in `Textarea` component only supports up to 4 values."),N=!0);const Ne=a((()=>{let e;Pe&&(e=Pe*k[He]+2*q[He]);const n=ke.current;if((null==n?void 0:n.scrollHeight)&&(null==n?void 0:n.scrollHeight)>Ee&&(null==n?void 0:n.scrollHeight)<=(null!=e?e:n.scrollHeight)){let e=n;for(;e&&!(null==e?void 0:e.scrollTop);)e=(null==e?void 0:e.parentElement)||null;const r=null==e?void 0:e.scrollTop;n.style.height="auto",n.style.height=`${Math.max(n.scrollHeight,Ee)}px`,e&&r&&(e.scrollTop=r)}}),[Ee,Pe,He]),{labelId:Ue,validationId:Ge,ariaDescribedBy:Je}=w({id:Ce,validationRedesignOptIn:!0,error:re,warning:ie,info:te,label:E,fieldHelp:A}),[Ke,Qe]=p(ge,U,De,He,Q);s((()=>{if(de){var e;Te((null==ke||null===(e=ke.current)||void 0===e?void 0:e.scrollHeight)||0)}else{if(!xe)return void Te(D(He));Te(xe>D(He)?xe:D(He))}}),[xe,de,He]),s((()=>{se&&Ne()})),s((()=>{var e,n;return se&&(window.addEventListener("resize",Ne),Te((null==ke||null===(e=ke.current)||void 0===e?void 0:e.clientHeight)||0),null===(n=document.fonts)||void 0===n||n.addEventListener("loadingdone",Ne)),()=>{var e;se&&(window.removeEventListener("resize",Ne),null===(e=document.fonts)||void 0===e||e.removeEventListener("loadingdone",Ne))}}),[Ne,se]);const Ve=!!(ee||Ge&&!ue),Xe=o(g()),Ye=W?Xe.current:void 0,Ze=[...$e?[Je,Ye]:[Ye,Je],Qe,R].filter(Boolean).join(" "),en=e(u,{disabled:Q,readOnly:oe,inputWidth:"number"==typeof ce?ce:100-be,maxWidth:me,error:re||Fe,warning:ie,info:te,borderRadius:ye,hideBorders:Oe,children:[n(b.Consumer,{children:({onFocus:e,onBlur:r})=>n(c.Consumer,{children:({onFocus:i,onBlur:t,inputRef:l})=>n(v,T({"aria-invalid":!!re||Fe,"aria-labelledby":B,"aria-describedby":Ze,autoFocus:F,name:le,value:ge,ref:e=>{qe(e),null==l||l({current:e})},onChange:G,onFocus:n=>((e,n,r)=>{U&&Me("polite"),null==J||J(e),null==n||n(),null==r||r()})(n,i,e),onBlur:e=>((e,n,r)=>{U&&Me("off"),null==K||K(e),null==n||n(),null==r||r()})(e,t,r),disabled:Q,readOnly:oe,placeholder:Q?"":ae,rows:de,id:Ce,"data-element":"input","data-role":"input",required:je||We},Re))})}),C,n(h,{disabled:Q,readOnly:oe,inputIcon:ee,error:re,warning:ie,info:te})]}),nn=P(Re);return n(j,{tooltipPosition:he,helpAriaLabel:_e,children:n(m,{children:n(f,(rn=T({labelInline:Ae,hasIcon:Ve,minHeight:Ee},nn,d("textarea",{"data-element":fe,"data-role":ve})),tn={$resize:Ie,$maxWidth:me,$size:He,$readOnly:oe,$hasHint:!!W,$isRequired:je,$disabled:Q,$hasWarning:!!ie,$hasError:!!re,borderRadius:ye,$labelSpacing:Z,$labelWidth:be,$hideBorders:Oe,$labelAlign:X,$labelInline:Ae,$align:Se,children:e(_,{$labelInline:Ae,children:[E&&n(y,{"data-role":"textarea-label-container",$labelInline:Ae,$labelAlign:X,$labelSpacing:Z,$size:He,children:n(S,{id:Ue,htmlFor:Ce,size:He,isRequired:je,disabled:Q,readOnly:oe,children:E})}),(W||Y)&&n(H,{size:He,id:Ye,"data-element":"input-hint",children:W||Y}),e(O,{labelInline:Ae,$inputWidth:ce,$labelWidth:be,children:[$e&&e(r,{children:[n($,{error:re,validationId:Ge,warning:ie,validationMessagePositionTop:$e}),(re||ie)&&n(x,{$warning:!(re||!ie)})]}),en,!$e&&e(r,{children:[n($,{error:re,validationId:Ge,warning:ie,validationMessagePositionTop:$e}),(re||ie)&&n(x,{$warning:!(re||!ie)})]}),Ke]})]})},tn=null!=tn?tn:{},Object.getOwnPropertyDescriptors?Object.defineProperties(rn,Object.getOwnPropertyDescriptors(tn)):function(e){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);n.push.apply(n,r)}return n}(Object(tn)).forEach((function(e){Object.defineProperty(rn,e,Object.getOwnPropertyDescriptor(tn,e))})),rn))})});var rn,tn}));U.displayName="Textarea";export{U as OriginalTextarea,U as Textarea,U as default,D as getDefaultMinHeightBySize,C as parseValueUnit};

package/esm/components/textarea/textarea.style.d.ts

@@ -1,49 +0,0 @@
-import { TextareaProps } from "./textarea.component";
-export type ResizeOptions = "none" | "both" | "horizontal" | "vertical";
-export type TextAreaSize = "small" | "medium" | "large";
-export interface StyledTextAreaProps extends Pick<TextareaProps, "minHeight" | "borderRadius"> {
-    /** When true, label is placed in line an input */
-    labelInline?: boolean;
-    /** When true, adjusts padding for icon */
-    hasIcon?: boolean;
-    /** Specify the resize behavior of the textarea */
-    $resize?: "none" | "both" | "horizontal" | "vertical";
-    /** Specify a custom max-width for the textarea */
-    $maxWidth?: string;
-    $size: TextAreaSize;
-    $readOnly?: boolean;
-    $hasHint?: boolean;
-    $isRequired?: boolean;
-    $disabled?: boolean;
-    $hasWarning?: boolean;
-    $hasError?: boolean;
-    $labelSpacing?: 1 | 2;
-    $labelWidth: number;
-    $inputWidth?: number | undefined;
-    $hideBorders?: boolean;
-    $labelAlign?: "left" | "right";
-    $labelInline?: boolean;
-    $align?: "left" | "right";
-}
-interface StyledTextareaLabelContainerProps {
-    $labelInline?: boolean;
-    $labelAlign?: "left" | "right";
-    $labelSpacing?: 1 | 2;
-    $size: TextAreaSize;
-}
-interface StyledTextareaFieldLineProps {
-    $labelInline?: boolean;
-}
-export declare const getFont: (size: TextAreaSize, format: "medium" | "regular") => import("styled-components").FlattenSimpleInterpolation;
-declare const StyledTextarea: import("styled-components").StyledComponent<"div", any, {
-    theme: object;
-} & StyledTextAreaProps, "theme">;
-export declare const StyledTextareaFieldLine: import("styled-components").StyledComponent<"div", any, StyledTextareaFieldLineProps, never>;
-export declare const StyledTextareaLabelContainer: import("styled-components").StyledComponent<"div", any, StyledTextareaLabelContainerProps, never>;
-export declare const StyledTextareaInput: import("styled-components").StyledComponent<"textarea", any, {}, never>;
-export declare const StyledTextareaValidationContainer: import("styled-components").StyledComponent<"div", any, {
-    labelInline?: boolean;
-    $inputWidth?: number;
-    $labelWidth: number;
-}, never>;
-export default StyledTextarea;

package/esm/components/textarea/textarea.style.js

@@ -1 +0,0 @@
-import a,{css as e}from"styled-components";import{margin as l}from"styled-system";import r from"../../__internal__/hint-text/hint-text.style.js";import i from"../../__internal__/legacy-input/input-presentation.style.js";import t from"../../__internal__/input-icon-toggle/input-icon-toggle.style.js";import o from"../../__internal__/validation-message/validation-message.style.js";import n from"../../style/themes/apply-base-theme.js";import{getDefaultMinHeightBySize as d}from"./textarea.component.js";import s from"../../style/utils/add-focus-styling.js";const c={small:{horizontalPadding:"var(--global-space-comp-s)",verticalPadding:"var(--global-space-comp-xs)"},medium:{horizontalPadding:"var(--global-space-comp-m)",verticalPadding:"var(--global-space-comp-s)"},large:{horizontalPadding:"var(--global-space-comp-l)",verticalPadding:"var(--global-space-comp-m)"}},b=(a,l)=>e(["font:",";"],{small:`var(--global-font-static-comp-${l}-s)`,medium:`var(--global-font-static-comp-${l}-m)`,large:`var(--global-font-static-comp-${l}-l)`}[a]),p=(a,l)=>a?e(["margin-bottom:0px;"]):e(["",";"],l&&`margin-bottom: ${{small:"var(--global-space-comp-xs)",medium:"var(--global-space-comp-s)",large:"var(--global-space-comp-m)"}[l]};`),g=a.div.attrs(n).withConfig({displayName:"textarea.style__StyledTextarea",componentId:"carbon_v162_9_1__sc-884bfc4e-0"})(["margin-bottom:var(--fieldSpacing);",';textarea[data-element="input"]{background:transparent;border:none;'," box-sizing:border-box;color:var(--input-typical-txt-default);display:block;flex-grow:1;margin:0;min-width:0;outline:none;border-radius:",";resize:",";min-height:",";padding:",";width:",";",";"," "," "," &::-webkit-scrollbar{width:12px;border-radius:var(--global-radius-container-circle);}&::-webkit-scrollbar-track{background-color:var(--container-scrollbar-bg-default);border-radius:0 var(--global-radius-container-circle) var(--global-radius-container-circle) 0;margin-top:1px;","}&::-webkit-scrollbar-thumb{border-radius:var(--global-radius-container-circle);background-clip:padding-box;border:var(--global-space-comp-2-xs) solid transparent;background-color:var(--container-scrollbar-fg-default);",";}&::-webkit-resizer{background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='5' height='5' viewBox='0 0 5 5' fill='none'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M4.12983 2.12983C4.32507 2.32507 4.32507 2.64162 4.12983 2.83686L2.83686 4.12983C2.64162 4.32507 2.32507 4.32507 2.12983 4.12983C1.93459 3.93459 1.93459 3.61804 2.12983 3.4228L3.4228 2.12983C3.61804 1.93459 3.93459 1.93459 4.12983 2.12983ZM3.12202 0.146431C3.31726 0.341672 3.31726 0.658221 3.12202 0.853462L0.853462 3.12202C0.658221 3.31726 0.341672 3.31726 0.146431 3.12202C-0.0488103 2.92678 -0.0488103 2.61023 0.146431 2.41499L2.41499 0.146431C2.61023 -0.0488103 2.92678 -0.0488104 3.12202 0.146431Z' fill='%2375838F'/%3E%3C/svg%3E\");background-size:6px 6px;background-repeat:no-repeat;background-position:center;border-radius:0 0 var(--global-radius-container-circle) 0;}&.has-scrollbar::-webkit-resizer{background-color:var(--container-scrollbar-bg-default);}&::-webkit-scrollbar-corner{background:transparent;border-radius:0 0 var(--global-radius-container-circle) 0;}}[data-role=\"textarea-label-container\"]{","}",' [data-component="label"]{color:',";"," "," ","}","{height:40px;position:absolute;height:100%;top:0px;right:4px;}","{background:var(--input-typical-bg-default);"," "," padding:1px;border-radius:",";min-height:var(--global-size-4-xl);width:",";max-width:100%;"," ","}",":focus-within{"," z-index:2;}","{display:flex;"," color:",";}",";","{"," ","}"],l,(({$size:a})=>b(a,"regular")),(({borderRadius:a})=>!a&&"var(--global-radius-action-m)"),(({$resize:a})=>a),(({minHeight:a,$size:e})=>a?`${a}px`:d(e)),(({$size:a})=>`${c[a].verticalPadding} ${c[a].horizontalPadding}`),(({$resize:a,labelInline:e,$labelWidth:l,$inputWidth:r})=>(({$resize:a,labelInline:e,$labelWidth:l,$inputWidth:r})=>{if(a&&"none"!==a)return e?`${r||100-l}vw`:"100vw"})({$resize:a,labelInline:e,$labelWidth:l,$inputWidth:r})||"100%"),(({$resize:a,$maxWidth:e})=>"none"!==a&&e&&`max-width: ${e};`),(({hasIcon:a})=>a&&"padding-right: var(--global-size-m);"),(({$align:a})=>a&&`text-align: ${a};`),(({$disabled:a})=>a&&"color: var(--input-typical-txt-disabled);"),(a=>"none"!==a.$resize&&e(["border-radius:0 var(--global-radius-container-circle) 0 0;"])),(({$size:a})=>"large"===a?"min-height: 41px;":"min-height: 33px;"),(({$hasHint:a,$size:e})=>p(!!a,e)),(({labelInline:a,$labelSpacing:l,$size:r})=>a&&e(['[data-role="textarea-label-container"]{padding-top:',";margin-bottom:0px;","}"],"small"===r?"var(--global-space-comp-xs)":"var(--global-space-comp-s)",!l&&`padding-right: ${"large"===r?"var(--global-space-comp-xl)":"var(--global-space-comp-l)"};`)),(({$disabled:a})=>a?"var(--input-labelset-label-disabled)":"var(--input-labelset-label-default)"),(({$size:a})=>b(a,"medium")),(({$readOnly:a})=>a&&"color: var(--input-labelset-label-read-only);"),(({$isRequired:a,$size:l,$disabled:r})=>a&&e(["::after{"," color:var(--input-labelset-label-",");margin-left:var(--global-space-comp-xs);}"],b(l,"medium"),r?"disabled":"required")),t,i,(({$hideBorders:a})=>a?"border: 1px solid transparent;":"border: 1px solid var(--input-typical-border-default);"),(({$hasError:a})=>a&&"box-shadow: inset 0 0 0 1px var(--input-validation-border-error);\n        border-color: var(--input-validation-border-error) !important;"),(({borderRadius:a})=>!a&&"var(--global-radius-action-m)"),(({$resize:a})=>"none"!==a?"auto":"100%"),(({$disabled:a})=>a&&e(["background:var(--input-typical-bg-disabled);border-color:var(--input-typical-border-disabled);"])),(({$readOnly:a})=>a&&e(["background:var(--input-typical-bg-read-only);border-color:var(--input-typical-border-read-only);"])),i,s(),r,(({$size:a})=>p(!1,a)),(({$disabled:a})=>a?"var(--input-labelset-label-disabled)":"var(--input-labelset-label-default)"),(({$labelAlign:a})=>e(["","{justify-content:",";}"],r,"right"!==a?"flex-start":"flex-end")),o,(({$hasWarning:a,$size:l})=>a&&e(["color:var(--input-validation-label-warn);",""],b(l,"regular"))),(({$hasError:a,$size:l})=>a&&e(["color:var(--input-validation-label-error);",""],b(l,"medium")))),m=a.div.withConfig({displayName:"textarea.style__StyledTextareaFieldLine",componentId:"carbon_v162_9_1__sc-884bfc4e-1"})(["display:",";"],(({$labelInline:a})=>a?"flex":"block")),u=a.div.withConfig({displayName:"textarea.style__StyledTextareaLabelContainer",componentId:"carbon_v162_9_1__sc-884bfc4e-2"})(["display:flex;flex-direction:column;margin-bottom:var(--global-space-comp-s);",""],(({$labelInline:a,$labelAlign:l,$labelSpacing:r,$size:i})=>{const t=a?null!=l?l:"right":null!=l?l:"left";return e(["align-items:",';[data-component="label"]{width:100%;text-align:',";}",""],"right"!==t?"flex-start":"flex-end","right"!==t?"left":"right",a&&e(["box-sizing:border-box;margin-bottom:0;width:","%;padding-right:",";"],30,a?r?`var(${1===r?"--global-space-comp-s":"--global-space-comp-l"})`:"large"===i?"var(--global-space-comp-xl)":"var(--global-space-comp-l)":void 0))})),v=a.textarea.withConfig({displayName:"textarea.style__StyledTextareaInput",componentId:"carbon_v162_9_1__sc-884bfc4e-3"})([""]),h=a.div.withConfig({displayName:"textarea.style__StyledTextareaValidationContainer",componentId:"carbon_v162_9_1__sc-884bfc4e-4"})(["position:relative;width:",";"],(({labelInline:a,$inputWidth:e,$labelWidth:l})=>a?`${e||100-l}%`:"100%"));export{m as StyledTextareaFieldLine,v as StyledTextareaInput,u as StyledTextareaLabelContainer,h as StyledTextareaValidationContainer,g as default,b as getFont};

package/esm/components/textbox/__internal__/__next__/index.d.ts

@@ -1,2 +0,0 @@
-export { default } from "./text-input.component";
-export type { TextInput, TextInputProps } from "./text-input.component";

package/esm/components/textbox/__internal__/__next__/index.js

@@ -1 +0,0 @@
-export{TextInput as default}from"./text-input.component.js";

package/esm/components/textbox/__internal__/__next__/text-input.component.d.ts

@@ -1,96 +0,0 @@
-import React from "react";
-import { MarginProps } from "styled-system";
-import { InputProps } from "../../../../__internal__/input";
-import { ValidationProps } from "../../../../__internal__/validations";
-import { TagProps } from "../../../../__internal__/utils/helpers/tags";
-export interface TextInputProps extends Omit<ValidationProps, "info">, MarginProps, Omit<InputProps, "size" | "error">, TagProps {
-    /**
-     * @private @internal @ignore
-     * Sets the input's text alignment. Does not affect the position of the input's prefix or suffix icons.
-     */
-    align?: "left" | "right";
-    /**
-     * The ID of the element(s) that describe the input, typically used to reference the hint and/or
-     * validation message(s) associated with the input. Can be a space-separated list of IDs if there
-     * are multiple descriptive elements.
-     */
-    "aria-describedby"?: string;
-    /**
-     * The ID of the element that labels the input, typically used to reference the input's label when
-     * the label is not properly associated with the input via the htmlFor attribute.
-     */
-    "aria-labelledby"?: string;
-    /**
-     * If true, the input will automatically receive focus when the component is mounted.
-     */
-    autoFocus?: boolean;
-    /**
-     * Unique identifier for the input.
-     * Label id will be based on it, using following pattern: [id]-label.
-     * Will use a randomly generated GUID if none is provided
-     */
-    /**
-     * @private @internal @ignore
-     * `data-component` attribute to be added to the component's root element for testing and tracking purposes.
-     */
-    "data-component"?: string;
-    /**
-     * @private @internal @ignore
-     * `data-is-open` attribute to be added to the component's root element when rendered as part of Select.
-     */
-    "data-is-open"?: boolean;
-    /**
-     * Sets the input's id attribute, is not set a unique id will be generated and used.
-     * The label's htmlFor attribute will be set to match the input's id to ensure they are properly associated.
-     */
-    id?: string;
-    /** A hint element rendered before the input but after the label. Intended to describe the purpose or content of the input */
-    inputHint?: React.ReactNode;
-    /**
-     * @internal @private @ignore
-     * An Icon to be rendered next to the input
-     * */
-    inputIcon?: React.ReactNode;
-    /** The width of the input as a percentage (e.g., 50 for 50%) */
-    inputWidth?: number;
-    /** Label content */
-    label: string;
-    /** When true label is inline */
-    labelInline?: boolean;
-    /**
-     * Slot to render additional content to the left of the input, such as a prefix.
-     */
-    leftChildren?: React.ReactNode;
-    /** The maximum width of the component container */
-    maxWidth?: string;
-    /**
-     * @param ev - React's mouse event for the input element
-     * Callback called when mouse is clicked down on the input, but before it receives focus.
-     */
-    onMouseDown?: (ev: React.MouseEvent<HTMLElement>) => void;
-    /**
-     * @param ev - React's mouse event for the input element
-     * Callback called when the input is clicked.
-     */
-    onClick?: (ev: React.MouseEvent<HTMLElement>) => void;
-    /** Size of an input */
-    size?: "small" | "medium" | "large";
-    /**
-     * The type of the input, e.g., "text", "email", "password". This prop is passed directly
-     * to the underlying input element, so any valid HTML input type is accepted.
-     * The default value is "text".
-     */
-    type?: string;
-    /**
-     * @private @internal @ignore
-     * Ref passed to the input container element.
-     */
-    containerRef?: React.Ref<HTMLDivElement>;
-    /**
-     * @private @internal @ignore
-     * If true, the validation message will be rendered above the input, otherwise it will be rendered below.
-     */
-    validationMessagePositionTop?: boolean;
-}
-export declare const TextInput: React.ForwardRefExoticComponent<TextInputProps & React.RefAttributes<HTMLInputElement>>;
-export default TextInput;

package/esm/components/textbox/__internal__/__next__/text-input.component.js

@@ -1 +0,0 @@
-import{jsxs as e,jsx as r}from"react/jsx-runtime";import t,{useRef as n,useContext as i,useCallback as o}from"react";import a from"../../../../__internal__/input/input.component.js";import l from"../../../../__internal__/validation-message/__next__/validation-message.component.js";import"../../../../style/utils/filter-styled-system-padding-props.js";import s from"../../../../style/utils/filter-styled-system-margin-props.js";import d from"../../../../style/utils/filter-out-styled-system-spacing-props.js";import c from"../../../../hooks/__internal__/useUniqueId/index.js";import p from"../../../../__internal__/utils/helpers/guid/index.js";import u from"../../../../hooks/__internal__/useInputAccessibility/useInputAccessibility.js";import m from"../../../../__internal__/error-border/error-border.style.js";import{StyledTextInput as f,LabelWrapper as b,InputWrapper as _}from"./text-input.style.js";import{HintText as y}from"../../../../__internal__/hint-text/hint-text.component.js";import h from"../../../../__internal__/label/label.component.js";import j from"../../../../hooks/__internal__/useRegisterValidationToTabs/useRegisterValidationToTabs.js";import g from"../../../../__internal__/utils/helpers/combine-refs/index.js";import O from"../../../../__internal__/fieldset-validation-context/fieldset-validation-context.js";import x from"../../../fieldset/__internal__/fieldset.context.js";import v from"../../../select/__internal__/select-textbox/__internal__/select-textbox.context.js";function w(e,r,t){return r in e?Object.defineProperty(e,r,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[r]=t,e}function I(e){for(var r=1;r<arguments.length;r++){var t=null!=arguments[r]?arguments[r]:{},n=Object.keys(t);"function"==typeof Object.getOwnPropertySymbols&&(n=n.concat(Object.getOwnPropertySymbols(t).filter((function(e){return Object.getOwnPropertyDescriptor(t,e).enumerable})))),n.forEach((function(r){w(e,r,t[r])}))}return e}function P(e,r){return r=null!=r?r:{},Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(r)):function(e){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var t=Object.getOwnPropertySymbols(e);r.push.apply(r,t)}return r}(Object(r)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(r,t))})),e}const $=t.forwardRef(((t,w)=>{var{autoFocus:$,"aria-describedby":k,"aria-labelledby":z,children:C,className:D,containerRef:R,"data-component":W="text-input","data-element":T,"data-is-open":q,"data-role":E,disabled:S,error:F,id:M,inputHint:N,inputIcon:B,inputWidth:V,label:A,labelInline:H=!1,leftChildren:U,maxWidth:G,name:J,onChange:K,onClick:L,onMouseDown:Q,placeholder:X,prefix:Y,readOnly:Z,required:ee,size:re="medium",type:te="text",validationMessagePositionTop:ne,value:ie,warning:oe}=t,ae=function(e,r){if(null==e)return{};var t,n,i=function(e,r){if(null==e)return{};var t,n,i={},o=Object.keys(e);for(n=0;n<o.length;n++)t=o[n],r.indexOf(t)>=0||(i[t]=e[t]);return i}(e,r);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(n=0;n<o.length;n++)t=o[n],r.indexOf(t)>=0||Object.prototype.propertyIsEnumerable.call(e,t)&&(i[t]=e[t])}return i}(t,["autoFocus","aria-describedby","aria-labelledby","children","className","containerRef","data-component","data-element","data-is-open","data-role","disabled","error","id","inputHint","inputIcon","inputWidth","label","labelInline","leftChildren","maxWidth","name","onChange","onClick","onMouseDown","placeholder","prefix","readOnly","required","size","type","validationMessagePositionTop","value","warning"]);const le=n(null),se=g(w,le),{disableErrorBorder:de}=i(O),ce={disabled:S,readOnly:Z},[pe,ue]=c(M,J),{labelId:me,validationId:fe,ariaDescribedBy:be}=u({id:pe,validationRedesignOptIn:!0,error:F,warning:oe,label:A}),_e=n(p()),ye=N?_e.current:void 0,{prefixId:he}=i(v),je=he||(Y?`${pe}-prefix`:void 0),{size:ge,hasError:Oe,required:xe}=i(x),ve=ge||re,we=!!F||!!Oe,Ie=null!=V?V:H?80:100,Pe=[ye,je,be,k].filter(Boolean).join(" "),$e=!(!F&&!oe);j(!!F,!!oe,pe);const ke=$e&&!de&&r(l,{id:fe,size:ve,error:F,warning:oe}),ze=$e&&!de&&r(m,{"data-role":"error-border",$warning:!(F||!oe)}),Ce=o((e=>{S||Z||null==Q||Q(e)}),[Q,S,Z]),De=o((e=>{S||Z||null==L||L(e)}),[L,S,Z]),Re=o((e=>{var r;S||Z||document.activeElement===le.current||!e.currentTarget.contains(e.target)||null===(r=le.current)||void 0===r||r.focus()}),[S,Z]);return e(f,P(I({className:D,"data-element":T,"data-role":E,"data-component":W,$size:ve,$labelInline:H,$hasValidationFailure:H&&$e},s(ae)),{children:[A&&e(b,{"data-role":"label-wrapper",$labelInline:H,$size:ve,$labelWrapperWidth:H&&"number"==typeof Ie?100-Ie:void 0,children:[r(h,P(I({id:me,htmlFor:pe,size:ve,isRequired:ee},ce),{children:A})),N&&r(y,P(I({id:ye,size:ve},ce),{children:N}))]}),e(_,{"data-role":"input-wrapper",$size:ve,$maxWidth:G,$inputWidth:V,onClick:Re,"data-is-open":q,children:[ne&&ke,r(a,P(I({id:pe,name:ue,className:D,"aria-invalid":we,"aria-describedby":Pe,"aria-labelledby":z,value:ie,placeholder:S||Z?void 0:X,required:ee||xe,ref:se,autoFocus:$,onMouseDown:Ce,onClick:De,onChange:K,error:we,inputIcon:B,containerRef:R,size:ve,prefix:Y,prefixId:je,leftChildren:U,type:te,"data-is-open":q},ce,d(ae)),{children:C})),!ne&&ke,ze]})]}))}));export{$ as TextInput,$ as default};

package/esm/components/textbox/__internal__/__next__/text-input.style.d.ts

@@ -1,21 +0,0 @@
-interface StyledTextInputProps {
-    $labelInline?: boolean;
-    $size: "small" | "medium" | "large";
-    $hasValidationFailure?: boolean;
-}
-interface LabelWrapperProps {
-    $labelInline?: boolean;
-    $labelWrapperWidth?: number;
-    $size: "small" | "medium" | "large";
-}
-interface InputWrapperProps {
-    $size: "small" | "medium" | "large";
-    $maxWidth?: string;
-    $inputWidth?: number;
-}
-declare const StyledTextInput: import("styled-components").StyledComponent<"div", any, {
-    theme: object;
-} & StyledTextInputProps, "theme">;
-declare const LabelWrapper: import("styled-components").StyledComponent<"div", any, LabelWrapperProps, never>;
-declare const InputWrapper: import("styled-components").StyledComponent<"div", any, InputWrapperProps, never>;
-export { StyledTextInput, LabelWrapper, InputWrapper };

package/esm/components/textbox/__internal__/__next__/text-input.style.js

@@ -1 +0,0 @@
-import a,{css as e}from"styled-components";import{margin as l}from"styled-system";import t from"../../../../style/themes/apply-base-theme.js";const n=a.div.attrs(t).withConfig({displayName:"text-input.style__StyledTextInput",componentId:"carbon_v162_9_1__sc-ba6b7895-0"})(['[data-component="inline-inputs"] &,&[data-element="current-page"]{--fieldSpacing:0px;}margin-bottom:var(--fieldSpacing);'," display:flex;align-items:flex-start;flex-direction:",";gap:",";.fieldset-content &,.numeral-date-wrapper &{gap:var(--global-space-comp-xs);}.time &{gap:var(--global-space-comp-xs);}.legacy-search &{flex:1 1 0%;}"],l,(({$labelInline:a})=>a?"row":"column"),(({$labelInline:a,$size:e,$hasValidationFailure:l})=>{if(!a)switch(e){case"small":return"var(--global-space-comp-xs)";case"large":return"var(--global-space-comp-m)";default:return"var(--global-space-comp-s)"}return"large"===e?l?"var(--global-space-comp-l)":"var(--global-space-comp-m)":l?"var(--global-space-comp-l)":"var(--global-space-comp-s)"})),i=a.div.withConfig({displayName:"text-input.style__LabelWrapper",componentId:"carbon_v162_9_1__sc-ba6b7895-1"})([""," display:flex;flex-direction:column;align-self:stretch;",""],(({$labelWrapperWidth:a})=>a&&`\n    --label-spacing: ${a}%;\n\n    [data-component="date-range"] & {\n      --label-spacing: ${2*a}%;\n    }\n  `),(({$labelInline:a,$size:l})=>e([""," ",""],a&&e(["padding-top:var(--global-space-comp-",");justify-content:flex-start;align-items:flex-end;align-self:stretch;width:var(--label-spacing,auto);"],l.charAt(0)),!a&&e(["justify-content:flex-end;align-items:flex-start;"])))),p=a.div.withConfig({displayName:"text-input.style__InputWrapper",componentId:"carbon_v162_9_1__sc-ba6b7895-2"})(["display:flex;flex-direction:column;position:relative;width:100%;min-width:0;gap:",";",""],(({$size:a})=>"small"===a?"var(--global-space-comp-xs)":"var(--global-space-comp-s)"),(({$maxWidth:a,$inputWidth:l})=>e([""," width:",";"],a&&`max-width: ${a};`,l?`${l}%`:"100%")));export{p as InputWrapper,i as LabelWrapper,n as StyledTextInput};

package/esm/components/textbox/__internal__/__next__/utils.d.ts

@@ -1,81 +0,0 @@
-import { IconType } from "../../../icon";
-export interface CommonTextInputArgs {
-    label: string;
-    placeholder: string;
-    inputIcon?: IconType;
-}
-export declare const getCommonTextInputArgsWithSpecialCharacters: (args: CommonTextInputArgs) => {
-    label: string;
-    placeholder: string;
-    inputIcon?: IconType;
-};
-export declare const getCommonTextInputArgs: (labelInlineDefault?: boolean) => {
-    disabled: boolean;
-    readOnly: boolean;
-    prefix: string;
-    label: string;
-    inputHint: string;
-    placeholder: string;
-    labelInline: boolean;
-    inputWidth: number;
-    size: string;
-    inputIcon: undefined;
-    required: boolean;
-    error: string;
-    warning: string;
-};
-export declare const commonTextInputArgTypes: () => {
-    disabled: {
-        control: {
-            type: string;
-        };
-    };
-    size: {
-        options: string[];
-        control: {
-            type: string;
-        };
-    };
-    inputIcon: {
-        options: string[];
-        control: {
-            type: string;
-        };
-    };
-    labelInline: {
-        control: {
-            type: string;
-        };
-    };
-    inputWidth: {
-        control: {
-            type: string;
-            min: number;
-            max: number;
-            step: number;
-        };
-    };
-    containerWidth: {
-        control: {
-            type: string;
-            min: number;
-            max: number;
-            step: number;
-        };
-    };
-    required: {
-        control: {
-            type: string;
-        };
-    };
-    error: {
-        control: {
-            type: string;
-        };
-    };
-    warning: {
-        control: {
-            type: string;
-        };
-    };
-};

package/esm/components/textbox/__internal__/__next__/utils.js

@@ -1 +0,0 @@
-import{ICONS as e}from"../../../icon/icon-config.js";function t(e,t,r){return t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}const r=e=>{const{label:r,placeholder:n}=e;return o=function(e){for(var r=1;r<arguments.length;r++){var n=null!=arguments[r]?arguments[r]:{},o=Object.keys(n);"function"==typeof Object.getOwnPropertySymbols&&(o=o.concat(Object.getOwnPropertySymbols(n).filter((function(e){return Object.getOwnPropertyDescriptor(n,e).enumerable})))),o.forEach((function(r){t(e,r,n[r])}))}return e}({},e),l=null!=(l={label:r,placeholder:n})?l:{},Object.getOwnPropertyDescriptors?Object.defineProperties(o,Object.getOwnPropertyDescriptors(l)):function(e){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t.push.apply(t,r)}return t}(Object(l)).forEach((function(e){Object.defineProperty(o,e,Object.getOwnPropertyDescriptor(l,e))})),o;var o,l},n=(e=!1)=>({disabled:!1,readOnly:!1,prefix:"",label:e?"Label - new validation":"Label",inputHint:"",placeholder:"",labelInline:e,inputWidth:50,size:"medium",inputIcon:void 0,required:!1,error:"",warning:""}),o=()=>({disabled:{control:{type:"boolean"}},size:{options:["small","medium","large"],control:{type:"select"}},inputIcon:{options:["",...e],control:{type:"select"}},labelInline:{control:{type:"boolean"}},inputWidth:{control:{type:"range",min:0,max:100,step:1}},containerWidth:{control:{type:"range",min:0,max:100,step:1}},required:{control:{type:"boolean"}},error:{control:{type:"text"}},warning:{control:{type:"text"}}});export{o as commonTextInputArgTypes,n as getCommonTextInputArgs,r as getCommonTextInputArgsWithSpecialCharacters};

package/esm/components/textbox/index.d.ts

@@ -1,2 +0,0 @@
-export { default } from "./textbox.component";
-export type { TextboxProps, CommonTextboxProps } from "./textbox.component";

package/esm/components/textbox/index.js

@@ -1 +0,0 @@
-export{Textbox as default}from"./textbox.component.js";

package/esm/components/textbox/textbox.component.d.ts

@@ -1,110 +0,0 @@
-import React from "react";
-import { MarginProps } from "styled-system";
-import { IconType } from "../icon";
-import { CommonInputProps } from "../../__internal__/legacy-input";
-import { ValidationProps } from "../../__internal__/validations";
-import { TagProps } from "../../__internal__/utils/helpers/tags";
-export declare const SIZE_DEFAULT = "medium";
-export declare const LABEL_WIDTH_DEFAULT = 30;
-export declare const LABEL_VALIDATION_DEFAULT = false;
-export interface CommonTextboxProps extends Pick<ValidationProps, "error" | "warning">, MarginProps, Omit<CommonInputProps, "size" | "inputBorderRadius">, TagProps {
-    /** Prop to specify the aria-labelledby property of the component */
-    "aria-labelledby"?: string;
-    /** @deprecated `adaptiveLabelBreakpoint` has been deprecated, the functionality will no longer work. */
-    adaptiveLabelBreakpoint?: number;
-    /** Integer to determine a timeout for the deferred callback */
-    deferTimeout?: number;
-    /** A hint string rendered before the input but after the label. Intended to describe the purpose or content of the input. */
-    inputHint?: string;
-    /**
-     * @deprecated `fieldHelp` has been deprecated, `inputHint` should be used instead.
-     *  [Legacy] Help content to be displayed under an input. */
-    fieldHelp?: React.ReactNode;
-    /**
-     * An optional alternative for props.value, this is useful if the
-     * real value is an ID but you want to show a human-readable version.
-     */
-    formattedValue?: string;
-    /**
-     * Unique identifier for the input.
-     * Label id will be based on it, using following pattern: [id]-label.
-     * Will use a randomly generated GUID if none is provided.
-     */
-    id?: string;
-    /** Type of the icon that will be rendered next to the input */
-    inputIcon?: IconType | React.ReactNode;
-    /** Optional handler for click event on Textbox icon */
-    iconOnClick?: (ev: React.MouseEvent<HTMLElement> | React.KeyboardEvent<HTMLElement>) => void;
-    /** Optional handler for mouse down event on Textbox icon */
-    iconOnMouseDown?: (ev: React.MouseEvent<HTMLElement>) => void;
-    /** Overrides the default tabindex of the component */
-    iconTabIndex?: number;
-    /** The width of the input as a percentage */
-    inputWidth?: number;
-    /**
-     * Prop for specifying the max width of the input.
-     * Leaving the `maxWidth` prop with no value will default the width to '100%'
-     */
-    maxWidth?: string;
-    /** Additional child elements to display before the input */
-    leftChildren?: React.ReactNode;
-    /** Label content */
-    label?: string;
-    /** @deprecated `labelAlign` has been deprecated, the functionality will no longer work. */
-    labelAlign?: "left" | "right";
-    /**
-     * @deprecated `labelHelp` has been deprecated, `inputHint` should be used instead.
-     * [Legacy] Text applied to label help tooltip. When opted into new design validations
-     * string values will render as a hint above the input, unless an `inputHint`
-     * prop is also passed.
-     */
-    labelHelp?: React.ReactNode;
-    /** When true label is inline. */
-    labelInline?: boolean;
-    /** @deprecated `labelSpacing` has been deprecated, the functionality will no longer work.*/
-    labelSpacing?: 1 | 2;
-    /** @deprecated `labelWidth` has been deprecated, the functionality will no longer work. */
-    labelWidth?: number;
-    /** Specify a callback triggered on change */
-    onChange: (ev: React.ChangeEvent<HTMLInputElement>) => void;
-    /** Deferred callback to be called after the onChange event */
-    onChangeDeferred?: (ev: React.ChangeEvent<HTMLInputElement>) => void;
-    /** Specify a callback triggered on click */
-    onClick?: (ev: React.MouseEvent<HTMLElement> | React.KeyboardEvent<HTMLElement>) => void;
-    /** Event handler for the focus event */
-    onFocus?: (ev: React.FocusEvent<HTMLInputElement>) => void;
-    /** Event handler for the blur event */
-    onBlur?: (ev: React.FocusEvent<HTMLInputElement>) => void;
-    /** Event handler for the mouse down event */
-    onMouseDown?: (ev: React.MouseEvent<HTMLElement>) => void;
-    /** Emphasized part of the displayed text */
-    prefix?: string;
-    /** @deprecated `reverse` has been deprecated, the functionality will no longer work. */
-    reverse?: boolean;
-    /** Size of an input */
-    size?: "small" | "medium" | "large";
-    /** @deprecated `validationOnLabel` has been deprecated, the functionality will no longer work. */
-    validationOnLabel?: boolean;
-    /** @deprecated `tooltipPosition` has been deprecated, the functionality will no longer work. */
-    tooltipPosition?: "top" | "bottom" | "left" | "right";
-    /** @deprecated `helpAriaLabel` has been deprecated, the functionality will no longer work. */
-    helpAriaLabel?: string;
-    /** @deprecated `tooltipId` has been deprecated, the functionality will no longer work. */
-    tooltipId?: string;
-    /** @private @internal @ignore */
-    "data-component"?: string;
-    /** Render the ValidationMessage above the Textbox input when validationRedesignOptIn flag is set */
-    validationMessagePositionTop?: boolean;
-    /** @deprecated `info` has been deprecated, the functionality will no longer work. */
-    info?: string | boolean;
-}
-export interface TextboxProps extends Omit<CommonTextboxProps, "defaultValue"> {
-    /** Content to be rendered next to the input */
-    children?: React.ReactNode;
-    /** Container for DatePicker or SelectList components */
-    positionedChildren?: React.ReactNode;
-    /** Character limit of the textarea */
-    characterLimit?: number;
-}
-export declare const Textbox: React.ForwardRefExoticComponent<TextboxProps & React.RefAttributes<HTMLInputElement>>;
-export default Textbox;

package/esm/components/textbox/textbox.component.js

@@ -1 +0,0 @@
-import{jsxs as e,Fragment as n,jsx as r}from"react/jsx-runtime";import t,{useRef as i,useCallback as o,useState as l}from"react";import{TextInput as a}from"./__internal__/__next__/text-input.component.js";import c from"../../__internal__/input-icon-toggle/input-icon-toggle.component.js";import d from"../../hooks/useCharacterCount/useCharacterCount.js";import u from"../../hooks/__internal__/useUniqueId/index.js";import p from"../../__internal__/utils/helpers/combine-refs/index.js";function s(e,n,r){return n in e?Object.defineProperty(e,n,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[n]=r,e}function f(e){for(var n=1;n<arguments.length;n++){var r=null!=arguments[n]?arguments[n]:{},t=Object.keys(r);"function"==typeof Object.getOwnPropertySymbols&&(t=t.concat(Object.getOwnPropertySymbols(r).filter((function(e){return Object.getOwnPropertyDescriptor(r,e).enumerable})))),t.forEach((function(n){s(e,n,r[n])}))}return e}const b="medium",m=30,h=!1,y=new Set(["adaptiveLabelBreakpoint","info","helpAriaLabel","labelAlign","labelWidth","labelSpacing","labelId","reverse","tooltipPosition","tooltipId","validationOnLabel"]),O=t.forwardRef(((t,s)=>{var{"aria-describedby":m,"aria-labelledby":h,characterLimit:O,children:g,"data-component":j,"data-element":w,"data-role":v,deferTimeout:C,disabled:_,error:x,formattedValue:P,fieldHelp:k,iconOnClick:I,iconOnMouseDown:D,iconTabIndex:S,id:T,inputHint:M,inputIcon:H,inputWidth:W,label:B,labelHelp:L,labelInline:q,leftChildren:z,maxWidth:E,name:F,onBlur:A,onFocus:V,onChange:$,onChangeDeferred:R,onClick:U,onMouseDown:G,placeholder:J,positionedChildren:K,prefix:N,readOnly:Q,required:X,size:Y=b,warning:Z,validationMessagePositionTop:ee=!0,value:ne}=t,re=function(e,n){if(null==e)return{};var r,t,i=function(e,n){if(null==e)return{};var r,t,i={},o=Object.keys(e);for(t=0;t<o.length;t++)r=o[t],n.indexOf(r)>=0||(i[r]=e[r]);return i}(e,n);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(t=0;t<o.length;t++)r=o[t],n.indexOf(r)>=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(i[r]=e[r])}return i}(t,["aria-describedby","aria-labelledby","characterLimit","children","data-component","data-element","data-role","deferTimeout","disabled","error","formattedValue","fieldHelp","iconOnClick","iconOnMouseDown","iconTabIndex","id","inputHint","inputIcon","inputWidth","label","labelHelp","labelInline","leftChildren","maxWidth","name","onBlur","onFocus","onChange","onChangeDeferred","onClick","onMouseDown","placeholder","positionedChildren","prefix","readOnly","required","size","warning","validationMessagePositionTop","value"]);const[te,ie]=u(T,F),oe=i(null),le=i(null),ae=p(s,le),ce=o((e=>{if(_||Q)return;const n=null!=I?I:U;null==n||n(e)}),[I,U,_,Q]),de=o((e=>{if(_||Q)return;const n=null!=D?D:G;null==n||n(e)}),[D,G,_,Q]),ue="string"==typeof H?r(c,{inputIcon:H,disabled:_,error:x,iconTabIndex:S,onClick:ce,onMouseDown:de,readOnly:Q,size:Y,warning:Z,blockFocusStyling:!0}):null,pe=o((e=>{R&&(oe.current&&clearTimeout(oe.current),oe.current=setTimeout((()=>{R(e)}),C||750))}),[R,C]),se=o((e=>{$(e),pe(e)}),[$,pe]),fe="string"==typeof ne?ne:"",[be,me]=l("off"),[he,ye]=d(fe,O,be),Oe=[m,ye,k?`${te}-field-help`:void 0].filter(Boolean).join(" "),ge="string"==typeof L?L:void 0;return e(n,{children:[r(a,(je=f({},(ve=re,Object.fromEntries(Object.entries(ve).filter((([e])=>!y.has(e)))))),we={id:te,label:B||"",labelInline:q,disabled:_,readOnly:Q,size:Y,prefix:N,inputHint:M||ge,inputIcon:ue,placeholder:J,value:"string"==typeof P?P:null!=ne?ne:"",inputWidth:W,error:x,warning:Z,"aria-describedby":Oe,"aria-labelledby":h,required:X,name:ie,onChange:se,onBlur:e=>{O&&me("off"),null==A||A(e)},onFocus:e=>{O&&me("polite"),null==V||V(e)},onClick:U,onMouseDown:G,ref:ae,maxWidth:E,"data-component":j,"data-element":w,"data-role":v,validationMessagePositionTop:ee,leftChildren:z||K,children:g},we=null!=we?we:{},Object.getOwnPropertyDescriptors?Object.defineProperties(je,Object.getOwnPropertyDescriptors(we)):function(e){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);n.push.apply(n,r)}return n}(Object(we)).forEach((function(e){Object.defineProperty(je,e,Object.getOwnPropertyDescriptor(we,e))})),je)),he,k&&r("span",{"data-element":"help",style:{display:"block",marginTop:"calc(8px - var(--fieldSpacing, 0px))",whiteSpace:"pre-wrap",width:W?W-1+"%":"100%",float:"right"},id:`${te}-field-help`,"aria-disabled":_||void 0,children:k})]});var je,we,ve}));export{h as LABEL_VALIDATION_DEFAULT,m as LABEL_WIDTH_DEFAULT,b as SIZE_DEFAULT,O as Textbox,O as default};