Deploying to gh-pages from @ 0a16eeb 🚀

Author: github-merge-queue[bot]

nightly/assets/Achievement-CxCNEiQ2.js

@@ -0,0 +1,55 @@
+import{j as n}from"./iframe-CMOSZBev.js";import{useMDXComponents as i}from"./index-BTwv99x0.js";import{M as p,C as c}from"./blocks-C7uNs7TS.js";import"./Tag-CqfvYh1K.js";import"./index-SUBNzPDi.js";import{C as a}from"./ControlsWithNote-BpW64yfj.js";import{D as m}from"./DocsHeader-G6_xaaS-.js";import{F as h}from"./CommandsAndQueries-BBxM4nbH.js";import{C as o,D as r}from"./ActionSheet.stories-Qqnbooky.js";import"./preload-helper-PPVm8Dsz.js";import"./information-D_sfcND0.js";import"./sys-enter-2-D7lHEvN4.js";import"./alert-CMJogacJ.js";import"./index-B2Bp115n.js";import"./index-CKeepgUa.js";import"./Link-D-jONPM3.js";import"./copy-C95MyXMx.js";import"./copy-CxpwRqG0.js";import"./GitHub-Mark-BaY2R9rx.js";import"./TableOfContent--rxK582K.js";import"./index-BcSeOVwt.js";import"./index-_PRo-73t.js";import"./index-kRKXYALW.js";import"./index-BG7mFBoF.js";import"./index-DnIJB1t0.js";import"./AvatarSize-BtKTMFJ5.js";import"./employee-DkqbRy7L.js";import"./addCustomCSSWithScoping-CCFGNXq3.js";import"./delete-jqJpTe2L.js";import"./utils-CJbFgKgb.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};