@baloise/ds-react 19.10.2 → 20.0.0-next.10

package/dist/hooks/index.d.ts

@@ -0,0 +1,3 @@
+export { useModal } from './use-modal';
+export { useToast } from './use-toast';
+export { useSnackbar } from './use-snackbar';

package/dist/hooks/index.js

@@ -0,0 +1,3 @@
+export { useModal } from './use-modal';
+export { useToast } from './use-toast';
+export { useSnackbar } from './use-snackbar';

package/dist/hooks/use-alert-controller.d.ts

@@ -0,0 +1,2 @@
+import type { Alert, AlertController } from '@baloise/ds-core';
+export declare function useAlertController(controller: AlertController): readonly [(options: Alert) => Promise<void>, () => Promise<void>];

package/dist/hooks/use-alert-controller.js

@@ -0,0 +1,14 @@
+import { useCallback, useRef } from 'react';
+import { defineCustomElement as defineDsAlertContainer } from '@baloise/ds-core/components/ds-alert-container.js';
+export function useAlertController(controller) {
+    defineDsAlertContainer();
+    const idRef = useRef(undefined);
+    const present = useCallback(async (options) => {
+        idRef.current = await controller.create(options);
+    }, [controller]);
+    const dismiss = useCallback(async () => {
+        if (idRef.current)
+            await controller.remove(idRef.current);
+    }, [controller]);
+    return [present, dismiss];
+}

package/dist/hooks/use-modal.d.ts

@@ -0,0 +1,7 @@
+import { type ModalOptions } from '@baloise/ds-core';
+import { type ReactNode } from 'react';
+/**
+ * Imperative modal hook. `present()` mounts React content into a detached container
+ * and hands it to the modal controller via `ModalOptions.component`.
+ */
+export declare function useModal(): readonly [(content: ReactNode, options?: Omit<ModalOptions, "component" | "componentProps">) => Promise<void>, (data?: unknown, role?: string) => Promise<void>];

package/dist/hooks/use-modal.js

@@ -0,0 +1,54 @@
+'use client';
+import { dsModalController } from '@baloise/ds-core';
+import { useCallback, useRef } from 'react';
+import { flushSync } from 'react-dom';
+import { createRoot } from 'react-dom/client';
+/**
+ * Imperative modal hook. `present()` mounts React content into a detached container
+ * and hands it to the modal controller via `ModalOptions.component`.
+ */
+export function useModal() {
+    const modalRef = useRef(null);
+    const rootRef = useRef(null);
+    const containerRef = useRef(null);
+    const projectedNodesRef = useRef([]);
+    const cleanup = useCallback(() => {
+        var _a, _b, _c, _d;
+        // The controller moves the container's children into ds-modal's light DOM so the
+        // browser can slot them; React still thinks they live in the container, so move
+        // them back before unmounting or React's reconciler fails to remove them.
+        const container = containerRef.current;
+        if (container) {
+            projectedNodesRef.current.forEach(node => container.appendChild(node));
+        }
+        (_a = rootRef.current) === null || _a === void 0 ? void 0 : _a.unmount();
+        (_b = containerRef.current) === null || _b === void 0 ? void 0 : _b.remove();
+        (_d = (_c = modalRef.current) === null || _c === void 0 ? void 0 : _c.remove) === null || _d === void 0 ? void 0 : _d.call(_c);
+        projectedNodesRef.current = [];
+        modalRef.current = null;
+        rootRef.current = null;
+        containerRef.current = null;
+    }, []);
+    const dismiss = useCallback(async (data, role) => {
+        const modal = modalRef.current;
+        if (!modal)
+            return;
+        // dismiss gains a data/role payload in #2120
+        await modal.dismiss(data, role);
+    }, []);
+    const present = useCallback(async (content, options) => {
+        cleanup();
+        const container = document.createElement('div');
+        const root = createRoot(container);
+        containerRef.current = container;
+        rootRef.current = root;
+        // The modal controller reads the container's children synchronously to project
+        // them into ds-modal's slots, so the initial render must commit before it runs.
+        flushSync(() => root.render(content));
+        projectedNodesRef.current = Array.from(container.childNodes);
+        const modal = await dsModalController.create(Object.assign(Object.assign({}, options), { component: container }));
+        modalRef.current = modal;
+        modal.addEventListener('dsDidDismiss', cleanup, { once: true });
+    }, [cleanup]);
+    return [present, dismiss];
+}

package/dist/hooks/use-snackbar.d.ts

@@ -0,0 +1 @@
+export declare function useSnackbar(): readonly [(options: import("@baloise/ds-core").Alert) => Promise<void>, () => Promise<void>];

package/dist/hooks/use-snackbar.js

@@ -0,0 +1,8 @@
+'use client';
+import { dsSnackbarController } from '@baloise/ds-core';
+import { defineCustomElement as defineDsSnackbar } from '@baloise/ds-core/components/ds-snackbar.js';
+import { useAlertController } from './use-alert-controller';
+export function useSnackbar() {
+    defineDsSnackbar();
+    return useAlertController(dsSnackbarController);
+}

package/dist/hooks/use-toast.d.ts

@@ -0,0 +1 @@
+export declare function useToast(): readonly [(options: import("@baloise/ds-core").Alert) => Promise<void>, () => Promise<void>];

package/dist/hooks/use-toast.js

@@ -0,0 +1,8 @@
+'use client';
+import { dsToastController } from '@baloise/ds-core';
+import { defineCustomElement as defineDsToast } from '@baloise/ds-core/components/ds-toast.js';
+import { useAlertController } from './use-alert-controller';
+export function useToast() {
+    defineDsToast();
+    return useAlertController(dsToastController);
+}

package/dist/index.d.ts

@@ -0,0 +1,8 @@
+export { bootstrapDesignSystem } from './bootstrap';
+export type * from './generated/components';
+export * from './wrappers';
+export { DsRootProvider } from './components/ds-root-provider';
+export type { DsRootProviderProps } from './components/ds-root-provider';
+export { Modal } from './components/modal';
+export type { ModalProps } from './components/modal';
+export * from './hooks';

package/dist/index.js

@@ -0,0 +1,5 @@
+export { bootstrapDesignSystem } from './bootstrap';
+export * from './wrappers';
+export { DsRootProvider } from './components/ds-root-provider';
+export { Modal } from './components/modal';
+export * from './hooks';

package/dist/index.server.d.ts

@@ -0,0 +1,8 @@
+export { bootstrapDesignSystem } from './bootstrap';
+export type * from './generated/components.server';
+export * from './wrappers.server';
+export { DsRootProvider } from './components/ds-root-provider.server';
+export type { DsRootProviderProps } from './components/ds-root-provider.server';
+export { Modal } from './components/modal';
+export type { ModalProps } from './components/modal';
+export * from './hooks';

package/dist/index.server.js

@@ -0,0 +1,5 @@
+export { bootstrapDesignSystem } from './bootstrap';
+export * from './wrappers.server';
+export { DsRootProvider } from './components/ds-root-provider.server';
+export { Modal } from './components/modal';
+export * from './hooks';

package/dist/ssr-create-component.d.ts

@@ -0,0 +1,9 @@
+import { type ReactNode } from 'react';
+import { createComponent as createStencilSsrComponent } from '@stencil/react-output-target/ssr';
+/**
+ * Browser parsing consumes `<template shadowrootmode>` into a real shadow root
+ * before React hydrates. Keep that markup as an opaque HTML blob so the
+ * reconciler does not look for the template node and throw error 418.
+ */
+export declare function asOpaqueSsrMarkup(html: string): ReactNode;
+export declare function createComponent(options: Parameters<typeof createStencilSsrComponent>[0]): (props: Record<string, unknown>) => Promise<import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | Iterable<ReactNode> | (string | number | bigint | boolean | import("react").ReactPortal | import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | Iterable<ReactNode> | null | undefined)>;

package/dist/ssr-create-component.js

@@ -0,0 +1,23 @@
+import { createElement } from 'react';
+import { createComponent as createStencilSsrComponent } from '@stencil/react-output-target/ssr';
+const opaqueSsrStyle = { display: 'contents' };
+/**
+ * Browser parsing consumes `<template shadowrootmode>` into a real shadow root
+ * before React hydrates. Keep that markup as an opaque HTML blob so the
+ * reconciler does not look for the template node and throw error 418.
+ */
+export function asOpaqueSsrMarkup(html) {
+    return createElement('div', {
+        suppressHydrationWarning: true,
+        style: opaqueSsrStyle,
+        dangerouslySetInnerHTML: { __html: html },
+    });
+}
+export function createComponent(options) {
+    const StencilComponent = createStencilSsrComponent(options);
+    return async function OpaqueSsrComponent(props) {
+        const vnode = await StencilComponent(props);
+        const { renderToStaticMarkup } = await import('react-dom/server');
+        return asOpaqueSsrMarkup(renderToStaticMarkup(vnode));
+    };
+}

package/dist/wrappers.d.ts

@@ -0,0 +1,26 @@
+/**
+ * Public generated wrappers.
+ *
+ * Overlay wrappers with hand-authored replacements, and the renamed `ds-app`
+ * root wrapper, stay public but are marked `@deprecated`. Prefer `Modal`,
+ * `useToast`, `useSnackbar`, and `DsRoot`.
+ */
+export { DsAccordion, DsAppFooter, DsAppNavbar, DsBadge, DsBrandIcon, DsButton, DsButtonGroup, DsCard, DsCardActions, DsCardContent, DsCardHeader, DsCardSubtitle, DsCardTitle, DsCarousel, DsCarouselItem, DsCheckbox, DsCheckboxGroup, DsClose, DsContent, DsCounter, DsData, DsDataItem, DsDataLabel, DsDataValue, DsDatepicker, DsDivider, DsDrawer, DsFileUpload, DsHeading, DsHint, DsHintText, DsHintTitle, DsIcon, DsInput, DsInputPhone, DsItem, DsLabel, DsList, DsLogo, DsModalBody, DsModalHeader, DsNotification, DsNumberInput, DsPagination, DsPopup, DsProgressBar, DsRadio, DsRadioGroup, DsRoot, DsSegment, DsSegmentItem, DsSelect, DsSelectOptgroup, DsSelectOption, DsShape, DsSheet, DsSlider, DsSpinner, DsStack, DsStep, DsStepPanel, DsSteps, DsTab, DsTabPanel, DsTabs, DsTag, DsTagGroup, DsText, DsTextarea, DsToggle, DsTooltip, } from './generated/components';
+/**
+ * @deprecated Use `useToast` or `useSnackbar` instead. `DsAlertContainer` is the
+ * internal overlay host those hooks already manage.
+ */
+export { DsAlertContainer } from './generated/components';
+/**
+ * @deprecated Use `Modal` instead. The generated wrapper does not keep React
+ * `open` state in sync when the modal self-dismisses.
+ */
+export { DsModal } from './generated/components';
+/**
+ * @deprecated Use `useSnackbar` instead.
+ */
+export { DsSnackbar } from './generated/components';
+/**
+ * @deprecated Use `useToast` instead.
+ */
+export { DsToast } from './generated/components';

package/dist/wrappers.js

@@ -0,0 +1,26 @@
+/**
+ * Public generated wrappers.
+ *
+ * Overlay wrappers with hand-authored replacements, and the renamed `ds-app`
+ * root wrapper, stay public but are marked `@deprecated`. Prefer `Modal`,
+ * `useToast`, `useSnackbar`, and `DsRoot`.
+ */
+export { DsAccordion, DsAppFooter, DsAppNavbar, DsBadge, DsBrandIcon, DsButton, DsButtonGroup, DsCard, DsCardActions, DsCardContent, DsCardHeader, DsCardSubtitle, DsCardTitle, DsCarousel, DsCarouselItem, DsCheckbox, DsCheckboxGroup, DsClose, DsContent, DsCounter, DsData, DsDataItem, DsDataLabel, DsDataValue, DsDatepicker, DsDivider, DsDrawer, DsFileUpload, DsHeading, DsHint, DsHintText, DsHintTitle, DsIcon, DsInput, DsInputPhone, DsItem, DsLabel, DsList, DsLogo, DsModalBody, DsModalHeader, DsNotification, DsNumberInput, DsPagination, DsPopup, DsProgressBar, DsRadio, DsRadioGroup, DsRoot, DsSegment, DsSegmentItem, DsSelect, DsSelectOptgroup, DsSelectOption, DsShape, DsSheet, DsSlider, DsSpinner, DsStack, DsStep, DsStepPanel, DsSteps, DsTab, DsTabPanel, DsTabs, DsTag, DsTagGroup, DsText, DsTextarea, DsToggle, DsTooltip, } from './generated/components';
+/**
+ * @deprecated Use `useToast` or `useSnackbar` instead. `DsAlertContainer` is the
+ * internal overlay host those hooks already manage.
+ */
+export { DsAlertContainer } from './generated/components';
+/**
+ * @deprecated Use `Modal` instead. The generated wrapper does not keep React
+ * `open` state in sync when the modal self-dismisses.
+ */
+export { DsModal } from './generated/components';
+/**
+ * @deprecated Use `useSnackbar` instead.
+ */
+export { DsSnackbar } from './generated/components';
+/**
+ * @deprecated Use `useToast` instead.
+ */
+export { DsToast } from './generated/components';

package/dist/wrappers.server.d.ts

@@ -0,0 +1,26 @@
+/**
+ * Public generated wrappers.
+ *
+ * Overlay wrappers with hand-authored replacements, and the renamed `ds-app`
+ * root wrapper, stay public but are marked `@deprecated`. Prefer `Modal`,
+ * `useToast`, `useSnackbar`, and `DsRoot`.
+ */
+export { DsAccordion, DsAppFooter, DsAppNavbar, DsBadge, DsBrandIcon, DsButton, DsButtonGroup, DsCard, DsCardActions, DsCardContent, DsCardHeader, DsCardSubtitle, DsCardTitle, DsCarousel, DsCarouselItem, DsCheckbox, DsCheckboxGroup, DsClose, DsContent, DsCounter, DsData, DsDataItem, DsDataLabel, DsDataValue, DsDatepicker, DsDivider, DsDrawer, DsFileUpload, DsHeading, DsHint, DsHintText, DsHintTitle, DsIcon, DsInput, DsInputPhone, DsItem, DsLabel, DsList, DsLogo, DsModalBody, DsModalHeader, DsNotification, DsNumberInput, DsPagination, DsPopup, DsProgressBar, DsRadio, DsRadioGroup, DsRoot, DsSegment, DsSegmentItem, DsSelect, DsSelectOptgroup, DsSelectOption, DsShape, DsSheet, DsSlider, DsSpinner, DsStack, DsStep, DsStepPanel, DsSteps, DsTab, DsTabPanel, DsTabs, DsTag, DsTagGroup, DsText, DsTextarea, DsToggle, DsTooltip, } from './generated/components.server';
+/**
+ * @deprecated Use `useToast` or `useSnackbar` instead. `DsAlertContainer` is the
+ * internal overlay host those hooks already manage.
+ */
+export { DsAlertContainer } from './generated/components.server';
+/**
+ * @deprecated Use `Modal` instead. The generated wrapper does not keep React
+ * `open` state in sync when the modal self-dismisses.
+ */
+export { DsModal } from './generated/components.server';
+/**
+ * @deprecated Use `useSnackbar` instead.
+ */
+export { DsSnackbar } from './generated/components.server';
+/**
+ * @deprecated Use `useToast` instead.
+ */
+export { DsToast } from './generated/components.server';

package/dist/wrappers.server.js

@@ -0,0 +1,26 @@
+/**
+ * Public generated wrappers.
+ *
+ * Overlay wrappers with hand-authored replacements, and the renamed `ds-app`
+ * root wrapper, stay public but are marked `@deprecated`. Prefer `Modal`,
+ * `useToast`, `useSnackbar`, and `DsRoot`.
+ */
+export { DsAccordion, DsAppFooter, DsAppNavbar, DsBadge, DsBrandIcon, DsButton, DsButtonGroup, DsCard, DsCardActions, DsCardContent, DsCardHeader, DsCardSubtitle, DsCardTitle, DsCarousel, DsCarouselItem, DsCheckbox, DsCheckboxGroup, DsClose, DsContent, DsCounter, DsData, DsDataItem, DsDataLabel, DsDataValue, DsDatepicker, DsDivider, DsDrawer, DsFileUpload, DsHeading, DsHint, DsHintText, DsHintTitle, DsIcon, DsInput, DsInputPhone, DsItem, DsLabel, DsList, DsLogo, DsModalBody, DsModalHeader, DsNotification, DsNumberInput, DsPagination, DsPopup, DsProgressBar, DsRadio, DsRadioGroup, DsRoot, DsSegment, DsSegmentItem, DsSelect, DsSelectOptgroup, DsSelectOption, DsShape, DsSheet, DsSlider, DsSpinner, DsStack, DsStep, DsStepPanel, DsSteps, DsTab, DsTabPanel, DsTabs, DsTag, DsTagGroup, DsText, DsTextarea, DsToggle, DsTooltip, } from './generated/components.server';
+/**
+ * @deprecated Use `useToast` or `useSnackbar` instead. `DsAlertContainer` is the
+ * internal overlay host those hooks already manage.
+ */
+export { DsAlertContainer } from './generated/components.server';
+/**
+ * @deprecated Use `Modal` instead. The generated wrapper does not keep React
+ * `open` state in sync when the modal self-dismisses.
+ */
+export { DsModal } from './generated/components.server';
+/**
+ * @deprecated Use `useSnackbar` instead.
+ */
+export { DsSnackbar } from './generated/components.server';
+/**
+ * @deprecated Use `useToast` instead.
+ */
+export { DsToast } from './generated/components.server';

package/package.json

@@ -1,22 +1,57 @@
 {
   "name": "@baloise/ds-react",
-  "version": "19.10.2",
-  "description": "The Baloise Design-System is an open source project for styling awesome web applications that follow the Baloise corporate styling guidelines.",
+  "version": "20.0.0-next.10",
+  "description": "The Helvetia Design System is an open source project for styling awesome web applications that follow the Helvetia corporate styling guidelines.",
   "repository": {
     "type": "git",
-    "url": "https://github.com/baloise/design-system.git"
+    "url": "git+https://github.com/baloise/design-system.git"
   },
   "publishConfig": {
     "access": "public"
   },
   "homepage": "https://design.baloise.dev",
+  "security": "https://github.com/baloise/design-system/security/advisories/new",
   "license": "Apache-2.0",
+  "type": "module",
+  "main": "dist/index.js",
+  "module": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "exports": {
+    ".": {
+      "node": {
+        "types": "./dist/index.server.d.ts",
+        "default": "./dist/index.server.js"
+      },
+      "types": "./dist/index.d.ts",
+      "default": "./dist/index.js"
+    }
+  },
+  "files": [
+    "dist/"
+  ],
+  "peerDependencies": {
+    "react": "^18.0.0 || ^19.0.0",
+    "react-dom": "^18.0.0 || ^19.0.0"
+  },
   "dependencies": {
-    "@baloise/ds-core": "19.10.2",
-    "@stencil/react-output-target": "1.2.0"
+    "@baloise/ds-core": "20.0.0-next.10",
+    "@stencil/react-output-target": "1.6.2"
   },
-  "module": "./index.esm.js",
-  "type": "module",
-  "main": "./index.esm.js",
-  "types": "./index.esm.d.ts"
+  "devDependencies": {
+    "@types/react": "19.3.0",
+    "@types/react-dom": "19.3.0",
+    "eslint": "10.10.0",
+    "eslint-plugin-react-hooks": "7.1.1",
+    "jsdom": "30.1.0",
+    "react": "19.3.0",
+    "react-dom": "19.3.0",
+    "typescript": "5.6.3",
+    "vitest": "4.1.11"
+  },
+  "scripts": {
+    "build": "tsc -p tsconfig.lib.json && node scripts/patch-server-wrappers.mjs",
+    "build:clean": "rimraf dist",
+    "lint": "eslint .",
+    "test": "vitest --run"
+  }
 }

package/index.esm.d.ts

@@ -1 +0,0 @@
-export * from "./src/index";