@loadsmart/loadsmart-ui 5.0.1 → 5.2.0

package/src/components/Calendar/Pickers/PickerButton.tsx

@@ -10,7 +10,14 @@ import hoverable from 'styles/hoverable'
 import typography from 'styles/typography'
 
 const PickerButton = styled(BaseButton)<{
-  $status: 'default' | 'current-day' | 'faded' | 'selection-start' | 'selection-end' | 'selection'
+  $status:
+    | 'default'
+    | 'current-day'
+    | 'faded'
+    | 'selection-start'
+    | 'selection-end'
+    | 'selection'
+    | 'next-month-day'
 }>`
   ${typography(
     conditional({
@@ -32,25 +39,26 @@ const PickerButton = styled(BaseButton)<{
       $status: ['selection-start', 'selection', 'selection-end'],
     }),
     'color-neutral-darker': whenProps({ $status: ['default', 'faded'] }),
+    'color-neutral-dark': whenProps({ $status: 'next-month-day' }),
     'color-accent': whenProps({ $status: 'current-day' }),
   })};
 
   background: ${conditional({
-    'color-transparent': whenProps({ $status: ['default', 'faded'] }),
+    'color-transparent': whenProps({ $status: ['default', 'faded', 'next-month-day'] }),
     'color-neutral-darker': whenProps({ $status: ['selection-start', 'selection-end'] }),
     'color-neutral': whenProps({ $status: 'selection' }),
     'color-neutral-lightest': whenProps({ $status: 'current-day' }),
   })};
 
   border-color: ${conditional({
-    'color-transparent': whenProps({ $status: ['default', 'faded'] }),
+    'color-transparent': whenProps({ $status: ['default', 'faded', 'next-month-day'] }),
     'color-neutral-darker': whenProps({ $status: ['selection-start', 'selection-end'] }),
     'color-neutral': whenProps({ $status: 'selection' }),
     'color-neutral-light': whenProps({ $status: 'current-day' }),
   })};
 
   ${conditional({
-    'opacity: 0.6;': whenProps({ $status: 'faded' }),
+    'opacity: 0.4;': whenProps({ $status: 'faded' }),
     'opacity: 1;': whenProps({ $status: (status) => status !== 'faded' }),
   })}
 
@@ -59,7 +67,7 @@ const PickerButton = styled(BaseButton)<{
   ${hoverable`
     border-color: ${token('color-neutral')};
     background-color: ${conditional({
-      'color-transparent': whenProps({ $status: ['default', 'faded'] }),
+      'color-transparent': whenProps({ $status: ['default', 'faded', 'next-month-day'] }),
       'color-neutral-dark': whenProps({
         $status: ['selection-start', 'selection', 'selection-end'],
       }),
@@ -99,7 +107,7 @@ const PickerButton = styled(BaseButton)<{
       'color-transparent': whenProps({ 'aria-checked': false }),
     })};
 
-    color: ${token('color-neutral-darkest')};
+    color: ${token('color-neutral-darker')};
   `}
 
   visibility: ${conditional({

package/src/components/Dropdown/Dropdown.stories.tsx

@@ -8,12 +8,18 @@ import { TextField } from 'components/TextField'
 import Dropdown from './Dropdown'
 import DropdownContext from './Dropdown.context'
 
-import type { DropdownProps } from './Dropdown.types'
+import type { DropdownProps, DropdownMenuProps, DropdownTriggerProps } from './Dropdown.types'
 
 export default {
   title: 'Components/Dropdown',
   component: Dropdown,
   argTypes: {
+    align: {
+      control: {
+        type: 'select',
+        options: ['start', 'end'],
+      },
+    },
     onBlur: {
       table: {
         disable: true,
@@ -22,14 +28,16 @@ export default {
   },
 } as Meta
 
-export const Playground: Story<DropdownProps> = (args: DropdownProps) => {
+type DropdownStoryProps = DropdownProps & DropdownMenuProps & DropdownTriggerProps
+
+export const Playground: Story<DropdownStoryProps> = (args: DropdownStoryProps) => {
   const [message, setMessage] = useState('')
 
   return (
     <div className="flex flex-col">
       <Dropdown {...args}>
-        <Dropdown.Trigger>Actions</Dropdown.Trigger>
-        <Dropdown.Menu>
+        <Dropdown.Trigger outlined={args.outlined}>Actions</Dropdown.Trigger>
+        <Dropdown.Menu align={args.align}>
           {ACTIONS.map(({ label, value }) => (
             <Dropdown.Item
               key={value}
@@ -52,44 +60,18 @@ export const Playground: Story<DropdownProps> = (args: DropdownProps) => {
 
 Playground.args = {
   disabled: false,
+  align: 'start',
+  outlined: true,
 }
 
-export const AlignEnd: Story<DropdownProps> = (args: DropdownProps) => {
-  const [message, setMessage] = useState('')
-
-  return (
-    <div className="flex flex-col">
-      <Dropdown {...args}>
-        <Dropdown.Trigger>Actions</Dropdown.Trigger>
-        <Dropdown.Menu align="end">
-          {ACTIONS.map(({ label, value }) => (
-            <Dropdown.Item
-              key={value}
-              onClick={() => {
-                setMessage(label)
-              }}
-            >
-              {label}
-            </Dropdown.Item>
-          ))}
-        </Dropdown.Menu>
-      </Dropdown>
-
-      <output className="mt-4 text-sm text-black" data-testid="output">
-        {message}
-      </output>
-    </div>
-  )
-}
-
-export const WithSections: Story<DropdownProps> = (args: DropdownProps) => {
+export const WithSections: Story<DropdownStoryProps> = (args: DropdownStoryProps) => {
   const [message, setMessage] = useState('')
 
   return (
     <div className="flex flex-col">
       <Dropdown {...args}>
-        <Dropdown.Trigger>Sections</Dropdown.Trigger>
-        <Dropdown.Menu>
+        <Dropdown.Trigger outlined={args.outlined}>Sections</Dropdown.Trigger>
+        <Dropdown.Menu align={args.align}>
           <Dropdown.Section header="My profile">
             {PROFILE_ACTIONS.map(({ label, value }) => (
               <Dropdown.Item
@@ -126,16 +108,18 @@ export const WithSections: Story<DropdownProps> = (args: DropdownProps) => {
 
 WithSections.args = {
   disabled: false,
+  outlined: true,
 }
 
-export const Extended: Story<DropdownProps> = (args: DropdownProps) => {
+export const Extended: Story<DropdownStoryProps> = (args: DropdownStoryProps) => {
   const [message, setMessage] = useState('')
 
   return (
     <div className="flex flex-col">
       <Dropdown {...args}>
-        <Dropdown.Trigger>With Header &amp; Footer</Dropdown.Trigger>
+        <Dropdown.Trigger outlined={args.outlined}>With Header &amp; Footer</Dropdown.Trigger>
         <Dropdown.Menu
+          align={args.align}
           header={<p className="px-2">Header</p>}
           footer={<p className="px-2">A cool footer</p>}
         >
@@ -161,41 +145,7 @@ export const Extended: Story<DropdownProps> = (args: DropdownProps) => {
 
 Extended.args = {
   disabled: false,
-}
-
-export const NoOutlineOnTrigger: Story<DropdownProps> = (args: DropdownProps) => {
-  const [message, setMessage] = useState('')
-
-  return (
-    <div className="flex flex-col">
-      <Dropdown {...args}>
-        <Dropdown.Trigger outlined={false}>Download</Dropdown.Trigger>
-        <Dropdown.Menu
-          header={<p className="px-2">Header</p>}
-          footer={<p className="px-2">A cool footer</p>}
-        >
-          {ACTIONS.map(({ label, value }) => (
-            <Dropdown.Item
-              key={value}
-              onClick={() => {
-                setMessage(label)
-              }}
-            >
-              {label}
-            </Dropdown.Item>
-          ))}
-        </Dropdown.Menu>
-      </Dropdown>
-
-      <output className="mt-4 text-sm text-black" data-testid="output">
-        {message}
-      </output>
-    </div>
-  )
-}
-
-NoOutlineOnTrigger.args = {
-  disabled: false,
+  outlined: true,
 }
 
 function ActionTrigger() {
@@ -235,12 +185,12 @@ function InputTrigger() {
   )
 }
 
-export const CustomTrigger: Story<DropdownProps> = (args: DropdownProps) => {
+export const CustomTrigger: Story<DropdownStoryProps> = (args: DropdownStoryProps) => {
   const [message, setMessage] = useState('')
 
   function renderMenu() {
     return (
-      <Dropdown.Menu>
+      <Dropdown.Menu align={args.align}>
         {ACTIONS.map(({ label, value }) => (
           <Dropdown.Item
             key={value}
@@ -259,7 +209,7 @@ export const CustomTrigger: Story<DropdownProps> = (args: DropdownProps) => {
     <div className="flex flex-col">
       <div className="flex flex-row">
         <Dropdown {...args}>
-          <Dropdown.Trigger.Button trailing={null}>
+          <Dropdown.Trigger.Button outlined={args.outlined} trailing={null}>
             {({ expanded }) => {
               return (
                 <React.Fragment>
@@ -291,4 +241,5 @@ export const CustomTrigger: Story<DropdownProps> = (args: DropdownProps) => {
 
 CustomTrigger.args = {
   disabled: false,
+  outlined: true,
 }

package/src/components/Dropdown/Dropdown.tsx

@@ -43,15 +43,18 @@ export function GenericDropdown(props: GenericDropdownProps): JSX.Element {
   const [contextValue, setContextValue] = useState({ expanded, toggle, disabled })
   const ref = useRef(null)
 
-  useClickOutside(ref, function handleClickOutside() {
-    onBlur?.()
+  useClickOutside(
+    ref,
+    function handleClickOutside(event?: MouseEvent | TouchEvent | KeyboardEvent) {
+      onBlur?.(event)
 
-    if (!expanded) {
-      return
-    }
+      if (!expanded) {
+        return
+      }
 
-    toggle()
-  })
+      toggle()
+    }
+  )
 
   useEffect(
     function updateContextValue() {
@@ -73,7 +76,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 { ButtonHTMLAttributes, HTMLAttributes, ReactNode } from 'react'
 import type { ButtonProps } from 'components/Button'
+import type { ButtonHTMLAttributes, HTMLAttributes, ReactNode } from 'react'
 
 export interface useDropdownProps {
   expanded: boolean
@@ -15,7 +15,7 @@ export interface useDropdownReturn {
 
 export interface DropdownProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onChange' | 'onBlur'> {
   disabled?: boolean
-  onBlur?: () => void
+  onBlur?: (event?: MouseEvent | TouchEvent | KeyboardEvent) => void
 }
 
 export interface GenericDropdownProps extends DropdownProps, useDropdownProps {}

package/src/components/Dropdown/DropdownTrigger.tsx

@@ -228,7 +228,7 @@ const RotatableIcon = styled(DefaultIcon)<{ $rotate: boolean }>`
   })}
 `
 
-interface DropdownTriggerButtonProps extends DropdownTriggerProps {
+export interface DropdownTriggerButtonProps extends DropdownTriggerProps {
   children: DropdownTriggerProps['children'] | ((args: DropdownContextReturn) => React.ReactNode)
 }
 

package/src/components/Dropdown/useDropdown.ts

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

package/src/components/Icon/Icon.tsx

@@ -19,6 +19,7 @@ import SortDescIcon from './assets/sort-desc.svg'
 import SortIcon from './assets/sort.svg'
 import UploadIcon from './assets/upload.svg'
 import WarningIcon from './assets/warning.svg'
+import DotsHorizontalIcon from './assets/dots-horizontal.svg'
 
 import type { IconProps as GenericIconProps } from '../IconFactory'
 
@@ -42,6 +43,7 @@ const icons = {
   'sort-desc': SortDescIcon as JSX.Element,
   upload: UploadIcon as JSX.Element,
   warning: WarningIcon as JSX.Element,
+  'dots-horizontal': DotsHorizontalIcon as JSX.Element,
 }
 
 const Icon = IconFactory(icons)

package/src/components/Icon/assets/dots-horizontal.svg

@@ -0,0 +1 @@
+<svg viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg"><path d="M14 24a5 5 0 11-10 0 5 5 0 0110 0zm15 0a5 5 0 11-10 0 5 5 0 0110 0zm15 0a5 5 0 11-10 0 5 5 0 0110 0z" fill="currentColor" fill-rule="evenodd"/></svg>

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

@@ -11,6 +11,7 @@ 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,
@@ -159,6 +160,27 @@ 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', () => {
@@ -839,7 +861,7 @@ describe('Select', () => {
     const setup = (overrides: Partial<SelectProps>) =>
       renderer(<Playground {...overrides} options={SelectableKeyTypeOptions} />).render()
 
-    const expectedValue = (value: any) => ({
+    const expectedValue = (value: unknown) => ({
       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 { ChangeEvent, FocusEvent, ComponentType, HTMLAttributes } from 'react'
-import type { DropdownProps, DropdownMenuItemProps } from 'components/Dropdown'
+import type { DropdownMenuItemProps, DropdownProps } from 'components/Dropdown'
 import type { TextFieldProps } from 'components/TextField'
 import type {
-  SelectableAdapter,
   Selectable,
+  SelectableAdapter,
   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: () => void
+    onBlur: (event?: MouseEvent | TouchEvent | KeyboardEvent) => 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 toArray from 'utils/toolset/toArray'
 import { isThenable } from 'utils/toolset/isThenable'
-import { useDidMount } from 'hooks/useDidMount'
+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 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 } = props
+  const { multiple, onQueryChange, onChange, onCreate, id, name, disabled = false, onBlur } = props
   const dropdown = useDropdown(props)
 
   // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -264,17 +264,19 @@ function useSelect(props: SelectProps): useSelectReturn {
       return {
         toggle: dropdown.toggle,
         expanded: dropdown.expanded,
-        onBlur() {
+        onBlur(event?: MouseEvent | TouchEvent | KeyboardEvent) {
           if (!multiple) {
             setQuery(getDisplayValue(adapters, selectable.selected, multiple))
           } else {
             setQuery('')
           }
           options.reset()
+
+          onBlur?.(event)
         },
       }
     },
-    [adapters, dropdown.expanded, dropdown.toggle, multiple, options, selectable.selected]
+    [adapters, dropdown.expanded, dropdown.toggle, multiple, options, selectable.selected, onBlur]
   )
 
   const getTriggerProps = useCallback(

package/src/components/Table/Table.fixtures.ts

@@ -1,6 +1,10 @@
 import generator from '../../../tests/generator'
 
 export const TABLE_COLUMNS = [
+  {
+    key: 'ref',
+    title: 'Reference',
+  },
   {
     key: 'product',
     title: 'Product',
@@ -24,34 +28,40 @@ export const TABLE_COLUMNS = [
 export const TABLE_ROWS = [
   {
     value: 1,
-    [TABLE_COLUMNS[0].key]: generator.word({ capitalize: true, length: 10 }),
-    [TABLE_COLUMNS[1].key]: generator.dollar(),
-    [TABLE_COLUMNS[2].key]: generator.date(),
-    [TABLE_COLUMNS[3].key]: generator.name(),
+    [TABLE_COLUMNS[0].key]: btoa(generator.word({ length: 5 })),
+    [TABLE_COLUMNS[1].key]: generator.word({ capitalize: true, length: 10 }),
+    [TABLE_COLUMNS[2].key]: generator.natural({ max: 10_000 }),
+    [TABLE_COLUMNS[3].key]: generator.date(),
+    [TABLE_COLUMNS[4].key]: generator.name(),
   },
   {
     value: 2,
-    [TABLE_COLUMNS[0].key]: generator.word({ capitalize: true, length: 10 }),
-    [TABLE_COLUMNS[1].key]: generator.dollar(),
-    [TABLE_COLUMNS[2].key]: generator.date(),
-    [TABLE_COLUMNS[3].key]: generator.name(),
+    [TABLE_COLUMNS[0].key]: btoa(generator.word({ length: 5 })),
+    [TABLE_COLUMNS[1].key]: generator.word({ capitalize: true, length: 10 }),
+    [TABLE_COLUMNS[2].key]: generator.natural({ max: 10_000 }),
+    [TABLE_COLUMNS[3].key]: generator.date(),
+    [TABLE_COLUMNS[4].key]: generator.name(),
   },
   {
     value: 3,
-    [TABLE_COLUMNS[0].key]: generator.word({ capitalize: true, length: 10 }),
-    [TABLE_COLUMNS[1].key]: generator.dollar(),
-    [TABLE_COLUMNS[2].key]: generator.date(),
-    [TABLE_COLUMNS[3].key]: generator.name(),
+    [TABLE_COLUMNS[0].key]: btoa(generator.word({ length: 5 })),
+    [TABLE_COLUMNS[1].key]: generator.word({ capitalize: true, length: 10 }),
+    [TABLE_COLUMNS[2].key]: generator.natural({ max: 10_000 }),
+    [TABLE_COLUMNS[3].key]: generator.date(),
+    [TABLE_COLUMNS[4].key]: generator.name(),
   },
   {
     value: 4,
-    [TABLE_COLUMNS[0].key]: generator.word({ capitalize: true, length: 10 }),
-    [TABLE_COLUMNS[1].key]: generator.dollar(),
-    [TABLE_COLUMNS[2].key]: generator.date(),
-    [TABLE_COLUMNS[3].key]: generator.name(),
+    [TABLE_COLUMNS[0].key]: btoa(generator.word({ length: 5 })),
+    [TABLE_COLUMNS[1].key]: generator.word({ capitalize: true, length: 10 }),
+    [TABLE_COLUMNS[2].key]: generator.natural({ max: 10_000 }),
+    [TABLE_COLUMNS[3].key]: generator.date(),
+    [TABLE_COLUMNS[4].key]: generator.name(),
   },
 ]
 
+export type RowFixture = typeof TABLE_ROWS[number]
+
 export const TEST_TABLE_COLUMNS = [
   {
     key: 'name',