diff --git a/docs/development/plugins/kibana_utils/common/state_containers/index.md b/docs/development/plugins/kibana_utils/common/state_containers/index.md
new file mode 100644
index 0000000000000..b4e1071ceb732
--- /dev/null
+++ b/docs/development/plugins/kibana_utils/common/state_containers/index.md
@@ -0,0 +1,12 @@
+
+
+[Home](./index.md)
+
+## API Reference
+
+## Packages
+
+| Package | Description |
+| --- | --- |
+| [kibana-plugin-plugins-kibana\_utils-common-state\_containers](./kibana-plugin-plugins-kibana_utils-common-state_containers.md) | State containers are Redux-store-like objects meant to help you manage state in your services or apps. Refer to [guides and examples](https://github.com/elastic/kibana/tree/master/src/plugins/kibana_utils/docs/state_containers) for more info |
+
diff --git a/docs/development/plugins/kibana_utils/common/state_containers/kibana-plugin-plugins-kibana_utils-common-state_containers.basestate.md b/docs/development/plugins/kibana_utils/common/state_containers/kibana-plugin-plugins-kibana_utils-common-state_containers.basestate.md
new file mode 100644
index 0000000000000..92893afc02bef
--- /dev/null
+++ b/docs/development/plugins/kibana_utils/common/state_containers/kibana-plugin-plugins-kibana_utils-common-state_containers.basestate.md
@@ -0,0 +1,13 @@
+
+
+[Home](./index.md) > [kibana-plugin-plugins-kibana\_utils-common-state\_containers](./kibana-plugin-plugins-kibana_utils-common-state_containers.md) > [BaseState](./kibana-plugin-plugins-kibana_utils-common-state_containers.basestate.md)
+
+## BaseState type
+
+Base [StateContainer](./kibana-plugin-plugins-kibana_utils-common-state_containers.statecontainer.md) state shape
+
+Signature:
+
+```typescript
+export declare type BaseState = object;
+```
diff --git a/docs/development/plugins/kibana_utils/common/state_containers/kibana-plugin-plugins-kibana_utils-common-state_containers.basestatecontainer.get.md b/docs/development/plugins/kibana_utils/common/state_containers/kibana-plugin-plugins-kibana_utils-common-state_containers.basestatecontainer.get.md
new file mode 100644
index 0000000000000..b939954d92aa6
--- /dev/null
+++ b/docs/development/plugins/kibana_utils/common/state_containers/kibana-plugin-plugins-kibana_utils-common-state_containers.basestatecontainer.get.md
@@ -0,0 +1,13 @@
+
+
+[Home](./index.md) > [kibana-plugin-plugins-kibana\_utils-common-state\_containers](./kibana-plugin-plugins-kibana_utils-common-state_containers.md) > [BaseStateContainer](./kibana-plugin-plugins-kibana_utils-common-state_containers.basestatecontainer.md) > [get](./kibana-plugin-plugins-kibana_utils-common-state_containers.basestatecontainer.get.md)
+
+## BaseStateContainer.get property
+
+Retrieves current state from the container
+
+Signature:
+
+```typescript
+get: () => State;
+```
diff --git a/docs/development/plugins/kibana_utils/common/state_containers/kibana-plugin-plugins-kibana_utils-common-state_containers.basestatecontainer.md b/docs/development/plugins/kibana_utils/common/state_containers/kibana-plugin-plugins-kibana_utils-common-state_containers.basestatecontainer.md
new file mode 100644
index 0000000000000..66c25c87f5e37
--- /dev/null
+++ b/docs/development/plugins/kibana_utils/common/state_containers/kibana-plugin-plugins-kibana_utils-common-state_containers.basestatecontainer.md
@@ -0,0 +1,22 @@
+
+
+[Home](./index.md) > [kibana-plugin-plugins-kibana\_utils-common-state\_containers](./kibana-plugin-plugins-kibana_utils-common-state_containers.md) > [BaseStateContainer](./kibana-plugin-plugins-kibana_utils-common-state_containers.basestatecontainer.md)
+
+## BaseStateContainer interface
+
+Base state container shape without transitions or selectors
+
+Signature:
+
+```typescript
+export interface BaseStateContainer
+```
+
+## Properties
+
+| Property | Type | Description |
+| --- | --- | --- |
+| [get](./kibana-plugin-plugins-kibana_utils-common-state_containers.basestatecontainer.get.md) | () => State | Retrieves current state from the container |
+| [set](./kibana-plugin-plugins-kibana_utils-common-state_containers.basestatecontainer.set.md) | (state: State) => void | Sets state into container |
+| [state$](./kibana-plugin-plugins-kibana_utils-common-state_containers.basestatecontainer.state_.md) | Observable<State> | of state |
+
diff --git a/docs/development/plugins/kibana_utils/common/state_containers/kibana-plugin-plugins-kibana_utils-common-state_containers.basestatecontainer.set.md b/docs/development/plugins/kibana_utils/common/state_containers/kibana-plugin-plugins-kibana_utils-common-state_containers.basestatecontainer.set.md
new file mode 100644
index 0000000000000..ed4ff365adfb3
--- /dev/null
+++ b/docs/development/plugins/kibana_utils/common/state_containers/kibana-plugin-plugins-kibana_utils-common-state_containers.basestatecontainer.set.md
@@ -0,0 +1,13 @@
+
+
+[Home](./index.md) > [kibana-plugin-plugins-kibana\_utils-common-state\_containers](./kibana-plugin-plugins-kibana_utils-common-state_containers.md) > [BaseStateContainer](./kibana-plugin-plugins-kibana_utils-common-state_containers.basestatecontainer.md) > [set](./kibana-plugin-plugins-kibana_utils-common-state_containers.basestatecontainer.set.md)
+
+## BaseStateContainer.set property
+
+Sets state into container
+
+Signature:
+
+```typescript
+set: (state: State) => void;
+```
diff --git a/docs/development/plugins/kibana_utils/common/state_containers/kibana-plugin-plugins-kibana_utils-common-state_containers.basestatecontainer.state_.md b/docs/development/plugins/kibana_utils/common/state_containers/kibana-plugin-plugins-kibana_utils-common-state_containers.basestatecontainer.state_.md
new file mode 100644
index 0000000000000..35838fa53d539
--- /dev/null
+++ b/docs/development/plugins/kibana_utils/common/state_containers/kibana-plugin-plugins-kibana_utils-common-state_containers.basestatecontainer.state_.md
@@ -0,0 +1,13 @@
+
+
+[Home](./index.md) > [kibana-plugin-plugins-kibana\_utils-common-state\_containers](./kibana-plugin-plugins-kibana_utils-common-state_containers.md) > [BaseStateContainer](./kibana-plugin-plugins-kibana_utils-common-state_containers.basestatecontainer.md) > [state$](./kibana-plugin-plugins-kibana_utils-common-state_containers.basestatecontainer.state_.md)
+
+## BaseStateContainer.state$ property
+
+ of state
+
+Signature:
+
+```typescript
+state$: Observable;
+```
diff --git a/docs/development/plugins/kibana_utils/common/state_containers/kibana-plugin-plugins-kibana_utils-common-state_containers.comparator.md b/docs/development/plugins/kibana_utils/common/state_containers/kibana-plugin-plugins-kibana_utils-common-state_containers.comparator.md
new file mode 100644
index 0000000000000..12af33756fb19
--- /dev/null
+++ b/docs/development/plugins/kibana_utils/common/state_containers/kibana-plugin-plugins-kibana_utils-common-state_containers.comparator.md
@@ -0,0 +1,13 @@
+
+
+[Home](./index.md) > [kibana-plugin-plugins-kibana\_utils-common-state\_containers](./kibana-plugin-plugins-kibana_utils-common-state_containers.md) > [Comparator](./kibana-plugin-plugins-kibana_utils-common-state_containers.comparator.md)
+
+## Comparator type
+
+Used to compare state. see [useContainerSelector](./kibana-plugin-plugins-kibana_utils-common-state_containers.usecontainerselector.md)
+
+Signature:
+
+```typescript
+export declare type Comparator = (previous: Result, current: Result) => boolean;
+```
diff --git a/docs/development/plugins/kibana_utils/common/state_containers/kibana-plugin-plugins-kibana_utils-common-state_containers.connect.md b/docs/development/plugins/kibana_utils/common/state_containers/kibana-plugin-plugins-kibana_utils-common-state_containers.connect.md
new file mode 100644
index 0000000000000..e05f1fb392fe6
--- /dev/null
+++ b/docs/development/plugins/kibana_utils/common/state_containers/kibana-plugin-plugins-kibana_utils-common-state_containers.connect.md
@@ -0,0 +1,13 @@
+
+
+[Home](./index.md) > [kibana-plugin-plugins-kibana\_utils-common-state\_containers](./kibana-plugin-plugins-kibana_utils-common-state_containers.md) > [Connect](./kibana-plugin-plugins-kibana_utils-common-state_containers.connect.md)
+
+## Connect type
+
+Similar to `connect` from react-redux, allows to map state from state container to component's props
+
+Signature:
+
+```typescript
+export declare type Connect = (mapStateToProp: MapStateToProps>) => (component: ComponentType) => FC>;
+```
diff --git a/docs/development/plugins/kibana_utils/common/state_containers/kibana-plugin-plugins-kibana_utils-common-state_containers.createstatecontainer.md b/docs/development/plugins/kibana_utils/common/state_containers/kibana-plugin-plugins-kibana_utils-common-state_containers.createstatecontainer.md
new file mode 100644
index 0000000000000..cc43b59676dc1
--- /dev/null
+++ b/docs/development/plugins/kibana_utils/common/state_containers/kibana-plugin-plugins-kibana_utils-common-state_containers.createstatecontainer.md
@@ -0,0 +1,24 @@
+
+
+[Home](./index.md) > [kibana-plugin-plugins-kibana\_utils-common-state\_containers](./kibana-plugin-plugins-kibana_utils-common-state_containers.md) > [createStateContainer](./kibana-plugin-plugins-kibana_utils-common-state_containers.createstatecontainer.md)
+
+## createStateContainer() function
+
+Creates a state container without transitions and without selectors.
+
+Signature:
+
+```typescript
+export declare function createStateContainer(defaultState: State): ReduxLikeStateContainer;
+```
+
+## Parameters
+
+| Parameter | Type | Description |
+| --- | --- | --- |
+| defaultState | State | initial state |
+
+Returns:
+
+`ReduxLikeStateContainer`
+
diff --git a/docs/development/plugins/kibana_utils/common/state_containers/kibana-plugin-plugins-kibana_utils-common-state_containers.createstatecontainer_1.md b/docs/development/plugins/kibana_utils/common/state_containers/kibana-plugin-plugins-kibana_utils-common-state_containers.createstatecontainer_1.md
new file mode 100644
index 0000000000000..794bf63588312
--- /dev/null
+++ b/docs/development/plugins/kibana_utils/common/state_containers/kibana-plugin-plugins-kibana_utils-common-state_containers.createstatecontainer_1.md
@@ -0,0 +1,25 @@
+
+
+[Home](./index.md) > [kibana-plugin-plugins-kibana\_utils-common-state\_containers](./kibana-plugin-plugins-kibana_utils-common-state_containers.md) > [createStateContainer](./kibana-plugin-plugins-kibana_utils-common-state_containers.createstatecontainer_1.md)
+
+## createStateContainer() function
+
+Creates a state container with transitions, but without selectors
+
+Signature:
+
+```typescript
+export declare function createStateContainer(defaultState: State, pureTransitions: PureTransitions): ReduxLikeStateContainer;
+```
+
+## Parameters
+
+| Parameter | Type | Description |
+| --- | --- | --- |
+| defaultState | State | initial state |
+| pureTransitions | PureTransitions | state transitions configuration object. Map of . |
+
+Returns:
+
+`ReduxLikeStateContainer`
+
diff --git a/docs/development/plugins/kibana_utils/common/state_containers/kibana-plugin-plugins-kibana_utils-common-state_containers.createstatecontainer_2.md b/docs/development/plugins/kibana_utils/common/state_containers/kibana-plugin-plugins-kibana_utils-common-state_containers.createstatecontainer_2.md
new file mode 100644
index 0000000000000..1946baae202f1
--- /dev/null
+++ b/docs/development/plugins/kibana_utils/common/state_containers/kibana-plugin-plugins-kibana_utils-common-state_containers.createstatecontainer_2.md
@@ -0,0 +1,27 @@
+
+
+[Home](./index.md) > [kibana-plugin-plugins-kibana\_utils-common-state\_containers](./kibana-plugin-plugins-kibana_utils-common-state_containers.md) > [createStateContainer](./kibana-plugin-plugins-kibana_utils-common-state_containers.createstatecontainer_2.md)
+
+## createStateContainer() function
+
+Creates a state container with transitions and selectors
+
+Signature:
+
+```typescript
+export declare function createStateContainer(defaultState: State, pureTransitions: PureTransitions, pureSelectors: PureSelectors, options?: CreateStateContainerOptions): ReduxLikeStateContainer;
+```
+
+## Parameters
+
+| Parameter | Type | Description |
+| --- | --- | --- |
+| defaultState | State | initial state |
+| pureTransitions | PureTransitions | state transitions configuration object. Map of . |
+| pureSelectors | PureSelectors | state selectors configuration object. Map of . |
+| options | CreateStateContainerOptions | state container options [CreateStateContainerOptions](./kibana-plugin-plugins-kibana_utils-common-state_containers.createstatecontaineroptions.md) |
+
+Returns:
+
+`ReduxLikeStateContainer`
+
diff --git a/docs/development/plugins/kibana_utils/common/state_containers/kibana-plugin-plugins-kibana_utils-common-state_containers.createstatecontaineroptions.freeze.md b/docs/development/plugins/kibana_utils/common/state_containers/kibana-plugin-plugins-kibana_utils-common-state_containers.createstatecontaineroptions.freeze.md
new file mode 100644
index 0000000000000..4f772c7c54d08
--- /dev/null
+++ b/docs/development/plugins/kibana_utils/common/state_containers/kibana-plugin-plugins-kibana_utils-common-state_containers.createstatecontaineroptions.freeze.md
@@ -0,0 +1,25 @@
+
+
+[Home](./index.md) > [kibana-plugin-plugins-kibana\_utils-common-state\_containers](./kibana-plugin-plugins-kibana_utils-common-state_containers.md) > [CreateStateContainerOptions](./kibana-plugin-plugins-kibana_utils-common-state_containers.createstatecontaineroptions.md) > [freeze](./kibana-plugin-plugins-kibana_utils-common-state_containers.createstatecontaineroptions.freeze.md)
+
+## CreateStateContainerOptions.freeze property
+
+Function to use when freezing state. Supply identity function. If not provided, default deepFreeze is use.
+
+Signature:
+
+```typescript
+freeze?: (state: T) => T;
+```
+
+## Example
+
+If you expect that your state will be mutated externally an you cannot prevent that
+
+```ts
+{
+ freeze: state => state,
+}
+
+```
+
diff --git a/docs/development/plugins/kibana_utils/common/state_containers/kibana-plugin-plugins-kibana_utils-common-state_containers.createstatecontaineroptions.md b/docs/development/plugins/kibana_utils/common/state_containers/kibana-plugin-plugins-kibana_utils-common-state_containers.createstatecontaineroptions.md
new file mode 100644
index 0000000000000..d328d306e93e1
--- /dev/null
+++ b/docs/development/plugins/kibana_utils/common/state_containers/kibana-plugin-plugins-kibana_utils-common-state_containers.createstatecontaineroptions.md
@@ -0,0 +1,20 @@
+
+
+[Home](./index.md) > [kibana-plugin-plugins-kibana\_utils-common-state\_containers](./kibana-plugin-plugins-kibana_utils-common-state_containers.md) > [CreateStateContainerOptions](./kibana-plugin-plugins-kibana_utils-common-state_containers.createstatecontaineroptions.md)
+
+## CreateStateContainerOptions interface
+
+State container options
+
+Signature:
+
+```typescript
+export interface CreateStateContainerOptions
+```
+
+## Properties
+
+| Property | Type | Description |
+| --- | --- | --- |
+| [freeze](./kibana-plugin-plugins-kibana_utils-common-state_containers.createstatecontaineroptions.freeze.md) | <T>(state: T) => T | Function to use when freezing state. Supply identity function. If not provided, default deepFreeze is use. |
+
diff --git a/docs/development/plugins/kibana_utils/common/state_containers/kibana-plugin-plugins-kibana_utils-common-state_containers.createstatecontainerreacthelpers.md b/docs/development/plugins/kibana_utils/common/state_containers/kibana-plugin-plugins-kibana_utils-common-state_containers.createstatecontainerreacthelpers.md
new file mode 100644
index 0000000000000..a6076490c2746
--- /dev/null
+++ b/docs/development/plugins/kibana_utils/common/state_containers/kibana-plugin-plugins-kibana_utils-common-state_containers.createstatecontainerreacthelpers.md
@@ -0,0 +1,22 @@
+
+
+[Home](./index.md) > [kibana-plugin-plugins-kibana\_utils-common-state\_containers](./kibana-plugin-plugins-kibana_utils-common-state_containers.md) > [createStateContainerReactHelpers](./kibana-plugin-plugins-kibana_utils-common-state_containers.createstatecontainerreacthelpers.md)
+
+## createStateContainerReactHelpers variable
+
+Creates helpers for using [State Containers](./kibana-plugin-plugins-kibana_utils-common-state_containers.statecontainer.md) with react Refer to [guide](https://github.com/elastic/kibana/blob/master/src/plugins/kibana_utils/docs/state_containers/react.md) for details
+
+Signature:
+
+```typescript
+createStateContainerReactHelpers: >() => {
+ Provider: React.Provider;
+ Consumer: React.Consumer;
+ context: React.Context;
+ useContainer: () => Container;
+ useState: () => UnboxState;
+ useTransitions: () => Container["transitions"];
+ useSelector: (selector: (state: UnboxState) => Result, comparator?: Comparator) => Result;
+ connect: Connect>;
+}
+```
diff --git a/docs/development/plugins/kibana_utils/common/state_containers/kibana-plugin-plugins-kibana_utils-common-state_containers.dispatch.md b/docs/development/plugins/kibana_utils/common/state_containers/kibana-plugin-plugins-kibana_utils-common-state_containers.dispatch.md
new file mode 100644
index 0000000000000..d4057a549bb0d
--- /dev/null
+++ b/docs/development/plugins/kibana_utils/common/state_containers/kibana-plugin-plugins-kibana_utils-common-state_containers.dispatch.md
@@ -0,0 +1,13 @@
+
+
+[Home](./index.md) > [kibana-plugin-plugins-kibana\_utils-common-state\_containers](./kibana-plugin-plugins-kibana_utils-common-state_containers.md) > [Dispatch](./kibana-plugin-plugins-kibana_utils-common-state_containers.dispatch.md)
+
+## Dispatch type
+
+Redux like dispatch
+
+Signature:
+
+```typescript
+export declare type Dispatch = (action: T) => void;
+```
diff --git a/docs/development/plugins/kibana_utils/common/state_containers/kibana-plugin-plugins-kibana_utils-common-state_containers.ensurepureselector.md b/docs/development/plugins/kibana_utils/common/state_containers/kibana-plugin-plugins-kibana_utils-common-state_containers.ensurepureselector.md
new file mode 100644
index 0000000000000..5e4e86ad82d53
--- /dev/null
+++ b/docs/development/plugins/kibana_utils/common/state_containers/kibana-plugin-plugins-kibana_utils-common-state_containers.ensurepureselector.md
@@ -0,0 +1,12 @@
+
+
+[Home](./index.md) > [kibana-plugin-plugins-kibana\_utils-common-state\_containers](./kibana-plugin-plugins-kibana_utils-common-state_containers.md) > [EnsurePureSelector](./kibana-plugin-plugins-kibana_utils-common-state_containers.ensurepureselector.md)
+
+## EnsurePureSelector type
+
+
+Signature:
+
+```typescript
+export declare type EnsurePureSelector = Ensure>;
+```
diff --git a/docs/development/plugins/kibana_utils/common/state_containers/kibana-plugin-plugins-kibana_utils-common-state_containers.ensurepuretransition.md b/docs/development/plugins/kibana_utils/common/state_containers/kibana-plugin-plugins-kibana_utils-common-state_containers.ensurepuretransition.md
new file mode 100644
index 0000000000000..0e621e989346b
--- /dev/null
+++ b/docs/development/plugins/kibana_utils/common/state_containers/kibana-plugin-plugins-kibana_utils-common-state_containers.ensurepuretransition.md
@@ -0,0 +1,12 @@
+
+
+[Home](./index.md) > [kibana-plugin-plugins-kibana\_utils-common-state\_containers](./kibana-plugin-plugins-kibana_utils-common-state_containers.md) > [EnsurePureTransition](./kibana-plugin-plugins-kibana_utils-common-state_containers.ensurepuretransition.md)
+
+## EnsurePureTransition type
+
+
+Signature:
+
+```typescript
+export declare type EnsurePureTransition = Ensure>;
+```
diff --git a/docs/development/plugins/kibana_utils/common/state_containers/kibana-plugin-plugins-kibana_utils-common-state_containers.mapstatetoprops.md b/docs/development/plugins/kibana_utils/common/state_containers/kibana-plugin-plugins-kibana_utils-common-state_containers.mapstatetoprops.md
new file mode 100644
index 0000000000000..8e6a49ac72742
--- /dev/null
+++ b/docs/development/plugins/kibana_utils/common/state_containers/kibana-plugin-plugins-kibana_utils-common-state_containers.mapstatetoprops.md
@@ -0,0 +1,13 @@
+
+
+[Home](./index.md) > [kibana-plugin-plugins-kibana\_utils-common-state\_containers](./kibana-plugin-plugins-kibana_utils-common-state_containers.md) > [MapStateToProps](./kibana-plugin-plugins-kibana_utils-common-state_containers.mapstatetoprops.md)
+
+## MapStateToProps type
+
+State container state to component props mapper. See [Connect](./kibana-plugin-plugins-kibana_utils-common-state_containers.connect.md)
+
+Signature:
+
+```typescript
+export declare type MapStateToProps = (state: State) => StateProps;
+```
diff --git a/docs/development/plugins/kibana_utils/common/state_containers/kibana-plugin-plugins-kibana_utils-common-state_containers.md b/docs/development/plugins/kibana_utils/common/state_containers/kibana-plugin-plugins-kibana_utils-common-state_containers.md
new file mode 100644
index 0000000000000..e74ff2c6885be
--- /dev/null
+++ b/docs/development/plugins/kibana_utils/common/state_containers/kibana-plugin-plugins-kibana_utils-common-state_containers.md
@@ -0,0 +1,52 @@
+
+
+[Home](./index.md) > [kibana-plugin-plugins-kibana\_utils-common-state\_containers](./kibana-plugin-plugins-kibana_utils-common-state_containers.md)
+
+## kibana-plugin-plugins-kibana\_utils-common-state\_containers package
+
+State containers are Redux-store-like objects meant to help you manage state in your services or apps. Refer to [guides and examples](https://github.com/elastic/kibana/tree/master/src/plugins/kibana_utils/docs/state_containers) for more info
+
+## Functions
+
+| Function | Description |
+| --- | --- |
+| [createStateContainer(defaultState)](./kibana-plugin-plugins-kibana_utils-common-state_containers.createstatecontainer.md) | Creates a state container without transitions and without selectors. |
+| [createStateContainer(defaultState, pureTransitions)](./kibana-plugin-plugins-kibana_utils-common-state_containers.createstatecontainer_1.md) | Creates a state container with transitions, but without selectors |
+| [createStateContainer(defaultState, pureTransitions, pureSelectors, options)](./kibana-plugin-plugins-kibana_utils-common-state_containers.createstatecontainer_2.md) | Creates a state container with transitions and selectors |
+
+## Interfaces
+
+| Interface | Description |
+| --- | --- |
+| [BaseStateContainer](./kibana-plugin-plugins-kibana_utils-common-state_containers.basestatecontainer.md) | Base state container shape without transitions or selectors |
+| [CreateStateContainerOptions](./kibana-plugin-plugins-kibana_utils-common-state_containers.createstatecontaineroptions.md) | State container options |
+| [ReduxLikeStateContainer](./kibana-plugin-plugins-kibana_utils-common-state_containers.reduxlikestatecontainer.md) | Fully featured state container which matches Redux store interface. Extends [StateContainer](./kibana-plugin-plugins-kibana_utils-common-state_containers.statecontainer.md) Allows to use state container with redux libraries |
+| [StateContainer](./kibana-plugin-plugins-kibana_utils-common-state_containers.statecontainer.md) | Fully featured state container with [Selectors](./kibana-plugin-plugins-kibana_utils-common-state_containers.selector.md) and . Extends [BaseStateContainer](./kibana-plugin-plugins-kibana_utils-common-state_containers.basestatecontainer.md) |
+
+## Variables
+
+| Variable | Description |
+| --- | --- |
+| [createStateContainerReactHelpers](./kibana-plugin-plugins-kibana_utils-common-state_containers.createstatecontainerreacthelpers.md) | Creates helpers for using [State Containers](./kibana-plugin-plugins-kibana_utils-common-state_containers.statecontainer.md) with react Refer to [guide](https://github.com/elastic/kibana/blob/master/src/plugins/kibana_utils/docs/state_containers/react.md) for details |
+| [useContainerSelector](./kibana-plugin-plugins-kibana_utils-common-state_containers.usecontainerselector.md) | React hook to apply selector to state container to extract only needed information. Will re-render your component only when the section changes. |
+| [useContainerState](./kibana-plugin-plugins-kibana_utils-common-state_containers.usecontainerstate.md) | React hooks that returns the latest state of a [StateContainer](./kibana-plugin-plugins-kibana_utils-common-state_containers.statecontainer.md). |
+
+## Type Aliases
+
+| Type Alias | Description |
+| --- | --- |
+| [BaseState](./kibana-plugin-plugins-kibana_utils-common-state_containers.basestate.md) | Base [StateContainer](./kibana-plugin-plugins-kibana_utils-common-state_containers.statecontainer.md) state shape |
+| [Comparator](./kibana-plugin-plugins-kibana_utils-common-state_containers.comparator.md) | Used to compare state. see [useContainerSelector](./kibana-plugin-plugins-kibana_utils-common-state_containers.usecontainerselector.md) |
+| [Connect](./kibana-plugin-plugins-kibana_utils-common-state_containers.connect.md) | Similar to connect from react-redux, allows to map state from state container to component's props |
+| [Dispatch](./kibana-plugin-plugins-kibana_utils-common-state_containers.dispatch.md) | Redux like dispatch |
+| [EnsurePureSelector](./kibana-plugin-plugins-kibana_utils-common-state_containers.ensurepureselector.md) | |
+| [EnsurePureTransition](./kibana-plugin-plugins-kibana_utils-common-state_containers.ensurepuretransition.md) | |
+| [MapStateToProps](./kibana-plugin-plugins-kibana_utils-common-state_containers.mapstatetoprops.md) | State container state to component props mapper. See [Connect](./kibana-plugin-plugins-kibana_utils-common-state_containers.connect.md) |
+| [Middleware](./kibana-plugin-plugins-kibana_utils-common-state_containers.middleware.md) | Redux like Middleware |
+| [PureSelector](./kibana-plugin-plugins-kibana_utils-common-state_containers.pureselector.md) | |
+| [PureSelectorsToSelectors](./kibana-plugin-plugins-kibana_utils-common-state_containers.pureselectorstoselectors.md) | |
+| [PureSelectorToSelector](./kibana-plugin-plugins-kibana_utils-common-state_containers.pureselectortoselector.md) | |
+| [Reducer](./kibana-plugin-plugins-kibana_utils-common-state_containers.reducer.md) | Redux like Reducer |
+| [Selector](./kibana-plugin-plugins-kibana_utils-common-state_containers.selector.md) | |
+| [UnboxState](./kibana-plugin-plugins-kibana_utils-common-state_containers.unboxstate.md) | Utility type for inferring state shape from [StateContainer](./kibana-plugin-plugins-kibana_utils-common-state_containers.statecontainer.md) |
+
diff --git a/docs/development/plugins/kibana_utils/common/state_containers/kibana-plugin-plugins-kibana_utils-common-state_containers.middleware.md b/docs/development/plugins/kibana_utils/common/state_containers/kibana-plugin-plugins-kibana_utils-common-state_containers.middleware.md
new file mode 100644
index 0000000000000..574b83306dc95
--- /dev/null
+++ b/docs/development/plugins/kibana_utils/common/state_containers/kibana-plugin-plugins-kibana_utils-common-state_containers.middleware.md
@@ -0,0 +1,13 @@
+
+
+[Home](./index.md) > [kibana-plugin-plugins-kibana\_utils-common-state\_containers](./kibana-plugin-plugins-kibana_utils-common-state_containers.md) > [Middleware](./kibana-plugin-plugins-kibana_utils-common-state_containers.middleware.md)
+
+## Middleware type
+
+Redux like Middleware
+
+Signature:
+
+```typescript
+export declare type Middleware = (store: Pick, 'getState' | 'dispatch'>) => (next: (action: TransitionDescription) => TransitionDescription | any) => Dispatch;
+```
diff --git a/docs/development/plugins/kibana_utils/common/state_containers/kibana-plugin-plugins-kibana_utils-common-state_containers.pureselector.md b/docs/development/plugins/kibana_utils/common/state_containers/kibana-plugin-plugins-kibana_utils-common-state_containers.pureselector.md
new file mode 100644
index 0000000000000..6ac07cba446f5
--- /dev/null
+++ b/docs/development/plugins/kibana_utils/common/state_containers/kibana-plugin-plugins-kibana_utils-common-state_containers.pureselector.md
@@ -0,0 +1,12 @@
+
+
+[Home](./index.md) > [kibana-plugin-plugins-kibana\_utils-common-state\_containers](./kibana-plugin-plugins-kibana_utils-common-state_containers.md) > [PureSelector](./kibana-plugin-plugins-kibana_utils-common-state_containers.pureselector.md)
+
+## PureSelector type
+
+
+Signature:
+
+```typescript
+export declare type PureSelector = (state: State) => Selector;
+```
diff --git a/docs/development/plugins/kibana_utils/common/state_containers/kibana-plugin-plugins-kibana_utils-common-state_containers.pureselectorstoselectors.md b/docs/development/plugins/kibana_utils/common/state_containers/kibana-plugin-plugins-kibana_utils-common-state_containers.pureselectorstoselectors.md
new file mode 100644
index 0000000000000..82a91f7c87e17
--- /dev/null
+++ b/docs/development/plugins/kibana_utils/common/state_containers/kibana-plugin-plugins-kibana_utils-common-state_containers.pureselectorstoselectors.md
@@ -0,0 +1,14 @@
+
+
+[Home](./index.md) > [kibana-plugin-plugins-kibana\_utils-common-state\_containers](./kibana-plugin-plugins-kibana_utils-common-state_containers.md) > [PureSelectorsToSelectors](./kibana-plugin-plugins-kibana_utils-common-state_containers.pureselectorstoselectors.md)
+
+## PureSelectorsToSelectors type
+
+
+Signature:
+
+```typescript
+export declare type PureSelectorsToSelectors = {
+ [K in keyof T]: PureSelectorToSelector>;
+};
+```
diff --git a/docs/development/plugins/kibana_utils/common/state_containers/kibana-plugin-plugins-kibana_utils-common-state_containers.pureselectortoselector.md b/docs/development/plugins/kibana_utils/common/state_containers/kibana-plugin-plugins-kibana_utils-common-state_containers.pureselectortoselector.md
new file mode 100644
index 0000000000000..5c12afd1cd971
--- /dev/null
+++ b/docs/development/plugins/kibana_utils/common/state_containers/kibana-plugin-plugins-kibana_utils-common-state_containers.pureselectortoselector.md
@@ -0,0 +1,12 @@
+
+
+[Home](./index.md) > [kibana-plugin-plugins-kibana\_utils-common-state\_containers](./kibana-plugin-plugins-kibana_utils-common-state_containers.md) > [PureSelectorToSelector](./kibana-plugin-plugins-kibana_utils-common-state_containers.pureselectortoselector.md)
+
+## PureSelectorToSelector type
+
+
+Signature:
+
+```typescript
+export declare type PureSelectorToSelector> = ReturnType>;
+```
diff --git a/docs/development/plugins/kibana_utils/common/state_containers/kibana-plugin-plugins-kibana_utils-common-state_containers.reducer.md b/docs/development/plugins/kibana_utils/common/state_containers/kibana-plugin-plugins-kibana_utils-common-state_containers.reducer.md
new file mode 100644
index 0000000000000..519e6ce7d7cfb
--- /dev/null
+++ b/docs/development/plugins/kibana_utils/common/state_containers/kibana-plugin-plugins-kibana_utils-common-state_containers.reducer.md
@@ -0,0 +1,13 @@
+
+
+[Home](./index.md) > [kibana-plugin-plugins-kibana\_utils-common-state\_containers](./kibana-plugin-plugins-kibana_utils-common-state_containers.md) > [Reducer](./kibana-plugin-plugins-kibana_utils-common-state_containers.reducer.md)
+
+## Reducer type
+
+Redux like Reducer
+
+Signature:
+
+```typescript
+export declare type Reducer = (state: State, action: TransitionDescription) => State;
+```
diff --git a/docs/development/plugins/kibana_utils/common/state_containers/kibana-plugin-plugins-kibana_utils-common-state_containers.reduxlikestatecontainer.addmiddleware.md b/docs/development/plugins/kibana_utils/common/state_containers/kibana-plugin-plugins-kibana_utils-common-state_containers.reduxlikestatecontainer.addmiddleware.md
new file mode 100644
index 0000000000000..e90da05e30d87
--- /dev/null
+++ b/docs/development/plugins/kibana_utils/common/state_containers/kibana-plugin-plugins-kibana_utils-common-state_containers.reduxlikestatecontainer.addmiddleware.md
@@ -0,0 +1,11 @@
+
+
+[Home](./index.md) > [kibana-plugin-plugins-kibana\_utils-common-state\_containers](./kibana-plugin-plugins-kibana_utils-common-state_containers.md) > [ReduxLikeStateContainer](./kibana-plugin-plugins-kibana_utils-common-state_containers.reduxlikestatecontainer.md) > [addMiddleware](./kibana-plugin-plugins-kibana_utils-common-state_containers.reduxlikestatecontainer.addmiddleware.md)
+
+## ReduxLikeStateContainer.addMiddleware property
+
+Signature:
+
+```typescript
+addMiddleware: (middleware: Middleware) => void;
+```
diff --git a/docs/development/plugins/kibana_utils/common/state_containers/kibana-plugin-plugins-kibana_utils-common-state_containers.reduxlikestatecontainer.dispatch.md b/docs/development/plugins/kibana_utils/common/state_containers/kibana-plugin-plugins-kibana_utils-common-state_containers.reduxlikestatecontainer.dispatch.md
new file mode 100644
index 0000000000000..7a9755ee3b65c
--- /dev/null
+++ b/docs/development/plugins/kibana_utils/common/state_containers/kibana-plugin-plugins-kibana_utils-common-state_containers.reduxlikestatecontainer.dispatch.md
@@ -0,0 +1,11 @@
+
+
+[Home](./index.md) > [kibana-plugin-plugins-kibana\_utils-common-state\_containers](./kibana-plugin-plugins-kibana_utils-common-state_containers.md) > [ReduxLikeStateContainer](./kibana-plugin-plugins-kibana_utils-common-state_containers.reduxlikestatecontainer.md) > [dispatch](./kibana-plugin-plugins-kibana_utils-common-state_containers.reduxlikestatecontainer.dispatch.md)
+
+## ReduxLikeStateContainer.dispatch property
+
+Signature:
+
+```typescript
+dispatch: (action: TransitionDescription) => void;
+```
diff --git a/docs/development/plugins/kibana_utils/common/state_containers/kibana-plugin-plugins-kibana_utils-common-state_containers.reduxlikestatecontainer.getstate.md b/docs/development/plugins/kibana_utils/common/state_containers/kibana-plugin-plugins-kibana_utils-common-state_containers.reduxlikestatecontainer.getstate.md
new file mode 100644
index 0000000000000..86e1c6dd34cd6
--- /dev/null
+++ b/docs/development/plugins/kibana_utils/common/state_containers/kibana-plugin-plugins-kibana_utils-common-state_containers.reduxlikestatecontainer.getstate.md
@@ -0,0 +1,11 @@
+
+
+[Home](./index.md) > [kibana-plugin-plugins-kibana\_utils-common-state\_containers](./kibana-plugin-plugins-kibana_utils-common-state_containers.md) > [ReduxLikeStateContainer](./kibana-plugin-plugins-kibana_utils-common-state_containers.reduxlikestatecontainer.md) > [getState](./kibana-plugin-plugins-kibana_utils-common-state_containers.reduxlikestatecontainer.getstate.md)
+
+## ReduxLikeStateContainer.getState property
+
+Signature:
+
+```typescript
+getState: () => State;
+```
diff --git a/docs/development/plugins/kibana_utils/common/state_containers/kibana-plugin-plugins-kibana_utils-common-state_containers.reduxlikestatecontainer.md b/docs/development/plugins/kibana_utils/common/state_containers/kibana-plugin-plugins-kibana_utils-common-state_containers.reduxlikestatecontainer.md
new file mode 100644
index 0000000000000..0e08119c1eae4
--- /dev/null
+++ b/docs/development/plugins/kibana_utils/common/state_containers/kibana-plugin-plugins-kibana_utils-common-state_containers.reduxlikestatecontainer.md
@@ -0,0 +1,25 @@
+
+
+[Home](./index.md) > [kibana-plugin-plugins-kibana\_utils-common-state\_containers](./kibana-plugin-plugins-kibana_utils-common-state_containers.md) > [ReduxLikeStateContainer](./kibana-plugin-plugins-kibana_utils-common-state_containers.reduxlikestatecontainer.md)
+
+## ReduxLikeStateContainer interface
+
+Fully featured state container which matches Redux store interface. Extends [StateContainer](./kibana-plugin-plugins-kibana_utils-common-state_containers.statecontainer.md) Allows to use state container with redux libraries
+
+Signature:
+
+```typescript
+export interface ReduxLikeStateContainer extends StateContainer
+```
+
+## Properties
+
+| Property | Type | Description |
+| --- | --- | --- |
+| [addMiddleware](./kibana-plugin-plugins-kibana_utils-common-state_containers.reduxlikestatecontainer.addmiddleware.md) | (middleware: Middleware<State>) => void | |
+| [dispatch](./kibana-plugin-plugins-kibana_utils-common-state_containers.reduxlikestatecontainer.dispatch.md) | (action: TransitionDescription) => void | |
+| [getState](./kibana-plugin-plugins-kibana_utils-common-state_containers.reduxlikestatecontainer.getstate.md) | () => State | |
+| [reducer](./kibana-plugin-plugins-kibana_utils-common-state_containers.reduxlikestatecontainer.reducer.md) | Reducer<State> | |
+| [replaceReducer](./kibana-plugin-plugins-kibana_utils-common-state_containers.reduxlikestatecontainer.replacereducer.md) | (nextReducer: Reducer<State>) => void | |
+| [subscribe](./kibana-plugin-plugins-kibana_utils-common-state_containers.reduxlikestatecontainer.subscribe.md) | (listener: (state: State) => void) => () => void | |
+
diff --git a/docs/development/plugins/kibana_utils/common/state_containers/kibana-plugin-plugins-kibana_utils-common-state_containers.reduxlikestatecontainer.reducer.md b/docs/development/plugins/kibana_utils/common/state_containers/kibana-plugin-plugins-kibana_utils-common-state_containers.reduxlikestatecontainer.reducer.md
new file mode 100644
index 0000000000000..49eabf19340f2
--- /dev/null
+++ b/docs/development/plugins/kibana_utils/common/state_containers/kibana-plugin-plugins-kibana_utils-common-state_containers.reduxlikestatecontainer.reducer.md
@@ -0,0 +1,11 @@
+
+
+[Home](./index.md) > [kibana-plugin-plugins-kibana\_utils-common-state\_containers](./kibana-plugin-plugins-kibana_utils-common-state_containers.md) > [ReduxLikeStateContainer](./kibana-plugin-plugins-kibana_utils-common-state_containers.reduxlikestatecontainer.md) > [reducer](./kibana-plugin-plugins-kibana_utils-common-state_containers.reduxlikestatecontainer.reducer.md)
+
+## ReduxLikeStateContainer.reducer property
+
+Signature:
+
+```typescript
+reducer: Reducer;
+```
diff --git a/docs/development/plugins/kibana_utils/common/state_containers/kibana-plugin-plugins-kibana_utils-common-state_containers.reduxlikestatecontainer.replacereducer.md b/docs/development/plugins/kibana_utils/common/state_containers/kibana-plugin-plugins-kibana_utils-common-state_containers.reduxlikestatecontainer.replacereducer.md
new file mode 100644
index 0000000000000..2582d31d9adc4
--- /dev/null
+++ b/docs/development/plugins/kibana_utils/common/state_containers/kibana-plugin-plugins-kibana_utils-common-state_containers.reduxlikestatecontainer.replacereducer.md
@@ -0,0 +1,11 @@
+
+
+[Home](./index.md) > [kibana-plugin-plugins-kibana\_utils-common-state\_containers](./kibana-plugin-plugins-kibana_utils-common-state_containers.md) > [ReduxLikeStateContainer](./kibana-plugin-plugins-kibana_utils-common-state_containers.reduxlikestatecontainer.md) > [replaceReducer](./kibana-plugin-plugins-kibana_utils-common-state_containers.reduxlikestatecontainer.replacereducer.md)
+
+## ReduxLikeStateContainer.replaceReducer property
+
+Signature:
+
+```typescript
+replaceReducer: (nextReducer: Reducer) => void;
+```
diff --git a/docs/development/plugins/kibana_utils/common/state_containers/kibana-plugin-plugins-kibana_utils-common-state_containers.reduxlikestatecontainer.subscribe.md b/docs/development/plugins/kibana_utils/common/state_containers/kibana-plugin-plugins-kibana_utils-common-state_containers.reduxlikestatecontainer.subscribe.md
new file mode 100644
index 0000000000000..15139a7bd9f3e
--- /dev/null
+++ b/docs/development/plugins/kibana_utils/common/state_containers/kibana-plugin-plugins-kibana_utils-common-state_containers.reduxlikestatecontainer.subscribe.md
@@ -0,0 +1,11 @@
+
+
+[Home](./index.md) > [kibana-plugin-plugins-kibana\_utils-common-state\_containers](./kibana-plugin-plugins-kibana_utils-common-state_containers.md) > [ReduxLikeStateContainer](./kibana-plugin-plugins-kibana_utils-common-state_containers.reduxlikestatecontainer.md) > [subscribe](./kibana-plugin-plugins-kibana_utils-common-state_containers.reduxlikestatecontainer.subscribe.md)
+
+## ReduxLikeStateContainer.subscribe property
+
+Signature:
+
+```typescript
+subscribe: (listener: (state: State) => void) => () => void;
+```
diff --git a/docs/development/plugins/kibana_utils/common/state_containers/kibana-plugin-plugins-kibana_utils-common-state_containers.selector.md b/docs/development/plugins/kibana_utils/common/state_containers/kibana-plugin-plugins-kibana_utils-common-state_containers.selector.md
new file mode 100644
index 0000000000000..5c143551d130b
--- /dev/null
+++ b/docs/development/plugins/kibana_utils/common/state_containers/kibana-plugin-plugins-kibana_utils-common-state_containers.selector.md
@@ -0,0 +1,12 @@
+
+
+[Home](./index.md) > [kibana-plugin-plugins-kibana\_utils-common-state\_containers](./kibana-plugin-plugins-kibana_utils-common-state_containers.md) > [Selector](./kibana-plugin-plugins-kibana_utils-common-state_containers.selector.md)
+
+## Selector type
+
+
+Signature:
+
+```typescript
+export declare type Selector = (...args: Args) => Result;
+```
diff --git a/docs/development/plugins/kibana_utils/common/state_containers/kibana-plugin-plugins-kibana_utils-common-state_containers.statecontainer.md b/docs/development/plugins/kibana_utils/common/state_containers/kibana-plugin-plugins-kibana_utils-common-state_containers.statecontainer.md
new file mode 100644
index 0000000000000..23ec1c8e5be01
--- /dev/null
+++ b/docs/development/plugins/kibana_utils/common/state_containers/kibana-plugin-plugins-kibana_utils-common-state_containers.statecontainer.md
@@ -0,0 +1,21 @@
+
+
+[Home](./index.md) > [kibana-plugin-plugins-kibana\_utils-common-state\_containers](./kibana-plugin-plugins-kibana_utils-common-state_containers.md) > [StateContainer](./kibana-plugin-plugins-kibana_utils-common-state_containers.statecontainer.md)
+
+## StateContainer interface
+
+Fully featured state container with [Selectors](./kibana-plugin-plugins-kibana_utils-common-state_containers.selector.md) and . Extends [BaseStateContainer](./kibana-plugin-plugins-kibana_utils-common-state_containers.basestatecontainer.md)
+
+Signature:
+
+```typescript
+export interface StateContainer extends BaseStateContainer
+```
+
+## Properties
+
+| Property | Type | Description |
+| --- | --- | --- |
+| [selectors](./kibana-plugin-plugins-kibana_utils-common-state_containers.statecontainer.selectors.md) | Readonly<PureSelectorsToSelectors<PureSelectors>> | |
+| [transitions](./kibana-plugin-plugins-kibana_utils-common-state_containers.statecontainer.transitions.md) | Readonly<PureTransitionsToTransitions<PureTransitions>> | |
+
diff --git a/docs/development/plugins/kibana_utils/common/state_containers/kibana-plugin-plugins-kibana_utils-common-state_containers.statecontainer.selectors.md b/docs/development/plugins/kibana_utils/common/state_containers/kibana-plugin-plugins-kibana_utils-common-state_containers.statecontainer.selectors.md
new file mode 100644
index 0000000000000..2afac07b59e39
--- /dev/null
+++ b/docs/development/plugins/kibana_utils/common/state_containers/kibana-plugin-plugins-kibana_utils-common-state_containers.statecontainer.selectors.md
@@ -0,0 +1,11 @@
+
+
+[Home](./index.md) > [kibana-plugin-plugins-kibana\_utils-common-state\_containers](./kibana-plugin-plugins-kibana_utils-common-state_containers.md) > [StateContainer](./kibana-plugin-plugins-kibana_utils-common-state_containers.statecontainer.md) > [selectors](./kibana-plugin-plugins-kibana_utils-common-state_containers.statecontainer.selectors.md)
+
+## StateContainer.selectors property
+
+Signature:
+
+```typescript
+selectors: Readonly>;
+```
diff --git a/docs/development/plugins/kibana_utils/common/state_containers/kibana-plugin-plugins-kibana_utils-common-state_containers.statecontainer.transitions.md b/docs/development/plugins/kibana_utils/common/state_containers/kibana-plugin-plugins-kibana_utils-common-state_containers.statecontainer.transitions.md
new file mode 100644
index 0000000000000..4712d3287beef
--- /dev/null
+++ b/docs/development/plugins/kibana_utils/common/state_containers/kibana-plugin-plugins-kibana_utils-common-state_containers.statecontainer.transitions.md
@@ -0,0 +1,11 @@
+
+
+[Home](./index.md) > [kibana-plugin-plugins-kibana\_utils-common-state\_containers](./kibana-plugin-plugins-kibana_utils-common-state_containers.md) > [StateContainer](./kibana-plugin-plugins-kibana_utils-common-state_containers.statecontainer.md) > [transitions](./kibana-plugin-plugins-kibana_utils-common-state_containers.statecontainer.transitions.md)
+
+## StateContainer.transitions property
+
+Signature:
+
+```typescript
+transitions: Readonly>;
+```
diff --git a/docs/development/plugins/kibana_utils/common/state_containers/kibana-plugin-plugins-kibana_utils-common-state_containers.unboxstate.md b/docs/development/plugins/kibana_utils/common/state_containers/kibana-plugin-plugins-kibana_utils-common-state_containers.unboxstate.md
new file mode 100644
index 0000000000000..d4f99841456d7
--- /dev/null
+++ b/docs/development/plugins/kibana_utils/common/state_containers/kibana-plugin-plugins-kibana_utils-common-state_containers.unboxstate.md
@@ -0,0 +1,13 @@
+
+
+[Home](./index.md) > [kibana-plugin-plugins-kibana\_utils-common-state\_containers](./kibana-plugin-plugins-kibana_utils-common-state_containers.md) > [UnboxState](./kibana-plugin-plugins-kibana_utils-common-state_containers.unboxstate.md)
+
+## UnboxState type
+
+Utility type for inferring state shape from [StateContainer](./kibana-plugin-plugins-kibana_utils-common-state_containers.statecontainer.md)
+
+Signature:
+
+```typescript
+export declare type UnboxState> = Container extends StateContainer ? T : never;
+```
diff --git a/docs/development/plugins/kibana_utils/common/state_containers/kibana-plugin-plugins-kibana_utils-common-state_containers.usecontainerselector.md b/docs/development/plugins/kibana_utils/common/state_containers/kibana-plugin-plugins-kibana_utils-common-state_containers.usecontainerselector.md
new file mode 100644
index 0000000000000..fe5f30a9c8472
--- /dev/null
+++ b/docs/development/plugins/kibana_utils/common/state_containers/kibana-plugin-plugins-kibana_utils-common-state_containers.usecontainerselector.md
@@ -0,0 +1,13 @@
+
+
+[Home](./index.md) > [kibana-plugin-plugins-kibana\_utils-common-state\_containers](./kibana-plugin-plugins-kibana_utils-common-state_containers.md) > [useContainerSelector](./kibana-plugin-plugins-kibana_utils-common-state_containers.usecontainerselector.md)
+
+## useContainerSelector variable
+
+React hook to apply selector to state container to extract only needed information. Will re-render your component only when the section changes.
+
+Signature:
+
+```typescript
+useContainerSelector: , Result>(container: Container, selector: (state: UnboxState) => Result, comparator?: Comparator) => Result
+```
diff --git a/docs/development/plugins/kibana_utils/common/state_containers/kibana-plugin-plugins-kibana_utils-common-state_containers.usecontainerstate.md b/docs/development/plugins/kibana_utils/common/state_containers/kibana-plugin-plugins-kibana_utils-common-state_containers.usecontainerstate.md
new file mode 100644
index 0000000000000..7cef47c58f9d9
--- /dev/null
+++ b/docs/development/plugins/kibana_utils/common/state_containers/kibana-plugin-plugins-kibana_utils-common-state_containers.usecontainerstate.md
@@ -0,0 +1,13 @@
+
+
+[Home](./index.md) > [kibana-plugin-plugins-kibana\_utils-common-state\_containers](./kibana-plugin-plugins-kibana_utils-common-state_containers.md) > [useContainerState](./kibana-plugin-plugins-kibana_utils-common-state_containers.usecontainerstate.md)
+
+## useContainerState variable
+
+React hooks that returns the latest state of a [StateContainer](./kibana-plugin-plugins-kibana_utils-common-state_containers.statecontainer.md).
+
+Signature:
+
+```typescript
+useContainerState: >(container: Container) => UnboxState
+```
diff --git a/docs/development/plugins/kibana_utils/public/state_sync/index.md b/docs/development/plugins/kibana_utils/public/state_sync/index.md
new file mode 100644
index 0000000000000..4b345d9130bd5
--- /dev/null
+++ b/docs/development/plugins/kibana_utils/public/state_sync/index.md
@@ -0,0 +1,12 @@
+
+
+[Home](./index.md)
+
+## API Reference
+
+## Packages
+
+| Package | Description |
+| --- | --- |
+| [kibana-plugin-plugins-kibana\_utils-public-state\_sync](./kibana-plugin-plugins-kibana_utils-public-state_sync.md) | State syncing utilities are a set of helpers for syncing your application state with URL or browser storage.They are designed to work together with state containers (). But state containers are not required.State syncing utilities include:- util which: - Subscribes to state changes and pushes them to state storage. - Optionally subscribes to state storage changes and pushes them to state. - Two types of storage compatible with syncState: - - Serializes state and persists it to URL's query param in rison or hashed format. Listens for state updates in the URL and pushes them back to state. - - Serializes state and persists it to browser storage.Refer [here](https://github.com/elastic/kibana/tree/master/src/plugins/kibana_utils/docs/state_sync) for a complete guide and examples |
+
diff --git a/docs/development/plugins/kibana_utils/public/state_sync/kibana-plugin-plugins-kibana_utils-public-state_sync.createkbnurlstatestorage.md b/docs/development/plugins/kibana_utils/public/state_sync/kibana-plugin-plugins-kibana_utils-public-state_sync.createkbnurlstatestorage.md
new file mode 100644
index 0000000000000..22f70ce22b574
--- /dev/null
+++ b/docs/development/plugins/kibana_utils/public/state_sync/kibana-plugin-plugins-kibana_utils-public-state_sync.createkbnurlstatestorage.md
@@ -0,0 +1,16 @@
+
+
+[Home](./index.md) > [kibana-plugin-plugins-kibana\_utils-public-state\_sync](./kibana-plugin-plugins-kibana_utils-public-state_sync.md) > [createKbnUrlStateStorage](./kibana-plugin-plugins-kibana_utils-public-state_sync.createkbnurlstatestorage.md)
+
+## createKbnUrlStateStorage variable
+
+Creates [IKbnUrlStateStorage](./kibana-plugin-plugins-kibana_utils-public-state_sync.ikbnurlstatestorage.md) state storage
+
+Signature:
+
+```typescript
+createKbnUrlStateStorage: ({ useHash, history }?: {
+ useHash: boolean;
+ history?: History | undefined;
+}) => IKbnUrlStateStorage
+```
diff --git a/docs/development/plugins/kibana_utils/public/state_sync/kibana-plugin-plugins-kibana_utils-public-state_sync.createsessionstoragestatestorage.md b/docs/development/plugins/kibana_utils/public/state_sync/kibana-plugin-plugins-kibana_utils-public-state_sync.createsessionstoragestatestorage.md
new file mode 100644
index 0000000000000..dccff93ad1724
--- /dev/null
+++ b/docs/development/plugins/kibana_utils/public/state_sync/kibana-plugin-plugins-kibana_utils-public-state_sync.createsessionstoragestatestorage.md
@@ -0,0 +1,13 @@
+
+
+[Home](./index.md) > [kibana-plugin-plugins-kibana\_utils-public-state\_sync](./kibana-plugin-plugins-kibana_utils-public-state_sync.md) > [createSessionStorageStateStorage](./kibana-plugin-plugins-kibana_utils-public-state_sync.createsessionstoragestatestorage.md)
+
+## createSessionStorageStateStorage variable
+
+Creates [ISessionStorageStateStorage](./kibana-plugin-plugins-kibana_utils-public-state_sync.isessionstoragestatestorage.md) [guide](https://github.com/elastic/kibana/blob/master/src/plugins/kibana_utils/docs/state_sync/storages/session_storage.md)
+
+Signature:
+
+```typescript
+createSessionStorageStateStorage: (storage?: Storage) => ISessionStorageStateStorage
+```
diff --git a/docs/development/plugins/kibana_utils/public/state_sync/kibana-plugin-plugins-kibana_utils-public-state_sync.ikbnurlstatestorage.cancel.md b/docs/development/plugins/kibana_utils/public/state_sync/kibana-plugin-plugins-kibana_utils-public-state_sync.ikbnurlstatestorage.cancel.md
new file mode 100644
index 0000000000000..29a511d57d7bd
--- /dev/null
+++ b/docs/development/plugins/kibana_utils/public/state_sync/kibana-plugin-plugins-kibana_utils-public-state_sync.ikbnurlstatestorage.cancel.md
@@ -0,0 +1,13 @@
+
+
+[Home](./index.md) > [kibana-plugin-plugins-kibana\_utils-public-state\_sync](./kibana-plugin-plugins-kibana_utils-public-state_sync.md) > [IKbnUrlStateStorage](./kibana-plugin-plugins-kibana_utils-public-state_sync.ikbnurlstatestorage.md) > [cancel](./kibana-plugin-plugins-kibana_utils-public-state_sync.ikbnurlstatestorage.cancel.md)
+
+## IKbnUrlStateStorage.cancel property
+
+cancels any pending url updates
+
+Signature:
+
+```typescript
+cancel: () => void;
+```
diff --git a/docs/development/plugins/kibana_utils/public/state_sync/kibana-plugin-plugins-kibana_utils-public-state_sync.ikbnurlstatestorage.change_.md b/docs/development/plugins/kibana_utils/public/state_sync/kibana-plugin-plugins-kibana_utils-public-state_sync.ikbnurlstatestorage.change_.md
new file mode 100644
index 0000000000000..2b55f2aca70c8
--- /dev/null
+++ b/docs/development/plugins/kibana_utils/public/state_sync/kibana-plugin-plugins-kibana_utils-public-state_sync.ikbnurlstatestorage.change_.md
@@ -0,0 +1,11 @@
+
+
+[Home](./index.md) > [kibana-plugin-plugins-kibana\_utils-public-state\_sync](./kibana-plugin-plugins-kibana_utils-public-state_sync.md) > [IKbnUrlStateStorage](./kibana-plugin-plugins-kibana_utils-public-state_sync.ikbnurlstatestorage.md) > [change$](./kibana-plugin-plugins-kibana_utils-public-state_sync.ikbnurlstatestorage.change_.md)
+
+## IKbnUrlStateStorage.change$ property
+
+Signature:
+
+```typescript
+change$: (key: string) => Observable;
+```
diff --git a/docs/development/plugins/kibana_utils/public/state_sync/kibana-plugin-plugins-kibana_utils-public-state_sync.ikbnurlstatestorage.flush.md b/docs/development/plugins/kibana_utils/public/state_sync/kibana-plugin-plugins-kibana_utils-public-state_sync.ikbnurlstatestorage.flush.md
new file mode 100644
index 0000000000000..e0e6aa9be4368
--- /dev/null
+++ b/docs/development/plugins/kibana_utils/public/state_sync/kibana-plugin-plugins-kibana_utils-public-state_sync.ikbnurlstatestorage.flush.md
@@ -0,0 +1,15 @@
+
+
+[Home](./index.md) > [kibana-plugin-plugins-kibana\_utils-public-state\_sync](./kibana-plugin-plugins-kibana_utils-public-state_sync.md) > [IKbnUrlStateStorage](./kibana-plugin-plugins-kibana_utils-public-state_sync.ikbnurlstatestorage.md) > [flush](./kibana-plugin-plugins-kibana_utils-public-state_sync.ikbnurlstatestorage.flush.md)
+
+## IKbnUrlStateStorage.flush property
+
+synchronously runs any pending url updates returned boolean indicates if change occurred
+
+Signature:
+
+```typescript
+flush: (opts?: {
+ replace?: boolean;
+ }) => boolean;
+```
diff --git a/docs/development/plugins/kibana_utils/public/state_sync/kibana-plugin-plugins-kibana_utils-public-state_sync.ikbnurlstatestorage.get.md b/docs/development/plugins/kibana_utils/public/state_sync/kibana-plugin-plugins-kibana_utils-public-state_sync.ikbnurlstatestorage.get.md
new file mode 100644
index 0000000000000..0eb60c21fbbbf
--- /dev/null
+++ b/docs/development/plugins/kibana_utils/public/state_sync/kibana-plugin-plugins-kibana_utils-public-state_sync.ikbnurlstatestorage.get.md
@@ -0,0 +1,11 @@
+
+
+[Home](./index.md) > [kibana-plugin-plugins-kibana\_utils-public-state\_sync](./kibana-plugin-plugins-kibana_utils-public-state_sync.md) > [IKbnUrlStateStorage](./kibana-plugin-plugins-kibana_utils-public-state_sync.ikbnurlstatestorage.md) > [get](./kibana-plugin-plugins-kibana_utils-public-state_sync.ikbnurlstatestorage.get.md)
+
+## IKbnUrlStateStorage.get property
+
+Signature:
+
+```typescript
+get: (key: string) => State | null;
+```
diff --git a/docs/development/plugins/kibana_utils/public/state_sync/kibana-plugin-plugins-kibana_utils-public-state_sync.ikbnurlstatestorage.md b/docs/development/plugins/kibana_utils/public/state_sync/kibana-plugin-plugins-kibana_utils-public-state_sync.ikbnurlstatestorage.md
new file mode 100644
index 0000000000000..56cefebd2acfe
--- /dev/null
+++ b/docs/development/plugins/kibana_utils/public/state_sync/kibana-plugin-plugins-kibana_utils-public-state_sync.ikbnurlstatestorage.md
@@ -0,0 +1,24 @@
+
+
+[Home](./index.md) > [kibana-plugin-plugins-kibana\_utils-public-state\_sync](./kibana-plugin-plugins-kibana_utils-public-state_sync.md) > [IKbnUrlStateStorage](./kibana-plugin-plugins-kibana_utils-public-state_sync.ikbnurlstatestorage.md)
+
+## IKbnUrlStateStorage interface
+
+KbnUrlStateStorage is a state storage for [syncState()](./kibana-plugin-plugins-kibana_utils-public-state_sync.syncstate.md) utility which: 1. Keeps state in sync with the URL. 2. Serializes data and stores it in the URL in one of the supported formats: \* Rison encoded. \* Hashed URL: In URL we store only the hash from the serialized state, but the state itself is stored in sessionStorage. See kibana's advanced option for more context state:storeInSessionStorage 3. Takes care of listening to the URL updates and notifies state about the updates. 4. Takes care of batching URL updates to prevent redundant browser history records. [GUIDE](https://github.com/elastic/kibana/blob/master/src/plugins/kibana_utils/docs/state_sync/storages/kbn_url_storage.md)
+
+Signature:
+
+```typescript
+export interface IKbnUrlStateStorage extends IStateStorage
+```
+
+## Properties
+
+| Property | Type | Description |
+| --- | --- | --- |
+| [cancel](./kibana-plugin-plugins-kibana_utils-public-state_sync.ikbnurlstatestorage.cancel.md) | () => void | cancels any pending url updates |
+| [change$](./kibana-plugin-plugins-kibana_utils-public-state_sync.ikbnurlstatestorage.change_.md) | <State = unknown>(key: string) => Observable<State | null> | |
+| [flush](./kibana-plugin-plugins-kibana_utils-public-state_sync.ikbnurlstatestorage.flush.md) | (opts?: {
replace?: boolean;
}) => boolean | synchronously runs any pending url updates returned boolean indicates if change occurred |
+| [get](./kibana-plugin-plugins-kibana_utils-public-state_sync.ikbnurlstatestorage.get.md) | <State = unknown>(key: string) => State | null | |
+| [set](./kibana-plugin-plugins-kibana_utils-public-state_sync.ikbnurlstatestorage.set.md) | <State>(key: string, state: State, opts?: {
replace: boolean;
}) => Promise<string | undefined> | |
+
diff --git a/docs/development/plugins/kibana_utils/public/state_sync/kibana-plugin-plugins-kibana_utils-public-state_sync.ikbnurlstatestorage.set.md b/docs/development/plugins/kibana_utils/public/state_sync/kibana-plugin-plugins-kibana_utils-public-state_sync.ikbnurlstatestorage.set.md
new file mode 100644
index 0000000000000..2eab44d344414
--- /dev/null
+++ b/docs/development/plugins/kibana_utils/public/state_sync/kibana-plugin-plugins-kibana_utils-public-state_sync.ikbnurlstatestorage.set.md
@@ -0,0 +1,13 @@
+
+
+[Home](./index.md) > [kibana-plugin-plugins-kibana\_utils-public-state\_sync](./kibana-plugin-plugins-kibana_utils-public-state_sync.md) > [IKbnUrlStateStorage](./kibana-plugin-plugins-kibana_utils-public-state_sync.ikbnurlstatestorage.md) > [set](./kibana-plugin-plugins-kibana_utils-public-state_sync.ikbnurlstatestorage.set.md)
+
+## IKbnUrlStateStorage.set property
+
+Signature:
+
+```typescript
+set: (key: string, state: State, opts?: {
+ replace: boolean;
+ }) => Promise;
+```
diff --git a/docs/development/plugins/kibana_utils/public/state_sync/kibana-plugin-plugins-kibana_utils-public-state_sync.inullablebasestatecontainer.md b/docs/development/plugins/kibana_utils/public/state_sync/kibana-plugin-plugins-kibana_utils-public-state_sync.inullablebasestatecontainer.md
new file mode 100644
index 0000000000000..ca69609936405
--- /dev/null
+++ b/docs/development/plugins/kibana_utils/public/state_sync/kibana-plugin-plugins-kibana_utils-public-state_sync.inullablebasestatecontainer.md
@@ -0,0 +1,24 @@
+
+
+[Home](./index.md) > [kibana-plugin-plugins-kibana\_utils-public-state\_sync](./kibana-plugin-plugins-kibana_utils-public-state_sync.md) > [INullableBaseStateContainer](./kibana-plugin-plugins-kibana_utils-public-state_sync.inullablebasestatecontainer.md)
+
+## INullableBaseStateContainer interface
+
+Extension of with one constraint: set state should handle `null` as incoming state
+
+Signature:
+
+```typescript
+export interface INullableBaseStateContainer extends BaseStateContainer
+```
+
+## Remarks
+
+State container for stateSync() have to accept "null" for example, set() implementation could handle null and fallback to some default state this is required to handle edge case, when state in storage becomes empty and syncing is in progress. state container will be notified about about storage becoming empty with null passed in
+
+## Properties
+
+| Property | Type | Description |
+| --- | --- | --- |
+| [set](./kibana-plugin-plugins-kibana_utils-public-state_sync.inullablebasestatecontainer.set.md) | (state: State | null) => void | |
+
diff --git a/docs/development/plugins/kibana_utils/public/state_sync/kibana-plugin-plugins-kibana_utils-public-state_sync.inullablebasestatecontainer.set.md b/docs/development/plugins/kibana_utils/public/state_sync/kibana-plugin-plugins-kibana_utils-public-state_sync.inullablebasestatecontainer.set.md
new file mode 100644
index 0000000000000..dd2978f59484a
--- /dev/null
+++ b/docs/development/plugins/kibana_utils/public/state_sync/kibana-plugin-plugins-kibana_utils-public-state_sync.inullablebasestatecontainer.set.md
@@ -0,0 +1,11 @@
+
+
+[Home](./index.md) > [kibana-plugin-plugins-kibana\_utils-public-state\_sync](./kibana-plugin-plugins-kibana_utils-public-state_sync.md) > [INullableBaseStateContainer](./kibana-plugin-plugins-kibana_utils-public-state_sync.inullablebasestatecontainer.md) > [set](./kibana-plugin-plugins-kibana_utils-public-state_sync.inullablebasestatecontainer.set.md)
+
+## INullableBaseStateContainer.set property
+
+Signature:
+
+```typescript
+set: (state: State | null) => void;
+```
diff --git a/docs/development/plugins/kibana_utils/public/state_sync/kibana-plugin-plugins-kibana_utils-public-state_sync.isessionstoragestatestorage.get.md b/docs/development/plugins/kibana_utils/public/state_sync/kibana-plugin-plugins-kibana_utils-public-state_sync.isessionstoragestatestorage.get.md
new file mode 100644
index 0000000000000..83131c77132ce
--- /dev/null
+++ b/docs/development/plugins/kibana_utils/public/state_sync/kibana-plugin-plugins-kibana_utils-public-state_sync.isessionstoragestatestorage.get.md
@@ -0,0 +1,11 @@
+
+
+[Home](./index.md) > [kibana-plugin-plugins-kibana\_utils-public-state\_sync](./kibana-plugin-plugins-kibana_utils-public-state_sync.md) > [ISessionStorageStateStorage](./kibana-plugin-plugins-kibana_utils-public-state_sync.isessionstoragestatestorage.md) > [get](./kibana-plugin-plugins-kibana_utils-public-state_sync.isessionstoragestatestorage.get.md)
+
+## ISessionStorageStateStorage.get property
+
+Signature:
+
+```typescript
+get: (key: string) => State | null;
+```
diff --git a/docs/development/plugins/kibana_utils/public/state_sync/kibana-plugin-plugins-kibana_utils-public-state_sync.isessionstoragestatestorage.md b/docs/development/plugins/kibana_utils/public/state_sync/kibana-plugin-plugins-kibana_utils-public-state_sync.isessionstoragestatestorage.md
new file mode 100644
index 0000000000000..7792bc3932f95
--- /dev/null
+++ b/docs/development/plugins/kibana_utils/public/state_sync/kibana-plugin-plugins-kibana_utils-public-state_sync.isessionstoragestatestorage.md
@@ -0,0 +1,21 @@
+
+
+[Home](./index.md) > [kibana-plugin-plugins-kibana\_utils-public-state\_sync](./kibana-plugin-plugins-kibana_utils-public-state_sync.md) > [ISessionStorageStateStorage](./kibana-plugin-plugins-kibana_utils-public-state_sync.isessionstoragestatestorage.md)
+
+## ISessionStorageStateStorage interface
+
+[IStateStorage](./kibana-plugin-plugins-kibana_utils-public-state_sync.istatestorage.md) for storing state in browser [guide](https://github.com/elastic/kibana/blob/master/src/plugins/kibana_utils/docs/state_sync/storages/session_storage.md)
+
+Signature:
+
+```typescript
+export interface ISessionStorageStateStorage extends IStateStorage
+```
+
+## Properties
+
+| Property | Type | Description |
+| --- | --- | --- |
+| [get](./kibana-plugin-plugins-kibana_utils-public-state_sync.isessionstoragestatestorage.get.md) | <State = unknown>(key: string) => State | null | |
+| [set](./kibana-plugin-plugins-kibana_utils-public-state_sync.isessionstoragestatestorage.set.md) | <State>(key: string, state: State) => void | |
+
diff --git a/docs/development/plugins/kibana_utils/public/state_sync/kibana-plugin-plugins-kibana_utils-public-state_sync.isessionstoragestatestorage.set.md b/docs/development/plugins/kibana_utils/public/state_sync/kibana-plugin-plugins-kibana_utils-public-state_sync.isessionstoragestatestorage.set.md
new file mode 100644
index 0000000000000..04b0ab01f0d13
--- /dev/null
+++ b/docs/development/plugins/kibana_utils/public/state_sync/kibana-plugin-plugins-kibana_utils-public-state_sync.isessionstoragestatestorage.set.md
@@ -0,0 +1,11 @@
+
+
+[Home](./index.md) > [kibana-plugin-plugins-kibana\_utils-public-state\_sync](./kibana-plugin-plugins-kibana_utils-public-state_sync.md) > [ISessionStorageStateStorage](./kibana-plugin-plugins-kibana_utils-public-state_sync.isessionstoragestatestorage.md) > [set](./kibana-plugin-plugins-kibana_utils-public-state_sync.isessionstoragestatestorage.set.md)
+
+## ISessionStorageStateStorage.set property
+
+Signature:
+
+```typescript
+set: (key: string, state: State) => void;
+```
diff --git a/docs/development/plugins/kibana_utils/public/state_sync/kibana-plugin-plugins-kibana_utils-public-state_sync.istatestorage.cancel.md b/docs/development/plugins/kibana_utils/public/state_sync/kibana-plugin-plugins-kibana_utils-public-state_sync.istatestorage.cancel.md
new file mode 100644
index 0000000000000..ce771d52a6e60
--- /dev/null
+++ b/docs/development/plugins/kibana_utils/public/state_sync/kibana-plugin-plugins-kibana_utils-public-state_sync.istatestorage.cancel.md
@@ -0,0 +1,13 @@
+
+
+[Home](./index.md) > [kibana-plugin-plugins-kibana\_utils-public-state\_sync](./kibana-plugin-plugins-kibana_utils-public-state_sync.md) > [IStateStorage](./kibana-plugin-plugins-kibana_utils-public-state_sync.istatestorage.md) > [cancel](./kibana-plugin-plugins-kibana_utils-public-state_sync.istatestorage.cancel.md)
+
+## IStateStorage.cancel property
+
+Optional method to cancel any pending activity syncState() will call it, if it is provided by IStateStorage
+
+Signature:
+
+```typescript
+cancel?: () => void;
+```
diff --git a/docs/development/plugins/kibana_utils/public/state_sync/kibana-plugin-plugins-kibana_utils-public-state_sync.istatestorage.change_.md b/docs/development/plugins/kibana_utils/public/state_sync/kibana-plugin-plugins-kibana_utils-public-state_sync.istatestorage.change_.md
new file mode 100644
index 0000000000000..ed6672a3d83c6
--- /dev/null
+++ b/docs/development/plugins/kibana_utils/public/state_sync/kibana-plugin-plugins-kibana_utils-public-state_sync.istatestorage.change_.md
@@ -0,0 +1,13 @@
+
+
+[Home](./index.md) > [kibana-plugin-plugins-kibana\_utils-public-state\_sync](./kibana-plugin-plugins-kibana_utils-public-state_sync.md) > [IStateStorage](./kibana-plugin-plugins-kibana_utils-public-state_sync.istatestorage.md) > [change$](./kibana-plugin-plugins-kibana_utils-public-state_sync.istatestorage.change_.md)
+
+## IStateStorage.change$ property
+
+Should notify when the stored state has changed
+
+Signature:
+
+```typescript
+change$?: (key: string) => Observable;
+```
diff --git a/docs/development/plugins/kibana_utils/public/state_sync/kibana-plugin-plugins-kibana_utils-public-state_sync.istatestorage.get.md b/docs/development/plugins/kibana_utils/public/state_sync/kibana-plugin-plugins-kibana_utils-public-state_sync.istatestorage.get.md
new file mode 100644
index 0000000000000..2c0b2ee970cc6
--- /dev/null
+++ b/docs/development/plugins/kibana_utils/public/state_sync/kibana-plugin-plugins-kibana_utils-public-state_sync.istatestorage.get.md
@@ -0,0 +1,13 @@
+
+
+[Home](./index.md) > [kibana-plugin-plugins-kibana\_utils-public-state\_sync](./kibana-plugin-plugins-kibana_utils-public-state_sync.md) > [IStateStorage](./kibana-plugin-plugins-kibana_utils-public-state_sync.istatestorage.md) > [get](./kibana-plugin-plugins-kibana_utils-public-state_sync.istatestorage.get.md)
+
+## IStateStorage.get property
+
+Should retrieve state from the storage and deserialize it
+
+Signature:
+
+```typescript
+get: (key: string) => State | null;
+```
diff --git a/docs/development/plugins/kibana_utils/public/state_sync/kibana-plugin-plugins-kibana_utils-public-state_sync.istatestorage.md b/docs/development/plugins/kibana_utils/public/state_sync/kibana-plugin-plugins-kibana_utils-public-state_sync.istatestorage.md
new file mode 100644
index 0000000000000..2c34a185fb7b1
--- /dev/null
+++ b/docs/development/plugins/kibana_utils/public/state_sync/kibana-plugin-plugins-kibana_utils-public-state_sync.istatestorage.md
@@ -0,0 +1,25 @@
+
+
+[Home](./index.md) > [kibana-plugin-plugins-kibana\_utils-public-state\_sync](./kibana-plugin-plugins-kibana_utils-public-state_sync.md) > [IStateStorage](./kibana-plugin-plugins-kibana_utils-public-state_sync.istatestorage.md)
+
+## IStateStorage interface
+
+Any StateStorage have to implement IStateStorage interface StateStorage is responsible for: \* state serialisation / deserialization \* persisting to and retrieving from storage
+
+For an example take a look at already implemented [IKbnUrlStateStorage](./kibana-plugin-plugins-kibana_utils-public-state_sync.ikbnurlstatestorage.md) and [ISessionStorageStateStorage](./kibana-plugin-plugins-kibana_utils-public-state_sync.isessionstoragestatestorage.md) state storages
+
+Signature:
+
+```typescript
+export interface IStateStorage
+```
+
+## Properties
+
+| Property | Type | Description |
+| --- | --- | --- |
+| [cancel](./kibana-plugin-plugins-kibana_utils-public-state_sync.istatestorage.cancel.md) | () => void | Optional method to cancel any pending activity syncState() will call it, if it is provided by IStateStorage |
+| [change$](./kibana-plugin-plugins-kibana_utils-public-state_sync.istatestorage.change_.md) | <State = unknown>(key: string) => Observable<State | null> | Should notify when the stored state has changed |
+| [get](./kibana-plugin-plugins-kibana_utils-public-state_sync.istatestorage.get.md) | <State = unknown>(key: string) => State | null | Should retrieve state from the storage and deserialize it |
+| [set](./kibana-plugin-plugins-kibana_utils-public-state_sync.istatestorage.set.md) | <State>(key: string, state: State) => any | Take in a state object, should serialise and persist |
+
diff --git a/docs/development/plugins/kibana_utils/public/state_sync/kibana-plugin-plugins-kibana_utils-public-state_sync.istatestorage.set.md b/docs/development/plugins/kibana_utils/public/state_sync/kibana-plugin-plugins-kibana_utils-public-state_sync.istatestorage.set.md
new file mode 100644
index 0000000000000..3f286994ed4af
--- /dev/null
+++ b/docs/development/plugins/kibana_utils/public/state_sync/kibana-plugin-plugins-kibana_utils-public-state_sync.istatestorage.set.md
@@ -0,0 +1,13 @@
+
+
+[Home](./index.md) > [kibana-plugin-plugins-kibana\_utils-public-state\_sync](./kibana-plugin-plugins-kibana_utils-public-state_sync.md) > [IStateStorage](./kibana-plugin-plugins-kibana_utils-public-state_sync.istatestorage.md) > [set](./kibana-plugin-plugins-kibana_utils-public-state_sync.istatestorage.set.md)
+
+## IStateStorage.set property
+
+Take in a state object, should serialise and persist
+
+Signature:
+
+```typescript
+set: (key: string, state: State) => any;
+```
diff --git a/docs/development/plugins/kibana_utils/public/state_sync/kibana-plugin-plugins-kibana_utils-public-state_sync.istatesyncconfig.md b/docs/development/plugins/kibana_utils/public/state_sync/kibana-plugin-plugins-kibana_utils-public-state_sync.istatesyncconfig.md
new file mode 100644
index 0000000000000..f9368de4240ac
--- /dev/null
+++ b/docs/development/plugins/kibana_utils/public/state_sync/kibana-plugin-plugins-kibana_utils-public-state_sync.istatesyncconfig.md
@@ -0,0 +1,22 @@
+
+
+[Home](./index.md) > [kibana-plugin-plugins-kibana\_utils-public-state\_sync](./kibana-plugin-plugins-kibana_utils-public-state_sync.md) > [IStateSyncConfig](./kibana-plugin-plugins-kibana_utils-public-state_sync.istatesyncconfig.md)
+
+## IStateSyncConfig interface
+
+Config for setting up state syncing with
+
+Signature:
+
+```typescript
+export interface IStateSyncConfig
+```
+
+## Properties
+
+| Property | Type | Description |
+| --- | --- | --- |
+| [stateContainer](./kibana-plugin-plugins-kibana_utils-public-state_sync.istatesyncconfig.statecontainer.md) | INullableBaseStateContainer<State> | State container to keep in sync with storage, have to implement [INullableBaseStateContainer](./kibana-plugin-plugins-kibana_utils-public-state_sync.inullablebasestatecontainer.md) interface We encourage to use as a state container, but it is also possible to implement own custom container for advanced use cases |
+| [stateStorage](./kibana-plugin-plugins-kibana_utils-public-state_sync.istatesyncconfig.statestorage.md) | StateStorage | State storage to use, State storage is responsible for serialising / deserialising and persisting / retrieving stored stateThere are common strategies already implemented: see [IKbnUrlStateStorage](./kibana-plugin-plugins-kibana_utils-public-state_sync.ikbnurlstatestorage.md) which replicate what State (AppState, GlobalState) in legacy world did |
+| [storageKey](./kibana-plugin-plugins-kibana_utils-public-state_sync.istatesyncconfig.storagekey.md) | string | Storage key to use for syncing, e.g. storageKey '\_a' should sync state to ?\_a query param |
+
diff --git a/docs/development/plugins/kibana_utils/public/state_sync/kibana-plugin-plugins-kibana_utils-public-state_sync.istatesyncconfig.statecontainer.md b/docs/development/plugins/kibana_utils/public/state_sync/kibana-plugin-plugins-kibana_utils-public-state_sync.istatesyncconfig.statecontainer.md
new file mode 100644
index 0000000000000..0098dd5c99aeb
--- /dev/null
+++ b/docs/development/plugins/kibana_utils/public/state_sync/kibana-plugin-plugins-kibana_utils-public-state_sync.istatesyncconfig.statecontainer.md
@@ -0,0 +1,13 @@
+
+
+[Home](./index.md) > [kibana-plugin-plugins-kibana\_utils-public-state\_sync](./kibana-plugin-plugins-kibana_utils-public-state_sync.md) > [IStateSyncConfig](./kibana-plugin-plugins-kibana_utils-public-state_sync.istatesyncconfig.md) > [stateContainer](./kibana-plugin-plugins-kibana_utils-public-state_sync.istatesyncconfig.statecontainer.md)
+
+## IStateSyncConfig.stateContainer property
+
+State container to keep in sync with storage, have to implement [INullableBaseStateContainer](./kibana-plugin-plugins-kibana_utils-public-state_sync.inullablebasestatecontainer.md) interface We encourage to use as a state container, but it is also possible to implement own custom container for advanced use cases
+
+Signature:
+
+```typescript
+stateContainer: INullableBaseStateContainer;
+```
diff --git a/docs/development/plugins/kibana_utils/public/state_sync/kibana-plugin-plugins-kibana_utils-public-state_sync.istatesyncconfig.statestorage.md b/docs/development/plugins/kibana_utils/public/state_sync/kibana-plugin-plugins-kibana_utils-public-state_sync.istatesyncconfig.statestorage.md
new file mode 100644
index 0000000000000..ef872ba0ba9b5
--- /dev/null
+++ b/docs/development/plugins/kibana_utils/public/state_sync/kibana-plugin-plugins-kibana_utils-public-state_sync.istatesyncconfig.statestorage.md
@@ -0,0 +1,15 @@
+
+
+[Home](./index.md) > [kibana-plugin-plugins-kibana\_utils-public-state\_sync](./kibana-plugin-plugins-kibana_utils-public-state_sync.md) > [IStateSyncConfig](./kibana-plugin-plugins-kibana_utils-public-state_sync.istatesyncconfig.md) > [stateStorage](./kibana-plugin-plugins-kibana_utils-public-state_sync.istatesyncconfig.statestorage.md)
+
+## IStateSyncConfig.stateStorage property
+
+State storage to use, State storage is responsible for serialising / deserialising and persisting / retrieving stored state
+
+There are common strategies already implemented: see [IKbnUrlStateStorage](./kibana-plugin-plugins-kibana_utils-public-state_sync.ikbnurlstatestorage.md) which replicate what State (AppState, GlobalState) in legacy world did
+
+Signature:
+
+```typescript
+stateStorage: StateStorage;
+```
diff --git a/docs/development/plugins/kibana_utils/public/state_sync/kibana-plugin-plugins-kibana_utils-public-state_sync.istatesyncconfig.storagekey.md b/docs/development/plugins/kibana_utils/public/state_sync/kibana-plugin-plugins-kibana_utils-public-state_sync.istatesyncconfig.storagekey.md
new file mode 100644
index 0000000000000..d3887c23df1e0
--- /dev/null
+++ b/docs/development/plugins/kibana_utils/public/state_sync/kibana-plugin-plugins-kibana_utils-public-state_sync.istatesyncconfig.storagekey.md
@@ -0,0 +1,13 @@
+
+
+[Home](./index.md) > [kibana-plugin-plugins-kibana\_utils-public-state\_sync](./kibana-plugin-plugins-kibana_utils-public-state_sync.md) > [IStateSyncConfig](./kibana-plugin-plugins-kibana_utils-public-state_sync.istatesyncconfig.md) > [storageKey](./kibana-plugin-plugins-kibana_utils-public-state_sync.istatesyncconfig.storagekey.md)
+
+## IStateSyncConfig.storageKey property
+
+Storage key to use for syncing, e.g. storageKey '\_a' should sync state to ?\_a query param
+
+Signature:
+
+```typescript
+storageKey: string;
+```
diff --git a/docs/development/plugins/kibana_utils/public/state_sync/kibana-plugin-plugins-kibana_utils-public-state_sync.isyncstateref.md b/docs/development/plugins/kibana_utils/public/state_sync/kibana-plugin-plugins-kibana_utils-public-state_sync.isyncstateref.md
new file mode 100644
index 0000000000000..137db68cd6b48
--- /dev/null
+++ b/docs/development/plugins/kibana_utils/public/state_sync/kibana-plugin-plugins-kibana_utils-public-state_sync.isyncstateref.md
@@ -0,0 +1,20 @@
+
+
+[Home](./index.md) > [kibana-plugin-plugins-kibana\_utils-public-state\_sync](./kibana-plugin-plugins-kibana_utils-public-state_sync.md) > [ISyncStateRef](./kibana-plugin-plugins-kibana_utils-public-state_sync.isyncstateref.md)
+
+## ISyncStateRef interface
+
+
+Signature:
+
+```typescript
+export interface ISyncStateRef
+```
+
+## Properties
+
+| Property | Type | Description |
+| --- | --- | --- |
+| [start](./kibana-plugin-plugins-kibana_utils-public-state_sync.isyncstateref.start.md) | StartSyncStateFnType | start state syncing |
+| [stop](./kibana-plugin-plugins-kibana_utils-public-state_sync.isyncstateref.stop.md) | StopSyncStateFnType | stop state syncing |
+
diff --git a/docs/development/plugins/kibana_utils/public/state_sync/kibana-plugin-plugins-kibana_utils-public-state_sync.isyncstateref.start.md b/docs/development/plugins/kibana_utils/public/state_sync/kibana-plugin-plugins-kibana_utils-public-state_sync.isyncstateref.start.md
new file mode 100644
index 0000000000000..d8df808ba215f
--- /dev/null
+++ b/docs/development/plugins/kibana_utils/public/state_sync/kibana-plugin-plugins-kibana_utils-public-state_sync.isyncstateref.start.md
@@ -0,0 +1,13 @@
+
+
+[Home](./index.md) > [kibana-plugin-plugins-kibana\_utils-public-state\_sync](./kibana-plugin-plugins-kibana_utils-public-state_sync.md) > [ISyncStateRef](./kibana-plugin-plugins-kibana_utils-public-state_sync.isyncstateref.md) > [start](./kibana-plugin-plugins-kibana_utils-public-state_sync.isyncstateref.start.md)
+
+## ISyncStateRef.start property
+
+start state syncing
+
+Signature:
+
+```typescript
+start: StartSyncStateFnType;
+```
diff --git a/docs/development/plugins/kibana_utils/public/state_sync/kibana-plugin-plugins-kibana_utils-public-state_sync.isyncstateref.stop.md b/docs/development/plugins/kibana_utils/public/state_sync/kibana-plugin-plugins-kibana_utils-public-state_sync.isyncstateref.stop.md
new file mode 100644
index 0000000000000..70356dd9d6c79
--- /dev/null
+++ b/docs/development/plugins/kibana_utils/public/state_sync/kibana-plugin-plugins-kibana_utils-public-state_sync.isyncstateref.stop.md
@@ -0,0 +1,13 @@
+
+
+[Home](./index.md) > [kibana-plugin-plugins-kibana\_utils-public-state\_sync](./kibana-plugin-plugins-kibana_utils-public-state_sync.md) > [ISyncStateRef](./kibana-plugin-plugins-kibana_utils-public-state_sync.isyncstateref.md) > [stop](./kibana-plugin-plugins-kibana_utils-public-state_sync.isyncstateref.stop.md)
+
+## ISyncStateRef.stop property
+
+stop state syncing
+
+Signature:
+
+```typescript
+stop: StopSyncStateFnType;
+```
diff --git a/docs/development/plugins/kibana_utils/public/state_sync/kibana-plugin-plugins-kibana_utils-public-state_sync.md b/docs/development/plugins/kibana_utils/public/state_sync/kibana-plugin-plugins-kibana_utils-public-state_sync.md
new file mode 100644
index 0000000000000..2b02c98e0d605
--- /dev/null
+++ b/docs/development/plugins/kibana_utils/public/state_sync/kibana-plugin-plugins-kibana_utils-public-state_sync.md
@@ -0,0 +1,48 @@
+
+
+[Home](./index.md) > [kibana-plugin-plugins-kibana\_utils-public-state\_sync](./kibana-plugin-plugins-kibana_utils-public-state_sync.md)
+
+## kibana-plugin-plugins-kibana\_utils-public-state\_sync package
+
+State syncing utilities are a set of helpers for syncing your application state with URL or browser storage.
+
+They are designed to work together with state containers (). But state containers are not required.
+
+State syncing utilities include:
+
+- [syncState()](./kibana-plugin-plugins-kibana_utils-public-state_sync.syncstate.md) util which: - Subscribes to state changes and pushes them to state storage. - Optionally subscribes to state storage changes and pushes them to state. - Two types of storage compatible with `syncState`: - [IKbnUrlStateStorage](./kibana-plugin-plugins-kibana_utils-public-state_sync.ikbnurlstatestorage.md) - Serializes state and persists it to URL's query param in rison or hashed format. Listens for state updates in the URL and pushes them back to state. - [ISessionStorageStateStorage](./kibana-plugin-plugins-kibana_utils-public-state_sync.isessionstoragestatestorage.md) - Serializes state and persists it to browser storage.
+
+Refer [here](https://github.com/elastic/kibana/tree/master/src/plugins/kibana_utils/docs/state_sync) for a complete guide and examples
+
+## Functions
+
+| Function | Description |
+| --- | --- |
+| [syncState({ storageKey, stateStorage, stateContainer, })](./kibana-plugin-plugins-kibana_utils-public-state_sync.syncstate.md) | Utility for syncing application state wrapped in state container with some kind of storage (e.g. URL) Refer [here](https://github.com/elastic/kibana/tree/master/src/plugins/kibana_utils/docs/state_sync) for a complete guide and examples |
+| [syncStates(stateSyncConfigs)](./kibana-plugin-plugins-kibana_utils-public-state_sync.syncstates.md) | |
+
+## Interfaces
+
+| Interface | Description |
+| --- | --- |
+| [IKbnUrlStateStorage](./kibana-plugin-plugins-kibana_utils-public-state_sync.ikbnurlstatestorage.md) | KbnUrlStateStorage is a state storage for [syncState()](./kibana-plugin-plugins-kibana_utils-public-state_sync.syncstate.md) utility which: 1. Keeps state in sync with the URL. 2. Serializes data and stores it in the URL in one of the supported formats: \* Rison encoded. \* Hashed URL: In URL we store only the hash from the serialized state, but the state itself is stored in sessionStorage. See kibana's advanced option for more context state:storeInSessionStorage 3. Takes care of listening to the URL updates and notifies state about the updates. 4. Takes care of batching URL updates to prevent redundant browser history records. [GUIDE](https://github.com/elastic/kibana/blob/master/src/plugins/kibana_utils/docs/state_sync/storages/kbn_url_storage.md) |
+| [INullableBaseStateContainer](./kibana-plugin-plugins-kibana_utils-public-state_sync.inullablebasestatecontainer.md) | Extension of with one constraint: set state should handle null as incoming state |
+| [ISessionStorageStateStorage](./kibana-plugin-plugins-kibana_utils-public-state_sync.isessionstoragestatestorage.md) | [IStateStorage](./kibana-plugin-plugins-kibana_utils-public-state_sync.istatestorage.md) for storing state in browser [guide](https://github.com/elastic/kibana/blob/master/src/plugins/kibana_utils/docs/state_sync/storages/session_storage.md) |
+| [IStateStorage](./kibana-plugin-plugins-kibana_utils-public-state_sync.istatestorage.md) | Any StateStorage have to implement IStateStorage interface StateStorage is responsible for: \* state serialisation / deserialization \* persisting to and retrieving from storageFor an example take a look at already implemented [IKbnUrlStateStorage](./kibana-plugin-plugins-kibana_utils-public-state_sync.ikbnurlstatestorage.md) and [ISessionStorageStateStorage](./kibana-plugin-plugins-kibana_utils-public-state_sync.isessionstoragestatestorage.md) state storages |
+| [IStateSyncConfig](./kibana-plugin-plugins-kibana_utils-public-state_sync.istatesyncconfig.md) | Config for setting up state syncing with |
+| [ISyncStateRef](./kibana-plugin-plugins-kibana_utils-public-state_sync.isyncstateref.md) | |
+
+## Variables
+
+| Variable | Description |
+| --- | --- |
+| [createKbnUrlStateStorage](./kibana-plugin-plugins-kibana_utils-public-state_sync.createkbnurlstatestorage.md) | Creates [IKbnUrlStateStorage](./kibana-plugin-plugins-kibana_utils-public-state_sync.ikbnurlstatestorage.md) state storage |
+| [createSessionStorageStateStorage](./kibana-plugin-plugins-kibana_utils-public-state_sync.createsessionstoragestatestorage.md) | Creates [ISessionStorageStateStorage](./kibana-plugin-plugins-kibana_utils-public-state_sync.isessionstoragestatestorage.md) [guide](https://github.com/elastic/kibana/blob/master/src/plugins/kibana_utils/docs/state_sync/storages/session_storage.md) |
+
+## Type Aliases
+
+| Type Alias | Description |
+| --- | --- |
+| [StartSyncStateFnType](./kibana-plugin-plugins-kibana_utils-public-state_sync.startsyncstatefntype.md) | |
+| [StopSyncStateFnType](./kibana-plugin-plugins-kibana_utils-public-state_sync.stopsyncstatefntype.md) | |
+
diff --git a/docs/development/plugins/kibana_utils/public/state_sync/kibana-plugin-plugins-kibana_utils-public-state_sync.startsyncstatefntype.md b/docs/development/plugins/kibana_utils/public/state_sync/kibana-plugin-plugins-kibana_utils-public-state_sync.startsyncstatefntype.md
new file mode 100644
index 0000000000000..23f71ba330d4b
--- /dev/null
+++ b/docs/development/plugins/kibana_utils/public/state_sync/kibana-plugin-plugins-kibana_utils-public-state_sync.startsyncstatefntype.md
@@ -0,0 +1,12 @@
+
+
+[Home](./index.md) > [kibana-plugin-plugins-kibana\_utils-public-state\_sync](./kibana-plugin-plugins-kibana_utils-public-state_sync.md) > [StartSyncStateFnType](./kibana-plugin-plugins-kibana_utils-public-state_sync.startsyncstatefntype.md)
+
+## StartSyncStateFnType type
+
+
+Signature:
+
+```typescript
+export declare type StartSyncStateFnType = () => void;
+```
diff --git a/docs/development/plugins/kibana_utils/public/state_sync/kibana-plugin-plugins-kibana_utils-public-state_sync.stopsyncstatefntype.md b/docs/development/plugins/kibana_utils/public/state_sync/kibana-plugin-plugins-kibana_utils-public-state_sync.stopsyncstatefntype.md
new file mode 100644
index 0000000000000..69ff6e899e860
--- /dev/null
+++ b/docs/development/plugins/kibana_utils/public/state_sync/kibana-plugin-plugins-kibana_utils-public-state_sync.stopsyncstatefntype.md
@@ -0,0 +1,12 @@
+
+
+[Home](./index.md) > [kibana-plugin-plugins-kibana\_utils-public-state\_sync](./kibana-plugin-plugins-kibana_utils-public-state_sync.md) > [StopSyncStateFnType](./kibana-plugin-plugins-kibana_utils-public-state_sync.stopsyncstatefntype.md)
+
+## StopSyncStateFnType type
+
+
+Signature:
+
+```typescript
+export declare type StopSyncStateFnType = () => void;
+```
diff --git a/docs/development/plugins/kibana_utils/public/state_sync/kibana-plugin-plugins-kibana_utils-public-state_sync.syncstate.md b/docs/development/plugins/kibana_utils/public/state_sync/kibana-plugin-plugins-kibana_utils-public-state_sync.syncstate.md
new file mode 100644
index 0000000000000..d095c3fffc512
--- /dev/null
+++ b/docs/development/plugins/kibana_utils/public/state_sync/kibana-plugin-plugins-kibana_utils-public-state_sync.syncstate.md
@@ -0,0 +1,93 @@
+
+
+[Home](./index.md) > [kibana-plugin-plugins-kibana\_utils-public-state\_sync](./kibana-plugin-plugins-kibana_utils-public-state_sync.md) > [syncState](./kibana-plugin-plugins-kibana_utils-public-state_sync.syncstate.md)
+
+## syncState() function
+
+Utility for syncing application state wrapped in state container with some kind of storage (e.g. URL) Refer [here](https://github.com/elastic/kibana/tree/master/src/plugins/kibana_utils/docs/state_sync) for a complete guide and examples
+
+Signature:
+
+```typescript
+export declare function syncState({ storageKey, stateStorage, stateContainer, }: IStateSyncConfig): ISyncStateRef;
+```
+
+## Parameters
+
+| Parameter | Type | Description |
+| --- | --- | --- |
+| { storageKey, stateStorage, stateContainer, } | IStateSyncConfig<State, IStateStorage> | |
+
+Returns:
+
+`ISyncStateRef`
+
+- [ISyncStateRef](./kibana-plugin-plugins-kibana_utils-public-state_sync.isyncstateref.md)
+
+## Remarks
+
+1. It is responsibility of consumer to make sure that initial app state and storage are in sync before starting syncing No initial sync happens when syncState() is called
+
+## Example 1
+
+1. the simplest use case
+
+```ts
+const stateStorage = createKbnUrlStateStorage();
+syncState({
+ storageKey: '_s',
+ stateContainer,
+ stateStorage
+});
+
+```
+
+## Example 2
+
+2. conditionally configuring sync strategy
+
+```ts
+const stateStorage = createKbnUrlStateStorage({useHash: config.get('state:stateContainerInSessionStorage')})
+syncState({
+ storageKey: '_s',
+ stateContainer,
+ stateStorage
+});
+
+```
+
+## Example 3
+
+3. implementing custom sync strategy
+
+```ts
+const localStorageStateStorage = {
+ set: (storageKey, state) => localStorage.setItem(storageKey, JSON.stringify(state)),
+ get: (storageKey) => localStorage.getItem(storageKey) ? JSON.parse(localStorage.getItem(storageKey)) : null
+};
+syncState({
+ storageKey: '_s',
+ stateContainer,
+ stateStorage: localStorageStateStorage
+});
+
+```
+
+## Example 4
+
+4. Transform state before serialising Useful for: \* Migration / backward compatibility \* Syncing part of state \* Providing default values
+
+```ts
+const stateToStorage = (s) => ({ tab: s.tab });
+syncState({
+ storageKey: '_s',
+ stateContainer: {
+ get: () => stateToStorage(stateContainer.get()),
+ set: stateContainer.set(({ tab }) => ({ ...stateContainer.get(), tab }),
+ state$: stateContainer.state$.pipe(map(stateToStorage))
+ },
+ stateStorage
+});
+
+```
+
diff --git a/docs/development/plugins/kibana_utils/public/state_sync/kibana-plugin-plugins-kibana_utils-public-state_sync.syncstates.md b/docs/development/plugins/kibana_utils/public/state_sync/kibana-plugin-plugins-kibana_utils-public-state_sync.syncstates.md
new file mode 100644
index 0000000000000..87a2449a384df
--- /dev/null
+++ b/docs/development/plugins/kibana_utils/public/state_sync/kibana-plugin-plugins-kibana_utils-public-state_sync.syncstates.md
@@ -0,0 +1,42 @@
+
+
+[Home](./index.md) > [kibana-plugin-plugins-kibana\_utils-public-state\_sync](./kibana-plugin-plugins-kibana_utils-public-state_sync.md) > [syncStates](./kibana-plugin-plugins-kibana_utils-public-state_sync.syncstates.md)
+
+## syncStates() function
+
+Signature:
+
+```typescript
+export declare function syncStates(stateSyncConfigs: Array>): ISyncStateRef;
+```
+
+## Parameters
+
+| Parameter | Type | Description |
+| --- | --- | --- |
+| stateSyncConfigs | Array<IStateSyncConfig<any>> | Array of [IStateSyncConfig](./kibana-plugin-plugins-kibana_utils-public-state_sync.istatesyncconfig.md) to sync |
+
+Returns:
+
+`ISyncStateRef`
+
+## Example
+
+sync multiple different sync configs
+
+```ts
+syncStates([
+ {
+ storageKey: '_s1',
+ stateStorage: stateStorage1,
+ stateContainer: stateContainer1,
+ },
+ {
+ storageKey: '_s2',
+ stateStorage: stateStorage2,
+ stateContainer: stateContainer2,
+ },
+]);
+
+```
+
diff --git a/src/dev/run_check_published_api_changes.ts b/src/dev/run_check_published_api_changes.ts
index 45dafe1b415e3..0aa450c8b002a 100644
--- a/src/dev/run_check_published_api_changes.ts
+++ b/src/dev/run_check_published_api_changes.ts
@@ -43,7 +43,18 @@ import getopts from 'getopts';
*/
const getReportFileName = (folder: string) => {
- return folder.indexOf('public') > -1 ? 'public' : 'server';
+ switch (true) {
+ case folder.includes('public'):
+ return 'public';
+ case folder.includes('server'):
+ return 'server';
+ case folder.includes('common'):
+ return 'common';
+ default:
+ throw new Error(
+ `folder "${folder}" expected to include one of ["public", "server", "common"]`
+ );
+ }
};
const apiExtractorConfig = (folder: string): ExtractorConfig => {
@@ -131,7 +142,7 @@ const runApiExtractor = (
messageCallback: (message: ExtractorMessage) => {
if (message.messageId === 'console-api-report-not-copied') {
// ConsoleMessageId.ApiReportNotCopied
- log.warning(`You have changed the signature of the ${folder} Core API`);
+ log.warning(`You have changed the signature of the ${folder} public API`);
log.warning(
'To accept these changes run `node scripts/check_published_api_changes.js --accept` and then:\n' +
"\t 1. Commit the updated documentation and API review file '" +
@@ -142,7 +153,7 @@ const runApiExtractor = (
message.handled = true;
} else if (message.messageId === 'console-api-report-copied') {
// ConsoleMessageId.ApiReportCopied
- log.warning(`You have changed the signature of the ${folder} Core API`);
+ log.warning(`You have changed the signature of the ${folder} public API`);
log.warning(
"Please commit the updated API documentation and the API review file: '" +
config.reportFilePath
@@ -150,7 +161,7 @@ const runApiExtractor = (
message.handled = true;
} else if (message.messageId === 'console-api-report-unchanged') {
// ConsoleMessageId.ApiReportUnchanged
- log.info(`Core ${folder} API: no changes detected ✔`);
+ log.info(`${folder} API: no changes detected ✔`);
message.handled = true;
}
},
@@ -170,7 +181,7 @@ async function run(
folder: string,
{ log, opts }: { log: ToolingLog; opts: Options }
): Promise {
- log.info(`Core ${folder} API: checking for changes in API signature...`);
+ log.info(`${folder} API: checking for changes in API signature...`);
const { apiReportChanged, succeeded } = runApiExtractor(log, folder, opts.accept);
@@ -188,7 +199,7 @@ async function run(
log.error(e);
return false;
}
- log.info(`Core ${folder} API: updated documentation ✔`);
+ log.info(`${folder} API: updated documentation ✔`);
}
// If the api signature changed or any errors or warnings occured, exit with an error
@@ -224,24 +235,31 @@ async function run(
opts.help = true;
}
- const folders = ['core/public', 'core/server', 'plugins/data/server', 'plugins/data/public'];
+ const core = ['core/public', 'core/server'];
+ const plugins = [
+ 'plugins/data/server',
+ 'plugins/data/public',
+ 'plugins/kibana_utils/common/state_containers',
+ 'plugins/kibana_utils/public/state_sync',
+ ];
+ const folders = [...core, ...plugins];
if (opts.help) {
process.stdout.write(
dedent(chalk`
{dim usage:} node scripts/check_published_api_changes [...options]
- Checks for any changes to the Kibana Core API
+ Checks for any changes to the Kibana shared API
Examples:
- {dim # Checks for any changes to the Kibana Core API}
+ {dim # Checks for any changes to the Kibana shared API}
{dim $} node scripts/check_published_api_changes
- {dim # Checks for any changes to the Kibana Core API and updates the documentation}
+ {dim # Checks for any changes to the Kibana shared API and updates the documentation}
{dim $} node scripts/check_published_api_changes --docs
- {dim # Checks for and automatically accepts and updates documentation for any changes to the Kibana Core API}
+ {dim # Checks for and automatically accepts and updates documentation for any changes to the Kibana shared API}
{dim $} node scripts/check_published_api_changes --accept
{dim # Only checks the core/public directory}
@@ -249,7 +267,7 @@ async function run(
Options:
--accept {dim Accepts all changes by updating the API Review files and documentation}
- --docs {dim Updates the Core API documentation}
+ --docs {dim Updates the API documentation}
--filter {dim RegExp that folder names must match, folders: [${folders.join(', ')}]}
--help {dim Show this message}
`)
@@ -259,20 +277,22 @@ async function run(
}
try {
- log.info(`Core: Building types...`);
+ log.info(`Building types for api extractor...`);
await runBuildTypes();
} catch (e) {
log.error(e);
return false;
}
- const results = await Promise.all(
- folders
- .filter((folder) => (opts.filter.length ? folder.match(opts.filter) : true))
- .map((folder) => run(folder, { log, opts }))
+ const filteredFolders = folders.filter((folder) =>
+ opts.filter.length ? folder.match(opts.filter) : true
);
+ const results = [];
+ for (const folder of filteredFolders) {
+ results.push(await run(folder, { log, opts }));
+ }
- if (results.find((r) => r === false) !== undefined) {
+ if (results.includes(false)) {
process.exitCode = 1;
}
})().catch((e) => {
diff --git a/src/plugins/kibana_utils/common/state_containers/common.api.md b/src/plugins/kibana_utils/common/state_containers/common.api.md
new file mode 100644
index 0000000000000..f85458499b719
--- /dev/null
+++ b/src/plugins/kibana_utils/common/state_containers/common.api.md
@@ -0,0 +1,156 @@
+## API Report File for "kibana"
+
+> Do not edit this file. It is a report generated by [API Extractor](https://api-extractor.com/).
+
+```ts
+
+import { ComponentType } from 'react';
+import { Ensure } from '@kbn/utility-types';
+import { FC } from 'react';
+import { Observable } from 'rxjs';
+import React from 'react';
+
+// @public
+export type BaseState = object;
+
+// @public
+export interface BaseStateContainer {
+ get: () => State;
+ set: (state: State) => void;
+ // Warning: (ae-unresolved-link) The @link reference could not be resolved: The package "kibana" does not have an export "Observable"
+ state$: Observable;
+}
+
+// @public
+export type Comparator = (previous: Result, current: Result) => boolean;
+
+// @public
+export type Connect = (mapStateToProp: MapStateToProps>) => (component: ComponentType) => FC>;
+
+// @public
+export function createStateContainer(defaultState: State): ReduxLikeStateContainer;
+
+// @public
+export function createStateContainer(defaultState: State, pureTransitions: PureTransitions): ReduxLikeStateContainer;
+
+// Warning: (ae-unresolved-link) The @link reference could not be resolved: The package "kibana" does not have an export "PureSelectors"
+//
+// @public
+export function createStateContainer(defaultState: State, pureTransitions: PureTransitions, pureSelectors: PureSelectors, options?: CreateStateContainerOptions): ReduxLikeStateContainer;
+
+// @public
+export interface CreateStateContainerOptions {
+ freeze?: (state: T) => T;
+}
+
+// @public
+export const createStateContainerReactHelpers: >() => {
+ Provider: React.Provider;
+ Consumer: React.Consumer;
+ context: React.Context;
+ useContainer: () => Container;
+ useState: () => UnboxState;
+ useTransitions: () => Container["transitions"];
+ useSelector: (selector: (state: UnboxState) => Result, comparator?: Comparator) => Result;
+ connect: Connect>;
+};
+
+// @public
+export type Dispatch = (action: T) => void;
+
+// @public (undocumented)
+export type EnsurePureSelector = Ensure>;
+
+// Warning: (ae-incompatible-release-tags) The symbol "EnsurePureTransition" is marked as @public, but its signature references "PureTransition" which is marked as @internal
+//
+// @public (undocumented)
+export type EnsurePureTransition = Ensure>;
+
+// @public
+export type MapStateToProps = (state: State) => StateProps;
+
+// Warning: (ae-incompatible-release-tags) The symbol "Middleware" is marked as @public, but its signature references "TransitionDescription" which is marked as @internal
+//
+// @public
+export type Middleware = (store: Pick, 'getState' | 'dispatch'>) => (next: (action: TransitionDescription) => TransitionDescription | any) => Dispatch;
+
+// @public (undocumented)
+export type PureSelector = (state: State) => Selector;
+
+// @public (undocumented)
+export type PureSelectorsToSelectors = {
+ [K in keyof T]: PureSelectorToSelector>;
+};
+
+// @public (undocumented)
+export type PureSelectorToSelector> = ReturnType>;
+
+// @internal (undocumented)
+export type PureTransition = (state: State) => Transition;
+
+// @internal (undocumented)
+export type PureTransitionsToTransitions = {
+ [K in keyof T]: PureTransitionToTransition>;
+};
+
+// @internal (undocumented)
+export type PureTransitionToTransition> = ReturnType;
+
+// Warning: (ae-incompatible-release-tags) The symbol "Reducer" is marked as @public, but its signature references "TransitionDescription" which is marked as @internal
+//
+// @public
+export type Reducer = (state: State, action: TransitionDescription) => State;
+
+// @public
+export interface ReduxLikeStateContainer extends StateContainer {
+ // (undocumented)
+ addMiddleware: (middleware: Middleware) => void;
+ // Warning: (ae-incompatible-release-tags) The symbol "dispatch" is marked as @public, but its signature references "TransitionDescription" which is marked as @internal
+ //
+ // (undocumented)
+ dispatch: (action: TransitionDescription) => void;
+ // (undocumented)
+ getState: () => State;
+ // (undocumented)
+ reducer: Reducer;
+ // (undocumented)
+ replaceReducer: (nextReducer: Reducer) => void;
+ // (undocumented)
+ subscribe: (listener: (state: State) => void) => () => void;
+}
+
+// @public (undocumented)
+export type Selector = (...args: Args) => Result;
+
+// @public
+export interface StateContainer extends BaseStateContainer {
+ // (undocumented)
+ selectors: Readonly>;
+ // Warning: (ae-incompatible-release-tags) The symbol "transitions" is marked as @public, but its signature references "PureTransitionsToTransitions" which is marked as @internal
+ //
+ // (undocumented)
+ transitions: Readonly>;
+}
+
+// @internal (undocumented)
+export type Transition = (...args: Args) => State;
+
+// @internal (undocumented)
+export interface TransitionDescription {
+ // (undocumented)
+ args: Args;
+ // (undocumented)
+ type: Type;
+}
+
+// @public
+export type UnboxState> = Container extends StateContainer ? T : never;
+
+// @public
+export const useContainerSelector: , Result>(container: Container, selector: (state: UnboxState) => Result, comparator?: Comparator) => Result;
+
+// @public
+export const useContainerState: >(container: Container) => UnboxState;
+
+
+```
diff --git a/src/plugins/kibana_utils/common/state_containers/create_state_container.ts b/src/plugins/kibana_utils/common/state_containers/create_state_container.ts
index 69e204a642f93..6bb6e66616c91 100644
--- a/src/plugins/kibana_utils/common/state_containers/create_state_container.ts
+++ b/src/plugins/kibana_utils/common/state_containers/create_state_container.ts
@@ -44,29 +44,57 @@ const defaultFreeze: (value: T) => T = isProduction
return value as T;
};
+/**
+ * State container options
+ * @public
+ */
export interface CreateStateContainerOptions {
/**
- * Function to use when freezing state. Supply identity function
+ * Function to use when freezing state. Supply identity function.
+ * If not provided, default `deepFreeze` is used.
*
+ * @example
+ * If you expect that your state will be mutated externally an you cannot
+ * prevent that
* ```ts
* {
* freeze: state => state,
* }
* ```
- *
- * if you expect that your state will be mutated externally an you cannot
- * prevent that.
*/
freeze?: (state: T) => T;
}
+/**
+ * Creates a state container without transitions and without selectors.
+ * @param defaultState - initial state
+ * @typeParam State - shape of state
+ * @public
+ */
export function createStateContainer(
defaultState: State
): ReduxLikeStateContainer;
+/**
+ * Creates a state container with transitions, but without selectors.
+ * @param defaultState - initial state
+ * @param pureTransitions - state transitions configuration object. Map of {@link PureTransition}.
+ * @typeParam State - shape of state
+ * @public
+ */
export function createStateContainer(
defaultState: State,
pureTransitions: PureTransitions
): ReduxLikeStateContainer;
+
+/**
+ * Creates a state container with transitions and selectors.
+ * @param defaultState - initial state
+ * @param pureTransitions - state transitions configuration object. Map of {@link PureTransition}.
+ * @param pureSelectors - state selectors configuration object. Map of {@link PureSelectors}.
+ * @param options - state container options {@link CreateStateContainerOptions}
+ * @typeParam State - shape of state
+ * @public
+ */
export function createStateContainer<
State extends BaseState,
PureTransitions extends object,
@@ -77,14 +105,17 @@ export function createStateContainer<
pureSelectors: PureSelectors,
options?: CreateStateContainerOptions
): ReduxLikeStateContainer;
+/**
+ * @internal
+ */
export function createStateContainer<
State extends BaseState,
PureTransitions extends object,
PureSelectors extends object
>(
defaultState: State,
- pureTransitions: PureTransitions = {} as PureTransitions,
- pureSelectors: PureSelectors = {} as PureSelectors,
+ pureTransitions: PureTransitions = {} as PureTransitions, // TODO: https://github.com/elastic/kibana/issues/54439
+ pureSelectors: PureSelectors = {} as PureSelectors, // TODO: https://github.com/elastic/kibana/issues/54439
options: CreateStateContainerOptions = {}
): ReduxLikeStateContainer {
const { freeze = defaultFreeze } = options;
diff --git a/src/plugins/kibana_utils/common/state_containers/create_state_container_react_helpers.ts b/src/plugins/kibana_utils/common/state_containers/create_state_container_react_helpers.ts
index 8536f97e00ed0..4712c2fc233f8 100644
--- a/src/plugins/kibana_utils/common/state_containers/create_state_container_react_helpers.ts
+++ b/src/plugins/kibana_utils/common/state_containers/create_state_container_react_helpers.ts
@@ -17,7 +17,7 @@
* under the License.
*/
-import * as React from 'react';
+import React from 'react';
import useObservable from 'react-use/lib/useObservable';
import defaultComparator from 'fast-deep-equal';
import { Comparator, Connect, StateContainer, UnboxState } from './types';
@@ -25,23 +25,27 @@ import { Comparator, Connect, StateContainer, UnboxState } from './types';
const { useContext, useLayoutEffect, useRef, createElement: h } = React;
/**
- * Returns the latest state of a state container.
+ * React hooks that returns the latest state of a {@link StateContainer}.
*
- * @param container State container which state to track.
+ * @param container - {@link StateContainer} which state to track.
+ * @returns - latest {@link StateContainer} state
+ * @public
*/
export const useContainerState = >(
container: Container
): UnboxState => useObservable(container.state$, container.get());
/**
- * Apply selector to state container to extract only needed information. Will
+ * React hook to apply selector to state container to extract only needed information. Will
* re-render your component only when the section changes.
*
- * @param container State container which state to track.
- * @param selector Function used to pick parts of state.
- * @param comparator Comparator function used to memoize previous result, to not
+ * @param container - {@link StateContainer} which state to track.
+ * @param selector - Function used to pick parts of state.
+ * @param comparator - {@link Comparator} function used to memoize previous result, to not
* re-render React component if state did not change. By default uses
* `fast-deep-equal` package.
+ * @returns - result of a selector(state)
+ * @public
*/
export const useContainerSelector = , Result>(
container: Container,
@@ -68,6 +72,11 @@ export const useContainerSelector = ,
return value;
};
+/**
+ * Creates helpers for using {@link StateContainer | State Containers} with react
+ * Refer to {@link https://github.com/elastic/kibana/blob/master/src/plugins/kibana_utils/docs/state_containers/react.md | guide} for details
+ * @public
+ */
export const createStateContainerReactHelpers = >() => {
const context = React.createContext(null as any);
diff --git a/src/plugins/kibana_utils/common/state_containers/index.ts b/src/plugins/kibana_utils/common/state_containers/index.ts
index 43e204ecb79f7..e2e056bd67da2 100644
--- a/src/plugins/kibana_utils/common/state_containers/index.ts
+++ b/src/plugins/kibana_utils/common/state_containers/index.ts
@@ -17,6 +17,40 @@
* under the License.
*/
-export * from './types';
-export * from './create_state_container';
-export * from './create_state_container_react_helpers';
+/**
+ * State containers are Redux-store-like objects meant to help you manage state in your services or apps.
+ * Refer to {@link https://github.com/elastic/kibana/tree/master/src/plugins/kibana_utils/docs/state_containers | guides and examples} for more info
+ *
+ * @packageDocumentation
+ */
+
+export {
+ BaseState,
+ BaseStateContainer,
+ TransitionDescription,
+ StateContainer,
+ ReduxLikeStateContainer,
+ Dispatch,
+ Middleware,
+ Selector,
+ Comparator,
+ MapStateToProps,
+ Connect,
+ Reducer,
+ UnboxState,
+ PureSelectorToSelector,
+ PureSelectorsToSelectors,
+ EnsurePureSelector,
+ PureTransitionsToTransitions,
+ PureTransitionToTransition,
+ EnsurePureTransition,
+ PureSelector,
+ PureTransition,
+ Transition,
+} from './types';
+export { createStateContainer, CreateStateContainerOptions } from './create_state_container';
+export {
+ createStateContainerReactHelpers,
+ useContainerSelector,
+ useContainerState,
+} from './create_state_container_react_helpers';
diff --git a/src/plugins/kibana_utils/common/state_containers/types.ts b/src/plugins/kibana_utils/common/state_containers/types.ts
index 29ffa4cd486b5..b6adb89d9be7b 100644
--- a/src/plugins/kibana_utils/common/state_containers/types.ts
+++ b/src/plugins/kibana_utils/common/state_containers/types.ts
@@ -19,28 +19,76 @@
import { Observable } from 'rxjs';
import { Ensure } from '@kbn/utility-types';
+import { FC, ComponentType } from 'react';
+/**
+ * Base {@link StateContainer} state shape
+ * @public
+ */
export type BaseState = object;
+
+/**
+ * @internal
+ */
export interface TransitionDescription {
type: Type;
args: Args;
}
+/**
+ * @internal
+ */
export type Transition = (...args: Args) => State;
+/**
+ * @internal
+ */
export type PureTransition = (
state: State
) => Transition;
+/**
+ * @public
+ */
export type EnsurePureTransition = Ensure>;
+/**
+ * @internal
+ */
export type PureTransitionToTransition> = ReturnType;
+/**
+ * @internal
+ */
export type PureTransitionsToTransitions = {
[K in keyof T]: PureTransitionToTransition>;
};
+/**
+ * Base state container shape without transitions or selectors
+ * @typeParam State - Shape of state in the container. Have to match {@link BaseState} constraint
+ * @public
+ */
export interface BaseStateContainer {
+ /**
+ * Retrieves current state from the container
+ * @returns current state
+ * @public
+ */
get: () => State;
+ /**
+ * Sets state into container
+ * @param state - new state to set
+ */
set: (state: State) => void;
+ /**
+ * {@link Observable} of state
+ */
state$: Observable;
}
+/**
+ * Fully featured state container with {@link Selector | Selectors} and {@link Transition | Transitions}. Extends {@link BaseStateContainer}.
+ * @typeParam State - Shape of state in the container. Has to match {@link BaseState} constraint
+ * @typeParam PureTransitions - map of {@link PureTransition | transitions} to provide on state container
+ * @typeParam PureSelectors - map of {@link PureSelector | selectors} to provide on state container
+ * @public
+ */
export interface StateContainer<
State extends BaseState,
PureTransitions extends object = object,
@@ -50,6 +98,11 @@ export interface StateContainer<
selectors: Readonly>;
}
+/**
+ * Fully featured state container which matches Redux store interface. Extends {@link StateContainer}.
+ * Allows to use state container with redux libraries.
+ * @public
+ */
export interface ReduxLikeStateContainer<
State extends BaseState,
PureTransitions extends object = {},
@@ -63,45 +116,92 @@ export interface ReduxLikeStateContainer<
subscribe: (listener: (state: State) => void) => () => void;
}
+/**
+ * Redux like dispatch
+ * @public
+ */
export type Dispatch = (action: T) => void;
+/**
+ * Redux like Middleware
+ * @public
+ */
export type Middleware = (
store: Pick, 'getState' | 'dispatch'>
) => (
next: (action: TransitionDescription) => TransitionDescription | any
) => Dispatch;
-
+/**
+ * Redux like Reducer
+ * @public
+ */
export type Reducer = (
state: State,
action: TransitionDescription
) => State;
+/**
+ * Utility type for inferring state shape from {@link StateContainer}
+ * @public
+ */
export type UnboxState<
Container extends StateContainer
> = Container extends StateContainer ? T : never;
+/**
+ * Utility type for inferring transitions type from {@link StateContainer}
+ * @public
+ */
export type UnboxTransitions<
Container extends StateContainer
> = Container extends StateContainer ? T : never;
+/**
+ * @public
+ */
export type Selector = (...args: Args) => Result;
+/**
+ * @public
+ */
export type PureSelector = (
state: State
) => Selector;
+/**
+ * @public
+ */
export type EnsurePureSelector = Ensure>;
+/**
+ * @public
+ */
export type PureSelectorToSelector> = ReturnType<
EnsurePureSelector
>;
+/**
+ * @public
+ */
export type PureSelectorsToSelectors = {
[K in keyof T]: PureSelectorToSelector>;
};
+/**
+ * Used to compare state, see {@link useContainerSelector}.
+ * @public
+ */
export type Comparator = (previous: Result, current: Result) => boolean;
-
+/**
+ * State container state to component props mapper.
+ * See {@link Connect}
+ * @public
+ */
export type MapStateToProps = (
state: State
) => StateProps;
+/**
+ * Similar to `connect` from react-redux,
+ * allows to map state from state container to component's props.
+ * @public
+ */
export type Connect = <
Props extends object,
StatePropKeys extends keyof Props
>(
mapStateToProp: MapStateToProps>
-) => (component: React.ComponentType) => React.FC>;
+) => (component: ComponentType) => FC>;
diff --git a/src/plugins/kibana_utils/public/state_sync/index.ts b/src/plugins/kibana_utils/public/state_sync/index.ts
index 1dfa998c5bb9d..da60b36255367 100644
--- a/src/plugins/kibana_utils/public/state_sync/index.ts
+++ b/src/plugins/kibana_utils/public/state_sync/index.ts
@@ -17,11 +17,32 @@
* under the License.
*/
+/**
+ * State syncing utilities are a set of helpers for syncing your application state
+ * with browser URL or browser storage.
+ *
+ * They are designed to work together with {@link https://github.com/elastic/kibana/tree/master/src/plugins/kibana_utils/docs/state_containers | state containers}. But state containers are not required.
+ *
+ * State syncing utilities include:
+ *
+ * *{@link syncState} util which:
+ * * Subscribes to state changes and pushes them to state storage.
+ * * Optionally subscribes to state storage changes and pushes them to state.
+ * * Two types of storages compatible with `syncState`:
+ * * {@link IKbnUrlStateStorage} - Serializes state and persists it to URL's query param in rison or hashed format.
+ * Listens for state updates in the URL and pushes them back to state.
+ * * {@link ISessionStorageStateStorage} - Serializes state and persists it to browser storage.
+ *
+ * Refer {@link https://github.com/elastic/kibana/tree/master/src/plugins/kibana_utils/docs/state_sync | here} for a complete guide and examples.
+ * @packageDocumentation
+ */
+
export {
createSessionStorageStateStorage,
createKbnUrlStateStorage,
IKbnUrlStateStorage,
ISessionStorageStateStorage,
+ IStateStorage,
} from './state_sync_state_storage';
export { IStateSyncConfig, INullableBaseStateContainer } from './types';
export {
diff --git a/src/plugins/kibana_utils/public/state_sync/public.api.md b/src/plugins/kibana_utils/public/state_sync/public.api.md
new file mode 100644
index 0000000000000..c174ba798d01a
--- /dev/null
+++ b/src/plugins/kibana_utils/public/state_sync/public.api.md
@@ -0,0 +1,97 @@
+## API Report File for "kibana"
+
+> Do not edit this file. It is a report generated by [API Extractor](https://api-extractor.com/).
+
+```ts
+
+import { History } from 'history';
+import { Observable } from 'rxjs';
+
+// @public
+export const createKbnUrlStateStorage: ({ useHash, history }?: {
+ useHash: boolean;
+ history?: History | undefined;
+}) => IKbnUrlStateStorage;
+
+// Warning: (ae-unresolved-link) The @link reference could not be resolved: The package "kibana" does not have an export "Storage"
+//
+// @public
+export const createSessionStorageStateStorage: (storage?: Storage) => ISessionStorageStateStorage;
+
+// @public
+export interface IKbnUrlStateStorage extends IStateStorage {
+ cancel: () => void;
+ // (undocumented)
+ change$: (key: string) => Observable;
+ flush: (opts?: {
+ replace?: boolean;
+ }) => boolean;
+ // (undocumented)
+ get: (key: string) => State | null;
+ // (undocumented)
+ set: (key: string, state: State, opts?: {
+ replace: boolean;
+ }) => Promise;
+}
+
+// Warning: (ae-forgotten-export) The symbol "BaseState" needs to be exported by the entry point index.d.ts
+// Warning: (ae-forgotten-export) The symbol "BaseStateContainer" needs to be exported by the entry point index.d.ts
+// Warning: (ae-unresolved-link) The @link reference could not be resolved: The package "kibana" does not have an export "BaseStateContainer"
+//
+// @public
+export interface INullableBaseStateContainer extends BaseStateContainer {
+ // (undocumented)
+ set: (state: State | null) => void;
+}
+
+// Warning: (ae-unresolved-link) The @link reference could not be resolved: The package "kibana" does not have an export "Storage"
+//
+// @public
+export interface ISessionStorageStateStorage extends IStateStorage {
+ // (undocumented)
+ get: (key: string) => State | null;
+ // (undocumented)
+ set: (key: string, state: State) => void;
+}
+
+// @public
+export interface IStateStorage {
+ cancel?: () => void;
+ change$?: (key: string) => Observable;
+ get: (key: string) => State | null;
+ set: (key: string, state: State) => any;
+}
+
+// Warning: (ae-unresolved-link) The @link reference could not be resolved: The package "kibana" does not have an export "stateSync"
+// Warning: (ae-unresolved-link) The @link reference could not be resolved: The package "kibana" does not have an export "BaseState"
+//
+// @public
+export interface IStateSyncConfig {
+ // Warning: (ae-unresolved-link) The @link reference could not be resolved: The package "kibana" does not have an export "BaseStateContainer"
+ stateContainer: INullableBaseStateContainer;
+ stateStorage: StateStorage;
+ storageKey: string;
+}
+
+// @public (undocumented)
+export interface ISyncStateRef {
+ start: StartSyncStateFnType;
+ stop: StopSyncStateFnType;
+}
+
+// @public (undocumented)
+export type StartSyncStateFnType = () => void;
+
+// @public (undocumented)
+export type StopSyncStateFnType = () => void;
+
+// @public
+export function syncState({ storageKey, stateStorage, stateContainer, }: IStateSyncConfig): ISyncStateRef;
+
+// Warning: (ae-missing-release-tag) "syncStates" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal)
+//
+// @public (undocumented)
+export function syncStates(stateSyncConfigs: Array>): ISyncStateRef;
+
+
+```
diff --git a/src/plugins/kibana_utils/public/state_sync/state_sync.ts b/src/plugins/kibana_utils/public/state_sync/state_sync.ts
index 4c400d47b8e78..bbcaaedd0d8bf 100644
--- a/src/plugins/kibana_utils/public/state_sync/state_sync.ts
+++ b/src/plugins/kibana_utils/public/state_sync/state_sync.ts
@@ -26,29 +26,61 @@ import { distinctUntilChangedWithInitialValue } from '../../common';
import { BaseState } from '../../common/state_containers';
import { applyDiff } from '../state_management/utils/diff_object';
+/**
+ * @public
+ */
+export type StopSyncStateFnType = () => void;
+/**
+ * @public
+ */
+export type StartSyncStateFnType = () => void;
+
+/**
+ * @public
+ */
+export interface ISyncStateRef {
+ /**
+ * stop state syncing
+ */
+ stop: StopSyncStateFnType;
+ /**
+ * start state syncing
+ */
+ start: StartSyncStateFnType;
+}
+
/**
* Utility for syncing application state wrapped in state container
* with some kind of storage (e.g. URL)
*
- * Examples:
+ * Go {@link https://github.com/elastic/kibana/tree/master/src/plugins/kibana_utils/docs/state_sync | here} for a complete guide and examples.
*
- * 1. the simplest use case
+ * @example
+ *
+ * the simplest use case
+ * ```ts
* const stateStorage = createKbnUrlStateStorage();
* syncState({
* storageKey: '_s',
* stateContainer,
* stateStorage
* });
+ * ```
*
- * 2. conditionally configuring sync strategy
+ * @example
+ * conditionally configuring sync strategy
+ * ```ts
* const stateStorage = createKbnUrlStateStorage({useHash: config.get('state:stateContainerInSessionStorage')})
* syncState({
* storageKey: '_s',
* stateContainer,
* stateStorage
* });
+ * ```
*
- * 3. implementing custom sync strategy
+ * @example
+ * implementing custom sync strategy
+ * ```ts
* const localStorageStateStorage = {
* set: (storageKey, state) => localStorage.setItem(storageKey, JSON.stringify(state)),
* get: (storageKey) => localStorage.getItem(storageKey) ? JSON.parse(localStorage.getItem(storageKey)) : null
@@ -58,12 +90,15 @@ import { applyDiff } from '../state_management/utils/diff_object';
* stateContainer,
* stateStorage: localStorageStateStorage
* });
+ * ```
*
- * 4. Transform state before serialising
+ * @example
+ * transforming state before serialising
* Useful for:
* * Migration / backward compatibility
* * Syncing part of state
* * Providing default values
+ * ```ts
* const stateToStorage = (s) => ({ tab: s.tab });
* syncState({
* storageKey: '_s',
@@ -74,20 +109,12 @@ import { applyDiff } from '../state_management/utils/diff_object';
* },
* stateStorage
* });
+ * ```
*
- * Caveats:
- *
- * 1. It is responsibility of consumer to make sure that initial app state and storage are in sync before starting syncing
- * No initial sync happens when syncState() is called
+ * @param - syncing config {@link IStateSyncConfig}
+ * @returns - {@link ISyncStateRef}
+ * @public
*/
-export type StopSyncStateFnType = () => void;
-export type StartSyncStateFnType = () => void;
-export interface ISyncStateRef {
- // stop syncing state with storage
- stop: StopSyncStateFnType;
- // start syncing state with storage
- start: StartSyncStateFnType;
-}
export function syncState<
State extends BaseState,
StateStorage extends IStateStorage = IStateStorage
@@ -159,7 +186,9 @@ export function syncState<
}
/**
- * multiple different sync configs
+ * @example
+ * sync multiple different sync configs
+ * ```ts
* syncStates([
* {
* storageKey: '_s1',
@@ -172,7 +201,8 @@ export function syncState<
* stateContainer: stateContainer2,
* },
* ]);
- * @param stateSyncConfigs - Array of IStateSyncConfig to sync
+ * ```
+ * @param stateSyncConfigs - Array of {@link IStateSyncConfig} to sync
*/
export function syncStates(stateSyncConfigs: Array>): ISyncStateRef {
const syncRefs = stateSyncConfigs.map((config) => syncState(config));
diff --git a/src/plugins/kibana_utils/public/state_sync/state_sync_state_storage/create_kbn_url_state_storage.ts b/src/plugins/kibana_utils/public/state_sync/state_sync_state_storage/create_kbn_url_state_storage.ts
index 67c1bf26aa251..0c74e1eb9f421 100644
--- a/src/plugins/kibana_utils/public/state_sync/state_sync_state_storage/create_kbn_url_state_storage.ts
+++ b/src/plugins/kibana_utils/public/state_sync/state_sync_state_storage/create_kbn_url_state_storage.ts
@@ -27,6 +27,19 @@ import {
setStateToKbnUrl,
} from '../../state_management/url';
+/**
+ * KbnUrlStateStorage is a state storage for {@link syncState} utility which:
+ *
+ * 1. Keeps state in sync with the URL.
+ * 2. Serializes data and stores it in the URL in one of the supported formats:
+ * * Rison encoded.
+ * * Hashed URL: In URL we store only the hash from the serialized state, but the state itself is stored in sessionStorage. See Kibana's `state:storeInSessionStorage` advanced option for more context.
+ * 3. Takes care of listening to the URL updates and notifies state about the updates.
+ * 4. Takes care of batching URL updates to prevent redundant browser history records.
+ *
+ * {@link https://github.com/elastic/kibana/blob/master/src/plugins/kibana_utils/docs/state_sync/storages/kbn_url_storage.md | Refer to this guide for more info}
+ * @public
+ */
export interface IKbnUrlStateStorage extends IStateStorage {
set: (
key: string,
@@ -36,18 +49,23 @@ export interface IKbnUrlStateStorage extends IStateStorage {
get: (key: string) => State | null;
change$: (key: string) => Observable;
- // cancels any pending url updates
+ /**
+ * cancels any pending url updates
+ */
cancel: () => void;
- // synchronously runs any pending url updates
- // returned boolean indicates if change occurred
+ /**
+ * Synchronously runs any pending url updates, returned boolean indicates if change occurred.
+ * @param opts: {replace? boolean} - allows to specify if push or replace should be used for flushing update
+ * @returns boolean - indicates if there was an update to flush
+ */
flush: (opts?: { replace?: boolean }) => boolean;
}
/**
- * Implements syncing to/from url strategies.
- * Replicates what was implemented in state (AppState, GlobalState)
- * Both expanded and hashed use cases
+ * Creates {@link IKbnUrlStateStorage} state storage
+ * @returns - {@link IKbnUrlStateStorage}
+ * @public
*/
export const createKbnUrlStateStorage = (
{ useHash = false, history }: { useHash: boolean; history?: History } = { useHash: false }
diff --git a/src/plugins/kibana_utils/public/state_sync/state_sync_state_storage/create_session_storage_state_storage.ts b/src/plugins/kibana_utils/public/state_sync/state_sync_state_storage/create_session_storage_state_storage.ts
index 00edfdfd1ed61..60ff211cd590a 100644
--- a/src/plugins/kibana_utils/public/state_sync/state_sync_state_storage/create_session_storage_state_storage.ts
+++ b/src/plugins/kibana_utils/public/state_sync/state_sync_state_storage/create_session_storage_state_storage.ts
@@ -19,11 +19,23 @@
import { IStateStorage } from './types';
+/**
+ * {@link IStateStorage} for storing state in browser {@link Storage}
+ * {@link https://github.com/elastic/kibana/blob/master/src/plugins/kibana_utils/docs/state_sync/storages/session_storage.md | guide}
+ * @public
+ */
export interface ISessionStorageStateStorage extends IStateStorage {
set: (key: string, state: State) => void;
get: (key: string) => State | null;
}
+/**
+ * Creates {@link ISessionStorageStateStorage}
+ * {@link https://github.com/elastic/kibana/blob/master/src/plugins/kibana_utils/docs/state_sync/storages/session_storage.md | guide}
+ * @param storage - Option {@link Storage} to use for storing state. By default window.sessionStorage.
+ * @returns - {@link ISessionStorageStateStorage}
+ * @public
+ */
export const createSessionStorageStateStorage = (
storage: Storage = window.sessionStorage
): ISessionStorageStateStorage => {
diff --git a/src/plugins/kibana_utils/public/state_sync/state_sync_state_storage/types.ts b/src/plugins/kibana_utils/public/state_sync/state_sync_state_storage/types.ts
index add1dc259be45..bae5dc2067183 100644
--- a/src/plugins/kibana_utils/public/state_sync/state_sync_state_storage/types.ts
+++ b/src/plugins/kibana_utils/public/state_sync/state_sync_state_storage/types.ts
@@ -25,7 +25,8 @@ import { Observable } from 'rxjs';
* * state serialisation / deserialization
* * persisting to and retrieving from storage
*
- * For an example take a look at already implemented KbnUrl state storage
+ * For an example take a look at already implemented {@link IKbnUrlStateStorage} and {@link ISessionStorageStateStorage} state storages
+ * @public
*/
export interface IStateStorage {
/**
@@ -45,7 +46,7 @@ export interface IStateStorage {
/**
* Optional method to cancel any pending activity
- * syncState() will call it, if it is provided by IStateStorage
+ * {@link syncState} will call it during destroy, if it is provided by IStateStorage
*/
cancel?: () => void;
}
diff --git a/src/plugins/kibana_utils/public/state_sync/types.ts b/src/plugins/kibana_utils/public/state_sync/types.ts
index 2acb466d92e92..e879ab7c55b2f 100644
--- a/src/plugins/kibana_utils/public/state_sync/types.ts
+++ b/src/plugins/kibana_utils/public/state_sync/types.ts
@@ -20,15 +20,26 @@
import { BaseState, BaseStateContainer } from '../../common/state_containers/types';
import { IStateStorage } from './state_sync_state_storage';
+/**
+ * Extension of {@link BaseStateContainer} with one constraint: set state should handle `null` as incoming state
+ * @remarks
+ * State container for `stateSync()` have to accept `null`
+ * for example, `set()` implementation could handle null and fallback to some default state
+ * this is required to handle edge case, when state in storage becomes empty and syncing is in progress.
+ * State container will be notified about about storage becoming empty with null passed in.
+ * @public
+ */
export interface INullableBaseStateContainer
extends BaseStateContainer {
- // State container for stateSync() have to accept "null"
- // for example, set() implementation could handle null and fallback to some default state
- // this is required to handle edge case, when state in storage becomes empty and syncing is in progress.
- // state container will be notified about about storage becoming empty with null passed in
set: (state: State | null) => void;
}
+/**
+ * Config for setting up state syncing with {@link stateSync}
+ * @typeParam State - State shape to sync to storage, has to extend {@link BaseState}
+ * @typeParam StateStorage - used state storage to sync state with
+ * @public
+ */
export interface IStateSyncConfig<
State extends BaseState,
StateStorage extends IStateStorage = IStateStorage
@@ -39,8 +50,8 @@ export interface IStateSyncConfig<
*/
storageKey: string;
/**
- * State container to keep in sync with storage, have to implement INullableBaseStateContainer interface
- * The idea is that ./state_containers/ should be used as a state container,
+ * State container to keep in sync with storage, have to implement {@link INullableBaseStateContainer} interface
+ * We encourage to use {@link BaseStateContainer} as a state container,
* but it is also possible to implement own custom container for advanced use cases
*/
stateContainer: INullableBaseStateContainer;
@@ -49,7 +60,7 @@ export interface IStateSyncConfig<
* State storage is responsible for serialising / deserialising and persisting / retrieving stored state
*
* There are common strategies already implemented:
- * './state_sync_state_storage/'
+ * see {@link IKbnUrlStateStorage}
* which replicate what State (AppState, GlobalState) in legacy world did
*
*/