@vitus-labs/elements 0.15.3 → 0.17.0

package/lib/vitus-labs-elements.js

@@ -84,7 +84,7 @@ var Styled$2 = core.config.styled(core.config.component) `
 `;
 
 /* eslint-disable @typescript-eslint/no-explicit-any */
-const component$4 = React.forwardRef(({ children, tag, block, extendCss, direction, alignX, alignY, equalCols, isInline, ...props }, ref) => {
+const component$6 = React.forwardRef(({ children, tag, block, extendCss, direction, alignX, alignY, equalCols, isInline, ...props }, ref) => {
     const debugProps = process.env.NODE_ENV !== 'production'
         ? {
             'data-element': 'Element',
@@ -99,7 +99,7 @@ const component$4 = React.forwardRef(({ children, tag, block, extendCss, directi
     const needsFix = !props.dangerouslySetInnerHTML && tag && isWebFixNeeded(tag)
         ;
     if (!needsFix || false) {
-        return (React__default['default'].createElement(Styled$2, { ...COMMON_PROPS, "$element": {
+        return (React__default["default"].createElement(Styled$2, { ...COMMON_PROPS, "$element": {
                 block,
                 direction,
                 alignX,
@@ -108,11 +108,11 @@ const component$4 = React.forwardRef(({ children, tag, block, extendCss, directi
                 extraStyles: extendCss,
             } }, children));
     }
-    return (React__default['default'].createElement(Styled$2, { ...COMMON_PROPS, "$needsFix": true, "$element": {
+    return (React__default["default"].createElement(Styled$2, { ...COMMON_PROPS, "$needsFix": true, "$element": {
             block,
             extraStyles: extendCss,
         } },
-        React__default['default'].createElement(Styled$2, { as: isInline ? 'span' : 'div', "$isInner": true, "$element": {
+        React__default["default"].createElement(Styled$2, { as: isInline ? 'span' : 'div', "$isInner": true, "$element": {
                 direction,
                 alignX,
                 alignY,
@@ -190,14 +190,13 @@ var Styled$1 = core.config.styled(core.config.component) `
 })};
 `;
 
-/* eslint-disable @typescript-eslint/no-explicit-any */
-const component$2 = ({ contentType, tag, parentDirection, direction, alignX, alignY, equalCols, gap, extendCss, ...props }) => {
+const component$4 = ({ contentType, tag, parentDirection, direction, alignX, alignY, equalCols, gap, extendCss, ...props }) => {
     const debugProps = process.env.NODE_ENV !== 'production'
         ? {
             'data-vl-element': contentType,
         }
         : {};
-    return (React__default['default'].createElement(Styled$1, { as: tag, "$contentType": contentType, "$element": {
+    return (React__default["default"].createElement(Styled$1, { as: tag, "$contentType": contentType, "$element": {
             parentDirection,
             direction,
             alignX,
@@ -207,7 +206,7 @@ const component$2 = ({ contentType, tag, parentDirection, direction, alignX, ali
             extraStyles: extendCss,
         }, ...debugProps, ...props }));
 };
-var component$3 = React.memo(component$2);
+var component$5 = React.memo(component$4);
 
 const INLINE_ELEMENTS = {
     span: true,
@@ -281,13 +280,13 @@ const transformVerticalProp = (vertical) => {
     }
     return undefined;
 };
-const isInlineElement = (tag) => INLINE_ELEMENTS[tag];
-const getShouldBeEmpty = (tag) => EMPTY_ELEMENTS[tag];
+const isInlineElement = (tag) => tag ? INLINE_ELEMENTS[tag] : false;
+const getShouldBeEmpty = (tag) => tag ? EMPTY_ELEMENTS[tag] : false;
 
 const defaultDirection = 'inline';
 const defaultAlignX = 'left';
 const defaultAlignY = 'center';
-const component$1 = React.forwardRef(({ innerRef, tag, label, content, children, beforeContent, afterContent, block, equalCols, gap, vertical, direction, alignX = defaultAlignX, alignY = defaultAlignY, css, contentCss, beforeContentCss, afterContentCss, contentDirection = defaultDirection, contentAlignX = defaultAlignX, contentAlignY = defaultAlignY, beforeContentDirection = defaultDirection, beforeContentAlignX = defaultAlignX, beforeContentAlignY = defaultAlignY, afterContentDirection = defaultDirection, afterContentAlignX = defaultAlignX, afterContentAlignY = defaultAlignY, ...props }, ref) => {
+const component$3 = React.forwardRef(({ innerRef, tag, label, content, children, beforeContent, afterContent, block, equalCols, gap, vertical, direction, alignX = defaultAlignX, alignY = defaultAlignY, css, contentCss, beforeContentCss, afterContentCss, contentDirection = defaultDirection, 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
     // --------------------------------------------------------
@@ -310,7 +309,7 @@ const component$1 = React.forwardRef(({ innerRef, tag, label, content, children,
     // return simple/empty element like input
     // --------------------------------------------------------
     if (shouldBeEmpty)
-        return React__default['default'].createElement(component$4, { ...WRAPPER_PROPS, ...props });
+        return React__default["default"].createElement(component$6, { ...WRAPPER_PROPS, ...props });
     // --------------------------------------------------------
     // if not single element, calculate values
     // --------------------------------------------------------
@@ -347,19 +346,15 @@ const component$1 = React.forwardRef(({ innerRef, tag, label, content, children,
     const { wrapperDirection, wrapperAlignX, wrapperAlignY } = calculateDirection();
     const beforeContentRender = React.useMemo(() => core.renderContent(beforeContent), [beforeContent]);
     const afterContentRender = React.useMemo(() => core.renderContent(afterContent), [afterContent]);
-    return (React__default['default'].createElement(component$4, { ...props, ...WRAPPER_PROPS, isInline: isInline, direction: wrapperDirection, alignX: wrapperAlignX, alignY: wrapperAlignY },
-        beforeContent && (React__default['default'].createElement(component$3, { tag: SUB_TAG, contentType: "before", parentDirection: wrapperDirection, extendCss: beforeContentCss, direction: beforeContentDirection, alignX: beforeContentAlignX, alignY: beforeContentAlignY, equalCols: equalCols, gap: gap }, beforeContentRender)),
-        isSimple ? (core.renderContent(CHILDREN)) : (React__default['default'].createElement(component$3, { tag: SUB_TAG, contentType: "content", parentDirection: wrapperDirection, extendCss: contentCss, direction: contentDirection, alignX: contentAlignX, alignY: contentAlignY, equalCols: equalCols }, core.renderContent(CHILDREN))),
-        afterContent && (React__default['default'].createElement(component$3, { tag: SUB_TAG, contentType: "after", parentDirection: wrapperDirection, extendCss: afterContentCss, direction: afterContentDirection, alignX: afterContentAlignX, alignY: afterContentAlignY, equalCols: equalCols, gap: gap }, core.renderContent(afterContentRender)))));
+    return (React__default["default"].createElement(component$6, { ...props, ...WRAPPER_PROPS, isInline: isInline, direction: wrapperDirection, alignX: wrapperAlignX, alignY: wrapperAlignY },
+        beforeContent && (React__default["default"].createElement(component$5, { tag: SUB_TAG, contentType: "before", parentDirection: wrapperDirection, extendCss: beforeContentCss, direction: beforeContentDirection, alignX: beforeContentAlignX, alignY: beforeContentAlignY, equalCols: equalCols, gap: gap }, beforeContentRender)),
+        isSimple ? (core.renderContent(CHILDREN)) : (React__default["default"].createElement(component$5, { tag: SUB_TAG, contentType: "content", parentDirection: wrapperDirection, extendCss: contentCss, direction: contentDirection, alignX: contentAlignX, alignY: contentAlignY, equalCols: equalCols }, core.renderContent(CHILDREN))),
+        afterContent && (React__default["default"].createElement(component$5, { tag: SUB_TAG, contentType: "after", parentDirection: wrapperDirection, extendCss: afterContentCss, direction: afterContentDirection, alignX: afterContentAlignX, alignY: afterContentAlignY, equalCols: equalCols, gap: gap }, core.renderContent(afterContentRender)))));
 });
 const name$4 = `${PKG_NAME}/Element`;
-component$1.displayName = name$4;
-// eslint-disable-next-line @typescript-eslint/ban-ts-comment
-// @ts-ignore
-component$1.pkgName = PKG_NAME;
-// eslint-disable-next-line @typescript-eslint/ban-ts-comment
-// @ts-ignore
-component$1.VITUS_LABS__COMPONENT = name$4;
+component$3.displayName = name$4;
+component$3.pkgName = PKG_NAME;
+component$3.VITUS_LABS__COMPONENT = name$4;
 
 /* eslint-disable no-param-reassign */
 const isNumber = (a, b) => Number.isInteger(a) && Number.isInteger(b);
@@ -397,7 +392,7 @@ const withEqualBeforeAfter = (WrappedComponent) => {
         };
         if (equalBeforeAfter)
             calculateSize();
-        return (React__default['default'].createElement(WrappedComponent, { ...rest, afterContent: afterContent, beforeContent: beforeContent, ref: elementRef }));
+        return (React__default["default"].createElement(WrappedComponent, { ...rest, afterContent: afterContent, beforeContent: beforeContent, ref: elementRef }));
     };
     Enhanced.displayName = `withEqualSizeBeforeAfter(${displayName})`;
     return Enhanced;
@@ -424,7 +419,7 @@ const attachItemProps = ({ i, length, }) => {
         position,
     };
 };
-const component = (props) => {
+const component$2 = (props) => {
     const { itemKey, valueName, children, component, data, wrapComponent: Wrapper, wrapProps, itemProps, } = props;
     const renderedElement = (component, props) => core.renderContent(component, props);
     const injectItemProps = typeof itemProps === 'function'
@@ -437,6 +432,8 @@ const component = (props) => {
     // render children
     // --------------------------------------------------------
     const renderChildren = () => {
+        if (!children)
+            return null;
         const { length } = children;
         // if no props extension is required, just return children
         if (!itemProps && !Wrapper)
@@ -452,7 +449,7 @@ const component = (props) => {
                 ? injectWrapItemProps({}, extendedProps)
                 : {};
             if (Wrapper) {
-                return (React__default['default'].createElement(Wrapper, { key: key, ...finalWrapProps }, renderedElement(item, finalItemProps)));
+                return (React__default["default"].createElement(Wrapper, { key: key, ...finalWrapProps }, renderedElement(item, finalItemProps)));
             }
             return core.renderContent(item, {
                 key: i,
@@ -492,7 +489,7 @@ const component = (props) => {
                 ? injectWrapItemProps({ [keyName]: item }, extendedProps)
                 : {};
             if (Wrapper) {
-                return (React__default['default'].createElement(Wrapper, { key: key, ...finalWrapProps }, renderedElement(component, finalItemProps)));
+                return (React__default["default"].createElement(Wrapper, { key: key, ...finalWrapProps }, renderedElement(component, finalItemProps)));
             }
             return renderedElement(component, { key, ...finalItemProps });
         });
@@ -531,7 +528,7 @@ const component = (props) => {
                 ? injectWrapItemProps(item, extendedProps)
                 : {};
             if (Wrapper && !itemComponent) {
-                return (React__default['default'].createElement(Wrapper, { key: key, ...finalWrapProps }, renderedElement(renderItem, finalItemProps)));
+                return (React__default["default"].createElement(Wrapper, { key: key, ...finalWrapProps }, renderedElement(renderItem, finalItemProps)));
             }
             return renderedElement(renderItem, { key, ...finalItemProps });
         });
@@ -566,23 +563,20 @@ const component = (props) => {
     };
     return renderItems();
 };
-component.isIterator = true;
-component.RESERVED_PROPS = RESERVED_PROPS;
-component.displayName = 'vitus-labs/elements/Iterator';
+component$2.isIterator = true;
+component$2.RESERVED_PROPS = RESERVED_PROPS;
+component$2.displayName = 'vitus-labs/elements/Iterator';
 
-/* eslint-disable @typescript-eslint/ban-ts-comment */
-const Component$4 = React.forwardRef(({ rootElement = false, ...props }, ref) => {
-    const renderedList = React__default['default'].createElement(component, { ...core.pick(props, component.RESERVED_PROPS) });
+const Component$2 = React.forwardRef(({ rootElement = false, ...props }, ref) => {
+    const renderedList = React__default["default"].createElement(component$2, { ...core.pick(props, component$2.RESERVED_PROPS) });
     if (!rootElement)
         return renderedList;
-    return (React__default['default'].createElement(component$1, { ref: ref, ...core.omit(props, component.RESERVED_PROPS) }, renderedList));
+    return (React__default["default"].createElement(component$3, { ref: ref, ...core.omit(props, component$2.RESERVED_PROPS) }, renderedList));
 });
 const name$3 = `${PKG_NAME}/List`;
-Component$4.displayName = name$3;
-// @ts-ignore
-Component$4.pkgName = PKG_NAME;
-// @ts-ignore
-Component$4.VITUS_LABS__COMPONENT = name$3;
+Component$2.displayName = name$3;
+Component$2.pkgName = PKG_NAME;
+Component$2.VITUS_LABS__COMPONENT = name$3;
 
 const RESERVED_KEYS = [
     'type',
@@ -590,7 +584,7 @@ const RESERVED_KEYS = [
     'itemProps',
     'activeItemRequired',
 ];
-const Component$3 = (WrappedComponent) => {
+const Component$1 = (WrappedComponent) => {
     const displayName = WrappedComponent.displayName || WrappedComponent.name || 'Component';
     const Enhanced = (props) => {
         const { type = 'single', activeItemRequired, activeItems, itemProps = {}, ...rest } = props;
@@ -672,10 +666,13 @@ const Component$3 = (WrappedComponent) => {
             updateAllItemsState(false);
         };
         const isItemActive = (key) => {
+            if (!innerActiveItems)
+                return false;
             if (type === 'single')
                 return innerActiveItems === key;
-            if (type === 'multi')
-                return innerActiveItems.get(key);
+            if (type === 'multi' && innerActiveItems instanceof Map) {
+                return !!innerActiveItems.get(key);
+            }
             return false;
         };
         const attachMultipleProps = {
@@ -703,30 +700,28 @@ const Component$3 = (WrappedComponent) => {
                 }
             }
         }, [type, activeItems]);
-        return React__default['default'].createElement(WrappedComponent, { ...rest, itemProps: attachItemProps });
+        return React__default["default"].createElement(WrappedComponent, { ...rest, itemProps: attachItemProps });
     };
     Enhanced.RESERVED_KEYS = RESERVED_KEYS;
     Enhanced.displayName = `vitus-labs/elements/List/withActiveState(${displayName})`;
     return Enhanced;
 };
 
-const Component$2 = ({ position = document.body, tag = 'div', children, }) => {
+const component$1 = ({ position = undefined, tag = 'div', children, }) => {
     const [element] = React.useState(undefined);
+    if (!position || !element)
+        return null;
     React.useEffect(() => {
         return undefined;
-    }, [tag, position]);
-    return ReactDOM__default['default'].createPortal(children, element);
+    }, []);
+    return ReactDOM__default["default"].createPortal(children, element);
 };
 const name$2 = `${PKG_NAME}/Portal`;
-Component$2.displayName = name$2;
-// eslint-disable-next-line @typescript-eslint/ban-ts-comment
-// @ts-ignore
-Component$2.pkgName = PKG_NAME;
-// eslint-disable-next-line @typescript-eslint/ban-ts-comment
-// @ts-ignore
-Component$2.VITUS_LABS__COMPONENT = name$2;
+component$1.displayName = name$2;
+component$1.pkgName = PKG_NAME;
+component$1.VITUS_LABS__COMPONENT = name$2;
 
-const Component$1 = ({ children, trigger, DOMLocation, refName = 'ref', triggerRefName, contentRefName, isOpen = false, openOn = 'click', // click | hover
+const Component = ({ children, trigger, DOMLocation, refName = 'ref', triggerRefName, contentRefName, isOpen = false, openOn = 'click', // click | hover
 closeOn = 'click', // click | triggerClick | hover | manual
 type = 'dropdown', // dropdown | tooltip | popover | modal
 align = 'bottom', // * main align prop * top | left | bottom | right
@@ -947,7 +942,7 @@ offsetX = 0, offsetY = 0, throttleDelay = 200, }) => {
     const handleWindow = core.throttle(calculateContentPosition, throttleDelay);
     const handleMouseMove = core.throttle(handleDocumentClick, throttleDelay);
     const passHandlers = openOn === 'manual' || closeOn === 'manual';
-    return (React__default['default'].createElement(React__default['default'].Fragment, null,
+    return (React__default["default"].createElement(React__default["default"].Fragment, null,
         core.renderContent(trigger, {
             [triggerRefName || refName]: triggerRef,
             active: visible,
@@ -956,13 +951,9 @@ offsetX = 0, offsetY = 0, throttleDelay = 200, }) => {
         false  ));
 };
 const name$1 = `${PKG_NAME}/Ovelay`;
-Component$1.displayName = name$1;
-// eslint-disable-next-line @typescript-eslint/ban-ts-comment
-// @ts-ignore
-Component$1.pkgName = PKG_NAME;
-// eslint-disable-next-line @typescript-eslint/ban-ts-comment
-// @ts-ignore
-Component$1.VITUS_LABS__COMPONENT = name$1;
+Component.displayName = name$1;
+Component.pkgName = PKG_NAME;
+Component.VITUS_LABS__COMPONENT = name$1;
 
 const styles = ({ css, theme: t }) => css `
   ${t.extraStyles && unistyle.extendCss(t.extraStyles)};
@@ -980,34 +971,27 @@ var Styled = core.config.styled(core.config.textComponent) `
 })};
 `;
 
-/* eslint-disable @typescript-eslint/no-explicit-any */
-const Component = React.forwardRef(({ paragraph, label, children, tag, extendCss, ...props }, ref) => {
-    const renderContent = (as = undefined) => (React__default['default'].createElement(Styled, { ref: ref, as: as, "$text": { extraStyles: extendCss }, ...props }, children || label));
+const component = React.forwardRef(({ paragraph, label, children, tag, extendCss, ...props }, ref) => {
+    const renderContent = (as = undefined) => (React__default["default"].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`;
-Component.displayName = name;
-// eslint-disable-next-line @typescript-eslint/ban-ts-comment
-// @ts-ignore
-Component.pkgName = PKG_NAME;
-// eslint-disable-next-line @typescript-eslint/ban-ts-comment
-// @ts-ignore
-Component.VITUS_LABS__COMPONENT = name;
-Component.isText = true;
+component.displayName = name;
+component.pkgName = PKG_NAME;
+component.VITUS_LABS__COMPONENT = name;
+component.isText = true;
 
 Object.defineProperty(exports, 'Provider', {
   enumerable: true,
-  get: function () {
-    return unistyle.Provider;
-  }
+  get: function () { return unistyle.Provider; }
 });
-exports.Element = component$1;
-exports.List = Component$4;
-exports.Overlay = Component$1;
-exports.Portal = Component$2;
-exports.Text = Component;
-exports.withActiveState = Component$3;
+exports.Element = component$3;
+exports.List = Component$2;
+exports.Overlay = Component;
+exports.Portal = component$1;
+exports.Text = component;
+exports.withActiveState = Component$1;
 exports.withEqualSizeBeforeAfter = withEqualBeforeAfter;
 //# sourceMappingURL=vitus-labs-elements.js.map