@tipp/ui 1.1.22 → 1.2.0

package/dist/chunk-WTDRHT6R.js

@@ -0,0 +1,259 @@
+import {
+  Popover
+} from "./chunk-5AVBYDPB.js";
+import {
+  ScrollArea
+} from "./chunk-ZKZDVS7G.js";
+import {
+  Grid
+} from "./chunk-EGEQY3KT.js";
+import {
+  Flex
+} from "./chunk-25HMMI7R.js";
+import {
+  Badge
+} from "./chunk-EFMOJ6IL.js";
+import {
+  Button
+} from "./chunk-4B77ZZOP.js";
+import {
+  CheckIcon
+} from "./chunk-AW44EUZH.js";
+
+// src/molecules/tag-selector.tsx
+import {
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState
+} from "react";
+import { ChevronRightIcon, Cross1Icon } from "@radix-ui/react-icons";
+import AutosizeInput from "react-input-autosize";
+import { jsx, jsxs } from "react/jsx-runtime";
+var OPTION_HEIGHT = 32;
+var DefaultDropdownContainer = (props) => {
+  return props.children;
+};
+function TagSelector(props) {
+  const {
+    options = [],
+    tagRender,
+    placeholder,
+    maxCount = 0,
+    DropdownContainer = DefaultDropdownContainer
+  } = props;
+  const [selected, setSelected] = useState(props.selected || []);
+  const [value, setValue] = useState("");
+  const [focusIndex, setFocusIndex] = useState(null);
+  const [open, setOpen] = useState(false);
+  const fieldRef = useRef(null);
+  const scrollRef = useRef(null);
+  const onChangeValue = useCallback(
+    (e) => {
+      setValue(e.target.value);
+    },
+    []
+  );
+  const filteredOptions = useMemo(() => {
+    return options.filter((option) => {
+      return option.name.includes(value);
+    });
+  }, [options, value]);
+  const selectedItem = useMemo(() => {
+    const result = [];
+    selected.forEach((id) => {
+      const maybeItem = options.find((option) => option.id === id);
+      if (maybeItem)
+        result.push(maybeItem);
+    });
+    return result;
+  }, [options, selected]);
+  const onDelete = useCallback((id) => {
+    setSelected((prev) => prev.filter((el) => el !== id));
+  }, []);
+  const onSelect = useCallback(
+    (id) => {
+      if (maxCount && selected.length + 1 > maxCount)
+        return;
+      setSelected((prev) => [...prev, id]);
+    },
+    [maxCount, selected]
+  );
+  const toggleItem = useCallback(
+    (id) => {
+      if (selected.includes(id)) {
+        onDelete(id);
+      } else {
+        onSelect(id);
+      }
+    },
+    [onDelete, onSelect, selected]
+  );
+  const setScroll = useCallback((index) => {
+    if (scrollRef.current) {
+      const scrollTop = scrollRef.current.scrollTop;
+      const clientHeight = scrollRef.current.clientHeight;
+      const focusTop = index * OPTION_HEIGHT;
+      if (focusTop < scrollTop) {
+        scrollRef.current.scrollTop = focusTop;
+      } else if (focusTop + OPTION_HEIGHT > scrollTop + clientHeight) {
+        scrollRef.current.scrollTop = focusTop + OPTION_HEIGHT - clientHeight;
+      }
+    }
+  }, []);
+  const handleKeyDown = useCallback(
+    (e) => {
+      const key = e.key;
+      switch (key) {
+        case "ArrowDown": {
+          e.preventDefault();
+          let newFocus = 0;
+          if (typeof focusIndex === "number") {
+            newFocus = focusIndex + 1 >= options.length ? 0 : focusIndex + 1;
+          }
+          setFocusIndex(newFocus);
+          setScroll(newFocus);
+          break;
+        }
+        case "ArrowUp": {
+          e.preventDefault();
+          let newFocus = 0;
+          if (typeof focusIndex === "number") {
+            newFocus = focusIndex - 1 < 0 ? options.length - 1 : focusIndex - 1;
+          }
+          setFocusIndex(newFocus);
+          setScroll(newFocus);
+          break;
+        }
+        case "Enter":
+          if (focusIndex !== null) {
+            toggleItem(filteredOptions[focusIndex].id);
+            setValue("");
+          }
+          break;
+        case "Backspace":
+          if (value.length === 0) {
+            setSelected((prev) => prev.slice(0, -1));
+          }
+          break;
+        case "Escape":
+          setOpen(false);
+          break;
+      }
+    },
+    [
+      focusIndex,
+      value.length,
+      setScroll,
+      options.length,
+      toggleItem,
+      filteredOptions
+    ]
+  );
+  useEffect(() => {
+    setFocusIndex(null);
+  }, [open]);
+  useEffect(() => {
+    setFocusIndex(0);
+  }, [filteredOptions]);
+  return /* @__PURE__ */ jsxs(
+    Popover.Root,
+    {
+      onOpenChange: setOpen,
+      open: Boolean(filteredOptions.length) && open,
+      children: [
+        /* @__PURE__ */ jsx(Popover.Trigger, { children: /* @__PURE__ */ jsxs(Grid, { columns: "1fr auto", children: [
+          /* @__PURE__ */ jsxs(Flex, { gap: "1", wrap: "wrap", children: [
+            selectedItem.map((item) => {
+              return tagRender ? tagRender(item) : /* @__PURE__ */ jsxs(Badge, { children: [
+                item.name,
+                /* @__PURE__ */ jsx(
+                  Button,
+                  {
+                    onClick: () => {
+                      onDelete(item.id);
+                    },
+                    variant: "transparent",
+                    children: /* @__PURE__ */ jsx(Cross1Icon, {})
+                  }
+                )
+              ] }, item.id);
+            }),
+            /* @__PURE__ */ jsx(
+              AutosizeInput,
+              {
+                onChange: onChangeValue,
+                placeholder,
+                style: { maxWidth: "100px", overflow: hidden },
+                value
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsx(ChevronRightIcon, {})
+        ] }) }),
+        /* @__PURE__ */ jsx(
+          Popover.Content,
+          {
+            onOpenAutoFocus: (e) => {
+              e.preventDefault();
+            },
+            children: /* @__PURE__ */ jsx(
+              DropdownContainer,
+              {
+                currentItem: filteredOptions[focusIndex || 0],
+                items: filteredOptions,
+                children: /* @__PURE__ */ jsx(
+                  ScrollArea,
+                  {
+                    ref: scrollRef,
+                    scrollbars: "vertical",
+                    style: { height: OPTION_HEIGHT * 8 },
+                    type: "auto",
+                    children: /* @__PURE__ */ jsx(Flex, { direction: "column", children: filteredOptions.map((item, i) => {
+                      const isSelected = Boolean(
+                        selected.find((el) => el === item.id)
+                      );
+                      const isFocus = i === focusIndex;
+                      return /* @__PURE__ */ jsx(
+                        Button,
+                        {
+                          onClick: () => {
+                            var _a;
+                            toggleItem(item.id);
+                            (_a = fieldRef.current) == null ? void 0 : _a.focus();
+                          },
+                          onMouseEnter: () => {
+                            setFocusIndex(i);
+                          },
+                          style: {
+                            width: "100%",
+                            background: isFocus ? "var(--accent-a3)" : void 0,
+                            color: "var(--gray-12)",
+                            fontWeight: 400,
+                            boxShadow: "none"
+                          },
+                          variant: isSelected ? "soft" : "outline",
+                          children: /* @__PURE__ */ jsxs(Flex, { justify: "between", width: "100%", children: [
+                            item.name,
+                            isSelected ? /* @__PURE__ */ jsx(CheckIcon, {}) : null
+                          ] })
+                        },
+                        item.id
+                      );
+                    }) })
+                  }
+                )
+              }
+            )
+          }
+        )
+      ]
+    }
+  );
+}
+
+export {
+  TagSelector
+};
+//# sourceMappingURL=chunk-WTDRHT6R.js.map

package/dist/chunk-WTDRHT6R.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/molecules/tag-selector.tsx"],"sourcesContent":["import React, {\n  useCallback,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n} from 'react';\nimport { ChevronRightIcon, Cross1Icon } from '@radix-ui/react-icons';\nimport AutosizeInput from 'react-input-autosize';\nimport { Popover } from '../atoms/popover';\nimport { Flex } from '../atoms/flex';\nimport { Button } from '../atoms/button';\nimport { Badge } from '../atoms/badge';\nimport { CheckIcon } from '../icon';\nimport { ScrollArea } from '../atoms/scroll-area';\nimport { Grid } from '../atoms/grid';\n\ntype ID = string;\ninterface Item {\n  name: string;\n  id: ID;\n}\n\nconst OPTION_HEIGHT = 32;\n\nexport interface TagSelectorProps<T extends Item> {\n  options?: T[];\n  selected?: ID[];\n  placeholder?: string;\n  disabled?: boolean;\n  maxCount?: number;\n\n  onChange?: (selected: ID[]) => void;\n  tagRender?: (item: T) => React.ReactElement;\n  DropdownContainer?: DropdownContainer<T>;\n}\ntype DropdownContainer<T> = (props: {\n  items: T[];\n  children: React.ReactElement;\n  currentItem?: T;\n}) => React.ReactElement;\n\nconst DefaultDropdownContainer = (props: {\n  children: React.ReactElement;\n}): React.ReactElement => {\n  return props.children;\n};\n\nexport function TagSelector<T extends Item>(\n  props: TagSelectorProps<T>\n): React.ReactElement {\n  const {\n    options = [],\n    tagRender,\n    placeholder,\n    maxCount = 0,\n    DropdownContainer = DefaultDropdownContainer,\n  } = props;\n  const [selected, setSelected] = useState<string[]>(props.selected || []);\n  const [value, setValue] = useState<string>('');\n  const [focusIndex, setFocusIndex] = useState<number | null>(null);\n  const [open, setOpen] = useState(false);\n\n  const fieldRef = useRef<HTMLInputElement>(null);\n  const scrollRef = useRef<HTMLDivElement>(null);\n\n  const onChangeValue = useCallback<React.ChangeEventHandler<HTMLInputElement>>(\n    (e) => {\n      setValue(e.target.value);\n    },\n    []\n  );\n\n  const filteredOptions = useMemo<T[]>(() => {\n    return options.filter((option) => {\n      return option.name.includes(value);\n    });\n  }, [options, value]);\n\n  const selectedItem = useMemo<T[]>(() => {\n    const result = [] as T[];\n    selected.forEach((id) => {\n      const maybeItem = options.find((option) => option.id === id);\n      if (maybeItem) result.push(maybeItem);\n    });\n    return result;\n  }, [options, selected]);\n\n  const onDelete = useCallback((id: string) => {\n    setSelected((prev) => prev.filter((el) => el !== id));\n  }, []);\n\n  const onSelect = useCallback(\n    (id: string) => {\n      if (maxCount && selected.length + 1 > maxCount) return;\n      setSelected((prev) => [...prev, id]);\n    },\n    [maxCount, selected]\n  );\n\n  const toggleItem = useCallback(\n    (id: string) => {\n      if (selected.includes(id)) {\n        onDelete(id);\n      } else {\n        onSelect(id);\n      }\n    },\n    [onDelete, onSelect, selected]\n  );\n\n  const setScroll = useCallback((index: number): void => {\n    if (scrollRef.current) {\n      const scrollTop = scrollRef.current.scrollTop;\n      const clientHeight = scrollRef.current.clientHeight;\n      const focusTop = index * OPTION_HEIGHT;\n      if (focusTop < scrollTop) {\n        scrollRef.current.scrollTop = focusTop;\n      } else if (focusTop + OPTION_HEIGHT > scrollTop + clientHeight) {\n        scrollRef.current.scrollTop = focusTop + OPTION_HEIGHT - clientHeight;\n      }\n    }\n  }, []);\n\n  const handleKeyDown = useCallback(\n    (e: React.KeyboardEvent) => {\n      const key = e.key;\n\n      switch (key) {\n        case 'ArrowDown': {\n          e.preventDefault();\n          let newFocus = 0;\n          if (typeof focusIndex === 'number') {\n            newFocus = focusIndex + 1 >= options.length ? 0 : focusIndex + 1;\n          }\n          setFocusIndex(newFocus);\n          setScroll(newFocus);\n          break;\n        }\n\n        case 'ArrowUp': {\n          e.preventDefault();\n          let newFocus = 0;\n          if (typeof focusIndex === 'number') {\n            newFocus = focusIndex - 1 < 0 ? options.length - 1 : focusIndex - 1;\n          }\n          setFocusIndex(newFocus);\n          setScroll(newFocus);\n          break;\n        }\n\n        case 'Enter':\n          if (focusIndex !== null) {\n            toggleItem(filteredOptions[focusIndex].id);\n            setValue('');\n          }\n          break;\n\n        case 'Backspace':\n          if (value.length === 0) {\n            setSelected((prev) => prev.slice(0, -1));\n          }\n          break;\n\n        case 'Escape':\n          setOpen(false);\n          break;\n      }\n    },\n    [\n      focusIndex,\n      value.length,\n      setScroll,\n      options.length,\n      toggleItem,\n      filteredOptions,\n    ]\n  );\n\n  useEffect(() => {\n    setFocusIndex(null);\n  }, [open]);\n\n  useEffect(() => {\n    setFocusIndex(0);\n  }, [filteredOptions]);\n\n  return (\n    <Popover.Root\n      onOpenChange={setOpen}\n      open={Boolean(filteredOptions.length) && open}\n    >\n      <Popover.Trigger>\n        <Grid columns=\"1fr auto\">\n          <Flex gap=\"1\" wrap=\"wrap\">\n            {selectedItem.map((item) => {\n              return tagRender ? (\n                tagRender(item)\n              ) : (\n                <Badge key={item.id}>\n                  {item.name}\n                  <Button\n                    onClick={() => {\n                      onDelete(item.id);\n                    }}\n                    variant=\"transparent\"\n                  >\n                    <Cross1Icon />\n                  </Button>\n                </Badge>\n              );\n            })}\n\n            <AutosizeInput\n              onChange={onChangeValue}\n              placeholder={placeholder}\n              style={{ maxWidth: '100px', overflow: hidden }}\n              value={value}\n            />\n          </Flex>\n          {/* <TextField.Root\n            onChange={onChangeValue}\n            onKeyDown={handleKeyDown}\n            placeholder={selectedItem.length ? '' : placeholder}\n            ref={fieldRef}\n            value={value}\n            variant=\"surface\"\n          /> */}\n          <ChevronRightIcon />\n        </Grid>\n      </Popover.Trigger>\n\n      <Popover.Content\n        onOpenAutoFocus={(e) => {\n          e.preventDefault();\n        }}\n      >\n        <DropdownContainer\n          currentItem={filteredOptions[focusIndex || 0]}\n          items={filteredOptions}\n        >\n          <ScrollArea\n            ref={scrollRef}\n            scrollbars=\"vertical\"\n            style={{ height: OPTION_HEIGHT * 8 }}\n            type=\"auto\"\n          >\n            <Flex direction=\"column\">\n              {filteredOptions.map((item, i) => {\n                const isSelected = Boolean(\n                  selected.find((el) => el === item.id)\n                );\n                const isFocus = i === focusIndex;\n\n                return (\n                  <Button\n                    key={item.id}\n                    onClick={() => {\n                      toggleItem(item.id);\n                      fieldRef.current?.focus();\n                    }}\n                    onMouseEnter={() => {\n                      setFocusIndex(i);\n                    }}\n                    style={{\n                      width: '100%',\n                      background: isFocus ? 'var(--accent-a3)' : undefined,\n                      color: 'var(--gray-12)',\n                      fontWeight: 400,\n                      boxShadow: 'none',\n                    }}\n                    variant={isSelected ? 'soft' : 'outline'}\n                  >\n                    <Flex justify=\"between\" width=\"100%\">\n                      {item.name}\n                      {isSelected ? <CheckIcon /> : null}\n                    </Flex>\n                  </Button>\n                );\n              })}\n            </Flex>\n          </ScrollArea>\n        </DropdownContainer>\n      </Popover.Content>\n    </Popover.Root>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/chunk-WTSYZD46.js

@@ -0,0 +1,52 @@
+// src/atoms/auto-sizing-input.tsx
+import { useEffect, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+function AutoSizingInput({
+  value,
+  onChangeValue,
+  onChange,
+  placeholder
+}) {
+  const [content, setContent] = useState("");
+  const [width, setWidth] = useState(0);
+  const span = useRef(null);
+  useEffect(() => {
+    span.current && setWidth(span.current.offsetWidth);
+  }, [content]);
+  const changeHandler = (evt) => {
+    onChange == null ? void 0 : onChange(evt);
+    setContent(evt.target.value);
+  };
+  useEffect(() => {
+    setContent(value || "");
+  }, [value]);
+  useEffect(() => {
+    onChangeValue == null ? void 0 : onChangeValue(content);
+  }, [content, onChangeValue]);
+  return /* @__PURE__ */ jsxs("div", { children: [
+    /* @__PURE__ */ jsx(
+      "span",
+      {
+        "aria-hidden": "true",
+        id: "hide",
+        ref: span,
+        style: { width: "100%", overflow: "hidden", visibility: "hidden" },
+        children: content
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "input",
+      {
+        onChange: changeHandler,
+        placeholder,
+        style: { width },
+        type: "text"
+      }
+    )
+  ] });
+}
+
+export {
+  AutoSizingInput
+};
+//# sourceMappingURL=chunk-WTSYZD46.js.map

package/dist/chunk-WTSYZD46.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/atoms/auto-sizing-input.tsx"],"sourcesContent":["import type { DetailedHTMLProps } from 'react';\nimport React, { useEffect, useRef, useState } from 'react';\n\nexport interface AutoSizingInputProps\n  extends DetailedHTMLProps<\n    React.InputHTMLAttributes<HTMLInputElement>,\n    HTMLInputElement\n  > {\n  value?: string;\n  onChangeValue?: (value: string) => void;\n  onChange?: React.ChangeEventHandler<HTMLInputElement>;\n}\n\nexport function AutoSizingInput({\n  value,\n  onChangeValue,\n  onChange,\n  placeholder,\n}: AutoSizingInputProps): React.ReactNode {\n  const [content, setContent] = useState('');\n  const [width, setWidth] = useState(0);\n  const span = useRef<HTMLSpanElement>(null);\n\n  useEffect(() => {\n    span.current && setWidth(span.current.offsetWidth);\n  }, [content]);\n\n  const changeHandler: React.ChangeEventHandler<HTMLInputElement> = (evt) => {\n    onChange?.(evt);\n    setContent(evt.target.value);\n  };\n\n  useEffect(() => {\n    setContent(value || '');\n  }, [value]);\n\n  useEffect(() => {\n    onChangeValue?.(content);\n  }, [content, onChangeValue]);\n\n  return (\n    <div>\n      <span\n        aria-hidden=\"true\"\n        id=\"hide\"\n        ref={span}\n        style={{ width: '100%', overflow: 'hidden', visibility: 'hidden' }}\n      >\n        {content}\n      </span>\n      <input\n        onChange={changeHandler}\n        placeholder={placeholder}\n        style={{ width }}\n        type=\"text\"\n      />\n    </div>\n  );\n}\n"],"mappings":";AACA,SAAgB,WAAW,QAAQ,gBAAgB;AAwC/C,SACE,KADF;AA5BG,SAAS,gBAAgB;AAAA,EAC9B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAA0C;AACxC,QAAM,CAAC,SAAS,UAAU,IAAI,SAAS,EAAE;AACzC,QAAM,CAAC,OAAO,QAAQ,IAAI,SAAS,CAAC;AACpC,QAAM,OAAO,OAAwB,IAAI;AAEzC,YAAU,MAAM;AACd,SAAK,WAAW,SAAS,KAAK,QAAQ,WAAW;AAAA,EACnD,GAAG,CAAC,OAAO,CAAC;AAEZ,QAAM,gBAA4D,CAAC,QAAQ;AACzE,yCAAW;AACX,eAAW,IAAI,OAAO,KAAK;AAAA,EAC7B;AAEA,YAAU,MAAM;AACd,eAAW,SAAS,EAAE;AAAA,EACxB,GAAG,CAAC,KAAK,CAAC;AAEV,YAAU,MAAM;AACd,mDAAgB;AAAA,EAClB,GAAG,CAAC,SAAS,aAAa,CAAC;AAE3B,SACE,qBAAC,SACC;AAAA;AAAA,MAAC;AAAA;AAAA,QACC,eAAY;AAAA,QACZ,IAAG;AAAA,QACH,KAAK;AAAA,QACL,OAAO,EAAE,OAAO,QAAQ,UAAU,UAAU,YAAY,SAAS;AAAA,QAEhE;AAAA;AAAA,IACH;AAAA,IACA;AAAA,MAAC;AAAA;AAAA,QACC,UAAU;AAAA,QACV;AAAA,QACA,OAAO,EAAE,MAAM;AAAA,QACf,MAAK;AAAA;AAAA,IACP;AAAA,KACF;AAEJ;","names":[]}

package/dist/chunk-WW7WJCBK.js

@@ -0,0 +1,278 @@
+import {
+  ScrollArea
+} from "./chunk-ZKZDVS7G.js";
+import {
+  Popover
+} from "./chunk-5AVBYDPB.js";
+import {
+  Flex
+} from "./chunk-25HMMI7R.js";
+import {
+  Grid
+} from "./chunk-EGEQY3KT.js";
+import {
+  Badge
+} from "./chunk-EFMOJ6IL.js";
+import {
+  Button
+} from "./chunk-4B77ZZOP.js";
+import {
+  CheckIcon
+} from "./chunk-AW44EUZH.js";
+
+// src/molecules/tag-selector.tsx
+import {
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState
+} from "react";
+import { ChevronRightIcon, Cross1Icon } from "@radix-ui/react-icons";
+import { jsx, jsxs } from "react/jsx-runtime";
+var OPTION_HEIGHT = 32;
+var DefaultDropdownContainer = (props) => {
+  return props.children;
+};
+function TagSelector(props) {
+  const {
+    options = [],
+    tagRender,
+    placeholder,
+    maxCount = 0,
+    DropdownContainer = DefaultDropdownContainer
+  } = props;
+  const [selected, setSelected] = useState(props.selected || []);
+  const [value, setValue] = useState("");
+  const [focusIndex, setFocusIndex] = useState(null);
+  const [open, setOpen] = useState(false);
+  const fieldRef = useRef(null);
+  const scrollRef = useRef(null);
+  const onChangeValue = useCallback(
+    (e) => {
+      setValue(e.target.value);
+    },
+    []
+  );
+  const filteredOptions = useMemo(() => {
+    return options.filter((option) => {
+      return option.name.includes(value);
+    });
+  }, [options, value]);
+  const selectedItem = useMemo(() => {
+    const result = [];
+    selected.forEach((id) => {
+      const maybeItem = options.find((option) => option.id === id);
+      if (maybeItem)
+        result.push(maybeItem);
+    });
+    return result;
+  }, [options, selected]);
+  const onDelete = useCallback((id) => {
+    setSelected((prev) => prev.filter((el) => el !== id));
+  }, []);
+  const onSelect = useCallback(
+    (id) => {
+      if (maxCount && selected.length + 1 > maxCount)
+        return;
+      setSelected((prev) => [...prev, id]);
+    },
+    [maxCount, selected]
+  );
+  const toggleItem = useCallback(
+    (id) => {
+      if (selected.includes(id)) {
+        onDelete(id);
+      } else {
+        onSelect(id);
+      }
+    },
+    [onDelete, onSelect, selected]
+  );
+  const setScroll = useCallback((index) => {
+    if (scrollRef.current) {
+      const scrollTop = scrollRef.current.scrollTop;
+      const clientHeight = scrollRef.current.clientHeight;
+      const focusTop = index * OPTION_HEIGHT;
+      if (focusTop < scrollTop) {
+        scrollRef.current.scrollTop = focusTop;
+      } else if (focusTop + OPTION_HEIGHT > scrollTop + clientHeight) {
+        scrollRef.current.scrollTop = focusTop + OPTION_HEIGHT - clientHeight;
+      }
+    }
+  }, []);
+  const handleKeyDown = useCallback(
+    (e) => {
+      const key = e.key;
+      switch (key) {
+        case "ArrowDown": {
+          e.preventDefault();
+          let newFocus = 0;
+          if (typeof focusIndex === "number") {
+            newFocus = focusIndex + 1 >= options.length ? 0 : focusIndex + 1;
+          }
+          setFocusIndex(newFocus);
+          setScroll(newFocus);
+          break;
+        }
+        case "ArrowUp": {
+          e.preventDefault();
+          let newFocus = 0;
+          if (typeof focusIndex === "number") {
+            newFocus = focusIndex - 1 < 0 ? options.length - 1 : focusIndex - 1;
+          }
+          setFocusIndex(newFocus);
+          setScroll(newFocus);
+          break;
+        }
+        case "Enter":
+          if (focusIndex !== null) {
+            toggleItem(filteredOptions[focusIndex].id);
+            setValue("");
+          }
+          break;
+        case "Backspace":
+          if (value.length === 0) {
+            setSelected((prev) => prev.slice(0, -1));
+          }
+          break;
+        case "Escape":
+          setOpen(false);
+          break;
+      }
+    },
+    [
+      focusIndex,
+      value.length,
+      setScroll,
+      options.length,
+      toggleItem,
+      filteredOptions
+    ]
+  );
+  useEffect(() => {
+    setFocusIndex(null);
+  }, [open]);
+  useEffect(() => {
+    setFocusIndex(0);
+  }, [filteredOptions]);
+  const [content, setContent] = useState("");
+  const [width, setWidth] = useState(0);
+  const span = useRef(null);
+  useEffect(() => {
+    span.current && setWidth(span.current.offsetWidth);
+  }, [content]);
+  const changeHandler = (evt) => {
+    setContent(evt.target.value);
+  };
+  return /* @__PURE__ */ jsxs(
+    Popover.Root,
+    {
+      onOpenChange: setOpen,
+      open: Boolean(filteredOptions.length) && open,
+      children: [
+        /* @__PURE__ */ jsx(Popover.Trigger, { children: /* @__PURE__ */ jsxs(Grid, { columns: "1fr auto", children: [
+          /* @__PURE__ */ jsxs(Flex, { gap: "1", wrap: "wrap", children: [
+            selectedItem.map((item) => {
+              return tagRender ? tagRender(item) : /* @__PURE__ */ jsxs(Badge, { children: [
+                item.name,
+                /* @__PURE__ */ jsx(
+                  Button,
+                  {
+                    onClick: () => {
+                      onDelete(item.id);
+                    },
+                    variant: "transparent",
+                    children: /* @__PURE__ */ jsx(Cross1Icon, {})
+                  }
+                )
+              ] }, item.id);
+            }),
+            /* @__PURE__ */ jsxs("div", { children: [
+              /* @__PURE__ */ jsx(
+                "span",
+                {
+                  id: "hide",
+                  ref: span,
+                  style: { width: "100%", overflow: "hidden" },
+                  children: content
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                "input",
+                {
+                  type: "text",
+                  style: { width },
+                  autoFocus: true,
+                  onChange: changeHandler
+                }
+              )
+            ] })
+          ] }),
+          /* @__PURE__ */ jsx(ChevronRightIcon, {})
+        ] }) }),
+        /* @__PURE__ */ jsx(
+          Popover.Content,
+          {
+            onOpenAutoFocus: (e) => {
+              e.preventDefault();
+            },
+            children: /* @__PURE__ */ jsx(
+              DropdownContainer,
+              {
+                currentItem: filteredOptions[focusIndex || 0],
+                items: filteredOptions,
+                children: /* @__PURE__ */ jsx(
+                  ScrollArea,
+                  {
+                    ref: scrollRef,
+                    scrollbars: "vertical",
+                    style: { height: OPTION_HEIGHT * 8 },
+                    type: "auto",
+                    children: /* @__PURE__ */ jsx(Flex, { direction: "column", children: filteredOptions.map((item, i) => {
+                      const isSelected = Boolean(
+                        selected.find((el) => el === item.id)
+                      );
+                      const isFocus = i === focusIndex;
+                      return /* @__PURE__ */ jsx(
+                        Button,
+                        {
+                          onClick: () => {
+                            var _a;
+                            toggleItem(item.id);
+                            (_a = fieldRef.current) == null ? void 0 : _a.focus();
+                          },
+                          onMouseEnter: () => {
+                            setFocusIndex(i);
+                          },
+                          style: {
+                            width: "100%",
+                            background: isFocus ? "var(--accent-a3)" : void 0,
+                            color: "var(--gray-12)",
+                            fontWeight: 400,
+                            boxShadow: "none"
+                          },
+                          variant: isSelected ? "soft" : "outline",
+                          children: /* @__PURE__ */ jsxs(Flex, { justify: "between", width: "100%", children: [
+                            item.name,
+                            isSelected ? /* @__PURE__ */ jsx(CheckIcon, {}) : null
+                          ] })
+                        },
+                        item.id
+                      );
+                    }) })
+                  }
+                )
+              }
+            )
+          }
+        )
+      ]
+    }
+  );
+}
+
+export {
+  TagSelector
+};
+//# sourceMappingURL=chunk-WW7WJCBK.js.map

package/dist/chunk-WW7WJCBK.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/molecules/tag-selector.tsx"],"sourcesContent":["import React, {\n  useCallback,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n} from 'react';\nimport { ChevronRightIcon, Cross1Icon } from '@radix-ui/react-icons';\nimport AutosizeInput from 'react-input-autosize';\nimport { Popover } from '../atoms/popover';\nimport { Flex } from '../atoms/flex';\nimport { Button } from '../atoms/button';\nimport { Badge } from '../atoms/badge';\nimport { CheckIcon } from '../icon';\nimport { ScrollArea } from '../atoms/scroll-area';\nimport { Grid } from '../atoms/grid';\n\ntype ID = string;\ninterface Item {\n  name: string;\n  id: ID;\n}\n\nconst OPTION_HEIGHT = 32;\n\nexport interface TagSelectorProps<T extends Item> {\n  options?: T[];\n  selected?: ID[];\n  placeholder?: string;\n  disabled?: boolean;\n  maxCount?: number;\n\n  onChange?: (selected: ID[]) => void;\n  tagRender?: (item: T) => React.ReactElement;\n  DropdownContainer?: DropdownContainer<T>;\n}\ntype DropdownContainer<T> = (props: {\n  items: T[];\n  children: React.ReactElement;\n  currentItem?: T;\n}) => React.ReactElement;\n\nconst DefaultDropdownContainer = (props: {\n  children: React.ReactElement;\n}): React.ReactElement => {\n  return props.children;\n};\n\nexport function TagSelector<T extends Item>(\n  props: TagSelectorProps<T>\n): React.ReactElement {\n  const {\n    options = [],\n    tagRender,\n    placeholder,\n    maxCount = 0,\n    DropdownContainer = DefaultDropdownContainer,\n  } = props;\n  const [selected, setSelected] = useState<string[]>(props.selected || []);\n  const [value, setValue] = useState<string>('');\n  const [focusIndex, setFocusIndex] = useState<number | null>(null);\n  const [open, setOpen] = useState(false);\n\n  const fieldRef = useRef<HTMLInputElement>(null);\n  const scrollRef = useRef<HTMLDivElement>(null);\n\n  const onChangeValue = useCallback<React.ChangeEventHandler<HTMLInputElement>>(\n    (e) => {\n      setValue(e.target.value);\n    },\n    []\n  );\n\n  const filteredOptions = useMemo<T[]>(() => {\n    return options.filter((option) => {\n      return option.name.includes(value);\n    });\n  }, [options, value]);\n\n  const selectedItem = useMemo<T[]>(() => {\n    const result = [] as T[];\n    selected.forEach((id) => {\n      const maybeItem = options.find((option) => option.id === id);\n      if (maybeItem) result.push(maybeItem);\n    });\n    return result;\n  }, [options, selected]);\n\n  const onDelete = useCallback((id: string) => {\n    setSelected((prev) => prev.filter((el) => el !== id));\n  }, []);\n\n  const onSelect = useCallback(\n    (id: string) => {\n      if (maxCount && selected.length + 1 > maxCount) return;\n      setSelected((prev) => [...prev, id]);\n    },\n    [maxCount, selected]\n  );\n\n  const toggleItem = useCallback(\n    (id: string) => {\n      if (selected.includes(id)) {\n        onDelete(id);\n      } else {\n        onSelect(id);\n      }\n    },\n    [onDelete, onSelect, selected]\n  );\n\n  const setScroll = useCallback((index: number): void => {\n    if (scrollRef.current) {\n      const scrollTop = scrollRef.current.scrollTop;\n      const clientHeight = scrollRef.current.clientHeight;\n      const focusTop = index * OPTION_HEIGHT;\n      if (focusTop < scrollTop) {\n        scrollRef.current.scrollTop = focusTop;\n      } else if (focusTop + OPTION_HEIGHT > scrollTop + clientHeight) {\n        scrollRef.current.scrollTop = focusTop + OPTION_HEIGHT - clientHeight;\n      }\n    }\n  }, []);\n\n  const handleKeyDown = useCallback(\n    (e: React.KeyboardEvent) => {\n      const key = e.key;\n\n      switch (key) {\n        case 'ArrowDown': {\n          e.preventDefault();\n          let newFocus = 0;\n          if (typeof focusIndex === 'number') {\n            newFocus = focusIndex + 1 >= options.length ? 0 : focusIndex + 1;\n          }\n          setFocusIndex(newFocus);\n          setScroll(newFocus);\n          break;\n        }\n\n        case 'ArrowUp': {\n          e.preventDefault();\n          let newFocus = 0;\n          if (typeof focusIndex === 'number') {\n            newFocus = focusIndex - 1 < 0 ? options.length - 1 : focusIndex - 1;\n          }\n          setFocusIndex(newFocus);\n          setScroll(newFocus);\n          break;\n        }\n\n        case 'Enter':\n          if (focusIndex !== null) {\n            toggleItem(filteredOptions[focusIndex].id);\n            setValue('');\n          }\n          break;\n\n        case 'Backspace':\n          if (value.length === 0) {\n            setSelected((prev) => prev.slice(0, -1));\n          }\n          break;\n\n        case 'Escape':\n          setOpen(false);\n          break;\n      }\n    },\n    [\n      focusIndex,\n      value.length,\n      setScroll,\n      options.length,\n      toggleItem,\n      filteredOptions,\n    ]\n  );\n\n  useEffect(() => {\n    setFocusIndex(null);\n  }, [open]);\n\n  useEffect(() => {\n    setFocusIndex(0);\n  }, [filteredOptions]);\n\n  const [content, setContent] = useState('');\n  const [width, setWidth] = useState(0);\n  const span = useRef<HTMLSpanElement>(null);\n\n  useEffect(() => {\n    span.current && setWidth(span.current.offsetWidth);\n  }, [content]);\n\n  const changeHandler: React.ChangeEventHandler<HTMLInputElement> = (evt) => {\n    setContent(evt.target.value);\n  };\n\n  return (\n    <Popover.Root\n      onOpenChange={setOpen}\n      open={Boolean(filteredOptions.length) && open}\n    >\n      <Popover.Trigger>\n        <Grid columns=\"1fr auto\">\n          <Flex gap=\"1\" wrap=\"wrap\">\n            {selectedItem.map((item) => {\n              return tagRender ? (\n                tagRender(item)\n              ) : (\n                <Badge key={item.id}>\n                  {item.name}\n                  <Button\n                    onClick={() => {\n                      onDelete(item.id);\n                    }}\n                    variant=\"transparent\"\n                  >\n                    <Cross1Icon />\n                  </Button>\n                </Badge>\n              );\n            })}\n\n            {/* <AutosizeInput\n              onChange={onChangeValue}\n              placeholder={placeholder}\n              style={{ maxWidth: '100%', overflow: 'hidden' }}\n              value={value}\n            /> */}\n            <div>\n              <span\n                id=\"hide\"\n                ref={span}\n                style={{ width: '100%', overflow: 'hidden' }}\n              >\n                {content}\n              </span>\n              <input\n                type=\"text\"\n                style={{ width }}\n                autoFocus\n                onChange={changeHandler}\n              />\n            </div>\n          </Flex>\n          {/* <TextField.Root\n            onChange={onChangeValue}\n            onKeyDown={handleKeyDown}\n            placeholder={selectedItem.length ? '' : placeholder}\n            ref={fieldRef}\n            value={value}\n            variant=\"surface\"\n          /> */}\n          <ChevronRightIcon />\n        </Grid>\n      </Popover.Trigger>\n\n      <Popover.Content\n        onOpenAutoFocus={(e) => {\n          e.preventDefault();\n        }}\n      >\n        <DropdownContainer\n          currentItem={filteredOptions[focusIndex || 0]}\n          items={filteredOptions}\n        >\n          <ScrollArea\n            ref={scrollRef}\n            scrollbars=\"vertical\"\n            style={{ height: OPTION_HEIGHT * 8 }}\n            type=\"auto\"\n          >\n            <Flex direction=\"column\">\n              {filteredOptions.map((item, i) => {\n                const isSelected = Boolean(\n                  selected.find((el) => el === item.id)\n                );\n                const isFocus = i === focusIndex;\n\n                return (\n                  <Button\n                    key={item.id}\n                    onClick={() => {\n                      toggleItem(item.id);\n                      fieldRef.current?.focus();\n                    }}\n                    onMouseEnter={() => {\n                      setFocusIndex(i);\n                    }}\n                    style={{\n                      width: '100%',\n                      background: isFocus ? 'var(--accent-a3)' : undefined,\n                      color: 'var(--gray-12)',\n                      fontWeight: 400,\n                      boxShadow: 'none',\n                    }}\n                    variant={isSelected ? 'soft' : 'outline'}\n                  >\n                    <Flex justify=\"between\" width=\"100%\">\n                      {item.name}\n                      {isSelected ? <CheckIcon /> : null}\n                    </Flex>\n                  </Button>\n                );\n              })}\n            </Flex>\n          </ScrollArea>\n        </DropdownContainer>\n      </Popover.Content>\n    </Popover.Root>\n  );\n}\n"],"mappings":"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","names":[]}