@cleartrip/ct-design-container 4.0.0-SNAPSHOT-testrnwclean.5 → 4.0.0-SNAPSHOT-test.5

package/dist/Container.native.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+import type { IContainer, ContainerRef } from './type';
+declare const Container: React.ForwardRefExoticComponent<IContainer & React.RefAttributes<ContainerRef>>;
+export default Container;
+//# sourceMappingURL=Container.native.d.ts.map

package/dist/Container.native.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Container.native.d.ts","sourceRoot":"","sources":["../packages/components/Container/src/Container.native.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAsF,MAAM,OAAO,CAAC;AAE3G,OAAO,KAAK,EAAE,UAAU,EAAQ,YAAY,EAAE,MAAM,QAAQ,CAAC;AAS7D,QAAA,MAAM,SAAS,iFA2Hd,CAAC;AAIF,eAAe,SAAS,CAAC"}

package/dist/index.native.d.ts

@@ -0,0 +1,3 @@
+export { default as Container } from './Container.native';
+export * from './type';
+//# sourceMappingURL=index.native.d.ts.map

package/dist/index.native.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.native.d.ts","sourceRoot":"","sources":["../packages/components/Container/src/index.native.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,oBAAoB,CAAC;AAC1D,cAAc,QAAQ,CAAC"}

package/dist/style.native.d.ts

@@ -0,0 +1,32 @@
+import type { ViewStyle } from 'react-native';
+export declare const getContainerStyles: (props: {
+    [key: string]: unknown;
+    alignItems?: ViewStyle['alignItems'];
+    borderRadius?: ViewStyle['borderRadius'];
+    bottom?: ViewStyle['bottom'];
+    display?: ViewStyle['display'];
+    flex?: ViewStyle['flex'];
+    justifyContent?: ViewStyle['justifyContent'];
+    flexWrap?: ViewStyle['flexWrap'];
+    flexDirection?: ViewStyle['flexDirection'];
+    rowGap?: number | undefined;
+    columnGap?: number | undefined;
+    left?: ViewStyle['left'];
+    position?: ViewStyle['position'];
+    right?: ViewStyle['right'];
+    top?: ViewStyle['top'];
+    zIndex?: ViewStyle['zIndex'];
+    paddingTop?: ViewStyle['paddingTop'];
+    paddingBottom?: ViewStyle['paddingBottom'];
+    paddingLeft?: ViewStyle['paddingLeft'];
+    paddingRight?: ViewStyle['paddingRight'];
+    marginTop?: ViewStyle['marginTop'];
+    marginBottom?: ViewStyle['marginBottom'];
+    marginLeft?: ViewStyle['marginLeft'];
+    marginRight?: ViewStyle['marginRight'];
+    backgroundColor?: ViewStyle['backgroundColor'];
+    width?: ViewStyle['width'];
+    height?: ViewStyle['height'];
+    textAlign?: any;
+}) => ViewStyle;
+//# sourceMappingURL=style.native.d.ts.map

package/dist/style.native.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"style.native.d.ts","sourceRoot":"","sources":["../packages/components/Container/src/style.native.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAM9C,eAAO,MAAM,kBAAkB;;iBAChB,SAAS,CAAC,YAAY,CAAC;mBACrB,SAAS,CAAC,cAAc,CAAC;aAC/B,SAAS,CAAC,QAAQ,CAAC;cAClB,SAAS,CAAC,SAAS,CAAC;WACvB,SAAS,CAAC,MAAM,CAAC;qBACP,SAAS,CAAC,gBAAgB,CAAC;eACjC,SAAS,CAAC,UAAU,CAAC;oBAChB,SAAS,CAAC,eAAe,CAAC;;;WAGnC,SAAS,CAAC,MAAM,CAAC;eACb,SAAS,CAAC,UAAU,CAAC;YACxB,SAAS,CAAC,OAAO,CAAC;UACpB,SAAS,CAAC,KAAK,CAAC;aACb,SAAS,CAAC,QAAQ,CAAC;iBACf,SAAS,CAAC,YAAY,CAAC;oBACpB,SAAS,CAAC,eAAe,CAAC;kBAC5B,SAAS,CAAC,aAAa,CAAC;mBACvB,SAAS,CAAC,cAAc,CAAC;gBAC5B,SAAS,CAAC,WAAW,CAAC;mBACnB,SAAS,CAAC,cAAc,CAAC;iBAC3B,SAAS,CAAC,YAAY,CAAC;kBACtB,SAAS,CAAC,aAAa,CAAC;sBACpB,SAAS,CAAC,iBAAiB,CAAC;YACtC,SAAS,CAAC,OAAO,CAAC;aACjB,SAAS,CAAC,QAAQ,CAAC;;MAG1B,SA8DH,CAAC"}

package/package.json

@@ -1,31 +1,38 @@
 {
   "name": "@cleartrip/ct-design-container",
-  "version": "4.0.0-SNAPSHOT-testrnwclean.5",
+  "version": "4.0.0-SNAPSHOT-test.5",
   "description": "",
   "types": "dist/index.d.ts",
   "main": "dist/ct-design-container.cjs.js",
   "jsnext:main": "dist/ct-design-container.esm.js",
   "module": "dist/ct-design-container.esm.js",
-  "react-native": "index.native.ts",
+  "react-native": "src/index.native.tsx",
   "sideEffects": false,
   "browser": {
     "./dist/ct-design-container.esm.js": "./dist/ct-design-container.browser.esm.js",
     "./dist/ct-design-container.cjs.js": "./dist/ct-design-container.browser.cjs.js"
   },
   "files": [
-    "dist"
+    "dist",
+    "src"
   ],
   "dependencies": {
-    "@cleartrip/ct-design-style-manager": "4.0.0-SNAPSHOT-testrnwclean.5"
+    "@cleartrip/ct-design-style-manager": "4.0.0-SNAPSHOT-test.5"
   },
   "devDependencies": {
     "@emotion/babel-plugin": "^11.12.0",
-    "@cleartrip/ct-design-types": "4.0.0-SNAPSHOT-testrnwclean.5",
-    "@cleartrip/ct-design-theme": "4.0.0-SNAPSHOT-testrnwclean.5"
+    "@cleartrip/ct-design-theme": "4.0.0-SNAPSHOT-test.5",
+    "@cleartrip/ct-design-types": "4.0.0-SNAPSHOT-test.5"
   },
   "peerDependencies": {
     "react": ">=16.8.0",
-    "react-dom": ">=16.8.0"
+    "react-dom": ">=16.8.0",
+    "react-native": ">=0.71.0"
+  },
+  "peerDependenciesMeta": {
+    "react-native": {
+      "optional": true
+    }
   },
   "publishConfig": {
     "access": "public"

package/src/Container.native.tsx

@@ -0,0 +1,139 @@
+import React, { forwardRef, useCallback, useImperativeHandle, useRef, type MutableRefObject } from 'react';
+import { View, StyleSheet, Pressable, type LayoutChangeEvent, type NativeSyntheticEvent } from 'react-native';
+import type { IContainer, Rect, ContainerRef } from './type';
+import { getContainerStyles } from './style.native';
+
+const defaultRootStyle = StyleSheet.create({
+  root: {
+    flexDirection: 'column',
+  },
+});
+
+const Container = forwardRef<ContainerRef, IContainer>(
+  (
+    {
+      id,
+      children,
+      styleConfig,
+      onLayout,
+      pointerEvents,
+      testID,
+      nativeID,
+      collapsable,
+      removeClippedSubviews,
+      shouldRasterizeIOS,
+      focusable,
+      onClick,
+      ...rest
+    },
+    forwardedRef,
+  ) => {
+    const localRef = useRef<View>(null);
+    const layoutRef = useRef<Rect>({ x: 0, y: 0, width: 0, height: 0 });
+
+    const handleLayout = useCallback(
+      (event: NativeSyntheticEvent<LayoutChangeEvent>) => {
+        const { layout } = event.nativeEvent;
+        layoutRef.current = {
+          x: layout.x,
+          y: layout.y,
+          width: layout.width,
+          height: layout.height,
+        };
+        onLayout?.(event);
+      },
+      [onLayout],
+    );
+
+    const handleFocus = useCallback(() => {
+      (localRef.current as unknown as { focus?: () => void })?.focus?.();
+    }, []);
+
+    const handleGetBoundingRect = useCallback((callback?: (rect: Rect) => void) => {
+      const measure = () => {
+        localRef.current?.measureInWindow((x, y, width, height) => {
+          const rect = { x, y, width, height };
+          layoutRef.current = rect;
+          callback?.(rect);
+        });
+      };
+      if (layoutRef.current.width !== 0 || layoutRef.current.height !== 0) {
+        callback?.(layoutRef.current);
+      } else {
+        measure();
+      }
+    }, []);
+
+    const handleAddEventListener = useCallback(
+      (_type: string, _listener: EventListener, _options?: boolean | AddEventListenerOptions) => {
+        // No-op on React Native View; retain API compatibility with web ref
+      },
+      [],
+    );
+
+    const handleRemoveEventListener = useCallback(
+      (_type: string, _listener: EventListener, _options?: boolean | EventListenerOptions) => {
+        // No-op on React Native View; retain API compatibility with web ref
+      },
+      [],
+    );
+
+    useImperativeHandle(
+      forwardedRef,
+      () =>
+        ({
+          focus: handleFocus,
+          getBoundingRectWithCallback: handleGetBoundingRect,
+          getElementRef: () => localRef as MutableRefObject<HTMLDivElement | null>,
+          classList: {
+            add: (_className: string) => {
+              // No-op on RN; retain API compatibility
+            },
+          },
+          addEventListener: handleAddEventListener,
+          removeEventListener: handleRemoveEventListener,
+          get style() {
+            return {} as CSSStyleDeclaration;
+          },
+          get offsetWidth() {
+            return layoutRef.current?.width ?? 0;
+          },
+        }) as ContainerRef,
+      [handleFocus, handleGetBoundingRect, handleAddEventListener, handleRemoveEventListener],
+    );
+
+    const { root: rootStyles = [] } = styleConfig || {};
+    const mergedStyle = [
+      defaultRootStyle.root,
+      getContainerStyles(rest as Parameters<typeof getContainerStyles>[0]),
+      ...(Array.isArray(rootStyles) ? rootStyles : [rootStyles].filter(Boolean)),
+    ];
+
+    const viewProps = {
+      ref: localRef,
+      nativeID: id ?? nativeID,
+      testID,
+      onLayout: handleLayout,
+      pointerEvents,
+      collapsable,
+      removeClippedSubviews,
+      shouldRasterizeIOS,
+      focusable,
+      style: mergedStyle,
+    };
+
+    if (onClick) {
+      return (
+        <Pressable ref={localRef} onPress={onClick as () => void} {...viewProps}>
+          {children}
+        </Pressable>
+      );
+    }
+
+    return <View {...viewProps}>{children}</View>;
+  },
+);
+
+Container.displayName = 'Container';
+
+export default Container;

package/src/Container.tsx

@@ -0,0 +1,115 @@
+import React, { forwardRef, useCallback, useImperativeHandle, useRef } from 'react';
+import { ForwardRefComponentWithStyle, OwnProps } from '@cleartrip/ct-design-types';
+import styled from '@emotion/styled';
+import { makeStyles, useWebMergeStyles } from '@cleartrip/ct-design-style-manager';
+import { getContainerStyles } from './style';
+import { IContainer, Rect, ContainerRef } from './type';
+
+type PolymorphicContainer = ForwardRefComponentWithStyle<
+  'main' | 'section' | 'article' | 'div' | 'span' | 'p',
+  IContainer
+>;
+
+// Added below to sync with RN as flexDirection is mostly used as column
+const staticContainerStyles = makeStyles(() => {
+  return {
+    root: {
+      flexDirection: 'column',
+    },
+  };
+});
+
+const StyledContainer = styled.div<OwnProps<PolymorphicContainer>>(
+  ({
+    id,
+    css,
+    children,
+    onClick,
+    onAnimationEnd,
+    onAnimationStart,
+    onDoubleClick,
+    onBlur,
+    onTouchStart,
+    onTouchEnd,
+    onMouseEnter,
+    onMouseLeave,
+    onFocus,
+    onKeyDown,
+    onPointerEnter,
+    onPointerLeave,
+    onTouchCancel,
+    onTouchMove,
+    ...rest
+  }) => getContainerStyles({ ...rest, ...css }),
+);
+
+const Container = forwardRef<ContainerRef, IContainer>(
+  ({ id, as = 'div', children, styleConfig, ...rest }, forwardedRef) => {
+    const localRef = useRef<HTMLDivElement | null>(null);
+
+    // Focuses the container element programmatically
+    const handleFocus = useCallback(() => {
+      localRef.current?.focus();
+    }, []);
+
+    // Gets the bounding rectangle dimensions and position of the container
+    const handleGetBoundingRect = useCallback((callback?: (rect: Rect) => void) => {
+      const rect = localRef.current?.getBoundingClientRect();
+      // Only invoke callback if the element exists and has a bounding rect
+      if (rect) {
+        callback?.({
+          x: rect.x,
+          y: rect.y,
+          width: rect.width,
+          height: rect.height,
+        });
+      }
+    }, []);
+
+    const handleAddEventListener = useCallback(
+      (type: string, listener: EventListener, options?: boolean | AddEventListenerOptions) => {
+        localRef.current?.addEventListener(type, listener, options);
+      },
+      [],
+    );
+
+    const handleRemoveEventListener = useCallback(
+      (type: string, listener: EventListener, options?: boolean | EventListenerOptions) => {
+        localRef.current?.removeEventListener(type, listener, options);
+      },
+      [],
+    );
+
+    // Using useImperativeHandle to limit the number of methods exposed to the parent, In order to sync with RN
+    useImperativeHandle(
+      forwardedRef,
+      () => ({
+        focus: handleFocus,
+        getBoundingRectWithCallback: handleGetBoundingRect,
+        getElementRef: () => localRef,
+        addEventListener: handleAddEventListener,
+        removeEventListener: handleRemoveEventListener,
+        get style() {
+          return localRef.current?.style || ({} as CSSStyleDeclaration);
+        },
+        get offsetWidth() {
+          return localRef.current?.offsetWidth || 0;
+        },
+        //  Need more methods if required here
+      }),
+      [handleFocus, handleGetBoundingRect, handleAddEventListener, handleRemoveEventListener],
+    );
+
+    const { root: rootStyles = [] } = styleConfig || {};
+
+    const mergedRootStyles = useWebMergeStyles([staticContainerStyles.root, ...rootStyles], [rootStyles]);
+
+    return (
+      <StyledContainer id={id} ref={localRef} as={as} className={mergedRootStyles} {...rest}>
+        {children}
+      </StyledContainer>
+    );
+  },
+) as PolymorphicContainer;
+
+export default Container;

package/src/index.native.tsx

@@ -0,0 +1,2 @@
+export { default as Container } from './Container.native';
+export * from './type';

package/src/index.ts

@@ -0,0 +1,2 @@
+export { default as Container } from './Container';
+export * from './type';

package/src/style.native.ts

@@ -0,0 +1,98 @@
+import type { ViewStyle } from 'react-native';
+
+/**
+ * Returns React Native ViewStyle from container props.
+ * Mirrors the web getContainerStyles API for cross-platform usage.
+ */
+export const getContainerStyles = (props: {
+  alignItems?: ViewStyle['alignItems'];
+  borderRadius?: ViewStyle['borderRadius'];
+  bottom?: ViewStyle['bottom'];
+  display?: ViewStyle['display'];
+  flex?: ViewStyle['flex'];
+  justifyContent?: ViewStyle['justifyContent'];
+  flexWrap?: ViewStyle['flexWrap'];
+  flexDirection?: ViewStyle['flexDirection'];
+  rowGap?: number;
+  columnGap?: number;
+  left?: ViewStyle['left'];
+  position?: ViewStyle['position'];
+  right?: ViewStyle['right'];
+  top?: ViewStyle['top'];
+  zIndex?: ViewStyle['zIndex'];
+  paddingTop?: ViewStyle['paddingTop'];
+  paddingBottom?: ViewStyle['paddingBottom'];
+  paddingLeft?: ViewStyle['paddingLeft'];
+  paddingRight?: ViewStyle['paddingRight'];
+  marginTop?: ViewStyle['marginTop'];
+  marginBottom?: ViewStyle['marginBottom'];
+  marginLeft?: ViewStyle['marginLeft'];
+  marginRight?: ViewStyle['marginRight'];
+  backgroundColor?: ViewStyle['backgroundColor'];
+  width?: ViewStyle['width'];
+  height?: ViewStyle['height'];
+  textAlign?: ViewStyle['textAlign'];
+  [key: string]: unknown;
+}): ViewStyle => {
+  const {
+    alignItems,
+    borderRadius,
+    bottom,
+    display,
+    flex,
+    justifyContent,
+    flexWrap,
+    flexDirection,
+    rowGap,
+    columnGap,
+    left,
+    position,
+    right,
+    top,
+    zIndex,
+    paddingTop,
+    paddingBottom,
+    paddingLeft,
+    paddingRight,
+    marginTop,
+    marginBottom,
+    marginLeft,
+    marginRight,
+    backgroundColor,
+    width,
+    height,
+    textAlign,
+    ...rest
+  } = props;
+
+  return {
+    alignItems,
+    borderRadius,
+    bottom,
+    display,
+    flex,
+    justifyContent,
+    flexWrap,
+    flexDirection,
+    rowGap,
+    columnGap,
+    left,
+    position,
+    right,
+    top,
+    zIndex,
+    paddingTop,
+    paddingBottom,
+    paddingLeft,
+    paddingRight,
+    marginTop,
+    marginBottom,
+    marginLeft,
+    marginRight,
+    backgroundColor,
+    width,
+    height,
+    textAlign,
+    ...rest,
+  } as ViewStyle;
+};

package/src/style.ts

@@ -0,0 +1,72 @@
+import { CSSObject } from '@emotion/styled';
+
+export const getContainerStyles = ({
+  alignItems,
+  borderRadius,
+  boxShadow,
+  bottom,
+  display,
+  flex,
+  justifyContent,
+  flexWrap,
+  flexDirection,
+  rowGap,
+  columnGap,
+  left,
+  position,
+  right,
+  top,
+  zIndex,
+  paddingTop,
+  paddingBottom,
+  paddingLeft,
+  paddingRight,
+  marginTop,
+  marginBottom,
+  marginLeft,
+  marginRight,
+  backgroundColor,
+  cursor,
+  width,
+  height,
+  wordBreak,
+  theme,
+  textAlign,
+  gridTemplateColumns,
+  ...rest
+}: any): CSSObject => {
+  return {
+    alignItems,
+    borderRadius,
+    boxShadow,
+    bottom,
+    display,
+    flex,
+    justifyContent,
+    flexWrap,
+    flexDirection,
+    rowGap,
+    columnGap,
+    left,
+    position,
+    right,
+    top,
+    zIndex,
+    paddingTop,
+    paddingBottom,
+    paddingLeft,
+    paddingRight,
+    marginTop,
+    marginBottom,
+    marginLeft,
+    marginRight,
+    backgroundColor,
+    cursor,
+    width,
+    height,
+    wordBreak,
+    textAlign,
+    gridTemplateColumns,
+    ...rest,
+  };
+};

package/src/type.ts

@@ -0,0 +1,174 @@
+import type { MouseEventHandler, MouseEvent, KeyboardEvent, MutableRefObject } from 'react';
+import type { CSSProperties } from 'react';
+import type {
+  HtmlCompositeAttributes,
+  Styles,
+  CrossPlatformViewProps,
+  LayoutChangeEvent,
+} from '@cleartrip/ct-design-types';
+
+export type ContainerDefaultProps = {
+  display?: CSSProperties['display'];
+  flex?: CSSProperties['flex'];
+  alignItems?: CSSProperties['alignItems'];
+  borderRadius?: CSSProperties['borderRadius'];
+  boxShadow?: CSSProperties['boxShadow'];
+  justifyContent?: CSSProperties['justifyContent'];
+  flexWrap?: CSSProperties['flexWrap'];
+  flexDirection?: CSSProperties['flexDirection'];
+  rowGap?: CSSProperties['rowGap'];
+  columnGap?: CSSProperties['columnGap'];
+  gridTemplateColumns?: CSSProperties['gridTemplateColumns'];
+  className?: string;
+  position?: CSSProperties['position'];
+  top?: CSSProperties['top'];
+  bottom?: CSSProperties['bottom'];
+  left?: CSSProperties['left'];
+  right?: CSSProperties['right'];
+  zIndex?: CSSProperties['zIndex'];
+  paddingTop?: CSSProperties['paddingTop'];
+  paddingBottom?: CSSProperties['paddingBottom'];
+  paddingLeft?: CSSProperties['paddingLeft'];
+  paddingRight?: CSSProperties['paddingRight'];
+  marginTop?: CSSProperties['marginTop'];
+  marginBottom?: CSSProperties['marginBottom'];
+  marginLeft?: CSSProperties['marginLeft'];
+  marginRight?: CSSProperties['marginRight'];
+  backgroundColor?: CSSProperties['backgroundColor'];
+  cursor?: CSSProperties['cursor'];
+  width?: CSSProperties['width'];
+  height?: CSSProperties['height'];
+  wordBreak?: CSSProperties['wordBreak'];
+  textAlign?: CSSProperties['textAlign'];
+  borderLeft?: CSSProperties['borderLeft'];
+  padding?: CSSProperties['padding'];
+  border?: CSSProperties['border'];
+  background?: CSSProperties['background'];
+};
+
+export interface ContainerProps
+  extends Omit<HtmlCompositeAttributes<ContainerDefaultProps, 'Div'>, 'pointerEvents'>,
+    ContainerDefaultProps {}
+
+export type HapticVariant = 'subtle' | 'loud';
+
+export interface HapticFeedbackProps {
+  /**
+   * Enables haptic feedback on interaction with the container.
+   * When true, the container will trigger haptic feedback on click/tap events.
+   * @example
+   * <Component hapticEnabled={true} />
+   */
+  hapticEnabled?: boolean;
+
+  /**
+   * Specifies the intensity of the haptic feedback.
+   * - 'light': Light haptic feedback, suitable for most interactions
+   * - 'loud': Strong haptic feedback, for more prominent interactions
+   * @example
+   * <Component hapticEnabled={true} hapticVariant="subtle" />
+   */
+  hapticVariant?: HapticVariant;
+
+  /**
+   * When enabled, the haptic feedback will repeat continuously while the interaction is active.
+   * Useful for long-press or drag interactions.
+   * @example
+   * <Component hapticEnabled={true} hapticRepeat={true} />
+   */
+  hapticRepeat?: boolean;
+}
+
+export interface IContainer extends ContainerProps, CrossPlatformViewProps, HapticFeedbackProps {
+  /**
+   * Unique identifier for the container element
+   */
+  id?: string;
+  /**
+   * Content to be rendered inside the container
+   */
+  children?: React.ReactNode;
+  /**
+   * Controls the visibility of scroll indicators (if applicable)
+   */
+  showScrollIndicator?: boolean;
+  /**
+   * The type of HTML element to be used for rendering
+   */
+  as?: 'main' | 'section' | 'article' | 'div' | 'p' | 'span';
+  /**
+   * Callback when user clicks on the container
+   */
+  onClick?: ((event: MouseEvent<any>) => void) | ((event: MouseEvent<any> | KeyboardEvent<any>) => void) | (() => void);
+  /**
+   * Callback for layout changes. Works only for native.
+   */
+  onLayout?: (event: LayoutChangeEvent) => void;
+  /**
+   * Custom style configuration for the container
+   */
+  styleConfig?: {
+    root?: Styles[];
+  };
+  /**
+   * Triggered when the mouse enters the container.
+   */
+  onMouseEnter?: MouseEventHandler<HTMLElement>;
+  /**
+   * Triggered when the mouse leaves the container.
+   */
+  onMouseLeave?: MouseEventHandler<HTMLElement>;
+  /**
+   * The component to be used for rendering
+   */
+  ComponentToRender?: React.ComponentType<HTMLElement>;
+  /**
+   * Triggered when the transition ends
+   */
+  onTransitionEnd?: () => void;
+}
+export interface Rect {
+  x: number;
+  y: number;
+  width: number;
+  height: number;
+}
+
+export interface ContainerRef {
+  /**
+   * Focuses the container element programmatically
+   */
+  focus: () => void;
+  /**
+   * Gets the bounding rectangle of the container with a callback
+   */
+  getBoundingRectWithCallback: (callback?: (rect: Rect) => void) => void;
+  /**
+   * Gets the element reference
+   */
+  getElementRef: () => MutableRefObject<HTMLDivElement | null>;
+  /**
+   * Gets the class list of the container
+   */
+  classList: {
+    add: (className: string) => void;
+  };
+  /**
+   * Adds an event listener to the container element
+   */
+  addEventListener: (type: string, listener: EventListener, options?: boolean | AddEventListenerOptions) => void;
+  /**
+   * Removes an event listener from the container element
+   */
+  removeEventListener: (type: string, listener: EventListener, options?: boolean | EventListenerOptions) => void;
+
+  /**
+   * Gets the style object of the DOM element
+   */
+  readonly style: CSSStyleDeclaration;
+
+  /**
+   * Width of the element including padding but excluding borders, margins, and scrollbars
+   */
+  readonly offsetWidth: number;
+}