diff --git a/src/components/MarkdownEditor/EditorToolbar.tsx b/src/components/MarkdownEditor/EditorToolbar.tsx index eafa3fe61d..64a459048b 100644 --- a/src/components/MarkdownEditor/EditorToolbar.tsx +++ b/src/components/MarkdownEditor/EditorToolbar.tsx @@ -33,9 +33,9 @@ import { import { useLexicalComposerContext } from "@lexical/react/LexicalComposerContext"; import { $isAtNodeEnd } from "@lexical/selection"; import { $findMatchingParent, mergeRegister, $getNearestNodeOfType } from "@lexical/utils"; -import { IconButtonV2 } from "@ndla/button"; import { colors, misc, spacing } from "@ndla/core"; import { Bold, Italic, Link, ListCircle, ListNumbered } from "@ndla/icons/editor"; +import { IconButton } from "@ndla/primitives"; import { ADD_LINK_COMMAND } from "./FloatingLinkEditorPlugin"; import { useUserAgent } from "../../UserAgentContext"; @@ -49,22 +49,6 @@ const ButtonRow = styled.div` padding: ${spacing.small}; `; -const StyledButton = styled(IconButtonV2)` - color: ${colors.text.primary}; - border-radius: ${misc.borderRadius}; - &[data-active="true"] { - background: ${colors.brand.neutral7}; - } - &[disabled] { - background: ${colors.brand.greyLighter}; - } - &:focus-visible { - outline-width: 2px; - outline-style: solid; - outline-color: ${colors.brand.primary}; - } -`; - export const getSelectedNode = (selection: RangeSelection): TextNode | ElementNode => { const anchor = selection.anchor; const focus = selection.focus; @@ -220,57 +204,51 @@ export const EditorToolbar = ({ editorIsFocused }: EditorToolbarProps) => { return ( - activeEditor.dispatchCommand(FORMAT_TEXT_COMMAND, "bold")} > - - - + activeEditor.dispatchCommand(FORMAT_TEXT_COMMAND, "italic")} > - - + - - + - - + - + ); }; diff --git a/src/components/MyNdla/FavoriteButton.tsx b/src/components/MyNdla/FavoriteButton.tsx index 5c6e10af43..4cad89084a 100644 --- a/src/components/MyNdla/FavoriteButton.tsx +++ b/src/components/MyNdla/FavoriteButton.tsx @@ -14,22 +14,19 @@ import { styled } from "@ndla/styled-system/jsx"; const StyledFavoriteButton = styled(IconButton, { base: { borderRadius: "100%" } }); -export interface Props extends Omit { +export interface Props extends Omit { isFavorite?: boolean; } -const FavoriteButton = forwardRef(({ isFavorite, onClick }, ref) => { +const FavoriteButton = forwardRef(({ isFavorite, variant = "tertiary", ...props }, ref) => { const { t } = useTranslation(); const labelModifier = isFavorite ? "added" : "add"; const Icon = isFavorite ? Heart : HeartOutline; + const ariaLabel = props["aria-label"] || t(`myNdla.resource.${labelModifier}ToMyNdla`); + const title = props["title"] || t(`myNdla.resource.${labelModifier}ToMyNdla`); + return ( - + ); diff --git a/src/components/MyNdla/NewFolder.tsx b/src/components/MyNdla/NewFolder.tsx index ee51cb7a74..cf610227c2 100644 --- a/src/components/MyNdla/NewFolder.tsx +++ b/src/components/MyNdla/NewFolder.tsx @@ -10,12 +10,12 @@ import { memo, useEffect, useMemo, useRef, useState } from "react"; import { useTranslation } from "react-i18next"; import { useApolloClient } from "@apollo/client"; import styled from "@emotion/styled"; -import { IconButtonV2 } from "@ndla/button"; import { spacing } from "@ndla/core"; import { FieldErrorMessage, FieldHelper, FormControl, InputContainer, InputV3, Label } from "@ndla/forms"; import { Spinner } from "@ndla/icons"; import { Cross } from "@ndla/icons/action"; import { Done } from "@ndla/icons/editor"; +import { IconButton } from "@ndla/primitives"; import { IFolder } from "@ndla/types-backend/myndla-api"; import { getFolder, useAddFolderMutation, useFolders } from "../../containers/MyNdla/folderMutations"; import { useUserAgent } from "../../UserAgentContext"; @@ -35,7 +35,6 @@ const StyledSpinner = styled(Spinner)` const Row = styled.div` display: flex; align-items: center; - gap: ${spacing.xxsmall}; padding-right: ${spacing.xsmall}; `; @@ -132,21 +131,13 @@ const NewFolder = ({ parentId, onClose, initialValue = "", onCreate }: Props) => {!loading ? ( <> {!error && ( - + - + )} - + - + ) : ( diff --git a/src/components/MyNdla/resourceComponents.tsx b/src/components/MyNdla/resourceComponents.tsx index 898e6ef965..9f094eb59c 100644 --- a/src/components/MyNdla/resourceComponents.tsx +++ b/src/components/MyNdla/resourceComponents.tsx @@ -9,10 +9,10 @@ import { HTMLAttributes, ReactNode, useMemo, CSSProperties } from "react"; import { useTranslation } from "react-i18next"; import styled from "@emotion/styled"; -import { IconButtonV2 } from "@ndla/button"; import { colors, stackOrder, spacing, fonts } from "@ndla/core"; import { DropdownTrigger, DropdownContent, DropdownItem, DropdownMenu } from "@ndla/dropdown-menu"; import { HashTag } from "@ndla/icons/common"; +import { IconButton } from "@ndla/primitives"; import { SafeLink, SafeLinkButton } from "@ndla/safelink"; import { Text } from "@ndla/typography"; import { resourceTypeColor } from "@ndla/ui"; @@ -42,10 +42,6 @@ export const ResourceTitleLink = styled(SafeLink)` } `; -const StyledTrigger = styled(IconButtonV2)` - margin: 0px ${spacing.xsmall}; -`; - export const ResourceHeading = styled(Text)` margin: 0; overflow: hidden; @@ -191,14 +187,10 @@ export const CompressedTagList = ({ tags, tagLinkPrefix }: CompressedTagListProp {remainingTags.length > 0 && ( - + {/* TODO: Not sure about how this should look */} + {{`+${remainingTags.length}`}} - + {remainingTags.map((tag, i) => ( diff --git a/src/containers/AllSubjectsPage/SubjectLink.tsx b/src/containers/AllSubjectsPage/SubjectLink.tsx index afbe5ee290..61b74fbdca 100644 --- a/src/containers/AllSubjectsPage/SubjectLink.tsx +++ b/src/containers/AllSubjectsPage/SubjectLink.tsx @@ -9,14 +9,13 @@ import { useContext, useState } from "react"; import { useTranslation } from "react-i18next"; import styled from "@emotion/styled"; -import { IconButtonV2 } from "@ndla/button"; import { colors, fonts, misc, spacing } from "@ndla/core"; -import { Heart, HeartOutline } from "@ndla/icons/action"; import { Modal, ModalTrigger } from "@ndla/modal"; import { SafeLink } from "@ndla/safelink"; import { useSnack } from "@ndla/ui"; import { Subject } from "./interfaces"; import { AuthContext } from "../../components/AuthenticationContext"; +import FavoriteButton from "../../components/MyNdla/FavoriteButton"; import LoginModalContent from "../../components/MyNdla/LoginModalContent"; import { toSubject } from "../../routeHelpers"; import DeleteModalContent from "../MyNdla/components/DeleteModalContent"; @@ -28,11 +27,6 @@ const SubjectLinkWrapper = styled.li` gap: ${spacing.xsmall}; `; -const StyledIconButton = styled(IconButtonV2)` - min-height: 40px; - min-width: 40px; -`; - const SubjectSafeLink = styled(SafeLink)` font-weight: ${fonts.weight.semibold}; box-shadow: none; @@ -95,28 +89,20 @@ const SubjectLink = ({ subject, favorites, className }: Props) => { return ( {authenticated && !isFavorite ? ( - - {isFavorite ? : } - + isFavorite={false} + /> ) : authenticated ? ( - - - + isFavorite + /> { ) : ( - - - + variant="tertiary" + isFavorite={false} + /> + - + } rightButton={ - + - + } items={movies.map((movie) => ( diff --git a/src/containers/FilmFrontpage/FilmSlideshow.tsx b/src/containers/FilmFrontpage/FilmSlideshow.tsx index cb963f162b..171e702106 100644 --- a/src/containers/FilmFrontpage/FilmSlideshow.tsx +++ b/src/containers/FilmFrontpage/FilmSlideshow.tsx @@ -7,13 +7,13 @@ */ import { useCallback, useState } from "react"; +import { useTranslation } from "react-i18next"; import { gql } from "@apollo/client"; import styled from "@emotion/styled"; -import { IconButtonV2 } from "@ndla/button"; import { Carousel } from "@ndla/carousel"; import { breakpoints, colors, misc, mq, spacing } from "@ndla/core"; import { ChevronLeft, ChevronRight } from "@ndla/icons/common"; -import { Image } from "@ndla/primitives"; +import { IconButton, Image } from "@ndla/primitives"; import { SafeLink } from "@ndla/safelink"; import FilmContentCard from "./FilmContentCard"; import { GQLFilmSlideshow_MovieFragment } from "../../graphqlTypes"; @@ -80,8 +80,8 @@ const CarouselContainer = styled.div` } `; -const SlideshowButton = styled(IconButtonV2)` - margin-top: ${spacing.normal}; +const SlideshowButton = styled(IconButton)` + margin-top: ${spacing.nsmall}; `; const StyledFilmContentCard = styled(FilmContentCard)` @@ -95,6 +95,7 @@ const StyledFilmContentCard = styled(FilmContentCard)` const FilmSlideshow = ({ slideshow }: Props) => { const [currentSlide, setCurrentSlide] = useState(slideshow[0]!); + const { t } = useTranslation(); return (
@@ -114,12 +115,12 @@ const FilmSlideshow = ({ slideshow }: Props) => { + } rightButton={ - + } diff --git a/src/containers/MyNdla/Arena/components/DeleteCategoryModal.tsx b/src/containers/MyNdla/Arena/components/DeleteCategoryModal.tsx index 4807f464b9..831271164d 100644 --- a/src/containers/MyNdla/Arena/components/DeleteCategoryModal.tsx +++ b/src/containers/MyNdla/Arena/components/DeleteCategoryModal.tsx @@ -5,13 +5,12 @@ * LICENSE file in the root directory of this source tree. * */ + import { useState } from "react"; import { useTranslation } from "react-i18next"; -import styled from "@emotion/styled"; -import { IconButtonV2 } from "@ndla/button"; -import { colors, spacing } from "@ndla/core"; import { DeleteForever } from "@ndla/icons/editor"; import { Modal, ModalTrigger } from "@ndla/modal"; +import { IconButton } from "@ndla/primitives"; import { useSnack } from "@ndla/ui"; import { useArenaDeleteCategoryMutation } from "../../arenaMutations"; import DeleteModalContent from "../../components/DeleteModalContent"; @@ -21,13 +20,6 @@ interface Props { refetchCategories: (() => void) | undefined; } -const StyledIconButton = styled(IconButtonV2)` - width: ${spacing.mediumlarge}; - height: ${spacing.mediumlarge}; - color: ${colors.support.red}; - background-color: transparent; -`; - const DeleteCategoryModal = ({ categoryId, refetchCategories }: Props) => { const [open, setOpen] = useState(false); const { t } = useTranslation(); @@ -37,12 +29,13 @@ const DeleteCategoryModal = ({ categoryId, refetchCategories }: Props) => { return ( - - + { diff --git a/src/containers/MyNdla/Arena/components/PostCard.tsx b/src/containers/MyNdla/Arena/components/PostCard.tsx index 636f3621cc..914ca513da 100644 --- a/src/containers/MyNdla/Arena/components/PostCard.tsx +++ b/src/containers/MyNdla/Arena/components/PostCard.tsx @@ -11,9 +11,9 @@ import parse from "html-react-parser"; import { Dispatch, SetStateAction, useCallback, useMemo, useState } from "react"; import { useTranslation } from "react-i18next"; import styled from "@emotion/styled"; -import { IconButtonV2 } from "@ndla/button"; import { colors, spacing, misc } from "@ndla/core"; import { Reply } from "@ndla/icons/action"; +import { IconButton } from "@ndla/primitives"; import { Text } from "@ndla/typography"; import { useSnack } from "@ndla/ui"; import ArenaForm from "./ArenaForm"; @@ -133,15 +133,13 @@ const PostCard = ({ nextPostId, post, setFocusId, setIsReplying, isRoot }: Props const replyButton = useMemo( () => isRoot ? ( - - + ) : null, [setIsReplying, isRoot, t, post.owner?.username], ); diff --git a/src/containers/MyNdla/Arena/components/VotePost.tsx b/src/containers/MyNdla/Arena/components/VotePost.tsx index cabc58afa5..516646f210 100644 --- a/src/containers/MyNdla/Arena/components/VotePost.tsx +++ b/src/containers/MyNdla/Arena/components/VotePost.tsx @@ -9,9 +9,9 @@ import { useContext } from "react"; import { useTranslation } from "react-i18next"; import styled from "@emotion/styled"; -import { IconButtonV2 } from "@ndla/button"; import { spacing } from "@ndla/core"; import { ThumbFilled, Thumb } from "@ndla/icons/action"; +import { IconButton } from "@ndla/primitives"; import { Text } from "@ndla/typography"; import { useArenaPostUpvote, useArenaPostRemoveUpvote } from "./temporaryNodebbHooks"; import { AuthContext } from "../../../../components/AuthenticationContext"; @@ -41,11 +41,10 @@ const VotePost = ({ post }: Props) => { return ( - post.upvoted ? removeUpvotePost({ variables: { postId: post.id } }) @@ -54,7 +53,7 @@ const VotePost = ({ post }: Props) => { disabled={isOwner} > {post.upvoted || isOwner ? : } - + ` - padding: ${spacing.xsmall}; - margin: 0 ${spacing.xxsmall}; - svg { - margin: 0; - width: 24px; - height: 24px; - fill: ${(p) => (p.selected ? colors.brand.primary : colors.brand.tertiary)}; - } - :focus { - background-color: transparent; - } - :focus, - :hover, - :active { - svg { - fill: ${colors.brand.primary}; - } - } -`; - interface Props { onTypeChange: (type: ViewType) => void; type: ViewType; @@ -62,40 +37,34 @@ const ListViewOptions = ({ onTypeChange, type }: Props) => { return ( - onTypeChange("list")} - size="small" aria-label={t("myNdla.listView")} > - + - onTypeChange("listLarger")} - size="small" aria-label={t("myNdla.detailView")} > - + - onTypeChange("block")} - size="small" aria-label={t("myNdla.shortView")} > - + ); diff --git a/src/containers/MyNdla/MyNdlaLayout.tsx b/src/containers/MyNdla/MyNdlaLayout.tsx index c0adc565a9..7d02051385 100644 --- a/src/containers/MyNdla/MyNdlaLayout.tsx +++ b/src/containers/MyNdla/MyNdlaLayout.tsx @@ -11,7 +11,6 @@ import { useMemo, useContext, useState, Dispatch, SetStateAction } from "react"; import { useTranslation } from "react-i18next"; import { Location, Outlet, useLocation } from "react-router-dom"; import styled from "@emotion/styled"; -import { IconButtonV2 } from "@ndla/button"; import { breakpoints, colors, mq, spacing } from "@ndla/core"; import { Book, @@ -30,6 +29,7 @@ import { import { FolderOutlined, HorizontalMenu } from "@ndla/icons/contentType"; import { Folder } from "@ndla/icons/editor"; import { Modal, ModalTrigger } from "@ndla/modal"; +import { Button } from "@ndla/primitives"; import { Text } from "@ndla/typography"; import { MessageBox } from "@ndla/ui"; import NavigationLink from "./components/NavigationLink"; @@ -112,15 +112,10 @@ const MessageboxWrapper = styled.div` margin-bottom: ${spacing.nsmall}; `; -const MoreButton = styled(IconButtonV2)` +const MoreButton = styled(Button)` display: flex; - flex-direction: column; justify-content: flex-start; - padding: ${spacing.xxsmall} ${spacing.small}; - gap: ${spacing.xsmall}; - color: ${colors.brand.primary}; - border-radius: ${spacing.xxsmall}; - + flex-direction: column; ${mq.range({ from: breakpoints.mobileWide })} { display: none; } @@ -162,7 +157,7 @@ const MyNdlaLayout = () => { {menuLink} - + {t("myNdla.iconMenu.more")} diff --git a/src/containers/MyNdla/components/DragHandle.tsx b/src/containers/MyNdla/components/DragHandle.tsx index 5dce992891..197439b33a 100644 --- a/src/containers/MyNdla/components/DragHandle.tsx +++ b/src/containers/MyNdla/components/DragHandle.tsx @@ -10,9 +10,9 @@ import { HTMLProps } from "react"; import { useTranslation } from "react-i18next"; import { useSortable } from "@dnd-kit/sortable"; import styled from "@emotion/styled"; -import { IconButtonV2 } from "@ndla/button"; import { breakpoints, mq, spacing } from "@ndla/core"; import { DragVertical } from "@ndla/icons/editor"; +import { IconButton } from "@ndla/primitives"; interface Props extends HTMLProps { sortableId: string; @@ -20,7 +20,7 @@ interface Props extends HTMLProps { name: string; } -const StyledDragHandle = styled(IconButtonV2)` +const StyledDragHandle = styled(IconButton)` touch-action: none; ${mq.range({ from: breakpoints.tablet })} { position: absolute; @@ -40,9 +40,8 @@ const DragHandle = ({ sortableId, type, name, ...rest }: Props) => { {...rest} aria-label={t(`myNdla.${type}.dragHandle`, { name })} type={"button"} - variant={"ghost"} - colorTheme={"light"} - size={"small"} + // TODO: Should this be another variant? + variant="clear" tabIndex={0} {...listeners} ref={setActivatorNodeRef} diff --git a/src/containers/MyNdla/components/MenuModalContent.tsx b/src/containers/MyNdla/components/MenuModalContent.tsx index 68724708d3..30dff251ee 100644 --- a/src/containers/MyNdla/components/MenuModalContent.tsx +++ b/src/containers/MyNdla/components/MenuModalContent.tsx @@ -10,10 +10,10 @@ import { ReactNode, useCallback, useContext, useMemo } from "react"; import { useTranslation } from "react-i18next"; import { useLocation, useOutletContext } from "react-router-dom"; import styled from "@emotion/styled"; -import { IconButtonV2 } from "@ndla/button"; import { spacing, colors, fonts } from "@ndla/core"; import { FourlineHamburger, List } from "@ndla/icons/action"; import { ModalBody, ModalHeader, ModalContent, ModalCloseButton, ModalTitle } from "@ndla/modal"; +import { Button } from "@ndla/primitives"; import { SafeLinkButton } from "@ndla/safelink"; import { Text } from "@ndla/typography"; import NavigationLink from "./NavigationLink"; @@ -95,18 +95,10 @@ const ViewButtonWrapper = styled.div` padding-left: ${spacing.small}; `; -const ViewButton = styled(IconButtonV2)` +const ViewButton = styled(Button)` display: flex; + justify-content: flex-start; flex-direction: column; - - background-color: transparent; - color: ${colors.brand.primary}; - border-radius: ${spacing.xxsmall}; - border-color: ${colors.brand.light}; - - &[aria-current="true"] { - background-color: ${colors.brand.lightest}; - } `; const CloseWrapper = styled.div` @@ -211,6 +203,8 @@ const MenuModalContent = ({ onViewTypeChange, viewType, buttons, showButtons = t onViewTypeChange?.("list")} @@ -221,6 +215,8 @@ const MenuModalContent = ({ onViewTypeChange, viewType, buttons, showButtons = t onViewTypeChange?.("listLarger")} diff --git a/src/containers/MyNdla/components/SettingsMenu.tsx b/src/containers/MyNdla/components/SettingsMenu.tsx index 937075f96e..0211765d32 100644 --- a/src/containers/MyNdla/components/SettingsMenu.tsx +++ b/src/containers/MyNdla/components/SettingsMenu.tsx @@ -10,12 +10,11 @@ import { ReactNode, MouseEvent, useState, useCallback, useRef, RefObject } from import { isMobile, isTablet } from "react-device-detect"; import { useTranslation } from "react-i18next"; import styled from "@emotion/styled"; -import { IconButtonV2 } from "@ndla/button"; import { breakpoints, colors, misc, mq, spacing } from "@ndla/core"; import { DropdownMenu, DropdownItem, DropdownContent, DropdownTrigger } from "@ndla/dropdown-menu"; import { HorizontalMenu } from "@ndla/icons/contentType"; import { Drawer, Modal, ModalBody, ModalCloseButton, ModalHeader, ModalTrigger } from "@ndla/modal"; -import { Button } from "@ndla/primitives"; +import { Button, IconButton } from "@ndla/primitives"; import { SafeLinkButton } from "@ndla/safelink"; export interface MenuItemProps { @@ -73,24 +72,6 @@ const StyledDropdownContent = styled(DropdownContent)` } `; -const DropdownTriggerButton = styled(IconButtonV2)` - min-width: 44px; - min-height: 44px; - margin: 0; - padding: 0; - &:hover, - &:focus, - &:focus-visible, - &:focus-within { - border-color: transparent; - background-color: transparent; - svg { - background-color: ${colors.brand.light}; - border-radius: ${misc.borderRadiusLarge}; - } - } -`; - const StyledSafeLinkItem = styled(SafeLinkButton)` display: flex; justify-content: flex-start; @@ -123,16 +104,15 @@ const SettingsMenu = ({ menuItems, modalHeader, showSingle }: Props) => { return ( - - + { return ( - - + - - + diff --git a/src/containers/SearchPage/SearchContainer.tsx b/src/containers/SearchPage/SearchContainer.tsx index 14404dd50a..4e612fc391 100644 --- a/src/containers/SearchPage/SearchContainer.tsx +++ b/src/containers/SearchPage/SearchContainer.tsx @@ -9,12 +9,12 @@ import { useState } from "react"; import { useTranslation } from "react-i18next"; import styled from "@emotion/styled"; -import { ButtonV2, IconButtonV2 } from "@ndla/button"; +import { ButtonV2 } from "@ndla/button"; import { breakpoints, fonts, mq, spacing, spacingUnit } from "@ndla/core"; import { Spinner } from "@ndla/icons"; import { Cross, Grid } from "@ndla/icons/action"; import { ListCircle } from "@ndla/icons/editor"; -import { Button } from "@ndla/primitives"; +import { Button, IconButton } from "@ndla/primitives"; import { Heading } from "@ndla/typography"; import { LanguageSelector, constants } from "@ndla/ui"; @@ -203,24 +203,24 @@ const SearchContainer = ({ ))} - setViewType("grid")} - colorTheme="greyLighter" aria-label={t("searchPage.resultType.gridView")} title={t("searchPage.resultType.gridView")} > - - + setViewType("list")} - colorTheme="greyLighter" aria-label={t("searchPage.resultType.listView")} title={t("searchPage.resultType.listView")} > - + )} diff --git a/src/containers/SearchPage/components/SearchHeader.tsx b/src/containers/SearchPage/components/SearchHeader.tsx index f0d047a8cf..6309406255 100644 --- a/src/containers/SearchPage/components/SearchHeader.tsx +++ b/src/containers/SearchPage/components/SearchHeader.tsx @@ -9,13 +9,13 @@ import { useState, useEffect, useMemo, FormEvent, useRef } from "react"; import { useTranslation } from "react-i18next"; import styled from "@emotion/styled"; -import { ButtonV2, IconButtonV2 } from "@ndla/button"; +import { ButtonV2 } from "@ndla/button"; import { breakpoints, mq, spacing } from "@ndla/core"; import { InputContainer, InputV3 } from "@ndla/forms"; import { Cross, Plus } from "@ndla/icons/action"; import { Search } from "@ndla/icons/common"; import { Modal, ModalBody, ModalCloseButton, ModalContent, ModalHeader, ModalTitle, ModalTrigger } from "@ndla/modal"; -import { Button } from "@ndla/primitives"; +import { Button, IconButton } from "@ndla/primitives"; import { Text } from "@ndla/typography"; import SubjectFilter from "./SubjectFilter"; import { GQLCompetenceGoal, GQLCoreElement, GQLSubjectInfoFragment } from "../../../graphqlTypes"; @@ -67,6 +67,11 @@ const StyledModalHeader = styled(ModalHeader)` padding: 0px; `; +const StyledSearchWrapper = styled.div` + display: flex; + gap: ${spacing.xsmall}; +`; + const SearchHeader = ({ query, suggestion, @@ -124,41 +129,41 @@ const SearchHeader = ({ return (
- - onSearchValueChange(e.target.value)} - /> - {searchValue && ( - { - onSearchValueChange(""); - inputRef.current?.focus(); - }} - > - - - )} - + + onSearchValueChange(e.target.value)} + /> + {searchValue && ( + { + onSearchValueChange(""); + inputRef.current?.focus(); + }} + > + + + )} + + - - + +
{!loading && query && (