@openedx/paragon 22.11.0 → 22.11.2

package/src/Form/{index.jsx → index.tsx}

@@ -1,22 +1,54 @@
-import Form from 'react-bootstrap/Form';
+import BootstrapForm, { FormProps } from 'react-bootstrap/Form';
+import { ComponentWithAsProp } from '../utils/types/bootstrap';
+// TODO: add more typing and remove the @ts-ignore directives here
+// @ts-ignore
 import FormControl from './FormControl';
 import FormLabel from './FormLabel';
 import FormGroup from './FormGroup';
+// @ts-ignore
 import FormControlFeedback from './FormControlFeedback';
+// @ts-ignore
 import FormText from './FormText';
+// @ts-ignore
 import FormControlDecoratorGroup from './FormControlDecoratorGroup';
+// @ts-ignore
 import FormRadio, { RadioControl } from './FormRadio';
+// @ts-ignore
 import FormRadioSet from './FormRadioSet';
+// @ts-ignore
 import FormRadioSetContext from './FormRadioSetContext';
+// @ts-ignore
 import FormAutosuggest from './FormAutosuggest';
+// @ts-ignore
 import FormAutosuggestOption from './FormAutosuggestOption';
+// @ts-ignore
 import FormCheckbox, { CheckboxControl } from './FormCheckbox';
+// @ts-ignore
 import FormSwitch, { SwitchControl } from './FormSwitch';
+// @ts-ignore
 import FormCheckboxSet from './FormCheckboxSet';
+// @ts-ignore
 import FormSwitchSet from './FormSwitchSet';
+// @ts-ignore
 import FormCheckboxSetContext from './FormCheckboxSetContext';
+// @ts-ignore
 import useCheckboxSetValues from './useCheckboxSetValues';
 
+const Form = BootstrapForm as any as ComponentWithAsProp<'form', FormProps> & {
+  Control: typeof FormControl;
+  Radio: typeof FormRadio;
+  RadioSet: typeof FormRadioSet;
+  Autosuggest: typeof FormAutosuggest;
+  AutosuggestOption: typeof FormAutosuggestOption;
+  Checkbox: typeof FormCheckbox;
+  CheckboxSet: typeof FormCheckboxSet;
+  Row: typeof BootstrapForm.Row;
+  Switch: typeof FormSwitch;
+  SwitchSet: typeof FormSwitchSet;
+  Label: typeof FormLabel;
+  Group: typeof FormGroup;
+  Text: typeof FormText;
+};
 Form.Control = FormControl;
 Form.Radio = FormRadio;
 Form.RadioSet = FormRadioSet;

package/src/IconButton/index.tsx

@@ -36,6 +36,8 @@ interface Props extends React.HTMLAttributes<HTMLButtonElement> {
   variant?: 'primary' | 'secondary' | 'success' | 'warning' | 'danger' | 'light' | 'dark' | 'black' | 'brand';
   /** size of button to render */
   size?: 'sm' | 'md' | 'inline';
+  /** Used with `IconButtonToggle` */
+  value?: string;
   /** no children */
   children?: never;
 }
@@ -104,6 +106,7 @@ IconButton.defaultProps = {
   size: 'md',
   onClick: () => {},
   isActive: false,
+  value: undefined,
   children: undefined,
 };
 
@@ -140,6 +143,8 @@ IconButton.propTypes = {
   size: PropTypes.oneOf(['sm', 'md', 'inline']),
   /** whether to show the `IconButton` in an active state, whose styling is distinct from default state */
   isActive: PropTypes.bool,
+  /** Used with `IconButtonToggle` */
+  value: PropTypes.string,
 };
 
 interface PropsWithTooltip extends Props {

package/src/InputSelect/README.md

@@ -90,14 +90,13 @@ notes: |
   label="Favorite Color"
   options={['', 'red', 'orange', 'yellow', 'green', 'blue', 'purple']}
   validator={value => {
-    let feedback = { isValid: true };
     if (!value) {
-      feedback = {
+      return {
         isValid: false,
         validationMessage: 'Please make a selection.',
       };
     }
-    return feedback;
+    return { isValid: true };
   }}
 />
 ```

package/src/InputText/README.md

@@ -33,14 +33,13 @@ notes: |
   label="Username"
   description="The unique name that identifies you throughout the site."
   validator={value => {
-    let feedback = { isValid: true };
     if (value.length < 3) {
-      feedback = {
+      return {
         isValid: false,
         validationMessage: 'Username must be at least 3 characters in length.',
       };
     }
-    return feedback;
+    return { isValid: true };
   }}
 />
 ```
@@ -53,15 +52,14 @@ notes: |
   label="Username"
   description="The unique name that identifies you throughout the site."
   validator={value => {
-    let feedback = { isValid: true };
     if (value.length < 3) {
-      feedback = {
+      return {
         isValid: false,
         validationMessage: 'Username must be at least 3 characters in length.',
         dangerIconDescription: 'Error',
       };
     }
-    return feedback;
+    return { isValid: true };
   }}
   themes={['danger']}
 />

package/src/ListBox/README.md

@@ -105,7 +105,7 @@ class ListBoxWrapperForOnSelect extends React.Component {
             <span className="sr-only">none</span>
           ) : (
             <span
-              arialabelledby={`list-box-option-${
+              aria-labelledby={`list-box-option-${
                 this.state.selectedOptionIndex
               }`}
             >

package/src/Modal/standard-modal.mdx

@@ -31,7 +31,7 @@ The standard `ModalDialog` composition. `StandardModal` passes all of its props
         footerNode={(
           <ActionRow>
             <p className="small">
-              <Hyperlink href="#">Get help</Hyperlink>
+              <Hyperlink destination="#">Get help</Hyperlink>
             </p>
             <ActionRow.Spacer />
             <Button variant="tertiary" onClick={close}>Cancel</Button>

package/src/TextArea/README.md

@@ -40,14 +40,13 @@ notes: |
   label="Username"
   description="The unique name that identifies you throughout the site."
   validator={value => {
-    let feedback = { isValid: true };
     if (value.length < 3) {
-      feedback = {
+      return {
         isValid: false,
         validationMessage: 'Username must be at least 3 characters in length.',
       };
     }
-    return feedback;
+    return { isValid: true };
   }}
 />
 ```

package/src/index.d.ts

@@ -9,6 +9,28 @@ export { default as Button, ButtonGroup, ButtonToolbar } from './Button';
 export { default as Chip, CHIP_PGN_CLASS } from './Chip';
 export { default as ChipCarousel } from './ChipCarousel';
 export { default as Container, ContainerSize } from './Container';
+export {
+  default as Form,
+  RadioControl,
+  CheckboxControl,
+  SwitchControl,
+  FormSwitchSet,
+  FormControl,
+  FormControlDecoratorGroup,
+  FormControlFeedback,
+  FormCheck,
+  FormFile,
+  FormRadio,
+  FormRadioSet,
+  FormRadioSetContext,
+  FormGroup,
+  FormLabel,
+  useCheckboxSetValues,
+  FormText,
+  FormAutosuggest,
+  FormAutosuggestOption,
+  InputGroup,
+} from './Form';
 export { default as Hyperlink, HYPER_LINK_EXTERNAL_LINK_ALT_TEXT, HYPER_LINK_EXTERNAL_LINK_TITLE } from './Hyperlink';
 export { default as Icon } from './Icon';
 export { default as IconButton, IconButtonWithTooltip } from './IconButton';
@@ -61,28 +83,6 @@ export const
 export const Fade: any; // from './Fade';
 /** @deprecated */
 export const Fieldset: any; // from './Fieldset';
-export const
-  Form: any,
-  RadioControl: any,
-  CheckboxControl: any,
-  SwitchControl: any,
-  FormSwitchSet: any,
-  FormControl: any,
-  FormControlDecoratorGroup: any,
-  FormControlFeedback: any,
-  FormCheck: any,
-  FormFile: any,
-  FormRadio: any,
-  FormRadioSet: any,
-  FormRadioSetContext: any,
-  FormGroup: any,
-  FormLabel: any,
-  useCheckboxSetValues: any,
-  FormText: any,
-  FormAutosuggest: any,
-  FormAutosuggestOption: any,
-  InputGroup: any;
-// from './Form';
 export const IconButtonToggle: any; // from './IconButtonToggle';
 /** @deprecated Replaced by `Form.Control`. */
 export const Input: any; // from './Input';

package/src/index.js

@@ -9,6 +9,28 @@ export { default as Button, ButtonGroup, ButtonToolbar } from './Button';
 export { default as Chip, CHIP_PGN_CLASS } from './Chip';
 export { default as ChipCarousel } from './ChipCarousel';
 export { default as Container } from './Container';
+export {
+  default as Form,
+  RadioControl,
+  CheckboxControl,
+  SwitchControl,
+  FormSwitchSet,
+  FormControl,
+  FormControlDecoratorGroup,
+  FormControlFeedback,
+  FormCheck,
+  FormFile,
+  FormRadio,
+  FormRadioSet,
+  FormRadioSetContext,
+  FormGroup,
+  FormLabel,
+  useCheckboxSetValues,
+  FormText,
+  FormAutosuggest,
+  FormAutosuggestOption,
+  InputGroup,
+} from './Form';
 export { default as Hyperlink, HYPER_LINK_EXTERNAL_LINK_ALT_TEXT, HYPER_LINK_EXTERNAL_LINK_TITLE } from './Hyperlink';
 export { default as Icon } from './Icon';
 export { default as IconButton, IconButtonWithTooltip } from './IconButton';
@@ -61,28 +83,6 @@ export {
 export { default as Fade } from './Fade';
 /** @deprecated */
 export { default as Fieldset } from './Fieldset';
-export {
-  default as Form,
-  RadioControl,
-  CheckboxControl,
-  SwitchControl,
-  FormSwitchSet,
-  FormControl,
-  FormControlDecoratorGroup,
-  FormControlFeedback,
-  FormCheck,
-  FormFile,
-  FormRadio,
-  FormRadioSet,
-  FormRadioSetContext,
-  FormGroup,
-  FormLabel,
-  useCheckboxSetValues,
-  FormText,
-  FormAutosuggest,
-  FormAutosuggestOption,
-  InputGroup,
-} from './Form';
 export { default as IconButtonToggle } from './IconButtonToggle';
 /** @deprecated Replaced by `Form.Control`. */
 export { default as Input } from './Input';

package/src/utils/propTypes/utils.js

@@ -36,7 +36,7 @@ export const isEveryPropDefined = (props, otherPropNames) => otherPropNames
  * Returns a PropType entry with the given propType that is required if otherPropName
  * is truthy.
  * @param {func} propType - target PropType
- * @param {string} otherPropName - string name for prop that, if true, marks the
+ * @param {string | string[]} otherPropName - string name for prop that, if true, marks the
  *   associated prop as required
  * @return {func} - PropType based on propType that is required if otherPropName is
  *   set to true.