@shipengine/elements 2.18.0 → 2.20.0

package/esm/components/forms/wallet-form/wallet-form.js

@@ -0,0 +1,196 @@
+import { __awaiter } from 'tslib';
+import { jsxs, jsx, Fragment } from '@emotion/react/jsx-runtime';
+import { useBlackboxDetection } from '../../../hooks/use-black-box-detection.js';
+import { useNestedForm } from '../../../hooks/use-nested-form.js';
+import { formLogger } from '../../../utilities/form-logger.js';
+import { isPoBoxAddress } from '../../../utilities/shipengine/address.js';
+import { validationResolver } from '../../../utilities/validation.js';
+import { useState, useCallback } from 'react';
+import { useForm } from 'react-hook-form';
+import { useTranslation } from 'react-i18next';
+import { Grid, GridChild, InlineNotification, NotificationType, Typography, ButtonVariant } from '@shipengine/giger';
+import { EditWalletAddressForm } from '../edit-wallet-address-form/edit-wallet-address-form.js';
+import { BillingFields } from './billing-fields.js';
+import { styles } from './wallet-form.styles.js';
+import { getWalletSchema } from './wallet-schema.js';
+import { useAddressPreference } from '../../address-preference-context/address-preference-context.js';
+import { AddressFields } from '../address-form/address-fields.js';
+import { VatSettings } from '../../../features/vat-settings/vat-settings.js';
+import { Spacer } from '../../spacer/spacer.js';
+import { AddressDisplay } from '../../address-display/address-display.js';
+import { ButtonGroup } from '../../button-group/button-group.js';
+import { SubmitButton } from '../../field/submit-button/submit-button.js';
+
+const WalletForm = ({
+  address,
+  errors,
+  onSubmit,
+  showVatSettings
+}) => {
+  const {
+    t
+  } = useTranslation(["register-wallet", "common"]);
+  const defaultWarehouseIsPoBox = isPoBoxAddress(address);
+  const {
+    validateAddress
+  } = useAddressPreference();
+  const [codedErrors, setCodedErrors] = useState(errors);
+  const form = useForm({
+    defaultValues:
+    // If the warehouse address is a PO Box they cannot use it as their billing address
+    defaultWarehouseIsPoBox ? {
+      address: {
+        countryCode: "US"
+      }
+    } : {
+      address: Object.assign(Object.assign({}, address), {
+        countryCode: address.countryCode
+      })
+    },
+    resolver: validationResolver(getWalletSchema("emailOptional", "blackboxRequired"), ["creditCard"])
+  });
+  const formSetValue = form.setValue;
+  useBlackboxDetection({
+    onError: useCallback(() => {
+      setCodedErrors(errors => {
+        const blackBoxError = {
+          errorCode: "unspecified",
+          errorSource: "client",
+          errorType: "unknown",
+          message: t("register-wallet:sections.notifications.blackBox.description")
+        };
+        return [...(errors !== null && errors !== void 0 ? errors : []), blackBoxError];
+      });
+    }, [t]),
+    onSuccess: useCallback(bb => formSetValue("iovationBlackbox", bb), [formSetValue])
+  });
+  const watchAddress = form.watch("address");
+  const handleSubmit = form.handleSubmit(values => __awaiter(void 0, void 0, void 0, function* () {
+    const payload = values;
+    yield validateAddress({
+      addresses: {
+        originAddress: payload.address
+      },
+      data: {
+        creditCard: payload.creditCard,
+        iovationBlackbox: payload.iovationBlackbox
+      },
+      onValid: validatedAddressesPayload => __awaiter(void 0, void 0, void 0, function* () {
+        yield onSubmit({
+          address: validatedAddressesPayload.originAddress,
+          creditCard: payload.creditCard,
+          iovationBlackbox: payload.iovationBlackbox
+        });
+      })
+    });
+  }));
+  const [editWalletAddressForm, isEditWalletAddressFormOpen, toggleIsEditWalletAddressFormOpen] = useNestedForm(EditWalletAddressForm, {
+    address: watchAddress,
+    formId: "edit-address-form",
+    onSubmit: payload => __awaiter(void 0, void 0, void 0, function* () {
+      return form.setValue("address", Object.assign({}, payload));
+    })
+  });
+  return jsxs(Grid, Object.assign({
+    css: styles.grid,
+    noPadding: true
+  }, {
+    children: [jsx(GridChild, Object.assign({
+      colSpan: 12
+    }, {
+      children: jsxs("form", Object.assign({
+        id: "wallet-form",
+        onSubmit: formLogger.capture(handleSubmit)
+      }, {
+        children: [jsx(GridChild, Object.assign({
+          colSpan: 12
+        }, {
+          children: !!(codedErrors === null || codedErrors === void 0 ? void 0 : codedErrors.length) && jsxs(Fragment, {
+            children: [jsx(InlineNotification, Object.assign({
+              title: t("register-wallet:sections.notifications.error.title"),
+              type: NotificationType.ERROR
+            }, {
+              children: codedErrors.map(({
+                message
+              }) => message).join(" ")
+            })), jsx(Spacer, {
+              multiplier: 2
+            })]
+          })
+        })), jsx(GridChild, Object.assign({
+          colSpan: 12
+        }, {
+          children: jsx(BillingFields, {
+            form: form
+          })
+        })), jsx(GridChild, Object.assign({
+          colSpan: 12
+        }, {
+          children: jsx(Typography, Object.assign({
+            variant: "subtitle1"
+          }, {
+            children: t("register-wallet:sections.billing.addressSubTitle")
+          }))
+        })), jsx(Spacer, {
+          multiplier: 1
+        }), defaultWarehouseIsPoBox ? jsxs(Fragment, {
+          children: [jsx(GridChild, Object.assign({
+            colSpan: 12
+          }, {
+            children: jsx(InlineNotification, Object.assign({
+              title: t("register-wallet:sections.notifications.poBox.title"),
+              type: NotificationType.INFO
+            }, {
+              children: t("register-wallet:sections.notifications.poBox.description")
+            }))
+          })), jsx(GridChild, Object.assign({
+            colSpan: 12
+          }, {
+            children: jsx(AddressFields, {
+              form: form,
+              formatFieldName: fieldName => `address.${fieldName}`,
+              optionalFields: ["addressLine2", "email"]
+            })
+          }))]
+        }) : jsxs(Fragment, {
+          children: [jsx(GridChild, Object.assign({
+            colSpan: 12
+          }, {
+            children: jsx(AddressDisplay, {
+              address: form.getValues("address"),
+              onEdit: !isEditWalletAddressFormOpen ? () => toggleIsEditWalletAddressFormOpen() : undefined
+            })
+          })), jsx(GridChild, Object.assign({
+            colSpan: 12
+          }, {
+            children: editWalletAddressForm
+          }))]
+        })]
+      }))
+    })), showVatSettings && jsxs(GridChild, Object.assign({
+      colSpan: 12
+    }, {
+      children: [jsx(Typography, Object.assign({
+        variant: "subtitle1"
+      }, {
+        children: t("register-wallet:sections.vatSettings.title")
+      })), jsx(VatSettings, {})]
+    })), jsx(GridChild, Object.assign({
+      colSpan: 12
+    }, {
+      children: jsx(ButtonGroup, Object.assign({
+        justify: "center"
+      }, {
+        children: jsx(SubmitButton, Object.assign({
+          control: form.control,
+          form: "wallet-form",
+          variant: ButtonVariant.FILLED
+        }, {
+          children: t("actions.continue")
+        }))
+      }))
+    }))]
+  }));
+};
+
+export { WalletForm };

package/esm/components/forms/wallet-form/wallet-form.styles.js

@@ -0,0 +1,12 @@
+import { createStyles, scopeTheme } from '../../../utilities/styles.js';
+
+const styles = createStyles({
+  centeredText: () => ({
+    textAlign: "center"
+  }),
+  grid: theme => ({
+    margin: scopeTheme(theme).spacing(1)
+  })
+});
+
+export { styles };

package/esm/components/forms/wallet-form/wallet-schema.js

@@ -0,0 +1,90 @@
+import { __rest } from 'tslib';
+import { getExpirationYears } from '../../../utilities/date.js';
+import { isPoBox } from '../../../utilities/shipengine/address.js';
+import cardValidator from 'card-validator';
+import { isValidPhoneNumber } from 'libphonenumber-js/min';
+import { z } from 'zod';
+import { addressSchema, addressLine1Schema, addressLine2Schema } from '../address-form/address-schema.js';
+import { addressNameRegex, usStateCodes, postalCodeRegex } from '../../../constants/shipengine/address.js';
+
+const expirationYears = getExpirationYears(15);
+const creditCardTypes = ["visa", "mastercard", "american-express", "discover"];
+const expirationMonths = ["01", "02", "03", "04", "05", "06", "07", "08", "09", "10", "11", "12"];
+const walletEmailSchemas = {
+  emailOptional: addressSchema.shape.email,
+  emailRequired: z.string().trim().email().min(1)
+};
+const walletBlackboxSchemas = {
+  blackboxOptional: z.string().trim().optional(),
+  blackboxRequired: z.string().trim().min(1)
+};
+const getBillingAddressSchema = emailRequirement => {
+  return addressSchema.extend({
+    addressLine1: addressLine1Schema.refine(v => !isPoBox(v), "schemaErrors.invalidAddressPoBox"),
+    addressLine2: addressLine2Schema.refine(v => !v || !isPoBox(v), "schemaErrors.invalidAddressPoBox"),
+    companyName: z.string().trim().min(1),
+    email: walletEmailSchemas[emailRequirement],
+    phone: z.string().trim().min(1)
+  }).refine(schema => schema.name.match(addressNameRegex), {
+    message: "schemaErrors.invalidAddressNameOnboarding",
+    path: ["name"]
+  }).refine(schema => !schema.phone || isValidPhoneNumber(schema.phone, schema.countryCode), {
+    message: "schemaErrors.notAValidPhoneNumber",
+    path: ["phone"]
+  }).refine(schema => {
+    if (schema.countryCode === "US") {
+      return schema.stateProvince && usStateCodes.includes(schema.stateProvince);
+    }
+    return true;
+  }, {
+    message: "schemaErrors.invalidStateProvince",
+    path: ["stateProvince"]
+  }).refine(schema => {
+    if (schema.countryCode === "US") {
+      return postalCodeRegex.test(schema.postalCode);
+    }
+    return true;
+  }, {
+    message: "schemaErrors.invalidPostalCode",
+    path: ["postalCode"]
+  });
+};
+const creditCardSchema = z.object({
+  cvv: z.string().trim().refine(cvv => cardValidator.cvv(cvv, [3, 4]).isValid, "Invalid CVV"),
+  expiration: z.string().trim().refine(expiration => {
+    const [expirationMonth, expirationYear] = expiration.split("/");
+    return expirationMonths.includes(expirationMonth) && expirationYears.includes(expirationYear);
+  }, "schemaErrors.invalidExpirationDate"),
+  name: addressSchema.shape.name.refine(name => name.match(addressNameRegex), "schemaErrors.invalidAddressNameOnboarding"),
+  number: z.string().trim().refine(number => cardValidator.number(number).isValid, "Invalid card number").refine(number => {
+    var _a, _b;
+    return !((_a = cardValidator.number(number).card) === null || _a === void 0 ? void 0 : _a.type) || creditCardTypes.includes((_b = cardValidator.number(number).card) === null || _b === void 0 ? void 0 : _b.type);
+  }, "schemaErrors.invalidCreditCardType")
+}).transform(schema => {
+  var _a;
+  const {
+      cvv,
+      expiration
+    } = schema,
+    creditCard = __rest(schema, ["cvv", "expiration"]);
+  const creditCardVendor = (_a = cardValidator.number(creditCard.number).card) === null || _a === void 0 ? void 0 : _a.type;
+  const [expirationMonth, expirationYear] = expiration.split("/").map(v => parseInt(v, 10));
+  return {
+    cardNumber: creditCard.number,
+    cvv: cvv,
+    expirationMonth: expirationMonth,
+    expirationYear: expirationYear,
+    name: creditCard.name,
+    provider: creditCardVendor === "american-express" ? "americanExpress" : creditCardVendor
+  };
+});
+const getWalletSchema = (emailRequirement, blackboxRequirement) => {
+  const billingAddressSchema = getBillingAddressSchema(emailRequirement);
+  return z.object({
+    address: billingAddressSchema,
+    creditCard: creditCardSchema,
+    iovationBlackbox: walletBlackboxSchemas[blackboxRequirement]
+  });
+};
+
+export { getBillingAddressSchema, getWalletSchema, walletBlackboxSchemas, walletEmailSchemas };

package/esm/components/forms/warehouse-form/index.js

@@ -0,0 +1,2 @@
+export { WarehouseForm } from './warehouse-form.js';
+export { getWarehouseAddressSchema, getWarehouseSchema } from './warehouse-form-schema.js';

package/esm/components/forms/warehouse-form/warehouse-form-schema.js

@@ -0,0 +1,52 @@
+import { isValidPhoneNumber } from 'libphonenumber-js/min';
+import { z } from 'zod';
+import { addressSchema } from '../address-form/address-schema.js';
+import { addressNameRegex, usStateCodes, postalCodeRegex } from '../../../constants/shipengine/address.js';
+
+const getWarehouseAddressSchema = (useStrict, emailRequired, companyNameRequired) => {
+  return addressSchema.extend({
+    addressResidentialIndicator: z.preprocess(v => v === "yes" ? true : false, z.boolean().default(false).transform(value => value ? "yes" : "no")),
+    companyName: companyNameRequired ? z.string().trim().min(1) : addressSchema.shape.companyName,
+    email: emailRequired ? z.string().trim().email().min(1) : addressSchema.shape.email,
+    name: useStrict ? addressSchema.shape.name.regex(addressNameRegex, "schemaErrors.invalidAddressNameOnboarding") : addressSchema.shape.name,
+    phone: z.string().trim().min(1)
+  }).refine(schema => !schema.phone || isValidPhoneNumber(schema.phone, schema.countryCode), {
+    message: "schemaErrors.notAValidPhoneNumber",
+    path: ["phone"]
+  }).refine(schema => {
+    if (schema.countryCode === "US") {
+      return schema.stateProvince && usStateCodes.includes(schema.stateProvince);
+    }
+    return true;
+  }, {
+    message: "schemaErrors.invalidStateProvince",
+    path: ["stateProvince"]
+  }).refine(schema => {
+    if (schema.countryCode === "US") {
+      return postalCodeRegex.test(schema.postalCode);
+    }
+    return true;
+  }, {
+    message: "schemaErrors.invalidPostalCode",
+    path: ["postalCode"]
+  });
+};
+const getWarehouseSchema = (useStrict, emailRequired, companyNameRequired = true) => {
+  const warehouseAddressSchema = getWarehouseAddressSchema(useStrict, emailRequired, companyNameRequired);
+  return z.discriminatedUnion("returnToAddressIsDifferent", [z.object({
+    isDefault: z.boolean(),
+    name: z.string().trim().min(1),
+    originAddress: warehouseAddressSchema,
+    returnAddress: warehouseAddressSchema,
+    returnToAddressIsDifferent: z.literal(true),
+    warehouseId: z.string().optional()
+  }), z.object({
+    isDefault: z.boolean(),
+    name: z.string().trim().min(1),
+    originAddress: warehouseAddressSchema,
+    returnToAddressIsDifferent: z.literal(false),
+    warehouseId: z.string().optional()
+  })]);
+};
+
+export { getWarehouseAddressSchema, getWarehouseSchema };

package/esm/components/forms/warehouse-form/warehouse-form.js

@@ -0,0 +1,179 @@
+import { __awaiter, __rest } from 'tslib';
+import { jsxs, Fragment, jsx } from '@emotion/react/jsx-runtime';
+import { formLogger } from '../../../utilities/form-logger.js';
+import { validationResolver } from '../../../utilities/validation.js';
+import isEqual from 'lodash/isEqual.js';
+import { useForm } from 'react-hook-form';
+import { useTranslation } from 'react-i18next';
+import { Button, ButtonVariant } from '@shipengine/giger';
+import { getWarehouseSchema } from './warehouse-form-schema.js';
+import { AddressFields } from '../address-form/address-fields.js';
+import { useAddressPreference } from '../../address-preference-context/address-preference-context.js';
+import { TextInput } from '../../field/text-input/text-input.js';
+import { CheckboxInput } from '../../field/checkbox-input/checkbox-input.js';
+import { ButtonGroup } from '../../button-group/button-group.js';
+import { SubmitButton } from '../../field/submit-button/submit-button.js';
+import { Portal } from '../../portal/portal.js';
+
+const WarehouseForm = ({
+  onCancel,
+  formId,
+  onDelete,
+  onSubmit,
+  portalRef,
+  requireEmail,
+  submitButtonTitle,
+  warehouse,
+  shouldForceDefault,
+  useStrictSchema: _useStrictSchema = false
+}) => {
+  var _a;
+  const {
+    t
+  } = useTranslation(["common", "manage-warehouses"]);
+  const {
+    validateAddress,
+    userInput
+  } = useAddressPreference();
+  const hasDefaultValues = !!warehouse || !!userInput;
+  const form = useForm({
+    defaultValues: warehouse ? Object.assign(Object.assign({}, warehouse), {
+      isDefault: warehouse.isDefault,
+      originAddress: Object.assign(Object.assign({}, warehouse.originAddress), {
+        countryCode: warehouse.originAddress.countryCode
+      }),
+      returnAddress: Object.assign(Object.assign({}, warehouse.returnAddress), {
+        countryCode: warehouse.returnAddress.countryCode
+      }),
+      returnToAddressIsDifferent: !isEqual(warehouse.originAddress, warehouse.returnAddress)
+    }) : userInput ? Object.assign(Object.assign({}, userInput), {
+      originAddress: Object.assign(Object.assign({}, userInput.originAddress), {
+        countryCode: userInput.originAddress.countryCode
+      }),
+      returnAddress: Object.assign(Object.assign({}, userInput.returnAddress), {
+        countryCode: (_a = userInput.returnAddress) === null || _a === void 0 ? void 0 : _a.countryCode
+      }),
+      returnToAddressIsDifferent: !!userInput.returnAddress
+    }) : {
+      isDefault: !!shouldForceDefault,
+      originAddress: {
+        addressResidentialIndicator: false
+      },
+      returnToAddressIsDifferent: false
+    },
+    resolver: validationResolver(getWarehouseSchema(_useStrictSchema, requireEmail))
+  });
+  const handleSubmit = form.handleSubmit(values => __awaiter(void 0, void 0, void 0, function* () {
+    const _b = values,
+      payload = __rest(_b, ["returnToAddressIsDifferent"]);
+    const passengerData = {
+      isDefault: payload.isDefault,
+      name: payload.name
+    };
+    yield validateAddress({
+      addresses: payload,
+      data: payload.warehouseId ? Object.assign(Object.assign({}, passengerData), {
+        warehouseId: payload.warehouseId
+      }) : passengerData,
+      onValid: validatedAddressesPayload => {
+        onSubmit(Object.assign(Object.assign(Object.assign({}, validatedAddressesPayload), {
+          isDefault: payload.isDefault,
+          name: payload.name
+        }), payload.warehouseId && {
+          warehouseId: payload.warehouseId
+        }));
+      }
+    });
+  }));
+  const formInterface = jsxs(Fragment, {
+    children: [jsx(TextInput, {
+      "aria-required": "true",
+      control: form.control,
+      form: formId,
+      label: t("manage-warehouses:locationName"),
+      name: "name",
+      nativeLabel: true
+    }), jsx(AddressFields, {
+      form: form,
+      formatFieldName: fieldName => `originAddress.${fieldName}`,
+      optionalFields: ["addressLine2", ...(requireEmail ? [] : ["email"])]
+    }), !shouldForceDefault && jsx(CheckboxInput, {
+      ariaLabel: "Is Default Warehouse",
+      checkboxLabel: t("manage-warehouses:isDefault"),
+      control: form.control,
+      form: formId,
+      label: "isDefault",
+      name: "isDefault"
+    }), jsx(CheckboxInput, {
+      ariaLabel: "Return To Address Is Different",
+      checkboxLabel: t("manage-warehouses:returnToAddressIsDifferent"),
+      control: form.control,
+      "data-testid": "returnToAddressIsDifferent",
+      form: formId,
+      label: "returnToAddressIsDifferent",
+      name: "returnToAddressIsDifferent",
+      onClick: e => {
+        if (e.currentTarget.checked) {
+          form.reset(formValues => Object.assign(Object.assign({}, formValues), {
+            returnAddress: Object.assign(Object.assign({}, {}), {
+              addressResidentialIndicator: false,
+              companyName: "",
+              countryCode: "US"
+            }),
+            returnToAddressIsDifferent: true
+          }), {
+            keepErrors: true
+          });
+        }
+      }
+    }), form.watch("returnToAddressIsDifferent") && jsx(Fragment, {
+      children: jsx(AddressFields, {
+        form: form,
+        formatFieldName: fieldName => `returnAddress.${fieldName}`,
+        optionalFields: ["addressLine2"]
+      })
+    }), jsxs(ButtonGroup, Object.assign({
+      justify: "center"
+    }, {
+      children: [onDelete && jsx(Button, Object.assign({
+        bold: false,
+        onClick: onDelete,
+        type: "button",
+        variant: ButtonVariant.TEXT
+      }, {
+        children: t("actions.remove")
+      })), jsxs(ButtonGroup, Object.assign({
+        justify: onCancel ? "end" : "center"
+      }, {
+        children: [onCancel && jsx(Button, Object.assign({
+          bold: false,
+          onClick: onCancel,
+          type: "button",
+          variant: ButtonVariant.TEXT
+        }, {
+          children: t("actions.cancel")
+        })), jsx(SubmitButton, Object.assign({
+          control: form.control,
+          "data-testid": "warehouseFormSubmitButton",
+          form: formId,
+          requireDirty: !hasDefaultValues,
+          variant: onCancel ? ButtonVariant.OUTLINED : ButtonVariant.FILLED
+        }, {
+          children: submitButtonTitle
+        }))]
+      }))]
+    }))]
+  });
+  return jsx("form", Object.assign({
+    id: formId,
+    onSubmit: formLogger.capture(handleSubmit)
+  }, {
+    children: portalRef !== undefined ? jsx(Portal, Object.assign({
+      target: portalRef
+    }, {
+      children: formInterface
+    })) : formInterface
+  }));
+};
+
+export { WarehouseForm };

package/esm/components/grid-controller/cell-formatted-date.js

@@ -0,0 +1,21 @@
+import { jsx } from '@emotion/react/jsx-runtime';
+import { formatByDateAndLocale, formatDate } from '../../utilities/date.js';
+import { Typography } from '@shipengine/giger';
+import { useElements } from '../../elements-provider/elements-context-provider.js';
+
+const CellFormattedDate = ({
+  date,
+  short
+}) => {
+  const {
+    locale: defaultLocale
+  } = useElements();
+  return jsx(Typography, Object.assign({
+    component: "span",
+    variant: "body2"
+  }, {
+    children: short ? formatByDateAndLocale(new Date(date), defaultLocale) : formatDate(date, defaultLocale)
+  }));
+};
+
+export { CellFormattedDate };

package/esm/components/grid-controller/grid-controller.js

@@ -0,0 +1,107 @@
+import { jsxs, jsx } from '@emotion/react/jsx-runtime';
+import { useState, useMemo, useCallback } from 'react';
+import { Table, TableFooter, TableHeader, TableHeaderRow, TableHeaderCell, Checkbox, TableBody, TableRow, TableBodyCell } from '@shipengine/giger';
+import { styles } from './grid-controller.styles.js';
+
+/**
+ * @internal
+ *
+ * # Grid Controller
+ *
+ * - The `<GridController />` component is used to facilitate the display of data in a grid format.
+ *
+ * @see {@link GridProps | The props for the `<GridController />` component}
+ */
+const GridController = ({
+  columns,
+  data,
+  footerContent,
+  onRowClick,
+  useCheckboxes: _useCheckboxes = false,
+  filters,
+  emptyContent
+}) => {
+  var _a, _b, _c;
+  const [isChecked, setIsChecked] = useState((_a = data === null || data === void 0 ? void 0 : data.map(() => false)) !== null && _a !== void 0 ? _a : []);
+  const getColumnHeaderContents = () => {
+    return columns.map(column => column.headerContent);
+  };
+  const isAllChecked = useMemo(() => isChecked.length > 0 && isChecked.every(check => check), [isChecked]);
+  const isIndeterminate = useMemo(() => isChecked.some(check => check), [isChecked]);
+  const toggleCheckbox = useCallback(index => {
+    setIsChecked(prior => {
+      const next = [...prior];
+      next[index] = !next[index];
+      return next;
+    });
+  }, []);
+  const toggleAllCheckboxes = useCallback(value => {
+    setIsChecked(prior => {
+      const next = [...prior];
+      for (const index of next.entries()) next[index[0]] = value;
+      return next;
+    });
+  }, []);
+  return jsxs("div", Object.assign({
+    css: styles.wrapper
+  }, {
+    children: [filters && jsx("div", Object.assign({
+      css: styles.filters
+    }, {
+      children: filters
+    })), data.length === 0 && emptyContent ? emptyContent : jsx(Table, Object.assign({
+      "data-testid": "grid",
+      footer: footerContent && jsx(TableFooter, Object.assign({
+        css: styles.tableFooter
+      }, {
+        children: footerContent
+      })),
+      header: jsx(TableHeader, {
+        children: jsxs(TableHeaderRow, {
+          children: [_useCheckboxes && jsx(TableHeaderCell, Object.assign({
+            css: styles.checkboxHeader
+          }, {
+            children: jsx(Checkbox, {
+              checked: (_b = isAllChecked || isIndeterminate) !== null && _b !== void 0 ? _b : false,
+              indeterminate: (_c = !isAllChecked && isIndeterminate) !== null && _c !== void 0 ? _c : false,
+              onChange: event => toggleAllCheckboxes(event.target.checked)
+            })
+          })), getColumnHeaderContents().map((header, index) => jsx(TableHeaderCell, Object.assign({
+            css: styles.tableHeader
+          }, {
+            children: header
+          }), index))]
+        })
+      }),
+      outerWrapperStyles: styles.tableWrapper,
+      tableStyles: styles.table
+    }, {
+      children: jsx(TableBody, {
+        children: data.map((row, index) => {
+          var _a;
+          const allowOnClick = !!onRowClick && !(row === null || row === void 0 ? void 0 : row.disableOnRowClick);
+          return jsxs(TableRow, Object.assign({
+            "data-testid": "grid-row",
+            onClick: allowOnClick ? () => onRowClick(row) : undefined,
+            withHover: !(row === null || row === void 0 ? void 0 : row.disableOnRowClick)
+          }, {
+            children: [_useCheckboxes && jsx(TableBodyCell, Object.assign({
+              css: row === null || row === void 0 ? void 0 : row.bodyCellStyles
+            }, {
+              children: jsx(Checkbox, {
+                checked: (_a = isChecked[index]) !== null && _a !== void 0 ? _a : false,
+                onChange: () => toggleCheckbox(index)
+              })
+            })), columns.filter(column => column.renderCellContent).map((column, index) => jsx(TableBodyCell, Object.assign({
+              css: row === null || row === void 0 ? void 0 : row.bodyCellStyles
+            }, {
+              children: column.renderCellContent(row)
+            }), index))]
+          }), index);
+        })
+      })
+    }))]
+  }));
+};
+
+export { GridController };