@scality/core-ui 0.116.0 → 0.117.0

package/.storybook/preview.js

@@ -1,9 +1,9 @@
 import React from 'react';
 import { QueryClient, QueryClientProvider } from 'react-query';
 import { CoreUiThemeProvider } from '../src/lib/next';
-import { brand, coreUIAvailableThemes} from '../src/lib/style/theme';
+import { brand, coreUIAvailableThemes } from '../src/lib/style/theme';
 import { Wrapper } from '../stories/common';
-
+import { ToastProvider } from '../src/lib';
 
 export const globalTypes = {
   theme: {
@@ -14,22 +14,28 @@ export const globalTypes = {
       title: 'Preview Theme',
       dynamicTitle: false,
       // array of plain string values or MenuItem shape (see below)
-      items: [{ value: 'darkRebrand', title: 'Dark', icon: 'moon' }, { value: 'artescaLight', title: 'Light', icon: 'sun' }, {value: 'ring9dark', title: 'Ring Dark', icon: 'moon'}],
+      items: [
+        { value: 'darkRebrand', title: 'Dark', icon: 'moon' },
+        { value: 'artescaLight', title: 'Light', icon: 'sun' },
+        { value: 'ring9dark', title: 'Ring Dark', icon: 'moon' },
+      ],
     },
   },
 };
 
 const withThemeProvider = (Story, context) => {
   const theme = coreUIAvailableThemes[context.globals.theme];
-  const {viewMode} = context
+  const { viewMode } = context;
   return (
     <QueryClientProvider client={new QueryClient()}>
       <CoreUiThemeProvider theme={theme}>
         {/* Wrapper to make the stories take the full screen but not in docs */}
-        <div style={viewMode === 'story' ? {height: 100 + 'vh' }: null}>
-          <Wrapper>
-            <Story {...context} />
-          </Wrapper>
+        <div style={viewMode === 'story' ? { height: 100 + 'vh' } : null}>
+          <ToastProvider>
+            <Wrapper>
+              <Story {...context} />
+            </Wrapper>
+          </ToastProvider>
         </div>
       </CoreUiThemeProvider>
     </QueryClientProvider>
@@ -40,17 +46,18 @@ export const decorators = [withThemeProvider];
 
 export const parameters = {
   layout: 'fullscreen',
-  docs:{
-      toc : {headingSelector: 'h2,h3',
-      title: "Table of Contents"},
+  docs: {
+    toc: { headingSelector: 'h2,h3', title: 'Table of Contents' },
   },
-  controls:{
+  controls: {
     //All props with color in name will automatically have a control 'color'
     //with colors presets to theme colors, possible to have the color name from theme in control
-    presetColors: Object.entries(brand).map(color => {return {color: color[1],title:color[0] }}),
-    matchers:{
-      color: /color/i
-    }
+    presetColors: Object.entries(brand).map((color) => {
+      return { color: color[1], title: color[0] };
+    }),
+    matchers: {
+      color: /color/i,
+    },
   },
   options: {
     storySort: {
@@ -60,8 +67,15 @@ export const parameters = {
         'Guidelines',
         'Templates',
         'Components',
-        ['Navigation', 'Data Display', 'Inputs', 'Feedback', 'Progress & loading', 'Styling', 'Deprecated']
-        
+        [
+          'Navigation',
+          'Data Display',
+          'Inputs',
+          'Feedback',
+          'Progress & loading',
+          'Styling',
+          'Deprecated',
+        ],
       ],
     },
   },

package/README.md

@@ -11,7 +11,7 @@ Core-UI is a component library containing all components, layouts, icons and the
 - Add ```@scality/core-ui``` in the ```package.json```'s dependencies of your project.
 
 ```json
-    "@scality/core-ui": "github:scality/core-ui#0.114.0",
+    "@scality/core-ui": "0.115.0",
 ```
 
 - ```@scality/core-ui``` requires the peerDependencies below. Make sure that you have them in the ```package.json```'s dependencies.

package/dist/components/buttonv2/Buttonv2.component.d.ts

@@ -1,6 +1,7 @@
 import React, { ButtonHTMLAttributes } from 'react';
 import { Loader } from '../loader/Loader.component';
 import { Props as TooltipProps } from '../tooltip/Tooltip.component';
+export declare const FocusVisibleStyle: import("styled-components").FlattenInterpolation<import("styled-components").ThemeProps<import("styled-components").DefaultTheme>>;
 export type Props = Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'size' | 'label'> & {
     variant?: 'primary' | 'secondary' | 'danger' | 'outline';
     size?: 'default' | 'inline';

package/dist/components/buttonv2/Buttonv2.component.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Buttonv2.component.d.ts","sourceRoot":"","sources":["../../../src/lib/components/buttonv2/Buttonv2.component.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,oBAAoB,EAAE,MAAM,OAAO,CAAC;AAIpD,OAAO,EAAE,MAAM,EAAE,MAAM,4BAA4B,CAAC;AACpD,OAAO,EAAW,KAAK,IAAI,YAAY,EAAE,MAAM,8BAA8B,CAAC;AAC9E,MAAM,MAAM,KAAK,GAAG,IAAI,CACtB,oBAAoB,CAAC,iBAAiB,CAAC,EACvC,MAAM,GAAG,OAAO,CACjB,GAAG;IACF,OAAO,CAAC,EAAE,SAAS,GAAG,WAAW,GAAG,QAAQ,GAAG,SAAS,CAAC;IACzD,IAAI,CAAC,EAAE,SAAS,GAAG,QAAQ,CAAC;IAC5B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,iBAAiB,CAAC,KAAK,IAAI,CAAC;IAC/D,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,OAAO,CAAC,EAAE,IAAI,CAAC,YAAY,EAAE,UAAU,CAAC,CAAC;IACzC,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB,CAAC;AACF,eAAO,MAAM,YAAY;;;;uBANL,gBAAgB,CAAC,iBAAiB,CAAC,KAAK,IAAI;WACvD,MAAM,SAAS;YACd,MAAM,SAAS;;;SA6JxB,CAAC;AACF,eAAO,MAAM,WAAW,0GAIvB,CAAC;AACF,eAAO,MAAM,UAAU;WAAwB,MAAM,SAAS;SAS7D,CAAC;AAEF,eAAO,MAAM,YAAY;;;SAaxB,CAAC;AAEF,iBAAS,MAAM,CAAC,EACd,OAAO,EACP,IAAI,EACJ,QAAQ,EACR,KAAK,EACL,IAAI,EACJ,OAAO,EACP,OAAO,EACP,SAAS,EACT,GAAG,IAAI,EACR,EAAE,KAAK,eAqDP;AAED,OAAO,EAAE,MAAM,EAAE,CAAC"}
+{"version":3,"file":"Buttonv2.component.d.ts","sourceRoot":"","sources":["../../../src/lib/components/buttonv2/Buttonv2.component.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,oBAAoB,EAAE,MAAM,OAAO,CAAC;AAIpD,OAAO,EAAE,MAAM,EAAE,MAAM,4BAA4B,CAAC;AACpD,OAAO,EAAW,KAAK,IAAI,YAAY,EAAE,MAAM,8BAA8B,CAAC;AAE9E,eAAO,MAAM,iBAAiB,oIAI7B,CAAC;AAEF,MAAM,MAAM,KAAK,GAAG,IAAI,CACtB,oBAAoB,CAAC,iBAAiB,CAAC,EACvC,MAAM,GAAG,OAAO,CACjB,GAAG;IACF,OAAO,CAAC,EAAE,SAAS,GAAG,WAAW,GAAG,QAAQ,GAAG,SAAS,CAAC;IACzD,IAAI,CAAC,EAAE,SAAS,GAAG,QAAQ,CAAC;IAC5B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,iBAAiB,CAAC,KAAK,IAAI,CAAC;IAC/D,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,OAAO,CAAC,EAAE,IAAI,CAAC,YAAY,EAAE,UAAU,CAAC,CAAC;IACzC,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB,CAAC;AACF,eAAO,MAAM,YAAY;;;;uBANL,gBAAgB,CAAC,iBAAiB,CAAC,KAAK,IAAI;WACvD,MAAM,SAAS;YACd,MAAM,SAAS;;;SAyJxB,CAAC;AACF,eAAO,MAAM,WAAW,0GAIvB,CAAC;AACF,eAAO,MAAM,UAAU;WAAwB,MAAM,SAAS;SAS7D,CAAC;AAEF,eAAO,MAAM,YAAY;;;SAaxB,CAAC;AAEF,iBAAS,MAAM,CAAC,EACd,OAAO,EACP,IAAI,EACJ,QAAQ,EACR,KAAK,EACL,IAAI,EACJ,OAAO,EACP,OAAO,EACP,SAAS,EACT,GAAG,IAAI,EACR,EAAE,KAAK,eAqDP;AAED,OAAO,EAAE,MAAM,EAAE,CAAC"}

package/dist/components/buttonv2/Buttonv2.component.js

@@ -4,6 +4,11 @@ import { spacing } from '../../spacing';
 import { fontSize, fontWeight } from '../../style/theme';
 import { Loader } from '../loader/Loader.component';
 import { Tooltip } from '../tooltip/Tooltip.component';
+export const FocusVisibleStyle = css `
+  outline: dashed ${spacing.r2} ${(props) => props.theme.selectedActive};
+  outline-offset: ${spacing.r2};
+  z-index: 1000;
+`;
 export const ButtonStyled = styled.button `
   -webkit-appearance: none;
   -moz-appearance: none;
@@ -40,8 +45,7 @@ export const ButtonStyled = styled.button `
           }
           // :focus-visible is the keyboard-only version of :focus
           &:focus-visible:enabled {
-            outline: dashed ${spacing.r2} ${brand.selectedActive};
-            outline-offset: ${spacing.r2};
+            ${FocusVisibleStyle}
             color: ${brand.textPrimary};
           }
           &:active:enabled {
@@ -61,8 +65,7 @@ export const ButtonStyled = styled.button `
             color: ${brand.textPrimary};
           }
           &:focus-visible:enabled {
-            outline: dashed ${spacing.r2} ${brand.selectedActive};
-            outline-offset: ${spacing.r2};
+            ${FocusVisibleStyle}
             color: ${brand.textPrimary};
           }
           &:active:enabled {
@@ -81,8 +84,7 @@ export const ButtonStyled = styled.button `
             border: ${spacing.r1} solid ${brand.infoPrimary};
           }
           &:focus-visible:enabled {
-            outline: dashed ${spacing.r2} ${brand.selectedActive};
-            outline-offset: ${spacing.r2};
+            ${FocusVisibleStyle}
           }
           &:active:enabled {
             cursor: pointer;
@@ -100,8 +102,7 @@ export const ButtonStyled = styled.button `
             color: ${brand.textPrimary};
           }
           &:focus-visible:enabled {
-            outline: dashed ${spacing.r2} ${brand.selectedActive};
-            outline-offset: ${spacing.r2};
+            ${FocusVisibleStyle}
             border-color: ${brand.buttonSecondary};
           }
           &:active:enabled {

package/dist/components/card/Card.component.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Card.component.d.ts","sourceRoot":"","sources":["../../../src/lib/components/card/Card.component.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAKlC,KAAK,gBAAgB,GAAG;IACtB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAkDF,eAAO,MAAM,UAAU,qCA/CqB,gBAAgB,gBA+CC,CAAC;AAC9D,eAAO,MAAM,QAAQ,qCAhDuB,gBAAgB,gBAgDH,CAAC;AAC1D,eAAO,MAAM,iBAAiB,qCAjDc,gBAAgB,gBAiDe,CAAC;AA6D5E,KAAK,SAAS,GAAG;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,qBAAqB,CAAC,EAAE,MAAM,CAAC;IAC/B,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,MAAM,CAAC,EAAE,SAAS,GAAG,SAAS,GAAG,UAAU,CAAC;IAC5C,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,EAAE,IAAI,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,GAAG,SAAS,CAAC,cAAc,CAAC,CAAC;AAC9B,iBAAS,IAAI,CAAC,EACZ,KAAc,EACd,MAAe,EACf,qBAA0C,EAC1C,mBAAwC,EACxC,MAAa,EACb,OAAc,EACd,MAAc,EACd,QAAgB,EAChB,QAAQ,EACR,SAAS,EACT,GAAG,IAAI,EACR,EAAE,SAAS,eA6CX;kBAzDQ,IAAI;;;;;AA6Db,OAAO,EAAE,IAAI,EAAE,CAAC"}
+{"version":3,"file":"Card.component.d.ts","sourceRoot":"","sources":["../../../src/lib/components/card/Card.component.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAMlC,KAAK,gBAAgB,GAAG;IACtB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAkDF,eAAO,MAAM,UAAU,qCA/CqB,gBAAgB,gBA+CC,CAAC;AAC9D,eAAO,MAAM,QAAQ,qCAhDuB,gBAAgB,gBAgDH,CAAC;AAC1D,eAAO,MAAM,iBAAiB,qCAjDc,gBAAgB,gBAiDe,CAAC;AA4D5E,KAAK,SAAS,GAAG;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,qBAAqB,CAAC,EAAE,MAAM,CAAC;IAC/B,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,MAAM,CAAC,EAAE,SAAS,GAAG,SAAS,GAAG,UAAU,CAAC;IAC5C,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,EAAE,IAAI,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,GAAG,SAAS,CAAC,cAAc,CAAC,CAAC;AAC9B,iBAAS,IAAI,CAAC,EACZ,KAAc,EACd,MAAe,EACf,qBAA0C,EAC1C,mBAAwC,EACxC,MAAa,EACb,OAAc,EACd,MAAc,EACd,QAAgB,EAChB,QAAQ,EACR,SAAS,EACT,GAAG,IAAI,EACR,EAAE,SAAS,eA6CX;kBAzDQ,IAAI;;;;;AA6Db,OAAO,EAAE,IAAI,EAAE,CAAC"}

package/dist/components/card/Card.component.js

@@ -1,7 +1,8 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { createContext } from 'react';
-import styled from 'styled-components';
+import styled, { css } from 'styled-components';
 import { hex2RGB } from '../../utils';
+import { FocusVisibleStyle } from '../buttonv2/Buttonv2.component';
 const CardContext = createContext(null);
 function withCompoundCheck(Component) {
     return ({ children, className, ...rest }) => (_jsx(CardContext.Consumer, { children: (value) => {
@@ -62,18 +63,17 @@ const StyledCard = styled.div `
   }
 
   ${(props) => props.onClick && !props.disabled
-    ? `
-      cursor: pointer;
+    ? css `
+          cursor: pointer;
 
-      &:hover {
-        box-shadow: 0 0 0 2px ${props.theme.highlight};
-      }
+          &:hover {
+            box-shadow: 0 0 0 2px ${props.theme.highlight};
+          }
 
-      &:focus {
-        outline: 2px solid ${props.theme.buttonSecondary};
-        outline-offset: 2px;
-      }
-    `
+          &:focus {
+            ${FocusVisibleStyle}
+          }
+        `
     : ''};
 
   &.active {

package/dist/components/checkbox/Checkbox.component.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Checkbox.component.d.ts","sourceRoot":"","sources":["../../../src/lib/components/checkbox/Checkbox.component.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,mBAAmB,EAAc,MAAM,OAAO,CAAC;AAcrE,QAAA,MAAM,QAAQ;;;;;oBAHG,YAAY,gBAAgB,CAAC,KAAK,IAAI;4FA0BtD,CAAC;AAEF,OAAO,EAAE,QAAQ,EAAE,CAAC"}
+{"version":3,"file":"Checkbox.component.d.ts","sourceRoot":"","sources":["../../../src/lib/components/checkbox/Checkbox.component.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,mBAAmB,EAAc,MAAM,OAAO,CAAC;AAerE,QAAA,MAAM,QAAQ;;;;;oBAHG,YAAY,gBAAgB,CAAC,KAAK,IAAI;4FA0BtD,CAAC;AAEF,OAAO,EAAE,QAAQ,EAAE,CAAC"}

package/dist/components/checkbox/Checkbox.component.js

@@ -3,6 +3,7 @@ import { forwardRef } from 'react';
 import styled from 'styled-components';
 import { spacing, Stack } from '../../spacing';
 import { Text } from '../text/Text.component';
+import { FocusVisibleStyle } from '../buttonv2/Buttonv2.component';
 const Checkbox = forwardRef(({ disabled, checked, label, value, onChange, ...rest }, ref) => {
     return (_jsx(StyledCheckbox, { checked: checked, disabled: disabled, className: "sc-checkbox", children: _jsxs(Stack, { children: [_jsx("input", { type: "checkbox", checked: checked, disabled: disabled, value: value, onChange: onChange, ref: ref, ...rest }), label && _jsx(Text, { children: label })] }) }));
 });
@@ -76,8 +77,7 @@ const StyledCheckbox = styled.label `
   }
 
   [type='checkbox']:focus-visible:enabled {
-    outline: dashed ${spacing.r2} ${(props) => props.theme.selectedActive};
-    outline-offset: ${spacing.r2};
+    ${FocusVisibleStyle}
   }
 
   /* Disabled */

package/dist/components/dropdown/Dropdown.component.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Dropdown.component.d.ts","sourceRoot":"","sources":["../../../src/lib/components/dropdown/Dropdown.component.tsx"],"names":[],"mappings":";AAcA,MAAM,MAAM,IAAI,GAAG;IACjB,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,EAAE,CAAC,IAAI,EAAE,GAAG,KAAK,IAAI,CAAC;CAC9B,CAAC;AACF,KAAK,KAAK,GAAG,KAAK,CAAC,IAAI,CAAC,CAAC;AACzB,KAAK,KAAK,GAAG;IACX,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,EAAE,KAAK,CAAC;IACb,IAAI,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,OAAO,CAAC;CACjB,CAAC;AA0EF,iBAAS,QAAQ,CAAC,EAChB,KAAK,EACL,IAAI,EACJ,IAAI,EACJ,IAAa,EACb,OAA2B,EAC3B,KAAK,EACL,KAAY,EACZ,GAAG,IAAI,EACR,EAAE,KAAK,eAqEP;AAED,OAAO,EAAE,QAAQ,EAAE,CAAC"}
+{"version":3,"file":"Dropdown.component.d.ts","sourceRoot":"","sources":["../../../src/lib/components/dropdown/Dropdown.component.tsx"],"names":[],"mappings":";AAgBA,MAAM,MAAM,IAAI,GAAG;IACjB,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,EAAE,CAAC,IAAI,EAAE,GAAG,KAAK,IAAI,CAAC;CAC9B,CAAC;AACF,KAAK,KAAK,GAAG,KAAK,CAAC,IAAI,CAAC,CAAC;AACzB,KAAK,KAAK,GAAG;IACX,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,EAAE,KAAK,CAAC;IACb,IAAI,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,OAAO,CAAC;CACjB,CAAC;AA6DF,iBAAS,QAAQ,CAAC,EAChB,KAAK,EACL,IAAI,EACJ,IAAI,EACJ,IAAa,EACb,OAA2B,EAC3B,KAAK,EACL,KAAY,EACZ,GAAG,IAAI,EACR,EAAE,KAAK,eAgEP;AAED,OAAO,EAAE,QAAQ,EAAE,CAAC"}

package/dist/components/dropdown/Dropdown.component.js

@@ -1,13 +1,13 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-// @ts-nocheck
-import { useState, useCallback } from 'react';
-import styled, { css } from 'styled-components';
+import styled from 'styled-components';
 import { ButtonStyled, ButtonIcon, ButtonText, } from '../button/Button.component';
 import { zIndex } from '../../style/theme';
 import { spacing } from '../../spacing';
 import { fontSize } from '../../style/theme';
 import { getThemePropSelector } from '../../utils';
 import { Icon } from '../icon/Icon.component';
+import { useSelect } from 'downshift';
+import { FocusVisibleStyle } from '../buttonv2/Buttonv2.component';
 const DropdownStyled = styled.div `
   position: relative;
   user-select: none;
@@ -21,36 +21,14 @@ const DropdownMenuStyled = styled.ul `
   position: absolute;
   margin: 0;
   padding: 0;
+  top: 50px;
   border: 1px solid ${getThemePropSelector('backgroundLevel1')};
   z-index: ${zIndex.dropdown};
   max-height: 200px;
   min-width: 100%;
   overflow: auto;
   border-bottom: 0.3px solid ${getThemePropSelector('border')};
-  ${(props) => {
-    if (props.size &&
-        props.triggerSize &&
-        props.triggerSize.x + props.size.width > window.innerWidth) {
-        return css `
-        right: 0;
-        top: 100%;
-      `;
-    }
-    else if (props.size &&
-        props.triggerSize &&
-        props.triggerSize.y + props.size.height > window.innerHeight) {
-        return css `
-        left: 0;
-        bottom: ${props.triggerSize.height + 'px'};
-      `;
-    }
-    else {
-        return css `
-        left: 0;
-        top: 100%;
-      `;
-    }
-}};
+  display: ${(props) => (props.isOpen ? 'auto' : 'none')};
 `;
 const DropdownMenuItemStyled = styled.li `
   display: flex;
@@ -59,41 +37,47 @@ const DropdownMenuItemStyled = styled.li `
   white-space: nowrap;
   cursor: pointer;
   font-size: ${fontSize.base};
+  ${(props) => {
+    console.log(props.isSelected);
+    return props.isSelected
+        ? `background-color: ${props.theme.highlight};`
+        : `background-color: ${props.theme.backgroundLevel1};`;
+}}
 
-  ${css `
-    background-color: ${getThemePropSelector('backgroundLevel1')};
-    color: ${getThemePropSelector('textPrimary')};
-    border-top: 0.3px solid ${getThemePropSelector('border')};
-    border-left: 0.3px solid ${getThemePropSelector('border')};
-    border-right: 0.3px solid ${getThemePropSelector('border')};
-    &:hover {
-      background-color: ${getThemePropSelector('highlight')};
-    }
-    &:active {
-      background-color: ${getThemePropSelector('highlight')};
-    }
-  `};
+  color: ${getThemePropSelector('textPrimary')};
+  border-top: 0.3px solid ${getThemePropSelector('border')};
+  border-left: 0.3px solid ${getThemePropSelector('border')};
+  border-right: 0.3px solid ${getThemePropSelector('border')};
+
+  &:hover {
+    background-color: ${getThemePropSelector('highlight')};
+  }
+  &:active {
+    background-color: ${getThemePropSelector('highlight')};
+  }
 `;
 const Caret = styled.span `
   margin-left: ${spacing.r16};
 `;
-const TriggerStyled = ButtonStyled.withComponent('div');
+const Trigger = ButtonStyled.withComponent('div');
+const TriggerStyled = styled(Trigger) `
+  // :focus-visible is the keyboard-only version of :focus
+  &:focus-visible {
+    ${FocusVisibleStyle}
+    color: ${(props) => props.theme.textPrimary};
+  }
+`;
 function Dropdown({ items, text, icon, size = 'base', variant = 'buttonSecondary', title, caret = true, ...rest }) {
-    const [open, setOpen] = useState(false);
-    const [menuSize, setMenuSize] = useState();
-    const [triggerSize, setTriggerSize] = useState();
-    const refMenuCallback = useCallback((node) => {
-        if (node !== null) {
-            setMenuSize(node.getBoundingClientRect());
-        }
-    }, []);
-    const refTriggerCallback = useCallback((node) => {
-        if (node !== null) {
-            setTriggerSize(node.getBoundingClientRect());
-        }
-    }, []);
-    return (_jsx(DropdownStyled, { active: open, variant: variant, className: "sc-dropdown", ...rest, children: _jsxs(TriggerStyled, { variant: variant, size: size, className: "trigger", onBlur: () => setOpen(!open), onFocus: () => setOpen(!open), onClick: (event) => event.stopPropagation(), tabIndex: "0", title: title, ref: refTriggerCallback, children: [icon && (_jsx(ButtonIcon, { text: text, size: size, children: icon })), text && _jsx(ButtonText, { className: "sc-trigger-text", children: text }), caret && (_jsx(Caret, { children: _jsx(Icon, { name: "Dropdown-down" }) })), open && (_jsx(DropdownMenuStyled, { className: "menu-item", postion: 'right', ref: refMenuCallback, size: menuSize, triggerSize: triggerSize, children: items.map(({ label, onClick, ...itemRest }) => {
-                        return (_jsx(DropdownMenuItemStyled, { className: "menu-item-label", onClick: onClick, variant: variant, ...itemRest, children: label }, label));
-                    }) }))] }) }));
+    const { isOpen, getToggleButtonProps, getMenuProps, getItemProps, highlightedIndex, } = useSelect({
+        items,
+        itemToString: (item) => (item === null || item === void 0 ? void 0 : item.label) || '',
+    });
+    return (_jsx(DropdownStyled, { active: open, variant: variant, className: "sc-dropdown", ...rest, children: _jsxs(TriggerStyled, { variant: variant, size: size, className: "trigger", title: title, ...getToggleButtonProps(), children: [icon && (_jsx(ButtonIcon, { text: text, size: size, children: icon })), text && _jsx(ButtonText, { className: "sc-trigger-text", children: text }), caret && (_jsx(Caret, { children: _jsx(Icon, { name: "Dropdown-down" }) })), _jsx(DropdownMenuStyled, { className: "menu-item", isOpen: isOpen, ...getMenuProps(), children: items.map((item, index) => {
+                        return (_jsx(DropdownMenuItemStyled, { className: "menu-item-label", variant: item.variant, ...item, ...getItemProps({
+                                item,
+                                index,
+                                onClick: item.onClick,
+                            }), isSelected: index === highlightedIndex, children: item.label }, item.label));
+                    }) })] }) }));
 }
 export { Dropdown };

package/dist/components/inlineinput/InlineInput.d.ts

@@ -0,0 +1,17 @@
+/// <reference types="react" />
+import { InputProps } from '../inputv2/inputv2';
+import { UseMutationResult } from 'react-query';
+type InlineInputForm = {
+    value: string;
+};
+type InlineInputProps = {
+    defaultValue?: string;
+    confirmationModal?: {
+        title: JSX.Element;
+        body: JSX.Element;
+    };
+    changeMutation: UseMutationResult<unknown, unknown, InlineInputForm, unknown>;
+} & InputProps;
+export declare const InlineInput: ({ defaultValue, confirmationModal, changeMutation, ...props }: InlineInputProps) => JSX.Element;
+export {};
+//# sourceMappingURL=InlineInput.d.ts.map

package/dist/components/inlineinput/InlineInput.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"InlineInput.d.ts","sourceRoot":"","sources":["../../../src/lib/components/inlineinput/InlineInput.tsx"],"names":[],"mappings":";AAGA,OAAO,EAAS,UAAU,EAAE,MAAM,oBAAoB,CAAC;AAIvD,OAAO,EAAE,iBAAiB,EAAE,MAAM,aAAa,CAAC;AAWhD,KAAK,eAAe,GAAG;IACrB,KAAK,EAAE,MAAM,CAAC;CACf,CAAC;AACF,KAAK,gBAAgB,GAAG;IACtB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,iBAAiB,CAAC,EAAE;QAClB,KAAK,EAAE,GAAG,CAAC,OAAO,CAAC;QACnB,IAAI,EAAE,GAAG,CAAC,OAAO,CAAC;KACnB,CAAC;IACF,cAAc,EAAE,iBAAiB,CAAC,OAAO,EAAE,OAAO,EAAE,eAAe,EAAE,OAAO,CAAC,CAAC;CAC/E,GAAG,UAAU,CAAC;AAEf,eAAO,MAAM,WAAW,kEAKrB,gBAAgB,gBA+IlB,CAAC"}

package/dist/components/inlineinput/InlineInput.js

@@ -0,0 +1,85 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import styled from 'styled-components';
+import { Button } from '../buttonv2/Buttonv2.component';
+import { Icon } from '../icon/Icon.component';
+import { Input } from '../inputv2/inputv2';
+import { Modal } from '../modal/Modal.component';
+import { useToast } from '../toast/ToastProvider';
+import { useForm } from 'react-hook-form';
+import { Text } from '../text/Text.component';
+import { useState } from 'react';
+import { Stack, Wrap } from '../../spacing';
+const UnderlinedText = styled(Text) `
+  text-decoration-line: underline;
+  text-decoration-style: dashed;
+  cursor: text;
+`;
+export const InlineInput = ({ defaultValue, confirmationModal, changeMutation, ...props }) => {
+    const { register, handleSubmit, watch, reset } = useForm({
+        defaultValues: {
+            value: defaultValue,
+        },
+    });
+    const [isConfirmationModalOpened, setIsConfirmationModalOpened] = useState(false);
+    const handleSuccess = () => {
+        setIsConfirmationModalOpened(false);
+        setIsEditing(false);
+        setIsHover(false);
+    };
+    const onSubmit = (data) => {
+        if (confirmationModal) {
+            setIsConfirmationModalOpened(true);
+        }
+        else {
+            changeMutation.mutate(data, {
+                onSuccess: () => {
+                    handleSuccess();
+                },
+                onError: () => {
+                    showToast({
+                        open: true,
+                        status: 'error',
+                        message: 'An error occurred while updating the value',
+                    });
+                },
+            });
+        }
+    };
+    const { showToast } = useToast();
+    const [isHover, setIsHover] = useState(false);
+    const [isEditing, setIsEditing] = useState(false);
+    const handleReset = () => {
+        reset();
+        setIsEditing(false);
+        setIsHover(false);
+    };
+    //handle esc key to cancel editing
+    const handleKeyDown = (event) => {
+        if (event.key === 'Escape') {
+            handleReset();
+        }
+    };
+    if (isEditing) {
+        return (_jsxs(_Fragment, { children: [_jsx("form", { onSubmit: handleSubmit(onSubmit), children: _jsxs(Stack, { children: [_jsx(Input, { ...register('value'), size: "1/3", autoFocus: true, onKeyDown: handleKeyDown, ...props }), _jsx(Button, { icon: _jsx(Icon, { name: "Close" }), tooltip: {
+                                    overlay: 'Cancel',
+                                }, type: "reset", variant: "outline", onClick: handleReset }), _jsx(Button, { icon: _jsx(Icon, { name: "Check" }), tooltip: {
+                                    overlay: 'Save',
+                                }, variant: "primary", type: "submit", isLoading: changeMutation.isLoading })] }) }), confirmationModal && (_jsx(Modal, { isOpen: isConfirmationModalOpened, title: confirmationModal.title, footer: _jsxs(Wrap, { children: [_jsx("p", {}), _jsxs(Stack, { children: [_jsx(Button, { label: "Cancel", variant: "outline", onClick: () => setIsConfirmationModalOpened(false) }), _jsx(Button, { label: "Confirm", variant: "primary", isLoading: changeMutation.isLoading, onClick: () => {
+                                            changeMutation.mutate(watch(), {
+                                                onSuccess: () => {
+                                                    handleSuccess();
+                                                },
+                                                onError: () => {
+                                                    showToast({
+                                                        open: true,
+                                                        status: 'error',
+                                                        message: 'An error occurred while updating the value',
+                                                    });
+                                                },
+                                            });
+                                        } })] })] }), children: confirmationModal.body }))] }));
+    }
+    return (_jsxs(Stack, { onMouseEnter: () => setIsHover(true), onMouseLeave: () => setIsHover(false), onFocus: () => setIsHover(true), onBlur: () => setIsHover(false), children: [_jsx(UnderlinedText, { children: watch('value') }), _jsx(Button, { icon: _jsx(Icon, { name: "Pencil" }), tooltip: {
+                    overlay: 'Edit',
+                }, variant: "primary", onClick: () => setIsEditing(true), style: { opacity: !isHover ? '0' : '1' } })] }));
+};

package/dist/components/inputv2/inputv2.d.ts

@@ -1,6 +1,14 @@
 import { InputHTMLAttributes } from 'react';
+import { IconName } from '../icon/Icon.component';
 export declare const convertSizeToRem: (size?: '1' | '2/3' | '1/2' | '1/3') => "14rem" | "6rem" | "10rem" | "20.5rem";
 type InputSize = '1' | '2/3' | '1/2' | '1/3';
+export type InputProps = {
+    error?: string;
+    id: string;
+    leftIcon?: IconName;
+    rightIcon?: IconName;
+    size?: InputSize;
+} & Omit<InputHTMLAttributes<HTMLInputElement>, 'size'>;
 export declare const Input: import("react").ForwardRefExoticComponent<{
     error?: string | undefined;
     id: string;

package/dist/components/inputv2/inputv2.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"inputv2.d.ts","sourceRoot":"","sources":["../../../src/lib/components/inputv2/inputv2.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAc,mBAAmB,EAAE,MAAM,OAAO,CAAC;AAQxD,eAAO,MAAM,gBAAgB,UAAW,GAAG,GAAG,KAAK,GAAG,KAAK,GAAG,KAAK,2CAKlE,CAAC;AA4EF,KAAK,SAAS,GAAG,GAAG,GAAG,KAAK,GAAG,KAAK,GAAG,KAAK,CAAC;AAU7C,eAAO,MAAM,KAAK;;QANZ,MAAM;;;;0GA6DX,CAAC"}
+{"version":3,"file":"inputv2.d.ts","sourceRoot":"","sources":["../../../src/lib/components/inputv2/inputv2.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAc,mBAAmB,EAAE,MAAM,OAAO,CAAC;AAMxD,OAAO,EAAQ,QAAQ,EAAE,MAAM,wBAAwB,CAAC;AAExD,eAAO,MAAM,gBAAgB,UAAW,GAAG,GAAG,KAAK,GAAG,KAAK,GAAG,KAAK,2CAKlE,CAAC;AA4EF,KAAK,SAAS,GAAG,GAAG,GAAG,KAAK,GAAG,KAAK,GAAG,KAAK,CAAC;AAE7C,MAAM,MAAM,UAAU,GAAG;IACvB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,EAAE,EAAE,MAAM,CAAC;IACX,QAAQ,CAAC,EAAE,QAAQ,CAAC;IACpB,SAAS,CAAC,EAAE,QAAQ,CAAC;IACrB,IAAI,CAAC,EAAE,SAAS,CAAC;CAClB,GAAG,IAAI,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,EAAE,MAAM,CAAC,CAAC;AAExD,eAAO,MAAM,KAAK;;QANZ,MAAM;;;;0GA6DX,CAAC"}

package/dist/components/modal/Modal.component.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Modal.component.d.ts","sourceRoot":"","sources":["../../../src/lib/components/modal/Modal.component.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAA2B,MAAM,OAAO,CAAC;AAU3D,KAAK,KAAK,GAAG;IACX,MAAM,EAAE,OAAO,CAAC;IAChB,KAAK,CAAC,EAAE,MAAM,IAAI,CAAC;IACnB,KAAK,EAAE,SAAS,CAAC;IACjB,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,QAAQ,EAAE,SAAS,CAAC;IACpB,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,IAAI,CAAC,EAAE,QAAQ,GAAG,aAAa,CAAC;CACjC,CAAC;AA0CF,QAAA,MAAM,KAAK,wEASR,KAAK,uCAiDP,CAAC;AAEF,OAAO,EAAE,KAAK,EAAE,CAAC"}
+{"version":3,"file":"Modal.component.d.ts","sourceRoot":"","sources":["../../../src/lib/components/modal/Modal.component.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAsC,MAAM,OAAO,CAAC;AAUtE,KAAK,KAAK,GAAG;IACX,MAAM,EAAE,OAAO,CAAC;IAChB,KAAK,CAAC,EAAE,MAAM,IAAI,CAAC;IACnB,KAAK,EAAE,SAAS,CAAC;IACjB,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,QAAQ,EAAE,SAAS,CAAC;IACpB,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,IAAI,CAAC,EAAE,QAAQ,GAAG,aAAa,CAAC;CACjC,CAAC;AA0CF,QAAA,MAAM,KAAK,wEASR,KAAK,uCAmEP,CAAC;AAEF,OAAO,EAAE,KAAK,EAAE,CAAC"}

package/dist/components/modal/Modal.component.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { useLayoutEffect, useRef } from 'react';
+import { useEffect, useLayoutEffect, useRef } from 'react';
 import ReactDom from 'react-dom';
 import styled from 'styled-components';
 import { Wrap, spacing } from '../../spacing';
@@ -55,6 +55,23 @@ const Modal = ({ isOpen, close, title, children, footer, subTitle, role = 'dialo
             document.body && document.body.removeChild(modalContainer.current);
         };
     }, [modalContainer]);
+    useEffect(() => {
+        if (isOpen) {
+            //Auto focus the modal when it opens
+            modalContainer.current.setAttribute('tabindex', '0');
+            modalContainer.current.focus();
+            //Listen to esc key to close the modal
+            const handleEsc = (event) => {
+                if (event.key === 'Escape') {
+                    close && close();
+                }
+            };
+            document.addEventListener('keydown', handleEsc);
+            return () => {
+                document.removeEventListener('keydown', handleEsc);
+            };
+        }
+    }, [isOpen]);
     return isOpen
         ? ReactDom.createPortal(_jsx(ModalContainer, { className: "sc-modal", role: role, "aria-modal": "true", "aria-labelledby": "dialog_label", "aria-describedby": "dialog_desc", ...rest, children: _jsxs(ModalContent, { className: "sc-modal-content", children: [_jsx(ModalHeader, { className: "sc-modal-header", children: _jsxs(Wrap, { style: { flex: 1 }, children: [_jsx(Text, { variant: "Larger", id: "dialog_label", children: title }), close ? (_jsx(Button, { icon: _jsx(Icon, { name: "Close" }), onClick: close, tooltip: {
                                         overlay: 'Close modal',

package/dist/components/navbar/Navbar.component.d.ts

@@ -10,6 +10,7 @@ type Tab = {
     selected?: boolean;
     onClick?: (arg0: any) => void;
     link?: JSX.Element;
+    render?: JSX.Element;
 };
 export type Props = {
     onToggleClick?: () => void;

package/dist/components/navbar/Navbar.component.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Navbar.component.d.ts","sourceRoot":"","sources":["../../../src/lib/components/navbar/Navbar.component.tsx"],"names":[],"mappings":";AAOA,OAAO,EAAY,IAAI,EAAE,MAAM,gCAAgC,CAAC;AAEhE,KAAK,MAAM,GAAG;IACZ,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,CAAC,EAAE,KAAK,CAAC,IAAI,CAAC,CAAC;CACrB,CAAC;AACF,KAAK,OAAO,GAAG,KAAK,CAAC,MAAM,CAAC,CAAC;AAC7B,KAAK,GAAG,GAAG;IACT,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,CAAC,IAAI,EAAE,GAAG,KAAK,IAAI,CAAC;IAC9B,IAAI,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC;CACpB,CAAC;AACF,MAAM,MAAM,KAAK,GAAG;IAClB,aAAa,CAAC,EAAE,MAAM,IAAI,CAAC;IAC3B,YAAY,EAAE,OAAO,CAAC;IACtB,IAAI,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,CAAC;CACnB,CAAC;AAoJF,iBAAS,MAAM,CAAC,EACd,aAAa,EACb,IAAI,EACJ,IAAS,EACT,YAAiB,EACjB,GAAG,IAAI,EACR,EAAE,KAAK,eAwDP;AAED,eAAO,MAAM,MAAM,eAAS,CAAC"}
+{"version":3,"file":"Navbar.component.d.ts","sourceRoot":"","sources":["../../../src/lib/components/navbar/Navbar.component.tsx"],"names":[],"mappings":";AAMA,OAAO,EAAY,IAAI,EAAE,MAAM,gCAAgC,CAAC;AAGhE,KAAK,MAAM,GAAG;IACZ,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,CAAC,EAAE,KAAK,CAAC,IAAI,CAAC,CAAC;CACrB,CAAC;AACF,KAAK,OAAO,GAAG,KAAK,CAAC,MAAM,CAAC,CAAC;AAC7B,KAAK,GAAG,GAAG;IACT,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,CAAC,IAAI,EAAE,GAAG,KAAK,IAAI,CAAC;IAC9B,IAAI,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC;IACnB,MAAM,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC;CACtB,CAAC;AACF,MAAM,MAAM,KAAK,GAAG;IAClB,aAAa,CAAC,EAAE,MAAM,IAAI,CAAC;IAC3B,YAAY,EAAE,OAAO,CAAC;IACtB,IAAI,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,CAAC;CACnB,CAAC;AA2JF,iBAAS,MAAM,CAAC,EACd,aAAa,EACb,IAAI,EACJ,IAAS,EACT,YAAiB,EACjB,GAAG,IAAI,EACR,EAAE,KAAK,eAwDP;AAED,eAAO,MAAM,MAAM,eAAS,CAAC"}