diff --git a/.dockerignore b/.dockerignore index 0a64dffc37..8635e7473a 100644 --- a/.dockerignore +++ b/.dockerignore @@ -12,6 +12,9 @@ coverage node_modules **/node_modules +# don't include utilities +utilities/ + # don't include any logs npm-debug.log* **/npm-debug.log* diff --git a/client/package-lock.json b/client/package-lock.json index a10e0a3546..3398417764 100644 --- a/client/package-lock.json +++ b/client/package-lock.json @@ -1,12 +1,12 @@ { "name": "@coralproject/talk", - "version": "8.6.4", + "version": "8.6.5", "lockfileVersion": 2, "requires": true, "packages": { "": { "name": "@coralproject/talk", - "version": "8.6.4", + "version": "8.6.5", "license": "Apache-2.0", "dependencies": { "@ampproject/toolbox-cache-url": "^2.9.0", diff --git a/client/package.json b/client/package.json index a14be8691f..21c91034a7 100644 --- a/client/package.json +++ b/client/package.json @@ -1,6 +1,6 @@ { "name": "@coralproject/talk", - "version": "8.6.4", + "version": "8.6.5", "author": "The Coral Project", "homepage": "https://coralproject.net/", "sideEffects": [ diff --git a/client/src/core/client/admin/components/AutoLoadMore.tsx b/client/src/core/client/admin/components/AutoLoadMore.tsx index c2f44a6b7d..6cfda21f86 100644 --- a/client/src/core/client/admin/components/AutoLoadMore.tsx +++ b/client/src/core/client/admin/components/AutoLoadMore.tsx @@ -1,7 +1,7 @@ import React, { FunctionComponent, useEffect } from "react"; import { useInView } from "coral-framework/lib/intersection"; -import { BaseButton, Spinner } from "coral-ui/components/v2"; +import { Button, Spinner } from "coral-ui/components/v2"; interface Props { disableLoadMore?: boolean; @@ -27,9 +27,9 @@ const AutoLoadMoresContainer: FunctionComponent = ({ // button here to make it testable. if (process.env.NODE_ENV === "test") { return ( - + ); } return ( diff --git a/client/src/core/client/admin/components/PaginatedSelect/PaginatedSelect.css b/client/src/core/client/admin/components/PaginatedSelect/PaginatedSelect.css index f85e92e2fb..dba57f16de 100644 --- a/client/src/core/client/admin/components/PaginatedSelect/PaginatedSelect.css +++ b/client/src/core/client/admin/components/PaginatedSelect/PaginatedSelect.css @@ -10,8 +10,8 @@ .wrapper { overflow: hidden; - /* adjust for button line-height being > 1 */ - margin-top: -2px; + white-space: nowrap; + text-overflow: ellipsis; } .button { @@ -19,19 +19,39 @@ border-width: 0; width: calc(20 * var(--mini-unit)); margin-right: calc(var(--spacing-1) / 2); + padding-left: var(--spacing-1); font-size: var(--font-size-3); + font-family: var(--font-family-primary); + font-weight: var(--font-weight-primary-bold); line-height: 1.2; - justify-content: space-between; + justify-content: flex-start; + align-items: center; background: var(--palette-background-input); } +.filterInput { + resize: none; + height: 100%; + width: auto; + overflow: hidden; + margin-left: var(--spacing-1); + margin-right: var(--spacing-1); +} + +.filterInput > textarea { + resize: none; + overflow: hidden; + sizing: border-box; + color: var(--palette-grey-400); +} + .buttonIconLeft { width: 20px; - margin-right: calc(var(--spacing-1) / 2); } .buttonIconRight { - align-self: baseline; + margin-left: auto; + margin-right: var(--spacing-1); width: 16px; } @@ -40,8 +60,3 @@ /* adjust for button line-height being > 1 */ margin-top: -2px; } - -.buttonText { - overflow: hidden; - text-overflow: ellipsis; -} diff --git a/client/src/core/client/admin/components/PaginatedSelect/PaginatedSelect.tsx b/client/src/core/client/admin/components/PaginatedSelect/PaginatedSelect.tsx index 118851c8f1..9f08ca2de3 100644 --- a/client/src/core/client/admin/components/PaginatedSelect/PaginatedSelect.tsx +++ b/client/src/core/client/admin/components/PaginatedSelect/PaginatedSelect.tsx @@ -1,8 +1,16 @@ +import { Localized } from "@fluent/react/compat"; import cn from "classnames"; import { noop } from "lodash"; -import React, { ComponentType, FunctionComponent } from "react"; +import React, { + ComponentType, + FunctionComponent, + useCallback, + useEffect, + useRef, +} from "react"; import AutoLoadMore from "coral-admin/components/AutoLoadMore"; +import { useToggleState } from "coral-framework/hooks"; import { IntersectionProvider } from "coral-framework/lib/intersection"; import { ArrowsDownIcon, @@ -10,18 +18,20 @@ import { ButtonSvgIcon, } from "coral-ui/components/icons"; import { - Button, ClickOutside, Dropdown, Flex, Popover, Spinner, } from "coral-ui/components/v2"; +import { TextArea } from "coral-ui/components/v3"; import styles from "./PaginatedSelect.css"; interface Props { onLoadMore?: () => void; + onFilter?: (filter: string) => void; + label: string; Icon?: ComponentType; hasMore?: boolean; disableLoadMore?: boolean; @@ -33,6 +43,7 @@ interface Props { const PaginatedSelect: FunctionComponent = ({ onLoadMore = noop, + onFilter, disableLoadMore = false, hasMore = false, loading = false, @@ -40,14 +51,34 @@ const PaginatedSelect: FunctionComponent = ({ Icon, selected, className, + label, }) => { + const filterRef = useRef(null); + + const [isPopoverVisible, setIsPopoverVisible, togglePopoverVisible] = + useToggleState(false); + + useEffect(() => { + if (isPopoverVisible && filterRef.current) { + filterRef.current.focus(); + } + }, [isPopoverVisible]); + + const handleButtonBlur = useCallback(() => { + if (!onFilter) { + return; + } + setIsPopoverVisible(false); + }, [onFilter, setIsPopoverVisible]); + return ( - ( - + setIsPopoverVisible(false)}> + {children} @@ -66,42 +97,64 @@ const PaginatedSelect: FunctionComponent = ({ )} - - )} - > - {({ toggleVisibility, ref, visible }) => ( -