@primer/components 0.0.0-2021111235020 → 0.0.0-202111194229

package/lib/ActionMenu.d.ts

@@ -0,0 +1,40 @@
+import { GroupedListProps, ListPropsBase } from './ActionList/List';
+import { ItemProps } from './ActionList/Item';
+import { Divider } from './ActionList/Divider';
+import React from 'react';
+import { OverlayProps } from './Overlay';
+import { AnchoredOverlayWrapperAnchorProps } from './AnchoredOverlay/AnchoredOverlay';
+interface ActionMenuBaseProps extends Partial<Omit<GroupedListProps, keyof ListPropsBase>>, ListPropsBase {
+    /**
+     * Content that is passed into the renderAnchor component, which is a button by default.
+     */
+    anchorContent?: React.ReactNode;
+    /**
+     * A callback that triggers both on clicks and keyboard events. This callback will be overridden by item level `onAction` callbacks.
+     */
+    onAction?: (props: ItemProps, event?: React.MouseEvent<HTMLDivElement> | React.KeyboardEvent<HTMLDivElement>) => void;
+    /**
+     * If defined, will control the open/closed state of the overlay. Must be used in conjuction with `setOpen`.
+     */
+    open?: boolean;
+    /**
+     * If defined, will control the open/closed state of the overlay. Must be used in conjuction with `open`.
+     */
+    setOpen?: (s: boolean) => void;
+    /**
+     * Props to be spread on the internal `Overlay` component.
+     */
+    overlayProps?: Partial<OverlayProps>;
+}
+export declare type ActionMenuProps = ActionMenuBaseProps & AnchoredOverlayWrapperAnchorProps;
+export declare const ActionMenu: {
+    ({ anchorContent, renderAnchor, anchorRef: externalAnchorRef, onAction, open, setOpen, overlayProps, items, ...listProps }: ActionMenuProps): JSX.Element;
+    displayName: string;
+} & {
+    Divider: typeof Divider;
+    Item: {
+        (props: ItemProps): JSX.Element;
+        displayName: string;
+    };
+};
+export {};

package/lib/ActionMenu.js

@@ -0,0 +1,103 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ActionMenu = void 0;
+
+var _List = require("./ActionList/List");
+
+var _Item = require("./ActionList/Item");
+
+var _Divider = require("./ActionList/Divider");
+
+var _Button = _interopRequireDefault(require("./Button"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _AnchoredOverlay = require("./AnchoredOverlay");
+
+var _useProvidedStateOrCreate = require("./hooks/useProvidedStateOrCreate");
+
+var _hooks = require("./hooks");
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+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 ActionMenuItem = props => /*#__PURE__*/_react.default.createElement(_Item.Item, _extends({
+  role: "menuitem"
+}, props));
+
+ActionMenuItem.displayName = "ActionMenuItem";
+ActionMenuItem.displayName = 'ActionMenu.Item';
+
+const ActionMenuBase = ({
+  anchorContent,
+  renderAnchor = props => /*#__PURE__*/_react.default.createElement(_Button.default, props),
+  anchorRef: externalAnchorRef,
+  onAction,
+  open,
+  setOpen,
+  overlayProps,
+  items,
+  ...listProps
+}) => {
+  const [combinedOpenState, setCombinedOpenState] = (0, _useProvidedStateOrCreate.useProvidedStateOrCreate)(open, setOpen, false);
+  const anchorRef = (0, _hooks.useProvidedRefOrCreate)(externalAnchorRef);
+  const onOpen = (0, _react.useCallback)(() => setCombinedOpenState(true), [setCombinedOpenState]);
+  const onClose = (0, _react.useCallback)(() => setCombinedOpenState(false), [setCombinedOpenState]);
+  const renderMenuAnchor = (0, _react.useMemo)(() => {
+    if (renderAnchor === null) {
+      return null;
+    }
+
+    return props => {
+      return renderAnchor({
+        'aria-label': 'menu',
+        children: anchorContent,
+        ...props
+      });
+    };
+  }, [anchorContent, renderAnchor]);
+  const itemsToRender = (0, _react.useMemo)(() => {
+    return items.map(item => {
+      return { ...item,
+        role: 'menuitem',
+        onAction: (props, event) => {
+          var _item$onAction;
+
+          const actionCallback = (_item$onAction = item.onAction) !== null && _item$onAction !== void 0 ? _item$onAction : onAction;
+          actionCallback === null || actionCallback === void 0 ? void 0 : actionCallback(props, event);
+
+          if (!event.defaultPrevented) {
+            onClose();
+          }
+        }
+      };
+    });
+  }, [items, onAction, onClose]);
+  return /*#__PURE__*/_react.default.createElement(_AnchoredOverlay.AnchoredOverlay, {
+    renderAnchor: renderMenuAnchor,
+    anchorRef: anchorRef,
+    open: combinedOpenState,
+    onOpen: onOpen,
+    onClose: onClose,
+    overlayProps: overlayProps
+  }, /*#__PURE__*/_react.default.createElement(_List.List, _extends({}, listProps, {
+    role: "menu",
+    items: itemsToRender
+  })));
+};
+
+ActionMenuBase.displayName = "ActionMenuBase";
+ActionMenuBase.displayName = 'ActionMenu';
+const ActionMenu = Object.assign(ActionMenuBase, {
+  Divider: _Divider.Divider,
+  Item: ActionMenuItem
+});
+exports.ActionMenu = ActionMenu;

package/lib/AnchoredOverlay/AnchoredOverlay.d.ts

@@ -0,0 +1,62 @@
+import React from 'react';
+import { OverlayProps } from '../Overlay';
+import { FocusTrapHookSettings } from '../hooks/useFocusTrap';
+import { FocusZoneHookSettings } from '../hooks/useFocusZone';
+import { PositionSettings } from '../behaviors/anchoredPosition';
+interface AnchoredOverlayPropsWithAnchor {
+    /**
+     * A custom function component used to render the anchor element.
+     * Will receive the selected text as `children` prop when an item is activated.
+     */
+    renderAnchor: <T extends React.HTMLAttributes<HTMLElement>>(props: T) => JSX.Element;
+    /**
+     * An override to the internal ref that will be spread on to the renderAnchor
+     */
+    anchorRef?: React.RefObject<HTMLElement>;
+}
+interface AnchoredOverlayPropsWithoutAnchor {
+    /**
+     * A custom function component used to render the anchor element.
+     * When renderAnchor is null, an anchorRef is required.
+     */
+    renderAnchor: null;
+    /**
+     * An override to the internal renderAnchor ref that will be used to position the overlay.
+     * When renderAnchor is null this can be used to make an anchor that is detached from ActionMenu.
+     */
+    anchorRef: React.RefObject<HTMLElement>;
+}
+export declare type AnchoredOverlayWrapperAnchorProps = Partial<AnchoredOverlayPropsWithAnchor> | AnchoredOverlayPropsWithoutAnchor;
+interface AnchoredOverlayBaseProps extends Pick<OverlayProps, 'height' | 'width'> {
+    /**
+     * Determines whether the overlay portion of the component should be shown or not
+     */
+    open: boolean;
+    /**
+     * A callback which is called whenever the overlay is currently closed and an "open gesture" is detected.
+     */
+    onOpen?: (gesture: 'anchor-click' | 'anchor-key-press') => unknown;
+    /**
+     * A callback which is called whenever the overlay is currently open and a "close gesture" is detected.
+     */
+    onClose?: (gesture: 'anchor-click' | 'click-outside' | 'escape') => unknown;
+    /**
+     * Props to be spread on the internal `Overlay` component.
+     */
+    overlayProps?: Partial<OverlayProps>;
+    /**
+     * Settings to apply to the Focus Zone on the internal `Overlay` component.
+     */
+    focusTrapSettings?: Partial<FocusTrapHookSettings>;
+    /**
+     * Settings to apply to the Focus Zone on the internal `Overlay` component.
+     */
+    focusZoneSettings?: Partial<FocusZoneHookSettings>;
+}
+export declare type AnchoredOverlayProps = AnchoredOverlayBaseProps & (AnchoredOverlayPropsWithAnchor | AnchoredOverlayPropsWithoutAnchor) & Partial<Pick<PositionSettings, 'align' | 'side'>>;
+/**
+ * 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.
+ */
+export declare const AnchoredOverlay: React.FC<AnchoredOverlayProps>;
+export {};

package/lib/AnchoredOverlay/AnchoredOverlay.js

@@ -0,0 +1,124 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.AnchoredOverlay = void 0;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _Overlay = _interopRequireDefault(require("../Overlay"));
+
+var _useFocusTrap = require("../hooks/useFocusTrap");
+
+var _useFocusZone = require("../hooks/useFocusZone");
+
+var _hooks = require("../hooks");
+
+var _ssr = require("@react-aria/ssr");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+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); }
+
+/**
+ * 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 = (0, _hooks.useProvidedRefOrCreate)(externalAnchorRef);
+  const [overlayRef, updateOverlayRef] = (0, _hooks.useRenderForcingRef)();
+  const anchorId = (0, _ssr.useSSRSafeId)();
+  const onClickOutside = (0, _react.useCallback)(() => onClose === null || onClose === void 0 ? void 0 : onClose('click-outside'), [onClose]);
+  const onEscape = (0, _react.useCallback)(() => onClose === null || onClose === void 0 ? void 0 : onClose('escape'), [onClose]);
+  const onAnchorKeyDown = (0, _react.useCallback)(event => {
+    if (!event.defaultPrevented) {
+      if (!open && ['ArrowDown', 'ArrowUp', ' ', 'Enter'].includes(event.key)) {
+        onOpen === null || onOpen === void 0 ? void 0 : onOpen('anchor-key-press');
+        event.preventDefault();
+      }
+    }
+  }, [open, onOpen]);
+  const onAnchorClick = (0, _react.useCallback)(event => {
+    if (event.defaultPrevented || event.button !== 0) {
+      return;
+    }
+
+    if (!open) {
+      onOpen === null || onOpen === void 0 ? void 0 : onOpen('anchor-click');
+    } else {
+      onClose === null || onClose === void 0 ? void 0 : onClose('anchor-click');
+    }
+  }, [open, onOpen, onClose]);
+  const {
+    position
+  } = (0, _hooks.useAnchoredPosition)({
+    anchorElementRef: anchorRef,
+    floatingElementRef: overlayRef,
+    side,
+    align
+  }, [overlayRef.current]);
+  (0, _react.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]);
+  (0, _useFocusZone.useFocusZone)({
+    containerRef: overlayRef,
+    disabled: !open || !position,
+    ...focusZoneSettings
+  });
+  (0, _useFocusTrap.useFocusTrap)({
+    containerRef: overlayRef,
+    disabled: !open || !position,
+    ...focusTrapSettings
+  });
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, renderAnchor && renderAnchor({
+    ref: anchorRef,
+    id: anchorId,
+    'aria-labelledby': anchorId,
+    'aria-haspopup': 'true',
+    tabIndex: 0,
+    onClick: onAnchorClick,
+    onKeyDown: onAnchorKeyDown
+  }), open ? /*#__PURE__*/_react.default.createElement(_Overlay.default, _extends({
+    returnFocusRef: anchorRef,
+    onClickOutside: onClickOutside,
+    ignoreClickRefs: [anchorRef],
+    onEscape: onEscape,
+    ref: updateOverlayRef,
+    role: "none",
+    visibility: position ? 'visible' : 'hidden',
+    height: height,
+    width: width,
+    top: (position === null || position === void 0 ? void 0 : position.top) || 0,
+    left: (position === null || position === void 0 ? void 0 : position.left) || 0,
+    anchorSide: position === null || position === void 0 ? void 0 : position.anchorSide
+  }, overlayProps), children) : null);
+};
+
+exports.AnchoredOverlay = AnchoredOverlay;
+AnchoredOverlay.displayName = 'AnchoredOverlay';
+AnchoredOverlay.defaultProps = {
+  side: 'outside-bottom',
+  align: 'start'
+};

package/lib/AnchoredOverlay/index.d.ts

@@ -0,0 +1,2 @@
+export { AnchoredOverlay } from './AnchoredOverlay';
+export type { AnchoredOverlayProps } from './AnchoredOverlay';

package/lib/AnchoredOverlay/index.js

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