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

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

@@ -21,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.tsx

@@ -1,5 +1,5 @@
 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"
 
@@ -11,6 +11,13 @@ 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,
 	})
@@ -25,7 +32,16 @@ export const Overlay: FC<OverlayProps> = ({ onClose, isCentered, children, isOpe
 			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,8 +3,9 @@ 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 = {
@@ -13,13 +14,21 @@ const PILL_ICON_SIZE = {
 	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(
 	({
 		appearance = "light",
 		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"

package/components/Progress/Progress.tsx

@@ -26,3 +26,5 @@ export const Progress: FC<ProgressProps> = ({
 		/>
 	)
 }
+
+Progress.displayName = "Progress"

package/components/Radio/Radio.tsx

@@ -69,3 +69,5 @@ export const Radio: FC<RadioProps> = ({
 		</div>
 	)
 }
+
+Radio.displayName = "Radio"

package/components/Range/Range.tsx

@@ -45,3 +45,5 @@ export const Range: FC<RangeProps> = ({
 		</div>
 	)
 }
+
+Range.displayName = "Range"

package/components/Segments/Segments.context.ts

@@ -0,0 +1,19 @@
+"use client"
+
+import { createContext, useContext } from "react"
+
+export interface SegmentsContextValue {
+	activeValue: string
+	onSelect: (value: string) => void
+	registerRef: (value: string, el: HTMLButtonElement | null) => void
+}
+
+export const SegmentsContext = createContext<SegmentsContextValue | null>(null)
+
+export const useSegments = (): SegmentsContextValue => {
+	const context = useContext(SegmentsContext)
+
+	if (!context) throw new Error("SegmentButton must be used within Segments")
+
+	return context
+}

package/components/Segments/Segments.meta.ts

@@ -12,6 +12,10 @@ export const meta: HeliosAttributeMeta<SegmentsBaseProps> = {
 	],
 	_status: "nominal",
 	_category: "core",
+	defaultValue: {
+		type: "string",
+		isOptional: true,
+	},
 	isFullWidth: {
 		type: "boolean",
 		isOptional: true,

package/components/Segments/Segments.tsx

@@ -1,41 +1,22 @@
 "use client"
 
-import {
-	type FC,
-	useState,
-	useRef,
-	useEffect,
-	useCallback,
-	Children,
-	isValidElement,
-	cloneElement,
-	type ReactElement,
-} from "react"
+import { type FC, useState, useRef, useEffect, useCallback } from "react"
 import { Flex } from "../Flex"
 import styles from "./Segments.module.css"
 import { getClasses } from "@heliosgraphics/utils"
-import { SegmentButton } from "./components/SegmentButton"
+import { SegmentsContext } from "./Segments.context"
 import type { SegmentsProps } from "./Segments.types"
-import type { SegmentButtonProps } from "./components/SegmentButton/SegmentButton.types"
 
-export const Segments: FC<SegmentsProps> = ({ children, isFullWidth, isSmall }) => {
-	const validChildren: ReactElement<SegmentButtonProps>[] = Children.toArray(children).filter(
-		(child): child is ReactElement<SegmentButtonProps> => isValidElement(child) && child.type === SegmentButton,
-	)
-
-	const firstValue: string = validChildren.length > 0 ? validChildren[0]?.props?.value || "" : ""
-	const defaultValue: string = ""
-
-	const [activeValue, setActiveValue] = useState<string>(defaultValue || firstValue)
-	const buttonRefs = useRef<(HTMLButtonElement | null)[]>([])
+export const Segments: FC<SegmentsProps> = ({ children, isFullWidth, isSmall, defaultValue }) => {
+	const [activeValue, setActiveValue] = useState<string>(defaultValue ?? "")
+	const buttonRefs = useRef<Map<string, HTMLButtonElement>>(new Map())
 	const containerRef = useRef<HTMLDivElement>(null)
 	const sliderRef = useRef<HTMLDivElement>(null)
 
 	const updateSliderPosition = useCallback((): void => {
 		if (!containerRef.current || !sliderRef.current || !activeValue) return
 
-		const activeIndex: number = validChildren.findIndex((child) => child.props.value === activeValue)
-		const activeButton: HTMLButtonElement | null | undefined = buttonRefs.current[activeIndex]
+		const activeButton: HTMLButtonElement | undefined = buttonRefs.current.get(activeValue)
 
 		if (!activeButton) return
 
@@ -48,7 +29,7 @@ export const Segments: FC<SegmentsProps> = ({ children, isFullWidth, isSmall })
 		sliderRef.current.style.transform = `translateX(${left}px)`
 		sliderRef.current.style.width = `${width}px`
 		sliderRef.current.style.opacity = "1"
-	}, [activeValue, validChildren])
+	}, [activeValue])
 
 	useEffect(() => {
 		const timer: ReturnType<typeof setTimeout> = setTimeout(updateSliderPosition, 0)
@@ -61,27 +42,38 @@ export const Segments: FC<SegmentsProps> = ({ children, isFullWidth, isSmall })
 		}
 	}, [updateSliderPosition])
 
+	const onSelect = useCallback((value: string): void => {
+		setActiveValue(value)
+	}, [])
+
+	const registerRef = useCallback((value: string, el: HTMLButtonElement | null): void => {
+		if (el) {
+			buttonRefs.current.set(value, el)
+		} else {
+			buttonRefs.current.delete(value)
+		}
+	}, [])
+
 	const segmentedControlClasses: string = getClasses(styles.segmentedControl, {
 		[styles.segmentedControlSmall]: isSmall,
 		[styles.segmentedControlFull]: isFullWidth,
 	})
 
 	return (
-		<Flex className={segmentedControlClasses} isYCentered={true} gap={2} isInline={!isFullWidth} ref={containerRef}>
-			{validChildren.map((child: ReactElement<SegmentButtonProps>, index: number) =>
-				cloneElement<SegmentButtonProps>(child, {
-					key: child.props.value,
-					isActive: child.props.value === activeValue,
-					onClick: () => {
-						setActiveValue(child.props.value)
-						child.props.onClick?.()
-					},
-					ref: (el: HTMLButtonElement | null) => {
-						buttonRefs.current[index] = el
-					},
-				}),
-			)}
-			<div ref={sliderRef} className={styles.segments__slider} />
-		</Flex>
+		<SegmentsContext value={{ activeValue, onSelect, registerRef }}>
+			<Flex
+				className={segmentedControlClasses}
+				isYCentered={true}
+				gap={2}
+				isInline={!isFullWidth}
+				ref={containerRef}
+				data-ui-component="Segments"
+			>
+				{children}
+				<div ref={sliderRef} className={styles.segments__slider} />
+			</Flex>
+		</SegmentsContext>
 	)
 }
+
+Segments.displayName = "Segments"

package/components/Segments/Segments.types.ts

@@ -2,6 +2,7 @@ import type { SegmentButtonProps } from "./components/SegmentButton/SegmentButto
 import type { FC, PropsWithChildren, ReactElement } from "react"
 
 export interface SegmentsBaseProps {
+	defaultValue?: string
 	isFullWidth?: boolean
 	isSmall?: boolean
 }

package/components/Segments/components/SegmentButton/SegmentButton.meta.ts

@@ -26,10 +26,6 @@ export const meta: HeliosAttributeMeta<SegmentButtonProps> = {
 		type: "() => void",
 		isOptional: true,
 	},
-	ref: {
-		type: "Ref<HTMLButtonElement>",
-		isOptional: true,
-	},
 	value: {
 		type: "string",
 	},

package/components/Segments/components/SegmentButton/SegmentButton.tsx

@@ -1,22 +1,47 @@
 import styles from "./SegmentButton.module.css"
 import { getClasses } from "@heliosgraphics/utils"
 import { Icon } from "../../../Icon"
-import type { FC } from "react"
+import { useSegments } from "../../Segments.context"
+import { useCallback, type FC } from "react"
 import type { HeliosIconType } from "../../../../types/icons"
 import type { SegmentButtonProps } from "./SegmentButton.types"
 
-export const SegmentButton: FC<SegmentButtonProps> = ({ isActive, value, icon, iconLeft, iconRight, onClick, ref }) => {
+export const SegmentButton: FC<SegmentButtonProps> = ({
+	value,
+	icon,
+	iconLeft,
+	iconRight,
+	isActive: isActiveProp,
+	onClick,
+}) => {
+	const { activeValue, onSelect, registerRef } = useSegments()
+	const isActive: boolean = isActiveProp ?? value === activeValue
+
 	const segmentButtonClasses: string = getClasses(styles.segmentButton, {
 		[styles.segmentButtonActive]: isActive,
 	})
 
 	const iconL: HeliosIconType | undefined = iconLeft || icon
 
+	const handleClick = useCallback((): void => {
+		onSelect(value)
+		onClick?.()
+	}, [value, onSelect, onClick])
+
+	const handleRef = useCallback(
+		(el: HTMLButtonElement | null): void => {
+			registerRef(value, el)
+		},
+		[value, registerRef],
+	)
+
 	return (
-		<button ref={ref} className={segmentButtonClasses} onClick={onClick} data-ui-component="SegmentButton">
+		<button ref={handleRef} className={segmentButtonClasses} onClick={handleClick} data-ui-component="SegmentButton">
 			{iconL && <Icon icon={iconL} size={16} />}
 			{value}
 			{iconRight && <Icon icon={iconRight} size={16} />}
 		</button>
 	)
 }
+
+SegmentButton.displayName = "SegmentButton"

package/components/Segments/components/SegmentButton/SegmentButton.types.ts

@@ -1,4 +1,3 @@
-import type { Ref } from "react"
 import type { HeliosIconType } from "../../../../types/icons"
 
 export interface SegmentButtonProps {
@@ -7,6 +6,5 @@ export interface SegmentButtonProps {
 	iconRight?: HeliosIconType
 	isActive?: boolean
 	onClick?: () => void
-	ref?: Ref<HTMLButtonElement>
 	value: string
 }

package/components/Select/Select.tsx

@@ -3,54 +3,51 @@
 import { Flex } from "../Flex"
 import { Icon } from "../Icon"
 import { getClasses } from "@heliosgraphics/utils"
-import { useId, type FC } from "react"
+import { useId, forwardRef } from "react"
 import { InputLabel } from "../shared/InputLabel"
 import styles from "./Select.module.css"
 import type { SelectProps } from "./Select.types"
 
-export const Select: FC<SelectProps> = ({
-	selectedValue,
-	onChange,
-	isLabelHidden,
-	isSmall,
-	isDisabled,
-	isRequired,
-	items,
-	label,
-}) => {
-	const htmlFor: string = useId()
+export const Select = forwardRef<HTMLSelectElement, SelectProps>(
+	({ selectedValue, onChange, isLabelHidden, isSmall, isDisabled, isRequired, items, label }, ref) => {
+		const htmlFor: string = useId()
 
-	const selectClasses: string = getClasses(styles.select, {
-		[styles.selectDisabled]: isDisabled,
-		[styles.selectSmall]: isSmall,
-		[styles.selectHiddenLabel]: !label || isLabelHidden,
-	})
+		const selectClasses: string = getClasses(styles.select, {
+			[styles.selectDisabled]: isDisabled,
+			[styles.selectSmall]: isSmall,
+			[styles.selectHiddenLabel]: !label || isLabelHidden,
+		})
 
-	return (
-		<Flex isColumn={true} className={selectClasses} data-ui-component="Select">
-			<InputLabel label={label} id={htmlFor} isHidden={!!isLabelHidden} isDisabled={!!isDisabled} />
-			<Flex>
-				<select
-					className={styles.select__select}
-					onChange={onChange}
-					id={htmlFor}
-					value={selectedValue}
-					disabled={isDisabled}
-					required={isRequired}
-					aria-label={isLabelHidden ? label : undefined}
-				>
-					{items?.map((item) => {
-						return (
-							<option key={item.value} value={item.value} disabled={item.isDisabled}>
-								{item.name}
-							</option>
-						)
-					})}
-				</select>
-				<Flex className={styles.select__icon} isCentered={true}>
-					<Icon icon="chevron-down" size={20} />
+		return (
+			<Flex isColumn={true} className={selectClasses} data-ui-component="Select">
+				<InputLabel label={label} id={htmlFor} isHidden={!!isLabelHidden} isDisabled={!!isDisabled} />
+				<Flex>
+					<select
+						ref={ref}
+						className={styles.select__select}
+						onChange={onChange}
+						id={htmlFor}
+						value={selectedValue}
+						disabled={isDisabled}
+						required={isRequired}
+						aria-label={isLabelHidden ? label : undefined}
+						aria-required={isRequired || undefined}
+					>
+						{items?.map((item) => {
+							return (
+								<option key={item.value} value={item.value} disabled={item.isDisabled}>
+									{item.name}
+								</option>
+							)
+						})}
+					</select>
+					<Flex className={styles.select__icon} isCentered={true}>
+						<Icon icon="chevron-down" size={20} />
+					</Flex>
 				</Flex>
 			</Flex>
-		</Flex>
-	)
-}
+		)
+	},
+)
+
+Select.displayName = "Select"

package/components/Separator/Separator.tsx

@@ -32,3 +32,5 @@ export const Separator: FC<SeparatorProps> = ({
 
 	return <HorizontalSeparator {...separatorProps} />
 }
+
+Separator.displayName = "Separator"

package/components/Separator/components/HRMarkup/HRMarkup.tsx

@@ -6,3 +6,5 @@ export const HRMarkup: FC<HRMarkupProps> = (props) => {
 
 	return <hr {...goodProps} data-ui-component="Separator" />
 }
+
+HRMarkup.displayName = "HRMarkup"

package/components/Separator/components/HorizontalSeparator/HorizontalSeparator.tsx

@@ -18,3 +18,5 @@ export const HorizontalSeparator: FC<HorizontalSeparatorProps> = ({ lineStyle, c
 
 	return <HRMarkup className={hrClassNames} style={horizontalStyle} />
 }
+
+HorizontalSeparator.displayName = "HorizontalSeparator"