brew-js-react 0.6.6 → 0.7.0

package/mixin.d.ts

@@ -9,10 +9,15 @@ import FlyoutToggleMixin from "./mixins/FlyoutToggleMixin";
 import FocusStateMixin from "./mixins/FocusStateMixin";
 import LoadingStateMixin from "./mixins/LoadingStateMixin";
 import StatefulMixin, { MixinRef } from "./mixins/StatefulMixin";
+import StaticAttributeMixin from "./mixins/StaticAttributeMixin";
 import ScrollableMixin, { ScrollableMixinOptions } from "./mixins/ScrollableMixin";
 import ScrollIntoViewMixin from "./mixins/ScrollIntoViewMixin";
 import UnmanagedClassNameMixin from "./mixins/UnmanagedClassNameMixin";
 
+export interface WithOptions<T> {
+    withOptions(options: T): this;
+}
+
 export * from "./mixins/Mixin";
 export * from "./mixins/AnimateMixin";
 export * from "./mixins/AnimateSequenceItemMixin";
@@ -36,6 +41,7 @@ export {
     FocusStateMixin,
     LoadingStateMixin,
     StatefulMixin,
+    StaticAttributeMixin,
     ScrollableMixin,
     ScrollIntoViewMixin,
     UnmanagedClassNameMixin,
@@ -100,6 +106,13 @@ export function useClassNameToggleMixin<T extends Zeta.Dictionary<boolean>>(dict
  */
 export function useMixin<T extends typeof Mixin>(mixin: T): InstanceType<T>;
 
+/**
+ * Creates a mixin of the specified type within the lifetime of current component.
+ * @param mixin Constructor of the mixin type.
+ * @param options A dictionary specifying options.
+ */
+export function useMixin<T extends typeof Mixin>(mixin: T, options: InstanceType<T> extends WithOptions<infer U> ? U : never): InstanceType<T>;
+
 /**
  * Uses mixin passed from parent component.
  * @param mixin A {@link MixinRef} object.

package/mixin.js

@@ -11,6 +11,7 @@ import FlyoutToggleMixin from "./mixins/FlyoutToggleMixin.js";
 import FocusStateMixin from "./mixins/FocusStateMixin.js";
 import LoadingStateMixin from "./mixins/LoadingStateMixin.js";
 import StatefulMixin from "./mixins/StatefulMixin.js";
+import StaticAttributeMixin from "./mixins/StaticAttributeMixin.js";
 import ScrollableMixin from "./mixins/ScrollableMixin.js";
 import ScrollIntoViewMixin from "./mixins/ScrollIntoViewMixin.js";
 import UnmanagedClassNameMixin from "./mixins/UnmanagedClassNameMixin.js";
@@ -20,11 +21,7 @@ function extendSelf(options) {
 }
 
 function createUseFunction(ctor) {
-    return function () {
-        var mixin = useMixin(ctor);
-        (mixin.withOptions || extendSelf).apply(mixin, arguments);
-        return mixin;
-    };
+    return useMixin.bind(0, ctor);
 }
 
 export const useAnimateMixin = /*#__PURE__*/ createUseFunction(AnimateMixin);
@@ -37,10 +34,12 @@ export const useScrollableMixin = /*#__PURE__*/ createUseFunction(ScrollableMixi
 export const useScrollIntoViewMixin = /*#__PURE__*/ createUseFunction(ScrollIntoViewMixin);
 export const useUnmanagedClassNameMixin = /*#__PURE__*/ createUseFunction(UnmanagedClassNameMixin);
 
-export function useMixin(ctor) {
-    return useSingleton(function () {
+export function useMixin(ctor, options) {
+    var mixin = useSingleton(function () {
         return new ctor();
-    }).reset();
+    }, []).reset();
+    (mixin.withOptions || extendSelf).call(mixin, options);
+    return mixin;
 }
 
 export function useMixinRef(mixin) {
@@ -59,6 +58,7 @@ export {
     FocusStateMixin,
     LoadingStateMixin,
     StatefulMixin,
+    StaticAttributeMixin,
     ScrollableMixin,
     ScrollIntoViewMixin,
     UnmanagedClassNameMixin,

package/mixins/AnimateMixin.d.ts

@@ -48,4 +48,10 @@ export default class AnimateMixin extends ClassNameMixin {
      * @see {@link AnimationEffect} and {@link AnimationTrigger}.
      */
     withEffects(...effects: AnimationEffect[]): this;
+
+    /**
+     * Applies custom attributes to element.
+     * @private It is used internally by mixins and is declared for type inference.
+     */
+    getCustomAttributes(): Record<'animate-in' | 'animate-out', string>;
 }

package/mixins/AnimateSequenceItemMixin.d.ts

@@ -8,4 +8,10 @@ import ClassNameMixin from "./ClassNameMixin";
  */
 export default class AnimateSequenceItemMixin extends ClassNameMixin {
     constructor(className: string);
+
+    /**
+     * Applies custom attributes to element.
+     * @private It is used internally by mixins and is declared for type inference.
+     */
+    getCustomAttributes(): Record<'is-animate-sequence', string>;
 }

package/mixins/AnimateSequenceMixin.d.ts

@@ -13,4 +13,10 @@ export default class AnimateSequenceMixin extends AnimateMixin {
      * Returns a mixin that marks element to be a target of this animate sequence.
      */
     readonly item: AnimateSequenceItemMixin;
+
+    /**
+     * Applies custom attributes to element.
+     * @private It is used internally by mixins and is declared for type inference.
+     */
+    getCustomAttributes(): Record<'animate-sequence' | 'animate-sequence-type' | 'animate-out', string>;
 }

package/mixins/FlyoutMixin.d.ts

@@ -131,4 +131,10 @@ export default class FlyoutMixin<S = any, R = any> extends ClassNameMixin {
      * @returns A promise that resolves when the flyout is being closed.
      */
     toggleSelf(flag: boolean, source?: Element): Promise<HintedType<R>>;
+
+    /**
+     * Applies custom attributes to element.
+     * @private It is used internally by mixins and is declared for type inference.
+     */
+    getCustomAttributes(): Record<'is-flyout' | 'is-modal' | 'tab-through' | 'swipe-dismiss' | 'animate-on' | 'animate-in' | 'animate-out', string>;
 }

package/mixins/Mixin.d.ts

@@ -2,32 +2,35 @@ import React from "react";
 import { ClassName, ClassNameProvider } from "zeta-dom-react";
 import StaticAttributeMixin from "./StaticAttributeMixin";
 
-interface MixinProps {
-    ref: React.RefCallback<Element>;
+export type MixinProps<T extends Element, M> = MixinDefaultProps<T> & UnionToIntersection<M extends CustomAttributeProvider<infer P> ? P : never>;
+
+type UnionToIntersection<U> = (U extends any ? (k: U) => void : never) extends (k: infer I) => void ? I : never;
+type MixinTypes<T extends unknown[]> = Extract<Zeta.ArrayMember<T>, CustomAttributeProvider>;
+
+interface MixinDefaultProps<T extends Element> {
+    ref: React.RefCallback<T>;
     className: string;
 }
 
+interface CustomAttributeProvider<T = {}> {
+    getCustomAttributes(): T;
+}
+
 export default abstract class Mixin implements ClassNameProvider {
-    static readonly scrollableTarget: StaticAttributeMixin;
-    static readonly tabRoot: StaticAttributeMixin;
+    static readonly scrollableTarget: StaticAttributeMixin<Record<'scrollable-target', string>>;
+    static readonly tabRoot: StaticAttributeMixin<Record<'tab-root', string>>;
 
     /**
      * Applies React ref and mixins to element.
      * @param ref A ref callback or ref object.
      * @param args Mixin instances or string literals. String literals are applied to element as CSS classes.
      */
-    static use(ref: React.ForwardedRef<any>, ...args: (Mixin | string | undefined)[]): MixinProps;
+    static use<T extends Element, M extends readonly (Mixin | string | undefined)[]>(ref: React.ForwardedRef<T>, ...args: M): MixinProps<T, MixinTypes<M>>;
     /**
      * Applies mixins to element.
-     * @param mixin Mixin instance.
      * @param args Mixin instances or string literals. String literals are applied to element as CSS classes.
      */
-    static use(mixin: Mixin, ...args: (Mixin | string | undefined)[]): MixinProps;
-    /**
-     * Applies mixins to element.
-     * @param mixins Mixin instances.
-     */
-    static use(...mixins: (Mixin | undefined)[]): MixinProps;
+    static use<M extends readonly (Mixin | string | undefined)[]>(...args: M): MixinProps<Element, MixinTypes<M>>;
 
     /**
      * @private Internal use.
@@ -48,7 +51,7 @@ export default abstract class Mixin implements ClassNameProvider {
     /**
      * Override this method to apply custom attributes to element.
      */
-    getCustomAttributes(): Zeta.Dictionary<string>;
+    getCustomAttributes(): {};
     /**
      * @private Internal use.
      */

package/mixins/Mixin.js

@@ -34,36 +34,30 @@ define(Mixin, {
     },
     use: function () {
         const args = makeArray(arguments);
-        const ref = args[0];
         const props = {};
-        const mixins = args.filter(function (v) {
-            return v instanceof Mixin;
-        });
-        const refs = mixins.map(function (v) {
-            return v.getRef();
-        });
-        if (ref && !(ref instanceof Mixin)) {
-            if (typeof ref !== 'function') {
-                refs.push(function (v) {
-                    ref.current = v;
-                });
-            } else {
-                refs.push(ref);
-            }
+        const refs = [];
+        const ref = args[0];
+        if (!ref) {
+            args.shift();
+        } else if (typeof ref === 'function') {
+            refs.push(ref);
             args.shift();
-        } else if (!ref) {
+        } else if (typeof ref !== 'string' && !(ref instanceof Mixin)) {
+            refs.push(function (w) {
+                ref.current = w;
+            });
             args.shift();
         }
-        each(mixins, function (i, v) {
-            extend(props, v.getCustomAttributes());
+        each(args, function (i, v) {
+            if (v instanceof Mixin) {
+                refs.push(v.getRef());
+                extend(props, v.getCustomAttributes());
+                v.next();
+            }
         });
-        extend(props, {
+        return extend(props, {
             ref: combineFn(refs),
             className: classNames.apply(null, args)
         });
-        each(mixins, function (i, v) {
-            v.next();
-        });
-        return props;
     }
 });

package/mixins/ScrollableMixin.d.ts

@@ -53,7 +53,7 @@ export default class ScrollableMixin extends ClassNameMixin implements JQueryScr
      * Gets a mixin object that when applied to descecant element
      * the element will act as content to be scrolled.
      */
-    readonly target: StaticAttributeMixin;
+    readonly target: StaticAttributeMixin<Record<'scrollable-target', string>>;
     /**
      * Gets the element with scrollable plugin enabled.
      */
@@ -188,4 +188,10 @@ export default class ScrollableMixin extends ClassNameMixin implements JQueryScr
      * @returns A promise that resolves when scrolling is completed.
      */
     scrollToElement(target: Element | string, targetOrigin?: string, wrapperOrigin?: string, duration?: number, callback?: () => void): Promise<void> & JQueryScrollableState;
+
+    /**
+     * Applies custom attributes to element.
+     * @private It is used internally by mixins and is declared for type inference.
+     */
+    getCustomAttributes(): Record<'scrollable' | 'scroller-snap-page' | 'scroller-page' | 'persist-scroll', string>;
 }

package/mixins/StaticAttributeMixin.d.ts

@@ -1,13 +1,19 @@
 import Mixin from "./Mixin";
 
-export default class StaticAttributeMixin extends Mixin {
+export default class StaticAttributeMixin<P = {}> extends Mixin {
     /**
      * @param name Name of attribute.
      * @param value Value to be set. Default is empty string.
      */
-    constructor(name: string, value?: string);
+    constructor(name: keyof P, value?: P[keyof P]);
     /**
      * @param attributes A dictionary containing attributes and their values to be set on rendered elements.
      */
-    constructor(attributes: Record<string, string>);
+    constructor(attributes: P);
+
+    /**
+     * Applies custom attributes to element.
+     * @private It is used internally by mixins and is declared for type inference.
+     */
+    getCustomAttributes(): P;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "brew-js-react",
-  "version": "0.6.6",
+  "version": "0.7.0",
   "description": "",
   "type": "module",
   "main": "index.js",
@@ -13,10 +13,10 @@
   "repository": "github:misonou/brew-js-react",
   "dependencies": {
     "@misonou/react-dom-client": "^1.1.1",
-    "brew-js": ">=0.6.12",
+    "brew-js": ">=0.7.1",
     "waterpipe": "^2.5.0",
-    "zeta-dom": ">=0.5.11",
-    "zeta-dom-react": ">=0.5.11"
+    "zeta-dom": ">=0.6.0",
+    "zeta-dom-react": ">=0.6.0"
   },
   "peerDependencies": {
     "react": ">=16.8.0",