diff --git a/main/assets/ActionSheet-e2fc446a.js b/main/assets/ActionSheet-e2fc446a.js new file mode 100644 index 00000000000..fea77e280b6 --- /dev/null +++ b/main/assets/ActionSheet-e2fc446a.js @@ -0,0 +1,104 @@ +import{j as e}from"./jsx-runtime-d079401a.js";import{C as c}from"./DomRefTable.module-9ac685dd.js";import{D as p}from"./DocsHeader-61af9bdc.js";import{F as h}from"./Footer-f0a2f6c4.js";import"./index-f1f2c4b1.js";import{D as a}from"./DomRefTable-22a32194.js";import{M as m,C as d}from"./chunk-S4VUQJ4A-6d08802c.js";import{C as l,D as i}from"./ActionSheet.stories-f6907590.js";import{R as u}from"./ResponsivePopoverDomRef-b2da8c70.js";import{u as s}from"./index-59d6410c.js";import{M as x}from"./index-2786978f.js";import"./react-jss.esm-c310038c.js";import"./inheritsLoose-93e09647.js";import"./index-47d0a85a.js";import"./clsx-1229b3e0.js";import"./ThemingParameters-7e2e4e30.js";import"./addCustomCSSWithScoping-d9b40dee.js";import"./UI5Element-a4bd3d38.js";import"./CustomElementsScopeUtils-137da8c8.js";import"./utils-626dc1bf.js";import"./index-bd8ef6b5.js";import"./iframe-ceb089af.js";import"../sb-preview/runtime.js";import"./withWebComponent-7d7e5133.js";import"./useIsomorphicLayoutEffect-c49de97d.js";import"./slot-76e48863.js";import"./Icon-42236945.js";import"./Icons-74c917eb.js";import"./Device-6afa24d0.js";import"./Integer-f7f172c9.js";import"./class-map-0ab40ab9.js";import"./i18n-defaults-d5d083dd.js";import"./index-5d1777b8.js";import"./Avatar-6c09069b.js";import"./ResizeHandler-0af4416f.js";import"./employee-05c578de.js";import"./index-10018b27.js";import"./AriaLabelHelper-43a261ec.js";import"./index-21666864.js";import"./Link-498d09c2.js";import"./MarkedEvents-b83081e9.js";import"./WrappingType-b81e595a.js";import"./index-56b3d57c.js";import"./TableOfContent-e6df56ea.js";import"./index-1bad2803.js";import"./Label-287c3220.js";import"./index-c74c9f7f.js";import"./index-567a4a93.js";import"./Button-02dfef34.js";import"./index-cd3d12ab.js";import"./Popover-26ef4370.js";import"./PopupsCommon.css-f12c9479.js";import"./FocusableElements-66623361.js";import"./isElementHidden-01c07146.js";import"./decline-3cb804de.js";import"./i18n-defaults-2d2bf0b6.js";import"./MediaRange-25b98f31.js";import"./style-map-132a30d8.js";import"./BrowserScrollbar.css-309143b9.js";import"./index-92d824d3.js";import"./mapValues-57c90777.js";import"./_baseForOwn-2252ef3e.js";import"./index-d475d2ea.js";import"./_commonjs-dynamic-modules-302442b1.js";import"./_getPrototype-73159a4c.js";import"./_baseUniq-61c59340.js";import"./index-356e4a49.js";import"./accept-aa607c05.js";import"./delete-1b92ff55.js";import"./i18n-defaults-456fcfbf.js";import"./I18nContext-dd74d568.js";import"./CustomVariables-df17d38c.js";import"./CssSizeVariables-17481929.js";import"./index-16fce9b7.js";import"./ResponsivePopover-1151e741.js";import"./Dialog-3eddfe98.js";import"./ValueState-2c5e5904.js";import"./information-dbbb1c9a.js";import"./Title-f7b3e876.js";function Ye(t={}){const{wrapper:o}=Object.assign({},s(),t.components);return o?e.jsx(o,Object.assign({},t,{children:e.jsx(r,{})})):r();function r(){const n=Object.assign({h2:"h2",p:"p",h4:"h4",code:"code",pre:"pre",strong:"strong",em:"em",a:"a"},s(),t.components);return e.jsxs(e.Fragment,{children:[e.jsx(m,{of:l}),` +`,e.jsx(p,{}),` +`,e.jsx("br",{}),` +`,e.jsx(n.h2,{id:"example",children:"Example"}),` +`,e.jsx(d,{of:i}),` +`,e.jsx(n.h2,{id:"properties",children:"Properties"}),` +`,e.jsx(c,{of:i}),` +`,e.jsxs(n.p,{children:[e.jsx(a,{rows:u})," |"]}),` +`,e.jsx(n.h2,{id:"opening-actionsheets",children:"Opening ActionSheets"}),` +`,e.jsx("br",{}),` +`,e.jsx(n.h4,{id:"since-0220",children:"since 0.22.0"}),` +`,e.jsxs(n.p,{children:["We recommend opening and closing the ",e.jsx(n.code,{children:"ActionSheet"})," component in a declarative way using the ",e.jsx(n.code,{children:"open"})," and ",e.jsx(n.code,{children:"opener"}),` prop. +You can still use the imperative way which is outlined below.`]}),` +`,e.jsx(n.pre,{children:e.jsx(n.code,{className:"language-jsx",children:`const MyComponentWithActionSheet = () => { + const [actionSheetIsOpen, setActionSheetIsOpen] = useState(false); + return ( + <> + + { + setActionSheetIsOpen(false); + }} + /> + + ); +}; +`})}),` +`,e.jsx(n.p,{children:e.jsxs(n.strong,{children:["Opening an ",e.jsx(n.code,{children:"ActionSheet"})," by reference and not by ",e.jsx(n.code,{children:"id"})]})}),` +`,e.jsxs(n.p,{children:["This web component exposes a way to pass a reference of an element instead of an ",e.jsx(n.code,{children:"id"})," to the ",e.jsx(n.code,{children:"opener"})," prop. Since this is not supported when passing the reference in a declarative way to a React ",e.jsx(n.code,{children:"prop"}),`, you have to attach the ref directly on the web component. +You can do that by e.g. leveraging a React Ref, and then set the corresponding property there.`]}),` +`,e.jsx(x,{hideCloseButton:!0,children:`Changing properties outside of the React rendering cycle can lead to unwanted behavior, please be extra cautious when + using this approach!`}),` +`,e.jsx(n.pre,{children:e.jsx(n.code,{className:"language-jsx",children:`const ActionSheetComponent = () => { + const popoverRef = useRef(null); + const [open, setOpen] = useState(false); + const handleOpenerClick = (e) => { + if (popoverRef.current) { + popoverRef.current.opener = e.target; + setOpen((prev) => !prev); + } + }; + return ( + <> + + + {/* Content */} + + + ); +}; +`})}),` +`,e.jsx(n.h4,{id:"before-0220",children:"before 0.22.0"}),` +`,e.jsxs(n.p,{children:[e.jsx(n.code,{children:"ActionSheets"})," can only be opened by attaching a ",e.jsx(n.code,{children:"ref"})," to the component and then call the corresponding ",e.jsx(n.strong,{children:e.jsx(n.code,{children:"showAt"})})," method. The method receives the target element - ",e.jsxs(n.em,{children:["on which the ",e.jsx(n.code,{children:"ActionSheet"})," is to be opened"]})," - as parameter."]}),` +`,e.jsx(n.pre,{children:e.jsx(n.code,{className:"language-jsx",children:`const ActionSheetComponent = () => { + const actionSheetRef = useRef(null); + const onButtonClick = (e) => { + actionSheetRef.current.showAt(e.target); + }; + return ( + <> + + + + + + + + ); +}; +`})}),` +`,e.jsx(n.h2,{id:"using-actionsheets-inside-other-components",children:"Using ActionSheets inside other components"}),` +`,e.jsxs(n.p,{children:[e.jsx(n.code,{children:"ActionSheets"}),` are often used within other components, when opened this could sometimes have unwanted side effects. +In this case, we recommend using `,e.jsx(n.a,{href:"https://reactjs.org/docs/portals.html",target:"_blank",rel:"nofollow noopener noreferrer",children:"createPortal"})," to mount the ",e.jsx(n.code,{children:"ActionSheet"})," outside of the DOM hierarchy of the parent component."]}),` +`,e.jsx(n.pre,{children:e.jsx(n.code,{className:"language-JSX",children:`const ActionSheetComponent = () => { + const actionSheetRef = useRef(null); + const onButtonClick = (e) => { + actionSheetRef.current.showAt(e.target); + }; + return ( + <> + + {createPortal( + + + + + , + document.body + )} + + ); +}; +`})}),` +`,e.jsx(h,{})]})}}export{Ye as default}; +//# sourceMappingURL=ActionSheet-e2fc446a.js.map diff --git a/main/assets/ActionSheet-e2fc446a.js.map b/main/assets/ActionSheet-e2fc446a.js.map new file mode 100644 index 00000000000..5580be2db3a --- /dev/null +++ b/main/assets/ActionSheet-e2fc446a.js.map @@ -0,0 +1 @@ +{"version":3,"file":"ActionSheet-e2fc446a.js","sources":["../../packages/main/src/components/ActionSheet/ActionSheet.mdx"],"sourcesContent":["import { ControlsWithNote, DocsHeader, DomRefTable, Footer } from '@sb/components';\nimport { Canvas, Meta } from '@storybook/blocks';\nimport { MessageStrip } from '../../webComponents/index';\nimport * as ComponentStories from './ActionSheet.stories';\nimport ResponsivePopoverDomRef from '../../webComponents/ResponsivePopover/ResponsivePopoverDomRef.json';\n\n\n\n\n\n
\n\n## Example\n\n\n\n## Properties\n\n\n\n |\n\n## Opening ActionSheets\n\n
\n\n#### since 0.22.0\n\nWe recommend opening and closing the `ActionSheet` component in a declarative way using the `open` and `opener` prop.\nYou can still use the imperative way which is outlined below.\n\n```jsx\nconst MyComponentWithActionSheet = () => {\n const [actionSheetIsOpen, setActionSheetIsOpen] = useState(false);\n return (\n <>\n {\n setActionSheetIsOpen(true);\n }}\n >\n Open Action Sheet\n \n {\n setActionSheetIsOpen(false);\n }}\n />\n \n );\n};\n```\n\n**Opening an `ActionSheet` by reference and not by `id`**\n\nThis web component exposes a way to pass a reference of an element instead of an `id` to the `opener` prop. Since this is not supported when passing the reference in a declarative way to a React `prop`, you have to attach the ref directly on the web component.\nYou can do that by e.g. leveraging a React Ref, and then set the corresponding property there.\n\n\n\n```jsx\nconst ActionSheetComponent = () => {\n const popoverRef = useRef(null);\n const [open, setOpen] = useState(false);\n const handleOpenerClick = (e) => {\n if (popoverRef.current) {\n popoverRef.current.opener = e.target;\n setOpen((prev) => !prev);\n }\n };\n return (\n <>\n \n \n {/* Content */}\n \n \n );\n};\n```\n\n#### before 0.22.0\n\n`ActionSheets` can only be opened by attaching a `ref` to the component and then call the corresponding **`showAt`** method. The method receives the target element - _on which the `ActionSheet` is to be opened_ - as parameter.\n\n```jsx\nconst ActionSheetComponent = () => {\n const actionSheetRef = useRef(null);\n const onButtonClick = (e) => {\n actionSheetRef.current.showAt(e.target);\n };\n return (\n <>\n \n \n \n \n \n \n \n );\n};\n```\n\n## Using ActionSheets inside other components\n\n`ActionSheets` are often used within other components, when opened this could sometimes have unwanted side effects.\nIn this case, we recommend using [createPortal](https://reactjs.org/docs/portals.html) to mount the `ActionSheet` outside of the DOM hierarchy of the parent component.\n\n```JSX\nconst ActionSheetComponent = () => {\n const actionSheetRef = useRef(null);\n const onButtonClick = (e) => {\n actionSheetRef.current.showAt(e.target);\n };\n return (\n <>\n \n {createPortal(\n \n \n \n \n ,\n document.body\n )}\n \n );\n};\n```\n\n