Merge pull request #639 from contember/pr/layout-slots-typings

fix(layout): Update return type of `useSlotTargetsFactory()`
contember · Dec 27, 2023 · 0432ad2 · 0432ad2
2 parents ae29e55 + c6e8df9
commit 0432ad2
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 11 deletions.
diff --git a/build/api/layout.api.md b/build/api/layout.api.md
@@ -1052,7 +1052,7 @@ export const SidebarRightSlotTargets: Readonly<Readonly<{
     };
 }>>;
 
-// @public (undocumented)
+// @public @deprecated (undocumented)
 type SlotComponentsRecords<K extends string> = Readonly<{
     readonly [P in PascalCase<K>]: ComponentType;
 }>;
@@ -1215,7 +1215,7 @@ export function useElementInsets(elementRef: RefObject<HTMLElement>): ContainerI
 const useGetLayoutPanelsStateContext: () => GetLayoutPanelsStateContextType;
 
 // @public (undocumented)
-function useHasActiveSlotsFactory<T extends SlotComponentsRecords<string>>(SlotTargets: T): (...slots: ReadonlyArray<keyof T & string>) => boolean;
+function useHasActiveSlotsFactory<T extends SlotTargetComponentsRecord<string>>(SlotTargets: T): (...slots: ReadonlyArray<keyof T & string>) => boolean;
 
 // @public @deprecated (undocumented)
 const useLayoutContainerWidth: typeof useContainerWidth;
@@ -1239,12 +1239,12 @@ export const useSafeAreaInsetsContext: () => ContainerInsets;
 const useSetLayoutPanelsStateContext: () => SetLayoutPanelsStateContextType;
 
 // @public
-function useSlotTargetsFactory<R extends SlotComponentsRecords<string>>(SlotTargets: R): <T>(slots: ReadonlyArray<keyof R & string>, override?: T | undefined) => NonNullable<T> | FunctionComponentElement<    {
+function useSlotTargetsFactory<R extends SlotTargetComponentsRecord<string>>(SlotTargets: R): <T>(slots: ReadonlyArray<keyof R & string>, override?: T | undefined) => NonNullable<T> | FunctionComponentElement<    {
 children?: ReactNode;
 }> | null;
 
 // @public @deprecated
-function useTargetsIfActiveFactory<R extends SlotComponentsRecords<string>>(SlotTargets: R): <T>(slots: readonly (keyof R & string)[], override?: T | undefined) => FunctionComponentElement<    {
+function useTargetsIfActiveFactory<R extends SlotTargetComponentsRecord<string>>(SlotTargets: R): <T>(slots: readonly (keyof R & string)[], override?: T | undefined) => FunctionComponentElement<    {
 children?: ReactNode;
 }> | NonNullable<T> | null;
 

diff --git a/packages/layout/src/slots/contexts.ts b/packages/layout/src/slots/contexts.ts
@@ -1,7 +1,8 @@
 import { createNonNullableContextFactory, noop } from '@contember/react-utils'
 import { deprecate } from '@contember/utilities'
-import { ComponentType, ElementType, Fragment, ReactNode, RefObject, createElement, useCallback } from 'react'
-import { SlotComponentsRecords } from './types'
+import { Fragment, createElement, useCallback } from 'react'
+import { createSlotTargetComponent } from './createSlotTargetComponent'
+import { SlotTargetComponentsRecord } from './types'
 
 export type SlotsRefMap = Map<string, HTMLElement>
 export type RegisterSlotTarget = (id: string, name: string, ref: HTMLElement) => void;
@@ -10,7 +11,7 @@ export type UnregisterSlotTarget = (id: string, name: string) => void;
 export type ActiveSlotPortalsContextType = Set<string>;
 export const [ActiveSlotPortalsContext, useActiveSlotPortalsContext] = createNonNullableContextFactory<ActiveSlotPortalsContextType>('ActiveSlotPortalsContext', new Set())
 
-export function useHasActiveSlotsFactory<T extends SlotComponentsRecords<string>>(SlotTargets: T) {
+export function useHasActiveSlotsFactory<T extends SlotTargetComponentsRecord<string>>(SlotTargets: T) {
 	const activeSlotPortals = useActiveSlotPortalsContext()
 
 	return useCallback((...slots: ReadonlyArray<keyof T & string>) => {
@@ -22,7 +23,7 @@ export function useHasActiveSlotsFactory<T extends SlotComponentsRecords<string>
  * Creates a function that returns a list of slot targets if any of them are active.
  * @param SlotTargets - List of slot targets to create
  */
-export function useSlotTargetsFactory<R extends SlotComponentsRecords<string>>(SlotTargets: R) {
+export function useSlotTargetsFactory<R extends SlotTargetComponentsRecord<string>>(SlotTargets: R) {
 	const activeSlotPortals = useActiveSlotPortalsContext()
 
 	return useCallback(function createSlotTargets<T>(slots: ReadonlyArray<keyof R & string>, override?: T) {
@@ -32,7 +33,7 @@ export function useSlotTargetsFactory<R extends SlotComponentsRecords<string>>(S
 			} else {
 				return createElement(Fragment, {}, ...slots.map(slot => {
 					if (slot in SlotTargets) {
-						const Target = SlotTargets[slot] as ComponentType
+						const Target = SlotTargets[slot] as ReturnType<typeof createSlotTargetComponent<typeof slot>>
 
 						return createElement(Target, {
 							key: `multi-element:${slot}`,
@@ -51,7 +52,7 @@ export function useSlotTargetsFactory<R extends SlotComponentsRecords<string>>(S
  * Fallback for `useSlotTargetsFactory` for backwards compatibility.
  * @deprecated Use `useSlotTargetsFactory` instead
  */
-export function useTargetsIfActiveFactory<R extends SlotComponentsRecords<string>>(SlotTargets: R) {
+export function useTargetsIfActiveFactory<R extends SlotTargetComponentsRecord<string>>(SlotTargets: R) {
 	deprecate('1.3.0', true, '`useTargetsIfActiveFactory()`', '`useSlotTargetsFactory()`')
 	return useSlotTargetsFactory(SlotTargets)
 }

diff --git a/packages/layout/src/slots/types.ts b/packages/layout/src/slots/types.ts
@@ -1,8 +1,9 @@
 import { ComponentClassNameProps, PascalCase } from '@contember/utilities'
-import { CSSProperties, ComponentType, ElementType, ReactNode } from 'react'
+import { ComponentType, ElementType, ReactNode } from 'react'
 import { createSlotSourceComponent } from './createSlotSourceComponent'
 import { createSlotTargetComponent } from './createSlotTargetComponent'
 
+/** @deprecated No alternative since 1.4.0 */
 export type SlotComponentsRecords<K extends string> = Readonly<{
 	readonly [P in PascalCase<K>]: ComponentType
 }>