@okta/odyssey-react-mui 1.47.1 → 1.48.0

package/dist/assets/NativeSelect.stories-BIRwQlHa.js

@@ -1,173 +0,0 @@
-import{j as e}from"./jsx-runtime-CnH95YSl.js";import{r as n}from"./index-NdkWRN8K.js";import{O as Oe}from"./OdysseyStorybookThemeDecorator-BRjYVaUu.js";import{f as i}from"./fieldComponentPropsMetaData-BqbNLw6V.js";import{M as De}from"./Field-lyECanzU.js";import{g as Fe,u as He}from"./inputUtils-Dbi8XkA6.js";import{S as Ne}from"./Select-9yKLDVKS.js";import{M as Ae}from"./Link-DI6v1ROk.js";import"./_commonjsHelpers-gnU0ypJ3.js";import"./OdysseyThemeProvider-BBwjgzn2.js";import"./index-BJTM6NaI.js";import"./OdysseyProvider-2xjMTEu6.js";import"./Box-BGpAHVQV.js";import"./Box-CWTB5xfE.js";import"./List-Be7fhh4_.js";import"./ListItem-C8ebNPnP.js";import"./utils-iop7lDec.js";import"./useFormControl-BMISTZuX.js";import"./FormLabel-BLj3hKkg.js";import"./useIsFocusVisible-DH0qxT5e.js";import"./isHostComponent-DVu5iVWx.js";import"./ButtonBase-BAQsCgRq.js";import"./TransitionGroupContext-DLI0IzWy.js";import"./ScreenReaderText-CM78bF1y.js";import"./visuallyHidden-Dan1xhjv.js";import"./FormHelperText-qF3DX-zz.js";import"./FieldHint-C3tXb7u4.js";import"./Typography-DfSdXC7o.js";import"./Typography-Yf1Zkad_.js";import"./useUniqueId-Bsgqe1tm.js";import"./createUniqueId-ByTaVY63.js";import"./Menu-CHod3UUY.js";import"./Portal-GAJY6Au9.js";import"./resolveComponentProps-BzfJewMt.js";import"./index-B5xazMy1.js";import"./index-DieBXP3Z.js";import"./Grow-DacPmog-.js";import"./utils-DkZjDCLm.js";import"./ownerDocument-DW-IO8s5.js";import"./ownerWindow-HkKU3E4x.js";import"./debounce-Be36O1Ab.js";import"./Modal-B1-40kNg.js";import"./getScrollbarSize-Bqq2hMjQ.js";import"./createChainedFunction-BO_9K8Jh.js";import"./Fade-CVbWKXvx.js";import"./Paper-XsV8SWR9.js";import"./MenuList-CW8ri5AI.js";import"./useControlled-NQulfz4l.js";import"./ArrowDropDown-LYMnJjPD.js";import"./createSvgIcon-DsUj6UQo.js";import"./InputBase-DSZ9ZgyW.js";import"./Link-BnBknBcu.js";import"./ExternalLink-BZ-Yczsk.js";const Ge=n.forwardRef(({ariaDescribedBy:c,autoCompleteType:o,defaultValue:r,errorMessage:l,errorMessageList:s,hasMultipleChoices:a,hint:h,HintLinkComponent:t,id:m,inputRef:Se,isDisabled:Me=!1,isFullWidth:Le=!1,isMultiSelect:w,isOptional:Ee=!1,label:Te,onBlur:k,onChange:v,onFocus:O,testId:D,translate:F,value:H,children:N},A)=>{const Ve=n.useRef(Fe({controlledValue:H,uncontrolledValue:r})),G=n.useRef(null);n.useImperativeHandle(Se,()=>({focus:()=>{var d;(d=G.current)==null||d.focus()}}),[]);const P=He({defaultValue:r,value:H,controlState:Ve.current}),R=n.useCallback((d,V)=>{v==null||v(d,V)},[v]),W=n.useMemo(()=>a===void 0?w:a,[a,w]),we=n.useCallback(({ariaDescribedBy:d,errorMessageElementId:V,labelElementId:ke})=>e.jsx(Ne,{...P,"aria-describedby":d,autoComplete:o,children:N,id:m,inputProps:{"aria-errormessage":V,"aria-labelledby":ke,"data-se":D},inputRef:G,multiple:W,name:m,native:!0,onBlur:k,onChange:R,onFocus:O,ref:A,translate:F}),[o,N,m,P,W,k,R,O,A,D,F]);return e.jsx(De,{ariaDescribedBy:c,errorMessage:l,errorMessageList:s,fieldType:"single",hasVisibleLabel:!0,hint:h,HintLinkComponent:t,id:m,isDisabled:Me,isFullWidth:Le,isOptional:Ee,label:Te,renderFieldComponent:we})}),p=n.memo(Ge);p.displayName="NativeSelect";const Ro={component:p,decorators:[Oe],tags:["autodocs"],argTypes:{children:{description:"The options or optgroup elements within the native select component",table:{type:{summary:"ReactElement<'option'> | ReactElement<'optgroup'> | undefined"}}},defaultValue:{control:"text",description:"The default value of the native select component. Only applicable if `value` is not provided",table:{type:{summary:"string | string[] | undefined"}}},errorMessage:i.errorMessage,errorMessageList:i.errorMessageList,hint:i.hint,HintLinkComponent:i.HintLinkComponent,id:i.id,isDisabled:i.isDisabled,isFullWidth:i.isFullWidth,hasMultipleChoices:{control:"boolean",description:"If `true`, the native select component allows multiple selections",table:{type:{summary:"boolean"},defaultValue:{summary:"false"}}},isOptional:i.isOptional,label:{control:"text",description:"The label text for the native select component",table:{type:{summary:"string"}},type:{required:!0,name:"string"}},onBlur:{description:"Callback fired when the native select component loses focus",table:{type:{summary:"func"}}},onChange:{description:"Callback fired when the value of the native select component changes",table:{type:{summary:"func"}}},onFocus:{description:"Callback fired when the native select component gains focus",table:{type:{summary:"func"}}},value:{control:"text",description:"The value or values selected in the native select component",table:{type:{summary:"string | string[]"}}}},args:{isDisabled:!1,hint:"Select your destination in the Sol system.",isOptional:!1,label:"Destination",id:"SolarDestination",defaultValue:""}},u={render:function(o){return e.jsx(p,{...o,children:e.jsxs(e.Fragment,{children:[e.jsx("option",{value:"earth",children:"Earth"}),e.jsx("option",{value:"mars",children:"Mars"}),e.jsx("option",{value:"ceres",children:"Ceres"}),e.jsx("option",{value:"eros",children:"Eros"}),e.jsx("option",{value:"tycho-station",children:"Tycho Station"}),e.jsx("option",{value:"phoebe",children:"Phoebe"}),e.jsx("option",{value:"ganymede",children:"Ganymede"})]}),defaultValue:o.defaultValue,errorMessage:o.errorMessage,errorMessageList:o.errorMessageList,hint:o.hint,id:o.id,isDisabled:o.isDisabled,isMultiSelect:o.isMultiSelect,isOptional:o.isOptional,label:o.label})}},Pe={render:function(o){return e.jsx(p,{...o,children:e.jsxs(e.Fragment,{children:[e.jsxs("optgroup",{label:"Sol System",children:[e.jsx("option",{value:"earth",children:"Earth"}),e.jsx("option",{value:"mars",children:"Mars"}),e.jsx("option",{value:"ceres",children:"Ceres"}),e.jsx("option",{value:"eros",children:"Eros"}),e.jsx("option",{value:"tycho-station",children:"Tycho Station"}),e.jsx("option",{value:"phoebe",children:"Phoebe"}),e.jsx("option",{value:"ganymede",children:"Ganymede"})]}),e.jsxs("optgroup",{label:"Extrasolar",children:[e.jsx("option",{value:"auberon",children:"Auberon"}),e.jsx("option",{value:"al-halub",children:"Al-Halub"}),e.jsx("option",{value:"freehold",children:"Freehold"}),e.jsx("option",{value:"laconia",children:"Laconia"}),e.jsx("option",{value:"new-terra",children:"New Terra"})]})]})})}},g={...u},b={...u,args:{isDisabled:!0}},f={...u,args:{errorMessage:"Select your destination."}},x={...u,args:{errorMessage:"Select your destination.",errorMessageList:["Select 1 planet","Select 1 moon"]}},y={...Pe},j={...u,args:{hasMultipleChoices:!0,defaultValue:[]}},C={...u,args:{isOptional:!0}},S={...u,args:{HintLinkComponent:e.jsx(Ae,{href:"/learn-more",children:"Learn more"})}},M={parameters:{docs:{description:{story:"When the component is controlled, the parent component is responsible for passing `value` to the component and listening for changes with `onChange`"}}},args:{},render:function(o){const[r,l]=n.useState(""),s=n.useCallback(a=>l(a.target.value),[]);return e.jsx(p,{...o,children:e.jsxs(e.Fragment,{children:[e.jsxs("optgroup",{label:"Sol System",children:[e.jsx("option",{value:"earth",children:"Earth"}),e.jsx("option",{value:"mars",children:"Mars"}),e.jsx("option",{value:"ceres",children:"Ceres"}),e.jsx("option",{value:"eros",children:"Eros"}),e.jsx("option",{value:"tycho-station",children:"Tycho Station"}),e.jsx("option",{value:"phoebe",children:"Phoebe"}),e.jsx("option",{value:"ganymede",children:"Ganymede"})]}),e.jsxs("optgroup",{label:"Extrasolar",children:[e.jsx("option",{value:"auberon",children:"Auberon"}),e.jsx("option",{value:"al-halub",children:"Al-Halub"}),e.jsx("option",{value:"freehold",children:"Freehold"}),e.jsx("option",{value:"laconia",children:"Laconia"}),e.jsx("option",{value:"new-terra",children:"New Terra"})]})]}),onChange:s,value:r})}},L={parameters:{docs:{description:{story:"When the component is controlled, the parent component is responsible for passing `value` to the component and listening for changes with `onChange`"}}},render:function(o){const[r,l]=n.useState([""]),s=n.useCallback(a=>{const h=[a.target].filter(t=>t instanceof HTMLOptionElement).filter(t=>t.selected).map(t=>t.value);l(h)},[]);return e.jsx(p,{...o,defaultValue:void 0,hasMultipleChoices:!0,onChange:s,value:r,children:e.jsxs(e.Fragment,{children:[e.jsxs("optgroup",{label:"Sol System",children:[e.jsx("option",{value:"earth",children:"Earth"}),e.jsx("option",{value:"mars",children:"Mars"}),e.jsx("option",{value:"ceres",children:"Ceres"}),e.jsx("option",{value:"eros",children:"Eros"}),e.jsx("option",{value:"tycho-station",children:"Tycho Station"}),e.jsx("option",{value:"phoebe",children:"Phoebe"}),e.jsx("option",{value:"ganymede",children:"Ganymede"})]}),e.jsxs("optgroup",{label:"Extrasolar",children:[e.jsx("option",{value:"auberon",children:"Auberon"}),e.jsx("option",{value:"al-halub",children:"Al-Halub"}),e.jsx("option",{value:"freehold",children:"Freehold"}),e.jsx("option",{value:"laconia",children:"Laconia"}),e.jsx("option",{value:"new-terra",children:"New Terra"})]})]})})}},E={parameters:{docs:{description:{story:"When the component is controlled, the parent component is responsible for passing `value` to the component and listening for changes with `onChange`"}}},args:{},render:function(o){const[r,l]=n.useState("Laconia"),s=n.useCallback(a=>l(a.target.value),[]);return e.jsx(p,{...o,children:e.jsxs(e.Fragment,{children:[e.jsxs("optgroup",{label:"Sol System",children:[e.jsx("option",{value:"earth",children:"Earth"}),e.jsx("option",{value:"mars",children:"Mars"}),e.jsx("option",{value:"ceres",children:"Ceres"}),e.jsx("option",{value:"eros",children:"Eros"}),e.jsx("option",{value:"tycho-station",children:"Tycho Station"}),e.jsx("option",{value:"phoebe",children:"Phoebe"}),e.jsx("option",{value:"ganymede",children:"Ganymede"})]}),e.jsxs("optgroup",{label:"Extrasolar",children:[e.jsx("option",{value:"auberon",children:"Auberon"}),e.jsx("option",{value:"al-halub",children:"Al-Halub"}),e.jsx("option",{value:"freehold",children:"Freehold"}),e.jsx("option",{value:"laconia",children:"Laconia"}),e.jsx("option",{value:"new-terra",children:"New Terra"})]})]}),onChange:s,value:r})}},T={parameters:{docs:{description:{story:"When the component is controlled, the parent component is responsible for passing `value` to the component and listening for changes with `onChange`.\n\nPreselected values are referenced by the value of the `value` attritube on `option` elements."}}},render:function(o){const[r,l]=n.useState(["laconia","new-terra"]),s=n.useCallback(a=>{const h=[a.target].filter(t=>t instanceof HTMLOptionElement).filter(t=>t.selected).map(t=>t.value);l(h)},[]);return e.jsx(p,{...o,defaultValue:void 0,hasMultipleChoices:!0,onChange:s,value:r,children:e.jsxs(e.Fragment,{children:[e.jsxs("optgroup",{label:"Sol System",children:[e.jsx("option",{value:"earth",children:"Earth"}),e.jsx("option",{value:"mars",children:"Mars"}),e.jsx("option",{value:"ceres",children:"Ceres"}),e.jsx("option",{value:"eros",children:"Eros"}),e.jsx("option",{value:"tycho-station",children:"Tycho Station"}),e.jsx("option",{value:"phoebe",children:"Phoebe"}),e.jsx("option",{value:"ganymede",children:"Ganymede"})]}),e.jsxs("optgroup",{label:"Extrasolar",children:[e.jsx("option",{value:"auberon",children:"Auberon"}),e.jsx("option",{value:"al-halub",children:"Al-Halub"}),e.jsx("option",{value:"freehold",children:"Freehold"}),e.jsx("option",{value:"laconia",children:"Laconia"}),e.jsx("option",{value:"new-terra",children:"New Terra"})]})]})})}};var q,z,I;g.parameters={...g.parameters,docs:{...(q=g.parameters)==null?void 0:q.docs,source:{originalSource:`{
-  ...Template
-}`,...(I=(z=g.parameters)==null?void 0:z.docs)==null?void 0:I.source}}};var B,_,J;b.parameters={...b.parameters,docs:{...(B=b.parameters)==null?void 0:B.docs,source:{originalSource:`{
-  ...Template,
-  args: {
-    isDisabled: true
-  }
-}`,...(J=(_=b.parameters)==null?void 0:_.docs)==null?void 0:J.source}}};var K,Q,U;f.parameters={...f.parameters,docs:{...(K=f.parameters)==null?void 0:K.docs,source:{originalSource:`{
-  ...Template,
-  args: {
-    errorMessage: "Select your destination."
-  }
-}`,...(U=(Q=f.parameters)==null?void 0:Q.docs)==null?void 0:U.source}}};var X,Y,Z;x.parameters={...x.parameters,docs:{...(X=x.parameters)==null?void 0:X.docs,source:{originalSource:`{
-  ...Template,
-  args: {
-    errorMessage: "Select your destination.",
-    errorMessageList: ["Select 1 planet", "Select 1 moon"]
-  }
-}`,...(Z=(Y=x.parameters)==null?void 0:Y.docs)==null?void 0:Z.source}}};var $,ee,oe;y.parameters={...y.parameters,docs:{...($=y.parameters)==null?void 0:$.docs,source:{originalSource:`{
-  ...GroupTemplate
-}`,...(oe=(ee=y.parameters)==null?void 0:ee.docs)==null?void 0:oe.source}}};var ne,te,ae;j.parameters={...j.parameters,docs:{...(ne=j.parameters)==null?void 0:ne.docs,source:{originalSource:`{
-  ...Template,
-  args: {
-    hasMultipleChoices: true,
-    defaultValue: []
-  }
-}`,...(ae=(te=j.parameters)==null?void 0:te.docs)==null?void 0:ae.source}}};var re,le,se;C.parameters={...C.parameters,docs:{...(re=C.parameters)==null?void 0:re.docs,source:{originalSource:`{
-  ...Template,
-  args: {
-    isOptional: true
-  }
-}`,...(se=(le=C.parameters)==null?void 0:le.docs)==null?void 0:se.source}}};var ie,pe,ce;S.parameters={...S.parameters,docs:{...(ie=S.parameters)==null?void 0:ie.docs,source:{originalSource:`{
-  ...Template,
-  args: {
-    HintLinkComponent: <Link href="/learn-more">Learn more</Link>
-  }
-}`,...(ce=(pe=S.parameters)==null?void 0:pe.docs)==null?void 0:ce.source}}};var ue,de,he;M.parameters={...M.parameters,docs:{...(ue=M.parameters)==null?void 0:ue.docs,source:{originalSource:`{
-  parameters: {
-    docs: {
-      description: {
-        story: "When the component is controlled, the parent component is responsible for passing \`value\` to the component and listening for changes with \`onChange\`"
-      }
-    }
-  },
-  args: {},
-  render: function C(args) {
-    const [localValue, setLocalValue] = useState("");
-    const onChange = useCallback((event: SelectChangeEvent<string | string[]>) => setLocalValue(event.target.value as string), []);
-    return <NativeSelect {...args} children={<>
-            <optgroup label="Sol System">
-              <option value="earth">Earth</option>
-              <option value="mars">Mars</option>
-              <option value="ceres">Ceres</option>
-              <option value="eros">Eros</option>
-              <option value="tycho-station">Tycho Station</option>
-              <option value="phoebe">Phoebe</option>
-              <option value="ganymede">Ganymede</option>
-            </optgroup>
-            <optgroup label="Extrasolar">
-              <option value="auberon">Auberon</option>
-              <option value="al-halub">Al-Halub</option>
-              <option value="freehold">Freehold</option>
-              <option value="laconia">Laconia</option>
-              <option value="new-terra">New Terra</option>
-            </optgroup>
-          </>} onChange={onChange} value={localValue} />;
-  }
-}`,...(he=(de=M.parameters)==null?void 0:de.docs)==null?void 0:he.source}}};var me,ve,ge;L.parameters={...L.parameters,docs:{...(me=L.parameters)==null?void 0:me.docs,source:{originalSource:`{
-  parameters: {
-    docs: {
-      description: {
-        story: "When the component is controlled, the parent component is responsible for passing \`value\` to the component and listening for changes with \`onChange\`"
-      }
-    }
-  },
-  render: function C(args) {
-    const [localValue, setLocalValue] = useState([""]);
-    const onChange = useCallback<Required<NativeSelectProps<typeof localValue, true>>["onChange"]>(event => {
-      const selectedOptions = [event.target].filter(option => option instanceof HTMLOptionElement).filter(option => option.selected).map(selectedOption => selectedOption.value);
-      setLocalValue(selectedOptions);
-    }, []);
-    return <NativeSelect {...args} defaultValue={undefined} hasMultipleChoices={true}
-    // @ts-expect-error This is going to break because generics aren't passed through.
-    onChange={onChange} value={localValue}>
-        <>
-          <optgroup label="Sol System">
-            <option value="earth">Earth</option>
-            <option value="mars">Mars</option>
-            <option value="ceres">Ceres</option>
-            <option value="eros">Eros</option>
-            <option value="tycho-station">Tycho Station</option>
-            <option value="phoebe">Phoebe</option>
-            <option value="ganymede">Ganymede</option>
-          </optgroup>
-          <optgroup label="Extrasolar">
-            <option value="auberon">Auberon</option>
-            <option value="al-halub">Al-Halub</option>
-            <option value="freehold">Freehold</option>
-            <option value="laconia">Laconia</option>
-            <option value="new-terra">New Terra</option>
-          </optgroup>
-        </>
-      </NativeSelect>;
-  }
-}`,...(ge=(ve=L.parameters)==null?void 0:ve.docs)==null?void 0:ge.source}}};var be,fe,xe;E.parameters={...E.parameters,docs:{...(be=E.parameters)==null?void 0:be.docs,source:{originalSource:`{
-  parameters: {
-    docs: {
-      description: {
-        story: "When the component is controlled, the parent component is responsible for passing \`value\` to the component and listening for changes with \`onChange\`"
-      }
-    }
-  },
-  args: {},
-  render: function C(args) {
-    const [localValue, setLocalValue] = useState("Laconia");
-    const onChange = useCallback((event: SelectChangeEvent<string | string[]>) => setLocalValue(event.target.value as string), []);
-    return <NativeSelect {...args} children={<>
-            <optgroup label="Sol System">
-              <option value="earth">Earth</option>
-              <option value="mars">Mars</option>
-              <option value="ceres">Ceres</option>
-              <option value="eros">Eros</option>
-              <option value="tycho-station">Tycho Station</option>
-              <option value="phoebe">Phoebe</option>
-              <option value="ganymede">Ganymede</option>
-            </optgroup>
-            <optgroup label="Extrasolar">
-              <option value="auberon">Auberon</option>
-              <option value="al-halub">Al-Halub</option>
-              <option value="freehold">Freehold</option>
-              <option value="laconia">Laconia</option>
-              <option value="new-terra">New Terra</option>
-            </optgroup>
-          </>} onChange={onChange} value={localValue} />;
-  }
-}`,...(xe=(fe=E.parameters)==null?void 0:fe.docs)==null?void 0:xe.source}}};var ye,je,Ce;T.parameters={...T.parameters,docs:{...(ye=T.parameters)==null?void 0:ye.docs,source:{originalSource:`{
-  parameters: {
-    docs: {
-      description: {
-        story: "When the component is controlled, the parent component is responsible for passing \`value\` to the component and listening for changes with \`onChange\`.\\n\\nPreselected values are referenced by the value of the \`value\` attritube on \`option\` elements."
-      }
-    }
-  },
-  render: function C(args) {
-    const [localValue, setLocalValue] = useState(["laconia", "new-terra"]);
-    const onChange = useCallback<Required<NativeSelectProps<typeof localValue, true>>["onChange"]>(event => {
-      const selectedOptions = [event.target].filter(option => option instanceof HTMLOptionElement).filter(option => option.selected).map(selectedOption => selectedOption.value);
-      setLocalValue(selectedOptions);
-    }, []);
-    return <NativeSelect {...args} defaultValue={undefined} hasMultipleChoices
-    // @ts-expect-error This is going to break because generics aren't passed through.
-    onChange={onChange} value={localValue}>
-        <>
-          <optgroup label="Sol System">
-            <option value="earth">Earth</option>
-            <option value="mars">Mars</option>
-            <option value="ceres">Ceres</option>
-            <option value="eros">Eros</option>
-            <option value="tycho-station">Tycho Station</option>
-            <option value="phoebe">Phoebe</option>
-            <option value="ganymede">Ganymede</option>
-          </optgroup>
-          <optgroup label="Extrasolar">
-            <option value="auberon">Auberon</option>
-            <option value="al-halub">Al-Halub</option>
-            <option value="freehold">Freehold</option>
-            <option value="laconia">Laconia</option>
-            <option value="new-terra">New Terra</option>
-          </optgroup>
-        </>
-      </NativeSelect>;
-  }
-}`,...(Ce=(je=T.parameters)==null?void 0:je.docs)==null?void 0:Ce.source}}};const Wo=["Default","DefaultDisabled","DefaultError","ErrorsList","DefaultGrouped","Multi","Optional","HintLink","Controlled","ControlledMultiselect","ControlledPreselected","ControlledPreselectedMultiselect"];export{M as Controlled,L as ControlledMultiselect,E as ControlledPreselected,T as ControlledPreselectedMultiselect,g as Default,b as DefaultDisabled,f as DefaultError,y as DefaultGrouped,x as ErrorsList,S as HintLink,j as Multi,C as Optional,Wo as __namedExportsOrder,Ro as default};