@firecms/ui 3.4.0-canary.f6a889a → 3.4.0

package/dist/components/SearchBar.d.ts

@@ -3,6 +3,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.
@@ -22,5 +29,5 @@ interface SearchBarProps {
     loading?: boolean;
     inputRef?: React.Ref<HTMLInputElement>;
 }
-export declare function SearchBar({ onClick, onTextSearch, placeholder, expandable, size, large, innerClassName, className, autoFocus, disabled, loading, inputRef }: SearchBarProps): React.JSX.Element;
+export declare function SearchBar({ onClick, onTextSearch, placeholder, initialValue, expandable, size, large, innerClassName, className, autoFocus, disabled, loading, inputRef }: SearchBarProps): React.JSX.Element;
 export {};

package/dist/index.es.js

@@ -34,7 +34,7 @@ const fieldBackgroundHoverMixin = "hover:bg-opacity-70 dark:hover:bg-surface-700
 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 ";
 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";
 const cardMixin = "bg-white dark:bg-surface-950 rounded-md border border-surface-200/40 dark:border-surface-700/40 m-1 -p-1";
-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 ";
+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 ";
 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";
 function cls(...classes) {
   return twMerge(clsx(classes));
@@ -1101,10 +1101,11 @@ const ButtonInner = React__default.memo(React__default.forwardRef((t0, ref) => {
 ButtonInner.displayName = "Button";
 const Button = ButtonInner;
 const Card = React__default.forwardRef((t0, ref) => {
-  const $ = c(21);
+  const $ = c(23);
   let children;
   let className;
   let onClick;
+  let onKeyDownProp;
   let props;
   let style;
   if ($[0] !== t0) {
@@ -1113,61 +1114,73 @@ const Card = React__default.forwardRef((t0, ref) => {
       className,
       onClick,
       style,
+      onKeyDown: onKeyDownProp,
       ...props
     } = t0);
     $[0] = t0;
     $[1] = children;
     $[2] = className;
     $[3] = onClick;
-    $[4] = props;
-    $[5] = style;
+    $[4] = onKeyDownProp;
+    $[5] = props;
+    $[6] = style;
   } else {
     children = $[1];
     className = $[2];
     onClick = $[3];
-    props = $[4];
-    style = $[5];
+    onKeyDownProp = $[4];
+    props = $[5];
+    style = $[6];
   }
   let t1;
-  if ($[6] !== onClick) {
+  if ($[7] !== onClick || $[8] !== onKeyDownProp) {
     t1 = (e) => {
+      onKeyDownProp?.(e);
+      if (!onClick || e.defaultPrevented) {
+        return;
+      }
+      if (e.target !== e.currentTarget) {
+        return;
+      }
       if (e.key === "Enter" || e.key === " ") {
-        onClick?.();
+        e.preventDefault();
+        onClick();
       }
     };
-    $[6] = onClick;
-    $[7] = t1;
+    $[7] = onClick;
+    $[8] = onKeyDownProp;
+    $[9] = t1;
   } else {
-    t1 = $[7];
+    t1 = $[9];
   }
-  const onKeyPress = t1;
+  const onKeyDown = t1;
   const t2 = onClick ? "button" : void 0;
   const t3 = onClick ? 0 : void 0;
   const t4 = onClick && cardClickableMixin;
   let t5;
-  if ($[8] !== className || $[9] !== t4) {
+  if ($[10] !== className || $[11] !== t4) {
     t5 = cls(cardMixin, t4, className);
-    $[8] = className;
-    $[9] = t4;
-    $[10] = t5;
+    $[10] = className;
+    $[11] = t4;
+    $[12] = t5;
   } else {
-    t5 = $[10];
+    t5 = $[12];
   }
   let t6;
-  if ($[11] !== children || $[12] !== onClick || $[13] !== onKeyPress || $[14] !== props || $[15] !== ref || $[16] !== style || $[17] !== t2 || $[18] !== t3 || $[19] !== t5) {
-    t6 = /* @__PURE__ */ jsx("div", { ref, onKeyPress, role: t2, tabIndex: t3, onClick, className: t5, style, ...props, children });
-    $[11] = children;
-    $[12] = onClick;
-    $[13] = onKeyPress;
-    $[14] = props;
-    $[15] = ref;
-    $[16] = style;
-    $[17] = t2;
-    $[18] = t3;
-    $[19] = t5;
-    $[20] = t6;
+  if ($[13] !== children || $[14] !== onClick || $[15] !== onKeyDown || $[16] !== props || $[17] !== ref || $[18] !== style || $[19] !== t2 || $[20] !== t3 || $[21] !== t5) {
+    t6 = /* @__PURE__ */ jsx("div", { ref, onKeyDown, role: t2, tabIndex: t3, onClick, className: t5, style, ...props, children });
+    $[13] = children;
+    $[14] = onClick;
+    $[15] = onKeyDown;
+    $[16] = props;
+    $[17] = ref;
+    $[18] = style;
+    $[19] = t2;
+    $[20] = t3;
+    $[21] = t5;
+    $[22] = t6;
   } else {
-    t6 = $[20];
+    t6 = $[22];
   }
   return t6;
 });
@@ -36144,6 +36157,7 @@ function SearchBar(t0) {
     onClick,
     onTextSearch,
     placeholder: t1,
+    initialValue,
     expandable: t2,
     size: t3,
     innerClassName,
@@ -36156,7 +36170,7 @@ function SearchBar(t0) {
   const placeholder = t1 === void 0 ? "Search" : t1;
   const expandable = t2 === void 0 ? false : t2;
   const size = t3 === void 0 ? "medium" : t3;
-  const [searchText, setSearchText] = useState("");
+  const [searchText, setSearchText] = useState(initialValue ?? "");
   const [active, setActive] = useState(false);
   const deferredValues = useDebounceValue(searchText, 200);
   let t4;