@preply/ds-docs 2.5.0 → 2.5.1

package/dist/assets/SelectField.stories-ByABCV4u.js

@@ -1,182 +0,0 @@
-import{j as a}from"./jsx-runtime-BTJTZTIL.js";import{r as u}from"./index-Cb9e4tly.js";import{a as c}from"./chunk-D5ZWXAHU-BhFjjRSl.js";import{e as k,u as Ce,a as Re}from"./index-DDyIDR-R.js";import{F as Le}from"./TokyoUILanguage-CLpo5Vdq.js";import{B as P}from"./Button-BqUC5HSd.js";import{I as W}from"./Icon-BheIwZf_.js";import{g as Be}from"./index-DdzHuZ-Y.js";import{w as o}from"./componentNames-s6s-Nnrd.js";import{u as De,I as Oe,s as Pe,F as We}from"./FieldLayoutBase-Cl3m9tA1.js";import{m as _e,a as b,b as f}from"./classNames-BUL1Zq7e.js";import{u as Ke}from"./useForcedRef--iGFM41p.js";import{u as Me}from"./useSelectField-DdxM1zlV.js";import{T as Je}from"./Text-0413ycXu.js";import"./index-ChsGqxH_.js";import"./_commonjsHelpers-Cpj98o6Y.js";import"./v4-CtRu48qb.js";import"./render-icon-BT0Aq7PA.js";import"./ButtonBase-BAooW9wV.js";import"./filterAttributesPassedByRadixUIAtRuntime-B7QTVwVw.js";import"./Spinner-B2C3RkCF.js";import"./defaults-B1rzzf6M.js";import"./useMergeRefs-SFH7Mw4x.js";import"./useHostname-Y3PlXofY.js";import"./index-CC6DAVyL.js";import"./text-accent-DZDDtpIt.js";import"./FieldAdditionalText-DfpPfG3b.js";import"./constants-DL6gdbsq.js";import"./index-D1pfvbUR.js";import"./tslib.es6-BntfKcQG.js";import"./hoist-non-react-statics.cjs-C-Qo8PK8.js";import"./message-B1DLZQ1U.js";import"./text-centered-CznToR0o.js";const p=({...e})=>a.jsx("option",{...e,...Be(void 0,{preplyDsComponent:o.SelectFieldOption})});try{p.displayName="SelectFieldOption",p.__docgenInfo={description:"Use this as a child of `SelectField` to render a `select` option.",displayName:"SelectFieldOption",props:{value:{defaultValue:null,description:"",name:"value",required:!0,type:{name:"string"}},disabled:{defaultValue:null,description:"",name:"disabled",required:!1,type:{name:"enum",value:[{value:"false"},{value:"true"}]}}}}}catch{}const Xe=({onChange:e,onValueChange:n,children:t,placeholder:l,...i},m)=>{const v=_e(Pe,o.Select),r=De(N=>N.target.value,e,n),{required:d}=i,s=typeof l<"u"?a.jsx("option",{value:"",disabled:d,"aria-hidden":!0,children:l}):null,T=a.jsxs(a.Fragment,{children:[s,t]});return a.jsx(Oe,{...i,ref:m,type:"select",className:v.join(" "),onChange:r,preplyDsComponent:o.Select,children:T})},B=u.forwardRef(Xe);try{B.displayName="Select",B.__docgenInfo={description:"",displayName:"Select",props:{dataset:{defaultValue:null,description:"",name:"dataset",required:!1,type:{name:"enum",value:[{value:"Dataset"}]}},placeholder:{defaultValue:null,description:"",name:"placeholder",required:!1,type:{name:"enum",value:[{value:"string"}]}},disabled:{defaultValue:null,description:"",name:"disabled",required:!1,type:{name:"enum",value:[{value:"false"},{value:"true"}]}},onClick:{defaultValue:null,description:"",name:"onClick",required:!1,type:{name:"enum",value:[{value:"MouseEventHandler<Element>"}]}},id:{defaultValue:null,description:"",name:"id",required:!0,type:{name:"string"}},"aria-describedby":{defaultValue:null,description:`Identifies the element (or elements) that describes the object.
-@see aria-labelledby`,name:"aria-describedby",required:!1,type:{name:"enum",value:[{value:"string"}]}},name:{defaultValue:null,description:"",name:"name",required:!1,type:{name:"enum",value:[{value:"string"}]}},required:{defaultValue:null,description:"",name:"required",required:!1,type:{name:"enum",value:[{value:"false"},{value:"true"}]}},hasError:{defaultValue:null,description:"",name:"hasError",required:!1,type:{name:"enum",value:[{value:"false"},{value:"true"}]}},"aria-disabled":{defaultValue:null,description:`Indicates that the element is perceivable but disabled, so it is not editable or otherwise operable.
-@see aria-hidden
-@see aria-readonly.`,name:"aria-disabled",required:!1,type:{name:"enum",value:[{value:"false"},{value:"true"},{value:'"true"'},{value:'"false"'}]}},"aria-invalid":{defaultValue:null,description:`Indicates the entered value does not conform to the format expected by the application.
-@see aria-errormessage.`,name:"aria-invalid",required:!1,type:{name:"enum",value:[{value:"false"},{value:"true"},{value:'"true"'},{value:'"false"'},{value:'"grammar"'},{value:'"spelling"'}]}},"aria-required":{defaultValue:null,description:"Indicates that user input is required on the element before a form may be submitted.",name:"aria-required",required:!1,type:{name:"enum",value:[{value:"false"},{value:"true"},{value:'"true"'},{value:'"false"'}]}},value:{defaultValue:null,description:"",name:"value",required:!1,type:{name:"enum",value:[{value:"string"}]}},defaultValue:{defaultValue:null,description:"",name:"defaultValue",required:!1,type:{name:"enum",value:[{value:"string"}]}},onChange:{defaultValue:null,description:"",name:"onChange",required:!1,type:{name:"enum",value:[{value:"ChangeEventHandler<Element>"}]}},onFocus:{defaultValue:null,description:"",name:"onFocus",required:!1,type:{name:"enum",value:[{value:"FocusEventHandler<Element>"}]}},onBlur:{defaultValue:null,description:"",name:"onBlur",required:!1,type:{name:"enum",value:[{value:"FocusEventHandler<Element>"}]}},onKeyDown:{defaultValue:null,description:"",name:"onKeyDown",required:!1,type:{name:"enum",value:[{value:"KeyboardEventHandler<Element>"}]}},onKeyUp:{defaultValue:null,description:"",name:"onKeyUp",required:!1,type:{name:"enum",value:[{value:"KeyboardEventHandler<Element>"}]}},onCopy:{defaultValue:null,description:"",name:"onCopy",required:!1,type:{name:"enum",value:[{value:"ClipboardEventHandler<Element>"}]}},onPaste:{defaultValue:null,description:"",name:"onPaste",required:!1,type:{name:"enum",value:[{value:"ClipboardEventHandler<Element>"}]}},readOnly:{defaultValue:null,description:"",name:"readOnly",required:!1,type:{name:"enum",value:[{value:"false"},{value:"true"}]}},onValueChange:{defaultValue:null,description:"",name:"onValueChange",required:!1,type:{name:"enum",value:[{value:"ValueChangeEventHandler<string>"}]}},ref:{defaultValue:null,description:"Allows getting a ref to the component instance.\nOnce the component unmounts, React will set `ref.current` to `null`\n(or call the ref with `null` if you passed a callback ref).\n@see {@link https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom React Docs}",name:"ref",required:!1,type:{name:"enum",value:[{value:"null"},{value:"string"},{value:"(instance: InputImperativeHandle | null) => void"},{value:"RefObject<InputImperativeHandle>"}]}},key:{defaultValue:null,description:"",name:"key",required:!1,type:{name:"enum",value:[{value:"null"},{value:"string"},{value:"number"},{value:"bigint"}]}}}}}catch{}const S={"SelectFieldLayout--input":"SelectFieldLayout--input__ogrEq","SelectFieldLayout--icon":"SelectFieldLayout--icon__ggHbN","SelectFieldLayout--dropdown-indicator":"SelectFieldLayout--dropdown-indicator__-xFg9","SelectFieldLayout--has-value":"SelectFieldLayout--has-value__Touz2","SelectFieldLayout--has-icon":"SelectFieldLayout--has-icon__Ned1T","SelectFieldLayout--has-error":"SelectFieldLayout--has-error__O7se1","SelectFieldLayout--is-focused":"SelectFieldLayout--is-focused__RaJEM","SelectFieldLayout--is-disabled":"SelectFieldLayout--is-disabled__s-zOz"},Ae=({title:e,titleId:n,...t},l)=>u.createElement("svg",{xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 24 24",ref:l,"aria-labelledby":n,...t},e?u.createElement("title",{id:n},e):null,u.createElement("path",{fillRule:"evenodd",d:"m12 16-6-5.61L7.487 9 12 13.22 16.513 9 18 10.39 12 16Z",clipRule:"evenodd"})),Ue=u.forwardRef(Ae),ze=({id:e,className:n,input:t,icon:l,disabled:i,isFocused:m,hasError:v,inputHandle:r,onClick:d,hasValue:s,...T},N)=>{const h=u.useRef(null);u.useImperativeHandle(N,()=>({setFocus:()=>r==null?void 0:r.setFocus(),scrollIntoView:()=>{var g;return(g=h==null?void 0:h.current)==null?void 0:g.scrollIntoView()}}));const K=b(S,o.SelectFieldLayout,[f("is-disabled",void 0,i),f("is-focused",void 0,m),f("has-error",void 0,v),f("has-icon",void 0,!!l),f("has-value",void 0,s)]),je=n?[n,...K]:K,He=b(S,o.SelectFieldLayout,["input"]),ke=b(S,o.SelectFieldLayout,["icon"]),Te=b(S,o.SelectFieldLayout,["dropdown-indicator"]),Ne=g=>{r==null||r.setFocus(),d==null||d(g)};return a.jsx(We,{id:e,className:je.join(" "),disabled:i,isFocused:m,hasError:v,hasValue:s,...T,preplyDsComponent:o.SelectFieldLayout,ref:h,children:a.jsxs("div",{className:He.join(" "),onClick:Ne,children:[l&&a.jsx("span",{style:{lineHeight:"initial"},className:ke.join(" "),children:l}),t,a.jsx("span",{style:{lineHeight:"initial"},className:Te.join(" "),children:a.jsx(W,{svg:Ue})})]})})},D=u.forwardRef(ze);try{D.displayName="SelectFieldLayout",D.__docgenInfo={description:"",displayName:"SelectFieldLayout",props:{dataset:{defaultValue:null,description:"",name:"dataset",required:!1,type:{name:"enum",value:[{value:"Dataset"}]}},disabled:{defaultValue:null,description:"",name:"disabled",required:!1,type:{name:"enum",value:[{value:"false"},{value:"true"}]}},preplyDsComponent:{defaultValue:null,description:"@see getDatasetProps",name:"preplyDsComponent",required:!1,type:{name:"enum",value:[{value:"string"}]}},id:{defaultValue:null,description:"",name:"id",required:!0,type:{name:"string"}},label:{defaultValue:null,description:"",name:"label",required:!0,type:{name:"enum",value:[{value:"undefined"},{value:"null"},{value:"string"},{value:"number"},{value:"false"},{value:"true"},{value:"ReactElement<any, string | JSXElementConstructor<any>>"},{value:"Iterable<ReactNode>"},{value:"ReactPortal"}]}},className:{defaultValue:null,description:"",name:"className",required:!1,type:{name:"enum",value:[{value:"string"}]}},hideLabel:{defaultValue:null,description:"",name:"hideLabel",required:!1,type:{name:"enum",value:[{value:"false"},{value:"true"}]}},wrapLabel:{defaultValue:null,description:"",name:"wrapLabel",required:!1,type:{name:"enum",value:[{value:"false"},{value:"true"}]}},required:{defaultValue:null,description:"",name:"required",required:!1,type:{name:"enum",value:[{value:"false"},{value:"true"}]}},requiredLabel:{defaultValue:null,description:"",name:"requiredLabel",required:!1,type:{name:"enum",value:[{value:"null"},{value:"string"},{value:"number"},{value:"false"},{value:"true"},{value:"ReactElement<any, string | JSXElementConstructor<any>>"},{value:"Iterable<ReactNode>"},{value:"ReactPortal"}]}},additionalText:{defaultValue:null,description:"",name:"additionalText",required:!1,type:{name:"enum",value:[{value:"null"},{value:"string"},{value:"number"},{value:"false"},{value:"true"},{value:"ReactElement<any, string | JSXElementConstructor<any>>"},{value:"Iterable<ReactNode>"},{value:"ReactPortal"}]}},preserveSpace:{defaultValue:null,description:"",name:"preserveSpace",required:!1,type:{name:"enum",value:[{value:"false"},{value:"true"}]}},isFocused:{defaultValue:null,description:"",name:"isFocused",required:!1,type:{name:"enum",value:[{value:"false"},{value:"true"}]}},isTouched:{defaultValue:null,description:"",name:"isTouched",required:!1,type:{name:"enum",value:[{value:"false"},{value:"true"}]}},isChanged:{defaultValue:null,description:"",name:"isChanged",required:!1,type:{name:"enum",value:[{value:"false"},{value:"true"}]}},hasValue:{defaultValue:null,description:"",name:"hasValue",required:!1,type:{name:"enum",value:[{value:"false"},{value:"true"}]}},hasError:{defaultValue:null,description:"",name:"hasError",required:!1,type:{name:"enum",value:[{value:"false"},{value:"true"}]}},input:{defaultValue:null,description:"An `<input>` element.",name:"input",required:!0,type:{name:"ReactElement<any, string | JSXElementConstructor<any>>"}},inputHandle:{defaultValue:null,description:"A ref handle to the `<input>` element, used to manage focus when\nclicking on elements within the layout, such as the button and icon.",name:"inputHandle",required:!0,type:{name:"enum",value:[{value:"null"},{value:"InputImperativeHandle"}]}},icon:{defaultValue:null,description:"",name:"icon",required:!1,type:{name:"enum",value:[{value:"ReactElement<IconProps, string | JSXElementConstructor<any>>"}]}},button:{defaultValue:null,description:"",name:"button",required:!1,type:{name:"enum",value:[{value:"ReactElement<FieldButtonProps, string | JSXElementConstructor<any>>"}]}},onClick:{defaultValue:null,description:"",name:"onClick",required:!1,type:{name:"enum",value:[{value:"MouseEventHandler<Element>"}]}},ref:{defaultValue:null,description:"Allows getting a ref to the component instance.\nOnce the component unmounts, React will set `ref.current` to `null`\n(or call the ref with `null` if you passed a callback ref).\n@see {@link https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom React Docs}",name:"ref",required:!1,type:{name:"enum",value:[{value:"null"},{value:"string"},{value:"(instance: InputImperativeHandle | null) => void"},{value:"RefObject<InputImperativeHandle>"}]}},key:{defaultValue:null,description:"",name:"key",required:!1,type:{name:"enum",value:[{value:"null"},{value:"string"},{value:"number"},{value:"bigint"}]}}}}}catch{}const Ye="SelectField__3gpGp",$e={SelectField:Ye},Ge=({id:e,...n},t)=>{const l=u.useRef(null),i=Ke();u.useImperativeHandle(t,()=>({setFocus:()=>{var s;return(s=l==null?void 0:l.current)==null?void 0:s.setFocus()},scrollIntoView:()=>{var s;return(s=l==null?void 0:l.current)==null?void 0:s.scrollIntoView()}}));const{layoutProps:m,inputProps:v}=Me({id:e,...n},o.SelectField),r=_e($e,o.SelectField),d=a.jsx(B,{...v,ref:i});return a.jsx(D,{...m,className:r.join(" "),input:d,inputHandle:i.current,ref:l})},y=u.forwardRef(Ge);try{y.displayName="SelectField",y.__docgenInfo={description:"Use this with `SelectFieldOption`s to render a `select` dropdown.\n\nBy default, this field acts as a controlled field and expects the parent\ncomponent to manage the state, by reacting to user input via the `onChange` or\n`onValueChange` props, and providing the latest state via the `value` prop.\n\nAlternatively, you can use it as an uncontrolled field using the\n`defaultValue` prop instead of the `value` prop.",displayName:"SelectField",props:{id:{defaultValue:null,description:"",name:"id",required:!1,type:{name:"enum",value:[{value:"string"}]}},label:{defaultValue:null,description:"The field label. This is needed for accessibility purposes, but can be\nhidden using the `hideLabel` prop.",name:"label",required:!0,type:{name:"enum",value:[{value:"undefined"},{value:"null"},{value:"string"},{value:"number"},{value:"false"},{value:"true"},{value:"ReactElement<any, string | JSXElementConstructor<any>>"},{value:"Iterable<ReactNode>"},{value:"ReactPortal"}]}},requiredLabel:{defaultValue:null,description:"",name:"requiredLabel",required:!1,type:{name:"enum",value:[{value:"null"},{value:"string"},{value:"number"},{value:"false"},{value:"true"},{value:"ReactElement<any, string | JSXElementConstructor<any>>"},{value:"Iterable<ReactNode>"},{value:"ReactPortal"}]}},hideLabel:{defaultValue:null,description:"Use this to hide the `label` visually, but keep it in the accessibility\ntree.",name:"hideLabel",required:!1,type:{name:"enum",value:[{value:"false"},{value:"true"}]}},wrapLabel:{defaultValue:null,description:"",name:"wrapLabel",required:!1,type:{name:"enum",value:[{value:"false"},{value:"true"}]}},additionalText:{defaultValue:null,description:"",name:"additionalText",required:!1,type:{name:"enum",value:[{value:"null"},{value:"string"},{value:"number"},{value:"false"},{value:"true"},{value:"ReactElement<any, string | JSXElementConstructor<any>>"},{value:"Iterable<ReactNode>"},{value:"ReactPortal"}]}},preserveSpace:{defaultValue:null,description:"",name:"preserveSpace",required:!1,type:{name:"enum",value:[{value:"false"},{value:"true"}]}},hasError:{defaultValue:null,description:"",name:"hasError",required:!1,type:{name:"enum",value:[{value:"false"},{value:"true"}]}},errorMessage:{defaultValue:null,description:"",name:"errorMessage",required:!1,type:{name:"enum",value:[{value:"null"},{value:"string"},{value:"number"},{value:"false"},{value:"true"},{value:"ReactElement<any, string | JSXElementConstructor<any>>"},{value:"Iterable<ReactNode>"},{value:"ReactPortal"}]}},dataset:{defaultValue:null,description:"",name:"dataset",required:!1,type:{name:"enum",value:[{value:"Dataset"}]}},inputDataset:{defaultValue:null,description:"",name:"inputDataset",required:!1,type:{name:"enum",value:[{value:"Dataset"}]}},placeholder:{defaultValue:null,description:"",name:"placeholder",required:!1,type:{name:"enum",value:[{value:"string"}]}},disabled:{defaultValue:null,description:"",name:"disabled",required:!1,type:{name:"enum",value:[{value:"false"},{value:"true"}]}},onClick:{defaultValue:null,description:"",name:"onClick",required:!1,type:{name:"enum",value:[{value:"MouseEventHandler<Element>"}]}},name:{defaultValue:null,description:"",name:"name",required:!1,type:{name:"enum",value:[{value:"string"}]}},required:{defaultValue:null,description:"",name:"required",required:!1,type:{name:"enum",value:[{value:"false"},{value:"true"}]}},value:{defaultValue:null,description:"",name:"value",required:!1,type:{name:"enum",value:[{value:"string"}]}},defaultValue:{defaultValue:null,description:"",name:"defaultValue",required:!1,type:{name:"enum",value:[{value:"string"}]}},onChange:{defaultValue:null,description:"",name:"onChange",required:!1,type:{name:"enum",value:[{value:"ChangeEventHandler<Element>"}]}},onFocus:{defaultValue:null,description:"",name:"onFocus",required:!1,type:{name:"enum",value:[{value:"FocusEventHandler<Element>"}]}},onBlur:{defaultValue:null,description:"",name:"onBlur",required:!1,type:{name:"enum",value:[{value:"FocusEventHandler<Element>"}]}},onKeyDown:{defaultValue:null,description:"",name:"onKeyDown",required:!1,type:{name:"enum",value:[{value:"KeyboardEventHandler<Element>"}]}},onKeyUp:{defaultValue:null,description:"",name:"onKeyUp",required:!1,type:{name:"enum",value:[{value:"KeyboardEventHandler<Element>"}]}},onCopy:{defaultValue:null,description:"",name:"onCopy",required:!1,type:{name:"enum",value:[{value:"ClipboardEventHandler<Element>"}]}},onPaste:{defaultValue:null,description:"",name:"onPaste",required:!1,type:{name:"enum",value:[{value:"ClipboardEventHandler<Element>"}]}},readOnly:{defaultValue:null,description:"",name:"readOnly",required:!1,type:{name:"enum",value:[{value:"false"},{value:"true"}]}},onValueChange:{defaultValue:null,description:"",name:"onValueChange",required:!1,type:{name:"enum",value:[{value:"ValueChangeEventHandler<string>"}]}},icon:{defaultValue:null,description:"",name:"icon",required:!1,type:{name:"enum",value:[{value:"ReactElement<IconProps, string | JSXElementConstructor<any>>"}]}},ref:{defaultValue:null,description:"Allows getting a ref to the component instance.\nOnce the component unmounts, React will set `ref.current` to `null`\n(or call the ref with `null` if you passed a callback ref).\n@see {@link https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom React Docs}",name:"ref",required:!1,type:{name:"enum",value:[{value:"null"},{value:"string"},{value:"(instance: InputImperativeHandle | null) => void"},{value:"RefObject<InputImperativeHandle>"}]}},key:{defaultValue:null,description:"",name:"key",required:!1,type:{name:"enum",value:[{value:"null"},{value:"string"},{value:"number"},{value:"bigint"}]}}}}}catch{}const _a={title:"components/SelectField",component:y,subcomponents:{SelectFieldOption:p},args:{label:"Language",placeholder:"Select a language",defaultValue:"",inputDataset:{testid:"input"},onChange:c("onChange"),onBlur:c("onBlur"),onFocus:c("onFocus"),onClick:c("onClick"),onCopy:c("onCopy"),onKeyDown:c("onKeyDown"),onKeyUp:c("onKeyUp"),onPaste:c("onPaste"),onValueChange:c("onValueChange")},render:function(n){const t=u.useRef(null);return n.ref=t,a.jsxs(y,{...n,children:[a.jsx(p,{value:"english",children:"English"}),a.jsx(p,{value:"spanish",children:"Spanish"}),a.jsx(p,{value:"french",children:"French"})]})}},V={parameters:{docs:{description:{story:"An empty field with a `label` and a `placeholder`."}}}},q={args:{defaultValue:"english"},play:async({canvas:e})=>{const n=e.getByTestId("input");return await k(n).toHaveValue("english"),await Ce.selectOptions(n,"spanish"),k(n).toHaveValue("spanish")}},x={args:{icon:a.jsx(W,{svg:Le})}},E={args:{additionalText:"This is additional text"}},w={args:{required:!0}},F={args:{required:!0,requiredLabel:a.jsx(Je,{accent:"critical",variant:"m-bold",children:"Needed"})}},I={args:{hideLabel:!0}},C={args:{hasError:!0}},R={args:{hasError:!0,errorMessage:"This is an error message"}},L={args:{disabled:!0}},_={decorators:[(e,{args:n})=>a.jsxs("div",{style:{padding:"8px",margin:"8px"},children:[a.jsxs("p",{children:["You can"," ",a.jsx(P,{variant:"secondary",dataset:{testid:"focus-button"},onClick:()=>{var t,l;return(l=(t=n.ref)==null?void 0:t.current)==null?void 0:l.setFocus()},children:"Focus"})," ","the input imperatively."]}),a.jsx(e,{})]})],play:async({args:e,canvas:n})=>{if(!O(e.ref))throw new Error("Expected ref.current to be an InputImperativeHandle");const t=n.getByTestId("input");await Ce.click(n.getByTestId("focus-button")),await Re(()=>k(t).toHaveFocus())}},j={decorators:[(e,{args:n})=>a.jsxs("div",{style:{height:"300px",overflow:"scroll",padding:"8px",margin:"8px"},children:[a.jsxs("p",{children:["You can"," ",a.jsx(P,{variant:"secondary",dataset:{testid:"scroll-button"},onClick:()=>{if(!O(n.ref))throw new Error("Expected ref.current to be an InputImperativeHandle");n.ref.current.scrollIntoView()},children:"Scroll"})," ","the input into view imperatively."]}),a.jsx("div",{style:{height:"1000px",display:"flex",flexDirection:"column",justifyContent:"end",border:"2px dashed lightgray",padding:"16px"},children:a.jsx(e,{})})]})],play:async({args:e,canvas:n})=>{if(!O(e.ref))throw new Error("Expected ref.current to be an InputImperativeHandle");const t=n.getByTestId("input");e.ref.current.scrollIntoView(),await Re(()=>k(t).toBeVisible())}};function O(e){return typeof e=="object"&&e!==null&&"current"in e&&e.current!==null&&typeof e.current=="object"&&"setFocus"in e.current}const H={tags:["!test"],parameters:{docs:{description:{story:'\nThe following code renders a `SelectField` with the `required` flag,\n`placeholder` and some `additionalText`.\n\nWhen you click the "Submit" button, and the input `value` is empty, it:\n\n- Displays feedback via the `errorMessage` prop;\n- Brings the focus back to the field.\n'}},chromatic:{disableSnapshot:!0}},render:function(n){const[t,l]=u.useState(void 0),[i,m]=u.useState(!1),v=i&&!t&&"Please select an option",r=u.useRef(null),d=()=>{var s;m(!0),t||(s=r==null?void 0:r.current)==null||s.setFocus()};return a.jsxs("div",{style:{maxWidth:"500px",display:"flex",flexDirection:"column"},children:[a.jsxs(y,{...n,value:t,required:!0,icon:a.jsx(W,{svg:Le,label:"Student with a hat"}),placeholder:"Select a subject",additionalText:"We will use this to get a personalized choice of tutors",onValueChange:l,errorMessage:v,ref:r,children:[a.jsx(p,{value:"english",children:"English"}),a.jsx(p,{value:"spanish",children:"Spanish"}),a.jsx(p,{value:"french",children:"French"})]}),a.jsx(P,{onClick:()=>d(),children:"Submit"})]})}};var M,J,X;V.parameters={...V.parameters,docs:{...(M=V.parameters)==null?void 0:M.docs,source:{originalSource:`{
-  parameters: {
-    docs: {
-      description: {
-        story: \`An empty field with a \\\`label\\\` and a \\\`placeholder\\\`.\`
-      }
-    }
-  }
-}`,...(X=(J=V.parameters)==null?void 0:J.docs)==null?void 0:X.source}}};var A,U,z;q.parameters={...q.parameters,docs:{...(A=q.parameters)==null?void 0:A.docs,source:{originalSource:`{
-  args: {
-    defaultValue: 'english'
-  },
-  play: async ({
-    canvas
-  }) => {
-    const input = canvas.getByTestId('input');
-    await expect(input).toHaveValue('english');
-    await userEvent.selectOptions(input, 'spanish');
-    return expect(input).toHaveValue('spanish');
-  }
-}`,...(z=(U=q.parameters)==null?void 0:U.docs)==null?void 0:z.source}}};var Y,$,G;x.parameters={...x.parameters,docs:{...(Y=x.parameters)==null?void 0:Y.docs,source:{originalSource:`{
-  args: {
-    icon: <Icon svg={LanguageSvg} />
-  }
-}`,...(G=($=x.parameters)==null?void 0:$.docs)==null?void 0:G.source}}};var Z,Q,ee;E.parameters={...E.parameters,docs:{...(Z=E.parameters)==null?void 0:Z.docs,source:{originalSource:`{
-  args: {
-    additionalText: 'This is additional text'
-  }
-}`,...(ee=(Q=E.parameters)==null?void 0:Q.docs)==null?void 0:ee.source}}};var ae,ne,le;w.parameters={...w.parameters,docs:{...(ae=w.parameters)==null?void 0:ae.docs,source:{originalSource:`{
-  args: {
-    required: true
-  }
-}`,...(le=(ne=w.parameters)==null?void 0:ne.docs)==null?void 0:le.source}}};var te,re,ue;F.parameters={...F.parameters,docs:{...(te=F.parameters)==null?void 0:te.docs,source:{originalSource:`{
-  args: {
-    required: true,
-    requiredLabel: <Text accent="critical" variant="m-bold">
-                Needed
-            </Text>
-  }
-}`,...(ue=(re=F.parameters)==null?void 0:re.docs)==null?void 0:ue.source}}};var se,ie,oe;I.parameters={...I.parameters,docs:{...(se=I.parameters)==null?void 0:se.docs,source:{originalSource:`{
-  args: {
-    hideLabel: true
-  }
-}`,...(oe=(ie=I.parameters)==null?void 0:ie.docs)==null?void 0:oe.source}}};var de,ce,pe;C.parameters={...C.parameters,docs:{...(de=C.parameters)==null?void 0:de.docs,source:{originalSource:`{
-  args: {
-    hasError: true
-  }
-}`,...(pe=(ce=C.parameters)==null?void 0:ce.docs)==null?void 0:pe.source}}};var me,ve,fe;R.parameters={...R.parameters,docs:{...(me=R.parameters)==null?void 0:me.docs,source:{originalSource:`{
-  args: {
-    hasError: true,
-    errorMessage: 'This is an error message'
-  }
-}`,...(fe=(ve=R.parameters)==null?void 0:ve.docs)==null?void 0:fe.source}}};var ye,he,ge;L.parameters={...L.parameters,docs:{...(ye=L.parameters)==null?void 0:ye.docs,source:{originalSource:`{
-  args: {
-    disabled: true
-  }
-}`,...(ge=(he=L.parameters)==null?void 0:he.docs)==null?void 0:ge.source}}};var be,Se,Ve;_.parameters={..._.parameters,docs:{...(be=_.parameters)==null?void 0:be.docs,source:{originalSource:`{
-  decorators: [(Story, {
-    args
-  }) => <div style={{
-    padding: '8px',
-    margin: '8px'
-  }}>
-                <p>
-                    You can{' '}
-                    <Button variant="secondary" dataset={{
-        testid: 'focus-button'
-      }} onClick={() =>
-      // @ts-expect-error - This will fail gracefully,
-      // and the \`play\` function will assert it properly
-      args.ref?.current?.setFocus()}>
-                        Focus
-                    </Button>{' '}
-                    the input imperatively.
-                </p>
-                <Story />
-            </div>],
-  play: async ({
-    args,
-    canvas
-  }) => {
-    if (!isImperativeHandleRef(args.ref)) {
-      throw new Error('Expected ref.current to be an InputImperativeHandle');
-    }
-    const input = canvas.getByTestId('input');
-    await userEvent.click(canvas.getByTestId('focus-button'));
-    await waitFor(() => expect(input).toHaveFocus());
-  }
-}`,...(Ve=(Se=_.parameters)==null?void 0:Se.docs)==null?void 0:Ve.source}}};var qe,xe,Ee;j.parameters={...j.parameters,docs:{...(qe=j.parameters)==null?void 0:qe.docs,source:{originalSource:`{
-  decorators: [(Story, {
-    args
-  }) => <div style={{
-    height: '300px',
-    overflow: 'scroll',
-    padding: '8px',
-    margin: '8px'
-  }}>
-                <p>
-                    You can{' '}
-                    <Button variant="secondary" dataset={{
-        testid: 'scroll-button'
-      }} onClick={() => {
-        if (!isImperativeHandleRef(args.ref)) {
-          throw new Error('Expected ref.current to be an InputImperativeHandle');
-        }
-        args.ref.current.scrollIntoView();
-      }}>
-                        Scroll
-                    </Button>{' '}
-                    the input into view imperatively.
-                </p>
-                <div style={{
-      height: '1000px',
-      display: 'flex',
-      flexDirection: 'column',
-      justifyContent: 'end',
-      border: '2px dashed lightgray',
-      padding: '16px'
-    }}>
-                    <Story />
-                </div>
-            </div>],
-  play: async ({
-    args,
-    canvas
-  }) => {
-    if (!isImperativeHandleRef(args.ref)) {
-      throw new Error('Expected ref.current to be an InputImperativeHandle');
-    }
-    const input = canvas.getByTestId('input');
-    args.ref.current.scrollIntoView();
-    await waitFor(() => expect(input).toBeVisible());
-  }
-}`,...(Ee=(xe=j.parameters)==null?void 0:xe.docs)==null?void 0:Ee.source}}};var we,Fe,Ie;H.parameters={...H.parameters,docs:{...(we=H.parameters)==null?void 0:we.docs,source:{originalSource:`{
-  tags: ['!test'],
-  parameters: {
-    docs: {
-      description: {
-        story: \`
-The following code renders a \\\`SelectField\\\` with the \\\`required\\\` flag,
-\\\`placeholder\\\` and some \\\`additionalText\\\`.
-
-When you click the "Submit" button, and the input \\\`value\\\` is empty, it:
-
-- Displays feedback via the \\\`errorMessage\\\` prop;
-- Brings the focus back to the field.
-\`
-      }
-    },
-    chromatic: {
-      disableSnapshot: true
-    }
-  },
-  render: function Story(args) {
-    const [value, setValue] = useState<string | undefined>(undefined);
-    const [submited, setSubmitted] = useState(false);
-    const errorMessage = submited && !value && 'Please select an option';
-    const fieldRef = useRef<InputImperativeHandle>(null);
-    const handleClick = () => {
-      setSubmitted(true);
-      if (!value) {
-        fieldRef?.current?.setFocus();
-      }
-    };
-    return <div style={{
-      maxWidth: '500px',
-      display: 'flex',
-      flexDirection: 'column'
-    }}>
-                <SelectField {...args} value={value} required icon={<Icon svg={LanguageSvg} label="Student with a hat" />} placeholder="Select a subject" additionalText="We will use this to get a personalized choice of tutors" onValueChange={setValue} errorMessage={errorMessage} ref={fieldRef}>
-                    <SelectFieldOption value="english">English</SelectFieldOption>
-                    <SelectFieldOption value="spanish">Spanish</SelectFieldOption>
-                    <SelectFieldOption value="french">French</SelectFieldOption>
-                </SelectField>
-                <Button onClick={() => handleClick()}>Submit</Button>
-            </div>;
-  }
-}`,...(Ie=(Fe=H.parameters)==null?void 0:Fe.docs)==null?void 0:Ie.source}}};const ja=["Basic","WithValue","WithIcon","WithAdditionalText","Required","RequiredWithCustomLabel","WithHiddenLabel","HasError","HasErrorWithMessage","Disabled","ImperativeSetFocus","ImperativeScrollIntoView","Example"];export{V as Basic,L as Disabled,H as Example,C as HasError,R as HasErrorWithMessage,j as ImperativeScrollIntoView,_ as ImperativeSetFocus,w as Required,F as RequiredWithCustomLabel,E as WithAdditionalText,I as WithHiddenLabel,x as WithIcon,q as WithValue,ja as __namedExportsOrder,_a as default};

package/dist/assets/TextareaField.stories-BLiFTFHK.js

@@ -1,221 +0,0 @@
-import{j as n}from"./jsx-runtime-BTJTZTIL.js";import{r as s}from"./index-Cb9e4tly.js";import{a as r}from"./chunk-D5ZWXAHU-BhFjjRSl.js";import{e as i,u as Fe,a as Re}from"./index-DDyIDR-R.js";import{B as j}from"./Button-BqUC5HSd.js";import{F as Be}from"./FieldLayout-C7WB7-7o.js";import{s as ke,u as je,I as _e}from"./FieldLayoutBase-Cl3m9tA1.js";import{m as ze,s as De}from"./classNames-BUL1Zq7e.js";import{w as p}from"./componentNames-s6s-Nnrd.js";import{u as Le}from"./useForcedRef--iGFM41p.js";import{u as We}from"./useTextareaField-BP4f3uTe.js";import{T as Ke}from"./Text-0413ycXu.js";import"./index-ChsGqxH_.js";import"./_commonjsHelpers-Cpj98o6Y.js";import"./v4-CtRu48qb.js";import"./render-icon-BT0Aq7PA.js";import"./ButtonBase-BAooW9wV.js";import"./filterAttributesPassedByRadixUIAtRuntime-B7QTVwVw.js";import"./Spinner-B2C3RkCF.js";import"./defaults-B1rzzf6M.js";import"./useMergeRefs-SFH7Mw4x.js";import"./useHostname-Y3PlXofY.js";import"./index-DdzHuZ-Y.js";import"./index-CC6DAVyL.js";import"./FieldAdditionalText-DfpPfG3b.js";import"./constants-DL6gdbsq.js";import"./index-D1pfvbUR.js";import"./tslib.es6-BntfKcQG.js";import"./hoist-non-react-statics.cjs-C-Qo8PK8.js";import"./message-B1DLZQ1U.js";import"./constants-BaXVdZRV.js";import"./text-accent-DZDDtpIt.js";import"./text-centered-CznToR0o.js";const z=({onChange:e,onValueChange:a,resize:t="vertical",...l},o)=>{const d=ze(ke,p.Textarea,[De("resize",t)]),u=je(c=>c.target.value,e,a);return n.jsx(_e,{...l,ref:o,type:"textarea",className:d.join(" "),onChange:u,preplyDsComponent:p.Textarea})},B=s.forwardRef(z);try{z.displayName="TextareaLocal",z.__docgenInfo={description:"",displayName:"TextareaLocal",props:{dataset:{defaultValue:null,description:"",name:"dataset",required:!1,type:{name:"enum",value:[{value:"Dataset"}]}},placeholder:{defaultValue:null,description:"",name:"placeholder",required:!1,type:{name:"enum",value:[{value:"string"}]}},disabled:{defaultValue:null,description:"",name:"disabled",required:!1,type:{name:"enum",value:[{value:"false"},{value:"true"}]}},onClick:{defaultValue:null,description:"",name:"onClick",required:!1,type:{name:"enum",value:[{value:"MouseEventHandler<Element>"}]}},id:{defaultValue:null,description:"",name:"id",required:!0,type:{name:"string"}},"aria-describedby":{defaultValue:null,description:`Identifies the element (or elements) that describes the object.
-@see aria-labelledby`,name:"aria-describedby",required:!1,type:{name:"enum",value:[{value:"string"}]}},name:{defaultValue:null,description:"",name:"name",required:!1,type:{name:"enum",value:[{value:"string"}]}},required:{defaultValue:null,description:"",name:"required",required:!1,type:{name:"enum",value:[{value:"false"},{value:"true"}]}},hasError:{defaultValue:null,description:"",name:"hasError",required:!1,type:{name:"enum",value:[{value:"false"},{value:"true"}]}},"aria-disabled":{defaultValue:null,description:`Indicates that the element is perceivable but disabled, so it is not editable or otherwise operable.
-@see aria-hidden
-@see aria-readonly.`,name:"aria-disabled",required:!1,type:{name:"enum",value:[{value:"false"},{value:"true"},{value:'"true"'},{value:'"false"'}]}},"aria-invalid":{defaultValue:null,description:`Indicates the entered value does not conform to the format expected by the application.
-@see aria-errormessage.`,name:"aria-invalid",required:!1,type:{name:"enum",value:[{value:"false"},{value:"true"},{value:'"true"'},{value:'"false"'},{value:'"grammar"'},{value:'"spelling"'}]}},"aria-required":{defaultValue:null,description:"Indicates that user input is required on the element before a form may be submitted.",name:"aria-required",required:!1,type:{name:"enum",value:[{value:"false"},{value:"true"},{value:'"true"'},{value:'"false"'}]}},autoComplete:{defaultValue:null,description:"",name:"autoComplete",required:!1,type:{name:"enum",value:[{value:'"off"'},{value:'"on"'}]}},maxLength:{defaultValue:null,description:"",name:"maxLength",required:!1,type:{name:"enum",value:[{value:"number"}]}},value:{defaultValue:null,description:"",name:"value",required:!1,type:{name:"enum",value:[{value:"string"}]}},defaultValue:{defaultValue:null,description:"",name:"defaultValue",required:!1,type:{name:"enum",value:[{value:"string"}]}},onChange:{defaultValue:null,description:"",name:"onChange",required:!1,type:{name:"enum",value:[{value:"ChangeEventHandler<Element>"}]}},onFocus:{defaultValue:null,description:"",name:"onFocus",required:!1,type:{name:"enum",value:[{value:"FocusEventHandler<Element>"}]}},onBlur:{defaultValue:null,description:"",name:"onBlur",required:!1,type:{name:"enum",value:[{value:"FocusEventHandler<Element>"}]}},onKeyDown:{defaultValue:null,description:"",name:"onKeyDown",required:!1,type:{name:"enum",value:[{value:"KeyboardEventHandler<Element>"}]}},onKeyUp:{defaultValue:null,description:"",name:"onKeyUp",required:!1,type:{name:"enum",value:[{value:"KeyboardEventHandler<Element>"}]}},onCopy:{defaultValue:null,description:"",name:"onCopy",required:!1,type:{name:"enum",value:[{value:"ClipboardEventHandler<Element>"}]}},onPaste:{defaultValue:null,description:"",name:"onPaste",required:!1,type:{name:"enum",value:[{value:"ClipboardEventHandler<Element>"}]}},readOnly:{defaultValue:null,description:"",name:"readOnly",required:!1,type:{name:"enum",value:[{value:"false"},{value:"true"}]}},rows:{defaultValue:null,description:"",name:"rows",required:!1,type:{name:"enum",value:[{value:"number"}]}},resize:{defaultValue:{value:"vertical"},description:"",name:"resize",required:!1,type:{name:"enum",value:[{value:'"none"'},{value:'"vertical"'},{value:'"horizontal"'},{value:'"both"'}]}},onValueChange:{defaultValue:null,description:"",name:"onValueChange",required:!1,type:{name:"enum",value:[{value:"ValueChangeEventHandler<string>"}]}}}}}catch{}try{B.displayName="Textarea",B.__docgenInfo={description:"",displayName:"Textarea",props:{dataset:{defaultValue:null,description:"",name:"dataset",required:!1,type:{name:"enum",value:[{value:"Dataset"}]}},placeholder:{defaultValue:null,description:"",name:"placeholder",required:!1,type:{name:"enum",value:[{value:"string"}]}},disabled:{defaultValue:null,description:"",name:"disabled",required:!1,type:{name:"enum",value:[{value:"false"},{value:"true"}]}},onClick:{defaultValue:null,description:"",name:"onClick",required:!1,type:{name:"enum",value:[{value:"MouseEventHandler<Element>"}]}},id:{defaultValue:null,description:"",name:"id",required:!0,type:{name:"string"}},"aria-describedby":{defaultValue:null,description:`Identifies the element (or elements) that describes the object.
-@see aria-labelledby`,name:"aria-describedby",required:!1,type:{name:"enum",value:[{value:"string"}]}},name:{defaultValue:null,description:"",name:"name",required:!1,type:{name:"enum",value:[{value:"string"}]}},required:{defaultValue:null,description:"",name:"required",required:!1,type:{name:"enum",value:[{value:"false"},{value:"true"}]}},hasError:{defaultValue:null,description:"",name:"hasError",required:!1,type:{name:"enum",value:[{value:"false"},{value:"true"}]}},"aria-disabled":{defaultValue:null,description:`Indicates that the element is perceivable but disabled, so it is not editable or otherwise operable.
-@see aria-hidden
-@see aria-readonly.`,name:"aria-disabled",required:!1,type:{name:"enum",value:[{value:"false"},{value:"true"},{value:'"true"'},{value:'"false"'}]}},"aria-invalid":{defaultValue:null,description:`Indicates the entered value does not conform to the format expected by the application.
-@see aria-errormessage.`,name:"aria-invalid",required:!1,type:{name:"enum",value:[{value:"false"},{value:"true"},{value:'"true"'},{value:'"false"'},{value:'"grammar"'},{value:'"spelling"'}]}},"aria-required":{defaultValue:null,description:"Indicates that user input is required on the element before a form may be submitted.",name:"aria-required",required:!1,type:{name:"enum",value:[{value:"false"},{value:"true"},{value:'"true"'},{value:'"false"'}]}},autoComplete:{defaultValue:null,description:"",name:"autoComplete",required:!1,type:{name:"enum",value:[{value:'"off"'},{value:'"on"'}]}},maxLength:{defaultValue:null,description:"",name:"maxLength",required:!1,type:{name:"enum",value:[{value:"number"}]}},value:{defaultValue:null,description:"",name:"value",required:!1,type:{name:"enum",value:[{value:"string"}]}},defaultValue:{defaultValue:null,description:"",name:"defaultValue",required:!1,type:{name:"enum",value:[{value:"string"}]}},onChange:{defaultValue:null,description:"",name:"onChange",required:!1,type:{name:"enum",value:[{value:"ChangeEventHandler<Element>"}]}},onFocus:{defaultValue:null,description:"",name:"onFocus",required:!1,type:{name:"enum",value:[{value:"FocusEventHandler<Element>"}]}},onBlur:{defaultValue:null,description:"",name:"onBlur",required:!1,type:{name:"enum",value:[{value:"FocusEventHandler<Element>"}]}},onKeyDown:{defaultValue:null,description:"",name:"onKeyDown",required:!1,type:{name:"enum",value:[{value:"KeyboardEventHandler<Element>"}]}},onKeyUp:{defaultValue:null,description:"",name:"onKeyUp",required:!1,type:{name:"enum",value:[{value:"KeyboardEventHandler<Element>"}]}},onCopy:{defaultValue:null,description:"",name:"onCopy",required:!1,type:{name:"enum",value:[{value:"ClipboardEventHandler<Element>"}]}},onPaste:{defaultValue:null,description:"",name:"onPaste",required:!1,type:{name:"enum",value:[{value:"ClipboardEventHandler<Element>"}]}},readOnly:{defaultValue:null,description:"",name:"readOnly",required:!1,type:{name:"enum",value:[{value:"false"},{value:"true"}]}},rows:{defaultValue:null,description:"",name:"rows",required:!1,type:{name:"enum",value:[{value:"number"}]}},resize:{defaultValue:{value:"vertical"},description:"",name:"resize",required:!1,type:{name:"enum",value:[{value:'"none"'},{value:'"vertical"'},{value:'"horizontal"'},{value:'"both"'}]}},onValueChange:{defaultValue:null,description:"",name:"onValueChange",required:!1,type:{name:"enum",value:[{value:"ValueChangeEventHandler<string>"}]}},ref:{defaultValue:null,description:"Allows getting a ref to the component instance.\nOnce the component unmounts, React will set `ref.current` to `null`\n(or call the ref with `null` if you passed a callback ref).\n@see {@link https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom React Docs}",name:"ref",required:!1,type:{name:"enum",value:[{value:"null"},{value:"string"},{value:"(instance: InputImperativeHandle | null) => void"},{value:"RefObject<InputImperativeHandle>"}]}},key:{defaultValue:null,description:"",name:"key",required:!1,type:{name:"enum",value:[{value:"null"},{value:"string"},{value:"number"},{value:"bigint"}]}}}}}catch{}const Ne="TextareaField__Wpx9P",Me={TextareaField:Ne},Pe=({id:e,...a},t)=>{const l=s.useRef(null),o=Le();s.useImperativeHandle(t,()=>({setFocus:()=>{var m;return(m=l==null?void 0:l.current)==null?void 0:m.setFocus()},scrollIntoView:()=>{var m;return(m=l==null?void 0:l.current)==null?void 0:m.scrollIntoView()}}));const{layoutProps:d,inputProps:u}=We({id:e,...a},p.TextareaField),c=ze(Me,p.TextareaField),f=n.jsx(B,{...u,ref:o});return n.jsx(Be,{...d,className:c.join(" "),input:f,inputHandle:o.current,ref:l,preplyDsComponent:p.TextareaField})},v=s.forwardRef(Pe);try{v.displayName="TextareaField",v.__docgenInfo={description:"",displayName:"TextareaField",props:{id:{defaultValue:null,description:"",name:"id",required:!1,type:{name:"enum",value:[{value:"string"}]}},label:{defaultValue:null,description:"The field label. This is needed for accessibility purposes, but can be\nhidden using the `hideLabel` prop.",name:"label",required:!0,type:{name:"enum",value:[{value:"undefined"},{value:"null"},{value:"string"},{value:"number"},{value:"false"},{value:"true"},{value:"ReactElement<any, string | JSXElementConstructor<any>>"},{value:"Iterable<ReactNode>"},{value:"ReactPortal"}]}},requiredLabel:{defaultValue:null,description:"",name:"requiredLabel",required:!1,type:{name:"enum",value:[{value:"null"},{value:"string"},{value:"number"},{value:"false"},{value:"true"},{value:"ReactElement<any, string | JSXElementConstructor<any>>"},{value:"Iterable<ReactNode>"},{value:"ReactPortal"}]}},hideLabel:{defaultValue:null,description:"Use this to hide the `label` visually, but keep it in the accessibility\ntree.",name:"hideLabel",required:!1,type:{name:"enum",value:[{value:"false"},{value:"true"}]}},wrapLabel:{defaultValue:null,description:"",name:"wrapLabel",required:!1,type:{name:"enum",value:[{value:"false"},{value:"true"}]}},additionalText:{defaultValue:null,description:"",name:"additionalText",required:!1,type:{name:"enum",value:[{value:"null"},{value:"string"},{value:"number"},{value:"false"},{value:"true"},{value:"ReactElement<any, string | JSXElementConstructor<any>>"},{value:"Iterable<ReactNode>"},{value:"ReactPortal"}]}},preserveSpace:{defaultValue:null,description:"",name:"preserveSpace",required:!1,type:{name:"enum",value:[{value:"false"},{value:"true"}]}},hasError:{defaultValue:null,description:"",name:"hasError",required:!1,type:{name:"enum",value:[{value:"false"},{value:"true"}]}},errorMessage:{defaultValue:null,description:"",name:"errorMessage",required:!1,type:{name:"enum",value:[{value:"null"},{value:"string"},{value:"number"},{value:"false"},{value:"true"},{value:"ReactElement<any, string | JSXElementConstructor<any>>"},{value:"Iterable<ReactNode>"},{value:"ReactPortal"}]}},dataset:{defaultValue:null,description:"",name:"dataset",required:!1,type:{name:"enum",value:[{value:"Dataset"}]}},inputDataset:{defaultValue:null,description:"",name:"inputDataset",required:!1,type:{name:"enum",value:[{value:"Dataset"}]}},placeholder:{defaultValue:null,description:"",name:"placeholder",required:!1,type:{name:"enum",value:[{value:"string"}]}},disabled:{defaultValue:null,description:"",name:"disabled",required:!1,type:{name:"enum",value:[{value:"false"},{value:"true"}]}},onClick:{defaultValue:null,description:"",name:"onClick",required:!1,type:{name:"enum",value:[{value:"MouseEventHandler<Element>"}]}},name:{defaultValue:null,description:"",name:"name",required:!1,type:{name:"enum",value:[{value:"string"}]}},required:{defaultValue:null,description:"",name:"required",required:!1,type:{name:"enum",value:[{value:"false"},{value:"true"}]}},autoComplete:{defaultValue:null,description:"",name:"autoComplete",required:!1,type:{name:"enum",value:[{value:'"off"'},{value:'"on"'}]}},maxLength:{defaultValue:null,description:"",name:"maxLength",required:!1,type:{name:"enum",value:[{value:"number"}]}},value:{defaultValue:null,description:"",name:"value",required:!1,type:{name:"enum",value:[{value:"string"}]}},defaultValue:{defaultValue:null,description:"",name:"defaultValue",required:!1,type:{name:"enum",value:[{value:"string"}]}},onChange:{defaultValue:null,description:"",name:"onChange",required:!1,type:{name:"enum",value:[{value:"ChangeEventHandler<Element>"}]}},onFocus:{defaultValue:null,description:"",name:"onFocus",required:!1,type:{name:"enum",value:[{value:"FocusEventHandler<Element>"}]}},onBlur:{defaultValue:null,description:"",name:"onBlur",required:!1,type:{name:"enum",value:[{value:"FocusEventHandler<Element>"}]}},onKeyDown:{defaultValue:null,description:"",name:"onKeyDown",required:!1,type:{name:"enum",value:[{value:"KeyboardEventHandler<Element>"}]}},onKeyUp:{defaultValue:null,description:"",name:"onKeyUp",required:!1,type:{name:"enum",value:[{value:"KeyboardEventHandler<Element>"}]}},onCopy:{defaultValue:null,description:"",name:"onCopy",required:!1,type:{name:"enum",value:[{value:"ClipboardEventHandler<Element>"}]}},onPaste:{defaultValue:null,description:"",name:"onPaste",required:!1,type:{name:"enum",value:[{value:"ClipboardEventHandler<Element>"}]}},readOnly:{defaultValue:null,description:"",name:"readOnly",required:!1,type:{name:"enum",value:[{value:"false"},{value:"true"}]}},onValueChange:{defaultValue:null,description:"",name:"onValueChange",required:!1,type:{name:"enum",value:[{value:"ValueChangeEventHandler<string>"}]}},rows:{defaultValue:null,description:"",name:"rows",required:!1,type:{name:"enum",value:[{value:"number"}]}},resize:{defaultValue:null,description:"",name:"resize",required:!1,type:{name:"enum",value:[{value:'"none"'},{value:'"vertical"'},{value:'"horizontal"'},{value:'"both"'}]}},ref:{defaultValue:null,description:"Allows getting a ref to the component instance.\nOnce the component unmounts, React will set `ref.current` to `null`\n(or call the ref with `null` if you passed a callback ref).\n@see {@link https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom React Docs}",name:"ref",required:!1,type:{name:"enum",value:[{value:"null"},{value:"string"},{value:"(instance: InputImperativeHandle | null) => void"},{value:"RefObject<InputImperativeHandle>"}]}},key:{defaultValue:null,description:"",name:"key",required:!1,type:{name:"enum",value:[{value:"null"},{value:"string"},{value:"number"},{value:"bigint"}]}}}}}catch{}const Ea={title:"components/TextareaField",component:v,args:{label:"Textarea",defaultValue:"",placeholder:"Enter text here",inputDataset:{testid:"input"},onChange:r("onChange"),onBlur:r("onBlur"),onFocus:r("onFocus"),onClick:r("onClick"),onCopy:r("onCopy"),onKeyDown:r("onKeyDown"),onKeyUp:r("onKeyUp"),onPaste:r("onPaste"),onValueChange:r("onValueChange")},render:function(a){const t=s.useRef(null);return a.ref=t,n.jsx(v,{...a})}},y={parameters:{docs:{description:{story:"An empty field with a `label` and a `placeholder`."}}}},h={args:{defaultValue:"Hey, you!"},play:async({canvas:e})=>{const a=e.getByTestId("input");return await i(a).toHaveValue("Hey, you!"),await Fe.type(a," How's it going?"),i(a).toHaveValue("Hey, you! How's it going?")}},g={args:{defaultValue:"Hey, you!",resize:"both"},play:({canvas:e})=>{const a=e.getByTestId("input");i(a).toHaveStyle({resize:"both"})}},b={args:{defaultValue:"Hey, you!",resize:"vertical"},play:({canvas:e})=>{const a=e.getByTestId("input");i(a).toHaveStyle({resize:"vertical"})}},V={args:{defaultValue:"Hey, you!",resize:"horizontal"},play:({canvas:e})=>{const a=e.getByTestId("input");i(a).toHaveStyle({resize:"horizontal"})}},x={args:{additionalText:"This is additional text"}},q={args:{required:!0}},E={args:{required:!0,requiredLabel:n.jsx(Ke,{accent:"critical",variant:"m-bold",children:"Needed"})}},H={args:{hideLabel:!0}},w={args:{hasError:!0}},C={args:{hasError:!0,errorMessage:"This is an error message"}},I={args:{disabled:!0}},T={args:{readOnly:!0}},S={decorators:[(e,{args:a})=>n.jsxs("div",{style:{padding:"8px",margin:"8px"},children:[n.jsxs("p",{children:["You can"," ",n.jsx(j,{variant:"secondary",dataset:{testid:"focus-button"},onClick:()=>{var t,l;return(l=(t=a.ref)==null?void 0:t.current)==null?void 0:l.setFocus()},children:"Focus"})," ","the input imperatively."]}),n.jsx(e,{})]})],play:async({args:e,canvas:a})=>{if(!k(e.ref))throw new Error("Expected ref.current to be an InputImperativeHandle");const t=a.getByTestId("input");await Fe.click(a.getByTestId("focus-button")),await Re(()=>i(t).toHaveFocus())}},F={decorators:[(e,{args:a})=>n.jsxs("div",{style:{height:"300px",overflow:"scroll",padding:"8px",margin:"8px"},children:[n.jsxs("p",{children:["You can"," ",n.jsx(j,{variant:"secondary",dataset:{testid:"scroll-button"},onClick:()=>{if(!k(a.ref))throw new Error("Expected ref.current to be an InputImperativeHandle");a.ref.current.scrollIntoView()},children:"Scroll"})," ","the input into view imperatively."]}),n.jsx("div",{style:{height:"1000px",display:"flex",flexDirection:"column",justifyContent:"end",border:"2px dashed lightgray",padding:"16px"},children:n.jsx(e,{})})]})],play:async({args:e,canvas:a})=>{if(!k(e.ref))throw new Error("Expected ref.current to be an InputImperativeHandle");const t=a.getByTestId("input");e.ref.current.scrollIntoView(),await Re(()=>i(t).toBeVisible())}};function k(e){return typeof e=="object"&&e!==null&&"current"in e&&e.current!==null&&typeof e.current=="object"&&"setFocus"in e.current}const R={tags:["!test"],parameters:{docs:{description:{story:'\nThe following code renders a `TextareaField` with the `required` flag, a\n`button`, `placeholder` and some `additionalText`.\n\nWhen you click the "Submit" button, and the input `value` is empty:\n\n- Displays feedback via the `errorMessage` prop;\n- Brings the focus back to the field.\n'}},chromatic:{disableSnapshot:!0}},render:function(){const[a,t]=s.useState(""),[l,o]=s.useState(!1),d=l&&!a&&"Please provide your full name",u=s.useRef(null),c=()=>{var f;o(!0),a||(f=u==null?void 0:u.current)==null||f.setFocus()};return n.jsxs("div",{style:{maxWidth:"500px",display:"flex",flexDirection:"column"},children:[n.jsx(v,{value:a,label:"Full name",required:!0,placeholder:"e.g.: Mary Williams",additionalText:"Will be shown in your profile",onValueChange:t,errorMessage:d,ref:u,resize:"horizontal"}),n.jsx(j,{onClick:c,children:"Submit"})]})}};var _,D,L;y.parameters={...y.parameters,docs:{...(_=y.parameters)==null?void 0:_.docs,source:{originalSource:`{
-  parameters: {
-    docs: {
-      description: {
-        story: \`An empty field with a \\\`label\\\` and a \\\`placeholder\\\`.\`
-      }
-    }
-  }
-}`,...(L=(D=y.parameters)==null?void 0:D.docs)==null?void 0:L.source}}};var W,K,N;h.parameters={...h.parameters,docs:{...(W=h.parameters)==null?void 0:W.docs,source:{originalSource:`{
-  args: {
-    defaultValue: 'Hey, you!'
-  },
-  play: async ({
-    canvas
-  }) => {
-    const input = canvas.getByTestId('input');
-    await expect(input).toHaveValue('Hey, you!');
-    await userEvent.type(input, " How's it going?");
-    return expect(input).toHaveValue("Hey, you! How's it going?");
-  }
-}`,...(N=(K=h.parameters)==null?void 0:K.docs)==null?void 0:N.source}}};var M,P,O;g.parameters={...g.parameters,docs:{...(M=g.parameters)==null?void 0:M.docs,source:{originalSource:`{
-  args: {
-    defaultValue: 'Hey, you!',
-    resize: 'both'
-  },
-  play: ({
-    canvas
-  }) => {
-    const textarea = canvas.getByTestId('input');
-    expect(textarea).toHaveStyle({
-      resize: 'both'
-    });
-  }
-}`,...(O=(P=g.parameters)==null?void 0:P.docs)==null?void 0:O.source}}};var U,A,J;b.parameters={...b.parameters,docs:{...(U=b.parameters)==null?void 0:U.docs,source:{originalSource:`{
-  args: {
-    defaultValue: 'Hey, you!',
-    resize: 'vertical'
-  },
-  play: ({
-    canvas
-  }) => {
-    const textarea = canvas.getByTestId('input');
-    expect(textarea).toHaveStyle({
-      resize: 'vertical'
-    });
-  }
-}`,...(J=(A=b.parameters)==null?void 0:A.docs)==null?void 0:J.source}}};var X,Y,$;V.parameters={...V.parameters,docs:{...(X=V.parameters)==null?void 0:X.docs,source:{originalSource:`{
-  args: {
-    defaultValue: 'Hey, you!',
-    resize: 'horizontal'
-  },
-  play: ({
-    canvas
-  }) => {
-    const textarea = canvas.getByTestId('input');
-    expect(textarea).toHaveStyle({
-      resize: 'horizontal'
-    });
-  }
-}`,...($=(Y=V.parameters)==null?void 0:Y.docs)==null?void 0:$.source}}};var G,Q,Z;x.parameters={...x.parameters,docs:{...(G=x.parameters)==null?void 0:G.docs,source:{originalSource:`{
-  args: {
-    additionalText: 'This is additional text'
-  }
-}`,...(Z=(Q=x.parameters)==null?void 0:Q.docs)==null?void 0:Z.source}}};var ee,ae,ne;q.parameters={...q.parameters,docs:{...(ee=q.parameters)==null?void 0:ee.docs,source:{originalSource:`{
-  args: {
-    required: true
-  }
-}`,...(ne=(ae=q.parameters)==null?void 0:ae.docs)==null?void 0:ne.source}}};var te,le,re;E.parameters={...E.parameters,docs:{...(te=E.parameters)==null?void 0:te.docs,source:{originalSource:`{
-  args: {
-    required: true,
-    requiredLabel: <Text accent="critical" variant="m-bold">
-                Needed
-            </Text>
-  }
-}`,...(re=(le=E.parameters)==null?void 0:le.docs)==null?void 0:re.source}}};var ue,se,ie;H.parameters={...H.parameters,docs:{...(ue=H.parameters)==null?void 0:ue.docs,source:{originalSource:`{
-  args: {
-    hideLabel: true
-  }
-}`,...(ie=(se=H.parameters)==null?void 0:se.docs)==null?void 0:ie.source}}};var oe,de,ce;w.parameters={...w.parameters,docs:{...(oe=w.parameters)==null?void 0:oe.docs,source:{originalSource:`{
-  args: {
-    hasError: true
-  }
-}`,...(ce=(de=w.parameters)==null?void 0:de.docs)==null?void 0:ce.source}}};var me,pe,ve;C.parameters={...C.parameters,docs:{...(me=C.parameters)==null?void 0:me.docs,source:{originalSource:`{
-  args: {
-    hasError: true,
-    errorMessage: 'This is an error message'
-  }
-}`,...(ve=(pe=C.parameters)==null?void 0:pe.docs)==null?void 0:ve.source}}};var fe,ye,he;I.parameters={...I.parameters,docs:{...(fe=I.parameters)==null?void 0:fe.docs,source:{originalSource:`{
-  args: {
-    disabled: true
-  }
-}`,...(he=(ye=I.parameters)==null?void 0:ye.docs)==null?void 0:he.source}}};var ge,be,Ve;T.parameters={...T.parameters,docs:{...(ge=T.parameters)==null?void 0:ge.docs,source:{originalSource:`{
-  args: {
-    readOnly: true
-  }
-}`,...(Ve=(be=T.parameters)==null?void 0:be.docs)==null?void 0:Ve.source}}};var xe,qe,Ee;S.parameters={...S.parameters,docs:{...(xe=S.parameters)==null?void 0:xe.docs,source:{originalSource:`{
-  decorators: [(Story, {
-    args
-  }) => <div style={{
-    padding: '8px',
-    margin: '8px'
-  }}>
-                <p>
-                    You can{' '}
-                    <Button variant="secondary" dataset={{
-        testid: 'focus-button'
-      }} onClick={() =>
-      // @ts-expect-error - This will fail gracefully,
-      // and the \`play\` function will assert it properly
-      args.ref?.current?.setFocus()}>
-                        Focus
-                    </Button>{' '}
-                    the input imperatively.
-                </p>
-                <Story />
-            </div>],
-  play: async ({
-    args,
-    canvas
-  }) => {
-    if (!isImperativeHandleRef(args.ref)) {
-      throw new Error('Expected ref.current to be an InputImperativeHandle');
-    }
-    const input = canvas.getByTestId('input');
-    await userEvent.click(canvas.getByTestId('focus-button'));
-    await waitFor(() => expect(input).toHaveFocus());
-  }
-}`,...(Ee=(qe=S.parameters)==null?void 0:qe.docs)==null?void 0:Ee.source}}};var He,we,Ce;F.parameters={...F.parameters,docs:{...(He=F.parameters)==null?void 0:He.docs,source:{originalSource:`{
-  decorators: [(Story, {
-    args
-  }) => <div style={{
-    height: '300px',
-    overflow: 'scroll',
-    padding: '8px',
-    margin: '8px'
-  }}>
-                <p>
-                    You can{' '}
-                    <Button variant="secondary" dataset={{
-        testid: 'scroll-button'
-      }} onClick={() => {
-        if (!isImperativeHandleRef(args.ref)) {
-          throw new Error('Expected ref.current to be an InputImperativeHandle');
-        }
-        args.ref.current.scrollIntoView();
-      }}>
-                        Scroll
-                    </Button>{' '}
-                    the input into view imperatively.
-                </p>
-                <div style={{
-      height: '1000px',
-      display: 'flex',
-      flexDirection: 'column',
-      justifyContent: 'end',
-      border: '2px dashed lightgray',
-      padding: '16px'
-    }}>
-                    <Story />
-                </div>
-            </div>],
-  play: async ({
-    args,
-    canvas
-  }) => {
-    if (!isImperativeHandleRef(args.ref)) {
-      throw new Error('Expected ref.current to be an InputImperativeHandle');
-    }
-    const input = canvas.getByTestId('input');
-    args.ref.current.scrollIntoView();
-    await waitFor(() => expect(input).toBeVisible());
-  }
-}`,...(Ce=(we=F.parameters)==null?void 0:we.docs)==null?void 0:Ce.source}}};var Ie,Te,Se;R.parameters={...R.parameters,docs:{...(Ie=R.parameters)==null?void 0:Ie.docs,source:{originalSource:`{
-  tags: ['!test'],
-  parameters: {
-    docs: {
-      description: {
-        story: \`
-The following code renders a \\\`TextareaField\\\` with the \\\`required\\\` flag, a
-\\\`button\\\`, \\\`placeholder\\\` and some \\\`additionalText\\\`.
-
-When you click the "Submit" button, and the input \\\`value\\\` is empty:
-
-- Displays feedback via the \\\`errorMessage\\\` prop;
-- Brings the focus back to the field.
-\`
-      }
-    },
-    chromatic: {
-      disableSnapshot: true
-    }
-  },
-  render: function Story() {
-    const [value, setValue] = useState('');
-    const [submited, setSubmitted] = useState(false);
-    const errorMessage = submited && !value && 'Please provide your full name';
-    const fieldRef = useRef<InputImperativeHandle>(null);
-    const handleClick = () => {
-      setSubmitted(true);
-      if (!value) {
-        fieldRef?.current?.setFocus();
-      }
-    };
-    return <div style={{
-      maxWidth: '500px',
-      display: 'flex',
-      flexDirection: 'column'
-    }}>
-                <TextareaField value={value} label="Full name" required placeholder="e.g.: Mary Williams" additionalText="Will be shown in your profile" onValueChange={setValue} errorMessage={errorMessage} ref={fieldRef} resize="horizontal" />
-                <Button onClick={handleClick}>Submit</Button>
-            </div>;
-  }
-}`,...(Se=(Te=R.parameters)==null?void 0:Te.docs)==null?void 0:Se.source}}};const Ha=["Basic","WithValue","WithResize","WithVerticalResize","WithHorizontalResize","WithAdditionalText","Required","RequiredWithCustomLabel","WithHiddenLabel","HasError","HasErrorWithMessage","Disabled","ReadOnly","ImperativeSetFocus","ImperativeScrollIntoView","Example"];export{y as Basic,I as Disabled,R as Example,w as HasError,C as HasErrorWithMessage,F as ImperativeScrollIntoView,S as ImperativeSetFocus,T as ReadOnly,q as Required,E as RequiredWithCustomLabel,x as WithAdditionalText,H as WithHiddenLabel,V as WithHorizontalResize,g as WithResize,h as WithValue,b as WithVerticalResize,Ha as __namedExportsOrder,Ea as default};