@workday/canvas-kit-react 7.0.0-alpha.0-next.7 → 7.0.0-alpha.100-next.25

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

@@ -1,3 +1,4 @@
+import React from 'react';
 export declare type Model<State, Events extends IEvent> = {
     state: State;
     events: Events;
@@ -103,5 +104,196 @@ export declare const createEvents: <TEvents extends EventCreator>(events: TEvent
     events: TEvents;
     eventMap: EventMap<ToEvent<TEvents>, TGuardMap, TCallbackMap>;
 };
+/**
+ * Special type that will be a placeholder during development. At build time, this generic will be
+ * used to create a real generic type for models. If you use `Generic`, you'll have to create an
+ * explicit type for your configs to preserve the `Generic` symbol, otherwise Typescript will
+ * convert to `any`.
+ */
+export declare type Generic = any;
+export declare type ModelExtras<TDefaultConfig, TRequiredConfig, TState, TEvents, TModel> = {
+    /** Default config of the model. Useful when composing models to reused config */
+    defaultConfig: TDefaultConfig;
+    /** Required config of the model. Useful when composing models to reused config */
+    requiredConfig: TRequiredConfig;
+    /**
+     * This is only a type and not a value. If you want to
+     */
+    TConfig: TDefaultConfig & TRequiredConfig;
+    /**
+     * The context of the model. This can be used directly, but is mostly used internally by
+     * `createContainer` or `createSubcomponent` to handle model context automatically.
+     */
+    Context: React.Context<TModel>;
+    /**
+     * This function will separate all elemProps from config props. If a prop is both a config _and_
+     * an elemProp, you can manually apply the prop again.
+     * */
+    getElemProps: <P extends {}>(props: P) => Omit<P, keyof TDefaultConfig | keyof TRequiredConfig | keyof ToEventConfig<TState, TEvents>>;
+    /**
+     * A typed function to merge config when composing models together. Guards and Callbacks haven't
+     * been resolved yet. `mergeConfig` is a type-attached function that includes guard and callback
+     * types of the composed model.
+     *
+     *
+     * @example
+     * ```ts
+     * const useComposedModel = createModelHook({
+     *   defaultConfig: useModel.defaultConfig,
+     *   requiredConfig: useModel.requiredConfig,
+     * })(config => {
+     *   const model = useModel(useModel.mergeConfig(config, {
+     *     // runtime will contain config.onUpdateValue, but Typescript can't know about it yet
+     *     // luckily `useModel.mergeConfig` knows about the `onUpdateValue` config option
+     *     onUpdateValue(data, prevState) {
+     *       console.log('onUpdateValue', data, prevState)
+     *     }
+     *   }))
+     *
+     *   return model
+     * })
+     * ```
+     */
+    mergeConfig: (source: TDefaultConfig & TRequiredConfig, target: Partial<TDefaultConfig & TRequiredConfig & ToEventConfig<TState, TEvents>>) => TDefaultConfig & TRequiredConfig & ToEventConfig<TState, TEvents>;
+};
+/**
+ * Generic type for all models. It makes `defaultConfig` have optional keys and adds `getElemProps`
+ * statically to the model function.
+ */
+export declare type ModelFn<TDefaultConfig, TRequiredConfig, TModel> = TModel extends {
+    state: infer TState;
+    events: infer TEvents;
+} ? (<TT_Special_Generic>(// special generic used by post processing to handle generic models
+config?: Partial<TDefaultConfig> & TRequiredConfig & ToEventConfig<TState, TEvents>) => TModel) & ModelExtras<TDefaultConfig, TRequiredConfig, TState, TEvents, TModel> : never;
+/**
+ * Generic type that adds guards and callbacks to events. The returned type should be applied to the
+ * return type of a model's config.
+ *
+ * For example,
+ * ```ts
+ * // input
+ * ToEventConfig<State, { updateValue: (data: { val: string }) }>
+ *
+ * //output
+ * {
+ *   shouldUpdateValue(data: {val:string}, state: State): boolean,
+ *   onUpdateValue(data: {val:string}, prevState: State): void
+ * }
+ * ```
+ */
+export declare type ToEventConfig<TState, TEvents extends Record<string, any>> = {
+    [K in keyof TEvents as `on${Capitalize<string & K>}`]?: (data: Parameters<TEvents[K]>[0], prevState: TState) => void;
+} & {
+    [K in keyof TEvents as `should${Capitalize<string & K>}`]?: (data: Parameters<TEvents[K]>[0], state: TState) => boolean;
+};
+export declare type ExtractModelConfig<T extends (config: any) => any> = T extends (config: infer P) => any ? Required<P> : {};
+export declare type ModelConfig<TDefaultConfig, TRequiredConfig> = {
+    /**
+     * Optional config with any defaults if applicable. The values will both be used
+     * to provide defaults if a config property isn't provided as well as to extract type
+     * information about the config option. To make a default config property really optional,
+     * provide `undefined` as the value and cast as the desired type.
+     *
+     * @example
+     * defaultConfig: {
+     *   // optional config with no default. Your model function will not get a default value
+     *   optional: undefined as undefined | string,
+     *   // defaulted value of inferred type `string`
+     *   defaulted: 'foo',
+     *   // defaulted value with a type override of `'foo' | 'bar'`
+     *   defaultedOverride: 'foo' as 'foo' | 'bar',
+     * }
+     */
+    defaultConfig?: TDefaultConfig;
+    /**
+     * Required config that has no default value. Since this is JavaScript, a value needs to be provided
+     * but the value is ignored at runtime. The value is used only for Typescript inference. You can
+     * use `as` to cast the type to something more specific than the inferred one.
+     *
+     * @example
+     * requiredConfig: {
+     *   // The `1` is ignored at runtime, but the type of `size` is `number`
+     *   size: 1,
+     *   // The value is ignored at runtime, but the type is `'bar' | 'baz'`
+     *   foo: 'bar' as 'bar' | 'baz'
+     * }
+     */
+    requiredConfig?: TRequiredConfig;
+    /**
+     * Use `defaultContext` to set the model passed to components that support rendering without a
+     * model or container component.
+     */
+    defaultContext?: Record<string, any>;
+    /**
+     * Useful if you want to extend a model, but not create a new model context. This allows models to
+     * be compatible with existing compound components. An example might be a modal model extends a
+     * popup model, but uses the same context. If you create your own subcomponents or container
+     * component that utilize this model, you'll need to set this property. Failure to do so will mean
+     * components are not getting the correct context.
+     *
+     * @example
+     * const useMyModel = createModelHook({
+     *   defaultConfig: {
+     *     ...useModel.defaultConfig, // inherit the same default config
+     *     initialValue: '',
+     *   },
+     *   requiredConfig: useModel.requiredConfig, // inherit the same required config
+     *   contextOverride: useModel.Context,
+     * })(config => {
+     *   // config has all the same config `useModel` has, but also `initialValue`
+     *
+     *   const model = useModel(config);
+     *   const [value, setValue] = React.useState(config.initialValue);
+     *   const state = { ...model.state, value } // merge model.state with our state
+     *   const events = {
+     *     ...model.events, // merge model.events with our events
+     *     updateValue(value: string) {
+     *       setValue(value)
+     *     }
+     *   }
+     *
+     *   return {
+     *     ...model, // merge any additional properties added to the model by the `useModel` hook
+     *     state,
+     *     events
+     *   }
+     * })
+     *
+     * const MySubComponent = createSubcomponent('div')({
+     *   modelHook: useMyModel, // this tells the component which model and context to use
+     * })((elemProps, Element, model) => {
+     *   elemProps // { children: React.ReactNode }
+     *   model.state.value // `string`
+     * })
+     */
+    contextOverride?: React.Context<any>;
+};
+/**
+ * Factory function to create typed models with minimal Typescript required. It is a function that
+ * takes `defaultConfig` and `requiredConfig` and returns a function that will become the definition
+ * of the model. The config objects will be used to generate a `getElemProps` function that is used
+ * to separate model config an element props.
+ *
+ * Typescript will infer all config from the returned `state`, `events`, and the `defaultConfig` and
+ * the `requiredConfig`. `defaultConfig` serves the additional purpose of being a default value if
+ * no config value was provided. `requiredConfig` is a little odd in that config values are ignored
+ * and only used to extract types.
+ *
+ * @example
+ * const useModel = createModelHook({
+ *   defaultConfig: {
+ *     optional: 'right' as 'left' | 'right', // optional type casting
+ *   },
+ *   requiredConfig: {
+ *     size: 1, // values are only used for types and are ignored at runtime
+ *   }
+ * })(config => {
+ *   // config is pre-typed for you based on `defaultConfig`
+ * })
+ */
+export declare const createModelHook: <TDefaultConfig extends {}, TRequiredConfig extends {}>(options: ModelConfig<TDefaultConfig, TRequiredConfig>) => <TModelFn extends (config: TDefaultConfig & TRequiredConfig) => {
+    state: {};
+    events: Record<string, (...args: any) => void>;
+}>(fn: TModelFn) => ModelFn<TDefaultConfig, TRequiredConfig, ReturnType<TModelFn>>;
 export {};
 //# sourceMappingURL=models.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"models.d.ts","sourceRoot":"","sources":["../../../../../common/lib/utils/models.ts"],"names":[],"mappings":"AAGA,oBAAY,KAAK,CAAC,KAAK,EAAE,MAAM,SAAS,MAAM,IAAI;IAChD,KAAK,EAAE,KAAK,CAAC;IACb,MAAM,EAAE,MAAM,CAAC;CAChB,CAAC;AAGF,aAAK,MAAM,GAAG;IAAC,CAAC,GAAG,EAAE,MAAM,GAAG;QAAC,cAAc,CAAC,IAAI,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;KAAC,CAAC,gBAAgB,CAAC,CAAA;CAAC,CAAC;AAEvF;;;;;GAKG;AACH,aAAK,QAAQ,CACX,OAAO,SAAS,MAAM,EACtB,SAAS,SAAS,MAAM,CAAC,MAAM,EAAE,MAAM,OAAO,CAAC,EAC/C,YAAY,SAAS,MAAM,CAAC,MAAM,EAAE,MAAM,OAAO,CAAC,IAChD;IACF,MAAM,EAAE,SAAS,CAAC;IAClB,SAAS,EAAE,YAAY,CAAC;CACzB,CAAC;AAEF,aAAK,aAAa,CAChB,MAAM,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,EAClC,OAAO,SAAS,MAAM,EACtB,SAAS,SAAS,MAAM,CAAC,MAAM,EAAE,MAAM,OAAO,CAAC,IAC7C;KACD,CAAC,IAAI,MAAM,SAAS,GAAG,CAAC,KAAK,EAAE;QAC9B,IAAI,EAAE,UAAU,CAAC,OAAO,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;QAC3C,KAAK,EAAE,MAAM,CAAC;KACf,KAAK,OAAO;CACd,CAAC;AAEF,aAAK,gBAAgB,CACnB,MAAM,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,EAClC,OAAO,SAAS,MAAM,EACtB,YAAY,SAAS,MAAM,CAAC,MAAM,EAAE,MAAM,OAAO,CAAC,IAChD;KACD,CAAC,IAAI,MAAM,YAAY,GAAG,CAAC,KAAK,EAAE;QACjC,IAAI,EAAE,UAAU,CAAC,OAAO,CAAC,YAAY,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;QAC9C;;;;WAIG;QACH,SAAS,EAAE,MAAM,CAAC;KACnB,KAAK,IAAI;CACX,CAAC;AAEF;;;;;;;;;GASG;AACH,oBAAY,aAAa,CACvB,MAAM,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,EAClC,OAAO,SAAS,MAAM,EACtB,SAAS,SAAS,QAAQ,CAAC,OAAO,EAAE,GAAG,EAAE,GAAG,CAAC,IAC3C,aAAa,CAAC,MAAM,EAAE,OAAO,EAAE,SAAS,CAAC,QAAQ,CAAC,CAAC,GACrD,gBAAgB,CAAC,MAAM,EAAE,OAAO,EAAE,SAAS,CAAC,WAAW,CAAC,CAAC,CAAC;AAE5D;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AAEH,eAAO,MAAM,cAAc,gPAQ1B,CAAC;AAKF;;;;;;;;;;;;;;;;;;;GAmBG;AACH,eAAO,MAAM,WAAW,0XAkEvB,CAAC;AAEF,aAAK,YAAY,GAAG;IAAC,CAAC,GAAG,EAAE,MAAM,GAAG;QAAC,cAAc,CAAC,GAAG,IAAI,EAAE,GAAG,EAAE,GAAG,MAAM,CAAA;KAAC,CAAC,gBAAgB,CAAC,CAAA;CAAC,CAAC;AAChG,aAAK,OAAO,CAAC,OAAO,SAAS,YAAY,IAAI;KAC1C,CAAC,IAAI,MAAM,OAAO,GAAG,CAAC,IAAI,EAAE,UAAU,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,KAAK,IAAI;CAC7D,CAAC;AAGF,eAAO,MAAM,YAAY;;;CAOxB,CAAC"}
+{"version":3,"file":"models.d.ts","sourceRoot":"","sources":["../../../../../common/lib/utils/models.ts"],"names":[],"mappings":"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"}

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

@@ -1,3 +1,25 @@
+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;
+};
 /* eslint-disable react-hooks/rules-of-hooks */
 import React from 'react';
 /**
@@ -99,19 +121,151 @@ export var useEventMap = function (eventMap, state, config, events) {
 export var createEvents = function (events) { return function (config) {
     return { events: events, eventMap: config };
 }; };
-// const disclosureEvents = createEvents({
-//   show(event: Event | React.SyntheticEvent) {
-//     return {event};
-//   },
-// })({
-//   callbacks: {
-//     onShow: 'show',
-//   },
-//   guards: {
-//     shouldShow: 'show',
-//   },
-// });
-// useDisclosureModel({
-//   onShow({data, prevState})
-// });
-// <Tabs calbacks={ show: () => {}}
+function capitalize(string) {
+    return string[0].toUpperCase() + string.substring(1);
+}
+function getGuardName(eventName) {
+    return "should" + capitalize(eventName);
+}
+function getCallbackName(eventName) {
+    return "on" + capitalize(eventName);
+}
+// Merges config together in a way that is type safe and works at runtime with correct rules and order applied
+// to guards and callbacks.
+function mergeConfig(sourceConfig, newConfig) {
+    var result = __assign({}, sourceConfig);
+    var _loop_1 = function (key) {
+        if (typeof newConfig[key] === "function" &&
+            /(on)[A-Z]/.test(key) &&
+            typeof sourceConfig[key] === "function") {
+            // merge callbacks and ignore Typescript's errors. We've already tested call signatures
+            //  @ts-ignore
+            result[key] = function (data, state) {
+                // @ts-ignore
+                sourceConfig[key](data, state);
+                // @ts-ignore
+                newConfig[key](data, state);
+            };
+        }
+        else if (newConfig[key] &&
+            /(should)[A-Z]/.test(key) &&
+            sourceConfig[key]) {
+            // merge guards and ignore Typescript's errors. We've already tested call signatures
+            // @ts-ignore
+            result[key] = function (data, state) {
+                // @ts-ignore
+                return sourceConfig[key](data, state) && newConfig[key](data, state);
+            };
+        }
+        else {
+            // @ts-ignore
+            result[key] = newConfig[key];
+        }
+    };
+    for (var key in newConfig) {
+        _loop_1(key);
+    }
+    return result;
+}
+/**
+ * Factory function to create typed models with minimal Typescript required. It is a function that
+ * takes `defaultConfig` and `requiredConfig` and returns a function that will become the definition
+ * of the model. The config objects will be used to generate a `getElemProps` function that is used
+ * to separate model config an element props.
+ *
+ * Typescript will infer all config from the returned `state`, `events`, and the `defaultConfig` and
+ * the `requiredConfig`. `defaultConfig` serves the additional purpose of being a default value if
+ * no config value was provided. `requiredConfig` is a little odd in that config values are ignored
+ * and only used to extract types.
+ *
+ * @example
+ * const useModel = createModelHook({
+ *   defaultConfig: {
+ *     optional: 'right' as 'left' | 'right', // optional type casting
+ *   },
+ *   requiredConfig: {
+ *     size: 1, // values are only used for types and are ignored at runtime
+ *   }
+ * })(config => {
+ *   // config is pre-typed for you based on `defaultConfig`
+ * })
+ */
+export var createModelHook = function (options) {
+    var _a = options.defaultConfig, defaultConfig = _a === void 0 ? {} : _a, _b = options.requiredConfig, requiredConfig = _b === void 0 ? {} : _b, defaultContext = options.defaultContext, contextOverride = options.contextOverride;
+    // create a bunch of refs so we can define the `wrappedModel` function once.
+    var fnRef = { current: null };
+    var callbacksRef = { current: [] };
+    var guardsRef = { current: [] };
+    var Context = contextOverride || React.createContext(defaultContext || { state: {}, events: {} });
+    var getElemProps = function (props) {
+        // if (eventsRef.current === null) {
+        //   throw Error(
+        //     `useModel.getElemProps() must be called after useModel(). getElemProps needs to determine the events returned by the model to function correctly.\nExample:\nconst model = useModel();\nconst elemProps = useModel.getElemProps(props);`
+        //   );
+        // }
+        var elemProps = {};
+        for (var key in props) {
+            if (!defaultConfig.hasOwnProperty(key) &&
+                !requiredConfig.hasOwnProperty(key) &&
+                !callbacksRef.current.includes(key) &&
+                !guardsRef.current.includes(key)) {
+                // @ts-ignore  Typescript complains about index signatures and this type is never exposed in definitions, so suppress the error
+                elemProps[key] = props[key];
+            }
+        }
+        return elemProps;
+    };
+    // we use `any` here because we don't know what the type is here and it is internal. No use
+    // slowing down Typescript to bother type checking
+    function wrappedModelHook(config) {
+        var stateRef = React.useRef({});
+        var configRef = React.useRef({});
+        var eventsRef = React.useRef({});
+        var _a = fnRef.current(__assign(__assign({}, defaultConfig), config)), state = _a.state, events = _a.events, rest = __rest(_a, ["state", "events"]);
+        // update all the refs with current values
+        stateRef.current = state;
+        configRef.current = config || {};
+        eventsRef.current = events;
+        if (!callbacksRef.current.length) {
+            callbacksRef.current = keys(events).map(getCallbackName);
+        }
+        if (!guardsRef.current.length) {
+            guardsRef.current = keys(events).map(getGuardName);
+        }
+        var wrappedEvents = React.useMemo(function () {
+            return keys(eventsRef.current).reduce(function (result, key) {
+                result[key] = function (data) {
+                    // Invoke the configured guard if there is one
+                    if (!eventsRef.current[key]._wrapped) {
+                        var guardFnName = getGuardName(key);
+                        if (configRef.current[guardFnName] &&
+                            !configRef.current[guardFnName](data, stateRef.current)) {
+                            return;
+                        }
+                    }
+                    // call the event (setter)
+                    eventsRef.current[key](data);
+                    var callbackFnName = getCallbackName(key);
+                    if (!eventsRef.current[key]._wrapped) {
+                        if (configRef.current[callbackFnName]) {
+                            configRef.current[callbackFnName](data, stateRef.current);
+                        }
+                    }
+                };
+                // Mark this function has been wrapped so we can detect wrapped events and not call guards and callbacks multiple times
+                result[key]._wrapped = true;
+                return result;
+            }, {});
+        }, []);
+        return __assign({ state: state, events: wrappedEvents }, rest);
+    }
+    wrappedModelHook.getElemProps = getElemProps;
+    wrappedModelHook.defaultConfig = defaultConfig;
+    wrappedModelHook.requiredConfig = requiredConfig;
+    wrappedModelHook.mergeConfig = mergeConfig;
+    wrappedModelHook.Context = Context;
+    return function (fn) {
+        fnRef.current = fn;
+        return wrappedModelHook; // Typescript complains about the `fn` not matching the signature. It's okay Typescript. It works at runtime
+    };
+};