@primer/components 0.0.0-202182422492 → 0.0.0-20218276039

package/lib/ActionList/Item.d.ts

@@ -2,12 +2,10 @@ import { IconProps } from '@primer/octicons-react';
 import React from 'react';
 import { SxProp } from '../sx';
 import { ItemInput } from './List';
-import { ForwardRefComponent as PolymorphicForwardRefComponent } from '@radix-ui/react-polymorphic';
-import { AriaRole } from '../utils/types';
 /**
  * Contract for props passed to the `Item` component.
  */
-export interface ItemProps extends SxProp {
+export interface ItemProps extends Omit<React.ComponentPropsWithoutRef<'div'>, 'id'>, SxProp {
     /**
      * Primary text which names an `Item`.
      */
@@ -70,18 +68,6 @@ export interface ItemProps extends SxProp {
      * An id associated with this item.  Should be unique between items
      */
     id?: number | string;
-    /**
-     * Node to be included inside the item before the text.
-     */
-    children?: React.ReactNode;
-    /**
-     * The ARIA role describing the function of `List` component. `option` is a common value.
-     */
-    role?: AriaRole;
-    /**
-     * An item to pass back in the `onAction` callback, meant as
-     */
-    item?: ItemInput;
 }
 export declare const TextContainer: import("styled-components").StyledComponent<"span", any, {
     dangerouslySetInnerHtml?: React.DOMAttributes<HTMLDivElement>['dangerouslySetInnerHTML'];
@@ -89,5 +75,6 @@ export declare const TextContainer: import("styled-components").StyledComponent<
 /**
  * An actionable or selectable `Item` with an optional icon and description.
  */
-declare const Item: PolymorphicForwardRefComponent<"div", ItemProps>;
-export { Item };
+export declare function Item(itemProps: Partial<ItemProps> & {
+    item?: ItemInput;
+}): JSX.Element;

package/lib/ActionList/Item.js

@@ -3,7 +3,8 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.Item = exports.TextContainer = void 0;
+exports.Item = Item;
+exports.TextContainer = void 0;
 
 var _octiconsReact = require("@primer/octicons-react");
 
@@ -110,7 +111,7 @@ const MainContent = _styledComponents.default.div.withConfig({
 const StyledItem = _styledComponents.default.div.withConfig({
   displayName: "Item__StyledItem",
   componentId: "jqpvy8-2"
-})(["padding:6px ", ";display:flex;border-radius:", ";color:", ";transition:background 33.333ms linear;text-decoration:none;@media (hover:hover) and (pointer:fine){:hover{background:var(--item-hover-bg-override,", ");cursor:", ";}}:not(:first-of-type):not(", " + &):not(", " + &){margin-top:", ";", "::before{content:' ';display:block;position:absolute;width:100%;top:-7px;border:0 solid ", ";border-top-width:", ";}}&:hover ", "::before,:hover + * ", "::before{border-color:var(--item-hover-divider-border-color-override,transparent) !important;}&:focus ", "::before,:focus + * ", "::before,&[", "] ", "::before,[", "] + & ", "::before{border-color:transparent !important;}&[", "='", "']{background:", ";}&[", "='", "']{background:", ";}&:focus{background:", ";outline:none;}&:active{background:", ";}", ""], (0, _constants.get)('space.2'), (0, _constants.get)('radii.2'), ({
+})(["padding:6px ", ";display:flex;border-radius:", ";color:", ";transition:background 33.333ms linear;@media (hover:hover) and (pointer:fine){:hover{background:var(--item-hover-bg-override,", ");cursor:", ";}}:not(:first-of-type):not(", " + &):not(", " + &){margin-top:", ";", "::before{content:' ';display:block;position:absolute;width:100%;top:-7px;border:0 solid ", ";border-top-width:", ";}}&:hover ", "::before,:hover + * ", "::before{border-color:var(--item-hover-divider-border-color-override,transparent) !important;}&:focus ", "::before,:focus + * ", "::before,&[", "] ", "::before,[", "] + & ", "::before{border-color:transparent !important;}&[", "='", "']{background:", ";}&[", "='", "']{background:", ";}&:focus{background:", ";outline:none;}&:active{background:", ";}", ""], (0, _constants.get)('space.2'), (0, _constants.get)('radii.2'), ({
   variant,
   item
 }) => getItemVariant(variant, item === null || item === void 0 ? void 0 : item.disabled).color, ({
@@ -177,9 +178,8 @@ const MultiSelectInput = _styledComponents.default.input.withConfig({
  */
 
 
-const Item = /*#__PURE__*/_react.default.forwardRef((itemProps, ref) => {
+function Item(itemProps) {
   const {
-    as: Component,
     text,
     description,
     descriptionVariant = 'inline',
@@ -235,8 +235,6 @@ const Item = /*#__PURE__*/_react.default.forwardRef((itemProps, ref) => {
     theme
   } = (0, _ThemeProvider.useTheme)();
   return /*#__PURE__*/_react.default.createElement(StyledItem, _extends({
-    ref: ref,
-    as: Component,
     tabIndex: disabled ? undefined : -1,
     variant: variant,
     showDivider: showDivider,
@@ -282,6 +280,6 @@ const Item = /*#__PURE__*/_react.default.forwardRef((itemProps, ref) => {
     variant: variant,
     disabled: disabled
   }, trailingText, TrailingIcon && /*#__PURE__*/_react.default.createElement(TrailingIcon, null)) : null));
-});
+}
 
-exports.Item = Item;
+Item.displayName = "Item";

package/lib/ActionList/List.d.ts

@@ -1,10 +1,9 @@
 import React from 'react';
 import type { AriaRole } from '../utils/types';
 import { Group, GroupProps } from './Group';
-import { ItemProps } from './Item';
-declare type RenderItemFn = (props: ItemProps) => React.ReactElement;
+import { Item, ItemProps } from './Item';
 export declare type ItemInput = ItemProps | (Partial<ItemProps> & {
-    renderItem: RenderItemFn;
+    renderItem: typeof Item;
 });
 /**
  * Contract for props passed to the `List` component.
@@ -27,7 +26,7 @@ export interface ListPropsBase {
      * without a `Group`-level or `Item`-level custom `Item` renderer will be
      * rendered using this function component.
      */
-    renderItem?: RenderItemFn;
+    renderItem?: typeof Item;
     /**
      * A `List`-level custom `Group` renderer. Every `Group` within this `List`
      * without a `Group`-level custom `Item` renderer will be rendered using
@@ -59,7 +58,7 @@ export interface GroupedListProps extends ListPropsBase {
      * and `Group`-level custom `Item` or `Group` renderers.
      */
     groupMetadata: ((Omit<GroupProps, 'items'> | Omit<Partial<GroupProps> & {
-        renderItem?: RenderItemFn;
+        renderItem?: typeof Item;
         renderGroup?: typeof Group;
     }, 'items'>) & {
         groupId: string;
@@ -69,7 +68,7 @@ export interface GroupedListProps extends ListPropsBase {
      * and `Item`-level custom `Item` renderers.
      */
     items: ((ItemProps | (Partial<ItemProps> & {
-        renderItem: RenderItemFn;
+        renderItem: typeof Item;
     })) & {
         groupId: string;
     })[];
@@ -82,4 +81,3 @@ export declare type ListProps = ListPropsBase | GroupedListProps;
  * Lists `Item`s, either grouped or ungrouped, with a `Divider` between each `Group`.
  */
 export declare const List: React.ForwardRefExoticComponent<ListProps & React.RefAttributes<HTMLDivElement>>;
-export {};

package/lib/ActionList/List.js

@@ -106,11 +106,11 @@ const List = /*#__PURE__*/_react.default.forwardRef((props, forwardedRef) => {
 
 
   const renderItem = (itemProps, item, itemIndex) => {
-    var _itemProps$id$toStrin, _itemProps$id;
+    var _ref2, _itemProps$key, _itemProps$id;
 
     // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
     const ItemComponent = 'renderItem' in itemProps && itemProps.renderItem || props.renderItem || _Item.Item;
-    const key = (_itemProps$id$toStrin = (_itemProps$id = itemProps.id) === null || _itemProps$id === void 0 ? void 0 : _itemProps$id.toString()) !== null && _itemProps$id$toStrin !== void 0 ? _itemProps$id$toStrin : itemIndex.toString();
+    const key = (_ref2 = (_itemProps$key = itemProps.key) !== null && _itemProps$key !== void 0 ? _itemProps$key : (_itemProps$id = itemProps.id) === null || _itemProps$id === void 0 ? void 0 : _itemProps$id.toString()) !== null && _ref2 !== void 0 ? _ref2 : itemIndex.toString();
     return /*#__PURE__*/_react.default.createElement(ItemComponent, _extends({
       showDivider: props.showItemDividers,
       selectionVariant: props.selectionVariant

package/lib/ActionList/index.d.ts

@@ -1,5 +1,6 @@
 /// <reference types="react" />
 import { Group } from './Group';
+import { Item } from './Item';
 import { Divider } from './Divider';
 export type { ListProps as ActionListProps } from './List';
 export type { GroupProps } from './Group';
@@ -11,7 +12,7 @@ export declare const ActionList: import("react").ForwardRefExoticComponent<impor
     /** Collects related `Items` in an `ActionList`. */
     Group: typeof Group;
     /** An actionable or selectable `Item` with an optional icon and description. */
-    Item: import("@radix-ui/react-polymorphic").ForwardRefComponent<"div", import("./Item").ItemProps>;
+    Item: typeof Item;
     /** Visually separates `Item`s or `Group`s in an `ActionList`. */
     Divider: typeof Divider;
 };

package/lib-esm/ActionList/Item.d.ts

@@ -2,12 +2,10 @@ import { IconProps } from '@primer/octicons-react';
 import React from 'react';
 import { SxProp } from '../sx';
 import { ItemInput } from './List';
-import { ForwardRefComponent as PolymorphicForwardRefComponent } from '@radix-ui/react-polymorphic';
-import { AriaRole } from '../utils/types';
 /**
  * Contract for props passed to the `Item` component.
  */
-export interface ItemProps extends SxProp {
+export interface ItemProps extends Omit<React.ComponentPropsWithoutRef<'div'>, 'id'>, SxProp {
     /**
      * Primary text which names an `Item`.
      */
@@ -70,18 +68,6 @@ export interface ItemProps extends SxProp {
      * An id associated with this item.  Should be unique between items
      */
     id?: number | string;
-    /**
-     * Node to be included inside the item before the text.
-     */
-    children?: React.ReactNode;
-    /**
-     * The ARIA role describing the function of `List` component. `option` is a common value.
-     */
-    role?: AriaRole;
-    /**
-     * An item to pass back in the `onAction` callback, meant as
-     */
-    item?: ItemInput;
 }
 export declare const TextContainer: import("styled-components").StyledComponent<"span", any, {
     dangerouslySetInnerHtml?: React.DOMAttributes<HTMLDivElement>['dangerouslySetInnerHTML'];
@@ -89,5 +75,6 @@ export declare const TextContainer: import("styled-components").StyledComponent<
 /**
  * An actionable or selectable `Item` with an optional icon and description.
  */
-declare const Item: PolymorphicForwardRefComponent<"div", ItemProps>;
-export { Item };
+export declare function Item(itemProps: Partial<ItemProps> & {
+    item?: ItemInput;
+}): JSX.Element;

package/lib-esm/ActionList/Item.js

@@ -11,10 +11,10 @@ import { StyledDivider } from './Divider';
 import { useColorSchemeVar, useTheme } from '../ThemeProvider';
 import { activeDescendantActivatedDirectly, activeDescendantActivatedIndirectly, isActiveDescendantAttribute } from '../behaviors/focusZone';
 import { useSSRSafeId } from '@react-aria/ssr';
-
 /**
  * These colors are not yet in our default theme.  Need to remove this once they are added.
  */
+
 const customItemThemes = {
   default: {
     hover: {
@@ -85,7 +85,7 @@ const MainContent = styled.div.withConfig({
 const StyledItem = styled.div.withConfig({
   displayName: "Item__StyledItem",
   componentId: "jqpvy8-2"
-})(["padding:6px ", ";display:flex;border-radius:", ";color:", ";transition:background 33.333ms linear;text-decoration:none;@media (hover:hover) and (pointer:fine){:hover{background:var(--item-hover-bg-override,", ");cursor:", ";}}:not(:first-of-type):not(", " + &):not(", " + &){margin-top:", ";", "::before{content:' ';display:block;position:absolute;width:100%;top:-7px;border:0 solid ", ";border-top-width:", ";}}&:hover ", "::before,:hover + * ", "::before{border-color:var(--item-hover-divider-border-color-override,transparent) !important;}&:focus ", "::before,:focus + * ", "::before,&[", "] ", "::before,[", "] + & ", "::before{border-color:transparent !important;}&[", "='", "']{background:", ";}&[", "='", "']{background:", ";}&:focus{background:", ";outline:none;}&:active{background:", ";}", ""], get('space.2'), get('radii.2'), ({
+})(["padding:6px ", ";display:flex;border-radius:", ";color:", ";transition:background 33.333ms linear;@media (hover:hover) and (pointer:fine){:hover{background:var(--item-hover-bg-override,", ");cursor:", ";}}:not(:first-of-type):not(", " + &):not(", " + &){margin-top:", ";", "::before{content:' ';display:block;position:absolute;width:100%;top:-7px;border:0 solid ", ";border-top-width:", ";}}&:hover ", "::before,:hover + * ", "::before{border-color:var(--item-hover-divider-border-color-override,transparent) !important;}&:focus ", "::before,:focus + * ", "::before,&[", "] ", "::before,[", "] + & ", "::before{border-color:transparent !important;}&[", "='", "']{background:", ";}&[", "='", "']{background:", ";}&:focus{background:", ";outline:none;}&:active{background:", ";}", ""], get('space.2'), get('radii.2'), ({
   variant,
   item
 }) => getItemVariant(variant, item === null || item === void 0 ? void 0 : item.disabled).color, ({
@@ -144,9 +144,8 @@ const MultiSelectInput = styled.input.withConfig({
  * An actionable or selectable `Item` with an optional icon and description.
  */
 
-const Item = /*#__PURE__*/React.forwardRef((itemProps, ref) => {
+export function Item(itemProps) {
   const {
-    as: Component,
     text,
     description,
     descriptionVariant = 'inline',
@@ -202,8 +201,6 @@ const Item = /*#__PURE__*/React.forwardRef((itemProps, ref) => {
     theme
   } = useTheme();
   return /*#__PURE__*/React.createElement(StyledItem, _extends({
-    ref: ref,
-    as: Component,
     tabIndex: disabled ? undefined : -1,
     variant: variant,
     showDivider: showDivider,
@@ -249,5 +246,5 @@ const Item = /*#__PURE__*/React.forwardRef((itemProps, ref) => {
     variant: variant,
     disabled: disabled
   }, trailingText, TrailingIcon && /*#__PURE__*/React.createElement(TrailingIcon, null)) : null));
-});
-export { Item };
+}
+Item.displayName = "Item";

package/lib-esm/ActionList/List.d.ts

@@ -1,10 +1,9 @@
 import React from 'react';
 import type { AriaRole } from '../utils/types';
 import { Group, GroupProps } from './Group';
-import { ItemProps } from './Item';
-declare type RenderItemFn = (props: ItemProps) => React.ReactElement;
+import { Item, ItemProps } from './Item';
 export declare type ItemInput = ItemProps | (Partial<ItemProps> & {
-    renderItem: RenderItemFn;
+    renderItem: typeof Item;
 });
 /**
  * Contract for props passed to the `List` component.
@@ -27,7 +26,7 @@ export interface ListPropsBase {
      * without a `Group`-level or `Item`-level custom `Item` renderer will be
      * rendered using this function component.
      */
-    renderItem?: RenderItemFn;
+    renderItem?: typeof Item;
     /**
      * A `List`-level custom `Group` renderer. Every `Group` within this `List`
      * without a `Group`-level custom `Item` renderer will be rendered using
@@ -59,7 +58,7 @@ export interface GroupedListProps extends ListPropsBase {
      * and `Group`-level custom `Item` or `Group` renderers.
      */
     groupMetadata: ((Omit<GroupProps, 'items'> | Omit<Partial<GroupProps> & {
-        renderItem?: RenderItemFn;
+        renderItem?: typeof Item;
         renderGroup?: typeof Group;
     }, 'items'>) & {
         groupId: string;
@@ -69,7 +68,7 @@ export interface GroupedListProps extends ListPropsBase {
      * and `Item`-level custom `Item` renderers.
      */
     items: ((ItemProps | (Partial<ItemProps> & {
-        renderItem: RenderItemFn;
+        renderItem: typeof Item;
     })) & {
         groupId: string;
     })[];
@@ -82,4 +81,3 @@ export declare type ListProps = ListPropsBase | GroupedListProps;
  * Lists `Item`s, either grouped or ungrouped, with a `Divider` between each `Group`.
  */
 export declare const List: React.ForwardRefExoticComponent<ListProps & React.RefAttributes<HTMLDivElement>>;
-export {};

package/lib-esm/ActionList/List.js

@@ -90,11 +90,11 @@ export const List = /*#__PURE__*/React.forwardRef((props, forwardedRef) => {
 
 
   const renderItem = (itemProps, item, itemIndex) => {
-    var _itemProps$id$toStrin, _itemProps$id;
+    var _ref2, _itemProps$key, _itemProps$id;
 
     // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
     const ItemComponent = 'renderItem' in itemProps && itemProps.renderItem || props.renderItem || Item;
-    const key = (_itemProps$id$toStrin = (_itemProps$id = itemProps.id) === null || _itemProps$id === void 0 ? void 0 : _itemProps$id.toString()) !== null && _itemProps$id$toStrin !== void 0 ? _itemProps$id$toStrin : itemIndex.toString();
+    const key = (_ref2 = (_itemProps$key = itemProps.key) !== null && _itemProps$key !== void 0 ? _itemProps$key : (_itemProps$id = itemProps.id) === null || _itemProps$id === void 0 ? void 0 : _itemProps$id.toString()) !== null && _ref2 !== void 0 ? _ref2 : itemIndex.toString();
     return /*#__PURE__*/React.createElement(ItemComponent, _extends({
       showDivider: props.showItemDividers,
       selectionVariant: props.selectionVariant

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

@@ -1,5 +1,6 @@
 /// <reference types="react" />
 import { Group } from './Group';
+import { Item } from './Item';
 import { Divider } from './Divider';
 export type { ListProps as ActionListProps } from './List';
 export type { GroupProps } from './Group';
@@ -11,7 +12,7 @@ export declare const ActionList: import("react").ForwardRefExoticComponent<impor
     /** Collects related `Items` in an `ActionList`. */
     Group: typeof Group;
     /** An actionable or selectable `Item` with an optional icon and description. */
-    Item: import("@radix-ui/react-polymorphic").ForwardRefComponent<"div", import("./Item").ItemProps>;
+    Item: typeof Item;
     /** Visually separates `Item`s or `Group`s in an `ActionList`. */
     Divider: typeof Divider;
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@primer/components",
-  "version": "0.0.0-202182422492",
+  "version": "0.0.0-20218276039",
   "description": "Primer react components",
   "main": "lib/index.js",
   "module": "lib-esm/index.js",
@@ -45,7 +45,6 @@
   "dependencies": {
     "@primer/octicons-react": "^13.0.0",
     "@primer/primitives": "4.7.1",
-    "@radix-ui/react-polymorphic": "0.0.14",
     "@react-aria/ssr": "3.1.0",
     "@styled-system/css": "5.1.5",
     "@styled-system/props": "5.1.5",
@@ -90,7 +89,7 @@
     "@types/jest-axe": "3.5.1",
     "@types/lodash.isempty": "4.4.6",
     "@types/lodash.isobject": "3.0.6",
-    "@typescript-eslint/eslint-plugin": "4.26.1",
+    "@typescript-eslint/eslint-plugin": "4.31.2",
     "@typescript-eslint/parser": "4.26.1",
     "@wojtekmaj/enzyme-adapter-react-17": "0.6.3",
     "babel-core": "7.0.0-bridge.0",