@tcn/ui 0.12.0 → 0.12.2

package/dist/surfaces/tooltip/tooltip.js

@@ -1,39 +1,41 @@
-import { jsx as e, jsxs as f, Fragment as u } from "react/jsx-runtime";
-import { clsx as h } from "clsx";
-import d, { useRef as x, isValidElement as R, cloneElement as _ } from "react";
+import { jsx as e, jsxs as u, Fragment as d } from "react/jsx-runtime";
+import { clsx as x } from "clsx";
+import R, { useRef as _, isValidElement as h, cloneElement as w } from "react";
 import { PreviewPopper as E } from "../../overlay/popper/preview_popper.js";
 import { HStack as b } from "../../stacks/h_stack.js";
-import '../../tooltip.css';const g = "_tooltip_b8c58d5", j = { tooltip: g }, F = d.forwardRef(function({
+import '../../tooltip.css';const j = "_tooltip_b8c58d5", P = { tooltip: j }, H = R.forwardRef(function({
   children: o,
   className: r,
   verticalAnchor: n = "top",
   verticalOrigin: c = "bottom",
-  horizontalAnchor: s = "center",
-  horizontalOrigin: i = "center",
-  label: l,
-  ...p
-}, m) {
-  const t = x(null), a = R(o) ? _(o, { ref: t }) : /* @__PURE__ */ e(b, { as: "span", ref: t, children: o });
-  return /* @__PURE__ */ f(u, { children: [
-    a,
+  horizontalAnchor: l = "center",
+  horizontalOrigin: s = "center",
+  precision: m = "low",
+  // TODO: Fix caret styles and set to high
+  label: p,
+  ...i
+}, a) {
+  const t = _(null), f = h(o) ? w(o, { ref: t }) : /* @__PURE__ */ e(b, { as: "span", ref: t, children: o });
+  return /* @__PURE__ */ u(d, { children: [
+    f,
     /* @__PURE__ */ e(
       E,
       {
-        ref: m,
+        ref: a,
         anchorElement: t,
         verticalAnchor: n,
         verticalOrigin: c,
-        horizontalAnchor: s,
-        horizontalOrigin: i,
-        precision: "high",
-        className: h(r, j.tooltip, "tcn-surface", "tcn-tooltip"),
-        ...p,
-        children: l
+        horizontalAnchor: l,
+        horizontalOrigin: s,
+        precision: m,
+        className: x(r, P.tooltip, "tcn-surface", "tcn-tooltip"),
+        ...i,
+        children: p
       }
     )
   ] });
 });
 export {
-  F as Tooltip
+  H as Tooltip
 };
 //# sourceMappingURL=tooltip.js.map

package/dist/surfaces/tooltip/tooltip.js.map

@@ -1 +1 @@
-{"version":3,"file":"tooltip.js","sources":["../../../src/surfaces/tooltip/tooltip.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport React, { isValidElement, cloneElement, useRef } from 'react';\nimport styles from './tooltip.module.css';\nimport {\n  PreviewPopper,\n  type PreviewPopperProps,\n} from '../../overlay/popper/preview_popper.js';\nimport { HStack } from '../../stacks/h_stack.js';\n\nexport interface TooltipProps extends Omit<PreviewPopperProps, 'anchorElement'> {\n  /** The element that triggers the tooltip on hover */\n  children: React.ReactNode;\n  /** Content to display in the tooltip */\n  label: React.ReactNode;\n}\n\nexport const Tooltip = React.forwardRef<HTMLDivElement, TooltipProps>(function Tooltip(\n  {\n    children,\n    className,\n    verticalAnchor = 'top',\n    verticalOrigin = 'bottom',\n    horizontalAnchor = 'center',\n    horizontalOrigin = 'center',\n    label,\n    ...props\n  },\n  ref\n) {\n  const anchorRef = useRef<HTMLElement>(null);\n\n  // If children is a valid element, clone it and attach the ref\n  // Otherwise, wrap it in a span\n  const anchor = isValidElement(children) ? (\n    cloneElement(children, { ref: anchorRef } as React.Attributes)\n  ) : (\n    <HStack as=\"span\" ref={anchorRef}>\n      {children}\n    </HStack>\n  );\n\n  return (\n    <>\n      {anchor}\n      <PreviewPopper\n        ref={ref}\n        anchorElement={anchorRef}\n        verticalAnchor={verticalAnchor}\n        verticalOrigin={verticalOrigin}\n        horizontalAnchor={horizontalAnchor}\n        horizontalOrigin={horizontalOrigin}\n        precision=\"high\"\n        className={clsx(className, styles.tooltip, 'tcn-surface', 'tcn-tooltip')}\n        {...props}\n      >\n        {label}\n      </PreviewPopper>\n    </>\n  );\n});\n"],"names":["Tooltip","React","children","className","verticalAnchor","verticalOrigin","horizontalAnchor","horizontalOrigin","label","props","ref","anchorRef","useRef","anchor","isValidElement","cloneElement","jsx","HStack","jsxs","Fragment","PreviewPopper","clsx","styles"],"mappings":";;;;;kDAgBaA,IAAUC,EAAM,WAAyC,SACpE;AAAA,EACE,UAAAC;AAAA,EACA,WAAAC;AAAA,EACA,gBAAAC,IAAiB;AAAA,EACjB,gBAAAC,IAAiB;AAAA,EACjB,kBAAAC,IAAmB;AAAA,EACnB,kBAAAC,IAAmB;AAAA,EACnB,OAAAC;AAAA,EACA,GAAGC;AACL,GACAC,GACA;AACA,QAAMC,IAAYC,EAAoB,IAAI,GAIpCC,IAASC,EAAeZ,CAAQ,IACpCa,EAAab,GAAU,EAAE,KAAKS,EAAA,CAA+B,IAE7D,gBAAAK,EAACC,GAAA,EAAO,IAAG,QAAO,KAAKN,GACpB,UAAAT,GACH;AAGF,SACE,gBAAAgB,EAAAC,GAAA,EACG,UAAA;AAAA,IAAAN;AAAA,IACD,gBAAAG;AAAA,MAACI;AAAA,MAAA;AAAA,QACC,KAAAV;AAAA,QACA,eAAeC;AAAA,QACf,gBAAAP;AAAA,QACA,gBAAAC;AAAA,QACA,kBAAAC;AAAA,QACA,kBAAAC;AAAA,QACA,WAAU;AAAA,QACV,WAAWc,EAAKlB,GAAWmB,EAAO,SAAS,eAAe,aAAa;AAAA,QACtE,GAAGb;AAAA,QAEH,UAAAD;AAAA,MAAA;AAAA,IAAA;AAAA,EACH,GACF;AAEJ,CAAC;"}
+{"version":3,"file":"tooltip.js","sources":["../../../src/surfaces/tooltip/tooltip.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport React, { isValidElement, cloneElement, useRef } from 'react';\nimport styles from './tooltip.module.css';\nimport {\n  PreviewPopper,\n  type PreviewPopperProps,\n} from '../../overlay/popper/preview_popper.js';\nimport { HStack } from '../../stacks/h_stack.js';\n\nexport interface TooltipProps extends Omit<PreviewPopperProps, 'anchorElement'> {\n  /** The element that triggers the tooltip on hover */\n  children: React.ReactNode;\n  /** Content to display in the tooltip */\n  label: React.ReactNode;\n}\n\nexport const Tooltip = React.forwardRef<HTMLDivElement, TooltipProps>(function Tooltip(\n  {\n    children,\n    className,\n    verticalAnchor = 'top',\n    verticalOrigin = 'bottom',\n    horizontalAnchor = 'center',\n    horizontalOrigin = 'center',\n    precision = 'low', // TODO: Fix caret styles and set to high\n    label,\n    ...props\n  },\n  ref\n) {\n  const anchorRef = useRef<HTMLElement>(null);\n\n  // If children is a valid element, clone it and attach the ref\n  // Otherwise, wrap it in a span\n  const anchor = isValidElement(children) ? (\n    cloneElement(children, { ref: anchorRef } as React.Attributes)\n  ) : (\n    <HStack as=\"span\" ref={anchorRef}>\n      {children}\n    </HStack>\n  );\n\n  return (\n    <>\n      {anchor}\n      <PreviewPopper\n        ref={ref}\n        anchorElement={anchorRef}\n        verticalAnchor={verticalAnchor}\n        verticalOrigin={verticalOrigin}\n        horizontalAnchor={horizontalAnchor}\n        horizontalOrigin={horizontalOrigin}\n        precision={precision}\n        className={clsx(className, styles.tooltip, 'tcn-surface', 'tcn-tooltip')}\n        {...props}\n      >\n        {label}\n      </PreviewPopper>\n    </>\n  );\n});\n"],"names":["Tooltip","React","children","className","verticalAnchor","verticalOrigin","horizontalAnchor","horizontalOrigin","precision","label","props","ref","anchorRef","useRef","anchor","isValidElement","cloneElement","jsx","HStack","jsxs","Fragment","PreviewPopper","clsx","styles"],"mappings":";;;;;kDAgBaA,IAAUC,EAAM,WAAyC,SACpE;AAAA,EACE,UAAAC;AAAA,EACA,WAAAC;AAAA,EACA,gBAAAC,IAAiB;AAAA,EACjB,gBAAAC,IAAiB;AAAA,EACjB,kBAAAC,IAAmB;AAAA,EACnB,kBAAAC,IAAmB;AAAA,EACnB,WAAAC,IAAY;AAAA;AAAA,EACZ,OAAAC;AAAA,EACA,GAAGC;AACL,GACAC,GACA;AACA,QAAMC,IAAYC,EAAoB,IAAI,GAIpCC,IAASC,EAAeb,CAAQ,IACpCc,EAAad,GAAU,EAAE,KAAKU,EAAA,CAA+B,IAE7D,gBAAAK,EAACC,GAAA,EAAO,IAAG,QAAO,KAAKN,GACpB,UAAAV,GACH;AAGF,SACE,gBAAAiB,EAAAC,GAAA,EACG,UAAA;AAAA,IAAAN;AAAA,IACD,gBAAAG;AAAA,MAACI;AAAA,MAAA;AAAA,QACC,KAAAV;AAAA,QACA,eAAeC;AAAA,QACf,gBAAAR;AAAA,QACA,gBAAAC;AAAA,QACA,kBAAAC;AAAA,QACA,kBAAAC;AAAA,QACA,WAAAC;AAAA,QACA,WAAWc,EAAKnB,GAAWoB,EAAO,SAAS,eAAe,aAAa;AAAA,QACtE,GAAGb;AAAA,QAEH,UAAAD;AAAA,MAAA;AAAA,IAAA;AAAA,EACH,GACF;AAEJ,CAAC;"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tcn/ui",
-  "version": "0.12.0",
+  "version": "0.12.2",
   "type": "module",
   "description": "",
   "author": "TCN",

package/src/inputs/phone_number_input/phone_number_input.stories.tsx

@@ -139,6 +139,13 @@ export const WithPhoneBook = () => {
           <Option value="+14355865955" label="Bob Johnson" keywords={['bob', 'johnson']}>
             Bob Johnson - +1 (435) 586-5955
           </Option>
+          <Option
+            value="+14355865950"
+            label="A Really Really Really Really Really Long Label For Jack"
+            keywords={['jack', 'johnson']}
+          >
+            A Really Really Really Really Reall Long Label - +1 (435) 586-5955
+          </Option>
           <Option
             value="sip:foo@bar.com"
             label="Foo Sip"

package/src/inputs/phone_number_input/phone_number_input_adapter.tsx

@@ -112,6 +112,11 @@ export const PhoneNumberInputAdapter = forwardRef<
       <SuggestionList
         open={isPhoneBookOpen}
         anchorElement={phoneBookElement}
+        horizontalAnchor="end"
+        horizontalOrigin="end"
+        verticalAnchor="top"
+        verticalOrigin="top"
+        width="300px"
         onOptionSelect={handlePhoneBookOptionSelect}
         onClose={closePhoneBook}
         noSuggestionMessage="No phone numbers found"

package/src/inputs/phone_number_input/sip_input.tsx

@@ -138,7 +138,12 @@ export function SipInput({
         anchorElement={phoneBookElement}
         onOptionSelect={handlePhoneBookOptionSelect}
         onClose={closePhoneBook}
+        width="300px"
         noSuggestionMessage="No phone numbers found"
+        horizontalAnchor="end"
+        horizontalOrigin="end"
+        verticalAnchor="top"
+        verticalOrigin="top"
       >
         {phoneBookOptions}
       </SuggestionList>

package/src/inputs/select/select.stories.tsx

@@ -1,10 +1,11 @@
-import React, { useEffect, useState } from 'react';
+import React, { useEffect, useRef, useState } from 'react';
 import { Option, type OptionProps } from '../options/option.js';
 import { Select as SelectComponent, SelectProps } from './select.js';
 import { HStack } from '../../stacks/h_stack.js';
 import { VStack } from '../../stacks/v_stack.js';
 import { Headline } from '../../typography/headline/headline.js';
 import { BodyText } from '../../typography/body_text/body_text.js';
+import { Button } from '../../actions/button/button/button.js';
 
 export default {
   title: 'Inputs/Select',
@@ -124,23 +125,45 @@ export function CustomWidth(_: Omit<SelectProps, 'children'>) {
 }
 
 export function DelayedOptions() {
+  const timeoutRef = useRef<number | null>(null);
   const [value, setValue] = useState<string>('');
   const [options, setOptions] = useState<React.ReactElement<OptionProps>[]>([]);
 
   useEffect(() => {
-    window.setTimeout(() => {
-      setOptions([
-        <Option key={1} value="apple" label="Apple" keywords={['fruit', 'red', 'sweet']}>
-          Apple
+    timeoutRef.current = window.setTimeout(() => {
+      const length = options.length;
+      const newOptions = [
+        ...options,
+        <Option
+          key={length}
+          value={String(length)}
+          label={String(length)}
+          keywords={[String(length)]}
+        >
+          {String(length)}
         </Option>,
-      ]);
-    }, 4000);
-  }, []);
+      ];
+      setOptions(newOptions);
+    }, 2000);
+
+    return () => {
+      window.clearTimeout(timeoutRef?.current || 0);
+    };
+  }, [options]);
 
   return (
-    <SelectComponent value={value} onChange={setValue} width="100px">
-      {options}
-    </SelectComponent>
+    <>
+      <SelectComponent value={value} onChange={setValue} width="100px">
+        {options}
+      </SelectComponent>
+      <Button
+        onClick={() => {
+          window.clearInterval(timeoutRef.current ?? 0);
+        }}
+      >
+        Stop
+      </Button>
+    </>
   );
 }
 

package/src/inputs/suggestions/suggestion_list.tsx

@@ -24,6 +24,7 @@ export interface SuggestionListProps
   open?: boolean;
   children?: React.ReactNode;
   onChange?: (value: string) => void;
+  width?: string;
   onOptionSelect?: (
     value: string,
     label: string | undefined,
@@ -39,6 +40,12 @@ export interface SuggestionListProps
     cursorStartPosition: number | null,
     cursorEndPosition: number | null
   ) => void;
+  verticalAnchor?: 'top' | 'center' | 'bottom';
+  verticalOrigin?: 'top' | 'center' | 'bottom';
+  verticalOffset?: number;
+  horizontalAnchor?: 'start' | 'center' | 'end';
+  horizontalOrigin?: 'start' | 'center' | 'end';
+  horizontalOffset?: number;
 }
 
 export function SuggestionList({
@@ -47,6 +54,7 @@ export function SuggestionList({
   scrollToValue,
   anchorElement,
   open = false,
+  width = 'auto',
   children,
   onOptionSelect,
   noSuggestionMessage = '-- No Matches --',
@@ -57,6 +65,12 @@ export function SuggestionList({
   trimCustomInput = false,
   haveValueAsOption = false,
   restoreFocus = true,
+  verticalAnchor = 'top',
+  verticalOrigin = 'top',
+  verticalOffset = -4,
+  horizontalAnchor = 'start',
+  horizontalOrigin = 'start',
+  horizontalOffset = 0,
   ...props
 }: SuggestionListProps) {
   // Extract valid Option components from children
@@ -403,25 +417,28 @@ export function SuggestionList({
   }, [searchValue]);
 
   useLayoutEffect(() => {
-    const newMatches = getMatchedOptions(value, MAX_RESULTS);
+    const newMatches = getMatchedOptions(internalValue, MAX_RESULTS);
     setMatchedOptions(newMatches);
-  }, [value, getMatchedOptions]);
+  }, [getMatchedOptions, internalValue]);
 
   return (
     <Popper
       open={open}
       anchorElement={anchorElement}
       onClose={handleUseClose}
-      verticalAnchor="top"
-      verticalOrigin="top"
-      verticalOffset={-4}
+      verticalAnchor={verticalAnchor}
+      verticalOrigin={verticalOrigin}
+      verticalOffset={verticalOffset}
+      horizontalAnchor={horizontalAnchor}
+      horizontalOrigin={horizontalOrigin}
+      horizontalOffset={horizontalOffset}
       restoreFocus={restoreFocus}
     >
       <VStack
         minHeight={`calc(${suggestionsHeight}, 8px)`}
         maxHeight="300px"
         minWidth={suggestionsWidth}
-        width="auto"
+        width={width}
         hAlign="start"
         className={clsx(styles['suggestion-list'], 'tcn-suggestion-list')}
       >

package/src/surfaces/pop_confirm/pop_confirm.tsx

@@ -11,13 +11,19 @@ export type PopConfirmProps = ElementPopperProps;
 
 export const PopConfirm = React.forwardRef<HTMLDivElement, PopConfirmProps>(
   function PopConfirm(
-    { children, className, dismissals = [PopperDismissal.CLICK_AWAY], ...props },
+    {
+      children,
+      className,
+      precision = 'low',
+      dismissals = [PopperDismissal.CLICK_AWAY],
+      ...props
+    },
     ref
   ) {
     return (
       <ElementPopper
         ref={ref}
-        precision="high"
+        precision={precision}
         className={clsx(className, 'tcn-pop-confirm')}
         dismissals={dismissals}
         {...props}

package/src/surfaces/tooltip/tooltip.tsx

@@ -22,6 +22,7 @@ export const Tooltip = React.forwardRef<HTMLDivElement, TooltipProps>(function T
     verticalOrigin = 'bottom',
     horizontalAnchor = 'center',
     horizontalOrigin = 'center',
+    precision = 'low', // TODO: Fix caret styles and set to high
     label,
     ...props
   },
@@ -49,7 +50,7 @@ export const Tooltip = React.forwardRef<HTMLDivElement, TooltipProps>(function T
         verticalOrigin={verticalOrigin}
         horizontalAnchor={horizontalAnchor}
         horizontalOrigin={horizontalOrigin}
-        precision="high"
+        precision={precision}
         className={clsx(className, styles.tooltip, 'tcn-surface', 'tcn-tooltip')}
         {...props}
       >