@openedx/paragon 22.11.0 → 22.11.2

package/dist/IconButton/index.js

@@ -57,6 +57,7 @@ IconButton.defaultProps = {
   size: 'md',
   onClick: () => {},
   isActive: false,
+  value: undefined,
   children: undefined
 };
 IconButton.propTypes = {
@@ -91,7 +92,9 @@ IconButton.propTypes = {
   /** size of button to render */
   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
+  isActive: PropTypes.bool,
+  /** Used with `IconButtonToggle` */
+  value: PropTypes.string
 };
 /**
  * An icon button wrapped in overlaytrigger to display a tooltip.

package/dist/IconButton/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["React","PropTypes","classNames","FontAwesomeIcon","OverlayTrigger","Tooltip","IconButton","forwardRef","_ref","ref","className","alt","invertColors","icon","src","iconClassNames","onClick","size","variant","iconAs","isActive","children","attrs","invert","activeStyle","process","env","NODE_ENV","console","msg","warn","IconComponent","createElement","type","defaultProps","undefined","propTypes","string","elementType","isRequired","bool","shape","prefix","iconName","array","func","oneOf","IconButtonWithTooltip","_ref2","tooltipPlacement","tooltipContent","props","placement","overlay","id","node"],"sources":["../../src/IconButton/index.tsx"],"sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport classNames from 'classnames';\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome';\nimport { type Placement } from 'react-bootstrap/Overlay';\n\nimport { OverlayTrigger } from '../Overlay';\nimport Tooltip from '../Tooltip';\nimport Icon from '../Icon';\n\ninterface Props extends React.HTMLAttributes<HTMLButtonElement> {\n  iconAs?: typeof Icon | typeof FontAwesomeIcon,\n  /** Additional CSS class[es] to apply to this button */\n  className?: string;\n  /** Alt text for your icon. For best practice, avoid using alt text to describe\n   * the image in the `IconButton`. Instead, we recommend describing the function\n   * of the button. */\n  alt: string;\n  /** Changes icon styles for dark background */\n  invertColors?: boolean;\n  /** An icon component to render. Example import of a Paragon icon component:\n   * `import { Check } from '@openedx/paragon/icons';`\n   * */\n  // Note: React.ComponentType is what we want here. React.ElementType would allow some element type strings like \"div\",\n  // but we only want to allow components like 'Add' (a specific icon component function/class)\n  src?: React.ComponentType;\n  /** Extra class names that will be added to the icon */\n  iconClassNames?: string;\n  /** Click handler for the button */\n  onClick?: React.MouseEventHandler<HTMLButtonElement>;\n  /** whether to show the `IconButton` in an active state, whose styling is distinct from default state */\n  isActive?: boolean;\n  /** @deprecated Using FontAwesome icons is deprecated. Instead, pass iconAs={Icon} src={...} */\n  icon?: { prefix?: string; iconName?: string, icon?: any[] },\n  /** Type of button (uses Bootstrap options) */\n  variant?: 'primary' | 'secondary' | 'success' | 'warning' | 'danger' | 'light' | 'dark' | 'black' | 'brand';\n  /** size of button to render */\n  size?: 'sm' | 'md' | 'inline';\n  /** no children */\n  children?: never;\n}\n\nconst IconButton = React.forwardRef<HTMLButtonElement, Props>(({\n  className,\n  alt,\n  invertColors,\n  icon,\n  src,\n  iconClassNames,\n  onClick,\n  size,\n  variant,\n  iconAs,\n  isActive,\n  children, // unused, just here because we don't want it to be part of 'attrs'\n  ...attrs\n}, ref) => {\n  const invert = invertColors ? 'inverse-' : '';\n  const activeStyle = isActive ? `${variant}-` : '';\n  if (!iconAs && process.env.NODE_ENV === 'development' && console) {\n    const msg = '[Deprecated] IconButton: you have not provided a value for iconAs prop and '\n      + 'are using a default one - FontAwesomeIcon, the default value is going to be changed soon '\n      + 'as Paragon is moving away from FontAwesome, please use Paragon\\'s icons instead.';\n    // eslint-disable-next-line no-console\n    console.warn(msg);\n  }\n  const IconComponent = iconAs || FontAwesomeIcon;\n  return (\n    <button\n      aria-label={alt}\n      className={classNames(\n        'btn-icon',\n        `btn-icon-${invert}${variant}`,\n        `btn-icon-${size}`,\n        {\n          [`btn-icon-${invert}${activeStyle}active`]: isActive,\n        },\n        className,\n      )}\n      onClick={onClick}\n      type=\"button\"\n      ref={ref}\n      {...attrs}\n    >\n      <span className=\"btn-icon__icon-container\">\n        <IconComponent\n          className={classNames('btn-icon__icon', iconClassNames)}\n          icon={icon as any}\n          src={src}\n        />\n      </span>\n    </button>\n  );\n});\n\nIconButton.defaultProps = {\n  iconAs: undefined,\n  src: undefined,\n  icon: undefined,\n  iconClassNames: undefined,\n  className: undefined,\n  invertColors: false,\n  variant: 'primary',\n  size: 'md',\n  onClick: () => {},\n  isActive: false,\n  children: undefined,\n};\n\nIconButton.propTypes = {\n  /** A custom class name. */\n  className: PropTypes.string,\n  /** Component that renders the icon, currently defaults to `FontAwesomeIcon`,\n   *  but is going to be deprecated soon, please use Paragon's icons instead. */\n  iconAs: PropTypes.elementType as any,\n  /** An icon component to render. Example import of a Paragon icon component:\n   * `import { Check } from '@openedx/paragon/icons';`\n   * */\n  src: PropTypes.elementType as any,\n  /** Alt text for your icon. For best practice, avoid using alt text to describe\n   * the image in the `IconButton`. Instead, we recommend describing the function\n   * of the button. */\n  alt: PropTypes.string.isRequired,\n  /** Changes icon styles for dark background */\n  invertColors: PropTypes.bool,\n  /** Accepts a React fontawesome icon. */\n  icon: PropTypes.shape({\n    prefix: PropTypes.string,\n    iconName: PropTypes.string,\n    // eslint-disable-next-line react/forbid-prop-types\n    icon: PropTypes.array,\n  }) as any,\n  /** Extra class names that will be added to the icon */\n  iconClassNames: PropTypes.string,\n  /** Click handler for the button */\n  onClick: PropTypes.func,\n  /** Type of button (uses Bootstrap options) */\n  variant: PropTypes.oneOf(['primary', 'secondary', 'success', 'warning', 'danger', 'light', 'dark', 'black', 'brand']),\n  /** size of button to render */\n  size: PropTypes.oneOf(['sm', 'md', 'inline']),\n  /** whether to show the `IconButton` in an active state, whose styling is distinct from default state */\n  isActive: PropTypes.bool,\n};\n\ninterface PropsWithTooltip extends Props {\n  /** choose from https://popper.js.org/docs/v2/constructors/#options */\n  tooltipPlacement: Placement,\n  /** any content to pass to tooltip content area */\n  tooltipContent: React.ReactNode,\n}\n\n/**\n * An icon button wrapped in overlaytrigger to display a tooltip.\n */\nfunction IconButtonWithTooltip({\n  tooltipPlacement, tooltipContent, ...props\n}: PropsWithTooltip) {\n  const invert = props.invertColors ? 'inverse-' : '';\n  return (\n    <OverlayTrigger\n      placement={tooltipPlacement}\n      overlay={(\n        <Tooltip\n          id={`iconbutton-tooltip-${tooltipPlacement}`}\n          variant={invert ? 'light' : undefined}\n        >\n          {tooltipContent}\n        </Tooltip>\n      )}\n    >\n      <IconButton {...props} />\n    </OverlayTrigger>\n  );\n}\n\nIconButtonWithTooltip.defaultProps = {\n  ...IconButton.defaultProps,\n  tooltipPlacement: 'top',\n};\n\nIconButtonWithTooltip.propTypes = {\n  /** tooltip placement can be top, left, right etc, per https://popper.js.org/docs/v2/constructors/#options  */\n  tooltipPlacement: PropTypes.string,\n  /** any valid JSX or text to be rendered as tooltip contents */\n  tooltipContent: PropTypes.node.isRequired,\n  /** Type of button (uses Bootstrap options) */\n  variant: PropTypes.oneOf(['primary', 'secondary', 'success', 'warning', 'danger', 'light', 'dark', 'black', 'brand']),\n  /** Changes icon styles for dark background */\n  invertColors: PropTypes.bool,\n};\n\n(IconButton as any).IconButtonWithTooltip = IconButtonWithTooltip;\n\nexport default IconButton as typeof IconButton & {\n  IconButtonWithTooltip: typeof IconButtonWithTooltip,\n};\nexport { IconButtonWithTooltip };\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"index.js","names":["React","PropTypes","classNames","FontAwesomeIcon","OverlayTrigger","Tooltip","IconButton","forwardRef","_ref","ref","className","alt","invertColors","icon","src","iconClassNames","onClick","size","variant","iconAs","isActive","children","attrs","invert","activeStyle","process","env","NODE_ENV","console","msg","warn","IconComponent","createElement","type","defaultProps","undefined","value","propTypes","string","elementType","isRequired","bool","shape","prefix","iconName","array","func","oneOf","IconButtonWithTooltip","_ref2","tooltipPlacement","tooltipContent","props","placement","overlay","id","node"],"sources":["../../src/IconButton/index.tsx"],"sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport classNames from 'classnames';\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome';\nimport { type Placement } from 'react-bootstrap/Overlay';\n\nimport { OverlayTrigger } from '../Overlay';\nimport Tooltip from '../Tooltip';\nimport Icon from '../Icon';\n\ninterface Props extends React.HTMLAttributes<HTMLButtonElement> {\n  iconAs?: typeof Icon | typeof FontAwesomeIcon,\n  /** Additional CSS class[es] to apply to this button */\n  className?: string;\n  /** Alt text for your icon. For best practice, avoid using alt text to describe\n   * the image in the `IconButton`. Instead, we recommend describing the function\n   * of the button. */\n  alt: string;\n  /** Changes icon styles for dark background */\n  invertColors?: boolean;\n  /** An icon component to render. Example import of a Paragon icon component:\n   * `import { Check } from '@openedx/paragon/icons';`\n   * */\n  // Note: React.ComponentType is what we want here. React.ElementType would allow some element type strings like \"div\",\n  // but we only want to allow components like 'Add' (a specific icon component function/class)\n  src?: React.ComponentType;\n  /** Extra class names that will be added to the icon */\n  iconClassNames?: string;\n  /** Click handler for the button */\n  onClick?: React.MouseEventHandler<HTMLButtonElement>;\n  /** whether to show the `IconButton` in an active state, whose styling is distinct from default state */\n  isActive?: boolean;\n  /** @deprecated Using FontAwesome icons is deprecated. Instead, pass iconAs={Icon} src={...} */\n  icon?: { prefix?: string; iconName?: string, icon?: any[] },\n  /** Type of button (uses Bootstrap options) */\n  variant?: 'primary' | 'secondary' | 'success' | 'warning' | 'danger' | 'light' | 'dark' | 'black' | 'brand';\n  /** size of button to render */\n  size?: 'sm' | 'md' | 'inline';\n  /** Used with `IconButtonToggle` */\n  value?: string;\n  /** no children */\n  children?: never;\n}\n\nconst IconButton = React.forwardRef<HTMLButtonElement, Props>(({\n  className,\n  alt,\n  invertColors,\n  icon,\n  src,\n  iconClassNames,\n  onClick,\n  size,\n  variant,\n  iconAs,\n  isActive,\n  children, // unused, just here because we don't want it to be part of 'attrs'\n  ...attrs\n}, ref) => {\n  const invert = invertColors ? 'inverse-' : '';\n  const activeStyle = isActive ? `${variant}-` : '';\n  if (!iconAs && process.env.NODE_ENV === 'development' && console) {\n    const msg = '[Deprecated] IconButton: you have not provided a value for iconAs prop and '\n      + 'are using a default one - FontAwesomeIcon, the default value is going to be changed soon '\n      + 'as Paragon is moving away from FontAwesome, please use Paragon\\'s icons instead.';\n    // eslint-disable-next-line no-console\n    console.warn(msg);\n  }\n  const IconComponent = iconAs || FontAwesomeIcon;\n  return (\n    <button\n      aria-label={alt}\n      className={classNames(\n        'btn-icon',\n        `btn-icon-${invert}${variant}`,\n        `btn-icon-${size}`,\n        {\n          [`btn-icon-${invert}${activeStyle}active`]: isActive,\n        },\n        className,\n      )}\n      onClick={onClick}\n      type=\"button\"\n      ref={ref}\n      {...attrs}\n    >\n      <span className=\"btn-icon__icon-container\">\n        <IconComponent\n          className={classNames('btn-icon__icon', iconClassNames)}\n          icon={icon as any}\n          src={src}\n        />\n      </span>\n    </button>\n  );\n});\n\nIconButton.defaultProps = {\n  iconAs: undefined,\n  src: undefined,\n  icon: undefined,\n  iconClassNames: undefined,\n  className: undefined,\n  invertColors: false,\n  variant: 'primary',\n  size: 'md',\n  onClick: () => {},\n  isActive: false,\n  value: undefined,\n  children: undefined,\n};\n\nIconButton.propTypes = {\n  /** A custom class name. */\n  className: PropTypes.string,\n  /** Component that renders the icon, currently defaults to `FontAwesomeIcon`,\n   *  but is going to be deprecated soon, please use Paragon's icons instead. */\n  iconAs: PropTypes.elementType as any,\n  /** An icon component to render. Example import of a Paragon icon component:\n   * `import { Check } from '@openedx/paragon/icons';`\n   * */\n  src: PropTypes.elementType as any,\n  /** Alt text for your icon. For best practice, avoid using alt text to describe\n   * the image in the `IconButton`. Instead, we recommend describing the function\n   * of the button. */\n  alt: PropTypes.string.isRequired,\n  /** Changes icon styles for dark background */\n  invertColors: PropTypes.bool,\n  /** Accepts a React fontawesome icon. */\n  icon: PropTypes.shape({\n    prefix: PropTypes.string,\n    iconName: PropTypes.string,\n    // eslint-disable-next-line react/forbid-prop-types\n    icon: PropTypes.array,\n  }) as any,\n  /** Extra class names that will be added to the icon */\n  iconClassNames: PropTypes.string,\n  /** Click handler for the button */\n  onClick: PropTypes.func,\n  /** Type of button (uses Bootstrap options) */\n  variant: PropTypes.oneOf(['primary', 'secondary', 'success', 'warning', 'danger', 'light', 'dark', 'black', 'brand']),\n  /** size of button to render */\n  size: PropTypes.oneOf(['sm', 'md', 'inline']),\n  /** whether to show the `IconButton` in an active state, whose styling is distinct from default state */\n  isActive: PropTypes.bool,\n  /** Used with `IconButtonToggle` */\n  value: PropTypes.string,\n};\n\ninterface PropsWithTooltip extends Props {\n  /** choose from https://popper.js.org/docs/v2/constructors/#options */\n  tooltipPlacement: Placement,\n  /** any content to pass to tooltip content area */\n  tooltipContent: React.ReactNode,\n}\n\n/**\n * An icon button wrapped in overlaytrigger to display a tooltip.\n */\nfunction IconButtonWithTooltip({\n  tooltipPlacement, tooltipContent, ...props\n}: PropsWithTooltip) {\n  const invert = props.invertColors ? 'inverse-' : '';\n  return (\n    <OverlayTrigger\n      placement={tooltipPlacement}\n      overlay={(\n        <Tooltip\n          id={`iconbutton-tooltip-${tooltipPlacement}`}\n          variant={invert ? 'light' : undefined}\n        >\n          {tooltipContent}\n        </Tooltip>\n      )}\n    >\n      <IconButton {...props} />\n    </OverlayTrigger>\n  );\n}\n\nIconButtonWithTooltip.defaultProps = {\n  ...IconButton.defaultProps,\n  tooltipPlacement: 'top',\n};\n\nIconButtonWithTooltip.propTypes = {\n  /** tooltip placement can be top, left, right etc, per https://popper.js.org/docs/v2/constructors/#options  */\n  tooltipPlacement: PropTypes.string,\n  /** any valid JSX or text to be rendered as tooltip contents */\n  tooltipContent: PropTypes.node.isRequired,\n  /** Type of button (uses Bootstrap options) */\n  variant: PropTypes.oneOf(['primary', 'secondary', 'success', 'warning', 'danger', 'light', 'dark', 'black', 'brand']),\n  /** Changes icon styles for dark background */\n  invertColors: PropTypes.bool,\n};\n\n(IconButton as any).IconButtonWithTooltip = IconButtonWithTooltip;\n\nexport default IconButton as typeof IconButton & {\n  IconButtonWithTooltip: typeof IconButtonWithTooltip,\n};\nexport { IconButtonWithTooltip };\n"],"mappings":"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","ignoreList":[]}

package/dist/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/dist/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/dist/utils/index.d.ts

@@ -0,0 +1 @@
+export { default as newId } from './newId';

package/dist/utils/index.js

@@ -1,2 +1,3 @@
 // eslint-disable-next-line import/prefer-default-export
 export { default as newId } from './newId';
+//# sourceMappingURL=index.js.map

package/dist/utils/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["default","newId"],"sources":["../../src/utils/index.ts"],"sourcesContent":["// eslint-disable-next-line import/prefer-default-export\nexport { default as newId } from './newId';\n"],"mappings":"AAAA;AACA,SAASA,OAAO,IAAIC,KAAK,QAAQ,SAAS","ignoreList":[]}

package/dist/utils/newId.d.ts

@@ -0,0 +1,2 @@
+declare const newId: (prefix?: string) => string;
+export default newId;

package/dist/utils/newId.js

@@ -1,8 +1,8 @@
 let lastId = 0;
-
-const newId = (prefix = 'id') => {
+const newId = function () {
+  let prefix = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 'id';
   lastId += 1;
   return `${prefix}${lastId}`;
 };
-
 export default newId;
+//# sourceMappingURL=newId.js.map

package/dist/utils/newId.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"newId.js","names":["lastId","newId","prefix","arguments","length","undefined"],"sources":["../../src/utils/newId.ts"],"sourcesContent":["let lastId = 0;\n\nconst newId = (prefix = 'id') => {\n  lastId += 1;\n  return `${prefix}${lastId}`;\n};\n\nexport default newId;\n"],"mappings":"AAAA,IAAIA,MAAM,GAAG,CAAC;AAEd,MAAMC,KAAK,GAAG,SAAAA,CAAA,EAAmB;EAAA,IAAlBC,MAAM,GAAAC,SAAA,CAAAC,MAAA,QAAAD,SAAA,QAAAE,SAAA,GAAAF,SAAA,MAAG,IAAI;EAC1BH,MAAM,IAAI,CAAC;EACX,OAAQ,GAAEE,MAAO,GAAEF,MAAO,EAAC;AAC7B,CAAC;AAED,eAAeC,KAAK","ignoreList":[]}

package/dist/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.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@openedx/paragon",
-  "version": "22.11.0",
+  "version": "22.11.2",
   "description": "Accessible, responsive UI component library based on Bootstrap.",
   "main": "dist/index.js",
   "module": "dist/index.js",

package/src/Collapsible/README.md

@@ -185,13 +185,13 @@ See the developer console for logging.
 ### Controlled usage
 
 ```jsx live
-function() {
+() => {
   const [collapseIsOpen, setCollapseOpen] = React.useState(true);
 
   return (
     <Collapsible.Advanced
       open={collapseIsOpen}
-      onToggle={isOpen => setCollapseOpen(!isOpen)}
+      onToggle={isOpen => setCollapseOpen(isOpen)}
       className="collapsible-card"
     >
       <Collapsible.Trigger className="collapsible-trigger">

package/src/DataTable/README.md

@@ -253,7 +253,7 @@ To enable proper selection behavior with backend pagination (i.e., when ``isSele
     </Component>
   );
 
-  const ClearAction = ({ as: Component, tableInstance, ...rest }) => (
+  const ClearAction = ({ as: Component, tableInstance }) => (
     <Component
       variant="danger"
       onClick={() => {
@@ -845,7 +845,7 @@ a responsive grid of cards.
     </Component>
   );
 
-  const ClearAction = ({ as: Component, tableInstance, ...rest }) => (
+  const ClearAction = ({ as: Component, tableInstance }) => (
     <Component
       variant="danger"
       onClick={() => {

package/src/Dropdown/README.md

@@ -145,7 +145,7 @@ You can use `Dropdown.Toggle` with [IconButton](/components/iconbutton) componen
 ```jsx live
 <Dropdown.Deprecated>
   <Dropdown.Deprecated.Button>
-    <Icon className="fa fa-user pr-3" alt="" />
+    <Icon className="fa fa-user pr-3" />
     Search Engines
   </Dropdown.Deprecated.Button>
   <Dropdown.Deprecated.Menu>

package/src/Dropzone/README.md

@@ -240,7 +240,7 @@ This example validates that only `400x479` images can be uploaded.
   async function imageDimensionValidator(file) {
     const image = new window.Image();
     try {
-      url = URL.createObjectURL(file);
+      const url = URL.createObjectURL(file);
       image.src = url;
       await image.decode();
       if (image.width !== 400 || image.height !== 479) {

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

@@ -2,18 +2,37 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import { FormGroupContextProvider } from './FormGroupContext';
+import { FORM_CONTROL_SIZES } from './constants';
 
-function FormGroup({
+interface Props<As extends React.ElementType> {
+  /** Specifies contents of the component. */
+  children: React.ReactNode;
+  /** Specifies class name to append to the base element. */
+  className?: string;
+  /** Specifies base element for the component. */
+  as?: As;
+  /** Specifies id to use in the group, it will be used as `htmlFor` in `FormLabel` and as `id` in input components.
+   *  Will be autogenerated if none is supplied. */
+  controlId?: string;
+  /** Specifies whether to display components in invalid state, this affects styling. */
+  isInvalid?: boolean;
+  /** Specifies whether to display components in valid state, this affects styling. */
+  isValid?: boolean;
+  /** Specifies size for the component. */
+  size?: typeof FORM_CONTROL_SIZES.SMALL | typeof FORM_CONTROL_SIZES.LARGE;
+}
+
+function FormGroup<As extends React.ElementType = 'div'>({
   children,
   controlId,
-  isInvalid,
-  isValid,
+  isInvalid = false,
+  isValid = false,
   size,
   as,
   ...props
-}) {
+}: Props<As> & React.ComponentPropsWithoutRef<As>) {
   return React.createElement(
-    as,
+    as ?? 'div',
     {
       ...props,
       className: classNames('pgn__form-group', props.className),
@@ -50,13 +69,4 @@ FormGroup.propTypes = {
   size: PropTypes.oneOf(SIZE_CHOICES),
 };
 
-FormGroup.defaultProps = {
-  as: 'div',
-  className: undefined,
-  controlId: undefined,
-  isInvalid: false,
-  isValid: false,
-  size: undefined,
-};
-
 export default FormGroup;

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

@@ -1,16 +1,28 @@
 import React, {
   useState, useEffect, useMemo, useCallback,
 } from 'react';
-import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import { newId } from '../utils';
 import { useIdList, omitUndefinedProperties } from './fieldUtils';
 import { FORM_CONTROL_SIZES } from './constants';
 
-const identityFn = props => props;
+const identityFn = (props: Record<string, any>) => props;
 const noop = () => {};
 
-const FormGroupContext = React.createContext({
+interface FormGroupContextData {
+  getControlProps: (props: Record<string, any>) => Record<string, any>;
+  getLabelProps: (props: React.ComponentPropsWithoutRef<'label'>) => React.ComponentPropsWithoutRef<'label'>;
+  getDescriptorProps: (props: Record<string, any>) => Record<string, any>;
+  useSetIsControlGroupEffect: (isControlGroup: boolean) => void;
+  isControlGroup?: boolean;
+  controlId?: string;
+  isInvalid?: boolean;
+  isValid?: boolean;
+  size?: string;
+  hasFormGroupProvider?: boolean;
+}
+
+const FormGroupContext = React.createContext<FormGroupContextData>({
   getControlProps: identityFn,
   useSetIsControlGroupEffect: noop,
   getLabelProps: identityFn,
@@ -20,13 +32,15 @@ const FormGroupContext = React.createContext({
 
 const useFormGroupContext = () => React.useContext(FormGroupContext);
 
-const useStateEffect = (initialState) => {
+function useStateEffect<ValueType extends any>(
+  initialState: ValueType,
+): [value: ValueType, setter: (v: ValueType) => void] {
   const [state, setState] = useState(initialState);
-  const useSetStateEffect = (newState) => {
+  const useSetStateEffect = (newState: ValueType) => {
     useEffect(() => setState(newState), [newState]);
   };
   return [state, useSetStateEffect];
-};
+}
 
 function FormGroupContextProvider({
   children,
@@ -34,6 +48,12 @@ function FormGroupContextProvider({
   isInvalid,
   isValid,
   size,
+}: {
+  children: React.ReactNode;
+  controlId?: string;
+  isInvalid?: boolean;
+  isValid?: boolean;
+  size?: typeof FORM_CONTROL_SIZES.SMALL | typeof FORM_CONTROL_SIZES.LARGE;
 }) {
   const controlId = useMemo(() => explicitControlId || newId('form-field'), [explicitControlId]);
   const [describedByIds, registerDescriptorId] = useIdList(controlId);
@@ -62,7 +82,7 @@ function FormGroupContextProvider({
     controlId,
   ]);
 
-  const getLabelProps = (labelProps) => {
+  const getLabelProps = (labelProps: React.ComponentPropsWithoutRef<'label'>) => {
     const id = registerLabelerId(labelProps?.id);
     if (isControlGroup) {
       return { ...labelProps, id };
@@ -70,12 +90,12 @@ function FormGroupContextProvider({
     return { ...labelProps, htmlFor: controlId };
   };
 
-  const getDescriptorProps = (descriptorProps) => {
+  const getDescriptorProps = (descriptorProps: Record<string, any>) => {
     const id = registerDescriptorId(descriptorProps?.id);
     return { ...descriptorProps, id };
   };
 
-  const contextValue = {
+  const contextValue: FormGroupContextData = {
     getControlProps,
     getLabelProps,
     getDescriptorProps,
@@ -95,24 +115,6 @@ function FormGroupContextProvider({
   );
 }
 
-FormGroupContextProvider.propTypes = {
-  children: PropTypes.node.isRequired,
-  controlId: PropTypes.string,
-  isInvalid: PropTypes.bool,
-  isValid: PropTypes.bool,
-  size: PropTypes.oneOf([
-    FORM_CONTROL_SIZES.SMALL,
-    FORM_CONTROL_SIZES.LARGE,
-  ]),
-};
-
-FormGroupContextProvider.defaultProps = {
-  controlId: undefined,
-  isInvalid: undefined,
-  isValid: undefined,
-  size: undefined,
-};
-
 export {
   FormGroupContext,
   FormGroupContextProvider,

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

@@ -4,7 +4,14 @@ import classNames from 'classnames';
 import { useFormGroupContext } from './FormGroupContext';
 import { FORM_CONTROL_SIZES } from './constants';
 
-function FormLabel({ children, isInline, ...props }) {
+interface Props {
+  /** Specifies contents of the component. */
+  children: React.ReactNode;
+  /** Specifies whether the component should be displayed with inline styling. */
+  isInline?: boolean;
+}
+
+function FormLabel({ children, isInline = false, ...props }: Props & React.ComponentPropsWithoutRef<'label'>) {
   const { size, isControlGroup, getLabelProps } = useFormGroupContext();
   const className = classNames(
     'pgn__form-label',
@@ -20,8 +27,6 @@ function FormLabel({ children, isInline, ...props }) {
   return React.createElement(componentType, labelProps, children);
 }
 
-const SIZE_CHOICES = ['sm', 'lg'];
-
 FormLabel.propTypes = {
   /** Specifies class name to append to the base element. */
   className: PropTypes.string,
@@ -29,14 +34,6 @@ FormLabel.propTypes = {
   children: PropTypes.node.isRequired,
   /** Specifies whether the component should be displayed with inline styling. */
   isInline: PropTypes.bool,
-  /** Specifies size of the component. */
-  size: PropTypes.oneOf(SIZE_CHOICES),
-};
-
-FormLabel.defaultProps = {
-  isInline: false,
-  size: undefined,
-  className: undefined,
 };
 
 export default FormLabel;

package/src/Form/{constants.js → constants.ts}

@@ -1,10 +1,9 @@
-/* eslint-disable import/prefer-default-export */
-const FORM_CONTROL_SIZES = {
+export const FORM_CONTROL_SIZES = {
   SMALL: 'sm',
   LARGE: 'lg',
-};
+} as const;
 
-const FORM_TEXT_TYPES = {
+export const FORM_TEXT_TYPES = {
   DEFAULT: 'default',
   VALID: 'valid',
   INVALID: 'invalid',
@@ -12,6 +11,4 @@ const FORM_TEXT_TYPES = {
   CRITERIA_EMPTY: 'criteria-empty',
   CRITERIA_VALID: 'criteria-valid',
   CRITERIA_INVALID: 'criteria-invalid',
-};
-
-export { FORM_CONTROL_SIZES, FORM_TEXT_TYPES };
+} as const;

package/src/Form/{fieldUtils.js → fieldUtils.ts}

@@ -8,10 +8,10 @@ const omitUndefinedProperties = (obj = {}) => Object.entries(obj)
       acc[key] = value;
     }
     return acc;
-  }, {});
+  }, {} as Record<string, any>);
 
-const callAllHandlers = (...handlers) => {
-  const unifiedEventHandler = (event) => {
+const callAllHandlers = <EventType extends Object>(...handlers: ((event: EventType) => void)[]) => {
+  const unifiedEventHandler = (event: EventType) => {
     handlers
       .filter(handler => typeof handler === 'function')
       .forEach(handler => handler(event));
@@ -19,16 +19,19 @@ const callAllHandlers = (...handlers) => {
   return unifiedEventHandler;
 };
 
-const useHasValue = ({ defaultValue, value }) => {
+const useHasValue = <ValueType>({ defaultValue, value }: { defaultValue?: ValueType, value?: ValueType }) => {
   const [hasUncontrolledValue, setHasUncontrolledValue] = useState(!!defaultValue || defaultValue === 0);
   const hasValue = !!value || value === 0 || hasUncontrolledValue;
-  const handleInputEvent = (e) => setHasUncontrolledValue(e.target.value);
+  const handleInputEvent = (e: React.ChangeEvent<HTMLInputElement>) => setHasUncontrolledValue(!!e.target.value);
   return [hasValue, handleInputEvent];
 };
 
-const useIdList = (uniqueIdPrefix, initialList) => {
+const useIdList = (
+  uniqueIdPrefix: string,
+  initialList?: string[],
+): [idList: string[], useRegisteredId: (id: string | undefined) => string | undefined] => {
   const [idList, setIdList] = useState(initialList || []);
-  const addId = (idToAdd) => {
+  const addId = (idToAdd: string) => {
     setIdList(oldIdList => [...oldIdList, idToAdd]);
     return idToAdd;
   };
@@ -36,17 +39,17 @@ const useIdList = (uniqueIdPrefix, initialList) => {
     const idToAdd = newId(`${uniqueIdPrefix}-`);
     return addId(idToAdd);
   };
-  const removeId = (idToRemove) => {
+  const removeId = (idToRemove: string | undefined) => {
     setIdList(oldIdList => oldIdList.filter(id => id !== idToRemove));
   };
 
-  const useRegisteredId = (explicitlyRegisteredId) => {
+  const useRegisteredId = (explicitlyRegisteredId: string | undefined) => {
     const [registeredId, setRegisteredId] = useState(explicitlyRegisteredId);
     useEffect(() => {
       if (explicitlyRegisteredId) {
         addId(explicitlyRegisteredId);
       } else if (!registeredId) {
-        setRegisteredId(getNewId(uniqueIdPrefix));
+        setRegisteredId(getNewId());
       }
       return () => removeId(registeredId);
     }, [registeredId, explicitlyRegisteredId]);
@@ -56,7 +59,7 @@ const useIdList = (uniqueIdPrefix, initialList) => {
   return [idList, useRegisteredId];
 };
 
-const mergeAttributeValues = (...values) => {
+const mergeAttributeValues = (...values: (string | undefined)[]) => {
   const mergedValues = classNames(values);
   return mergedValues || undefined;
 };

package/src/Form/form-control.mdx

@@ -49,7 +49,9 @@ or [select attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Element
 () => {
   {/* start example state */}
   const [type, setType] = useState('default');
+  const [value, setValue] = useState('');
   {/* end example state */}
+  const handleChange = (e) => setValue(e.target.value);
 
   const inputs = {
     default: (
@@ -144,8 +146,6 @@ or [select attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Element
       </Form.Group>
     </>),
   };
-  const [value, setValue] = useState('');
-  const handleChange = (e) => setValue(e.target.value);
   return (
     <>
       {/* start example form block */}
@@ -172,7 +172,9 @@ See [react-imask](https://imask.js.org) for documentation on available props.
 () => {
   {/* start example state */}
   const [maskType, setMaskType] = useState('phone');
+  const [value, setValue] = useState('');
   {/* end example state */}
+  const handleChange = (e) => setValue(e.target.value);
 
   const inputsWithMask = {
     phone: (
@@ -255,10 +257,6 @@ See [react-imask](https://imask.js.org) for documentation on available props.
     ),
   };
 
-  const [value, setValue] = useState('');
-
-  const handleChange = (e) => setValue(e.target.value);
-
   return (
     <>
       {/* start example form block */}