@workday/canvas-kit-react 8.0.0-alpha.253-next.22 → 8.0.0-alpha.428-next.2

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

@@ -1,63 +1,37 @@
 "use strict";
-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;
-};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.composeModelHooks = exports.composeHooks = exports.useModelContext = exports.useDefaultModel = exports.useLocalRef = exports.useForkRef = exports.subModelHook = exports.createHook = exports.createElemPropsHook = exports.createComponent = exports.createSubcomponent = exports.createContainer = void 0;
-var react_1 = __importDefault(require("react"));
-var assert_1 = require("./assert");
-var mergeProps_1 = require("./mergeProps");
+exports.composeHooks = exports.useModelContext = exports.useDefaultModel = exports.useLocalRef = exports.useForkRef = exports.createSubModelElemPropsHook = exports.subModelHook = exports.createHook = exports.createElemPropsHook = exports.createComponent = exports.createSubcomponent = exports.createContainer = void 0;
+const react_1 = __importDefault(require("react"));
+const assert_1 = require("./assert");
+const memoize_1 = require("./memoize");
+const mergeProps_1 = require("./mergeProps");
 function defaultGetElemProps(input) {
     return input;
 }
-var createContainer = function (as) { return function (_a) {
-    var displayName = _a.displayName, modelHook = _a.modelHook, elemPropsHook = _a.elemPropsHook, defaultContext = _a.defaultContext, subComponents = _a.subComponents;
+const createContainer = (as) => ({ displayName, modelHook, elemPropsHook, defaultContext, subComponents, }) => {
     assert_1.assert(modelHook.Context, 'createContainer only works on models with context. Please use `createModelHook` to create the `modelHook`');
-    var Context = modelHook.Context;
-    return function (Component) {
-        var ReturnedComponent = react_1.default.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
+    const Context = modelHook.Context;
+    return (Component) => {
+        const ReturnedComponent = react_1.default.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_1.default.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.
@@ -65,34 +39,40 @@ var createContainer = function (as) { return function (_a) {
             // 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;
+                subComponents[key].displayName = `${displayName}.${key}`;
             }
         });
         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_1.memoize((as) => exports.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;
     };
-}; };
+};
 exports.createContainer = createContainer;
-var createSubcomponent = function (as) { return function (_a) {
-    var displayName = _a.displayName, modelHook = _a.modelHook, elemPropsHook = _a.elemPropsHook, subComponents = _a.subComponents;
+const createSubcomponent = (as) => ({ displayName, modelHook, elemPropsHook, subComponents, }) => {
     assert_1.assert(modelHook.Context, 'createSubcomponent only works on models with context. Please use `createModelHook` to create the `modelHook`');
-    return function (Component) {
-        var ReturnedComponent = react_1.default.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_1.default.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.
@@ -101,12 +81,16 @@ var createSubcomponent = function (as) { return function (_a) {
         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_1.memoize((as) => exports.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;
     };
-}; };
+};
 exports.createSubcomponent = createSubcomponent;
 /**
  * Factory function that creates components to be exported. It enforces React ref forwarding, `as`
@@ -114,17 +98,15 @@ exports.createSubcomponent = createSubcomponent;
  * 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.
  */
-var createComponent = function (as) { return function (_a) {
-    var displayName = _a.displayName, Component = _a.Component, subComponents = _a.subComponents;
-    var ReturnedComponent = react_1.default.forwardRef(function (_a, ref) {
-        var asOverride = _a.as, props = __rest(_a, ["as"]);
+const createComponent = (as) => ({ displayName, Component, subComponents, }) => {
+    const ReturnedComponent = react_1.default.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.
@@ -133,23 +115,52 @@ 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 exports.createComponent(as)({ displayName: displayName, Component: Component, subComponents: subComponents });
-    };
+    ReturnedComponent.as = memoize_1.memoize((as) => exports.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;
-}; };
+};
 exports.createComponent = createComponent;
-var createElemPropsHook = function (modelHook) { return function (fn) { return function (model, elemProps, ref) {
-    var props = mergeProps_1.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
+ *   }
+ * })
+ * ```
+ */
+const createElemPropsHook = (modelHook) => (fn) => {
+    return ((model, elemProps, ref) => {
+        const props = mergeProps_1.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;
+    });
+};
 exports.createElemPropsHook = createElemPropsHook;
 /**
  * Factory function to crate a behavior hook with correct generic types. It takes a function that
@@ -169,10 +180,10 @@ exports.createElemPropsHook = createElemPropsHook;
  * });
  *
  * // 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
@@ -185,23 +196,59 @@ exports.createElemPropsHook = createElemPropsHook;
  *
  * @param fn Function that takes a model and optional ref and returns props
  */
-var createHook = function (fn) {
-    return function (model, elemProps, ref) {
-        var props = mergeProps_1.mergeProps(fn(model, ref, elemProps || {}), elemProps || {});
+const createHook = (fn) => {
+    return ((model, elemProps, ref) => {
+        const props = mergeProps_1.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;
-    };
+    });
 };
 exports.createHook = createHook;
-var subModelHook = function (fn, hook) {
-    return function (model, props, ref) {
+/**
+ * @deprecated use `createSubModelElemPropsHook` instead
+ */
+const subModelHook = (fn, hook) => {
+    return ((model, props, ref) => {
         return hook(fn(model), props, ref);
-    };
+    });
 };
 exports.subModelHook = subModelHook;
+/**
+ * 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)
+ * )
+ * ```
+ */
+function createSubModelElemPropsHook(modelHook) {
+    return (fn, elemPropsHook) => {
+        return ((model, props, ref) => {
+            return elemPropsHook(fn(model), props, ref);
+        });
+    };
+}
+exports.createSubModelElemPropsHook = createSubModelElemPropsHook;
 function setRef(ref, value) {
     if (ref) {
         if (typeof ref === 'function') {
@@ -238,7 +285,7 @@ function setRef(ref, value) {
  * })
  */
 function useForkRef(ref1, ref2) {
-    return function (value) {
+    return (value) => {
         setRef(ref1, value);
         setRef(ref2, value);
     };
@@ -259,9 +306,9 @@ exports.useForkRef = useForkRef;
  * }
  */
 function useLocalRef(ref) {
-    var localRef = react_1.default.useRef(null);
-    var elementRef = useForkRef(ref, localRef);
-    return { localRef: localRef, elementRef: elementRef };
+    const localRef = react_1.default.useRef(null);
+    const elementRef = useForkRef(ref, localRef);
+    return { localRef, elementRef };
 }
 exports.useLocalRef = useLocalRef;
 /**
@@ -277,8 +324,17 @@ exports.useLocalRef = useLocalRef;
  *   // ...
  * }
  */
-function useDefaultModel(model, config, modelHook) {
-    return model || modelHook(config);
+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;
 }
 exports.useDefaultModel = useDefaultModel;
 /**
@@ -288,23 +344,23 @@ exports.useDefaultModel = useDefaultModel;
  * @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);
  *
  *   // ...
  * }
  */
-function useModelContext(context, model) {
-    // eslint-disable-next-line react-hooks/rules-of-hooks
-    return model || react_1.default.useContext(context);
+function useModelContext(context, model, as) {
+    const contextModel = react_1.default.useContext(context);
+    if (!model ||
+        (as && as.__hasModel && model.__UNSTABLE_modelContext !== context)) {
+        return contextModel;
+    }
+    return model;
 }
 exports.useModelContext = useModelContext;
-function composeHooks() {
-    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) {
+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) {
@@ -312,23 +368,6 @@ function composeHooks() {
             returnProps.ref = ref;
         }
         return returnProps;
-    };
+    });
 }
 exports.composeHooks = composeHooks;
-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) {
-            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;
-    };
-}
-exports.composeModelHooks = composeModelHooks;

package/dist/commonjs/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/commonjs/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/commonjs/common/lib/utils/deepMerge.js

@@ -0,0 +1,24 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.deepMerge = void 0;
+const isObject = (obj) => obj && typeof obj === 'object';
+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;
+}
+exports.deepMerge = deepMerge;

package/dist/commonjs/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/commonjs/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/commonjs/common/lib/utils/dispatchInputEvent.js

@@ -0,0 +1,18 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.dispatchInputEvent = void 0;
+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);
+    }
+}
+exports.dispatchInputEvent = dispatchInputEvent;

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

@@ -5,18 +5,18 @@ exports.getLastFocusableElement = exports.getFirstFocusableElement = exports.isF
  * 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.
  */
-var isFocusable = function (element) {
+const isFocusable = (element) => {
     if (element.hasAttribute('disabled')) {
         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) &&
+    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';
-    var hasTabIndex = element.getAttribute('tabindex') === '0';
+    const hasTabIndex = element.getAttribute('tabindex') === '0';
     return (validInput ||
         validAnchor ||
         validAudioVideo ||
@@ -28,10 +28,10 @@ exports.isFocusable = isFocusable;
 /**
  * Get the first focusable element in a container.
  */
-var getFirstFocusableElement = function (container) {
-    var elements = container.querySelectorAll('*');
-    for (var i = 0; i < elements.length; i++) {
-        var element = elements.item(i);
+const getFirstFocusableElement = (container) => {
+    const elements = container.querySelectorAll('*');
+    for (let i = 0; i < elements.length; i++) {
+        const element = elements.item(i);
         if (element && exports.isFocusable(element) && element.getAttribute('tabindex') !== '-1') {
             return element;
         }
@@ -42,10 +42,10 @@ exports.getFirstFocusableElement = getFirstFocusableElement;
 /**
  * Get the last focusable element in a container.
  */
-var getLastFocusableElement = function (container) {
-    var elements = container.querySelectorAll('*');
-    for (var i = elements.length - 1; i >= 0; i--) {
-        var element = elements.item(i);
+const getLastFocusableElement = (container) => {
+    const elements = container.querySelectorAll('*');
+    for (let i = elements.length - 1; i >= 0; i--) {
+        const element = elements.item(i);
         if (element && exports.isFocusable(element) && element.getAttribute('tabindex') !== '-1') {
             return element;
         }

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

@@ -1,7 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.getTranslateFromOrigin = void 0;
-var translateMap = {
+const translateMap = {
     y: {
         top: -1,
         center: 0,
@@ -19,7 +19,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.
  */
-var getTranslateFromOrigin = function (transformOrigin, distance) {
+const getTranslateFromOrigin = (transformOrigin, distance) => {
     return {
         x: translateMap.x[transformOrigin.horizontal] * parseInt(distance, 10),
         y: translateMap.y[transformOrigin.vertical] * parseInt(distance, 10),

package/dist/commonjs/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,6 +10,7 @@ export * from './assert';
 export * from './useMount';
 export * from './components';
 export * from './models';
+export * from './slugify';
 export * from './elements';
 export * from './useConstant';
 export * from './useIsFullscreen';

package/dist/commonjs/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"}
+{"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/commonjs/common/lib/utils/index.js

@@ -12,6 +12,7 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
 Object.defineProperty(exports, "__esModule", { value: true });
 __exportStar(require("./colorUtils"), exports);
 __exportStar(require("./getTranslateFromOrigin"), exports);
+__exportStar(require("./dispatchInputEvent"), exports);
 __exportStar(require("./changeFocus"), exports);
 __exportStar(require("./makeMq"), exports);
 __exportStar(require("./mergeCallback"), exports);
@@ -21,6 +22,7 @@ __exportStar(require("./assert"), exports);
 __exportStar(require("./useMount"), exports);
 __exportStar(require("./components"), exports);
 __exportStar(require("./models"), exports);
+__exportStar(require("./slugify"), exports);
 __exportStar(require("./elements"), exports);
 __exportStar(require("./useConstant"), exports);
 __exportStar(require("./useIsFullscreen"), exports);

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

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

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

@@ -7,10 +7,10 @@ exports.makeMq = void 0;
  * 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
  */
-var makeMq = function (breakpoints) {
-    var mq = {};
-    Object.keys(breakpoints).forEach(function (key) {
-        mq[key] = "@media (min-width: " + breakpoints[key] + "px)";
+const makeMq = (breakpoints) => {
+    const mq = {};
+    Object.keys(breakpoints).forEach(key => {
+        mq[key] = `@media (min-width: ${breakpoints[key]}px)`;
     });
     return mq;
 };

package/dist/commonjs/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

package/dist/commonjs/common/lib/utils/memoize.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"memoize.d.ts","sourceRoot":"","sources":["../../../../../common/lib/utils/memoize.ts"],"names":[],"mappings":"AAAA;;;GAGG;AACH,wBAAgB,OAAO,CAAC,CAAC,SAAS,CAAC,GAAG,IAAI,EAAE,GAAG,EAAE,KAAK,GAAG,EACvD,IAAI,EAAE,CAAC,EACP,QAAQ,EAAE,CAAC,GAAG,IAAI,EAAE,UAAU,CAAC,CAAC,CAAC,KAAK,MAAM,GAC3C,CAAC,CAeH"}