@primer/components 31.2.0-rc.c53cfd9e → 31.2.0

package/src/ActionList2/LinkItem.tsx

@@ -1,49 +0,0 @@
-import React from 'react'
-import {ForwardRefComponent as PolymorphicForwardRefComponent} from '@radix-ui/react-polymorphic'
-import Link from '../Link'
-import {SxProp, merge} from '../sx'
-import {Item, ItemProps} from './Item'
-
-// adopted from React.AnchorHTMLAttributes
-type LinkProps = {
-  download?: string
-  href?: string
-  hrefLang?: string
-  media?: string
-  ping?: string
-  rel?: string
-  target?: string
-  type?: string
-  referrerPolicy?: React.AnchorHTMLAttributes<HTMLAnchorElement>['referrerPolicy']
-}
-
-// LinkItem does not support selected, variants, etc.
-type LinkItemProps = Pick<ItemProps, 'children' | 'sx'> & LinkProps
-
-export const LinkItem = React.forwardRef(({sx = {}, as: Component, ...props}, forwardedRef) => {
-  const styles = {
-    // occupy full size of Item
-    paddingX: 2,
-    paddingY: '6px', // custom value off the scale
-    display: 'flex',
-    flexGrow: 1, // full width
-    borderRadius: 2,
-
-    // inherit Item styles
-    color: 'inherit',
-    '&:hover': {color: 'inherit', textDecoration: 'none'}
-  }
-
-  return (
-    <Item
-      sx={{paddingY: 0, paddingX: 0}}
-      _PrivateItemWrapper={({children}) => (
-        <Link as={Component} sx={merge(styles, sx as SxProp)} {...props} ref={forwardedRef}>
-          {children}
-        </Link>
-      )}
-    >
-      {props.children}
-    </Item>
-  )
-}) as PolymorphicForwardRefComponent<'a', LinkItemProps>

package/src/ActionList2/List.tsx

@@ -1,55 +0,0 @@
-import React from 'react'
-import {ForwardRefComponent as PolymorphicForwardRefComponent} from '@radix-ui/react-polymorphic'
-import styled from 'styled-components'
-import sx, {SxProp, merge} from '../sx'
-import {AriaRole} from '../utils/types'
-
-export type ListProps = {
-  /**
-   * `inset` children are offset (vertically and horizontally) from `List`’s edges, `full` children are flush (vertically and horizontally) with `List` edges
-   */
-  variant?: 'inset' | 'full'
-  /**
-   * Whether multiple Items or a single Item can be selected.
-   */
-  selectionVariant?: 'single' | 'multiple'
-  /**
-   * Display a divider above each `Item` in this `List` when it does not follow a `Header` or `Divider`.
-   */
-  showDividers?: boolean
-  /**
-   * The ARIA role describing the function of `List` component. `listbox` or `menu` are a common values.
-   */
-  role?: AriaRole
-} & SxProp
-
-type ContextProps = Omit<ListProps, 'sx'>
-export const ListContext = React.createContext<ContextProps>({})
-
-const ListBox = styled.ul<SxProp>(sx)
-
-export const List = React.forwardRef<HTMLUListElement, ListProps>(
-  (
-    {variant = 'inset', selectionVariant, showDividers = false, sx: sxProp = {}, ...props},
-    forwardedRef
-  ): JSX.Element => {
-    const styles = {
-      margin: 0,
-      paddingInlineStart: 0, // reset ul styles
-      paddingY: variant === 'inset' ? 2 : 0
-    }
-
-    return (
-      <ListBox
-        sx={merge(styles, sxProp as SxProp)}
-        aria-multiselectable={selectionVariant === 'multiple' ? true : undefined}
-        {...props}
-        ref={forwardedRef}
-      >
-        <ListContext.Provider value={{variant, selectionVariant, showDividers}}>{props.children}</ListContext.Provider>
-      </ListBox>
-    )
-  }
-) as PolymorphicForwardRefComponent<'ul', ListProps>
-
-List.displayName = 'ActionList'

package/src/ActionList2/Selection.tsx

@@ -1,40 +0,0 @@
-import React from 'react'
-import {CheckIcon} from '@primer/octicons-react'
-import {ListContext} from './List'
-import {GroupContext} from './Group'
-import {ItemProps} from './Item'
-import {LeadingVisualContainer} from './Visuals'
-
-type SelectionProps = Pick<ItemProps, 'selected' | 'disabled'>
-export const Selection: React.FC<SelectionProps> = ({selected, disabled}) => {
-  const {selectionVariant: listSelectionVariant} = React.useContext(ListContext)
-  const {selectionVariant: groupSelectionVariant} = React.useContext(GroupContext)
-
-  /** selectionVariant in Group can override the selectionVariant in List root */
-  const selectionVariant = typeof groupSelectionVariant !== 'undefined' ? groupSelectionVariant : listSelectionVariant
-
-  // if selectionVariant is not set on List, don't show selection
-  if (!selectionVariant) {
-    // to avoid confusion, fail loudly instead of silently ignoring
-    if (selected)
-      throw new Error(
-        'For Item to be selected, ActionList or ActionList.Group needs to have a selectionVariant defined'
-      )
-    return null
-  }
-
-  if (selectionVariant === 'single') {
-    return <LeadingVisualContainer>{selected && <CheckIcon />}</LeadingVisualContainer>
-  }
-
-  /**
-   * selectionVariant is multiple
-   * readOnly is required because we are doing a one-way bind to `checked`
-   * aria-readonly="false" tells screen that they can still interact with the checkbox
-   */
-  return (
-    <LeadingVisualContainer sx={{input: {margin: 0, pointerEvents: 'none'}}}>
-      <input type="checkbox" checked={selected} disabled={disabled} tabIndex={-1} readOnly aria-readonly="false" />
-    </LeadingVisualContainer>
-  )
-}

package/src/ActionList2/Visuals.tsx

@@ -1,76 +0,0 @@
-import React from 'react'
-import Box from '../Box'
-import {SxProp, merge} from '../sx'
-import {get} from '../constants'
-import {getVariantStyles, Slot, ItemContext, TEXT_ROW_HEIGHT} from './Item'
-
-type VisualProps = SxProp & React.HTMLAttributes<HTMLSpanElement>
-
-export const LeadingVisualContainer: React.FC<VisualProps> = ({sx = {}, ...props}) => {
-  return (
-    <Box
-      as="span"
-      sx={merge(
-        {
-          height: TEXT_ROW_HEIGHT, // match height of text row
-          minWidth: get('space.3'),
-          maxWidth: TEXT_ROW_HEIGHT, // square (same as height)
-          display: 'flex',
-          justifyContent: 'center',
-          alignItems: 'center',
-          flexShrink: 0,
-          marginRight: 2
-        },
-        sx as SxProp
-      )}
-      {...props}
-    />
-  )
-}
-
-export type LeadingVisualProps = VisualProps
-export const LeadingVisual: React.FC<VisualProps> = ({sx = {}, ...props}) => {
-  return (
-    <Slot name="LeadingVisual">
-      {({variant, disabled}: ItemContext) => (
-        <LeadingVisualContainer
-          sx={merge(
-            {
-              color: getVariantStyles(variant, disabled).iconColor,
-              svg: {fontSize: 0}
-            },
-            sx as SxProp
-          )}
-          {...props}
-        >
-          {props.children}
-        </LeadingVisualContainer>
-      )}
-    </Slot>
-  )
-}
-
-export type TrailingVisualProps = VisualProps
-export const TrailingVisual: React.FC<VisualProps> = ({sx = {}, ...props}) => {
-  return (
-    <Slot name="TrailingVisual">
-      {({variant, disabled}: ItemContext) => (
-        <Box
-          as="span"
-          sx={merge(
-            {
-              height: '20px', // match height of text row
-              flexShrink: 0,
-              color: getVariantStyles(variant, disabled).annotationColor,
-              marginLeft: 2
-            },
-            sx as SxProp
-          )}
-          {...props}
-        >
-          {props.children}
-        </Box>
-      )}
-    </Slot>
-  )
-}

package/src/ActionList2/index.ts

@@ -1,39 +0,0 @@
-import {List} from './List'
-import {Group} from './Group'
-import {Item} from './Item'
-import {LinkItem} from './LinkItem'
-import {Divider} from './Divider'
-import {Description} from './Description'
-import {LeadingVisual, TrailingVisual} from './Visuals'
-
-export type {ListProps as ActionListProps} from './List'
-export type {GroupProps} from './Group'
-export type {ItemProps} from './Item'
-export type {DescriptionProps} from './Description'
-export type {LeadingVisualProps, TrailingVisualProps} from './Visuals'
-
-/**
- * Collection of list-related components.
- */
-export const ActionList = Object.assign(List, {
-  /** Collects related `Items` in an `ActionList`. */
-  Group,
-
-  /** An actionable or selectable `Item` */
-  Item,
-
-  /** A `Item` that renders a full-size anchor inside ListItem */
-  LinkItem,
-
-  /** Visually separates `Item`s or `Group`s in an `ActionList`. */
-  Divider,
-
-  /** Secondary text which provides additional information about an `Item`. */
-  Description,
-
-  /** Icon (or similar) positioned before `Item` text. */
-  LeadingVisual,
-
-  /** Icon (or similar) positioned after `Item` text. */
-  TrailingVisual
-})

package/src/ActionMenu.tsx

@@ -1,106 +0,0 @@
-import {GroupedListProps, List, ListPropsBase} from './ActionList/List'
-import {Item, ItemProps} from './ActionList/Item'
-import {Divider} from './ActionList/Divider'
-import Button, {ButtonProps} from './Button'
-import React, {useCallback, useMemo} from 'react'
-import {AnchoredOverlay} from './AnchoredOverlay'
-import {useProvidedStateOrCreate} from './hooks/useProvidedStateOrCreate'
-import {OverlayProps} from './Overlay'
-import {useProvidedRefOrCreate} from './hooks'
-import {AnchoredOverlayWrapperAnchorProps} from './AnchoredOverlay/AnchoredOverlay'
-
-interface ActionMenuBaseProps extends Partial<Omit<GroupedListProps, keyof ListPropsBase>>, ListPropsBase {
-  /**
-   * Content that is passed into the renderAnchor component, which is a button by default.
-   */
-  anchorContent?: React.ReactNode
-
-  /**
-   * A callback that triggers both on clicks and keyboard events. This callback will be overridden by item level `onAction` callbacks.
-   */
-  onAction?: (props: ItemProps, event?: React.MouseEvent<HTMLDivElement> | React.KeyboardEvent<HTMLDivElement>) => void
-
-  /**
-   * If defined, will control the open/closed state of the overlay. Must be used in conjuction with `setOpen`.
-   */
-  open?: boolean
-
-  /**
-   * If defined, will control the open/closed state of the overlay. Must be used in conjuction with `open`.
-   */
-  setOpen?: (s: boolean) => void
-
-  /**
-   * Props to be spread on the internal `Overlay` component.
-   */
-  overlayProps?: Partial<OverlayProps>
-}
-
-export type ActionMenuProps = ActionMenuBaseProps & AnchoredOverlayWrapperAnchorProps
-
-const ActionMenuItem = (props: ItemProps) => <Item role="menuitem" {...props} />
-
-ActionMenuItem.displayName = 'ActionMenu.Item'
-
-const ActionMenuBase = ({
-  anchorContent,
-  renderAnchor = <T extends ButtonProps>(props: T) => <Button {...props} />,
-  anchorRef: externalAnchorRef,
-  onAction,
-  open,
-  setOpen,
-  overlayProps,
-  items,
-  ...listProps
-}: ActionMenuProps): JSX.Element => {
-  const [combinedOpenState, setCombinedOpenState] = useProvidedStateOrCreate(open, setOpen, false)
-  const anchorRef = useProvidedRefOrCreate(externalAnchorRef)
-  const onOpen = useCallback(() => setCombinedOpenState(true), [setCombinedOpenState])
-  const onClose = useCallback(() => setCombinedOpenState(false), [setCombinedOpenState])
-
-  const renderMenuAnchor = useMemo(() => {
-    if (renderAnchor === null) {
-      return null
-    }
-    return <T extends React.HTMLAttributes<HTMLElement>>(props: T) => {
-      return renderAnchor({
-        'aria-label': 'menu',
-        children: anchorContent,
-        ...props
-      })
-    }
-  }, [anchorContent, renderAnchor])
-
-  const itemsToRender = useMemo(() => {
-    return items.map(item => {
-      return {
-        ...item,
-        role: 'menuitem',
-        onAction: (props, event) => {
-          const actionCallback = item.onAction ?? onAction
-          actionCallback?.(props as ItemProps, event)
-          if (!event.defaultPrevented) {
-            onClose()
-          }
-        }
-      } as ItemProps
-    })
-  }, [items, onAction, onClose])
-
-  return (
-    <AnchoredOverlay
-      renderAnchor={renderMenuAnchor}
-      anchorRef={anchorRef}
-      open={combinedOpenState}
-      onOpen={onOpen}
-      onClose={onClose}
-      overlayProps={overlayProps}
-    >
-      <List {...listProps} role="menu" items={itemsToRender} />
-    </AnchoredOverlay>
-  )
-}
-
-ActionMenuBase.displayName = 'ActionMenu'
-
-export const ActionMenu = Object.assign(ActionMenuBase, {Divider, Item: ActionMenuItem})

package/src/AnchoredOverlay/AnchoredOverlay.tsx

@@ -1,191 +0,0 @@
-import React, {useCallback, useEffect} from 'react'
-import Overlay, {OverlayProps} from '../Overlay'
-import {FocusTrapHookSettings, useFocusTrap} from '../hooks/useFocusTrap'
-import {FocusZoneHookSettings, useFocusZone} from '../hooks/useFocusZone'
-import {useAnchoredPosition, useProvidedRefOrCreate, useRenderForcingRef} from '../hooks'
-import {useSSRSafeId} from '@react-aria/ssr'
-import {PositionSettings} from '../behaviors/anchoredPosition'
-
-interface AnchoredOverlayPropsWithAnchor {
-  /**
-   * A custom function component used to render the anchor element.
-   * Will receive the selected text as `children` prop when an item is activated.
-   */
-  renderAnchor: <T extends React.HTMLAttributes<HTMLElement>>(props: T) => JSX.Element
-
-  /**
-   * An override to the internal ref that will be spread on to the renderAnchor
-   */
-  anchorRef?: React.RefObject<HTMLElement>
-}
-
-interface AnchoredOverlayPropsWithoutAnchor {
-  /**
-   * A custom function component used to render the anchor element.
-   * When renderAnchor is null, an anchorRef is required.
-   */
-  renderAnchor: null
-
-  /**
-   * An override to the internal renderAnchor ref that will be used to position the overlay.
-   * When renderAnchor is null this can be used to make an anchor that is detached from ActionMenu.
-   */
-  anchorRef: React.RefObject<HTMLElement>
-}
-
-export type AnchoredOverlayWrapperAnchorProps =
-  | Partial<AnchoredOverlayPropsWithAnchor>
-  | AnchoredOverlayPropsWithoutAnchor
-
-interface AnchoredOverlayBaseProps extends Pick<OverlayProps, 'height' | 'width'> {
-  /**
-   * Determines whether the overlay portion of the component should be shown or not
-   */
-  open: boolean
-
-  /**
-   * A callback which is called whenever the overlay is currently closed and an "open gesture" is detected.
-   */
-  onOpen?: (gesture: 'anchor-click' | 'anchor-key-press') => unknown
-
-  /**
-   * A callback which is called whenever the overlay is currently open and a "close gesture" is detected.
-   */
-  onClose?: (gesture: 'anchor-click' | 'click-outside' | 'escape') => unknown
-
-  /**
-   * Props to be spread on the internal `Overlay` component.
-   */
-  overlayProps?: Partial<OverlayProps>
-
-  /**
-   * Settings to apply to the Focus Zone on the internal `Overlay` component.
-   */
-  focusTrapSettings?: Partial<FocusTrapHookSettings>
-
-  /**
-   * Settings to apply to the Focus Zone on the internal `Overlay` component.
-   */
-  focusZoneSettings?: Partial<FocusZoneHookSettings>
-}
-
-export type AnchoredOverlayProps = AnchoredOverlayBaseProps &
-  (AnchoredOverlayPropsWithAnchor | AnchoredOverlayPropsWithoutAnchor) &
-  Partial<Pick<PositionSettings, 'align' | 'side'>>
-
-/**
- * An `AnchoredOverlay` provides an anchor that will open a floating overlay positioned relative to the anchor.
- * The overlay can be opened and navigated using keyboard or mouse.
- */
-export const AnchoredOverlay: React.FC<AnchoredOverlayProps> = ({
-  renderAnchor,
-  anchorRef: externalAnchorRef,
-  children,
-  open,
-  onOpen,
-  onClose,
-  height,
-  width,
-  overlayProps,
-  focusTrapSettings,
-  focusZoneSettings,
-  side,
-  align
-}) => {
-  const anchorRef = useProvidedRefOrCreate(externalAnchorRef)
-  const [overlayRef, updateOverlayRef] = useRenderForcingRef<HTMLDivElement>()
-  const anchorId = useSSRSafeId()
-
-  const onClickOutside = useCallback(() => onClose?.('click-outside'), [onClose])
-  const onEscape = useCallback(() => onClose?.('escape'), [onClose])
-
-  const onAnchorKeyDown = useCallback(
-    (event: React.KeyboardEvent<HTMLElement>) => {
-      if (!event.defaultPrevented) {
-        if (!open && ['ArrowDown', 'ArrowUp', ' ', 'Enter'].includes(event.key)) {
-          onOpen?.('anchor-key-press')
-          event.preventDefault()
-        }
-      }
-    },
-    [open, onOpen]
-  )
-  const onAnchorClick = useCallback(
-    (event: React.MouseEvent<HTMLElement>) => {
-      if (event.defaultPrevented || event.button !== 0) {
-        return
-      }
-      if (!open) {
-        onOpen?.('anchor-click')
-      } else {
-        onClose?.('anchor-click')
-      }
-    },
-    [open, onOpen, onClose]
-  )
-
-  const {position} = useAnchoredPosition(
-    {
-      anchorElementRef: anchorRef,
-      floatingElementRef: overlayRef,
-      side,
-      align
-    },
-    [overlayRef.current]
-  )
-
-  useEffect(() => {
-    // ensure overlay ref gets cleared when closed, so position can reset between closing/re-opening
-    if (!open && overlayRef.current) {
-      updateOverlayRef(null)
-    }
-  }, [open, overlayRef, updateOverlayRef])
-
-  useFocusZone({
-    containerRef: overlayRef,
-    disabled: !open || !position,
-    ...focusZoneSettings
-  })
-  useFocusTrap({containerRef: overlayRef, disabled: !open || !position, ...focusTrapSettings})
-
-  return (
-    <>
-      {renderAnchor &&
-        renderAnchor({
-          ref: anchorRef,
-          id: anchorId,
-          'aria-labelledby': anchorId,
-          'aria-haspopup': 'true',
-          tabIndex: 0,
-          onClick: onAnchorClick,
-          onKeyDown: onAnchorKeyDown
-        })}
-      {open ? (
-        <Overlay
-          returnFocusRef={anchorRef}
-          onClickOutside={onClickOutside}
-          ignoreClickRefs={[anchorRef]}
-          onEscape={onEscape}
-          ref={updateOverlayRef}
-          role="none"
-          visibility={position ? 'visible' : 'hidden'}
-          height={height}
-          width={width}
-          top={position?.top || 0}
-          left={position?.left || 0}
-          anchorSide={position?.anchorSide}
-          {...overlayProps}
-        >
-          {children}
-        </Overlay>
-      ) : null}
-    </>
-  )
-}
-
-AnchoredOverlay.displayName = 'AnchoredOverlay'
-
-AnchoredOverlay.defaultProps = {
-  side: 'outside-bottom',
-  align: 'start'
-}

package/src/AnchoredOverlay/index.ts

@@ -1,2 +0,0 @@
-export {AnchoredOverlay} from './AnchoredOverlay'
-export type {AnchoredOverlayProps} from './AnchoredOverlay'

package/src/Autocomplete/Autocomplete.tsx

@@ -1,103 +0,0 @@
-import React, {useCallback, useReducer, useRef} from 'react'
-import {useSSRSafeId} from '@react-aria/ssr'
-import {ComponentProps} from '../utils/types'
-import {AutocompleteContext} from './AutocompleteContext'
-import AutocompleteInput from './AutocompleteInput'
-import AutocompleteMenu from './AutocompleteMenu'
-import AutocompleteOverlay from './AutocompleteOverlay'
-
-type Action =
-  | {type: 'showMenu' | 'isMenuDirectlyActivated'; payload: boolean}
-  | {type: 'autocompleteSuggestion' | 'inputValue'; payload: string}
-  | {type: 'selectedItemLength'; payload: number}
-
-interface State {
-  inputValue: string
-  showMenu: boolean
-  isMenuDirectlyActivated: boolean
-  autocompleteSuggestion: string
-  selectedItemLength: number
-}
-
-const initialState = {
-  inputValue: '',
-  showMenu: false,
-  isMenuDirectlyActivated: false,
-  autocompleteSuggestion: '',
-  selectedItemLength: 0
-}
-
-const reducer = (state: State, action: Action) => {
-  const {type, payload} = action
-  switch (type) {
-    case 'inputValue':
-      return {...state, inputValue: payload as State['inputValue']}
-    case 'showMenu':
-      return {...state, showMenu: payload as State['showMenu']}
-    case 'isMenuDirectlyActivated':
-      return {...state, isMenuDirectlyActivated: payload as State['isMenuDirectlyActivated']}
-    case 'autocompleteSuggestion':
-      return {...state, autocompleteSuggestion: payload as State['autocompleteSuggestion']}
-    case 'selectedItemLength':
-      return {...state, selectedItemLength: payload as State['selectedItemLength']}
-    default:
-      return state
-  }
-}
-
-const Autocomplete: React.FC<{id?: string}> = ({children, id: idProp}) => {
-  const activeDescendantRef = useRef<HTMLElement>(null)
-  const scrollContainerRef = useRef<HTMLDivElement>(null)
-  const inputRef = useRef<HTMLInputElement>(null)
-  const [state, dispatch] = useReducer(reducer, initialState)
-  const {inputValue, showMenu, autocompleteSuggestion, isMenuDirectlyActivated, selectedItemLength} = state
-  const setInputValue = useCallback((value: State['inputValue']) => {
-    dispatch({type: 'inputValue', payload: value})
-  }, [])
-  const setShowMenu = useCallback((value: State['showMenu']) => {
-    dispatch({type: 'showMenu', payload: value})
-  }, [])
-  const setAutocompleteSuggestion = useCallback((value: State['autocompleteSuggestion']) => {
-    dispatch({type: 'autocompleteSuggestion', payload: value})
-  }, [])
-  const setIsMenuDirectlyActivated = useCallback((value: State['isMenuDirectlyActivated']) => {
-    dispatch({type: 'isMenuDirectlyActivated', payload: value})
-  }, [])
-  const setSelectedItemLength = useCallback((value: State['selectedItemLength']) => {
-    dispatch({type: 'selectedItemLength', payload: value})
-  }, [])
-  const id = useSSRSafeId(idProp)
-
-  return (
-    <AutocompleteContext.Provider
-      value={{
-        activeDescendantRef,
-        autocompleteSuggestion,
-        id,
-        inputRef,
-        inputValue,
-        isMenuDirectlyActivated,
-        scrollContainerRef,
-        selectedItemLength,
-        setAutocompleteSuggestion,
-        setInputValue,
-        setIsMenuDirectlyActivated,
-        setShowMenu,
-        setSelectedItemLength,
-        showMenu
-      }}
-    >
-      {children}
-    </AutocompleteContext.Provider>
-  )
-}
-
-export type AutocompleteProps = ComponentProps<typeof Autocomplete>
-export type {AutocompleteInputProps} from './AutocompleteInput'
-export type {AutocompleteMenuProps} from './AutocompleteMenu'
-export type {AutocompleteOverlayProps} from './AutocompleteOverlay'
-export default Object.assign(Autocomplete, {
-  Input: AutocompleteInput,
-  Menu: AutocompleteMenu,
-  Overlay: AutocompleteOverlay
-})

package/src/Autocomplete/AutocompleteContext.tsx

@@ -1,19 +0,0 @@
-import {createContext} from 'react'
-
-export const AutocompleteContext = createContext<{
-  activeDescendantRef: React.MutableRefObject<HTMLElement | null>
-  autocompleteSuggestion: string
-  // TODO: consider changing `id` to `listboxId` because we're just using it to associate the input and combobox with the listbox
-  id: string
-  inputRef: React.MutableRefObject<HTMLInputElement | null>
-  inputValue: string
-  isMenuDirectlyActivated: boolean
-  scrollContainerRef: React.MutableRefObject<HTMLElement | null>
-  selectedItemLength: number
-  setAutocompleteSuggestion: (value: string) => void
-  setInputValue: (value: string) => void
-  setIsMenuDirectlyActivated: (value: boolean) => void
-  setSelectedItemLength: (value: number) => void
-  setShowMenu: (value: boolean) => void
-  showMenu: boolean
-} | null>(null)