@box/metadata-filter 1.17.3 → 1.18.1

package/dist/chunks/metadata-date-field.module.js

@@ -1,8 +1,8 @@
-import '../styles/metadata-date-field.css';const n = "_container_l85l9_1", t = "_daysSelect_l85l9_6", a = "_rangeInputsContainer_l85l9_9", e = "_verticalLayout_l85l9_13", o = "_inputContainer_l85l9_24", r = "_advancedDateContainer_l85l9_32", c = "_datePicker_l85l9_41", i = "_daysInputContainer_l85l9_45", _ = {
+import '../styles/metadata-date-field.css';const n = "_container_10ye0_1", t = "_dateSelect_10ye0_6", e = "_rangeInputsContainer_10ye0_9", a = "_verticalLayout_10ye0_13", o = "_inputContainer_10ye0_23", r = "_advancedDateContainer_10ye0_31", c = "_datePicker_10ye0_40", i = "_daysInputContainer_10ye0_44", _ = {
   container: n,
-  daysSelect: t,
-  rangeInputsContainer: a,
-  verticalLayout: e,
+  dateSelect: t,
+  rangeInputsContainer: e,
+  verticalLayout: a,
   inputContainer: o,
   advancedDateContainer: r,
   datePicker: c,

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

@@ -1,4 +1,4 @@
-import { DateI18nProvider as ue, Text as me, Radio as c, Select as x, DatePicker as H } from "@box/blueprint-web";
+import { DateI18nProvider as ue, Text as me, Radio as d, Select as x, DatePicker as H } from "@box/blueprint-web";
 import fe from "clsx";
 import { useFormikContext as ge, getIn as q, Field as z } from "formik";
 import { useState as A, useRef as J, useCallback as he, useEffect as ve, useMemo as K } from "react";
@@ -6,7 +6,7 @@ import { useIntl as pe } from "react-intl";
 import { R as o } from "../../../../../../chunks/types.js";
 import { DEFAULT_MAX_DATE as Q } from "./constants.js";
 import { getRelativeFromToValues as Fe, convertToFormikValueRanged as W } from "./date-conversion-utils.js";
-import { s as d } from "../../../../../../chunks/metadata-date-field.module.js";
+import { s as c } from "../../../../../../chunks/metadata-date-field.module.js";
 import { u as Me, E as L } from "../../../../../../chunks/use-date-validation.js";
 import { getDynamicMaxMinValue as Y } from "./utils.js";
 import a from "../../../../messages.js";
@@ -22,8 +22,8 @@ const ee = {
   locale: I,
   portalElement: M
 }) => {
-  const [k, D] = A(o.FROM), [E, T] = A(!1), m = `${p}.value.range.gt`, f = `${p}.value.range.lt`, P = `${p}.value.relativeType`, y = `${p}.value.relativeDays`, {
-    values: V,
+  const [k, D] = A(o.FROM), [E, T] = A(!1), m = `${p}.value.range.gt`, f = `${p}.value.range.lt`, P = `${p}.value.relativeType`, V = `${p}.value.relativeDays`, {
+    values: y,
     setFieldTouched: ae,
     setFieldValue: i
   } = ge(), {
@@ -32,10 +32,10 @@ const ee = {
     toDatePickerValue: h,
     fromErrorType: B,
     toErrorType: w
-  } = Me(V, m, f, I, !0), r = pe(), G = q(V, P), te = g || h;
+  } = Me(y, m, f, I, !0), r = pe(), G = q(y, P), te = g || h;
   let R = "anyTime";
   Z(G) ? R = G : te && (R = "customRange");
-  const [v, re] = A(R), F = q(V, y), b = J(g), O = J(h), U = {
+  const [v, re] = A(R), F = q(y, V), b = J(g), O = J(h), U = {
     clearDatePickerAriaLabel: r.formatMessage(a.clearSelectedDate),
     nextMonthAriaLabel: r.formatMessage(a.switchToNextMonth),
     openCalendarDropdownAriaLabel: r.formatMessage(a.openCalendar),
@@ -51,7 +51,7 @@ const ee = {
     ae(t, !0), D(e);
   }, se = (e) => {
     let t;
-    Z(e) && (t = e), i(P, t), re(e), i(y, void 0), T(!0);
+    Z(e) && (t = e), i(P, t), re(e), i(V, void 0), T(!0);
   }, X = he(() => {
     const {
       from: e,
@@ -75,11 +75,11 @@ const ee = {
       };
     }, s = De.map(t);
     return /* @__PURE__ */ l(x, {
-      className: d.daysSelect,
+      className: c.dateSelect,
       defaultValue: F === void 0 ? "" : String(F),
       label: r.formatMessage(a.relativeDaysSelectLabel),
       onValueChange: (n) => {
-        i(y, Number(n)), T(!0);
+        i(V, Number(n)), T(!0);
       },
       placeholder: r.formatMessage(a.selectValuePlaceholder),
       children: /* @__PURE__ */ l(x.Content, {
@@ -92,7 +92,7 @@ const ee = {
       })
     });
   }, ce = () => v !== "customRange" ? null : /* @__PURE__ */ S("div", {
-    className: fe(d.rangeInputsContainer, d.verticalLayout),
+    className: fe(c.rangeInputsContainer, c.verticalLayout, c.dateSelect),
     children: [/* @__PURE__ */ l(z, {
       name: m,
       validate: (e) => $(b.current, O.current, o.FROM),
@@ -100,7 +100,7 @@ const ee = {
         field: e,
         meta: t
       }) => /* @__PURE__ */ l("div", {
-        className: d.inputContainer,
+        className: c.inputContainer,
         children: /* @__PURE__ */ l(H, {
           ...e,
           ...U,
@@ -122,7 +122,7 @@ const ee = {
         field: e,
         meta: t
       }) => /* @__PURE__ */ l("div", {
-        className: d.inputContainer,
+        className: c.inputContainer,
         children: /* @__PURE__ */ l(H, {
           ...e,
           ...U,
@@ -143,38 +143,38 @@ const ee = {
   return /* @__PURE__ */ l(ue, {
     locale: I,
     children: /* @__PURE__ */ S("div", {
-      className: d.container,
+      className: c.container,
       "data-testid": `${N}-field`,
       children: [/* @__PURE__ */ l(me, {
         as: "span",
-        className: d.rangeFieldLabel,
+        className: c.rangeFieldLabel,
         color: "textOnLightSecondary",
         variant: "bodyDefaultBold",
         children: N
-      }), /* @__PURE__ */ S(c.Group, {
+      }), /* @__PURE__ */ S(d.Group, {
         disabled: u,
         loop: !1,
         onValueChange: se,
         value: v,
-        children: [/* @__PURE__ */ l(c.Item, {
+        children: [/* @__PURE__ */ l(d.Item, {
           label: r.formatMessage(a.relativeDateFilterAnyTime),
           value: "anyTime"
-        }), /* @__PURE__ */ l(c.Item, {
+        }), /* @__PURE__ */ l(d.Item, {
           label: r.formatMessage(a.relativeDateFilterToday),
           value: "today"
-        }), /* @__PURE__ */ l(c.Item, {
+        }), /* @__PURE__ */ l(d.Item, {
           description: C("next"),
           label: r.formatMessage(a.relativeDateFilterNext),
           value: "next"
-        }), /* @__PURE__ */ l(c.Item, {
+        }), /* @__PURE__ */ l(d.Item, {
           description: C("past"),
           label: r.formatMessage(a.relativeDateFilterPast),
           value: "past"
-        }), /* @__PURE__ */ l(c.Item, {
+        }), /* @__PURE__ */ l(d.Item, {
           description: C("olderThan"),
           label: r.formatMessage(a.relativeDateFilterOlderThan),
           value: "olderThan"
-        }), /* @__PURE__ */ l(c.Item, {
+        }), /* @__PURE__ */ l(d.Item, {
           description: ce(),
           label: r.formatMessage(a.relativeDateFilterCustomRange),
           value: "customRange"

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

@@ -1,114 +1,116 @@
-import { Text as _, DateI18nProvider as H, DatePicker as N } from "@box/blueprint-web";
-import { useFormikContext as U, Field as k } from "formik";
-import { useState as q, useRef as P, useMemo as E } from "react";
-import { useIntl as J } from "react-intl";
+import { Text as J, DateI18nProvider as K, DatePicker as P } from "@box/blueprint-web";
+import { useFormikContext as Q, Field as y } from "formik";
+import { useState as W, useRef as E, useMemo as I } from "react";
+import { useIntl as Y } from "react-intl";
 import n from "../../../../messages.js";
 import { R as a } from "../../../../../../chunks/types.js";
-import { DEFAULT_MAX_DATE as y } from "./constants.js";
-import { convertToFormikValue as I } from "./date-conversion-utils.js";
-import { MetadataDateFieldRelative as K } from "./metadata-date-field-relative.js";
-import { s as l } from "../../../../../../chunks/metadata-date-field.module.js";
-import { u as Q, E as g } from "../../../../../../chunks/use-date-validation.js";
-import { useDateInternationalization as W } from "./use-date-internationalization.js";
-import { getDynamicMaxMinValue as B } from "./utils.js";
-import { jsx as t, jsxs as w } from "react/jsx-runtime";
-const fe = ({
-  canUseRelativeDates: m,
-  ...i
-}) => m ? /* @__PURE__ */ t(K, {
-  ...i
-}) : /* @__PURE__ */ t(Y, {
-  ...i
-}), Y = ({
-  disableForm: m,
-  fieldNamePrefix: i,
-  label: D,
+import { DEFAULT_MAX_DATE as $ } from "./constants.js";
+import { convertToFormikValue as B } from "./date-conversion-utils.js";
+import { MetadataDateFieldRelative as Z } from "./metadata-date-field-relative.js";
+import { s as i } from "../../../../../../chunks/metadata-date-field.module.js";
+import { u as ee, E as g } from "../../../../../../chunks/use-date-validation.js";
+import { useDateInternationalization as ae } from "./use-date-internationalization.js";
+import { getDynamicMaxMinValue as w } from "./utils.js";
+import { jsx as t, jsxs as z } from "react/jsx-runtime";
+const pe = ({
+  canUseRelativeDates: f,
+  ...s
+}) => f ? /* @__PURE__ */ t(Z, {
+  ...s
+}) : /* @__PURE__ */ t(re, {
+  ...s
+}), re = ({
+  customFieldLabels: f = [],
+  direction: s = "horizontal",
+  disableForm: v,
+  fieldNamePrefix: D,
+  label: O,
   locale: M,
-  portalElement: v
+  portalElement: T
 }) => {
-  const [O, h] = q(a.FROM), d = `${i}.value.range.gt`, c = `${i}.value.range.lt`, {
+  const [L, h] = W(a.FROM), m = `${D}.value.range.gt`, c = `${D}.value.range.lt`, {
     values: S,
-    setFieldTouched: $,
-    setFieldValue: T
-  } = U(), {
-    localTimezone: V
-  } = W(M), {
-    validateDates: R,
-    fromDatePickerValue: u,
-    toDatePickerValue: f,
-    fromErrorType: L,
-    toErrorType: b
-  } = Q(S, d, c, M, !1), o = J(), F = P(u), p = P(f), x = {
+    setFieldTouched: j,
+    setFieldValue: V
+  } = Q(), {
+    localTimezone: R
+  } = ae(M), {
+    validateDates: b,
+    fromDatePickerValue: d,
+    toDatePickerValue: u,
+    fromErrorType: x,
+    toErrorType: A
+  } = ee(S, m, c, M, !1), o = Y(), F = E(d), p = E(u), C = {
     clearDatePickerAriaLabel: o.formatMessage(n.clearSelectedDate),
     nextMonthAriaLabel: o.formatMessage(n.switchToNextMonth),
     openCalendarDropdownAriaLabel: o.formatMessage(n.openCalendar),
     previousMonthAriaLabel: o.formatMessage(n.switchToNextMonth)
-  }, j = (e) => {
-    const r = I(e, V, a.FROM);
-    F.current = e, T(d, r), h(a.FROM);
-  }, z = (e) => {
-    const r = I(e, V, a.TO);
-    p.current = e, T(c, r), h(a.TO);
-  }, A = (e) => {
-    const r = e === a.FROM ? d : c;
-    $(r, !0), h(e);
-  }, G = E(() => B(f, y), [f]), X = E(() => B(u), [u]), C = (e, r, s) => !!(r === g.MAX && e === g.OVERLAPPING || e === g.OVERLAPPING && s);
-  return /* @__PURE__ */ w("div", {
-    className: l.container,
-    "data-testid": `${D}-field`,
-    children: [/* @__PURE__ */ t(_, {
+  }, [G, X] = f, _ = (e) => {
+    const r = B(e, R, a.FROM);
+    F.current = e, V(m, r), h(a.FROM);
+  }, H = (e) => {
+    const r = B(e, R, a.TO);
+    p.current = e, V(c, r), h(a.TO);
+  }, N = (e) => {
+    const r = e === a.FROM ? m : c;
+    j(r, !0), h(e);
+  }, U = I(() => w(u, $), [u]), q = I(() => w(d), [d]), k = (e, r, l) => !!(r === g.MAX && e === g.OVERLAPPING || e === g.OVERLAPPING && l);
+  return /* @__PURE__ */ z("div", {
+    className: i.container,
+    "data-testid": `${O}-field`,
+    children: [/* @__PURE__ */ t(J, {
       as: "span",
-      className: l.rangeFieldLabel,
+      className: i.rangeFieldLabel,
       color: "textOnLightSecondary",
       variant: "bodyDefaultBold",
-      children: D
-    }), /* @__PURE__ */ t(H, {
+      children: O
+    }), /* @__PURE__ */ t(K, {
       locale: M,
-      children: /* @__PURE__ */ w("div", {
-        className: l.rangeInputsContainer,
-        children: [/* @__PURE__ */ t(k, {
-          name: d,
-          validate: (e) => R(F.current, p.current, a.FROM),
+      children: /* @__PURE__ */ z("div", {
+        className: `${i.rangeInputsContainer} ${s === "vertical" ? i.verticalLayout : ""}`,
+        children: [/* @__PURE__ */ t(y, {
+          name: m,
+          validate: (e) => b(F.current, p.current, a.FROM),
           children: ({
             field: e,
             meta: r
           }) => /* @__PURE__ */ t("div", {
-            className: l.inputContainer,
-            children: /* @__PURE__ */ t(N, {
+            className: i.inputContainer,
+            children: /* @__PURE__ */ t(P, {
               ...e,
-              ...x,
+              ...C,
               calendarAriaLabel: o.formatMessage(n.selectFromDate),
-              error: C(L, b, O !== a.FROM) ? void 0 : r.error,
-              isDisabled: m,
-              label: o.formatMessage(n.fieldFromLabel),
-              maxValue: G,
-              onBlur: () => A(a.FROM),
-              onChange: (s) => j(s),
-              portalElement: v,
-              value: u
+              error: k(x, A, L !== a.FROM) ? void 0 : r.error,
+              isDisabled: v,
+              label: G || o.formatMessage(n.fieldFromLabel),
+              maxValue: U,
+              onBlur: () => N(a.FROM),
+              onChange: (l) => _(l),
+              portalElement: T,
+              value: d
             })
           })
-        }), /* @__PURE__ */ t(k, {
+        }), /* @__PURE__ */ t(y, {
           name: c,
-          validate: (e) => R(F.current, p.current, a.TO),
+          validate: (e) => b(F.current, p.current, a.TO),
           children: ({
             field: e,
             meta: r
           }) => /* @__PURE__ */ t("div", {
-            className: l.inputContainer,
-            children: /* @__PURE__ */ t(N, {
+            className: i.inputContainer,
+            children: /* @__PURE__ */ t(P, {
               ...e,
-              ...x,
+              ...C,
               calendarAriaLabel: o.formatMessage(n.selectToDate),
-              error: C(b, L, O !== a.TO) ? void 0 : r.error,
-              isDisabled: m,
-              label: o.formatMessage(n.fieldToLabel),
-              maxValue: y,
-              minValue: X,
-              onBlur: () => A(a.TO),
-              onChange: (s) => z(s),
-              portalElement: v,
-              value: f
+              error: k(A, x, L !== a.TO) ? void 0 : r.error,
+              isDisabled: v,
+              label: X || o.formatMessage(n.fieldToLabel),
+              maxValue: $,
+              minValue: q,
+              onBlur: () => N(a.TO),
+              onChange: (l) => H(l),
+              portalElement: T,
+              value: u
             })
           })
         })]
@@ -117,7 +119,7 @@ const fe = ({
   });
 };
 export {
-  fe as MetadataDateField,
-  Y as MetadataDateFieldNonRelative,
-  fe as default
+  pe as MetadataDateField,
+  re as MetadataDateFieldNonRelative,
+  pe as default
 };

package/dist/esm/lib/components/metadata-filter-fields/components/metadata-multi-select-field/metadata-multi-select-field.js

@@ -35,7 +35,11 @@ const V = ({
             name: e.name,
             onValueChange: (p) => i(a, p),
             options: d,
-            placeholder: ((t = e.value) == null ? void 0 : t.length) === 0 ? u.formatMessage(x.multiselectPlaceholder) : "",
+            placeholder: (
+              // Empty array must be substituded if there is no value found
+              // Otherwise an no placeholder appears despite no selection
+              ((t = e.value || []) == null ? void 0 : t.length) === 0 ? u.formatMessage(x.multiselectPlaceholder) : ""
+            ),
             portalElement: s,
             value: e.value
           })

package/dist/styles/metadata-date-field.css

@@ -1 +1 @@
-._container_l85l9_1{display:flex;flex-direction:column;gap:var(--space-2)}._container_l85l9_1 ._daysSelect_l85l9_6{margin-top:var(--space-3)}._container_l85l9_1 ._rangeInputsContainer_l85l9_9{display:flex;gap:var(--space-2)}._container_l85l9_1 ._rangeInputsContainer_l85l9_9._verticalLayout_l85l9_13{flex-direction:column;gap:var(--space-4);margin-top:var(--space-3)}@media (max-width: 374px){._container_l85l9_1 ._rangeInputsContainer_l85l9_9{flex-direction:column;gap:var(--space-4)}}._container_l85l9_1 ._rangeInputsContainer_l85l9_9 ._inputContainer_l85l9_24{display:flex;flex-direction:column;flex-grow:0;width:100%;min-width:0}._advancedDateContainer_l85l9_32{display:flex;flex-direction:column}._advancedDateContainer_l85l9_32 ._rangeInputsContainer_l85l9_9{display:flex;flex-direction:column;gap:var(--space-2)}._advancedDateContainer_l85l9_32 ._rangeInputsContainer_l85l9_9 ._datePicker_l85l9_41{flex-grow:0;width:100%}._advancedDateContainer_l85l9_32 ._daysInputContainer_l85l9_45{width:100%}
+._container_10ye0_1{display:flex;flex-direction:column;gap:var(--space-2)}._container_10ye0_1 ._dateSelect_10ye0_6{margin-top:var(--space-3)}._container_10ye0_1 ._rangeInputsContainer_10ye0_9{display:flex;gap:var(--space-2)}._container_10ye0_1 ._rangeInputsContainer_10ye0_9._verticalLayout_10ye0_13{flex-direction:column;gap:var(--space-4)}@media (max-width: 374px){._container_10ye0_1 ._rangeInputsContainer_10ye0_9{flex-direction:column;gap:var(--space-4)}}._container_10ye0_1 ._rangeInputsContainer_10ye0_9 ._inputContainer_10ye0_23{display:flex;flex-direction:column;flex-grow:0;width:100%;min-width:0}._advancedDateContainer_10ye0_31{display:flex;flex-direction:column}._advancedDateContainer_10ye0_31 ._rangeInputsContainer_10ye0_9{display:flex;flex-direction:column;gap:var(--space-2)}._advancedDateContainer_10ye0_31 ._rangeInputsContainer_10ye0_9 ._datePicker_10ye0_40{flex-grow:0;width:100%}._advancedDateContainer_10ye0_31 ._daysInputContainer_10ye0_44{width:100%}

package/dist/types/lib/components/metadata-filter-fields/components/metadata-date-field/metadata-date-field.d.ts

@@ -1,4 +1,4 @@
 import { MetadataFieldProps } from '../../types';
 export declare const MetadataDateField: ({ canUseRelativeDates, ...props }: MetadataFieldProps) => import("react/jsx-runtime").JSX.Element;
-export declare const MetadataDateFieldNonRelative: ({ disableForm, fieldNamePrefix, label, locale, portalElement, }: MetadataFieldProps) => import("react/jsx-runtime").JSX.Element;
+export declare const MetadataDateFieldNonRelative: ({ customFieldLabels, direction, disableForm, fieldNamePrefix, label, locale, portalElement, }: MetadataFieldProps) => import("react/jsx-runtime").JSX.Element;
 export default MetadataDateField;

package/dist/types/lib/components/metadata-filter-fields/types.d.ts

@@ -21,7 +21,7 @@ export type MetadataFieldProps = {
     portalElement?: HTMLElement;
     options?: Array<MetadataTemplateFieldOption>;
     locale: string;
-    taxonomyOptionsFetcher: TaxonomyOptionsFetcher;
+    taxonomyOptionsFetcher?: TaxonomyOptionsFetcher;
     className?: string;
     canUseRelativeDates?: boolean;
     isAdvancedFilterEnabled?: boolean;
@@ -30,4 +30,6 @@ export type MetadataFieldProps = {
     filterOptionsMap?: [string, string][];
     onAdvancedFilterOptionChange?: (fieldKey: string, option: string) => void;
     fieldAdvancedFilterOptions?: string;
+    direction?: 'horizontal' | 'vertical';
+    customFieldLabels?: Array<string>;
 };

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@box/metadata-filter",
-    "version": "1.17.3",
+    "version": "1.18.1",
     "peerDependencies": {
         "@box/blueprint-web": "^7.8.0",
         "@box/blueprint-web-assets": "^4.16.0",
@@ -11,9 +11,9 @@
         "react-intl": "6.4.2"
     },
     "devDependencies": {
-        "@box/blueprint-web": "^12.51.0",
-        "@box/blueprint-web-assets": "^4.62.0",
-        "@box/storybook-utils": "^0.13.17",
+        "@box/blueprint-web": "^12.51.1",
+        "@box/blueprint-web-assets": "^4.63.0",
+        "@box/storybook-utils": "^0.13.18",
         "react": "^18.3.0",
         "react-dom": "^18.3.0",
         "react-intl": "6.4.2"