bestax-migrate 2.2.1 → 2.2.2

package/dist/sources/rbx/mapping.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"mapping.d.ts","sourceRoot":"","sources":["../../../src/sources/rbx/mapping.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;GAaG;AAEH,OAAO,KAAK,EAAE,gBAAgB,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AAuCnE;;;;;;;;;GASG;AACH,eAAO,MAAM,eAAe,EAAE,MAAM,CAAC,MAAM,EAAE,UAAU,CAiCtD,CAAC;AAEF,uDAAuD;AACvD,eAAO,MAAM,WAAW,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,GAAG,IAAI,CAOrD,CAAC;AAEF,2DAA2D;AAC3D,eAAO,MAAM,aAAa,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,GAAG,IAAI,CAQvD,CAAC;AAEF;;;;GAIG;AACH,eAAO,MAAM,sBAAsB,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,GAAG,IAAI,CAShE,CAAC;AAEF,eAAO,MAAM,OAAO,EAAE,MAAM,CAAC,MAAM,EAAE,gBAAgB,CAosBpD,CAAC;AAEF;;;;;;;GAOG;AACH,eAAO,MAAM,WAAW,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,EAAE,CA2FhD,CAAC;AAEF,sDAAsD;AACtD,wBAAgB,cAAc,CAAC,IAAI,EAAE,MAAM,EAAE,GAAG,gBAAgB,GAAG,SAAS,CAM3E"}
+{"version":3,"file":"mapping.d.ts","sourceRoot":"","sources":["../../../src/sources/rbx/mapping.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;GAaG;AAEH,OAAO,KAAK,EAAE,gBAAgB,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AAuCnE;;;;;;;;;GASG;AACH,eAAO,MAAM,eAAe,EAAE,MAAM,CAAC,MAAM,EAAE,UAAU,CAiCtD,CAAC;AAEF,uDAAuD;AACvD,eAAO,MAAM,WAAW,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,GAAG,IAAI,CAOrD,CAAC;AAEF,2DAA2D;AAC3D,eAAO,MAAM,aAAa,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,GAAG,IAAI,CAQvD,CAAC;AAEF;;;;GAIG;AACH,eAAO,MAAM,sBAAsB,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,GAAG,IAAI,CAShE,CAAC;AAEF,eAAO,MAAM,OAAO,EAAE,MAAM,CAAC,MAAM,EAAE,gBAAgB,CAssBpD,CAAC;AAEF;;;;;;;GAOG;AACH,eAAO,MAAM,WAAW,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,EAAE,CA2FhD,CAAC;AAEF,sDAAsD;AACtD,wBAAgB,cAAc,CAAC,IAAI,EAAE,MAAM,EAAE,GAAG,gBAAgB,GAAG,SAAS,CAM3E"}

package/dist/sources/rbx/mapping.js

@@ -126,7 +126,7 @@ export const MAPPING = {
     },
     forwardRefAs: {
         status: 'todo',
-        todo: '`forwardRefAs` is rbx-internal and has no counterpart. Only the bestax form controls and a few components (Dialog, Sidebar, Toast, Carousel) forward refs; most, Button and Box included, are plain function components that do not — put the ref on a wrapping element you control',
+        todo: '`forwardRefAs` is rbx-internal and has no counterpart. bestax forwards a ref from the form controls and from `Button`, `LinkButton`, `Modal`, `Dropdown`, `Navbar` (plus `Navbar.Burger` and `Navbar.Link`), `Dialog`, `Sidebar`, `Toast` and `Carousel` — pass `ref` directly on those. Mind the `Navbar.Dropdown` collision: your rbx `Navbar.Dropdown` is the menu and becomes `Navbar.DropdownMenu`, which forwards no ref, while bestax `Navbar.Dropdown` — the container your `<Navbar.Item dropdown>` becomes — does. The rest, `Box` included, are plain function components that forward no ref; put the ref on a wrapping element you control',
     },
     // ---- elements -----------------------------------------------------------
     Block: { status: 'mapped', target: 'Block' },
@@ -136,6 +136,7 @@ export const MAPPING = {
         target: 'Button',
         props: {
             as: AS_OK,
+            innerRef: { rename: 'ref' },
             color: {},
             size: {},
             outlined: { booleanToProp: { name: 'isOutlined' } },
@@ -497,9 +498,7 @@ export const MAPPING = {
             managed: {
                 todo: 'bestax `Dropdown` is uncontrolled by default; use `active` + `onActiveChange` for controlled behaviour',
             },
-            innerRef: {
-                todo: 'this bestax component is a plain function component and forwards no ref; drop `innerRef`, or put the ref on a wrapping element you control',
-            },
+            innerRef: { rename: 'ref' },
         },
         subs: {
             Container: { status: 'mapped', special: 'dropdown-container' },
@@ -606,25 +605,25 @@ export const MAPPING = {
         props: {
             active: {},
             onClose: {},
-            closeOnEsc: {
-                todo: 'bestax `Modal` implements no Escape handling at all; add your own keydown listener, or drop the prop if the behaviour is not needed',
-            },
+            closeOnEsc: { rename: 'closeOnEscape' },
             closeOnBlur: {
-                todo: "bestax `Modal` has no built-in background-click close; wire it through `Modal.Background`'s onClick and `onClose`",
+                todo: 'bestax `Modal` closes on background click in its legacy form, where it renders its own background wired to `onClose`; a `Modal.Content` or `Modal.Card` child selects the compound form, which renders only the children you wrote — there, add a `<Modal.Background>` whose `onClick` calls your close handler, or drop the prop if you passed false',
             },
             document: {
-                todo: 'bestax `Modal` renders inline where you place it rather than portalling into a document at all; drop this prop, and see the advisory the codemod adds on every Modal',
+                todo: 'bestax `Modal` portals via `portal`, but that takes `true`, a selector or an element — not a `Document`. Pass an element from the document you targeted, or drop the prop if you were passing the default document',
             },
             containerClassName: { rename: 'className' },
-            innerRef: {
-                todo: 'this bestax component is a plain function component and forwards no ref; drop `innerRef`, or put the ref on a wrapping element you control',
-            },
+            innerRef: { rename: 'ref' },
         },
         subs: {
             Background: { status: 'mapped', target: 'Modal.Background' },
             Close: { status: 'mapped', target: 'Modal.Close' },
             Content: { status: 'mapped', target: 'Modal.Content' },
-            Container: { status: 'mapped', special: 'modal-container' },
+            Container: {
+                status: 'mapped',
+                special: 'modal-container',
+                props: { innerRef: { rename: 'ref' } },
+            },
             Card: {
                 status: 'mapped',
                 target: 'Modal.Card',
@@ -641,7 +640,7 @@ export const MAPPING = {
             },
             Portal: {
                 status: 'todo',
-                todo: '`Modal.Portal` is rbx-internal; bestax `<Modal>` renders inline and does not portal at all — wrap it in `createPortal` yourself if you relied on that (see the advisory the codemod adds on every Modal)',
+                todo: '`Modal.Portal` is rbx-internal; set `portal` on the `<Modal>` instead — it takes `true`, a selector or an element',
             },
         },
     },
@@ -659,13 +658,15 @@ export const MAPPING = {
                 todo: 'bestax `Navbar` is uncontrolled; drop `managed`',
             },
             document: { todo: 'bestax `Navbar` has no `document` prop; drop it' },
-            innerRef: {
-                todo: 'this bestax component is a plain function component and forwards no ref; drop `innerRef`, or put the ref on a wrapping element you control',
-            },
+            innerRef: { rename: 'ref' },
         },
         subs: {
             Brand: { status: 'mapped', target: 'Navbar.Brand' },
-            Burger: { status: 'mapped', target: 'Navbar.Burger' },
+            Burger: {
+                status: 'mapped',
+                target: 'Navbar.Burger',
+                props: { innerRef: { rename: 'ref' } },
+            },
             Divider: { status: 'mapped', target: 'Navbar.Divider' },
             Menu: { status: 'mapped', target: 'Navbar.Menu' },
             Link: {
@@ -673,6 +674,7 @@ export const MAPPING = {
                 target: 'Navbar.Link',
                 props: {
                     as: AS_OK,
+                    innerRef: { rename: 'ref' },
                     arrowless: {},
                     onClick: {},
                 },

package/dist/sources/rbx/specials.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"specials.d.ts","sourceRoot":"","sources":["../../../src/sources/rbx/specials.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;GAcG;AAEH,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,aAAa,CAAC;AAO3C,OAAO,EAYL,KAAK,gBAAgB,EACtB,MAAM,yBAAyB,CAAC;AACjC,OAAO,EAML,KAAK,aAAa,EACnB,MAAM,8BAA8B,CAAC;AAEtC,YAAY,EAAE,aAAa,EAAE,CAAC;AAy8B9B,wBAAgB,UAAU,CACxB,IAAI,EAAE,MAAM,EACZ,GAAG,EAAE,gBAAgB,EACrB,IAAI,EAAE,OAAO,CAAC,GAAG,CAAC,EAClB,OAAO,EAAE,GAAG,GACX,aAAa,CAIf"}
+{"version":3,"file":"specials.d.ts","sourceRoot":"","sources":["../../../src/sources/rbx/specials.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;GAcG;AAEH,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,aAAa,CAAC;AAO3C,OAAO,EAYL,KAAK,gBAAgB,EACtB,MAAM,yBAAyB,CAAC;AACjC,OAAO,EAML,KAAK,aAAa,EACnB,MAAM,8BAA8B,CAAC;AAEtC,YAAY,EAAE,aAAa,EAAE,CAAC;AAw9B9B,wBAAgB,UAAU,CACxB,IAAI,EAAE,MAAM,EACZ,GAAG,EAAE,gBAAgB,EACrB,IAAI,EAAE,OAAO,CAAC,GAAG,CAAC,EAClB,OAAO,EAAE,GAAG,GACX,aAAa,CAIf"}

package/dist/sources/rbx/specials.js

@@ -538,15 +538,14 @@ const SPECIALS = {
         return { ...result, handledProps: ['align', 'as'] };
     },
     /**
-     * The markup maps cleanly, but three rbx behaviours do not exist in bestax
-     * and none of them fail loudly: rbx portals the modal into `document.body`,
-     * closes it on Escape by default, and clips document scroll while it is
-     * open. bestax renders inline and implements none of the three. An
-     * unmodified `<Modal>` therefore migrates to something that looks right and
-     * behaves differently, so every conversion is flagged.
+     * rbx's Modal portals into `document.body`, closes on Escape and clips
+     * document scroll, all by default. bestax matches two of those since #633 —
+     * `closeOnEscape` and `lockScroll` both default to `true` — but still
+     * renders inline unless `portal` is set. That last difference does not fail
+     * loudly, so every conversion is still flagged, now about the portal alone.
      */
     modal(ctx, path, _element) {
-        addTodo(ctx, path, 'component:Modal', 'bestax `Modal` renders inline rather than portalling into document.body, and implements neither Escape-to-close nor scroll locking — rbx did all three by default. Re-add whichever your UI relied on');
+        addTodo(ctx, path, 'component:Modal', 'bestax `Modal` closes on Escape and locks body scroll by default, matching rbx, but it renders inline: set `portal` if you relied on rbx portalling into document.body');
         return {};
     },
     /** rbx Modal.Container is the modal itself in bestax. */
@@ -588,6 +587,21 @@ const SPECIALS = {
             addTodo(ctx, path, `prop:${prop}`, `bestax \`Navbar.Item\` has no \`${prop}\` prop; restructure or add a class by hand`);
             ctx.dirty = true;
         }
+        // bestax's `Navbar.Dropdown` forwards a ref, but it is the one such target
+        // the `innerRef: { rename: 'ref' }` entries in mapping.ts cannot reach:
+        // that table is keyed on the rbx name (`Navbar.Item`), and only this
+        // handler knows which of the two targets was picked. A plain
+        // `Navbar.Item` is still a function component, so the rename is
+        // conditional — there, `innerRef` is left alone.
+        const renamedInnerRef = [];
+        if (target === 'Navbar.Dropdown') {
+            const innerRefAttr = findAttr(element, 'innerRef');
+            if (innerRefAttr) {
+                innerRefAttr.name = ctx.j.jsxIdentifier('ref');
+                renamedInnerRef.push('innerRef');
+                ctx.dirty = true;
+            }
+        }
         restrictAsToTargets(ctx, path, element, target ?? 'Navbar.Item', [
             'Navbar.Item',
         ]);
@@ -601,6 +615,7 @@ const SPECIALS = {
                 'expanded',
                 'hoverable',
                 'managed',
+                ...renamedInnerRef,
             ],
         };
     },

package/dist/sources/react-bulma-components/mapping.js

@@ -26,7 +26,7 @@ export const UNIVERSAL_PROPS = {
         todo: 'this bestax component has no `as` prop; restructure the element instead',
     },
     domRef: {
-        todo: 'bestax-bulma components do not take domRef; use a ref on a DOM child or wrap the component',
+        todo: 'bestax-bulma has no `domRef`. The form controls and `Button`, `LinkButton`, `Modal`, `Dropdown`, `Navbar` (plus `Navbar.Burger` and `Navbar.Link`), `Dialog`, `Sidebar`, `Toast` and `Carousel` forward a ref — on those, rename `domRef` to `ref`. Mind the `Navbar.Dropdown` collision: the `Navbar.Item` that wrapped your dropdown became bestax `Navbar.Dropdown` and forwards one, while your `Navbar.Dropdown` became `Navbar.DropdownMenu` and does not. The rest forward no ref: put the ref on a DOM child or wrap the component',
     },
     // ColorProps
     backgroundColor: { rename: 'bgColor' },
@@ -555,12 +555,12 @@ export const MAPPING = {
         props: {
             show: { rename: 'active' },
             onClose: {},
-            closeOnEsc: { todo: 'bestax Modal closes on Esc by default; remove' },
+            closeOnEsc: { rename: 'closeOnEscape' },
             closeOnBlur: {
-                todo: 'bestax Modal background click closes when onClose is set; remove',
+                todo: 'bestax Modal closes on background click only in its legacy form; the Modal.Content/Modal.Card child selects the compound form, which renders only the children you wrote — add a `<Modal.Background>` whose `onClick` calls your close handler, or drop the prop if you passed false',
             },
             showClose: {
-                todo: 'bestax Modal renders the close button when onClose is set; remove',
+                todo: 'bestax Modal renders a close button only in its legacy form; the Modal.Content/Modal.Card child selects the compound form, which renders only the children you wrote — add a `<Modal.Close variant="floating">` whose `onClick` calls your close handler, or drop the prop if you passed false',
             },
             document: { drop: true },
         },

package/dist/sources/react-bulma-components/specials.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"specials.d.ts","sourceRoot":"","sources":["../../../src/sources/react-bulma-components/specials.ts"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AAEH,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,aAAa,CAAC;AAE3C,OAAO,EAWL,KAAK,gBAAgB,EACtB,MAAM,yBAAyB,CAAC;AACjC,OAAO,EAML,KAAK,aAAa,EACnB,MAAM,8BAA8B,CAAC;AAEtC,YAAY,EAAE,aAAa,EAAE,CAAC;AAsvB9B,wBAAgB,UAAU,CACxB,IAAI,EAAE,MAAM,EACZ,GAAG,EAAE,gBAAgB,EACrB,IAAI,EAAE,OAAO,CAAC,GAAG,CAAC,EAClB,OAAO,EAAE,GAAG,GACX,aAAa,CAIf;AAED,kEAAkE;AAClE,eAAO,MAAM,gBAAgB,EAAE,MAAM,CAAC,MAAM,EAAE,SAAS,GAAG,QAAQ,CAGjE,CAAC"}
+{"version":3,"file":"specials.d.ts","sourceRoot":"","sources":["../../../src/sources/react-bulma-components/specials.ts"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AAEH,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,aAAa,CAAC;AAE3C,OAAO,EAWL,KAAK,gBAAgB,EACtB,MAAM,yBAAyB,CAAC;AACjC,OAAO,EAML,KAAK,aAAa,EACnB,MAAM,8BAA8B,CAAC;AAEtC,YAAY,EAAE,aAAa,EAAE,CAAC;AAqwB9B,wBAAgB,UAAU,CACxB,IAAI,EAAE,MAAM,EACZ,GAAG,EAAE,gBAAgB,EACrB,IAAI,EAAE,OAAO,CAAC,GAAG,CAAC,EAClB,OAAO,EAAE,GAAG,GACX,aAAa,CAIf;AAED,kEAAkE;AAClE,eAAO,MAAM,gBAAgB,EAAE,MAAM,CAAC,MAAM,EAAE,SAAS,GAAG,QAAQ,CAGjE,CAAC"}

package/dist/sources/react-bulma-components/specials.js

@@ -61,7 +61,18 @@ const SPECIALS = {
             // (`remove={false}`, `remove=""`, `remove={0}`) → just drop the prop.
             removeAttr(element, attr);
             ctx.dirty = true;
-            return resolved === 'truthy' ? { target: 'Delete' } : {};
+            if (resolved !== 'truthy')
+                return {};
+            // The universal `domRef` advice lists `Button` among the components that
+            // forward a ref, but this element is no longer a Button: `Delete` is a
+            // plain function component. Claim the prop so that advice cannot fire
+            // here, and say what actually applies to the target we picked.
+            const handledProps = [];
+            if (findAttr(element, 'domRef')) {
+                addTodo(ctx, path, 'prop:domRef', 'this `<Button remove>` became bestax `<Delete>`, which forwards no ref — the general `domRef` advice does not apply here; put the ref on a DOM child or wrap the component');
+                handledProps.push('domRef');
+            }
+            return { target: 'Delete', handledProps };
         }
         addTodo(ctx, path, 'prop:remove', '`remove` has a dynamic value; this can render as either a Button or a Delete cross — split the branch by hand');
         return {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bestax-migrate",
-  "version": "2.2.1",
+  "version": "2.2.2",
   "description": "Codemods for migrating existing React apps from other Bulma libraries to @allxsmith/bestax-bulma",
   "type": "module",
   "bin": {
@@ -51,7 +51,7 @@
     "react-dom": "^19.2.8",
     "ts-jest": "^29.4.12",
     "typescript": "^6.0.3",
-    "@allxsmith/bestax-bulma": "^5.12.0"
+    "@allxsmith/bestax-bulma": "^5.15.0"
   },
   "publishConfig": {
     "access": "public"