@kiwicom/orbit-components/lib/SegmentedSwitch/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 _FormLabel = _interopRequireDefault(require("../FormLabel"));
var _SwitchSegment = _interopRequireDefault(require("./SwitchSegment"));
var _ErrorFormTooltip = _interopRequireDefault(require("../ErrorFormTooltip"));
var _useErrorTooltip = _interopRequireDefault(require("../ErrorFormTooltip/hooks/useErrorTooltip"));
var _spaceAfter = require("../common/tailwind/spaceAfter");
const SegmentedSwitch = ({
  options,
  dataTest,
  onChange,
  showTooltip,
  spaceAfter,
  onFocus,
  maxWidth,
  help,
  error,
  label,
  ariaLabel,
  ariaLabelledby
}) => {
  const hasTooltip = Boolean(error || help);
  const {
    tooltipShown,
    tooltipShownHover,
    setTooltipShown,
    setTooltipShownHover,
    labelRef
  } = (0, _useErrorTooltip.default)({
    onFocus,
    hasTooltip
  });
  React.useEffect(() => {
    if (hasTooltip) {
      if (showTooltip) setTooltipShown(true);else setTooltipShown(false);
    }
  }, [showTooltip, hasTooltip, setTooltipShown]);
  return /*#__PURE__*/React.createElement("div", {
    "data-test": dataTest,
    ref: labelRef,
    className: (0, _clsx.default)("gap-50 relative flex w-full min-w-fit flex-col", spaceAfter && _spaceAfter.spaceAfterClasses[spaceAfter], "[&_.orbit-switch-segment-label:first-child_.orbit-switch-segment-text]:rounded-s-300", "[&_.orbit-switch-segment-label:last-child_.orbit-switch-segment-text]:rounded-e-300"),
    style: {
      maxWidth
    },
    role: "group",
    "aria-label": ariaLabel || label,
    "aria-labelledby": ariaLabelledby
  }, label && /*#__PURE__*/React.createElement(_FormLabel.default, {
    help: !!help,
    error: !!error,
    onMouseEnter: () => setTooltipShownHover(true),
    onMouseLeave: () => setTooltipShownHover(false)
  }, label), /*#__PURE__*/React.createElement("div", {
    className: (0, _clsx.default)("rounded-300 border-cloud-dark flex border", "[&>label]:border-cloud-dark [&>label]:border-s", "[&>label:has(input:checked)]:border-s-0", "[&>label:has(input:focus)]:border-s-0", "[&>label:not(:has(input:checked)):nth-of-type(1)]:border-s-0", "[&>label:has(input:checked):not(:nth-of-type(0))_+_label:not(:has(input:checked))]:border-s-0", "[&>label:has(input:checked):not(:nth-of-type(0))_+_label:has(input:checked)_+_label:not(:has(input:checked))]:border-s-0", "[&>label:has(input:focus):not(:nth-of-type(0))_+_label:not(:has(input:checked))]:border-s-0", "[&>label:has(input:focus):not(:nth-of-type(0))_+_label:has(input:focus)_+_label:not(:has(input:checked))]:border-s-0")
  }, options.map(({
    value,
    label: optionLabel,
    ...props
  }) => /*#__PURE__*/React.createElement(_SwitchSegment.default, (0, _extends2.default)({
    key: value,
    value: value,
    label: optionLabel,
    setTooltipShown: setTooltipShown,
    onChange: onChange,
    onFocus: onFocus
  }, props)))), hasTooltip && /*#__PURE__*/React.createElement(_ErrorFormTooltip.default, {
    help: help,
    error: error,
    shown: tooltipShown || tooltipShownHover,
    onShown: prev => setTooltipShown(!prev),
    referenceElement: labelRef
  }));
};
var _default = exports.default = SegmentedSwitch;