@loadsmart/loadsmart-ui 5.4.0 → 5.6.0

package/src/components/DragDropFile/components/DropZone.tsx

@@ -39,11 +39,11 @@ const DropZone = ({
 
   const onKeyPress = useCallback(
     (event: React.KeyboardEvent) => {
-      if (inputRef.current && KeyboardKey(event).is('ENTER')) {
+      if (!disabled && inputRef.current && KeyboardKey(event).is('ENTER')) {
         inputRef.current.click()
       }
     },
-    [inputRef]
+    [disabled, inputRef]
   )
 
   const onDrop = useCallback(
@@ -51,13 +51,15 @@ const DropZone = ({
       event.preventDefault()
       event.stopPropagation()
 
-      if (isDragging) {
-        setIsDragging(false)
-      }
+      if (!disabled) {
+        if (isDragging) {
+          setIsDragging(false)
+        }
 
-      onFilesAdded(Array.from(event.dataTransfer.files || []))
+        onFilesAdded(Array.from(event.dataTransfer.files || []))
+      }
     },
-    [isDragging, onFilesAdded]
+    [disabled, isDragging, onFilesAdded]
   )
 
   const onDragStart = useCallback((event: React.DragEvent<HTMLDivElement>) => {
@@ -68,11 +70,11 @@ const DropZone = ({
     (event: React.DragEvent<HTMLDivElement>) => {
       event.preventDefault()
 
-      if (!isDragging) {
+      if (!disabled && !isDragging) {
         setIsDragging(true)
       }
     },
-    [isDragging]
+    [disabled, isDragging]
   )
 
   const onDragLeave = useCallback(

package/src/components/Dropdown/Dropdown.tsx

@@ -43,18 +43,15 @@ export function GenericDropdown(props: GenericDropdownProps): JSX.Element {
   const [contextValue, setContextValue] = useState({ expanded, toggle, disabled })
   const ref = useRef(null)
 
-  useClickOutside(
-    ref,
-    function handleClickOutside(event?: MouseEvent | TouchEvent | KeyboardEvent) {
-      onBlur?.(event)
+  useClickOutside(ref, function handleClickOutside() {
+    onBlur?.()
 
-      if (!expanded) {
-        return
-      }
-
-      toggle()
+    if (!expanded) {
+      return
     }
-  )
+
+    toggle()
+  })
 
   useEffect(
     function updateContextValue() {
@@ -76,7 +73,7 @@ export function GenericDropdown(props: GenericDropdownProps): JSX.Element {
 }
 
 /**
- * @example
+ * @example 
       <Dropdown>
         <Dropdown.Trigger>Download</Dropdown.Trigger>
         <Dropdown.Menu

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

@@ -1,5 +1,5 @@
-import type { ButtonProps } from 'components/Button'
 import type { ButtonHTMLAttributes, HTMLAttributes, ReactNode } from 'react'
+import type { ButtonProps } from 'components/Button'
 
 export interface useDropdownProps {
   expanded: boolean
@@ -15,7 +15,7 @@ export interface useDropdownReturn {
 
 export interface DropdownProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onChange' | 'onBlur'> {
   disabled?: boolean
-  onBlur?: (event?: MouseEvent | TouchEvent | KeyboardEvent) => void
+  onBlur?: () => void
 }
 
 export interface GenericDropdownProps extends DropdownProps, useDropdownProps {}

package/src/components/Dropdown/useDropdown.ts

@@ -1,6 +1,11 @@
 import { useCallback, useEffect, useState } from 'react'
 
-import type { DropdownProps } from './Dropdown.types'
+import type { HTMLAttributes } from 'react'
+
+export interface DropdownProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onChange' | 'onBlur'> {
+  disabled?: boolean
+  onBlur?: () => void
+}
 
 export interface useDropdownProps {
   expanded: boolean

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

@@ -11,7 +11,6 @@ import selectEvent from '../../testing/SelectEvent'
 
 import type { SelectProps, Option, GenericOption } from './Select.types'
 import Select from './Select'
-import userEvent from '@testing-library/user-event'
 
 const {
   Playground,
@@ -160,27 +159,6 @@ describe('Select', () => {
         expect(items.length).toBeGreaterThanOrEqual(1)
         expect(items[0]).toHaveTextContent(FRUITS[indexToSearch].label)
       })
-
-      it('calls blur when focus is lost', async () => {
-        const onBlur = jest.fn((event?: MouseEvent | TouchEvent | KeyboardEvent) => event)
-
-        setup({ onBlur })
-
-        const selectInput = screen.getByLabelText('Select your favorite fruit')
-
-        await selectEvent.expand(selectInput)
-
-        userEvent.click(document.body)
-
-        await selectEvent.expand(selectInput)
-
-        userEvent.keyboard('{Escape}{/Escape}')
-
-        expect(onBlur).toHaveBeenCalledTimes(2)
-
-        expect(onBlur).toHaveBeenNthCalledWith(1, new MouseEvent('mousedown'))
-        expect(onBlur).toHaveBeenNthCalledWith(2, new KeyboardEvent('keyup'))
-      })
     })
 
     describe('Single selection', () => {
@@ -517,7 +495,7 @@ describe('Select', () => {
 
     it.each([[{ multiple: true }], [{ multiple: false }]])(
       'overrides the empty component with %s',
-      (props) => {
+      async (props) => {
         const Empty = () => {
           return <Select.Empty data-testid="custom-empty">No fruit found.</Select.Empty>
         }
@@ -530,7 +508,7 @@ describe('Select', () => {
           target: { value: 'foo' },
         })
 
-        expect(screen.getByTestId('custom-empty')).toHaveTextContent('No fruit found.')
+        expect(await screen.findByTestId('custom-empty')).toHaveTextContent('No fruit found.')
       }
     )
 
@@ -861,7 +839,7 @@ describe('Select', () => {
     const setup = (overrides: Partial<SelectProps>) =>
       renderer(<Playground {...overrides} options={SelectableKeyTypeOptions} />).render()
 
-    const expectedValue = (value: unknown) => ({
+    const expectedValue = (value: any) => ({
       target: {
         id: 'select-playground',
         name: 'select-playground',

package/src/components/Select/Select.types.ts

@@ -1,16 +1,16 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 import EventLike from 'utils/types/EventLike'
 
-import type { DropdownMenuItemProps, DropdownProps } from 'components/Dropdown'
+import type { ChangeEvent, FocusEvent, ComponentType, HTMLAttributes } from 'react'
+import type { DropdownProps, DropdownMenuItemProps } from 'components/Dropdown'
 import type { TextFieldProps } from 'components/TextField'
 import type {
-  Selectable,
   SelectableAdapter,
+  Selectable,
   SelectableKeyType,
   SelectableState,
 } from 'hooks/useSelectable'
 import { useSelectableReturn } from 'hooks/useSelectable/useSelectable.types'
-import type { ChangeEvent, ComponentType, FocusEvent, HTMLAttributes } from 'react'
 
 export type Option = Selectable
 export interface GenericOption {
@@ -119,7 +119,7 @@ export type useSelectReturn = {
   getDropdownProps: () => {
     toggle: () => void
     expanded: boolean
-    onBlur: (event?: MouseEvent | TouchEvent | KeyboardEvent) => void
+    onBlur: () => void
   }
   getCreatebleProps: () => CreatableProps
   isCreatable: () => boolean

package/src/components/Select/useSelect.ts

@@ -1,18 +1,18 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import { isFunction } from '@loadsmart/utils-function'
 import { isNil } from '@loadsmart/utils-object'
-import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
 
+import { GenericAdapter } from './Select.constants'
+import { getValue, getDisplayValue, escapeRegExp, getAdapter } from './useSelect.helpers'
 import { useDropdown } from 'components/Dropdown'
-import { useDidMount } from 'hooks/useDidMount'
 import { useFocusTrap } from 'hooks/useFocusTrap'
 import { SelectableKeyType } from 'hooks/useSelectable'
+import { useSelectable } from './Select.context'
 import to from 'utils/toolset/awaitTo'
-import { isThenable } from 'utils/toolset/isThenable'
 import toArray from 'utils/toolset/toArray'
-import { GenericAdapter } from './Select.constants'
-import { useSelectable } from './Select.context'
-import { escapeRegExp, getAdapter, getDisplayValue, getValue } from './useSelect.helpers'
+import { isThenable } from 'utils/toolset/isThenable'
+import { useDidMount } from 'hooks/useDidMount'
 
 import type { ChangeEvent, FocusEvent } from 'react'
 import type {
@@ -191,7 +191,7 @@ function useOptions<T = any>(props: { datasources: SelectDatasource<T>[]; adapte
  */
 function useSelect(props: SelectProps): useSelectReturn {
   const didMount = useDidMount()
-  const { multiple, onQueryChange, onChange, onCreate, id, name, disabled = false, onBlur } = props
+  const { multiple, onQueryChange, onChange, onCreate, id, name, disabled = false } = props
   const dropdown = useDropdown(props)
 
   // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -264,19 +264,17 @@ function useSelect(props: SelectProps): useSelectReturn {
       return {
         toggle: dropdown.toggle,
         expanded: dropdown.expanded,
-        onBlur(event?: MouseEvent | TouchEvent | KeyboardEvent) {
+        onBlur() {
           if (!multiple) {
             setQuery(getDisplayValue(adapters, selectable.selected, multiple))
           } else {
             setQuery('')
           }
           options.reset()
-
-          onBlur?.(event)
         },
       }
     },
-    [adapters, dropdown.expanded, dropdown.toggle, multiple, options, selectable.selected, onBlur]
+    [adapters, dropdown.expanded, dropdown.toggle, multiple, options, selectable.selected]
   )
 
   const getTriggerProps = useCallback(

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

@@ -508,3 +508,64 @@ This function is passed a boolean \`selected\` and a function \`toggle\`.
     },
   },
 }
+
+export function WithExpandableRow(args: TableProps): JSX.Element {
+  const leading = (expanded: boolean) => {
+    if (expanded) {
+      return <div style={{ fontWeight: 'bold' }}>Open</div>
+    }
+    return <div style={{ fontWeight: 'bold' }}>Closed</div>
+  }
+
+  return (
+    <div className="p-4 bg-neutral-white">
+      <Table {...args}>
+        <Table.Head>
+          <Table.Row>
+            <Table.Expandable.HeadCell />
+            <Table.Expandable.HeadCell>Reference</Table.Expandable.HeadCell>
+            <Table.Expandable.HeadCell>Product</Table.Expandable.HeadCell>
+            <Table.Expandable.HeadCell>Price</Table.Expandable.HeadCell>
+          </Table.Row>
+        </Table.Head>
+
+        <Table.Body>
+          <Table.Expandable.Row
+            index={0}
+            leading={leading}
+            expandableContent={<div>Forced expanded with custom leading</div>}
+            expanded
+          >
+            <Table.Expandable.Cell>123456</Table.Expandable.Cell>
+            <Table.Expandable.Cell>Body 1</Table.Expandable.Cell>
+            <Table.Expandable.Cell>12345</Table.Expandable.Cell>
+          </Table.Expandable.Row>
+          <Table.Expandable.Row
+            index={1}
+            leading={leading}
+            expandableContent={<div>Initial expanded row with custom leading</div>}
+            initialExpanded
+          >
+            <Table.Expandable.Cell>123456</Table.Expandable.Cell>
+            <Table.Expandable.Cell>Body 2</Table.Expandable.Cell>
+            <Table.Expandable.Cell>12345</Table.Expandable.Cell>
+          </Table.Expandable.Row>
+          <Table.Expandable.Row index={2} expandableContent={<div>Expandable row</div>}>
+            <Table.Expandable.Cell>123456</Table.Expandable.Cell>
+            <Table.Expandable.Cell>Body 3</Table.Expandable.Cell>
+            <Table.Expandable.Cell>12345</Table.Expandable.Cell>
+          </Table.Expandable.Row>
+          <Table.Expandable.Row index={3} expanded>
+            <Table.Expandable.Cell>123456</Table.Expandable.Cell>
+            <Table.Expandable.Cell>Body 5</Table.Expandable.Cell>
+            <Table.Expandable.Cell>12345</Table.Expandable.Cell>
+          </Table.Expandable.Row>
+        </Table.Body>
+      </Table>
+    </div>
+  )
+}
+
+WithExpandableRow.args = {
+  scale: 'default',
+}

package/src/components/Table/Table.test.tsx

@@ -182,4 +182,132 @@ describe('<Table />', () => {
     expect(checkboxes[0]).toBeChecked()
     expect(checkboxes[1]).toBeChecked()
   })
+
+  it('Table.Expandable renders correclty', () => {
+    const onExpandedChange = jest.fn()
+
+    const expandableTable = ({ controlledExpanded4 }: { controlledExpanded4: boolean }) => (
+      <React.Fragment>
+        <Table.Head>
+          <Table.Row>
+            <Table.Expandable.HeadCell />
+            <Table.HeadCell># Number</Table.HeadCell>
+            <Table.HeadCell>Company</Table.HeadCell>
+            <Table.HeadCell alignment="right">Price $</Table.HeadCell>
+          </Table.Row>
+        </Table.Head>
+        <Table.Body>
+          <Table.Expandable.Row
+            index={0}
+            expandableContent={<div>This is an expandable content on index 0</div>}
+            expanded
+          >
+            <Table.Cell format="number">#000000-1</Table.Cell>
+            <Table.Cell>Modal X 21</Table.Cell>
+            <Table.Cell format="currency" alignment="right">
+              $9876,50
+            </Table.Cell>
+          </Table.Expandable.Row>
+          <Table.Expandable.Row index={1}>
+            <Table.Cell format="number">#000000-2</Table.Cell>
+            <Table.Cell>Modal X 21</Table.Cell>
+            <Table.Cell format="currency" alignment="right">
+              $9876,50
+            </Table.Cell>
+          </Table.Expandable.Row>
+          <Table.Expandable.Row
+            index={2}
+            expandableContent={<div>This is an expandable content on index 2</div>}
+            leading={(expanded) => (expanded ? 'open' : 'closed')}
+            onExpandedChange={onExpandedChange}
+          >
+            <Table.Cell format="number">#000000-3</Table.Cell>
+            <Table.Cell>Modal X 21</Table.Cell>
+            <Table.Cell format="currency" alignment="right">
+              $9876,50
+            </Table.Cell>
+          </Table.Expandable.Row>
+          <Table.Expandable.Row
+            index={3}
+            expandableContent={<div>This is an expandable content on index 3</div>}
+            expanded={controlledExpanded4}
+          >
+            <Table.Cell format="number">#000000-4</Table.Cell>
+            <Table.Cell>Modal X 21</Table.Cell>
+            <Table.Cell format="currency" alignment="right">
+              $9876,50
+            </Table.Cell>
+          </Table.Expandable.Row>
+        </Table.Body>
+      </React.Fragment>
+    )
+    const props = {
+      children: expandableTable({ controlledExpanded4: true }),
+    }
+
+    const { rerender } = setup(props)
+
+    // Check if table is displaying 3 rows
+    const row1 = screen.getByText(/000000-1/i).closest('tr')
+    expect(row1).toBeInTheDocument()
+
+    const row2 = screen.getByText(/000000-2/i).closest('tr')
+    expect(row2).toBeInTheDocument()
+
+    const row3 = screen.getByText(/000000-3/i).closest('tr')
+    expect(row3).toBeInTheDocument()
+
+    const row4 = screen.getByText(/000000-4/i).closest('tr')
+    expect(row4).toBeInTheDocument()
+
+    // Row 1 should be forced to be expanded
+    expect(screen.getByText(/This is an expandable content on index 0/i)).toBeInTheDocument()
+
+    // Clicking row1
+    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+    user.click(row1!)
+
+    // Row 1 can't be collapsed
+    expect(screen.getByText(/This is an expandable content on index 0/i)).toBeInTheDocument()
+
+    // Checking if Row 3 has custom trailing (row is collapsed)
+    expect(screen.getByText(/close/i)).toBeInTheDocument()
+
+    // Expanding row3
+    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+    user.click(row3!)
+    expect(screen.getByText(/This is an expandable content on index 2/i)).toBeInTheDocument()
+
+    // Check if onExpandedChange is triggered
+    expect(onExpandedChange).toHaveBeenCalledTimes(1)
+    expect(onExpandedChange).toHaveBeenCalledWith(true)
+
+    // Checking if Row 3 has custom trailing (row is expanded)
+    expect(screen.getByText(/open/i)).toBeInTheDocument()
+
+    // Collapsing row3
+    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+    user.click(row3!)
+    expect(screen.queryByText(/This is an expandable content on index 2/i)).not.toBeInTheDocument()
+
+    // Check if onExpandedChange is triggered
+    expect(onExpandedChange).toHaveBeenCalledTimes(2)
+    expect(onExpandedChange).toHaveBeenCalledWith(false)
+
+    // Checking controlled expanded (row4), it's opened by default
+    expect(screen.queryByText(/This is an expandable content on index 4/i)).not.toBeInTheDocument()
+
+    // Clicking on row4 shouldn't change the open state because it's controlled externally
+    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+    user.click(row4!)
+
+    // row4 should be still opened
+    expect(screen.queryByText(/This is an expandable content on index 4/i)).not.toBeInTheDocument()
+
+    // Re-render to change controlled state
+    rerender(expandableTable({ controlledExpanded4: false }))
+
+    // row4 should be collapsed because externally controlled state is changed
+    expect(screen.queryByText(/This is an expandable content on index 4/i)).not.toBeInTheDocument()
+  })
 })

package/src/components/Table/Table.tsx

@@ -1,4 +1,4 @@
-import React, { Children, Fragment, isValidElement, useEffect } from 'react'
+import React, { Children, Fragment, isValidElement, useCallback, useEffect, useState } from 'react'
 import styled, { css } from 'styled-components'
 import type { ReactNode } from 'react'
 import { isFunction } from '@loadsmart/utils-function'
@@ -35,6 +35,7 @@ import type {
   SelectionCellProps,
   TablePickerItemProps,
   TablePickerProps,
+  ExpandableTableRowProps,
 } from './Table.types'
 
 const StyledTableBody = styled.tbody`
@@ -104,27 +105,31 @@ const StyledTableHead = styled.thead`
   }
 `
 
-const StyledTableRow = styled.tr<{ selected?: boolean }>`
+const BaseStyledTableRow = styled.tr`
   ${StyledTableHead} > & {
     height: 36px;
 
     background-color: ${token('color-neutral-white')};
   }
 
+  ${StyledTableBody} > & {
+    ${hoverable`
+    outline: 1px solid ${token('color-accent')};
+  `}
+
+    ${focusable`
+    box-shadow: inset ${token('shadow-glow-primary')};
+  `}
+  }
+`
+
+const StyledTableRow = styled(BaseStyledTableRow)<{ selected?: boolean }>`
   background-color: ${conditional({
     'table-row-selected-color': whenProps({ selected: true }),
     'color-transparent': whenProps({ selected: false }),
   })};
 
   ${StyledTableBody} > & {
-    ${hoverable`
-      outline: 1px solid ${token('color-accent')};
-    `}
-
-    ${focusable`
-      box-shadow: inset ${token('shadow-glow-primary')};
-    `}
-
     &:nth-child(odd) ${StyledTableCell} {
       background: ${token('table-row-variant-color')};
     }
@@ -135,6 +140,13 @@ const StyledTableRow = styled.tr<{ selected?: boolean }>`
   }
 `
 
+const StyledExpandableTableRow = styled(BaseStyledTableRow)<{ $even: boolean }>`
+  background-color: ${conditional({
+    'table-row-variant-color': whenProps({ $even: true }),
+    'color-transparent': whenProps({ $even: false }),
+  })};
+`
+
 const StyledTable = styled.table<{ scale?: string }>`
   width: 100%;
 
@@ -144,7 +156,8 @@ const StyledTable = styled.table<{ scale?: string }>`
 
   border-collapse: collapse;
 
-  ${StyledTableBody} ${StyledTableRow} {
+  ${StyledTableBody} ${StyledTableRow}, 
+  ${StyledTableBody} ${StyledExpandableTableRow} {
     height: ${conditional({
       '24px': whenProps({ scale: 'small' }),
       '48px': whenProps({ scale: 'default' }),
@@ -153,7 +166,9 @@ const StyledTable = styled.table<{ scale?: string }>`
   }
 
   ${StyledTableBody} ${StyledTableRow} ${StyledTableCell},
-  ${StyledTableHead} ${StyledTableRow} ${StyledTableHeadCell} {
+  ${StyledTableHead} ${StyledTableRow} ${StyledTableHeadCell},
+  ${StyledTableBody} ${StyledExpandableTableRow} ${StyledTableCell},
+  ${StyledTableHead} ${StyledExpandableTableRow} ${StyledTableHeadCell} {
     padding: ${conditional({
       'space-xs': whenProps({ scale: 'small' }),
       'space-s': whenProps({ scale: ['default', 'large'] }),
@@ -166,6 +181,12 @@ const StyledTable = styled.table<{ scale?: string }>`
   }
 `
 
+const RotatableIcon = styled(Icon)<{ $rotate: boolean }>`
+  ${conditional({
+    'transform: rotate(90deg);': whenProps({ $rotate: true }),
+  })}
+`
+
 function Table<T>({
   children,
   selection,
@@ -269,6 +290,14 @@ function SelectionHeadCell<T>(props: SelectionCellProps<T>): JSX.Element {
   )
 }
 
+function ExpandableHeadCell(props: TableCellProps): JSX.Element {
+  return <TableHeadCell {...props} />
+}
+
+function ExpandableCell(props: TableCellProps): JSX.Element {
+  return <TableCell {...props} />
+}
+
 function TableRow({ children, ...others }: TableRowProps): JSX.Element {
   const selected = useIsRowSelected(children)
 
@@ -279,6 +308,49 @@ function TableRow({ children, ...others }: TableRowProps): JSX.Element {
   )
 }
 
+function ExpandableTableRow({
+  index,
+  expandableContent,
+  expanded,
+  leading: propsLeading,
+  children,
+  onExpandedChange,
+  initialExpanded = false,
+  ...others
+}: ExpandableTableRowProps): JSX.Element {
+  const [openState, setOpenState] = useState(initialExpanded)
+
+  const open = expanded ?? openState
+  const colSpan = Array.isArray(children) ? children.length + 1 : 1
+  const isEven = index % 2 === 0
+
+  let leading: ReactNode = <RotatableIcon name="caret-right" $rotate={open} />
+  if (propsLeading) {
+    leading = isFunction(propsLeading) ? propsLeading(open) : propsLeading
+  }
+
+  function toggle() {
+    if (!expandableContent) return
+
+    onExpandedChange?.(!open)
+    setOpenState(!open)
+  }
+
+  return (
+    <>
+      <StyledExpandableTableRow {...others} onClick={toggle} $even={isEven}>
+        <ExpandableCell>{expandableContent && leading}</ExpandableCell>
+        {children}
+      </StyledExpandableTableRow>
+      {open && expandableContent && (
+        <StyledExpandableTableRow $even={isEven}>
+          <StyledTableCell colSpan={colSpan}>{expandableContent}</StyledTableCell>
+        </StyledExpandableTableRow>
+      )}
+    </>
+  )
+}
+
 function TableHeadCell({
   alignment = 'left',
   children,
@@ -436,6 +508,11 @@ Table.Selection = {
   Cell: SelectionCell,
   HeadCell: SelectionHeadCell,
 }
+Table.Expandable = {
+  HeadCell: ExpandableHeadCell,
+  Cell: ExpandableCell,
+  Row: ExpandableTableRow,
+}
 Table.SortHandle = TableSortHandle
 TablePicker.Item = TablePickerItem
 Table.Picker = TablePicker

package/src/components/Table/Table.types.ts

@@ -35,6 +35,15 @@ export interface TableSectionProps extends HTMLAttributes<HTMLTableSectionElemen
 
 export type TableRowProps = HTMLAttributes<HTMLTableRowElement>
 
+export type ExpandableTableRowProps = TableRowProps & {
+  index: number
+  expandableContent?: ReactNode
+  leading?: ReactNode | ((expanded: boolean) => ReactNode)
+  initialExpanded?: boolean
+  expanded?: boolean
+  onExpandedChange?: (expanded: boolean) => void
+}
+
 export interface TableCellProps extends HTMLAttributes<HTMLTableCellElement> {
   alignment?: 'left' | 'right'
   format?: 'default' | 'number' | 'currency'

package/src/components/VisuallyHidden/VisuallyHidden.mdx

@@ -0,0 +1,26 @@
+# VisuallyHidden
+
+Use this component to visually hide elements but keep them accessible to assistive technologies.
+
+Visually hide an element while still allowing it to be exposed to assistive technologies (such as screen readers) with `VisuallyHidden`.
+This would typically be used when you want to take advantage of the behavior and semantics of a native element like a checkbox or radio button, but replace it with a custom styled element visually.
+
+## Usage
+
+```tsx
+import { VisuallyHidden } from '@loadsmart/loadsmart-ui'
+
+const Example = () => (
+  <Layout.Stack>
+    <Text as="p">
+      Bellow you can&apos;t see the text, but assistive technologies can. Try to use devtools to
+      inspect this element.
+    </Text>
+    <Text as="p">
+      <VisuallyHidden>
+        This text is invisible but accessible by assistive technologies
+      </VisuallyHidden>
+    </Text>
+  </Layout.Stack>
+)
+```