@loomhq/lens 10.23.0 → 10.25.0

package/dist/components/base-styles/base-styles.js

@@ -1,8 +1,8 @@
 import { Global, css } from '@emotion/core';
+import { getAllCssVarsString, getThemeStylesString } from '../../css-variables';
 import { getColorValue, getTextSize } from '../../utilities';
 import React from 'react';
 import { cssUtilities } from '../../css-utilities';
-import { getAllCssVarsString, getThemeStylesString } from '../../css-variables';
 const buildGlobalStylesheet = (rootElement = ':root', bodyElement = 'body') => {
     return `
     ${rootElement} {

package/dist/components/button/button.d.ts

@@ -1,4 +1,3 @@
-import 'focus-visible/dist/focus-visible';
 import React from 'react';
 declare const ButtonWrapper: import("@emotion/styled-base").StyledComponent<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, ButtonWrapperProps, object>;
 declare const Button: ({ size, children, variant, hasFullWidth, icon, iconPosition, logoSrc, hasLoader, isDisabled, htmlTag, ...props }: ButtonProps & React.ComponentProps<typeof ButtonWrapper>) => JSX.Element;

package/dist/components/button/button.js

@@ -9,13 +9,12 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-import { css } from '@emotion/core';
-import styled from '@emotion/styled';
-import 'focus-visible/dist/focus-visible';
-import React from 'react';
+import { getColorValue, getFocusRing, getFontWeight, getRadius, getSize, getTextSize, u, } from '../../utilities';
 import Icon from '../icon/icon';
 import Loader from '../loader/loader';
-import { getFocusRing, getFontWeight, getRadius, getTextSize, u, getColorValue, getSize, } from '../../utilities';
+import React from 'react';
+import { css } from '@emotion/core';
+import styled from '@emotion/styled';
 const sizesStyles = {
     small: {
         height: u(4),
@@ -126,11 +125,8 @@ const ButtonWrapper = styled.button `
     background-color: ${props => variantStyles[props.variant].active};
   }
 
-  &:focus {
+  &:focus-visible {
     outline: none;
-  }
-
-  &.focus-visible {
     ${getFocusRing()};
   }
 

package/dist/components/checkbox/checkbox.js

@@ -9,8 +9,8 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-import { getFocusRing, u, getColorValue } from '../../utilities';
 import React, { forwardRef, useEffect, useRef } from 'react';
+import { getColorValue, getFocusRing, u } from '../../utilities';
 import styled from '@emotion/styled';
 const SvgCheckboxCheck = props => (React.createElement("svg", Object.assign({ width: 12, height: 9, viewBox: "0 0 12 9", fill: "none" }, props),
     React.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M11.707.293a1 1 0 010 1.414l-7 7a1 1 0 01-1.414 0l-3-3a1 1 0 011.414-1.414L4 6.586 10.293.293a1 1 0 011.414 0z", fill: "currentColor" })));
@@ -50,7 +50,7 @@ const CheckboxInput = styled.input `
     }
   }
 
-  &.focus-visible ~ .CheckboxBox {
+  &:focus-visible ~ .CheckboxBox {
     ${getFocusRing()};
   }
 

package/dist/components/icon-button/icon-button.d.ts

@@ -1,15 +1,17 @@
 import React from 'react';
 export declare const IconButtonBox: import("@emotion/styled-base").StyledComponent<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, IconButtonBoxProps, object>;
-declare const IconButton: ({ altText, icon, onClick, iconColor, isDisabled, size, ...props }: IconButtonProps & React.ComponentProps<typeof IconButtonBox>) => JSX.Element;
+declare const IconButton: ({ altText, icon, onClick, iconColor, isActive, isDisabled, size, ...props }: IconButtonProps & React.ComponentProps<typeof IconButtonBox>) => JSX.Element;
 declare type IconButtonProps = {
     altText: string;
     icon?: React.ReactNode;
     onClick?: React.ReactEventHandler;
     iconColor?: string;
+    isActive?: boolean;
     isDisabled?: boolean;
     size?: 'small' | 'medium';
 };
 declare type IconButtonBoxProps = {
     size?: 'small' | 'medium';
+    isActive?: boolean;
 };
 export default IconButton;

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

@@ -24,7 +24,7 @@ const sizeStyles = {
     },
 };
 export const IconButtonBox = styled.button `
-  background-color: transparent;
+  background-color: ${props => props.isActive ? getColorValue('backgroundActive') : 'transparent'};
   border: none;
   appearance: none;
   cursor: pointer;
@@ -42,7 +42,7 @@ export const IconButtonBox = styled.button `
 
   &:hover {
     transition: 0.3s background-color;
-    background-color: ${getColorValue('backgroundHover')};
+    background-color: ${props => getColorValue(props.isActive ? 'backgroundActive' : 'backgroundHover')};
   }
 
   &:active {
@@ -65,7 +65,7 @@ export const IconButtonBox = styled.button `
     ${getRadius('medium')};
   }
 
-  &.focus-visible:before {
+  &:focus-visible:before {
     ${getFocusRing()};
   }
 
@@ -74,8 +74,8 @@ export const IconButtonBox = styled.button `
   }
 `;
 const IconButton = (_a) => {
-    var { altText, icon, onClick, iconColor = 'body', isDisabled, size = 'medium' } = _a, props = __rest(_a, ["altText", "icon", "onClick", "iconColor", "isDisabled", "size"]);
-    return (React.createElement(IconButtonBox, Object.assign({ "aria-label": altText, onClick: onClick, disabled: isDisabled, size: size }, props),
+    var { altText, icon, onClick, iconColor = 'body', isActive, isDisabled, size = 'medium' } = _a, props = __rest(_a, ["altText", "icon", "onClick", "iconColor", "isActive", "isDisabled", "size"]);
+    return (React.createElement(IconButtonBox, Object.assign({ "aria-label": altText, onClick: onClick, isActive: isActive, disabled: isDisabled, size: size }, props),
         React.createElement(Icon, { icon: icon, size: sizeStyles[size].iconSize, color: isDisabled ? 'disabledContent' : iconColor })));
 };
 export default IconButton;

package/dist/components/pill/pill.d.ts

@@ -1,4 +1,3 @@
-import 'focus-visible/dist/focus-visible';
 import React from 'react';
 declare const PillWrapper: import("@emotion/styled-base").StyledComponent<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, PillWrapperProps, object>;
 declare const Pill: ({ color, backgroundColor, children, icon, iconPosition, ...props }: PillProps & React.ComponentProps<typeof PillWrapper>) => JSX.Element;

package/dist/components/pill/pill.js

@@ -9,12 +9,11 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-import 'focus-visible/dist/focus-visible';
-import { getFontWeight, getRadius, getSize, getTextSize, u, getColorValue, } from '../../utilities';
+import { getColorValue, getFontWeight, getRadius, getSize, getTextSize, u, } from '../../utilities';
+import Container from '../container/container';
 import Icon from '../icon/icon';
 import React from 'react';
 import styled from '@emotion/styled';
-import Container from '../container/container';
 const PillWrapper = styled.div `
   display: inline-grid;
   grid-auto-flow: column;

package/dist/components/radio/radio.js

@@ -9,8 +9,8 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-import { getFocusRing, u, getColorValue } from '../../utilities';
 import React, { forwardRef } from 'react';
+import { getColorValue, getFocusRing, u } from '../../utilities';
 import styled from '@emotion/styled';
 const RadioLabel = styled.label `
   display: block;
@@ -55,7 +55,7 @@ const RadioInput = styled.input `
     }
   }
 
-  &.focus-visible ~ .RadioBox {
+  &:focus-visible ~ .RadioBox {
     ${getFocusRing()};
   }
 `;

package/dist/components/split/split.js

@@ -37,8 +37,8 @@ const SplitWrapper = styled.div `
   ${props => getSizeStyles(props)};
 `;
 const SplitSectionWrapper = styled.div `
-  ${props => props.grow && getResponsiveNumber('flex-grow', props.grow)};
-  ${props => props.shrink && getResponsiveNumber('flex-shrink', props.shrink)};
+  ${props => getResponsiveNumber('flex-grow', props.grow)};
+  ${props => getResponsiveNumber('flex-shrink', props.shrink)};
   ${props => props.basis && getSize('flex-basis', props.basis)};
   margin-right: var(--gap);
   margin-bottom: var(--gap);

package/dist/components/switch/switch.js

@@ -9,7 +9,7 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-import { getFocusRing, u, getColorValue } from '../../utilities';
+import { getColorValue, getFocusRing, u } from '../../utilities';
 import React from 'react';
 import styled from '@emotion/styled';
 const switchHeight = 2;
@@ -47,7 +47,7 @@ const SwitchInput = styled.input `
   position: absolute;
   opacity: 0;
 
-  &.focus-visible ~ .SwitchBox {
+  &:focus-visible ~ .SwitchBox {
     ${getFocusRing()};
   }
 

package/dist/components/tabs/tabs.js

@@ -9,11 +9,11 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-import { getFocusRing, getFontWeight, getSize, getSizeValue, u, getColorValue, } from '../../utilities';
+import { getColorValue, getFocusRing, getFontWeight, getSize, getSizeValue, u, } from '../../utilities';
+import Container from '../container/container';
 import Icon from '../icon/icon';
 import React from 'react';
 import styled from '@emotion/styled';
-import Container from '../container/container';
 const negativeScrollOffset = scrollOffset => `calc(-1 * ${getSizeValue(scrollOffset)})`;
 const Wrapper = styled.div `
   ${props => props.scrollOffset &&
@@ -77,7 +77,7 @@ const TabWrapper = styled.button `
     transition: 0.3s color;
   }
 
-  &.focus-visible {
+  &:focus-visible {
     ${getFocusRing(undefined, 'inset')};
   }
 `;

package/dist/components/text-button/text-button.d.ts

@@ -1,5 +1,4 @@
 import React from 'react';
-import 'focus-visible/dist/focus-visible';
 declare const TextButtonWrapper: import("@emotion/styled-base").StyledComponent<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, TextButtonWrapperProps, object>;
 declare const TextButton: ({ onClick, size, children, icon, iconPosition, isDisabled, htmlTag, offsetSide, ...props }: TextButtonProps & React.ComponentProps<typeof TextButtonWrapper>) => JSX.Element;
 declare type TextButtonProps = {

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

@@ -9,12 +9,11 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
+import { getColorValue, getFocusRing, getFontWeight, getRadius, getTextSize, u, } from '../../utilities';
+import Container from '../container/container';
+import Icon from '../icon/icon';
 import React from 'react';
 import styled from '@emotion/styled';
-import { u, getTextSize, getRadius, getFontWeight, getFocusRing, getColorValue, } from '../../utilities';
-import Icon from '../icon/icon';
-import Container from '../container/container';
-import 'focus-visible/dist/focus-visible';
 const sizeStyles = {
     small: {
         textSize: 'small',
@@ -51,7 +50,7 @@ const TextButtonWrapper = styled.button `
     outline: none;
   }
 
-  &.focus-visible {
+  &:focus-visible {
     ${getFocusRing()};
   }
 

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

@@ -9,10 +9,10 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-import Icon from '../icon/icon';
 import React, { forwardRef } from 'react';
+import { getColorValue, getTextSize, u } from '../../utilities';
+import Icon from '../icon/icon';
 import styled from '@emotion/styled';
-import { u, getColorValue, getTextSize } from '../../utilities';
 const sizesStyles = {
     small: {
         height: u(4),
@@ -51,6 +51,12 @@ const InputField = styled.input `
 
   ${props => getTextSize(sizesStyles[props.inputSize].textSize)};
 
+  &::-webkit-search-decoration,
+  &::-webkit-search-results-button,
+  &::-webkit-search-results-decoration {
+    -webkit-appearance: none;
+  }
+
   &:hover {
     box-shadow: inset 0 0 0 var(--lns-formFieldBorderWidthFocus)
       var(--lns-color-blurple);
@@ -97,12 +103,16 @@ const TextInput = forwardRef((_a, ref) => {
         inputField)) : (inputField);
 });
 export const availableTypes = [
+    'datetime-local',
     'email',
+    'month',
     'number',
     'password',
     'search',
     'tel',
     'text',
+    'time',
     'url',
+    'week',
 ];
 export default TextInput;

package/dist/utilities/responsive.js

@@ -1,6 +1,6 @@
-import useMedia from '../hooks/use-media';
 import { breakpoints } from '../variables';
 import { getSizeValue } from './size';
+import useMedia from '../hooks/use-media';
 export const getMediaCss = (widthType, breakpoint, declaration) => `@media(${widthType}: ${breakpoint}){${declaration}}`;
 export const arrayToBreakpoints = values => {
     const smallestBreakpoint = Object.values(breakpoints)[0];
@@ -56,7 +56,7 @@ export const getResponsiveBoolean = (property, valueArray, booleanValue) => {
     return `${property}: ${valueArray[0]};`;
 };
 export const getResponsiveNumber = (property, number) => {
-    if (number) {
+    if (number || number === 0) {
         if (Array.isArray(number)) {
             const rulesetsArray = number.map(numberItem => {
                 return `${property}: ${numberItem}`;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@loomhq/lens",
-  "version": "10.23.0",
+  "version": "10.25.0",
   "scripts": {
     "dev": "next",
     "build:next": "next build",
@@ -23,7 +23,6 @@
   },
   "dependencies": {
     "downshift": "^5.0.0",
-    "focus-visible": "^5.0.2",
     "lodash": "^4.17.21",
     "react-color": "^2.19.3",
     "react-laag": "^2.0.3",
@@ -33,9 +32,9 @@
   "peerDependencies": {
     "@emotion/core": "^10.1.1",
     "@emotion/styled": "^10.0.27",
+    "@types/react": "^17.0.3",
     "react": "^16.12.0",
-    "react-dom": "^16.12.0",
-    "@types/react": "^17.0.3"
+    "react-dom": "^16.12.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.4",