@react-ui-org/react-ui 0.52.0 → 0.53.0

package/src/components/Modal/_hooks/useModalScrollPrevention.js

@@ -0,0 +1,37 @@
+import { useLayoutEffect } from 'react';
+
+export const useModalScrollPrevention = (preventScrollUnderneath) => {
+  useLayoutEffect(
+    () => {
+      if (preventScrollUnderneath === 'off') {
+        return () => {};
+      }
+
+      if (preventScrollUnderneath instanceof HTMLElement) {
+        const scrollableElement = preventScrollUnderneath;
+
+        const scrollbarWidth = Math.abs(window.innerWidth - window.document.documentElement.clientWidth);
+        const prevOverflow = scrollableElement.style.overflow;
+        const prevPaddingRight = scrollableElement.style.paddingRight;
+
+        scrollableElement.style.overflow = 'hidden';
+
+        if (Number.isNaN(parseInt(prevPaddingRight, 10))) {
+          scrollableElement.style.paddingRight = `${scrollbarWidth}px`;
+        } else {
+          scrollableElement.style.paddingRight = `calc(${prevPaddingRight} + ${scrollbarWidth}px)`;
+        }
+
+        return () => {
+          scrollableElement.style.overflow = prevOverflow;
+          scrollableElement.style.paddingRight = prevPaddingRight;
+        };
+      }
+
+      preventScrollUnderneath?.start();
+
+      return preventScrollUnderneath?.reset;
+    },
+    [preventScrollUnderneath],
+  );
+};

package/src/{lib/components/Paper/README.mdx → components/Paper/README.md}

@@ -1,17 +1,5 @@
----
-name: Paper
-menu: 'Miscellaneous'
-route: /components/paper
----
-
 # Paper
 
-import {
-  Playground,
-  Props,
-} from 'docz'
-import { Paper } from '../..'
-
 Paper is a basic surface to hold content.
 
 ## Basic Usage
@@ -24,22 +12,22 @@ import { Paper } from '@react-ui-org/react-ui';
 
 And use it:
 
-<Playground>
-  <Paper>
-    Hello!
-  </Paper>
-</Playground>
+```docoff-react-preview
+<Paper>
+  Hello!
+</Paper>
+```
 
 See [API](#api) for all available options.
 
 ## General Guidelines
 
 - Paper is **designed for non-white background.** You may want to either use its
-  [raised variant](#raised-paper) or [customize](/customize/theming/overview)
+  [raised variant](#raised-paper) or [customize](/docs/customize/theming/overview)
   the default appearance to make it stand out on white background.
 
 - **Paper, or Card?** Paper is a basic surface to put content on. However,
-  there is also the [Card](/components/card) component. While Paper is
+  there is also the [Card](/components/Card) component. While Paper is
   usually used to hold larger content areas like lists, grids, or forms, Card is
   designed for displaying items. Card also supports more visual options.
 
@@ -47,21 +35,21 @@ See [API](#api) for all available options.
 
 Add optional shadow to lift the paper above background.
 
-<Playground>
-  <Paper raised>
-    Hello! I&apos;m paper and I&apos;m raised.
-  </Paper>
-</Playground>
+```docoff-react-preview
+<Paper raised>
+  Hello! I&apos;m paper and I&apos;m raised.
+</Paper>
+```
 
 ## Muted Paper
 
 Dim background and add transparency to visually suppress the Paper.
 
-<Playground>
-  <Paper muted>
-    Sssh! I&apos;m paper and I&apos;m muted.
-  </Paper>
-</Playground>
+```docoff-react-preview
+<Paper muted>
+  Sssh! I&apos;m paper and I&apos;m muted.
+</Paper>
+```
 
 ## Forwarding HTML Attributes
 
@@ -76,7 +64,7 @@ its accessibility.
 
 ## API
 
-<Props table of={Paper} />
+<docoff-react-props src="/components/Paper/Paper.jsx"></docoff-react-props>
 
 ## Theming
 

package/src/{lib/components/Popover/README.mdx → components/Popover/README.md}

@@ -1,31 +1,5 @@
----
-name: Popover
-menu: 'Miscellaneous'
-route: /components/popover
----
-
 # Popover
 
-import {
-  useFloating,
-  autoUpdate,
-  flip,
-} from '@floating-ui/react-dom'
-import {
-  Playground,
-  Props,
-} from 'docz'
-import { Placeholder } from '../../../docs/_components/Placeholder/Placeholder'
-import {
-  Button,
-  Popover,
-  ButtonGroup,
-  SelectField,
-  Toolbar,
-  ToolbarItem,
-  PopoverWrapper,
-} from '../..'
-
 Popover displays additional information without interrupting user flow.
 
 ## Basic Usage
@@ -38,8 +12,8 @@ import { Popover, PopoverWrapper } from '@react-ui-org/react-ui';
 
 And use it:
 
-<Playground>
-{() => {
+```docoff-react-preview
+React.createElement(() => {
   const [isPopoverOpen, setIsPopoverOpen] = React.useState(false);
   // All inline styles in this example are for demonstration purposes only.
   return (
@@ -65,8 +39,8 @@ And use it:
       </PopoverWrapper>
     </div>
   );
-}}
-</Playground>
+});
+```
 
 See [API](#api) for all available options.
 
@@ -77,8 +51,8 @@ placements can be aligned to the center (default, no suffix), start (e.g.
 `top-start`), or end (e.g. `bottom-end`). Check Popover [API](#api) for the
 complete list of accepted values.
 
-<Playground>
-{() => {
+```docoff-react-preview
+React.createElement(() => {
   const [align, setAlign] = React.useState('');
   // All inline styles in this example are for demonstration purposes only.
   return (
@@ -119,11 +93,11 @@ complete list of accepted values.
         }}
       >
         <PopoverWrapper>
-          <Placeholder bordered aria-describedby="my-popover-top">
+          <docoff-placeholder bordered aria-describedby="my-popover-top">
             Popovers
             <br />
             all day long…
-          </Placeholder>
+          </docoff-placeholder>
           <Popover id="my-popover-top" placement={`top${align}`}>
             Top side
           </Popover>
@@ -140,8 +114,8 @@ complete list of accepted values.
       </div>
     </>
   );
-}}
-</Playground>
+});
+```
 
 ## PopoverWrapper
 
@@ -198,11 +172,7 @@ npm install --save @floating-ui/react-dom
 And import it along with Popover, e.g.:
 
 ```js
-import {
-  useFloating,
-  autoUpdate,
-  flip,
-} from '@floating-ui/react-dom';
+import FloatingUIReactDOM from '@floating-ui/react-dom';
 import { Popover } from '@react-ui-org/react-ui';
 ```
 
@@ -219,100 +189,100 @@ get an idea of all possible cases you may need to cover.
 
 🖱 Try scrolling the example to see how Popover placement is updated.
 
-<Playground>
-  {() => {
-    const [isPopoverOpen, setIsPopoverOpen] = React.useState(false);
-    const [placement, setPlacement] = React.useState('top');
-    const {
-      x,
-      y,
-      reference,
-      floating,
-      placement: finalPlacement,
-      strategy,
-    } = useFloating({
-      placement,
-      middleware: [flip()],
-      whileElementsMounted: autoUpdate,
-    });
-    const placementOptions = [
-      'top',
-      'top-start',
-      'top-end',
-      'right',
-      'right-start',
-      'right-end',
-      'bottom',
-      'bottom-start',
-      'bottom-end',
-      'left',
-      'left-start',
-      'left-end',
-    ];
-    // All inline styles in this example EXCEPT Popover `style` are for
-    // demonstration purposes only.
-    return (
-      <>
-        <Toolbar>
-          <ToolbarItem>
-            <SelectField
-              label="Suggested placement:"
-              onChange={e => setPlacement(e.target.value)}
-              options={placementOptions.map((el) => ({
-                label: el,
-                value: el,
-              }))}
-              value={placement}
-            />
-          </ToolbarItem>
-          <ToolbarItem>
-            <div className="mb-2">Final placement:</div>
-            <code>{finalPlacement}</code>
-          </ToolbarItem>
-        </Toolbar>
+```docoff-react-preview
+React.createElement(() => {
+  const [isPopoverOpen, setIsPopoverOpen] = React.useState(false);
+  const [placement, setPlacement] = React.useState('top');
+  const {
+    x,
+    y,
+    reference,
+    floating,
+    placement: finalPlacement,
+    strategy,
+  } = FloatingUIReactDOM.useFloating({
+    placement,
+    middleware: [FloatingUIReactDOM.flip()],
+    whileElementsMounted: FloatingUIReactDOM.autoUpdate,
+  });
+  const placementOptions = [
+    'top',
+    'top-start',
+    'top-end',
+    'right',
+    'right-start',
+    'right-end',
+    'bottom',
+    'bottom-start',
+    'bottom-end',
+    'left',
+    'left-start',
+    'left-end',
+  ];
+  // All inline styles in this example EXCEPT Popover `style` are for
+  // demonstration purposes only.
+  return (
+    <>
+      <Toolbar>
+        <ToolbarItem>
+          <SelectField
+            label="Suggested placement:"
+            onChange={e => setPlacement(e.target.value)}
+            options={placementOptions.map((el) => ({
+              label: el,
+              value: el,
+            }))}
+            value={placement}
+          />
+        </ToolbarItem>
+        <ToolbarItem>
+          <div className="mb-2">Final placement:</div>
+          <code>{finalPlacement}</code>
+        </ToolbarItem>
+      </Toolbar>
+      <div
+        style={{
+          width: '40rem',
+          maxWidth: '100%',
+          height: '10rem',
+          overflow: 'auto',
+        }}
+      >
         <div
           style={{
-            width: '40rem',
-            maxWidth: '100%',
-            height: '10rem',
-            overflow: 'auto',
+            position: 'relative',
+            width: '60rem',
+            height: '20rem',
+            paddingBlock: '7rem',
+            textAlign: 'center',
           }}
         >
-          <div
-            style={{
-              position: 'relative',
-              width: '60rem',
-              height: '20rem',
-              paddingBlock: '7rem',
-              textAlign: 'center',
-            }}
-          >
-            <Button
-              aria-describedby={isPopoverOpen ? 'my-advanced-popover' : undefined}
-              label="Trigger Popover"
-              onClick={() => setIsPopoverOpen(!isPopoverOpen)}
-              ref={reference}
-            />
-            {isPopoverOpen && (
-              <Popover
-                id="my-advanced-popover"
-                placement={finalPlacement}
-                style={{
-                  position: strategy,
-                  top: y ? y : '',
-                  left: x ? x : '',
-                }}
-                ref={floating}
-              >
-                Auto-flipping Popover
-              </Popover>
-            )}
-          </div>
+          <Button
+            aria-describedby={isPopoverOpen ? 'my-advanced-popover' : undefined}
+            label="Trigger Popover"
+            onClick={() => setIsPopoverOpen(!isPopoverOpen)}
+            ref={reference}
+          />
+          {isPopoverOpen && (
+            <Popover
+              id="my-advanced-popover"
+              placement={finalPlacement}
+              style={{
+                position: strategy,
+                top: y ? y : '',
+                left: x ? x : '',
+              }}
+              ref={floating}
+            >
+              Auto-flipping Popover
+            </Popover>
+          )}
         </div>
-      </>
-    );
-  }}
-</Playground>
+      </div>
+    </>
+  );
+});
+```
 
 ## Forwarding HTML Attributes
 
@@ -332,11 +302,11 @@ which enables [Advanced Positioning](#advanced-positioning).
 
 ## API
 
-<Props table of={Popover} />
+<docoff-react-props src="/components/Popover/Popover.jsx"></docoff-react-props>
 
 ### PopoverWrapper API
 
-<Props table of={PopoverWrapper} />
+<docoff-react-props src="/components/Popover/PopoverWrapper.jsx"></docoff-react-props>
 
 ## Theming