@vitus-labs/elements 0.73.0 → 0.75.0

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

@@ -1,24 +1,49 @@
 import { makeItResponsive, alignContent, extendCss, value } from '@vitus-labs/unistyle';
 export { Provider } from '@vitus-labs/unistyle';
 import React, { forwardRef, memo, useMemo, createRef, useCallback, Children, useState, useEffect, createContext, useContext, useRef } from 'react';
-import { config, render, get, isEmpty, pick, omit, context as context$1 } from '@vitus-labs/core';
+import { config, render, 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
 const PKG_NAME = '@vitus-labs/elements';
 
+/* eslint-disable import/prefer-default-export */
+// https://stackoverflow.com/questions/35464067/flexbox-not-working-on-button-or-fieldset-elements
+const INLINE_ELEMENTS_FLEX_FIX = {
+    button: true,
+    fieldset: true,
+    legend: true,
+};
+
+/* eslint-disable import/prefer-default-export */
+const isWebFixNeeded = (tag) => {
+    if (tag && tag in INLINE_ELEMENTS_FLEX_FIX)
+        return true;
+    return false;
+};
+
 const childFix = `
   display: flex;
   flex: 1;
   width: 100%;
   height: 100%;
 `;
+const parentFix = `
+  flex-direction: column;
+`;
+const parentFixBlock = `
+  width: 100%;
+`;
+const fullHeight = `
+  height: 100%;
+`;
 const block = `
   align-self: stretch;
 `;
+const childFixPosition = (isBlock) => `display: ${isBlock ? 'flex' : 'inline-flex'};`;
 const styles$2 = ({ theme: t, css }) => css `
-  ${false  };
+  ${t.alignY === 'block' && fullHeight};
 
   ${alignContent({
     direction: t.direction,
@@ -28,13 +53,13 @@ const styles$2 = ({ theme: t, css }) => css `
 
   ${t.block && block};
 
-  ${false  };
-  ${false   };
-  ${false  };
+  ${!t.childFix && childFixPosition(t.block)};
+  ${t.parentFix && t.block && parentFixBlock};
+  ${t.parentFix && parentFix};
 
   ${t.extraStyles && extendCss(t.extraStyles)};
 `;
-const platformStyles$1 = `display: flex;`;
+const platformStyles$1 = `box-sizing: border-box;` ;
 var Styled$2 = config.styled(config.component) `
   position: relative;
   ${platformStyles$1};
@@ -61,7 +86,9 @@ const component$4 = forwardRef(({ children, tag, block, extendCss, direction, al
         ref,
         as: tag,
     };
-    {
+    const needsFix = !props.dangerouslySetInnerHTML && tag && isWebFixNeeded(tag)
+        ;
+    if (!needsFix || false) {
         return (React.createElement(Styled$2, { ...COMMON_PROPS, "$element": {
                 block,
                 direction,
@@ -71,6 +98,20 @@ const component$4 = forwardRef(({ children, tag, block, extendCss, direction, al
                 extraStyles: extendCss,
             } }, children));
     }
+    // eslint-disable-next-line no-nested-ternary
+    const asTag = (isInline ? 'span' : 'div') ;
+    return (React.createElement(Styled$2, { ...COMMON_PROPS, "$element": {
+            parentFix: true,
+            block,
+            extraStyles: extendCss,
+        } },
+        React.createElement(Styled$2, { as: asTag, "$childFix": true, "$element": {
+                childFix: true,
+                direction,
+                alignX,
+                alignY,
+                equalCols,
+            } }, children)));
 });
 
 const equalCols = `
@@ -120,7 +161,7 @@ const styles$1 = ({ css, theme: t, rootSize }) => css `
 
   ${t.extraStyles && extendCss(t.extraStyles)};
 `;
-const platformStyles = '';
+const platformStyles = `box-sizing: border-box;` ;
 var Styled$1 = config.styled(config.component) `
   ${platformStyles};
 
@@ -157,6 +198,68 @@ const Component$6 = ({ contentType, tag, parentDirection, direction, alignX, ali
 };
 var component$3 = memo(Component$6);
 
+const INLINE_ELEMENTS = {
+    span: true,
+    a: true,
+    button: true,
+    input: true,
+    label: true,
+    select: true,
+    textarea: true,
+    br: true,
+    img: true,
+    strong: true,
+    small: true,
+    code: true,
+    b: true,
+    big: true,
+    i: true,
+    tt: true,
+    abbr: true,
+    acronym: true,
+    cite: true,
+    dfn: true,
+    em: true,
+    kbd: true,
+    samp: true,
+    var: true,
+    bdo: true,
+    map: true,
+    object: true,
+    q: true,
+    script: true,
+    sub: true,
+    sup: true,
+};
+const EMPTY_ELEMENTS = {
+    area: true,
+    base: true,
+    br: true,
+    col: true,
+    embed: true,
+    hr: true,
+    img: true,
+    input: true,
+    keygen: true,
+    link: true,
+    // 'meta': true,
+    // 'param': true,
+    source: true,
+    track: true,
+    wbr: true,
+};
+
+const isInlineElement = (tag) => {
+    if (tag && tag in INLINE_ELEMENTS)
+        return true;
+    return false;
+};
+const getShouldBeEmpty = (tag) => {
+    if (tag && tag in EMPTY_ELEMENTS)
+        return true;
+    return false;
+};
+
 const defaultDirection = 'inline';
 const defaultContentDirection = 'rows';
 const defaultAlignX = 'left';
@@ -166,14 +269,14 @@ const Component$5 = forwardRef(({ innerRef, tag, label, content, children, befor
     // check if should render only single element
     // --------------------------------------------------------
     const shouldBeEmpty = !!props.dangerouslySetInnerHTML ||
-        (false  );
+        (tag && getShouldBeEmpty(tag));
     // --------------------------------------------------------
     // if not single element, calculate values
     // --------------------------------------------------------
     const isSimpleElement = !beforeContent && !afterContent;
     const CHILDREN = children || content || label;
-    const isInline = false;
-    const SUB_TAG = undefined;
+    const isInline = isInlineElement(tag) ;
+    const SUB_TAG = isInline ? 'span' : undefined;
     // --------------------------------------------------------
     // direction & alignX & alignY calculations
     // --------------------------------------------------------
@@ -630,7 +733,7 @@ position = 'fixed', // absolute | fixed | relative | static
 align = 'bottom', // * main align prop * top | left | bottom | right
 alignX = 'left', // left | center | right
 alignY = 'bottom', // top | center | bottom
-offsetX = 0, offsetY = 0, throttleDelay = 200, parentContainer, closeOnEsc = true, disabled, onOpen, onClose, }) => {
+offsetX = 0, offsetY = 0, throttleDelay = 200, parentContainer, closeOnEsc = true, disabled, onOpen, onClose, } = {}) => {
     const { rootSize } = useContext(context$1);
     const ctx = useOverlayContext();
     const [isContentLoaded, setContentLoaded] = useState(false);
@@ -808,22 +911,29 @@ offsetX = 0, offsetY = 0, throttleDelay = 200, parentContainer, closeOnEsc = tru
     const assignContentPosition = useCallback((values = {}) => {
         if (!contentRef.current)
             return;
+        const isValue = (value) => {
+            if (typeof value === 'number')
+                return true;
+            if (Number.isFinite(value))
+                return true;
+            return !!value;
+        };
         const setValue = (param) => value(param, rootSize);
         // ADD POSITION STYLES TO CONTENT
         // eslint-disable-next-line no-param-reassign
-        if (position)
+        if (isValue(position))
             contentRef.current.style.position = position;
         // eslint-disable-next-line no-param-reassign
-        if (values.top)
+        if (isValue(values.top))
             contentRef.current.style.top = setValue(values.top);
         // eslint-disable-next-line no-param-reassign
-        if (values.bottom)
+        if (isValue(values.bottom))
             contentRef.current.style.bottom = setValue(values.bottom);
         // eslint-disable-next-line no-param-reassign
-        if (values.left)
+        if (isValue(values.left))
             contentRef.current.style.left = setValue(values.left);
         // eslint-disable-next-line no-param-reassign
-        if (values.right)
+        if (isValue(values.right))
             contentRef.current.style.right = setValue(values.right);
     }, [position, rootSize, contentRef]);
     const setContentPosition = useCallback(() => {
@@ -886,9 +996,23 @@ offsetX = 0, offsetY = 0, throttleDelay = 200, parentContainer, closeOnEsc = tru
         triggerRef,
         contentRef,
     ]);
-    const handleContentPosition = setContentPosition;
+    const handleContentPosition = useCallback(throttle(setContentPosition, throttleDelay), 
+    // same deps as `setContentPosition`
+    [assignContentPosition, calculateContentPosition]);
     const handleClick = handleVisibilityByEventType;
-    const handleVisibility = handleVisibilityByEventType;
+    const handleVisibility = useCallback(throttle(handleVisibilityByEventType, throttleDelay), 
+    // same deps as `handleVisibilityByEventType`
+    [
+        active,
+        blocked,
+        disabled,
+        openOn,
+        closeOn,
+        hideContent,
+        showContent,
+        triggerRef,
+        contentRef,
+    ]);
     // --------------------------------------------------------------------------
     // useEffects
     // --------------------------------------------------------------------------
@@ -900,10 +1024,10 @@ offsetX = 0, offsetY = 0, throttleDelay = 200, parentContainer, closeOnEsc = tru
         }
     }, [disabled, alignX, alignY, hideContent]);
     useEffect(() => {
-        if (active && isContentLoaded) {
-            setContentPosition();
-            setContentPosition();
-        }
+        if (!active || !isContentLoaded)
+            return undefined;
+        setContentPosition();
+        setContentPosition();
     }, [active, isContentLoaded, setContentPosition]);
     // if an Overlay has an Overlay child, this will prevent closing parent child
     // and calculates correct position when an Overlay is opened
@@ -914,12 +1038,14 @@ offsetX = 0, offsetY = 0, throttleDelay = 200, parentContainer, closeOnEsc = tru
             if (ctx.setBlocked)
                 ctx.setBlocked();
         }
+        else {
+            setContentLoaded(false);
+        }
         return () => {
             if (onClose)
                 onClose();
             if (ctx.setUnblocked)
                 ctx.setUnblocked();
-            setContentLoaded(false);
         };
     }, [active, onOpen, onClose, showContent, ctx]);
     // handle closing only when content is active
@@ -1069,6 +1195,13 @@ var Styled = config.styled(config.textComponent) `
 const component = 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));
     let finalTag;
+    {
+        if (paragraph)
+            finalTag = 'p';
+        else {
+            finalTag = tag;
+        }
+    }
     return renderContent(finalTag);
 });
 const name$1 = `${PKG_NAME}/Text`;