@recursica/mantine-adapter 0.50.0 → 0.50.1
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.
package/package.json
CHANGED
|
@@ -27,3 +27,4 @@ The `DatePicker` component is a wrapper around the `@mantine/dates` `DatePickerI
|
|
|
27
27
|
- **Default leading icon**: `leftSection={<CalendarIcon />}` (new `DatePicker.icons.tsx`, following the existing local-inline-SVG convention used by `Pagination.icons.tsx` — no icon library is a dependency of either adapter) is set the same way, overridable via `leftSection`.
|
|
28
28
|
- **Default placeholder**: `placeholder="MM / DD / YY"`, set the same way (before `sanitizedProps`, so consumers can override).
|
|
29
29
|
- **Single-line enforcement (bug fix)**: `DatePickerInput` renders its value/placeholder as a `<button>`'s text content, not a native `<input>` — it wraps like any other block text by default. A long placeholder (e.g. the original story's `"Select a deadline..."`) wrapped to two lines, inflating the field's height well past its `min-height` token and making the field visually look narrower than its actual `width` token value even though the box itself was always the right size. Fixed with `white-space: nowrap`/`text-overflow: ellipsis`/`overflow-x: clip`/`overflow-y: visible` on `.input`, the same convention `FileInput.module.css`'s `.value` uses.
|
|
30
|
+
- **Day focus ring (bug fix)**: Mantine's `Day` ships no built-in `:focus-visible` style of its own (unlike `.calendarHeaderControl`/`.calendarHeaderLevel`, which are styled as `Button` and inherited a focus ring from that treatment), so a focused day — e.g. the auto-focused selected/today day when the calendar opens — fell through to the browser's native blue outline instead of a Recursica token. Fixed by adding `.day:focus-visible` with the same generic `--recursica_brand_states_focus_*` box-shadow ring already used by `.input` and `.calendarHeaderControl`/`.calendarHeaderLevel`. mui-adapter's `.MuiPickerDay-root.Mui-focusVisible` already had this — only the mantine-adapter side was missing it.
|
|
@@ -544,3 +544,16 @@
|
|
|
544
544
|
);
|
|
545
545
|
opacity: 1;
|
|
546
546
|
}
|
|
547
|
+
|
|
548
|
+
/* Focus ring, same convention as calendarHeaderControl/input's own :focus-visible treatment.
|
|
549
|
+
Mantine's Day ships no explicit focus style of its own, so without this it fell through to
|
|
550
|
+
the browser's native (blue) :focus-visible outline instead of a Recursica token. */
|
|
551
|
+
.day:focus-visible {
|
|
552
|
+
outline: none;
|
|
553
|
+
box-shadow:
|
|
554
|
+
0 0 0 var(--recursica_brand_states_focus_border-size)
|
|
555
|
+
var(--recursica_brand_states_focus_color),
|
|
556
|
+
0 0 var(--recursica_brand_states_focus_blur)
|
|
557
|
+
var(--recursica_brand_states_focus_margin)
|
|
558
|
+
var(--recursica_brand_states_focus_color);
|
|
559
|
+
}
|
|
@@ -115,6 +115,31 @@ export const ErrorState: Story = {
|
|
|
115
115
|
},
|
|
116
116
|
};
|
|
117
117
|
|
|
118
|
+
export const OpenedCalendar: Story = {
|
|
119
|
+
args: {
|
|
120
|
+
label: "Meeting Date",
|
|
121
|
+
assistiveText: "Calendar rendered open by default for styling review.",
|
|
122
|
+
// `popoverProps.opened` overrides Mantine's own internal disclosure state (see
|
|
123
|
+
// PickerInputBase's `opened: dropdownOpened, ...popoverProps` spread order), so the
|
|
124
|
+
// dropdown stays open with no click interaction needed — same convention as Menu's
|
|
125
|
+
// `opened: true` stories.
|
|
126
|
+
popoverProps: { opened: true },
|
|
127
|
+
// Fixed (not computed) so the selected-day fill is visible on load, alongside the
|
|
128
|
+
// today marker, for styling review. Local-component constructor, not an ISO date
|
|
129
|
+
// string — `new Date("2026-08-26")` parses as UTC midnight, which renders as the
|
|
130
|
+
// 25th in any timezone behind UTC.
|
|
131
|
+
defaultValue: new Date(2026, 7, 26),
|
|
132
|
+
},
|
|
133
|
+
parameters: {
|
|
134
|
+
docs: {
|
|
135
|
+
description: {
|
|
136
|
+
story:
|
|
137
|
+
"The calendar dropdown renders open by default so its styling can be reviewed without a click interaction.",
|
|
138
|
+
},
|
|
139
|
+
},
|
|
140
|
+
},
|
|
141
|
+
};
|
|
142
|
+
|
|
118
143
|
export const StaticReadOnly: Story = {
|
|
119
144
|
args: {
|
|
120
145
|
label: "Static ReadOnly Review",
|