@loomhq/lens 10.32.13 → 10.33.1

package/dist/components/popover/popover.js

@@ -9,7 +9,7 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-import { autoUpdate, flip, offset as floatingUiOffset, shift, useFloating, } from '@floating-ui/react-dom';
+import { autoUpdate, flip, offset as floatingUiOffset, limitShift, shift, useFloating, } from '@floating-ui/react-dom';
 import React, { useEffect } from 'react';
 import ReactDOM from 'react-dom';
 import styled from '@emotion/styled';
@@ -55,13 +55,14 @@ const Popover = (_a) => {
     const { x, y, reference, floating, strategy, update, refs } = useFloating({
         placement: placements[placement],
         middleware: [
-            flip({
-                fallbackPlacements: ['top', 'bottom'],
-                fallbackStrategy: 'initialPlacement',
-            }),
             shift({
                 padding: unitBoundaryOffset,
                 boundary: boundaryElement ? getBoundaryElement() : undefined,
+                limiter: limitShift(),
+            }),
+            flip({
+                fallbackPlacements: ['top', 'bottom'],
+                fallbackStrategy: 'initialPlacement',
             }),
             floatingUiOffset(unitOffset),
         ],

package/dist/components/toast/toast.js

@@ -9,12 +9,12 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-import { getRadius, getShadow, getColorValue, u } from '../../utilities';
-import IconButton from '../icon-button/icon-button';
 import React, { useEffect } from 'react';
+import { getColorValue, getRadius, getShadow, u } from '../../utilities';
+import IconButton from '../icon-button/icon-button';
 import { SvgClose } from '../icon/available-icons';
-import styled from '@emotion/styled';
 import { keyframes } from '@emotion/core';
+import styled from '@emotion/styled';
 const toastDuration = 3000;
 const enter = keyframes `
   from {
@@ -66,7 +66,7 @@ const Toast = (_a) => {
         }, toastDuration);
         return () => clearTimeout(timer);
     }, [isOpen, onCloseClick]);
-    return (React.createElement(React.Fragment, null, isOpen && (React.createElement(ToastWrapper, Object.assign({ className: "theme-dark", onClick: e => e.stopPropagation(), zIndex: zIndex, isOpen: isOpen }, props),
+    return (React.createElement(React.Fragment, null, isOpen && (React.createElement(ToastWrapper, Object.assign({ "data-lens-theme": "dark", onClick: e => e.stopPropagation(), zIndex: zIndex, isOpen: isOpen }, props),
         React.createElement(ChildrenSection, { "aria-live": "polite" }, children),
         onCloseClick && (React.createElement(IconButton, { altText: "Close", icon: React.createElement(SvgClose, null), onClick: onCloseClick }))))));
 };

package/dist/css-variables/index.js

@@ -99,11 +99,13 @@ export const getThemeStylesString = (customRootElement = ':root') => {
     const rootElement = customRootElement || ':root';
     return `
     ${rootElement},
-    .theme-light {
+    .theme-light,
+    [data-lens-theme="light"] {
       ${assignLightThemeColors().join('')}
     }
 
-    .theme-dark {
+    .theme-dark,
+    [data-lens-theme="dark"] {
       ${assignDarkThemeColors().join('')}
     }
   `;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@loomhq/lens",
-  "version": "10.32.13",
+  "version": "10.33.1",
   "scripts": {
     "dev": "next",
     "build:next": "next build",
@@ -38,8 +38,8 @@
     "react-dom": "^17.0.2"
   },
   "devDependencies": {
-    "@babel/cli": "^7.8.4",
-    "@babel/core": "7.8.4",
+    "@babel/cli": "^7.16.0",
+    "@babel/core": "^7.14.0",
     "@babel/plugin-proposal-class-properties": "^7.8.3",
     "@babel/preset-env": "^7.8.4",
     "@babel/preset-react": "^7.8.3",