@kiwicom/orbit-components/lib/ListChoice/index.js

Orbit-components is a React component library which provides developers with the easiest possible way of building Kiwi.com’s products.

"use strict";
"use client";

var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
exports.__esModule = true;
exports.default = void 0;
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var React = _interopRequireWildcard(require("react"));
var _clsx = _interopRequireDefault(require("clsx"));
var _Heading = _interopRequireDefault(require("../Heading"));
var _Checkbox = _interopRequireDefault(require("../Checkbox"));
var _Text = _interopRequireDefault(require("../Text"));
var _handleKeyDown = _interopRequireDefault(require("../utils/handleKeyDown"));
const ListChoice = /*#__PURE__*/React.forwardRef(({
  dataTest,
  id,
  icon,
  action,
  title,
  description,
  selectable,
  role,
  onClick,
  tabIndex = 0,
  selected,
  disabled
}, ref) => {
  const conditionalProps = {
    ...(selectable ? {
      "aria-checked": selected
    } : null)
  };
  return /*#__PURE__*/React.createElement("div", (0, _extends2.default)({
    className: (0, _clsx.default)("orbit-list-choice", "py-sm px-md box-border flex w-full items-center", "border-b-cloud-normal bg-white-normal border-b-solid border-b", "duration-fast transition-[background-color] ease-in-out", disabled ? "cursor-not-allowed" : "hover:bg-cloud-light cursor-pointer", "hover:outline-none [&_button]:hover:bg-transparent", "[&_.orbit-checkbox-label]:w-auto"),
    onClick: !disabled ? onClick : undefined,
    "data-test": dataTest,
    id: id,
    ref: ref,
    onKeyDown: !disabled ? (0, _handleKeyDown.default)(onClick) : undefined,
    tabIndex: tabIndex || disabled ? -1 : 0,
    "data-title": title,
    "aria-disabled": disabled,
    "aria-selected": selected,
    role: role || (selectable ? "checkbox" : "button")
  }, conditionalProps), icon && /*#__PURE__*/React.createElement("div", {
    className: (0, _clsx.default)("me-xs h-icon-medium flex flex-none items-center self-start", "[&_svg]:w-icon-medium [&_svg]:h-icon-medium [&_svg]:text-icon-primary-foreground [&_svg]:self-center", "[&_svg]:duration-fast [&_svg]:transition-[color] [&_svg]:ease-in-out")
  }, icon), /*#__PURE__*/React.createElement("div", {
    className: "pe-sm flex w-full flex-col justify-center"
  }, /*#__PURE__*/React.createElement(_Heading.default, {
    type: "title4"
  }, title), description && /*#__PURE__*/React.createElement(_Text.default, {
    type: "secondary",
    size: "small"
  }, description)), selectable && /*#__PURE__*/React.createElement(_Checkbox.default, {
    checked: selected,
    readOnly: true,
    disabled: disabled,
    tabIndex: -1
  }), !selectable && action);
});
ListChoice.displayName = "ListChoice";
var _default = ListChoice;
exports.default = _default;