timvir 0.2.10 → 0.2.12

package/blocks/Arbitrary/samples/basic.d.ts

@@ -1,5 +1,5 @@
 import * as React from "react";
 import { Arbitrary } from "..";
 type Props = Partial<React.ComponentPropsWithoutRef<typeof Arbitrary>>;
-export default function Sample(props: Props): JSX.Element;
+export default function Sample(props: Props): React.JSX.Element;
 export {};

package/blocks/Code/Code.d.ts

@@ -1,7 +1,6 @@
 /**
  * This is documentation for the Code component.
  */
-import { Language } from "prism-react-renderer";
 import * as React from "react";
 /**
  * The underlying DOM element which is rendered by this component.
@@ -17,7 +16,7 @@ interface Props extends React.ComponentPropsWithoutRef<typeof Root> {
      *
      * @default "markup"
      */
-    language?: Language;
+    language?: string;
     /**
      * When set, the code block spans the full width. Note that the text itself
      * is still aligned with the main column. Use this when you expect the text

package/blocks/Code/index.js

@@ -1,6 +1,6 @@
 import * as Page from 'timvir/core';
 import { useBlock } from 'timvir/core';
-import Highlight, { defaultProps } from 'prism-react-renderer';
+import { Highlight } from 'prism-react-renderer';
 import * as React from 'react';
 import * as Icons from 'react-feather';
 import { useImmer } from 'use-immer';
@@ -40,6 +40,7 @@ var theme = "tac6gx6";
  * This is documentation for the Code component.
  */
 
+
 /**
  * The underlying DOM element which is rendered by this component.
  */
@@ -70,7 +71,6 @@ function Code(props, ref) {
     className: cx_default(classes.root, fullWidth && Page.fullWidth),
     ...rest
   }, /*#__PURE__*/React.createElement(Highlight, {
-    ...defaultProps,
     code: children.trim(),
     language: language !== null && language !== void 0 ? language : "markup",
     theme: nullTheme

package/blocks/Code/samples/basic.d.ts

@@ -1,5 +1,5 @@
 import * as React from "react";
 import { Code } from "..";
 type Props = Partial<React.ComponentPropsWithoutRef<typeof Code>>;
-export default function Sample(props: Props): JSX.Element;
+export default function Sample(props: Props): React.JSX.Element;
 export {};

package/blocks/Code/samples/toggle.d.ts

@@ -1 +1,2 @@
-export default function Sample({ language, children }: any): JSX.Element;
+import * as React from "react";
+export default function Sample({ language, children }: any): React.JSX.Element;

package/blocks/ColorBar/samples/basic.d.ts

@@ -1 +1,2 @@
-export default function Sample(): JSX.Element;
+import * as React from "react";
+export default function Sample(): React.JSX.Element;

package/blocks/ColorBook/samples/basic.d.ts

@@ -1 +1,2 @@
-export default function Sample(): JSX.Element;
+import * as React from "react";
+export default function Sample(): React.JSX.Element;

package/blocks/Cover/samples/basic.d.ts

@@ -1 +1,2 @@
-export default function Sample(): JSX.Element;
+import * as React from "react";
+export default function Sample(): React.JSX.Element;

package/blocks/Exhibit/samples/basic.d.ts

@@ -1 +1,2 @@
-export default function Sample(): JSX.Element;
+import * as React from "react";
+export default function Sample(): React.JSX.Element;

package/blocks/Font/samples/basic.d.ts

@@ -1,5 +1,5 @@
 import * as React from "react";
 import { Font } from "..";
 type Props = Partial<React.ComponentPropsWithoutRef<typeof Font>>;
-export default function Sample(props: Props): JSX.Element;
+export default function Sample(props: Props): React.JSX.Element;
 export {};

package/blocks/Font/samples/system.d.ts

@@ -1 +1,2 @@
-export default function Sample(): JSX.Element;
+import * as React from "react";
+export default function Sample(): React.JSX.Element;

package/blocks/Grid/samples/basic.d.ts

@@ -1 +1,2 @@
-export default function Sample(): JSX.Element;
+import * as React from "react";
+export default function Sample(): React.JSX.Element;

package/blocks/Icon/internal/Canvas.d.ts

@@ -5,5 +5,5 @@ interface Props {
     size: number;
     Component: React.ElementType;
 }
-declare function Canvas(props: Props): JSX.Element;
+declare function Canvas(props: Props): React.JSX.Element;
 export default Canvas;

package/blocks/Icon/samples/basic.d.ts

@@ -1 +1,2 @@
-export default function Sample(): JSX.Element;
+import * as React from "react";
+export default function Sample(): React.JSX.Element;

package/blocks/Message/samples/basic.d.ts

@@ -1,5 +1,5 @@
 import * as React from "react";
 import { Message } from "..";
 type Props = Partial<React.ComponentPropsWithoutRef<typeof Message>>;
-export default function Sample(props: Props): JSX.Element;
+export default function Sample(props: Props): React.JSX.Element;
 export {};

package/blocks/Swatch/samples/basic.d.ts

@@ -1 +1,2 @@
-export default function Sample(): JSX.Element;
+import * as React from "react";
+export default function Sample(): React.JSX.Element;

package/blocks/Viewport/internal/Caption.d.ts

@@ -3,6 +3,6 @@ interface Props {
     src: string;
     code?: string;
 }
-declare function Caption(props: Props): JSX.Element;
+declare function Caption(props: Props): React.JSX.Element;
 declare const _default: React.MemoExoticComponent<typeof Caption>;
 export default _default;

package/blocks/Viewport/internal/Handle.d.ts

@@ -5,6 +5,6 @@ interface Props {
     edge: "left" | "right";
     iframeRef: React.RefObject<HTMLIFrameElement>;
 }
-declare function Handle(props: Props): JSX.Element;
+declare function Handle(props: Props): React.JSX.Element;
 declare const _default: React.MemoExoticComponent<typeof Handle>;
 export default _default;

package/blocks/Viewport/internal/Ruler.d.ts

@@ -1,6 +1,7 @@
+import * as React from "react";
 interface Props {
     containerWidth?: number;
     viewportWidth?: number;
 }
-declare function Ruler(props: Props): JSX.Element;
+declare function Ruler(props: Props): React.JSX.Element;
 export default Ruler;

package/blocks/Viewport/samples/basic.d.ts

@@ -1 +1,2 @@
-export default function Sample(): JSX.Element;
+import * as React from "react";
+export default function Sample(): React.JSX.Element;

package/blocks/WebLink/samples/basic.d.ts

@@ -1,5 +1,5 @@
 import * as React from "react";
 import { WebLink } from "..";
 type Props = Partial<React.ComponentPropsWithoutRef<typeof WebLink>>;
-export default function Sample(props: Props): JSX.Element;
+export default function Sample(props: Props): React.JSX.Element;
 export {};

package/core/components/Commands/internal/Action.d.ts

@@ -3,5 +3,5 @@ declare const Root = "div";
 interface Props extends React.ComponentPropsWithoutRef<typeof Root> {
     label?: React.ReactNode;
 }
-declare function Action(props: Props): JSX.Element;
+declare function Action(props: Props): React.JSX.Element;
 export default Action;

package/core/components/Commands/internal/Dialog.d.ts

@@ -1,7 +1,8 @@
+import * as React from "react";
 interface Props {
     open?: boolean;
     onClose?: () => void;
     onDispose?: () => void;
 }
-declare function Dialog(props: Props): JSX.Element;
+declare function Dialog(props: Props): React.JSX.Element;
 export default Dialog;

package/core/components/Footer/samples/basic.d.ts

@@ -1,5 +1,5 @@
 import * as React from "react";
 import { Footer } from "..";
 type Props = Partial<React.ComponentPropsWithoutRef<typeof Footer>>;
-export default function Sample(props: Props): JSX.Element;
+export default function Sample(props: Props): React.JSX.Element;
 export {};

package/core/components/NavigationFooter/samples/basic.d.ts

@@ -1,5 +1,5 @@
 import * as React from "react";
 import { NavigationFooter } from "..";
 type Props = Partial<React.ComponentPropsWithoutRef<typeof NavigationFooter>>;
-export default function Sample(props: Props): JSX.Element;
+export default function Sample(props: Props): React.JSX.Element;
 export {};

package/core/components/Page/Page.d.ts

@@ -1,4 +1,4 @@
-import { Components } from "@mdx-js/react/lib/index";
+import { MDXProvider } from "@mdx-js/react";
 import * as React from "react";
 import { Value } from "timvir/context";
 import { Node } from "./types";
@@ -24,7 +24,7 @@ interface Props extends React.ComponentProps<typeof Root> {
      * highlighting. If you want to enable syntax highlighting in code blocks, use the
      * '<Code>' component from 'timvir/blocks'.
      */
-    mdxComponents?: Components;
+    mdxComponents?: React.ComponentPropsWithoutRef<typeof MDXProvider>['components'];
     /**
      * Search Configuration. When provided, then the Search menu will appear in the sidebar.
      */

package/core/components/Page/components.d.ts

@@ -1,46 +1,18 @@
 import * as React from "react";
-export declare const h1: import("@linaria/react").StyledMeta & React.FunctionComponent<React.ClassAttributes<HTMLHeadingElement> & React.HTMLAttributes<HTMLHeadingElement> & Record<never, unknown> & {
-    as?: React.ElementType<any> | undefined;
-}>;
-export declare const h2: (props: React.HTMLAttributes<HTMLHeadingElement>) => JSX.Element;
-export declare const h3: (props: React.HTMLAttributes<HTMLHeadingElement>) => JSX.Element;
-export declare const h4: (props: React.HTMLAttributes<HTMLHeadingElement>) => JSX.Element;
-export declare const blockquote: import("@linaria/react").StyledMeta & React.FunctionComponent<React.ClassAttributes<HTMLQuoteElement> & React.BlockquoteHTMLAttributes<HTMLQuoteElement> & Record<never, unknown> & {
-    as?: React.ElementType<any> | undefined;
-}>;
-export declare const hr: import("@linaria/react").StyledMeta & React.FunctionComponent<React.ClassAttributes<HTMLHRElement> & React.HTMLAttributes<HTMLHRElement> & Record<never, unknown> & {
-    as?: React.ElementType<any> | undefined;
-}>;
-export declare const table: import("@linaria/react").StyledMeta & React.FunctionComponent<React.ClassAttributes<HTMLTableElement> & React.TableHTMLAttributes<HTMLTableElement> & Record<never, unknown> & {
-    as?: React.ElementType<any> | undefined;
-}>;
-export declare const thead: import("@linaria/react").StyledMeta & React.FunctionComponent<React.ClassAttributes<HTMLTableSectionElement> & React.HTMLAttributes<HTMLTableSectionElement> & Record<never, unknown> & {
-    as?: React.ElementType<any> | undefined;
-}>;
-export declare const tbody: import("@linaria/react").StyledMeta & React.FunctionComponent<React.ClassAttributes<HTMLTableSectionElement> & React.HTMLAttributes<HTMLTableSectionElement> & Record<never, unknown> & {
-    as?: React.ElementType<any> | undefined;
-}>;
-export declare const tr: import("@linaria/react").StyledMeta & React.FunctionComponent<React.ClassAttributes<HTMLTableRowElement> & React.HTMLAttributes<HTMLTableRowElement> & Record<never, unknown> & {
-    as?: React.ElementType<any> | undefined;
-}>;
-export declare const th: import("@linaria/react").StyledMeta & React.FunctionComponent<React.ClassAttributes<HTMLTableHeaderCellElement> & React.ThHTMLAttributes<HTMLTableHeaderCellElement> & Record<never, unknown> & {
-    as?: React.ElementType<any> | undefined;
-}>;
-export declare const td: import("@linaria/react").StyledMeta & React.FunctionComponent<React.ClassAttributes<HTMLTableDataCellElement> & React.TdHTMLAttributes<HTMLTableDataCellElement> & Record<never, unknown> & {
-    as?: React.ElementType<any> | undefined;
-}>;
-export declare const code: import("@linaria/react").StyledMeta & React.FunctionComponent<React.ClassAttributes<HTMLElement> & React.HTMLAttributes<HTMLElement> & Record<never, unknown> & {
-    as?: React.ElementType<any> | undefined;
-}>;
-export declare const a: import("@linaria/react").StyledMeta & React.FunctionComponent<React.ClassAttributes<HTMLAnchorElement> & React.AnchorHTMLAttributes<HTMLAnchorElement> & Record<never, unknown> & {
-    as?: React.ElementType<any> | undefined;
-}>;
-export declare const p: import("@linaria/react").StyledMeta & React.FunctionComponent<React.ClassAttributes<HTMLParagraphElement> & React.HTMLAttributes<HTMLParagraphElement> & Record<never, unknown> & {
-    as?: React.ElementType<any> | undefined;
-}>;
-export declare const ul: import("@linaria/react").StyledMeta & React.FunctionComponent<React.ClassAttributes<HTMLUListElement> & React.HTMLAttributes<HTMLUListElement> & Record<never, unknown> & {
-    as?: React.ElementType<any> | undefined;
-}>;
-export declare const ol: import("@linaria/react").StyledMeta & React.FunctionComponent<React.ClassAttributes<HTMLOListElement> & React.OlHTMLAttributes<HTMLOListElement> & Record<never, unknown> & {
-    as?: React.ElementType<any> | undefined;
-}>;
+export declare const h1: import("@linaria/react").StyledComponent<React.ClassAttributes<HTMLHeadingElement> & React.HTMLAttributes<HTMLHeadingElement> & Record<never, unknown>>;
+export declare const h2: (props: React.HTMLAttributes<HTMLHeadingElement>) => React.JSX.Element;
+export declare const h3: (props: React.HTMLAttributes<HTMLHeadingElement>) => React.JSX.Element;
+export declare const h4: (props: React.HTMLAttributes<HTMLHeadingElement>) => React.JSX.Element;
+export declare const blockquote: import("@linaria/react").StyledComponent<React.ClassAttributes<HTMLQuoteElement> & React.BlockquoteHTMLAttributes<HTMLQuoteElement> & Record<never, unknown>>;
+export declare const hr: import("@linaria/react").StyledComponent<React.ClassAttributes<HTMLHRElement> & React.HTMLAttributes<HTMLHRElement> & Record<never, unknown>>;
+export declare const table: import("@linaria/react").StyledComponent<React.ClassAttributes<HTMLTableElement> & React.TableHTMLAttributes<HTMLTableElement> & Record<never, unknown>>;
+export declare const thead: import("@linaria/react").StyledComponent<React.ClassAttributes<HTMLTableSectionElement> & React.HTMLAttributes<HTMLTableSectionElement> & Record<never, unknown>>;
+export declare const tbody: import("@linaria/react").StyledComponent<React.ClassAttributes<HTMLTableSectionElement> & React.HTMLAttributes<HTMLTableSectionElement> & Record<never, unknown>>;
+export declare const tr: import("@linaria/react").StyledComponent<React.ClassAttributes<HTMLTableRowElement> & React.HTMLAttributes<HTMLTableRowElement> & Record<never, unknown>>;
+export declare const th: import("@linaria/react").StyledComponent<React.ClassAttributes<HTMLTableHeaderCellElement> & React.ThHTMLAttributes<HTMLTableHeaderCellElement> & Record<never, unknown>>;
+export declare const td: import("@linaria/react").StyledComponent<React.ClassAttributes<HTMLTableDataCellElement> & React.TdHTMLAttributes<HTMLTableDataCellElement> & Record<never, unknown>>;
+export declare const code: import("@linaria/react").StyledComponent<React.ClassAttributes<HTMLElement> & React.HTMLAttributes<HTMLElement> & Record<never, unknown>>;
+export declare const a: import("@linaria/react").StyledComponent<React.ClassAttributes<HTMLAnchorElement> & React.AnchorHTMLAttributes<HTMLAnchorElement> & Record<never, unknown>>;
+export declare const p: import("@linaria/react").StyledComponent<React.ClassAttributes<HTMLParagraphElement> & React.HTMLAttributes<HTMLParagraphElement> & Record<never, unknown>>;
+export declare const ul: import("@linaria/react").StyledComponent<React.ClassAttributes<HTMLUListElement> & React.HTMLAttributes<HTMLUListElement> & Record<never, unknown>>;
+export declare const ol: import("@linaria/react").StyledComponent<React.ClassAttributes<HTMLOListElement> & React.OlHTMLAttributes<HTMLOListElement> & Record<never, unknown>>;

package/core/components/Page/internal/Section.d.ts

@@ -1,6 +1,7 @@
+import * as React from "react";
 import { Node } from "../types";
 interface Props extends Node {
     depth: number;
 }
-declare function Section(props: Props): JSX.Element;
+declare function Section(props: Props): React.JSX.Element;
 export default Section;

package/core/components/Page/internal/Sidebar.d.ts

@@ -11,5 +11,5 @@ interface Props {
         }>;
     };
 }
-declare function Sidebar(props: Props): JSX.Element;
+declare function Sidebar(props: Props): React.JSX.Element;
 export default Sidebar;

package/core/components/Page/samples/basic.d.ts

@@ -1 +1,2 @@
-export default function Sample(): JSX.Element;
+import * as React from "react";
+export default function Sample(): React.JSX.Element;

package/core/components/Page/samples/layout.d.ts

@@ -1 +1,2 @@
-export default function Sample(): JSX.Element;
+import * as React from "react";
+export default function Sample(): React.JSX.Element;

package/core/index.js

@@ -407,7 +407,8 @@ function filterProps(asIs, props, omitKeys) {
 }
 var warnIfInvalid = (value, componentName) => {
   if (process.env.NODE_ENV !== "production") {
-    if (typeof value === "string" || typeof value === "number" && isFinite(value)) {
+    if (typeof value === "string" || // eslint-disable-next-line no-self-compare,no-restricted-globals
+    typeof value === "number" && isFinite(value)) {
       return;
     }
     const stringified = typeof value === "object" ? JSON.stringify(value) : String(value);
@@ -416,9 +417,17 @@ var warnIfInvalid = (value, componentName) => {
     );
   }
 };
+var idx = 0;
 function styled(tag) {
+  let mockedClass = "";
+  if (process.env.NODE_ENV === "test") {
+    mockedClass += `mocked-styled-${idx++}`;
+    if (tag && tag.__linaria && tag.__linaria.className) {
+      mockedClass += ` ${tag.__linaria.className}`;
+    }
+  }
   return (options) => {
-    if (process.env.NODE_ENV !== "production") {
+    if (process.env.NODE_ENV !== "production" && process.env.NODE_ENV !== "test") {
       if (Array.isArray(options)) {
         throw new Error(
           'Using the "styled" tag in runtime is not supported. Make sure you have set up the Babel plugin correctly. See https://github.com/callstack/linaria#setup'
@@ -426,7 +435,7 @@ function styled(tag) {
       }
     }
     const render = (props, ref) => {
-      const { as: component = tag, class: className } = props;
+      const { as: component = tag, class: className = mockedClass } = props;
       const shouldKeepProps = options.propsAsIs === void 0 ? !(typeof component === "string" && component.indexOf("-") === -1 && !isCapital(component[0])) : options.propsAsIs;
       const filteredProps = filterProps(shouldKeepProps, props, [
         "as",
@@ -460,13 +469,17 @@ function styled(tag) {
       }
       return React__default.createElement(component, filteredProps);
     };
-    const Result = React__default.forwardRef ? React__default.forwardRef(render) : (props) => {
-      const rest = omit(props, ["innerRef"]);
-      return render(rest, props.innerRef);
-    };
+    const Result = React__default.forwardRef ? React__default.forwardRef(render) : (
+      // React.forwardRef won't available on older React versions and in Preact
+      // Fallback to a innerRef prop in that case
+      (props) => {
+        const rest = omit(props, ["innerRef"]);
+        return render(rest, props.innerRef);
+      }
+    );
     Result.displayName = options.name;
     Result.__linaria = {
-      className: options.class,
+      className: options.class || mockedClass,
       extends: tag
     };
     return Result;
@@ -547,7 +560,7 @@ const tr = /*#__PURE__*/styled_default('tr')({
   class: "twrwqj6",
   propsAsIs: false
 });
-const _exp = () => props => props.align || "center";
+const _exp = /*#__PURE__*/() => props => props.align || "center";
 const th = /*#__PURE__*/styled_default('th')({
   name: "th",
   class: "t1fhygp",
@@ -556,7 +569,7 @@ const th = /*#__PURE__*/styled_default('th')({
     "t1fhygp-0": [_exp()]
   }
 });
-const _exp2 = () => props => props.align || "left";
+const _exp2 = /*#__PURE__*/() => props => props.align || "left";
 const td = /*#__PURE__*/styled_default('td')({
   name: "td",
   class: "t176v8uh",

package/package.json

@@ -1,7 +1,7 @@
 {
   "type": "module",
   "name": "timvir",
-  "version": "0.2.10",
+  "version": "0.2.12",
   "license": "MIT",
   "sideEffects": false,
   "exports": {
@@ -19,13 +19,13 @@
     "downshift": "^7",
     "fuzzaldrin-plus": "^0.6.0",
     "immer": "^9 || ^10",
-    "prism-react-renderer": "^1",
+    "prism-react-renderer": "^2",
     "react-feather": "^2",
     "use-immer": "^0.8.0 || ^0.8.1 || ^0.9.0",
     "wonka": "^6"
   },
   "peerDependencies": {
-    "@mdx-js/react": "^2",
+    "@mdx-js/react": "^2 || ^3",
     "react": "^17 || ^18",
     "react-dom": "^17 || ^18",
     "react-hotkeys-hook": "^4"

package/search/Search/internal/Highlight.d.ts

@@ -1,6 +1,7 @@
+import * as React from "react";
 interface Props {
     string: string;
     query: string;
 }
-declare const Highlight: ({ string, query }: Props) => JSX.Element;
+declare const Highlight: ({ string, query }: Props) => React.JSX.Element;
 export default Highlight;

package/search/Search/samples/basic.d.ts

@@ -1 +1,2 @@
-export default function Sample(): JSX.Element;
+import * as React from "react";
+export default function Sample(): React.JSX.Element;

package/search/SearchBoxInput/samples/basic.d.ts

@@ -1 +1,2 @@
-export default function Sample(): JSX.Element;
+import * as React from "react";
+export default function Sample(): React.JSX.Element;

package/search/SearchBoxListItem/samples/basic.d.ts

@@ -1 +1,2 @@
-export default function Sample(): JSX.Element;
+import * as React from "react";
+export default function Sample(): React.JSX.Element;