{"version":3,"file":"index74.mjs","sources":["../src/atoms/pagination/index.tsx"],"sourcesContent":["import { FunctionComponent, ReactNode, useRef, useState } from \"react\";\nimport buttonStyles from \"./styles/PaginationButtonAtom.module.css\";\nimport pageStyles from \"./styles/PaginationPageAtom.module.css\";\nimport bulletStyles from \"./styles/PaginationBulletAtom.module.css\";\nimport { StandalonePlaceholderRegularIcon } from \"@deriv/quill-icons\";\n\nimport { useFocusHandling } from \"../../hooks/useFocusHandling\";\n\nconst paginationAtomStyles = {\n  button: buttonStyles,\n  page: pageStyles,\n  bullet: bulletStyles,\n} as const;\n\nexport type PaginationButtonAtomType = {\n  className?: string;\n  label?: string | ReactNode;\n  /** Variant props */\n  state?: \"default\" | \"disabled\" | \"selected\";\n\n  /** Custom props */\n  variant?: \"button\" | \"page\" | \"bullet\";\n  icon?: ReactNode;\n  isSelected?: boolean;\n  onClick?: () => void;\n};\n\nconst PaginationAtom: FunctionComponent<PaginationButtonAtomType> = ({\n  className = \"\",\n  state = \"default\",\n  variant = \"button\",\n  icon,\n  label = \"0\",\n  onClick,\n}) => {\n  const styles = paginationAtomStyles[variant];\n  const paginationAtomId = `pagination-atom-${variant}-${state}`;\n  const IconComponent = icon || (\n    <StandalonePlaceholderRegularIcon iconSize=\"md\" />\n  );\n\n  const buttonRef = useRef<HTMLDivElement>(null);\n  const [highlight, setHighlight] = useState(false);\n\n  const handleClick = () => {\n    if (state === \"disabled\") return;\n    onClick?.();\n  };\n\n  const { handleFocus, handleBlur } = useFocusHandling({\n    isDisabled: state === \"disabled\",\n    setHighlight,\n    onEnter: () => {\n      handleClick();\n    },\n  });\n\n  return (\n    <div\n      ref={buttonRef}\n      className={[\n        styles.root,\n        \"quill-ui-next-atom\",\n        \"quill-ui-next-no-select\",\n        state !== \"disabled\" && \"quill-ui-next-pointer\",\n        className,\n      ].join(\" \")}\n      data-id={paginationAtomId}\n      data-state={state}\n      tabIndex={state !== \"disabled\" ? 0 : -1}\n      onFocus={handleFocus}\n      onBlur={handleBlur}\n      onClick={handleClick}\n    >\n      {variant === \"button\" && (\n        <>\n          <div className={styles.customIcon}>{IconComponent}</div>\n          <div className={styles.hiddenLabel}></div>\n        </>\n      )}\n\n      {variant === \"page\" && <div className={styles.label}>{label}</div>}\n\n      {highlight && <div className={styles.focus} />}\n    </div>\n  );\n};\n\nPaginationAtom.displayName = \"PaginationAtom\";\n\nexport default PaginationAtom;\n"],"names":[],"mappings":";;;;;;;AAQA,MAAM,uBAAuB;AAAA,EAC3B,QAAQ;AAAA,EACR,MAAM;AAAA,EACN,QAAQ;AACV;AAeA,MAAM,iBAA8D,CAAC;AAAA,EACnE,YAAY;AAAA,EACZ,QAAQ;AAAA,EACR,UAAU;AAAA,EACV;AAAA,EACA,QAAQ;AAAA,EACR;AACF,MAAM;AACE,QAAA,SAAS,qBAAqB,OAAO;AAC3C,QAAM,mBAAmB,mBAAmB,OAAO,IAAI,KAAK;AAC5D,QAAM,gBAAgB,QACnB,oBAAA,kCAAA,EAAiC,UAAS,MAAK;AAG5C,QAAA,YAAY,OAAuB,IAAI;AAC7C,QAAM,CAAC,WAAW,YAAY,IAAI,SAAS,KAAK;AAEhD,QAAM,cAAc,MAAM;AACxB,QAAI,UAAU,WAAY;AAChB;AAAA,EACZ;AAEA,QAAM,EAAE,aAAa,WAAW,IAAI,iBAAiB;AAAA,IACnD,YAAY,UAAU;AAAA,IACtB;AAAA,IACA,SAAS,MAAM;AACD,kBAAA;AAAA,IAAA;AAAA,EACd,CACD;AAGC,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,KAAK;AAAA,MACL,WAAW;AAAA,QACT,OAAO;AAAA,QACP;AAAA,QACA;AAAA,QACA,UAAU,cAAc;AAAA,QACxB;AAAA,MAAA,EACA,KAAK,GAAG;AAAA,MACV,WAAS;AAAA,MACT,cAAY;AAAA,MACZ,UAAU,UAAU,aAAa,IAAI;AAAA,MACrC,SAAS;AAAA,MACT,QAAQ;AAAA,MACR,SAAS;AAAA,MAER,UAAA;AAAA,QAAA,YAAY,YAET,qBAAA,UAAA,EAAA,UAAA;AAAA,UAAA,oBAAC,OAAI,EAAA,WAAW,OAAO,YAAa,UAAc,eAAA;AAAA,UACjD,oBAAA,OAAA,EAAI,WAAW,OAAO,YAAa,CAAA;AAAA,QAAA,GACtC;AAAA,QAGD,YAAY,UAAU,oBAAC,SAAI,WAAW,OAAO,OAAQ,UAAM,OAAA;AAAA,QAE3D,aAAa,oBAAC,OAAI,EAAA,WAAW,OAAO,MAAO,CAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EAC9C;AAEJ;AAEA,eAAe,cAAc;"}