@loomhq/lens 10.70.0 → 10.71.1

package/dist/components/button/button.js

@@ -126,7 +126,7 @@ const ButtonWrapper = styled.button `
   }
 
   &:focus-visible {
-    outline: none;
+    outline: 1px solid transparent;
     ${getFocusRing()};
   }
 

package/dist/components/color-picker/color-picker.js

@@ -58,7 +58,7 @@ const InputContainer = styled.div `
     }
 
     &:focus {
-      outline: none;
+      outline: 1px solid transparent;
       box-shadow: var(--lns-formFieldBorderShadowFocus);
     }
   }

package/dist/components/dropdown/dropdown.d.ts

@@ -10,7 +10,7 @@ declare type OptionsObject = {
 };
 declare type DropdownProps = {
     trigger?: React.ReactNode;
-    menuPosition?: 'left' | 'right';
+    menuPosition?: 'left' | 'right' | 'topRight' | 'topLeft';
     options?: OptionsObject[];
     isOpen?: boolean;
     menuZIndex?: number;

package/dist/components/dropdown/dropdown.js

@@ -9,19 +9,13 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-import Menu, { MenuItem } from '../menu/menu';
+import Menu, { MenuItem, menuPositions } from '../menu/menu';
 import React, { useEffect, useState } from 'react';
 import Downshift from 'downshift';
 import ResizeObserver from 'resize-observer-polyfill';
 import { getDownshiftEnvironment } from '../../utilities/downshift';
 import styled from '@emotion/styled';
 import { useLayer } from 'react-laag';
-const menuPositions = {
-    left: 'bottom-start',
-    right: 'bottom-end',
-    ['topLeft']: 'top-start',
-    ['topRight']: 'top-end',
-};
 const TriggerSection = styled.div `
   display: inline-block;
   vertical-align: middle;

package/dist/components/icon-button/icon-button.js

@@ -32,7 +32,7 @@ export const IconButtonBox = styled.button `
   width: ${props => sizeStyles[props.size].size};
   height: ${props => sizeStyles[props.size].size};
   position: relative;
-  outline: none;
+  outline: 1px solid transparent;
   transition: 0.6s background-color;
   display: inline-flex;
   justify-content: center;

package/dist/components/link/link.js

@@ -43,24 +43,21 @@ const LinkWrapper = styled.a `
   ${props => !props.disabled && `color: ${variants[props.variant].color}`};
   ${props => (props.disabled ? statusStyles.disabled : statusStyles.enabled)};
   ${props => props.as === 'button' && buttonStyles.isButton};
-  &:focus {
-    outline: 0px solid transparent;
+  border-radius: 0.28em;
+  box-shadow: 0 0 0 1px transparent;
+  text-decoration: underline;
+  text-underline-offset: 0.35em;
+  transition: 0.3s box-shadow;
+  &:focus,
+  &:focus-visible {
+    outline: 1px solid transparent;
   }
   &:focus-visible {
-    outline: none;
     ${getFocusRing()};
   }
   &::-moz-focus-inner {
     border: 0;
   }
-  @supports not (text-underline-offset: 0.35em) {
-    box-shadow: 0 1px 0 currentColor;
-    padding: 0 0 1px 0;
-  }
-  @supports (text-underline-offset: 0.35em) {
-    text-underline-offset: 0.35em;
-    text-decoration: underline;
-  }
 `;
 const Link = (_a) => {
     var { children, href, variant = 'primary', htmlTag = 'a', isDisabled } = _a, props = __rest(_a, ["children", "href", "variant", "htmlTag", "isDisabled"]);

package/dist/components/menu/menu.d.ts

@@ -1,4 +1,8 @@
 import React from 'react';
+declare type MenuPositionsProps = {
+    [key: string]: 'bottom-start' | 'bottom-end' | 'top-start' | 'top-end';
+};
+export declare const menuPositions: MenuPositionsProps;
 declare const MenuWrapper: import("@emotion/styled-base").StyledComponent<React.DetailedHTMLProps<React.HTMLAttributes<HTMLUListElement>, HTMLUListElement>, MenuProps, object>;
 declare const MenuItemWrapper: import("@emotion/styled-base").StyledComponent<React.DetailedHTMLProps<React.LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, MenuItemProps, object>;
 export declare const MenuItem: ({ isDisabled, isHighlighted, isSelected, icon, hasDivider, children, ...props }: MenuItemProps & React.ComponentProps<typeof MenuItemWrapper>) => JSX.Element;

package/dist/components/menu/menu.js

@@ -15,6 +15,12 @@ import React from 'react';
 import { SvgCheck } from '../icon/available-icons';
 import Text from '../text/text';
 import styled from '@emotion/styled';
+export const menuPositions = {
+    left: 'bottom-start',
+    right: 'bottom-end',
+    ['topLeft']: 'top-start',
+    ['topRight']: 'top-end',
+};
 const MenuWrapper = styled.ul `
   background-color: ${getColorValue('overlay')};
   list-style: none;

package/dist/components/select/select.d.ts

@@ -1,6 +1,6 @@
 import React, { HTMLAttributes } from 'react';
 declare const SelectWrapper: import("@emotion/styled-base").StyledComponent<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, Pick<React.ClassAttributes<HTMLDivElement> & React.HTMLAttributes<HTMLDivElement>, keyof React.HTMLAttributes<HTMLDivElement>>, object>;
-declare const Select: ({ container, onChange, menuZIndex, menuMaxWidth, menuMaxHeight, selectedOptionValue, onOuterClick, options, placeholder, isDisabled, onOpenChange, trigger, ...props }: SelectProps & React.ComponentProps<typeof SelectWrapper>) => JSX.Element;
+declare const Select: ({ container, onChange, menuZIndex, menuMaxWidth, menuMaxHeight, menuMinWidth, selectedOptionValue, onOuterClick, options, placeholder, menuPosition, isDisabled, onOpenChange, trigger, ...props }: SelectProps & React.ComponentProps<typeof SelectWrapper>) => JSX.Element;
 declare type OptionsObject = {
     value: string;
     title: React.ReactNode;
@@ -17,6 +17,8 @@ declare type SelectProps = {
     menuZIndex?: number;
     menuMaxWidth?: string | number;
     menuMaxHeight?: string | number;
+    menuMinWidth?: string | number;
+    menuPosition?: 'left' | 'right' | 'topRight' | 'topLeft';
     options?: OptionsObject[];
     container?: HTMLElement;
     onOuterClick?: () => void;

package/dist/components/select/select.js

@@ -9,7 +9,7 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-import Menu, { MenuItem } from '../menu/menu';
+import Menu, { MenuItem, menuPositions } from '../menu/menu';
 import React, { useEffect, useState } from 'react';
 import { getColorValue, getSize, u } from '../../utilities';
 import Downshift from 'downshift';
@@ -50,7 +50,7 @@ const SelectHeaderWrapper = styled.button `
   }
 
   &:focus {
-    outline: none;
+    outline: 1px solid transparent;
     box-shadow: var(--lns-formFieldBorderShadowFocus);
   }
 
@@ -142,7 +142,7 @@ const didSelectedOptionValueChange = (selectedOptionValue, prevSelectedItem) =>
     return Boolean(prevSelectedItem && selectedOptionValue !== prevSelectedItem.value);
 };
 const Select = (_a) => {
-    var { container, onChange, menuZIndex = 1100, menuMaxWidth, menuMaxHeight = 34, selectedOptionValue, onOuterClick, options, placeholder, isDisabled, onOpenChange, trigger } = _a, props = __rest(_a, ["container", "onChange", "menuZIndex", "menuMaxWidth", "menuMaxHeight", "selectedOptionValue", "onOuterClick", "options", "placeholder", "isDisabled", "onOpenChange", "trigger"]);
+    var { container, onChange, menuZIndex = 1100, menuMaxWidth, menuMaxHeight = 34, menuMinWidth, selectedOptionValue, onOuterClick, options, placeholder, menuPosition = 'left', isDisabled, onOpenChange, trigger } = _a, props = __rest(_a, ["container", "onChange", "menuZIndex", "menuMaxWidth", "menuMaxHeight", "menuMinWidth", "selectedOptionValue", "onOuterClick", "options", "placeholder", "menuPosition", "isDisabled", "onOpenChange", "trigger"]);
     const environment = getDownshiftEnvironment(container);
     const [downshiftIsOpen, setDownshiftIsOpen] = useState(false);
     const [prevSelectedItem, setPrevSelectedItem] = useState(getSelectedOption(selectedOptionValue, options));
@@ -165,7 +165,7 @@ const Select = (_a) => {
         isOpen: downshiftIsOpen,
         container,
         ResizeObserver,
-        placement: 'bottom-center',
+        placement: menuPositions[menuPosition],
         auto: true,
         snap: true,
     });
@@ -191,8 +191,8 @@ const Select = (_a) => {
                 React.createElement("div", Object.assign({}, triggerProps), trigger ? (React.createElement(CustomHeader, { getToggleButtonProps: getToggleButtonProps, selectedItem: selectedItem, selectedOptionValue: selectedOptionValue, selectPlaceholder: placeholder, isDisabled: isDisabled, options: options, trigger: trigger })) : (React.createElement(SelectHeader, { getToggleButtonProps: getToggleButtonProps, selectedItem: selectedItem, selectedOptionValue: selectedOptionValue, selectPlaceholder: placeholder, options: options, inputValue: inputValue, isDisabled: isDisabled }))),
                 downshiftIsOpen &&
                     isOpen &&
-                    renderLayer(React.createElement("div", Object.assign({}, layerProps, { style: Object.assign(Object.assign({}, layerProps.style), { zIndex: menuZIndex, width: triggerBounds === null || triggerBounds === void 0 ? void 0 : triggerBounds.width }) }),
-                        React.createElement(Menu, { downshiftMenuProps: getMenuProps, maxWidth: menuMaxWidth, maxHeight: menuMaxHeight }, options.map((item, index) => {
+                    renderLayer(React.createElement("div", Object.assign({}, layerProps, { style: Object.assign(Object.assign({}, layerProps.style), { zIndex: menuZIndex, width: menuMinWidth ? 'auto' : triggerBounds === null || triggerBounds === void 0 ? void 0 : triggerBounds.width }) }),
+                        React.createElement(Menu, { position: menuPosition, downshiftMenuProps: getMenuProps, maxWidth: menuMaxWidth, maxHeight: menuMaxHeight, minWidth: menuMinWidth }, options.map((item, index) => {
                             return (React.createElement(MenuItem, Object.assign({ key: index, getItemProps: getItemProps, icon: item.icon, hidden: item.hidden }, getItemProps({
                                 key: `${item.value}-${index}`,
                                 index,

package/dist/components/tabs/tabs.js

@@ -9,7 +9,7 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-import { getColorValue, getFocusRing, getFontWeight, getSize, getSizeValue, u, } from '../../utilities';
+import { getColorValue, getFocusRing, getFontWeight, getRadius, getSize, getSizeValue, u, } from '../../utilities';
 import Container from '../container/container';
 import Icon from '../icon/icon';
 import React from 'react';
@@ -21,6 +21,8 @@ const Wrapper = styled.div `
   `};
 `;
 const TabsNav = styled.nav `
+  --activeIndicatorHeight: 3px;
+
   display: flex;
   overflow: auto;
   -ms-overflow-style: none;
@@ -49,27 +51,33 @@ const TabWrapper = styled.button `
   appearance: none;
   font: inherit;
   background: transparent;
-  cursor: pointer;
   border: none;
+  ${getRadius('medium')};
+  cursor: pointer;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   vertical-align: middle;
-  padding: 0 0 ${u(1)} 0;
+  padding: 0 0 calc(var(--lns-space-small) + var(--activeIndicatorHeight)) 0;
+  position: relative;
   color: inherit;
   text-decoration: none;
   flex-shrink: 0;
   ${getFontWeight('medium')};
   transition: 0.6s color;
-  border-bottom: ${u(0.375)} solid transparent;
   white-space: nowrap;
   color: ${props => getColorValue(props.isActive ? 'body' : 'bodyDimmed')};
   ${props => props.isActive &&
     `border-color: ${getColorValue('primary')};
   `};
 
-  &:focus {
-    outline: none;
+  &:focus,
+  &:focus-visible {
+    outline: 1px solid transparent;
+  }
+
+  &:focus-visible {
+    ${getFocusRing(undefined, 'inset')};
   }
 
   &:hover {
@@ -77,8 +85,14 @@ const TabWrapper = styled.button `
     transition: 0.3s color;
   }
 
-  &:focus-visible {
-    ${getFocusRing(undefined, 'inset')};
+  &::after {
+    bottom: 0;
+    ${getRadius('medium')};
+    content: '';
+    height: var(--activeIndicatorHeight);
+    position: absolute;
+    width: 100%;
+    ${props => props.isActive && `background-color: ${getColorValue('primary')}`};
   }
 `;
 export const Tab = (_a) => {

package/dist/components/text-button/text-button.js

@@ -48,8 +48,9 @@ const TextButtonWrapper = styled.button `
   ${props => props.offsetSide &&
     `margin-${props.offsetSide}: calc(-1 * ${sizeStyles[props.size].xSpace})`};
 
-  &:focus {
-    outline: none;
+  &:focus,
+  &:focus-visible {
+    outline: 1px solid transparent;
   }
 
   &:focus-visible {

package/dist/components/text-input/text-input.js

@@ -62,7 +62,7 @@ const InputField = styled.input `
   }
 
   &:focus {
-    outline: none;
+    outline: 1px solid transparent;
     box-shadow: var(--lns-formFieldBorderShadowFocus);
   }
 

package/dist/components/textarea/textarea.js

@@ -42,7 +42,7 @@ const TextareaWrapper = styled.textarea `
   }
 
   &:focus {
-    outline: none;
+    outline: 1px solid transparent;
     box-shadow: var(--lns-formFieldBorderShadowFocus);
   }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@loomhq/lens",
-  "version": "10.70.0",
+  "version": "10.71.1",
   "scripts": {
     "dev": "next",
     "build:next": "next build",