@backmatter/studio 0.0.16 → 0.0.18

package/src/ui/Input.tsx

@@ -1,5 +1,5 @@
 // packages/studio/src/ui/Input.tsx
-import type { ComponentPropsWithoutRef } from "react";
+import { useState, type ComponentPropsWithoutRef } from "react";
 import { Input as BaseInput } from "@base-ui/react/input";
 import { Select as BaseSelect } from "@base-ui/react/select";
 import * as stylex from "@stylexjs/stylex";
@@ -9,7 +9,7 @@ import { cx, popup, popupClassName } from "./popup";
 type Props = Omit<ComponentPropsWithoutRef<"input">, "className" | "style">;
 
 export function Input(props: Props) {
-  return <BaseInput {...props} {...stylex.props(styles.input)} />;
+  return <BaseInput {...stylex.props(styles.input, styles.inputFocus)} {...props} />;
 }
 
 export type SelectOption = { value: string; label: string; disabled?: boolean };
@@ -22,6 +22,9 @@ export function Select({
   placeholder = "Select…",
   name,
   disabled,
+  chip = false,
+  clearable = false,
+  searchable = false,
   "aria-label": ariaLabel,
   id,
 }: {
@@ -31,34 +34,100 @@ export function Select({
   placeholder?: string;
   name?: string;
   disabled?: boolean;
+  /** Selected value sits in the field as a removable chip. */
+  chip?: boolean;
+  /** Chip × and the field clear control clear the value. Ignored when `chip` is false. */
+  clearable?: boolean;
+  /** Filter the menu by label or value. The closed field stays a select. */
+  searchable?: boolean;
   "aria-label"?: string;
   id?: string;
 }) {
+  const selected = options.find((opt) => opt.value === value) ?? null;
+  const [search, setSearch] = useState("");
+  const query = search.trim().toLowerCase();
+  const visible = query
+    ? options.filter(
+        (opt) =>
+          opt.label.toLowerCase().includes(query) || opt.value.toLowerCase().includes(query),
+      )
+    : options;
+  const clear = (event: { preventDefault: () => void; stopPropagation: () => void }) => {
+    event.preventDefault();
+    event.stopPropagation();
+    onValueChange(null);
+  };
   return (
     <BaseSelect.Root
       items={options}
       value={value}
       onValueChange={(next) => onValueChange(typeof next === "string" ? next : null)}
+      onOpenChange={(open) => {
+        if (!open) setSearch("");
+      }}
       name={name}
       disabled={disabled}
     >
       <BaseSelect.Trigger
         id={id}
         aria-label={ariaLabel}
+        data-no-ring=""
         className={cx(styles.input, styles.selectTrigger)}
       >
-        <BaseSelect.Value placeholder={placeholder} className={cx(styles.selectValue)} />
-        <BaseSelect.Icon className={cx(styles.selectIcon)}>
-          <svg width="12" height="12" viewBox="0 0 16 16" fill="none" aria-hidden>
-            <path
-              d="M4.5 6.25 8 9.75l3.5-3.5"
-              stroke="currentColor"
-              strokeWidth="1.5"
-              strokeLinecap="round"
-              strokeLinejoin="round"
-            />
-          </svg>
-        </BaseSelect.Icon>
+        {chip && selected ? (
+          <span {...stylex.props(styles.chip)}>
+            <span {...stylex.props(styles.chipLabel)}>{selected.label}</span>
+            {clearable && !disabled ? (
+              <span
+                data-select-clear
+                aria-hidden
+                {...stylex.props(styles.chipRemove)}
+                onPointerDown={(event) => event.stopPropagation()}
+                onClick={clear}
+              >
+                ×
+              </span>
+            ) : null}
+          </span>
+        ) : (
+          <BaseSelect.Value
+            placeholder={placeholder}
+            className={cx(styles.selectValue, chip && styles.placeholder)}
+          />
+        )}
+        <span {...stylex.props(styles.selectActions)}>
+          {chip && clearable && selected && !disabled ? (
+            <span
+              data-select-clear
+              role="button"
+              aria-label="Clear"
+              {...stylex.props(styles.fieldClear)}
+              onPointerDown={(event) => event.stopPropagation()}
+              onClick={clear}
+            >
+              <svg width="14" height="14" viewBox="0 0 16 16" fill="none" aria-hidden>
+                <circle cx="8" cy="8" r="6.25" stroke="currentColor" strokeWidth="1.25" />
+                <path
+                  d="M6 6l4 4M10 6l-4 4"
+                  stroke="currentColor"
+                  strokeWidth="1.25"
+                  strokeLinecap="round"
+                />
+              </svg>
+            </span>
+          ) : null}
+          <BaseSelect.Icon className={cx(styles.selectIcon)}>
+            <svg width="12" height="12" viewBox="0 0 16 16" fill="none" aria-hidden>
+              <path
+                d="M4.5 6.25 8 9.75l3.5-3.5"
+                stroke="currentColor"
+                strokeWidth="1.5"
+                strokeLinecap="round"
+                strokeLinejoin="round"
+              />
+            </svg>
+          </BaseSelect.Icon>
+        </span>
       </BaseSelect.Trigger>
       <BaseSelect.Portal>
         <BaseSelect.Positioner
@@ -69,8 +138,27 @@ export function Select({
           className={cx(popup.positioner)}
         >
           <BaseSelect.Popup className={(state) => popupClassName(state, styles.selectPopup)}>
+            {searchable ? (
+              <input
+                data-select-search
+                data-no-ring=""
+                value={search}
+                placeholder="Search"
+                spellCheck={false}
+                autoComplete="off"
+                className={cx(popup.searchInput)}
+                onChange={(event) => setSearch(event.target.value)}
+                onMouseDown={(event) => {
+                  event.preventDefault();
+                  event.stopPropagation();
+                  event.currentTarget.focus();
+                }}
+                onPointerDown={(event) => event.stopPropagation()}
+                onKeyDown={(event) => event.stopPropagation()}
+              />
+            ) : null}
             <BaseSelect.List>
-              {options.map((opt) => (
+              {visible.map((opt) => (
                 <BaseSelect.Item
                   key={opt.value}
                   value={opt.value}
@@ -115,10 +203,10 @@ export function Textarea({
 }: Omit<ComponentPropsWithoutRef<"textarea">, "className" | "style"> & {
   mono?: boolean;
 }) {
-  return (
+    return (
     <textarea
       {...props}
-      {...stylex.props(styles.input, styles.textarea, mono && styles.mono)}
+      {...stylex.props(styles.input, styles.inputFocus, styles.textarea, mono && styles.mono)}
     />
   );
 }
@@ -137,6 +225,11 @@ const styles = stylex.create({
     color: colors.text,
     fontSize: type.md,
     outline: "none",
+    ":disabled": {
+      opacity: 0.55,
+    },
+  },
+  inputFocus: {
     ":focus": {
       borderColor: colors.focus,
       outlineWidth: 2,
@@ -144,9 +237,6 @@ const styles = stylex.create({
       outlineColor: colors.focus,
       outlineOffset: -1,
     },
-    ":disabled": {
-      opacity: 0.55,
-    },
   },
   selectTrigger: {
     display: "flex",
@@ -156,6 +246,22 @@ const styles = stylex.create({
     textAlign: "left",
     fontFamily: type.sans,
     cursor: "pointer",
+    outline: "none",
+    boxShadow: "none",
+    ":focus": {
+      borderColor: colors.border,
+      outlineStyle: "none",
+      outlineWidth: 0,
+      outlineOffset: 0,
+      boxShadow: "none",
+    },
+    ":focus-visible": {
+      borderColor: colors.border,
+      outlineStyle: "none",
+      outlineWidth: 0,
+      outlineOffset: 0,
+      boxShadow: "none",
+    },
   },
   selectValue: {
     minWidth: 0,
@@ -163,6 +269,58 @@ const styles = stylex.create({
     textOverflow: "ellipsis",
     whiteSpace: "nowrap",
   },
+  placeholder: {
+    color: colors.textMuted,
+  },
+  chip: {
+    display: "inline-flex",
+    alignItems: "center",
+    gap: space.xs,
+    maxWidth: "100%",
+    minHeight: "22px",
+    paddingInline: space.sm,
+    paddingBlock: "1px",
+    borderWidth: 1,
+    borderStyle: "solid",
+    borderColor: colors.border,
+    borderRadius: radius.sm,
+    backgroundColor: colors.bgHover,
+    color: colors.text,
+    fontSize: type.sm,
+  },
+  chipLabel: {
+    minWidth: 0,
+    overflow: "hidden",
+    textOverflow: "ellipsis",
+    whiteSpace: "nowrap",
+  },
+  chipRemove: {
+    display: "inline-flex",
+    alignItems: "center",
+    justifyContent: "center",
+    margin: 0,
+    padding: 0,
+    borderWidth: 0,
+    backgroundColor: "transparent",
+    color: colors.textMuted,
+    fontSize: type.sm,
+    lineHeight: 1,
+    cursor: "pointer",
+  },
+  selectActions: {
+    display: "inline-flex",
+    alignItems: "center",
+    gap: space.xs,
+    flexShrink: 0,
+    marginLeft: "auto",
+  },
+  fieldClear: {
+    display: "inline-flex",
+    alignItems: "center",
+    justifyContent: "center",
+    color: colors.textMuted,
+    cursor: "pointer",
+  },
   selectIcon: {
     display: "inline-flex",
     flexShrink: 0,

package/src/ui/popup.ts

@@ -183,11 +183,20 @@ export const popup = stylex.create({
     fontFamily: type.sans,
     fontSize: type.sm,
     outline: "none",
+    boxShadow: "none",
     ":focus": {
-      outline: "none",
+      outlineStyle: "none",
+      outlineWidth: 0,
+      outlineOffset: 0,
+      boxShadow: "none",
+      borderBottomColor: colors.border,
     },
     ":focus-visible": {
-      outline: "none",
+      outlineStyle: "none",
+      outlineWidth: 0,
+      outlineOffset: 0,
+      boxShadow: "none",
+      borderBottomColor: colors.border,
     },
     "::placeholder": {
       color: colors.textMuted,