@kanso-labs/kanso-ui 0.35.0 → 0.37.0

package/dist/components/chip/index.js

@@ -1,80 +1,191 @@
 "use client";
-import { props } from "../../node_modules/@stylexjs/stylex/lib/es/stylex.js";
 import { mergeStatefulStyles } from "../../styles/merge.js";
-import { ariaAttributesOf, toggleButtonRenderer } from "../../render/aria.js";
-import { focus } from "../../styles/focus.js";
-import { chipStyles } from "../../chip/styles.js";
-import { chipGlyph, chipLabel } from "../../chip/index.js";
+import { ariaAttributesOf, buttonRenderer, toggleButtonRenderer } from "../../render/aria.js";
+import { useRipple } from "../../hooks/useRipple.js";
+import { chipGlyph, chipLabel, chipPropsFor } from "../../chip/index.js";
 import { c } from "react/compiler-runtime";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { ToggleButton } from "react-aria-components";
+import { Button, ToggleButton } from "react-aria-components";
 //#region src/components/chip/index.tsx
+function ActionChip(t0) {
+	const $ = c(18);
+	const { children, elevated: t1, icon, onClick, onContextMenu, onKeyDown, onKeyUp, onPointerCancel, onPointerDown, onPointerLeave, onPointerUp, render, variant, ...props } = t0;
+	const elevated = t1 === void 0 ? false : t1;
+	const element = {
+		aria: ariaAttributesOf(props),
+		onKeyDown,
+		onKeyUp
+	};
+	let t2;
+	if ($[0] !== onClick || $[1] !== onContextMenu || $[2] !== onPointerCancel || $[3] !== onPointerDown || $[4] !== onPointerLeave || $[5] !== onPointerUp) {
+		t2 = {
+			onClick,
+			onContextMenu,
+			onPointerCancel,
+			onPointerDown,
+			onPointerLeave,
+			onPointerUp
+		};
+		$[0] = onClick;
+		$[1] = onContextMenu;
+		$[2] = onPointerCancel;
+		$[3] = onPointerDown;
+		$[4] = onPointerLeave;
+		$[5] = onPointerUp;
+		$[6] = t2;
+	} else t2 = $[6];
+	const ripple = useRipple(props.isDisabled !== true, t2);
+	const T0 = Button;
+	const t3 = buttonRenderer(element, render);
+	const t4 = ripple.handlers;
+	const t5 = mergeStatefulStyles(actionChipClasses(variant, elevated), props);
+	let t6;
+	if ($[7] !== children || $[8] !== icon || $[9] !== ripple.surface) {
+		t6 = actionChipContent(children, icon, ripple.surface);
+		$[7] = children;
+		$[8] = icon;
+		$[9] = ripple.surface;
+		$[10] = t6;
+	} else t6 = $[10];
+	let t7;
+	if ($[11] !== T0 || $[12] !== props || $[13] !== ripple.handlers || $[14] !== t3 || $[15] !== t5 || $[16] !== t6) {
+		t7 = /* @__PURE__ */ jsx(T0, {
+			render: t3,
+			...t4,
+			...props,
+			...t5,
+			children: t6
+		});
+		$[11] = T0;
+		$[12] = props;
+		$[13] = ripple.handlers;
+		$[14] = t3;
+		$[15] = t5;
+		$[16] = t6;
+		$[17] = t7;
+	} else t7 = $[17];
+	return t7;
+}
+function actionChipClasses(kind, elevated) {
+	return (state) => chipPropsFor({
+		...state,
+		isSelected: false
+	}, {
+		elevated,
+		kind
+	});
+}
+function actionChipContent(children, icon, surface) {
+	return (state) => /* @__PURE__ */ jsxs(Fragment, { children: [
+		chipGlyph({
+			isDisabled: state.isDisabled,
+			isSelected: false
+		}, icon),
+		chipLabel(children),
+		surface
+	] });
+}
 /**
-* A chip is a two-state button, so its selected state is React Aria's
-* `isSelected`: pass it with `onChange` to control it, or `defaultSelected` to
-* let it keep its own state. Selection is announced through `aria-pressed`
-* rather than a role of its own.
+* A chip. By default a filter chip, which is a two-state button, so its
+* selected state is React Aria's `isSelected`: pass it with `onChange` to
+* control it, or `defaultSelected` to let it keep its own state. Selection is
+* announced through `aria-pressed` rather than a role of its own.
+*
+* `variant="assist"` and `variant="suggestion"` draw the page's two action
+* chips instead: plain buttons, pressed with `onPress`, never selected.
 */
-function Chip(t0) {
-	const $ = c(14);
-	let T0;
-	let children;
-	let t1;
-	let t2;
+function Chip(props) {
+	const $ = c(4);
+	if (isAction(props)) {
+		let t0;
+		if ($[0] !== props) {
+			t0 = /* @__PURE__ */ jsx(ActionChip, { ...props });
+			$[0] = props;
+			$[1] = t0;
+		} else t0 = $[1];
+		return t0;
+	}
+	let t0;
+	if ($[2] !== props) {
+		t0 = /* @__PURE__ */ jsx(FilterChip, { ...props });
+		$[2] = props;
+		$[3] = t0;
+	} else t0 = $[3];
+	return t0;
+}
+function chipContent(children, icon, surface) {
+	return (state) => /* @__PURE__ */ jsxs(Fragment, { children: [
+		chipGlyph(state, icon),
+		chipLabel(children),
+		surface
+	] });
+}
+function FilterChip(t0) {
+	const $ = c(17);
+	const { children, elevated: t1, icon, onContextMenu, onKeyDown, onKeyUp, onPointerCancel, onPointerDown, onPointerLeave, onPointerUp, render, variant: t2, ...props } = t0;
+	const elevated = t1 === void 0 ? false : t1;
+	const variant = t2 === void 0 ? "filter" : t2;
+	const element = {
+		aria: ariaAttributesOf(props),
+		onKeyDown,
+		onKeyUp
+	};
 	let t3;
-	if ($[0] !== t0) {
-		const { children: t4, onKeyDown, onKeyUp, render, ...props } = t0;
-		children = t4;
-		const element = {
-			aria: ariaAttributesOf(props),
-			onKeyDown,
-			onKeyUp
+	if ($[0] !== onContextMenu || $[1] !== onPointerCancel || $[2] !== onPointerDown || $[3] !== onPointerLeave || $[4] !== onPointerUp) {
+		t3 = {
+			onContextMenu,
+			onPointerCancel,
+			onPointerDown,
+			onPointerLeave,
+			onPointerUp
 		};
-		T0 = ToggleButton;
-		t1 = toggleButtonRenderer(element, render);
-		t2 = props;
-		t3 = mergeStatefulStyles(propsFor, props);
-		$[0] = t0;
-		$[1] = T0;
-		$[2] = children;
-		$[3] = t1;
-		$[4] = t2;
+		$[0] = onContextMenu;
+		$[1] = onPointerCancel;
+		$[2] = onPointerDown;
+		$[3] = onPointerLeave;
+		$[4] = onPointerUp;
 		$[5] = t3;
-	} else {
-		T0 = $[1];
-		children = $[2];
-		t1 = $[3];
-		t2 = $[4];
-		t3 = $[5];
-	}
-	let t4;
-	if ($[6] !== children) {
-		t4 = chipContent(children);
+	} else t3 = $[5];
+	const ripple = useRipple(props.isDisabled !== true, t3);
+	const T0 = ToggleButton;
+	const t4 = toggleButtonRenderer(element, render);
+	const t5 = ripple.handlers;
+	const t6 = mergeStatefulStyles(filterChipClasses(variant, elevated), props);
+	let t7;
+	if ($[6] !== children || $[7] !== icon || $[8] !== ripple.surface) {
+		t7 = chipContent(children, icon, ripple.surface);
 		$[6] = children;
-		$[7] = t4;
-	} else t4 = $[7];
-	let t5;
-	if ($[8] !== T0 || $[9] !== t1 || $[10] !== t2 || $[11] !== t3 || $[12] !== t4) {
-		t5 = /* @__PURE__ */ jsx(T0, {
-			render: t1,
-			...t2,
-			...t3,
-			children: t4
+		$[7] = icon;
+		$[8] = ripple.surface;
+		$[9] = t7;
+	} else t7 = $[9];
+	let t8;
+	if ($[10] !== T0 || $[11] !== props || $[12] !== ripple.handlers || $[13] !== t4 || $[14] !== t6 || $[15] !== t7) {
+		t8 = /* @__PURE__ */ jsx(T0, {
+			render: t4,
+			...t5,
+			...props,
+			...t6,
+			children: t7
 		});
-		$[8] = T0;
-		$[9] = t1;
-		$[10] = t2;
-		$[11] = t3;
-		$[12] = t4;
-		$[13] = t5;
-	} else t5 = $[13];
-	return t5;
+		$[10] = T0;
+		$[11] = props;
+		$[12] = ripple.handlers;
+		$[13] = t4;
+		$[14] = t6;
+		$[15] = t7;
+		$[16] = t8;
+	} else t8 = $[16];
+	return t8;
 }
-function chipContent(children) {
-	return (state) => /* @__PURE__ */ jsxs(Fragment, { children: [chipGlyph(state.isSelected), chipLabel(children)] });
+function filterChipClasses(kind, elevated) {
+	return (state) => chipPropsFor(state, {
+		elevated,
+		kind
+	});
 }
-function propsFor(state) {
-	return props(chipStyles.base, chipStyles.target, focus.ring, state.isSelected ? chipStyles.selected : chipStyles.unselected, state.isDisabled && chipStyles.disabled, state.isDisabled && (state.isSelected ? chipStyles.disabledSelected : chipStyles.disabledUnselected));
+function isAction(props) {
+	return props.variant === "assist" || props.variant === "suggestion";
 }
 //#endregion
 export { Chip as default };

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["c","_c","ReactNode","RefAttributes","ToggleButtonProps","RACToggleButtonProps","ToggleButtonRenderProps","stylex","ToggleButton","chipGlyph","chipLabel","chipStyles","ariaAttributesOf","toggleButtonRenderer","focus","mergeStatefulStyles","ChipProps","Omit","children","Chip","t0","$","T0","t1","t2","t3","t4","onKeyDown","onKeyUp","render","props","element","aria","propsFor","chipContent","t5","state","isSelected","base","target","ring","selected","unselected","isDisabled","disabled","disabledSelected","disabledUnselected","_c","stylex.props"],"sources":["../../../src/components/chip/index.tsx"],"sourcesContent":["'use client';\n\nimport type { ReactNode, RefAttributes } from 'react';\nimport type { ToggleButtonProps as RACToggleButtonProps, ToggleButtonRenderProps } from 'react-aria-components';\nimport * as stylex from '@stylexjs/stylex';\nimport { ToggleButton } from 'react-aria-components';\nimport { chipGlyph, chipLabel } from '../../chip';\nimport { chipStyles } from '../../chip/styles';\nimport { ariaAttributesOf, toggleButtonRenderer } from '../../render/aria';\nimport { focus } from '../../styles/focus';\nimport { mergeStatefulStyles } from '../../styles/merge';\n\n// The pill, its two 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 `ToggleButton` around them, which is what makes a\n// standalone chip a two-state button rather than one of a set.\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\ntype ChipProps = 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.\n   */\n  children?: ReactNode;\n};\n\n/**\n * A chip is a two-state button, so its selected state is React Aria's\n * `isSelected`: pass it with `onChange` to control it, or `defaultSelected` to\n * let it keep its own state. Selection is announced through `aria-pressed`\n * rather than a role of its own.\n */\nfunction Chip({\n  children,\n  onKeyDown,\n  onKeyUp,\n  render,\n  ...props\n}: ChipProps & RefAttributes<HTMLButtonElement>) {\n  const element = {\n    aria: ariaAttributesOf(props),\n    onKeyDown,\n    onKeyUp\n  };\n  return <ToggleButton render={toggleButtonRenderer(element, render)} {...props} {...mergeStatefulStyles(propsFor, props)}>\n      {chipContent(children)}\n    </ToggleButton>;\n}\n\n// What the chip draws, from React Aria's render state: the check while it is\n// selected, then the label. Built by a call rather than written inline at\n// the prop, which is what react-perf's no-new-function-as-prop is after; the\n// React Compiler memoises the result on its input.\nfunction chipContent(children: ReactNode) {\n  return (state: ToggleButtonRenderProps) => <>\n      {chipGlyph(state.isSelected)}\n      {chipLabel(children)}\n    </>;\n}\n\n// StyleX has no way to target [data-selected] on the element it is styling,\n// so the selected styles cannot be chosen in CSS. React Aria's answer is to\n// let className and style be functions of the component's own render state,\n// which is what this is — and it is why an uncontrolled chip styles itself\n// correctly without this component keeping a copy of the state.\n//\n// mergeStatefulStyles takes the function rather than a computed result for\n// exactly that reason, and combines it with whatever the call site passed.\nfunction propsFor(state: ToggleButtonRenderProps) {\n  return stylex.props(chipStyles.base, chipStyles.target, focus.ring, state.isSelected ? chipStyles.selected : chipStyles.unselected, state.isDisabled && chipStyles.disabled, state.isDisabled && (state.isSelected ? chipStyles.disabledSelected : chipStyles.disabledUnselected));\n}\nexport type { ChipProps };\nexport default Chip;"],"mappings":";;;;;;;;;;;;;;;;;AA2CA,SAAAmB,KAAAC,IAAA;CAAA,MAAAC,IAAApB,EAAA,EAAA;CAAA,IAAAqB;CAAA,IAAAJ;CAAA,IAAAK;CAAA,IAAAC;CAAA,IAAAC;CAAA,IAAAJ,EAAA,OAAAD,IAAA;EAAc,MAAA,EAAAF,UAAAQ,IAAAC,WAAAC,SAAAC,QAAA,GAAAC,UAAAV;EAAAF,WAAAQ;EAOZ,MAAAK,UAAgB;GAAAC,MACRpB,iBAAiBkB,KAAK;GAACH;GAAAC;EAG/B;EACQN,KAAAd;EAAqBe,KAAAV,qBAAqBkB,SAASF,MAAM;EAAOC,KAAAA;EAAWL,KAAAV,oBAAoBkB,UAAUH,KAAK;EAACT,EAAA,KAAAD;EAAAC,EAAA,KAAAC;EAAAD,EAAA,KAAAH;EAAAG,EAAA,KAAAE;EAAAF,EAAA,KAAAG;EAAAH,EAAA,KAAAI;CAAA,OAAA;EAAAH,KAAAD,EAAA;EAAAH,WAAAG,EAAA;EAAAE,KAAAF,EAAA;EAAAG,KAAAH,EAAA;EAAAI,KAAAJ,EAAA;CAAA;CAAA,IAAAK;CAAA,IAAAL,EAAA,OAAAH,UAAA;EAClHQ,KAAAQ,YAAYhB,QAAQ;EAACG,EAAA,KAAAH;EAAAG,EAAA,KAAAK;CAAA,OAAAA,KAAAL,EAAA;CAAA,IAAAc;CAAA,IAAAd,EAAA,OAAAC,MAAAD,EAAA,OAAAE,MAAAF,EAAA,QAAAG,MAAAH,EAAA,QAAAI,MAAAJ,EAAA,QAAAK,IAAA;EADnBS,KAAA,oBAAC,IAAD;GAAsB,QAAAZ;GAAqC,GAAMO;GAAK,GAAML;GAC9EC,UAAAA;EADe,CAAA;EAEHL,EAAA,KAAAC;EAAAD,EAAA,KAAAE;EAAAF,EAAA,MAAAG;EAAAH,EAAA,MAAAI;EAAAJ,EAAA,MAAAK;EAAAL,EAAA,MAAAc;CAAA,OAAAA,KAAAd,EAAA;CAAA,OAFVc;AAEU;AAOnB,SAASD,YAAYhB,UAAqB;CACxC,QAAQkB,UAAmC,qBAAA,UAAA,EAAA,UAAA,CACtC3B,UAAU2B,MAAMC,UAAU,GAC1B3B,UAAUQ,QAAQ,CACrB,EAAA,CAAA;AACJ;AAUA,SAASe,SAASG,OAAgC;CAChD,OAAO7B,MAAaI,WAAW2B,MAAM3B,WAAW4B,QAAQzB,MAAM0B,MAAMJ,MAAMC,aAAa1B,WAAW8B,WAAW9B,WAAW+B,YAAYN,MAAMO,cAAchC,WAAWiC,UAAUR,MAAMO,eAAeP,MAAMC,aAAa1B,WAAWkC,mBAAmBlC,WAAWmC,mBAAmB;AACnR"}
+{"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  /** The chip's label. */\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.\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  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.\n  const ripple = useRipple<FocusableElement>(props.isDisabled !== true, {\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":"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"}

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

@@ -1,4 +1,4 @@
-import { ReactNode, RefAttributes } from "react";
+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'> & {
@@ -6,12 +6,21 @@ type ChipGroupChipProps = Omit<TagProps, 'children' | 'className' | 'style'> & {
   children?: ReactNode;
   /** A function may compute the class from the chip's render state. */
   className?: TagProps['className'];
+  /**
+   * An icon before the label, in the page's 18dp slot and the primary role.
+   * The check takes its place while the chip is chosen, so the chip keeps
+   * its width. An icon drawn in `em` takes its size from the slot.
+   */
+  icon?: ReactNode;
   /** A function may compute the style from the chip's render state. */
   style?: TagProps['style'];
 };
 type ChipGroupProps<T extends object = object> = {
-  /** The chips, each with an `id` of its own. */
-  children?: ReactNode;
+  /**
+   * The chips, each with an `id` of its own. With `items`, a function from an
+   * item to its chip, which React Aria calls for each item in turn.
+   */
+  children?: ((item: T) => ReactElement) | ReactNode;
   /**
    * A hint under the group. Replaced by `error` when there is one, so the
    * two never stack.
@@ -35,8 +44,8 @@ type ChipGroupProps<T extends object = object> = {
   /**
    * What the close target on each chip is called, for a screen reader. React
    * Aria adds the chip's own label after it, so this is the verb rather than
-   * the whole phrase — "Remove" becomes "Remove First item".
-   * @default 'Remove'
+   * the whole phrase — "Remove" becomes "Remove First item". Left out, React
+   * Aria names it in the reader's locale — "Remove" in English.
    */
   removeLabel?: string;
 } & Omit<TagGroupProps, 'children'> & Pick<TagListProps<T>, 'items' | 'renderEmptyState'>;
@@ -48,7 +57,7 @@ declare namespace ChipGroup {
  * One chip. Give every chip an `id` — that is the key selection and removal
  * are reported by.
  */
-declare function ChipGroupChip({ children, ...props }: ChipGroupChipProps): import("react").JSX.Element;
+declare function ChipGroupChip({ children, icon, onContextMenu, onPointerCancel, onPointerDown, onPointerLeave, onPointerUp, ...props }: ChipGroupChipProps): import("react").JSX.Element;
 //#endregion
-export { type ChipGroupChipProps, type ChipGroupProps, ChipGroup as default };
+export { ChipGroupChip, type ChipGroupChipProps, type ChipGroupProps, ChipGroup as default };
 //# sourceMappingURL=index.d.ts.map

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

@@ -2,26 +2,27 @@
 import { props } from "../../node_modules/@stylexjs/stylex/lib/es/stylex.js";
 import { mergeStatefulStyles, mergeStyles } from "../../styles/merge.js";
 import { CloseGlyph } from "../../glyphs/index.js";
-import { focus } from "../../styles/focus.js";
+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 { chipStyles } from "../../chip/styles.js";
-import { chipGlyph, chipLabel } from "../../chip/index.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";
 import { Button, Tag, TagGroup, TagList } from "react-aria-components";
 //#region src/components/chip-group/index.tsx
-function chipContent(children, removeLabel) {
+function chipContent(children, icon, removeLabel, surface) {
 	return (state) => /* @__PURE__ */ jsxs(Fragment$1, { children: [
-		chipGlyph(state.isSelected),
+		chipGlyph(state, icon),
 		chipLabel(children),
+		state.selectionMode !== "none" && !state.isDisabled ? surface : null,
 		state.allowsRemoving ? /* @__PURE__ */ jsx(Button, {
 			"aria-label": removeLabel,
+			className: chipRemoveClassName,
 			slot: "remove",
-			...props(chipStyles.remove),
 			children: /* @__PURE__ */ jsx(CloseGlyph, { ...props(chipStyles.removeGlyph) })
 		}) : null
 	] });
@@ -47,7 +48,7 @@ function chipContent(children, removeLabel) {
 * The call site's `className` and `style` land on the group as a whole,
 * which is the element a layout positions.
 */
-const RemoveLabelContext = createContext("Remove");
+const RemoveLabelContext = createContext(void 0);
 const LABEL_STATE_VALID = { isInvalid: false };
 const LABEL_STATE_INVALID = { isInvalid: true };
 function ChipGroup(t0) {
@@ -70,8 +71,8 @@ function ChipGroup(t0) {
 		error = t5;
 		items = t6;
 		label = t7;
+		removeLabel = t8;
 		renderEmptyState = t9;
-		removeLabel = t8 === void 0 ? "Remove" : t8;
 		invalid = invalidFrom(error);
 		T0 = TagGroup;
 		t1 = props$1;
@@ -173,41 +174,63 @@ function ChipGroup(t0) {
 * are reported by.
 */
 function ChipGroupChip(t0) {
-	const $ = c(9);
-	const { children, ...props } = t0;
+	const $ = c(18);
+	const { children, icon, onContextMenu, onPointerCancel, onPointerDown, onPointerLeave, onPointerUp, ...props } = t0;
 	const removeLabel = useContext(RemoveLabelContext);
+	let t1;
+	if ($[0] !== onContextMenu || $[1] !== onPointerCancel || $[2] !== onPointerDown || $[3] !== onPointerLeave || $[4] !== onPointerUp) {
+		t1 = {
+			onContextMenu,
+			onPointerCancel,
+			onPointerDown,
+			onPointerLeave,
+			onPointerUp
+		};
+		$[0] = onContextMenu;
+		$[1] = onPointerCancel;
+		$[2] = onPointerDown;
+		$[3] = onPointerLeave;
+		$[4] = onPointerUp;
+		$[5] = t1;
+	} else t1 = $[5];
+	const ripple = useRipple(true, t1, true);
 	const T0 = Tag;
-	const t1 = props.textValue ?? textOf(children);
-	const t2 = mergeStatefulStyles(chipPropsFor, props);
-	let t3;
-	if ($[0] !== children || $[1] !== removeLabel) {
-		t3 = chipContent(children, removeLabel);
-		$[0] = children;
-		$[1] = removeLabel;
-		$[2] = t3;
-	} else t3 = $[2];
-	let t4;
-	if ($[3] !== T0 || $[4] !== props || $[5] !== t1 || $[6] !== t2 || $[7] !== t3) {
-		t4 = /* @__PURE__ */ jsx(T0, {
-			textValue: t1,
+	const t2 = props.textValue ?? textOf(children);
+	const t3 = ripple.handlers;
+	const t4 = mergeStatefulStyles(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];
+	let t6;
+	if ($[11] !== T0 || $[12] !== props || $[13] !== ripple.handlers || $[14] !== t2 || $[15] !== t4 || $[16] !== t5) {
+		t6 = /* @__PURE__ */ jsx(T0, {
+			textValue: t2,
+			...t3,
 			...props,
-			...t2,
-			children: t3
+			...t4,
+			children: t5
 		});
-		$[3] = T0;
-		$[4] = props;
-		$[5] = t1;
-		$[6] = t2;
-		$[7] = t3;
-		$[8] = t4;
-	} else t4 = $[8];
-	return t4;
+		$[11] = T0;
+		$[12] = props;
+		$[13] = ripple.handlers;
+		$[14] = t2;
+		$[15] = t4;
+		$[16] = t5;
+		$[17] = t6;
+	} else t6 = $[17];
+	return t6;
 }
-function chipPropsFor(state) {
-	return props(chipStyles.base, chipStyles.target, chipStyles.targetInGroup, focus.ring, state.isSelected ? chipStyles.selected : chipStyles.unselected, state.isDisabled && chipStyles.disabled, state.isDisabled && (state.isSelected ? chipStyles.disabledSelected : chipStyles.disabledUnselected));
+function groupChipPropsFor(state) {
+	return chipPropsFor(state, { inGroup: true });
 }
 ChipGroup.Chip = ChipGroupChip;
 //#endregion
-export { ChipGroup as default };
+export { ChipGroupChip, ChipGroup as default };
 
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["c","_c","ReactNode","RefAttributes","TagGroupProps","RACTagGroupProps","TagListProps","RACTagListProps","TagProps","RACTagProps","TagRenderProps","stylex","createContext","useContext","Button","RACButton","Tag","RACTag","TagGroup","RACTagGroup","TagList","RACTagList","chipGlyph","chipLabel","chipStyles","textOf","FieldLabel","FieldMessage","invalidFrom","groupStyles","CloseGlyph","focus","mergeStatefulStyles","mergeStyles","spacing","ChipGroupChipProps","Omit","children","className","style","ChipGroupProps","description","error","label","removeLabel","Pick","T","chipContent","state","isSelected","allowsRemoving","props","remove","removeGlyph","RemoveLabelContext","LABEL_STATE_VALID","isInvalid","LABEL_STATE_INVALID","ChipGroup","t0","$","T0","invalid","items","renderEmptyState","t1","t2","t3","t4","t5","t6","t7","t8","t9","undefined","root","ChipGroupChip","textValue","chipPropsFor","base","target","targetInGroup","ring","selected","unselected","isDisabled","disabled","disabledSelected","disabledUnselected","Chip","RACButton","stylex.props","_c","props","RACTagGroup","RACTagList","RACTag"],"sources":["../../../src/components/chip-group/index.tsx"],"sourcesContent":["'use client';\n\nimport type { 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 } 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 { focus } from '../../styles/focus';\nimport { mergeStatefulStyles, mergeStyles } from '../../styles/merge';\nimport '../../tokens/design.tokens.stylex';\nimport { 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\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  /** A function may compute the style from the chip's render state. */\n  style?: RACTagProps['style'];\n};\ntype ChipGroupProps<T extends object = object> = {\n  /** The chips, each with an `id` of its own. */\n  children?: 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\".\n   * @default 'Remove'\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 is the chip module's, so a chip in a group and a chip on its own\n// draw the same one. The close target is drawn only where the group allows\n// removing, which React Aria reports rather than the call site saying so on\n// every chip.\nfunction chipContent(children: ReactNode, removeLabel: string) {\n  return (state: TagRenderProps) => <>\n      {chipGlyph(state.isSelected)}\n      {chipLabel(children)}\n      {state.allowsRemoving ? <RACButton aria-label={removeLabel} slot=\"remove\" {...stylex.props(chipStyles.remove)}>\n          <CloseGlyph {...stylex.props(chipStyles.removeGlyph)} />\n        </RACButton> : null}\n    </>;\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 */\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.\nconst RemoveLabelContext = createContext('Remove');\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};\nfunction ChipGroup<T extends object = object>({\n  children,\n  description,\n  error,\n  items,\n  label,\n  removeLabel = 'Remove',\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} className=\"x9f619 x78zum5 x1a02dak x126z3so x1t137rt\">\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  ...props\n}: ChipGroupChipProps) {\n  const removeLabel = useContext(RemoveLabelContext);\n  return <RACTag textValue={props.textValue ?? textOf(children)} {...props} {...mergeStatefulStyles(chipPropsFor, props)}>\n      {chipContent(children, removeLabel)}\n    </RACTag>;\n}\n\n// StyleX cannot target `[data-selected]` on the element it is styling, so a\n// chip's state comes from the render state React Aria hands its className.\n// Disabled is applied last so it wins over both containers, and StyleX\n// replaces a property whole, so it takes their hover branches with it.\nfunction chipPropsFor(state: TagRenderProps) {\n  return stylex.props(chipStyles.base, chipStyles.target, chipStyles.targetInGroup, focus.ring, state.isSelected ? chipStyles.selected : chipStyles.unselected, state.isDisabled && chipStyles.disabled, state.isDisabled && (state.isSelected ? chipStyles.disabledSelected : chipStyles.disabledUnselected));\n}\nChipGroup.Chip = ChipGroupChip;\nexport type { ChipGroupChipProps, ChipGroupProps };\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","mergeStatefulStyles","mergeStyles","spacing","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","ChipGroupChip","onContextMenu","onPointerCancel","onPointerDown","onPointerLeave","onPointerUp","ripple","textValue","handlers","groupChipPropsFor","inGroup","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 { mergeStatefulStyles, mergeStyles } from '../../styles/merge';\nimport '../../tokens/design.tokens.stylex';\nimport { 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\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/**\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 */\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};\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} className=\"x9f619 x78zum5 x1a02dak x126z3so x1t137rt\">\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) {\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`, with the touch target a\n// chip in a group takes instead.\nfunction groupChipPropsFor(state: TagRenderProps) {\n  return chipPropsFor(state, {\n    inGroup: true\n  });\n}\nChipGroup.Chip = ChipGroupChip;\nexport type { ChipGroupChipProps, ChipGroupProps };\nexport { ChipGroupChip };\nexport default ChipGroup;"],"mappings":"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"}