@sps-woodland/core 8.56.2 → 8.56.3

package/lib/add-to-list/add-to-list/AddToList.js

@@ -1,304 +1,222 @@
-import * as e from "react";
-import { nanoid as pe } from "../../node_modules/.pnpm/nanoid@5.1.16/node_modules/nanoid/index.browser.js";
-import { useDrop as fe, useDrag as ge, useButton as he, DragPreview as be } from "react-aria";
-import { useSpsForm as Le, SpsTextInput as Ee } from "@spscommerce/ds-react";
-import { SpsIcon as ve } from "@spscommerce/ds-shared";
-import { DOCUMENT_SEARCH_NO_RESULTS_LARGE as Ce, DOCUMENT_SEARCH_NO_RESULTS_SMALL as xe } from "@sps-woodland/illustrations";
-import { Metadata as Te, useChildTestIdAttrBuilder as Ne, cl as y } from "@sps-woodland/core";
-import { ZeroState as j } from "@sps-woodland/core/zero-state";
-import { Card as G } from "@sps-woodland/core/card";
-import { grid as K } from "@sps-woodland/tokens";
-import { ItemsList as Q } from "./ItemsList.js";
-import { phantomDroppableContainer as ye, droppableContainer as Me, draggableBox as Se, dragHandle as X, rowButton as A, dragPreview as ke, filterContainer as De, flexListWrapper as we, leftList as Re, rightList as Ae, offItems as Fe } from "./AddToList.ve.js";
-import { ListItem as Y } from "./ListItem.js";
-import { useWoodlandLanguage as Pe } from "@spscommerce/i18n";
-import { Button as F } from "@sps-woodland/core/buttons";
-function Oe({
-  onList: P,
-  offList: O,
-  onHeader: h,
-  offHeader: b,
-  showFilter: ee,
-  showCount: V,
-  showIcons: $,
-  showMoveAllLinks: q,
-  manualSort: i,
-  maxDisplayedItems: te,
-  maxHeightPx: H,
-  maxHeightRem: le,
-  onChange: p,
-  onListZeroState: I,
-  offListZeroState: _,
-  vertical: f = !1,
-  onListAlphaSort: B = !0,
-  "data-testid": Z
-}) {
-  const n = Ne({ "data-testid": Z }), { t: c } = Pe(), { formValue: oe, formMeta: ae } = Le({
-    filterString: ""
-  }), [s, re] = e.useState(""), M = H ? H / 16 : le, U = M ? `${M}rem` : "", L = e.useCallback(
-    (t, l) => (!i && B || l === "right" ? [...t].sort((a, r) => a.label.localeCompare(r.label)) : t).map((a) => {
-      const r = { ...a };
-      return r.id || (r.id = pe()), r;
-    }),
-    [i, B]
-  ), o = e.useMemo(() => L(P, "left"), [P, L]), m = e.useMemo(() => L(O, "right"), [O, L]), E = e.useCallback(
-    (t) => s ? t.label.toLowerCase().includes(s.toLowerCase()) : !0,
-    [s]
-  ), S = (t, l, d) => {
-    const a = d.find((r) => r.label === t);
-    a ? l === o ? p({
-      onList: [...o, a],
-      offList: m.filter((r) => r.label !== a.label)
-    }) : d === o && p({
-      onList: o.filter((r) => r.label !== a.label),
-      offList: [...m, a]
-    }) : console.error("could not remove item");
-  };
-  function ie(t) {
-    re(t.target.value);
-  }
-  function W(t) {
-    p(t === "left" ? {
-      onList: o.filter((l) => l.required),
-      offList: [...m, ...o.filter((l) => !l.required)]
-    } : {
-      onList: [...o, ...m],
-      offList: []
-    });
-  }
-  const z = e.useCallback(
-    (t) => {
-      const { className: l, index: d, isPhantomDroppableContainer: a, children: r, ...C } = t, g = e.useRef(null), { dropProps: k, isDropTarget: x } = fe({
-        ref: g,
-        async onDrop(D) {
-          let w = await Promise.all(
-            D.items.filter((N) => N.kind === "text" && N.types.has("text/plain")).map((N) => N.getText("text/plain"))
-          );
-          const { index: T } = JSON.parse(w[0]), R = [...o], [ce] = R.splice(T, 1), ue = d > T ? d - 1 : d;
-          R.splice(ue, 0, ce), p({
-            onList: R,
-            offList: m
-          });
-        }
-      });
-      return /* @__PURE__ */ e.createElement(
-        "div",
-        {
-          ref: g,
-          ...i ? k : [],
-          className: y(
-            l,
-            a ? ye({ isDropTarget: x }) : Me({ isDropTarget: x })
-          ),
-          ...n("droppable-container"),
-          ...C
-        },
-        r
-      );
-    },
-    [o, i]
-  ), ne = e.useCallback(
-    (t) => {
-      const { label: l, data: d, listIndex: a, required: r } = t, C = e.useRef(null), g = e.useRef(null), k = { ...d, index: a }, { dragProps: x, dragButtonProps: D, isDragging: w } = ge({
-        preview: C,
-        hasDragButton: !0,
-        getItems() {
-          return [
-            {
-              "text/plain": JSON.stringify(k)
-            }
-          ];
-        }
-      }), { buttonProps: T } = he(D, g);
-      return /* @__PURE__ */ e.createElement(
-        "div",
-        {
-          ...i ? x : {},
-          role: i ? "button" : "listitem",
-          tabIndex: 0,
-          id: `${l}${a}-drag`,
-          className: y(Se({ isDragging: w })),
-          ...n("draggable-item")
-        },
-        /* @__PURE__ */ e.createElement(z, { index: a }, i && /* @__PURE__ */ e.createElement(
-          "i",
-          {
-            ...T,
-            ref: g,
-            className: X
-          }
-        ), l, !r && /* @__PURE__ */ e.createElement(
-          F,
-          {
-            kind: "icon",
-            icon: "x",
-            "aria-label": c("addToList.remove", {
-              elementName: l,
-              defaultValue: `Remove ${l}`
-            }),
-            onClick: () => {
-              S(l, m, o);
-            },
-            className: A,
-            ...n("move-item-button")
-          }
-        )),
-        /* @__PURE__ */ e.createElement(be, { ref: C }, () => /* @__PURE__ */ e.createElement("div", { className: ke }, /* @__PURE__ */ e.createElement("i", { className: X }), l))
-      );
-    },
-    [o, i]
-  ), u = e.useMemo(() => o.filter(E), [o, E]), v = e.useMemo(
-    () => m.filter(E).slice(0, te),
-    [m, E]
-  ), se = !s && !!q && u.length > 0, me = !s && !!q && v.length > 0, de = !s && m.length > v.length, J = !!i && !s && u.length > 0 && !M;
-  return /* @__PURE__ */ e.createElement("div", { "data-testid": Z }, ee && /* @__PURE__ */ e.createElement("div", { className: K.root }, /* @__PURE__ */ e.createElement("div", { className: y(K[12], De) }, /* @__PURE__ */ e.createElement(
-    Ee,
-    {
-      value: oe.filterString,
-      formMeta: ae.fields.filterString,
-      icon: ve.FILTER,
-      onChange: ie,
-      ...n("filter-input")
-    }
-  ))), /* @__PURE__ */ e.createElement("div", { className: y(we({ vertical: f })) }, /* @__PURE__ */ e.createElement(
-    Q,
-    {
-      headerText: h,
-      showCount: !s && V,
-      showIcons: $,
-      showMoveAllLinks: se,
-      disableMoveAllLinks: o.every((t) => t.required),
-      maxHeight: U,
-      vertical: f,
-      side: "left",
-      className: Re({
-        vertical: f
-      }),
-      otherHeader: b,
-      itemCount: o.length,
-      moveAll: W,
-      adjustForPhantomDroppableContainer: J,
-      ...n("on-items-list")
-    },
-    u.length > 0 ? /* @__PURE__ */ e.createElement(e.Fragment, null, i && !s && u.map((t, l) => /* @__PURE__ */ e.createElement(e.Fragment, { key: t.id }, /* @__PURE__ */ e.createElement(
-      ne,
-      {
-        data: t,
-        label: t.label,
-        required: t.required,
-        listIndex: l
-      }
-    ), l === u.length - 1 && /* @__PURE__ */ e.createElement(z, { isPhantomDroppableContainer: !0, index: l + 1 }))), (!i || s) && u.map((t) => /* @__PURE__ */ e.createElement(
-      Y,
-      {
-        key: t.id,
-        filtering: !!s,
-        manualSorting: i,
-        id: t.id,
-        ...n("item")
-      },
-      t.label,
-      !t.required && /* @__PURE__ */ e.createElement(
-        F,
-        {
-          kind: "icon",
-          icon: "x",
-          "aria-label": c("addToList.remove", {
-            elementName: t.label,
-            defaultValue: `Remove ${t.label}`
-          }),
-          onClick: () => {
-            S(t.label, m, o);
-          },
-          className: A,
-          ...n("move-item-button")
-        }
-      )
-    ))) : /* @__PURE__ */ e.createElement(G, null, I ? /* @__PURE__ */ e.createElement(e.Fragment, null, I) : /* @__PURE__ */ e.createElement(
-      j,
-      {
-        heading: c("addToList.noDataZeroStateColumnTitle", {
-          defaultValue: "This Column is Empty"
-        }),
-        subHeading: c("addToList.noDataZeroStateOnColumnSubheading", {
-          columnName: b,
-          defaultValue: `Move options from the ${b}`
-        }),
-        artwork: Ce,
-        micro: !0,
-        ...n("on-list-zero-state")
-      }
-    ))
-  ), /* @__PURE__ */ e.createElement(
-    Q,
-    {
-      headerText: b,
-      showCount: !s && V,
-      showIcons: $,
-      showMoveAllLinks: me,
-      showMoreOptionsText: de,
-      maxHeight: U,
-      vertical: f,
-      side: "right",
-      className: Ae({ vertical: f }),
-      otherHeader: h,
-      itemCount: m.length,
-      moveAll: W,
-      adjustForPhantomDroppableContainer: J,
-      ...n("off-items-list")
-    },
-    v.length > 0 ? v.map((t) => /* @__PURE__ */ e.createElement(Y, { key: t.id, className: Fe, ...n("item") }, t.label, /* @__PURE__ */ e.createElement(
-      F,
-      {
-        kind: "icon",
-        icon: "plus-sign",
-        "aria-label": c("addToList.add", {
-          elementName: t.label,
-          defaultValue: `Add ${t.label}`
-        }),
-        onClick: () => {
-          S(t.label, o, m);
-        },
-        className: A,
-        ...n("move-item-button")
-      }
-    ))) : /* @__PURE__ */ e.createElement(G, null, _ ? /* @__PURE__ */ e.createElement(e.Fragment, null, _) : /* @__PURE__ */ e.createElement(
-      j,
-      {
-        heading: c("addToList.noDataZeroStateColumnTitle", {
-          defaultValue: "This Column is Empty"
-        }),
-        subHeading: c("addToList.noDataZeroStateOffColumnSubheading", {
-          columnName: h,
-          defaultValue: `Remove options from the ${h}`
-        }),
-        artwork: xe,
-        micro: !0,
-        ...n("off-list-zero-state")
-      }
-    ))
-  )));
+import { nanoid as e } from "../../node_modules/.pnpm/nanoid@5.1.16/node_modules/nanoid/index.browser.js";
+import { dragHandle as t, dragPreview as n, draggableBox as r, droppableContainer as i, flexListWrapper as a, leftList as o, offItems as s, phantomDroppableContainer as c, rightList as l, rowButton as u } from "./AddToList.ve.js";
+import { ItemsList as d } from "./ItemsList.js";
+import { ListItem as f } from "./ListItem.js";
+import { Metadata as p, cl as m, useChildTestIdAttrBuilder as h } from "@sps-woodland/core";
+import * as g from "react";
+import { useWoodlandLanguage as ee } from "@spscommerce/i18n";
+import { grid as _ } from "@sps-woodland/tokens";
+import { Button as v } from "@sps-woodland/core/buttons";
+import { SpsTextInput as te, useSpsForm as y } from "@spscommerce/ds-react";
+import { SpsIcon as ne } from "@spscommerce/ds-shared";
+import { DOCUMENT_SEARCH_NO_RESULTS_LARGE as re, DOCUMENT_SEARCH_NO_RESULTS_SMALL as ie } from "@sps-woodland/illustrations";
+import { DragPreview as ae, useButton as oe, useDrag as se, useDrop as ce } from "react-aria";
+import { ZeroState as b } from "@sps-woodland/core/zero-state";
+import { Card as x } from "@sps-woodland/core/card";
+//#region src/add-to-list/add-to-list/AddToList.tsx
+function S({ onList: p, offList: S, onHeader: C, offHeader: w, showFilter: le, showCount: T, showIcons: E, showMoveAllLinks: D, manualSort: O, maxDisplayedItems: ue, maxHeightPx: k, maxHeightRem: de, onChange: A, onListZeroState: j, offListZeroState: M, vertical: N = !1, onListAlphaSort: P = !0, "data-testid": F }) {
+	let I = h({ "data-testid": F }), { t: L } = ee(), { formValue: fe, formMeta: R } = y({ filterString: "" }), [z, B] = g.useState(""), V = k ? k / 16 : de, H = V ? `${V}rem` : "", U = g.useCallback((t, n) => (!O && P || n === "right" ? [...t].sort((e, t) => e.label.localeCompare(t.label)) : t).map((t) => {
+		let n = { ...t };
+		return n.id ||= e(), n;
+	}), [O, P]), W = g.useMemo(() => U(p, "left"), [p, U]), G = g.useMemo(() => U(S, "right"), [S, U]), K = g.useCallback((e) => !z || e.label.toLowerCase().includes(z.toLowerCase()), [z]), q = (e, t, n) => {
+		let r = n.find((t) => t.label === e);
+		r ? t === W ? A({
+			onList: [...W, r],
+			offList: G.filter((e) => e.label !== r.label)
+		}) : n === W && A({
+			onList: W.filter((e) => e.label !== r.label),
+			offList: [...G, r]
+		}) : console.error("could not remove item");
+	};
+	function pe(e) {
+		B(e.target.value);
+	}
+	function J(e) {
+		A(e === "left" ? {
+			onList: W.filter((e) => e.required),
+			offList: [...G, ...W.filter((e) => !e.required)]
+		} : {
+			onList: [...W, ...G],
+			offList: []
+		});
+	}
+	let Y = g.useCallback((e) => {
+		let { className: t, index: n, isPhantomDroppableContainer: r, children: a, ...o } = e, s = g.useRef(null), { dropProps: l, isDropTarget: u } = ce({
+			ref: s,
+			async onDrop(e) {
+				let t = await Promise.all(e.items.filter((e) => e.kind === "text" && e.types.has("text/plain")).map((e) => e.getText("text/plain"))), { index: r } = JSON.parse(t[0]), i = [...W], [a] = i.splice(r, 1), o = n > r ? n - 1 : n;
+				i.splice(o, 0, a), A({
+					onList: i,
+					offList: G
+				});
+			}
+		});
+		return /* @__PURE__ */ g.createElement("div", {
+			ref: s,
+			...O ? l : [],
+			className: m(t, r ? c({ isDropTarget: u }) : i({ isDropTarget: u })),
+			...I("droppable-container"),
+			...o
+		}, a);
+	}, [W, O]), X = g.useCallback((e) => {
+		let { label: i, data: a, listIndex: o, required: s } = e, c = g.useRef(null), l = g.useRef(null), u = {
+			...a,
+			index: o
+		}, { dragProps: d, dragButtonProps: f, isDragging: p } = se({
+			preview: c,
+			hasDragButton: !0,
+			getItems() {
+				return [{ "text/plain": JSON.stringify(u) }];
+			}
+		}), { buttonProps: h } = oe(f, l);
+		return /* @__PURE__ */ g.createElement("div", {
+			...O ? d : {},
+			role: O ? "button" : "listitem",
+			tabIndex: 0,
+			id: `${i}${o}-drag`,
+			className: m(r({ isDragging: p })),
+			...I("draggable-item")
+		}, /* @__PURE__ */ g.createElement(Y, { index: o }, O && /* @__PURE__ */ g.createElement("i", {
+			...h,
+			ref: l,
+			className: "pkg_sps-woodland_core__family_add-to-list__version_8_56_3__hash_13b8tx9k"
+		}), i, !s && /* @__PURE__ */ g.createElement(v, {
+			kind: "icon",
+			icon: "x",
+			"aria-label": L("addToList.remove", {
+				elementName: i,
+				defaultValue: `Remove ${i}`
+			}),
+			onClick: () => {
+				q(i, G, W);
+			},
+			className: "pkg_sps-woodland_core__family_add-to-list__version_8_56_3__hash_13b8tx9x",
+			...I("move-item-button")
+		})), /* @__PURE__ */ g.createElement(ae, { ref: c }, () => /* @__PURE__ */ g.createElement("div", { className: n }, /* @__PURE__ */ g.createElement("i", { className: t }), i)));
+	}, [W, O]), Z = g.useMemo(() => W.filter(K), [W, K]), Q = g.useMemo(() => G.filter(K).slice(0, ue), [G, K]), me = !z && !!D && Z.length > 0, he = !z && !!D && Q.length > 0, ge = !z && G.length > Q.length, $ = !!O && !z && Z.length > 0 && !V;
+	return /* @__PURE__ */ g.createElement("div", { "data-testid": F }, le && /* @__PURE__ */ g.createElement("div", { className: _.root }, /* @__PURE__ */ g.createElement("div", { className: m(_[12], "pkg_sps-woodland_core__family_add-to-list__version_8_56_3__hash_13b8tx912") }, /* @__PURE__ */ g.createElement(te, {
+		value: fe.filterString,
+		formMeta: R.fields.filterString,
+		icon: ne.FILTER,
+		onChange: pe,
+		...I("filter-input")
+	}))), /* @__PURE__ */ g.createElement("div", { className: m(a({ vertical: N })) }, /* @__PURE__ */ g.createElement(d, {
+		headerText: C,
+		showCount: !z && T,
+		showIcons: E,
+		showMoveAllLinks: me,
+		disableMoveAllLinks: W.every((e) => e.required),
+		maxHeight: H,
+		vertical: N,
+		side: "left",
+		className: o({ vertical: N }),
+		otherHeader: w,
+		itemCount: W.length,
+		moveAll: J,
+		adjustForPhantomDroppableContainer: $,
+		...I("on-items-list")
+	}, Z.length > 0 ? /* @__PURE__ */ g.createElement(g.Fragment, null, O && !z && Z.map((e, t) => /* @__PURE__ */ g.createElement(g.Fragment, { key: e.id }, /* @__PURE__ */ g.createElement(X, {
+		data: e,
+		label: e.label,
+		required: e.required,
+		listIndex: t
+	}), t === Z.length - 1 && /* @__PURE__ */ g.createElement(Y, {
+		isPhantomDroppableContainer: !0,
+		index: t + 1
+	}))), (!O || z) && Z.map((e) => /* @__PURE__ */ g.createElement(f, {
+		key: e.id,
+		filtering: !!z,
+		manualSorting: O,
+		id: e.id,
+		...I("item")
+	}, e.label, !e.required && /* @__PURE__ */ g.createElement(v, {
+		kind: "icon",
+		icon: "x",
+		"aria-label": L("addToList.remove", {
+			elementName: e.label,
+			defaultValue: `Remove ${e.label}`
+		}),
+		onClick: () => {
+			q(e.label, G, W);
+		},
+		className: "pkg_sps-woodland_core__family_add-to-list__version_8_56_3__hash_13b8tx9x",
+		...I("move-item-button")
+	})))) : /* @__PURE__ */ g.createElement(x, null, j ? /* @__PURE__ */ g.createElement(g.Fragment, null, j) : /* @__PURE__ */ g.createElement(b, {
+		heading: L("addToList.noDataZeroStateColumnTitle", { defaultValue: "This Column is Empty" }),
+		subHeading: L("addToList.noDataZeroStateOnColumnSubheading", {
+			columnName: w,
+			defaultValue: `Move options from the ${w}`
+		}),
+		artwork: re,
+		micro: !0,
+		...I("on-list-zero-state")
+	}))), /* @__PURE__ */ g.createElement(d, {
+		headerText: w,
+		showCount: !z && T,
+		showIcons: E,
+		showMoveAllLinks: he,
+		showMoreOptionsText: ge,
+		maxHeight: H,
+		vertical: N,
+		side: "right",
+		className: l({ vertical: N }),
+		otherHeader: C,
+		itemCount: G.length,
+		moveAll: J,
+		adjustForPhantomDroppableContainer: $,
+		...I("off-items-list")
+	}, Q.length > 0 ? Q.map((e) => /* @__PURE__ */ g.createElement(f, {
+		key: e.id,
+		className: s,
+		...I("item")
+	}, e.label, /* @__PURE__ */ g.createElement(v, {
+		kind: "icon",
+		icon: "plus-sign",
+		"aria-label": L("addToList.add", {
+			elementName: e.label,
+			defaultValue: `Add ${e.label}`
+		}),
+		onClick: () => {
+			q(e.label, W, G);
+		},
+		className: u,
+		...I("move-item-button")
+	}))) : /* @__PURE__ */ g.createElement(x, null, M ? /* @__PURE__ */ g.createElement(g.Fragment, null, M) : /* @__PURE__ */ g.createElement(b, {
+		heading: L("addToList.noDataZeroStateColumnTitle", { defaultValue: "This Column is Empty" }),
+		subHeading: L("addToList.noDataZeroStateOffColumnSubheading", {
+			columnName: C,
+			defaultValue: `Remove options from the ${C}`
+		}),
+		artwork: ie,
+		micro: !0,
+		...I("off-list-zero-state")
+	})))));
 }
-Te.set(Oe, {
-  name: "Add To List",
-  props: {
-    onList: { type: "ItemProps[]", required: !0 },
-    offList: { type: "ItemProps[]", required: !0 },
-    onHeader: { type: "string" },
-    offHeader: { type: "string" },
-    showFilter: { type: "boolean" },
-    showCount: { type: "boolean" },
-    showIcons: { type: "boolean" },
-    showMoveAllLinks: { type: "boolean" },
-    manualSort: { type: "boolean" },
-    maxDisplayedItems: { type: "number" },
-    maxHeight: { type: "string" },
-    onChange: { type: "(newValue: AddToListAggregateValue) => void" },
-    autoSort: { type: "boolean" },
-    onListZeroState: { type: "ZeroState" },
-    offListZeroState: { type: "ZeroState" }
-  }
+p.set(S, {
+	name: "Add To List",
+	props: {
+		onList: {
+			type: "ItemProps[]",
+			required: !0
+		},
+		offList: {
+			type: "ItemProps[]",
+			required: !0
+		},
+		onHeader: { type: "string" },
+		offHeader: { type: "string" },
+		showFilter: { type: "boolean" },
+		showCount: { type: "boolean" },
+		showIcons: { type: "boolean" },
+		showMoveAllLinks: { type: "boolean" },
+		manualSort: { type: "boolean" },
+		maxDisplayedItems: { type: "number" },
+		maxHeight: { type: "string" },
+		onChange: { type: "(newValue: AddToListAggregateValue) => void" },
+		autoSort: { type: "boolean" },
+		onListZeroState: { type: "ZeroState" },
+		offListZeroState: { type: "ZeroState" }
+	}
 });
-export {
-  Oe as AddToList
-};
+//#endregion
+export { S as AddToList };