@heliosgraphics/ui 2.0.0-alpha.73 → 2.0.0-alpha.75

package/components/Dialog/Dialog.module.css

@@ -9,7 +9,7 @@
 	width: 580px;
 
 	border: 0;
-	border-radius: var(--radius-lg);
+	border-radius: var(--radius-lg) 0 0 var(--radius-lg);
 	touch-action: pan-y;
 	transform: translateX(-50%);
 }
@@ -29,11 +29,6 @@
 	transform: translateX(-50%) translateY(-50%);
 }
 
-.dialog::-webkit-scrollbar {
-	height: 8px;
-	width: 8px;
-}
-
 .dialog__content {
 	position: relative;
 	z-index: var(--z-index-1);
@@ -60,8 +55,6 @@
 
 @media (max-width: 576px) {
 	.dialog:not(.dialogCentered) {
-		margin-left: 8px;
-		margin-right: 8px;
 		width: calc(100% - 16px);
 	}
 

package/components/Layout/components/LayoutMain/components/LayoutMainContent/LayoutMainContent.tsx

@@ -4,6 +4,11 @@ import { getFlexUtility, getSafeFlexProps } from "../../../../../Flex/Flex.utils
 import { getClasses } from "@heliosgraphics/utils/classnames"
 import styles from "./LayoutMainContent.module.css"
 import { useLayoutEffect, useRef, type FC } from "react"
+import {
+	initLocationTracker,
+	shouldResetScrollOnLocationChange,
+	subscribeToLocationChanges,
+} from "./LayoutMainContent.utils"
 import type { LayoutMainContentProps } from "./LayoutMainContent.types"
 
 export const LayoutMainContent: FC<LayoutMainContentProps> = (props) => {
@@ -16,11 +21,17 @@ export const LayoutMainContent: FC<LayoutMainContentProps> = (props) => {
 	const mainContentClasses: string = getClasses(layoutMainFlexClasses, styles.layoutMainContent, "ui-bg-secondary")
 	const safeProps = getSafeFlexProps(props)
 
-	useLayoutEffect(() => {
-		if (contentRef.current) {
-			contentRef.current.scrollTo(0, 0)
+	useLayoutEffect((): (() => void) => {
+		const onLocationChange = (): void => {
+			if (shouldResetScrollOnLocationChange()) {
+				contentRef.current?.scrollTo(0, 0)
+			}
 		}
-	}, [props.children])
+
+		initLocationTracker()
+
+		return subscribeToLocationChanges(onLocationChange)
+	})
 
 	return (
 		<section {...safeProps} ref={contentRef} className={mainContentClasses} data-ui-component="Main.Content">

package/components/Layout/components/LayoutMain/components/LayoutMainContent/LayoutMainContent.utils.ts

@@ -0,0 +1,65 @@
+"use client"
+
+let lastLocation: string | null = null
+let isHistoryPatched: boolean = false
+
+const getLocationKey = (): string | null => {
+	if (!globalThis?.location) return null
+
+	return `${globalThis.location.pathname}${globalThis.location.search}${globalThis.location.hash}`
+}
+
+const patchHistory = (): void => {
+	if (isHistoryPatched || !globalThis?.history) return
+
+	isHistoryPatched = true
+
+	const { pushState, replaceState } = globalThis.history
+	const dispatchLocationChange = (): void => {
+		globalThis.dispatchEvent(new Event("locationchange"))
+	}
+
+	const pushStateWrapper = (...args: Parameters<History["pushState"]>): ReturnType<History["pushState"]> => {
+		const result = pushState.apply(globalThis.history, args as Parameters<History["pushState"]>)
+		dispatchLocationChange()
+		return result
+	}
+
+	const replaceStateWrapper = (...args: Parameters<History["replaceState"]>): ReturnType<History["replaceState"]> => {
+		const result = replaceState.apply(globalThis.history, args as Parameters<History["replaceState"]>)
+		dispatchLocationChange()
+		return result
+	}
+
+	globalThis.history.pushState = pushStateWrapper
+	globalThis.history.replaceState = replaceStateWrapper
+
+	globalThis.addEventListener("popstate", dispatchLocationChange)
+	globalThis.addEventListener("hashchange", dispatchLocationChange)
+}
+
+export const initLocationTracker = (): void => {
+	patchHistory()
+	lastLocation = getLocationKey()
+}
+
+export const shouldResetScrollOnLocationChange = (): boolean => {
+	const currentLocation: string | null = getLocationKey()
+	const shouldReset: boolean = Boolean(currentLocation && lastLocation && currentLocation !== lastLocation)
+
+	lastLocation = currentLocation
+
+	return shouldReset
+}
+
+export const subscribeToLocationChanges = (handler: () => void): (() => void) => {
+	patchHistory()
+
+	globalThis.addEventListener("locationchange", handler)
+
+	const unsubscribe = (): void => {
+		globalThis.removeEventListener("locationchange", handler)
+	}
+
+	return unsubscribe
+}

package/components/Shimmer/Shimmer.tsx

@@ -6,7 +6,7 @@ import type { FC } from "react"
 export const Shimmer: FC<ShimmerProps> = ({ isRounded, paddingTop, paddingBottom, height, width }) => {
 	const shimmerDivClasses: string = getClasses({
 		["radius-max"]: isRounded,
-		["radius-small"]: !isRounded,
+		["radius-sm"]: !isRounded,
 	})
 
 	return (

package/css/feat.atomics.css

@@ -54,17 +54,17 @@
 
 /* scrollbar */
 .ui-scrollbar::-webkit-scrollbar {
-	height: 10px;
-	width: 10px;
+	height: 8px;
+	width: 8px;
 }
 
 .ui-scrollbar--narrow::-webkit-scrollbar {
-	height: 6px;
-	width: 6px;
+	height: 4px;
+	width: 4px;
 }
 
-.ui-scrollbar::-webkit-scrollbar-corner {
-	background-color: var(--ui-bg-disabled-gray);
+.ui-scrollbar::-webkit-scrollbar-track {
+	background-color: var(--ui-bg-tertiary);
 }
 
 .ui-scrollbar::-webkit-scrollbar-thumb {
@@ -75,10 +75,6 @@
 	transition: all var(--speed-sm) var(--ease-in-out-sine);
 }
 
-.ui-scrollbar::-webkit-scrollbar-track {
-	background-color: var(--ui-bg-soft-gray);
-}
-
 .ui-scrollbar::-webkit-scrollbar-thumb:hover {
 	background-color: var(--ui-bg-secondary);
 }

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@heliosgraphics/ui",
-	"version": "2.0.0-alpha.73",
+	"version": "2.0.0-alpha.75",
 	"type": "module",
 	"author": "Chris Puska <chris@puska.org>",
 	"private": false,

package/types/scale.ts

@@ -3,6 +3,7 @@ export type HeliosScaleType =
 	| 0
 	| 1
 	| 2
+	| 3
 	| 4
 	| 6
 	| 8