fix: replace paragon radio select set with copy to debug (#871)

step 1 for trying fixes for the stage bug where the paragon radio select is not clickable. Here I just replace the paragon component with our identical copy to see what that changes. Followup steps are to change this component until hopefully the problem gets fixed.

src/files-and-videos/generic/table-components/sort-and-filter-modal/SortAndFilterModal.jsx

@@ -7,9 +7,9 @@ import {
   DataTableContext,
   Form,
   ModalDialog,
-  SelectableBox,
   useCheckboxSetValues,
 } from '@openedx/paragon';
+import SelectableBox from '../../../../generic/SelectableBox';
 import messages from './messages';
 import { getCheckedFilters, getFilterOptions, processFilters } from './utils';
 

src/generic/SelectableBox/SelectableBoxSet.jsx

@@ -0,0 +1,112 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+import { getInputType } from './getInputType';
+
+const INPUT_TYPES = [
+  'radio',
+  'checkbox',
+];
+
+const DEFAULT_COLUMNS_NUMBER = 2;
+
+const SelectableBoxSet = React.forwardRef(({
+  children,
+  name,
+  value,
+  defaultValue,
+  onChange,
+  type,
+  columns,
+  className,
+  ariaLabel,
+  ariaLabelledby,
+  ...props
+}, ref) => {
+  const inputType = getInputType('SelectableBoxSet', type);
+
+  // eslint-disable-next-line no-console
+  console.debug('SelectableBoxSet Props: ', {
+    children,
+    name,
+    value,
+    defaultValue,
+    onChange,
+    type,
+    columns,
+    className,
+    ariaLabel,
+    ariaLabelledby,
+    ...props,
+  });
+
+  return React.createElement(
+    inputType,
+    {
+      name,
+      value,
+      defaultValue,
+      onChange,
+      ref,
+      className: classNames(
+        'pgn__selectable_box-set',
+        `pgn__selectable_box-set--${columns || DEFAULT_COLUMNS_NUMBER}`,
+        className,
+      ),
+      'aria-label': ariaLabel,
+      'aria-labelledby': ariaLabelledby,
+      ...props,
+    },
+    children,
+  );
+});
+
+SelectableBoxSet.propTypes = {
+  /** Specifies a name for the group of `SelectableBox`'es. */
+  name: PropTypes.string.isRequired,
+  /** Content of the `SelectableBoxSet`. */
+  children: PropTypes.node,
+  /** A function that receives event of the clicked `SelectableBox` and can be used to handle the value change. */
+  onChange: PropTypes.func,
+  /** Indicates selected `SelectableBox`'es. */
+  value: PropTypes.oneOfType([PropTypes.string, PropTypes.number, PropTypes.array]),
+  /** Specifies default values for the `SelectableBox`'es. */
+  defaultValue: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  /** Indicates the input type: checkbox or radio. */
+  type: PropTypes.oneOf(INPUT_TYPES),
+  /**
+   * Specifies number of `SelectableBox`'es in a row.
+   *
+   * Class that is responsible for the columns number: `pgn__selectable_box-set--{columns}`.
+   * Max number of columns: `12`.
+   */
+  columns: PropTypes.number,
+  /** A class that is be appended to the base element. */
+  className: PropTypes.string,
+  /**
+   * The ID of the label for the `SelectableBoxSet`.
+   *
+   * An accessible label must be provided to the `SelectableBoxSet`.
+   */
+  ariaLabelledby: PropTypes.string,
+  /**
+   * A label for the `SelectableBoxSet`.
+   *
+   * If not using `ariaLabelledby`, then `ariaLabel` must be provided */
+  // eslint-disable-next-line react/forbid-prop-types
+  ariaLabel: PropTypes.any, // requiredWhenNot(PropTypes.string, 'ariaLabelledby'),
+};
+
+SelectableBoxSet.defaultProps = {
+  children: undefined,
+  onChange: () => {},
+  value: undefined,
+  defaultValue: undefined,
+  type: 'radio',
+  columns: DEFAULT_COLUMNS_NUMBER,
+  className: undefined,
+  ariaLabelledby: undefined,
+  ariaLabel: undefined,
+};
+
+export default SelectableBoxSet;

src/generic/SelectableBox/getInputType.jsx

@@ -0,0 +1,26 @@
+import {
+  Form, CheckboxControl, RadioControl,
+} from '@openedx/paragon';
+
+// eslint-disable-next-line import/prefer-default-export,consistent-return
+export const getInputType = (component, type) => {
+  if (component === 'SelectableBox') {
+    switch (type) {
+    case 'radio':
+      return RadioControl;
+    case 'checkbox':
+      return CheckboxControl;
+    default:
+      return RadioControl;
+    }
+  } else if (component === 'SelectableBoxSet') {
+    switch (type) {
+    case 'radio':
+      return Form.RadioSet;
+    case 'checkbox':
+      return Form.CheckboxSet;
+    default:
+      return Form.RadioSet;
+    }
+  }
+};

src/generic/SelectableBox/index.jsx

@@ -0,0 +1,7 @@
+import { SelectableBox as ParagonSelectableBox } from '@openedx/paragon';
+import SelectableBoxSet from './SelectableBoxSet';
+
+const SelectableBox = ParagonSelectableBox;
+
+SelectableBox.Set = SelectableBoxSet;
+export default SelectableBox;