@intility/bifrost-react/dist/components/Nav/Nav.Search.js

React library for Intility's design system, Bifrost.

"use client";

import { c as _c } from "react-compiler-runtime";
import { forwardRef } from "react";
import classNames from "classnames";
import { faSearch } from "@fortawesome/free-solid-svg-icons/faSearch";
import NavGroup from "./Nav.Group.js";
import NavItem from "./Nav.Item.js";
import useNav from "../../hooks/useNav.js";
import { useNavLocation } from "./NavLocationContext.internal.js";
import useLocale from "../../hooks/useLocale.js";
import Icon from "../Icon/Icon.js";
import bfSpinner from "../../assets/bfSpinner.js";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
// todo: for collapsed sidebar, focus input after expanding dropout

const NavSearch = /*#__PURE__*/forwardRef((t0, ref) => {
  const $ = _c(49);
  let className;
  let formProps;
  let groupProps;
  let itemProps;
  let loading;
  let onSubmit;
  let props;
  if ($[0] !== t0) {
    ({
      className,
      onSubmit,
      loading,
      itemProps,
      groupProps,
      formProps,
      ...props
    } = t0);
    $[0] = t0;
    $[1] = className;
    $[2] = formProps;
    $[3] = groupProps;
    $[4] = itemProps;
    $[5] = loading;
    $[6] = onSubmit;
    $[7] = props;
  } else {
    className = $[1];
    formProps = $[2];
    groupProps = $[3];
    itemProps = $[4];
    loading = $[5];
    onSubmit = $[6];
    props = $[7];
  }
  const {
    sideCollapsed
  } = useNav();
  const {
    where
  } = useNavLocation();
  const locale = useLocale();
  const t1 = loading ? bfSpinner : faSearch;
  let t2;
  if ($[8] !== loading) {
    t2 = classNames({
      "bf-input-loading-icon": loading
    });
    $[8] = loading;
    $[9] = t2;
  } else {
    t2 = $[9];
  }
  let t3;
  if ($[10] !== loading || $[11] !== t1 || $[12] !== t2) {
    t3 = /*#__PURE__*/_jsx(Icon, {
      icon: t1,
      spin: loading,
      className: t2
    });
    $[10] = loading;
    $[11] = t1;
    $[12] = t2;
    $[13] = t3;
  } else {
    t3 = $[13];
  }
  const searchIcon = t3;
  let t4;
  if ($[14] !== onSubmit) {
    t4 = e => {
      e.preventDefault();
      onSubmit?.(e);
    };
    $[14] = onSubmit;
    $[15] = t4;
  } else {
    t4 = $[15];
  }
  const t5 = formProps?.className;
  const t6 = !onSubmit;
  const t7 = !!onSubmit;
  let t8;
  if ($[16] !== t5 || $[17] !== t6 || $[18] !== t7) {
    t8 = classNames(t5, "bf-input-icon-container", "bf-nav-search-input", {
      "bf-input-icon-left": t6,
      "bf-input-icon-right": t7
    });
    $[16] = t5;
    $[17] = t6;
    $[18] = t7;
    $[19] = t8;
  } else {
    t8 = $[19];
  }
  let t9;
  if ($[20] !== locale.search || $[21] !== props || $[22] !== ref) {
    t9 = /*#__PURE__*/_jsx("input", {
      placeholder: locale.search,
      "aria-label": locale.search,
      ...props,
      required: true,
      className: "bf-input",
      ref: ref
    });
    $[20] = locale.search;
    $[21] = props;
    $[22] = ref;
    $[23] = t9;
  } else {
    t9 = $[23];
  }
  let t10;
  if ($[24] !== locale.search || $[25] !== onSubmit || $[26] !== searchIcon || $[27] !== where) {
    t10 = onSubmit ? /*#__PURE__*/_jsx("button", {
      type: "submit",
      className: "bf-input-icon bf-input-icon-button",
      "aria-label": locale.search,
      ...(where === "top" ? {
        tabIndex: -1
      } : {}),
      children: searchIcon
    }) : /*#__PURE__*/_jsx("span", {
      className: "bf-input-icon",
      children: searchIcon
    });
    $[24] = locale.search;
    $[25] = onSubmit;
    $[26] = searchIcon;
    $[27] = where;
    $[28] = t10;
  } else {
    t10 = $[28];
  }
  let t11;
  if ($[29] !== formProps || $[30] !== t10 || $[31] !== t4 || $[32] !== t8 || $[33] !== t9) {
    t11 = /*#__PURE__*/_jsxs("form", {
      noValidate: true,
      onSubmit: t4,
      ...formProps,
      className: t8,
      children: [t9, t10]
    });
    $[29] = formProps;
    $[30] = t10;
    $[31] = t4;
    $[32] = t8;
    $[33] = t9;
    $[34] = t11;
  } else {
    t11 = $[34];
  }
  const input = t11;
  if (where === "side" && sideCollapsed) {
    const t12 = groupProps?.className;
    let t13;
    if ($[35] !== className || $[36] !== t12) {
      t13 = classNames(t12, className, "bf-nav-search-group");
      $[35] = className;
      $[36] = t12;
      $[37] = t13;
    } else {
      t13 = $[37];
    }
    let t14;
    if ($[38] !== groupProps || $[39] !== input || $[40] !== t13) {
      t14 = /*#__PURE__*/_jsx(NavGroup, {
        icon: faSearch,
        ...groupProps,
        className: t13,
        children: input
      });
      $[38] = groupProps;
      $[39] = input;
      $[40] = t13;
      $[41] = t14;
    } else {
      t14 = $[41];
    }
    return t14;
  }
  const t12 = itemProps?.className;
  let t13;
  if ($[42] !== className || $[43] !== t12) {
    t13 = classNames(t12, className, "bf-nav-search-item");
    $[42] = className;
    $[43] = t12;
    $[44] = t13;
  } else {
    t13 = $[44];
  }
  let t14;
  if ($[45] !== input || $[46] !== itemProps || $[47] !== t13) {
    t14 = /*#__PURE__*/_jsx(NavItem, {
      ...itemProps,
      className: t13,
      children: input
    });
    $[45] = input;
    $[46] = itemProps;
    $[47] = t13;
    $[48] = t14;
  } else {
    t14 = $[48];
  }
  return t14;
});
NavSearch.displayName = "Nav.Search";
export default NavSearch;