@workday/canvas-kit-react 5.3.17 → 5.4.0-next.1

package/dist/es6/common/lib/theming/types.d.ts

@@ -32,12 +32,202 @@ export interface CanvasTheme {
         success: CanvasThemePalette;
         neutral: CanvasThemePalette;
     };
+    /**
+     * ### Theme Breakpoints
+     *
+     * Breakpoints are used by media queries to conditionally apply or modify styles based on the viewport width.
+     * This allows the UI to be responsive to various screen sizes.
+     *
+     * This breakpoints object contains `values` and several helper functions: `up`, `down`, `between`, and `only`.
+     * You can find more detailed information by inspecting individual values and functions.
+     */
     breakpoints: {
+        /**
+         * ### Breakpoint Values
+         *
+         * This object provides five breakpoint values
+         * that correspond to the min-widths of our standard screen sizes.
+         *
+         * - `zero`: 0
+         * - `s`: 320
+         * - `m`: 768
+         * - `l`: 1024
+         * - `xl`: 1440
+         *
+         * And these are our standard screen size ranges:
+         *
+         * - `small` (320px - 767px) Used for mobile-sized screens
+         * - `medium` (768px - 1023px) Used for tablet-sized screens
+         * - `large` - (1024px - 1439px) Used for laptop and small desktop screens
+         * - `extra-large` (≥1440px) Used for very large screens
+         *
+         * Note: Some applications may only require a subset of screen sizes and not use all breakpoints.
+         *
+         */
         values: CanvasBreakpoints;
+        /**
+         * ### Up
+         *
+         * _Returns a media query above the `min-width` for the range of a given breakpoint_
+         *
+         * Given a `start` breakpoint key ("zero", "s", "m", "l", "xl"),
+         * this function returns a media query (string) using a `min-width`.
+         *
+         * @example
+         * ```ts
+         * import { useTheme } from '@workday/canvas-kit-react/common';
+         * import { space } from '@workday/canvas-kit-react/tokens';
+         *
+         * const theme = useTheme();
+         * const { up } = theme.canvas.breakpoints;
+         * const mediaQuery = up('l'); // Returns '@media (min-width: 1024px)'
+         * const styles = {
+         *   [mediaQuery]: {
+         *     padding: space.m,
+         *   }
+         * };
+         * ```
+         */
         up: (key: BreakpointFnParam) => string;
+        /**
+         * ### Down
+         *
+         * _Returns a media query below the `max-width` for the range of a given breakpoint_
+         *
+         * Given an `end` breakpoint key ("zero", "s", "m", "l", "xl"),
+         * this function returns a media query (string) using a `max-width`.
+         *
+         * Note: This function subtracts `0.5px` from the next breakpoint value to prevent collisions.
+         * For example, `breakpoints.values.s`, has a `min-width` of `320px`, and the `max-width` is `767.5px`).
+         *
+         * If the `xl` breakpoint is provided, this function returns a media query with only a `min-width` of `0`,
+         * as seen in the second example below.
+         *
+         * @example
+         * ```ts
+         * import { useTheme } from '@workday/canvas-kit-react/common';
+         * import { space } from '@workday/canvas-kit-react/tokens';
+         *
+         * const theme = useTheme();
+         * const { down } = theme.canvas.breakpoints;
+         * const mediaQuery = down('m'); // Returns '@media (max-width: 1023.5px)'
+         * const styles = {
+         *   [mediaQuery]: {
+         *     padding: space.m,
+         *   }
+         * };
+         * ```
+         *
+         * This example uses the `xl` breakpoint and only adds a `min-width` of `0` to the media query.
+         * @example
+         * ```ts
+         * import { useTheme } from '@workday/canvas-kit-react/common';
+         * import { space } from '@workday/canvas-kit-react/tokens';
+         *
+         * const theme = useTheme();
+         * const { down } = theme.canvas.breakpoints;
+         * const mediaQuery = down('xl'); // Returns '@media (min-width: 0)'
+         * const styles = {
+         *   [mediaQuery]: {
+         *     padding: space.m,
+         *   }
+         * };
+         * ```
+         */
         down: (key: BreakpointFnParam) => string;
-        only: (key: BreakpointFnParam) => string;
+        /**
+         * ### Between
+         *
+         * _Returns a media query between two given breakpoints_
+         *
+         * Given `start` and `end` breakpoint keys ("zero", "s", "m", "l", "xl"),
+         * this function returns a media query (string) using a min-width and max-width.
+         *
+         * Note: This function subtracts `0.5px` from the next breakpoint value to prevent collisions.
+         * For example, `breakpoints.values.s`, has a `min-width` of `320px`, and the `max-width` is `767.5px`).
+         *
+         * If the `xl` breakpoint is provided, this function returns a media query with only a `min-width`,
+         * as seen in the second example below.
+         *
+         * @example
+         * ```ts
+         * import { useTheme } from '@workday/canvas-kit-react/common';
+         * import { space } from '@workday/canvas-kit-react/tokens';
+         *
+         * const theme = useTheme();
+         * const { between } = theme.canvas.breakpoints;
+         * // Returns '@media (min-width: 320px) and (max-width: 1023.5px)'
+         * const mediaQuery = between('s', 'm');
+         * const styles = {
+         *   [mediaQuery]: {
+         *     padding: space.s,
+         *   }
+         * };
+         * ```
+         *
+         * This example uses `xl` as the `end` breakpoint and only adds a min-width to the media query.
+         * @example
+         * ```ts
+         * import { useTheme } from '@workday/canvas-kit-react/common';
+         * import { space } from '@workday/canvas-kit-react/tokens';
+         *
+         * const theme = useTheme();
+         * const { between } = theme.canvas.breakpoints;
+         * const mediaQuery = between('m', 'xl'); // Returns '@media (min-width: 768px)'
+         * const styles = {
+         *   [mediaQuery]: {
+         *     padding: space.s,
+         *   }
+         * };
+         * ```
+         */
         between: (start: BreakpointFnParam, end: BreakpointFnParam) => string;
+        /**
+         * ### Only
+         *
+         * _Returns a media query with a `min-width` and `max-width` for a given breakpoint_
+         *
+         * Given a breakpoint key ("zero", "s", "m", "l", "xl"),
+         * this function returns a media query (string) using a `min-width` and `max-width`.
+         *
+         * Note: This function subtracts `0.5px` from the next breakpoint value to prevent collisions.
+         * For example, `breakpoints.values.s`, has a `min-width` of `320px`, and the `max-width` is `767.5px`).
+         *
+         * If the `xl` breakpoint is provided, this function returns a media query with only a `min-width` of `1440px`,
+         * as seen in the second example below.
+         *
+         * @example
+         * ```ts
+         * import { useTheme } from '@workday/canvas-kit-react/common';
+         * import { space } from '@workday/canvas-kit-react/tokens';
+         *
+         * const theme = useTheme();
+         * const { only } = theme.canvas.breakpoints;
+         * const mediaQuery = only('s'); // Returns '@media (min-width: 320px) and (max-width: 767.5px)'
+         * const styles = {
+         *   [mediaQuery]: {
+         *     padding: space.s,
+         *   }
+         * };
+         * ```
+         *
+         * This example uses the `xl` breakpoint and only adds a `min-width` of `1440px` to the media query.
+         * @example
+         * ```ts
+         * import { useTheme } from '@workday/canvas-kit-react/common';
+         * import { space } from '@workday/canvas-kit-react/tokens';
+         *
+         * const theme = useTheme();
+         * const { only } = theme.canvas.breakpoints;
+         * const mediaQuery = only('xl'); // Returns '@media (min-width: 1440px)'
+         * const styles = {
+         *   [mediaQuery]: {
+         *     padding: space.s,
+         *   }
+         * };
+         * ```
+         */
+        only: (key: BreakpointFnParam) => string;
     };
     direction: ContentDirection;
 }

package/dist/es6/common/lib/theming/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../../common/lib/theming/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,iBAAiB,EAAE,iBAAiB,EAAC,MAAM,eAAe,CAAC;AAEnE;;GAEG;AACH,oBAAY,kBAAkB,GAAG;IAC/B,QAAQ,EAAE,MAAM,CAAC;IACjB,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,MAAM,CAAC;IACb,OAAO,EAAE,MAAM,CAAC;IAChB,QAAQ,EAAE,MAAM,CAAC;CAClB,CAAC;AAEF,aAAK,wBAAwB,GAAG;IAC9B,YAAY,EAAE,MAAM,CAAC;CACtB,CAAC;AAEF;;GAEG;AACH,oBAAY,gBAAgB;IAC1B,GAAG,QAAQ;IACX,GAAG,QAAQ;CACZ;AAED;;GAEG;AACH,MAAM,WAAW,WAAW;IAC1B,OAAO,EAAE;QACP,MAAM,EAAE,wBAAwB,CAAC;QACjC,OAAO,EAAE,kBAAkB,CAAC;QAC5B,KAAK,EAAE,kBAAkB,CAAC;QAC1B,KAAK,EAAE,kBAAkB,CAAC;QAC1B,OAAO,EAAE,kBAAkB,CAAC;QAC5B,OAAO,EAAE,kBAAkB,CAAC;KAC7B,CAAC;IACF,WAAW,EAAE;QACX,MAAM,EAAE,iBAAiB,CAAC;QAC1B,EAAE,EAAE,CAAC,GAAG,EAAE,iBAAiB,KAAK,MAAM,CAAC;QACvC,IAAI,EAAE,CAAC,GAAG,EAAE,iBAAiB,KAAK,MAAM,CAAC;QACzC,IAAI,EAAE,CAAC,GAAG,EAAE,iBAAiB,KAAK,MAAM,CAAC;QACzC,OAAO,EAAE,CAAC,KAAK,EAAE,iBAAiB,EAAE,GAAG,EAAE,iBAAiB,KAAK,MAAM,CAAC;KACvE,CAAC;IACF,SAAS,EAAE,gBAAgB,CAAC;CAC7B;AAED;;GAEG;AACH,MAAM,WAAW,SAAS;IACxB,KAAK,CAAC,EAAE,kBAAkB,CAAC;CAC5B;AAED;;GAEG;AACH,aAAK,gBAAgB,CAAC,CAAC,IAAI;KACxB,CAAC,IAAI,MAAM,CAAC,CAAC,CAAC,EAAE,gBAAgB,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;CACxC,CAAC;AAEF,oBAAY,kBAAkB,GAAG,gBAAgB,CAAC,WAAW,CAAC,CAAC;AAC/D,oBAAY,yBAAyB,GAAG,gBAAgB,CAAC,kBAAkB,CAAC,CAAC;AAC7E,oBAAY,yBAAyB,GAAG;IAAC,MAAM,CAAC,EAAE,kBAAkB,CAAA;CAAC,CAAC;AACtE,oBAAY,kBAAkB,GAAG;IAAC,MAAM,EAAE,WAAW,CAAA;CAAC,CAAC"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../../common/lib/theming/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,iBAAiB,EAAE,iBAAiB,EAAC,MAAM,eAAe,CAAC;AAEnE;;GAEG;AACH,oBAAY,kBAAkB,GAAG;IAC/B,QAAQ,EAAE,MAAM,CAAC;IACjB,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,MAAM,CAAC;IACb,OAAO,EAAE,MAAM,CAAC;IAChB,QAAQ,EAAE,MAAM,CAAC;CAClB,CAAC;AAEF,aAAK,wBAAwB,GAAG;IAC9B,YAAY,EAAE,MAAM,CAAC;CACtB,CAAC;AAEF;;GAEG;AACH,oBAAY,gBAAgB;IAC1B,GAAG,QAAQ;IACX,GAAG,QAAQ;CACZ;AAED;;GAEG;AACH,MAAM,WAAW,WAAW;IAC1B,OAAO,EAAE;QACP,MAAM,EAAE,wBAAwB,CAAC;QACjC,OAAO,EAAE,kBAAkB,CAAC;QAC5B,KAAK,EAAE,kBAAkB,CAAC;QAC1B,KAAK,EAAE,kBAAkB,CAAC;QAC1B,OAAO,EAAE,kBAAkB,CAAC;QAC5B,OAAO,EAAE,kBAAkB,CAAC;KAC7B,CAAC;IACF;;;;;;;;OAQG;IACH,WAAW,EAAE;QACX;;;;;;;;;;;;;;;;;;;;;WAqBG;QACH,MAAM,EAAE,iBAAiB,CAAC;QAC1B;;;;;;;;;;;;;;;;;;;;;;WAsBG;QACH,EAAE,EAAE,CAAC,GAAG,EAAE,iBAAiB,KAAK,MAAM,CAAC;QACvC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;WA4CG;QACH,IAAI,EAAE,CAAC,GAAG,EAAE,iBAAiB,KAAK,MAAM,CAAC;QACzC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;WA6CG;QACH,OAAO,EAAE,CAAC,KAAK,EAAE,iBAAiB,EAAE,GAAG,EAAE,iBAAiB,KAAK,MAAM,CAAC;QACtE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;WA4CG;QACH,IAAI,EAAE,CAAC,GAAG,EAAE,iBAAiB,KAAK,MAAM,CAAC;KAC1C,CAAC;IACF,SAAS,EAAE,gBAAgB,CAAC;CAC7B;AAED;;GAEG;AACH,MAAM,WAAW,SAAS;IACxB,KAAK,CAAC,EAAE,kBAAkB,CAAC;CAC5B;AAED;;GAEG;AACH,aAAK,gBAAgB,CAAC,CAAC,IAAI;KACxB,CAAC,IAAI,MAAM,CAAC,CAAC,CAAC,EAAE,gBAAgB,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;CACxC,CAAC;AAEF,oBAAY,kBAAkB,GAAG,gBAAgB,CAAC,WAAW,CAAC,CAAC;AAC/D,oBAAY,yBAAyB,GAAG,gBAAgB,CAAC,kBAAkB,CAAC,CAAC;AAC7E,oBAAY,yBAAyB,GAAG;IAAC,MAAM,CAAC,EAAE,kBAAkB,CAAA;CAAC,CAAC;AACtE,oBAAY,kBAAkB,GAAG;IAAC,MAAM,EAAE,WAAW,CAAA;CAAC,CAAC"}

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

@@ -79,6 +79,7 @@ export declare type ElementComponent<T extends React.ElementType, P> = {
     }): JSX.Element;
     (props: PropsWithAs<P, T>): JSX.Element;
     displayName?: string;
+    as<E extends React.ElementType>(as: E): ElementComponent<E, P>;
 };
 export declare type Component<P> = {
     __type: 'Component';
@@ -107,7 +108,7 @@ interface RefForwardingComponent<T, P = {}> {
  * return type is `Component<element, Props>` which looks like `Component<'div', Props>` which is a
  * clean interface that tells you the default element that is used.
  */
-export declare const createComponent: <E extends "symbol" | "object" | "button" | "meter" | "textarea" | "style" | "progress" | "text" | "ruby" | "table" | "small" | "sub" | "circle" | "embed" | "pre" | "caption" | "menu" | "menuitem" | "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" | "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" | "textPath" | "tspan" | "use" | "view" | ElementComponent<any, any> | React.ComponentClass<{}, any> | React.FunctionComponent<{}> | undefined = undefined>(as?: E | undefined) => <P, SubComponents = {}>({ displayName, Component, subComponents, }: {
+export declare const createComponent: <E extends "symbol" | "object" | "button" | "meter" | "textarea" | "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" | "slot" | "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" | ElementComponent<any, any> | React.ComponentClass<{}, any> | React.FunctionComponent<{}> | undefined = undefined>(as?: E | undefined) => <P, SubComponents = {}>({ displayName, Component, subComponents, }: {
     /** This is what the component will look like in the React dev tools. Encouraged to more easily
      * understand the component tree */
     displayName?: string | undefined;
@@ -169,10 +170,19 @@ export declare const createComponent: <E extends "symbol" | "object" | "button"
  *
  * @param fn Function that takes a model and optional ref and returns props
  */
-export declare const createHook: <M extends Model<any, any>, PO extends {}, PI extends {}>(fn: (model: M, ref?: ((instance: any) => void) | React.RefObject<any> | null | undefined, elemProps?: PI | undefined) => PO) => BehaviorHook<M, PO>;
-export declare type BehaviorHook<M extends Model<any, any>, O extends {}> = <P extends {}, R>(model: M, elemProps?: P, ref?: React.Ref<R>) => O & P & (R extends HTMLOrSVGElement ? {
+export declare const createHook: <M extends Model<any, any>, PO extends {}, PI extends {}>(fn: (model: M, ref?: ((instance: any) => void) | React.RefObject<any> | null | undefined, elemProps?: PI | undefined) => PO) => <P extends {}, R>(model: M, elemProps?: P | undefined, ref?: ((instance: R | null) => void) | React.RefObject<R> | null | undefined) => PO & P & (R extends HTMLOrSVGElement ? {
     ref: React.Ref<R>;
 } : {});
+export declare const subModelHook: <M extends Model<any, any>, SM extends Model<any, any>, O extends {}>(fn: (model: M) => SM, hook: <P extends {}, R>(model: SM, elemProps?: P | undefined, ref?: ((instance: R | null) => void) | React.RefObject<R> | null | undefined) => O & P & (R extends HTMLOrSVGElement ? {
+    ref: React.Ref<R>;
+} : {})) => <P_1 extends {}, R_1>(model: M, elemProps?: P_1 | undefined, ref?: ((instance: R_1 | null) => void) | React.RefObject<R_1> | null | undefined) => O & P_1 & (R_1 extends HTMLOrSVGElement ? {
+    ref: React.Ref<R_1>;
+} : {});
+export declare type BehaviorHook<M extends Model<any, any>, O extends {}> = {
+    bivarianceHack<P extends {}, R>(model: M, elemProps?: P, ref?: React.Ref<R>): O & P & (R extends HTMLOrSVGElement ? {
+        ref: React.Ref<R>;
+    } : {});
+}['bivarianceHack'];
 /**
  * This function will create a new forked ref out of two input Refs. This is useful for components
  * that use `React.forwardRef`, but also need internal access to a Ref.
@@ -197,7 +207,7 @@ export declare type BehaviorHook<M extends Model<any, any>, O extends {}> = <P e
  *   return <div ref={elementRef}/>
  * })
  */
-export declare function useForkRef<T>(ref1?: React.Ref<T>, ref2?: React.Ref<T>): (instance: T) => void;
+export declare function useForkRef<T>(ref1?: React.Ref<T>, ref2?: React.Ref<T>): React.RefCallback<T>;
 /**
  * This functions handles the common use case where a component needs a local ref and needs to
  * forward a ref to an element.
@@ -214,7 +224,7 @@ export declare function useForkRef<T>(ref1?: React.Ref<T>, ref2?: React.Ref<T>):
  */
 export declare function useLocalRef<T>(ref?: React.Ref<T>): {
     localRef: React.RefObject<T>;
-    elementRef: (instance: T) => void;
+    elementRef: (instance: T | null) => void;
 };
 /**
  * Returns a model, or calls the model hook with config. Clever way around the conditional React
@@ -260,9 +270,9 @@ export declare function useModelContext<T>(context: React.Context<T>, model?: T)
  *   return <div id="foo" {...props}>{children}</div>
  * })
  */
-export declare function composeHooks<M extends Model<any, any>, O1 extends {}, P extends {}, O2 extends {}>(hook1: (model: M, props: P, ref: React.Ref<any>) => O1, hook2: (model: M, props: P, ref: React.Ref<any>) => O2): BehaviorHook<M, O1 & O2>;
-export declare function composeHooks<M extends Model<any, any>, R, P extends {}, O1 extends {}, O2 extends {}, O3 extends {}>(hook1: (model: M, props: P, ref: React.Ref<R>) => O1, hook2: (model: M, props: P, ref: React.Ref<R>) => O2, hook3: (model: M, props: P, ref: React.Ref<R>) => O3): BehaviorHook<M, O1 & O2 & O3>;
-export declare function composeHooks<M extends Model<any, any>, R, P extends {}, O1 extends {}, O2 extends {}, O3 extends {}, O4 extends {}>(hook1: (model: M, props: P, ref: React.Ref<R>) => O1, hook2: (model: M, props: P, ref: React.Ref<R>) => O2, hook3: (model: M, props: P, ref: React.Ref<R>) => O3, hook4: (model: M, props: P, ref: React.Ref<R>) => O4): BehaviorHook<M, O1 & O2 & O3 & O4>;
-export declare function composeHooks<M extends Model<any, any>, R, P extends {}, O1 extends {}, O2 extends {}, O3 extends {}, O4 extends {}, O5 extends {}>(hook1: (model: M, props: P, ref: React.Ref<R>) => O1, hook2: (model: M, props: P, ref: React.Ref<R>) => O2, hook3: (model: M, props: P, ref: React.Ref<R>) => O3, hook4: (model: M, props: P, ref: React.Ref<R>) => O4, hook5: (model: M, props: P, ref: React.Ref<R>) => O5): BehaviorHook<M, O1 & O2 & O3 & O4 & O5>;
+export declare function composeHooks<M extends Model<any, any>, O1 extends {}, O2 extends {}>(hook1: BehaviorHook<M, O1>, hook2: BehaviorHook<M, O2>): BehaviorHook<M, O1 & O2>;
+export declare function composeHooks<M extends Model<any, any>, R, P extends {}, O1 extends {}, O2 extends {}, O3 extends {}>(hook1: BehaviorHook<M, O1>, hook2: BehaviorHook<M, O2>, hook3: BehaviorHook<M, O3>): BehaviorHook<M, O1 & O2 & O3>;
+export declare function composeHooks<M extends Model<any, any>, R, P extends {}, O1 extends {}, O2 extends {}, O3 extends {}, O4 extends {}>(hook1: BehaviorHook<M, O1>, hook2: BehaviorHook<M, O2>, hook3: BehaviorHook<M, O3>, hook4: BehaviorHook<M, O4>): BehaviorHook<M, O1 & O2 & O3 & O4>;
+export declare function composeHooks<M extends Model<any, any>, R, P extends {}, O1 extends {}, O2 extends {}, O3 extends {}, O4 extends {}, O5 extends {}>(hook1: BehaviorHook<M, O1>, hook2: BehaviorHook<M, O2>, hook3: BehaviorHook<M, O3>, hook4: BehaviorHook<M, O4>, hook5: BehaviorHook<M, O5>): BehaviorHook<M, O1 & O2 & O3 & O4 & O5>;
 export {};
 //# sourceMappingURL=components.d.ts.map

package/dist/es6/common/lib/utils/components.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"components.d.ts","sourceRoot":"","sources":["../../../../../common/lib/utils/components.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"components.d.ts","sourceRoot":"","sources":["../../../../../common/lib/utils/components.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAC,KAAK,EAAC,MAAM,UAAU,CAAC;AAE/B;;;GAGG;AACH,oBAAY,UAAU,GAAG;IACvB,EAAE,CAAC,EAAE,KAAK,CAAC,WAAW,CAAC;CACxB,CAAC;AAEF;;;;;;;GAOG;AACH,aAAK,UAAU,CAAC,CAAC,IAAI,CAAC,SAAS,SAAS,GACpC,KAAK,GACL,KAAK,CAAC,GAAG,CACP,CAAC,SAAS,MAAM,iBAAiB,GAC7B,iBAAiB,CAAC,CAAC,CAAC,GACpB,CAAC,SAAS,gBAAgB,CAAC,MAAM,CAAC,EAAE,GAAG,CAAC,GACxC,CAAC,SAAS,MAAM,iBAAiB,GAC/B,iBAAiB,CAAC,CAAC,CAAC,GACpB,CAAC,GACH,CAAC,CACN,CAAC;AAEN;;;;GAIG;AACH,oBAAY,WAAW,CAAC,CAAC,EAAE,WAAW,SAAS,KAAK,CAAC,WAAW,IAAI,CAAC,GACnE,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC,EAAE,IAAI,GAAG,OAAO,GAAG,MAAM,CAAC,CAAC,GAAG;IAClE;;;;;OAKG;IACH,GAAG,CAAC,EAAE,UAAU,CAAC,WAAW,CAAC,CAAC;CAC/B,CAAC;AAEJ;;;;;;;GAOG;AACH,aAAK,qBAAqB,CACxB,CAAC,SAAS,KAAK,CAAC,iBAAiB,CAAC,GAAG,EAAE,GAAG,CAAC,IACzC,CAAC,SAAS,KAAK,CAAC,iBAAiB,CAAC,MAAM,CAAC,EAAE,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;AAE5D;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,oBAAY,YAAY,CACtB,UAAU,EACV,QAAQ,SACJ,MAAM,GAAG,CAAC,iBAAiB,GAC3B,gBAAgB,CAAC,GAAG,EAAE,GAAG,CAAC,GAC1B,SAAS,CAAC,GAAG,CAAC,GACd,KAAK,CAAC,aAAa,CAAC,GAAG,CAAC,GACxB,SAAS,GACT,KAAK,GAAG,SAAS,IACnB,UAAU,SAAS,gBAAgB,CAAC,MAAM,CAAC,EAAE,MAAM,CAAC,CAAC,GACrD,CAAC,QAAQ,CAAC,SAAS,CAAC,KAAK,CAAC,GACxB,CAAC,GACD,QAAQ,SAAS,SAAS,GAC1B,CAAC,SAAS,MAAM,GAAG,CAAC,iBAAiB,GACnC,CAAC,GAAG,qBAAqB,CAAC,GAAG,CAAC,iBAAiB,CAAC,CAAC,CAAC,CAAC,GACnD,CAAC,GAAG,yBAAyB,CAAC,CAAC,CAAC,GAClC,QAAQ,SAAS,MAAM,GAAG,CAAC,iBAAiB,GAC5C,CAAC,GAAG,qBAAqB,CAAC,GAAG,CAAC,iBAAiB,CAAC,QAAQ,CAAC,CAAC,GAC1D,CAAC,GAAG,yBAAyB,CAAC,QAAQ,CAAC,GACzC,yBAAyB,CAAC,UAAU,CAAC,CAAC;AAK1C,aAAK,yBAAyB,CAAC,UAAU,IAAI,UAAU,SAAS,gBAAgB,CAAC,MAAM,CAAC,EAAE,MAAM,CAAC,CAAC,GAC9F,CAAC,SAAS,MAAM,GAAG,CAAC,iBAAiB,GACnC,CAAC,GAAG,qBAAqB,CAAC,GAAG,CAAC,iBAAiB,CAAC,CAAC,CAAC,CAAC,GACnD,CAAC,GACH,UAAU,SAAS,SAAS,CAAC,MAAM,CAAC,CAAC,GACrC,CAAC,GACD,UAAU,SAAS,KAAK,CAAC,aAAa,CAAC,MAAM,CAAC,CAAC,GAC/C,CAAC,GACD,EAAE,CAAC;AAEP;;;GAGG;AACH,oBAAY,gBAAgB,CAAC,CAAC,SAAS,KAAK,CAAC,WAAW,EAAE,CAAC,IAAI;IAC7D,MAAM,EAAE,kBAAkB,CAAC;IAC3B,CAAC,WAAW,SAAS,KAAK,CAAC,WAAW,EACpC,KAAK,EAAE,WAAW,CAAC,CAAC,EAAE,WAAW,CAAC,GAAG;QACnC;;;;WAIG;QACH,EAAE,EAAE,WAAW,CAAC;KACjB,GACA,GAAG,CAAC,OAAO,CAAC;IACf,CAAC,KAAK,EAAE,WAAW,CAAC,CAAC,EAAE,CAAC,CAAC,GAAG,GAAG,CAAC,OAAO,CAAC;IACxC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,EAAE,CAAC,CAAC,SAAS,KAAK,CAAC,WAAW,EAAE,EAAE,EAAE,CAAC,GAAG,gBAAgB,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC;CAChE,CAAC;AAEF,oBAAY,SAAS,CAAC,CAAC,IAAI;IACzB,MAAM,EAAE,WAAW,CAAC;IACpB,CAAC,KAAK,EAAE,CAAC,GAAG,GAAG,CAAC,OAAO,CAAC;IACxB,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB,CAAC;AAEF,UAAU,sBAAsB,CAAC,CAAC,EAAE,CAAC,GAAG,EAAE;IACxC,CACE,KAAK,EAAE,KAAK,CAAC,iBAAiB,CAAC,CAAC,CAAC,GAAG;QAAC,EAAE,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC,GAAG,CAAC,CAAA;KAAC;IAClE;;;OAGG;IACH,GAAG,EAAE,UAAU,CAAC,CAAC,CAAC;IAClB;;;;OAIG;IACH,OAAO,EAAE,CAAC,SAAS,SAAS,GAAG,KAAK,GAAG,CAAC,GACvC,KAAK,CAAC,YAAY,GAAG,IAAI,CAAC;CAC9B;AAED;;;;;GAKG;AACH,eAAO,MAAM,eAAe;IAa1B;uCACmC;;IAEnC;;;;;;;;;;;;;;;;;OAiBG;;IAEH;;OAEG;;wHA0CJ,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAiCG;AACH,eAAO,MAAM,UAAU;;OAWtB,CAAC;AAEF,eAAO,MAAM,YAAY;;;;OAOxB,CAAC;AAYF,oBAAY,YAAY,CAAC,CAAC,SAAS,KAAK,CAAC,GAAG,EAAE,GAAG,CAAC,EAAE,CAAC,SAAS,EAAE,IAAI;IAClE,cAAc,CAAC,CAAC,SAAS,EAAE,EAAE,CAAC,EAC5B,KAAK,EAAE,CAAC,EACR,SAAS,CAAC,EAAE,CAAC,EACb,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,GACjB,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC,SAAS,gBAAgB,GAAG;QAAC,GAAG,EAAE,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,CAAA;KAAC,GAAG,EAAE,CAAC,CAAC;CACpE,CAAC,gBAAgB,CAAC,CAAC;AAapB;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AACH,wBAAgB,UAAU,CAAC,CAAC,EAAE,IAAI,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,IAAI,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,GAAG,KAAK,CAAC,WAAW,CAAC,CAAC,CAAC,CAK5F;AAED;;;;;;;;;;;;;GAaG;AACH,wBAAgB,WAAW,CAAC,CAAC,EAAE,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC;;;EAKhD;AAED;;;;;;;;;;;;GAYG;AACH,wBAAgB,eAAe,CAAC,CAAC,EAAE,CAAC,EAClC,KAAK,EAAE,CAAC,GAAG,SAAS,EACpB,MAAM,EAAE,CAAC,EACT,SAAS,EAAE,CAAC,MAAM,EAAE,CAAC,KAAK,CAAC,KAG5B;AAED;;;;;;;;;;;GAWG;AACH,wBAAgB,eAAe,CAAC,CAAC,EAAE,OAAO,EAAE,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC,EAAE,KAAK,CAAC,EAAE,CAAC,GAAG,CAAC,CAG1E;AAED;;;;;;;;;;;;;;;;GAgBG;AACH,wBAAgB,YAAY,CAAC,CAAC,SAAS,KAAK,CAAC,GAAG,EAAE,GAAG,CAAC,EAAE,EAAE,SAAS,EAAE,EAAE,EAAE,SAAS,EAAE,EAClF,KAAK,EAAE,YAAY,CAAC,CAAC,EAAE,EAAE,CAAC,EAC1B,KAAK,EAAE,YAAY,CAAC,CAAC,EAAE,EAAE,CAAC,GACzB,YAAY,CAAC,CAAC,EAAE,EAAE,GAAG,EAAE,CAAC,CAAC;AAE5B,wBAAgB,YAAY,CAC1B,CAAC,SAAS,KAAK,CAAC,GAAG,EAAE,GAAG,CAAC,EACzB,CAAC,EACD,CAAC,SAAS,EAAE,EACZ,EAAE,SAAS,EAAE,EACb,EAAE,SAAS,EAAE,EACb,EAAE,SAAS,EAAE,EAEb,KAAK,EAAE,YAAY,CAAC,CAAC,EAAE,EAAE,CAAC,EAC1B,KAAK,EAAE,YAAY,CAAC,CAAC,EAAE,EAAE,CAAC,EAC1B,KAAK,EAAE,YAAY,CAAC,CAAC,EAAE,EAAE,CAAC,GACzB,YAAY,CAAC,CAAC,EAAE,EAAE,GAAG,EAAE,GAAG,EAAE,CAAC,CAAC;AACjC,wBAAgB,YAAY,CAC1B,CAAC,SAAS,KAAK,CAAC,GAAG,EAAE,GAAG,CAAC,EACzB,CAAC,EACD,CAAC,SAAS,EAAE,EACZ,EAAE,SAAS,EAAE,EACb,EAAE,SAAS,EAAE,EACb,EAAE,SAAS,EAAE,EACb,EAAE,SAAS,EAAE,EAEb,KAAK,EAAE,YAAY,CAAC,CAAC,EAAE,EAAE,CAAC,EAC1B,KAAK,EAAE,YAAY,CAAC,CAAC,EAAE,EAAE,CAAC,EAC1B,KAAK,EAAE,YAAY,CAAC,CAAC,EAAE,EAAE,CAAC,EAC1B,KAAK,EAAE,YAAY,CAAC,CAAC,EAAE,EAAE,CAAC,GACzB,YAAY,CAAC,CAAC,EAAE,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,CAAC,CAAC;AACtC,wBAAgB,YAAY,CAC1B,CAAC,SAAS,KAAK,CAAC,GAAG,EAAE,GAAG,CAAC,EACzB,CAAC,EACD,CAAC,SAAS,EAAE,EACZ,EAAE,SAAS,EAAE,EACb,EAAE,SAAS,EAAE,EACb,EAAE,SAAS,EAAE,EACb,EAAE,SAAS,EAAE,EACb,EAAE,SAAS,EAAE,EAEb,KAAK,EAAE,YAAY,CAAC,CAAC,EAAE,EAAE,CAAC,EAC1B,KAAK,EAAE,YAAY,CAAC,CAAC,EAAE,EAAE,CAAC,EAC1B,KAAK,EAAE,YAAY,CAAC,CAAC,EAAE,EAAE,CAAC,EAC1B,KAAK,EAAE,YAAY,CAAC,CAAC,EAAE,EAAE,CAAC,EAC1B,KAAK,EAAE,YAAY,CAAC,CAAC,EAAE,EAAE,CAAC,GACzB,YAAY,CAAC,CAAC,EAAE,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,CAAC,CAAC"}

package/dist/es6/common/lib/utils/components.js

@@ -41,6 +41,11 @@ export var createComponent = function (as) { return function (_a) {
         ReturnedComponent[key] = subComponents[key];
     });
     ReturnedComponent.displayName = displayName;
+    // The `any`s are here because `ElementComponent` takes care of the `as` type and the
+    // `ReturnComponent` type is overridden
+    ReturnedComponent.as = function (as) {
+        return createComponent(as)({ displayName: displayName, Component: Component, subComponents: subComponents });
+    };
     // Cast as `any`. We have already specified the return type. Be careful making changes to this
     // file due to this `any` `ReturnedComponent` is a `React.ForwardRefExoticComponent`, but we want
     // it to be either an `Component` or `ElementComponent`
@@ -83,13 +88,18 @@ export var createComponent = function (as) { return function (_a) {
 export var createHook = function (fn) {
     return function (model, elemProps, ref) {
         var props = mergeProps(fn(model, ref, elemProps || {}), elemProps || {});
-        if (!props.hasOwnProperty('ref')) {
+        if (!props.hasOwnProperty('ref') && ref) {
             // This is the weird "incoming ref isn't in props, but outgoing ref is in props" thing
             props.ref = ref;
         }
         return props;
     };
 };
+export var subModelHook = function (fn, hook) {
+    return function (model, props, ref) {
+        return hook(fn(model), props, ref);
+    };
+};
 function setRef(ref, value) {
     if (ref) {
         if (typeof ref === 'function') {
@@ -191,7 +201,7 @@ export function composeHooks() {
         var returnProps = __spreadArrays(hooks).reverse().reduce(function (props, hook) {
             return hook(model, props, props.ref || ref);
         }, props);
-        if (!returnProps.hasOwnProperty('ref')) {
+        if (!returnProps.hasOwnProperty('ref') && ref) {
             // This is the weird "incoming ref isn't in props, but outgoing ref is in props" thing
             returnProps.ref = ref;
         }

package/dist/es6/common/lib/utils/elements.d.ts

@@ -1,8 +1,8 @@
 /**
  * Is an element focusable? This function performs various tests to see if the element in question
- * can receive focus.
+ * can receive focus. Should skip disabled elements as they are not focusable.
  */
-export declare const isFocusable: (element: HTMLElement) => boolean;
+export declare const isFocusable: (element: HTMLElement) => boolean | null;
 /**
  * Get the first focusable element in a container.
  */

package/dist/es6/common/lib/utils/elements.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"elements.d.ts","sourceRoot":"","sources":["../../../../../common/lib/utils/elements.ts"],"names":[],"mappings":"AAAA;;;GAGG;AACH,eAAO,MAAM,WAAW,mCAwBvB,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,wBAAwB,gDAWpC,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,uBAAuB,gDAWnC,CAAC"}
+{"version":3,"file":"elements.d.ts","sourceRoot":"","sources":["../../../../../common/lib/utils/elements.ts"],"names":[],"mappings":"AAAA;;;GAGG;AACH,eAAO,MAAM,WAAW,0CA4BvB,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,wBAAwB,gDAWpC,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,uBAAuB,gDAWnC,CAAC"}

package/dist/es6/common/lib/utils/elements.js

@@ -1,8 +1,11 @@
 /**
  * Is an element focusable? This function performs various tests to see if the element in question
- * can receive focus.
+ * can receive focus. Should skip disabled elements as they are not focusable.
  */
 export var isFocusable = function (element) {
+    if (element.hasAttribute('disabled')) {
+        return null;
+    }
     var nodeName = element.nodeName.toLowerCase();
     var validInput = nodeName === 'input' && element.getAttribute('type') !== 'hidden';
     var validAnchor = nodeName === 'a' && element.hasAttribute('href');

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

@@ -10,7 +10,9 @@ export * from './useMount';
 export * from './components';
 export * from './models';
 export * from './elements';
+export * from './useConstant';
 export * from './useIsFullscreen';
 export * from './useWindowSize';
+export * from './useResizeObserver';
 export * from './StaticStates';
 //# sourceMappingURL=index.d.ts.map

package/dist/es6/common/lib/utils/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../common/lib/utils/index.ts"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAC;AAC7B,cAAc,0BAA0B,CAAC;AACzC,cAAc,eAAe,CAAC;AAC9B,cAAc,UAAU,CAAC;AACzB,cAAc,iBAAiB,CAAC;AAChC,cAAc,cAAc,CAAC;AAC7B,cAAc,eAAe,CAAC;AAC9B,cAAc,UAAU,CAAC;AACzB,cAAc,YAAY,CAAC;AAC3B,cAAc,cAAc,CAAC;AAC7B,cAAc,UAAU,CAAC;AACzB,cAAc,YAAY,CAAC;AAC3B,cAAc,mBAAmB,CAAC;AAClC,cAAc,iBAAiB,CAAC;AAChC,cAAc,gBAAgB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../common/lib/utils/index.ts"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAC;AAC7B,cAAc,0BAA0B,CAAC;AACzC,cAAc,eAAe,CAAC;AAC9B,cAAc,UAAU,CAAC;AACzB,cAAc,iBAAiB,CAAC;AAChC,cAAc,cAAc,CAAC;AAC7B,cAAc,eAAe,CAAC;AAC9B,cAAc,UAAU,CAAC;AACzB,cAAc,YAAY,CAAC;AAC3B,cAAc,cAAc,CAAC;AAC7B,cAAc,UAAU,CAAC;AACzB,cAAc,YAAY,CAAC;AAC3B,cAAc,eAAe,CAAC;AAC9B,cAAc,mBAAmB,CAAC;AAClC,cAAc,iBAAiB,CAAC;AAChC,cAAc,qBAAqB,CAAC;AACpC,cAAc,gBAAgB,CAAC"}

package/dist/es6/common/lib/utils/index.js

@@ -10,6 +10,8 @@ export * from './useMount';
 export * from './components';
 export * from './models';
 export * from './elements';
+export * from './useConstant';
 export * from './useIsFullscreen';
 export * from './useWindowSize';
+export * from './useResizeObserver';
 export * from './StaticStates';

package/dist/es6/common/lib/utils/mergeProps.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"mergeProps.d.ts","sourceRoot":"","sources":["../../../../../common/lib/utils/mergeProps.ts"],"names":[],"mappings":"AAMA;;;GAGG;AACH,wBAAgB,UAAU,CAAC,CAAC,SAAS,MAAM,EAAE,CAAC,SAAS,MAAM,EAC3D,WAAW,EAAE,CAAC,EACd,WAAW,EAAE,CAAC,GACb,CAAC,GAAG,CAAC,CAoCP"}
+{"version":3,"file":"mergeProps.d.ts","sourceRoot":"","sources":["../../../../../common/lib/utils/mergeProps.ts"],"names":[],"mappings":"AAMA;;;GAGG;AACH,wBAAgB,UAAU,CAAC,CAAC,SAAS,MAAM,EAAE,CAAC,SAAS,MAAM,EAC3D,WAAW,EAAE,CAAC,EACd,WAAW,EAAE,CAAC,GACb,CAAC,GAAG,CAAC,CAwCP"}

package/dist/es6/common/lib/utils/mergeProps.js

@@ -44,6 +44,11 @@ export function mergeProps(targetProps, sourceProps) {
                 typeof targetProps[key] === 'function') {
                 // we don't support removing callbacks via `undefined`, so do nothing here
             }
+            else if (key === 'ref' && sourceProps.hasOwnProperty('ref')) {
+                // refs should never be overridden. This doesn't happen normally, but happens with hook
+                // composition
+                returnProps.ref = returnProps.ref || sourceProps.ref;
+            }
             else {
                 // @ts-ignore TS has more object constraint complaints that aren't useful here
                 returnProps[key] = sourceProps[key];

package/dist/es6/common/lib/utils/useConstant.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Get a constant value in React, only running the callback function once.  `React.useMemo` does not
+ * guarantee that a function will only be run once.
+ *
+ * @example
+ * const value = useConstant(generateUniqueId)
+ */
+export declare function useConstant<T>(fn: () => T): T;
+//# sourceMappingURL=useConstant.d.ts.map

package/dist/es6/common/lib/utils/useConstant.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useConstant.d.ts","sourceRoot":"","sources":["../../../../../common/lib/utils/useConstant.ts"],"names":[],"mappings":"AAEA;;;;;;GAMG;AACH,wBAAgB,WAAW,CAAC,CAAC,EAAE,EAAE,EAAE,MAAM,CAAC,GAAG,CAAC,CAQ7C"}

package/dist/es6/common/lib/utils/useConstant.js

@@ -0,0 +1,15 @@
+import { useRef } from 'react';
+/**
+ * Get a constant value in React, only running the callback function once.  `React.useMemo` does not
+ * guarantee that a function will only be run once.
+ *
+ * @example
+ * const value = useConstant(generateUniqueId)
+ */
+export function useConstant(fn) {
+    var ref = useRef();
+    if (!ref.current) {
+        ref.current = fn();
+    }
+    return ref.current;
+}

package/dist/es6/common/lib/utils/useResizeObserver.d.ts

@@ -0,0 +1,3 @@
+import useResizeObserverOriginal from 'use-resize-observer';
+export declare const useResizeObserver: typeof useResizeObserverOriginal;
+//# sourceMappingURL=useResizeObserver.d.ts.map

package/dist/es6/common/lib/utils/useResizeObserver.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useResizeObserver.d.ts","sourceRoot":"","sources":["../../../../../common/lib/utils/useResizeObserver.ts"],"names":[],"mappings":"AAEA,OAAO,yBAAyB,MAAM,qBAAqB,CAAC;AAU5D,eAAO,MAAM,iBAAiB,EAAE,OAAO,yBAatC,CAAC"}

package/dist/es6/common/lib/utils/useResizeObserver.js

@@ -0,0 +1,37 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import React from 'react';
+import useResizeObserverOriginal from 'use-resize-observer';
+import ResizeObserver from 'resize-observer-polyfill';
+if (typeof window !== 'undefined' && !window.ResizeObserver) {
+    window.ResizeObserver = ResizeObserver;
+}
+// `useResizeObserver` contains this fix in 8.0.0:
+// https://github.com/ZeeCoder/use-resize-observer/commit/bd0f3c8597bac0d853b88cf585256aac1bd4f554
+// v8.0.0 requires TS4.2. So we'll manually patch until we're ready for TS4.2+
+export var useResizeObserver = function (params) {
+    if (params === void 0) { params = {}; }
+    var widthRef = React.useRef();
+    var heightRef = React.useRef();
+    var onResize = params.onResize
+        ? function (data) {
+            if (widthRef.current !== data.width || heightRef.current !== data.height) {
+                widthRef.current = data.width;
+                heightRef.current = data.height;
+                params.onResize(data);
+            }
+        }
+        : undefined;
+    return useResizeObserverOriginal(__assign(__assign({}, params), { onResize: onResize }));
+};
+// When the dependency is moved up to v8.0.0, remove the above function and export below instead
+// export {useResizeObserver};

package/dist/es6/common/lib/utils/useUniqueId.d.ts

@@ -1,3 +1,12 @@
+/**
+ * Generates a unique and HTML5 compliant identifier every time it is called. Internally it uses a 4
+ * character random seed starting with a letter. This seed is unique to each instance of this
+ * package meaning different versions of Canvas Kit on the page will have a different seed. Each
+ * call will use a Base 36 string (10 numbers + 26 letters) based on an incremented number. The
+ * incremented number always starts at 0 and can be reset for testing purposes using
+ * [resetUniqueIdCount](#resetuniqueidcount). [setUniqueSeed](#setuniqueseed) can also be used for
+ * testing or server side rendering to get the same results during hydration.
+ */
 export declare const generateUniqueId: () => string;
 /**
  * Generate a unique ID if one is not provided. The generated ID will be stable across renders
@@ -10,4 +19,23 @@ export declare const useUniqueId: (id?: string | undefined) => string;
  * TODO: Remove in major release
  */
 export declare const uniqueId: (id?: string | undefined) => string;
+/**
+ * Update the seed used by the id generator. This is useful for snapshot tests to help stabilize ids
+ * generated each run. This could also be used for server-side hydration - if you choose the same
+ * seed for server and set that on the client before components are rendered, the ids generated will
+ * be the same.
+ * @example
+ * // set in a script tag from the server
+ * setSeed(window.__ID_SEED); // set in a script tag from the server
+ *
+ * // jest setup
+ * before(() => {
+ *   setSeed('a')
+ * })
+ */
+export declare const setUniqueSeed: (s: string) => void;
+/**
+ * This should only be called for tests in an `beforeEach`
+ */
+export declare const resetUniqueIdCount: () => void;
 //# sourceMappingURL=useUniqueId.d.ts.map

package/dist/es6/common/lib/utils/useUniqueId.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useUniqueId.d.ts","sourceRoot":"","sources":["../../../../../common/lib/utils/useUniqueId.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,gBAAgB,cAAwC,CAAC;AAEtE;;;GAGG;AACH,eAAO,MAAM,WAAW,qCAIvB,CAAC;AAEF;;;;GAIG;AACH,eAAO,MAAM,QAAQ,qCAAc,CAAC"}
+{"version":3,"file":"useUniqueId.d.ts","sourceRoot":"","sources":["../../../../../common/lib/utils/useUniqueId.ts"],"names":[],"mappings":"AAWA;;;;;;;;GAQG;AACH,eAAO,MAAM,gBAAgB,cAAkC,CAAC;AAEhE;;;GAGG;AACH,eAAO,MAAM,WAAW,qCAIvB,CAAC;AAEF;;;;GAIG;AACH,eAAO,MAAM,QAAQ,qCAAc,CAAC;AAEpC;;;;;;;;;;;;;GAaG;AACH,eAAO,MAAM,aAAa,qBAEzB,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,kBAAkB,YAE9B,CAAC"}

package/dist/es6/common/lib/utils/useUniqueId.js

@@ -1,13 +1,28 @@
-import * as React from 'react';
-import uuid from 'uuid/v4';
-export var generateUniqueId = function () { return uuid().replace(/^[0-9]*/gi, ''); };
+import { useConstant } from './useConstant';
+// Create a unique seed per import to prevent collisions from other versions of `useUniqueId`
+var seed = Math.random()
+    .toString(36)
+    .slice(2)
+    .replace(/[0-9]*/, '')
+    .substr(0, 4);
+var c = 0;
+/**
+ * Generates a unique and HTML5 compliant identifier every time it is called. Internally it uses a 4
+ * character random seed starting with a letter. This seed is unique to each instance of this
+ * package meaning different versions of Canvas Kit on the page will have a different seed. Each
+ * call will use a Base 36 string (10 numbers + 26 letters) based on an incremented number. The
+ * incremented number always starts at 0 and can be reset for testing purposes using
+ * [resetUniqueIdCount](#resetuniqueidcount). [setUniqueSeed](#setuniqueseed) can also be used for
+ * testing or server side rendering to get the same results during hydration.
+ */
+export var generateUniqueId = function () { return seed + (c++).toString(36); };
 /**
  * Generate a unique ID if one is not provided. The generated ID will be stable across renders
  * @param id Optional ID provided that will be used instead of a unique ID
  */
 export var useUniqueId = function (id) {
     // https://codesandbox.io/s/react-functional-component-ids-p2ndq
-    var generatedId = React.useState(generateUniqueId)[0];
+    var generatedId = useConstant(generateUniqueId);
     return id || generatedId;
 };
 /**
@@ -16,3 +31,26 @@ export var useUniqueId = function (id) {
  * TODO: Remove in major release
  */
 export var uniqueId = useUniqueId;
+/**
+ * Update the seed used by the id generator. This is useful for snapshot tests to help stabilize ids
+ * generated each run. This could also be used for server-side hydration - if you choose the same
+ * seed for server and set that on the client before components are rendered, the ids generated will
+ * be the same.
+ * @example
+ * // set in a script tag from the server
+ * setSeed(window.__ID_SEED); // set in a script tag from the server
+ *
+ * // jest setup
+ * before(() => {
+ *   setSeed('a')
+ * })
+ */
+export var setUniqueSeed = function (s) {
+    seed = s;
+};
+/**
+ * This should only be called for tests in an `beforeEach`
+ */
+export var resetUniqueIdCount = function () {
+    c = 0;
+};