tp-react-elements 2.0.0 → 2.0.2

package/README.md

@@ -9,18 +9,24 @@ A comprehensive React form library built with Material-UI and React Hook Form, d
 > Storybook docs (`*.stories.tsx` → `meta.parameters.docs.description`)
 > so consumers see the same explanation in both places.
 
-- **`SingleSelectSearchApi`** — Fixed a `Tooltip`/Popper mis-anchoring bug where
-  the selected-value tooltip rendered pinned to the viewport's top-left corner
-  (0,0) instead of near the input when the field sat inside an
-  `overflow: hidden` ancestor (e.g. a table cell in `material-react-table` /
-  `GenericPaginatedGrid`). The `Tooltip` is **retained** (not removed) and now
-  uses `placement="top-start"`, `arrow`, `disableInteractive`, and a
-  `slotProps.popper` block with Popper.js modifiers (`offset`,
-  `preventOverflow` with `boundary: 'clippingParents'`, `flip`) so it
-  portal-renders to `document.body` and stays correctly anchored. See the
+- **`SingleSelectSearchApi`** — The selected-value `Tooltip` is now suppressed
+  via `open={false}` (controlled-closed) instead of relying on the Popper
+  modifier fix. Background: the tooltip previously rendered pinned to the
+  viewport's top-left corner (0,0) instead of near the input when the field
+  sat inside an `overflow: hidden` ancestor (e.g. a table cell in
+  `material-react-table` / `GenericPaginatedGrid`). Disabling Popper's `hide`
+  modifier and using `rootBoundary: 'viewport'` **verifiably fixed this in
+  Storybook (MUI v7)**, but the same build still mis-anchored when consumed
+  live in apps pinned to MUI v6 (below our `@mui/material >=7.3.1` peer
+  requirement) — MUI v6's Popper/Tooltip runtime ignores the modifier
+  configuration. Rather than ship a tooltip that only behaves correctly on
+  some MUI majors, we now suppress it at the prop level: `open={false}` forces
+  MUI's `Tooltip` into fully-controlled mode so it never opens. The `Tooltip`
+  element (and its modifier config) is **retained** (not removed) — flipping
+  `open` back to the default is a one-line change once the anchoring fix is
+  confirmed across all supported MUI majors. See the
   **"Tooltip inside a clipped container"** story in
-  `SingleSelectSearchApi.stories.tsx` for a live repro, and the component's
-  JSDoc for implementation notes.
+  `SingleSelectSearchApi.stories.tsx` and the component's JSDoc for details.
 
 ## 🚀 Features
 

package/dist/components/FormComponents/Select/SingleSelectSearchApi.d.ts

@@ -22,22 +22,27 @@ export interface SearchOption {
  * Searches fire only after `minSearchLength` chars AND after the `debounceMs`
  * debounce delay — preventing a request per keystroke.
  *
- * ### Selected-value tooltip & anchoring inside clipped containers
- * The input is wrapped in a MUI `Tooltip` showing `resolvedValue.label` on
- * hover (useful when a narrow column truncates the label). The `Tooltip` is
- * configured with `placement="top-start"`, `arrow`, `disableInteractive`, and
- * a `slotProps.popper` block carrying Popper.js modifiers — `offset`,
- * `preventOverflow` (`boundary: 'clippingParents'`), and `flip`.
+ * ### Selected-value tooltip — currently suppressed via `open={false}`
+ * The input is wrapped in a MUI `Tooltip` that would show `resolvedValue.label`
+ * on hover (useful when a narrow column truncates the label). It carries
+ * `placement="top-start"`, `arrow`, `disableInteractive`, and a
+ * `slotProps.popper` block with Popper.js modifiers (`hide` disabled, `offset`,
+ * `preventOverflow`, `flip`) that correctly anchor it to the input even inside
+ * an `overflow: hidden` ancestor (e.g. a table cell in `material-react-table` /
+ * `GenericPaginatedGrid`) — **verified working in Storybook on MUI v7**.
  *
- * This keeps the tooltip correctly anchored to the input even when the field
- * sits inside an `overflow: hidden` ancestor (e.g. a table cell in
- * `material-react-table` / `GenericPaginatedGrid`) — without this
- * configuration, MUI's Popper can mis-anchor and pin the tooltip to the
- * viewport's top-left corner (0,0) instead of near the input. The fix
- * deliberately *keeps* the `Tooltip` (rather than removing it) by letting it
- * portal-render to `document.body` and resolving its position against the
- * clipping ancestor's boundary. See the "Tooltip inside a clipped container"
- * Storybook story for a live repro.
+ * However, that fix does not reproduce in consumer apps still pinned to
+ * MUI v6 (below our `@mui/material >=7.3.1` peer requirement): the v6
+ * Popper/Tooltip runtime ignores the modifier configuration and the tooltip
+ * still mis-anchors to the viewport's top-left corner (0,0). Rather than ship
+ * a tooltip that only behaves correctly on some MUI majors, we suppress it at
+ * the prop level — `open={false}` puts MUI's `Tooltip` into fully-controlled
+ * mode so it never opens, while the `<Tooltip>` element (and its modifier
+ * config) stays in the tree, deliberately *not removed*. Once the anchoring
+ * fix is confirmed across all supported MUI majors, removing `open={false}`
+ * re-enables the tooltip with no other changes needed. See the
+ * "Tooltip inside a clipped container" Storybook story for the anchoring repro
+ * and the `open={false}` suppression in context.
  */
 declare const SingleSelectSearchApi: ({ props, variant, minSearchLength, debounceMs, fetchOptions, }: {
     props: FormRenderProps;

package/dist/components/FormComponents/Select/SingleSelectSearchApi.esm.js

@@ -50,22 +50,27 @@ function useDebounce(value, delayMs) {
  * Searches fire only after `minSearchLength` chars AND after the `debounceMs`
  * debounce delay — preventing a request per keystroke.
  *
- * ### Selected-value tooltip & anchoring inside clipped containers
- * The input is wrapped in a MUI `Tooltip` showing `resolvedValue.label` on
- * hover (useful when a narrow column truncates the label). The `Tooltip` is
- * configured with `placement="top-start"`, `arrow`, `disableInteractive`, and
- * a `slotProps.popper` block carrying Popper.js modifiers — `offset`,
- * `preventOverflow` (`boundary: 'clippingParents'`), and `flip`.
+ * ### Selected-value tooltip — currently suppressed via `open={false}`
+ * The input is wrapped in a MUI `Tooltip` that would show `resolvedValue.label`
+ * on hover (useful when a narrow column truncates the label). It carries
+ * `placement="top-start"`, `arrow`, `disableInteractive`, and a
+ * `slotProps.popper` block with Popper.js modifiers (`hide` disabled, `offset`,
+ * `preventOverflow`, `flip`) that correctly anchor it to the input even inside
+ * an `overflow: hidden` ancestor (e.g. a table cell in `material-react-table` /
+ * `GenericPaginatedGrid`) — **verified working in Storybook on MUI v7**.
  *
- * This keeps the tooltip correctly anchored to the input even when the field
- * sits inside an `overflow: hidden` ancestor (e.g. a table cell in
- * `material-react-table` / `GenericPaginatedGrid`) — without this
- * configuration, MUI's Popper can mis-anchor and pin the tooltip to the
- * viewport's top-left corner (0,0) instead of near the input. The fix
- * deliberately *keeps* the `Tooltip` (rather than removing it) by letting it
- * portal-render to `document.body` and resolving its position against the
- * clipping ancestor's boundary. See the "Tooltip inside a clipped container"
- * Storybook story for a live repro.
+ * However, that fix does not reproduce in consumer apps still pinned to
+ * MUI v6 (below our `@mui/material >=7.3.1` peer requirement): the v6
+ * Popper/Tooltip runtime ignores the modifier configuration and the tooltip
+ * still mis-anchors to the viewport's top-left corner (0,0). Rather than ship
+ * a tooltip that only behaves correctly on some MUI majors, we suppress it at
+ * the prop level — `open={false}` puts MUI's `Tooltip` into fully-controlled
+ * mode so it never opens, while the `<Tooltip>` element (and its modifier
+ * config) stays in the tree, deliberately *not removed*. Once the anchoring
+ * fix is confirmed across all supported MUI majors, removing `open={false}`
+ * re-enables the tooltip with no other changes needed. See the
+ * "Tooltip inside a clipped container" Storybook story for the anchoring repro
+ * and the `open={false}` suppression in context.
  */
 const SingleSelectSearchApi = ({ props, variant, minSearchLength = 3, debounceMs = 300, fetchOptions, }) => {
     // ── Stable references from props ──────────────────────────────────────────
@@ -206,25 +211,52 @@ const SingleSelectSearchApi = ({ props, variant, minSearchLength = 3, debounceMs
                         popper: { sx: { zIndex: 20000 } },
                         listbox: { sx: { fontSize: '11px' } },
                     }, PaperComponent: ({ children, ...paperProps }) => (jsx(Paper, { elevation: 4, ...paperProps, children: children })), renderInput: (params) => (jsx(Tooltip, { title: resolvedValue?.label ?? '', placement: "top-start", arrow: true, disableInteractive: true, 
-                        // Fixes a Popper mis-anchoring bug where the tooltip rendered
-                        // pinned to the viewport's top-left corner when this field
-                        // sits inside an `overflow: hidden` ancestor (e.g. a table
-                        // cell in material-react-table / GenericPaginatedGrid).
-                        // `disablePortal: false` (the default) lets the tooltip
-                        // escape the clipping ancestor by portal-rendering to
-                        // `document.body`, while the `preventOverflow` / `flip`
-                        // modifiers keep it correctly anchored to the input and
-                        // flip placement when there isn't room above.
-                        slotProps: {
+                        // ── Tooltip intentionally suppressed via props (kept in the tree) ──
+                        //
+                        // We previously tried to fix a Popper mis-anchoring bug where the
+                        // tooltip rendered pinned to the viewport's top-left corner
+                        // (`inset: 0 auto auto 0`) when this field sits inside an
+                        // `overflow: hidden` ancestor (e.g. a table cell in
+                        // `material-react-table` / `GenericPaginatedGrid`). The root
+                        // cause is Popper's built-in `hide` modifier collapsing the
+                        // popper once it judges the reference element "hidden" relative
+                        // to the `clippingParents` boundary — and disabling that
+                        // modifier (`{ name: 'hide', enabled: false }` below) verifiably
+                        // fixed the anchoring in Storybook (MUI v7), but the SAME build
+                        // still mis-anchored when consumed live in apps pinned to
+                        // MUI v6 (`@mui/material@6.x` vs. our `>=7.3.1` peer
+                        // requirement) — the v6 Popper/Tooltip runtime ignores/overrides
+                        // the modifier configuration.
+                        //
+                        // Rather than ship a tooltip that only works on some MUI majors,
+                        // we suppress it at the component-prop level: `open={false}`
+                        // forces MUI's Tooltip into fully-controlled mode and it will
+                        // NEVER open (hover/focus listeners still attach but have no
+                        // visual effect), so the broken Popper placement can never be
+                        // observed. The `<Tooltip>` wrapper is deliberately *retained*
+                        // (not removed) — flipping `open` back to the default
+                        // (uncontrolled/hover-driven) is a one-line change once the
+                        // anchoring is fixed for every supported MUI major.
+                        open: false, slotProps: {
                             popper: {
                                 sx: { zIndex: 20001 },
                                 modifiers: [
+                                    { name: 'hide', enabled: false },
                                     { name: 'offset', options: { offset: [0, 6] } },
                                     {
                                         name: 'preventOverflow',
-                                        options: { boundary: 'clippingParents', altAxis: true, padding: 8 },
+                                        options: {
+                                            boundary: 'clippingParents',
+                                            rootBoundary: 'viewport',
+                                            altAxis: true,
+                                            padding: 8,
+                                        },
+                                    },
+                                    {
+                                        name: 'flip',
+                                        enabled: true,
+                                        options: { rootBoundary: 'viewport', fallbackPlacements: ['bottom-start', 'top-start', 'right', 'left'] },
                                     },
-                                    { name: 'flip', enabled: true },
                                 ],
                             },
                         }, children: jsx(TextField, { ...params, error: isError && !formValue, label: variant !== 'standard'

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "tp-react-elements",
-  "version": "2.0.0",
+  "version": "2.0.2",
   "private": false,
   "type": "module",
   "description": "React form components library built with React Hook Form and Yup",