@dmsi/wedgekit-react 0.0.161 → 0.0.163

package/dist/components/index.js

@@ -4,21 +4,6 @@ import {
 import {
   Select
 } from "../chunk-XH65MD2C.js";
-import {
-  PaymentOnAccountModal
-} from "../chunk-WFLOAGEI.js";
-import "../chunk-NT2ZKA4W.js";
-import "../chunk-WFGKIR5A.js";
-import "../chunk-BATIOCXB.js";
-import "../chunk-FCREADUH.js";
-import "../chunk-4RJKB7LC.js";
-import "../chunk-C4JGTH6G.js";
-import "../chunk-SYEJVSE4.js";
-import "../chunk-R7ELP5C5.js";
-import "../chunk-ZFOANBWG.js";
-import "../chunk-PLMGI5K5.js";
-import "../chunk-AZ7LVLOK.js";
-import "../chunk-EPQLWHCL.js";
 import {
   Checkbox
 } from "../chunk-WFQEE2OO.js";
@@ -27,10 +12,10 @@ import {
   DataGridCell,
   DragAlongCell,
   DraggableCellHeader
-} from "../chunk-SBSHZ327.js";
+} from "../chunk-O4JGGMFE.js";
 import {
   Menu
-} from "../chunk-RLK4TBXR.js";
+} from "../chunk-UBU6IJML.js";
 import "../chunk-5GUW4DUY.js";
 import {
   MenuOption
@@ -575,6 +560,7 @@ function ColumnSelectorHeaderCell({
             position: "bottom-right",
             show,
             setShow,
+            calculateMinMaxHeight: true,
             children: [
               /* @__PURE__ */ jsx7(
                 Button,
@@ -1124,7 +1110,6 @@ export {
   Menu,
   MenuOption,
   Paragraph,
-  PaymentOnAccountModal,
   Search,
   Select,
   Subheader,

package/dist/index.css

@@ -1872,9 +1872,6 @@
   .py-\[calc\(var\(--spacing-mobile-component-padding\)_\+_3px\)\] {
     padding-block: calc(var(--spacing-mobile-component-padding) + 3px);
   }
-  .py-desktop-component-padding {
-    padding-block: var(--spacing-desktop-component-padding);
-  }
   .py-mobile-component-gap {
     padding-block: var(--spacing-mobile-component-gap);
   }
@@ -1893,9 +1890,6 @@
   .pt-\[7px\] {
     padding-top: 7px;
   }
-  .pr-desktop-component-padding {
-    padding-right: var(--spacing-desktop-component-padding);
-  }
   .pb-2 {
     padding-bottom: calc(var(--spacing) * 2);
   }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@dmsi/wedgekit-react",
   "private": false,
-  "version": "0.0.161",
+  "version": "0.0.163",
   "type": "module",
   "scripts": {
     "build": "tsup",

package/src/components/DataGrid/ColumnSelectorHeaderCell/index.tsx

@@ -43,6 +43,7 @@ export function ColumnSelectorHeaderCell<T>({
         position="bottom-right"
         show={show}
         setShow={setShow}
+        calculateMinMaxHeight
       >
         <Button
           id={id ? `${id}-reset-button` : undefined}

package/src/components/DataGridCell.tsx

@@ -405,7 +405,7 @@ export function DataCellHeader<T>({
                 </Menu>
               )}
             >
-              Freeze [{header.column.columnDef.header as string}]
+              {`Freeze [${header.column.columnDef.header as string}]`}
             </MenuOption>
           )}
         </Menu>

package/src/components/Menu.tsx

@@ -31,6 +31,7 @@ type MenuProps = {
   useDefaultMinWidth?: boolean;
   autoFocusOff?: boolean;
   menuName?: string;
+  calculateMinMaxHeight?: boolean;
 };
 
 export const Menu = ({
@@ -51,6 +52,7 @@ export const Menu = ({
   useDefaultMinWidth,
   autoFocusOff,
   menuName,
+  calculateMinMaxHeight,
   ...props
 }: ComponentProps<"div"> & MenuProps) => {
   const internalRef = useRef<HTMLDivElement>(null);
@@ -69,8 +71,12 @@ export const Menu = ({
   );
 
   useEffect(() => {
+    if (calculateMinMaxHeight) {
+      return;
+    }
+
     const raf = requestAnimationFrame(() => {
-      if (!actualRef || !actualRef.current || customMaxHeight) {
+      if (!actualRef.current || customMaxHeight) {
         return;
       }
 
@@ -85,15 +91,31 @@ export const Menu = ({
           accumulatedHeight += child.clientHeight;
         });
 
-        accumulatedHeight = (accumulatedHeight / 5) * 4.5;
+        accumulatedHeight = (accumulatedHeight / 5) * 4.5; // default max height is set to 4.5 times of the first 5 child height of the menu
 
         setMaxHeight(`${accumulatedHeight}px`);
       }
     });
+
     return () => {
       cancelAnimationFrame(raf);
     };
-  }, [actualRef, customMaxHeight]);
+  }, [actualRef.current, customMaxHeight, calculateMinMaxHeight]);
+
+  useEffect(() => {
+    if (!calculateMinMaxHeight) {
+      return;
+    }
+
+    if (positionTo?.current && actualRef.current) {
+      const positionToRect = positionTo.current.getBoundingClientRect();
+      const offsetInPx = 16;
+
+      const calculatedMaxHeight = window.innerHeight - positionToRect.bottom - offsetInPx;
+
+      setMaxHeight(`${calculatedMaxHeight}px`);
+    }
+  }, [actualRef.current, positionTo?.current, calculateMinMaxHeight])
 
   useEffect(() => {
     if (!show) {

package/src/components/index.ts

@@ -18,6 +18,5 @@ export { MenuOption } from "./MenuOption";
 export { Search } from "./Search";
 export { Tooltip } from "./Tooltip";
 export { Input } from "./Input";
-export { PaymentOnAccountModal } from "./PaymentOnAccountModal";
 export { Accordion } from "./Accordion";
 export { Card } from "./Card";

package/dist/chunk-BATIOCXB.js

@@ -1,138 +0,0 @@
-import {
-  Paragraph
-} from "./chunk-HVI3CL7Y.js";
-import {
-  baseTransition,
-  componentGap
-} from "./chunk-RDLEIAQU.js";
-import {
-  __objRest,
-  __spreadValues
-} from "./chunk-ORMEWXMH.js";
-
-// src/components/Radio.tsx
-import clsx from "clsx";
-import { jsx, jsxs } from "react/jsx-runtime";
-var Radio = (_a) => {
-  var _b = _a, {
-    className,
-    label,
-    error,
-    disabled,
-    checked,
-    readOnly,
-    id,
-    testid
-  } = _b, props = __objRest(_b, [
-    "className",
-    "label",
-    "error",
-    "disabled",
-    "checked",
-    "readOnly",
-    "id",
-    "testid"
-  ]);
-  const radioId = id;
-  const paragraphColor = disabled ? "text-primary-disabled" : error ? "text-primary-error" : "text-primary-normal";
-  const defaultClassName = clsx(
-    !error && !disabled && "border-border-primary-normal peer-hover:border-border-action-hover peer-hover:bg-background-action-secondary-hover peer-focus:border-border-action-hover peer-focus:bg-background-action-secondary-hover peer-active:border-border-action-active peer-active:bg-background-action-secondary-active peer-checked:border-0 peer-checked:bg-background-action-secondary-hover"
-  );
-  const errorClassName = clsx(
-    error && !disabled && "border-border-action-critical-normal peer-hover:border-border-action-critical-hover peer-hover:bg-background-action-critical-secondary-hover peer-focus:border-border-action-critical-hover peer-focus:bg-background-action-critical-secondary-hover peer-active:border-border-action-critical-active peer-active:bg-background-action-secondary-active peer-checked:bg-background-action-critical-secondary-hover peer-checked:border-0 "
-  );
-  const disabledClassName = clsx(
-    disabled && "peer-disabled:bg-background-action-secondary-disabled peer-disabled:border-border-primary-normal peer-checked:border-0"
-  );
-  const readonlyClassName = clsx(
-    readOnly && "peer-read-only:bg-background-action-secondary-disabled peer-read-only:border-border-primary-normal peer-checked:border-0"
-  );
-  return /* @__PURE__ */ jsxs(
-    "label",
-    {
-      htmlFor: radioId,
-      className: clsx(
-        "flex items-center",
-        componentGap,
-        disabled ? "cursor-default" : "cursor-pointer",
-        className
-      ),
-      children: [
-        /* @__PURE__ */ jsxs("div", { className: "relative", children: [
-          /* @__PURE__ */ jsx(
-            "input",
-            __spreadValues({
-              id: radioId,
-              "data-testid": testid,
-              type: "radio",
-              className: "sr-only peer",
-              disabled,
-              checked,
-              readOnly
-            }, props)
-          ),
-          /* @__PURE__ */ jsx(
-            "div",
-            {
-              className: clsx(
-                "size-6 rounded-full border flex items-center justify-center",
-                baseTransition,
-                defaultClassName,
-                errorClassName,
-                disabledClassName,
-                readonlyClassName
-              ),
-              children: checked && /* @__PURE__ */ jsx(
-                RadioIcon,
-                {
-                  className: clsx(
-                    "transition-colors",
-                    !error && !disabled && "text-icon-on-action-secondary-normal hover:text-icon-on-action-secondary-hover active:text-icon-on-action-secondary-active peer-hover:text-icon-on-action-secondary-hover peer-focus:text-icon-on-action-secondary-hover peer-active:text-icon-on-action-secondary-active",
-                    error && !disabled && "text-icon-action-critical-secondary-normal hover:text-icon-action-critical-secondary-hover active:text-icon-action-critical-secondary-active peer-hover:text-icon-action-critical-secondary-hover peer-focus:text-icon-action-critical-secondary-hover peer-active:text-icon-action-critical-secondary-active",
-                    disabled && "text-icon-on-action-secondary-disabled",
-                    readOnly && "text-icon-on-action-secondary-disabled"
-                  )
-                }
-              )
-            }
-          )
-        ] }),
-        label && /* @__PURE__ */ jsx(Paragraph, { id: radioId ? `${radioId}-label` : void 0, testid: testid ? `${testid}-label` : void 0, padded: true, color: paragraphColor, children: label })
-      ]
-    }
-  );
-};
-Radio.displayName = "Radio";
-var RadioIcon = ({ className }) => {
-  return /* @__PURE__ */ jsxs(
-    "svg",
-    {
-      className,
-      xmlns: "http://www.w3.org/2000/svg",
-      width: "24",
-      height: "24",
-      viewBox: "0 0 24 24",
-      fill: "none",
-      children: [
-        /* @__PURE__ */ jsx(
-          "rect",
-          {
-            x: "1",
-            y: "1",
-            width: "22",
-            height: "22",
-            rx: "11",
-            stroke: "currentColor",
-            strokeWidth: "2"
-          }
-        ),
-        /* @__PURE__ */ jsx("rect", { x: "4", y: "4", width: "16", height: "16", rx: "8", fill: "currentColor" })
-      ]
-    }
-  );
-};
-RadioIcon.displayName = "RadioIcon";
-
-export {
-  Radio
-};

package/dist/chunk-EPQLWHCL.js

@@ -1,11 +0,0 @@
-// src/components/HorizontalDivider.tsx
-import clsx from "clsx";
-import { jsx } from "react/jsx-runtime";
-function HorizontalDivider({ id, testid, hideOnMobile }) {
-  const hideOnMobileStyle = clsx(hideOnMobile && "hidden desktop:block");
-  return /* @__PURE__ */ jsx("hr", { id, "data-testid": testid, className: clsx("w-full border-t border-border-primary-normal", hideOnMobileStyle) });
-}
-
-export {
-  HorizontalDivider
-};

package/dist/chunk-NT2ZKA4W.js

@@ -1,266 +0,0 @@
-import {
-  WorldpayIframe
-} from "./chunk-WFGKIR5A.js";
-import {
-  Radio
-} from "./chunk-BATIOCXB.js";
-import {
-  Spinner
-} from "./chunk-PLMGI5K5.js";
-import {
-  HorizontalDivider
-} from "./chunk-EPQLWHCL.js";
-import {
-  Checkbox
-} from "./chunk-WFQEE2OO.js";
-import {
-  formatCurrencyDisplay,
-  formatDecimalValue
-} from "./chunk-5UH6QUFB.js";
-import {
-  Subheader
-} from "./chunk-CYZL57LH.js";
-import {
-  Accordion
-} from "./chunk-WSS2DFTP.js";
-import {
-  Stack
-} from "./chunk-N6JVLYEE.js";
-import {
-  Card
-} from "./chunk-4LXG6QNT.js";
-import {
-  Button
-} from "./chunk-FKMKHLQH.js";
-
-// src/components/SelectPaymentMethod.tsx
-import { useEffect, useState } from "react";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-function SelectPaymentMethod(props) {
-  const {
-    amountToPay,
-    selectedMethod,
-    onSelectMethod,
-    selectedCredits,
-    allCredits,
-    allowedMethods,
-    selectedACHBankGuid,
-    setSelectedACHBankGuid,
-    customerBanks,
-    onPay,
-    isPayLoading,
-    withCredits = false,
-    isLoadingCCiframe,
-    cardPaymentUrl,
-    testid
-  } = props;
-  const payAllWithCredits = withCredits && amountToPay <= 0;
-  useEffect(() => {
-    if (payAllWithCredits) {
-      onSelectMethod("CreditsOnly");
-    } else {
-      onSelectMethod(null);
-    }
-  }, [onSelectMethod, payAllWithCredits]);
-  function handleToggle(method) {
-    onSelectMethod(method);
-  }
-  return /* @__PURE__ */ jsxs(Stack, { sizing: "layout-group", width: "full", minWidth: 400, children: [
-    !!(allCredits == null ? void 0 : allCredits.length) && withCredits && /* @__PURE__ */ jsx(
-      CreditsSelector,
-      {
-        testid: testid ? `${testid}-credit-selector` : void 0,
-        selectedCredits: selectedCredits || [],
-        allCredits: allCredits || [],
-        setSelectedCredits: props.setSelectedCredits || (() => {
-        })
-      }
-    ),
-    (allowedMethods == null ? void 0 : allowedMethods.includes("ACHPayment")) && !!(customerBanks == null ? void 0 : customerBanks.length) && /* @__PURE__ */ jsx(
-      ACHSelector,
-      {
-        testid: testid ? `${testid}-ach-selector` : void 0,
-        selectedMethod,
-        handleToggle,
-        selectedBankGuid: selectedACHBankGuid || null,
-        setSelectedBankGuid: setSelectedACHBankGuid || (() => {
-        }),
-        customerBanks: customerBanks || [],
-        onPay,
-        isPayLoading: isPayLoading || false,
-        disabled: payAllWithCredits || !amountToPay
-      }
-    ),
-    (allowedMethods == null ? void 0 : allowedMethods.includes("CCPayment")) && /* @__PURE__ */ jsx(
-      Accordion,
-      {
-        testid: testid ? `${testid}-cc-payment` : void 0,
-        isOpen: !payAllWithCredits && selectedMethod === "CCPayment",
-        title: /* @__PURE__ */ jsx(
-          Radio,
-          {
-            testid: testid ? `${testid}-cc-payment-radio` : void 0,
-            label: "Pay by Credit/Debit Card",
-            checked: !payAllWithCredits && selectedMethod === "CCPayment",
-            onChange: (e) => e.stopPropagation(),
-            disabled: payAllWithCredits || !amountToPay
-          }
-        ),
-        onClick: () => {
-          if (payAllWithCredits || !amountToPay) return;
-          handleToggle(selectedMethod === "CCPayment" ? null : "CCPayment");
-        },
-        disabled: payAllWithCredits || !amountToPay,
-        children: /* @__PURE__ */ jsx(
-          Stack,
-          {
-            sizing: "layout-group",
-            width: "full",
-            items: "center",
-            justify: "center",
-            style: {
-              flex: 1
-            },
-            minHeight: 245,
-            children: !isLoadingCCiframe && cardPaymentUrl ? /* @__PURE__ */ jsx(WorldpayIframe, { url: cardPaymentUrl }) : /* @__PURE__ */ jsx(Spinner, {})
-          }
-        )
-      }
-    ),
-    selectedMethod === "ACHPayment" && /* @__PURE__ */ jsx(
-      Button,
-      {
-        block: true,
-        onClick: onPay,
-        disabled: isPayLoading || amountToPay <= 0,
-        testid: testid ? `${testid}-submit-payment-button` : void 0,
-        children: isPayLoading ? "Processing..." : "Submit Payment"
-      }
-    ),
-    payAllWithCredits && /* @__PURE__ */ jsx(
-      Button,
-      {
-        testid: testid ? `${testid}-submit-payment-button` : void 0,
-        block: true,
-        onClick: onPay,
-        disabled: isPayLoading,
-        children: isPayLoading ? "Processing..." : "Submit Payment"
-      }
-    )
-  ] });
-}
-function ACHSelector(props) {
-  const {
-    selectedMethod,
-    handleToggle,
-    selectedBankGuid,
-    setSelectedBankGuid,
-    customerBanks,
-    disabled,
-    testid
-  } = props;
-  function handleBankSelect(e, bankGuid) {
-    if (disabled) return;
-    e.stopPropagation();
-    setSelectedBankGuid(bankGuid);
-    handleToggle("ACHPayment");
-  }
-  return /* @__PURE__ */ jsx(Fragment, { children: customerBanks.map((bank) => /* @__PURE__ */ jsx(
-    Card,
-    {
-      testid: testid ? `${testid}-bank-${bank.CustBankGUID}` : void 0,
-      onClick: (e) => handleBankSelect(e, bank.CustBankGUID),
-      selected: !disabled && selectedMethod === "ACHPayment" && selectedBankGuid === bank.CustBankGUID,
-      children: /* @__PURE__ */ jsx(
-        Radio,
-        {
-          label: `Pay by ${bank.AccountDisplayString}`,
-          checked: !disabled && selectedMethod === "ACHPayment" && selectedBankGuid === bank.CustBankGUID,
-          disabled,
-          onChange: (e) => e.stopPropagation()
-        }
-      )
-    },
-    bank.CustBankGUID
-  )) });
-}
-function CreditsSelector(props) {
-  const { selectedCredits, allCredits, setSelectedCredits, testid } = props;
-  const [isOpen, setIsOpen] = useState(true);
-  const handleCreditSelect = (credit) => {
-    if (setSelectedCredits) {
-      setSelectedCredits(
-        (prev) => prev.includes(credit) ? prev.filter((c) => c !== credit) : [...prev, credit]
-      );
-    }
-  };
-  return /* @__PURE__ */ jsxs(
-    Accordion,
-    {
-      isOpen,
-      title: "Available Credits",
-      onClick: () => setIsOpen((prev) => !prev),
-      testid,
-      children: [
-        /* @__PURE__ */ jsx(HorizontalDivider, {}),
-        /* @__PURE__ */ jsx(Stack, { sizing: "layout-group", width: "full", children: /* @__PURE__ */ jsx(
-          Stack,
-          {
-            sizing: "layout-group",
-            width: "full",
-            overflowY: "auto",
-            maxHeight: 300,
-            children: allCredits.map((credits) => /* @__PURE__ */ jsxs(
-              Stack,
-              {
-                horizontal: true,
-                justify: "between",
-                items: "center",
-                sizing: "layout-group",
-                children: [
-                  /* @__PURE__ */ jsx(
-                    Stack,
-                    {
-                      sizing: "layout-group",
-                      onClick: () => handleCreditSelect(credits),
-                      paddingY: true,
-                      flexGrow: 1,
-                      testid: testid ? `${testid}-credit-${credits.InvoiceNumber}` : void 0,
-                      children: /* @__PURE__ */ jsx(
-                        Checkbox,
-                        {
-                          testid: testid ? `${testid}-credit-${credits.InvoiceNumber}-checkbox` : void 0,
-                          label: credits.InvoiceNumber,
-                          checked: selectedCredits == null ? void 0 : selectedCredits.includes(credits),
-                          onChange: () => handleCreditSelect(credits)
-                        }
-                      )
-                    }
-                  ),
-                  /* @__PURE__ */ jsxs(
-                    Subheader,
-                    {
-                      testid: testid ? `${testid}-credit-${credits.InvoiceNumber}-InvoiceBalanceDue` : void 0,
-                      className: " pr-desktop-component-padding",
-                      children: [
-                        "$",
-                        formatCurrencyDisplay(
-                          formatDecimalValue(Math.abs(credits.InvoiceBalanceDue), 2)
-                        )
-                      ]
-                    }
-                  )
-                ]
-              },
-              credits.AROpenGUID
-            ))
-          }
-        ) })
-      ]
-    }
-  );
-}
-
-export {
-  SelectPaymentMethod
-};

package/dist/chunk-WFGKIR5A.js

@@ -1,9 +0,0 @@
-// src/components/WorldpayIframe.tsx
-import { jsx } from "react/jsx-runtime";
-function WorldpayIframe({ url }) {
-  return /* @__PURE__ */ jsx("iframe", { src: url, style: { width: "100%", height: "100%", flex: 1 } });
-}
-
-export {
-  WorldpayIframe
-};