@ably/ui 15.6.0-dev.1a416b3 → 15.6.0-dev.274a3001

package/index.d.ts

@@ -343,51 +343,28 @@ declare module '@ably/ui/core/DropdownMenu' {
 import { ReactNode } from "react";
 import { IconName } from "@ably/ui/core/Icon/types";
 type DropdownMenuProps = {
-    /**
-     * The content to be displayed within the dropdown menu.
-     */
     children: ReactNode;
 };
 type TriggerProps = {
-    /**
-     * The content to be displayed within the trigger element.
-     */
     children: ReactNode;
-    /**
-     * Additional class names to apply to the trigger element.
-     */
-    triggerClassNames?: string;
-    /**
-     * A description for the trigger element, used for accessibility purposes.
-     */
-    description?: string;
+    additionalTriggerCSS?: string;
 };
 type ContentProps = {
-    /**
-     * The content to be displayed within the dropdown menu.
-     */
     children: ReactNode;
-    /**
-     * The position of the dropdown menu relative to the trigger element.
-     * Defaults to "right".
-     */
     anchorPosition?: string;
-    /**
-     * Additional class names to apply to the content container.
-     */
-    contentClassNames?: string;
+    additionalContentCSS?: string;
 };
 type LinkProps = {
     url: string;
     title: string;
-    subtitle?: string;
-    iconName?: IconName;
-    children?: ReactNode;
+    subtitle: string;
+    iconName: IconName;
+    children: ReactNode;
 };
 const DropdownMenu: {
     ({ children }: DropdownMenuProps): import("react/jsx-runtime").JSX.Element;
-    Trigger: ({ children, triggerClassNames, description, }: TriggerProps) => import("react/jsx-runtime").JSX.Element;
-    Content: ({ children, anchorPosition, contentClassNames, }: ContentProps) => import("react/jsx-runtime").JSX.Element | null;
+    Trigger: ({ children, additionalTriggerCSS }: TriggerProps) => import("react/jsx-runtime").JSX.Element;
+    Content: ({ children, anchorPosition, additionalContentCSS, }: ContentProps) => import("react/jsx-runtime").JSX.Element | null;
     Link: ({ url, title, subtitle, iconName, children }: LinkProps) => import("react/jsx-runtime").JSX.Element;
 };
 export default DropdownMenu;
@@ -440,7 +417,7 @@ type FlashProps = {
 };
 type FlashesProps = {
     flashes: {
-        items: FlashProps[];
+        items: Pick<FlashProps, "type" | "content">[];
     };
 };
 type BackendFlashesProps = {
@@ -521,10 +498,10 @@ declare module '@ably/ui/core/Footer' {
 type FooterProps = {
     paths: {
         ablyStack: string;
-        highestPerformer: string;
-        highestUserAdoption: string;
         bestSupport: string;
-        fastestImplementation: string;
+        highPerformer: string;
+        usersMostLikely: string;
+        bestMeetsRequirements: string;
     };
     urlBase: string;
     statusUrl: string;
@@ -549,32 +526,6 @@ export type ThemedScrollpoint = {
     id: string;
     className: string;
 };
-/**
- * Represents the state of the user session in the header.
- */
-export type HeaderSessionState = {
-    /**
-     * Indicates if the user is signed in.
-     */
-    signedIn: boolean;
-    /**
-     * Information required to log out the user.
-     */
-    logOut: {
-        /**
-         * Token used for logging out.
-         */
-        token: string;
-        /**
-         * URL to log out the user.
-         */
-        href: string;
-    };
-    /**
-     * Name of the user's account.
-     */
-    accountName: string;
-};
 /**
  * Props for the Header component.
  */
@@ -619,7 +570,31 @@ export type HeaderProps = {
     /**
      * State of the user session.
      */
-    sessionState?: HeaderSessionState;
+    sessionState?: {
+        /**
+         * Indicates if the user is signed in.
+         */
+        signedIn: boolean;
+        /**
+         * Account information.
+         */
+        account: {
+            /**
+             * Links related to the account.
+             */
+            links: {
+                /**
+                 * Dashboard link information.
+                 */
+                dashboard: {
+                    /**
+                     * URL for the dashboard link.
+                     */
+                    href: string;
+                };
+            };
+        };
+    };
     /**
      * Array of themed scrollpoints. The header will change its appearance based on the scrollpoint in view.
      */
@@ -751,9 +726,6 @@ export type MeganavPaths = {
     logo?: string;
     iconSprites: string;
     ablyStack: string;
-    blogThumb1: string;
-    blogThumb2: string;
-    blogThumb3: string;
     awsLogo?: string;
 };
 export type MeganavPanels = {
@@ -788,23 +760,26 @@ export type MeganavSessionState = {
         href: string;
     };
 };
-type MeganavProps = {
-    paths?: MeganavPaths;
-    themeName: "white" | "black" | "transparentToWhite";
-    notice?: {
-        props: {
-            title: string;
-            bodyText: string;
-            buttonLink: string;
-            buttonLabel: string;
-            closeBtn: boolean;
-        };
-        config: {
-            cookieId: string;
-            noticeId: string;
+export type NoticeApiProps = {
+    props: {
+        title: string;
+        bodyText: string;
+        buttonLink: string;
+        buttonLabel: string;
+        closeBtn: boolean;
+    };
+    config: {
+        cookieId: string;
+        noticeId: string | number;
+        options: {
             collapse: boolean;
         };
     };
+};
+type MeganavProps = {
+    paths?: MeganavPaths;
+    themeName: "white" | "black" | "transparentToWhite";
+    notice?: NoticeApiProps;
     loginLink?: string;
     urlBase?: string;
     addSearchApiKey: string;
@@ -1068,19 +1043,22 @@ function Notice({ bannerContainer, cookieId, noticeId, options }: {
 }
 
 declare module '@ably/ui/core/Notice' {
-type NoticeProps = {
+import { ColorClass, ColorThemeSet } from "@ably/ui/core/styles/colors/types";
+export type NoticeProps = {
     buttonLink?: string;
     buttonLabel?: string;
     bodyText?: string;
     title?: string;
     closeBtn?: boolean;
     config?: {
-        collapse: boolean;
-        noticeId: string;
+        options: {
+            collapse: boolean;
+        };
+        noticeId: string | number;
         cookieId: string;
     };
     bgColor?: string;
-    textColor?: string;
+    textColor?: ColorClass | ColorThemeSet;
     bannerContainer?: Element | null;
     cookieId?: string;
     noticeId?: string;
@@ -1484,6 +1462,13 @@ export function queryIdAll(val: any, root?: Document): NodeListOf<Element>;
 //# sourceMappingURL=dom-query.d.ts.map
 }
 
+declare module '@ably/ui/core/hooks/use-rails-ujs-hooks' {
+import { RefObject } from "react";
+const useRailsUjsLinks: () => RefObject<HTMLDivElement>;
+export default useRailsUjsLinks;
+//# sourceMappingURL=use-rails-ujs-hooks.d.ts.map
+}
+
 declare module '@ably/ui/core/hubspot-chat-toggle' {
 export default function toggleChatWidget(params: any): (() => void) | undefined;
 //# sourceMappingURL=hubspot-chat-toggle.d.ts.map

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ably/ui",
-  "version": "15.6.0-dev.1a416b3",
+  "version": "15.6.0-dev.274a3001",
   "description": "Home of the Ably design system library ([design.ably.com](https://design.ably.com)). It provides a showcase, development/test environment and a publishing pipeline for different distributables.",
   "repository": {
     "type": "git",
@@ -34,8 +34,8 @@
     "@types/lodash.throttle": "^4.1.9",
     "@types/react-dom": "^18.3.0",
     "@types/svg-sprite": "^0.0.39",
-    "@typescript-eslint/eslint-plugin": "^8.16.0",
-    "@typescript-eslint/parser": "^8.16.0",
+    "@typescript-eslint/eslint-plugin": "^8.25.0",
+    "@typescript-eslint/parser": "^8.25.0",
     "@vitejs/plugin-react": "^4.2.1",
     "@whitespace/storybook-addon-html": "^6.1.1",
     "autoprefixer": "^10.0.2",