diff --git a/main/assets/ActionSheet-a68fdc26.js b/main/assets/ActionSheet-a68fdc26.js deleted file mode 100644 index 15a782876c7..00000000000 --- a/main/assets/ActionSheet-a68fdc26.js +++ /dev/null @@ -1,104 +0,0 @@ -import{j as e}from"./jsx-runtime-d079401a.js";import{C as c}from"./DomRefTable.module-9e5188af.js";import{D as p}from"./DocsHeader-62d8c29a.js";import{F as h}from"./Footer-0ab24177.js";import"./index-f1f2c4b1.js";import{M as a,C as m}from"./chunk-S4VUQJ4A-f913ec15.js";import{D as d}from"./DomRefTable-ae68379b.js";import{C as l,D as i}from"./ActionSheet.stories-c4fc2d7a.js";import{R as u}from"./ResponsivePopoverDomRef-b2da8c70.js";import{u as s}from"./index-59d6410c.js";import{M as x}from"./index-3b0c2088.js";import"./react-jss.esm-2e5f50f2.js";import"./index-bb1f9706.js";import"./clsx-1229b3e0.js";import"./ThemingParameters-7e2e4e30.js";import"./addCustomCSSWithScoping-5ee8a8c4.js";import"./UI5Element-6dcea8dd.js";import"./CustomElementsScopeUtils-137da8c8.js";import"./utils-626dc1bf.js";import"./index-9f3d62b1.js";import"./iframe-7b61d7fb.js";import"../sb-preview/runtime.js";import"./withWebComponent-7d7e5133.js";import"./useIsomorphicLayoutEffect-c49de97d.js";import"./slot-76e48863.js";import"./Icon-b7f7d9e7.js";import"./Icons-e937042c.js";import"./Device-6afa24d0.js";import"./Integer-f7f172c9.js";import"./class-map-0ab40ab9.js";import"./i18n-defaults-d675a36d.js";import"./index-61902fdf.js";import"./Avatar-faa225d6.js";import"./ResizeHandler-e83234a4.js";import"./employee-f0b5ef8f.js";import"./index-c5b53353.js";import"./AriaLabelHelper-43a261ec.js";import"./index-645b17d2.js";import"./Link-34530090.js";import"./MarkedEvents-b83081e9.js";import"./WrappingType-b81e595a.js";import"./index-fb6e8b5e.js";import"./TableOfContent-36a09441.js";import"./index-b8f22ecb.js";import"./Label-c4db564a.js";import"./index-b42968db.js";import"./index-b591dd17.js";import"./Button-6bb9ed58.js";import"./index-80ffa7ff.js";import"./Popover-8ece70a3.js";import"./PopupsCommon.css-2b73575b.js";import"./FocusableElements-ae22402e.js";import"./isElementHidden-01c07146.js";import"./decline-d1fe7fdd.js";import"./i18n-defaults-2d2bf0b6.js";import"./MediaRange-25b98f31.js";import"./style-map-132a30d8.js";import"./BrowserScrollbar.css-22391551.js";import"./index-d203965f.js";import"./mapValues-e5c6f517.js";import"./_baseForOwn-24231fc1.js";import"./index-d475d2ea.js";import"./_commonjs-dynamic-modules-302442b1.js";import"./_getPrototype-00f63d78.js";import"./_baseUniq-edf521f4.js";import"./index-356e4a49.js";import"./accept-d5698387.js";import"./delete-c9b4a77c.js";import"./i18n-defaults-a506bd94.js";import"./I18nContext-dd74d568.js";import"./useIsRTL-f58f04b0.js";import"./CustomVariables-b0f63fee.js";import"./CssSizeVariables-596b7aba.js";import"./index-faebd149.js";import"./ResponsivePopover-b745dfe5.js";import"./Dialog-ea4c9a60.js";import"./ValueState-2c5e5904.js";import"./information-a40f0e71.js";import"./Title-e46bbbf5.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(a,{of:l}),` -`,e.jsx(p,{}),` -`,e.jsx("br",{}),` -`,e.jsx(n.h2,{id:"example",children:"Example"}),` -`,e.jsx(m,{of:i}),` -`,e.jsx(n.h2,{id:"properties",children:"Properties"}),` -`,e.jsx(c,{of:i}),` -`,e.jsxs(n.p,{children:[e.jsx(d,{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-a68fdc26.js.map diff --git a/main/assets/ActionSheet-a68fdc26.js.map b/main/assets/ActionSheet-a68fdc26.js.map deleted file mode 100644 index 2a760b3e998..00000000000 --- a/main/assets/ActionSheet-a68fdc26.js.map +++ /dev/null @@ -1 +0,0 @@ -{"version":3,"file":"ActionSheet-a68fdc26.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