@dr.pogodin/react-utils 1.40.13 → 1.41.0

package/build/types-code/shared/components/Input/index.d.ts

@@ -1,8 +1,11 @@
+import type { RefObject } from 'react';
 import { type Theme } from '@dr.pogodin/react-themes';
 type ThemeKeyT = 'container' | 'input' | 'label';
-declare const _default: import("@dr.pogodin/react-themes").ThemedComponent<React.InputHTMLAttributes<HTMLInputElement> & {
+type PropsT = React.InputHTMLAttributes<HTMLInputElement> & {
     label?: React.ReactNode;
+    ref?: RefObject<HTMLInputElement>;
     testId?: string;
     theme: Theme<ThemeKeyT>;
-} & React.RefAttributes<HTMLInputElement>>;
+};
+declare const _default: import("@dr.pogodin/react-themes").ThemedComponent<PropsT>;
 export default _default;

package/build/types-code/shared/components/WithTooltip/Tooltip.d.ts

@@ -3,7 +3,7 @@
  * hierarchy, and with sub-components managed without React to achieve the best
  * performance during animation.
  */
-import { type ReactNode } from 'react';
+import { type FunctionComponent, type ReactNode, type RefObject } from 'react';
 export declare enum PLACEMENTS {
     ABOVE_CURSOR = "ABOVE_CURSOR",
     ABOVE_ELEMENT = "ABOVE_ELEMENT",
@@ -11,8 +11,9 @@ export declare enum PLACEMENTS {
     BELOW_ELEMENT = "BELOW_ELEMENT"
 }
 export type ThemeKeysT = 'appearance' | 'arrow' | 'content' | 'container';
-declare const Tooltip: React.ForwardRefExoticComponent<{
+declare const Tooltip: FunctionComponent<{
     children?: ReactNode;
+    ref?: RefObject<unknown>;
     theme: any;
-} & React.RefAttributes<unknown>>;
+}>;
 export default Tooltip;

package/build/types-code/shared/components/selectors/CustomDropdown/Options/index.d.ts

@@ -1,3 +1,4 @@
+import { type FunctionComponent, type ReactNode, type RefObject } from 'react';
 import { type OptionT, type OptionsT, type ValueT } from '../../common';
 export type ContainerPosT = {
     left: number;
@@ -11,11 +12,12 @@ export type RefT = {
 type PropsT = {
     containerClass: string;
     containerStyle?: ContainerPosT;
-    filter?: (item: OptionT<React.ReactNode> | ValueT) => boolean;
+    filter?: (item: OptionT<ReactNode> | ValueT) => boolean;
     optionClass: string;
-    options: Readonly<OptionsT<React.ReactNode>>;
+    options: Readonly<OptionsT<ReactNode>>;
     onCancel: () => void;
     onChange: (value: ValueT) => void;
+    ref?: RefObject<RefT | null>;
 };
-declare const Options: React.ForwardRefExoticComponent<PropsT & React.RefAttributes<RefT>>;
+declare const Options: FunctionComponent<PropsT>;
 export default Options;

package/build/types-code/shared/utils/splitComponent.d.ts

@@ -1,4 +1,4 @@
-import { type ComponentType, type ReactNode } from 'react';
+import { type ComponentType, type FunctionComponent, type ReactNode, type RefObject } from 'react';
 import { type ChunkGroupsT } from './globalState';
 /**
  * Client-side only! Ensures all CSS stylesheets required for the specified
@@ -33,9 +33,10 @@ type ComponentOrModule<PropsT> = ComponentType<PropsT> | {
  */
 export default function splitComponent<ComponentPropsT extends {
     children?: ReactNode;
+    ref?: RefObject<unknown>;
 }>({ chunkName, getComponent, placeholder, }: {
     chunkName: string;
     getComponent: () => Promise<ComponentOrModule<ComponentPropsT>>;
     placeholder?: ReactNode;
-}): React.FunctionComponent<ComponentPropsT>;
+}): FunctionComponent<ComponentPropsT>;
 export {};

package/build/types-code/shared/utils/time.d.ts

@@ -7,18 +7,6 @@ import { timer } from '@dr.pogodin/js-utils';
  * then stored in the global state to be reused in all other calls), which
  * is also passed and used in the first client side render, and then updated
  * with a finite precision to avoid infinite re-rendering loops.
- * @param [options] Optional settings.
- * @param [options.globalStatePath="currentTime"] Global state path
- *  to keep the current time value.
- * @param [options.precision= 5 * time.SEC_MS] Current time precision.
- *  The hook won't update the current time stored in the global state unless it
- *  is different from Date.now() result by this number (in milliseconds).
- *  Default to 5 seconds.
- * @param [options.autorefresh=false] Set `true` to automatically
- *  refresh time stored in the global state with the given `precision` (and
- *  thus automatically re-rendering components dependent on this hook, or
- *  the global state with the period equal to the `precision`.
- * @return Unix timestamp in milliseconds.
  */
 export declare function useCurrent({ autorefresh, globalStatePath, precision, }?: {
     autorefresh?: boolean | undefined;
@@ -33,16 +21,6 @@ export declare function useCurrent({ autorefresh, globalStatePath, precision, }?
  * via the global state. Prior to the value being known (in the very first
  * request from the user, when the cookie is still missing), zero value is used
  * as the default value.
- *
- * @param {object} [options] Optional settings.
- * @param {string} [options.cookieName="timezoneOffset"] Optional. The name of
- *  cookie to use to store the timezone offset. Defaults "timezoneOffset". Set
- *  to a falsy value to forbid using cookies altogether (in that case the hook
- *  will always return zero value at the server-side, and in the first render
- *  at the client-side).
- * @param {string} [options.timezoneOffset="timezoneOffset"] Optional.
- *  The global state path to store the offset. Defaults "timezoneOffset".
- * @return {number} Timezone offset.
  */
 export declare function useTimezoneOffset({ cookieName, globalStatePath, }?: {
     cookieName?: string | undefined;

package/config/babel/node-ssr.js

@@ -16,13 +16,23 @@ var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (
 }) : function(o, v) {
     o["default"] = v;
 });
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.default = getConfig;
 const lodash_1 = require("lodash");

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.40.13",
+  "version": "1.41.0",
   "bin": {
     "react-utils-build": "bin/build.js",
     "react-utils-setup": "bin/setup.js"
@@ -9,13 +9,13 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.26.0",
-    "@dr.pogodin/babel-plugin-react-css-modules": "^6.13.2",
-    "@dr.pogodin/csurf": "^1.14.0",
-    "@dr.pogodin/js-utils": "^0.0.12",
-    "@dr.pogodin/react-global-state": "^0.17.5",
-    "@dr.pogodin/react-themes": "^1.7.0",
+    "@dr.pogodin/babel-plugin-react-css-modules": "^6.13.3",
+    "@dr.pogodin/csurf": "^1.14.1",
+    "@dr.pogodin/js-utils": "^0.0.13",
+    "@dr.pogodin/react-global-state": "^0.18.0",
+    "@dr.pogodin/react-themes": "^1.8.0",
     "@jest/environment": "^29.7.0",
-    "axios": "^1.7.7",
+    "axios": "^1.7.9",
     "commander": "^12.1.0",
     "compression": "^1.7.5",
     "config": "^3.3.12",
@@ -23,7 +23,7 @@
     "cookie-parser": "^1.4.7",
     "cross-env": "^7.0.3",
     "dayjs": "^1.11.13",
-    "express": "^4.21.1",
+    "express": "^4.21.2",
     "helmet": "^8.0.0",
     "http-status-codes": "^2.3.0",
     "joi": "^17.13.3",
@@ -32,10 +32,10 @@
     "node-forge": "^1.3.1",
     "qs": "^6.13.1",
     "raf": "^3.4.1",
-    "react": "^18.3.1",
-    "react-dom": "^18.3.1",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
     "react-helmet": "^6.1.0",
-    "react-router-dom": "^6.28.0",
+    "react-router-dom": "^6.28.1",
     "request-ip": "^3.3.0",
     "rimraf": "^6.0.0",
     "serialize-javascript": "^6.0.2",
@@ -46,27 +46,27 @@
   },
   "description": "Collection of generic ReactJS components and utils",
   "devDependencies": {
-    "@babel/cli": "^7.25.9",
+    "@babel/cli": "^7.26.4",
     "@babel/core": "^7.26.0",
     "@babel/eslint-parser": "^7.25.9",
     "@babel/eslint-plugin": "^7.25.9",
     "@babel/node": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.25.9",
     "@babel/preset-env": "^7.26.0",
-    "@babel/preset-react": "^7.25.9",
+    "@babel/preset-react": "^7.26.3",
     "@babel/preset-typescript": "^7.26.0",
     "@babel/register": "^7.25.9",
-    "@dr.pogodin/babel-plugin-transform-assets": "^1.2.2",
-    "@dr.pogodin/babel-preset-svgr": "^1.8.0",
+    "@dr.pogodin/babel-plugin-transform-assets": "^1.2.4",
+    "@dr.pogodin/babel-preset-svgr": "^1.9.0",
     "@pmmmwh/react-refresh-webpack-plugin": "^0.5.15",
     "@testing-library/dom": "^10.4.0",
-    "@testing-library/react": "^16.0.1",
+    "@testing-library/react": "^16.1.0",
     "@testing-library/user-event": "^14.5.2",
     "@tsconfig/recommended": "^1.0.8",
     "@types/compression": "^1.7.5",
     "@types/config": "^3.3.5",
     "@types/cookie": "^0.6.0",
-    "@types/cookie-parser": "^1.4.7",
+    "@types/cookie-parser": "^1.4.8",
     "@types/csurf": "^1.11.5",
     "@types/express": "^4.17.21",
     "@types/jest": "^29.5.14",
@@ -74,8 +74,8 @@
     "@types/morgan": "^1.9.9",
     "@types/node-forge": "^1.3.11",
     "@types/pretty": "^2.0.3",
-    "@types/react": "^18.3.12",
-    "@types/react-dom": "^18.3.1",
+    "@types/react": "^19.0.2",
+    "@types/react-dom": "^19.0.2",
     "@types/react-helmet": "^6.1.11",
     "@types/request-ip": "^0.0.41",
     "@types/serialize-javascript": "^5.0.4",
@@ -94,14 +94,14 @@
     "eslint-config-airbnb-typescript": "^18.0.0",
     "eslint-import-resolver-babel-module": "^5.3.2",
     "eslint-plugin-import": "^2.31.0",
-    "eslint-plugin-jest": "^28.9.0",
+    "eslint-plugin-jest": "^28.10.0",
     "eslint-plugin-jsx-a11y": "^6.10.2",
-    "eslint-plugin-react": "^7.37.2",
+    "eslint-plugin-react": "^7.37.3",
     "eslint-plugin-react-hooks": "^4.6.2",
     "identity-obj-proxy": "^3.0.0",
     "jest": "^29.7.0",
     "jest-environment-jsdom": "^29.7.0",
-    "memfs": "^4.14.0",
+    "memfs": "^4.15.1",
     "mini-css-extract-plugin": "^2.9.2",
     "mockdate": "^3.0.5",
     "nodelist-foreach-polyfill": "^1.2.0",
@@ -109,22 +109,22 @@
     "postcss-loader": "^8.1.1",
     "postcss-scss": "^4.0.9",
     "pretty": "^2.0.0",
-    "react-refresh": "^0.14.2",
+    "react-refresh": "^0.16.0",
     "regenerator-runtime": "^0.14.1",
     "resolve-url-loader": "^5.0.0",
-    "sass": "^1.81.0",
-    "sass-loader": "^16.0.3",
+    "sass": "^1.83.0",
+    "sass-loader": "^16.0.4",
     "sitemap": "^8.0.0",
     "source-map-loader": "^5.0.0",
-    "stylelint": "^16.10.0",
-    "stylelint-config-standard-scss": "^13.1.0",
+    "stylelint": "^16.12.0",
+    "stylelint-config-standard-scss": "^14.0.0",
     "supertest": "^7.0.0",
     "tsc-alias": "^1.8.10",
-    "tstyche": "^3.0.0",
+    "tstyche": "^3.2.0",
     "typed-scss-modules": "^8.0.1",
-    "typescript": "^5.6.3",
-    "typescript-eslint": "^8.15.0",
-    "webpack": "^5.96.1",
+    "typescript": "^5.7.2",
+    "typescript-eslint": "^8.18.2",
+    "webpack": "^5.97.1",
     "webpack-dev-middleware": "^7.4.2",
     "webpack-hot-middleware": "^2.26.1",
     "webpack-merge": "^6.0.1",

package/src/server/renderer.tsx

@@ -437,6 +437,8 @@ export default function factory(
         const renderPass = async () => {
           ssrContext.chunks = [];
           return new Promise<PipeableStream>((resolve, reject) => {
+            // TODO: pipeableStream has .abort() method,
+            // and we should wire it up to the SSR timeout below.
             const pipeableStream = renderToPipeableStream(
               <GlobalStateProvider
                 initialState={ssrContext.state}

package/src/shared/components/Input/index.tsx

@@ -1,4 +1,4 @@
-import { forwardRef } from 'react';
+import type { FunctionComponent, RefObject } from 'react';
 
 import themed, { type Theme } from '@dr.pogodin/react-themes';
 
@@ -11,28 +11,26 @@ type ThemeKeyT =
 
 type PropsT = React.InputHTMLAttributes<HTMLInputElement> & {
   label?: React.ReactNode;
+  ref?: RefObject<HTMLInputElement>;
   testId?: string;
   theme: Theme<ThemeKeyT>;
 };
 
 /**
  * Themeable input field, based on the standard HTML `<input>` element.
- * @param [props]
  * @param [props.label] Input label.
  * @param [props.theme] _Ad hoc_ theme.
  * @param [props...] [Other theming properties](https://www.npmjs.com/package/@dr.pogodin/react-themes#themed-component-properties)
  * @param [props...] Any other properties are passed to the underlying
  * `<input>` element.
  */
-const Input = forwardRef<HTMLInputElement, PropsT>((
-  {
-    label,
-    testId,
-    theme,
-    ...rest
-  }: PropsT,
+const Input: FunctionComponent<PropsT> = ({
+  label,
   ref,
-) => (
+  testId,
+  theme,
+  ...rest
+}) => (
   <span className={theme.container}>
     { label === undefined ? null : <div className={theme.label}>{label}</div> }
     <input
@@ -42,6 +40,6 @@ const Input = forwardRef<HTMLInputElement, PropsT>((
       {...rest} // eslint-disable-line react/jsx-props-no-spreading
     />
   </span>
-));
+);
 
 export default themed(Input, 'Input', defaultTheme);

package/src/shared/components/WithTooltip/Tooltip.tsx

@@ -3,11 +3,11 @@
  * hierarchy, and with sub-components managed without React to achieve the best
  * performance during animation.
  */
-/* global document, window */
 
 import {
+  type FunctionComponent,
   type ReactNode,
-  forwardRef,
+  type RefObject,
   useEffect,
   useImperativeHandle,
   useRef,
@@ -269,10 +269,11 @@ function setComponentPositions(
 }
 
 /* The Tooltip component itself. */
-const Tooltip = forwardRef<unknown, {
+const Tooltip: FunctionComponent<{
   children?: ReactNode;
+  ref?: RefObject<unknown>;
   theme: any;
-}>(({ children, theme }, ref) => {
+}> = ({ children, ref, theme }) => {
   // NOTE: The way it has to be implemented, for clean mounting and unmounting
   // at the client side, the <Tooltip> is fully mounted into DOM in the next
   // rendering cycles, and only then it can be correctly measured and positioned.
@@ -340,6 +341,6 @@ const Tooltip = forwardRef<unknown, {
   ]);
 
   return components ? createPortal(children, components.content) : null;
-});
+};
 
 export default Tooltip;

package/src/shared/components/WithTooltip/index.tsx

@@ -1,6 +1,7 @@
 /* global window */
 
 import {
+  type FunctionComponent,
   type ReactNode,
   useEffect,
   useRef,
@@ -49,12 +50,11 @@ type HeapT = {
  * **Children:** Children are rendered in the place of `<WithTooltip>`,
  * and when hovered the tooltip is shown. By default the wrapper itself is
  * `<div>` block with `display: inline-block`.
- * @param {object} props Component properties.
- * @param {React.node} props.tip &ndash; Anything React is able to render,
+ * @param tip &ndash; Anything React is able to render,
  * _e.g._ a tooltip text. This will be the tooltip content.
  * @param {WithTooltipTheme} props.theme _Ad hoc_ theme.
  */
-const Wrapper: React.FunctionComponent<PropsT> = ({
+const Wrapper: FunctionComponent<PropsT> = ({
   children,
   placement = PLACEMENTS.ABOVE_CURSOR,
   tip,
@@ -66,7 +66,7 @@ const Wrapper: React.FunctionComponent<PropsT> = ({
     triggeredByTouch: false,
     timerId: undefined,
   });
-  const tooltipRef = useRef<TooltipRefT>();
+  const tooltipRef = useRef<TooltipRefT>(null);
   const wrapperRef = useRef<HTMLDivElement>(null);
   const [showTooltip, setShowTooltip] = useState(false);
 

package/src/shared/components/selectors/CustomDropdown/Options/index.tsx

@@ -1,4 +1,10 @@
-import { forwardRef, useImperativeHandle, useRef } from 'react';
+import {
+  type FunctionComponent,
+  type ReactNode,
+  type RefObject,
+  useImperativeHandle,
+  useRef,
+} from 'react';
 
 import { BaseModal } from 'components/Modal';
 
@@ -28,14 +34,15 @@ export type RefT = {
 type PropsT = {
   containerClass: string;
   containerStyle?: ContainerPosT;
-  filter?: (item: OptionT<React.ReactNode> | ValueT) => boolean;
+  filter?: (item: OptionT<ReactNode> | ValueT) => boolean;
   optionClass: string;
-  options: Readonly<OptionsT<React.ReactNode>>;
+  options: Readonly<OptionsT<ReactNode>>;
   onCancel: () => void;
   onChange: (value: ValueT) => void;
+  ref?: RefObject<RefT | null>;
 };
 
-const Options = forwardRef<RefT, PropsT>(({
+const Options: FunctionComponent<PropsT> = ({
   containerClass,
   containerStyle,
   filter,
@@ -43,7 +50,8 @@ const Options = forwardRef<RefT, PropsT>(({
   onChange,
   optionClass,
   options,
-}, ref) => {
+  ref,
+}) => {
   const opsRef = useRef<HTMLDivElement>(null);
 
   useImperativeHandle(ref, () => ({
@@ -51,7 +59,7 @@ const Options = forwardRef<RefT, PropsT>(({
       const e = opsRef.current?.parentElement;
       if (!e) return undefined;
 
-      const rect = opsRef.current?.getBoundingClientRect();
+      const rect = opsRef.current!.getBoundingClientRect();
       const style = window.getComputedStyle(e);
       const mBottom = parseFloat(style.marginBottom);
       const mTop = parseFloat(style.marginTop);
@@ -62,7 +70,7 @@ const Options = forwardRef<RefT, PropsT>(({
     },
   }), []);
 
-  const optionNodes: React.ReactNode[] = [];
+  const optionNodes: ReactNode[] = [];
   for (let i = 0; i < options.length; ++i) {
     const option = options[i];
     if (option !== undefined && (!filter || filter(option))) {
@@ -98,7 +106,7 @@ const Options = forwardRef<RefT, PropsT>(({
       // dropdowns during the scrolling (that would need to re-position it in
       // response to the position changes of the root dropdown element).
       cancelOnScrolling
-      containerStyle={containerStyle}
+      style={containerStyle}
       dontDisableScrolling
       onCancel={onCancel}
       theme={{
@@ -112,6 +120,6 @@ const Options = forwardRef<RefT, PropsT>(({
       <div ref={opsRef}>{optionNodes}</div>
     </BaseModal>
   );
-});
+};
 
 export default Options;

package/src/shared/utils/splitComponent.tsx

@@ -3,8 +3,9 @@
 
 import {
   type ComponentType,
+  type FunctionComponent,
   type ReactNode,
-  forwardRef,
+  type RefObject,
   lazy,
   Suspense,
   useInsertionEffect,
@@ -181,7 +182,7 @@ type ComponentOrModule<PropsT> = ComponentType<PropsT> | {
  * @return {React.ElementType}
  */
 export default function splitComponent<
-  ComponentPropsT extends { children?: ReactNode },
+  ComponentPropsT extends { children?: ReactNode; ref?: RefObject<unknown> },
 >({
   chunkName,
   getComponent,
@@ -210,10 +211,11 @@ export default function splitComponent<
       await bookStyleSheets(chunkName, clientChunkGroups, false);
     }
 
-    const Wrapper = forwardRef<unknown, ComponentPropsT>((
-      { children, ...rest },
+    const Wrapper: FunctionComponent<ComponentPropsT> = ({
+      children,
       ref,
-    ) => {
+      ...rest
+    }) => {
       // On the server side we'll assert the chunk name here,
       // and also push it to the SSR chunks array.
       if (IS_SERVER_SIDE) {
@@ -230,11 +232,11 @@ export default function splitComponent<
       }, []);
 
       return (
-        <Component ref={ref} {...(rest as unknown as ComponentPropsT)}>
+        <Component {...(rest as unknown as ComponentPropsT)} ref={ref}>
           {children}
         </Component>
       );
-    });
+    };
 
     return { default: Wrapper };
   });

package/src/shared/utils/time.ts

@@ -1,6 +1,4 @@
-/* global document */
-
-import Cookie from 'cookie';
+import { serialize } from 'cookie';
 import dayjs from 'dayjs';
 import { useEffect } from 'react';
 
@@ -24,18 +22,6 @@ import { getSsrContext } from './globalState';
  * then stored in the global state to be reused in all other calls), which
  * is also passed and used in the first client side render, and then updated
  * with a finite precision to avoid infinite re-rendering loops.
- * @param [options] Optional settings.
- * @param [options.globalStatePath="currentTime"] Global state path
- *  to keep the current time value.
- * @param [options.precision= 5 * time.SEC_MS] Current time precision.
- *  The hook won't update the current time stored in the global state unless it
- *  is different from Date.now() result by this number (in milliseconds).
- *  Default to 5 seconds.
- * @param [options.autorefresh=false] Set `true` to automatically
- *  refresh time stored in the global state with the given `precision` (and
- *  thus automatically re-rendering components dependent on this hook, or
- *  the global state with the period equal to the `precision`.
- * @return Unix timestamp in milliseconds.
  */
 // TODO: Should we request the state type as generic parameter, to be able
 // to verify the give globalStatePath is correct?
@@ -43,7 +29,7 @@ export function useCurrent({
   autorefresh = false,
   globalStatePath = 'currentTime',
   precision = 5 * SEC_MS,
-} = {}) {
+} = {}): number {
   const [now, setter] = useGlobalState<ForceT, number>(globalStatePath, Date.now);
   useEffect(() => {
     let timerId: NodeJS.Timeout;
@@ -70,23 +56,13 @@ export function useCurrent({
  * via the global state. Prior to the value being known (in the very first
  * request from the user, when the cookie is still missing), zero value is used
  * as the default value.
- *
- * @param {object} [options] Optional settings.
- * @param {string} [options.cookieName="timezoneOffset"] Optional. The name of
- *  cookie to use to store the timezone offset. Defaults "timezoneOffset". Set
- *  to a falsy value to forbid using cookies altogether (in that case the hook
- *  will always return zero value at the server-side, and in the first render
- *  at the client-side).
- * @param {string} [options.timezoneOffset="timezoneOffset"] Optional.
- *  The global state path to store the offset. Defaults "timezoneOffset".
- * @return {number} Timezone offset.
  */
 // TODO: Should we request the state type as generic parameter, to be able
 // to verify the give globalStatePath is correct?
 export function useTimezoneOffset({
   cookieName = 'timezoneOffset',
   globalStatePath = 'timezoneOffset',
-} = {}) {
+} = {}): number {
   const ssrContext = getSsrContext(false);
   const [offset, setOffset] = useGlobalState<ForceT, number>(globalStatePath, () => {
     const value = cookieName && ssrContext?.req?.cookies?.[cookieName];
@@ -97,7 +73,7 @@ export function useTimezoneOffset({
     const value = date.getTimezoneOffset();
     setOffset(value);
     if (cookieName) {
-      document.cookie = Cookie.serialize(cookieName, value.toString(), { path: '/' });
+      document.cookie = serialize(cookieName, value.toString(), { path: '/' });
     }
   }, [cookieName, setOffset]);
   return offset;