react-alp-connection-state 7.2.0 → 8.1.0

package/CHANGELOG.md

@@ -1,8 +1,36 @@
-# Change Log
+# Changelog
 
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [8.1.0](https://github.com/christophehurpeau/alp/compare/react-alp-connection-state@8.0.0...react-alp-connection-state@8.1.0) (2023-12-25)
+
+
+### Features
+
+* update dependencies ([ddc8f92](https://github.com/christophehurpeau/alp/commit/ddc8f92cccacf6ed2baabf8555f0b37fe281ce9d))
+
+
+
+
+## [8.0.0](https://github.com/christophehurpeau/alp/compare/react-alp-connection-state@7.2.0...react-alp-connection-state@8.0.0) (2023-07-29)
+
+
+### ⚠ BREAKING CHANGES
+
+* drop node 16
+
+### Features
+
+* update react-native and react-native-web ([676e18a](https://github.com/christophehurpeau/alp/commit/676e18aefbe4a9b48debcbfb5327ae7e50d70d6f))
+
+
+### Code Refactoring
+
+* update to node 18 ([26280d6](https://github.com/christophehurpeau/alp/commit/26280d638aba1bd46fa42ad5a571b9626f1fff6d))
+
+
+
 ## [7.2.0](https://github.com/christophehurpeau/alp/compare/react-alp-connection-state@7.1.5...react-alp-connection-state@7.2.0) (2023-03-19)
 
 

package/dist/definitions/index.d.ts

@@ -13,7 +13,7 @@ declare const defaultTheme: {
     backgroundColorConnected: string;
 };
 export type ConnectionStateTheme = typeof defaultTheme;
-export type State = null | 'connecting' | 'connected' | 'disconnected';
+export type State = 'connected' | 'connecting' | 'disconnected' | null;
 export interface ConnectionStateProps {
     theme?: ConnectionStateTheme;
     forceHidden?: boolean;

package/dist/definitions/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAYrD,QAAA,MAAM,YAAY;;;;;;;;;;;;CASjB,CAAC;AAEF,MAAM,MAAM,oBAAoB,GAAG,OAAO,YAAY,CAAC;AACvD,MAAM,MAAM,KAAK,GAAG,IAAI,GAAG,YAAY,GAAG,WAAW,GAAG,cAAc,CAAC;AAEvE,MAAM,WAAW,oBAAoB;IACnC,KAAK,CAAC,EAAE,oBAAoB,CAAC;IAC7B,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,KAAK,EAAE,KAAK,CAAC;IACb,QAAQ,EAAE,WAAW,CAAC,SAAS,CAAC,CAAC;CAClC;AAsDD,wBAAgB,eAAe,CAAC,EAC9B,KAAK,EACL,WAAW,EACX,KAAK,EACL,QAAQ,GACT,EAAE,oBAAoB,GAAG,YAAY,GAAG,IAAI,CAgD5C"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAYrD,QAAA,MAAM,YAAY;;;;;;;;;;;;CASjB,CAAC;AAEF,MAAM,MAAM,oBAAoB,GAAG,OAAO,YAAY,CAAC;AACvD,MAAM,MAAM,KAAK,GAAG,WAAW,GAAG,YAAY,GAAG,cAAc,GAAG,IAAI,CAAC;AAEvE,MAAM,WAAW,oBAAoB;IACnC,KAAK,CAAC,EAAE,oBAAoB,CAAC;IAC7B,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,KAAK,EAAE,KAAK,CAAC;IACb,QAAQ,EAAE,WAAW,CAAC,SAAS,CAAC,CAAC;CAClC;AAsDD,wBAAgB,eAAe,CAAC,EAC9B,KAAK,EACL,WAAW,EACX,KAAK,EACL,QAAQ,GACT,EAAE,oBAAoB,GAAG,YAAY,GAAG,IAAI,CAgD5C"}

package/dist/index-browser.cjs.js

@@ -1,10 +1,10 @@
 'use strict';
 
-var react = require('react');
-var reactNative = require('react-native');
-var jsxRuntime = require('react/jsx-runtime');
+const react = require('react');
+const reactNative = require('react-native');
+const jsxRuntime = require('react/jsx-runtime');
 
-var defaultTheme = {
+const defaultTheme = {
   container: {
     backgroundColor: 'rgba(247, 25, 0, 0.8)',
     color: '#fff',
@@ -17,22 +17,18 @@ var defaultTheme = {
   },
   backgroundColorConnected: 'rgba(25, 200, 60, 0.8)'
 };
-var useCreateCalcNative = function useCreateCalcNative() {
-  var dimensions = reactNative.useWindowDimensions();
-  return function (webCalc, createCalc) {
-    return createCalc(dimensions);
-  };
+const useCreateCalcNative = () => {
+  const dimensions = reactNative.useWindowDimensions();
+  return (webCalc, createCalc) => createCalc(dimensions);
 };
-var useCreateCalcWeb = function useCreateCalcWeb() {
-  return function (webCalc) {
-    return "calc(" + webCalc + ")";
-  };
+const useCreateCalcWeb = () => {
+  return webCalc => `calc(${webCalc})`;
 };
-var useCreateCalc = reactNative.Platform.OS === 'web' ? useCreateCalcWeb : useCreateCalcNative;
+const useCreateCalc = reactNative.Platform.OS === 'web' ? useCreateCalcWeb : useCreateCalcNative;
 
 // example: const left = createCalc('50% - 100px', ({ width }) => width / 2 - 100);
 
-var styles = reactNative.StyleSheet.create({
+const styles = reactNative.StyleSheet.create({
   connectionStateContainer: {
     backgroundColor: defaultTheme.container.backgroundColor,
     position: 'absolute',
@@ -63,25 +59,25 @@ var styles = reactNative.StyleSheet.create({
     transition: 'background-color .2s'
   }
 });
-function ConnectionState(_ref) {
-  var theme = _ref.theme,
-    forceHidden = _ref.forceHidden,
-    state = _ref.state,
-    children = _ref.children;
-  var unloadingRef = react.useRef(false);
-  var createCalc = useCreateCalc();
-  var left = createCalc('50% - 100px', function (_ref2) {
-    var width = _ref2.width;
-    return width / 2 - 100;
-  }); // TODO use calc() in web ?
+function ConnectionState({
+  theme,
+  forceHidden,
+  state,
+  children
+}) {
+  const unloadingRef = react.useRef(false);
+  const createCalc = useCreateCalc();
+  const left = createCalc('50% - 100px', ({
+    width
+  }) => width / 2 - 100); // TODO use calc() in web ?
 
-  react.useEffect(function () {
+  react.useEffect(() => {
     if (typeof window === 'undefined') return;
-    var beforeUnloadHandler = function beforeUnloadHandler() {
+    const beforeUnloadHandler = () => {
       unloadingRef.current = true;
     };
     window.addEventListener('beforeunload', beforeUnloadHandler);
-    return function () {
+    return () => {
       window.removeEventListener('beforeunload', beforeUnloadHandler);
     };
   }, []);
@@ -95,7 +91,7 @@ function ConnectionState(_ref) {
       }, state === 'connected' && {
         backgroundColor: (theme || defaultTheme).backgroundColorConnected
       }, {
-        left: left
+        left
       }],
       children: children
     })

package/dist/index-browser.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"index-browser.cjs.js","sources":["../src/index.tsx"],"sourcesContent":["import type { ReactElement, ReactNode } from 'react';\nimport { useEffect, useRef } from 'react';\nimport type { ScaledSize } from 'react-native';\nimport {\n  View,\n  Text,\n  StyleSheet,\n  Platform,\n  useWindowDimensions,\n  // eslint-disable-next-line import/no-unresolved -- react-native-web or react-native\n} from 'react-native';\n\nconst defaultTheme = {\n  container: {\n    backgroundColor: 'rgba(247, 25, 0, 0.8)',\n    color: '#fff',\n    textShadowColor: '#111',\n    textShadowOffset: { width: 0, height: -1 },\n    textShadowRadius: 1,\n  },\n  backgroundColorConnected: 'rgba(25, 200, 60, 0.8)',\n};\n\nexport type ConnectionStateTheme = typeof defaultTheme;\nexport type State = null | 'connecting' | 'connected' | 'disconnected';\n\nexport interface ConnectionStateProps {\n  theme?: ConnectionStateTheme;\n  forceHidden?: boolean;\n  state: State;\n  children: NonNullable<ReactNode>;\n}\n\nconst zDepth1 =\n  '0 2px 3px 0 rgba(0, 0, 0, 0.15), 0 2px 5px 0 rgba(0, 0, 0, 0.2)';\n\ntype CreateCalc = (\n  webCalc: string,\n  createCalc: (dimensions: ScaledSize) => number,\n) => string | number;\n\nconst useCreateCalcNative = (): CreateCalc => {\n  const dimensions = useWindowDimensions();\n  return (webCalc, createCalc) => createCalc(dimensions);\n};\nconst useCreateCalcWeb = (): CreateCalc => {\n  return (webCalc) => `calc(${webCalc})`;\n};\nconst useCreateCalc =\n  Platform.OS === 'web' ? useCreateCalcWeb : useCreateCalcNative;\n\n// example: const left = createCalc('50% - 100px', ({ width }) => width / 2 - 100);\n\nconst styles = StyleSheet.create({\n  connectionStateContainer: {\n    backgroundColor: defaultTheme.container.backgroundColor,\n    position: 'absolute',\n    top: 0,\n    right: 0,\n    left: 0,\n    height: 2,\n    color: defaultTheme.container.color,\n    textShadowOffset: defaultTheme.container.textShadowOffset,\n    textShadowRadius: defaultTheme.container.textShadowRadius,\n    boxShadow: zDepth1,\n    zIndex: 9,\n    transition: 'top .8s, background-color .2s',\n  },\n  hide: {\n    top: -24,\n  },\n  connectionStateText: {\n    backgroundColor: defaultTheme.container.backgroundColor,\n    position: 'absolute',\n    width: 200,\n    height: 22,\n    lineHeight: 22,\n    top: 2,\n    textAlign: 'center',\n    borderBottomLeftRadius: 5,\n    borderBottomRightRadius: 5,\n    transition: 'background-color .2s',\n  },\n});\n\nexport function ConnectionState({\n  theme,\n  forceHidden,\n  state,\n  children,\n}: ConnectionStateProps): ReactElement | null {\n  const unloadingRef = useRef<boolean>(false);\n\n  const createCalc = useCreateCalc();\n  const left = createCalc('50% - 100px', ({ width }) => width / 2 - 100); // TODO use calc() in web ?\n\n  useEffect((): (() => void) | undefined => {\n    if (typeof window === 'undefined') return;\n\n    const beforeUnloadHandler = (): void => {\n      unloadingRef.current = true;\n    };\n    window.addEventListener('beforeunload', beforeUnloadHandler);\n\n    return (): void => {\n      window.removeEventListener('beforeunload', beforeUnloadHandler);\n    };\n  }, []);\n\n  const shouldHide = forceHidden || !state || state === 'connected';\n\n  return (\n    <View\n      style={[\n        styles.connectionStateContainer,\n        shouldHide && styles.hide,\n        theme?.container,\n        state === 'connected' && {\n          backgroundColor: (theme || defaultTheme).backgroundColorConnected,\n        },\n      ]}\n    >\n      {!state ? null : (\n        <Text\n          style={[\n            styles.connectionStateText,\n            theme && { backgroundColor: theme.container.backgroundColor },\n            state === 'connected' && {\n              backgroundColor: (theme || defaultTheme).backgroundColorConnected,\n            },\n            { left },\n          ]}\n        >\n          {children}\n        </Text>\n      )}\n    </View>\n  );\n}\n"],"names":["defaultTheme","container","backgroundColor","color","textShadowColor","textShadowOffset","width","height","textShadowRadius","backgroundColorConnected","useCreateCalcNative","dimensions","useWindowDimensions","webCalc","createCalc","useCreateCalcWeb","useCreateCalc","Platform","OS","styles","StyleSheet","create","connectionStateContainer","position","top","right","left","boxShadow","zIndex","transition","hide","connectionStateText","lineHeight","textAlign","borderBottomLeftRadius","borderBottomRightRadius","ConnectionState","_ref","theme","forceHidden","state","children","unloadingRef","useRef","_ref2","useEffect","window","beforeUnloadHandler","current","addEventListener","removeEventListener","_jsx","View","style","Text"],"mappings":"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"}
+{"version":3,"file":"index-browser.cjs.js","sources":["../src/index.tsx"],"sourcesContent":["import type { ReactElement, ReactNode } from 'react';\nimport { useEffect, useRef } from 'react';\nimport type { DimensionValue, ScaledSize } from 'react-native';\nimport {\n  View,\n  Text,\n  StyleSheet,\n  Platform,\n  useWindowDimensions,\n  // eslint-disable-next-line import/no-unresolved -- react-native-web or react-native\n} from 'react-native';\n\nconst defaultTheme = {\n  container: {\n    backgroundColor: 'rgba(247, 25, 0, 0.8)',\n    color: '#fff',\n    textShadowColor: '#111',\n    textShadowOffset: { width: 0, height: -1 },\n    textShadowRadius: 1,\n  },\n  backgroundColorConnected: 'rgba(25, 200, 60, 0.8)',\n};\n\nexport type ConnectionStateTheme = typeof defaultTheme;\nexport type State = 'connected' | 'connecting' | 'disconnected' | null;\n\nexport interface ConnectionStateProps {\n  theme?: ConnectionStateTheme;\n  forceHidden?: boolean;\n  state: State;\n  children: NonNullable<ReactNode>;\n}\n\nconst zDepth1 =\n  '0 2px 3px 0 rgba(0, 0, 0, 0.15), 0 2px 5px 0 rgba(0, 0, 0, 0.2)';\n\ntype CreateCalc = (\n  webCalc: string,\n  createCalc: (dimensions: ScaledSize) => DimensionValue,\n) => DimensionValue;\n\nconst useCreateCalcNative = (): CreateCalc => {\n  const dimensions = useWindowDimensions();\n  return (webCalc, createCalc) => createCalc(dimensions);\n};\nconst useCreateCalcWeb = (): CreateCalc => {\n  return (webCalc) => `calc(${webCalc})` as DimensionValue;\n};\nconst useCreateCalc =\n  Platform.OS === 'web' ? useCreateCalcWeb : useCreateCalcNative;\n\n// example: const left = createCalc('50% - 100px', ({ width }) => width / 2 - 100);\n\nconst styles = StyleSheet.create({\n  connectionStateContainer: {\n    backgroundColor: defaultTheme.container.backgroundColor,\n    position: 'absolute',\n    top: 0,\n    right: 0,\n    left: 0,\n    height: 2,\n    color: defaultTheme.container.color,\n    textShadowOffset: defaultTheme.container.textShadowOffset,\n    textShadowRadius: defaultTheme.container.textShadowRadius,\n    boxShadow: zDepth1,\n    zIndex: 9,\n    transition: 'top .8s, background-color .2s',\n  },\n  hide: {\n    top: -24,\n  },\n  connectionStateText: {\n    backgroundColor: defaultTheme.container.backgroundColor,\n    position: 'absolute',\n    width: 200,\n    height: 22,\n    lineHeight: 22,\n    top: 2,\n    textAlign: 'center',\n    borderBottomLeftRadius: 5,\n    borderBottomRightRadius: 5,\n    transition: 'background-color .2s',\n  },\n});\n\nexport function ConnectionState({\n  theme,\n  forceHidden,\n  state,\n  children,\n}: ConnectionStateProps): ReactElement | null {\n  const unloadingRef = useRef<boolean>(false);\n\n  const createCalc = useCreateCalc();\n  const left = createCalc('50% - 100px', ({ width }) => width / 2 - 100); // TODO use calc() in web ?\n\n  useEffect((): (() => void) | undefined => {\n    if (typeof window === 'undefined') return;\n\n    const beforeUnloadHandler = (): void => {\n      unloadingRef.current = true;\n    };\n    window.addEventListener('beforeunload', beforeUnloadHandler);\n\n    return (): void => {\n      window.removeEventListener('beforeunload', beforeUnloadHandler);\n    };\n  }, []);\n\n  const shouldHide = forceHidden || !state || state === 'connected';\n\n  return (\n    <View\n      style={[\n        styles.connectionStateContainer,\n        shouldHide && styles.hide,\n        theme?.container,\n        state === 'connected' && {\n          backgroundColor: (theme || defaultTheme).backgroundColorConnected,\n        },\n      ]}\n    >\n      {!state ? null : (\n        <Text\n          style={[\n            styles.connectionStateText,\n            theme && { backgroundColor: theme.container.backgroundColor },\n            state === 'connected' && {\n              backgroundColor: (theme || defaultTheme).backgroundColorConnected,\n            },\n            { left },\n          ]}\n        >\n          {children}\n        </Text>\n      )}\n    </View>\n  );\n}\n"],"names":["defaultTheme","container","backgroundColor","color","textShadowColor","textShadowOffset","width","height","textShadowRadius","backgroundColorConnected","useCreateCalcNative","dimensions","useWindowDimensions","webCalc","createCalc","useCreateCalcWeb","useCreateCalc","Platform","OS","styles","StyleSheet","create","connectionStateContainer","position","top","right","left","boxShadow","zIndex","transition","hide","connectionStateText","lineHeight","textAlign","borderBottomLeftRadius","borderBottomRightRadius","ConnectionState","theme","forceHidden","state","children","unloadingRef","useRef","useEffect","window","beforeUnloadHandler","current","addEventListener","removeEventListener","_jsx","View","style","Text"],"mappings":"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"}

package/dist/index-browser.es.js

@@ -2,7 +2,7 @@ import { useRef, useEffect } from 'react';
 import { Platform, StyleSheet, useWindowDimensions, View, Text } from 'react-native';
 import { jsx } from 'react/jsx-runtime';
 
-var defaultTheme = {
+const defaultTheme = {
   container: {
     backgroundColor: 'rgba(247, 25, 0, 0.8)',
     color: '#fff',
@@ -15,22 +15,18 @@ var defaultTheme = {
   },
   backgroundColorConnected: 'rgba(25, 200, 60, 0.8)'
 };
-var useCreateCalcNative = function useCreateCalcNative() {
-  var dimensions = useWindowDimensions();
-  return function (webCalc, createCalc) {
-    return createCalc(dimensions);
-  };
+const useCreateCalcNative = () => {
+  const dimensions = useWindowDimensions();
+  return (webCalc, createCalc) => createCalc(dimensions);
 };
-var useCreateCalcWeb = function useCreateCalcWeb() {
-  return function (webCalc) {
-    return "calc(" + webCalc + ")";
-  };
+const useCreateCalcWeb = () => {
+  return webCalc => `calc(${webCalc})`;
 };
-var useCreateCalc = Platform.OS === 'web' ? useCreateCalcWeb : useCreateCalcNative;
+const useCreateCalc = Platform.OS === 'web' ? useCreateCalcWeb : useCreateCalcNative;
 
 // example: const left = createCalc('50% - 100px', ({ width }) => width / 2 - 100);
 
-var styles = StyleSheet.create({
+const styles = StyleSheet.create({
   connectionStateContainer: {
     backgroundColor: defaultTheme.container.backgroundColor,
     position: 'absolute',
@@ -61,25 +57,25 @@ var styles = StyleSheet.create({
     transition: 'background-color .2s'
   }
 });
-function ConnectionState(_ref) {
-  var theme = _ref.theme,
-    forceHidden = _ref.forceHidden,
-    state = _ref.state,
-    children = _ref.children;
-  var unloadingRef = useRef(false);
-  var createCalc = useCreateCalc();
-  var left = createCalc('50% - 100px', function (_ref2) {
-    var width = _ref2.width;
-    return width / 2 - 100;
-  }); // TODO use calc() in web ?
+function ConnectionState({
+  theme,
+  forceHidden,
+  state,
+  children
+}) {
+  const unloadingRef = useRef(false);
+  const createCalc = useCreateCalc();
+  const left = createCalc('50% - 100px', ({
+    width
+  }) => width / 2 - 100); // TODO use calc() in web ?
 
-  useEffect(function () {
+  useEffect(() => {
     if (typeof window === 'undefined') return;
-    var beforeUnloadHandler = function beforeUnloadHandler() {
+    const beforeUnloadHandler = () => {
       unloadingRef.current = true;
     };
     window.addEventListener('beforeunload', beforeUnloadHandler);
-    return function () {
+    return () => {
       window.removeEventListener('beforeunload', beforeUnloadHandler);
     };
   }, []);
@@ -93,7 +89,7 @@ function ConnectionState(_ref) {
       }, state === 'connected' && {
         backgroundColor: (theme || defaultTheme).backgroundColorConnected
       }, {
-        left: left
+        left
       }],
       children: children
     })

package/dist/index-browser.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"index-browser.es.js","sources":["../src/index.tsx"],"sourcesContent":["import type { ReactElement, ReactNode } from 'react';\nimport { useEffect, useRef } from 'react';\nimport type { ScaledSize } from 'react-native';\nimport {\n  View,\n  Text,\n  StyleSheet,\n  Platform,\n  useWindowDimensions,\n  // eslint-disable-next-line import/no-unresolved -- react-native-web or react-native\n} from 'react-native';\n\nconst defaultTheme = {\n  container: {\n    backgroundColor: 'rgba(247, 25, 0, 0.8)',\n    color: '#fff',\n    textShadowColor: '#111',\n    textShadowOffset: { width: 0, height: -1 },\n    textShadowRadius: 1,\n  },\n  backgroundColorConnected: 'rgba(25, 200, 60, 0.8)',\n};\n\nexport type ConnectionStateTheme = typeof defaultTheme;\nexport type State = null | 'connecting' | 'connected' | 'disconnected';\n\nexport interface ConnectionStateProps {\n  theme?: ConnectionStateTheme;\n  forceHidden?: boolean;\n  state: State;\n  children: NonNullable<ReactNode>;\n}\n\nconst zDepth1 =\n  '0 2px 3px 0 rgba(0, 0, 0, 0.15), 0 2px 5px 0 rgba(0, 0, 0, 0.2)';\n\ntype CreateCalc = (\n  webCalc: string,\n  createCalc: (dimensions: ScaledSize) => number,\n) => string | number;\n\nconst useCreateCalcNative = (): CreateCalc => {\n  const dimensions = useWindowDimensions();\n  return (webCalc, createCalc) => createCalc(dimensions);\n};\nconst useCreateCalcWeb = (): CreateCalc => {\n  return (webCalc) => `calc(${webCalc})`;\n};\nconst useCreateCalc =\n  Platform.OS === 'web' ? useCreateCalcWeb : useCreateCalcNative;\n\n// example: const left = createCalc('50% - 100px', ({ width }) => width / 2 - 100);\n\nconst styles = StyleSheet.create({\n  connectionStateContainer: {\n    backgroundColor: defaultTheme.container.backgroundColor,\n    position: 'absolute',\n    top: 0,\n    right: 0,\n    left: 0,\n    height: 2,\n    color: defaultTheme.container.color,\n    textShadowOffset: defaultTheme.container.textShadowOffset,\n    textShadowRadius: defaultTheme.container.textShadowRadius,\n    boxShadow: zDepth1,\n    zIndex: 9,\n    transition: 'top .8s, background-color .2s',\n  },\n  hide: {\n    top: -24,\n  },\n  connectionStateText: {\n    backgroundColor: defaultTheme.container.backgroundColor,\n    position: 'absolute',\n    width: 200,\n    height: 22,\n    lineHeight: 22,\n    top: 2,\n    textAlign: 'center',\n    borderBottomLeftRadius: 5,\n    borderBottomRightRadius: 5,\n    transition: 'background-color .2s',\n  },\n});\n\nexport function ConnectionState({\n  theme,\n  forceHidden,\n  state,\n  children,\n}: ConnectionStateProps): ReactElement | null {\n  const unloadingRef = useRef<boolean>(false);\n\n  const createCalc = useCreateCalc();\n  const left = createCalc('50% - 100px', ({ width }) => width / 2 - 100); // TODO use calc() in web ?\n\n  useEffect((): (() => void) | undefined => {\n    if (typeof window === 'undefined') return;\n\n    const beforeUnloadHandler = (): void => {\n      unloadingRef.current = true;\n    };\n    window.addEventListener('beforeunload', beforeUnloadHandler);\n\n    return (): void => {\n      window.removeEventListener('beforeunload', beforeUnloadHandler);\n    };\n  }, []);\n\n  const shouldHide = forceHidden || !state || state === 'connected';\n\n  return (\n    <View\n      style={[\n        styles.connectionStateContainer,\n        shouldHide && styles.hide,\n        theme?.container,\n        state === 'connected' && {\n          backgroundColor: (theme || defaultTheme).backgroundColorConnected,\n        },\n      ]}\n    >\n      {!state ? null : (\n        <Text\n          style={[\n            styles.connectionStateText,\n            theme && { backgroundColor: theme.container.backgroundColor },\n            state === 'connected' && {\n              backgroundColor: (theme || defaultTheme).backgroundColorConnected,\n            },\n            { left },\n          ]}\n        >\n          {children}\n        </Text>\n      )}\n    </View>\n  );\n}\n"],"names":["defaultTheme","container","backgroundColor","color","textShadowColor","textShadowOffset","width","height","textShadowRadius","backgroundColorConnected","useCreateCalcNative","dimensions","useWindowDimensions","webCalc","createCalc","useCreateCalcWeb","useCreateCalc","Platform","OS","styles","StyleSheet","create","connectionStateContainer","position","top","right","left","boxShadow","zIndex","transition","hide","connectionStateText","lineHeight","textAlign","borderBottomLeftRadius","borderBottomRightRadius","ConnectionState","_ref","theme","forceHidden","state","children","unloadingRef","useRef","_ref2","useEffect","window","beforeUnloadHandler","current","addEventListener","removeEventListener","_jsx","View","style","Text"],"mappings":"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"}
+{"version":3,"file":"index-browser.es.js","sources":["../src/index.tsx"],"sourcesContent":["import type { ReactElement, ReactNode } from 'react';\nimport { useEffect, useRef } from 'react';\nimport type { DimensionValue, ScaledSize } from 'react-native';\nimport {\n  View,\n  Text,\n  StyleSheet,\n  Platform,\n  useWindowDimensions,\n  // eslint-disable-next-line import/no-unresolved -- react-native-web or react-native\n} from 'react-native';\n\nconst defaultTheme = {\n  container: {\n    backgroundColor: 'rgba(247, 25, 0, 0.8)',\n    color: '#fff',\n    textShadowColor: '#111',\n    textShadowOffset: { width: 0, height: -1 },\n    textShadowRadius: 1,\n  },\n  backgroundColorConnected: 'rgba(25, 200, 60, 0.8)',\n};\n\nexport type ConnectionStateTheme = typeof defaultTheme;\nexport type State = 'connected' | 'connecting' | 'disconnected' | null;\n\nexport interface ConnectionStateProps {\n  theme?: ConnectionStateTheme;\n  forceHidden?: boolean;\n  state: State;\n  children: NonNullable<ReactNode>;\n}\n\nconst zDepth1 =\n  '0 2px 3px 0 rgba(0, 0, 0, 0.15), 0 2px 5px 0 rgba(0, 0, 0, 0.2)';\n\ntype CreateCalc = (\n  webCalc: string,\n  createCalc: (dimensions: ScaledSize) => DimensionValue,\n) => DimensionValue;\n\nconst useCreateCalcNative = (): CreateCalc => {\n  const dimensions = useWindowDimensions();\n  return (webCalc, createCalc) => createCalc(dimensions);\n};\nconst useCreateCalcWeb = (): CreateCalc => {\n  return (webCalc) => `calc(${webCalc})` as DimensionValue;\n};\nconst useCreateCalc =\n  Platform.OS === 'web' ? useCreateCalcWeb : useCreateCalcNative;\n\n// example: const left = createCalc('50% - 100px', ({ width }) => width / 2 - 100);\n\nconst styles = StyleSheet.create({\n  connectionStateContainer: {\n    backgroundColor: defaultTheme.container.backgroundColor,\n    position: 'absolute',\n    top: 0,\n    right: 0,\n    left: 0,\n    height: 2,\n    color: defaultTheme.container.color,\n    textShadowOffset: defaultTheme.container.textShadowOffset,\n    textShadowRadius: defaultTheme.container.textShadowRadius,\n    boxShadow: zDepth1,\n    zIndex: 9,\n    transition: 'top .8s, background-color .2s',\n  },\n  hide: {\n    top: -24,\n  },\n  connectionStateText: {\n    backgroundColor: defaultTheme.container.backgroundColor,\n    position: 'absolute',\n    width: 200,\n    height: 22,\n    lineHeight: 22,\n    top: 2,\n    textAlign: 'center',\n    borderBottomLeftRadius: 5,\n    borderBottomRightRadius: 5,\n    transition: 'background-color .2s',\n  },\n});\n\nexport function ConnectionState({\n  theme,\n  forceHidden,\n  state,\n  children,\n}: ConnectionStateProps): ReactElement | null {\n  const unloadingRef = useRef<boolean>(false);\n\n  const createCalc = useCreateCalc();\n  const left = createCalc('50% - 100px', ({ width }) => width / 2 - 100); // TODO use calc() in web ?\n\n  useEffect((): (() => void) | undefined => {\n    if (typeof window === 'undefined') return;\n\n    const beforeUnloadHandler = (): void => {\n      unloadingRef.current = true;\n    };\n    window.addEventListener('beforeunload', beforeUnloadHandler);\n\n    return (): void => {\n      window.removeEventListener('beforeunload', beforeUnloadHandler);\n    };\n  }, []);\n\n  const shouldHide = forceHidden || !state || state === 'connected';\n\n  return (\n    <View\n      style={[\n        styles.connectionStateContainer,\n        shouldHide && styles.hide,\n        theme?.container,\n        state === 'connected' && {\n          backgroundColor: (theme || defaultTheme).backgroundColorConnected,\n        },\n      ]}\n    >\n      {!state ? null : (\n        <Text\n          style={[\n            styles.connectionStateText,\n            theme && { backgroundColor: theme.container.backgroundColor },\n            state === 'connected' && {\n              backgroundColor: (theme || defaultTheme).backgroundColorConnected,\n            },\n            { left },\n          ]}\n        >\n          {children}\n        </Text>\n      )}\n    </View>\n  );\n}\n"],"names":["defaultTheme","container","backgroundColor","color","textShadowColor","textShadowOffset","width","height","textShadowRadius","backgroundColorConnected","useCreateCalcNative","dimensions","useWindowDimensions","webCalc","createCalc","useCreateCalcWeb","useCreateCalc","Platform","OS","styles","StyleSheet","create","connectionStateContainer","position","top","right","left","boxShadow","zIndex","transition","hide","connectionStateText","lineHeight","textAlign","borderBottomLeftRadius","borderBottomRightRadius","ConnectionState","theme","forceHidden","state","children","unloadingRef","useRef","useEffect","window","beforeUnloadHandler","current","addEventListener","removeEventListener","_jsx","View","style","Text"],"mappings":"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"}

package/dist/{index-node16.cjs → index-node18.cjs}

@@ -99,4 +99,4 @@ function ConnectionState({
 }
 
 exports.ConnectionState = ConnectionState;
-//# sourceMappingURL=index-node16.cjs.map
+//# sourceMappingURL=index-node18.cjs.map

package/dist/index-node18.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index-node18.cjs","sources":["../src/index.tsx"],"sourcesContent":["import type { ReactElement, ReactNode } from 'react';\nimport { useEffect, useRef } from 'react';\nimport type { DimensionValue, ScaledSize } from 'react-native';\nimport {\n  View,\n  Text,\n  StyleSheet,\n  Platform,\n  useWindowDimensions,\n  // eslint-disable-next-line import/no-unresolved -- react-native-web or react-native\n} from 'react-native';\n\nconst defaultTheme = {\n  container: {\n    backgroundColor: 'rgba(247, 25, 0, 0.8)',\n    color: '#fff',\n    textShadowColor: '#111',\n    textShadowOffset: { width: 0, height: -1 },\n    textShadowRadius: 1,\n  },\n  backgroundColorConnected: 'rgba(25, 200, 60, 0.8)',\n};\n\nexport type ConnectionStateTheme = typeof defaultTheme;\nexport type State = 'connected' | 'connecting' | 'disconnected' | null;\n\nexport interface ConnectionStateProps {\n  theme?: ConnectionStateTheme;\n  forceHidden?: boolean;\n  state: State;\n  children: NonNullable<ReactNode>;\n}\n\nconst zDepth1 =\n  '0 2px 3px 0 rgba(0, 0, 0, 0.15), 0 2px 5px 0 rgba(0, 0, 0, 0.2)';\n\ntype CreateCalc = (\n  webCalc: string,\n  createCalc: (dimensions: ScaledSize) => DimensionValue,\n) => DimensionValue;\n\nconst useCreateCalcNative = (): CreateCalc => {\n  const dimensions = useWindowDimensions();\n  return (webCalc, createCalc) => createCalc(dimensions);\n};\nconst useCreateCalcWeb = (): CreateCalc => {\n  return (webCalc) => `calc(${webCalc})` as DimensionValue;\n};\nconst useCreateCalc =\n  Platform.OS === 'web' ? useCreateCalcWeb : useCreateCalcNative;\n\n// example: const left = createCalc('50% - 100px', ({ width }) => width / 2 - 100);\n\nconst styles = StyleSheet.create({\n  connectionStateContainer: {\n    backgroundColor: defaultTheme.container.backgroundColor,\n    position: 'absolute',\n    top: 0,\n    right: 0,\n    left: 0,\n    height: 2,\n    color: defaultTheme.container.color,\n    textShadowOffset: defaultTheme.container.textShadowOffset,\n    textShadowRadius: defaultTheme.container.textShadowRadius,\n    boxShadow: zDepth1,\n    zIndex: 9,\n    transition: 'top .8s, background-color .2s',\n  },\n  hide: {\n    top: -24,\n  },\n  connectionStateText: {\n    backgroundColor: defaultTheme.container.backgroundColor,\n    position: 'absolute',\n    width: 200,\n    height: 22,\n    lineHeight: 22,\n    top: 2,\n    textAlign: 'center',\n    borderBottomLeftRadius: 5,\n    borderBottomRightRadius: 5,\n    transition: 'background-color .2s',\n  },\n});\n\nexport function ConnectionState({\n  theme,\n  forceHidden,\n  state,\n  children,\n}: ConnectionStateProps): ReactElement | null {\n  const unloadingRef = useRef<boolean>(false);\n\n  const createCalc = useCreateCalc();\n  const left = createCalc('50% - 100px', ({ width }) => width / 2 - 100); // TODO use calc() in web ?\n\n  useEffect((): (() => void) | undefined => {\n    if (typeof window === 'undefined') return;\n\n    const beforeUnloadHandler = (): void => {\n      unloadingRef.current = true;\n    };\n    window.addEventListener('beforeunload', beforeUnloadHandler);\n\n    return (): void => {\n      window.removeEventListener('beforeunload', beforeUnloadHandler);\n    };\n  }, []);\n\n  const shouldHide = forceHidden || !state || state === 'connected';\n\n  return (\n    <View\n      style={[\n        styles.connectionStateContainer,\n        shouldHide && styles.hide,\n        theme?.container,\n        state === 'connected' && {\n          backgroundColor: (theme || defaultTheme).backgroundColorConnected,\n        },\n      ]}\n    >\n      {!state ? null : (\n        <Text\n          style={[\n            styles.connectionStateText,\n            theme && { backgroundColor: theme.container.backgroundColor },\n            state === 'connected' && {\n              backgroundColor: (theme || defaultTheme).backgroundColorConnected,\n            },\n            { left },\n          ]}\n        >\n          {children}\n        </Text>\n      )}\n    </View>\n  );\n}\n"],"names":["defaultTheme","container","backgroundColor","color","textShadowColor","textShadowOffset","width","height","textShadowRadius","backgroundColorConnected","useCreateCalcNative","dimensions","useWindowDimensions","webCalc","createCalc","useCreateCalcWeb","useCreateCalc","Platform","OS","styles","StyleSheet","create","connectionStateContainer","position","top","right","left","boxShadow","zIndex","transition","hide","connectionStateText","lineHeight","textAlign","borderBottomLeftRadius","borderBottomRightRadius","ConnectionState","theme","forceHidden","state","children","unloadingRef","useRef","useEffect","window","beforeUnloadHandler","current","addEventListener","removeEventListener","_jsx","View","style","Text"],"mappings":"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"}

package/dist/{index-node16.mjs → index-node18.mjs}

@@ -97,4 +97,4 @@ function ConnectionState({
 }
 
 export { ConnectionState };
-//# sourceMappingURL=index-node16.mjs.map
+//# sourceMappingURL=index-node18.mjs.map

package/dist/index-node18.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index-node18.mjs","sources":["../src/index.tsx"],"sourcesContent":["import type { ReactElement, ReactNode } from 'react';\nimport { useEffect, useRef } from 'react';\nimport type { DimensionValue, ScaledSize } from 'react-native';\nimport {\n  View,\n  Text,\n  StyleSheet,\n  Platform,\n  useWindowDimensions,\n  // eslint-disable-next-line import/no-unresolved -- react-native-web or react-native\n} from 'react-native';\n\nconst defaultTheme = {\n  container: {\n    backgroundColor: 'rgba(247, 25, 0, 0.8)',\n    color: '#fff',\n    textShadowColor: '#111',\n    textShadowOffset: { width: 0, height: -1 },\n    textShadowRadius: 1,\n  },\n  backgroundColorConnected: 'rgba(25, 200, 60, 0.8)',\n};\n\nexport type ConnectionStateTheme = typeof defaultTheme;\nexport type State = 'connected' | 'connecting' | 'disconnected' | null;\n\nexport interface ConnectionStateProps {\n  theme?: ConnectionStateTheme;\n  forceHidden?: boolean;\n  state: State;\n  children: NonNullable<ReactNode>;\n}\n\nconst zDepth1 =\n  '0 2px 3px 0 rgba(0, 0, 0, 0.15), 0 2px 5px 0 rgba(0, 0, 0, 0.2)';\n\ntype CreateCalc = (\n  webCalc: string,\n  createCalc: (dimensions: ScaledSize) => DimensionValue,\n) => DimensionValue;\n\nconst useCreateCalcNative = (): CreateCalc => {\n  const dimensions = useWindowDimensions();\n  return (webCalc, createCalc) => createCalc(dimensions);\n};\nconst useCreateCalcWeb = (): CreateCalc => {\n  return (webCalc) => `calc(${webCalc})` as DimensionValue;\n};\nconst useCreateCalc =\n  Platform.OS === 'web' ? useCreateCalcWeb : useCreateCalcNative;\n\n// example: const left = createCalc('50% - 100px', ({ width }) => width / 2 - 100);\n\nconst styles = StyleSheet.create({\n  connectionStateContainer: {\n    backgroundColor: defaultTheme.container.backgroundColor,\n    position: 'absolute',\n    top: 0,\n    right: 0,\n    left: 0,\n    height: 2,\n    color: defaultTheme.container.color,\n    textShadowOffset: defaultTheme.container.textShadowOffset,\n    textShadowRadius: defaultTheme.container.textShadowRadius,\n    boxShadow: zDepth1,\n    zIndex: 9,\n    transition: 'top .8s, background-color .2s',\n  },\n  hide: {\n    top: -24,\n  },\n  connectionStateText: {\n    backgroundColor: defaultTheme.container.backgroundColor,\n    position: 'absolute',\n    width: 200,\n    height: 22,\n    lineHeight: 22,\n    top: 2,\n    textAlign: 'center',\n    borderBottomLeftRadius: 5,\n    borderBottomRightRadius: 5,\n    transition: 'background-color .2s',\n  },\n});\n\nexport function ConnectionState({\n  theme,\n  forceHidden,\n  state,\n  children,\n}: ConnectionStateProps): ReactElement | null {\n  const unloadingRef = useRef<boolean>(false);\n\n  const createCalc = useCreateCalc();\n  const left = createCalc('50% - 100px', ({ width }) => width / 2 - 100); // TODO use calc() in web ?\n\n  useEffect((): (() => void) | undefined => {\n    if (typeof window === 'undefined') return;\n\n    const beforeUnloadHandler = (): void => {\n      unloadingRef.current = true;\n    };\n    window.addEventListener('beforeunload', beforeUnloadHandler);\n\n    return (): void => {\n      window.removeEventListener('beforeunload', beforeUnloadHandler);\n    };\n  }, []);\n\n  const shouldHide = forceHidden || !state || state === 'connected';\n\n  return (\n    <View\n      style={[\n        styles.connectionStateContainer,\n        shouldHide && styles.hide,\n        theme?.container,\n        state === 'connected' && {\n          backgroundColor: (theme || defaultTheme).backgroundColorConnected,\n        },\n      ]}\n    >\n      {!state ? null : (\n        <Text\n          style={[\n            styles.connectionStateText,\n            theme && { backgroundColor: theme.container.backgroundColor },\n            state === 'connected' && {\n              backgroundColor: (theme || defaultTheme).backgroundColorConnected,\n            },\n            { left },\n          ]}\n        >\n          {children}\n        </Text>\n      )}\n    </View>\n  );\n}\n"],"names":["defaultTheme","container","backgroundColor","color","textShadowColor","textShadowOffset","width","height","textShadowRadius","backgroundColorConnected","useCreateCalcNative","dimensions","useWindowDimensions","webCalc","createCalc","useCreateCalcWeb","useCreateCalc","Platform","OS","styles","StyleSheet","create","connectionStateContainer","position","top","right","left","boxShadow","zIndex","transition","hide","connectionStateText","lineHeight","textAlign","borderBottomLeftRadius","borderBottomRightRadius","ConnectionState","theme","forceHidden","state","children","unloadingRef","useRef","useEffect","window","beforeUnloadHandler","current","addEventListener","removeEventListener","_jsx","View","style","Text"],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-alp-connection-state",
-  "version": "7.2.0",
+  "version": "8.1.0",
   "description": "connection state",
   "keywords": [],
   "author": "Christophe Hurpeau <christophe@hurpeau.com> (https://christophe.hurpeau.com)",
@@ -13,7 +13,7 @@
   "homepage": "https://github.com/christophehurpeau/alp",
   "type": "module",
   "engines": {
-    "node": ">=16.0.0"
+    "node": ">=18.12.0"
   },
   "browserslist": {
     "production": [
@@ -24,27 +24,29 @@
       "not ios_saf < 10"
     ]
   },
-  "main": "./dist/index-node16.mjs",
+  "main": "./dist/index-node18.mjs",
   "types": "./dist/definitions/index.d.ts",
   "module": "./dist/index-browser.es.js",
   "browser": "./dist/index-browser.es.js",
   "exports": {
     "./package.json": "./package.json",
     ".": {
+      "types": "./dist/definitions/index.d.ts",
       "node": {
-        "import": "./dist/index-node16.mjs",
-        "require": "./dist/index-node16.cjs"
+        "import": "./dist/index-node18.mjs",
+        "require": "./dist/index-node18.cjs"
       },
       "browser": {
-        "browser:modern": {
-          "import": "./dist/index-browsermodern.es.js"
-        },
         "import": "./dist/index-browser.es.js",
         "require": "./dist/index-browser.cjs.js"
       }
     }
   },
   "sideEffects": false,
+  "files": [
+    "src",
+    "dist"
+  ],
   "scripts": {
     "build": "yarn clean:build && rollup --config rollup.config.mjs && yarn run build:definitions",
     "build:definitions": "tsc -p tsconfig.json",
@@ -59,16 +61,12 @@
     "babelEnvs": [
       {
         "target": "node",
-        "version": "16",
+        "version": "18",
         "formats": [
           "cjs",
           "es"
         ]
       },
-      {
-        "target": "browser",
-        "version": "modern"
-      },
       {
         "target": "browser",
         "formats": [
@@ -92,16 +90,15 @@
     }
   },
   "dependencies": {
-    "@babel/runtime": "^7.21.0"
+    "@babel/runtime": "^7.23.6"
   },
   "devDependencies": {
-    "@babel/core": "7.21.3",
-    "@babel/preset-env": "7.20.2",
-    "@babel/preset-react": "7.18.6",
-    "@types/react-native": "0.71.3",
-    "pob-babel": "35.6.2",
+    "@babel/core": "7.23.6",
+    "@babel/preset-env": "7.23.6",
+    "@babel/preset-react": "7.23.3",
+    "@types/react-native": "0.72.5",
+    "pob-babel": "38.0.0",
     "react": "18.2.0",
-    "typescript": "4.9.5"
-  },
-  "gitHead": "f7dfa98e33968879e3b16541652a316e92782259"
-}
+    "typescript": "5.3.3"
+  }
+}

package/src/index.tsx

@@ -1,6 +1,6 @@
 import type { ReactElement, ReactNode } from 'react';
 import { useEffect, useRef } from 'react';
-import type { ScaledSize } from 'react-native';
+import type { DimensionValue, ScaledSize } from 'react-native';
 import {
   View,
   Text,
@@ -22,7 +22,7 @@ const defaultTheme = {
 };
 
 export type ConnectionStateTheme = typeof defaultTheme;
-export type State = null | 'connecting' | 'connected' | 'disconnected';
+export type State = 'connected' | 'connecting' | 'disconnected' | null;
 
 export interface ConnectionStateProps {
   theme?: ConnectionStateTheme;
@@ -36,15 +36,15 @@ const zDepth1 =
 
 type CreateCalc = (
   webCalc: string,
-  createCalc: (dimensions: ScaledSize) => number,
-) => string | number;
+  createCalc: (dimensions: ScaledSize) => DimensionValue,
+) => DimensionValue;
 
 const useCreateCalcNative = (): CreateCalc => {
   const dimensions = useWindowDimensions();
   return (webCalc, createCalc) => createCalc(dimensions);
 };
 const useCreateCalcWeb = (): CreateCalc => {
-  return (webCalc) => `calc(${webCalc})`;
+  return (webCalc) => `calc(${webCalc})` as DimensionValue;
 };
 const useCreateCalc =
   Platform.OS === 'web' ? useCreateCalcWeb : useCreateCalcNative;

package/.editorconfig

@@ -1,13 +0,0 @@
-# EditorConfig helps developers define and maintain consistent
-# coding styles between different editors and IDEs
-# http://editorconfig.org
-
-root = true
-
-[*]
-indent_style = space
-indent_size = 2
-end_of_line = lf
-charset = utf-8
-trim_trailing_whitespace = true
-insert_final_newline = true

package/.eslintrc.json

@@ -1,8 +0,0 @@
-{
-  "root": true,
-  "extends": ["@pob/eslint-config/root-module"],
-  "env": {
-    "browser": true
-  },
-  "ignorePatterns": ["*.d.ts", "/dist"]
-}

package/AUTHORS

@@ -1 +0,0 @@
-Christophe Hurpeau <christophe@hurpeau.com>

package/dist/index-browsermodern.es.js

@@ -1,100 +0,0 @@
-import { useRef, useEffect } from 'react';
-import { Platform, StyleSheet, useWindowDimensions, View, Text } from 'react-native';
-import { jsx } from 'react/jsx-runtime';
-
-const defaultTheme = {
-  container: {
-    backgroundColor: 'rgba(247, 25, 0, 0.8)',
-    color: '#fff',
-    textShadowColor: '#111',
-    textShadowOffset: {
-      width: 0,
-      height: -1
-    },
-    textShadowRadius: 1
-  },
-  backgroundColorConnected: 'rgba(25, 200, 60, 0.8)'
-};
-const useCreateCalcNative = () => {
-  const dimensions = useWindowDimensions();
-  return (webCalc, createCalc) => createCalc(dimensions);
-};
-const useCreateCalcWeb = () => {
-  return webCalc => `calc(${webCalc})`;
-};
-const useCreateCalc = Platform.OS === 'web' ? useCreateCalcWeb : useCreateCalcNative;
-
-// example: const left = createCalc('50% - 100px', ({ width }) => width / 2 - 100);
-
-const styles = StyleSheet.create({
-  connectionStateContainer: {
-    backgroundColor: defaultTheme.container.backgroundColor,
-    position: 'absolute',
-    top: 0,
-    right: 0,
-    left: 0,
-    height: 2,
-    color: defaultTheme.container.color,
-    textShadowOffset: defaultTheme.container.textShadowOffset,
-    textShadowRadius: defaultTheme.container.textShadowRadius,
-    boxShadow: "0 2px 3px 0 rgba(0, 0, 0, 0.15), 0 2px 5px 0 rgba(0, 0, 0, 0.2)",
-    zIndex: 9,
-    transition: 'top .8s, background-color .2s'
-  },
-  hide: {
-    top: -24
-  },
-  connectionStateText: {
-    backgroundColor: defaultTheme.container.backgroundColor,
-    position: 'absolute',
-    width: 200,
-    height: 22,
-    lineHeight: 22,
-    top: 2,
-    textAlign: 'center',
-    borderBottomLeftRadius: 5,
-    borderBottomRightRadius: 5,
-    transition: 'background-color .2s'
-  }
-});
-function ConnectionState({
-  theme,
-  forceHidden,
-  state,
-  children
-}) {
-  const unloadingRef = useRef(false);
-  const createCalc = useCreateCalc();
-  const left = createCalc('50% - 100px', ({
-    width
-  }) => width / 2 - 100); // TODO use calc() in web ?
-
-  useEffect(() => {
-    if (typeof window === 'undefined') return;
-    const beforeUnloadHandler = () => {
-      unloadingRef.current = true;
-    };
-    window.addEventListener('beforeunload', beforeUnloadHandler);
-    return () => {
-      window.removeEventListener('beforeunload', beforeUnloadHandler);
-    };
-  }, []);
-  return /*#__PURE__*/jsx(View, {
-    style: [styles.connectionStateContainer, (forceHidden || !state || state === 'connected') && styles.hide, theme?.container, state === 'connected' && {
-      backgroundColor: (theme || defaultTheme).backgroundColorConnected
-    }],
-    children: !state ? null : /*#__PURE__*/jsx(Text, {
-      style: [styles.connectionStateText, theme && {
-        backgroundColor: theme.container.backgroundColor
-      }, state === 'connected' && {
-        backgroundColor: (theme || defaultTheme).backgroundColorConnected
-      }, {
-        left
-      }],
-      children: children
-    })
-  });
-}
-
-export { ConnectionState };
-//# sourceMappingURL=index-browsermodern.es.js.map

package/dist/index-browsermodern.es.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"index-browsermodern.es.js","sources":["../src/index.tsx"],"sourcesContent":["import type { ReactElement, ReactNode } from 'react';\nimport { useEffect, useRef } from 'react';\nimport type { ScaledSize } from 'react-native';\nimport {\n  View,\n  Text,\n  StyleSheet,\n  Platform,\n  useWindowDimensions,\n  // eslint-disable-next-line import/no-unresolved -- react-native-web or react-native\n} from 'react-native';\n\nconst defaultTheme = {\n  container: {\n    backgroundColor: 'rgba(247, 25, 0, 0.8)',\n    color: '#fff',\n    textShadowColor: '#111',\n    textShadowOffset: { width: 0, height: -1 },\n    textShadowRadius: 1,\n  },\n  backgroundColorConnected: 'rgba(25, 200, 60, 0.8)',\n};\n\nexport type ConnectionStateTheme = typeof defaultTheme;\nexport type State = null | 'connecting' | 'connected' | 'disconnected';\n\nexport interface ConnectionStateProps {\n  theme?: ConnectionStateTheme;\n  forceHidden?: boolean;\n  state: State;\n  children: NonNullable<ReactNode>;\n}\n\nconst zDepth1 =\n  '0 2px 3px 0 rgba(0, 0, 0, 0.15), 0 2px 5px 0 rgba(0, 0, 0, 0.2)';\n\ntype CreateCalc = (\n  webCalc: string,\n  createCalc: (dimensions: ScaledSize) => number,\n) => string | number;\n\nconst useCreateCalcNative = (): CreateCalc => {\n  const dimensions = useWindowDimensions();\n  return (webCalc, createCalc) => createCalc(dimensions);\n};\nconst useCreateCalcWeb = (): CreateCalc => {\n  return (webCalc) => `calc(${webCalc})`;\n};\nconst useCreateCalc =\n  Platform.OS === 'web' ? useCreateCalcWeb : useCreateCalcNative;\n\n// example: const left = createCalc('50% - 100px', ({ width }) => width / 2 - 100);\n\nconst styles = StyleSheet.create({\n  connectionStateContainer: {\n    backgroundColor: defaultTheme.container.backgroundColor,\n    position: 'absolute',\n    top: 0,\n    right: 0,\n    left: 0,\n    height: 2,\n    color: defaultTheme.container.color,\n    textShadowOffset: defaultTheme.container.textShadowOffset,\n    textShadowRadius: defaultTheme.container.textShadowRadius,\n    boxShadow: zDepth1,\n    zIndex: 9,\n    transition: 'top .8s, background-color .2s',\n  },\n  hide: {\n    top: -24,\n  },\n  connectionStateText: {\n    backgroundColor: defaultTheme.container.backgroundColor,\n    position: 'absolute',\n    width: 200,\n    height: 22,\n    lineHeight: 22,\n    top: 2,\n    textAlign: 'center',\n    borderBottomLeftRadius: 5,\n    borderBottomRightRadius: 5,\n    transition: 'background-color .2s',\n  },\n});\n\nexport function ConnectionState({\n  theme,\n  forceHidden,\n  state,\n  children,\n}: ConnectionStateProps): ReactElement | null {\n  const unloadingRef = useRef<boolean>(false);\n\n  const createCalc = useCreateCalc();\n  const left = createCalc('50% - 100px', ({ width }) => width / 2 - 100); // TODO use calc() in web ?\n\n  useEffect((): (() => void) | undefined => {\n    if (typeof window === 'undefined') return;\n\n    const beforeUnloadHandler = (): void => {\n      unloadingRef.current = true;\n    };\n    window.addEventListener('beforeunload', beforeUnloadHandler);\n\n    return (): void => {\n      window.removeEventListener('beforeunload', beforeUnloadHandler);\n    };\n  }, []);\n\n  const shouldHide = forceHidden || !state || state === 'connected';\n\n  return (\n    <View\n      style={[\n        styles.connectionStateContainer,\n        shouldHide && styles.hide,\n        theme?.container,\n        state === 'connected' && {\n          backgroundColor: (theme || defaultTheme).backgroundColorConnected,\n        },\n      ]}\n    >\n      {!state ? null : (\n        <Text\n          style={[\n            styles.connectionStateText,\n            theme && { backgroundColor: theme.container.backgroundColor },\n            state === 'connected' && {\n              backgroundColor: (theme || defaultTheme).backgroundColorConnected,\n            },\n            { left },\n          ]}\n        >\n          {children}\n        </Text>\n      )}\n    </View>\n  );\n}\n"],"names":["defaultTheme","container","backgroundColor","color","textShadowColor","textShadowOffset","width","height","textShadowRadius","backgroundColorConnected","useCreateCalcNative","dimensions","useWindowDimensions","webCalc","createCalc","useCreateCalcWeb","useCreateCalc","Platform","OS","styles","StyleSheet","create","connectionStateContainer","position","top","right","left","boxShadow","zIndex","transition","hide","connectionStateText","lineHeight","textAlign","borderBottomLeftRadius","borderBottomRightRadius","ConnectionState","theme","forceHidden","state","children","unloadingRef","useRef","useEffect","window","beforeUnloadHandler","current","addEventListener","removeEventListener","_jsx","View","style","Text"],"mappings":"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"}

package/dist/index-node16.cjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"index-node16.cjs","sources":["../src/index.tsx"],"sourcesContent":["import type { ReactElement, ReactNode } from 'react';\nimport { useEffect, useRef } from 'react';\nimport type { ScaledSize } from 'react-native';\nimport {\n  View,\n  Text,\n  StyleSheet,\n  Platform,\n  useWindowDimensions,\n  // eslint-disable-next-line import/no-unresolved -- react-native-web or react-native\n} from 'react-native';\n\nconst defaultTheme = {\n  container: {\n    backgroundColor: 'rgba(247, 25, 0, 0.8)',\n    color: '#fff',\n    textShadowColor: '#111',\n    textShadowOffset: { width: 0, height: -1 },\n    textShadowRadius: 1,\n  },\n  backgroundColorConnected: 'rgba(25, 200, 60, 0.8)',\n};\n\nexport type ConnectionStateTheme = typeof defaultTheme;\nexport type State = null | 'connecting' | 'connected' | 'disconnected';\n\nexport interface ConnectionStateProps {\n  theme?: ConnectionStateTheme;\n  forceHidden?: boolean;\n  state: State;\n  children: NonNullable<ReactNode>;\n}\n\nconst zDepth1 =\n  '0 2px 3px 0 rgba(0, 0, 0, 0.15), 0 2px 5px 0 rgba(0, 0, 0, 0.2)';\n\ntype CreateCalc = (\n  webCalc: string,\n  createCalc: (dimensions: ScaledSize) => number,\n) => string | number;\n\nconst useCreateCalcNative = (): CreateCalc => {\n  const dimensions = useWindowDimensions();\n  return (webCalc, createCalc) => createCalc(dimensions);\n};\nconst useCreateCalcWeb = (): CreateCalc => {\n  return (webCalc) => `calc(${webCalc})`;\n};\nconst useCreateCalc =\n  Platform.OS === 'web' ? useCreateCalcWeb : useCreateCalcNative;\n\n// example: const left = createCalc('50% - 100px', ({ width }) => width / 2 - 100);\n\nconst styles = StyleSheet.create({\n  connectionStateContainer: {\n    backgroundColor: defaultTheme.container.backgroundColor,\n    position: 'absolute',\n    top: 0,\n    right: 0,\n    left: 0,\n    height: 2,\n    color: defaultTheme.container.color,\n    textShadowOffset: defaultTheme.container.textShadowOffset,\n    textShadowRadius: defaultTheme.container.textShadowRadius,\n    boxShadow: zDepth1,\n    zIndex: 9,\n    transition: 'top .8s, background-color .2s',\n  },\n  hide: {\n    top: -24,\n  },\n  connectionStateText: {\n    backgroundColor: defaultTheme.container.backgroundColor,\n    position: 'absolute',\n    width: 200,\n    height: 22,\n    lineHeight: 22,\n    top: 2,\n    textAlign: 'center',\n    borderBottomLeftRadius: 5,\n    borderBottomRightRadius: 5,\n    transition: 'background-color .2s',\n  },\n});\n\nexport function ConnectionState({\n  theme,\n  forceHidden,\n  state,\n  children,\n}: ConnectionStateProps): ReactElement | null {\n  const unloadingRef = useRef<boolean>(false);\n\n  const createCalc = useCreateCalc();\n  const left = createCalc('50% - 100px', ({ width }) => width / 2 - 100); // TODO use calc() in web ?\n\n  useEffect((): (() => void) | undefined => {\n    if (typeof window === 'undefined') return;\n\n    const beforeUnloadHandler = (): void => {\n      unloadingRef.current = true;\n    };\n    window.addEventListener('beforeunload', beforeUnloadHandler);\n\n    return (): void => {\n      window.removeEventListener('beforeunload', beforeUnloadHandler);\n    };\n  }, []);\n\n  const shouldHide = forceHidden || !state || state === 'connected';\n\n  return (\n    <View\n      style={[\n        styles.connectionStateContainer,\n        shouldHide && styles.hide,\n        theme?.container,\n        state === 'connected' && {\n          backgroundColor: (theme || defaultTheme).backgroundColorConnected,\n        },\n      ]}\n    >\n      {!state ? null : (\n        <Text\n          style={[\n            styles.connectionStateText,\n            theme && { backgroundColor: theme.container.backgroundColor },\n            state === 'connected' && {\n              backgroundColor: (theme || defaultTheme).backgroundColorConnected,\n            },\n            { left },\n          ]}\n        >\n          {children}\n        </Text>\n      )}\n    </View>\n  );\n}\n"],"names":["defaultTheme","container","backgroundColor","color","textShadowColor","textShadowOffset","width","height","textShadowRadius","backgroundColorConnected","useCreateCalcNative","dimensions","useWindowDimensions","webCalc","createCalc","useCreateCalcWeb","useCreateCalc","Platform","OS","styles","StyleSheet","create","connectionStateContainer","position","top","right","left","boxShadow","zIndex","transition","hide","connectionStateText","lineHeight","textAlign","borderBottomLeftRadius","borderBottomRightRadius","ConnectionState","theme","forceHidden","state","children","unloadingRef","useRef","useEffect","window","beforeUnloadHandler","current","addEventListener","removeEventListener","_jsx","View","style","Text"],"mappings":"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"}

package/dist/index-node16.mjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"index-node16.mjs","sources":["../src/index.tsx"],"sourcesContent":["import type { ReactElement, ReactNode } from 'react';\nimport { useEffect, useRef } from 'react';\nimport type { ScaledSize } from 'react-native';\nimport {\n  View,\n  Text,\n  StyleSheet,\n  Platform,\n  useWindowDimensions,\n  // eslint-disable-next-line import/no-unresolved -- react-native-web or react-native\n} from 'react-native';\n\nconst defaultTheme = {\n  container: {\n    backgroundColor: 'rgba(247, 25, 0, 0.8)',\n    color: '#fff',\n    textShadowColor: '#111',\n    textShadowOffset: { width: 0, height: -1 },\n    textShadowRadius: 1,\n  },\n  backgroundColorConnected: 'rgba(25, 200, 60, 0.8)',\n};\n\nexport type ConnectionStateTheme = typeof defaultTheme;\nexport type State = null | 'connecting' | 'connected' | 'disconnected';\n\nexport interface ConnectionStateProps {\n  theme?: ConnectionStateTheme;\n  forceHidden?: boolean;\n  state: State;\n  children: NonNullable<ReactNode>;\n}\n\nconst zDepth1 =\n  '0 2px 3px 0 rgba(0, 0, 0, 0.15), 0 2px 5px 0 rgba(0, 0, 0, 0.2)';\n\ntype CreateCalc = (\n  webCalc: string,\n  createCalc: (dimensions: ScaledSize) => number,\n) => string | number;\n\nconst useCreateCalcNative = (): CreateCalc => {\n  const dimensions = useWindowDimensions();\n  return (webCalc, createCalc) => createCalc(dimensions);\n};\nconst useCreateCalcWeb = (): CreateCalc => {\n  return (webCalc) => `calc(${webCalc})`;\n};\nconst useCreateCalc =\n  Platform.OS === 'web' ? useCreateCalcWeb : useCreateCalcNative;\n\n// example: const left = createCalc('50% - 100px', ({ width }) => width / 2 - 100);\n\nconst styles = StyleSheet.create({\n  connectionStateContainer: {\n    backgroundColor: defaultTheme.container.backgroundColor,\n    position: 'absolute',\n    top: 0,\n    right: 0,\n    left: 0,\n    height: 2,\n    color: defaultTheme.container.color,\n    textShadowOffset: defaultTheme.container.textShadowOffset,\n    textShadowRadius: defaultTheme.container.textShadowRadius,\n    boxShadow: zDepth1,\n    zIndex: 9,\n    transition: 'top .8s, background-color .2s',\n  },\n  hide: {\n    top: -24,\n  },\n  connectionStateText: {\n    backgroundColor: defaultTheme.container.backgroundColor,\n    position: 'absolute',\n    width: 200,\n    height: 22,\n    lineHeight: 22,\n    top: 2,\n    textAlign: 'center',\n    borderBottomLeftRadius: 5,\n    borderBottomRightRadius: 5,\n    transition: 'background-color .2s',\n  },\n});\n\nexport function ConnectionState({\n  theme,\n  forceHidden,\n  state,\n  children,\n}: ConnectionStateProps): ReactElement | null {\n  const unloadingRef = useRef<boolean>(false);\n\n  const createCalc = useCreateCalc();\n  const left = createCalc('50% - 100px', ({ width }) => width / 2 - 100); // TODO use calc() in web ?\n\n  useEffect((): (() => void) | undefined => {\n    if (typeof window === 'undefined') return;\n\n    const beforeUnloadHandler = (): void => {\n      unloadingRef.current = true;\n    };\n    window.addEventListener('beforeunload', beforeUnloadHandler);\n\n    return (): void => {\n      window.removeEventListener('beforeunload', beforeUnloadHandler);\n    };\n  }, []);\n\n  const shouldHide = forceHidden || !state || state === 'connected';\n\n  return (\n    <View\n      style={[\n        styles.connectionStateContainer,\n        shouldHide && styles.hide,\n        theme?.container,\n        state === 'connected' && {\n          backgroundColor: (theme || defaultTheme).backgroundColorConnected,\n        },\n      ]}\n    >\n      {!state ? null : (\n        <Text\n          style={[\n            styles.connectionStateText,\n            theme && { backgroundColor: theme.container.backgroundColor },\n            state === 'connected' && {\n              backgroundColor: (theme || defaultTheme).backgroundColorConnected,\n            },\n            { left },\n          ]}\n        >\n          {children}\n        </Text>\n      )}\n    </View>\n  );\n}\n"],"names":["defaultTheme","container","backgroundColor","color","textShadowColor","textShadowOffset","width","height","textShadowRadius","backgroundColorConnected","useCreateCalcNative","dimensions","useWindowDimensions","webCalc","createCalc","useCreateCalcWeb","useCreateCalc","Platform","OS","styles","StyleSheet","create","connectionStateContainer","position","top","right","left","boxShadow","zIndex","transition","hide","connectionStateText","lineHeight","textAlign","borderBottomLeftRadius","borderBottomRightRadius","ConnectionState","theme","forceHidden","state","children","unloadingRef","useRef","useEffect","window","beforeUnloadHandler","current","addEventListener","removeEventListener","_jsx","View","style","Text"],"mappings":"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"}