@recursica/mantine-adapter 0.50.4 → 0.50.6

package/package.json

@@ -13,7 +13,7 @@
     "url": "git+https://github.com/borderux/recursica.git",
     "directory": "packages/mantine-adapter"
   },
-  "version": "0.50.4",
+  "version": "0.50.6",
   "type": "module",
   "main": "./dist/mantine-adapter.cjs",
   "module": "./dist/mantine-adapter.js",

package/src/components/Chip/CHIP_IMPLEMENTATION_NOTES.md

@@ -95,3 +95,16 @@ filename text before ever reaching a real control. Switched to `overflow-x: clip
 establish a scrollport (same visual clipping, still x-axis only per the descender fix above), so
 it's no longer a focus candidate. This affected every chip with long enough content, not just
 read-only ones — see `FileUpload`'s own `IMPLEMENTATION_NOTES.md` for how it surfaced there.
+
+### Selected check icon sat to the left of the leading icon instead of replacing it (Matt Massey, 2026-08-28)
+
+A checked `Chip` with a custom `icon` (leading icon) rendered both: Mantine's own default check
+icon (via its native `iconWrapper`/`checkIcon` slot, always shown whenever `checked` and its own
+`icon` prop — a different, unrelated slot — is left `undefined`) came first in the DOM, immediately
+followed by this adapter's own `.leadingIcon` span, which we always rendered regardless of checked
+state. mui-adapter's `Chip` never had this problem, since its `icon={checked ? checkIcon : icon}`
+was already a straight swap. Fixed mantine-adapter to match: the custom `.leadingIcon` span now
+only renders when `!checked`, so Mantine's native checkmark overlays/replaces it instead of sitting
+to its left. Required destructuring `checked` explicitly (previously left in `...rest` and passed
+through opaquely) so the render condition and the explicit `checked` prop on `<MantineChip>` stay
+in sync.

package/src/components/Chip/Chip.stories.tsx

@@ -113,3 +113,14 @@ export const WithLeadingIcon: Story = {
   },
   render: (args: ChipStoryProps) => <Chip {...args} />,
 };
+
+// Selecting a chip with a leading icon swaps in the checkmark rather than showing both —
+// matches MUI's native behavior of the check icon overlaying the leading icon.
+export const WithLeadingIconSelected: Story = {
+  args: {
+    ...WithLeadingIcon.args,
+    children: "Leading Icon Selected",
+    checked: true,
+  },
+  render: (args: ChipStoryProps) => <Chip {...args} onChange={() => {}} />,
+};

package/src/components/Chip/Chip.tsx

@@ -46,6 +46,7 @@ export const Chip = forwardRef<HTMLInputElement, ChipProps>(function Chip(
     deleteTabIndex,
     deleteIconRef,
     children,
+    checked,
     overStyled = false,
     wrapperProps,
     tabIndex,
@@ -97,6 +98,7 @@ export const Chip = forwardRef<HTMLInputElement, ChipProps>(function Chip(
     <MantineChip
       ref={ref}
       {...sanitizedProps}
+      checked={checked}
       className={finalClass}
       classNames={mergedClassNames}
       wrapperProps={withCallerOverride(computedWrapperProps, wrapperProps)}
@@ -111,7 +113,10 @@ export const Chip = forwardRef<HTMLInputElement, ChipProps>(function Chip(
       )}
     >
       <span className={styles.innerWrapper}>
-        {icon && (
+        {/* When checked, Mantine's own check icon (rendered in its native iconWrapper slot,
+            ahead of this children span) overlays/replaces the leading icon rather than sitting
+            next to it — matching mui-adapter's `icon={checked ? checkIcon : icon}` swap. */}
+        {icon && !checked && (
           <span className={styles.leadingIcon} aria-hidden>
             {icon}
           </span>

package/src/components/FormControlWrapper/FormControlWrapper.tsx

@@ -51,6 +51,7 @@ export const FormControlWrapper = forwardRef<
   // Generate a reliable ID to map the Label's HTML context down to the component array natively.
   const generatedId = useId();
   const id = userProvidedId || `recursica-fc-${generatedId}`;
+  const labelId = `${id}-label`;
 
   // Evaluate explicit assistive fallbacks ensuring assistiveText correctly prioritizes natively over underlying Mantine configurations!
   const resolvedAssistive = assistiveText || description;
@@ -67,11 +68,15 @@ export const FormControlWrapper = forwardRef<
     ? `${rootClass} ${classNameProp}`
     : rootClass;
 
-  // Clone ARIA identifiers directly back down into the nested children wrapper so screen-readers natively hook the external strings
+  // Clone ARIA identifiers directly back down into the nested children wrapper so screen-readers natively hook the external strings.
+  // `id` is cloned down here too — the label's `htmlFor` below only resolves to the field's
+  // native `label.control` when the field itself actually carries this id.
   const content = React.isValidElement(children)
     ? React.cloneElement(
         children as React.ReactElement<Record<string, unknown>>,
         {
+          ...(!(children.props as Record<string, unknown>)["id"] ? { id } : {}),
+          "aria-labelledby": labelId,
           ...(resolvedAssistive &&
           !(children.props as Record<string, unknown>)["aria-describedby"]
             ? { "aria-describedby": assistiveId }
@@ -86,7 +91,8 @@ export const FormControlWrapper = forwardRef<
 
   const labelNode = label ? (
     <Label
-      id={id} // Directly binds ARIA references down
+      id={labelId}
+      htmlFor={id} // Native label/control association — must not also be set on the label's own id
       labelAlignment={labelAlignment}
       labelOptionalText={labelOptionalText}
       labelWithEditIcon={labelWithEditIcon}