framework7-react 8.0.0-beta.3 → 8.0.0-beta.5

package/components/actions-label.d.ts

@@ -7,7 +7,7 @@ export interface ActionsLabelProps {
   id?: string | number;
   className?: string;
   style?: React.CSSProperties;
-  bold?: boolean;
+  strong?: boolean;
   onClick?: (event?: any) => void;
   ref?: React.MutableRefObject<{el: HTMLElement | null}>;
   children?: React.ReactNode;

package/components/popover.d.ts

@@ -12,7 +12,7 @@ export interface PopoverProps {
   opened ?: boolean;
   animate ?: boolean;
   targetEl ?: string | object;
-  angle ?: boolean;
+  arrow ?: boolean;
   backdrop ?: boolean;
   backdropEl ?: string | object;
   closeByBackdropClick ?: boolean;

package/components/popover.js

@@ -19,7 +19,7 @@ const Popover = /*#__PURE__*/forwardRef((props, ref) => {
     opened,
     animate,
     targetEl,
-    angle,
+    arrow,
     backdrop,
     backdropEl,
     closeByBackdropClick,
@@ -77,7 +77,7 @@ const Popover = /*#__PURE__*/forwardRef((props, ref) => {
     if ('closeByBackdropClick' in props) popoverParams.closeByBackdropClick = closeByBackdropClick;
     if ('closeByOutsideClick' in props) popoverParams.closeByOutsideClick = closeByOutsideClick;
     if ('closeOnEscape' in props) popoverParams.closeOnEscape = closeOnEscape;
-    if ('angle' in props) popoverParams.angle = angle;
+    if ('arrow' in props) popoverParams.arrow = arrow;
     if ('backdrop' in props) popoverParams.backdrop = backdrop;
     if ('backdropEl' in props) popoverParams.backdropEl = backdropEl;
     if ('animate' in props) popoverParams.animate = animate;
@@ -117,7 +117,7 @@ const Popover = /*#__PURE__*/forwardRef((props, ref) => {
     className: classes,
     ref: elRef
   }, extraAttrs), /*#__PURE__*/React.createElement("div", {
-    className: "popover-angle"
+    className: "popover-arrow"
   }), /*#__PURE__*/React.createElement("div", {
     className: "popover-inner"
   }, children));

package/components/searchbar.d.ts

@@ -33,7 +33,7 @@ export interface SearchbarProps {
   ignore ?: string;
   customSearch ?: boolean;
   removeDiacritics ?: boolean;
-  hideDividers ?: boolean;
+  hideGroupTitles ?: boolean;
   hideGroups ?: boolean;
   init ?: boolean;
   color?: string;

package/components/searchbar.js

@@ -40,7 +40,7 @@ const Searchbar = /*#__PURE__*/forwardRef((props, ref) => {
     ignore = '.searchbar-ignore',
     customSearch = false,
     removeDiacritics = false,
-    hideDividers = true,
+    hideGroupTitles = true,
     hideGroups = true,
     init = true
   } = props;
@@ -117,7 +117,7 @@ const Searchbar = /*#__PURE__*/forwardRef((props, ref) => {
         ignore,
         customSearch,
         removeDiacritics,
-        hideDividers,
+        hideGroupTitles,
         hideGroups,
         expandable,
         inline,

package/components/tab.js

@@ -7,6 +7,7 @@ import { f7ready, f7routers, f7, f7events } from '../shared/f7.js';
 import { useTab } from '../shared/use-tab.js';
 import { RouterContext } from '../shared/router-context.js';
 import { useAsyncComponent } from '../shared/use-async-component.js';
+import { TabsSwipeableContext } from '../shared/tabs-swipeable-context.js';
 
 
 const Tab = /*#__PURE__*/forwardRef((props, ref) => {
@@ -21,6 +22,7 @@ const Tab = /*#__PURE__*/forwardRef((props, ref) => {
   const elRef = useRef(null);
   const routerData = useRef(null);
   const routerContext = useContext(RouterContext);
+  const tabsSwipeableContext = useContext(TabsSwipeableContext);
   let initialTabContent = null;
   if (!routerData.current && routerContext && routerContext.route && routerContext.route.route && routerContext.route.route.tab && routerContext.route.route.tab.id === id) {
     const {
@@ -97,12 +99,17 @@ const Tab = /*#__PURE__*/forwardRef((props, ref) => {
       key: tabContent.id
     }, tabContent.props));
   };
-  return /*#__PURE__*/React.createElement("div", _extends({
+  const Component = tabsSwipeableContext ? 'swiper-slide' : 'div';
+  const classAttrs = tabsSwipeableContext ? {
+    class: classes
+  } : {
+    className: classes
+  };
+  return /*#__PURE__*/React.createElement(Component, _extends({
     id: id,
     style: style,
-    className: classes,
     ref: elRef
-  }, extraAttrs), renderChildren());
+  }, extraAttrs, classAttrs), renderChildren());
 });
 Tab.displayName = 'f7-tab';
 export default Tab;

package/components/tabs.js

@@ -3,6 +3,7 @@ import React, { forwardRef, useRef, useImperativeHandle } from 'react';
 import { useIsomorphicLayoutEffect } from '../shared/use-isomorphic-layout-effect.js';
 import { classNames, getExtraAttrs } from '../shared/utils.js';
 import { colorClasses } from '../shared/mixins.js';
+import { TabsSwipeableContext } from '../shared/tabs-swipeable-context.js';
 
 
 const Tabs = /*#__PURE__*/forwardRef((props, ref) => {
@@ -24,27 +25,35 @@ const Tabs = /*#__PURE__*/forwardRef((props, ref) => {
   useIsomorphicLayoutEffect(() => {
     if (!swipeable || !swiperParams) return;
     if (!elRef.current) return;
-    elRef.current.f7SwiperParams = swiperParams;
+    Object.assign(elRef.current, swiperParams);
+    elRef.current.initialize();
   }, []);
   const classes = classNames(className, colorClasses(props));
-  const wrapClasses = classNames({
-    'tabs-animated-wrap': animated,
-    'tabs-swipeable-wrap': swipeable
-  });
   const tabsClasses = classNames({
     tabs: true,
     'tabs-routable': routable
   });
-  if (animated || swipeable) {
+  if (animated) {
     return /*#__PURE__*/React.createElement("div", _extends({
       id: id,
       style: style,
-      className: classNames(wrapClasses, classes),
+      className: classNames('tabs-animated-wrap', classes),
       ref: elRef
     }, extraAttrs), /*#__PURE__*/React.createElement("div", {
       className: tabsClasses
     }, children));
   }
+  if (swipeable) {
+    return /*#__PURE__*/React.createElement("swiper-container", _extends({
+      id: id,
+      style: style,
+      class: classNames(tabsClasses, classes),
+      ref: elRef,
+      init: swiperParams ? 'false' : 'true'
+    }, extraAttrs), /*#__PURE__*/React.createElement(TabsSwipeableContext.Provider, {
+      value: true
+    }, children));
+  }
   return /*#__PURE__*/React.createElement("div", _extends({
     id: id,
     style: style,

package/framework7-react.js

@@ -1,5 +1,5 @@
 /**
- * Framework7 React 8.0.0-beta.3
+ * Framework7 React 8.0.0-beta.5
  * Build full featured iOS & Android apps using Framework7 & React
  * https://framework7.io/react/
  *
@@ -7,7 +7,7 @@
  *
  * Released under the MIT License
  *
- * Released on: March 9, 2023
+ * Released on: March 23, 2023
  */
 import Framework7React from './shared/plugin.js';
 import { f7, f7ready, theme } from './shared/f7.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "framework7-react",
-  "version": "8.0.0-beta.3",
+  "version": "8.0.0-beta.5",
   "description": "Build full featured iOS & Android apps using Framework7 & React",
   "type": "module",
   "exports": {
@@ -47,5 +47,5 @@
     "type": "patreon",
     "url": "https://www.patreon.com/framework7"
   },
-  "releaseDate": "March 9, 2023"
+  "releaseDate": "March 23, 2023"
 }

package/shared/tabs-swipeable-context.js

@@ -0,0 +1,3 @@
+import React from 'react';
+const TabsSwipeableContext = /*#__PURE__*/React.createContext(false);
+export { TabsSwipeableContext };