@zvoove/unity-ui 2.30.0 → 2.32.1

package/dist/src/components/MidSectionMenus/MidSectionMenus.d.ts

@@ -0,0 +1,7 @@
+import { ElementType } from 'react';
+import { MidSectionMenusProps } from './MidSectionMenus.types';
+declare const MidSectionMenus: {
+    <T extends ElementType = "a">({ sections, open, variant, activeItem, linkComponent: LinkComponent, onItemClick, }: MidSectionMenusProps<T>): import("react/jsx-runtime").JSX.Element | null;
+    displayName: string;
+};
+export default MidSectionMenus;

package/dist/src/components/MidSectionMenus/MidSectionMenus.styled.d.ts

@@ -0,0 +1,98 @@
+export declare const midSectionStyles: import('tailwind-variants').TVReturnType<{
+    open: {
+        true: string[];
+    };
+    variant: {
+        default: never[];
+        compact: string[];
+    };
+    hidden: {
+        true: string[];
+    };
+}, undefined, string[], {
+    open: {
+        true: string[];
+    };
+    variant: {
+        default: never[];
+        compact: string[];
+    };
+    hidden: {
+        true: string[];
+    };
+}, undefined, import('tailwind-variants').TVReturnType<{
+    open: {
+        true: string[];
+    };
+    variant: {
+        default: never[];
+        compact: string[];
+    };
+    hidden: {
+        true: string[];
+    };
+}, undefined, string[], unknown, unknown, undefined>>;
+export declare const midSectionHighlightStyles: import('tailwind-variants').TVReturnType<{
+    highlight: {
+        true: string[];
+        false: never[];
+    };
+}, undefined, never[], {
+    highlight: {
+        true: string[];
+        false: never[];
+    };
+}, undefined, import('tailwind-variants').TVReturnType<{
+    highlight: {
+        true: string[];
+        false: never[];
+    };
+}, undefined, never[], unknown, unknown, undefined>>;
+/**
+ * Icon replacements: fade in after content fades out (delayed),
+ * fade out immediately when opening.
+ */
+export declare const midSectionIconStyles: import('tailwind-variants').TVReturnType<{
+    visible: {
+        true: string[];
+        false: string[];
+    };
+    iconsMounted: {
+        true: never[];
+        false: string[];
+    };
+}, undefined, string[], {
+    visible: {
+        true: string[];
+        false: string[];
+    };
+    iconsMounted: {
+        true: never[];
+        false: string[];
+    };
+}, undefined, import('tailwind-variants').TVReturnType<{
+    visible: {
+        true: string[];
+        false: string[];
+    };
+    iconsMounted: {
+        true: never[];
+        false: string[];
+    };
+}, undefined, string[], unknown, unknown, undefined>>;
+export declare const midSectionContentStyles: import('tailwind-variants').TVReturnType<{
+    visible: {
+        true: string[];
+        false: string[];
+    };
+}, undefined, string[], {
+    visible: {
+        true: string[];
+        false: string[];
+    };
+}, undefined, import('tailwind-variants').TVReturnType<{
+    visible: {
+        true: string[];
+        false: string[];
+    };
+}, undefined, string[], unknown, unknown, undefined>>;

package/dist/src/components/MidSectionMenus/MidSectionMenus.types.d.ts

@@ -0,0 +1,67 @@
+import { ElementType } from 'react';
+import { CommonIconNames } from '../../index.ts';
+import { ListMenuItem, ListMenuVariant } from '../ListMenu';
+/**
+ * One titled block of mid-section rows. Items are always rendered with **compact** `ListMenu` density;
+ * this type only describes the data shape (same as root `midSections` on `SideNavigation`).
+ */
+export type MidSection<T extends ElementType = 'a'> = {
+    /**
+     * The title of the section
+     */
+    title?: string;
+    /**
+     * Whether to show a divider above the section
+     * @default true
+     */
+    showDivider?: boolean;
+    /**
+     * The list of items in the section
+     */
+    items: ListMenuItem<T>[];
+    /**
+     * Whether to hide the entire section when the menu is closed
+     * @default false
+     */
+    hideOnMenuClosed?: boolean;
+    /**
+     * Highlights the section with a background color and rounded corners.
+     * @default false
+     */
+    highlight?: boolean;
+    /**
+     * When set, the section collapses into this icon when the menu is closed (desktop only).
+     * On hover, a PopUpMenu opens revealing the section items.
+     */
+    replaceWithIconOnClose?: CommonIconNames;
+} & Omit<React.ComponentPropsWithoutRef<T>, 'children'>;
+export type MidSectionMenusProps<T extends ElementType = 'a'> = {
+    /**
+     * Section definitions (same shape as `SideNavigation` `midSections`).
+     */
+    sections: MidSection<T>[];
+    /**
+     * Whether the parent navigation is expanded (labels visible).
+     * @default true
+     */
+    open?: boolean;
+    /**
+     * Sidebar shell width mode: must match the parent `SideNavigation` `variant` so open/closed width
+     * transitions on the section wrappers stay aligned (`default` vs `compact` rail widths).
+     * Does **not** change list row density — inner `ListMenu` instances are always `compact`.
+     * @default 'default'
+     */
+    variant?: ListMenuVariant;
+    /**
+     * Active item id for `ListMenu` highlighting.
+     */
+    activeItem?: string;
+    /**
+     * Link element for menu rows.
+     */
+    linkComponent?: T | 'a';
+    /**
+     * Called when a row is activated (same contract as `ListMenu` / `SideNavigation` root lists).
+     */
+    onItemClick?: (item: ListMenuItem<T>) => void;
+};

package/dist/src/components/MidSectionMenus/index.d.ts

@@ -0,0 +1,2 @@
+export { default as MidSectionMenus } from './MidSectionMenus';
+export type { MidSection, MidSectionMenusProps } from './MidSectionMenus.types';

package/dist/src/components/Pagination/Pagination.d.ts

@@ -0,0 +1,3 @@
+import { PaginationProps } from './Pagination.types';
+declare const Pagination: ({ currentPage, totalPages, rowsPerPage, onPageChange, onRowsPerPageChange, disabled, rowsPerPageLabel, pageOfPagesLabel, }: PaginationProps) => import("react/jsx-runtime").JSX.Element;
+export default Pagination;

package/dist/src/components/Pagination/Pagination.types.d.ts

@@ -0,0 +1,37 @@
+export type RowsPerPage = 10 | 20 | 50 | 100 | 200;
+export interface PaginationProps {
+    /**
+     * The text for the rows per page.
+     * @default "Zeilen pro Seite"
+     */
+    rowsPerPageLabel?: string;
+    /**
+     * The text for the "of" in "1 of 10".
+     * @default "von"
+     */
+    pageOfPagesLabel?: string;
+    /**
+     * The current page of the Pagination.
+     */
+    currentPage: number;
+    /**
+     * The total pages of the Pagination.
+     */
+    totalPages: number;
+    /**
+     * The rows per page of the Pagination.
+     */
+    rowsPerPage?: RowsPerPage;
+    /**
+     * The callback function to handle page change.
+     */
+    onPageChange: (page: number) => void;
+    /**
+     * The callback function to handle rows per page change.
+     */
+    onRowsPerPageChange?: (rowsPerPage: RowsPerPage) => void;
+    /**
+     * The disabled state of the Pagination.
+     */
+    disabled?: boolean;
+}

package/dist/src/components/Pagination/index.d.ts

@@ -0,0 +1,2 @@
+export { default as Pagination } from './Pagination';
+export type { PaginationProps, RowsPerPage } from './Pagination.types';

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

@@ -0,0 +1,2 @@
+export declare const HOVER_DELAY = 200;
+export declare const OPEN_DELAY = 50;

package/dist/src/components/PopUpMenu/PopUpMenu.d.ts

@@ -0,0 +1,3 @@
+import { PopUpMenuProps } from './PopUpMenu.types';
+declare const PopUpMenu: ({ children, placement, disabled, trigger, density, closeOnItemClick, items, onItemClick, selectedItem, selectable, open, onClose, closeOnClickOutside, closeOnEscape, toggleOnClick, queryHighlight, showSearch, searchPlaceholder, allowClearAll, allowSelectAll, selectAllLabel, clearAllLabel, noResultsFoundMessage, onClearAllOrSelectAllClick, searchMode, onSearchChange, isLoading, wrapperWidth, onScrollEnd, isLoadingMore, height, minHeight, maxHeight, ...props }: PopUpMenuProps) => import("react/jsx-runtime").JSX.Element;
+export default PopUpMenu;

package/dist/src/components/PopUpMenu/PopUpMenu.styled.d.ts

@@ -0,0 +1,161 @@
+export declare const popUpMenuStyles: import('tailwind-variants').TVReturnType<{
+    cursorPointer: {
+        true: string[];
+    };
+    wrapperWidth: {
+        fit: string[];
+        full: string[];
+    };
+}, undefined, string[], {
+    cursorPointer: {
+        true: string[];
+    };
+    wrapperWidth: {
+        fit: string[];
+        full: string[];
+    };
+}, undefined, import('tailwind-variants').TVReturnType<{
+    cursorPointer: {
+        true: string[];
+    };
+    wrapperWidth: {
+        fit: string[];
+        full: string[];
+    };
+}, undefined, string[], unknown, unknown, undefined>>;
+export declare const popUpMenuContentStyles: import('tailwind-variants').TVReturnType<{
+    hasCustomHeight: {
+        true: string[];
+    };
+    placement: {
+        top: string[];
+        'top-left': string[];
+        'top-right': string[];
+        bottom: string[];
+        'bottom-left': string[];
+        'bottom-right': string[];
+        left: string[];
+        right: string[];
+        'left-top': string[];
+        'left-bottom': string[];
+        'right-top': string[];
+        'right-bottom': string[];
+    };
+}, undefined, string[], {
+    hasCustomHeight: {
+        true: string[];
+    };
+    placement: {
+        top: string[];
+        'top-left': string[];
+        'top-right': string[];
+        bottom: string[];
+        'bottom-left': string[];
+        'bottom-right': string[];
+        left: string[];
+        right: string[];
+        'left-top': string[];
+        'left-bottom': string[];
+        'right-top': string[];
+        'right-bottom': string[];
+    };
+}, undefined, import('tailwind-variants').TVReturnType<{
+    hasCustomHeight: {
+        true: string[];
+    };
+    placement: {
+        top: string[];
+        'top-left': string[];
+        'top-right': string[];
+        bottom: string[];
+        'bottom-left': string[];
+        'bottom-right': string[];
+        left: string[];
+        right: string[];
+        'left-top': string[];
+        'left-bottom': string[];
+        'right-top': string[];
+        'right-bottom': string[];
+    };
+}, undefined, string[], unknown, unknown, undefined>>;
+export declare const popUpMenuPortalStyles: import('tailwind-variants').TVReturnType<{
+    isVisible: {
+        true: string[];
+        false: string[];
+    };
+}, undefined, string[], {
+    isVisible: {
+        true: string[];
+        false: string[];
+    };
+}, undefined, import('tailwind-variants').TVReturnType<{
+    isVisible: {
+        true: string[];
+        false: string[];
+    };
+}, undefined, string[], unknown, unknown, undefined>>;
+export declare const popUpMenuListStyles: import('tailwind-variants').TVReturnType<{
+    hasControls: {
+        true: never[];
+        false: never[];
+    };
+    hasCustomHeight: {
+        true: string[];
+        false: never[];
+    };
+}, undefined, string[], {
+    hasControls: {
+        true: never[];
+        false: never[];
+    };
+    hasCustomHeight: {
+        true: string[];
+        false: never[];
+    };
+}, undefined, import('tailwind-variants').TVReturnType<{
+    hasControls: {
+        true: never[];
+        false: never[];
+    };
+    hasCustomHeight: {
+        true: string[];
+        false: never[];
+    };
+}, undefined, string[], unknown, unknown, undefined>>;
+export declare const popUpMenuListItemStyles: import('tailwind-variants').TVReturnType<{
+    isStatic: {
+        true: string[];
+    };
+    isSelected: {
+        true: string[];
+    };
+    density: {
+        default: string[];
+        '-2': string[];
+        '-4': string[];
+    };
+}, undefined, string[], {
+    isStatic: {
+        true: string[];
+    };
+    isSelected: {
+        true: string[];
+    };
+    density: {
+        default: string[];
+        '-2': string[];
+        '-4': string[];
+    };
+}, undefined, import('tailwind-variants').TVReturnType<{
+    isStatic: {
+        true: string[];
+    };
+    isSelected: {
+        true: string[];
+    };
+    density: {
+        default: string[];
+        '-2': string[];
+        '-4': string[];
+    };
+}, undefined, string[], unknown, unknown, undefined>>;

package/dist/src/components/PopUpMenu/PopUpMenu.types.d.ts

@@ -0,0 +1,258 @@
+import { CommonIconNames, DividerProps } from '../../index.ts';
+import { ResponsiveType } from '../../types';
+export type PopUpMenuPlacement = 'top' | 'bottom' | 'left' | 'right' | 'bottom-left' | 'bottom-right' | 'top-left' | 'top-right' | 'left-top' | 'left-bottom' | 'right-top' | 'right-bottom';
+export type PopUpMenuSelectionType = string | string[] | undefined;
+type UnionAs = ({
+    /**
+     * The component to render the button as.
+     * @default button
+     */
+    as?: 'a';
+} & Omit<React.ComponentProps<'a'>, 'className' | 'ref' | 'role' | 'tabIndex' | 'onClick' | 'disabled'>) | ({
+    /**
+     * The component to render the button as.
+     * @default button
+     */
+    as?: 'button';
+} & Omit<React.ComponentProps<'button'>, 'className' | 'type' | 'onClick' | 'disabled' | 'ref' | 'role' | 'tabIndex'>);
+export type PopUpMenuItem<T extends React.ElementType = 'button'> = UnionAs & {
+    /**
+     * The id of the item
+     * @required
+     */
+    id: string;
+    /**
+     * The label of the item
+     * @required (ignored when isDivider is true)
+     */
+    label: string;
+    /**
+     * Whether the item is a visual divider
+     * @default false
+     */
+    isDivider?: boolean;
+    /**
+     * Props passed to the Divider component
+     * Only used when `isDivider` is true
+     */
+    dividerProps?: DividerProps;
+    /**
+     * Custom ReactNode to render instead of the label.
+     * When set, the item becomes non-interactive (not clickable, not focusable).
+     */
+    customContent?: React.ReactNode;
+    /**
+     * Whether the menu should stay open when this item is clicked
+     * @default false
+     */
+    keepOpen?: boolean;
+    /**
+     * The callback function that is called when the item is clicked
+     */
+    onClick?: () => void;
+    /**
+     * The icon of the item
+     * @see {@link CommonIconNames} for available icons
+     */
+    icon?: CommonIconNames;
+    /**
+     * Whether the item is disabled
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Sub-menu items displayed in a nested PopUpMenu when the item is hovered.
+     * Opens to the right of the item (or left if no space).
+     */
+    subMenuItems?: PopUpMenuItem[];
+    /**
+     * The custom component to be used for the item <br />
+     * `as` is ignored when `linkComponent` is set
+     * @see {@link UnionAs}
+     */
+    linkComponent?: T;
+} & Omit<React.ComponentProps<T>, 'className' | 'ref' | 'role' | 'tabIndex' | 'onClick' | 'disabled'>;
+export interface PopUpMenuProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'children' | 'className'> {
+    /**
+     * The trigger element that the context menu is attached to
+     */
+    children: React.ReactNode;
+    /**
+     * The items to be displayed in the context menu <br />
+     * The Generic type `T` is type of the `linkComponent` prop. Default `T` is `button`. <br />
+     * If you use the prop `as` the types of the the selected option are automatically inferred to that particular item
+     * @see {@link PopUpMenuItem}
+     * @example
+     * ```ts
+     * const items: PopUpMenuItem[] = [
+     *   {
+     *     id: 'delete',
+     *     label: 'Delete',
+     *     onClick: () => {
+     *       console.log('Deleted');
+     *     },
+     *     icon: 'delete',
+     *   },
+     * ];
+     * ```
+     */
+    items: PopUpMenuItem[];
+    /**
+     * The selected items in the context menu
+     * @see {@link PopUpMenuSelectionType}
+     */
+    selectedItem?: PopUpMenuSelectionType;
+    /**
+     * The callback function that is called when the items are clicked
+     * @see {@link PopUpMenuSelectionType}
+     * @see {@link PopUpMenuItem}
+     */
+    onItemClick?: (item: PopUpMenuItem, selectedItem?: PopUpMenuSelectionType) => void;
+    /**
+     * The callback function that is called when the clear all or select all buttons are clicked
+     * @see {@link PopUpMenuSelectionType}
+     * @see {@link PopUpMenuItem}
+     */
+    onClearAllOrSelectAllClick?: (items: PopUpMenuItem[], selectedItems: PopUpMenuSelectionType) => void;
+    /**
+     * The position of the context menu relative to its trigger
+     * @default 'bottom-left'
+     */
+    placement?: ResponsiveType<PopUpMenuPlacement>;
+    /**
+     * The trigger event that opens the context menu
+     * @default click
+     */
+    trigger?: 'hover' | 'click' | 'right-click';
+    /**
+     * The density of the context menu
+     * @default default
+     */
+    density?: 'default' | '-2' | '-4';
+    /**
+     * Whether the context menu should be selectable
+     * @default none
+     */
+    selectable?: 'single' | 'multiple' | 'none';
+    /**
+     * Whether the context menu should be disabled
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Whether the context menu should be closed when the user clicks outside of it
+     * @default true
+     */
+    closeOnClickOutside?: boolean;
+    /**
+     * Whether the context menu should be closed when the user presses the escape key
+     * @default true
+     */
+    closeOnEscape?: boolean;
+    /**
+     * Whether the context menu should be toggled when the user clicks on the trigger
+     * @default true
+     */
+    toggleOnClick?: boolean;
+    /**
+     * Whether the context menu should be open
+     * @default false
+     */
+    open?: boolean;
+    /**
+     * The callback function that is called when the context menu is opened
+     */
+    onOpen?: () => void;
+    /**
+     * The callback function that is called when the context menu is closed
+     */
+    onClose?: () => void;
+    /**
+     * The query to be used to filter the items by label or id
+     */
+    queryHighlight?: string;
+    /**
+     * Whether the context menu should be closed when the item is clicked
+     * Default is `true` when the `selectable` prop is `none` or `single`
+     * @default true
+     */
+    closeOnItemClick?: boolean;
+    /**
+     * Whether the context menu should show a search input
+     * @default false
+     */
+    showSearch?: boolean;
+    /**
+     * The placeholder of the search input
+     * @default 'Suchen'
+     */
+    searchPlaceholder?: string;
+    /**
+     * Whether the context menu should allow clearing all selected items
+     * @default false
+     */
+    allowClearAll?: boolean;
+    /**
+     * The label of the clear all button
+     * @default 'Alle löschen'
+     */
+    clearAllLabel?: string;
+    /**
+     * Whether the context menu should allow selecting all items
+     * @default false
+     */
+    allowSelectAll?: boolean;
+    /**
+     * The label of the select all button
+     * @default 'Alle auswählen'
+     */
+    selectAllLabel?: string;
+    /**
+     * The message of the no results found message
+     * @default 'Keine Ergebnisse gefunden'
+     */
+    noResultsFoundMessage?: string;
+    /**
+     * The mode of the search
+     * @default 'built-in'
+     */
+    searchMode?: 'built-in' | 'async';
+    /**
+     * The callback function that is called when the search query is changed <br />
+     * This is only used when the `searchMode` prop is set to `async`
+     */
+    onSearchChange?: (searchQuery: string) => void;
+    /**
+     * Whether the context menu is loading
+     * @default false
+     */
+    isLoading?: boolean;
+    /**
+     * The width of the wrapper div that contains the context menu,
+     * this is useful if you need the wrapped element to be full width (like in a InputField for example)
+     * @default 'fit'
+     */
+    wrapperWidth?: 'fit' | 'full';
+    /**
+     * The callback function that is called when the scroll end is reached
+     */
+    onScrollEnd?: () => void;
+    /**
+     * Whether the context menu is loading more items when the user scrolls to the bottom
+     * @default false
+     */
+    isLoadingMore?: boolean;
+    /**
+     * The height of the popup menu content
+     */
+    height?: ResponsiveType<number | string>;
+    /**
+     * The min height of the popup menu content
+     */
+    minHeight?: ResponsiveType<number | string>;
+    /**
+     * The max height of the popup menu content
+     */
+    maxHeight?: ResponsiveType<number | string>;
+}
+export {};

package/dist/src/components/PopUpMenu/PopUpMenu.utils.d.ts

@@ -0,0 +1,18 @@
+import { default as React } from 'react';
+import { PopUpMenuItem, PopUpMenuSelectionType } from './PopUpMenu.types';
+/**
+ * Renders a label with optional query highlighting
+ */
+export declare const renderLabel: (label: string, queryHighlight?: string) => React.ReactNode;
+/**
+ * Gets the new selection state when an item is clicked
+ */
+export declare const getNewSelection: (item: PopUpMenuItem, currentSelection: PopUpMenuSelectionType, selectable: "single" | "multiple" | "none") => PopUpMenuSelectionType;
+/**
+ * Filters items based on search query
+ */
+export declare const filterItems: (items: PopUpMenuItem[], searchQuery: string) => PopUpMenuItem[];
+/**
+ * Checks if all items are selected (for multiple select mode)
+ */
+export declare const allItemsAreSelected: (items: PopUpMenuItem[], selectedItem: PopUpMenuSelectionType, selectable: "single" | "multiple" | "none") => boolean;