framework7-react 6.3.16 → 7.0.0-beta.12

package/{esm/components → components}/accordion-content.js

@@ -1,22 +1,22 @@
 function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
 import React, { forwardRef, useRef, useImperativeHandle } from 'react';
-import { classNames, getExtraAttrs } from '../shared/utils';
-import { colorClasses } from '../shared/mixins';
+import { classNames, getExtraAttrs } from '../shared/utils.js';
+import { colorClasses } from '../shared/mixins.js';
 
-var AccordionContent = /*#__PURE__*/forwardRef(function (props, ref) {
-  var className = props.className,
-      id = props.id,
-      style = props.style,
-      children = props.children;
-  var elRef = useRef(null);
-  useImperativeHandle(ref, function () {
-    return {
-      el: elRef.current
-    };
-  });
-  var extraAttrs = getExtraAttrs(props);
-  var classes = classNames(className, 'accordion-item-content', colorClasses(props));
+const AccordionContent = /*#__PURE__*/forwardRef((props, ref) => {
+  const {
+    className,
+    id,
+    style,
+    children
+  } = props;
+  const elRef = useRef(null);
+  useImperativeHandle(ref, () => ({
+    el: elRef.current
+  }));
+  const extraAttrs = getExtraAttrs(props);
+  const classes = classNames(className, 'accordion-item-content', colorClasses(props));
   return /*#__PURE__*/React.createElement("div", _extends({
     id: id,
     style: style,

package/{esm/components → components}/accordion-item.js

@@ -1,56 +1,56 @@
 function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
 import React, { forwardRef, useRef, useImperativeHandle } from 'react';
-import { useIsomorphicLayoutEffect } from '../shared/use-isomorphic-layout-effect';
-import { classNames, getExtraAttrs, emit } from '../shared/utils';
-import { colorClasses } from '../shared/mixins';
-import { f7, f7ready } from '../shared/f7';
+import { useIsomorphicLayoutEffect } from '../shared/use-isomorphic-layout-effect.js';
+import { classNames, getExtraAttrs, emit } from '../shared/utils.js';
+import { colorClasses } from '../shared/mixins.js';
+import { f7, f7ready } from '../shared/f7.js';
 
-var AccordionItem = /*#__PURE__*/forwardRef(function (props, ref) {
-  var className = props.className,
-      id = props.id,
-      style = props.style,
-      children = props.children,
-      opened = props.opened;
-  var elRef = useRef(null);
-  useImperativeHandle(ref, function () {
-    return {
-      el: elRef.current
-    };
-  });
+const AccordionItem = /*#__PURE__*/forwardRef((props, ref) => {
+  const {
+    className,
+    id,
+    style,
+    children,
+    opened
+  } = props;
+  const elRef = useRef(null);
+  useImperativeHandle(ref, () => ({
+    el: elRef.current
+  }));
 
-  var onBeforeOpen = function onBeforeOpen(el, prevent) {
+  const onBeforeOpen = (el, prevent) => {
     if (elRef.current !== el) return;
     emit(props, 'accordionBeforeOpen', prevent);
   };
 
-  var onOpen = function onOpen(el) {
+  const onOpen = el => {
     if (elRef.current !== el) return;
     emit(props, 'accordionOpen');
   };
 
-  var onOpened = function onOpened(el) {
+  const onOpened = el => {
     if (elRef.current !== el) return;
     emit(props, 'accordionOpened');
   };
 
-  var onBeforeClose = function onBeforeClose(el, prevent) {
+  const onBeforeClose = (el, prevent) => {
     if (elRef.current !== el) return;
     emit(props, 'accordionBeforeClose', prevent);
   };
 
-  var onClose = function onClose(el) {
+  const onClose = el => {
     if (elRef.current !== el) return;
     emit(props, 'accordionClose');
   };
 
-  var onClosed = function onClosed(el) {
+  const onClosed = el => {
     if (elRef.current !== el) return;
     emit(props, 'accordionClosed');
   };
 
-  var attachEvents = function attachEvents() {
-    f7ready(function () {
+  const attachEvents = () => {
+    f7ready(() => {
       f7.on('accordionBeforeOpen', onBeforeOpen);
       f7.on('accordionOpen', onOpen);
       f7.on('accordionOpened', onOpened);
@@ -60,7 +60,7 @@ var AccordionItem = /*#__PURE__*/forwardRef(function (props, ref) {
     });
   };
 
-  var detachEvents = function detachEvents() {
+  const detachEvents = () => {
     f7.off('accordionBeforeOpen', onBeforeOpen);
     f7.off('accordionOpen', onOpen);
     f7.off('accordionOpened', onOpened);
@@ -69,12 +69,12 @@ var AccordionItem = /*#__PURE__*/forwardRef(function (props, ref) {
     f7.off('accordionClosed', onClosed);
   };
 
-  useIsomorphicLayoutEffect(function () {
+  useIsomorphicLayoutEffect(() => {
     attachEvents();
     return detachEvents;
   });
-  var extraAttrs = getExtraAttrs(props);
-  var classes = classNames(className, 'accordion-item', {
+  const extraAttrs = getExtraAttrs(props);
+  const classes = classNames(className, 'accordion-item', {
     'accordion-item-opened': opened
   }, colorClasses(props));
   return /*#__PURE__*/React.createElement("div", _extends({

package/{esm/components → components}/accordion-toggle.js

@@ -1,22 +1,22 @@
 function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
 import React, { forwardRef, useRef, useImperativeHandle } from 'react';
-import { classNames, getExtraAttrs } from '../shared/utils';
-import { colorClasses } from '../shared/mixins';
+import { classNames, getExtraAttrs } from '../shared/utils.js';
+import { colorClasses } from '../shared/mixins.js';
 
-var AccordionToggle = /*#__PURE__*/forwardRef(function (props, ref) {
-  var className = props.className,
-      id = props.id,
-      style = props.style,
-      children = props.children;
-  var elRef = useRef(null);
-  useImperativeHandle(ref, function () {
-    return {
-      el: elRef.current
-    };
-  });
-  var extraAttrs = getExtraAttrs(props);
-  var classes = classNames(className, 'accordion-item-toggle', colorClasses(props));
+const AccordionToggle = /*#__PURE__*/forwardRef((props, ref) => {
+  const {
+    className,
+    id,
+    style,
+    children
+  } = props;
+  const elRef = useRef(null);
+  useImperativeHandle(ref, () => ({
+    el: elRef.current
+  }));
+  const extraAttrs = getExtraAttrs(props);
+  const classes = classNames(className, 'accordion-item-toggle', colorClasses(props));
   return /*#__PURE__*/React.createElement("div", _extends({
     id: id,
     style: style,

package/components/accordion.js

@@ -0,0 +1,29 @@
+function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+import React, { forwardRef, useImperativeHandle, useRef } from 'react';
+import { classNames, getExtraAttrs } from '../shared/utils.js';
+import { colorClasses } from '../shared/mixins.js';
+
+const Accordion = /*#__PURE__*/forwardRef((props, ref) => {
+  const {
+    className,
+    id,
+    style,
+    accordionOpposite,
+    children
+  } = props;
+  const elRef = useRef(null);
+  useImperativeHandle(ref, () => ({
+    el: elRef.current
+  }));
+  const extraAttrs = getExtraAttrs(props);
+  const classes = classNames(className, 'accordion-list', accordionOpposite && 'accordion-opposite', colorClasses(props));
+  return /*#__PURE__*/React.createElement("div", _extends({
+    id: id,
+    style: style,
+    className: classes,
+    ref: elRef
+  }, extraAttrs), children);
+});
+Accordion.displayName = 'f7-accordion';
+export default Accordion;

package/{esm/components → components}/actions-button.js

@@ -1,30 +1,29 @@
 function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
 import React, { forwardRef, useRef, useImperativeHandle } from 'react';
-import { classNames, getExtraAttrs, getSlots, emit } from '../shared/utils';
-import { colorClasses } from '../shared/mixins';
-import { f7 } from '../shared/f7';
+import { classNames, getExtraAttrs, getSlots, emit } from '../shared/utils.js';
+import { colorClasses } from '../shared/mixins.js';
+import { f7 } from '../shared/f7.js';
 
-var ComponentName = /*#__PURE__*/forwardRef(function (props, ref) {
-  var className = props.className,
-      id = props.id,
-      style = props.style,
-      bold = props.bold,
-      _props$close = props.close,
-      close = _props$close === void 0 ? true : _props$close;
-  var extraAttrs = getExtraAttrs(props);
-  var elRef = useRef(null);
-  useImperativeHandle(ref, function () {
-    return {
-      el: elRef.current
-    };
-  });
-  var classes = classNames(className, {
+const ComponentName = /*#__PURE__*/forwardRef((props, ref) => {
+  const {
+    className,
+    id,
+    style,
+    bold,
+    close = true
+  } = props;
+  const extraAttrs = getExtraAttrs(props);
+  const elRef = useRef(null);
+  useImperativeHandle(ref, () => ({
+    el: elRef.current
+  }));
+  const classes = classNames(className, {
     'actions-button': true,
     'actions-button-bold': bold
   }, colorClasses(props));
-  var mediaEl;
-  var slots = getSlots(props);
+  let mediaEl;
+  const slots = getSlots(props);
 
   if (slots.media && slots.media.length) {
     mediaEl = /*#__PURE__*/React.createElement("div", {
@@ -32,7 +31,7 @@ var ComponentName = /*#__PURE__*/forwardRef(function (props, ref) {
     }, slots.media);
   }
 
-  var onClick = function onClick(e) {
+  const onClick = e => {
     if (elRef.current && close && f7) {
       f7.actions.close(f7.$(elRef.current).parents('.actions-modal'));
     }

package/{esm/components → components}/actions-group.js

@@ -1,22 +1,22 @@
 function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
 import React, { forwardRef, useRef, useImperativeHandle } from 'react';
-import { classNames, getExtraAttrs } from '../shared/utils';
-import { colorClasses } from '../shared/mixins';
+import { classNames, getExtraAttrs } from '../shared/utils.js';
+import { colorClasses } from '../shared/mixins.js';
 
-var ActionsGroup = /*#__PURE__*/forwardRef(function (props, ref) {
-  var className = props.className,
-      id = props.id,
-      style = props.style,
-      children = props.children;
-  var extraAttrs = getExtraAttrs(props);
-  var elRef = useRef(null);
-  useImperativeHandle(ref, function () {
-    return {
-      el: elRef.current
-    };
-  });
-  var classes = classNames(className, 'actions-group', colorClasses(props));
+const ActionsGroup = /*#__PURE__*/forwardRef((props, ref) => {
+  const {
+    className,
+    id,
+    style,
+    children
+  } = props;
+  const extraAttrs = getExtraAttrs(props);
+  const elRef = useRef(null);
+  useImperativeHandle(ref, () => ({
+    el: elRef.current
+  }));
+  const classes = classNames(className, 'actions-group', colorClasses(props));
   return /*#__PURE__*/React.createElement("div", _extends({
     id: id,
     style: style,

package/{esm/components → components}/actions-label.js

@@ -1,27 +1,27 @@
 function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
 import React, { forwardRef, useRef, useImperativeHandle } from 'react';
-import { classNames, getExtraAttrs, emit } from '../shared/utils';
-import { colorClasses } from '../shared/mixins';
+import { classNames, getExtraAttrs, emit } from '../shared/utils.js';
+import { colorClasses } from '../shared/mixins.js';
 
-var ActionsLabel = /*#__PURE__*/forwardRef(function (props, ref) {
-  var className = props.className,
-      id = props.id,
-      style = props.style,
-      children = props.children,
-      bold = props.bold;
-  var extraAttrs = getExtraAttrs(props);
-  var elRef = useRef(null);
-  useImperativeHandle(ref, function () {
-    return {
-      el: elRef.current
-    };
-  });
-  var classes = classNames(className, 'actions-label', {
+const ActionsLabel = /*#__PURE__*/forwardRef((props, ref) => {
+  const {
+    className,
+    id,
+    style,
+    children,
+    bold
+  } = props;
+  const extraAttrs = getExtraAttrs(props);
+  const elRef = useRef(null);
+  useImperativeHandle(ref, () => ({
+    el: elRef.current
+  }));
+  const classes = classNames(className, 'actions-label', {
     'actions-button-bold': bold
   }, colorClasses(props));
 
-  var onClick = function onClick(e) {
+  const onClick = e => {
     emit(props, 'click', e);
   };
 

package/components/actions.js

@@ -0,0 +1,138 @@
+function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+import React, { forwardRef, useRef, useImperativeHandle } from 'react';
+import { useIsomorphicLayoutEffect } from '../shared/use-isomorphic-layout-effect.js';
+import { classNames, getExtraAttrs, emit } from '../shared/utils.js';
+import { colorClasses } from '../shared/mixins.js';
+import { f7, f7ready } from '../shared/f7.js';
+import { watchProp } from '../shared/watch-prop.js';
+import { modalStateClasses } from '../shared/modal-state-classes.js';
+
+
+const Actions = /*#__PURE__*/forwardRef((props, ref) => {
+  const {
+    className,
+    id,
+    style,
+    children,
+    grid,
+    opened = false,
+    animate
+  } = props;
+  const extraAttrs = getExtraAttrs(props);
+  const elRef = useRef(null);
+  const isOpened = useRef(opened);
+  const isClosing = useRef(false);
+  const f7Actions = useRef(null);
+
+  const onOpen = instance => {
+    isOpened.current = true;
+    isClosing.current = false;
+    emit(props, 'actionsOpen', instance);
+  };
+
+  const onOpened = instance => {
+    emit(props, 'actionsOpened', instance);
+  };
+
+  const onClose = instance => {
+    isOpened.current = false;
+    isClosing.current = true;
+    emit(props, 'actionsClose', instance);
+  };
+
+  const onClosed = instance => {
+    isClosing.current = false;
+    emit(props, 'actionsClosed', instance);
+  };
+
+  useImperativeHandle(ref, () => ({
+    el: elRef.current,
+    f7Actions: () => f7Actions.current
+  })); // watch opened changes
+
+  watchProp(opened, value => {
+    if (!f7Actions.current) return;
+
+    if (value) {
+      f7Actions.current.open();
+    } else {
+      f7Actions.current.close();
+    }
+  });
+
+  const modalEvents = method => {
+    if (!f7Actions.current) return;
+    f7Actions.current[method]('open', onOpen);
+    f7Actions.current[method]('opened', onOpened);
+    f7Actions.current[method]('close', onClose);
+    f7Actions.current[method]('closed', onClosed);
+  };
+
+  const onMount = () => {
+    if (!elRef.current) return;
+    const {
+      target,
+      convertToPopover,
+      forceToPopover,
+      closeByBackdropClick,
+      closeByOutsideClick,
+      closeOnEscape,
+      backdrop,
+      backdropEl,
+      containerEl
+    } = props;
+    const params = {
+      el: elRef.current,
+      grid
+    };
+    if (target) params.targetEl = target;
+    if ('convertToPopover' in props) params.convertToPopover = convertToPopover;
+    if ('forceToPopover' in props) params.forceToPopover = forceToPopover;
+    if ('backdrop' in props) params.backdrop = backdrop;
+    if ('backdropEl' in props) params.backdropEl = backdropEl;
+    if ('closeByBackdropClick' in props) params.closeByBackdropClick = closeByBackdropClick;
+    if ('closeByOutsideClick' in props) params.closeByOutsideClick = closeByOutsideClick;
+    if ('closeOnEscape' in props) params.closeOnEscape = closeOnEscape;
+    if ('animate' in props) params.animate = animate;
+    if ('containerEl' in props) params.containerEl = containerEl;
+    f7ready(() => {
+      f7Actions.current = f7.actions.create(params);
+      modalEvents('on');
+
+      if (opened) {
+        f7Actions.current.open(false);
+      }
+    });
+  };
+
+  const onDestroy = () => {
+    if (f7Actions.current) f7Actions.current.destroy();
+    f7Actions.current = null;
+  };
+
+  useIsomorphicLayoutEffect(() => {
+    modalEvents('on');
+    return () => {
+      modalEvents('off');
+    };
+  });
+  useIsomorphicLayoutEffect(() => {
+    onMount();
+    return onDestroy;
+  }, []);
+  const classes = classNames(className, 'actions-modal', {
+    'actions-grid': grid
+  }, modalStateClasses({
+    isOpened,
+    isClosing
+  }), colorClasses(props));
+  return /*#__PURE__*/React.createElement("div", _extends({
+    id: id,
+    style: style,
+    className: classes,
+    ref: elRef
+  }, extraAttrs), children);
+});
+Actions.displayName = 'f7-actions';
+export default Actions;

package/{esm/components → components}/app.js

@@ -1,38 +1,35 @@
 function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
-function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
-
 import React, { forwardRef, useRef, useImperativeHandle } from 'react';
-import { useIsomorphicLayoutEffect } from '../shared/use-isomorphic-layout-effect';
-import { classNames, getExtraAttrs } from '../shared/utils';
-import { colorClasses } from '../shared/mixins';
-import RoutableModals from './routable-modals';
-import { f7init, f7 } from '../shared/f7';
-
-
-
-var App = /*#__PURE__*/forwardRef(function (props, ref) {
-  var className = props.className,
-      style = props.style,
-      children = props.children,
-      rest = _objectWithoutPropertiesLoose(props, ["className", "style", "children"]);
-
-  var extraAttrs = getExtraAttrs(props);
-  var params = rest;
-  var elRef = useRef(null);
-  useImperativeHandle(ref, function () {
-    return {
-      el: elRef.current
-    };
-  });
-  var classes = classNames(className, 'framework7-root', colorClasses(props)); // eslint-disable-next-line
+import { useIsomorphicLayoutEffect } from '../shared/use-isomorphic-layout-effect.js';
+import { classNames, getExtraAttrs } from '../shared/utils.js';
+import { colorClasses } from '../shared/mixins.js';
+import RoutableModals from './routable-modals.js';
+import { f7init, f7 } from '../shared/f7.js';
+
+
+
+const App = /*#__PURE__*/forwardRef((props, ref) => {
+  const {
+    className,
+    style,
+    children,
+    ...rest
+  } = props;
+  const extraAttrs = getExtraAttrs(props);
+  const params = rest;
+  const elRef = useRef(null);
+  useImperativeHandle(ref, () => ({
+    el: elRef.current
+  }));
+  const classes = classNames(className, 'framework7-root', colorClasses(props)); // eslint-disable-next-line
 
   if (!f7 || typeof window === 'undefined') {
     f7init(elRef.current, params, false);
   }
 
-  useIsomorphicLayoutEffect(function () {
-    var parentEl = elRef.current && elRef.current.parentNode;
+  useIsomorphicLayoutEffect(() => {
+    const parentEl = elRef.current && elRef.current.parentNode;
     /* eslint-disable no-restricted-globals */
 
     if (typeof document !== 'undefined' && parentEl && parentEl !== document.body && parentEl.parentNode === document.body) {

package/{esm/components → components}/appbar.js

@@ -1,28 +1,27 @@
 function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
 import React, { forwardRef, useRef, useImperativeHandle } from 'react';
-import { classNames, getExtraAttrs, getSlots } from '../shared/utils';
-import { colorClasses } from '../shared/mixins';
+import { classNames, getExtraAttrs, getSlots } from '../shared/utils.js';
+import { colorClasses } from '../shared/mixins.js';
 
-var Appbar = /*#__PURE__*/forwardRef(function (props, ref) {
-  var className = props.className,
-      id = props.id,
-      style = props.style,
-      children = props.children,
-      _props$inner = props.inner,
-      inner = _props$inner === void 0 ? true : _props$inner,
-      innerClass = props.innerClass,
-      innerClassName = props.innerClassName,
-      noShadow = props.noShadow,
-      noHairline = props.noHairline;
-  var extraAttrs = getExtraAttrs(props);
-  var elRef = useRef(null);
-  useImperativeHandle(ref, function () {
-    return {
-      el: elRef.current
-    };
-  });
-  var innerEl;
+const Appbar = /*#__PURE__*/forwardRef((props, ref) => {
+  const {
+    className,
+    id,
+    style,
+    children,
+    inner = true,
+    innerClass,
+    innerClassName,
+    noShadow,
+    noHairline
+  } = props;
+  const extraAttrs = getExtraAttrs(props);
+  const elRef = useRef(null);
+  useImperativeHandle(ref, () => ({
+    el: elRef.current
+  }));
+  let innerEl;
 
   if (inner) {
     innerEl = /*#__PURE__*/React.createElement("div", {
@@ -30,11 +29,11 @@ var Appbar = /*#__PURE__*/forwardRef(function (props, ref) {
     }, children);
   }
 
-  var classes = classNames(className, 'appbar', {
+  const classes = classNames(className, 'appbar', {
     'no-shadow': noShadow,
     'no-hairline': noHairline
   }, colorClasses(props));
-  var slots = getSlots(props);
+  const slots = getSlots(props);
   return /*#__PURE__*/React.createElement("div", _extends({
     id: id,
     style: style,