@firecms/ui 3.4.0-canary.f6a889a → 3.4.0

package/dist/styles.d.ts

@@ -8,5 +8,5 @@ export declare const fieldBackgroundHoverMixin = "hover:bg-opacity-70 dark:hover
 export declare const defaultBorderMixin = "border-surface-200 border-opacity-40 dark:border-surface-700 dark:border-opacity-40 border-surface-200/40 dark:border-surface-700/40 ";
 export declare const paperMixin = "bg-white rounded-md dark:bg-surface-950 border border-surface-200 border-opacity-40 dark:border-surface-700 dark:border-opacity-40 border-surface-200/40 dark:border-surface-700/40";
 export declare const cardMixin = "bg-white dark:bg-surface-950 rounded-md border border-surface-200/40 dark:border-surface-700/40 m-1 -p-1";
-export declare const cardClickableMixin = "hover:bg-surface-accent-100 dark:hover:bg-surface-accent-800 hover:ring-2 hover:ring-primary cursor-pointer hover:bg-primary/20 dark:hover:bg-primary/10 ";
+export declare const cardClickableMixin = "hover:bg-surface-accent-100 dark:hover:bg-surface-accent-800 hover:ring-2 hover:ring-primary cursor-pointer hover:bg-primary/20 dark:hover:bg-primary/10 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary ";
 export declare const cardSelectedMixin = "bg-primary-bg dark:bg-primary-bg bg-opacity-30 bg-primary-bg/30 dark:bg-opacity-10 dark:bg-primary-bg/10 ring-1 ring-primary ring-opacity-75 ring-primary/75 bg-primary/10 dark:bg-primary/10 ring-1 ring-primary/75";

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@firecms/ui",
   "type": "module",
-  "version": "3.4.0-canary.f6a889a",
+  "version": "3.4.0",
   "description": "Awesome Firebase/Firestore-based headless open-source CMS",
   "funding": {
     "url": "https://github.com/sponsors/firecmsco"

package/src/components/Card.tsx

@@ -15,18 +15,33 @@ const Card = React.forwardRef<HTMLDivElement, CardProps>(({
     className,
     onClick,
     style,
+    onKeyDown: onKeyDownProp,
     ...props
 }, ref) => {
-    const onKeyPress = useCallback((e: React.KeyboardEvent<HTMLDivElement>) => {
+
+    const onKeyDown = useCallback((e: React.KeyboardEvent<HTMLDivElement>) => {
+        // Always let a caller supplied handler run first, and let it opt out of
+        // the default activation by calling preventDefault().
+        onKeyDownProp?.(e);
+        if (!onClick || e.defaultPrevented)
+            return;
+        // Only activate when the card itself is focused. Cards may render their
+        // own focusable children (e.g. action buttons), which handle their own
+        // activation; their key events must not activate the card as well.
+        if (e.target !== e.currentTarget)
+            return;
         if (e.key === "Enter" || e.key === " ") {
-            onClick?.();
+            // Without this, Space also performs its default browser action and
+            // scrolls the page away from the focused card.
+            e.preventDefault();
+            onClick();
         }
-    }, [onClick]);
+    }, [onClick, onKeyDownProp]);
 
     return (
         <div
             ref={ref}
-            onKeyPress={onKeyPress}
+            onKeyDown={onKeyDown}
             role={onClick ? "button" : undefined}
             tabIndex={onClick ? 0 : undefined}
             onClick={onClick}

package/src/components/SearchBar.tsx

@@ -11,6 +11,13 @@ interface SearchBarProps {
     onClick?: () => void;
     onTextSearch?: (searchString?: string) => void;
     placeholder?: string;
+    /**
+     * Text the input is initialised with. Use it when the search term is restored from
+     * somewhere else, e.g. a URL query parameter, so that the input reflects the search
+     * that is actually being applied. Only read when the component mounts; the search bar
+     * owns the text from then on.
+     */
+    initialValue?: string;
     expandable?: boolean;
     /**
      * Size of the search bar.
@@ -35,6 +42,7 @@ export function SearchBar({
     onClick,
     onTextSearch,
     placeholder = "Search",
+    initialValue,
     expandable = false,
     size = "medium",
     large,
@@ -46,7 +54,7 @@ export function SearchBar({
     inputRef
 }: SearchBarProps) {
 
-    const [searchText, setSearchText] = useState<string>("");
+    const [searchText, setSearchText] = useState<string>(initialValue ?? "");
     const [active, setActive] = useState<boolean>(false);
 
     const deferredValues = useDebounceValue(searchText, 200);

package/src/styles.ts

@@ -8,5 +8,5 @@ export const fieldBackgroundHoverMixin = "hover:bg-opacity-70 dark:hover:bg-surf
 export const defaultBorderMixin = "border-surface-200 border-opacity-40 dark:border-surface-700 dark:border-opacity-40 border-surface-200/40 dark:border-surface-700/40 ";
 export const paperMixin = "bg-white rounded-md dark:bg-surface-950 border border-surface-200 border-opacity-40 dark:border-surface-700 dark:border-opacity-40 border-surface-200/40 dark:border-surface-700/40";
 export const cardMixin = "bg-white dark:bg-surface-950 rounded-md border border-surface-200/40 dark:border-surface-700/40 m-1 -p-1";
-export const cardClickableMixin = "hover:bg-surface-accent-100 dark:hover:bg-surface-accent-800 hover:ring-2 hover:ring-primary cursor-pointer hover:bg-primary/20 dark:hover:bg-primary/10 ";
+export const cardClickableMixin = "hover:bg-surface-accent-100 dark:hover:bg-surface-accent-800 hover:ring-2 hover:ring-primary cursor-pointer hover:bg-primary/20 dark:hover:bg-primary/10 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary ";
 export const cardSelectedMixin = "bg-primary-bg dark:bg-primary-bg bg-opacity-30 bg-primary-bg/30 dark:bg-opacity-10 dark:bg-primary-bg/10 ring-1 ring-primary ring-opacity-75 ring-primary/75 bg-primary/10 dark:bg-primary/10 ring-1 ring-primary/75";