@workday/canvas-kit-react 7.1.4 → 7.2.0-427-next.2

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

@@ -1,117 +1,104 @@
-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);
-};
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
-var __spreadArrays = (this && this.__spreadArrays) || function () {
-    for (var s = 0, i = 0, il = arguments.length; i < il; i++) s += arguments[i].length;
-    for (var r = Array(s), k = 0, i = 0; i < il; i++)
-        for (var a = arguments[i], j = 0, jl = a.length; j < jl; j++, k++)
-            r[k] = a[j];
-    return r;
-};
 import React from 'react';
 import { assert } from './assert';
+import { memoize } from './memoize';
 import { mergeProps } from './mergeProps';
 function defaultGetElemProps(input) {
     return input;
 }
-export var createContainer = function (as) { return function (_a) {
-    var displayName = _a.displayName, modelHook = _a.modelHook, elemPropsHook = _a.elemPropsHook, defaultContext = _a.defaultContext, subComponents = _a.subComponents;
-    var Context = modelHook.Context ||
-        React.createContext({ state: {}, events: {}, defaultConfig: modelHook.defaultConfig });
-    return function (Component) {
-        var ReturnedComponent = React.forwardRef(function (_a, ref) {
-            var asOverride = _a.as, model = _a.model, props = __rest(_a, ["as", "model"]);
-            var localModel = useDefaultModel(model, props, modelHook);
-            var elemProps = (modelHook.getElemProps || defaultGetElemProps)(props);
-            var finalElemProps = elemPropsHook
+export const createContainer = (as) => ({ displayName, modelHook, elemPropsHook, defaultContext, subComponents, }) => {
+    assert(modelHook.Context, 'createContainer only works on models with context. Please use `createModelHook` to create the `modelHook`');
+    const Context = modelHook.Context;
+    return (Component) => {
+        const ReturnedComponent = React.forwardRef(({ as: asOverride, model, ...props }, ref) => {
+            const localModel = useDefaultModel(model, props, modelHook, asOverride);
+            const elemProps = (modelHook.getElemProps || defaultGetElemProps)(props);
+            const finalElemProps = elemPropsHook
                 ? elemPropsHook(localModel, elemProps, ref)
                 : elemProps;
+            // make sure there's always a ref being passed, even if there are no elemProps hooks to run
+            if (ref && !finalElemProps.hasOwnProperty('ref')) {
+                finalElemProps.ref = ref;
+            }
             return React.createElement(Context.Provider, { value: localModel }, Component(finalElemProps, 
             // Cast to `any` to avoid: "ts(2345): Type 'undefined' is not assignable to type 'E extends
             // undefined ? never : E'" I'm not sure I can actually cast to this conditional type and it
             // doesn't actually matter, so cast to `any` it is.
             (asOverride || as), localModel));
         });
-        Object.keys(subComponents || {}).forEach(function (key) {
+        Object.keys(subComponents || {}).forEach(key => {
             // `ReturnedComponent` is a `React.ForwardRefExoticComponent` which has no additional keys so
             // we'll cast to `Record<string, any>` for assignment. Note the lack of type checking
             // properties. Take care when changing the runtime of this function.
             ReturnedComponent[key] = subComponents[key];
+            // Add a displayName if one isn't already created. This prevents us from having to add
+            // `displayName` to subcomponents if a container component has a `displayName`
+            if (displayName && !subComponents[key].displayName) {
+                subComponents[key].displayName = `${displayName}.${key}`;
+            }
         });
         ReturnedComponent.displayName = displayName;
-        ReturnedComponent.Context = Context;
+        ReturnedComponent.__hasModel = true;
+        // The `any`s are here because `ElementComponent` takes care of the `as` type and the
+        // `ReturnComponent` type is overridden
+        ReturnedComponent.as = memoize((as) => createContainer(as)({ displayName, subComponents, modelHook, elemPropsHook })(Component), as => as);
         // 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`
         return ReturnedComponent;
     };
-}; };
-// export type ModelComponentFn<TModelHook, TElemPropsHook, SubComponents> = <Props={}>(Component: ())
-export var createSubcomponent = function (as) { return function (_a) {
-    var displayName = _a.displayName, modelHook = _a.modelHook, elemPropsHook = _a.elemPropsHook, subComponents = _a.subComponents;
+};
+export const createSubcomponent = (as) => ({ displayName, modelHook, elemPropsHook, subComponents, }) => {
     assert(modelHook.Context, 'createSubcomponent only works on models with context. Please use `createModelHook` to create the `modelHook`');
-    return function (Component) {
-        var ReturnedComponent = React.forwardRef(function (_a, ref) {
-            var asOverride = _a.as, model = _a.model, additionalPropsHook = _a.elemPropsHook, props = __rest(_a, ["as", "model", "elemPropsHook"]);
-            var localModel = useModelContext(modelHook.Context, model);
-            var elemProps = elemPropsHook
-                ? elemPropsHook(localModel, props, ref)
-                : __assign(__assign({}, props), { ref: ref });
+    return (Component) => {
+        const ReturnedComponent = React.forwardRef(({ as: asOverride, model, elemPropsHook: additionalPropsHook, ...props }, ref) => {
+            const localModel = useModelContext(modelHook.Context, model, asOverride);
+            // maybeModelProps reattached the `model` prop if the passed model is incompatible with the
+            // modelHook's context. This fixes issues when using the `as` prop on model element components
+            // that both have a model
+            const maybeModelProps = model && localModel !== model ? { ...props, model, ref } : { ...props, ref };
+            const elemProps = elemPropsHook
+                ? elemPropsHook(localModel, maybeModelProps, ref)
+                : maybeModelProps;
             return Component(additionalPropsHook ? additionalPropsHook(localModel, elemProps, ref) : elemProps, 
             // Cast to `any` to avoid: "ts(2345): Type 'undefined' is not assignable to type 'E extends
             // undefined ? never : E'" I'm not sure I can actually cast to this conditional type and it
             // doesn't actually matter, so cast to `any` it is.
             (asOverride || as), localModel);
         });
-        Object.keys(subComponents || {}).forEach(function (key) {
+        Object.keys(subComponents || {}).forEach(key => {
             // `ReturnedComponent` is a `React.ForwardRefExoticComponent` which has no additional keys so
             // we'll cast to `Record<string, any>` for assignment. Note the lack of type checking
             // properties. Take care when changing the runtime of this function.
             ReturnedComponent[key] = subComponents[key];
         });
-        ReturnedComponent.displayName = displayName;
+        if (displayName) {
+            ReturnedComponent.displayName = displayName;
+        }
+        ReturnedComponent.__hasModel = true;
+        // The `any`s are here because `ElementComponent` takes care of the `as` type and the
+        // `ReturnComponent` type is overridden
+        ReturnedComponent.as = memoize((as) => createSubcomponent(as)({ displayName, subComponents, modelHook, elemPropsHook })(Component), as => as);
         // 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`
         return ReturnedComponent;
     };
-}; };
+};
 /**
  * Factory function that creates components to be exported. It enforces React ref forwarding, `as`
  * prop, display name, and sub-components, and handles proper typing without much boiler plate. The
  * 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 var createComponent = function (as) { return function (_a) {
-    var displayName = _a.displayName, Component = _a.Component, subComponents = _a.subComponents;
-    var ReturnedComponent = React.forwardRef(function (_a, ref) {
-        var asOverride = _a.as, props = __rest(_a, ["as"]);
+export const createComponent = (as) => ({ displayName, Component, subComponents, }) => {
+    const ReturnedComponent = React.forwardRef(({ as: asOverride, ...props }, ref) => {
         return Component(props, ref, 
         // Cast to `any` to avoid: "ts(2345): Type 'undefined' is not assignable to type 'E extends
         // undefined ? never : E'" I'm not sure I can actually cast to this conditional type and it
         // doesn't actually matter, so cast to `any` it is.
         (asOverride || as));
     });
-    Object.keys(subComponents || {}).forEach(function (key) {
+    Object.keys(subComponents || {}).forEach(key => {
         // `ReturnedComponent` is a `React.ForwardRefExoticComponent` which has no additional keys so
         // we'll cast to `Record<string, any>` for assignment. Note the lack of type checking
         // properties. Take care when changing the runtime of this function.
@@ -120,22 +107,51 @@ export var createComponent = function (as) { return function (_a) {
     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 });
-    };
+    ReturnedComponent.as = memoize((as) => createComponent(as)({ displayName, Component, subComponents }), as => as);
     // 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`
     return ReturnedComponent;
-}; };
-export var createElemPropsHook = function (modelHook) { return function (fn) { return function (model, elemProps, ref) {
-    var props = mergeProps(fn(model, ref, elemProps || {}), elemProps || {});
-    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;
-}; }; };
+};
+/**
+ * An `elemPropsHook` is a React hook that takes a model, ref, and elemProps and returns props and
+ * attributes to be spread to an element or component.
+ *
+ * ```tsx
+ * const useMyHook = createElemPropsHook(useMyModel)((model) => {
+ *   return {
+ *     id: model.state.id
+ *   }
+ * })
+ * ```
+ *
+ * **Note:** If your hook needs to use a ref, it must be forked using `useLocalRef` or `useForkRef`
+ * and return the forked ref:
+ *
+ * ```tsx
+ * const useMyHook = createElemPropsHook(useMyModel)((model, ref, elemProps) => {
+ *   const {localRef, elementRef} = useLocalRef(ref);
+ *
+ *   React.useLayoutEffect(() => {
+ *     console.log('element', localRef.current) // logs the DOM element
+ *   }, [])
+ *
+ *   return {
+ *     ref: elementRef
+ *   }
+ * })
+ * ```
+ */
+export const createElemPropsHook = (modelHook) => (fn) => {
+    return ((model, elemProps, ref) => {
+        const props = mergeProps(fn(model, ref, elemProps || {}), elemProps || {});
+        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;
+    });
+};
 /**
  * Factory function to crate a behavior hook with correct generic types. It takes a function that
  * return props and returns a function that will also require `elemProps` and will call `mergeProps` for
@@ -154,10 +170,10 @@ export var createElemPropsHook = function (modelHook) { return function (fn) { r
  * });
  *
  * // Equivalent to:
- * const useMyHook = <P extends {}, R>(
+ * const useMyHook = <P extends {}>(
  *   model: MyModel,
  *   elemProps: P,
- *   ref: React.Ref<R>
+ *   ref: React.Ref<unknown>
  * ) => {
  *   const { localRef, elementRef } = useLocalRef(ref);
  *   // do whatever with `localRef` which is a RefObject
@@ -170,21 +186,56 @@ export var createElemPropsHook = function (modelHook) { return function (fn) { r
  *
  * @param fn Function that takes a model and optional ref and returns props
  */
-export var createHook = function (fn) {
-    return function (model, elemProps, ref) {
-        var props = mergeProps(fn(model, ref, elemProps || {}), elemProps || {});
+export const createHook = (fn) => {
+    return ((model, elemProps, ref) => {
+        const props = mergeProps(fn(model, ref, elemProps || {}), elemProps || {});
         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) {
+/**
+ * @deprecated use `createSubModelElemPropsHook` instead
+ */
+export const subModelHook = (fn, hook) => {
+    return ((model, props, ref) => {
         return hook(fn(model), props, ref);
-    };
+    });
 };
+/**
+ * Creates an elemPropsHook that returns the elemProps from another hook that is meant for a
+ * subModel. Usually only used when composing elemProps hooks.
+ *
+ * For example:
+ *
+ * ```tsx
+ * const useMySubModel = () => {}
+ *
+ * const useMyModel = () => {
+ *   const subModel = useMySubModel()
+ *
+ *   return {
+ *     state,
+ *     events,
+ *     subModel,
+ *   }
+ * }
+ *
+ * const useMyComponent = composeHook(
+ *   createElemPropsHook(useMyModel)(model => ({ id: '' })),
+ *   createSubModelElemPropsHook(useMyModel)(m => m.subModel, useSomeOtherComponent)
+ * )
+ * ```
+ */
+export function createSubModelElemPropsHook(modelHook) {
+    return (fn, elemPropsHook) => {
+        return ((model, props, ref) => {
+            return elemPropsHook(fn(model), props, ref);
+        });
+    };
+}
 function setRef(ref, value) {
     if (ref) {
         if (typeof ref === 'function') {
@@ -221,7 +272,7 @@ function setRef(ref, value) {
  * })
  */
 export function useForkRef(ref1, ref2) {
-    return function (value) {
+    return (value) => {
         setRef(ref1, value);
         setRef(ref2, value);
     };
@@ -241,9 +292,9 @@ export function useForkRef(ref1, ref2) {
  * }
  */
 export function useLocalRef(ref) {
-    var localRef = React.useRef(null);
-    var elementRef = useForkRef(ref, localRef);
-    return { localRef: localRef, elementRef: elementRef };
+    const localRef = React.useRef(null);
+    const elementRef = useForkRef(ref, localRef);
+    return { localRef, elementRef };
 }
 /**
  * Returns a model, or calls the model hook with config. Clever way around the conditional React
@@ -258,8 +309,17 @@ export function useLocalRef(ref) {
  *   // ...
  * }
  */
-export function useDefaultModel(model, config, modelHook) {
-    return model || modelHook(config);
+export function useDefaultModel(model, config, modelHook, as) {
+    // Make sure we don't pass the `model` to a component if it is incompatible with that component.
+    // Otherwise we'll have strange runtime failures when a component or elemProps hooks try to
+    // access the `state` or `events`
+    if (!model ||
+        (as &&
+            as.__hasModel &&
+            model.__UNSTABLE_modelContext !== modelHook.Context)) {
+        return modelHook(config);
+    }
+    return model;
 }
 /**
  * Returns a model, or returns a model context. Clever way around the conditional React hook ESLint
@@ -268,38 +328,22 @@ export function useDefaultModel(model, config, modelHook) {
  * @param context The context of a model
  * @example
  * const SubComponent = ({children, model, ...elemProps}: SubComponentProps, ref, Element) => {
- *   const {state, events} = useModelContext(model, SubComponentModelContext);
+ *   const {state, events} = useModelContext(model, SubComponentModelContext, Element);
  *
  *   // ...
  * }
  */
-export function useModelContext(context, model) {
-    // eslint-disable-next-line react-hooks/rules-of-hooks
-    return model || React.useContext(context);
-}
-export function composeHooks() {
-    var hooks = [];
-    for (var _i = 0; _i < arguments.length; _i++) {
-        hooks[_i] = arguments[_i];
+export function useModelContext(context, model, as) {
+    const contextModel = React.useContext(context);
+    if (!model ||
+        (as && as.__hasModel && model.__UNSTABLE_modelContext !== context)) {
+        return contextModel;
     }
-    return function (model, props, ref) {
-        var returnProps = __spreadArrays(hooks).reverse().reduce(function (props, hook) {
-            return hook(model, props, props.ref || ref);
-        }, props);
-        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;
-        }
-        return returnProps;
-    };
+    return model;
 }
-export function composeModelHooks() {
-    var hooks = [];
-    for (var _i = 0; _i < arguments.length; _i++) {
-        hooks[_i] = arguments[_i];
-    }
-    return function (model, props, ref) {
-        var returnProps = __spreadArrays(hooks).reverse().reduce(function (props, hook) {
+export function composeHooks(...hooks) {
+    return ((model, props, ref) => {
+        const returnProps = [...hooks].reverse().reduce((props, hook) => {
             return hook(model, props, props.ref || ref);
         }, props);
         if (!returnProps.hasOwnProperty('ref') && ref) {
@@ -307,5 +351,5 @@ export function composeModelHooks() {
             returnProps.ref = ref;
         }
         return returnProps;
-    };
+    });
 }

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

@@ -0,0 +1,2 @@
+export declare function deepMerge<T, S>(target: T, source: S): T & S;
+//# sourceMappingURL=deepMerge.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"deepMerge.d.ts","sourceRoot":"","sources":["../../../../../common/lib/utils/deepMerge.ts"],"names":[],"mappings":"AACA,wBAAgB,SAAS,CAAC,CAAC,EAAE,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,MAAM,EAAE,CAAC,GAAG,CAAC,GAAG,CAAC,CAmB3D"}

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

@@ -0,0 +1,20 @@
+const isObject = (obj) => obj && typeof obj === 'object';
+export function deepMerge(target, source) {
+    if (!isObject(target) || !isObject(source)) {
+        return source;
+    }
+    Object.keys(source).forEach(key => {
+        const targetValue = target[key];
+        const sourceValue = source[key];
+        if (Array.isArray(targetValue) && Array.isArray(sourceValue)) {
+            target[key] = targetValue.concat(sourceValue);
+        }
+        else if (isObject(targetValue) && isObject(sourceValue)) {
+            target[key] = deepMerge(Object.assign({}, targetValue), sourceValue);
+        }
+        else {
+            target[key] = sourceValue;
+        }
+    });
+    return target;
+}

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

@@ -0,0 +1,2 @@
+export declare function dispatchInputEvent<T extends HTMLElement>(input: T | null, value: string): void;
+//# sourceMappingURL=dispatchInputEvent.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"dispatchInputEvent.d.ts","sourceRoot":"","sources":["../../../../../common/lib/utils/dispatchInputEvent.ts"],"names":[],"mappings":"AAAA,wBAAgB,kBAAkB,CAAC,CAAC,SAAS,WAAW,EAAE,KAAK,EAAE,CAAC,GAAG,IAAI,EAAE,KAAK,EAAE,MAAM,GAAG,IAAI,CAe9F"}

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

@@ -0,0 +1,14 @@
+export function dispatchInputEvent(input, value) {
+    // Changing value prop programmatically doesn't fire a synthetic event or trigger a native
+    // onChange event. We can not just update .value= in setState because React library overrides
+    // input value setter but we can call the function directly on the input as context. This will
+    // cause onChange events to fire no matter how value is updated.
+    if (input) {
+        const nativeInputValue = Object.getOwnPropertyDescriptor(Object.getPrototypeOf(input), 'value');
+        if (nativeInputValue && nativeInputValue.set) {
+            nativeInputValue.set.call(input, value);
+        }
+        const event = new Event('input', { bubbles: true });
+        input.dispatchEvent(event);
+    }
+}

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

@@ -2,7 +2,7 @@
  * Is an element focusable? This function performs various tests to see if the element in question
  * can receive focus. Should skip disabled elements as they are not focusable.
  */
-export declare const isFocusable: (element: HTMLElement) => boolean | null;
+export declare const isFocusable: (element: Element) => boolean;
 /**
  * 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,YAAa,WAAW,mBA4B/C,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,wBAAwB,cAAe,WAAW,KAAG,WAAW,GAAG,IAW/E,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,uBAAuB,cAAe,WAAW,KAAG,WAAW,GAAG,IAW9E,CAAC"}
+{"version":3,"file":"elements.d.ts","sourceRoot":"","sources":["../../../../../common/lib/utils/elements.ts"],"names":[],"mappings":"AAAA;;;GAGG;AACH,eAAO,MAAM,WAAW,YAAa,OAAO,KAAG,OAuB9C,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,wBAAwB,cAAe,WAAW,KAAG,WAAW,GAAG,IAW/E,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,uBAAuB,cAAe,WAAW,KAAG,WAAW,GAAG,IAW9E,CAAC"}

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

@@ -2,24 +2,18 @@
  * Is an element focusable? This function performs various tests to see if the element in question
  * can receive focus. Should skip disabled elements as they are not focusable.
  */
-export var isFocusable = function (element) {
+export const isFocusable = (element) => {
     if (element.hasAttribute('disabled')) {
-        return null;
+        return false;
     }
-    var nodeName = element.nodeName.toLowerCase();
-    var validInput = nodeName === 'input' && element.getAttribute('type') !== 'hidden';
-    var validAnchor = nodeName === 'a' && element.hasAttribute('href');
-    var validAudioVideo = ['audio', 'video'].includes(nodeName) && element.hasAttribute('controls');
-    var validImgObject = ['img', 'object'].includes(nodeName) && element.hasAttribute('usemap');
-    var validNativelyFocusable = [
-        'button',
-        'details',
-        'embed',
-        'iframe',
-        'select',
-        'textarea',
-    ].includes(nodeName);
-    var hasTabIndex = element.getAttribute('tabindex') === '0';
+    const nodeName = element.nodeName.toLowerCase();
+    const validInput = nodeName === 'input' && element.getAttribute('type') !== 'hidden';
+    const validAnchor = nodeName === 'a' && element.hasAttribute('href');
+    const validAudioVideo = ['audio', 'video'].includes(nodeName) && element.hasAttribute('controls');
+    const validImgObject = ['img', 'object'].includes(nodeName) && element.hasAttribute('usemap');
+    const validNativelyFocusable = ['button', 'details', 'embed', 'iframe', 'select', 'textarea'].includes(nodeName) &&
+        element.getAttribute('tabindex') !== '-1';
+    const hasTabIndex = element.getAttribute('tabindex') === '0';
     return (validInput ||
         validAnchor ||
         validAudioVideo ||
@@ -30,11 +24,11 @@ export var isFocusable = function (element) {
 /**
  * Get the first focusable element in a container.
  */
-export var getFirstFocusableElement = function (container) {
-    var elements = container.querySelectorAll('*');
-    for (var i = 0; i < elements.length; i++) {
-        var element = elements.item(i);
-        if (element && isFocusable(element)) {
+export const getFirstFocusableElement = (container) => {
+    const elements = container.querySelectorAll('*');
+    for (let i = 0; i < elements.length; i++) {
+        const element = elements.item(i);
+        if (element && isFocusable(element) && element.getAttribute('tabindex') !== '-1') {
             return element;
         }
     }
@@ -43,11 +37,11 @@ export var getFirstFocusableElement = function (container) {
 /**
  * Get the last focusable element in a container.
  */
-export var getLastFocusableElement = function (container) {
-    var elements = container.querySelectorAll('*');
-    for (var i = elements.length - 1; i >= 0; i--) {
-        var element = elements.item(i);
-        if (element && isFocusable(element)) {
+export const getLastFocusableElement = (container) => {
+    const elements = container.querySelectorAll('*');
+    for (let i = elements.length - 1; i >= 0; i--) {
+        const element = elements.item(i);
+        if (element && isFocusable(element) && element.getAttribute('tabindex') !== '-1') {
             return element;
         }
     }

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

@@ -1,4 +1,4 @@
-var translateMap = {
+const translateMap = {
     y: {
         top: -1,
         center: 0,
@@ -16,7 +16,7 @@ var translateMap = {
  * @param {string} distance The distance to translate (as a canvas spacing value).
  * @returns {Object} An object with the x and y distance values needed to translate.
  */
-export var getTranslateFromOrigin = function (transformOrigin, distance) {
+export const getTranslateFromOrigin = (transformOrigin, distance) => {
     return {
         x: translateMap.x[transformOrigin.horizontal] * parseInt(distance, 10),
         y: translateMap.y[transformOrigin.vertical] * parseInt(distance, 10),

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

@@ -1,5 +1,6 @@
 export * from './colorUtils';
 export * from './getTranslateFromOrigin';
+export * from './dispatchInputEvent';
 export * from './changeFocus';
 export * from './makeMq';
 export * from './mergeCallback';
@@ -9,11 +10,11 @@ export * from './assert';
 export * from './useMount';
 export * from './components';
 export * from './models';
+export * from './slugify';
 export * from './elements';
 export * from './useConstant';
 export * from './useIsFullscreen';
 export * from './useModalityType';
 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,eAAe,CAAC;AAC9B,cAAc,mBAAmB,CAAC;AAClC,cAAc,mBAAmB,CAAC;AAClC,cAAc,iBAAiB,CAAC;AAChC,cAAc,qBAAqB,CAAC;AACpC,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,sBAAsB,CAAC;AACrC,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,WAAW,CAAC;AAC1B,cAAc,YAAY,CAAC;AAC3B,cAAc,eAAe,CAAC;AAC9B,cAAc,mBAAmB,CAAC;AAClC,cAAc,mBAAmB,CAAC;AAClC,cAAc,iBAAiB,CAAC;AAChC,cAAc,qBAAqB,CAAC"}

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

@@ -1,5 +1,6 @@
 export * from './colorUtils';
 export * from './getTranslateFromOrigin';
+export * from './dispatchInputEvent';
 export * from './changeFocus';
 export * from './makeMq';
 export * from './mergeCallback';
@@ -9,10 +10,10 @@ export * from './assert';
 export * from './useMount';
 export * from './components';
 export * from './models';
+export * from './slugify';
 export * from './elements';
 export * from './useConstant';
 export * from './useIsFullscreen';
 export * from './useModalityType';
 export * from './useWindowSize';
 export * from './useResizeObserver';
-export * from './StaticStates';

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

@@ -0,0 +1,5 @@
+/**
+ * This function determines whether or not a container's width is within two values.
+ */
+export declare const isWithinBreakpoint: (width: number, min: number, max?: number | undefined) => boolean | 0;
+//# sourceMappingURL=isWithinBreakpoint.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"isWithinBreakpoint.d.ts","sourceRoot":"","sources":["../../../../../common/lib/utils/isWithinBreakpoint.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,eAAO,MAAM,kBAAkB,UAAW,MAAM,OAAO,MAAM,0CAE5D,CAAC"}

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

@@ -0,0 +1,6 @@
+/**
+ * This function determines whether or not a container's width is within two values.
+ */
+export const isWithinBreakpoint = (width, min, max) => {
+    return width >= min && (!max || (max && width <= max - 0.5));
+};

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

@@ -4,10 +4,10 @@
  * the breakpoint size and the value is the min-width of that breakpoint
  * @returns {Object} A set of CSS media queries for each breakpoint size
  */
-export var makeMq = function (breakpoints) {
-    var mq = {};
-    Object.keys(breakpoints).forEach(function (key) {
-        mq[key] = "@media (min-width: " + breakpoints[key] + "px)";
+export const makeMq = (breakpoints) => {
+    const mq = {};
+    Object.keys(breakpoints).forEach(key => {
+        mq[key] = `@media (min-width: ${breakpoints[key]}px)`;
     });
     return mq;
 };

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

@@ -0,0 +1,6 @@
+/**
+ * Simple memoize function. It takes a function and a resolver function to generate a
+ * cache key
+ */
+export declare function memoize<T extends (...args: any[]) => any>(func: T, resolver: (...args: Parameters<T>) => string): T;
+//# sourceMappingURL=memoize.d.ts.map