{"version":3,"file":"index95.mjs","sources":["../src/atoms/dropdown/item/index.tsx"],"sourcesContent":["import { forwardRef } from \"react\";\nimport { ReactNode, useState } from \"react\";\nimport textStyles from \"./styles/DropdownItemTextAtom.module.css\";\nimport checkboxStyles from \"./styles/DropdownItemCheckboxAtom.module.css\";\nimport { useFocusHandling } from \"../../../hooks/useFocusHandling\";\nimport { DropdownItemType } from \"../container\";\nimport {\n  LabelPairedSquareCheckSmFillIcon,\n  LabelPairedSquareSmBoldIcon,\n} from \"@deriv/quill-icons\";\n\nconst dropdownItemBaseStyles = {\n  text: textStyles,\n  checkbox: checkboxStyles,\n} as const;\n\nexport type DropdownItemAtomType = {\n  className?: string;\n  label?: string;\n  showFocusRing?: boolean;\n\n  /** Variant props */\n  selected?: boolean;\n  size?: \"sm\" | \"md\";\n  state?: \"default\" | \"disabled\";\n  textAlignment?: \"left\" | \"center\";\n  width?: \"fill\" | \"fit-content\";\n\n  /** Custom props */\n  type?: \"text\" | \"checkbox\";\n  onClick?: (e: DropdownItemType) => void;\n  iconLeft?: ReactNode;\n  iconRight?: ReactNode;\n  value?: string;\n  itemKey?: number;\n  noFocus?: boolean;\n  ref?: React.Ref<HTMLDivElement>;\n};\n\nexport const DropdownItemAtom = forwardRef<\n  HTMLDivElement,\n  DropdownItemAtomType\n>(\n  (\n    {\n      className = \"\",\n      selected = false,\n      size = \"sm\",\n      state = \"default\",\n      width = \"fill\",\n      textAlignment = \"left\",\n      label = \"Item\",\n      showFocusRing = false,\n      type = \"text\",\n      iconLeft,\n      iconRight,\n      itemKey = 0,\n      onClick,\n      value = \"\",\n      noFocus = false,\n    },\n    ref\n  ) => {\n    const styles = dropdownItemBaseStyles[type];\n    const itemId = `quill-atom-dropdown-item-${type}-${state}-${size}-selected-${selected}`;\n    const [highlight, setHighlight] = useState(showFocusRing);\n\n    const handleClick = () => {\n      if (onClick) {\n        if (type === \"text\" && selected) {\n          onClick({ label: \"\", value: \"\" });\n          return false;\n        }\n\n        onClick({ label, value, iconLeft, iconRight });\n      }\n    };\n\n    const { handleFocus, handleBlur } = useFocusHandling({\n      isDisabled: state === \"disabled\",\n      setHighlight,\n      onEnter: handleClick,\n    });\n\n    const checkBoxIcon = selected ? (\n      <LabelPairedSquareCheckSmFillIcon />\n    ) : (\n      <LabelPairedSquareSmBoldIcon />\n    );\n\n    return (\n      <div\n        ref={ref}\n        className={[\n          styles.root,\n          className,\n          \"quill-ui-next-atom\",\n          \"quill-ui-next-no-select\",\n          state !== \"disabled\" && \"quill-ui-next-pointer\",\n        ].join(\" \")}\n        data-width={width}\n        data-value={value}\n        data-select={selected}\n        data-id={itemId}\n        data-size={size}\n        data-state={state}\n        data-text-alignment={textAlignment}\n        data-item-key={itemKey}\n        data-item-label={label}\n        data-item-value={value}\n        tabIndex={state !== \"disabled\" && !noFocus ? 0 : -1}\n        onFocus={handleFocus}\n        onBlur={handleBlur}\n        onClick={handleClick}\n      >\n        {type === \"text\" && iconLeft && (\n          <div className={styles.containerIconLeft}>{iconLeft}</div>\n        )}\n\n        {type === \"checkbox\" && checkBoxIcon && (\n          <div className={styles.iconCheck}>{checkBoxIcon}</div>\n        )}\n\n        <div className={styles.item}>{label}</div>\n\n        {iconRight && (\n          <div className={styles.containerIconRight}>{iconRight}</div>\n        )}\n        {highlight && <div className={styles.bgFocus} />}\n      </div>\n    );\n  }\n);\n\nexport default DropdownItemAtom;\n"],"names":[],"mappings":";;;;;;AAWA,MAAM,yBAAyB;AAAA,EAC7B,MAAM;AAAA,EACN,UAAU;AACZ;AAyBO,MAAM,mBAAmB;AAAA,EAI9B,CACE;AAAA,IACE,YAAY;AAAA,IACZ,WAAW;AAAA,IACX,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,QAAQ;AAAA,IACR,gBAAgB;AAAA,IAChB,QAAQ;AAAA,IACR,gBAAgB;AAAA,IAChB,OAAO;AAAA,IACP;AAAA,IACA;AAAA,IACA,UAAU;AAAA,IACV;AAAA,IACA,QAAQ;AAAA,IACR,UAAU;AAAA,KAEZ,QACG;AACG,UAAA,SAAS,uBAAuB,IAAI;AACpC,UAAA,SAAS,4BAA4B,IAAI,IAAI,KAAK,IAAI,IAAI,aAAa,QAAQ;AACrF,UAAM,CAAC,WAAW,YAAY,IAAI,SAAS,aAAa;AAExD,UAAM,cAAc,MAAM;AACxB,UAAI,SAAS;AACP,YAAA,SAAS,UAAU,UAAU;AAC/B,kBAAQ,EAAE,OAAO,IAAI,OAAO,IAAI;AACzB,iBAAA;AAAA,QAAA;AAGT,gBAAQ,EAAE,OAAO,OAAO,UAAU,WAAW;AAAA,MAAA;AAAA,IAEjD;AAEA,UAAM,EAAE,aAAa,WAAW,IAAI,iBAAiB;AAAA,MACnD,YAAY,UAAU;AAAA,MACtB;AAAA,MACA,SAAS;AAAA,IAAA,CACV;AAED,UAAM,eAAe,WACnB,oBAAC,kCAAiC,CAAA,CAAA,wBAEjC,6BAA4B,EAAA;AAI7B,WAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,WAAW;AAAA,UACT,OAAO;AAAA,UACP;AAAA,UACA;AAAA,UACA;AAAA,UACA,UAAU,cAAc;AAAA,QAAA,EACxB,KAAK,GAAG;AAAA,QACV,cAAY;AAAA,QACZ,cAAY;AAAA,QACZ,eAAa;AAAA,QACb,WAAS;AAAA,QACT,aAAW;AAAA,QACX,cAAY;AAAA,QACZ,uBAAqB;AAAA,QACrB,iBAAe;AAAA,QACf,mBAAiB;AAAA,QACjB,mBAAiB;AAAA,QACjB,UAAU,UAAU,cAAc,CAAC,UAAU,IAAI;AAAA,QACjD,SAAS;AAAA,QACT,QAAQ;AAAA,QACR,SAAS;AAAA,QAER,UAAA;AAAA,UAAA,SAAS,UAAU,YAClB,oBAAC,SAAI,WAAW,OAAO,mBAAoB,UAAS,SAAA,CAAA;AAAA,UAGrD,SAAS,cAAc,gBACtB,oBAAC,SAAI,WAAW,OAAO,WAAY,UAAa,aAAA,CAAA;AAAA,UAGjD,oBAAA,OAAA,EAAI,WAAW,OAAO,MAAO,UAAM,OAAA;AAAA,UAEnC,aACE,oBAAA,OAAA,EAAI,WAAW,OAAO,oBAAqB,UAAU,WAAA;AAAA,UAEvD,aAAa,oBAAC,OAAI,EAAA,WAAW,OAAO,QAAS,CAAA;AAAA,QAAA;AAAA,MAAA;AAAA,IAChD;AAAA,EAAA;AAGN;"}