@andrilla/mado-ui 1.1.0 → 1.1.2

package/dist/components/search.d.ts

@@ -1,4 +1,16 @@
 import type { OneOf } from '../types';
+type MultipleShelf = OneOf<[
+    {
+        /** When true, disables the shelf display, displaying all selected options in the input */
+        singleDisplay?: true;
+    },
+    {
+        /** When true, disables the shelf display, displaying all selected options in the input */
+        singleDisplay?: false | never;
+        /** Props to pass to the shelf div element */
+        shelfProps?: ComponentPropsWithRef<'div'>;
+    }
+]>;
 type MultipleType = OneOf<[
     {
         defaultValue?: string;
@@ -9,7 +21,7 @@ type MultipleType = OneOf<[
         defaultValue?: string[];
         multiple?: true;
         onChange?: (selected: string[]) => void;
-    }
+    } & MultipleShelf
 ]>;
 type CustomOption = OneOf<[
     {
@@ -59,15 +71,30 @@ export type SearchProps = Omit<ComboboxProps<string, boolean>, 'children' | 'def
     placeholder?: string;
     ref?: RefObject<HTMLElement | null>;
     required?: boolean;
+    selectedOptionDisplayProps?: Omit<ComponentPropsWithoutRef<'span'>, 'children'> & {
+        children?: ReactNode | ((name: string) => ReactNode);
+    };
 } & MultipleType & CustomOption;
 export type SearchOptionProps = Omit<ComboboxOptionProps<'div', string>, 'className' | 'value'> & {
     className?: string;
+    /** @ignore This is an internal prop used to determine if the option is selected. */
+    isInDisplay?: boolean;
     name: string;
     ref?: RefObject<HTMLElement | null>;
+    selectedDisplayProps?: Omit<ComponentPropsWithoutRef<'span'>, 'children'> & {
+        /** Use the function `(name: string) => ReactNode` to use the option name as the display value. */
+        children?: ReactNode | ((name: string) => ReactNode);
+    };
     value: string;
 };
-import { type JSX, type ReactNode, type RefObject } from 'react';
+import { type JSX, type ReactNode, type RefObject, type ComponentPropsWithRef, type ComponentPropsWithoutRef } from 'react';
 import { type ComboboxButtonProps, type ComboboxInputProps, type ComboboxOptionProps, type ComboboxOptionsProps, type ComboboxProps, type DescriptionProps, type FieldProps, type LabelProps } from '@headlessui/react';
+/**
+ * ## Search Section Title
+ *
+ * Displays a simple title.
+ */
+export declare function SearchSectionTitle({ className, ...props }: ComponentPropsWithRef<'div'>): JSX.Element;
 /**
  * ## SearchOption
  *
@@ -75,13 +102,28 @@ import { type ComboboxButtonProps, type ComboboxInputProps, type ComboboxOptionP
  * @prop name - This is used for filtering by default
  * @prop value - This is used as selected value and for FormData
  */
-export declare function SearchOption({ children, className, name, value, ...props }: SearchOptionProps): JSX.Element;
+export declare function SearchOption({ children, className, isInDisplay, name, selectedDisplayProps: { children: selectedDisplayChildren, className: selectedDisplayClassName, ...selectedDisplayProps }, value, ...props }: SearchOptionProps): JSX.Element;
 /**
  * # Search
  *
  * A searchable select component built on top of Headless UI's `Combobox`.
  *
  * Use the `SearchOption` component to define options.
+ *
+ * Use the `SearchSectionTitle` component to define titles.
+ *
+ * @prop label - The label for the select component.
+ * @prop description - The description for the select component.
+ * @prop placeholder - The placeholder for the select component.
+ * @prop required - Whether the select component is required.
+ * @prop invalid - Whether the select component is invalid.
+ * @prop multiple - Whether the select component allows multiple selections.
+ * @prop optionsProps - The props to be passed to each SearchOption component.
+ * @prop selectedOptionDisplayProps - The props to be passed to each selected option in the selected option component.
+ * @prop fieldProps - The props to be passed to the parent field component.
+ * @prop labelProps - The props to be passed to the label component.
+ * @prop descriptionProps - The props to be passed to the description component.
+ * @prop anchor - The anchor point for the drop down menu.
  */
-export declare function Search({ allowCustom, buttonProps, children, className, defaultValue, description, descriptionProps: { className: descriptionClassName, ...descriptionProps }, fieldProps: { className: fieldClassName, ...fieldProps }, inputProps, invalid, label, labelProps: { className: labelClassName, ...labelProps }, multiple, onChange, optionsProps: { anchor, className: optionsClassName, transition, ...optionsProps }, placeholder, required, ...props }: SearchProps): JSX.Element;
+export declare function Search(props: SearchProps): JSX.Element;
 export {};

package/dist/components/select.d.ts

@@ -28,9 +28,12 @@ export type SelectProps = Omit<ListboxProps, 'children' | 'defaultValue' | 'mult
     placeholder?: ListboxSelectedOptionProps['placeholder'];
     ref?: RefObject<HTMLElement | null>;
     required?: boolean;
-    selectedOptionProps?: Omit<ListboxSelectedOptionProps, 'options' | 'placeholder'> & {
+    selectedOptionProps?: AnyElementProps<ElementType, Omit<Omit<ListboxSelectedOptionProps, 'as'>, 'options' | 'placeholder'> & {
         /** @deprecated use `placeholder` prop instead */
         placeholder?: never;
+    }>;
+    selectedOptionDisplayProps?: Omit<ComponentPropsWithoutRef<'span'>, 'children'> & {
+        children?: ReactNode | ((name: string) => ReactNode);
     };
 } & ({
     defaultValue?: string;
@@ -45,9 +48,14 @@ export type SelectOptionProps = Omit<ListboxOptionProps, 'className'> & {
     className?: string;
     name: string;
     ref?: RefObject<HTMLElement | null>;
+    selectedDisplayProps?: Omit<ComponentPropsWithoutRef<'span'>, 'children'> & {
+        /** Use the function `(name: string) => ReactNode` to use the option name as the display value. */
+        children?: ReactNode | ((name: string) => ReactNode);
+    };
 };
-import { type ComponentPropsWithRef, type JSX, type ReactNode, type RefObject } from 'react';
+import { type ComponentPropsWithRef, type JSX, type ReactNode, type RefObject, type ComponentPropsWithoutRef, type ElementType } from 'react';
 import { type DescriptionProps, type FieldProps, type LabelProps, type ListboxButtonProps, type ListboxOptionProps, type ListboxOptionsProps, type ListboxProps, type ListboxSelectedOptionProps } from '@headlessui/react';
+import type { AnyElementProps } from '../types';
 /**
  * ## Select Section Title
  *
@@ -57,11 +65,12 @@ export declare function SelectSectionTitle({ className, ...props }: ComponentPro
 /**
  * ## SelectOption
  *
- * @prop children - This is what is displayed in the drop down menu
- * @prop name - This is displayed in the trigger button
- * @prop value - This is used for FormData
+ * @prop children - This is what is displayed in the drop down menu.
+ * @prop name - This is displayed in the trigger button.
+ * @prop value - This is used for FormData.
+ * @prop selectedDisplayProps - This is used to customize the display of the selected option (takes priority over selectedOptionDisplayProps).
  */
-export declare function SelectOption({ children, className, name, ...props }: SelectOptionProps): JSX.Element;
+export declare function SelectOption({ children, className, name, selectedDisplayProps: { children: selectedDisplayChildren, className: selectedDisplayClassName, ...selectedDisplayProps }, ...props }: SelectOptionProps): JSX.Element;
 /**
  * # Select
  *
@@ -79,9 +88,10 @@ export declare function SelectOption({ children, className, name, ...props }: Se
  * @prop multiple - Whether the select component allows multiple selections.
  * @prop optionsProps - The props to be passed to each SelectOption component.
  * @prop selectedOptionProps - The props to be passed to the selected option component.
+ * @prop selectedOptionDisplayProps - The props to be passed to each selected option in the selected option component.
  * @prop fieldProps - The props to be passed to the parent field component.
  * @prop labelProps - The props to be passed to the label component.
  * @prop descriptionProps - The props to be passed to the description component.
  * @prop anchor - The anchor point for the drop down menu.
  */
-export declare function Select({ buttonProps, children, className, description, descriptionProps: { className: descriptionClassName, ...descriptionProps }, fieldProps: { className: fieldClassName, ...fieldProps }, invalid, label, labelProps: { className: labelClassName, ...labelProps }, onChange, optionsProps: { anchor, className: optionsClassName, transition, ...optionsProps }, placeholder, required, selectedOptionProps: { ...selectedOptionProps }, ...props }: SelectProps): JSX.Element;
+export declare function Select(props: SelectProps): JSX.Element;

package/dist/hooks/create-fast-context.d.ts

@@ -1,10 +1,9 @@
-import { type HTMLAttributes, type JSX } from 'react';
-export declare function createFastContext<Store>(defaultInitialState: Store): {
-    Provider: ({ initialValue, ...props }: Pick<HTMLAttributes<HTMLElement>, 'children'> & {
-        initialValue?: Store;
-    }) => JSX.Element;
-    useStore: <SelectorOutput>(selector: (store: Store) => SelectorOutput, initialValue?: Store) => [
-        SelectorOutput | undefined,
-        ((value: Store | ((prevState: Store) => Store)) => void) | undefined
-    ];
+import { type JSX, type ReactNode } from 'react';
+export type FastContextProvider = ({ children, }: {
+    children: ReactNode;
+}) => JSX.Element;
+export type FastContextUseStore<TStore> = <SelectorOutput>(selector: (store: TStore) => SelectorOutput) => [SelectorOutput, (value: Partial<TStore>) => void];
+export declare function createFastContext<TStore>(initialState: TStore): {
+    Provider: FastContextProvider;
+    useStore: FastContextUseStore<TStore>;
 };

package/dist/hooks/index.js

@@ -1,39 +1,37 @@
-import { Suspense, createContext, useCallback, useContext, useEffect, useId, useRef, useState, useSyncExternalStore } from "react";
+import { createContext, useCallback, useContext, useEffect, useId, useRef, useState, useSyncExternalStore } from "react";
 import { jsx } from "react/jsx-runtime";
 //#region src/hooks/create-fast-context.tsx
-function createFastContext(defaultInitialState) {
-	function useStoreData(initialState = defaultInitialState) {
-		const store = useRef(initialState), get = () => store.current, subscribers = useRef(/* @__PURE__ */ new Set());
-		const set = (value) => {
-			if (typeof value === "function") store.current = value(store.current);
-			else store.current = value;
-			subscribers.current.forEach((callback) => callback());
-		};
-		const subscribe = (callback) => {
-			subscribers.current.add(callback);
-			return () => subscribers.current.delete(callback);
-		};
+function createFastContext(initialState) {
+	function useStoreData() {
+		const store = useRef(initialState);
+		const get = useCallback(() => store.current, []);
+		const subscribers = useRef(/* @__PURE__ */ new Set());
 		return {
 			get,
-			set,
-			subscribe
+			set: useCallback((value) => {
+				store.current = {
+					...store.current,
+					...value
+				};
+				subscribers.current.forEach((callback) => callback());
+			}, []),
+			subscribe: useCallback((callback) => {
+				subscribers.current.add(callback);
+				return () => subscribers.current.delete(callback);
+			}, [])
 		};
 	}
 	const StoreContext = createContext(null);
-	function Provider({ initialValue = defaultInitialState, ...props }) {
+	function Provider({ children }) {
 		return /* @__PURE__ */ jsx(StoreContext.Provider, {
-			value: useStoreData(initialValue),
-			...props
+			value: useStoreData(),
+			children
 		});
 	}
-	function useStore(selector, initialValue) {
+	function useStore(selector) {
 		const store = useContext(StoreContext);
-		if (!store) {
-			const selectedValue = selector(initialValue !== void 0 ? initialValue : defaultInitialState);
-			const noOpSet = () => console.warn("Attempting to set store value outside of Provider");
-			return [selectedValue, noOpSet];
-		}
-		return [useSyncExternalStore(store.subscribe, () => selector(store.get()), () => selector(initialValue !== void 0 ? initialValue : defaultInitialState)), store.set];
+		if (!store) throw new Error("Store not found");
+		return [useSyncExternalStore(store.subscribe, () => selector(store.get()), () => selector(initialState)), store.set];
 	}
 	return {
 		Provider,
@@ -43,15 +41,12 @@ function createFastContext(defaultInitialState) {
 //#endregion
 //#region src/hooks/use-form-status.tsx
 const DEFAULT_STATUS = "incomplete";
-const { Provider, useStore } = createFastContext(DEFAULT_STATUS);
-function FormStatusProvider({ children, initialStatus = DEFAULT_STATUS }) {
-	return /* @__PURE__ */ jsx(Suspense, { children: /* @__PURE__ */ jsx(Provider, {
-		initialValue: initialStatus,
-		children
-	}) });
-}
-function useFormStatus() {
-	return useStore((store) => store);
+function useFormStatusContext(initialStatus = DEFAULT_STATUS) {
+	const { Provider: FormStatusProvider, useStore: useFormStatus } = createFastContext(initialStatus);
+	return {
+		FormStatusProvider,
+		useFormStatus
+	};
 }
 //#endregion
 //#region src/hooks/use-pointer-movement.ts
@@ -180,4 +175,4 @@ function useMobileDevice() {
 	return isMobileDevice;
 }
 //#endregion
-export { FormStatusProvider, createFastContext, useFormStatus, useMobileDevice, usePointerMovement };
+export { createFastContext, useFormStatusContext, useMobileDevice, usePointerMovement };

package/dist/hooks/use-form-status.d.ts

@@ -1,10 +1,8 @@
-import { type JSX, type ReactNode } from 'react';
-export type FormStatus = 'error' | 'incomplete' | 'loading' | 'ready' | 'success' | 'readonly';
-export declare function FormStatusProvider({ children, initialStatus, }: {
-    children?: ReactNode;
-    initialStatus?: FormStatus;
-}): JSX.Element;
-export declare function useFormStatus(): [
-    FormStatus | undefined,
-    (((value: FormStatus | ((prevState: FormStatus) => FormStatus)) => void) | undefined)
-];
+import type { SubmitButtonProps } from '../components';
+type FormStatus = SubmitButtonProps['formStatus'];
+import { type FastContextProvider, type FastContextUseStore } from './create-fast-context';
+export declare function useFormStatusContext(initialStatus?: FormStatus): {
+    FormStatusProvider: FastContextProvider;
+    useFormStatus: FastContextUseStore<FormStatus>;
+};
+export {};