@snapdragonsnursery/react-components 1.21.1 → 1.23.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@snapdragonsnursery/react-components",
-  "version": "1.21.1",
+  "version": "1.23.0",
   "description": "",
   "main": "src/index.js",
   "scripts": {

package/src/ChildSearchModal.jsx

@@ -216,10 +216,10 @@ const ChildSearchModal = ({
       }
 
       // Handle status filtering
+      // Important: when status is "all", do not send active_only=true.
+      // The status dropdown is the source of truth for active/inactive/all.
       if (advancedFilters.status && advancedFilters.status !== "all") {
         params.append("status", advancedFilters.status);
-      } else if (activeOnly) {
-        params.append("active_only", "true");
       }
 
       // Add room filter
@@ -293,7 +293,6 @@ const ChildSearchModal = ({
     pagination.pageSize,
     siteId,
     siteIds,
-    activeOnly,
     advancedFilters,
     applicationContext,
     bypassPermissions,

package/src/ChildSearchPage.jsx

@@ -348,10 +348,13 @@ const ChildSearchPage = ({
       }
 
       // Handle status filtering
-      if (debouncedAdvancedFilters.status && debouncedAdvancedFilters.status !== "all") {
+      // Important: when status is "all", do not send active_only=true.
+      // The status dropdown is the source of truth for active/inactive/all.
+      if (
+        debouncedAdvancedFilters.status &&
+        debouncedAdvancedFilters.status !== "all"
+      ) {
         params.append("status", debouncedAdvancedFilters.status);
-      } else if (activeOnly) {
-        params.append("active_only", "true");
       }
 
       // Add room filter
@@ -431,7 +434,6 @@ const ChildSearchPage = ({
     pagination.pageSize,
     siteId,
     siteIds,
-    activeOnly,
     debouncedAdvancedFilters,
     applicationContext,
     bypassPermissions,

package/src/EmployeeSearchModal.jsx

@@ -639,13 +639,13 @@ const EmployeeSearchModal = ({
       }
 
       // Handle status filtering
+      // Important: when status is "all", do not send active_only=true.
+      // The status dropdown is the source of truth for active/inactive/all.
       if (
         debouncedAdvancedFilters.status &&
         debouncedAdvancedFilters.status !== "all"
       ) {
         params.append("status", debouncedAdvancedFilters.status);
-      } else if (activeOnly) {
-        params.append("active_only", "true");
       }
 
       // Add role filter
@@ -759,7 +759,6 @@ const EmployeeSearchModal = ({
     pagination.pageSize,
     siteId,
     siteIds,
-    activeOnly,
     debouncedAdvancedFilters,
     applicationContext,
     bypassPermissions,

package/src/EmployeeSearchPage.jsx

@@ -450,10 +450,13 @@ const EmployeeSearchPage = ({
       }
 
       // Handle status filtering
-      if (debouncedAdvancedFilters.status && debouncedAdvancedFilters.status !== "all") {
+      // Important: when status is "all", do not send active_only=true.
+      // The status dropdown is the source of truth for active/inactive/all.
+      if (
+        debouncedAdvancedFilters.status &&
+        debouncedAdvancedFilters.status !== "all"
+      ) {
         params.append("status", debouncedAdvancedFilters.status);
-      } else if (activeOnly) {
-        params.append("active_only", "true");
       }
 
       // Add role filter
@@ -581,7 +584,6 @@ const EmployeeSearchPage = ({
     pagination.pageSize,
     siteId,
     siteIds,
-    activeOnly,
     debouncedAdvancedFilters,
     applicationContext,
     bypassPermissions,

package/src/components/ui/floating-action-button.jsx

@@ -1,33 +1,35 @@
 // FloatingActionButton.jsx
 // ---------------------------------
 // A shadcn-styled Floating Action Button (FAB).
-// - Single fluid button that contains both icon and (optional) label
-// - Label reveal is controlled by showLabel: 'hover' | 'always' | 'never'
-// - Subtle icon and padding animation on hover when showLabel='hover'
-// - Supports fixed positioning to screen corners
+// - Single action mode: icon + onClick. Label reveal controlled by showLabel: 'hover' | 'always' | 'never'.
+// - Menu mode: icon + actions array. FAB expands into a cohesive speed-dial; action items bloom
+//   out of the button with staggered animation. Icon swaps to X when open.
+// - Supports fixed positioning to screen corners.
 //
-// Example usage:
+// Example usage (single action):
 //
-// import { FloatingActionButton } from "@snapdragonsnursery/react-components";
-// import { Plus } from "lucide-react";
+// <FloatingActionButton icon={Plus} label="Create" onClick={() => {}} showLabel="hover" position="bottom-right" />
 //
-// export default function Example() {
-//   return (
-//     <FloatingActionButton
-//       icon={Plus}
-//       label="Create"
-//       onClick={() => console.log("Create clicked")}
-//       showLabel="hover"
-//       position="bottom-right"
-//     />
-//   );
-// }
+// Example usage (menu mode):
+//
+// <FloatingActionButton
+//   icon={Plus}
+//   actions={[
+//     { icon: FileText, label: "Send request form", onClick: () => {} },
+//     { icon: PenLine, label: "Log medication", onClick: () => {} },
+//   ]}
+//   position="bottom-right"
+//   menuAriaLabel="Medication actions"
+// />
 //
 // Notes:
-// - Provide ariaLabel if label is omitted.
+// - Provide ariaLabel (single) or menuAriaLabel (menu) when label is omitted.
 // - Uses Tailwind CSS + shadcn design tokens (bg-primary, text-primary-foreground, etc.).
+// - Menu mode renders a speed-dial: action items bloom vertically from the FAB with staggered
+//   transitions, keeping the whole group visually unified.
 
 import * as React from "react";
+import { X } from "lucide-react";
 import { cn } from "../../lib/utils";
 import { Button } from "./button.jsx";
 
@@ -39,22 +41,59 @@ const POSITION_CLASSES = {
   none: "",
 };
 
+// For top positions, items bloom downward; for bottom positions, upward.
+const isTopPosition = (position) =>
+  position === "top-right" || position === "top-left";
+
+// Label appears on the opposite side of the screen edge.
+const labelSide = (position) =>
+  position === "bottom-right" || position === "top-right" ? "left" : "right";
+
 function FloatingActionButton({
   icon: Icon,
   label = "",
   onClick,
+  actions,
   showLabel,
-  // Deprecated: expandOnHover kept for backwards compatibility. If provided and showLabel is undefined,
-  // we map: true -> 'hover', false -> 'never'.
+  // Deprecated: expandOnHover kept for backwards compatibility.
   expandOnHover,
   position = "bottom-right",
   className,
   disabled = false,
   ariaLabel,
+  menuAriaLabel,
   positionClassName,
   colorClassName,
+  menuButtonClassName,
+  menuLabelClassName,
   ...props
 }) {
+  const [menuOpen, setMenuOpen] = React.useState(false);
+  const isMenuMode = actions != null && actions.length > 0;
+  const containerRef = React.useRef(null);
+
+  // Close on outside click
+  React.useEffect(() => {
+    if (!menuOpen) return;
+    const handler = (e) => {
+      if (containerRef.current && !containerRef.current.contains(e.target)) {
+        setMenuOpen(false);
+      }
+    };
+    document.addEventListener("pointerdown", handler);
+    return () => document.removeEventListener("pointerdown", handler);
+  }, [menuOpen]);
+
+  // Close on Escape
+  React.useEffect(() => {
+    if (!menuOpen) return;
+    const handler = (e) => {
+      if (e.key === "Escape") setMenuOpen(false);
+    };
+    document.addEventListener("keydown", handler);
+    return () => document.removeEventListener("keydown", handler);
+  }, [menuOpen]);
+
   const resolvedShowLabel = React.useMemo(() => {
     if (showLabel) return showLabel;
     if (typeof expandOnHover === "boolean") {
@@ -65,6 +104,7 @@ function FloatingActionButton({
 
   const containerClasses = cn(
     positionClassName || (POSITION_CLASSES[position ?? "none"] ?? POSITION_CLASSES.none),
+    "z-50",
     className
   );
 
@@ -72,20 +112,30 @@ function FloatingActionButton({
     "rounded-full shadow-lg focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 leading-none",
     colorClassName || "bg-primary hover:bg-primary/90 text-primary-foreground"
   );
+  const menuButtonBaseClass = cn(
+    "bg-secondary hover:bg-secondary/80 text-secondary-foreground",
+    "hover:scale-110 hover:shadow-lg hover:ring-2 hover:ring-primary/40",
+    menuButtonClassName
+  );
+  const menuLabelBaseClass = cn(
+    "bg-popover text-popover-foreground border border-border",
+    menuLabelClassName
+  );
 
   const shapeClasses =
-    resolvedShowLabel === "never"
+    resolvedShowLabel === "never" || isMenuMode
       ? "h-14 w-14 inline-flex items-center justify-center gap-0 p-0"
       : resolvedShowLabel === "always"
         ? "h-14 inline-flex items-center justify-center gap-0 px-4"
-        : // hover mode
-          "group h-14 inline-flex items-center gap-0 justify-center min-w-[3.5rem] px-0 transition-all duration-300 ease-out hover:px-4";
+        : "group h-14 inline-flex items-center gap-0 justify-center min-w-[3.5rem] px-0 transition-all duration-300 ease-out hover:px-4";
 
   const buttonClasses = cn(baseButton, shapeClasses);
 
   const iconClasses = cn(
-    "h-6 w-6 block shrink-0 pointer-events-none transition-transform duration-200 ease-out",
-    resolvedShowLabel === "hover" ? "group-hover:scale-110 group-hover:rotate-3" : ""
+    "h-6 w-6 block shrink-0 pointer-events-none",
+    !isMenuMode && resolvedShowLabel === "hover"
+      ? "group-hover:scale-110 group-hover:rotate-3 transition-transform duration-200"
+      : ""
   );
 
   const labelClasses = cn(
@@ -97,6 +147,151 @@ function FloatingActionButton({
         : "sr-only"
   );
 
+  // ── MENU (speed-dial) MODE ───────────────────────────────────────────────
+  if (isMenuMode) {
+    const top = isTopPosition(position);
+    const labelOnLeft = labelSide(position) === "left";
+    const columnAlignClass = labelOnLeft ? "items-end" : "items-start";
+    const actionListMarginClass = top ? "mt-3" : "mb-3";
+    const hiddenTranslateYClass = top ? "-translate-y-4" : "translate-y-4";
+
+    const getStaggerDelay = (idx) => {
+      if (menuOpen) {
+        // Bloom from the trigger button outwards.
+        // Top menus: idx=0 is nearest; bottom menus: idx=last is nearest.
+        return top ? idx * 40 : (actions.length - 1 - idx) * 40;
+      }
+
+      // Reverse order while collapsing for a cleaner close animation.
+      return top ? (actions.length - 1 - idx) * 40 : idx * 40;
+    };
+
+    const renderActionList = () => (
+      <div
+        className={cn("flex gap-3 flex-col", actionListMarginClass, columnAlignClass)}
+        aria-hidden={!menuOpen}
+      >
+        {actions.map((action, idx) => {
+          const ActionIcon = action.icon;
+          const staggerDelay = getStaggerDelay(idx);
+
+          return (
+            <div
+              key={idx}
+              className={cn(
+                "flex items-center gap-3",
+                labelOnLeft ? "flex-row" : "flex-row-reverse"
+              )}
+              style={{ transitionDelay: `${staggerDelay}ms` }}
+            >
+              <span
+                className={cn(
+                  "px-3 py-1.5 rounded-full text-sm font-medium whitespace-nowrap",
+                  "shadow-md",
+                  menuLabelBaseClass,
+                  "transition-all duration-200 ease-out",
+                  menuOpen
+                    ? "opacity-100 translate-x-0 scale-100"
+                    : labelOnLeft
+                      ? "opacity-0 translate-x-3 scale-95 pointer-events-none"
+                      : "opacity-0 -translate-x-3 scale-95 pointer-events-none"
+                )}
+                style={{ transitionDelay: `${staggerDelay}ms` }}
+              >
+                {action.label}
+              </span>
+
+              <button
+                type="button"
+                onClick={() => {
+                  action.onClick?.();
+                  setMenuOpen(false);
+                }}
+                disabled={disabled}
+                tabIndex={menuOpen ? 0 : -1}
+                aria-label={action.label}
+                title={action.label}
+                className={cn(
+                  "group h-12 w-12 rounded-full shadow-md flex items-center justify-center shrink-0",
+                  "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
+                  "transition-all duration-200 ease-out",
+                  menuButtonBaseClass,
+                  menuOpen
+                    ? "opacity-100 scale-100 translate-y-0"
+                    : cn("opacity-0 scale-75 pointer-events-none", hiddenTranslateYClass)
+                )}
+                style={{ transitionDelay: `${staggerDelay}ms` }}
+              >
+                {ActionIcon ? (
+                  <ActionIcon
+                    className="h-5 w-5 pointer-events-none transition-transform duration-200 group-hover:scale-110 group-hover:rotate-6"
+                    aria-hidden="true"
+                  />
+                ) : null}
+              </button>
+            </div>
+          );
+        })}
+      </div>
+    );
+
+    const renderTriggerButton = () => (
+      <Button
+        type="button"
+        data-slot="floating-action-button"
+        className={cn(buttonClasses, "transition-transform duration-200", menuOpen ? "rotate-0" : "")}
+        size="icon"
+        aria-label={menuAriaLabel ?? ariaLabel ?? "Open menu"}
+        aria-expanded={menuOpen}
+        aria-haspopup="true"
+        title={menuAriaLabel ?? ariaLabel ?? "Open menu"}
+        disabled={disabled}
+        onClick={() => setMenuOpen((v) => !v)}
+        {...props}
+      >
+        <span
+          className={cn(
+            "transition-all duration-300 absolute",
+            menuOpen ? "opacity-100 rotate-0 scale-100" : "opacity-0 rotate-90 scale-75"
+          )}
+          aria-hidden="true"
+        >
+          <X className="h-6 w-6" />
+        </span>
+        <span
+          className={cn(
+            "transition-all duration-300",
+            menuOpen ? "opacity-0 -rotate-90 scale-75" : "opacity-100 rotate-0 scale-100"
+          )}
+          aria-hidden="true"
+        >
+          {Icon ? <Icon className="h-6 w-6 block shrink-0" /> : null}
+        </span>
+      </Button>
+    );
+
+    return (
+      <div
+        ref={containerRef}
+        className={cn(containerClasses, "flex flex-col gap-0", columnAlignClass)}
+        data-testid="fab-container"
+      >
+        {top ? (
+          <>
+            {renderTriggerButton()}
+            {renderActionList()}
+          </>
+        ) : (
+          <>
+            {renderActionList()}
+            {renderTriggerButton()}
+          </>
+        )}
+      </div>
+    );
+  }
+
+  // ── SINGLE ACTION MODE ───────────────────────────────────────────────────
   return (
     <div className={containerClasses} data-testid="fab-container">
       <Button

package/src/index.d.ts

@@ -123,6 +123,11 @@ export interface FloatingActionButtonProps {
   icon?: React.ComponentType<any>
   label?: string
   onClick?: () => void
+  actions?: Array<{
+    icon?: React.ComponentType<any>
+    label: string
+    onClick?: () => void
+  }>
   showLabel?: 'hover' | 'always' | 'never'
   // @deprecated use showLabel instead. If provided: true => 'hover', false => 'never'
   expandOnHover?: boolean
@@ -130,8 +135,11 @@ export interface FloatingActionButtonProps {
   className?: string
   positionClassName?: string
   colorClassName?: string
+  menuButtonClassName?: string
+  menuLabelClassName?: string
   disabled?: boolean
   ariaLabel?: string
+  menuAriaLabel?: string
 }
 export const FloatingActionButton: React.ComponentType<FloatingActionButtonProps>