Configuration and Styling

/**
 * Configure the HTML tag name for the root container element
 * @default "div"
 */
contentContainerTagName?: string;

/**
 * Configure the HTML tag name for the trigger element
 * @default "span"
 */
triggerTagName?: string;

/**
 * Pass additional props to the root container element
 * Useful for adding custom IDs, data attributes, or other HTML props
 */
containerElementProps?: object;

/**
 * Pass additional props to the trigger element
 * Useful for adding custom IDs, event handlers, or other HTML props
 */
triggerElementProps?: object;

/**
 * Custom ID for the content element
 * Auto-generated with timestamp if not provided
 */
contentElementId?: string;

// Custom tag names and IDs
<Collapsible
  trigger="Expand"
  contentContainerTagName="section"
  triggerTagName="button"
  contentElementId="my-content-123"
  containerElementProps={{ 
    role: "region",
    "data-testid": "collapsible-section" 
  }}
  triggerElementProps={{ 
    "aria-label": "Toggle content visibility",
    type: "button"
  }}
>
  <p>Content here</p>
</Collapsible>

/**
 * Controls whether the collapsible is open or closed
 * When provided, component becomes controlled
 * @default false
 */
open?: boolean;

/**
 * Disables the trigger interaction
 * Prevents opening/closing when true
 * @default false
 */
triggerDisabled?: boolean;

/**
 * Delays rendering of content until first opened
 * Improves performance for expensive content
 * @default false
 */
lazyRender?: boolean;

/**
 * Adds HTML hidden attribute to content when closed
 * Improves accessibility by hiding content from screen readers
 * @default false
 */
contentHiddenWhenClosed?: boolean;

/**
 * Tab index for the trigger element
 * Controls keyboard navigation order
 */
tabIndex?: number;

// Controlled component with disabled state
const [isOpen, setIsOpen] = useState(false);
const [isDisabled, setIsDisabled] = useState(false);

<Collapsible
  trigger="Controlled Collapsible"
  open={isOpen}
  triggerDisabled={isDisabled}
  lazyRender={true}
  contentHiddenWhenClosed={true}
  tabIndex={0}
  handleTriggerClick={() => setIsOpen(!isOpen)}
>
  <ExpensiveComponent />
</Collapsible>

/**
 * Base CSS class prefix for all generated classes
 * @default "Collapsible"
 */
classParentString?: string;

/**
 * CSS class applied to root element when closed
 */
className?: string;

/**
 * CSS class applied to root element when open
 */
openedClassName?: string;

/**
 * CSS class applied to trigger element when closed
 */
triggerClassName?: string;

/**
 * CSS class applied to trigger element when open
 */
triggerOpenedClassName?: string;

/**
 * CSS class applied to outer content container
 */
contentOuterClassName?: string;

/**
 * CSS class applied to inner content container
 */
contentInnerClassName?: string;

/**
 * Inline styles applied to trigger element
 */
triggerStyle?: null | React.CSSProperties;

// Custom class configuration
<Collapsible
  trigger="Styled Collapsible"
  classParentString="MyCollapsible"
  className="collapsed-state"
  openedClassName="expanded-state"
  triggerClassName="my-trigger"
  triggerOpenedClassName="my-trigger--open"
  contentOuterClassName="my-content-outer"
  contentInnerClassName="my-content-inner"
  triggerStyle={{ fontWeight: 'bold', color: '#007acc' }}
>
  <div>Styled content</div>
</Collapsible>

// Results in classes like:
// .MyCollapsible.collapsed-state (when closed)
// .MyCollapsible.expanded-state (when open)
// .MyCollapsible__trigger.my-trigger.is-closed
// .MyCollapsible__contentOuter.my-content-outer

/**
 * Alternative trigger content displayed when component is open
 * Useful for "Show less" / "Show more" patterns
 */
triggerWhenOpen?: string | React.ReactElement<any>;

/**
 * Non-clickable element rendered next to the trigger
 * Can be a string, React element, or function that returns a React element
 * Useful for icons, badges, or additional information
 * @default null
 */
triggerSibling?: string | React.ReactElement<any> | (() => React.ReactElement<any>);

/**
 * Unique identifier when used in accordion patterns
 * Passed to handleTriggerClick callback
 */
accordionPosition?: string | number;

// Dynamic trigger with sibling element
<Collapsible
  trigger="Show details"
  triggerWhenOpen="Hide details"
  triggerSibling={<span className="icon">📄</span>}
  accordionPosition="section-1"
>
  <div>Detailed information here</div>
</Collapsible>

// Function-based trigger sibling
<Collapsible
  trigger="Show details"
  triggerSibling={() => <span className="dynamic-icon">{isLoading ? '⏳' : '📄'}</span>}
>
  <div>Content with dynamic sibling</div>
</Collapsible>

// Accordion pattern
const accordionItems = [
  { id: 'item1', title: 'First Item', content: 'Content 1' },
  { id: 'item2', title: 'Second Item', content: 'Content 2' }
];

{accordionItems.map((item, index) => (
  <Collapsible
    key={item.id}
    trigger={item.title}
    accordionPosition={index}
    handleTriggerClick={(position) => {
      console.log(`Clicked accordion item at position: ${position}`);
    }}
  >
    <div>{item.content}</div>
  </Collapsible>
))}