@workday/canvas-kit-react-common - npm Package Compare versions

Comparing version 5.0.0-beta.1-next.5 to 5.0.0-beta.1-next.6

dist/commonjs/lib/utils/components.d.ts

@@ -5,6 +5,8 @@ import React from 'react';
 };
-export declare type PropsWithAs<P, T extends React.ElementType> = P & Omit<React.ComponentProps<T>, 'as' | 'state' | keyof P>;
-export declare type Component<T extends React.ElementType, P> = {
-    <TT extends React.ElementType>(props: PropsWithAs<P, TT> & {
-        as: TT;
+export declare type PropsWithAs<P, ElementType extends React.ElementType | undefined> = ElementType extends undefined ? P : P & Omit<React.ComponentProps<ElementType extends undefined ? 'section' : ElementType>, 'as' | 'state' | keyof P> & {
+    ref?: React.Ref<ElementType>;
+};
+export declare type ElementComponent<T extends React.ElementType | undefined, P> = {
+    <ElementType extends React.ElementType>(props: PropsWithAs<P, ElementType> & {
+        as: ElementType;
     }): JSX.Element;
@@ -14,15 +16,18 @@ (props: PropsWithAs<P, T>): JSX.Element;
 };
+export declare type Component<P> = {
+    (props: P): JSX.Element;
+    displayName?: string;
+};
 interface RefForwardingComponent<T, P = {}> {
     (props: React.PropsWithChildren<P> & {
         as?: React.ReactElement<any>;
-    }, ref: T extends null ? never : React.Ref<T extends keyof ElementTagNameMap ? ElementTagNameMap[T] : T>, as: T extends undefined ? never : T): React.ReactElement | null;
+    }, ref: T extends undefined ? never : React.Ref<T extends keyof ElementTagNameMap ? ElementTagNameMap[T] : T extends ElementComponent<infer U, any> ? U extends keyof ElementTagNameMap ? ElementTagNameMap[U] : U : T>, as: T extends undefined ? never : T): React.ReactElement | null;
 }
-declare type NullElement = () => null;
-export declare const createComponent: <T extends React.ElementType<any> = NullElement>(as?: T | undefined) => <P, SubComponents = {}>({ displayName, Component, subComponents, }: {
+export declare const createComponent: <T extends "symbol" | "object" | "s" | "big" | "link" | "small" | "sub" | "sup" | "a" | "abbr" | "address" | "area" | "article" | "aside" | "audio" | "b" | "base" | "bdi" | "bdo" | "blockquote" | "body" | "br" | "button" | "canvas" | "caption" | "cite" | "code" | "col" | "colgroup" | "data" | "datalist" | "dd" | "del" | "details" | "dfn" | "dialog" | "div" | "dl" | "dt" | "em" | "embed" | "fieldset" | "figcaption" | "figure" | "footer" | "form" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "head" | "header" | "hgroup" | "hr" | "html" | "i" | "iframe" | "img" | "input" | "ins" | "kbd" | "keygen" | "label" | "legend" | "li" | "main" | "map" | "mark" | "menu" | "menuitem" | "meta" | "meter" | "nav" | "noindex" | "noscript" | "ol" | "optgroup" | "option" | "output" | "p" | "param" | "picture" | "pre" | "progress" | "q" | "rp" | "rt" | "ruby" | "samp" | "script" | "section" | "select" | "source" | "span" | "strong" | "style" | "summary" | "table" | "template" | "tbody" | "td" | "textarea" | "tfoot" | "th" | "thead" | "time" | "title" | "tr" | "track" | "u" | "ul" | "var" | "video" | "wbr" | "webview" | "svg" | "animate" | "animateMotion" | "animateTransform" | "circle" | "clipPath" | "defs" | "desc" | "ellipse" | "feBlend" | "feColorMatrix" | "feComponentTransfer" | "feComposite" | "feConvolveMatrix" | "feDiffuseLighting" | "feDisplacementMap" | "feDistantLight" | "feDropShadow" | "feFlood" | "feFuncA" | "feFuncB" | "feFuncG" | "feFuncR" | "feGaussianBlur" | "feImage" | "feMerge" | "feMergeNode" | "feMorphology" | "feOffset" | "fePointLight" | "feSpecularLighting" | "feSpotLight" | "feTile" | "feTurbulence" | "filter" | "foreignObject" | "g" | "image" | "line" | "linearGradient" | "marker" | "mask" | "metadata" | "mpath" | "path" | "pattern" | "polygon" | "polyline" | "radialGradient" | "rect" | "stop" | "switch" | "text" | "textPath" | "tspan" | "use" | "view" | React.ComponentClass<any, any> | React.FunctionComponent<any> | undefined = undefined>(as?: T | undefined) => <P, SubComponents = {}>({ displayName, Component, subComponents, }: {
     displayName?: string | undefined;
     Component: RefForwardingComponent<T, P>;
     subComponents?: SubComponents | undefined;
-}) => Component<T, P> & SubComponents;
-export declare function useForkRef<T>(ref1: React.Ref<T>, ref2: React.Ref<T>): (instance: T) => void;
-export declare function useLocalRef<T>(ref: React.Ref<T>): {
+}) => (T extends undefined ? Component<P> : ElementComponent<T, P>) & SubComponents;
+export declare function useForkRef<T>(ref1?: React.Ref<T>, ref2?: React.Ref<T>): (instance: T) => void;
+export declare function useLocalRef<T>(ref?: React.Ref<T>): {
     localRef: React.RefObject<T>;
@@ -33,3 +38,7 @@ elementRef: (instance: T) => void;
 export declare function useModelContext<T>(context: React.Context<T>, model?: T): T;
+export declare function composeHooks<M, P extends {}, O1 extends {}, O2 extends {}>(hook1: (model: M, props: P) => O1, hook2: (model: M, props: P) => O2): (model: M, props: P) => P & O1 & O2;
+export declare function composeHooks<M, P extends {}, O1 extends {}, O2 extends {}, O3 extends {}>(hook1: (model: M, props: P) => O1, hook2: (model: M, props: P) => O2, hook3: (model: M, props: P) => O3): (model: M, props: P) => P & O1 & O2 & O3;
+export declare function composeHooks<M, P extends {}, O1 extends {}, O2 extends {}, O3 extends {}, O4 extends {}>(hook1: (model: M, props: P) => O1, hook2: (model: M, props: P) => O2, hook3: (model: M, props: P) => O3, hook4: (model: M, props: P) => O4): (model: M, props: P) => P & O1 & O2 & O3 & O4;
+export declare function composeHooks<M, P extends {}, O1 extends {}, O2 extends {}, O3 extends {}, O4 extends {}, O5 extends {}>(hook1: (model: M, props: P) => O1, hook2: (model: M, props: P) => O2, hook3: (model: M, props: P) => O3, hook4: (model: M, props: P) => O4, hook5: (model: M, props: P) => O5): (model: M, props: P) => P & O1 & O2 & O3 & O4 & O5;
 export {};
 //# sourceMappingURL=components.d.ts.map

dist/commonjs/lib/utils/components.js

@@ -61,1 +61,13 @@ "use strict";
 exports.useModelContext = useModelContext;
+function composeHooks() {
+    var hooks = [];
+    for (var _i = 0; _i < arguments.length; _i++) {
+        hooks[_i] = arguments[_i];
+    }
+    return function (model, props) {
+        return hooks.reverse().reduce(function (props, hook) {
+            return hook(model, props);
+        }, props);
+    };
+}
+exports.composeHooks = composeHooks;

dist/commonjs/lib/utils/index.d.ts

@@ -5,4 +5,5 @@ export * from './colorUtils';
 export * from './mergeCallback';
-export * from './mergeCallbacks';
+export * from './mergeProps';
 export * from './useUniqueId';
+export * from './assert';
 export * from './useMount';
@@ -9,0 +10,0 @@ export * from './components';

dist/commonjs/lib/utils/index.js

@@ -10,6 +10,7 @@ "use strict";
 __export(require("./mergeCallback"));
-__export(require("./mergeCallbacks"));
+__export(require("./mergeProps"));
 __export(require("./useUniqueId"));
+__export(require("./assert"));
 __export(require("./useMount"));
 __export(require("./components"));
 __export(require("./models"));

dist/commonjs/lib/utils/models.d.ts

@@ -5,7 +5,12 @@ export declare type Model<State, Events> = {
 };
-declare type EventMap<TEvents extends Record<string, (data?: object) => void>, TGuardMap extends Record<string, keyof TEvents>, TCallbackMap extends Record<string, keyof TEvents>> = {
-    guards?: TGuardMap;
-    callbacks?: TCallbackMap;
+declare type IEvent = {
+    [key: string]: {
+        bivarianceHack(data?: object): void;
+    }['bivarianceHack'];
 };
-declare type ToGuardConfig<TState extends Record<string, any>, TEvents extends Record<string, (data?: object) => void>, TGuardMap extends Record<string, keyof TEvents>> = {
+declare type EventMap<TEvents extends IEvent, TGuardMap extends Record<string, keyof TEvents>, TCallbackMap extends Record<string, keyof TEvents>> = {
+    guards: TGuardMap;
+    callbacks: TCallbackMap;
+};
+declare type ToGuardConfig<TState extends Record<string, any>, TEvents extends IEvent, TGuardMap extends Record<string, keyof TEvents>> = {
     [K in keyof TGuardMap]: (event: {
@@ -16,3 +21,3 @@ data: Parameters<TEvents[TGuardMap[K]]>[0];
 };
-declare type ToCallbackConfig<TState extends Record<string, any>, TEvents extends Record<string, (data?: object) => void>, TGuardMap extends Record<string, keyof TEvents>> = {
+declare type ToCallbackConfig<TState extends Record<string, any>, TEvents extends IEvent, TGuardMap extends Record<string, keyof TEvents>> = {
     [K in keyof TGuardMap]: (event: {
@@ -23,6 +28,6 @@ data: Parameters<TEvents[TGuardMap[K]]>[0];
 };
-export declare type ToModelConfig<TState extends Record<string, any>, TEvents extends Record<string, (data?: object) => void>, TEventMap extends EventMap<TEvents, any, any>> = ToGuardConfig<TState, TEvents, TEventMap['guards']> & ToCallbackConfig<TState, TEvents, TEventMap['callbacks']>;
-export declare const createEventMap: <TEvents extends Record<string, (data?: object | undefined) => void>>() => <TGuardMap extends Record<string, keyof TEvents>, TCallbackMap extends Record<string, keyof TEvents>>(config: EventMap<TEvents, TGuardMap, TCallbackMap>) => EventMap<TEvents, TGuardMap, TCallbackMap>;
-export declare const useEventMap: <TEvents extends Record<string, (data?: object | undefined) => void>, TState extends Record<string, any>, TGuardMap extends Record<string, keyof TEvents>, TCallbackMap extends Record<string, keyof TEvents>, TConfig extends Partial<ToGuardConfig<TState, TEvents, TGuardMap> & ToCallbackConfig<TState, TEvents, TCallbackMap>> | undefined>(eventMap: EventMap<TEvents, TGuardMap, TCallbackMap>, state: TState, config: TConfig, events: TEvents) => TEvents;
+export declare type ToModelConfig<TState extends Record<string, any>, TEvents extends IEvent, TEventMap extends EventMap<TEvents, any, any>> = ToGuardConfig<TState, TEvents, TEventMap['guards']> & ToCallbackConfig<TState, TEvents, TEventMap['callbacks']>;
+export declare const createEventMap: <TEvents extends IEvent>() => <TGuardMap extends Record<string, keyof TEvents>, TCallbackMap extends Record<string, keyof TEvents>>(config: Partial<EventMap<TEvents, TGuardMap, TCallbackMap>>) => EventMap<TEvents, TGuardMap, TCallbackMap>;
+export declare const useEventMap: <TEvents extends IEvent, TState extends Record<string, any>, TGuardMap extends Record<string, keyof TEvents>, TCallbackMap extends Record<string, keyof TEvents>, TConfig extends Partial<ToModelConfig<TState, TEvents, EventMap<TEvents, TGuardMap, TCallbackMap>>>>(eventMap: EventMap<TEvents, TGuardMap, TCallbackMap>, state: TState, config: TConfig, events: TEvents) => TEvents;
 export {};
 //# sourceMappingURL=models.d.ts.map

dist/es6/lib/utils/components.d.ts

@@ -5,6 +5,8 @@ import React from 'react';
 };
-export declare type PropsWithAs<P, T extends React.ElementType> = P & Omit<React.ComponentProps<T>, 'as' | 'state' | keyof P>;
-export declare type Component<T extends React.ElementType, P> = {
-    <TT extends React.ElementType>(props: PropsWithAs<P, TT> & {
-        as: TT;
+export declare type PropsWithAs<P, ElementType extends React.ElementType | undefined> = ElementType extends undefined ? P : P & Omit<React.ComponentProps<ElementType extends undefined ? 'section' : ElementType>, 'as' | 'state' | keyof P> & {
+    ref?: React.Ref<ElementType>;
+};
+export declare type ElementComponent<T extends React.ElementType | undefined, P> = {
+    <ElementType extends React.ElementType>(props: PropsWithAs<P, ElementType> & {
+        as: ElementType;
     }): JSX.Element;
@@ -14,15 +16,18 @@ (props: PropsWithAs<P, T>): JSX.Element;
 };
+export declare type Component<P> = {
+    (props: P): JSX.Element;
+    displayName?: string;
+};
 interface RefForwardingComponent<T, P = {}> {
     (props: React.PropsWithChildren<P> & {
         as?: React.ReactElement<any>;
-    }, ref: T extends null ? never : React.Ref<T extends keyof ElementTagNameMap ? ElementTagNameMap[T] : T>, as: T extends undefined ? never : T): React.ReactElement | null;
+    }, ref: T extends undefined ? never : React.Ref<T extends keyof ElementTagNameMap ? ElementTagNameMap[T] : T extends ElementComponent<infer U, any> ? U extends keyof ElementTagNameMap ? ElementTagNameMap[U] : U : T>, as: T extends undefined ? never : T): React.ReactElement | null;
 }
-declare type NullElement = () => null;
-export declare const createComponent: <T extends React.ElementType<any> = NullElement>(as?: T | undefined) => <P, SubComponents = {}>({ displayName, Component, subComponents, }: {
+export declare const createComponent: <T extends "symbol" | "object" | "meter" | "textarea" | "button" | "style" | "progress" | "text" | "ruby" | "table" | "small" | "sub" | "circle" | "embed" | "pre" | "caption" | "menu" | "menuitem" | "clipPath" | "filter" | "mask" | "marker" | "big" | "link" | "sup" | "a" | "abbr" | "address" | "area" | "article" | "aside" | "audio" | "b" | "base" | "bdi" | "bdo" | "blockquote" | "body" | "br" | "canvas" | "cite" | "code" | "col" | "colgroup" | "data" | "datalist" | "dd" | "del" | "details" | "dfn" | "dialog" | "div" | "dl" | "dt" | "em" | "fieldset" | "figcaption" | "figure" | "footer" | "form" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "head" | "header" | "hgroup" | "hr" | "html" | "i" | "iframe" | "img" | "input" | "ins" | "kbd" | "keygen" | "label" | "legend" | "li" | "main" | "map" | "mark" | "meta" | "nav" | "noindex" | "noscript" | "ol" | "optgroup" | "option" | "output" | "p" | "param" | "picture" | "q" | "rp" | "rt" | "s" | "samp" | "script" | "section" | "select" | "source" | "span" | "strong" | "summary" | "template" | "tbody" | "td" | "tfoot" | "th" | "thead" | "time" | "title" | "tr" | "track" | "u" | "ul" | "var" | "video" | "wbr" | "webview" | "svg" | "animate" | "animateMotion" | "animateTransform" | "defs" | "desc" | "ellipse" | "feBlend" | "feColorMatrix" | "feComponentTransfer" | "feComposite" | "feConvolveMatrix" | "feDiffuseLighting" | "feDisplacementMap" | "feDistantLight" | "feDropShadow" | "feFlood" | "feFuncA" | "feFuncB" | "feFuncG" | "feFuncR" | "feGaussianBlur" | "feImage" | "feMerge" | "feMergeNode" | "feMorphology" | "feOffset" | "fePointLight" | "feSpecularLighting" | "feSpotLight" | "feTile" | "feTurbulence" | "foreignObject" | "g" | "image" | "line" | "linearGradient" | "metadata" | "mpath" | "path" | "pattern" | "polygon" | "polyline" | "radialGradient" | "rect" | "stop" | "switch" | "textPath" | "tspan" | "use" | "view" | React.ComponentClass<any, any> | React.FunctionComponent<any> | undefined = undefined>(as?: T | undefined) => <P, SubComponents = {}>({ displayName, Component, subComponents, }: {
     displayName?: string | undefined;
     Component: RefForwardingComponent<T, P>;
     subComponents?: SubComponents | undefined;
-}) => Component<T, P> & SubComponents;
-export declare function useForkRef<T>(ref1: React.Ref<T>, ref2: React.Ref<T>): (instance: T) => void;
-export declare function useLocalRef<T>(ref: React.Ref<T>): {
+}) => (T extends undefined ? Component<P> : ElementComponent<T, P>) & SubComponents;
+export declare function useForkRef<T>(ref1?: React.Ref<T>, ref2?: React.Ref<T>): (instance: T) => void;
+export declare function useLocalRef<T>(ref?: React.Ref<T>): {
     localRef: React.RefObject<T>;
@@ -33,3 +38,7 @@ elementRef: (instance: T) => void;
 export declare function useModelContext<T>(context: React.Context<T>, model?: T): T;
+export declare function composeHooks<M, P extends {}, O1 extends {}, O2 extends {}>(hook1: (model: M, props: P) => O1, hook2: (model: M, props: P) => O2): (model: M, props: P) => P & O1 & O2;
+export declare function composeHooks<M, P extends {}, O1 extends {}, O2 extends {}, O3 extends {}>(hook1: (model: M, props: P) => O1, hook2: (model: M, props: P) => O2, hook3: (model: M, props: P) => O3): (model: M, props: P) => P & O1 & O2 & O3;
+export declare function composeHooks<M, P extends {}, O1 extends {}, O2 extends {}, O3 extends {}, O4 extends {}>(hook1: (model: M, props: P) => O1, hook2: (model: M, props: P) => O2, hook3: (model: M, props: P) => O3, hook4: (model: M, props: P) => O4): (model: M, props: P) => P & O1 & O2 & O3 & O4;
+export declare function composeHooks<M, P extends {}, O1 extends {}, O2 extends {}, O3 extends {}, O4 extends {}, O5 extends {}>(hook1: (model: M, props: P) => O1, hook2: (model: M, props: P) => O2, hook3: (model: M, props: P) => O3, hook4: (model: M, props: P) => O4, hook5: (model: M, props: P) => O5): (model: M, props: P) => P & O1 & O2 & O3 & O4 & O5;
 export {};
 //# sourceMappingURL=components.d.ts.map

dist/es6/lib/utils/components.js

@@ -52,1 +52,12 @@ var __rest = (this && this.__rest) || function (s, e) {
 }
+export function composeHooks() {
+    var hooks = [];
+    for (var _i = 0; _i < arguments.length; _i++) {
+        hooks[_i] = arguments[_i];
+    }
+    return function (model, props) {
+        return hooks.reverse().reduce(function (props, hook) {
+            return hook(model, props);
+        }, props);
+    };
+}

dist/es6/lib/utils/index.d.ts

@@ -5,4 +5,5 @@ export * from './colorUtils';
 export * from './mergeCallback';
-export * from './mergeCallbacks';
+export * from './mergeProps';
 export * from './useUniqueId';
+export * from './assert';
 export * from './useMount';
@@ -9,0 +10,0 @@ export * from './components';

dist/es6/lib/utils/index.js

@@ -5,6 +5,7 @@ export * from './colorUtils';
 export * from './mergeCallback';
-export * from './mergeCallbacks';
+export * from './mergeProps';
 export * from './useUniqueId';
+export * from './assert';
 export * from './useMount';
 export * from './components';
 export * from './models';

dist/es6/lib/utils/models.d.ts

@@ -5,7 +5,12 @@ export declare type Model<State, Events> = {
 };
-declare type EventMap<TEvents extends Record<string, (data?: object) => void>, TGuardMap extends Record<string, keyof TEvents>, TCallbackMap extends Record<string, keyof TEvents>> = {
-    guards?: TGuardMap;
-    callbacks?: TCallbackMap;
+declare type IEvent = {
+    [key: string]: {
+        bivarianceHack(data?: object): void;
+    }['bivarianceHack'];
 };
-declare type ToGuardConfig<TState extends Record<string, any>, TEvents extends Record<string, (data?: object) => void>, TGuardMap extends Record<string, keyof TEvents>> = {
+declare type EventMap<TEvents extends IEvent, TGuardMap extends Record<string, keyof TEvents>, TCallbackMap extends Record<string, keyof TEvents>> = {
+    guards: TGuardMap;
+    callbacks: TCallbackMap;
+};
+declare type ToGuardConfig<TState extends Record<string, any>, TEvents extends IEvent, TGuardMap extends Record<string, keyof TEvents>> = {
     [K in keyof TGuardMap]: (event: {
@@ -16,3 +21,3 @@ data: Parameters<TEvents[TGuardMap[K]]>[0];
 };
-declare type ToCallbackConfig<TState extends Record<string, any>, TEvents extends Record<string, (data?: object) => void>, TGuardMap extends Record<string, keyof TEvents>> = {
+declare type ToCallbackConfig<TState extends Record<string, any>, TEvents extends IEvent, TGuardMap extends Record<string, keyof TEvents>> = {
     [K in keyof TGuardMap]: (event: {
@@ -23,6 +28,6 @@ data: Parameters<TEvents[TGuardMap[K]]>[0];
 };
-export declare type ToModelConfig<TState extends Record<string, any>, TEvents extends Record<string, (data?: object) => void>, TEventMap extends EventMap<TEvents, any, any>> = ToGuardConfig<TState, TEvents, TEventMap['guards']> & ToCallbackConfig<TState, TEvents, TEventMap['callbacks']>;
-export declare const createEventMap: <TEvents extends Record<string, (data?: object | undefined) => void>>() => <TGuardMap extends Record<string, keyof TEvents>, TCallbackMap extends Record<string, keyof TEvents>>(config: EventMap<TEvents, TGuardMap, TCallbackMap>) => EventMap<TEvents, TGuardMap, TCallbackMap>;
-export declare const useEventMap: <TEvents extends Record<string, (data?: object | undefined) => void>, TState extends Record<string, any>, TGuardMap extends Record<string, keyof TEvents>, TCallbackMap extends Record<string, keyof TEvents>, TConfig extends Partial<ToGuardConfig<TState, TEvents, TGuardMap> & ToCallbackConfig<TState, TEvents, TCallbackMap>> | undefined>(eventMap: EventMap<TEvents, TGuardMap, TCallbackMap>, state: TState, config: TConfig, events: TEvents) => TEvents;
+export declare type ToModelConfig<TState extends Record<string, any>, TEvents extends IEvent, TEventMap extends EventMap<TEvents, any, any>> = ToGuardConfig<TState, TEvents, TEventMap['guards']> & ToCallbackConfig<TState, TEvents, TEventMap['callbacks']>;
+export declare const createEventMap: <TEvents extends IEvent>() => <TGuardMap extends Record<string, keyof TEvents>, TCallbackMap extends Record<string, keyof TEvents>>(config: Partial<EventMap<TEvents, TGuardMap, TCallbackMap>>) => EventMap<TEvents, TGuardMap, TCallbackMap>;
+export declare const useEventMap: <TEvents extends IEvent, TState extends Record<string, any>, TGuardMap extends Record<string, keyof TEvents>, TCallbackMap extends Record<string, keyof TEvents>, TConfig extends Partial<ToModelConfig<TState, TEvents, EventMap<TEvents, TGuardMap, TCallbackMap>>>>(eventMap: EventMap<TEvents, TGuardMap, TCallbackMap>, state: TState, config: TConfig, events: TEvents) => TEvents;
 export {};
 //# sourceMappingURL=models.d.ts.map

lib/utils/components.ts

@@ -14,6 +14,22 @@ import React from 'react';
  * @template P Additional props
- * @template T React component or string element
+ * @template ElementType React component or string element
  */
-export type PropsWithAs<P, T extends React.ElementType> = P &
-  Omit<React.ComponentProps<T>, 'as' | 'state' | keyof P>;
+export type PropsWithAs<
+  P,
+  ElementType extends React.ElementType | undefined
+> = ElementType extends undefined
+  ? P
+  : P &
+      Omit<
+        React.ComponentProps<ElementType extends undefined ? 'section' : ElementType>,
+        'as' | 'state' | keyof P
+      > & {
+        /**
+         * Optional ref. If the component represents and element, this will ref will be a reference to
+         * the real DOM element of the component. If `as` is set to an element, it will be that element.
+         * If `as` is a component, the reference will be to that component (or element if the component
+         * uses `React.forwardRef`).
+         */
+        ref?: React.Ref<ElementType>;
+      };
 
@@ -24,13 +40,36 @@ /**
  */
-export type Component<T extends React.ElementType, P> = {
-  <TT extends React.ElementType>(props: PropsWithAs<P, TT> & {as: TT}): JSX.Element;
+export type ElementComponent<T extends React.ElementType | undefined, P> = {
+  <ElementType extends React.ElementType>(
+    props: PropsWithAs<P, ElementType> & {
+      /**
+       * Optional override of the default element used by the component. Any valid tag or Component.
+       * If you provided a Component, this component should forward the ref using `React.forwardRef`
+       * and spread extra props to a root element.
+       */
+      as: ElementType;
+    }
+  ): JSX.Element;
   (props: PropsWithAs<P, T>): JSX.Element;
   displayName?: string;
 };
+
+export type Component<P> = {
+  (props: P): JSX.Element;
+  displayName?: string;
+};
+
 interface RefForwardingComponent<T, P = {}> {
   (
     props: React.PropsWithChildren<P> & {as?: React.ReactElement<any>},
-    ref: T extends null
-      ? never
-      : React.Ref<T extends keyof ElementTagNameMap ? ElementTagNameMap[T] : T>,
+    ref: T extends undefined // test if T was even passed in
+      ? never // T not passed in, we'll set the ref to `never`
+      : React.Ref<
+          T extends keyof ElementTagNameMap // test if T is an element string like 'button' or 'div'
+            ? ElementTagNameMap[T] // if yes, the ref should be the element interface. `'button' => HTMLButtonElement`
+            : T extends ElementComponent<infer U, any> // if no, check if we can infer the the element type from a `Component` interface
+            ? U extends keyof ElementTagNameMap // test inferred U to see if it extends an element string
+              ? ElementTagNameMap[U] // if yes, use the inferred U and convert to an element interface. `'button' => HTMLButtonElement`
+              : U // if no, fall back to inferred U
+            : T // if no, fall back to T
+        >,
     as: T extends undefined ? never : T
@@ -41,8 +80,2 @@ ): React.ReactElement | null;
 /**
- * If no element is passed to `createComponent`, a `NulLElement` will be returned indicating there
- * is no element type.
- */
-type NullElement = () => null;
-
-/**
  * Factory function that creates components to be exported. It enforces React ref forwarding, `as`
@@ -53,3 +86,3 @@ * prop, display name, and sub-components, and handles proper typing without much boiler plate. The
  */
-export const createComponent = <T extends React.ElementType = NullElement>(as?: T) => <
+export const createComponent = <T extends React.ElementType | undefined = undefined>(as?: T) => <
   P,
@@ -79,4 +112,4 @@ SubComponents = {}
   subComponents?: SubComponents;
-}) => {
-  const ReturnedComponent = (React.forwardRef<T, P & {as?: React.ElementType}>(
+}): (T extends undefined ? Component<P> : ElementComponent<T, P>) & SubComponents => {
+  const ReturnedComponent = React.forwardRef<T, P & {as?: React.ElementType}>(
     ({as: asOverride, ...props}, ref) => {
@@ -90,3 +123,3 @@ return Component(
     }
-  ) as any) as Component<T, P> & SubComponents;
+  ) as any;
 
@@ -102,3 +135,3 @@ Object.keys(subComponents || {}).forEach((key: any) => {
 
-function setRef<T>(ref: React.Ref<T>, value: T): void {
+function setRef<T>(ref: React.Ref<T> | undefined, value: T): void {
   if (ref) {
@@ -138,3 +171,3 @@ if (typeof ref === 'function') {
  */
-export function useForkRef<T>(ref1: React.Ref<T>, ref2: React.Ref<T>): (instance: T) => void {
+export function useForkRef<T>(ref1?: React.Ref<T>, ref2?: React.Ref<T>): (instance: T) => void {
   return (value: T) => {
@@ -160,3 +193,3 @@ setRef(ref1, value);
  */
-export function useLocalRef<T>(ref: React.Ref<T>) {
+export function useLocalRef<T>(ref?: React.Ref<T>) {
   const localRef = React.useRef<T>(null);
@@ -205,1 +238,60 @@ const elementRef = useForkRef(ref, localRef);
 }
+
+/**
+ * Compose many hooks together. Assumes hooks are using `mergeProps`. Returns a function that will
+ * receive a model and return props to be applied to a component. These props should always be
+ * applied last on the Component. The props will override as follows: rightmost hook props override
+ * leftmost hook props which are overridden by props passed to the composeHooks function.
+ * @example
+ * const MyComponent = ({ children, model, ...elemProps }) => {
+ *   const props = composeHooks(useHook1, useHook2)(model, elemProps)
+ *
+ *   return <div id="foo" {...props}>{children}</div>
+ * }
+ */
+export function composeHooks<M, P extends {}, O1 extends {}, O2 extends {}>(
+  hook1: (model: M, props: P) => O1,
+  hook2: (model: M, props: P) => O2
+): (model: M, props: P) => P & O1 & O2;
+export function composeHooks<M, P extends {}, O1 extends {}, O2 extends {}, O3 extends {}>(
+  hook1: (model: M, props: P) => O1,
+  hook2: (model: M, props: P) => O2,
+  hook3: (model: M, props: P) => O3
+): (model: M, props: P) => P & O1 & O2 & O3;
+export function composeHooks<
+  M,
+  P extends {},
+  O1 extends {},
+  O2 extends {},
+  O3 extends {},
+  O4 extends {}
+>(
+  hook1: (model: M, props: P) => O1,
+  hook2: (model: M, props: P) => O2,
+  hook3: (model: M, props: P) => O3,
+  hook4: (model: M, props: P) => O4
+): (model: M, props: P) => P & O1 & O2 & O3 & O4;
+export function composeHooks<
+  M,
+  P extends {},
+  O1 extends {},
+  O2 extends {},
+  O3 extends {},
+  O4 extends {},
+  O5 extends {}
+>(
+  hook1: (model: M, props: P) => O1,
+  hook2: (model: M, props: P) => O2,
+  hook3: (model: M, props: P) => O3,
+  hook4: (model: M, props: P) => O4,
+  hook5: (model: M, props: P) => O5
+): (model: M, props: P) => P & O1 & O2 & O3 & O4 & O5;
+export function composeHooks<M, P extends {}, O extends {}>(
+  ...hooks: ((model: M, props: P) => O)[]
+): (model: M, props: P) => O {
+  return (model: M, props: P) => {
+    return hooks.reverse().reduce((props: any, hook) => {
+      return hook(model, props);
+    }, props);
+  };
+}

lib/utils/index.ts

@@ -5,6 +5,7 @@ export * from './colorUtils';
 export * from './mergeCallback';
-export * from './mergeCallbacks';
+export * from './mergeProps';
 export * from './useUniqueId';
+export * from './assert';
 export * from './useMount';
 export * from './components';
 export * from './models';

lib/utils/models.ts

@@ -8,2 +8,5 @@ import React from 'react';
 
+// bivarianceHack is used for force bivariance of the function constraint. Without this, it will fail with `strictFunctionTypes`
+type IEvent = {[key: string]: {bivarianceHack(data?: object): void}['bivarianceHack']};
+
 /**
@@ -16,8 +19,8 @@ * A mapping of guards and callbacks and what events they relate to.
 type EventMap<
-  TEvents extends Record<string, (data?: object) => void>,
+  TEvents extends IEvent,
   TGuardMap extends Record<string, keyof TEvents>,
   TCallbackMap extends Record<string, keyof TEvents>
 > = {
-  guards?: TGuardMap;
-  callbacks?: TCallbackMap;
+  guards: TGuardMap;
+  callbacks: TCallbackMap;
 };
@@ -27,3 +30,3 @@
   TState extends Record<string, any>,
-  TEvents extends Record<string, (data?: object) => void>,
+  TEvents extends IEvent,
   TGuardMap extends Record<string, keyof TEvents>
@@ -39,3 +42,3 @@ > = {
   TState extends Record<string, any>,
-  TEvents extends Record<string, (data?: object) => void>,
+  TEvents extends IEvent,
   TGuardMap extends Record<string, keyof TEvents>
@@ -61,3 +64,3 @@ > = {
   TState extends Record<string, any>,
-  TEvents extends Record<string, (data?: object) => void>,
+  TEvents extends IEvent,
   TEventMap extends EventMap<TEvents, any, any>
@@ -92,9 +95,10 @@ > = ToGuardConfig<TState, TEvents, TEventMap['guards']> &
 
-export const createEventMap = <TEvents extends Record<string, (data?: object) => void>>() => <
+export const createEventMap = <TEvents extends IEvent>() => <
   TGuardMap extends Record<string, keyof TEvents>,
   TCallbackMap extends Record<string, keyof TEvents>
 >(
-  config: EventMap<TEvents, TGuardMap, TCallbackMap>
-) => {
-  return config;
+  config: Partial<EventMap<TEvents, TGuardMap, TCallbackMap>>
+): EventMap<TEvents, TGuardMap, TCallbackMap> => {
+  // Instruct Typescript that all valid guards and callbacks exist
+  return config as EventMap<TEvents, TGuardMap, TCallbackMap>;
 };
@@ -126,3 +130,3 @@
 export const useEventMap = <
-  TEvents extends Record<string, (data?: object) => void>,
+  TEvents extends IEvent,
   TState extends Record<string, any>,
@@ -129,0 +133,0 @@ TGuardMap extends Record<string, keyof TEvents>,

package.json

 {
   "name": "@workday/canvas-kit-react-common",
-  "version": "5.0.0-beta.1-next.5+0395dc34",
+  "version": "5.0.0-beta.1-next.6+33758d4b",
   "description": "A module of common utilities shared across canvas components",
@@ -51,4 +51,4 @@ "author": "Workday, Inc. (https://www.workday.com)",
   "devDependencies": {
-    "@workday/canvas-kit-react-button": "^5.0.0-beta.1-next.5+0395dc34",
-    "@workday/canvas-kit-react-card": "^5.0.0-beta.1-next.5+0395dc34",
+    "@workday/canvas-kit-react-button": "^5.0.0-beta.1-next.6+33758d4b",
+    "@workday/canvas-kit-react-card": "^5.0.0-beta.1-next.6+33758d4b",
     "@workday/canvas-system-icons-web": "1.0.41"
@@ -60,3 +60,3 @@ },
     "@workday/canvas-colors-web": "^2.0.0",
-    "@workday/canvas-kit-react-core": "^5.0.0-beta.1-next.5+0395dc34",
+    "@workday/canvas-kit-react-core": "^5.0.0-beta.1-next.6+33758d4b",
     "chroma-js": "^2.1.0",
@@ -68,3 +68,3 @@ "emotion-theming": "^10.0.10",
   },
-  "gitHead": "0395dc34321b165a081a1dd995cff523ecfac176"
+  "gitHead": "33758d4bb72efc700fc26a9e931aad381c98d444"
 }

ts3.5/dist/commonjs/lib/utils/components.d.ts

@@ -5,6 +5,8 @@ import React from 'react';
 };
-export declare type PropsWithAs<P, T extends React.ElementType> = P & Pick<React.ComponentProps<T>, Exclude<keyof React.ComponentProps<T>, 'as' | 'state' | keyof P>>;
-export declare type Component<T extends React.ElementType, P> = {
-    <TT extends React.ElementType>(props: PropsWithAs<P, TT> & {
-        as: TT;
+export declare type PropsWithAs<P, ElementType extends React.ElementType | undefined> = ElementType extends undefined ? P : P & Pick<React.ComponentProps<ElementType extends undefined ? 'section' : ElementType>, Exclude<keyof React.ComponentProps<ElementType extends undefined ? 'section' : ElementType>, 'as' | 'state' | keyof P>> & {
+    ref?: React.Ref<ElementType>;
+};
+export declare type ElementComponent<T extends React.ElementType | undefined, P> = {
+    <ElementType extends React.ElementType>(props: PropsWithAs<P, ElementType> & {
+        as: ElementType;
     }): JSX.Element;
@@ -14,15 +16,18 @@ (props: PropsWithAs<P, T>): JSX.Element;
 };
+export declare type Component<P> = {
+    (props: P): JSX.Element;
+    displayName?: string;
+};
 interface RefForwardingComponent<T, P = {}> {
     (props: React.PropsWithChildren<P> & {
         as?: React.ReactElement<any>;
-    }, ref: T extends null ? never : React.Ref<T extends keyof ElementTagNameMap ? ElementTagNameMap[T] : T>, as: T extends undefined ? never : T): React.ReactElement | null;
+    }, ref: T extends undefined ? never : React.Ref<T extends keyof ElementTagNameMap ? ElementTagNameMap[T] : T extends ElementComponent<infer U, any> ? U extends keyof ElementTagNameMap ? ElementTagNameMap[U] : U : T>, as: T extends undefined ? never : T): React.ReactElement | null;
 }
-declare type NullElement = () => null;
-export declare const createComponent: <T extends React.ElementType<any> = NullElement>(as?: T | undefined) => <P, SubComponents = {}>({ displayName, Component, subComponents, }: {
+export declare const createComponent: <T extends "symbol" | "object" | "s" | "big" | "link" | "small" | "sub" | "sup" | "a" | "abbr" | "address" | "area" | "article" | "aside" | "audio" | "b" | "base" | "bdi" | "bdo" | "blockquote" | "body" | "br" | "button" | "canvas" | "caption" | "cite" | "code" | "col" | "colgroup" | "data" | "datalist" | "dd" | "del" | "details" | "dfn" | "dialog" | "div" | "dl" | "dt" | "em" | "embed" | "fieldset" | "figcaption" | "figure" | "footer" | "form" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "head" | "header" | "hgroup" | "hr" | "html" | "i" | "iframe" | "img" | "input" | "ins" | "kbd" | "keygen" | "label" | "legend" | "li" | "main" | "map" | "mark" | "menu" | "menuitem" | "meta" | "meter" | "nav" | "noindex" | "noscript" | "ol" | "optgroup" | "option" | "output" | "p" | "param" | "picture" | "pre" | "progress" | "q" | "rp" | "rt" | "ruby" | "samp" | "script" | "section" | "select" | "source" | "span" | "strong" | "style" | "summary" | "table" | "template" | "tbody" | "td" | "textarea" | "tfoot" | "th" | "thead" | "time" | "title" | "tr" | "track" | "u" | "ul" | "var" | "video" | "wbr" | "webview" | "svg" | "animate" | "animateMotion" | "animateTransform" | "circle" | "clipPath" | "defs" | "desc" | "ellipse" | "feBlend" | "feColorMatrix" | "feComponentTransfer" | "feComposite" | "feConvolveMatrix" | "feDiffuseLighting" | "feDisplacementMap" | "feDistantLight" | "feDropShadow" | "feFlood" | "feFuncA" | "feFuncB" | "feFuncG" | "feFuncR" | "feGaussianBlur" | "feImage" | "feMerge" | "feMergeNode" | "feMorphology" | "feOffset" | "fePointLight" | "feSpecularLighting" | "feSpotLight" | "feTile" | "feTurbulence" | "filter" | "foreignObject" | "g" | "image" | "line" | "linearGradient" | "marker" | "mask" | "metadata" | "mpath" | "path" | "pattern" | "polygon" | "polyline" | "radialGradient" | "rect" | "stop" | "switch" | "text" | "textPath" | "tspan" | "use" | "view" | React.ComponentClass<any, any> | React.FunctionComponent<any> | undefined = undefined>(as?: T | undefined) => <P, SubComponents = {}>({ displayName, Component, subComponents, }: {
     displayName?: string | undefined;
     Component: RefForwardingComponent<T, P>;
     subComponents?: SubComponents | undefined;
-}) => Component<T, P> & SubComponents;
-export declare function useForkRef<T>(ref1: React.Ref<T>, ref2: React.Ref<T>): (instance: T) => void;
-export declare function useLocalRef<T>(ref: React.Ref<T>): {
+}) => (T extends undefined ? Component<P> : ElementComponent<T, P>) & SubComponents;
+export declare function useForkRef<T>(ref1?: React.Ref<T>, ref2?: React.Ref<T>): (instance: T) => void;
+export declare function useLocalRef<T>(ref?: React.Ref<T>): {
     localRef: React.RefObject<T>;
@@ -33,3 +38,7 @@ elementRef: (instance: T) => void;
 export declare function useModelContext<T>(context: React.Context<T>, model?: T): T;
+export declare function composeHooks<M, P extends {}, O1 extends {}, O2 extends {}>(hook1: (model: M, props: P) => O1, hook2: (model: M, props: P) => O2): (model: M, props: P) => P & O1 & O2;
+export declare function composeHooks<M, P extends {}, O1 extends {}, O2 extends {}, O3 extends {}>(hook1: (model: M, props: P) => O1, hook2: (model: M, props: P) => O2, hook3: (model: M, props: P) => O3): (model: M, props: P) => P & O1 & O2 & O3;
+export declare function composeHooks<M, P extends {}, O1 extends {}, O2 extends {}, O3 extends {}, O4 extends {}>(hook1: (model: M, props: P) => O1, hook2: (model: M, props: P) => O2, hook3: (model: M, props: P) => O3, hook4: (model: M, props: P) => O4): (model: M, props: P) => P & O1 & O2 & O3 & O4;
+export declare function composeHooks<M, P extends {}, O1 extends {}, O2 extends {}, O3 extends {}, O4 extends {}, O5 extends {}>(hook1: (model: M, props: P) => O1, hook2: (model: M, props: P) => O2, hook3: (model: M, props: P) => O3, hook4: (model: M, props: P) => O4, hook5: (model: M, props: P) => O5): (model: M, props: P) => P & O1 & O2 & O3 & O4 & O5;
 export {};
 //# sourceMappingURL=components.d.ts.map

ts3.5/dist/commonjs/lib/utils/index.d.ts

@@ -5,4 +5,5 @@ export * from './colorUtils';
 export * from './mergeCallback';
-export * from './mergeCallbacks';
+export * from './mergeProps';
 export * from './useUniqueId';
+export * from './assert';
 export * from './useMount';
@@ -9,0 +10,0 @@ export * from './components';

ts3.5/dist/commonjs/lib/utils/models.d.ts

@@ -5,7 +5,12 @@ export declare type Model<State, Events> = {
 };
-declare type EventMap<TEvents extends Record<string, (data?: object) => void>, TGuardMap extends Record<string, keyof TEvents>, TCallbackMap extends Record<string, keyof TEvents>> = {
-    guards?: TGuardMap;
-    callbacks?: TCallbackMap;
+declare type IEvent = {
+    [key: string]: {
+        bivarianceHack(data?: object): void;
+    }['bivarianceHack'];
 };
-declare type ToGuardConfig<TState extends Record<string, any>, TEvents extends Record<string, (data?: object) => void>, TGuardMap extends Record<string, keyof TEvents>> = {
+declare type EventMap<TEvents extends IEvent, TGuardMap extends Record<string, keyof TEvents>, TCallbackMap extends Record<string, keyof TEvents>> = {
+    guards: TGuardMap;
+    callbacks: TCallbackMap;
+};
+declare type ToGuardConfig<TState extends Record<string, any>, TEvents extends IEvent, TGuardMap extends Record<string, keyof TEvents>> = {
     [K in keyof TGuardMap]: (event: {
@@ -16,3 +21,3 @@ data: Parameters<TEvents[TGuardMap[K]]>[0];
 };
-declare type ToCallbackConfig<TState extends Record<string, any>, TEvents extends Record<string, (data?: object) => void>, TGuardMap extends Record<string, keyof TEvents>> = {
+declare type ToCallbackConfig<TState extends Record<string, any>, TEvents extends IEvent, TGuardMap extends Record<string, keyof TEvents>> = {
     [K in keyof TGuardMap]: (event: {
@@ -23,6 +28,6 @@ data: Parameters<TEvents[TGuardMap[K]]>[0];
 };
-export declare type ToModelConfig<TState extends Record<string, any>, TEvents extends Record<string, (data?: object) => void>, TEventMap extends EventMap<TEvents, any, any>> = ToGuardConfig<TState, TEvents, TEventMap['guards']> & ToCallbackConfig<TState, TEvents, TEventMap['callbacks']>;
-export declare const createEventMap: <TEvents extends Record<string, (data?: object | undefined) => void>>() => <TGuardMap extends Record<string, keyof TEvents>, TCallbackMap extends Record<string, keyof TEvents>>(config: EventMap<TEvents, TGuardMap, TCallbackMap>) => EventMap<TEvents, TGuardMap, TCallbackMap>;
-export declare const useEventMap: <TEvents extends Record<string, (data?: object | undefined) => void>, TState extends Record<string, any>, TGuardMap extends Record<string, keyof TEvents>, TCallbackMap extends Record<string, keyof TEvents>, TConfig extends Partial<ToGuardConfig<TState, TEvents, TGuardMap> & ToCallbackConfig<TState, TEvents, TCallbackMap>> | undefined>(eventMap: EventMap<TEvents, TGuardMap, TCallbackMap>, state: TState, config: TConfig, events: TEvents) => TEvents;
+export declare type ToModelConfig<TState extends Record<string, any>, TEvents extends IEvent, TEventMap extends EventMap<TEvents, any, any>> = ToGuardConfig<TState, TEvents, TEventMap['guards']> & ToCallbackConfig<TState, TEvents, TEventMap['callbacks']>;
+export declare const createEventMap: <TEvents extends IEvent>() => <TGuardMap extends Record<string, keyof TEvents>, TCallbackMap extends Record<string, keyof TEvents>>(config: Partial<EventMap<TEvents, TGuardMap, TCallbackMap>>) => EventMap<TEvents, TGuardMap, TCallbackMap>;
+export declare const useEventMap: <TEvents extends IEvent, TState extends Record<string, any>, TGuardMap extends Record<string, keyof TEvents>, TCallbackMap extends Record<string, keyof TEvents>, TConfig extends Partial<ToModelConfig<TState, TEvents, EventMap<TEvents, TGuardMap, TCallbackMap>>>>(eventMap: EventMap<TEvents, TGuardMap, TCallbackMap>, state: TState, config: TConfig, events: TEvents) => TEvents;
 export {};
 //# sourceMappingURL=models.d.ts.map

ts3.5/dist/es6/lib/utils/components.d.ts

@@ -5,6 +5,8 @@ import React from 'react';
 };
-export declare type PropsWithAs<P, T extends React.ElementType> = P & Pick<React.ComponentProps<T>, Exclude<keyof React.ComponentProps<T>, 'as' | 'state' | keyof P>>;
-export declare type Component<T extends React.ElementType, P> = {
-    <TT extends React.ElementType>(props: PropsWithAs<P, TT> & {
-        as: TT;
+export declare type PropsWithAs<P, ElementType extends React.ElementType | undefined> = ElementType extends undefined ? P : P & Pick<React.ComponentProps<ElementType extends undefined ? 'section' : ElementType>, Exclude<keyof React.ComponentProps<ElementType extends undefined ? 'section' : ElementType>, 'as' | 'state' | keyof P>> & {
+    ref?: React.Ref<ElementType>;
+};
+export declare type ElementComponent<T extends React.ElementType | undefined, P> = {
+    <ElementType extends React.ElementType>(props: PropsWithAs<P, ElementType> & {
+        as: ElementType;
     }): JSX.Element;
@@ -14,15 +16,18 @@ (props: PropsWithAs<P, T>): JSX.Element;
 };
+export declare type Component<P> = {
+    (props: P): JSX.Element;
+    displayName?: string;
+};
 interface RefForwardingComponent<T, P = {}> {
     (props: React.PropsWithChildren<P> & {
         as?: React.ReactElement<any>;
-    }, ref: T extends null ? never : React.Ref<T extends keyof ElementTagNameMap ? ElementTagNameMap[T] : T>, as: T extends undefined ? never : T): React.ReactElement | null;
+    }, ref: T extends undefined ? never : React.Ref<T extends keyof ElementTagNameMap ? ElementTagNameMap[T] : T extends ElementComponent<infer U, any> ? U extends keyof ElementTagNameMap ? ElementTagNameMap[U] : U : T>, as: T extends undefined ? never : T): React.ReactElement | null;
 }
-declare type NullElement = () => null;
-export declare const createComponent: <T extends React.ElementType<any> = NullElement>(as?: T | undefined) => <P, SubComponents = {}>({ displayName, Component, subComponents, }: {
+export declare const createComponent: <T extends "symbol" | "object" | "meter" | "textarea" | "button" | "style" | "progress" | "text" | "ruby" | "table" | "small" | "sub" | "circle" | "embed" | "pre" | "caption" | "menu" | "menuitem" | "clipPath" | "filter" | "mask" | "marker" | "big" | "link" | "sup" | "a" | "abbr" | "address" | "area" | "article" | "aside" | "audio" | "b" | "base" | "bdi" | "bdo" | "blockquote" | "body" | "br" | "canvas" | "cite" | "code" | "col" | "colgroup" | "data" | "datalist" | "dd" | "del" | "details" | "dfn" | "dialog" | "div" | "dl" | "dt" | "em" | "fieldset" | "figcaption" | "figure" | "footer" | "form" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "head" | "header" | "hgroup" | "hr" | "html" | "i" | "iframe" | "img" | "input" | "ins" | "kbd" | "keygen" | "label" | "legend" | "li" | "main" | "map" | "mark" | "meta" | "nav" | "noindex" | "noscript" | "ol" | "optgroup" | "option" | "output" | "p" | "param" | "picture" | "q" | "rp" | "rt" | "s" | "samp" | "script" | "section" | "select" | "source" | "span" | "strong" | "summary" | "template" | "tbody" | "td" | "tfoot" | "th" | "thead" | "time" | "title" | "tr" | "track" | "u" | "ul" | "var" | "video" | "wbr" | "webview" | "svg" | "animate" | "animateMotion" | "animateTransform" | "defs" | "desc" | "ellipse" | "feBlend" | "feColorMatrix" | "feComponentTransfer" | "feComposite" | "feConvolveMatrix" | "feDiffuseLighting" | "feDisplacementMap" | "feDistantLight" | "feDropShadow" | "feFlood" | "feFuncA" | "feFuncB" | "feFuncG" | "feFuncR" | "feGaussianBlur" | "feImage" | "feMerge" | "feMergeNode" | "feMorphology" | "feOffset" | "fePointLight" | "feSpecularLighting" | "feSpotLight" | "feTile" | "feTurbulence" | "foreignObject" | "g" | "image" | "line" | "linearGradient" | "metadata" | "mpath" | "path" | "pattern" | "polygon" | "polyline" | "radialGradient" | "rect" | "stop" | "switch" | "textPath" | "tspan" | "use" | "view" | React.ComponentClass<any, any> | React.FunctionComponent<any> | undefined = undefined>(as?: T | undefined) => <P, SubComponents = {}>({ displayName, Component, subComponents, }: {
     displayName?: string | undefined;
     Component: RefForwardingComponent<T, P>;
     subComponents?: SubComponents | undefined;
-}) => Component<T, P> & SubComponents;
-export declare function useForkRef<T>(ref1: React.Ref<T>, ref2: React.Ref<T>): (instance: T) => void;
-export declare function useLocalRef<T>(ref: React.Ref<T>): {
+}) => (T extends undefined ? Component<P> : ElementComponent<T, P>) & SubComponents;
+export declare function useForkRef<T>(ref1?: React.Ref<T>, ref2?: React.Ref<T>): (instance: T) => void;
+export declare function useLocalRef<T>(ref?: React.Ref<T>): {
     localRef: React.RefObject<T>;
@@ -33,3 +38,7 @@ elementRef: (instance: T) => void;
 export declare function useModelContext<T>(context: React.Context<T>, model?: T): T;
+export declare function composeHooks<M, P extends {}, O1 extends {}, O2 extends {}>(hook1: (model: M, props: P) => O1, hook2: (model: M, props: P) => O2): (model: M, props: P) => P & O1 & O2;
+export declare function composeHooks<M, P extends {}, O1 extends {}, O2 extends {}, O3 extends {}>(hook1: (model: M, props: P) => O1, hook2: (model: M, props: P) => O2, hook3: (model: M, props: P) => O3): (model: M, props: P) => P & O1 & O2 & O3;
+export declare function composeHooks<M, P extends {}, O1 extends {}, O2 extends {}, O3 extends {}, O4 extends {}>(hook1: (model: M, props: P) => O1, hook2: (model: M, props: P) => O2, hook3: (model: M, props: P) => O3, hook4: (model: M, props: P) => O4): (model: M, props: P) => P & O1 & O2 & O3 & O4;
+export declare function composeHooks<M, P extends {}, O1 extends {}, O2 extends {}, O3 extends {}, O4 extends {}, O5 extends {}>(hook1: (model: M, props: P) => O1, hook2: (model: M, props: P) => O2, hook3: (model: M, props: P) => O3, hook4: (model: M, props: P) => O4, hook5: (model: M, props: P) => O5): (model: M, props: P) => P & O1 & O2 & O3 & O4 & O5;
 export {};
 //# sourceMappingURL=components.d.ts.map

ts3.5/dist/es6/lib/utils/index.d.ts

@@ -5,4 +5,5 @@ export * from './colorUtils';
 export * from './mergeCallback';
-export * from './mergeCallbacks';
+export * from './mergeProps';
 export * from './useUniqueId';
+export * from './assert';
 export * from './useMount';
@@ -9,0 +10,0 @@ export * from './components';

ts3.5/dist/es6/lib/utils/models.d.ts

@@ -5,7 +5,12 @@ export declare type Model<State, Events> = {
 };
-declare type EventMap<TEvents extends Record<string, (data?: object) => void>, TGuardMap extends Record<string, keyof TEvents>, TCallbackMap extends Record<string, keyof TEvents>> = {
-    guards?: TGuardMap;
-    callbacks?: TCallbackMap;
+declare type IEvent = {
+    [key: string]: {
+        bivarianceHack(data?: object): void;
+    }['bivarianceHack'];
 };
-declare type ToGuardConfig<TState extends Record<string, any>, TEvents extends Record<string, (data?: object) => void>, TGuardMap extends Record<string, keyof TEvents>> = {
+declare type EventMap<TEvents extends IEvent, TGuardMap extends Record<string, keyof TEvents>, TCallbackMap extends Record<string, keyof TEvents>> = {
+    guards: TGuardMap;
+    callbacks: TCallbackMap;
+};
+declare type ToGuardConfig<TState extends Record<string, any>, TEvents extends IEvent, TGuardMap extends Record<string, keyof TEvents>> = {
     [K in keyof TGuardMap]: (event: {
@@ -16,3 +21,3 @@ data: Parameters<TEvents[TGuardMap[K]]>[0];
 };
-declare type ToCallbackConfig<TState extends Record<string, any>, TEvents extends Record<string, (data?: object) => void>, TGuardMap extends Record<string, keyof TEvents>> = {
+declare type ToCallbackConfig<TState extends Record<string, any>, TEvents extends IEvent, TGuardMap extends Record<string, keyof TEvents>> = {
     [K in keyof TGuardMap]: (event: {
@@ -23,6 +28,6 @@ data: Parameters<TEvents[TGuardMap[K]]>[0];
 };
-export declare type ToModelConfig<TState extends Record<string, any>, TEvents extends Record<string, (data?: object) => void>, TEventMap extends EventMap<TEvents, any, any>> = ToGuardConfig<TState, TEvents, TEventMap['guards']> & ToCallbackConfig<TState, TEvents, TEventMap['callbacks']>;
-export declare const createEventMap: <TEvents extends Record<string, (data?: object | undefined) => void>>() => <TGuardMap extends Record<string, keyof TEvents>, TCallbackMap extends Record<string, keyof TEvents>>(config: EventMap<TEvents, TGuardMap, TCallbackMap>) => EventMap<TEvents, TGuardMap, TCallbackMap>;
-export declare const useEventMap: <TEvents extends Record<string, (data?: object | undefined) => void>, TState extends Record<string, any>, TGuardMap extends Record<string, keyof TEvents>, TCallbackMap extends Record<string, keyof TEvents>, TConfig extends Partial<ToGuardConfig<TState, TEvents, TGuardMap> & ToCallbackConfig<TState, TEvents, TCallbackMap>> | undefined>(eventMap: EventMap<TEvents, TGuardMap, TCallbackMap>, state: TState, config: TConfig, events: TEvents) => TEvents;
+export declare type ToModelConfig<TState extends Record<string, any>, TEvents extends IEvent, TEventMap extends EventMap<TEvents, any, any>> = ToGuardConfig<TState, TEvents, TEventMap['guards']> & ToCallbackConfig<TState, TEvents, TEventMap['callbacks']>;
+export declare const createEventMap: <TEvents extends IEvent>() => <TGuardMap extends Record<string, keyof TEvents>, TCallbackMap extends Record<string, keyof TEvents>>(config: Partial<EventMap<TEvents, TGuardMap, TCallbackMap>>) => EventMap<TEvents, TGuardMap, TCallbackMap>;
+export declare const useEventMap: <TEvents extends IEvent, TState extends Record<string, any>, TGuardMap extends Record<string, keyof TEvents>, TCallbackMap extends Record<string, keyof TEvents>, TConfig extends Partial<ToModelConfig<TState, TEvents, EventMap<TEvents, TGuardMap, TCallbackMap>>>>(eventMap: EventMap<TEvents, TGuardMap, TCallbackMap>, state: TState, config: TConfig, events: TEvents) => TEvents;
 export {};
 //# sourceMappingURL=models.d.ts.map

New alerts

Manifest confusion

Supply chain risk

This package has inconsistent metadata. This could be malicious or caused by an error when publishing the package.

Found 1 instance in 1 package

Fixed alerts

Manifest confusion

Supply chain risk

This package has inconsistent metadata. This could be malicious or caused by an error when publishing the package.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

238009

increased by12.28%

Number of package files

274

increased by3.4%

Lines of code

4356

increased by6.22%

Dependency changes

• Updated@workday/canvas-kit-react-core@^5.0.0-beta.1-next.6+33758d4b