@ui5/webcomponents-react-base - npm Package Compare versions

Comparing version 1.29.3 to 2.0.0-rc.0

dist/hooks/index.d.ts

@@ -6,6 +6,5 @@ import { useCurrentTheme } from './useCurrentTheme.js';
 import { useIsRTL } from './useIsRTL.js';
-import { useResponsiveContentPadding } from './useResponsiveContentPadding.js';
 import { useStylesheet } from './useStylesheet.js';
 import { useSyncRef } from './useSyncRef.js';
 import { useViewportRange } from './useViewportRange.js';
-export { useI18nBundle, useIsomorphicLayoutEffect, useIsRTL, useResponsiveContentPadding, useSyncRef, useViewportRange, useIsomorphicId, useStylesheet, useCurrentTheme };
+export { useI18nBundle, useIsomorphicLayoutEffect, useIsRTL, useSyncRef, useViewportRange, useIsomorphicId, useStylesheet, useCurrentTheme };

dist/hooks/index.js

@@ -6,6 +6,5 @@ import { useCurrentTheme } from './useCurrentTheme.js';
 import { useIsRTL } from './useIsRTL.js';
-import { useResponsiveContentPadding } from './useResponsiveContentPadding.js';
 import { useStylesheet } from './useStylesheet.js';
 import { useSyncRef } from './useSyncRef.js';
 import { useViewportRange } from './useViewportRange.js';
-export { useI18nBundle, useIsomorphicLayoutEffect, useIsRTL, useResponsiveContentPadding, useSyncRef, useViewportRange, useIsomorphicId, useStylesheet, useCurrentTheme };
+export { useI18nBundle, useIsomorphicLayoutEffect, useIsRTL, useSyncRef, useViewportRange, useIsomorphicId, useStylesheet, useCurrentTheme };

dist/hooks/useI18nBundle.js

 'use client';
-import I18nBundle, { getI18nBundle } from '@ui5/webcomponents-base/dist/i18nBundle.js';
-import { useRef } from 'react';
-import { useI18nContext } from '../context/I18nContext.js';
-import { useIsomorphicLayoutEffect } from '../hooks/index.js';
+import I18nBundle from '@ui5/webcomponents-base/dist/i18nBundle.js';
+import { useEffect } from 'react';
+import { useSyncExternalStore } from 'use-sync-external-store/shim/index.js';
+import { I18nStore } from '../stores/I18nStore.js';
 const defaultBundle = new I18nBundle('defaultBundle');
 export const useI18nBundle = (bundleName) => {
-    const i18nContext = useI18nContext();
-    if (!i18nContext) {
-        throw new Error(`'useI18nBundle()' may be used only in the context of a '<ThemeProvider>' component.`);
-    }
-    const i18nRef = useRef(i18nContext);
-    useIsomorphicLayoutEffect(() => {
-        const { i18nBundles, setI18nBundle } = i18nRef.current;
-        let isMounted = true;
-        if (!i18nBundles.hasOwnProperty(bundleName)) {
-            getI18nBundle(bundleName).then((internalBundle) => {
-                if (isMounted) {
-                    setI18nBundle(bundleName, internalBundle);
-                }
-            }, () => {
-                // noop
-            });
-        }
-        return () => {
-            isMounted = false;
-        };
+    const bundles = useSyncExternalStore(I18nStore.subscribe, I18nStore.getSnapshot, I18nStore.getServerSnapshot);
+    useEffect(() => {
+        I18nStore.loadBundle(bundleName);
     }, [bundleName]);
-    return i18nContext.i18nBundles[bundleName] ?? defaultBundle;
+    return bundles[bundleName] ?? defaultBundle;
 };

dist/index.d.ts

@@ -1,6 +0,5 @@
-import { getI18nContext, I18nContext } from './context/I18nContext.js';
 import * as Device from './Device/index.js';
 import * as hooks from './hooks/index.js';
+import { I18nStore } from './stores/I18nStore.js';
 import { StyleStore } from './stores/StyleStore.js';
-import * as spacing from './styling/spacing.js';
 import { ThemingParameters } from './styling/ThemingParameters.js';
@@ -10,2 +9,2 @@ export * from './styling/CssSizeVariables.js';
 export * from './hooks/index.js';
-export { getI18nContext, I18nContext, StyleStore, ThemingParameters, Device, hooks, spacing };
+export { I18nStore, StyleStore, ThemingParameters, Device, hooks };

dist/index.js

@@ -1,6 +0,5 @@
-import { getI18nContext, I18nContext } from './context/I18nContext.js';
 import * as Device from './Device/index.js';
 import * as hooks from './hooks/index.js';
+import { I18nStore } from './stores/I18nStore.js';
 import { StyleStore } from './stores/StyleStore.js';
-import * as spacing from './styling/spacing.js';
 import { ThemingParameters } from './styling/ThemingParameters.js';
@@ -10,2 +9,2 @@ export * from './styling/CssSizeVariables.js';
 export * from './hooks/index.js';
-export { getI18nContext, I18nContext, StyleStore, ThemingParameters, Device, hooks, spacing };
+export { I18nStore, StyleStore, ThemingParameters, Device, hooks };

dist/utils/index.d.ts

@@ -1,5 +0,11 @@
-import type { UIEvent } from 'react';
 export declare const deprecationNotice: (component: string, message: string) => void;
-export declare const enrichEventWithDetails: <T extends Record<string, unknown>, ReturnType = CustomEvent<T>>(event: UIEvent, payload?: T | null) => ReturnType;
+type EnrichedEventType<Event, Detail> = Event & {
+    detail: Detail & {
+        nativeDetail?: number;
+    };
+};
+export declare const enrichEventWithDetails: <Event extends {
+    detail?: number | Record<string, unknown> | null;
+}, Detail extends Record<string, unknown>>(event: Event, payload: Detail) => EnrichedEventType<Event, Detail>;
 export { debounce } from './debounce.js';
 export { throttle } from './throttle.js';

dist/utils/index.js

@@ -11,12 +11,15 @@ export const deprecationNotice = (component, message) => {
 };
-export const enrichEventWithDetails = (event, payload = null) => {
-    // safeguard
-    if (!event) {
-        return event;
+export const enrichEventWithDetails = (event, payload) => {
+    // todo: once we drop React 16 support, remove this
+    // the helper accepts both SyntheticEvents and browser events
+    const syntheticEventCast = event;
+    if (typeof syntheticEventCast.persist === 'function') {
+        // if there is a persist method, it's a SyntheticEvent so we need to persist it
+        syntheticEventCast.persist();
     }
-    if (event.hasOwnProperty('persist')) {
-        // if there is a persist method, it's an SyntheticEvent so we need to persist it
-        event.persist();
-    }
+    // Determine if we need to create a new details object
     const shouldCreateNewDetails = event.detail === null || event.detail === undefined || typeof event.detail !== 'object';
+    // native detail is always number (if available)
+    const nativeDetail = typeof event.detail === 'number' ? event.detail : null;
+    // defineProperty is necessary here as event.detail needs to be editable
     Object.defineProperty(event, 'detail', {
@@ -27,2 +30,5 @@ value: shouldCreateNewDetails ? {} : event.detail,
     });
+    if (nativeDetail) {
+        Object.assign(event.detail, { nativeDetail });
+    }
     Object.assign(event.detail, payload);
@@ -29,0 +35,0 @@ return event;

package.json

 {
   "name": "@ui5/webcomponents-react-base",
-  "version": "1.29.3",
+  "version": "2.0.0-rc.0",
   "description": "Base for ui5-webcomponents-react",
@@ -33,4 +33,4 @@ "type": "module",
     "@types/react": "*",
-    "@ui5/webcomponents-base": "~1.24.0",
-    "react": "^16.14.0 || ^17.0.0 || ^18.0.0"
+    "@ui5/webcomponents-base": "~2.0.1",
+    "react": "^16.14.0 || ^17 || ^18 || ^19"
   },
@@ -63,3 +63,3 @@ "peerDependenciesMeta": {
   },
-  "gitHead": "5d0efa11d74cdf5d5515fe04d42d757901a87e25"
+  "gitHead": "4ce69b6f8ca348876d8deb7c68991f1e87bbabff"
 }

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Worsened metrics

Total package byte prevSize

278753

decreased by-2.38%

Number of package files

47

decreased by-7.84%

Lines of code

3236

decreased by-10.9%

Number of low quality alerts

1

increased byInfinity%

No dependency changes