@purpurds/autocomplete 0.0.1

package/dist/autocomplete.d.ts

@@ -0,0 +1,25 @@
+import { default as React, ComponentPropsWithRef, ReactNode } from 'react';
+
+import * as ListBox from "./listbox";
+export declare const Autocomplete: React.ForwardRefExoticComponent<{
+    highlightFirstOption?: boolean | undefined;
+    defaultInputValue?: string | undefined;
+    inputValue?: string | undefined;
+    filterOption?: ((inputValue: string | undefined, option: ListBox.Option) => boolean) | undefined;
+    id: string;
+    listboxLabel: string;
+    listboxMaxHeight?: string | number | undefined;
+    noOptionsText?: React.ReactNode;
+    onInputChange?: ((value: string) => void) | undefined;
+    openOnFocus?: boolean | undefined;
+    onSelect?: ((option: ListBox.Option | undefined) => void) | undefined;
+    options: ListBox.Option[];
+    selectedOption?: ListBox.Option | undefined;
+    "data-testid"?: string | undefined;
+    className?: string | undefined;
+    renderInput: (props: ComponentPropsWithRef<"input">) => ReactNode;
+    renderOption?: ((option: ListBox.Option) => ReactNode) | undefined;
+} & React.RefAttributes<HTMLDivElement>>;
+export type { Option, UseAutocompleteOptions } from './useAutocomplete';
+export { useAutocomplete } from './useAutocomplete';
+//# sourceMappingURL=autocomplete.d.ts.map

package/dist/autocomplete.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"autocomplete.d.ts","sourceRoot":"","sources":["../src/autocomplete.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,qBAAqB,EAA4B,SAAS,EAAE,MAAM,OAAO,CAAC;AAI1F,OAAO,KAAK,OAAO,MAAM,WAAW,CAAC;AAwErC,eAAO,MAAM,YAAY;;;;;;;;;;;;;;;;yBA5DA,sBAAsB,OAAO,CAAC,KAAK,SAAS;gDAInC,SAAS;wCAwDkB,CAAC;AAG9D,YAAY,EAAE,MAAM,EAAE,sBAAsB,EAAE,MAAM,mBAAmB,CAAC;AACxE,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC"}

package/dist/autocomplete.es.js

@@ -0,0 +1,437 @@
+import { jsx as y, jsxs as rr } from "react/jsx-runtime";
+import { useRef as S, useCallback as hr, useEffect as br, useState as M, forwardRef as q, Children as vr, isValidElement as xr } from "react";
+function gr(t) {
+  return t && t.__esModule && Object.prototype.hasOwnProperty.call(t, "default") ? t.default : t;
+}
+var tr = { exports: {} };
+/*!
+	Copyright (c) 2018 Jed Watson.
+	Licensed under the MIT License (MIT), see
+	http://jedwatson.github.io/classnames
+*/
+(function(t) {
+  (function() {
+    var s = {}.hasOwnProperty;
+    function n() {
+      for (var r = "", e = 0; e < arguments.length; e++) {
+        var o = arguments[e];
+        o && (r = i(r, l.call(this, o)));
+      }
+      return r;
+    }
+    function l(r) {
+      if (typeof r == "string" || typeof r == "number")
+        return this && this[r] || r;
+      if (typeof r != "object")
+        return "";
+      if (Array.isArray(r))
+        return n.apply(this, r);
+      if (r.toString !== Object.prototype.toString && !r.toString.toString().includes("[native code]"))
+        return r.toString();
+      var e = "";
+      for (var o in r)
+        s.call(r, o) && r[o] && (e = i(e, this && this[o] || o));
+      return e;
+    }
+    function i(r, e) {
+      return e ? r ? r + " " + e : r + e : r;
+    }
+    t.exports ? (n.default = n, t.exports = n) : window.classNames = n;
+  })();
+})(tr);
+var yr = tr.exports;
+const er = /* @__PURE__ */ gr(yr), wr = {
+  "purpur-autocomplete": "_purpur-autocomplete_19u9x_1",
+  "purpur-autocomplete__listbox": "_purpur-autocomplete__listbox_19u9x_4"
+};
+function Ar(t) {
+  return t && t.__esModule && Object.prototype.hasOwnProperty.call(t, "default") ? t.default : t;
+}
+var ar = { exports: {} };
+/*!
+	Copyright (c) 2018 Jed Watson.
+	Licensed under the MIT License (MIT), see
+	http://jedwatson.github.io/classnames
+*/
+(function(t) {
+  (function() {
+    var s = {}.hasOwnProperty;
+    function n() {
+      for (var r = "", e = 0; e < arguments.length; e++) {
+        var o = arguments[e];
+        o && (r = i(r, l.call(this, o)));
+      }
+      return r;
+    }
+    function l(r) {
+      if (typeof r == "string" || typeof r == "number")
+        return this && this[r] || r;
+      if (typeof r != "object")
+        return "";
+      if (Array.isArray(r))
+        return n.apply(this, r);
+      if (r.toString !== Object.prototype.toString && !r.toString.toString().includes("[native code]"))
+        return r.toString();
+      var e = "";
+      for (var o in r)
+        s.call(r, o) && r[o] && (e = i(e, this && this[o] || o));
+      return e;
+    }
+    function i(r, e) {
+      return e ? r ? r + " " + e : r + e : r;
+    }
+    t.exports ? (n.default = n, t.exports = n) : window.classNames = n;
+  })();
+})(ar);
+var Rr = ar.exports;
+const $r = /* @__PURE__ */ Ar(Rr), Ir = {
+  "purpur-icon": "_purpur-icon_8u1lq_1",
+  "purpur-icon--xxs": "_purpur-icon--xxs_8u1lq_4",
+  "purpur-icon--xs": "_purpur-icon--xs_8u1lq_8",
+  "purpur-icon--sm": "_purpur-icon--sm_8u1lq_12",
+  "purpur-icon--md": "_purpur-icon--md_8u1lq_16",
+  "purpur-icon--lg": "_purpur-icon--lg_8u1lq_20",
+  "purpur-icon--xl": "_purpur-icon--xl_8u1lq_24"
+}, Lr = {
+  name: "checkmark",
+  svg: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path fill-rule="evenodd" d="M21.06 3.795a.9.9 0 0 1 .145 1.264l-11.5 14.5a.9.9 0 0 1-1.341.077l-6-6a.9.9 0 0 1 1.272-1.272l5.286 5.286L19.795 3.94a.9.9 0 0 1 1.264-.145Z" clip-rule="evenodd"/></svg>',
+  keywords: ["checkmark"],
+  category: "utility"
+}, Er = $r.bind(Ir), J = "purpur-icon", Nr = "md", Pr = (t) => t.filter((s) => Object.keys(s).length >= 1).map((s) => `${s.name}="${s.value}"`).join(" "), Sr = ({ content: t = "", title: s } = {}) => {
+  const n = [
+    { name: "xmlns", value: "http://www.w3.org/2000/svg" },
+    { name: "fill", value: "currentColor" },
+    { name: "viewBox", value: "0 0 24 24" },
+    s ? { name: "role", value: "img" } : { name: "aria-hidden", value: "true" }
+  ], l = s ? `<title>${s}</title>` : "";
+  return `<svg ${Pr(n)}>${l}${t}</svg>`;
+}, Cr = (t) => t.replace(/<(\/?)svg([^>]*)>/g, "").trim(), Br = ({
+  ["data-testid"]: t,
+  svg: s,
+  allyTitle: n,
+  className: l = "",
+  size: i = Nr,
+  ...r
+}) => {
+  const e = Sr({
+    content: Cr(s.svg),
+    title: n
+  }), o = Er(l, J, `${J}--${i}`);
+  return /* @__PURE__ */ y(
+    "span",
+    {
+      "aria-label": n,
+      className: o,
+      "data-testid": t,
+      dangerouslySetInnerHTML: { __html: e },
+      ...r
+    }
+  );
+};
+function Dr(t) {
+  return t && t.__esModule && Object.prototype.hasOwnProperty.call(t, "default") ? t.default : t;
+}
+var nr = { exports: {} };
+/*!
+	Copyright (c) 2018 Jed Watson.
+	Licensed under the MIT License (MIT), see
+	http://jedwatson.github.io/classnames
+*/
+(function(t) {
+  (function() {
+    var s = {}.hasOwnProperty;
+    function n() {
+      for (var r = "", e = 0; e < arguments.length; e++) {
+        var o = arguments[e];
+        o && (r = i(r, l(o)));
+      }
+      return r;
+    }
+    function l(r) {
+      if (typeof r == "string" || typeof r == "number")
+        return r;
+      if (typeof r != "object")
+        return "";
+      if (Array.isArray(r))
+        return n.apply(null, r);
+      if (r.toString !== Object.prototype.toString && !r.toString.toString().includes("[native code]"))
+        return r.toString();
+      var e = "";
+      for (var o in r)
+        s.call(r, o) && r[o] && (e = i(e, o));
+      return e;
+    }
+    function i(r, e) {
+      return e ? r ? r + " " + e : r + e : r;
+    }
+    t.exports ? (n.default = n, t.exports = n) : window.classNames = n;
+  })();
+})(nr);
+var kr = nr.exports;
+const Mr = /* @__PURE__ */ Dr(kr), $ = {
+  "purpur-paragraph": "_purpur-paragraph_1rh57_1",
+  "purpur-paragraph--disabled": "_purpur-paragraph--disabled_1rh57_7",
+  "purpur-paragraph--hyphens": "_purpur-paragraph--hyphens_1rh57_10",
+  "purpur-paragraph--negative": "_purpur-paragraph--negative_1rh57_13",
+  "purpur-paragraph--paragraph-100": "_purpur-paragraph--paragraph-100_1rh57_16",
+  "purpur-paragraph--paragraph-100-medium": "_purpur-paragraph--paragraph-100-medium_1rh57_22",
+  "purpur-paragraph--paragraph-100-bold": "_purpur-paragraph--paragraph-100-bold_1rh57_29",
+  "purpur-paragraph--paragraph-200": "_purpur-paragraph--paragraph-200_1rh57_36",
+  "purpur-paragraph--preamble-100": "_purpur-paragraph--preamble-100_1rh57_42",
+  "purpur-paragraph--preamble-200": "_purpur-paragraph--preamble-200_1rh57_48",
+  "purpur-paragraph--additional-100": "_purpur-paragraph--additional-100_1rh57_54",
+  "purpur-paragraph--additional-100-medium": "_purpur-paragraph--additional-100-medium_1rh57_60",
+  "purpur-paragraph--overline-100": "_purpur-paragraph--overline-100_1rh57_67",
+  "purpur-paragraph--overline-200": "_purpur-paragraph--overline-200_1rh57_75"
+}, jr = {
+  PARAGRAPH100: "paragraph-100",
+  PARAGRAPH100MEDIUM: "paragraph-100-medium",
+  PARAGRAPH100BOLD: "paragraph-100-bold",
+  PARAGRAPH200: "paragraph-200",
+  PREAMBLE100: "preamble-100",
+  PREAMBLE200: "preamble-200",
+  ADDITIONAL100: "additional-100",
+  ADDITIONAL100MEDIUM: "additional-100-medium",
+  OVERLINE100: "overline-100",
+  OVERLINE200: "overline-200"
+}, I = "purpur-paragraph", qr = ({
+  ["data-testid"]: t,
+  children: s,
+  className: n = "",
+  disabled: l,
+  enableHyphenation: i = !1,
+  negative: r = !1,
+  variant: e = jr.PARAGRAPH100,
+  ...o
+}) => {
+  const _ = Mr([
+    n,
+    $[I],
+    $[`${I}--${e}`],
+    {
+      [$[`${I}--hyphens`]]: i,
+      [$[`${I}--disabled`]]: l,
+      [$[`${I}--negative`]]: r
+    }
+  ]);
+  return /* @__PURE__ */ y("p", { ...o, className: _, "data-testid": t, children: s });
+}, Tr = {
+  "purpur-listbox": "_purpur-listbox_qhoi7_1",
+  "purpur-listbox-item": "_purpur-listbox-item_qhoi7_15",
+  "purpur-listbox-item--hovered": "_purpur-listbox-item--hovered_qhoi7_29",
+  "purpur-listbox-item--highlighted": "_purpur-listbox-item--highlighted_qhoi7_37",
+  "purpur-listbox-item--noninteractive": "_purpur-listbox-item--noninteractive_qhoi7_41",
+  "purpur-listbox-item--disabled": "_purpur-listbox-item--disabled_qhoi7_44",
+  "purpur-listbox-item__icon": "_purpur-listbox-item__icon_qhoi7_51"
+}, Vr = (t) => S(t), Kr = (t, s) => {
+  const n = hr(
+    (l) => {
+      t && !t.contains(l.target) && s();
+    },
+    [s, t]
+  );
+  br(() => (document.addEventListener("mousedown", n), () => {
+    document.removeEventListener("mousedown", n);
+  }), [n]);
+}, Or = ({
+  highlightFirstOption: t,
+  defaultInputValue: s,
+  inputValue: n,
+  filterOption: l,
+  id: i,
+  listboxLabel: r,
+  listboxMaxHeight: e,
+  onInputChange: o,
+  openOnFocus: _,
+  noOptionsText: w,
+  onSelect: A,
+  options: h,
+  selectedOption: c,
+  ["data-testid"]: L
+}) => {
+  const [V, m] = M(
+    (typeof n == "string" ? n : s) || (c == null ? void 0 : c.label)
+  ), E = typeof n == "string" ? n : V, [u, b] = M(t ? h[0] : void 0), C = S(null), K = Vr(null), O = S(null), N = S({}), [H, U] = M(!1);
+  function B(a) {
+    return L ? `${L}-${a}` : void 0;
+  }
+  const P = () => {
+    U(!1), b(void 0);
+  };
+  Kr(K.current, P);
+  const R = ({ eventType: a }) => {
+    U(!0), c && requestAnimationFrame(() => {
+      b({ ...c, isSetByClickEvent: a === "CLICK" }), D(N.current[c.id]);
+    });
+  }, sr = (a) => {
+    if (l)
+      return h.filter((d) => l(a, d));
+    if (!a)
+      return h;
+    const p = a.toUpperCase().split(" ") || [];
+    return h.filter(
+      (d) => p.every(
+        (f) => (d.value || d.label).toUpperCase().includes(f)
+      )
+    );
+  }, G = (a) => c && (c == null ? void 0 : c.label) === a ? h : sr(a), v = G(E), Y = (a) => {
+    o == null || o(a), m(a);
+  }, D = (a) => {
+    var p;
+    if (a) {
+      const d = a.getBoundingClientRect(), f = ((p = O.current) == null ? void 0 : p.getBoundingClientRect()) || { top: 0, bottom: 0 };
+      (d.top < f.top || d.bottom > f.bottom) && a.scrollIntoView({ block: "nearest" });
+    }
+  }, z = (a) => {
+    var p;
+    a && ((p = C.current) == null || p.focus(), Y(a.label), A == null || A(a)), P();
+  }, ur = (a) => {
+    const p = t && !u ? 0 : v.findIndex((f) => f && (u == null ? void 0 : u.id) === f.id), d = v.length;
+    return a === "ArrowDown" ? v[(p ?? -1) + 1] || v[0] : v[(p ?? d) - 1] || v[d - 1];
+  }, x = H && (!!v.length || !!w), ir = (a) => {
+    !x && R({ eventType: "KEYBOARD" });
+    const p = ur(a);
+    b(p), p && D(N.current[p.id]);
+  }, pr = (a) => {
+    switch (a.key) {
+      case "ArrowUp":
+      case "ArrowDown":
+        a.preventDefault(), ir(a.key);
+        break;
+      case "Enter": {
+        const p = u || (t ? h[0] : void 0);
+        x && z(p), !x && R({ eventType: "KEYBOARD" });
+        break;
+      }
+      case "Escape":
+      case "Tab":
+        P();
+        break;
+    }
+  }, lr = (a) => {
+    const p = G(a.target.value);
+    Y(a.target.value), b(void 0), !x && R({ eventType: "KEYBOARD" }), t && p[0] && D(N.current[p[0].id]);
+  }, cr = () => {
+    x ? P() : R({ eventType: "CLICK" });
+  }, dr = () => {
+    var a;
+    !H && _ && R({ eventType: "KEYBOARD" }), (a = C.current) == null || a.select();
+  }, mr = {
+    maxHeight: typeof e == "number" ? `${e}px` : e
+  }, F = {
+    "aria-label": r,
+    "aria-expanded": x,
+    "data-testid": B("listbox"),
+    id: `${i}-listbox`,
+    ref: O,
+    onMouseLeave: () => b(void 0),
+    style: e ? mr : void 0
+  }, Z = (a) => `${i}-listbox-item-${a.id}`, _r = (a, p) => {
+    const d = () => a.id !== (u == null ? void 0 : u.id) && b({ ...a, isSetByClickEvent: !0 }), f = (a.id === (u == null ? void 0 : u.id) || !!t && !u && p === 0) && !(u != null && u.isSetByClickEvent);
+    return {
+      "data-testid": B(`listbox-item-${a.id}`),
+      id: Z(a),
+      key: a.id,
+      onMouseMove: d,
+      onMouseUp: () => z(a),
+      ref: (k) => k && (N.current[a.id] = k),
+      tabIndex: -1,
+      selected: a.id === (c == null ? void 0 : c.id),
+      disabled: a.disabled,
+      highlighted: f,
+      hovered: a.id === (u == null ? void 0 : u.id) && !!(u != null && u.isSetByClickEvent)
+    };
+  }, fr = {
+    "aria-activedescendant": u ? Z(u) : void 0,
+    "aria-autocomplete": "list",
+    "aria-controls": F.id,
+    "aria-expanded": x,
+    "data-testid": B("input"),
+    autoComplete: "off",
+    id: `${i}-input`,
+    onChange: lr,
+    onMouseDown: cr,
+    onFocus: dr,
+    onKeyDown: pr,
+    ref: C,
+    role: "combobox",
+    value: E
+  };
+  return {
+    id: i,
+    inputProps: fr,
+    internalRef: K,
+    optionsToShow: v,
+    showListbox: x,
+    noOptionsText: w,
+    getListBoxItemProps: _r,
+    listboxProps: F
+  };
+}, j = er.bind(Tr), g = "purpur-listbox", or = q(
+  ({ children: t, ...s }, n) => /* @__PURE__ */ y(
+    "ul",
+    {
+      ...s,
+      ref: n,
+      className: j(g, s.className),
+      role: "listbox",
+      children: vr.toArray(t).filter(Hr)
+    }
+  )
+);
+or.displayName = "ListBox";
+const T = q((t, s) => {
+  const { disabled: n, highlighted: l, hovered: i, selected: r, children: e, noninteractive: o, ..._ } = t, w = j(`${g}-item`, _.className, {
+    [`${g}-item--highlighted`]: l,
+    [`${g}-item--selected`]: r,
+    [`${g}-item--hovered`]: i,
+    [`${g}-item--disabled`]: n,
+    [`${g}-item--noninteractive`]: o
+  });
+  return /* @__PURE__ */ rr(
+    "li",
+    {
+      ..._,
+      ref: s,
+      className: w,
+      "aria-selected": !!r,
+      role: "option",
+      "aria-disabled": !!n,
+      children: [
+        typeof e == "string" ? /* @__PURE__ */ y(qr, { children: e }) : e,
+        r && /* @__PURE__ */ y(Br, { svg: Lr, size: "xs", className: j(`${g}-item__icon`) })
+      ]
+    }
+  );
+});
+T.displayName = "ListBoxItem";
+function Hr(t) {
+  return xr(t) && (t == null ? void 0 : t.type) === T;
+}
+const Ur = or, Q = T, W = er.bind(wr), X = "purpur-autocomplete", Gr = ({ className: t, renderInput: s, renderOption: n, ...l }, i) => {
+  const {
+    id: r,
+    inputProps: e,
+    internalRef: o,
+    optionsToShow: _,
+    showListbox: w,
+    noOptionsText: A,
+    getListBoxItemProps: h,
+    listboxProps: c
+  } = Or(l), L = (m, E) => {
+    const { key: u, ...b } = h(m, E);
+    return /* @__PURE__ */ y(Q, { ...b, children: n ? n == null ? void 0 : n(m) : m.label }, u);
+  };
+  return /* @__PURE__ */ rr("div", { id: r, ref: (m) => {
+    o.current = m, typeof i == "function" ? i(m) : i && (i.current = m);
+  }, className: W([t, X]), children: [
+    s(e),
+    w && /* @__PURE__ */ y(Ur, { ...c, className: W(`${X}__listbox`), children: _.length ? _.filter((m) => !!m).map(L) : /* @__PURE__ */ y(Q, { noninteractive: !0, children: A }) })
+  ] });
+}, Yr = q(Gr);
+Yr.displayName = "Autocomplete";
+export {
+  Yr as Autocomplete,
+  Or as useAutocomplete
+};
+//# sourceMappingURL=autocomplete.es.js.map