@loadsmart/loadsmart-ui 7.6.0 → 7.7.0-beta.1

package/src/components/Dropdown/Dropdown.test.tsx

@@ -1,173 +0,0 @@
-import React from 'react'
-import { composeStories } from '@storybook/react'
-
-import { ACTIONS, PROFILE_ACTIONS, SUBSCRIPTION_ACTIONS } from './Dropdown.fixtures'
-import * as stories from './Dropdown.stories'
-import generator from '../../tests/generator'
-import renderer, { screen, user, waitFor } from '../../tests/renderer'
-
-const { Playground, WithSections, Extended } = composeStories(stories)
-
-describe('Dropdown', () => {
-  describe('Generic', () => {
-    const setup = (overrides?: Partial<stories.DropdownStoryProps>) =>
-      renderer(<Playground {...overrides} />).render()
-
-    it('starts collapsed', () => {
-      setup()
-
-      screen.getByText('Actions')
-
-      for (let i = 0; i < ACTIONS.length; i++) {
-        expect(screen.queryByText(ACTIONS[i].label)).not.toBeInTheDocument()
-      }
-    })
-
-    it('renders all options when expanded', async () => {
-      setup()
-
-      user.click(screen.getByText('Actions'))
-
-      expect(await screen.findByText(ACTIONS[0].label)).toBeInTheDocument()
-
-      for (let i = 1; i < ACTIONS.length; i++) {
-        expect(screen.getByText(ACTIONS[i].label)).toBeInTheDocument()
-      }
-    })
-
-    it('performs option click and collapses', async () => {
-      setup()
-
-      user.click(screen.getByText('Actions'))
-
-      await screen.findByTestId('dropdown-menu')
-
-      const items = screen.getAllByTestId('dropdown-menu-item')
-      expect(items.length).toBe(ACTIONS.length)
-
-      const indexToClick = generator.natural({ min: 0, max: items.length - 1 })
-      const itemToClick = items[indexToClick]
-
-      user.click(itemToClick)
-      expect(screen.getByTestId('output')).toHaveTextContent(ACTIONS[indexToClick].label)
-
-      await waitFor(() => expect(screen.queryByTestId('dropdown-menu')).not.toBeInTheDocument())
-    })
-
-    it('does not toggles when disabled', async () => {
-      setup({ disabled: true })
-
-      user.click(screen.getByText('Actions'), undefined, {
-        skipPointerEventsCheck: true,
-      })
-
-      await waitFor(() => expect(screen.queryByTestId('dropdown-menu')).not.toBeInTheDocument())
-    })
-  })
-
-  describe('With Sections', () => {
-    const setup = (overrides?: stories.DropdownStoryProps) =>
-      renderer(<WithSections {...overrides} />).render()
-
-    it('starts collapsed', () => {
-      setup()
-
-      screen.getByText('Sections')
-
-      for (let i = 0; i < ACTIONS.length; i++) {
-        expect(screen.queryByText(ACTIONS[i].label)).not.toBeInTheDocument()
-      }
-    })
-
-    it('renders all sections and their options when expanded', async () => {
-      setup()
-
-      user.click(screen.getByText('Sections'))
-
-      await screen.findByTestId('dropdown-menu')
-
-      screen.getByText('My profile')
-
-      for (let i = 0; i < PROFILE_ACTIONS.length; i++) {
-        expect(screen.getByText(PROFILE_ACTIONS[i].label)).toBeInTheDocument()
-      }
-
-      screen.getByText('Subscription')
-
-      for (let i = 0; i < SUBSCRIPTION_ACTIONS.length; i++) {
-        expect(screen.getByText(SUBSCRIPTION_ACTIONS[i].label)).toBeInTheDocument()
-      }
-    })
-
-    it('performs option click and collapses', async () => {
-      const SECTION_ACTIONS = [...PROFILE_ACTIONS, ...SUBSCRIPTION_ACTIONS]
-
-      setup()
-
-      user.click(screen.getByText('Sections'))
-
-      await screen.findByTestId('dropdown-menu')
-
-      const items = screen.getAllByTestId('dropdown-menu-item')
-      expect(items.length).toBe(SECTION_ACTIONS.length)
-
-      const indexToClick = generator.natural({ min: 0, max: items.length - 1 })
-      const itemToClick = items[indexToClick]
-
-      user.click(itemToClick)
-      expect(screen.getByTestId('output')).toHaveTextContent(SECTION_ACTIONS[indexToClick].label)
-
-      await waitFor(() => expect(screen.queryByTestId('dropdown-menu')).not.toBeInTheDocument())
-    })
-  })
-
-  describe('With Header and Footer', () => {
-    const setup = (overrides?: stories.DropdownStoryProps) =>
-      renderer(<Extended {...overrides} />).render()
-
-    it('starts collapsed', () => {
-      setup()
-
-      screen.getByText('With Header & Footer')
-
-      for (let i = 0; i < ACTIONS.length; i++) {
-        expect(screen.queryByText(ACTIONS[i].label)).not.toBeInTheDocument()
-      }
-    })
-
-    it('renders header, footer, and options when expanded', async () => {
-      setup()
-
-      user.click(screen.getByText('With Header & Footer'))
-
-      await screen.findByTestId('dropdown-menu')
-
-      screen.getByText('Header')
-
-      for (let i = 0; i < ACTIONS.length; i++) {
-        expect(screen.getByText(ACTIONS[i].label)).toBeInTheDocument()
-      }
-
-      screen.getByText('A cool footer')
-    })
-
-    it('performs option click and collapses', async () => {
-      setup()
-
-      user.click(screen.getByText('With Header & Footer'))
-
-      await screen.findByTestId('dropdown-menu')
-
-      const items = screen.getAllByTestId('dropdown-menu-item')
-      expect(items.length).toBe(ACTIONS.length)
-
-      const indexToClick = generator.natural({ min: 0, max: items.length - 1 })
-      const itemToClick = items[indexToClick]
-
-      user.click(itemToClick)
-      expect(screen.getByTestId('output')).toHaveTextContent(ACTIONS[indexToClick].label)
-
-      await waitFor(() => expect(screen.queryByTestId('dropdown-menu')).not.toBeInTheDocument())
-    })
-  })
-})

package/src/components/Dropdown/Dropdown.tsx

@@ -1,141 +0,0 @@
-import React, { useMemo, useRef } from 'react'
-import styled from 'styled-components'
-
-import {
-  DropdownMenu,
-  DropdownMenuItem,
-  DropdownMenuSection,
-  DropdownSeparator,
-} from './DropdownMenu'
-import { useClickOutside } from 'hooks/useClickOutside'
-import DropdownContext from './Dropdown.context'
-import DropdownTrigger from './DropdownTrigger'
-import hidden from 'styles/hidden'
-import useDropdown from './useDropdown'
-import { Popover } from 'components/Popover'
-
-import type { DropdownProps, GenericDropdownProps, DropdownMenuProps } from './Dropdown.types'
-import type { PopoverAlign } from 'components/Popover'
-
-const DropdownWrapper = styled.div`
-  position: relative;
-`
-
-const HiddenCloseButton = styled.button.attrs({
-  type: 'button',
-  tabIndex: -1,
-})`
-  ${hidden(true)}
-`
-
-function useDeprecatedAlignFromMenu({
-  children,
-  align,
-}: React.PropsWithChildren<{ align?: PopoverAlign }>): PopoverAlign {
-  let result: PopoverAlign | undefined
-
-  if (align) {
-    return align
-  }
-
-  React.Children.forEach(children, (child) => {
-    if (React.isValidElement<DropdownMenuProps>(child) && child.type === DropdownMenu) {
-      result = child.props.align
-    }
-  })
-
-  return (result || align) as PopoverAlign
-}
-
-// TODO: add focus trap here to allow navigating options with keyboard
-
-/**
- * Generic dropdown component that allows composing its pieces as desired.
- *
- * Based on:
- * - https://www.w3.org/TR/2017/REC-wai-aria-1.1-20171214/#menu
- * - https://www.w3.org/WAI/tutorials/menus/application-menus/
- *
- * @param props
- * @returns
- */
-export function GenericDropdown(props: GenericDropdownProps): JSX.Element {
-  const {
-    children,
-    expanded,
-    toggle,
-    disabled = false,
-    expandDisabled = false,
-    onBlur,
-    position,
-    ...others
-  } = props
-  const contextValue = useMemo(
-    () => ({ expanded, toggle, disabled, expandDisabled }),
-    [expanded, toggle, disabled, expandDisabled]
-  )
-  const ref = useRef(null)
-
-  const align = useDeprecatedAlignFromMenu(props)
-
-  useClickOutside(
-    ref,
-    function handleClickOutside(event?: MouseEvent | TouchEvent | KeyboardEvent) {
-      onBlur?.(event)
-
-      if (!expanded) {
-        return
-      }
-
-      toggle()
-    }
-  )
-
-  return (
-    <DropdownWrapper {...others} role="menubar" ref={ref}>
-      <DropdownContext.Provider value={contextValue}>
-        <HiddenCloseButton disabled={disabled} onClick={toggle}>
-          Close
-        </HiddenCloseButton>
-        <Popover strategy="fixed" position={position} align={align}>
-          {children}
-        </Popover>
-      </DropdownContext.Provider>
-    </DropdownWrapper>
-  )
-}
-
-/**
- * @example
-      <Dropdown>
-        <Dropdown.Trigger>Download</Dropdown.Trigger>
-        <Dropdown.Menu
-          header={<p className="px-2">Header</p>}
-          footer={<p className="px-2">A cool footer</p>}
-        >
-          {[{label: 'Hello', value: 'hi'}, { label: 'World', value: 'planet' }].map(({ label, value }) => (
-            <Dropdown.Item
-              key={value}
-              onClick={() => {
-                setMessage(label)
-              }}
-            >
-              {label}
-            </Dropdown.Item>
-          ))}
-        </Dropdown.Menu>
-      </Dropdown>
- */
-function Dropdown(props: DropdownProps): JSX.Element {
-  const dropdownProps = useDropdown(props)
-
-  return <GenericDropdown {...props} {...dropdownProps} />
-}
-
-Dropdown.Trigger = DropdownTrigger
-Dropdown.Menu = DropdownMenu
-Dropdown.Section = DropdownMenuSection
-Dropdown.Item = DropdownMenuItem
-Dropdown.Separator = DropdownSeparator
-
-export default Dropdown

package/src/components/Dropdown/Dropdown.types.ts

@@ -1,59 +0,0 @@
-import type { PopoverPlacement } from 'components/Popover'
-import type { ButtonProps } from 'components/Button'
-import type { ButtonHTMLAttributes, HTMLAttributes, ReactNode } from 'react'
-
-export interface useDropdownProps {
-  expanded: boolean
-  toggle: () => void
-}
-
-export interface useDropdownReturn {
-  expanded: boolean
-  toggle: () => void
-  expand: () => void
-  collapse: () => void
-}
-
-export interface DropdownProps
-  extends Omit<HTMLAttributes<HTMLDivElement>, 'onChange' | 'onBlur'>,
-    PopoverPlacement {
-  disabled?: boolean
-  /**
-   * Use this prop to not allow the dropdown to be expanded.
-   * While the `disabled` prop applies to the whole dropdown trigger element, this one only disables the TriggerHandle.
-   */
-  expandDisabled?: boolean
-  onBlur?: (event?: MouseEvent | TouchEvent | KeyboardEvent) => void
-}
-
-export interface GenericDropdownProps extends DropdownProps, useDropdownProps {}
-
-export type DropdownTriggerProps = ButtonProps & {
-  outlined?: boolean
-}
-
-export interface DropdownMenuProps extends HTMLAttributes<HTMLDivElement> {
-  header?: ReactNode
-  footer?: ReactNode
-  /**
-   * @deprecated Use the `align` prop on <Dropdown> wrapper instead.
-   */
-  align?: 'start' | 'end'
-}
-
-export interface DropdownMenuItemProps extends ButtonHTMLAttributes<HTMLButtonElement> {
-  leading?: ReactNode
-  trailing?: ReactNode
-  onClick?: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => boolean | undefined | void
-}
-
-export interface DropdownMenuSectionProps extends HTMLAttributes<HTMLDivElement> {
-  header: ReactNode
-}
-
-export interface DropdownContextReturn {
-  disabled: boolean
-  expandDisabled: boolean
-  expanded: boolean
-  toggle: () => void
-}

package/src/components/Dropdown/DropdownMenu.tsx

@@ -1,263 +0,0 @@
-import React, { forwardRef, useContext } from 'react'
-import styled from 'styled-components'
-
-import { getToken as token } from 'theming'
-import { Popover } from 'components/Popover'
-import disableable from 'styles/disableable'
-import DropdownContext from './Dropdown.context'
-import focusable from 'styles/focusable'
-import font from 'styles/font'
-import hoverable from 'styles/hoverable'
-import transition from 'styles/transition'
-import useID from 'hooks/useID'
-
-import type {
-  DropdownMenuItemProps,
-  DropdownMenuProps,
-  DropdownMenuSectionProps,
-} from './Dropdown.types'
-
-/**
- * TODO: add aria-labelledby that should refer to the dropdown label to the role="menu" container.
- * TODO: navigate through items using arrow keys.
- * TODO: add animation for a smooth open/close effect.
- */
-
-const StyledPopover = styled(Popover.Floating)`
-  z-index: ${token('z-index-droplist')};
-
-  min-width: 10em;
-
-  background: ${token('dropdown-background')};
-  border: 1px solid ${token('dropdown-border-color')};
-  border-radius: ${token('dropdown-border-radius')};
-  box-shadow: ${token('dropdown-shadow')};
-  width: max-content;
-`
-
-const StyledSpan = styled.span`
-  display: inline-flex;
-  flex-flow: row nowrap;
-  align-items: center;
-  justify-content: center;
-
-  font-size: 1em;
-`
-
-const Leading = styled(StyledSpan)`
-  /* placeholder */
-`
-
-const Trailing = styled(StyledSpan)`
-  /* placeholder */
-`
-
-const Children = styled.span`
-  display: inline-flex;
-  flex-flow: row nowrap;
-  align-items: center;
-  justify-content: flex-start;
-  padding: ${token('space-s')} 0;
-
-  white-space: nowrap;
-`
-
-const DropdownItemWrapper = styled.button`
-  ${transition()}
-
-  display: inline-flex;
-  justify-content: flex-start;
-  align-items: center;
-
-  ${font({
-    height: 'font-height-3',
-    weight: 'font-weight-medium',
-  })}
-  font-size: ${token('font-size-4')};
-
-  min-height: 36px;
-  flex: 1 0;
-
-  border: none;
-  border-radius: ${token('border-radius-s')};
-  background: ${token('color-neutral-white')};
-
-  color: ${token('color-neutral-darker')};
-
-  padding: 0 ${token('space-s')};
-
-  margin: 0 ${token('space-s')};
-
-  cursor: pointer;
-
-  ${hoverable`
-    background: ${token('color-neutral-lighter')};
-  `}
-
-  ${focusable`
-    background: ${token('color-neutral-lighter')};
-  `}
-
-  ${disableable()}
-
-  ${Children} {
-    flex: 1 0 auto;
-
-    text-align: left;
-  }
-
-  ${Leading}, ${Trailing} {
-    flex: 0 1 auto;
-  }
-
-  ${Leading} + ${Children} {
-    margin: 0 0 0 ${token('space-s')};
-  }
-
-  ${Children} + ${Trailing} {
-    margin: 0 0 0 ${token('space-s')};
-  }
-`
-
-const DropdownSectionHeader = styled.strong`
-  display: flex;
-  justify-content: flex-start;
-  align-items: center;
-
-  ${font({
-    height: 'font-height-3',
-    weight: 'font-weight-bold',
-  })}
-
-  font-size: ${token('font-size-4')};
-
-  margin: 0 ${token('space-s')};
-`
-
-const DropdownSectionWrapper = styled.div`
-  display: flex;
-  flex-direction: column;
-`
-
-const GenericDropdownMenuWrapper = styled.div`
-  display: flex;
-  flex-direction: column;
-  padding: ${token('space-s')} 0;
-
-  ${font({
-    height: 'font-height-3',
-    weight: 'font-weight-medium',
-  })}
-
-  font-size: ${token('font-size-4')};
-`
-
-const DropdownMenuWrapper = styled(GenericDropdownMenuWrapper)`
-  max-height: 240px;
-  overflow-y: auto;
-  max-width: 100%;
-  width: 100%;
-
-  ${DropdownItemWrapper} + ${DropdownItemWrapper},
-  ${DropdownSectionHeader} + ${DropdownItemWrapper} {
-    margin-top: ${token('space-2xs')};
-  }
-
-  ${DropdownSectionWrapper} + ${DropdownSectionWrapper} {
-    margin: ${token('space-m')} 0 0 0;
-  }
-
-  ${GenericDropdownMenuWrapper} + &,
-  & + ${GenericDropdownMenuWrapper},
-  ${GenericDropdownMenuWrapper} + ${GenericDropdownMenuWrapper} {
-    border-top: 2px solid ${token('color-neutral-lighter')};
-  }
-`
-
-export const DropdownSeparator = styled.hr.attrs({
-  'aria-hidden': true,
-})`
-  display: block;
-  height: 2px;
-
-  margin: ${token('space-s')} 0;
-
-  border: 0;
-  border-bottom: 2px solid ${token('card-separator-background')};
-`
-
-export const DropdownMenu = forwardRef<HTMLDivElement, DropdownMenuProps>(function DropdownMenu(
-  props: DropdownMenuProps,
-  ref
-): JSX.Element | null {
-  const context = useContext(DropdownContext)
-
-  if (!context) {
-    throw new Error('DropdownMenu must be inside a DropdownContext')
-  }
-
-  const { children, header, footer, ...others } = props
-  const { expanded } = context
-
-  if (!expanded) {
-    return null
-  }
-
-  return (
-    <StyledPopover role="presentation">
-      {header && <GenericDropdownMenuWrapper>{header}</GenericDropdownMenuWrapper>}
-      {children && (
-        <DropdownMenuWrapper ref={ref} role="menu" data-testid="dropdown-menu" {...others}>
-          {children}
-        </DropdownMenuWrapper>
-      )}
-      {footer && <GenericDropdownMenuWrapper>{footer}</GenericDropdownMenuWrapper>}
-    </StyledPopover>
-  )
-})
-
-export function DropdownMenuItem(props: DropdownMenuItemProps): JSX.Element {
-  const context = useContext(DropdownContext)
-  const { leading, children, trailing, onClick, ...others } = props
-  const id = useID(others.id)
-
-  if (!context) {
-    throw new Error('DropdownMenuItem must be inside a DropdownContext')
-  }
-
-  const { toggle } = context
-
-  return (
-    <DropdownItemWrapper
-      role="menuitem"
-      type="button"
-      data-testid="dropdown-menu-item"
-      {...others}
-      aria-labelledby={id}
-      onClick={(e) => {
-        e.persist()
-
-        const shouldKeepOpen = onClick?.(e)
-
-        if (!shouldKeepOpen) {
-          toggle()
-        }
-      }}
-    >
-      {leading && <Leading>{leading}</Leading>}
-      <Children id={id}>{children}</Children>
-      {trailing && <Trailing>{trailing}</Trailing>}
-    </DropdownItemWrapper>
-  )
-}
-
-export function DropdownMenuSection(props: DropdownMenuSectionProps): JSX.Element {
-  const { children, header, ...others } = props
-
-  return (
-    <DropdownSectionWrapper data-testid="dropdown-menu-section" {...others} role="presentation">
-      <DropdownSectionHeader>{header}</DropdownSectionHeader>
-      {children}
-    </DropdownSectionWrapper>
-  )
-}