import { ChipProps as MuiChipProps } from '@mui/material/Chip'; import { SeverityKey } from '../../tokens/colors'; import { EntityKind, EntityVerdict } from './entity'; import { PickerSummary } from './picker'; /** What the chip means. Chosen from intent, never from appearance. */ export type ChipPurpose = 'severity' | 'status' | 'category' | 'metric' | 'lifecycle' | 'filter' | 'select' | 'entity' | 'overflow' | 'picker'; /** Chip size scale. `small` is dense; `medium` matches Button `small`. */ export type ChipSize = 'small' | 'medium' | 'large' | 'extraLarge'; /** * How mature a *feature* is. Deliberately not `status`: a workflow state * describes a record and the user may act on it, whereas a stage describes the * product surface itself and changes only when engineering ships something. * BigCommerce and GitHub both keep these apart for the same reason. * * Closed on purpose. A free-text version of this becomes "Coming soon", * "COMING SOON" and "Coming Soon!" in three screens. */ export type LifecycleStage = 'new' | 'beta' | 'alpha' | 'preview' | 'deprecated'; /** * Semantic tone for a workflow or health state. Deliberately separate from the * severity scale: an alert's severity and its workflow state are different * dimensions and must not share a color vocabulary. Matches the `tone` values * on `TableStatusCell` so a status reads the same in and out of a table. */ export type ChipStatusTone = 'active' | 'success' | 'warning' | 'error' | 'info' | 'neutral'; /** Intelligence verdict on an entity. Uses the status palette, not severity. */ export type ChipEntityVerdict = EntityVerdict; /** * Props every purpose accepts. `variant`, `color`, `label`, `onClick`, * `onDelete`, `clickable` and `deleteIcon` are withheld on purpose: appearance * and interaction are derived from `purpose` and must not be overridden, which * is what keeps a static label from being styled to look interactive. * * `onToggle` is dropped for a different reason: `HTMLAttributes` declares it as * the DOM toggle event for `
`, so leaving it in place would intersect * with the select purpose's own `onToggle` and make it uncallable. * * `size` stays available here because seven of the eight purposes honour it; * `entity` withholds it separately, for the reason given on `EntityChipProps`. */ type ChipPurposeBase = Omit; /** Severity or priority. Static. The label is derived from `level`. */ export type SeverityChipProps = ChipPurposeBase & { purpose: 'severity'; level: SeverityKey; /** Overrides the canonical word. Only for a genuinely different vocabulary. */ label?: string; }; /** Workflow or health state. Static. */ export type StatusChipProps = ChipPurposeBase & { purpose: 'status'; tone: ChipStatusTone; label: string; }; /** Category or classification metadata. Static, always neutral. */ export type CategoryChipProps = ChipPurposeBase & { purpose: 'category'; label: string; }; /** A measured value such as a file size or a related-item count. Static. */ export type MetricChipProps = ChipPurposeBase & { purpose: 'metric'; label: string; }; /** * The release stage of a feature: `New`, `Beta`, `Deprecated`. Static, and the * word is derived from `stage` so the same feature cannot read as "Beta" in the * nav and "BETA" on its page. * * This marks the product surface, never a record. If you would let a user * filter a list by it, it is data and belongs in `category` -- "Built-in" on a * workflow row is a property of that workflow, not a release stage. */ export type LifecycleChipProps = ChipPurposeBase & { purpose: 'lifecycle'; stage: LifecycleStage; /** Overrides the canonical word, for a product with its own vocabulary. */ label?: string; }; /** An applied filter the user can remove. `onRemove` is required. */ export type FilterChipProps = ChipPurposeBase & { purpose: 'filter'; label: string; /** Rendered as `field: label` so the criterion survives out of context. */ field?: string; onRemove: () => void; }; /** * A toggleable option. `selected` and `onToggle` are both required. * * Each chip is independent: toggling it does not change its neighbours. That * is the standalone on/off — the same chip is pressed or not. A mutually * exclusive group is parent state, not a chip mode: keep one selected value * and pass `selected={value === option}` so clicking one switches the group * to that option. */ export type SelectChipProps = ChipPurposeBase & { purpose: 'select'; label: string; selected: boolean; onToggle: (next: boolean) => void; }; /** * An entity value inside prose or a dense cell. Opens a detail menu. * * `size` is withheld here and nowhere else. An entity chip derives its type * from the line box it sits in, so a size from the chip scale has nothing to * act on -- accepting the prop would compile and then do nothing, which is the * failure this API exists to prevent. To make one bigger or smaller, change the * surrounding `Typography`. */ export type EntityChipProps = Omit & { purpose: 'entity'; /** What the value is. Spoken in the accessible name and gates defanging. */ kind: EntityKind; /** Canonical, full value. This is what a copy action must yield. */ value: string; /** Shortened text for display. Defaults to `value`. */ display?: string; /** Omit when the value was never resolved: an unresolved chip carries no tint. */ verdict?: EntityVerdict; onOpen?: (event: React.MouseEvent) => void; }; /** Discloses the remainder of a capped group. */ export type OverflowChipProps = ChipPurposeBase & { purpose: 'overflow'; count: number; onDisclose: () => void; expanded?: boolean; }; /** * The trigger for a multi-select value picker: the field it filters, what is * currently selected, and a chevron. This is the one chip that both carries a * value and changes it, and the exception is narrow -- it changes *which values * are selected*, never the record underneath. A chip that fires a verb is still * a Button. * * Its two targets line up with the two things a user wants from an applied * filter, and neither duplicates the other: the body opens the panel, and the X * removes the filter just as it does on `purpose="filter"`. Emptying the * selection without losing the field is `Reset`, inside the panel. * * It renders the trigger only. The panel of options is `FilterMenu`, which owns * this chip and passes `expanded`, exactly as `EntityMenu` pairs with the * entity purpose. Reach for `FilterMenu`; a bare picker chip is for the rare * case where you are supplying your own surface. * * `values` are the labels a user reads, already resolved from option values. A * chip showing `sev_1` instead of `Critical` has failed. */ export type PickerChipProps = ChipPurposeBase & { purpose: 'picker'; /** The filter's name, e.g. `Severity`. Shown even when nothing is selected. */ field: string; values: string[]; /** Whether the panel is open. Drives the chevron and `aria-expanded`. */ expanded: boolean; onOpen: (event: React.MouseEvent) => void; /** * Removes the whole filter, exactly as `onRemove` does on `purpose="filter"`. * The X is the same glyph in the same corner on both, so it has to mean the * same thing: the criterion leaves the bar. Clearing the *selection* while * keeping the field is the panel's `Reset`, not this. * * The caller owns the removal, since a chip cannot take itself out of its * parent's list of active fields. Omit it for a bar of fixed fields that are * always present. */ onRemove?: () => void; /** Defaults to `value`. Use `count` when the values are too long to show. */ summary?: PickerSummary; /** The id of the panel this chip opens, for `aria-controls`. */ panelId?: string; }; /** * The pre-`purpose` API. Still supported so consumers can upgrade the package * without touching code, and warned about once per combination in development. */ export type LegacyChipProps = MuiChipProps & { purpose?: undefined; }; export type ChipProps = SeverityChipProps | StatusChipProps | CategoryChipProps | MetricChipProps | LifecycleChipProps | FilterChipProps | SelectChipProps | EntityChipProps | OverflowChipProps | PickerChipProps | LegacyChipProps; /** * The compact-label primitive. * * @example * * * * * * @example Prefer FilterMenu, which owns this chip and its panel. * */ export declare function Chip(props: ChipProps): import("react").JSX.Element; export default Chip;