@serendie/ui/dist/components/Search/Search.js

Adaptive UI component library as part of Serendie Design System by Mitsubishi Electric

import { jsxs as p, jsx as o } from "react/jsx-runtime";
import d from "react";
import { createListCollection as O } from "../../node_modules/@ark-ui/react/dist/components/collection/list-collection.js";
import { combobox_exports as t } from "../../node_modules/@ark-ui/react/dist/components/combobox/combobox.js";
import { Portal as z } from "../../node_modules/@ark-ui/react/dist/components/portal/portal.js";
import { SerendieSymbolMagnifyingGlass as j, SerendieSymbolClose as H } from "@serendie/symbols";
import { useAutoPortalContainer as A } from "../../hooks/useAutoPortalContainer.js";
import { cx as M } from "../../styled-system/css/cx.js";
import { Box as D } from "../../styled-system/jsx/box.js";
import { sva as G } from "../../styled-system/css/sva.js";
const x = G({
  slots: [
    "input",
    "control",
    "combobox",
    "comboboxItem",
    "iconBox",
    "icon",
    "clearTrigger"
  ],
  base: {
    control: {
      display: "inline-grid",
      // 後から指定したCSSからwidthが上書きできないため、@layer componentsを指定
      "@layer components": {
        width: "min(100%, 300px)"
      },
      lineHeight: "1",
      gridTemplateColumns: "auto 1fr auto",
      alignItems: "center",
      borderRadius: "sd.system.dimension.radius.medium",
      outlineStyle: "solid",
      outlineWidth: "sd.system.dimension.border.medium",
      outlineColor: "sd.system.color.component.outline",
      bg: "sd.system.color.component.surface",
      _focus: {
        outlineWidth: "sd.system.dimension.border.thick",
        outlineColor: "sd.system.color.impression.primary"
      },
      _disabled: {
        bgColor: "sd.system.color.interaction.disabled",
        cursor: "not-allowed"
      }
    },
    input: {
      outline: "none",
      width: "100%",
      textOverflow: "ellipsis",
      _placeholder: {
        color: "sd.system.color.component.onSurfaceVariant"
      },
      _disabled: {
        color: "sd.system.color.interaction.disabledOnSurface",
        _placeholder: {
          color: "sd.system.color.interaction.disabledOnSurface"
        }
      }
    },
    combobox: {
      bgColor: "sd.system.color.component.surfaceContainerBright",
      borderRadius: "sd.system.dimension.radius.medium",
      boxShadow: "sd.system.elevation.shadow.level1",
      zIndex: "sd.system.elevation.zIndex.dropdown",
      width: "100%"
    },
    comboboxItem: {
      display: "flex",
      gap: "sd.system.dimension.spacing.small",
      cursor: "pointer",
      _highlighted: {
        backgroundColor: "sd.system.color.interaction.hoveredVariant"
      }
    },
    iconBox: {
      display: "flex",
      justifyContent: "center",
      "[data-disabled] &": {
        color: "sd.system.color.interaction.disabledOnSurface"
      }
    },
    icon: {
      width: "sd.system.dimension.spacing.large"
    },
    clearTrigger: {
      display: "flex",
      alignItems: "center",
      justifyContent: "center",
      cursor: "pointer"
    }
  },
  variants: {
    size: {
      medium: {
        iconBox: {
          w: "40px"
        },
        control: {
          height: 48,
          gap: "sd.system.dimension.spacing.extraSmall",
          textStyle: "sd.system.typography.body.medium_compact",
          paddingTop: "sd.system.dimension.spacing.small",
          paddingRight: "sd.system.dimension.spacing.extraSmall",
          paddingBottom: "sd.system.dimension.spacing.small",
          paddingLeft: "sd.system.dimension.spacing.twoExtraSmall"
        },
        comboboxItem: {
          paddingRight: "sd.system.dimension.spacing.medium",
          paddingLeft: "sd.system.dimension.spacing.medium",
          paddingBottom: "sd.system.dimension.spacing.extraSmall",
          paddingTop: "sd.system.dimension.spacing.extraSmall"
        }
      },
      small: {
        iconBox: {
          w: "20px"
        },
        control: {
          height: 32,
          gap: "sd.system.dimension.spacing.twoExtraSmall",
          textStyle: "sd.system.typography.body.small_compact",
          paddingTop: "sd.system.dimension.spacing.twoExtraSmall",
          paddingLeft: "sd.system.dimension.spacing.extraSmall",
          paddingRight: "sd.system.dimension.spacing.extraSmall",
          paddingBottom: "sd.system.dimension.spacing.twoExtraSmall",
          scrollPaddingLeft: "sd.system.dimension.spacing.twoExtraSmall"
        },
        comboboxItem: {
          gap: "sd.system.dimension.spacing.twoExtraSmall",
          paddingTop: "sd.system.dimension.spacing.extraSmall",
          paddingRight: "sd.system.dimension.spacing.extraSmall",
          paddingBottom: "sd.system.dimension.spacing.extraSmall",
          paddingLeft: "sd.system.dimension.spacing.extraSmall"
        }
      }
    }
  },
  defaultVariants: {
    size: "medium"
  }
}), $ = ({
  items: m = [],
  portalled: g = !0,
  allowCustomValue: b = !0,
  onSearch: a,
  ...C
}) => {
  const [V, S] = x.splitVariantProps(C), n = x(V), { collection: K, ...s } = S, { triggerRef: w, portalContainerRef: I } = A(g), c = s.inputValue !== void 0, [v, y] = d.useState(
    s.defaultInputValue || ""
  ), l = c ? s.inputValue : v, h = d.useRef(null), [R, u] = d.useState(
    () => !!(s.inputValue || s.defaultInputValue)
  ), r = d.useRef(null), _ = d.useMemo(() => l ? m.filter(
    (e) => e.toLowerCase().includes(l.toLowerCase())
  ) : m, [m, l]), f = O({ items: _ }), B = (e) => {
    var i;
    c || y(e.inputValue), u(e.inputValue.length > 0), (i = s.onInputValueChange) == null || i.call(s, e);
  }, N = (e) => {
    var i;
    e.value.length > 0 && (a == null || a(e.value[0])), (i = s.onValueChange) == null || i.call(s, e);
  }, T = (e) => {
    h.current = e.highlightedValue;
  }, E = (e) => {
    e.key === "Enter" && l && !h.current && (a == null || a(l));
  }, L = (e) => {
    u(e.target.value.length > 0);
  }, k = () => {
    var e;
    r.current && (r.current.value = "", r.current.focus()), u(!1), c || y(""), (e = s.onInputValueChange) == null || e.call(s, { inputValue: "" });
  };
  return /* @__PURE__ */ p(
    t.Root,
    {
      ...s,
      collection: f,
      openOnClick: !0,
      allowCustomValue: b,
      onInputValueChange: B,
      onValueChange: N,
      onHighlightChange: T,
      lazyMount: !0,
      unmountOnExit: !0,
      positioning: {
        offset: {
          mainAxis: 2,
          crossAxis: 0
        }
      },
      children: [
        /* @__PURE__ */ p(
          t.Control,
          {
            className: M(n.control, s.className),
            ref: w,
            children: [
              /* @__PURE__ */ o("div", { className: n.iconBox, children: /* @__PURE__ */ o(j, { className: n.icon }) }),
              /* @__PURE__ */ o(
                t.Input,
                {
                  ref: r,
                  className: n.input,
                  onKeyDown: E,
                  onChange: L
                }
              ),
              R && /* @__PURE__ */ o(
                "button",
                {
                  type: "button",
                  className: n.clearTrigger,
                  onClick: k,
                  children: /* @__PURE__ */ o(H, { className: n.icon })
                }
              )
            ]
          }
        ),
        /* @__PURE__ */ o(z, { disabled: !g, container: I, children: /* @__PURE__ */ o(t.Positioner, { children: /* @__PURE__ */ o(t.Content, { className: n.combobox, children: /* @__PURE__ */ o(t.ItemGroup, { id: "framework", children: f.items.map((e, i) => /* @__PURE__ */ p(
          t.Item,
          {
            item: e,
            className: n.comboboxItem,
            children: [
              /* @__PURE__ */ o(
                D,
                {
                  w: "sd.system.dimension.spacing.large",
                  h: "sd.system.dimension.spacing.large"
                }
              ),
              /* @__PURE__ */ o(t.ItemText, { children: e })
            ]
          },
          i
        )) }) }) }) })
      ]
    }
  );
};
export {
  $ as Search,
  x as SearchStyle
};