@epam/ai-dial-ui-kit 0.15.0-dev.13 → 0.15.0-dev.15

package/dist/src/components/New/Calendar/constants.d.ts

@@ -4,7 +4,7 @@ export declare const calendarModeDefaultPlaceholder: Record<CalendarMode, string
 export declare const calendarFieldBaseClassName = "flex w-full items-center justify-between gap-2 rounded-xl border border-secondary bg-layer-raised px-4 py-3 dial-small-text text-primary outline-none transition-colors hover:border-accent-alpha focus-within:border-accent-focus";
 export declare const calendarFieldDisabledClassName = "!cursor-not-allowed !border-transparent bg-layer-sunken text-control-disable-primary hover:!border-transparent";
 export declare const calendarFieldInvalidClassName = "!border-error";
-export declare const calendarPopoverClassName = "z-[53] flex w-[248px] flex-col gap-4 rounded-lg bg-layer-raised px-2 py-4 shadow-md";
+export declare const calendarPopoverClassName = "z-floating flex w-[248px] flex-col gap-4 rounded-lg bg-layer-raised px-2 py-4 shadow-md";
 export declare const calendarDayButtonBaseClassName = "flex size-10 items-center justify-center rounded-full dial-small-text text-primary hover:bg-control-accent-alpha-hover hover:text-primary focus:outline-none focus-visible:outline focus-visible:outline-focus";
 export declare const calendarDaySelectedClassName = "bg-control-accent text-control-permanent";
 export declare const calendarDayTodayClassName = "text-accent dial-small-semi-text";

package/dist/src/components/New/Dropdown/Dropdown.d.ts

@@ -1,5 +1,5 @@
 import { Placement } from '@floating-ui/react';
-import { FC, MouseEvent, ReactNode, RefObject } from 'react';
+import { CSSProperties, FC, MouseEvent, ReactNode, RefObject } from 'react';
 import { DropdownTrigger } from '../../../types/dropdown';
 import { DropdownItem } from '../../../models/dropdown';
 export interface DropdownProps {
@@ -25,6 +25,13 @@ export interface DropdownProps {
     overlayContentClassName?: string;
     separatorClassName?: string;
     listClassName?: string;
+    /**
+     * Inline style for the floating overlay. The overlay renders in a portal, so
+     * this is the only way to hand it CSS custom properties from a caller's own
+     * scope — e.g. theme variables that its rows and header read. Positioning
+     * stays the dropdown's own: `floatingStyles` is applied on top of it.
+     */
+    listStyle?: CSSProperties;
     outsidePressIgnoreRef?: RefObject<HTMLElement | null>;
     outsideClosable?: boolean;
     anchorToMouse?: boolean;
@@ -97,6 +104,7 @@ export interface DropdownProps {
  * @param [overlayContentClassName] - Additional CSS classes applied to the overlay content
  * @param [separatorClassName] - Additional CSS classes applied to the separators between items
  * @param [listClassName] - Additional CSS classes applied to the floating overlay
+ * @param [listStyle] - Inline style applied to the floating overlay, under the dropdown's own positioning styles
  * @param [outsidePressIgnoreRef] - Ref to an element that should not trigger outside press behavior
  * @param [outsideClosable=true] - Whether clicks outside the overlay should close it
  * @param [anchorToMouse=false] - Whether to anchor the dropdown to the mouse position

package/dist/src/components/New/InteractiveTooltip/constants.d.ts

@@ -10,9 +10,10 @@ export declare const INTERACTIVE_TOOLTIP_GAP = 8;
  */
 export declare const INTERACTIVE_TOOLTIP_HOVER_OPEN_DELAY = 400;
 /**
- * The panel sits above the surface it is anchored to — a dropdown or select
- * overlay, both `z-[53]` — since it can be opened from a row inside one of
- * them.
+ * The panel sits one step of the overlay ladder (`z-interactive-tooltip`, see
+ * `zIndex` in `tailwind.config.js`) above the surface it is anchored to — a
+ * dropdown or select overlay, both `z-floating` — since it can be opened from
+ * a row inside one of them.
  *
  * By style this is a neutral floating panel rather than the coloured
  * `Notification` banner: it shares the raised-card shape a dropdown or the
@@ -23,4 +24,4 @@ export declare const INTERACTIVE_TOOLTIP_HOVER_OPEN_DELAY = 400;
  * Padding and width are the panel's own, sized for a block of copy and
  * controls rather than a menu row.
  */
-export declare const interactiveTooltipClassName = "z-[54] max-w-[320px] rounded-xl bg-layer-0 p-4 dial-small-text text-primary shadow-md";
+export declare const interactiveTooltipClassName = "z-interactive-tooltip max-w-[320px] rounded-xl bg-layer-0 p-4 dial-small-text text-primary shadow-md";

package/dist/src/components/New/Notification/Notification.d.ts

@@ -5,6 +5,7 @@ export interface NotificationProps extends Omit<HTMLAttributes<HTMLDivElement>,
     type?: NotificationType;
     title?: ReactNode;
     message: ReactNode;
+    action?: ReactNode;
     closable?: boolean;
     iconSize?: number;
     iconStroke?: number;
@@ -57,12 +58,29 @@ export interface NotificationProps extends Omit<HTMLAttributes<HTMLDivElement>,
  *   title="Title"
  *   message="Description text example"
  * />
+ *
+ * <Notification
+ *   variant={NotificationVariant.Error}
+ *   type={NotificationType.SectionMessage}
+ *   title="Couldn't finish this response"
+ *   message="Something went wrong. Try again in a moment."
+ *   action={
+ *     <Button
+ *       variant={ButtonVariant.Neutral}
+ *       appearance={ButtonAppearance.Outlined}
+ *       size={ElementSize.Small}
+ *       label="Try again"
+ *       onClick={handleRetry}
+ *     />
+ *   }
+ * />
  * ```
  *
  * @param [variant=NotificationVariant.Info] - Defines the visual style and icon of the alert
  * @param [type=NotificationType.Toast] - Defines the type of notification, either a toast or a section message
  * @param [title] - Optional heading displayed above the message in semibold
  * @param message - Message text to display inside the alert
+ * @param [action] - Optional control (typically a small `Button`) rendered at the inline end, after the text and before the close button; the caller supplies its accessible name
  * @param [className] - Additional CSS classes applied to the alert container
  * @param [textClassName] - Additional CSS classes applied to the message text
  * @param [closable=false] - Whether the alert has a close button

package/dist/src/components/New/Popup/constants.d.ts

@@ -1,5 +1,5 @@
 import { PopupSize } from '../../../types/popup';
-export declare const popupOverlayBaseClassName = "z-[52] flex items-center justify-center bg-backdrop md:p-4 gap-5 p-6";
+export declare const popupOverlayBaseClassName = "z-popup flex items-center justify-center bg-backdrop md:p-4 gap-5 p-6";
 export declare const popupBaseClassName = "relative flex w-full max-h-full flex-col rounded-xl bg-layer-raised md:h-auto";
 export declare const popupHeaderClassName = "flex flex-row items-center justify-between px-6 py-4";
 export declare const popupTitleClassName = "flex-1 min-w-0 mr-3 truncate dial-h1-text text-primary";

package/dist/src/components/New/Tooltip/constants.d.ts

@@ -19,8 +19,10 @@ export declare const HOVER_OPEN_DELAY = 500;
  */
 export declare const arrowClassName = "fill-control-inverted";
 /**
- * Tooltips sit above popups, dropdowns and the calendar (all `z-[53]`), since
- * they can be triggered by a control inside one of them.
+ * Tooltips sit at the top of the overlay ladder (`z-tooltip`, see `zIndex` in
+ * `tailwind.config.js`) — above popups (`z-popup`), dropdowns and the calendar
+ * (`z-floating`) and interactive tooltips — since they can be triggered by a
+ * control inside any of them.
  *
  * `max-w-[376px]` is the cap the design puts on a tooltip: at `dial-small-text`
  * that is around 60 characters a line, past which a line stops being
@@ -36,4 +38,4 @@ export declare const arrowClassName = "fill-control-inverted";
  * nothing to see around a 7px triangle that the box's own shadow does not
  * already carry.
  */
-export declare const tooltipClassName = "z-[55] max-w-[376px] whitespace-pre-wrap break-words rounded-lg bg-control-inverted px-3 py-2 dial-small-text text-control-inverted shadow-xs";
+export declare const tooltipClassName = "z-tooltip max-w-[376px] whitespace-pre-wrap break-words rounded-lg bg-control-inverted px-3 py-2 dial-small-text text-control-inverted shadow-xs";

package/dist/src/components/Popup/constants.d.ts

@@ -1,5 +1,5 @@
 import { PopupSize } from '../../types/popup';
-export declare const overlayBaseClassName = "z-[52] flex items-center justify-center bg-blackout md:p-4";
+export declare const overlayBaseClassName = "z-popup flex items-center justify-center bg-blackout md:p-4";
 export declare const popupDividerClassName = "divide-tertiary divide-y";
 export declare const popupHeaderClassName = "flex flex-row justify-between py-4 px-6 items-center";
 export declare const popupSizeClassMap: Record<PopupSize, string>;