Port back changes and utils

Author: fongandrew

src/shared/components/callbacks/disabled.ts

@@ -14,8 +14,8 @@ registerDocumentSetup((document) => {
 
 	/** Listener that selectively disables event propagation if aria-disabled */
 	function preventDefaultIfAriaDisabled(event: Event) {
-		const target = event.target as HTMLElement;
-		if (!target) return;
+		const target = event.target;
+		if (!target || !(target instanceof HTMLElement)) return;
 
 		const closestAriaDisabled = target.closest('[aria-disabled]');
 		if (closestAriaDisabled && closestAriaDisabled?.getAttribute('aria-disabled') !== 'false') {

src/shared/components/callbacks/top-nav.ts

@@ -1,5 +1,8 @@
 import { createMounter } from '~/shared/utility/callback-attrs/mount';
-import { getScrollableParent } from '~/shared/utility/get-scrollable-parent';
+import {
+	getScrollableParent,
+	getScrollListenerParent,
+} from '~/shared/utility/get-scrollable-parent';
 import { createMagicProp } from '~/shared/utility/magic-prop';
 import { elmWin } from '~/shared/utility/multi-view';
 import { onUnmount } from '~/shared/utility/unmount-observer';
@@ -25,28 +28,9 @@ const TOP_NAV_SCROLL_THRESHOLD = 500;
  * Attach scroll handler to scrollable parent of top nav layout
  */
 export const topNavScroll = createMounter('modal__open-scroll-state', (elm) => {
-	let parent = getScrollableParent(elm) as {
-		addEventListener: (
-			type: string,
-			listener: EventListener,
-			options?: boolean | AddEventListenerOptions,
-		) => void;
-		removeEventListener: (
-			type: string,
-			listener: EventListener,
-			options?: boolean | AddEventListenerOptions,
-		) => void;
-		ownerDocument: Document | null;
-	};
+	const parent = getScrollListenerParent(elm);
 	if (!parent) return;
 
-	if (
-		parent === parent.ownerDocument?.scrollingElement ||
-		parent === parent.ownerDocument?.documentElement
-	) {
-		parent = parent.ownerDocument;
-	}
-
 	const onScroll = (event: Event) => handleScroll(elm, event);
 	parent.addEventListener('scroll', onScroll, { passive: true });
 	onUnmount(elm, () => {

src/shared/components/card.css

@@ -15,6 +15,17 @@
 		&.o-grid {
 			container-type: normal;
 		}
+
+		@mixin v-breakpoint-tablet {
+			.o-container & {
+				box-shadow: none;
+			}
+
+			:modal &,
+			:popover-open & {
+				box-shadow: var(--v-shadow-md);
+			}
+		}
 	}
 
 	.c-card__header {

src/shared/components/card.tsx

@@ -7,7 +7,7 @@ import { SpinnerSuspense } from '~/shared/components/spinner';
 
 export type CardProps = JSX.IntrinsicAttributes &
 	Omit<JSX.HTMLAttributes<HTMLDivElement>, 'onError'> & {
-		as?: 'article' | 'div' | 'section';
+		as?: 'article' | 'div' | 'section' | undefined;
 		/** Error boundary render callback */
 		onError?: ((err: Error & { code: string }, eventId: string) => void) | undefined;
 		/** Error boundary reload callback */

src/shared/components/details.tsx

@@ -3,6 +3,8 @@ import { type JSX, splitProps } from 'solid-js';
 
 export interface DetailsProps
 	extends Omit<JSX.DetailsHtmlAttributes<HTMLDetailsElement>, 'children'> {
+	/** Summary props */
+	summary?: JSX.HTMLAttributes<HTMLElement>;
 	/** Two children in render funcs -- one for summary and one for details */
 	children: [() => JSX.Element, () => JSX.Element];
 }
@@ -24,10 +26,12 @@ export interface DetailsProps
  * ```
  */
 export function Details(props: DetailsProps) {
-	const [local, rest] = splitProps(props, ['class', 'children']);
+	const [local, rest] = splitProps(props, ['class', 'summary', 'children']);
 	return (
 		<details {...rest} class={cx('c-details', local.class)}>
-			<summary class="c-details__summary">{local.children[0]()}</summary>
+			<summary {...local.summary} class={cx('c-details__summary', local.summary?.class)}>
+				{local.children[0]()}
+			</summary>
 			<div class="c-details__content">{local.children[1]()}</div>
 		</details>
 	);

src/shared/components/labelled-action.css

@@ -4,7 +4,7 @@
 	.c-labelled-action {
 		display: flex;
 		align-items: center;
-		gap: var(--v-inline-gap);
+		gap: var(--v-spacing);
 	}
 
 	.c-labelled-action__label {

src/shared/components/labelled-action.tsx

@@ -112,7 +112,7 @@ export function LabelledAction(props: LabelledInputProps) {
  */
 export function LabelledActionCard(props: LabelledInputProps) {
 	return (
-		<Card>
+		<Card as="div">
 			<CardContent>
 				<LabelledAction {...props} />
 			</CardContent>

src/shared/components/modal.tsx

@@ -115,17 +115,17 @@ export function Modal(props: DialogProps) {
 	const [dialog, setDialog] = createSignal<HTMLDialogElement | null>(null);
 	const [local, rest] = splitProps(props, ['children', 'id', 'open', 'onError', 'onReload']);
 
-	// Open state
-	const [open, setOpen] = createSignal<boolean | undefined>();
+	// Mounting state
+	const [mounted, setMounted] = createSignal<boolean | undefined>();
 	createRenderEffect(() => {
 		if (local.open !== false) {
-			setOpen(true);
+			setMounted(true);
 			return;
 		}
 
 		// Defer updating closed state for a set amount of time to allow for transitions
 		// This can be long since there are other things
-		const timeout = setTimeout(() => setOpen(false), MODAL_CLOSE_SYNC_DELAY);
+		const timeout = setTimeout(() => setMounted(false), MODAL_CLOSE_SYNC_DELAY);
 		onCleanup(() => clearTimeout(timeout));
 	});
 
@@ -135,7 +135,7 @@ export function Modal(props: DialogProps) {
 	// Handle open state changes after mount
 	createEffect(() => {
 		const dialogElm = dialog();
-		if (!dialogElm) return;
+		if (!dialogElm || !mounted()) return;
 		if (local.open) {
 			openModal(dialogElm);
 		} else if (local.open === false && dialogElm.open) {
@@ -154,7 +154,7 @@ export function Modal(props: DialogProps) {
 	return (
 		// local.open being undefined implies we should show and rely on the dialog's
 		// own open state to control visibility
-		<Show when={open()}>
+		<Show when={mounted()}>
 			<ModalContext.Provider value={id}>
 				<dialog
 					{...rest}

src/shared/components/select-option-list.tsx

@@ -109,17 +109,17 @@ export function SelectOptionList(props: SelectOptionListProps) {
 			</ListBox>
 			{props.selectInputTextId ? (
 				<div role="status" class="c-select__status">
-					<span class="c-select__no_match">
+					<span class="c-select__no-match">
 						<T>
 							No matches found for{' '}
 							<strong
 								id={local.selectInputTextId}
-								class="c-select__no_match_value"
+								class="c-select__no-match-value"
 								{...emptyAttr()}
 							/>
 						</T>
 					</span>
-					<span class="c-select__no_value">
+					<span class="c-select__no-value">
 						<T>Type something</T>
 					</span>
 					<div class="c-select__busy">

src/shared/components/select.css

@@ -111,8 +111,8 @@
 			display: block;
 		}
 
-		.c-select__no_match,
-		.c-select__no_value,
+		.c-select__no-match,
+		.c-select__no-value,
 		.c-select__busy {
 			display: none;
 		}
@@ -126,11 +126,11 @@
 
 		/* Different empty states depending on whether there's input */
 		:has(.c-select__items[data-t-empty]):not([aria-busy='true']) + & {
-			.c-select__no_match:not(:has(.c-select__no_match_value[data-t-empty])) {
+			.c-select__no-match:not(:has(.c-select__no-match-value[data-t-empty])) {
 				display: block;
 			}
 
-			.c-select__no_match:has(.c-select__no_match_value[data-t-empty]) + .c-select__no_value {
+			.c-select__no-match:has(.c-select__no-match-value[data-t-empty]) + .c-select__no-value {
 				display: block;
 			}
 		}