@gechiui/components/build-module/toolbar/toolbar-container.js

UI components for GeChiUI.

import _extends from "@babel/runtime/helpers/esm/extends";
import { createElement } from "@gechiui/element";

/**
 * External dependencies
 */
import { useToolbarState, Toolbar } from 'reakit/Toolbar';
/**
 * GeChiUI dependencies
 */

import { forwardRef } from '@gechiui/element';
import { isRTL } from '@gechiui/i18n';
/**
 * Internal dependencies
 */

import ToolbarContext from '../toolbar-context';

function ToolbarContainer(_ref, ref) {
  let {
    label,
    ...props
  } = _ref;
  // https://reakit.io/docs/basic-concepts/#state-hooks
  // Passing baseId for server side rendering (which includes snapshots)
  // If an id prop is passed to Toolbar, toolbar items will use it as a base for their ids
  const toolbarState = useToolbarState({
    loop: true,
    baseId: props.id,
    rtl: isRTL()
  });
  return (// This will provide state for `ToolbarButton`'s
    createElement(ToolbarContext.Provider, {
      value: toolbarState
    }, createElement(Toolbar, _extends({
      ref: ref,
      "aria-label": label
    }, toolbarState, props)))
  );
}

export default forwardRef(ToolbarContainer);
//# sourceMappingURL=toolbar-container.js.map