@openedx/paragon 21.11.4 → 21.12.1

package/dist/i18n/messages/zh_CN.json

@@ -28,5 +28,6 @@
   "pgn.FormAutosuggest.iconButtonClosed": "Close the options menu",
   "pgn.FormAutosuggest.iconButtonOpened": "Open the options menu",
   "pgn.Toast.closeLabel": "Close",
-  "pgn.ProductTour.Checkpoint.position-text": "Top of step {step}"
+  "pgn.ProductTour.Checkpoint.top-position-text": "Top of step {step}",
+  "pgn.ProductTour.Checkpoint.bottom-position-text": "Bottom of step {step}"
 }

package/icons/es5/RightSidebarFilled.js

@@ -0,0 +1,15 @@
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+import * as React from "react";
+const SvgRightSidebarFilled = props => /*#__PURE__*/React.createElement("svg", _extends({
+  width: 24,
+  height: 24,
+  viewBox: "0 0 24 24",
+  fill: "none",
+  xmlns: "http://www.w3.org/2000/svg"
+}, props), /*#__PURE__*/React.createElement("path", {
+  fillRule: "evenodd",
+  clipRule: "evenodd",
+  d: "M2 22V2h20v20H2ZM14 4H4v16h10V4Z",
+  fill: "currentColor"
+}));
+export default SvgRightSidebarFilled;

package/icons/es5/RightSidebarOutlined.js

@@ -0,0 +1,15 @@
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+import * as React from "react";
+const SvgRightSidebarOutlined = props => /*#__PURE__*/React.createElement("svg", _extends({
+  width: 24,
+  height: 24,
+  viewBox: "0 0 24 24",
+  fill: "none",
+  xmlns: "http://www.w3.org/2000/svg"
+}, props), /*#__PURE__*/React.createElement("path", {
+  fillRule: "evenodd",
+  clipRule: "evenodd",
+  d: "M2 2v20h20V2H2Zm18 2h-4v16h4V4ZM4 4h10v16H4V4Z",
+  fill: "currentColor"
+}));
+export default SvgRightSidebarOutlined;

package/icons/es5/index.js

@@ -1694,6 +1694,8 @@ export { default as RestoreFromTrash } from "./RestoreFromTrash";
 export { default as RestorePage } from "./RestorePage";
 export { default as Reviews } from "./Reviews";
 export { default as RiceBowl } from "./RiceBowl";
+export { default as RightSidebarFilled } from "./RightSidebarFilled";
+export { default as RightSidebarOutlined } from "./RightSidebarOutlined";
 export { default as RingVolume } from "./RingVolume";
 export { default as Rocket } from "./Rocket";
 export { default as RocketLaunch } from "./RocketLaunch";

package/icons/jsx/RightSidebarFilled.jsx

@@ -0,0 +1,19 @@
+import * as React from "react";
+const SvgRightSidebarFilled = (props) => (
+  <svg
+    width={24}
+    height={24}
+    viewBox="0 0 24 24"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    {...props}
+  >
+    <path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M2 22V2h20v20H2ZM14 4H4v16h10V4Z"
+      fill="currentColor"
+    />
+  </svg>
+);
+export default SvgRightSidebarFilled;

package/icons/jsx/RightSidebarOutlined.jsx

@@ -0,0 +1,19 @@
+import * as React from "react";
+const SvgRightSidebarOutlined = (props) => (
+  <svg
+    width={24}
+    height={24}
+    viewBox="0 0 24 24"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    {...props}
+  >
+    <path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M2 2v20h20V2H2Zm18 2h-4v16h4V4ZM4 4h10v16H4V4Z"
+      fill="currentColor"
+    />
+  </svg>
+);
+export default SvgRightSidebarOutlined;

package/icons/jsx/index.jsx

@@ -1694,6 +1694,8 @@ export { default as RestoreFromTrash } from "./RestoreFromTrash";
 export { default as RestorePage } from "./RestorePage";
 export { default as Reviews } from "./Reviews";
 export { default as RiceBowl } from "./RiceBowl";
+export { default as RightSidebarFilled } from "./RightSidebarFilled";
+export { default as RightSidebarOutlined } from "./RightSidebarOutlined";
 export { default as RingVolume } from "./RingVolume";
 export { default as Rocket } from "./Rocket";
 export { default as RocketLaunch } from "./RocketLaunch";

package/icons/svg/right_sidebar_filled.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M2 22V2H22V22H2ZM14 4H4V20H14V4Z" fill="black"/>
+</svg>

package/icons/svg/right_sidebar_outlined.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M2 2V22H22V2H2ZM20 4H16V20H20V4ZM4 4H14V20H4V4Z" fill="black"/>
+</svg>

package/package.json

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

package/src/Container/index.jsx

@@ -28,11 +28,14 @@ Container.propTypes = {
   ...RBContainer.propTypes,
   /** Override the base element */
   as: PropTypes.elementType,
+  /** Specifies the contents of the container */
   children: PropTypes.node,
   /** Fill all available space at any breakpoint */
   fluid: PropTypes.bool,
   /** Set the maximum width for the container */
   size: PropTypes.oneOf(Object.keys(SIZE_CLASS_NAMES)),
+  /** Overrides underlying component base CSS class name */
+  bsPrefix: PropTypes.string,
 };
 
 Container.defaultProps = {
@@ -40,6 +43,7 @@ Container.defaultProps = {
   children: undefined,
   fluid: true,
   size: undefined,
+  bsPrefix: 'container',
 };
 
 export default Container;

package/src/DataTable/index.jsx

@@ -187,6 +187,7 @@ function DataTable({
 
   const enhancedInstance = {
     ...instance,
+    manualFilters,
     itemCount,
     numBreakoutFilters,
     bulkActions,

package/src/DataTable/selection/BaseSelectionStatus.jsx

@@ -22,11 +22,11 @@ function BaseSelectionStatus({
 }) {
   const {
     itemCount, filteredRows, isPaginated, state,
-    isSelectable, maxSelectedRows,
+    isSelectable, maxSelectedRows, manualFilters,
   } = useContext(DataTableContext);
   const hasAppliedFilters = state?.filters?.length > 0;
   const isAllRowsSelected = numSelectedRows === itemCount;
-  const filteredItems = filteredRows?.length || itemCount;
+  const filteredItems = manualFilters ? itemCount : (filteredRows?.length || itemCount);
   const hasMaxSelectedRows = isSelectable && maxSelectedRows;
 
   const intlAllSelectedText = allSelectedText || (

package/src/DataTable/tests/DataTable.test.jsx

@@ -6,6 +6,8 @@ import { IntlProvider } from 'react-intl';
 
 import DataTable from '..';
 import DataTableContext from '../DataTableContext';
+import { TextFilter } from '../..';
+import { SELECT_ALL_TEST_ID } from '../selection/data/constants';
 
 const additionalColumns = [
   {
@@ -198,6 +200,35 @@ describe('<DataTable />', () => {
 
     expect(spinner).toBeTruthy();
   });
+  it('displays the total number of items when applying filter and selecting all items', async () => {
+    const propsWithSelection = {
+      ...props,
+      isSelectable: true,
+      isFilterable: true,
+      manualFilters: true,
+      defaultColumnValues: { Filter: TextFilter },
+      isPaginated: true,
+      initialState: { pageSize: 3, pageIndex: 0 },
+      pageCount: 3,
+      fetchData: jest.fn(),
+    };
+
+    render(<DataTableWrapper {...propsWithSelection} />);
+    const filtersButton = screen.getByRole('button', { name: 'Filters' });
+
+    await userEvent.click(filtersButton);
+
+    const searchFormControl = screen.getByPlaceholderText('Search coat color');
+    await userEvent.type(searchFormControl, 'brown tabby');
+
+    const selectAllCheckBox = screen.getByTitle('Toggle All Current Page Rows Selected');
+    await userEvent.click(selectAllCheckBox);
+
+    const selectAllButton = screen.getByTestId(SELECT_ALL_TEST_ID);
+    // A filtered array is returned from the backend,
+    // and the element counter displays its length.
+    expect(selectAllButton).toHaveTextContent('Select all 7');
+  });
 
   describe('[legacy] controlled table selections', () => {
     it('passes initial controlledTableSelections to context', async () => {

package/src/Dropdown/index.jsx

@@ -69,6 +69,7 @@ const Dropdown = React.forwardRef(
     );
   },
 );
+
 Dropdown.propTypes = {
   autoClose: PropTypes.oneOfType([
     PropTypes.string,
@@ -79,6 +80,7 @@ Dropdown.propTypes = {
   show: PropTypes.bool,
   variant: PropTypes.oneOf(['light', 'dark']),
 };
+
 Dropdown.defaultProps = {
   autoClose: true,
   className: '',
@@ -127,9 +129,11 @@ Dropdown.Item = React.forwardRef(
     );
   },
 );
+
 Dropdown.Item.propTypes = {
   className: PropTypes.string,
 };
+
 Dropdown.Item.defaultProps = {
   className: undefined,
 };

package/src/Form/FormSwitch.jsx

@@ -79,8 +79,11 @@ FormSwitch.propTypes = {
   children: PropTypes.node.isRequired,
   /** Specifies class name to append to the base element. */
   className: PropTypes.string,
+  /** Specifies class name to append to the label element. */
   labelClassName: PropTypes.string,
+  /** Specifies helper text to display below the switch. */
   helperText: PropTypes.node,
+  /** Determines whether the label should float to the left when the switch is active. */
   floatLabelLeft: PropTypes.bool,
 };
 

package/src/Hyperlink/index.jsx

@@ -101,18 +101,19 @@ Hyperlink.propTypes = {
   children: PropTypes.node.isRequired,
   /** Custom class names for the hyperlink */
   className: PropTypes.string,
-  /** specifies where the link should open. The default behavior is `_self`, which means that the URL will be loaded into the same browsing context as the current one. If the target is `_blank` (opening a new window) `rel='noopener'` will be added to the anchor tag to prevent any potential [reverse tabnabbing attack](https://www.owasp.org/index.php/Reverse_Tabnabbing).
-   */
+  /** specifies where the link should open. The default behavior is `_self`, which means that the URL will be
+   * loaded into the same browsing context as the current one.
+   * If the target is `_blank` (opening a new window) `rel='noopener'` will be added to the anchor tag to prevent
+   * any potential [reverse tabnabbing attack](https://www.owasp.org/index.php/Reverse_Tabnabbing).
+  */
   target: PropTypes.string,
   /** specifies the callback function when the link is clicked */
   onClick: PropTypes.func,
-  // eslint-disable-next-line max-len
   /** specifies the text for links with a `_blank` target (which loads the URL in a new browsing context). */
   externalLinkAlternativeText: isRequiredIf(
     PropTypes.string,
     props => props.target === '_blank',
   ),
-  // eslint-disable-next-line max-len
   /** specifies the title for links with a `_blank` target (which loads the URL in a new browsing context). */
   externalLinkTitle: isRequiredIf(
     PropTypes.string,
@@ -120,9 +121,9 @@ Hyperlink.propTypes = {
   ),
   /** type of hyperlink */
   variant: PropTypes.oneOf(['default', 'muted', 'brand']),
-  /** specify the link style. By default it will be underlined. */
+  /** specify the link style. By default, it will be underlined. */
   isInline: PropTypes.bool,
-  /** specify if we need to show launch Icon. By default it will be visible. */
+  /** specify if we need to show launch Icon. By default, it will be visible. */
   showLaunchIcon: PropTypes.bool,
 };
 

package/src/Icon/index.jsx

@@ -70,28 +70,35 @@ function Icon({
 }
 
 Icon.propTypes = {
-  // eslint-disable-next-line max-len
-  /** An icon component to render. Example import of a Paragon icon component: `import { Check } from '@edx/paragon/dist/icon';` */
+  /**
+   * An icon component to render.
+   * Example import of a Paragon icon component: `import { Check } from '@edx/paragon/icons';`
+   */
   src: PropTypes.oneOfType([PropTypes.element, PropTypes.func]),
   /** HTML element attributes to pass through to the underlying svg element */
   svgAttrs: PropTypes.shape({
     'aria-label': PropTypes.string,
     'aria-labelledby': PropTypes.string,
   }),
-  // eslint-disable-next-line max-len
-  /** the `id` property of the Icon element, by default this value is generated with the `newId` function with the `prefix` of `Icon`. */
+  /**
+   * the `id` property of the Icon element, by default this value is generated
+   * with the `newId` function with the `prefix` of `Icon`.
+   */
   id: PropTypes.string,
-  // eslint-disable-next-line max-len
   /** The size of the icon. */
   size: PropTypes.oneOf(['xs', 'sm', 'md', 'lg']),
-  // eslint-disable-next-line max-len
   /** A class name that will define what the Icon looks like. */
   className: PropTypes.string,
-  // eslint-disable-next-line max-len
-  /** a boolean that determines the value of `aria-hidden` attribute on the Icon span, this value is `true` by default. */
+  /**
+   * a boolean that determines the value of `aria-hidden` attribute on the Icon span,
+   * this value is `true` by default.
+   */
   hidden: PropTypes.bool,
-  // eslint-disable-next-line max-len
-  /** a string or an element that will be used on a secondary span leveraging the `sr-only` style for screenreader only text, this value is `undefined` by default. This value is recommended for use unless the Icon is being used in a way that is purely decorative or provides no additional context for screen reader users. This field should be thought of the same way an `alt` attribute would be used for `image` tags.
+  /**
+   * a string or an element that will be used on a secondary span leveraging the `sr-only` style
+   * for screenreader only text, this value is `undefined` by default. This value is recommended for use unless
+   * the Icon is being used in a way that is purely decorative or provides no additional context for screen
+   * reader users. This field should be thought of the same way an `alt` attribute would be used for `image` tags.
    */
   screenReaderText: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),
 };

package/src/IconButton/index.jsx

@@ -87,7 +87,7 @@ IconButton.propTypes = {
   alt: PropTypes.string.isRequired,
   /** Changes icon styles for dark background */
   invertColors: PropTypes.bool,
-  /** Accepts a React fontawesome icon. https://fontawesome.com/how-to-use/on-the-web/using-with/react */
+  /** Accepts a React fontawesome icon. */
   icon: PropTypes.shape({
     prefix: PropTypes.string,
     iconName: PropTypes.string,

package/src/Layout/index.jsx

@@ -84,9 +84,6 @@ SIZES.forEach(size => {
   Layout.defaultProps[size] = sizeDefaultProps;
 });
 
-export {
-  Col,
-  Row,
-};
+export { Col, Row };
 Layout.Element = LayoutElement;
 export default Layout;

package/src/Modal/ModalDialog.jsx

@@ -116,6 +116,9 @@ ModalDialog.propTypes = {
    * Prevent clicking on the backdrop to close the modal
    */
   isBlocking: PropTypes.bool,
+  /**
+   * Specifies the z-index of the modal
+   */
   zIndex: PropTypes.number,
 };
 

package/src/Modal/index.jsx

@@ -1,4 +1,3 @@
-/* eslint-disable max-len */
 import React from 'react';
 import ReactDOM from 'react-dom';
 import classNames from 'classnames';
@@ -271,21 +270,26 @@ class Modal extends React.Component {
 Modal.propTypes = {
   /** specifies whether the modal renders open or closed on the initial render. It defaults to false. */
   open: PropTypes.bool,
-  /** is the selector for an element in the dom which the modal should be rendered under. It uses querySelector to find the first element that matches that selector, and then creates a react portal to a div underneath the parent element.
- */
+  /** is the selector for an element in the dom which the modal should be rendered under.
+   * It uses querySelector to find the first element that matches that selector,
+   * and then creates a React portal to a div underneath the parent element.
+   */
   parentSelector: PropTypes.string,
   /** a string or an element that is rendered inside of the modal title, above the modal body. */
   title: PropTypes.oneOfType([PropTypes.string, PropTypes.element]).isRequired,
   /** a string or an element that is rendered inside of the modal body, between the title and the footer. */
   body: PropTypes.oneOfType([PropTypes.string, PropTypes.element]).isRequired,
-  /** an array of either elements or shapes that take the form of the buttonPropTypes. See the [buttonPropTypes](https://github.com/openedx/paragon/blob/master/src/Button/index.jsx#L40) for a list of acceptable props to pass as part of a button. */
+  /** an array of either elements or shapes that take the form of the buttonPropTypes.
+   * See the [buttonPropTypes](https://github.com/openedx/paragon/blob/master/src/Button/index.jsx#L40)
+   * for a list of acceptable props to pass as part of a button. */
   buttons: PropTypes.arrayOf(PropTypes.oneOfType([
     PropTypes.element,
     PropTypes.shape({}), // TODO: Only accept nodes in the future
   ])),
   /** specifies the display text of the default Close button. It defaults to "Close". */
   closeText: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),
-  /** a function that is called on close. It can be used to perform actions upon closing of the modal, such as restoring focus to the previous logical focusable element. */
+  /** a function that is called on close. It can be used to perform actions upon closing of the modal,
+   * such as restoring focus to the previous logical focusable element. */
   onClose: PropTypes.func.isRequired,
   variant: PropTypes.shape({
     status: PropTypes.string,
@@ -295,7 +299,8 @@ Modal.propTypes = {
   /** specifies whether a close button is rendered in the modal header. It defaults to true. */
   renderHeaderCloseButton: PropTypes.bool,
   /**
-   * Specifies optional classes to add to the element with the '.modal-dialog' class.  See Bootstrap documentation for possible classes.  Some options: modal-lg, modal-sm, modal-dialog-centered
+   * Specifies optional classes to add to the element with the '.modal-dialog' class.
+   * See Bootstrap documentation for possible classes.  Some options: modal-lg, modal-sm, modal-dialog-centered
    */
   dialogClassName: PropTypes.string,
 };

package/src/Popover/README.md

@@ -3,7 +3,6 @@ title: 'Popover'
 type: 'component'
 components:
 - Popover
-- WrapperPopover
 - PopoverTitle
 - PopoverContent
 categories:

package/src/Popover/index.jsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
-import Popover from 'react-bootstrap/Popover';
+import BasePopover from 'react-bootstrap/Popover';
 import BasePopoverTitle from 'react-bootstrap/PopoverTitle';
 import BasePopoverContent from 'react-bootstrap/PopoverContent';
 
@@ -13,18 +13,18 @@ const PLACEMENT_VARIANTS = [
   'right',
 ];
 
-const WrapperPopover = React.forwardRef(({
+const Popover = React.forwardRef(({
   children,
   variant,
   ...props
 }, ref) => (
-  <Popover
+  <BasePopover
     {...props}
     className={classNames({ [`popover-${variant}`]: !!variant }, props.className)}
     ref={ref}
   >
     {children}
-  </Popover>
+  </BasePopover>
 ));
 
 function PopoverTitle(props) {
@@ -44,8 +44,8 @@ const commonPropTypes = {
 PopoverTitle.propTypes = commonPropTypes;
 PopoverContent.propTypes = commonPropTypes;
 
-WrapperPopover.propTypes = {
-  ...Popover.propTypes,
+Popover.propTypes = {
+  ...BasePopover.propTypes,
   /** An html id attribute, necessary for accessibility. */
   id: PropTypes.string.isRequired,
   /**
@@ -88,8 +88,8 @@ WrapperPopover.propTypes = {
   variant: PropTypes.string,
 };
 
-WrapperPopover.defaultProps = {
-  ...Popover.defaultProps,
+Popover.defaultProps = {
+  ...BasePopover.defaultProps,
   placement: 'right',
   title: undefined,
   arrowProps: undefined,
@@ -111,8 +111,8 @@ PopoverContent.defaultProps = {
   bsPrefix: 'popover-body',
 };
 
-WrapperPopover.Title = PopoverTitle;
-WrapperPopover.Content = PopoverContent;
+Popover.Title = PopoverTitle;
+Popover.Content = PopoverContent;
 
 export { PopoverTitle, PopoverContent };
-export default WrapperPopover;
+export default Popover;

package/src/ProductTour/Checkpoint.jsx

@@ -10,6 +10,7 @@ import CheckpointActionRow from './CheckpointActionRow';
 import CheckpointBody from './CheckpointBody';
 import CheckpointBreadcrumbs from './CheckpointBreadcrumbs';
 import CheckpointTitle from './CheckpointTitle';
+import messages from './messages';
 
 const Checkpoint = React.forwardRef(({
   body,
@@ -99,10 +100,8 @@ const Checkpoint = React.forwardRef(({
     >
       <span className="sr-only">
         <FormattedMessage
-          id="pgn.ProductTour.Checkpoint.position-text"
-          defaultMessage="Top of step {step}"
-          value={{ step: index + 1 }}
-          description="Screen-reader message to indicate the user's position in a sequence of checkpoints."
+          {...messages.topPositionText}
+          values={{ step: index + 1 }}
         />
       </span>
       {(title || !isOnlyCheckpoint) && (
@@ -118,8 +117,12 @@ const Checkpoint = React.forwardRef(({
         {...props}
       />
       <div id="pgn__checkpoint-arrow" data-popper-arrow />
-      {/* This text is not translated due to Paragon's lack of i18n support */}
-      <span className="sr-only">Bottom of step {index + 1}</span>
+      <span className="sr-only">
+        <FormattedMessage
+          {...messages.bottomPositionText}
+          values={{ step: index + 1 }}
+        />
+      </span>
     </div>
   );
 });

package/src/ProductTour/messages.js

@@ -0,0 +1,16 @@
+import { defineMessages } from 'react-intl';
+
+const messages = defineMessages({
+  topPositionText: {
+    id: 'pgn.ProductTour.Checkpoint.top-position-text',
+    defaultMessage: 'Top of step {step}',
+    description: 'Screen-reader message to notify user that they are located at the bottom of the product tour step.',
+  },
+  bottomPositionText: {
+    id: 'pgn.ProductTour.Checkpoint.bottom-position-text',
+    defaultMessage: 'Bottom of step {step}',
+    description: 'Screen-reader message to notify user that they are located at the bottom of the product tour step.',
+  },
+});
+
+export default messages;

package/src/SearchField/SearchFieldAdvanced.jsx

@@ -1,4 +1,3 @@
-/* eslint-disable max-len */
 import React, {
   useRef, createContext, useState, useEffect,
 } from 'react';
@@ -138,27 +137,32 @@ SearchFieldAdvanced.propTypes = {
   onSubmit: PropTypes.func.isRequired,
   /** specifies a custom class name. */
   className: PropTypes.string,
-  /** specifies a callback function for when the user loses focus in the `SearchField` component. The default is an empty function. For example:
+  /** specifies a callback function for when the user loses focus in the `SearchField` component.
+   * The default is an empty function. For example:
   ```jsx
   <SearchField onBlur={event => console.log(event)} />
   ``` */
   onBlur: PropTypes.func,
-  /** specifies a callback function for when the value in `SearchField` is changed by the user. The default is an empty function. For example:
+  /** specifies a callback function for when the value in `SearchField` is changed by the user.
+   * The default is an empty function. For example:
   ```jsx
   <SearchField onChange={value => console.log(value)} />
   ``` */
   onChange: PropTypes.func,
-  /** specifies a callback function for when the value in `SearchField` is cleared by the user. The default is an empty function. For example:
+  /** specifies a callback function for when the value in `SearchField` is cleared by the user.
+   * The default is an empty function. For example:
   ```jsx
   <SearchField onClear={() => console.log('search cleared')} />
   ``` */
   onClear: PropTypes.func,
-  /** specifies a callback function for when the user focuses in the `SearchField` component. The default is an empty function. For example:
+  /** specifies a callback function for when the user focuses in the `SearchField` component.
+   * The default is an empty function. For example:
   ```jsx
   <SearchField onFocus={event => console.log(event)} />
   ``` */
   onFocus: PropTypes.func,
-  /** specifies the screenreader text for both the clear and submit buttons (e.g., for i18n translations). The default is `{ label: 'search', clearButton: 'clear search', searchButton: 'submit search' }`. */
+  /** specifies the screenreader text for both the clear and submit buttons (e.g., for i18n translations).
+   * The default is `{ label: 'search', clearButton: 'clear search', searchButton: 'submit search' }`. */
   screenReaderText: PropTypes.shape({
     label: PropTypes.oneOfType([PropTypes.string, PropTypes.element]).isRequired,
     submitButton: PropTypes.oneOfType([PropTypes.string, PropTypes.element]).isRequired,
@@ -171,7 +175,8 @@ SearchFieldAdvanced.propTypes = {
     submit: PropTypes.element.isRequired,
     clear: PropTypes.element,
   }),
-  /** specifies the aria-label attribute on the form element. This is useful if you use the `SearchField` component more than once on a page. */
+  /** specifies the aria-label attribute on the form element. This is useful if you use the `SearchField` component
+   * more than once on a page. */
   formAriaLabel: PropTypes.string,
   /** Specifies whether the `SearchField` is disabled. */
   disabled: PropTypes.bool,

package/src/SearchField/SearchFieldLabel.jsx

@@ -1,4 +1,3 @@
-/* eslint-disable max-len */
 import React, { useContext } from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
@@ -21,8 +20,9 @@ function SearchFieldLabel({ children, ...props }) {
 
 SearchFieldLabel.propTypes = {
   /**
-   * specifies the label to use for the input field (e.g., for i18n translations). Note: if `children` is not provided,
-   * a screenreader-only label will be used in its placed based on the `screenReaderText.label` prop for `SearchField.Advanced`.
+   * specifies the label to use for the input field (e.g., for i18n translations).
+   * Note: if `children` is not provided, a screenreader-only label will be used in
+   * its placed based on the `screenReaderText.label` prop for `SearchField.Advanced`.
    */
   children: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),
 };

package/src/SearchField/index.jsx

@@ -1,4 +1,3 @@
-/* eslint-disable max-len */
 import React, { useCallback } from 'react';
 import PropTypes from 'prop-types';