@onepercentio/one-ui 0.19.5 → 0.19.7

package/dist/components/AnchoredTooltip/AnchoredTooltip.d.ts

@@ -18,7 +18,11 @@ export declare enum AnchoredTooltipAlignment {
     CENTER = 1,
     RIGHT = 2
 }
-export declare function updateTooltipPosition(tooltipRef: HTMLDivElement, anchorRef: HTMLElement, limitToViewport?: boolean, alignment?: AnchoredTooltipAlignment): {
+export declare enum AnchoredTooltipAnchor {
+    TOP = 0,
+    BOTTOM = 1
+}
+export declare function updateTooltipPosition(tooltipRef: HTMLDivElement, anchorRef: HTMLElement, limitToViewport?: boolean, alignment?: AnchoredTooltipAlignment, anchorTo?: AnchoredTooltipAnchor): {
     shouldAnchorToBottom: boolean;
 };
 declare const _default: React.ForwardRefExoticComponent<Props & React.RefAttributes<{

package/dist/components/AnchoredTooltip/AnchoredTooltip.js

@@ -4,7 +4,7 @@ function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" =
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = exports.AnchoredTooltipAlignment = void 0;
+exports.default = exports.AnchoredTooltipAnchor = exports.AnchoredTooltipAlignment = void 0;
 exports.updateTooltipPosition = updateTooltipPosition;
 var _react = _interopRequireWildcard(require("react"));
 var _OneUIProvider = require("../../context/OneUIProvider");
@@ -33,10 +33,17 @@ let AnchoredTooltipAlignment = /*#__PURE__*/function (AnchoredTooltipAlignment)
   return AnchoredTooltipAlignment;
 }({});
 exports.AnchoredTooltipAlignment = AnchoredTooltipAlignment;
+let AnchoredTooltipAnchor = /*#__PURE__*/function (AnchoredTooltipAnchor) {
+  AnchoredTooltipAnchor[AnchoredTooltipAnchor["TOP"] = 0] = "TOP";
+  AnchoredTooltipAnchor[AnchoredTooltipAnchor["BOTTOM"] = 1] = "BOTTOM";
+  return AnchoredTooltipAnchor;
+}({});
+exports.AnchoredTooltipAnchor = AnchoredTooltipAnchor;
 function calculateTooltipFromAnchor(anchorRef, tooltipRef, containInViewport) {
   let alignTo = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : AnchoredTooltipAlignment.CENTER;
+  let anchorTo = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : AnchoredTooltipAnchor.TOP;
   const anchorPosition = getPositionOnViewport(anchorRef);
-  const shouldAnchorToBottom = tooltipRef.clientHeight > anchorPosition.top;
+  const shouldAnchorToBottom = anchorTo === AnchoredTooltipAnchor.BOTTOM || tooltipRef.clientHeight > anchorPosition.top;
   let top = anchorPosition.top - tooltipRef.clientHeight;
 
   /**
@@ -85,7 +92,8 @@ function calculateTooltipFromAnchor(anchorRef, tooltipRef, containInViewport) {
 function updateTooltipPosition(tooltipRef, anchorRef) {
   let limitToViewport = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : true;
   let alignment = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : AnchoredTooltipAlignment.CENTER;
-  const _calculateTooltipFrom = calculateTooltipFromAnchor(anchorRef, tooltipRef, limitToViewport, alignment),
+  let anchorTo = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : AnchoredTooltipAnchor.TOP;
+  const _calculateTooltipFrom = calculateTooltipFromAnchor(anchorRef, tooltipRef, limitToViewport, alignment, anchorTo),
     top = _calculateTooltipFrom.top,
     left = _calculateTooltipFrom.left,
     shouldAnchorToBottom = _calculateTooltipFrom.shouldAnchorToBottom,

package/dist/components/Collapsable/Collapsable.d.ts

@@ -1,5 +1,5 @@
 import React from "react";
-import { AnchoredTooltipAlignment } from "../AnchoredTooltip/AnchoredTooltip";
+import { AnchoredTooltipAlignment, AnchoredTooltipAnchor } from "../AnchoredTooltip/AnchoredTooltip";
 declare class _CollapsableInterface {
     _id: string;
     constructor(id: string);
@@ -39,6 +39,7 @@ declare const _default: React.ForwardRefExoticComponent<(React.PropsWithChildren
 } | {
     mode: "float";
     alignTo: AnchoredTooltipAlignment;
+    anchorTo?: AnchoredTooltipAnchor | undefined;
 })> & Omit<React.HTMLAttributes<HTMLDivElement>, "title">) & React.RefAttributes<{
     redimension: () => void;
 }>>;

package/dist/components/Collapsable/Collapsable.js

@@ -62,7 +62,7 @@ function Collapsable(_ref, ref) {
       el.parentElement.style.position = "relative";
       if (mode === "float") {
         el.style.minHeight = el.style.height;
-        const _updateTooltipPositio = (0, _AnchoredTooltip.updateTooltipPosition)(el, toggleRef.current, true, "alignTo" in props ? props.alignTo : _AnchoredTooltip.AnchoredTooltipAlignment.CENTER),
+        const _updateTooltipPositio = (0, _AnchoredTooltip.updateTooltipPosition)(el, toggleRef.current, true, "alignTo" in props ? props.alignTo : _AnchoredTooltip.AnchoredTooltipAlignment.CENTER, "anchorTo" in props ? props.anchorTo : undefined),
           shouldAnchorToBottom = _updateTooltipPositio.shouldAnchorToBottom;
         el.style.minHeight = "";
         if (!shouldAnchorToBottom) {

package/dist/components/OrderableList/OrderableList.js

@@ -10,6 +10,7 @@ exports.useOrderableEvents = useOrderableEvents;
 exports.useOrderableListAnchor = useOrderableListAnchor;
 var _throttle = _interopRequireDefault(require("lodash/throttle"));
 var _UncontrolledTransition = _interopRequireDefault(require("../UncontrolledTransition"));
+var _TransitionModule = _interopRequireDefault(require("../Transition/Transition.module.scss"));
 var _react = _interopRequireWildcard(require("react"));
 var _useHero2 = _interopRequireDefault(require("../../hooks/useHero"));
 var _AnimatedEntrance = _interopRequireDefault(require("../AnimatedEntrance"));
@@ -27,16 +28,16 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
 function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _iterableToArrayLimit(arr, i) { var _i = null == arr ? null : "undefined" != typeof Symbol && arr[Symbol.iterator] || arr["@@iterator"]; if (null != _i) { var _s, _e, _x, _r, _arr = [], _n = !0, _d = !1; try { if (_x = (_i = _i.call(arr)).next, 0 === i) { if (Object(_i) !== _i) return; _n = !1; } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0); } catch (err) { _d = !0, _e = err; } finally { try { if (!_n && null != _i.return && (_r = _i.return(), Object(_r) !== _r)) return; } finally { if (_d) throw _e; } } return _arr; } }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
 function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
 function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
 function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
-function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
-function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
-function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
 function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
-function _iterableToArrayLimit(arr, i) { var _i = null == arr ? null : "undefined" != typeof Symbol && arr[Symbol.iterator] || arr["@@iterator"]; if (null != _i) { var _s, _e, _x, _r, _arr = [], _n = !0, _d = !1; try { if (_x = (_i = _i.call(arr)).next, 0 === i) { if (Object(_i) !== _i) return; _n = !1; } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0); } catch (err) { _d = !0, _e = err; } finally { try { if (!_n && null != _i.return && (_r = _i.return(), Object(_r) !== _r)) return; } finally { if (_d) throw _e; } } return _arr; } }
-function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 const OrderableListContext = /*#__PURE__*/(0, _react.createContext)(null);
@@ -65,29 +66,34 @@ function OrderableList(_ref) {
     reorderingClassName = _ref.reorderingClassName,
     cloneClassName = _ref.cloneClassName,
     props = _objectWithoutProperties(_ref, _excluded);
+  const availableKeys = children.map(function (a) {
+    return a.key;
+  });
+  const availableKeysDep = availableKeys.join(",");
+  const initializeOrder = (0, _react.useCallback)(function () {
+    const missingOrderKeys = "keyOrder" in props && props.keyOrder ? availableKeys.filter(function (a) {
+      return !props.keyOrder.includes(a);
+    }) : [];
+    return ("keyOrder" in props && props.keyOrder ? [].concat(_toConsumableArray(props.keyOrder), _toConsumableArray(missingOrderKeys)) : undefined) || availableKeys;
+  }, [availableKeysDep, props.keyOrder]);
   const _useRef = (0, _react.useRef)([]),
     anchorsList = _useRef.current;
   const eventEmitter = (0, _useEvents.default)();
   const currentClone = (0, _react.useRef)(null);
   const currentWorkingKey = (0, _react.useRef)();
-  const availableKeys = children.map(function (a) {
-    return a.key;
-  });
   const rootRef = (0, _react.useRef)(null);
-  const _useState = (0, _react.useState)(function () {
-      const missingOrderKeys = "keyOrder" in props && props.keyOrder ? availableKeys.filter(function (a) {
-        return !props.keyOrder.includes(a);
-      }) : [];
-      return ("keyOrder" in props && props.keyOrder ? [].concat(_toConsumableArray(props.keyOrder), _toConsumableArray(missingOrderKeys)) : undefined) || availableKeys;
-    }),
+  const _useState = (0, _react.useState)(initializeOrder),
     _useState2 = _slicedToArray(_useState, 2),
     _order = _useState2[0],
     setOrder = _useState2[1];
+  (0, _react.useEffect)(function () {
+    return setOrder(initializeOrder());
+  }, [initializeOrder]);
   const order = (0, _react.useMemo)(function () {
     return ("currentOrder" in props ? props.currentOrder || _order : _order).filter(function (o) {
       return o.includes(";") || availableKeys.includes(o);
     });
-  }, [props.currentOrder, _order]);
+  }, [props.currentOrder, _order, availableKeysDep]);
   const cleanOrder = (0, _react.useMemo)(function () {
     return order.map(function (a) {
       return a.split(";")[0];
@@ -96,9 +102,13 @@ function OrderableList(_ref) {
   const orderId = (0, _react.useMemo)(function () {
     return "key-" + cleanOrder.join("");
   }, [cleanOrder]);
+  function rootEl() {
+    if (mode === OrderableListReorderMode.TWO_DIMENSIONS) return rootRef.current.lastElementChild.lastElementChild;
+    return rootRef.current;
+  }
   const findParentElement = function findParentElement(target) {
     let parent = target;
-    while (parent.parentElement !== rootRef.current) {
+    while (parent.parentElement !== rootEl()) {
       if (parent.parentElement === null) break;
       parent = parent.parentElement;
     }
@@ -106,7 +116,7 @@ function OrderableList(_ref) {
     return parent;
   };
   (0, _react.useLayoutEffect)(function () {
-    if (shrinkToOnOrder) rootRef.current.style.setProperty("--shrink-to", "".concat(shrinkToOnOrder, "px"));
+    if (shrinkToOnOrder) rootEl().style.setProperty("--shrink-to", "".concat(shrinkToOnOrder, "px"));
   }, [shrinkToOnOrder]);
   const calculateReordering = (0, _react.useMemo)(function () {
     return (0, _throttle.default)(function (e, els, currentOrder) {
@@ -117,11 +127,31 @@ function OrderableList(_ref) {
       const isDraggingOwnElement = currentWorkingKey.current === keyOfTheOverElement;
       if (indexOfKeyInCleanOrder === -1 || keyOfTheOverElement === undefined) return;
       if (!isDraggingOwnElement) {
-        const distanceFromTop = e.offsetY;
-        const heightOfEl = parent.clientHeight;
-        const offset = heightOfEl * 0.25;
-        const isAfter = distanceFromTop > heightOfEl - offset;
-        const isBefore = distanceFromTop < offset;
+        const _ref2 = function () {
+            if (mode === OrderableListReorderMode.TWO_DIMENSIONS) {
+              const distanceFromLeft = e.offsetX;
+              const widthOfEl = parent.clientWidth;
+              const offset = widthOfEl * 0.25;
+              const isAfter = distanceFromLeft > widthOfEl - offset;
+              const isBefore = distanceFromLeft < offset;
+              return {
+                isAfter: isAfter,
+                isBefore: isBefore
+              };
+            } else {
+              const distanceFromTop = e.offsetY;
+              const heightOfEl = parent.clientHeight;
+              const offset = heightOfEl * 0.25;
+              const isAfter = distanceFromTop > heightOfEl - offset;
+              const isBefore = distanceFromTop < offset;
+              return {
+                isAfter: isAfter,
+                isBefore: isBefore
+              };
+            }
+          }(),
+          isAfter = _ref2.isAfter,
+          isBefore = _ref2.isBefore;
         const checkIfCanMove = function checkIfCanMove(keyOfOverElement) {
           return keyOfOverElement === undefined || keyOfOverElement !== currentWorkingKey.current;
         };
@@ -145,15 +175,29 @@ function OrderableList(_ref) {
     }, 1000 / 60);
   }, []);
   (0, _react.useEffect)(function () {
-    const els = Array.from(rootRef.current.children);
-    const calculateReorderingCall = function calculateReorderingCall(e) {
-      const els = Array.from(rootRef.current.children);
-      calculateReordering(e, els, cleanOrder);
-    };
-    for (let el of els) el.addEventListener("mousemove", calculateReorderingCall);
-    return function () {
-      for (let el of els) el.removeEventListener("mousemove", calculateReorderingCall);
-    };
+    function registerListeners() {
+      const els = Array.from(rootEl().children);
+      const calculateReorderingCall = function calculateReorderingCall(e) {
+        const els = Array.from(rootEl().children);
+        calculateReordering(e, els, cleanOrder);
+      };
+      for (let el of els) el.addEventListener("mousemove", calculateReorderingCall);
+      return function () {
+        for (let el of els) el.removeEventListener("mousemove", calculateReorderingCall);
+      };
+    }
+    if (mode === OrderableListReorderMode.VERTICAL) {
+      return registerListeners();
+    } else {
+      let unsubscribe;
+      let timeout = setTimeout(function () {
+        unsubscribe = registerListeners();
+      }, 250);
+      return function () {
+        clearTimeout(timeout);
+        if (unsubscribe) unsubscribe();
+      };
+    }
   }, [cleanOrder]);
   (0, _react.useEffect)(function () {
     if ("onChangeKeyOrder" in props) props.onChangeKeyOrder(cleanKeys(_order));
@@ -162,12 +206,12 @@ function OrderableList(_ref) {
   (0, _react.useEffect)(function () {
     cleanOrderRef.current = cleanOrder;
   }, [cleanOrder]);
-  const onAnchorClick = (0, _react.useCallback)(function (_ref2) {
-    let anchor = _ref2.target;
+  const onAnchorClick = (0, _react.useCallback)(function (_ref3) {
+    let anchor = _ref3.target;
     let offset;
     const orderableListItemForAnchor = findParentElement(anchor);
     const box = orderableListItemForAnchor.getBoundingClientRect();
-    const els = Array.from(rootRef.current.children);
+    const els = Array.from(rootEl().children);
     const elIndex = els.indexOf(orderableListItemForAnchor);
     const clone = orderableListItemForAnchor.cloneNode(true);
     currentClone.current = clone;
@@ -186,12 +230,12 @@ function OrderableList(_ref) {
     orderableListItemForAnchor.classList.add(_OrderableListModule.default.currentOrdering);
     orderableListItemForAnchor.classList.remove(_OrderableListModule.default.visible);
     const movementControl = function movementControl(e) {
-      const _ref3 = "touches" in e ? {
+      const _ref4 = "touches" in e ? {
           x: e.touches[0].pageX,
           y: e.touches[0].pageY
         } : e,
-        x1 = _ref3.x,
-        y1 = _ref3.y;
+        x1 = _ref4.x,
+        y1 = _ref4.y;
       if (!offset) offset = [x1 - box.left, y1 - box.top];
       const _offset = offset,
         _offset2 = _slicedToArray(_offset, 2),
@@ -212,18 +256,18 @@ function OrderableList(_ref) {
       {
         let cleanUp = function cleanUp() {
           if (shrinkToOnOrder) {
-            rootRef.current.style.removeProperty("padding-top");
-            rootRef.current.style.removeProperty("min-height");
+            rootEl().style.removeProperty("padding-top");
+            rootEl().style.removeProperty("min-height");
           }
           eventEmitter.dispatcher("order-stop");
-          rootRef.current.classList.remove(_OrderableListModule.default.ordering);
-          if (reorderingClassName) rootRef.current.classList.remove(reorderingClassName);
+          rootEl().classList.remove(_OrderableListModule.default.ordering);
+          if (reorderingClassName) rootEl().classList.remove(reorderingClassName);
           for (let el of els) el.classList.remove(_OrderableListModule.default.visible);
           clone.remove();
           currentClone.current = null;
           for (let el of Array.from(elInvisible.children)) el.style.height = "";
         };
-        const els = Array.from(rootRef.current.children);
+        const els = Array.from(rootEl().children);
         const elInvisible = els.find(function (a) {
           return !a.classList.contains(_OrderableListModule.default.visible) && a.style.maxHeight !== "0px";
         });
@@ -259,13 +303,13 @@ function OrderableList(_ref) {
       const targetHeight = elIndex * shrinkToOnOrder;
       const currentHeight = orderableListItemForAnchor.offsetTop - els[0].offsetTop;
       const paddingTop = currentHeight - targetHeight;
-      rootRef.current.style.paddingTop = "".concat(paddingTop, "px");
-      rootRef.current.style.minHeight = "".concat(rootRef.current.clientHeight, "px");
+      rootEl().style.paddingTop = "".concat(paddingTop, "px");
+      rootEl().style.minHeight = "".concat(rootEl().clientHeight, "px");
     }
     orderableListItemForAnchor.style.visibility = "hidden";
     orderableListItemForAnchor.classList.remove(_OrderableListModule.default.visible);
-    rootRef.current.classList.add(_OrderableListModule.default.ordering);
-    if (reorderingClassName) rootRef.current.classList.add(reorderingClassName);
+    rootEl().classList.add(_OrderableListModule.default.ordering);
+    if (reorderingClassName) rootEl().classList.add(reorderingClassName);
     currentWorkingKey.current = cleanOrderRef.current[elIndex];
     eventEmitter.dispatcher("order-start");
     window.document.body.classList.add(_OrderableListModule.default.unselectable);
@@ -276,7 +320,7 @@ function OrderableList(_ref) {
   }, []);
   (0, _react.useLayoutEffect)(function () {
     if (currentClone.current) {
-      const els = Array.from(rootRef.current.children);
+      const els = Array.from(rootEl().children);
       const elInvisible = els.find(function (a) {
         return !a.classList.contains(_OrderableListModule.default.visible) && a.style.maxHeight !== "0px";
       });
@@ -299,7 +343,7 @@ function OrderableList(_ref) {
     });
   });
   (0, _react.useLayoutEffect)(function () {
-    rootRef.current.addEventListener("touchstart", function (e) {
+    rootEl().addEventListener("touchstart", function (e) {
       const relatedAnchor = anchorsList.find(function (anchor) {
         return anchor.contains(e.target);
       });
@@ -309,7 +353,7 @@ function OrderableList(_ref) {
           target: relatedAnchor
         });
         const moveCb = (0, _throttle.default)(function () {
-          const els = Array.from(rootRef.current.children);
+          const els = Array.from(rootEl().children);
           const currentElementIdx = els.findIndex(function (c) {
             const rect = c === null || c === void 0 ? void 0 : c.getBoundingClientRect();
             if (!rect) return false;
@@ -360,7 +404,17 @@ function OrderableList(_ref) {
     className: "".concat(_OrderableListModule.default.root, " ").concat(className, " ").concat(shrinkToOnOrder ? _OrderableListModule.default.shrinkable : "")
   }, toSpread), mode === OrderableListReorderMode.VERTICAL ? /*#__PURE__*/_react.default.createElement(_AnimatedEntrance.default, null, childrenToRender) : /*#__PURE__*/_react.default.createElement(_UncontrolledTransition.default, {
     className: _OrderableListModule.default.transition,
-    transitionType: _Transition.TransitionAnimationTypes.FADE,
+    transitionType: _Transition.TransitionAnimationTypes.CUSTOM,
+    config: {
+      backward: {
+        elementEntering: "",
+        elementExiting: ""
+      },
+      forward: {
+        elementEntering: _OrderableListModule.default.stubEntering,
+        elementExiting: _TransitionModule.default.fadeOut
+      }
+    },
     contentClassName: "".concat(className)
   }, /*#__PURE__*/_react.default.createElement(_react.Fragment, {
     key: orderId
@@ -375,15 +429,18 @@ function OrderableList(_ref) {
     }, a);
   })))));
 }
-function HeroWrapper(_ref5) {
-  let children = _ref5.children,
-    id = _ref5.id;
+function HeroWrapper(_ref6) {
+  let children = _ref6.children,
+    id = _ref6.id;
   const _useHero = (0, _useHero2.default)(id, undefined, {
       onHeroStart: function onHeroStart(_c, _o, t) {
         t.querySelectorAll("img").forEach(function (img) {
           return img.style.visibility = "hidden";
         });
       },
+      onHeroCloned: function onHeroCloned() {
+        // if (!clone.classList.contains(Styles.visible)) clone.style.opacity = "0";
+      },
       onHeroEnd: function onHeroEnd() {
         if (heroRef.current) heroRef.current.querySelectorAll("img").forEach(function (img) {
           return img.style.visibility = "";

package/dist/components/OrderableList/OrderableList.module.scss

@@ -64,14 +64,35 @@ $fast: var(--orderable-list--speed);
 .transition {
   width: 100%;
   align-items: flex-start !important;
+  overflow: visible !important;
   > * {
     flex-direction: row !important;
     flex-wrap: wrap;
-    &:first-child {
-      visibility: hidden;
-    }
+    // &:first-child {
+    //   visibility: hidden;
+    // }
     &:last-child {
       visibility: visible;
     }
   }
 }
+
+div.stub {
+  animation-name: stub;
+  position: absolute;
+  pointer-events: none;
+  opacity: 0 !important;
+}
+
+div.stubEntering {
+  animation-name: stub;
+  z-index: -1;
+}
+@keyframes stub {
+  0% {
+    opacity: 1;
+  }
+  100% {
+    opacity: 1;
+  }
+}

package/dist/components/Select/Select.js

@@ -103,7 +103,8 @@ function Select(_ref) {
     className: "".concat(otherProps.disabled ? "disabled" : "", " ").concat(rootClassName),
     contentClassName: "".concat(_SelectModule.default.optionsContainer, " ").concat(dropdownClassNames.dropdown),
     alignTo: alignTo,
-    ref: collapsableRef
+    ref: collapsableRef,
+    anchorTo: _AnchoredTooltip.AnchoredTooltipAnchor.BOTTOM
   }, /*#__PURE__*/_react.default.createElement("div", {
     className: _SelectModule.default.items,
     onClick: function onClick(e) {

package/dist/hooks/useHero.d.ts

@@ -26,6 +26,8 @@ export default function useHero(id: string, options?: Partial<{
      * Usefull for triggering secondary animations
      */
     onHeroEnd?: () => void;
+    /** Do somethign with the clone before it goes to the html */
+    onHeroCloned?: (clone: HTMLDivElement) => void;
     /**
      * Do something when the hero starts the transition
      * Here it's usefull to switch classNames with the target.

package/dist/hooks/useHero.js

@@ -93,6 +93,7 @@ function useHero(id) {
       }
       const oldClone = document.querySelector("[".concat(dataProperty, "-clone=\"").concat(ID(id), "\"]"));
       const clone = oldClone || otherElement.cloneNode(true);
+      if (events.onHeroCloned && !oldClone) events.onHeroCloned(clone);
 
       // Clean up thos properties that can cause confusion since it's a clone
       clone.style.visibility = "";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@onepercentio/one-ui",
-  "version": "0.19.5",
+  "version": "0.19.7",
   "description": "A set of reusable components created through the development of Onepercent projects",
   "repository": "git@github.com:onepercentio/one-ui.git",
   "author": "Murilo Oliveira de Araujo <murilo.araujo@onepercent.io>",
@@ -79,6 +79,7 @@
     "kill-port": "^2.0.0",
     "lodash": "^4.17.21",
     "prerender-loader": "^1.3.0",
+    "react-dev-utils": "^12.0.1",
     "sharp": "^0.30.3",
     "webpack": "^5"
   },