sheer-ui 0.0.0

package/src/lib/internal/date-time/field/helpers.ts

@@ -0,0 +1,431 @@
+import type { DateValue } from '@internationalized/date';
+import { styleToString } from '../../tools/index.js';
+import type { Formatter } from '../formatter.js';
+import { getPlaceholder } from '../placeholders.js';
+import { hasTime, isZonedDateTime } from '../utils.js';
+import type {
+	DateAndTimeSegmentObj,
+	DateSegmentPart,
+	EditableTimeSegmentPart,
+	EditableSegmentPart,
+	SegmentContentObj,
+	SegmentPart,
+	SegmentStateMap,
+	SegmentValueObj,
+} from '../types.js';
+import { ALL_SEGMENT_PARTS, DATE_SEGMENT_PARTS, EDITABLE_SEGMENT_PARTS, EDITABLE_TIME_SEGMENT_PARTS } from './parts.js';
+import { getSegments } from './segments.js';
+import { BROWSER } from 'esm-env';
+import { kbd } from '../../kbd.js';
+import type { Granularity, HourCycle, TimeSegmentValueObj } from '../types.js';
+
+export function initializeSegmentValues(): TimeSegmentValueObj;
+export function initializeSegmentValues(granularity: Granularity): SegmentValueObj;
+export function initializeSegmentValues(granularity?: Granularity) {
+	const calendarDateTimeGranularities = ['hour', 'minute', 'second'];
+
+	const parts = granularity !== undefined ? EDITABLE_SEGMENT_PARTS : EDITABLE_TIME_SEGMENT_PARTS;
+
+	return Object.fromEntries(
+		parts
+			.map((part) => [part, part === 'dayPeriod' ? 'AM' : null])
+			.filter(([key]) => {
+				if (key === 'literal' || key === null) return false;
+				if (granularity === 'day') return !calendarDateTimeGranularities.includes(key!);
+				return true;
+			}),
+	) as SegmentValueObj | TimeSegmentValueObj;
+}
+
+type SharedContentProps = {
+	granularity: Granularity;
+	dateRef: DateValue;
+	formatter: Formatter;
+	hideTimeZone: boolean;
+	hourCycle: HourCycle | undefined;
+};
+
+type CreateContentObjProps = SharedContentProps & {
+	segmentValues: SegmentValueObj;
+	locale: string;
+};
+
+type CreateContentArrProps = SharedContentProps & {
+	contentObj: SegmentContentObj;
+};
+
+function createContentObj(props: CreateContentObjProps) {
+	const { segmentValues, formatter, locale, dateRef } = props;
+
+	const content = Object.keys(segmentValues).reduce((obj, part) => {
+		if (!isSegmentPart(part)) return obj;
+		if ('hour' in segmentValues && part === 'dayPeriod') {
+			const value = segmentValues[part];
+			if (value !== null) {
+				obj[part] = value;
+			} else {
+				obj[part] = getPlaceholder(part, 'AM', locale);
+			}
+		} else {
+			obj[part] = getPartContent(part);
+		}
+
+		return obj;
+	}, {} as SegmentContentObj);
+
+	function getPartContent(part: DateSegmentPart | EditableTimeSegmentPart) {
+		if ('hour' in segmentValues) {
+			const value = segmentValues[part];
+			const leadingZero = typeof value === 'string' && value?.startsWith('0');
+			const intValue = value !== null ? Number.parseInt(value) : null;
+
+			if (value === '0' && part !== 'year') {
+				return '0';
+			} else if (value !== null && intValue !== null) {
+				const formatted = formatter.part(dateRef.set({ [part]: value }), part, {
+					hourCycle: props.hourCycle === 24 ? 'h23' : undefined,
+				});
+
+				/**
+				 * If we're operating in a 12 hour clock and the part is an hour, we handle
+				 * the conversion to 12 hour format with 2 digit hours and leading zeros here.
+				 */
+				const is12HourMode = props.hourCycle === 12 || (props.hourCycle === undefined && getDefaultHourCycle(locale) === 12);
+				if (part === 'hour' && is12HourMode) {
+					/**
+					 * If the value is over 12, we convert to 12 hour format and add leading
+					 * zeroes if the value is less than 10.
+					 */
+					if (intValue > 12) {
+						const hour = intValue - 12;
+						if (hour === 0) {
+							return '12';
+						} else if (hour < 10) {
+							return `0${hour}`;
+						} else {
+							return `${hour}`;
+						}
+					}
+
+					/**
+					 * If the value is 0, we convert to 12, since 0 is not a valid 12 hour time.
+					 */
+					if (intValue === 0) {
+						return '12';
+					}
+
+					/**
+					 * If the value is less than 10, we add a leading zero to the value.
+					 */
+					if (intValue < 10) {
+						return `0${intValue}`;
+					}
+
+					/**
+					 * Otherwise, we don't need to do anything to the value.
+					 */
+					return `${intValue}`;
+				}
+
+				if (part === 'year') {
+					return `${value}`;
+				}
+
+				if (leadingZero && formatted.length === 1) {
+					return `0${formatted}`;
+				}
+				return formatted;
+			} else {
+				return getPlaceholder(part, '', locale);
+			}
+		} else {
+			if (isDateSegmentPart(part)) {
+				const value = segmentValues[part];
+				const leadingZero = typeof value === 'string' && value?.startsWith('0');
+				if (value === '0') {
+					return '0';
+				} else if (value !== null) {
+					const formatted = formatter.part(dateRef.set({ [part]: value }), part);
+					if (part === 'year') {
+						return `${value}`;
+					}
+					if (leadingZero && formatted.length === 1) {
+						return `0${formatted}`;
+					}
+					return formatted;
+				} else {
+					return getPlaceholder(part, '', locale);
+				}
+			}
+			return '';
+		}
+	}
+
+	return content;
+}
+
+function createContentArr(props: CreateContentArrProps) {
+	const { granularity, dateRef, formatter, contentObj, hideTimeZone, hourCycle } = props;
+	const parts = formatter.toParts(dateRef, getOptsByGranularity(granularity, hourCycle));
+	const segmentContentArr = parts
+		.map((part) => {
+			const defaultParts = ['literal', 'dayPeriod', 'timeZoneName', null];
+
+			if (defaultParts.includes(part.type) || !isSegmentPart(part.type)) {
+				return {
+					part: part.type,
+					value: part.value,
+				};
+			}
+			return {
+				part: part.type,
+				value: contentObj[part.type],
+			};
+		})
+		.filter((segment): segment is { part: SegmentPart; value: string } => {
+			if (segment.part === null || segment.value === null) return false;
+			if (segment.part === 'timeZoneName' && (!isZonedDateTime(dateRef) || hideTimeZone)) {
+				return false;
+			}
+			return true;
+		});
+	return segmentContentArr;
+}
+
+type CreateContentProps = CreateContentObjProps;
+
+export function createContent(props: CreateContentProps) {
+	const contentObj = createContentObj(props);
+	const contentArr = createContentArr({
+		contentObj,
+		...props,
+	});
+	return {
+		obj: contentObj,
+		arr: contentArr,
+	};
+}
+
+function getOptsByGranularity(granularity: Granularity, hourCycle: HourCycle | undefined) {
+	const opts: Intl.DateTimeFormatOptions = {
+		year: 'numeric',
+		month: '2-digit',
+		day: '2-digit',
+		hour: '2-digit',
+		minute: '2-digit',
+		second: '2-digit',
+		timeZoneName: 'short',
+		hourCycle: hourCycle === 24 ? 'h23' : undefined,
+		hour12: hourCycle === 24 ? false : undefined,
+	};
+
+	if (granularity === 'day') {
+		delete opts.second;
+		delete opts.hour;
+		delete opts.minute;
+		delete opts.timeZoneName;
+	}
+	if (granularity === 'hour') {
+		delete opts.minute;
+	}
+	if (granularity === 'minute') {
+		delete opts.second;
+	}
+
+	return opts;
+}
+
+export const initSegmentStates = () =>
+	EDITABLE_SEGMENT_PARTS.reduce((acc, key) => {
+		acc[key] = {
+			lastKeyZero: false,
+			hasLeftFocus: true,
+			updating: null,
+		};
+		return acc;
+	}, {} as SegmentStateMap);
+
+export const isDateSegmentPart = (part: unknown): part is DateSegmentPart => DATE_SEGMENT_PARTS.includes(part as DateSegmentPart);
+
+export const isSegmentPart = (part: string): part is EditableSegmentPart =>
+	EDITABLE_SEGMENT_PARTS.includes(part as EditableSegmentPart);
+
+export const isAnySegmentPart = (part: unknown): part is SegmentPart => ALL_SEGMENT_PARTS.includes(part as EditableSegmentPart);
+
+/**
+ * Get the segments being used/ are rendered in the DOM.
+ * We're using this to determine when to set the value of
+ * the date picker, which is when all the segments have
+ * been filled.
+ */
+function getUsedSegments(fieldNode: HTMLElement | null) {
+	if (!BROWSER || !fieldNode) return [];
+	const usedSegments = getSegments(fieldNode)
+		.map((el) => el.dataset.segment)
+		.filter((part): part is EditableSegmentPart => {
+			return EDITABLE_SEGMENT_PARTS.includes(part as EditableSegmentPart);
+		});
+	return usedSegments;
+}
+
+type GetValueFromSegments = {
+	segmentObj: SegmentValueObj;
+	fieldNode: HTMLElement | null;
+	dateRef: DateValue;
+};
+
+export function getValueFromSegments(props: GetValueFromSegments) {
+	const { segmentObj, fieldNode, dateRef } = props;
+	const usedSegments = getUsedSegments(fieldNode);
+	let date = dateRef;
+
+	for (const part of usedSegments) {
+		if ('hour' in segmentObj) {
+			const value = segmentObj[part];
+			if (value === null) continue;
+			date = date.set({ [part]: segmentObj[part] });
+		} else if (isDateSegmentPart(part)) {
+			const value = segmentObj[part];
+			if (value === null) continue;
+			date = date.set({ [part]: segmentObj[part] });
+		}
+	}
+
+	return date;
+}
+
+/**
+ * Check if all the segments being used have been filled.
+ * We use this to determine when we should set the value
+ * store of the date field(s).
+ *
+ * @param segmentValues - The current `SegmentValueObj`
+ * @param fieldNode  - The id of the date field
+ */
+export function areAllSegmentsFilled(segmentValues: SegmentValueObj, fieldNode: HTMLElement | null) {
+	const usedSegments = getUsedSegments(fieldNode);
+	for (const part of usedSegments) {
+		if ('hour' in segmentValues) {
+			if (segmentValues[part] === null) {
+				return false;
+			}
+		} else if (isDateSegmentPart(part)) {
+			if (segmentValues[part] === null) {
+				return false;
+			}
+		}
+	}
+	return true;
+}
+
+/**
+ * Determines if the provided object is a valid `DateAndTimeSegmentObj`
+ * by checking if it has the correct keys and values for each key.
+ */
+export function isDateAndTimeSegmentObj(obj: unknown): obj is DateAndTimeSegmentObj {
+	if (typeof obj !== 'object' || obj === null) {
+		return false;
+	}
+	return Object.entries(obj).every(([key, value]) => {
+		const validKey =
+			EDITABLE_TIME_SEGMENT_PARTS.includes(key as EditableTimeSegmentPart) || DATE_SEGMENT_PARTS.includes(key as DateSegmentPart);
+
+		const validValue =
+			key === 'dayPeriod'
+				? value === 'AM' || value === 'PM' || value === null
+				: typeof value === 'string' || typeof value === 'number' || value === null;
+
+		return validKey && validValue;
+	});
+}
+
+/**
+ * Infer the granularity to use based on the
+ * value and granularity props.
+ */
+export function inferGranularity(value: DateValue, granularity: Granularity | undefined): Granularity {
+	if (granularity) return granularity;
+	if (hasTime(value)) return 'minute';
+	return 'day';
+}
+
+export function isAcceptableSegmentKey(key: string) {
+	const acceptableSegmentKeys: string[] = [
+		kbd.ENTER,
+		kbd.ARROW_UP,
+		kbd.ARROW_DOWN,
+		kbd.ARROW_LEFT,
+		kbd.ARROW_RIGHT,
+		kbd.BACKSPACE,
+		kbd.SPACE,
+	];
+	if (acceptableSegmentKeys.includes(key)) return true;
+	if (key.length === 1 && key >= '0' && key <= '9') return true;
+	return false;
+}
+
+export const isAcceptableDayPeriodKey = (key: string) =>
+	isAcceptableSegmentKey(key) || key === kbd.A || key === kbd.P || key === kbd.a || key === kbd.p;
+
+export const isArrowUp = (key: string) => key === kbd.ARROW_UP;
+export const isArrowDown = (key: string) => key === kbd.ARROW_DOWN;
+export const isBackspace = (key: string) => key === kbd.BACKSPACE;
+
+/**
+ * Determines if the element with the provided id is the first focusable
+ * segment in the date field with the provided fieldId.
+ *
+ * @param id - The id of the element to check if it's the first segment
+ * @param fieldNode - The id of the date field associated with the segment
+ */
+export function isFirstSegment(id: string, fieldNode: HTMLElement | null) {
+	if (!BROWSER) return false;
+	const segments = getSegments(fieldNode);
+	return segments.length ? segments[0]!.id === id : false;
+}
+
+type SetDescriptionProps = {
+	id: string;
+	formatter: Formatter;
+	value: DateValue;
+	doc: Document;
+};
+/**
+ * Creates or updates a description element for a date field
+ * which enables screen readers to read the date field's value.
+ *
+ * This element is hidden from view, and is portalled to the body
+ * so it can be associated via `aria-describedby` and read by
+ * screen readers as the user interacts with the date field.
+ */
+export function setDescription(props: SetDescriptionProps) {
+	const { id, formatter, value, doc } = props;
+	if (!BROWSER) return;
+	const valueString = formatter.selectedDate(value);
+	const el = doc.getElementById(id);
+	if (!el) {
+		const div = doc.createElement('div');
+		div.style.cssText = styleToString({
+			display: 'none',
+		});
+		div.id = id;
+		div.innerText = `Selected Date: ${valueString}`;
+		doc.body.appendChild(div);
+	} else {
+		el.innerText = `Selected Date: ${valueString}`;
+	}
+}
+
+const defaultHourCycleCache = new Map<string, 12 | 24>();
+
+export function getDefaultHourCycle(locale: string): 12 | 24 {
+	const cached = defaultHourCycleCache.get(locale);
+	if (cached) return cached;
+	const formatter = new Intl.DateTimeFormat(locale, { hour: 'numeric' });
+	const parts = formatter.formatToParts(new Date('2023-01-01T13:00:00'));
+	const hourPart = parts.find((part) => part.type === 'hour');
+
+	const hourCycle = hourPart?.value === '1' ? 12 : 24;
+	defaultHourCycleCache.set(locale, hourCycle);
+	return hourCycle;
+}

package/src/lib/internal/date-time/field/parts.ts

@@ -0,0 +1,15 @@
+export const DATE_SEGMENT_PARTS = ["day", "month", "year"] as const;
+export const EDITABLE_TIME_SEGMENT_PARTS = ["hour", "minute", "second", "dayPeriod"] as const;
+export const NON_EDITABLE_SEGMENT_PARTS = ["literal", "timeZoneName"] as const;
+export const EDITABLE_SEGMENT_PARTS = [
+	...DATE_SEGMENT_PARTS,
+	...EDITABLE_TIME_SEGMENT_PARTS,
+] as const;
+export const ALL_SEGMENT_PARTS = [
+	...EDITABLE_SEGMENT_PARTS,
+	...NON_EDITABLE_SEGMENT_PARTS,
+] as const;
+export const ALL_TIME_SEGMENT_PARTS = [
+	...EDITABLE_TIME_SEGMENT_PARTS,
+	...NON_EDITABLE_SEGMENT_PARTS,
+] as const;

package/src/lib/internal/date-time/field/range-field.svelte.ts

@@ -0,0 +1,45 @@
+import { boxWith, type WritableBox } from '../../tools/index.js';
+import { untrack } from 'svelte';
+
+export type RangeEndpoints<T> = { start: T | undefined; end: T | undefined };
+
+export class RangeFieldValueController<T> {
+	readonly value: WritableBox<RangeEndpoints<T>>;
+	readonly placeholder: WritableBox<T>;
+	start = $derived.by(() => this.value.current.start);
+	end = $derived.by(() => this.value.current.end);
+	readonly startComplete = $derived(this.start !== undefined);
+	readonly endComplete = $derived(this.end !== undefined);
+	readonly complete = $derived(this.startComplete && this.endComplete);
+
+	constructor(value: WritableBox<RangeEndpoints<T>>, placeholder: WritableBox<T>) {
+		this.value = value;
+		this.placeholder = placeholder;
+		$effect(() => {
+			const start = this.value.current.start;
+			untrack(() => {
+				if (start && this.placeholder.current !== start) this.placeholder.current = start;
+			});
+		});
+	}
+
+	sideValueBox(side: 'start' | 'end') {
+		return boxWith(
+			() => (side === 'start' ? this.start : this.end),
+			(next: T | undefined) => {
+				if (side === 'start') this.start = next;
+				else this.end = next;
+				this.#commit();
+			},
+		);
+	}
+
+	#commit() {
+		const value = this.value.current;
+		if (this.start !== undefined && this.end !== undefined) {
+			if (value.start !== this.start || value.end !== this.end) this.value.current = { start: this.start, end: this.end };
+		} else if (value.start !== undefined && value.end !== undefined) {
+			this.value.current = { start: undefined, end: undefined };
+		}
+	}
+}

package/src/lib/internal/date-time/field/segments.ts

@@ -0,0 +1,89 @@
+import { isAnySegmentPart } from './helpers.js';
+import { isHTMLElement } from '../../tools/utils/dom.js';
+import { kbd } from '../../kbd.js';
+
+const navigate = (e: KeyboardEvent, neighbors: { prev: HTMLElement | null; next: HTMLElement | null }) => {
+	if (e.key === kbd.ARROW_LEFT) neighbors.prev?.focus();
+	else if (e.key === kbd.ARROW_RIGHT) neighbors.next?.focus();
+};
+
+/**
+ * Retrieves the next segment relative to the provided node, or null at the end.
+ */
+export const getNextSegment = (node: HTMLElement, segments: HTMLElement[]) => {
+	const index = segments.indexOf(node);
+	if (index === segments.length - 1 || index === -1) return null;
+	return segments[index + 1]!;
+};
+
+/**
+ * Retrieves the previous segment relative to the provided node, or null at the start.
+ */
+export const getPrevSegment = (node: HTMLElement, segments: HTMLElement[]) => {
+	const index = segments.indexOf(node);
+	if (index === 0 || index === -1) return null;
+	return segments[index - 1]!;
+};
+
+/**
+ * Retrieves all the interactive segments within the field.
+ */
+export const getSegments = (fieldNode: HTMLElement | null) => {
+	if (!fieldNode) return [];
+	return Array.from(fieldNode.querySelectorAll<HTMLElement>('[data-segment]')).filter((el) => {
+		const segment = el.dataset.segment;
+		return segment === 'trigger' || (isAnySegmentPart(segment) && segment !== 'literal');
+	});
+};
+
+export const getTimeSegments = (fieldNode: HTMLElement | null) => {
+	if (!fieldNode) return [];
+	return Array.from(fieldNode.querySelectorAll<HTMLElement>('[data-segment]')).filter((el) => el.dataset.segment !== 'literal');
+};
+
+/**
+ * Get the first interactive segment within the field.
+ */
+export const getFirstSegment = (fieldNode: HTMLElement | null) => getSegments(fieldNode)[0];
+
+export const getFirstTimeSegment = (fieldNode: HTMLElement | null) => getTimeSegments(fieldNode)[0];
+
+const prevNext = (startingNode: HTMLElement, segments: HTMLElement[]) => ({
+	next: getNextSegment(startingNode, segments),
+	prev: getPrevSegment(startingNode, segments),
+});
+
+/**
+ * Retrieves the next and previous segments relative to the current node.
+ */
+const getPrevNextSegments = (startingNode: HTMLElement, fieldNode: HTMLElement | null) =>
+	prevNext(startingNode, getSegments(fieldNode));
+
+const getPrevNextTimeSegments = (startingNode: HTMLElement, fieldNode: HTMLElement | null) =>
+	prevNext(startingNode, getTimeSegments(fieldNode));
+
+/**
+ * Handles segment navigation based on the provided keyboard event and field.
+ */
+export const handleSegmentNavigation = (e: KeyboardEvent, fieldNode: HTMLElement | null) => {
+	const node = e.currentTarget;
+	if (!isHTMLElement(node)) return;
+	navigate(e, getPrevNextSegments(node, fieldNode));
+};
+
+export const handleTimeSegmentNavigation = (e: KeyboardEvent, fieldNode: HTMLElement | null) => {
+	const node = e.currentTarget;
+	if (!isHTMLElement(node)) return;
+	navigate(e, getPrevNextTimeSegments(node, fieldNode));
+};
+
+const moveFocus = (e: KeyboardEvent, fieldNode: HTMLElement | null, getNeighbors: typeof getPrevNextSegments, dir: 'prev' | 'next') => {
+	const node = e.currentTarget;
+	if (!isHTMLElement(node)) return;
+	getNeighbors(node, fieldNode)[dir]?.focus();
+};
+
+export const moveToPrevSegment = (e: KeyboardEvent, fieldNode: HTMLElement | null) => moveFocus(e, fieldNode, getPrevNextSegments, 'prev');
+export const moveToNextSegment = (e: KeyboardEvent, fieldNode: HTMLElement | null) => moveFocus(e, fieldNode, getPrevNextSegments, 'next');
+
+export const isSegmentNavigationKey = (key: string) => key === kbd.ARROW_RIGHT || key === kbd.ARROW_LEFT;