@vitus-labs/elements 0.37.0 → 0.40.0

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

@@ -1,8 +1,8 @@
 (function (global, factory) {
-  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@vitus-labs/unistyle'), require('react'), require('@vitus-labs/core'), require('react-dom')) :
-  typeof define === 'function' && define.amd ? define(['exports', '@vitus-labs/unistyle', 'react', '@vitus-labs/core', 'react-dom'], factory) :
-  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.vitusLabsElements = {}, global.unistyle, global.React, global.core, global.ReactDOM));
-})(this, (function (exports, unistyle, React, core, reactDom) { 'use strict';
+  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@vitus-labs/unistyle'), require('react'), require('@vitus-labs/core'), require('react-is'), require('react-dom')) :
+  typeof define === 'function' && define.amd ? define(['exports', '@vitus-labs/unistyle', 'react', '@vitus-labs/core', 'react-is', 'react-dom'], factory) :
+  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.vitusLabsElements = {}, global.unistyle, global.React, global.core, global.ReactIs, global.ReactDOM));
+})(this, (function (exports, unistyle, React, core, reactIs, reactDom) { 'use strict';
 
   function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -76,7 +76,7 @@
 })};
 `;
 
-  const component$a = React.forwardRef(({ children, tag, block, extendCss, direction, alignX, alignY, equalCols, isInline, ...props }, ref) => {
+  const component$b = React.forwardRef(({ children, tag, block, extendCss, direction, alignX, alignY, equalCols, isInline, ...props }, ref) => {
       const debugProps = process.env.NODE_ENV !== 'production'
           ? {
               'data-vl-element': 'Element',
@@ -184,7 +184,7 @@
 })};
 `;
 
-  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,
@@ -200,7 +200,7 @@
               extraStyles: extendCss,
           }, ...debugProps, ...props }));
   };
-  var component$9 = React.memo(component$8);
+  var component$a = React.memo(component$9);
 
   const INLINE_ELEMENTS = {
       span: true,
@@ -260,7 +260,7 @@
   const defaultContentDirection = 'rows';
   const defaultAlignX = 'left';
   const defaultAlignY = 'center';
-  const component$7 = React.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 = React.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
       // --------------------------------------------------------
@@ -321,18 +321,18 @@
       // return simple/empty element like input or image etc.
       // --------------------------------------------------------
       if (shouldBeEmpty) {
-          return React__default["default"].createElement(component$a, { ...props, ...WRAPPER_PROPS });
+          return React__default["default"].createElement(component$b, { ...props, ...WRAPPER_PROPS });
       }
       const contentRenderOutput = core.renderContent(CHILDREN);
-      return (React__default["default"].createElement(component$a, { ...props, ...WRAPPER_PROPS, isInline: isInline },
-          beforeContent && (React__default["default"].createElement(component$9, { tag: SUB_TAG, contentType: "before", parentDirection: wrapperDirection, extendCss: beforeContentCss, direction: beforeContentDirection, alignX: beforeContentAlignX, alignY: beforeContentAlignY, equalCols: equalCols, gap: gap }, core.renderContent(beforeContent))),
-          isSimpleElement ? (contentRenderOutput) : (React__default["default"].createElement(component$9, { tag: SUB_TAG, contentType: "content", parentDirection: wrapperDirection, extendCss: contentCss, direction: contentDirection, alignX: contentAlignX, alignY: contentAlignY, equalCols: equalCols }, contentRenderOutput)),
-          afterContent && (React__default["default"].createElement(component$9, { tag: SUB_TAG, contentType: "after", parentDirection: wrapperDirection, extendCss: afterContentCss, direction: afterContentDirection, alignX: afterContentAlignX, alignY: afterContentAlignY, equalCols: equalCols, gap: gap }, core.renderContent(afterContent)))));
+      return (React__default["default"].createElement(component$b, { ...props, ...WRAPPER_PROPS, isInline: isInline },
+          beforeContent && (React__default["default"].createElement(component$a, { tag: SUB_TAG, contentType: "before", parentDirection: wrapperDirection, extendCss: beforeContentCss, direction: beforeContentDirection, alignX: beforeContentAlignX, alignY: beforeContentAlignY, equalCols: equalCols, gap: gap }, core.renderContent(beforeContent))),
+          isSimpleElement ? (contentRenderOutput) : (React__default["default"].createElement(component$a, { tag: SUB_TAG, contentType: "content", parentDirection: wrapperDirection, extendCss: contentCss, direction: contentDirection, alignX: contentAlignX, alignY: contentAlignY, equalCols: equalCols }, contentRenderOutput)),
+          afterContent && (React__default["default"].createElement(component$a, { tag: SUB_TAG, contentType: "after", parentDirection: wrapperDirection, extendCss: afterContentCss, direction: afterContentDirection, alignX: afterContentAlignX, alignY: afterContentAlignY, equalCols: equalCols, gap: gap }, core.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);
@@ -397,7 +397,7 @@
           position,
       };
   };
-  const component$6 = (props) => {
+  const component$7 = (props) => {
       const { itemKey, valueName, children, component, data, wrapComponent: Wrapper, wrapProps, itemProps, } = props;
       const renderedElement = core.renderContent;
       const injectItemProps = React.useMemo(() => (typeof itemProps === 'function' ? itemProps : () => itemProps), [itemProps]);
@@ -407,34 +407,46 @@
               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__default["default"].createElement(Wrapper, { key: i, ...finalWrapProps }, renderedElement(child, finalItemProps)));
+          }
+          return core.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 React.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__default["default"].createElement(Wrapper, { key: key, ...finalWrapProps }, renderedElement(item, finalItemProps)));
-              }
-              return core.renderContent(item, {
-                  key: i,
-                  ...finalItemProps,
+          // if children is Array
+          if (Array.isArray(children)) {
+              return React.Children.map(children, (item, i) => renderChild(item, children.length, i));
+          }
+          // if children is Fragment
+          if (reactIs.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
@@ -535,19 +547,19 @@
       };
       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 = React.forwardRef(({ rootElement = false, ...props }, ref) => {
-      const renderedList = React__default["default"].createElement(component$6, { ...core.pick(props, component$6.RESERVED_PROPS) });
+  const component$6 = React.forwardRef(({ rootElement = false, ...props }, ref) => {
+      const renderedList = React__default["default"].createElement(component$7, { ...core.pick(props, component$7.RESERVED_PROPS) });
       if (!rootElement)
           return renderedList;
-      return (React__default["default"].createElement(component$7, { ref: ref, ...core.omit(props, component$6.RESERVED_PROPS) }, renderedList));
+      return (React__default["default"].createElement(component$8, { ref: ref, ...core.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',
@@ -555,7 +567,7 @@
       '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;
@@ -678,7 +690,7 @@
       return Enhanced;
   };
 
-  const component$3 = ({ position = undefined, tag = 'div', children, }) => {
+  const component$4 = ({ position = undefined, tag = 'div', children, }) => {
       const [element] = React.useState(undefined);
       if (!position || !element)
           return null;
@@ -687,15 +699,15 @@
       }, []);
       return reactDom.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 = React.createContext({});
   const { Provider } = context;
   const useOverlayContext = () => React.useContext(context);
-  const component$2 = ({ children, blocked, setBlocked, setUnblocked, }) => (React__default["default"].createElement(Provider, { value: { blocked, setBlocked, setUnblocked } }, children));
+  const component$3 = ({ children, blocked, setBlocked, setUnblocked, }) => (React__default["default"].createElement(Provider, { value: { blocked, setBlocked, setUnblocked } }, children));
 
   /* eslint-disable no-console */
   var useOverlay = ({ isOpen = false, openOn = 'click', // click | hover
@@ -1015,7 +1027,7 @@
       };
   };
 
-  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 = React.useMemo(() => openOn === 'manual' ||
@@ -1029,10 +1041,10 @@
           }),
           false  ));
   };
-  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 && unistyle.extendCss(t.extraStyles)};
@@ -1050,30 +1062,37 @@
 })};
 `;
 
-  const component = React.forwardRef(({ paragraph, label, children, tag, extendCss, ...props }, ref) => {
+  const component$1 = 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`;
+  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' }, }) => core.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;
 
   Object.defineProperty(exports, 'Provider', {
     enumerable: true,
     get: function () { return unistyle.Provider; }
   });
-  exports.Element = component$7;
-  exports.List = component$5;
-  exports.Overlay = component$1;
-  exports.OverlayProvider = component$2;
-  exports.Portal = component$3;
-  exports.Text = component;
+  exports.Element = component$8;
+  exports.List = component$6;
+  exports.Overlay = component$2;
+  exports.OverlayProvider = component$3;
+  exports.Portal = component$4;
+  exports.Text = component$1;
+  exports.Util = component;
   exports.useOverlay = useOverlay;
-  exports.withActiveState = component$4;
+  exports.withActiveState = component$5;
   exports.withEqualSizeBeforeAfter = withEqualBeforeAfter;
 
   Object.defineProperty(exports, '__esModule', { value: true });