@cleartrip/ct-design-container 4.0.0 → 4.1.0-SNAPSHOT-native-main.1

package/src/Container.tsx

@@ -0,0 +1,137 @@
+import {
+  CSSProperties,
+  forwardRef,
+  MutableRefObject,
+  useCallback,
+  useImperativeHandle,
+  useLayoutEffect,
+  useRef,
+} from 'react';
+import { makeStyles, useWebMergeStyles } from '@cleartrip/ct-design-style-manager';
+import { IContainer, Rect, ContainerRef } from './type';
+
+// Added below to sync with RN as flexDirection is mostly used as column
+const staticContainerStyles = makeStyles(() => {
+  return {
+    root: {
+      display: 'flex',
+      flexDirection: 'column',
+    },
+  };
+});
+
+const Container = forwardRef<ContainerRef, IContainer>(
+  (
+    {
+      id,
+      as: ContainerAs = 'div',
+      children,
+      styleConfig,
+      onClick,
+      onLayout,
+      onMouseEnter,
+      onMouseLeave,
+      onTransitionEnd,
+      onTouchStart,
+      onTouchEnd,
+      onTouchCancel,
+      onTouchMove,
+    },
+    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 as MutableRefObject<ContainerRef | null>,
+        style: (localRef.current?.style || {}) as CSSProperties,
+        classList: {
+          add: (className: string) => {
+            localRef.current?.classList.add(className);
+          },
+        },
+        measure: (
+          _callback: (x: number, y: number, width: number, height: number, pageX: number, pageY: number) => void,
+        ) => {
+          localRef.current?.getBoundingClientRect();
+        },
+        addEventListener: handleAddEventListener,
+        removeEventListener: handleRemoveEventListener,
+      }),
+      [handleFocus, handleGetBoundingRect, handleAddEventListener, handleRemoveEventListener],
+    );
+
+    const { root: rootStyles = [] } = styleConfig || {};
+
+    const mergedRootStyles = useWebMergeStyles([staticContainerStyles.root, ...rootStyles], [rootStyles]);
+
+    useLayoutEffect(() => {
+      onLayout?.({
+        layout: {
+          height: localRef.current?.clientHeight ?? 0,
+          width: localRef.current?.clientWidth ?? 0,
+          x: localRef.current?.getBoundingClientRect().x ?? 0,
+          y: localRef.current?.getBoundingClientRect().y ?? 0,
+        },
+      });
+    }, [onLayout]);
+
+    return (
+      <ContainerAs
+        id={id}
+        ref={localRef}
+        className={mergedRootStyles}
+        onClick={onClick}
+        onMouseEnter={onMouseEnter}
+        onMouseLeave={onMouseLeave}
+        onTransitionEnd={onTransitionEnd}
+        onTouchStart={onTouchStart}
+        onTouchEnd={onTouchEnd}
+        onTouchCancel={onTouchCancel}
+        onTouchMove={onTouchMove}
+      >
+        {children}
+      </ContainerAs>
+    );
+  },
+);
+
+Container.displayName = 'Container';
+export default Container;

package/src/index.ts

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

package/src/type.ts

@@ -0,0 +1,143 @@
+import { MouseEventHandler, MutableRefObject } from 'react';
+
+import type { Styles } from '@cleartrip/ct-design-types';
+import { INativeUIEvent } from '@cleartrip/ct-design-types';
+
+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 IHapticFeedbackProps {
+  pattern?: number | number[];
+  repeat?: boolean;
+  variant: HapticVariant;
+  intensity?: number;
+}
+
+export interface IContainer extends HapticFeedbackProps {
+  /**
+   * The id of the container
+   */
+  id?: string;
+  /**
+   * The children of the container
+   */
+  children?: React.ReactNode;
+  /**
+   * The type of HTML element to be used for rendering
+   */
+  as?: 'main' | 'section' | 'article' | 'div' | 'p';
+  /**
+   * Callback when user clicks on the container
+   */
+  onClick?: (event: INativeUIEvent) => void;
+  /**
+   * Callback for layout changes. Works only for native.
+   */
+  onLayout?: (event: {
+    layout: {
+      height: number;
+      width: number;
+      x: number;
+      y: number;
+    };
+  }) => 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?: () => void;
+  onTouchStart?: () => void;
+  onTouchEnd?: () => void;
+  onTouchCancel?: () => void;
+  onTouchMove?: () => void;
+  /**
+   * Triggered when the transition ends.
+   */
+  onTransitionEnd?: () => void;
+
+  /**
+   * Sets additional distance outside of element in which a press can be detected.
+   */
+  hitSlop?: {
+    top: number;
+    bottom: number;
+    left: number;
+    right: number;
+  };
+  /**
+   * Sets the pointer events for the container.
+   * @example
+   * <Component pointerEvents="box-none" />
+   */
+  pointerEvents?: 'box-none' | 'box-only' | 'auto';
+}
+
+export interface Rect {
+  x: number;
+  y: number;
+  width: number;
+  height: number;
+}
+
+export interface ContainerRef {
+  /**
+   * Focuses the container element
+   */
+  focus: () => void;
+  /**
+   * Gets the bounding rectangle of the container with a callback
+   */
+  getBoundingRectWithCallback: (callback?: (rect: Rect) => void) => void;
+  /**
+   * Measures the container's dimensions and position
+   */
+  measure: (
+    callback: (x: number, y: number, width: number, height: number, pageX: number, pageY: number) => void,
+  ) => void;
+
+  style: React.CSSProperties;
+
+  getElementRef: () => MutableRefObject<ContainerRef | null>;
+
+  classList: {
+    add: (className: string) => void;
+  };
+
+  addEventListener: (event: string, callback: () => void) => void;
+  removeEventListener: (event: string, callback: () => void) => void;
+}

package/dist/style.d.ts

@@ -1,4 +0,0 @@
-import type { CSSObject } from 'styled-components';
-import { CSSWithTheme } from '@cleartrip/ct-design-types';
-export declare 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 }: CSSWithTheme) => CSSObject;
-//# sourceMappingURL=style.d.ts.map

package/dist/style.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"style.d.ts","sourceRoot":"","sources":["../packages/components/Container/src/style.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,mBAAmB,CAAC;AACnD,OAAO,EAAE,YAAY,EAAE,MAAM,4BAA4B,CAAC;AAE1D,eAAO,MAAM,kBAAkB,8WAkC5B,YAAY,KAAG,SAmCjB,CAAC"}