@koobiq/react-primitives 0.10.0 → 0.11.0

package/dist/components/Form/Form.d.ts

@@ -0,0 +1,17 @@
+import type { GlobalDOMAttributes, FormProps as SharedFormProps } from '@koobiq/react-core';
+import type { ContextValue, DOMProps } from '../../utils';
+export interface FormProps extends SharedFormProps, DOMProps, GlobalDOMAttributes<HTMLFormElement> {
+    /**
+     * Whether to use native HTML form validation to prevent form submission
+     * when a field value is missing or invalid, or mark fields as required
+     * or invalid via ARIA.
+     * @default 'native'
+     */
+    validationBehavior?: 'aria' | 'native';
+}
+export declare const FormContext: import("react").Context<ContextValue<FormProps, HTMLFormElement>>;
+/**
+ * A form is a group of inputs that allows users to submit data to a server,
+ * with support for providing field validation errors.
+ */
+export declare const Form: import("react").ForwardRefExoticComponent<FormProps & import("react").RefAttributes<HTMLFormElement>>;

package/dist/components/Form/Form.js

@@ -0,0 +1,29 @@
+import { jsx } from "react/jsx-runtime";
+import { createContext, forwardRef } from "react";
+import { FormValidationContext } from "@react-stately/form";
+import { useContextProps } from "../../utils/index.js";
+const FormContext = createContext(null);
+const Form = forwardRef(function Form2(props, ref) {
+  [props, ref] = useContextProps(props, ref, FormContext);
+  const {
+    validationErrors,
+    validationBehavior = "native",
+    children,
+    className,
+    ...domProps
+  } = props;
+  return /* @__PURE__ */ jsx(
+    "form",
+    {
+      noValidate: validationBehavior !== "native",
+      ...domProps,
+      ref,
+      className,
+      children: /* @__PURE__ */ jsx(FormContext.Provider, { value: { ...props, validationBehavior }, children: /* @__PURE__ */ jsx(FormValidationContext.Provider, { value: validationErrors ?? {}, children }) })
+    }
+  );
+});
+export {
+  Form,
+  FormContext
+};

package/dist/components/Form/index.d.ts

@@ -0,0 +1 @@
+export * from './Form';

package/dist/components/NumberField/NumberField.js

@@ -5,18 +5,21 @@ import { filterDOMProps } from "@koobiq/react-core";
 import { useLocale } from "@react-aria/i18n";
 import { useNumberField } from "@react-aria/numberfield";
 import { useNumberFieldState } from "@react-stately/numberfield";
-import { removeDataAttributes, useRenderProps, Provider } from "../../utils/index.js";
+import { useSlottedContext, removeDataAttributes, useRenderProps, Provider } from "../../utils/index.js";
 import { GroupContext } from "../Group/GroupContext.js";
 import { ButtonContext } from "../Button/ButtonContext.js";
 import { LabelContext } from "../Label/LabelContext.js";
 import { InputContext } from "../Input/InputContext.js";
 import { TextContext } from "../Text/TextContext.js";
 import { FieldErrorContext } from "../FieldError/FieldError.js";
+import { FormContext } from "../Form/Form.js";
 const NumberField = forwardRef(
   (props, ref) => {
     const { isDisabled, isReadOnly, isRequired } = props;
     const inputRef = useRef(null);
     const { locale } = useLocale();
+    const { validationBehavior: formValidationBehavior } = useSlottedContext(FormContext) || {};
+    const validationBehavior = props.validationBehavior ?? formValidationBehavior ?? "aria";
     const state = useNumberFieldState({ ...props, locale });
     const {
       labelProps,
@@ -27,7 +30,11 @@ const NumberField = forwardRef(
       incrementButtonProps,
       decrementButtonProps,
       ...validation
-    } = useNumberField(removeDataAttributes(props), state, inputRef);
+    } = useNumberField(
+      { ...removeDataAttributes(props), validationBehavior },
+      state,
+      inputRef
+    );
     const DOMProps = filterDOMProps(props);
     delete DOMProps.id;
     const renderProps = useRenderProps({

package/dist/components/Radio/RadioGroup.js

@@ -2,23 +2,29 @@
 import { jsx } from "react/jsx-runtime";
 import { forwardRef } from "react";
 import { filterDOMProps } from "@koobiq/react-core";
-import { removeDataAttributes, useRenderProps, Provider } from "../../utils/index.js";
+import { useSlottedContext, removeDataAttributes, useRenderProps, Provider } from "../../utils/index.js";
 import { useRadioGroupState } from "../../behaviors/useRadioGroupState.js";
 import { useRadioGroup } from "../../behaviors/useRadioGroup.js";
 import { FieldErrorContext } from "../FieldError/FieldError.js";
+import { FormContext } from "../Form/Form.js";
 import { RadioContext } from "./RadioContext.js";
 import { LabelContext } from "../Label/LabelContext.js";
 import { TextContext } from "../Text/TextContext.js";
 const RadioGroup = forwardRef(
   (props, ref) => {
     const state = useRadioGroupState(props);
+    const { validationBehavior: formValidationBehavior } = useSlottedContext(FormContext) || {};
+    const validationBehavior = props.validationBehavior ?? formValidationBehavior ?? "aria";
     const {
       radioGroupProps,
       labelProps,
       descriptionProps,
       errorMessageProps,
       ...validation
-    } = useRadioGroup(removeDataAttributes(props), state);
+    } = useRadioGroup(
+      { ...removeDataAttributes(props), validationBehavior },
+      state
+    );
     const renderProps = useRenderProps({
       ...props,
       values: {

package/dist/components/TextField/TextField.js

@@ -3,14 +3,17 @@ import { jsx } from "react/jsx-runtime";
 import { forwardRef, useRef } from "react";
 import { filterDOMProps } from "@koobiq/react-core";
 import { useTextField } from "@react-aria/textfield";
-import { removeDataAttributes, useRenderProps, Provider } from "../../utils/index.js";
+import { useSlottedContext, removeDataAttributes, useRenderProps, Provider } from "../../utils/index.js";
 import { InputContext } from "../Input/InputContext.js";
 import { TextareaContext } from "../Textarea/TextareaContext.js";
+import { FormContext } from "../Form/Form.js";
 import { LabelContext } from "../Label/LabelContext.js";
 import { TextContext } from "../Text/TextContext.js";
 import { FieldErrorContext } from "../FieldError/FieldError.js";
 function TextFieldRender(props, ref) {
   const { isDisabled, isReadOnly, isRequired } = props;
+  const { validationBehavior: formValidationBehavior } = useSlottedContext(FormContext) || {};
+  const validationBehavior = props.validationBehavior ?? formValidationBehavior ?? "aria";
   const inputRef = useRef(null);
   const {
     labelProps,
@@ -20,7 +23,8 @@ function TextFieldRender(props, ref) {
     ...validation
   } = useTextField(
     {
-      ...removeDataAttributes(props)
+      ...removeDataAttributes(props),
+      validationBehavior
     },
     inputRef
   );

package/dist/components/index.d.ts

@@ -12,3 +12,4 @@ export * from './ProgressBar';
 export * from './TextField';
 export * from './NumberField';
 export * from './FieldError';
+export * from './Form';

package/dist/index.js

@@ -30,7 +30,7 @@ import { useCalendar, useCalendarCell, useCalendarGrid } from "@react-aria/calen
 export * from "@react-stately/calendar";
 export * from "@react-stately/form";
 export * from "@react-aria/selection";
-import { Provider, removeDataAttributes, useRenderProps } from "./utils/index.js";
+import { DEFAULT_SLOT, Provider, removeDataAttributes, useContextProps, useRenderProps, useSlottedContext } from "./utils/index.js";
 import { useButton } from "./behaviors/useButton.js";
 import { useCheckbox } from "./behaviors/useCheckbox.js";
 import { useLink } from "./behaviors/useLink.js";
@@ -64,12 +64,16 @@ import { ProgressBar } from "./components/ProgressBar/ProgressBar.js";
 import { TextField } from "./components/TextField/TextField.js";
 import { NumberField } from "./components/NumberField/NumberField.js";
 import { FieldError, FieldErrorContext } from "./components/FieldError/FieldError.js";
+import { Form, FormContext } from "./components/Form/Form.js";
 export {
   Button,
   ButtonContext,
   Checkbox,
+  DEFAULT_SLOT,
   FieldError,
   FieldErrorContext,
+  Form,
+  FormContext,
   Group,
   GroupContext,
   Input,
@@ -95,6 +99,7 @@ export {
   useCalendarCell,
   useCalendarGrid,
   useCheckbox,
+  useContextProps,
   useGroupContext,
   useInputContext,
   useLink,
@@ -107,6 +112,7 @@ export {
   useRadioGroup,
   useRadioGroupState,
   useRenderProps,
+  useSlottedContext,
   useSwitch,
   useTextareaContext,
   useToggleButtonGroup,

package/dist/utils/index.d.ts

@@ -1,5 +1,31 @@
-import type { JSX, CSSProperties, ReactNode, Context } from 'react';
-import type { AriaLabelingProps, DOMProps as SharedDOMProps } from '@react-types/shared';
+import type { JSX, CSSProperties, ReactNode, Context, ForwardedRef } from 'react';
+import type { AriaLabelingProps, DOMProps as SharedDOMProps, RefObject } from '@koobiq/react-core';
+export declare const DEFAULT_SLOT: unique symbol;
+interface SlottedValue<T> {
+    slots?: Record<string | symbol, T>;
+}
+export interface SlotProps {
+    /**
+     * A slot name for the component. Slots allow the component to receive props from a parent component.
+     * An explicit `null` value indicates that the local props completely override all props received from a parent.
+     */
+    slot?: string | null;
+}
+export type WithRef<T, E> = T & {
+    ref?: ForwardedRef<E>;
+};
+export type SlottedContextValue<T> = SlottedValue<T> | T | null | undefined;
+export type ContextValue<T, E> = SlottedContextValue<WithRef<T, E>>;
+export interface StyleProps {
+    /** The CSS [className](https://developer.mozilla.org/en-US/docs/Web/API/Element/className) for the element. */
+    className?: string;
+    /** The inline [style](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/style) for the element. */
+    style?: CSSProperties;
+}
+export interface DOMProps extends StyleProps, SharedDOMProps {
+    /** The children of the component. */
+    children?: ReactNode;
+}
 export interface StyleRenderProps<T> {
     /** The CSS [className](https://developer.mozilla.org/en-US/docs/Web/API/Element/className) for the element. A function may be provided to compute the class based on component state. */
     className?: string | ((values: T & {
@@ -38,4 +64,6 @@ interface ProviderProps<T extends unknown[]> {
 }
 export declare function Provider<T extends unknown[]>({ values, children, }: ProviderProps<T>): JSX.Element;
 export declare function removeDataAttributes<T>(props: T): T;
+export declare function useSlottedContext<T>(context: Context<SlottedContextValue<T>>, slot?: string | null): T | null | undefined;
+export declare function useContextProps<T, U extends SlotProps, E extends Element>(props: T & SlotProps, ref: ForwardedRef<E> | undefined, context: Context<ContextValue<U, E>>): [T, RefObject<E | null>];
 export {};

package/dist/utils/index.js

@@ -1,5 +1,7 @@
 import { jsx } from "react/jsx-runtime";
-import { useMemo } from "react";
+import { useMemo, useContext } from "react";
+import { useObjectRef, mergeRefs, mergeProps } from "@koobiq/react-core";
+const DEFAULT_SLOT = Symbol("default");
 function useRenderProps(props) {
   const {
     className,
@@ -65,8 +67,52 @@ function removeDataAttributes(props) {
   }
   return filteredProps;
 }
+function useSlottedContext(context, slot) {
+  const ctx = useContext(context);
+  if (slot === null) {
+    return null;
+  }
+  if (ctx && typeof ctx === "object" && "slots" in ctx && ctx.slots) {
+    const slotKey = slot || DEFAULT_SLOT;
+    if (!ctx.slots[slotKey]) {
+      const availableSlots = new Intl.ListFormat().format(
+        Object.keys(ctx.slots).map((p) => `"${p}"`)
+      );
+      const errorMessage = slot ? `Invalid slot "${slot}".` : "A slot prop is required.";
+      throw new Error(
+        `${errorMessage} Valid slot names are ${availableSlots}.`
+      );
+    }
+    return ctx.slots[slotKey];
+  }
+  return ctx;
+}
+function useContextProps(props, ref, context) {
+  const ctx = useSlottedContext(context, props.slot) || {};
+  const { ref: contextRef, ...contextProps } = ctx;
+  const mergedRef = useObjectRef(
+    useMemo(() => mergeRefs(ref, contextRef), [ref, contextRef])
+  );
+  const mergedProps = mergeProps(contextProps, props);
+  if ("style" in contextProps && contextProps.style && "style" in props && props.style) {
+    if (typeof contextProps.style === "function" || typeof props.style === "function") {
+      mergedProps.style = (renderProps) => {
+        const contextStyle = typeof contextProps.style === "function" ? contextProps.style(renderProps) : contextProps.style;
+        const defaultStyle = { ...renderProps.defaultStyle, ...contextStyle };
+        const style = typeof props.style === "function" ? props.style({ ...renderProps, defaultStyle }) : props.style;
+        return { ...defaultStyle, ...style };
+      };
+    } else {
+      mergedProps.style = { ...contextProps.style, ...props.style };
+    }
+  }
+  return [mergedProps, mergedRef];
+}
 export {
+  DEFAULT_SLOT,
   Provider,
   removeDataAttributes,
-  useRenderProps
+  useContextProps,
+  useRenderProps,
+  useSlottedContext
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@koobiq/react-primitives",
-  "version": "0.10.0",
+  "version": "0.11.0",
   "license": "MIT",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
@@ -64,8 +64,8 @@
     "@react-stately/toggle": "^3.7.0",
     "@react-stately/tooltip": "^3.5.5",
     "@react-stately/tree": "^3.8.9",
-    "@koobiq/logger": "0.10.0",
-    "@koobiq/react-core": "0.10.0"
+    "@koobiq/logger": "0.11.0",
+    "@koobiq/react-core": "0.11.0"
   },
   "peerDependencies": {
     "react": "18.x || 19.x",