@gechiui/components/build-module/navigator/navigator-provider/component.js

UI components for GeChiUI.

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

function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }

/**
 * External dependencies
 */
// eslint-disable-next-line no-restricted-imports
import { css } from '@emotion/react';
/**
 * GeChiUI dependencies
 */

import { useMemo, useState } from '@gechiui/element';
/**
 * Internal dependencies
 */

import { contextConnect, useContextSystem } from '../../ui/context';
import { useCx } from '../../utils/hooks/use-cx';
import { View } from '../../view';
import { NavigatorContext } from '../context';

var _ref = process.env.NODE_ENV === "production" ? {
  name: "15bx5k",
  styles: "overflow-x:hidden"
} : {
  name: "192ebb7-classes",
  styles: "overflow-x:hidden;label:classes;",
  map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvbmF2aWdhdG9yL25hdmlnYXRvci1wcm92aWRlci9jb21wb25lbnQudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQTJDWSIsImZpbGUiOiJAd29yZHByZXNzL2NvbXBvbmVudHMvc3JjL25hdmlnYXRvci9uYXZpZ2F0b3ItcHJvdmlkZXIvY29tcG9uZW50LnRzeCIsInNvdXJjZXNDb250ZW50IjpbIi8qKlxuICogRXh0ZXJuYWwgZGVwZW5kZW5jaWVzXG4gKi9cbi8vIGVzbGludC1kaXNhYmxlLW5leHQtbGluZSBuby1yZXN0cmljdGVkLWltcG9ydHNcbmltcG9ydCB0eXBlIHsgUmVmIH0gZnJvbSAncmVhY3QnO1xuaW1wb3J0IHsgY3NzIH0gZnJvbSAnQGVtb3Rpb24vcmVhY3QnO1xuXG4vKipcbiAqIFdvcmRQcmVzcyBkZXBlbmRlbmNpZXNcbiAqL1xuaW1wb3J0IHsgdXNlTWVtbywgdXNlU3RhdGUgfSBmcm9tICdAd29yZHByZXNzL2VsZW1lbnQnO1xuXG4vKipcbiAqIEludGVybmFsIGRlcGVuZGVuY2llc1xuICovXG5pbXBvcnQge1xuXHRjb250ZXh0Q29ubmVjdCxcblx0dXNlQ29udGV4dFN5c3RlbSxcblx0V29yZFByZXNzQ29tcG9uZW50UHJvcHMsXG59IGZyb20gJy4uLy4uL3VpL2NvbnRleHQnO1xuaW1wb3J0IHsgdXNlQ3ggfSBmcm9tICcuLi8uLi91dGlscy9ob29rcy91c2UtY3gnO1xuaW1wb3J0IHsgVmlldyB9IGZyb20gJy4uLy4uL3ZpZXcnO1xuaW1wb3J0IHsgTmF2aWdhdG9yQ29udGV4dCB9IGZyb20gJy4uL2NvbnRleHQnO1xuaW1wb3J0IHR5cGUgeyBOYXZpZ2F0b3JQcm92aWRlclByb3BzLCBOYXZpZ2F0b3JQYXRoIH0gZnJvbSAnLi4vdHlwZXMnO1xuXG5mdW5jdGlvbiBOYXZpZ2F0b3JQcm92aWRlcihcblx0cHJvcHM6IFdvcmRQcmVzc0NvbXBvbmVudFByb3BzPCBOYXZpZ2F0b3JQcm92aWRlclByb3BzLCAnZGl2JyA+LFxuXHRmb3J3YXJkZWRSZWY6IFJlZjwgYW55ID5cbikge1xuXHRjb25zdCB7XG5cdFx0aW5pdGlhbFBhdGgsXG5cdFx0Y2hpbGRyZW4sXG5cdFx0Y2xhc3NOYW1lLFxuXHRcdC4uLm90aGVyUHJvcHNcblx0fSA9IHVzZUNvbnRleHRTeXN0ZW0oIHByb3BzLCAnTmF2aWdhdG9yUHJvdmlkZXInICk7XG5cblx0Y29uc3QgWyBwYXRoLCBzZXRQYXRoIF0gPSB1c2VTdGF0ZTwgTmF2aWdhdG9yUGF0aCA+KCB7XG5cdFx0cGF0aDogaW5pdGlhbFBhdGgsXG5cdH0gKTtcblxuXHRjb25zdCBjeCA9IHVzZUN4KCk7XG5cdGNvbnN0IGNsYXNzZXMgPSB1c2VNZW1vKFxuXHRcdC8vIFByZXZlbnRzIGhvcml6b250YWwgb3ZlcmZsb3cgd2hpbGUgYW5pbWF0aW5nIHNjcmVlbiB0cmFuc2l0aW9uc1xuXHRcdCgpID0+IGN4KCBjc3MoIHsgb3ZlcmZsb3dYOiAnaGlkZGVuJyB9ICksIGNsYXNzTmFtZSApLFxuXHRcdFsgY2xhc3NOYW1lIF1cblx0KTtcblxuXHRyZXR1cm4gKFxuXHRcdDxWaWV3IHJlZj17IGZvcndhcmRlZFJlZiB9IGNsYXNzTmFtZT17IGNsYXNzZXMgfSB7IC4uLm90aGVyUHJvcHMgfT5cblx0XHRcdDxOYXZpZ2F0b3JDb250ZXh0LlByb3ZpZGVyIHZhbHVlPXsgWyBwYXRoLCBzZXRQYXRoIF0gfT5cblx0XHRcdFx0eyBjaGlsZHJlbiB9XG5cdFx0XHQ8L05hdmlnYXRvckNvbnRleHQuUHJvdmlkZXI+XG5cdFx0PC9WaWV3PlxuXHQpO1xufVxuXG4vKipcbiAqIFRoZSBgTmF2aWdhdG9yUHJvdmlkZXJgIGNvbXBvbmVudCBhbGxvd3MgcmVuZGVyaW5nIG5lc3RlZCBwYW5lbHMgb3IgbWVudXMgKHZpYSB0aGUgYE5hdmlnYXRvclNjcmVlbmAgY29tcG9uZW50KSBhbmQgbmF2aWdhdGUgYmV0d2VlbiB0aGVzZSBkaWZmZXJlbnQgc3RhdGVzICh2aWEgdGhlIGB1c2VOYXZpZ2F0b3JgIGhvb2spLlxuICogVGhlIEdsb2JhbCBTdHlsZXMgc2lkZWJhciBpcyBhbiBleGFtcGxlIG9mIHRoaXMuIFRoZSBgTmF2aWdhdG9yKmAgZmFtaWx5IG9mIGNvbXBvbmVudHMgaXMgX25vdF8gb3BpbmlvbmF0ZWQgaW4gdGVybXMgb2YgVUksIGFuZCBjYW4gYmUgY29tcG9zZWQgd2l0aCBhbnkgVUkgY29tcG9uZW50cyB0byBuYXZpZ2F0ZSBiZXR3ZWVuIHRoZSBuZXN0ZWQgc2NyZWVucy5cbiAqXG4gKiBAZXhhbXBsZVxuICogYGBganN4XG4gKiBpbXBvcnQge1xuICogICBfX2V4cGVyaW1lbnRhbE5hdmlnYXRvclByb3ZpZGVyIGFzIE5hdmlnYXRvclByb3ZpZGVyLFxuICogICBfX2V4cGVyaW1lbnRhbE5hdmlnYXRvclNjcmVlbiBhcyBOYXZpZ2F0b3JTY3JlZW4sXG4gKiAgIF9fZXhwZXJpbWVudGFsVXNlTmF2aWdhdG9yIGFzIHVzZU5hdmlnYXRvcixcbiAqIH0gZnJvbSAnQHdvcmRwcmVzcy9jb21wb25lbnRzJztcbiAqXG4gKiBmdW5jdGlvbiBOYXZpZ2F0b3JCdXR0b24oIHtcbiAqICAgcGF0aCxcbiAqICAgaXNCYWNrID0gZmFsc2UsXG4gKiAgIC4uLnByb3BzXG4gKiB9ICkge1xuICogICBjb25zdCBuYXZpZ2F0b3IgPSB1c2VOYXZpZ2F0b3IoKTtcbiAqICAgcmV0dXJuIChcbiAqICAgXHQ8QnV0dG9uXG4gKiAgIFx0ICBvbkNsaWNrPXsgKCkgPT4gbmF2aWdhdG9yLnB1c2goIHBhdGgsIHsgaXNCYWNrIH0gKSB9XG4gKiAgIFx0ICB7IC4uLnByb3BzIH1cbiAqICAgXHQvPlxuICogICApO1xuICogfVxuICpcbiAqIGNvbnN0IE15TmF2aWdhdGlvbiA9ICgpID0+IChcbiAqICAgPE5hdmlnYXRvclByb3ZpZGVyIGluaXRpYWxQYXRoPVwiL1wiPlxuICogICAgIDxOYXZpZ2F0b3JTY3JlZW4gcGF0aD1cIi9cIj5cbiAqICAgICAgIDxwPlRoaXMgaXMgdGhlIGhvbWUgc2NyZWVuLjwvcD5cbiAqICAgXHQgICA8TmF2aWdhdG9yQnV0dG9uIGlzUHJpbWFyeSBwYXRoPVwiL2NoaWxkXCI+XG4gKiAgICAgICAgICBOYXZpZ2F0ZSB0byBjaGlsZCBzY3JlZW4uXG4gKiAgICAgICA8L05hdmlnYXRvckJ1dHRvbj5cbiAqICAgICA8L05hdmlnYXRvclNjcmVlbj5cbiAqXG4gKiAgICAgPE5hdmlnYXRvclNjcmVlbiBwYXRoPVwiL2NoaWxkXCI+XG4gKiAgICAgICA8cD5UaGlzIGlzIHRoZSBjaGlsZCBzY3JlZW4uPC9wPlxuICogICAgICAgPE5hdmlnYXRvckJ1dHRvbiBpc1ByaW1hcnkgcGF0aD1cIi9cIiBpc0JhY2s+XG4gKiAgICAgICAgIEdvIGJhY2tcbiAqICAgICAgIDwvTmF2aWdhdG9yQnV0dG9uPlxuICogICAgIDwvTmF2aWdhdG9yU2NyZWVuPlxuICogICA8L05hdmlnYXRvclByb3ZpZGVyPlxuICogKTtcbiAqIGBgYFxuICovXG5jb25zdCBDb25uZWN0ZWROYXZpZ2F0b3JQcm92aWRlciA9IGNvbnRleHRDb25uZWN0KFxuXHROYXZpZ2F0b3JQcm92aWRlcixcblx0J05hdmlnYXRvclByb3ZpZGVyJ1xuKTtcblxuZXhwb3J0IGRlZmF1bHQgQ29ubmVjdGVkTmF2aWdhdG9yUHJvdmlkZXI7XG4iXX0= */",
  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
};

function NavigatorProvider(props, forwardedRef) {
  const {
    initialPath,
    children,
    className,
    ...otherProps
  } = useContextSystem(props, 'NavigatorProvider');
  const [path, setPath] = useState({
    path: initialPath
  });
  const cx = useCx();
  const classes = useMemo( // Prevents horizontal overflow while animating screen transitions
  () => cx(_ref, className), [className]);
  return createElement(View, _extends({
    ref: forwardedRef,
    className: classes
  }, otherProps), createElement(NavigatorContext.Provider, {
    value: [path, setPath]
  }, children));
}
/**
 * The `NavigatorProvider` component allows rendering nested panels or menus (via the `NavigatorScreen` component) and navigate between these different states (via the `useNavigator` hook).
 * The Global Styles sidebar is an example of this. The `Navigator*` family of components is _not_ opinionated in terms of UI, and can be composed with any UI components to navigate between the nested screens.
 *
 * @example
 * ```jsx
 * import {
 *   __experimentalNavigatorProvider as NavigatorProvider,
 *   __experimentalNavigatorScreen as NavigatorScreen,
 *   __experimentalUseNavigator as useNavigator,
 * } from '@gechiui/components';
 *
 * function NavigatorButton( {
 *   path,
 *   isBack = false,
 *   ...props
 * } ) {
 *   const navigator = useNavigator();
 *   return (
 *   	<Button
 *   	  onClick={ () => navigator.push( path, { isBack } ) }
 *   	  { ...props }
 *   	/>
 *   );
 * }
 *
 * const MyNavigation = () => (
 *   <NavigatorProvider initialPath="/">
 *     <NavigatorScreen path="/">
 *       <p>This is the home screen.</p>
 *   	   <NavigatorButton isPrimary path="/child">
 *          Navigate to child screen.
 *       </NavigatorButton>
 *     </NavigatorScreen>
 *
 *     <NavigatorScreen path="/child">
 *       <p>This is the child screen.</p>
 *       <NavigatorButton isPrimary path="/" isBack>
 *         Go back
 *       </NavigatorButton>
 *     </NavigatorScreen>
 *   </NavigatorProvider>
 * );
 * ```
 */


const ConnectedNavigatorProvider = contextConnect(NavigatorProvider, 'NavigatorProvider');
export default ConnectedNavigatorProvider;
//# sourceMappingURL=component.js.map