Deploying to gh-pages from @ d157444 🚀

Author: github-merge-queue[bot]

nightly/assets/Achievement-UJOGRBqF.js

@@ -0,0 +1,55 @@
+import{j as n}from"./iframe-CyQHbHxC.js";import{useMDXComponents as s}from"./index-CAqjzf3-.js";import{M as p,C as c}from"./blocks-B1BKQjJv.js";import"./Tag-CpzoOvR8.js";import"./index-DVtJUpci.js";import{C as a}from"./ControlsWithNote-BNokvIjE.js";import{D as m}from"./DocsHeader-D3sFB4u7.js";import{F as h}from"./Footer-B6F6QaBp.js";import"./CommandsAndQueries-CQRKG-No.js";import"./PageNotFound-BwogsJtD.js";import{C as o,D as r}from"./ActionSheet.stories-DDwlV7DO.js";import"./preload-helper-PPVm8Dsz.js";import"./information-DjNNiNHU.js";import"./sys-enter-2-BgUfXyT0.js";import"./alert-CTY_LxCJ.js";import"./index-1GAsnXVc.js";import"./index-DUAJQglC.js";import"./Link-8vAV1o0p.js";import"./copy-BMtlJq5M.js";import"./copy-DaAXI0wh.js";import"./GitHub-Mark-B7CobaJ5.js";import"./TableOfContent-5QHPn7EL.js";import"./index-DMBzjcEO.js";import"./index-hCRaM0Y7.js";import"./index-DdcJcuqo.js";import"./index-Dk8Vx9PA.js";import"./index-CyzsrkYQ.js";import"./AvatarSize-BtKTMFJ5.js";import"./employee-BPaLVEvo.js";import"./addCustomCSSWithScoping-iqlifjV6.js";import"./Illustrations-BxTCLiS4.js";import"./i18n-defaults-CFWtSmu6.js";import"./delete-BjTdR4Ty.js";import"./utils-ClisyTNb.js";function i(t){const e={code:"code",h2:"h2",p:"p",pre:"pre",strong:"strong",...s(),...t.components};return n.jsxs(n.Fragment,{children:[n.jsx(p,{of:o}),`
+`,n.jsx(m,{of:o,subComponents:["Button"]}),`
+`,n.jsx("br",{}),`
+`,n.jsx(e.h2,{id:"example",children:"Example"}),`
+`,n.jsx(c,{of:r}),`
+`,n.jsx(e.h2,{id:"properties",children:"Properties"}),`
+`,n.jsx(a,{of:r}),`
+`,n.jsx(e.h2,{id:"opening-actionsheets",children:"Opening ActionSheets"}),`
+`,n.jsx("br",{}),`
+`,n.jsxs(e.p,{children:["You can open and close the ",n.jsx(e.code,{children:"ActionSheet"})," component in a declarative way using the ",n.jsx(e.code,{children:"open"})," and ",n.jsx(e.code,{children:"opener"})," prop."]}),`
+`,n.jsx(e.pre,{children:n.jsx(e.code,{className:"language-tsx",children:`const MyComponentWithActionSheet = () => {
+  const [actionSheetIsOpen, setActionSheetIsOpen] = useState(false);
+  return (
+    <>
+      <Button
+        id={'openActionSheetBtn'}
+        onClick={() => {
+          setActionSheetIsOpen(true);
+        }}
+      >
+        Open Action Sheet
+      </Button>
+      <ActionSheet
+        opener={'openActionSheetBtn'}
+        open={actionSheetIsOpen}
+        onClose={() => {
+          setActionSheetIsOpen(false);
+        }}
+      />
+    </>
+  );
+};
+`})}),`
+`,n.jsx(e.p,{children:n.jsxs(e.strong,{children:["Opening an ",n.jsx(e.code,{children:"ActionSheet"})," by reference"]})}),`
+`,n.jsxs(e.p,{children:["The ",n.jsx(e.code,{children:"ActionSheet"})," exposes a way to pass a reference of an element instead of an ",n.jsx(e.code,{children:"id"})," to the ",n.jsx(e.code,{children:"opener"}),` prop.
+You can do that by e.g. leveraging a React Ref.`]}),`
+`,n.jsx(e.pre,{children:n.jsx(e.code,{className:"language-jsx",children:`const ActionSheetComponent = () => {
+  const buttonRef = useRef(null);
+  const [open, setOpen] = useState(false);
+  const handleOpenerClick = (e) => {
+    setOpen((prev) => !prev);
+  };
+  return (
+    <>
+      <Button ref={buttonRef} onClick={handleOpenerClick}>
+        Opener
+      </Button>
+      <ActionSheet opener={buttonRef.current} open={open}>
+        {/* Content */}
+      </ActionSheet>
+    </>
+  );
+};
+`})}),`
+`,n.jsx(h,{})]})}function G(t={}){const{wrapper:e}={...s(),...t.components};return e?n.jsx(e,{...t,children:n.jsx(i,{...t})}):i(t)}export{G as default};