willa-workspace 0.0.3-alpha.2739b3e

package/packages/willa-form/src/components/Picker/index.css

@@ -0,0 +1,323 @@
+.willa-picker {
+  position: relative;
+  display: inline-flex;
+  width: fit-content;
+  max-width: 100%;
+  color: var(--willa-picker-text);
+  vertical-align: middle;
+}
+
+.willa-picker-trigger {
+  display: inline-flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+  min-width: 0;
+  border: 1px solid var(--willa-picker-border);
+  border-radius: 0.65rem;
+  background: var(--willa-picker-bg);
+  color: var(--willa-picker-text);
+  font: inherit;
+  font-weight: 520;
+  line-height: 1.35;
+  text-align: left;
+  cursor: pointer;
+  outline: none;
+  transition:
+    border-color 160ms ease,
+    background 160ms ease,
+    box-shadow 160ms ease;
+}
+
+.willa-picker--sm .willa-picker-trigger {
+  min-height: 2rem;
+  gap: 0.42rem;
+  padding: 0.34rem 0.54rem;
+  font-size: 0.8rem;
+}
+
+.willa-picker--md .willa-picker-trigger {
+  min-height: 2.45rem;
+  gap: 0.54rem;
+  padding: 0.46rem 0.68rem;
+  font-size: 0.9rem;
+}
+
+.willa-picker--lg .willa-picker-trigger {
+  min-height: 2.85rem;
+  gap: 0.62rem;
+  padding: 0.58rem 0.78rem;
+  font-size: 0.98rem;
+}
+
+.willa-picker--soft .willa-picker-trigger {
+  background: var(--willa-picker-soft-bg);
+}
+
+.willa-picker-trigger:hover {
+  border-color: var(--willa-picker-border-hover);
+  background: var(--willa-picker-bg-hover);
+}
+
+.willa-picker--open .willa-picker-trigger,
+.willa-picker-trigger:focus-visible {
+  border-color: var(--willa-picker-border-focus);
+  box-shadow: 0 0 0 3px var(--willa-picker-ring);
+}
+
+.willa-picker--invalid .willa-picker-trigger {
+  border-color: var(--willa-input-invalid-border);
+  box-shadow: 0 0 0 3px var(--willa-input-invalid-ring);
+}
+
+.willa-picker--disabled {
+  color: var(--willa-input-disabled-text);
+}
+
+.willa-picker--disabled .willa-picker-trigger {
+  border-color: var(--willa-picker-border);
+  background: var(--willa-input-disabled-bg);
+  color: var(--willa-input-disabled-text);
+  cursor: not-allowed;
+}
+
+.willa-picker-value {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.willa-picker--has-clear .willa-picker-value {
+  padding-right: 1.35rem;
+}
+
+.willa-picker-value--placeholder {
+  color: var(--willa-picker-placeholder);
+  font-weight: 450;
+}
+
+.willa-picker-clear,
+.willa-picker-icon {
+  flex: 0 0 auto;
+  color: var(--willa-picker-muted);
+}
+
+.willa-picker-clear {
+  position: absolute;
+  top: 50%;
+  right: 1.85rem;
+  z-index: 1;
+  display: inline-grid;
+  width: 1.15rem;
+  height: 1.15rem;
+  place-items: center;
+  padding: 0;
+  border: 0;
+  border-radius: 0.34rem;
+  background: transparent;
+  font: inherit;
+  transform: translateY(-50%);
+  cursor: pointer;
+}
+
+.willa-picker-clear:hover,
+.willa-picker-clear:focus-visible {
+  background: var(--willa-picker-clear-bg-hover);
+  color: var(--willa-picker-text);
+}
+
+.willa-picker-clear:focus-visible {
+  outline: 2px solid var(--willa-picker-border-focus);
+  outline-offset: 2px;
+}
+
+.willa-picker-icon {
+  width: 1rem;
+  height: 1rem;
+  transition: transform 160ms ease;
+}
+
+.willa-picker--open .willa-picker-icon {
+  transform: rotate(180deg);
+}
+
+.willa-picker-panel {
+  position: fixed;
+  z-index: var(--willa-layer-popover, 1000);
+  display: flex;
+  flex-direction: column;
+  gap: 0.42rem;
+  box-sizing: border-box;
+  max-height: min(22rem, calc(100vh - 1rem));
+  padding: 0.42rem;
+  overflow: hidden;
+  border: 1px solid var(--willa-picker-panel-border);
+  border-radius: 0.78rem;
+  background: var(--willa-picker-panel-bg);
+  box-shadow: var(--willa-picker-panel-shadow);
+  color: var(--willa-picker-text);
+}
+
+.willa-picker-search {
+  padding: 0.14rem;
+}
+
+.willa-picker-search input {
+  width: 100%;
+  min-width: 0;
+  border: 1px solid var(--willa-picker-border);
+  border-radius: 0.55rem;
+  background: var(--willa-picker-bg);
+  color: var(--willa-picker-text);
+  font: inherit;
+  font-size: 0.85rem;
+  outline: none;
+  padding: 0.48rem 0.56rem;
+}
+
+.willa-picker-search input::placeholder {
+  color: var(--willa-picker-placeholder);
+}
+
+.willa-picker-search input:focus {
+  border-color: var(--willa-picker-border-focus);
+  box-shadow: 0 0 0 3px var(--willa-picker-ring);
+}
+
+.willa-picker-list {
+  display: grid;
+  flex: 1 1 auto;
+  gap: 0.24rem;
+  min-height: 0;
+  overflow-y: auto;
+  overscroll-behavior: contain;
+}
+
+.willa-picker-list--scrollable {
+  padding-right: 0.75rem;
+  margin-right: -0.18rem;
+  scrollbar-gutter: stable;
+  scrollbar-width: thin;
+  scrollbar-color: var(--willa-form-scrollbar-thumb) transparent;
+  -ms-overflow-style: auto;
+}
+
+.willa-picker-list--scrollable::-webkit-scrollbar {
+  width: 0.36rem;
+  height: 0.36rem;
+}
+
+.willa-picker-list--scrollable::-webkit-scrollbar-track,
+.willa-picker-list--scrollable::-webkit-scrollbar-track-piece,
+.willa-picker-list--scrollable::-webkit-scrollbar-corner {
+  background: transparent;
+}
+
+.willa-picker-list--scrollable::-webkit-scrollbar-thumb {
+  border-radius: 999px;
+  background: var(--willa-form-scrollbar-thumb);
+}
+
+.willa-picker-group {
+  display: grid;
+  gap: 0.18rem;
+}
+
+.willa-picker-group + .willa-picker-group {
+  padding-top: 0.35rem;
+  border-top: 1px solid var(--willa-picker-divider);
+}
+
+.willa-picker-group-label {
+  padding: 0.25rem 0.42rem;
+  color: var(--willa-picker-muted);
+  font-size: 0.72rem;
+  font-weight: 650;
+}
+
+.willa-picker-option {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.75rem;
+  width: 100%;
+  min-width: 0;
+  border: 0;
+  border-radius: 0.58rem;
+  background: transparent;
+  color: var(--willa-picker-text);
+  font: inherit;
+  text-align: left;
+  cursor: pointer;
+  padding: 0.48rem 0.54rem;
+}
+
+.willa-picker-option:hover {
+  background: var(--willa-picker-option-bg-hover);
+}
+
+.willa-picker-option:focus-visible {
+  outline: 2px solid var(--willa-picker-border-focus);
+  outline-offset: 2px;
+}
+
+.willa-picker-option:disabled {
+  color: var(--willa-input-disabled-text);
+  cursor: not-allowed;
+}
+
+.willa-picker-option--selected {
+  background: var(--willa-picker-option-bg-selected);
+  color: var(--willa-picker-selected-text);
+}
+
+.willa-picker-option-main {
+  display: grid;
+  min-width: 0;
+  gap: 0.12rem;
+}
+
+.willa-picker-option-label,
+.willa-picker-option-description {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.willa-picker-option-label {
+  font-size: 0.88rem;
+  font-weight: 610;
+}
+
+.willa-picker-option-description {
+  color: var(--willa-picker-muted);
+  font-size: 0.75rem;
+}
+
+.willa-picker-option-check {
+  display: inline-grid;
+  flex: 0 0 auto;
+  width: 1.08rem;
+  height: 1.08rem;
+  place-items: center;
+  color: var(--willa-picker-selected-mark);
+}
+
+.willa-picker-empty {
+  padding: 1.4rem 0.75rem;
+  color: var(--willa-picker-muted);
+  font-size: 0.85rem;
+  text-align: center;
+}
+
+@media (max-width: 640px) {
+  .willa-picker-panel {
+    border-radius: 0.68rem;
+  }
+
+  .willa-picker-option {
+    padding-block: 0.58rem;
+  }
+}

package/packages/willa-form/src/components/Picker/index.tsx

@@ -0,0 +1,359 @@
+import {
+  forwardRef,
+  useMemo,
+  type ButtonHTMLAttributes,
+  type CSSProperties,
+  type ReactNode,
+} from "react";
+import { CheckIcon } from "@radix-ui/react-icons";
+import { assignRef } from "@willa-ui/shared";
+import classNames from "classnames";
+
+import { handleSelectablePanelKeyDown } from "#form/internal/selectablePanelKeyboard";
+import {
+  SelectablePanelList,
+  SelectablePanelPortal,
+  SelectablePanelSearch,
+  SelectablePanelShell,
+} from "#form/internal/selectablePanelParts";
+import { ComboboxField } from "#form/internal/comboboxField";
+import { useComboboxState } from "#form/internal/useComboboxState";
+
+export type PickerSize = "sm" | "md" | "lg";
+export type PickerVariant = "outline" | "soft";
+export type PickerMode = "single" | "multiple";
+
+export type PickerItem = {
+  value: string;
+  label: ReactNode;
+  description?: ReactNode;
+  group?: ReactNode;
+  disabled?: boolean;
+};
+
+export type PickerProps = Omit<
+  ButtonHTMLAttributes<HTMLButtonElement>,
+  "children" | "defaultValue" | "onChange" | "value"
+> & {
+  items: Array<PickerItem>;
+  mode?: PickerMode;
+  size?: PickerSize;
+  variant?: PickerVariant;
+  width?: CSSProperties["width"];
+  invalid?: boolean;
+  searchable?: boolean;
+  clearable?: boolean;
+  placeholder?: string;
+  searchPlaceholder?: string;
+  emptyText?: ReactNode;
+  name?: string;
+  value?: string | Array<string>;
+  defaultValue?: string | Array<string>;
+  renderValue?: (items: Array<PickerItem>) => ReactNode;
+  onValueChange?: (
+    value: string | Array<string>,
+    items: Array<PickerItem>,
+  ) => void;
+};
+
+const pickerOptionSelector = ".willa-picker-option";
+
+export const Picker = forwardRef<HTMLButtonElement, PickerProps>(
+  (props, ref) => {
+    const {
+      items,
+      mode = "single",
+      size = "md",
+      variant = "outline",
+      width,
+      invalid = false,
+      searchable = false,
+      clearable = false,
+      placeholder = "请选择",
+      searchPlaceholder = "搜索选项",
+      emptyText = "暂无选项",
+      name,
+      value,
+      defaultValue,
+      renderValue,
+      onValueChange,
+      className,
+      disabled,
+      style,
+      id,
+      onBlur,
+      onClick,
+      onKeyDown,
+      ...buttonProps
+    } = props;
+    const {
+      clearValue,
+      commitItem,
+      displayValue,
+      hasValue,
+      hiddenValue,
+      buttonId,
+      closePanel,
+      listRef,
+      open,
+      panelId,
+      panelRef,
+      position,
+      query,
+      rootRef,
+      scrollable,
+      searchRef,
+      setOpen,
+      setQuery,
+      triggerRef,
+      handleTriggerKeyDown,
+      selectedValues,
+    } = useComboboxState({
+      defaultValue,
+      items,
+      mode,
+      onValueChange,
+      placeholder,
+      renderValue,
+      value,
+      contentVersion: items,
+      fallbackHeight: 320,
+      id,
+      minWidth: 280,
+      searchable,
+    });
+    const pickerStyle = getPickerStyle({ width, style });
+    const filteredItems = useMemo(
+      () => filterPickerItems(items, query),
+      [items, query],
+    );
+    const groupedItems = useMemo(
+      () => groupPickerItems(filteredItems),
+      [filteredItems],
+    );
+    const isInvalid =
+      invalid ||
+      buttonProps["aria-invalid"] === true ||
+      buttonProps["aria-invalid"] === "true";
+    const hasClear = clearable && hasValue && !disabled;
+
+    const setButtonRef = (node: HTMLButtonElement | null) => {
+      triggerRef.current = node;
+      assignRef(ref, node);
+    };
+
+    const selectItem = (item: PickerItem) => {
+      const committed = commitItem(item);
+
+      if (committed && mode === "single") {
+        setOpen(false);
+      }
+    };
+
+    const panel = (
+      <SelectablePanelPortal open={open}>
+        <SelectablePanelShell
+          panelRef={panelRef}
+          id={panelId}
+          className="willa-picker-panel"
+          role="listbox"
+          multiselectable={mode === "multiple"}
+          labelledBy={buttonId}
+          position={position}
+          onKeyDown={(event) =>
+            handleSelectablePanelKeyDown(event, {
+              panel: panelRef.current,
+              selector: pickerOptionSelector,
+              onClose: closePanel,
+              trigger: triggerRef.current,
+            })
+          }
+        >
+          {searchable ? (
+            <SelectablePanelSearch
+              className="willa-picker-search"
+              inputRef={searchRef}
+              value={query}
+              placeholder={searchPlaceholder}
+              onChange={(event) => setQuery(event.currentTarget.value)}
+            />
+          ) : null}
+          <SelectablePanelList
+            listRef={listRef}
+            className="willa-picker-list"
+            scrollableClassName="willa-picker-list--scrollable"
+            scrollable={scrollable}
+          >
+            {groupedItems.length > 0 ? (
+              groupedItems.map((group) => (
+                <div className="willa-picker-group" key={group.key}>
+                  {group.label ? (
+                    <div className="willa-picker-group-label">
+                      {group.label}
+                    </div>
+                  ) : null}
+                  {group.items.map((item) => {
+                    const selected = selectedValues.includes(item.value);
+
+                    return (
+                      <button
+                        key={item.value}
+                        type="button"
+                        className={classNames(
+                          "willa-picker-option",
+                          selected && "willa-picker-option--selected",
+                        )}
+                        role="option"
+                        aria-selected={selected}
+                        disabled={item.disabled}
+                        onClick={() => selectItem(item)}
+                      >
+                        <span className="willa-picker-option-main">
+                          <span className="willa-picker-option-label">
+                            {item.label}
+                          </span>
+                          {item.description ? (
+                            <span className="willa-picker-option-description">
+                              {item.description}
+                            </span>
+                          ) : null}
+                        </span>
+                        <span
+                          className="willa-picker-option-check"
+                          aria-hidden="true"
+                        >
+                          {selected ? <CheckIcon /> : null}
+                        </span>
+                      </button>
+                    );
+                  })}
+                </div>
+              ))
+            ) : (
+              <div className="willa-picker-empty">{emptyText}</div>
+            )}
+          </SelectablePanelList>
+        </SelectablePanelShell>
+      </SelectablePanelPortal>
+    );
+
+    return (
+      <ComboboxField
+        rootRef={rootRef}
+        className={classNames(
+          "willa-picker",
+          `willa-picker--${size}`,
+          `willa-picker--${variant}`,
+          open && "willa-picker--open",
+          isInvalid && "willa-picker--invalid",
+          hasClear && "willa-picker--has-clear",
+          disabled && "willa-picker--disabled",
+          className,
+        )}
+        style={pickerStyle}
+        triggerProps={buttonProps}
+        buttonRef={setButtonRef}
+        buttonId={buttonId}
+        panelId={panelId}
+        popupRole="listbox"
+        expanded={open}
+        hasValue={hasValue}
+        invalid={isInvalid}
+        disabled={disabled}
+        controls={open ? panelId : undefined}
+        displayValue={displayValue}
+        placeholderClassName="willa-picker-value--placeholder"
+        triggerClassName="willa-picker-trigger"
+        valueClassName="willa-picker-value"
+        iconClassName="willa-picker-icon"
+        hasClear={hasClear}
+        clearClassName="willa-picker-clear"
+        clearLabel="清空选择"
+        triggerRef={triggerRef}
+        hiddenName={name}
+        hiddenValue={hiddenValue}
+        onClear={clearValue}
+        onTriggerBlur={onBlur}
+        onTriggerClick={(event) => {
+          onClick?.(event);
+          if (!event.defaultPrevented) setOpen((currentOpen) => !currentOpen);
+        }}
+        onTriggerKeyDown={(event) =>
+          handleTriggerKeyDown(event, {
+            selector: pickerOptionSelector,
+            onKeyDown,
+          })
+        }
+      >
+        {panel}
+      </ComboboxField>
+    );
+  },
+);
+
+Picker.displayName = "Picker";
+
+const filterPickerItems = (items: Array<PickerItem>, query: string) => {
+  const normalizedQuery = query.trim().toLowerCase();
+  if (!normalizedQuery) return items;
+
+  return items.filter((item) => {
+    const labelText = getTextValue(item.label).toLowerCase();
+    const descriptionText = getTextValue(item.description).toLowerCase();
+
+    return (
+      labelText.includes(normalizedQuery) ||
+      descriptionText.includes(normalizedQuery)
+    );
+  });
+};
+
+const groupPickerItems = (items: Array<PickerItem>) => {
+  const groups: Array<{
+    key: string;
+    label?: ReactNode;
+    items: Array<PickerItem>;
+  }> = [];
+
+  items.forEach((item) => {
+    const key = getTextValue(item.group) || "__default";
+    const group = groups.find((entry) => entry.key === key);
+
+    if (group) {
+      group.items.push(item);
+      return;
+    }
+
+    groups.push({
+      key,
+      label: item.group,
+      items: [item],
+    });
+  });
+
+  return groups;
+};
+
+const getTextValue = (value: ReactNode): string => {
+  if (value === null || value === undefined || typeof value === "boolean") {
+    return "";
+  }
+  if (typeof value === "string" || typeof value === "number") {
+    return String(value);
+  }
+  if (Array.isArray(value)) {
+    return value.map(getTextValue).join(" ");
+  }
+  return "";
+};
+
+const getPickerStyle = ({
+  width,
+  style,
+}: {
+  width?: CSSProperties["width"];
+  style?: CSSProperties;
+}) => {
+  if (width === undefined) return style;
+  return { ...style, width };
+};