diff --git a/packages/@luke-ui/react/src/combobox-field/combobox-field.tsx b/packages/@luke-ui/react/src/combobox-field/combobox-field.tsx index 0a5a2695..39e6fac8 100644 --- a/packages/@luke-ui/react/src/combobox-field/combobox-field.tsx +++ b/packages/@luke-ui/react/src/combobox-field/combobox-field.tsx @@ -9,8 +9,6 @@ import { LabelContext } from 'react-aria-components/Label'; import { PopoverContext } from 'react-aria-components/Popover'; import { composeRenderProps } from 'react-aria-components/composeRenderProps'; import { useSlottedContext } from 'react-aria-components/slots'; -import type { FieldSlotProps } from '../field/compose-field.js'; -import { composeField } from '../field/compose-field.js'; import { IconSizeProvider } from '../icon/icon-size-context.js'; import { Icon } from '../icon/icon.js'; import { LoadingSpinner } from '../loading-spinner/loading-spinner.js'; @@ -30,6 +28,7 @@ import type { ComboboxRootProps, ComboboxSize } from '../primitives/combobox/roo import { ComboboxRoot } from '../primitives/combobox/root.js'; import { comboboxRecipe } from '../primitives/combobox/styles.css.js'; import { ComboboxTrigger } from '../primitives/combobox/trigger.js'; +import type { FieldSlotProps } from '../primitives/field/field.js'; import { Field } from '../primitives/field/field.js'; import { FIELD_CONTROL_ICON_SIZE } from '../sizing/control-size.js'; import type { DistributiveOmit } from '../types/distributive-omit.js'; @@ -93,20 +92,23 @@ export type ComboboxFieldProps = Prettify<_ComboboxFieldProps< /** Composes `ComboboxRoot` with label, description, and error slots. */ export function ComboboxField(props: ComboboxFieldProps): JSX.Element { - const [fieldSlotProps, restProps] = composeField(props); const { children, + description, + errorMessage, inputRef, + label, listBoxProps, loadMoreItem: loadMoreItemProp, loadingState, menuWidth, + necessityIndicator, onLoadMore, placeholder, popoverProps, size = 'medium', ...comboboxRootProps - } = restProps; + } = props; const isMobileDevice = useIsMobileDevice(); const isAsync: boolean = loadingState != null; @@ -183,7 +185,14 @@ export function ComboboxField(props: ComboboxFieldProps): J return ( - {content} + + {content} + ); } diff --git a/packages/@luke-ui/react/src/field/compose-field.ts b/packages/@luke-ui/react/src/field/compose-field.ts deleted file mode 100644 index 9fc08d50..00000000 --- a/packages/@luke-ui/react/src/field/compose-field.ts +++ /dev/null @@ -1,30 +0,0 @@ -import type { ReactNode } from 'react'; -import type { FieldErrorProps } from '../primitives/field/error.js'; -import type { FieldNecessityIndicator } from '../primitives/field/label.js'; -import type { DistributiveOmit } from '../types/distributive-omit.js'; - -export interface FieldSlotProps { - /** Optional helper text shown below the control. */ - description?: ReactNode; - /** Error content passed to `FieldError`. */ - errorMessage?: FieldErrorProps['children']; - /** Label content shown above the control. */ - label?: ReactNode; - /** Label necessity style. @default 'icon' */ - necessityIndicator?: FieldNecessityIndicator; -} - -type KeysOfUnion = T extends T ? keyof T : never; -type FieldSlotKeys = Extract>; - -/** Splits field slot props (label, description, errorMessage, necessityIndicator) off a field component's props. */ -export function composeField( - props: T, -): [FieldSlotProps, DistributiveOmit>] { - const { description, errorMessage, label, necessityIndicator, ...restProps } = props; - - return [ - { description, errorMessage, label, necessityIndicator }, - restProps as unknown as DistributiveOmit>, - ]; -} diff --git a/packages/@luke-ui/react/src/primitives/field/field.tsx b/packages/@luke-ui/react/src/primitives/field/field.tsx index 6c400d4c..09a0a78b 100644 --- a/packages/@luke-ui/react/src/primitives/field/field.tsx +++ b/packages/@luke-ui/react/src/primitives/field/field.tsx @@ -1,5 +1,4 @@ import type { ComponentProps, JSX, ReactNode } from 'react'; -import type { FieldSlotProps } from '../../field/compose-field.js'; import type { DistributiveOmit } from '../../types/distributive-omit.js'; import type { Prettify } from '../../types/prettify.js'; import type { FieldDescriptionProps } from './description.js'; @@ -13,6 +12,18 @@ import { Field as PrimitiveField } from './root.js'; export type { FieldDescriptionProps, FieldErrorProps, FieldLabelProps, FieldNecessityIndicator }; export { FieldDescription, FieldError, FieldLabel }; +/** Label, description, and error props shared by field compositions. */ +export interface FieldSlotProps { + /** Optional helper text shown below the control. */ + description?: ReactNode; + /** Error content passed to `FieldError`. */ + errorMessage?: FieldErrorProps['children']; + /** Label content shown above the control. */ + label?: ReactNode; + /** Label necessity style. @default 'icon' */ + necessityIndicator?: FieldNecessityIndicator; +} + type PrimitiveFieldProps = ComponentProps; type _FieldOmit = DistributiveOmit; diff --git a/packages/@luke-ui/react/src/text-field/text-field.tsx b/packages/@luke-ui/react/src/text-field/text-field.tsx index 6e92a926..d048f8c3 100644 --- a/packages/@luke-ui/react/src/text-field/text-field.tsx +++ b/packages/@luke-ui/react/src/text-field/text-field.tsx @@ -4,8 +4,7 @@ import type { TextFieldProps as RacTextFieldProps, } from 'react-aria-components/TextField'; import { TextField as RacTextField } from 'react-aria-components/TextField'; -import type { FieldSlotProps } from '../field/compose-field.js'; -import { composeField } from '../field/compose-field.js'; +import type { FieldSlotProps } from '../primitives/field/field.js'; import { Field } from '../primitives/field/field.js'; import { InputGroup, @@ -50,20 +49,28 @@ export type TextFieldProps = Prettify<_TextFieldProps>; * `InputGroupSuffix` children below. */ export function TextField(props: TextFieldProps): JSX.Element { - const [fieldSlotProps, restProps] = composeField(props); const { + description, + errorMessage, inputClassName, inputRef, + label, + necessityIndicator, placeholder, prefix, size = 'medium', suffix, ...textFieldProps - } = restProps; + } = props; return ( - + {prefix != null ? {prefix} : null}