HiveGrid-Wireframes/hivegrid-cloud/apps/web/app/ui/components/SearchInput/SearchInput.tsx

"use client";
/*
 * Documentation:
 * Search Input — https://app.subframe.com/f023064a5ca0/library?component=Search+Input_75a35ed3-52c0-4435-8586-e390eb77d723
 */

import React from "react";
import { FeatherLoader } from "@subframe/core";
import { FeatherSearch } from "@subframe/core";
import { FeatherX } from "@subframe/core";
import * as SubframeUtils from "../../utils";
import { BadgeShortcut } from "../BadgeShortcut";

export interface SearchInputRootProps
  extends Omit<React.HTMLAttributes<HTMLDivElement>, "placeholder" | "onChange"> {
  disabled?: boolean;
  error?: boolean;
  state?: "default" | "loading" | "filled";
  variant?: "outline" | "filled";
  size?: "small" | "medium" | "large";
  fillContainer?: boolean;
  borderless?: boolean;
  noPadding?: boolean;
  showLabel?: boolean;
  label?: React.ReactNode;
  helpText?: React.ReactNode;
  // @subframe/sync-disable -- local fix: placeholder targets a native <input> und muss ein string sein (nicht ReactNode).
  placeholder?: string;
  hideShortcut?: boolean;
  // @subframe/sync-disable -- local fix: Subframe-SearchInput ist nur Deko (value="" hart). value/onChange machen es optional controllable (echtes Filter-Feld); ohne onChange -> readOnly-Trigger.
  value?: string;
  onChange?: React.ChangeEventHandler<HTMLInputElement>;
  className?: string;
}

const SearchInputRoot = React.forwardRef<HTMLDivElement, SearchInputRootProps>(
  function SearchInputRoot(
    {
      disabled = false,
      error = false,
      state = "default",
      variant = "outline",
      size = "medium",
      fillContainer = false,
      borderless = false,
      noPadding = false,
      showLabel = false,
      label,
      helpText,
      placeholder,
      hideShortcut = false,
      value,
      onChange,
      className,
      ...otherProps
    }: SearchInputRootProps,
    ref
  ) {
    return (
      <div
        className={SubframeUtils.twClassNames(
          "group/75a35ed3 flex w-full max-w-[320px] cursor-pointer flex-col items-start justify-center gap-4",
          { "h-9 min-w-[288px] max-w-none": fillContainer },
          className
        )}
        ref={ref}
        {...otherProps}
      >
        <div
          className={SubframeUtils.twClassNames(
            "hidden flex-col items-start gap-3",
            { flex: showLabel }
          )}
        >
          {label ? (
            <span
              className={SubframeUtils.twClassNames(
                "text-body-default-medium-0 font-body-default-medium-0 text-text-neutral-secondary",
                {
                  "text-text-feedback-negative": error,
                  "text-text-neutral-disabled": disabled,
                }
              )}
            >
              {label}
            </span>
          ) : null}
          {helpText ? (
            <span
              className={SubframeUtils.twClassNames(
                "text-body-small-regular-0 font-body-small-regular-0 text-text-neutral-tertiary",
                {
                  "text-text-feedback-negative": error,
                  "text-text-neutral-disabled": disabled,
                }
              )}
            >
              {helpText}
            </span>
          ) : null}
        </div>
        {/* @subframe/sync-disable -- local fix: Feld als <label> statt <div> -> Klick irgendwo im Feld (inkl. Lupe) fokussiert nativ den <input> ("die Lupe loest das Suchfeld aus"). cursor-text als Affordance. */}
        <label
          className={SubframeUtils.twClassNames(
            "flex h-9 w-full min-w-[288px] max-w-[320px] flex-none cursor-text items-center gap-2 rounded-sm border border-solid border-border-strong bg-surface-neutral-primary px-3 group-hover/75a35ed3:bg-surface-neutral-secondary group-focus-within/75a35ed3:bg-surface-neutral-secondary group-focus-within/75a35ed3:shadow-focus",
            {
              "h-auto w-auto px-0 py-0": noPadding,
              "border-none": borderless,
              "max-w-none": fillContainer,
              "h-12 min-w-[192px]": size === "large",
              "h-8 min-w-[192px]": size === "small",
              "bg-surface-neutral-secondary": variant === "filled",
              "border border-solid border-border-negative-solid group-focus-within/75a35ed3:border-2 group-focus-within/75a35ed3:border-solid group-focus-within/75a35ed3:border-border-negative-solid group-focus-within/75a35ed3:shadow-none":
                error,
              "border border-solid border-border-disabled bg-surface-neutral-disabled group-hover/75a35ed3:bg-surface-neutral-disabled group-focus-within/75a35ed3:bg-surface-neutral-disabled group-focus-within/75a35ed3:shadow-none":
                disabled,
            }
          )}
        >
          <FeatherSearch
            className={SubframeUtils.twClassNames(
              "text-body-default-regular-0 font-body-default-regular-0 text-icon-neutral-tertiary",
              {
                "text-body-small-regular-0 font-body-small-regular-0":
                  size === "small",
                "text-icon-neutral-disabled": disabled,
              }
            )}
          />
          {/* @subframe/sync-disable -- local fix: border-0 + bg-transparent (native <input> sonst weiss + eigene Border). boxShadow:none (inline) killt den geerbten --tw-ring-Fokusring des Inputs zuverlaessig -> Fokus zeigt nur das Feld (shadow-focus), kein Doppelrahmen. Mit onChange -> controllable, sonst value="" readOnly. */}
          <input
            className={SubframeUtils.twClassNames(
              "grow shrink-0 basis-0 self-stretch border-0 bg-transparent text-body-default-regular-0 font-body-default-regular-0 text-text-neutral-secondary outline-none placeholder:text-text-neutral-subtle",
              {
                "text-text-neutral-disabled placeholder:text-text-neutral-disabled":
                  disabled,
              }
            )}
            style={{ boxShadow: "none" }}
            placeholder={placeholder}
            value={onChange === undefined ? "" : value ?? ""}
            onChange={onChange}
            readOnly={onChange === undefined}
            type="search"
          />
          <div
            className={SubframeUtils.twClassNames(
              "flex items-center gap-1 rounded-sm group-focus-within/75a35ed3:hidden",
              {
                hidden:
                  hideShortcut || state === "filled" || state === "loading",
              }
            )}
          >
            <BadgeShortcut
              className={SubframeUtils.twClassNames({
                "h-auto min-h-[20px] w-auto flex-none": disabled,
              })}
            >
              K
            </BadgeShortcut>
          </div>
          <FeatherLoader
            className={SubframeUtils.twClassNames(
              "hidden text-body-default-regular-0 font-body-default-regular-0 text-icon-neutral-tertiary animate-spin",
              { "inline-flex": state === "loading" }
            )}
          />
          <div
            className={SubframeUtils.twClassNames(
              "hidden h-5 w-5 flex-none items-center justify-center rounded-round cursor-pointer hover:bg-surface-neutral-tertiary",
              { flex: state === "filled" }
            )}
          >
            <FeatherX className="text-body-default-regular-0 font-body-default-regular-0 text-icon-neutral-tertiary" />
          </div>
        </label>
      </div>
    );
  }
);

export const SearchInput = SearchInputRoot;