@primer/components 0.0.0-202191916821 → 0.0.0-2021920152952

package/lib/_TextInputWrapper.js

@@ -1,51 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-
-var _styledComponents = _interopRequireWildcard(require("styled-components"));
-
-var _styledSystem = require("styled-system");
-
-var _constants = require("./constants");
-
-var _sx = _interopRequireDefault(require("./sx"));
-
-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; }
-
-const sizeVariants = (0, _styledSystem.variant)({
-  variants: {
-    small: {
-      minHeight: '28px',
-      px: 2,
-      py: '3px',
-      fontSize: 0,
-      lineHeight: '20px'
-    },
-    large: {
-      px: 2,
-      py: '10px',
-      fontSize: 3
-    }
-  }
-});
-
-const TextInputWrapper = _styledComponents.default.span.withConfig({
-  displayName: "_TextInputWrapper__TextInputWrapper",
-  componentId: "sc-5vfcis-0"
-})(["display:inline-flex;align-items:stretch;min-height:34px;font-size:", ";line-height:20px;color:", ";vertical-align:middle;background-repeat:no-repeat;background-position:right 8px center;border:1px solid ", ";border-radius:", ";outline:none;box-shadow:", ";", " .TextInput-icon{align-self:center;color:", ";margin:0 ", ";flex-shrink:0;}&:focus-within{border-color:", ";box-shadow:", ";}", " ", " ", " @media (min-width:", "){font-size:", ";}", " ", " ", " ", " ", ";"], (0, _constants.get)('fontSizes.1'), (0, _constants.get)('colors.fg.default'), (0, _constants.get)('colors.border.default'), (0, _constants.get)('radii.2'), (0, _constants.get)('shadows.primer.shadow.inset'), props => {
-  if (props.hasIcon) {
-    return (0, _styledComponents.css)(["padding:0;"]);
-  } else {
-    return (0, _styledComponents.css)(["padding:6px 12px;"]);
-  }
-}, (0, _constants.get)('colors.fg.muted'), (0, _constants.get)('space.2'), (0, _constants.get)('colors.accent.emphasis'), (0, _constants.get)('shadows.primer.shadow.focus'), props => props.contrast && (0, _styledComponents.css)(["background-color:", ";"], (0, _constants.get)('colors.canvas.inset')), props => props.disabled && (0, _styledComponents.css)(["color:", ";background-color:", ";border-color:", ";"], (0, _constants.get)('colors.fg.muted'), (0, _constants.get)('colors.input.disabledBg'), (0, _constants.get)('colors.border.default')), props => props.block && (0, _styledComponents.css)(["display:block;width:100%;"]), (0, _constants.get)('breakpoints.1'), (0, _constants.get)('fontSizes.1'), _styledSystem.width, _styledSystem.minWidth, _styledSystem.maxWidth, sizeVariants, _sx.default);
-
-var _default = TextInputWrapper;
-exports.default = _default;

package/lib/_UnstyledTextInput.d.ts

@@ -1,2 +0,0 @@
-declare const UnstyledTextInput: import("styled-components").StyledComponent<"input", any, import("./sx").SxProp, never>;
-export default UnstyledTextInput;

package/lib/_UnstyledTextInput.js

@@ -1,20 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-
-var _styledComponents = _interopRequireDefault(require("styled-components"));
-
-var _sx = _interopRequireDefault(require("./sx"));
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-const UnstyledTextInput = _styledComponents.default.input.withConfig({
-  displayName: "_UnstyledTextInput__UnstyledTextInput",
-  componentId: "sc-1jgl33s-0"
-})(["border:0;font-size:inherit;font-family:inherit;background-color:transparent;-webkit-appearance:none;color:inherit;width:100%;&:focus{outline:0;}", ";"], _sx.default);
-
-var _default = UnstyledTextInput;
-exports.default = _default;

package/lib/behaviors/scrollIntoViewingArea.d.ts

@@ -1 +0,0 @@
-export declare const scrollIntoViewingArea: (child: HTMLElement, viewingArea: HTMLElement, direction?: 'horizontal' | 'vertical', startMargin?: number, endMargin?: number, behavior?: ScrollBehavior) => void;

package/lib/behaviors/scrollIntoViewingArea.js

@@ -1,39 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.scrollIntoViewingArea = void 0;
-
-const scrollIntoViewingArea = (child, viewingArea, direction = 'vertical', startMargin = 8, endMargin = 0, behavior = 'smooth') => {
-  const startSide = direction === 'vertical' ? 'top' : 'left';
-  const endSide = direction === 'vertical' ? 'bottom' : 'right';
-  const scrollSide = direction === 'vertical' ? 'scrollTop' : 'scrollLeft';
-  const {
-    [startSide]: childStart,
-    [endSide]: childEnd
-  } = child.getBoundingClientRect();
-  const {
-    [startSide]: viewingAreaStart,
-    [endSide]: viewingAreaEnd
-  } = viewingArea.getBoundingClientRect();
-  const isChildStartAboveViewingArea = childStart < viewingAreaStart + endMargin;
-  const isChildBottomBelowViewingArea = childEnd > viewingAreaEnd - startMargin;
-
-  if (isChildStartAboveViewingArea) {
-    const scrollHeightToChildStart = childStart - viewingAreaStart + viewingArea[scrollSide];
-    viewingArea.scrollTo({
-      behavior,
-      [startSide]: scrollHeightToChildStart - endMargin
-    });
-  } else if (isChildBottomBelowViewingArea) {
-    const scrollHeightToChildBottom = childEnd - viewingAreaEnd + viewingArea[scrollSide];
-    viewingArea.scrollTo({
-      behavior,
-      [startSide]: scrollHeightToChildBottom + startMargin
-    });
-  } // either completely in view or outside viewing area on both ends, don't scroll
-
-};
-
-exports.scrollIntoViewingArea = scrollIntoViewingArea;

package/lib/utils/create-slots.d.ts

@@ -1,15 +0,0 @@
-import React from 'react';
-/** createSlots is a factory that can create a
- *  typesafe Slots + Slot pair to use in a component definition
- *  For example: ActionList.Item uses createSlots to get a Slots wrapper
- *  + Slot component that is used by LeadingVisual, Description
- */
-declare const createSlots: <SlotNames extends string>(slotNames: SlotNames[]) => {
-    Slots: React.FC<{
-        children: (slots: { [key in SlotNames]?: React.ReactNode; }) => React.ReactNode;
-    }>;
-    Slot: React.FC<{
-        name: SlotNames;
-    }>;
-};
-export default createSlots;

package/lib/utils/create-slots.js

@@ -1,101 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-
-var _react = _interopRequireDefault(require("react"));
-
-var _useForceUpdate = require("./use-force-update");
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-/** createSlots is a factory that can create a
- *  typesafe Slots + Slot pair to use in a component definition
- *  For example: ActionList.Item uses createSlots to get a Slots wrapper
- *  + Slot component that is used by LeadingVisual, Description
- */
-const createSlots = slotNames => {
-  const SlotsContext = /*#__PURE__*/_react.default.createContext({
-    registerSlot: () => null,
-    unregisterSlot: () => null
-  });
-
-  /** Slots uses a Double render strategy inspired by [reach-ui/descendants](https://github.com/reach/reach-ui/tree/develop/packages/descendants)
-   *  Slot registers themself with the Slots parent.
-   *  When all the children have mounted = registered themselves in slot,
-   *  we re-render the parent component to render with slots
-   */
-  const Slots = ({
-    children
-  }) => {
-    // initialise slots
-    const slotsDefinition = {};
-    slotNames.map(name => slotsDefinition[name] = null);
-
-    const slotsRef = _react.default.useRef(slotsDefinition);
-
-    const rerenderWithSlots = (0, _useForceUpdate.useForceUpdate)();
-
-    const [isMounted, setIsMounted] = _react.default.useState(false); // fires after all the effects in children
-
-
-    _react.default.useEffect(() => {
-      rerenderWithSlots();
-      setIsMounted(true);
-    }, [rerenderWithSlots]);
-
-    const slots = slotsRef.current;
-
-    const registerSlot = _react.default.useCallback((name, contents) => {
-      slotsRef.current[name] = contents; // don't render until the component mounts = all slots are registered
-
-      if (isMounted) rerenderWithSlots();
-    }, [isMounted, rerenderWithSlots]); // Slot can be removed from the tree as well,
-    // we need to unregister them from the slot
-
-
-    const unregisterSlot = _react.default.useCallback(name => {
-      slotsRef.current[name] = null;
-      rerenderWithSlots();
-    }, [rerenderWithSlots]);
-    /**
-     * Slots uses a render prop API so abstract the
-     * implementation detail of using a context provider.
-     */
-
-
-    return /*#__PURE__*/_react.default.createElement(SlotsContext.Provider, {
-      value: {
-        registerSlot,
-        unregisterSlot
-      }
-    }, children(slots));
-  };
-
-  const Slot = ({
-    name,
-    children
-  }) => {
-    const {
-      registerSlot,
-      unregisterSlot
-    } = _react.default.useContext(SlotsContext);
-
-    _react.default.useEffect(() => {
-      registerSlot(name, children);
-      return () => unregisterSlot(name);
-    }, [name, children, registerSlot, unregisterSlot]);
-
-    return null;
-  };
-
-  return {
-    Slots,
-    Slot
-  };
-};
-
-var _default = createSlots;
-exports.default = _default;

package/lib/utils/types/ComponentProps.d.ts

@@ -1,9 +0,0 @@
-/// <reference types="react" />
-/**
- * Extract a component's props
- *
- * Source: https://react-typescript-cheatsheet.netlify.app/docs/advanced/patterns_by_usecase#wrappingmirroring-a-component
- *
- * @example ComponentProps<typeof MyComponent>
- */
-export declare type ComponentProps<T> = T extends React.ComponentType<infer Props> ? Props extends object ? Props : never : never;

package/lib/utils/types/ComponentProps.js

@@ -1 +0,0 @@
-"use strict";

package/lib/utils/types/Flatten.d.ts

@@ -1,4 +0,0 @@
-/**
- * Contruct a type describing the items in `T`, if `T` is an array.
- */
-export declare type Flatten<T extends unknown> = T extends (infer U)[] ? U : never;

package/lib/utils/types/Flatten.js

@@ -1 +0,0 @@
-"use strict";

package/lib/utils/types/MandateProps.d.ts

@@ -1,3 +0,0 @@
-export declare type MandateProps<T extends unknown, K extends keyof T> = Omit<T, K> & {
-    [MK in K]-?: NonNullable<T[MK]>;
-};

package/lib/utils/types/MandateProps.js

@@ -1 +0,0 @@
-"use strict";

package/lib/utils/types/Merge.d.ts

@@ -1,19 +0,0 @@
-/**
- * Given two object types A and B, return a type with all the properties of A that aren't also
- * properties of B, and all the properties of B.
- *
- * Useful when we have a component that spreads a "rest" of its props on a subcomponent:
- *
- * ```ts
- * interface OwnProps {
- *  foo: string
- * }
- *
- * type MyComponentProps = Merge<SubcomponentProps, OwnProps>
- * const MyComponent = ({foo, ...rest}: MyComponentProps) => {
- *   // ...
- *   return <SubComponent {...rest} />
- * }
- * ```
- */
-export declare type Merge<A = {}, B = {}> = Omit<A, keyof B> & B;

package/lib/utils/types/Merge.js

@@ -1 +0,0 @@
-"use strict";

package/lib/utils/types/index.d.ts

@@ -1,5 +0,0 @@
-export * from './AriaRole';
-export * from './ComponentProps';
-export * from './Flatten';
-export * from './Merge';
-export * from './MandateProps';

package/lib/utils/types/index.js

@@ -1,70 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-
-var _AriaRole = require("./AriaRole");
-
-Object.keys(_AriaRole).forEach(function (key) {
-  if (key === "default" || key === "__esModule") return;
-  if (key in exports && exports[key] === _AriaRole[key]) return;
-  Object.defineProperty(exports, key, {
-    enumerable: true,
-    get: function () {
-      return _AriaRole[key];
-    }
-  });
-});
-
-var _ComponentProps = require("./ComponentProps");
-
-Object.keys(_ComponentProps).forEach(function (key) {
-  if (key === "default" || key === "__esModule") return;
-  if (key in exports && exports[key] === _ComponentProps[key]) return;
-  Object.defineProperty(exports, key, {
-    enumerable: true,
-    get: function () {
-      return _ComponentProps[key];
-    }
-  });
-});
-
-var _Flatten = require("./Flatten");
-
-Object.keys(_Flatten).forEach(function (key) {
-  if (key === "default" || key === "__esModule") return;
-  if (key in exports && exports[key] === _Flatten[key]) return;
-  Object.defineProperty(exports, key, {
-    enumerable: true,
-    get: function () {
-      return _Flatten[key];
-    }
-  });
-});
-
-var _Merge = require("./Merge");
-
-Object.keys(_Merge).forEach(function (key) {
-  if (key === "default" || key === "__esModule") return;
-  if (key in exports && exports[key] === _Merge[key]) return;
-  Object.defineProperty(exports, key, {
-    enumerable: true,
-    get: function () {
-      return _Merge[key];
-    }
-  });
-});
-
-var _MandateProps = require("./MandateProps");
-
-Object.keys(_MandateProps).forEach(function (key) {
-  if (key === "default" || key === "__esModule") return;
-  if (key in exports && exports[key] === _MandateProps[key]) return;
-  Object.defineProperty(exports, key, {
-    enumerable: true,
-    get: function () {
-      return _MandateProps[key];
-    }
-  });
-});

package/lib/utils/use-force-update.d.ts

@@ -1 +0,0 @@
-export declare const useForceUpdate: () => () => void;

package/lib/utils/use-force-update.js

@@ -1,19 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.useForceUpdate = void 0;
-
-var _react = _interopRequireDefault(require("react"));
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-// Inspired from reach-ui: https://github.com/reach/reach-ui/blob/develop/packages/utils/src/use-force-update.ts
-const useForceUpdate = () => {
-  const [, rerender] = _react.default.useState({});
-
-  return _react.default.useCallback(() => rerender({}), []);
-};
-
-exports.useForceUpdate = useForceUpdate;

package/lib-esm/ActionList2/Description.d.ts

@@ -1,5 +0,0 @@
-import React from 'react';
-export declare type DescriptionProps = {
-    variant?: 'inline' | 'block';
-};
-export declare const Description: React.FC<DescriptionProps>;

package/lib-esm/ActionList2/Description.js

@@ -1,30 +0,0 @@
-import React from 'react';
-import Box from '../Box';
-import Truncate from '../Truncate';
-import { Slot } from './Item';
-export const Description = ({
-  variant = 'inline',
-  ...props
-}) => {
-  const styles = {
-    color: 'fg.muted',
-    fontSize: 0,
-    lineHeight: '16px',
-    flexGrow: 1,
-    flexBasis: 0,
-    minWidth: 0,
-    marginLeft: variant === 'block' ? 0 : 2
-  };
-  return /*#__PURE__*/React.createElement(Slot, {
-    name: variant === 'block' ? 'BlockDescription' : 'InlineDescription'
-  }, variant === 'block' ? /*#__PURE__*/React.createElement(Box, {
-    as: "span",
-    sx: styles
-  }, props.children) : /*#__PURE__*/React.createElement(Truncate, {
-    sx: styles,
-    title: props.children,
-    inline: true,
-    maxWidth: "100%"
-  }, props.children));
-};
-Description.displayName = "Description";

package/lib-esm/ActionList2/Divider.d.ts

@@ -1,8 +0,0 @@
-/// <reference types="react" />
-/**
- * Visually separates `Item`s or `Group`s in an `ActionList`.
- */
-export declare function Divider(): JSX.Element;
-export declare namespace Divider {
-    var renderItem: typeof Divider;
-}

package/lib-esm/ActionList2/Divider.js

@@ -1,30 +0,0 @@
-import React from 'react';
-import Box from '../Box';
-import { get } from '../constants';
-
-/**
- * Visually separates `Item`s or `Group`s in an `ActionList`.
- */
-export function Divider() {
-  return /*#__PURE__*/React.createElement(Box, {
-    as: "hr",
-    sx: {
-      border: 'none',
-      // override browser styles
-      height: 1,
-      backgroundColor: 'border.muted',
-      marginTop: theme => `calc(${get('space.2')(theme)} - 1px)`,
-      marginBottom: 2
-    },
-    "data-component": "ActionList.Divider"
-  });
-}
-Divider.displayName = "Divider";
-
-/**
- * `Divider` fulfills the `ItemPropsWithCustomRenderer` contract,
- * so it can be used inline in an `ActionList`’s `items` prop.
- * In other words, `items={[ActionList.Divider]}` is supported as a concise
- * alternative to `items={[{renderItem: () => <ActionList.Divider />}]}`.
- */
-Divider.renderItem = Divider;

package/lib-esm/ActionList2/Group.d.ts

@@ -1,8 +0,0 @@
-/**
- * show item dividers
- */
-/// <reference types="react" />
-import { SxProp } from '../sx';
-import { HeaderProps } from './Header';
-export declare type GroupProps = HeaderProps & SxProp;
-export declare function Group({ title, variant, auxiliaryText, sx, ...props }: GroupProps): JSX.Element;

package/lib-esm/ActionList2/Group.js

@@ -1,29 +0,0 @@
-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); }
-
-/**
- * show item dividers
- */
-import React from 'react';
-import Box from '../Box';
-import { Header } from './Header';
-export function Group({
-  title,
-  variant,
-  auxiliaryText,
-  sx = {},
-  ...props
-}) {
-  return /*#__PURE__*/React.createElement(Box, _extends({
-    sx: {
-      '&:not(:first-child)': {
-        marginTop: 2
-      },
-      ...sx
-    }
-  }, props), title && /*#__PURE__*/React.createElement(Header, {
-    title: title,
-    variant: variant,
-    auxiliaryText: auxiliaryText
-  }), props.children);
-}
-Group.displayName = "Group";

package/lib-esm/ActionList2/Header.d.ts

@@ -1,26 +0,0 @@
-import React from 'react';
-import { SxProp } from '../sx';
-/**
- * Contract for props passed to the `Header` component.
- */
-export interface HeaderProps extends React.ComponentPropsWithoutRef<'div'>, SxProp {
-    /**
-     * Style variations. Usage is discretionary.
-     *
-     * - `"filled"` - Superimposed on a background, offset from nearby content
-     * - `"subtle"` - Relatively less offset from nearby content
-     */
-    variant?: 'subtle' | 'filled';
-    /**
-     * Primary text which names a `Group`.
-     */
-    title?: string;
-    /**
-     * Secondary text which provides additional information about a `Group`.
-     */
-    auxiliaryText?: string;
-}
-/**
- * Displays the name and description of a `Group`.
- */
-export declare function Header({ variant, title, auxiliaryText, children: _children, sx, ...props }: HeaderProps): JSX.Element;

package/lib-esm/ActionList2/Header.js

@@ -1,45 +0,0 @@
-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 from 'react';
-import Box from '../Box';
-import { ListContext } from './List';
-/**
- * Contract for props passed to the `Header` component.
- */
-
-/**
- * Displays the name and description of a `Group`.
- */
-export function Header({
-  variant = 'subtle',
-  title,
-  auxiliaryText,
-  children: _children,
-  sx = {},
-  ...props
-}) {
-  const {
-    variant: listVariant
-  } = React.useContext(ListContext);
-  const styles = {
-    paddingY: '6px',
-    paddingX: listVariant === 'full' ? 2 : 3,
-    fontSize: 0,
-    fontWeight: 'bold',
-    color: 'fg.muted',
-    ...(variant === 'filled' && {
-      backgroundColor: 'canvas.subtle',
-      marginX: 0,
-      marginBottom: 2,
-      borderTop: '1px solid',
-      borderBottom: '1px solid',
-      borderColor: 'neutral.muted'
-    }),
-    ...sx
-  };
-  return /*#__PURE__*/React.createElement(Box, _extends({
-    sx: styles,
-    role: "heading"
-  }, props), title, auxiliaryText && /*#__PURE__*/React.createElement("span", null, "auxiliaryText"));
-}
-Header.displayName = "Header";

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

@@ -1,52 +0,0 @@
-/**
- * test suite!
- * id, role
- * text could be non-text
- * activeDescendantAttribute
- * deepmerge sx
- * nicer name for showDivider?
- * aria-label
- * aria-describedby
- * React.FC<Props> doesn't allow id?
- * truncate description
- * icon color
- * disabled checkbox
- * check height with divider
- *
- * use immediate child slot API instead of double render?
- * change as= li | div based on context of menu or not?
- * check if everyone accepts sx prop
- * link example outside of overlay? (details)
- * if one item has selected, should we give all of them selected without the need to pass prop?
- * move custom item themes to primitives?
- * padding: 8 or 6?
- * ActionList.Selection or ActionList.Item selected?
- * different size for icon and avatar, range?
- * minimize number of divs?
- * can use layoutEffect on server?
- */
-import React from 'react';
-import { ForwardRefComponent as PolymorphicForwardRefComponent } from '@radix-ui/react-polymorphic';
-import { SxProp } from '../sx';
-export declare const getVariantStyles: (variant: ItemProps['variant'], disabled: ItemProps['disabled']) => {
-    color: (props: any) => any;
-    iconColor: (props: any) => any;
-    annotationColor: (props: any) => any;
-} | {
-    color: string;
-    iconColor: string;
-    annotationColor: string;
-};
-declare const Slot: React.FC<{
-    name: "LeadingVisual" | "InlineDescription" | "BlockDescription" | "TrailingVisual";
-}>;
-export { Slot };
-export declare type ItemProps = {
-    children: React.ReactNode;
-    onAction?: (event: React.MouseEvent<HTMLLIElement> | React.KeyboardEvent<HTMLLIElement>) => void;
-    selected?: boolean;
-    variant?: 'default' | 'danger';
-    disabled?: boolean;
-    showDivider?: boolean;
-} & SxProp;
-export declare const Item: PolymorphicForwardRefComponent<"li", ItemProps>;