@neo4j-ndl/react 2.14.0 → 2.15.5

package/lib/types/index.d.ts

@@ -64,4 +64,5 @@ export * from './inline-edit';
 export * from './dropdown-button';
 export * from './divider';
 export * from './tree-view';
+export * from './toast';
 export * from './callout';

package/lib/types/table/Components.d.ts

@@ -19,8 +19,7 @@
  *  You should have received a copy of the GNU General Public License
  *  along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
-import { type Cell, type Header as HeaderType, type Row, type RowData } from '@tanstack/react-table';
-import { type SortingColumn } from '@tanstack/table-core';
+import { type Cell, type Header as HeaderType, type Row, type RowData, type SortingColumn } from '@tanstack/react-table';
 import { type ElementBase } from '../helpers';
 export interface CommonInnerProps<T = HTMLDivElement> {
     /** Children are surfaced to allow easy overriding */

package/lib/types/tag/Tag.d.ts

@@ -31,6 +31,8 @@ export interface CommonTagProps extends ElementBase {
     children: string | React.ReactNode;
     /** Type of the tag */
     type?: 'destructive' | 'default';
+    /** Size of the tag */
+    size?: 'small' | 'medium' | 'large';
 }
 export interface RemoveableTagProps extends CommonTagProps {
     /** Adds a "x" icon is set to true */

package/lib/types/tip/Tip.d.ts

@@ -19,6 +19,7 @@
  *  along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
 import { FloatingPortal, type Side } from '@floating-ui/react';
+import * as floatingUiReactDom from '@floating-ui/react-dom';
 import React, { type ComponentProps } from 'react';
 import { type ElementBase } from '../helpers';
 import { Typography } from '../typography';
@@ -35,30 +36,30 @@ export interface TipProps {
     onOpenChange?: (isOpen: boolean, event?: Event) => void;
 }
 export declare function useTip({ allowedPlacements, isOpen: controlledOpen, isDisabled, onOpenChange: setControlledOpen, type, }?: TipProps): {
-    placement: import("@floating-ui/utils").Placement;
-    strategy: import("@floating-ui/utils").Strategy;
-    middlewareData: import("@floating-ui/core").MiddlewareData;
+    placement: floatingUiReactDom.Placement;
+    strategy: floatingUiReactDom.Strategy;
+    middlewareData: floatingUiReactDom.MiddlewareData;
     x: number;
     y: number;
     isPositioned: boolean;
     update: () => void;
     floatingStyles: React.CSSProperties;
     refs: {
-        reference: React.MutableRefObject<import("@floating-ui/react-dom").ReferenceType | null>;
+        reference: React.MutableRefObject<floatingUiReactDom.ReferenceType | null>;
         floating: React.MutableRefObject<HTMLElement | null>;
-        setReference: (node: import("@floating-ui/react-dom").ReferenceType | null) => void;
+        setReference: (node: floatingUiReactDom.ReferenceType | null) => void;
         setFloating: (node: HTMLElement | null) => void;
     } & import("@floating-ui/react").ExtendedRefs<import("@floating-ui/react").ReferenceType>;
     elements: {
-        reference: import("@floating-ui/react-dom").ReferenceType | null;
+        reference: floatingUiReactDom.ReferenceType | null;
         floating: HTMLElement | null;
     } & import("@floating-ui/react").ExtendedElements<import("@floating-ui/react").ReferenceType>;
     context: {
-        placement: import("@floating-ui/utils").Placement;
-        strategy: import("@floating-ui/utils").Strategy;
         x: number;
         y: number;
-        middlewareData: import("@floating-ui/core").MiddlewareData;
+        placement: floatingUiReactDom.Placement;
+        strategy: floatingUiReactDom.Strategy;
+        middlewareData: floatingUiReactDom.MiddlewareData;
         isPositioned: boolean;
         update: () => void;
         floatingStyles: React.CSSProperties;
@@ -79,30 +80,30 @@ export declare function useTip({ allowedPlacements, isOpen: controlledOpen, isDi
     type: "tooltip" | "toggletip";
 };
 export declare const useTipContext: () => {
-    placement: import("@floating-ui/utils").Placement;
-    strategy: import("@floating-ui/utils").Strategy;
-    middlewareData: import("@floating-ui/core").MiddlewareData;
+    placement: floatingUiReactDom.Placement;
+    strategy: floatingUiReactDom.Strategy;
+    middlewareData: floatingUiReactDom.MiddlewareData;
     x: number;
     y: number;
     isPositioned: boolean;
     update: () => void;
     floatingStyles: React.CSSProperties;
     refs: {
-        reference: React.MutableRefObject<import("@floating-ui/react-dom").ReferenceType | null>;
+        reference: React.MutableRefObject<floatingUiReactDom.ReferenceType | null>;
         floating: React.MutableRefObject<HTMLElement | null>;
-        setReference: (node: import("@floating-ui/react-dom").ReferenceType | null) => void;
+        setReference: (node: floatingUiReactDom.ReferenceType | null) => void;
         setFloating: (node: HTMLElement | null) => void;
     } & import("@floating-ui/react").ExtendedRefs<import("@floating-ui/react").ReferenceType>;
     elements: {
-        reference: import("@floating-ui/react-dom").ReferenceType | null;
+        reference: floatingUiReactDom.ReferenceType | null;
         floating: HTMLElement | null;
     } & import("@floating-ui/react").ExtendedElements<import("@floating-ui/react").ReferenceType>;
     context: {
-        placement: import("@floating-ui/utils").Placement;
-        strategy: import("@floating-ui/utils").Strategy;
         x: number;
         y: number;
-        middlewareData: import("@floating-ui/core").MiddlewareData;
+        placement: floatingUiReactDom.Placement;
+        strategy: floatingUiReactDom.Strategy;
+        middlewareData: floatingUiReactDom.MiddlewareData;
         isPositioned: boolean;
         update: () => void;
         floatingStyles: React.CSSProperties;

package/lib/types/toast/Toast.d.ts

@@ -0,0 +1,118 @@
+/**
+ *
+ *  Copyright (c) "Neo4j"
+ *  Neo4j Sweden AB [http://neo4j.com]
+ *
+ *  This file is part of Neo4j.
+ *
+ *  Neo4j is free software: you can redistribute it and/or modify
+ *  it under the terms of the GNU General Public License as published by
+ *  the Free Software Foundation, either version 3 of the License, or
+ *  (at your option) any later version.
+ *
+ *  This program is distributed in the hope that it will be useful,
+ *  but WITHOUT ANY WARRANTY; without even the implied warranty of
+ *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ *  GNU General Public License for more details.
+ *
+ *  You should have received a copy of the GNU General Public License
+ *  along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+import React, { type ReactNode } from 'react';
+import { toast as sonnerToast } from 'sonner';
+import type { ExternalToast as SonnerExternalToast, ToasterProps as SonnerToasterProps } from './sonner-types';
+type ToastVariants = 'neutral' | 'success' | 'danger' | 'loading-spinner' | 'progress-bar';
+type ToastCommandVariants = 'neutral' | 'success' | 'danger' | 'loadingSpinner' | 'progressBar';
+type ToastId = string | number;
+interface BaseToastProps {
+    /** Reference to the toast custom container. */
+    ref?: React.ForwardedRef<HTMLDivElement>;
+    /** If `true` a close button will be displayed in the toast. */
+    isCloseable?: boolean;
+    /** If `true` the toast will close when the action button is triggered. */
+    shouldCloseOnAction?: boolean;
+    /** Function that will be called when the toast is closed. */
+    onClose?: (id: ToastId) => void;
+    /** If true the toast will close automatically after a certain time. */
+    shouldAutoClose?: boolean;
+    /** Function that will be called when the toast is automatically closed. */
+    onAutoClose?: (id: ToastId) => void;
+    /** If set an action button will be displayed. The value here will be displayed
+     * in the action button. If this is set the toast property `shouldAutoClose` will
+     * automatically be set to `false` unless overridden. */
+    actionLabel?: string;
+    /** Function that will be called when the action button is clicked. */
+    onAction?: (id: ToastId) => void;
+    /** If a dev wishes to set the underlying framework props (Sonner Toast).
+     *  https://sonner.emilkowal.ski/toast#api-reference */
+    sonnerToastProps?: SonnerExternalToast;
+}
+interface ToastNeutralProps extends BaseToastProps {
+    icon?: ReactNode;
+}
+interface ToastSuccessProps extends BaseToastProps {
+}
+interface ToastDangerProps extends BaseToastProps {
+}
+interface ToastLoadingSpinnerProps extends BaseToastProps {
+}
+interface ToastProgressBarProps extends BaseToastProps {
+    icon?: ReactNode;
+    initialProgressBarValue?: number;
+}
+type ToastVariantsProps = ToastNeutralProps | ToastSuccessProps | ToastDangerProps | ToastLoadingSpinnerProps | ToastProgressBarProps;
+interface ToasterProps extends Pick<SonnerToasterProps, 'position' | 'visibleToasts' | 'className'> {
+    sonnerToasterProps?: SonnerToasterProps;
+}
+declare const Toaster: (props: ToasterProps) => import("react/jsx-runtime").JSX.Element;
+type ToastElement = ToastVariantsProps & {
+    icon: ReactNode;
+    id: ToastId;
+    variant: ToastVariants;
+    text: ReactNode;
+    initialProgressBarValue?: number;
+};
+declare const Toast: React.ForwardRefExoticComponent<(Omit<ToastNeutralProps & {
+    icon: ReactNode;
+    id: ToastId;
+    variant: ToastVariants;
+    text: ReactNode;
+    initialProgressBarValue?: number | undefined;
+}, "ref"> | Omit<ToastSuccessProps & {
+    icon: ReactNode;
+    id: ToastId;
+    variant: ToastVariants;
+    text: ReactNode;
+    initialProgressBarValue?: number | undefined;
+}, "ref"> | Omit<ToastDangerProps & {
+    icon: ReactNode;
+    id: ToastId;
+    variant: ToastVariants;
+    text: ReactNode;
+    initialProgressBarValue?: number | undefined;
+}, "ref"> | Omit<ToastLoadingSpinnerProps & {
+    icon: ReactNode;
+    id: ToastId;
+    variant: ToastVariants;
+    text: ReactNode;
+    initialProgressBarValue?: number | undefined;
+}, "ref"> | Omit<ToastProgressBarProps & {
+    icon: ReactNode;
+    id: ToastId;
+    variant: ToastVariants;
+    text: ReactNode;
+    initialProgressBarValue?: number | undefined;
+}, "ref">) & React.RefAttributes<HTMLDivElement>>;
+interface Toast {
+    neutral: (text: ReactNode, props?: ToastNeutralProps) => ToastId;
+    success: (text: ReactNode, props?: ToastSuccessProps) => ToastId;
+    danger: (text: ReactNode, props?: ToastDangerProps) => ToastId;
+    loadingSpinner: (text: ReactNode, props?: ToastLoadingSpinnerProps) => ToastId;
+    progressBar: (text: ReactNode, props?: ToastProgressBarProps) => ToastId;
+    updateProgressBarValue: (id: ToastId, value: number) => void;
+    close: (id: ToastId) => void;
+    sonnerToast: typeof sonnerToast;
+}
+declare const toast: Toast;
+export { Toaster, toast };
+export type { ToasterProps, ToastVariants, ToastCommandVariants, ToastNeutralProps, ToastSuccessProps, ToastDangerProps, ToastLoadingSpinnerProps, ToastProgressBarProps, ToastVariantsProps, ToastElement, };

package/lib/types/toast/index.d.ts

@@ -0,0 +1,21 @@
+/**
+ *
+ *  Copyright (c) "Neo4j"
+ *  Neo4j Sweden AB [http://neo4j.com]
+ *
+ *  This file is part of Neo4j.
+ *
+ *  Neo4j is free software: you can redistribute it and/or modify
+ *  it under the terms of the GNU General Public License as published by
+ *  the Free Software Foundation, either version 3 of the License, or
+ *  (at your option) any later version.
+ *
+ *  This program is distributed in the hope that it will be useful,
+ *  but WITHOUT ANY WARRANTY; without even the implied warranty of
+ *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ *  GNU General Public License for more details.
+ *
+ *  You should have received a copy of the GNU General Public License
+ *  along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+export * from './Toast';

package/lib/types/toast/sonner-types.d.ts

@@ -0,0 +1,179 @@
+/**
+ *
+ *  Copyright (c) "Neo4j"
+ *  Neo4j Sweden AB [http://neo4j.com]
+ *
+ *  This file is part of Neo4j.
+ *
+ *  Neo4j is free software: you can redistribute it and/or modify
+ *  it under the terms of the GNU General Public License as published by
+ *  the Free Software Foundation, either version 3 of the License, or
+ *  (at your option) any later version.
+ *
+ *  This program is distributed in the hope that it will be useful,
+ *  but WITHOUT ANY WARRANTY; without even the implied warranty of
+ *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ *  GNU General Public License for more details.
+ *
+ *  You should have received a copy of the GNU General Public License
+ *  along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+import type React from 'react';
+export type ToastTypes = 'normal' | 'action' | 'success' | 'info' | 'warning' | 'error' | 'loading' | 'default';
+export type PromiseT<Data = any> = Promise<Data> | (() => Promise<Data>);
+export type PromiseExternalToast = Omit<ExternalToast, 'description'>;
+export type PromiseData<ToastData = any> = PromiseExternalToast & {
+    loading?: string | React.ReactNode;
+    success?: string | React.ReactNode | ((data: ToastData) => React.ReactNode | string);
+    error?: string | React.ReactNode | ((error: any) => React.ReactNode | string);
+    description?: string | React.ReactNode | ((data: any) => React.ReactNode | string);
+    finally?: () => void | Promise<void>;
+};
+export interface ToastClassnames {
+    toast?: string;
+    title?: string;
+    description?: string;
+    loader?: string;
+    closeButton?: string;
+    cancelButton?: string;
+    actionButton?: string;
+    success?: string;
+    error?: string;
+    info?: string;
+    warning?: string;
+    loading?: string;
+    default?: string;
+    content?: string;
+    icon?: string;
+}
+export interface ToastIcons {
+    success?: React.ReactNode;
+    info?: React.ReactNode;
+    warning?: React.ReactNode;
+    error?: React.ReactNode;
+    loading?: React.ReactNode;
+}
+interface Action {
+    label: string;
+    onClick: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
+    actionButtonStyle?: React.CSSProperties;
+}
+export interface ToastT {
+    id: number | string;
+    title?: string | React.ReactNode;
+    type?: ToastTypes;
+    icon?: React.ReactNode;
+    jsx?: React.ReactNode;
+    invert?: boolean;
+    closeButton?: boolean;
+    dismissible?: boolean;
+    description?: React.ReactNode;
+    duration?: number;
+    delete?: boolean;
+    important?: boolean;
+    action?: Action | React.ReactNode;
+    cancel?: Action | React.ReactNode;
+    onDismiss?: (toast: ToastT) => void;
+    onAutoClose?: (toast: ToastT) => void;
+    promise?: PromiseT;
+    cancelButtonStyle?: React.CSSProperties;
+    actionButtonStyle?: React.CSSProperties;
+    style?: React.CSSProperties;
+    unstyled?: boolean;
+    className?: string;
+    classNames?: ToastClassnames;
+    descriptionClassName?: string;
+    position?: Position;
+}
+export declare function isAction(action: Action | React.ReactNode): action is Action;
+export type Position = 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right' | 'top-center' | 'bottom-center';
+export interface HeightT {
+    height: number;
+    toastId: number | string;
+    position: Position;
+}
+interface ToastOptions {
+    className?: string;
+    closeButton?: boolean;
+    descriptionClassName?: string;
+    style?: React.CSSProperties;
+    cancelButtonStyle?: React.CSSProperties;
+    actionButtonStyle?: React.CSSProperties;
+    duration?: number;
+    unstyled?: boolean;
+    classNames?: ToastClassnames;
+}
+type CnFunction = (...classes: Array<string | undefined>) => string;
+export interface ToasterProps {
+    invert?: boolean;
+    theme?: 'light' | 'dark' | 'system';
+    position?: Position;
+    hotkey?: string[];
+    richColors?: boolean;
+    expand?: boolean;
+    duration?: number;
+    gap?: number;
+    visibleToasts?: number;
+    closeButton?: boolean;
+    toastOptions?: ToastOptions;
+    className?: string;
+    style?: React.CSSProperties;
+    offset?: string | number;
+    dir?: 'rtl' | 'ltr' | 'auto';
+    /**
+     * @deprecated Please use the `icons` prop instead:
+     * ```jsx
+     * <Toaster
+     *   icons={{ loading: <LoadingIcon /> }}
+     * />
+     * ```
+     */
+    loadingIcon?: React.ReactNode;
+    icons?: ToastIcons;
+    containerAriaLabel?: string;
+    pauseWhenPageIsHidden?: boolean;
+    cn?: CnFunction;
+}
+export interface ToastProps {
+    toast: ToastT;
+    toasts: ToastT[];
+    index: number;
+    expanded: boolean;
+    invert: boolean;
+    heights: HeightT[];
+    setHeights: React.Dispatch<React.SetStateAction<HeightT[]>>;
+    removeToast: (toast: ToastT) => void;
+    gap?: number;
+    position: Position;
+    visibleToasts: number;
+    expandByDefault: boolean;
+    closeButton: boolean;
+    interacting: boolean;
+    style?: React.CSSProperties;
+    cancelButtonStyle?: React.CSSProperties;
+    actionButtonStyle?: React.CSSProperties;
+    duration?: number;
+    className?: string;
+    unstyled?: boolean;
+    descriptionClassName?: string;
+    loadingIcon?: React.ReactNode;
+    classNames?: ToastClassnames;
+    icons?: ToastIcons;
+    closeButtonAriaLabel?: string;
+    pauseWhenPageIsHidden: boolean;
+    cn: CnFunction;
+}
+export declare enum SwipeStateTypes {
+    SwipedOut = "SwipedOut",
+    SwipedBack = "SwipedBack",
+    NotSwiped = "NotSwiped"
+}
+export type Theme = 'light' | 'dark';
+export interface ToastToDismiss {
+    id: number | string;
+    dismiss: boolean;
+}
+export type ExternalToast = Omit<ToastT, 'id' | 'type' | 'title' | 'jsx' | 'delete' | 'promise'> & {
+    id?: number | string;
+};
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@neo4j-ndl/react",
-  "version": "2.14.0",
+  "version": "2.15.5",
   "sideEffects": false,
   "description": "React implementation of Neo4j Design System",
   "keywords": [
@@ -39,29 +39,10 @@
   "publishConfig": {
     "access": "public"
   },
-  "scripts": {
-    "generate-component": "node ./scripts/component-generator.js",
-    "pretest": "yarn run lint",
-    "test": "yarn test:unit && yarn test:playwright",
-    "test:unit": "vitest --run --typecheck",
-    "test:playwright": "playwright test -c playwright-component-testing.config.ts",
-    "build": "yarn build:esm && yarn build:cjs && yarn build:types",
-    "build:esm": "tsc -p tsconfig.esm.json",
-    "build:cjs": "tsc -p tsconfig.cjs.json",
-    "watch:esm": "tsc -p tsconfig.esm.json --watch",
-    "watch:cjs": "tsc -p tsconfig.cjs.json --watch",
-    "build:types": "tsc -p tsconfig.types.json",
-    "format": "prettier --write 'src/**/*.{js,jsx,ts,tsx}'",
-    "lint": "eslint --ext .jsx,.tsx,.js,.ts src",
-    "generate:all": "yarn generate:custom-icons && yarn generate:hero-icons",
-    "generate:custom-icons": "svgr --template svgr-template.js --index-template svgr-index-template.js --icon --typescript --no-svgo --replace-attr-values '#535B66=currentColor' --jsx-runtime 'automatic' --out-dir ./src/icons/generated/custom -- ../base/src/icons",
-    "generate:hero-icons": "ts-node ./scripts/generatedHeroIcons.ts"
-  },
   "devDependencies": {
     "@axe-core/playwright": "4.9.0",
     "@playwright/experimental-ct-react": "1.43.1",
     "@svgr/cli": "6.5.1",
-    "@types/node": "20.11.21",
     "@types/react": "18.2.18",
     "@types/react-datepicker": "^4.11.2",
     "@types/react-dom": "18.2.7",
@@ -80,7 +61,7 @@
     "vitest": "1.3.1"
   },
   "peerDependencies": {
-    "@heroicons/react": "2.0.13",
+    "@heroicons/react": "2.0.18",
     "react": ">=16.8.0",
     "react-dom": ">=16.8.0"
   },
@@ -88,12 +69,12 @@
     "@dnd-kit/core": "6.1.0",
     "@dnd-kit/sortable": "8.0.0",
     "@floating-ui/react": "0.25.1",
-    "@heroicons/react": "2.0.13",
+    "@floating-ui/react-dom": "2.0.1",
+    "@heroicons/react": "2.0.18",
     "@neo4j-cypher/react-codemirror": "^1.0.1",
-    "@neo4j-ndl/base": "^2.10.0",
     "@table-nav/core": "0.0.7",
     "@table-nav/react": "0.0.7",
-    "@tanstack/react-table": "^8.9.3",
+    "@tanstack/react-table": "8.17.3",
     "classnames": "^2.3.1",
     "date-fns": "^2.30.0",
     "detect-browser": "^5.3.0",
@@ -107,11 +88,28 @@
     "react-syntax-highlighter": "^15.5.0",
     "react-table": "^7.7.0",
     "react-use": "^17.4.0",
+    "sonner": "1.4.41",
     "tinycolor2": "^1.4.2",
-    "usehooks-ts": "2.9.1"
+    "usehooks-ts": "2.9.1",
+    "@neo4j-ndl/base": "^2.11.4"
   },
-  "resolutions": {
-    "@types/react": "18.2.18",
-    "@types/react-dom": "18.2.7"
+  "scripts": {
+    "generate-component": "node ./scripts/component-generator.js",
+    "pretest": "pnpm lint",
+    "test": "pnpm test:unit && pnpm test:playwright",
+    "test:unit": "vitest --run --typecheck --exclude node_modules",
+    "test:playwright": "playwright test -c playwright-component-testing.config.ts",
+    "build": "pnpm build:esm && pnpm build:cjs && pnpm build:types",
+    "build:esm": "tsc -p tsconfig.esm.json",
+    "build:cjs": "tsc -p tsconfig.cjs.json",
+    "watch:esm": "tsc -p tsconfig.esm.json --watch",
+    "watch:cjs": "tsc -p tsconfig.cjs.json --watch",
+    "build:types": "tsc -p tsconfig.types.json",
+    "format": "prettier --write 'src/**/*.{js,jsx,ts,tsx}'",
+    "lint": "eslint --ext .jsx,.tsx,.js,.ts src",
+    "generate:all": "pnpm generate:custom-icons && pnpm generate:hero-icons",
+    "generate:custom-icons": "svgr --template svgr-template.js --index-template svgr-index-template.js --icon --typescript --no-svgo --replace-attr-values '#535B66=currentColor' --svg-props className=ndl-icon-svg --jsx-runtime 'automatic' --out-dir ./src/icons/generated/custom -- ../base/src/icons",
+    "generate:hero-icons": "ts-node ./scripts/generatedHeroIcons.ts",
+    "nuke:local": "npx --yes rimraf@5.0.5 .tsbuildinfo node_modules playwright-report test-results playwright/.cache"
   }
 }