Add select widget for plone 7

packages/components/src/tailwind/Select/Select.stories.tsx

@@ -0,0 +1,34 @@
+import React from 'react';
+import { Select } from './Select';
+
+export default {
+  title: 'Tailwind/Select',
+  component: Select,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+  argTypes: {},
+  args: {},
+};
+
+const software = [
+  { id: 1, name: 'Adobe Photoshop' },
+  { id: 2, name: 'Sketch' },
+  { id: 3, name: 'Figma' },
+  { id: 4, name: 'Adobe XD' },
+  { id: 5, name: 'InVision' },
+];
+
+export const Default = (args: any) => {
+  return (
+    <div className="w-full max-w-[400px]">
+      <Select label="Software" items={software} />
+    </div>
+  );
+};
+
+Default.args = {
+  label: 'Software',
+  items: software,
+};

packages/components/src/tailwind/Select/Select.tsx

@@ -0,0 +1,199 @@
+import React from 'react';
+import { Description, FieldError, Label } from '../Field/Field';
+import { composeTailwindRenderProps, focusRing } from '../utils';
+import { ChevrondownIcon } from '../../components/icons/ChevrondownIcon';
+import { CheckboxIcon } from '../../components/icons/CheckboxIcon';
+
+import type {
+  ListBoxProps,
+  PopoverProps,
+  SelectProps as AriaSelectProps,
+  ValidationResult,
+  Key,
+} from 'react-aria-components';
+import {
+  Button,
+  Select as AriaSelect,
+  SelectValue,
+  composeRenderProps,
+  Popover,
+  Dialog,
+  ListBoxItem,
+  ListBox,
+} from 'react-aria-components';
+import { tv } from 'tailwind-variants';
+
+export type Option = {
+  id: Key;
+  name: string;
+};
+
+const selectTriggerStyles = tv({
+  extend: focusRing,
+  base: [
+    'btr border-input flex h-10 w-full cursor-default items-center gap-4 gap-x-2 rounded-lg border py-2 pr-2 pl-3 text-start shadow-[inset_0_1px_0_0_rgba(255,255,255,0.1)] transition group-disabled:opacity-50 **:data-[slot=icon]:size-4 dark:shadow-none',
+    'group-data-open:border-ring/70 group-data-open:ring-ring/20 group-data-open:ring-4',
+    'text-fg group-invalid:border-danger group-invalid:ring-danger/20 forced-colors:group-invalid:border-[Mark]',
+  ],
+  variants: {
+    isDisabled: {
+      true: 'opacity-50 forced-colors:border-[GrayText] forced-colors:text-[GrayText]',
+    },
+  },
+});
+
+interface SelectTriggerProps extends React.ComponentProps<typeof Button> {
+  className?: string;
+}
+
+const SelectTrigger = ({ className }: SelectTriggerProps) => {
+  return (
+    <Button
+      className={composeRenderProps(className, (className, renderProps) =>
+        selectTriggerStyles({
+          ...renderProps,
+          className,
+        }),
+      )}
+    >
+      <SelectValue className="data-placeholder:text-muted-fg grid flex-1 grid-cols-[auto_1fr] items-center text-base" />
+      <ChevrondownIcon
+        aria-hidden
+        className="text-muted-fg group-data-open:text-fg size-4 shrink-0 duration-300 group-disabled:opacity-50 group-data-open:rotate-180 forced-colors:text-[ButtonText] forced-colors:group-disabled:text-[GrayText]"
+      />
+    </Button>
+  );
+};
+
+const content = tv({
+  base: [
+    'bg-overlay text-overlay-fg max-w-xs rounded-xl border bg-clip-padding shadow-xs transition-transform [scrollbar-width:thin] sm:max-w-3xl sm:text-sm dark:backdrop-saturate-200 forced-colors:bg-[Canvas] [&::-webkit-scrollbar]:size-0.5',
+  ],
+  variants: {
+    isEntering: {
+      true: [
+        'fade-in animate-in duration-150 ease-out',
+        'data-[placement=left]:slide-in-from-right-1 data-[placement=right]:slide-in-from-left-1 data-[placement=top]:slide-in-from-bottom-1 data-[placement=bottom]:slide-in-from-top-1',
+      ],
+    },
+    isExiting: {
+      true: [
+        'fade-out animate-out duration-100 ease-in',
+        'data-[placement=left]:slide-out-to-right-1 data-[placement=right]:slide-out-to-left-1 data-[placement=top]:slide-out-to-bottom-1 data-[placement=bottom]:slide-out-to-top-1',
+      ],
+    },
+  },
+});
+
+interface SelectListProps<T extends Option>
+  extends Omit<ListBoxProps<T>, 'layout' | 'orientation'>,
+    Pick<PopoverProps, 'placement'> {
+  items?: Iterable<T>;
+  listBoxclassName?:
+    | string
+    | ((values: { defaultClassName?: string }) => string);
+  popoverClassname?:
+    | string
+    | ((values: { defaultClassName?: string }) => string);
+}
+
+const SelectList = <T extends Option>({
+  items,
+  listBoxclassName,
+  popoverClassname,
+  placement = 'bottom',
+  ...props
+}: SelectListProps<T>) => {
+  return (
+    <Popover
+      className={composeRenderProps(
+        popoverClassname,
+        (popoverClassname, renderProps) =>
+          content({
+            ...renderProps,
+            className: popoverClassname,
+          }),
+      )}
+      placement={placement}
+    >
+      <Dialog role="dialog">
+        <ListBox
+          layout="stack"
+          orientation="vertical"
+          className={composeTailwindRenderProps(
+            listBoxclassName,
+            'grid max-h-96 max-h-[inherit] w-full min-w-56 min-w-[inherit] scroll-py-1 grid-cols-[auto_1fr] border-0 shadow-none',
+          )}
+          items={items}
+          {...props}
+        >
+          {(item) => (
+            <ListBoxItem
+              key={item.id}
+              id={item.id}
+              textValue={item.name}
+              className="col-span-2 grid cursor-pointer grid-cols-[auto_1fr] items-center rounded-md px-3 py-2 text-gray-700 hover:bg-gray-100 focus:bg-gray-100 focus:outline-none data-[focused]:bg-gray-100 supports-[grid-template-columns:subgrid]:grid-cols-subgrid"
+            >
+              {({ isSelected }) => (
+                <>
+                  {isSelected && (
+                    <CheckboxIcon size="xs" className="mr-3 shrink-0" />
+                  )}
+                  <span className="col-start-2">{item.name}</span>
+                </>
+              )}
+            </ListBoxItem>
+          )}
+        </ListBox>
+      </Dialog>
+    </Popover>
+  );
+};
+
+interface SelectProps<T extends Option> extends AriaSelectProps<T> {
+  label?: string;
+  description?: string;
+  errorMessage?: string | ((validation: ValidationResult) => string);
+  items?: Iterable<T>;
+  className?: string;
+  listBoxclassName?:
+    | string
+    | ((values: { defaultClassName?: string }) => string);
+  popoverClassname?:
+    | string
+    | ((values: { defaultClassName?: string }) => string);
+  placement?: PopoverProps['placement'];
+}
+
+export const Select = <T extends Option>({
+  label,
+  description,
+  errorMessage,
+  className,
+  items,
+  listBoxclassName,
+  popoverClassname,
+  placement,
+  ...props
+}: SelectProps<T>) => {
+  return (
+    <AriaSelect
+      {...props}
+      className={composeTailwindRenderProps(
+        className,
+        'group selct-value my-classname flex w-full flex-col gap-y-1.5',
+      )}
+    >
+      {label && <Label>{label}</Label>}
+      <SelectTrigger />
+      <SelectList
+        items={items}
+        listBoxclassName={listBoxclassName}
+        popoverClassname={popoverClassname}
+        placement={placement}
+      />
+      {description && <Description>{description}</Description>}
+      <FieldError>{errorMessage}</FieldError>
+    </AriaSelect>
+  );
+};