diff --git a/core/instrument/src/babel/follow-imports.ts b/core/instrument/src/babel/follow-imports.ts index bc442eee1..256075c21 100644 --- a/core/instrument/src/babel/follow-imports.ts +++ b/core/instrument/src/babel/follow-imports.ts @@ -63,7 +63,7 @@ export const followImports = ( exportedAs: findExport.name, loc: findExport.loc, from: '', - source, + source: components?.storeSourceFile ? source : undefined, }; } else { const resolvedFilePath = resolve.sync(findExport.from, { diff --git a/core/instrument/test/__snapshots__/extract-component.test.ts.snap b/core/instrument/test/__snapshots__/extract-component.test.ts.snap index 15a0e1b52..a6141bae5 100644 --- a/core/instrument/test/__snapshots__/extract-component.test.ts.snap +++ b/core/instrument/test/__snapshots__/extract-component.test.ts.snap @@ -21,16 +21,7 @@ Object { "issues": "https://github.com/ccontrols/component-controls/issues", }, "request": "/Users/atanasster/component-controls/core/instrument/test/examples/components/button-default-class-export.js", - "source": "import React from 'react'; - -class Button extends React.Component { - render() { - return ; - } -} - -export default Button; -", + "source": undefined, } `; @@ -55,12 +46,7 @@ Object { "issues": "https://github.com/ccontrols/component-controls/issues", }, "request": "/Users/atanasster/component-controls/core/instrument/test/examples/components/button-default-arrow-func.js", - "source": "import React from 'react'; - -const Button = props => ; - -export default Button; -", + "source": undefined, } `; @@ -103,14 +89,7 @@ Object { "issues": "https://github.com/ccontrols/component-controls/issues", }, "request": "/Users/atanasster/component-controls/core/instrument/test/examples/components/button-named-class.js", - "source": "import React from 'react'; - -export class Button extends React.Component { - render() { - return ; - } -} -", + "source": undefined, } `; @@ -135,33 +114,7 @@ Object { "issues": "https://github.com/system-ui/theme-ui/issues", }, "request": "/Users/atanasster/component-controls/node_modules/@theme-ui/components/src/Button.js", - "source": "import React from 'react' -import Box from './Box' - -export const Button = React.forwardRef((props, ref) => ( - -)) -", + "source": undefined, } `; @@ -172,11 +125,11 @@ Object { "loc": Object { "end": Object { "column": 1, - "line": 103, + "line": 105, }, "start": Object { "column": 23, - "line": 90, + "line": 92, }, }, "name": "Button", @@ -186,691 +139,7 @@ Object { "issues": "https://github.com/ccontrols/component-controls/issues", }, "request": "/Users/atanasster/component-controls/node_modules/@component-controls/components/dist/index.js", - "source": "'use strict'; - -Object.defineProperty(exports, '__esModule', { value: true }); - -function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; } - -var styled = _interopDefault(require('@emotion/styled')); -var polished = require('polished'); -var themeUi = require('theme-ui'); -var React = _interopDefault(require('react')); -var Octicon = require('@primer/octicons-react'); -var Octicon__default = _interopDefault(Octicon); -var tslib = require('tslib'); -var AnimateHeight = _interopDefault(require('react-animate-height')); -var MarkdownToJSX = _interopDefault(require('markdown-to-jsx')); -var Highlight = require('prism-react-renderer'); -var Highlight__default = _interopDefault(Highlight); -var duotoneDark = _interopDefault(require('prism-react-renderer/themes/duotoneDark')); -var duotoneLight = _interopDefault(require('prism-react-renderer/themes/duotoneLight')); -var TooltipTrigger = _interopDefault(require('react-popper-tooltip')); -var copy = _interopDefault(require('copy-to-clipboard')); -var css = require('@theme-ui/css'); -var reactTable = require('react-table'); -var reactTabs = require('react-tabs'); -var presets = require('@theme-ui/presets'); - -const StyledContainer = styled.div\` - position: relative; -\`; -const StyledFlex = styled.div\` - display: flex; - position: absolute; - flex-direction: row-reverse; - width: 100%; -\`; - -const ActionColors = ({ - theme, - disabled -}) => { - var _a, _b, _c, _d; - - return { - backgroundColor: polished.transparentize(0.15, (_a = theme.colors) === null || _a === void 0 ? void 0 : _a['highlight']), - color: disabled ? '#ddd' : 'background', - cursor: disabled ? 'not-allowed' : undefined, - px: 2, - py: 1, - lineHeight: 1, - borderRadius: 1, - display: 'inline-block', - boxShadow: \`\${polished.transparentize(0.9, (_b = theme.colors) === null || _b === void 0 ? void 0 : _b.text)} 0 1px 3px 1px, \${polished.transparentize(0.35, (_c = theme.colors) === null || _c === void 0 ? void 0 : _c.text)} 0 0 0 1px\`, - border: \`1px solid \${(_d = theme.colors) === null || _d === void 0 ? void 0 : _d['highlight']}\` - }; -}; - -const ActionBar = ({ - actionItems -}) => { - const { - theme - } = themeUi.useThemeUI(); - return themeUi.jsx(StyledContainer, null, themeUi.jsx(StyledFlex, null, actionItems.filter(({ - hidden - }) => !hidden).map(({ - title, - onClick, - disabled - }, index) => themeUi.jsx(themeUi.Box, { - key: \`\${typeof title === 'string' ? title : 'item'}_\${index}\`, - sx: { - mt: 2, - mr: 2, - fontSize: 1, - a: ActionColors({ - theme, - disabled - }), - button: ActionColors({ - theme, - disabled - }) - } - }, typeof title === 'string' ? themeUi.jsx(themeUi.Button, { - onClick: onClick, - disabled: disabled - }, title) : title)))); -}; - -const Subtitle = _a => { - var { - children - } = _a, - rest = tslib.__rest(_a, [\\"children\\"]); - - return React.createElement(themeUi.Heading, Object.assign({ - as: \\"h3\\", - color: \\"fadedText\\", - css: { - fontWeight: 400 - } - }, rest), children); -}; - -const Collapsible = _a => { - var { - children, - isOpen - } = _a, - rest = tslib.__rest(_a, [\\"children\\", \\"isOpen\\"]); - - return React.createElement(AnimateHeight, Object.assign({}, rest, { - height: isOpen ? 'auto' : 0 - }), children); -}; - -/** @jsx jsx */ -const BlockContainer = ({ - children, - title, - actions -}) => { - var _a, _b; - - const [isOpen, setIsOpen] = React.useState(true); - const { - theme - } = themeUi.useThemeUI(); - const id = title ? title.toLowerCase().replace(/\\\\s/g, '-') : undefined; //workaround for storybook iframe url - - const url = (window.location != window.parent.location ? document.referrer : document.location.href) || ''; - return themeUi.jsx(themeUi.Box, { - sx: { - position: 'relative', - mt: 3, - mb: 4 - }, - id: id - }, themeUi.jsx(themeUi.Flex, { - sx: { - flexDirection: 'row', - alignItems: 'center', - pb: 2, - ':hover': { - a: { - visibility: 'visible' - } - } - } - }, id && themeUi.jsx(themeUi.Link, { - sx: { - position: 'absolute', - left: -4, - px: 2, - visibility: 'hidden', - ':hover': { - visibility: 'visible' - } - }, - href: \`\${url.split('#')[0]}#\${id}\` - }, themeUi.jsx(Octicon__default, { - icon: Octicon.Link - })), title && themeUi.jsx(themeUi.Link, { - \\"aria-label\\": isOpen ? 'Collapse this block' : 'Expand this block', - css: { - cursor: 'pointer' - }, - onClick: () => setIsOpen(!isOpen) - }, themeUi.jsx(themeUi.Flex, { - sx: { - flexDirection: 'row', - alignItems: 'center' - } - }, themeUi.jsx(Subtitle, { - css: { - paddingRight: 10 - } - }, title), themeUi.jsx(Octicon__default, { - icon: isOpen ? Octicon.ChevronDown : Octicon.ChevronRight - })))), themeUi.jsx(Collapsible, { - isOpen: isOpen - }, actions && themeUi.jsx(ActionBar, { - actionItems: actions - }), themeUi.jsx(themeUi.Box, { - sx: { - borderRadius: 4, - boxShadow: \`\${polished.transparentize(0.9, (_a = theme.colors) === null || _a === void 0 ? void 0 : _a.text)} 0 1px 3px 1px, \${polished.transparentize(0.9, (_b = theme.colors) === null || _b === void 0 ? void 0 : _b.text)} 0 0 0 1px\` - } - }, children)), !isOpen && themeUi.jsx(themeUi.Divider, null)); -}; - -const ExternalLink = props => React.createElement(themeUi.Link, Object.assign({}, props, { - target: \\"_blank\\", - rel: \\"noopener noreferrer\\" -})); - -const FlexContainer = ({ - align = 'center', - children -}) => React.createElement(themeUi.Flex, { - css: { - alignItems: align, - justifyContent: align, - flexDirection: 'column', - flexBasis: '100%' - } -}, children); - -/** @jsx jsx */ -/** - * Syntax highlighter component - */ - -const SyntaxHighlighter = ({ - children = '', - language = 'jsx', - theme: customTheme, - renderFn, - dark = false, - style: propStyle, - as = 'span' -}) => { - if (typeof children !== 'string') { - console.error('Invalid children roperty passed to Source: must be a string'); - } - - const theme = customTheme ? customTheme : dark ? duotoneDark : duotoneLight; - const renderProps = typeof renderFn === 'function' ? props => renderFn(props, { - theme - }) : ({ - className, - style, - tokens, - getLineProps, - getTokenProps - }) => themeUi.jsx(themeUi.Styled.pre, { - className: \`\${className}\`, - style: Object.assign(Object.assign(Object.assign({}, style), { - padding: '3px 5px', - display: 'inline', - margin: 0 - }), propStyle) - }, tokens.map((line, i) => themeUi.jsx(themeUi.Box, Object.assign({ - as: as - }, getLineProps({ - line, - key: i - })), line.map((token, key) => themeUi.jsx(\\"span\\", Object.assign({}, getTokenProps({ - token, - key - }), { - sx: { - display: 'inline-block' - } - })))))); - const props = Object.assign(Object.assign({}, Highlight.defaultProps), { - theme - }); - return themeUi.jsx(Highlight__default, Object.assign({}, props, { - code: children, - language: language - }), renderProps); -}; - -/* eslint-disable react/display-name */ -const defaultComponents = { - code: SyntaxHighlighter -}; -/** - * MDX display component that works at run time - * uses \`markdown-to-jsx\` to compile MDX - */ - -const Markdown = ({ - children, - components -}) => React.createElement(MarkdownToJSX, { - options: { - forceBlock: true, - overrides: Object.assign(Object.assign({}, defaultComponents), components) - } -}, children); - -const SPACING = 8; - -const match = (requested, actual, value, fallback = 0) => actual.split('-')[0] === requested ? value : fallback; - -const Wrapper = styled.div(({ - placement, - borderColor, - hidden -}) => ({ - display: hidden ? 'none' : 'inline-block', - background: 'white', - marginTop: \`\${match('bottom', placement, SPACING + 2, 0)}px\`, - marginLeft: \`\${match('right', placement, SPACING + 2, 0)}px\`, - marginRight: \`\${match('left', placement, SPACING + 2, 0)}px\`, - filter: \` - drop-shadow(0px 5px 5px rgba(0,0,0,0.05)) - drop-shadow(0 1px 3px rgba(0,0,0,0.1)) -\`, - borderRadius: 8, - fontSize: 12, - border: \`1px solid \${borderColor}\` -})); -const Arrow = styled.div(({ - placement, - borderColor -}) => ({ - position: 'absolute', - borderStyle: 'solid', - background: 'white', - marginBottom: \`\${match('top', placement, '0', SPACING)}px\`, - marginTop: \`\${match('bottom', placement, '0', SPACING)}px\`, - marginRight: \`\${match('left', placement, '0', SPACING)}px\`, - marginLeft: \`\${match('right', placement, '0', SPACING)}px\`, - bottom: \`\${match('top', placement, SPACING * -1, 'auto')}px\`, - top: \`\${match('bottom', placement, SPACING * -1, 'auto')}px\`, - right: \`\${match('left', placement, SPACING * -1, 'auto')}px\`, - left: \`\${match('right', placement, SPACING * -1, 'auto')}px\`, - borderBottomWidth: \`\${match('top', placement, '0', SPACING)}px\`, - borderTopWidth: \`\${match('bottom', placement, '0', SPACING)}px\`, - borderRightWidth: \`\${match('left', placement, '0', SPACING)}px\`, - borderLeftWidth: \`\${match('right', placement, '0', SPACING)}px\`, - borderTopColor: match('top', placement, borderColor, 'transparent'), - borderBottomColor: match('bottom', placement, borderColor, 'transparent'), - borderLeftColor: match('left', placement, borderColor, 'transparent'), - borderRightColor: match('right', placement, borderColor, 'transparent') -})); -/** - * A Popover container that is triggered by a click, or hover - * used to display enhanced information that could not fit into the main scren - * - */ - -const Popover = _a => { - var { - trigger, - placement = 'bottom', - modifiers, - tooltip, - children, - tooltipShown, - onVisibilityChange - } = _a, - props = tslib.__rest(_a, [\\"trigger\\", \\"placement\\", \\"modifiers\\", \\"tooltip\\", \\"children\\", \\"tooltipShown\\", \\"onVisibilityChange\\"]); - - const borderColor = 'lightgrey'; - return React.createElement(TooltipTrigger, { - placement: placement, - trigger: trigger, - modifiers: modifiers, - tooltipShown: tooltipShown, - onVisibilityChange: onVisibilityChange, - tooltip: tooltipProps => { - const { - getTooltipProps, - getArrowProps, - tooltipRef, - arrowRef - } = tooltipProps; - - const _a = getTooltipProps(), - { - hidden - } = _a, - containerProps = tslib.__rest(_a, [\\"hidden\\"]); - - return React.createElement(Wrapper, Object.assign({ - placement: placement, - borderColor: borderColor, - hidden: hidden, - ref: tooltipRef - }, containerProps), React.createElement(Arrow, Object.assign({ - placement: placement, - borderColor: borderColor, - ref: arrowRef - }, getArrowProps())), typeof tooltip === 'function' ? tooltip(tooltipProps) : tooltip); - } - }, ({ - getTriggerProps, - triggerRef - }) => React.createElement(themeUi.Box, Object.assign({ - ref: triggerRef - }, getTriggerProps(), props, { - css: { - display: 'inline-block' - } - }), children)); -}; - -/** - * Source component used to display source code - * - */ - -const Source = _a => { - var { - children = '', - actions, - title, - as = 'div' - } = _a, - props = tslib.__rest(_a, [\\"children\\", \\"actions\\", \\"title\\", \\"as\\"]); - - const [copied, setCopied] = React.useState(false); - - const onCopy = e => { - e.preventDefault(); - setCopied(true); - copy(children); - window.setTimeout(() => setCopied(false), 1500); - }; - - const actionsItems = [{ - title: copied ? 'copied' : 'copy', - onClick: onCopy - }, ...(Array.isArray(actions) ? [...actions] : [])]; - return themeUi.jsx(BlockContainer, { - actions: actionsItems, - title: title - }, themeUi.jsx(SyntaxHighlighter, Object.assign({ - as: as - }, props, { - style: { - padding: '16px 10px 10px', - display: 'block' - } - }), children)); -}; - -const Table = _a => { - var { - columns, - data = [], - showHeader = true - } = _a, - rest = tslib.__rest(_a, [\\"columns\\", \\"data\\", \\"showHeader\\"]); - - const { - getTableProps, - getTableBodyProps, - headerGroups, - rows, - prepareRow - } = reactTable.useTable({ - columns, - data - }); - const { - theme - } = themeUi.useThemeUI(); - return React.createElement(themeUi.Box, Object.assign({ - as: \\"table\\" - }, getTableProps(), { - css: css.get(theme, 'styles.table') - }, rest), showHeader && React.createElement(themeUi.Box, { - as: \\"thead\\", - css: css.get(theme, 'styles.thead') - }, headerGroups.map(headerGroup => React.createElement(themeUi.Box, Object.assign({ - as: \\"tr\\" - }, headerGroup.getHeaderGroupProps(), { - css: css.get(theme, 'styles.tr') - }), headerGroup.headers.map(column => React.createElement(themeUi.Box, Object.assign({ - as: \\"th\\" - }, column.getHeaderProps(), { - css: css.get(theme, 'styles.th') - }), column.render('Header')))))), React.createElement(themeUi.Box, Object.assign({ - as: \\"tbody\\" - }, getTableBodyProps(), { - css: css.get(theme, 'styles.tbody') - }), rows.map(row => { - prepareRow(row); - return React.createElement(themeUi.Box, Object.assign({ - as: \\"tr\\" - }, row.getRowProps(), { - css: css.get(theme, 'styles.tr') - }), row.cells.map(cell => { - return React.createElement(themeUi.Box, Object.assign({ - as: \\"td\\" - }, cell.getCellProps(), { - css: css.get(theme, 'styles.td') - }), cell.render('Cell')); - })); - }))); -}; - -const TabsContainer = styled.div\` - \${({ - theme -}) => { - var _a, _b, _c; - - return \` - .react-tabs { - -webkit-tap-highlight-color: transparent; - } - .react-tabs__tab-list { - margin: 0 0 10px; - padding: 0; - } - .react-tabs__tab { - font-size: 13px; - font-weight: bold; - display: inline-block; - border-bottom: none; - bottom: -1px; - position: relative; - list-style: none; - padding: 4px 15px; - cursor: pointer; - color: \${(_a = theme === null || theme === void 0 ? void 0 : theme.colors) === null || _a === void 0 ? void 0 : _a.fadedText}; - } - .react-tabs__tab--selected { - border-bottom: 3px solid \${(_b = theme === null || theme === void 0 ? void 0 : theme.colors) === null || _b === void 0 ? void 0 : _b.accent}; - color: \${(_c = theme === null || theme === void 0 ? void 0 : theme.colors) === null || _c === void 0 ? void 0 : _c.accent}; - } - .react-tabs__tab--disabled { - color: GrayText; - cursor: default; - } - .react-tabs__tab:focus { - box-shadow: 0 0 5px hsl(208, 99%, 50%); - border-color: hsl(208, 99%, 50%); - outline: none; - } - .react-tabs__tab:focus:after { - content: \\"\\"; - position: absolute; - height: 5px; - left: -4px; - right: -4px; - bottom: -5px; - background: #fff; - } - .react-tabs__tab-panel { - display: none; - } - .react-tabs__tab-panel.react-tabs__tab-panel--selected { - display: block; - } - \`; -}} -\`; - -const Tabs = props => React.createElement(TabsContainer, null, React.createElement(reactTabs.Tabs, Object.assign({}, props))); - -const ThemeContext = React.createContext({}); -const ThemeProvider = ({ - children, - dark -}) => { - const theme = Object.assign(Object.assign({}, presets.polaris), { - styles: Object.assign(Object.assign({}, presets.polaris.styles), { - table: { - margin: 0, - borderCollapse: 'collapse', - fontSize: '14px', - lineHeight: '20px', - textAlign: 'left', - width: '100%', - borderSpacing: '0px' - }, - th: { - border: 'none', - padding: '10px 0 10px 20px' - }, - thead: { - borderBottom: '1px solid rgba(0, 0, 0, 0.8)' - }, - td: { - padding: '16px 20px', - borderBottom: '1px solid rgba(0, 0, 0, 0.1)' - }, - tr: { - borderBottom: 'none' - } - }), - buttons: { - primary: { - color: '#333', - bg: '#f3f3f3', - borderRadius: 5, - boxShadow: 'rgba(0, 0, 0, 0.1) 0px 0px 0px 1px inset' - }, - secondary: { - bg: 'highlight' - } - }, - colors: Object.assign(Object.assign({}, presets.polaris.colors), { - highlight: '#339793', - accent: '#1EA7FD', - fadedText: polished.lighten(0.25, presets.polaris.colors.text), - lightenPrimary: '#F6F9FC' - }) - }); - return React.createElement(ThemeContext.Provider, { - value: { - theme, - dark - } - }, React.createElement(themeUi.ThemeProvider, { - theme: theme - }, children)); -}; - -const StyledHeading = styled(themeUi.Heading)(() => ({ - fontWeight: 900, - paddingBottom: '25px' -})); -const Title = _a => { - var { - children - } = _a, - rest = tslib.__rest(_a, [\\"children\\"]); - - return React.createElement(StyledHeading, Object.assign({ - as: \\"h1\\" - }, rest), children); -}; - -const Toggle = _a => { - var { - checked = false, - onChange, - labels = { - true: 'True', - false: 'False' - } - } = _a, - rest = tslib.__rest(_a, [\\"checked\\", \\"onChange\\", \\"labels\\"]); - - return themeUi.jsx(themeUi.Box, Object.assign({}, rest), themeUi.jsx(themeUi.Label, { - sx: { - display: 'flex', - flexDirection: 'row', - alignItems: 'center' - } - }, themeUi.jsx(themeUi.Text, { - sx: { - paddingRight: 1 - } - }, checked ? labels.true : labels.false), themeUi.jsx(themeUi.Checkbox, { - checked: checked, - onClick: () => onChange && onChange(!checked) - }))); -}; -Toggle.displayName = 'Toggle'; - -Object.defineProperty(exports, 'Tab', { - enumerable: true, - get: function () { - return reactTabs.Tab; - } -}); -Object.defineProperty(exports, 'TabList', { - enumerable: true, - get: function () { - return reactTabs.TabList; - } -}); -Object.defineProperty(exports, 'TabPanel', { - enumerable: true, - get: function () { - return reactTabs.TabPanel; - } -}); -exports.ActionBar = ActionBar; -exports.Arrow = Arrow; -exports.BlockContainer = BlockContainer; -exports.Collapsible = Collapsible; -exports.ExternalLink = ExternalLink; -exports.FlexContainer = FlexContainer; -exports.Markdown = Markdown; -exports.Popover = Popover; -exports.Source = Source; -exports.Subtitle = Subtitle; -exports.Table = Table; -exports.Tabs = Tabs; -exports.ThemeContext = ThemeContext; -exports.ThemeProvider = ThemeProvider; -exports.Title = Title; -exports.Toggle = Toggle; -exports.Wrapper = Wrapper; -", + "source": undefined, } `; @@ -907,10 +176,7 @@ Object { "issues": "https://github.com/ccontrols/component-controls/issues", }, "request": "/Users/atanasster/component-controls/core/instrument/test/examples/components/button-named-arrow-func.js", - "source": "import React from 'react'; - -export const Button = props => ; -", + "source": undefined, } `; @@ -935,13 +201,6 @@ Object { "issues": "https://github.com/ccontrols/component-controls/issues", }, "request": "/Users/atanasster/component-controls/core/instrument/test/examples/components/button-named-class.js", - "source": "import React from 'react'; - -export class Button extends React.Component { - render() { - return ; - } -} -", + "source": undefined, } `; diff --git a/core/instrument/test/__snapshots__/extract-props-info.test.ts.snap b/core/instrument/test/__snapshots__/extract-props-info.test.ts.snap index 2953e2950..56653a124 100644 --- a/core/instrument/test/__snapshots__/extract-props-info.test.ts.snap +++ b/core/instrument/test/__snapshots__/extract-props-info.test.ts.snap @@ -14,29 +14,2735 @@ Object { "displayName": "PropsTable", "methods": Array [], "props": Object { - "actions": Object { - "description": "additional actions provided to the component", - "parentName": "BlockContainerProps", + "about": Object { + "parentName": "HTMLAttributes", + "type": Object { + "name": "string", + }, + }, + "accessKey": Object { + "parentName": "HTMLAttributes", + "type": Object { + "name": "string", + }, + }, + "aria-activedescendant": Object { + "description": "Identifies the currently active element when DOM focus is on a composite widget, textbox, group, or application.", + "parentName": "AriaAttributes", + "type": Object { + "name": "string", + }, + }, + "aria-atomic": Object { + "description": "Indicates whether assistive technologies will present all, or only parts of, the changed region based on the change notifications defined by the aria-relevant attribute.", + "parentName": "AriaAttributes", + "type": Object { + "name": "Booleanish", + }, + }, + "aria-autocomplete": Object { + "description": "Indicates whether inputting text could trigger display of one or more predictions of the user's intended value for an input and specifies how predictions would be +presented if they are made.", + "parentName": "AriaAttributes", + "type": Object { + "name": "enum", + "raw": "\\"none\\" | \\"both\\" | \\"inline\\" | \\"list\\"", + "value": Array [ + Object { + "name": "string", + "value": "none", + }, + Object { + "name": "string", + "value": "both", + }, + Object { + "name": "string", + "value": "inline", + }, + Object { + "name": "string", + "value": "list", + }, + ], + }, + }, + "aria-busy": Object { + "description": "Indicates an element is being modified and that assistive technologies MAY want to wait until the modifications are complete before exposing them to the user.", + "parentName": "AriaAttributes", + "type": Object { + "name": "Booleanish", + }, + }, + "aria-checked": Object { + "description": "Indicates the current \\"checked\\" state of checkboxes, radio buttons, and other widgets. +@see aria-pressed +@see aria-selected.", + "parentName": "AriaAttributes", + "type": Object { + "name": "union", + "raw": "boolean | \\"mixed\\" | \\"true\\" | \\"false\\"", + "value": Array [ + Object { + "name": "boolean", + }, + Object { + "name": "mixed", + }, + Object { + "name": "true", + }, + Object { + "name": "false", + }, + ], + }, + }, + "aria-colcount": Object { + "description": "Defines the total number of columns in a table, grid, or treegrid. +@see aria-colindex.", + "parentName": "AriaAttributes", + "type": Object { + "name": "number", + }, + }, + "aria-colindex": Object { + "description": "Defines an element's column index or position with respect to the total number of columns within a table, grid, or treegrid. +@see aria-colcount +@see aria-colspan.", + "parentName": "AriaAttributes", + "type": Object { + "name": "number", + }, + }, + "aria-colspan": Object { + "description": "Defines the number of columns spanned by a cell or gridcell within a table, grid, or treegrid. +@see aria-colindex +@see aria-rowspan.", + "parentName": "AriaAttributes", + "type": Object { + "name": "number", + }, + }, + "aria-controls": Object { + "description": "Identifies the element (or elements) whose contents or presence are controlled by the current element. +@see aria-owns.", + "parentName": "AriaAttributes", + "type": Object { + "name": "string", + }, + }, + "aria-current": Object { + "description": "Indicates the element that represents the current item within a container or set of related elements.", + "parentName": "AriaAttributes", + "type": Object { + "name": "union", + "raw": "boolean | \\"time\\" | \\"page\\" | \\"true\\" | \\"false\\" | \\"step\\" | \\"location\\" | \\"date\\"", + "value": Array [ + Object { + "name": "boolean", + }, + Object { + "name": "time", + }, + Object { + "name": "page", + }, + Object { + "name": "true", + }, + Object { + "name": "false", + }, + Object { + "name": "step", + }, + Object { + "name": "location", + }, + Object { + "name": "date", + }, + ], + }, + }, + "aria-describedby": Object { + "description": "Identifies the element (or elements) that describes the object. +@see aria-labelledby", + "parentName": "AriaAttributes", + "type": Object { + "name": "string", + }, + }, + "aria-details": Object { + "description": "Identifies the element that provides a detailed, extended description for the object. +@see aria-describedby.", + "parentName": "AriaAttributes", + "type": Object { + "name": "string", + }, + }, + "aria-disabled": Object { + "description": "Indicates that the element is perceivable but disabled, so it is not editable or otherwise operable. +@see aria-hidden +@see aria-readonly.", + "parentName": "AriaAttributes", + "type": Object { + "name": "Booleanish", + }, + }, + "aria-dropeffect": Object { + "description": "Indicates what functions can be performed when a dragged object is released on the drop target. +@deprecated in ARIA 1.1", + "parentName": "AriaAttributes", + "type": Object { + "name": "enum", + "raw": "\\"link\\" | \\"none\\" | \\"copy\\" | \\"move\\" | \\"execute\\" | \\"popup\\"", + "value": Array [ + Object { + "name": "string", + "value": "link", + }, + Object { + "name": "string", + "value": "none", + }, + Object { + "name": "string", + "value": "copy", + }, + Object { + "name": "string", + "value": "move", + }, + Object { + "name": "string", + "value": "execute", + }, + Object { + "name": "string", + "value": "popup", + }, + ], + }, + }, + "aria-errormessage": Object { + "description": "Identifies the element that provides an error message for the object. +@see aria-invalid +@see aria-describedby.", + "parentName": "AriaAttributes", + "type": Object { + "name": "string", + }, + }, + "aria-expanded": Object { + "description": "Indicates whether the element, or another grouping element it controls, is currently expanded or collapsed.", + "parentName": "AriaAttributes", + "type": Object { + "name": "Booleanish", + }, + }, + "aria-flowto": Object { + "description": "Identifies the next element (or elements) in an alternate reading order of content which, at the user's discretion, +allows assistive technology to override the general default of reading in document source order.", + "parentName": "AriaAttributes", + "type": Object { + "name": "string", + }, + }, + "aria-grabbed": Object { + "description": "Indicates an element's \\"grabbed\\" state in a drag-and-drop operation. +@deprecated in ARIA 1.1", + "parentName": "AriaAttributes", + "type": Object { + "name": "Booleanish", + }, + }, + "aria-haspopup": Object { + "description": "Indicates the availability and type of interactive popup element, such as menu or dialog, that can be triggered by an element.", + "parentName": "AriaAttributes", + "type": Object { + "name": "union", + "raw": "boolean | \\"dialog\\" | \\"menu\\" | \\"grid\\" | \\"listbox\\" | \\"true\\" | \\"false\\" | \\"tree\\"", + "value": Array [ + Object { + "name": "boolean", + }, + Object { + "name": "dialog", + }, + Object { + "name": "menu", + }, + Object { + "name": "grid", + }, + Object { + "name": "listbox", + }, + Object { + "name": "true", + }, + Object { + "name": "false", + }, + Object { + "name": "tree", + }, + ], + }, + }, + "aria-hidden": Object { + "description": "Indicates whether the element is exposed to an accessibility API. +@see aria-disabled.", + "parentName": "AriaAttributes", + "type": Object { + "name": "Booleanish", + }, + }, + "aria-invalid": Object { + "description": "Indicates the entered value does not conform to the format expected by the application. +@see aria-errormessage.", + "parentName": "AriaAttributes", + "type": Object { + "name": "union", + "raw": "boolean | \\"true\\" | \\"false\\" | \\"grammar\\" | \\"spelling\\"", + "value": Array [ + Object { + "name": "boolean", + }, + Object { + "name": "true", + }, + Object { + "name": "false", + }, + Object { + "name": "grammar", + }, + Object { + "name": "spelling", + }, + ], + }, + }, + "aria-keyshortcuts": Object { + "description": "Indicates keyboard shortcuts that an author has implemented to activate or give focus to an element.", + "parentName": "AriaAttributes", + "type": Object { + "name": "string", + }, + }, + "aria-label": Object { + "description": "Defines a string value that labels the current element. +@see aria-labelledby.", + "parentName": "AriaAttributes", + "type": Object { + "name": "string", + }, + }, + "aria-labelledby": Object { + "description": "Identifies the element (or elements) that labels the current element. +@see aria-describedby.", + "parentName": "AriaAttributes", + "type": Object { + "name": "string", + }, + }, + "aria-level": Object { + "description": "Defines the hierarchical level of an element within a structure.", + "parentName": "AriaAttributes", + "type": Object { + "name": "number", + }, + }, + "aria-live": Object { + "description": "Indicates that an element will be updated, and describes the types of updates the user agents, assistive technologies, and user can expect from the live region.", + "parentName": "AriaAttributes", + "type": Object { + "name": "enum", + "raw": "\\"off\\" | \\"assertive\\" | \\"polite\\"", + "value": Array [ + Object { + "name": "string", + "value": "off", + }, + Object { + "name": "string", + "value": "assertive", + }, + Object { + "name": "string", + "value": "polite", + }, + ], + }, + }, + "aria-modal": Object { + "description": "Indicates whether an element is modal when displayed.", + "parentName": "AriaAttributes", + "type": Object { + "name": "Booleanish", + }, + }, + "aria-multiline": Object { + "description": "Indicates whether a text box accepts multiple lines of input or only a single line.", + "parentName": "AriaAttributes", + "type": Object { + "name": "Booleanish", + }, + }, + "aria-multiselectable": Object { + "description": "Indicates that the user may select more than one item from the current selectable descendants.", + "parentName": "AriaAttributes", + "type": Object { + "name": "Booleanish", + }, + }, + "aria-orientation": Object { + "description": "Indicates whether the element's orientation is horizontal, vertical, or unknown/ambiguous.", + "parentName": "AriaAttributes", + "type": Object { + "name": "enum", + "raw": "\\"horizontal\\" | \\"vertical\\"", + "value": Array [ + Object { + "name": "string", + "value": "horizontal", + }, + Object { + "name": "string", + "value": "vertical", + }, + ], + }, + }, + "aria-owns": Object { + "description": "Identifies an element (or elements) in order to define a visual, functional, or contextual parent/child relationship +between DOM elements where the DOM hierarchy cannot be used to represent the relationship. +@see aria-controls.", + "parentName": "AriaAttributes", + "type": Object { + "name": "string", + }, + }, + "aria-placeholder": Object { + "description": "Defines a short hint (a word or short phrase) intended to aid the user with data entry when the control has no value. +A hint could be a sample value or a brief description of the expected format.", + "parentName": "AriaAttributes", + "type": Object { + "name": "string", + }, + }, + "aria-posinset": Object { + "description": "Defines an element's number or position in the current set of listitems or treeitems. Not required if all elements in the set are present in the DOM. +@see aria-setsize.", + "parentName": "AriaAttributes", + "type": Object { + "name": "number", + }, + }, + "aria-pressed": Object { + "description": "Indicates the current \\"pressed\\" state of toggle buttons. +@see aria-checked +@see aria-selected.", + "parentName": "AriaAttributes", + "type": Object { + "name": "union", + "raw": "boolean | \\"mixed\\" | \\"true\\" | \\"false\\"", + "value": Array [ + Object { + "name": "boolean", + }, + Object { + "name": "mixed", + }, + Object { + "name": "true", + }, + Object { + "name": "false", + }, + ], + }, + }, + "aria-readonly": Object { + "description": "Indicates that the element is not editable, but is otherwise operable. +@see aria-disabled.", + "parentName": "AriaAttributes", + "type": Object { + "name": "Booleanish", + }, + }, + "aria-relevant": Object { + "description": "Indicates what notifications the user agent will trigger when the accessibility tree within a live region is modified. +@see aria-atomic.", + "parentName": "AriaAttributes", + "type": Object { + "name": "enum", + "raw": "\\"text\\" | \\"all\\" | \\"additions\\" | \\"additions text\\" | \\"removals\\"", + "value": Array [ + Object { + "name": "string", + "value": "text", + }, + Object { + "name": "string", + "value": "all", + }, + Object { + "name": "string", + "value": "additions", + }, + Object { + "name": "string", + "value": "additions text", + }, + Object { + "name": "string", + "value": "removals", + }, + ], + }, + }, + "aria-required": Object { + "description": "Indicates that user input is required on the element before a form may be submitted.", + "parentName": "AriaAttributes", + "type": Object { + "name": "Booleanish", + }, + }, + "aria-roledescription": Object { + "description": "Defines a human-readable, author-localized description for the role of an element.", + "parentName": "AriaAttributes", + "type": Object { + "name": "string", + }, + }, + "aria-rowcount": Object { + "description": "Defines the total number of rows in a table, grid, or treegrid. +@see aria-rowindex.", + "parentName": "AriaAttributes", + "type": Object { + "name": "number", + }, + }, + "aria-rowindex": Object { + "description": "Defines an element's row index or position with respect to the total number of rows within a table, grid, or treegrid. +@see aria-rowcount +@see aria-rowspan.", + "parentName": "AriaAttributes", + "type": Object { + "name": "number", + }, + }, + "aria-rowspan": Object { + "description": "Defines the number of rows spanned by a cell or gridcell within a table, grid, or treegrid. +@see aria-rowindex +@see aria-colspan.", + "parentName": "AriaAttributes", + "type": Object { + "name": "number", + }, + }, + "aria-selected": Object { + "description": "Indicates the current \\"selected\\" state of various widgets. +@see aria-checked +@see aria-pressed.", + "parentName": "AriaAttributes", + "type": Object { + "name": "Booleanish", + }, + }, + "aria-setsize": Object { + "description": "Defines the number of items in the current set of listitems or treeitems. Not required if all elements in the set are present in the DOM. +@see aria-posinset.", + "parentName": "AriaAttributes", + "type": Object { + "name": "number", + }, + }, + "aria-sort": Object { + "description": "Indicates if items in a table or grid are sorted in ascending or descending order.", + "parentName": "AriaAttributes", + "type": Object { + "name": "enum", + "raw": "\\"none\\" | \\"ascending\\" | \\"descending\\" | \\"other\\"", + "value": Array [ + Object { + "name": "string", + "value": "none", + }, + Object { + "name": "string", + "value": "ascending", + }, + Object { + "name": "string", + "value": "descending", + }, + Object { + "name": "string", + "value": "other", + }, + ], + }, + }, + "aria-valuemax": Object { + "description": "Defines the maximum allowed value for a range widget.", + "parentName": "AriaAttributes", + "type": Object { + "name": "number", + }, + }, + "aria-valuemin": Object { + "description": "Defines the minimum allowed value for a range widget.", + "parentName": "AriaAttributes", + "type": Object { + "name": "number", + }, + }, + "aria-valuenow": Object { + "description": "Defines the current value for a range widget. +@see aria-valuetext.", + "parentName": "AriaAttributes", + "type": Object { + "name": "number", + }, + }, + "aria-valuetext": Object { + "description": "Defines the human readable text alternative of aria-valuenow for a range widget.", + "parentName": "AriaAttributes", + "type": Object { + "name": "string", + }, + }, + "as": Object { + "parentName": "BoxOwnProps", + "type": Object { + "name": "ElementType", + }, + }, + "autoCapitalize": Object { + "parentName": "HTMLAttributes", + "type": Object { + "name": "string", + }, + }, + "autoCorrect": Object { + "parentName": "HTMLAttributes", + "type": Object { + "name": "string", + }, + }, + "autoSave": Object { + "parentName": "HTMLAttributes", + "type": Object { + "name": "string", + }, + }, + "backgroundColor": Object { + "parentName": "BackgroundColorProps", + "type": Object { + "name": "union", + "raw": "ResponsiveValue>>", + "value": Array [ + Object { + "name": "ResponsiveValue>>", + }, + ], + }, + }, + "bg": Object { + "description": "The color utility parses a component's \`color\` and \`bg\` props and converts them into CSS declarations. +By default the raw value of the prop is returned. + +Color palettes can be configured with the ThemeProvider to use keys as prop values, with support for dot notation. +Array values are converted into responsive values. + +[MDN Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/background-color)", + "parentName": "BackgroundColorProps", + "type": Object { + "name": "union", + "raw": "ResponsiveValue>>", + "value": Array [ + Object { + "name": "ResponsiveValue>>", + }, + ], + }, + }, + "className": Object { + "parentName": "HTMLAttributes", + "type": Object { + "name": "string", + }, + }, + "color": Object { + "description": "The color utility parses a component's \`color\` and \`bg\` props and converts them into CSS declarations. +By default the raw value of the prop is returned. + +Color palettes can be configured with the ThemeProvider to use keys as prop values, with support for dot notation. +Array values are converted into responsive values. + +[MDN reference](https://developer.mozilla.org/en-US/docs/Web/CSS/color)", + "parentName": "HTMLAttributes", + "type": Object { + "name": "string", + }, + }, + "contentEditable": Object { + "parentName": "HTMLAttributes", + "type": Object { + "name": "union", + "raw": "boolean | \\"inherit\\" | \\"true\\" | \\"false\\"", + "value": Array [ + Object { + "name": "boolean", + }, + Object { + "name": "inherit", + }, + Object { + "name": "true", + }, + Object { + "name": "false", + }, + ], + }, + }, + "contextMenu": Object { + "parentName": "HTMLAttributes", + "type": Object { + "name": "string", + }, + }, + "css": Object { + "parentName": "DOMAttributes", + "type": Object { + "name": "InterpolationWithTheme", + }, + }, + "dangerouslySetInnerHTML": Object { + "parentName": "DOMAttributes", + "type": Object { + "name": "object", + "raw": "{ __html: string; }", + }, + }, + "datatype": Object { + "parentName": "HTMLAttributes", + "type": Object { + "name": "string", + }, + }, + "defaultChecked": Object { + "parentName": "HTMLAttributes", + "type": Object { + "name": "boolean", + }, + }, + "defaultValue": Object { + "parentName": "HTMLAttributes", "type": Object { "name": "array", - "raw": "ActionItem[]", + "raw": "string | number | string[]", + "value": Array [ + Object { + "name": "string | number | string", + }, + ], + }, + }, + "dir": Object { + "parentName": "HTMLAttributes", + "type": Object { + "name": "string", + }, + }, + "draggable": Object { + "parentName": "HTMLAttributes", + "type": Object { + "name": "Booleanish", + }, + }, + "filtering": Object { + "parentName": "TableOwnProps", + "type": Object { + "name": "boolean", + }, + }, + "header": Object { + "parentName": "TableOwnProps", + "type": Object { + "name": "boolean", + }, + }, + "hidden": Object { + "parentName": "HTMLAttributes", + "type": Object { + "name": "boolean", + }, + }, + "id": Object { + "parentName": "HTMLAttributes", + "type": Object { + "name": "string", + }, + }, + "inlist": Object { + "parentName": "HTMLAttributes", + "type": Object { + "name": "any", + }, + }, + "inputMode": Object { + "description": "Hints at the type of data that might be entered by the user while editing the element or its contents +@see https://html.spec.whatwg.org/multipage/interaction.html#input-modalities:-the-inputmode-attribute", + "parentName": "HTMLAttributes", + "type": Object { + "name": "enum", + "raw": "\\"text\\" | \\"none\\" | \\"tel\\" | \\"url\\" | \\"email\\" | \\"numeric\\" | \\"decimal\\" | \\"search\\"", + "value": Array [ + Object { + "name": "string", + "value": "text", + }, + Object { + "name": "string", + "value": "none", + }, + Object { + "name": "string", + "value": "tel", + }, + Object { + "name": "string", + "value": "url", + }, + Object { + "name": "string", + "value": "email", + }, + Object { + "name": "string", + "value": "numeric", + }, + Object { + "name": "string", + "value": "decimal", + }, + Object { + "name": "string", + "value": "search", + }, + ], + }, + }, + "is": Object { + "description": "Specify that a standard HTML element should behave like a defined custom built-in element +@see https://html.spec.whatwg.org/multipage/custom-elements.html#attr-is", + "parentName": "HTMLAttributes", + "type": Object { + "name": "string", + }, + }, + "itemID": Object { + "parentName": "HTMLAttributes", + "type": Object { + "name": "string", + }, + }, + "itemProp": Object { + "parentName": "HTMLAttributes", + "type": Object { + "name": "string", + }, + }, + "itemRef": Object { + "parentName": "HTMLAttributes", + "type": Object { + "name": "string", + }, + }, + "itemScope": Object { + "parentName": "HTMLAttributes", + "type": Object { + "name": "boolean", + }, + }, + "itemType": Object { + "parentName": "HTMLAttributes", + "type": Object { + "name": "string", + }, + }, + "itemsLabel": Object { + "parentName": "TableOwnProps", + "type": Object { + "name": "string", + }, + }, + "key": Object { + "parentName": "Attributes", + "type": Object { + "name": "TLengthStyledSystem", + }, + }, + "lang": Object { + "parentName": "HTMLAttributes", + "type": Object { + "name": "string", + }, + }, + "m": Object { + "description": "Margin on top, left, bottom and right", + "parentName": "SpaceProps", + "type": Object { + "name": "union", + "raw": "ResponsiveValue>>", + "value": Array [ + Object { + "name": "ResponsiveValue>>", + }, + ], + }, + }, + "margin": Object { + "description": "Margin on top, left, bottom and right", + "parentName": "SpaceProps", + "type": Object { + "name": "union", + "raw": "ResponsiveValue>>", + "value": Array [ + Object { + "name": "ResponsiveValue>>", + }, + ], + }, + }, + "marginBottom": Object { + "description": "Margin on bottom", + "parentName": "SpaceProps", + "type": Object { + "name": "union", + "raw": "ResponsiveValue>>", + "value": Array [ + Object { + "name": "ResponsiveValue>>", + }, + ], + }, + }, + "marginLeft": Object { + "description": "Margin on left", + "parentName": "SpaceProps", + "type": Object { + "name": "union", + "raw": "ResponsiveValue>>", + "value": Array [ + Object { + "name": "ResponsiveValue>>", + }, + ], + }, + }, + "marginRight": Object { + "description": "Margin on right", + "parentName": "SpaceProps", + "type": Object { + "name": "union", + "raw": "ResponsiveValue>>", + "value": Array [ + Object { + "name": "ResponsiveValue>>", + }, + ], + }, + }, + "marginTop": Object { + "description": "Margin on top", + "parentName": "SpaceProps", + "type": Object { + "name": "union", + "raw": "ResponsiveValue>>", + "value": Array [ + Object { + "name": "ResponsiveValue>>", + }, + ], + }, + }, + "marginX": Object { + "description": "Margin on left and right", + "parentName": "SpaceProps", + "type": Object { + "name": "union", + "raw": "ResponsiveValue>>", + "value": Array [ + Object { + "name": "ResponsiveValue>>", + }, + ], + }, + }, + "marginY": Object { + "description": "Margin on top and bottom", + "parentName": "SpaceProps", + "type": Object { + "name": "union", + "raw": "ResponsiveValue>>", + "value": Array [ + Object { + "name": "ResponsiveValue>>", + }, + ], + }, + }, + "mb": Object { + "description": "Margin on bottom", + "parentName": "SpaceProps", + "type": Object { + "name": "union", + "raw": "ResponsiveValue>>", + "value": Array [ + Object { + "name": "ResponsiveValue>>", + }, + ], + }, + }, + "ml": Object { + "description": "Margin on left", + "parentName": "SpaceProps", + "type": Object { + "name": "union", + "raw": "ResponsiveValue>>", + "value": Array [ + Object { + "name": "ResponsiveValue>>", + }, + ], + }, + }, + "mr": Object { + "description": "Margin on right", + "parentName": "SpaceProps", + "type": Object { + "name": "union", + "raw": "ResponsiveValue>>", + "value": Array [ + Object { + "name": "ResponsiveValue>>", + }, + ], + }, + }, + "mt": Object { + "description": "Margin on top", + "parentName": "SpaceProps", + "type": Object { + "name": "union", + "raw": "ResponsiveValue>>", + "value": Array [ + Object { + "name": "ResponsiveValue>>", + }, + ], + }, + }, + "mx": Object { + "description": "Margin on left and right", + "parentName": "SpaceProps", + "type": Object { + "name": "union", + "raw": "ResponsiveValue>>", + "value": Array [ + Object { + "name": "ResponsiveValue>>", + }, + ], + }, + }, + "my": Object { + "description": "Margin on top and bottom", + "parentName": "SpaceProps", + "type": Object { + "name": "union", + "raw": "ResponsiveValue>>", + "value": Array [ + Object { + "name": "ResponsiveValue>>", + }, + ], + }, + }, + "of": Object { + "description": "component", + "parentName": "ComponentInputProps", + "type": Object { + "name": "any", + }, + }, + "onAbort": Object { + "parentName": "DOMAttributes", + "type": Object { + "name": "function", + "raw": "(event: SyntheticEvent) => void", + }, + }, + "onAbortCapture": Object { + "parentName": "DOMAttributes", + "type": Object { + "name": "function", + "raw": "(event: SyntheticEvent) => void", + }, + }, + "onAnimationEnd": Object { + "parentName": "DOMAttributes", + "type": Object { + "name": "function", + "raw": "(event: AnimationEvent) => void", + }, + }, + "onAnimationEndCapture": Object { + "parentName": "DOMAttributes", + "type": Object { + "name": "function", + "raw": "(event: AnimationEvent) => void", + }, + }, + "onAnimationIteration": Object { + "parentName": "DOMAttributes", + "type": Object { + "name": "function", + "raw": "(event: AnimationEvent) => void", + }, + }, + "onAnimationIterationCapture": Object { + "parentName": "DOMAttributes", + "type": Object { + "name": "function", + "raw": "(event: AnimationEvent) => void", + }, + }, + "onAnimationStart": Object { + "parentName": "DOMAttributes", + "type": Object { + "name": "function", + "raw": "(event: AnimationEvent) => void", + }, + }, + "onAnimationStartCapture": Object { + "parentName": "DOMAttributes", + "type": Object { + "name": "function", + "raw": "(event: AnimationEvent) => void", + }, + }, + "onAuxClick": Object { + "parentName": "DOMAttributes", + "type": Object { + "name": "function", + "raw": "(event: MouseEvent) => void", + }, + }, + "onAuxClickCapture": Object { + "parentName": "DOMAttributes", + "type": Object { + "name": "function", + "raw": "(event: MouseEvent) => void", + }, + }, + "onBeforeInput": Object { + "parentName": "DOMAttributes", + "type": Object { + "name": "function", + "raw": "(event: FormEvent) => void", + }, + }, + "onBeforeInputCapture": Object { + "parentName": "DOMAttributes", + "type": Object { + "name": "function", + "raw": "(event: FormEvent) => void", + }, + }, + "onBlur": Object { + "parentName": "DOMAttributes", + "type": Object { + "name": "function", + "raw": "(event: FocusEvent) => void", + }, + }, + "onBlurCapture": Object { + "parentName": "DOMAttributes", + "type": Object { + "name": "function", + "raw": "(event: FocusEvent) => void", + }, + }, + "onCanPlay": Object { + "parentName": "DOMAttributes", + "type": Object { + "name": "function", + "raw": "(event: SyntheticEvent) => void", + }, + }, + "onCanPlayCapture": Object { + "parentName": "DOMAttributes", + "type": Object { + "name": "function", + "raw": "(event: SyntheticEvent) => void", + }, + }, + "onCanPlayThrough": Object { + "parentName": "DOMAttributes", + "type": Object { + "name": "function", + "raw": "(event: SyntheticEvent) => void", + }, + }, + "onCanPlayThroughCapture": Object { + "parentName": "DOMAttributes", + "type": Object { + "name": "function", + "raw": "(event: SyntheticEvent) => void", + }, + }, + "onChange": Object { + "parentName": "DOMAttributes", + "type": Object { + "name": "function", + "raw": "(event: FormEvent) => void", + }, + }, + "onChangeCapture": Object { + "parentName": "DOMAttributes", + "type": Object { + "name": "function", + "raw": "(event: FormEvent) => void", + }, + }, + "onClick": Object { + "parentName": "DOMAttributes", + "type": Object { + "name": "function", + "raw": "(event: MouseEvent) => void", + }, + }, + "onClickCapture": Object { + "parentName": "DOMAttributes", + "type": Object { + "name": "function", + "raw": "(event: MouseEvent) => void", + }, + }, + "onCompositionEnd": Object { + "parentName": "DOMAttributes", + "type": Object { + "name": "function", + "raw": "(event: CompositionEvent) => void", + }, + }, + "onCompositionEndCapture": Object { + "parentName": "DOMAttributes", + "type": Object { + "name": "function", + "raw": "(event: CompositionEvent) => void", + }, + }, + "onCompositionStart": Object { + "parentName": "DOMAttributes", + "type": Object { + "name": "function", + "raw": "(event: CompositionEvent) => void", + }, + }, + "onCompositionStartCapture": Object { + "parentName": "DOMAttributes", + "type": Object { + "name": "function", + "raw": "(event: CompositionEvent) => void", + }, + }, + "onCompositionUpdate": Object { + "parentName": "DOMAttributes", + "type": Object { + "name": "function", + "raw": "(event: CompositionEvent) => void", + }, + }, + "onCompositionUpdateCapture": Object { + "parentName": "DOMAttributes", + "type": Object { + "name": "function", + "raw": "(event: CompositionEvent) => void", + }, + }, + "onContextMenu": Object { + "parentName": "DOMAttributes", + "type": Object { + "name": "function", + "raw": "(event: MouseEvent) => void", + }, + }, + "onContextMenuCapture": Object { + "parentName": "DOMAttributes", + "type": Object { + "name": "function", + "raw": "(event: MouseEvent) => void", + }, + }, + "onCopy": Object { + "parentName": "DOMAttributes", + "type": Object { + "name": "function", + "raw": "(event: ClipboardEvent) => void", + }, + }, + "onCopyCapture": Object { + "parentName": "DOMAttributes", + "type": Object { + "name": "function", + "raw": "(event: ClipboardEvent) => void", + }, + }, + "onCut": Object { + "parentName": "DOMAttributes", + "type": Object { + "name": "function", + "raw": "(event: ClipboardEvent) => void", + }, + }, + "onCutCapture": Object { + "parentName": "DOMAttributes", + "type": Object { + "name": "function", + "raw": "(event: ClipboardEvent) => void", + }, + }, + "onDoubleClick": Object { + "parentName": "DOMAttributes", + "type": Object { + "name": "function", + "raw": "(event: MouseEvent) => void", + }, + }, + "onDoubleClickCapture": Object { + "parentName": "DOMAttributes", + "type": Object { + "name": "function", + "raw": "(event: MouseEvent) => void", + }, + }, + "onDrag": Object { + "parentName": "DOMAttributes", + "type": Object { + "name": "function", + "raw": "(event: DragEvent) => void", + }, + }, + "onDragCapture": Object { + "parentName": "DOMAttributes", + "type": Object { + "name": "function", + "raw": "(event: DragEvent) => void", + }, + }, + "onDragEnd": Object { + "parentName": "DOMAttributes", + "type": Object { + "name": "function", + "raw": "(event: DragEvent) => void", + }, + }, + "onDragEndCapture": Object { + "parentName": "DOMAttributes", + "type": Object { + "name": "function", + "raw": "(event: DragEvent) => void", + }, + }, + "onDragEnter": Object { + "parentName": "DOMAttributes", + "type": Object { + "name": "function", + "raw": "(event: DragEvent) => void", + }, + }, + "onDragEnterCapture": Object { + "parentName": "DOMAttributes", + "type": Object { + "name": "function", + "raw": "(event: DragEvent) => void", + }, + }, + "onDragExit": Object { + "parentName": "DOMAttributes", + "type": Object { + "name": "function", + "raw": "(event: DragEvent) => void", + }, + }, + "onDragExitCapture": Object { + "parentName": "DOMAttributes", + "type": Object { + "name": "function", + "raw": "(event: DragEvent) => void", + }, + }, + "onDragLeave": Object { + "parentName": "DOMAttributes", + "type": Object { + "name": "function", + "raw": "(event: DragEvent) => void", + }, + }, + "onDragLeaveCapture": Object { + "parentName": "DOMAttributes", + "type": Object { + "name": "function", + "raw": "(event: DragEvent) => void", + }, + }, + "onDragOver": Object { + "parentName": "DOMAttributes", + "type": Object { + "name": "function", + "raw": "(event: DragEvent) => void", + }, + }, + "onDragOverCapture": Object { + "parentName": "DOMAttributes", + "type": Object { + "name": "function", + "raw": "(event: DragEvent) => void", + }, + }, + "onDragStart": Object { + "parentName": "DOMAttributes", + "type": Object { + "name": "function", + "raw": "(event: DragEvent) => void", + }, + }, + "onDragStartCapture": Object { + "parentName": "DOMAttributes", + "type": Object { + "name": "function", + "raw": "(event: DragEvent) => void", + }, + }, + "onDrop": Object { + "parentName": "DOMAttributes", + "type": Object { + "name": "function", + "raw": "(event: DragEvent) => void", + }, + }, + "onDropCapture": Object { + "parentName": "DOMAttributes", + "type": Object { + "name": "function", + "raw": "(event: DragEvent) => void", + }, + }, + "onDurationChange": Object { + "parentName": "DOMAttributes", + "type": Object { + "name": "function", + "raw": "(event: SyntheticEvent) => void", + }, + }, + "onDurationChangeCapture": Object { + "parentName": "DOMAttributes", + "type": Object { + "name": "function", + "raw": "(event: SyntheticEvent) => void", + }, + }, + "onEmptied": Object { + "parentName": "DOMAttributes", + "type": Object { + "name": "function", + "raw": "(event: SyntheticEvent) => void", + }, + }, + "onEmptiedCapture": Object { + "parentName": "DOMAttributes", + "type": Object { + "name": "function", + "raw": "(event: SyntheticEvent) => void", + }, + }, + "onEncrypted": Object { + "parentName": "DOMAttributes", + "type": Object { + "name": "function", + "raw": "(event: SyntheticEvent) => void", + }, + }, + "onEncryptedCapture": Object { + "parentName": "DOMAttributes", + "type": Object { + "name": "function", + "raw": "(event: SyntheticEvent) => void", + }, + }, + "onEnded": Object { + "parentName": "DOMAttributes", + "type": Object { + "name": "function", + "raw": "(event: SyntheticEvent) => void", + }, + }, + "onEndedCapture": Object { + "parentName": "DOMAttributes", + "type": Object { + "name": "function", + "raw": "(event: SyntheticEvent) => void", + }, + }, + "onError": Object { + "parentName": "DOMAttributes", + "type": Object { + "name": "function", + "raw": "(event: SyntheticEvent) => void", + }, + }, + "onErrorCapture": Object { + "parentName": "DOMAttributes", + "type": Object { + "name": "function", + "raw": "(event: SyntheticEvent) => void", + }, + }, + "onFocus": Object { + "parentName": "DOMAttributes", + "type": Object { + "name": "function", + "raw": "(event: FocusEvent) => void", + }, + }, + "onFocusCapture": Object { + "parentName": "DOMAttributes", + "type": Object { + "name": "function", + "raw": "(event: FocusEvent) => void", + }, + }, + "onGotPointerCapture": Object { + "parentName": "DOMAttributes", + "type": Object { + "name": "function", + "raw": "(event: PointerEvent) => void", + }, + }, + "onGotPointerCaptureCapture": Object { + "parentName": "DOMAttributes", + "type": Object { + "name": "function", + "raw": "(event: PointerEvent) => void", + }, + }, + "onInput": Object { + "parentName": "DOMAttributes", + "type": Object { + "name": "function", + "raw": "(event: FormEvent) => void", + }, + }, + "onInputCapture": Object { + "parentName": "DOMAttributes", + "type": Object { + "name": "function", + "raw": "(event: FormEvent) => void", + }, + }, + "onInvalid": Object { + "parentName": "DOMAttributes", + "type": Object { + "name": "function", + "raw": "(event: FormEvent) => void", + }, + }, + "onInvalidCapture": Object { + "parentName": "DOMAttributes", + "type": Object { + "name": "function", + "raw": "(event: FormEvent) => void", + }, + }, + "onKeyDown": Object { + "parentName": "DOMAttributes", + "type": Object { + "name": "function", + "raw": "(event: KeyboardEvent) => void", + }, + }, + "onKeyDownCapture": Object { + "parentName": "DOMAttributes", + "type": Object { + "name": "function", + "raw": "(event: KeyboardEvent) => void", + }, + }, + "onKeyPress": Object { + "parentName": "DOMAttributes", + "type": Object { + "name": "function", + "raw": "(event: KeyboardEvent) => void", + }, + }, + "onKeyPressCapture": Object { + "parentName": "DOMAttributes", + "type": Object { + "name": "function", + "raw": "(event: KeyboardEvent) => void", + }, + }, + "onKeyUp": Object { + "parentName": "DOMAttributes", + "type": Object { + "name": "function", + "raw": "(event: KeyboardEvent) => void", + }, + }, + "onKeyUpCapture": Object { + "parentName": "DOMAttributes", + "type": Object { + "name": "function", + "raw": "(event: KeyboardEvent) => void", + }, + }, + "onLoad": Object { + "parentName": "DOMAttributes", + "type": Object { + "name": "function", + "raw": "(event: SyntheticEvent) => void", + }, + }, + "onLoadCapture": Object { + "parentName": "DOMAttributes", + "type": Object { + "name": "function", + "raw": "(event: SyntheticEvent) => void", + }, + }, + "onLoadStart": Object { + "parentName": "DOMAttributes", + "type": Object { + "name": "function", + "raw": "(event: SyntheticEvent) => void", + }, + }, + "onLoadStartCapture": Object { + "parentName": "DOMAttributes", + "type": Object { + "name": "function", + "raw": "(event: SyntheticEvent) => void", + }, + }, + "onLoadedData": Object { + "parentName": "DOMAttributes", + "type": Object { + "name": "function", + "raw": "(event: SyntheticEvent) => void", + }, + }, + "onLoadedDataCapture": Object { + "parentName": "DOMAttributes", + "type": Object { + "name": "function", + "raw": "(event: SyntheticEvent) => void", + }, + }, + "onLoadedMetadata": Object { + "parentName": "DOMAttributes", + "type": Object { + "name": "function", + "raw": "(event: SyntheticEvent) => void", + }, + }, + "onLoadedMetadataCapture": Object { + "parentName": "DOMAttributes", + "type": Object { + "name": "function", + "raw": "(event: SyntheticEvent) => void", + }, + }, + "onLostPointerCapture": Object { + "parentName": "DOMAttributes", + "type": Object { + "name": "function", + "raw": "(event: PointerEvent) => void", + }, + }, + "onLostPointerCaptureCapture": Object { + "parentName": "DOMAttributes", + "type": Object { + "name": "function", + "raw": "(event: PointerEvent) => void", + }, + }, + "onMouseDown": Object { + "parentName": "DOMAttributes", + "type": Object { + "name": "function", + "raw": "(event: MouseEvent) => void", + }, + }, + "onMouseDownCapture": Object { + "parentName": "DOMAttributes", + "type": Object { + "name": "function", + "raw": "(event: MouseEvent) => void", + }, + }, + "onMouseEnter": Object { + "parentName": "DOMAttributes", + "type": Object { + "name": "function", + "raw": "(event: MouseEvent) => void", + }, + }, + "onMouseLeave": Object { + "parentName": "DOMAttributes", + "type": Object { + "name": "function", + "raw": "(event: MouseEvent) => void", + }, + }, + "onMouseMove": Object { + "parentName": "DOMAttributes", + "type": Object { + "name": "function", + "raw": "(event: MouseEvent) => void", + }, + }, + "onMouseMoveCapture": Object { + "parentName": "DOMAttributes", + "type": Object { + "name": "function", + "raw": "(event: MouseEvent) => void", + }, + }, + "onMouseOut": Object { + "parentName": "DOMAttributes", + "type": Object { + "name": "function", + "raw": "(event: MouseEvent) => void", + }, + }, + "onMouseOutCapture": Object { + "parentName": "DOMAttributes", + "type": Object { + "name": "function", + "raw": "(event: MouseEvent) => void", + }, + }, + "onMouseOver": Object { + "parentName": "DOMAttributes", + "type": Object { + "name": "function", + "raw": "(event: MouseEvent) => void", + }, + }, + "onMouseOverCapture": Object { + "parentName": "DOMAttributes", + "type": Object { + "name": "function", + "raw": "(event: MouseEvent) => void", + }, + }, + "onMouseUp": Object { + "parentName": "DOMAttributes", + "type": Object { + "name": "function", + "raw": "(event: MouseEvent) => void", + }, + }, + "onMouseUpCapture": Object { + "parentName": "DOMAttributes", + "type": Object { + "name": "function", + "raw": "(event: MouseEvent) => void", + }, + }, + "onPaste": Object { + "parentName": "DOMAttributes", + "type": Object { + "name": "function", + "raw": "(event: ClipboardEvent) => void", + }, + }, + "onPasteCapture": Object { + "parentName": "DOMAttributes", + "type": Object { + "name": "function", + "raw": "(event: ClipboardEvent) => void", + }, + }, + "onPause": Object { + "parentName": "DOMAttributes", + "type": Object { + "name": "function", + "raw": "(event: SyntheticEvent) => void", + }, + }, + "onPauseCapture": Object { + "parentName": "DOMAttributes", + "type": Object { + "name": "function", + "raw": "(event: SyntheticEvent) => void", + }, + }, + "onPlay": Object { + "parentName": "DOMAttributes", + "type": Object { + "name": "function", + "raw": "(event: SyntheticEvent) => void", + }, + }, + "onPlayCapture": Object { + "parentName": "DOMAttributes", + "type": Object { + "name": "function", + "raw": "(event: SyntheticEvent) => void", + }, + }, + "onPlaying": Object { + "parentName": "DOMAttributes", + "type": Object { + "name": "function", + "raw": "(event: SyntheticEvent) => void", + }, + }, + "onPlayingCapture": Object { + "parentName": "DOMAttributes", + "type": Object { + "name": "function", + "raw": "(event: SyntheticEvent) => void", + }, + }, + "onPointerCancel": Object { + "parentName": "DOMAttributes", + "type": Object { + "name": "function", + "raw": "(event: PointerEvent) => void", + }, + }, + "onPointerCancelCapture": Object { + "parentName": "DOMAttributes", + "type": Object { + "name": "function", + "raw": "(event: PointerEvent) => void", + }, + }, + "onPointerDown": Object { + "parentName": "DOMAttributes", + "type": Object { + "name": "function", + "raw": "(event: PointerEvent) => void", + }, + }, + "onPointerDownCapture": Object { + "parentName": "DOMAttributes", + "type": Object { + "name": "function", + "raw": "(event: PointerEvent) => void", + }, + }, + "onPointerEnter": Object { + "parentName": "DOMAttributes", + "type": Object { + "name": "function", + "raw": "(event: PointerEvent) => void", + }, + }, + "onPointerEnterCapture": Object { + "parentName": "DOMAttributes", + "type": Object { + "name": "function", + "raw": "(event: PointerEvent) => void", + }, + }, + "onPointerLeave": Object { + "parentName": "DOMAttributes", + "type": Object { + "name": "function", + "raw": "(event: PointerEvent) => void", + }, + }, + "onPointerLeaveCapture": Object { + "parentName": "DOMAttributes", + "type": Object { + "name": "function", + "raw": "(event: PointerEvent) => void", + }, + }, + "onPointerMove": Object { + "parentName": "DOMAttributes", + "type": Object { + "name": "function", + "raw": "(event: PointerEvent) => void", + }, + }, + "onPointerMoveCapture": Object { + "parentName": "DOMAttributes", + "type": Object { + "name": "function", + "raw": "(event: PointerEvent) => void", + }, + }, + "onPointerOut": Object { + "parentName": "DOMAttributes", + "type": Object { + "name": "function", + "raw": "(event: PointerEvent) => void", + }, + }, + "onPointerOutCapture": Object { + "parentName": "DOMAttributes", + "type": Object { + "name": "function", + "raw": "(event: PointerEvent) => void", + }, + }, + "onPointerOver": Object { + "parentName": "DOMAttributes", + "type": Object { + "name": "function", + "raw": "(event: PointerEvent) => void", + }, + }, + "onPointerOverCapture": Object { + "parentName": "DOMAttributes", + "type": Object { + "name": "function", + "raw": "(event: PointerEvent) => void", + }, + }, + "onPointerUp": Object { + "parentName": "DOMAttributes", + "type": Object { + "name": "function", + "raw": "(event: PointerEvent) => void", + }, + }, + "onPointerUpCapture": Object { + "parentName": "DOMAttributes", + "type": Object { + "name": "function", + "raw": "(event: PointerEvent) => void", + }, + }, + "onProgress": Object { + "parentName": "DOMAttributes", + "type": Object { + "name": "function", + "raw": "(event: SyntheticEvent) => void", + }, + }, + "onProgressCapture": Object { + "parentName": "DOMAttributes", + "type": Object { + "name": "function", + "raw": "(event: SyntheticEvent) => void", + }, + }, + "onRateChange": Object { + "parentName": "DOMAttributes", + "type": Object { + "name": "function", + "raw": "(event: SyntheticEvent) => void", + }, + }, + "onRateChangeCapture": Object { + "parentName": "DOMAttributes", + "type": Object { + "name": "function", + "raw": "(event: SyntheticEvent) => void", + }, + }, + "onReset": Object { + "parentName": "DOMAttributes", + "type": Object { + "name": "function", + "raw": "(event: FormEvent) => void", + }, + }, + "onResetCapture": Object { + "parentName": "DOMAttributes", + "type": Object { + "name": "function", + "raw": "(event: FormEvent) => void", + }, + }, + "onScroll": Object { + "parentName": "DOMAttributes", + "type": Object { + "name": "function", + "raw": "(event: UIEvent) => void", + }, + }, + "onScrollCapture": Object { + "parentName": "DOMAttributes", + "type": Object { + "name": "function", + "raw": "(event: UIEvent) => void", + }, + }, + "onSeeked": Object { + "parentName": "DOMAttributes", + "type": Object { + "name": "function", + "raw": "(event: SyntheticEvent) => void", + }, + }, + "onSeekedCapture": Object { + "parentName": "DOMAttributes", + "type": Object { + "name": "function", + "raw": "(event: SyntheticEvent) => void", + }, + }, + "onSeeking": Object { + "parentName": "DOMAttributes", + "type": Object { + "name": "function", + "raw": "(event: SyntheticEvent) => void", + }, + }, + "onSeekingCapture": Object { + "parentName": "DOMAttributes", + "type": Object { + "name": "function", + "raw": "(event: SyntheticEvent) => void", + }, + }, + "onSelect": Object { + "parentName": "DOMAttributes", + "type": Object { + "name": "function", + "raw": "(event: SyntheticEvent) => void", + }, + }, + "onSelectCapture": Object { + "parentName": "DOMAttributes", + "type": Object { + "name": "function", + "raw": "(event: SyntheticEvent) => void", + }, + }, + "onStalled": Object { + "parentName": "DOMAttributes", + "type": Object { + "name": "function", + "raw": "(event: SyntheticEvent) => void", + }, + }, + "onStalledCapture": Object { + "parentName": "DOMAttributes", + "type": Object { + "name": "function", + "raw": "(event: SyntheticEvent) => void", + }, + }, + "onSubmit": Object { + "parentName": "DOMAttributes", + "type": Object { + "name": "function", + "raw": "(event: FormEvent) => void", + }, + }, + "onSubmitCapture": Object { + "parentName": "DOMAttributes", + "type": Object { + "name": "function", + "raw": "(event: FormEvent) => void", + }, + }, + "onSuspend": Object { + "parentName": "DOMAttributes", + "type": Object { + "name": "function", + "raw": "(event: SyntheticEvent) => void", + }, + }, + "onSuspendCapture": Object { + "parentName": "DOMAttributes", + "type": Object { + "name": "function", + "raw": "(event: SyntheticEvent) => void", + }, + }, + "onTimeUpdate": Object { + "parentName": "DOMAttributes", + "type": Object { + "name": "function", + "raw": "(event: SyntheticEvent) => void", + }, + }, + "onTimeUpdateCapture": Object { + "parentName": "DOMAttributes", + "type": Object { + "name": "function", + "raw": "(event: SyntheticEvent) => void", + }, + }, + "onTouchCancel": Object { + "parentName": "DOMAttributes", + "type": Object { + "name": "function", + "raw": "(event: TouchEvent) => void", + }, + }, + "onTouchCancelCapture": Object { + "parentName": "DOMAttributes", + "type": Object { + "name": "function", + "raw": "(event: TouchEvent) => void", + }, + }, + "onTouchEnd": Object { + "parentName": "DOMAttributes", + "type": Object { + "name": "function", + "raw": "(event: TouchEvent) => void", + }, + }, + "onTouchEndCapture": Object { + "parentName": "DOMAttributes", + "type": Object { + "name": "function", + "raw": "(event: TouchEvent) => void", + }, + }, + "onTouchMove": Object { + "parentName": "DOMAttributes", + "type": Object { + "name": "function", + "raw": "(event: TouchEvent) => void", + }, + }, + "onTouchMoveCapture": Object { + "parentName": "DOMAttributes", + "type": Object { + "name": "function", + "raw": "(event: TouchEvent) => void", + }, + }, + "onTouchStart": Object { + "parentName": "DOMAttributes", + "type": Object { + "name": "function", + "raw": "(event: TouchEvent) => void", + }, + }, + "onTouchStartCapture": Object { + "parentName": "DOMAttributes", + "type": Object { + "name": "function", + "raw": "(event: TouchEvent) => void", + }, + }, + "onTransitionEnd": Object { + "parentName": "DOMAttributes", + "type": Object { + "name": "function", + "raw": "(event: TransitionEvent) => void", + }, + }, + "onTransitionEndCapture": Object { + "parentName": "DOMAttributes", + "type": Object { + "name": "function", + "raw": "(event: TransitionEvent) => void", + }, + }, + "onVolumeChange": Object { + "parentName": "DOMAttributes", + "type": Object { + "name": "function", + "raw": "(event: SyntheticEvent) => void", + }, + }, + "onVolumeChangeCapture": Object { + "parentName": "DOMAttributes", + "type": Object { + "name": "function", + "raw": "(event: SyntheticEvent) => void", + }, + }, + "onWaiting": Object { + "parentName": "DOMAttributes", + "type": Object { + "name": "function", + "raw": "(event: SyntheticEvent) => void", + }, + }, + "onWaitingCapture": Object { + "parentName": "DOMAttributes", + "type": Object { + "name": "function", + "raw": "(event: SyntheticEvent) => void", + }, + }, + "onWheel": Object { + "parentName": "DOMAttributes", + "type": Object { + "name": "function", + "raw": "(event: WheelEvent) => void", + }, + }, + "onWheelCapture": Object { + "parentName": "DOMAttributes", + "type": Object { + "name": "function", + "raw": "(event: WheelEvent) => void", + }, + }, + "opacity": Object { + "description": "The opacity CSS property sets the transparency of an element or the degree to which content +behind an element is visible. + +[MDN reference](https://developer.mozilla.org/en-US/docs/Web/CSS/opacity)", + "parentName": "OpacityProps", + "type": Object { + "name": "ResponsiveValue>>", + }, + }, + "p": Object { + "description": "Padding on top, left, bottom and right", + "parentName": "SpaceProps", + "type": Object { + "name": "union", + "raw": "ResponsiveValue>>", "value": Array [ Object { - "name": "ActionItem", + "name": "ResponsiveValue>>", }, ], }, }, - "of": Object { - "description": "component", - "parentName": "ComponentInputProps", + "padding": Object { + "description": "Padding on top, left, bottom and right", + "parentName": "SpaceProps", "type": Object { - "name": "any", + "name": "union", + "raw": "ResponsiveValue>>", + "value": Array [ + Object { + "name": "ResponsiveValue>>", + }, + ], + }, + }, + "paddingBottom": Object { + "description": "Padding on bottom", + "parentName": "SpaceProps", + "type": Object { + "name": "union", + "raw": "ResponsiveValue>>", + "value": Array [ + Object { + "name": "ResponsiveValue>>", + }, + ], + }, + }, + "paddingLeft": Object { + "description": "Padding on left", + "parentName": "SpaceProps", + "type": Object { + "name": "union", + "raw": "ResponsiveValue>>", + "value": Array [ + Object { + "name": "ResponsiveValue>>", + }, + ], + }, + }, + "paddingRight": Object { + "description": "Padding on right", + "parentName": "SpaceProps", + "type": Object { + "name": "union", + "raw": "ResponsiveValue>>", + "value": Array [ + Object { + "name": "ResponsiveValue>>", + }, + ], + }, + }, + "paddingTop": Object { + "description": "Padding on top", + "parentName": "SpaceProps", + "type": Object { + "name": "union", + "raw": "ResponsiveValue>>", + "value": Array [ + Object { + "name": "ResponsiveValue>>", + }, + ], + }, + }, + "paddingX": Object { + "description": "Padding on left and right", + "parentName": "SpaceProps", + "type": Object { + "name": "union", + "raw": "ResponsiveValue>>", + "value": Array [ + Object { + "name": "ResponsiveValue>>", + }, + ], + }, + }, + "paddingY": Object { + "description": "Padding on top and bottom", + "parentName": "SpaceProps", + "type": Object { + "name": "union", + "raw": "ResponsiveValue>>", + "value": Array [ + Object { + "name": "ResponsiveValue>>", + }, + ], + }, + }, + "pb": Object { + "description": "Padding on bottom", + "parentName": "SpaceProps", + "type": Object { + "name": "union", + "raw": "ResponsiveValue>>", + "value": Array [ + Object { + "name": "ResponsiveValue>>", + }, + ], + }, + }, + "pl": Object { + "description": "Padding on left", + "parentName": "SpaceProps", + "type": Object { + "name": "union", + "raw": "ResponsiveValue>>", + "value": Array [ + Object { + "name": "ResponsiveValue>>", + }, + ], + }, + }, + "placeholder": Object { + "parentName": "HTMLAttributes", + "type": Object { + "name": "string", + }, + }, + "pr": Object { + "description": "Padding on right", + "parentName": "SpaceProps", + "type": Object { + "name": "union", + "raw": "ResponsiveValue>>", + "value": Array [ + Object { + "name": "ResponsiveValue>>", + }, + ], + }, + }, + "prefix": Object { + "parentName": "HTMLAttributes", + "type": Object { + "name": "string", + }, + }, + "property": Object { + "parentName": "HTMLAttributes", + "type": Object { + "name": "string", + }, + }, + "pt": Object { + "description": "Padding on top", + "parentName": "SpaceProps", + "type": Object { + "name": "union", + "raw": "ResponsiveValue>>", + "value": Array [ + Object { + "name": "ResponsiveValue>>", + }, + ], + }, + }, + "px": Object { + "description": "Padding on left and right", + "parentName": "SpaceProps", + "type": Object { + "name": "union", + "raw": "ResponsiveValue>>", + "value": Array [ + Object { + "name": "ResponsiveValue>>", + }, + ], + }, + }, + "py": Object { + "description": "Padding on top and bottom", + "parentName": "SpaceProps", + "type": Object { + "name": "union", + "raw": "ResponsiveValue>>", + "value": Array [ + Object { + "name": "ResponsiveValue>>", + }, + ], + }, + }, + "radioGroup": Object { + "parentName": "HTMLAttributes", + "type": Object { + "name": "string", + }, + }, + "ref": Object { + "parentName": "ClassAttributes", + "type": Object { + "name": "LegacyRef", + }, + }, + "resource": Object { + "parentName": "HTMLAttributes", + "type": Object { + "name": "string", + }, + }, + "results": Object { + "parentName": "HTMLAttributes", + "type": Object { + "name": "number", + }, + }, + "role": Object { + "parentName": "HTMLAttributes", + "type": Object { + "name": "string", + }, + }, + "security": Object { + "parentName": "HTMLAttributes", + "type": Object { + "name": "string", + }, + }, + "slot": Object { + "parentName": "HTMLAttributes", + "type": Object { + "name": "string", + }, + }, + "sorting": Object { + "defaultValue": true, + "parentName": "TableOwnProps", + "type": Object { + "name": "boolean", + }, + }, + "spellCheck": Object { + "parentName": "HTMLAttributes", + "type": Object { + "name": "Booleanish", + }, + }, + "style": Object { + "parentName": "HTMLAttributes", + "type": Object { + "name": "CSSProperties", + }, + }, + "suppressContentEditableWarning": Object { + "parentName": "HTMLAttributes", + "type": Object { + "name": "boolean", + }, + }, + "suppressHydrationWarning": Object { + "parentName": "HTMLAttributes", + "type": Object { + "name": "boolean", + }, + }, + "sx": Object { + "description": "The sx prop lets you style elements inline, using values from your +theme. To use the sx prop, add the custom pragma as a comment to the +top of your module and import the jsx function. + +\`\`\`ts +// @jsx jsx + +import { jsx } from 'theme-ui' +\`\`\`", + "parentName": "SxProps", + "type": Object { + "name": "SystemStyleObject", + }, + }, + "tabIndex": Object { + "parentName": "HTMLAttributes", + "type": Object { + "name": "number", }, }, "title": Object { - "description": "optional section title for the block", - "parentName": "BlockContainerProps", + "parentName": "HTMLAttributes", + "type": Object { + "name": "string", + }, + }, + "translate": Object { + "parentName": "HTMLAttributes", + "type": Object { + "name": "enum", + "raw": "\\"yes\\" | \\"no\\"", + "value": Array [ + Object { + "name": "string", + "value": "yes", + }, + Object { + "name": "string", + "value": "no", + }, + ], + }, + }, + "typeof": Object { + "parentName": "HTMLAttributes", + "type": Object { + "name": "string", + }, + }, + "unselectable": Object { + "parentName": "HTMLAttributes", + "type": Object { + "name": "enum", + "raw": "\\"on\\" | \\"off\\"", + "value": Array [ + Object { + "name": "string", + "value": "on", + }, + Object { + "name": "string", + "value": "off", + }, + ], + }, + }, + "variant": Object { + "parentName": "BoxOwnProps", + "type": Object { + "name": "string", + }, + }, + "vocab": Object { + "parentName": "HTMLAttributes", "type": Object { "name": "string", }, diff --git a/core/instrument/test/__snapshots__/follow-imports-custom.test.ts.snap b/core/instrument/test/__snapshots__/follow-imports-custom.test.ts.snap index 158c0eba9..6785eca4c 100644 --- a/core/instrument/test/__snapshots__/follow-imports-custom.test.ts.snap +++ b/core/instrument/test/__snapshots__/follow-imports-custom.test.ts.snap @@ -17,29 +17,7 @@ Object { }, }, "originalFilePath": "/Users/atanasster/component-controls/ui/editors/src/BooleanEditor/BooleanEditor.tsx", - "source": "import React from 'react'; -import { ComponentControlBoolean } from '@component-controls/specification'; -import { Toggle, FlexContainer } from '@component-controls/components'; -import { PropertyControlProps, PropertyEditor } from '../types'; - -export interface BooleanEditorProps extends PropertyControlProps { - prop: ComponentControlBoolean; -} - -export const BooleanEditor: PropertyEditor = ({ - prop, - name, - onChange, -}) => ( - - onChange(name, checked)} - checked={prop.value} - /> - -); -", + "source": undefined, } `; @@ -60,45 +38,10 @@ Object { }, }, "originalFilePath": "/Users/atanasster/component-controls/ui/components/src/Markdown/Markdown.tsx", - "source": "/* eslint-disable react/display-name */ -import React, { FC } from 'react'; -import MarkdownToJSX, { MarkdownOptions } from 'markdown-to-jsx'; -import { SyntaxHighlighter } from '../SyntaxHighlighter'; - -export interface MarkdownProps { - /** - * the markdown code is passed as a children prop - */ - children: string; - /** - * components to customize the markdown display - */ - components?: MarkdownOptions['overrides']; -} - -const defaultComponents: MarkdownOptions['overrides'] = { - code: SyntaxHighlighter, -}; - -/** - * MDX display component that works at run time - * uses \`markdown-to-jsx\` to compile MDX - */ -export const Markdown: FC = ({ children, components }) => ( - - {children} - -); -", + "source": undefined, } `; - exports[`follow-imports-custom Title 1`] = ` Object { "exportedAs": "Title", @@ -116,29 +59,6 @@ Object { }, }, "originalFilePath": "/Users/atanasster/component-controls/ui/blocks/src/Title/Title.tsx", - "source": "import React, { FC } from 'react'; -import { - Title as TitleBlock, - TitleProps as TitlePropsBase, -} from '@component-controls/components'; -import { useControlsContext, StoryInputProps } from '../BlocksContext'; - -export type TitleProps = StoryInputProps & TitlePropsBase; - -export const Title: FC = ({ id, name, ...rest }) => { - const { component, kind } = useControlsContext({ - id, - name, - }); - let title; - if (component && component.info && component.info.displayName) { - title = component.info.displayName; - } else if (kind) { - const titleParts = kind.title.split('/'); - title = titleParts[titleParts.length - 1]; - } - return title ? {title} : null; -}; -", + "source": undefined, } `; diff --git a/core/instrument/test/__snapshots__/follow-imports.test.ts.snap b/core/instrument/test/__snapshots__/follow-imports.test.ts.snap index 5e9a6249d..0e9e8a80e 100644 --- a/core/instrument/test/__snapshots__/follow-imports.test.ts.snap +++ b/core/instrument/test/__snapshots__/follow-imports.test.ts.snap @@ -18,124 +18,7 @@ Object { }, }, "originalFilePath": "/Users/atanasster/component-controls/node_modules/@component-controls/storybook/dist/index.js", - "source": "'use strict'; - -Object.defineProperty(exports, '__esModule', { value: true }); - -function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; } - -var React = _interopDefault(require('react')); -var blocks = require('@component-controls/blocks'); -var blocks$1 = require('@storybook/addon-docs/blocks'); -require('polished'); -require('@storybook/theming'); -require('@component-controls/components'); -var ThemeProvider = require('./ThemeProvider.js'); -var tslib = require('tslib'); -var coreEvents = require('@storybook/core-events'); -var core = require('@component-controls/core'); -var shared = require('./shared.js'); - -const BlockContextProvider = ({ - children -}) => { - const context = React.useContext(blocks$1.DocsContext); - const { - id: currentId, - clientApi, - storyStore, - channel - } = context; - return React.createElement(blocks.BlockContext.Provider, { - value: { - api: clientApi, - currentId, - channel, - storyStore - } - }, children); -}; - -const ComponentSource = props => { - return React.createElement(ThemeProvider.ThemeProvider, null, React.createElement(blocks.ComponentSource, Object.assign({}, props))); -}; - -const ControlsTable = _a => { - var { - id: propId, - name - } = _a, - rest = tslib.__rest(_a, [\\"id\\", \\"name\\"]); - - const { - id, - controls, - api, - channel - } = blocks.useControlsContext({ - id: propId, - name - }); - const setControlValue = api && api.setControlValue ? api.setControlValue : (storyId, propName, propValue) => { - if (controls) { - const newValues = core.mergeControlValues(controls, propName, propValue); - Object.keys(controls).forEach(key => { - controls[key] = newValues[key]; - }); - channel.emit(coreEvents.FORCE_RE_RENDER); - channel.emit(shared.SET_DATA_MSG, { - storyId, - controls: newValues - }); - } - }; - const clickControl = api && api.clickControl ? api.clickControl : (storyId, propName) => { - if (controls && controls[propName]) { - const control = controls[propName]; - - if (control && typeof control.onClick === 'function') { - control.onClick(control); - } - } - }; - - if (!controls || controls.disable) { - return null; - } - - return id ? React.createElement(ThemeProvider.ThemeProvider, null, React.createElement(blocks.ControlsTable, Object.assign({ - controls: controls, - storyId: id, - setControlValue: setControlValue, - clickControl: clickControl - }, rest))) : null; -}; - -const Description = props => { - return React.createElement(ThemeProvider.ThemeProvider, null, React.createElement(blocks.Description, Object.assign({}, props))); -}; - -const StorySource = props => { - return React.createElement(ThemeProvider.ThemeProvider, null, React.createElement(blocks.StorySource, Object.assign({}, props))); -}; - -const Subtitle = props => { - return React.createElement(ThemeProvider.ThemeProvider, null, React.createElement(blocks.Subtitle, Object.assign({}, props))); -}; - -const Title = props => { - return React.createElement(ThemeProvider.ThemeProvider, null, React.createElement(blocks.Title, Object.assign({}, props))); -}; - -exports.ThemeProvider = ThemeProvider.ThemeProvider; -exports.BlockContextProvider = BlockContextProvider; -exports.ComponentSource = ComponentSource; -exports.ControlsTable = ControlsTable; -exports.Description = Description; -exports.StorySource = StorySource; -exports.Subtitle = Subtitle; -exports.Title = Title; -", + "source": undefined, } `; @@ -155,8 +38,7 @@ Object { }, }, "originalFilePath": "/Users/atanasster/component-controls/core/instrument/test/examples/follow-imports/button-named-export.js", - "source": "export const Button = () => {}; -", + "source": undefined, } `; @@ -177,9 +59,7 @@ Object { }, }, "originalFilePath": "/Users/atanasster/component-controls/core/instrument/test/examples/exports/cjs-named-export.js", - "source": "const Button = () => {}; -exports.Button = Button; -", + "source": undefined, } `; @@ -199,8 +79,7 @@ Object { }, }, "originalFilePath": "/Users/atanasster/component-controls/core/instrument/test/examples/follow-imports/direct-import.js", - "source": "export const Button = () => {}; -", + "source": undefined, } `; @@ -220,8 +99,7 @@ Object { }, }, "originalFilePath": "/Users/atanasster/component-controls/core/instrument/test/examples/follow-imports/button-named-export.js", - "source": "export const Button = () => {}; -", + "source": undefined, } `; @@ -241,124 +119,7 @@ Object { }, }, "originalFilePath": "/Users/atanasster/component-controls/node_modules/@component-controls/storybook/dist/index.js", - "source": "'use strict'; - -Object.defineProperty(exports, '__esModule', { value: true }); - -function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; } - -var React = _interopDefault(require('react')); -var blocks = require('@component-controls/blocks'); -var blocks$1 = require('@storybook/addon-docs/blocks'); -require('polished'); -require('@storybook/theming'); -require('@component-controls/components'); -var ThemeProvider = require('./ThemeProvider.js'); -var tslib = require('tslib'); -var coreEvents = require('@storybook/core-events'); -var core = require('@component-controls/core'); -var shared = require('./shared.js'); - -const BlockContextProvider = ({ - children -}) => { - const context = React.useContext(blocks$1.DocsContext); - const { - id: currentId, - clientApi, - storyStore, - channel - } = context; - return React.createElement(blocks.BlockContext.Provider, { - value: { - api: clientApi, - currentId, - channel, - storyStore - } - }, children); -}; - -const ComponentSource = props => { - return React.createElement(ThemeProvider.ThemeProvider, null, React.createElement(blocks.ComponentSource, Object.assign({}, props))); -}; - -const ControlsTable = _a => { - var { - id: propId, - name - } = _a, - rest = tslib.__rest(_a, [\\"id\\", \\"name\\"]); - - const { - id, - controls, - api, - channel - } = blocks.useControlsContext({ - id: propId, - name - }); - const setControlValue = api && api.setControlValue ? api.setControlValue : (storyId, propName, propValue) => { - if (controls) { - const newValues = core.mergeControlValues(controls, propName, propValue); - Object.keys(controls).forEach(key => { - controls[key] = newValues[key]; - }); - channel.emit(coreEvents.FORCE_RE_RENDER); - channel.emit(shared.SET_DATA_MSG, { - storyId, - controls: newValues - }); - } - }; - const clickControl = api && api.clickControl ? api.clickControl : (storyId, propName) => { - if (controls && controls[propName]) { - const control = controls[propName]; - - if (control && typeof control.onClick === 'function') { - control.onClick(control); - } - } - }; - - if (!controls || controls.disable) { - return null; - } - - return id ? React.createElement(ThemeProvider.ThemeProvider, null, React.createElement(blocks.ControlsTable, Object.assign({ - controls: controls, - storyId: id, - setControlValue: setControlValue, - clickControl: clickControl - }, rest))) : null; -}; - -const Description = props => { - return React.createElement(ThemeProvider.ThemeProvider, null, React.createElement(blocks.Description, Object.assign({}, props))); -}; - -const StorySource = props => { - return React.createElement(ThemeProvider.ThemeProvider, null, React.createElement(blocks.StorySource, Object.assign({}, props))); -}; - -const Subtitle = props => { - return React.createElement(ThemeProvider.ThemeProvider, null, React.createElement(blocks.Subtitle, Object.assign({}, props))); -}; - -const Title = props => { - return React.createElement(ThemeProvider.ThemeProvider, null, React.createElement(blocks.Title, Object.assign({}, props))); -}; - -exports.ThemeProvider = ThemeProvider.ThemeProvider; -exports.BlockContextProvider = BlockContextProvider; -exports.ComponentSource = ComponentSource; -exports.ControlsTable = ControlsTable; -exports.Description = Description; -exports.StorySource = StorySource; -exports.Subtitle = Subtitle; -exports.Title = Title; -", + "source": undefined, } `; @@ -378,8 +139,7 @@ Object { }, }, "originalFilePath": "/Users/atanasster/component-controls/core/instrument/test/examples/follow-imports/button-named-export.js", - "source": "export const Button = () => {}; -", + "source": undefined, } `; @@ -400,8 +160,7 @@ Object { }, }, "originalFilePath": "/Users/atanasster/component-controls/core/instrument/test/examples/follow-imports/button-default-export.js", - "source": "export default () => {}; -", + "source": undefined, } `; @@ -421,8 +180,7 @@ Object { }, }, "originalFilePath": "/Users/atanasster/component-controls/core/instrument/test/examples/follow-imports/button-named-export.js", - "source": "export const Button = () => {}; -", + "source": undefined, } `; @@ -443,8 +201,7 @@ Object { }, }, "originalFilePath": "/Users/atanasster/component-controls/core/instrument/test/examples/follow-imports/button-named-export.js", - "source": "export const Button = () => {}; -", + "source": undefined, } `; @@ -465,7 +222,6 @@ Object { }, }, "originalFilePath": "/Users/atanasster/component-controls/core/instrument/test/examples/follow-imports/button-default-export.js", - "source": "export default () => {}; -", + "source": undefined, } `; diff --git a/core/instrument/test/extract-component.test.ts b/core/instrument/test/extract-component.test.ts index eec681791..fb6769bee 100644 --- a/core/instrument/test/extract-component.test.ts +++ b/core/instrument/test/extract-component.test.ts @@ -8,7 +8,7 @@ describe('extract-component', () => { parser: defaultParserOptions, resolver: defaultResolveOptions, components: { - storeSourceFile: true, + storeSourceFile: false, package: { storeBrowseLink: true, storeDocsLink: true, diff --git a/core/instrument/test/extract-props-info.test.ts b/core/instrument/test/extract-props-info.test.ts index c8ff76a24..40c112c6b 100644 --- a/core/instrument/test/extract-props-info.test.ts +++ b/core/instrument/test/extract-props-info.test.ts @@ -24,7 +24,10 @@ describe('extract-props-info', () => { }; loadTestFiles( 'PropsTable', - path.resolve(__dirname, '../../../ui/blocks/src/PropsTable/PropsTable.tsx'), + path.resolve( + __dirname, + '../../../ui/blocks/src/PropsTable/PropsTable/PropsTable.tsx', + ), ); loadTestFiles( diff --git a/core/instrument/test/follow-imports-custom.test.ts b/core/instrument/test/follow-imports-custom.test.ts index 36ea5aabe..a0b4d52cb 100644 --- a/core/instrument/test/follow-imports-custom.test.ts +++ b/core/instrument/test/follow-imports-custom.test.ts @@ -17,7 +17,7 @@ describe('follow-imports-custom', () => { await followImports(componentName, fileName, source, { parser: defaultParserOptions, resolver: defaultResolveOptions, - components: defaultComponentOptions, + components: { ...defaultComponentOptions, storeSourceFile: false }, }), ).toMatchSnapshot(); }); diff --git a/core/instrument/test/follow-imports.test.ts b/core/instrument/test/follow-imports.test.ts index 56dccefef..68a3ea5da 100644 --- a/core/instrument/test/follow-imports.test.ts +++ b/core/instrument/test/follow-imports.test.ts @@ -11,7 +11,7 @@ describe('follow-imports', () => { return followImports('Button', require.resolve(fileName), undefined, { parser: defaultParserOptions, resolver: defaultResolveOptions, - components: defaultComponentOptions, + components: { ...defaultComponentOptions, storeSourceFile: false }, }); }, 'follow-imports'); });