Deploying to gh-pages from @ fdd21a9 🚀

Author: github-merge-queue[bot]

nightly/assets/Achievement-CYffLwDZ.js

@@ -0,0 +1,55 @@
+import{j as n}from"./iframe-BH4bVelf.js";import{useMDXComponents as i}from"./index-BZqT0YF1.js";import{M as p,C as c}from"./blocks-CeYDMKuM.js";import"./Tag-BXnIP2dS.js";import"./index-CJTqi7uU.js";import{C as a}from"./ControlsWithNote-DQQ69lO5.js";import{D as m}from"./DocsHeader-Chw2B0KH.js";import{F as h}from"./CommandsAndQueries-D9wpOiDr.js";import{C as o,D as r}from"./ActionSheet.stories-DngS3xws.js";import"./preload-helper-PPVm8Dsz.js";import"./information-BFXgiRFQ.js";import"./sys-enter-2-IrFhFhIl.js";import"./alert-2wR6R_Um.js";import"./index-AtaZxDlU.js";import"./index-CaNjf1Vn.js";import"./Link-CWmFbngj.js";import"./copy-r7oiWpAQ.js";import"./copy-Dqlw1cCi.js";import"./GitHub-Mark-D1C-ERE2.js";import"./TableOfContent-CmqsyGDI.js";import"./index-Clh4Efsf.js";import"./index-CF882nWm.js";import"./index-BD7TNiZv.js";import"./index-BoC02bGf.js";import"./index-DwqLEbZm.js";import"./AvatarSize-BtKTMFJ5.js";import"./employee-C83XHNHQ.js";import"./addCustomCSSWithScoping-BSRRxoii.js";import"./delete-D4wiFYB9.js";import"./utils-C0YjVaw1.js";function s(t){const e={code:"code",h2:"h2",p:"p",pre:"pre",strong:"strong",...i(),...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 P(t={}){const{wrapper:e}={...i(),...t.components};return e?n.jsx(e,{...t,children:n.jsx(s,{...t})}):s(t)}export{P as default};