@homecode/ui 5.3.2 → 5.3.4

package/dist/esm/index.js

@@ -16,7 +16,7 @@ export { DropZone } from './src/components/DropZone/DropZone.js';
 export { Expand } from './src/components/Expand/Expand.js';
 export { Flex } from './src/components/Flex/Flex.js';
 export { Form } from './src/components/Form/Form.js';
-export { Gallery } from './src/components/Gallery/Gallery.js';
+export { Gallery, normalizeGalleryItem } from './src/components/Gallery/Gallery.js';
 export { Heading } from './src/components/Heading/Heading.js';
 export { Icon } from './src/components/Icon/Icon.js';
 export { Input } from './src/components/Input/Input.js';

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

@@ -1,5 +1,5 @@
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
-import { Component, createRef, useState, useRef, useLayoutEffect } from 'react';
+import { Component, createRef, useState, useRef, useLayoutEffect, useEffect } from 'react';
 import { createStore } from 'justorm/react';
 import Time from 'timen';
 import compare from 'compareq';
@@ -13,6 +13,11 @@ import { circularSlice } from '../../tools/array.js';
 import S from './Gallery.styl.js';
 import { Lazy } from '../Lazy/Lazy.js';
 
+function normalizeGalleryItem(item) {
+    if (typeof item === 'string')
+        return { src: item, kind: 'image' };
+    return { src: item.src, kind: item.kind ?? 'image' };
+}
 const THRESHOLD = 50;
 const DURATION = 200;
 const DIR_NAME = {
@@ -32,12 +37,25 @@ function getInitialState(items, startIndex) {
 function Arr({ className, size, icon, ...rest }) {
     return (jsx(Button, { className: cn(S.arr, className), size: size, variant: "clear", ...rest, children: jsx(Icon, { type: icon, size: size }) }));
 }
-function Item({ src, size }) {
+function VideoItem({ src, size, isActive, }) {
+    const [loaded, setLoaded] = useState(false);
+    const videoRef = useRef(null);
+    useEffect(() => {
+        const video = videoRef.current;
+        if (!video || isActive)
+            return;
+        video.pause();
+    }, [isActive, src]);
+    return (jsxs("div", { className: cn(S.item, S.videoItem), children: [jsx("video", { ref: videoRef, src: src, controls: true, playsInline: true, className: S.video, onLoadedData: () => setLoaded(true) }), !loaded && jsx(Spinner, { size: size })] }));
+}
+function Item({ src, kind, size, isActive, }) {
     const [loaded, setLoaded] = useState(false);
     const [isError, setIsError] = useState(false);
     const style = {};
     const imgRef = useRef(null);
     useLayoutEffect(() => {
+        if (kind === 'video')
+            return;
         const img = imgRef.current;
         if (!img || isError)
             return;
@@ -54,7 +72,10 @@ function Item({ src, size }) {
             };
         }
         if (typeof img.decode === 'function') {
-            img.decode().then(notify).catch(() => { });
+            img
+                .decode()
+                .then(notify)
+                .catch(() => { });
             return () => {
                 cancelled = true;
             };
@@ -68,7 +89,10 @@ function Item({ src, size }) {
         return () => {
             cancelled = true;
         };
-    }, [src, isError]);
+    }, [src, isError, kind]);
+    if (kind === 'video') {
+        return jsx(VideoItem, { src: src, size: size, isActive: isActive });
+    }
     if (loaded)
         style.backgroundImage = `url(${src})`;
     return (jsx("div", { className: S.item, style: style, children: !loaded &&
@@ -114,13 +138,16 @@ class Gallery extends Component {
             this.setState({});
         }
     }
+    get normalizedItems() {
+        return this.props.items.map(normalizeGalleryItem);
+    }
     getStateItems() {
         return this.isSingle()
-            ? [this.props.items[0]]
+            ? [this.normalizedItems[0]]
             : getInitialState(this.items, this.index);
     }
     recenter() {
-        const [...items] = this.props.items;
+        const [...items] = this.normalizedItems;
         this.items = [items.pop(), ...items];
     }
     init() {
@@ -195,7 +222,8 @@ class Gallery extends Component {
         this.removeTransformDelta();
         this.setState({});
         const { onChange } = this.props;
-        onChange?.(this.index, this.items[this.index]);
+        const active = this.items[this.index];
+        onChange?.(this.index, active.src);
     }
     render() {
         const { className, size, showArrows, showDots, initialBounce, cover, ...rest } = this.props;
@@ -213,10 +241,10 @@ class Gallery extends Component {
                 props.onPointerLeave = this.onPointerUp;
             }
         }
-        return (jsxs("div", { className: classes, ...props, children: [jsx("div", { className: innerClasses, ref: this.innerRef, children: items.map((src, i) => (jsx(Item, { src: src, size: size }, `${i}_${src}`))) }), !isSingle && showArrows && !isDragging && (jsxs(Fragment, { children: [jsx(Arr, { className: S.left, size: size, icon: "chevronLeft", onClick: () => this.move(1) }), jsx(Arr, { className: S.right, size: size, icon: "chevronRight", onClick: () => this.move(-1) })] })), showDots && (jsx(Lazy, { hideSpinner: true, loader: () => import('./Dots/Dots.js'), 
+        return (jsxs("div", { className: classes, ...props, children: [jsx("div", { className: innerClasses, ref: this.innerRef, children: items.map((item, i) => (jsx(Item, { src: item.src, kind: item.kind, size: size, isActive: isSingle ? i === 0 : i === 1 }, `${i}_${item.src}_${item.kind}`))) }), !isSingle && showArrows && !isDragging && (jsxs(Fragment, { children: [jsx(Arr, { className: S.left, size: size, icon: "chevronLeft", onClick: () => this.move(1) }), jsx(Arr, { className: S.right, size: size, icon: "chevronRight", onClick: () => this.move(-1) })] })), showDots && (jsx(Lazy, { hideSpinner: true, loader: () => import('./Dots/Dots.js'), 
                     // @ts-ignore
                     index: this.index % items.length, count: items.length }))] }));
     }
 }
 
-export { Gallery };
+export { Gallery, normalizeGalleryItem };

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

@@ -1,7 +1,7 @@
 import styleInject from '../../../node_modules/style-inject/dist/style-inject.es.js';
 
-var css_248z = ".Gallery_item__P4qTJ,.Gallery_root__-Crit{height:100%;width:100%}.Gallery_root__-Crit{overflow:hidden;position:relative}.Gallery_inner__4FAPt{-webkit-backface-visibility:hidden;backface-visibility:hidden;display:flex;height:100%;position:absolute;touch-action:none;transform:translate3d(-33.33333%,0,0);width:calc(300% + 1px)}.Gallery_single__Wfd9h .Gallery_inner__4FAPt{transform:none;width:100%}.Gallery_single__Wfd9h .Gallery_item__P4qTJ{width:100%}.Gallery_inner__4FAPt.Gallery_left__zrrmv,.Gallery_inner__4FAPt.Gallery_right__dpZ-m{transition:transform 0s ease-out;transition-duration:.2s}.Gallery_inner__4FAPt.Gallery_left__zrrmv{transform:translateZ(0)!important}.Gallery_inner__4FAPt.Gallery_right__dpZ-m{transform:translate3d(-66.66667%,0,0)!important}.Gallery_inner__4FAPt.Gallery_initialBounce__nZnKd{animation:Gallery_bounce__buqva 1s ease-out}.Gallery_item__P4qTJ{align-items:center;background-position:50%;background-repeat:no-repeat;background-size:contain;display:flex;justify-content:center;width:33.33333%}.Gallery_cover__ZGx5X .Gallery_item__P4qTJ{background-size:cover}.Gallery_item__P4qTJ>img{opacity:0;pointer-events:none;position:absolute}.Gallery_brokenImage__Bj3O-{height:50%;opacity:.2;width:50%}.Gallery_arr__knicI{background:transparent!important;height:100%;min-height:100%;opacity:0;padding:10%;position:absolute;top:0;transition:opacity .1s ease-out;z-index:1}.Gallery_arr__knicI.Gallery_left__zrrmv{justify-content:flex-start;left:0}.Gallery_arr__knicI.Gallery_right__dpZ-m{justify-content:flex-end;right:0;width:77%}.Gallery_arr__knicI:hover{opacity:1}@keyframes Gallery_bounce__buqva{0%{left:0}50%{left:-20%}80%{left:10%}to{left:0}}";
-var S = {"root":"Gallery_root__-Crit","item":"Gallery_item__P4qTJ","inner":"Gallery_inner__4FAPt","single":"Gallery_single__Wfd9h","left":"Gallery_left__zrrmv","right":"Gallery_right__dpZ-m","initialBounce":"Gallery_initialBounce__nZnKd","bounce":"Gallery_bounce__buqva","cover":"Gallery_cover__ZGx5X","brokenImage":"Gallery_brokenImage__Bj3O-","arr":"Gallery_arr__knicI"};
+var css_248z = ".Gallery_item__P4qTJ,.Gallery_root__-Crit{height:100%;width:100%}.Gallery_root__-Crit{overflow:hidden;position:relative}.Gallery_inner__4FAPt{-webkit-backface-visibility:hidden;backface-visibility:hidden;display:flex;height:100%;position:absolute;touch-action:none;transform:translate3d(-33.33333%,0,0);width:calc(300% + 1px)}.Gallery_single__Wfd9h .Gallery_inner__4FAPt{transform:none;width:100%}.Gallery_single__Wfd9h .Gallery_item__P4qTJ{width:100%}.Gallery_inner__4FAPt.Gallery_left__zrrmv,.Gallery_inner__4FAPt.Gallery_right__dpZ-m{transition:transform 0s ease-out;transition-duration:.2s}.Gallery_inner__4FAPt.Gallery_left__zrrmv{transform:translateZ(0)!important}.Gallery_inner__4FAPt.Gallery_right__dpZ-m{transform:translate3d(-66.66667%,0,0)!important}.Gallery_inner__4FAPt.Gallery_initialBounce__nZnKd{animation:Gallery_bounce__buqva 1s ease-out}.Gallery_item__P4qTJ{align-items:center;background-position:50%;background-repeat:no-repeat;background-size:contain;display:flex;justify-content:center;width:33.33333%}.Gallery_cover__ZGx5X .Gallery_item__P4qTJ{background-size:cover}.Gallery_item__P4qTJ>img{opacity:0;pointer-events:none;position:absolute}.Gallery_brokenImage__Bj3O-{height:50%;opacity:.2;width:50%}.Gallery_videoItem__06r39 .Gallery_video__vKK23{max-height:100%;max-width:100%;-o-object-fit:contain;object-fit:contain}.Gallery_arr__knicI{background:transparent!important;height:100%;min-height:100%;opacity:0;padding:10%;position:absolute;top:0;transition:opacity .1s ease-out;z-index:1}.Gallery_arr__knicI.Gallery_left__zrrmv{justify-content:flex-start;left:0}.Gallery_arr__knicI.Gallery_right__dpZ-m{justify-content:flex-end;right:0;width:77%}.Gallery_arr__knicI:hover{opacity:1}@keyframes Gallery_bounce__buqva{0%{left:0}50%{left:-20%}80%{left:10%}to{left:0}}";
+var S = {"root":"Gallery_root__-Crit","item":"Gallery_item__P4qTJ","inner":"Gallery_inner__4FAPt","single":"Gallery_single__Wfd9h","left":"Gallery_left__zrrmv","right":"Gallery_right__dpZ-m","initialBounce":"Gallery_initialBounce__nZnKd","bounce":"Gallery_bounce__buqva","cover":"Gallery_cover__ZGx5X","brokenImage":"Gallery_brokenImage__Bj3O-","videoItem":"Gallery_videoItem__06r39","video":"Gallery_video__vKK23","arr":"Gallery_arr__knicI"};
 styleInject(css_248z);
 
 export { S as default };

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

@@ -1,5 +1,4 @@
 /** Keep in sync with `PromptComposer.styl` max/min heights. */
-const PROMPT_COMPOSER_MAX_HEIGHT_PX = 200;
 const PROMPT_COMPOSER_MIN_HEIGHT_PX = 40;
 function safePromptComposerEditorText(editor) {
     if (!editor || editor.isDestroyed)
@@ -32,7 +31,7 @@ function promptComposerFloorPx(cs) {
         : Number.parseFloat(cs.lineHeight) || fs * 1.25;
     return Math.max(PROMPT_COMPOSER_MIN_HEIGHT_PX, Math.ceil(linePx + padY));
 }
-/** Autosize `.ProseMirror` root: empty -> floor, text -> measured height with clamp. */
+/** Autosize `.ProseMirror` root: empty -> floor, text -> measured content height. */
 function syncPromptComposerHeight(el, text) {
     const floor = promptComposerFloorPx(getComputedStyle(el));
     el.style.overflowY = 'hidden';
@@ -45,10 +44,9 @@ function syncPromptComposerHeight(el, text) {
         el.style.height = '0';
         contentHeight = el.scrollHeight;
     }
-    const h = Math.min(Math.max(contentHeight, floor), PROMPT_COMPOSER_MAX_HEIGHT_PX);
+    const h = Math.max(contentHeight, floor);
     el.style.height = `${h}px`;
-    el.style.overflowY =
-        contentHeight > PROMPT_COMPOSER_MAX_HEIGHT_PX ? 'auto' : 'hidden';
+    el.style.overflowY = 'hidden';
 }
 
-export { PROMPT_COMPOSER_MAX_HEIGHT_PX, PROMPT_COMPOSER_MIN_HEIGHT_PX, promptComposerSafeEditorDom, safePromptComposerEditorText, syncPromptComposerHeight };
+export { PROMPT_COMPOSER_MIN_HEIGHT_PX, promptComposerSafeEditorDom, safePromptComposerEditorText, syncPromptComposerHeight };

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

@@ -2,11 +2,12 @@ import { jsx } from 'react/jsx-runtime';
 import cn from 'classnames';
 import { forwardRef, useMemo, useImperativeHandle } from 'react';
 import { EditorContent } from '@tiptap/react';
+import { Scroll } from '../Scroll/Scroll.js';
 import S from './PromptComposer.styl.js';
 import { createPromptComposerHandle } from './promptComposerInsert.js';
 import { usePromptComposerEditor } from './usePromptComposerEditor.js';
 
-const PromptComposer = forwardRef(function PromptComposer({ disabled = false, placeholder, className, slashCommandItems, onSlashItemCommand, prefillMessage, attachmentsCount = 0, allowEnterSubmit = true, onSubmit, onChange, }, ref) {
+const PromptComposer = forwardRef(function PromptComposer({ disabled = false, placeholder, className, slashCommandItems, onSlashItemCommand, prefillMessage, attachmentsCount = 0, allowEnterSubmit = true, onSubmit, onChange, scrollProps = {}, }, ref) {
     const { editor } = usePromptComposerEditor({
         disabled,
         placeholder,
@@ -29,7 +30,7 @@ const PromptComposer = forwardRef(function PromptComposer({ disabled = false, pl
         },
     }), []);
     useImperativeHandle(ref, () => (editor ? createPromptComposerHandle(editor) : unavailableHandle), [editor, unavailableHandle]);
-    return (jsx("div", { className: cn(S.root, className), "data-disabled": disabled ? 'true' : 'false', children: jsx(EditorContent, { editor: editor, className: S.editorMount }) }));
+    return (jsx("div", { className: cn(S.root, className), "data-disabled": disabled ? 'true' : 'false', children: jsx(Scroll, { y: true, fadeSize: "s", ...scrollProps, className: S.scroller, children: jsx(EditorContent, { editor: editor, className: S.editorMount }) }) }));
 });
 
 export { PromptComposer };

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_editorMount__B9G-o{background:transparent;border:none;border-radius:0!important;box-shadow:none!important;display:flex;flex:1;flex-direction:column;max-height:200px;min-height:40px;min-width:0;padding:0!important}.PromptComposer_editorMount__B9G-o:focus-within{box-shadow:none!important}.PromptComposer_editorMount__B9G-o .promptComposerEditor{border:none!important;box-shadow:none!important;flex:1;margin:0;max-height:200px!important;min-height:40px!important;outline:none!important;overflow-x:hidden!important;overflow-y:auto!important;padding:var(--p-2) 0 0!important;resize:none!important;white-space:pre-wrap;word-break:break-word}.PromptComposer_editorMount__B9G-o .promptComposerEmptyEditor .promptComposerEmptyNode:before{color:var(--muted-foreground);content:attr(data-placeholder);float:left;height:0;pointer-events:none}";
-var S = {"root":"PromptComposer_root__gfdXN","editorMount":"PromptComposer_editorMount__B9G-o"};
+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 .promptComposerEditor{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;white-space:pre-wrap;word-break:break-word}.PromptComposer_editorMount__B9G-o .promptComposerEmptyEditor .promptComposerEmptyNode: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"};
 styleInject(css_248z);
 
 export { S as default };

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

@@ -1,9 +1,15 @@
 import { Component } from 'react';
 import * as T from './Gallery.types';
+export type { GalleryItem } from './Gallery.types';
+export declare function normalizeGalleryItem(item: T.GalleryItem): {
+    src: string;
+    kind: 'image' | 'video';
+};
+type NormalizedItem = ReturnType<typeof normalizeGalleryItem>;
 type Direction = -1 | 1;
 export declare class Gallery extends Component<T.Props> {
     store: any;
-    items: any;
+    items: NormalizedItem[];
     index: number;
     timers: any;
     startX: any;
@@ -17,6 +23,7 @@ export declare class Gallery extends Component<T.Props> {
     componentDidMount(): void;
     componentWillUnmount(): void;
     componentDidUpdate(prevProps: any): void;
+    get normalizedItems(): NormalizedItem[];
     getStateItems(): any[];
     recenter(): void;
     init(): void;
@@ -33,4 +40,3 @@ export declare class Gallery extends Component<T.Props> {
     switch(direction: Direction): void;
     render(): JSX.Element;
 }
-export {};

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

@@ -1,12 +1,16 @@
 import type { ComponentType, Size } from 'uilib/types';
+export type GalleryItem = string | {
+    src: string;
+    kind?: 'image' | 'video';
+};
 export type Props = ComponentType & {
-    items: string[];
+    items: GalleryItem[];
     size?: Size;
     animation?: boolean;
     startIndex?: number;
     showArrows?: boolean;
     showDots?: boolean;
     initialBounce?: boolean;
-    cover: true;
-    onChange?: (index: number, item: string) => void;
+    cover?: boolean;
+    onChange?: (index: number, src: string) => void;
 };

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

@@ -10,4 +10,5 @@ export declare const PromptComposer: import("react").ForwardRefExoticComponent<i
     allowEnterSubmit?: boolean;
     onSubmit?: (text: string, editor: import("@tiptap/core").Editor) => void;
     onChange?: (text: string, editor: import("@tiptap/core").Editor) => void;
+    scrollProps?: Partial<import("../Scroll/Scroll.types").Props>;
 } & import("react").RefAttributes<PromptComposerHandle>>;

package/dist/esm/types/src/components/PromptComposer/PromptComposer.helpers.d.ts

@@ -8,5 +8,5 @@ export declare function safePromptComposerEditorText(editor: {
 export declare function promptComposerSafeEditorDom(editor: {
     readonly isDestroyed?: boolean;
 } | null | undefined): HTMLElement | null;
-/** Autosize `.ProseMirror` root: empty -> floor, text -> measured height with clamp. */
+/** Autosize `.ProseMirror` root: empty -> floor, text -> measured content height. */
 export declare function syncPromptComposerHeight(el: HTMLElement, text: string): void;

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

@@ -1,6 +1,7 @@
 import type { Editor } from '@tiptap/core';
 import type { HTMLAttributes } from 'react';
 import type { SlashCommandItem, SlashOnItemCommand } from '../../tiptap/slash-mention';
+import type { Props as ScrollProps } from '../Scroll/Scroll.types';
 export type Props = HTMLAttributes<HTMLDivElement> & {
     disabled?: boolean;
     placeholder?: string;
@@ -15,5 +16,6 @@ export type Props = HTMLAttributes<HTMLDivElement> & {
     onSubmit?: (text: string, editor: Editor) => void;
     /** Called on every transaction with plain text value. */
     onChange?: (text: string, editor: Editor) => void;
+    scrollProps?: Partial<ScrollProps>;
 };
 export type PromptComposerProps = Props;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@homecode/ui",
-  "version": "5.3.2",
+  "version": "5.3.4",
   "description": "React UI components library",
   "scripts": {
     "tests": "jest",
@@ -36,13 +36,15 @@
     "type": "git",
     "url": "git+https://github.com/foreverido/uilib.git"
   },
-  "main": "dist/cjs",
+  "main": "./dist/esm/index.js",
   "module": "dist/esm",
   "types": "dist/esm/types/index.d.ts",
   "type": "module",
   "exports": {
     ".": {
       "import": "./dist/esm/index.js",
+      "require": "./dist/esm/index.js",
+      "default": "./dist/esm/index.js",
       "types": "./dist/esm/types/index.d.ts"
     },
     "./icons": {