@homecode/ui 5.20.23 → 5.21.0

package/dist/esm/index.js

@@ -60,6 +60,7 @@ export { Scroll } from './src/components/Scroll/Scroll.js';
 export { Slider } from './src/components/Slider/Slider.js';
 export { Shimmer } from './src/components/Shimmer/Shimmer.js';
 export { Spinner } from './src/components/Spinner/Spinner.js';
+export { Stepper } from './src/components/Stepper/Stepper.js';
 export { Table } from './src/components/Table/Table.js';
 export { Tabs } from './src/components/Tabs/Tabs.js';
 export { TextShimmer } from './src/components/TextShimmer/TextShimmer.js';

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

@@ -90,6 +90,8 @@ import '../RadioButton/RadioButton.styl.js';
 import '../RadioGroup/RadioGroup.styl.js';
 import '../Router/Router.js';
 import '../Resizer/Resizer.styl.js';
+import '../Gallery/Dots/Dots.styl.js';
+import '../Stepper/Stepper.styl.js';
 import '../Tabs/Tabs.styl.js';
 import '../TextWithDeferTooltip/TextWithDeferTooltip.styl.js';
 import '../Text/Text.js';

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

@@ -2,8 +2,13 @@ import { jsx } from 'react/jsx-runtime';
 import cn from 'classnames';
 import S from './Dots.styl.js';
 
-function Dots({ index, count }) {
-    return (jsx("div", { className: S.root, children: jsx("div", { className: S.inner, children: Array.from({ length: count }).map((_, i) => (jsx("div", { className: cn(S.item, i === index && S.active) }, i))) }) }));
+function Dots({ index, count, className, onSelect, getLabel, }) {
+    return (jsx("div", { className: cn(S.root, onSelect && S.interactive, className), children: jsx("div", { className: S.inner, children: Array.from({ length: count }).map((_, i) => {
+                const classes = cn(S.item, i === index && S.active);
+                if (!onSelect)
+                    return jsx("div", { className: classes }, i);
+                return (jsx("button", { type: "button", className: classes, "aria-label": getLabel?.(i) ?? String(i + 1), "aria-current": i === index ? 'step' : undefined, onClick: () => onSelect(i) }, i));
+            }) }) }));
 }
 
 export { Dots as default };

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

@@ -1,5 +1,5 @@
-var css_248z = ".Dots_root__dTavT{bottom:1%;display:flex;justify-content:center;-webkit-mask-image:linear-gradient(90deg,transparent,#000 3%,#000 97%,transparent);mask-image:linear-gradient(90deg,transparent,#000 3%,#000 97%,transparent);overflow:hidden;padding:0 10%;pointer-events:none;position:absolute;width:100%}.Dots_inner__0Nqa9{align-items:center;display:flex}.Dots_item__gEVuS{background-color:var(--accent-color-alpha-200);border-radius:50%;box-shadow:0 0 0 1px var(--decent-color-alpha-500);flex-shrink:0;height:8px;margin:3px;transition:.1s ease-out;transition-property:background-color,transform;width:8px}.Dots_item__gEVuS.Dots_active__gAUAj{background-color:var(--accent-color-alpha-500);transform:scale(1.2)}";
-var S = {"root":"Dots_root__dTavT","inner":"Dots_inner__0Nqa9","item":"Dots_item__gEVuS","active":"Dots_active__gAUAj"};
+var css_248z = ".Dots_root__dTavT{bottom:1%;display:flex;justify-content:center;-webkit-mask-image:linear-gradient(90deg,transparent,#000 3%,#000 97%,transparent);mask-image:linear-gradient(90deg,transparent,#000 3%,#000 97%,transparent);overflow:hidden;padding:0 10%;pointer-events:none;position:absolute;width:100%}.Dots_inner__0Nqa9{align-items:center;display:flex}.Dots_item__gEVuS{background-color:var(--accent-color-alpha-200);border-radius:50%;box-shadow:0 0 0 1px var(--decent-color-alpha-500);flex-shrink:0;height:8px;margin:3px;transition:.1s ease-out;transition-property:background-color,transform;width:8px}.Dots_item__gEVuS.Dots_active__gAUAj{background-color:var(--accent-color-alpha-500);transform:scale(1.2)}.Dots_interactive__wQylw{pointer-events:auto}.Dots_interactive__wQylw .Dots_item__gEVuS{border:none;cursor:pointer;padding:0}.Dots_interactive__wQylw .Dots_item__gEVuS:hover:not(.Dots_active__gAUAj){background-color:var(--accent-color-alpha-400)}.Dots_interactive__wQylw .Dots_item__gEVuS:focus-visible{outline:2px solid var(--active-color);outline-offset:2px}";
+var S = {"root":"Dots_root__dTavT","inner":"Dots_inner__0Nqa9","item":"Dots_item__gEVuS","active":"Dots_active__gAUAj","interactive":"Dots_interactive__wQylw"};
             if (typeof document !== 'undefined') {
               var __uilibHead = document.head || document.getElementsByTagName('head')[0];
               if (__uilibHead) {

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

@@ -90,6 +90,8 @@ import '../RadioButton/RadioButton.styl.js';
 import '../RadioGroup/RadioGroup.styl.js';
 import '../Router/Router.js';
 import '../Resizer/Resizer.styl.js';
+import '../Gallery/Dots/Dots.styl.js';
+import '../Stepper/Stepper.styl.js';
 import '../Tabs/Tabs.styl.js';
 import '../TextWithDeferTooltip/TextWithDeferTooltip.styl.js';
 import '../Text/Text.js';

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

@@ -6,8 +6,14 @@ import { Button } from '../Button/Button.js';
 import { Icon } from '../Icon/Icon.js';
 import S from './LightBox.styl.js';
 
+/** Matches the fade-out in LightBox.styl: the blur stays until it ends. */
+const FADE_MS = 200;
 function LightBox({ children, className, onClose, blur, ...props }) {
     const [isOpen, setOpen] = useState(false);
+    // A closed light box stays mounted at opacity 0, and an invisible
+    // full-screen blur still costs a backdrop pass every frame (a list of cards,
+    // each with its own light box, stalled the page). Blur only while it shows.
+    const [blurOn, setBlurOn] = useState(false);
     const onKeyDown = useCallback(e => {
         if (isOpen && e.key === 'Escape') {
             e.stopPropagation();
@@ -18,11 +24,19 @@ function LightBox({ children, className, onClose, blur, ...props }) {
     useEffect(() => {
         setOpen(props.isOpen);
     }, [props.isOpen]);
+    useEffect(() => {
+        if (isOpen) {
+            setBlurOn(true);
+            return;
+        }
+        const timer = setTimeout(() => setBlurOn(false), FADE_MS);
+        return () => clearTimeout(timer);
+    }, [isOpen]);
     useEffect(() => {
         document.addEventListener('keydown', onKeyDown, true);
         return () => document.removeEventListener('keydown', onKeyDown, true);
     }, [isOpen]);
-    return (jsxs(Paranja, { className: cn(S.root, isOpen && S.open, className), blur: blur, children: [children, jsx(Button, { className: S.close, onClick: onClose, variant: "clear", children: jsx(Icon, { type: "close", size: "l" }) })] }));
+    return (jsxs(Paranja, { className: cn(S.root, isOpen && S.open, className), blur: blur && blurOn, children: [children, jsx(Button, { className: S.close, onClick: onClose, variant: "clear", children: jsx(Icon, { type: "close", size: "l" }) })] }));
 }
 
 export { LightBox };

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

@@ -503,7 +503,10 @@ class Popup extends Component {
         const wrapperClasses = cn(S.contentWrapper, inline && S.inline, isOpen && S.isOpen, animating && S.animating, wrapperProps.className);
         const trigger = this.triggerElem.current;
         const [axis, float] = direction.split('-');
-        const classes = cn(S.content, outlined && S.outlined, animated && animating && S.animating, elevation && S[`elevation-${elevation}`], S[`size-${size}`], S[`axis-${axis}`], S[`float-${float || 'middle'}`], blur && S.blur, round && S.round, contentProps.className);
+        const classes = cn(S.content, outlined && S.outlined, animated && animating && S.animating, elevation && S[`elevation-${elevation}`], S[`size-${size}`], S[`axis-${axis}`], S[`float-${float || 'middle'}`], 
+        // A closed popup stays mounted at opacity 0; its blur would still cost
+        // a backdrop pass every frame, so blur only while the content is shown.
+        blur && isContentVisible && S.blur, round && S.round, contentProps.className);
         if (trigger && !inline && triggerBounds) {
             const shiftTf = boundaryFit.left !== 0 || boundaryFit.top !== 0
                 ? `translate3d(${boundaryFit.left}px, ${boundaryFit.top}px, 0)`

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

@@ -0,0 +1,94 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useState, useRef, useEffect } from 'react';
+import cn from 'classnames';
+import { Button } from '../Button/Button.js';
+import Dots from '../Gallery/Dots/Dots.js';
+import S from './Stepper.styl.js';
+
+function indexOf(steps, id) {
+    const i = steps.findIndex(s => s.id === id);
+    return i < 0 ? 0 : i;
+}
+function textOf(node) {
+    return typeof node === 'string' || typeof node === 'number'
+        ? String(node)
+        : '';
+}
+function Stepper({ steps, activeId, defaultActiveId, onChange, size = 'm', prevLabel = 'Prev', nextLabel = 'Next', prevButtonProps, nextButtonProps, renderPrevButton, renderNextButton, showDots = true, dotsClickable = true, renderAll = false, animation = true, className, headerClassName, contentClassName, footerClassName, }) {
+    const controlled = activeId !== undefined;
+    const [ownId, setOwnId] = useState(() => defaultActiveId ?? steps[0]?.id);
+    const currentId = controlled ? activeId : ownId;
+    const index = indexOf(steps, currentId);
+    const step = steps[index];
+    const count = steps.length;
+    // The direction of the last move, for the slide.
+    const prevIndex = useRef(index);
+    const [dir, setDir] = useState(null);
+    useEffect(() => {
+        if (index !== prevIndex.current) {
+            setDir(index > prevIndex.current ? 'forward' : 'back');
+            prevIndex.current = index;
+        }
+    }, [index]);
+    // A step that went away (steps changed): fall back to the nearest one.
+    useEffect(() => {
+        if (!controlled && step && step.id !== ownId)
+            setOwnId(step.id);
+    }, [controlled, step?.id, ownId]);
+    if (!step)
+        return null;
+    const go = (i) => {
+        const target = steps[Math.max(0, Math.min(count - 1, i))];
+        if (!target || target.id === step.id)
+            return;
+        if (!controlled)
+            setOwnId(target.id);
+        onChange?.(target.id, steps.indexOf(target));
+    };
+    const api = {
+        index,
+        count,
+        step,
+        isFirst: index === 0,
+        isLast: index === count - 1,
+        prev: () => go(index - 1),
+        next: () => go(index + 1),
+        go,
+    };
+    const button = (kind) => {
+        const own = step[kind];
+        const common = kind === 'prev' ? prevButtonProps : nextButtonProps;
+        if (own === false || (own === undefined && common === false)) {
+            return jsx("span", { className: S.placeholder });
+        }
+        const props = { ...(common || {}), ...(own || {}) };
+        const { onClick, children, ...rest } = props;
+        const isPrev = kind === 'prev';
+        // Nowhere to go and nothing else to do.
+        const stuck = isPrev ? api.isFirst : api.isLast && !onClick;
+        if (isPrev && api.isFirst && !onClick) {
+            return jsx("span", { className: S.placeholder });
+        }
+        return (jsx(Button, { round: true, size: size, variant: isPrev ? 'clear' : 'primary', disabled: stuck, ...rest, onClick: (e) => {
+                if (onClick?.(e) === false || e.defaultPrevented)
+                    return;
+                if (isPrev)
+                    api.prev();
+                else
+                    api.next();
+            }, children: children ?? (isPrev ? prevLabel : nextLabel) }));
+    };
+    const renderContent = (s) => typeof s.content === 'function'
+        ? s.content(s === step ? api : { ...api, step: s })
+        : s.content;
+    const renderStep = (s, active) => (jsxs("div", { className: cn(S.step, active && animation && dir && S[dir], !active && S.hidden), "aria-hidden": !active || undefined, children: [(s.title || s.description) && (jsxs("div", { className: cn(S.header, headerClassName), children: [s.title && jsx("div", { className: S.title, children: s.title }), s.description && (jsx("div", { className: S.description, children: s.description }))] })), jsx("div", { className: cn(S.content, contentClassName), children: renderContent(s) })] }, s.id));
+    return (jsxs("div", { className: cn(S.root, S[`size-${size}`], className), children: [jsx("div", { className: S.body, children: steps.map(s => s === step || renderAll || s.forceRender
+                    ? renderStep(s, s === step)
+                    : null) }), jsxs("div", { className: cn(S.footer, footerClassName), children: [jsx("div", { className: S.prev, children: renderPrevButton
+                            ? renderPrevButton(api, button('prev'))
+                            : button('prev') }), showDots && count > 1 && (jsx(Dots, { index: index, count: count, className: S.dots, onSelect: dotsClickable ? go : undefined, getLabel: i => textOf(steps[i].title) || String(i + 1) })), jsx("div", { className: S.next, children: renderNextButton
+                            ? renderNextButton(api, button('next'))
+                            : button('next') })] })] }));
+}
+
+export { Stepper };

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

@@ -0,0 +1,20 @@
+var css_248z = ".Stepper_root__WET-9{display:flex;flex-direction:column;gap:16px;min-width:0}.Stepper_body__ZRBXe{min-width:0;position:relative}.Stepper_step__e-4NN{display:flex;flex-direction:column;gap:16px;min-width:0}.Stepper_step__e-4NN.Stepper_hidden__ReHDU{display:none}.Stepper_step__e-4NN.Stepper_forward__SY8S2{animation:Stepper_stepFromRight__sFstu .22s ease-out}.Stepper_step__e-4NN.Stepper_back__ko4wh{animation:Stepper_stepFromLeft__AEIpv .22s ease-out}.Stepper_header__Hs5N2{display:flex;flex-direction:column;gap:4px}.Stepper_title__N8esM{font-size:1.4em;font-weight:600;line-height:1.2}.Stepper_description__ng-1A{line-height:1.4;opacity:.6}.Stepper_content__CTnZW{display:flex;flex-direction:column;gap:12px;min-width:0}.Stepper_footer__54ZR5{grid-gap:12px;align-items:center;display:grid;gap:12px;grid-template-columns:1fr auto 1fr}.Stepper_next__MTBhU,.Stepper_prev__eA85V{align-items:center;display:flex;gap:8px;min-width:0}.Stepper_prev__eA85V{grid-column:1;justify-self:start}.Stepper_next__MTBhU{grid-column:3;justify-self:end}.Stepper_placeholder__rpIAG{display:block}.Stepper_dots__cwSqS{grid-column:2;-webkit-mask-image:none;mask-image:none;padding:0;position:static;width:auto}.Stepper_size-s__MZtOL .Stepper_title__N8esM{font-size:1.15em}.Stepper_size-l__IP2y8 .Stepper_title__N8esM{font-size:1.7em}@media (prefers-reduced-motion:reduce){.Stepper_step__e-4NN{animation:none!important}}@keyframes Stepper_stepFromRight__sFstu{0%{opacity:0;transform:translateX(24px)}to{opacity:1;transform:none}}@keyframes Stepper_stepFromLeft__AEIpv{0%{opacity:0;transform:translateX(-24px)}to{opacity:1;transform:none}}";
+var S = {"root":"Stepper_root__WET-9","body":"Stepper_body__ZRBXe","step":"Stepper_step__e-4NN","hidden":"Stepper_hidden__ReHDU","forward":"Stepper_forward__SY8S2","stepFromRight":"Stepper_stepFromRight__sFstu","back":"Stepper_back__ko4wh","stepFromLeft":"Stepper_stepFromLeft__AEIpv","header":"Stepper_header__Hs5N2","title":"Stepper_title__N8esM","description":"Stepper_description__ng-1A","content":"Stepper_content__CTnZW","footer":"Stepper_footer__54ZR5","prev":"Stepper_prev__eA85V","next":"Stepper_next__MTBhU","placeholder":"Stepper_placeholder__rpIAG","dots":"Stepper_dots__cwSqS","size-s":"Stepper_size-s__MZtOL","size-l":"Stepper_size-l__IP2y8"};
+            if (typeof document !== 'undefined') {
+              var __uilibHead = document.head || document.getElementsByTagName('head')[0];
+              if (__uilibHead) {
+                var __uilibStyle = document.createElement('style');
+                __uilibStyle.setAttribute('data-uilib-css', '');
+                __uilibStyle.appendChild(document.createTextNode(css_248z));
+                var __uilibLink = __uilibHead.querySelector('link[rel="stylesheet"]');
+                var __uilibInline = __uilibHead.querySelector('style:not([data-uilib-css])');
+                var __uilibAnchor = __uilibLink || __uilibInline;
+                if (__uilibLink && __uilibInline && (__uilibLink.compareDocumentPosition(__uilibInline) & 4) === 0) {
+                  __uilibAnchor = __uilibInline;
+                }
+                if (__uilibAnchor) __uilibHead.insertBefore(__uilibStyle, __uilibAnchor);
+                else __uilibHead.appendChild(__uilibStyle);
+              }
+            }
+
+export { S as default };

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

@@ -1,4 +1,9 @@
-export default function Dots({ index, count }: {
-    index: any;
-    count: any;
-}): import("react").JSX.Element;
+type Props = {
+    index: number;
+    count: number;
+    className?: string;
+    onSelect?: (index: number) => void;
+    getLabel?: (index: number) => string;
+};
+export default function Dots({ index, count, className, onSelect, getLabel, }: Props): import("react").JSX.Element;
+export {};

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

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

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

@@ -0,0 +1,3 @@
+import * as T from './Stepper.types';
+export type { Step as StepperStep, StepButton as StepperButton, StepperApi, Props as StepperProps, } from './Stepper.types';
+export declare function Stepper({ steps, activeId, defaultActiveId, onChange, size, prevLabel, nextLabel, prevButtonProps, nextButtonProps, renderPrevButton, renderNextButton, showDots, dotsClickable, renderAll, animation, className, headerClassName, contentClassName, footerClassName, }: T.Props): import("react").JSX.Element;

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

@@ -0,0 +1,49 @@
+import { ReactNode } from 'react';
+import { Props as ButtonProps } from '../Button/Button.types';
+import { Size } from 'uilib/types';
+type ID = string | number;
+export type StepButton = false | (Omit<Partial<ButtonProps>, 'onClick'> & {
+    onClick?: (e: React.MouseEvent<HTMLButtonElement>) => boolean | void;
+    [data: `data-${string}`]: string | undefined;
+});
+export type StepperApi = {
+    index: number;
+    count: number;
+    step: Step;
+    isFirst: boolean;
+    isLast: boolean;
+    prev: () => void;
+    next: () => void;
+    go: (index: number) => void;
+};
+export type Step = {
+    id: ID;
+    title?: ReactNode;
+    description?: ReactNode;
+    content?: ReactNode | ((api: StepperApi) => ReactNode);
+    forceRender?: boolean;
+    prev?: StepButton;
+    next?: StepButton;
+};
+export type Props = {
+    steps: Step[];
+    activeId?: ID;
+    defaultActiveId?: ID;
+    onChange?: (id: ID, index: number) => void;
+    size?: Size;
+    prevLabel?: ReactNode;
+    nextLabel?: ReactNode;
+    prevButtonProps?: StepButton;
+    nextButtonProps?: StepButton;
+    renderPrevButton?: (api: StepperApi, button: ReactNode) => ReactNode;
+    renderNextButton?: (api: StepperApi, button: ReactNode) => ReactNode;
+    showDots?: boolean;
+    dotsClickable?: boolean;
+    renderAll?: boolean;
+    animation?: boolean;
+    className?: string;
+    headerClassName?: string;
+    contentClassName?: string;
+    footerClassName?: string;
+};
+export {};

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

@@ -53,6 +53,7 @@ export * from './Scroll/Scroll';
 export * from './Slider/Slider';
 export * from './Shimmer/Shimmer';
 export * from './Spinner/Spinner';
+export * from './Stepper/Stepper';
 export * from './Table/Table';
 export * from './Tabs/Tabs';
 export * from './TextShimmer/TextShimmer';

package/package.json

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