@okta/odyssey-react-mui 1.52.1 → 1.53.0

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

@@ -0,0 +1,114 @@
+import{r,j as e}from"./iframe-CQjT1fxh.js";import{O as ke}from"./OdysseyStorybookThemeDecorator-CHlNoX17.js";import{u as Oe}from"./useStoryArgOrLocalState-CRQAGSTX.js";import{f as n}from"./fieldComponentPropsMetaData-C9gCwuus.js";import{M as Le}from"./Field-CqIOaZfg.js";import{g as Ee,u as je}from"./inputUtils-BBH9ADKa.js";import{S as De}from"./Select-DE0mojaE.js";import{M as Fe}from"./Link-Cg_KakDo.js";import"./preload-helper-Dp1pzeXC.js";import"./OdysseyThemeProvider-BA0_xP7N.js";import"./tableRowClasses-Bk1uFtwh.js";import"./WarningFilled-DOHs-JmZ.js";import"./index-C77ZwfYm.js";import"./OdysseyProvider-rboSNY26.js";import"./ScopedCssBaseline-BOa6kM98.js";import"./Box-B3rdnavX.js";import"./Box-CnVllI1S.js";import"./List-D0N4Xybp.js";import"./ListItem-BNz1zv6N.js";import"./FormHelperText-CVc1kPQJ.js";import"./FormLabel-CWWbs_c2.js";import"./useIsFocusVisible-D1xCTBdT.js";import"./isHostComponent-DVu5iVWx.js";import"./ButtonBase-Rz8p08Xo.js";import"./TransitionGroupContext-yBqGXZYI.js";import"./ScreenReaderText-toqV93JE.js";import"./visuallyHidden-Dan1xhjv.js";import"./FieldHint-Cs73lQge.js";import"./Typography-CjpHjc10.js";import"./Typography-Jr4Brrb5.js";import"./useUniqueId-DG6rB8dI.js";import"./createUniqueId-BHjR7HQF.js";import"./Menu-DB2s3Jn0.js";import"./Portal-DeJFqeW-.js";import"./resolveComponentProps-DGxe9oED.js";import"./index-5Qx3hCfP.js";import"./Grow-DvH-Xu1P.js";import"./utils-D-QCjykO.js";import"./ownerDocument-DW-IO8s5.js";import"./ownerWindow-HkKU3E4x.js";import"./debounce-Be36O1Ab.js";import"./Modal-C5P7v6Gt.js";import"./getScrollbarSize-Bqq2hMjQ.js";import"./createChainedFunction-BO_9K8Jh.js";import"./Fade-ZBabHGDm.js";import"./Paper-vUVrw-QB.js";import"./MenuList-D3GSt85L.js";import"./useControlled-BUhC7uWK.js";import"./ArrowDropDown-BbLKA4fg.js";import"./createSvgIcon-CaWcxZng.js";import"./InputBase-BYnzr12H.js";import"./Link-thynTosX.js";import"./ExternalLink-3_gWbh_U.js";const Be=r.forwardRef(({ariaDescribedBy:o,autoCompleteType:t,defaultValue:i,errorMessage:u,errorMessageList:d,hasMultipleChoices:a,hint:m,HintLinkComponent:g,id:l,inputRef:L,isDisabled:be=!1,isFullWidth:Ce=!1,isMultiSelect:j,isOptional:Me=!1,label:Se,onBlur:D,onChange:f,onFocus:F,testId:B,translate:A,value:w,children:R},H)=>{const Ve=r.useRef(Ee({controlledValue:w,uncontrolledValue:i})),U=r.useRef(null);r.useImperativeHandle(L,()=>({focus:()=>{var p;(p=U.current)==null||p.focus()}}),[]);const W=je({defaultValue:i,value:w,controlState:Ve.current}),_=r.useCallback((p,E)=>{f==null||f(p,E)},[f]),G=r.useMemo(()=>a===void 0?j:a,[a,j]),xe=r.useCallback(({ariaDescribedBy:p,errorMessageElementId:E,labelElementId:Te})=>e.jsx(De,{...W,"aria-describedby":p,autoComplete:t,children:R,id:l,inputProps:{"aria-errormessage":E,"aria-labelledby":Te,"data-se":B},inputRef:U,multiple:G,name:l,native:!0,onBlur:D,onChange:_,onFocus:F,ref:H,translate:A}),[t,R,l,W,G,D,_,F,H,B,A]);return e.jsx(Le,{ariaDescribedBy:o,errorMessage:u,errorMessageList:d,fieldType:"single",hasVisibleLabel:!0,hint:m,HintLinkComponent:g,id:l,isDisabled:be,isFullWidth:Ce,isOptional:Me,label:Se,renderFieldComponent:xe})}),c=r.memo(Be);c.displayName="NativeSelect";const{fn:N}=__STORYBOOK_MODULE_TEST__,h=["Option A","Option B","Option C","Option D","Option E"],k=e.jsx(e.Fragment,{children:h.map(o=>e.jsx("option",{value:o,children:o},o))}),At={component:c,decorators:[ke],argTypes:{children:{control:!1,description:"The options or optgroup elements within the native select component",table:{category:"Visual",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:{category:"Functional",type:{summary:"string | string[] | undefined"}}},errorMessage:n.errorMessage,errorMessageList:n.errorMessageList,hint:n.hint,HintLinkComponent:n.HintLinkComponent,id:n.id,isDisabled:n.isDisabled,isFullWidth:n.isFullWidth,hasMultipleChoices:{control:"boolean",description:"If `true`, the native select component allows multiple selections",table:{readonly:!0,category:"Visual",type:{summary:"boolean"},defaultValue:{summary:"false"}}},isOptional:n.isOptional,label:{control:"text",description:"The label text for the native select component",table:{category:"Visual",type:{summary:"string"}},type:{required:!0,name:"string"}},onBlur:{control:!1,description:"Callback fired when the native select component loses focus",table:{category:"Functional",type:{summary:"func"}}},onChange:{control:!1,description:"Callback fired when the value of the native select component changes",table:{category:"Functional",type:{summary:"func"}}},onFocus:{control:!1,description:"Callback fired when the native select component gains focus",table:{category:"Functional",type:{summary:"func"}}},value:{control:{type:"radio"},options:h,description:"If `value` is provided, you control the field externally and must handle updates with `onChange`.",table:{category:"Functional",type:{summary:"string | string[]"}}}},args:{hasMultipleChoices:!1,hint:"Hint text",id:"native-select",isDisabled:!1,isFullWidth:!1,isOptional:!1,label:"Label",onBlur:N(),onFocus:N(),value:"Option A"}},s={args:{hasMultipleChoices:!1},render:function(t,i){const{value:u,setValue:d}=Oe({args:t,context:i,argKey:"value",defaultValue:t.defaultValue??""}),a=m=>{const g=m.target;d(g.value)};return e.jsx(c,{...t,children:t.children??k,defaultValue:void 0,hasMultipleChoices:!1,onChange:a,value:u})}},Ae={args:{hasMultipleChoices:!0,value:[]},render:function(t,i){const{value:u,setValue:d}=Oe({args:t,context:i,argKey:"value",defaultValue:t.value??[]}),a=m=>{const g=m.target,l=Array.from(g.selectedOptions).map(L=>L.value);d(l)};return e.jsx(c,{...t,children:t.children??k,defaultValue:void 0,hasMultipleChoices:!0,onChange:a,value:u})}},v={...s,tags:["!autodocs"]},y={...s,args:{isDisabled:!0}},O={...s,args:{errorMessage:"Select an option."}},b={...s,args:{errorMessage:"Select an option.",errorMessageList:["Error A","Error B"]}},C={...s,args:{children:e.jsxs(e.Fragment,{children:[e.jsxs("optgroup",{label:"Group 1",children:[e.jsx("option",{value:"Option A",children:"Option A"}),e.jsx("option",{value:"Option B",children:"Option B"}),e.jsx("option",{value:"Option C",children:"Option C"})]}),e.jsxs("optgroup",{label:"Group 2",children:[e.jsx("option",{value:"Option D",children:"Option D"}),e.jsx("option",{value:"Option E",children:"Option E"})]})]}),value:"Option A"},argTypes:{children:{control:!1}}},M={...Ae,argTypes:{value:{control:{type:"check"},options:h}}},S={...s,args:{isOptional:!0}},V={...s,args:{HintLinkComponent:e.jsx(Fe,{href:"#link",children:"Learn more"})}},x={args:{defaultValue:"Option B",value:void 0},argTypes:{value:{control:!1},defaultValue:{control:{type:"radio"},options:h}},parameters:{docs:{description:{story:"When the component is uncontrolled, it manages its own value. Provide `defaultValue` and omit `value`/`onChange` to let the component handle state internally."}}},render:function(t){return e.jsx(c,{...t,children:k})}},T={args:{hasMultipleChoices:!0,defaultValue:["Option B","Option C"],value:void 0},argTypes:{value:{control:!1},defaultValue:{control:{type:"check"},options:h}},parameters:{docs:{description:{story:"When the component is uncontrolled, it manages its own value. Provide `defaultValue` and omit `value`/`onChange` to let the component handle state internally."}}},render:function(t){return e.jsx(c,{...t,children:k})}};var I,z,K;v.parameters={...v.parameters,docs:{...(I=v.parameters)==null?void 0:I.docs,source:{originalSource:`{
+  ...singleTemplate,
+  tags: ["!autodocs"]
+}`,...(K=(z=v.parameters)==null?void 0:z.docs)==null?void 0:K.source}}};var q,Y,J;y.parameters={...y.parameters,docs:{...(q=y.parameters)==null?void 0:q.docs,source:{originalSource:`{
+  ...singleTemplate,
+  args: {
+    isDisabled: true
+  }
+}`,...(J=(Y=y.parameters)==null?void 0:Y.docs)==null?void 0:J.source}}};var Q,X,Z;O.parameters={...O.parameters,docs:{...(Q=O.parameters)==null?void 0:Q.docs,source:{originalSource:`{
+  ...singleTemplate,
+  args: {
+    errorMessage: "Select an option."
+  }
+}`,...(Z=(X=O.parameters)==null?void 0:X.docs)==null?void 0:Z.source}}};var $,P,ee;b.parameters={...b.parameters,docs:{...($=b.parameters)==null?void 0:$.docs,source:{originalSource:`{
+  ...singleTemplate,
+  args: {
+    errorMessage: "Select an option.",
+    errorMessageList: ["Error A", "Error B"]
+  }
+}`,...(ee=(P=b.parameters)==null?void 0:P.docs)==null?void 0:ee.source}}};var te,oe,ne;C.parameters={...C.parameters,docs:{...(te=C.parameters)==null?void 0:te.docs,source:{originalSource:`{
+  ...singleTemplate,
+  args: {
+    children: <>
+        <optgroup label="Group 1">
+          <option value="Option A">Option A</option>
+          <option value="Option B">Option B</option>
+          <option value="Option C">Option C</option>
+        </optgroup>
+        <optgroup label="Group 2">
+          <option value="Option D">Option D</option>
+          <option value="Option E">Option E</option>
+        </optgroup>
+      </>,
+    value: "Option A"
+  },
+  argTypes: {
+    children: {
+      control: false
+    }
+  }
+}`,...(ne=(oe=C.parameters)==null?void 0:oe.docs)==null?void 0:ne.source}}};var re,ae,se;M.parameters={...M.parameters,docs:{...(re=M.parameters)==null?void 0:re.docs,source:{originalSource:`{
+  ...multiTemplate,
+  argTypes: {
+    value: {
+      control: {
+        type: "check"
+      },
+      options: valueControlOptions
+    }
+  }
+}`,...(se=(ae=M.parameters)==null?void 0:ae.docs)==null?void 0:se.source}}};var ie,le,pe;S.parameters={...S.parameters,docs:{...(ie=S.parameters)==null?void 0:ie.docs,source:{originalSource:`{
+  ...singleTemplate,
+  args: {
+    isOptional: true
+  }
+}`,...(pe=(le=S.parameters)==null?void 0:le.docs)==null?void 0:pe.source}}};var ce,ue,de;V.parameters={...V.parameters,docs:{...(ce=V.parameters)==null?void 0:ce.docs,source:{originalSource:`{
+  ...singleTemplate,
+  args: {
+    HintLinkComponent: <Link href="#link">Learn more</Link>
+  }
+}`,...(de=(ue=V.parameters)==null?void 0:ue.docs)==null?void 0:de.source}}};var me,ge,he;x.parameters={...x.parameters,docs:{...(me=x.parameters)==null?void 0:me.docs,source:{originalSource:`{
+  args: {
+    defaultValue: "Option B",
+    value: undefined
+  },
+  argTypes: {
+    value: {
+      control: false
+    },
+    defaultValue: {
+      control: {
+        type: "radio"
+      },
+      options: valueControlOptions
+    }
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: "When the component is uncontrolled, it manages its own value. Provide \`defaultValue\` and omit \`value\`/\`onChange\` to let the component handle state internally."
+      }
+    }
+  },
+  render: function UncontrolledStory(args) {
+    return <NativeSelect {...args} children={baseOptions} />;
+  }
+}`,...(he=(ge=x.parameters)==null?void 0:ge.docs)==null?void 0:he.source}}};var fe,ve,ye;T.parameters={...T.parameters,docs:{...(fe=T.parameters)==null?void 0:fe.docs,source:{originalSource:`{
+  args: {
+    hasMultipleChoices: true,
+    defaultValue: ["Option B", "Option C"],
+    value: undefined
+  },
+  argTypes: {
+    value: {
+      control: false
+    },
+    defaultValue: {
+      control: {
+        type: "check"
+      },
+      options: valueControlOptions
+    }
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: "When the component is uncontrolled, it manages its own value. Provide \`defaultValue\` and omit \`value\`/\`onChange\` to let the component handle state internally."
+      }
+    }
+  },
+  render: function UncontrolledMultiStory(args) {
+    return <NativeSelect {...args} children={baseOptions} />;
+  }
+}`,...(ye=(ve=T.parameters)==null?void 0:ve.docs)==null?void 0:ye.source}}};const wt=["Default","Disabled","Error","ErrorsList","Grouped","Multi","Optional","HintLink","Uncontrolled","UncontrolledMulti"];export{v as Default,y as Disabled,O as Error,b as ErrorsList,C as Grouped,V as HintLink,M as Multi,S as Optional,x as Uncontrolled,T as UncontrolledMulti,wt as __namedExportsOrder,At as default};

package/dist/assets/Notification-CqbysXIb.js

@@ -0,0 +1 @@
+import{r as e,j as o}from"./iframe-CQjT1fxh.js";import{S as t}from"./tableRowClasses-Bk1uFtwh.js";const n=e.forwardRef((i,r)=>o.jsx(t,{fill:"none",ref:r,viewBox:"0 0 16 16",xmlns:"http://www.w3.org/2000/svg",...i,children:o.jsx(o.Fragment,{children:o.jsx("path",{clipRule:"evenodd",d:"M8 .667c-2.97 0-5.313 2.37-5.576 5.266-.198 2.19-.529 4.171-1.06 5.868l-.272.866h3.639A3.303 3.303 0 0 0 8 15.333a3.303 3.303 0 0 0 3.269-2.666h3.639l-.272-.866c-.531-1.697-.862-3.679-1.06-5.868C13.313 3.038 10.97.667 8 .667Zm1.891 12H6.11A1.97 1.97 0 0 0 8 14a1.97 1.97 0 0 0 1.891-1.333ZM3.752 6.053C3.958 3.781 5.782 2 8 2c2.218 0 4.042 1.78 4.248 4.053.171 1.894.443 3.676.866 5.28H2.886c.423-1.604.695-3.386.866-5.28Z",fill:"currentColor",fillRule:"evenodd"})})})),c=e.memo(n);c.displayName="NotificationIcon";export{c as M};