@jakubmazanec/ui 0.1.0-unstable.081bdf1

package/source/components/Listbox.tsx

@@ -0,0 +1,401 @@
+// TODO: fix somehow
+/* eslint-disable complexity -- TODO */
+import {
+  Listbox as HeadlessListbox,
+  ListboxButton as HeadlessListboxButton,
+  ListboxOptions as HeadlessListboxOptions,
+  type ListboxProps as HeadlessListboxProps,
+} from '@headlessui/react';
+import {
+  type ChangeEvent,
+  Children,
+  type ComponentPropsWithoutRef,
+  type ElementType,
+  Fragment,
+  type KeyboardEvent,
+  type PropsWithChildren,
+  type ReactNode,
+  type Ref,
+  useCallback,
+  useRef,
+  useState,
+} from 'react';
+
+import {
+  type ComponentProps,
+  type ComponentTheme,
+  createComponentTheme,
+} from '../theme/internals.js';
+import {Icon} from './Icon.js';
+import {Input} from './Input.js';
+import {forwardRef, useFormId} from './internals.js';
+import {ListboxOption} from './ListboxOption.js';
+import {useField} from './useField.js';
+import {useFieldName} from './useFieldName.js';
+
+export const useListboxTheme = createComponentTheme('Listbox', {
+  variants: {disabled: [true, false], invalid: [true, false]},
+  elements: ['root', 'label', 'icon', 'options', 'filter'],
+});
+
+const LISTBOX_ELEMENT = Fragment;
+
+export type ListboxItem<V> = {
+  value: V;
+  label: string;
+};
+
+export type ListboxProps<
+  T extends ElementType,
+  V extends boolean | number | string,
+> = PropsWithChildren<
+  ComponentProps<typeof useListboxTheme> &
+    ComponentPropsWithoutRef<T> &
+    (
+      | {
+          as?: T | undefined;
+          value?: V | undefined;
+          defaultValue?: V | undefined;
+          multiple?: false | undefined;
+          hideSelected?: never; // must be here so the type of props is correct
+          items?: Array<ListboxItem<V>> | undefined;
+          placeholder?: string;
+          name?: string | undefined;
+          className?: string | undefined;
+          showFilter?: boolean | undefined;
+          onChange?: (selectedValue: V) => void;
+        }
+      | {
+          as?: T | undefined;
+          value?: V[] | undefined;
+          defaultValue?: V[] | undefined;
+          multiple: true;
+          hideSelected?:
+            | {
+                limit: number;
+                message?: string | undefined;
+              }
+            | undefined;
+          items?: Array<ListboxItem<V>> | undefined;
+          placeholder?: string;
+          name?: string | undefined;
+          className?: string | undefined;
+          showFilter?: boolean | undefined;
+          onChange?: (selectedValue: V[]) => void;
+        }
+    )
+>;
+
+export const Listbox = forwardRef(
+  <T extends ElementType = typeof LISTBOX_ELEMENT, V extends boolean | number | string = string>(
+    {
+      disabled = false,
+      invalid = false,
+      as = LISTBOX_ELEMENT as unknown as T,
+      value,
+      defaultValue,
+      multiple,
+      hideSelected,
+      items,
+      placeholder,
+      name,
+      className,
+      showFilter,
+      onChange,
+      children,
+      ...rest
+    }: ListboxProps<T, V>,
+    ref: Ref<HTMLElement>,
+  ) => {
+    let theme = useListboxTheme({disabled, invalid});
+    let formId = useFormId();
+    let field = useField();
+    let fieldName = useFieldName();
+    let [query, setQuery] = useState('');
+    let inputRef = useRef<HTMLElement>(null);
+
+    let handleChange = useCallback(
+      (selectedValue: V) => {
+        onChange?.(selectedValue as V & V[]);
+      },
+      [onChange],
+    );
+
+    // hacky solution so the user is able to focus inout used for filtering
+    let handleTab = useCallback(
+      (event: KeyboardEvent) => {
+        if (!showFilter) {
+          return;
+        }
+
+        if (event.key === 'Tab' && document.activeElement !== inputRef.current) {
+          event.preventDefault();
+          inputRef.current?.focus();
+        }
+      },
+      [showFilter],
+    );
+
+    let handleQueryChange = useCallback((event: ChangeEvent<HTMLInputElement>) => {
+      setQuery(event.target.value);
+    }, []);
+
+    if (items && children) {
+      throw new Error('Combobox accepts only either `items` prop, or children!');
+    }
+
+    let filteredItems =
+      query ?
+        items?.filter((item) =>
+          item.label
+            .toLowerCase()
+            .replace(/\s+/g, '')
+            .includes(query.toLowerCase().replace(/\s+/g, '')),
+        )
+      : items;
+    let filteredChildren =
+      query ?
+        Children.toArray(children).filter((child) => {
+          if (
+            typeof child === 'object' &&
+            'props' in child &&
+            typeof child.props === 'object' &&
+            typeof (child.props as {children?: unknown[] | string}).children === 'string' &&
+            (child.props as {children: string}).children
+              .toLowerCase()
+              .replace(/\s+/g, '')
+              .includes(query.toLowerCase().replace(/\s+/g, ''))
+          ) {
+            return true;
+          }
+
+          return false;
+        })
+      : children;
+
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any -- needed
+    let props: HeadlessListboxProps<any, any> = {
+      as,
+      ref,
+      name: field?.name ?? fieldName ?? name,
+      value: value ?? null,
+      defaultValue,
+      multiple,
+      disabled,
+      invalid,
+      form: formId,
+      onChange: handleChange,
+      ...rest,
+    };
+
+    return (
+      <HeadlessListbox {...props}>
+        <HeadlessListboxButton
+          className={theme.root('relative', className)}
+          data-multiple={multiple ? true : null}
+          data-component="listbox"
+        >
+          {({value: selectedValue}) => {
+            if (!items && !multiple) {
+              let selectedItem: ReactNode;
+
+              Children.forEach(filteredChildren, (child) => {
+                if (!child) {
+                  return;
+                }
+
+                if (
+                  typeof child === 'object' &&
+                  'props' in child &&
+                  typeof child.props === 'object' &&
+                  (child.props as Record<string, unknown>).value === selectedValue
+                ) {
+                  selectedItem = (child.props as Record<string, unknown>).children as ReactNode;
+                }
+              });
+
+              return (
+                <>
+                  <span className={theme.label('overflow-hidden text-ellipsis whitespace-nowrap')}>
+                    {selectedItem ?? placeholder ?? null}
+                  </span>
+                  <span className={theme.icon('absolute')}>
+                    <Icon name="ChevronUpDown" />
+                  </span>
+                </>
+              );
+            } else if (!items && multiple) {
+              let itemsHidden = false;
+              let selectedItems: ReactNode[] = [];
+
+              Children.forEach(filteredChildren, (child) => {
+                if (!child) {
+                  return;
+                }
+
+                if (
+                  typeof child === 'object' &&
+                  'props' in child &&
+                  typeof child.props === 'object' &&
+                  (selectedValue as unknown[]).includes(
+                    (child.props as Record<string, unknown>).value,
+                  )
+                ) {
+                  selectedItems.push(
+                    (child.props as Record<string, unknown>).children as ReactNode,
+                  );
+                }
+              });
+
+              if (hideSelected && selectedItems.length > hideSelected.limit) {
+                selectedItems = selectedItems.slice(0, hideSelected.limit);
+                itemsHidden = true;
+              }
+
+              return (
+                <>
+                  {selectedItems.length ?
+                    selectedItems.map((selectedItem, index) => (
+                      <span
+                        // eslint-disable-next-line react/no-array-index-key -- needed
+                        key={index}
+                        className={theme.label('overflow-hidden text-ellipsis whitespace-nowrap')}
+                      >
+                        {selectedItem}
+                      </span>
+                    ))
+                  : placeholder ?? null}
+                  {itemsHidden ?
+                    <span
+                      data-ellipsis
+                      className={theme.label('overflow-hidden text-ellipsis whitespace-nowrap')}
+                    >
+                      {hideSelected?.message ?? '…'}
+                    </span>
+                  : null}
+                  <span className={theme.icon('absolute')}>
+                    <Icon name="ChevronUpDown" />
+                  </span>
+                </>
+              );
+            } else if (items && multiple) {
+              let itemsHidden = false;
+              let selectedItems =
+                filteredItems?.filter((item) =>
+                  (selectedValue as unknown[] | undefined)?.includes(item.value),
+                ) ?? [];
+
+              if (hideSelected && selectedItems.length > hideSelected.limit) {
+                selectedItems = selectedItems.slice(0, hideSelected.limit);
+                itemsHidden = true;
+              }
+
+              return (
+                <>
+                  {selectedItems.length ?
+                    selectedItems.map((selectedItem, index) => (
+                      <span
+                        // eslint-disable-next-line react/no-array-index-key -- needed
+                        key={index}
+                        className={theme.label('overflow-hidden text-ellipsis whitespace-nowrap')}
+                      >
+                        {selectedItem.label}
+                      </span>
+                    ))
+                  : placeholder ?? null}
+                  {itemsHidden ?
+                    <span
+                      data-ellipsis
+                      className={theme.label('overflow-hidden text-ellipsis whitespace-nowrap')}
+                    >
+                      {hideSelected?.message ?? '…'}
+                    </span>
+                  : null}
+                  <span className={theme.icon('absolute')}>
+                    <Icon name="ChevronUpDown" />
+                  </span>
+                </>
+              );
+            }
+
+            let selectedItem = filteredItems?.find((item) => item.value === selectedValue);
+
+            return (
+              <>
+                <span className={theme.label('overflow-hidden text-ellipsis whitespace-nowrap')}>
+                  {selectedItem?.label ?? placeholder ?? null}
+                </span>
+                <span className={theme.icon('absolute')}>
+                  <Icon name="ChevronUpDown" />
+                </span>
+              </>
+            );
+          }}
+        </HeadlessListboxButton>
+        <HeadlessListboxOptions
+          className={theme.options()}
+          anchor="bottom start"
+          onKeyDown={handleTab}
+        >
+          {showFilter ?
+            <div className={theme.filter()}>
+              <Input ref={inputRef} showClearButton value={query} onInput={handleQueryChange} />
+            </div>
+          : null}
+          {items ?
+            filteredItems?.map((item) => (
+              <ListboxOption key={item.label} value={item.value}>
+                {item.label}
+              </ListboxOption>
+            ))
+          : filteredChildren}
+        </HeadlessListboxOptions>
+      </HeadlessListbox>
+    );
+  },
+);
+
+export const listboxTheme: ComponentTheme<typeof useListboxTheme> = {
+  classNames: {
+    root: 'flex w-full min-w-32 items-center rounded-2 border-2 border-gray-100 hover:border-gray-200 bg-white px-2.5 h-9 pr-9 gap-x-2 transition-colors shadow-inner font-sans text-sm',
+    label: 'flex gap-x-2',
+    icon: 'text-gray-500 size-5 top-1.5 right-1.5 cursor-pointer',
+    options:
+      'flex flex-col gap-y-1 shadow p-1 z-30 rounded-2 border-2 border-gray-100 hover:border-gray-200 bg-white text-left w-[var(--button-width)] [--anchor-gap:theme(spacing.1)] [--anchor-padding:theme(spacing.2)] [scrollbar-width:thin] empty:invisible transition-colors',
+    filter: '[&>[data-component=input]]:rounded',
+  },
+  variants: {
+    disabled: {
+      true: {
+        root: 'border-gray-100 text-gray-200 cursor-not-allowed',
+        label: '',
+        icon: 'text-gray-200',
+        options: 'border-gray-100',
+        filter: '',
+      },
+      false: {
+        root: '',
+        label: '',
+        icon: '',
+        options: '',
+        filter: '',
+      },
+    },
+    invalid: {
+      true: {
+        root: '',
+        label: '',
+        icon: '',
+        options: '',
+        filter: '',
+      },
+      false: {
+        root: '',
+        label: '',
+        icon: '',
+        options: '',
+        filter: '',
+      },
+    },
+  },
+};

package/source/components/ListboxOption.tsx

@@ -0,0 +1,95 @@
+import {
+  ListboxOption as HeadlessListboxOption,
+  type ListboxOptionProps as HeadlessListboxOptionProps,
+} from '@headlessui/react';
+import {
+  type ComponentPropsWithoutRef,
+  type ElementType,
+  type PropsWithChildren,
+  type Ref,
+} from 'react';
+
+import {
+  type ComponentProps,
+  type ComponentTheme,
+  createComponentTheme,
+} from '../theme/internals.js';
+import {Icon} from './Icon.js';
+import {forwardRef} from './internals.js';
+
+export const useListboxOptionTheme = createComponentTheme('ListboxOption', {
+  variants: {disabled: [true, false]},
+  elements: ['root', 'icon'],
+});
+
+const LISTBOX_OPTION_ELEMENT = 'div';
+
+export type ListboxOptionProps<
+  T extends ElementType,
+  V extends boolean | number | string,
+> = PropsWithChildren<
+  ComponentProps<typeof useListboxOptionTheme> &
+    ComponentPropsWithoutRef<T> & {
+      as?: T | undefined;
+      value: V;
+      className?: string;
+    }
+>;
+
+export const ListboxOption = forwardRef(
+  <
+    T extends ElementType = typeof LISTBOX_OPTION_ELEMENT,
+    V extends boolean | number | string = string,
+  >(
+    {
+      disabled = false,
+      as = LISTBOX_OPTION_ELEMENT as T,
+      value,
+      className,
+      children,
+      ...rest
+    }: ListboxOptionProps<T, V>,
+    ref: Ref<HTMLElement>,
+  ) => {
+    let theme = useListboxOptionTheme({disabled});
+
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any -- needed
+    let props: HeadlessListboxOptionProps<any, any> = {
+      as,
+      ref,
+      value,
+      disabled,
+      className: theme.root('cursor-pointer', className),
+      'data-component': 'listbox-option',
+      ...rest,
+    };
+
+    return (
+      <HeadlessListboxOption {...props}>
+        <span className={theme.icon('absolute')}>
+          <Icon name="Check" />
+        </span>
+        {children}
+      </HeadlessListboxOption>
+    );
+  },
+);
+
+export const listboxOptionTheme: ComponentTheme<typeof useListboxOptionTheme> = {
+  classNames: {
+    root: 'relative group/option p-1 pr-6 rounded-1 hover:bg-gray-50 data-[active]:bg-gray-50 text-sm transition-colors',
+    icon: 'hidden group-data-[selected]/option:block right-1 top-1 text-gray-500',
+  },
+  variants: {
+    disabled: {
+      true: {
+        root: 'text-gray-200 cursor-not-allowed',
+        icon: 'text-gray-200',
+      },
+      false: {
+        root: '',
+        icon: '',
+      },
+    },
+  },
+};

package/source/components/Menu.tsx

@@ -0,0 +1,50 @@
+import {Menu as HeadlessMenu, type MenuProps as HeadlessMenuProps} from '@headlessui/react';
+import {
+  type ComponentPropsWithoutRef,
+  type ElementType,
+  Fragment,
+  type PropsWithChildren,
+  type Ref,
+} from 'react';
+
+import {
+  type ComponentProps,
+  type ComponentTheme,
+  createComponentTheme,
+} from '../theme/internals.js';
+import {filterProps, forwardRef} from './internals.js';
+
+export const useMenuTheme = createComponentTheme('Menu');
+
+const MENU_ELEMENT = Fragment;
+
+export type MenuProps<T extends ElementType> = PropsWithChildren<
+  ComponentProps<typeof useMenuTheme> &
+    ComponentPropsWithoutRef<T> & {
+      as?: T | undefined;
+      className?: string;
+    }
+>;
+
+export const Menu = forwardRef(
+  <T extends ElementType = typeof MENU_ELEMENT>(
+    {as = MENU_ELEMENT as unknown as T, className, children, ...rest}: MenuProps<T>,
+    ref: Ref<HTMLElement>,
+  ) => {
+    let theme = useMenuTheme();
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any -- needed because of type of `as`
+    let props: HeadlessMenuProps<any> = filterProps({
+      as,
+      ref,
+      className: theme(null, className),
+      'data-component': 'menu',
+      ...rest,
+    });
+
+    return <HeadlessMenu {...props}>{children}</HeadlessMenu>;
+  },
+);
+
+export const menuTheme: ComponentTheme<typeof useMenuTheme> = {
+  className: null,
+};

package/source/components/MenuButton.tsx

@@ -0,0 +1,69 @@
+import {
+  MenuButton as HeadlessMenuButton,
+  type MenuButtonProps as HeadlessMenuButtonProps,
+} from '@headlessui/react';
+import {
+  type ComponentPropsWithoutRef,
+  type ElementType,
+  type PropsWithChildren,
+  type Ref,
+} from 'react';
+
+import {
+  type ComponentProps,
+  type ComponentTheme,
+  createComponentTheme,
+} from '../theme/internals.js';
+import {filterProps, forwardRef} from './internals.js';
+
+export const useMenuButtonTheme = createComponentTheme('MenuButton', {
+  variants: {
+    disabled: [true, false],
+  },
+});
+
+const MENU_BUTTON_ELEMENT = 'button';
+
+export type MenuButtonProps<T extends ElementType> = PropsWithChildren<
+  ComponentProps<typeof useMenuButtonTheme> &
+    ComponentPropsWithoutRef<T> & {
+      as?: T | undefined;
+      className?: string;
+    }
+>;
+
+export const MenuButton = forwardRef(
+  <T extends ElementType = typeof MENU_BUTTON_ELEMENT>(
+    {
+      disabled = false,
+      as = MENU_BUTTON_ELEMENT as T,
+      className,
+      children,
+      ...rest
+    }: MenuButtonProps<T>,
+    ref: Ref<HTMLElement>,
+  ) => {
+    let theme = useMenuButtonTheme({disabled});
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any -- needed
+    let props: HeadlessMenuButtonProps<any> = filterProps({
+      as,
+      ref,
+      disabled,
+      className: theme(null, className),
+      'data-component': 'menu-button',
+      ...rest,
+    });
+
+    return <HeadlessMenuButton {...props}>{children}</HeadlessMenuButton>;
+  },
+);
+
+export const menuButtonTheme: ComponentTheme<typeof useMenuButtonTheme> = {
+  className: '',
+  variants: {
+    disabled: {
+      true: '',
+      false: '',
+    },
+  },
+};

package/source/components/MenuHeading.tsx

@@ -0,0 +1,52 @@
+import {
+  MenuHeading as HeadlessMenuHeading,
+  type MenuHeadingProps as HeadlessMenuHeadingProps,
+} from '@headlessui/react';
+import {
+  type ComponentPropsWithoutRef,
+  type ElementType,
+  type PropsWithChildren,
+  type Ref,
+} from 'react';
+
+import {
+  type ComponentProps,
+  type ComponentTheme,
+  createComponentTheme,
+} from '../theme/internals.js';
+import {filterProps, forwardRef} from './internals.js';
+
+export const useMenuHeadingTheme = createComponentTheme('MenuHeading');
+
+const MENU_HEADING_ELEMENT = 'div';
+
+export type MenuHeadingProps<T extends ElementType> = PropsWithChildren<
+  ComponentProps<typeof useMenuHeadingTheme> &
+    ComponentPropsWithoutRef<T> & {
+      as?: T | undefined;
+      className?: string;
+    }
+>;
+
+export const MenuHeading = forwardRef(
+  <T extends ElementType = typeof MENU_HEADING_ELEMENT>(
+    {as = MENU_HEADING_ELEMENT as T, className, children, ...rest}: MenuHeadingProps<T>,
+    ref: Ref<HTMLElement>,
+  ) => {
+    let theme = useMenuHeadingTheme();
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any -- needed
+    let props: HeadlessMenuHeadingProps<any> = filterProps({
+      as,
+      ref,
+      className: theme(null, className),
+      'data-component': 'menu-heading',
+      ...rest,
+    });
+
+    return <HeadlessMenuHeading {...props}>{children}</HeadlessMenuHeading>;
+  },
+);
+
+export const menuHeadingTheme: ComponentTheme<typeof useMenuHeadingTheme> = {
+  className: '',
+};