@websolutespa/bom-mixer-ui 1.5.0 → 1.5.2

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # @websolutespa/bom-mixer-ui
 
+## 1.5.2
+
+### Patch Changes
+
+- Modified: AccordionGroup, Media, Meta, Pagination, PopoverCollections, Popover, Tabs, utils.
+- Updated dependencies
+  - @websolutespa/bom-mixer-models@1.5.2
+  - @websolutespa/bom-mixer-hooks@1.4.1
+  - @websolutespa/bom-core@0.6.2
+
+## 1.5.1
+
+### Patch Changes
+
+- Added: default href to Link.
+
 ## 1.5.0
 
 ### Minor Changes

package/dist/cjs/index.js

@@ -11,6 +11,7 @@ var reactDom = require('react-dom');
 var bomMixerIcons = require('@websolutespa/bom-mixer-icons');
 var swiperCss = require('!!raw-loader!swiper/css');
 var react = require('swiper/react');
+var bomMixerModels = require('@websolutespa/bom-mixer-models');
 var Head = require('next/head');
 var router = require('next/router');
 var bomMixerForms = require('@websolutespa/bom-mixer-forms');
@@ -339,139 +340,6 @@ const AccordionBase = _a => {
   }));
 };
 
-const pickChild = (children, targetChild) => {
-  const target = [];
-  const withoutTargetChildren = React__default.default.Children.map(children, item => {
-    if (! /*#__PURE__*/React__default.default.isValidElement(item)) {
-      return item;
-    }
-    if (item.type === targetChild) {
-      target.push(item);
-      return null;
-    }
-    return item;
-  });
-  const targetChildren = target.length >= 0 ? target : undefined;
-  return [withoutTargetChildren, targetChildren];
-};
-const setChildrenIndex = function (children, targetComponents) {
-  if (targetComponents === void 0) {
-    targetComponents = [];
-  }
-  if (React__default.default.Children.count(children) === 0) {
-    return [];
-  }
-  const allowAll = targetComponents.length === 0;
-  const clone = function (child, props) {
-    if (props === void 0) {
-      props = {};
-    }
-    return /*#__PURE__*/React__default.default.cloneElement(child, props);
-  };
-  let index = 0;
-  return React__default.default.Children.map(children, item => {
-    if (! /*#__PURE__*/React__default.default.isValidElement(item)) {
-      return item;
-    }
-    index = index + 1;
-    if (allowAll) {
-      return clone(item, {
-        index
-      });
-    }
-    const isAllowed = targetComponents.find(child => child === item.type);
-    if (isAllowed) {
-      return clone(item, {
-        index
-      });
-    }
-    index = index - 1;
-    return item;
-  });
-};
-const getReactNode = node => {
-  if (!node) {
-    return null;
-  }
-  if (typeof node !== 'function') {
-    return node;
-  }
-  return node();
-};
-const isGeistElement = element => {
-  if (!element) {
-    return false;
-  }
-  if ((element === null || element === void 0 ? void 0 : element.dataset) && (element === null || element === void 0 ? void 0 : element.dataset['geist'])) {
-    return true;
-  }
-  element.attributes.getNamedItem('data-geist');
-  return !!element.attributes.getNamedItem('data-geist');
-};
-
-const StyledAccordionGroup = styled__default.default.div`
-  /*
-  width: auto;
-  height: auto;
-  padding: 0 0.6rem;
-  margin: 0;
-  */
-
-  /*
-  & > :global(div + div) {
-    border-top: none;
-  }
-  */
-`;
-const AccordionGroup = _a => {
-  var {
-      accordion = true,
-      className = '',
-      children
-    } = _a,
-    props = __rest(_a, ["accordion", "className", "children"]);
-  const [state, setState, stateRef] = bomMixerHooks.useCurrentState([]);
-  const updateValues = (index, visible) => {
-    const hasChild = stateRef.current.find(x => x === index);
-    if (accordion) {
-      if (visible) {
-        return setState([index]);
-      }
-      return setState([]);
-    }
-    if (visible) {
-      // In a few cases, the user will set Accordion Component state manually.
-      // If the user incorrectly set the state, Group component should ignore it.
-      /* istanbul ignore if */
-      if (hasChild) {
-        return;
-      }
-      return setState([...stateRef.current, index]);
-    }
-    setState(stateRef.current.filter(item => item !== index));
-  };
-  const initialValue = React.useMemo(() => ({
-    values: state,
-    updateValues
-  }), [state.join(',')]);
-  const indexedChildren = React.useMemo(() => setChildrenIndex(children, [AccordionBase]), [children]);
-  const classNames = bomCore.getClassNames('accordion-group', className);
-  return jsxRuntime.jsx(AccordionContext.Provider, {
-    value: initialValue,
-    children: jsxRuntime.jsx(StyledAccordionGroup, Object.assign({
-      className: classNames
-    }, props, {
-      children: indexedChildren
-    }))
-  });
-};
-AccordionGroup.displayName = 'AccordionGroup';
-
-const Accordion = bomCore.withSchema(AccordionBase, {
-  Group: AccordionGroup,
-  displayName: 'Accordion'
-});
-
 const CssObj = {
   'alignContent': 'align-content',
   'alignItems': 'align-items',
@@ -904,6 +772,221 @@ function hasChildOfType(children, type) {
   const hasChildOfType = foundChildren !== undefined;
   return hasChildOfType;
 }
+/**
+ * todo verification of above methods
+ */
+function getId() {
+  return Math.random().toString(32).slice(2, 10);
+}
+function capitalize(str) {
+  const safeStr = String(str).trim();
+  return safeStr.charAt(0).toUpperCase() + safeStr.slice(1);
+}
+function hasChild(children, child) {
+  const types = React__default.default.Children.map(children, item => {
+    if (! /*#__PURE__*/React__default.default.isValidElement(item)) return null;
+    return item.type;
+  });
+  return (types || []).includes(child);
+}
+function pickChild(children, targetChild) {
+  const target = [];
+  const withoutTargetChildren = React__default.default.Children.map(children, item => {
+    if (! /*#__PURE__*/React__default.default.isValidElement(item)) {
+      return item;
+    }
+    if (item.type === targetChild) {
+      target.push(item);
+      return null;
+    }
+    return item;
+  });
+  const targetChildren = target.length >= 0 ? target : undefined;
+  return [withoutTargetChildren, targetChildren];
+}
+function pickChildByProps(children, key, value) {
+  const target = [];
+  const isArray = Array.isArray(value);
+  const withoutPropChildren = React__default.default.Children.map(children, item => {
+    if (! /*#__PURE__*/React__default.default.isValidElement(item)) {
+      return null;
+    }
+    if (!item.props) {
+      return item;
+    }
+    if (isArray) {
+      if (value.includes(item.props[key])) {
+        target.push(item);
+        return null;
+      }
+      return item;
+    }
+    if (item.props[key] === value) {
+      target.push(item);
+      return null;
+    }
+    return item;
+  });
+  const targetChildren = target.length >= 0 ? target : undefined;
+  return [withoutPropChildren, targetChildren];
+}
+function pickChildrenFirst(children) {
+  return React__default.default.Children.toArray(children)[0];
+}
+function setChildrenProps(children, props, targetComponents) {
+  if (targetComponents === void 0) {
+    targetComponents = [];
+  }
+  if (React__default.default.Children.count(children) === 0) {
+    return [];
+  }
+  const allowAll = targetComponents.length === 0;
+  const clone = function (child, props) {
+    if (props === void 0) {
+      props = {};
+    }
+    return /*#__PURE__*/React__default.default.cloneElement(child, props);
+  };
+  return React__default.default.Children.map(children, item => {
+    if (! /*#__PURE__*/React__default.default.isValidElement(item)) {
+      return item;
+    }
+    if (allowAll) {
+      return clone(item, props);
+    }
+    const isAllowed = targetComponents.find(child => child === item.type);
+    if (isAllowed) {
+      return clone(item, props);
+    }
+    return item;
+  });
+}
+function setChildrenIndex(children, targetComponents) {
+  if (targetComponents === void 0) {
+    targetComponents = [];
+  }
+  if (React__default.default.Children.count(children) === 0) {
+    return [];
+  }
+  const allowAll = targetComponents.length === 0;
+  const clone = function (child, props) {
+    if (props === void 0) {
+      props = {};
+    }
+    return /*#__PURE__*/React__default.default.cloneElement(child, props);
+  };
+  let index = 0;
+  return React__default.default.Children.map(children, item => {
+    if (! /*#__PURE__*/React__default.default.isValidElement(item)) {
+      return item;
+    }
+    index = index + 1;
+    if (allowAll) {
+      return clone(item, {
+        index
+      });
+    }
+    const isAllowed = targetComponents.find(child => child === item.type);
+    if (isAllowed) {
+      return clone(item, {
+        index
+      });
+    }
+    index = index - 1;
+    return item;
+  });
+}
+function getReactNode(node) {
+  if (!node) {
+    return null;
+  }
+  if (typeof node !== 'function') {
+    return node;
+  }
+  return node();
+}
+function isBrowser() {
+  return Boolean(typeof window !== 'undefined' && window.document && window.document.createElement);
+}
+function isMac() {
+  return isBrowser() && navigator.platform.toUpperCase().indexOf('MAC') >= 0;
+}
+function isCSSNumberValue(value) {
+  return value !== undefined && !Number.isNaN(+value);
+}
+function isMixerElement(element) {
+  if (!element) {
+    return false;
+  }
+  if ((element === null || element === void 0 ? void 0 : element.dataset) && (element === null || element === void 0 ? void 0 : element.dataset['mixer'])) {
+    return true;
+  }
+  element.attributes.getNamedItem('data-mixer');
+  return !!element.attributes.getNamedItem('data-mixer');
+}
+
+const StyledAccordionGroup = styled__default.default.div`
+  /*
+  width: auto;
+  height: auto;
+  padding: 0 0.6rem;
+  margin: 0;
+  */
+
+  /*
+  & > :global(div + div) {
+    border-top: none;
+  }
+  */
+`;
+const AccordionGroup = _a => {
+  var {
+      accordion = true,
+      className = '',
+      children
+    } = _a,
+    props = __rest(_a, ["accordion", "className", "children"]);
+  const [state, setState, stateRef] = bomMixerHooks.useCurrentState([]);
+  const updateValues = (index, visible) => {
+    const hasChild = stateRef.current.find(x => x === index);
+    if (accordion) {
+      if (visible) {
+        return setState([index]);
+      }
+      return setState([]);
+    }
+    if (visible) {
+      // In a few cases, the user will set Accordion Component state manually.
+      // If the user incorrectly set the state, Group component should ignore it.
+      /* istanbul ignore if */
+      if (hasChild) {
+        return;
+      }
+      return setState([...stateRef.current, index]);
+    }
+    setState(stateRef.current.filter(item => item !== index));
+  };
+  const initialValue = React.useMemo(() => ({
+    values: state,
+    updateValues
+  }), [state.join(',')]);
+  const indexedChildren = React.useMemo(() => setChildrenIndex(children, [AccordionBase]), [children]);
+  const classNames = bomCore.getClassNames('accordion-group', className);
+  return jsxRuntime.jsx(AccordionContext.Provider, {
+    value: initialValue,
+    children: jsxRuntime.jsx(StyledAccordionGroup, Object.assign({
+      className: classNames
+    }, props, {
+      children: indexedChildren
+    }))
+  });
+};
+AccordionGroup.displayName = 'AccordionGroup';
+
+const Accordion = bomCore.withSchema(AccordionBase, {
+  Group: AccordionGroup,
+  displayName: 'Accordion'
+});
 
 const Background = styled__default.default.div`
   position: absolute;
@@ -1440,14 +1523,16 @@ Button.displayName = 'Button';
 const Link = /*#__PURE__*/React__default.default.forwardRef((_a, forwardedRef) => {
   var {
       children,
+      href = '',
       passHref,
       legacyBehavior
     } = _a,
-    props = __rest(_a, ["children", "passHref", "legacyBehavior"]);
+    props = __rest(_a, ["children", "href", "passHref", "legacyBehavior"]);
   passHref = passHref === false ? false : true;
   legacyBehavior = legacyBehavior === false ? false : true;
   return jsxRuntime.jsx(NextLink__default.default, Object.assign({
     ref: forwardedRef,
+    href: href,
     passHref: passHref,
     legacyBehavior: legacyBehavior
   }, props, {
@@ -4299,7 +4384,7 @@ function getMediaItems(itemOrItems, options) {
         }
       };
     }
-    if (media.type === 'image') {
+    if (bomCore.resolveMediaType(media) === 'image') {
       const aspectRatio = typeof options.aspectRatio === 'string' ? parseFloat(options.aspectRatio) : options.aspectRatio;
       if (aspectRatio != null) {
         props.width = 800;
@@ -4311,7 +4396,7 @@ function getMediaItems(itemOrItems, options) {
     }
     return props;
   };
-  return items.map((media, m) => media.type === 'video' ? jsxRuntime.jsx("video", Object.assign({
+  return items.map((media, m) => bomCore.resolveMediaType(media) === 'video' ? jsxRuntime.jsx("video", Object.assign({
     playsInline: true,
     autoPlay: true,
     muted: true,
@@ -5042,37 +5127,80 @@ const MediaGallery = /*#__PURE__*/React.forwardRef((_a, ref) => {
 });
 MediaGallery.displayName = 'MediaGallery';
 
-const origin = process.env.NEXT_PUBLIC_URL;
+function resolveHref(href) {
+  const origin = process.env.NEXT_PUBLIC_URL;
+  return href.startsWith('http') ? href : `${origin}${href}`;
+}
 function Meta() {
-  var _a, _b, _c;
+  var _a, _b, _e;
   const page = bomMixerHooks.usePage();
+  const extra = bomMixerHooks.useExtra();
+  // title
+  let title = ((_a = page.meta) === null || _a === void 0 ? void 0 : _a.title) || page.title;
+  // description
+  let description = ((_b = page.meta) === null || _b === void 0 ? void 0 : _b.description) || page.abstract;
+  // prev / next
+  let relPrev = null;
+  let relNext = null;
+  if (bomMixerHooks.isPaginationInfo(extra.pagination)) {
+    const pagination = extra.pagination;
+    title = title + ` - ${pagination.page}`;
+    description = description + ` - ${pagination.page}`;
+    // !!! todo add resolvedUrl property to page change page.href with page.resolvedUrl
+    if (pagination.page > 1) {
+      const {
+        pathname,
+        query
+      } = bomMixerHooks.updateSearchParamsQs(page.href, {
+        pagination: {
+          page: pagination.page - 1
+        }
+      });
+      relPrev = `${pathname}?${query}`;
+    }
+    if (pagination.page < pagination.pages) {
+      const {
+        pathname,
+        query
+      } = bomMixerHooks.updateSearchParamsQs(page.href, {
+        pagination: {
+          page: pagination.page + 1
+        }
+      });
+      relNext = `${pathname}?${query}`;
+    }
+  }
+  // structuredData
+  const structuredData = bomMixerModels.resolveStructuredData(page);
   return jsxRuntime.jsxs(Head__default.default, {
     children: [jsxRuntime.jsx("title", {
-      children: (_a = page.meta) === null || _a === void 0 ? void 0 : _a.title
+      children: title
     }), jsxRuntime.jsx("meta", {
       name: "description",
-      content: (_b = page.meta) === null || _b === void 0 ? void 0 : _b.description
-    }), bomCore.isProduction ? jsxRuntime.jsx("meta", {
+      content: description
+    }), false  , bomCore.isProduction ? jsxRuntime.jsx("meta", {
       name: "robots",
-      content: ((_c = page.meta) === null || _c === void 0 ? void 0 : _c.robots) || 'index, follow'
+      content: ((_e = page.meta) === null || _e === void 0 ? void 0 : _e.robots) || 'index, follow'
     }) : jsxRuntime.jsx("meta", {
       name: "robots",
       content: "noindex, nofollow"
-    }), page.href && jsxRuntime.jsx("link", {
+    }), page.href != null && jsxRuntime.jsx("link", {
       rel: "canonical",
-      href: origin + page.href
+      href: resolveHref(page.href)
+    }), relPrev && jsxRuntime.jsx("link", {
+      rel: "prev",
+      href: resolveHref(relPrev)
+    }), relNext && jsxRuntime.jsx("link", {
+      rel: "next",
+      href: resolveHref(relNext)
     }), page.alternates && page.alternates.map(alternate => jsxRuntime.jsx("link", {
       rel: "alternate",
-      href: origin + alternate.id,
+      href: resolveHref(alternate.id),
       hrefLang: alternate.locale
     }, `${alternate.locale}-${alternate.market}`)), page.media && jsxRuntime.jsx("meta", {
       property: "og:image",
-      content: origin + page.media.src
-    }), jsxRuntime.jsx("link", {
-      rel: "alternate",
-      type: "application/rss+xml",
-      href: "/feed.xml"
-    }), jsxRuntime.jsx("link", {
+      content: resolveHref(page.media.src)
+    }), false , jsxRuntime.jsx("link", {
       rel: "apple-touch-icon",
       sizes: "180x180",
       href: "/apple-touch-icon.png"
@@ -5107,6 +5235,9 @@ function Meta() {
     }), jsxRuntime.jsx("meta", {
       name: "theme-color",
       content: "#000"
+    }), structuredData && jsxRuntime.jsx("script", {
+      type: "application/ld+json",
+      children: structuredData
     })]
   });
 }
@@ -6732,7 +6863,7 @@ const TabsBase = _a => {
     onChange && onChange(value);
   };
   const tabItemMouseOverHandler = event => {
-    if (!isGeistElement(event.target)) {
+    if (!isMixerElement(event.target)) {
       return;
     }
     setRect(event, () => ref.current);
@@ -20156,6 +20287,7 @@ exports.VariantsProvider = VariantsProvider;
 exports.accessibility = accessibility;
 exports.autocompleteVariants = autocompleteVariants;
 exports.buttonVariants = buttonVariants;
+exports.capitalize = capitalize;
 exports.checkboxVariants = checkboxVariants;
 exports.defaultVariants = defaultVariants;
 exports.eachMedia = eachMedia;
@@ -20172,14 +20304,21 @@ exports.getDrawerTransform = getDrawerTransform;
 exports.getFontVariantResponsive = getFontVariantResponsive;
 exports.getForm = getForm;
 exports.getGrid = getGrid;
+exports.getId = getId;
+exports.getReactNode = getReactNode;
 exports.getShortName = getShortName;
 exports.getVariant = getVariant;
 exports.getVariantKey = getVariantKey;
 exports.getVariantResponsive = getVariantResponsive;
+exports.hasChild = hasChild;
 exports.hasChildOfType = hasChildOfType;
 exports.inputVariants = inputVariants;
+exports.isBrowser = isBrowser;
+exports.isCSSNumberValue = isCSSNumberValue;
 exports.isChildElement = isChildElement;
 exports.isCssProp = isCssProp;
+exports.isMac = isMac;
+exports.isMixerElement = isMixerElement;
 exports.labelVariants = labelVariants;
 exports.mapChildsByType = mapChildsByType;
 exports.mediaBetween = mediaBetween;
@@ -20188,12 +20327,17 @@ exports.mediaMax = mediaMax;
 exports.mediaMin = mediaMin;
 exports.mediaOnly = mediaOnly;
 exports.mediaUp = mediaUp;
+exports.pickChild = pickChild;
+exports.pickChildByProps = pickChildByProps;
+exports.pickChildrenFirst = pickChildrenFirst;
 exports.radioCardVariants = radioCardVariants;
 exports.radioColorVariants = radioColorVariants;
 exports.radioOptionVariants = radioOptionVariants;
 exports.radioVariants = radioVariants;
 exports.ratingVariants = ratingVariants;
 exports.selectVariants = selectVariants;
+exports.setChildrenIndex = setChildrenIndex;
+exports.setChildrenProps = setChildrenProps;
 exports.shouldForwardProp = shouldForwardProp;
 exports.sizes = sizes;
 exports.textareaVariants = textareaVariants;