@tcn/ui 0.12.0 → 0.12.2

package/dist/inputs/suggestions/suggestion_list.js

@@ -1,5 +1,5 @@
-import { jsx as r, jsxs as j, Fragment as de } from "react/jsx-runtime";
-import { BodyText as ge } from "../../typography/body_text/body_text.js";
+import { jsx as r, jsxs as j, Fragment as ke } from "react/jsx-runtime";
+import { BodyText as Le } from "../../typography/body_text/body_text.js";
 import "../../typography/callout/callout.js";
 import "../../typography/caption/caption.js";
 import "../../typography/footnote/footnote.js";
@@ -7,89 +7,96 @@ import "../../typography/headline/headline.js";
 import "../../typography/subheadline/subheadline.js";
 import "../../typography/title/title.js";
 import { VStack as q } from "../../stacks/v_stack.js";
-import { ZStack as he } from "../../stacks/z_stack.js";
-import { clsx as H } from "clsx";
-import Z, { Children as me, isValidElement as we, useState as a, useRef as B, useLayoutEffect as h } from "react";
+import { ZStack as ye } from "../../stacks/z_stack.js";
+import { clsx as F } from "clsx";
+import O, { Children as Se, isValidElement as Me, useState as a, useRef as H, useLayoutEffect as m } from "react";
 import "../../utils/click_away_listener.js";
-import { FocusRedirect as be } from "../../utils/focus_redirect.js";
+import { FocusRedirect as Ie } from "../../utils/focus_redirect.js";
 import "../../utils/scroll_away_listener.js";
 import "../../utils/hooks/use_resize_observer.js";
 import "../../utils/dnd/context.js";
 import "../../draggable.module-BgelQsuJ.js";
-import { SuggestionItem as xe } from "./suggestion_item.js";
-import { Option as X } from "../options/option.js";
+import { SuggestionItem as Ce } from "./suggestion_item.js";
+import { Option as Z } from "../options/option.js";
 import "../../actions/button/base_button/base_button.js";
 import "../../actions/button/button_group/button_group.js";
 import "../../actions/button/slim_button/slim_button.js";
-import { Button as ke } from "../../actions/button/button/button.js";
+import { Button as Re } from "../../actions/button/button/button.js";
 import "../../actions/button/select_group/select_group.js";
 import "../../actions/button/select_group/single_select_group.js";
 import "../../actions/toggle/toggle.js";
-import { Popper as Le } from "../../overlay/popper/legacy/popper.js";
-import '../../suggestion_list.css';const ye = "_suggestion-list_711fb17", Se = "_input_a0df060", K = { "suggestion-list": ye, input: Se }, C = 50, Me = 50;
-function Ye({
-  value: R = "",
-  initialSearchValue: E,
-  scrollToValue: m,
+import { Popper as ve } from "../../overlay/popper/legacy/popper.js";
+import '../../suggestion_list.css';const _e = "_suggestion-list_711fb17", Ae = "_input_a0df060", B = { "suggestion-list": _e, input: Ae }, C = 50, De = 50;
+function rt({
+  value: X = "",
+  initialSearchValue: K,
+  scrollToValue: w,
   anchorElement: l,
-  open: v = !1,
-  children: N,
-  onOptionSelect: w,
-  noSuggestionMessage: z = "-- No Matches --",
+  open: R = !1,
+  width: z = "auto",
+  children: E,
+  onOptionSelect: b,
+  noSuggestionMessage: G = "-- No Matches --",
   onClose: L,
-  onChange: O,
+  onChange: N,
   onKeyUp: T,
   onKeyDown: U,
-  trimCustomInput: G = !1,
+  trimCustomInput: J = !1,
   haveValueAsOption: P = !1,
-  restoreFocus: J = !0,
-  ...Q
+  restoreFocus: Q = !0,
+  verticalAnchor: Y = "top",
+  verticalOrigin: ee = "top",
+  verticalOffset: te = -4,
+  horizontalAnchor: se = "start",
+  horizontalOrigin: ne = "start",
+  horizontalOffset: oe = 0,
+  ...ie
 }) {
-  const b = Z.useMemo(
-    () => me.toArray(N).filter(
-      (e) => we(e) && e.type === X
+  const x = O.useMemo(
+    () => Se.toArray(E).filter(
+      (e) => Me(e) && e.type === Z
     ),
-    [N]
-  ), [y, Y] = a(() => {
-    if (m != null) {
-      const e = b.findIndex((o) => o.props.value === m);
+    [E]
+  ), [y, re] = a(() => {
+    if (w != null) {
+      const e = x.findIndex((o) => o.props.value === w);
       if (e !== -1)
         return e;
     }
     return -1;
-  }), A = B(""), _ = B(!1), [ee, V] = a(C), [d, S] = a(y), [x, W] = a(R), c = B(null), [te, se] = a(b.length), [n, D] = a(
+  }), v = H(""), _ = H(!1), [le, V] = a(C), [g, S] = a(y), [u, W] = a(X), c = H(null), [ce, ae] = a(x.length), [n, A] = a(
     () => []
-  ), [ne, oe] = a(), [ie, re] = a();
-  function le(e) {
+  ), [ue, pe] = a(), [de, fe] = a();
+  function ge(e) {
     if (!_.current)
       return;
     _.current = !1;
-    const o = e.key, t = e.currentTarget, s = A.current = o;
-    if (A.current = "", s)
+    const o = e.key, t = e.currentTarget, s = v.current = o;
+    if (v.current = "", s)
       switch (o) {
         case "Enter": {
-          if (n[d] == null) {
-            const u = G ? t.value.trim() : t.value;
-            if (u === "")
+          if (n[g] == null) {
+            const p = J ? t.value.trim() : t.value;
+            if (p === "")
               return;
-            const k = u.toLocaleLowerCase(), g = b.find(
-              (F) => F.props.value.toLocaleLowerCase() === k || F.props.label != null && F.props.label.toLocaleLowerCase() === k
-            ), p = g != null, $ = g?.props.label || u, f = g?.props.value || u;
+            const k = p.toLocaleLowerCase(), h = x.find(
+              (D) => D.props.value.toLocaleLowerCase() === k || D.props.label != null && D.props.label.toLocaleLowerCase() === k
+            ), d = h != null, $ = h?.props.label || p, f = h?.props.value || p;
             requestAnimationFrame(() => {
-              w && w(
+              b && b(
                 f,
                 $,
-                p,
-                g?.props.obfuscate ?? !1
+                d,
+                h?.props.obfuscate ?? !1
               );
             });
             break;
           }
-          const i = n[d].props;
+          const i = n[g].props;
           if (i.disabled)
             break;
           requestAnimationFrame(() => {
-            w && w(
+            b && b(
               i.value,
               i.label,
               !0,
@@ -105,11 +112,11 @@ function Ye({
       }
     T && T(e);
   }
-  function ce(e) {
+  function he(e) {
     const o = e.key;
-    switch (A.current = o, _.current = !0, o) {
+    switch (v.current = o, _.current = !0, o) {
       case "ArrowDown": {
-        let t = d + 1;
+        let t = g + 1;
         for (; t < n.length && n[t]?.props.disabled; )
           t++;
         if (t === n.length) {
@@ -123,7 +130,7 @@ function Ye({
       case "Tab": {
         let t = 1;
         e.shiftKey && (t = -1);
-        let s = d + t;
+        let s = g + t;
         if (t > 0)
           for (; s < n.length && n[s]?.props.disabled; )
             s++;
@@ -143,7 +150,7 @@ function Ye({
         break;
       }
       case "ArrowUp": {
-        let t = d - 1;
+        let t = g - 1;
         for (; t >= 0 && n[t]?.props.disabled; )
           t--;
         if (t === -1) {
@@ -157,124 +164,127 @@ function Ye({
     }
     U && U(e);
   }
-  const M = Z.useCallback(
+  const M = O.useCallback(
     function(o, t) {
-      const s = b.filter((I) => {
-        const i = I.props, u = String(i.label).toLocaleLowerCase(), k = i.keywords?.map((f) => f.toLocaleLowerCase()) || [], g = String(i.value).toLocaleLowerCase(), p = o.toLocaleLowerCase();
-        return i.obfuscate ?? !1 ? u.includes(p) || k.some((f) => f.includes(p)) : u.includes(p) || k.some((f) => f.includes(p)) || g.includes(p);
+      const s = x.filter((I) => {
+        const i = I.props, p = String(i.label).toLocaleLowerCase(), k = i.keywords?.map((f) => f.toLocaleLowerCase()) || [], h = String(i.value).toLocaleLowerCase(), d = o.toLocaleLowerCase();
+        return i.obfuscate ?? !1 ? p.includes(d) || k.some((f) => f.includes(d)) : p.includes(d) || k.some((f) => f.includes(d)) || h.includes(d);
       });
       return P && o.trim().length > 0 && !s.some((I) => I.props.value === o) && s.unshift(
-        /* @__PURE__ */ r(X, { value: o, label: o, keywords: [o], children: o }, "value")
-      ), se(s.length), s.slice(0, t);
+        /* @__PURE__ */ r(Z, { value: o, label: o, keywords: [o], children: o }, "value")
+      ), ae(s.length), s.slice(0, t);
     },
-    [b, P]
+    [x, P]
   );
-  function ae() {
+  function me() {
     const e = c.current;
     e?.focus();
   }
-  function ue() {
+  function we() {
     const e = c.current;
     e != null && L && L(e.value, e.selectionStart, e.selectionEnd);
   }
-  function pe(e) {
+  function be(e) {
     const o = e.currentTarget;
     V(C), W(e.target.value);
     const t = M(o.value, C);
-    D(t), O && O(e.target.value);
+    A(t), N && N(e.target.value);
   }
-  function fe() {
-    const e = ee + Me;
+  function xe() {
+    const e = le + De;
     V(e);
-    const o = M(x, e);
-    D(o);
+    const o = M(u, e);
+    A(o);
   }
-  return h(() => {
+  return m(() => {
     const e = c.current;
-    v && (e != null && e.value.length > 0 ? e.select() : e?.focus());
-  }, [v]), h(() => {
+    R && (e != null && e.value.length > 0 ? e.select() : e?.focus());
+  }, [R]), m(() => {
     if (l != null) {
       const e = l.getBoundingClientRect();
-      oe(`${e.width}px`), re(`${e.height}px`), c.current != null && l instanceof HTMLInputElement && (c.current.value = l.value, c.current.selectionStart = l.selectionStart, c.current.selectionEnd = l.selectionEnd);
+      pe(`${e.width}px`), fe(`${e.height}px`), c.current != null && l instanceof HTMLInputElement && (c.current.value = l.value, c.current.selectionStart = l.selectionStart, c.current.selectionEnd = l.selectionEnd);
     }
-  }, [l]), h(() => {
-    if (m != null) {
+  }, [l]), m(() => {
+    if (w != null) {
       const e = n.findIndex(
-        (o) => o.props.value === m
+        (o) => o.props.value === w
       );
-      Y(e);
+      re(e);
     }
-  }, [n, m]), h(() => {
-    S(x === "" ? y : -1);
-  }, [x, y]), h(() => {
-    W(E ?? "");
-  }, [E]), h(() => {
-    const e = M(R, C);
-    D(e);
-  }, [R, M]), /* @__PURE__ */ r(
-    Le,
+  }, [n, w]), m(() => {
+    S(u === "" ? y : -1);
+  }, [u, y]), m(() => {
+    W(K ?? "");
+  }, [K]), m(() => {
+    const e = M(u, C);
+    A(e);
+  }, [M, u]), /* @__PURE__ */ r(
+    ve,
     {
-      open: v,
+      open: R,
       anchorElement: l,
-      onClose: ue,
-      verticalAnchor: "top",
-      verticalOrigin: "top",
-      verticalOffset: -4,
-      restoreFocus: J,
+      onClose: we,
+      verticalAnchor: Y,
+      verticalOrigin: ee,
+      verticalOffset: te,
+      horizontalAnchor: se,
+      horizontalOrigin: ne,
+      horizontalOffset: oe,
+      restoreFocus: Q,
       children: /* @__PURE__ */ j(
         q,
         {
-          minHeight: `calc(${ie}, 8px)`,
+          minHeight: `calc(${de}, 8px)`,
           maxHeight: "300px",
-          minWidth: ne,
-          width: "auto",
+          minWidth: ue,
+          width: z,
           hAlign: "start",
-          className: H(K["suggestion-list"], "tcn-suggestion-list"),
+          className: F(B["suggestion-list"], "tcn-suggestion-list"),
           children: [
             /* @__PURE__ */ r(
               "input",
               {
                 ref: c,
-                value: x,
-                onKeyUp: le,
-                onKeyDown: ce,
-                onChange: pe,
-                className: H(K.input, "tcn-suggestion-list-search-input"),
-                ...Q
+                value: u,
+                onKeyUp: ge,
+                onKeyDown: he,
+                onChange: be,
+                className: F(B.input, "tcn-suggestion-list-search-input"),
+                ...ie
               },
               -1
             ),
             /* @__PURE__ */ j(q, { children: [
               n.map((e, o) => /* @__PURE__ */ r(
-                xe,
+                Ce,
                 {
                   option: e,
-                  isSelected: o === y && x !== "",
-                  isFocused: o === d,
-                  onClick: w
+                  isSelected: o === y && u !== "",
+                  isFocused: o === g,
+                  onClick: b
                 },
                 o
               )),
-              te > n.length && /* @__PURE__ */ r(de, { children: /* @__PURE__ */ r(
-                ke,
+              ce > n.length && /* @__PURE__ */ r(ke, { children: /* @__PURE__ */ r(
+                Re,
                 {
                   marginBlock: "8px",
                   hierarchy: "tertiary",
-                  onClick: fe,
+                  onClick: xe,
                   children: "Show More"
                 },
                 "show-more"
               ) })
             ] }),
             n.length === 0 && /* @__PURE__ */ r(
-              he,
+              ye,
               {
                 padding: "8px",
-                className: H(K["no-results"], "tcn-suggestion-list-no-results"),
-                children: /* @__PURE__ */ r(ge, { children: z })
+                className: F(B["no-results"], "tcn-suggestion-list-no-results"),
+                children: /* @__PURE__ */ r(Le, { children: G })
               }
             ),
-            /* @__PURE__ */ r(be, { onRedirect: ae }, n.length + 1)
+            /* @__PURE__ */ r(Ie, { onRedirect: me }, n.length + 1)
           ]
         }
       )
@@ -282,6 +292,6 @@ function Ye({
   );
 }
 export {
-  Ye as SuggestionList
+  rt as SuggestionList
 };
 //# sourceMappingURL=suggestion_list.js.map

package/dist/inputs/suggestions/suggestion_list.js.map

@@ -1 +1 @@
-{"version":3,"file":"suggestion_list.js","sources":["../../../src/inputs/suggestions/suggestion_list.tsx"],"sourcesContent":["import { BodyText } from '../../typography/index.js';\nimport { VStack } from '../../stacks/v_stack.js';\nimport { ZStack } from '../../stacks/z_stack.js';\nimport { clsx } from 'clsx';\nimport React, { useLayoutEffect, Children, isValidElement } from 'react';\nimport { useRef, useState } from 'react';\nimport { FocusRedirect } from '../../utils/index.js';\nimport { SuggestionItem } from './suggestion_item.js';\nimport { OptionProps, Option } from '../options/option.js';\nimport styles from './suggestion_list.module.css';\n\nimport { Button } from '../../actions/index.js';\nimport { Popper } from '../../overlay/popper/legacy/popper.js';\n\nconst MAX_RESULTS = 50;\nconst BATCH_SIZE = 50;\n\nexport interface SuggestionListProps\n  extends Omit<React.HTMLAttributes<HTMLInputElement>, 'onChange'> {\n  value?: string;\n  initialSearchValue?: string;\n  scrollToValue?: string;\n  anchorElement: HTMLElement | null;\n  open?: boolean;\n  children?: React.ReactNode;\n  onChange?: (value: string) => void;\n  onOptionSelect?: (\n    value: string,\n    label: string | undefined,\n    isSuggestion: boolean,\n    obfuscate: boolean\n  ) => void;\n  noSuggestionMessage?: React.ReactNode;\n  trimCustomInput?: boolean;\n  haveValueAsOption?: boolean;\n  restoreFocus?: boolean;\n  onClose?: (\n    inputValue: string,\n    cursorStartPosition: number | null,\n    cursorEndPosition: number | null\n  ) => void;\n}\n\nexport function SuggestionList({\n  value = '',\n  initialSearchValue: searchValue,\n  scrollToValue,\n  anchorElement,\n  open = false,\n  children,\n  onOptionSelect,\n  noSuggestionMessage = '-- No Matches --',\n  onClose,\n  onChange,\n  onKeyUp,\n  onKeyDown,\n  trimCustomInput = false,\n  haveValueAsOption = false,\n  restoreFocus = true,\n  ...props\n}: SuggestionListProps) {\n  // Extract valid Option components from children\n  const suggestions = React.useMemo(\n    () =>\n      Children.toArray(children).filter(\n        (child): child is React.ReactElement<OptionProps> =>\n          isValidElement(child) && child.type === Option\n      ),\n    [children]\n  );\n\n  const [selectedIndex, setSelectedIndex] = useState(() => {\n    if (scrollToValue != null) {\n      const index = suggestions.findIndex(option => option.props.value === scrollToValue);\n      if (index !== -1) {\n        return index;\n      }\n    }\n    return -1;\n  });\n\n  const keyPressedDownRef = useRef('');\n  const KeyDownRegistered = useRef(false);\n  const [maxResults, setMaxResults] = useState(MAX_RESULTS);\n  const [focusedIndex, setFocusedIndex] = useState(selectedIndex);\n  const [internalValue, setInternalValue] = useState(value);\n  const internalInputRef = useRef<HTMLInputElement | null>(null);\n  const [totalMatchedLength, setTotalMatchedLength] = useState(suggestions.length);\n  const [matchedOptions, setMatchedOptions] = useState<React.ReactElement<OptionProps>[]>(\n    () => []\n  );\n  const [suggestionsWidth, setSuggestionsWidth] = useState<string | undefined>();\n  const [suggestionsHeight, setSuggestionsHeight] = useState<string | undefined>();\n\n  function handleKeyUp(event: React.KeyboardEvent<HTMLInputElement>) {\n    if (!KeyDownRegistered.current) {\n      return;\n    }\n    KeyDownRegistered.current = false;\n\n    const key = event.key;\n    const input = event.currentTarget;\n\n    const isSameKey = (keyPressedDownRef.current = key);\n    keyPressedDownRef.current = '';\n\n    // Enter and Escape remove the popover, so we want to handle this on keyup.\n    // This prevents from another element from getting the key events.\n    if (isSameKey) {\n      switch (key) {\n        case 'Enter': {\n          if (matchedOptions[focusedIndex] == null) {\n            const value = trimCustomInput ? input.value.trim() : input.value;\n\n            if (value === '') {\n              return;\n            }\n\n            const lowercaseValue = value.toLocaleLowerCase();\n            const option = suggestions.find(\n              option =>\n                option.props.value.toLocaleLowerCase() === lowercaseValue ||\n                (option.props.label != null &&\n                  option.props.label.toLocaleLowerCase() === lowercaseValue)\n            );\n\n            const isSuggestion = option != null;\n            const label = option?.props.label || value;\n            const optionValue = option?.props.value || value;\n\n            requestAnimationFrame(() => {\n              onOptionSelect &&\n                onOptionSelect(\n                  optionValue,\n                  label,\n                  isSuggestion,\n                  option?.props.obfuscate ?? false\n                );\n            });\n\n            break;\n          }\n          const selectedOption = matchedOptions[focusedIndex];\n          const optionProps = selectedOption.props;\n\n          // Don't select disabled options\n          if (optionProps.disabled) {\n            break;\n          }\n\n          requestAnimationFrame(() => {\n            onOptionSelect &&\n              onOptionSelect(\n                optionProps.value,\n                optionProps.label,\n                true,\n                optionProps.obfuscate ?? false\n              );\n          });\n          break;\n        }\n        case 'Escape': {\n          onClose && onClose(input.value, input.selectionStart, input.selectionEnd);\n          break;\n        }\n      }\n    }\n\n    onKeyUp && onKeyUp(event);\n  }\n\n  function handleKeyDown(event: React.KeyboardEvent<HTMLInputElement>) {\n    const key = event.key;\n    keyPressedDownRef.current = key;\n    KeyDownRegistered.current = true;\n    // We handle these key events on keydown to be responsive navigation.\n    switch (key) {\n      case 'ArrowDown': {\n        let newIndex = focusedIndex + 1;\n\n        // Skip disabled options\n        while (\n          newIndex < matchedOptions.length &&\n          matchedOptions[newIndex]?.props.disabled\n        ) {\n          newIndex++;\n        }\n\n        if (newIndex === matchedOptions.length) {\n          // Wrap around to first non-disabled option\n          newIndex = 0;\n          while (\n            newIndex < matchedOptions.length &&\n            matchedOptions[newIndex]?.props.disabled\n          ) {\n            newIndex++;\n          }\n          // If all options are disabled, stay at -1\n          if (newIndex === matchedOptions.length) {\n            newIndex = -1;\n          }\n        }\n\n        setFocusedIndex(newIndex);\n        event.preventDefault();\n        break;\n      }\n      case 'Tab': {\n        let step = 1;\n        if (event.shiftKey) {\n          step = -1;\n        }\n        let newIndex = focusedIndex + step;\n        // Skip disabled options\n        if (step > 0) {\n          while (\n            newIndex < matchedOptions.length &&\n            matchedOptions[newIndex]?.props.disabled\n          ) {\n            newIndex++;\n          }\n        } else {\n          while (newIndex >= 0 && matchedOptions[newIndex]?.props.disabled) {\n            newIndex--;\n          }\n        }\n\n        if (newIndex === matchedOptions.length) {\n          // Wrap around to first non-disabled option\n          newIndex = 0;\n          while (\n            newIndex < matchedOptions.length &&\n            matchedOptions[newIndex]?.props.disabled\n          ) {\n            newIndex++;\n          }\n          // If all options are disabled, stay at -1\n          if (newIndex === matchedOptions.length) {\n            newIndex = -1;\n          }\n        } else if (newIndex <= -1) {\n          // Wrap around to last non-disabled option\n          newIndex = matchedOptions.length - 1;\n          while (newIndex >= 0 && matchedOptions[newIndex]?.props.disabled) {\n            newIndex--;\n          }\n          // If all options are disabled, stay at -1\n          if (newIndex === -1) {\n            newIndex = -1;\n          }\n        }\n\n        setFocusedIndex(newIndex);\n        event.preventDefault();\n        break;\n      }\n      case 'ArrowUp': {\n        let newIndex = focusedIndex - 1;\n\n        // Skip disabled options\n        while (newIndex >= 0 && matchedOptions[newIndex]?.props.disabled) {\n          newIndex--;\n        }\n\n        if (newIndex === -1) {\n          // Wrap around to last non-disabled option\n          newIndex = matchedOptions.length - 1;\n          while (newIndex >= 0 && matchedOptions[newIndex]?.props.disabled) {\n            newIndex--;\n          }\n          // If all options are disabled, stay at -1\n          if (newIndex === -1) {\n            newIndex = -1;\n          }\n        }\n\n        setFocusedIndex(newIndex);\n        event.preventDefault();\n        break;\n      }\n    }\n    onKeyDown && onKeyDown(event);\n  }\n\n  const getMatchedOptions = React.useCallback(\n    function getMatchedOptions(value: string, maxResults: number) {\n      const results = suggestions.filter(option => {\n        const props = option.props;\n        const label = String(props.label).toLocaleLowerCase();\n        const keywords = props.keywords?.map(k => k.toLocaleLowerCase()) || [];\n        const optionValue = String(props.value).toLocaleLowerCase();\n        const searchValue = value.toLocaleLowerCase();\n        const obfuscate = props.obfuscate ?? false;\n\n        // Obfuscated options can only be searched by label or keywords, not by value\n        if (obfuscate) {\n          return (\n            label.includes(searchValue) || keywords.some(k => k.includes(searchValue))\n          );\n        }\n\n        return (\n          label.includes(searchValue) ||\n          keywords.some(k => k.includes(searchValue)) ||\n          optionValue.includes(searchValue)\n        );\n      });\n\n      if (\n        haveValueAsOption &&\n        value.trim().length > 0 &&\n        !results.some(r => r.props.value === value)\n      ) {\n        results.unshift(\n          <Option key=\"value\" value={value} label={value} keywords={[value]}>\n            {value}\n          </Option>\n        );\n      }\n\n      setTotalMatchedLength(results.length);\n      return results.slice(0, maxResults);\n    },\n    [suggestions, haveValueAsOption]\n  );\n\n  function focusInput() {\n    const input = internalInputRef.current;\n    if (input != null) {\n      input.focus();\n    }\n  }\n\n  function handleUseClose() {\n    const input = internalInputRef.current;\n    if (input != null) {\n      onClose && onClose(input.value, input.selectionStart, input.selectionEnd);\n    }\n  }\n\n  function handleChange(event: React.ChangeEvent<HTMLInputElement>) {\n    const input = event.currentTarget;\n\n    setMaxResults(MAX_RESULTS);\n    setInternalValue(event.target.value);\n\n    const newMatches = getMatchedOptions(input.value, MAX_RESULTS);\n    setMatchedOptions(newMatches);\n\n    onChange && onChange(event.target.value);\n  }\n\n  function handleShowMore() {\n    const newMaxResults = maxResults + BATCH_SIZE;\n    setMaxResults(newMaxResults);\n    const newMatches = getMatchedOptions(internalValue, newMaxResults);\n    setMatchedOptions(newMatches);\n  }\n\n  useLayoutEffect(() => {\n    const input = internalInputRef.current;\n\n    if (!open) {\n      return;\n    }\n\n    if (input != null && input.value.length > 0) {\n      input.select();\n    } else if (input != null) {\n      input.focus();\n    }\n  }, [open]);\n\n  useLayoutEffect(() => {\n    if (anchorElement != null) {\n      const rect = anchorElement.getBoundingClientRect();\n      setSuggestionsWidth(`${rect.width}px`);\n      setSuggestionsHeight(`${rect.height}px`);\n\n      if (internalInputRef.current != null && anchorElement instanceof HTMLInputElement) {\n        internalInputRef.current.value = anchorElement.value;\n        internalInputRef.current.selectionStart = anchorElement.selectionStart;\n        internalInputRef.current.selectionEnd = anchorElement.selectionEnd;\n      }\n    }\n  }, [anchorElement]);\n\n  useLayoutEffect(() => {\n    if (scrollToValue != null) {\n      const index = matchedOptions.findIndex(\n        option => option.props.value === scrollToValue\n      );\n      setSelectedIndex(index);\n    }\n  }, [matchedOptions, scrollToValue]);\n\n  useLayoutEffect(() => {\n    setFocusedIndex(internalValue === '' ? selectedIndex : -1);\n  }, [internalValue, selectedIndex]);\n\n  useLayoutEffect(() => {\n    setInternalValue(searchValue ?? '');\n  }, [searchValue]);\n\n  useLayoutEffect(() => {\n    const newMatches = getMatchedOptions(value, MAX_RESULTS);\n    setMatchedOptions(newMatches);\n  }, [value, getMatchedOptions]);\n\n  return (\n    <Popper\n      open={open}\n      anchorElement={anchorElement}\n      onClose={handleUseClose}\n      verticalAnchor=\"top\"\n      verticalOrigin=\"top\"\n      verticalOffset={-4}\n      restoreFocus={restoreFocus}\n    >\n      <VStack\n        minHeight={`calc(${suggestionsHeight}, 8px)`}\n        maxHeight=\"300px\"\n        minWidth={suggestionsWidth}\n        width=\"auto\"\n        hAlign=\"start\"\n        className={clsx(styles['suggestion-list'], 'tcn-suggestion-list')}\n      >\n        <input\n          ref={internalInputRef}\n          key={-1}\n          value={internalValue}\n          onKeyUp={handleKeyUp}\n          onKeyDown={handleKeyDown}\n          onChange={handleChange}\n          className={clsx(styles.input, 'tcn-suggestion-list-search-input')}\n          {...props}\n        />\n        <VStack>\n          {matchedOptions.map((option, index) => (\n            <SuggestionItem\n              key={index}\n              option={option}\n              isSelected={index === selectedIndex && internalValue !== ''}\n              isFocused={index === focusedIndex}\n              onClick={onOptionSelect}\n            />\n          ))}\n          {totalMatchedLength > matchedOptions.length && (\n            <>\n              <Button\n                key=\"show-more\"\n                marginBlock=\"8px\"\n                hierarchy=\"tertiary\"\n                onClick={handleShowMore}\n              >\n                Show More\n              </Button>\n            </>\n          )}\n        </VStack>\n        {matchedOptions.length === 0 && (\n          <ZStack\n            padding=\"8px\"\n            className={clsx(styles['no-results'], 'tcn-suggestion-list-no-results')}\n          >\n            <BodyText>{noSuggestionMessage}</BodyText>\n          </ZStack>\n        )}\n        <FocusRedirect key={matchedOptions.length + 1} onRedirect={focusInput} />\n      </VStack>\n    </Popper>\n  );\n}\n"],"names":["MAX_RESULTS","BATCH_SIZE","SuggestionList","value","searchValue","scrollToValue","anchorElement","open","children","onOptionSelect","noSuggestionMessage","onClose","onChange","onKeyUp","onKeyDown","trimCustomInput","haveValueAsOption","restoreFocus","props","suggestions","React","Children","child","isValidElement","Option","selectedIndex","setSelectedIndex","useState","index","option","keyPressedDownRef","useRef","KeyDownRegistered","maxResults","setMaxResults","focusedIndex","setFocusedIndex","internalValue","setInternalValue","internalInputRef","totalMatchedLength","setTotalMatchedLength","matchedOptions","setMatchedOptions","suggestionsWidth","setSuggestionsWidth","suggestionsHeight","setSuggestionsHeight","handleKeyUp","event","key","input","isSameKey","lowercaseValue","isSuggestion","label","optionValue","optionProps","handleKeyDown","newIndex","step","getMatchedOptions","results","keywords","k","r","jsx","focusInput","handleUseClose","handleChange","newMatches","handleShowMore","newMaxResults","useLayoutEffect","rect","Popper","jsxs","VStack","clsx","styles","SuggestionItem","Fragment","Button","ZStack","BodyText","FocusRedirect"],"mappings":"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"}
+{"version":3,"file":"suggestion_list.js","sources":["../../../src/inputs/suggestions/suggestion_list.tsx"],"sourcesContent":["import { BodyText } from '../../typography/index.js';\nimport { VStack } from '../../stacks/v_stack.js';\nimport { ZStack } from '../../stacks/z_stack.js';\nimport { clsx } from 'clsx';\nimport React, { useLayoutEffect, Children, isValidElement } from 'react';\nimport { useRef, useState } from 'react';\nimport { FocusRedirect } from '../../utils/index.js';\nimport { SuggestionItem } from './suggestion_item.js';\nimport { OptionProps, Option } from '../options/option.js';\nimport styles from './suggestion_list.module.css';\n\nimport { Button } from '../../actions/index.js';\nimport { Popper } from '../../overlay/popper/legacy/popper.js';\n\nconst MAX_RESULTS = 50;\nconst BATCH_SIZE = 50;\n\nexport interface SuggestionListProps\n  extends Omit<React.HTMLAttributes<HTMLInputElement>, 'onChange'> {\n  value?: string;\n  initialSearchValue?: string;\n  scrollToValue?: string;\n  anchorElement: HTMLElement | null;\n  open?: boolean;\n  children?: React.ReactNode;\n  onChange?: (value: string) => void;\n  width?: string;\n  onOptionSelect?: (\n    value: string,\n    label: string | undefined,\n    isSuggestion: boolean,\n    obfuscate: boolean\n  ) => void;\n  noSuggestionMessage?: React.ReactNode;\n  trimCustomInput?: boolean;\n  haveValueAsOption?: boolean;\n  restoreFocus?: boolean;\n  onClose?: (\n    inputValue: string,\n    cursorStartPosition: number | null,\n    cursorEndPosition: number | null\n  ) => void;\n  verticalAnchor?: 'top' | 'center' | 'bottom';\n  verticalOrigin?: 'top' | 'center' | 'bottom';\n  verticalOffset?: number;\n  horizontalAnchor?: 'start' | 'center' | 'end';\n  horizontalOrigin?: 'start' | 'center' | 'end';\n  horizontalOffset?: number;\n}\n\nexport function SuggestionList({\n  value = '',\n  initialSearchValue: searchValue,\n  scrollToValue,\n  anchorElement,\n  open = false,\n  width = 'auto',\n  children,\n  onOptionSelect,\n  noSuggestionMessage = '-- No Matches --',\n  onClose,\n  onChange,\n  onKeyUp,\n  onKeyDown,\n  trimCustomInput = false,\n  haveValueAsOption = false,\n  restoreFocus = true,\n  verticalAnchor = 'top',\n  verticalOrigin = 'top',\n  verticalOffset = -4,\n  horizontalAnchor = 'start',\n  horizontalOrigin = 'start',\n  horizontalOffset = 0,\n  ...props\n}: SuggestionListProps) {\n  // Extract valid Option components from children\n  const suggestions = React.useMemo(\n    () =>\n      Children.toArray(children).filter(\n        (child): child is React.ReactElement<OptionProps> =>\n          isValidElement(child) && child.type === Option\n      ),\n    [children]\n  );\n\n  const [selectedIndex, setSelectedIndex] = useState(() => {\n    if (scrollToValue != null) {\n      const index = suggestions.findIndex(option => option.props.value === scrollToValue);\n      if (index !== -1) {\n        return index;\n      }\n    }\n    return -1;\n  });\n\n  const keyPressedDownRef = useRef('');\n  const KeyDownRegistered = useRef(false);\n  const [maxResults, setMaxResults] = useState(MAX_RESULTS);\n  const [focusedIndex, setFocusedIndex] = useState(selectedIndex);\n  const [internalValue, setInternalValue] = useState(value);\n  const internalInputRef = useRef<HTMLInputElement | null>(null);\n  const [totalMatchedLength, setTotalMatchedLength] = useState(suggestions.length);\n  const [matchedOptions, setMatchedOptions] = useState<React.ReactElement<OptionProps>[]>(\n    () => []\n  );\n  const [suggestionsWidth, setSuggestionsWidth] = useState<string | undefined>();\n  const [suggestionsHeight, setSuggestionsHeight] = useState<string | undefined>();\n\n  function handleKeyUp(event: React.KeyboardEvent<HTMLInputElement>) {\n    if (!KeyDownRegistered.current) {\n      return;\n    }\n    KeyDownRegistered.current = false;\n\n    const key = event.key;\n    const input = event.currentTarget;\n\n    const isSameKey = (keyPressedDownRef.current = key);\n    keyPressedDownRef.current = '';\n\n    // Enter and Escape remove the popover, so we want to handle this on keyup.\n    // This prevents from another element from getting the key events.\n    if (isSameKey) {\n      switch (key) {\n        case 'Enter': {\n          if (matchedOptions[focusedIndex] == null) {\n            const value = trimCustomInput ? input.value.trim() : input.value;\n\n            if (value === '') {\n              return;\n            }\n\n            const lowercaseValue = value.toLocaleLowerCase();\n            const option = suggestions.find(\n              option =>\n                option.props.value.toLocaleLowerCase() === lowercaseValue ||\n                (option.props.label != null &&\n                  option.props.label.toLocaleLowerCase() === lowercaseValue)\n            );\n\n            const isSuggestion = option != null;\n            const label = option?.props.label || value;\n            const optionValue = option?.props.value || value;\n\n            requestAnimationFrame(() => {\n              onOptionSelect &&\n                onOptionSelect(\n                  optionValue,\n                  label,\n                  isSuggestion,\n                  option?.props.obfuscate ?? false\n                );\n            });\n\n            break;\n          }\n          const selectedOption = matchedOptions[focusedIndex];\n          const optionProps = selectedOption.props;\n\n          // Don't select disabled options\n          if (optionProps.disabled) {\n            break;\n          }\n\n          requestAnimationFrame(() => {\n            onOptionSelect &&\n              onOptionSelect(\n                optionProps.value,\n                optionProps.label,\n                true,\n                optionProps.obfuscate ?? false\n              );\n          });\n          break;\n        }\n        case 'Escape': {\n          onClose && onClose(input.value, input.selectionStart, input.selectionEnd);\n          break;\n        }\n      }\n    }\n\n    onKeyUp && onKeyUp(event);\n  }\n\n  function handleKeyDown(event: React.KeyboardEvent<HTMLInputElement>) {\n    const key = event.key;\n    keyPressedDownRef.current = key;\n    KeyDownRegistered.current = true;\n    // We handle these key events on keydown to be responsive navigation.\n    switch (key) {\n      case 'ArrowDown': {\n        let newIndex = focusedIndex + 1;\n\n        // Skip disabled options\n        while (\n          newIndex < matchedOptions.length &&\n          matchedOptions[newIndex]?.props.disabled\n        ) {\n          newIndex++;\n        }\n\n        if (newIndex === matchedOptions.length) {\n          // Wrap around to first non-disabled option\n          newIndex = 0;\n          while (\n            newIndex < matchedOptions.length &&\n            matchedOptions[newIndex]?.props.disabled\n          ) {\n            newIndex++;\n          }\n          // If all options are disabled, stay at -1\n          if (newIndex === matchedOptions.length) {\n            newIndex = -1;\n          }\n        }\n\n        setFocusedIndex(newIndex);\n        event.preventDefault();\n        break;\n      }\n      case 'Tab': {\n        let step = 1;\n        if (event.shiftKey) {\n          step = -1;\n        }\n        let newIndex = focusedIndex + step;\n        // Skip disabled options\n        if (step > 0) {\n          while (\n            newIndex < matchedOptions.length &&\n            matchedOptions[newIndex]?.props.disabled\n          ) {\n            newIndex++;\n          }\n        } else {\n          while (newIndex >= 0 && matchedOptions[newIndex]?.props.disabled) {\n            newIndex--;\n          }\n        }\n\n        if (newIndex === matchedOptions.length) {\n          // Wrap around to first non-disabled option\n          newIndex = 0;\n          while (\n            newIndex < matchedOptions.length &&\n            matchedOptions[newIndex]?.props.disabled\n          ) {\n            newIndex++;\n          }\n          // If all options are disabled, stay at -1\n          if (newIndex === matchedOptions.length) {\n            newIndex = -1;\n          }\n        } else if (newIndex <= -1) {\n          // Wrap around to last non-disabled option\n          newIndex = matchedOptions.length - 1;\n          while (newIndex >= 0 && matchedOptions[newIndex]?.props.disabled) {\n            newIndex--;\n          }\n          // If all options are disabled, stay at -1\n          if (newIndex === -1) {\n            newIndex = -1;\n          }\n        }\n\n        setFocusedIndex(newIndex);\n        event.preventDefault();\n        break;\n      }\n      case 'ArrowUp': {\n        let newIndex = focusedIndex - 1;\n\n        // Skip disabled options\n        while (newIndex >= 0 && matchedOptions[newIndex]?.props.disabled) {\n          newIndex--;\n        }\n\n        if (newIndex === -1) {\n          // Wrap around to last non-disabled option\n          newIndex = matchedOptions.length - 1;\n          while (newIndex >= 0 && matchedOptions[newIndex]?.props.disabled) {\n            newIndex--;\n          }\n          // If all options are disabled, stay at -1\n          if (newIndex === -1) {\n            newIndex = -1;\n          }\n        }\n\n        setFocusedIndex(newIndex);\n        event.preventDefault();\n        break;\n      }\n    }\n    onKeyDown && onKeyDown(event);\n  }\n\n  const getMatchedOptions = React.useCallback(\n    function getMatchedOptions(value: string, maxResults: number) {\n      const results = suggestions.filter(option => {\n        const props = option.props;\n        const label = String(props.label).toLocaleLowerCase();\n        const keywords = props.keywords?.map(k => k.toLocaleLowerCase()) || [];\n        const optionValue = String(props.value).toLocaleLowerCase();\n        const searchValue = value.toLocaleLowerCase();\n        const obfuscate = props.obfuscate ?? false;\n\n        // Obfuscated options can only be searched by label or keywords, not by value\n        if (obfuscate) {\n          return (\n            label.includes(searchValue) || keywords.some(k => k.includes(searchValue))\n          );\n        }\n\n        return (\n          label.includes(searchValue) ||\n          keywords.some(k => k.includes(searchValue)) ||\n          optionValue.includes(searchValue)\n        );\n      });\n\n      if (\n        haveValueAsOption &&\n        value.trim().length > 0 &&\n        !results.some(r => r.props.value === value)\n      ) {\n        results.unshift(\n          <Option key=\"value\" value={value} label={value} keywords={[value]}>\n            {value}\n          </Option>\n        );\n      }\n\n      setTotalMatchedLength(results.length);\n      return results.slice(0, maxResults);\n    },\n    [suggestions, haveValueAsOption]\n  );\n\n  function focusInput() {\n    const input = internalInputRef.current;\n    if (input != null) {\n      input.focus();\n    }\n  }\n\n  function handleUseClose() {\n    const input = internalInputRef.current;\n    if (input != null) {\n      onClose && onClose(input.value, input.selectionStart, input.selectionEnd);\n    }\n  }\n\n  function handleChange(event: React.ChangeEvent<HTMLInputElement>) {\n    const input = event.currentTarget;\n\n    setMaxResults(MAX_RESULTS);\n    setInternalValue(event.target.value);\n\n    const newMatches = getMatchedOptions(input.value, MAX_RESULTS);\n    setMatchedOptions(newMatches);\n\n    onChange && onChange(event.target.value);\n  }\n\n  function handleShowMore() {\n    const newMaxResults = maxResults + BATCH_SIZE;\n    setMaxResults(newMaxResults);\n    const newMatches = getMatchedOptions(internalValue, newMaxResults);\n    setMatchedOptions(newMatches);\n  }\n\n  useLayoutEffect(() => {\n    const input = internalInputRef.current;\n\n    if (!open) {\n      return;\n    }\n\n    if (input != null && input.value.length > 0) {\n      input.select();\n    } else if (input != null) {\n      input.focus();\n    }\n  }, [open]);\n\n  useLayoutEffect(() => {\n    if (anchorElement != null) {\n      const rect = anchorElement.getBoundingClientRect();\n      setSuggestionsWidth(`${rect.width}px`);\n      setSuggestionsHeight(`${rect.height}px`);\n\n      if (internalInputRef.current != null && anchorElement instanceof HTMLInputElement) {\n        internalInputRef.current.value = anchorElement.value;\n        internalInputRef.current.selectionStart = anchorElement.selectionStart;\n        internalInputRef.current.selectionEnd = anchorElement.selectionEnd;\n      }\n    }\n  }, [anchorElement]);\n\n  useLayoutEffect(() => {\n    if (scrollToValue != null) {\n      const index = matchedOptions.findIndex(\n        option => option.props.value === scrollToValue\n      );\n      setSelectedIndex(index);\n    }\n  }, [matchedOptions, scrollToValue]);\n\n  useLayoutEffect(() => {\n    setFocusedIndex(internalValue === '' ? selectedIndex : -1);\n  }, [internalValue, selectedIndex]);\n\n  useLayoutEffect(() => {\n    setInternalValue(searchValue ?? '');\n  }, [searchValue]);\n\n  useLayoutEffect(() => {\n    const newMatches = getMatchedOptions(internalValue, MAX_RESULTS);\n    setMatchedOptions(newMatches);\n  }, [getMatchedOptions, internalValue]);\n\n  return (\n    <Popper\n      open={open}\n      anchorElement={anchorElement}\n      onClose={handleUseClose}\n      verticalAnchor={verticalAnchor}\n      verticalOrigin={verticalOrigin}\n      verticalOffset={verticalOffset}\n      horizontalAnchor={horizontalAnchor}\n      horizontalOrigin={horizontalOrigin}\n      horizontalOffset={horizontalOffset}\n      restoreFocus={restoreFocus}\n    >\n      <VStack\n        minHeight={`calc(${suggestionsHeight}, 8px)`}\n        maxHeight=\"300px\"\n        minWidth={suggestionsWidth}\n        width={width}\n        hAlign=\"start\"\n        className={clsx(styles['suggestion-list'], 'tcn-suggestion-list')}\n      >\n        <input\n          ref={internalInputRef}\n          key={-1}\n          value={internalValue}\n          onKeyUp={handleKeyUp}\n          onKeyDown={handleKeyDown}\n          onChange={handleChange}\n          className={clsx(styles.input, 'tcn-suggestion-list-search-input')}\n          {...props}\n        />\n        <VStack>\n          {matchedOptions.map((option, index) => (\n            <SuggestionItem\n              key={index}\n              option={option}\n              isSelected={index === selectedIndex && internalValue !== ''}\n              isFocused={index === focusedIndex}\n              onClick={onOptionSelect}\n            />\n          ))}\n          {totalMatchedLength > matchedOptions.length && (\n            <>\n              <Button\n                key=\"show-more\"\n                marginBlock=\"8px\"\n                hierarchy=\"tertiary\"\n                onClick={handleShowMore}\n              >\n                Show More\n              </Button>\n            </>\n          )}\n        </VStack>\n        {matchedOptions.length === 0 && (\n          <ZStack\n            padding=\"8px\"\n            className={clsx(styles['no-results'], 'tcn-suggestion-list-no-results')}\n          >\n            <BodyText>{noSuggestionMessage}</BodyText>\n          </ZStack>\n        )}\n        <FocusRedirect key={matchedOptions.length + 1} onRedirect={focusInput} />\n      </VStack>\n    </Popper>\n  );\n}\n"],"names":["MAX_RESULTS","BATCH_SIZE","SuggestionList","value","searchValue","scrollToValue","anchorElement","open","width","children","onOptionSelect","noSuggestionMessage","onClose","onChange","onKeyUp","onKeyDown","trimCustomInput","haveValueAsOption","restoreFocus","verticalAnchor","verticalOrigin","verticalOffset","horizontalAnchor","horizontalOrigin","horizontalOffset","props","suggestions","React","Children","child","isValidElement","Option","selectedIndex","setSelectedIndex","useState","index","option","keyPressedDownRef","useRef","KeyDownRegistered","maxResults","setMaxResults","focusedIndex","setFocusedIndex","internalValue","setInternalValue","internalInputRef","totalMatchedLength","setTotalMatchedLength","matchedOptions","setMatchedOptions","suggestionsWidth","setSuggestionsWidth","suggestionsHeight","setSuggestionsHeight","handleKeyUp","event","key","input","isSameKey","lowercaseValue","isSuggestion","label","optionValue","optionProps","handleKeyDown","newIndex","step","getMatchedOptions","results","keywords","k","r","jsx","focusInput","handleUseClose","handleChange","newMatches","handleShowMore","newMaxResults","useLayoutEffect","rect","Popper","jsxs","VStack","clsx","styles","SuggestionItem","Fragment","Button","ZStack","BodyText","FocusRedirect"],"mappings":"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"}

package/dist/surfaces/pop_confirm/pop_confirm.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"pop_confirm.d.ts","sourceRoot":"","sources":["../../../src/surfaces/pop_confirm/pop_confirm.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,EAEL,KAAK,kBAAkB,EACxB,MAAM,wCAAwC,CAAC;AAEhD,MAAM,MAAM,eAAe,GAAG,kBAAkB,CAAC;AAEjD,eAAO,MAAM,UAAU,iLAmBtB,CAAC"}
+{"version":3,"file":"pop_confirm.d.ts","sourceRoot":"","sources":["../../../src/surfaces/pop_confirm/pop_confirm.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,EAEL,KAAK,kBAAkB,EACxB,MAAM,wCAAwC,CAAC;AAEhD,MAAM,MAAM,eAAe,GAAG,kBAAkB,CAAC;AAEjD,eAAO,MAAM,UAAU,iLAyBtB,CAAC"}

package/dist/surfaces/pop_confirm/pop_confirm.js

@@ -1,6 +1,6 @@
 import { jsx as o } from "react/jsx-runtime";
-import { clsx as f } from "clsx";
-import e from "react";
+import { clsx as e } from "clsx";
+import n from "react";
 import "../../layouts/column/column.js";
 import "../../divider.module-FptFV0PX.js";
 import "../../layouts/grid/grid.js";
@@ -8,7 +8,7 @@ import "../../layouts/list/item.js";
 import "../../layouts/list/list.js";
 import "../../layouts/sidebar_end/sidebar_end.js";
 import "../../layouts/sidebar_start/sidebar_start.js";
-import { Scaffold as n } from "../../layouts/scaffold/scaffold.js";
+import { Scaffold as c } from "../../layouts/scaffold/scaffold.js";
 import "../../layouts/body/h_body.js";
 import "../../layouts/body/v_body.js";
 import "../../layouts/footer/footer.js";
@@ -29,24 +29,30 @@ import "../../stacks/z_stack.js";
 import "../../layouts/rail/rail.js";
 import "../../layouts/rail/side/side.js";
 import "../../layouts/rail/utility_strip/utility_strip.js";
-import { PopperDismissal as c } from "../../overlay/popper/base/dismissal_decorator.js";
+import { PopperDismissal as l } from "../../overlay/popper/base/dismissal_decorator.js";
 import { ElementPopper as s } from "../../overlay/popper/element_popper.js";
-const M = e.forwardRef(
-  function({ children: r, className: i, dismissals: m = [c.CLICK_AWAY], ...p }, t) {
+const O = n.forwardRef(
+  function({
+    children: r,
+    className: m,
+    precision: t = "low",
+    dismissals: i = [l.CLICK_AWAY],
+    ...p
+  }, f) {
     return /* @__PURE__ */ o(
       s,
       {
-        ref: t,
-        precision: "high",
-        className: f(i, "tcn-pop-confirm"),
-        dismissals: m,
+        ref: f,
+        precision: t,
+        className: e(m, "tcn-pop-confirm"),
+        dismissals: i,
         ...p,
-        children: /* @__PURE__ */ o(n, { width: "100%", height: "100%", children: r })
+        children: /* @__PURE__ */ o(c, { width: "100%", height: "100%", children: r })
       }
     );
   }
 );
 export {
-  M as PopConfirm
+  O as PopConfirm
 };
 //# sourceMappingURL=pop_confirm.js.map

package/dist/surfaces/pop_confirm/pop_confirm.js.map

@@ -1 +1 @@
-{"version":3,"file":"pop_confirm.js","sources":["../../../src/surfaces/pop_confirm/pop_confirm.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport React from 'react';\nimport { Scaffold } from '../../layouts/index.js';\nimport { PopperDismissal } from '../../overlay/popper/base/dismissal_decorator.js';\nimport {\n  ElementPopper,\n  type ElementPopperProps,\n} from '../../overlay/popper/element_popper.js';\n\nexport type PopConfirmProps = ElementPopperProps;\n\nexport const PopConfirm = React.forwardRef<HTMLDivElement, PopConfirmProps>(\n  function PopConfirm(\n    { children, className, dismissals = [PopperDismissal.CLICK_AWAY], ...props },\n    ref\n  ) {\n    return (\n      <ElementPopper\n        ref={ref}\n        precision=\"high\"\n        className={clsx(className, 'tcn-pop-confirm')}\n        dismissals={dismissals}\n        {...props}\n      >\n        <Scaffold width={'100%'} height={'100%'}>\n          {children}\n        </Scaffold>\n      </ElementPopper>\n    );\n  }\n);\n"],"names":["PopConfirm","React","children","className","dismissals","PopperDismissal","props","ref","jsx","ElementPopper","clsx","Scaffold"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAWO,MAAMA,IAAaC,EAAM;AAAA,EAC9B,SACE,EAAE,UAAAC,GAAU,WAAAC,GAAW,YAAAC,IAAa,CAACC,EAAgB,UAAU,GAAG,GAAGC,EAAA,GACrEC,GACA;AACA,WACE,gBAAAC;AAAA,MAACC;AAAA,MAAA;AAAA,QACC,KAAAF;AAAA,QACA,WAAU;AAAA,QACV,WAAWG,EAAKP,GAAW,iBAAiB;AAAA,QAC5C,YAAAC;AAAA,QACC,GAAGE;AAAA,QAEJ,4BAACK,GAAA,EAAS,OAAO,QAAQ,QAAQ,QAC9B,UAAAT,EAAA,CACH;AAAA,MAAA;AAAA,IAAA;AAAA,EAGN;AACF;"}
+{"version":3,"file":"pop_confirm.js","sources":["../../../src/surfaces/pop_confirm/pop_confirm.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport React from 'react';\nimport { Scaffold } from '../../layouts/index.js';\nimport { PopperDismissal } from '../../overlay/popper/base/dismissal_decorator.js';\nimport {\n  ElementPopper,\n  type ElementPopperProps,\n} from '../../overlay/popper/element_popper.js';\n\nexport type PopConfirmProps = ElementPopperProps;\n\nexport const PopConfirm = React.forwardRef<HTMLDivElement, PopConfirmProps>(\n  function PopConfirm(\n    {\n      children,\n      className,\n      precision = 'low',\n      dismissals = [PopperDismissal.CLICK_AWAY],\n      ...props\n    },\n    ref\n  ) {\n    return (\n      <ElementPopper\n        ref={ref}\n        precision={precision}\n        className={clsx(className, 'tcn-pop-confirm')}\n        dismissals={dismissals}\n        {...props}\n      >\n        <Scaffold width={'100%'} height={'100%'}>\n          {children}\n        </Scaffold>\n      </ElementPopper>\n    );\n  }\n);\n"],"names":["PopConfirm","React","children","className","precision","dismissals","PopperDismissal","props","ref","jsx","ElementPopper","clsx","Scaffold"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAWO,MAAMA,IAAaC,EAAM;AAAA,EAC9B,SACE;AAAA,IACE,UAAAC;AAAA,IACA,WAAAC;AAAA,IACA,WAAAC,IAAY;AAAA,IACZ,YAAAC,IAAa,CAACC,EAAgB,UAAU;AAAA,IACxC,GAAGC;AAAA,EAAA,GAELC,GACA;AACA,WACE,gBAAAC;AAAA,MAACC;AAAA,MAAA;AAAA,QACC,KAAAF;AAAA,QACA,WAAAJ;AAAA,QACA,WAAWO,EAAKR,GAAW,iBAAiB;AAAA,QAC5C,YAAAE;AAAA,QACC,GAAGE;AAAA,QAEJ,4BAACK,GAAA,EAAS,OAAO,QAAQ,QAAQ,QAC9B,UAAAV,EAAA,CACH;AAAA,MAAA;AAAA,IAAA;AAAA,EAGN;AACF;"}

package/dist/surfaces/tooltip/tooltip.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"tooltip.d.ts","sourceRoot":"","sources":["../../../src/surfaces/tooltip/tooltip.tsx"],"names":[],"mappings":"AACA,OAAO,KAA+C,MAAM,OAAO,CAAC;AAEpE,OAAO,EAEL,KAAK,kBAAkB,EACxB,MAAM,wCAAwC,CAAC;AAGhD,MAAM,WAAW,YAAa,SAAQ,IAAI,CAAC,kBAAkB,EAAE,eAAe,CAAC;IAC7E,qDAAqD;IACrD,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,wCAAwC;IACxC,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC;CACxB;AAED,eAAO,MAAM,OAAO,qFA2ClB,CAAC"}
+{"version":3,"file":"tooltip.d.ts","sourceRoot":"","sources":["../../../src/surfaces/tooltip/tooltip.tsx"],"names":[],"mappings":"AACA,OAAO,KAA+C,MAAM,OAAO,CAAC;AAEpE,OAAO,EAEL,KAAK,kBAAkB,EACxB,MAAM,wCAAwC,CAAC;AAGhD,MAAM,WAAW,YAAa,SAAQ,IAAI,CAAC,kBAAkB,EAAE,eAAe,CAAC;IAC7E,qDAAqD;IACrD,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,wCAAwC;IACxC,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC;CACxB;AAED,eAAO,MAAM,OAAO,qFA4ClB,CAAC"}