@ilokesto/utilinent 1.1.0 → 1.1.1

package/README.md

@@ -87,4 +87,13 @@ const UserListAfter = () => {
 };
 
 export default UserListAfter;
-```
+```
+
+ 
+
+## Custom proxy components
+
+If you want to build your own `Show`-style component (for example, `Clickable`),
+there is a short guide in the repo:
+
+- `CUSTOM_CLICKABLE.md`

package/dist/components/For/index.d.ts

@@ -0,0 +1,2 @@
+import type { ForType } from "./types";
+export declare const For: ForType;

package/dist/components/{For.js → For/index.js}

@@ -1,5 +1,5 @@
 import { createElement, forwardRef } from "react";
-import { createTagProxy } from "../core/createTagProxy";
+import { createProxy } from "../../core/createProxy";
 function BaseFor({ each, children, fallback = null, }) {
     return each && each.length > 0 ? each.map(children) : fallback;
 }
@@ -9,4 +9,4 @@ forwardRef(({ each, children, fallback = null, ...props }, ref) => {
     const content = BaseFor({ each, children, fallback });
     return createElement(tag, { ...props, ref }, content);
 });
-export const For = createTagProxy(BaseFor, renderForTag, "for");
+export const For = createProxy(BaseFor, renderForTag, "for");

package/dist/components/For/types.d.ts

@@ -0,0 +1,13 @@
+import type { BaseTypeHelperFn, Fallback, ProxyType } from "../../types";
+export interface ForProps<T extends Array<unknown>> extends Fallback {
+    each: T | null | undefined;
+    children: (item: T[number], index: number) => React.ReactNode;
+}
+type BaseForType<X = object> = {
+    <const T extends Array<unknown>>(props: X & ForProps<T>): React.ReactNode;
+};
+interface BaseForTypeFn extends BaseTypeHelperFn {
+    type: BaseForType<this["props"]>;
+}
+export type ForType = ProxyType<BaseForTypeFn, "for">;
+export {};

package/dist/components/For/types.js

@@ -0,0 +1,2 @@
+;
+export {};

package/dist/components/Mount/index.d.ts

@@ -0,0 +1,2 @@
+import type { MountType } from "./types";
+export declare const Mount: MountType;

package/dist/components/{Mount.js → Mount/index.js}

@@ -1,5 +1,5 @@
 import { createElement, forwardRef, useEffect, useLayoutEffect, useRef, useState, } from "react";
-import { createTagProxy } from "../core/createTagProxy";
+import { createProxy } from "../../core/createProxy";
 const isPromiseLike = (value) => (typeof value === "object" || typeof value === "function") &&
     value !== null &&
     typeof value.then === "function";
@@ -61,10 +61,8 @@ function BaseMount({ children, fallback = null, onError }) {
     }, [children, onError]);
     return status === "resolved" ? resolvedChildren : fallback;
 }
-const renderForTag = (tag) => 
-// forward ref so consumers can attach a ref to the underlying DOM element
-forwardRef(function Render({ children, fallback = null, onError, ...props }, ref) {
+const renderForTag = (tag) => forwardRef(function Render({ children, fallback = null, onError, ...props }, ref) {
     const content = BaseMount({ children, fallback, onError });
     return createElement(tag, { ...props, ref }, content);
 });
-export const Mount = createTagProxy(BaseMount, renderForTag, "mount");
+export const Mount = createProxy(BaseMount, renderForTag, "mount");

package/dist/components/Mount/types.d.ts

@@ -0,0 +1,13 @@
+import type { BaseTypeHelperFn, Fallback, ProxyType } from "../../types";
+export interface MountProps extends Fallback {
+    children: React.ReactNode | (() => React.ReactNode | Promise<React.ReactNode>);
+    onError?: (error: unknown) => void;
+}
+type BaseMountType<X = object> = {
+    (props: X & MountProps): React.ReactNode;
+};
+interface BaseMountTypeFn extends BaseTypeHelperFn {
+    type: BaseMountType<this["props"]>;
+}
+export type MountType = ProxyType<BaseMountTypeFn, "mount">;
+export {};

package/dist/components/{Observer.d.ts → Observer/index.d.ts}

@@ -1,4 +1,4 @@
-import type { ObserverProps } from "../types";
+import { ObserverProps } from "./types";
 export declare const Observer: import("react").ForwardRefExoticComponent<ObserverProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
     ref?: ((instance: HTMLDivElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLDivElement> | null | undefined;
 }, "ref"> & import("react").RefAttributes<HTMLDivElement>>;

package/dist/components/{Observer.js → Observer/index.js}

@@ -1,7 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { forwardRef, useCallback } from "react";
-import { useIntersectionObserver } from "../hooks/useIntersectionObserver";
-import { Show } from "./Show";
+import { useIntersectionObserver } from "../../hooks/useIntersectionObserver";
+import { Show } from "../Show";
 export const Observer = forwardRef(function Observer({ children, fallback = null, threshold = 0, rootMargin = "0px", triggerOnce: freezeOnceVisible = false, onIntersect: onChange, style, ...props }, forwardedRef) {
     const { ref: observerRef, isIntersecting } = useIntersectionObserver({
         threshold,

package/dist/components/Observer/types.d.ts

@@ -0,0 +1,8 @@
+import { Fallback } from "../../types";
+export interface ObserverProps extends Fallback {
+    children?: React.ReactNode | ((isIntersecting: boolean) => React.ReactNode);
+    threshold?: number | number[];
+    rootMargin?: string;
+    triggerOnce?: boolean;
+    onIntersect?: (isIntersecting: boolean, entry: IntersectionObserverEntry) => void;
+}

package/dist/components/{OptionalWrapper.d.ts → OptionalWrapper/index.d.ts}

@@ -1,2 +1,2 @@
-import { OptionalWrapperProps } from "../types";
+import { OptionalWrapperProps } from "./types";
 export declare function OptionalWrapper<T>({ when, children, wrapper, fallback }: OptionalWrapperProps<T>): React.ReactNode;

package/dist/components/{OptionalWrapper.js → OptionalWrapper/index.js}

@@ -1,5 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { Show } from "./Show";
+import { Show } from "../Show";
 export function OptionalWrapper({ when, children, wrapper, fallback }) {
     return _jsx(Show, { when: when, fallback: fallback ? fallback(children) : children, children: wrapper(children) });
 }

package/dist/components/OptionalWrapper/types.d.ts

@@ -0,0 +1,6 @@
+export interface OptionalWrapperProps<T = unknown> {
+    when: T;
+    children: React.ReactNode;
+    wrapper: (children: React.ReactNode) => React.ReactNode;
+    fallback?: (children: React.ReactNode) => React.ReactNode;
+}

package/dist/components/Repeat/index.d.ts

@@ -0,0 +1,2 @@
+import type { RepeatType } from "./types";
+export declare const Repeat: RepeatType;

package/dist/components/{Repeat.js → Repeat/index.js}

@@ -1,16 +1,14 @@
 import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
 import { createElement, forwardRef } from "react";
-import { createTagProxy } from "../core/createTagProxy";
+import { createProxy } from "../../core/createProxy";
 function BaseRepeat({ times, children, fallback = null }) {
     const content = times && times > 0 && Number.isInteger(times)
         ? Array.from({ length: times }, (_, i) => children(i))
         : fallback ?? null;
     return _jsx(_Fragment, { children: content });
 }
-const renderForTag = (tag) => 
-// forward ref so consumers can attach a ref to the underlying DOM element
-forwardRef(({ times, children, fallback = null, ...props }, ref) => {
+const renderForTag = (tag) => forwardRef(({ times, children, fallback = null, ...props }, ref) => {
     const content = BaseRepeat({ times, children, fallback });
     return createElement(tag, { ...props, ref }, content);
 });
-export const Repeat = createTagProxy(BaseRepeat, renderForTag, "repeat");
+export const Repeat = createProxy(BaseRepeat, renderForTag, "repeat");

package/dist/components/Repeat/types.d.ts

@@ -0,0 +1,13 @@
+import type { BaseTypeHelperFn, Fallback, ProxyType } from "../../types";
+export interface RepeatProps extends Fallback {
+    times: number;
+    children: (index: number) => React.ReactNode;
+}
+type BaseRepeatType<X = object> = {
+    (props: X & RepeatProps): React.ReactNode;
+};
+interface BaseRepeatTypeFn extends BaseTypeHelperFn {
+    type: BaseRepeatType<this["props"]>;
+}
+export type RepeatType = ProxyType<BaseRepeatTypeFn, "repeat">;
+export {};

package/dist/components/Show/index.d.ts

@@ -0,0 +1,2 @@
+import type { ShowType } from "./types";
+export declare const Show: ShowType;

package/dist/components/{Show.js → Show/index.js}

@@ -1,6 +1,6 @@
 import { createElement, forwardRef } from "react";
-import { createTagProxy } from "../core/createTagProxy";
-import { resolveWhen } from "../utils/resolveWhen";
+import { createProxy } from "../../core/createProxy";
+import { resolveWhen } from "../../utils/resolveWhen";
 const BaseShow = ({ when, children, fallback = null }) => {
     const shouldRender = resolveWhen(when);
     return shouldRender
@@ -9,10 +9,8 @@ const BaseShow = ({ when, children, fallback = null }) => {
             : children
         : fallback;
 };
-const renderForTag = (tag) => 
-// forward ref so consumers like Observer can pass a ref to the real DOM element
-forwardRef(function Render({ when, children, fallback = null, ...props }, ref) {
+const renderForTag = (tag) => forwardRef(function Render({ when, children, fallback = null, ...props }, ref) {
     const content = BaseShow({ when, children, fallback });
     return createElement(tag, { ...props, ref }, content);
 });
-export const Show = createTagProxy(BaseShow, renderForTag, "show");
+export const Show = createProxy(BaseShow, renderForTag, "show");

package/dist/components/Show/types.d.ts

@@ -0,0 +1,18 @@
+import type { BaseTypeHelperFn, Fallback, NonNullableElements, ProxyType } from "../../types";
+export interface ShowPropsArray<T extends unknown[]> extends Fallback {
+    when: T;
+    children: React.ReactNode | ((item: NonNullableElements<T>) => React.ReactNode);
+}
+export interface ShowProps<T = unknown> extends Fallback {
+    when: T;
+    children: React.ReactNode | ((item: NonNullable<T>) => React.ReactNode);
+}
+export type BaseShowType<X = object> = {
+    <const T extends Array<unknown>>(props: X & ShowPropsArray<T>): React.ReactNode;
+    <const T extends unknown>(props: X & ShowProps<T>): React.ReactNode;
+};
+interface BaseShowTypeFn extends BaseTypeHelperFn {
+    type: BaseShowType<this["props"]>;
+}
+export type ShowType = ProxyType<BaseShowTypeFn, "show">;
+export {};

package/dist/components/{Slacker.d.ts → Slacker/index.d.ts}

@@ -1,2 +1,2 @@
-import { SlackerProps } from "../types";
+import { SlackerProps } from "./types";
 export declare function Slacker<T = any>({ children, errorFallback, loadingFallback, loader, threshold, rootMargin, onError, maxRetries, retryDelay, }: SlackerProps<T>): import("react/jsx-runtime").JSX.Element;

package/dist/components/{Slacker.js → Slacker/index.js}

@@ -1,6 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useCallback, useState } from "react";
-import { Observer } from "./Observer";
+import { Observer } from "../Observer";
 export function Slacker({ children, errorFallback, loadingFallback, loader, threshold = 0.1, rootMargin = "50px", onError, maxRetries = 0, retryDelay = 1000, }) {
     const [loadedData, setLoadedData] = useState(null);
     const [isLoading, setIsLoading] = useState(false);

package/dist/components/Slacker/types.d.ts

@@ -0,0 +1,16 @@
+export type SlackerFallbackProps = {
+    isLoading: boolean;
+    error: Error | null;
+    retry: () => void;
+};
+export type SlackerProps<T = any> = {
+    children: (loaded: T) => React.ReactNode;
+    errorFallback?: React.ReactNode | ((props: SlackerFallbackProps) => React.ReactNode);
+    loadingFallback?: React.ReactNode;
+    threshold?: number | number[];
+    rootMargin?: string;
+    loader: () => Promise<T> | T;
+    onError?: (error: Error) => void;
+    maxRetries?: number;
+    retryDelay?: number;
+};

package/dist/components/{Slot.d.ts → Slot/Slot.d.ts}

@@ -1,4 +1 @@
 export declare const Slot: import("react").ForwardRefExoticComponent<import("react").HTMLAttributes<HTMLElement> & import("react").RefAttributes<HTMLElement>>;
-export declare const Slottable: ({ children }: {
-    children: React.ReactNode;
-}) => import("react/jsx-runtime").JSX.Element;

package/dist/components/Slot/Slot.js

@@ -0,0 +1,37 @@
+import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
+import { Children, cloneElement, forwardRef, isValidElement } from 'react';
+import { composeRefs } from './composeRefs';
+import { mergeProps } from './mergeProps';
+import { isSlottable } from './Slottable';
+export const Slot = forwardRef((props, ref) => {
+    const { children, ...slotProps } = props;
+    const childrenArray = Children.toArray(children);
+    const slottable = childrenArray.find(isSlottable);
+    if (slottable) {
+        // Slottable의 children을 가져와서 병합
+        const slottableChild = slottable.props.children;
+        if (!isValidElement(slottableChild)) {
+            return null;
+        }
+        const newElement = cloneElement(slottableChild, {
+            ...mergeProps(slotProps, slottableChild.props),
+            ref: ref ? composeRefs(ref, slottableChild.ref) : slottableChild.ref,
+            key: slottable.key
+        });
+        const newChildren = childrenArray.map((child) => {
+            if (child === slottable) {
+                return newElement;
+            }
+            return child;
+        });
+        return _jsx(_Fragment, { children: newChildren });
+    }
+    const [child] = childrenArray;
+    if (!isValidElement(child)) {
+        return null;
+    }
+    return cloneElement(child, {
+        ...mergeProps(slotProps, child.props),
+        ref: ref ? composeRefs(ref, child.ref) : child.ref
+    });
+});

package/dist/components/Slot/Slottable.d.ts

@@ -0,0 +1,4 @@
+export declare function isSlottable(child: React.ReactNode): child is React.ReactElement;
+export declare const Slottable: ({ children }: {
+    children: React.ReactNode;
+}) => import("react/jsx-runtime").JSX.Element;

package/dist/components/Slot/Slottable.js

@@ -0,0 +1,8 @@
+import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
+import { isValidElement } from "react";
+export function isSlottable(child) {
+    return isValidElement(child) && child.type === Slottable;
+}
+export const Slottable = ({ children }) => {
+    return _jsx(_Fragment, { children: children });
+};

package/dist/components/Slot/composeRefs.d.ts

@@ -0,0 +1,2 @@
+import { Ref } from "react";
+export declare function composeRefs<T>(...refs: Ref<T>[]): (node: T) => void;

package/dist/components/Slot/composeRefs.js

@@ -0,0 +1,12 @@
+export function composeRefs(...refs) {
+    return (node) => {
+        for (const ref of refs) {
+            if (typeof ref === 'function') {
+                ref(node);
+            }
+            else if (ref != null) {
+                ref.current = node;
+            }
+        }
+    };
+}

package/dist/components/Slot/index.d.ts

@@ -0,0 +1,2 @@
+export { Slot } from "./Slot";
+export { Slottable } from "./Slottable";

package/dist/components/Slot/index.js

@@ -0,0 +1,2 @@
+export { Slot } from "./Slot";
+export { Slottable } from "./Slottable";

package/dist/components/Slot/mergeProps.d.ts

@@ -0,0 +1,2 @@
+import { Props } from "./types";
+export declare function mergeProps(slotProps: Props, childProps: Props): Props;

package/dist/components/Slot/mergeProps.js

@@ -0,0 +1,23 @@
+export function mergeProps(slotProps, childProps) {
+    const merged = { ...childProps };
+    for (const propName in slotProps) {
+        const slotProp = slotProps[propName];
+        const childProp = merged[propName];
+        if (/^on[A-Z]/.test(propName) && typeof slotProp === 'function' && typeof childProp === 'function') {
+            merged[propName] = (...args) => {
+                childProp(...args);
+                slotProp(...args);
+            };
+        }
+        else if (propName === 'style' && typeof slotProp === 'object' && typeof childProp === 'object') {
+            merged[propName] = { ...childProp, ...slotProp };
+        }
+        else if (propName === 'className' && typeof slotProp === 'string' && typeof childProp === 'string') {
+            merged[propName] = [childProp, slotProp].filter(Boolean).join(' ');
+        }
+        else {
+            merged[propName] = slotProp;
+        }
+    }
+    return merged;
+}

package/dist/components/Slot/types.d.ts

@@ -0,0 +1 @@
+export type Props = Record<string, any>;

package/dist/components/Slot/types.js

@@ -0,0 +1 @@
+export {};

package/dist/components/Switch/Match.d.ts

@@ -0,0 +1,3 @@
+import { MatchProps } from "./types";
+export declare function Match<T>({ when, children }: MatchProps<T>): import("react").ReactNode;
+export declare const isMatchElement: (child: React.ReactNode) => child is React.ReactElement<MatchProps>;

package/dist/components/Switch/Match.js

@@ -0,0 +1,11 @@
+import { isValidElement } from "react";
+import { resolveWhen } from "../../utils/resolveWhen";
+export function Match({ when, children }) {
+    if (!resolveWhen(when)) {
+        return null;
+    }
+    return typeof children === "function"
+        ? children(when)
+        : children;
+}
+export const isMatchElement = (child) => isValidElement(child) && child.type === Match;

package/dist/components/Switch/Switch.d.ts

@@ -0,0 +1,2 @@
+import { SwitchType } from "./types";
+export declare const Switch: SwitchType;

package/dist/components/Switch/Switch.js

@@ -0,0 +1,24 @@
+import { createElement, forwardRef } from "react";
+import { createProxy } from "../../core/createProxy";
+import { resolveWhen } from "../../utils/resolveWhen";
+import { flattenChildren } from "./flattenChildren";
+import { isMatchElement } from "./Match";
+function BaseSwitch({ children, fallback = null }) {
+    const childArray = flattenChildren(children);
+    for (const child of childArray) {
+        if (!isMatchElement(child)) {
+            continue;
+        }
+        const { when } = child.props;
+        if (!resolveWhen(when)) {
+            continue;
+        }
+        return child;
+    }
+    return fallback;
+}
+const renderForTag = (tag) => forwardRef(function Render({ children, fallback = null, ...props }, ref) {
+    const content = BaseSwitch({ children, fallback });
+    return createElement(tag, { ...props, ref }, content);
+});
+export const Switch = createProxy(BaseSwitch, renderForTag, "switch");

package/dist/components/Switch/flattenChildren.d.ts

@@ -0,0 +1 @@
+export declare const flattenChildren: (nodes: React.ReactNode) => React.ReactNode[];

package/dist/components/Switch/flattenChildren.js

@@ -0,0 +1,7 @@
+import { Children, Fragment, isValidElement } from "react";
+export const flattenChildren = (nodes) => Children.toArray(nodes).flatMap((child) => {
+    if (isValidElement(child) && child.type === Fragment) {
+        return flattenChildren(child.props.children);
+    }
+    return [child];
+});

package/dist/components/Switch/index.d.ts

@@ -0,0 +1,2 @@
+export { Match } from "./Match";
+export { Switch } from "./Switch";

package/dist/components/Switch/index.js

@@ -0,0 +1,2 @@
+export { Match } from "./Match";
+export { Switch } from "./Switch";

package/dist/components/Switch/types.d.ts

@@ -0,0 +1,16 @@
+import type { BaseTypeHelperFn, Fallback, ProxyType } from "../../types";
+export interface MatchProps<T = unknown> {
+    when: T | null | undefined | false;
+    children: React.ReactNode | ((item: NonNullable<T>) => React.ReactNode);
+}
+export interface SwitchProps extends Fallback {
+    children: React.ReactNode;
+}
+type BaseSwitchType<X = object> = {
+    (props: X & SwitchProps): React.ReactNode;
+};
+interface BaseSwitchTypeFn extends BaseTypeHelperFn {
+    type: BaseSwitchType<this["props"]>;
+}
+export type SwitchType = ProxyType<BaseSwitchTypeFn, "switch">;
+export {};

package/dist/components/Switch/types.js

@@ -0,0 +1 @@
+export {};

package/dist/constants/htmlTags.d.ts

@@ -1,2 +1,88 @@
-export declare const htmlTags: readonly ["a", "abbr", "address", "article", "aside", "b", "bdi", "bdo", "blockquote", "button", "canvas", "cite", "code", "data", "datalist", "dd", "del", "details", "dfn", "dialog", "div", "dl", "dt", "em", "fieldset", "figcaption", "figure", "footer", "form", "h1", "h2", "h3", "h4", "h5", "h6", "header", "hr", "i", "img", "input", "ins", "kbd", "label", "legend", "li", "main", "map", "mark", "menu", "meter", "nav", "ol", "option", "output", "p", "picture", "pre", "progress", "q", "rp", "rt", "ruby", "s", "samp", "section", "select", "small", "span", "strong", "sub", "summary", "sup", "table", "tbody", "td", "textarea", "tfoot", "th", "thead", "time", "tr", "u", "ul", "var", "video"];
-export type HtmlTag = (typeof htmlTags)[number];
+export declare const htmlTags: {
+    readonly a: "a";
+    readonly abbr: "abbr";
+    readonly address: "address";
+    readonly article: "article";
+    readonly aside: "aside";
+    readonly b: "b";
+    readonly bdi: "bdi";
+    readonly bdo: "bdo";
+    readonly blockquote: "blockquote";
+    readonly button: "button";
+    readonly canvas: "canvas";
+    readonly cite: "cite";
+    readonly code: "code";
+    readonly data: "data";
+    readonly datalist: "datalist";
+    readonly dd: "dd";
+    readonly del: "del";
+    readonly details: "details";
+    readonly dfn: "dfn";
+    readonly dialog: "dialog";
+    readonly div: "div";
+    readonly dl: "dl";
+    readonly dt: "dt";
+    readonly em: "em";
+    readonly fieldset: "fieldset";
+    readonly figcaption: "figcaption";
+    readonly figure: "figure";
+    readonly footer: "footer";
+    readonly form: "form";
+    readonly h1: "h1";
+    readonly h2: "h2";
+    readonly h3: "h3";
+    readonly h4: "h4";
+    readonly h5: "h5";
+    readonly h6: "h6";
+    readonly header: "header";
+    readonly hr: "hr";
+    readonly i: "i";
+    readonly img: "img";
+    readonly input: "input";
+    readonly ins: "ins";
+    readonly kbd: "kbd";
+    readonly label: "label";
+    readonly legend: "legend";
+    readonly li: "li";
+    readonly main: "main";
+    readonly map: "map";
+    readonly mark: "mark";
+    readonly menu: "menu";
+    readonly meter: "meter";
+    readonly nav: "nav";
+    readonly ol: "ol";
+    readonly option: "option";
+    readonly output: "output";
+    readonly p: "p";
+    readonly picture: "picture";
+    readonly pre: "pre";
+    readonly progress: "progress";
+    readonly q: "q";
+    readonly rp: "rp";
+    readonly rt: "rt";
+    readonly ruby: "ruby";
+    readonly s: "s";
+    readonly samp: "samp";
+    readonly section: "section";
+    readonly select: "select";
+    readonly small: "small";
+    readonly span: "span";
+    readonly strong: "strong";
+    readonly sub: "sub";
+    readonly summary: "summary";
+    readonly sup: "sup";
+    readonly table: "table";
+    readonly tbody: "tbody";
+    readonly td: "td";
+    readonly textarea: "textarea";
+    readonly tfoot: "tfoot";
+    readonly th: "th";
+    readonly thead: "thead";
+    readonly time: "time";
+    readonly tr: "tr";
+    readonly u: "u";
+    readonly ul: "ul";
+    readonly var: "var";
+    readonly video: "video";
+};
+export type HtmlTag = (typeof htmlTags);