fix(layout): Update return type of useSlotTargetsFactory()

contember · Oct 27, 2023 · 26ae6dd · 26ae6dd
1 parent 856b76e
commit 26ae6dd
Show file tree

Hide file tree

Showing 5 changed files with 23 additions and 21 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/package.json b/package.json
@@ -59,7 +59,7 @@
 		"react-dom": "^18.2.0",
 		"tsx": "^3.12.7",
 		"typedoc": "^0.24.4",
-		"typescript": "^5.0.4",
+		"typescript": "^5.2.2",
 		"vite": "^4.3.2",
 		"vitest": "^0.30.1"
 	},

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
 }>

diff --git a/yarn.lock b/yarn.lock
@@ -15007,7 +15007,7 @@ __metadata:
     react-dom: ^18.2.0
     tsx: ^3.12.7
     typedoc: ^0.24.4
-    typescript: ^5.0.4
+    typescript: ^5.2.2
     vite: ^4.3.2
     vitest: ^0.30.1
   languageName: unknown
@@ -16292,13 +16292,13 @@ __metadata:
   languageName: node
   linkType: hard
 
-"typescript@npm:^5.0.4":
-  version: 5.0.4
-  resolution: "typescript@npm:5.0.4"
+"typescript@npm:^5.2.2":
+  version: 5.2.2
+  resolution: "typescript@npm:5.2.2"
   bin:
     tsc: bin/tsc
     tsserver: bin/tsserver
-  checksum: 82b94da3f4604a8946da585f7d6c3025fff8410779e5bde2855ab130d05e4fd08938b9e593b6ebed165bda6ad9292b230984f10952cf82f0a0ca07bbeaa08172
+  checksum: 7912821dac4d962d315c36800fe387cdc0a6298dba7ec171b350b4a6e988b51d7b8f051317786db1094bd7431d526b648aba7da8236607febb26cf5b871d2d3c
   languageName: node
   linkType: hard
 
@@ -16312,13 +16312,13 @@ __metadata:
   languageName: node
   linkType: hard
 
-"typescript@patch:typescript@^5.0.4#~builtin<compat/typescript>":
-  version: 5.0.4
-  resolution: "typescript@patch:typescript@npm%3A5.0.4#~builtin<compat/typescript>::version=5.0.4&hash=85af82"
+"typescript@patch:typescript@^5.2.2#~builtin<compat/typescript>":
+  version: 5.2.2
+  resolution: "typescript@patch:typescript@npm%3A5.2.2#~builtin<compat/typescript>::version=5.2.2&hash=85af82"
   bin:
     tsc: bin/tsc
     tsserver: bin/tsserver
-  checksum: bb309d320c59a26565fb3793dba550576ab861018ff3fd1b7fccabbe46ae4a35546bc45f342c0a0b6f265c801ccdf64ffd68f548f117ceb7f0eac4b805cd52a9
+  checksum: 07106822b4305de3f22835cbba949a2b35451cad50888759b6818421290ff95d522b38ef7919e70fb381c5fe9c1c643d7dea22c8b31652a717ddbd57b7f4d554
   languageName: node
   linkType: hard