@coopdigital/react 1.4.1 → 1.5.1

package/src/hooks/useSlots.ts

@@ -1,6 +1,6 @@
 import React from "react"
 
-import { ReactNodeWithConfig } from "../types"
+import { LazyComponent, SlotConfig } from "../types"
 
 type Slots<T> = Record<keyof T, React.ReactNode>
 
@@ -8,22 +8,50 @@ export function isKey<T extends object>(x: T, k: PropertyKey): k is keyof T {
   return k in x
 }
 
-export function getSlotName(node: ReactNodeWithConfig): string | false {
-  if (
-    React.isValidElement(node) &&
-    node.type &&
-    typeof node.type !== "string" &&
-    typeof node.type !== "symbol"
-  ) {
-    return node.type?.config?.name ?? node.type.name
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export function isLazy<T extends React.ComponentType<any>>(
+  type: unknown
+): type is LazyComponent<T> {
+  return typeof type === "object" && type !== null && "_payload" in type && "_init" in type
+}
+
+export function resolveComponentName(child: React.ReactNode): string | null {
+  if (child && typeof child === "object" && "type" in child) {
+    const type = child.type
+
+    if (isLazy(type)) {
+      try {
+        const resolved = type._init(type._payload)
+        if ("slot" in resolved) return (resolved.slot as SlotConfig).name
+        return resolved.displayName ?? resolved.name ?? null
+      } catch {
+        // _init throws a Promise if the payload is still pending
+        return null
+      }
+    }
+
+    if (typeof type === "function") {
+      if ("slot" in type) return (type.slot as SlotConfig).name
+      return (type as React.FC).displayName ?? (type as React.FC).name ?? null
+    }
   }
+  return null
+}
+
+export function getSlotName(node: React.ReactNode): string | false {
+  const slotName = resolveComponentName(node)
 
+  if (slotName) {
+    return slotName.replaceAll(".", "")
+    // return root && !safeName.startsWith(root) ? root + safeName : safeName
+  }
   return false
 }
 
 export function useSlots<T>(
   componentSlots: Slots<T>,
   children: React.ReactNode,
+
   options?: { collect?: string[] }
 ): Slots<T> {
   return React.Children.toArray(children).reduce(

package/src/types/index.ts

@@ -1,19 +1,23 @@
 export type StandardSizes = "sm" | "md" | "lg"
 
-export type FormFieldError = { message?: string; type?: string } | boolean | null | undefined
+// export type FormFieldError = { message?: string; type?: string } | boolean | null | undefined
 
-export type ReactNodeWithConfig =
-  | (React.ReactNode & {
-      type?: {
-        config?: ComponentConfig
-      }
-    })
-  | undefined
-  | null
+export interface SlotConfig {
+  field?: boolean
+  inline?: boolean
+  name: string
+  suffix?: string
+}
+
+export interface LazyPayload<T> {
+  default: T
+}
 
-export interface ComponentConfig {
-  fieldSuffix?: string
-  isField?: boolean
-  isInline?: boolean
-  name?: string
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export interface LazyComponent<T extends React.ComponentType<any>> {
+  _init: (payload: unknown) => T
+  _payload: Promise<LazyPayload<T>> | LazyPayload<T>
+  $$typeof: typeof REACT_LAZY_TYPE
 }
+
+export const REACT_LAZY_TYPE = Symbol.for("react.lazy")

package/src/utils/index.ts

@@ -1,3 +1,5 @@
+import { isValidElement } from "react"
+
 export const bgPropToClass = (color: string, userClasses?: string) =>
   userClasses?.includes("bg-") ? "" : `bg-${color}`
 
@@ -11,11 +13,11 @@ export const hasUserBorder = (userClasses?: string) => {
 
 export const bgClassToColor = (userClasses: string) => {
   return /bg-([^\s]+)/.exec(userClasses)?.[1] ?? null
+}
 
-  // return (
-  //   userClasses
-  //     .split(" ")
-  //     .find((c) => c.startsWith("bg"))
-  //     ?.replace("bg-", "") ?? ""
-  // )
+export function getSlotProp<R = unknown>(slot: React.ReactNode, prop: string): R | undefined {
+  if (isValidElement(slot) && prop in (slot.props as object)) {
+    return (slot.props as Record<string, unknown>)[prop] as R
+  }
+  return undefined
 }

package/dist/node_modules/merge-refs/dist/index.js

@@ -1,36 +0,0 @@
-/**
- * A function that merges React refs into one.
- * Supports both functions and ref objects created using createRef() and useRef().
- *
- * Usage:
- * ```tsx
- * <div ref={mergeRefs(ref1, ref2, ref3)} />
- * ```
- *
- * @param {(React.Ref<T> | undefined)[]} inputRefs Array of refs
- * @returns {React.Ref<T> | React.RefCallback<T>} Merged refs
- */
-function mergeRefs() {
-    var inputRefs = [];
-    for (var _i = 0; _i < arguments.length; _i++) {
-        inputRefs[_i] = arguments[_i];
-    }
-    var filteredInputRefs = inputRefs.filter(Boolean);
-    if (filteredInputRefs.length <= 1) {
-        var firstRef = filteredInputRefs[0];
-        return firstRef || null;
-    }
-    return function mergedRefs(ref) {
-        for (var _i = 0, filteredInputRefs_1 = filteredInputRefs; _i < filteredInputRefs_1.length; _i++) {
-            var inputRef = filteredInputRefs_1[_i];
-            if (typeof inputRef === 'function') {
-                inputRef(ref);
-            }
-            else if (inputRef) {
-                inputRef.current = ref;
-            }
-        }
-    };
-}
-
-export { mergeRefs as default };