react-alp-connection-state 10.0.0 → 10.0.2

package/CHANGELOG.md

@@ -3,6 +3,16 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [10.0.2](https://github.com/christophehurpeau/alp/compare/react-alp-connection-state@10.0.1...react-alp-connection-state@10.0.2) (2025-11-12)
+
+Note: no notable changes
+
+
+## [10.0.1](https://github.com/christophehurpeau/alp/compare/react-alp-connection-state@10.0.0...react-alp-connection-state@10.0.1) (2025-11-12)
+
+Note: no notable changes
+
+
 ## [10.0.0](https://github.com/christophehurpeau/alp/compare/react-alp-connection-state@9.0.0...react-alp-connection-state@10.0.0) (2025-10-27)
 
 ### ⚠ BREAKING CHANGES

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 { DimensionValue, ScaledSize } from \"react-native\";\nimport {\n  Platform,\n  StyleSheet,\n  Text,\n  View,\n  useWindowDimensions,\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    // @ts-expect-error -- transition is not a valid style\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 globalThis === \"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":["useWindowDimensions","Platform","StyleSheet","useRef","useEffect","jsx","View","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  Platform,\n  StyleSheet,\n  Text,\n  View,\n  useWindowDimensions,\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    // @ts-expect-error -- transition is not a valid style\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 globalThis === \"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":["useWindowDimensions","Platform","StyleSheet","useRef","useEffect","jsx","View","Text"],"mappings":"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"}

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 { DimensionValue, ScaledSize } from \"react-native\";\nimport {\n  Platform,\n  StyleSheet,\n  Text,\n  View,\n  useWindowDimensions,\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    // @ts-expect-error -- transition is not a valid style\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 globalThis === \"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":[],"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  Platform,\n  StyleSheet,\n  Text,\n  View,\n  useWindowDimensions,\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    // @ts-expect-error -- transition is not a valid style\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 globalThis === \"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":[],"mappings":"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"}

package/dist/index-node22.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"index-node22.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  Platform,\n  StyleSheet,\n  Text,\n  View,\n  useWindowDimensions,\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    // @ts-expect-error -- transition is not a valid style\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 globalThis === \"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":[],"mappings":"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"}
+{"version":3,"file":"index-node22.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  Platform,\n  StyleSheet,\n  Text,\n  View,\n  useWindowDimensions,\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    // @ts-expect-error -- transition is not a valid style\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 globalThis === \"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":[],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-alp-connection-state",
-  "version": "10.0.0",
+  "version": "10.0.2",
   "description": "connection state",
   "keywords": [],
   "author": "Christophe Hurpeau <christophe@hurpeau.com> (https://christophe.hurpeau.com)",
@@ -87,8 +87,8 @@
     }
   },
   "devDependencies": {
-    "@pob/rollup-esbuild": "6.7.0",
+    "@pob/rollup-esbuild": "7.3.2",
     "react": "19.1.1",
-    "typescript": "5.9.2"
+    "typescript": "5.9.3"
   }
 }