@loadsmart/loadsmart-ui 5.5.0 → 5.6.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@loadsmart/loadsmart-ui",
-  "version": "5.5.0",
+  "version": "5.6.1",
   "description": "Miranda UI, a React UI library",
   "main": "dist",
   "files": [
@@ -98,7 +98,7 @@
     "@svgr/rollup": "5.5.0",
     "@svgr/webpack": "5.5.0",
     "@tailwindcss/postcss7-compat": "2.1.2",
-    "@testing-library/jest-dom": "5.12.0",
+    "@testing-library/jest-dom": "5.16.5",
     "@testing-library/react": "11.2.6",
     "@testing-library/react-hooks": "5.1.2",
     "@testing-library/user-event": "13.1.9",
@@ -110,6 +110,7 @@
     "@types/lodash.isempty": "4.4.6",
     "@types/lodash.omit": "4.5.6",
     "@types/lodash.range": "3.2.6",
+    "@types/mdx": "^2.0.2",
     "@types/react": "17.0.5",
     "@types/react-dom": "17.0.3",
     "@types/react-test-renderer": "17.0.1",

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

@@ -97,4 +97,12 @@ describe('<DragDropFile.DropZone />', () => {
 
     expect(onFilesAdded).toHaveBeenCalledWith(filesMock)
   })
+
+  it('does not call onFilesAdded when files are dropped in the drop zone and disabled is true', () => {
+    setup({ multiple: true, disabled: true })
+
+    DragDropFileEvent.dropFiles(getInput(), filesMock)
+
+    expect(onFilesAdded).not.toHaveBeenCalled()
+  })
 })

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/Select/Select.test.tsx

@@ -517,7 +517,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 +530,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.')
       }
     )
 

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>
+)
+```

package/src/components/VisuallyHidden/VisuallyHidden.stories.tsx

@@ -0,0 +1,32 @@
+import { Layout } from 'components/Layout'
+import { Text } from 'components/Text'
+import React from 'react'
+
+import { VisuallyHidden } from '.'
+import Docs from './VisuallyHidden.mdx'
+
+export default {
+  title: 'Components/VisuallyHidden',
+  component: VisuallyHidden,
+  parameters: {
+    docs: {
+      page: Docs,
+    },
+  },
+}
+
+export function Playground(): JSX.Element {
+  return (
+    <Layout.Stack className="p-10 bg-neutral-dark w-60 text-center">
+      <Text color="color-neutral-white" as="p">
+        Bellow you can&apos;t see the text, but assistive technologies can. Try to use devtools to
+        inspect this element.
+      </Text>
+      <Text color="color-neutral-white" as="p">
+        <VisuallyHidden>
+          This text is invisible but accessible by assistive technologies
+        </VisuallyHidden>
+      </Text>
+    </Layout.Stack>
+  )
+}

package/src/components/VisuallyHidden/VisuallyHidden.test.tsx

@@ -0,0 +1,18 @@
+import React from 'react'
+import { screen } from '@testing-library/react'
+
+import renderer from '../../../tests/renderer'
+
+import hiddenStyle from 'styles/hidden'
+import { VisuallyHidden } from './VisuallyHidden'
+
+describe('VisuallyHidden', () => {
+  it('should render children accessibly', () => {
+    const children = 'Should not be visible'
+    const expectedHiddenStyle = hiddenStyle(true).replace(/!important/g, '')
+
+    renderer(<VisuallyHidden>{children}</VisuallyHidden>).render()
+
+    expect(screen.getByText(children)).toHaveStyle(expectedHiddenStyle)
+  })
+})

package/src/components/VisuallyHidden/VisuallyHidden.tsx

@@ -0,0 +1,6 @@
+import styled from 'styled-components'
+import hiddenStyle from 'styles/hidden'
+
+export const VisuallyHidden = styled.span`
+  ${hiddenStyle(true)}
+`

package/src/components/VisuallyHidden/index.ts

@@ -0,0 +1 @@
+export { VisuallyHidden } from './VisuallyHidden'

package/src/index.ts

@@ -176,3 +176,5 @@ export type {
 
 export { TablePagination } from './components/TablePagination'
 export type { TablePaginationProps } from './components/TablePagination'
+
+export { VisuallyHidden } from './components/VisuallyHidden'

package/src/testing/SelectEvent/SelectEvent.ts

@@ -1,5 +1,5 @@
 /* eslint-disable */
-import { queries, waitFor, within } from '@testing-library/dom'
+import { fireEvent, queries, waitFor, within } from '@testing-library/dom'
 import { act } from '@testing-library/react'
 import userEvent from '@testing-library/user-event'
 
@@ -152,7 +152,7 @@ async function search(query: string, input: HTMLElement): Promise<void> {
   const selectContainer = getReactSelectContainerFromInput(input)
 
   await act(async () => {
-    userEvent.type(input, query)
+    fireEvent.change(input, { target: { value: query } })
 
     await queries.findAllByRole(selectContainer, 'option')
   })