@dxos/react-ui 0.3.7-main.fcec8cd → 0.3.7

package/src/components/ComboBox/ComboBox.stories.tsx

@@ -1,82 +0,0 @@
-//
-// Copyright 2023 DXOS.org
-//
-
-import '@dxosTheme';
-
-import { faker } from '@faker-js/faker';
-import React, { type FC, useEffect, useState } from 'react';
-
-import { ComboBox, type ComboBoxItem } from './ComboBox';
-
-type TestItem = { id: string; text: string };
-
-const data: TestItem[] = faker.helpers
-  .uniqueArray(faker.definitions.animal.fish, 100)
-  .sort()
-  .map((text) => ({
-    id: faker.string.uuid(),
-    text,
-  }));
-
-const ComboBoxStory: FC<{ data: TestItem[] }> = ({ data = [] }) => {
-  const [filter, setFilter] = useState<string>();
-  const [items, setItems] = useState<ComboBoxItem[]>([]);
-  const [selected, setSelected] = useState<ComboBoxItem>();
-  useEffect(() => {
-    setItems(() =>
-      filter?.length
-        ? data
-            .filter((item) => item.text?.length && item.text?.toLowerCase().includes(filter.toLowerCase()))
-            .map((item) => ({ id: item.id, label: item.text, data: item }))
-        : [],
-    );
-  }, [filter]);
-
-  return (
-    <div className='flex flex-col w-full bg-neutral-100 dark:bg-neutral-800'>
-      <ComboBox.Root items={items} onChange={setSelected} onInputChange={setFilter}>
-        <ComboBox.Input placeholder={'Select...'} />
-        <ComboBox.Content>
-          {items?.map((item) => (
-            <ComboBox.Item key={item.id} item={item}>
-              {item.label}
-            </ComboBox.Item>
-          ))}
-        </ComboBox.Content>
-      </ComboBox.Root>
-
-      <div className='mt-16 p-2 font-mono text-xs truncate'>
-        <div>{selected?.label}</div>
-      </div>
-    </div>
-  );
-};
-
-export default {
-  component: ComboBoxStory,
-  decorators: [
-    (Story: any) => (
-      <div className='flex flex-col items-center h-screen w-full overflow-hidden'>
-        <div className='flex w-60 m-8 bg-white'>
-          <Story />
-        </div>
-      </div>
-    ),
-  ],
-  parameters: {
-    layout: 'fullscreen',
-  },
-};
-
-// TODO(burdon): Test controlled and uncontrolled.
-
-export const Default = {
-  args: {
-    data,
-  },
-};
-
-export const Empty = {
-  args: {},
-};

package/src/components/ComboBox/ComboBox.tsx

@@ -1,218 +0,0 @@
-//
-// Copyright 2023 DXOS.org
-//
-
-import { CaretDown, CaretUp } from '@phosphor-icons/react';
-import { createContextScope, type Scope } from '@radix-ui/react-context';
-import { createPopperScope } from '@radix-ui/react-popper';
-import * as PopperPrimitive from '@radix-ui/react-popper';
-import { useCombobox, type UseComboboxReturnValue } from 'downshift';
-import React, { forwardRef, type PropsWithChildren } from 'react';
-
-import { useThemeContext } from '../../hooks';
-import { type ThemedClassName } from '../../util';
-import { Button } from '../Buttons';
-import { Input } from '../Input';
-
-const COMBOBOX_NAME = 'ComboBox';
-
-type ScopedProps<P> = P & { __scopeComboBox?: Scope };
-
-type ComboBoxItem = {
-  id: string;
-  label: string;
-  data?: any;
-};
-
-type ComboBoxContextValue = {
-  items: ComboBoxItem[];
-} & UseComboboxReturnValue<ComboBoxItem>;
-
-const usePopperScope = createPopperScope();
-const [createComboBoxContext] = createContextScope(COMBOBOX_NAME, [createPopperScope]);
-const [ComboBoxProvider, useComboBoxContext] = createComboBoxContext<ComboBoxContextValue>(COMBOBOX_NAME);
-
-type ComboBoxRootProps = ThemedClassName<
-  ScopedProps<
-    PropsWithChildren<{
-      items?: ComboBoxItem[];
-      value?: ComboBoxItem;
-      onChange?: (selected: ComboBoxItem | undefined) => void;
-      onInputChange?: (text?: string) => void;
-    }>
-  >
->;
-
-/**
- * Type-ahead combobox.
- */
-const ComboBoxRoot = ({
-  __scopeComboBox,
-  children,
-  classNames,
-  items = [],
-  value,
-  onChange,
-  onInputChange,
-}: ComboBoxRootProps) => {
-  const { tx } = useThemeContext();
-  const popperScope = usePopperScope(__scopeComboBox);
-
-  // TODO(burdon): Remove and implement natively?
-  // https://www.downshift-js.com/use-combobox
-  const comboProps = useCombobox<ComboBoxItem>({
-    items,
-    itemToString: (selectedItem) => selectedItem?.label ?? '',
-    onInputValueChange: ({ inputValue }) => onInputChange?.(inputValue),
-    selectedItem: value ?? null,
-    onSelectedItemChange: ({ selectedItem }) => onChange?.(selectedItem === null ? undefined : selectedItem),
-  });
-
-  return (
-    <ComboBoxProvider scope={__scopeComboBox} items={items} {...comboProps}>
-      <PopperPrimitive.Root {...popperScope}>
-        <div className={tx('combobox.root', 'combobox__root', {}, classNames)}>{children}</div>
-      </PopperPrimitive.Root>
-    </ComboBoxProvider>
-  );
-};
-
-//
-// Input
-//
-
-const INPUT_NAME = 'ComboBoxInput';
-
-type ComboBoxInputProps = ThemedClassName<
-  ScopedProps<
-    PropsWithChildren<{
-      placeholder?: string;
-    }>
-  >
->;
-
-const ComboBoxInput = forwardRef<HTMLDivElement, ComboBoxInputProps>(
-  ({ __scopeComboBox, classNames, placeholder }: ComboBoxInputProps, forwardedRef) => {
-    const { tx } = useThemeContext();
-    const popperScope = usePopperScope(__scopeComboBox);
-    const { getInputProps, getToggleButtonProps, isOpen } = useComboBoxContext(INPUT_NAME, __scopeComboBox);
-
-    // TODO(burdon): Break out input and button.
-    return (
-      <PopperPrimitive.Anchor asChild {...popperScope} ref={forwardedRef}>
-        {/* TODO(burdon): Move class to theme. */}
-        <div role='none' className='flex items-center gap-1'>
-          <Input.Root>
-            <Input.TextInput
-              {...getInputProps()}
-              placeholder={placeholder}
-              variant='subdued'
-              classNames={tx('combobox.input', 'combobox__input', {}, classNames)}
-            />
-          </Input.Root>
-          <Button
-            {...getToggleButtonProps()}
-            aria-label='toggle menu'
-            variant='ghost'
-            classNames={tx('combobox.button', 'combobox__button')}
-          >
-            {(isOpen && <CaretUp />) || <CaretDown />}
-          </Button>
-        </div>
-      </PopperPrimitive.Anchor>
-    );
-  },
-);
-
-//
-// Content
-//
-
-const CONTENT_NAME = 'ComboBoxContent';
-
-type ComboBoxContentProps = ThemedClassName<ScopedProps<PropsWithChildren<{}>>>;
-
-const ComboBoxContent = forwardRef<HTMLDivElement, ComboBoxContentProps>(
-  ({ __scopeComboBox, classNames, children }: ComboBoxContentProps, forwardedRef) => {
-    const { tx } = useThemeContext();
-    const popperScope = usePopperScope(__scopeComboBox);
-    const { getMenuProps, isOpen } = useComboBoxContext(CONTENT_NAME, __scopeComboBox);
-
-    return (
-      <PopperPrimitive.Content
-        data-state={isOpen}
-        role='dialog'
-        {...popperScope}
-        ref={forwardedRef}
-        style={
-          {
-            // Re-namespace exposed content custom properties.
-            ...{
-              '--radix-combobox-content-transform-origin': 'var(--radix-popper-transform-origin)',
-              '--radix-combobox-content-available-width': 'var(--radix-popper-available-width)',
-              '--radix-combobox-content-available-height': 'var(--radix-popper-available-height)',
-              '--radix-combobox-trigger-width': 'var(--radix-popper-anchor-width)',
-              '--radix-combobox-trigger-height': 'var(--radix-popper-anchor-height)',
-            },
-          } as any // TODO(burdon): Why any?
-        }
-      >
-        <ul {...getMenuProps()} className={tx('combobox.content', 'combobox__content', {}, classNames)}>
-          {isOpen && children}
-        </ul>
-      </PopperPrimitive.Content>
-    );
-  },
-);
-
-//
-// Item
-//
-
-const ITEM_NAME = 'ComboBoxItem';
-
-type ComboBoxItemProps = ThemedClassName<
-  ScopedProps<
-    PropsWithChildren<{
-      item: ComboBoxItem;
-    }>
-  >
->;
-
-const ComboBoxItem = forwardRef<HTMLLIElement, ComboBoxItemProps>(
-  ({ __scopeComboBox, classNames, children, item }, forwardedRef) => {
-    const { tx } = useThemeContext();
-    const { getItemProps, items, selectedItem, highlightedIndex } = useComboBoxContext(ITEM_NAME, __scopeComboBox);
-
-    return (
-      <li
-        ref={forwardedRef}
-        data-selected={selectedItem?.id === item.id ? 'true' : undefined}
-        data-highlighted={
-          highlightedIndex !== undefined && items[highlightedIndex]?.id === item.id ? 'true' : undefined
-        }
-        className={tx('combobox.item', 'item', {}, classNames)}
-        {...getItemProps({ item })}
-      >
-        {children}
-      </li>
-    );
-  },
-);
-
-// prettier-ignore
-export const ComboBox = {
-  Root: ComboBoxRoot,
-  Input: ComboBoxInput,
-  Content: ComboBoxContent,
-  Item: ComboBoxItem
-};
-
-// prettier-ignore
-export type {
-  ComboBoxItem,
-  ComboBoxRootProps,
-  ComboBoxInputProps,
-  ComboBoxContentProps,
-  ComboBoxItemProps
-};

package/src/components/ComboBox/index.ts

@@ -1,5 +0,0 @@
-//
-// Copyright 2022 DXOS.org
-//
-
-export * from './ComboBox';