brew-js-react 0.4.7 → 0.5.0

package/hooks.js

@@ -1,10 +1,9 @@
 import { createElement, useEffect, useRef, useState } from "react";
 import { ViewStateProvider, useObservableProperty, useUpdateTrigger } from "zeta-dom-react";
-import { definePrototype, extend, kv, setImmediateOnce, throwNotFunction, watch } from "./include/zeta-dom/util.js";
-import { bind } from "./include/zeta-dom/domUtil.js";
+import { definePrototype, delay, each, extend, kv, setImmediateOnce, throwNotFunction, watch } from "./include/zeta-dom/util.js";
 import { ZetaEventContainer } from "./include/zeta-dom/events.js";
 import { app } from "./app.js";
-import { useViewContainerState } from "./view.js";
+import { useViewContext } from "./view.js";
 
 const emitter = new ZetaEventContainer();
 
@@ -12,19 +11,18 @@ function getCurrentStates() {
     return app.historyStorage.current;
 }
 
-function ViewState(key, value) {
+function ViewState(key, dispose) {
     this.key = key;
-    this.value = value;
+    this.store = getCurrentStates();
+    this.dispose = dispose;
 }
 
 definePrototype(ViewState, {
     get: function () {
-        return this.value;
+        return this.store.get(this.key);
     },
-    set: function (value) {
-        var self = this;
-        self.value = value;
-        self.store.set(self.key, value);
+    set: function (value, snapshot) {
+        this.store = updatePersistedValue(this.store, this.key, value, snapshot);
     },
     onPopState: function (callback) {
         throwNotFunction(callback);
@@ -34,6 +32,40 @@ definePrototype(ViewState, {
     }
 });
 
+function updatePersistedValue(cur, key, value, snapshot) {
+    if (cur.get(key) !== value) {
+        if (snapshot && cur.has(key)) {
+            app.snapshot();
+            cur = getCurrentStates();
+        }
+        cur.set(key, value);
+    }
+    return cur;
+}
+
+function updateViewState(state, key, store) {
+    var newValue = state.get();
+    if (key !== state.key || (store !== state.store && store.has(key))) {
+        newValue = store.get(key);
+        emitter.emit('popstate', state, { newValue });
+    }
+    state.key = key;
+    state.store = store;
+    store.set(key, newValue);
+}
+
+function useViewContextWithEffect(callback, deps) {
+    const container = useViewContext();
+    useEffect(function () {
+        return app.on('beforepageload popstate', function () {
+            if (container.active) {
+                callback(getCurrentStates());
+            }
+        });
+    }, deps);
+    return container;
+}
+
 export function useAppReady() {
     return useAppReadyState().ready;
 }
@@ -47,7 +79,7 @@ export function useAppReadyState() {
 }
 
 export function useRouteParam(name, defaultValue) {
-    const container = useViewContainerState();
+    const container = useViewContext();
     const params = container.page.params;
     const route = app.route;
     const value = params[name] || '';
@@ -82,51 +114,39 @@ export function useRouteParam(name, defaultValue) {
 }
 
 export function useRouteState(key, defaultValue, snapshotOnUpdate) {
-    var container = useViewContainerState();
     var cur = getCurrentStates();
-    var state = useState(cur.has(key) ? cur.get(key) : defaultValue);
-    if (container.active && cur.get(key) !== state[0]) {
-        if (snapshotOnUpdate && cur.has(key)) {
-            app.snapshot();
-            cur = getCurrentStates();
-        }
-        cur.set(key, state[0]);
+    var state = useState(cur && cur.has(key) ? cur.get(key) : defaultValue);
+    var container = useViewContextWithEffect(function (cur) {
+        state[1](function (oldValue) {
+            return cur.has(key) ? cur.get(key) : (cur.set(key, oldValue), oldValue);
+        });
+    }, [key]);
+    if (!cur) {
+        // delay app ready to ensure that beforepageload event can be caught
+        app.beforeInit(delay(1));
+    } else if (container.active) {
+        updatePersistedValue(cur, key, state[0], snapshotOnUpdate);
     }
-    useEffect(function () {
-        if (snapshotOnUpdate) {
-            return bind(window, 'popstate', function () {
-                if (container.active) {
-                    var cur = getCurrentStates();
-                    state[1](cur.has(key) ? cur.get(key) : defaultValue);
-                }
-            });
-        }
-    }, [container, snapshotOnUpdate]);
     return state;
 }
 
 export function ViewStateContainer(props) {
-    const container = useViewContainerState();
+    const cache = useState({})[0];
+    const container = useViewContextWithEffect(function (cur) {
+        each(cache, function (i, v) {
+            updateViewState(v, v.key, cur);
+        });
+    }, []);
     const provider = useState(function () {
-        const cache = {};
         return {
             getState: function (uniqueId, key) {
-                var cur = getCurrentStates();
-                var value = cur.get(key);
-                var state = cache[uniqueId] || (cache[uniqueId] = new ViewState(key, value));
-                if (container.active) {
-                    var store = state.store;
-                    if (store && ((store !== cur && cur.has(key)) || key !== state.key)) {
-                        emitter.emit('popstate', state, {
-                            newValue: value
-                        });
-                        state.value = value;
-                        state.key = key;
-                    }
-                    state.store = cur;
-                    cur.set(key, state.value);
+                var state = cache[uniqueId];
+                if (state && container.active) {
+                    updateViewState(state, key, getCurrentStates());
                 }
-                return state;
+                return state || (cache[uniqueId] = new ViewState(key, function () {
+                    delete cache[uniqueId];
+                }));
             }
         };
     })[0];

package/mixin.d.ts

@@ -3,6 +3,7 @@ import AnimateMixin from "./mixins/AnimateMixin";
 import AnimateSequenceItemMixin from "./mixins/AnimateSequenceItemMixin";
 import AnimateSequenceMixin from "./mixins/AnimateSequenceMixin";
 import ClassNameMixin from "./mixins/ClassNameMixin";
+import ClassNameToggleMixin from "./mixins/ClassNameToggleMixin";
 import FlyoutMixin, { FlyoutMixinOptions } from "./mixins/FlyoutMixin";
 import FlyoutToggleMixin from "./mixins/FlyoutToggleMixin";
 import FocusStateMixin from "./mixins/FocusStateMixin";
@@ -10,13 +11,13 @@ import LoadingStateMixin from "./mixins/LoadingStateMixin";
 import StatefulMixin, { MixinRef } from "./mixins/StatefulMixin";
 import ScrollableMixin, { ScrollableMixinOptions } from "./mixins/ScrollableMixin";
 import ScrollIntoViewMixin from "./mixins/ScrollIntoViewMixin";
+import UnmanagedClassNameMixin from "./mixins/UnmanagedClassNameMixin";
 
 export * from "./mixins/Mixin";
 export * from "./mixins/AnimateMixin";
 export * from "./mixins/AnimateSequenceItemMixin";
 export * from "./mixins/AnimateSequenceMixin";
 export * from "./mixins/ClassNameMixin";
-export * from "./mixins/ErrorHandlerMixin";
 export * from "./mixins/FlyoutMixin";
 export * from "./mixins/FocusStateMixin";
 export * from "./mixins/LoadingStateMixin";
@@ -29,31 +30,84 @@ export {
     AnimateSequenceMixin,
     AnimateSequenceItemMixin,
     ClassNameMixin,
+    ClassNameToggleMixin,
     FlyoutMixin,
     FlyoutToggleMixin,
     FocusStateMixin,
     LoadingStateMixin,
     StatefulMixin,
     ScrollableMixin,
-    ScrollIntoViewMixin
+    ScrollIntoViewMixin,
+    UnmanagedClassNameMixin,
 }
 
+/**
+ * Returns a mixin that enables scrollable plugin on the applied element.
+ * @param options A dictionary specifying options.
+ */
 export function useScrollableMixin(options?: ScrollableMixinOptions): ScrollableMixin;
 
+/**
+ * Returns a mixin that allows bringing specific element into view.
+ */
 export function useScrollIntoViewMixin(): ScrollIntoViewMixin;
 
+/**
+ * Returns a mixin that provides methods controlling the applied element as a flyout.
+ * @param options A dictionary specifying options.
+ */
 export function useFlyoutMixin(options?: FlyoutMixinOptions): FlyoutMixin;
 
+/**
+ * Returns a mixin that enables intro and/or outro animation for applied elements.
+ */
 export function useAnimateMixin(): AnimateMixin;
 
+/**
+ * Returns a mixin that enables animation sequence for descendant elements.
+ * If selector is not specified, it requires applying {@link AnimateSequenceMixin.item} mixin to target React elements.
+ * @param selector A CSS selector matching elements to be animated in sequence.
+ */
 export function useAnimateSequenceMixin(selector?: string): AnimateSequenceMixin;
 
+/**
+ * Returns a mixin that adds `focused` and `focused-*` CSS classes to applied elements when being focused.
+ */
 export function useFocusStateMixin(): FocusStateMixin;
 
+/**
+ * Returns a mixin that adds `loading` CSS class to applied elements, when asynchronous operation is notified
+ * through `notifyAsync` for any descendent elements. The `asyncStart` and `asyncEnd` events are also enabled on the applied elements.
+ */
 export function useLoadingStateMixin(): LoadingStateMixin;
 
+/**
+ * Returns a mixin that keeps track and preserves the presence of specified CSS classes on applied elements
+ * while the host component is re-rendered.
+ */
+export function useUnmanagedClassNameMixin(): UnmanagedClassNameMixin;
+
+/**
+ * Returns a mixin that controls the presence of specified CSS classes on applied elements
+ * without re-rendering the host component.
+ * @param dict A dictionary specifying CSS classes to be initially added.
+ */
+export function useClassNameToggleMixin<T extends Zeta.Dictionary<boolean>>(dict: T): ClassNameToggleMixin<T>;
+
+/**
+ * Creates a mixin of the specified type within the lifetime of current component.
+ * @param mixin Constructor of the mixin type.
+ */
 export function useMixin<T extends typeof Mixin>(mixin: T): InstanceType<T>;
 
+/**
+ * Uses mixin passed from parent component.
+ * @param mixin A {@link MixinRef} object.
+ */
 export function useMixinRef<T extends StatefulMixin>(mixin: MixinRef<T>): T;
 
+/**
+ * Uses mixin passed from parent component.
+ * @param mixin A {@link MixinRef} object.
+ */
 export function useMixinRef<T extends StatefulMixin>(mixin: MixinRef<T> | undefined): T | undefined;

package/mixin.js

@@ -5,6 +5,7 @@ import AnimateMixin from "./mixins/AnimateMixin.js";
 import AnimateSequenceItemMixin from "./mixins/AnimateSequenceItemMixin.js";
 import AnimateSequenceMixin from "./mixins/AnimateSequenceMixin.js";
 import ClassNameMixin from "./mixins/ClassNameMixin.js";
+import ClassNameToggleMixin from "./mixins/ClassNameToggleMixin.js";
 import FlyoutMixin from "./mixins/FlyoutMixin.js";
 import FlyoutToggleMixin from "./mixins/FlyoutToggleMixin.js";
 import FocusStateMixin from "./mixins/FocusStateMixin.js";
@@ -12,6 +13,7 @@ import LoadingStateMixin from "./mixins/LoadingStateMixin.js";
 import StatefulMixin from "./mixins/StatefulMixin.js";
 import ScrollableMixin from "./mixins/ScrollableMixin.js";
 import ScrollIntoViewMixin from "./mixins/ScrollIntoViewMixin.js";
+import UnmanagedClassNameMixin from "./mixins/UnmanagedClassNameMixin.js";
 
 function extendSelf(options) {
     extend(this, options);
@@ -27,11 +29,13 @@ function createUseFunction(ctor) {
 
 export const useAnimateMixin = createUseFunction(AnimateMixin);
 export const useAnimateSequenceMixin = createUseFunction(AnimateSequenceMixin);
+export const useClassNameToggleMixin = createUseFunction(ClassNameToggleMixin);
 export const useFlyoutMixin = createUseFunction(FlyoutMixin);
 export const useFocusStateMixin = createUseFunction(FocusStateMixin);
 export const useLoadingStateMixin = createUseFunction(LoadingStateMixin);
 export const useScrollableMixin = createUseFunction(ScrollableMixin);
 export const useScrollIntoViewMixin = createUseFunction(ScrollIntoViewMixin);
+export const useUnmanagedClassNameMixin = createUseFunction(UnmanagedClassNameMixin);
 
 export function useMixin(ctor) {
     return useSingleton(function () {
@@ -49,11 +53,13 @@ export {
     AnimateSequenceItemMixin,
     AnimateSequenceMixin,
     ClassNameMixin,
+    ClassNameToggleMixin,
     FlyoutMixin,
     FlyoutToggleMixin,
     FocusStateMixin,
     LoadingStateMixin,
     StatefulMixin,
     ScrollableMixin,
-    ScrollIntoViewMixin
+    ScrollIntoViewMixin,
+    UnmanagedClassNameMixin,
 }

package/mixins/AnimateMixin.d.ts

@@ -1,4 +1,6 @@
 import ClassNameMixin from "./ClassNameMixin";
+import Mixin from "./Mixin";
+import { useAnimateMixin } from "../mixin";
 
 /**
  * To use predefined animation effects, import `brew-js/styles`.
@@ -28,6 +30,11 @@ export type AnimationEffect = Zeta.HintedString<'fade-in' | 'slide-down' | 'slid
  */
 export type AnimationTrigger = Zeta.HintedString<'show' | 'open'>;
 
+/**
+ * Enables intro and/or outro animation for applied elements.
+ *
+ * Mixin should be created using {@link useAnimateMixin} and applied to element by {@link Mixin.use}.
+ */
 export default class AnimateMixin extends ClassNameMixin {
     /**
      * Specifies animation effects and trigger for rendered elements.

package/mixins/AnimateSequenceItemMixin.d.ts

@@ -1,5 +1,11 @@
+import AnimateSequenceMixin from "./AnimateSequenceMixin";
 import ClassNameMixin from "./ClassNameMixin";
 
+/**
+ * Marks element to be a target of this animate sequence.
+ *
+ * Instances of this mixin is exposed by {@link AnimateSequenceMixin.item}.
+ */
 export default class AnimateSequenceItemMixin extends ClassNameMixin {
     constructor(className: string);
 }

package/mixins/AnimateSequenceItemMixin.js

@@ -1,4 +1,4 @@
-import { definePrototype } from "../include/zeta-dom/util.js";
+import { definePrototype, extend } from "../include/zeta-dom/util.js";
 import ClassNameMixin from "./ClassNameMixin.js";
 
 const AnimateSequenceItemMixinSuper = ClassNameMixin.prototype;
@@ -9,6 +9,11 @@ export default function AnimateSequenceItemMixin(className) {
 }
 
 definePrototype(AnimateSequenceItemMixin, ClassNameMixin, {
+    getCustomAttributes: function () {
+        return extend({}, AnimateSequenceItemMixinSuper.getCustomAttributes.call(this), {
+            'is-animate-sequence': ''
+        });
+    },
     getClassNames: function () {
         return [this.className].concat(AnimateSequenceItemMixinSuper.getClassNames.call(this));
     }

package/mixins/AnimateSequenceMixin.d.ts

@@ -1,6 +1,16 @@
 import AnimateMixin from "./AnimateMixin";
 import AnimateSequenceItemMixin from "./AnimateSequenceItemMixin";
+import Mixin from "./Mixin";
+import { useAnimateSequenceMixin } from "../mixin";
 
+/**
+ * Enables animation sequence for descendant elements.
+ *
+ * Mixin should be created using {@link useAnimateSequenceMixin} and applied to element by {@link Mixin.use}.
+ */
 export default class AnimateSequenceMixin extends AnimateMixin {
+    /**
+     * Returns a mixin that marks element to be a target of this animate sequence.
+     */
     readonly item: AnimateSequenceItemMixin;
 }

package/mixins/AnimateSequenceMixin.js

@@ -1,3 +1,5 @@
+import $ from "../include/external/jquery.js";
+import { watchElements } from "../include/zeta-dom/observe.js";
 import { definePrototype, extend } from "../include/zeta-dom/util.js";
 import AnimateMixin from "./AnimateMixin.js";
 import AnimateSequenceItemMixin from "./AnimateSequenceItemMixin.js";
@@ -17,10 +19,6 @@ definePrototype(AnimateSequenceMixin, AnimateMixin, {
         this.selector = options;
         return this;
     },
-    reset: function () {
-        this.item.reset();
-        return AnimateSequenceMixinSuper.reset.call(this);
-    },
     getCustomAttributes: function () {
         var self = this;
         return extend({}, AnimateSequenceMixinSuper.getCustomAttributes.call(self), {
@@ -29,9 +27,13 @@ definePrototype(AnimateSequenceMixin, AnimateMixin, {
             'animate-sequence': self.selector || '.' + self.className
         });
     },
-    clone: function () {
-        return extend(AnimateSequenceMixinSuper.clone.call(this), {
-            item: this.item.ref.getMixin()
-        });
+    initElement: function (element, state) {
+        var self = this;
+        AnimateSequenceMixinSuper.initElement.call(self, element, state);
+        if (self.selector) {
+            self.onDispose(watchElements(element, self.selector, function (addedNodes) {
+                $(addedNodes).attr('is-animate-sequence', '');
+            }));
+        }
     }
 });

package/mixins/ClassNameMixin.d.ts

@@ -4,12 +4,21 @@ export interface ClassNameMixinState extends MixinState {
     classNames: Record<string, boolean>;
 }
 
+/**
+ * Base class for implementing mixins that requires certain CSS class names to be
+ * preserved after component update.
+ */
 export default class ClassNameMixin extends StatefulMixin<ClassNameMixinState> {
     /**
      * @param classNames Specifies a list of class names to be obeserved.
      */
     constructor(classNames: string[] = []);
 
+    /**
+     * Override to perform actions when observed class names has changed.
+     * @param element DOM element which its class names has changed.
+     * @param prevState Previous states representing the presence of each class name.
+     * @param state Current states representing the presence of each class name.
+     */
     protected onClassNameUpdated(element: HTMLElement, prevState: Record<string, boolean>, state: Record<string, boolean>): void;
 }
-

package/mixins/ClassNameMixin.js

@@ -1,24 +1,16 @@
-import { definePrototype, each, equal, extend, setImmediate } from "../include/zeta-dom/util.js";
-import { containsOrEquals } from "../include/zeta-dom/domUtil.js";
-import dom from "../include/zeta-dom/dom.js";
+import { definePrototype, each, equal, extend, fill } from "../include/zeta-dom/util.js";
+import { setClass } from "../include/zeta-dom/domUtil.js";
 import { watchOwnAttributes } from "../include/zeta-dom/observe.js";
 import StatefulMixin from "./StatefulMixin.js";
 
-const ClassNameMixinSuper = StatefulMixin.prototype;
-
-function checkState(self, element, state, isAsync) {
+function checkState(self, element, state, fireEvent) {
     var classNames = state.classNames;
     var prev = extend({}, classNames);
-    each(self.classNames, function (i, v) {
-        classNames[v] = element.classList.contains(v);
+    each(classNames, function (i) {
+        classNames[i] = element.classList.contains(i);
     });
-    if (!equal(prev, classNames)) {
-        var cb = self.onClassNameUpdated.bind(self, element, prev, extend({}, classNames));
-        if (isAsync) {
-            setImmediate(cb);
-        } else {
-            cb();
-        }
+    if (fireEvent && !equal(prev, classNames)) {
+        self.onClassNameUpdated(element, prev, extend({}, classNames));
     }
 }
 
@@ -28,29 +20,22 @@ export default function ClassNameMixin(classNames) {
 }
 
 definePrototype(ClassNameMixin, StatefulMixin, {
-    getClassNames: function () {
-        return [this.state.classNames];
-    },
-    getRef: function () {
-        var self = this;
-        var element = self.state.element;
-        if (element && containsOrEquals(dom.root, element)) {
-            checkState(self, element, self.state, true);
-        }
-        return ClassNameMixinSuper.getRef.call(this);
-    },
     initState: function () {
         return {
             element: null,
-            classNames: {}
+            classNames: fill(this.classNames, false)
         };
     },
     initElement: function (element, state) {
         var self = this;
+        checkState(self, element, state);
         watchOwnAttributes(element, 'class', function () {
-            checkState(self, element, state);
+            checkState(self, element, state, true);
         });
     },
+    onLayoutEffect: function (element, state) {
+        setClass(element, state.classNames);
+    },
     onClassNameUpdated: function (element, prevState, state) {
     }
 });

package/mixins/ClassNameToggleMixin.d.ts

@@ -0,0 +1,24 @@
+import Mixin from "./Mixin";
+import StatefulMixin from "./StatefulMixin";
+import { useClassNameToggleMixin } from "../mixin";
+
+/**
+ * Controls the presence of specified CSS classes on applied elements
+ * without re-rendering the host component.
+ *
+ * Mixin should be created using {@link useClassNameToggleMixin} and applied to element by {@link Mixin.use}.
+ */
+export default class ClassNameToggleMixin<T extends Zeta.Dictionary<boolean>> extends StatefulMixin {
+    /**
+     * Toggles specified CSS classes on elements.
+     * @param name A CSS class.
+     * @param value A boolean that the CSS class is added to elements when `true`; or removed from elements when `false`.
+     */
+    set(name: Zeta.HintedStringKeyOf<T>, value: boolean): void;
+
+    /**
+     * Toggles multiple CSS classes on elements.
+     * @param values A dictionary which each entry represents whether the CSS class will be added to or remove from elements.
+     */
+    set(values: { [P in Zeta.HintedStringKeyOf<T>]?: boolean }): void;
+}

package/mixins/ClassNameToggleMixin.js

@@ -0,0 +1,23 @@
+import { definePrototype, each, extend, isPlainObject, kv } from "../include/zeta-dom/util.js";
+import { setClass } from "../include/zeta-dom/domUtil.js";
+import StatefulMixin from "./StatefulMixin.js";
+
+export default function ClassNameToggleMixin() {
+    StatefulMixin.call(this);
+}
+
+definePrototype(ClassNameToggleMixin, StatefulMixin, {
+    withOptions: function (classes) {
+        this.classes = extend({}, classes);
+    },
+    getClassNames: function () {
+        return this.classes;
+    },
+    set: function (name, value) {
+        value = isPlainObject(name) || kv(name, value);
+        each(this.elements(), function (i, v) {
+            setClass(v, value);
+        });
+        extend(this.classes, value);
+    }
+});

package/mixins/FlyoutMixin.d.ts

@@ -1,6 +1,8 @@
 import ClassNameMixin from "./ClassNameMixin";
 import FlyoutToggleMixin from "./FlyoutToggleMixin";
+import Mixin from "./Mixin";
 import { AnimationEffect } from "./AnimateMixin";
+import { useFlyoutMixin } from "../mixin";
 
 export interface FlyoutMixinOptions {
     /**
@@ -17,6 +19,11 @@ export interface FlyoutMixinOptions {
     swipeToDismiss?: 'up' | 'down' | 'left' | 'right';
 }
 
+/**
+ * Provides methods controlling the applied element as a flyout.
+ *
+ * Mixin should be created using {@link useFlyoutMixin} and applied to element by {@link Mixin.use}.
+ */
 export default class FlyoutMixin extends ClassNameMixin {
     /**
      * Gets whether the flyout is open.

package/mixins/FlyoutMixin.js

@@ -1,4 +1,4 @@
-import { defineAliasProperty, definePrototype, each, extend, makeArray } from "../include/zeta-dom/util.js";
+import { definePrototype, extend, makeArray } from "../include/zeta-dom/util.js";
 import { closeFlyout, openFlyout } from "../include/brew-js/domAction.js";
 import { app } from "../app.js";
 import ClassNameMixin from "./ClassNameMixin.js";
@@ -6,7 +6,6 @@ import FlyoutToggleMixin from "./FlyoutToggleMixin.js";
 
 const FlyoutMixinSuper = ClassNameMixin.prototype;
 const valueMap = new WeakMap();
-const aliasProps = 'animating isFlyoutOpened modal tabThrough visible'.split(' ');
 
 export default function FlyoutMixin() {
     var self = this;
@@ -24,10 +23,6 @@ export default function FlyoutMixin() {
 }
 
 definePrototype(FlyoutMixin, ClassNameMixin, {
-    reset: function () {
-        this.toggle.reset();
-        return FlyoutMixinSuper.reset.call(this);
-    },
     next: function () {
         this.effects = undefined;
         return FlyoutMixinSuper.next.call(this);
@@ -85,16 +80,6 @@ definePrototype(FlyoutMixin, ClassNameMixin, {
             },
         }, true));
     },
-    clone: function () {
-        var self = this;
-        var mixin = extend(FlyoutMixinSuper.clone.call(self), {
-            toggle: self.toggle.ref.getMixin()
-        });
-        each(aliasProps, function (i, v) {
-            defineAliasProperty(mixin, v, self);
-        });
-        return mixin;
-    },
     onClassNameUpdated: function (element, prevState, state) {
         var self = this;
         self.visible = state.open;

package/mixins/FlyoutToggleMixin.d.ts

@@ -1,5 +1,11 @@
 import ClassNameMixin from "./ClassNameMixin";
+import FlyoutMixin from "./FlyoutMixin";
 
+/**
+ * Enables applied element as toggle buttons for the associated flyout.
+ *
+ * Instances of this mixin is exposed by {@link FlyoutMixin.toggle}.
+ */
 export default class FlyoutToggleMixin extends ClassNameMixin {
     /**
      * Opens the associated flyout.

package/mixins/FocusStateMixin.d.ts

@@ -1,6 +1,13 @@
 import React from "react";
 import ClassNameMixin from "./ClassNameMixin";
+import Mixin from "./Mixin";
+import { useFocusStateMixin } from "../mixin";
 
+/**
+ * Adds `focused` and `focused-*` CSS classes to applied elements when being focused.
+ *
+ * Mixin should be created using {@link useFocusStateMixin} and applied to element by {@link Mixin.use}.
+ */
 export default class FocusStateMixin extends ClassNameMixin {
     /**
      * Sets focus state based on another element.

package/mixins/FocusStateMixin.js

@@ -38,13 +38,7 @@ definePrototype(FocusStateMixin, StatefulMixin, {
             }
         }));
     },
-    getClassNames: function () {
-        var classes = {};
-        var focused = this.state.focused;
-        if (focused) {
-            classes.focused = true;
-            classes['focused-' + focused] = true;
-        }
-        return [classes];
+    onLayoutEffect: function (element, state) {
+        setClass(element, 'focused', state.focused);
     }
 });