@lotics/ui 17.0.2 → 18.1.0

package/MIGRATION.md

@@ -4,6 +4,26 @@ Breaking changes, newest first — normally per major, plus the rare minor that
 anyway (recorded under its exact version). The current contract lives in `AGENTS.md` + `docs/`;
 this file exists only to move an app from one release to the next.
 
+## v18 from 17.x
+
+**`TimePicker` is a segmented field, not `<input type="time">`.** A native time input takes
+its 12- vs 24-hour form from the BROWSER's UI locale and ignores the `lang` attribute
+entirely, so a Vietnamese screen on an en-US browser rendered "01:45 PM" beside its own
+24-hour text. It now uses the same segment engine as `DateField`, with the format derived
+from a `locale` prop (defaulting to the active `LoticsLocaleProvider` locale).
+
+The value is unchanged — canonical 24-hour `"HH:mm"` either way. Two prop changes:
+
+- **`onKeyDown` is GONE.** It typed the DOM input's key events, which no longer exist. Use
+  `onEscape` for cancel; a completed entry emits through `onValueChange` as before.
+- **`onIncompleteChange` is NEW** and matters for inline editors: segments emit only a
+  COMPLETE `"HH:mm"`, so a half-typed entry (an hour, no minute) arrives as `""` and would
+  otherwise commit as a silent clear. Block the commit on it — `InlineTimePicker` does, and
+  surfaces the new `datePicker.invalidTime` label.
+
+`DatePickerLabels` gains **`invalidTime`**; a caller that builds the label bag by hand (rather
+than spreading the locale pack) must add it.
+
 ## v17 from 16.x
 
 **`Checklist` / `ChecklistRow` are DELETED.** They are replaced by the `Task` compound

package/docs/catalog.md

@@ -171,7 +171,7 @@ component — children are the body), `Subsection` (+ `SubsectionHeading`/
 `SubsectionHeadingTitle` — the named group INSIDE a section, `###` lg-semibold title),
 `SectionStack` (the flat page's content column — owns the fixed 56px beat + hairline between
 top-level blocks), `SubsectionStack` (a section's `Subsection` groups — fixed 32px beat,
-SPACE-ONLY: titles carry the grouping, hairlines stay at the section level), `SectionCard`, `PageHeader` /
+space-only while the groups are SHORT, `divided` once they run long), `SectionCard`, `PageHeader` /
 `PageContent`, `Stack`, `Spacer`, `Divider`, `Accordion`, `Tabs`, `SegmentedControl`,
 `Stepper`, `DangerZone` (the destructive section — delete/archive — set apart at the bottom
 of a record/settings surface).
@@ -388,9 +388,10 @@ source (`src/<module>.tsx`/`.ts`) is the API reference.
   `@lotics/ui/section` only when you specifically want this collapsible titled block.
 - **`section_stack`** — `SectionStack` · `SubsectionStack` — stacks that own the
   between-block law, skipping null children: `SectionStack` = a fixed 56px beat + a hairline
-  `Divider` between top-level blocks; `SubsectionStack` = a fixed 32px beat, space-only (no
-  hairline — titles carry the grouping, `divided` an opt-in for a rare headingless stack);
-  stop hand-rolling gap + `<Divider />` pairs.
+  `Divider` between top-level blocks; `SubsectionStack` = a fixed 32px beat, space-only while
+  the groups are SHORT (the titles carry the grouping, hairlines stay at the section level) and
+  `divided` once they run LONG — past a screenful, 32px reads as one more row gap and the next
+  title arrives unmarked. Length decides, not headings. Stop hand-rolling gap + `<Divider />` pairs.
 - **`section_card`** — `SectionCard`: a titled card with a one-line description and an
   optional hairline-set `footer` (where `TrendFooter` and source notes go).
 - **`stack`** — `Stack`: gap-spaced row/column; `useSeparator` inserts `Separator`s between
@@ -454,8 +455,13 @@ source (`src/<module>.tsx`/`.ts`) is the API reference.
 - **`action_menu`** — `ActionMenu`: the ⋯ overflow menu (`ActionMenuItem[]`; danger items
   last).
 - **`menu_button`** — `MenuButton`: the menu/rail row (icon · title · `right` slot;
-  `selected`/`focused`/`danger`; `role` menuitem|button|option) — popover menus, outline
-  rails, section pickers.
+  `focused`/`danger`; `role` menuitem|button|option) — popover menus, outline rails, section
+  pickers. Its resting highlight has TWO meanings and they are not interchangeable:
+  **`selected`** is listbox SELECTION (emitted as `aria-selected`, and only under
+  `role="option"` — the attribute is invalid anywhere else), **`current`** is the current
+  item of a NAVIGATION set (`aria-current`, global, so any role) — `true`, or the token
+  naming the set (`"page"` for a routed pane, `"step"`, `"location"`). An outline rail and a
+  section picker take `current`; a picker option takes `selected`.
 - **`menu_list_item`** — `MenuListItem`: the richer listbox/menu row (title + description +
   `right`; `selected` vs roving `focused` via `aria-activedescendant`). No fixed height — it
   GROWS with its content, and `title` takes a node, so it is what `OptionList`/`Combobox` render
@@ -474,11 +480,18 @@ source (`src/<module>.tsx`/`.ts`) is the API reference.
   matches the surface it spans. `TableRow` / `LinkedRecordBox` are the in-kit consumers —
   reach for it when designing a row those don't cover.
 - **`linked_record_box`** — `LinkedRecordBox`: a bordered box scoping ANOTHER record's data
-  (`icon` · `name` · `subtitle` · vertical `facts`), the WHOLE box a keyboard door into its
-  detail (`onOpen`/`doorLabel`); verbs ride an `actions` slot in a hairline-fenced footer at the
-  bottom (destructive LEFT, go-to RIGHT — the divider draws itself when `actions` is present, so
-  don't hand-add one). Use it wherever a record points at another (a shipment's customer, an invoice's
-  party, a case's sibling). It **enforces the a11y contract** copy-pasting got wrong: a
+  (`icon` · `name` · `subtitle` · vertical `facts`); verbs ride an `actions` slot in a
+  hairline-fenced footer at the bottom (destructive LEFT, go-to RIGHT — the divider draws itself
+  when `actions` is present, so don't hand-add one). Use it wherever a record points at another (a
+  shipment's customer, an invoice's party, a case's sibling). **`onOpen` picks the variant, and
+  they are exclusive at the type level**: WITH it (+ the required `doorLabel`) the whole box is a
+  keyboard door into the record's detail and `facts` values are TEXT (`""` → "—"); WITHOUT it the
+  box is a STATIC card — no door, no tab stop, no pointer, nothing announced as a button — and a
+  `facts` value may be a NODE (an inline editor; a node prints as authored, no "—"). Reach for the
+  static one when the linked record has NO page of its own: nothing to open, so the box is where
+  its values are read and edited, and the only interactive parts are `actions` + the fact nodes.
+  Under a door, `actions` is the ONLY place a control may live (a fact editor there would compete
+  with the press). The door variant **enforces the a11y contract** copy-pasting got wrong: a
   container with interactive descendants is never `role="button"` (invalid HTML) — an internal
   empty door sibling carries the tab stop / name / focus ring, verbs lift above via `zIndex`.
   The reassign picker / empty state that swaps in for the box is the consumer's.
@@ -495,7 +508,8 @@ source (`src/<module>.tsx`/`.ts`) is the API reference.
 - **`count`** — `Count`: a small circular count bubble (`color` highlight|muted|red).
 - **`shortcut_badge`** — `ShortcutBadge`: the keycap hint pill — a zinc-50 badge rendering a
   shortcut from a raw string or `ShortcutDescriptor` (⌘B on Mac, Ctrl+B elsewhere); null on
-  small screens. `TextInputField shortcut` renders it built-in.
+  small screens. `TextInputField shortcut` renders it built-in, while the field is EMPTY —
+  it hints at reaching the field, so a value replaces it (with the clear ✕, when `clearable`).
 - **`keyboard`** — `isMac` · `ShortcutDescriptor` · `formatShortcut` (platform-aware
   shortcut formatting behind `ShortcutBadge`).
 
@@ -555,7 +569,10 @@ source (`src/<module>.tsx`/`.ts`) is the API reference.
 - **`text_input_field`** — `TextInputField`: the standard text input (multiline grows via
   the auto-grow engine; `shortcut` renders a `ShortcutBadge`). Its surface is WHITE on any
   background — on a tinted panel the input still reads as an open well, never blending into
-  the tint; override via `style` only when a surface genuinely wants otherwise.
+  the tint; override via `style` only when a surface genuinely wants otherwise. It RESERVES
+  its own right gutter whenever a trailing affordance is up (the `clearable` ✕, the `shortcut`
+  badge), so a long value is held off it — never hand-roll a `paddingRight` to compensate. A
+  field with an empty slot reserves nothing, so its text starts and ends where it always did.
 - **`number_input`** — `NumberInput`: numeric input; `format` for currency/units.
 - **`search_input`** — `SearchInput`: the search box for toolbars/filters.
 - **`form_field`** — `FormField` + `useFormField`: label / description / warning / error /
@@ -600,11 +617,19 @@ source (`src/<module>.tsx`/`.ts`) is the API reference.
   localized weekday/month names via BCP-47 `locale`, `firstDayOfWeek` (default Monday),
   `ref.navigateToMonth`. The engine `DatePicker`/`DateFilter` wrap in field chrome — reach
   for it bare only when the calendar lives permanently on the surface, not behind a field.
-- **`date_filter`** — `DateFilter`: the single/range date+time filter panel — presets
+- **`date_filter`** — `DateFilter`: the date+time period filter panel — presets
   (`PresetId`), calendar, optional time segments; the body `DateRangeFilterField` opens.
+  **One selection rule, no modes**: a click OPENS a range, the next CLOSES it (in either
+  order — bounds come back sorted), and a single day is the same day clicked twice
+  (`start`/`end` equal — which is how a consumer detects "one day" and how the trigger
+  renders it as a single date). Both bounds always show, so a half-picked range names the
+  end that is still open.
 - **`date_range_filter_field`** — `DateRangeFilterField`: the register's period filter field
   (presets + footer + time-segment a11y; localized via the `dateRange` locale slice).
-- **`time_picker`** — `TimePicker`: the time-of-day input.
+- **`time_picker`** — `TimePicker`: the time-of-day field. Segments (hour / minute / AM-PM),
+  **12- vs 24-hour derived from `locale`** — never from the browser, which is why this is not
+  an `<input type="time">`. The value is always canonical 24-hour `"HH:mm"`; `locale` changes
+  only what is displayed and typed.
 
 ### Inline editing & record surfaces
 
@@ -849,8 +874,11 @@ source (`src/<module>.tsx`/`.ts`) is the API reference.
   is open. Lives in the primitives — never call it from a screen.
 - **`use_section_nav`** — `useSectionNav`: scroll-spy for a LONG record surface with a left
   outline rail — keys in page order → `{scrollRef, onScroll, register(key)→onLayout,
-  jumpTo(key), activeKey}`; rail items are `MenuButton`s (`selected={activeKey===key}`);
-  section wrappers must be DIRECT children of the ScrollView content. On NARROW containers
+  jumpTo(key), activeKey}`; rail items are `MenuButton`s (`current={activeKey===key}` — a
+  rail item is navigation, never a selected option);
+  section wrappers must be DIRECT children of the ScrollView content. The highlight and the
+  jump both re-measure the live DOM on web, so content loading in above a section never
+  strands them. On NARROW containers
   the rail becomes a PINNED bar naming the CURRENT section that opens a full-page
   section-picker `Modal` — never a horizontal tab strip. Worked example:
   [`tpl_record`](../examples/tpl_record.tsx).

package/docs/composition.md

@@ -63,9 +63,12 @@ restyle a heading level per-page.
   `SubsectionHeading` › `SubsectionHeadingTitle` (`###` — lg semibold, with the same `info` ⓘ
   affordance as `SectionHeadingTitle`; siblings — a `Badge`, a
   `SectionHeadingMeta`, an action — ride the heading row's right edge). Sibling subsections stack
-  in a **`SubsectionStack`** (a fixed 32px beat, SPACE-ONLY — subsection titles carry the
-  grouping; hairlines belong to the SECTION level, one rule per altitude; no margins, no
-  hand-rolled dividers); a headingless `Subsection` is the
+  in a **`SubsectionStack`** (a fixed 32px beat; no margins, no hand-rolled dividers).
+  It is SPACE-ONLY while the groups are SHORT — the titles carry the grouping and hairlines
+  belong to the SECTION level, one rule per altitude — and takes `divided` once the groups run
+  LONG: past a screenful of rows the 32px beat reads as one more row gap and the next title
+  arrives with nothing marking that a new group started. LENGTH is the discriminator, not
+  whether the groups are titled. A headingless `Subsection` is the
   section's lead group. Group leads INSIDE a subsection's rows are `md` medium at most. Do NOT
   hand-roll `Text weight="semibold"` group leads inside a section, and never promote a subsection
   to its own section-level heading just to separate it.
@@ -448,13 +451,19 @@ gate's SCOPE, once** — never prose beside the button, never revealed only on p
   the band's invisible bottom half must never read as a hole above the description.
 - **A LINKED record never renders as field rows** — another record's data must not read as
   fields on THIS one. Use **`LinkedRecordBox`** (`tpl_record`'s Customer/sibling are the worked
-  examples): a BORDERED, fully pressable box (glyph anchor · identity · facts stacked
-  vertically) whose press opens the record's detail drawer; the verbs ride its `actions` slot
-  in a hairline-fenced footer INSIDE the box — destructive LEFT in danger, go-to RIGHT. One verb
-  set across every box of a group (a party wall's five links all read "Gỡ", not a mix of
+  examples): a BORDERED box (glyph anchor · identity · facts stacked vertically) whose verbs
+  ride its `actions` slot in a hairline-fenced footer INSIDE the box — destructive LEFT in
+  danger, go-to RIGHT. One verb set across every box of a group (a party wall's five links all read "Gỡ", not a mix of
   "Đổi"/"Gỡ"): with a clearable link, changing = remove → the empty-state picker re-prompts, so
-  the destructive verb covers both required anchors and optional adds. Editing the linked record happens on
-  ITS page, never here.
+  the destructive verb covers both required anchors and optional adds.
+  **`onOpen` decides whether the box is a DOOR, and the kit makes the two exclusive.** Pass it
+  (with `doorLabel`) when the linked record HAS a detail surface: the whole box presses open, its
+  facts are TEXT, and editing that record happens on ITS page, never here. OMIT it when the record
+  has NO page of its own — the box renders static (no tab stop, no pointer, nothing announced as a
+  button), the explicit `actions` verbs are its only affordances, and a `facts` value may then be a
+  NODE holding the inline editor, since there is no destination a press could steal. Never wire a
+  door "so the box presses": it sends the reader somewhere they did not ask to go and duplicates
+  whatever change verb the footer already shows.
   **The empty / attach state is a find-or-create `Combobox`, never a bare picker** (`tpl_record`'s
   Customer is the worked example): rows are `renderOptionContent`-rich, NOT a wall of bare names —
   the premium shape is a **glyph tile (28·radius 7·zinc-100) · the name over a muted metadata line**
@@ -468,13 +477,15 @@ gate's SCOPE, once** — never prose beside the button, never revealed only on p
   WITHOUT leaving the record. `customOptionPlacement:"top"` keeps the create row visible while the
   keyboard highlight stays on the first MATCH, so Enter on a partial never makes a duplicate. A
   linked record seeded by a workflow (not user-attached) skips the picker — show the box or an
-  `EmptyState`, no create affordance. The component OWNS the press ANATOMY (the error-prone part hand-rolling
-  got wrong): the box is a `PressableRow` (role-less, non-focusable surface — hover wash spans
+  `EmptyState`, no create affordance. The component OWNS the door variant's press ANATOMY (the
+  error-prone part hand-rolling got wrong): the box is a `PressableRow` (role-less, non-focusable surface — hover wash spans
   the nested verbs) with the keyboard DOOR — an EMPTY absolutely-positioned `role="button"`
   sibling carrying the tab stop, the accessible name and the focus ring — beneath the content,
   the interior verbs lifted above it via `zIndex: 1`. NEVER `role="button"` on a container with
   interactive descendants: a button must not contain a button (invalid HTML, a hydration error,
-  and AT double-announcement).
+  and AT double-announcement). That fenced, lifted footer is the ONLY place a control may sit
+  inside a door box — a control in the facts column would compete with the press for the same
+  click, which is why a node fact typechecks only on the doorless variant.
 
 ## Color discipline — solid / tint / ramp + ONE accent
 

package/docs/data_entry.md

@@ -346,7 +346,9 @@ level up — money never reads as one pot); each closes with a SEQUENTIAL confir
 its blockers ("Confirm check-in first."). The header status chip carries the phase.
 
 A LONG record surface pairs with a LEFT OUTLINE RAIL — `MenuButton` items + `useSectionNav`
-(scroll-spy: jump to a section, the highlight follows the scroll); on narrow containers the rail
+(scroll-spy: jump to a section, the highlight follows the scroll); the active item is
+`current={activeKey === key}`, the NAVIGATION state, never `selected`, which is listbox
+selection. On narrow containers the rail
 becomes a PINNED bar naming the current section that opens a full-page section-picker `Modal`. A
 per-phase dot on a rail item carries its confirmed state. A direction that is a TYPE (one record
 per event) is instead a discriminator chosen ONCE at creation — a `SegmentedControl` in the

package/docs/templates.md

@@ -392,8 +392,9 @@ billing, and quick-capture templates. Top → bottom:
   section; the fenced red `DangerZone` card is the section's BODY.
 - A LEFT OUTLINE RAIL (`MenuButton` + `useSectionNav`) — **the rail is the page's COMPLETE
   map** (every section including Danger zone; subsections never join it) — headed by the
-  bare circular `BackButton`; it scroll-spies the active section, and on narrow containers
-  becomes the pinned current-section bar opening a section-picker `Modal`.
+  bare circular `BackButton`; it scroll-spies the active section (`current={activeKey === key}`
+  on each item — navigation, not selection), and on narrow containers becomes the pinned
+  current-section bar opening a section-picker `Modal` whose items carry the same `current`.
 - **The page layout is the DOCS layout — the reading column is CENTRED IN THE VIEWPORT, and
   the rail sits in its left gutter.** The `ScrollView` is FULL-WIDTH — **never cap it at
   `CONTENT_MAX`, or the scroll container becomes the column and the gutters go wheel-dead**

package/examples/tpl_record.tsx

@@ -2552,7 +2552,7 @@ export function TplRecord() {
                 key={sec.key}
                 icon={sec.icon}
                 title={sec.label}
-                selected={nav.activeKey === sec.key}
+                current={nav.activeKey === sec.key}
                 onPress={() => {
                   setSectionsOpen(false);
                   nav.jumpTo(sec.key);
@@ -3075,7 +3075,7 @@ export function TplRecord() {
         <BackButton label="Records" onPress={() => {}} />
         <View style={{ gap: 2 }}>
           {SECTIONS.map((sec) => (
-            <MenuButton key={sec.key} icon={sec.icon} title={sec.label} selected={nav.activeKey === sec.key} onPress={() => nav.jumpTo(sec.key)} />
+            <MenuButton key={sec.key} icon={sec.icon} title={sec.label} current={nav.activeKey === sec.key} onPress={() => nav.jumpTo(sec.key)} />
           ))}
         </View>
       </View>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lotics/ui",
-  "version": "17.0.2",
+  "version": "18.1.0",
   "type": "module",
   "exports": {
     "./vite": {

package/src/combobox.tsx

@@ -360,12 +360,13 @@ export interface ComboboxInputProps {
 export function ComboboxInput(props: ComboboxInputProps) {
   const { icon, placeholder, clearable = false, onClear, clearLabel, accessibilityLabel, testID } = props;
   const ctx = useComboboxContext("ComboboxInput");
-  // Select mode (no leading icon): the right slot holds the clear ✕ when the field
-  // carries text (a reflected selection or a live query) AND it's clearable;
-  // otherwise the trailing chevron, so an EMPTY picker still reads as a picker.
-  // The two never show together — ✕ replaces the chevron once there's something to
-  // clear, and pressing it resets the query + reopens the browse list (via
-  // `handleChangeText("")`) so the consumer's `onClear` lands back on the full set.
+  // `showClear` MIRRORS `TextInputField`'s own clear-✕ condition — the field
+  // carries text (a reflected selection or a live query) AND it's clearable — so
+  // the ✕ that renders there and the chevron decided here can never both be up.
+  // The chevron is what THIS file owns, and it is select-mode only (no leading
+  // icon), so an EMPTY picker still reads as a picker; ✕ replaces it once there's
+  // something to clear, and pressing that resets the query + reopens the browse
+  // list (via `handleChangeText("")`) so `onClear` lands back on the full set.
   const showClear = clearable && ctx.query.length > 0;
   const showChevron = !icon && !showClear;
 
@@ -391,9 +392,12 @@ export function ComboboxInput(props: ComboboxInputProps) {
         autoCorrect={false}
         accessibilityLabel={accessibilityLabel}
         style={[
-          // Select mode reserves the right gutter for whichever trailing affordance
-          // is up (chevron when empty, ✕ when there's text) so neither overlaps it.
-          !icon ? styles.selectInput : undefined,
+          // Only the CHEVRON's gutter belongs here — it is the one trailing
+          // affordance this file owns. `TextInputField` reserves its own slot for
+          // the clear ✕, so gating this on "select mode" instead would both
+          // over-ride that reserve with the wrong width and leave a SEARCH-mode
+          // (`icon`) combobox with no gutter at all.
+          showChevron ? styles.withChevron : undefined,
           // Gate on `showList`, not `open`: an empty query with no options has
           // `open=true` but renders NO dropdown, so a ring tied to `open` would
           // show with nothing below it AND linger after blur (no popover fires a
@@ -408,7 +412,7 @@ export function ComboboxInput(props: ComboboxInputProps) {
       />
       {showChevron ? (
         <View style={styles.chevron}>
-          <Icon name="chevrons-up-down" size={16} color={colors.zinc["400"]} />
+          <Icon name="chevrons-up-down" size={CHEVRON_SIZE} color={colors.zinc["400"]} />
         </View>
       ) : null}
     </View>
@@ -562,17 +566,23 @@ export function ComboboxFooter(props: { children: ReactNode }) {
   return <View style={styles.footer}>{props.children}</View>;
 }
 
+/** The chevron is absolutely positioned — out of flow — so the text reserves the
+ *  span it occupies: the offset, the glyph, and a gap (a bare `Icon` carries no
+ *  interior padding of its own). One source for the offset and the reserve. */
+const CHEVRON_INSET = 10;
+const CHEVRON_SIZE = 16;
+const CHEVRON_GUTTER = CHEVRON_INSET + CHEVRON_SIZE + 6;
+
 const styles = StyleSheet.create({
   openRing: {
     boxShadow: FOCUS_RING,
   },
-  // Select mode: room on the right for the trailing chevron.
-  selectInput: {
-    paddingRight: 32,
+  withChevron: {
+    paddingRight: CHEVRON_GUTTER,
   },
   chevron: {
     position: "absolute",
-    right: 10,
+    right: CHEVRON_INSET,
     top: 0,
     bottom: 0,
     justifyContent: "center",

package/src/date_calendar.tsx

@@ -8,6 +8,7 @@ import { IconButton } from "./icon_button";
 import { FOCUS_RING } from "./control_surface";
 import { useFocusRing } from "./use_focus_ring";
 import { useLoticsLocale, useLocaleTag } from "./locale";
+import { nextRangeSelection } from "./date_range_selection";
 
 /** Accessible names for the calendar's month-navigation arrows. Backs the
  *  `calendar` locale slice. (The month/weekday NAMES come from `Intl` + the
@@ -529,28 +530,14 @@ function RangeCalendar(props: RangeCalendarInternalProps) {
   const rightYear = leftMonth === 11 ? leftYear + 1 : leftYear;
   const rightMonth = leftMonth === 11 ? 0 : leftMonth + 1;
 
-  // Track which part of range we're selecting
-  const [selectingEnd, setSelectingEnd] = useState(false);
-
+  // Which half of the range a click lands on is READ from the value (a range is
+  // open exactly when it has a start and no end), never tracked alongside it —
+  // a separate flag can disagree with the value the parent actually holds.
   const handleDateSelect = useCallback(
     (date: Date) => {
-      if (!value.start || (value.start && value.end) || !selectingEnd) {
-        // Start new selection
-        onValueChange({ start: date, end: null });
-        setSelectingEnd(true);
-      } else {
-        // Complete selection
-        const start = value.start;
-        // Ensure start is before end
-        if (date < start) {
-          onValueChange({ start: date, end: start });
-        } else {
-          onValueChange({ start, end: date });
-        }
-        setSelectingEnd(false);
-      }
+      onValueChange(nextRangeSelection(value, date));
     },
-    [value, onValueChange, selectingEnd],
+    [value, onValueChange],
   );
 
   const handleMonthChange = useCallback((year: number, month: number) => {