tp-react-elements 2.0.1 → 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/_virtual/index.esm12.js

@@ -1,3 +1,3 @@
-var InputRangeField = {};
+var Month = {};
 
-export { InputRangeField as __exports };
+export { Month as __exports };

package/dist/_virtual/index.esm13.js

@@ -1,3 +1,3 @@
-var Month = {};
+var DateInput = {};
 
-export { Month as __exports };
+export { DateInput as __exports };

package/dist/_virtual/index.esm14.js

@@ -1,3 +1,3 @@
-var DateInput = {};
+var InputRangeField = {};
 
-export { DateInput as __exports };
+export { InputRangeField as __exports };

package/dist/_virtual/index.esm4.js

@@ -1,3 +1,3 @@
-var DateRangePicker = {};
+var DateRange = {};
 
-export { DateRangePicker as __exports };
+export { DateRange as __exports };

package/dist/_virtual/index.esm5.js

@@ -1,3 +1,3 @@
-var DefinedRange = {};
+var Calendar = {};
 
-export { DefinedRange as __exports };
+export { Calendar as __exports };

package/dist/_virtual/index.esm6.js

@@ -1,3 +1,3 @@
-var DateRange = {};
+var DateRangePicker = {};
 
-export { DateRange as __exports };
+export { DateRangePicker as __exports };

package/dist/_virtual/index.esm7.js

@@ -1,3 +1,3 @@
-var Calendar = {};
+var DefinedRange = {};
 
-export { Calendar as __exports };
+export { DefinedRange as __exports };

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,30 +211,33 @@ 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).
+                        // ── Tooltip intentionally suppressed via props (kept in the tree) ──
                         //
-                        // ROOT CAUSE: Popper.js ships a built-in `hide` modifier that
-                        // runs `detectOverflow` against the `clippingParents` boundary.
-                        // Because our reference element (the input) sits inside an
-                        // `overflow: hidden` table cell, Popper decides the reference
-                        // is "hidden" relative to that clipping boundary and collapses
-                        // the popper to `inset: 0 auto auto 0` (the body's top-left
-                        // origin) — regardless of `placement`/`offset`/`preventOverflow`
-                        // configuration. That's the (0,0) pin we were seeing.
+                        // 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.
                         //
-                        // FIX: explicitly disable the `hide` modifier (we don't want
-                        // "hide when clipped" behaviour — we want the tooltip to
-                        // escape the clipping ancestor instead), and measure overflow
-                        // against the `viewport` (via `rootBoundary`) rather than the
-                        // clipping table cell, since the whole point is to stay
-                        // visible in the viewport even when the anchor is inside a
-                        // clipped container. `disablePortal: false` (the default)
-                        // portal-renders the tooltip to `document.body` so it can
-                        // visually escape the clipping ancestor.
-                        slotProps: {
+                        // 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: [

package/dist/node_modules/react-date-range/dist/components/Calendar/index.esm.js

@@ -1,4 +1,4 @@
-import { __exports as Calendar } from '../../../../../_virtual/index.esm7.js';
+import { __exports as Calendar } from '../../../../../_virtual/index.esm5.js';
 import React__default from 'react';
 import { __require as requirePropTypes } from '../../../../prop-types/index.esm.js';
 import { __require as requireDayCell } from '../DayCell/index.esm.js';

package/dist/node_modules/react-date-range/dist/components/DateInput/index.esm.js

@@ -1,4 +1,4 @@
-import { __exports as DateInput } from '../../../../../_virtual/index.esm14.js';
+import { __exports as DateInput } from '../../../../../_virtual/index.esm13.js';
 import React__default from 'react';
 import { __require as requirePropTypes } from '../../../../prop-types/index.esm.js';
 import { __require as requireClassnames } from '../../../../classnames/index.esm.js';

package/dist/node_modules/react-date-range/dist/components/DateRange/index.esm.js

@@ -1,4 +1,4 @@
-import { __exports as DateRange } from '../../../../../_virtual/index.esm6.js';
+import { __exports as DateRange } from '../../../../../_virtual/index.esm4.js';
 import React__default from 'react';
 import { __require as requirePropTypes } from '../../../../prop-types/index.esm.js';
 import { __require as requireCalendar } from '../Calendar/index.esm.js';

package/dist/node_modules/react-date-range/dist/components/DateRangePicker/index.esm.js

@@ -1,4 +1,4 @@
-import { __exports as DateRangePicker } from '../../../../../_virtual/index.esm4.js';
+import { __exports as DateRangePicker } from '../../../../../_virtual/index.esm6.js';
 import React__default from 'react';
 import { __require as requirePropTypes } from '../../../../prop-types/index.esm.js';
 import { __require as requireDateRange } from '../DateRange/index.esm.js';

package/dist/node_modules/react-date-range/dist/components/DefinedRange/index.esm.js

@@ -1,4 +1,4 @@
-import { __exports as DefinedRange } from '../../../../../_virtual/index.esm5.js';
+import { __exports as DefinedRange } from '../../../../../_virtual/index.esm7.js';
 import React__default from 'react';
 import { __require as requirePropTypes } from '../../../../prop-types/index.esm.js';
 import { __require as requireStyles } from '../../styles.esm.js';

package/dist/node_modules/react-date-range/dist/components/InputRangeField/index.esm.js

@@ -1,4 +1,4 @@
-import { __exports as InputRangeField } from '../../../../../_virtual/index.esm12.js';
+import { __exports as InputRangeField } from '../../../../../_virtual/index.esm14.js';
 import React__default from 'react';
 import { __require as requirePropTypes } from '../../../../prop-types/index.esm.js';
 

package/dist/node_modules/react-date-range/dist/components/Month/index.esm.js

@@ -1,4 +1,4 @@
-import { __exports as Month } from '../../../../../_virtual/index.esm13.js';
+import { __exports as Month } from '../../../../../_virtual/index.esm12.js';
 import React__default from 'react';
 import { __require as requirePropTypes } from '../../../../prop-types/index.esm.js';
 import { __require as requireDayCell } from '../DayCell/index.esm.js';

package/package.json

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