@zuzjs/ui 0.9.0 → 0.9.1

package/dist/cjs/comps/Box/index.js

@@ -6,20 +6,7 @@ const Box = forwardRef((props, ref) => {
     const innerRef = useRef(null);
     const targetRef = useMemo(() => ref && typeof ref !== "function" && ref.current ? ref : innerRef, [ref]);
     const { style: _style, className, rest } = useBase(pops, targetRef);
-    // const handleInternalClick = (e: React.MouseEvent<HTMLDivElement>) => {
-    //     // if ( withEditor && isBrowser ) {
-    //     //     // window.dispatchEvent(new CustomEvent(`ZUZ_COMP_SELECTED`, {
-    //     //     //     detail: {
-    //     //     //         compName: 'Box',
-    //     //     //         target: e.target,
-    //     //     //         props
-    //     //     //     }
-    //     //     // }))
-    //     // }
-    // }
-    return _jsx("div", { ref: ref || innerRef, 
-        // onClick={handleInternalClick}
-        className: `${className} ${withEditor ? `--with-zuz-editor` : ``}`.trim(), style: {
+    return _jsx("div", { ref: ref || innerRef, className: `${className} ${withEditor ? `--with-zuz-editor` : ``}`.trim(), style: {
             ..._style,
             ...(style || {})
         }, ...rest });

package/dist/cjs/comps/Password/index.js

@@ -23,7 +23,7 @@ const Password = forwardRef((props, ref) => {
         onChange && onChange(ev);
     }, 100);
     useEffect(() => { }, []);
-    return _jsxs(Box, { as: `w:100% flex cols`, children: [_jsxs(Box, { style: style, className: `--password flex aic rel`, children: [_jsx(Input, { ref: ref, type: visible ? 'text' : 'password', className: className, onChange: debounce, ...rest }), _jsx(Button, { tabIndex: -1, onClick: () => setVisible(prev => !prev), className: `--toggle flex aic jcc abs`, children: visible ? SVGIcons.eye : SVGIcons.eyeSlash })] }), strenthMeter && _jsxs(Box, { as: `flex aic --password-meter --pb-score-${strenth.score}`, children: [_jsxs(Box, { as: `--password-bars flex aic`, children: [_jsx(Box, { as: `--pbar ${strenth.score >= 1 ? `--pb-on` : ``}`.trim() }), _jsx(Box, { as: `--pbar ${strenth.score >= 2 ? `--pb-on` : ``}`.trim() }), _jsx(Box, { as: `--pbar ${strenth.score >= 3 ? `--pb-on` : ``}`.trim() }), _jsx(Box, { as: `--pbar ${strenth.score >= 4 ? `--pb-on` : ``}`.trim() }), _jsx(Box, { as: `--pbar ${strenth.score >= 5 ? `--pb-on` : ``}`.trim() })] }), _jsx(Text, { as: `--password-meter-label`, "aria-hidden": true, children: strenth.result })] })] });
+    return _jsxs(Box, { as: `w:100% flex cols`, children: [_jsxs(Box, { style: style, className: `--password flex aic rel`, children: [_jsx(Input, { ref: ref, type: visible ? 'text' : 'password', className: className, onChange: debounce, ...rest }), _jsx(Button, { tabIndex: -1, onClick: () => setVisible(prev => !prev), className: `--toggle flex aic jcc abs`, children: visible ? SVGIcons.eye : SVGIcons.eyeSlash })] }), strenthMeter && _jsxs(Box, { as: `flex aic --password-meter --pb-score-${strenth.score}`, style: style, children: [_jsxs(Box, { as: `--password-bars flex aic`, children: [_jsx(Box, { as: `--pbar ${strenth.score >= 1 ? `--pb-on` : ``}`.trim() }), _jsx(Box, { as: `--pbar ${strenth.score >= 2 ? `--pb-on` : ``}`.trim() }), _jsx(Box, { as: `--pbar ${strenth.score >= 3 ? `--pb-on` : ``}`.trim() }), _jsx(Box, { as: `--pbar ${strenth.score >= 4 ? `--pb-on` : ``}`.trim() }), _jsx(Box, { as: `--pbar ${strenth.score >= 5 ? `--pb-on` : ``}`.trim() })] }), _jsx(Text, { as: `--password-meter-label`, "aria-hidden": true, children: strenth.result })] })] });
 });
 Password.displayName = `Zuz.Password`;
 export default Password;

package/dist/cjs/comps/Segmented/index.d.ts

@@ -1,6 +1,6 @@
 import { Variant } from "../../types/enums";
 import { BoxProps } from "../Box";
-import { Segment } from "./types";
+import { Segment, SegmentController } from "./types";
 /**
  * `SelectTabs` component is a segmented control that allows switching between segments.
  *
@@ -25,5 +25,5 @@ declare const Segmented: import("react").ForwardRefExoticComponent<BoxProps & {
     selected?: number;
     onSwitch?: (segment: Segment) => void;
     items: Segment[];
-} & import("react").RefAttributes<HTMLDivElement>>;
+} & import("react").RefAttributes<SegmentController>>;
 export default Segmented;

package/dist/cjs/comps/Segmented/index.js

@@ -1,6 +1,6 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { forwardRef, useEffect, useRef, useState } from "react";
+import { forwardRef, useEffect, useImperativeHandle, useRef, useState } from "react";
 import { useBase } from "../../hooks";
 import { Variant } from "../../types/enums";
 import Box from "../Box";
@@ -26,6 +26,8 @@ import SegmentItem from "./item";
 const Segmented = forwardRef((props, ref) => {
     const { animate, fx, items, selected, size, variant, onSwitch, ...pops } = props;
     const [_selected, setSelected] = useState(selected || 0);
+    const hasMounted = useRef(false);
+    const prevSelectedRef = useRef(_selected);
     const { className, style, rest } = useBase(pops);
     const _tab = useRef(null);
     const _segmented = useRef(null);
@@ -40,8 +42,9 @@ const Segmented = forwardRef((props, ref) => {
         // console.log(selected, _selected, index, mounted)
         if (force || (_selected != index && _selected != -2)) {
             setSelected(index);
-            if (onSwitch)
-                onSwitch(meta);
+            prevSelectedRef.current = _selected;
+            if (hasMounted.current)
+                onSwitch?.(meta);
         }
         if (_tab.current) {
             const _sp = _segmented.current?.getBoundingClientRect();
@@ -49,11 +52,22 @@ const Segmented = forwardRef((props, ref) => {
             _tab.current.style.setProperty(`--x`, `${_sp ? x - _sp.left : x}px`);
         }
     };
-    useEffect(() => {
-        if (selected !== undefined && selected != _selected) {
-            setSelected(selected);
+    useImperativeHandle(ref, () => ({
+        setSelected: (index) => {
+            if (typeof index === `number` && index != _selected) {
+                setSelected(index);
+            }
         }
-    }, [selected, _selected]);
+    }), [_selected]);
+    // useEffect(() => {
+    //     if (typeof selected === `number` && selected != _selected) {
+    //         prevSelectedRef.current = _selected;
+    //         setSelected(selected);
+    //     }
+    // }, [selected, _selected]);
+    useEffect(() => {
+        hasMounted.current = true;
+    }, []);
     return _jsxs(Box, { ref: _segmented, "data-selected": _selected, className: `${className} --segmented --${variant || Variant.Small} flex aic rel`, style: style, ...rest, children: [_jsx(Box, { ref: _tab, className: `--segment-tab abs` }), items.map((item, i) => _jsx(SegmentItem, { onSelect: handleSelect, selected: _selected == i, meta: {
                     ...item,
                     index: i

package/dist/cjs/comps/Segmented/types.d.ts

@@ -36,3 +36,6 @@ export type SegmentItemProps = {
     selected: boolean;
     onSelect: (index: number, width: number, x: number, segment: Segment, force: boolean) => void;
 };
+export interface SegmentController {
+    setSelected: (index: number) => void;
+}

package/dist/esm/comps/Box/index.js

@@ -6,20 +6,7 @@ const Box = forwardRef((props, ref) => {
     const innerRef = useRef(null);
     const targetRef = useMemo(() => ref && typeof ref !== "function" && ref.current ? ref : innerRef, [ref]);
     const { style: _style, className, rest } = useBase(pops, targetRef);
-    // const handleInternalClick = (e: React.MouseEvent<HTMLDivElement>) => {
-    //     // if ( withEditor && isBrowser ) {
-    //     //     // window.dispatchEvent(new CustomEvent(`ZUZ_COMP_SELECTED`, {
-    //     //     //     detail: {
-    //     //     //         compName: 'Box',
-    //     //     //         target: e.target,
-    //     //     //         props
-    //     //     //     }
-    //     //     // }))
-    //     // }
-    // }
-    return _jsx("div", { ref: ref || innerRef, 
-        // onClick={handleInternalClick}
-        className: `${className} ${withEditor ? `--with-zuz-editor` : ``}`.trim(), style: {
+    return _jsx("div", { ref: ref || innerRef, className: `${className} ${withEditor ? `--with-zuz-editor` : ``}`.trim(), style: {
             ..._style,
             ...(style || {})
         }, ...rest });

package/dist/esm/comps/Password/index.js

@@ -23,7 +23,7 @@ const Password = forwardRef((props, ref) => {
         onChange && onChange(ev);
     }, 100);
     useEffect(() => { }, []);
-    return _jsxs(Box, { as: `w:100% flex cols`, children: [_jsxs(Box, { style: style, className: `--password flex aic rel`, children: [_jsx(Input, { ref: ref, type: visible ? 'text' : 'password', className: className, onChange: debounce, ...rest }), _jsx(Button, { tabIndex: -1, onClick: () => setVisible(prev => !prev), className: `--toggle flex aic jcc abs`, children: visible ? SVGIcons.eye : SVGIcons.eyeSlash })] }), strenthMeter && _jsxs(Box, { as: `flex aic --password-meter --pb-score-${strenth.score}`, children: [_jsxs(Box, { as: `--password-bars flex aic`, children: [_jsx(Box, { as: `--pbar ${strenth.score >= 1 ? `--pb-on` : ``}`.trim() }), _jsx(Box, { as: `--pbar ${strenth.score >= 2 ? `--pb-on` : ``}`.trim() }), _jsx(Box, { as: `--pbar ${strenth.score >= 3 ? `--pb-on` : ``}`.trim() }), _jsx(Box, { as: `--pbar ${strenth.score >= 4 ? `--pb-on` : ``}`.trim() }), _jsx(Box, { as: `--pbar ${strenth.score >= 5 ? `--pb-on` : ``}`.trim() })] }), _jsx(Text, { as: `--password-meter-label`, "aria-hidden": true, children: strenth.result })] })] });
+    return _jsxs(Box, { as: `w:100% flex cols`, children: [_jsxs(Box, { style: style, className: `--password flex aic rel`, children: [_jsx(Input, { ref: ref, type: visible ? 'text' : 'password', className: className, onChange: debounce, ...rest }), _jsx(Button, { tabIndex: -1, onClick: () => setVisible(prev => !prev), className: `--toggle flex aic jcc abs`, children: visible ? SVGIcons.eye : SVGIcons.eyeSlash })] }), strenthMeter && _jsxs(Box, { as: `flex aic --password-meter --pb-score-${strenth.score}`, style: style, children: [_jsxs(Box, { as: `--password-bars flex aic`, children: [_jsx(Box, { as: `--pbar ${strenth.score >= 1 ? `--pb-on` : ``}`.trim() }), _jsx(Box, { as: `--pbar ${strenth.score >= 2 ? `--pb-on` : ``}`.trim() }), _jsx(Box, { as: `--pbar ${strenth.score >= 3 ? `--pb-on` : ``}`.trim() }), _jsx(Box, { as: `--pbar ${strenth.score >= 4 ? `--pb-on` : ``}`.trim() }), _jsx(Box, { as: `--pbar ${strenth.score >= 5 ? `--pb-on` : ``}`.trim() })] }), _jsx(Text, { as: `--password-meter-label`, "aria-hidden": true, children: strenth.result })] })] });
 });
 Password.displayName = `Zuz.Password`;
 export default Password;

package/dist/esm/comps/Segmented/index.d.ts

@@ -1,6 +1,6 @@
 import { Variant } from "../../types/enums";
 import { BoxProps } from "../Box";
-import { Segment } from "./types";
+import { Segment, SegmentController } from "./types";
 /**
  * `SelectTabs` component is a segmented control that allows switching between segments.
  *
@@ -25,5 +25,5 @@ declare const Segmented: import("react").ForwardRefExoticComponent<BoxProps & {
     selected?: number;
     onSwitch?: (segment: Segment) => void;
     items: Segment[];
-} & import("react").RefAttributes<HTMLDivElement>>;
+} & import("react").RefAttributes<SegmentController>>;
 export default Segmented;

package/dist/esm/comps/Segmented/index.js

@@ -1,6 +1,6 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { forwardRef, useEffect, useRef, useState } from "react";
+import { forwardRef, useEffect, useImperativeHandle, useRef, useState } from "react";
 import { useBase } from "../../hooks";
 import { Variant } from "../../types/enums";
 import Box from "../Box";
@@ -26,6 +26,8 @@ import SegmentItem from "./item";
 const Segmented = forwardRef((props, ref) => {
     const { animate, fx, items, selected, size, variant, onSwitch, ...pops } = props;
     const [_selected, setSelected] = useState(selected || 0);
+    const hasMounted = useRef(false);
+    const prevSelectedRef = useRef(_selected);
     const { className, style, rest } = useBase(pops);
     const _tab = useRef(null);
     const _segmented = useRef(null);
@@ -40,8 +42,9 @@ const Segmented = forwardRef((props, ref) => {
         // console.log(selected, _selected, index, mounted)
         if (force || (_selected != index && _selected != -2)) {
             setSelected(index);
-            if (onSwitch)
-                onSwitch(meta);
+            prevSelectedRef.current = _selected;
+            if (hasMounted.current)
+                onSwitch?.(meta);
         }
         if (_tab.current) {
             const _sp = _segmented.current?.getBoundingClientRect();
@@ -49,11 +52,22 @@ const Segmented = forwardRef((props, ref) => {
             _tab.current.style.setProperty(`--x`, `${_sp ? x - _sp.left : x}px`);
         }
     };
-    useEffect(() => {
-        if (selected !== undefined && selected != _selected) {
-            setSelected(selected);
+    useImperativeHandle(ref, () => ({
+        setSelected: (index) => {
+            if (typeof index === `number` && index != _selected) {
+                setSelected(index);
+            }
         }
-    }, [selected, _selected]);
+    }), [_selected]);
+    // useEffect(() => {
+    //     if (typeof selected === `number` && selected != _selected) {
+    //         prevSelectedRef.current = _selected;
+    //         setSelected(selected);
+    //     }
+    // }, [selected, _selected]);
+    useEffect(() => {
+        hasMounted.current = true;
+    }, []);
     return _jsxs(Box, { ref: _segmented, "data-selected": _selected, className: `${className} --segmented --${variant || Variant.Small} flex aic rel`, style: style, ...rest, children: [_jsx(Box, { ref: _tab, className: `--segment-tab abs` }), items.map((item, i) => _jsx(SegmentItem, { onSelect: handleSelect, selected: _selected == i, meta: {
                     ...item,
                     index: i

package/dist/esm/comps/Segmented/types.d.ts

@@ -36,3 +36,6 @@ export type SegmentItemProps = {
     selected: boolean;
     onSelect: (index: number, width: number, x: number, segment: Segment, force: boolean) => void;
 };
+export interface SegmentController {
+    setSelected: (index: number) => void;
+}