@tsed/react-formio 2.3.1 → 2.3.3

package/src/components/react-component/reactComponent.component.tsx

@@ -15,7 +15,6 @@ export class ReactComponent<Data = any> extends Components.components.field {
    * @param options - Any options passed into the renderer.
    * @param data - The submission data where this component's data exists.
    */
-  // eslint-disable-next-line no-useless-constructor,import/no-anonymous-default-export
   constructor(component: ComponentSchema, options: any, data: Submission<Data>) {
     super(component, options, data);
   }
@@ -105,18 +104,19 @@ export class ReactComponent<Data = any> extends Components.components.field {
    *
    * @param element
    */
-  // eslint-disable-next-line @typescript-eslint/no-empty-function
+
   attachReact(element?: any) {
-    // eslint-disable-next-line react/no-render-return-value
+    // eslint-disable-next-line react/no-render-return-value,react/no-deprecated
     return ReactDOM.render(this.renderReact(), element);
   }
 
   /**
    * Override this function.
    */
-  // eslint-disable-next-line @typescript-eslint/no-empty-function
+
   detachReact(element?: any) {
     if (element) {
+      // eslint-disable-next-line react/no-deprecated
       ReactDOM.unmountComponentAtNode(element);
     }
   }
@@ -127,7 +127,7 @@ export class ReactComponent<Data = any> extends Components.components.field {
    * @param value
    * @param flags
    */
-  setValue(value: any, flags?: any) {
+  setValue(value: any) {
     if (this.reactInstance) {
       this.reactInstance.setState({
         value: value

package/src/components/select/select.component.tsx

@@ -1,24 +1,20 @@
 import Choices from "@formio/choices.js";
 import classnames from "classnames";
-import PropTypes from "prop-types";
-import React, { ReactElement, useEffect, useRef } from "react";
+import React, { HTMLAttributes, ReactElement, useEffect, useRef } from "react";
 
 import { getEventValue } from "../../utils/getEventValue";
 import { FormControl, FormControlProps } from "../form-control/formControl.component";
 
-export interface SelectProps<T = any> extends FormControlProps {
-  value?: any;
+export interface SelectProps<Data = any> extends FormControlProps, Omit<HTMLAttributes<HTMLSelectElement>, "onChange" | "prefix"> {
   size?: string;
-  onChange?: (name: string, value: any) => void;
   placeholder?: string;
-  choices: { label: string; value: T }[];
+  choices: { label: string; value: Data }[];
   layout?: "html5" | "choicesjs";
+  disabled?: boolean;
   multiple?: boolean;
-
-  [key: string]: any;
 }
 
-export function Select<T = any>({
+export function Select<Data = any>({
   name,
   label,
   size,
@@ -33,14 +29,14 @@ export function Select<T = any>({
   multiple,
   layout,
   ...props
-}: SelectProps<T>): ReactElement {
-  const ref = useRef<any>();
+}: SelectProps<Data>): ReactElement {
+  const ref = useRef<HTMLSelectElement>(null);
 
   useEffect(() => {
     let instance: any;
 
     if (layout === "choicesjs") {
-      instance = new Choices(ref.current, {
+      instance = new Choices(ref.current as unknown as HTMLInputElement, {
         removeItemButton: true,
         placeholderValue: placeholder
       });
@@ -64,11 +60,11 @@ export function Select<T = any>({
 
   return (
     <FormControl name={name} label={label} required={required} description={description} prefix={prefix} suffix={suffix} shadow={false}>
-      {/* eslint-disable-next-line jsx-a11y/no-onchange */}
+      {}
       <select
         ref={ref}
-        {...props}
         data-testid={`select_${name}`}
+        {...props}
         className={classnames("form-control", size && `form-control-${size}`)}
         name={name}
         id={name}
@@ -90,12 +86,3 @@ export function Select<T = any>({
     </FormControl>
   );
 }
-
-Select.propTypes = {
-  label: PropTypes.string,
-  name: PropTypes.string.isRequired,
-  value: PropTypes.any,
-  required: PropTypes.bool,
-  onChange: PropTypes.func,
-  choices: PropTypes.array.isRequired
-};

package/src/components/table/components/defaultCellOperations.component.tsx

@@ -1,19 +1,32 @@
 import React from "react";
 
-import { DefaultOperationButton } from "./defaultOperationButton.component";
+import { DefaultOperationButton, OperationButtonProps } from "./defaultOperationButton.component";
 
-export function DefaultCellOperations({ operations, row, onClick, ctx, i18n }: any) {
+export interface DefaultCellOperationsProps {
+  operations: (OperationButtonProps & {
+    OperationButton: typeof DefaultOperationButton;
+    permissionsResolver?(data: unknown, ctx: any): boolean;
+  })[];
+  row: any;
+
+  onClick: (data: any, action: string) => void;
+  ctx: any;
+  i18n: (i18n: string) => string;
+}
+
+export function DefaultCellOperations({ operations, row, onClick, ctx, i18n }: DefaultCellOperationsProps) {
   const data = row.original;
 
   return (
     <div className='btn-group'>
       {operations
-        .filter(({ permissionsResolver }: any) => !permissionsResolver || permissionsResolver(data, ctx))
-        .map(({ OperationButton = DefaultOperationButton, ...operation }: any) => {
+        .filter(({ permissionsResolver }) => !permissionsResolver || permissionsResolver(data, ctx))
+        .map(({ OperationButton = DefaultOperationButton, ...operation }, index: number) => {
           return (
             <OperationButton
               key={operation.action}
               {...operation}
+              data-testid={`operation-${index}-${operation.action}`}
               onClick={(action: string) => onClick(data, action)}
               data={data}
               i18n={i18n}

package/src/components/table/components/defaultOperationButton.component.tsx

@@ -1,11 +1,10 @@
 import classnames from "classnames";
-import React from "react";
+import { HTMLAttributes } from "react";
 
 import { iconClass } from "../../../utils/iconClass";
 import { stopPropagationWrapper } from "../../../utils/stopPropagationWrapper";
 
-export interface OperationButtonProps {
-  className?: string;
+export interface OperationButtonProps extends Omit<HTMLAttributes<HTMLButtonElement>, "onClick"> {
   buttonType?: string;
   buttonSize?: string;
   buttonOutline?: boolean;
@@ -15,6 +14,7 @@ export interface OperationButtonProps {
   icon?: string;
   title?: string;
   i18n?: (i18n: string) => string;
+  ctx?: any;
 }
 
 export function DefaultOperationButton(props: OperationButtonProps) {
@@ -27,11 +27,18 @@ export function DefaultOperationButton(props: OperationButtonProps) {
     action,
     icon = "",
     title = "",
-    i18n = (f: string) => f
+    i18n = (f: string) => f,
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    data,
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    ctx,
+    ...otherProps
   } = props;
 
   return (
     <button
+      {...otherProps}
+      aria-label={"Operation button: " + (title || action)}
       className={classnames(className, ["btn", buttonOutline && "outline", buttonType].filter(Boolean).join("-"), `btn-${buttonSize}`)}
       onClick={stopPropagationWrapper(() => onClick(action))}
     >

package/src/components/table/components/defaultRow.component.tsx

@@ -21,6 +21,7 @@ export function DefaultDndRow<Data extends object = {}>(props: DefaultRowProps<D
 
   return (
     <tr ref={dropRef} style={{ opacity }}>
+      {/* eslint-disable-next-line jsx-a11y/no-interactive-element-to-noninteractive-role */}
       <td ref={dragRef} role='cell' style={{ cursor: isDragging ? "grabbing" : "grab" }} className='align-middle'>
         <div className='flex items-center justify-center'>
           <i className={classnames(iconClass(undefined, "dots-vertical-rounded"))} />

package/src/components/table/filters/defaultColumnFilter.component.tsx

@@ -23,6 +23,7 @@ export function DefaultColumnFilter<D extends Record<string, unknown> = {}>(
     [id, setValue, setFilterId, setFilter]
   );
 
+  /* eslint-disable jsx-a11y/no-autofocus */
   return (
     <InputText
       size={"sm"}

package/src/components/table/hooks/useOperations.hook.tsx

@@ -1,11 +1,11 @@
-import React from "react";
+import React, { type ComponentType, type FunctionComponent } from "react";
 import { Hooks } from "react-table";
 
 import { Operation } from "../../../interfaces";
 import { DefaultCellOperations } from "../components/defaultCellOperations.component";
 
 export type UseOperationsHookProps = {
-  CellOperations?: React.ComponentType;
+  CellOperations?: FunctionComponent | ComponentType<{}>;
   operations: Operation[];
   onClick?: (data: any, event: string) => void;
   i18n?: (f: string) => string;
@@ -14,7 +14,7 @@ export type UseOperationsHookProps = {
 
 export function useOperations<D extends object = {}>({
   operations,
-  CellOperations = DefaultCellOperations,
+  CellOperations = DefaultCellOperations as FunctionComponent,
   onClick,
   i18n = (f: string) => f,
   ctx

package/src/react-table.d.ts

@@ -45,10 +45,12 @@ import {
 } from "react-table";
 
 declare module "react-table" {
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
   export interface UseFlexLayoutInstanceProps<D extends Record<string, unknown>> {
     totalColumnsMinWidth: number;
   }
 
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
   export interface UseFlexLayoutColumnProps<D extends Record<string, unknown>> {
     totalMinWidth: number;
   }

package/dist/package.json

@@ -1,3 +0,0 @@
-{
-  "type": "commonjs"
-}