@overdoser/react-toolkit 0.0.9 → 0.0.11

package/llms.txt

@@ -193,6 +193,7 @@ Two distinct usage modes — pick one:
 - `align?: 'left' | 'right'` — default `'left'`. Menu alignment relative to trigger.
 - `error?: boolean` — default `false`
 - `fullWidth?: boolean` — default `true`
+- `portal?: boolean` — default `true`. The open menu is rendered in a portal at `document.body` so it escapes `overflow: hidden` ancestors (Modal body, scroll containers). Uses `--crk-z-floating` (1060) which sits above `--crk-z-modal` (1050). Set to `false` if you need the menu in the trigger's DOM subtree (e.g., parent-scoped CSS theming).
 - `id?: string`
 - `onOpen?: () => void`
 - `onClose?: () => void`
@@ -370,6 +371,7 @@ Props:
 - `allowCreate?: boolean` — default `false`. Multi-mode only. Adds a "Create '<query>'" row when the search query doesn't match an existing option. Pressing Enter (or clicking the row) pushes the trimmed query into `onValuesChange` and fires `onCreate`.
 - `onCreate?: (value: string) => void` — Multi-mode only, paired with `allowCreate`. Fires with the new value; consumers typically persist it (e.g. push it back into `options`).
 - `createLabel?: (query: string) => ReactNode` — Multi-mode only. Custom render for the create row. Default: `Create "<query>"`.
+- `portal?: boolean` — default `true`. Applies to `searchable` + `multiple` modes (native `<select>` is unaffected). The open menu is rendered in a portal at `document.body` with `position: fixed` + `--crk-z-floating` (1060), so it escapes `overflow: hidden` ancestors and sits above `--crk-z-modal` (1050). Means a `<Select>` inside a `<Modal>` works without needing to size the modal. Pass `false` if you need the menu inside the trigger's subtree.
 - `classes?: Partial<SelectClasses>` where `SelectClasses = { wrapper, root, arrow, search, menu, item, chip, chipRemove }`
 
 Searchable example:

package/manifest.json

@@ -124,6 +124,7 @@
         "align": { "type": "enum", "values": ["left", "right"], "default": "left" },
         "error": { "type": "boolean", "default": false },
         "fullWidth": { "type": "boolean", "default": true },
+        "portal": { "type": "boolean", "default": true, "notes": "Renders the open menu in a portal at document.body using --crk-z-floating (1060). Escapes overflow:hidden ancestors and sits above modals. Set false to keep the menu in the trigger's subtree." },
         "id": { "type": "string" },
         "onOpen": { "type": "() => void" },
         "onClose": { "type": "() => void" },
@@ -256,6 +257,7 @@
         "allowCreate": { "type": "boolean", "default": false, "notes": "Multi-mode only. Adds a 'Create <query>' row when the query doesn't match an existing option; pressing Enter (or clicking it) pushes the trimmed query into onValuesChange and fires onCreate." },
         "onCreate": { "type": "(value: string) => void", "notes": "Multi-mode only. Paired with allowCreate." },
         "createLabel": { "type": "(query: string) => ReactNode", "notes": "Multi-mode only. Custom render for the Create row." },
+        "portal": { "type": "boolean", "default": true, "notes": "Applies to searchable + multiple modes. Renders the open menu in a portal at document.body using --crk-z-floating (1060) — escapes overflow:hidden ancestors and sits above modals. Set false to keep the menu in the trigger's subtree." },
         "classes": { "type": "Partial<SelectClasses>", "shape": ["wrapper", "root", "arrow", "search", "menu", "item", "chip", "chipRemove"] }
       }
     },
@@ -663,6 +665,7 @@
     "recipes/interactive-area-chart.tsx",
     "recipes/interactive-pie-chart.tsx",
     "recipes/trading-chart.tsx",
-    "recipes/tag-input.tsx"
+    "recipes/tag-input.tsx",
+    "recipes/multi-select-in-modal.tsx"
   ]
 }

package/package.json

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

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

@@ -0,0 +1,74 @@
+import { useState } from 'react';
+import { Button, Modal, Select } from '@overdoser/react-toolkit';
+
+const TAGS = [
+  { value: 'react', label: 'React' },
+  { value: 'typescript', label: 'TypeScript' },
+  { value: 'rust', label: 'Rust' },
+  { value: 'go', label: 'Go' },
+  { value: 'python', label: 'Python' },
+  { value: 'graphql', label: 'GraphQL' },
+  { value: 'css', label: 'CSS' },
+  { value: 'docker', label: 'Docker' },
+  { value: 'kubernetes', label: 'Kubernetes' },
+  { value: 'postgres', label: 'PostgreSQL' },
+];
+
+/**
+ * Demonstrates that a multi-select dropdown menu renders correctly inside a
+ * `<Modal>`. By default `Select` portals its open menu to `document.body` so
+ * it escapes the modal's `overflow: hidden` clipping — meaning **the modal
+ * 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.
+ */
+export function MultiSelectInModalRecipe() {
+  const [open, setOpen] = useState(false);
+  const [values, setValues] = useState<string[]>([]);
+
+  return (
+    <>
+      <Button onClick={() => setOpen(true)}>Edit tags</Button>
+      <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 }}>
+            <span style={{ fontSize: 12, color: 'var(--crk-color-text-muted)' }}>
+              Pick all that apply
+            </span>
+            <Select
+              multiple
+              options={TAGS}
+              value={values}
+              onValuesChange={setValues}
+              placeholder="Pick tags…"
+            />
+          </label>
+        </Modal.Body>
+        <Modal.Footer>
+          <Button variant="ghost" onClick={() => setOpen(false)}>
+            Cancel
+          </Button>
+          <Button
+            variant="primary"
+            onClick={() => {
+              // ...persist values, then:
+              setOpen(false);
+            }}
+          >
+            Save
+          </Button>
+        </Modal.Footer>
+      </Modal>
+    </>
+  );
+}