@workday/canvas-kit-docs 9.0.0-alpha.368-next.6 → 9.0.0-alpha.382-next.2

package/dist/es6/docgen/plugins/enhancedComponentParser.js

@@ -1,42 +1,26 @@
-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 __spreadArray = (this && this.__spreadArray) || function (to, from) {
-    for (var i = 0, il = from.length, j = to.length; i < il; i++, j++)
-        to[j] = from[i];
-    return to;
-};
 import ts from 'typescript';
 import { createParserPlugin, defaultJSDoc, findDocComment, getDefaultsFromObjectBindingParameter, getSymbolFromNode, getValueDeclaration, unknownValue, filterObjectProperties, getDefaultFromTags, getValidDefaultFromNode, } from '../docParser';
 import t from '../traverse';
 /** Track if we've set a custom color symbol yet */
-var shouldCreateColorSymbol = true;
+let shouldCreateColorSymbol = true;
 function dashCase(value) {
     return value
-        .replace(/^([A-Z])/, function (s, l) { return l.toLowerCase(); })
-        .replace(/([A-Z])/g, function (s, l) { return "-" + l.toLowerCase(); });
+        .replace(/^([A-Z])/, (s, l) => l.toLowerCase())
+        .replace(/([A-Z])/g, (s, l) => `-${l.toLowerCase()}`);
 }
 function isElemPropsJSXElement(node) {
     return (t.isJsxAttributes(node.attributes) &&
-        node.attributes.properties.some(function (at) {
-            return t.isJsxSpreadAttribute(at) &&
-                t.isIdentifier(at.expression) &&
-                at.expression.text === 'elemProps';
-        }));
+        node.attributes.properties.some(at => t.isJsxSpreadAttribute(at) &&
+            t.isIdentifier(at.expression) &&
+            at.expression.text === 'elemProps'));
 }
 function getDefaultFromJSX(parser, node, propName) {
-    var JSXElement = __spreadArray(__spreadArray([], t(node).find('JsxSelfClosingElement')), t(node).find('JsxOpeningElement')).find(isElemPropsJSXElement);
+    const JSXElement = [
+        ...t(node).find('JsxSelfClosingElement'),
+        ...t(node).find('JsxOpeningElement'),
+    ].find(isElemPropsJSXElement);
     if (JSXElement) {
-        for (var _i = 0, _a = JSXElement.attributes.properties; _i < _a.length; _i++) {
-            var attribute = _a[_i];
+        for (const attribute of JSXElement.attributes.properties) {
             /**
              * A JSXAttribute is the attribute and initializer
              *
@@ -100,7 +84,7 @@ expression) {
         return {
             kind: 'external',
             name: expression.text,
-            url: "https://developer.mozilla.org/en-US/docs/Web/HTML/Element/" + expression.text,
+            url: `https://developer.mozilla.org/en-US/docs/Web/HTML/Element/${expression.text}`,
         };
     }
     else if (expression && t.isIdentifier(expression)) {
@@ -108,14 +92,14 @@ expression) {
     }
     return undefined;
 }
-export var enhancedComponentParser = createParserPlugin(function (node, parser) {
+export const enhancedComponentParser = createParserPlugin((node, parser) => {
     var _a;
     /**
      * Filter out props from `@types/react`
      */
     if (t.isPropertySignature(node)) {
-        var symbol = getSymbolFromNode(parser.checker, node);
-        var declaration = getValueDeclaration(symbol);
+        const symbol = getSymbolFromNode(parser.checker, node);
+        const declaration = getValueDeclaration(symbol);
         if (declaration && declaration.getSourceFile().fileName.includes('@types/react')) {
             return { kind: 'unknown', value: 'unknown', text: 'empty' };
         }
@@ -130,12 +114,17 @@ export var enhancedComponentParser = createParserPlugin(function (node, parser)
         t.isLiteralType(node.indexType) &&
         t.isStringLiteral(node.indexType.literal) &&
         node.indexType.literal.text === 'color') {
-        var fileName = ((_a = node.getSourceFile()) === null || _a === void 0 ? void 0 : _a.fileName) || '';
+        const fileName = ((_a = node.getSourceFile()) === null || _a === void 0 ? void 0 : _a.fileName) || '';
         if (shouldCreateColorSymbol) {
             shouldCreateColorSymbol = false;
-            parser.symbols.push(__assign(__assign({ name: 'CanvasColorTokens', fileName: fileName }, defaultJSDoc), { type: {
+            parser.symbols.push({
+                name: 'CanvasColorTokens',
+                fileName,
+                ...defaultJSDoc,
+                type: {
                     kind: 'canvasColor',
-                } }));
+                },
+            });
         }
         return { kind: 'symbol', name: 'CanvasColorTokens' };
     }
@@ -149,8 +138,8 @@ export var enhancedComponentParser = createParserPlugin(function (node, parser)
         t.isIdentifier(node.typeName.right)) {
         return {
             kind: 'external',
-            name: node.typeName.left.text + "." + node.typeName.right.text,
-            url: "https://developer.mozilla.org/en-US/docs/Web/CSS/" + dashCase(node.typeName.right.text),
+            name: `${node.typeName.left.text}.${node.typeName.right.text}`,
+            url: `https://developer.mozilla.org/en-US/docs/Web/CSS/${dashCase(node.typeName.right.text)}`,
         };
     }
     /**
@@ -165,14 +154,14 @@ export var enhancedComponentParser = createParserPlugin(function (node, parser)
         t.isIdentifier(node.expression.expression) &&
         node.expression.expression.text === 'createSubModelElemPropsHook') {
         // first argument in `subModel`
-        var modelArgument = node.expression.arguments[0];
-        var otherElemPropsHook = node.arguments[1];
+        const modelArgument = node.expression.arguments[0];
+        const otherElemPropsHook = node.arguments[1];
         if (modelArgument &&
             otherElemPropsHook &&
             t.isIdentifier(modelArgument) &&
             t.isIdentifier(otherElemPropsHook)) {
-            var modelName = modelArgument.text.replace('use', '');
-            var otherElemPropsHookName = otherElemPropsHook.text;
+            const modelName = modelArgument.text.replace('use', '');
+            const otherElemPropsHookName = otherElemPropsHook.text;
             return {
                 kind: 'callExpression',
                 name: { kind: 'symbol', name: node.expression.expression.text },
@@ -180,10 +169,15 @@ export var enhancedComponentParser = createParserPlugin(function (node, parser)
                     {
                         kind: 'function',
                         parameters: [
-                            __assign(__assign({ kind: 'parameter', name: 'model' }, defaultJSDoc), { type: {
+                            {
+                                kind: 'parameter',
+                                name: 'model',
+                                ...defaultJSDoc,
+                                type: {
                                     kind: 'symbol',
                                     name: modelName,
-                                } }),
+                                },
+                            },
                         ],
                         returnType: {
                             kind: 'symbol',
@@ -208,31 +202,49 @@ export var enhancedComponentParser = createParserPlugin(function (node, parser)
             t.isIdentifier(node.expression.expression) &&
             node.expression.expression.text === 'createElemPropsHook') {
             // first argument in `createElemPropsHook`
-            var modelArgument = node.expression.arguments[0];
+            const modelArgument = node.expression.arguments[0];
             // first argument in the curried function of `createElemPropsHook`
             if (modelArgument && t.isIdentifier(modelArgument)) {
-                var modelName = modelArgument.text.replace('use', '');
-                var type = parser.checker.getTypeAtLocation(node.arguments[0]);
-                var signature = type.getCallSignatures()[0];
-                var elemProps = getElemPropsFromElemPropsHook(parser, signature);
-                var returnType = getReturnTypeFromElemPropsHook(parser, signature);
-                var parameters = [
-                    __assign(__assign({ kind: 'parameter', name: 'model' }, defaultJSDoc), { type: {
+                const modelName = modelArgument.text.replace('use', '');
+                const type = parser.checker.getTypeAtLocation(node.arguments[0]);
+                const signature = type.getCallSignatures()[0];
+                const elemProps = getElemPropsFromElemPropsHook(parser, signature);
+                const returnType = getReturnTypeFromElemPropsHook(parser, signature);
+                const parameters = [
+                    {
+                        kind: 'parameter',
+                        name: 'model',
+                        ...defaultJSDoc,
+                        type: {
                             kind: 'symbol',
                             name: modelName,
-                        }, required: true }),
-                    __assign(__assign({ kind: 'parameter', name: 'elemProps' }, defaultJSDoc), { type: elemProps, required: false }),
-                    __assign(__assign({ kind: 'parameter', name: 'ref' }, defaultJSDoc), { type: {
+                        },
+                        required: true,
+                    },
+                    {
+                        kind: 'parameter',
+                        name: 'elemProps',
+                        ...defaultJSDoc,
+                        type: elemProps,
+                        required: false,
+                    },
+                    {
+                        kind: 'parameter',
+                        name: 'ref',
+                        ...defaultJSDoc,
+                        type: {
                             kind: 'external',
                             name: 'React.Ref',
                             url: 'https://reactjs.org/docs/refs-and-the-dom.html',
-                        }, required: false }),
+                        },
+                        required: false,
+                    },
                 ];
                 return {
                     kind: 'function',
                     name: { kind: 'symbol', name: node.expression.expression.text },
-                    parameters: parameters,
-                    returnType: returnType,
+                    parameters,
+                    returnType,
                     // model: modelName,
                     // elemProps,
                     // returnProps,
@@ -250,7 +262,7 @@ export var enhancedComponentParser = createParserPlugin(function (node, parser)
         return {
             kind: 'callExpression',
             name: { kind: 'symbol', name: node.initializer.expression.text },
-            parameters: node.initializer.arguments.map(function (value) { return parser.getValueFromNode(value); }),
+            parameters: node.initializer.arguments.map(value => parser.getValueFromNode(value)),
         };
     }
     /**
@@ -275,13 +287,13 @@ export var enhancedComponentParser = createParserPlugin(function (node, parser)
         t.isIdentifier(node.name) &&
         node.initializer &&
         t.isCallExpression(node.initializer)) {
-        var name_1 = node.name.text;
-        var elemPropsHookValue_1 = getElemPropsHookValue(node.initializer, name_1);
-        if (elemPropsHookValue_1) {
-            return elemPropsHookValue_1;
+        const name = node.name.text;
+        const elemPropsHookValue = getElemPropsHookValue(node.initializer, name);
+        if (elemPropsHookValue) {
+            return elemPropsHookValue;
         }
     }
-    var elemPropsHookValue = getElemPropsHookValue(node);
+    const elemPropsHookValue = getElemPropsHookValue(node);
     if (elemPropsHookValue) {
         return elemPropsHookValue;
     }
@@ -307,7 +319,7 @@ export var enhancedComponentParser = createParserPlugin(function (node, parser)
         t.isCallExpression(node.initializer.expression) &&
         t.isIdentifier(node.initializer.expression.expression) &&
         node.initializer.expression.expression.text === 'createComponent') {
-        var baseElement = getBaseElement(parser, node.initializer.expression.arguments[0]);
+        const baseElement = getBaseElement(parser, node.initializer.expression.arguments[0]);
         /**
          * options is the object containing the `Component` function
          * ```ts
@@ -317,29 +329,29 @@ export var enhancedComponentParser = createParserPlugin(function (node, parser)
          * })
          * ```
          */
-        var options = node.initializer.arguments[0];
+        const options = node.initializer.arguments[0];
         if (options && t.isObjectLiteralExpression(options)) {
-            var signature = options.properties.find(function (n) { return n.name && t.isIdentifier(n.name) && n.name.text === 'Component'; });
-            var displayName = getDisplayName(parser, options);
-            var subComponents = getSubcomponents(parser, options);
+            const signature = options.properties.find(n => n.name && t.isIdentifier(n.name) && n.name.text === 'Component');
+            const displayName = getDisplayName(parser, options);
+            const subComponents = getSubcomponents(parser, options);
             if (signature) {
-                var componentExpression = t.isMethodDeclaration(signature)
+                const componentExpression = t.isMethodDeclaration(signature)
                     ? signature
                     : t.isPropertyAssignment(signature)
                         ? signature.initializer
                         : undefined;
                 if (componentExpression && ts.isFunctionLike(componentExpression)) {
-                    var type = parser.checker.getTypeAtLocation(componentExpression.parameters[0]);
-                    var props = getComponentProps(parser, componentExpression, type, baseElement);
-                    var styleComponent = getStyleComponent(displayName, props);
+                    const type = parser.checker.getTypeAtLocation(componentExpression.parameters[0]);
+                    const props = getComponentProps(parser, componentExpression, type, baseElement);
+                    const styleComponent = getStyleComponent(displayName, props);
                     return {
                         kind: 'enhancedComponent',
                         componentType: 'regular',
-                        displayName: displayName,
+                        displayName,
                         props: getNonDefaultNonLayoutProps(displayName, props),
-                        baseElement: baseElement,
-                        subComponents: subComponents,
-                        styleComponent: styleComponent,
+                        baseElement,
+                        subComponents,
+                        styleComponent,
                     };
                 }
             }
@@ -352,35 +364,35 @@ export var enhancedComponentParser = createParserPlugin(function (node, parser)
         t.isCallExpression(node.initializer.expression.expression) &&
         t.isIdentifier(node.initializer.expression.expression.expression) &&
         node.initializer.expression.expression.expression.text === 'createContainer') {
-        var baseElement = getBaseElement(parser, node.initializer.expression.expression.arguments[0]);
-        var options = node.initializer.expression.arguments[0];
-        var modelName = getModelName(parser, options);
-        var displayName = getDisplayName(parser, options);
-        var subComponents = getSubcomponents(parser, options);
-        var elemPropsHook = getElemPropsHook(parser, options);
-        var signature = node.initializer.arguments[0];
+        const baseElement = getBaseElement(parser, node.initializer.expression.expression.arguments[0]);
+        const options = node.initializer.expression.arguments[0];
+        const modelName = getModelName(parser, options);
+        const displayName = getDisplayName(parser, options);
+        const subComponents = getSubcomponents(parser, options);
+        const elemPropsHook = getElemPropsHook(parser, options);
+        const signature = node.initializer.arguments[0];
         if (ts.isFunctionLike(signature) && modelName) {
-            var type = node.initializer.typeArguments
+            const type = node.initializer.typeArguments
                 ? parser.checker.getTypeAtLocation(node.initializer.typeArguments[0])
                 : undefined;
-            var props = (type ? getComponentProps(parser, signature, type, baseElement) : [])
+            const props = (type ? getComponentProps(parser, signature, type, baseElement) : [])
                 .filter(
             // Filter out `model` and `elemPropsHook` that might come if we extend an interface
-            function (p) { return !['model', 'elemPropsHook'].includes(p.name); })
+            p => !['model', 'elemPropsHook'].includes(p.name))
                 .filter(filterOutModelProps);
             props.push(getModelProp(parser, modelName));
             props.push(getElemProp(parser, modelName));
-            var styleComponent = getStyleComponent(displayName, props);
+            const styleComponent = getStyleComponent(displayName, props);
             return {
                 kind: 'enhancedComponent',
                 componentType: 'container',
-                displayName: displayName,
-                elemPropsHook: elemPropsHook,
+                displayName,
+                elemPropsHook,
                 props: getNonDefaultNonLayoutProps(displayName, props),
-                baseElement: baseElement,
+                baseElement,
                 model: modelName,
-                styleComponent: styleComponent,
-                subComponents: subComponents,
+                styleComponent,
+                subComponents,
             };
         }
     }
@@ -391,32 +403,32 @@ export var enhancedComponentParser = createParserPlugin(function (node, parser)
         t.isCallExpression(node.initializer.expression.expression) &&
         t.isIdentifier(node.initializer.expression.expression.expression) &&
         node.initializer.expression.expression.expression.text === 'createSubcomponent') {
-        var baseElement = getBaseElement(parser, node.initializer.expression.expression.arguments[0]);
-        var options = node.initializer.expression.arguments[0];
-        var modelName = getModelName(parser, options);
-        var subComponents = getSubcomponents(parser, options);
-        var elemPropsHook = getElemPropsHook(parser, options);
-        var displayName = getDisplayName(parser, options);
-        var signature = node.initializer.arguments[0];
+        const baseElement = getBaseElement(parser, node.initializer.expression.expression.arguments[0]);
+        const options = node.initializer.expression.arguments[0];
+        const modelName = getModelName(parser, options);
+        const subComponents = getSubcomponents(parser, options);
+        const elemPropsHook = getElemPropsHook(parser, options);
+        const displayName = getDisplayName(parser, options);
+        const signature = node.initializer.arguments[0];
         if (ts.isFunctionLike(signature) && modelName) {
-            var type = node.initializer.typeArguments
+            const type = node.initializer.typeArguments
                 ? parser.checker.getTypeAtLocation(node.initializer.typeArguments[0])
                 : undefined;
-            var props = (type ? getComponentProps(parser, signature, type, baseElement) : []).filter(
+            const props = (type ? getComponentProps(parser, signature, type, baseElement) : []).filter(
             // Filter out `model` and `elemPropsHook` that might come if we extend an interface
-            function (p) { return !['model', 'elemPropsHook'].includes(p.name); });
+            p => !['model', 'elemPropsHook'].includes(p.name));
             props.push(getModelProp(parser, modelName));
             props.push(getElemProp(parser, modelName));
-            var styleComponent = getStyleComponent(displayName, props);
+            const styleComponent = getStyleComponent(displayName, props);
             return {
                 kind: 'enhancedComponent',
                 componentType: 'subcomponent',
-                elemPropsHook: elemPropsHook,
-                displayName: displayName,
+                elemPropsHook,
+                displayName,
                 props: getNonDefaultNonLayoutProps(displayName, props),
-                baseElement: baseElement,
-                subComponents: subComponents,
-                styleComponent: styleComponent,
+                baseElement,
+                subComponents,
+                styleComponent,
                 model: modelName,
             };
         }
@@ -429,7 +441,7 @@ function filterOutModelProps(prop) {
 }
 function getDisplayName(parser, node) {
     if (t.isObjectLiteralExpression(node)) {
-        var displayProperty = node.properties.find(function (p) { return p.name && t.isIdentifier(p.name) && p.name.text === 'displayName'; });
+        const displayProperty = node.properties.find(p => p.name && t.isIdentifier(p.name) && p.name.text === 'displayName');
         if (displayProperty &&
             t.isPropertyAssignment(displayProperty) &&
             t.isStringLiteral(displayProperty.initializer)) {
@@ -442,7 +454,7 @@ function getNonDefaultNonLayoutProps(displayName, props) {
     if (displayName && ['Flex', 'Box', 'Grid'].includes(displayName)) {
         return props;
     }
-    return props.filter(function (p) {
+    return props.filter(p => {
         if (!p.declarations[0]) {
             // No declaration is found, we'll include this prop
             return true;
@@ -452,11 +464,11 @@ function getNonDefaultNonLayoutProps(displayName, props) {
 }
 function getReturnTypeFromElemPropsHook(parser, signature) {
     if (signature) {
-        var type = signature.getReturnType();
+        const type = signature.getReturnType();
         // A TypeNode is a synthetic AST representation of a type. No truncation removes the `... 12 more ...`
-        var typeNode = parser.checker.typeToTypeNode(type, undefined, ts.NodeBuilderFlags.NoTruncation);
+        const typeNode = parser.checker.typeToTypeNode(type, undefined, ts.NodeBuilderFlags.NoTruncation);
         if (typeNode) {
-            var value = parser.getValueFromNode(typeNode);
+            const value = parser.getValueFromNode(typeNode);
             if (value.kind === 'object') {
                 value.properties;
             }
@@ -467,11 +479,11 @@ function getReturnTypeFromElemPropsHook(parser, signature) {
 }
 function getElemPropsFromElemPropsHook(parser, signature) {
     if (signature) {
-        var elemPropsParam = signature.getParameters()[2];
+        const elemPropsParam = signature.getParameters()[2];
         if (!elemPropsParam) {
             return { kind: 'object', properties: [] };
         }
-        var elemPropsNode = getValueDeclaration(elemPropsParam);
+        const elemPropsNode = getValueDeclaration(elemPropsParam);
         if (elemPropsNode && t.isParameter(elemPropsNode)) {
             return parser.getValueFromNode(elemPropsNode).type;
         }
@@ -480,14 +492,14 @@ function getElemPropsFromElemPropsHook(parser, signature) {
 }
 function getElemPropsHook(parser, node) {
     if (t.isObjectLiteralExpression(node)) {
-        var subComponentProperty = node.properties.find(function (p) { return p.name && t.isIdentifier(p.name) && p.name.text === 'elemPropsHook'; });
+        const subComponentProperty = node.properties.find(p => p.name && t.isIdentifier(p.name) && p.name.text === 'elemPropsHook');
         if (subComponentProperty &&
             t.isPropertyAssignment(subComponentProperty) &&
             t.isIdentifier(subComponentProperty.initializer)) {
             // Check if the elemProps is aliased to another hook
             // for example, `const useMyComponent = useMyOtherComponent`
-            var symbol = getSymbolFromNode(parser.checker, subComponentProperty.initializer);
-            var declaration = getValueDeclaration(symbol);
+            const symbol = getSymbolFromNode(parser.checker, subComponentProperty.initializer);
+            const declaration = getValueDeclaration(symbol);
             if (declaration &&
                 t.isVariableDeclaration(declaration) &&
                 declaration.initializer &&
@@ -501,61 +513,92 @@ function getElemPropsHook(parser, node) {
 }
 function getSubcomponents(parser, node) {
     if (t.isObjectLiteralExpression(node)) {
-        var subComponentProperty = node.properties.find(function (p) { return p.name && t.isIdentifier(p.name) && p.name.text === 'subComponents'; });
+        const subComponentProperty = node.properties.find(p => p.name && t.isIdentifier(p.name) && p.name.text === 'subComponents');
         if (subComponentProperty &&
             t.isPropertyAssignment(subComponentProperty) &&
             t.isObjectLiteralExpression(subComponentProperty.initializer)) {
             return subComponentProperty.initializer.properties
-                .map(function (p) {
+                .map(p => {
                 if (t.isPropertyAssignment(p) &&
                     t.isIdentifier(p.name) &&
                     t.isIdentifier(p.initializer)) {
-                    var symbol = getSymbolFromNode(parser.checker, p.name);
-                    var jsDoc = findDocComment(parser.checker, symbol);
-                    return __assign({ name: p.name.text, symbol: p.initializer.text }, jsDoc);
+                    const symbol = getSymbolFromNode(parser.checker, p.name);
+                    const jsDoc = findDocComment(parser.checker, symbol);
+                    return {
+                        name: p.name.text,
+                        symbol: p.initializer.text,
+                        ...jsDoc,
+                    };
                 }
                 if (t.isShorthandPropertyAssignment(p) && t.isIdentifier(p.name)) {
-                    var symbol = getSymbolFromNode(parser.checker, p.name);
-                    var jsDoc = findDocComment(parser.checker, symbol);
-                    return __assign({ name: p.name.text, symbol: p.name.text }, jsDoc);
+                    const symbol = getSymbolFromNode(parser.checker, p.name);
+                    const jsDoc = findDocComment(parser.checker, symbol);
+                    return {
+                        name: p.name.text,
+                        symbol: p.name.text,
+                        ...jsDoc,
+                    };
                 }
                 return;
             })
-                .filter(function (v) { return !!v; });
+                .filter((v) => !!v);
         }
         return;
     }
     return undefined;
 }
 function getModelProp(parser, modelName) {
-    return __assign(__assign({ kind: 'property', name: 'model' }, defaultJSDoc), { description: 'Optional model to pass to the component. This will override the default model created for the component. This can be useful if you want to access to the state and events of the model, or if you have nested components of the same type and you need to override the model provided by React Context.', type: {
+    return {
+        kind: 'property',
+        name: 'model',
+        ...defaultJSDoc,
+        description: 'Optional model to pass to the component. This will override the default model created for the component. This can be useful if you want to access to the state and events of the model, or if you have nested components of the same type and you need to override the model provided by React Context.',
+        type: {
             kind: 'symbol',
             name: modelName,
-        } });
+        },
+    };
 }
 function getElemProp(parser, modelName) {
-    return __assign(__assign({ kind: 'property', name: 'elemPropsHook' }, defaultJSDoc), { description: 'Optional hook that receives the model and all props to be applied to the element. If you use this, it is your responsibility to return props, merging as appropriate. For example, returning an empty object will disable all elemProps hooks associated with this component. This allows finer control over a component without creating a new one.', type: {
+    return {
+        kind: 'property',
+        name: 'elemPropsHook',
+        ...defaultJSDoc,
+        description: 'Optional hook that receives the model and all props to be applied to the element. If you use this, it is your responsibility to return props, merging as appropriate. For example, returning an empty object will disable all elemProps hooks associated with this component. This allows finer control over a component without creating a new one.',
+        type: {
             kind: 'function',
             parameters: [
-                __assign(__assign({ kind: 'parameter' }, defaultJSDoc), { name: 'model', type: {
+                {
+                    kind: 'parameter',
+                    ...defaultJSDoc,
+                    name: 'model',
+                    type: {
                         kind: 'symbol',
                         name: modelName,
-                    }, required: true }),
-                __assign(__assign({ kind: 'parameter' }, defaultJSDoc), { name: 'elemProps', type: {
+                    },
+                    required: true,
+                },
+                {
+                    kind: 'parameter',
+                    ...defaultJSDoc,
+                    name: 'elemProps',
+                    type: {
                         kind: 'generic',
                         name: 'TProps',
-                    } }),
+                    },
+                },
             ],
             returnType: {
                 kind: 'external',
                 name: 'HTML Attributes',
                 url: 'https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes',
             },
-        } });
+        },
+    };
 }
 function getModelName(parser, node) {
     if (t.isObjectLiteralExpression(node)) {
-        var modelProperty = node.properties.find(function (property) {
+        const modelProperty = node.properties.find(property => {
             return (t.isPropertyAssignment(property) &&
                 t.isIdentifier(property.name) &&
                 property.name.text === 'modelHook');
@@ -576,14 +619,14 @@ function getModelName(parser, node) {
  * @returns
  */
 function getComponentProps(parser, signature, type, baseElement) {
-    var parameterDefaults = getDefaultsFromObjectBindingParameter(parser, signature.parameters[0]);
-    var props = type
+    const parameterDefaults = getDefaultsFromObjectBindingParameter(parser, signature.parameters[0]);
+    const props = type
         .getProperties()
-        .map(function (symbol) {
-        var defaultValue = parameterDefaults[symbol.name] ||
+        .map(symbol => {
+        const defaultValue = parameterDefaults[symbol.name] ||
             getDefaultFromTags(symbol.getJsDocTags()) ||
             getDefaultFromJSX(parser, signature, symbol.name);
-        var value = parser.getValueFromNode(getValueDeclaration(symbol));
+        const value = parser.getValueFromNode(getValueDeclaration(symbol));
         if (value.kind === 'property') {
             // @ts-ignore Not sure why this only fails in typecheck
             value.defaultValue = defaultValue;
@@ -591,21 +634,38 @@ function getComponentProps(parser, signature, type, baseElement) {
         return value;
     })
         .filter(filterObjectProperties);
-    if (!props.find(function (p) { return p.name === 'children'; })) {
-        props.push(__assign(__assign({ kind: 'property', name: 'children' }, defaultJSDoc), { type: {
+    if (!props.find(p => p.name === 'children')) {
+        props.push({
+            kind: 'property',
+            name: 'children',
+            ...defaultJSDoc,
+            type: {
                 kind: 'external',
                 name: 'React.ReactNode',
                 url: 'https://reactjs.org/docs/rendering-elements.html',
-            } }));
+            },
+        });
     }
     if (baseElement) {
         // Make it the first prop
-        props.push(__assign(__assign({ kind: 'property', name: 'as' }, defaultJSDoc), { description: 'Optional override of the default element used by the component. Any valid tag or Component. If you provided a Component, this component should forward the ref using `React.forwardRef`and spread extra props to a root element.\n\n**Note:** Not all elements make sense and some elements may cause accessibility issues. Change this value with care.', type: {
+        props.push({
+            kind: 'property',
+            name: 'as',
+            ...defaultJSDoc,
+            description: 'Optional override of the default element used by the component. Any valid tag or Component. If you provided a Component, this component should forward the ref using `React.forwardRef`and spread extra props to a root element.\n\n**Note:** Not all elements make sense and some elements may cause accessibility issues. Change this value with care.',
+            type: {
                 kind: 'external',
                 name: 'React.ElementType',
                 url: 'https://developer.mozilla.org/en-US/docs/Web/API/element',
-            }, defaultValue: baseElement }));
-        props.push(__assign(__assign({ kind: 'property', name: 'ref' }, defaultJSDoc), { description: 'Optional ref. If the component represents an element, this ref will be a reference to the real DOM element of the component. If `as` is set to an element, it will be that element. If `as` is a component, the reference will be to that component (or element if the component uses `React.forwardRef`).', type: {
+            },
+            defaultValue: baseElement,
+        });
+        props.push({
+            kind: 'property',
+            name: 'ref',
+            ...defaultJSDoc,
+            description: 'Optional ref. If the component represents an element, this ref will be a reference to the real DOM element of the component. If `as` is set to an element, it will be that element. If `as` is a component, the reference will be to that component (or element if the component uses `React.forwardRef`).',
+            type: {
                 kind: 'external',
                 name: 'React.Ref',
                 url: 'https://reactjs.org/docs/refs-and-the-dom.html',
@@ -617,26 +677,27 @@ function getComponentProps(parser, signature, type, baseElement) {
                         defaultValue: baseElement,
                     },
                 ],
-            } }));
+            },
+        });
     }
     return props;
 }
 function getStyleComponent(displayName, props) {
-    if (props.some(function (p) { var _a; return (_a = p.declarations[0]) === null || _a === void 0 ? void 0 : _a.filePath.includes('utils/grid.ts'); }) &&
+    if (props.some(p => { var _a; return (_a = p.declarations[0]) === null || _a === void 0 ? void 0 : _a.filePath.includes('utils/grid.ts'); }) &&
         displayName !== 'Grid') {
         return {
             kind: 'symbol',
             name: 'Grid',
         };
     }
-    if (props.some(function (p) { var _a; return (_a = p.declarations[0]) === null || _a === void 0 ? void 0 : _a.filePath.includes('utils/flex.ts'); }) &&
+    if (props.some(p => { var _a; return (_a = p.declarations[0]) === null || _a === void 0 ? void 0 : _a.filePath.includes('utils/flex.ts'); }) &&
         displayName !== 'Flex') {
         return {
             kind: 'symbol',
             name: 'Flex',
         };
     }
-    if (props.some(function (p) { var _a; return (_a = p.declarations[0]) === null || _a === void 0 ? void 0 : _a.filePath.includes('utils/layout.ts'); }) &&
+    if (props.some(p => { var _a; return (_a = p.declarations[0]) === null || _a === void 0 ? void 0 : _a.filePath.includes('utils/layout.ts'); }) &&
         displayName !== 'Box') {
         return {
             kind: 'symbol',