@okta/odyssey-react-mui 1.52.1 → 1.54.0

package/dist/assets/PageTemplate.stories-y3VCe0pC.js

@@ -0,0 +1,205 @@
+import{r as s,l as C,b as P,j as e}from"./iframe-DE4RuJrv.js";import{u as $,R as G,P as t}from"./ResourceAccessPolicyComponentsStorybookThemeDecorator-8FjQBMSw.js";import{s as L}from"./tableRowClasses-SdduqaRI.js";import{O as K}from"./OdysseyStorybookThemeDecorator-B7y7aS60.js";import{M as h}from"./Surface-DiOLp-IF.js";import{M as x}from"./Form-BnTT3ykb.js";import{M as c}from"./TextField-C_OR_Dhs.js";import{M as n}from"./Button-BsIMaHFP.js";import{B as y}from"./Breadcrumbs-D_1mZ41I.js";import{M as I}from"./MenuButton-XKYLHmS4.js";import{M as R}from"./MenuItem-C24Kmcql.js";import{M as V}from"./Drawer-Bw4XHP_g.js";import{M as f}from"./Layout-Cl3Pe9fw.js";import"./preload-helper-Dp1pzeXC.js";import"./Typography-avG8-lGj.js";import"./Typography-CAaRogW8.js";import"./Box-DcPUBV1N.js";import"./Link-BVJyfG5Z.js";import"./useIsFocusVisible-DEbTNWvz.js";import"./ButtonBase-CKEbMwnW.js";import"./TransitionGroupContext-FeNnDXqj.js";import"./Menu-CAnOJYGy.js";import"./Portal-Be1GH4ah.js";import"./resolveComponentProps-DH5wuSot.js";import"./isHostComponent-DVu5iVWx.js";import"./index-DBPVAcBX.js";import"./Grow-BpzgBh-I.js";import"./utils-DAOaxsLc.js";import"./ownerDocument-DW-IO8s5.js";import"./ownerWindow-HkKU3E4x.js";import"./debounce-Be36O1Ab.js";import"./Modal-C2qslhip.js";import"./getScrollbarSize-Bqq2hMjQ.js";import"./createChainedFunction-BO_9K8Jh.js";import"./Fade-DrCoA42j.js";import"./Paper-Bv-8rqJG.js";import"./MenuList-De-H5WYL.js";import"./List-BSVKZ0wr.js";import"./Chip-CHLAMh3i.js";import"./createSvgIcon-DMOOI9wR.js";import"./i18next-7SyOfhCu.js";import"./ScopedCssBaseline-DLzkuFGv.js";import"./OdysseyThemeProvider-CCwl8LYd.js";import"./WarningFilled-qIqi4h0v.js";import"./index-BAELNoi-.js";import"./OdysseyProvider-CVwRS5Sq.js";import"./Typography-B7LPQ65D.js";import"./useUniqueId-ej4W3xOJ.js";import"./createUniqueId-BHjR7HQF.js";import"./Field-BYLEUHch.js";import"./Box-GItunEmH.js";import"./ListItem-nLG-781o.js";import"./FormHelperText-C8Jvf7bP.js";import"./FormLabel-MF6CzxjN.js";import"./ScreenReaderText-6hJD_NSR.js";import"./visuallyHidden-Dan1xhjv.js";import"./FieldHint-Cw2XBNxH.js";import"./inputUtils-DtvLbmm9.js";import"./InputBase-C9_GkGNE.js";import"./InputAdornment-B5kJtHOQ.js";import"./BaseButton-BMsK9NzI.js";import"./MuiPropsContext-Bg_x6l7d.js";import"./Tooltip-CtMQ7ejP.js";import"./Tooltip-DoyRbWb9.js";import"./useControlled-0vpPKndq.js";import"./Popper-DAO3a_fx.js";import"./Button-DU6-loxu.js";import"./Group-Cp6vHli3.js";import"./User-CgytLiqa.js";import"./MenuItem-DxqkPhH4.js";import"./Home-BXRcLQe_.js";import"./BaseMenuButton-aaW8V_or.js";import"./MenuContext-ZAp67kRJ.js";import"./More-C9jx0DT3.js";import"./FullScreenOverlay-BJrXEpo4.js";/*!
+ * Copyright (c) 2024-present, Okta, Inc. and/or its affiliates. All rights reserved.
+ * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the "License.")
+ *
+ * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *
+ * See the License for the specific language governing permissions and limitations under the License.
+ */const Y="data-unified-ui-shell",J=()=>{const[r,a]=s.useState(!1);return s.useEffect(()=>{a(!!document.querySelector(`[${Y}]`))},[]),r};/*!
+ * Copyright (c) 2025-present, Okta, Inc. and/or its affiliates. All rights reserved.
+ * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the "License.")
+ *
+ * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *
+ * See the License for the specific language governing permissions and limitations under the License.
+ */const Q=({onMount:r,onUpdate:a})=>{const i=s.useRef(!1),o=s.useRef(r);s.useEffect(()=>{var l;i.current?a==null||a():(i.current=!0,(l=o.current)==null||l.call(o))},[a])},U=L("div",{shouldForwardProp:r=>r!=="odysseyDesignTokens"&&r!=="hasUiShell"&&r!=="isFullWidth"})(({hasUiShell:r,isFullWidth:a,odysseyDesignTokens:i})=>({maxWidth:a?"100%":`calc(1440px + ${i.Spacing6} + ${i.Spacing6})`,marginInline:a&&!r?i.Spacing6:"auto",padding:r?0:i.Spacing6})),X=L("div",{shouldForwardProp:r=>!["drawerVariant","isDrawerOpen","isFirstRender","odysseyDesignTokens"].includes(r)})(({drawerVariant:r,isDrawerOpen:a,isFirstRender:i,odysseyDesignTokens:o})=>({"@keyframes animate-drawer-open":{"0%":{gridTemplateColumns:"minmax(0, 1fr) 0"},"100%":{gridTemplateColumns:"minmax(0, 1fr) 360px"}},"@keyframes animate-drawer-close":{"0%":{gridTemplateColumns:"minmax(0, 1fr) 360px"},"100%":{gridTemplateColumns:"minmax(0, 1fr) 0"}},display:"grid",gridGap:r==="persistent"&&!a?0:o.Spacing4,gap:r==="persistent"&&!a?0:o.Spacing4,marginBlock:o.Spacing6,gridTemplateColumns:r==="persistent"?a?"minmax(0, 1fr) 360px":"minmax(0, 1fr) 0":"minmax(0, 1fr)",animation:r==="persistent"&&(!i||a)?`animate-drawer-${a?"open":"close"} 225ms cubic-bezier(0, 0, 0.2, 1)`:void 0,"& > div":{minWidth:0}})),Z=({headerComponent:r,children:a,drawer:i,isFullWidth:o=!1,testId:l="page-template"})=>{const v=$(),{isOpen:z,variant:W}=(i==null?void 0:i.props)??{},q=J(),k=s.useRef(!0),_=k.current,N=s.useCallback(()=>{k.current=!1},[]);return Q({onMount:N}),C(U,{"data-testid":l,hasUiShell:q,isFullWidth:o,odysseyDesignTokens:v,children:[r&&P("div",{children:r}),C(X,{drawerVariant:W,isDrawerOpen:z,isFirstRender:_,odysseyDesignTokens:v,children:[P("div",{children:a}),P("div",{children:i})]},"template-content")]})},m=s.memo(Z);m.displayName="PageTemplate";const{action:d}=__STORYBOOK_MODULE_ACTIONS__,va={component:m,decorators:[K,G],parameters:{layout:"fullscreen"},tags:["autodocs"]},u={render:r=>e.jsx(m,{headerComponent:e.jsxs(t,{children:[e.jsxs(t.Breadcrumbs,{homeHref:"#",children:[e.jsx(y,{href:"#",onClick:d("Page Title click"),children:"Page Title"},"page1"),e.jsx(y,{children:"Current Page"},"current")]},"breadcrumbs"),e.jsx(t.Title,{overline:"OVERLINE",status:{label:"BETA",severity:"info"},children:"Title"},"title"),e.jsx(t.Metadata,{items:["Metadata A","Metadata B","Metadata C"]},"metadata"),e.jsx(t.Description,{children:"Cultellus conforto bos adinventitias compello delibero usitas confugo statim. Tres tenax comes quaerat arguo cibus absorbeo debilito."},"description"),e.jsx(t.Documentation,{href:"#",children:"Documentation"},"documentation"),e.jsxs(t.Actions,{children:[e.jsx(I,{buttonLabel:"Secondary",children:e.jsx(R,{onClick:d("Action click"),children:"Action"})},"secondary"),e.jsx(n,{label:"Primary",onClick:d("primary click"),variant:"primary"},"primary")]},"actions")]}),isFullWidth:r.isFullWidth,children:e.jsx(f,{regions:[1],children:e.jsx(h,{children:e.jsxs(x,{formActions:e.jsxs(e.Fragment,{children:[e.jsx(n,{label:"Reset",variant:"secondary"},"reset"),e.jsx(n,{label:"Submit",type:"submit",variant:"primary"},"submit")]}),name:"Add Person",title:"Add Person",children:[e.jsx(c,{label:"First name"}),e.jsx(c,{label:"Last name"}),e.jsx(c,{label:"Email"})]})})})})},p={render:function(){const[a,i]=s.useState(!1),o=s.useCallback(()=>{i(!0)},[]),l=s.useCallback(()=>{i(!1)},[]);return e.jsx(m,{drawer:e.jsx(V,{hasDividers:!0,isOpen:a,onClose:l,primaryCallToActionComponent:e.jsx(n,{label:"Primary",onClick:l,variant:"primary"}),title:"Drawer title",variant:"temporary",children:e.jsx("div",{children:"Okta Privileged Access is a Privileged Access Management (PAM) solution designed to help customers mitigate the risk of unauthorized access to resources, a critical area of security and risk management in any organization. Okta Privileged Access builds on the current server access control capabilities provided with Okta Advanced Server Access and delivers a unified approach to managing access to all your privileged accounts. It securely connects people, machines, and applications to privileged resources such as servers, containers, and enterprise apps."})}),headerComponent:e.jsxs(t,{children:[e.jsx(t.Title,{children:"Title"},"title"),e.jsx(t.Description,{children:"Cultellus conforto bos adinventitias compello delibero usitas confugo statim. Tres tenax comes quaerat arguo cibus absorbeo debilito."},"description"),e.jsx(t.Documentation,{href:"#",children:"Documentation"},"documentation"),e.jsx(t.Actions,{children:e.jsx(n,{label:a?"Close embedded drawer":"Open embedded drawer",onClick:a?l:o,variant:"primary"})},"actions")]}),children:e.jsx(f,{regions:[1],children:e.jsx(h,{children:e.jsxs(x,{formActions:e.jsxs(e.Fragment,{children:[e.jsx(n,{label:"Reset",variant:"secondary"},"reset"),e.jsx(n,{label:"Submit",type:"submit",variant:"primary"},"submit")]}),name:"Add Person",title:"Add Person",children:[e.jsx(c,{label:"First name"}),e.jsx(c,{label:"Last name"}),e.jsx(c,{label:"Email"})]})})})})}},b={render:function(){const[a,i]=s.useState(!1),o=s.useCallback(()=>{i(!0)},[]),l=s.useCallback(()=>{i(!1)},[]);return e.jsx(m,{drawer:e.jsx(V,{hasDividers:!0,isOpen:a,onClose:l,primaryCallToActionComponent:e.jsx(n,{label:"Primary",onClick:l,variant:"primary"}),title:"Drawer title",variant:"persistent",children:e.jsx("div",{children:"Okta Privileged Access is a Privileged Access Management (PAM) solution designed to help customers mitigate the risk of unauthorized access to resources, a critical area of security and risk management in any organization. Okta Privileged Access builds on the current server access control capabilities provided with Okta Advanced Server Access and delivers a unified approach to managing access to all your privileged accounts. It securely connects people, machines, and applications to privileged resources such as servers, containers, and enterprise apps."})}),headerComponent:e.jsxs(t,{children:[e.jsx(t.Title,{children:"Title"},"title"),e.jsx(t.Description,{children:"Cultellus conforto bos adinventitias compello delibero usitas confugo statim. Tres tenax comes quaerat arguo cibus absorbeo debilito."},"description"),e.jsx(t.Documentation,{href:"#",children:"Documentation"},"documentation"),e.jsx(t.Actions,{children:e.jsx(n,{label:a?"Close embedded drawer":"Open embedded drawer",onClick:a?l:o,variant:"primary"})},"actions")]}),children:e.jsx(f,{regions:[1],children:e.jsx(h,{children:e.jsxs(x,{formActions:e.jsxs(e.Fragment,{children:[e.jsx(n,{label:"Reset",variant:"secondary"},"reset"),e.jsx(n,{label:"Submit",type:"submit",variant:"primary"},"submit")]}),name:"Add Person",title:"Add Person",children:[e.jsx(c,{label:"First name"}),e.jsx(c,{label:"Last name"}),e.jsx(c,{label:"Email"})]})})})})}},g={render:()=>e.jsx(m,{headerComponent:e.jsxs(t,{children:[e.jsxs(t.Breadcrumbs,{homeHref:"#",children:[e.jsx(y,{href:"#",onClick:d("Page Title click"),children:"Page Title"},"page1"),e.jsx(y,{children:"Current Page"},"current")]},"breadcrumbs"),e.jsx(t.Title,{overline:"OVERLINE",status:{label:"BETA",severity:"info"},children:"Title"},"title"),e.jsx(t.Metadata,{items:["Metadata A","Metadata B","Metadata C"]},"metadata"),e.jsx(t.Description,{children:"Cultellus conforto bos adinventitias compello delibero usitas confugo statim. Tres tenax comes quaerat arguo cibus absorbeo debilito."},"description"),e.jsx(t.Documentation,{href:"#",children:"Documentation"},"documentation"),e.jsxs(t.Actions,{children:[e.jsx(I,{buttonLabel:"Secondary",children:e.jsx(R,{onClick:d("Action click"),children:"Action"})},"secondary"),e.jsx(n,{label:"Primary",onClick:d("primary click"),variant:"primary"},"primary")]},"actions")]}),isFullWidth:!0,children:e.jsx(f,{regions:[1],children:e.jsx(h,{children:e.jsxs(x,{formActions:e.jsxs(e.Fragment,{children:[e.jsx(n,{label:"Reset",variant:"secondary"},"reset"),e.jsx(n,{label:"Submit",type:"submit",variant:"primary"},"submit")]}),name:"Add Person",title:"Add Person",children:[e.jsx(c,{label:"First name"}),e.jsx(c,{label:"Last name"}),e.jsx(c,{label:"Email"})]})})})})};var j,D,A;u.parameters={...u.parameters,docs:{...(j=u.parameters)==null?void 0:j.docs,source:{originalSource:`{
+  render: args => <PageTemplate headerComponent={<PageHeader>
+          <PageHeader.Breadcrumbs homeHref="#" key="breadcrumbs">
+            <Breadcrumb href="#" key="page1" onClick={action("Page Title click")}>
+              Page Title
+            </Breadcrumb>
+            <Breadcrumb key="current">Current Page</Breadcrumb>
+          </PageHeader.Breadcrumbs>
+          <PageHeader.Title key="title" overline="OVERLINE" status={{
+      label: "BETA",
+      severity: "info"
+    }}>
+            Title
+          </PageHeader.Title>
+          <PageHeader.Metadata items={["Metadata A", "Metadata B", "Metadata C"]} key="metadata" />
+          <PageHeader.Description key="description">
+            Cultellus conforto bos adinventitias compello delibero usitas
+            confugo statim. Tres tenax comes quaerat arguo cibus absorbeo
+            debilito.
+          </PageHeader.Description>
+          <PageHeader.Documentation href="#" key="documentation">
+            Documentation
+          </PageHeader.Documentation>
+          <PageHeader.Actions key="actions">
+            <MenuButton buttonLabel="Secondary" key="secondary">
+              <MenuItem onClick={action("Action click")}>Action</MenuItem>
+            </MenuButton>
+            <Button key="primary" label="Primary" onClick={action("primary click")} variant="primary" />
+          </PageHeader.Actions>
+        </PageHeader>} isFullWidth={args.isFullWidth}>
+      <Layout regions={[1]}>
+        <Surface>
+          <Form formActions={<>
+                <Button key="reset" label="Reset" variant="secondary" />
+                <Button key="submit" label="Submit" type="submit" variant="primary" />
+              </>} name="Add Person" title="Add Person">
+            <TextField label="First name" />
+            <TextField label="Last name" />
+            <TextField label="Email" />
+          </Form>
+        </Surface>
+      </Layout>
+    </PageTemplate>
+}`,...(A=(D=u.parameters)==null?void 0:D.docs)==null?void 0:A.source}}};var T,w,M;p.parameters={...p.parameters,docs:{...(T=p.parameters)==null?void 0:T.docs,source:{originalSource:`{
+  render: function C() {
+    const [isDrawerVisible, setIsDrawerVisible] = useState(false);
+    const onOpenEmbeddedDrawer = useCallback(() => {
+      setIsDrawerVisible(true);
+    }, []);
+    const onCloseEmbeddedDrawer = useCallback(() => {
+      setIsDrawerVisible(false);
+    }, []);
+    return <PageTemplate drawer={<Drawer hasDividers isOpen={isDrawerVisible} onClose={onCloseEmbeddedDrawer} primaryCallToActionComponent={<Button label="Primary" onClick={onCloseEmbeddedDrawer} variant="primary" />} title="Drawer title" variant="temporary">
+            <div>
+              Okta Privileged Access is a Privileged Access Management (PAM)
+              solution designed to help customers mitigate the risk of
+              unauthorized access to resources, a critical area of security and
+              risk management in any organization. Okta Privileged Access builds
+              on the current server access control capabilities provided with
+              Okta Advanced Server Access and delivers a unified approach to
+              managing access to all your privileged accounts. It securely
+              connects people, machines, and applications to privileged
+              resources such as servers, containers, and enterprise apps.
+            </div>
+          </Drawer>} headerComponent={<PageHeader>
+            <PageHeader.Title key="title">Title</PageHeader.Title>
+            <PageHeader.Description key="description">
+              Cultellus conforto bos adinventitias compello delibero usitas
+              confugo statim. Tres tenax comes quaerat arguo cibus absorbeo
+              debilito.
+            </PageHeader.Description>
+            <PageHeader.Documentation href="#" key="documentation">
+              Documentation
+            </PageHeader.Documentation>
+            <PageHeader.Actions key="actions">
+              <Button label={isDrawerVisible ? "Close embedded drawer" : "Open embedded drawer"} onClick={isDrawerVisible ? onCloseEmbeddedDrawer : onOpenEmbeddedDrawer} variant="primary" />
+            </PageHeader.Actions>
+          </PageHeader>}>
+        <Layout regions={[1]}>
+          <Surface>
+            <Form formActions={<>
+                  <Button key="reset" label="Reset" variant="secondary" />
+                  <Button key="submit" label="Submit" type="submit" variant="primary" />
+                </>} name="Add Person" title="Add Person">
+              <TextField label="First name" />
+              <TextField label="Last name" />
+              <TextField label="Email" />
+            </Form>
+          </Surface>
+        </Layout>
+      </PageTemplate>;
+  }
+}`,...(M=(w=p.parameters)==null?void 0:w.docs)==null?void 0:M.source}}};var H,S,B;b.parameters={...b.parameters,docs:{...(H=b.parameters)==null?void 0:H.docs,source:{originalSource:`{
+  render: function C() {
+    const [isDrawerVisible, setIsDrawerVisible] = useState(false);
+    const onOpenEmbeddedDrawer = useCallback(() => {
+      setIsDrawerVisible(true);
+    }, []);
+    const onCloseEmbeddedDrawer = useCallback(() => {
+      setIsDrawerVisible(false);
+    }, []);
+    return <PageTemplate drawer={<Drawer hasDividers isOpen={isDrawerVisible} onClose={onCloseEmbeddedDrawer} primaryCallToActionComponent={<Button label="Primary" onClick={onCloseEmbeddedDrawer} variant="primary" />} title="Drawer title" variant="persistent">
+            <div>
+              Okta Privileged Access is a Privileged Access Management (PAM)
+              solution designed to help customers mitigate the risk of
+              unauthorized access to resources, a critical area of security and
+              risk management in any organization. Okta Privileged Access builds
+              on the current server access control capabilities provided with
+              Okta Advanced Server Access and delivers a unified approach to
+              managing access to all your privileged accounts. It securely
+              connects people, machines, and applications to privileged
+              resources such as servers, containers, and enterprise apps.
+            </div>
+          </Drawer>} headerComponent={<PageHeader>
+            <PageHeader.Title key="title">Title</PageHeader.Title>
+            <PageHeader.Description key="description">
+              Cultellus conforto bos adinventitias compello delibero usitas
+              confugo statim. Tres tenax comes quaerat arguo cibus absorbeo
+              debilito.
+            </PageHeader.Description>
+            <PageHeader.Documentation href="#" key="documentation">
+              Documentation
+            </PageHeader.Documentation>
+            <PageHeader.Actions key="actions">
+              <Button label={isDrawerVisible ? "Close embedded drawer" : "Open embedded drawer"} onClick={isDrawerVisible ? onCloseEmbeddedDrawer : onOpenEmbeddedDrawer} variant="primary" />
+            </PageHeader.Actions>
+          </PageHeader>}>
+        <Layout regions={[1]}>
+          <Surface>
+            <Form formActions={<>
+                  <Button key="reset" label="Reset" variant="secondary" />
+                  <Button key="submit" label="Submit" type="submit" variant="primary" />
+                </>} name="Add Person" title="Add Person">
+              <TextField label="First name" />
+              <TextField label="Last name" />
+              <TextField label="Email" />
+            </Form>
+          </Surface>
+        </Layout>
+      </PageTemplate>;
+  }
+}`,...(B=(S=b.parameters)==null?void 0:S.docs)==null?void 0:B.source}}};var F,E,O;g.parameters={...g.parameters,docs:{...(F=g.parameters)==null?void 0:F.docs,source:{originalSource:`{
+  render: () => <PageTemplate headerComponent={<PageHeader>
+          <PageHeader.Breadcrumbs homeHref="#" key="breadcrumbs">
+            <Breadcrumb href="#" key="page1" onClick={action("Page Title click")}>
+              Page Title
+            </Breadcrumb>
+            <Breadcrumb key="current">Current Page</Breadcrumb>
+          </PageHeader.Breadcrumbs>
+          <PageHeader.Title key="title" overline="OVERLINE" status={{
+      label: "BETA",
+      severity: "info"
+    }}>
+            Title
+          </PageHeader.Title>
+          <PageHeader.Metadata items={["Metadata A", "Metadata B", "Metadata C"]} key="metadata" />
+          <PageHeader.Description key="description">
+            Cultellus conforto bos adinventitias compello delibero usitas
+            confugo statim. Tres tenax comes quaerat arguo cibus absorbeo
+            debilito.
+          </PageHeader.Description>
+          <PageHeader.Documentation href="#" key="documentation">
+            Documentation
+          </PageHeader.Documentation>
+          <PageHeader.Actions key="actions">
+            <MenuButton buttonLabel="Secondary" key="secondary">
+              <MenuItem onClick={action("Action click")}>Action</MenuItem>
+            </MenuButton>
+            <Button key="primary" label="Primary" onClick={action("primary click")} variant="primary" />
+          </PageHeader.Actions>
+        </PageHeader>} isFullWidth>
+      <Layout regions={[1]}>
+        <Surface>
+          <Form formActions={<>
+                <Button key="reset" label="Reset" variant="secondary" />
+                <Button key="submit" label="Submit" type="submit" variant="primary" />
+              </>} name="Add Person" title="Add Person">
+            <TextField label="First name" />
+            <TextField label="Last name" />
+            <TextField label="Email" />
+          </Form>
+        </Surface>
+      </Layout>
+    </PageTemplate>
+}`,...(O=(E=g.parameters)==null?void 0:E.docs)==null?void 0:O.source}}};const ka=["Default","OverlayDrawer","EmbeddedDrawer","FullWidth"];export{u as Default,b as EmbeddedDrawer,g as FullWidth,p as OverlayDrawer,ka as __namedExportsOrder,va as default};

package/dist/assets/PaginatedTable.stories-Bv7r4mF8.js

@@ -0,0 +1,65 @@
+import{r as e,j as i}from"./iframe-DE4RuJrv.js";import{O as pe}from"./OdysseyStorybookThemeDecorator-B7y7aS60.js";import{u as fe,M as Ne}from"./index.esm-DPEH-2Dd.js";import{a as ge,T as A}from"./OdysseyThemeProvider-CCwl8LYd.js";import{M as j}from"./Typography-B7LPQ65D.js";import{M as ye}from"./Button-BsIMaHFP.js";import"./preload-helper-Dp1pzeXC.js";import"./index-BAELNoi-.js";import"./OdysseyProvider-CVwRS5Sq.js";import"./ScopedCssBaseline-DLzkuFGv.js";import"./tableRowClasses-SdduqaRI.js";import"./createSvgIcon-DMOOI9wR.js";import"./createChainedFunction-BO_9K8Jh.js";import"./debounce-Be36O1Ab.js";import"./ListItem-nLG-781o.js";import"./FormHelperText-C8Jvf7bP.js";import"./FormLabel-MF6CzxjN.js";import"./List-BSVKZ0wr.js";import"./useIsFocusVisible-DEbTNWvz.js";import"./isHostComponent-DVu5iVWx.js";import"./ButtonBase-CKEbMwnW.js";import"./TransitionGroupContext-FeNnDXqj.js";import"./ownerDocument-DW-IO8s5.js";import"./ownerWindow-HkKU3E4x.js";import"./useControlled-0vpPKndq.js";import"./index-DBPVAcBX.js";import"./utils-DAOaxsLc.js";import"./Stack-Ds5ITe5E.js";import"./createStyled-C3GEIcOd.js";import"./useThemeProps-BDmyOQ5c.js";import"./Tooltip-DoyRbWb9.js";import"./Grow-BpzgBh-I.js";import"./Portal-Be1GH4ah.js";import"./resolveComponentProps-DH5wuSot.js";import"./Popper-DAO3a_fx.js";import"./Paper-Bv-8rqJG.js";import"./Box-DcPUBV1N.js";import"./CircularProgress-CEHxaweC.js";import"./DialogContent-BZZC3ZPL.js";import"./Fade-DrCoA42j.js";import"./Modal-C2qslhip.js";import"./getScrollbarSize-Bqq2hMjQ.js";import"./dialogActionsClasses-BlWxTtt7.js";import"./DialogTitle-CBL5DhvK.js";import"./Typography-CAaRogW8.js";import"./Menu-CAnOJYGy.js";import"./MenuList-De-H5WYL.js";import"./colorManipulator-DlY4JhNG.js";import"./IconButton-CY54VTm3.js";import"./Radio-mhEI_Lft.js";import"./SwitchBase-DFhbxMFU.js";import"./Checkbox-BuEVtAbr.js";import"./useMobilePicker-BzwZRuUY.js";import"./Select-Cia8mIUa.js";import"./ArrowDropDown-C5eUsI_E.js";import"./InputBase-C9_GkGNE.js";import"./useThemeProps-DjFwRijR.js";import"./InputAdornment-B5kJtHOQ.js";import"./visuallyHidden-Dan1xhjv.js";import"./Button-DU6-loxu.js";import"./Chip-CHLAMh3i.js";import"./MenuItem-DxqkPhH4.js";import"./Collapse-C5U5l6uF.js";import"./AlertTitle-D3upwBLV.js";import"./useSlot-CxZuq7zC.js";import"./Close-Dcbwwr41.js";import"./LinearProgress-Due1Z-ms.js";import"./Skeleton-B4juUFkj.js";import"./Divider-Cz7bC_1D.js";import"./Autocomplete-CRpfgiy9.js";import"./ListSubheader-DROGdpSN.js";import"./tableSortLabelClasses-Btt1VxyW.js";import"./FormControlLabel-rwZvAjIk.js";import"./DateTimePicker-CqM7OMZL.js";import"./Tabs-CzBTAREX.js";import"./DatePicker-DAwf6UZa.js";import"./WarningFilled-qIqi4h0v.js";import"./BaseButton-BMsK9NzI.js";import"./MuiPropsContext-Bg_x6l7d.js";import"./Tooltip-CtMQ7ejP.js";/*!
+ * Copyright (c) 2022-present, Okta, Inc. and/or its affiliates. All rights reserved.
+ * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the "License.")
+ *
+ * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *
+ * See the License for the specific language governing permissions and limitations under the License.
+ */const be=({columns:a=[],data:r=[],fetchMoreData:o,getRowId:d,hasError:p,hasRowSelection:f,initialState:n,isFetching:w,onGlobalFilterChange:N,onPaginationChange:g,onRowSelectionChange:y,rowsPerPage:ee=10,state:C,ToolbarButtons:E})=>{const{t:L}=ge(),O=e.useRef(null),[J,ae]=e.useState([]),[c,te]=e.useState();e.useEffect(()=>{c!==void 0&&(N==null||N(c))},[c,N]),e.useEffect(()=>{var s,m;try{(m=(s=O.current)==null?void 0:s.scrollToIndex)==null||m.call(s,0)}catch(u){console.error(u)}},[J,c]);const l=r.length??0,se=e.useCallback(()=>o?i.jsx(j,{children:i.jsx(A,{count:l,i18nKey:"table.fetchedrows.text",values:{totalRows:l}})}):i.jsx(j,{children:i.jsx(A,{count:l,i18nKey:"table.rows.text",values:{totalRows:l}})}),[o,l]),re=e.useCallback(({table:s})=>i.jsx(i.Fragment,{children:E&&i.jsx(E,{table:s})}),[E]),[b,oe]=e.useState({});e.useEffect(()=>{y==null||y(b)},[y,b]);const[t,ie]=e.useState((n==null?void 0:n.pagination)||{pageIndex:0,pageSize:ee}),v=e.useRef(r.length),ne=e.useCallback(s=>{r.length===v.current?ie(m=>s(m)):v.current=r.length},[r.length]);e.useEffect(()=>{const s=Math.floor(r.length/t.pageSize);!w&&t.pageIndex>s-1&&(o==null||o())},[r.length,o,w,t.pageIndex,t.pageSize]),e.useEffect(()=>{g==null||g({pageIndex:t.pageIndex,pageSize:t.pageSize})},[g,t.pageIndex,t.pageSize]);const me=e.useMemo(()=>({pagination:t,...n}),[n,t]),de=e.useMemo(()=>({pagination:{pageIndex:t.pageIndex,pageSize:t.pageSize},rowSelection:b,globalFilter:c,columnFilters:J,...C}),[t.pageIndex,t.pageSize,b,c,J,C]),ce=e.useMemo(()=>p?{children:L("table.error"),severity:"error"}:{},[p,L]),le=e.useMemo(()=>({rowsPerPageOptions:[],showFirstButton:!1,showLastButton:!1}),[]),K=e.useCallback(s=>{var m,u,M,V,B,h,P;return typeof((M=(u=(m=s.components)==null?void 0:m.MuiCheckbox)==null?void 0:u.styleOverrides)==null?void 0:M.root)=="function"?(P=(h=(B=(V=s.components)==null?void 0:V.MuiCheckbox)==null?void 0:B.styleOverrides)==null?void 0:h.root)==null?void 0:P.call(h,{ownerState:{},theme:s}):""},[]),ue=fe({columns:a,data:r,enableMultiRowSelection:f,enablePagination:!0,enableRowSelection:f,enableSorting:!1,getRowId:d,initialState:me,muiSelectAllCheckboxProps:{sx:K},muiSelectCheckboxProps:{sx:K},muiPaginationProps:le,muiToolbarAlertBannerProps:ce,onColumnFiltersChange:ae,onGlobalFilterChange:te,onPaginationChange:ne,onRowSelectionChange:oe,renderBottomToolbarCustomActions:se,renderTopToolbarCustomActions:re,rowVirtualizerInstanceRef:O,rowVirtualizerOptions:{overscan:4},state:de});return i.jsx(Ne,{table:ue})},I=e.memo(be);I.displayName="PaginatedTable";const{fn:z}=__STORYBOOK_MODULE_TEST__,Ga={component:I,decorators:[pe],argTypes:{columns:{control:"object",type:{required:!0,name:"other",value:"MaterialReactTableProps<TData>"}},data:{control:"object",type:{required:!0,name:"other",value:"MaterialReactTableProps<TData>"}},getRowId:{},fetchMoreData:{},hasError:{control:"boolean"},hasRowSelection:{control:"boolean"},initialState:{control:"object"},isFetching:{control:"boolean"},onGlobalFilterChange:{},onPaginationChange:{},onRowSelectionChange:{},state:{control:"object"},ToolbarButtons:{},rowsPerPage:{table:{defaultValue:{summary:"10"}}}},args:{onPaginationChange:z(),onRowSelectionChange:z()},tags:["deprecated","labs-export"]},T=[{accessorKey:"name.firstName",header:"First Name"},{accessorKey:"name.lastName",header:"Last Name"},{accessorKey:"address",Cell:({cell:a})=>a.getValue().concat(","),header:"Address"},{accessorKey:"city",header:"City"},{accessorKey:"state",header:"State"}],x=[{address:"261 Erdman Ford",city:"East Daphne",id:"234823773",name:{firstName:"John",lastName:"Doe"},state:"Kentucky"},{address:"769 Dominic Grove",city:"Columbus",id:"234823774",name:{firstName:"Jane",lastName:"Doe"},state:"Ohio"},{address:"566 Brakus Inlet",city:"South Linda",id:"234823775",name:{firstName:"Joe",lastName:"Doe"},state:"West Virginia"},{address:"722 Emie Stream",city:"Lincoln",id:"234823776",name:{firstName:"Kevin",lastName:"Vandy"},state:"Nebraska"},{address:"32188 Larkin Turnpike",city:"Omaha",id:"234823777",name:{firstName:"Joshua",lastName:"Rolluffs"},state:"Nebraska"},{address:"261 Erdman Ford",city:"East Daphne",id:"334823773",name:{firstName:"John",lastName:"Doe"},state:"Kentucky"},{address:"769 Dominic Grove",city:"Columbus",id:"334823774",name:{firstName:"Jane",lastName:"Doe"},state:"Ohio"},{address:"566 Brakus Inlet",city:"South Linda",id:"334823775",name:{firstName:"Joe",lastName:"Doe"},state:"West Virginia"},{address:"722 Emie Stream",city:"Lincoln",id:"334823776",name:{firstName:"Kevin",lastName:"Vandy"},state:"Nebraska"},{address:"32188 Larkin Turnpike",city:"Omaha",id:"334823777",name:{firstName:"Joshua",lastName:"Rolluffs"},state:"Nebraska"},{address:"261 Erdman Ford",city:"East Daphne",id:"434823773",name:{firstName:"John",lastName:"Doe"},state:"Kentucky"},{address:"769 Dominic Grove",city:"Columbus",id:"434823774",name:{firstName:"Jane",lastName:"Doe"},state:"Ohio"},{address:"566 Brakus Inlet",city:"South Linda",id:"434823775",name:{firstName:"Joe",lastName:"Doe"},state:"West Virginia"},{address:"722 Emie Stream",city:"Lincoln",id:"434823776",name:{firstName:"Kevin",lastName:"Vandy"},state:"Nebraska"},{address:"32188 Larkin Turnpike",city:"Omaha",id:"434823777",name:{firstName:"Joshua",lastName:"Rolluffs"},state:"Nebraska"},{address:"261 Erdman Ford",city:"East Daphne",id:"534823773",name:{firstName:"John",lastName:"Doe"},state:"Kentucky"},{address:"769 Dominic Grove",city:"Columbus",id:"534823774",name:{firstName:"Jane",lastName:"Doe"},state:"Ohio"},{address:"566 Brakus Inlet",city:"South Linda",id:"534823775",name:{firstName:"Joe",lastName:"Doe"},state:"West Virginia"},{address:"722 Emie Stream",city:"Lincoln",id:"534823776",name:{firstName:"Kevin",lastName:"Vandy"},state:"Nebraska"},{address:"32188 Larkin Turnpike",city:"Omaha",id:"534823777",name:{firstName:"Joshua",lastName:"Rolluffs"},state:"Nebraska"},{address:"261 Erdman Ford",city:"East Daphne",id:"634823773",name:{firstName:"John",lastName:"Doe"},state:"Kentucky"},{address:"769 Dominic Grove",city:"Columbus",id:"634823774",name:{firstName:"Jane",lastName:"Doe"},state:"Ohio"},{address:"566 Brakus Inlet",city:"South Linda",id:"634823775",name:{firstName:"Joe",lastName:"Doe"},state:"West Virginia"},{address:"722 Emie Stream",city:"Lincoln",id:"634823776",name:{firstName:"Kevin",lastName:"Vandy"},state:"Nebraska"},{address:"32188 Larkin Turnpike",city:"Omaha",id:"634823777",name:{firstName:"Joshua",lastName:"Rolluffs"},state:"Nebraska"},{address:"261 Erdman Ford",city:"East Daphne",id:"734823773",name:{firstName:"John",lastName:"Doe"},state:"Kentucky"},{address:"769 Dominic Grove",city:"Columbus",id:"734823774",name:{firstName:"Jane",lastName:"Doe"},state:"Ohio"},{address:"566 Brakus Inlet",city:"South Linda",id:"734823775",name:{firstName:"Joe",lastName:"Doe"},state:"West Virginia"},{address:"722 Emie Stream",city:"Lincoln",id:"734823776",name:{firstName:"Kevin",lastName:"Vandy"},state:"Nebraska"},{address:"32188 Larkin Turnpike",city:"Omaha",id:"734823777",name:{firstName:"Joshua",lastName:"Rolluffs"},state:"Nebraska"},{address:"261 Erdman Ford",city:"East Daphne",id:"834823773",name:{firstName:"John",lastName:"Doe"},state:"Kentucky"},{address:"769 Dominic Grove",city:"Columbus",id:"834823774",name:{firstName:"Jane",lastName:"Doe"},state:"Ohio"},{address:"566 Brakus Inlet",city:"South Linda",id:"834823775",name:{firstName:"Joe",lastName:"Doe"},state:"West Virginia"},{address:"722 Emie Stream",city:"Lincoln",id:"834823776",name:{firstName:"Kevin",lastName:"Vandy"},state:"Nebraska"},{address:"32188 Larkin Turnpike",city:"Omaha",id:"834823777",name:{firstName:"Joshua",lastName:"Rolluffs"},state:"Nebraska"},{address:"261 Erdman Ford",city:"East Daphne",id:"934823773",name:{firstName:"John",lastName:"Doe"},state:"Kentucky"},{address:"769 Dominic Grove",city:"Columbus",id:"934823774",name:{firstName:"Jane",lastName:"Doe"},state:"Ohio"},{address:"566 Brakus Inlet",city:"South Linda",id:"934823775",name:{firstName:"Joe",lastName:"Doe"},state:"West Virginia"},{address:"722 Emie Stream",city:"Lincoln",id:"934823776",name:{firstName:"Kevin",lastName:"Vandy"},state:"Nebraska"},{address:"32188 Larkin Turnpike",city:"Omaha",id:"934823777",name:{firstName:"Joshua",lastName:"Rolluffs"},state:"Nebraska"}],k={args:{columns:T,data:x,getRowId:({id:a})=>a}},S={args:{columns:T,data:x,getRowId:({id:a})=>a},render:function(r){const o=e.useRef(15),d=e.useMemo(()=>r.data??[],[r]),[p,f]=e.useState(d.slice(0,o.current)),n=e.useCallback(()=>{o.current=o.current+10,f(d.slice(0,Math.min(o.current,d.length)))},[d]);return i.jsx(I,{...r,data:p,fetchMoreData:n})}},D={args:{columns:T,data:x,getRowId:({id:a})=>a,hasRowSelection:!0}},R={args:{columns:T,data:x,getRowId:({id:a})=>a,ToolbarButtons:({table:a})=>i.jsx(ye,{label:"New Action",onClick:()=>console.info(a.getState()),variant:"primary"})}};var F,W,_;k.parameters={...k.parameters,docs:{...(F=k.parameters)==null?void 0:F.docs,source:{originalSource:`{
+  args: {
+    columns,
+    data,
+    getRowId: ({
+      id
+    }: {
+      id: string;
+    }) => id
+  }
+}`,...(_=(W=k.parameters)==null?void 0:W.docs)==null?void 0:_.source}}};var G,U,q;S.parameters={...S.parameters,docs:{...(G=S.parameters)==null?void 0:G.docs,source:{originalSource:`{
+  args: {
+    columns,
+    data,
+    getRowId: ({
+      id
+    }: {
+      id: string;
+    }) => id
+  },
+  render: function C(args) {
+    const countRef = useRef(15);
+    const dataArg = useMemo(() => args.data ?? [], [args]);
+    const [data, setData] = useState(dataArg.slice(0, countRef.current));
+    const fetchMoreData = useCallback(() => {
+      countRef.current = countRef.current + 10;
+      setData(dataArg.slice(0, Math.min(countRef.current, dataArg.length)));
+    }, [dataArg]);
+    return <PaginatedTable {...args} data={data} fetchMoreData={fetchMoreData} />;
+  }
+}`,...(q=(U=S.parameters)==null?void 0:U.docs)==null?void 0:q.source}}};var Y,H,Q;D.parameters={...D.parameters,docs:{...(Y=D.parameters)==null?void 0:Y.docs,source:{originalSource:`{
+  args: {
+    columns,
+    data,
+    getRowId: ({
+      id
+    }: {
+      id: string;
+    }) => id,
+    hasRowSelection: true
+  }
+}`,...(Q=(H=D.parameters)==null?void 0:H.docs)==null?void 0:Q.source}}};var X,Z,$;R.parameters={...R.parameters,docs:{...(X=R.parameters)==null?void 0:X.docs,source:{originalSource:`{
+  args: {
+    columns,
+    data,
+    getRowId: ({
+      id
+    }: {
+      id: string;
+    }) => id,
+    ToolbarButtons: ({
+      table
+    }) => <Button label="New Action" onClick={() => console.info(table.getState())} variant="primary" />
+  }
+}`,...($=(Z=R.parameters)==null?void 0:Z.docs)==null?void 0:$.source}}};const Ua=["BasicUsage","Pagination","Selection","CustomToolbar"];export{k as BasicUsage,R as CustomToolbar,S as Pagination,D as Selection,Ua as __namedExportsOrder,Ga as default};

package/dist/assets/Paper-Bv-8rqJG.js

@@ -0,0 +1 @@
+import{M as x,N as g,b,_ as P,a as s,c as M,d as R,f as $,l}from"./tableRowClasses-SdduqaRI.js";import{r as y,j as C}from"./iframe-DE4RuJrv.js";const v=a=>{let e;return a<1?e=5.11916*a**2:e=4.5*Math.log(a+1)+2,(e/100).toFixed(2)};function k(a){return x("MuiPaper",a)}g("MuiPaper",["root","rounded","outlined","elevation","elevation0","elevation1","elevation2","elevation3","elevation4","elevation5","elevation6","elevation7","elevation8","elevation9","elevation10","elevation11","elevation12","elevation13","elevation14","elevation15","elevation16","elevation17","elevation18","elevation19","elevation20","elevation21","elevation22","elevation23","elevation24"]);const m=["className","component","elevation","square","variant"],q=a=>{const{square:e,elevation:o,variant:t,classes:n}=a,r={root:["root",t,!e&&"rounded",t==="elevation"&&`elevation${o}`]};return $(r,k,n)},_=M("div",{name:"MuiPaper",slot:"Root",overridesResolver:(a,e)=>{const{ownerState:o}=a;return[e.root,e[o.variant],!o.square&&e.rounded,o.variant==="elevation"&&e[`elevation${o.elevation}`]]}})(({theme:a,ownerState:e})=>{var o;return s({backgroundColor:(a.vars||a).palette.background.paper,color:(a.vars||a).palette.text.primary,transition:a.transitions.create("box-shadow")},!e.square&&{borderRadius:a.shape.borderRadius},e.variant==="outlined"&&{border:`1px solid ${(a.vars||a).palette.divider}`},e.variant==="elevation"&&s({boxShadow:(a.vars||a).shadows[e.elevation]},!a.vars&&a.palette.mode==="dark"&&{backgroundImage:`linear-gradient(${l.alpha("#fff",v(e.elevation))}, ${l.alpha("#fff",v(e.elevation))})`},a.vars&&{backgroundImage:(o=a.vars.overlays)==null?void 0:o[e.elevation]}))}),U=y.forwardRef(function(e,o){const t=b({props:e,name:"MuiPaper"}),{className:n,component:r="div",elevation:d=1,square:p=!1,variant:u="elevation"}=t,c=P(t,m),i=s({},t,{component:r,elevation:d,square:p,variant:u}),f=q(i);return C.jsx(_,s({as:r,ownerState:i,className:R(f.root,n),ref:o},c))});export{U as P};

package/dist/assets/PasswordField.stories-RlpYEesu.js

@@ -0,0 +1,121 @@
+import{r as n,j as t}from"./iframe-DE4RuJrv.js";import{a as De}from"./axeRun-QswtvkOz.js";import{O as _e}from"./OdysseyStorybookThemeDecorator-B7y7aS60.js";import{u as Se}from"./useStoryArgOrLocalState-CRQAGSTX.js";import{f as d}from"./fieldComponentPropsMetaData-C9gCwuus.js";import{M as je}from"./Field-BYLEUHch.js";import{a as He,t as E}from"./OdysseyThemeProvider-CCwl8LYd.js";import{g as Ae,u as We}from"./inputUtils-DtvLbmm9.js";import{I as ze}from"./InputBase-C9_GkGNE.js";import{I as Ke}from"./InputAdornment-B5kJtHOQ.js";import{I as Ne}from"./IconButton-CY54VTm3.js";import{M as Ue}from"./Hide-B8GBii5B.js";import{M as qe}from"./Show-CPDqp9eP.js";import{P as u}from"./tableRowClasses-SdduqaRI.js";import{M as Ye}from"./Stack-BlNTLl9F.js";import"./preload-helper-Dp1pzeXC.js";import"./axe-CZ-24O2A.js";import"./index-BAELNoi-.js";import"./OdysseyProvider-CVwRS5Sq.js";import"./ScopedCssBaseline-DLzkuFGv.js";import"./Box-GItunEmH.js";import"./Box-DcPUBV1N.js";import"./List-BSVKZ0wr.js";import"./ListItem-nLG-781o.js";import"./FormHelperText-C8Jvf7bP.js";import"./FormLabel-MF6CzxjN.js";import"./useIsFocusVisible-DEbTNWvz.js";import"./isHostComponent-DVu5iVWx.js";import"./ButtonBase-CKEbMwnW.js";import"./TransitionGroupContext-FeNnDXqj.js";import"./ScreenReaderText-6hJD_NSR.js";import"./visuallyHidden-Dan1xhjv.js";import"./FieldHint-Cw2XBNxH.js";import"./Typography-B7LPQ65D.js";import"./Typography-CAaRogW8.js";import"./useUniqueId-ej4W3xOJ.js";import"./createUniqueId-BHjR7HQF.js";import"./WarningFilled-qIqi4h0v.js";import"./ownerWindow-HkKU3E4x.js";import"./ownerDocument-DW-IO8s5.js";import"./debounce-Be36O1Ab.js";import"./Stack-Ds5ITe5E.js";import"./createStyled-C3GEIcOd.js";import"./useThemeProps-BDmyOQ5c.js";const Ge=n.forwardRef(({ariaDescribedBy:o,autoCompleteType:a,defaultValue:r,errorMessage:s,errorMessageList:e,hasInitialFocus:p,hint:m,id:C,inputRef:O,isDisabled:Ee=!1,isFullWidth:Ce=!1,isOptional:R=!1,hasShowPassword:k=!0,isReadOnly:B,label:Oe,name:D,onChange:y,onFocus:_,onBlur:j,placeholder:H,testId:A,translate:W,value:z},K)=>{const{t:N}=He(),[f,Re]=n.useState("password"),U=n.useCallback(()=>{Re(i=>i==="password"?"text":"password")},[]),Ie=n.useRef(Ae({controlledValue:z,uncontrolledValue:r})),q=We({defaultValue:r,value:z,controlState:Ie.current}),Y=n.useRef(null);n.useImperativeHandle(O,()=>({focus:()=>{var i;(i=Y.current)==null||i.focus()}}),[]);const G=n.useCallback(i=>{y==null||y(i)},[y]),Le=n.useCallback(({ariaDescribedBy:i,errorMessageElementId:ke,id:I,labelElementId:Be})=>t.jsx(ze,{...q,"aria-describedby":i,autoComplete:f==="password"?a:"off",autoFocus:p,endAdornment:k&&t.jsx(Ke,{position:"end",children:t.jsx(Ne,{"aria-controls":I,"aria-label":N("passwordfield.icon.label.show"),"aria-pressed":f==="text",onClick:U,children:f==="password"?t.jsx(qe,{}):t.jsx(Ue,{})})}),id:I,inputProps:{"aria-errormessage":ke,"aria-labelledby":Be,"data-se":A,role:"textbox"},inputRef:Y,name:D??I,onBlur:j,onChange:G,onFocus:_,placeholder:H,readOnly:B,ref:K,required:!R,translate:W,type:f}),[a,p,q,N,U,f,D,G,_,j,H,R,B,k,K,A,W]);return t.jsx(je,{ariaDescribedBy:o,errorMessage:s,errorMessageList:e,fieldType:"single",hasVisibleLabel:!0,hint:m,id:C,isDisabled:Ee,isFullWidth:Ce,isOptional:R,label:Oe,renderFieldComponent:Le})}),g=n.memo(Ge);g.displayName="PasswordField";const{useCallback:Me}=__STORYBOOK_MODULE_PREVIEW_API__,{expect:l,fn:L,userEvent:w,within:Ve}=__STORYBOOK_MODULE_TEST__,Wa={component:g,decorators:[_e],argTypes:{autoCompleteType:{control:"text",description:"The native HTML [autocomplete](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete) attribute for enabling browser autofill (e.g., `email`, `username`, `current-password`)",table:{category:"Functional",type:{summary:"string"}}},defaultValue:{control:"text",description:"If `value` is undefined, the field is uncontrolled and `defaultValue` provides its initial text",table:{category:"Functional",type:{summary:"string"},defaultValue:{summary:void 0}}},errorMessage:d.errorMessage,errorMessageList:d.errorMessageList,hasInitialFocus:{control:!1,description:"If `true`, the component will receive focus automatically",table:{category:"Functional",type:{summary:"boolean"}}},hasShowPassword:{control:"boolean",description:"If `true`, the show/hide eye icon is not shown to the user",table:{category:"Visual",type:{summary:"boolean"},defaultValue:{summary:"true"}}},hint:d.hint,id:d.id,isDisabled:d.isDisabled,isFullWidth:d.isFullWidth,isOptional:d.isOptional,isReadOnly:d.isReadOnly,label:{control:"text",description:"The label for the `input` element",table:{category:"Visual",type:{summary:"string"}},type:{required:!0,name:"string"}},onBlur:{description:"Callback fired after the input loses focus; useful for validation or analytics hooks",table:{category:"Functional",type:{summary:"func"}}},onChange:{description:"Callback fired whenever the value changes; required when controlling the component via `value`",table:{category:"Functional",type:{summary:"func"}}},onFocus:{description:"Callback fired when the input gains focus; helpful for analytics or guided workflows",table:{category:"Functional",type:{summary:"func"}}},placeholder:{control:"text",description:"The short hint displayed in the `input` before the user enters a value",table:{category:"Visual",type:{summary:"string"}}},value:{control:"text",description:"If `value` is provided, you control the input externally and must handle updates with `onChange`",table:{category:"Functional",type:{summary:"string"}}}},args:{autoCompleteType:"current-password",hasShowPassword:!0,id:"password-input",isOptional:!1,label:"Password",onBlur:L(),onChange:L(),onFocus:L(),value:""}},c={args:{value:""},argTypes:{defaultValue:{control:!1}},render:function(a,r){const{defaultValue:s,...e}=a,{value:p,setValue:m}=Se({args:a,argKey:"value",context:r,defaultValue:a.value??""}),C=Me(O=>{m(O.target.value)},[m]);return t.jsx(g,{...e,onChange:C,value:p})}},Je=async({canvasElement:o,step:a})=>{await a("toggle password",async()=>{const r=Ve(o),s=r.getByRole("textbox",{name:"Password"});l(s).toHaveAttribute("type","password");const e=r.getByRole("button",{name:E("passwordfield.icon.label.show")});e&&(await w.type(s,"password",{delay:50}),await w.click(e),await w.tab(),l(s).toHaveAttribute("type","text"),l(e.ariaLabel).toBe(E("passwordfield.icon.label.show")),l(e.ariaPressed).toBe("true"),await w.click(e),l(s).toHaveAttribute("type","password"),l(e.ariaLabel).toBe(E("passwordfield.icon.label.show")),l(e.ariaPressed).toBe("false")),await De("Password Field Default")})},Qe=async({canvasElement:o,step:a})=>{await a("toggle password",()=>{const r=Ve(o),s=r.getByRole("textbox",{name:"Password"});l(s).toHaveAttribute("type","password");const e=r.queryByRole("button",{name:E("passwordfield.icon.label.show")});l(e).toBe(null)})},h={...u(c,{play:Je})},b={...u(c,{parameters:{docs:{description:{story:"The values of disabled inputs will not be submitted."}}},args:{isDisabled:!0,value:"password"}})},v={...u(c,{args:{errorMessage:"Error Message"}})},F={...u(c,{args:{errorMessage:"Error Message",errorMessageList:["Error A"]}})},x={...u(c,{args:{hint:"Hint text"}})},P={...u(c,{args:{hasShowPassword:!1},play:Qe})},T={...u(c,{args:{isOptional:!0}})},S={...u(c,{parameters:{docs:{description:{story:"The values of readonly inputs will be submitted."}}},args:{isReadOnly:!0,value:"password"}})},M={parameters:{docs:{description:{story:"This `PasswordField` will receive focus when the page loads"}}},args:{hasInitialFocus:!0,label:"Label",value:""},render:function(a,r){const{value:s,setValue:e}=Se({args:a,argKey:"value",context:r,defaultValue:a.value??""}),p=Me(m=>{e(m.target.value)},[e]);return t.jsxs(Ye,{spacing:2,children:[t.jsx(g,{label:"Not Focused"}),t.jsx(g,{...a,onChange:p,value:s})]})}},V={parameters:{docs:{description:{story:"When `value` is omitted the field manages its own state via `defaultValue`."}}},args:{defaultValue:"Initial password",value:void 0},argTypes:{value:{control:!1}},render:o=>{const{value:a,...r}=o;return t.jsx(g,{...r})}};var J,Q,X;h.parameters={...h.parameters,docs:{...(J=h.parameters)==null?void 0:J.docs,source:{originalSource:`{
+  ...deepmerge(PasswordFieldTemplate, {
+    play: passwordFieldPlay
+  })
+}`,...(X=(Q=h.parameters)==null?void 0:Q.docs)==null?void 0:X.source}}};var Z,$,ee;b.parameters={...b.parameters,docs:{...(Z=b.parameters)==null?void 0:Z.docs,source:{originalSource:`{
+  ...deepmerge(PasswordFieldTemplate, {
+    parameters: {
+      docs: {
+        description: {
+          story: "The values of disabled inputs will not be submitted."
+        }
+      }
+    },
+    args: {
+      isDisabled: true,
+      value: "password"
+    }
+  })
+}`,...(ee=($=b.parameters)==null?void 0:$.docs)==null?void 0:ee.source}}};var ae,re,se;v.parameters={...v.parameters,docs:{...(ae=v.parameters)==null?void 0:ae.docs,source:{originalSource:`{
+  ...deepmerge(PasswordFieldTemplate, {
+    args: {
+      errorMessage: "Error Message"
+    }
+  })
+}`,...(se=(re=v.parameters)==null?void 0:re.docs)==null?void 0:se.source}}};var te,oe,ne;F.parameters={...F.parameters,docs:{...(te=F.parameters)==null?void 0:te.docs,source:{originalSource:`{
+  ...deepmerge(PasswordFieldTemplate, {
+    args: {
+      errorMessage: "Error Message",
+      errorMessageList: ["Error A"]
+    }
+  })
+}`,...(ne=(oe=F.parameters)==null?void 0:oe.docs)==null?void 0:ne.source}}};var le,ie,de;x.parameters={...x.parameters,docs:{...(le=x.parameters)==null?void 0:le.docs,source:{originalSource:`{
+  ...deepmerge(PasswordFieldTemplate, {
+    args: {
+      hint: "Hint text"
+    }
+  })
+}`,...(de=(ie=x.parameters)==null?void 0:ie.docs)==null?void 0:de.source}}};var ue,ce,pe;P.parameters={...P.parameters,docs:{...(ue=P.parameters)==null?void 0:ue.docs,source:{originalSource:`{
+  ...deepmerge(PasswordFieldTemplate, {
+    args: {
+      hasShowPassword: false
+    },
+    play: noShowPasswordPlay
+  })
+}`,...(pe=(ce=P.parameters)==null?void 0:ce.docs)==null?void 0:pe.source}}};var me,ge,fe;T.parameters={...T.parameters,docs:{...(me=T.parameters)==null?void 0:me.docs,source:{originalSource:`{
+  ...deepmerge(PasswordFieldTemplate, {
+    args: {
+      isOptional: true
+    }
+  })
+}`,...(fe=(ge=T.parameters)==null?void 0:ge.docs)==null?void 0:fe.source}}};var ye,we,he;S.parameters={...S.parameters,docs:{...(ye=S.parameters)==null?void 0:ye.docs,source:{originalSource:`{
+  ...deepmerge(PasswordFieldTemplate, {
+    parameters: {
+      docs: {
+        description: {
+          story: "The values of readonly inputs will be submitted."
+        }
+      }
+    },
+    args: {
+      isReadOnly: true,
+      value: "password"
+    }
+  })
+}`,...(he=(we=S.parameters)==null?void 0:we.docs)==null?void 0:he.source}}};var be,ve,Fe;M.parameters={...M.parameters,docs:{...(be=M.parameters)==null?void 0:be.docs,source:{originalSource:`{
+  parameters: {
+    docs: {
+      description: {
+        story: "This \`PasswordField\` will receive focus when the page loads"
+      }
+    }
+  },
+  args: {
+    hasInitialFocus: true,
+    label: "Label",
+    value: ""
+  },
+  render: function Render(args, context) {
+    const {
+      value,
+      setValue
+    } = useStoryArgOrLocalState<PasswordFieldProps, "value">({
+      args,
+      argKey: "value",
+      context,
+      defaultValue: args.value ?? ""
+    });
+    const handleChange = useCallback((event: ChangeEvent<HTMLInputElement>) => {
+      setValue(event.target.value);
+    }, [setValue]);
+    return <Stack spacing={2}>
+        <PasswordField label="Not Focused" />
+        <PasswordField {...args} onChange={handleChange} value={value} />
+      </Stack>;
+  }
+}`,...(Fe=(ve=M.parameters)==null?void 0:ve.docs)==null?void 0:Fe.source}}};var xe,Pe,Te;V.parameters={...V.parameters,docs:{...(xe=V.parameters)==null?void 0:xe.docs,source:{originalSource:`{
+  parameters: {
+    docs: {
+      description: {
+        story: "When \`value\` is omitted the field manages its own state via \`defaultValue\`."
+      }
+    }
+  },
+  args: {
+    defaultValue: "Initial password",
+    value: undefined
+  },
+  argTypes: {
+    value: {
+      control: false
+    }
+  },
+  render: props => {
+    const {
+      value,
+      ...rest
+    } = props;
+    void value;
+    return <PasswordField {...rest} />;
+  }
+}`,...(Te=(Pe=V.parameters)==null?void 0:Pe.docs)==null?void 0:Te.source}}};const za=["Default","Disabled","Error","ErrorsList","Hint","NoShowPassword","Optional","ReadOnly","Focused","Uncontrolled"];export{h as Default,b as Disabled,v as Error,F as ErrorsList,M as Focused,x as Hint,P as NoShowPassword,T as Optional,S as ReadOnly,V as Uncontrolled,za as __namedExportsOrder,Wa as default};

package/dist/assets/Picker.stories-BzNZYpEc.js

@@ -0,0 +1,44 @@
+import{j as e}from"./iframe-DE4RuJrv.js";import{O as W}from"./OdysseyStorybookThemeDecorator-B7y7aS60.js";import{p as G,M as R}from"./pickerComponentPropsMetaData-BPcY4jWd.js";import{M as z}from"./Folder-jR_3li1K.js";import{M as N}from"./Globe-FAvybPgY.js";import{M as p}from"./Settings-D7DZLft8.js";import"./preload-helper-Dp1pzeXC.js";import"./OdysseyThemeProvider-CCwl8LYd.js";import"./tableRowClasses-SdduqaRI.js";import"./WarningFilled-qIqi4h0v.js";import"./index-BAELNoi-.js";import"./OdysseyProvider-CVwRS5Sq.js";import"./ScopedCssBaseline-DLzkuFGv.js";import"./Typography-B7LPQ65D.js";import"./Typography-CAaRogW8.js";import"./useAutocomplete-NsoONBGQ.js";import"./index.esm-BZBFx5zE.js";import"./ButtonBase-CKEbMwnW.js";import"./useIsFocusVisible-DEbTNWvz.js";import"./TransitionGroupContext-FeNnDXqj.js";import"./Field-BYLEUHch.js";import"./Box-GItunEmH.js";import"./Box-DcPUBV1N.js";import"./List-BSVKZ0wr.js";import"./ListItem-nLG-781o.js";import"./FormHelperText-C8Jvf7bP.js";import"./FormLabel-MF6CzxjN.js";import"./isHostComponent-DVu5iVWx.js";import"./ScreenReaderText-6hJD_NSR.js";import"./visuallyHidden-Dan1xhjv.js";import"./FieldHint-Cw2XBNxH.js";import"./useUniqueId-ej4W3xOJ.js";import"./createUniqueId-BHjR7HQF.js";import"./inputUtils-DtvLbmm9.js";import"./InputBase-C9_GkGNE.js";import"./ownerWindow-HkKU3E4x.js";import"./ownerDocument-DW-IO8s5.js";import"./debounce-Be36O1Ab.js";import"./Autocomplete-CRpfgiy9.js";import"./ArrowDropDown-C5eUsI_E.js";import"./createSvgIcon-DMOOI9wR.js";import"./Close-Dcbwwr41.js";import"./Paper-Bv-8rqJG.js";import"./Popper-DAO3a_fx.js";import"./Portal-Be1GH4ah.js";import"./resolveComponentProps-DH5wuSot.js";import"./index-DBPVAcBX.js";import"./useControlled-0vpPKndq.js";import"./Chip-CHLAMh3i.js";import"./IconButton-CY54VTm3.js";import"./ListSubheader-DROGdpSN.js";import"./fieldComponentPropsMetaData-C9gCwuus.js";const J=[{value:"en",label:"English"},{value:"fr",label:"French"},{value:"es",label:"Spanish"},{value:"jp",label:"Japanese"}],C=[{value:"en",label:"English",description:"A description of the English language"},{value:"fr",label:"French",description:"Français"},{value:"jp",label:"Japanese",description:"日本語"},{value:"es",label:"Spanish",description:"Español"}],I=[{value:"en",label:"English",description:"A description of the English language",metaData:[{icon:e.jsx(z,{}),detailText:"1"}]},{value:"fr",label:"French",description:"Français",metaData:[{icon:e.jsx(p,{}),detailText:"100"}]},{value:"jp",label:"Japanese",description:"日本語",metaData:[{icon:e.jsx(N,{}),detailText:"1000"}]},{value:"es",label:"Spanish",description:"Español",metaData:[{icon:e.jsx(p,{}),detailText:"37"}]}],P=G(),Ie={component:R,decorators:[W],tags:["labs-export"],argTypes:P,args:{label:"Picker label",hint:"Optional hint text for picker",options:J}},a={},o={args:{options:C}},r={args:{options:I}},s={args:{options:[{value:"en",label:"English",group:"Germanic Languages"},{value:"fr",label:"French",group:"Romance Languages"},{value:"es",label:"Spanish",group:"Romance Languages"},{value:"jp",label:"Japanese",group:"Japonic Languages"}],groupOptionsBy:T=>T.group}},t={args:{hasMultipleChoices:!0}},i={args:{isLoading:!0,options:[]}},n={args:{isDisabled:!0,value:J[0]}};var l,m,c;a.parameters={...a.parameters,docs:{...(l=a.parameters)==null?void 0:l.docs,source:{originalSource:"{}",...(c=(m=a.parameters)==null?void 0:m.docs)==null?void 0:c.source}}};var u,g,d;o.parameters={...o.parameters,docs:{...(u=o.parameters)==null?void 0:u.docs,source:{originalSource:`{
+  args: {
+    options: languagesNoMetadata
+  }
+}`,...(d=(g=o.parameters)==null?void 0:g.docs)==null?void 0:d.source}}};var h,b,v;r.parameters={...r.parameters,docs:{...(h=r.parameters)==null?void 0:h.docs,source:{originalSource:`{
+  args: {
+    options: languagesKitchenSink
+  }
+}`,...(v=(b=r.parameters)==null?void 0:b.docs)==null?void 0:v.source}}};var S,M,f;s.parameters={...s.parameters,docs:{...(S=s.parameters)==null?void 0:S.docs,source:{originalSource:`{
+  args: {
+    options: [{
+      value: "en",
+      label: "English",
+      group: "Germanic Languages"
+    }, {
+      value: "fr",
+      label: "French",
+      group: "Romance Languages"
+    }, {
+      value: "es",
+      label: "Spanish",
+      group: "Romance Languages"
+    }, {
+      value: "jp",
+      label: "Japanese",
+      group: "Japonic Languages"
+    }],
+    groupOptionsBy: option => option.group
+  }
+}`,...(f=(M=s.parameters)==null?void 0:M.docs)==null?void 0:f.source}}};var x,D,L;t.parameters={...t.parameters,docs:{...(x=t.parameters)==null?void 0:x.docs,source:{originalSource:`{
+  args: {
+    hasMultipleChoices: true
+  }
+}`,...(L=(D=t.parameters)==null?void 0:D.docs)==null?void 0:L.source}}};var j,E,y;i.parameters={...i.parameters,docs:{...(j=i.parameters)==null?void 0:j.docs,source:{originalSource:`{
+  args: {
+    isLoading: true,
+    options: []
+  }
+}`,...(y=(E=i.parameters)==null?void 0:E.docs)==null?void 0:y.source}}};var F,O,k;n.parameters={...n.parameters,docs:{...(F=n.parameters)==null?void 0:F.docs,source:{originalSource:`{
+  args: {
+    isDisabled: true,
+    value: languagesNoDescription[0]
+  }
+}`,...(k=(O=n.parameters)==null?void 0:O.docs)==null?void 0:k.source}}};const Pe=["LabelOnly","WithDescription","WithMetadata","WithGroups","MultipleSelect","Loading","Disabled"];export{n as Disabled,a as LabelOnly,i as Loading,t as MultipleSelect,o as WithDescription,s as WithGroups,r as WithMetadata,Pe as __namedExportsOrder,Ie as default};