@spark-ui/components 10.0.0

package/dist/dropdown/index.d.mts

@@ -0,0 +1,233 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { Dispatch, SetStateAction, PropsWithChildren, Ref, ReactNode, HTMLAttributes, ReactElement, ComponentProps } from 'react';
+import { UseSelectReturnValue, UseMultipleSelectionReturnValue } from 'downshift';
+import { Popover as Popover$1 } from '../popover/index.mjs';
+import 'radix-ui';
+import 'class-variance-authority/types';
+import 'class-variance-authority';
+
+interface DropdownItem {
+    disabled: boolean;
+    value: string;
+    text: string;
+}
+type ItemsMap = Map<string, DropdownItem>;
+type DownshiftState = UseSelectReturnValue<DropdownItem> & UseMultipleSelectionReturnValue<DropdownItem>;
+
+interface DropdownContextState extends DownshiftState {
+    itemsMap: ItemsMap;
+    highlightedItem: DropdownItem | undefined;
+    hasPopover: boolean;
+    setHasPopover: Dispatch<SetStateAction<boolean>>;
+    multiple: boolean;
+    disabled: boolean;
+    readOnly: boolean;
+    state?: 'error' | 'alert' | 'success';
+    lastInteractionType: 'mouse' | 'keyboard';
+    setLastInteractionType: (type: 'mouse' | 'keyboard') => void;
+}
+type DropdownContextCommonProps = PropsWithChildren<{
+    /**
+     * The controlled open state of the select. Must be used in conjunction with `onOpenChange`.
+     */
+    open?: boolean;
+    /**
+     * Event handler called when the open state of the select changes.
+     */
+    onOpenChange?: (isOpen: boolean) => void;
+    /**
+     * The open state of the select when it is initially rendered. Use when you do not need to control its open state.
+     */
+    defaultOpen?: boolean;
+    /**
+     * Use `state` prop to assign a specific state to the dropdown, choosing from: `error`, `alert` and `success`. By doing so, the outline styles will be updated.
+     */
+    state?: 'error' | 'alert' | 'success';
+    /**
+     * When true, prevents the user from interacting with the dropdown.
+     */
+    disabled?: boolean;
+    /**
+     * Sets the dropdown as interactive or not.
+     */
+    readOnly?: boolean;
+}>;
+interface DropdownPropsSingle {
+    /**
+     * Prop 'multiple' indicating whether multiple values are allowed.
+     */
+    multiple?: false;
+    /**
+     * The value of the select when initially rendered. Use when you do not need to control the state of the select.
+     */
+    defaultValue?: string;
+    /**
+     * The controlled value of the select. Should be used in conjunction with `onValueChange`.
+     */
+    value?: string;
+    /**
+     * Event handler called when the value changes.
+     */
+    onValueChange?: (value: string) => void;
+}
+interface DropdownPropsMultiple {
+    /**
+     * Prop 'multiple' indicating whether multiple values are allowed.
+     */
+    multiple: true;
+    /**
+     * The value of the select when initially rendered. Use when you do not need to control the state of the select.
+     */
+    defaultValue?: string[];
+    /**
+     * The controlled value of the select. Should be used in conjunction with `onValueChange`.
+     */
+    value?: string[];
+    /**
+     * Event handler called when the value changes.
+     */
+    onValueChange?: (value: string[]) => void;
+}
+type DropdownContextProps = DropdownContextCommonProps & (DropdownPropsSingle | DropdownPropsMultiple);
+declare const DropdownProvider: ({ children, defaultValue, value, onValueChange, open, onOpenChange, defaultOpen, multiple, disabled: disabledProp, readOnly: readOnlyProp, state: stateProp, }: DropdownContextProps) => react_jsx_runtime.JSX.Element;
+declare const useDropdownContext: () => DropdownContextState;
+
+type DropdownProps = DropdownContextProps;
+declare const Dropdown$1: {
+    ({ children, ...props }: DropdownProps): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
+
+interface DividerProps {
+    className?: string;
+    ref?: Ref<HTMLDivElement>;
+}
+declare const Divider: {
+    ({ className, ref: forwardedRef }: DividerProps): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
+
+interface GroupProps {
+    children: ReactNode;
+    className?: string;
+    ref?: Ref<HTMLDivElement>;
+}
+declare const Group: {
+    ({ children, ref: forwardedRef, ...props }: GroupProps): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
+
+interface ItemProps extends HTMLAttributes<HTMLLIElement> {
+    disabled?: boolean;
+    value: string;
+    children: ReactNode;
+    className?: string;
+    ref?: Ref<HTMLLIElement>;
+}
+declare const Item: {
+    ({ children, ref: forwardedRef, ...props }: ItemProps): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
+
+interface ItemIndicatorProps {
+    children?: ReactNode;
+    className?: string;
+    label?: string;
+    ref?: Ref<HTMLSpanElement>;
+}
+declare const ItemIndicator: {
+    ({ className, children, label, ref: forwardedRef, }: ItemIndicatorProps): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
+
+interface ItemsProps {
+    children: ReactNode;
+    className?: string;
+    ref?: Ref<HTMLUListElement>;
+}
+/**
+ * BUGFIX
+ *
+ * 1. The !pointer-events-auto class is needed to prevent a bug
+ *    which cannot be reproduced when running Storybook locally,
+ *    in scenarios such as when a Dropdown is nested within a Dialog,
+ *    the "props" object, containing styles computed by Radix
+ *    may erroneously contain "pointerEvents = 'none'", while the Dropdown is open,
+ *    making it impossible to select a value using a pointer device
+ */
+declare const Items: {
+    ({ children, className, ref: forwardedRef, ...props }: ItemsProps): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
+
+interface ItemTextProps {
+    children: string;
+    ref?: Ref<HTMLSpanElement>;
+}
+declare const ItemText: {
+    ({ children, ref: forwardedRef }: ItemTextProps): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
+
+interface LabelProps {
+    children: string;
+    className?: string;
+    ref?: Ref<HTMLDivElement>;
+}
+declare const Label: {
+    ({ children, className, ref: forwardedRef }: LabelProps): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
+
+declare const LeadingIcon: {
+    ({ children }: {
+        children: ReactElement;
+    }): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
+
+declare const Popover: {
+    ({ children, matchTriggerWidth, sideOffset, className, elevation, ref: forwardedRef, ...props }: ComponentProps<typeof Popover$1.Content>): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
+
+declare const Portal: typeof Popover$1.Portal;
+
+interface TriggerProps {
+    'aria-label'?: string;
+    children: ReactNode;
+    className?: string;
+    ref?: Ref<HTMLButtonElement>;
+}
+declare const Trigger: {
+    ({ "aria-label": ariaLabel, children, className, ref: forwardedRef, }: TriggerProps): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
+
+interface ValueProps {
+    children?: ReactNode;
+    className?: string;
+    placeholder: string;
+    ref?: Ref<HTMLSpanElement>;
+}
+declare const Value: {
+    ({ children, className, placeholder, ref: forwardedRef }: ValueProps): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
+
+declare const Dropdown: typeof Dropdown$1 & {
+    Group: typeof Group;
+    Item: typeof Item;
+    Items: typeof Items;
+    ItemText: typeof ItemText;
+    ItemIndicator: typeof ItemIndicator;
+    Label: typeof Label;
+    Popover: typeof Popover;
+    Divider: typeof Divider;
+    Trigger: typeof Trigger;
+    Value: typeof Value;
+    LeadingIcon: typeof LeadingIcon;
+    Portal: typeof Portal;
+};
+
+export { Dropdown, DropdownProvider, useDropdownContext };

package/dist/dropdown/index.d.ts

@@ -0,0 +1,233 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { Dispatch, SetStateAction, PropsWithChildren, Ref, ReactNode, HTMLAttributes, ReactElement, ComponentProps } from 'react';
+import { UseSelectReturnValue, UseMultipleSelectionReturnValue } from 'downshift';
+import { Popover as Popover$1 } from '../popover/index.js';
+import 'radix-ui';
+import 'class-variance-authority/types';
+import 'class-variance-authority';
+
+interface DropdownItem {
+    disabled: boolean;
+    value: string;
+    text: string;
+}
+type ItemsMap = Map<string, DropdownItem>;
+type DownshiftState = UseSelectReturnValue<DropdownItem> & UseMultipleSelectionReturnValue<DropdownItem>;
+
+interface DropdownContextState extends DownshiftState {
+    itemsMap: ItemsMap;
+    highlightedItem: DropdownItem | undefined;
+    hasPopover: boolean;
+    setHasPopover: Dispatch<SetStateAction<boolean>>;
+    multiple: boolean;
+    disabled: boolean;
+    readOnly: boolean;
+    state?: 'error' | 'alert' | 'success';
+    lastInteractionType: 'mouse' | 'keyboard';
+    setLastInteractionType: (type: 'mouse' | 'keyboard') => void;
+}
+type DropdownContextCommonProps = PropsWithChildren<{
+    /**
+     * The controlled open state of the select. Must be used in conjunction with `onOpenChange`.
+     */
+    open?: boolean;
+    /**
+     * Event handler called when the open state of the select changes.
+     */
+    onOpenChange?: (isOpen: boolean) => void;
+    /**
+     * The open state of the select when it is initially rendered. Use when you do not need to control its open state.
+     */
+    defaultOpen?: boolean;
+    /**
+     * Use `state` prop to assign a specific state to the dropdown, choosing from: `error`, `alert` and `success`. By doing so, the outline styles will be updated.
+     */
+    state?: 'error' | 'alert' | 'success';
+    /**
+     * When true, prevents the user from interacting with the dropdown.
+     */
+    disabled?: boolean;
+    /**
+     * Sets the dropdown as interactive or not.
+     */
+    readOnly?: boolean;
+}>;
+interface DropdownPropsSingle {
+    /**
+     * Prop 'multiple' indicating whether multiple values are allowed.
+     */
+    multiple?: false;
+    /**
+     * The value of the select when initially rendered. Use when you do not need to control the state of the select.
+     */
+    defaultValue?: string;
+    /**
+     * The controlled value of the select. Should be used in conjunction with `onValueChange`.
+     */
+    value?: string;
+    /**
+     * Event handler called when the value changes.
+     */
+    onValueChange?: (value: string) => void;
+}
+interface DropdownPropsMultiple {
+    /**
+     * Prop 'multiple' indicating whether multiple values are allowed.
+     */
+    multiple: true;
+    /**
+     * The value of the select when initially rendered. Use when you do not need to control the state of the select.
+     */
+    defaultValue?: string[];
+    /**
+     * The controlled value of the select. Should be used in conjunction with `onValueChange`.
+     */
+    value?: string[];
+    /**
+     * Event handler called when the value changes.
+     */
+    onValueChange?: (value: string[]) => void;
+}
+type DropdownContextProps = DropdownContextCommonProps & (DropdownPropsSingle | DropdownPropsMultiple);
+declare const DropdownProvider: ({ children, defaultValue, value, onValueChange, open, onOpenChange, defaultOpen, multiple, disabled: disabledProp, readOnly: readOnlyProp, state: stateProp, }: DropdownContextProps) => react_jsx_runtime.JSX.Element;
+declare const useDropdownContext: () => DropdownContextState;
+
+type DropdownProps = DropdownContextProps;
+declare const Dropdown$1: {
+    ({ children, ...props }: DropdownProps): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
+
+interface DividerProps {
+    className?: string;
+    ref?: Ref<HTMLDivElement>;
+}
+declare const Divider: {
+    ({ className, ref: forwardedRef }: DividerProps): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
+
+interface GroupProps {
+    children: ReactNode;
+    className?: string;
+    ref?: Ref<HTMLDivElement>;
+}
+declare const Group: {
+    ({ children, ref: forwardedRef, ...props }: GroupProps): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
+
+interface ItemProps extends HTMLAttributes<HTMLLIElement> {
+    disabled?: boolean;
+    value: string;
+    children: ReactNode;
+    className?: string;
+    ref?: Ref<HTMLLIElement>;
+}
+declare const Item: {
+    ({ children, ref: forwardedRef, ...props }: ItemProps): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
+
+interface ItemIndicatorProps {
+    children?: ReactNode;
+    className?: string;
+    label?: string;
+    ref?: Ref<HTMLSpanElement>;
+}
+declare const ItemIndicator: {
+    ({ className, children, label, ref: forwardedRef, }: ItemIndicatorProps): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
+
+interface ItemsProps {
+    children: ReactNode;
+    className?: string;
+    ref?: Ref<HTMLUListElement>;
+}
+/**
+ * BUGFIX
+ *
+ * 1. The !pointer-events-auto class is needed to prevent a bug
+ *    which cannot be reproduced when running Storybook locally,
+ *    in scenarios such as when a Dropdown is nested within a Dialog,
+ *    the "props" object, containing styles computed by Radix
+ *    may erroneously contain "pointerEvents = 'none'", while the Dropdown is open,
+ *    making it impossible to select a value using a pointer device
+ */
+declare const Items: {
+    ({ children, className, ref: forwardedRef, ...props }: ItemsProps): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
+
+interface ItemTextProps {
+    children: string;
+    ref?: Ref<HTMLSpanElement>;
+}
+declare const ItemText: {
+    ({ children, ref: forwardedRef }: ItemTextProps): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
+
+interface LabelProps {
+    children: string;
+    className?: string;
+    ref?: Ref<HTMLDivElement>;
+}
+declare const Label: {
+    ({ children, className, ref: forwardedRef }: LabelProps): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
+
+declare const LeadingIcon: {
+    ({ children }: {
+        children: ReactElement;
+    }): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
+
+declare const Popover: {
+    ({ children, matchTriggerWidth, sideOffset, className, elevation, ref: forwardedRef, ...props }: ComponentProps<typeof Popover$1.Content>): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
+
+declare const Portal: typeof Popover$1.Portal;
+
+interface TriggerProps {
+    'aria-label'?: string;
+    children: ReactNode;
+    className?: string;
+    ref?: Ref<HTMLButtonElement>;
+}
+declare const Trigger: {
+    ({ "aria-label": ariaLabel, children, className, ref: forwardedRef, }: TriggerProps): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
+
+interface ValueProps {
+    children?: ReactNode;
+    className?: string;
+    placeholder: string;
+    ref?: Ref<HTMLSpanElement>;
+}
+declare const Value: {
+    ({ children, className, placeholder, ref: forwardedRef }: ValueProps): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
+
+declare const Dropdown: typeof Dropdown$1 & {
+    Group: typeof Group;
+    Item: typeof Item;
+    Items: typeof Items;
+    ItemText: typeof ItemText;
+    ItemIndicator: typeof ItemIndicator;
+    Label: typeof Label;
+    Popover: typeof Popover;
+    Divider: typeof Divider;
+    Trigger: typeof Trigger;
+    Value: typeof Value;
+    LeadingIcon: typeof LeadingIcon;
+    Portal: typeof Portal;
+};
+
+export { Dropdown, DropdownProvider, useDropdownContext };