npm - @cahyo-dimas/freeday - Versions diffs - 3.7.0 → 3.9.0 - Mend

@cahyo-dimas/freeday 3.7.0 → 3.9.0

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.

Files changed (44) hide show

package/CHANGELOG.md +197 -0
package/COMPONENTS.md +214 -18
package/README.id.md +4 -4
package/README.md +4 -3
package/adapters/blazor/FdyDatepicker.razor +3 -1
package/adapters/blazor/FdyDatepicker.razor.cs +36 -1
package/adapters/blazor/FdyMonthpicker.razor +29 -0
package/adapters/blazor/FdyMonthpicker.razor.cs +102 -0
package/adapters/blazor/FdyTable.razor +6 -1
package/adapters/blazor/FdyTable.razor.cs +33 -0
package/adapters/blazor/FdyTableFooter.razor +6 -6
package/adapters/blazor/FdyTableFooter.razor.cs +36 -0
package/adapters/core/month-grid.d.ts +116 -0
package/adapters/core/month-grid.js +234 -0
package/adapters/react/components/FdyDatepicker.tsx +164 -166
package/adapters/react/components/FdyMonthpicker.tsx +400 -0
package/adapters/react/components/FdyTable.tsx +38 -2
package/adapters/react/components/FdyTableFilter.tsx +13 -1
package/adapters/react/components/FdyTableFooter.tsx +37 -6
package/adapters/react/index.d.ts +6 -2
package/adapters/react/index.js +1 -0
package/adapters/react/usePopover.ts +54 -9
package/adapters/vue/components/FdyDatepicker.vue +158 -160
package/adapters/vue/components/FdyMonthpicker.vue +387 -0
package/adapters/vue/components/FdyTable.vue +33 -1
package/adapters/vue/components/FdyTableFilter.vue +13 -1
package/adapters/vue/components/FdyTableFooter.vue +39 -6
package/adapters/vue/index.d.ts +16 -0
package/adapters/vue/index.js +1 -0
package/adapters/vue/usePopover.ts +53 -10
package/dist/freeday-datepicker.js +68 -14
package/dist/freeday-menu.js +15 -1
package/dist/freeday-popover.js +33 -11
package/dist/freeday-table.js +64 -5
package/dist/freeday-tabs.js +21 -2
package/dist/freeday.bundle.css +50 -2
package/dist/freeday.css +50 -2
package/dist/freeday.js +201 -33
package/docs/agent-onboarding.md +3 -3
package/docs/getting-started.md +6 -6
package/docs/integrations.md +22 -4
package/package.json +2 -2
package/src/components/table.css +19 -2
package/src/components/tabs.css +31 -0

package/adapters/react/components/FdyMonthpicker.tsx ADDED Viewed

@@ -0,0 +1,400 @@
+import type { JSX } from 'react';
+import { useEffect, useId, useMemo, useRef, useState } from 'react';
+import { usePopover } from '../usePopover';
+import {
+  YEARS_PER_PAGE,
+  addMonths,
+  monthCells as buildMonthCells,
+  monthFormatters,
+  monthKeyIntent,
+  pageLocale,
+  parseISOMonth,
+  startOfMonth,
+  toISOMonth,
+  yearCells as buildYearCells,
+  yearKeyIntent,
+  yearPageStart,
+  yearRangeLabel,
+  type FdyMonthCell,
+  type FdyMonthFormatters,
+  type FdyYearCell,
+} from '../../core/month-grid.js';
+// React port of adapters/vue/components/FdyMonthpicker.vue over freeday's `.fdy-datepicker` /
+// `.fdy-cal__*` classes (see src/components/datepicker.css). Controlled (`value` + `onChange` in
+// place of Vue's `v-model`). The month and year grids come from adapters/core/month-grid.js, the
+// same module FdyDatepicker reads, so the rule has one home.
+//
+// It exists for its SIGNATURE. 3.8.0 answered "we need a month" with `mode="month"` on
+// FdyDatepicker, which left `value: string | null` carrying `YYYY-MM-DD` or `YYYY-MM` depending on
+// a different prop. Here the value has one format, there is no mode to read, and the day grid is
+// absent rather than merely unvisited.
+/** The one format this component speaks, re-exported so the name has a single home. */
+export type { FdyMonth } from '../../core/month-grid';
+/** Which grid is on screen. There is no level below months here: that is the component. */
+type CalendarLevel = 'months' | 'years';
+export interface FdyMonthpickerProps {
+  /** The chosen month, ISO `YYYY-MM` (`'2026-10'`). `''`/`null` for empty. One format, always. */
+  value: string | null;
+  onChange: (value: string) => void;
+  /** Earliest selectable month, `YYYY-MM` (a full `YYYY-MM-DD` is read too, as its own month). */
+  min?: string;
+  /** Latest selectable month. A bound that falls inside a month leaves that month pickable. */
+  max?: string;
+  /** BCP-47 tag for the month names. Defaults to the page's `<html lang>`, then `en`. */
+  locale?: string;
+  placeholder?: string;
+  disabled?: boolean;
+  /** Locked/view mode: stays focusable and shows its month, but can't be opened, cleared, or changed. Unlike `disabled`, it keeps tab order and isn't greyed. */
+  readonly?: boolean;
+  invalid?: boolean;
+  describedby?: string;
+  id?: string;
+  ariaLabelledby?: string;
+  /** Show a clear (×) button in the trigger when a month is set, so an optional month can be unset. Calls onChange('') to reset. Off by default. */
+  clearable?: boolean;
+  /** aria-label for the clear button (when `clearable`). Default 'Clear month'. */
+  clearLabel?: string;
+  /** aria-labels for the year arrows shown in the month grid. Defaults 'Previous year' / 'Next year'. */
+  prevYearLabel?: string;
+  nextYearLabel?: string;
+  /** aria-label for the title button that drills from the month grid to the year grid. Default 'Choose year'. */
+  chooseYearLabel?: string;
+  /** aria-labels for the page arrows shown in the year grid. Defaults 'Previous years' / 'Next years'. */
+  prevYearsLabel?: string;
+  nextYearsLabel?: string;
+}
+export function FdyMonthpicker(props: FdyMonthpickerProps): JSX.Element {
+  const baseId: string = useId();
+  const triggerId: string = props.id ?? `${baseId}-trigger`;
+  const titleId: string = `${baseId}-title`;
+  const rootRef = useRef<HTMLDivElement>(null);
+  const triggerRef = useRef<HTMLButtonElement>(null);
+  const panelRef = useRef<HTMLDivElement>(null);
+  const monthRefs = useRef<Record<number, HTMLButtonElement | null>>({});
+  const yearRefs = useRef<Record<number, HTMLButtonElement | null>>({});
+  // Set by the move/open handlers, consumed by the focus-sync effects below (React's analogue of
+  // Vue's `nextTick(focusCell)`).
+  const pendingMonthFocusRef = useRef<number | null>(null);
+  const pendingYearFocusRef = useRef<number | null>(null);
+  const [open, setOpen] = useState<boolean>(false);
+  const [level, setLevel] = useState<CalendarLevel>('months');
+  const [focusMonth, setFocusMonth] = useState<number>(0);
+  const [focusYear, setFocusYear] = useState<number>(0);
+  /** The year the month grid shows, held as its January so the shared helpers can take a Date. */
+  const [viewMonth, setViewMonth] = useState<Date>((): Date => startOfMonth(parseISOMonth(props.value) ?? new Date()));
+  // Render the panel in the top layer (popover) so it never gets clipped by a card or scroll
+  // container; positions against the trigger.
+  usePopover(panelRef, triggerRef, open);
+  // Popover attr for React 18 (JSX may not type it): set once on mount.
+  useEffect((): void => {
+    panelRef.current?.setAttribute('popover', 'manual');
+  }, []);
+  /** Resolved once so every formatter below reads the same tag. */
+  const activeLocale: string = props.locale ?? pageLocale();
+  const formatters: FdyMonthFormatters = useMemo(
+    (): FdyMonthFormatters => monthFormatters(activeLocale),
+    [activeLocale],
+  );
+  const selectedDate: Date | null = useMemo((): Date | null => parseISOMonth(props.value), [props.value]);
+  const minDate: Date | null = useMemo((): Date | null => parseISOMonth(props.min), [props.min]);
+  const maxDate: Date | null = useMemo((): Date | null => parseISOMonth(props.max), [props.max]);
+  const isDisabled: boolean = props.disabled === true;
+  const isReadonly: boolean = props.readonly === true;
+  const isInvalid: boolean = props.invalid === true;
+  const displayPlaceholder: string = props.placeholder ?? 'Select month';
+  const showClear: boolean = props.clearable === true && selectedDate !== null && !isDisabled && !isReadonly;
+  const clearLabelText: string = props.clearLabel ?? 'Clear month';
+  const chooseYearLabelText: string = props.chooseYearLabel ?? 'Choose year';
+  const prevYearLabelText: string = props.prevYearLabel ?? 'Previous year';
+  const nextYearLabelText: string = props.nextYearLabel ?? 'Next year';
+  const prevYearsLabelText: string = props.prevYearsLabel ?? 'Previous years';
+  const nextYearsLabelText: string = props.nextYearsLabel ?? 'Next years';
+  /* The month named in the page's language, through the same formatter the cells use. This is the
+     capability `<input type="month">` cannot be pushed into: it reads the browser. */
+  const displayValue: string = selectedDate === null ? displayPlaceholder : formatters.name.format(selectedDate);
+  const monthCells: FdyMonthCell[] = useMemo((): FdyMonthCell[] => buildMonthCells({
+    year: viewMonth.getFullYear(),
+    selected: selectedDate,
+    min: minDate,
+    max: maxDate,
+    focusMonth,
+    formatters,
+  }), [viewMonth, selectedDate, minDate, maxDate, focusMonth, formatters]);
+  const yearPage: number = yearPageStart(focusYear);
+  const yearCells: FdyYearCell[] = useMemo((): FdyYearCell[] => buildYearCells({
+    pageStart: yearPage,
+    selected: selectedDate,
+    min: minDate,
+    max: maxDate,
+    focusYear,
+  }), [yearPage, selectedDate, minDate, maxDate, focusYear]);
+  useEffect((): void => {
+    if (pendingMonthFocusRef.current === null) return;
+    const index: number = pendingMonthFocusRef.current;
+    pendingMonthFocusRef.current = null;
+    monthRefs.current[index]?.focus();
+  });
+  useEffect((): void => {
+    if (pendingYearFocusRef.current === null) return;
+    const year: number = pendingYearFocusRef.current;
+    pendingYearFocusRef.current = null;
+    yearRefs.current[year]?.focus();
+  });
+  /** `index` is already 0-11: the wrap lives in `monthKeyIntent`, so it is applied in one place. */
+  function moveMonthFocus(index: number, yearDelta: number): void {
+    if (yearDelta !== 0) setViewMonth(addMonths(viewMonth, yearDelta * 12));
+    setFocusMonth(index);
+    pendingMonthFocusRef.current = index;
+  }
+  /* A month is the ANSWER here. In FdyDatepicker the same click walks down into the month's days,
+     which is the one thing the two components do differently with the shared grid. */
+  function pickMonth(index: number): void {
+    if (monthCells[index].disabled) return;
+    const first: Date = new Date(viewMonth.getFullYear(), index, 1);
+    setFocusMonth(index);
+    setViewMonth(first);
+    props.onChange(toISOMonth(first));
+    closePanel(true);
+  }
+  function openYearGrid(): void {
+    setFocusYear(viewMonth.getFullYear());
+    setLevel('years');
+    pendingYearFocusRef.current = viewMonth.getFullYear();
+  }
+  function openMonthGridAt(year: number, month: number): void {
+    setViewMonth(new Date(year, month, 1));
+    setFocusMonth(month);
+    setLevel('months');
+    pendingMonthFocusRef.current = month;
+  }
+  /* Picking a year is NAVIGATION and commits nothing: it drops to that year's months, where the
+     answer is given. Without this level, reaching a month four years back is four arrow presses per
+     year and no pointer route at all. */
+  function openYear(year: number): void {
+    openMonthGridAt(year, viewMonth.getMonth());
+  }
+  function moveYearFocus(year: number): void {
+    setFocusYear(year);
+    setViewMonth(new Date(year, viewMonth.getMonth(), 1));
+    pendingYearFocusRef.current = year;
+  }
+  function onMonthKeydown(e: React.KeyboardEvent): void {
+    const intent = monthKeyIntent(e.key, focusMonth);
+    if (intent.action === 'none') return;
+    e.preventDefault();
+    if (intent.action === 'focus') moveMonthFocus(intent.index, intent.yearDelta);
+    else if (intent.action === 'choose') pickMonth(intent.index);
+    else closePanel(true);
+  }
+  function onYearKeydown(e: React.KeyboardEvent): void {
+    const intent = yearKeyIntent(e.key, focusYear);
+    if (intent.action === 'none') return;
+    /* stopPropagation as well, matching FdyDatepicker's year grid: the panel is in the top layer
+       and a bubbling Escape would otherwise be read a second time by whatever is behind it. */
+    e.preventDefault();
+    e.stopPropagation();
+    if (intent.action === 'focus') moveYearFocus(intent.year);
+    else if (intent.action === 'choose') openYear(intent.year);
+    else closePanel(true);
+  }
+  // Clear (reset to empty). Calls onChange(''), parseISOMonth('') is null, so the placeholder shows.
+  function clearValue(): void {
+    props.onChange('');
+    setOpen(false);
+    triggerRef.current?.focus();
+  }
+  function openPanel(): void {
+    if (isDisabled || isReadonly || open) return;
+    const next: Date = startOfMonth(selectedDate ?? viewMonth);
+    setViewMonth(next);
+    /* Reopening starts on months. Without this a picker that drilled to the year grid and was
+       dismissed would open on years next time, and a keyboard user would land on a grid that
+       cannot answer. */
+    setLevel('months');
+    setFocusMonth(next.getMonth());
+    setOpen(true);
+    pendingMonthFocusRef.current = next.getMonth();
+  }
+  function closePanel(returnFocus: boolean): void {
+    if (!open) return;
+    setOpen(false);
+    if (returnFocus) triggerRef.current?.focus();
+  }
+  function toggle(): void {
+    if (open) closePanel(false);
+    else openPanel();
+  }
+  /* A null relatedTarget means focus fell to <body>, which is what happens when the element the
+     user just pressed is REMOVED by the click it triggered (drilling into the year grid replaces
+     the grid, and with it the cell that had focus). That is not focus leaving the control, and
+     closing on it made the panel vanish mid-navigation. A pointer that really lands outside is
+     handled by the mousedown listener, which is the reliable path for that case. */
+  const onFocusout = (e: React.FocusEvent<HTMLDivElement>): void => {
+    const next: EventTarget | null = e.relatedTarget;
+    if (next === null) return;
+    if (rootRef.current !== null && !(next instanceof Node && rootRef.current.contains(next))) closePanel(false);
+  };
+  // Close when a pointer lands outside the whole control.
+  useEffect((): void | (() => void) => {
+    if (!open) return;
+    const onDocPointerDown = (e: MouseEvent): void => {
+      const t: EventTarget | null = e.target;
+      if (rootRef.current !== null && t instanceof Node && !rootRef.current.contains(t)) closePanel(false);
+    };
+    document.addEventListener('mousedown', onDocPointerDown);
+    return (): void => document.removeEventListener('mousedown', onDocPointerDown);
+  }, [open]);
+  return (
+    <div ref={rootRef} className={isInvalid ? 'fdy-datepicker fdy-datepicker--error' : 'fdy-datepicker'} onBlur={onFocusout}>
+      <button
+        id={triggerId}
+        ref={triggerRef}
+        type="button"
+        className={open ? 'fdy-datepicker__trigger is-open' : 'fdy-datepicker__trigger'}
+        aria-haspopup="dialog"
+        aria-expanded={open}
+        aria-labelledby={props.ariaLabelledby}
+        aria-invalid={isInvalid ? 'true' : undefined}
+        aria-readonly={isReadonly ? 'true' : undefined}
+        aria-describedby={props.describedby}
+        disabled={isDisabled}
+        onClick={toggle}
+      >
+        <span className={selectedDate === null ? 'fdy-datepicker__value fdy-datepicker__value--placeholder' : 'fdy-datepicker__value'}>
+          {displayValue}
+        </span>
+        <span className={showClear ? 'fdy-datepicker__icon is-hidden' : 'fdy-datepicker__icon'} aria-hidden="true">
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={2} strokeLinecap="round" strokeLinejoin="round">
+            <rect x="3" y="4" width="18" height="18" rx="2"></rect>
+            <path d="M16 2v4M8 2v4M3 10h18"></path>
+          </svg>
+        </span>
+      </button>
+      {showClear ? (
+        <button
+          type="button"
+          className="fdy-datepicker__clear"
+          aria-label={clearLabelText}
+          onMouseDown={(e: React.MouseEvent): void => e.preventDefault()}
+          onClick={clearValue}
+        >
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={2} strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
+            <path d="M18 6 6 18M6 6l12 12"></path>
+          </svg>
+        </button>
+      ) : null}
+      <div ref={panelRef} className="fdy-datepicker__panel" role="dialog" aria-modal="false" aria-labelledby={titleId} hidden={!open}>
+        {/* ONE head for both levels on purpose: swapping it destroys the very button the user just
+            pressed, focus falls to <body>, and the panel's own focusout handler closes it. */}
+        <div className="fdy-cal__head">
+          <button
+            type="button"
+            className="fdy-cal__nav"
+            aria-label={level === 'years' ? prevYearsLabelText : prevYearLabelText}
+            onClick={(): void => {
+              if (level === 'years') moveYearFocus(focusYear - YEARS_PER_PAGE);
+              else moveMonthFocus(focusMonth, -1);
+            }}
+          >
+            &lsaquo;
+          </button>
+          <button
+            id={titleId}
+            type="button"
+            className="fdy-cal__title"
+            aria-label={level === 'years' ? undefined : chooseYearLabelText}
+            onClick={(): void => {
+              if (level === 'years') openMonthGridAt(viewMonth.getFullYear(), viewMonth.getMonth());
+              else openYearGrid();
+            }}
+          >
+            {level === 'years' ? yearRangeLabel(yearPage) : String(viewMonth.getFullYear())}
+          </button>
+          <button
+            type="button"
+            className="fdy-cal__nav"
+            aria-label={level === 'years' ? nextYearsLabelText : nextYearLabelText}
+            onClick={(): void => {
+              if (level === 'years') moveYearFocus(focusYear + YEARS_PER_PAGE);
+              else moveMonthFocus(focusMonth, 1);
+            }}
+          >
+            &rsaquo;
+          </button>
+        </div>
+        {level === 'years' ? (
+          <div className="fdy-cal__grid fdy-cal__grid--years" role="grid" aria-labelledby={titleId} onKeyDown={onYearKeydown}>
+            {yearCells.map((cell: FdyYearCell): JSX.Element => (
+              <button
+                key={cell.year}
+                ref={(el: HTMLButtonElement | null): void => { yearRefs.current[cell.year] = el; }}
+                type="button"
+                className={['fdy-cal__year', cell.today ? 'is-today' : '', cell.selected ? 'is-selected' : ''].filter(Boolean).join(' ')}
+                role="gridcell"
+                aria-label={String(cell.year)}
+                aria-selected={cell.selected ? true : undefined}
+                disabled={cell.disabled}
+                tabIndex={cell.focusable ? 0 : -1}
+                onClick={(): void => openYear(cell.year)}
+              >
+                {cell.year}
+              </button>
+            ))}
+          </div>
+        ) : (
+          <div className="fdy-cal__grid fdy-cal__grid--months" role="grid" aria-labelledby={titleId} onKeyDown={onMonthKeydown}>
+            {monthCells.map((cell: FdyMonthCell): JSX.Element => (
+              <button
+                key={cell.index}
+                ref={(el: HTMLButtonElement | null): void => { monthRefs.current[cell.index] = el; }}
+                type="button"
+                className={['fdy-cal__month', cell.today ? 'is-today' : '', cell.selected ? 'is-selected' : ''].filter(Boolean).join(' ')}
+                role="gridcell"
+                aria-label={cell.ariaLabel}
+                aria-selected={cell.selected ? true : undefined}
+                disabled={cell.disabled}
+                tabIndex={cell.focusable ? 0 : -1}
+                onClick={(): void => pickMonth(cell.index)}
+              >
+                {cell.label}
+              </button>
+            ))}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}

package/adapters/react/components/FdyTable.tsx CHANGED Viewed

@@ -83,6 +83,13 @@ export interface FdyTableProps<Row extends object> {
    *  reset to 0 after sort/filter, or a clamp when filtering shrank the set). */
   onPageIndexChange?: (index: number) => void;
   loading?: boolean;
+  /** The loading row's text, rendered by this table rather than by the footer. Default `Loading…`.
+   *  Blazor has carried `LoadingText` all along while the two script adapters wrote the word into
+   *  the template, so a table in any other language could translate its empty row and not the row
+   *  right beside it. Defaulted here, like `emptyText` and the four selection strings, and
+   *  unlike the six footer strings further down, which the footer defaults because the footer is
+   *  what renders them. */
+  loadingText?: string;
   emptyText?: string;
   ariaLabel?: string;
   /** Custom cell renderer; return undefined for a column to use the default text. */
@@ -128,6 +135,23 @@ export interface FdyTableProps<Row extends object> {
   bulkLabel?: string;
   /** Bulk-bar actions (React equivalent of Vue's `bulk-actions` slot). */
   bulkActions?: ReactNode;
+  /* The footer's six strings, forwarded to the `FdyTableFooter` this table draws itself. 3.8.0 gave
+   * the footer those props and this table passed none of them on, so the hatch reached every footer
+   * except the one almost every screen uses, and the documented way out was to switch the footer off
+   * and render it yourself: a door that opens only if you stop using the table. Flat props, with the
+   * footer's own names, so moving between the two routes moves a prop rather than reshaping it. */
+  /** Footer range line, `{from}` `{to}` `{total}` substituted. Default `Showing {from}–{to} of {total}`. */
+  infoText?: string;
+  /** Footer: the visible word beside the rows-per-page control, which also names it. Default `Rows`. */
+  pageSizeLabel?: string;
+  /** Footer: accessible name of the pager landmark. Default `Pagination`. */
+  paginationLabel?: string;
+  /** Footer: accessible name of the previous-page arrow. Default `Previous page`. */
+  prevLabel?: string;
+  /** Footer: accessible name of the next-page arrow. Default `Next page`. */
+  nextLabel?: string;
+  /** Footer: accessible name of a numbered page button. `{n}` substituted. Default `Go to page {n}`. */
+  pageLabel?: string;
 }
 export function FdyTable<Row extends object>(props: FdyTableProps<Row>): JSX.Element {
@@ -419,7 +443,7 @@ export function FdyTable<Row extends object>(props: FdyTableProps<Row>): JSX.Ele
           <tbody>
             {props.loading ? (
               <tr>
-                <td colSpan={colCount} className="fdy-table__state" role="status">Loading…</td>
+                <td colSpan={colCount} className="fdy-table__state" role="status">{props.loadingText ?? 'Loading…'}</td>
               </tr>
             ) : displayRows.length === 0 ? (
               <tr>
@@ -469,8 +493,20 @@ export function FdyTable<Row extends object>(props: FdyTableProps<Row>): JSX.Ele
         </table>
       </div>
+      {/* The six strings are passed as given, `undefined` included: every default lives in the
+          footer, so an omitted prop here is the footer's English and not a second copy of it. */}
       {props.pager !== false && (
-        <FdyTableFooter page={footerPage} pageSizes={props.pageSizes} onPageChange={onFooterPage} />
+        <FdyTableFooter
+          page={footerPage}
+          pageSizes={props.pageSizes}
+          infoText={props.infoText}
+          pageSizeLabel={props.pageSizeLabel}
+          paginationLabel={props.paginationLabel}
+          prevLabel={props.prevLabel}
+          nextLabel={props.nextLabel}
+          pageLabel={props.pageLabel}
+          onPageChange={onFooterPage}
+        />
       )}
     </div>
   );

package/adapters/react/components/FdyTableFilter.tsx CHANGED Viewed

@@ -26,7 +26,19 @@ export function FdyTableFilter(props: FdyTableFilterProps): JSX.Element {
   const panelRef = useRef<HTMLDivElement>(null);
   const [open, setOpen] = useState<boolean>(false);
-  usePopover(panelRef, triggerRef, open);
+  /* Always end-aligned, and not an option the parent can set: the funnel is a 24px button in a
+     column header while the panel runs past 200px, so lining up their LEFT edges aligns the panel
+     with nothing anybody can see. In the rightmost column, the one this was reported from, the
+     panel ran past the page and the viewport clamp parked it 4px off the screen edge. A prop no
+     caller would ever set to 'start' is a prop that should not exist. The clamp still catches the
+     leftmost column, where an end-aligned panel would hang off the other edge.
+     `matchWidth:false` for the other half of the same thought. Every other typed dropdown wants a
+     panel at least as wide as the control it hangs off; this one hangs off a 24px icon, and that
+     floor is written inline, where it outranks the `min-width:14rem` `.fdy-filter` asks for: the
+     panel measured 224px on the raw path and 206 here, and an enum column with short labels would
+     have gone narrower still. The choice sits in this component rather than in the hook, because a
+     hook that guessed it from the trigger's size would be guessing for the other nine callers too. */
+  usePopover(panelRef, triggerRef, open, 'end', false);
   // Popover attr for React 18/19 JSX typing: set once on mount (same as the other components).
   useEffect((): void => {
     panelRef.current?.setAttribute('popover', 'manual');

package/adapters/react/components/FdyTableFooter.tsx CHANGED Viewed

@@ -25,6 +25,28 @@ export interface FdyTableFooterProps {
    * the row you were looking at.
    */
   pageSizes?: readonly number[];
+  /* The strings, six of them, one per thing this band says. The raw path has had a hatch since
+   * 1.39.0 (`data-fdy-text-<key>` read through `textOf()`) and this path had none, so an app that
+   * does not speak English could only rewrite the whole band by hand; one shipped eighty one lines
+   * of its own markup to change five words. Names follow the enhancer's `TEXT` keys where a key
+   * exists, `info`, `prev`, `next`, so one string is not two names across the two paths. The other
+   * three have no twin because on the raw path that markup is the app's own. Defaults stay English
+   * on every path, which COMPONENTS.md promises and the suite enforces. */
+  /**
+   * The range line. `{from}`, `{to}` and `{total}` are substituted, every occurrence, as `textOf()`
+   * does. Default `Showing {from}–{to} of {total}`, the enhancer's `info`.
+   */
+  infoText?: string;
+  /** The visible word beside the rows-per-page control, which also names it. Default `Rows`. */
+  pageSizeLabel?: string;
+  /** Accessible name of the pager landmark. Default `Pagination`. */
+  paginationLabel?: string;
+  /** Accessible name of the previous-page arrow. Default `Previous page`. */
+  prevLabel?: string;
+  /** Accessible name of the next-page arrow. Default `Next page`. */
+  nextLabel?: string;
+  /** Accessible name of a numbered page button. `{n}` substituted. Default `Go to page {n}`. */
+  pageLabel?: string;
 }
 export function FdyTableFooter(props: FdyTableFooterProps): JSX.Element | null {
@@ -39,6 +61,15 @@ export function FdyTableFooter(props: FdyTableFooterProps): JSX.Element | null {
   const rangeTo: number = Math.min(total, (index + 1) * size);
   const pages: Array<number | 'ellipsis'> = pageWindow(currentPage1, totalPages);
+  /* Regex with /g, not String.replace on a string pattern, which stops at the first hit and would
+   * drop a second `{total}` a translator wrote. This is what `textOf()` does on the raw path. */
+  const infoLine: string = (props.infoText ?? 'Showing {from}–{to} of {total}')
+    .replace(/\{from\}/g, String(rangeFrom))
+    .replace(/\{to\}/g, String(rangeTo))
+    .replace(/\{total\}/g, String(total));
+  const pageAriaLabel = (page1: number): string =>
+    (props.pageLabel ?? 'Go to page {n}').replace(/\{n\}/g, String(page1));
   const hasPager: boolean = size > 0 && totalPages > 1;
   const sizes: readonly number[] = props.pageSizes ?? [];
   /* One page and no size control means there is nothing here to say, the table has always withheld
@@ -58,11 +89,11 @@ export function FdyTableFooter(props: FdyTableFooterProps): JSX.Element | null {
   return (
     <div className="fdy-table-footer">
-      <span className="fdy-table-footer__info">Showing {rangeFrom}–{rangeTo} of {total}</span>
+      <span className="fdy-table-footer__info">{infoLine}</span>
       {sizes.length > 0 && (
         <div className="fdy-table-footer__size">
-          <span id={sizeLabelId}>Rows</span>
+          <span id={sizeLabelId}>{props.pageSizeLabel ?? 'Rows'}</span>
           {/* The kit's own listbox, not a native <select>: an OS menu is unthemeable, and on macOS
               it drops a dark panel into a light page. FdyCombo's own header says exactly that. */}
           <FdyCombo
@@ -75,10 +106,10 @@ export function FdyTableFooter(props: FdyTableFooterProps): JSX.Element | null {
       )}
       {hasPager && (
-        <nav className="fdy-pagination" aria-label="Pagination">
+        <nav className="fdy-pagination" aria-label={props.paginationLabel ?? 'Pagination'}>
           <ul className="fdy-pagination__list">
             <li>
-              <button type="button" className="fdy-pagination__link" aria-label="Previous page" disabled={currentPage1 === 1} onClick={(): void => goTo(currentPage1 - 1)}>‹</button>
+              <button type="button" className="fdy-pagination__link" aria-label={props.prevLabel ?? 'Previous page'} disabled={currentPage1 === 1} onClick={(): void => goTo(currentPage1 - 1)}>‹</button>
             </li>
             {pages.map((p: number | 'ellipsis', i: number): JSX.Element => (
               <li key={typeof p === 'number' ? `p-${p}` : `gap-${i}`}>
@@ -87,12 +118,12 @@ export function FdyTableFooter(props: FdyTableFooterProps): JSX.Element | null {
                 ) : p === currentPage1 ? (
                   <span className="fdy-pagination__link" aria-current="page">{p}</span>
                 ) : (
-                  <button type="button" className="fdy-pagination__link" aria-label={`Go to page ${p}`} onClick={(): void => goTo(p)}>{p}</button>
+                  <button type="button" className="fdy-pagination__link" aria-label={pageAriaLabel(p)} onClick={(): void => goTo(p)}>{p}</button>
                 )}
               </li>
             ))}
             <li>
-              <button type="button" className="fdy-pagination__link" aria-label="Next page" disabled={currentPage1 === totalPages} onClick={(): void => goTo(currentPage1 + 1)}>›</button>
+              <button type="button" className="fdy-pagination__link" aria-label={props.nextLabel ?? 'Next page'} disabled={currentPage1 === totalPages} onClick={(): void => goTo(currentPage1 + 1)}>›</button>
             </li>
           </ul>
         </nav>

package/adapters/react/index.d.ts CHANGED Viewed

@@ -27,9 +27,13 @@ export interface FdyCflSelectDetail { row?: unknown; rows?: unknown[] }
 export interface FdyTableChangeDetail { page: number; sort: string | null; query: string }
 // Re-exports of React components and hooks
-export { usePopover } from './usePopover';
+export { usePopover, type FdyPopoverAlign } from './usePopover';
 export { FdyCombo, type FdyComboProps, type FdyComboOption } from './components/FdyCombo';
-export { FdyDatepicker, type FdyDatepickerProps } from './components/FdyDatepicker';
+export { FdyDatepicker, type FdyDatepickerProps, type FdyDatepickerMode } from './components/FdyDatepicker';
+/** A picker that answers with a whole month, `YYYY-MM`. Replaces `FdyDatepicker`'s deprecated
+ *  `mode="month"`, where one prop carried two formats and another prop chose between them. */
+export { FdyMonthpicker, type FdyMonthpickerProps } from './components/FdyMonthpicker';
+export type { FdyMonth } from '../core/month-grid';
 export { FdyDateRange, type FdyDateRangeProps, type DateRangeValue } from './components/FdyDateRange';
 export { FdyAutocomplete, type FdyAutocompleteProps } from './components/FdyAutocomplete';
 export { FdyCascade, type FdyCascadeProps, type CascadeNode } from './components/FdyCascade';

package/adapters/react/index.js CHANGED Viewed

@@ -2,6 +2,7 @@ export { useFreeday } from './useFreeday.js';
 export { usePopover } from './usePopover.ts';
 export { FdyCombo } from './components/FdyCombo.tsx';
 export { FdyDatepicker } from './components/FdyDatepicker.tsx';
+export { FdyMonthpicker } from './components/FdyMonthpicker.tsx';
 export { FdyDateRange } from './components/FdyDateRange.tsx';
 export { FdyAutocomplete } from './components/FdyAutocomplete.tsx';
 export { FdyCascade } from './components/FdyCascade.tsx';