Correct Hub and Engine component geometry

packages/ui-react/src/Select.tsx

@@ -11,6 +11,8 @@ export interface SelectOption<T extends string> {
   disabled?: boolean;
 }
 
+export type SelectVariant = "integrated" | "split";
+
 export interface SelectProps<T extends string> {
   value: T;
   options: Array<SelectOption<T>>;
@@ -23,6 +25,7 @@ export interface SelectProps<T extends string> {
   minMenuWidth?: number;
   menuWidth?: number | "anchor";
   disabled?: boolean;
+  variant?: SelectVariant;
   className?: string;
   triggerClassName?: string;
   menuClassName?: string;
@@ -40,6 +43,7 @@ export function Select<T extends string>({
   minMenuWidth = 180,
   menuWidth = "anchor",
   disabled = false,
+  variant = "integrated",
   className,
   triggerClassName,
   menuClassName,
@@ -54,13 +58,13 @@ export function Select<T extends string>({
 
   return (
     <Dropdown
-      className={className}
+      className={cn("nodedc-select-anchor", className)}
       placement={placement}
       minWidth={minMenuWidth}
       width={menuWidth}
       disabled={disabled}
       surfaceRole="listbox"
-      surfaceClassName={menuClassName}
+      surfaceClassName={cn(variant === "split" && "nodedc-select__menu", menuClassName)}
       trigger={({ open, toggle, setTriggerRef, surfaceId }) => {
         const handleKeyDown = (event: KeyboardEvent<HTMLButtonElement>) => {
           if (event.key === "ArrowDown" || event.key === "Enter" || event.key === " ") {
@@ -68,6 +72,32 @@ export function Select<T extends string>({
             if (!open) toggle();
           }
         };
+        if (variant === "split") {
+          return (
+            <div className={cn("nodedc-select", triggerClassName)}>
+              <div className="nodedc-select__control">
+                <div ref={setTriggerRef} className="nodedc-select__value">
+                  {selected?.icon ? <span className="nodedc-select__value-icon">{selected.icon}</span> : null}
+                  <span>{selected?.label ?? "—"}</span>
+                </div>
+                <button
+                  type="button"
+                  className="nodedc-select__toggle"
+                  aria-label={label}
+                  aria-haspopup="listbox"
+                  aria-controls={surfaceId}
+                  aria-expanded={open}
+                  disabled={disabled}
+                  onClick={toggle}
+                  onKeyDown={handleKeyDown}
+                >
+                  <span className="nodedc-select-trigger__chevron" aria-hidden="true" />
+                </button>
+              </div>
+            </div>
+          );
+        }
+
         return (
           <button
             ref={setTriggerRef}
@@ -126,4 +156,3 @@ export function Select<T extends string>({
     </Dropdown>
   );
 }
-