Scoops-headless

Scoops-headless is a headless ui component like HeadlessUI

Components

Modal

| Props | Description | Type | | ---------------------- | --------------------------------------------- | ----------------------------------------------------------------------------------------------------------- | | isOpen | Is modal open | boolean | | setIsOpen | set modal open state | (open: boolean) => void | | disabledOutsideDismiss | disabled closing modal while clicking outside | boolean | | children | Children Element | ReactNode | | overlayClassName | overlay's class name | string | | transitions | transition config | TransitionConfig | | *TransitionConfig | transition setting | enter?: string; enterFrom?: string; enterTo?: string; leave?: string; leaveFrom?: string; leaveTo?: string; | | overlay | show overlay (backdrop) | boolean | | wrapperClassName | modal wrapper className | string | | portalClassName | modal wrapper className | string |

Drawer

| Props | Description | Type | | ---------------------- | --------------------------------------------- | ----------------------------------------------------------------------------------------------------------- | | isOpen | Is modal open | boolean | | setIsOpen | set modal open state | (open: boolean) => void | | disabledOutsideDismiss | disabled closing modal while clicking outside | boolean | | children | Children Element | ReactNode | | overlayClassName | overlay's class name | string | | transitions | transition config | TransitionConfig | | *TransitionConfig | transition setting | enter?: string; enterFrom?: string; enterTo?: string; leave?: string; leaveFrom?: string; leaveTo?: string; | | overlay | show overlay (backdrop) | boolean | | side | which side the drawer appears | "top" , "bottom" , "left" , "right" | | portalClassName | modal wrapper className | string |

Popover

Popover.Wrapper

A component wraps the reference and panel components, handling the logic for showing/hiding the popover and managing its position.

| Props | Description | Type | | ---------------------- | ---------------------------------------------------------------------- | ---------------------------------- | | children (function) | A function receiving { isOpen, setIsOpen } to control popover state. | ({isOpen, setIsOpen}) => ReactNode | | overlay | Show overlay (backdrop). | boolean | | overlayClassName | Class name for overlay styling. | string | | portal | Render popover using a portal. Default is true. | boolean (optional) | | disabledOutsideDismiss | Disable dismissing on outside click. Default is false. | boolean (optional) | | strategy | Popover positioning strategy: "absolute" or "fixed". | "absolute" | "fixed" | | placement | Placement of the popover relative to the reference. | Placement | | offset | Offset options for popover positioning. | [number | null, number | null] | | fallbackPlacements | Fallback placements if primary placement is unavailable. | Array<Placement> | | portalClassName | modal wrapper className | string | | disableUpdateOnOpen | disable update ui function when popover is opening | boolean |

Popover.Panel

The Panel component contains the content displayed within the popover. | Props | Description | Type | | --- | --- | --- | | children | Content within the panel. | ReactNode | | className | Additional CSS class for styling. | string (optional) |

Popover.Reference

The Reference component functions as the popover's trigger element. When clicked, it toggles the popover's visibility.

| Props | Description | Type | | --------- | ------------------------------------- | ----------------- | | children | Content within the reference element. | ReactNode | | className | Additional CSS class for styling. | string (optional) |

SelectBox

SelectBox.Wrapper

A component serves as the main container for the select box. It manages the state and configuration for the select box and its related components.

| Props | Description | Type | | ------------------- | ---------------------------------------------------------- | ---------------------------------------------------------------- | | children | A function receiving parameters to control the select box. | ({ selected, active, openMenu, closeMenu, isOpen }) => ReactNode | | options | An array of options for the select box. | Generic<T>[] | | isOpen | Optional boolean to control the initial open state. | boolean | | setIsOpen | Optional function to set the open state. | (val: boolean) => void | | onChange | Function called when the selected item changes. | (v: Generic<T> | null) => void | | initialSelectedItem | Initial selected item | Generic<T> | null |

SelectBox.Options

The SelectBox.Options component displays the available options within the select box

| Props | Description | Type | | --------- | --------------------------------------- | ---------------------------------------- | | children | A function receiving options to render. | (options: Generic<T>[]) => ReactNode | | className | Optional CSS class name for styling. | string |

SelectBox.Option

The SelectBox.Option component represents an individual option within the select box.

| Props | Description | Type | | -------- | ------------------------------------------- | ------------ | | children | Content within the option element. | ReactNode | | item | The item associated with the option. | Generic<T> | | index | The index of the option within the list. | number | | key | React's key prop (automatically generated). | string |

SelectBox.Reference

The SelectBox.Reference component serves as the trigger element for the select box. Clicking it opens or closes the dropdown.

| Props | Description | Type | | -------- | ------------------------------------- | --------- | | children | Content within the reference element. | ReactNode |

SelectBox.Label

The SelectBox.Label component displays a label for the select box. | Props | Description | Type | | --- | --- | --- | | children | Content within the reference element. | ReactNode |

ComboBox

ComboBox.Wrapper

The ComboBox.Wrapper component serves as the main container for the combo box. It manages the state and configuration for the combo box and its related components

| Props | Description | Type | | ------------------- | --------------------------------------------------------- | ---------------------------------------------------------------- | | children | A function receiving parameters to control the combo box. | ({ selected, active, openMenu, closeMenu, isOpen }) => ReactNode | | options | An array of options for the combo box. | Generic<T>[] | | isOpen | Optional boolean to control the initial open state. | boolean | | setIsOpen | Optional function to set the open state. | (val: boolean) => void | | onChange | Function called when the selected item changes. | (v: Generic<T> | null) => void | | onInputValueChange | Function called when the input value changes. | (val: string) => void | | itemToString | Function to convert an item to a string representation. | (val: Generic<T> | null) => string | | initialSelectedItem | Initial selected item | Generic<T> | null |

ComboBox.Options

The ComboBox.Options component displays the available options within the combo box.

| Props | Description | Type | | --------- | --------------------------------------- | ---------------------------------------- | | children | A function receiving options to render. | (options: Generic<T>[]) => ReactNode | | className | Optional CSS class name for styling. | string |

ComboBox.Option

The ComboBox.Option component represents an individual option within the combo box.

| Props | Description | Type | | -------- | ------------------------------------------- | ------------ | | children | Content within the option element. | ReactNode | | item | The item associated with the option. | Generic<T> | | index | The index of the option within the list. | number | | key | React's key prop (automatically generated). | string |

ComboBox.Input

The ComboBox.Input component provides an input element for the combo box. | Props | Description | Type | | --- | --- | --- | | className | Optional CSS class name for styling. | string | | ...rest | Additional input attributes (e.g., placeholder). | HTMLInputElement Attributes |

ComboBox.Label

The ComboBox.Label component displays a label for the combo box.

| Props | Description | Type | | -------- | --------------------------------- | --------- | | children | Content within the label element. | ReactNode |

MultipleSelect

MultipleSelect.Wrapper

The MultipleSelect.Wrapper component serves as the main container for the multiple-select component. It manages the state and configuration for the multiple-select and its related components.

| Props | Description | Type | | ------------------ | --------------------------------------------------------------- | ---------------------------------------------------------------- | | children | A function receiving parameters to control the multiple-select. | ({ selected, active, openMenu, closeMenu, isOpen }) => ReactNode | | options | An array of options for the multiple-select. | Generic<T>[] | | isOpen | Optional boolean to control the initial open state. | boolean | | setIsOpen | Optional function to set the open state. | (val: boolean) => void | | onSelectedItem | Function called when the selected item changes. | (v: Generic<T> | null) => void | | onItemsChange | Function called when the selected items change. | (v: Generic<T>[] | null) => void | | selectedItems | Array of initially selected items. | Generic<T>[] | | onInputValueChange | Function called when the input value changes. | (val: string) => void | | itemToString | Function to convert an item to a string representation. | (val: Generic<T> | null) => string |

MultipleSelect.Options

The MultipleSelect.Options component displays the available options within the multiple-select.

| Props | Description | Type | | --------- | --------------------------------------- | ----------------------------------------- | | children | A function receiving options to render. | (options: Generic<T> []) => ReactNode | | className | Optional CSS class name for styling. | string |

MultipleSelect.Option

The MultipleSelect.Option component represents an individual option within the multiple-select.

| Props | Description | Type | | -------- | ------------------------------------------- | ------------ | | children | Content within the option element. | ReactNode | | item | The item associated with the option. | Generic<T> | | index | The index of the option within the list. | number | | key | React's key prop (automatically generated). | string |

MultipleSelect.Input

The MultipleSelect.Input component provides an input element for the multiple-select.

| Props | Description | Type | | --------- | -------------------------------------------------- | --------------------------- | | className | Optional CSS class name for styling. | string | | rest | Additional input attributes (e.g., placeholder). | HTMLInputElement Attributes |

MultipleSelect.Label

The MultipleSelect.Label component displays a label for the multiple-select.

| Props | Description | Type | | -------- | --------------------------------- | --------- | | children | Content within the label element. | ReactNode |

Transition

| Prop | Description | Type | | --------- | -------------------------------------------- | --------- | | enter | Class to be applied when entering. | string | | enterFrom | Class to be applied when starting entering. | string | | enterTo | Class to be applied when finishing entering. | string | | leave | Class to be applied when leaving. | string | | leaveFrom | Class to be applied when starting leaving. | string | | leaveTo | Class to be applied when finishing leaving. | string | | show | Determines if the element is shown or not. | boolean | | children | Content to be transitioned. | ReactNode | | className | Additional CSS class name for styling. | string |