@primer/components 32.0.2-rc.859381a1 → 32.1.1-rc.b4502a34

package/docs/content/TextInputTokens.mdx

@@ -1,89 +0,0 @@
----
-title: TextInputWithTokens
-status: Alpha
-source: https://github.com/primer/react/tree/main/src/TextInputWithTokens.tsx
----
-
-import {Props} from '../src/props'
-import {TextInputWithTokens} from '@primer/components'
-
-A `TextInputWithTokens` component is used to show multiple values in one field.
-
-It supports all of the features of a [TextInput](/TextInput) component, but it can render a list of [Tokens](/Token) next to the area a user types in.
-
-## Basic Example
-
-```javascript live noinline
-const BasicExample = () => {
-  const [tokens, setTokens] = React.useState([
-    {text: 'zero', id: 0},
-    {text: 'one', id: 1},
-    {text: 'two', id: 2}
-  ])
-  const onTokenRemove = tokenId => {
-    setTokens(tokens.filter(token => token.id !== tokenId))
-  }
-
-  return (
-    <>
-      <Box as="label" display="block" htmlFor="inputWithTokens-basic">
-        Basic example tokens
-      </Box>
-      <TextInputWithTokens tokens={tokens} onTokenRemove={onTokenRemove} id="inputWithTokens-basic" />
-    </>
-  )
-}
-
-render(BasicExample)
-```
-
-## Component Props
-
-<Props of={TextInputWithTokens} />
-
-## Adding and removing tokens
-
-The array passed to the `tokens` prop needs to be manually updated to add and remove tokens.
-
-The function passed to the `onRemoveToken` prop is called when:
-
-- Clicking the remove button in the token
-- Pressing the `Backspace` key when the input is empty
-- Selecting a token using the arrow keys or by clicking on a token and then pressing the `Backspace` key
-
-There is no function that gets called to "add" a token, so the user needs to be provided with a UI to select tokens.
-
-## Custom token rendering
-
-By default, the `Token` component is used to render the tokens in the input. If this component does not make sense for the kinds of tokens you're rendering, you can pass a component to the `tokenComponent` prop
-
-Example: a `TextInputWithTokens` that renders tokens as `IssueLabelToken`:
-
-```javascript live noinline
-const UsingIssueLabelTokens = () => {
-  const [tokens, setTokens] = React.useState([
-    {text: 'enhancement', id: 1, fillColor: '#a2eeef'},
-    {text: 'bug', id: 2, fillColor: '#d73a4a'},
-    {text: 'good first issue', id: 3, fillColor: '#0cf478'}
-  ])
-  const onTokenRemove = tokenId => {
-    setTokens(tokens.filter(token => token.id !== tokenId))
-  }
-
-  return (
-    <>
-      <Box as="label" display="block" htmlFor="inputWithTokens-issueLabels">
-        Issue labels
-      </Box>
-      <TextInputWithTokens
-        tokenComponent={IssueLabelToken}
-        tokens={tokens}
-        onTokenRemove={onTokenRemove}
-        id="inputWithTokens-issueLabels"
-      />
-    </>
-  )
-}
-
-render(<UsingIssueLabelTokens />)
-```

package/lib/ActionList2/Header.d.ts

@@ -1,26 +0,0 @@
-/// <reference types="react" />
-import { SxProp } from '../sx';
-/**
- * Contract for props passed to the `Header` component.
- */
-export declare type HeaderProps = {
-    /**
-     * 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;
-} & SxProp;
-/**
- * Displays the name and description of a `Group`.
- */
-export declare const Header: ({ variant, title, auxiliaryText, sx, ...props }: HeaderProps) => JSX.Element;

package/lib/ActionList2/Header.js

@@ -1,55 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.Header = void 0;
-
-var _react = _interopRequireDefault(require("react"));
-
-var _Box = _interopRequireDefault(require("../Box"));
-
-var _List = require("./List");
-
-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); }
-
-/**
- * Displays the name and description of a `Group`.
- */
-const Header = ({
-  variant = 'subtle',
-  title,
-  auxiliaryText,
-  sx = {},
-  ...props
-}) => {
-  const {
-    variant: listVariant
-  } = _react.default.useContext(_List.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.default.createElement(_Box.default, _extends({
-    sx: styles,
-    role: "heading"
-  }, props), title, auxiliaryText && /*#__PURE__*/_react.default.createElement("span", null, auxiliaryText));
-};
-
-exports.Header = Header;
-Header.displayName = "Header";

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

@@ -1,26 +0,0 @@
-/// <reference types="react" />
-import { SxProp } from '../sx';
-/**
- * Contract for props passed to the `Header` component.
- */
-export declare type HeaderProps = {
-    /**
-     * 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;
-} & SxProp;
-/**
- * Displays the name and description of a `Group`.
- */
-export declare const Header: ({ variant, title, auxiliaryText, sx, ...props }: HeaderProps) => JSX.Element;

package/lib-esm/ActionList2/Header.js

@@ -1,44 +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 const Header = ({
-  variant = 'subtle',
-  title,
-  auxiliaryText,
-  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/src/ActionList2/Header.tsx

@@ -1,58 +0,0 @@
-import React from 'react'
-import Box from '../Box'
-import {SxProp} from '../sx'
-import {ListContext} from './List'
-
-/**
- * Contract for props passed to the `Header` component.
- */
-export type HeaderProps = {
-  /**
-   * 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
-} & SxProp
-
-/**
- * Displays the name and description of a `Group`.
- */
-export const Header = ({variant = 'subtle', title, auxiliaryText, sx = {}, ...props}: HeaderProps): JSX.Element => {
-  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 (
-    <Box sx={styles} role="heading" {...props}>
-      {title}
-      {auxiliaryText && <span>{auxiliaryText}</span>}
-    </Box>
-  )
-}