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

package/ts3.5/dist/commonjs/common/lib/theming/breakpoints.d.ts

@@ -7,16 +7,297 @@ export declare enum BreakpointKey {
 }
 export declare type BreakpointFnParam = BreakpointKey | keyof typeof BreakpointKey;
 export declare type CanvasBreakpoints = {
-    zero: number;
-    s: number;
-    m: number;
-    l: number;
-    xl: number;
+    /**
+     * ### Zero Breakpoint
+     *
+     * This breakpoint is useful when you need to set a media query `min-width` below small.
+     *
+     * @example
+     * ```ts
+     * import { useTheme } from '@workday/canvas-kit-react/common';
+     * import { space } from '@workday/canvas-kit-react/tokens';
+     *
+     * const theme = useTheme();
+     * const { values } = theme.canvas.breakpoints;
+     * const styles = {
+     *   [`@media (min-width: ${values.zero}px)`]: {
+     *     padding: space.xxs,
+     *   },
+     * }
+     * ```
+     */
+    zero: 0;
+    /**
+     * ### Small Breakpoint
+     *
+     * The small breakpoint provides the `min-width` for mobile devices, such as phones and tablets.
+     * This size ranges from a min-width of 320px to a max-width of 767px.
+     *
+     * @example
+     * ```ts
+     * import { useTheme } from '@workday/canvas-kit-react/common';
+     * import { space } from '@workday/canvas-kit-react/tokens';
+     *
+     * const theme = useTheme();
+     * const { values } = theme.canvas.breakpoints;
+     * const styles = {
+     *   [`@media (min-width: ${values.s}px)`]: {
+     *     padding: space.xs,
+     *   },
+     * }
+     * ```
+     */
+    s: 320;
+    /**
+     * ### Medium Breakpoint
+     *
+     * The medium breakpoint is the min-width for intended for medium screens, such as laptops.
+     * This size ranges from a min-width of 768px to a max-width of 1023px.
+     *
+     * @example
+     * ```ts
+     * import { useTheme } from '@workday/canvas-kit-react/common';
+     * import { space } from '@workday/canvas-kit-react/tokens';
+     *
+     * const theme = useTheme();
+     * const { values } = theme.canvas.breakpoints;
+     * const styles = {
+     *   [`@media (min-width: ${values.m}px)`]: {
+     *     padding: space.s,
+     *   },
+     * }
+     * ```
+     */
+    m: 768;
+    /**
+     * ### Large Breakpoint
+     *
+     * The large breakpoint is the min-width for intended for large screens, such as desktops.
+     * This size ranges from a min-width of 1024px to a max-width of 1439px.
+     *
+     * @example
+     * ```ts
+     * import { useTheme } from '@workday/canvas-kit-react/common';
+     * import { space } from '@workday/canvas-kit-react/tokens';
+     *
+     * const theme = useTheme();
+     * const { values } = theme.canvas.breakpoints;
+     * const styles = {
+     *   [`@media (min-width: ${values.m}px)`]: {
+     *     padding: space.s,
+     *   },
+     * }
+     * ```
+     */
+    l: 1024;
+    /**
+     * ### Extra-Large Breakpoint
+     *
+     * The large breakpoint is the min-width for intended for extra-large screens, such as wide monitors and TVs.
+     * This size has a min-width of 1440px and no max-width.
+     *
+     * @example
+     * ```ts
+     * import { useTheme } from '@workday/canvas-kit-react/common';
+     * import { space } from '@workday/canvas-kit-react/tokens';
+     *
+     * const theme = useTheme();
+     * const { values } = theme.canvas.breakpoints;
+     * const styles = {
+     *   [`@media (min-width: ${values.m}px)`]: {
+     *     padding: space.s
+     *   },
+     * }
+     * ```
+     */
+    xl: 1440;
 };
 export declare const breakpointKeys: readonly ["zero", "s", "m", "l", "xl"];
+/**
+ * ### Theme Breakpoint Values
+ *
+ * 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 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.
+ *
+ */
 export declare const breakpoints: 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,
+ *   }
+ * };
+ * ```
+ */
 export declare function up(key: BreakpointFnParam): string;
-export declare function down(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,
+ *   }
+ * };
+ * ```
+ */
+export declare function down(endKey: 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,
+ *   }
+ * };
+ * ```
+ */
 export declare function 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,
+ *   }
+ * };
+ * ```
+ */
 export declare function only(key: BreakpointFnParam): string;
 //# sourceMappingURL=breakpoints.d.ts.map

package/ts3.5/dist/commonjs/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/ts3.5/dist/commonjs/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" | "s" | "big" | "link" | "small" | "sub" | "sup" | "circle" | "stop" | "path" | "style" | "map" | "filter" | "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" | "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" | "summary" | "table" | "template" | "tbody" | "td" | "textarea" | "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" | "foreignObject" | "g" | "image" | "line" | "linearGradient" | "marker" | "mask" | "metadata" | "mpath" | "pattern" | "polygon" | "polyline" | "radialGradient" | "rect" | "switch" | "text" | "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" | "s" | "big" | "link" | "small" | "sub" | "sup" | "circle" | "stop" | "path" | "style" | "map" | "filter" | "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" | "mark" | "menu" | "menuitem" | "meta" | "meter" | "nav" | "noindex" | "noscript" | "ol" | "optgroup" | "option" | "output" | "p" | "param" | "picture" | "pre" | "progress" | "q" | "rp" | "rt" | "ruby" | "samp" | "slot" | "script" | "section" | "select" | "source" | "span" | "strong" | "summary" | "table" | "template" | "tbody" | "td" | "textarea" | "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" | "foreignObject" | "g" | "image" | "line" | "linearGradient" | "marker" | "mask" | "metadata" | "mpath" | "pattern" | "polygon" | "polyline" | "radialGradient" | "rect" | "switch" | "text" | "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" | "s" | "bi
  *
  * @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/ts3.5/dist/commonjs/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/ts3.5/dist/commonjs/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/ts3.5/dist/commonjs/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/ts3.5/dist/commonjs/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/ts3.5/dist/commonjs/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