@box/metadata-filter 1.81.2 → 1.81.4

package/dist/esm/lib/components/metadata-filter-fields/components/metadata-date-field/metadata-date-field-relative.js

@@ -1,258 +1,238 @@
-import { DateI18nProvider as xe, Text as Ae, Radio as i, Select as p, DatePicker as ne } from "@box/blueprint-web";
-import Le from "clsx";
-import { useFormikContext as Ie, getIn as O, Field as oe } from "formik";
-import { useState as x, useRef as A, useCallback as Ne, useEffect as ie, useMemo as ce } from "react";
-import { useIntl as ke } from "react-intl";
-import { R as c } from "../../../../../../chunks/types.js";
-import { DEFAULT_MAX_DATE as ue } from "./constants.js";
-import { getRelativeFromToValues as Ee, getCustomFromToValues as me, convertToFormikValueRanged as de } from "./date-conversion-utils.js";
-import { s as f } from "../../../../../../chunks/metadata-date-field.module.js";
-import { E as G } from "../../../../../../chunks/types2.js";
-import { useDateValidation as Pe } from "./use-date-validation.js";
-import { getDynamicMaxMinValue as fe } from "./utils.js";
-import l from "../../../../messages.js";
-import { jsx as t, jsxs as L } from "react/jsx-runtime";
-const ve = {
-  next: l.nextDaysAmt,
-  past: l.pastDaysAmt,
-  olderThan: l.olderThanDaysAmt
-}, $e = [1, 3, 15, 45, 60, 120, 365], ge = (u) => u in ve || u === "today" || u === "customRange", Ye = ({
-  customDateFilterOptions: u,
-  disableForm: C,
-  fieldNamePrefix: h,
-  label: U,
-  locale: j,
-  portalElement: b,
-  hasAccordion: he
-}) => {
-  const [X, I] = x(c.FROM), [_, N] = x(!1), m = `${h}.value.range.gt`, d = `${h}.value.range.lt`, H = `${h}.value.relativeType`, k = `${h}.value.relativeDays`, q = `${h}.value.customType`, E = `${h}.value.customDays`, {
-    values: F,
-    setFieldTouched: pe,
-    setFieldValue: n
-  } = Ie(), {
-    validateDates: z,
-    fromDatePickerValue: y,
-    toDatePickerValue: T,
-    fromErrorType: J,
-    toErrorType: K
-  } = Pe(F, m, d, j, !0), s = ke(), g = O(F, H), v = O(F, q), Fe = y || T;
-  let P = "anyTime", $ = "anyTime";
-  ge(g) ? P = g : v ? $ = v : Fe && (P = "customRange", $ = "customRange");
-  const [D, Q] = x(P), W = A(g), Y = A(v), S = O(F, k), Z = O(F, E), [w, ee] = x($), V = A(y), M = A(T), ae = {
-    clearDatePickerAriaLabel: s.formatMessage(l.clearSelectedDate),
-    nextMonthAriaLabel: s.formatMessage(l.switchToNextMonth),
-    openCalendarDropdownAriaLabel: s.formatMessage(l.openCalendar),
-    previousMonthAriaLabel: s.formatMessage(l.switchToNextMonth)
-  }, ye = () => {
-    n(m, void 0), n(d, void 0), V.current = void 0, M.current = void 0;
-  }, Te = (e) => {
-    const a = de(e, c.FROM);
-    V.current = e, n(m, a), I(c.FROM);
-  }, De = (e) => {
-    const a = de(e, c.TO);
-    M.current = e, n(d, a), I(c.TO);
-  }, te = (e) => {
-    const a = e === c.FROM ? m : d;
-    pe(a, !0), I(e);
-  }, Ve = (e) => {
-    let a;
-    ge(e) && (a = e), e === "customRange" && (V.current = void 0, M.current = void 0), n(H, a), Q(e), n(k, void 0), N(!0);
-  }, Me = (e) => {
-    n(q, e), ee(e), n(E, void 0), ye();
-    const a = u.find((r) => r.name === e);
-    if (a && a.type === "text") {
-      const {
-        from: r,
-        to: o
-      } = me(a.from, a.to);
-      n(m, r), n(d, o);
-    }
-  }, le = Ne(() => {
-    const {
-      from: e,
-      to: a
-    } = Ee(D, S);
-    n(m, e), n(d, a);
-  }, [m, S, D, n, d]);
-  ie(() => {
-    _ && (le(), N(!1));
-  }, [_, le]), ie(() => {
-    const e = W.current !== g, a = Y.current !== v;
-    (e || a) && (Q(g ?? "anyTime"), ee(v), W.current = g, Y.current = v);
-  }, [g, v]);
-  const Re = ce(() => fe(T, ue), [T]), Ce = ce(() => fe(y), [y]), re = (e, a, r) => !!(a === G.MAX && e === G.OVERLAPPING || e === G.OVERLAPPING && r), B = (e) => {
-    if (e !== D)
-      return null;
-    const a = (o) => {
-      const R = ve[e];
-      return {
-        value: String(o),
-        label: s.formatMessage(R, {
-          count: o
-        })
-      };
-    }, r = $e.map(a);
-    return /* @__PURE__ */ t(p, {
-      className: f.dateSelect,
-      defaultValue: S === void 0 ? "" : String(S),
-      label: s.formatMessage(l.relativeDaysSelectLabel),
-      onValueChange: (o) => {
-        n(k, Number(o)), N(!0);
-      },
-      placeholder: s.formatMessage(l.selectValuePlaceholder),
-      children: /* @__PURE__ */ t(p.Content, {
-        container: b,
-        children: r?.map((o) => /* @__PURE__ */ t(p.Option, {
-          text: o.label,
-          value: o.value,
-          children: o.label
-        }, o.value))
-      })
-    });
-  }, be = (e, a) => e !== w ? null : /* @__PURE__ */ t(p, {
-    className: f.dateSelect,
-    defaultValue: Z === void 0 ? "" : String(Z),
-    label: s.formatMessage(l.relativeDaysSelectLabel),
-    onValueChange: (r) => {
-      const o = a.find((R) => R.name === r);
-      if (o) {
-        const {
-          from: R,
-          to: Oe
-        } = me(o.from, o.to);
-        n(m, R), n(d, Oe), n(E, o.name);
-      }
-    },
-    placeholder: s.formatMessage(l.selectValuePlaceholder),
-    children: /* @__PURE__ */ t(p.Content, {
-      container: b,
-      children: a.map((r) => /* @__PURE__ */ t(p.Option, {
-        text: r.name,
-        value: r.name,
-        children: r.name
-      }, r.name))
-    })
-  }), Se = () => /* @__PURE__ */ L(i.Group, {
-    disabled: C,
-    loop: !1,
-    onValueChange: Me,
-    value: w,
-    children: [/* @__PURE__ */ t(i.Item, {
-      label: s.formatMessage(l.relativeDateFilterAnyTime),
-      value: "anyTime"
-    }), u.map((e) => {
-      if (e.type === "text")
-        return /* @__PURE__ */ t(i.Item, {
-          label: e.name,
-          value: e.name
-        }, e.name);
-      const {
-        name: a,
-        options: r
-      } = e;
-      return /* @__PURE__ */ t(i.Item, {
-        description: r ? be(a, r) : void 0,
-        label: a,
-        value: a
-      }, a);
-    }), /* @__PURE__ */ t(i.Item, {
-      description: se(),
-      label: s.formatMessage(l.relativeDateFilterCustomRange),
-      value: "customRange"
-    })]
-  }), se = () => !u && D !== "customRange" || u && w !== "customRange" ? null : /* @__PURE__ */ L("div", {
-    className: Le(f.rangeInputsContainer, f.verticalLayout, f.dateSelect),
-    children: [/* @__PURE__ */ t(oe, {
-      name: m,
-      validate: (e) => z(V.current, M.current, c.FROM),
-      children: ({
-        field: e,
-        meta: a
-      }) => /* @__PURE__ */ t("div", {
-        className: f.inputContainer,
-        children: /* @__PURE__ */ t(ne, {
-          ...e,
-          ...ae,
-          calendarAriaLabel: s.formatMessage(l.selectStartDate),
-          error: re(J, K, X !== c.FROM) ? void 0 : a.error,
-          isDisabled: C,
-          label: s.formatMessage(l.fieldStartDateLabel),
-          maxValue: Re,
-          onBlur: () => te(c.FROM),
-          onChange: (r) => Te(r),
-          portalElement: b,
-          value: y
-        })
-      })
-    }), /* @__PURE__ */ t(oe, {
-      name: d,
-      validate: (e) => z(V.current, M.current, c.TO),
-      children: ({
-        field: e,
-        meta: a
-      }) => /* @__PURE__ */ t("div", {
-        className: f.inputContainer,
-        children: /* @__PURE__ */ t(ne, {
-          ...e,
-          ...ae,
-          calendarAriaLabel: s.formatMessage(l.selectEndDate),
-          error: re(K, J, X !== c.TO) ? void 0 : a.error,
-          isDisabled: C,
-          label: s.formatMessage(l.fieldEndDateLabel),
-          maxValue: ue,
-          minValue: Ce,
-          onBlur: () => te(c.TO),
-          onChange: (r) => De(r),
-          portalElement: b,
-          value: T
-        })
-      })
-    })]
-  });
-  return /* @__PURE__ */ t(xe, {
-    locale: j,
-    children: /* @__PURE__ */ L("div", {
-      className: f.container,
-      "data-testid": `${U}-field`,
-      children: [!he && /* @__PURE__ */ t(Ae, {
-        as: "span",
-        className: f.rangeFieldLabel,
-        color: "textOnLightSecondary",
-        variant: "bodyDefaultBold",
-        children: U
-      }), u ? Se() : /* @__PURE__ */ L(i.Group, {
-        disabled: C,
-        loop: !1,
-        onValueChange: Ve,
-        value: D,
-        children: [/* @__PURE__ */ t(i.Item, {
-          label: s.formatMessage(l.relativeDateFilterAnyTime),
-          value: "anyTime"
-        }), /* @__PURE__ */ t(i.Item, {
-          label: s.formatMessage(l.relativeDateFilterToday),
-          value: "today"
-        }), /* @__PURE__ */ t(i.Item, {
-          description: B("next"),
-          label: s.formatMessage(l.relativeDateFilterNext),
-          value: "next"
-        }), /* @__PURE__ */ t(i.Item, {
-          description: B("past"),
-          label: s.formatMessage(l.relativeDateFilterPast),
-          value: "past"
-        }), /* @__PURE__ */ t(i.Item, {
-          description: B("olderThan"),
-          label: s.formatMessage(l.relativeDateFilterOlderThan),
-          value: "olderThan"
-        }), /* @__PURE__ */ t(i.Item, {
-          description: se(),
-          label: s.formatMessage(l.relativeDateFilterCustomRange),
-          value: "customRange"
-        })]
-      })]
-    })
-  });
-};
-export {
-  Ye as MetadataDateFieldRelative,
-  Ye as default
+import { n as e } from "../../../../../../chunks/types.js";
+import { convertToFormikValueRanged as t, getCustomFromToValues as n, getRelativeFromToValues as r } from "./date-conversion-utils.js";
+import i from "../../../../messages.js";
+import { DEFAULT_MAX_DATE as a } from "./constants.js";
+import { t as o } from "../../../../../../chunks/metadata-date-field.module.js";
+import { t as s } from "../../../../../../chunks/types2.js";
+import { useDateValidation as ee } from "./use-date-validation.js";
+import { getDynamicMaxMinValue as c } from "./utils.js";
+import { DateI18nProvider as te, DatePicker as l, Radio as u, Select as d, Text as ne } from "@box/blueprint-web";
+import { Field as f, getIn as p, useFormikContext as re } from "formik";
+import { useCallback as ie, useEffect as ae, useMemo as m, useRef as h, useState as g } from "react";
+import { useIntl as oe } from "react-intl";
+import se from "clsx";
+import { jsx as _, jsxs as v } from "react/jsx-runtime";
+var y = {
+	next: i.nextDaysAmt,
+	past: i.pastDaysAmt,
+	olderThan: i.olderThanDaysAmt
+}, ce = [
+	1,
+	3,
+	15,
+	45,
+	60,
+	120,
+	365
+], le = (e) => e in y || e === "today" || e === "customRange", b = ({ customDateFilterOptions: b, disableForm: x, fieldNamePrefix: S, label: C, locale: w, portalElement: T, hasAccordion: ue }) => {
+	let [E, D] = g(e.FROM), [O, k] = g(!1), A = `${S}.value.range.gt`, j = `${S}.value.range.lt`, de = `${S}.value.relativeType`, M = `${S}.value.relativeDays`, fe = `${S}.value.customType`, N = `${S}.value.customDays`, { values: P, setFieldTouched: pe, setFieldValue: F } = re(), { validateDates: I, fromDatePickerValue: L, toDatePickerValue: R, fromErrorType: z, toErrorType: B } = ee(P, A, j, w, !0), V = oe(), H = p(P, de), U = p(P, fe), me = L || R, W = "anyTime", G = "anyTime";
+	le(H) ? W = H : U ? G = U : me && (W = "customRange", G = "customRange");
+	let [K, q] = g(W), J = h(H), he = h(U), Y = p(P, M), ge = p(P, N), [X, _e] = g(G), Z = h(L), Q = h(R), ve = {
+		clearDatePickerAriaLabel: V.formatMessage(i.clearSelectedDate),
+		nextMonthAriaLabel: V.formatMessage(i.switchToNextMonth),
+		openCalendarDropdownAriaLabel: V.formatMessage(i.openCalendar),
+		previousMonthAriaLabel: V.formatMessage(i.switchToNextMonth)
+	}, ye = () => {
+		F(A, void 0), F(j, void 0), Z.current = void 0, Q.current = void 0;
+	}, be = (n) => {
+		let r = t(n, e.FROM);
+		Z.current = n, F(A, r), D(e.FROM);
+	}, xe = (n) => {
+		let r = t(n, e.TO);
+		Q.current = n, F(j, r), D(e.TO);
+	}, Se = (t) => {
+		pe(t === e.FROM ? A : j, !0), D(t);
+	}, Ce = (e) => {
+		let t;
+		le(e) && (t = e), e === "customRange" && (Z.current = void 0, Q.current = void 0), F(de, t), q(e), F(M, void 0), k(!0);
+	}, we = (e) => {
+		F(fe, e), _e(e), F(N, void 0), ye();
+		let t = b.find((t) => t.name === e);
+		if (t && t.type === "text") {
+			let { from: e, to: r } = n(t.from, t.to);
+			F(A, e), F(j, r);
+		}
+	}, Te = ie(() => {
+		let { from: e, to: t } = r(K, Y);
+		F(A, e), F(j, t);
+	}, [
+		A,
+		Y,
+		K,
+		F,
+		j
+	]);
+	ae(() => {
+		O && (Te(), k(!1));
+	}, [O, Te]), ae(() => {
+		let e = J.current !== H, t = he.current !== U;
+		(e || t) && (q(H ?? "anyTime"), _e(U), J.current = H, he.current = U);
+	}, [H, U]);
+	let Ee = m(() => c(R, a), [R]), De = m(() => c(L), [L]), Oe = (e, t, n) => !!(t === s.MAX && e === s.OVERLAPPING || e === s.OVERLAPPING && n), $ = (e) => {
+		if (e !== K) return null;
+		let t = ce.map((t) => {
+			let n = y[e];
+			return {
+				value: String(t),
+				label: V.formatMessage(n, { count: t })
+			};
+		});
+		return /* @__PURE__ */ _(d, {
+			className: o.dateSelect,
+			defaultValue: Y === void 0 ? "" : String(Y),
+			label: V.formatMessage(i.relativeDaysSelectLabel),
+			onValueChange: (e) => {
+				F(M, Number(e)), k(!0);
+			},
+			placeholder: V.formatMessage(i.selectValuePlaceholder),
+			children: /* @__PURE__ */ _(d.Content, {
+				container: T,
+				children: t?.map((e) => /* @__PURE__ */ _(d.Option, {
+					text: e.label,
+					value: e.value,
+					children: e.label
+				}, e.value))
+			})
+		});
+	}, ke = (e, t) => e === X ? /* @__PURE__ */ _(d, {
+		className: o.dateSelect,
+		defaultValue: ge === void 0 ? "" : String(ge),
+		label: V.formatMessage(i.relativeDaysSelectLabel),
+		onValueChange: (e) => {
+			let r = t.find((t) => t.name === e);
+			if (r) {
+				let { from: e, to: t } = n(r.from, r.to);
+				F(A, e), F(j, t), F(N, r.name);
+			}
+		},
+		placeholder: V.formatMessage(i.selectValuePlaceholder),
+		children: /* @__PURE__ */ _(d.Content, {
+			container: T,
+			children: t.map((e) => /* @__PURE__ */ _(d.Option, {
+				text: e.name,
+				value: e.name,
+				children: e.name
+			}, e.name))
+		})
+	}) : null, Ae = () => /* @__PURE__ */ v(u.Group, {
+		disabled: x,
+		loop: !1,
+		onValueChange: we,
+		value: X,
+		children: [
+			/* @__PURE__ */ _(u.Item, {
+				label: V.formatMessage(i.relativeDateFilterAnyTime),
+				value: "anyTime"
+			}),
+			b.map((e) => {
+				if (e.type === "text") return /* @__PURE__ */ _(u.Item, {
+					label: e.name,
+					value: e.name
+				}, e.name);
+				let { name: t, options: n } = e;
+				return /* @__PURE__ */ _(u.Item, {
+					description: n ? ke(t, n) : void 0,
+					label: t,
+					value: t
+				}, t);
+			}),
+			/* @__PURE__ */ _(u.Item, {
+				description: je(),
+				label: V.formatMessage(i.relativeDateFilterCustomRange),
+				value: "customRange"
+			})
+		]
+	}), je = () => !b && K !== "customRange" || b && X !== "customRange" ? null : /* @__PURE__ */ v("div", {
+		className: se(o.rangeInputsContainer, o.verticalLayout, o.dateSelect),
+		children: [/* @__PURE__ */ _(f, {
+			name: A,
+			validate: (t) => I(Z.current, Q.current, e.FROM),
+			children: ({ field: t, meta: n }) => /* @__PURE__ */ _("div", {
+				className: o.inputContainer,
+				children: /* @__PURE__ */ _(l, {
+					...t,
+					...ve,
+					calendarAriaLabel: V.formatMessage(i.selectStartDate),
+					error: Oe(z, B, E !== e.FROM) ? void 0 : n.error,
+					isDisabled: x,
+					label: V.formatMessage(i.fieldStartDateLabel),
+					maxValue: Ee,
+					onBlur: () => Se(e.FROM),
+					onChange: (e) => be(e),
+					portalElement: T,
+					value: L
+				})
+			})
+		}), /* @__PURE__ */ _(f, {
+			name: j,
+			validate: (t) => I(Z.current, Q.current, e.TO),
+			children: ({ field: t, meta: n }) => /* @__PURE__ */ _("div", {
+				className: o.inputContainer,
+				children: /* @__PURE__ */ _(l, {
+					...t,
+					...ve,
+					calendarAriaLabel: V.formatMessage(i.selectEndDate),
+					error: Oe(B, z, E !== e.TO) ? void 0 : n.error,
+					isDisabled: x,
+					label: V.formatMessage(i.fieldEndDateLabel),
+					maxValue: a,
+					minValue: De,
+					onBlur: () => Se(e.TO),
+					onChange: (e) => xe(e),
+					portalElement: T,
+					value: R
+				})
+			})
+		})]
+	});
+	return /* @__PURE__ */ _(te, {
+		locale: w,
+		children: /* @__PURE__ */ v("div", {
+			className: o.container,
+			"data-testid": `${C}-field`,
+			children: [!ue && /* @__PURE__ */ _(ne, {
+				as: "span",
+				className: o.rangeFieldLabel,
+				color: "textOnLightSecondary",
+				variant: "bodyDefaultBold",
+				children: C
+			}), b ? Ae() : /* @__PURE__ */ v(u.Group, {
+				disabled: x,
+				loop: !1,
+				onValueChange: Ce,
+				value: K,
+				children: [
+					/* @__PURE__ */ _(u.Item, {
+						label: V.formatMessage(i.relativeDateFilterAnyTime),
+						value: "anyTime"
+					}),
+					/* @__PURE__ */ _(u.Item, {
+						label: V.formatMessage(i.relativeDateFilterToday),
+						value: "today"
+					}),
+					/* @__PURE__ */ _(u.Item, {
+						description: $("next"),
+						label: V.formatMessage(i.relativeDateFilterNext),
+						value: "next"
+					}),
+					/* @__PURE__ */ _(u.Item, {
+						description: $("past"),
+						label: V.formatMessage(i.relativeDateFilterPast),
+						value: "past"
+					}),
+					/* @__PURE__ */ _(u.Item, {
+						description: $("olderThan"),
+						label: V.formatMessage(i.relativeDateFilterOlderThan),
+						value: "olderThan"
+					}),
+					/* @__PURE__ */ _(u.Item, {
+						description: je(),
+						label: V.formatMessage(i.relativeDateFilterCustomRange),
+						value: "customRange"
+					})
+				]
+			})]
+		})
+	});
 };
+export { b as MetadataDateFieldRelative, b as default };