welcome-ui/dist/DateTimePicker.mjs

Customizable design system with react • styled-components • styled-system and ariakit.

"use client";
import { j as s } from "./jsx-runtime-B7I4PJ0H.mjs";
import D, { Children as d, useState as h, useEffect as g, cloneElement as $ } from "react";
import { DatePicker as b } from "./DatePicker.mjs";
import { S as j, a as w, g as E, D as S } from "./CustomPopper-DezjKb9n.mjs";
import { forwardRef as _ } from "./System.mjs";
import { TimePicker as A } from "./TimePicker.mjs";
import N, { css as R } from "@xstyled/styled-components";
const P = R`
  &:focus {
    position: relative;
    z-index: 1;
  }
`, C = N.divBox`
  position: relative;
  display: inline-flex;
  flex-wrap: nowrap;

  .react-datepicker-wrapper {
    flex-grow: 1;
    ${j} {
      ${P};
      border-top-right-radius: 0;
      border-bottom-right-radius: 0;
    }
    ${w} {
      ${P};
      border-top-left-radius: 0;
      border-bottom-left-radius: 0;
    }
  }

  .react-datepicker-wrapper:first-child:not(:only-child) {
    margin-right: -1px;
  }

  .react-datepicker__input-container {
    display: block;
  }

  .react-datepicker {
    font-family: inherit;
  }
`, F = _(
  ({
    children: i,
    dataTestId: m,
    disabled: l,
    locale: c,
    onChange: a,
    size: f = "md",
    transparent: n,
    value: t = S
  }, k) => {
    const u = d.count(i) > 1 && d.toArray(i).find(
      (e) => e.type.displayName === "TimePicker"
    ), x = D.isValidElement(u) ? u.props.timeIntervals : void 0, p = (e) => E(e, x), [T, y] = h(p(t)), r = (e) => {
      y(e || null), a && a(e && new Date(e));
    };
    return g(() => {
      a && r(p(t));
    }, []), g(() => {
      var o;
      const e = p(t);
      ((o = new Date(t)) == null ? void 0 : o.getTime()) - (e == null ? void 0 : e.getTime()) !== 0 && a && r(e), y(e);
    }, [t]), /* @__PURE__ */ s.jsxs(C, { "data-testid": m, children: [
      i ? d.map(
        i,
        (e, o) => $(e, {
          // give ref only to the first child
          inputRef: o < 1 ? k : null,
          key: o,
          locale: c,
          onChange: r,
          timeIntervals: x,
          transparent: n,
          value: T
        })
      ) : null,
      !i && /* @__PURE__ */ s.jsxs(s.Fragment, { children: [
        /* @__PURE__ */ s.jsx(
          b,
          {
            dataTestId: `${m}-datePicker`,
            disabled: l,
            locale: c,
            onChange: r,
            ref: k,
            size: f,
            transparent: n,
            value: t
          }
        ),
        /* @__PURE__ */ s.jsx(
          A,
          {
            dataTestId: `${m}-timePicker`,
            disabled: l,
            locale: c,
            onChange: r,
            size: f,
            transparent: n,
            value: t
          }
        )
      ] })
    ] });
  }
);
F.displayName = "DateTimePicker";
export {
  F as DateTimePicker
};