@veracity/vui 2.20.2 → 2.21.0-beta.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@veracity/vui",
-  "version": "2.20.2",
+  "version": "2.21.0-beta.0",
   "description": "Veracity UI is a React component library crafted for use within Veracity applications and pages. Based on Styled Components and @xstyled.",
   "module": "./dist/esm/index.js",
   "main": "./dist/cjs/index.js",

package/src/dialog/dialog.tsx

@@ -39,6 +39,7 @@ export const Dialog = vui<'div', DialogProps>((props, ref) => {
     children,
     className,
     closeButton,
+    disableBackdropClose,
     footer,
     header,
     icon,
@@ -76,7 +77,7 @@ export const Dialog = vui<'div', DialogProps>((props, ref) => {
 
   return (
     <DialogProvider value={context}>
-      <Modal {...{ isOpen, onClose }} {...modalProps}>
+      <Modal {...{ disableBackdropClose, isOpen, onClose }} {...modalProps}>
         <DialogBase
           className={cs('vui-dialog', className)}
           id={dialogId}

package/src/dialog/dialog.types.ts

@@ -35,13 +35,15 @@ export type DialogProps = SystemProps &
     cancelButton?: DialogCancelButtonProps | JSX.Element
     /** Socket for a close icon button in the Dialog Header. */
     closeButton?: boolean | DialogCloseButtonProps | JSX.Element
+    /** Clicking Backdrop element will not trigger 'onClose'. */
+    disableBackdropClose?: boolean
     /** Socket for a footer with buttons below Dialog Body. */
     footer?: DialogFooterProps | JSX.Element
     /** Socket for a header with title and icon above the Dialog Body */
     header?: DialogHeaderProps | JSX.Element
     /** Socket for a custom icon in the Dialog Header. */
     icon?: IconProp | DialogIconProps | JSX.Element
-    /** Props passed to the internal Modal component. */
+    /** The props being passed into the internal Modal component. */
     modalProps?: ModalProps
     /** Adds an icon for a given status, such as error or warning. */
     status?: DialogStatus

package/src/link/link.tsx

@@ -1,4 +1,4 @@
-import React, { useMemo } from 'react'
+import { useMemo } from 'react'
 
 import { styled, useStyleConfig, vui, VuiComponent } from '../core'
 import { cs, filterUndefined, isReactText, isString } from '../utils'
@@ -7,7 +7,9 @@ import { LinkProps } from './link.types'
 import LinkIcon from './linkIcon'
 import LinkText from './linkText'
 
-export const LinkBase = styled.aBox`
+export const LinkBase = styled.aBox.attrs((props: LinkProps) => ({
+  isUnderlined: props.isUnderlined || false,
+}))`
   align-items: center;
   border-radius: none;
   cursor: pointer;
@@ -17,6 +19,24 @@ export const LinkBase = styled.aBox`
   text-decoration: none;
   transition-duration: instant;
   width: fit-content;
+  position: relative;
+
+  &::after {
+    content: '';
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    width: 100%;
+    height: ${props => (props.isUnderlined ? '1px' : '0')};
+    background-color: currentColor;
+    opacity: ${props => (props.isUnderlined ? '1' : '0')};
+    transition: height 0.2s ease-in-out;
+  }
+
+  &:hover::after {
+    height: 2px;
+    opacity: 1;
+  }
 `
 
 /**
@@ -27,8 +47,7 @@ export const Link = vui<'a', LinkProps>((props, ref) => {
   const {
     children,
     className,
-    decoration,
-    hoverDecoration = 'underline',
+    fontWeight,
     iconLeft,
     iconRight,
     isExternal,
@@ -44,10 +63,9 @@ export const Link = vui<'a', LinkProps>((props, ref) => {
   const context = useMemo(() => filterUndefined({ size, variant }), [size, variant])
 
   const aliasedProps = filterUndefined({
-    fontWeight: weight,
+    fontWeight: weight || fontWeight,
     rel: isExternal ? 'noopener' : undefined,
     target: isExternal ? '_blank' : undefined,
-    textDecoration: decoration ?? (isUnderlined ? 'underline' : undefined),
   })
 
   return (
@@ -55,16 +73,14 @@ export const Link = vui<'a', LinkProps>((props, ref) => {
       <LinkBase
         className={cs('vui-link', className)}
         focusRing={2}
-        hoverTextDecoration={hoverDecoration}
+        isUnderlined={isUnderlined}
         ref={ref}
         {...styles.container}
         {...aliasedProps}
         {...rest}
       >
         {isString(iconLeft) ? <LinkIcon mr={1} name={iconLeft} /> : iconLeft}
-
         {children ?? (isReactText(text) ? <LinkText text={text} /> : text)}
-
         {isString(iconRight) ? <LinkIcon ml={1} name={iconRight} /> : iconRight}
       </LinkBase>
     </LinkProvider>

package/src/select/select.types.ts

@@ -50,7 +50,7 @@ export type SelectProps = ThemingProps<'Select'> &
     readOnly?: boolean
     /** Custom select button slot. */
     selectButton?: ReactNode
-    /** Displays a filter input to limit the number of options. */
+    /** Displays a filter input to limit the number of options. Important: it takes effect only if the options array is provided. */
     showOptionsFilter?: boolean
   }
 

package/src/tooltip/consts.ts

@@ -14,6 +14,41 @@ export const pointerPlacement = {
     right: 'auto',
     translate: '-50%, 0',
   },
+  'top-start': {
+    top: 'auto',
+    bottom: `-${pointerSize / 2}px`,
+    left: pointerSize * 2,
+    right: undefined,
+    translate: '-50%, 0',
+  },
+  'top-end': {
+    top: 'auto',
+    bottom: `-${pointerSize / 2}px`,
+    left: undefined,
+    right: pointerSize,
+    translate: '-50%, 0',
+  },
+  right: {
+    top: '50%',
+    bottom: 'auto',
+    left: '2px',
+    right: 'auto',
+    translate: '0, -50%',
+  },
+  'right-start': {
+    top: `${pointerSize * 1.5}px`,
+    bottom: 'auto',
+    left: '2px',
+    right: 'auto',
+    translate: '0, -50%',
+  },
+  'right-end': {
+    top: 'auto',
+    bottom: `${pointerSize / 2}px`,
+    left: '2px',
+    right: 'auto',
+    translate: '0, -50%',
+  },
   bottom: {
     top: `-${pointerSize / 2}px`,
     bottom: 'auto',
@@ -21,18 +56,39 @@ export const pointerPlacement = {
     right: 'auto',
     translate: '-50%, 0',
   },
+  'bottom-start': {
+    top: `-${pointerSize / 2}px`,
+    bottom: 'auto',
+    left: pointerSize * 2,
+    right: undefined,
+    translate: '-50%, 0',
+  },
+  'bottom-end': {
+    top: `-${pointerSize / 2}px`,
+    bottom: 'auto',
+    left: undefined,
+    right: pointerSize,
+    translate: '-50%, 0',
+  },
   left: {
-    top: `50%`,
+    top: '50%',
     bottom: 'auto',
     left: 'auto',
     right: '-4px',
     translate: '-50%, -50%',
   },
-  right: {
-    top: `50%`,
+  'left-start': {
+    top: `${pointerSize * 1.5}px`,
     bottom: 'auto',
-    left: '2px',
-    right: 'auto',
-    translate: '0, -50%',
+    left: 'auto',
+    right: '-4px',
+    translate: '-50%, -50%',
+  },
+  'left-end': {
+    top: 'auto',
+    bottom: `${pointerSize / 2}px`,
+    left: 'auto',
+    right: '-4px',
+    translate: '-50%, -50%',
   },
 }

package/src/tooltip/tooltip.types.ts

@@ -7,7 +7,19 @@ export interface TooltipProps extends ChildrenProp {
   /** Displays given text at the tooltip. */
   text?: string
   /** Tooltip position. */
-  placement?: 'top' | 'left' | 'bottom' | 'right'
+  placement?:
+    | 'top'
+    | 'top-start'
+    | 'top-end'
+    | 'right'
+    | 'right-start'
+    | 'right-end'
+    | 'bottom'
+    | 'bottom-start'
+    | 'bottom-end'
+    | 'left'
+    | 'left-start'
+    | 'left-end'
   /** Sets maximum width to the tooltip body. */
   maxWidth?: string
   /** Link text that will be concatenated to the end of the tooltip text. */