@homecode/ui 5.11.0 → 5.12.0

package/dist/esm/src/components/FormattedText/FormattedText.js

@@ -80,7 +80,7 @@ function applyInjectors(text, injectors) {
 }
 function FormattedText({ text, className, onButtonClick, }) {
     const injectLines = (content) => {
-        const matches = content.match(/\n---\n/);
+        const matches = content.match(/(^|\n)---[ \t]*(?:\n|$)/);
         if (!matches)
             return null;
         return {
@@ -204,9 +204,17 @@ function FormattedText({ text, className, onButtonClick, }) {
             length: matches[0].length,
         };
     };
-    const injectButtons = (content) => {
-        if (!onButtonClick)
+    const injectBreaks = (content) => {
+        const index = content.indexOf('\n');
+        if (index < 0)
             return null;
+        return {
+            elem: jsx("br", {}),
+            index,
+            length: 1,
+        };
+    };
+    const injectButtons = (content) => {
         const matches = content.match(/\[(.*?):(.*?)\|([^\]]+)\]/);
         if (!matches)
             return null;
@@ -216,7 +224,9 @@ function FormattedText({ text, className, onButtonClick, }) {
             .split('|');
         const [varName, value] = data.split(':');
         return {
-            elem: (jsx(Button, { variant: "default", size: "s", round: true, onClick: () => onButtonClick({ text: label, [varName]: value }), children: label })),
+            elem: (jsx(Button, { variant: "default", size: "s", round: true, onClick: onButtonClick
+                    ? () => onButtonClick({ text: label, [varName]: value })
+                    : undefined, children: label })),
             index: matches.index,
             length: matches[0].length,
         };
@@ -260,10 +270,10 @@ function FormattedText({ text, className, onButtonClick, }) {
         };
     };
     const injectTables = (content) => {
-        const withSep = content.match(/(\n|^)(\|[^\n]+\|\s*\n)(\|[\s:-]+(?:\|[\s:-]+)*\|\s*\n)((?:\|[^\n]+\|\s*\n?)+)/);
+        const withSep = content.match(/(\n|^)(\|[^\n]+\|[ \t]*\n)(\|[\t :-]+(?:\|[\t :-]+)*\|[ \t]*\n)((?:\|[^\n]+\|[ \t]*\n?)+)/);
         const withoutSep = withSep
             ? null
-            : content.match(/(\n|^)(\|[^\n]+\|\s*\n)((?:\|[^\n]+\|\s*\n?)+)/);
+            : content.match(/(\n|^)(\|[^\n]+\|[ \t]*\n)((?:\|[^\n]+\|[ \t]*\n?)+)/);
         const matches = withSep || withoutSep;
         if (!matches)
             return null;
@@ -317,6 +327,7 @@ function FormattedText({ text, className, onButtonClick, }) {
             injectBullet,
             injectNumbered,
             injectButtons,
+            injectBreaks,
         ]) }));
 }
 

package/dist/esm/src/components/Input/Input.js

@@ -1,5 +1,5 @@
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
-import { forwardRef, useRef, useState, useMemo, useEffect, createElement } from 'react';
+import { forwardRef, useRef, useState, useMemo, useEffect, useLayoutEffect, createElement } from 'react';
 import cn from 'classnames';
 import { Label } from '../Label/Label.js';
 import { RequiredStar } from '../RequiredStar/RequiredStar.js';
@@ -16,6 +16,38 @@ const TEXTAREA_SCROLL_TOP_OFFSET = {
     m: 40,
     l: 50,
 };
+function isNativeTextField(el) {
+    return el instanceof HTMLInputElement || el instanceof HTMLTextAreaElement;
+}
+function resolveNativeTextField(el) {
+    if (isNativeTextField(el))
+        return el;
+    if (el instanceof Element) {
+        const nested = el.querySelector('input, textarea');
+        if (isNativeTextField(nested))
+            return nested;
+    }
+    return null;
+}
+function selectContentEditable(el) {
+    const selection = window.getSelection();
+    if (!selection)
+        return;
+    const range = document.createRange();
+    range.selectNodeContents(el);
+    selection.removeAllRanges();
+    selection.addRange(range);
+}
+function selectAllOnElement(el) {
+    const field = resolveNativeTextField(el);
+    if (field && typeof field.select === 'function') {
+        field.select();
+        return;
+    }
+    if (el instanceof HTMLElement && el.isContentEditable) {
+        selectContentEditable(el);
+    }
+}
 const Input = forwardRef((props, ref) => {
     const inputRef = useRef(null);
     const setRef = (element) => {
@@ -27,7 +59,7 @@ const Input = forwardRef((props, ref) => {
             ref.current = element;
         }
     };
-    const { type = 'text', size = 'm', variant = 'default', value, defaultValue = '', onChange, onFocus, onBlur, onClear, onInput, changeOnEnd, checkAutofill, hasClear, required, hideRequiredStar, disabled, error, label, placeholder, addonLeft, addonRight, clearPaddingLeft, clearPaddingRight, forceLabelOnTop, scrollProps, step = 1, round, autoFocus, className, fitContentWidth, } = props;
+    const { type = 'text', size = 'm', variant = 'default', value, defaultValue = '', onChange, onFocus, onBlur, onClear, onInput, changeOnEnd, checkAutofill, hasClear, required, hideRequiredStar, disabled, error, label, placeholder, addonLeft, addonRight, clearPaddingLeft, clearPaddingRight, forceLabelOnTop, scrollProps, step = 1, round, autoFocus, className, fitContentWidth, selectAllOnFocus, } = props;
     const updateAutoComplete = () => {
         const form = inputRef.current?.closest('form');
         const val = form?.getAttribute('autocomplete');
@@ -39,6 +71,8 @@ const Input = forwardRef((props, ref) => {
         const elem = inputRef.current;
         if (!isFocused || !elem || type !== 'text')
             return;
+        if (elem.selectionStart !== elem.selectionEnd)
+            return;
         elem.selectionStart = cursorPos.current;
         elem.selectionEnd = cursorPos.current;
     };
@@ -57,6 +91,7 @@ const Input = forwardRef((props, ref) => {
     const hasValue = isNumber || Boolean(value || inputValue || defaultValue);
     const isLabelOnTop = forceLabelOnTop || Boolean(addonLeft) || hasValue || isFocused;
     const cursorPos = useRef(0);
+    const selectAllOnFocusPending = useRef(false);
     const getValue = (val = inputValue) => {
         if (type === 'number') {
             if (val)
@@ -136,6 +171,7 @@ const Input = forwardRef((props, ref) => {
         onChangeValue(val, e);
     };
     const onChangeValue = (value, e) => {
+        selectAllOnFocusPending.current = false;
         if (!isNumber && inputRef.current) {
             cursorPos.current = inputRef.current.selectionStart;
         }
@@ -159,8 +195,23 @@ const Input = forwardRef((props, ref) => {
     const handleFocus = e => {
         setIsFocused(true);
         onFocus?.(e);
+        if (!selectAllOnFocus)
+            return;
+        selectAllOnFocusPending.current = true;
+        selectAllOnElement(inputRef.current ?? e.target);
+    };
+    const handleMouseDown = e => {
+        props.controlProps?.onMouseDown?.(e);
+        if (!selectAllOnFocus || isFocusedRef.current)
+            return;
+        e.preventDefault();
+        const el = e.currentTarget;
+        if (el instanceof HTMLElement)
+            el.focus();
+        selectAllOnElement(el);
     };
     const handleBlur = e => {
+        selectAllOnFocusPending.current = false;
         if (changeOnEnd)
             onTypingEnd();
         const val = getValue(e?.target?.value);
@@ -181,6 +232,7 @@ const Input = forwardRef((props, ref) => {
             onChange: handleChange,
             onFocus: handleFocus,
             onBlur: handleBlur,
+            ...(selectAllOnFocus ? { onMouseDown: handleMouseDown } : null),
         };
         if (isTextArea) {
             controlProps.contentEditable = true;
@@ -208,8 +260,10 @@ const Input = forwardRef((props, ref) => {
         disabled,
         props.controlProps,
         handleChange,
+        handleMouseDown,
         onFocus,
         onBlur,
+        selectAllOnFocus,
         isTextArea,
         onTextAreaInput,
         placeholder,
@@ -271,6 +325,23 @@ const Input = forwardRef((props, ref) => {
         if (isTextArea)
             setTextareaValue(String(value ?? ''));
     }, []);
+    useLayoutEffect(() => {
+        if (!selectAllOnFocus || !selectAllOnFocusPending.current)
+            return;
+        if (!isFocused)
+            return;
+        const field = resolveNativeTextField(inputRef.current);
+        if (field) {
+            if (!field.value || typeof field.select !== 'function')
+                return;
+            field.select();
+            return;
+        }
+        const node = inputRef.current;
+        if (node instanceof HTMLElement && node.isContentEditable && node.innerText) {
+            selectContentEditable(node);
+        }
+    });
     const Control = isTextArea ? 'span' : 'input';
     const classes = cn(S.root, isTextArea && S.isTextArea, S[`size-${size}`], S[`variant-${variant}`], isFocused && S.isFocused, error && S.hasError, hasClear && S.hasClear, disabled && S.isDisabled, round && S.round, fitContentWidth && !isTextArea && S.fitContentWidth, className);
     return (jsxs("div", { className: classes, children: [jsxs("label", { className: cn(S.main, clearPaddingLeft && S.clearPaddingLeft, clearPaddingRight && S.clearPaddingRight), children: [jsx("div", { className: S.border, suppressHydrationWarning: true, style: { clipPath: labelClipPath } }, "border"), renderAddon('left'), wrapControl(jsxs(Fragment, { children: [createElement(Control, { ...controlProps, className: cn(S.control, controlProps?.className), ref: setRef, key: "control" }), isTextArea &&

package/dist/esm/src/components/PromptComposer/PromptComposer.styl.js

@@ -1,7 +1,7 @@
 import styleInject from '../../../node_modules/style-inject/dist/style-inject.es.js';
 
-var css_248z = ".PromptComposer_root__gfdXN{width:100%}.PromptComposer_scroller__Sueif{flex:1;max-height:200px;min-height:40px;width:100%}.PromptComposer_editorMount__B9G-o{background:transparent;border:none;border-radius:0!important;box-shadow:none!important;display:flex;flex:1;flex-direction:column;min-height:40px;min-width:0;padding:0!important}.PromptComposer_editorMount__B9G-o:focus-within{box-shadow:none!important}.PromptComposer_editorMount__B9G-o .PromptComposer_promptComposerEditor__yQIpq{border:none!important;box-shadow:none!important;flex:1;margin:0;min-height:40px!important;outline:none!important;overflow:hidden!important;padding:var(--p-2) 0 0!important;resize:none!important;transition:opacity .1s ease-out;white-space:pre-wrap;word-break:break-word}.PromptComposer_editorMount__B9G-o .PromptComposer_promptComposerEditor__yQIpq a{color:var(--link-color)}.PromptComposer_editorMount__B9G-o .PromptComposer_promptComposerEditor__yQIpq a:hover{cursor:pointer;opacity:.8}.PromptComposer_editorMount__B9G-o .PromptComposer_promptComposerEmptyEditor__VrwNe .PromptComposer_promptComposerEmptyNode__62Ylm:before{color:var(--muted-foreground);content:attr(data-placeholder);float:left;height:0;pointer-events:none}";
-var S = {"root":"PromptComposer_root__gfdXN","scroller":"PromptComposer_scroller__Sueif","editorMount":"PromptComposer_editorMount__B9G-o","promptComposerEditor":"PromptComposer_promptComposerEditor__yQIpq","promptComposerEmptyEditor":"PromptComposer_promptComposerEmptyEditor__VrwNe","promptComposerEmptyNode":"PromptComposer_promptComposerEmptyNode__62Ylm"};
+var css_248z = ".PromptComposer_root__gfdXN{width:100%}.PromptComposer_scroller__Sueif{flex:1;max-height:200px;min-height:40px;width:100%}.PromptComposer_editorMount__B9G-o{background:transparent;border:none;border-radius:0!important;box-shadow:none!important;display:flex;flex:1;flex-direction:column;min-height:40px;min-width:0;padding:0!important}.PromptComposer_editorMount__B9G-o:focus-within{box-shadow:none!important}.PromptComposer_editorMount__B9G-o .PromptComposer_promptComposerEditor__yQIpq{border:none!important;box-shadow:none!important;flex:1;margin:0;min-height:40px!important;outline:none!important;overflow:hidden!important;padding:var(--p-2) 0 0!important;resize:none!important;transition:opacity .1s ease-out;white-space:pre-wrap;word-break:break-word}.PromptComposer_editorMount__B9G-o .PromptComposer_promptComposerEditor__yQIpq a{color:var(--link-color)}.PromptComposer_editorMount__B9G-o .PromptComposer_promptComposerEditor__yQIpq a:hover{cursor:pointer;opacity:.8}.PromptComposer_editorMount__B9G-o .PromptComposer_promptComposerEmptyNode__62Ylm:before{color:var(--muted-foreground);content:attr(data-placeholder);float:left;height:0;pointer-events:none}";
+var S = {"root":"PromptComposer_root__gfdXN","scroller":"PromptComposer_scroller__Sueif","editorMount":"PromptComposer_editorMount__B9G-o","promptComposerEditor":"PromptComposer_promptComposerEditor__yQIpq","promptComposerEmptyNode":"PromptComposer_promptComposerEmptyNode__62Ylm"};
 styleInject(css_248z);
 
 export { S as default };

package/dist/esm/src/components/Select/Select2.js

@@ -245,7 +245,7 @@ function Select2(props) {
         const inputValue = isSearching ? searchVal : isMultiple$1 ? '' : selectedLabel;
         return (jsx(Input, { ...triggerProps, ...inputProps, 
             // TODO: autoComplete
-            addonRight: triggerArrow, error: isErrorVisible, value: inputValue, onChange: handleSearchChange, label: getFieldLabel(label), placeholder: hasChips && !inputValue ? '' : inputProps?.placeholder }));
+            addonRight: triggerArrow, error: isErrorVisible, value: inputValue, onChange: handleSearchChange, selectAllOnFocus: true, label: getFieldLabel(label), placeholder: hasChips && !inputValue ? '' : inputProps?.placeholder }));
     };
     const renderTriggerButton = () => {
         const { label, className, ...rest } = triggerProps;

package/dist/esm/src/components/TextWithDeferTooltip/TextWithDeferTooltip.js

@@ -3,6 +3,39 @@ import { useState, useRef } from 'react';
 import { Tooltip } from '../Tooltip/Tooltip.js';
 import S from './TextWithDeferTooltip.styl.js';
 
+function clipsOverflow(style, axis) {
+    const overflow = axis === 'x' ? style.overflowX : style.overflowY;
+    if (overflow === 'hidden' || overflow === 'auto' || overflow === 'scroll') {
+        return true;
+    }
+    if (axis === 'x' && style.textOverflow === 'ellipsis')
+        return true;
+    if (axis === 'y' &&
+        style.webkitLineClamp &&
+        style.webkitLineClamp !== 'none') {
+        return true;
+    }
+    return false;
+}
+function isNodeOverflowing(node) {
+    const style = getComputedStyle(node);
+    if (clipsOverflow(style, 'x') && node.scrollWidth - node.clientWidth > 1) {
+        return true;
+    }
+    if (clipsOverflow(style, 'y') && node.scrollHeight - node.clientHeight > 1) {
+        return true;
+    }
+    return false;
+}
+function isTextOverflowing(root) {
+    if (isNodeOverflowing(root))
+        return true;
+    for (const child of root.querySelectorAll('*')) {
+        if (isNodeOverflowing(child))
+            return true;
+    }
+    return false;
+}
 function TextWithDeferTooltip({ className, children, width, maxWidth, side = 'bottom', overTrigger = false, ...props }) {
     const [withTooltip, setWithTooltip] = useState(false);
     const [tooltipWidth, setTooltipWidth] = useState();
@@ -11,9 +44,7 @@ function TextWithDeferTooltip({ className, children, width, maxWidth, side = 'bo
     const handleMouseEnter = () => {
         if (!ref.current)
             return;
-        const isOverflowingHorizontally = ref.current.scrollWidth - ref.current.clientWidth > 3;
-        const isOverflowingVertically = ref.current.scrollHeight - ref.current.clientHeight > 3;
-        if (isOverflowingHorizontally || isOverflowingVertically) {
+        if (isTextOverflowing(ref.current)) {
             if (width != null) {
                 setTooltipWidth(width);
             }

package/dist/esm/types/src/components/FormattedText/FormattedText.test.d.ts

@@ -0,0 +1 @@
+import '@testing-library/jest-dom';

package/dist/esm/types/src/components/Input/Input.d.ts

@@ -24,4 +24,5 @@ export declare const Input: import("react").ForwardRefExoticComponent<Omit<impor
     checkAutofill?: boolean;
     scrollProps?: Partial<import("../Scroll/Scroll.types").Props>;
     fitContentWidth?: boolean;
+    selectAllOnFocus?: boolean;
 } & import("react").RefAttributes<HTMLInputElement>>;

package/dist/esm/types/src/components/Input/Input.test.d.ts

@@ -0,0 +1 @@
+import '@testing-library/jest-dom';

package/dist/esm/types/src/components/Input/Input.types.d.ts

@@ -28,4 +28,6 @@ export type Props = Omit<InputHTMLAttributes<HTMLInputElement>, 'onChange'> & Om
     scrollProps?: Partial<ScrollProps>;
     /** When true, width follows text via CSS `field-sizing: content` (non-textarea only). */
     fitContentWidth?: boolean;
+    /** Select the current value when the field is focused. */
+    selectAllOnFocus?: boolean;
 };

package/dist/esm/types/src/components/Select/Select.d.ts

@@ -28,6 +28,7 @@ export declare class Select extends Component<T.Props, T.State> {
         checkAutofill?: boolean;
         scrollProps?: Partial<import("../Scroll/Scroll.types").Props>;
         fitContentWidth?: boolean;
+        selectAllOnFocus?: boolean;
     } & import("react").RefAttributes<HTMLInputElement>>>;
     triggerInputRef: import("react").RefObject<HTMLDivElement>;
     contentRef: import("react").RefObject<HTMLDivElement>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@homecode/ui",
-  "version": "5.11.0",
+  "version": "5.12.0",
   "description": "React UI components library",
   "scripts": {
     "tests": "jest",