@tedi-design-system/react 17.1.0-rc.8 → 17.1.0

package/src/tedi/components/layout/header/components/header-mobile-button/header-mobile-button.d.ts

@@ -0,0 +1,21 @@
+import { default as React } from 'react';
+import { IconWithoutBackgroundProps } from '../../../../base/icon/icon';
+interface HeaderMobileButtonProps {
+    /** Click handler for the button. */
+    onClick?: () => void;
+    /** If provided, the button renders as a link navigating to this URL. */
+    href?: string;
+    /**
+     * Icon displayed inside the button.
+     * Can be a material icon name (e.g. 'menu') or a full IconWithoutBackgroundProps object for more control.
+     */
+    icon: string | IconWithoutBackgroundProps;
+    /** Label text displayed below the icon. */
+    label?: string;
+    /** Whether the button is in a selected state. */
+    selected?: boolean;
+    /** Whether the button is disabled. */
+    disabled?: boolean;
+}
+declare const HeaderMobileButton: React.ForwardRefExoticComponent<HeaderMobileButtonProps & React.RefAttributes<HTMLButtonElement>>;
+export default HeaderMobileButton;

package/src/tedi/components/layout/header/components/header-profile/header-profile.d.ts

@@ -0,0 +1,43 @@
+import { Breakpoint, BreakpointSupport } from '../../../../../helpers';
+interface HeaderProfileContextValue {
+    activeRoleId: string | null;
+    setActiveRoleId: (id: string | null) => void;
+}
+export declare const useHeaderProfile: () => HeaderProfileContextValue | null;
+interface HeaderProfileBreakpointProps {
+    /**
+     * Defines the breakpoint from which the profile menu is displayed as a popover.
+     * Below this breakpoint, it is rendered as a modal.
+     *
+     * @default lg
+     */
+    showPopover?: Breakpoint;
+    /** Custom label text for the profile button. Falls back to the `header.profile` translation key. */
+    label?: string;
+}
+export interface HeaderProfileProps extends BreakpointSupport<HeaderProfileBreakpointProps> {
+    /** Content rendered inside the profile popover or modal (e.g. navigation links, logout button). */
+    children: React.ReactNode;
+    /**
+     * Whether to display a text label next to the profile icon on non-mobile viewports.
+     * @default false
+     */
+    showLabel?: boolean;
+    /**
+     * Whether the profile button is disabled. Prevents opening the popover or modal.
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Removes default item styles from the mobile modal content.
+     * When `true`, children are rendered without padding, borders, or background applied by the component.
+     * Use when the content requires custom item styling.
+     * @default false
+     */
+    noStyle?: boolean;
+}
+export declare const HeaderProfile: {
+    (props: HeaderProfileProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export default HeaderProfile;

package/src/tedi/components/layout/header/components/header-role/header-role-representatives.d.ts

@@ -0,0 +1,79 @@
+import { default as React } from 'react';
+import { IconProps } from '../../../../base/icon/icon';
+export interface Representative {
+    /** Unique identifier for the representative. */
+    id: string;
+    /** Display name shown in the header and selection list. */
+    name: string;
+    /** Additional context shown below the name (e.g. role, organization, personal code). */
+    description?: string;
+    /**
+     * Icon displayed next to the representative in the selection list. Accepts either a
+     * Material Icon name as a string (`'person'`) for the common case, or a full
+     * `IconProps` object (`{ name: 'person', size: 18 }`) when explicit props are needed.
+     */
+    icon?: string | IconProps;
+}
+interface HeaderRoleRepresentativesProps {
+    /** Unique id for the collapsible panel, used for aria-controls on the toggle. */
+    id?: string;
+    /** Id of the toggle button, used for aria-labelledby on the panel. */
+    toggleId?: string;
+    /** List of representatives to display in the selection list. */
+    representatives: Representative[];
+    /** Currently selected representative. */
+    representative?: Representative;
+    /** Current value of the search input. */
+    inputValue: string;
+    /** Callback to update the search input value. */
+    setInputValue: (value: string) => void;
+    /** Callback to update the selected representative. */
+    setRepresentative: (rep: Representative) => void;
+    /** Callback to control the open/closed state of the role selection. */
+    setIsRoleSelectionOpen: (open: boolean) => void;
+    /** Callback fired when the role selection is toggled. Handles both state update and external notification. */
+    onRoleSelectionToggle?: () => void;
+    /** Whether the role selection panel is currently open. */
+    isRoleSelectionOpen: boolean;
+    /** Whether the representatives belong to an organization context. Affects the search input label. */
+    isOrganization?: boolean;
+    /**
+     * Label for the search input when selecting a representative.
+     * Falls back to i18n labels when not provided.
+     */
+    searchLabel?: string;
+    /**
+     * Label for the search input when selecting an organization representative.
+     * Overrides both the default and `searchLabel` when `isOrganization` is true.
+     */
+    organizationSearchLabel?: string;
+    /** Optional id for the search input. Falls back to a generated unique id. */
+    searchId?: string;
+    /** Whether to keep the role selection open after selecting a representative. */
+    keepOpenOnSelect?: boolean;
+    /**
+     * Whether to display the search input above the representative list.
+     * @default false
+     */
+    showSearch?: boolean;
+    /**
+     * Whether the search input shows a clear button.
+     * @default false
+     */
+    searchClearable?: boolean;
+    /**
+     * Whether to clear the search input when a representative is selected.
+     * @default true
+     */
+    clearSearchOnSelect?: boolean;
+    /**
+     * Custom content rendered when the filtered representative list is empty.
+     * Falls back to the default "no results" label when not provided.
+     */
+    noResultsContent?: React.ReactNode;
+}
+declare const HeaderRoleRepresentatives: {
+    (props: HeaderRoleRepresentativesProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export default HeaderRoleRepresentatives;

package/src/tedi/components/layout/header/components/header-role/header-role.d.ts

@@ -0,0 +1,74 @@
+import { default as React } from 'react';
+import { Representative } from './header-role-representatives';
+export interface HeaderRoleProps {
+    /**
+     * Descriptive label rendered above the representative name (e.g. plain text, Tag, or any ReactNode).
+     */
+    label?: React.ReactNode;
+    /**
+     * Whether to display the selected representative's description text in the header area.
+     * Does not affect the description shown in the selection list items.
+     * @default true
+     */
+    showDescription?: boolean;
+    /** List of selectable representatives. */
+    representatives: Representative[];
+    /** Whether the role represents an organization. */
+    isOrganization?: boolean;
+    /** Custom labels for the accordion toggle button. */
+    accordionLabels?: {
+        open?: string;
+        close?: string;
+    };
+    /**
+     * Label for the search input when selecting a representative.
+     * Falls back to i18n labels when not provided.
+     */
+    searchLabel?: string;
+    /**
+     * Label for the search input when selecting an organization representative.
+     * Overrides both the default and `searchLabel` when `isOrganization` is true.
+     */
+    organizationSearchLabel?: string;
+    /** Optional id for the search input. Falls back to a generated unique id. */
+    searchId?: string;
+    /** Callback fired when the role selection accordion or popover is toggled. */
+    onRoleSelectionToggle?: (isOpen: boolean) => void;
+    /** Callback fired when a representative is selected. */
+    onRepresentativeChange?: (representative: Representative) => void;
+    /**
+     * Whether to display the search input above the representative list.
+     * @default false
+     */
+    showSearch?: boolean;
+    /**
+     * Whether the search input shows a clear button.
+     * @default false
+     */
+    searchClearable?: boolean;
+    /**
+     * Whether to clear the search input when a representative is selected.
+     * @default true
+     */
+    clearSearchOnSelect?: boolean;
+    /**
+     * Custom content rendered inside the role selection popover (desktop) or accordion (tablet and mobile).
+     * When provided, replaces the default representative list entirely.
+     */
+    children?: React.ReactNode;
+    /**
+     * Whether to show the role selection toggle and dropdown.
+     * When omitted, defaults to showing the selection when there are multiple representatives.
+     */
+    showRoleSwitch?: boolean;
+    /**
+     * Custom content rendered when the filtered representative list is empty.
+     * Falls back to the default "no results" label when not provided.
+     */
+    noResultsContent?: React.ReactNode;
+}
+export declare const HeaderRole: {
+    (props: HeaderRoleProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export default HeaderRole;

package/src/tedi/components/layout/header/components/header-search/header-search.d.ts

@@ -0,0 +1,28 @@
+type MobileSearchVariant = 'modal' | 'inline';
+export interface HeaderSearchProps {
+    /** Search input or form content rendered inside the search area. */
+    children: React.ReactNode;
+    /**
+     * How the search is presented on mobile viewports.
+     * `'modal'` opens a full-screen overlay with a close button, `'inline'` renders the search directly in the header bottom area.
+     * @default modal
+     */
+    mobileVariant?: MobileSearchVariant;
+    /** Custom label overrides for the search button and modal title. */
+    mobileLabels?: {
+        /** Label for the mobile search toggle button. Falls back to the `header.search` translation key. */
+        button?: string;
+        /** Title displayed at the top of the mobile search modal. Falls back to the `header.search` translation key. */
+        modalTitle?: string;
+    };
+    /**
+     * Whether the mobile search button is disabled. Prevents opening the search modal.
+     * @default false
+     */
+    disabled?: boolean;
+}
+export declare const HeaderSearch: {
+    (props: HeaderSearchProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export default HeaderSearch;

package/src/tedi/components/layout/header/header.d.ts

@@ -0,0 +1,115 @@
+import { default as React } from 'react';
+export interface HeaderProps {
+    /**
+     * Content rendered inside the header, typically Header.Logo, Header.Center, and Header.Actions subcomponents.
+     */
+    children: React.ReactNode;
+    /**
+     * Toggle element for the mobile side navigation menu.
+     * Typically a SideNav.Toggle component.
+     */
+    toggle?: React.ReactNode;
+    /**
+     * Content rendered below the main header bar on mobile viewports (below `md` breakpoint).
+     * Commonly used for a mobile-specific search bar or other compact navigation elements.
+     */
+    bottom?: React.ReactNode;
+    /** Additional CSS class name applied to the header wrapper. */
+    className?: string;
+}
+export declare const Header: {
+    (props: HeaderProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+    Logo: {
+        (props: HeaderLogoProps): import("react/jsx-runtime").JSX.Element | null;
+        displayName: string;
+    };
+    Center: {
+        (props: HeaderCenterProps): import("react/jsx-runtime").JSX.Element;
+        displayName: string;
+    };
+    Actions: {
+        (props: HeaderActionsProps): import("react/jsx-runtime").JSX.Element;
+        displayName: string;
+    };
+    Language: {
+        (props: import('./components/header-language/header-language').HeaderLanguageProps): import("react/jsx-runtime").JSX.Element;
+        displayName: string;
+    };
+    Login: {
+        (props: import('./components/header-login/header-login').HeaderLoginProps): import("react/jsx-runtime").JSX.Element;
+        displayName: string;
+    };
+    Logout: {
+        (props: import('./components/header-logout/header-logout').HeaderLogoutProps): import("react/jsx-runtime").JSX.Element;
+        displayName: string;
+    };
+    Profile: {
+        (props: import('./components/header-profile/header-profile').HeaderProfileProps): import("react/jsx-runtime").JSX.Element;
+        displayName: string;
+    };
+    Role: {
+        (props: import('./components/header-role/header-role').HeaderRoleProps): import("react/jsx-runtime").JSX.Element;
+        displayName: string;
+    };
+    Search: {
+        (props: import('./components/header-search/header-search').HeaderSearchProps): import("react/jsx-runtime").JSX.Element;
+        displayName: string;
+    };
+};
+export interface HeaderLogoProps {
+    /**
+     * The default logo to display (typically used in light theme).
+     */
+    logo: React.ReactNode;
+    /**
+     * Optional logo variant for dark theme.
+     * If provided, it will be used when the current theme is dark.
+     */
+    logoDark?: React.ReactNode;
+    /**
+     * Controls visibility of the logo.
+     * Useful for conditionally hiding the logo based on application state, feature flags,
+     * or custom media queries that fall between standard breakpoints (e.g. 420px).
+     * For responsive hiding at standard breakpoints, prefer wrapping Header.Logo with HideAt/ShowAt.
+     * @default true
+     */
+    showLogo?: boolean;
+    /**
+     * Optional link URL.
+     * If provided, the logo will be wrapped in an anchor element.
+     */
+    href?: string;
+    /** Additional CSS class name applied to the logo wrapper. */
+    className?: string;
+}
+export declare const HeaderLogo: {
+    (props: HeaderLogoProps): import("react/jsx-runtime").JSX.Element | null;
+    displayName: string;
+};
+export interface HeaderCenterProps {
+    /** Content rendered in the center area of the header, typically navigation links or a search bar. */
+    children: React.ReactNode;
+    /**
+     * Controls the horizontal alignment of center content.
+     * @default center
+     */
+    alignment?: 'flex-start' | 'center' | 'space-between';
+    /** Additional CSS class name applied to the center content area. */
+    className?: string;
+}
+export declare const HeaderCenter: {
+    (props: HeaderCenterProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export interface HeaderActionsProps {
+    /** Action elements rendered on the right side of the header (e.g. language selector, login, profile). */
+    children: React.ReactNode;
+    /** Additional CSS class name applied to the actions wrapper. */
+    className?: string;
+}
+export declare const HeaderActions: {
+    (props: HeaderActionsProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export default Header;

package/src/tedi/components/layout/header/index.d.ts

@@ -0,0 +1,7 @@
+export * from './header';
+export * from './components/header-language/header-language';
+export * from './components/header-login/header-login';
+export * from './components/header-logout/header-logout';
+export * from './components/header-profile/header-profile';
+export * from './components/header-role/header-role';
+export * from './components/header-search/header-search';

package/src/tedi/components/layout/hide-at/hide-at.d.ts

@@ -0,0 +1,10 @@
+import { default as React } from 'react';
+import { Breakpoint } from '../../../helpers';
+type HideAtProps = {
+    children: React.ReactNode;
+} & Partial<Record<Breakpoint, boolean>>;
+export declare const HideAt: {
+    ({ children, ...breakpoints }: HideAtProps): import("react/jsx-runtime").JSX.Element | null;
+    displayName: string;
+};
+export {};

package/src/tedi/components/layout/show-at/show-at.d.ts

@@ -0,0 +1,10 @@
+import { default as React } from 'react';
+import { Breakpoint } from '../../../helpers';
+type ShowAtProps = {
+    children: React.ReactNode;
+} & Partial<Record<Breakpoint, boolean>>;
+export declare const ShowAt: {
+    ({ children, ...breakpoints }: ShowAtProps): import("react/jsx-runtime").JSX.Element | null;
+    displayName: string;
+};
+export {};

package/src/tedi/components/layout/sidenav/components/sidenav-toggle/sidenav-toggle.module.scss.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e={"tedi-sidenav-toggle":"tedi-sidenav-toggle-5aa60f9e","tedi-sidenav-toggle--collapse":"tedi-sidenav-toggle--collapse-3b54974c"};exports.default=e;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e={"tedi-sidenav-toggle":"tedi-sidenav-toggle-5aa60f9e","tedi-sidenav-toggle__icon":"tedi-sidenav-toggle__icon-a52afb07","tedi-sidenav-toggle--collapse":"tedi-sidenav-toggle--collapse-3b54974c"};exports.default=e;

package/src/tedi/components/layout/sidenav/components/sidenav-toggle/sidenav-toggle.module.scss.es.js

@@ -1,5 +1,6 @@
 const e = {
   "tedi-sidenav-toggle": "tedi-sidenav-toggle-5aa60f9e",
+  "tedi-sidenav-toggle__icon": "tedi-sidenav-toggle__icon-a52afb07",
   "tedi-sidenav-toggle--collapse": "tedi-sidenav-toggle--collapse-3b54974c"
 };
 export {

package/src/tedi/components/overlays/overlay/overlay.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const K=require("react/jsx-runtime"),t=require("../../../../../external/@floating-ui/react/dist/floating-ui.react.cjs.js"),n=require("react"),N=require("./overlay-content.cjs.js"),Q=require("./overlay-trigger.cjs.js"),j=require("../../../../../external/@floating-ui/dom/dist/floating-ui.dom.cjs.js"),i=require("../../../../../external/@floating-ui/react-dom/dist/floating-ui.react-dom.cjs.js"),X=require("../../../helpers/hooks/use-is-touch-device.cjs.js"),Y=require("../../../helpers/hooks/use-is-mounted.cjs.js"),Z=3,S=n.createContext({open:!1,onOpenChange:()=>{},isMounted:!1,openWith:"hover",reference:()=>{},floating:()=>{},focusManager:{},arrowRef:{current:null},x:0,y:0,strategy:"absolute",getReferenceProps:()=>({}),getFloatingProps:()=>({}),arrow:{width:0,height:0,x:0,y:0,centerOffset:0},placement:"top",context:{},scrollLock:void 0,contentId:""}),u=E=>{const L=X.useIsTouchDevice(),{children:W,placement:A="top",openWith:s=L?"click":"hover",defaultOpen:G=!1,open:c,onToggle:r,role:d="tooltip",arrowDimensions:e,offset:H=Z+((e==null?void 0:e.height)??0),focusManager:f,dismissible:y,scrollLock:O,trackReferencePosition:V=!1}=E,{order:M=["reference","content"],initialFocus:m,modal:g,...x}=f??{},C=m!==void 0?m:g?0:void 0,[F,R]=n.useState(G),p=n.useRef(null),P=Y.useIsMounted(),h=n.useMemo(()=>r&&typeof c<"u"?c:F,[r,c,F]),v=n.useCallback(l=>{typeof c>"u"&&R(l),r==null||r(l)},[c,R,r]),{x:q,y:I,refs:a,strategy:b,context:o,middlewareData:k,placement:w}=t.useFloating({placement:A,open:h,onOpenChange:v,middleware:[i.offset(H),i.flip(),i.shift({padding:8}),i.arrow({element:p,padding:4})],whileElementsMounted:V?(l,B,J)=>j.autoUpdate(l,B,J,{animationFrame:!0}):j.autoUpdate}),{getReferenceProps:T,getFloatingProps:U}=t.useInteractions([t.useHover(o,{enabled:s==="hover",handleClose:t.safePolygon()}),t.useClick(o,{toggle:y}),t.useFocus(o,{enabled:s==="hover"}),t.useRole(o,{role:d}),t.useDismiss(o,{enabled:y,outsidePressEvent:s==="click"?"mousedown":"pointerdown"})]),_=n.useId(),z=n.useMemo(()=>({open:h,onOpenChange:v,isMounted:P,openWith:s,focusManager:f?{order:M,modal:g,initialFocus:C,...x}:void 0,reference:a.setReference,floating:a.setFloating,arrowRef:p,x:q,y:I,strategy:b,getReferenceProps:T,getFloatingProps:U,arrow:{width:e==null?void 0:e.width,height:e==null?void 0:e.height,...k.arrow},context:o,placement:w,scrollLock:O,role:d,contentId:_}),[h,v,P,s,f,a.setReference,a.setFloating,p,q,I,b,T,U,e==null?void 0:e.width,e==null?void 0:e.height,k.arrow,o,w,O,d,_,g,M,C,x]);return K.jsx(S.Provider,{value:z,children:W})};u.Trigger=Q.OverlayTrigger;u.Content=N.OverlayContent;exports.Overlay=u;exports.OverlayContext=S;exports.default=u;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const N=require("react/jsx-runtime"),t=require("../../../../../external/@floating-ui/react/dist/floating-ui.react.cjs.js"),n=require("react"),Q=require("./overlay-content.cjs.js"),X=require("./overlay-trigger.cjs.js"),j=require("../../../../../external/@floating-ui/dom/dist/floating-ui.dom.cjs.js"),i=require("../../../../../external/@floating-ui/react-dom/dist/floating-ui.react-dom.cjs.js"),Y=require("../../../helpers/hooks/use-is-touch-device.cjs.js"),Z=require("../../../helpers/hooks/use-is-mounted.cjs.js"),$=3,S=n.createContext({open:!1,onOpenChange:()=>{},isMounted:!1,openWith:"hover",reference:()=>{},floating:()=>{},focusManager:{},arrowRef:{current:null},x:0,y:0,strategy:"absolute",getReferenceProps:()=>({}),getFloatingProps:()=>({}),arrow:{width:0,height:0,x:0,y:0,centerOffset:0},placement:"top",context:{},scrollLock:void 0,contentId:""}),u=E=>{const L=Y.useIsTouchDevice(),{children:W,placement:A="top",openWith:s=L?"click":"hover",defaultOpen:G=!1,open:a,onToggle:r,role:d="tooltip",arrowDimensions:e,offset:H=$+((e==null?void 0:e.height)??0),arrowPadding:V=4,focusManager:f,dismissible:y,scrollLock:O,trackReferencePosition:z=!1}=E,{order:M=["reference","content"],initialFocus:m,modal:g,...x}=f??{},C=m!==void 0?m:g?0:void 0,[F,P]=n.useState(G),p=n.useRef(null),R=Z.useIsMounted(),h=n.useMemo(()=>r&&typeof a<"u"?a:F,[r,a,F]),v=n.useCallback(l=>{typeof a>"u"&&P(l),r==null||r(l)},[a,P,r]),{x:q,y:I,refs:c,strategy:b,context:o,middlewareData:w,placement:k}=t.useFloating({placement:A,open:h,onOpenChange:v,middleware:[i.offset(H),i.flip(),i.shift({padding:8}),i.arrow({element:p,padding:V})],whileElementsMounted:z?(l,J,K)=>j.autoUpdate(l,J,K,{animationFrame:!0}):j.autoUpdate}),{getReferenceProps:T,getFloatingProps:U}=t.useInteractions([t.useHover(o,{enabled:s==="hover",handleClose:t.safePolygon()}),t.useClick(o,{toggle:y}),t.useFocus(o,{enabled:s==="hover"}),t.useRole(o,{role:d}),t.useDismiss(o,{enabled:y,outsidePressEvent:s==="click"?"mousedown":"pointerdown"})]),_=n.useId(),B=n.useMemo(()=>({open:h,onOpenChange:v,isMounted:R,openWith:s,focusManager:f?{order:M,modal:g,initialFocus:C,...x}:void 0,reference:c.setReference,floating:c.setFloating,arrowRef:p,x:q,y:I,strategy:b,getReferenceProps:T,getFloatingProps:U,arrow:{width:e==null?void 0:e.width,height:e==null?void 0:e.height,...w.arrow},context:o,placement:k,scrollLock:O,role:d,contentId:_}),[h,v,R,s,f,c.setReference,c.setFloating,p,q,I,b,T,U,e==null?void 0:e.width,e==null?void 0:e.height,w.arrow,o,k,O,d,_,g,M,C,x]);return N.jsx(S.Provider,{value:B,children:W})};u.Trigger=X.OverlayTrigger;u.Content=Q.OverlayContent;exports.Overlay=u;exports.OverlayContext=S;exports.default=u;

package/src/tedi/components/overlays/overlay/overlay.d.ts

@@ -75,6 +75,13 @@ export interface OverlayProps {
      * @default false
      */
     trackReferencePosition?: boolean;
+    /**
+     * Minimum distance (in px) between the arrow and the edges of the content.
+     * Helps keep the arrow away from rounded corners, especially on `-start` and `-end` placements.
+     * Use a larger value for bigger arrows or arrows with borders.
+     * @default 4
+     */
+    arrowPadding?: number;
 }
 export interface OverlayContextType {
     open: boolean;

package/src/tedi/components/overlays/overlay/overlay.es.js

@@ -1,13 +1,13 @@
-import { jsx as B } from "react/jsx-runtime";
-import { useFloating as J, useInteractions as K, useHover as N, useClick as Q, useFocus as X, useRole as Y, useDismiss as Z, safePolygon as _ } from "../../../../../external/@floating-ui/react/dist/floating-ui.react.es.js";
-import { createContext as $, useState as D, useRef as ee, useMemo as T, useCallback as te, useId as oe } from "react";
-import { OverlayContent as ne } from "./overlay-content.es.js";
-import { OverlayTrigger as re } from "./overlay-trigger.es.js";
+import { jsx as J } from "react/jsx-runtime";
+import { useFloating as K, useInteractions as N, useHover as Q, useClick as X, useFocus as Y, useRole as Z, useDismiss as _, safePolygon as $ } from "../../../../../external/@floating-ui/react/dist/floating-ui.react.es.js";
+import { createContext as D, useState as ee, useRef as te, useMemo as T, useCallback as oe, useId as ne } from "react";
+import { OverlayContent as re } from "./overlay-content.es.js";
+import { OverlayTrigger as se } from "./overlay-trigger.es.js";
 import { autoUpdate as E } from "../../../../../external/@floating-ui/dom/dist/floating-ui.dom.es.js";
-import { offset as se, flip as ae, shift as ce, arrow as le } from "../../../../../external/@floating-ui/react-dom/dist/floating-ui.react-dom.es.js";
-import { useIsTouchDevice as ie } from "../../../helpers/hooks/use-is-touch-device.es.js";
-import { useIsMounted as fe } from "../../../helpers/hooks/use-is-mounted.es.js";
-const ue = 3, de = $({
+import { offset as ae, flip as ce, shift as le, arrow as ie } from "../../../../../external/@floating-ui/react-dom/dist/floating-ui.react-dom.es.js";
+import { useIsTouchDevice as fe } from "../../../helpers/hooks/use-is-touch-device.es.js";
+import { useIsMounted as ue } from "../../../helpers/hooks/use-is-mounted.es.js";
+const de = 3, pe = D({
   open: !1,
   onOpenChange: () => {
   },
@@ -36,7 +36,7 @@ const ue = 3, de = $({
   scrollLock: void 0,
   contentId: ""
 }), L = (W) => {
-  const j = ie(), {
+  const j = fe(), {
     children: A,
     placement: G = "top",
     openWith: n = j ? "click" : "hover",
@@ -45,47 +45,48 @@ const ue = 3, de = $({
     onToggle: o,
     role: c = "tooltip",
     arrowDimensions: e,
-    offset: S = ue + ((e == null ? void 0 : e.height) ?? 0),
+    offset: S = de + ((e == null ? void 0 : e.height) ?? 0),
+    arrowPadding: U = 4,
     focusManager: l,
     dismissible: p,
     scrollLock: g,
-    trackReferencePosition: U = !1
-  } = W, { order: h = ["reference", "content"], initialFocus: m, modal: i, ...v } = l ?? {}, y = m !== void 0 ? m : i ? 0 : void 0, [O, x] = D(H), f = ee(null), F = fe(), u = T(() => o && typeof r < "u" ? r : O, [o, r, O]), d = te(
+    trackReferencePosition: V = !1
+  } = W, { order: h = ["reference", "content"], initialFocus: m, modal: i, ...v } = l ?? {}, y = m !== void 0 ? m : i ? 0 : void 0, [O, x] = ee(H), f = te(null), F = ue(), u = T(() => o && typeof r < "u" ? r : O, [o, r, O]), d = oe(
     (a) => {
       typeof r > "u" && x(a), o == null || o(a);
     },
     [r, x, o]
-  ), { x: C, y: M, refs: s, strategy: P, context: t, middlewareData: R, placement: k } = J({
+  ), { x: P, y: C, refs: s, strategy: M, context: t, middlewareData: R, placement: w } = K({
     placement: G,
     open: u,
     onOpenChange: d,
     middleware: [
-      se(S),
-      ae(),
-      ce({ padding: 8 }),
-      le({
+      ae(S),
+      ce(),
+      le({ padding: 8 }),
+      ie({
         element: f,
-        padding: 4
+        padding: U
       })
     ],
-    whileElementsMounted: U ? (a, q, z) => E(a, q, z, { animationFrame: !0 }) : E
-  }), { getReferenceProps: w, getFloatingProps: I } = K([
-    N(t, {
+    whileElementsMounted: V ? (a, z, B) => E(a, z, B, { animationFrame: !0 }) : E
+  }), { getReferenceProps: k, getFloatingProps: I } = N([
+    Q(t, {
       enabled: n === "hover",
-      handleClose: _()
+      handleClose: $()
     }),
-    Q(t, {
+    X(t, {
       toggle: p
     }),
-    X(t, {
+    Y(t, {
       enabled: n === "hover"
     }),
-    Y(t, { role: c }),
-    Z(t, {
+    Z(t, { role: c }),
+    _(t, {
       enabled: p,
       outsidePressEvent: n === "click" ? "mousedown" : "pointerdown"
     })
-  ]), b = oe(), V = T(
+  ]), b = ne(), q = T(
     () => ({
       open: u,
       onOpenChange: d,
@@ -100,10 +101,10 @@ const ue = 3, de = $({
       reference: s.setReference,
       floating: s.setFloating,
       arrowRef: f,
-      x: C,
-      y: M,
-      strategy: P,
-      getReferenceProps: w,
+      x: P,
+      y: C,
+      strategy: M,
+      getReferenceProps: k,
       getFloatingProps: I,
       arrow: {
         width: e == null ? void 0 : e.width,
@@ -111,7 +112,7 @@ const ue = 3, de = $({
         ...R.arrow
       },
       context: t,
-      placement: k,
+      placement: w,
       scrollLock: g,
       role: c,
       contentId: b
@@ -125,16 +126,16 @@ const ue = 3, de = $({
       s.setReference,
       s.setFloating,
       f,
+      P,
       C,
       M,
-      P,
-      w,
+      k,
       I,
       e == null ? void 0 : e.width,
       e == null ? void 0 : e.height,
       R.arrow,
       t,
-      k,
+      w,
       g,
       c,
       b,
@@ -144,12 +145,12 @@ const ue = 3, de = $({
       v
     ]
   );
-  return /* @__PURE__ */ B(de.Provider, { value: V, children: A });
+  return /* @__PURE__ */ J(pe.Provider, { value: q, children: A });
 };
-L.Trigger = re;
-L.Content = ne;
+L.Trigger = se;
+L.Content = re;
 export {
   L as Overlay,
-  de as OverlayContext,
+  pe as OverlayContext,
   L as default
 };

package/src/tedi/components/overlays/popover/index.d.ts

@@ -1,3 +1,4 @@
 export * from './popover';
 export * from './popover-content';
+export * from './popover-context';
 export * from './popover-trigger';

package/src/tedi/components/overlays/popover/popover-content.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime"),s=require("../../../../../external/classnames/index.cjs.js"),i=require("react"),C=require("../../base/typography/text/text.cjs.js"),q=require("../../buttons/closing-button/closing-button.cjs.js"),y=require("../overlay/overlay.cjs.js"),j=require("../overlay/overlay-content.cjs.js"),o=require("./popover.module.scss.cjs.js"),_=f=>{const{children:r,width:l="small",className:x,title:e,titleProps:d={element:"h4"},close:a,closeProps:n={size:"default"}}=f,{onOpenChange:h}=i.useContext(y.OverlayContext),c=i.useId(),u=!!r,p=i.useId();return t.jsxs(j.OverlayContent,{classNames:{content:s.default(o.default["tedi-popover"],{[o.default[`tedi-popover--${l}`]]:l},x),arrow:o.default["tedi-popover__arrow"]},labelledBy:e?c:void 0,describedBy:u?p:void 0,children:[(e||a)&&t.jsxs("div",{className:s.default(o.default["tedi-popover__header"],{[o.default["tedi-popover__header--no-title"]]:!e}),children:[e&&t.jsx(C.Text,{...d,id:c,className:s.default("align-self-center",d.className),children:e}),a&&t.jsx(q.ClosingButton,{...n,onClick:m=>{var v;h(!1),(v=n.onClick)==null||v.call(n,m)}})]}),u?t.jsx("div",{id:p,children:r}):r]})};exports.PopoverContent=_;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("react/jsx-runtime"),n=require("../../../../../external/classnames/index.cjs.js"),s=require("react"),y=require("../../base/typography/text/text.cjs.js"),_=require("../../buttons/closing-button/closing-button.cjs.js"),j=require("../overlay/overlay.cjs.js"),b=require("../overlay/overlay-content.cjs.js"),e=require("./popover.module.scss.cjs.js"),g=require("./popover-context.cjs.js"),x=C=>{const{children:i,width:d="small",className:h,title:t,titleProps:l={element:"h4"},close:a,closeProps:r={size:"default"}}=C,{onOpenChange:m}=s.useContext(j.OverlayContext),{withBorder:c}=s.useContext(g.PopoverContext),u=s.useId(),p=!!i,v=s.useId();return o.jsxs(b.OverlayContent,{classNames:{content:n.default(e.default["tedi-popover"],{[e.default[`tedi-popover--${d}`]]:d&&d!=="none",[e.default["tedi-popover--border"]]:c},h),arrow:n.default(e.default["tedi-popover__arrow"],{[e.default["tedi-popover__arrow--border"]]:c})},labelledBy:t?u:void 0,describedBy:p?v:void 0,children:[(t||a)&&o.jsxs("div",{className:n.default(e.default["tedi-popover__header"],{[e.default["tedi-popover__header--no-title"]]:!t}),children:[t&&o.jsx(y.Text,{...l,id:u,className:n.default("align-self-center",l.className),children:t}),a&&o.jsx(_.ClosingButton,{...r,onClick:q=>{var f;m(!1),(f=r.onClick)==null||f.call(r,q)}})]}),p?o.jsx("div",{id:v,children:i}):i]})};x.displayName="PopoverContent";exports.PopoverContent=x;

package/src/tedi/components/overlays/popover/popover-content.d.ts

@@ -27,6 +27,9 @@ export interface PopoverContentProps extends Omit<OverlayContentProps, 'classNam
      * Popover width.
      * @default small
      */
-    width?: 'small' | 'medium' | 'large';
+    width?: 'small' | 'medium' | 'large' | 'none';
 }
-export declare const PopoverContent: (props: PopoverContentProps) => import("react/jsx-runtime").JSX.Element;
+export declare const PopoverContent: {
+    (props: PopoverContentProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};