@onesy/ui-react 1.0.163 → 1.0.165

package/Append/Append.js

@@ -19,16 +19,10 @@ const valuesDefault = {
   init: true
 };
 const Append = props_ => {
-  var _props, _refs$root$current4;
+  var _theme$ui, _theme$ui2, _theme$elements, _props, _refs$root$current4;
   const theme = (0, _styleReact.useOnesyTheme)();
-  const props = _react.default.useMemo(() => {
-    var _theme$ui, _theme$ui2;
-    return _objectSpread(_objectSpread(_objectSpread({}, theme === null || theme === void 0 || (_theme$ui = theme.ui) === null || _theme$ui === void 0 || (_theme$ui = _theme$ui.elements) === null || _theme$ui === void 0 || (_theme$ui = _theme$ui.all) === null || _theme$ui === void 0 || (_theme$ui = _theme$ui.props) === null || _theme$ui === void 0 ? void 0 : _theme$ui.default), theme === null || theme === void 0 || (_theme$ui2 = theme.ui) === null || _theme$ui2 === void 0 || (_theme$ui2 = _theme$ui2.elements) === null || _theme$ui2 === void 0 || (_theme$ui2 = _theme$ui2.onesyAppend) === null || _theme$ui2 === void 0 || (_theme$ui2 = _theme$ui2.props) === null || _theme$ui2 === void 0 ? void 0 : _theme$ui2.default), props_);
-  }, [props_]);
-  const Portal = _react.default.useMemo(() => {
-    var _theme$elements;
-    return (theme === null || theme === void 0 || (_theme$elements = theme.elements) === null || _theme$elements === void 0 ? void 0 : _theme$elements.Portal) || _Portal.default;
-  }, [theme]);
+  const props = _objectSpread(_objectSpread(_objectSpread({}, theme === null || theme === void 0 || (_theme$ui = theme.ui) === null || _theme$ui === void 0 || (_theme$ui = _theme$ui.elements) === null || _theme$ui === void 0 || (_theme$ui = _theme$ui.all) === null || _theme$ui === void 0 || (_theme$ui = _theme$ui.props) === null || _theme$ui === void 0 ? void 0 : _theme$ui.default), theme === null || theme === void 0 || (_theme$ui2 = theme.ui) === null || _theme$ui2 === void 0 || (_theme$ui2 = _theme$ui2.elements) === null || _theme$ui2 === void 0 || (_theme$ui2 = _theme$ui2.onesyAppend) === null || _theme$ui2 === void 0 || (_theme$ui2 = _theme$ui2.props) === null || _theme$ui2 === void 0 ? void 0 : _theme$ui2.default), props_);
+  const Portal = (theme === null || theme === void 0 || (_theme$elements = theme.elements) === null || _theme$elements === void 0 ? void 0 : _theme$elements.Portal) || _Portal.default;
   const {
     open,
     portal = false,
@@ -76,13 +70,10 @@ const Append = props_ => {
   const anchorElement = anchorElement_ !== null && anchorElement_ !== void 0 && anchorElement_.current ? anchorElement_ === null || anchorElement_ === void 0 ? void 0 : anchorElement_.current : anchorElement_;
   if (anchorElement) refs.root.current = anchorElement;
   refs.props.current = props;
-  const onScroll = _react.default.useCallback(event => {
-    // Only if it's parent's scroll event
-    // if (event.target.contains(refs.root.current) && anchor === undefined) make();
-
+  const onScroll = () => {
     make();
-  }, [anchor]);
-  const observerMethod = _react.default.useCallback(mutations => {
+  };
+  const observerMethod = mutations => {
     for (const mutation of mutations) {
       if (mutation.target === refs.root.current ?
       // Root attributes or childList
@@ -92,10 +83,7 @@ const Append = props_ => {
         if (refs.anchor.current === undefined) make();
       }
     }
-  }, []);
-  const observerResizeMethod = _react.default.useCallback(() => {
-    if (refs.anchor.current === undefined) make();
-  }, []);
+  };
   _react.default.useEffect(() => {
     var _refs$root$current;
     const rootWindow = (0, _utils.isEnvironment)('browser') ? ((_refs$root$current = refs.root.current) === null || _refs$root$current === void 0 || (_refs$root$current = _refs$root$current.ownerDocument) === null || _refs$root$current === void 0 ? void 0 : _refs$root$current.defaultView) || window : undefined;
@@ -155,19 +143,19 @@ const Append = props_ => {
   // Element resize
   _react.default.useEffect(() => {
     // Resize
-    const observer = new MutationObserver(observerMethod);
+    const observer_0 = new MutationObserver(observerMethod);
     try {
       if (refs.element.current) {
-        observer.observe(refs.element.current, {
+        observer_0.observe(refs.element.current, {
           attributes: true,
           childList: true,
           subtree: true
         });
       }
-    } catch (error) {}
+    } catch (error_0) {}
     return () => {
       if (refs.element.current) {
-        observer.disconnect();
+        observer_0.disconnect();
       }
     };
   }, [anchor, refs.element.current]);
@@ -183,7 +171,7 @@ const Append = props_ => {
       if ((0, _utils.is)('function', refs.props.current.onUpdate)) refs.props.current.onUpdate(values);
     }
   }, [values]);
-  const getBoundingRect = _react.default.useCallback(elementHTML => new Promise(async (resolve, reject) => {
+  const getBoundingRect = elementHTML => new Promise(async (resolve, reject) => {
     if (!(elementHTML !== null && elementHTML !== void 0 && elementHTML.getBoundingClientRect)) return;
     let tries = 5;
     while (tries) {
@@ -192,13 +180,13 @@ const Append = props_ => {
       tries--;
       await (0, _utils.wait)(40);
     }
-  }), []);
+  });
   const getValues = async () => {
     var _ref;
     if (!((refs.root.current || refs.anchor.current) && refs.element.current)) return;
     const wrapperRect = await getBoundingRect((_ref = refs.root.current || refs.element.current) === null || _ref === void 0 ? void 0 : _ref.parentElement);
     if (!wrapperRect) return;
-    const resolve = () => {
+    const resolve_0 = () => {
       if (!anchor) return;
       if (!portal) {
         anchor.x = anchor.x - wrapperRect.x;
@@ -208,7 +196,7 @@ const Append = props_ => {
     };
 
     // Anchor relative to parent values
-    const anchor_ = resolve();
+    const anchor_ = resolve_0();
     const rect = {
       root: anchor_ || (await getBoundingRect(refs.root.current)),
       element: await getBoundingRect(refs.element.current)
@@ -242,7 +230,7 @@ const Append = props_ => {
     const valueMeasurements = valueMeasurements_ !== undefined ? valueMeasurements_ : await getValues();
     if (!valueMeasurements || valueMeasurements.rect.element.width === 0 && valueMeasurements.rect.element.height === 0) return;
     const rootDocument = (0, _utils.isEnvironment)('browser') ? ((_refs$root$current2 = refs.root.current) === null || _refs$root$current2 === void 0 ? void 0 : _refs$root$current2.ownerDocument) || window.document : undefined;
-    const wrapperRect = (overflow || switch_) && (refs.root.current || refs.element.current).parentElement.getBoundingClientRect();
+    const wrapperRect_0 = (overflow || switch_) && (refs.root.current || refs.element.current).parentElement.getBoundingClientRect();
     const scrollableParents = (0, _utils.element)(refs.root.current).parents().filter(item => {
       if (!(item instanceof Element)) return;
       const overflow_ = window.getComputedStyle(item).overflow;
@@ -259,10 +247,10 @@ const Append = props_ => {
       switch: switched
     } = value;
     const {
-      rect
+      rect: rect_0
     } = valueMeasurements;
     let {
-      rectOffset
+      rectOffset: rectOffset_0
     } = valueMeasurements;
 
     // We need both root and element refs
@@ -271,37 +259,37 @@ const Append = props_ => {
       x: 0,
       y: 0
     };
-    const rootX = portal ? rect.root.x : rectOffset.root.x;
-    const rootY = portal ? rect.root.y : rectOffset.root.y;
-    const rootBottom = portal ? rect.root.bottom : rectOffset.root.y + rect.root.height;
-    const rootRight = portal ? rect.root.right : rectOffset.root.x + rect.root.width;
+    const rootX = portal ? rect_0.root.x : rectOffset_0.root.x;
+    const rootY = portal ? rect_0.root.y : rectOffset_0.root.y;
+    const rootBottom = portal ? rect_0.root.bottom : rectOffset_0.root.y + rect_0.root.height;
+    const rootRight = portal ? rect_0.root.right : rectOffset_0.root.x + rect_0.root.width;
     const parent_ = (_ref2 = parentElement !== undefined ? parentElement : portal ? rootDocument.body : (_refs$root$current3 = refs.root.current) === null || _refs$root$current3 === void 0 ? void 0 : _refs$root$current3.parentElement) === null || _ref2 === void 0 ? void 0 : _ref2.getBoundingClientRect();
 
     // Top, Bottom
     if (['top', 'bottom'].includes(position)) {
       if (alignment === 'start') values_.x = rootX;
-      if (!alignment || alignment === 'center') values_.x = rootX + (rect.root.width - rect.element.width) / 2;
-      if (alignment === 'end') values_.x = rootX + rect.root.width - rect.element.width;
+      if (!alignment || alignment === 'center') values_.x = rootX + (rect_0.root.width - rect_0.element.width) / 2;
+      if (alignment === 'end') values_.x = rootX + rect_0.root.width - rect_0.element.width;
       if (position === 'top') {
-        values_.y = rootBottom - (parent_.height || 0) - offset[1] - rect.root.height;
-        if (inset) values_.y = rootBottom - (parent_.height || 0) - rect.root.height + rect.element.height + offset[1];
+        values_.y = rootBottom - (parent_.height || 0) - offset[1] - rect_0.root.height;
+        if (inset) values_.y = rootBottom - (parent_.height || 0) - rect_0.root.height + rect_0.element.height + offset[1];
       } else {
-        values_.y = rootY + offset[1] + rect.root.height;
-        if (inset) values_.y = rootY + rect.root.height - rect.element.height - offset[1];
+        values_.y = rootY + offset[1] + rect_0.root.height;
+        if (inset) values_.y = rootY + rect_0.root.height - rect_0.element.height - offset[1];
       }
     }
 
     // Left
     if (['left', 'right'].includes(position)) {
       if (alignment === 'start') values_.y = rootY;
-      if (!alignment || alignment === 'center') values_.y = rootY + (rect.root.height - rect.element.height) / 2;
-      if (alignment === 'end') values_.y = rootY + rect.root.height - rect.element.height;
+      if (!alignment || alignment === 'center') values_.y = rootY + (rect_0.root.height - rect_0.element.height) / 2;
+      if (alignment === 'end') values_.y = rootY + rect_0.root.height - rect_0.element.height;
       if (position === 'left') {
-        values_.x = rootRight - (parent_.width || 0) - offset[0] - rect.root.width;
-        if (inset) values_.x = rootRight - (parent_.width || 0) - rect.root.width + rect.element.width + offset[0];
+        values_.x = rootRight - (parent_.width || 0) - offset[0] - rect_0.root.width;
+        if (inset) values_.x = rootRight - (parent_.width || 0) - rect_0.root.width + rect_0.element.width + offset[0];
       } else {
-        values_.x = rootX + offset[0] + rect.root.width;
-        if (inset) values_.x = rootX + rect.root.width - rect.element.width - offset[0];
+        values_.x = rootX + offset[0] + rect_0.root.width;
+        if (inset) values_.x = rootX + rect_0.root.width - rect_0.element.width - offset[0];
       }
     }
 
@@ -317,53 +305,53 @@ const Append = props_ => {
       // or window push them to 0 value
       // only if that value doesn't unfollow them from the element
       // or unfollow them if unfollow is true
-      if (portal) rectOffset = rect;
+      if (portal) rectOffset_0 = rect_0;
       const top = portal ? rootDocument.documentElement.scrollTop : 0;
       const left = portal ? rootDocument.documentElement.scrollLeft : 0;
-      const rootY_ = !portal ? wrapperRect.y + rectOffset.root.y : rect.root.y;
-      const valueY = !portal ? wrapperRect.y + values_.y : values_.y;
-      const rootX_ = !portal ? wrapperRect.x + rectOffset.root.x : rect.root.x;
-      const valueX = !portal ? wrapperRect.x + values_.x : values_.x;
-      const wrapperRectY = !portal ? wrapperRect.y : 0;
-      const wrapperRectX = !portal ? wrapperRect.x : 0;
+      const rootY_ = !portal ? wrapperRect_0.y + rectOffset_0.root.y : rect_0.root.y;
+      const valueY = !portal ? wrapperRect_0.y + values_.y : values_.y;
+      const rootX_ = !portal ? wrapperRect_0.x + rectOffset_0.root.x : rect_0.root.x;
+      const valueX = !portal ? wrapperRect_0.x + values_.x : values_.x;
+      const wrapperRectY = !portal ? wrapperRect_0.y : 0;
+      const wrapperRectX = !portal ? wrapperRect_0.x : 0;
       if (['left', 'right'].includes(position)) {
         // All parents that are scrollable
         const valuesY = [values_.y];
         let result = values_.y;
         scrollableParents.forEach(parent => {
           const scrollParentRect = parent.getBoundingClientRect();
-          const scrollParentY = scrollParentRect.y - Math.abs(rect.root.y);
+          const scrollParentY = scrollParentRect.y - Math.abs(rect_0.root.y);
           const valueScrollParentY = valueY - scrollParentRect.y;
 
           // top
           if (valueY - top <= 0 + padding[1] || valueScrollParentY - top <= 0 + padding[1]) {
-            if (rootY_ + rect.root.height > 0 || unfollow) {
+            if (rootY_ + rect_0.root.height > 0 || unfollow) {
               const mathValues = [values_.y, top, scrollParentY, scrollParentRect.y - wrapperRectY + top, 0];
-              if (!portal) mathValues.push(rectOffset.root.y - rootY_);
+              if (!portal) mathValues.push(rectOffset_0.root.y - rootY_);
               values_.y = Math.max(...mathValues);
 
               // padding
-              const padding_ = values_.y > rectOffset.root.y + rect.root.height + top && unfollow ? paddingUnfollow : padding;
+              const padding_ = values_.y > rectOffset_0.root.y + rect_0.root.height + top && unfollow ? paddingUnfollow : padding;
               const scrollRoot = scrollParentRect.y - wrapperRectY >= 0;
               values_.y += (0, _utils.clamp)(Math.abs(values_.y - (scrollRoot ? scrollParentRect.y : 0) + wrapperRectY - padding_[1]), 0, padding_[1]);
-              if (!unfollow) values_.y = (0, _utils.clamp)(values_.y, Number.MIN_SAFE_INTEGER, rectOffset.root.y + rect.root.height + top);
-            } else values_.y = rectOffset.root.y + rect.root.height + top;
+              if (!unfollow) values_.y = (0, _utils.clamp)(values_.y, Number.MIN_SAFE_INTEGER, rectOffset_0.root.y + rect_0.root.height + top);
+            } else values_.y = rectOffset_0.root.y + rect_0.root.height + top;
             valuesY.push(values_.y);
             result = Math.max(...valuesY);
           }
 
           // bottom
-          if (valueY + rect.element.height - top >= window.innerHeight - padding[1] || values_.y + rect.element.height - top >= scrollParentRect.y + scrollParentRect.height - wrapperRectY - padding[1]) {
-            if (rect.root.y < window.innerHeight || rectOffset.root.y < scrollParentRect.y + scrollParentRect.height - wrapperRectY || unfollow) {
-              const mathValues = [values_.y, window.innerHeight - wrapperRectY - rect.element.height + top, scrollParentRect.y + scrollParentRect.height - wrapperRectY - rect.element.height + top];
-              values_.y = Math.abs(Math.min(...mathValues));
+          if (valueY + rect_0.element.height - top >= window.innerHeight - padding[1] || values_.y + rect_0.element.height - top >= scrollParentRect.y + scrollParentRect.height - wrapperRectY - padding[1]) {
+            if (rect_0.root.y < window.innerHeight || rectOffset_0.root.y < scrollParentRect.y + scrollParentRect.height - wrapperRectY || unfollow) {
+              const mathValues_0 = [values_.y, window.innerHeight - wrapperRectY - rect_0.element.height + top, scrollParentRect.y + scrollParentRect.height - wrapperRectY - rect_0.element.height + top];
+              values_.y = Math.abs(Math.min(...mathValues_0));
 
               // padding
-              const padding_ = values_.y < rectOffset.root.y - rect.element.height + top && unfollow ? paddingUnfollow : padding;
-              const scrollRoot = scrollParentRect.y - wrapperRectY >= 0;
-              values_.y -= (0, _utils.clamp)(Math.abs(values_.y - ((scrollRoot ? scrollParentRect.y + scrollParentRect.height : window.innerHeight) - wrapperRectY - rect.element.height - padding_[1])), 0, padding_[1]);
-              if (!unfollow) values_.y = (0, _utils.clamp)(values_.y, rectOffset.root.y - rect.element.height + top, Number.MAX_SAFE_INTEGER);
-            } else values_.y = rectOffset.root.y - rect.element.height + top;
+              const padding__0 = values_.y < rectOffset_0.root.y - rect_0.element.height + top && unfollow ? paddingUnfollow : padding;
+              const scrollRoot_0 = scrollParentRect.y - wrapperRectY >= 0;
+              values_.y -= (0, _utils.clamp)(Math.abs(values_.y - ((scrollRoot_0 ? scrollParentRect.y + scrollParentRect.height : window.innerHeight) - wrapperRectY - rect_0.element.height - padding__0[1])), 0, padding__0[1]);
+              if (!unfollow) values_.y = (0, _utils.clamp)(values_.y, rectOffset_0.root.y - rect_0.element.height + top, Number.MAX_SAFE_INTEGER);
+            } else values_.y = rectOffset_0.root.y - rect_0.element.height + top;
             valuesY.push(values_.y);
             result = Math.min(...valuesY);
           }
@@ -376,49 +364,49 @@ const Append = props_ => {
       if (['top', 'bottom'].includes(position)) {
         // All parents that are scrollable
         const valuesX = [values_.x];
-        let result = values_.x;
-        scrollableParents.forEach(parent => {
-          const scrollParentRect = parent.getBoundingClientRect();
-          const scrollParentX = scrollParentRect.x - Math.abs(rect.root.x);
-          const valueScrollParentX = valueX - scrollParentRect.x;
+        let result_0 = values_.x;
+        scrollableParents.forEach(parent_0 => {
+          const scrollParentRect_0 = parent_0.getBoundingClientRect();
+          const scrollParentX = scrollParentRect_0.x - Math.abs(rect_0.root.x);
+          const valueScrollParentX = valueX - scrollParentRect_0.x;
 
           // left
           if (valueX - left <= 0 + padding[0] || valueScrollParentX - left <= 0 + padding[0]) {
-            if (rootX_ + rect.root.width > 0 || unfollow) {
-              const mathValues = [values_.x, left, scrollParentX, scrollParentRect.x - wrapperRectX + left, 0];
-              if (!portal) mathValues.push(rectOffset.root.x - rootX_);
-              values_.x = Math.max(...mathValues);
+            if (rootX_ + rect_0.root.width > 0 || unfollow) {
+              const mathValues_1 = [values_.x, left, scrollParentX, scrollParentRect_0.x - wrapperRectX + left, 0];
+              if (!portal) mathValues_1.push(rectOffset_0.root.x - rootX_);
+              values_.x = Math.max(...mathValues_1);
 
               // padding
-              const padding_ = values_.x > rectOffset.root.x + rect.root.width + left && unfollow ? paddingUnfollow : padding;
-              const scrollRoot = scrollParentRect.x - wrapperRectX >= 0;
-              values_.x += (0, _utils.clamp)(Math.abs(values_.x - (scrollRoot ? scrollParentRect.x : 0) + wrapperRectX - padding_[0]), 0, padding_[0]);
-              if (!unfollow) values_.x = (0, _utils.clamp)(values_.x, Number.MIN_SAFE_INTEGER, rectOffset.root.x + rect.root.width + left);
-            } else values_.x = rectOffset.root.x + rect.root.width + left;
+              const padding__1 = values_.x > rectOffset_0.root.x + rect_0.root.width + left && unfollow ? paddingUnfollow : padding;
+              const scrollRoot_1 = scrollParentRect_0.x - wrapperRectX >= 0;
+              values_.x += (0, _utils.clamp)(Math.abs(values_.x - (scrollRoot_1 ? scrollParentRect_0.x : 0) + wrapperRectX - padding__1[0]), 0, padding__1[0]);
+              if (!unfollow) values_.x = (0, _utils.clamp)(values_.x, Number.MIN_SAFE_INTEGER, rectOffset_0.root.x + rect_0.root.width + left);
+            } else values_.x = rectOffset_0.root.x + rect_0.root.width + left;
             valuesX.push(values_.x);
-            result = Math.max(...valuesX);
+            result_0 = Math.max(...valuesX);
           }
 
           // right
-          if (valueX + rect.element.width - left >= window.innerWidth - padding[0] || values_.x + rect.element.width - left >= scrollParentRect.x + scrollParentRect.width - wrapperRectX - padding[0]) {
-            if (rect.root.x < window.innerWidth || rectOffset.root.x < scrollParentRect.x + scrollParentRect.width - wrapperRectX || unfollow) {
-              const mathValues = [values_.x, window.innerWidth - wrapperRectX - rect.element.width + left, scrollParentRect.x + scrollParentRect.width - wrapperRectX - rect.element.width + left];
-              values_.x = Math.abs(Math.min(...mathValues));
+          if (valueX + rect_0.element.width - left >= window.innerWidth - padding[0] || values_.x + rect_0.element.width - left >= scrollParentRect_0.x + scrollParentRect_0.width - wrapperRectX - padding[0]) {
+            if (rect_0.root.x < window.innerWidth || rectOffset_0.root.x < scrollParentRect_0.x + scrollParentRect_0.width - wrapperRectX || unfollow) {
+              const mathValues_2 = [values_.x, window.innerWidth - wrapperRectX - rect_0.element.width + left, scrollParentRect_0.x + scrollParentRect_0.width - wrapperRectX - rect_0.element.width + left];
+              values_.x = Math.abs(Math.min(...mathValues_2));
 
               // padding
-              const padding_ = values_.x < rectOffset.root.x - rect.element.width + left && unfollow ? paddingUnfollow : padding;
-              const scrollRoot = scrollParentRect.x - wrapperRectX >= 0;
-              values_.x -= (0, _utils.clamp)(Math.abs(values_.x - ((scrollRoot ? scrollParentRect.x + scrollParentRect.width : window.innerWidth) - wrapperRectX - rect.element.width - padding_[1])), 0, padding_[1]);
-              if (!unfollow) values_.x = (0, _utils.clamp)(values_.x, rectOffset.root.x - rect.element.width + left, Number.MAX_SAFE_INTEGER);
-            } else values_.x = rectOffset.root.x - rect.element.width + left;
+              const padding__2 = values_.x < rectOffset_0.root.x - rect_0.element.width + left && unfollow ? paddingUnfollow : padding;
+              const scrollRoot_2 = scrollParentRect_0.x - wrapperRectX >= 0;
+              values_.x -= (0, _utils.clamp)(Math.abs(values_.x - ((scrollRoot_2 ? scrollParentRect_0.x + scrollParentRect_0.width : window.innerWidth) - wrapperRectX - rect_0.element.width - padding__2[1])), 0, padding__2[1]);
+              if (!unfollow) values_.x = (0, _utils.clamp)(values_.x, rectOffset_0.root.x - rect_0.element.width + left, Number.MAX_SAFE_INTEGER);
+            } else values_.x = rectOffset_0.root.x - rect_0.element.width + left;
             valuesX.push(values_.x);
-            result = Math.min(...valuesX);
+            result_0 = Math.min(...valuesX);
           }
 
           // Reset
           values_.x = valuesX[0];
         });
-        values_.x = result;
+        values_.x = result_0;
       }
     }
 
@@ -428,16 +416,16 @@ const Append = props_ => {
       const rectValue = {
         element: {}
       };
-      if (position_ === 'top') rectValue.element.y = rect.root.y - offset[1] - rect.element.height;
-      if (position_ === 'bottom') rectValue.element.y = rect.root.y + rect.root.height + offset[1];
-      if (position_ === 'left') rectValue.element.x = rect.root.x - offset[0] - rect.element.width;
-      if (position_ === 'right') rectValue.element.x = rect.root.x + rect.root.width + offset[0];
-      const update_ = scrollableParents.some(parent => {
-        const rectParent = parent.getBoundingClientRect();
+      if (position_ === 'top') rectValue.element.y = rect_0.root.y - offset[1] - rect_0.element.height;
+      if (position_ === 'bottom') rectValue.element.y = rect_0.root.y + rect_0.root.height + offset[1];
+      if (position_ === 'left') rectValue.element.x = rect_0.root.x - offset[0] - rect_0.element.width;
+      if (position_ === 'right') rectValue.element.x = rect_0.root.x + rect_0.root.width + offset[0];
+      const update_ = scrollableParents.some(parent_1 => {
+        const rectParent = parent_1.getBoundingClientRect();
         if (position_ === 'top') return !(rectValue.element.y - (['top', 'bottom'].includes(position_) ? padding[0] : 0) >= 0 && rectValue.element.y - (['top', 'bottom'].includes(position_) ? padding[0] : 0) >= rectParent.y);
-        if (position_ === 'bottom') return !(rectValue.element.y + rect.element.height + (['top', 'bottom'].includes(position_) ? padding[0] : 0) <= window.innerHeight && rectValue.element.y + rect.element.height + (['top', 'bottom'].includes(position_) ? padding[0] : 0) <= rectParent.y + rectParent.height);
+        if (position_ === 'bottom') return !(rectValue.element.y + rect_0.element.height + (['top', 'bottom'].includes(position_) ? padding[0] : 0) <= window.innerHeight && rectValue.element.y + rect_0.element.height + (['top', 'bottom'].includes(position_) ? padding[0] : 0) <= rectParent.y + rectParent.height);
         if (position_ === 'left') return !(rectValue.element.x - (['left', 'right'].includes(position_) ? padding[1] : 0) >= 0 && rectValue.element.x - (['left', 'right'].includes(position_) ? padding[1] : 0) >= rectParent.x);
-        if (position_ === 'right') return !(rectValue.element.x + rect.element.width + (['left', 'right'].includes(position_) ? padding[1] : 0) <= window.innerWidth && rectValue.element.x + rect.element.width + (['left', 'right'].includes(position_) ? padding[1] : 0) <= rectParent.x + rectParent.width);
+        if (position_ === 'right') return !(rectValue.element.x + rect_0.element.width + (['left', 'right'].includes(position_) ? padding[1] : 0) <= window.innerWidth && rectValue.element.x + rect_0.element.width + (['left', 'right'].includes(position_) ? padding[1] : 0) <= rectParent.x + rectParent.width);
       });
       if (update_) {
         if (position_ === 'top') newPosition = 'bottom';
@@ -459,11 +447,11 @@ const Append = props_ => {
       init: false
     }, values_);
     if ((0, _utils.is)('function', refs.additional.current)) {
-      refs.values.current = _objectSpread(_objectSpread({}, refs.values.current), additional(rect, rectOffset));
+      refs.values.current = _objectSpread(_objectSpread({}, refs.values.current), additional(rect_0, rectOffset_0));
     }
     if (portal) {
       const paddingX = padding[1] || 0;
-      refs.values.current.x = (0, _utils.clamp)(refs.values.current.x, paddingX, window.innerWidth - rect.element.width - paddingX);
+      refs.values.current.x = (0, _utils.clamp)(refs.values.current.x, paddingX, window.innerWidth - rect_0.element.width - paddingX);
     }
 
     // Update
@@ -491,22 +479,22 @@ const Append = props_ => {
     rootDocumentElement.body.style.margin = rootDocumentElement.body.style.margin || '0';
   }
   return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, children && /*#__PURE__*/_react.default.cloneElement(children, {
-    ref: item => {
+    ref: item_0 => {
       if (children.ref) {
-        if ((0, _utils.is)('function', children.ref)) children.ref(item);else children.ref.current = item;
+        if ((0, _utils.is)('function', children.ref)) children.ref(item_0);else children.ref.current = item_0;
       }
-      refs.root.current = item;
+      refs.root.current = item_0;
     }
   }), open && (children || anchorElement || anchor) && /*#__PURE__*/_react.default.createElement(PortalComponent, PortalComponentProps, (0, _utils.is)('function', element) ? element({
     ref: refs.element,
     values,
     style
   }) : /*#__PURE__*/_react.default.cloneElement(element, {
-    ref: item => {
+    ref: item_1 => {
       if (element !== null && element !== void 0 && element.ref) {
-        if ((0, _utils.is)('function', element.ref)) element.ref(item);else element.ref.current = item;
+        if ((0, _utils.is)('function', element.ref)) element.ref(item_1);else element.ref.current = item_1;
       }
-      refs.element.current = item;
+      refs.element.current = item_1;
     },
     style
   })));

package/AreaChart/AreaChart.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 import { IChart } from '../Chart/Chart';
-export type IAreaChart = IChart & {
+export declare type IAreaChart = IChart & {
     smooth?: boolean;
     smoothRatio?: number;
     linearGradient?: boolean;

package/AreaChart/AreaChart.js

@@ -8,6 +8,7 @@ exports.default = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _compilerRuntime = require("react/compiler-runtime");
 var _react = _interopRequireDefault(require("react"));
 var _utils = require("@onesy/utils");
 var _styleReact = require("@onesy/style-react");
@@ -23,19 +24,12 @@ const useStyle = (0, _styleReact.style)(theme => ({
   name: 'onesy-AreaChart'
 });
 const AreaChart = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
+  var _theme$ui, _theme$ui2, _theme$elements, _theme$elements2;
+  const $ = (0, _compilerRuntime.c)(7);
   const theme = (0, _styleReact.useOnesyTheme)();
-  const props = _react.default.useMemo(() => {
-    var _theme$ui, _theme$ui2;
-    return _objectSpread(_objectSpread(_objectSpread({}, theme === null || theme === void 0 || (_theme$ui = theme.ui) === null || _theme$ui === void 0 || (_theme$ui = _theme$ui.elements) === null || _theme$ui === void 0 || (_theme$ui = _theme$ui.all) === null || _theme$ui === void 0 || (_theme$ui = _theme$ui.props) === null || _theme$ui === void 0 ? void 0 : _theme$ui.default), theme === null || theme === void 0 || (_theme$ui2 = theme.ui) === null || _theme$ui2 === void 0 || (_theme$ui2 = _theme$ui2.elements) === null || _theme$ui2 === void 0 || (_theme$ui2 = _theme$ui2.onesyAreaChart) === null || _theme$ui2 === void 0 || (_theme$ui2 = _theme$ui2.props) === null || _theme$ui2 === void 0 ? void 0 : _theme$ui2.default), props_);
-  }, [props_]);
-  const Chart = _react.default.useMemo(() => {
-    var _theme$elements;
-    return (theme === null || theme === void 0 || (_theme$elements = theme.elements) === null || _theme$elements === void 0 ? void 0 : _theme$elements.Chart) || _Chart.default;
-  }, [theme]);
-  const AreaChartItem = _react.default.useMemo(() => {
-    var _theme$elements2;
-    return (theme === null || theme === void 0 || (_theme$elements2 = theme.elements) === null || _theme$elements2 === void 0 ? void 0 : _theme$elements2.AreaChartItem) || _AreaChartItem.default;
-  }, [theme]);
+  const props = _objectSpread(_objectSpread(_objectSpread({}, theme === null || theme === void 0 || (_theme$ui = theme.ui) === null || _theme$ui === void 0 || (_theme$ui = _theme$ui.elements) === null || _theme$ui === void 0 || (_theme$ui = _theme$ui.all) === null || _theme$ui === void 0 || (_theme$ui = _theme$ui.props) === null || _theme$ui === void 0 ? void 0 : _theme$ui.default), theme === null || theme === void 0 || (_theme$ui2 = theme.ui) === null || _theme$ui2 === void 0 || (_theme$ui2 = _theme$ui2.elements) === null || _theme$ui2 === void 0 || (_theme$ui2 = _theme$ui2.onesyAreaChart) === null || _theme$ui2 === void 0 || (_theme$ui2 = _theme$ui2.props) === null || _theme$ui2 === void 0 ? void 0 : _theme$ui2.default), props_);
+  const Chart = (theme === null || theme === void 0 || (_theme$elements = theme.elements) === null || _theme$elements === void 0 ? void 0 : _theme$elements.Chart) || _Chart.default;
+  const AreaChartItem = (theme === null || theme === void 0 || (_theme$elements2 = theme.elements) === null || _theme$elements2 === void 0 ? void 0 : _theme$elements2.AreaChartItem) || _AreaChartItem.default;
   const {
       values,
       className
@@ -44,13 +38,28 @@ const AreaChart = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
   const {
     classes
   } = useStyle();
-  return /*#__PURE__*/_react.default.createElement(Chart, (0, _extends2.default)({
-    ref: ref,
-    values: values,
-    className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('AreaChart', theme) && ['onesy-AreaChart-root'], className, classes.root])
-  }, other), (0, _utils.is)('array', values) && values.map((item, index) => /*#__PURE__*/_react.default.createElement(AreaChartItem, (0, _extends2.default)({
+  const t0 = (0, _styleReact.classNames)([(0, _utils2.staticClassName)("AreaChart", theme) && ["onesy-AreaChart-root"], className, classes.root]);
+  const t1 = (0, _utils.is)("array", values) && values.map((item, index) => /*#__PURE__*/_react.default.createElement(AreaChartItem, (0, _extends2.default)({
     key: index
-  }, item))));
+  }, item)));
+  let t2;
+  if ($[0] !== Chart || $[1] !== other || $[2] !== ref || $[3] !== t0 || $[4] !== t1 || $[5] !== values) {
+    t2 = /*#__PURE__*/_react.default.createElement(Chart, (0, _extends2.default)({
+      ref: ref,
+      values: values,
+      className: t0
+    }, other), t1);
+    $[0] = Chart;
+    $[1] = other;
+    $[2] = ref;
+    $[3] = t0;
+    $[4] = t1;
+    $[5] = values;
+    $[6] = t2;
+  } else {
+    t2 = $[6];
+  }
+  return t2;
 });
 AreaChart.displayName = 'onesy-AreaChart';
 var _default = exports.default = AreaChart;

package/AreaChartItem/AreaChartItem.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
 import { TMethod } from '@onesy/models';
 import { IChart, IChartValueValues } from '../Chart/Chart';
-export type IAreaChartItem = IChart & {
+export declare type IAreaChartItem = IChart & {
     name?: string;
     refs?: {
         wrapper?: HTMLElement;