envoc-form 3.3.0 → 4.0.1-0

package/README.md

@@ -5,4 +5,13 @@
 Base form package for envoc projects.
 
 [npm-badge]: https://img.shields.io/npm/v/envoc-form.png?style=flat
-[npm]: https://www.npmjs.com/package/envoc-form
+[npm]: https://www.npmjs.com/package/envoc-form
+
+Important naming conventions for our sanity while creating envoc-form types:
+
+- TForm = The type of the some form. e.g. LoginDto
+- TProp = The key / symbol of a indvidual property of some form. e.g. TProp would be literally "Username" for the prop of the same name for a LoginDto
+- TValue = The value of an indvidual property of some form. e.g. a "Username" property would probably have a TValue of string
+- Field = the abstract thing that deals with some specific TProp. Might represent several composed elements (e.g. label, input, helperText, etc) or may just be a direct component
+- TRenderComponent = The type of any 'Component' passed to a Field, e.g. 'StandardTextInputGroup' passed to Component means TRenderComponent is typeof(StandardTextInputGroup)
+- TComponentProps = For any 'Component' passed to a Field as a prop, this represents that Component's props

package/dist/css/envoc-form-styles.css

@@ -1,116 +1,3 @@
-.react-date-picker {
-  padding: 0;
-}
-.react-date-picker.react-date-picker--open {
-  border: 1px solid #8ad4ee;
-  box-shadow: 0 0 0 0.2rem rgba(32, 168, 216, 0.25);
-}
-.react-date-picker.react-date-picker--disabled {
-  background-color: #f2f2f2;
-  border-color: #e6e6e6;
-}
-.react-date-picker .react-date-picker__wrapper {
-  width: 100%;
-  border: none;
-}
-.react-date-picker .react-date-picker__inputGroup {
-  width: 100%;
-  margin-left: 10px;
-}
-.react-date-picker .is-invalid.react-date-picker {
-  border: 1px solid #f86c6b;
-}
-.react-date-picker .react-date-picker__calendar {
-  z-index: 3;
-}
-.react-date-picker .react-date-picker__inputGroup__input {
-  min-width: 18px;
-  text-align: center;
-}
-.react-date-picker .react-date-picker__inputGroup__input.react-date-picker__inputGroup__year {
-  min-width: 40px;
-}
-.react-date-picker .react-calendar__tile--now {
-  outline: 1px solid rgba(0, 0, 0, 0.5);
-}
 
-.inline-form-input.form-group {
-  display: inline-block;
-}
-
-input.money-input {
-  text-align: right;
-}
-
-.invalid-feedback {
-  display: block;
-}
-
-.form-group input[disabled] {
-  cursor: not-allowed;
-}
-
-.file-input.is-invalid .custom-file-label {
-  border: 1px solid #f86c6b;
-}
-
-.custom-file-input:disabled ~ .custom-file-label {
-  background-color: #f2f2f2;
-  border-color: #e6e6e6;
-}
-.custom-file-input:disabled ~ .custom-file-label:after {
-  display: none !important;
-}
-
-section.react-dropzone > div {
-  display: flex;
-  flex: 1;
-  flex-direction: column;
-  align-items: center;
-  border: 1px dashed #d8dbe0;
-  border-radius: 0.25rem;
-  background-color: white;
-  color: #8a93a2;
-  outline: none;
-  margin: 0;
-  padding: 20px;
-  transition: "border .24s ease-in-out";
-  cursor: pointer;
-}
-section.react-dropzone > div:focus, section.react-dropzone > div:focus-within {
-  border-color: #958bef;
-  box-shadow: 0 0 0 0.2rem rgba(50, 31, 219, 0.25);
-}
-section.react-dropzone.active > div, section.react-dropzone.accept > div {
-  border-color: #958bef;
-  box-shadow: 0 0 0 0.2rem rgba(50, 31, 219, 0.25);
-}
-section.react-dropzone.reject > div {
-  color: #e55353;
-  border-color: #e55353;
-  box-shadow: rgba(229, 83, 83, 0.25) 0px 0px 0px 3.2px;
-}
-section.react-dropzone.disabled > div {
-  background-color: #f2f2f2;
-  border-color: #e6e6e6;
-  cursor: no-drop;
-}
-section.react-dropzone > aside > .list-group:not(:empty) {
-  margin-top: 1rem;
-}
-
-.field-array-card {
-  margin-bottom: 1rem;
-}
-.field-array-card .field-array-item.removed {
-  display: none;
-}
-.field-array-card .field-array-item > .remove-array-item {
-  display: flex;
-}
-
-div.react-select-input.has-error {
-  border-color: #f86c6b;
-}
 
 /*# sourceMappingURL=envoc-form-styles.css.map */

package/dist/css/envoc-form-styles.css.map

@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["../../src/DatePickerInput/date-picker-input.scss","../../src/InlineFormInput/inline-form-input.scss","../../src/MoneyInput/money-input.scss","../../src/FormInput/form-input.scss","../../src/FileInput/file-input.scss","../../src/_variables.scss","../../src/FormInputArray/form-input-array.scss","../../src/ReactSelectField/react-select-field.scss"],"names":[],"mappings":"AAEA;EACE;;AACA;EACE;EACA;;AAEF;EACE;EACA;;AAGF;EACE;EACA;;AAGF;EACE;EACA;;AAGF;EACE;;AAGF;EACE;;AAEF;EACE;EACA;;AACA;EACE;;AAIJ;EACE;;;ACvCJ;EACE;;;ACDF;EACE;;;ACDF;EACE;;;AAIA;EACE;;;ACFA;EACE;;;AAKN;EACE,kBCFgC;EDGhC,cCF4B;;ADG5B;EACE;;;AAKF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EAEE;EACA;;AAGJ;EAEE;EACA;;AAEF;EACE;EACA;EACA;;AAEF;EACE,kBCzC8B;ED0C9B,cCzC0B;ED0C1B;;AAEF;EACE;;;AEvDJ;EACE;;AAGE;EACE;;AAGF;EACE;;;ACPN;EACE,cFDI","file":"envoc-form-styles.css"}
+{"version":3,"sourceRoot":"","sources":[],"names":[],"mappings":"","file":"envoc-form-styles.css"}

package/es/AddressInput/AddressInput.d.ts

@@ -0,0 +1,15 @@
+/// <reference types="react" />
+import { FormBuilderProp } from '../Form/Form';
+export interface AddressInputProps {
+    fieldBuilder: Pick<FormBuilderProp<AddressDto>, 'Field'>;
+    name: string;
+}
+interface AddressDto {
+    address1?: string;
+    address2?: string;
+    zipCode?: string;
+    city?: string;
+    state?: string;
+}
+export default function AddressInput({ fieldBuilder: { Field }, name, }: AddressInputProps): JSX.Element;
+export {};

package/es/AddressInput/AddressInput.js

@@ -1,97 +1,21 @@
-import _extends from "@babel/runtime/helpers/esm/extends";
-import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
-import _createClass from "@babel/runtime/helpers/esm/createClass";
-import _inherits from "@babel/runtime/helpers/esm/inherits";
-import _possibleConstructorReturn from "@babel/runtime/helpers/esm/possibleConstructorReturn";
-import _getPrototypeOf from "@babel/runtime/helpers/esm/getPrototypeOf";
-var _excluded = ["name"];
-
-function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
-
-function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
-
-import React from 'react';
-import { Col, Row } from 'reactstrap';
-import PropTypes from 'prop-types';
-import FormInput from '../FormInput';
-import FormSection from '../FormSection';
-import validators from '../validators';
-import * as normalizers from '../normalizers';
-import UsStates from './UsStates';
-
-var AddressInput = /*#__PURE__*/function (_React$Component) {
-  _inherits(AddressInput, _React$Component);
-
-  var _super = _createSuper(AddressInput);
-
-  function AddressInput() {
-    _classCallCheck(this, AddressInput);
-
-    return _super.apply(this, arguments);
-  }
-
-  _createClass(AddressInput, [{
-    key: "render",
-    value: function render() {
-      var _this$props = this.props,
-          name = _this$props.name,
-          props = _objectWithoutProperties(_this$props, _excluded);
-
-      return /*#__PURE__*/React.createElement(FormSection, _extends({
-        name: name
-      }, props), /*#__PURE__*/React.createElement(FormInput, {
-        name: "address1",
-        placeholder: "Address, Line 1",
-        label: "Address 1",
-        autoComplete: "address-line1",
-        validate: validators.required
-      }), /*#__PURE__*/React.createElement(FormInput, {
-        name: "address2",
-        placeholder: "Address, Line 2",
-        label: "Address 2",
-        autoComplete: "address-line2"
-      }), /*#__PURE__*/React.createElement(FormInput, {
-        name: "city",
-        placeholder: "City",
-        label: "City",
-        autoComplete: "address-level2",
-        validate: validators.required
-      }), /*#__PURE__*/React.createElement(Row, null, /*#__PURE__*/React.createElement(Col, {
-        xs: 8
-      }, /*#__PURE__*/React.createElement(FormInput, {
-        name: "state",
-        placeholder: "State",
-        label: "State",
-        type: "select",
-        options: UsStates,
-        autoComplete: "address-level1",
-        validate: validators.required
-      })), /*#__PURE__*/React.createElement(Col, {
-        xs: 4
-      }, /*#__PURE__*/React.createElement(FormInput, {
-        name: "zipCode",
-        placeholder: "Zip",
-        label: "Zip",
-        autoComplete: "postal-code",
-        normalize: normalizers.zipCode,
-        validate: [validators.required, validators.zipCode]
-      }))));
-    }
-  }]);
-
-  return AddressInput;
-}(React.Component);
-
-export { AddressInput as default };
-AddressInput.propTypes = {
-  /**
-   * The key that the resulting values should be nested under within the form values.
-   * If name prop were chicken the submitted form values would look like: {chicken: {address1:...}}
-   * this allows us to have two address inputs inside the same form (shipping and billing address)
-   */
-  name: PropTypes.string
-};
-AddressInput.defaultProps = {
-  name: 'address'
-};
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import UsStates from './UsStates';
+import { SingleStringSelectGroup, StringInputGroup } from '../';
+import FieldSection from '../Field/FieldSection';
+import { zipCode as zipCodeNormalizer } from '../Normalization/normalizers';
+import { required, zipCode as zipCodeValidator, } from '../Validation/validators';
+export default function AddressInput(_a) {
+    var Field = _a.fieldBuilder.Field, name = _a.name;
+    return (_jsx(_Fragment, { children: _jsxs(FieldSection, __assign({ name: name }, { children: [_jsx(Field, { name: "address1", placeholder: "Address, Line 1", label: "Address 1", Component: StringInputGroup, validate: required }), _jsx(Field, { name: "address2", placeholder: "Address, Line 2", label: "Address 2", Component: StringInputGroup }), _jsx(Field, { name: "city", placeholder: "City", label: "City", Component: StringInputGroup, validate: required }), _jsx(Field, { name: "state", placeholder: "State", label: "State", Component: SingleStringSelectGroup, options: UsStates, validate: required }), _jsx(Field, { name: "zipCode", placeholder: "Zip", label: "Zip", Component: StringInputGroup, normalize: zipCodeNormalizer, validate: [required, zipCodeValidator] })] })) }));
+}

package/es/AddressInput/UsStates.d.ts

@@ -0,0 +1,3 @@
+import { SelectOption } from '../Select/SelectGroup';
+declare const states: SelectOption<string>[];
+export default states;

package/es/AddressInput/UsStates.js

@@ -1,152 +1,53 @@
-var states = [{
-  label: 'Alabama',
-  value: 'AL'
-}, {
-  label: 'Alaska',
-  value: 'AK'
-}, {
-  label: 'Arizona',
-  value: 'AZ'
-}, {
-  label: 'Arkansas',
-  value: 'AR'
-}, {
-  label: 'California',
-  value: 'CA'
-}, {
-  label: 'Colorado',
-  value: 'CO'
-}, {
-  label: 'Connecticut',
-  value: 'CT'
-}, {
-  label: 'Delaware',
-  value: 'DE'
-}, {
-  label: 'Florida',
-  value: 'FL'
-}, {
-  label: 'Georgia',
-  value: 'GA'
-}, {
-  label: 'Hawaii',
-  value: 'HI'
-}, {
-  label: 'Idaho',
-  value: 'ID'
-}, {
-  label: 'Illinois',
-  value: 'IL'
-}, {
-  label: 'Indiana',
-  value: 'IN'
-}, {
-  label: 'Iowa',
-  value: 'IA'
-}, {
-  label: 'Kansas',
-  value: 'KS'
-}, {
-  label: 'Kentucky',
-  value: 'KY'
-}, {
-  label: 'Louisiana',
-  value: 'LA'
-}, {
-  label: 'Maine',
-  value: 'ME'
-}, {
-  label: 'Maryland',
-  value: 'MD'
-}, {
-  label: 'Massachusetts',
-  value: 'MA'
-}, {
-  label: 'Michigan',
-  value: 'MI'
-}, {
-  label: 'Minnesota',
-  value: 'MN'
-}, {
-  label: 'Mississippi',
-  value: 'MS'
-}, {
-  label: 'Missouri',
-  value: 'MO'
-}, {
-  label: 'Montana',
-  value: 'MT'
-}, {
-  label: 'Nebraska',
-  value: 'NE'
-}, {
-  label: 'Nevada',
-  value: 'NV'
-}, {
-  label: 'New Hampshire',
-  value: 'NH'
-}, {
-  label: 'New Jersey',
-  value: 'NJ'
-}, {
-  label: 'New Mexico',
-  value: 'NM'
-}, {
-  label: 'New York',
-  value: 'NY'
-}, {
-  label: 'North Carolina',
-  value: 'NC'
-}, {
-  label: 'North Dakota',
-  value: 'ND'
-}, {
-  label: 'Ohio',
-  value: 'OH'
-}, {
-  label: 'Oklahoma',
-  value: 'OK'
-}, {
-  label: 'Oregon',
-  value: 'OR'
-}, {
-  label: 'Pennsylvania',
-  value: 'PA'
-}, {
-  label: 'Rhode Island',
-  value: 'RI'
-}, {
-  label: 'South Carolina',
-  value: 'SC'
-}, {
-  label: 'South Dakota',
-  value: 'SD'
-}, {
-  label: 'Tennessee',
-  value: 'TN'
-}, {
-  label: 'Texas',
-  value: 'TX'
-}, {
-  label: 'Utah',
-  value: 'UT'
-}, {
-  label: 'Vermont',
-  value: 'VT'
-}, {
-  label: 'Virginia',
-  value: 'VA'
-}, {
-  label: 'Washington',
-  value: 'WA'
-}, {
-  label: 'West Virginia',
-  value: 'WV'
-}, {
-  label: 'Wisconsin',
-  value: 'WI'
-}, {
-  label: 'Wyoming',
-  value: 'WY'
-}];
-export default states;
+var states = [
+    { label: 'Alabama', value: 'AL' },
+    { label: 'Alaska', value: 'AK' },
+    { label: 'Arizona', value: 'AZ' },
+    { label: 'Arkansas', value: 'AR' },
+    { label: 'California', value: 'CA' },
+    { label: 'Colorado', value: 'CO' },
+    { label: 'Connecticut', value: 'CT' },
+    { label: 'Delaware', value: 'DE' },
+    { label: 'Florida', value: 'FL' },
+    { label: 'Georgia', value: 'GA' },
+    { label: 'Hawaii', value: 'HI' },
+    { label: 'Idaho', value: 'ID' },
+    { label: 'Illinois', value: 'IL' },
+    { label: 'Indiana', value: 'IN' },
+    { label: 'Iowa', value: 'IA' },
+    { label: 'Kansas', value: 'KS' },
+    { label: 'Kentucky', value: 'KY' },
+    { label: 'Louisiana', value: 'LA' },
+    { label: 'Maine', value: 'ME' },
+    { label: 'Maryland', value: 'MD' },
+    { label: 'Massachusetts', value: 'MA' },
+    { label: 'Michigan', value: 'MI' },
+    { label: 'Minnesota', value: 'MN' },
+    { label: 'Mississippi', value: 'MS' },
+    { label: 'Missouri', value: 'MO' },
+    { label: 'Montana', value: 'MT' },
+    { label: 'Nebraska', value: 'NE' },
+    { label: 'Nevada', value: 'NV' },
+    { label: 'New Hampshire', value: 'NH' },
+    { label: 'New Jersey', value: 'NJ' },
+    { label: 'New Mexico', value: 'NM' },
+    { label: 'New York', value: 'NY' },
+    { label: 'North Carolina', value: 'NC' },
+    { label: 'North Dakota', value: 'ND' },
+    { label: 'Ohio', value: 'OH' },
+    { label: 'Oklahoma', value: 'OK' },
+    { label: 'Oregon', value: 'OR' },
+    { label: 'Pennsylvania', value: 'PA' },
+    { label: 'Rhode Island', value: 'RI' },
+    { label: 'South Carolina', value: 'SC' },
+    { label: 'South Dakota', value: 'SD' },
+    { label: 'Tennessee', value: 'TN' },
+    { label: 'Texas', value: 'TX' },
+    { label: 'Utah', value: 'UT' },
+    { label: 'Vermont', value: 'VT' },
+    { label: 'Virginia', value: 'VA' },
+    { label: 'Washington', value: 'WA' },
+    { label: 'West Virginia', value: 'WV' },
+    { label: 'Wisconsin', value: 'WI' },
+    { label: 'Wyoming', value: 'WY' },
+];
+export default states;

package/es/ConfirmBaseForm/ConfirmBaseForm.d.ts

@@ -0,0 +1,10 @@
+import React, { MouseEventHandler } from 'react';
+import { useAxiosRequestProps } from 'envoc-request';
+export interface ConfirmBaseFormProps {
+    handleCancel?: MouseEventHandler<HTMLButtonElement>;
+    request: useAxiosRequestProps;
+    style?: React.CSSProperties;
+    title?: string;
+    children?: React.ReactNode;
+}
+export default function ConfirmBaseForm({ handleCancel, request, style, title, children, ...props }: ConfirmBaseFormProps): JSX.Element;

package/es/ConfirmBaseForm/ConfirmBaseForm.js

@@ -1,43 +1,35 @@
-import _extends from "@babel/runtime/helpers/esm/extends";
-import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
-import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-var _excluded = ["handleCancel", "request", "yesColor", "style", "title"];
-
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
-
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
-
-import React from 'react';
-import { Button } from 'reactstrap';
-import { useAxiosRequest } from 'envoc-request';
-export default function ConfirmBaseForm(_ref) {
-  var handleCancel = _ref.handleCancel,
-      request = _ref.request,
-      _ref$yesColor = _ref.yesColor,
-      yesColor = _ref$yesColor === void 0 ? 'danger' : _ref$yesColor,
-      style = _ref.style,
-      title = _ref.title,
-      props = _objectWithoutProperties(_ref, _excluded);
-
-  var webRequest = useAxiosRequest(Object.assign({}, request, {
-    autoExecute: false
-  }));
-  return /*#__PURE__*/React.createElement("div", _extends({
-    style: _objectSpread({
-      textAlign: 'center'
-    }, style)
-  }, props), /*#__PURE__*/React.createElement("h3", null, title), /*#__PURE__*/React.createElement(Button, {
-    color: yesColor,
-    onClick: webRequest.submitRequest,
-    disabled: webRequest.loading
-  }, "Yes"), /*#__PURE__*/React.createElement(Button, {
-    type: "button",
-    color: "link",
-    disabled: webRequest.loading,
-    onClick: handleCancel || goBack
-  }, "Cancel"));
-
-  function goBack() {
-    window.history.back();
-  }
-}
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import classNames from 'classnames';
+import { useAxiosRequest } from 'envoc-request';
+// TODO: ask about how we should use 'children'
+export default function ConfirmBaseForm(_a) {
+    var handleCancel = _a.handleCancel, request = _a.request, style = _a.style, title = _a.title, children = _a.children, props = __rest(_a, ["handleCancel", "request", "style", "title", "children"]);
+    var webRequest = useAxiosRequest(Object.assign({}, request, { autoExecute: false }));
+    var onCancel = handleCancel !== null && handleCancel !== void 0 ? handleCancel : goBack;
+    return (_jsxs("div", __assign({ style: __assign({ textAlign: 'center' }, style) }, props, { children: [_jsx("h3", { children: title }), children, _jsx("button", __assign({ className: classNames('confirm-base-form-yes-button'), type: "button", onClick: webRequest.submitRequest }, { children: "Yes" })), _jsx("button", __assign({ className: classNames('confirm-base-form-cancel-button'), type: "button", onClick: onCancel }, { children: "Cancel" }))] })));
+    function goBack() {
+        window.history.back();
+    }
+}

package/es/ConfirmDeleteForm/ConfirmDeleteForm.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+import { ConfirmBaseFormProps } from '../ConfirmBaseForm/ConfirmBaseForm';
+export interface ConfirmDeleteFormProps extends Pick<ConfirmBaseFormProps, 'style'> {
+    successUrl?: string;
+    form: string;
+    title?: string;
+    handleComplete?: Function;
+    handleError?: Function;
+    children?: React.ReactNode;
+}
+export default function ConfirmDeleteForm({ successUrl, form, title, handleComplete, handleError, children, ...props }: ConfirmDeleteFormProps): JSX.Element;