blixify-ui-web-mcp 0.1.62 → 0.1.63
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -79,7 +79,7 @@ Async / database search:
|
|
|
79
79
|
| `disableKeyboard` | `boolean` | `false` | Disable keyboard navigation in the dropdown |
|
|
80
80
|
| `showTag` | `boolean` | — | Show selected values as removable tags below the input (multi select only) |
|
|
81
81
|
| `closeOnClickOutside` | `boolean` | — | Keep the dropdown open until the user clicks outside. Multi select only |
|
|
82
|
-
| `mobileView` | `boolean` | — | Open a bottom-sheet modal on screens narrower than 768px instead of the inline dropdown
|
|
82
|
+
| `mobileView` | `boolean` | — | Open a bottom-sheet modal on screens narrower than 768px instead of the inline dropdown. With an array `value` the sheet stays open after each pick and shows a checkbox per option |
|
|
83
83
|
| `portalDropdown` | `boolean` | — | Render the dropdown via a React portal (fixed position). Useful inside overflow-hidden containers |
|
|
84
84
|
| `portalDropdownScrollOffset` | `boolean` | `true` | Only applies when `portalDropdown` is true. When `true` (default), adds `window.scrollY/X` to the dropdown position — correct for normal page usage. Set to `false` inside tables or overflow containers where `getBoundingClientRect()` already returns viewport-relative coords (e.g. FlexTable hardcodes this to `false` automatically) |
|
|
85
85
|
| `staticDropdown` | `boolean` | — | Render the dropdown in static position (takes up space below the input) instead of absolute |
|
|
@@ -53,6 +53,7 @@ const genderOptions: Option[] = [
|
|
|
53
53
|
export const Select = () => {
|
|
54
54
|
const [value, setValue] = useState("");
|
|
55
55
|
const [multiValue, setMultiValue] = useState<string[]>(["M"]);
|
|
56
|
+
const [mobileMultiValue, setMobileMultiValue] = useState<string[]>([]);
|
|
56
57
|
const [dbValue, setDBValue] = useState("");
|
|
57
58
|
const [dbOptions, setDBOptions] = useState<Option[]>([
|
|
58
59
|
{ key: "M", label: "Male", secondaryLabel: "Secondary Label" },
|
|
@@ -208,7 +209,7 @@ export const Select = () => {
|
|
|
208
209
|
|
|
209
210
|
<StorySection
|
|
210
211
|
title="Mobile View"
|
|
211
|
-
description="mobileView=true opens a bottom-sheet modal on screens narrower than 768px instead of the inline dropdown."
|
|
212
|
+
description="mobileView=true opens a bottom-sheet modal on screens narrower than 768px instead of the inline dropdown. A multi-select sheet stays open and shows a checkbox per option."
|
|
212
213
|
>
|
|
213
214
|
<div className="w-full md:w-1/2">
|
|
214
215
|
<SelectImpl
|
|
@@ -219,6 +220,16 @@ export const Select = () => {
|
|
|
219
220
|
onChange={(v: string) => setValue(v)}
|
|
220
221
|
/>
|
|
221
222
|
</div>
|
|
223
|
+
<div className="mt-4 w-full md:w-1/2">
|
|
224
|
+
<SelectImpl
|
|
225
|
+
value={mobileMultiValue}
|
|
226
|
+
label="Mobile View Multi"
|
|
227
|
+
options={genderOptions}
|
|
228
|
+
mobileView
|
|
229
|
+
showTag
|
|
230
|
+
onChange={(v: string[]) => setMobileMultiValue(v)}
|
|
231
|
+
/>
|
|
232
|
+
</div>
|
|
222
233
|
</StorySection>
|
|
223
234
|
|
|
224
235
|
<StorySection
|