carbon-react 154.3.2 → 154.3.3-beta.1

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

@@ -1,276 +1 @@
-function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
-import React, { useRef, useEffect, useContext, useCallback, useState } from "react";
-import tagComponent from "../../__internal__/utils/helpers/tags";
-import { InputPresentation } from "../../__internal__/input";
-import FormField from "../../__internal__/form-field";
-import useCharacterCount from "../../hooks/useCharacterCount";
-import Input from "../../__internal__/input/input.component";
-import { InputBehaviour } from "../../__internal__/input-behaviour";
-import InputIconToggle from "../../__internal__/input-icon-toggle";
-import guid from "../../__internal__/utils/helpers/guid";
-import StyledTextarea, { DEFAULT_MIN_HEIGHT } from "./textarea.style";
-import { TooltipProvider } from "../../__internal__/tooltip-provider";
-import useInputAccessibility from "../../hooks/__internal__/useInputAccessibility";
-import NewValidationContext from "../carbon-provider/__internal__/new-validation.context";
-import ErrorBorder from "../textbox/textbox.style";
-import ValidationMessage from "../../__internal__/validation-message";
-import Box from "../box";
-import Logger from "../../__internal__/utils/logger";
-import HintText from "../../__internal__/hint-text";
-import { filterStyledSystemMarginProps } from "../../style/utils";
-let deprecatedAriaDescribedByWarnTriggered = false;
-let deprecateOptionalWarnTriggered = false;
-let deprecateUncontrolledWarnTriggered = false;
-let warnBorderRadiusArrayTooLarge = false;
-export const Textarea = /*#__PURE__*/React.forwardRef(({
-  "aria-labelledby": ariaLabelledBy,
-  "aria-describedby": ariaDescribedByProp,
-  ariaDescribedBy: ariaDescribedByPropDeprecated,
-  autoFocus,
-  inputHint,
-  fieldHelp,
-  label,
-  children,
-  characterLimit,
-  onChange,
-  onFocus,
-  onBlur,
-  disabled = false,
-  labelInline,
-  labelAlign,
-  labelHelp,
-  labelSpacing,
-  inputIcon,
-  id: idProp,
-  error,
-  warning,
-  info,
-  name,
-  readOnly = false,
-  placeholder,
-  expandable = false,
-  rows,
-  validationOnLabel = false,
-  adaptiveLabelBreakpoint,
-  inputWidth,
-  maxWidth,
-  labelWidth = 30,
-  tooltipPosition,
-  value,
-  "data-element": dataElement,
-  "data-role": dataRole,
-  helpAriaLabel,
-  borderRadius,
-  hideBorders = false,
-  required,
-  isOptional,
-  minHeight = DEFAULT_MIN_HEIGHT,
-  ...rest
-}, ref) => {
-  if (!deprecateOptionalWarnTriggered && isOptional) {
-    deprecateOptionalWarnTriggered = true;
-    Logger.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 {
-    validationRedesignOptIn
-  } = useContext(NewValidationContext);
-  const labelInlineWithNewValidation = validationRedesignOptIn ? false : labelInline;
-  const [textareaMinHeight, setTextareaMinHeight] = useState(DEFAULT_MIN_HEIGHT);
-  const computeLabelPropValues = prop => validationRedesignOptIn ? undefined : prop;
-  const {
-    current: id
-  } = useRef(idProp || guid());
-  const internalRef = useRef(null);
-  const callbackRef = useCallback(inputElement => {
-    internalRef.current = inputElement;
-    if (!ref) {
-      return;
-    }
-    if ("current" in ref) {
-      ref.current = inputElement;
-    } else {
-      ref(inputElement);
-    }
-  }, [ref]);
-  const [characterCountAriaLive, setCharacterCountAriaLive] = useState("off");
-
-  // This block of code has been covered in a Playwright test.
-  // istanbul ignore next
-  const handleFocus = ev => {
-    if (characterLimit) setCharacterCountAriaLive("polite");
-    onFocus?.(ev);
-  };
-
-  // This block of code has been covered in a Playwright test.
-  // istanbul ignore next
-  const handleBlur = ev => {
-    if (characterLimit) setCharacterCountAriaLive("off");
-    onBlur?.(ev);
-  };
-  if (!deprecateUncontrolledWarnTriggered && !onChange) {
-    deprecateUncontrolledWarnTriggered = true;
-    Logger.deprecate("Uncontrolled behaviour in `Textarea` is deprecated and support will soon be removed. Please make sure all your inputs are controlled.");
-  }
-  if (!deprecatedAriaDescribedByWarnTriggered && ariaDescribedByPropDeprecated) {
-    deprecatedAriaDescribedByWarnTriggered = true;
-    Logger.deprecate("The `ariaDescribedBy` prop in `Textarea` is deprecated and will soon be removed, please use `aria-describedby` instead.");
-  }
-  if (Array.isArray(borderRadius) && borderRadius.length > 4 && !warnBorderRadiusArrayTooLarge) {
-    // eslint-disable-next-line no-console
-    console.warn("The `borderRadius` prop in `Textarea` component only supports up to 4 values.");
-    warnBorderRadiusArrayTooLarge = true;
-  }
-  const expandTextarea = useCallback(() => {
-    const textarea = internalRef.current;
-    if (textarea?.scrollHeight && textarea?.scrollHeight > textareaMinHeight) {
-      // need to reset scroll position of the nearest parent which scrolls
-      let scrollElement = textarea;
-      while (scrollElement && !scrollElement?.scrollTop) {
-        scrollElement = scrollElement?.parentElement || null;
-      }
-      const scrollPosition = scrollElement?.scrollTop;
-
-      // Reset height to allow shrinking when lines are removed
-      textarea.style.height = "auto";
-      // Set the height so all content is shown
-      textarea.style.height = `${Math.max(textarea.scrollHeight, textareaMinHeight)}px`;
-      if (scrollElement && scrollPosition) {
-        scrollElement.scrollTop = scrollPosition;
-      }
-    }
-  }, [textareaMinHeight]);
-  const {
-    labelId,
-    validationId,
-    fieldHelpId,
-    ariaDescribedBy
-  } = useInputAccessibility({
-    id,
-    validationRedesignOptIn,
-    error,
-    warning,
-    info,
-    label,
-    fieldHelp
-  });
-  const [characterCount, visuallyHiddenHintId] = useCharacterCount(value, characterLimit, characterCountAriaLive);
-  useEffect(() => {
-    if (rows) {
-      setTextareaMinHeight(internalRef?.current?.scrollHeight || 0);
-    } else {
-      setTextareaMinHeight(minHeight > DEFAULT_MIN_HEIGHT ? minHeight : DEFAULT_MIN_HEIGHT);
-    }
-  }, [minHeight, rows]);
-  useEffect(() => {
-    if (expandable) {
-      expandTextarea();
-    }
-  });
-  useEffect(() => {
-    if (expandable) {
-      window.addEventListener("resize", expandTextarea);
-      setTextareaMinHeight(internalRef?.current?.clientHeight || 0);
-      // need to also run expandTextarea when the Sage UI font completes loading, to prevent strange scroll
-      // behaviour when it only loads after the component is rendered
-      document.fonts?.addEventListener("loadingdone", expandTextarea);
-    }
-    return () => {
-      if (expandable) {
-        window.removeEventListener("resize", expandTextarea);
-        document.fonts?.removeEventListener("loadingdone", expandTextarea);
-      }
-    };
-  }, [expandTextarea, expandable]);
-  const hasIconInside = !!(inputIcon || validationId && !validationOnLabel);
-  const hintId = useRef(guid());
-  const inputHintId = inputHint ? hintId.current : undefined;
-  const combinedAriaDescribedBy = [ariaDescribedBy, inputHintId, visuallyHiddenHintId, ariaDescribedByProp || ariaDescribedByPropDeprecated].filter(Boolean).join(" ");
-  const input = /*#__PURE__*/React.createElement(InputPresentation, {
-    disabled: disabled,
-    readOnly: readOnly,
-    inputWidth: typeof inputWidth === "number" ? inputWidth : 100 - labelWidth,
-    maxWidth: maxWidth,
-    error: error,
-    warning: warning,
-    info: info,
-    borderRadius: borderRadius,
-    hideBorders: hideBorders
-  }, /*#__PURE__*/React.createElement(Input, _extends({
-    "aria-invalid": !!error,
-    "aria-labelledby": ariaLabelledBy,
-    "aria-describedby": combinedAriaDescribedBy,
-    autoFocus: autoFocus,
-    name: name,
-    value: value,
-    ref: callbackRef,
-    onChange: onChange,
-    onFocus: handleFocus,
-    onBlur: handleBlur,
-    disabled: disabled,
-    readOnly: readOnly,
-    placeholder: disabled ? "" : placeholder,
-    rows: rows,
-    id: id,
-    as: "textarea",
-    validationIconId: validationRedesignOptIn ? undefined : validationId,
-    inputBorderRadius: borderRadius,
-    required: required
-  }, rest)), children, /*#__PURE__*/React.createElement(InputIconToggle, {
-    disabled: disabled,
-    readOnly: readOnly,
-    inputIcon: inputIcon,
-    error: error,
-    warning: warning,
-    info: info,
-    validationIconId: validationRedesignOptIn ? undefined : validationId,
-    useValidationIcon: !(validationRedesignOptIn || validationOnLabel)
-  }));
-  const marginProps = filterStyledSystemMarginProps(rest);
-  return /*#__PURE__*/React.createElement(TooltipProvider, {
-    tooltipPosition: tooltipPosition,
-    helpAriaLabel: helpAriaLabel
-  }, /*#__PURE__*/React.createElement(InputBehaviour, null, /*#__PURE__*/React.createElement(StyledTextarea, _extends({
-    labelInline: labelInlineWithNewValidation,
-    hasIcon: hasIconInside,
-    minHeight: textareaMinHeight
-  }, marginProps, tagComponent("textarea", {
-    "data-element": dataElement,
-    "data-role": dataRole
-  })), /*#__PURE__*/React.createElement(FormField, {
-    fieldHelp: computeLabelPropValues(fieldHelp),
-    fieldHelpId: fieldHelpId,
-    error: error,
-    warning: warning,
-    info: info,
-    label: label,
-    labelId: labelId,
-    disabled: disabled,
-    id: id,
-    labelInline: computeLabelPropValues(labelInlineWithNewValidation),
-    labelAlign: labelAlign,
-    labelWidth: computeLabelPropValues(labelWidth),
-    labelHelp: computeLabelPropValues(labelHelp),
-    labelSpacing: labelSpacing,
-    isRequired: required,
-    isOptional: isOptional,
-    useValidationIcon: computeLabelPropValues(validationOnLabel),
-    adaptiveLabelBreakpoint: adaptiveLabelBreakpoint,
-    validationRedesignOptIn: validationRedesignOptIn,
-    my: 0 // prevents any form spacing being applied
-  }, (inputHint || labelHelp && validationRedesignOptIn) && /*#__PURE__*/React.createElement(HintText, {
-    align: labelAlign,
-    id: inputHintId,
-    "data-element": "input-hint"
-  }, inputHint || labelHelp), validationRedesignOptIn ? /*#__PURE__*/React.createElement(Box, {
-    position: "relative"
-  }, /*#__PURE__*/React.createElement(ValidationMessage, {
-    error: error,
-    validationId: validationId,
-    warning: warning
-  }), (error || warning) && /*#__PURE__*/React.createElement(ErrorBorder, {
-    warning: !!(!error && warning)
-  }), input) : input), characterCount)));
-});
-Textarea.displayName = "Textarea";
-export { Textarea as OriginalTextarea };
-export default Textarea;
+import{jsxs as e,jsx as r}from"react/jsx-runtime";import i,{useContext as n,useState as t,useRef as o,useCallback as l,useEffect as a}from"react";import d from"../../__internal__/utils/helpers/tags/tags.js";import s from"../../__internal__/input/input.component.js";import p from"../../__internal__/input/input-presentation.component.js";import c from"../../__internal__/form-field/form-field.component.js";import u from"../../hooks/useCharacterCount/useCharacterCount.js";import{InputBehaviour as b}from"../../__internal__/input-behaviour/input-behaviour.component.js";import m from"../../__internal__/input-icon-toggle/input-icon-toggle.component.js";import f from"../../__internal__/utils/helpers/guid/index.js";import h,{DEFAULT_MIN_HEIGHT as v}from"./textarea.style.js";import{TooltipProvider as g}from"../../__internal__/tooltip-provider/index.js";import y from"../../hooks/__internal__/useInputAccessibility/useInputAccessibility.js";import _ from"../carbon-provider/__internal__/new-validation.context.js";import O from"../textbox/textbox.style.js";import j from"../../__internal__/validation-message/validation-message.component.js";import{Box as w}from"../box/box.component.js";import x from"../../__internal__/utils/logger/index.js";import{HintText as I}from"../../__internal__/hint-text/hint-text.component.js";import"../../style/utils/filter-styled-system-padding-props.js";import H from"../../style/utils/filter-styled-system-margin-props.js";function P(e,r,i){return r in e?Object.defineProperty(e,r,{value:i,enumerable:!0,configurable:!0,writable:!0}):e[r]=i,e}function B(e){for(var r=1;r<arguments.length;r++){var i=null!=arguments[r]?arguments[r]:{},n=Object.keys(i);"function"==typeof Object.getOwnPropertySymbols&&(n=n.concat(Object.getOwnPropertySymbols(i).filter((function(e){return Object.getOwnPropertyDescriptor(i,e).enumerable})))),n.forEach((function(r){P(e,r,i[r])}))}return e}let L=!1,A=!1,T=!1,R=!1;const k=i.forwardRef(((i,P)=>{var{"aria-labelledby":k,"aria-describedby":S,ariaDescribedBy:W,autoFocus:D,inputHint:E,fieldHelp:C,label:q,children:F,characterLimit:z,onChange:V,onFocus:M,onBlur:N,disabled:U=!1,labelInline:$,labelAlign:G,labelHelp:J,labelSpacing:K,inputIcon:Q,id:X,error:Y,warning:Z,info:ee,name:re,readOnly:ie=!1,placeholder:ne,expandable:te=!1,rows:oe,validationOnLabel:le=!1,adaptiveLabelBreakpoint:ae,inputWidth:de,maxWidth:se,labelWidth:pe=30,tooltipPosition:ce,value:ue,"data-element":be,"data-role":me,helpAriaLabel:fe,borderRadius:he,hideBorders:ve=!1,required:ge,isOptional:ye,minHeight:_e=v}=i,Oe=function(e,r){if(null==e)return{};var i,n,t=function(e,r){if(null==e)return{};var i,n,t={},o=Object.keys(e);for(n=0;n<o.length;n++)i=o[n],r.indexOf(i)>=0||(t[i]=e[i]);return t}(e,r);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(n=0;n<o.length;n++)i=o[n],r.indexOf(i)>=0||Object.prototype.propertyIsEnumerable.call(e,i)&&(t[i]=e[i])}return t}(i,["aria-labelledby","aria-describedby","ariaDescribedBy","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"]);!A&&ye&&(A=!0,x.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{validationRedesignOptIn:je}=n(_),we=!je&&$,[xe,Ie]=t(v),He=e=>je?void 0:e,{current:Pe}=o(X||f()),Be=o(null),Le=l((e=>{Be.current=e,P&&("current"in P?P.current=e:P(e))}),[P]),[Ae,Te]=t("off");T||V||(T=!0,x.deprecate("Uncontrolled behaviour in `Textarea` is deprecated and support will soon be removed. Please make sure all your inputs are controlled.")),!L&&W&&(L=!0,x.deprecate("The `ariaDescribedBy` prop in `Textarea` is deprecated and will soon be removed, please use `aria-describedby` instead.")),Array.isArray(he)&&he.length>4&&!R&&(console.warn("The `borderRadius` prop in `Textarea` component only supports up to 4 values."),R=!0);const Re=l((()=>{const e=Be.current;if((null==e?void 0:e.scrollHeight)&&(null==e?void 0:e.scrollHeight)>xe){let r=e;for(;r&&!(null==r?void 0:r.scrollTop);)r=(null==r?void 0:r.parentElement)||null;const i=null==r?void 0:r.scrollTop;e.style.height="auto",e.style.height=`${Math.max(e.scrollHeight,xe)}px`,r&&i&&(r.scrollTop=i)}}),[xe]),{labelId:ke,validationId:Se,fieldHelpId:We,ariaDescribedBy:De}=y({id:Pe,validationRedesignOptIn:je,error:Y,warning:Z,info:ee,label:q,fieldHelp:C}),[Ee,Ce]=u(ue,z,Ae);a((()=>{var e;Ie(oe?(null==Be||null===(e=Be.current)||void 0===e?void 0:e.scrollHeight)||0:_e>v?_e:v)}),[_e,oe]),a((()=>{te&&Re()})),a((()=>{var e,r;return te&&(window.addEventListener("resize",Re),Ie((null==Be||null===(e=Be.current)||void 0===e?void 0:e.clientHeight)||0),null===(r=document.fonts)||void 0===r||r.addEventListener("loadingdone",Re)),()=>{var e;te&&(window.removeEventListener("resize",Re),null===(e=document.fonts)||void 0===e||e.removeEventListener("loadingdone",Re))}}),[Re,te]);const qe=!!(Q||Se&&!le),Fe=o(f()),ze=E?Fe.current:void 0,Ve=[De,ze,Ce,S||W].filter(Boolean).join(" "),Me=e(p,{disabled:U,readOnly:ie,inputWidth:"number"==typeof de?de:100-pe,maxWidth:se,error:Y,warning:Z,info:ee,borderRadius:he,hideBorders:ve,children:[r(s,B({"aria-invalid":!!Y,"aria-labelledby":k,"aria-describedby":Ve,autoFocus:D,name:re,value:ue,ref:Le,onChange:V,onFocus:e=>{z&&Te("polite"),null==M||M(e)},onBlur:e=>{z&&Te("off"),null==N||N(e)},disabled:U,readOnly:ie,placeholder:U?"":ne,rows:oe,id:Pe,as:"textarea",validationIconId:je?void 0:Se,inputBorderRadius:he,required:ge},Oe)),F,r(m,{disabled:U,readOnly:ie,inputIcon:Q,error:Y,warning:Z,info:ee,validationIconId:je?void 0:Se,useValidationIcon:!(je||le)})]}),Ne=H(Oe);return r(g,{tooltipPosition:ce,helpAriaLabel:fe,children:r(b,{children:e(h,(Ue=B({labelInline:we,hasIcon:qe,minHeight:xe},Ne,d("textarea",{"data-element":be,"data-role":me})),$e={children:[e(c,{fieldHelp:He(C),fieldHelpId:We,error:Y,warning:Z,info:ee,label:q,labelId:ke,disabled:U,id:Pe,labelInline:He(we),labelAlign:G,labelWidth:He(pe),labelHelp:He(J),labelSpacing:K,isRequired:ge,isOptional:ye,useValidationIcon:He(le),adaptiveLabelBreakpoint:ae,validationRedesignOptIn:je,my:0,children:[(E||J&&je)&&r(I,{align:G,id:ze,"data-element":"input-hint",children:E||J}),je?e(w,{position:"relative",children:[r(j,{error:Y,validationId:Se,warning:Z}),(Y||Z)&&r(O,{warning:!(Y||!Z)}),Me]}):Me]}),Ee]},$e=null!=$e?$e:{},Object.getOwnPropertyDescriptors?Object.defineProperties(Ue,Object.getOwnPropertyDescriptors($e)):function(e){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);r.push.apply(r,i)}return r}(Object($e)).forEach((function(e){Object.defineProperty(Ue,e,Object.getOwnPropertyDescriptor($e,e))})),Ue))})});var Ue,$e}));k.displayName="Textarea";export{k as OriginalTextarea,k as Textarea,k as default};

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

@@ -1,45 +1 @@
-import styled, { css } from "styled-components";
-import { margin } from "styled-system";
-import StyledInput from "../../__internal__/input/input.style";
-import { StyledLabelContainer } from "../../__internal__/label/label.style";
-import InputIconToggleStyle from "../../__internal__/input-icon-toggle/input-icon-toggle.style";
-import BaseTheme from "../../style/themes/base";
-export const DEFAULT_MIN_HEIGHT = 64;
-const StyledTextarea = styled.div`
-  margin-bottom: var(--fieldSpacing);
-  ${margin};
-
-  ${StyledInput} {
-    box-sizing: border-box;
-    resize: none;
-    ${({
-  minHeight
-}) => `min-height: ${minHeight || DEFAULT_MIN_HEIGHT}px;`}
-    padding: var(--spacing150) var(--spacing200);
-
-    ${({
-  hasIcon
-}) => hasIcon && "padding-right: var(--spacing500);"}
-  }
-
-  ${({
-  labelInline
-}) => labelInline && css`
-      ${StyledLabelContainer} {
-        align-items: flex-start;
-        padding-top: 6px;
-      }
-    `}
-
-  ${InputIconToggleStyle} {
-    height: 40px;
-    position: absolute;
-    height: 100%;
-    top: 0px;
-    right: 4px;
-  }
-`;
-StyledTextarea.defaultProps = {
-  theme: BaseTheme
-};
-export default StyledTextarea;
+import t,{css as e}from"styled-components";import{margin as i}from"styled-system";import n from"../../__internal__/input/input.style.js";import{StyledLabelContainer as o}from"../../__internal__/label/label.style.js";import a from"../../__internal__/input-icon-toggle/input-icon-toggle.style.js";import s from"../../style/themes/base/index.js";const p=64,r=t.div.withConfig({displayName:"textarea.style__StyledTextarea",componentId:"sc-93dea5de-0"})(["margin-bottom:var(--fieldSpacing);",";","{box-sizing:border-box;resize:none;"," padding:var(--spacing150) var(--spacing200);","}"," ","{height:40px;position:absolute;height:100%;top:0px;right:4px;}"],i,n,(({minHeight:t})=>`min-height: ${t||64}px;`),(({hasIcon:t})=>t&&"padding-right: var(--spacing500);"),(({labelInline:t})=>t&&e(["","{align-items:flex-start;padding-top:6px;}"],o)),a);r.defaultProps={theme:s};export{p as DEFAULT_MIN_HEIGHT,r as default};

package/esm/components/textbox/__internal__/prefix.style.js

@@ -1,14 +1 @@
-import styled from "styled-components";
-import InputSizes from "../../../__internal__/input/input-sizes.style";
-const StyledPrefix = styled.span`
-  align-self: center;
-  font-weight: 700;
-  margin-left: ${({
-  size
-}) => InputSizes[size].horizontalPadding}; // margin must match the original component padding
-
-  && + input {
-    padding-left: var(--spacing100);
-  }
-`;
-export default StyledPrefix;
+import t from"styled-components";import e from"../../../__internal__/input/input-sizes.style.js";const i=t.span.withConfig({displayName:"prefix.style__StyledPrefix",componentId:"sc-4d216025-0"})(["align-self:center;font-weight:700;margin-left:",";&& + input{padding-left:var(--spacing100);}"],(({size:t})=>e[t].horizontalPadding));export{i as default};

package/esm/components/textbox/index.js

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

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

@@ -1,238 +1 @@
-function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
-import React, { useContext, useRef, useState } from "react";
-import Box from "../box";
-import FormField from "../../__internal__/form-field";
-import HintText from "../../__internal__/hint-text";
-import { Input, InputPresentation } from "../../__internal__/input";
-import { InputBehaviour } from "../../__internal__/input-behaviour";
-import InputIconToggle from "../../__internal__/input-icon-toggle";
-import { TooltipProvider } from "../../__internal__/tooltip-provider";
-import ValidationMessage from "../../__internal__/validation-message";
-import { filterStyledSystemMarginProps } from "../../style/utils";
-import NewValidationContext from "../carbon-provider/__internal__/new-validation.context";
-import NumeralDateContext from "../numeral-date/__internal__/numeral-date.context";
-import Logger from "../../__internal__/utils/logger";
-import useCharacterCount from "../../hooks/useCharacterCount";
-import useUniqueId from "../../hooks/__internal__/useUniqueId";
-import guid from "../../__internal__/utils/helpers/guid";
-import useInputAccessibility from "../../hooks/__internal__/useInputAccessibility/useInputAccessibility";
-import ErrorBorder from "./textbox.style";
-import StyledPrefix from "./__internal__/prefix.style";
-export const ALIGN_DEFAULT = "left";
-export const SIZE_DEFAULT = "medium";
-export const LABEL_WIDTH_DEFAULT = 30;
-export const LABEL_VALIDATION_DEFAULT = false;
-let deprecatedAriaDescribedByWarnTriggered = false;
-let deprecateOptionalWarnTriggered = false;
-let deprecateUncontrolledWarnTriggered = false;
-export const Textbox = /*#__PURE__*/React.forwardRef(({
-  "aria-labelledby": ariaLabelledBy,
-  "aria-describedby": ariaDescribedByProp,
-  ariaDescribedBy: ariaDescribedByDeprecated,
-  align = ALIGN_DEFAULT,
-  autoFocus,
-  children,
-  disabled,
-  inputIcon,
-  leftChildren,
-  label,
-  labelAlign,
-  labelHelp,
-  labelInline,
-  labelSpacing,
-  id,
-  formattedValue,
-  inputHint,
-  fieldHelp,
-  error,
-  warning,
-  info,
-  name,
-  reverse,
-  size = SIZE_DEFAULT,
-  value,
-  readOnly,
-  placeholder,
-  onBlur,
-  onClick,
-  onFocus,
-  onChange,
-  onMouseDown,
-  onChangeDeferred,
-  deferTimeout,
-  isOptional,
-  iconOnClick,
-  iconOnMouseDown,
-  iconTabIndex,
-  validationOnLabel = LABEL_VALIDATION_DEFAULT,
-  labelWidth = LABEL_WIDTH_DEFAULT,
-  inputWidth,
-  maxWidth,
-  prefix,
-  adaptiveLabelBreakpoint,
-  required,
-  positionedChildren,
-  tooltipPosition,
-  "data-component": dataComponent,
-  "data-element": dataElement,
-  "data-role": dataRole,
-  characterLimit,
-  helpAriaLabel,
-  tooltipId,
-  ...props
-}, ref) => {
-  if (!deprecateOptionalWarnTriggered && isOptional) {
-    deprecateOptionalWarnTriggered = true;
-    Logger.deprecate("`isOptional` is deprecated in Textbox 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 characterCountValue = typeof value === "string" ? value : "";
-  const [uniqueId, uniqueName] = useUniqueId(id, name);
-  const [characterCountAriaLive, setCharacterCountAriaLive] = useState("off");
-
-  // This block of code has been covered in a Playwright test.
-  // istanbul ignore next
-  const handleFocus = ev => {
-    if (characterLimit) setCharacterCountAriaLive("polite");
-    onFocus?.(ev);
-  };
-
-  // This block of code has been covered in a Playwright test.
-  // istanbul ignore next
-  const handleBlur = ev => {
-    if (characterLimit) setCharacterCountAriaLive("off");
-    onBlur?.(ev);
-  };
-  const [characterCount, visuallyHiddenHintId] = useCharacterCount(characterCountValue, characterLimit, characterCountAriaLive);
-  const {
-    validationRedesignOptIn
-  } = useContext(NewValidationContext);
-  const {
-    disableErrorBorder
-  } = useContext(NumeralDateContext);
-  const computeLabelPropValues = prop => validationRedesignOptIn ? undefined : prop;
-  if (!deprecateUncontrolledWarnTriggered && !onChange) {
-    deprecateUncontrolledWarnTriggered = true;
-    Logger.deprecate("Uncontrolled behaviour in `Textbox` is deprecated and support will soon be removed. Please make sure all your inputs are controlled.");
-  }
-  if (!deprecatedAriaDescribedByWarnTriggered && ariaDescribedByDeprecated) {
-    deprecatedAriaDescribedByWarnTriggered = true;
-    Logger.deprecate("The `ariaDescribedBy` prop in `Textbox` is deprecated and will soon be removed, please use `aria-describedby` instead.");
-  }
-  const {
-    labelId,
-    validationId,
-    fieldHelpId,
-    ariaDescribedBy
-  } = useInputAccessibility({
-    id: uniqueId,
-    validationRedesignOptIn,
-    error,
-    warning,
-    info,
-    label,
-    fieldHelp
-  });
-  const hintId = useRef(guid());
-  const inputHintId = inputHint ? hintId.current : undefined;
-  const combinedAriaDescribedBy = [ariaDescribedBy, inputHintId, visuallyHiddenHintId, ariaDescribedByProp || ariaDescribedByDeprecated].filter(Boolean).join(" ");
-  const hasIconInside = !!(inputIcon || validationId && !validationOnLabel);
-  const input = /*#__PURE__*/React.createElement(InputPresentation, {
-    align: align,
-    disabled: disabled,
-    readOnly: readOnly,
-    size: size,
-    error: error,
-    warning: warning,
-    info: info,
-    prefix: prefix,
-    inputWidth: inputWidth || 100 - labelWidth,
-    maxWidth: labelInline || labelAlign !== "right" ? maxWidth : undefined,
-    positionedChildren: positionedChildren,
-    hasIcon: hasIconInside
-  }, leftChildren, prefix && /*#__PURE__*/React.createElement(StyledPrefix, {
-    "data-element": "textbox-prefix",
-    size: size
-  }, prefix), /*#__PURE__*/React.createElement(Input, _extends({}, required && {
-    required
-  }, {
-    align: align,
-    "aria-invalid": !!error,
-    "aria-labelledby": ariaLabelledBy,
-    "aria-describedby": combinedAriaDescribedBy,
-    autoFocus: autoFocus,
-    deferTimeout: deferTimeout,
-    disabled: disabled,
-    id: uniqueId,
-    ref: ref,
-    name: uniqueName,
-    onBlur: handleBlur,
-    onChange: onChange,
-    onChangeDeferred: onChangeDeferred,
-    onClick: disabled || readOnly ? undefined : onClick,
-    onFocus: handleFocus,
-    onMouseDown: disabled || readOnly ? undefined : onMouseDown,
-    placeholder: disabled || readOnly ? "" : placeholder,
-    readOnly: readOnly,
-    value: typeof formattedValue === "string" ? formattedValue : value,
-    validationIconId: validationRedesignOptIn ? undefined : tooltipId || validationId
-  }, props)), children, /*#__PURE__*/React.createElement(InputIconToggle, {
-    align: align,
-    disabled: disabled,
-    error: error,
-    iconTabIndex: iconTabIndex,
-    info: info,
-    inputIcon: inputIcon,
-    onClick: disabled || readOnly ? undefined : iconOnClick || onClick,
-    onMouseDown: disabled || readOnly ? undefined : iconOnMouseDown || onMouseDown,
-    readOnly: readOnly,
-    size: size,
-    useValidationIcon: !(validationRedesignOptIn || validationOnLabel),
-    warning: warning,
-    validationIconId: validationRedesignOptIn ? undefined : tooltipId || validationId
-  }));
-  return /*#__PURE__*/React.createElement(TooltipProvider, {
-    helpAriaLabel: helpAriaLabel,
-    tooltipPosition: tooltipPosition
-  }, /*#__PURE__*/React.createElement(InputBehaviour, null, /*#__PURE__*/React.createElement(FormField, _extends({
-    maxWidth: !labelInline && labelAlign === "right" ? maxWidth : undefined,
-    disabled: disabled,
-    fieldHelpId: fieldHelpId,
-    fieldHelp: computeLabelPropValues(fieldHelp),
-    error: error,
-    warning: warning,
-    info: info,
-    label: label,
-    labelId: labelId,
-    labelAlign: labelAlign,
-    labelHelp: computeLabelPropValues(labelHelp),
-    labelInline: computeLabelPropValues(labelInline),
-    labelSpacing: labelSpacing,
-    labelWidth: computeLabelPropValues(labelWidth),
-    id: uniqueId,
-    reverse: computeLabelPropValues(reverse),
-    isOptional: isOptional,
-    useValidationIcon: computeLabelPropValues(validationOnLabel),
-    adaptiveLabelBreakpoint: adaptiveLabelBreakpoint,
-    isRequired: required,
-    "data-component": dataComponent,
-    "data-role": dataRole,
-    "data-element": dataElement,
-    validationIconId: validationRedesignOptIn ? undefined : validationId,
-    validationRedesignOptIn: validationRedesignOptIn
-  }, filterStyledSystemMarginProps(props)), (inputHint || labelHelp && validationRedesignOptIn) && /*#__PURE__*/React.createElement(HintText, {
-    align: labelAlign,
-    "data-element": "input-hint",
-    id: inputHintId,
-    isComponentInline: labelInline
-  }, inputHint || labelHelp), validationRedesignOptIn ? /*#__PURE__*/React.createElement(Box, {
-    position: "relative"
-  }, /*#__PURE__*/React.createElement(ValidationMessage, {
-    error: error,
-    validationId: validationId,
-    warning: warning
-  }), !disableErrorBorder && (error || warning) && /*#__PURE__*/React.createElement(ErrorBorder, {
-    warning: !!(!error && warning)
-  }), input) : input, characterCount)));
-});
-Textbox.displayName = "Textbox";
-export default Textbox;
+import{jsxs as e,jsx as i}from"react/jsx-runtime";import n,{useState as o,useContext as t,useRef as r}from"react";import{Box as a}from"../box/box.component.js";import l from"../../__internal__/form-field/form-field.component.js";import{HintText as d}from"../../__internal__/hint-text/hint-text.component.js";import p from"../../__internal__/input/input.component.js";import s from"../../__internal__/input/input-presentation.component.js";import{InputBehaviour as c}from"../../__internal__/input-behaviour/input-behaviour.component.js";import u from"../../__internal__/input-icon-toggle/input-icon-toggle.component.js";import{TooltipProvider as b}from"../../__internal__/tooltip-provider/index.js";import m from"../../__internal__/validation-message/validation-message.component.js";import"../../style/utils/filter-styled-system-padding-props.js";import f from"../../style/utils/filter-styled-system-margin-props.js";import h from"../carbon-provider/__internal__/new-validation.context.js";import _ from"../numeral-date/__internal__/numeral-date.context.js";import g from"../../__internal__/utils/logger/index.js";import y from"../../hooks/useCharacterCount/useCharacterCount.js";import v from"../../hooks/__internal__/useUniqueId/index.js";import O from"../../__internal__/utils/helpers/guid/index.js";import j from"../../hooks/__internal__/useInputAccessibility/useInputAccessibility.js";import x from"./textbox.style.js";import I from"./__internal__/prefix.style.js";function w(e,i,n){return i in e?Object.defineProperty(e,i,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[i]=n,e}function C(e){for(var i=1;i<arguments.length;i++){var n=null!=arguments[i]?arguments[i]:{},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(i){w(e,i,n[i])}))}return e}function D(e,i){return i=null!=i?i:{},Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(i)):function(e){var i=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);i.push.apply(i,n)}return i}(Object(i)).forEach((function(n){Object.defineProperty(e,n,Object.getOwnPropertyDescriptor(i,n))})),e}const P="left",k="medium",B=30,H=!1;let T=!1,L=!1,W=!1;const S=n.forwardRef(((n,w)=>{var{"aria-labelledby":S,"aria-describedby":A,ariaDescribedBy:q,align:F=P,autoFocus:M,children:z,disabled:R,inputIcon:E,leftChildren:V,label:U,labelAlign:N,labelHelp:G,labelInline:J,labelSpacing:K,id:Q,formattedValue:X,inputHint:Y,fieldHelp:Z,error:$,warning:ee,info:ie,name:ne,reverse:oe,size:te=k,value:re,readOnly:ae,placeholder:le,onBlur:de,onClick:pe,onFocus:se,onChange:ce,onMouseDown:ue,onChangeDeferred:be,deferTimeout:me,isOptional:fe,iconOnClick:he,iconOnMouseDown:_e,iconTabIndex:ge,validationOnLabel:ye=H,labelWidth:ve=B,inputWidth:Oe,maxWidth:je,prefix:xe,adaptiveLabelBreakpoint:Ie,required:we,positionedChildren:Ce,tooltipPosition:De,"data-component":Pe,"data-element":ke,"data-role":Be,characterLimit:He,helpAriaLabel:Te,tooltipId:Le}=n,We=function(e,i){if(null==e)return{};var n,o,t=function(e,i){if(null==e)return{};var n,o,t={},r=Object.keys(e);for(o=0;o<r.length;o++)n=r[o],i.indexOf(n)>=0||(t[n]=e[n]);return t}(e,i);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);for(o=0;o<r.length;o++)n=r[o],i.indexOf(n)>=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(t[n]=e[n])}return t}(n,["aria-labelledby","aria-describedby","ariaDescribedBy","align","autoFocus","children","disabled","inputIcon","leftChildren","label","labelAlign","labelHelp","labelInline","labelSpacing","id","formattedValue","inputHint","fieldHelp","error","warning","info","name","reverse","size","value","readOnly","placeholder","onBlur","onClick","onFocus","onChange","onMouseDown","onChangeDeferred","deferTimeout","isOptional","iconOnClick","iconOnMouseDown","iconTabIndex","validationOnLabel","labelWidth","inputWidth","maxWidth","prefix","adaptiveLabelBreakpoint","required","positionedChildren","tooltipPosition","data-component","data-element","data-role","characterLimit","helpAriaLabel","tooltipId"]);!L&&fe&&(L=!0,g.deprecate("`isOptional` is deprecated in Textbox 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 Se="string"==typeof re?re:"",[Ae,qe]=v(Q,ne),[Fe,Me]=o("off"),[ze,Re]=y(Se,He,Fe),{validationRedesignOptIn:Ee}=t(h),{disableErrorBorder:Ve}=t(_),Ue=e=>Ee?void 0:e;W||ce||(W=!0,g.deprecate("Uncontrolled behaviour in `Textbox` is deprecated and support will soon be removed. Please make sure all your inputs are controlled.")),!T&&q&&(T=!0,g.deprecate("The `ariaDescribedBy` prop in `Textbox` is deprecated and will soon be removed, please use `aria-describedby` instead."));const{labelId:Ne,validationId:Ge,fieldHelpId:Je,ariaDescribedBy:Ke}=j({id:Ae,validationRedesignOptIn:Ee,error:$,warning:ee,info:ie,label:U,fieldHelp:Z}),Qe=r(O()),Xe=Y?Qe.current:void 0,Ye=[Ke,Xe,Re,A||q].filter(Boolean).join(" "),Ze=e(s,{align:F,disabled:R,readOnly:ae,size:te,error:$,warning:ee,info:ie,prefix:xe,inputWidth:Oe||100-ve,maxWidth:J||"right"!==N?je:void 0,positionedChildren:Ce,hasIcon:!!(E||Ge&&!ye),children:[V,xe&&i(I,{"data-element":"textbox-prefix",size:te,children:xe}),i(p,C(D(C({},we&&{required:we}),{align:F,"aria-invalid":!!$,"aria-labelledby":S,"aria-describedby":Ye,autoFocus:M,deferTimeout:me,disabled:R,id:Ae,ref:w,name:qe,onBlur:e=>{He&&Me("off"),null==de||de(e)},onChange:ce,onChangeDeferred:be,onClick:R||ae?void 0:pe,onFocus:e=>{He&&Me("polite"),null==se||se(e)},onMouseDown:R||ae?void 0:ue,placeholder:R||ae?"":le,readOnly:ae,value:"string"==typeof X?X:re,validationIconId:Ee?void 0:Le||Ge}),We)),z,i(u,{align:F,disabled:R,error:$,iconTabIndex:ge,info:ie,inputIcon:E,onClick:R||ae?void 0:he||pe,onMouseDown:R||ae?void 0:_e||ue,readOnly:ae,size:te,useValidationIcon:!(Ee||ye),warning:ee,validationIconId:Ee?void 0:Le||Ge})]});return i(b,{helpAriaLabel:Te,tooltipPosition:De,children:i(c,{children:e(l,D(C({maxWidth:J||"right"!==N?void 0:je,disabled:R,fieldHelpId:Je,fieldHelp:Ue(Z),error:$,warning:ee,info:ie,label:U,labelId:Ne,labelAlign:N,labelHelp:Ue(G),labelInline:Ue(J),labelSpacing:K,labelWidth:Ue(ve),id:Ae,reverse:Ue(oe),isOptional:fe,useValidationIcon:Ue(ye),adaptiveLabelBreakpoint:Ie,isRequired:we,"data-component":Pe,"data-role":Be,"data-element":ke,validationIconId:Ee?void 0:Ge,validationRedesignOptIn:Ee},f(We)),{children:[(Y||G&&Ee)&&i(d,{align:N,"data-element":"input-hint",id:Xe,isComponentInline:J,children:Y||G}),Ee?e(a,{position:"relative",children:[i(m,{error:$,validationId:Ge,warning:ee}),!Ve&&($||ee)&&i(x,{warning:!($||!ee)}),Ze]}):Ze,ze]}))})})}));S.displayName="Textbox";export{P as ALIGN_DEFAULT,H as LABEL_VALIDATION_DEFAULT,B as LABEL_WIDTH_DEFAULT,k as SIZE_DEFAULT,S as Textbox,S as default};

package/esm/components/textbox/textbox.style.js

@@ -1,16 +1 @@
-import styled, { css } from "styled-components";
-const ErrorBorder = styled.span`
-  ${({
-  warning,
-  inline
-}) => css`
-    position: absolute;
-    z-index: 6;
-    width: 2px;
-    background-color: ${warning ? "var(--colorsSemanticCaution500)" : "var(--colorsSemanticNegative500)"};
-    left: -12px;
-    bottom: ${inline ? "10px" : "0px"};
-    top: 0px;
-  `}
-`;
-export default ErrorBorder;
+import o,{css as t}from"styled-components";const e=o.span.withConfig({displayName:"textbox.style__ErrorBorder",componentId:"sc-ddfe21e6-0"})(["",""],(({warning:o,inline:e})=>t(["position:absolute;z-index:6;width:2px;background-color:",";left:-12px;bottom:",";top:0px;"],o?"var(--colorsSemanticCaution500)":"var(--colorsSemanticNegative500)",e?"10px":"0px")));export{e as default};

package/esm/components/tile/__internal__/compute-content-padding.js

@@ -1,23 +1 @@
-import { paddingNames, paddingLeftPropertyNames, paddingRightPropertyNames, paddingBottomPropertyNames, paddingTopPropertyNames, paddingXPropertyNames, paddingYPropertyNames } from "../../../style/utils/filter-styled-system-padding-props";
-const CONTENT_PADDING_LEFT_KEYS = [...paddingLeftPropertyNames, ...paddingXPropertyNames, ...paddingNames];
-const CONTENT_PADDING_RIGHT_KEYS = [...paddingRightPropertyNames, ...paddingXPropertyNames, ...paddingNames];
-const CONTENT_PADDING_TOP_KEYS = [...paddingTopPropertyNames, ...paddingYPropertyNames, ...paddingNames];
-const CONTENT_PADDING_BOTTOM_KEYS = [...paddingBottomPropertyNames, ...paddingYPropertyNames, ...paddingNames];
-export default (paddingProps, isHorizontal) => {
-  const getPaddingProps = paddingKeys => {
-    const key = paddingKeys.find(propName => paddingProps[propName]);
-
-    /* istanbul ignore if */
-    if (!key) {
-      return key;
-    }
-    return paddingProps[key];
-  };
-  return isHorizontal ? {
-    pr: getPaddingProps(CONTENT_PADDING_LEFT_KEYS),
-    pl: getPaddingProps(CONTENT_PADDING_RIGHT_KEYS)
-  } : {
-    pt: getPaddingProps(CONTENT_PADDING_TOP_KEYS),
-    pb: getPaddingProps(CONTENT_PADDING_BOTTOM_KEYS)
-  };
-};
+import{paddingLeftPropertyNames as t,paddingXPropertyNames as r,paddingNames as s,paddingRightPropertyNames as p,paddingTopPropertyNames as e,paddingYPropertyNames as n,paddingBottomPropertyNames as o}from"../../../style/utils/filter-styled-system-padding-props.js";const l=[...t,...r,...s],d=[...p,...r,...s],i=[...e,...n,...s],a=[...o,...n,...s];var f=(t,r)=>{const s=r=>{const s=r.find((r=>t[r]));return s?t[s]:s};return r?{pr:s(l),pl:s(d)}:{pt:s(i),pb:s(a)}};export{f as default};