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

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

@@ -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,