@loadsmart/loadsmart-ui 5.19.2 → 5.20.0

package/src/components/Popover/Popover.tsx

@@ -1,21 +1,153 @@
-import React from 'react'
-import styled from 'styled-components'
+import React, { useMemo } from 'react'
+import { useFloating, autoUpdate } from '@floating-ui/react-dom'
+import { offset, flip, shift, arrow } from '@floating-ui/core'
+import type { Placement, MiddlewareState } from '@floating-ui/core'
 
-import { getToken as token } from 'theming'
+import type {
+  PopoverAlign,
+  PopoverFloatingProps,
+  PopoverPosition,
+  PopoverProps,
+  PopoverReferenceProps,
+  UsePopoverReturn,
+} from './Popover.types'
 
-import type { HTMLAttributes } from 'react'
+const PopoverContext = React.createContext<UsePopoverReturn | undefined>(undefined)
 
-export type PopoverProps = HTMLAttributes<HTMLDivElement>
+export function usePopover(): UsePopoverReturn {
+  const value = React.useContext(PopoverContext)
 
-const PopoverWrapper = styled.div`
-  background: ${token('popover-background')};
-  border: 1px solid ${token('popover-border-color')};
-  border-radius: ${token('popover-border-radius')};
-  box-shadow: ${token('popover-shadow')};
-`
+  if (!value) {
+    throw new Error('usePopover must be used within a <Popover> Provider')
+  }
 
-function Popover({ children, ...others }: PopoverProps): JSX.Element {
-  return <PopoverWrapper {...others}>{children}</PopoverWrapper>
+  return value
 }
 
+function Popover(props: PopoverProps): JSX.Element {
+  const arrowRef = React.useRef<HTMLElement | null>(null)
+
+  const { position = 'bottom', align = 'start', strategy = 'fixed' } = props
+
+  const desiredPlacement = `${position}${align === 'center' ? '' : `-${align}`}` as Placement
+
+  const result = useFloating({
+    placement: desiredPlacement,
+    strategy,
+    middleware: [
+      offset(10),
+      flip(),
+      shift(),
+      {
+        name: 'arrow',
+        fn(args: MiddlewareState) {
+          if (arrowRef.current) {
+            return arrow({ element: arrowRef.current, padding: 8 }).fn(args)
+          }
+
+          return {}
+        },
+      },
+    ],
+    // TODO: FloatingUI docs states that `autoUpdate` is expensive.
+    // This should be properly investidated since it's the way to
+    // update fixed positions after scrolling.
+    whileElementsMounted: autoUpdate,
+  })
+
+  const registerArrow = React.useCallback(
+    (node: HTMLElement) => {
+      arrowRef.current = node
+      result.update()
+    },
+    [result]
+  )
+
+  const [resultPosition = position, resultAlign = align] = result.placement.split('-') as [
+    PopoverPosition,
+    PopoverAlign
+  ]
+
+  const value = useMemo(
+    () => ({
+      strategy,
+      register: {
+        reference: result.refs.setReference,
+        floating: result.refs.setFloating,
+        arrow: registerArrow,
+      },
+      result: {
+        floating: {
+          top: result.y ?? 0,
+          left: result.x ?? 0,
+        },
+        arrow: { top: result.middlewareData.arrow?.y, left: result.middlewareData.arrow?.x },
+        position: resultPosition,
+        align: resultAlign,
+      },
+    }),
+    [
+      registerArrow,
+      result.refs.setFloating,
+      result.middlewareData.arrow?.x,
+      result.middlewareData.arrow?.y,
+      result.refs.setReference,
+      result.x,
+      result.y,
+      resultAlign,
+      resultPosition,
+      strategy,
+    ]
+  )
+
+  return <PopoverContext.Provider value={value}>{props.children}</PopoverContext.Provider>
+}
+
+function PopoverReference({ children, ...others }: PopoverReferenceProps): JSX.Element {
+  const ref = React.useRef<HTMLDivElement | null>(null)
+  const { register } = usePopover()
+
+  React.useLayoutEffect(() => {
+    if (ref.current) {
+      register.reference(ref.current)
+    }
+  }, [register])
+
+  return (
+    <div ref={ref} {...others}>
+      {children}
+    </div>
+  )
+}
+
+function PopoverFloating({ children, style, ...others }: PopoverFloatingProps): JSX.Element {
+  const { register, result, strategy } = usePopover()
+
+  const ref = React.useRef<HTMLDivElement | null>(null)
+
+  React.useLayoutEffect(() => {
+    if (ref.current) {
+      register.floating(ref.current)
+    }
+  }, [register])
+
+  return (
+    <div
+      ref={ref}
+      {...others}
+      style={{
+        position: strategy,
+        top: result.floating.top,
+        left: result.floating.left,
+        ...style,
+      }}
+    >
+      {children}
+    </div>
+  )
+}
+
+Popover.Floating = PopoverFloating
+Popover.Reference = PopoverReference
+
 export default Popover

package/src/components/Popover/Popover.types.ts

@@ -0,0 +1,41 @@
+import type { HTMLAttributes, MutableRefObject, PropsWithChildren } from 'react'
+
+export interface UsePopoverReturn {
+  register: {
+    reference: (el: HTMLElement) => void
+    floating: (el: HTMLElement) => void
+    arrow: (el: HTMLElement) => void
+  }
+  result: {
+    floating: {
+      top: number
+      left: number
+    }
+    arrow: {
+      top: number | undefined
+      left: number | undefined
+    }
+    position: PopoverPosition
+    align: PopoverAlign
+  }
+  strategy: 'fixed' | 'absolute'
+}
+
+export type PopoverPosition = 'top' | 'bottom' | 'right' | 'left'
+export type PopoverAlign = 'start' | 'center' | 'end'
+
+export interface PopoverPlacement {
+  position?: PopoverPosition
+  align?: PopoverAlign
+}
+
+export type PopoverProps = PropsWithChildren<
+  PopoverPlacement & {
+    strategy?: UsePopoverReturn['strategy']
+    arrow?: MutableRefObject<HTMLElement | null>
+  }
+>
+
+export type PopoverReferenceProps = HTMLAttributes<HTMLDivElement>
+
+export type PopoverFloatingProps = HTMLAttributes<HTMLDivElement>

package/src/components/Popover/index.ts

@@ -1,2 +1,11 @@
-export { default as Popover } from './Popover'
-export type { PopoverProps } from './Popover'
+export { default as Popover, usePopover } from './Popover'
+
+export type {
+  PopoverProps,
+  PopoverFloatingProps,
+  PopoverReferenceProps,
+  PopoverPlacement,
+  PopoverPosition,
+  PopoverAlign,
+  UsePopoverReturn,
+} from './Popover.types'

package/src/components/Select/Select.test.tsx

@@ -341,7 +341,7 @@ describe('Select', () => {
 
         expect(firstSelection).toHaveTextContent(firstOption.label)
         expect(secondSelection).toHaveTextContent(secondOption.label)
-      })
+      }, 30_000)
 
       it('unselects a selected option keeping selected the others', async () => {
         const [firstOption, secondOption, thirdOption] = generator.pickset([...FRUITS], 3)
@@ -525,7 +525,7 @@ describe('Select', () => {
         const optionText = getOptionText(option)
         expect(selectedOptions[index]).toHaveTextContent(optionText)
       }
-    })
+    }, 30_000)
 
     it.each([[{ multiple: true }], [{ multiple: false }]])(
       'overrides the empty component with %s',
@@ -1037,6 +1037,6 @@ describe('Select', () => {
 
       await selectEvent.expand(searchInput)
       expect(screen.getByText('No more options.')).toBeInTheDocument()
-    })
+    }, 30_000)
   })
 })

package/src/components/Select/SelectTrigger.tsx

@@ -7,6 +7,8 @@ import { TextField, Trailing } from 'components/TextField'
 import focusable from 'styles/focusable'
 
 import type { SelectTriggerProps } from './Select.types'
+import { isFunction } from '@loadsmart/utils-function'
+import { usePopover } from 'components/Popover'
 
 const GenericSelectTrigger = styled(GenericDropdownTrigger)`
   background: ${token('color-neutral-white')};
@@ -47,6 +49,15 @@ const SelectTrigger = forwardRef<HTMLInputElement, SelectTriggerProps>(function
 ) {
   const { className, ...others } = props
   const { disabled, expanded, toggle } = useContext(DropdownContext)
+  const triggerRef = React.useRef<HTMLElement | null>(null)
+
+  const { register } = usePopover()
+
+  React.useEffect(() => {
+    if (triggerRef.current) {
+      register.reference(triggerRef.current)
+    }
+  }, [register])
 
   function handleClick() {
     if (!expanded) {
@@ -59,7 +70,13 @@ const SelectTrigger = forwardRef<HTMLInputElement, SelectTriggerProps>(function
       <SelectTriggerSearchField
         data-testid="select-trigger-search-field"
         {...others}
-        ref={ref}
+        ref={(node) => {
+          if (isFunction(ref)) {
+            ref(node)
+          }
+
+          triggerRef.current = node
+        }}
         type="search"
         disabled={disabled}
         onClick={handleClick}

package/src/components/Table/Table.stories.tsx

@@ -12,7 +12,6 @@ import type { RowFixture } from './Table.fixtures'
 import { Button } from 'components/Button'
 import { Text } from 'components/Text'
 import { Switch } from 'components/Switch'
-import { Icon } from 'components/Icon'
 
 export default {
   title: 'Components/Table',

package/src/components/Table/Table.tsx

@@ -451,7 +451,7 @@ function TablePicker<T>({
   ...props
 }: TablePickerProps<T>): JSX.Element {
   return (
-    <Dropdown>
+    <Dropdown align={align}>
       <StyledPickerTrigger trailing={null} scale="small" {...props}>
         {propsTrigger !== undefined ? (
           ({ expanded }) => (isFunction(propsTrigger) ? propsTrigger(expanded) : propsTrigger)
@@ -459,7 +459,7 @@ function TablePicker<T>({
           <TriggerIcon />
         )}
       </StyledPickerTrigger>
-      <Dropdown.Menu align={align} role="listbox">
+      <Dropdown.Menu role="listbox">
         {children ||
           options?.map((option, i) => (
             <TablePickerItem

package/src/components/TablePagination/RowsPerPage.tsx

@@ -6,14 +6,17 @@ import { Icon } from 'components/Icon'
 import type { RowsPerPageProps } from './TablePagination.types'
 import type { ButtonProps } from 'components/Button'
 import { NoPaddingButton } from './TablePagination.styles'
+import { Popover } from 'components/Popover'
 
 const TriggerButton = (props: Omit<ButtonProps, 'scale' | 'variant'>) => {
   const { toggle } = React.useContext(DropdownContext)
 
   return (
-    <NoPaddingButton data-testid="rows-per-page-button" onClick={toggle} {...props}>
-      <Icon name="caret-down" size={16} color="neutral-darker" />
-    </NoPaddingButton>
+    <Popover.Reference>
+      <NoPaddingButton data-testid="rows-per-page-button" onClick={toggle} {...props}>
+        <Icon name="caret-down" size={16} color="neutral-darker" />
+      </NoPaddingButton>
+    </Popover.Reference>
   )
 }
 
@@ -25,6 +28,8 @@ function RowsPerPage({
   count,
   rowsPerPageOptions,
   disabled = false,
+  position = 'bottom',
+  align = 'start',
 }: RowsPerPageProps): JSX.Element {
   const getItemsRange = () => {
     if (!count) {
@@ -55,7 +60,7 @@ function RowsPerPage({
           {count}
         </Text>
       </Text>
-      <Dropdown>
+      <Dropdown position={position} align={align}>
         <TriggerButton disabled={disabled} />
         <Dropdown.Menu>
           {rowsPerPageOptions.map((option) => (

package/src/components/TablePagination/TablePagination.tsx

@@ -17,6 +17,7 @@ function TablePagination(props: TablePaginationProps): JSX.Element {
     rowsPerPage = 50,
     rowsPerPageOptions = [10, 25, 50, 100],
     disabled = false,
+    rowsPerPagePlacement,
     ...rest
   } = props
 
@@ -30,6 +31,8 @@ function TablePagination(props: TablePaginationProps): JSX.Element {
         rowsPerPageOptions={rowsPerPageOptions}
         labelRowsPerPage={labelRowsPerPage}
         disabled={disabled || !count}
+        position={rowsPerPagePlacement?.position}
+        align={rowsPerPagePlacement?.align}
       />
       <TablePaginationActions
         variant={variant}

package/src/components/TablePagination/TablePagination.types.ts

@@ -1,4 +1,5 @@
 import type { GroupProps } from 'components/Layout/Group'
+import type { PopoverPlacement } from 'components/Popover'
 
 export interface TablePaginationProps extends GroupProps {
   /**
@@ -44,6 +45,11 @@ export interface TablePaginationProps extends GroupProps {
    * Disable all the pagination actions
    */
   disabled?: boolean
+  /**
+   * Customizes the placement of the rows per page select field.
+   * @default { position: 'bottom', align: 'start' }
+   */
+  rowsPerPagePlacement?: PopoverPlacement
 }
 
 export type TablePaginationActionsProps = Omit<
@@ -55,8 +61,9 @@ export type TablePaginationActionsProps = Omit<
 
 export type RowsPerPageProps = Omit<
   TablePaginationProps,
-  'rowsPerPageOptions' | 'onPageChange' | 'rowsPerPage'
-> & {
-  rowsPerPageOptions: number[]
-  rowsPerPage: number
-}
+  'rowsPerPageOptions' | 'onPageChange' | 'rowsPerPage' | 'align'
+> &
+  PopoverPlacement & {
+    rowsPerPageOptions: number[]
+    rowsPerPage: number
+  }

package/src/components/Tooltip/Tooltip.tsx

@@ -4,10 +4,12 @@ import styled, { css } from 'styled-components'
 
 import type ColorScheme from 'utils/types/ColorScheme'
 import focusable from 'styles/focusable'
-import transition from 'styles/transition'
-import font from 'styles/font'
 import conditional, { whenProps } from 'tools/conditional'
 import { getToken as token } from 'theming'
+import { Popover, usePopover } from 'components/Popover'
+import typography from 'styles/typography'
+
+import type { PopoverAlign, PopoverPosition } from 'components/Popover'
 
 export enum TooltipPosition {
   Top = 'top',
@@ -25,8 +27,8 @@ export enum TooltipAlign {
 export interface TooltipProps extends HTMLAttributes<HTMLDivElement> {
   message: ReactNode
   scheme?: ColorScheme
-  position?: TooltipPosition
-  align?: TooltipAlign
+  position?: TooltipPosition | PopoverPosition
+  align?: TooltipAlign | PopoverAlign
 }
 
 type ContainerProps = Pick<TooltipProps, 'scheme'>
@@ -46,15 +48,8 @@ const Container = styled.div<ContainerProps>`
   `}
 `
 
-type BubbleProps = Pick<TooltipProps, 'position' | 'align'>
-
-const Bubble = styled.span<BubbleProps>`
-  ${font({
-    weight: 'font-weight-medium',
-    height: 'font-height-3',
-  })}
-
-  ${transition()}
+const Bubble = styled.div`
+  ${typography('body')}
 
   white-space: initial;
 
@@ -62,7 +57,6 @@ const Bubble = styled.span<BubbleProps>`
   max-width: ${token('tooltip-max-width')};
   width: max-content;
 
-  position: absolute;
   z-index: ${token('z-index-tooltip')};
 
   background: ${token('tooltip-background')};
@@ -74,108 +68,85 @@ const Bubble = styled.span<BubbleProps>`
   color: ${token('tooltip-color')};
   font-size: ${token('tooltip-font-size')};
   line-height: ${token('tooltip-font-height')};
+`
 
-  ${({ position }) =>
-    position === TooltipPosition.Top &&
-    css`
-      top: -16px;
-      left: 50%;
-
-      transform: ${conditional({
-        'translate(-10%, -100%)': whenProps({ align: TooltipAlign.Start }),
-        'translate(-50%, -100%)': whenProps({ align: TooltipAlign.Center }),
-        'translate(-90%, -100%)': whenProps({ align: TooltipAlign.End }),
-      })};
-    `}
-
-  ${({ position }) =>
-    position === TooltipPosition.Bottom &&
-    css`
-      bottom: -16px;
-      left: 50%;
-
-      transform: ${conditional({
-        'translate(-10%, 100%)': whenProps({ align: TooltipAlign.Start }),
-        'translate(-50%, 100%)': whenProps({ align: TooltipAlign.Center }),
-        'translate(-90%, 100%)': whenProps({ align: TooltipAlign.End }),
-      })};
-    `};
-
-  ${({ position }) =>
-    position === TooltipPosition.Left &&
-    css`
-      top: 50%;
-      left: -16px;
-
-      transform: translate(-100%, -50%);
-    `};
-
-  ${({ position }) =>
-    position === TooltipPosition.Right &&
-    css`
-      top: 50%;
-      right: -16px;
+type ArrowProps = Pick<TooltipProps, 'position'> & {
+  top?: number
+  left?: number
+}
 
-      transform: translate(100%, -50%);
-    `};
-`
+const StyledArrow = styled.span<ArrowProps>`
+  position: absolute;
 
-type ArrowProps = Pick<TooltipProps, 'position'>
-const Arrow = styled.span<ArrowProps>`
   width: 0;
   height: 0;
+  display: block;
 
   background: transparent;
   border-style: solid;
 
-  position: absolute;
   z-index: 1;
 
+  ${({ top }) => top && `top: ${top}px;`}
+  ${({ left }) => left && `left: ${left}px;`}
+
   ${({ position }) =>
-    position === TooltipPosition.Top &&
+    position === 'top' &&
     css`
-      bottom: calc(100% - 4px);
-      left: 50%;
+      bottom: -8px;
 
       border-color: ${token('tooltip-background')} transparent transparent transparent;
       border-width: 12px 10px 0 10px;
-      transform: translate(-50%, -100%);
     `}
 
   ${({ position }) =>
-    position === TooltipPosition.Bottom &&
+    position === 'bottom' &&
     css`
-      top: calc(100% - 4px);
-      left: 50%;
+      top: -8px;
 
       border-color: transparent transparent ${token('tooltip-background')} transparent;
       border-width: 0 10px 12px 10px;
-      transform: translate(-50%, 100%);
     `}
 
   ${({ position }) =>
-    position === TooltipPosition.Left &&
+    position === 'left' &&
     css`
-      top: 50%;
-      right: calc(100% - 4px);
+      right: -8px;
 
       border-color: transparent transparent transparent ${token('tooltip-background')};
       border-width: 10px 0 10px 12px;
-      transform: translate(-100%, -50%);
     `}
 
   ${({ position }) =>
-    position === TooltipPosition.Right &&
+    position === 'right' &&
     css`
-      top: 50%;
-      left: calc(100% - 4px);
+      left: -8px;
 
       border-color: transparent ${token('tooltip-background')} transparent transparent;
       border-width: 10px 12px 10px 0;
-      transform: translate(100%, -50%);
     `}
 `
 
+function Arrow() {
+  const { register, result } = usePopover()
+  const ref = React.useRef<HTMLDivElement | null>(null)
+
+  React.useLayoutEffect(() => {
+    if (ref.current) {
+      register.arrow(ref.current)
+    }
+  }, [register])
+
+  return (
+    <StyledArrow
+      ref={ref}
+      position={result.position}
+      top={result.arrow.top}
+      left={result.arrow.left}
+    />
+  )
+}
+
 function Tooltip({
   children,
   message,
@@ -204,15 +175,18 @@ function Tooltip({
       tabIndex={0}
       scheme={scheme}
     >
-      {visible && (
-        <>
-          <Bubble role="tooltip" position={position} align={align}>
-            {message}
-          </Bubble>
-          <Arrow position={position} />
-        </>
-      )}
-      {children}
+      <Popover position={position} align={align}>
+        {visible && (
+          <Popover.Floating>
+            <Bubble role="tooltip">
+              {message}
+              <Arrow />
+            </Bubble>
+          </Popover.Floating>
+        )}
+
+        <Popover.Reference>{children}</Popover.Reference>
+      </Popover>
     </Container>
   )
 }

package/src/components/TopNavigation/Menu/MenuItemDropdown.tsx

@@ -11,6 +11,7 @@ import { BaseLink } from 'components/Link'
 import useID from 'hooks/useID'
 import ellipsizable from 'styles/ellipsizable'
 import typography from 'styles/typography'
+import { Popover } from 'components/Popover'
 
 export const MenuDropdown = styled(Dropdown)({})
 
@@ -96,14 +97,16 @@ function MenuItemDropdown(props: MenuItemDropdownProps): JSX.Element {
   const labelId = useID()
 
   return (
-    <MenuDropdown key={label}>
-      <MenuDropdownLabel>
-        <Ellipsizable $max={120} id={labelId}>
-          {label}
-        </Ellipsizable>
-        <MenuDropdownTrigger {...rest} tabIndex={0} aria-labelledby={labelId} />
-      </MenuDropdownLabel>
-      <DropdownMenu align="end">{children}</DropdownMenu>
+    <MenuDropdown align="end" key={label}>
+      <Popover.Reference>
+        <MenuDropdownLabel>
+          <Ellipsizable $max={120} id={labelId}>
+            {label}
+          </Ellipsizable>
+          <MenuDropdownTrigger {...rest} tabIndex={0} aria-labelledby={labelId} />
+        </MenuDropdownLabel>
+      </Popover.Reference>
+      <DropdownMenu>{children}</DropdownMenu>
     </MenuDropdown>
   )
 }

package/src/index.ts

@@ -83,8 +83,16 @@ export type { CardProps } from './components/Card'
 export { IconFactory } from './components/IconFactory'
 export type { IconProps, IconMapping } from './components/IconFactory'
 
-export { Popover } from './components/Popover'
-export type { PopoverProps } from './components/Popover'
+export { Popover, usePopover } from './components/Popover'
+export type {
+  PopoverProps,
+  PopoverAlign,
+  PopoverPosition,
+  PopoverFloatingProps,
+  PopoverPlacement,
+  PopoverReferenceProps,
+  UsePopoverReturn,
+} from './components/Popover'
 
 export { Dropdown, useDropdown, DropdownContext } from './components/Dropdown'
 export type { DropdownProps, useDropdownProps } from './components/Dropdown'