@kiwicom/orbit-components/es/ChoiceGroup/index.js

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

"use client";

import * as React from "react";
import cx from "clsx";
import Heading from "../Heading";
import Stack from "../Stack";
import { LABEL_SIZES } from "./consts";
import Feedback from "./components/Feedback";
import FilterWrapper from "./components/FilterWrapper";
import useRandomId from "../hooks/useRandomId";
import useTheme from "../hooks/useTheme";
const getHeadingSize = size => {
  const SIZES = {
    [LABEL_SIZES.NORMAL]: "title3",
    [LABEL_SIZES.LARGE]: "title2"
  };
  return SIZES[size];
};
const ItemContainer = ({
  filter,
  itemProps,
  onOnlySelection,
  onlySelectionText
}) => ({
  children
}) => {
  return !filter ? ( /*#__PURE__*/React.cloneElement(React.Children.only(children), itemProps)) : /*#__PURE__*/React.createElement(FilterWrapper, {
    child: React.Children.only(children),
    onOnlySelection: onOnlySelection,
    onlySelectionText: onlySelectionText
  }, /*#__PURE__*/React.cloneElement(React.Children.only(children), itemProps));
};
const ChoiceGroup = ({
  dataTest,
  id,
  label,
  labelSize = LABEL_SIZES.NORMAL,
  labelAs = "div",
  error,
  children,
  filter,
  onOnlySelection,
  onlySelectionText,
  onChange,
  ref
}) => {
  const groupID = useRandomId();
  const theme = useTheme();
  const handleChange = ev => {
    if (onChange) {
      onChange(ev);
    }
  };
  const itemProps = {
    onChange: handleChange,
    hasError: Boolean(error)
  };
  return /*#__PURE__*/React.createElement("div", {
    ref: ref,
    "data-test": dataTest,
    id: id,
    className: cx("flex w-full flex-col", "[&_.orbit-choice-group-feedback]:mt-200 [&_.orbit-choice-group-feedback]:relative [&_.orbit-choice-group-feedback]:top-[initial]")
  }, label && /*#__PURE__*/React.createElement(Heading, {
    id: groupID,
    type: getHeadingSize(labelSize),
    as: labelAs,
    role: undefined,
    spaceAfter: "medium"
  }, label), /*#__PURE__*/React.createElement("div", {
    "aria-labelledby": label ? groupID : undefined,
    role: "group"
  }, typeof children === "function" ? children({
    Container: "div",
    Item: ItemContainer({
      filter,
      onOnlySelection,
      onlySelectionText,
      itemProps
    }),
    spacing: filter ? "0px" : theme.orbit.space200
  }) : /*#__PURE__*/React.createElement(Stack, {
    direction: "column",
    spacing: filter ? "none" : "200"
  }, React.Children.map(children, child => {
    if (! /*#__PURE__*/React.isValidElement(child)) return null;
    return !filter ? ( /*#__PURE__*/React.cloneElement(child, itemProps)) : /*#__PURE__*/React.createElement(FilterWrapper, {
      child: child,
      onOnlySelection: onOnlySelection,
      onlySelectionText: onlySelectionText
    }, /*#__PURE__*/React.cloneElement(child, itemProps));
  }))), error && /*#__PURE__*/React.createElement(Feedback, null, error));
};
export default ChoiceGroup;