{"version":3,"file":"index106.mjs","sources":["../src/atoms/menu/bottom/index.tsx"],"sourcesContent":["import { FunctionComponent, ReactNode, useEffect, useState } from \"react\";\nimport styles from \"./MenuBottomBarAtom.module.css\";\nimport { useFocusHandling } from \"../../../hooks/useFocusHandling\";\nimport { BadgeNotification } from \"@components\";\n\nexport type MenuBottomBarBaseType = {\n  className?: string;\n\n  /** Variant props */\n  state?: \"default\" | \"selected\";\n  icon: ReactNode;\n  iconSelected?: ReactNode;\n  label?: string;\n  badgeLabel?: string;\n  onClick?: () => void;\n};\n\nconst MenuBottomBarBase: FunctionComponent<MenuBottomBarBaseType> = ({\n  className = \"\",\n  state: externalState = \"default\",\n  icon,\n  iconSelected,\n  label = \"\",\n  badgeLabel = \"\",\n  onClick,\n}) => {\n  const [highlight, setHighlight] = useState(false);\n  const [state, setState] = useState(externalState);\n  const [showBadge, setShowBadge] = useState(true);\n\n  const { handleFocus, handleBlur } = useFocusHandling({\n    isDisabled: false,\n    setHighlight,\n    onEnter: () => {\n      handleClick();\n    },\n  });\n\n  const handleClick = () => {\n    setShowBadge(false);\n    setState(\"selected\");\n    onClick?.();\n  };\n\n  useEffect(() => {\n    setState(externalState);\n  }, [externalState]);\n\n  useEffect(() => {\n    if (badgeLabel && badgeLabel !== \"\") {\n      setShowBadge(true);\n    }\n  }, [badgeLabel]);\n\n  return (\n    <div\n      className={[\n        styles.root,\n        className,\n        \"quill-ui-next-atom quill-ui-next-pointer\",\n      ].join(\" \")}\n      data-state={state}\n      data-label={label !== \"\" ? \"yes\" : \"no\"}\n      tabIndex={0}\n      onFocus={handleFocus}\n      onBlur={handleBlur}\n      onClick={handleClick}\n    >\n      <div className={styles.icon1}>\n        {state === \"selected\" ? iconSelected || icon : icon}\n      </div>\n      <div className={styles.label}>\n        {label}\n      </div>\n      {showBadge && badgeLabel !== \"\" && (\n        <div className={styles.badgeNotification}>\n          <BadgeNotification size=\"sm\" label={badgeLabel} />\n        </div>\n      )}\n      {highlight && <div className={styles.bgFocus} />}\n    </div>\n  );\n};\n\nexport default MenuBottomBarBase;\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAiBA,MAAM,oBAA8D,CAAC;AAAA,EACnE,YAAY;AAAA,EACZ,OAAO,gBAAgB;AAAA,EACvB;AAAA,EACA;AAAA,EACA,QAAQ;AAAA,EACR,aAAa;AAAA,EACb;AACF,MAAM;AACJ,QAAM,CAAC,WAAW,YAAY,IAAI,SAAS,KAAK;AAChD,QAAM,CAAC,OAAO,QAAQ,IAAI,SAAS,aAAa;AAChD,QAAM,CAAC,WAAW,YAAY,IAAI,SAAS,IAAI;AAE/C,QAAM,EAAE,aAAa,WAAW,IAAI,iBAAiB;AAAA,IACnD,YAAY;AAAA,IACZ;AAAA,IACA,SAAS,MAAM;AACD,kBAAA;AAAA,IAAA;AAAA,EACd,CACD;AAED,QAAM,cAAc,MAAM;AACxB,iBAAa,KAAK;AAClB,aAAS,UAAU;AACT;AAAA,EACZ;AAEA,YAAU,MAAM;AACd,aAAS,aAAa;AAAA,EAAA,GACrB,CAAC,aAAa,CAAC;AAElB,YAAU,MAAM;AACV,QAAA,cAAc,eAAe,IAAI;AACnC,mBAAa,IAAI;AAAA,IAAA;AAAA,EACnB,GACC,CAAC,UAAU,CAAC;AAGb,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAW;AAAA,QACT,OAAO;AAAA,QACP;AAAA,QACA;AAAA,MAAA,EACA,KAAK,GAAG;AAAA,MACV,cAAY;AAAA,MACZ,cAAY,UAAU,KAAK,QAAQ;AAAA,MACnC,UAAU;AAAA,MACV,SAAS;AAAA,MACT,QAAQ;AAAA,MACR,SAAS;AAAA,MAET,UAAA;AAAA,QAAC,oBAAA,OAAA,EAAI,WAAW,OAAO,OACpB,oBAAU,aAAa,gBAAgB,OAAO,KACjD,CAAA;AAAA,QACC,oBAAA,OAAA,EAAI,WAAW,OAAO,OACpB,UACH,OAAA;AAAA,QACC,aAAa,eAAe,MAC3B,oBAAC,SAAI,WAAW,OAAO,mBACrB,UAAA,oBAAC,mBAAkB,EAAA,MAAK,MAAK,OAAO,WAAY,CAAA,GAClD;AAAA,QAED,aAAa,oBAAC,OAAI,EAAA,WAAW,OAAO,QAAS,CAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EAChD;AAEJ;"}