How to use @fluentui/react-bindings - 9 common examples

renderer = null,
    rtl = false,
    theme = emptyTheme,
    telemetry = undefined as Telemetry,
    _internal_resolvedComponentVariables: resolvedComponentVariables = {},
  } = context || {}

  const startTime = telemetry && telemetry.enabled ? performance.now() : 0

  const ElementType = getElementType(props) as React.ReactType<p>
  const stateAndProps = { ...state, ...props }

  // Resolve variables for this component, cache the result in provider
  if (!resolvedComponentVariables[displayName]) {
    resolvedComponentVariables[displayName] =
      callable(theme.componentVariables[displayName])(theme.siteVariables) || {} // component variables must not be undefined/null (see mergeComponentVariables contract)
  }

  // Merge inline variables on top of cached variables
  const resolvedVariables = props.variables
    ? mergeComponentVariables(
        resolvedComponentVariables[displayName],
        withDebugId(props.variables, 'props.variables'),
      )(theme.siteVariables)
    : resolvedComponentVariables[displayName]

  const animationCSSProp = props.animation
    ? createAnimationStyles(props.animation, context.theme)
    : {}

  // Resolve styles using resolved variables, merge results, allow props.styles to override
  const mergedStyles: ComponentSlotStylesPrepared = mergeComponentStyles(</p>

if (_.isEmpty(context)) {
    logProviderMissingWarning()
  }

  const {
    disableAnimations = false,
    renderer = null,
    rtl = false,
    theme = emptyTheme,
    telemetry = undefined as Telemetry,
    _internal_resolvedComponentVariables: resolvedComponentVariables = {},
  } = context || {}

  const startTime = telemetry && telemetry.enabled ? performance.now() : 0

  const ElementType = getElementType(props) as React.ReactType<p>
  const stateAndProps = { ...state, ...props }

  // Resolve variables for this component, cache the result in provider
  if (!resolvedComponentVariables[displayName]) {
    resolvedComponentVariables[displayName] =
      callable(theme.componentVariables[displayName])(theme.siteVariables) || {} // component variables must not be undefined/null (see mergeComponentVariables contract)
  }

  // Merge inline variables on top of cached variables
  const resolvedVariables = props.variables
    ? mergeComponentVariables(
        resolvedComponentVariables[displayName],
        withDebugId(props.variables, 'props.variables'),
      )(theme.siteVariables)
    : resolvedComponentVariables[displayName]
</p>

// Resolve styles using resolved variables, merge results, allow props.styles to override
  const mergedStyles: ComponentSlotStylesPrepared = mergeComponentStyles(
    theme.componentStyles[displayName],
    withDebugId({ root: props.design }, 'props.design'),
    withDebugId({ root: props.styles }, 'props.styles'),
    withDebugId({ root: animationCSSProp }, 'props.animation'),
  )

  const accessibility: ReactAccessibilityBehavior = getAccessibility(
    displayName,
    stateAndProps,
    actionHandlers,
    rtl,
  )

  const unhandledProps = getUnhandledProps(handledProps, props)

  const styleParam: ComponentStyleFunctionParam = {
    displayName,
    props: stateAndProps,
    variables: resolvedVariables,
    theme,
    rtl,
    disableAnimations,
  }

  // Fela plugins rely on `direction` param in `theme` prop instead of RTL
  // Our API should be aligned with it
  // Heads Up! Keep in sync with Design.tsx render logic
  const direction = rtl ? 'rtl' : 'ltr'
  const felaParam = {
    theme: { direction },

        this.trySetMenuOpen(false, e, () => focusAsync(this.itemRef.current))
      } else {

export const focusMenuItem = (menuRef: HTMLElement, order: 'first' | 'last') => {
  const element =
    order === 'first'
      ? getFirstFocusable(menuRef, menuRef.firstElementChild as HTMLElement, true)
      : getLastFocusable(menuRef, menuRef.lastElementChild as HTMLElement, true)

  focusAsync(element)
}

this.trySetMenuOpen(false, e, () => {
      focusAsync(this.itemRef.current)
    })

renderComponent({ ElementType, classes, unhandledProps, accessibility, theme, rtl, styles }) {
    const { name } = this.props
    const { icons = {} } = theme || {}

    const maybeIcon = icons[name]
    const isSvgIcon = maybeIcon && maybeIcon.isSvg

    return (
      
        {isSvgIcon && callable(maybeIcon.icon)({ classes, rtl, props: this.props })}
      
    )
  }
}

export const focusMenuItem = (menuRef: HTMLElement, order: 'first' | 'last') => {
  const element =
    order === 'first'
      ? getFirstFocusable(menuRef, menuRef.firstElementChild as HTMLElement, true)
      : getLastFocusable(menuRef, menuRef.lastElementChild as HTMLElement, true)

  focusAsync(element)
}

export const focusMenuItem = (menuRef: HTMLElement, order: 'first' | 'last') => {
  const element =
    order === 'first'
      ? getFirstFocusable(menuRef, menuRef.firstElementChild as HTMLElement, true)
      : getLastFocusable(menuRef, menuRef.lastElementChild as HTMLElement, true)

  focusAsync(element)
}