@sps-woodland/core 8.50.2 → 8.51.0

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

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

package/lib/add-to-list/add-to-list/ItemsList.d.ts

@@ -0,0 +1,17 @@
+import type { ComponentProps } from "@sps-woodland/core";
+export declare function ItemsList({ headerText, showCount, showIcons, showMoveAllLinks, showMoreOptionsText, disableMoveAllLinks, maxHeight, children, side, itemCount, otherHeader, className, vertical, moveAll, adjustForPhantomDroppableContainer, "data-testid": dataTestId, }: ComponentProps<{
+    headerText?: string;
+    showCount?: boolean;
+    showIcons?: boolean;
+    showMoveAllLinks?: boolean;
+    showMoreOptionsText?: boolean;
+    disableMoveAllLinks?: boolean;
+    maxHeight?: string;
+    side: string;
+    itemCount: number;
+    otherHeader?: string;
+    vertical: boolean;
+    moveAll?: (side: string) => void;
+    adjustForPhantomDroppableContainer?: boolean;
+}>): JSX.Element;
+//# sourceMappingURL=ItemsList.d.ts.map

package/lib/add-to-list/add-to-list/ItemsList.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ItemsList.d.ts","sourceRoot":"","sources":["../../../src/add-to-list/add-to-list/ItemsList.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,oBAAoB,CAAC;AAQzD,wBAAgB,SAAS,CAAC,EACxB,UAAU,EACV,SAAS,EACT,SAAS,EACT,gBAAgB,EAChB,mBAAmB,EACnB,mBAAmB,EACnB,SAAS,EACT,QAAQ,EACR,IAAI,EACJ,SAAS,EACT,WAAW,EACX,SAAS,EACT,QAAQ,EACR,OAAO,EACP,kCAAkC,EAClC,aAAa,EAAE,UAAU,GAC1B,EAAE,cAAc,CAAC;IAChB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,IAAI,EAAE,MAAM,CAAC;IACb,SAAS,EAAE,MAAM,CAAC;IAClB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,EAAE,OAAO,CAAC;IAClB,OAAO,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACjC,kCAAkC,CAAC,EAAE,OAAO,CAAC;CAC9C,CAAC,eA6ED"}

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

@@ -0,0 +1,67 @@
+import * as e from "react";
+import { useChildTestIdAttrBuilder as B, cl as S, Icon as H } from "@sps-woodland/core";
+import { Tag as y } from "@sps-woodland/core/tag";
+import { SpsButton as A } from "@spscommerce/ds-react";
+import { ButtonKind as F } from "@spscommerce/ds-shared";
+import { ScrollableContainer as W } from "@sps-woodland/core/scrollable-container";
+import { FeedbackBlock as K } from "@sps-woodland/core/feedback-block";
+import { listItemsSeparator as M, listComponentWrapper as O, columnHeads as R, headIcons as j, headTag as x, listItemsWrapper as f, moveAllButtonAdjustmentForPhantomDroppableContainer as D } from "./AddToList.css.js";
+import { useWoodlandLanguage as P } from "@spscommerce/i18n";
+function X({
+  headerText: u,
+  showCount: p,
+  showIcons: h,
+  showMoveAllLinks: E,
+  showMoreOptionsText: v,
+  disableMoveAllLinks: L,
+  maxHeight: r,
+  children: n,
+  side: t,
+  itemCount: a,
+  otherHeader: N,
+  className: T,
+  vertical: m,
+  moveAll: l,
+  adjustForPhantomDroppableContainer: s,
+  "data-testid": i
+}) {
+  const c = B({ "data-testid": i }), { t: o } = P(), k = o(t === "left" ? "addToList.onColumnHeader" : "addToList.offColumnHeader"), C = t === "left" ? "eye" : "eye-slash", g = o(t === "left" ? "addToList.offColumnHeader" : "addToList.onColumnHeader"), I = o("addToList.moveAllItemsToCol", {
+    columnName: N || g
+  }), d = m ? /* @__PURE__ */ e.createElement(e.Fragment, null) : /* @__PURE__ */ e.createElement(
+    "div",
+    {
+      className: M({
+        isLeftSide: t === "left",
+        isRightSide: t === "right",
+        adjustForPhantomDroppableContainer: !!s && t === "left"
+      })
+    }
+  );
+  function b() {
+    l && typeof l == "function" && l(t);
+  }
+  return /* @__PURE__ */ e.createElement(
+    "div",
+    {
+      className: S(O({ vertical: m }), T),
+      "data-testid": i
+    },
+    /* @__PURE__ */ e.createElement("div", { className: R, ...c("column-header") }, h && /* @__PURE__ */ e.createElement(H, { icon: C, className: j }), u || k, p && /* @__PURE__ */ e.createElement(y, { kind: "key", className: x }, a)),
+    r ? /* @__PURE__ */ e.createElement("div", { className: f }, d, /* @__PURE__ */ e.createElement(W, { maxHeight: r }, n)) : /* @__PURE__ */ e.createElement("div", { className: f }, d, n),
+    E && a > 0 && /* @__PURE__ */ e.createElement(
+      A,
+      {
+        className: s && t === "right" ? D : void 0,
+        kind: F.LINK,
+        onClick: b,
+        disabled: L,
+        ...c("move-all-button")
+      },
+      I
+    ),
+    v && a > 0 && /* @__PURE__ */ e.createElement(K, { kind: "info", micro: !0 }, o("addToList.moreOptionsAvailable", { defaultValue: "More options available. Use the search field to filter results." }))
+  );
+}
+export {
+  X as ItemsList
+};

package/lib/add-to-list/add-to-list/ListItem.d.ts

@@ -0,0 +1,8 @@
+import * as React from "react";
+import type { ComponentProps } from "@sps-woodland/core";
+export declare function ListItem({ className, children, filtering, manualSorting, id, "data-testid": dataTestId, }: ComponentProps<{
+    filtering?: boolean;
+    manualSorting?: boolean;
+    id?: number | string;
+}, HTMLDivElement>): React.ReactElement;
+//# sourceMappingURL=ListItem.d.ts.map

package/lib/add-to-list/add-to-list/ListItem.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ListItem.d.ts","sourceRoot":"","sources":["../../../src/add-to-list/add-to-list/ListItem.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,oBAAoB,CAAC;AAMzD,wBAAgB,QAAQ,CAAC,EACvB,SAAS,EACT,QAAQ,EACR,SAAS,EACT,aAAa,EACb,EAAE,EACF,aAAa,EAAE,UAAU,GAC1B,EAAE,cAAc,CACf;IACE,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,EAAE,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;CACtB,EACD,cAAc,CACf,GAAG,KAAK,CAAC,YAAY,CAmCrB"}

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

@@ -0,0 +1,51 @@
+import * as e from "react";
+import { Metadata as m, cl as d } from "@sps-woodland/core";
+import { SpsTooltip as n } from "@spscommerce/ds-react";
+import { TooltipShowTrigger as p, Position as c } from "@spscommerce/ds-shared";
+import { droppableContainer as g, listItem as f, dragHandleDisabled as T } from "./AddToList.css.js";
+import { useWoodlandLanguage as u } from "@spscommerce/i18n";
+function L({
+  className: r,
+  children: i,
+  filtering: t,
+  manualSorting: a,
+  id: o,
+  "data-testid": l
+}) {
+  const { t: s } = u();
+  return /* @__PURE__ */ e.createElement(e.Fragment, null, /* @__PURE__ */ e.createElement(
+    "div",
+    {
+      role: "listitem",
+      className: d(
+        r,
+        g({ isDropTarget: !1 }),
+        f,
+        "listitem-component"
+      ),
+      "data-testid": l
+    },
+    a && t && /* @__PURE__ */ e.createElement(
+      "i",
+      {
+        className: T,
+        id: `list-item-${o}-drag-handle`
+      }
+    ),
+    i
+  ), a && t && /* @__PURE__ */ e.createElement(
+    n,
+    {
+      for: `list-item-${o}-drag-handle`,
+      position: c.TOP_LEFT,
+      showOn: p.CLICK
+    },
+    s("addToList.disabledDragTooltip", {
+      defaultValue: "Drag and drop are disabled when filters are engaged"
+    })
+  ));
+}
+m.set(L, { name: "ListItem" });
+export {
+  L as ListItem
+};

package/lib/add-to-list/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./add-to-list/AddToList";
+//# sourceMappingURL=index.d.ts.map

package/lib/add-to-list/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/add-to-list/index.ts"],"names":[],"mappings":"AAAA,cAAc,yBAAyB,CAAC"}