@overdoser/react-toolkit 0.0.10 → 0.0.11

package/AGENTS.md

@@ -113,7 +113,7 @@ Full copy-paste-able files live alongside this doc. Each is one self-contained f
 - [recipes/interactive-pie-chart.tsx](./recipes/interactive-pie-chart.tsx) — Metric/period filter for `PieChart`: all slices stay visible, the selector picks which metric drives the pie. Three exports: `InteractivePieChartTiles`, `InteractivePieChartNavigator`, `InteractivePieChartDropdown`.
 - [recipes/trading-chart.tsx](./recipes/trading-chart.tsx) — Full-stack `TradingChart` with a resolution selector, in-memory datafeed adapter, and the SMA/EMA/Bollinger/RSI/Volume indicator stack. Swap `createMemoryDatafeed` for your own REST/WebSocket adapter; everything else carries over.
 - [recipes/tag-input.tsx](./recipes/tag-input.tsx) — Tag-input pattern via `<Select multiple allowCreate>`: pick from existing tags or type a new one + Enter to create. `onCreate` persists the new tag back into the options list. Wired through `<FormField>` for react-hook-form integration.
-- [recipes/multi-select-in-modal.tsx](./recipes/multi-select-in-modal.tsx) — `<Select multiple>` inside `<Modal size="sm">`. Default `portal={true}` lets the menu escape the modal's `overflow: hidden` and sit above the modal via `--crk-z-floating`, so the modal does NOT need to be sized to contain the menu.
+- [recipes/multi-select-in-modal.tsx](./recipes/multi-select-in-modal.tsx) — `<Select multiple>` inside `<Modal size="sm">`. Default `portal={true}` lets the menu escape the modal's `overflow: hidden` and sit above the modal via `--crk-z-floating`, so the modal does NOT need to be sized to contain the menu. Pair with `closeOnBackdrop={false}` so a backdrop click closes the open menu only, not the modal.
 
 ## Anti-patterns to refuse
 

package/index.js

@@ -1329,7 +1329,8 @@ const Jt = $e(
               position: "fixed",
               top: q.top + 4,
               left: q.left,
-              minWidth: q.width,
+              right: "auto",
+              width: q.width,
               zIndex: "var(--crk-z-floating)"
             } : void 0, y = /* @__PURE__ */ s(
               "div",
@@ -1555,7 +1556,8 @@ const en = $e(
               position: "fixed",
               top: Y.top + 4,
               left: Y.left,
-              minWidth: Y.width,
+              right: "auto",
+              width: Y.width,
               zIndex: "var(--crk-z-floating)"
             } : void 0, D = /* @__PURE__ */ s(
               "div",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@overdoser/react-toolkit",
-  "version": "0.0.10",
+  "version": "0.0.11",
   "type": "module",
   "main": "./index.js",
   "module": "./index.js",

package/recipes/multi-select-in-modal.tsx

@@ -21,6 +21,12 @@ const TAGS = [
  * does NOT need to be sized large enough** to contain the menu. The menu
  * uses `--crk-z-floating` (1060) which sits above `--crk-z-modal` (1050).
  *
+ * Pair this pattern with `closeOnBackdrop={false}`: clicking the modal
+ * backdrop while the menu is open is "outside" the menu (closes the menu)
+ * AND on the backdrop (would close the modal too). Disabling backdrop
+ * dismissal scopes the click to closing only the menu — users dismiss the
+ * modal explicitly via Cancel/Save/×.
+ *
  * If you have a reason to keep the menu inside the modal subtree (e.g.,
  * parent-scoped CSS theming), pass `portal={false}` and size the modal
  * generously.
@@ -32,7 +38,7 @@ export function MultiSelectInModalRecipe() {
   return (
     <>
       <Button onClick={() => setOpen(true)}>Edit tags</Button>
-      <Modal open={open} onClose={() => setOpen(false)} size="sm">
+      <Modal open={open} onClose={() => setOpen(false)} size="sm" closeOnBackdrop={false}>
         <Modal.Header onClose={() => setOpen(false)}>Tags</Modal.Header>
         <Modal.Body>
           <label style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>