@cube-dev/ui-kit 0.96.0 → 0.97.0

package/es/utils/react/useControlledFocusVisible.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.96.0
+ * @cube-dev/ui-kit v0.97.0
  * Released under the MIT license.
  */
 

package/es/utils/react/useEventBus.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.96.0
+ * @cube-dev/ui-kit v0.97.0
  * Released under the MIT license.
  */
 

package/es/utils/react/useId.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.96.0
+ * @cube-dev/ui-kit v0.97.0
  * Released under the MIT license.
  */
 

package/es/utils/react/useIsDarwin.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.96.0
+ * @cube-dev/ui-kit v0.97.0
  * Released under the MIT license.
  */
 

package/es/utils/react/useKeySymbols.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.96.0
+ * @cube-dev/ui-kit v0.97.0
  * Released under the MIT license.
  */
 

package/es/utils/react/useLayoutEffect.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.96.0
+ * @cube-dev/ui-kit v0.97.0
  * Released under the MIT license.
  */
 

package/es/utils/react/useLocalStorage.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.96.0
+ * @cube-dev/ui-kit v0.97.0
  * Released under the MIT license.
  */
 

package/es/utils/react/useQaProps.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.96.0
+ * @cube-dev/ui-kit v0.97.0
  * Released under the MIT license.
  */
 

package/es/utils/react/useViewportSize.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.96.0
+ * @cube-dev/ui-kit v0.97.0
  * Released under the MIT license.
  */
 

package/es/utils/react/wrapNodeIfPlain.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.96.0
+ * @cube-dev/ui-kit v0.97.0
  * Released under the MIT license.
  */
 

package/es/utils/tree.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.96.0
+ * @cube-dev/ui-kit v0.97.0
  * Released under the MIT license.
  */
 

package/es/utils/warnings.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.96.0
+ * @cube-dev/ui-kit v0.97.0
  * Released under the MIT license.
  */
 

package/es/version.js

@@ -1,11 +1,11 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.96.0
+ * @cube-dev/ui-kit v0.97.0
  * Released under the MIT license.
  */
 
-export const VERSION = '0.96.0';
+export const VERSION = '0.97.0';
 if (typeof window !== 'undefined') {
     const version = VERSION;
     // Ensure CubeUIKit is defined on window in a way bundlers recognize

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cube-dev/ui-kit",
-  "version": "0.96.0",
+  "version": "0.97.0",
   "description": "UIKit for Cube Projects",
   "keywords": [
     "uikit"

package/types/components/CollectionItem.d.ts

@@ -6,6 +6,23 @@ export interface CubeCollectionItemProps<T> extends ItemProps<T>, Omit<CubeItemP
     wrapper?: (item: ReactElement) => ReactElement;
     [key: string]: any;
 }
+/**
+ * Filters out service props from collection item props, returning only
+ * props that should be passed to the Item component.
+ *
+ * This eliminates the need to manually extract and pass Item props
+ * in components like MenuItem, ListBox Option, and Select Option.
+ *
+ * @param itemProps - The props from a collection item (node.props)
+ * @returns Filtered props safe to spread onto Item component
+ *
+ * @example
+ * ```tsx
+ * const itemProps = filterCollectionItemProps(item.props);
+ * return <Item {...itemProps} />;
+ * ```
+ */
+export declare function filterCollectionItemProps(itemProps: Record<string, any> | undefined): Record<string, any>;
 declare const _CollectionItem: (<T>(props: CubeCollectionItemProps<T>) => ReactElement) & {
     Action: import("react").ForwardRefExoticComponent<Omit<import("./actions/ItemAction").CubeItemActionProps, "ref"> & import("react").RefAttributes<import("@react-types/shared").FocusableRefValue<HTMLElement, HTMLElement>>>;
     Badge: import("react").ForwardRefExoticComponent<import("./content/ItemBadge").CubeItemBadgeProps & import("react").RefAttributes<HTMLDivElement>>;

package/types/components/content/Item/Item.d.ts

@@ -1,7 +1,7 @@
 import { ReactNode, RefObject } from 'react';
 import { OverlayProps } from 'react-aria';
 import { ItemVariant } from '../../../data/item-themes';
-import { BaseProps, ContainerStyleProps, Props } from '../../../tasty';
+import { BaseProps, ContainerStyleProps, Props, Styles } from '../../../tasty';
 import { CubeTooltipProviderProps } from '../../overlays/Tooltip/TooltipProvider';
 export interface CubeItemProps extends BaseProps, ContainerStyleProps {
     icon?: ReactNode | 'checkbox';
@@ -92,6 +92,20 @@ export interface CubeItemProps extends BaseProps, ContainerStyleProps {
      * Ref to access the label element directly
      */
     labelRef?: RefObject<HTMLElement>;
+    /**
+     * String to highlight within children.
+     * Only works when children is a plain string.
+     */
+    highlight?: string;
+    /**
+     * Whether highlight matching is case-sensitive.
+     * @default false
+     */
+    highlightCaseSensitive?: boolean;
+    /**
+     * Custom styles for highlighted text.
+     */
+    highlightStyles?: Styles;
 }
 declare const _Item: import("react").ForwardRefExoticComponent<CubeItemProps & import("react").RefAttributes<HTMLElement>> & {
     Action: import("react").ForwardRefExoticComponent<Omit<import("../../actions/ItemAction").CubeItemActionProps, "ref"> & import("react").RefAttributes<import("@react-types/shared").FocusableRefValue<HTMLElement, HTMLElement>>>;

package/types/components/content/Layout/LayoutCenter.d.ts

@@ -0,0 +1,5 @@
+import { CubeLayoutContainerProps } from './LayoutContainer';
+export interface CubeLayoutCenterProps extends CubeLayoutContainerProps {
+}
+declare const _LayoutCenter: import("react").ForwardRefExoticComponent<CubeLayoutCenterProps & import("react").RefAttributes<HTMLDivElement>>;
+export { _LayoutCenter as LayoutCenter };

package/types/components/content/Layout/LayoutContainer.d.ts

@@ -0,0 +1,11 @@
+import { ReactNode } from 'react';
+import { BaseProps, ContainerStyleProps, Styles } from '../../../tasty';
+export interface CubeLayoutContainerProps extends BaseProps, ContainerStyleProps {
+    children?: ReactNode;
+    /** Custom styles for container and inner elements */
+    styles?: Styles;
+    /** Custom styles for the inner element */
+    innerStyles?: Styles;
+}
+declare const _LayoutContainer: import("react").ForwardRefExoticComponent<CubeLayoutContainerProps & import("react").RefAttributes<HTMLDivElement>>;
+export { _LayoutContainer as LayoutContainer };

package/types/components/content/Layout/LayoutContext.d.ts

@@ -1,5 +1,7 @@
 import { ReactNode } from 'react';
 export type Side = 'left' | 'top' | 'right' | 'bottom';
+/** Callback to dismiss an overlay panel */
+export type OverlayDismissCallback = () => void;
 export interface LayoutContextValue {
     registerPanel: (side: Side, size: number) => void;
     unregisterPanel: (side: Side) => void;
@@ -11,6 +13,12 @@ export interface LayoutContextValue {
     isReady: boolean;
     /** Whether transitions are enabled for panels */
     hasTransition: boolean;
+    /** Register an overlay panel's dismiss callback. Returns unregister function. */
+    registerOverlayPanel: (dismiss: OverlayDismissCallback) => () => void;
+    /** Dismiss all overlay panels */
+    dismissOverlayPanels: () => void;
+    /** Whether there are any overlay panels currently open */
+    hasOverlayPanels: boolean;
 }
 export declare const LayoutContext: import("react").Context<LayoutContextValue | null>;
 export declare function useLayoutContext(): LayoutContextValue | null;

package/types/components/content/Layout/LayoutPanel.d.ts

@@ -2,9 +2,19 @@ import { ReactNode } from 'react';
 import { BaseProps, ContainerStyleProps, Styles } from '../../../tasty';
 import { CubeDialogContainerProps } from '../../overlays/Dialog/DialogContainer';
 import { Side } from './LayoutContext';
+/** Panel rendering mode */
+export type LayoutPanelMode = 'default' | 'sticky' | 'overlay' | 'dialog';
 export interface CubeLayoutPanelProps extends BaseProps, ContainerStyleProps {
     /** Side of the layout where panel is positioned */
     side: Side;
+    /**
+     * Panel rendering mode:
+     * - `default`: Standard panel that pushes content aside
+     * - `sticky`: Panel floats over content without pushing it
+     * - `overlay`: Panel with dismissable backdrop overlay
+     * - `dialog`: Panel renders as a modal dialog
+     */
+    mode?: LayoutPanelMode;
     /** Panel size (width for left/right, height for top/bottom) - controlled */
     size?: number | string;
     /** Default panel size for uncontrolled state */
@@ -25,9 +35,18 @@ export interface CubeLayoutPanelProps extends BaseProps, ContainerStyleProps {
     onOpenChange?: (isOpen: boolean) => void;
     /** Enable slide transition on open/close */
     hasTransition?: boolean;
-    /** Switch to dialog mode (renders panel inside Dialog) */
+    /**
+     * Whether the panel can be dismissed by clicking the overlay (overlay mode) or pressing Escape.
+     * Only applies to `overlay` and `dialog` modes. Default: true
+     */
+    isDismissable?: boolean;
+    /** Styles for the overlay backdrop in overlay mode */
+    overlayStyles?: Styles;
+    /**
+     * @deprecated Use `mode="dialog"` instead. Switch to dialog mode (renders panel inside Dialog)
+     */
     isDialog?: boolean;
-    /** Controlled dialog open state */
+    /** Controlled dialog open state (used with mode="dialog") */
     isDialogOpen?: boolean;
     /** Default dialog open state */
     defaultIsDialogOpen?: boolean;

package/types/components/content/Layout/index.d.ts

@@ -1,6 +1,8 @@
 import { ForwardRefExoticComponent, RefAttributes } from 'react';
 import { CubeLayoutProps } from './Layout';
 import { LayoutBlock } from './LayoutBlock';
+import { LayoutCenter } from './LayoutCenter';
+import { LayoutContainer } from './LayoutContainer';
 import { LayoutContent } from './LayoutContent';
 import { LayoutFlex } from './LayoutFlex';
 import { LayoutFooter } from './LayoutFooter';
@@ -14,13 +16,15 @@ export { GridLayout } from './GridLayout';
 export type { CubeGridLayoutProps } from './GridLayout';
 export type { CubeLayoutProps } from './Layout';
 export type { CubeLayoutBlockProps } from './LayoutBlock';
+export type { CubeLayoutCenterProps } from './LayoutCenter';
+export type { CubeLayoutContainerProps } from './LayoutContainer';
 export type { CubeLayoutContentProps, ScrollbarType } from './LayoutContent';
 export type { CubeLayoutFlexProps } from './LayoutFlex';
 export type { CubeLayoutGridProps } from './LayoutGrid';
 export type { CubeLayoutFooterProps } from './LayoutFooter';
 export type { CubeLayoutHeaderProps } from './LayoutHeader';
 export type { CubeLayoutPaneProps, ResizeEdge } from './LayoutPane';
-export type { CubeLayoutPanelProps } from './LayoutPanel';
+export type { CubeLayoutPanelProps, LayoutPanelMode } from './LayoutPanel';
 export type { CubeLayoutPanelHeaderProps } from './LayoutPanelHeader';
 export type { CubeLayoutToolbarProps } from './LayoutToolbar';
 export { LayoutContext, LayoutPanelContext, useLayoutContext, useLayoutPanelContext, } from './LayoutContext';
@@ -30,6 +34,8 @@ interface LayoutComponent extends ForwardRefExoticComponent<CubeLayoutProps & Re
     Header: typeof LayoutHeader;
     Footer: typeof LayoutFooter;
     Content: typeof LayoutContent;
+    Container: typeof LayoutContainer;
+    Center: typeof LayoutCenter;
     Block: typeof LayoutBlock;
     Flex: typeof LayoutFlex;
     Grid: typeof LayoutGrid;

package/types/components/content/highlightText.d.ts

@@ -0,0 +1,7 @@
+import { ReactNode } from 'react';
+import { Styles } from '../../tasty';
+/**
+ * Highlights occurrences of a search string within text.
+ * Returns an array of ReactNodes with highlighted portions wrapped in Text.Highlight.
+ */
+export declare function highlightText(text: string, highlight: string, caseSensitive: boolean, highlightStyles?: Styles): ReactNode[];