@primer/components 32.1.0 → 33.0.0-rc.b495ba4a

package/src/stories/Autocomplete.stories.tsx

@@ -0,0 +1,655 @@
+import React, {ChangeEventHandler, RefObject, useCallback, useRef, useState} from 'react'
+import {Meta} from '@storybook/react'
+
+import {BaseStyles, Box, Text, TextInput, ThemeProvider} from '..'
+import TextInputTokens from '../TextInputWithTokens'
+import Autocomplete from '../Autocomplete/Autocomplete'
+import {AnchoredOverlay} from '../AnchoredOverlay'
+import {ButtonInvisible} from '../Button'
+
+type ItemMetadata = {
+  fillColor: React.CSSProperties['backgroundColor']
+}
+
+type Datum = {
+  id: string | number
+  text: string
+  selected?: boolean
+  metadata?: ItemMetadata
+}
+
+const items: Datum[] = [
+  {text: 'css', id: 0},
+  {text: 'css-in-js', id: 1},
+  {text: 'styled-system', id: 2},
+  {text: 'javascript', id: 3},
+  {text: 'typescript', id: 4},
+  {text: 'react', id: 5},
+  {text: 'design-systems', id: 6}
+]
+
+const mockTokens: Datum[] = [...items].slice(0, 3)
+
+export default {
+  title: 'Forms/Autocomplete',
+
+  decorators: [
+    Story => {
+      const [lastKey, setLastKey] = useState('none')
+      const reportKey = useCallback((event: React.KeyboardEvent<HTMLDivElement>) => {
+        setLastKey(event.key)
+      }, [])
+
+      return (
+        <ThemeProvider>
+          <BaseStyles>
+            <Box onKeyDownCapture={reportKey}>
+              <Box position="absolute" right={5} top={2}>
+                Last key pressed: {lastKey}
+              </Box>
+              <Box paddingTop={5}>
+                <Story />
+              </Box>
+            </Box>
+          </BaseStyles>
+        </ThemeProvider>
+      )
+    }
+  ]
+} as Meta
+
+export const SingleSelect = () => {
+  return (
+    <>
+      <Text
+        fontWeight="bold"
+        fontSize={1}
+        as="label"
+        display="block"
+        htmlFor="autocompleteInput"
+        id="autocompleteLabel"
+      >
+        Pick a tag
+      </Text>
+      <Autocomplete>
+        <Autocomplete.Input block id="autocompleteInput" />
+        <Autocomplete.Overlay>
+          <Autocomplete.Menu items={items} selectedItemIds={[]} aria-labelledby="autocompleteLabel" />
+        </Autocomplete.Overlay>
+      </Autocomplete>
+    </>
+  )
+}
+
+export const MultiSelect = () => {
+  const [selectedItemIds, setSelectedItemIds] = useState<Array<string | number>>([])
+  const onSelectedChange = (newlySelectedItems: Datum | Datum[]) => {
+    if (!Array.isArray(newlySelectedItems)) {
+      return
+    }
+
+    setSelectedItemIds(newlySelectedItems.map(item => item.id))
+  }
+
+  const getItemById = (id: string | number) => items.find(item => item.id === id)
+
+  return (
+    <Box display="flex" sx={{gap: '1em'}}>
+      <div>
+        <Text
+          fontWeight="bold"
+          fontSize={1}
+          as="label"
+          display="block"
+          htmlFor="autocompleteInput"
+          id="autocompleteLabel"
+        >
+          Pick a tag
+        </Text>
+        <Autocomplete>
+          <Autocomplete.Input id="autocompleteInput" />
+          <Autocomplete.Overlay>
+            <Autocomplete.Menu
+              items={items}
+              selectedItemIds={selectedItemIds}
+              aria-labelledby="autocompleteLabel"
+              onSelectedChange={onSelectedChange}
+              selectionVariant="multiple"
+            />
+          </Autocomplete.Overlay>
+        </Autocomplete>
+      </div>
+      <div>
+        <div>Selected items:</div>
+        <Box as="ul" my={0}>
+          {selectedItemIds.map(selectedItemId => (
+            <li key={selectedItemId}>{getItemById(selectedItemId)?.text}</li>
+          ))}
+        </Box>
+      </div>
+    </Box>
+  )
+}
+
+export const MultiSelectWithTokenInput = () => {
+  const [tokens, setTokens] = useState<Datum[]>([]) // [items[0], items[2]]
+  const selectedTokenIds = tokens.map(token => token.id)
+  const [selectedItemIds, setSelectedItemIds] = useState<Array<string | number>>(selectedTokenIds)
+  const onTokenRemove: (tokenId: string | number) => void = tokenId => {
+    setTokens(tokens.filter(token => token.id !== tokenId))
+    setSelectedItemIds(selectedItemIds.filter(id => id !== tokenId))
+  }
+  const onSelectedChange = (newlySelectedItems: Datum | Datum[]) => {
+    if (!Array.isArray(newlySelectedItems)) {
+      return
+    }
+
+    setSelectedItemIds(newlySelectedItems.map(item => item.id))
+
+    if (newlySelectedItems.length < selectedItemIds.length) {
+      const newlySelectedItemIds = newlySelectedItems.map(({id}) => id)
+      const removedItemIds = selectedTokenIds.filter(id => !newlySelectedItemIds.includes(id))
+
+      for (const removedItemId of removedItemIds) {
+        onTokenRemove(removedItemId)
+      }
+
+      return
+    }
+
+    setTokens(newlySelectedItems.map(({id, text}) => ({id, text})))
+  }
+
+  return (
+    <>
+      <Text
+        fontWeight="bold"
+        fontSize={1}
+        as="label"
+        display="block"
+        htmlFor="autocompleteInput"
+        id="autocompleteLabel"
+      >
+        Pick tags
+      </Text>
+      <Autocomplete>
+        <Autocomplete.Input
+          block
+          as={TextInputTokens}
+          tokens={tokens}
+          onTokenRemove={onTokenRemove}
+          id="autocompleteInput"
+        />
+        <Autocomplete.Overlay>
+          <Autocomplete.Menu
+            items={items}
+            selectedItemIds={selectedItemIds}
+            onSelectedChange={onSelectedChange}
+            selectionVariant="multiple"
+            aria-labelledby="autocompleteLabel"
+          />
+        </Autocomplete.Overlay>
+      </Autocomplete>
+    </>
+  )
+}
+
+export const MultiSelectAddNewItem = () => {
+  const [localItemsState, setLocalItemsState] = useState<Datum[]>(items)
+  const [filterVal, setFilterVal] = useState<string>('')
+  const [tokens, setTokens] = useState<Datum[]>(mockTokens)
+  const selectedTokenIds = tokens.map(token => token.id)
+  const [selectedItemIds, setSelectedItemIds] = useState<Array<string | number>>(selectedTokenIds)
+  const onTokenRemove: (tokenId: string | number) => void = tokenId => {
+    setTokens(tokens.filter(token => token.id !== tokenId))
+    setSelectedItemIds(selectedItemIds.filter(id => id !== tokenId))
+  }
+  const onSelectedChange = (newlySelectedItems: Datum | Datum[]) => {
+    if (!Array.isArray(newlySelectedItems)) {
+      return
+    }
+
+    setSelectedItemIds(newlySelectedItems.map(item => item.id))
+
+    if (newlySelectedItems.length < selectedItemIds.length) {
+      const newlySelectedItemIds = newlySelectedItems.map(({id}) => id)
+      const removedItemIds = selectedTokenIds.filter(id => !newlySelectedItemIds.includes(id))
+
+      for (const removedItemId of removedItemIds) {
+        onTokenRemove(removedItemId)
+      }
+
+      return
+    }
+
+    setTokens(newlySelectedItems.map(({id, text}) => ({id, text})))
+  }
+
+  const onItemSelect: (item: Datum) => void = item => {
+    onSelectedChange([...selectedItemIds.map(id => items.find(selectedItem => selectedItem.id === id) as Datum), item])
+
+    if (!localItemsState.some(localItem => localItem.id === item.id)) {
+      setLocalItemsState([...localItemsState, item])
+    }
+  }
+
+  const handleChange: ChangeEventHandler<HTMLInputElement> = e => {
+    setFilterVal(e.currentTarget.value)
+  }
+
+  return (
+    <Box maxWidth="300px">
+      <Text
+        fontWeight="bold"
+        fontSize={1}
+        as="label"
+        display="block"
+        htmlFor="autocompleteInput"
+        id="autocompleteLabel"
+      >
+        Pick tags
+      </Text>
+      <Autocomplete>
+        <Autocomplete.Input
+          block
+          as={TextInputTokens}
+          tokens={[]}
+          onTokenRemove={onTokenRemove}
+          onChange={handleChange}
+          id="autocompleteInput"
+        />
+        <Autocomplete.Overlay>
+          <Autocomplete.Menu
+            addNewItem={
+              filterVal && !localItemsState.map(localItem => localItem.text).includes(filterVal)
+                ? {
+                    text: `Add '${filterVal}'`,
+                    handleAddItem: item => {
+                      onItemSelect({
+                        ...item,
+                        text: filterVal,
+                        selected: true
+                      })
+                      setFilterVal('')
+                    }
+                  }
+                : undefined
+            }
+            items={localItemsState}
+            selectedItemIds={selectedItemIds}
+            onSelectedChange={onSelectedChange}
+            selectionVariant="multiple"
+            aria-labelledby="autocompleteLabel"
+          />
+        </Autocomplete.Overlay>
+      </Autocomplete>
+    </Box>
+  )
+}
+
+export const CustomEmptyStateMessage = () => {
+  return (
+    <>
+      <Text
+        fontWeight="bold"
+        fontSize={1}
+        as="label"
+        display="block"
+        htmlFor="autocompleteInput"
+        id="autocompleteLabel"
+      >
+        Pick a tag
+      </Text>
+      <Autocomplete>
+        <Autocomplete.Input id="autocompleteInput" />
+        <Autocomplete.Overlay>
+          <Autocomplete.Menu
+            items={items}
+            selectedItemIds={[]}
+            aria-labelledby="autocompleteLabel"
+            emptyStateText="Sorry, no matches"
+          />
+        </Autocomplete.Overlay>
+      </Autocomplete>
+    </>
+  )
+}
+
+export const CustomSearchFilter = () => {
+  const [filterVal, setFilterVal] = useState<string>('')
+  const handleChange: ChangeEventHandler<HTMLInputElement> = e => {
+    setFilterVal(e.currentTarget.value)
+  }
+  const customFilterFn = (item: Datum) => item.text.includes(filterVal)
+
+  return (
+    <>
+      <Text
+        fontWeight="bold"
+        fontSize={1}
+        as="label"
+        display="block"
+        htmlFor="autocompleteInput"
+        id="autocompleteLabel"
+      >
+        Pick a tag
+      </Text>
+      <Autocomplete>
+        <Autocomplete.Input id="autocompleteInput" onChange={handleChange} />
+        <Autocomplete.Overlay>
+          <Autocomplete.Menu
+            items={items}
+            selectedItemIds={[]}
+            aria-labelledby="autocompleteLabel"
+            filterFn={customFilterFn}
+          />
+        </Autocomplete.Overlay>
+      </Autocomplete>
+      <Text fontSize={0} display="block" color="fg.subtle" mt={2}>
+        Items in dropdown are filtered if their text has no part that matches the input value
+      </Text>
+    </>
+  )
+}
+
+export const CustomSortAfterMenuClose = () => {
+  const [selectedItemIds, setSelectedItemIds] = useState<Array<string | number>>([])
+  const isItemSelected = (itemId: string | number) => selectedItemIds.includes(itemId)
+  const onSelectedChange = (newlySelectedItems: Datum | Datum[]) => {
+    if (!Array.isArray(newlySelectedItems)) {
+      return
+    }
+
+    setSelectedItemIds(newlySelectedItems.map(item => item.id))
+  }
+  const customSortFn = (itemIdA: string | number, itemIdB: string | number) =>
+    isItemSelected(itemIdA) === isItemSelected(itemIdB) ? 0 : isItemSelected(itemIdA) ? 1 : -1
+
+  return (
+    <>
+      <Text
+        fontWeight="bold"
+        fontSize={1}
+        as="label"
+        display="block"
+        htmlFor="autocompleteInput"
+        id="autocompleteLabel"
+      >
+        Pick a tag
+      </Text>
+      <Autocomplete>
+        <Autocomplete.Input id="autocompleteInput" />
+        <Autocomplete.Overlay>
+          <Autocomplete.Menu
+            items={items}
+            selectedItemIds={selectedItemIds}
+            aria-labelledby="autocompleteLabel"
+            onSelectedChange={onSelectedChange}
+            sortOnCloseFn={customSortFn}
+            selectionVariant="multiple"
+          />
+        </Autocomplete.Overlay>
+      </Autocomplete>
+      <Text fontSize={0} display="block" color="fg.subtle" mt={2}>
+        When the dropdown closes, selected items are sorted to the end
+      </Text>
+    </>
+  )
+}
+
+export const WithCallbackWhenOverlayOpenStateChanges = () => {
+  const [isMenuOpen, setIsMenuOpen] = useState<boolean>(false)
+  const onOpenChange = (isOpen: boolean) => {
+    setIsMenuOpen(isOpen)
+  }
+
+  return (
+    <Box display="flex" sx={{gap: '1em'}}>
+      <div>
+        <Text
+          fontWeight="bold"
+          fontSize={1}
+          as="label"
+          display="block"
+          htmlFor="autocompleteInput"
+          id="autocompleteLabel"
+        >
+          Pick a tag
+        </Text>
+        <Autocomplete>
+          <Autocomplete.Input id="autocompleteInput" />
+          <Autocomplete.Overlay>
+            <Autocomplete.Menu
+              items={items}
+              selectedItemIds={[]}
+              aria-labelledby="autocompleteLabel"
+              onOpenChange={onOpenChange}
+            />
+          </Autocomplete.Overlay>
+        </Autocomplete>
+      </div>
+      <div>
+        The menu is <strong>{isMenuOpen ? 'opened' : 'closed'}</strong>
+      </div>
+    </Box>
+  )
+}
+
+export const AsyncLoadingOfItems = () => {
+  const [loadedItems, setLoadedItems] = useState<Datum[]>([])
+  const onOpenChange = () => {
+    setTimeout(() => {
+      setLoadedItems(items)
+    }, 1500)
+  }
+
+  return (
+    <>
+      <Text
+        fontWeight="bold"
+        fontSize={1}
+        as="label"
+        display="block"
+        htmlFor="autocompleteInput"
+        id="autocompleteLabel"
+      >
+        Pick a tag
+      </Text>
+      <Autocomplete>
+        <Autocomplete.Input id="autocompleteInput" />
+        <Autocomplete.Overlay>
+          <Autocomplete.Menu
+            items={loadedItems}
+            selectedItemIds={[]}
+            aria-labelledby="autocompleteLabel"
+            onOpenChange={onOpenChange}
+            loading={loadedItems.length === 0}
+          />
+        </Autocomplete.Overlay>
+      </Autocomplete>
+    </>
+  )
+}
+
+export const RenderingTheMenuOutsideAnOverlay = () => {
+  return (
+    <>
+      <Text
+        fontWeight="bold"
+        fontSize={1}
+        as="label"
+        display="block"
+        htmlFor="autocompleteInput"
+        id="autocompleteLabel"
+      >
+        Pick a tag
+      </Text>
+      <Autocomplete>
+        <Autocomplete.Input id="autocompleteInput" />
+        <Autocomplete.Menu items={items} selectedItemIds={[]} aria-labelledby="autocompleteLabel" />
+      </Autocomplete>
+    </>
+  )
+}
+
+export const CustomOverlayMenuAnchor = () => {
+  const menuAnchorRef = useRef<HTMLElement>(null)
+  const anchorWrapperStyles = {
+    display: 'flex',
+    alignItems: 'center',
+    flexGrow: 1,
+    flexShrink: 0,
+    flexBasis: '25%',
+    border: '1px solid black',
+    padding: '1em'
+  }
+
+  return (
+    <>
+      <Text
+        fontWeight="bold"
+        fontSize={1}
+        as="label"
+        display="block"
+        htmlFor="autocompleteInput"
+        id="autocompleteLabel"
+      >
+        Pick tags
+      </Text>
+      <Box {...anchorWrapperStyles} ref={menuAnchorRef as React.RefObject<HTMLDivElement>}>
+        <Autocomplete>
+          <Autocomplete.Input
+            as={TextInput}
+            id="autocompleteInput"
+            sx={{
+              border: '0',
+              padding: '0',
+              boxShadow: 'none',
+              ':focus-within': {
+                border: '0',
+                boxShadow: 'none'
+              }
+            }}
+          />
+          <Autocomplete.Overlay menuAnchorRef={menuAnchorRef}>
+            <Autocomplete.Menu items={items} selectedItemIds={[]} aria-labelledby="autocompleteLabel" />
+          </Autocomplete.Overlay>
+        </Autocomplete>
+      </Box>
+      <Text fontSize={0} display="block" color="fg.subtle" mt={2}>
+        The overlay menu&apos;s position is anchored to the div with the black border instead of to the text input
+      </Text>
+    </>
+  )
+}
+
+export const WithCustomOverlayProps = () => {
+  return (
+    <>
+      <Text
+        fontWeight="bold"
+        fontSize={1}
+        as="label"
+        display="block"
+        htmlFor="autocompleteInput"
+        id="autocompleteLabel"
+      >
+        Pick a tag
+      </Text>
+      <Autocomplete>
+        <Autocomplete.Input id="autocompleteInput" />
+        <Autocomplete.Overlay
+          overlayProps={{
+            width: 'large',
+            height: 'xsmall'
+          }}
+        >
+          <Autocomplete.Menu items={items} selectedItemIds={[]} aria-labelledby="autocompleteLabel" />
+        </Autocomplete.Overlay>
+      </Autocomplete>
+    </>
+  )
+}
+
+export const InOverlayWithCustomScrollContainerRef = () => {
+  const scrollContainerRef = useRef<HTMLElement>(null)
+  const inputRef = useRef<HTMLInputElement>(null)
+
+  const [isOpen, setIsOpen] = useState(false)
+  const handleOpen = () => {
+    setIsOpen(true)
+    inputRef.current && inputRef.current.focus()
+  }
+
+  return (
+    <AnchoredOverlay
+      open={isOpen}
+      onOpen={handleOpen}
+      onClose={() => setIsOpen(false)}
+      width="large"
+      height="xsmall"
+      focusTrapSettings={{initialFocusRef: inputRef}}
+      side="inside-top"
+      renderAnchor={props => <ButtonInvisible {...props}>open overlay</ButtonInvisible>}
+    >
+      <Box
+        as="label"
+        display="block"
+        htmlFor="autocompleteInput"
+        id="autocompleteLabel"
+        sx={{
+          // visually hides this label for sighted users
+          position: 'absolute',
+          width: '1px',
+          height: '1px',
+          padding: '0',
+          margin: '-1px',
+          overflow: 'hidden',
+          clip: 'rect(0, 0, 0, 0)',
+          whiteSpace: 'nowrap',
+          borderWidth: '0'
+        }}
+      >
+        Pick tags
+      </Box>
+      <Autocomplete>
+        <Box display="flex" flexDirection="column" height="100%">
+          <Box
+            paddingX="3"
+            paddingY="1"
+            borderWidth={0}
+            borderBottomWidth={1}
+            borderColor="border.default"
+            borderStyle="solid"
+          >
+            <Autocomplete.Input
+              block
+              as={TextInput}
+              ref={inputRef}
+              id="autocompleteInput"
+              sx={{
+                display: 'flex',
+                border: '0',
+                padding: '0',
+                boxShadow: 'none',
+                ':focus-within': {
+                  border: '0',
+                  boxShadow: 'none'
+                }
+              }}
+            />
+          </Box>
+          <Box overflow="auto" flexGrow={1} ref={scrollContainerRef as RefObject<HTMLDivElement>}>
+            <Autocomplete.Menu
+              items={items}
+              selectedItemIds={[]}
+              // onSelectedChange={onSelectedChange}
+              customScrollContainerRef={scrollContainerRef}
+              aria-labelledby="autocompleteLabel"
+            />
+          </Box>
+        </Box>
+      </Autocomplete>
+    </AnchoredOverlay>
+  )
+}

package/src/stories/AvatarStack.stories.tsx

@@ -0,0 +1,37 @@
+import AvatarStack from '../AvatarStack'
+import {Meta} from '@storybook/react'
+import React from 'react'
+import {ThemeProvider} from '..'
+import BaseStyles from '../BaseStyles'
+
+const meta: Meta = {
+  title: 'Composite components/AvatarStack',
+  component: AvatarStack,
+  decorators: [
+    (Story: React.ComponentType): JSX.Element => (
+      <ThemeProvider>
+        <BaseStyles>
+          <Story />
+        </BaseStyles>
+      </ThemeProvider>
+    )
+  ],
+  parameters: {
+    controls: {
+      disabled: true
+    }
+  }
+}
+export default meta
+
+export function AvatarStackStory(): JSX.Element {
+  return (
+    <AvatarStack>
+      <img src="https://avatars.githubusercontent.com/primer" alt="" />
+      <img src="https://avatars.githubusercontent.com/github" alt="" />
+      <img src="https://avatars.githubusercontent.com/primer" alt="" />
+      <img src="https://avatars.githubusercontent.com/github" alt="" />
+    </AvatarStack>
+  )
+}
+AvatarStackStory.storyName = 'AvatarStack'