@nswds/app 1.119.0 → 1.119.2

package/dist/index.d.cts

@@ -1098,13 +1098,19 @@ interface DynamicFaviconProps {
 }
 declare function DynamicFavicon({ lightModeFavicon, darkModeFavicon }: DynamicFaviconProps): null;
 
-declare const ExpandableSearch: React$1.ForwardRefExoticComponent<React$1.HTMLAttributes<HTMLFormElement> & {
+type ExpandableSearchButtonProps = Omit<React$1.ComponentPropsWithoutRef<'button'>, 'type'> & {
+    [key: `data-${string}`]: string | number | boolean | undefined;
+};
+declare const ExpandableSearch: React$1.ForwardRefExoticComponent<Omit<React$1.DetailedHTMLProps<React$1.FormHTMLAttributes<HTMLFormElement>, HTMLFormElement>, "ref"> & {
     onAction?: (value: string) => void;
     defaultValue?: string;
 } & VariantProps<(props?: ({
     variant?: "default" | "white" | "primary-800" | "primary-600" | "primary-400" | "primary-200" | "grey-800" | "grey-600" | "grey-400" | "grey-200" | "accent-800" | "accent-600" | "accent-400" | "accent-200" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string> & React$1.RefAttributes<HTMLFormElement>>;
-declare const ExpandableSearchField: React$1.ForwardRefExoticComponent<React$1.InputHTMLAttributes<HTMLInputElement> & React$1.RefAttributes<HTMLInputElement>>;
+declare const ExpandableSearchField: React$1.ForwardRefExoticComponent<React$1.InputHTMLAttributes<HTMLInputElement> & {
+    buttonLabel?: string;
+    buttonProps?: ExpandableSearchButtonProps;
+} & React$1.RefAttributes<HTMLInputElement>>;
 
 declare function Fieldset({ className, ...props }: {
     className?: string;

package/dist/index.d.ts

@@ -1098,13 +1098,19 @@ interface DynamicFaviconProps {
 }
 declare function DynamicFavicon({ lightModeFavicon, darkModeFavicon }: DynamicFaviconProps): null;
 
-declare const ExpandableSearch: React$1.ForwardRefExoticComponent<React$1.HTMLAttributes<HTMLFormElement> & {
+type ExpandableSearchButtonProps = Omit<React$1.ComponentPropsWithoutRef<'button'>, 'type'> & {
+    [key: `data-${string}`]: string | number | boolean | undefined;
+};
+declare const ExpandableSearch: React$1.ForwardRefExoticComponent<Omit<React$1.DetailedHTMLProps<React$1.FormHTMLAttributes<HTMLFormElement>, HTMLFormElement>, "ref"> & {
     onAction?: (value: string) => void;
     defaultValue?: string;
 } & VariantProps<(props?: ({
     variant?: "default" | "white" | "primary-800" | "primary-600" | "primary-400" | "primary-200" | "grey-800" | "grey-600" | "grey-400" | "grey-200" | "accent-800" | "accent-600" | "accent-400" | "accent-200" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string> & React$1.RefAttributes<HTMLFormElement>>;
-declare const ExpandableSearchField: React$1.ForwardRefExoticComponent<React$1.InputHTMLAttributes<HTMLInputElement> & React$1.RefAttributes<HTMLInputElement>>;
+declare const ExpandableSearchField: React$1.ForwardRefExoticComponent<React$1.InputHTMLAttributes<HTMLInputElement> & {
+    buttonLabel?: string;
+    buttonProps?: ExpandableSearchButtonProps;
+} & React$1.RefAttributes<HTMLInputElement>>;
 
 declare function Fieldset({ className, ...props }: {
     className?: string;

package/dist/index.js

@@ -14351,9 +14351,20 @@ function CodeDemoContent({ data, showCode = true, controls = defaultControls })
   React5__default.useEffect(() => {
     const frame2 = iframeRef.current;
     if (!frame2) return;
+    const getTargetOrigin = () => {
+      const src = frame2.getAttribute("src");
+      if (!src || src === "about:blank") {
+        return window.location.origin;
+      }
+      try {
+        return new URL(src, window.location.href).origin;
+      } catch {
+        return window.location.origin;
+      }
+    };
     const send = () => {
       const msg = { type: "nswds-theme", payload: themeValues };
-      frame2.contentWindow?.postMessage(msg, "*");
+      frame2.contentWindow?.postMessage(msg, getTargetOrigin());
     };
     send();
     frame2.addEventListener("load", send);
@@ -18278,85 +18289,131 @@ var expandableSearchFocusVariants = cva("", {
   }
 });
 var ExpandableSearchContext = React5.createContext(null);
-var ExpandableSearch = React5.forwardRef(({ className, onAction, defaultValue = "", variant = "default", ...props }, ref) => {
-  const [value, setValue] = React5.useState(defaultValue);
-  const formRef = React5.useRef(null);
-  const resolvedVariant = variant ?? "default";
-  const handleAction = (e) => {
-    e.preventDefault();
-    if (onAction) {
-      onAction(value);
-    }
-  };
-  return /* @__PURE__ */ jsx(
-    ExpandableSearchContext.Provider,
-    {
-      value: { value, setValue, formRef, variant: resolvedVariant },
-      children: /* @__PURE__ */ jsx(
-        "form",
+var ExpandableSearch = React5.forwardRef(
+  ({
+    className,
+    onAction,
+    defaultValue = "",
+    onSubmit,
+    onFocusCapture,
+    onBlurCapture,
+    variant = "default",
+    ...props
+  }, ref) => {
+    const [value, setValue] = React5.useState(defaultValue);
+    const [formHasFocusWithin, setFormHasFocusWithin] = React5.useState(false);
+    const resolvedVariant = variant ?? "default";
+    const handleSubmit = (e) => {
+      onSubmit?.(e);
+      if (e.defaultPrevented) {
+        return;
+      }
+      e.preventDefault();
+      onAction?.(value);
+    };
+    const handleFocusCapture = (e) => {
+      setFormHasFocusWithin(true);
+      onFocusCapture?.(e);
+    };
+    const handleBlurCapture = (e) => {
+      const nextFocusedElement = e.relatedTarget;
+      if (!e.currentTarget.contains(nextFocusedElement)) {
+        setFormHasFocusWithin(false);
+      }
+      onBlurCapture?.(e);
+    };
+    return /* @__PURE__ */ jsx(
+      ExpandableSearchContext.Provider,
+      {
+        value: { value, setValue, formHasFocusWithin, variant: resolvedVariant },
+        children: /* @__PURE__ */ jsx(
+          "form",
+          {
+            ref,
+            className: cn("group relative inline-block select-none", className),
+            onBlurCapture: handleBlurCapture,
+            onFocusCapture: handleFocusCapture,
+            onSubmit: handleSubmit,
+            ...props
+          }
+        )
+      }
+    );
+  }
+);
+ExpandableSearch.displayName = "ExpandableSearch";
+var ExpandableSearchField = React5.forwardRef(
+  ({ className, id: id3, buttonLabel = "Search", buttonProps, ...props }, ref) => {
+    const context = React5.useContext(ExpandableSearchContext);
+    if (!context) throw new Error("ExpandableSearchField must be used within ExpandableSearch");
+    const generatedId = React5.useId();
+    const {
+      className: buttonClassName,
+      children: buttonChildren,
+      "aria-label": buttonAriaLabel,
+      ...restButtonProps
+    } = buttonProps ?? {};
+    const isActive = context.value.length > 0 || context.formHasFocusWithin;
+    const variant = context.variant;
+    const inputId = id3 ?? generatedId;
+    return /* @__PURE__ */ jsxs("div", { className: "relative flex-1", children: [
+      /* @__PURE__ */ jsx("label", { className: "sr-only", htmlFor: inputId, children: "Search" }),
+      /* @__PURE__ */ jsx(
+        "input",
         {
           ref,
-          className: cn("relative inline-block select-none", className),
-          onSubmit: handleAction,
+          id: inputId,
+          value: context.value,
+          onChange: (e) => context.setValue(e.target.value),
+          className: cn(
+            "align-center flex h-12 w-12 cursor-pointer overflow-hidden rounded-sm border-0 text-transparent",
+            "ring-offset-white focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-none",
+            "transition-[width,box-shadow,background-color] duration-300 ease-in-out",
+            "placeholder:text-transparent placeholder:opacity-0",
+            "expandable-search__input",
+            expandableSearchFocusVariants({ variant }),
+            expandableSearchCollapsedVariants({ variant }),
+            // Conditionally apply classes based on active state
+            {
+              "p-0": !isActive,
+              "w-96 cursor-auto pt-0 pr-12 pb-0 pl-4 outline-none select-auto": isActive
+            },
+            isActive && expandableSearchSurfaceVariants({ variant }),
+            isActive && (variant === "default" ? "placeholder:text-grey-700 placeholder:opacity-100" : "placeholder:text-current placeholder:opacity-70"),
+            className
+          ),
           ...props
         }
+      ),
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          "aria-label": buttonAriaLabel ?? buttonLabel,
+          type: "submit",
+          className: cn(
+            "absolute top-0 right-0 z-10 flex h-12 w-12 rounded-sm transition-[background-color,box-shadow] duration-200",
+            "ring-offset-white focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-none",
+            expandableSearchButtonVariants({ variant }),
+            expandableSearchFocusVariants({ variant }),
+            {
+              "pointer-events-none": !isActive,
+              "pointer-events-auto": isActive
+            },
+            buttonClassName
+          ),
+          ...restButtonProps,
+          children: buttonChildren ?? /* @__PURE__ */ jsx(
+            Icons.search,
+            {
+              "aria-hidden": "true",
+              className: "m-auto block h-8 w-8 shrink-0 fill-current leading-none"
+            }
+          )
+        }
       )
-    }
-  );
-});
-ExpandableSearch.displayName = "ExpandableSearch";
-var ExpandableSearchField = React5.forwardRef(({ className, id: id3, ...props }, ref) => {
-  const context = React5.useContext(ExpandableSearchContext);
-  if (!context) throw new Error("ExpandableSearchField must be used within ExpandableSearch");
-  const [isFocused, setIsFocused] = React5.useState(false);
-  const generatedId = React5.useId();
-  const isActive = context.value.length > 0 || isFocused;
-  const variant = context.variant;
-  const inputId = id3 ?? generatedId;
-  return /* @__PURE__ */ jsxs("div", { className: "relative flex-1", children: [
-    /* @__PURE__ */ jsx("label", { className: "sr-only", htmlFor: inputId, children: "Search" }),
-    /* @__PURE__ */ jsx(
-      "input",
-      {
-        ref,
-        id: inputId,
-        value: context.value,
-        onChange: (e) => context.setValue(e.target.value),
-        onFocus: () => setIsFocused(true),
-        onBlur: () => setIsFocused(false),
-        className: cn(
-          "peer align-center flex h-12 w-12 cursor-pointer overflow-hidden rounded-sm border-0 text-transparent",
-          "ring-offset-white focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-none",
-          "transition-[width,box-shadow,background-color] duration-300 ease-in-out",
-          "placeholder:text-transparent placeholder:opacity-0",
-          "expandable-search__input",
-          expandableSearchFocusVariants({ variant }),
-          expandableSearchCollapsedVariants({ variant }),
-          // Conditionally apply classes based on active state
-          {
-            "p-0": !isActive,
-            "w-96 cursor-auto pt-0 pr-12 pb-0 pl-4 outline-none select-auto": isActive
-          },
-          isActive && expandableSearchSurfaceVariants({ variant }),
-          isActive && (variant === "default" ? "placeholder:text-grey-700 placeholder:opacity-100" : "placeholder:text-current placeholder:opacity-70"),
-          className
-        ),
-        ...props
-      }
-    ),
-    /* @__PURE__ */ jsx(
-      "button",
-      {
-        type: "button",
-        className: cn(
-          "pointer-events-none absolute top-0 right-0 z-10 flex h-12 w-12 rounded-sm transition-colors duration-200 peer-focus:pointer-events-auto",
-          expandableSearchButtonVariants({ variant })
-        ),
-        children: /* @__PURE__ */ jsx(Icons.search, { className: "m-auto block h-8 w-8 shrink-0 fill-current leading-none" })
-      }
-    )
-  ] });
-});
+    ] });
+  }
+);
 ExpandableSearchField.displayName = "ExpandableSearchField";
 function Fieldset2({
   className,
@@ -18885,7 +18942,7 @@ function FormatToggle({ format, setFormat }) {
 
 // package.json
 var package_default = {
-  version: "1.118.0"};
+  version: "1.119.1"};
 var SluggerContext = React5__default.createContext(null);
 function flattenText(nodes) {
   if (nodes == null || typeof nodes === "boolean") return "";
@@ -31312,7 +31369,14 @@ function SidebarProvider({
       } else {
         _setOpen(openState);
       }
-      document.cookie = `${SIDEBAR_COOKIE_NAME}=${openState}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`;
+      const cookieParts = [
+        `${SIDEBAR_COOKIE_NAME}=${encodeURIComponent(String(openState))}`,
+        "path=/",
+        `max-age=${SIDEBAR_COOKIE_MAX_AGE}`,
+        "SameSite=Lax",
+        "Secure"
+      ];
+      document.cookie = cookieParts.join("; ");
     },
     [setOpenProp, open]
   );