@primer/components 31.2.0-rc.fbb10090 → 31.2.1-rc.32ed6e21

package/lib/ActionList2/List.jsx

@@ -0,0 +1,41 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.List = exports.ListContext = void 0;
+const react_1 = __importDefault(require("react"));
+const styled_components_1 = __importDefault(require("styled-components"));
+const sx_1 = __importStar(require("../sx"));
+exports.ListContext = react_1.default.createContext({});
+const ListBox = styled_components_1.default.ul(sx_1.default);
+exports.List = react_1.default.forwardRef(({ variant = 'inset', selectionVariant, showDividers = false, sx: sxProp = {}, ...props }, forwardedRef) => {
+    const styles = {
+        margin: 0,
+        paddingInlineStart: 0,
+        paddingY: variant === 'inset' ? 2 : 0
+    };
+    return (<ListBox sx={sx_1.merge(styles, sxProp)} aria-multiselectable={selectionVariant === 'multiple' ? true : undefined} {...props} ref={forwardedRef}>
+        <exports.ListContext.Provider value={{ variant, selectionVariant, showDividers }}>{props.children}</exports.ListContext.Provider>
+      </ListBox>);
+});
+exports.List.displayName = 'ActionList';

package/lib/ActionList2/Selection.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+import { ItemProps } from './Item';
+declare type SelectionProps = Pick<ItemProps, 'selected'>;
+export declare const Selection: React.FC<SelectionProps>;
+export {};

package/lib/ActionList2/Selection.js

@@ -0,0 +1,84 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Selection = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _octiconsReact = require("@primer/octicons-react");
+
+var _List = require("./List");
+
+var _Group = require("./Group");
+
+var _Visuals = require("./Visuals");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+const Selection = ({
+  selected
+}) => {
+  const {
+    selectionVariant: listSelectionVariant
+  } = _react.default.useContext(_List.ListContext);
+
+  const {
+    selectionVariant: groupSelectionVariant
+  } = _react.default.useContext(_Group.GroupContext);
+  /** selectionVariant in Group can override the selectionVariant in List root */
+
+
+  const selectionVariant = typeof groupSelectionVariant !== 'undefined' ? groupSelectionVariant : listSelectionVariant; // if selectionVariant is not set on List, don't show selection
+
+  if (!selectionVariant) {
+    // to avoid confusion, fail loudly instead of silently ignoring
+    if (selected) throw new Error('For Item to be selected, ActionList or ActionList.Group needs to have a selectionVariant defined');
+    return null;
+  }
+
+  if (selectionVariant === 'single') {
+    return /*#__PURE__*/_react.default.createElement(_Visuals.LeadingVisualContainer, null, selected && /*#__PURE__*/_react.default.createElement(_octiconsReact.CheckIcon, null));
+  }
+  /**
+   * selectionVariant is multiple
+   * we use a svg instead of an input because there should not
+   * be an interactive element inside an option
+   * svg copied from primer/css
+   */
+
+
+  return /*#__PURE__*/_react.default.createElement(_Visuals.LeadingVisualContainer, {
+    sx: {
+      rect: {
+        fill: selected ? 'accent.fg' : 'canvas.default',
+        stroke: selected ? 'accent.fg' : 'border.default'
+      },
+      path: {
+        fill: 'fg.onEmphasis',
+        boxShadow: 'shadow.small',
+        opacity: selected ? 1 : 0
+      }
+    }
+  }, /*#__PURE__*/_react.default.createElement("svg", {
+    width: "16",
+    height: "16",
+    viewBox: "0 0 16 16",
+    xmlns: "http://www.w3.org/2000/svg",
+    "aria-hidden": "true"
+  }, /*#__PURE__*/_react.default.createElement("rect", {
+    x: "2",
+    y: "2",
+    width: "12",
+    height: "12",
+    rx: "4"
+  }), /*#__PURE__*/_react.default.createElement("path", {
+    fillRule: "evenodd",
+    strokeWidth: "0",
+    d: "M4.03231 8.69862C3.84775 8.20646 4.49385 7.77554 4.95539 7.77554C5.41693 7.77554 6.80154 9.85246 6.80154 9.85246C6.80154 9.85246 10.2631 4.314 10.4938 4.08323C10.7246 3.85246 11.8785 4.08323 11.4169 5.00631C11.0081 5.82388 7.26308 11.4678 7.26308 11.4678C7.26308 11.4678 6.80154 12.1602 6.34 11.4678C5.87846 10.7755 4.21687 9.19077 4.03231 8.69862Z"
+  })));
+};
+
+exports.Selection = Selection;
+Selection.displayName = "Selection";

package/lib/ActionList2/Selection.jsx

@@ -0,0 +1,50 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Selection = void 0;
+const react_1 = __importDefault(require("react"));
+const octicons_react_1 = require("@primer/octicons-react");
+const List_1 = require("./List");
+const Group_1 = require("./Group");
+const Visuals_1 = require("./Visuals");
+const Selection = ({ selected }) => {
+    const { selectionVariant: listSelectionVariant } = react_1.default.useContext(List_1.ListContext);
+    const { selectionVariant: groupSelectionVariant } = react_1.default.useContext(Group_1.GroupContext);
+    /** selectionVariant in Group can override the selectionVariant in List root */
+    const selectionVariant = typeof groupSelectionVariant !== 'undefined' ? groupSelectionVariant : listSelectionVariant;
+    // if selectionVariant is not set on List, don't show selection
+    if (!selectionVariant) {
+        // to avoid confusion, fail loudly instead of silently ignoring
+        if (selected)
+            throw new Error('For Item to be selected, ActionList or ActionList.Group needs to have a selectionVariant defined');
+        return null;
+    }
+    if (selectionVariant === 'single') {
+        return <Visuals_1.LeadingVisualContainer>{selected && <octicons_react_1.CheckIcon />}</Visuals_1.LeadingVisualContainer>;
+    }
+    /**
+     * selectionVariant is multiple
+     * we use a svg instead of an input because there should not
+     * be an interactive element inside an option
+     * svg copied from primer/css
+     */
+    return (<Visuals_1.LeadingVisualContainer sx={{
+            rect: {
+                fill: selected ? 'accent.fg' : 'canvas.default',
+                stroke: selected ? 'accent.fg' : 'border.default'
+            },
+            path: {
+                fill: 'fg.onEmphasis',
+                boxShadow: 'shadow.small',
+                opacity: selected ? 1 : 0
+            }
+        }}>
+      <svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
+        <rect x="2" y="2" width="12" height="12" rx="4"></rect>
+        <path fillRule="evenodd" strokeWidth="0" d="M4.03231 8.69862C3.84775 8.20646 4.49385 7.77554 4.95539 7.77554C5.41693 7.77554 6.80154 9.85246 6.80154 9.85246C6.80154 9.85246 10.2631 4.314 10.4938 4.08323C10.7246 3.85246 11.8785 4.08323 11.4169 5.00631C11.0081 5.82388 7.26308 11.4678 7.26308 11.4678C7.26308 11.4678 6.80154 12.1602 6.34 11.4678C5.87846 10.7755 4.21687 9.19077 4.03231 8.69862Z"/>
+      </svg>
+    </Visuals_1.LeadingVisualContainer>);
+};
+exports.Selection = Selection;

package/lib/ActionList2/Visuals.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import { SxProp } from '../sx';
+declare type VisualProps = SxProp & React.HTMLAttributes<HTMLSpanElement>;
+export declare const LeadingVisualContainer: React.FC<VisualProps>;
+export declare type LeadingVisualProps = VisualProps;
+export declare const LeadingVisual: React.FC<VisualProps>;
+export declare type TrailingVisualProps = VisualProps;
+export declare const TrailingVisual: React.FC<VisualProps>;
+export {};

package/lib/ActionList2/Visuals.js

@@ -0,0 +1,90 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.TrailingVisual = exports.LeadingVisual = exports.LeadingVisualContainer = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _Box = _interopRequireDefault(require("../Box"));
+
+var _sx = require("../sx");
+
+var _constants = require("../constants");
+
+var _Item = require("./Item");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+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); }
+
+const LeadingVisualContainer = ({
+  sx = {},
+  ...props
+}) => {
+  return /*#__PURE__*/_react.default.createElement(_Box.default, _extends({
+    as: "span",
+    sx: (0, _sx.merge)({
+      height: _Item.TEXT_ROW_HEIGHT,
+      // match height of text row
+      minWidth: (0, _constants.get)('space.3'),
+      maxWidth: _Item.TEXT_ROW_HEIGHT,
+      // square (same as height)
+      display: 'flex',
+      justifyContent: 'center',
+      alignItems: 'center',
+      flexShrink: 0,
+      marginRight: 2
+    }, sx)
+  }, props));
+};
+
+exports.LeadingVisualContainer = LeadingVisualContainer;
+LeadingVisualContainer.displayName = "LeadingVisualContainer";
+
+const LeadingVisual = ({
+  sx = {},
+  ...props
+}) => {
+  return /*#__PURE__*/_react.default.createElement(_Item.Slot, {
+    name: "LeadingVisual"
+  }, ({
+    variant,
+    disabled
+  }) => /*#__PURE__*/_react.default.createElement(LeadingVisualContainer, _extends({
+    sx: (0, _sx.merge)({
+      color: (0, _Item.getVariantStyles)(variant, disabled).iconColor,
+      svg: {
+        fontSize: 0
+      }
+    }, sx)
+  }, props), props.children));
+};
+
+exports.LeadingVisual = LeadingVisual;
+LeadingVisual.displayName = "LeadingVisual";
+
+const TrailingVisual = ({
+  sx = {},
+  ...props
+}) => {
+  return /*#__PURE__*/_react.default.createElement(_Item.Slot, {
+    name: "TrailingVisual"
+  }, ({
+    variant,
+    disabled
+  }) => /*#__PURE__*/_react.default.createElement(_Box.default, _extends({
+    as: "span",
+    sx: (0, _sx.merge)({
+      height: '20px',
+      // match height of text row
+      flexShrink: 0,
+      color: (0, _Item.getVariantStyles)(variant, disabled).annotationColor,
+      marginLeft: 2
+    }, sx)
+  }, props), props.children));
+};
+
+exports.TrailingVisual = TrailingVisual;
+TrailingVisual.displayName = "TrailingVisual";

package/lib/ActionList2/Visuals.jsx

@@ -0,0 +1,48 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TrailingVisual = exports.LeadingVisual = exports.LeadingVisualContainer = void 0;
+const react_1 = __importDefault(require("react"));
+const Box_1 = __importDefault(require("../Box"));
+const sx_1 = require("../sx");
+const constants_1 = require("../constants");
+const Item_1 = require("./Item");
+const LeadingVisualContainer = ({ sx = {}, ...props }) => {
+    return (<Box_1.default as="span" sx={sx_1.merge({
+            height: Item_1.TEXT_ROW_HEIGHT,
+            minWidth: constants_1.get('space.3'),
+            maxWidth: Item_1.TEXT_ROW_HEIGHT,
+            display: 'flex',
+            justifyContent: 'center',
+            alignItems: 'center',
+            flexShrink: 0,
+            marginRight: 2
+        }, sx)} {...props}/>);
+};
+exports.LeadingVisualContainer = LeadingVisualContainer;
+const LeadingVisual = ({ sx = {}, ...props }) => {
+    return (<Item_1.Slot name="LeadingVisual">
+      {({ variant, disabled }) => (<exports.LeadingVisualContainer sx={sx_1.merge({
+                color: Item_1.getVariantStyles(variant, disabled).iconColor,
+                svg: { fontSize: 0 }
+            }, sx)} {...props}>
+          {props.children}
+        </exports.LeadingVisualContainer>)}
+    </Item_1.Slot>);
+};
+exports.LeadingVisual = LeadingVisual;
+const TrailingVisual = ({ sx = {}, ...props }) => {
+    return (<Item_1.Slot name="TrailingVisual">
+      {({ variant, disabled }) => (<Box_1.default as="span" sx={sx_1.merge({
+                height: '20px',
+                flexShrink: 0,
+                color: Item_1.getVariantStyles(variant, disabled).annotationColor,
+                marginLeft: 2
+            }, sx)} {...props}>
+          {props.children}
+        </Box_1.default>)}
+    </Item_1.Slot>);
+};
+exports.TrailingVisual = TrailingVisual;

package/lib/ActionList2/index.d.ts

@@ -0,0 +1,36 @@
+/// <reference types="react" />
+import { Divider } from './Divider';
+export type { ListProps as ActionListProps } from './List';
+export type { GroupProps } from './Group';
+export type { ItemProps } from './Item';
+export type { DescriptionProps } from './Description';
+export type { LeadingVisualProps, TrailingVisualProps } from './Visuals';
+/**
+ * Collection of list-related components.
+ */
+export declare const ActionList: import("@radix-ui/react-polymorphic").ForwardRefComponent<"ul", import("./List").ListProps> & {
+    /** Collects related `Items` in an `ActionList`. */
+    Group: import("react").FC<import("./Group").GroupProps>;
+    /** An actionable or selectable `Item` */
+    Item: import("@radix-ui/react-polymorphic").ForwardRefComponent<"li", import("./Item").ItemProps>;
+    /** A `Item` that renders a full-size anchor inside ListItem */
+    LinkItem: import("@radix-ui/react-polymorphic").ForwardRefComponent<"a", Pick<import("./Item").ItemProps, "children" | "sx"> & {
+        download?: string | undefined;
+        href?: string | undefined;
+        hrefLang?: string | undefined;
+        media?: string | undefined;
+        ping?: string | undefined;
+        rel?: string | undefined;
+        target?: string | undefined;
+        type?: string | undefined;
+        referrerPolicy?: import("react").HTMLAttributeReferrerPolicy | undefined;
+    }>;
+    /** Visually separates `Item`s or `Group`s in an `ActionList`. */
+    Divider: typeof Divider;
+    /** Secondary text which provides additional information about an `Item`. */
+    Description: import("react").FC<import("./Description").DescriptionProps>;
+    /** Icon (or similar) positioned before `Item` text. */
+    LeadingVisual: import("react").FC<import("../sx").SxProp & import("react").HTMLAttributes<HTMLSpanElement>>;
+    /** Icon (or similar) positioned after `Item` text. */
+    TrailingVisual: import("react").FC<import("../sx").SxProp & import("react").HTMLAttributes<HTMLSpanElement>>;
+};

package/lib/ActionList2/index.js

@@ -0,0 +1,29 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ActionList = void 0;
+const List_1 = require("./List");
+const Group_1 = require("./Group");
+const Item_1 = require("./Item");
+const LinkItem_1 = require("./LinkItem");
+const Divider_1 = require("./Divider");
+const Description_1 = require("./Description");
+const Visuals_1 = require("./Visuals");
+/**
+ * Collection of list-related components.
+ */
+exports.ActionList = Object.assign(List_1.List, {
+    /** Collects related `Items` in an `ActionList`. */
+    Group: Group_1.Group,
+    /** An actionable or selectable `Item` */
+    Item: Item_1.Item,
+    /** A `Item` that renders a full-size anchor inside ListItem */
+    LinkItem: LinkItem_1.LinkItem,
+    /** Visually separates `Item`s or `Group`s in an `ActionList`. */
+    Divider: Divider_1.Divider,
+    /** Secondary text which provides additional information about an `Item`. */
+    Description: Description_1.Description,
+    /** Icon (or similar) positioned before `Item` text. */
+    LeadingVisual: Visuals_1.LeadingVisual,
+    /** Icon (or similar) positioned after `Item` text. */
+    TrailingVisual: Visuals_1.TrailingVisual
+});

package/lib/ActionMenu.jsx

@@ -0,0 +1,73 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ActionMenu = void 0;
+const List_1 = require("./ActionList/List");
+const Item_1 = require("./ActionList/Item");
+const Divider_1 = require("./ActionList/Divider");
+const Button_1 = __importDefault(require("./Button"));
+const react_1 = __importStar(require("react"));
+const AnchoredOverlay_1 = require("./AnchoredOverlay");
+const useProvidedStateOrCreate_1 = require("./hooks/useProvidedStateOrCreate");
+const hooks_1 = require("./hooks");
+const ActionMenuItem = (props) => <Item_1.Item role="menuitem" {...props}/>;
+ActionMenuItem.displayName = 'ActionMenu.Item';
+const ActionMenuBase = ({ anchorContent, renderAnchor = (props) => <Button_1.default {...props}/>, anchorRef: externalAnchorRef, onAction, open, setOpen, overlayProps, items, ...listProps }) => {
+    const [combinedOpenState, setCombinedOpenState] = useProvidedStateOrCreate_1.useProvidedStateOrCreate(open, setOpen, false);
+    const anchorRef = hooks_1.useProvidedRefOrCreate(externalAnchorRef);
+    const onOpen = react_1.useCallback(() => setCombinedOpenState(true), [setCombinedOpenState]);
+    const onClose = react_1.useCallback(() => setCombinedOpenState(false), [setCombinedOpenState]);
+    const renderMenuAnchor = react_1.useMemo(() => {
+        if (renderAnchor === null) {
+            return null;
+        }
+        return (props) => {
+            return renderAnchor({
+                'aria-label': 'menu',
+                children: anchorContent,
+                ...props
+            });
+        };
+    }, [anchorContent, renderAnchor]);
+    const itemsToRender = react_1.useMemo(() => {
+        return items.map(item => {
+            return {
+                ...item,
+                role: 'menuitem',
+                onAction: (props, event) => {
+                    const actionCallback = item.onAction ?? onAction;
+                    actionCallback?.(props, event);
+                    if (!event.defaultPrevented) {
+                        onClose();
+                    }
+                }
+            };
+        });
+    }, [items, onAction, onClose]);
+    return (<AnchoredOverlay_1.AnchoredOverlay renderAnchor={renderMenuAnchor} anchorRef={anchorRef} open={combinedOpenState} onOpen={onOpen} onClose={onClose} overlayProps={overlayProps}>
+      <List_1.List {...listProps} role="menu" items={itemsToRender}/>
+    </AnchoredOverlay_1.AnchoredOverlay>);
+};
+ActionMenuBase.displayName = 'ActionMenu';
+exports.ActionMenu = Object.assign(ActionMenuBase, { Divider: Divider_1.Divider, Item: ActionMenuItem });

package/lib/AnchoredOverlay/AnchoredOverlay.jsx

@@ -0,0 +1,100 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AnchoredOverlay = void 0;
+const react_1 = __importStar(require("react"));
+const Overlay_1 = __importDefault(require("../Overlay"));
+const useFocusTrap_1 = require("../hooks/useFocusTrap");
+const useFocusZone_1 = require("../hooks/useFocusZone");
+const hooks_1 = require("../hooks");
+const ssr_1 = require("@react-aria/ssr");
+/**
+ * An `AnchoredOverlay` provides an anchor that will open a floating overlay positioned relative to the anchor.
+ * The overlay can be opened and navigated using keyboard or mouse.
+ */
+const AnchoredOverlay = ({ renderAnchor, anchorRef: externalAnchorRef, children, open, onOpen, onClose, height, width, overlayProps, focusTrapSettings, focusZoneSettings, side, align }) => {
+    const anchorRef = hooks_1.useProvidedRefOrCreate(externalAnchorRef);
+    const [overlayRef, updateOverlayRef] = hooks_1.useRenderForcingRef();
+    const anchorId = ssr_1.useSSRSafeId();
+    const onClickOutside = react_1.useCallback(() => onClose?.('click-outside'), [onClose]);
+    const onEscape = react_1.useCallback(() => onClose?.('escape'), [onClose]);
+    const onAnchorKeyDown = react_1.useCallback((event) => {
+        if (!event.defaultPrevented) {
+            if (!open && ['ArrowDown', 'ArrowUp', ' ', 'Enter'].includes(event.key)) {
+                onOpen?.('anchor-key-press');
+                event.preventDefault();
+            }
+        }
+    }, [open, onOpen]);
+    const onAnchorClick = react_1.useCallback((event) => {
+        if (event.defaultPrevented || event.button !== 0) {
+            return;
+        }
+        if (!open) {
+            onOpen?.('anchor-click');
+        }
+        else {
+            onClose?.('anchor-click');
+        }
+    }, [open, onOpen, onClose]);
+    const { position } = hooks_1.useAnchoredPosition({
+        anchorElementRef: anchorRef,
+        floatingElementRef: overlayRef,
+        side,
+        align
+    }, [overlayRef.current]);
+    react_1.useEffect(() => {
+        // ensure overlay ref gets cleared when closed, so position can reset between closing/re-opening
+        if (!open && overlayRef.current) {
+            updateOverlayRef(null);
+        }
+    }, [open, overlayRef, updateOverlayRef]);
+    useFocusZone_1.useFocusZone({
+        containerRef: overlayRef,
+        disabled: !open || !position,
+        ...focusZoneSettings
+    });
+    useFocusTrap_1.useFocusTrap({ containerRef: overlayRef, disabled: !open || !position, ...focusTrapSettings });
+    return (<>
+      {renderAnchor &&
+            renderAnchor({
+                ref: anchorRef,
+                id: anchorId,
+                'aria-labelledby': anchorId,
+                'aria-haspopup': 'true',
+                tabIndex: 0,
+                onClick: onAnchorClick,
+                onKeyDown: onAnchorKeyDown
+            })}
+      {open ? (<Overlay_1.default returnFocusRef={anchorRef} onClickOutside={onClickOutside} ignoreClickRefs={[anchorRef]} onEscape={onEscape} ref={updateOverlayRef} role="none" visibility={position ? 'visible' : 'hidden'} height={height} width={width} top={position?.top || 0} left={position?.left || 0} anchorSide={position?.anchorSide} {...overlayProps}>
+          {children}
+        </Overlay_1.default>) : null}
+    </>);
+};
+exports.AnchoredOverlay = AnchoredOverlay;
+exports.AnchoredOverlay.displayName = 'AnchoredOverlay';
+exports.AnchoredOverlay.defaultProps = {
+    side: 'outside-bottom',
+    align: 'start'
+};

package/lib/AnchoredOverlay/index.js

@@ -1,13 +1,5 @@
 "use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-Object.defineProperty(exports, "AnchoredOverlay", {
-  enumerable: true,
-  get: function () {
-    return _AnchoredOverlay.AnchoredOverlay;
-  }
-});
-
-var _AnchoredOverlay = require("./AnchoredOverlay");
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AnchoredOverlay = void 0;
+var AnchoredOverlay_1 = require("./AnchoredOverlay");
+Object.defineProperty(exports, "AnchoredOverlay", { enumerable: true, get: function () { return AnchoredOverlay_1.AnchoredOverlay; } });