@tcn/ui 0.13.1 → 0.15.0

package/src/mobile/inputs/date_picker/mobile_date_picker_input.tsx

@@ -0,0 +1,240 @@
+import React, { useCallback, useLayoutEffect, useMemo, useRef, useState } from 'react';
+import { MobileButton } from '../../actions/button/mobile_button.js';
+import { ButtonGroup } from '../../../actions/button/button_group/button_group.js';
+import { MobilePortal } from '../../portal/mobile_portal.js';
+import { MobileDatePicker } from './mobile_date_picker.js';
+import { MobileDatePickerTimeSelector } from './mobile_date_picker_time_selector.js';
+import { MobileOverlayHeader } from './mobile_overlay_header.js';
+import { FocusRedirect } from '../../../utils/index.js';
+import { VStack } from '../../../stacks/v_stack.js';
+import type { DatePickerInputProps } from '../../../inputs/date_picker/date_picker_input.js';
+import styles from './mobile_date_picker_input.module.css';
+
+export interface MobileDatePickerInputProps extends DatePickerInputProps {
+  selectTimeMessage?: string;
+  selectMonthMessage?: string;
+  selectYearMessage?: string;
+}
+
+export const MobileDatePickerInput = React.forwardRef<
+  HTMLButtonElement,
+  MobileDatePickerInputProps
+>(function MobileDatePickerInput(
+  {
+    value = new Date(),
+    onChange,
+    onError,
+    min = new Date('01/01/1924'),
+    max = new Date('01/01/2124'),
+    disabled,
+    width = '100%',
+    maxWidth,
+    minWidth,
+    showTime = false,
+    timeIntervalInMinutes = 15,
+    hierarchy = 'secondary',
+    disabledDates,
+    selectDateMessage = 'Select Date',
+    selectTimeMessage = 'Select Time',
+    selectMonthMessage,
+    selectYearMessage,
+    countryCode,
+    renderActions,
+    onTimeSelected,
+    ...props
+  },
+  ref
+) {
+  const [dateOpen, setDateOpen] = useState(false);
+  const [timeOpen, setTimeOpen] = useState(false);
+  const pickerRef = useRef<HTMLDivElement | null>(null);
+  const timeRef = useRef<HTMLDivElement | null>(null);
+  const dateButtonRef = useRef<HTMLButtonElement | null>(null);
+  const timeButtonRef = useRef<HTMLButtonElement | null>(null);
+
+  const setDateButtonRef = useCallback(
+    (node: HTMLButtonElement | null) => {
+      dateButtonRef.current = node;
+      if (typeof ref === 'function') {
+        ref(node);
+      } else if (ref != null) {
+        (ref as React.MutableRefObject<HTMLButtonElement | null>).current = node;
+      }
+    },
+    [ref]
+  );
+
+  const dateFormatter = useMemo(() => {
+    return new Intl.DateTimeFormat(countryCode, {
+      year: 'numeric',
+      month: 'short',
+      day: 'numeric',
+    });
+  }, [countryCode]);
+
+  const timeFormatter = useMemo(() => {
+    return new Intl.DateTimeFormat(countryCode, {
+      hour: 'numeric',
+      minute: '2-digit',
+      hour12: true,
+    });
+  }, [countryCode]);
+
+  const formattedDate = value != null ? dateFormatter.format(value) : selectDateMessage;
+  const formattedTime = value != null ? timeFormatter.format(value) : selectTimeMessage;
+
+  function openDatePicker() {
+    setDateOpen(true);
+  }
+
+  function closeDatePicker() {
+    setDateOpen(false);
+    requestAnimationFrame(() => dateButtonRef.current?.focus());
+  }
+
+  function openTimePicker() {
+    setTimeOpen(true);
+  }
+
+  function closeTimePicker() {
+    setTimeOpen(false);
+    requestAnimationFrame(() => timeButtonRef.current?.focus());
+  }
+
+  useLayoutEffect(() => {
+    if (dateOpen) {
+      requestAnimationFrame(() => pickerRef.current?.focus());
+    }
+  }, [dateOpen]);
+
+  useLayoutEffect(() => {
+    if (timeOpen) {
+      requestAnimationFrame(() => timeRef.current?.focus());
+    }
+  }, [timeOpen]);
+
+  function handleDateEscape(event: React.KeyboardEvent) {
+    if (event.key === 'Escape') {
+      closeDatePicker();
+    }
+  }
+
+  function handleTimeEscape(event: React.KeyboardEvent) {
+    if (event.key === 'Escape') {
+      closeTimePicker();
+    }
+  }
+
+  function handleDateRedirect() {
+    pickerRef.current?.focus();
+  }
+
+  function handleTimeRedirect() {
+    timeRef.current?.focus();
+  }
+
+  function dateSelected(date: Date | null) {
+    onChange?.(date);
+    closeDatePicker();
+  }
+
+  function timeSelected(hour: number, minutes: number, seconds: number) {
+    if (value != null) {
+      const updated = new Date(value);
+      updated.setHours(hour, minutes, seconds);
+      onChange?.(updated);
+    }
+    onTimeSelected?.(hour, minutes, seconds);
+    closeTimePicker();
+  }
+
+  return (
+    <>
+      {showTime ? (
+        <ButtonGroup hierarchy={hierarchy} width={width}>
+          <MobileButton
+            ref={setDateButtonRef}
+            hAlign="start"
+            disabled={disabled}
+            onClick={openDatePicker}
+            width="flex"
+            {...props}
+          >
+            <span className="ellipsis">{formattedDate}</span>
+          </MobileButton>
+          <MobileButton
+            ref={timeButtonRef}
+            hAlign="start"
+            disabled={disabled || value == null}
+            onClick={openTimePicker}
+            width="auto"
+          >
+            <span className="ellipsis">{formattedTime}</span>
+          </MobileButton>
+        </ButtonGroup>
+      ) : (
+        <MobileButton
+          ref={setDateButtonRef}
+          hAlign="start"
+          disabled={disabled}
+          hierarchy={hierarchy}
+          onClick={openDatePicker}
+          width={width}
+          maxWidth={maxWidth}
+          {...props}
+        >
+          <span className="ellipsis">{formattedDate}</span>
+        </MobileButton>
+      )}
+
+      {dateOpen && (
+        <MobilePortal>
+          <VStack
+            className={styles['mobile-date-picker-overlay']}
+            onKeyDown={handleDateEscape}
+          >
+            <MobileOverlayHeader title={selectDateMessage} onClose={closeDatePicker} />
+            <MobileDatePicker
+              ref={pickerRef}
+              value={value}
+              onChange={dateSelected}
+              min={min}
+              max={max}
+              onError={onError}
+              disabled={disabled}
+              disabledDates={disabledDates}
+              countryCode={countryCode}
+              renderActions={renderActions}
+              selectMonthMessage={selectMonthMessage}
+              selectYearMessage={selectYearMessage}
+            />
+            <FocusRedirect onRedirect={handleDateRedirect} />
+          </VStack>
+        </MobilePortal>
+      )}
+
+      {timeOpen && (
+        <MobilePortal>
+          <VStack
+            className={styles['mobile-time-picker-overlay']}
+            onKeyDown={handleTimeEscape}
+          >
+            <MobileOverlayHeader title={selectTimeMessage} onClose={closeTimePicker} />
+            <MobileDatePickerTimeSelector
+              ref={timeRef}
+              origin={value}
+              min={min}
+              max={max}
+              intervalInMinutes={timeIntervalInMinutes}
+              disabled={disabled}
+              onSelect={(hour, minutes, seconds) => {
+                timeSelected(hour, minutes, seconds);
+              }}
+            />
+            <FocusRedirect onRedirect={handleTimeRedirect} />
+          </VStack>
+        </MobilePortal>
+      )}
+    </>
+  );
+});

package/src/mobile/inputs/date_picker/mobile_date_picker_time_selector.module.css

@@ -0,0 +1,7 @@
+@layer tcn-system {
+  :where(.mobile-time-selector) {
+    outline: none;
+    background-color: var(--surface-color, #fff);
+    color: var(--font-color);
+  }
+}

package/src/mobile/inputs/date_picker/mobile_date_picker_time_selector.tsx

@@ -0,0 +1,81 @@
+import { VStack } from '../../../stacks/v_stack.js';
+import { clsx } from 'clsx';
+import React from 'react';
+import { MobileButton } from '../../actions/button/mobile_button.js';
+import styles from './mobile_date_picker_time_selector.module.css';
+
+export interface MobileDatePickerTimeSelectorProps {
+  origin: Date | null;
+  intervalInMinutes: number;
+  max: Date | null;
+  min: Date | null;
+  onSelect: (hours: number, minutes: number, seconds: number) => void;
+  disabled?: boolean;
+}
+
+export const MobileDatePickerTimeSelector = React.forwardRef<
+  HTMLDivElement,
+  MobileDatePickerTimeSelectorProps
+>(function MobileDatePickerTimeSelector(
+  { origin, intervalInMinutes, max, min, onSelect, disabled },
+  ref
+) {
+  const stepInMilliseconds = intervalInMinutes * 1000 * 60;
+  const amountOfSteps = (24 * 1000 * 60 * 60) / stepInMilliseconds;
+  const normalizedDate = new Date(origin || new Date());
+  const options: React.ReactElement[] = [];
+  const minTime = min?.getTime() ?? -Infinity;
+  const maxTime = max?.getTime() ?? Infinity;
+
+  normalizedDate.setHours(0, 0, 0, 0);
+  let offset = normalizedDate.getTime();
+
+  for (let x = 0; x < amountOfSteps; x++) {
+    const date = new Date(offset);
+
+    let hour = date.getHours() % 12;
+    const minute = date.getMinutes();
+    const meridiem = date.getHours() >= 12 ? 'PM' : 'AM';
+    hour = hour === 0 ? 12 : hour;
+
+    const isSelected =
+      origin != null &&
+      date.getHours() === origin.getHours() &&
+      date.getMinutes() === origin.getMinutes() &&
+      date.getSeconds() === origin.getSeconds();
+
+    const time = date.getTime();
+    const isOutOfRange = time < minTime || time > maxTime;
+
+    options.push(
+      <MobileButton
+        key={x}
+        width="100%"
+        hierarchy={isSelected ? 'primary' : 'tertiary'}
+        disabled={origin == null || disabled || isOutOfRange}
+        onClick={() => {
+          onSelect(date.getHours(), date.getMinutes(), date.getSeconds());
+        }}
+      >
+        {`${hour.toString().padStart(2, '0')}:${minute.toString().padStart(2, '0')} ${meridiem}`}
+      </MobileButton>
+    );
+
+    offset += stepInMilliseconds;
+  }
+
+  return (
+    <VStack
+      ref={ref}
+      tabIndex={0}
+      width="100%"
+      height="flex"
+      overflowY="auto"
+      padding="8px"
+      gap="4px"
+      className={clsx(styles['mobile-time-selector'], 'tcn-mobile-time-selector')}
+    >
+      {options}
+    </VStack>
+  );
+});

package/src/mobile/inputs/date_picker/mobile_date_picker_year_selector.module.css

@@ -0,0 +1,55 @@
+@layer tcn-system {
+  :where(.mobile-year-selector) {
+    background-color: var(--surface-color, #fff);
+    outline: none;
+  }
+
+  :where(.mobile-year-button) {
+    flex: 1 1 0%;
+    aspect-ratio: 1.6;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 4px;
+    border: 2px solid transparent;
+    border-radius: 4px;
+    cursor: pointer;
+    background-color: transparent;
+    color: var(--font-color);
+    -webkit-tap-highlight-color: transparent;
+    -webkit-touch-callout: none;
+    touch-action: manipulation;
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
+    -webkit-appearance: none;
+    -moz-appearance: none;
+    appearance: none;
+    outline: none;
+  }
+
+  :where(.mobile-year-button:hover),
+  :where(.mobile-year-button:focus) {
+    border: 2px dotted var(--accent-color);
+    outline: none;
+    -webkit-tap-highlight-color: transparent;
+    -webkit-touch-callout: none;
+  }
+
+  :where(.mobile-year-button[data-is-selected="true"]) {
+    border: 2px solid var(--accent-color);
+    background-color: var(--accent-color);
+    color: #fff;
+    box-shadow: 0 0px 4px rgba(0, 0, 0, 0.35);
+    -webkit-tap-highlight-color: transparent;
+    -webkit-touch-callout: none;
+  }
+
+  :where(.mobile-year-button[data-is-disabled="true"]) {
+    text-decoration: line-through;
+    opacity: 0.5;
+    border: 2px solid transparent;
+    cursor: not-allowed;
+  }
+}

package/src/mobile/inputs/date_picker/mobile_date_picker_year_selector.tsx

@@ -0,0 +1,119 @@
+import React, { useEffect, useRef, useState } from 'react';
+import { ChevronLeftIcon } from '@tcn/icons/chevron_left_icon.js';
+import { ChevronRightIcon } from '@tcn/icons/chevron_right_icon.js';
+import { useSignalValue } from '@tcn/state';
+import { MobileButton } from '../../actions/button/mobile_button.js';
+import { HStack } from '../../../stacks/h_stack.js';
+import { Spacer } from '../../../stacks/spacer.js';
+import { VStack } from '../../../stacks/v_stack.js';
+import { BodyText, Headline } from '../../../typography/index.js';
+import { DatePickerPresenter } from '../../../inputs/date_picker/date_picker_presenter.js';
+import { FocusRedirect } from '../../../utils/index.js';
+import { clsx } from 'clsx';
+import styles from './mobile_date_picker_year_selector.module.css';
+
+export interface MobileDatePickerYearSelectorProps {
+  presenter: DatePickerPresenter;
+  onClose: () => void;
+}
+
+export function MobileDatePickerYearSelector({
+  presenter,
+  onClose,
+}: MobileDatePickerYearSelectorProps) {
+  const { min, max, visibleYear, visibleMonth } = useSignalValue(
+    presenter.stateBroadcast
+  );
+
+  const [offset, setOffset] = useState(0);
+  const containerRef = useRef<HTMLDivElement | null>(null);
+  const minYear = min == null ? -Infinity : min.getFullYear();
+  const maxYear = max == null ? Infinity : max.getFullYear();
+  const years: React.ReactNode[] = [];
+  const remainder = visibleYear % 20;
+  const firstYear = visibleYear - remainder + offset;
+  const lastYear = firstYear + 19;
+
+  for (let x = 0; x < 20; x++) {
+    const date = new Date(visibleYear, visibleMonth, 1);
+    date.setFullYear(visibleYear - remainder + x + offset);
+
+    const disabled = date.getFullYear() > maxYear || date.getFullYear() < minYear;
+
+    years.push(
+      <button
+        key={x}
+        disabled={disabled}
+        className={clsx(styles['mobile-year-button'], 'tcn-date-picker-year-button')}
+        data-is-disabled={String(disabled)}
+        data-is-selected={String(date.getFullYear() === visibleYear)}
+        onClick={() => {
+          presenter.setVisibleYear(date.getFullYear());
+          onClose();
+        }}
+      >
+        <BodyText>{date.getFullYear()}</BodyText>
+      </button>
+    );
+  }
+
+  function focus() {
+    containerRef.current?.focus();
+  }
+
+  useEffect(() => {
+    containerRef.current?.focus();
+  }, []);
+
+  const rows = [
+    years.slice(0, 4),
+    years.slice(4, 8),
+    years.slice(8, 12),
+    years.slice(12, 16),
+    years.slice(16, 20),
+  ];
+
+  function prev() {
+    setOffset(offset - 20);
+  }
+
+  function next() {
+    setOffset(offset + 20);
+  }
+
+  return (
+    <VStack
+      ref={containerRef}
+      tabIndex={0}
+      padding="8px"
+      width="100%"
+      className={clsx(
+        styles['mobile-year-selector'],
+        'tcn-mobile-date-picker-year-selector'
+      )}
+      gap="4px"
+    >
+      <HStack gap="4px">
+        <MobileButton onClick={prev} hierarchy="tertiary" width="auto">
+          <ChevronLeftIcon flipOnRtl size="md" />
+        </MobileButton>
+        <Spacer />
+        <Headline
+          selectable={false}
+          emphasis="faint"
+          hierarchy="tertiary"
+        >{`${firstYear}-${lastYear}`}</Headline>
+        <Spacer />
+        <MobileButton hierarchy="tertiary" width="auto" onClick={next}>
+          <ChevronRightIcon size="md" />
+        </MobileButton>
+      </HStack>
+      {rows.map((row, index) => (
+        <HStack key={index} gap="4px" width="100%">
+          {row}
+        </HStack>
+      ))}
+      <FocusRedirect onRedirect={focus} />
+    </VStack>
+  );
+}

package/src/mobile/inputs/date_picker/mobile_overlay_header.module.css

@@ -0,0 +1,5 @@
+@layer tcn-system {
+  :where(.mobile-overlay-header) {
+    border-bottom: 1px solid var(--border-color, #e0e0e0);
+  }
+}

package/src/mobile/inputs/date_picker/mobile_overlay_header.tsx

@@ -0,0 +1,29 @@
+import { HStack } from '../../../stacks/h_stack.js';
+import { Spacer } from '../../../stacks/spacer.js';
+import { Headline } from '../../../typography/index.js';
+import { MobileButton } from '../../actions/button/mobile_button.js';
+import { CrossIcon } from '@tcn/icons/cross_icon.js';
+import { clsx } from 'clsx';
+import styles from './mobile_overlay_header.module.css';
+
+export interface MobileOverlayHeaderProps {
+  title: string;
+  onClose: () => void;
+}
+
+export function MobileOverlayHeader({ title, onClose }: MobileOverlayHeaderProps) {
+  return (
+    <HStack
+      width="100%"
+      height="auto"
+      className={clsx(styles['mobile-overlay-header'], 'tcn-mobile-overlay-header')}
+      padding="8px"
+    >
+      <Headline size="sm">{title}</Headline>
+      <Spacer />
+      <MobileButton hierarchy="tertiary" width="auto" onClick={onClose}>
+        <CrossIcon size="md" />
+      </MobileButton>
+    </HStack>
+  );
+}

package/src/mobile/inputs/index.ts

@@ -0,0 +1,4 @@
+export * from './date_picker/mobile_date_picker.js';
+export * from './date_picker/mobile_date_picker_input.js';
+export * from './date_picker/mobile_date_picker_header.js';
+export * from './date_picker/mobile_date_picker_time_selector.js';

package/src/mobile/portal/mobile_portal.tsx

@@ -0,0 +1,14 @@
+import { Portal } from '../../overlay/portal/portal.js';
+import { MobileViewport } from '../viewport/mobile_viewport.js';
+
+export interface MobilePortalProps {
+  children: React.ReactNode;
+}
+
+export function MobilePortal({ children }: MobilePortalProps) {
+  return (
+    <Portal>
+      <MobileViewport>{children}</MobileViewport>
+    </Portal>
+  );
+}

package/src/mobile/viewport/mobile_viewport.module.css

@@ -0,0 +1,23 @@
+.mobileViewport {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: var(--vv-width);
+  height: var(--vv-height);
+  transform: translate(var(--vv-offset-left), var(--vv-offset-top));
+  transform-origin: top left;
+  overflow: scroll;
+  overscroll-behavior: none;
+  padding-top: env(safe-area-inset-top);
+  padding-right: env(safe-area-inset-right);
+  padding-bottom: env(safe-area-inset-bottom);
+  padding-left: env(safe-area-inset-left);
+  touch-action: none;
+}
+
+.mobileViewport > div {
+  /* This captures the horrible document element scrollbar*/
+  width: calc(100% + 1px);
+  height: calc(100% + 1px);
+  overflow: hidden;
+}

package/src/mobile/viewport/mobile_viewport.tsx

@@ -0,0 +1,80 @@
+import React, { useLayoutEffect, useRef } from 'react';
+import styles from './mobile_viewport.module.css';
+import { clsx } from 'clsx';
+
+interface MobileViewportProps {
+  children?: React.ReactNode;
+  className?: string;
+  style?: React.CSSProperties;
+}
+
+/**
+ * MobileRoot: an app-like viewport container that tracks the Visual Viewport.
+ *
+ * Exposes CSS variables on the root element:
+ * --vv-width: px (visual viewport width)
+ * --vv-height: px (visual viewport height)
+ * --vv-offset-top: px
+ * --vv-offset-left: px
+ * --keyboard-inset: px (how much the keyboard overlaps the bottom of the layout viewport)
+ *
+ * Also relies on safe-area env vars for padding (iOS notch/home indicator).
+ */
+export function MobileViewport({ children, className, style }: MobileViewportProps) {
+  const ref = useRef<HTMLDivElement | null>(null);
+
+  // Keep the root sized to the *visual viewport* and publish CSS vars.
+  useLayoutEffect(() => {
+    const el = ref.current;
+    if (!el) return;
+
+    const vv = window.visualViewport;
+
+    const update = () => {
+      // Fallback if VisualViewport is missing (rare now, but safe).
+      const vvWidth = vv?.width ?? window.innerWidth;
+      const vvHeight = vv?.height ?? window.innerHeight;
+      const vvOffsetTop = vv?.offsetTop ?? 0;
+      const vvOffsetLeft = vv?.offsetLeft ?? 0;
+
+      // Keyboard overlap estimate.
+      // Works well cross-platform: when keyboard opens, vvHeight shrinks.
+      // offsetTop matters most on iOS (viewport can shift).
+      const keyboardInset = Math.max(0, window.innerHeight - vvHeight - vvOffsetTop);
+
+      el.style.setProperty('--vv-width', `${vvWidth}px`);
+      el.style.setProperty('--vv-height', `${vvHeight}px`);
+      el.style.setProperty('--vv-offset-top', `${vvOffsetTop}px`);
+      el.style.setProperty('--vv-offset-left', `${vvOffsetLeft}px`);
+      el.style.setProperty('--keyboard-inset', `${keyboardInset}px`);
+    };
+
+    update();
+
+    // VisualViewport events are the most accurate for keyboard + browser UI changes.
+    vv?.addEventListener('resize', update);
+    vv?.addEventListener('scroll', update);
+
+    // Window resize helps in a few Android/WebView edge cases.
+    window.addEventListener('resize', update);
+    window.addEventListener('orientationchange', update);
+
+    return () => {
+      vv?.removeEventListener('resize', update);
+      vv?.removeEventListener('scroll', update);
+      window.removeEventListener('resize', update);
+      window.removeEventListener('orientationchange', update);
+    };
+  }, []);
+
+  return (
+    <div
+      ref={ref}
+      id="mobile-vieport"
+      className={clsx(styles['mobileViewport'], className, 'tcn-mobile-viewport')}
+      style={style}
+    >
+      <div>{children}</div>
+    </div>
+  );
+}

package/src/navigation/tabs/state/link/use_tab_link.ts

@@ -1,4 +1,4 @@
-import { useLayoutEffect } from 'react';
+import React, { useLayoutEffect } from 'react';
 import { useTabs } from '../context.js';
 import { useTrackActiveItemRectangle } from '../../../../utils/css_utils.js';