@kanso-labs/kanso-ui 0.43.7 → 0.44.1

package/dist/components/chip/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["c","_c","ReactNode","RefAttributes","ButtonRenderProps","FocusableElement","ButtonProps","RACButtonProps","ToggleButtonProps","RACToggleButtonProps","ToggleButtonRenderProps","Button","ToggleButton","ChipKind","chipGlyph","chipLabel","chipPropsFor","useRipple","ariaAttributesOf","buttonRenderer","toggleButtonRenderer","mergeStatefulStyles","ChipActionProps","Omit","children","elevated","icon","variant","ChipFilterProps","ChipProps","ChipVariant","ActionChip","t0","$","t1","onClick","onContextMenu","onKeyDown","onKeyUp","onPointerCancel","onPointerDown","onPointerLeave","onPointerUp","render","props","undefined","element","aria","t2","ripple","isDisabled","T0","t3","t4","handlers","t5","actionChipClasses","t6","surface","actionChipContent","t7","kind","state","isSelected","Chip","isAction","chipContent","FilterChip","filterChipClasses","t8","_c"],"sources":["../../../src/components/chip/index.tsx"],"sourcesContent":["'use client'\n\nimport type { ReactNode, RefAttributes } from 'react'\nimport type {\n  ButtonRenderProps,\n  FocusableElement,\n  ButtonProps as RACButtonProps,\n  ToggleButtonProps as RACToggleButtonProps,\n  ToggleButtonRenderProps,\n} from 'react-aria-components'\n\nimport { Button, ToggleButton } from 'react-aria-components'\n\nimport type { ChipKind } from '../../chip'\n\nimport { chipGlyph, chipLabel, chipPropsFor } from '../../chip'\nimport { useRipple } from '../../hooks/useRipple'\nimport {\n  ariaAttributesOf,\n  buttonRenderer,\n  toggleButtonRenderer,\n} from '../../render/aria'\nimport { mergeStatefulStyles } from '../../styles/merge'\n\n// The pill, its containers, its check and its disabled treatment are the\n// chip module's in `src/chip`, shared with the chips a ChipGroup draws; what\n// is here is React Aria's button around them. Three of the chips page's four\n// chips are drawn here, and `variant` picks the button:\n//\n// - **A filter chip**, the default, is React Aria's `ToggleButton`: a\n//   two-state button announced through `aria-pressed`, which takes the\n//   secondary container and the check once selected.\n// - **An assist or suggestion chip** is React Aria's `Button`: an action, so\n//   nothing is announced as pressed and nothing is ever selected. The two\n//   differ in the label's role alone; see `src/chip/styles.ts`.\n//\n// The page's fourth, the input chip, is ChipGroup's removable chip, and a\n// token in a TokenField.\n//\n// Two of the call site's props go on the element through `src/render/aria`\n// rather than through that spread, as `Button` and `IconButton` do. React\n// Aria builds a button's attributes from an allowlist that holds only the\n// labelling `aria-*` and the state it manages itself, so any other one — a\n// shortcut, an owned element — is dropped before it reaches the DOM. And it\n// wraps a keyboard handler it is given so that the event stops there unless\n// the handler asks otherwise, which is its convention rather than the DOM's;\n// on the element the handler bubbles, so an Escape pressed on a chip inside\n// a dialog still reaches the dialog.\n//\n// A press ripples, as it does on every other pressable control here: the\n// chips page names the ripple as the pressed state, beside the layer.\n\n/** An assist or suggestion chip: an action, drawn as a plain button. */\ntype ChipActionProps = Omit<RACButtonProps, 'children' | 'isPending'> & {\n  /**\n   * The chip's label. Required: the page draws no chip without one, and a\n   * chip with none is an empty button to a screen reader.\n   */\n  children: ReactNode\n  /**\n   * Raises the chip off the page on a container of its own, at the page's\n   * elevation 1, in place of the outline.\n   * @default false\n   */\n  elevated?: boolean\n  /**\n   * An icon before the label, in the page's 18dp slot and the primary role.\n   * An icon drawn in `em` takes its size from the slot.\n   */\n  icon?: ReactNode\n  /**\n   * `assist` for an action the chip's context suggests, and `suggestion`\n   * for one the product generates. Either is an action rather than a\n   * selection, so neither is ever selected.\n   */\n  variant: 'assist' | 'suggestion'\n}\n\n/** A filter chip: a two-state button, the default. */\ntype ChipFilterProps = Omit<RACToggleButtonProps, 'children'> & {\n  /**\n   * The chip's label. A node rather than React Aria's node-or-function,\n   * since the chip puts its own check before whatever this is and a function\n   * would be handed a `defaultChildren` the chip never rendered. ChipGroup's\n   * chip narrows it the same way, for the same reason. Required: the page\n   * draws no chip without one, and a chip with none is an empty button to a\n   * screen reader.\n   */\n  children: ReactNode\n  /**\n   * Raises the chip off the page on a container of its own, at the page's\n   * elevation 1, in place of the outline. A selected one keeps the\n   * secondary container.\n   * @default false\n   */\n  elevated?: boolean\n  /**\n   * An icon before the label, in the page's 18dp slot and the primary role.\n   * The check takes its place while the chip is selected, so the chip keeps\n   * its width. An icon drawn in `em` takes its size from the slot.\n   */\n  icon?: ReactNode\n  /**\n   * A filter chip, a two-state button.\n   * @default 'filter'\n   */\n  variant?: 'filter'\n}\n\ntype ChipProps = ChipActionProps | ChipFilterProps\n\n/** Which of the chips page's chips a Chip is. */\ntype ChipVariant = 'assist' | 'filter' | 'suggestion'\n\nfunction ActionChip({\n  children,\n  elevated = false,\n  icon,\n  onClick,\n  onContextMenu,\n  onKeyDown,\n  onKeyUp,\n  onPointerCancel,\n  onPointerDown,\n  onPointerLeave,\n  onPointerUp,\n  render,\n  variant,\n  ...props\n}: ChipActionProps & RefAttributes<HTMLButtonElement>) {\n  const element = { aria: ariaAttributesOf(props), onKeyDown, onKeyUp }\n  // Off while disabled, as on the filter chip. `onClick` goes through the\n  // ripple too: on a mouse press the ripple ends on the click, so a call\n  // site's own handler spread beside it would leave it pressed.\n  const ripple = useRipple<FocusableElement>(props.isDisabled !== true, {\n    onClick,\n    onContextMenu,\n    onPointerCancel,\n    onPointerDown,\n    onPointerLeave,\n    onPointerUp,\n  })\n\n  return (\n    <Button\n      render={buttonRenderer(element, render)}\n      {...ripple.handlers}\n      {...props}\n      {...mergeStatefulStyles(actionChipClasses(variant, elevated), props)}\n    >\n      {actionChipContent(children, icon, ripple.surface)}\n    </Button>\n  )\n}\n\n// An action chip's classes: the unselected pill, which it always is.\nfunction actionChipClasses(kind: ChipKind, elevated: boolean) {\n  return (state: ButtonRenderProps) =>\n    chipPropsFor({ ...state, isSelected: false }, { elevated, kind })\n}\n\n// What an action chip draws: its icon, if any, then the label, and the\n// ripple over both. Built by a call for the reason `chipContent` is.\nfunction actionChipContent(\n  children: ReactNode,\n  icon: ReactNode,\n  surface: ReactNode,\n) {\n  return (state: ButtonRenderProps) => (\n    <>\n      {chipGlyph({ isDisabled: state.isDisabled, isSelected: false }, icon)}\n      {chipLabel(children)}\n      {surface}\n    </>\n  )\n}\n\n/**\n * A chip. By default a filter chip, which is a two-state button, so its\n * selected state is React Aria's `isSelected`: pass it with `onChange` to\n * control it, or `defaultSelected` to let it keep its own state. Selection is\n * announced through `aria-pressed` rather than a role of its own.\n *\n * `variant=\"assist\"` and `variant=\"suggestion\"` draw the page's two action\n * chips instead: plain buttons, pressed with `onPress`, never selected.\n */\nfunction Chip(props: ChipProps & RefAttributes<HTMLButtonElement>) {\n  if (isAction(props)) {\n    return <ActionChip {...props} />\n  }\n  return <FilterChip {...props} />\n}\n\n// What the chip draws, from React Aria's render state: the check while it is\n// selected or its icon while it is not, then the label, and the ripple over\n// both. Built by a call rather than written inline at the prop, which is what\n// react-perf's no-new-function-as-prop is after; the React Compiler memoises\n// the result on its inputs.\nfunction chipContent(children: ReactNode, icon: ReactNode, surface: ReactNode) {\n  return (state: ToggleButtonRenderProps) => (\n    <>\n      {chipGlyph(state, icon)}\n      {chipLabel(children)}\n      {surface}\n    </>\n  )\n}\n\nfunction FilterChip({\n  children,\n  elevated = false,\n  icon,\n  onClick,\n  onContextMenu,\n  onKeyDown,\n  onKeyUp,\n  onPointerCancel,\n  onPointerDown,\n  onPointerLeave,\n  onPointerUp,\n  render,\n  variant = 'filter',\n  ...props\n}: ChipFilterProps & RefAttributes<HTMLButtonElement>) {\n  const element = { aria: ariaAttributesOf(props), onKeyDown, onKeyUp }\n  // Off while disabled: React Aria still forwards pointer events to a\n  // disabled element, and a press that changes nothing should not look like\n  // one. Typed as Button's ripple is, since React Aria types a toggle\n  // button's pointer events against a <div> rather than the <button> it\n  // renders. `onClick` goes through it for the action chip's reason.\n  const ripple = useRipple<FocusableElement>(props.isDisabled !== true, {\n    onClick,\n    onContextMenu,\n    onPointerCancel,\n    onPointerDown,\n    onPointerLeave,\n    onPointerUp,\n  })\n\n  return (\n    <ToggleButton\n      render={toggleButtonRenderer(element, render)}\n      {...ripple.handlers}\n      {...props}\n      {...mergeStatefulStyles(filterChipClasses(variant, elevated), props)}\n    >\n      {chipContent(children, icon, ripple.surface)}\n    </ToggleButton>\n  )\n}\n\n// A filter chip's classes, from its render state.\nfunction filterChipClasses(kind: ChipKind, elevated: boolean) {\n  return (state: ToggleButtonRenderProps) =>\n    chipPropsFor(state, { elevated, kind })\n}\n\n// Whether a chip is one of the two action chips. A guard rather than a\n// comparison at the call, since TypeScript does not narrow the union through\n// React Aria's mapped prop types on `variant` alone.\nfunction isAction(props: ChipProps): props is ChipActionProps {\n  return props.variant === 'assist' || props.variant === 'suggestion'\n}\n\nexport type { ChipActionProps, ChipFilterProps, ChipProps, ChipVariant }\n\nexport default Chip\n"],"mappings":";;;;;;;;;AAkHA,SAAA+B,WAAAC,IAAA;CAAA,MAAAC,IAAAhC,EAAA,EAAA;CAAoB,MAAA,EAAAuB,UAAAC,UAAAS,IAAAR,MAAAS,SAAAC,eAAAC,WAAAC,SAAAC,iBAAAC,eAAAC,gBAAAC,aAAAC,QAAAhB,SAAA,GAAAiB,UAAAZ;CAElB,MAAAP,WAAAS,OAAAW,KAAAA,IAAA,QAAAX;CAcA,MAAAY,UAAgB;EAAAC,MAAQ7B,iBAAiB0B,KAAK;EAACP;EAAAC;CAAqB;CAAC,IAAAU;CAAA,IAAAf,EAAA,OAAAE,WAAAF,EAAA,OAAAG,iBAAAH,EAAA,OAAAM,mBAAAN,EAAA,OAAAO,iBAAAP,EAAA,OAAAQ,kBAAAR,EAAA,OAAAS,aAAA;EAICM,KAAA;GAAAb;GAAAC;GAAAG;GAAAC;GAAAC;GAAAC;EAOtE;EAACT,EAAA,KAAAE;EAAAF,EAAA,KAAAG;EAAAH,EAAA,KAAAM;EAAAN,EAAA,KAAAO;EAAAP,EAAA,KAAAQ;EAAAR,EAAA,KAAAS;EAAAT,EAAA,KAAAe;CAAA,OAAAA,KAAAf,EAAA;CAPD,MAAAgB,SAAehC,UAA4B2B,MAAKM,eAAgB,MAAMF,EAOrE;CAGE,MAAAG,KAAAxC;CACS,MAAAyC,KAAAjC,eAAe2B,SAASH,MAAM;CAClC,MAAAU,KAAAJ,OAAMK;CAEN,MAAAC,KAAAlC,oBAAoBmC,kBAAkB7B,SAASF,QAAQ,GAAGmB,KAAK;CAAC,IAAAa;CAAA,IAAAxB,EAAA,OAAAT,YAAAS,EAAA,OAAAP,QAAAO,EAAA,OAAAgB,OAAAS,SAAA;EAEnED,KAAAE,kBAAkBnC,UAAUE,MAAMuB,OAAMS,OAAQ;EAACzB,EAAA,KAAAT;EAAAS,EAAA,KAAAP;EAAAO,EAAA,KAAAgB,OAAAS;EAAAzB,EAAA,MAAAwB;CAAA,OAAAA,KAAAxB,EAAA;CAAA,IAAA2B;CAAA,IAAA3B,EAAA,QAAAkB,MAAAlB,EAAA,QAAAW,SAAAX,EAAA,QAAAgB,OAAAK,YAAArB,EAAA,QAAAmB,MAAAnB,EAAA,QAAAsB,MAAAtB,EAAA,QAAAwB,IAAA;EANpDG,KAAA,oBAAC,IAAD;GACU,QAAAR;GAA+B,GACnCC;GAAe,GACfT;GAAK,GACLW;GAEHE,UAAAA;EANI,CAAA;EAOExB,EAAA,MAAAkB;EAAAlB,EAAA,MAAAW;EAAAX,EAAA,MAAAgB,OAAAK;EAAArB,EAAA,MAAAmB;EAAAnB,EAAA,MAAAsB;EAAAtB,EAAA,MAAAwB;EAAAxB,EAAA,MAAA2B;CAAA,OAAAA,KAAA3B,EAAA;CAAA,OAPT2B;AAOS;AAKb,SAASJ,kBAAkBK,MAAgBpC,UAAmB;CAC5D,QAAQqC,UACN9C,aAAa;EAAE,GAAG8C;EAAOC,YAAY;CAAM,GAAG;EAAEtC;EAAUoC;CAAK,CAAC;AACpE;AAIA,SAASF,kBACPnC,UACAE,MACAgC,SACA;CACA,QAAQI,UACN,qBAAA,UAAA,EAAA,UAAA;EACGhD,UAAU;GAAEoC,YAAYY,MAAMZ;GAAYa,YAAY;EAAM,GAAGrC,IAAI;EACnEX,UAAUS,QAAQ;EAClBkC;CACH,EAAA,CAAA;AAEJ;;;;;;;;;;AAWA,SAAAM,KAAApB,OAAA;CAAA,MAAAX,IAAAhC,EAAA,CAAA;CACE,IAAIgE,SAASrB,KAAK,GAAC;EAAA,IAAAZ;EAAA,IAAAC,EAAA,OAAAW,OAAA;GACVZ,KAAA,oBAAC,YAAD,EAAW,GAAKY,MAAK,CAAA;GAAIX,EAAA,KAAAW;GAAAX,EAAA,KAAAD;EAAA,OAAAA,KAAAC,EAAA;EAAA,OAAzBD;CAAyB;CACjC,IAAAA;CAAA,IAAAC,EAAA,OAAAW,OAAA;EACMZ,KAAA,oBAAC,YAAD,EAAW,GAAKY,MAAK,CAAA;EAAIX,EAAA,KAAAW;EAAAX,EAAA,KAAAD;CAAA,OAAAA,KAAAC,EAAA;CAAA,OAAzBD;AAAyB;AAQlC,SAASkC,YAAY1C,UAAqBE,MAAiBgC,SAAoB;CAC7E,QAAQI,UACN,qBAAA,UAAA,EAAA,UAAA;EACGhD,UAAUgD,OAAOpC,IAAI;EACrBX,UAAUS,QAAQ;EAClBkC;CACH,EAAA,CAAA;AAEJ;AAEA,SAAAS,WAAAnC,IAAA;CAAA,MAAAC,IAAAhC,EAAA,EAAA;CAAoB,MAAA,EAAAuB,UAAAC,UAAAS,IAAAR,MAAAS,SAAAC,eAAAC,WAAAC,SAAAC,iBAAAC,eAAAC,gBAAAC,aAAAC,QAAAhB,SAAAqB,IAAA,GAAAJ,UAAAZ;CAElB,MAAAP,WAAAS,OAAAW,KAAAA,IAAA,QAAAX;CAWA,MAAAP,UAAAqB,OAAAH,KAAAA,IAAA,WAAAG;CAGA,MAAAF,UAAgB;EAAAC,MAAQ7B,iBAAiB0B,KAAK;EAACP;EAAAC;CAAqB;CAAC,IAAAc;CAAA,IAAAnB,EAAA,OAAAE,WAAAF,EAAA,OAAAG,iBAAAH,EAAA,OAAAM,mBAAAN,EAAA,OAAAO,iBAAAP,EAAA,OAAAQ,kBAAAR,EAAA,OAAAS,aAAA;EAMCU,KAAA;GAAAjB;GAAAC;GAAAG;GAAAC;GAAAC;GAAAC;EAOtE;EAACT,EAAA,KAAAE;EAAAF,EAAA,KAAAG;EAAAH,EAAA,KAAAM;EAAAN,EAAA,KAAAO;EAAAP,EAAA,KAAAQ;EAAAR,EAAA,KAAAS;EAAAT,EAAA,KAAAmB;CAAA,OAAAA,KAAAnB,EAAA;CAPD,MAAAgB,SAAehC,UAA4B2B,MAAKM,eAAgB,MAAME,EAOrE;CAGE,MAAAD,KAAAvC;CACS,MAAAyC,KAAAjC,qBAAqB0B,SAASH,MAAM;CACxC,MAAAY,KAAAN,OAAMK;CAEN,MAAAG,KAAApC,oBAAoB+C,kBAAkBzC,SAASF,QAAQ,GAAGmB,KAAK;CAAC,IAAAgB;CAAA,IAAA3B,EAAA,OAAAT,YAAAS,EAAA,OAAAP,QAAAO,EAAA,OAAAgB,OAAAS,SAAA;EAEnEE,KAAAM,YAAY1C,UAAUE,MAAMuB,OAAMS,OAAQ;EAACzB,EAAA,KAAAT;EAAAS,EAAA,KAAAP;EAAAO,EAAA,KAAAgB,OAAAS;EAAAzB,EAAA,MAAA2B;CAAA,OAAAA,KAAA3B,EAAA;CAAA,IAAAoC;CAAA,IAAApC,EAAA,QAAAkB,MAAAlB,EAAA,QAAAW,SAAAX,EAAA,QAAAgB,OAAAK,YAAArB,EAAA,QAAAoB,MAAApB,EAAA,QAAAwB,MAAAxB,EAAA,QAAA2B,IAAA;EAN9CS,KAAA,oBAAC,IAAD;GACU,QAAAhB;GAAqC,GACzCE;GAAe,GACfX;GAAK,GACLa;GAEHG,UAAAA;EANU,CAAA;EAOE3B,EAAA,MAAAkB;EAAAlB,EAAA,MAAAW;EAAAX,EAAA,MAAAgB,OAAAK;EAAArB,EAAA,MAAAoB;EAAApB,EAAA,MAAAwB;EAAAxB,EAAA,MAAA2B;EAAA3B,EAAA,MAAAoC;CAAA,OAAAA,KAAApC,EAAA;CAAA,OAPfoC;AAOe;AAKnB,SAASD,kBAAkBP,MAAgBpC,UAAmB;CAC5D,QAAQqC,UACN9C,aAAa8C,OAAO;EAAErC;EAAUoC;CAAK,CAAC;AAC1C;AAKA,SAASI,SAASrB,OAA4C;CAC5D,OAAOA,MAAMjB,YAAY,YAAYiB,MAAMjB,YAAY;AACzD"}
+{"version":3,"file":"index.js","names":["c","_c","ReactNode","RefAttributes","ButtonRenderProps","FocusableElement","ButtonProps","RACButtonProps","ToggleButtonProps","RACToggleButtonProps","ToggleButtonRenderProps","Button","ToggleButton","ChipKind","chipGlyph","chipLabel","chipPropsFor","useRipple","ariaAttributesOf","buttonRenderer","toggleButtonRenderer","mergeStatefulStyles","ChipActionProps","Omit","children","elevated","icon","variant","ChipFilterProps","ChipProps","ChipVariant","ActionChip","t0","$","t1","onClick","onContextMenu","onKeyDown","onKeyUp","onPointerCancel","onPointerDown","onPointerLeave","onPointerUp","render","props","undefined","element","aria","t2","ripple","isDisabled","T0","t3","t4","handlers","t5","actionChipClasses","t6","surface","actionChipContent","t7","kind","state","isSelected","Chip","isAction","chipContent","FilterChip","filterChipClasses","t8","_c"],"sources":["../../../src/components/chip/index.tsx"],"sourcesContent":["'use client'\n\nimport type { ReactNode, RefAttributes } from 'react'\nimport type {\n  ButtonRenderProps,\n  FocusableElement,\n  ButtonProps as RACButtonProps,\n  ToggleButtonProps as RACToggleButtonProps,\n  ToggleButtonRenderProps,\n} from 'react-aria-components'\n\nimport { Button, ToggleButton } from 'react-aria-components'\n\nimport type { ChipKind } from '../../chip'\n\nimport { chipGlyph, chipLabel, chipPropsFor } from '../../chip'\nimport { useRipple } from '../../hooks/useRipple'\nimport {\n  ariaAttributesOf,\n  buttonRenderer,\n  toggleButtonRenderer,\n} from '../../render/aria'\nimport { mergeStatefulStyles } from '../../styles/merge'\n\n// The pill, its containers, its check and its disabled treatment are the\n// chip module's in `src/chip`, shared with the chips a ChipGroup draws; what\n// is here is React Aria's button around them. Three of the chips page's four\n// chips are drawn here, and `variant` picks the button:\n//\n// - **A filter chip**, the default, is React Aria's `ToggleButton`: a\n//   two-state button announced through `aria-pressed`, which takes the\n//   secondary container and the check once selected.\n// - **An assist or suggestion chip** is React Aria's `Button`: an action, so\n//   nothing is announced as pressed and nothing is ever selected. The two\n//   differ in the label's role alone; see `src/chip/styles.ts`.\n//\n// The page's fourth, the input chip, is ChipGroup's removable chip, and a\n// token in a TokenField.\n//\n// Two of the call site's props go on the element through `src/render/aria`\n// rather than through that spread, as `Button` and `IconButton` do. React\n// Aria builds a button's attributes from an allowlist that holds only the\n// labelling `aria-*` and the state it manages itself, so any other one — a\n// shortcut, an owned element — is dropped before it reaches the DOM. And it\n// wraps a keyboard handler it is given so that the event stops there unless\n// the handler asks otherwise, which is its convention rather than the DOM's;\n// on the element the handler bubbles, so an Escape pressed on a chip inside\n// a dialog still reaches the dialog.\n//\n// A press ripples, as it does on every other pressable control here: the\n// chips page names the ripple as the pressed state, beside the layer.\n\n/** An assist or suggestion chip: an action, drawn as a plain button. */\ntype ChipActionProps = Omit<RACButtonProps, 'children' | 'isPending'> & {\n  /**\n   * The chip's label. Required: the page draws no chip without one, and a\n   * chip with none is an empty button to a screen reader.\n   */\n  children: ReactNode\n  /**\n   * Raises the chip off the page on a container of its own, at the page's\n   * elevation 1, in place of the outline.\n   * @default false\n   */\n  elevated?: boolean\n  /**\n   * An icon before the label, in the page's 18dp slot and the primary role.\n   * An icon drawn in `em` takes its size from the slot.\n   */\n  icon?: ReactNode\n  /**\n   * `assist` for an action the chip's context suggests, and `suggestion`\n   * for one the product generates. Either is an action rather than a\n   * selection, so neither is ever selected.\n   */\n  variant: 'assist' | 'suggestion'\n}\n\n/** A filter chip: a two-state button, the default. */\ntype ChipFilterProps = Omit<RACToggleButtonProps, 'children'> & {\n  /**\n   * The chip's label. A node rather than React Aria's node-or-function,\n   * since the chip puts its own check before whatever this is and a function\n   * would be handed a `defaultChildren` the chip never rendered. ChipGroup's\n   * chip narrows it the same way, for the same reason. Required: the page\n   * draws no chip without one, and a chip with none is an empty button to a\n   * screen reader.\n   */\n  children: ReactNode\n  /**\n   * Raises the chip off the page on a container of its own, at the page's\n   * elevation 1, in place of the outline. A selected one keeps the\n   * secondary container.\n   * @default false\n   */\n  elevated?: boolean\n  /**\n   * An icon before the label, in the page's 18dp slot and the primary role.\n   * The check takes its place while the chip is selected, so the chip keeps\n   * its width. An icon drawn in `em` takes its size from the slot.\n   */\n  icon?: ReactNode\n  /**\n   * A filter chip, a two-state button.\n   * @default 'filter'\n   */\n  variant?: 'filter'\n}\n\ntype ChipProps = ChipActionProps | ChipFilterProps\n\n/** Which of the chips page's chips a Chip is. */\ntype ChipVariant = 'assist' | 'filter' | 'suggestion'\n\nfunction ActionChip({\n  children,\n  elevated = false,\n  icon,\n  onClick,\n  onContextMenu,\n  onKeyDown,\n  onKeyUp,\n  onPointerCancel,\n  onPointerDown,\n  onPointerLeave,\n  onPointerUp,\n  render,\n  variant,\n  ...props\n}: ChipActionProps & RefAttributes<HTMLButtonElement>) {\n  const element = { aria: ariaAttributesOf(props), onKeyDown, onKeyUp }\n  // Off while disabled, as on the filter chip. `onClick` goes through the\n  // ripple too: on a mouse press the ripple ends on the click, so a call\n  // site's own handler spread beside it would leave it pressed.\n  const ripple = useRipple<FocusableElement>(props.isDisabled !== true, {\n    onClick,\n    onContextMenu,\n    onPointerCancel,\n    onPointerDown,\n    onPointerLeave,\n    onPointerUp,\n  })\n\n  return (\n    <Button\n      render={buttonRenderer(element, render)}\n      {...ripple.handlers}\n      {...props}\n      {...mergeStatefulStyles(actionChipClasses(variant, elevated), props)}\n    >\n      {actionChipContent(children, icon, ripple.surface)}\n    </Button>\n  )\n}\n\n// An action chip's classes: the unselected pill, which it always is.\nfunction actionChipClasses(kind: ChipKind, elevated: boolean) {\n  return (state: ButtonRenderProps) =>\n    chipPropsFor({ ...state, isSelected: false }, { elevated, kind })\n}\n\n// What an action chip draws: its icon, if any, then the label, and the\n// ripple over both. Built by a call for the reason `chipContent` is.\nfunction actionChipContent(\n  children: ReactNode,\n  icon: ReactNode,\n  surface: ReactNode,\n) {\n  return (state: ButtonRenderProps) => (\n    <>\n      {chipGlyph(\n        { isDisabled: state.isDisabled, isSelected: false },\n        icon,\n        false,\n      )}\n      {chipLabel(children)}\n      {surface}\n    </>\n  )\n}\n\n/**\n * A chip. By default a filter chip, which is a two-state button, so its\n * selected state is React Aria's `isSelected`: pass it with `onChange` to\n * control it, or `defaultSelected` to let it keep its own state. Selection is\n * announced through `aria-pressed` rather than a role of its own.\n *\n * `variant=\"assist\"` and `variant=\"suggestion\"` draw the page's two action\n * chips instead: plain buttons, pressed with `onPress`, never selected.\n */\nfunction Chip(props: ChipProps & RefAttributes<HTMLButtonElement>) {\n  if (isAction(props)) {\n    return <ActionChip {...props} />\n  }\n  return <FilterChip {...props} />\n}\n\n// What the chip draws, from React Aria's render state: the check while it is\n// selected or its icon while it is not, then the label, and the ripple over\n// both. Built by a call rather than written inline at the prop, which is what\n// react-perf's no-new-function-as-prop is after; the React Compiler memoises\n// the result on its inputs.\nfunction chipContent(children: ReactNode, icon: ReactNode, surface: ReactNode) {\n  return (state: ToggleButtonRenderProps) => (\n    <>\n      {chipGlyph(state, icon)}\n      {chipLabel(children)}\n      {surface}\n    </>\n  )\n}\n\nfunction FilterChip({\n  children,\n  elevated = false,\n  icon,\n  onClick,\n  onContextMenu,\n  onKeyDown,\n  onKeyUp,\n  onPointerCancel,\n  onPointerDown,\n  onPointerLeave,\n  onPointerUp,\n  render,\n  variant = 'filter',\n  ...props\n}: ChipFilterProps & RefAttributes<HTMLButtonElement>) {\n  const element = { aria: ariaAttributesOf(props), onKeyDown, onKeyUp }\n  // Off while disabled: React Aria still forwards pointer events to a\n  // disabled element, and a press that changes nothing should not look like\n  // one. Typed as Button's ripple is, since React Aria types a toggle\n  // button's pointer events against a <div> rather than the <button> it\n  // renders. `onClick` goes through it for the action chip's reason.\n  const ripple = useRipple<FocusableElement>(props.isDisabled !== true, {\n    onClick,\n    onContextMenu,\n    onPointerCancel,\n    onPointerDown,\n    onPointerLeave,\n    onPointerUp,\n  })\n\n  return (\n    <ToggleButton\n      render={toggleButtonRenderer(element, render)}\n      {...ripple.handlers}\n      {...props}\n      {...mergeStatefulStyles(filterChipClasses(variant, elevated), props)}\n    >\n      {chipContent(children, icon, ripple.surface)}\n    </ToggleButton>\n  )\n}\n\n// A filter chip's classes, from its render state.\nfunction filterChipClasses(kind: ChipKind, elevated: boolean) {\n  return (state: ToggleButtonRenderProps) =>\n    chipPropsFor(state, { elevated, kind })\n}\n\n// Whether a chip is one of the two action chips. A guard rather than a\n// comparison at the call, since TypeScript does not narrow the union through\n// React Aria's mapped prop types on `variant` alone.\nfunction isAction(props: ChipProps): props is ChipActionProps {\n  return props.variant === 'assist' || props.variant === 'suggestion'\n}\n\nexport type { ChipActionProps, ChipFilterProps, ChipProps, ChipVariant }\n\nexport default Chip\n"],"mappings":";;;;;;;;;AAkHA,SAAA+B,WAAAC,IAAA;CAAA,MAAAC,IAAAhC,EAAA,EAAA;CAAoB,MAAA,EAAAuB,UAAAC,UAAAS,IAAAR,MAAAS,SAAAC,eAAAC,WAAAC,SAAAC,iBAAAC,eAAAC,gBAAAC,aAAAC,QAAAhB,SAAA,GAAAiB,UAAAZ;CAElB,MAAAP,WAAAS,OAAAW,KAAAA,IAAA,QAAAX;CAcA,MAAAY,UAAgB;EAAAC,MAAQ7B,iBAAiB0B,KAAK;EAACP;EAAAC;CAAqB;CAAC,IAAAU;CAAA,IAAAf,EAAA,OAAAE,WAAAF,EAAA,OAAAG,iBAAAH,EAAA,OAAAM,mBAAAN,EAAA,OAAAO,iBAAAP,EAAA,OAAAQ,kBAAAR,EAAA,OAAAS,aAAA;EAICM,KAAA;GAAAb;GAAAC;GAAAG;GAAAC;GAAAC;GAAAC;EAOtE;EAACT,EAAA,KAAAE;EAAAF,EAAA,KAAAG;EAAAH,EAAA,KAAAM;EAAAN,EAAA,KAAAO;EAAAP,EAAA,KAAAQ;EAAAR,EAAA,KAAAS;EAAAT,EAAA,KAAAe;CAAA,OAAAA,KAAAf,EAAA;CAPD,MAAAgB,SAAehC,UAA4B2B,MAAKM,eAAgB,MAAMF,EAOrE;CAGE,MAAAG,KAAAxC;CACS,MAAAyC,KAAAjC,eAAe2B,SAASH,MAAM;CAClC,MAAAU,KAAAJ,OAAMK;CAEN,MAAAC,KAAAlC,oBAAoBmC,kBAAkB7B,SAASF,QAAQ,GAAGmB,KAAK;CAAC,IAAAa;CAAA,IAAAxB,EAAA,OAAAT,YAAAS,EAAA,OAAAP,QAAAO,EAAA,OAAAgB,OAAAS,SAAA;EAEnED,KAAAE,kBAAkBnC,UAAUE,MAAMuB,OAAMS,OAAQ;EAACzB,EAAA,KAAAT;EAAAS,EAAA,KAAAP;EAAAO,EAAA,KAAAgB,OAAAS;EAAAzB,EAAA,MAAAwB;CAAA,OAAAA,KAAAxB,EAAA;CAAA,IAAA2B;CAAA,IAAA3B,EAAA,QAAAkB,MAAAlB,EAAA,QAAAW,SAAAX,EAAA,QAAAgB,OAAAK,YAAArB,EAAA,QAAAmB,MAAAnB,EAAA,QAAAsB,MAAAtB,EAAA,QAAAwB,IAAA;EANpDG,KAAA,oBAAC,IAAD;GACU,QAAAR;GAA+B,GACnCC;GAAe,GACfT;GAAK,GACLW;GAEHE,UAAAA;EANI,CAAA;EAOExB,EAAA,MAAAkB;EAAAlB,EAAA,MAAAW;EAAAX,EAAA,MAAAgB,OAAAK;EAAArB,EAAA,MAAAmB;EAAAnB,EAAA,MAAAsB;EAAAtB,EAAA,MAAAwB;EAAAxB,EAAA,MAAA2B;CAAA,OAAAA,KAAA3B,EAAA;CAAA,OAPT2B;AAOS;AAKb,SAASJ,kBAAkBK,MAAgBpC,UAAmB;CAC5D,QAAQqC,UACN9C,aAAa;EAAE,GAAG8C;EAAOC,YAAY;CAAM,GAAG;EAAEtC;EAAUoC;CAAK,CAAC;AACpE;AAIA,SAASF,kBACPnC,UACAE,MACAgC,SACA;CACA,QAAQI,UACN,qBAAA,UAAA,EAAA,UAAA;EACGhD,UACC;GAAEoC,YAAYY,MAAMZ;GAAYa,YAAY;EAAM,GAClDrC,MACA,KACF;EACCX,UAAUS,QAAQ;EAClBkC;CACH,EAAA,CAAA;AAEJ;;;;;;;;;;AAWA,SAAAM,KAAApB,OAAA;CAAA,MAAAX,IAAAhC,EAAA,CAAA;CACE,IAAIgE,SAASrB,KAAK,GAAC;EAAA,IAAAZ;EAAA,IAAAC,EAAA,OAAAW,OAAA;GACVZ,KAAA,oBAAC,YAAD,EAAW,GAAKY,MAAK,CAAA;GAAIX,EAAA,KAAAW;GAAAX,EAAA,KAAAD;EAAA,OAAAA,KAAAC,EAAA;EAAA,OAAzBD;CAAyB;CACjC,IAAAA;CAAA,IAAAC,EAAA,OAAAW,OAAA;EACMZ,KAAA,oBAAC,YAAD,EAAW,GAAKY,MAAK,CAAA;EAAIX,EAAA,KAAAW;EAAAX,EAAA,KAAAD;CAAA,OAAAA,KAAAC,EAAA;CAAA,OAAzBD;AAAyB;AAQlC,SAASkC,YAAY1C,UAAqBE,MAAiBgC,SAAoB;CAC7E,QAAQI,UACN,qBAAA,UAAA,EAAA,UAAA;EACGhD,UAAUgD,OAAOpC,IAAI;EACrBX,UAAUS,QAAQ;EAClBkC;CACH,EAAA,CAAA;AAEJ;AAEA,SAAAS,WAAAnC,IAAA;CAAA,MAAAC,IAAAhC,EAAA,EAAA;CAAoB,MAAA,EAAAuB,UAAAC,UAAAS,IAAAR,MAAAS,SAAAC,eAAAC,WAAAC,SAAAC,iBAAAC,eAAAC,gBAAAC,aAAAC,QAAAhB,SAAAqB,IAAA,GAAAJ,UAAAZ;CAElB,MAAAP,WAAAS,OAAAW,KAAAA,IAAA,QAAAX;CAWA,MAAAP,UAAAqB,OAAAH,KAAAA,IAAA,WAAAG;CAGA,MAAAF,UAAgB;EAAAC,MAAQ7B,iBAAiB0B,KAAK;EAACP;EAAAC;CAAqB;CAAC,IAAAc;CAAA,IAAAnB,EAAA,OAAAE,WAAAF,EAAA,OAAAG,iBAAAH,EAAA,OAAAM,mBAAAN,EAAA,OAAAO,iBAAAP,EAAA,OAAAQ,kBAAAR,EAAA,OAAAS,aAAA;EAMCU,KAAA;GAAAjB;GAAAC;GAAAG;GAAAC;GAAAC;GAAAC;EAOtE;EAACT,EAAA,KAAAE;EAAAF,EAAA,KAAAG;EAAAH,EAAA,KAAAM;EAAAN,EAAA,KAAAO;EAAAP,EAAA,KAAAQ;EAAAR,EAAA,KAAAS;EAAAT,EAAA,KAAAmB;CAAA,OAAAA,KAAAnB,EAAA;CAPD,MAAAgB,SAAehC,UAA4B2B,MAAKM,eAAgB,MAAME,EAOrE;CAGE,MAAAD,KAAAvC;CACS,MAAAyC,KAAAjC,qBAAqB0B,SAASH,MAAM;CACxC,MAAAY,KAAAN,OAAMK;CAEN,MAAAG,KAAApC,oBAAoB+C,kBAAkBzC,SAASF,QAAQ,GAAGmB,KAAK;CAAC,IAAAgB;CAAA,IAAA3B,EAAA,OAAAT,YAAAS,EAAA,OAAAP,QAAAO,EAAA,OAAAgB,OAAAS,SAAA;EAEnEE,KAAAM,YAAY1C,UAAUE,MAAMuB,OAAMS,OAAQ;EAACzB,EAAA,KAAAT;EAAAS,EAAA,KAAAP;EAAAO,EAAA,KAAAgB,OAAAS;EAAAzB,EAAA,MAAA2B;CAAA,OAAAA,KAAA3B,EAAA;CAAA,IAAAoC;CAAA,IAAApC,EAAA,QAAAkB,MAAAlB,EAAA,QAAAW,SAAAX,EAAA,QAAAgB,OAAAK,YAAArB,EAAA,QAAAoB,MAAApB,EAAA,QAAAwB,MAAAxB,EAAA,QAAA2B,IAAA;EAN9CS,KAAA,oBAAC,IAAD;GACU,QAAAhB;GAAqC,GACzCE;GAAe,GACfX;GAAK,GACLa;GAEHG,UAAAA;EANU,CAAA;EAOE3B,EAAA,MAAAkB;EAAAlB,EAAA,MAAAW;EAAAX,EAAA,MAAAgB,OAAAK;EAAArB,EAAA,MAAAoB;EAAApB,EAAA,MAAAwB;EAAAxB,EAAA,MAAA2B;EAAA3B,EAAA,MAAAoC;CAAA,OAAAA,KAAApC,EAAA;CAAA,OAPfoC;AAOe;AAKnB,SAASD,kBAAkBP,MAAgBpC,UAAmB;CAC5D,QAAQqC,UACN9C,aAAa8C,OAAO;EAAErC;EAAUoC;CAAK,CAAC;AAC1C;AAKA,SAASI,SAASrB,OAA4C;CAC5D,OAAOA,MAAMjB,YAAY,YAAYiB,MAAMjB,YAAY;AACzD"}

package/dist/components/chip-group/index.d.ts

@@ -1,8 +1,11 @@
 import { ReactElement, ReactNode, RefAttributes } from "react";
 import { TagGroupProps, TagListProps, TagProps } from "react-aria-components";
 //#region src/components/chip-group/index.d.ts
-type ChipGroupChipProps = Omit<TagProps, 'children' | 'className' | 'style'> & {
-  /** The chip's label. */
+type ChipGroupChipProps = {
+  /**
+   * The chip's label. Text, numbers, or a mix of the two — `Label {3}` —
+   * also name the chip; a label holding an element needs `textValue`.
+   */
   children?: ReactNode;
   /** A function may compute the class from the chip's render state. */
   className?: TagProps['className'];
@@ -14,7 +17,15 @@ type ChipGroupChipProps = Omit<TagProps, 'children' | 'className' | 'style'> & {
   icon?: ReactNode;
   /** A function may compute the style from the chip's render state. */
   style?: TagProps['style'];
-};
+  /**
+   * The chip's name as text, which is what a screen reader announces for
+   * its row. Read from the label when that is text or numbers, so it is
+   * needed only when the label holds an element — emphasis, a count in a
+   * badge — and React Aria warns in the console when such a chip has none.
+   * Given, it wins over the text read from the label.
+   */
+  textValue?: string;
+} & Omit<TagProps, 'children' | 'className' | 'style' | 'textValue'>;
 type ChipGroupProps<T extends object = object> = {
   /**
    * The chips, each with an `id` of its own. With `items`, a function from an
@@ -36,6 +47,16 @@ type ChipGroupProps<T extends object = object> = {
    * that space from the start; so does a permanent `description`.
    */
   error?: string;
+  /**
+   * What Escape does on a chip. `none`, the default, keeps the selection and
+   * lets the key through to whatever is around the group, so a group in a
+   * Sheet, Dialog or Popover closes it on the first press. `clearSelection`
+   * empties the selection first, as React Aria's own default does, and lets
+   * a second press through.
+   *
+   * @default 'none'
+   */
+  escapeKeyBehavior?: 'clearSelection' | 'none';
   /**
    * What the group is for. Required rather than optional: a set of chips
    * with no name is a row a screen reader cannot introduce.
@@ -48,7 +69,7 @@ type ChipGroupProps<T extends object = object> = {
    * Aria names it in the reader's locale — "Remove" in English.
    */
   removeLabel?: string;
-} & Omit<TagGroupProps, 'children'> & Pick<TagListProps<T>, 'items' | 'renderEmptyState'>;
+} & Omit<TagGroupProps, 'children' | 'escapeKeyBehavior'> & Pick<TagListProps<T>, 'items' | 'renderEmptyState'>;
 /**
  * A labelled set of chips, one or more of which can be chosen, each of which
  * can be removed. Selection is React Aria's: set `selectionMode` to `single`
@@ -64,13 +85,22 @@ type ChipGroupProps<T extends object = object> = {
  * Give the group `onRemove` and each chip draws a close target. The arrow
  * keys move between chips, so a set of many is one tab stop rather than many.
  *
+ * A chip is never wider than its row, so a label with no room ends in an
+ * ellipsis rather than wrapping, and shows its full text in the browser's
+ * tooltip on hover.
+ *
+ * Escape on a chip keeps the selection and reaches whatever is around the
+ * group, so a group in a Sheet, Dialog or Popover closes it. Pass
+ * `escapeKeyBehavior="clearSelection"` for React Aria's own default, which
+ * empties the selection on the first press and lets the second through.
+ *
  * A chip that toggles nothing else is Chip; this is for a set that shares a
  * value.
  *
  * The call site's `className` and `style` land on the group as a whole,
  * which is the element a layout positions.
  */
-declare function ChipGroup<T extends object = object>({ children, description, error, items, label, removeLabel, renderEmptyState, ...props }: ChipGroupProps<T> & RefAttributes<HTMLDivElement>): import("react").JSX.Element;
+declare function ChipGroup<T extends object = object>({ children, description, error, escapeKeyBehavior, items, label, removeLabel, renderEmptyState, ...props }: ChipGroupProps<T> & RefAttributes<HTMLDivElement>): import("react").JSX.Element;
 declare namespace ChipGroup {
   var Chip: typeof ChipGroupChip;
 }

package/dist/components/chip-group/index.js

@@ -7,9 +7,9 @@ import { useRipple } from "../../hooks/useRipple.js";
 import { invalidFrom } from "../../field/root.js";
 import { groupStyles } from "../../field/styles.js";
 import { FieldLabel, FieldMessage } from "../../field/index.js";
+import { textOf } from "../../collection/text.js";
 import { chipStyles } from "../../chip/styles.js";
 import { chipGlyph, chipLabel, chipPropsFor, chipRemoveClassName } from "../../chip/index.js";
-import { textOf } from "../../collection/text.js";
 import { c } from "react/compiler-runtime";
 import { createContext, useContext } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
@@ -23,11 +23,14 @@ const styles = { list: {
 	kAzted: "xlzjxrf",
 	$$css: true
 } };
-function chipContent(children, icon, removeLabel, surface) {
+function chipContent(children, icon, removeLabel, surface, acts) {
 	return (state) => /* @__PURE__ */ jsxs(Fragment$1, { children: [
-		chipGlyph(state, icon),
+		chipGlyph(state, icon, state.selectionMode !== "none"),
 		chipLabel(children),
-		state.selectionMode !== "none" && !state.isDisabled ? surface : null,
+		(acts || state.selectionMode !== "none") && !state.isDisabled ? /* @__PURE__ */ jsx("span", {
+			...props(chipStyles.surfaceCorners),
+			children: surface
+		}) : null,
 		state.allowsRemoving ? /* @__PURE__ */ jsx(Button, {
 			"aria-label": removeLabel,
 			className: chipRemoveClassName,
@@ -37,8 +40,12 @@ function chipContent(children, icon, removeLabel, surface) {
 	] });
 }
 const RemoveLabelContext = createContext(void 0);
+const GroupActionContext = createContext(false);
 const LABEL_STATE_VALID = { isInvalid: false };
 const LABEL_STATE_INVALID = { isInvalid: true };
+function actingChipPropsFor(state) {
+	return chipPropsFor(state);
+}
 /**
 * A labelled set of chips, one or more of which can be chosen, each of which
 * can be removed. Selection is React Aria's: set `selectionMode` to `single`
@@ -54,6 +61,15 @@ const LABEL_STATE_INVALID = { isInvalid: true };
 * Give the group `onRemove` and each chip draws a close target. The arrow
 * keys move between chips, so a set of many is one tab stop rather than many.
 *
+* A chip is never wider than its row, so a label with no room ends in an
+* ellipsis rather than wrapping, and shows its full text in the browser's
+* tooltip on hover.
+*
+* Escape on a chip keeps the selection and reaches whatever is around the
+* group, so a group in a Sheet, Dialog or Popover closes it. Pass
+* `escapeKeyBehavior="clearSelection"` for React Aria's own default, which
+* empties the selection on the first press and lets the second through.
+*
 * A chip that toggles nothing else is Chip; this is for a set that shares a
 * value.
 *
@@ -61,7 +77,7 @@ const LABEL_STATE_INVALID = { isInvalid: true };
 * which is the element a layout positions.
 */
 function ChipGroup(t0) {
-	const $ = c(33);
+	const $ = c(39);
 	let T0;
 	let children;
 	let description;
@@ -69,23 +85,28 @@ function ChipGroup(t0) {
 	let invalid;
 	let items;
 	let label;
+	let props$1;
 	let removeLabel;
 	let renderEmptyState;
 	let t1;
 	let t2;
+	let t3;
 	if ($[0] !== t0) {
-		const { children: t3, description: t4, error: t5, items: t6, label: t7, removeLabel: t8, renderEmptyState: t9, ...props$1 } = t0;
-		children = t3;
-		description = t4;
-		error = t5;
-		items = t6;
-		label = t7;
-		removeLabel = t8;
-		renderEmptyState = t9;
+		const { children: t4, description: t5, error: t6, escapeKeyBehavior: t7, items: t8, label: t9, removeLabel: t10, renderEmptyState: t11, ...t12 } = t0;
+		children = t4;
+		description = t5;
+		error = t6;
+		items = t8;
+		label = t9;
+		removeLabel = t10;
+		renderEmptyState = t11;
+		props$1 = t12;
+		const escapeKeyBehavior = t7 === void 0 ? "none" : t7;
 		invalid = invalidFrom(error);
 		T0 = TagGroup;
-		t1 = props$1;
-		t2 = mergeStyles(props(groupStyles.root), props$1);
+		t1 = escapeKeyBehavior;
+		t2 = props$1;
+		t3 = mergeStyles(props(groupStyles.root), props$1);
 		$[0] = t0;
 		$[1] = T0;
 		$[2] = children;
@@ -94,10 +115,12 @@ function ChipGroup(t0) {
 		$[5] = invalid;
 		$[6] = items;
 		$[7] = label;
-		$[8] = removeLabel;
-		$[9] = renderEmptyState;
-		$[10] = t1;
-		$[11] = t2;
+		$[8] = props$1;
+		$[9] = removeLabel;
+		$[10] = renderEmptyState;
+		$[11] = t1;
+		$[12] = t2;
+		$[13] = t3;
 	} else {
 		T0 = $[1];
 		children = $[2];
@@ -106,91 +129,107 @@ function ChipGroup(t0) {
 		invalid = $[5];
 		items = $[6];
 		label = $[7];
-		removeLabel = $[8];
-		renderEmptyState = $[9];
-		t1 = $[10];
-		t2 = $[11];
+		props$1 = $[8];
+		removeLabel = $[9];
+		renderEmptyState = $[10];
+		t1 = $[11];
+		t2 = $[12];
+		t3 = $[13];
 	}
-	const t3 = invalid ? LABEL_STATE_INVALID : LABEL_STATE_VALID;
-	let t4;
-	if ($[12] !== label || $[13] !== t3) {
-		t4 = /* @__PURE__ */ jsx(FieldLabel, {
-			state: t3,
+	const t4 = invalid ? LABEL_STATE_INVALID : LABEL_STATE_VALID;
+	let t5;
+	if ($[14] !== label || $[15] !== t4) {
+		t5 = /* @__PURE__ */ jsx(FieldLabel, {
+			state: t4,
 			variant: "group",
 			children: label
 		});
-		$[12] = label;
-		$[13] = t3;
-		$[14] = t4;
-	} else t4 = $[14];
-	let t5;
-	if ($[15] === Symbol.for("react.memo_cache_sentinel")) {
-		t5 = props(styles.list, focus.ring);
-		$[15] = t5;
-	} else t5 = $[15];
-	let t6;
-	if ($[16] !== children || $[17] !== items || $[18] !== renderEmptyState) {
-		t6 = /* @__PURE__ */ jsx(TagList, {
+		$[14] = label;
+		$[15] = t4;
+		$[16] = t5;
+	} else t5 = $[16];
+	const t6 = props$1.onAction !== void 0;
+	let t7;
+	if ($[17] === Symbol.for("react.memo_cache_sentinel")) {
+		t7 = props(styles.list, focus.ring);
+		$[17] = t7;
+	} else t7 = $[17];
+	let t8;
+	if ($[18] !== children || $[19] !== items || $[20] !== renderEmptyState) {
+		t8 = /* @__PURE__ */ jsx(TagList, {
 			items,
 			renderEmptyState,
-			...t5,
+			...t7,
 			children
 		});
-		$[16] = children;
-		$[17] = items;
-		$[18] = renderEmptyState;
-		$[19] = t6;
-	} else t6 = $[19];
-	let t7;
-	if ($[20] !== removeLabel || $[21] !== t6) {
-		t7 = /* @__PURE__ */ jsx(RemoveLabelContext, {
+		$[18] = children;
+		$[19] = items;
+		$[20] = renderEmptyState;
+		$[21] = t8;
+	} else t8 = $[21];
+	let t9;
+	if ($[22] !== t6 || $[23] !== t8) {
+		t9 = /* @__PURE__ */ jsx(GroupActionContext, {
+			value: t6,
+			children: t8
+		});
+		$[22] = t6;
+		$[23] = t8;
+		$[24] = t9;
+	} else t9 = $[24];
+	let t10;
+	if ($[25] !== removeLabel || $[26] !== t9) {
+		t10 = /* @__PURE__ */ jsx(RemoveLabelContext, {
 			value: removeLabel,
-			children: t6
+			children: t9
 		});
-		$[20] = removeLabel;
-		$[21] = t6;
-		$[22] = t7;
-	} else t7 = $[22];
-	let t8;
-	if ($[23] !== description || $[24] !== error) {
-		t8 = /* @__PURE__ */ jsx(FieldMessage, {
+		$[25] = removeLabel;
+		$[26] = t9;
+		$[27] = t10;
+	} else t10 = $[27];
+	let t11;
+	if ($[28] !== description || $[29] !== error) {
+		t11 = /* @__PURE__ */ jsx(FieldMessage, {
 			description,
 			error,
 			inset: false
 		});
-		$[23] = description;
-		$[24] = error;
-		$[25] = t8;
-	} else t8 = $[25];
-	let t9;
-	if ($[26] !== T0 || $[27] !== t1 || $[28] !== t2 || $[29] !== t4 || $[30] !== t7 || $[31] !== t8) {
-		t9 = /* @__PURE__ */ jsxs(T0, {
-			...t1,
+		$[28] = description;
+		$[29] = error;
+		$[30] = t11;
+	} else t11 = $[30];
+	let t12;
+	if ($[31] !== T0 || $[32] !== t1 || $[33] !== t10 || $[34] !== t11 || $[35] !== t2 || $[36] !== t3 || $[37] !== t5) {
+		t12 = /* @__PURE__ */ jsxs(T0, {
+			escapeKeyBehavior: t1,
 			...t2,
+			...t3,
 			children: [
-				t4,
-				t7,
-				t8
+				t5,
+				t10,
+				t11
 			]
 		});
-		$[26] = T0;
-		$[27] = t1;
-		$[28] = t2;
-		$[29] = t4;
-		$[30] = t7;
-		$[31] = t8;
-		$[32] = t9;
-	} else t9 = $[32];
-	return t9;
+		$[31] = T0;
+		$[32] = t1;
+		$[33] = t10;
+		$[34] = t11;
+		$[35] = t2;
+		$[36] = t3;
+		$[37] = t5;
+		$[38] = t12;
+	} else t12 = $[38];
+	return t12;
 }
 /**
 * One chip. Give every chip an `id` — that is the key selection and removal
 * are reported by.
 */
 function ChipGroupChip(t0) {
-	const $ = c(18);
+	const $ = c(19);
 	const { children, icon, onContextMenu, onPointerCancel, onPointerDown, onPointerLeave, onPointerUp, ...props } = t0;
 	const removeLabel = useContext(RemoveLabelContext);
+	const acts = useContext(GroupActionContext) || props.onAction !== void 0 || props.href !== void 0;
 	let t1;
 	if ($[0] !== onContextMenu || $[1] !== onPointerCancel || $[2] !== onPointerDown || $[3] !== onPointerLeave || $[4] !== onPointerUp) {
 		t1 = {
@@ -211,18 +250,19 @@ function ChipGroupChip(t0) {
 	const T0 = Tag;
 	const t2 = props.textValue ?? textOf(children);
 	const t3 = ripple.handlers;
-	const t4 = mergeStatefulStyles(groupChipPropsFor, props);
+	const t4 = mergeStatefulStyles(acts ? actingChipPropsFor : groupChipPropsFor, props);
 	let t5;
-	if ($[6] !== children || $[7] !== icon || $[8] !== removeLabel || $[9] !== ripple.surface) {
-		t5 = chipContent(children, icon, removeLabel, ripple.surface);
-		$[6] = children;
-		$[7] = icon;
-		$[8] = removeLabel;
-		$[9] = ripple.surface;
-		$[10] = t5;
-	} else t5 = $[10];
+	if ($[6] !== acts || $[7] !== children || $[8] !== icon || $[9] !== removeLabel || $[10] !== ripple.surface) {
+		t5 = chipContent(children, icon, removeLabel, ripple.surface, acts);
+		$[6] = acts;
+		$[7] = children;
+		$[8] = icon;
+		$[9] = removeLabel;
+		$[10] = ripple.surface;
+		$[11] = t5;
+	} else t5 = $[11];
 	let t6;
-	if ($[11] !== T0 || $[12] !== props || $[13] !== ripple.handlers || $[14] !== t2 || $[15] !== t4 || $[16] !== t5) {
+	if ($[12] !== T0 || $[13] !== props || $[14] !== ripple.handlers || $[15] !== t2 || $[16] !== t4 || $[17] !== t5) {
 		t6 = /* @__PURE__ */ jsx(T0, {
 			textValue: t2,
 			...t3,
@@ -230,18 +270,18 @@ function ChipGroupChip(t0) {
 			...t4,
 			children: t5
 		});
-		$[11] = T0;
-		$[12] = props;
-		$[13] = ripple.handlers;
-		$[14] = t2;
-		$[15] = t4;
-		$[16] = t5;
-		$[17] = t6;
-	} else t6 = $[17];
+		$[12] = T0;
+		$[13] = props;
+		$[14] = ripple.handlers;
+		$[15] = t2;
+		$[16] = t4;
+		$[17] = t5;
+		$[18] = t6;
+	} else t6 = $[18];
 	return t6;
 }
 function groupChipPropsFor(state) {
-	return chipPropsFor(state);
+	return chipPropsFor(state, { inert: state.selectionMode === "none" });
 }
 ChipGroup.Chip = ChipGroupChip;
 //#endregion

package/dist/components/chip-group/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["c","_c","ReactElement","ReactNode","RefAttributes","TagGroupProps","RACTagGroupProps","TagListProps","RACTagListProps","TagProps","RACTagProps","TagRenderProps","stylex","createContext","useContext","Button","RACButton","Tag","RACTag","TagGroup","RACTagGroup","TagList","RACTagList","chipGlyph","chipLabel","chipPropsFor","chipRemoveClassName","chipStyles","textOf","FieldLabel","FieldMessage","invalidFrom","groupStyles","CloseGlyph","useRipple","focus","mergeStatefulStyles","mergeStyles","sizing","spacing","styles","list","kB7OPa","k1xSpc","kwnvtZ","kOIVth","kAzted","$$css","ChipGroupChipProps","Omit","children","className","icon","style","ChipGroupProps","item","T","description","error","label","removeLabel","Pick","chipContent","surface","state","selectionMode","isDisabled","allowsRemoving","props","removeGlyph","RemoveLabelContext","undefined","LABEL_STATE_VALID","isInvalid","LABEL_STATE_INVALID","ChipGroup","t0","$","T0","invalid","items","renderEmptyState","t1","t2","t3","t4","t5","t6","t7","t8","t9","root","Symbol","for","ring","ChipGroupChip","onContextMenu","onPointerCancel","onPointerDown","onPointerLeave","onPointerUp","ripple","textValue","handlers","groupChipPropsFor","Chip","RACButton","stylex.props","_c","props","RACTagGroup","RACTagList","RACTag"],"sources":["../../../src/components/chip-group/index.tsx"],"sourcesContent":["'use client';\n\nimport type { ReactElement, ReactNode, RefAttributes } from 'react';\nimport type { TagGroupProps as RACTagGroupProps, TagListProps as RACTagListProps, TagProps as RACTagProps, TagRenderProps } from 'react-aria-components';\nimport * as stylex from '@stylexjs/stylex';\nimport { createContext, useContext } from 'react';\nimport { Button as RACButton, Tag as RACTag, TagGroup as RACTagGroup, TagList as RACTagList } from 'react-aria-components';\nimport { chipGlyph, chipLabel, chipPropsFor, chipRemoveClassName } from '../../chip';\nimport { chipStyles } from '../../chip/styles';\nimport { textOf } from '../../collection/text';\nimport { FieldLabel, FieldMessage } from '../../field';\nimport { invalidFrom } from '../../field/root';\nimport { groupStyles } from '../../field/styles';\nimport { CloseGlyph } from '../../glyphs';\nimport { useRipple } from '../../hooks/useRipple';\nimport { focus } from '../../styles/focus';\nimport { mergeStatefulStyles, mergeStyles } from '../../styles/merge';\nimport '../../tokens/design.tokens.stylex';\nimport { sizing, spacing } from '../../tokens/design.tokens.stylex';\n\n// The chips page's filter and input chips as a set: one or more chosen from a\n// row, each one removable. The pill is the chip module's in `src/chip`,\n// shared with the standalone Chip, so the two cannot drift; what is here is\n// the group around them.\n//\n// Three things it adds over a row of Chips.\n//\n// **It is a group, not a row of buttons.** React Aria's `TagGroup` names the\n// set, describes it, reports it invalid as a whole, and moves between its\n// chips with the arrow keys rather than making each one a tab stop — which\n// is what a set of a dozen filters needs. The label, the supporting line and\n// the error are the field chrome's, so a group reads like the fields beside\n// it, exactly as CheckboxGroup and RadioGroup do.\n//\n// **A chip can be removed.** Give the group `onRemove` and each chip draws\n// the page's trailing close target, an 18dp glyph in a target of its own so a\n// press there removes rather than toggles. Backspace and Delete remove the\n// focused chip too, which is React Aria's. A chosen chip's check sits at the\n// other end, so a chip that is both selected and removable carries one glyph\n// on each side of its label.\n//\n// **Selection is the group's, not each chip's.** `selectionMode` and\n// `selectedKeys` live on the group, so a set that chooses one of its chips\n// and a set that chooses several are the same component with a different\n// word. A chip on its own that toggles nothing else is still Chip.\n//\n// One thing is worth knowing about how this maps onto React Aria. A chip's\n// text value is read off its children and found only when they are a plain\n// string, and a chip here is always an element — the label sits beside a\n// close target. So a plain-string label is passed through as the text value,\n// which is what typeahead and a screen reader's announcement are made of;\n// see ListBox.Item, where the same thing bit.\n\nconst styles = {\n  list: {\n    kB7OPa: \"x9f619\",\n    k1xSpc: \"x78zum5\",\n    kwnvtZ: \"x1a02dak\",\n    kOIVth: \"x126z3so\",\n    kAzted: \"xlzjxrf\",\n    $$css: true\n  }\n};\ntype ChipGroupChipProps = Omit<RACTagProps, 'children' | 'className' | 'style'> & {\n  /** The chip's label. */\n  children?: ReactNode;\n  /** A function may compute the class from the chip's render state. */\n  className?: RACTagProps['className'];\n  /**\n   * An icon before the label, in the page's 18dp slot and the primary role.\n   * The check takes its place while the chip is chosen, so the chip keeps\n   * its width. An icon drawn in `em` takes its size from the slot.\n   */\n  icon?: ReactNode;\n  /** A function may compute the style from the chip's render state. */\n  style?: RACTagProps['style'];\n};\ntype ChipGroupProps<T extends object = object> = {\n  /**\n   * The chips, each with an `id` of its own. With `items`, a function from an\n   * item to its chip, which React Aria calls for each item in turn.\n   */\n  children?: ((item: T) => ReactElement) | ReactNode;\n  /**\n   * A hint under the group. Replaced by `error` when there is one, so the\n   * two never stack.\n   */\n  description?: string;\n  /**\n   * The problem with the current selection, in words. Its presence is what\n   * puts the group in its error state — the message and `aria-invalid` both\n   * follow from it.\n   *\n   * Outside a `Form` the message line arrives with the message, so the\n   * field grows when this does and moves what is under it. A `Form` holds\n   * that space from the start; so does a permanent `description`.\n   */\n  error?: string;\n  /**\n   * What the group is for. Required rather than optional: a set of chips\n   * with no name is a row a screen reader cannot introduce.\n   */\n  label: string;\n  /**\n   * What the close target on each chip is called, for a screen reader. React\n   * Aria adds the chip's own label after it, so this is the verb rather than\n   * the whole phrase — \"Remove\" becomes \"Remove First item\". Left out, React\n   * Aria names it in the reader's locale — \"Remove\" in English.\n   */\n  removeLabel?: string;\n} & Omit<RACTagGroupProps, 'children'> & Pick<RACTagListProps<T>, 'items' | 'renderEmptyState'>;\n\n// What the chip draws, from React Aria's render state. Built by a call rather\n// than written inline at the prop, which is what react-perf's\n// no-new-function-as-prop is after; the React Compiler memoises the result on\n// its inputs.\n//\n// The check and the icon it replaces are the chip module's, so a chip in a\n// group and a chip on its own draw the same ones. The close target is drawn\n// only where the group allows removing, which React Aria reports rather than\n// the call site saying so on every chip.\n//\n// The ripple is drawn only on a chip a press does something to: one the\n// group lets be selected, and not disabled. A chip in a group that selects\n// nothing is a control only for its close target, and React Aria reports\n// neither hover nor press on it, so a ripple there would answer a press that\n// changes nothing.\nfunction chipContent(children: ReactNode, icon: ReactNode, removeLabel: string | undefined, surface: ReactNode) {\n  return (state: TagRenderProps) => <>\n      {chipGlyph(state, icon)}\n      {chipLabel(children)}\n      {state.selectionMode !== 'none' && !state.isDisabled ? surface : null}\n      {state.allowsRemoving ? <RACButton aria-label={removeLabel} className={chipRemoveClassName} slot=\"remove\">\n          <CloseGlyph {...stylex.props(chipStyles.removeGlyph)} />\n        </RACButton> : null}\n    </>;\n}\n\n// What each chip calls its close target. A context rather than a prop on the\n// chip, since it is the group's decision and repeating it on every chip is\n// how the two drift. Undefined unless the group is given one, which leaves\n// the name React Aria gives in the reader's locale.\nconst RemoveLabelContext = createContext<string | undefined>(undefined);\n\n// Hoisted so neither is a new object on every render.\nconst LABEL_STATE_VALID = {\n  isInvalid: false\n};\nconst LABEL_STATE_INVALID = {\n  isInvalid: true\n};\n\n/**\n * A labelled set of chips, one or more of which can be chosen, each of which\n * can be removed. Selection is React Aria's: set `selectionMode` to `single`\n * or `multiple` and pass `selectedKeys` with `onSelectionChange` to control\n * it, or `defaultSelectedKeys` to let it keep its own.\n *\n * ```tsx\n * <ChipGroup label=\"Label\" selectionMode=\"multiple\" onRemove={remove}>\n *   <ChipGroup.Chip id=\"first\">First item</ChipGroup.Chip>\n * </ChipGroup>\n * ```\n *\n * Give the group `onRemove` and each chip draws a close target. The arrow\n * keys move between chips, so a set of many is one tab stop rather than many.\n *\n * A chip that toggles nothing else is Chip; this is for a set that shares a\n * value.\n *\n * The call site's `className` and `style` land on the group as a whole,\n * which is the element a layout positions.\n */\nfunction ChipGroup<T extends object = object>({\n  children,\n  description,\n  error,\n  items,\n  label,\n  removeLabel,\n  renderEmptyState,\n  ...props\n}: ChipGroupProps<T> & RefAttributes<HTMLDivElement>) {\n  const invalid = invalidFrom(error);\n  return <RACTagGroup {...props} {...mergeStyles(stylex.props(groupStyles.root), props)}>\n      {/* React Aria's tag group has no disabled state of its own — a chip is\n          disabled through the group's `disabledKeys` — so the label follows\n          validity alone. */}\n      <FieldLabel state={invalid ? LABEL_STATE_INVALID : LABEL_STATE_VALID} variant=\"group\">\n        {label}\n      </FieldLabel>\n      <RemoveLabelContext value={removeLabel}>\n        <RACTagList<T> items={items} renderEmptyState={renderEmptyState} {...stylex.props(styles.list, focus.ring)}>\n          {children}\n        </RACTagList>\n      </RemoveLabelContext>\n      <FieldMessage description={description} error={error} inset={false} />\n    </RACTagGroup>;\n}\n\n/**\n * One chip. Give every chip an `id` — that is the key selection and removal\n * are reported by.\n */\nfunction ChipGroupChip({\n  children,\n  icon,\n  onContextMenu,\n  onPointerCancel,\n  onPointerDown,\n  onPointerLeave,\n  onPointerUp,\n  ...props\n}: ChipGroupChipProps & RefAttributes<HTMLDivElement>) {\n  const removeLabel = useContext(RemoveLabelContext);\n  // The press ripple a list's rows draw — see ListItem there. A chip in a\n  // group is a collection row, whose clicks React Aria keeps for itself, so\n  // the press ends when the pointer is released rather than on a click.\n  const ripple = useRipple<HTMLDivElement>(true, {\n    onContextMenu,\n    onPointerCancel,\n    onPointerDown,\n    onPointerLeave,\n    onPointerUp\n  }, true);\n  return <RACTag textValue={props.textValue ?? textOf(children)} {...ripple.handlers} {...props} {...mergeStatefulStyles(groupChipPropsFor, props)}>\n      {chipContent(children, icon, removeLabel, ripple.surface)}\n    </RACTag>;\n}\n\n// The pill a standalone Chip draws, from `src/chip`, touch target included:\n// every chip's reaches halfway across the gap its rows wrap at.\nfunction groupChipPropsFor(state: TagRenderProps) {\n  return chipPropsFor(state);\n}\nChipGroup.Chip = ChipGroupChip;\nexport type { ChipGroupChipProps, ChipGroupProps };\nexport { ChipGroupChip };\nexport default ChipGroup;"],"mappings":"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"}
+{"version":3,"file":"index.js","names":["c","_c","ReactElement","ReactNode","RefAttributes","TagGroupProps","RACTagGroupProps","TagListProps","RACTagListProps","TagProps","RACTagProps","TagRenderProps","stylex","createContext","useContext","Button","RACButton","Tag","RACTag","TagGroup","RACTagGroup","TagList","RACTagList","chipGlyph","chipLabel","chipPropsFor","chipRemoveClassName","chipStyles","textOf","FieldLabel","FieldMessage","invalidFrom","groupStyles","CloseGlyph","useRipple","focus","mergeStatefulStyles","mergeStyles","sizing","spacing","styles","list","kB7OPa","k1xSpc","kwnvtZ","kOIVth","kAzted","$$css","ChipGroupChipProps","children","className","icon","style","textValue","Omit","ChipGroupProps","item","T","description","error","escapeKeyBehavior","label","removeLabel","Pick","chipContent","surface","acts","state","selectionMode","isDisabled","props","surfaceCorners","allowsRemoving","removeGlyph","RemoveLabelContext","undefined","GroupActionContext","LABEL_STATE_VALID","isInvalid","LABEL_STATE_INVALID","actingChipPropsFor","ChipGroup","t0","$","T0","invalid","items","renderEmptyState","t1","t2","t3","t4","t5","t6","t7","t8","t9","t10","t11","t12","root","onAction","Symbol","for","ring","ChipGroupChip","onContextMenu","onPointerCancel","onPointerDown","onPointerLeave","onPointerUp","href","ripple","handlers","groupChipPropsFor","inert","Chip","stylex.props","RACButton","_c","props","RACTagGroup","RACTagList","RACTag"],"sources":["../../../src/components/chip-group/index.tsx"],"sourcesContent":["'use client';\n\nimport type { ReactElement, ReactNode, RefAttributes } from 'react';\nimport type { TagGroupProps as RACTagGroupProps, TagListProps as RACTagListProps, TagProps as RACTagProps, TagRenderProps } from 'react-aria-components';\nimport * as stylex from '@stylexjs/stylex';\nimport { createContext, useContext } from 'react';\nimport { Button as RACButton, Tag as RACTag, TagGroup as RACTagGroup, TagList as RACTagList } from 'react-aria-components';\nimport { chipGlyph, chipLabel, chipPropsFor, chipRemoveClassName } from '../../chip';\nimport { chipStyles } from '../../chip/styles';\nimport { textOf } from '../../collection/text';\nimport { FieldLabel, FieldMessage } from '../../field';\nimport { invalidFrom } from '../../field/root';\nimport { groupStyles } from '../../field/styles';\nimport { CloseGlyph } from '../../glyphs';\nimport { useRipple } from '../../hooks/useRipple';\nimport { focus } from '../../styles/focus';\nimport { mergeStatefulStyles, mergeStyles } from '../../styles/merge';\nimport '../../tokens/design.tokens.stylex';\nimport { sizing, spacing } from '../../tokens/design.tokens.stylex';\n\n// The chips page's filter and input chips as a set: one or more chosen from a\n// row, each one removable. The pill is the chip module's in `src/chip`,\n// shared with the standalone Chip, so the two cannot drift; what is here is\n// the group around them.\n//\n// Three things it adds over a row of Chips.\n//\n// **It is a group, not a row of buttons.** React Aria's `TagGroup` names the\n// set, describes it, reports it invalid as a whole, and moves between its\n// chips with the arrow keys rather than making each one a tab stop — which\n// is what a set of a dozen filters needs. The label, the supporting line and\n// the error are the field chrome's, so a group reads like the fields beside\n// it, exactly as CheckboxGroup and RadioGroup do.\n//\n// **A chip can be removed.** Give the group `onRemove` and each chip draws\n// the page's trailing close target, an 18dp glyph in a target of its own so a\n// press there removes rather than toggles. Backspace and Delete remove the\n// focused chip too, which is React Aria's. A chosen chip's check sits at the\n// other end, so a chip that is both selected and removable carries one glyph\n// on each side of its label.\n//\n// **Selection is the group's, not each chip's.** `selectionMode` and\n// `selectedKeys` live on the group, so a set that chooses one of its chips\n// and a set that chooses several are the same component with a different\n// word. A chip on its own that toggles nothing else is still Chip.\n//\n// **Escape leaves the selection alone.** React Aria's collections clear the\n// selection on Escape and stop the key there, which suits a list whose\n// selection is what an action is about to act on. A set of chips holds a\n// value, as a checkbox group does, and usually sits in a Sheet, Dialog or\n// Popover, where Escape is what dismisses it: clearing it there wiped the\n// reader's filters and took a second press to close. So the group passes\n// React Aria's `escapeKeyBehavior` as `none` unless told `clearSelection`.\n//\n// **A chip a press does nothing to does not look pressable.** In a group\n// that selects nothing, a chip with no action of its own or the group's is\n// a control only for its close target. It draws the arrow cursor, no layer\n// and no ripple, and its close target keeps the pointer. A disabled chip's\n// close target takes the chip's `not-allowed` with it.\n//\n// One thing is worth knowing about how this maps onto React Aria. A chip's\n// text value is read off its children and found only when they are a plain\n// string, and a chip here is always an element — the label sits beside a\n// close target. So a plain-string label is passed through as the text value,\n// which is what typeahead and a screen reader's announcement are made of;\n// see ListBox.Item, where the same thing bit.\n\nconst styles = {\n  list: {\n    kB7OPa: \"x9f619\",\n    k1xSpc: \"x78zum5\",\n    kwnvtZ: \"x1a02dak\",\n    kOIVth: \"x126z3so\",\n    kAzted: \"xlzjxrf\",\n    $$css: true\n  }\n};\ntype ChipGroupChipProps = {\n  /**\n   * The chip's label. Text, numbers, or a mix of the two — `Label {3}` —\n   * also name the chip; a label holding an element needs `textValue`.\n   */\n  children?: ReactNode;\n  /** A function may compute the class from the chip's render state. */\n  className?: RACTagProps['className'];\n  /**\n   * An icon before the label, in the page's 18dp slot and the primary role.\n   * The check takes its place while the chip is chosen, so the chip keeps\n   * its width. An icon drawn in `em` takes its size from the slot.\n   */\n  icon?: ReactNode;\n  /** A function may compute the style from the chip's render state. */\n  style?: RACTagProps['style'];\n  /**\n   * The chip's name as text, which is what a screen reader announces for\n   * its row. Read from the label when that is text or numbers, so it is\n   * needed only when the label holds an element — emphasis, a count in a\n   * badge — and React Aria warns in the console when such a chip has none.\n   * Given, it wins over the text read from the label.\n   */\n  textValue?: string;\n} & Omit<RACTagProps, 'children' | 'className' | 'style' | 'textValue'>;\ntype ChipGroupProps<T extends object = object> = {\n  /**\n   * The chips, each with an `id` of its own. With `items`, a function from an\n   * item to its chip, which React Aria calls for each item in turn.\n   */\n  children?: ((item: T) => ReactElement) | ReactNode;\n  /**\n   * A hint under the group. Replaced by `error` when there is one, so the\n   * two never stack.\n   */\n  description?: string;\n  /**\n   * The problem with the current selection, in words. Its presence is what\n   * puts the group in its error state — the message and `aria-invalid` both\n   * follow from it.\n   *\n   * Outside a `Form` the message line arrives with the message, so the\n   * field grows when this does and moves what is under it. A `Form` holds\n   * that space from the start; so does a permanent `description`.\n   */\n  error?: string;\n  /**\n   * What Escape does on a chip. `none`, the default, keeps the selection and\n   * lets the key through to whatever is around the group, so a group in a\n   * Sheet, Dialog or Popover closes it on the first press. `clearSelection`\n   * empties the selection first, as React Aria's own default does, and lets\n   * a second press through.\n   *\n   * @default 'none'\n   */\n  escapeKeyBehavior?: 'clearSelection' | 'none';\n  /**\n   * What the group is for. Required rather than optional: a set of chips\n   * with no name is a row a screen reader cannot introduce.\n   */\n  label: string;\n  /**\n   * What the close target on each chip is called, for a screen reader. React\n   * Aria adds the chip's own label after it, so this is the verb rather than\n   * the whole phrase — \"Remove\" becomes \"Remove First item\". Left out, React\n   * Aria names it in the reader's locale — \"Remove\" in English.\n   */\n  removeLabel?: string;\n} & Omit<RACTagGroupProps, 'children' | 'escapeKeyBehavior'> & Pick<RACTagListProps<T>, 'items' | 'renderEmptyState'>;\n\n// What the chip draws, from React Aria's render state. Built by a call rather\n// than written inline at the prop, which is what react-perf's\n// no-new-function-as-prop is after; the React Compiler memoises the result on\n// its inputs.\n//\n// The check and the icon it replaces are the chip module's, so a chip in a\n// group and a chip on its own draw the same ones. The close target is drawn\n// only where the group allows removing, which React Aria reports rather than\n// the call site saying so on every chip.\n//\n// The ripple is drawn only on a chip a press does something to, and not\n// disabled: one the group lets be selected, or one with an action, its own\n// or the group's. Any other chip in a group that selects nothing is a\n// control only for its close target, and React Aria reports neither hover\n// nor press on it, so a ripple there would answer a press that changes\n// nothing. `acts` is the action half, which the render state does not carry.\n//\n// It sits in a box of its own carrying the chip's corner, since React Aria's\n// cell between the chip and this content would otherwise hand the ripple a\n// square one to inherit; see the header of src/chip/styles.ts.\nfunction chipContent(children: ReactNode, icon: ReactNode, removeLabel: string | undefined, surface: ReactNode, acts: boolean) {\n  return (state: TagRenderProps) => <>\n      {chipGlyph(state, icon, state.selectionMode !== 'none')}\n      {chipLabel(children)}\n      {(acts || state.selectionMode !== 'none') && !state.isDisabled ? <span {...stylex.props(chipStyles.surfaceCorners)}>{surface}</span> : null}\n      {state.allowsRemoving ? <RACButton aria-label={removeLabel} className={chipRemoveClassName} slot=\"remove\">\n          <CloseGlyph {...stylex.props(chipStyles.removeGlyph)} />\n        </RACButton> : null}\n    </>;\n}\n\n// What each chip calls its close target. A context rather than a prop on the\n// chip, since it is the group's decision and repeating it on every chip is\n// how the two drift. Undefined unless the group is given one, which leaves\n// the name React Aria gives in the reader's locale.\nconst RemoveLabelContext = createContext<string | undefined>(undefined);\n\n// Whether the group was given `onAction`, which makes every chip in it\n// pressable whether or not it selects. A context for the reason the close\n// target's name is one.\nconst GroupActionContext = createContext(false);\n\n// Hoisted so neither is a new object on every render.\nconst LABEL_STATE_VALID = {\n  isInvalid: false\n};\nconst LABEL_STATE_INVALID = {\n  isInvalid: true\n};\n\n// The pill of a chip with an action, which a press always reaches.\nfunction actingChipPropsFor(state: TagRenderProps) {\n  return chipPropsFor(state);\n}\n\n/**\n * A labelled set of chips, one or more of which can be chosen, each of which\n * can be removed. Selection is React Aria's: set `selectionMode` to `single`\n * or `multiple` and pass `selectedKeys` with `onSelectionChange` to control\n * it, or `defaultSelectedKeys` to let it keep its own.\n *\n * ```tsx\n * <ChipGroup label=\"Label\" selectionMode=\"multiple\" onRemove={remove}>\n *   <ChipGroup.Chip id=\"first\">First item</ChipGroup.Chip>\n * </ChipGroup>\n * ```\n *\n * Give the group `onRemove` and each chip draws a close target. The arrow\n * keys move between chips, so a set of many is one tab stop rather than many.\n *\n * A chip is never wider than its row, so a label with no room ends in an\n * ellipsis rather than wrapping, and shows its full text in the browser's\n * tooltip on hover.\n *\n * Escape on a chip keeps the selection and reaches whatever is around the\n * group, so a group in a Sheet, Dialog or Popover closes it. Pass\n * `escapeKeyBehavior=\"clearSelection\"` for React Aria's own default, which\n * empties the selection on the first press and lets the second through.\n *\n * A chip that toggles nothing else is Chip; this is for a set that shares a\n * value.\n *\n * The call site's `className` and `style` land on the group as a whole,\n * which is the element a layout positions.\n */\nfunction ChipGroup<T extends object = object>({\n  children,\n  description,\n  error,\n  escapeKeyBehavior = 'none',\n  items,\n  label,\n  removeLabel,\n  renderEmptyState,\n  ...props\n}: ChipGroupProps<T> & RefAttributes<HTMLDivElement>) {\n  const invalid = invalidFrom(error);\n  return <RACTagGroup escapeKeyBehavior={escapeKeyBehavior} {...props} {...mergeStyles(stylex.props(groupStyles.root), props)}>\n      {/* React Aria's tag group has no disabled state of its own — a chip is\n          disabled through the group's `disabledKeys` — so the label follows\n          validity alone. */}\n      <FieldLabel state={invalid ? LABEL_STATE_INVALID : LABEL_STATE_VALID} variant=\"group\">\n        {label}\n      </FieldLabel>\n      <RemoveLabelContext value={removeLabel}>\n        <GroupActionContext value={props.onAction !== undefined}>\n          <RACTagList<T> items={items} renderEmptyState={renderEmptyState} {...stylex.props(styles.list, focus.ring)}>\n            {children}\n          </RACTagList>\n        </GroupActionContext>\n      </RemoveLabelContext>\n      <FieldMessage description={description} error={error} inset={false} />\n    </RACTagGroup>;\n}\n\n/**\n * One chip. Give every chip an `id` — that is the key selection and removal\n * are reported by.\n */\nfunction ChipGroupChip({\n  children,\n  icon,\n  onContextMenu,\n  onPointerCancel,\n  onPointerDown,\n  onPointerLeave,\n  onPointerUp,\n  ...props\n}: ChipGroupChipProps & RefAttributes<HTMLDivElement>) {\n  const removeLabel = useContext(RemoveLabelContext);\n  // An action of its own, a link or the group's makes a chip pressable even\n  // in a group that selects nothing, as React Aria treats it.\n  const acts = useContext(GroupActionContext) || props.onAction !== undefined || props.href !== undefined;\n  // The press ripple a list's rows draw — see ListItem there. A chip in a\n  // group is a collection row, whose clicks React Aria keeps for itself, so\n  // the press ends when the pointer is released rather than on a click.\n  const ripple = useRipple<HTMLDivElement>(true, {\n    onContextMenu,\n    onPointerCancel,\n    onPointerDown,\n    onPointerLeave,\n    onPointerUp\n  }, true);\n  return <RACTag textValue={props.textValue ?? textOf(children)} {...ripple.handlers} {...props} {...mergeStatefulStyles(acts ? actingChipPropsFor : groupChipPropsFor, props)}>\n      {chipContent(children, icon, removeLabel, ripple.surface, acts)}\n    </RACTag>;\n}\n\n// The pill a standalone Chip draws, from `src/chip`, touch target included:\n// every chip's reaches halfway across the gap its rows wrap at. Inert where\n// the group selects nothing and the chip has no action — see the header.\nfunction groupChipPropsFor(state: TagRenderProps) {\n  return chipPropsFor(state, {\n    inert: state.selectionMode === 'none'\n  });\n}\nChipGroup.Chip = ChipGroupChip;\nexport type { ChipGroupChipProps, ChipGroupProps };\nexport { ChipGroupChip };\nexport default ChipGroup;"],"mappings":"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"}

package/dist/components/copy-field/index.js

@@ -94,7 +94,7 @@ function CopyField(t0) {
 		$[5] = t3;
 	} else t3 = $[5];
 	const handleCopy = t3;
-	const t4 = mergeStyles({ className: "x6s0dn4 x14s9m32 x1fwvt7v x1xdvaa9 x1y0btm7 xmkeg23 x9f619 x78zum5 x126z3so xmqoko8 x18fpw6u" }, props);
+	const t4 = mergeStyles({ className: "x6s0dn4 x14s9m32 x1fwvt7v x1xdvaa9 x1y0btm7 xmkeg23 x9f619 x78zum5 x126z3so x1cmllll xq7elwu xwde665" }, props);
 	let t5;
 	if ($[6] !== value) {
 		t5 = /* @__PURE__ */ jsx("span", {