@heliosgraphics/ui 2.0.0-alpha.94 → 2.0.0-alpha.96

package/components/Heading/components/H4/H4.tsx

@@ -1,6 +1,9 @@
+import { getClasses } from "@heliosgraphics/utils"
 import type { FC } from "react"
 import type { H4Props } from "./H4.types"
 
 export const H4: FC<H4Props> = (props) => {
-	return <h4 {...props} className={`h4 ${props.className}`} data-ui-component="Heading.H4" />
+	return <h4 {...props} className={getClasses("h4", props.className)} data-ui-component="Heading.H4" />
 }
+
+H4.displayName = "H4"

package/components/Heading/components/H5/H5.tsx

@@ -1,6 +1,9 @@
+import { getClasses } from "@heliosgraphics/utils"
 import type { FC } from "react"
 import type { H5Props } from "./H5.types"
 
 export const H5: FC<H5Props> = (props) => {
-	return <h5 {...props} className={`h5 ${props.className}`} data-ui-component="Heading.H5" />
+	return <h5 {...props} className={getClasses("h5", props.className)} data-ui-component="Heading.H5" />
 }
+
+H5.displayName = "H5"

package/components/Heading/components/H6/H6.tsx

@@ -1,6 +1,9 @@
+import { getClasses } from "@heliosgraphics/utils"
 import type { FC } from "react"
 import type { H6Props } from "./H6.types"
 
 export const H6: FC<H6Props> = (props) => {
-	return <h6 {...props} className={`h6 ${props.className}`} data-ui-component="Heading.H6" />
+	return <h6 {...props} className={getClasses("h6", props.className)} data-ui-component="Heading.H6" />
 }
+
+H6.displayName = "H6"

package/components/Icon/Icon.tsx

@@ -28,3 +28,5 @@ export const Icon: FC<IconProps> = ({ icon, className, emphasis, size }) => {
 		/>
 	)
 }
+
+Icon.displayName = "Icon"

package/components/Input/Input.tsx

@@ -1,6 +1,6 @@
 "use client"
 
-import { useId, type FC } from "react"
+import { useId, forwardRef } from "react"
 import { getClasses } from "@heliosgraphics/utils"
 import { Button } from "../Button"
 import { ButtonGroup } from "../ButtonGroup"
@@ -13,104 +13,112 @@ import styles from "./Input.module.css"
 import type { InputProps } from "./Input.types"
 import type { ResultItem } from "../shared/ResultList"
 
-export const Input: FC<InputProps> = ({
-	className,
-	helperText,
-	id,
-	isDisabled,
-	autoComplete,
-	autoFocus,
-	isLabelHidden,
-	isLoading,
-	isRequired,
-	label,
-	maxLength,
-	name,
-	onBlur,
-	onChange,
-	onClear,
-	onFocus,
-	onKeyDown,
-	onKeyUp,
-	placeholder,
-	results,
-	showResults,
-	type = "text",
-	value,
-}) => {
-	const generatedId: string = useId()
-	const htmlFor: string = id || generatedId
-	const helperId: string = `${htmlFor}-helper`
+export const Input = forwardRef<HTMLInputElement, InputProps>(
+	(
+		{
+			className,
+			helperText,
+			id,
+			isDisabled,
+			autoComplete,
+			autoFocus,
+			isLabelHidden,
+			isLoading,
+			isRequired,
+			label,
+			maxLength,
+			name,
+			onBlur,
+			onChange,
+			onClear,
+			onFocus,
+			onKeyDown,
+			onKeyUp,
+			placeholder,
+			results,
+			showResults,
+			type = "text",
+			value,
+		},
+		ref,
+	) => {
+		const generatedId: string = useId()
+		const htmlFor: string = id || generatedId
+		const helperId: string = `${htmlFor}-helper`
 
-	const filteredItems: Array<ResultItem> =
-		results
-			?.filter((item) => {
-				const lowerCaseItem: string = item.name.toLowerCase()
-				const lowerCaseFilter: string | undefined = value?.toLowerCase()
+		const filteredItems: Array<ResultItem> =
+			results
+				?.filter((item) => {
+					const lowerCaseItem: string = item.name.toLowerCase()
+					const lowerCaseFilter: string | undefined = value?.toLowerCase()
 
-				return lowerCaseFilter && lowerCaseItem.includes(lowerCaseFilter)
-			})
-			.filter(Boolean) || []
+					return lowerCaseFilter && lowerCaseItem.includes(lowerCaseFilter)
+				})
+				.filter(Boolean) || []
 
-	const showingResults: boolean = Boolean(!!filteredItems?.length && showResults)
+		const showingResults: boolean = Boolean(!!filteredItems?.length && showResults)
 
-	const inputClasses: string = getClasses(styles.input, "relative flex flex-column", className, {
-		[styles.inputDisabled]: isDisabled,
-		[styles.inputShowingResults]: showingResults,
-	})
+		const inputClasses: string = getClasses(styles.input, "relative flex flex-column", className, {
+			[styles.inputDisabled]: isDisabled,
+			[styles.inputShowingResults]: showingResults,
+		})
 
-	return (
-		<div className={inputClasses} data-ui-component="Input">
-			<InputLabel id={htmlFor} label={label} isDisabled={!!isDisabled} isHidden={!!isLabelHidden} />
-			<Flex className="grow-1">
-				{onClear && !!value && (
-					<ButtonGroup className={styles.input__clear}>
-						<Button
-							value="Clear"
-							size="tiny"
-							intent="neutral"
-							icon="x"
-							onClick={onClear}
-							isIconOnly={true}
-							isRounded={true}
-						/>
-					</ButtonGroup>
-				)}
-				<input
-					className={styles.input__input}
-					disabled={isDisabled}
-					autoComplete={autoComplete}
-					autoFocus={autoFocus}
-					id={htmlFor}
-					maxLength={maxLength}
-					name={name}
-					onBlur={onBlur}
-					type={type}
-					onChange={onChange}
-					onFocus={onFocus}
-					onKeyDown={onKeyDown}
-					onKeyUp={onKeyUp}
-					placeholder={placeholder}
-					required={isRequired}
-					value={value}
-					aria-describedby={helperText ? helperId : undefined}
-				/>
-				{isLoading && (
-					<div className={styles.input__loading}>
-						<Loading size={20} />
+		return (
+			<div className={inputClasses} data-ui-component="Input">
+				<InputLabel id={htmlFor} label={label} isDisabled={!!isDisabled} isHidden={!!isLabelHidden} />
+				<Flex className="grow-1">
+					{onClear && !!value && (
+						<ButtonGroup className={styles.input__clear}>
+							<Button
+								value="Clear"
+								size="tiny"
+								intent="neutral"
+								icon="x"
+								onClick={onClear}
+								isIconOnly={true}
+								isRounded={true}
+							/>
+						</ButtonGroup>
+					)}
+					<input
+						ref={ref}
+						className={styles.input__input}
+						disabled={isDisabled}
+						autoComplete={autoComplete}
+						autoFocus={autoFocus}
+						id={htmlFor}
+						maxLength={maxLength}
+						name={name}
+						onBlur={onBlur}
+						type={type}
+						onChange={onChange}
+						onFocus={onFocus}
+						onKeyDown={onKeyDown}
+						onKeyUp={onKeyUp}
+						placeholder={placeholder}
+						required={isRequired}
+						value={value}
+						aria-describedby={helperText ? helperId : undefined}
+					/>
+					{isLoading && (
+						<div className={styles.input__loading}>
+							<Loading size={20} />
+						</div>
+					)}
+				</Flex>
+				{showingResults && (
+					<div className={styles.input__results}>
+						<ResultList items={filteredItems} />
 					</div>
 				)}
-			</Flex>
-			{showingResults && (
-				<div className={styles.input__results}>
-					<ResultList items={filteredItems} />
-				</div>
-			)}
-			{!!helperText && (
-				<Text type="tiny" emphasis="tertiary" className={styles.input__helper} id={helperId}>
-					{helperText}
-				</Text>
-			)}
-		</div>
-	)
-}
+				{!!helperText && (
+					<Text type="tiny" emphasis="tertiary" className={styles.input__helper} id={helperId}>
+						{helperText}
+					</Text>
+				)}
+			</div>
+		)
+	},
+)
+
+Input.displayName = "Input"

package/components/Layout/Layout.tsx

@@ -29,3 +29,5 @@ export const Layout: FC<LayoutProps> = (props) => {
 		</LayoutProvider>
 	)
 }
+
+Layout.displayName = "Layout"

package/components/Layout/components/LayoutAside/LayoutAside.tsx

@@ -23,3 +23,5 @@ export const LayoutAside: FC<LayoutAsideProps> = ({ children }) => {
 		</aside>
 	)
 }
+
+LayoutAside.displayName = "LayoutAside"

package/components/Layout/components/LayoutAside/components/LayoutAsideContent/LayoutAsideContent.tsx

@@ -15,3 +15,5 @@ export const LayoutAsideContent: FC<LayoutAsideContentProps> = (props) => {
 		</section>
 	)
 }
+
+LayoutAsideContent.displayName = "LayoutAsideContent"

package/components/Layout/components/LayoutAside/components/LayoutAsideFooter/LayoutAsideFooter.tsx

@@ -15,3 +15,5 @@ export const LayoutAsideFooter: FC<LayoutAsideFooterProps> = (props) => {
 		</footer>
 	)
 }
+
+LayoutAsideFooter.displayName = "LayoutAsideFooter"

package/components/Layout/components/LayoutAside/components/LayoutAsideToggle/LayoutAsideToggle.tsx

@@ -25,3 +25,5 @@ export const LayoutAsideToggle: FC<LayoutAsideToggleProps> = () => {
 		</ButtonGroup>
 	)
 }
+
+LayoutAsideToggle.displayName = "LayoutAsideToggle"

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

@@ -19,3 +19,5 @@ export const LayoutMain: FC<LayoutMainProps> = (props) => {
 		</main>
 	)
 }
+
+LayoutMain.displayName = "LayoutMain"

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

@@ -39,3 +39,5 @@ export const LayoutMainContent: FC<LayoutMainContentProps> = (props) => {
 		</section>
 	)
 }
+
+LayoutMainContent.displayName = "LayoutMainContent"

package/components/Layout/components/LayoutNavigation/LayoutNavigation.tsx

@@ -20,3 +20,5 @@ export const LayoutNavigation: FC<LayoutNavigationProps> = (props) => {
 		</nav>
 	)
 }
+
+LayoutNavigation.displayName = "LayoutNavigation"

package/components/Layout/components/LayoutSubNavigation/LayoutSubNavigation.tsx

@@ -20,3 +20,5 @@ export const LayoutSubNavigation: FC<LayoutSubNavigationProps> = (props) => {
 		</nav>
 	)
 }
+
+LayoutSubNavigation.displayName = "LayoutSubNavigation"

package/components/Loading/Loading.tsx

@@ -53,3 +53,5 @@ export const Loading: FC<LoadingProps> = ({ className, size, emphasis }) => {
 		</svg>
 	)
 }
+
+Loading.displayName = "Loading"

package/components/Markdown/Markdown.tsx

@@ -23,3 +23,5 @@ export const Markdown: FC<MarkdownProps> = ({ text, children, isNonSelectable })
 		</div>
 	)
 }
+
+Markdown.displayName = "Markdown"

package/components/Masonry/Masonry.tsx

@@ -31,7 +31,11 @@ export const Masonry: FC<MasonryProps> = ({
 	return (
 		<>
 			<style dangerouslySetInnerHTML={{ __html: mediaStyles }} />
-			<div className={id}>{children}</div>
+			<div className={id} data-ui-component="Masonry">
+				{children}
+			</div>
 		</>
 	)
 }
+
+Masonry.displayName = "Masonry"

package/components/Menu/Menu.tsx

@@ -14,3 +14,5 @@ export const Menu: FC<MenuProps> = (props) => {
 		</nav>
 	)
 }
+
+Menu.displayName = "Menu"

package/components/Menu/components/MenuCategory/MenuCategory.tsx

@@ -84,3 +84,5 @@ export const MenuCategory: FC<MenuCategoryProps> = ({
 		</Flex>
 	)
 }
+
+MenuCategory.displayName = "MenuCategory"

package/components/Menu/components/MenuFilter/MenuFilter.tsx

@@ -1,5 +1,3 @@
-"use client"
-
 import type { FC } from "react"
 import { Input } from "../../../Input"
 import { getClasses } from "@heliosgraphics/utils"
@@ -23,3 +21,5 @@ export const MenuFilter: FC<MenuFilterProps> = ({ value, onClear, onChange }) =>
 		</div>
 	)
 }
+
+MenuFilter.displayName = "MenuFilter"

package/components/Menu/components/MenuItem/MenuItem.tsx

@@ -69,3 +69,5 @@ export const MenuItem: FC<MenuItemProps> = ({
 		</Flex>
 	)
 }
+
+MenuItem.displayName = "MenuItem"

package/components/Overlay/Overlay.module.css

@@ -7,18 +7,50 @@
 	height: 100%;
 	overflow: auto;
 	width: 100%;
+
+	display: grid;
+	opacity: 1;
+	transition:
+		opacity var(--speed-md) ease-in-out,
+		display var(--speed-md) ease-in-out allow-discrete;
+}
+
+.overlay[data-open="false"] {
+	display: none;
+	opacity: 0;
+}
+
+@starting-style {
+	.overlay[data-open="true"] {
+		opacity: 0;
+	}
 }
 
 .overlay__content {
 	height: 100%;
-	opacity: 0;
+	opacity: 1;
+	transform: translateY(0);
 
-	animation: animOverlayContent var(--speed-sm) ease-in-out forwards 120ms;
-	transform: translateY(-24px);
+	transition:
+		opacity var(--speed-sm) ease-in-out,
+		transform var(--speed-sm) ease-in-out;
+	transition-delay: 120ms;
 
 	pointer-events: none;
 }
 
+.overlay[data-open="false"] .overlay__content {
+	opacity: 0;
+	transform: translateY(-24px);
+}
+
+@starting-style {
+	.overlay[data-open="true"] .overlay__content {
+		opacity: 0;
+		transform: translateY(-24px);
+	}
+}
+
 .overlay__contentCentered {
 	align-content: center;
 }
@@ -36,26 +68,18 @@
 	height: 100%;
 	width: 100%;
 
-	animation: animOverlayBackground var(--speed-md) ease-in-out forwards;
 	background-color: rgba(0, 0, 0, 0.85);
+	opacity: 1;
+
+	transition: opacity var(--speed-md) ease-in-out;
 }
 
-@keyframes animOverlayBackground {
-	0% {
-		opacity: 0;
-	}
-	100% {
-		opacity: 1;
-	}
+.overlay[data-open="false"] .overlay__layer {
+	opacity: 0;
 }
 
-@keyframes animOverlayContent {
-	0% {
+@starting-style {
+	.overlay[data-open="true"] .overlay__layer {
 		opacity: 0;
-		transform: translateY(-24px);
-	}
-	100% {
-		opacity: 1;
-		transform: translateY(0);
 	}
 }

package/components/Overlay/Overlay.tsx

@@ -1,11 +1,9 @@
 import styles from "./Overlay.module.css"
-import type { FC, MouseEvent } from "react"
+import type { FC, MouseEvent, KeyboardEvent } from "react"
 import type { OverlayProps } from "./Overlay.types"
 import { getClasses } from "@heliosgraphics/utils"
 
 export const Overlay: FC<OverlayProps> = ({ onClose, isCentered, children, isOpen }) => {
-	if (!isOpen) return null
-
 	const hideFunction = (event: MouseEvent<HTMLDivElement>): void => {
 		event.preventDefault()
 		event.stopPropagation()
@@ -13,14 +11,37 @@ export const Overlay: FC<OverlayProps> = ({ onClose, isCentered, children, isOpe
 		return onClose?.()
 	}
 
+	const handleKeyDown = (event: KeyboardEvent<HTMLDivElement>): void => {
+		if (event.key === "Enter" || event.key === " ") {
+			event.preventDefault()
+			onClose?.()
+		}
+	}
+
 	const contentClasses: string = getClasses(styles.overlay__content, {
 		[styles.overlay__contentCentered]: isCentered,
 	})
 
 	return (
-		<section className={styles.overlay} role="dialog" aria-modal="true" data-ui-component="Overlay">
+		<section
+			className={styles.overlay}
+			role="dialog"
+			aria-modal="true"
+			aria-hidden={!isOpen}
+			data-ui-component="Overlay"
+			data-open={isOpen}
+		>
 			<div className={contentClasses}>{children}</div>
-			<div className={styles.overlay__layer} onClick={hideFunction} />
+			<div
+				className={styles.overlay__layer}
+				onClick={hideFunction}
+				onKeyDown={handleKeyDown}
+				role="button"
+				tabIndex={0}
+				aria-label="Close overlay"
+			/>
 		</section>
 	)
 }
+
+Overlay.displayName = "Overlay"

package/components/Pie/Pie.tsx

@@ -43,3 +43,5 @@ export const Pie: FC<PieProps> = ({ color, size, data }) => {
 		</svg>
 	)
 }
+
+Pie.displayName = "Pie"

package/components/Pill/Pill.meta.ts

@@ -28,8 +28,16 @@ export const meta: HeliosAttributeMeta<PillProps> = {
 		type: "HeliosIconType",
 		isOptional: true,
 	},
+	isEllipsis: {
+		type: "boolean",
+		isOptional: true,
+	},
 	isLabelHidden: {
-		type: "(event?: unknown) => void",
+		type: "boolean",
+		isOptional: true,
+	},
+	isLoading: {
+		type: "boolean",
 		isOptional: true,
 	},
 	isMono: {

package/components/Pill/Pill.module.css

@@ -51,3 +51,14 @@
 .pillTiny.pillRounded:not(.pillIconOnly) {
 	padding: 0 8px;
 }
+
+.pillEllipsis {
+	overflow: hidden;
+	max-width: 100%;
+}
+
+.pillEllipsis :global(.text) {
+	overflow: hidden;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+}

package/components/Pill/Pill.tsx

@@ -3,15 +3,22 @@ import { getColorClasses } from "../../utils/colors"
 import { Flex } from "../Flex"
 import { Text } from "../Text"
 import { Icon } from "../Icon"
+import { Loading } from "../Loading"
 import styles from "./Pill.module.css"
-import { memo, type FC } from "react"
+import { memo, type FC, type KeyboardEvent } from "react"
 import type { PillProps } from "./Pill.types"
 
-const PILL_ICON_SIZE: Record<string, number> = {
+const PILL_ICON_SIZE = {
 	tiny: 12,
 	small: 16,
 	normal: 24,
-}
+} as const satisfies Record<string, number>
+
+const PILL_LOADING_SIZE = {
+	tiny: 10,
+	small: 10,
+	normal: 20,
+} as const satisfies Record<string, 10 | 20 | 40>
 
 export const Pill: FC<PillProps> = memo(
 	({
@@ -19,7 +26,9 @@ export const Pill: FC<PillProps> = memo(
 		color = "gray",
 		className,
 		icon,
+		isEllipsis,
 		isLabelHidden,
+		isLoading,
 		isMono,
 		isRounded,
 		label,
@@ -38,21 +47,35 @@ export const Pill: FC<PillProps> = memo(
 			[styles.pillTiny]: size === "tiny",
 
 			[styles.pillIconOnly]: !!icon && isLabelHidden,
+			[styles.pillEllipsis]: isEllipsis,
 		})
 
 		const isSmall: boolean = size !== "normal"
 		const pillTextSize = isSmall ? "tiny" : "small"
 
+		const onKeyDown = onClick
+			? (event: KeyboardEvent<HTMLDivElement>): void => {
+					if (event.key === "Enter" || event.key === " ") {
+						event.preventDefault()
+						onClick(event as unknown as React.MouseEvent<HTMLDivElement>)
+					}
+				}
+			: undefined
+
+		const isInteractive: boolean = !!onClick && !isLoading
+
 		return (
 			<Flex
-				{...(onClick && { onClick })}
+				{...(isInteractive && { onClick, role: "button", tabIndex: 0 })}
+				{...(isInteractive && onKeyDown && { onKeyDown })}
 				className={pillClasses}
 				isCentered={true}
 				gap={2}
 				aria-label={isLabelHidden ? label : undefined}
 				data-ui-component="Pill"
 			>
-				{icon && <Icon size={PILL_ICON_SIZE[size] || 16} icon={icon} />}
+				{isLoading && <Loading size={PILL_LOADING_SIZE[size] || 20} />}
+				{!isLoading && icon && <Icon size={PILL_ICON_SIZE[size] || 16} icon={icon} />}
 				{!isLabelHidden && (
 					<Text type={pillTextSize} whiteSpace="nowrap" {...(isMono && { fontFamily: "mono" })} fontWeight="medium">
 						{label}
@@ -62,3 +85,5 @@ export const Pill: FC<PillProps> = memo(
 		)
 	},
 )
+
+Pill.displayName = "Pill"

package/components/Pill/Pill.types.ts

@@ -8,7 +8,9 @@ export interface PillProps {
 	color: HeliosColorType
 	className?: string
 	icon?: HeliosIconType
+	isEllipsis?: boolean
 	isLabelHidden?: boolean
+	isLoading?: boolean
 	isMono?: boolean
 	isRounded?: boolean
 	label: string

package/components/Placeholder/Placeholder.tsx

@@ -20,3 +20,5 @@ export const Placeholder: FC<PlaceholderProps> = ({ children, height }) => {
 		</Flex>
 	)
 }
+
+Placeholder.displayName = "Placeholder"