Deploying to gh-pages from @ 2702042 🚀

Author: github-merge-queue[bot]

nightly/assets/Achievement-BseiMz8z.js

@@ -0,0 +1,55 @@
+import{n as e}from"./chunk-jRWAZmH_.js";import{Gm as t}from"./iframe-Dv9_Cl4s.js";import{r as n}from"./react-BVF2Vu1y.js";import{_ as r,o as i,p as a,s as o,t as s}from"./components-DHY-Eqdw.js";import{_ as c,d as l,r as u}from"./blocks-mS-NSdaN.js";import{Default as d,n as f,t as p}from"./ActionSheet.stories-CSn2UNzG.js";function m(e){let t={code:`code`,h2:`h2`,p:`p`,pre:`pre`,strong:`strong`,...n(),...e.components};return(0,g.jsxs)(g.Fragment,{children:[(0,g.jsx)(l,{of:p}),`
+`,(0,g.jsx)(o,{of:p,subComponents:[`Button`]}),`
+`,(0,g.jsx)(`br`,{}),`
+`,(0,g.jsx)(t.h2,{id:`example`,children:`Example`}),`
+`,(0,g.jsx)(u,{of:d}),`
+`,(0,g.jsx)(t.h2,{id:`properties`,children:`Properties`}),`
+`,(0,g.jsx)(a,{of:d}),`
+`,(0,g.jsx)(t.h2,{id:`opening-actionsheets`,children:`Opening ActionSheets`}),`
+`,(0,g.jsx)(`br`,{}),`
+`,(0,g.jsxs)(t.p,{children:[`You can open and close the `,(0,g.jsx)(t.code,{children:`ActionSheet`}),` component in a declarative way using the `,(0,g.jsx)(t.code,{children:`open`}),` and `,(0,g.jsx)(t.code,{children:`opener`}),` prop.`]}),`
+`,(0,g.jsx)(t.pre,{children:(0,g.jsx)(t.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);
+        }}
+      />
+    </>
+  );
+};
+`})}),`
+`,(0,g.jsx)(t.p,{children:(0,g.jsxs)(t.strong,{children:[`Opening an `,(0,g.jsx)(t.code,{children:`ActionSheet`}),` by reference`]})}),`
+`,(0,g.jsxs)(t.p,{children:[`The `,(0,g.jsx)(t.code,{children:`ActionSheet`}),` exposes a way to pass a reference of an element instead of an `,(0,g.jsx)(t.code,{children:`id`}),` to the `,(0,g.jsx)(t.code,{children:`opener`}),` prop.
+You can do that by e.g. leveraging a React Ref.`]}),`
+`,(0,g.jsx)(t.pre,{children:(0,g.jsx)(t.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>
+    </>
+  );
+};
+`})}),`
+`,(0,g.jsx)(i,{})]})}function h(e={}){let{wrapper:t}={...n(),...e.components};return t?(0,g.jsx)(t,{...e,children:(0,g.jsx)(m,{...e})}):m(e)}var g;e((()=>{g=t(),r(),s(),c(),f()}))();export{h as default};