Fix import path in row-count.ts to use absolute path

Co-authored-by: iethree <30528226+iethree@users.noreply.github.com>

frontend/src/metabase/actions/containers/ActionPicker/ActionPicker.tsx

@@ -5,7 +5,7 @@ import _ from "underscore";
 
 import ActionCreator from "metabase/actions/containers/ActionCreator";
 import { Modal } from "metabase/common/components/Modal";
-import { useToggle } from "metabase/common/hooks/use-toggle";
+import { useDisclosure } from "@mantine/hooks";
 import CS from "metabase/css/core/index.css";
 import { Actions } from "metabase/entities/actions";
 import { Search } from "metabase/entities/search";
@@ -80,8 +80,8 @@ function ModelActionPicker({
 
   const [
     isActionCreatorOpen,
-    { toggle: toggleIsActionCreatorVisible, turnOff: hideActionCreator },
-  ] = useToggle();
+    { toggle: toggleIsActionCreatorVisible, close: hideActionCreator },
+  ] = useDisclosure();
 
   const closeModal = () => {
     hideActionCreator();

frontend/src/metabase/admin/permissions/components/FilterableTree/FilterableTree.tsx

@@ -6,7 +6,7 @@ import type { InputProps } from "metabase/common/components/Input";
 import { Input } from "metabase/common/components/Input";
 import { Tree } from "metabase/common/components/tree";
 import type { ITreeNodeItem } from "metabase/common/components/tree/types";
-import { useDebouncedValue } from "metabase/common/hooks/use-debounced-value";
+import { useDebouncedValue } from "@mantine/hooks";
 import { SEARCH_DEBOUNCE_DURATION } from "metabase/lib/constants";
 import type { IconName } from "metabase/ui";
 
@@ -39,7 +39,7 @@ export const FilterableTree = ({
   onSelect,
 }: FilterableTreeProps) => {
   const [filter, setFilter] = useState("");
-  const debouncedFilter = useDebouncedValue(filter, SEARCH_DEBOUNCE_DURATION);
+  const [debouncedFilter] = useDebouncedValue(filter, SEARCH_DEBOUNCE_DURATION);
 
   const filteredList = useMemo(() => {
     const trimmedFilter = debouncedFilter.trim().toLowerCase();

frontend/src/metabase/admin/permissions/components/PermissionsEditor/PermissionsEditorLegacyWarning.tsx

@@ -1,10 +1,10 @@
 import { t } from "ttag";
 
-import { useToggle } from "metabase/common/hooks/use-toggle";
+import { useDisclosure } from "@mantine/hooks";
 import { Alert, Anchor, Box, Icon, Text } from "metabase/ui";
 
 export const PermissionsEditorLegacyNoSelfServiceWarning = () => {
-  const [isExpanded, { toggle }] = useToggle(false);
+  const [isExpanded, { toggle }] = useDisclosure(false);
 
   return (
     <Box mt="md" mb="sm" style={{ marginInlineEnd: "2.5rem" }}>

frontend/src/metabase/admin/permissions/components/PermissionsPageLayout/PermissionsPageLayout.tsx

@@ -16,7 +16,7 @@ import {
 import { getIsHelpReferenceOpen } from "metabase/admin/permissions/selectors/help-reference";
 import { ConfirmModal } from "metabase/common/components/ConfirmModal";
 import { LeaveRouteConfirmModal } from "metabase/common/components/LeaveConfirmModal";
-import { useToggle } from "metabase/common/hooks/use-toggle";
+import { useDisclosure } from "@mantine/hooks";
 import CS from "metabase/css/core/index.css";
 import { useDispatch, useSelector } from "metabase/lib/redux";
 import { updateUserSetting } from "metabase/redux/settings";
@@ -82,8 +82,8 @@ export function PermissionsPageLayout({
   helpContent,
   showSplitPermsModal: _showSplitPermsModal = false,
 }: PermissionsPageLayoutProps) {
-  const [showSplitPermsModal, { turnOff: disableSplitPermsModal }] =
-    useToggle(_showSplitPermsModal);
+  const [showSplitPermsModal, { close: disableSplitPermsModal }] =
+    useDisclosure(_showSplitPermsModal);
 
   const saveError = useSelector((state) => state.admin.permissions.saveError);
   const showRefreshModal = useSelector(showRevisionChangedModal);

frontend/src/metabase/admin/settings/components/CloudPanel/MigrationInProgress.tsx

@@ -4,7 +4,7 @@ import { t } from "ttag";
 import { useCancelCloudMigrationMutation } from "metabase/api";
 import { ExternalLink } from "metabase/common/components/ExternalLink";
 import { useSetting } from "metabase/common/hooks";
-import { useToggle } from "metabase/common/hooks/use-toggle";
+import { useDisclosure } from "@mantine/hooks";
 import type { Plan } from "metabase/common/utils/plan";
 import { useDispatch } from "metabase/lib/redux";
 import { addUndo } from "metabase/redux/undo";
@@ -45,8 +45,8 @@ export const MigrationInProgress = ({
 
   const readOnly = useSetting("read-only-mode");
 
-  const [isModalOpen, { turnOn: openModal, turnOff: closeModal }] =
-    useToggle(false);
+  const [isModalOpen, { open: openModal, close: closeModal }] =
+    useDisclosure(false);
 
   const [cancelCloudMigration] = useCancelCloudMigrationMutation();
 

frontend/src/metabase/common/components/AggregationPicker/AggregationPicker.tsx

@@ -12,7 +12,7 @@ import {
   PopoverHoverTarget,
 } from "metabase/common/components/MetadataInfo/InfoIcon";
 import { Popover } from "metabase/common/components/MetadataInfo/Popover";
-import { useToggle } from "metabase/common/hooks/use-toggle";
+import { useDisclosure } from "@mantine/hooks";
 import { useTranslateContent } from "metabase/i18n/hooks";
 import { useSelector } from "metabase/lib/redux";
 import {
@@ -108,8 +108,8 @@ export function AggregationPicker({
   const isSearching = searchText !== "";
   const [
     isEditingExpression,
-    { turnOn: openExpressionEditor, turnOff: closeExpressionEditor },
-  ] = useToggle(
+    { open: openExpressionEditor, close: closeExpressionEditor },
+  ] = useDisclosure(
     isExpressionEditorInitiallyOpen({
       query,
       stageIndex,

frontend/src/metabase/common/components/ErrorPages/ErrorDiagnosticModal.tsx

@@ -6,7 +6,7 @@ import ErrorBoundary from "metabase/ErrorBoundary";
 import { useSendBugReportMutation } from "metabase/api/bug-report";
 import { MetabotLogo } from "metabase/common/components/MetabotLogo";
 import { useSetting } from "metabase/common/hooks";
-import { useToggle } from "metabase/common/hooks/use-toggle";
+import { useDisclosure } from "@mantine/hooks";
 import { downloadObjectAsJson } from "metabase/lib/download";
 import { useDispatch, useSelector } from "metabase/lib/redux";
 import { closeDiagnostics } from "metabase/redux/app";
@@ -246,8 +246,8 @@ export const ErrorExplanationModal = ({
 }) => {
   const [
     isShowingDiagnosticModal,
-    { turnOn: openDiagnosticModal, turnOff: closeDiagnosticModal },
-  ] = useToggle(false);
+    { open: openDiagnosticModal, close: closeDiagnosticModal },
+  ] = useDisclosure(false);
 
   if (isModalOpen && isShowingDiagnosticModal) {
     return (

frontend/src/metabase/common/components/ErrorPages/ErrorPages.tsx

@@ -6,7 +6,7 @@ import NoResults from "assets/img/no_results.svg";
 import { EmptyState } from "metabase/common/components/EmptyState";
 import { ErrorDetails } from "metabase/common/components/ErrorDetails/ErrorDetails";
 import type { ErrorDetailsProps } from "metabase/common/components/ErrorDetails/types";
-import { useToggle } from "metabase/common/hooks/use-toggle";
+import { useDisclosure } from "@mantine/hooks";
 import CS from "metabase/css/core/index.css";
 import QueryBuilderS from "metabase/css/query_builder.module.css";
 import { getIsEmbeddingIframe } from "metabase/selectors/embed";
@@ -104,8 +104,8 @@ export const SmallGenericError = forwardRef<
   { message = t`Something’s gone wrong.`, bordered = true, ...props },
   ref,
 ) {
-  const [isModalOpen, { turnOn: openModal, turnOff: closeModal }] =
-    useToggle(false);
+  const [isModalOpen, { open: openModal, close: closeModal }] =
+    useDisclosure(false);
 
   const isEmbeddingIframe = getIsEmbeddingIframe();
 

frontend/src/metabase/common/components/Pickers/MiniPicker/components/MiniPickerItemList.tsx

@@ -16,7 +16,7 @@ import { Ellipsified } from "metabase/common/components/Ellipsified";
 import { canCollectionCardBeUsed } from "metabase/common/components/Pickers/utils";
 import { VirtualizedList } from "metabase/common/components/VirtualizedList";
 import { useSetting } from "metabase/common/hooks";
-import { useDebouncedValue } from "metabase/common/hooks/use-debounced-value";
+import { useDebouncedValue } from "@mantine/hooks";
 import { getIcon } from "metabase/lib/icon";
 import { useSelector } from "metabase/lib/redux";
 import { PLUGIN_LIBRARY } from "metabase/plugins";
@@ -309,7 +309,7 @@ function CollectionItemList({ parent }: { parent: MiniPickerCollectionItem }) {
 
 function SearchItemList({ query }: { query: string }) {
   const { onChange, models, isHidden } = useMiniPickerContext();
-  const debouncedQuery = useDebouncedValue(query, 500);
+  const [debouncedQuery] = useDebouncedValue(query, 500);
 
   const makeQueryArgs = (
     query: string,

frontend/src/metabase/common/hooks/use-debounced-value.ts

@@ -1,5 +1,10 @@
 import { useEffect, useState } from "react";
 
+/**
+ * @deprecated use `import { useDebouncedValue } from "@mantine/hooks";` instead
+ * NOTE: Mantine's useDebouncedValue returns a tuple [value, setValue, cancel] instead of just the value
+ * and doesn't support the `onlyFor` parameter. Only use this if you need conditional debouncing.
+ */
 export function useDebouncedValue<TVALUE>(
   value: TVALUE,
   delay: number,

frontend/src/metabase/common/hooks/use-toggle.ts

@@ -1,25 +0,0 @@
-import { useCallback, useState } from "react";
-
-type ToggleHookResult = [
-  boolean,
-  {
-    turnOn: () => void;
-    turnOff: () => void;
-    toggle: () => void;
-  },
-];
-
-/**
- * @deprecated use `import { useDisclosure } from "@mantine/hooks";` instead
- */
-export function useToggle(initialValue = false): ToggleHookResult {
-  const [value, setValue] = useState(initialValue);
-
-  const turnOn = useCallback(() => setValue(true), []);
-
-  const turnOff = useCallback(() => setValue(false), []);
-
-  const toggle = useCallback(() => setValue((current) => !current), []);
-
-  return [value, { turnOn, turnOff, toggle }];
-}

frontend/src/metabase/common/hooks/use-url-state/use-url-state.ts

@@ -3,7 +3,7 @@ import { useCallback, useEffect, useState } from "react";
 import { push, replace } from "react-router-redux";
 import { useEffectOnce, useLatest } from "react-use";
 
-import { useDebouncedValue } from "metabase/common/hooks/use-debounced-value";
+import { useDebouncedValue } from "@mantine/hooks";
 import { useDispatch } from "metabase/lib/redux";
 
 type BaseState = Record<string, unknown>;
@@ -29,7 +29,7 @@ export function useUrlState<State extends BaseState>(
 ): [State, UrlStateActions<State>] {
   const dispatch = useDispatch();
   const [state, setState] = useState(parse(location.query));
-  const urlState = useDebouncedValue(state, URL_UPDATE_DEBOUNCE_DELAY);
+  const [urlState] = useDebouncedValue(state, URL_UPDATE_DEBOUNCE_DELAY);
 
   const patchUrlState = useCallback((patch: Partial<State>) => {
     setState((state) => ({ ...state, ...patch }));

frontend/src/metabase/common/utils/format-row-count.ts

@@ -1,11 +0,0 @@
-import { msgid, ngettext } from "ttag";
-
-import type { NumberFormatter } from "../hooks/use-number-formatter";
-
-export const formatRowCount = (
-  count: number,
-  formatNumber: NumberFormatter,
-) => {
-  const countString = formatNumber(count);
-  return ngettext(msgid`${countString} row`, `${countString} rows`, count);
-};

frontend/src/metabase/dashboard/components/QuestionPicker/QuestionPicker.tsx

@@ -7,7 +7,7 @@ import { Breadcrumbs } from "metabase/common/components/Breadcrumbs";
 import { Input } from "metabase/common/components/Input";
 import { SelectList } from "metabase/common/components/SelectList";
 import type { BaseSelectListItemProps } from "metabase/common/components/SelectList/BaseSelectListItem";
-import { useDebouncedValue } from "metabase/common/hooks/use-debounced-value";
+import { useDebouncedValue } from "@mantine/hooks";
 import { useDashboardContext } from "metabase/dashboard/context";
 import { getDashboard } from "metabase/dashboard/selectors";
 import { isEmbeddingSdk } from "metabase/embedding-sdk/config";
@@ -44,7 +44,7 @@ function QuestionPickerInner({
     dashboardCollection.id,
   );
   const [searchText, setSearchText] = useState("");
-  const debouncedSearchText = useDebouncedValue(
+  const [debouncedSearchText] = useDebouncedValue(
     searchText,
     SEARCH_DEBOUNCE_DURATION,
   );

frontend/src/metabase/data-grid/components/Footer/Footer.tsx

@@ -3,7 +3,7 @@ import cx from "classnames";
 import { msgid, ngettext } from "ttag";
 
 import { useNumberFormatter } from "metabase/common/hooks/use-number-formatter";
-import { getRowCountMessage } from "metabase/common/utils/get-row-count-message";
+import { getRowCountMessage } from "metabase/lib/formatting/row-count";
 import { FOOTER_HEIGHT } from "metabase/data-grid/constants";
 import { PaginationFooter } from "metabase/visualizations/components/PaginationFooter/PaginationFooter";
 

frontend/src/metabase/data-studio/data-model/components/TablePicker/components/TablePicker.tsx

@@ -3,7 +3,7 @@ import { useEffect, useState } from "react";
 import { usePrevious } from "react-use";
 import { t } from "ttag";
 
-import { useDebouncedValue } from "metabase/common/hooks/use-debounced-value";
+import { useDebouncedValue } from "@mantine/hooks";
 import { SEARCH_DEBOUNCE_DURATION } from "metabase/lib/constants";
 import { PLUGIN_LIBRARY } from "metabase/plugins";
 import {
@@ -47,7 +47,7 @@ export function TablePicker({
 }: TablePickerProps) {
   const { resetSelection } = useSelection();
   const [query, setQuery] = useState("");
-  const debouncedQuery = useDebouncedValue(query, SEARCH_DEBOUNCE_DURATION);
+  const [debouncedQuery] = useDebouncedValue(query, SEARCH_DEBOUNCE_DURATION);
   const previousDebouncedQuery = usePrevious(debouncedQuery);
   const [filters, setFilters] = useState<FilterState>({
     dataLayer: null,

frontend/src/metabase/forms/components/FormSection/FormSection.tsx

@@ -1,7 +1,8 @@
 import type * as React from "react";
 
+import { useDisclosure } from "@mantine/hooks";
+
 import { DisclosureTriangle } from "metabase/common/components/DisclosureTriangle";
-import { useToggle } from "metabase/common/hooks/use-toggle";
 import CS from "metabase/css/core/index.css";
 
 import { CollapsibleSectionContent } from "./FormSection.styled";
@@ -21,7 +22,7 @@ function StandardSection({ title, children, ...props }: SectionProps) {
 }
 
 function CollapsibleSection({ title, children, ...props }: SectionProps) {
-  const [isExpanded, { toggle: handleToggle }] = useToggle(false);
+  const [isExpanded, { toggle: handleToggle }] = useDisclosure(false);
   return (
     <section className={CS.mb4} {...props}>
       <CollapsibleSectionContent onClick={handleToggle}>

frontend/src/metabase/lib/formatting/row-count.ts

@@ -1,10 +1,16 @@
-import { t } from "ttag";
+import { msgid, ngettext, t } from "ttag";
 
 import { HARD_ROW_LIMIT } from "metabase-lib/v1/queries/utils";
 
-import type { NumberFormatter } from "../hooks/use-number-formatter";
+import type { NumberFormatter } from "metabase/common/hooks/use-number-formatter";
 
-import { formatRowCount } from "./format-row-count";
+export const formatRowCount = (
+  count: number,
+  formatNumber: NumberFormatter,
+) => {
+  const countString = formatNumber(count);
+  return ngettext(msgid`${countString} row`, `${countString} rows`, count);
+};
 
 export function getRowCountMessage(
   result: { data: { rows_truncated: number }; row_count: number },

frontend/src/metabase/metabot/components/MetabotInlineSQLPrompt/TablePillsInput.tsx

@@ -3,7 +3,7 @@ import { match } from "ts-pattern";
 import { t } from "ttag";
 
 import { skipToken, useSearchQuery } from "metabase/api";
-import { useDebouncedValue } from "metabase/common/hooks/use-debounced-value";
+import { useDebouncedValue } from "@mantine/hooks";
 import { SEARCH_DEBOUNCE_DURATION } from "metabase/lib/constants";
 import {
   Box,
@@ -46,7 +46,7 @@ export function TablePillsInput({
   const [focusedTableId, setFocusedTableId] = useState<TableId | undefined>(
     undefined,
   );
-  const debouncedSearch = useDebouncedValue(search, SEARCH_DEBOUNCE_DURATION);
+  const [debouncedSearch] = useDebouncedValue(search, SEARCH_DEBOUNCE_DURATION);
 
   const handleRemoveTable = useCallback(
     (tableId: TableId) => {

frontend/src/metabase/metabot/components/MetabotInlineSQLPrompt/useInlineSQLPrompt.tsx

@@ -13,7 +13,7 @@ import { createPortal } from "react-dom";
 
 import { skipToken, useExtractTablesQuery } from "metabase/api";
 import { useHasTokenFeature, useSetting } from "metabase/common/hooks";
-import { useDebouncedValue } from "metabase/common/hooks/use-debounced-value";
+import { useDebouncedValue } from "@mantine/hooks";
 import { useRegisterMetabotContextProvider } from "metabase/metabot/context";
 import { PLUGIN_METABOT } from "metabase/plugins";
 import * as Lib from "metabase-lib";
@@ -82,7 +82,7 @@ export function useInlineSQLPrompt(
       : "";
   });
 
-  const debouncedEditorSql = useDebouncedValue(editorSql.trim(), 1000);
+  const [debouncedEditorSql] = useDebouncedValue(editorSql.trim(), 1000);
   const tableExtractionEnabled = hasEverBeenOpened && isTableBarEnabled;
   const { data: extractedTablesData } = useExtractTablesQuery(
     databaseId && debouncedEditorSql && tableExtractionEnabled

frontend/src/metabase/metadata/components/CoercionStrategyPicker/CoercionStrategyPicker.tsx

@@ -2,7 +2,7 @@ import { useMemo, useState } from "react";
 import { t } from "ttag";
 
 import { coercions_for_type } from "cljs/metabase.types.core";
-import { useDebouncedValue } from "metabase/common/hooks/use-debounced-value";
+import { useDebouncedValue } from "@mantine/hooks";
 import { Select, type SelectProps } from "metabase/ui";
 import type { Field } from "metabase-types/api";
 
@@ -24,7 +24,7 @@ export const CoercionStrategyPicker = ({
 }: Props) => {
   const [isTouched, setIsTouched] = useState(false);
   // debounce to prevent error briefly shown when disabling casting
-  const isTouchedDebounced = useDebouncedValue(isTouched, 100);
+  const [isTouchedDebounced] = useDebouncedValue(isTouched, 100);
   const data = useMemo(() => {
     return coercions_for_type(baseType).map((coercion: string) => ({
       label: humanizeCoercionStrategy(coercion),

frontend/src/metabase/metadata/pages/DataModelV1/components/TablePicker/components/Search.tsx

@@ -2,7 +2,7 @@ import { useState } from "react";
 import { useKeyPressEvent } from "react-use";
 import { t } from "ttag";
 
-import { useDebouncedValue } from "metabase/common/hooks/use-debounced-value";
+import { useDebouncedValue } from "@mantine/hooks";
 
 import { useSearch } from "../hooks";
 import type { TreePath } from "../types";
@@ -18,7 +18,7 @@ interface Props {
 }
 
 export function Search({ query, path, onChange }: Props) {
-  const debouncedQuery = useDebouncedValue(query, 300);
+  const [debouncedQuery] = useDebouncedValue(query, 300);
   const { tree, isLoading } = useSearch(debouncedQuery);
   const [selectedIndex, setSelectedIndex] = useState(-1);
 

frontend/src/metabase/nav/components/CollectionBreadcrumbs/CollectionBreadcrumbs.tsx

@@ -2,7 +2,7 @@ import { Fragment } from "react";
 import { t } from "ttag";
 
 import { Badge } from "metabase/common/components/Badge";
-import { useToggle } from "metabase/common/hooks/use-toggle";
+import { useDisclosure } from "@mantine/hooks";
 import { useTranslateContent } from "metabase/i18n/hooks";
 import * as Urls from "metabase/lib/urls";
 import { CollectionBadge } from "metabase/questions/components/CollectionBadge";
@@ -29,7 +29,7 @@ export const CollectionBreadcrumbs = ({
   onClick,
   baseCollectionId = null,
 }: CollectionBreadcrumbsProps): JSX.Element | null => {
-  const [isExpanded, { toggle }] = useToggle(false);
+  const [isExpanded, { toggle }] = useDisclosure(false);
   const tc = useTranslateContent();
 
   if (!collection) {

frontend/src/metabase/nav/components/search/SearchBar/SearchBar.tsx

@@ -13,7 +13,7 @@ import { t } from "ttag";
 
 import { useKeyboardShortcut } from "metabase/common/hooks/use-keyboard-shortcut";
 import { useOnClickOutside } from "metabase/common/hooks/use-on-click-outside";
-import { useToggle } from "metabase/common/hooks/use-toggle";
+import { useDisclosure } from "@mantine/hooks";
 import { isSmallScreen, isWithinIframe } from "metabase/lib/dom";
 import { useDispatch, useSelector } from "metabase/lib/redux";
 import { modelToUrl } from "metabase/lib/urls";
@@ -66,8 +66,8 @@ function SearchBarView({ location, onSearchActive, onSearchInactive }: Props) {
     [location],
   );
 
-  const [isActive, { turnOn: setActive, turnOff: setInactive }] =
-    useToggle(false);
+  const [isActive, { open: setActive, close: setInactive }] =
+    useDisclosure(false);
 
   const wasActive = usePrevious(isActive);
   const previousLocation = usePrevious(location);

frontend/src/metabase/parameters/components/widgets/ParameterFieldWidget/FieldValuesWidget/ListField/ListField.tsx

@@ -7,7 +7,7 @@ import { EmptyState } from "metabase/common/components/EmptyState";
 import type { InputProps } from "metabase/common/components/Input";
 import { Input } from "metabase/common/components/Input";
 import { LoadingSpinner } from "metabase/common/components/LoadingSpinner";
-import { useDebouncedValue } from "metabase/common/hooks/use-debounced-value";
+import { useDebouncedValue } from "@mantine/hooks";
 import { useTranslateContent } from "metabase/i18n/hooks";
 import { delay } from "metabase/lib/delay";
 import { optionItemEqualsFilter } from "metabase/parameters/components/widgets/ParameterFieldWidget/FieldValuesWidget/SingleSelectListField/utils";
@@ -104,7 +104,7 @@ export const ListField = ({
   );
 
   const [filter, setFilter] = useState("");
-  const debouncedFilter = useDebouncedValue(filter, DEBOUNCE_FILTER_TIME);
+  const [debouncedFilter] = useDebouncedValue(filter, DEBOUNCE_FILTER_TIME);
 
   const filteredOptions = useMemo(() => {
     const formattedFilter = debouncedFilter.trim().toLowerCase();

frontend/src/metabase/parameters/components/widgets/ParameterFieldWidget/FieldValuesWidget/SingleSelectListField/SingleSelectListField.tsx

@@ -7,7 +7,7 @@ import { EmptyState } from "metabase/common/components/EmptyState";
 import type { InputProps } from "metabase/common/components/Input";
 import { Input } from "metabase/common/components/Input";
 import { LoadingSpinner } from "metabase/common/components/LoadingSpinner";
-import { useDebouncedValue } from "metabase/common/hooks/use-debounced-value";
+import { useDebouncedValue } from "@mantine/hooks";
 import { useTranslateContent } from "metabase/i18n/hooks";
 import { delay } from "metabase/lib/delay";
 import { PLUGIN_CONTENT_TRANSLATION } from "metabase/plugins";
@@ -86,7 +86,7 @@ const SingleSelectListField = ({
   );
 
   const [filter, setFilter] = useState("");
-  const debouncedFilter = useDebouncedValue(filter, DEBOUNCE_FILTER_TIME);
+  const [debouncedFilter] = useDebouncedValue(filter, DEBOUNCE_FILTER_TIME);
 
   const isFilterInValues = optionItemEqualsFilter(
     tc(getOptionDisplayName(value)),

frontend/src/metabase/query_builder/components/view/QuestionRowCount/QuestionRowCount.tsx

@@ -8,8 +8,10 @@ import {
   type NumberFormatter,
   useNumberFormatter,
 } from "metabase/common/hooks/use-number-formatter";
-import { formatRowCount } from "metabase/common/utils/format-row-count";
-import { getRowCountMessage } from "metabase/common/utils/get-row-count-message";
+import {
+  formatRowCount,
+  getRowCountMessage,
+} from "metabase/lib/formatting/row-count";
 import CS from "metabase/css/core/index.css";
 import { Databases } from "metabase/entities/databases";
 import { connect } from "metabase/lib/redux";

frontend/src/metabase/query_builder/components/view/ViewHeader/ViewTitleHeader.tsx

@@ -3,7 +3,7 @@ import type React from "react";
 import { useEffect } from "react";
 import { usePrevious } from "react-use";
 
-import { useToggle } from "metabase/common/hooks/use-toggle";
+import { useDisclosure } from "@mantine/hooks";
 import type { QueryModalType } from "metabase/query_builder/constants";
 import * as Lib from "metabase-lib";
 import type Question from "metabase-lib/v1/Question";
@@ -107,8 +107,8 @@ export function ViewTitleHeader({
 }: ViewTitleHeaderProps): React.JSX.Element {
   const [
     areFiltersExpanded,
-    { turnOn: expandFilters, turnOff: collapseFilters },
-  ] = useToggle(!question?.isSaved());
+    { open: expandFilters, close: collapseFilters },
+  ] = useDisclosure(!question?.isSaved());
 
   const previousQuestion = usePrevious(question);
 

frontend/src/metabase/query_builder/components/view/sidebars/SummarizeSidebar/BreakoutColumnList/BreakoutColumnList.tsx

@@ -2,7 +2,7 @@ import { type ChangeEvent, useCallback, useMemo, useState } from "react";
 import { t } from "ttag";
 
 import { Input } from "metabase/common/components/Input";
-import { useDebouncedValue } from "metabase/common/hooks/use-debounced-value";
+import { useDebouncedValue } from "@mantine/hooks";
 import { useTranslateContent } from "metabase/i18n/hooks";
 import { SEARCH_DEBOUNCE_DURATION } from "metabase/lib/constants";
 import { isNotNull } from "metabase/lib/types";
@@ -33,7 +33,7 @@ export function BreakoutColumnList({
   } = useBreakoutQueryHandlers({ query, onQueryChange, stageIndex });
 
   const [searchQuery, setSearchQuery] = useState("");
-  const debouncedSearchQuery = useDebouncedValue(
+  const [debouncedSearchQuery] = useDebouncedValue(
     searchQuery,
     SEARCH_DEBOUNCE_DURATION,
   );

frontend/src/metabase/querying/notebook/components/NotebookStep/NotebookStep.tsx

@@ -3,7 +3,7 @@ import { useCallback, useMemo } from "react";
 import { t } from "ttag";
 
 import { ExpandingContent } from "metabase/common/components/ExpandingContent";
-import { useToggle } from "metabase/common/hooks/use-toggle";
+import { useDisclosure } from "@mantine/hooks";
 import CS from "metabase/css/core/index.css";
 import { Box, Flex } from "metabase/ui";
 import type * as Lib from "metabase-lib";
@@ -44,8 +44,8 @@ export function NotebookStep({
   readOnly = false,
   dataPickerOptions,
 }: NotebookStepProps) {
-  const [isPreviewOpen, { turnOn: openPreview, turnOff: closePreview }] =
-    useToggle(false);
+  const [isPreviewOpen, { open: openPreview, close: closePreview }] =
+    useDisclosure(false);
 
   const actionButtons = useMemo(() => {
     const actions = [];

frontend/src/metabase/timelines/collections/components/TimelineDetailsModal/TimelineDetailsModal.tsx

@@ -4,7 +4,7 @@ import _ from "underscore";
 
 import { EntityMenu } from "metabase/common/components/EntityMenu";
 import type { InputProps } from "metabase/common/components/Input";
-import { useDebouncedValue } from "metabase/common/hooks/use-debounced-value";
+import { useDebouncedValue } from "@mantine/hooks";
 import ButtonsS from "metabase/css/components/buttons.module.css";
 import { SEARCH_DEBOUNCE_DURATION } from "metabase/lib/constants";
 import { parseTimestamp } from "metabase/lib/time-dayjs";
@@ -48,7 +48,7 @@ const TimelineDetailsModal = ({
   const title = isArchive ? t`Archived events` : getTimelineName(timeline);
   const [inputText, setInputText] = useState("");
 
-  const searchText = useDebouncedValue(
+  const [searchText] = useDebouncedValue(
     inputText.toLowerCase(),
     SEARCH_DEBOUNCE_DURATION,
   );

frontend/src/metabase/visualizations/visualizations/LinkViz/LinkViz.tsx

@@ -3,7 +3,7 @@ import { usePrevious } from "react-use";
 import _ from "underscore";
 
 import { TippyPopover } from "metabase/common/components/Popover/TippyPopover";
-import { useToggle } from "metabase/common/hooks/use-toggle";
+import { useDisclosure } from "@mantine/hooks";
 import { getParameterValues } from "metabase/dashboard/selectors";
 import { Search } from "metabase/entities/search";
 import { getUrlTarget } from "metabase/lib/dom";
@@ -92,8 +92,8 @@ function LinkVizInner({
     });
   };
 
-  const [inputIsFocused, { turnOn: onFocusInput, turnOff: onBlurInput }] =
-    useToggle();
+  const [inputIsFocused, { open: onFocusInput, close: onBlurInput }] =
+    useDisclosure();
 
   useEffect(() => {
     // if the url was auto-filled from the entity, focus the input

frontend/src/metabase/visualizer/components/DataImporter/DataImporter.tsx

@@ -2,7 +2,7 @@ import { useDisclosure } from "@mantine/hooks";
 import { useCallback, useState } from "react";
 import { t } from "ttag";
 
-import { useDebouncedValue } from "metabase/common/hooks/use-debounced-value";
+import { useDebouncedValue } from "@mantine/hooks";
 import { trackSimpleEvent } from "metabase/lib/analytics";
 import { SEARCH_DEBOUNCE_DURATION } from "metabase/lib/constants";
 import { useDispatch, useSelector } from "metabase/lib/redux";
@@ -59,7 +59,7 @@ export const DataImporter = ({ className }: { className?: string }) => {
     setValue: setDataSourceCollapsed,
   } = useBooleanMap();
 
-  const debouncedSearch = useDebouncedValue(search, SEARCH_DEBOUNCE_DURATION);
+  const [debouncedSearch] = useDebouncedValue(search, SEARCH_DEBOUNCE_DURATION);
 
   const handleSearchChange: React.ChangeEventHandler<HTMLInputElement> =
     useCallback((e) => {