{"version":3,"file":"index13.mjs","sources":["../src/components/accordion/index.tsx"],"sourcesContent":["import {\n  FunctionComponent,\n  ReactNode,\n  useState,\n  PropsWithChildren,\n  useEffect,\n} from \"react\";\nimport styles from \"./AccordionDefault.module.css\";\nimport { LabelPairedChevronDownMdRegularIcon } from \"@deriv/quill-icons\";\nimport { useFocusHandling } from \"../../hooks/useFocusHandling\";\n\nexport type AccordionType = {\n  className?: string;\n  title?: string;\n  subtitle?: string;\n  customIcon?: ReactNode;\n  showFocusRing?: boolean;\n\n  /** Variant props */\n  expand?: \"off\" | \"on\";\n  size?: \"xs\" | \"sm\" | \"md\" | \"lg\";\n  state?: \"default\" | \"disabled\";\n  type?: \"outline\" | \"fill\" | \"elevate\" | \"flush\";\n};\n\nexport const Accordion: FunctionComponent<PropsWithChildren<AccordionType>> = ({\n  className = \"\",\n  expand = \"off\",\n  size = \"xs\",\n  state = \"default\",\n  type = \"outline\",\n  title = \"Title\",\n  subtitle,\n  customIcon,\n  showFocusRing = false,\n  children,\n}) => {\n  const [isExpanded, setIsExpanded] = useState(expand === \"on\");\n  const [focus, setFocus] = useState(showFocusRing);\n  const accordionId = `quill-accordion-${size}-${type}-${state}`;\n  const isClickable = state !== \"disabled\";\n\n  const handleToggle = () => {\n    if (isClickable) {\n      setIsExpanded(!isExpanded);\n    }\n  };\n\n  const { handleFocus, handleBlur } = useFocusHandling({\n    isDisabled: !isClickable,\n    setHighlight: setFocus,\n    onEnter: () => handleToggle(),\n  });\n\n  useEffect(() => {\n    setIsExpanded(expand === \"on\");\n  }, [expand]);\n\n  return (\n    <div\n      className={[styles.root, className].join(\" \")}\n      data-expand={isExpanded ? \"on\" : \"off\"}\n      data-size={size}\n      data-state={state}\n      data-type={type}\n      data-id={accordionId}\n    >\n      <div\n        className={[\n          styles.header,\n          isClickable ? \"quill-ui-next-pointer\" : \"\",\n          \"quill-ui-next-component\",\n        ].join(\" \")}\n        onClick={handleToggle}\n        role={isClickable ? \"button\" : undefined}\n        tabIndex={isClickable ? 0 : undefined}\n        onFocus={handleFocus}\n        onBlur={handleBlur}\n      >\n        {focus && <div className={styles.bgFocus} />}\n        {customIcon && (\n          <div className={styles.placeholderIcon}>\n            <div className={`${styles.icon1} accordion-icon`}>{customIcon}</div>\n          </div>\n        )}\n        <div className={styles.titleSubtitle}>\n          <b className={styles.title}>{title}</b>\n          {subtitle && <div className={styles.subtitle}>{subtitle}</div>}\n        </div>\n        <div className={styles.iconChevron}>\n          <div className={`${styles.icon2} accordion-icon`}>\n            <LabelPairedChevronDownMdRegularIcon\n              className={`quill-ui-next-rotatable ${\n                isExpanded && \"quill-ui-next-rotate\"\n              }`}\n            />\n          </div>\n        </div>\n      </div>\n      {children && (\n        <div className={styles.body}>\n          <div\n            className={`${styles.bodyContent} quill-ui-next-accordion-content`}\n          >\n            {children}\n          </div>\n        </div>\n      )}\n    </div>\n  );\n};\n\nexport default Accordion;\n"],"names":[],"mappings":";;;;;AAyBO,MAAM,YAAiE,CAAC;AAAA,EAC7E,YAAY;AAAA,EACZ,SAAS;AAAA,EACT,OAAO;AAAA,EACP,QAAQ;AAAA,EACR,OAAO;AAAA,EACP,QAAQ;AAAA,EACR;AAAA,EACA;AAAA,EACA,gBAAgB;AAAA,EAChB;AACF,MAAM;AACJ,QAAM,CAAC,YAAY,aAAa,IAAI,SAAS,WAAW,IAAI;AAC5D,QAAM,CAAC,OAAO,QAAQ,IAAI,SAAS,aAAa;AAChD,QAAM,cAAc,mBAAmB,IAAI,IAAI,IAAI,IAAI,KAAK;AAC5D,QAAM,cAAc,UAAU;AAE9B,QAAM,eAAe,MAAM;AACzB,QAAI,aAAa;AACf,oBAAc,CAAC,UAAU;AAAA,IAAA;AAAA,EAE7B;AAEA,QAAM,EAAE,aAAa,WAAW,IAAI,iBAAiB;AAAA,IACnD,YAAY,CAAC;AAAA,IACb,cAAc;AAAA,IACd,SAAS,MAAM,aAAa;AAAA,EAAA,CAC7B;AAED,YAAU,MAAM;AACd,kBAAc,WAAW,IAAI;AAAA,EAAA,GAC5B,CAAC,MAAM,CAAC;AAGT,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAW,CAAC,OAAO,MAAM,SAAS,EAAE,KAAK,GAAG;AAAA,MAC5C,eAAa,aAAa,OAAO;AAAA,MACjC,aAAW;AAAA,MACX,cAAY;AAAA,MACZ,aAAW;AAAA,MACX,WAAS;AAAA,MAET,UAAA;AAAA,QAAA;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAW;AAAA,cACT,OAAO;AAAA,cACP,cAAc,0BAA0B;AAAA,cACxC;AAAA,YAAA,EACA,KAAK,GAAG;AAAA,YACV,SAAS;AAAA,YACT,MAAM,cAAc,WAAW;AAAA,YAC/B,UAAU,cAAc,IAAI;AAAA,YAC5B,SAAS;AAAA,YACT,QAAQ;AAAA,YAEP,UAAA;AAAA,cAAA,SAAU,oBAAA,OAAA,EAAI,WAAW,OAAO,SAAS;AAAA,cACzC,cACC,oBAAC,OAAI,EAAA,WAAW,OAAO,iBACrB,UAAA,oBAAC,OAAI,EAAA,WAAW,GAAG,OAAO,KAAK,mBAAoB,qBAAW,CAAA,GAChE;AAAA,cAED,qBAAA,OAAA,EAAI,WAAW,OAAO,eACrB,UAAA;AAAA,gBAAA,oBAAC,KAAE,EAAA,WAAW,OAAO,OAAQ,UAAM,OAAA;AAAA,gBAClC,YAAa,oBAAA,OAAA,EAAI,WAAW,OAAO,UAAW,UAAS,SAAA,CAAA;AAAA,cAAA,GAC1D;AAAA,cACA,oBAAC,OAAI,EAAA,WAAW,OAAO,aACrB,UAAC,oBAAA,OAAA,EAAI,WAAW,GAAG,OAAO,KAAK,mBAC7B,UAAA;AAAA,gBAAC;AAAA,gBAAA;AAAA,kBACC,WAAW,2BACT,cAAc,sBAChB;AAAA,gBAAA;AAAA,iBAEJ,EACF,CAAA;AAAA,YAAA;AAAA,UAAA;AAAA,QACF;AAAA,QACC,YACC,oBAAC,OAAI,EAAA,WAAW,OAAO,MACrB,UAAA;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAW,GAAG,OAAO,WAAW;AAAA,YAE/B;AAAA,UAAA;AAAA,QAAA,EAEL,CAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EAEJ;AAEJ;"}