@panneau/core 4.0.11 → 4.0.14

package/lib/hooks.js

@@ -1,1168 +0,0 @@
-'use strict';
-
-var react = require('react');
-var core = require('@panneau/core');
-var utils = require('@panneau/core/utils');
-var _defineProperty = require('@babel/runtime/helpers/defineProperty');
-var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
-var _objectSpread = require('@babel/runtime/helpers/objectSpread2');
-var _toConsumableArray = require('@babel/runtime/helpers/toConsumableArray');
-var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
-var fetch = require('@folklore/fetch');
-var get = require('lodash-es/get');
-var isArray = require('lodash-es/isArray');
-var isObject = require('lodash-es/isObject');
-var isString = require('lodash-es/isString');
-var contexts = require('@panneau/core/contexts');
-var dayjs = require('dayjs');
-var reactIntl = require('react-intl');
-var cssMediaquery = require('css-mediaquery');
-
-function useAnimationFrame(onFrame) {
-  var _ref = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {},
-    _ref$disabled = _ref.disabled,
-    disabled = _ref$disabled === void 0 ? false : _ref$disabled;
-  var requestRef = react.useRef(null);
-  var startTimeRef = react.useRef(null);
-  var _callback = function callback(time) {
-    if (!startTimeRef.current) {
-      startTimeRef.current = time;
-    }
-    var progress = time - startTimeRef.current;
-    onFrame(progress);
-    requestRef.current = requestAnimationFrame(_callback);
-  };
-  react.useEffect(function () {
-    if (!disabled) {
-      requestRef.current = requestAnimationFrame(_callback);
-    }
-    return function () {
-      if (requestRef.current !== null) {
-        cancelAnimationFrame(requestRef.current);
-      }
-    };
-  }, [disabled]);
-}
-
-var useFormattedDate = function useFormattedDate() {
-  var _ref = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
-    _ref$format = _ref.format,
-    format = _ref$format === void 0 ? null : _ref$format,
-    _ref$showToday = _ref.showToday,
-    showToday = _ref$showToday === void 0 ? true : _ref$showToday;
-  var intl = reactIntl.useIntl();
-  var today = dayjs();
-  return react.useCallback(function (date) {
-    var dateToFormat = isString(date) ? dayjs(date) : date;
-    if (showToday && dateToFormat.format('YYYY-MM-DD') === today.format('YYYY-MM-DD')) {
-      return intl.formatMessage({
-        "id": "v4Qtl9",
-        "defaultMessage": [{
-          "type": 0,
-          "value": "Today"
-        }]
-      });
-    }
-    return intl.formatDate(dayjs(date).toDate(), _objectSpread({
-      year: 'numeric',
-      month: 'long',
-      day: '2-digit'
-    }, format));
-  }, [today, showToday, format]);
-};
-var useFormattedTime = function useFormattedTime() {
-  var _ref2 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
-    _ref2$format = _ref2.format,
-    format = _ref2$format === void 0 ? null : _ref2$format,
-    _ref2$showNow = _ref2.showNow,
-    showNow = _ref2$showNow === void 0 ? true : _ref2$showNow,
-    _ref2$timeGap = _ref2.timeGap,
-    timeGap = _ref2$timeGap === void 0 ? 2 : _ref2$timeGap;
-  var intl = reactIntl.useIntl();
-  var now = dayjs();
-  return react.useCallback(function (date) {
-    var dateToFormat = isString(date) ? dayjs(date) : date;
-    if (showNow && dateToFormat.format('YYYY-MM-DD') === now.format('YYYY-MM-DD') && dateToFormat.hour() === now.hour() && dateToFormat.minute() > now.minute() - timeGap && dateToFormat.minute() < now.minute() + timeGap) {
-      return intl.formatMessage({
-        "id": "3na7F8",
-        "defaultMessage": [{
-          "type": 0,
-          "value": "Now"
-        }]
-      });
-    }
-    return intl.formatTime(dateToFormat.toDate(), _objectSpread({
-      hour: 'numeric',
-      minute: 'numeric'
-    }, format));
-  }, [now, showNow, timeGap, format]);
-};
-
-var eventsManager$1 = typeof document !== 'undefined' ? new core.EventsManager(document) : null;
-var useDocumentEvent = utils.createUseEvent(eventsManager$1);
-
-var _excluded$1 = ["value", "errors", "onChange"];
-// prettier-ignore
-var _getFieldsPropsFromFields = function getFieldsPropsFromFields(fields, _ref) {
-  var value = _ref.value,
-    errors = _ref.errors,
-    _onChange = _ref.onChange,
-    props = _objectWithoutProperties(_ref, _excluded$1);
-  var locales = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : [];
-  return (fields || []).reduce(function (allFields, field) {
-    var _ref2 = isObject(field) ? field : {},
-      _ref2$name = _ref2.name,
-      name = _ref2$name === void 0 ? isString(field) ? field : null : _ref2$name,
-      _ref2$fields = _ref2.fields,
-      fieldFields = _ref2$fields === void 0 ? null : _ref2$fields,
-      _ref2$component = _ref2.component,
-      component = _ref2$component === void 0 ? null : _ref2$component;
-    var fieldErrors = errors !== null ? errors[name] || [] : [];
-    var finalErrors = component === 'localized' ? (locales || []).reduce(function (previousErrors, locale) {
-      var items = errors !== null ? get(errors, "".concat(name, ".").concat(locale), []) || [] : [];
-      var finalItems = isArray(items) ? items : [items];
-      var finalPrevious = isArray(previousErrors) ? previousErrors : [];
-      return [].concat(_toConsumableArray(finalPrevious), _toConsumableArray(finalItems));
-    }, fieldErrors) : fieldErrors;
-    var subfieldErrors = errors;
-    if (errors !== null && name !== null) {
-      subfieldErrors = Object.keys(errors).reduce(function (acc, key) {
-        if (key === name) {
-          acc[key] = errors[key];
-        }
-        if (key.startsWith("".concat(name, ".")) || key.startsWith("".concat(name, "["))) {
-          var finalKey = key.substring(name.length + 1);
-          acc[finalKey] = errors[key];
-        }
-        return acc;
-      }, {});
-    }
-    return [].concat(_toConsumableArray(allFields), [_objectSpread(_objectSpread({}, isObject(field) ? field : null), {}, {
-      name: name,
-      component: component,
-      value: value !== null && name !== null ? value[name] || null : null,
-      errors: finalErrors.length > 0 ? finalErrors : null,
-      onChange: function onChange(fieldValue) {
-        return _onChange(name, fieldValue);
-      },
-      fields: fieldFields !== null && isArray(fieldFields) ? _getFieldsPropsFromFields(fieldFields, {
-        value: value !== null && name !== null && isObject(value[name]) ? value[name] : null,
-        errors: subfieldErrors,
-        onChange: _onChange
-      }, locales) : null
-    }, props)]);
-  }, []);
-};
-var useForm = function useForm() {
-  var opts = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-  var _opts$fields = opts.fields,
-    fields = _opts$fields === void 0 ? [] : _opts$fields,
-    _opts$action = opts.action,
-    action = _opts$action === void 0 ? null : _opts$action,
-    _opts$postForm = opts.postForm,
-    postForm = _opts$postForm === void 0 ? null : _opts$postForm,
-    _opts$initialErrors = opts.initialErrors,
-    initialErrors = _opts$initialErrors === void 0 ? null : _opts$initialErrors,
-    _opts$errors = opts.errors,
-    providedErrors = _opts$errors === void 0 ? null : _opts$errors,
-    _opts$setErrors = opts.setErrors,
-    setProvidedErrors = _opts$setErrors === void 0 ? null : _opts$setErrors,
-    _opts$initialGeneralE = opts.initialGeneralError,
-    initialGeneralError = _opts$initialGeneralE === void 0 ? null : _opts$initialGeneralE,
-    _opts$generalError = opts.generalError,
-    providedGeneralError = _opts$generalError === void 0 ? null : _opts$generalError,
-    _opts$setGeneralError = opts.setGeneralError,
-    setProvidedGeneralError = _opts$setGeneralError === void 0 ? null : _opts$setGeneralError,
-    _opts$initialValue = opts.initialValue,
-    initialValue = _opts$initialValue === void 0 ? null : _opts$initialValue,
-    _opts$value = opts.value,
-    providedValue = _opts$value === void 0 ? null : _opts$value,
-    _opts$setValue = opts.setValue,
-    setProvidedValue = _opts$setValue === void 0 ? null : _opts$setValue,
-    _opts$withoutDefault = opts.withoutDefault,
-    withoutDefault = _opts$withoutDefault === void 0 ? true : _opts$withoutDefault,
-    _opts$withoutPropagat = opts.withoutPropagation,
-    withoutPropagation = _opts$withoutPropagat === void 0 ? true : _opts$withoutPropagat,
-    _opts$onComplete = opts.onComplete,
-    onComplete = _opts$onComplete === void 0 ? null : _opts$onComplete,
-    _opts$onError = opts.onError,
-    onError = _opts$onError === void 0 ? null : _opts$onError,
-    _opts$locales = opts.locales,
-    locales = _opts$locales === void 0 ? [] : _opts$locales;
-  var _useState = react.useState(initialValue || providedValue),
-    _useState2 = _slicedToArray(_useState, 2),
-    stateValue = _useState2[0],
-    setStateValue = _useState2[1];
-  var _useState3 = react.useState(initialErrors || providedErrors),
-    _useState4 = _slicedToArray(_useState3, 2),
-    stateErrors = _useState4[0],
-    setStateErrors = _useState4[1];
-  var _useState5 = react.useState(initialGeneralError || providedGeneralError),
-    _useState6 = _slicedToArray(_useState5, 2),
-    stateGeneralError = _useState6[0],
-    setStateGeneralError = _useState6[1];
-  var _useState7 = react.useState({
-      success: false,
-      loading: false,
-      error: false
-    }),
-    _useState8 = _slicedToArray(_useState7, 2),
-    requestState = _useState8[0],
-    setRequestState = _useState8[1];
-  var _useState9 = react.useState(null),
-    _useState0 = _slicedToArray(_useState9, 2),
-    response = _useState0[0],
-    setResponse = _useState0[1];
-  var hasProvidedValue = setProvidedValue !== null;
-  var value = hasProvidedValue ? providedValue : stateValue;
-  var setValue = hasProvidedValue ? setProvidedValue : setStateValue;
-  var hasProvidedErrors = setProvidedErrors !== null;
-  var errors = hasProvidedErrors ? providedErrors : stateErrors;
-  var setErrors = hasProvidedErrors ? setProvidedErrors : setStateErrors;
-  var hasProvidedGeneralError = setProvidedGeneralError !== null;
-  var generalError = hasProvidedGeneralError ? providedGeneralError : stateGeneralError;
-  var setGeneralError = hasProvidedGeneralError ? setProvidedGeneralError : setStateGeneralError;
-  var onFieldChange = react.useCallback(function (fieldName, fieldValue) {
-    var _ref3 = requestState || {},
-      _ref3$loading = _ref3.loading,
-      loading = _ref3$loading === void 0 ? false : _ref3$loading,
-      _ref3$success = _ref3.success,
-      success = _ref3$success === void 0 ? false : _ref3$success,
-      _ref3$error = _ref3.error,
-      requestError = _ref3$error === void 0 ? false : _ref3$error;
-    var fieldErrors = errors !== null ? errors[fieldName] || null : null;
-    if (fieldErrors !== null) {
-      setErrors(_objectSpread(_objectSpread({}, errors), {}, _defineProperty({}, fieldName, null)));
-    }
-    if (!loading && (success !== false || requestError !== false)) {
-      setRequestState({
-        success: false,
-        loading: false,
-        error: false
-      });
-    }
-    setValue(_objectSpread(_objectSpread({}, value || {}), {}, _defineProperty({}, fieldName, fieldValue)));
-  }, [value, errors, requestState, setErrors, setValue].concat(_toConsumableArray(fields)));
-  var fieldsProps = react.useMemo(function () {
-    return _getFieldsPropsFromFields(fields, {
-      value: value,
-      errors: errors,
-      onChange: onFieldChange
-    }, locales);
-  }, [value, errors, locales, fields, onFieldChange].concat(_toConsumableArray(fields)));
-  var csrfToken = react.useMemo(function () {
-    return fetch.getCsrfToken();
-  }, []);
-  var onSubmitError = function onSubmitError(error) {
-    setRequestState({
-      success: false,
-      loading: false,
-      error: true
-    });
-    if (error.name === 'ValidationError') {
-      var _getResponseData = error.getResponseData(),
-        _getResponseData$erro = _getResponseData.errors,
-        validationErrors = _getResponseData$erro === void 0 ? null : _getResponseData$erro;
-      setErrors(validationErrors || null);
-    } else {
-      setGeneralError(error.message);
-    }
-    if (onError !== null) {
-      onError(error);
-    }
-  };
-  var onSubmitSuccess = function onSubmitSuccess(resp) {
-    setRequestState({
-      success: true,
-      loading: false,
-      error: false
-    });
-    setResponse(resp);
-    if (onComplete !== null) {
-      onComplete(resp);
-    }
-  };
-  var finalPostForm = react.useCallback(function (postAction, postData) {
-    return postForm !== null ? postForm(postAction, postData) : fetch.postJSON(postAction, postData, {
-      credentials: 'include',
-      headers: fetch.getCSRFHeaders()
-    });
-  }, [postForm]);
-  var submit = react.useCallback(function () {
-    var submitValue = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : value;
-    setRequestState({
-      success: false,
-      loading: true,
-      error: false
-    });
-    setGeneralError(null);
-    setErrors(null);
-    finalPostForm(action, _objectSpread(_objectSpread({}, submitValue || {}), {}, {
-      _token: csrfToken
-    })).then(onSubmitSuccess)["catch"](onSubmitError);
-  }, [value, setGeneralError, setErrors, finalPostForm, action, csrfToken, onSubmitSuccess, onSubmitError]);
-  var onSubmit = react.useCallback(function (e) {
-    if (withoutDefault) {
-      e.preventDefault();
-    }
-    if (withoutPropagation) {
-      e.stopPropagation();
-    }
-    // This one is very important with multiple forms
-    // Nested forms (even in portals) will bubble the onSubmit event to the parent
-    submit();
-  }, [submit, withoutDefault, withoutPropagation]);
-  var status = null;
-  if (requestState.loading) {
-    status = 'loading';
-  } else if (requestState.success) {
-    status = 'success';
-  } else if (requestState.error) {
-    status = 'error';
-  }
-  return _objectSpread(_objectSpread({
-    value: value,
-    setValue: setValue,
-    csrfToken: csrfToken,
-    submit: submit,
-    onSubmit: onSubmit
-  }, requestState), {}, {
-    status: status,
-    response: response,
-    fields: fieldsProps,
-    errors: errors,
-    generalError: generalError
-  });
-};
-
-var buildThresholdArray = function buildThresholdArray() {
-  return [0, 1.0];
-};
-var observersCache = new Map();
-var getOptionsKey = function getOptionsKey(_ref) {
-  var _ref$root = _ref.root,
-    root = _ref$root === void 0 ? null : _ref$root,
-    rootMargin = _ref.rootMargin,
-    _ref$threshold = _ref.threshold,
-    threshold = _ref$threshold === void 0 ? null : _ref$threshold;
-  return "root_".concat(root, "_rootMargin_").concat(rootMargin || null, "_threshold_").concat(threshold);
-};
-var createObserver = function createObserver(Observer) {
-  var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
-  var subscribers = [];
-  var addSubscriber = function addSubscriber(element, callback) {
-    var currentSubscriber = subscribers.find(function (it) {
-      return it.element === element;
-    }) || null;
-    if (currentSubscriber !== null) {
-      return subscribers.map(function (it) {
-        return it.element === element && it.callbacks.indexOf(callback) === -1 ? _objectSpread(_objectSpread({}, it), {}, {
-          callbacks: [].concat(_toConsumableArray(it.callbacks), [callback])
-        }) : it;
-      }).filter(function (it) {
-        return it.callbacks.length > 0;
-      });
-    }
-    return [].concat(_toConsumableArray(subscribers), [{
-      element: element,
-      callbacks: [callback]
-    }]);
-  };
-  var removeSubscriber = function removeSubscriber(element, callback) {
-    return subscribers.map(function (it) {
-      return it.element === element ? _objectSpread(_objectSpread({}, it), {}, {
-        callbacks: it.callbacks.filter(function (subCallback) {
-          return subCallback !== callback;
-        })
-      }) : it;
-    }).filter(function (it) {
-      return it.callbacks.length > 0;
-    });
-  };
-  var onUpdate = function onUpdate(entries) {
-    entries.forEach(function (entry) {
-      subscribers.forEach(function (_ref2) {
-        var element = _ref2.element,
-          callbacks = _ref2.callbacks;
-        if (element === entry.target) {
-          callbacks.forEach(function (callback) {
-            callback(entry);
-          });
-        }
-      });
-    });
-  };
-  var observer = new Observer(onUpdate, options);
-  var unsubscribe = function unsubscribe(element) {
-    var callback = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null;
-    subscribers = removeSubscriber(element, callback);
-    if (typeof observer.unobserve === 'undefined') {
-      observer.disconnect();
-      subscribers.forEach(function (subscriber) {
-        observer.observe(subscriber.element);
-      });
-      return;
-    }
-    var currentSubscriber = subscribers.find(function (it) {
-      return it.element === element;
-    }) || null;
-    if (currentSubscriber === null) {
-      observer.unobserve(element);
-    }
-  };
-  var subscribe = function subscribe(element, callback) {
-    var currentSubscriber = subscribers.find(function (it) {
-      return it.element === element;
-    }) || null;
-    subscribers = addSubscriber(element, callback);
-    if (currentSubscriber === null) {
-      observer.observe(element);
-    }
-  };
-  return {
-    subscribe: subscribe,
-    unsubscribe: unsubscribe,
-    observer: observer
-  };
-};
-var getObserver = function getObserver(Observer) {
-  var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
-  if (Observer === null) {
-    throw new Error('Observer constructor is null');
-  }
-  var observerKey = getOptionsKey(options);
-  if (!observersCache.has(Observer)) {
-    observersCache.set(Observer, {});
-  }
-  var observers = observersCache.get(Observer);
-  if (typeof observers[observerKey] === 'undefined') {
-    observers[observerKey] = createObserver(Observer, options);
-    observersCache.set(Observer, observers);
-  }
-  return observers[observerKey];
-};
-var useObserver = function useObserver(Observer) {
-  var opts = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
-  var initialEntry = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
-  var _opts$root = opts.root,
-    root = _opts$root === void 0 ? null : _opts$root,
-    _opts$rootMargin = opts.rootMargin,
-    rootMargin = _opts$rootMargin === void 0 ? null : _opts$rootMargin,
-    _opts$threshold = opts.threshold,
-    threshold = _opts$threshold === void 0 ? null : _opts$threshold,
-    _opts$disabled = opts.disabled,
-    disabled = _opts$disabled === void 0 ? false : _opts$disabled;
-  var _useState = react.useState(initialEntry),
-    _useState2 = _slicedToArray(_useState, 2),
-    entry = _useState2[0],
-    setEntry = _useState2[1];
-  var nodeRef = react.useRef(null);
-  var currentElement = react.useRef(null);
-  var elementChanged = nodeRef.current !== currentElement.current;
-  react.useEffect(function () {
-    var nodeElement = nodeRef.current;
-    var callback = function callback(newEntry) {
-      return setEntry(newEntry);
-    };
-    var unsubscribe = null;
-    if (nodeElement !== null && Observer !== null) {
-      var newOpts = {};
-      if (root !== null) {
-        newOpts.root = root;
-      }
-      if (rootMargin !== null) {
-        newOpts.rootMargin = rootMargin;
-      }
-      if (threshold !== null) {
-        newOpts.threshold = threshold;
-      }
-      var _getObserver = getObserver(Observer, newOpts),
-        subscribe = _getObserver.subscribe,
-        localUnsubscribe = _getObserver.unsubscribe;
-      unsubscribe = localUnsubscribe;
-      subscribe(nodeElement, callback);
-    }
-    currentElement.current = nodeElement;
-    return function () {
-      if (unsubscribe !== null && nodeElement !== null) {
-        unsubscribe(nodeElement, callback);
-      }
-    };
-  }, [Observer, elementChanged, disabled, root, rootMargin, threshold]);
-  return {
-    ref: nodeRef,
-    entry: entry
-  };
-};
-
-/**
- * Intersection Observer
- */
-var thresholdArray = buildThresholdArray();
-var intersectionObserverInitialEntry = {
-  target: null,
-  time: null,
-  isVisible: false,
-  isIntersecting: false,
-  intersectionRatio: 0,
-  intersectionRect: null,
-  boundingClientRect: null,
-  rootBounds: null
-};
-var useIntersectionObserver = function useIntersectionObserver() {
-  var _ref3 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
-    _ref3$root = _ref3.root,
-    root = _ref3$root === void 0 ? null : _ref3$root,
-    _ref3$rootMargin = _ref3.rootMargin,
-    rootMargin = _ref3$rootMargin === void 0 ? '0px' : _ref3$rootMargin,
-    _ref3$threshold = _ref3.threshold,
-    threshold = _ref3$threshold === void 0 ? thresholdArray : _ref3$threshold,
-    _ref3$disabled = _ref3.disabled,
-    disabled = _ref3$disabled === void 0 ? false : _ref3$disabled;
-  return useObserver(typeof window !== 'undefined' ? IntersectionObserver : null, {
-    root: root,
-    rootMargin: rootMargin,
-    threshold: threshold,
-    disabled: disabled
-  }, intersectionObserverInitialEntry);
-};
-
-/**
- * Resize Observer
- */
-
-var resizeObserverInitialEntry = {
-  target: null,
-  contentRect: null,
-  contentBoxSize: null,
-  borderBoxSize: null
-};
-var useResizeObserver = function useResizeObserver() {
-  var _ref4 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
-    _ref4$disabled = _ref4.disabled,
-    disabled = _ref4$disabled === void 0 ? false : _ref4$disabled;
-  return useObserver(typeof window !== 'undefined' ? ResizeObserver : null, {
-    disabled: disabled
-  }, resizeObserverInitialEntry);
-};
-
-function useIsVisible() {
-  var _ref = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
-    rootMargin = _ref.rootMargin,
-    _ref$threshold = _ref.threshold,
-    threshold = _ref$threshold === void 0 ? 1 : _ref$threshold,
-    _ref$persist = _ref.persist,
-    persist = _ref$persist === void 0 ? false : _ref$persist;
-  var _useIntersectionObser = useIntersectionObserver({
-      rootMargin: rootMargin,
-      threshold: threshold
-    }),
-    ref = _useIntersectionObser.ref,
-    isIntersecting = _useIntersectionObser.entry.isIntersecting;
-  var wasIntersecting = react.useRef(isIntersecting);
-  if (isIntersecting && !wasIntersecting.current) {
-    wasIntersecting.current = isIntersecting;
-  }
-  var isVisible = !persist && isIntersecting || persist && wasIntersecting.current;
-  return {
-    ref: ref,
-    visible: isVisible
-  };
-}
-
-var KEYCODES = {
-  ARROW_LEFT: 37,
-  ARROW_UP: 38,
-  ARROW_RIGHT: 39,
-  ARROW_DOWN: 40,
-  ESCAPE: 27,
-  SPACE: 32
-};
-function useKeyboardKeys() {
-  var keys = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-  var _ref = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {},
-    _ref$eventName = _ref.eventName,
-    eventName = _ref$eventName === void 0 ? 'keydown' : _ref$eventName;
-  var keysNames = Object.keys(keys);
-  var keysListeners = keysNames.map(function (key) {
-    return keys[key];
-  });
-  react.useEffect(function () {
-    var onKeyDown = function onKeyDown(e) {
-      var keyCode = e.keyCode;
-      if (typeof keys[keyCode] !== 'undefined') {
-        keys[keyCode](e);
-      }
-    };
-    document.addEventListener(eventName, onKeyDown);
-    return function () {
-      document.removeEventListener(eventName, onKeyDown);
-    };
-  }, [].concat(keysNames, _toConsumableArray(keysListeners), [eventName]));
-}
-
-var fontsMap = {
-  loading: [],
-  active: []
-};
-var isFontLoading = function isFontLoading(name) {
-  return fontsMap.loading.indexOf(name) !== -1;
-};
-var isFontActive = function isFontActive(name) {
-  return fontsMap.active.indexOf(name) !== -1;
-};
-var addFontLoading = function addFontLoading(name) {
-  fontsMap.active = fontsMap.active.filter(function (it) {
-    return it !== name;
-  });
-  fontsMap.loading = [].concat(_toConsumableArray(fontsMap.loading), [name]);
-};
-var removeFontLoading = function removeFontLoading(name) {
-  fontsMap.loading = fontsMap.loading.filter(function (it) {
-    return it !== name;
-  });
-};
-var addFontActive = function addFontActive(name) {
-  fontsMap.loading = fontsMap.loading.filter(function (it) {
-    return it !== name;
-  });
-  fontsMap.active = [].concat(_toConsumableArray(fontsMap.active), [name]);
-};
-var useLoadedFonts = function useLoadedFonts(fonts) {
-  var _useState = react.useState(false),
-    _useState2 = _slicedToArray(_useState, 2),
-    loaded = _useState2[0],
-    setLoaded = _useState2[1];
-  react.useEffect(function () {
-    var config = fonts.reduce(function (newConfig, font) {
-      var _ref = isObject(font) ? font : {
-          type: 'system',
-          name: font
-        },
-        type = _ref.type,
-        name = _ref.name;
-      if ((type === 'google' || type === 'custom') && !isFontLoading(name) && !isFontActive(name)) {
-        return _objectSpread(_objectSpread({}, newConfig), {}, _defineProperty({}, type, {
-          families: [].concat(_toConsumableArray(newConfig !== null ? (newConfig[type] || {}).families || [] : []), [name])
-        }));
-      }
-      return newConfig;
-    }, null);
-    var hasConfig = config !== null;
-    if (hasConfig && typeof window !== 'undefined') {
-      utils.loadPackage('webfontloader', function () {
-        return import('webfontloader');
-      }).then(function (_ref2) {
-        var WebFont = _ref2["default"];
-        return WebFont.load(_objectSpread(_objectSpread({}, config), {}, {
-          timeout: 3000,
-          active: function active() {
-            return setLoaded(true);
-          },
-          fontloading: function fontloading(name) {
-            return addFontLoading(name);
-          },
-          fontactive: function fontactive(name) {
-            return addFontActive(name);
-          },
-          fontinactive: function fontinactive(name) {
-            return removeFontLoading(name);
-          }
-        }));
-      });
-    } else {
-      setLoaded(true);
-    }
-  }, [fonts, setLoaded]);
-  return {
-    loaded: loaded
-  };
-};
-
-var progressSteps = [0.1, 0.25, 0.5, 0.75, 0.9];
-var useMediaApi = function useMediaApi() {
-  var _ref = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
-    _ref$url = _ref.url,
-    url = _ref$url === void 0 ? null : _ref$url,
-    _ref$initialMuted = _ref.initialMuted,
-    initialMuted = _ref$initialMuted === void 0 ? false : _ref$initialMuted,
-    _ref$onTimeUpdate = _ref.onTimeUpdate,
-    onTimeUpdate = _ref$onTimeUpdate === void 0 ? null : _ref$onTimeUpdate,
-    _ref$onProgressStep = _ref.onProgressStep,
-    onProgressStep = _ref$onProgressStep === void 0 ? null : _ref$onProgressStep,
-    _ref$onDurationChange = _ref.onDurationChanged,
-    onDurationChanged = _ref$onDurationChange === void 0 ? null : _ref$onDurationChange,
-    _ref$onVolumeChanged = _ref.onVolumeChanged,
-    onVolumeChanged = _ref$onVolumeChanged === void 0 ? null : _ref$onVolumeChanged,
-    _ref$onPlay = _ref.onPlay,
-    onPlay = _ref$onPlay === void 0 ? null : _ref$onPlay,
-    _ref$onPause = _ref.onPause,
-    onPause = _ref$onPause === void 0 ? null : _ref$onPause,
-    _ref$onEnded = _ref.onEnded,
-    onEnded = _ref$onEnded === void 0 ? null : _ref$onEnded,
-    _ref$onSeeked = _ref.onSeeked,
-    onSeeked = _ref$onSeeked === void 0 ? null : _ref$onSeeked,
-    _ref$onLoadStart = _ref.onLoadStart,
-    onLoadStart = _ref$onLoadStart === void 0 ? null : _ref$onLoadStart,
-    _ref$onCanPlayThough = _ref.onCanPlayThough,
-    onCanPlayThough = _ref$onCanPlayThough === void 0 ? null : _ref$onCanPlayThough;
-  var ref = react.useRef(null);
-  var _useState = react.useState(initialMuted),
-    _useState2 = _slicedToArray(_useState, 2),
-    muted = _useState2[0],
-    setMuted = _useState2[1];
-  var _useState3 = react.useState(null),
-    _useState4 = _slicedToArray(_useState3, 2),
-    currentTime = _useState4[0],
-    setCurrentTime = _useState4[1];
-  var _useState5 = react.useState(null),
-    _useState6 = _slicedToArray(_useState5, 2),
-    duration = _useState6[0],
-    setDuration = _useState6[1];
-  var _useState7 = react.useState(false),
-    _useState8 = _slicedToArray(_useState7, 2),
-    playing = _useState8[0],
-    setPlaying = _useState8[1];
-  var _useState9 = react.useState(false),
-    _useState0 = _slicedToArray(_useState9, 2),
-    ready = _useState0[0],
-    setReady = _useState0[1];
-  var _useState1 = react.useState(true),
-    _useState10 = _slicedToArray(_useState1, 2),
-    initialPlay = _useState10[0],
-    setInitialPlay = _useState10[1];
-  var progressStepsReached = react.useRef({});
-  var paused = !playing;
-
-  // Exposed methods
-  var play = react.useCallback(function () {
-    var media = ref.current;
-    if (media !== null) {
-      media.play();
-    }
-  }, []);
-  var pause = react.useCallback(function () {
-    var media = ref.current;
-    if (media !== null) {
-      media.pause();
-    }
-  }, []);
-  var togglePlay = react.useCallback(function () {
-    var media = ref.current;
-    if (media !== null) {
-      if (playing) {
-        media.pause();
-      } else {
-        media.play();
-      }
-    }
-  }, [playing]);
-  var stop = react.useCallback(function () {
-    var media = ref.current;
-    if (media !== null) {
-      media.pause();
-      media.currentTime = 0;
-    }
-  }, []);
-  var seek = react.useCallback(function (time) {
-    var media = ref.current;
-    if (media !== null) {
-      media.currentTime = time;
-    }
-  }, []);
-  var mute = react.useCallback(function () {
-    var media = ref.current;
-    if (media !== null) {
-      media.muted = true;
-    }
-  }, []);
-  var unMute = react.useCallback(function () {
-    var media = ref.current;
-    if (media !== null) {
-      media.muted = false;
-    }
-  }, []);
-  var toggleMute = react.useCallback(function () {
-    var media = ref.current;
-    if (media !== null) {
-      media.muted = !muted;
-    }
-  }, [muted]);
-
-  // Media events callbacks
-  var onCustomPlay = react.useCallback(function () {
-    if (onPlay !== null) {
-      onPlay({
-        initial: initialPlay
-      });
-    }
-    if (initialPlay) {
-      setInitialPlay(false);
-    }
-    setPlaying(true);
-  }, [initialPlay, setPlaying, onPlay]);
-  var onCustomPause = react.useCallback(function () {
-    var media = ref.current;
-    setPlaying(false);
-    if (onPause !== null) {
-      onPause({
-        midway: media.currentTime > 0 && media.currentTime < media.duration
-      });
-    }
-  }, [setPlaying, onPause]);
-  var onCustomEnded = react.useCallback(function () {
-    var media = ref.current;
-    media.currentTime = 0;
-    if (onEnded !== null) {
-      onEnded();
-    }
-    setInitialPlay(true);
-  }, [setInitialPlay, onEnded]);
-  var onCustomTimeUpdate = react.useCallback(function () {
-    var media = ref.current;
-    setCurrentTime(media.currentTime);
-    if (onTimeUpdate !== null) {
-      onTimeUpdate(media.currentTime);
-    }
-    var progress = media.currentTime / media.duration;
-    var currentSteps = progressStepsReached.current;
-    var stepsToTrack = progressSteps.filter(function (step) {
-      return progress > step && typeof currentSteps[step] === 'undefined';
-    });
-    stepsToTrack.forEach(function (step) {
-      if (onProgressStep !== null) {
-        onProgressStep(step);
-      }
-      currentSteps[step] = true;
-    });
-  }, [setCurrentTime, onTimeUpdate, onProgressStep]);
-  var onCustomDurationChange = react.useCallback(function () {
-    var media = ref.current;
-    setDuration(media.duration);
-    if (onDurationChanged !== null) {
-      onDurationChanged(media.duration);
-    }
-  }, [setDuration, onDurationChanged]);
-  var onCustomSeeked = react.useCallback(function () {
-    var media = ref.current;
-    if (onSeeked !== null) {
-      onSeeked(media.currentTime);
-    }
-  }, [onSeeked]);
-  var onCustomVolumeChange = react.useCallback(function () {
-    var media = ref.current;
-    setMuted(media.muted);
-    if (onVolumeChanged !== null) {
-      onVolumeChanged(media.muted, media.volume);
-    }
-  }, [setMuted, onVolumeChanged]);
-  var onCustomLoadStart = react.useCallback(function () {
-    setReady(false);
-    if (onLoadStart !== null) {
-      onLoadStart();
-    }
-  }, [setReady, onLoadStart]);
-  var onCustomCanPlayThrough = react.useCallback(function () {
-    setReady(true);
-    if (onCanPlayThough !== null) {
-      onCanPlayThough();
-    }
-  }, [setReady, onCanPlayThough]);
-  react.useEffect(function () {
-    var media = ref.current;
-    if (media !== null) {
-      media.addEventListener('timeupdate', onCustomTimeUpdate);
-      media.addEventListener('durationchange', onCustomDurationChange);
-      media.addEventListener('volumechange', onCustomVolumeChange);
-      media.addEventListener('play', onCustomPlay);
-      media.addEventListener('pause', onCustomPause);
-      media.addEventListener('ended', onCustomEnded);
-      media.addEventListener('seeked', onCustomSeeked);
-      media.addEventListener('loadstart', onCustomLoadStart);
-      media.addEventListener('canplaythrough', onCustomCanPlayThrough);
-    }
-    return function () {
-      if (media !== null) {
-        media.removeEventListener('timeupdate', onCustomTimeUpdate);
-        media.removeEventListener('durationchange', onCustomDurationChange);
-        media.removeEventListener('volumechange', onCustomVolumeChange);
-        media.removeEventListener('play', onCustomPlay);
-        media.removeEventListener('pause', onCustomPause);
-        media.removeEventListener('ended', onCustomEnded);
-        media.removeEventListener('seeked', onCustomSeeked);
-        media.removeEventListener('loadstart', onCustomLoadStart);
-        media.removeEventListener('canplaythrough', onCustomCanPlayThrough);
-      }
-    };
-  }, [url]);
-  return {
-    ref: ref,
-    play: play,
-    pause: pause,
-    togglePlay: togglePlay,
-    stop: stop,
-    seek: seek,
-    mute: mute,
-    unMute: unMute,
-    toggleMute: toggleMute,
-    muted: muted,
-    currentTime: currentTime,
-    duration: duration,
-    playing: playing,
-    paused: paused,
-    ready: ready
-  };
-};
-
-var useMediasParser = function useMediasParser() {
-  // const screensManager = useScreensManager();
-  var fieldsManager = contexts.useFieldsManager();
-
-  // Convert medias object to path
-  var parser = react.useMemo(function () {
-    return new core.MediasParser({
-      // screensManager,
-      fieldsManager: fieldsManager
-    });
-  }, [fieldsManager]);
-  var toPath = react.useCallback(function (story) {
-    return parser.toPath(story);
-  }, [parser]);
-  var fromPath = react.useCallback(function (story) {
-    return parser.fromPath(story);
-  }, [parser]);
-  return {
-    toPath: toPath,
-    fromPath: fromPath,
-    parser: parser
-  };
-};
-
-var useResourceTypeName = function useResourceTypeName(resource) {
-  var type = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null;
-  var typeName = react.useMemo(function () {
-    var _ref = resource || {},
-      _ref$name = _ref.name,
-      resourceName = _ref$name === void 0 ? null : _ref$name,
-      _ref$types = _ref.types,
-      types = _ref$types === void 0 ? [] : _ref$types,
-      _ref$settings = _ref.settings,
-      settings = _ref$settings === void 0 ? {} : _ref$settings;
-    var _ref2 = settings || {},
-      _ref2$hideTypeNames = _ref2.hideTypeNames,
-      hideTypeNames = _ref2$hideTypeNames === void 0 ? false : _ref2$hideTypeNames;
-    if (hideTypeNames) {
-      return null;
-    }
-    var _ref3 = type !== null && types !== null && types.length > 1 ? (types || []).find(function (_ref4) {
-        var _ref4$id = _ref4.id,
-          id = _ref4$id === void 0 ? null : _ref4$id;
-        return id === type;
-      }) || {} : {},
-      _ref3$name = _ref3.name,
-      name = _ref3$name === void 0 ? null : _ref3$name;
-    return name === resourceName ? null : name;
-  }, [type, resource]);
-  return typeName;
-};
-
-var getResource = function getResource(resources, resourceId) {
-  return resourceId !== null && !isObject(resourceId) ? resources.find(function (it) {
-    return it.id === resourceId;
-  }) || null : resourceId;
-};
-var useResourceUrlGenerator = function useResourceUrlGenerator() {
-  var resourceId = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null;
-  var resources = contexts.usePanneauResources();
-  var contextResource = contexts.useResource();
-  var resource = getResource(resources, resourceId) || contextResource;
-  var route = contexts.useUrlGenerator();
-  return function (routeResourceId) {
-    var routeName = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null;
-    var params = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : null;
-    var finalRouteName = resourceId !== null ? routeResourceId : routeName;
-    var finalParams = resourceId !== null ? routeName : params;
-    var finalResource = getResource(resources, routeResourceId) || resource;
-    var _ref = finalResource || {},
-      _ref$id = _ref.id,
-      id = _ref$id === void 0 ? null : _ref$id;
-    var finalRoute = id !== null ? route("resources.".concat(finalRouteName), _objectSpread(_objectSpread({}, finalParams), {}, {
-      resource: id
-    })) : null;
-    return finalRoute;
-  };
-};
-
-var useQuery = function useQuery() {
-  var initialBaseQuery = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null;
-  var paginated = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
-  var initialQuery = react.useMemo(function () {
-    return paginated ? _objectSpread({
-      page: 1,
-      count: 10
-    }, initialBaseQuery || {}) : initialBaseQuery || null;
-  }, [paginated, initialBaseQuery]);
-  var _useState = react.useState(initialQuery),
-    _useState2 = _slicedToArray(_useState, 2),
-    query = _useState2[0],
-    setQuery = _useState2[1];
-  react.useEffect(function () {
-    setQuery(initialQuery);
-  }, [initialQuery, setQuery]);
-  var onPageChange = react.useCallback(function (newPage) {
-    setQuery(_objectSpread(_objectSpread({}, query || {}), {}, {
-      page: newPage || 1
-    }));
-  }, [query, setQuery]);
-  var onQueryChange = react.useCallback(function (newQuery) {
-    var finalQuery = newQuery !== null ? Object.keys(newQuery).reduce(function (currentQuery, key) {
-      var val = newQuery[key];
-      return val !== null ? _objectSpread(_objectSpread({}, currentQuery || {}), {}, _defineProperty({}, key, val)) : currentQuery;
-    }, null) : null;
-    setQuery(_objectSpread(_objectSpread({}, initialQuery || {}), finalQuery || {}));
-  }, [query, setQuery, initialQuery]);
-  var onQueryReset = react.useCallback(function () {
-    setQuery(initialQuery);
-  }, [initialQuery, setQuery]);
-  return {
-    query: query,
-    onPageChange: onPageChange,
-    onQueryChange: onQueryChange,
-    onQueryReset: onQueryReset
-  };
-};
-
-var _excluded = ["width", "height"],
-  _excluded2 = ["withoutMaxSize"];
-var useScreenSize = function useScreenSize(_ref) {
-  var _ref$width = _ref.width,
-    width = _ref$width === void 0 ? null : _ref$width,
-    _ref$height = _ref.height,
-    height = _ref$height === void 0 ? null : _ref$height,
-    _ref$landscape = _ref.landscape,
-    landscape = _ref$landscape === void 0 ? false : _ref$landscape,
-    _ref$screens = _ref.screens,
-    screens = _ref$screens === void 0 ? [] : _ref$screens,
-    _ref$mediaType = _ref.mediaType,
-    mediaType = _ref$mediaType === void 0 ? 'screen' : _ref$mediaType,
-    _ref$media = _ref.media,
-    providedMedia = _ref$media === void 0 ? null : _ref$media;
-  // Get media
-  var media = react.useMemo(function () {
-    return providedMedia !== null ? providedMedia : {
-      type: mediaType,
-      width: "".concat(width, "px"),
-      height: "".concat(height, "px")
-    };
-  }, [providedMedia, mediaType, width, height]);
-
-  // Get matching screens
-  var matchingScreens = react.useMemo(function () {
-    return _toConsumableArray(screens).reverse().filter(function (_ref2) {
-      var _ref2$mediaQuery = _ref2.mediaQuery,
-        mediaQuery = _ref2$mediaQuery === void 0 ? null : _ref2$mediaQuery;
-      return mediaQuery === null || cssMediaquery.match(mediaQuery, media);
-    });
-  }, [screens, media]);
-  return {
-    screen: matchingScreens.length > 0 ? matchingScreens[0].name : null,
-    screens: _toConsumableArray(matchingScreens).reverse().map(function (_ref3) {
-      var name = _ref3.name;
-      return name;
-    }),
-    width: width,
-    height: height,
-    landscape: landscape
-  };
-};
-var useScreenSizeFromElement = function useScreenSizeFromElement() {
-  var _ref4 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
-    _ref4$width = _ref4.width,
-    width = _ref4$width === void 0 ? null : _ref4$width,
-    _ref4$height = _ref4.height,
-    height = _ref4$height === void 0 ? null : _ref4$height,
-    opts = _objectWithoutProperties(_ref4, _excluded);
-  var _useResizeObserver = useResizeObserver(),
-    ref = _useResizeObserver.ref,
-    contentRect = _useResizeObserver.entry.contentRect;
-  var _ref5 = contentRect || {},
-    _ref5$width = _ref5.width,
-    calculatedWidth = _ref5$width === void 0 ? 0 : _ref5$width,
-    _ref5$height = _ref5.height,
-    calculatedHeight = _ref5$height === void 0 ? 0 : _ref5$height;
-  var semiFinalWidth = width !== null ? width : calculatedWidth;
-  var semiFinalHeight = height !== null ? height : calculatedHeight;
-  var landscape = semiFinalHeight > 0 && semiFinalWidth > semiFinalHeight;
-  var _opts$withoutMaxSize = opts.withoutMaxSize,
-    withoutMaxSize = _opts$withoutMaxSize === void 0 ? false : _opts$withoutMaxSize,
-    restOpts = _objectWithoutProperties(opts, _excluded2);
-  var finalWidth = landscape && !withoutMaxSize ? Math.round(Math.max(320, 0.45 * semiFinalHeight)) : semiFinalWidth;
-  var finalHeight = landscape && !withoutMaxSize ? Math.round(Math.max(533, 0.75 * semiFinalHeight)) : semiFinalHeight;
-  if (finalWidth % 2 === 1) {
-    finalWidth -= 1;
-  }
-  if (finalHeight % 2 === 1) {
-    finalHeight -= 1;
-  }
-  var screenSize = useScreenSize(_objectSpread({
-    width: finalWidth,
-    height: finalHeight,
-    landscape: landscape
-  }, restOpts));
-  return {
-    ref: ref,
-    screenSize: screenSize
-  };
-};
-var getWindowSize = function getWindowSize() {
-  return {
-    width: typeof window !== 'undefined' ? window.innerWidth : null,
-    height: typeof window !== 'undefined' ? window.innerHeight : null
-  };
-};
-var useScreenSizeFromWindow = function useScreenSizeFromWindow() {
-  var opts = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-  var _useState = react.useState(getWindowSize()),
-    _useState2 = _slicedToArray(_useState, 2),
-    windowSize = _useState2[0],
-    setWindowSize = _useState2[1];
-  react.useEffect(function () {
-    var onResize = function onResize() {
-      return setWindowSize(getWindowSize());
-    };
-    if (typeof window !== 'undefined') {
-      window.addEventListener('resize', onResize);
-    }
-    return function () {
-      if (typeof window !== 'undefined') {
-        window.removeEventListener('resize', onResize);
-      }
-    };
-  }, [setWindowSize]);
-  return useScreenSize(_objectSpread(_objectSpread({}, opts), windowSize));
-};
-
-var eventsManager = typeof window !== 'undefined' ? new core.EventsManager(window) : null;
-var useWindowEvent = utils.createUseEvent(eventsManager);
-
-exports.KEYCODES = KEYCODES;
-exports.getObserver = getObserver;
-exports.useAnimationFrame = useAnimationFrame;
-exports.useDocumentEvent = useDocumentEvent;
-exports.useForm = useForm;
-exports.useFormattedDate = useFormattedDate;
-exports.useFormattedTime = useFormattedTime;
-exports.useIntersectionObserver = useIntersectionObserver;
-exports.useIsVisible = useIsVisible;
-exports.useKeyboardKeys = useKeyboardKeys;
-exports.useLoadedFonts = useLoadedFonts;
-exports.useMediaApi = useMediaApi;
-exports.useMediasParser = useMediasParser;
-exports.useObserver = useObserver;
-exports.useQuery = useQuery;
-exports.useResizeObserver = useResizeObserver;
-exports.useResourceTypeName = useResourceTypeName;
-exports.useResourceUrlGenerator = useResourceUrlGenerator;
-exports.useScreenSizeFromElement = useScreenSizeFromElement;
-exports.useScreenSizeFromWindow = useScreenSizeFromWindow;
-exports.useWindowEvent = useWindowEvent;