@openedx/paragon 23.14.0 → 23.14.2

package/src/DataTable/DropdownFilters.jsx

@@ -1,13 +1,18 @@
 import React, { useContext, useMemo } from 'react';
+import { useIntl } from 'react-intl';
 import DataTableContext from './DataTableContext';
 import { DropdownButton } from '../Dropdown';
 import useWindowSize from '../hooks/useWindowSizeHook';
 import breakpoints from '../utils/breakpoints';
+import messages from './messages';
 
 /** The first filter will be as an input, additional filters will be available in a dropdown.  */
 function DropdownFilters() {
+  const intl = useIntl();
   const { width } = useWindowSize();
-  const { columns, numBreakoutFilters } = useContext(DataTableContext);
+  const {
+    columns, numBreakoutFilters, filtersTitle,
+  } = useContext(DataTableContext);
 
   const [breakoutFilters, otherFilters] = useMemo(() => {
     if (!columns) {
@@ -25,6 +30,8 @@ function DropdownFilters() {
     return [boFilters, dropdownFilters];
   }, [columns, width, numBreakoutFilters]);
 
+  const dropdownTitle = filtersTitle || intl.formatMessage(messages.filtersDropdownTitle);
+
   return (
     <div className="pgn__data-table-filters">
       {breakoutFilters.length > 0 && breakoutFilters.map((column) => (
@@ -33,7 +40,7 @@ function DropdownFilters() {
         </div>
       ))}
       {otherFilters.length > 0 && (
-        <DropdownButton variant="outline-primary" id="table-filters-dropdown" title="Filters">
+        <DropdownButton variant="outline-primary" id="table-filters-dropdown" title={dropdownTitle}>
           {otherFilters.map((column) => (
             <div
               key={column.Header}

package/src/DataTable/README.md

@@ -176,7 +176,7 @@ To enable proper selection behavior with backend pagination (i.e., when ``isSele
       producer: 'Isao Takahata',
       release_date: 1986,
       rt_score: 95,
-    }, 
+    },
     {
       id: '12cfb892-aac0-4c5b-94af-521852e46d6a',
       title: 'Grave of the Fireflies',
@@ -567,7 +567,7 @@ Can be used to show the loading state when ``DataTable`` is asynchronously fetch
     },
   ];
   {/* end example state */}
-  
+
   return (
     <>
       {/* start example form block */}
@@ -634,7 +634,7 @@ You can pass a function to render custom components for bulk actions and table a
       Enroll
     </Button>
   );
-  
+
   const EnrollAction = ({ selectedFlatRows, ...rest }) => (
     // Here is access to the selectedFlatRows, isEntireTableSelected, tableInstance
     <Button variant="danger" onClick={() => console.log('Enroll', selectedFlatRows, rest)}>
@@ -647,13 +647,13 @@ You can pass a function to render custom components for bulk actions and table a
       Assign
     </Button>
   );
-  
+
   const ExtraAction = ({ text, selectedFlatRows, ...rest }) => (
     <Button onClick={() => console.log(`Extra Action ${text}`, selectedFlatRows, rest)}>
       {`Extra Action ${text}`}
     </Button>
   );
-  
+
   return (
     <DataTable
       isSelectable
@@ -734,7 +734,7 @@ You can pass a function to render custom components for bulk actions and table a
     </DataTable>
   )
 }
-  
+
 ```
 
 #### Actions with Data view toggle enabled
@@ -889,7 +889,7 @@ a responsive grid of cards.
       Clear Selection
     </Component>
   );
-  
+
   return (
     <DataTable
       isFilterable
@@ -1103,7 +1103,7 @@ Use `columnSizes` prop of `CardView` component to define how many `Cards` are sh
 
   const ExampleCard = ({ className, original }) => {
     const { name, color, famous_for: famousFor } = original;
-		
+
     return (
       <Card className={className}>
         <Card.ImageCap src="https://picsum.photos/360/200/" srcAlt="Card image" />
@@ -1195,7 +1195,7 @@ You can also display `Cards` with horizontal view. If the table is selectable co
           <Card.Header title={name} />
           <Card.Section>
             <dl>
-              <dt>Color</dt>								
+              <dt>Color</dt>
               <dd>{color}</dd>
               <dt>Famous For</dt>
               <dd>{famousFor}</dd>
@@ -1217,7 +1217,7 @@ You can also display `Cards` with horizontal view. If the table is selectable co
           name: 'Lil Bub',
           color: 'brown tabby',
           famous_for: 'weird tongue',
-        }, 
+        },
         {
           name: 'Grumpy Cat',
           color: 'siamese',
@@ -1258,6 +1258,7 @@ For a more desktop friendly view, you can move filters into a sidebar by providi
 ```jsx live
   <DataTable
     showFiltersInSidebar
+    filtersTitle="Color filters"
     isFilterable
     isSortable
     defaultColumnValues={{ Filter: TextFilter }}
@@ -1330,17 +1331,17 @@ For a more desktop friendly view, you can move filters into a sidebar by providi
 ```
 
 ## Expandable rows
-`DataTable` supports expandable rows which once expanded render additional content under the row. Displayed content 
+`DataTable` supports expandable rows which once expanded render additional content under the row. Displayed content
 is controlled by the `renderRowSubComponent` prop, which is a function that receives `row` as its single prop and renders expanded view, you also
 need to pass `isEpandable` prop to `DataTable` to indicate that it should support expand behavior for rows.
-Finally, an additional column is required to be included into `columns` prop which will contain handlers for expand / collapse behavior, see examples below. 
+Finally, an additional column is required to be included into `columns` prop which will contain handlers for expand / collapse behavior, see examples below.
 
 ### Default view
 
 Here we use default expander column offered by Paragon and for each row render value of the `name` attribute as its subcomponent.
 
 ```jsx live
-<DataTable 
+<DataTable
   isExpandable
   itemCount={7}
   renderRowSubComponent={({ row }) => <div className='text-center'>{row.values.name}</div>}
@@ -1457,10 +1458,10 @@ You can create your own custom expander column and use it, see code example belo
       </DataTable>
     </div>
   )
-	
+
   return (
     <DataTable
-      isExpandable 
+      isExpandable
       renderRowSubComponent={renderSubComponent}
       itemCount={3}
       data={[
@@ -1481,7 +1482,7 @@ You can create your own custom expander column and use it, see code example belo
           reason: 'Felt like it',
         },
         {
-          name: 'Smoothie', 
+          name: 'Smoothie',
           color: 'orange tabby',
           famous_for: 'modeling',
           date_modified: currentDate,
@@ -1527,7 +1528,7 @@ You can create your own cell content by passing the `Cell` property to a specifi
     newColors[index] = cellColors[index] < 3 ? cellColors[index] + 1 : 0;
     setCellColors(newColors);
   };
-  
+
   return (
     <DataTable
       isExpandable
@@ -1544,7 +1545,7 @@ You can create your own cell content by passing the `Cell` property to a specifi
           famous_for: 'serving moods',
         },
         {
-          name: 'Smoothie', 
+          name: 'Smoothie',
           color: 'orange tabby',
           famous_for: 'modeling',
         },

package/src/DataTable/index.jsx

@@ -49,6 +49,7 @@ function DataTable({
   EmptyTableComponent,
   manualSelectColumn,
   showFiltersInSidebar,
+  filtersTitle,
   dataViewToggleOptions,
   disableElevation,
   isLoading,
@@ -215,6 +216,7 @@ function DataTable({
     manualSelectColumn,
     maxSelectedRows,
     onMaxSelectedRows,
+    filtersTitle,
     ...selectionProps,
     ...selectionActions,
     ...props,
@@ -222,7 +224,7 @@ function DataTable({
 
   return (
     <DataTableContext.Provider value={enhancedInstance}>
-      <DataTableLayout>
+      <DataTableLayout filtersTitle={filtersTitle}>
         <div className={classNames('pgn__data-table-wrapper', {
           'hide-shadow': !!disableElevation,
         })}
@@ -264,6 +266,7 @@ DataTable.defaultProps = {
   FilterStatusComponent: FilterStatus,
   RowStatusComponent: RowStatus,
   showFiltersInSidebar: false,
+  filtersTitle: undefined,
   dataViewToggleOptions: {
     isDataViewToggleEnabled: false,
     onDataViewToggle: () => {},
@@ -425,6 +428,8 @@ DataTable.propTypes = {
   children: PropTypes.node,
   /** If true filters will be shown on sidebar instead */
   showFiltersInSidebar: PropTypes.bool,
+  /** Title of the filters section */
+  filtersTitle: PropTypes.string,
   /** options for data view toggle */
   dataViewToggleOptions: PropTypes.shape({
     /** Whether to show a toggle button group which allows view switching between card and table views */

package/src/DataTable/messages.js

@@ -6,6 +6,11 @@ const messages = defineMessages({
     defaultMessage: 'table pagination',
     description: 'Accessibile name for the navigation element of a pagination component',
   },
+  filtersDropdownTitle: {
+    id: 'pgn.DataTable.filtersDropdownTitle',
+    defaultMessage: 'Filters',
+    description: 'Title of the filters dropdown',
+  },
 });
 
 export default messages;

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

@@ -8,6 +8,7 @@ import DataTable from '..';
 import DataTableContext from '../DataTableContext';
 import { TextFilter } from '../..';
 import { SELECT_ALL_TEST_ID } from '../selection/data/constants';
+import messages from '../messages';
 
 const additionalColumns = [
   {
@@ -162,6 +163,55 @@ describe('<DataTable />', () => {
     expect(screen.getByText('Action')).toBeInTheDocument();
     expect(screen.getByText('More')).toBeInTheDocument();
   });
+
+  it('displays the custom filters title in the sidebar', () => {
+    render(
+      <DataTableWrapper
+        showFiltersInSidebar
+        filtersTitle="Refine Your Search"
+        isFilterable
+        defaultColumnValues={{ Filter: TextFilter }}
+        {...props}
+      />,
+    );
+    expect(screen.getByRole('heading', { name: 'Refine Your Search' })).toBeInTheDocument();
+  });
+
+  it('displays the default filters title in the sidebar', () => {
+    render(
+      <DataTableWrapper
+        showFiltersInSidebar
+        isFilterable
+        defaultColumnValues={{ Filter: TextFilter }}
+        {...props}
+      />,
+    );
+    expect(screen.getByRole('heading', { name: messages.filtersDropdownTitle.defaultMessage })).toBeInTheDocument();
+  });
+
+  it('displays the custom filters title in the filters dropdown', () => {
+    render(
+      <DataTableWrapper
+        filtersTitle="Refine Your Search"
+        isFilterable
+        defaultColumnValues={{ Filter: TextFilter }}
+        {...props}
+      />,
+    );
+    expect(screen.getByRole('button', { name: 'Refine Your Search' })).toBeInTheDocument();
+  });
+
+  it('displays the default filters title in the filters dropdown', () => {
+    render(
+      <DataTableWrapper
+        isFilterable
+        defaultColumnValues={{ Filter: TextFilter }}
+        {...props}
+      />,
+    );
+    expect(screen.getByRole('button', { name: messages.filtersDropdownTitle.defaultMessage })).toBeInTheDocument();
+  });
+
   it('calls useTable with the data and columns', () => {
     const spy = jest.spyOn(reactTable, 'useTable');
     render(<DataTableWrapper {...props} />);
@@ -213,7 +263,7 @@ describe('<DataTable />', () => {
       fetchData: jest.fn(),
     };
     render(<DataTableWrapper {...propsWithSelection} />);
-    const filtersButton = screen.getByRole('button', { name: 'Filters' });
+    const filtersButton = screen.getByRole('button', { name: messages.filtersDropdownTitle.defaultMessage });
 
     await userEvent.click(filtersButton);
 

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

@@ -1,10 +1,12 @@
 import React from 'react';
 import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
+import { IntlProvider } from 'react-intl';
 
 import DropdownFilters from '../DropdownFilters';
 import { useWindowSize } from '../..';
 import DataTableContext from '../DataTableContext';
+import messages from '../messages';
 
 jest.mock('../../hooks/useWindowSizeHook');
 
@@ -31,9 +33,11 @@ const instance = {
 // eslint-disable-next-line react/prop-types
 function DropdownFiltersWrapper({ value = instance, props }) {
   return (
-    <DataTableContext.Provider value={value}>
-      <DropdownFilters {...props} />
-    </DataTableContext.Provider>
+    <IntlProvider locale="en">
+      <DataTableContext.Provider value={value}>
+        <DropdownFilters {...props} />
+      </DataTableContext.Provider>
+    </IntlProvider>
   );
 }
 
@@ -56,7 +60,7 @@ describe('<DropdownFilters />', () => {
       // filter should be rendered in the dropdown, so should not be present before
       // clicking the button.
       expect(screen.queryByText('Occupation filter')).toBeNull();
-      const filtersButton = screen.getByRole('button', { name: /Filters/i });
+      const filtersButton = screen.getByRole('button', { name: messages.filtersDropdownTitle.defaultMessage });
       await userEvent.click(filtersButton);
       expect(screen.getByText('Occupation filter')).toBeInTheDocument();
     });
@@ -65,7 +69,7 @@ describe('<DropdownFilters />', () => {
       useWindowSize.mockReturnValue({ width: 800 });
       render(<DropdownFiltersWrapper />);
       expect(screen.queryByText('DOB filter')).toBeNull();
-      const filtersButton = screen.getByRole('button', { name: /Filters/i });
+      const filtersButton = screen.getByRole('button', { name: messages.filtersDropdownTitle.defaultMessage });
       await userEvent.click(filtersButton);
       expect(screen.queryByText('DOB filter')).toBeNull();
     });
@@ -74,7 +78,7 @@ describe('<DropdownFilters />', () => {
       useWindowSize.mockReturnValue({ width: 800 });
       render(<DropdownFiltersWrapper value={{ columns: [instance.columns[1]] }} />);
       expect(screen.getByText('Occupation filter')).toBeInTheDocument();
-      expect(screen.queryByRole('button', { name: /Filters/i })).toBeNull();
+      expect(screen.queryByRole('button', { name: messages.filtersDropdownTitle.defaultMessage })).toBeNull();
     });
   });
 
@@ -88,7 +92,7 @@ describe('<DropdownFilters />', () => {
     it('renders all filters in the dropdown', async () => {
       useWindowSize.mockReturnValue({ width: 500 });
       render(<DropdownFiltersWrapper />);
-      const filtersButton = screen.getByRole('button', { name: /Filters/i });
+      const filtersButton = screen.getByRole('button', { name: messages.filtersDropdownTitle.defaultMessage });
       await userEvent.click(filtersButton);
       expect(screen.getByText('Bears filter')).toBeInTheDocument();
       expect(screen.getByText('Occupation filter')).toBeInTheDocument();

package/src/Modal/ModalDialog.tsx

@@ -1,5 +1,4 @@
 import React from 'react';
-import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import { useMediaQuery } from 'react-responsive';
 import { useIntl } from 'react-intl';
@@ -52,7 +51,12 @@ interface Props {
   isBlocking?: boolean;
   /** Specifies the z-index of the modal */
   zIndex?: number;
-  /** Specifies whether overflow is visible in the modal */
+  /**
+   * Specifies whether overflow content inside the modal should be visible.
+   * - `true` - content that exceeds the modal boundaries will remain visible outside the modal's main viewport,
+   * rather than being clipped or hidden.
+   * - `false` - any overflow content will be clipped to fit within the modal's dimensions.
+   */
   isOverflowVisible: boolean;
 }
 
@@ -109,70 +113,6 @@ function ModalDialog({
   );
 }
 
-ModalDialog.propTypes = {
-  /**
-   *  Specifies the content of the dialog
-   */
-  children: PropTypes.node.isRequired,
-  /**
-   * The aria-label of the dialog
-   */
-  title: PropTypes.string.isRequired,
-  /**
-   * A callback to close the modal dialog
-   */
-  onClose: PropTypes.func.isRequired,
-  /**
-   * Is the modal dialog open or closed
-   */
-  isOpen: PropTypes.bool,
-  /**
-   * The close 'x' icon button in the top right of the dialog box
-   */
-  hasCloseButton: PropTypes.bool,
-  /**
-   * Sizes determine the maximum width of the dialog box
-   */
-  size: PropTypes.oneOf(['sm', 'md', 'lg', 'xl', 'fullscreen']),
-  /**
-   * The visual style of the dialog box
-   */
-  variant: PropTypes.oneOf(['default', 'warning', 'danger', 'success', 'dark']),
-  /**
-   * The label supplied to the close icon button if one is rendered
-   */
-  closeLabel: PropTypes.string,
-  /**
-   *  Specifies class name to append to the base element
-   */
-  className: PropTypes.string,
-  /**
-   * Determines where a scrollbar should appear if a modal is too large for the
-   * viewport. When false, the ``ModalDialog``. Body receives a scrollbar, when true
-   * the browser window itself receives the scrollbar.
-   */
-  isFullscreenScroll: PropTypes.bool,
-  /**
-   * To show full screen view on mobile screens
-   */
-  isFullscreenOnMobile: PropTypes.bool,
-  /**
-   * Prevent clicking on the backdrop or pressing Esc to close the modal
-   */
-  isBlocking: PropTypes.bool,
-  /**
-   * Specifies the z-index of the modal
-   */
-  zIndex: PropTypes.number,
-  /**
-   * Specifies whether overflow content inside the modal should be visible.
-   * - `true` - content that exceeds the modal boundaries will remain visible outside the modal's main viewport,
-   * rather than being clipped or hidden.
-   * - `false` - any overflow content will be clipped to fit within the modal's dimensions.
-   */
-  isOverflowVisible: PropTypes.bool.isRequired,
-};
-
 ModalDialog.Header = ModalDialogHeader;
 ModalDialog.Title = ModalDialogTitle;
 ModalDialog.Footer = ModalDialogFooter;

package/src/Modal/ModalLayer.tsx

@@ -1,6 +1,5 @@
 import React, { useEffect } from 'react';
 import classNames from 'classnames';
-import PropTypes from 'prop-types';
 import { FocusOn } from 'react-focus-on';
 import Portal from './Portal';
 import { ModalContextProvider } from './ModalContext';
@@ -18,19 +17,11 @@ function ModalBackdrop({ onClick }: { onClick?: () => void }) {
   );
 }
 
-ModalBackdrop.propTypes = {
-  onClick: PropTypes.func,
-};
-
 // istanbul ignore next
 function ModalContentContainer({ children = null }: { children?: React.ReactNode }) {
   return <div className="pgn__modal-content-container">{children}</div>;
 }
 
-ModalContentContainer.propTypes = {
-  children: PropTypes.node,
-};
-
 interface Props {
   /** Specifies the contents of the modal */
   children: React.ReactNode;
@@ -94,18 +85,5 @@ function ModalLayer({
   );
 }
 
-ModalLayer.propTypes = {
-  /** Specifies the contents of the modal */
-  children: PropTypes.node.isRequired,
-  /** A callback function for when the modal is dismissed */
-  onClose: PropTypes.func.isRequired,
-  /** Is the modal dialog open or closed */
-  isOpen: PropTypes.bool.isRequired,
-  /** Prevent clicking on the backdrop or pressing Esc to close the modal */
-  isBlocking: PropTypes.bool,
-  /** Specifies the z-index of the modal */
-  zIndex: PropTypes.number,
-};
-
 export { ModalBackdrop, ModalContentContainer };
 export default ModalLayer;

package/src/ProductTour/ProductTour.test.jsx

@@ -19,6 +19,8 @@ describe('<ProductTour />', () => {
       <div id="target-4">...</div>
     </>
   );
+  const handleAdvance = jest.fn();
+  const handleBack = jest.fn();
   const handleDismiss = jest.fn();
   const handleEnd = jest.fn();
   const handleEscape = jest.fn();
@@ -31,6 +33,8 @@ describe('<ProductTour />', () => {
     advanceButtonText: 'Next',
     enabled: false,
     endButtonText: 'Okay',
+    onAdvance: handleAdvance,
+    onBack: handleBack,
     onDismiss: handleDismiss,
     onEnd: handleEnd,
     tourId: 'disabledTour',
@@ -48,6 +52,8 @@ describe('<ProductTour />', () => {
     backButtonText: 'Back',
     enabled: true,
     endButtonText: 'Okay',
+    onAdvance: handleAdvance,
+    onBack: handleBack,
     onDismiss: handleDismiss,
     onEnd: handleEnd,
     tourId: 'enabledTour',
@@ -60,6 +66,7 @@ describe('<ProductTour />', () => {
       {
         body: 'Checkpoint 2',
         target: '#target-2',
+        onAdvance: customOnAdvance,
       },
       {
         body: 'Checkpoint 3',
@@ -82,6 +89,7 @@ describe('<ProductTour />', () => {
 
   afterEach(() => {
     popperMock.mockReset();
+    jest.resetAllMocks();
   });
 
   // eslint-disable-next-line react/prop-types
@@ -115,6 +123,38 @@ describe('<ProductTour />', () => {
 
         // Verify the second Checkpoint has rendered
         expect(screen.getByText('Checkpoint 2')).toBeInTheDocument();
+        expect(handleAdvance).toHaveBeenCalled();
+
+        await userEvent.click(advanceButton);
+        expect(screen.getByText('Checkpoint 3')).toBeInTheDocument();
+        expect(customOnAdvance).toHaveBeenCalled();
+      });
+
+      it('onClick of back button rewinds to last checkpoint', async () => {
+        render(<ProductTourWrapper tours={[tourData]} />);
+        // Verify the first Checkpoint has rendered
+        expect(screen.getByRole('heading', { name: 'Checkpoint 1' })).toBeInTheDocument();
+
+        // Click the advance button
+        const advanceButton = screen.getByRole('button', { name: 'Next' });
+        await userEvent.click(advanceButton);
+
+        // go forward to the 3rd checkpoint
+        expect(screen.getByText('Checkpoint 2')).toBeInTheDocument();
+        await userEvent.click(advanceButton);
+        expect(screen.getByText('Checkpoint 3')).toBeInTheDocument();
+
+        // First back button should use custom on back function
+        let backButton = screen.getByRole('button', { name: 'Override back' });
+        await userEvent.click(backButton);
+        expect(screen.getByText('Checkpoint 2')).toBeInTheDocument();
+        expect(customOnBack).toHaveBeenCalled();
+
+        // Second back button should use the tour's default back function
+        backButton = screen.getByRole('button', { name: 'Back' });
+        await userEvent.click(backButton);
+        expect(screen.getByText('Checkpoint 1')).toBeInTheDocument();
+        expect(handleBack).toHaveBeenCalled();
       });
 
       it('onClick of dismiss button disables tour', async () => {
@@ -191,7 +231,6 @@ describe('<ProductTour />', () => {
 
         // Verify no Checkpoints have rendered
         expect(screen.queryByRole('dialog')).not.toBeInTheDocument();
-        expect(handleEnd).toHaveBeenCalledTimes(1);
         expect(customOnEnd).not.toHaveBeenCalled();
       });
 
@@ -284,7 +323,6 @@ describe('<ProductTour />', () => {
         expect(screen.getByText('Checkpoint 4')).toBeInTheDocument();
         const endButton = screen.getByRole('button', { name: 'Override end' });
         await user.click(endButton);
-        expect(handleEnd).toBeCalledTimes(1);
         expect(customOnEnd).toHaveBeenCalledTimes(1);
         expect(screen.queryByText('Checkpoint 4')).not.toBeInTheDocument();
       });

package/src/ProductTour/index.jsx

@@ -12,7 +12,8 @@ const ProductTour = React.forwardRef(({ tours }, ref) => {
     startingIndex,
     onEscape,
     onEnd,
-    onBack,
+    onAdvance: tourOnAdvance,
+    onBack: tourOnBack,
     onDismiss: tourOnDismiss,
     advanceButtonText: tourAdvanceButtonText,
     dismissAltText: tourDismissAltText,
@@ -27,6 +28,7 @@ const ProductTour = React.forwardRef(({ tours }, ref) => {
     title,
     body,
     onAdvance,
+    onBack,
     onDismiss,
     advanceButtonText,
     dismissAltText,
@@ -85,6 +87,8 @@ const ProductTour = React.forwardRef(({ tours }, ref) => {
     setIndex(index + 1);
     if (onAdvance) {
       onAdvance();
+    } else if (tourOnAdvance) {
+      tourOnAdvance();
     }
   };
 
@@ -92,6 +96,8 @@ const ProductTour = React.forwardRef(({ tours }, ref) => {
     setIndex(index - 1);
     if (onBack) {
       onBack();
+    } else if (tourOnBack) {
+      tourOnBack();
     }
   };
 
@@ -100,7 +106,7 @@ const ProductTour = React.forwardRef(({ tours }, ref) => {
     setIsTourEnabled(false);
     if (onDismiss) {
       onDismiss();
-    } else {
+    } else if (tourOnDismiss) {
       tourOnDismiss();
     }
     setCurrentCheckpointData(null);