@recursica/mui-adapter 0.24.0 → 0.25.0

package/CHANGELOG.md

@@ -1,5 +1,31 @@
 # @recursica/mui-adapter
 
+## 0.25.0
+
+### Minor Changes
+
+- e0f5643: Implement `TransferList` (dual listbox) in both adapters, replacing the "coming soon" stub. Composes `FormControlWrapper`, `TextField`, `Checkbox`/`CheckboxGroup`, `Badge`, and `Button` — supports controlled/uncontrolled `data`, per-item grouping, per-pane search, and `stacked`/`side-by-side` form layout.
+- 2fb7069: Add `Popover` component (click-controlled dropdown with beak/arrow, composable `Popover.Target`/`Popover.Dropdown`), bringing mui-adapter in parity with mantine-adapter's Popover.
+- 2fb7069: Fix `Popover`: gap now matches Mantine (Mui's built-in per-placement tooltip margin was stacking on top of our offset), and the beak now has a visible border matching the dropdown body. Fix `Button`: line-height now applies via `labelText` per size (matching Mantine) instead of being dropped from the small-size token.
+- 2fb7069: Fix `SegmentedControl` height (MUI's default `ToggleButton` box model was stacking on top of the token-driven label height) and selected-state styling (`Mui-selected` wasn't wrapped in `:global()`, so CSS Modules silently dropped the selector).
+  Also default to the first item selected when uncontrolled, matching mantine.
+- 2fb7069: Fix `SegmentedControl` labels rendering all-caps in MUI (its `ToggleButton` uppercase default was leaking through an invalid text-transform token). Labels now match Mantine's original casing.
+- 2fb7069: Fix `Slider`'s `Disabled` story (was passing `disabled: false` in both adapters). In `mui-adapter`, also fix the disabled track showing red instead of grey, make the thumb focus ring keyboard-only (no glow on click/drag) to match Mantine, render assistive text as a `<span>`, and align mark label color/position with Mantine (which now applies its own mark label color token too).
+- 2fb7069: Fix `Stepper`: use MUI's `alternativeLabel` so horizontal labels center under the icon and the connector centers on it, render the completed check mark as our own token-colored glyph instead of MUI's default blue `CheckCircle` SVG, and draw the vertical connecting line as a stretch-aware rail so it reaches the next step's circle regardless of description height.
+- 2fb7069: Fix `Tabs` showing a MUI click ripple that Mantine's tabs don't have. `Tab` now passes `disableRipple`.
+- 2fb7069: Fix `Tabs`: `outline` variant's selected tab now shows a connected border box (matching Mantine) with no stray bottom border line. `default` variant no longer shifts sibling tabs when selecting one (a stray ripple element was being pulled into flex layout). `vertical` orientation no longer stretches the tablist to the full row width, and its divider now runs the full height with the selection indicator aligned on it instead of offset to the side.
+- 2fb7069: Fix `TextArea`: error state border now uses the recursica error color (was never triggering in either adapter). MUI disabled background/border, focus ring color, and default height now match Mantine instead of MUI's own defaults.
+- 2fb7069: Fix `Timeline`: rebuild `Timeline.Item` on Mui's `TimelineSeparator`/`TimelineDot`/`TimelineConnector`/`TimelineContent` primitives so the bullet marker, connecting line, active state, and bullet variants render (and left-align) like the Mantine adapter instead of not rendering at all.
+
+### Patch Changes
+
+- 1616144: Fix `FileInput`'s clear-all button: pressing Enter or Space while it was focused opened the native file picker instead of clearing the selection (a regression from switching the control to the shared `Button` component, which dropped the keydown handler the previous bespoke element had).
+- 3ff5821: Fix `TransferList` checkboxes not toggling/showing checked state in either adapter (grouping-for-layout was silently overriding item selection). Add `readOnly` support and a `ReadOnly` story.
+- Updated dependencies [e0f5643]
+- Updated dependencies [1616144]
+- Updated dependencies [3ff5821]
+  - @recursica/adapter-common@0.18.0
+
 ## 0.24.0
 
 ### Minor Changes

package/dist/index.d.ts

@@ -1007,6 +1007,84 @@ h?: string | number;
 height?: string | number;
 }, "ref">) & RefAttributes<HTMLDivElement>>;
 
+export declare const Popover: typeof rawComponents.Popover;
+
+declare const Popover_2: PopoverComponent;
+
+declare const PopoverBase: {
+    ({ overStyled, withBeak, position, defaultOpened, opened, onChange, offset, width, children, ...rest }: PopoverProps): JSX.Element;
+    displayName: string;
+};
+
+declare type PopoverComponent = typeof PopoverBase & {
+    Target: typeof PopoverTarget;
+    Dropdown: typeof PopoverDropdown;
+};
+
+declare const PopoverDropdown: {
+    ({ children, }: PopoverDropdownProps): JSX.Element;
+    displayName: string;
+};
+
+/** The dropdown panel displayed from the popover. */
+declare type PopoverDropdownProps = {
+    children?: default_2.ReactNode;
+};
+
+/**
+ * Behavioral props specific to this adapter's click-controlled implementation.
+ * `withBeak` comes from the shared `RecursicaPopoverProps` (adapter-common); the
+ * rest map to Mantine's own `PopoverProps` surface, reproduced here since Mui has
+ * no single library type that already covers them.
+ */
+declare interface PopoverOwnProps extends RecursicaPopoverProps {
+    /** Dropdown position relative to the target */
+    position?: TooltipProps["placement"];
+    /** Initial opened state (uncontrolled) */
+    defaultOpened?: boolean;
+    /** Controlled opened state */
+    opened?: boolean;
+    /** Called whenever the opened state changes */
+    onChange?: (opened: boolean) => void;
+    /** Distance in px between the dropdown and the target */
+    offset?: number;
+    /** Fixed width applied to the dropdown panel */
+    width?: number | string;
+    children?: default_2.ReactNode;
+}
+
+/**
+ * Recursica Popover component wrapping Mui's Tooltip in click-controlled mode.
+ *
+ * Displays a dropdown panel when the user clicks the target element.
+ * Uses the composable dot-notation pattern:
+ * ```tsx
+ * <Popover withBeak>
+ *   <Popover.Target>
+ *     <Button>Click me</Button>
+ *   </Popover.Target>
+ *   <Popover.Dropdown>
+ *     Content displayed in popover
+ *   </Popover.Dropdown>
+ * </Popover>
+ * ```
+ */
+declare type PopoverProps = RecursicaOverStyled<Omit<TooltipProps, "title" | "children" | "open" | "onClose" | "onOpen" | "placement"> & PopoverOwnProps>;
+
+declare const PopoverTarget: {
+    ({ children }: PopoverTargetProps): JSX.Element;
+    displayName: string;
+};
+
+/**
+ * Wrapper for the element that triggers the popover.
+ * Requires a single child element; only used as a marker to locate the
+ * trigger element, it is never rendered directly (see `PopoverBase`).
+ */
+declare type PopoverTargetProps = {
+    children?: default_2.ReactNode;
+};
+
 export declare const Radio: typeof rawComponents.Radio;
 
 declare const Radio_2: RadioComponent;
@@ -1124,6 +1202,11 @@ declare namespace rawComponents {
         PanelFooterProps,
         PanelFooter_2 as PanelFooter,
         Panel_2 as Panel,
+        PopoverOwnProps,
+        PopoverProps,
+        PopoverTargetProps,
+        PopoverDropdownProps,
+        Popover_2 as Popover,
         RadioWrapperProps,
         RecursicaRadioPropsAlias,
         RadioProps_2 as RadioProps,
@@ -1206,6 +1289,9 @@ declare namespace rawComponents {
         Toast_2 as Toast,
         TooltipProps_2 as TooltipProps,
         Tooltip_2 as Tooltip,
+        RecursicaTransferListItem,
+        RecursicaTransferListData,
+        RecursicaTransferListProps_2 as RecursicaTransferListProps,
         TransferListProps,
         TransferList_2 as TransferList,
         TypographyProps_2 as TypographyProps,
@@ -1243,7 +1329,7 @@ export declare type ReadOnlyFieldType = "text" | "number" | "date" | "boolean" |
 /**
  * Official list of all components in Recursica.
  */
-export declare const RECURSICA_COMPONENTS: readonly ["Accordion", "AssistiveElement", "Autocomplete", "Avatar", "Badge", "Breadcrumb", "Button", "Card", "Checkbox", "Chip", "Container", "DatePicker", "Dropdown", "EmptyValueRenderer", "FileInput", "Flex", "FormControlLayout", "FormControlWrapper", "Grid", "Group", "HoverCard", "Label", "Layer", "Link", "Loader", "Menu", "Modal", "NumberInput", "Pagination", "Panel", "Popover", "Radio", "ReadOnlyField", "SegmentedControl", "Slider", "Stack", "Stepper", "Switch", "Table", "Tabs", "Text", "TextArea", "TextField", "TimePicker", "Timeline", "Title", "Toast", "Tooltip", "TransferList"];
+export declare const RECURSICA_COMPONENTS: readonly ["Accordion", "AssistiveElement", "Autocomplete", "Avatar", "Badge", "Box", "Breadcrumb", "Button", "Card", "Checkbox", "CheckboxGroup", "Chip", "Container", "DatePicker", "Dropdown", "EmptyValueRenderer", "FileInput", "FileUpload", "Flex", "FormControlLayout", "FormControlWrapper", "Grid", "Group", "HoverCard", "Label", "Layer", "Link", "Loader", "Menu", "Modal", "NumberInput", "Pagination", "Panel", "Popover", "Radio", "ReadOnlyField", "SegmentedControl", "Slider", "Stack", "Stepper", "Switch", "Table", "Tabs", "Text", "TextArea", "TextField", "TimePicker", "Timeline", "Title", "Toast", "Tooltip", "TransferList", "Tree", "Typography"];
 
 /**
  * Props for the Recursica Accordion Control component.
@@ -2330,10 +2416,47 @@ export declare interface RecursicaTooltipProps {
     withBeak?: boolean;
 }
 
+/** Controlled/uncontrolled data shape: [sourceItems, targetItems] */
+export declare type RecursicaTransferListData = [
+RecursicaTransferListItem[],
+RecursicaTransferListItem[]
+];
+
+/**
+ * A single transferable item.
+ */
+export declare interface RecursicaTransferListItem {
+    /** Unique identifier used for selection and transfer */
+    value: string;
+    /** Display text */
+    label: string;
+    /** Optional group name — items sharing a group render under a CheckboxGroup */
+    group?: string;
+}
+
 /**
  * Props for the Recursica TransferList component.
  */
 export declare interface RecursicaTransferListProps {
+    /** Controlled data: [sourceItems, targetItems] */
+    data?: RecursicaTransferListData;
+    /** Uncontrolled initial data: [sourceItems, targetItems] */
+    defaultData?: RecursicaTransferListData;
+    /** Called with the new [sourceItems, targetItems] whenever items are transferred */
+    onChange?: (data: RecursicaTransferListData) => void;
+    /** Label for the source (left) list */
+    sourceLabel?: string;
+    /** Label for the target (right) list */
+    targetLabel?: string;
+    /** Enable per-pane search filtering. Defaults to true */
+    searchable?: boolean;
+    /** Placeholder text for the search fields */
+    searchPlaceholder?: string;
+}
+
+declare interface RecursicaTransferListProps_2 extends Omit<FormControlWrapperProps, "children" | "overStyled" | "controlMaxWidth" | "controlMinWidth" | "onChange">, ReadOnlyControlProps, RecursicaTransferListProps {
+    /** Disables the whole control */
+    disabled?: boolean;
 }
 
 /**
@@ -2926,7 +3049,7 @@ export declare const Timeline: typeof rawComponents.Timeline;
 
 declare const Timeline_2: TimelineComponent;
 
-declare interface TimelineComponent extends default_2.ForwardRefExoticComponent<TimelineProps & default_2.RefAttributes<HTMLDivElement>> {
+declare interface TimelineComponent extends default_2.ForwardRefExoticComponent<TimelineProps & default_2.RefAttributes<HTMLUListElement>> {
     Item: typeof TimelineItem_2;
 }
 
@@ -2939,10 +3062,24 @@ export declare const TimelineItem: typeof rawComponents.TimelineItem;
  * The `Timeline.Item` has been extended to support a `timestamp` string natively,
  * rendering it below the body content. It also accepts a `bulletVariant` to morph
  * the structural dimensions of the node circle automatically.
- */
-declare const TimelineItem_2: default_2.ForwardRefExoticComponent<(Omit<Omit<WithRecursicaSpacing<Omit<TimelineItemProps, "color" | "radius" | "lineVariant"> & RecursicaTimelineItemProps>, BlockedStylingKeys> & ForbiddenStyles & {
+ *
+ * Internally it composes Mui's `TimelineSeparator`/`TimelineDot`/`TimelineConnector`/
+ * `TimelineContent` primitives (Mui has no single "item" abstraction like Mantine's
+ * `Timeline.Item` that renders a bullet + connector on its own).
+ */
+declare const TimelineItem_2: default_2.ForwardRefExoticComponent<(Omit<Omit<WithRecursicaSpacing<Omit<TimelineItemProps, "color" | "title" | "radius" | "lineVariant"> & RecursicaTimelineItemProps & {
+/** Heading rendered above the item's description/timestamp */
+title?: default_2.ReactNode;
+/* Excluded from this release type: __active */
+/* Excluded from this release type: __isLast */
+}>, BlockedStylingKeys> & ForbiddenStyles & {
     overStyled?: false | undefined;
-}, "ref"> | Omit<Omit<Omit<TimelineItemProps, "color" | "radius" | "lineVariant"> & RecursicaTimelineItemProps, "m" | "my" | "mx" | "mt" | "mb" | "ml" | "mr" | "gap" | "rowGap" | "columnGap"> & {
+}, "ref"> | Omit<Omit<Omit<TimelineItemProps, "color" | "title" | "radius" | "lineVariant"> & RecursicaTimelineItemProps & {
+    /** Heading rendered above the item's description/timestamp */
+    title?: default_2.ReactNode;
+    /* Excluded from this release type: __active */
+    /* Excluded from this release type: __isLast */
+}, "m" | "my" | "mx" | "mt" | "mb" | "ml" | "mr" | "gap" | "rowGap" | "columnGap"> & {
     m?: string | number | RecursicaSpacing;
     mx?: string | number | RecursicaSpacing;
     my?: string | number | RecursicaSpacing;
@@ -2955,9 +3092,14 @@ declare const TimelineItem_2: default_2.ForwardRefExoticComponent<(Omit<Omit<Wit
     columnGap?: string | number | RecursicaSpacing;
 } & {
     overStyled: true;
-}, "ref">) & default_2.RefAttributes<HTMLDivElement>>;
+}, "ref">) & default_2.RefAttributes<HTMLLIElement>>;
 
-declare type TimelineItemProps_2 = RecursicaOverStyled<Omit<TimelineItemProps, "radius" | "color" | "lineVariant"> & RecursicaTimelineItemProps>;
+declare type TimelineItemProps_2 = RecursicaOverStyled<Omit<TimelineItemProps, "radius" | "color" | "lineVariant" | "title"> & RecursicaTimelineItemProps & {
+    /** Heading rendered above the item's description/timestamp */
+    title?: default_2.ReactNode;
+    /* Excluded from this release type: __active */
+    /* Excluded from this release type: __isLast */
+}>;
 
 /**
  * Properties for the strictly-tokenized Timeline component.
@@ -3059,9 +3201,24 @@ declare type TooltipProps_2 = RecursicaOverStyled<TooltipProps & RecursicaToolti
 
 export declare const TransferList: typeof rawComponents.TransferList;
 
-declare const TransferList_2: default_2.FC<TransferListProps>;
+declare const TransferList_2: ForwardRefExoticComponent<(Omit<Omit<WithRecursicaSpacing<RecursicaTransferListProps_2>, BlockedStylingKeys> & ForbiddenStyles & {
+overStyled?: false | undefined;
+}, "ref"> | Omit<Omit<RecursicaTransferListProps_2, "m" | "my" | "mx" | "mt" | "mb" | "ml" | "mr" | "gap" | "rowGap" | "columnGap"> & {
+m?: string | number | RecursicaSpacing;
+mx?: string | number | RecursicaSpacing;
+my?: string | number | RecursicaSpacing;
+mt?: string | number | RecursicaSpacing;
+mb?: string | number | RecursicaSpacing;
+ml?: string | number | RecursicaSpacing;
+mr?: string | number | RecursicaSpacing;
+gap?: string | number | RecursicaSpacing;
+rowGap?: string | number | RecursicaSpacing;
+columnGap?: string | number | RecursicaSpacing;
+} & {
+overStyled: true;
+}, "ref">) & RefAttributes<HTMLDivElement>>;
 
-declare type TransferListProps = default_2.HTMLAttributes<HTMLDivElement> & RecursicaTransferListProps;
+declare type TransferListProps = RecursicaOverStyled<RecursicaTransferListProps_2>;
 
 export declare const Tree: typeof rawComponents.Tree;