@primer/components 0.0.0-2021112103924 → 0.0.0-2021112133435

package/lib-esm/ActionMenu2.d.ts

@@ -1,12 +1,10 @@
 import { ButtonProps } from './Button';
 import React from 'react';
-import { AnchoredOverlayProps } from './AnchoredOverlay';
 import { OverlayProps } from './Overlay';
-declare type MenuContextProps = Pick<AnchoredOverlayProps, 'anchorRef' | 'renderAnchor' | 'open' | 'onOpen' | 'onClose'>;
-export declare const MenuContext: React.Context<MenuContextProps>;
-export declare type ActionMenuProps = {
+import { AnchoredOverlayWrapperAnchorProps } from './AnchoredOverlay/AnchoredOverlay';
+declare type ActionMenuBaseProps = {
     /**
-     * Recommended: `ActionMenu.Button` or `ActionMenu.Anchor` with `ActionMenu.Overlay`
+     * Recommended: `ActionMenu.Button` or `ActionMenu.Anchor` with ActionList`
      */
     children: React.ReactElement[] | React.ReactElement;
     /**
@@ -17,18 +15,17 @@ export declare type ActionMenuProps = {
      * If defined, will control the open/closed state of the overlay. Must be used in conjuction with `open`.
      */
     onOpenChange?: (s: boolean) => void;
-} & Pick<AnchoredOverlayProps, 'anchorRef'>;
+    /**
+     * Props to be spread on the internal `Overlay` component.
+     */
+    overlayProps?: Partial<OverlayProps>;
+};
+export declare type ActionMenuProps = ActionMenuBaseProps & AnchoredOverlayWrapperAnchorProps;
 export declare type MenuAnchorProps = {
     children: React.ReactElement;
 };
 /** this component is syntactical sugar 🍭 */
 export declare type MenuButtonProps = ButtonProps;
-declare type MenuOverlayProps = Partial<OverlayProps> & {
-    /**
-     * Recommended: `ActionList`
-     */
-    children: React.ReactElement[] | React.ReactElement;
-};
 export declare const ActionMenu: React.FC<ActionMenuProps> & {
     Button: React.ForwardRefExoticComponent<Pick<{
         color?: string | undefined;
@@ -308,7 +305,6 @@ export declare const ActionMenu: React.FC<ActionMenuProps> & {
         theme?: any;
     }, "color" | "translate" | "hidden" | "children" | "theme" | "value" | "form" | "slot" | "style" | "title" | "variant" | "role" | "sx" | "type" | "name" | "key" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "id" | "lang" | "placeholder" | "spellCheck" | "tabIndex" | "radioGroup" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "css" | "as" | "disabled" | "autoFocus" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget"> & React.RefAttributes<React.RefObject<HTMLElement> | undefined>>;
     Anchor: React.ForwardRefExoticComponent<MenuAnchorProps & React.RefAttributes<React.RefObject<HTMLElement> | undefined>>;
-    Overlay: React.FC<MenuOverlayProps>;
     Divider: React.FC<import("./sx").SxProp>;
 };
 export {};

package/lib-esm/ActionMenu2.js

@@ -1,49 +1,49 @@
 import Button from './Button';
 import React from 'react';
 import { AnchoredOverlay } from './AnchoredOverlay';
-import { useProvidedRefOrCreate, useProvidedStateOrCreate } from './hooks';
+import { useProvidedStateOrCreate } from './hooks/useProvidedStateOrCreate';
+import { useProvidedRefOrCreate } from './hooks';
 import { Divider } from './ActionList2/Divider';
-import { ActionListContainerContext } from './ActionList2/ActionListContainerContext';
-export const MenuContext = /*#__PURE__*/React.createContext({
-  renderAnchor: null,
-  open: false
-});
+import { MenuContext as ActionListMenuContext } from './ActionList2/MenuContext';
 
-const Menu = ({
+const ActionMenuBase = ({
   anchorRef: externalAnchorRef,
   open,
   onOpenChange,
+  overlayProps,
   children
 }) => {
   const [combinedOpenState, setCombinedOpenState] = useProvidedStateOrCreate(open, onOpenChange, false);
+  const anchorRef = useProvidedRefOrCreate(externalAnchorRef);
   const onOpen = React.useCallback(() => setCombinedOpenState(true), [setCombinedOpenState]);
   const onClose = React.useCallback(() => setCombinedOpenState(false), [setCombinedOpenState]);
-  const anchorRef = useProvidedRefOrCreate(externalAnchorRef);
-  let renderAnchor = null; // 🚨 Hack for good API!
-  // we strip out Anchor from children and pass it to AnchoredOverlay to render
-  // with additional props for accessibility
-
-  const contents = React.Children.map(children, child => {
+  let renderAnchor = null;
+  const contents = [];
+  React.Children.map(children, child => {
     if (child.type === MenuButton || child.type === Anchor) {
       renderAnchor = anchorProps => /*#__PURE__*/React.cloneElement(child, anchorProps);
-
-      return null;
+    } else {
+      contents.push(child);
     }
-
-    return child;
   });
-  return /*#__PURE__*/React.createElement(MenuContext.Provider, {
+  return /*#__PURE__*/React.createElement(AnchoredOverlay, {
+    renderAnchor: renderAnchor,
+    anchorRef: anchorRef,
+    open: combinedOpenState,
+    onOpen: onOpen,
+    onClose: onClose,
+    overlayProps: overlayProps
+  }, /*#__PURE__*/React.createElement(ActionListMenuContext.Provider, {
     value: {
-      anchorRef,
-      renderAnchor,
-      open: combinedOpenState,
-      onOpen,
-      onClose
+      parent: 'ActionMenu',
+      listRole: 'menu',
+      itemRole: 'menuitem',
+      afterSelect: onClose
     }
-  }, contents);
+  }, contents));
 };
 
-Menu.displayName = "Menu";
+ActionMenuBase.displayName = "ActionMenuBase";
 const Anchor = /*#__PURE__*/React.forwardRef(({
   children,
   ...anchorProps
@@ -59,42 +59,9 @@ const MenuButton = /*#__PURE__*/React.forwardRef((props, anchorRef) => {
     ref: anchorRef
   }, /*#__PURE__*/React.createElement(Button, props));
 });
-
-const Overlay = ({
-  children,
-  ...overlayProps
-}) => {
-  // we typecast anchorRef as required instead of optional
-  // because we know that we're setting it in context in Menu
-  const {
-    anchorRef,
-    renderAnchor,
-    open,
-    onOpen,
-    onClose
-  } = React.useContext(MenuContext);
-  return /*#__PURE__*/React.createElement(AnchoredOverlay, {
-    anchorRef: anchorRef,
-    renderAnchor: renderAnchor,
-    open: open,
-    onOpen: onOpen,
-    onClose: onClose,
-    overlayProps: overlayProps
-  }, /*#__PURE__*/React.createElement(ActionListContainerContext.Provider, {
-    value: {
-      container: 'ActionMenu',
-      listRole: 'menu',
-      itemRole: 'menuitem',
-      afterSelect: onClose
-    }
-  }, children));
-};
-
-Overlay.displayName = "Overlay";
-Menu.displayName = 'ActionMenu';
-export const ActionMenu = Object.assign(Menu, {
+ActionMenuBase.displayName = 'ActionMenu';
+export const ActionMenu = Object.assign(ActionMenuBase, {
   Button: MenuButton,
   Anchor,
-  Overlay,
   Divider
 });

package/lib-esm/Checkbox.d.ts

@@ -25,5 +25,5 @@ export declare type CheckboxProps = {
 /**
  * An accessible, native checkbox component
  */
-declare const Checkbox: React.ForwardRefExoticComponent<Pick<CheckboxProps, "sx" | keyof React.InputHTMLAttributes<HTMLInputElement> | "indeterminate" | "validationStatus"> & React.RefAttributes<HTMLInputElement>>;
+declare const Checkbox: React.ForwardRefExoticComponent<Pick<CheckboxProps, "sx" | keyof React.InputHTMLAttributes<HTMLInputElement> | "validationStatus" | "indeterminate"> & React.RefAttributes<HTMLInputElement>>;
 export default Checkbox;

package/lib-esm/Radio.d.ts

@@ -0,0 +1,38 @@
+import React, { InputHTMLAttributes } from 'react';
+import { SxProp } from './sx';
+export declare type RadioProps = {
+    /**
+     * A unique value that is never shown to the user.
+     * Used during form submission and to identify which radio button in a group is selected
+     */
+    value: string;
+    /**
+     * Name attribute of the input element. Required for grouping radio inputs
+     */
+    name: string;
+    /**
+     * Apply inactive visual appearance to the radio button
+     */
+    disabled?: boolean;
+    /**
+     * Indicates whether the radio button is selected
+     */
+    checked?: boolean;
+    /**
+     * Forward a ref to the underlying input element
+     */
+    ref?: React.RefObject<HTMLInputElement>;
+    /**
+     * Indicates whether the radio button must be checked before the form can be submitted
+     */
+    required?: boolean;
+    /**
+     * Indicates whether the radio button validation state is non-standard
+     */
+    validationStatus?: 'error' | 'success';
+} & InputHTMLAttributes<HTMLInputElement> & SxProp;
+/**
+ * An accessible, native radio component for selecting one option from a list.
+ */
+declare const Radio: React.ForwardRefExoticComponent<Pick<RadioProps, "sx" | keyof React.InputHTMLAttributes<HTMLInputElement> | "validationStatus"> & React.RefAttributes<HTMLInputElement>>;
+export default Radio;

package/lib-esm/Radio.js

@@ -0,0 +1,40 @@
+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 styled from 'styled-components';
+import React from 'react';
+import sx from './sx';
+const StyledRadio = styled.input.withConfig({
+  displayName: "Radio__StyledRadio",
+  componentId: "sc-1ak1fjg-0"
+})(["cursor:pointer;", " ", ""], props => props.disabled && `cursor: not-allowed;`, sx);
+/**
+ * An accessible, native radio component for selecting one option from a list.
+ */
+
+const Radio = /*#__PURE__*/React.forwardRef(({
+  checked,
+  disabled,
+  sx: sxProp,
+  required,
+  validationStatus,
+  value,
+  name,
+  ...rest
+}, ref) => {
+  return /*#__PURE__*/React.createElement(StyledRadio, _extends({
+    type: "radio",
+    value: value,
+    name: name,
+    ref: ref,
+    disabled: disabled,
+    "aria-disabled": disabled ? 'true' : 'false',
+    checked: checked,
+    "aria-checked": checked ? 'true' : 'false',
+    required: required,
+    "aria-required": required ? 'true' : 'false',
+    "aria-invalid": validationStatus === 'error' ? 'true' : 'false',
+    sx: sxProp
+  }, rest));
+});
+Radio.displayName = 'Radio';
+export default Radio;

package/lib-esm/hooks/index.d.ts

@@ -9,4 +9,3 @@ export { useAnchoredPosition } from './useAnchoredPosition';
 export { useOverlay } from './useOverlay';
 export type { UseOverlaySettings } from './useOverlay';
 export { useRenderForcingRef } from './useRenderForcingRef';
-export { useProvidedStateOrCreate } from './useProvidedStateOrCreate';

package/lib-esm/hooks/index.js

@@ -4,5 +4,4 @@ export { useOnEscapePress } from './useOnEscapePress';
 export { useOpenAndCloseFocus } from './useOpenAndCloseFocus';
 export { useAnchoredPosition } from './useAnchoredPosition';
 export { useOverlay } from './useOverlay';
-export { useRenderForcingRef } from './useRenderForcingRef';
-export { useProvidedStateOrCreate } from './useProvidedStateOrCreate';
+export { useRenderForcingRef } from './useRenderForcingRef';

package/lib-esm/index.d.ts

@@ -21,6 +21,8 @@ export { useOpenAndCloseFocus } from './hooks/useOpenAndCloseFocus';
 export { useOnEscapePress } from './hooks/useOnEscapePress';
 export { useOverlay } from './hooks/useOverlay';
 export { useConfirm } from './Dialog/ConfirmationDialog';
+export { default as Radio } from './Radio';
+export type { RadioProps } from './Radio';
 export { ActionList } from './ActionList';
 export { ActionMenu } from './ActionMenu';
 export type { ActionMenuProps } from './ActionMenu';

package/lib-esm/index.js

@@ -17,6 +17,7 @@ export { useOnEscapePress } from './hooks/useOnEscapePress';
 export { useOverlay } from './hooks/useOverlay';
 export { useConfirm } from './Dialog/ConfirmationDialog'; // Components
 
+export { default as Radio } from './Radio';
 export { ActionList } from './ActionList';
 export { ActionMenu } from './ActionMenu';
 export { default as Autocomplete } from './Autocomplete';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@primer/components",
-  "version": "0.0.0-2021112103924",
+  "version": "0.0.0-2021112133435",
   "description": "Primer react components",
   "main": "lib/index.js",
   "module": "lib-esm/index.js",