@sps-woodland/core 8.51.2 → 8.52.0

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

@@ -1,284 +0,0 @@
-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

@@ -1,17 +0,0 @@
-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

@@ -1 +0,0 @@
-{"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

@@ -1,67 +0,0 @@
-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

@@ -1,8 +0,0 @@
-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

@@ -1 +0,0 @@
-{"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

@@ -1,51 +0,0 @@
-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

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

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

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