createDisclosureState

Track open-state metadata, dynamic content height measurements, and data attributes for collapsible panels.

createDisclosureState manages state, content height measurements, and DOM data attributes for expandable/collapsible components like Collapsible and Accordion.

Import#

import { createDisclosureState } from 'moraine/utils'

Signature#

function createDisclosureState(options: CreateDisclosureStateOptions): {
  readonly contentHeight: Accessor<number>
  readonly dataAttrs: Accessor<{
    'data-closed'?: string
    'data-disabled'?: string
    'data-expanded'?: string
  }>
  readonly disabled: Accessor<boolean>
  readonly setContentElement: (element: HTMLElement | undefined) => void
  readonly registerElement: (element: HTMLElement) => () => void
}

interface CreateDisclosureStateOptions {
  disabled?: Accessor<boolean>
  open: Accessor<boolean>
}

Usage Example#

src/MyCollapsible.tsx

import { createSignal } from 'solid-js'
import { createDisclosureState } from 'moraine/utils'

export function MyCollapsible() {
  const [open, setOpen] = createSignal(false)
  const disclosure = createDisclosureState({ open })

  return (
    <div>
      <button onClick={() => setOpen(!open())}>Toggle Panel</button>

      <div
        {...disclosure.dataAttrs()}
        ref={disclosure.setContentElement}
        style={{
          '--mo-collapsible-content-height': `${disclosure.contentHeight()}px`,
        }}
        class="overflow-hidden transition-[height] duration-200"
      >
        <div class="p-4 bg-muted rounded-md">Collapsible panel content dynamically measured!</div>
      </div>
    </div>
  )
}

Features#

Height Tracking: Automatically attaches a ResizeObserver to the content element to measure scrollHeight accurately even when children change dynamically.
Data Attributes: Supplies data-expanded, data-closed, and data-disabled to drive CSS animations and transitions cleanly.