@vitus-labs/elements 0.37.0 → 0.40.0

package/lib/index.d.ts

@@ -50,7 +50,7 @@ declare type VLStatic = {
     VITUS_LABS__COMPONENT?: `@vitus-labs/${string}`;
 };
 
-declare type Props$7 = Partial<{
+declare type Props$8 = Partial<{
     tag: HTMLTags;
     innerRef: InnerRef;
     children: Content;
@@ -82,20 +82,20 @@ declare type Props$7 = Partial<{
 declare type VLElement<P extends Record<string, unknown> = {}> = {
     <T extends HTMLTags>(props: {
         tag?: T;
-    } & Props$7 & P & {
+    } & Props$8 & P & {
         ref?: ForwardedRef<any>;
     }): ReactElement | null;
 } & VLStatic;
 
-declare const component$6: VLElement;
+declare const component$7: VLElement;
 
-declare type Props$6 = Partial<{
+declare type Props$7 = Partial<{
     equalBeforeAfter: boolean;
     vertical?: boolean;
     afterContent?: React__default.ReactNode;
     beforeContent?: React__default.ReactNode;
 }>;
-declare const withEqualBeforeAfter: SimpleHoc<Props$6>;
+declare const withEqualBeforeAfter: SimpleHoc<Props$7>;
 
 declare type MaybeNull = undefined | null;
 declare type TObj = Record<string, unknown>;
@@ -116,8 +116,8 @@ declare type DataArrayObject = Partial<{
     component: ElementType;
 }> & Record<string, unknown>;
 declare type PropsCallback = TObj | ((itemProps: Record<string, never> | Record<string, SimpleValue> | DataArrayObject, extendedProps: ExtendedProps) => TObj);
-declare type Props$5 = Partial<{
-    children: ReactNode[];
+declare type Props$6 = Partial<{
+    children: ReactNode;
     data: Array<SimpleValue | DataArrayObject | MaybeNull>;
     component: ElementType;
     valueName: string;
@@ -127,24 +127,24 @@ declare type Props$5 = Partial<{
     itemKey?: keyof DataArrayObject | ((item: SimpleValue | Omit<DataArrayObject, 'component'>, index: number) => SimpleValue);
 }>;
 
-declare type Props$4 = MergeTypes<[
-    Props$5,
+declare type Props$5 = MergeTypes<[
+    Props$6,
     {
         rootElement?: boolean;
         label: never;
         content: never;
     }
 ]>;
-declare const component$5: VLElement<Props$4>;
+declare const component$6: VLElement<Props$5>;
 
 declare type Key = string | number;
-declare type Props$3 = {
+declare type Props$4 = {
     type?: 'single' | 'multi';
     activeItemRequired?: boolean;
     activeItems?: Key | Array<string | number>;
     itemProps?: Record<string, unknown> | ((props: Record<string, unknown>) => Record<string, unknown>);
 };
-declare const component$4: SimpleHoc<Props$3>;
+declare const component$5: SimpleHoc<Props$4>;
 
 declare type Align$1 = 'bottom' | 'top' | 'left' | 'bottom' | 'right';
 declare type AlignX$1 = 'left' | 'center' | 'right';
@@ -197,38 +197,45 @@ declare type ContentRenderer = (props: Partial<{
     alignX: AlignX;
     alignY: AlignY;
 }>) => Content;
-declare type Props$2 = {
+declare type Props$3 = {
     children: Content | TriggerRenderer;
     trigger: Content | ContentRenderer;
     DOMLocation?: HTMLElement;
     triggerRefName?: string;
     contentRefName?: string;
 } & UseOverlayProps;
-declare const component$3: VLComponent<Props$2>;
+declare const component$4: VLComponent<Props$3>;
 
 declare type Context = {
     blocked: boolean;
     setBlocked: () => void;
     setUnblocked: () => void;
 };
-declare const component$2: FC<Context>;
+declare const component$3: FC<Context>;
 
-declare type Props$1 = {
+declare type Props$2 = {
     position?: HTMLElement;
     children: ReactNode;
     tag?: string;
 };
-declare const component$1: VLComponent<Props$1>;
+declare const component$2: VLComponent<Props$2>;
 
-declare type Props = Partial<{
+declare type Props$1 = Partial<{
     paragraph: boolean;
     label: ReactNode;
     children: ReactNode;
     tag: HTMLTagsText;
     extendCss: ExtendCss;
 }>;
-declare const component: VLForwardedComponent<Props> & {
+declare const component$1: VLForwardedComponent<Props$1> & {
     isText?: true;
 };
 
-export { component$6 as Element, Props$7 as ElementProps, component$5 as List, Props$4 as ListProps, component$3 as Overlay, Props$2 as OverlayProps, component$2 as OverlayProvider, component$1 as Portal, Props$1 as PortalProps, component as Text, Props as TextProps, UseOverlayProps, VLElement, _default as useOverlay, component$4 as withActiveState, withEqualBeforeAfter as withEqualSizeBeforeAfter };
+declare type Props = {
+    children: ReactNode;
+    className?: string | string[];
+    style?: Record<string, unknown>;
+};
+declare const component: VLComponent<Props>;
+
+export { component$7 as Element, Props$8 as ElementProps, component$6 as List, Props$5 as ListProps, component$4 as Overlay, Props$3 as OverlayProps, component$3 as OverlayProvider, component$2 as Portal, Props$2 as PortalProps, component$1 as Text, Props$1 as TextProps, UseOverlayProps, component as Util, Props as UtilProps, _default as useOverlay, component$5 as withActiveState, withEqualBeforeAfter as withEqualSizeBeforeAfter };

package/lib/types/Util/component.d.ts

@@ -1,7 +1,7 @@
-import { renderContent } from '@vitus-labs/core';
+import { ReactNode } from 'react';
 import type { VLComponent } from "../types";
 export declare type Props = {
-    children: Parameters<typeof renderContent>[0];
+    children: ReactNode;
     className?: string | string[];
     style?: Record<string, unknown>;
 };

package/lib/types/helpers/Iterator/types.d.ts

@@ -20,7 +20,7 @@ export declare type DataArrayObject = Partial<{
 }> & Record<string, unknown>;
 export declare type PropsCallback = TObj | ((itemProps: Record<string, never> | Record<string, SimpleValue> | DataArrayObject, extendedProps: ExtendedProps) => TObj);
 export declare type Props = Partial<{
-    children: ReactNode[];
+    children: ReactNode;
     data: Array<SimpleValue | DataArrayObject | MaybeNull>;
     component: ElementType;
     valueName: string;

package/lib/types/index.d.ts

@@ -1,8 +1,9 @@
 import { Provider } from '@vitus-labs/unistyle';
-import Element, { Props as ElementProps, VLElement, withEqualSizeBeforeAfter } from "./Element";
+import Element, { Props as ElementProps, withEqualSizeBeforeAfter } from "./Element";
 import List, { Props as ListProps, withActiveState } from "./List";
 import Overlay, { Props as OverlayProps, useOverlay, OverlayProvider, UseOverlayProps } from "./Overlay";
 import Portal, { Props as PortalProps } from "./Portal";
 import Text, { Props as TextProps } from "./Text";
-export type { VLElement, ElementProps, ListProps, OverlayProps, UseOverlayProps, PortalProps, TextProps, };
-export { Element, withEqualSizeBeforeAfter, withActiveState, List, Overlay, useOverlay, OverlayProvider, Portal, Text, Provider, };
+import Util, { Props as UtilProps } from "./Util";
+export type { ElementProps, ListProps, OverlayProps, UseOverlayProps, PortalProps, TextProps, UtilProps, };
+export { Element, withEqualSizeBeforeAfter, withActiveState, List, Overlay, useOverlay, OverlayProvider, Portal, Text, Util, Provider, };

package/lib/vitus-labs-elements.browser.js

@@ -2,6 +2,7 @@ import { makeItResponsive, alignContent, extendCss, value } from '@vitus-labs/un
 export { Provider } from '@vitus-labs/unistyle';
 import React, { forwardRef, memo, useMemo, createRef, useCallback, Children, useState, useEffect, createContext, useContext, useRef } from 'react';
 import { config, renderContent, get, isEmpty, pick, omit, context as context$1, throttle } from '@vitus-labs/core';
+import { isFragment } from 'react-is';
 import { createPortal } from 'react-dom';
 
 // eslint-disable-next-line import/prefer-default-export
@@ -72,7 +73,7 @@ var Styled$2 = config.styled(config.component) `
 })};
 `;
 
-const component$a = forwardRef(({ children, tag, block, extendCss, direction, alignX, alignY, equalCols, isInline, ...props }, ref) => {
+const component$b = forwardRef(({ children, tag, block, extendCss, direction, alignX, alignY, equalCols, isInline, ...props }, ref) => {
     const debugProps = process.env.NODE_ENV !== 'production'
         ? {
             'data-vl-element': 'Element',
@@ -180,7 +181,7 @@ var Styled$1 = config.styled(config.component) `
 })};
 `;
 
-const component$8 = ({ contentType, tag, parentDirection, direction, alignX, alignY, equalCols, gap, extendCss, ...props }) => {
+const component$9 = ({ contentType, tag, parentDirection, direction, alignX, alignY, equalCols, gap, extendCss, ...props }) => {
     const debugProps = process.env.NODE_ENV !== 'production'
         ? {
             'data-vl-element': contentType,
@@ -196,7 +197,7 @@ const component$8 = ({ contentType, tag, parentDirection, direction, alignX, ali
             extraStyles: extendCss,
         }, ...debugProps, ...props }));
 };
-var component$9 = memo(component$8);
+var component$a = memo(component$9);
 
 const INLINE_ELEMENTS = {
     span: true,
@@ -256,7 +257,7 @@ const defaultDirection = 'inline';
 const defaultContentDirection = 'rows';
 const defaultAlignX = 'left';
 const defaultAlignY = 'center';
-const component$7 = forwardRef(({ innerRef, tag, label, content, children, beforeContent, afterContent, block, equalCols, gap, direction, alignX = defaultAlignX, alignY = defaultAlignY, css, contentCss, beforeContentCss, afterContentCss, contentDirection = defaultContentDirection, contentAlignX = defaultAlignX, contentAlignY = defaultAlignY, beforeContentDirection = defaultDirection, beforeContentAlignX = defaultAlignX, beforeContentAlignY = defaultAlignY, afterContentDirection = defaultDirection, afterContentAlignX = defaultAlignX, afterContentAlignY = defaultAlignY, ...props }, ref) => {
+const component$8 = forwardRef(({ innerRef, tag, label, content, children, beforeContent, afterContent, block, equalCols, gap, direction, alignX = defaultAlignX, alignY = defaultAlignY, css, contentCss, beforeContentCss, afterContentCss, contentDirection = defaultContentDirection, contentAlignX = defaultAlignX, contentAlignY = defaultAlignY, beforeContentDirection = defaultDirection, beforeContentAlignX = defaultAlignX, beforeContentAlignY = defaultAlignY, afterContentDirection = defaultDirection, afterContentAlignX = defaultAlignX, afterContentAlignY = defaultAlignY, ...props }, ref) => {
     // --------------------------------------------------------
     // check if should render only single element
     // --------------------------------------------------------
@@ -317,18 +318,18 @@ const component$7 = forwardRef(({ innerRef, tag, label, content, children, befor
     // return simple/empty element like input or image etc.
     // --------------------------------------------------------
     if (shouldBeEmpty) {
-        return React.createElement(component$a, { ...props, ...WRAPPER_PROPS });
+        return React.createElement(component$b, { ...props, ...WRAPPER_PROPS });
     }
     const contentRenderOutput = renderContent(CHILDREN);
-    return (React.createElement(component$a, { ...props, ...WRAPPER_PROPS, isInline: isInline },
-        beforeContent && (React.createElement(component$9, { tag: SUB_TAG, contentType: "before", parentDirection: wrapperDirection, extendCss: beforeContentCss, direction: beforeContentDirection, alignX: beforeContentAlignX, alignY: beforeContentAlignY, equalCols: equalCols, gap: gap }, renderContent(beforeContent))),
-        isSimpleElement ? (contentRenderOutput) : (React.createElement(component$9, { tag: SUB_TAG, contentType: "content", parentDirection: wrapperDirection, extendCss: contentCss, direction: contentDirection, alignX: contentAlignX, alignY: contentAlignY, equalCols: equalCols }, contentRenderOutput)),
-        afterContent && (React.createElement(component$9, { tag: SUB_TAG, contentType: "after", parentDirection: wrapperDirection, extendCss: afterContentCss, direction: afterContentDirection, alignX: afterContentAlignX, alignY: afterContentAlignY, equalCols: equalCols, gap: gap }, renderContent(afterContent)))));
+    return (React.createElement(component$b, { ...props, ...WRAPPER_PROPS, isInline: isInline },
+        beforeContent && (React.createElement(component$a, { tag: SUB_TAG, contentType: "before", parentDirection: wrapperDirection, extendCss: beforeContentCss, direction: beforeContentDirection, alignX: beforeContentAlignX, alignY: beforeContentAlignY, equalCols: equalCols, gap: gap }, renderContent(beforeContent))),
+        isSimpleElement ? (contentRenderOutput) : (React.createElement(component$a, { tag: SUB_TAG, contentType: "content", parentDirection: wrapperDirection, extendCss: contentCss, direction: contentDirection, alignX: contentAlignX, alignY: contentAlignY, equalCols: equalCols }, contentRenderOutput)),
+        afterContent && (React.createElement(component$a, { tag: SUB_TAG, contentType: "after", parentDirection: wrapperDirection, extendCss: afterContentCss, direction: afterContentDirection, alignX: afterContentAlignX, alignY: afterContentAlignY, equalCols: equalCols, gap: gap }, renderContent(afterContent)))));
 });
-const name$4 = `${PKG_NAME}/Element`;
-component$7.displayName = name$4;
-component$7.pkgName = PKG_NAME;
-component$7.VITUS_LABS__COMPONENT = name$4;
+const name$5 = `${PKG_NAME}/Element`;
+component$8.displayName = name$5;
+component$8.pkgName = PKG_NAME;
+component$8.VITUS_LABS__COMPONENT = name$5;
 
 /* eslint-disable no-param-reassign */
 const isNumber = (a, b) => Number.isInteger(a) && Number.isInteger(b);
@@ -393,7 +394,7 @@ const attachItemProps = ({ i, length, }) => {
         position,
     };
 };
-const component$6 = (props) => {
+const component$7 = (props) => {
     const { itemKey, valueName, children, component, data, wrapComponent: Wrapper, wrapProps, itemProps, } = props;
     const renderedElement = renderContent;
     const injectItemProps = useMemo(() => (typeof itemProps === 'function' ? itemProps : () => itemProps), [itemProps]);
@@ -403,34 +404,46 @@ const component$6 = (props) => {
             return itemKey(item, index);
         return index;
     }, []);
+    const renderChild = (child, total = 1, i = 0) => {
+        const extendedProps = attachItemProps({
+            i,
+            length: total,
+        });
+        const finalItemProps = itemProps ? injectItemProps({}, extendedProps) : {};
+        const finalWrapProps = wrapProps
+            ? injectWrapItemProps({}, extendedProps)
+            : {};
+        // if no props extension is required, just return children
+        if (!itemProps && !Wrapper)
+            return child;
+        if (Wrapper) {
+            return (React.createElement(Wrapper, { key: i, ...finalWrapProps }, renderedElement(child, finalItemProps)));
+        }
+        return renderContent(child, {
+            key: i,
+            ...finalItemProps,
+        });
+    };
     // --------------------------------------------------------
     // render children
     // --------------------------------------------------------
     const renderChildren = () => {
         if (!children)
             return null;
-        const { length } = children;
-        // if no props extension is required, just return children
-        if (!itemProps && !Wrapper)
-            return children;
-        return Children.map(children, (item, i) => {
-            const key = i;
-            const extendedProps = attachItemProps({
-                i,
-                length,
-            });
-            const finalItemProps = itemProps ? injectItemProps({}, extendedProps) : {};
-            const finalWrapProps = wrapProps
-                ? injectWrapItemProps({}, extendedProps)
-                : {};
-            if (Wrapper) {
-                return (React.createElement(Wrapper, { key: key, ...finalWrapProps }, renderedElement(item, finalItemProps)));
-            }
-            return renderContent(item, {
-                key: i,
-                ...finalItemProps,
+        // if children is Array
+        if (Array.isArray(children)) {
+            return Children.map(children, (item, i) => renderChild(item, children.length, i));
+        }
+        // if children is Fragment
+        if (isFragment(children)) {
+            const fragmentChildren = children.props.children;
+            return fragmentChildren.map((item, i) => {
+                console.log(item);
+                return renderChild(item, fragmentChildren.length, i);
             });
-        });
+        }
+        // if single child
+        return renderChild(children);
     };
     // --------------------------------------------------------
     // render array of strings or numbers
@@ -531,19 +544,19 @@ const component$6 = (props) => {
     };
     return renderItems();
 };
-component$6.isIterator = true;
-component$6.RESERVED_PROPS = RESERVED_PROPS;
+component$7.isIterator = true;
+component$7.RESERVED_PROPS = RESERVED_PROPS;
 
-const component$5 = forwardRef(({ rootElement = false, ...props }, ref) => {
-    const renderedList = React.createElement(component$6, { ...pick(props, component$6.RESERVED_PROPS) });
+const component$6 = forwardRef(({ rootElement = false, ...props }, ref) => {
+    const renderedList = React.createElement(component$7, { ...pick(props, component$7.RESERVED_PROPS) });
     if (!rootElement)
         return renderedList;
-    return (React.createElement(component$7, { ref: ref, ...omit(props, component$6.RESERVED_PROPS) }, renderedList));
+    return (React.createElement(component$8, { ref: ref, ...omit(props, component$7.RESERVED_PROPS) }, renderedList));
 });
-const name$3 = `${PKG_NAME}/List`;
-component$5.displayName = name$3;
-component$5.pkgName = PKG_NAME;
-component$5.VITUS_LABS__COMPONENT = name$3;
+const name$4 = `${PKG_NAME}/List`;
+component$6.displayName = name$4;
+component$6.pkgName = PKG_NAME;
+component$6.VITUS_LABS__COMPONENT = name$4;
 
 const RESERVED_KEYS = [
     'type',
@@ -551,7 +564,7 @@ const RESERVED_KEYS = [
     'itemProps',
     'activeItemRequired',
 ];
-const component$4 = (WrappedComponent) => {
+const component$5 = (WrappedComponent) => {
     const displayName = WrappedComponent.displayName || WrappedComponent.name || 'Component';
     const Enhanced = (props) => {
         const { type = 'single', activeItemRequired, activeItems, itemProps = {}, ...rest } = props;
@@ -674,7 +687,7 @@ const component$4 = (WrappedComponent) => {
     return Enhanced;
 };
 
-const component$3 = ({ position = document.body , tag = 'div', children, }) => {
+const component$4 = ({ position = document.body , tag = 'div', children, }) => {
     const [element] = useState(document.createElement(tag) );
     if (!position || !element)
         return null;
@@ -686,15 +699,15 @@ const component$3 = ({ position = document.body , tag = 'div', children, }) => {
     }, []);
     return createPortal(children, element);
 };
-const name$2 = `${PKG_NAME}/Portal`;
-component$3.displayName = name$2;
-component$3.pkgName = PKG_NAME;
-component$3.VITUS_LABS__COMPONENT = name$2;
+const name$3 = `${PKG_NAME}/Portal`;
+component$4.displayName = name$3;
+component$4.pkgName = PKG_NAME;
+component$4.VITUS_LABS__COMPONENT = name$3;
 
 const context = createContext({});
 const { Provider } = context;
 const useOverlayContext = () => useContext(context);
-const component$2 = ({ children, blocked, setBlocked, setUnblocked, }) => (React.createElement(Provider, { value: { blocked, setBlocked, setUnblocked } }, children));
+const component$3 = ({ children, blocked, setBlocked, setUnblocked, }) => (React.createElement(Provider, { value: { blocked, setBlocked, setUnblocked } }, children));
 
 /* eslint-disable no-console */
 var useOverlay = ({ isOpen = false, openOn = 'click', // click | hover
@@ -1024,7 +1037,7 @@ offsetX = 0, offsetY = 0, throttleDelay = 200, customScrollListener, closeOnEsc
     };
 };
 
-const component$1 = ({ children, trigger, DOMLocation, triggerRefName = 'ref', contentRefName = 'ref', ...props }) => {
+const component$2 = ({ children, trigger, DOMLocation, triggerRefName = 'ref', contentRefName = 'ref', ...props }) => {
     const { active, triggerRef, contentRef, showContent, hideContent, align, alignX, alignY, ...ctx } = useOverlay(props);
     const { openOn, closeOn } = props;
     const passHandlers = useMemo(() => openOn === 'manual' ||
@@ -1036,8 +1049,8 @@ const component$1 = ({ children, trigger, DOMLocation, triggerRefName = 'ref', c
             active,
             ...(passHandlers ? { showContent, hideContent } : {}),
         }),
-        active && (React.createElement(component$3, { position: DOMLocation },
-            React.createElement(component$2, { ...ctx }, renderContent(children, {
+        active && (React.createElement(component$4, { position: DOMLocation },
+            React.createElement(component$3, { ...ctx }, renderContent(children, {
                 [contentRefName]: contentRef,
                 active,
                 align,
@@ -1046,10 +1059,10 @@ const component$1 = ({ children, trigger, DOMLocation, triggerRefName = 'ref', c
                 ...(passHandlers ? { showContent, hideContent } : {}),
             }))))));
 };
-const name$1 = `${PKG_NAME}/Overlay`;
-component$1.displayName = name$1;
-component$1.pkgName = PKG_NAME;
-component$1.VITUS_LABS__COMPONENT = name$1;
+const name$2 = `${PKG_NAME}/Overlay`;
+component$2.displayName = name$2;
+component$2.pkgName = PKG_NAME;
+component$2.VITUS_LABS__COMPONENT = name$2;
 
 const styles = ({ css, theme: t }) => css `
   ${t.extraStyles && extendCss(t.extraStyles)};
@@ -1067,17 +1080,23 @@ var Styled = config.styled(config.textComponent) `
 })};
 `;
 
-const component = forwardRef(({ paragraph, label, children, tag, extendCss, ...props }, ref) => {
+const component$1 = forwardRef(({ paragraph, label, children, tag, extendCss, ...props }, ref) => {
     const renderContent = (as = undefined) => (React.createElement(Styled, { ref: ref, as: as, "$text": { extraStyles: extendCss }, ...props }, children || label));
     // eslint-disable-next-line no-nested-ternary
     const finalTag = (paragraph ? 'p' : tag) ;
     return renderContent(finalTag);
 });
-const name = `${PKG_NAME}/Text`;
+const name$1 = `${PKG_NAME}/Text`;
+component$1.displayName = name$1;
+component$1.pkgName = PKG_NAME;
+component$1.VITUS_LABS__COMPONENT = name$1;
+component$1.isText = true;
+
+const component = ({ children, className = '', style = { color: 'blue' }, }) => renderContent(children, { className, style });
+const name = `${PKG_NAME}/Util`;
 component.displayName = name;
 component.pkgName = PKG_NAME;
-component.VITUS_LABS__COMPONENT = name;
-component.isText = true;
+component.VITUS_LABS__COMPONENT = name;
 
-export { component$7 as Element, component$5 as List, component$1 as Overlay, component$2 as OverlayProvider, component$3 as Portal, component as Text, useOverlay, component$4 as withActiveState, withEqualBeforeAfter as withEqualSizeBeforeAfter };
+export { component$8 as Element, component$6 as List, component$2 as Overlay, component$3 as OverlayProvider, component$4 as Portal, component$1 as Text, component as Util, useOverlay, component$5 as withActiveState, withEqualBeforeAfter as withEqualSizeBeforeAfter };
 //# sourceMappingURL=vitus-labs-elements.browser.js.map