@primer/components 29.1.0 → 29.1.1-rc.cea79543

package/lib-esm/stories/SelectPanel.stories.js

@@ -0,0 +1,284 @@
+function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+import React, { useRef, useState } from 'react';
+import { theme, ThemeProvider } from '..';
+import BaseStyles from '../BaseStyles';
+import { DropdownButton } from '../DropdownMenu';
+import { SelectPanel } from '../SelectPanel';
+import Box from '../Box';
+const meta = {
+  title: 'Composite components/SelectPanel',
+  component: SelectPanel,
+  decorators: [Story => {
+    return /*#__PURE__*/React.createElement(ThemeProvider, {
+      theme: theme
+    }, /*#__PURE__*/React.createElement(BaseStyles, null, /*#__PURE__*/React.createElement(Story, null)));
+  }],
+  parameters: {
+    controls: {
+      disable: true
+    }
+  }
+};
+export default meta;
+
+function getColorCircle(color) {
+  return function () {
+    return /*#__PURE__*/React.createElement(Box, {
+      bg: color,
+      borderColor: color,
+      width: 14,
+      height: 14,
+      borderRadius: 10,
+      margin: "auto",
+      borderWidth: "1px",
+      borderStyle: "solid"
+    });
+  };
+}
+
+const items = [{
+  leadingVisual: getColorCircle('#a2eeef'),
+  text: 'enhancement',
+  id: 1
+}, {
+  leadingVisual: getColorCircle('#d73a4a'),
+  text: 'bug',
+  id: 2
+}, {
+  leadingVisual: getColorCircle('#0cf478'),
+  text: 'good first issue',
+  id: 3
+}, {
+  leadingVisual: getColorCircle('#ffd78e'),
+  text: 'design',
+  id: 4
+}, {
+  leadingVisual: getColorCircle('#ff0000'),
+  text: 'blocker',
+  id: 5
+}, {
+  leadingVisual: getColorCircle('#a4f287'),
+  text: 'backend',
+  id: 6
+}, {
+  leadingVisual: getColorCircle('#8dc6fc'),
+  text: 'frontend',
+  id: 7
+}];
+export function MultiSelectStory() {
+  const [selected, setSelected] = React.useState([items[0], items[1]]);
+  const [filter, setFilter] = React.useState('');
+  const filteredItems = items.filter(item => item.text.toLowerCase().startsWith(filter.toLowerCase()));
+  const [open, setOpen] = useState(false);
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("h1", null, "Multi Select Panel"), /*#__PURE__*/React.createElement("div", null, "Please select labels that describe your issue:"), /*#__PURE__*/React.createElement(SelectPanel, {
+    renderAnchor: ({
+      children,
+      'aria-labelledby': ariaLabelledBy,
+      ...anchorProps
+    }) => /*#__PURE__*/React.createElement(DropdownButton, _extends({
+      "aria-labelledby": ` ${ariaLabelledBy}`
+    }, anchorProps), children !== null && children !== void 0 ? children : 'Select Labels'),
+    placeholderText: "Filter Labels",
+    open: open,
+    onOpenChange: setOpen,
+    items: filteredItems,
+    selected: selected,
+    onSelectedChange: setSelected,
+    onFilterChange: setFilter,
+    showItemDividers: true,
+    overlayProps: {
+      width: 'small',
+      height: 'xsmall'
+    }
+  }));
+}
+MultiSelectStory.storyName = 'Multi Select';
+export function SingleSelectStory() {
+  const [selected, setSelected] = React.useState(items[0]);
+  const [filter, setFilter] = React.useState('');
+  const filteredItems = items.filter(item => item.text.toLowerCase().startsWith(filter.toLowerCase()));
+  const [open, setOpen] = useState(false);
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("h1", null, "Single Select Panel"), /*#__PURE__*/React.createElement("div", null, "Please select a label that describe your issue:"), /*#__PURE__*/React.createElement(SelectPanel, {
+    renderAnchor: ({
+      children,
+      'aria-labelledby': ariaLabelledBy,
+      ...anchorProps
+    }) => /*#__PURE__*/React.createElement(DropdownButton, _extends({
+      "aria-labelledby": ` ${ariaLabelledBy}`
+    }, anchorProps), children !== null && children !== void 0 ? children : 'Select Labels'),
+    placeholderText: "Filter Labels",
+    open: open,
+    onOpenChange: setOpen,
+    items: filteredItems,
+    selected: selected,
+    onSelectedChange: setSelected,
+    onFilterChange: setFilter,
+    showItemDividers: true,
+    overlayProps: {
+      width: 'small',
+      height: 'xsmall'
+    }
+  }));
+}
+SingleSelectStory.storyName = 'Single Select';
+export function ExternalAnchorStory() {
+  const [selected, setSelected] = React.useState(items[0]);
+  const [filter, setFilter] = React.useState('');
+  const filteredItems = items.filter(item => item.text.toLowerCase().startsWith(filter.toLowerCase()));
+  const [open, setOpen] = useState(false);
+  const buttonRef = useRef(null);
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("h1", null, "Select Panel With External Anchor"), /*#__PURE__*/React.createElement(DropdownButton, {
+    ref: buttonRef,
+    onClick: () => setOpen(!open)
+  }, "Custom: ", (selected === null || selected === void 0 ? void 0 : selected.text) || 'Click Me'), /*#__PURE__*/React.createElement(SelectPanel, {
+    renderAnchor: null,
+    anchorRef: buttonRef,
+    placeholderText: "Filter Labels",
+    open: open,
+    onOpenChange: setOpen,
+    items: filteredItems,
+    selected: selected,
+    onSelectedChange: setSelected,
+    onFilterChange: setFilter,
+    showItemDividers: true,
+    overlayProps: {
+      width: 'small',
+      height: 'xsmall'
+    }
+  }));
+}
+ExternalAnchorStory.storyName = 'With External Anchor';
+export function SelectPanelHeightInitialWithOverflowingItemsStory() {
+  const [selected, setSelected] = React.useState(items[0]);
+  const [filter, setFilter] = React.useState('');
+  const filteredItems = items.filter(item => item.text.toLowerCase().startsWith(filter.toLowerCase()));
+  const [open, setOpen] = useState(false);
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("h1", null, "Single Select Panel"), /*#__PURE__*/React.createElement("div", null, "Please select a label that describe your issue:"), /*#__PURE__*/React.createElement(SelectPanel, {
+    renderAnchor: ({
+      children,
+      'aria-labelledby': ariaLabelledBy,
+      ...anchorProps
+    }) => /*#__PURE__*/React.createElement(DropdownButton, _extends({
+      "aria-labelledby": ` ${ariaLabelledBy}`
+    }, anchorProps), children !== null && children !== void 0 ? children : 'Select Labels'),
+    placeholderText: "Filter Labels",
+    open: open,
+    onOpenChange: setOpen,
+    items: filteredItems,
+    selected: selected,
+    onSelectedChange: setSelected,
+    onFilterChange: setFilter,
+    showItemDividers: true,
+    overlayProps: {
+      width: 'small',
+      height: 'initial',
+      maxHeight: 'xsmall'
+    }
+  }));
+}
+SelectPanelHeightInitialWithOverflowingItemsStory.storyName = 'SelectPanel, Height: Initial, Overflowing Items';
+export function SelectPanelHeightInitialWithUnderflowingItemsStory() {
+  const underflowingItems = [items[0], items[1]];
+  const [selected, setSelected] = React.useState(underflowingItems[0]);
+  const [filter, setFilter] = React.useState('');
+  const filteredItems = underflowingItems.filter(item => item.text.toLowerCase().startsWith(filter.toLowerCase()));
+  const [open, setOpen] = useState(false);
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("h1", null, "Single Select Panel"), /*#__PURE__*/React.createElement("div", null, "Please select a label that describe your issue:"), /*#__PURE__*/React.createElement(SelectPanel, {
+    renderAnchor: ({
+      children,
+      'aria-labelledby': ariaLabelledBy,
+      ...anchorProps
+    }) => /*#__PURE__*/React.createElement(DropdownButton, _extends({
+      "aria-labelledby": ` ${ariaLabelledBy}`
+    }, anchorProps), children !== null && children !== void 0 ? children : 'Select Labels'),
+    placeholderText: "Filter Labels",
+    open: open,
+    onOpenChange: setOpen,
+    items: filteredItems,
+    selected: selected,
+    onSelectedChange: setSelected,
+    onFilterChange: setFilter,
+    showItemDividers: true,
+    overlayProps: {
+      width: 'small',
+      height: 'initial',
+      maxHeight: 'xsmall'
+    }
+  }));
+}
+SelectPanelHeightInitialWithUnderflowingItemsStory.storyName = 'SelectPanel, Height: Initial, Underflowing Items';
+export function SelectPanelHeightInitialWithUnderflowingItemsAfterFetch() {
+  const [selected, setSelected] = React.useState(items[0]);
+  const [filter, setFilter] = React.useState('');
+  const [fetchedItems, setFetchedItems] = useState([]);
+  const filteredItems = React.useMemo(() => fetchedItems.filter(item => item.text.toLowerCase().startsWith(filter.toLowerCase())), [fetchedItems, filter]);
+  const [open, setOpen] = useState(false);
+  const [height, setHeight] = useState('auto');
+
+  const onOpenChange = () => {
+    setOpen(!open);
+    setTimeout(() => {
+      setFetchedItems([items[0], items[1]]);
+      setHeight('initial');
+    }, 1500);
+  };
+
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("h1", null, "Single Select Panel"), /*#__PURE__*/React.createElement("div", null, "Please select a label that describe your issue:"), /*#__PURE__*/React.createElement(SelectPanel, {
+    renderAnchor: ({
+      children,
+      'aria-labelledby': ariaLabelledBy,
+      ...anchorProps
+    }) => /*#__PURE__*/React.createElement(DropdownButton, _extends({
+      "aria-labelledby": ` ${ariaLabelledBy}`
+    }, anchorProps), children !== null && children !== void 0 ? children : 'Select Labels'),
+    placeholderText: "Filter Labels",
+    open: open,
+    onOpenChange: onOpenChange,
+    loading: filteredItems.length === 0,
+    items: filteredItems,
+    selected: selected,
+    onSelectedChange: setSelected,
+    onFilterChange: setFilter,
+    showItemDividers: true,
+    overlayProps: {
+      width: 'small',
+      height,
+      maxHeight: 'xsmall'
+    }
+  }));
+}
+SelectPanelHeightInitialWithUnderflowingItemsAfterFetch.storyName = 'SelectPanel, Height: Initial, Underflowing Items (After Fetch)';
+export function SelectPanelAboveTallBody() {
+  const [selected, setSelected] = React.useState(items[0]);
+  const [filter, setFilter] = React.useState('');
+  const filteredItems = items.filter(item => item.text.toLowerCase().startsWith(filter.toLowerCase()));
+  const [open, setOpen] = useState(false);
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("h1", null, "Single Select Panel"), /*#__PURE__*/React.createElement("div", null, "Please select a label that describe your issue:"), /*#__PURE__*/React.createElement(SelectPanel, {
+    renderAnchor: ({
+      children,
+      'aria-labelledby': ariaLabelledBy,
+      ...anchorProps
+    }) => /*#__PURE__*/React.createElement(DropdownButton, _extends({
+      "aria-labelledby": ` ${ariaLabelledBy}`
+    }, anchorProps), children !== null && children !== void 0 ? children : 'Select Labels'),
+    placeholderText: "Filter Labels",
+    open: open,
+    onOpenChange: setOpen,
+    items: filteredItems,
+    selected: selected,
+    onSelectedChange: setSelected,
+    onFilterChange: setFilter,
+    showItemDividers: true,
+    overlayProps: {
+      width: 'small',
+      height: 'xsmall'
+    }
+  }), /*#__PURE__*/React.createElement("div", {
+    style: {
+      backgroundColor: 'cornflowerblue',
+      height: '100vh'
+    }
+  }, "This element makes the body really tall. This is to test that we do not have layout/focus issues if the Portal is far down the page"));
+}
+SelectPanelAboveTallBody.storyName = 'SelectPanel, Above a Tall Body';

package/lib-esm/stories/ThemeProvider.stories.js

@@ -0,0 +1,83 @@
+import React from 'react';
+import { ThemeProvider, BaseStyles, Box, themeGet, useTheme } from '..';
+import { createGlobalStyle } from 'styled-components';
+export default {
+  title: 'Generic behaviors/ThemeProvider',
+  component: ThemeProvider,
+  argTypes: {
+    theme: {
+      table: {
+        disable: true
+      }
+    }
+  }
+};
+const GlobalStyle = createGlobalStyle`
+    body {
+        background-color: ${themeGet('colors.bg.canvas')};
+    }
+`;
+
+function ActiveColorScheme() {
+  const {
+    colorScheme
+  } = useTheme();
+  return /*#__PURE__*/React.createElement("span", null, "Active color scheme: ", colorScheme);
+}
+
+ActiveColorScheme.displayName = "ActiveColorScheme";
+export const Default = args => {
+  return /*#__PURE__*/React.createElement(ThemeProvider, args, /*#__PURE__*/React.createElement(GlobalStyle, null), /*#__PURE__*/React.createElement(BaseStyles, null, /*#__PURE__*/React.createElement(ActiveColorScheme, null)));
+};
+Default.displayName = "Default";
+Default.args = {
+  colorMode: 'day',
+  dayScheme: 'light',
+  nightScheme: 'dark'
+};
+
+function NightMode() {
+  return /*#__PURE__*/React.createElement(ThemeProvider, {
+    colorMode: "night"
+  }, /*#__PURE__*/React.createElement(Box, {
+    my: 3,
+    p: 3,
+    color: "fg.default",
+    bg: "canvas.default",
+    borderWidth: "1px",
+    borderStyle: "solid",
+    borderColor: "border.default",
+    borderRadius: 2
+  }, "Always night mode (", /*#__PURE__*/React.createElement(ActiveColorScheme, null), ")"));
+}
+
+NightMode.displayName = "NightMode";
+
+function InverseMode() {
+  const {
+    resolvedColorMode
+  } = useTheme();
+  return /*#__PURE__*/React.createElement(ThemeProvider, {
+    colorMode: resolvedColorMode === 'day' ? 'night' : 'day'
+  }, /*#__PURE__*/React.createElement(Box, {
+    my: 3,
+    p: 3,
+    color: "fg.default",
+    bg: "canvas.default",
+    borderWidth: "1px",
+    borderStyle: "solid",
+    borderColor: "border.default",
+    borderRadius: 2
+  }, "Always inverse of parent mode (", /*#__PURE__*/React.createElement(ActiveColorScheme, null), ")"));
+}
+
+InverseMode.displayName = "InverseMode";
+export const Nested = args => {
+  return /*#__PURE__*/React.createElement(ThemeProvider, args, /*#__PURE__*/React.createElement(GlobalStyle, null), /*#__PURE__*/React.createElement(BaseStyles, null, /*#__PURE__*/React.createElement(ActiveColorScheme, null), /*#__PURE__*/React.createElement(NightMode, null), /*#__PURE__*/React.createElement(InverseMode, null)));
+};
+Nested.displayName = "Nested";
+Nested.args = {
+  colorMode: 'day',
+  dayScheme: 'light',
+  nightScheme: 'dark_dimmed'
+};

package/lib-esm/stories/useAnchoredPosition.stories.js

@@ -0,0 +1,313 @@
+import React from 'react';
+import { BaseStyles, Box, ButtonPrimary, ThemeProvider } from '..';
+import { useAnchoredPosition } from '../hooks';
+import styled from 'styled-components';
+import { get } from '../constants';
+import Portal, { registerPortalRoot } from '../Portal';
+import Button from '../Button';
+export default {
+  title: 'Hooks/useAnchoredPosition',
+  decorators: [// Note: For some reason, if you use <BaseStyles><Story /></BaseStyles>,
+  // the component gets unmounted from the root every time a control changes!
+  Story => {
+    return /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(BaseStyles, null, Story()));
+  }],
+  argTypes: {
+    anchorX: {
+      control: {
+        type: 'range',
+        min: 0,
+        max: 500
+      }
+    },
+    anchorY: {
+      control: {
+        type: 'range',
+        min: 0,
+        max: 500
+      }
+    },
+    anchorWidth: {
+      control: {
+        type: 'range',
+        min: 50,
+        max: 500
+      }
+    },
+    anchorHeight: {
+      control: {
+        type: 'range',
+        min: 50,
+        max: 500
+      }
+    },
+    floatWidth: {
+      control: {
+        type: 'range',
+        min: 50,
+        max: 500
+      }
+    },
+    floatHeight: {
+      control: {
+        type: 'range',
+        min: 50,
+        max: 500
+      }
+    },
+    anchorPosition: {
+      control: {
+        type: 'inline-radio',
+        options: ['inside', 'outside']
+      }
+    },
+    anchorSide: {
+      control: {
+        type: 'inline-radio',
+        options: ['top', 'bottom', 'left', 'right', 'center']
+      },
+      description: 'note'
+    },
+    anchorAlignment: {
+      control: {
+        type: 'inline-radio',
+        options: ['first', 'center', 'last']
+      }
+    },
+    anchorOffset: {
+      control: {
+        type: 'range',
+        min: -100,
+        max: 100
+      }
+    },
+    alignmentOffset: {
+      control: {
+        type: 'range',
+        min: -100,
+        max: 100
+      }
+    },
+    allowOutOfBounds: {
+      control: {
+        type: 'boolean'
+      }
+    }
+  }
+};
+const Float = styled(Box).withConfig({
+  displayName: "useAnchoredPositionstories__Float",
+  componentId: "sc-18cdzou-0"
+})(["position:absolute;border:1px solid ", ";border-radius:", ";background-color:", ";display:flex;flex-direction:column;text-align:center;font-size:", ";font-weight:", ";padding:", ";"], get('colors.black'), get('radii.2'), get('colors.orange.3'), get('fontSizes.3'), get('fontWeights.bold'), get('space.3'));
+const Anchor = styled(Box).withConfig({
+  displayName: "useAnchoredPositionstories__Anchor",
+  componentId: "sc-18cdzou-1"
+})(["position:absolute;border:1px solid ", ";border-radius:", ";background-color:", ";display:flex;flex-direction:column;text-align:center;font-size:", ";font-weight:", ";padding:", ";"], get('colors.black'), get('radii.2'), get('colors.blue.3'), get('fontSizes.3'), get('fontWeights.bold'), get('space.3')); // eslint-disable-next-line @typescript-eslint/no-explicit-any
+
+export const UseAnchoredPosition = args => {
+  var _args$anchorPosition, _args$anchorSide, _args$anchorAlignment, _args$allowOutOfBound, _args$anchorY, _args$anchorX, _position$top, _position$left, _args$floatWidth, _args$floatHeight;
+
+  const {
+    floatingElementRef,
+    anchorElementRef,
+    position
+  } = useAnchoredPosition({
+    side: `${(_args$anchorPosition = args.anchorPosition) !== null && _args$anchorPosition !== void 0 ? _args$anchorPosition : 'outside'}-${(_args$anchorSide = args.anchorSide) !== null && _args$anchorSide !== void 0 ? _args$anchorSide : 'bottom'}`,
+    align: (_args$anchorAlignment = args.anchorAlignment) !== null && _args$anchorAlignment !== void 0 ? _args$anchorAlignment : 'start',
+    anchorOffset: args.anchorOffset && parseInt(args.anchorOffset, 10),
+    alignmentOffset: args.alignmentOffset && parseInt(args.alignmentOffset, 10),
+    allowOutOfBounds: (_args$allowOutOfBound = args.allowOutOfBounds) !== null && _args$allowOutOfBound !== void 0 ? _args$allowOutOfBound : undefined
+  }, [args]);
+  return /*#__PURE__*/React.createElement(Box, {
+    position: "relative",
+    m: 2
+  }, /*#__PURE__*/React.createElement(Anchor, {
+    top: (_args$anchorY = args.anchorY) !== null && _args$anchorY !== void 0 ? _args$anchorY : 0,
+    left: (_args$anchorX = args.anchorX) !== null && _args$anchorX !== void 0 ? _args$anchorX : 0,
+    width: args.anchorWidth,
+    height: args.anchorHeight,
+    ref: anchorElementRef
+  }, "Anchor Element"), /*#__PURE__*/React.createElement(Float, {
+    top: (_position$top = position === null || position === void 0 ? void 0 : position.top) !== null && _position$top !== void 0 ? _position$top : 0,
+    left: (_position$left = position === null || position === void 0 ? void 0 : position.left) !== null && _position$left !== void 0 ? _position$left : 0,
+    width: (_args$floatWidth = args.floatWidth) !== null && _args$floatWidth !== void 0 ? _args$floatWidth : 150,
+    height: (_args$floatHeight = args.floatHeight) !== null && _args$floatHeight !== void 0 ? _args$floatHeight : 150,
+    ref: floatingElementRef
+  }, "Floating element"));
+};
+UseAnchoredPosition.displayName = "UseAnchoredPosition";
+export const CenteredOnScreen = () => {
+  var _position$top2, _position$left2;
+
+  const {
+    floatingElementRef,
+    anchorElementRef,
+    position
+  } = useAnchoredPosition({
+    side: 'inside-center',
+    align: 'center'
+  }); // The outer Position element simply fills all available space
+
+  return /*#__PURE__*/React.createElement(Box, {
+    ref: anchorElementRef,
+    position: "absolute",
+    top: 0,
+    bottom: 0,
+    left: 0,
+    right: 0
+  }, /*#__PURE__*/React.createElement(Float, {
+    ref: floatingElementRef,
+    top: (_position$top2 = position === null || position === void 0 ? void 0 : position.top) !== null && _position$top2 !== void 0 ? _position$top2 : 0,
+    left: (_position$left2 = position === null || position === void 0 ? void 0 : position.left) !== null && _position$left2 !== void 0 ? _position$left2 : 0
+  }, /*#__PURE__*/React.createElement("p", null, "Screen-Centered Floating Element "), /*#__PURE__*/React.createElement("p", null, /*#__PURE__*/React.createElement("small", null, /*#__PURE__*/React.createElement("em", null, "(Controls are ignored for this story)")))));
+};
+CenteredOnScreen.displayName = "CenteredOnScreen";
+export const ComplexAncestry = () => {
+  var _position$top3, _position$left3;
+
+  const [recalculateSignal, setRecalculateSignal] = React.useState(0);
+  const {
+    floatingElementRef,
+    anchorElementRef,
+    position
+  } = useAnchoredPosition({
+    side: 'outside-bottom',
+    align: 'start'
+  }, [recalculateSignal]);
+  const onRecalculateClick = React.useCallback(() => {
+    setRecalculateSignal(recalculateSignal + 1);
+  }, [recalculateSignal]); // The outer Position element simply fills all available space
+
+  const space = 2;
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Box, {
+    m: space,
+    p: space,
+    sx: {
+      border: '1px solid #000',
+      backgroundColor: 'blue.1',
+      height: '440px',
+      overflow: 'auto',
+      position: 'relative'
+    }
+  }, "Clipping container - this element has ", /*#__PURE__*/React.createElement("code", null, "overflow"), " set to something other than ", /*#__PURE__*/React.createElement("code", null, "visible"), /*#__PURE__*/React.createElement(Box, {
+    m: space,
+    p: space,
+    sx: {
+      border: '1px solid #000',
+      backgroundColor: 'blue.2',
+      position: 'relative'
+    }
+  }, "Relatively positioned parent, but fluid height, so not the clipping parent.", /*#__PURE__*/React.createElement(Box, {
+    m: space,
+    p: space,
+    sx: {
+      border: '1px solid #000',
+      backgroundColor: 'blue.3',
+      position: 'static',
+      overflow: 'hidden'
+    }
+  }, "Floating element container. Position=static and overflow=hidden to show that overflow-hidden on a statically-positioned element will not have any effect.", /*#__PURE__*/React.createElement(Float, {
+    top: (_position$top3 = position === null || position === void 0 ? void 0 : position.top) !== null && _position$top3 !== void 0 ? _position$top3 : 0,
+    left: (_position$left3 = position === null || position === void 0 ? void 0 : position.left) !== null && _position$left3 !== void 0 ? _position$left3 : 0,
+    width: 150,
+    height: 220,
+    ref: floatingElementRef
+  }, "Floating element"))), /*#__PURE__*/React.createElement(Box, {
+    m: space,
+    p: space,
+    backgroundColor: "blue.3",
+    sx: {
+      border: '1px solid #000',
+      height: '2000px'
+    }
+  }, "Anchor element container. This element is really tall to demonstrate behavior within a scrollable clipping container.", /*#__PURE__*/React.createElement(Box, {
+    width: "200px",
+    backgroundColor: "orange.3",
+    height: 60,
+    ref: anchorElementRef,
+    sx: {
+      border: '1px solid #000'
+    },
+    m: space,
+    p: space
+  }, "Anchor Element"))), /*#__PURE__*/React.createElement(Button, {
+    onClick: onRecalculateClick
+  }, "Click to recalculate floating position"));
+};
+const Nav = styled('nav').withConfig({
+  displayName: "useAnchoredPositionstories__Nav",
+  componentId: "sc-18cdzou-2"
+})(["width:300px;padding:", ";position:relative;overflow:hidden;border-right:1px solid ", ";"], get('space.3'), get('colors.border.gray'));
+const Main = styled('main').withConfig({
+  displayName: "useAnchoredPositionstories__Main",
+  componentId: "sc-18cdzou-3"
+})(["display:flex;position:absolute;top:0;left:0;right:0;bottom:0;"]);
+/*
+
+There are a few "gotchas" to take note of from this example. See the
+documentation for more info.
+
+1. The portal's root (<Main> in this example) needs to be large enough
+   to include ANY space that the overlay might need to take. By default,
+   elements are not rendered at full height! Notice how <Main> uses
+   top, left, right, and bottom all set to 0 to achieve a full-size box.
+
+2. The positioning routine needs to know the size of the overlay before
+   calculating its position! Therefore, we use visibility: hidden to
+   prevent showing a single frame of the overlay being positioned at
+   (0, 0).
+
+*/
+
+export const WithPortal = () => {
+  var _position$top4, _position$left4;
+
+  const [showMenu, setShowMenu] = React.useState(false);
+  const mainRef = React.useRef(null); // Calculate the position of the menu
+
+  const {
+    floatingElementRef,
+    anchorElementRef,
+    position
+  } = useAnchoredPosition({
+    side: 'outside-bottom',
+    align: 'start'
+  }, [showMenu]); // Register <Main> as the Portal root
+
+  React.useEffect(() => {
+    if (mainRef.current) {
+      registerPortalRoot(mainRef.current);
+    }
+  }, [mainRef]); // Toggles rendering the menu when the button is clicked
+
+  const toggleMenu = React.useCallback(() => {
+    setShowMenu(!showMenu);
+  }, [showMenu]);
+  return /*#__PURE__*/React.createElement(Main, {
+    ref: mainRef
+  }, /*#__PURE__*/React.createElement(Nav, null, /*#__PURE__*/React.createElement("h2", null, "The nav bar!"), /*#__PURE__*/React.createElement("p", null, "This \u201Cnav bar\u201D has a width of 300px and is ", /*#__PURE__*/React.createElement("code", null, "position:relative"), " with", ' ', /*#__PURE__*/React.createElement("code", null, "overflow:hidden"), ", meaning that its children cannot overflow this container. Using <Portal> with ", /*#__PURE__*/React.createElement("code", null, "useAnchoredPosition"), ", we can break out of this contraint."), /*#__PURE__*/React.createElement(Box, {
+    sx: {
+      textAlign: 'right'
+    }
+  }, /*#__PURE__*/React.createElement(ButtonPrimary, {
+    onClick: toggleMenu,
+    ref: anchorElementRef
+  }, "Show the overlay!"), showMenu ? /*#__PURE__*/React.createElement(Portal, null, /*#__PURE__*/React.createElement(Float, {
+    ref: floatingElementRef,
+    style: {
+      top: `${(_position$top4 = position === null || position === void 0 ? void 0 : position.top) !== null && _position$top4 !== void 0 ? _position$top4 : 0}px`,
+      left: `${(_position$left4 = position === null || position === void 0 ? void 0 : position.left) !== null && _position$left4 !== void 0 ? _position$left4 : 0}px`
+    },
+    width: 250,
+    height: 400,
+    sx: {
+      visibility: position ? 'visible' : 'hidden'
+    }
+  }, "An un-constrained overlay!")) : null)), /*#__PURE__*/React.createElement(Box, {
+    sx: {
+      flexGrow: 1
+    },
+    p: 3
+  }, /*#__PURE__*/React.createElement("h1", null, "The body!"), /*#__PURE__*/React.createElement("p", null, /*#__PURE__*/React.createElement("em", null, "Note: The controls below have no effect in this story."))));
+};
+WithPortal.displayName = "WithPortal";