{"version":3,"file":"index106.cjs","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":["useState","useFocusHandling","useEffect","jsxs","styles","jsx","BadgeNotification"],"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,IAAIA,MAAAA,SAAS,KAAK;AAChD,QAAM,CAAC,OAAO,QAAQ,IAAIA,MAAAA,SAAS,aAAa;AAChD,QAAM,CAAC,WAAW,YAAY,IAAIA,MAAAA,SAAS,IAAI;AAE/C,QAAM,EAAE,aAAa,WAAW,IAAIC,kCAAiB;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;AAEAC,QAAAA,UAAU,MAAM;AACd,aAAS,aAAa;AAAA,EAAA,GACrB,CAAC,aAAa,CAAC;AAElBA,QAAAA,UAAU,MAAM;AACV,QAAA,cAAc,eAAe,IAAI;AACnC,mBAAa,IAAI;AAAA,IAAA;AAAA,EACnB,GACC,CAAC,UAAU,CAAC;AAGb,SAAAC,2BAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAW;AAAA,QACTC,yBAAAA,QAAO;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,QAACC,2BAAAA,IAAA,OAAA,EAAI,WAAWD,yBAAO,QAAA,OACpB,oBAAU,aAAa,gBAAgB,OAAO,KACjD,CAAA;AAAA,QACCC,2BAAA,IAAA,OAAA,EAAI,WAAWD,yBAAA,QAAO,OACpB,UACH,OAAA;AAAA,QACC,aAAa,eAAe,MAC3BC,2BAAAA,IAAC,SAAI,WAAWD,yBAAAA,QAAO,mBACrB,UAAAC,2BAAA,IAACC,MAAkB,mBAAA,EAAA,MAAK,MAAK,OAAO,WAAY,CAAA,GAClD;AAAA,QAED,aAAaD,2BAAA,IAAC,OAAI,EAAA,WAAWD,yBAAAA,QAAO,QAAS,CAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EAChD;AAEJ;;"}