@homecode/ui 5.14.1 → 5.15.0

package/dist/esm/index.js

@@ -20,6 +20,8 @@ export { Draggable } from './src/components/Draggable/Draggable.js';
 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 { FoldedLine } from './src/components/FoldedLine/FoldedLine.js';
+export { FoldedLineAction, FoldedLineActionsProvider, useFoldedLineActionsRegister } from './src/components/FoldedLine/FoldedLineActionsContext.js';
 export { Form } from './src/components/Form/Form.js';
 export { FormattedText } from './src/components/FormattedText/FormattedText.js';
 export { Gap } from './src/components/Gap/Gap.js';

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

@@ -49,10 +49,12 @@ import '../../tools/queryParams.js';
 import '../Draggable/Draggable.styl.js';
 import '../DropZone/DropZone.styl.js';
 import '../Flex/Flex.styl.js';
+import '../Gap/Gap.styl.js';
+import '../FoldedLine/FoldedLine.styl.js';
+import '../FoldedLine/FoldedLineActionsContext.js';
 import '../Form/Form.styl.js';
 import '../Form/Validator.js';
 import '../Form/SubmitButtons/SubmitButtons.styl.js';
-import '../Gap/Gap.styl.js';
 import '../ProgressCircular/ProgressCircular.styl.js';
 import '../Slider/Slider.styl.js';
 import '../VideoPlayer/VideoPlayer.styl.js';

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

@@ -0,0 +1,60 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import cn from 'classnames';
+import { useState, useRef, useCallback, useEffect } from 'react';
+import { Button } from '../Button/Button.js';
+import { Gap } from '../Gap/Gap.js';
+import { Icon } from '../Icon/Icon.js';
+import { Scroll } from '../Scroll/Scroll.js';
+import S from './FoldedLine.styl.js';
+import { FoldedLineActionsProvider } from './FoldedLineActionsContext.js';
+
+function FoldedLine({ trigger, children, defaultFolded = true, className, folded: foldedProp, onFoldedChange, onScrollInnerRef, hideFoldButton = false, showChevron = true, onScrollInner, contentScrolling = true, variant = 'default', }) {
+    const [uncontrolledFolded, setUncontrolledFolded] = useState(defaultFolded);
+    const isControlled = foldedProp !== undefined;
+    const isFolded = isControlled ? foldedProp : uncontrolledFolded;
+    const setFolded = (next) => {
+        if (isControlled)
+            onFoldedChange?.(next);
+        else
+            setUncontrolledFolded(next);
+    };
+    const [actions, setActions] = useState(new Map());
+    const triggerRef = useRef(null);
+    const isClear = variant === 'clear';
+    const registerAction = useCallback((id, node) => {
+        setActions(prev => {
+            const next = new Map(prev);
+            if (node == null)
+                next.delete(id);
+            else
+                next.set(id, node);
+            return next;
+        });
+    }, []);
+    useEffect(() => {
+        if (isFolded)
+            setActions(new Map());
+    }, [isFolded]);
+    const isInteractiveTarget = (target) => {
+        if (!(target instanceof Element))
+            return false;
+        return Boolean(target.closest('a[href], button, [role="button"], input, textarea, select, label'));
+    };
+    const handleClick = (e) => {
+        if (!children || isInteractiveTarget(e.target))
+            return;
+        if (isClear || isFolded) {
+            setFolded(!isFolded);
+            return;
+        }
+        if (triggerRef.current?.contains(e.target)) {
+            setFolded(true);
+        }
+    };
+    return (jsxs("div", { className: cn(S.root, isFolded && S.folded, Boolean(children) && S.hasChildren, isClear && S.clear, className), onClick: handleClick, children: [jsxs("div", { ref: triggerRef, className: cn(Boolean(children) && S.triggerInteractive), children: [typeof trigger === 'function' ? trigger(isFolded) : trigger, jsx(Gap, {}), showChevron && jsx(Icon, { type: "chevronDown", className: S.chevron })] }), !isFolded && children && (jsx("div", { className: S.content, children: jsxs(FoldedLineActionsProvider, { registerAction: registerAction, children: [contentScrolling ? (jsx(Scroll, { y: true, size: "s", autoHide: true, className: S.scroll, innerClassName: S.scrollInner, offset: { y: { before: 4, after: 14 } }, onInnerRef: onScrollInnerRef, onScroll: onScrollInner, children: children })) : (jsx("div", { className: S.scrollInner, children: children })), jsxs("div", { className: S.actions, children: [Array.from(actions.values()), !hideFoldButton && (jsxs(Button, { size: "xs", onClick: e => {
+                                        e.stopPropagation();
+                                        setFolded(true);
+                                    }, children: [jsx(Icon, { type: "chevronUp", size: "s" }), "Fold"] }))] })] }) }))] }));
+}
+
+export { FoldedLine };

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

@@ -0,0 +1,7 @@
+import styleInject from '../../../node_modules/style-inject/dist/style-inject.es.js';
+
+var css_248z = ".FoldedLine_root__lhi-1{border-radius:12px;display:flex;flex-direction:column;min-height:1rem;padding-left:calc(4px + var(--p-2));position:relative;transition:.1s ease-out;transition-property:border-radius,margin,background-color}.FoldedLine_root__lhi-1:before{background:var(--accent-color);border-radius:2px;bottom:2px;content:\"\";height:calc(100% - 4px);left:6px;opacity:.1;pointer-events:none;position:absolute;top:2px;width:4px}.FoldedLine_root__lhi-1:hover:before,.FoldedLine_root__lhi-1:not(.FoldedLine_folded__6zX8d):before{opacity:.7}.FoldedLine_root__lhi-1.FoldedLine_folded__6zX8d{border-radius:0;margin:0}.FoldedLine_root__lhi-1.FoldedLine_folded__6zX8d .FoldedLine_scroll__X7T5v{height:1em}.FoldedLine_root__lhi-1.FoldedLine_hasChildren__8hCZA.FoldedLine_folded__6zX8d{cursor:pointer}.FoldedLine_root__lhi-1.FoldedLine_hasChildren__8hCZA:not(.FoldedLine_folded__6zX8d) .FoldedLine_triggerInteractive__sCLnl{border-top-left-radius:inherit;border-top-right-radius:inherit}.FoldedLine_root__lhi-1.FoldedLine_clear__t47RA{border-radius:inherit;min-height:0;padding:0}.FoldedLine_root__lhi-1.FoldedLine_clear__t47RA:before{content:none}.FoldedLine_root__lhi-1.FoldedLine_clear__t47RA.FoldedLine_hasChildren__8hCZA{cursor:pointer}.FoldedLine_root__lhi-1.FoldedLine_clear__t47RA.FoldedLine_folded__6zX8d{-webkit-line-clamp:unset;-webkit-box-orient:unset;line-clamp:none;display:flex;overflow:visible;text-overflow:clip}.FoldedLine_root__lhi-1.FoldedLine_clear__t47RA .FoldedLine_triggerInteractive__sCLnl{opacity:1}.FoldedLine_chevron__zxu20{margin-right:var(--p-2);opacity:.3;transition:transform .1s ease-out,opacity .1s ease-out}.FoldedLine_root__lhi-1:hover .FoldedLine_chevron__zxu20{opacity:1}.FoldedLine_folded__6zX8d .FoldedLine_chevron__zxu20{transform:rotate(-90deg)}.FoldedLine_lineCompleted__sEfzm:before{background:var(--active-color)}.FoldedLine_lineInProgress__VcwjJ:before{animation:FoldedLine_foldedLinePulse__y-Dle 1.4s ease-in-out infinite}.FoldedLine_triggerInteractive__sCLnl{align-items:center;cursor:pointer;display:flex;gap:var(--p-1);opacity:.8;transition:background-color .1s ease-out}.FoldedLine_triggerInteractive__sCLnl:hover{opacity:1}.FoldedLine_triggerInteractive__sCLnl:hover:before{background-color:var(--accent-color-alpha-900)}.FoldedLine_header__gyQpI{cursor:pointer;height:100%;position:absolute;transition:opacity .1s ease-out;-webkit-user-select:none;-moz-user-select:none;user-select:none;width:100%;z-index:1}.FoldedLine_folded__6zX8d{-webkit-line-clamp:1;-webkit-box-orient:vertical;line-clamp:1;display:-webkit-box;overflow:hidden;text-overflow:ellipsis;transition:opacity .1s ease-out}.FoldedLine_folded__6zX8d:before{opacity:.4}.FoldedLine_folded__6zX8d .FoldedLine_scroll__X7T5v{max-height:1.5em}.FoldedLine_content__POIox{position:relative}.FoldedLine_scroll__X7T5v{max-height:50vh}.FoldedLine_scrollInner__1BGOP>div{-webkit-user-select:text;-moz-user-select:text;user-select:text}.FoldedLine_actions__SmF3b{align-items:center;bottom:0;display:flex;flex-shrink:0;flex-wrap:wrap;gap:var(--p-1);justify-content:flex-end;padding:0 var(--p-5) var(--p-3) var(--p-2);position:absolute;right:0}.FoldedLine_actions__SmF3b>button{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}@keyframes FoldedLine_foldedLinePulse__y-Dle{0%,to{background-color:var(--accent-color-alpha-400)}50%{background-color:var(--active-color)}}";
+var S = {"root":"FoldedLine_root__lhi-1","folded":"FoldedLine_folded__6zX8d","scroll":"FoldedLine_scroll__X7T5v","hasChildren":"FoldedLine_hasChildren__8hCZA","triggerInteractive":"FoldedLine_triggerInteractive__sCLnl","clear":"FoldedLine_clear__t47RA","chevron":"FoldedLine_chevron__zxu20","lineCompleted":"FoldedLine_lineCompleted__sEfzm","lineInProgress":"FoldedLine_lineInProgress__VcwjJ","foldedLinePulse":"FoldedLine_foldedLinePulse__y-Dle","header":"FoldedLine_header__gyQpI","content":"FoldedLine_content__POIox","scrollInner":"FoldedLine_scrollInner__1BGOP","actions":"FoldedLine_actions__SmF3b"};
+styleInject(css_248z);
+
+export { S as default };

package/dist/esm/src/components/FoldedLine/FoldedLineActionsContext.js

@@ -0,0 +1,25 @@
+import { jsx, Fragment } from 'react/jsx-runtime';
+import { createContext, useContext, useId, useEffect } from 'react';
+
+const FoldedLineActionsContext = createContext(null);
+function useFoldedLineActionsRegister() {
+    return useContext(FoldedLineActionsContext);
+}
+function FoldedLineActionsProvider({ registerAction, children, }) {
+    return (jsx(FoldedLineActionsContext.Provider, { value: registerAction, children: children }));
+}
+function FoldedLineAction({ children }) {
+    const register = useFoldedLineActionsRegister();
+    const id = useId();
+    useEffect(() => {
+        if (!register)
+            return undefined;
+        register(id, children);
+        return () => register(id, null);
+    }, [register, id, children]);
+    if (!register)
+        return jsx(Fragment, { children: children });
+    return null;
+}
+
+export { FoldedLineAction, FoldedLineActionsProvider, useFoldedLineActionsRegister };

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

@@ -51,10 +51,12 @@ import '../Dialogue/Dialogue.js';
 import { Draggable } from '../Draggable/Draggable.js';
 import '../DropZone/DropZone.styl.js';
 import '../Flex/Flex.styl.js';
+import '../Gap/Gap.styl.js';
+import '../FoldedLine/FoldedLine.styl.js';
+import '../FoldedLine/FoldedLineActionsContext.js';
 import '../Form/Form.styl.js';
 import '../Form/Validator.js';
 import '../Form/SubmitButtons/SubmitButtons.styl.js';
-import '../Gap/Gap.styl.js';
 import '../ProgressCircular/ProgressCircular.styl.js';
 import '../Slider/Slider.styl.js';
 import '../VideoPlayer/VideoPlayer.styl.js';

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

@@ -1,6 +1,7 @@
 import { jsx, Fragment } from 'react/jsx-runtime';
 import { useContext, useEffect, useMemo } from 'react';
 import { useStore } from 'justorm/react';
+import { parseQueryParams } from '../../tools/queryParams.js';
 import STORE from './store.js';
 import Context from './context.js';
 import { parsePath, replaceParamsInPath } from './Router.helpers.js';
@@ -17,7 +18,9 @@ const Router = (props) => {
     const fullPath = ctx.basePath + basePath;
     useEffect(() => {
         const onPopState = () => {
-            STORE.go(window.location.pathname, STORE.query, { replace: true });
+            STORE.go(window.location.pathname, parseQueryParams(), {
+                replace: true,
+            });
         };
         window.addEventListener('popstate', onPopState);
         return () => window.removeEventListener('popstate', onPopState);

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

@@ -0,0 +1,3 @@
+import * as T from './FoldedLine.types';
+export type FoldedLineProps = T.Props;
+export declare function FoldedLine({ trigger, children, defaultFolded, className, folded: foldedProp, onFoldedChange, onScrollInnerRef, hideFoldButton, showChevron, onScrollInner, contentScrolling, variant, }: FoldedLineProps): import("react").JSX.Element;

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

@@ -0,0 +1,15 @@
+import { ReactNode, UIEvent } from 'react';
+export type Props = {
+    trigger: ReactNode | ((isFolded: boolean) => ReactNode);
+    children?: ReactNode;
+    defaultFolded?: boolean;
+    className?: string;
+    folded?: boolean;
+    hideFoldButton?: boolean;
+    onFoldedChange?: (folded: boolean) => void;
+    onScrollInnerRef?: (el: HTMLDivElement | null) => void;
+    onScrollInner?: (e: UIEvent<HTMLDivElement>) => void;
+    contentScrolling?: boolean;
+    variant?: 'default' | 'clear';
+    showChevron?: boolean;
+};

package/dist/esm/types/src/components/FoldedLine/FoldedLineActionsContext.d.ts

@@ -0,0 +1,11 @@
+import { ReactNode } from 'react';
+type RegisterAction = (id: string, node: ReactNode | null) => void;
+export declare function useFoldedLineActionsRegister(): RegisterAction | null;
+export declare function FoldedLineActionsProvider({ registerAction, children, }: {
+    registerAction: RegisterAction;
+    children: ReactNode;
+}): import("react").JSX.Element;
+export declare function FoldedLineAction({ children }: {
+    children: ReactNode;
+}): import("react").JSX.Element;
+export {};

package/dist/esm/types/src/components/FoldedLine/index.d.ts

@@ -0,0 +1,3 @@
+export { FoldedLine } from './FoldedLine';
+export type { FoldedLineProps } from './FoldedLine';
+export { FoldedLineAction, FoldedLineActionsProvider, useFoldedLineActionsRegister, } from './FoldedLineActionsContext';

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

@@ -16,6 +16,7 @@ export * from './Draggable/Draggable';
 export * from './DropZone/DropZone';
 export * from './Expand/Expand';
 export * from './Flex/Flex';
+export * from './FoldedLine';
 export * from './Form/Form';
 export * from './FormattedText';
 export * from './Gap/Gap';

package/package.json

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