@heliosgraphics/ui 2.0.0-alpha.90 → 2.0.0-alpha.92

package/components/Flex/Flex.tsx

@@ -1,16 +1,15 @@
-import { forwardRef, memo, type ForwardedRef } from "react"
+import { memo } from "react"
 import { getFlexUtility, getSafeFlexProps } from "../Flex/Flex.utils"
 import type { FlexProps } from "./Flex.types"
 
-export const Flex = memo(
-	forwardRef<HTMLDivElement, FlexProps>((props: FlexProps, ref: ForwardedRef<HTMLDivElement>) => {
-		const flexClasses: string = getFlexUtility(props)
-		const safeProps = getSafeFlexProps(props)
+export const Flex = memo((props: FlexProps) => {
+	const { ref, ...restProps } = props
+	const flexClasses: string = getFlexUtility(restProps)
+	const safeProps = getSafeFlexProps(restProps)
 
-		return (
-			<div {...safeProps} className={flexClasses} onClick={props.onClick} ref={ref}>
-				{props.children}
-			</div>
-		)
-	}),
-)
+	return (
+		<div {...safeProps} className={flexClasses} onClick={restProps.onClick} ref={ref}>
+			{restProps.children}
+		</div>
+	)
+})

package/components/Flex/Flex.types.ts

@@ -1,4 +1,4 @@
-import type { HTMLAttributes, MouseEventHandler, PropsWithChildren, ForwardedRef } from "react"
+import type { HTMLAttributes, MouseEventHandler, PropsWithChildren, Ref } from "react"
 import type { HeliosScaleType, HeliosRadiusType } from "../../types/scale"
 import type { HeliosEmphasisType } from "../../types/intentions"
 
@@ -25,7 +25,7 @@ export interface FlexBaseProps {
 	padding?: ResponsiveScaleType
 	paddingX?: HeliosScaleType
 	paddingY?: HeliosScaleType
-	ref?: ForwardedRef<HTMLDivElement>
+	ref?: Ref<HTMLDivElement>
 	withBackground?: HeliosEmphasisType
 	withRadius?: ResponsiveRadiusType
 	xAlign?: "start" | "end" | "center"

package/components/Segments/Segments.tsx

@@ -2,7 +2,6 @@
 
 import {
 	type FC,
-	type Ref,
 	useState,
 	useRef,
 	useEffect,
@@ -19,10 +18,6 @@ import { SegmentButton } from "./components/SegmentButton"
 import type { SegmentsProps } from "./Segments.types"
 import type { SegmentButtonProps } from "./components/SegmentButton/SegmentButton.types"
 
-type SegmentButtonWithRef = SegmentButtonProps & {
-	ref?: Ref<HTMLButtonElement>
-}
-
 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,
@@ -74,7 +69,7 @@ export const Segments: FC<SegmentsProps> = ({ children, isFullWidth, isSmall })
 	return (
 		<Flex className={segmentedControlClasses} isYCentered={true} gap={2} isInline={!isFullWidth} ref={containerRef}>
 			{validChildren.map((child: ReactElement<SegmentButtonProps>, index: number) =>
-				cloneElement<SegmentButtonWithRef>(child, {
+				cloneElement<SegmentButtonProps>(child, {
 					key: child.props.value,
 					isActive: child.props.value === activeValue,
 					onClick: () => {

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

@@ -26,6 +26,10 @@ 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,24 +1,21 @@
 import styles from "./SegmentButton.module.css"
-import { forwardRef } from "react"
 import { getClasses } from "@heliosgraphics/utils"
 import { Icon } from "../../../Icon"
 import type { HeliosIconType } from "../../../../types/icons"
 import type { SegmentButtonProps } from "./SegmentButton.types"
 
-export const SegmentButton = forwardRef<HTMLButtonElement, SegmentButtonProps>(
-	({ isActive, value, icon, iconLeft, iconRight, onClick }, ref) => {
-		const segmentButtonClasses: string = getClasses(styles.segmentButton, {
-			[styles.segmentButtonActive]: isActive,
-		})
+export const SegmentButton = ({ isActive, value, icon, iconLeft, iconRight, onClick, ref }: SegmentButtonProps) => {
+	const segmentButtonClasses: string = getClasses(styles.segmentButton, {
+		[styles.segmentButtonActive]: isActive,
+	})
 
-		const iconL: HeliosIconType | undefined = iconLeft || icon
+	const iconL: HeliosIconType | undefined = iconLeft || icon
 
-		return (
-			<button ref={ref} className={segmentButtonClasses} onClick={onClick} data-ui-component="SegmentButton">
-				{iconL && <Icon icon={iconL} size={16} />}
-				{value}
-				{iconRight && <Icon icon={iconRight} size={16} />}
-			</button>
-		)
-	},
-)
+	return (
+		<button ref={ref} className={segmentButtonClasses} onClick={onClick} data-ui-component="SegmentButton">
+			{iconL && <Icon icon={iconL} size={16} />}
+			{value}
+			{iconRight && <Icon icon={iconRight} size={16} />}
+		</button>
+	)
+}

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

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

package/components/shared/ResultList/ResultList.meta.ts

@@ -13,4 +13,8 @@ export const meta: HeliosAttributeMeta<ResultListProps> = {
 		type: "boolean",
 		isOptional: true,
 	},
+	ref: {
+		type: "Ref<HTMLOListElement>",
+		isOptional: true,
+	},
 }

package/components/shared/ResultList/ResultList.tsx

@@ -4,11 +4,10 @@ import { Flex } from "../../Flex"
 import { Icon } from "../../Icon"
 import { Text } from "../../Text"
 import styles from "./ResultList.module.css"
-import { forwardRef } from "react"
 import type { ChangeEvent } from "react"
 import type { ResultListProps } from "./ResultList.types"
 
-export const ResultList = forwardRef<HTMLOListElement, ResultListProps>(({ items, isHidden }, ref) => {
+export const ResultList = ({ items, isHidden, ref }: ResultListProps) => {
 	if (!items?.length || isHidden) return null
 
 	const resultListClasses: string = getClasses(styles.resultList, "elevation-lg")
@@ -63,4 +62,4 @@ export const ResultList = forwardRef<HTMLOListElement, ResultListProps>(({ items
 			})}
 		</ol>
 	)
-})
+}

package/components/shared/ResultList/ResultList.types.ts

@@ -15,4 +15,5 @@ export interface ResultItem {
 export interface ResultListProps {
 	items?: Array<ResultItem>
 	isHidden?: boolean
+	ref?: Ref<HTMLOListElement>
 }

package/package.json

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