@atlaskit/link-datasource 1.26.1 → 1.26.3

package/dist/es2019/ui/common/modal/popup-select/menu-list/showMoreButton.js

@@ -0,0 +1,29 @@
+import React, { useCallback } from 'react';
+import { useIntl } from 'react-intl-next';
+import Button from '@atlaskit/button';
+import { useDatasourceAnalyticsEvents } from '../../../../../analytics';
+import { asyncPopupSelectMessages } from './messages';
+const ShowMoreButton = ({
+  onShowMore,
+  filterName
+}) => {
+  const {
+    formatMessage
+  } = useIntl();
+  const {
+    fireEvent
+  } = useDatasourceAnalyticsEvents();
+  const handleShowMore = useCallback(() => {
+    fireEvent('ui.button.clicked.basicSearchDropdown', {
+      filterName,
+      type: 'showMore'
+    });
+    onShowMore();
+  }, [filterName, fireEvent, onShowMore]);
+  return /*#__PURE__*/React.createElement(Button, {
+    onClick: handleShowMore,
+    appearance: "link",
+    testId: "jlol-basic-filter-popup-select--show-more-button"
+  }, formatMessage(asyncPopupSelectMessages.showMoreMessage));
+};
+export default ShowMoreButton;

package/dist/es2019/ui/common/modal/popup-select/messages.js

@@ -0,0 +1,13 @@
+import { defineMessages } from 'react-intl-next';
+export const asyncPopupSelectMessages = defineMessages({
+  selectPlaceholder: {
+    id: 'linkDataSource.basic-filter.dropdown.select.placeholder',
+    description: 'Placeholder text to be displayed for the search input box.',
+    defaultMessage: 'Search'
+  },
+  paginationDetails: {
+    id: 'linkDataSource.basic-filter.footer.pagination-details',
+    description: 'Text to indicate page count and total count information.',
+    defaultMessage: '{currentDisplayCount} of {totalCount}'
+  }
+});

package/dist/es2019/ui/{jira-issues-modal/basic-filters/ui/async-popup-select → common/modal/popup-select}/trigger.js

@@ -1,12 +1,10 @@
 import React, { forwardRef, useCallback } from 'react';
 import styled from '@emotion/styled';
-import { FormattedMessage } from 'react-intl-next';
 import Badge from '@atlaskit/badge';
 import Button from '@atlaskit/button/standard-button';
 import ChevronDownIcon from '@atlaskit/icon/glyph/chevron-down';
 import { Box, Flex, xcss } from '@atlaskit/primitives';
 import Spinner from '@atlaskit/spinner';
-import { asyncPopupSelectMessages } from './messages';
 const triggerButtonLabelStyles = xcss({
   textOverflow: 'ellipsis',
   overflow: 'hidden',
@@ -31,22 +29,23 @@ export const LoadingStateAnimationWrapper = styled.div({
   }
 });
 const PopupTrigger = /*#__PURE__*/forwardRef(({
-  filterType,
   isSelected,
   isDisabled,
   isLoading,
-  selectedOptions
+  selectedOptions,
+  testId,
+  label
 }, ref) => {
   const [firstOption] = selectedOptions || [];
   const hasOptions = selectedOptions && selectedOptions.length > 0;
   const showButtonLoading = !isDisabled && isLoading;
-  const testId = `jlol-basic-filter-${filterType}-trigger`;
+  const tiggerButtonTestId = `${testId}-trigger`;
   const LoadingButton = useCallback(() => /*#__PURE__*/React.createElement(LoadingStateAnimationWrapper, null, /*#__PURE__*/React.createElement(Button, {
     iconAfter: /*#__PURE__*/React.createElement(Spinner, {
       size: 'xsmall'
     }),
-    testId: `${testId}--loading-button`
-  }, /*#__PURE__*/React.createElement(FormattedMessage, asyncPopupSelectMessages[`${filterType}Label`]))), [filterType, testId]);
+    testId: `${tiggerButtonTestId}--loading-button`
+  }, label)), [label, tiggerButtonTestId]);
   const DefaultButton = useCallback(() => /*#__PURE__*/React.createElement(Button, {
     appearance: "default",
     isSelected: isSelected || hasOptions,
@@ -54,15 +53,15 @@ const PopupTrigger = /*#__PURE__*/forwardRef(({
     iconAfter: /*#__PURE__*/React.createElement(ChevronDownIcon, {
       label: ""
     }),
-    testId: `${testId}--button`
+    testId: `${tiggerButtonTestId}--button`
   }, /*#__PURE__*/React.createElement(Flex, null, /*#__PURE__*/React.createElement(Box, {
     xcss: triggerButtonLabelStyles
-  }, /*#__PURE__*/React.createElement(FormattedMessage, asyncPopupSelectMessages[`${filterType}Label`]), firstOption && /*#__PURE__*/React.createElement(React.Fragment, null, ": ", firstOption.label)), selectedOptions && selectedOptions.length > 1 && /*#__PURE__*/React.createElement(Flex, {
+  }, label, firstOption && /*#__PURE__*/React.createElement(React.Fragment, null, ": ", firstOption.label)), selectedOptions && selectedOptions.length > 1 && /*#__PURE__*/React.createElement(Flex, {
     xcss: badgeStyles,
     alignItems: "center"
   }, /*#__PURE__*/React.createElement(Badge, {
     appearance: "primary"
-  }, "+", selectedOptions.length - 1)))), [filterType, firstOption, hasOptions, isDisabled, isSelected, selectedOptions, testId]);
+  }, "+", selectedOptions.length - 1)))), [firstOption, hasOptions, isDisabled, isSelected, label, selectedOptions, tiggerButtonTestId]);
 
   /**
    * We had an issue with the popup component referencing a stale DOM ref for the trigger button.
@@ -70,7 +69,7 @@ const PopupTrigger = /*#__PURE__*/forwardRef(({
    */
   return /*#__PURE__*/React.createElement(Box, {
     ref: ref,
-    testId: testId
+    testId: tiggerButtonTestId
   }, showButtonLoading ? /*#__PURE__*/React.createElement(LoadingButton, null) : /*#__PURE__*/React.createElement(DefaultButton, null));
 });
 export default PopupTrigger;

package/dist/es2019/ui/common/modal/popup-select/types.js

@@ -0,0 +1 @@
+export {};

package/dist/es2019/ui/confluence-search-modal/basic-filters/index.js

@@ -0,0 +1,13 @@
+import React from 'react';
+import { Flex, xcss } from '@atlaskit/primitives';
+const basicFilterContainerStyles = xcss({
+  paddingLeft: 'space.100'
+});
+const BasicFilterContainer = ({}) => {
+  return /*#__PURE__*/React.createElement(Flex, {
+    xcss: basicFilterContainerStyles,
+    gap: "space.100",
+    testId: "clol-basic-filter-container"
+  }, /*#__PURE__*/React.createElement(React.Fragment, null), /*#__PURE__*/React.createElement(React.Fragment, null));
+};
+export default BasicFilterContainer;

package/dist/es2019/ui/confluence-search-modal/confluence-search-container/index.js

@@ -1,6 +1,12 @@
-import React, { useCallback, useEffect, useRef, useState } from 'react';
+import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { getBooleanFF } from '@atlaskit/platform-feature-flags';
+import { Flex, xcss } from '@atlaskit/primitives';
 import { BasicSearchInput } from '../../common/modal/basic-search-input';
+import BasicFilters from '../basic-filters';
 import { searchMessages } from './messages';
+const basicSearchInputContainerStyles = xcss({
+  flexGrow: 1
+});
 const ConfluenceSearchContainer = ({
   cloudId,
   initialSearchValue,
@@ -22,14 +28,23 @@ const ConfluenceSearchContainer = ({
       currentCloudId.current = cloudId;
     }
   }, [cloudId]);
-  return /*#__PURE__*/React.createElement(BasicSearchInput, {
+  const showBasicFilters = useMemo(() => {
+    if (getBooleanFF('platform.linking-platform.datasource.show-clol-basic-filters')) {
+      return true;
+    }
+    return false;
+  }, []);
+  return /*#__PURE__*/React.createElement(Flex, {
+    alignItems: "center",
+    xcss: basicSearchInputContainerStyles
+  }, /*#__PURE__*/React.createElement(BasicSearchInput, {
     testId: "confluence-search-datasource-modal",
     isSearching: isSearching,
     onChange: handleSearchChange,
     onSearch: onSearch,
     searchTerm: searchBarSearchString,
     placeholder: searchMessages.searchLabel,
-    fullWidth: true
-  });
+    fullWidth: !showBasicFilters
+  }), showBasicFilters && /*#__PURE__*/React.createElement(BasicFilters, null));
 };
 export default ConfluenceSearchContainer;

package/dist/es2019/ui/confluence-search-modal/modal/index.js

@@ -12,7 +12,7 @@ import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import { Box, xcss } from '@atlaskit/primitives';
 import LinkUrl from '@atlaskit/smart-card/link-url';
 import { N800 } from '@atlaskit/theme/colors';
-import { EVENT_CHANNEL } from '../../../analytics';
+import { EVENT_CHANNEL, useDatasourceAnalyticsEvents } from '../../../analytics';
 import { componentMetadata } from '../../../analytics/constants';
 import { DatasourceAction, DatasourceDisplay, DatasourceSearchMethod } from '../../../analytics/types';
 import { buildDatasourceAdf } from '../../../common/utils/adf';
@@ -103,6 +103,9 @@ export const PlainConfluenceSearchConfigModal = props => {
     parameters: isParametersSet ? parameters : undefined,
     fieldKeys: visibleColumnKeys
   });
+  const {
+    fireEvent
+  } = useDatasourceAnalyticsEvents();
   const hasNoConfluenceSites = availableSites && availableSites.length === 0;
   const selectedConfluenceSite = useMemo(() => {
     if (cloudId) {
@@ -115,6 +118,9 @@ export const PlainConfluenceSearchConfigModal = props => {
       return (availableSites === null || availableSites === void 0 ? void 0 : availableSites.find(confluenceSite => confluenceSite.url === currentlyLoggedInSiteUrl)) || (availableSites === null || availableSites === void 0 ? void 0 : availableSites[0]);
     }
   }, [availableSites, cloudId]);
+  useEffect(() => {
+    fireEvent('screen.datasourceModalDialog.viewed', {});
+  }, [fireEvent]);
 
   // TODO: further refactoring in EDM-9573
   // https://stash.atlassian.com/projects/ATLASSIAN/repos/atlassian-frontend-monorepo/pull-requests/82725/overview?commentId=6828283
@@ -138,9 +144,13 @@ export const PlainConfluenceSearchConfigModal = props => {
       const confluenceSites = await getAvailableSites('confluence');
       const sortedAvailableSites = [...confluenceSites].sort((a, b) => a.displayName.localeCompare(b.displayName));
       setAvailableSites(sortedAvailableSites);
+      fireEvent('ui.modal.ready.datasource', {
+        instancesCount: sortedAvailableSites.length,
+        schemasCount: null
+      });
     };
     void fetchSiteDisplayNames();
-  }, []);
+  }, [fireEvent]);
   useEffect(() => {
     const newVisibleColumnKeys = !initialVisibleColumnKeys || (initialVisibleColumnKeys || []).length === 0 ? defaultVisibleColumnKeys : initialVisibleColumnKeys;
     visibleColumnCount.current = newVisibleColumnKeys.length;

package/dist/es2019/ui/jira-issues-modal/basic-filters/ui/async-popup-select/index.js

@@ -1,20 +1,10 @@
-import _extends from "@babel/runtime/helpers/extends";
 import React, { useCallback, useEffect, useRef, useState } from 'react';
 import isEqual from 'lodash/isEqual';
 import { useIntl } from 'react-intl-next';
 import { useDebouncedCallback } from 'use-debounce';
-import { CheckboxOption, PopupSelect } from '@atlaskit/select';
-import { useDatasourceAnalyticsEvents } from '../../../../../analytics';
+import { FilterPopupSelect } from '../../../../common/modal/popup-select';
 import { useFilterOptions } from '../../hooks/useFilterOptions';
-import CustomMenuList from '../menu-list';
-import CustomControl from './control';
-import CustomDropdownIndicator from './dropdownIndicator';
-import PopupFooter from './footer';
-import formatOptionLabel from './formatOptionLabel';
 import { asyncPopupSelectMessages } from './messages';
-import PopupTrigger from './trigger';
-// Needed to disable filtering from react-select
-const noFilterOptions = () => true;
 export const SEARCH_DEBOUNCE_MS = 350;
 const AsyncPopupSelect = ({
   filterType,
@@ -27,18 +17,12 @@ const AsyncPopupSelect = ({
   const {
     formatMessage
   } = useIntl();
-  const {
-    fireEvent
-  } = useDatasourceAnalyticsEvents();
   const [searchTerm, setSearchTerm] = useState('');
   const [selectedOptions, setSelectedOptions] = useState(selection);
-  const [sortedOptions, setSortedOptions] = useState([]);
   const {
     cloudId
   } = site || {};
   const currentSiteCloudId = useRef(cloudId || '');
-  const sortPaginatedResults = useRef(false); // this is to track pagination for sorting purpose
-
   const {
     filterOptions,
     fetchFilterOptions,
@@ -56,103 +40,32 @@ const AsyncPopupSelect = ({
       searchString
     });
   }, SEARCH_DEBOUNCE_MS);
-  const handleInputChange = useCallback(async (newSearchTerm, actionMeta) => {
-    if (actionMeta.action === 'input-change' && newSearchTerm !== searchTerm) {
-      setSearchTerm(newSearchTerm);
-      handleDebouncedFetchFilterOptions(newSearchTerm);
-    }
-  }, [handleDebouncedFetchFilterOptions, searchTerm]);
+  const handleInputChange = useCallback(async newSearchTerm => {
+    setSearchTerm(newSearchTerm);
+    handleDebouncedFetchFilterOptions(newSearchTerm);
+  }, [handleDebouncedFetchFilterOptions]);
   const handleOptionSelection = useCallback(newValue => {
     onSelectionChange(filterType, newValue);
   }, [filterType, onSelectionChange]);
-  const sortOptionsOnPopupOpen = useCallback(() => {
-    if (selectedOptions.length === 0) {
-      return setSortedOptions(filterOptions);
-    }
-    const nonSelectedOptions = filterOptions.filter(option => !selectedOptions.find(selectedOption => selectedOption.value === option.value));
-    const newOptions = [...selectedOptions, ...nonSelectedOptions];
-    if (!isEqual(newOptions, sortedOptions)) {
-      setSortedOptions(newOptions);
-    }
-  }, [selectedOptions, filterOptions, sortedOptions]);
-  const sortOptionsOnResolve = useCallback(() => {
-    // when the user is searching, we want the search result to be displayed as it is, and the select component will take care of marking the selected items
-    if (searchTerm) {
-      sortPaginatedResults.current = false; // set to false to indicate pagination resolve action is completed from the sorting perspective
-      return setSortedOptions(filterOptions);
-    }
-
-    // sortedOptions is empty initially, this will take care of setting the initial value and bring the selected items to the top
-    if (sortedOptions.length === 0) {
-      return sortOptionsOnPopupOpen();
-    }
-
-    // this block handles the pagination, where on pagination, we will just append newOptions to the current list
-    if (sortPaginatedResults.current) {
-      const newOptions = filterOptions.filter(option => !sortedOptions.find(sortedOption => sortedOption.value === option.value));
-      if (newOptions.length > 0) {
-        setSortedOptions([...sortedOptions, ...newOptions]);
-      }
-      sortPaginatedResults.current = false; // set to false to indicate pagination resolve action is completed from the sorting perspective
-      return;
-    }
-    sortPaginatedResults.current = false; // set to false to indicate pagination resolve action is completed from the sorting perspective
-    sortOptionsOnPopupOpen();
-  }, [filterOptions, searchTerm, sortOptionsOnPopupOpen, sortedOptions]);
   const handleShowMore = useCallback(() => {
     if (pageCursor) {
-      sortPaginatedResults.current = true;
       fetchFilterOptions({
         pageCursor,
         searchString: searchTerm
       });
-      fireEvent('ui.button.clicked.basicSearchDropdown', {
-        filterType,
-        type: 'showMore'
-      });
     }
-  }, [fetchFilterOptions, filterType, fireEvent, pageCursor, searchTerm]);
+  }, [fetchFilterOptions, pageCursor, searchTerm]);
   const handleMenuOpen = useCallback(() => {
     if (status === 'empty' || status === 'rejected') {
       // if user searches and gets status as rejected, we want the dropdown to try load the request with searchString when the user reopens the dropdown
       fetchFilterOptions({
         searchString: searchTerm
       });
-    } else if (status === 'resolved') {
-      sortOptionsOnPopupOpen();
     }
-    fireEvent('ui.dropdown.opened.basicSearchDropdown', {
-      filterType,
-      selectionCount: selectedOptions.length
-    });
-  }, [fetchFilterOptions, filterType, fireEvent, searchTerm, selectedOptions.length, sortOptionsOnPopupOpen, status]);
-  const handleMenuClose = useCallback(() => {
-    /**
-     * Clearing the search is to ensure that the sortOptionsOnPopupOpen logic does not mess up.
-     * Without this, when the user opens, sortOptionsOnPopupOpen will inject the selected options to the list and the list count and values will be off
-     */
-    if (searchTerm) {
-      handleInputChange('', {
-        action: 'input-change',
-        prevInputValue: searchTerm
-      });
-    }
-    fireEvent('ui.dropdown.closed.basicSearchDropdown', {
-      filterType,
-      selectionCount: selectedOptions.length
-    });
-  }, [filterType, fireEvent, handleInputChange, searchTerm, selectedOptions.length]);
-  useEffect(() => {
-    if (status === 'resolved') {
-      sortOptionsOnResolve();
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [status]); // we only want the sortOptionsOnResolve to run when there is a status change
-
+  }, [fetchFilterOptions, searchTerm, status]);
   useEffect(() => {
     if (cloudId && currentSiteCloudId.current !== cloudId) {
       currentSiteCloudId.current = cloudId;
-      setSortedOptions([]);
       setSearchTerm('');
       resetHook();
     }
@@ -167,29 +80,27 @@ const AsyncPopupSelect = ({
   const isLoading = status === 'loading' || status === 'empty';
   const isLoadingMore = status === 'loadingMore';
   const isEmpty = status === 'resolved' && filterOptionsLength === 0;
-  const popupSelectOptions = isLoading || isError ? [] : sortedOptions; // if not set to [], then on loading, no loading UI will be shown
+  const popupSelectOptions = isLoading || isError ? [] : filterOptions; // if not set to [], then on loading, no loading UI will be shown
   const areAllResultsLoaded = filterOptionsLength === totalCount;
   const shouldShowFooter = (status === 'resolved' || isLoadingMore) && filterOptionsLength > 0; // footer should not disappear when there is an inline spinner for loading more data
   const shouldDisplayShowMoreButton = status === 'resolved' && !!pageCursor && !areAllResultsLoaded;
-  return /*#__PURE__*/React.createElement(PopupSelect, {
-    isMulti: true,
-    maxMenuWidth: 300,
-    minMenuWidth: 300,
-    testId: "jlol-basic-filter-popup-select",
-    inputId: "jlol-basic-filter-popup-select--input"
-    /*
-      this threshold controls the display of the search control (input field for search)
-      if this threshold is less than 0, when typing a search string that returns no results it will not remove the search control
-      if this threshold is 0 or higher, it will remove the search control when there are no results, the user will be unable to clear the search to see more results
-    */,
-    searchThreshold: -1,
-    inputValue: searchTerm,
-    closeMenuOnSelect: false,
-    hideSelectedOptions: false,
-    isLoading: isLoading,
-    placeholder: formatMessage(asyncPopupSelectMessages.selectPlaceholder),
+  const triggerButtonLabel = formatMessage(asyncPopupSelectMessages[`${filterType}Label`]);
+  return /*#__PURE__*/React.createElement(FilterPopupSelect, {
+    filterName: `jlol-basic-filter-${filterType}`,
+    status: status,
+    showLoading: isLoading,
+    showHydrating: isJQLHydrating,
+    isDisabled: isDisabled,
+    totalCount: totalCount,
+    shouldShowFooter: shouldShowFooter,
+    selectedOptions: selectedOptions,
+    options: popupSelectOptions,
+    buttonLabel: triggerButtonLabel,
+    onInputChange: handleInputChange,
+    onSelectionChange: handleOptionSelection,
+    onMenuOpen: handleMenuOpen,
     menuListProps: {
-      filterType,
+      filterName: filterType,
       isError,
       isEmpty,
       isLoading,
@@ -197,38 +108,7 @@ const AsyncPopupSelect = ({
       handleShowMore,
       errors,
       showMore: shouldDisplayShowMoreButton
-    },
-    components: {
-      Option: CheckboxOption,
-      Control: CustomControl,
-      MenuList: CustomMenuList,
-      DropdownIndicator: CustomDropdownIndicator,
-      LoadingIndicator: undefined,
-      // disables the three ... indicator in the searchbox when picker is loading
-      IndicatorSeparator: undefined // disables the | separator between search input and icon
-    },
-    options: popupSelectOptions,
-    value: selectedOptions,
-    filterOption: noFilterOptions,
-    formatOptionLabel: formatOptionLabel,
-    onChange: handleOptionSelection,
-    onInputChange: handleInputChange,
-    onOpen: handleMenuOpen,
-    onClose: handleMenuClose,
-    target: ({
-      isOpen,
-      ...triggerProps
-    }) => /*#__PURE__*/React.createElement(PopupTrigger, _extends({}, triggerProps, {
-      filterType: filterType,
-      selectedOptions: selectedOptions,
-      isSelected: isOpen,
-      isDisabled: isDisabled,
-      isLoading: isJQLHydrating
-    })),
-    footer: shouldShowFooter && /*#__PURE__*/React.createElement(PopupFooter, {
-      currentDisplayCount: popupSelectOptions.length,
-      totalCount: totalCount
-    })
+    }
   });
 };
 export default AsyncPopupSelect;

package/dist/es2019/ui/jira-issues-modal/basic-filters/ui/async-popup-select/messages.js

@@ -1,15 +1,5 @@
 import { defineMessages } from 'react-intl-next';
 export const asyncPopupSelectMessages = defineMessages({
-  selectPlaceholder: {
-    id: 'linkDataSource.basic-filter.dropdown.select.placeholder',
-    description: 'Placeholder text to be displayed for the search input box.',
-    defaultMessage: 'Search'
-  },
-  paginationDetails: {
-    id: 'linkDataSource.basic-filter.footer.pagination-details',
-    description: 'Text to indicate page count and total count information.',
-    defaultMessage: '{currentDisplayCount} of {totalCount}'
-  },
   projectLabel: {
     id: 'linkDataSource.basic-filter.project.label',
     description: 'Label to be displayed for project filter dropdown button.',
@@ -29,10 +19,5 @@ export const asyncPopupSelectMessages = defineMessages({
     id: 'linkDataSource.basic-filter.assignee.label',
     description: 'Label to be displayed for assignee filter dropdown button.',
     defaultMessage: 'Assignee'
-  },
-  showMoreMessage: {
-    id: 'linkDataSource.basic-filter.showMoreButton',
-    defaultMessage: 'Show more',
-    description: 'The text to show more options in dropdown'
   }
 });

package/dist/es2019/ui/jira-issues-modal/jira-search-container/index.js

@@ -193,7 +193,8 @@ export const JiraSearchContainer = props => {
     onSearch: handleSearch,
     searchTerm: basicSearchTerm,
     placeholder: basicSearchInputMessages.basicTextSearchLabel,
-    testId: "jira-datasource-modal"
+    testId: "jira-datasource-modal",
+    fullWidth: !showBasicFilters
   }), showBasicFilters && jsx(BasicFilters, {
     jql: searchBarJql,
     site: site,

package/dist/esm/ui/common/modal/basic-search-input/index.js

@@ -1,10 +1,9 @@
 /** @jsx jsx */
-import { useMemo } from 'react';
+
 import { css, jsx } from '@emotion/react';
 import { useIntl } from 'react-intl-next';
 import { LoadingButton } from '@atlaskit/button';
 import SearchIcon from '@atlaskit/icon/glyph/editor/search';
-import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import Textfield from '@atlaskit/textfield';
 import { useDatasourceAnalyticsEvents } from '../../../../analytics';
 import { basicSearchInputMessages } from './messages';
@@ -39,15 +38,8 @@ export var BasicSearchInput = function BasicSearchInput(_ref) {
     e.preventDefault();
     handleSearchWithAnalytics();
   };
-  var showBasicFilters = useMemo(function () {
-    if (getBooleanFF('platform.linking-platform.datasource.show-jlol-basic-filters')) {
-      return true;
-    }
-    return false;
-  }, []);
-  var isFullWidth = fullWidth || !showBasicFilters;
   return jsx("form", {
-    css: isFullWidth ? formStyles : formWithMaxWidthStyles,
+    css: fullWidth ? formStyles : formWithMaxWidthStyles,
     onSubmit: handleFormSubmit
   }, jsx(Textfield, {
     elemAfterInput: jsx(LoadingButton, {