@shohojdhara/atomix 0.1.16 → 0.1.18

package/src/components/Popover/Popover.stories.tsx

@@ -46,34 +46,31 @@ export default {
 } as Meta<typeof Popover>;
 
 // Default template
-const Template: StoryFn<typeof Popover> = (args) => {
+const Template: StoryFn<typeof Popover> = args => {
   const selectOptions = [
     { value: '1', label: 'Option 1' },
     { value: '2', label: 'Option 2' },
     { value: '3', label: 'Option 3' },
     { value: '4', label: 'Option 4' },
   ];
-  
+
   const [selectedOption, setSelectedOption] = React.useState('1');
   const [showInternalOnly, setShowInternalOnly] = React.useState(false);
-  
+
   const handleSelectChange = (e: React.ChangeEvent<HTMLSelectElement>) => {
     setSelectedOption(e.target.value);
   };
-  
+
   const handleToggleChange = () => {
     setShowInternalOnly(!showInternalOnly);
   };
-  
+
   const content = (
     <>
       <div className="u-d-flex u-align-items-center u-gap-7">
         <span className="u-text-nowrap">Sort by</span>
         <div className="c-select">
-          <select 
-            value={selectedOption} 
-            onChange={handleSelectChange}
-          >
+          <select value={selectedOption} onChange={handleSelectChange}>
             {selectOptions.map(option => (
               <option key={option.value} value={option.value}>
                 {option.label}
@@ -88,9 +85,11 @@ const Template: StoryFn<typeof Popover> = (args) => {
       </div>
     </>
   );
-  
+
   return (
-    <div style={{ padding: '80px', display: 'flex', justifyContent: 'center', background: '#f5f5f5' }}>
+    <div
+      style={{ padding: '80px', display: 'flex', justifyContent: 'center', background: '#f5f5f5' }}
+    >
       <Popover {...args} content={content}>
         <PopoverTrigger trigger={args.trigger}>
           <Button variant="primary" label="Open Popover" />
@@ -141,4 +140,4 @@ AutoPosition.args = {
   ...Default.args,
   position: 'auto',
   defaultOpen: true, // Open by default to showcase auto-positioning
-}; 
+};

package/src/components/Popover/Popover.tsx

@@ -16,7 +16,7 @@ export const PopoverContext = createContext<{
   setIsOpen: () => {},
   triggerRef: { current: null },
   popoverId: '',
-  triggerType: 'click'
+  triggerType: 'click',
 });
 
 /**
@@ -45,7 +45,7 @@ export const Popover: React.FC<PopoverProps> = ({
     arrowRef,
     popoverId,
     currentPosition,
-    updatePosition
+    updatePosition,
   } = usePopover({
     position,
     trigger,
@@ -56,32 +56,31 @@ export const Popover: React.FC<PopoverProps> = ({
     onOpenChange,
     closeOnClickOutside,
     closeOnEscape,
-    id
+    id,
   });
-  
+
   return (
     <PopoverContext.Provider
       value={{ isOpen, setIsOpen, triggerRef, popoverId, triggerType: trigger }}
     >
       {children}
-      
-      {typeof document !== 'undefined' && createPortal(
-        <div
-          ref={popoverRef}
-          className={`c-popover c-popover--${currentPosition} ${isOpen ? POPOVER.CLASSES.IS_OPEN : ''} ${className}`}
-          id={popoverId}
-          role="tooltip"
-          aria-hidden={!isOpen}
-        >
-          <div className="c-popover__content">
-            <div className="c-popover__content-inner">
-              {content}
+
+      {typeof document !== 'undefined' &&
+        createPortal(
+          <div
+            ref={popoverRef}
+            className={`c-popover c-popover--${currentPosition} ${isOpen ? POPOVER.CLASSES.IS_OPEN : ''} ${className}`}
+            id={popoverId}
+            role="tooltip"
+            aria-hidden={!isOpen}
+          >
+            <div className="c-popover__content">
+              <div className="c-popover__content-inner">{content}</div>
             </div>
-          </div>
-          <div ref={arrowRef} className="c-popover__arrow"></div>
-        </div>,
-        document.body
-      )}
+            <div ref={arrowRef} className="c-popover__arrow"></div>
+          </div>,
+          document.body
+        )}
     </PopoverContext.Provider>
   );
 };
@@ -89,49 +88,50 @@ export const Popover: React.FC<PopoverProps> = ({
 /**
  * PopoverTrigger component to wrap the element that triggers the popover
  */
-export const PopoverTrigger: React.FC<PopoverTriggerProps> = forwardRef<HTMLElement, PopoverTriggerProps>(({
-  children,
-  trigger: triggerProp,
-}, ref) => {
-  const { isOpen, setIsOpen, triggerRef, popoverId, triggerType } = React.useContext(PopoverContext);
-  
+export const PopoverTrigger: React.FC<PopoverTriggerProps> = forwardRef<
+  HTMLElement,
+  PopoverTriggerProps
+>(({ children, trigger: triggerProp }, ref) => {
+  const { isOpen, setIsOpen, triggerRef, popoverId, triggerType } =
+    React.useContext(PopoverContext);
+
   // Determine which trigger type to use - prop from PopoverTrigger or from context
   const effectiveTrigger = triggerProp || triggerType;
-  
+
   // Handle trigger events
   const handleClick = () => {
     setIsOpen(!isOpen);
   };
-  
+
   const handleMouseEnter = () => {
     setIsOpen(true);
   };
-  
+
   const handleMouseLeave = () => {
     setIsOpen(false);
   };
-  
+
   // Clone the children element with additional props
   const child = React.Children.only(children) as React.ReactElement;
-  
+
   const triggerProps: any = {
     ref: ref || triggerRef,
     'aria-describedby': popoverId,
     'aria-expanded': isOpen,
   };
-  
+
   if (effectiveTrigger === 'click') {
     triggerProps.onClick = handleClick;
   } else if (effectiveTrigger === 'hover') {
     triggerProps.onMouseEnter = handleMouseEnter;
     triggerProps.onMouseLeave = handleMouseLeave;
   }
-  
+
   return React.cloneElement(child, triggerProps);
-}); 
+});
 
 export type { PopoverProps, PopoverTriggerProps };
 
 Popover.displayName = 'Popover';
 
-export default Popover;
+export default Popover;

package/src/components/Popover/index.ts

@@ -2,4 +2,4 @@ import { Popover, PopoverTrigger } from './Popover';
 import type { PopoverProps, PopoverTriggerProps } from '../../lib/types/components';
 
 export { Popover, PopoverTrigger };
-export type { PopoverProps, PopoverTriggerProps }; 
+export type { PopoverProps, PopoverTriggerProps };

package/src/components/Popover/scripts/bundle.ts

@@ -9,4 +9,4 @@ if (typeof window !== 'undefined') {
 }
 
 export { Popover, initPopovers };
-export type { PopoverPosition, PopoverOptions }; 
+export type { PopoverPosition, PopoverOptions };

package/src/components/Popover/scripts/componentInteractions.ts

@@ -28,7 +28,7 @@ export const handleTriggerClick = (
     event.preventDefault();
     event.stopPropagation();
   }
-  
+
   if (isOpen) {
     close();
   } else {
@@ -47,12 +47,9 @@ export const handleDocumentClick = (
   event: MouseEvent
 ): void => {
   if (!isOpen) return;
-  
+
   const target = event.target as Node;
-  if (
-    !element.contains(target) && 
-    trigger && !trigger.contains(target)
-  ) {
+  if (!element.contains(target) && trigger && !trigger.contains(target)) {
     close();
   }
 };
@@ -63,13 +60,13 @@ export const handleDocumentClick = (
 export const handleTriggerMouseEnter = (
   open: () => void,
   delay: number,
-  timeoutRef: { current: number | null },
+  timeoutRef: { current: number | null }
 ): void => {
   if (timeoutRef.current !== null) {
     window.clearTimeout(timeoutRef.current);
     timeoutRef.current = null;
   }
-  
+
   if (delay > 0) {
     timeoutRef.current = window.setTimeout(() => {
       open();
@@ -85,13 +82,13 @@ export const handleTriggerMouseEnter = (
 export const handleTriggerMouseLeave = (
   element: HTMLElement,
   close: () => void,
-  timeoutRef: { current: number | null },
+  timeoutRef: { current: number | null }
 ): void => {
   if (timeoutRef.current !== null) {
     window.clearTimeout(timeoutRef.current);
     timeoutRef.current = null;
   }
-  
+
   timeoutRef.current = window.setTimeout(() => {
     if (!element.matches(':hover')) {
       close();
@@ -102,11 +99,7 @@ export const handleTriggerMouseLeave = (
 /**
  * Handle escape key to close popover
  */
-export const handleEscapeKey = (
-  isOpen: boolean,
-  close: () => void,
-  event: KeyboardEvent
-): void => {
+export const handleEscapeKey = (isOpen: boolean, close: () => void, event: KeyboardEvent): void => {
   if (isOpen && event.key === 'Escape') {
     close();
   }
@@ -115,29 +108,27 @@ export const handleEscapeKey = (
 /**
  * Determine the best position based on available space
  */
-export const determineBestPosition = (
-  triggerRect: DOMRect,
-): PopoverPosition => {
+export const determineBestPosition = (triggerRect: DOMRect): PopoverPosition => {
   const viewportWidth = window.innerWidth;
   const viewportHeight = window.innerHeight;
-  
+
   // Calculate space available in each direction
   const spaceTop = triggerRect.top;
   const spaceBottom = viewportHeight - triggerRect.bottom;
   const spaceLeft = triggerRect.left;
   const spaceRight = viewportWidth - triggerRect.right;
-  
+
   // Find position with most space
   const spaces = [
     { position: 'top', space: spaceTop },
     { position: 'right', space: spaceRight },
     { position: 'bottom', space: spaceBottom },
-    { position: 'left', space: spaceLeft }
+    { position: 'left', space: spaceLeft },
   ];
-  
+
   // Sort by available space (descending)
   spaces.sort((a, b) => b.space - a.space);
-  
+
   // Select position with most space
   return spaces[0].position as PopoverPosition;
 };
@@ -152,16 +143,16 @@ export const checkAndFlipPosition = (
   offset: number
 ): PopoverPosition => {
   if (position === 'auto') return 'top';
-  
+
   const viewportWidth = window.innerWidth;
   const viewportHeight = window.innerHeight;
-  
+
   // Space available in each direction
   const spaceTop = triggerRect.top;
   const spaceBottom = viewportHeight - triggerRect.bottom;
   const spaceLeft = triggerRect.left;
   const spaceRight = viewportWidth - triggerRect.right;
-  
+
   // Check if preferred position has enough space, flip if not
   switch (position) {
     case 'top':
@@ -195,69 +186,66 @@ export const calculatePopoverPosition = (
   popoverRect: DOMRect,
   position: PopoverPosition,
   offset: number
-): { top: number, left: number } => {
+): { top: number; left: number } => {
   let top = 0;
   let left = 0;
-  
+
   // Calculate position based on the determined position
   switch (position) {
     case 'top':
       top = triggerRect.top - popoverRect.height - offset;
-      left = triggerRect.left + (triggerRect.width / 2) - (popoverRect.width / 2);
+      left = triggerRect.left + triggerRect.width / 2 - popoverRect.width / 2;
       break;
     case 'bottom':
       top = triggerRect.bottom + offset;
-      left = triggerRect.left + (triggerRect.width / 2) - (popoverRect.width / 2);
+      left = triggerRect.left + triggerRect.width / 2 - popoverRect.width / 2;
       break;
     case 'left':
-      top = triggerRect.top + (triggerRect.height / 2) - (popoverRect.height / 2);
+      top = triggerRect.top + triggerRect.height / 2 - popoverRect.height / 2;
       left = triggerRect.left - popoverRect.width - offset;
       break;
     case 'right':
-      top = triggerRect.top + (triggerRect.height / 2) - (popoverRect.height / 2);
+      top = triggerRect.top + triggerRect.height / 2 - popoverRect.height / 2;
       left = triggerRect.right + offset;
       break;
   }
-  
+
   // Constrain to viewport boundaries
   const viewportWidth = window.innerWidth;
   const viewportHeight = window.innerHeight;
-  
+
   if (left < 0) {
     left = 5;
   } else if (left + popoverRect.width > viewportWidth) {
     left = viewportWidth - popoverRect.width - 5;
   }
-  
+
   if (top < 0) {
     top = 5;
   } else if (top + popoverRect.height > viewportHeight) {
     top = viewportHeight - popoverRect.height - 5;
   }
-  
+
   // Add scroll position to convert viewport coordinates to absolute position
   return {
     top: top + window.scrollY,
-    left: left + window.scrollX
+    left: left + window.scrollX,
   };
 };
 
 /**
  * Position the arrow based on current position
  */
-export const positionArrow = (
-  arrow: HTMLElement,
-  position: PopoverPosition
-): void => {
+export const positionArrow = (arrow: HTMLElement, position: PopoverPosition): void => {
   if (!arrow) return;
-  
+
   // Reset arrow position
   arrow.style.top = '';
   arrow.style.right = '';
   arrow.style.bottom = '';
   arrow.style.left = '';
   arrow.style.transform = '';
-  
+
   // Position arrow based on current position
   switch (position) {
     case 'top':
@@ -297,15 +285,15 @@ export const setPositionClass = (
       element.classList.remove(className);
     }
   });
-  
+
   // Add the current position class
   const positionClass = POPOVER.CLASSES[position.toUpperCase() as keyof typeof POPOVER.CLASSES];
   if (positionClass) {
     element.classList.add(positionClass);
   }
-  
+
   // Add auto class if auto positioning is enabled
   if (isAuto) {
     element.classList.add(POPOVER.CLASSES.AUTO);
   }
-}; 
+};

package/src/components/Popover/scripts/index.ts

@@ -11,7 +11,7 @@ import {
   checkAndFlipPosition,
   calculatePopoverPosition,
   positionArrow,
-  setPositionClass
+  setPositionClass,
 } from './componentInteractions';
 
 /**
@@ -46,16 +46,17 @@ class Popover {
     this.updateInterval = null;
     this.timeoutRef = { current: null };
     this.options = {
-      position: options.position || POPOVER.DEFAULTS.POSITION as PopoverPosition | 'auto',
-      trigger: options.trigger || POPOVER.DEFAULTS.TRIGGER as 'hover' | 'click',
+      position: options.position || (POPOVER.DEFAULTS.POSITION as PopoverPosition | 'auto'),
+      trigger: options.trigger || (POPOVER.DEFAULTS.TRIGGER as 'hover' | 'click'),
       offset: options.offset !== undefined ? options.offset : POPOVER.DEFAULTS.OFFSET,
-      delay: options.delay !== undefined ? options.delay : POPOVER.DEFAULTS.DELAY
+      delay: options.delay !== undefined ? options.delay : POPOVER.DEFAULTS.DELAY,
     };
-    
+
     // Initialize current position from options (will be recalculated if auto)
-    this.currentPosition = this.options.position === 'auto' 
-      ? 'top' // default fallback
-      : this.options.position as PopoverPosition;
+    this.currentPosition =
+      this.options.position === 'auto'
+        ? 'top' // default fallback
+        : (this.options.position as PopoverPosition);
 
     this._initialize();
   }
@@ -68,28 +69,24 @@ class Popover {
     this.trigger = document.querySelector(`[data-popover-id="${this.element.id}"]`);
     this.content = this.element.querySelector(POPOVER.SELECTORS.CONTENT);
     this.contentInner = this.element.querySelector(POPOVER.SELECTORS.CONTENT_INNER);
-    
+
     // Create arrow element if needed
     this.arrow = document.createElement('div');
     this.arrow.className = POPOVER.SELECTORS.ARROW.slice(1); // Remove leading dot
     this.content?.appendChild(this.arrow);
-    
+
     // Set initial position class
     this._setPositionClass();
-    
+
     // Bind events
     this._bindEvents();
   }
-  
+
   /**
    * Set the position class on the element
    */
   private _setPositionClass(): void {
-    setPositionClass(
-      this.element,
-      this.currentPosition,
-      this.options.position === 'auto'
-    );
+    setPositionClass(this.element, this.currentPosition, this.options.position === 'auto');
   }
 
   /**
@@ -97,7 +94,7 @@ class Popover {
    */
   private _bindEvents(): void {
     if (!this.trigger) return;
-    
+
     if (this.options.trigger === 'click') {
       this.trigger.addEventListener('click', this._handleTriggerClick.bind(this));
       document.addEventListener('click', this._handleDocumentClick.bind(this));
@@ -108,10 +105,10 @@ class Popover {
       this.element.addEventListener('mouseenter', this._handlePopoverMouseEnter.bind(this));
       this.element.addEventListener('mouseleave', this._handlePopoverMouseLeave.bind(this));
     }
-    
+
     window.addEventListener('resize', this._updatePosition.bind(this));
     window.addEventListener('scroll', this._updatePosition.bind(this), { passive: true });
-    
+
     // Also update position periodically to handle any dynamic content changes
     this.updateInterval = window.setInterval(this._updatePosition.bind(this), 200);
   }
@@ -173,11 +170,11 @@ class Popover {
    */
   private _updatePosition(): void {
     if (!this.isOpen || !this.trigger) return;
-    
+
     const triggerRect = this.trigger.getBoundingClientRect();
     const popoverRect = this.element.getBoundingClientRect();
     const offset = this.options.offset || 0;
-    
+
     // If auto positioning is enabled, determine best position
     if (this.options.position === 'auto') {
       this.currentPosition = determineBestPosition(triggerRect);
@@ -191,7 +188,7 @@ class Popover {
         offset
       );
     }
-    
+
     // Calculate position
     const { top, left } = calculatePopoverPosition(
       triggerRect,
@@ -199,15 +196,15 @@ class Popover {
       this.currentPosition,
       offset
     );
-    
+
     // Apply position using absolute positioning to follow when scrolling
     this.element.style.position = 'absolute';
     this.element.style.top = `${top}px`;
     this.element.style.left = `${left}px`;
-    
+
     // Update position class and arrow
     this._setPositionClass();
-    
+
     // Position arrow
     if (this.arrow) {
       positionArrow(this.arrow, this.currentPosition);
@@ -219,17 +216,19 @@ class Popover {
    */
   public open(): void {
     if (this.isOpen) return;
-    
+
     this.element.classList.add(POPOVER.CLASSES.IS_OPEN);
     this.isOpen = true;
-    
+
     // Update position right away
     this._updatePosition();
-    
+
     // Dispatch custom event
-    this.element.dispatchEvent(new CustomEvent('popover:open', { 
-      bubbles: true 
-    }));
+    this.element.dispatchEvent(
+      new CustomEvent('popover:open', {
+        bubbles: true,
+      })
+    );
   }
 
   /**
@@ -237,14 +236,16 @@ class Popover {
    */
   public close(): void {
     if (!this.isOpen) return;
-    
+
     this.element.classList.remove(POPOVER.CLASSES.IS_OPEN);
     this.isOpen = false;
-    
+
     // Dispatch custom event
-    this.element.dispatchEvent(new CustomEvent('popover:close', { 
-      bubbles: true 
-    }));
+    this.element.dispatchEvent(
+      new CustomEvent('popover:close', {
+        bubbles: true,
+      })
+    );
   }
 
   /**
@@ -270,24 +271,24 @@ class Popover {
         this.trigger.removeEventListener('mouseleave', this._handleTriggerMouseLeave);
       }
     }
-    
+
     document.removeEventListener('click', this._handleDocumentClick);
     document.removeEventListener('keydown', this._handleEscapeKey);
-    
+
     this.element.removeEventListener('mouseenter', this._handlePopoverMouseEnter);
     this.element.removeEventListener('mouseleave', this._handlePopoverMouseLeave);
-    
+
     window.removeEventListener('resize', this._updatePosition);
     window.removeEventListener('scroll', this._updatePosition);
-    
+
     if (this.timeout !== null) {
       window.clearTimeout(this.timeout);
     }
-    
+
     if (this.timeoutRef.current !== null) {
       window.clearTimeout(this.timeoutRef.current);
     }
-    
+
     if (this.updateInterval !== null) {
       window.clearInterval(this.updateInterval);
     }
@@ -299,21 +300,31 @@ class Popover {
  */
 const initPopovers = (): void => {
   const popovers = document.querySelectorAll(POPOVER.SELECTORS.POPOVER);
-  
+
   popovers.forEach((element: Element) => {
     const popover = element as HTMLElement;
     // Get configuration from data attributes
-    const position = popover.getAttribute(POPOVER.ATTRIBUTES.POSITION) as PopoverPosition | 'auto' || POPOVER.DEFAULTS.POSITION;
-    const trigger = popover.getAttribute(POPOVER.ATTRIBUTES.TRIGGER) as 'hover' | 'click' || POPOVER.DEFAULTS.TRIGGER;
-    const offset = parseInt(popover.getAttribute('data-popover-offset') || String(POPOVER.DEFAULTS.OFFSET), 10);
-    const delay = parseInt(popover.getAttribute('data-popover-delay') || String(POPOVER.DEFAULTS.DELAY), 10);
-    
+    const position =
+      (popover.getAttribute(POPOVER.ATTRIBUTES.POSITION) as PopoverPosition | 'auto') ||
+      POPOVER.DEFAULTS.POSITION;
+    const trigger =
+      (popover.getAttribute(POPOVER.ATTRIBUTES.TRIGGER) as 'hover' | 'click') ||
+      POPOVER.DEFAULTS.TRIGGER;
+    const offset = parseInt(
+      popover.getAttribute('data-popover-offset') || String(POPOVER.DEFAULTS.OFFSET),
+      10
+    );
+    const delay = parseInt(
+      popover.getAttribute('data-popover-delay') || String(POPOVER.DEFAULTS.DELAY),
+      10
+    );
+
     // Initialize popover
-    new Popover(popover, { 
+    new Popover(popover, {
       position: position as PopoverPosition | 'auto',
       trigger: trigger as 'hover' | 'click',
-      offset, 
-      delay 
+      offset,
+      delay,
     });
   });
 };
@@ -328,4 +339,4 @@ if (typeof document !== 'undefined') {
 }
 
 export default Popover;
-export { initPopovers }; 
+export { initPopovers };