myst-to-react 0.14.0 → 0.14.2

package/README.md

@@ -1,6 +1,6 @@
 # myst-to-react
 
 [![myst-to-react on npm](https://img.shields.io/npm/v/myst-to-react.svg)](https://www.npmjs.com/package/myst-to-react)
-[![MIT License](https://img.shields.io/badge/license-MIT-blue.svg)](https://github.com/curvenote/curvenote/blob/main/LICENSE)
+[![MIT License](https://img.shields.io/badge/license-MIT-blue.svg)](https://github.com/jupyter-book/myst-theme/blob/main/LICENSE)
 
 Convert a MyST AST to React.

package/dist/block.d.ts

@@ -1,11 +1,9 @@
 import type { GenericParent } from 'myst-common';
 import type { NodeRenderer } from '@myst-theme/providers';
-export declare function Block({ id, node, className, }: {
-    id: string;
+export declare function Block({ node, className }: {
     node: GenericParent;
     className?: string;
-}): import("react/jsx-runtime").JSX.Element;
-export declare const BlockRenderer: NodeRenderer;
+}): import("react/jsx-runtime").JSX.Element | null;
 declare const BLOCK_RENDERERS: Record<string, NodeRenderer>;
 export default BLOCK_RENDERERS;
 //# sourceMappingURL=block.d.ts.map

package/dist/block.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"block.d.ts","sourceRoot":"","sources":["../src/block.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AAGjD,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,uBAAuB,CAAC;AAE1D,wBAAgB,KAAK,CAAC,EACpB,EAAE,EACF,IAAI,EACJ,SAAS,GACV,EAAE;IACD,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE,aAAa,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,2CAuBA;AAED,eAAO,MAAM,aAAa,EAAE,YAI3B,CAAC;AAEF,QAAA,MAAM,eAAe,EAAE,MAAM,CAAC,MAAM,EAAE,YAAY,CAEjD,CAAC;AAEF,eAAe,eAAe,CAAC"}
+{"version":3,"file":"block.d.ts","sourceRoot":"","sources":["../src/block.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AAEjD,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,uBAAuB,CAAC;AAE1D,wBAAgB,KAAK,CAAC,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE;IAAE,IAAI,EAAE,aAAa,CAAC;IAAC,SAAS,CAAC,EAAE,MAAM,CAAA;CAAE,kDAoBrF;AAED,QAAA,MAAM,eAAe,EAAE,MAAM,CAAC,MAAM,EAAE,YAAY,CAEjD,CAAC;AAEF,eAAe,eAAe,CAAC"}

package/dist/block.js

@@ -2,27 +2,23 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { Details } from './dropdown.js';
 import { MyST } from './MyST.js';
 import classNames from 'classnames';
-import { useGridSystemProvider } from '@myst-theme/providers';
-export function Block({ id, node, className, }) {
+export function Block({ node, className }) {
     var _a, _b;
-    const grid = useGridSystemProvider();
-    const subGrid = node.visibility === 'hide' ? '' : `${grid} subgrid-gap col-screen`;
-    const dataClassName = typeof ((_a = node.data) === null || _a === void 0 ? void 0 : _a.class) === 'string' ? (_b = node.data) === null || _b === void 0 ? void 0 : _b.class : undefined;
-    // Hide the subgrid if either the dataClass or the className exists and includes `col-`
-    const noSubGrid = (dataClassName && dataClassName.includes('col-')) || (className && className.includes('col-'));
-    const block = (_jsx("div", { id: id, className: classNames('relative group/block', className, dataClassName, {
-            [subGrid]: !noSubGrid,
-            hidden: node.visibility === 'remove',
-        }), children: _jsx(MyST, { ast: node.children }) }, `block-${id}`));
+    const cn = classNames(className, node.class, {
+        [(_a = node.data) === null || _a === void 0 ? void 0 : _a.class]: typeof ((_b = node.data) === null || _b === void 0 ? void 0 : _b.class) === 'string',
+    });
+    if (node.visibility === 'remove')
+        return null;
+    // Only wrap this in a block if the block has a class name or an identifier
+    // Otherwise pass through the contents as is.
+    // This allows children (e.g. margin) access to the grid-system
+    const block = cn || node.identifier ? (_jsx("div", { id: node.identifier, className: cn, children: _jsx(MyST, { ast: node.children }) })) : (_jsx(MyST, { ast: node.children }));
     if (node.visibility === 'hide') {
         return _jsx(Details, { title: "Block", children: block });
     }
     return block;
 }
-export const BlockRenderer = ({ node, className }) => {
-    return (_jsx(Block, { id: node.key, node: node, className: classNames(node.class, className) }, node.key));
-};
 const BLOCK_RENDERERS = {
-    block: BlockRenderer,
+    block: Block,
 };
 export default BLOCK_RENDERERS;

package/dist/hashLink.d.ts

@@ -10,7 +10,7 @@ export declare function scrollToElement(el: HTMLElement | null, { htmlId, scroll
     /** Update the URL fragment to this ID */
     htmlId?: string;
 } & HashLinkBehavior): void;
-export declare function HashLink({ id, kind, title, children, canSelectText, hover, className, hideInPopup, scrollBehavior, historyState, focusTarget, }: {
+export declare function HashLink({ id, kind, title, children, canSelectText, hover, className, hideInPopup, scrollBehavior, historyState, focusTarget, noWidth, }: {
     id?: string;
     kind?: string;
     title?: string;
@@ -19,5 +19,7 @@ export declare function HashLink({ id, kind, title, children, canSelectText, hov
     canSelectText?: boolean;
     className?: string;
     hideInPopup?: boolean;
+    /** Ensures that when centered it doesn't take up space */
+    noWidth?: boolean;
 } & HashLinkBehavior): import("react/jsx-runtime").JSX.Element | null;
 //# sourceMappingURL=hashLink.d.ts.map

package/dist/hashLink.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"hashLink.d.ts","sourceRoot":"","sources":["../src/hashLink.tsx"],"names":[],"mappings":"AAGA,MAAM,MAAM,gBAAgB,GAAG;IAC7B,6DAA6D;IAC7D,cAAc,CAAC,EAAE,cAAc,CAAC;IAChC,8DAA8D;IAC9D,YAAY,CAAC,EAAE,SAAS,GAAG,MAAM,GAAG,IAAI,CAAC;IACzC,gEAAgE;IAChE,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB,CAAC;AAUF,wBAAgB,eAAe,CAC7B,EAAE,EAAE,WAAW,GAAG,IAAI,EACtB,EACE,MAAe,EACf,cAAyB,EACzB,YAAwB,EACxB,WAAkB,GACnB,GAAE;IACD,yCAAyC;IACzC,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB,GAAG,gBAAqB,QAe1B;AAED,wBAAgB,QAAQ,CAAC,EACvB,EAAE,EACF,IAAI,EACJ,KAA8B,EAC9B,QAAc,EACd,aAAqB,EACrB,KAAK,EACL,SAAyB,EACzB,WAAW,EACX,cAAc,EACd,YAAY,EACZ,WAAW,GACZ,EAAE;IACD,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,OAAO,GAAG,SAAS,CAAC;IAC5B,QAAQ,CAAC,EAAE,GAAG,GAAG,GAAG,GAAG,KAAK,CAAC,SAAS,CAAC;IACvC,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB,GAAG,gBAAgB,kDA+BnB"}
+{"version":3,"file":"hashLink.d.ts","sourceRoot":"","sources":["../src/hashLink.tsx"],"names":[],"mappings":"AAGA,MAAM,MAAM,gBAAgB,GAAG;IAC7B,6DAA6D;IAC7D,cAAc,CAAC,EAAE,cAAc,CAAC;IAChC,8DAA8D;IAC9D,YAAY,CAAC,EAAE,SAAS,GAAG,MAAM,GAAG,IAAI,CAAC;IACzC,gEAAgE;IAChE,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB,CAAC;AAUF,wBAAgB,eAAe,CAC7B,EAAE,EAAE,WAAW,GAAG,IAAI,EACtB,EACE,MAAe,EACf,cAAyB,EACzB,YAAwB,EACxB,WAAkB,GACnB,GAAE;IACD,yCAAyC;IACzC,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB,GAAG,gBAAqB,QAe1B;AAED,wBAAgB,QAAQ,CAAC,EACvB,EAAE,EACF,IAAI,EACJ,KAA8B,EAC9B,QAAc,EACd,aAAqB,EACrB,KAAK,EACL,SAAyB,EACzB,WAAW,EACX,cAAc,EACd,YAAY,EACZ,WAAW,EACX,OAAO,GACR,EAAE;IACD,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,OAAO,GAAG,SAAS,CAAC;IAC5B,QAAQ,CAAC,EAAE,GAAG,GAAG,GAAG,GAAG,KAAK,CAAC,SAAS,CAAC;IACvC,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,0DAA0D;IAC1D,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB,GAAG,gBAAgB,kDAoCnB"}

package/dist/hashLink.js

@@ -27,7 +27,7 @@ export function scrollToElement(el, { htmlId = el === null || el === void 0 ? vo
         el.focus({ preventScroll: true });
     }
 }
-export function HashLink({ id, kind, title = `Link to this ${kind}`, children = '¶', canSelectText = false, hover, className = 'font-normal', hideInPopup, scrollBehavior, historyState, focusTarget, }) {
+export function HashLink({ id, kind, title = `Link to this ${kind}`, children = '¶', canSelectText = false, hover, className = 'font-normal', hideInPopup, scrollBehavior, historyState, focusTarget, noWidth, }) {
     const { inCrossRef } = useXRefState();
     if (inCrossRef || !id) {
         // If we are in a cross-reference pop-out, either hide hash link
@@ -39,7 +39,7 @@ export function HashLink({ id, kind, title = `Link to this ${kind}`, children =
         const el = document.getElementById(id);
         scrollToElement(el, { scrollBehavior, historyState, focusTarget });
     };
-    return (_jsx("a", { className: classNames('no-underline text-inherit hover:text-inherit', className, {
+    return (_jsx("a", { className: classNames('no-underline text-inherit hover:text-inherit', { 'inline-block w-0 px-0 translate-x-[10px]': noWidth === true }, className, {
             'select-none': !canSelectText,
             'transition-opacity opacity-0 focus:opacity-100 group-hover:opacity-70': hover === true,
             '[@media(hover:hover)]:transition-opacity [@media(hover:hover)]:opacity-0 [@media(hover:hover)]:focus:opacity-100 [@media(hover:hover)]:group-hover:opacity-70': hover === 'desktop',

package/dist/heading.js

@@ -6,7 +6,7 @@ import classNames from 'classnames';
 const Heading = ({ node, className }) => {
     const { enumerator, depth, key, identifier, html_id } = node;
     const id = html_id || identifier || key;
-    const textContent = (_jsxs(_Fragment, { children: [enumerator && _jsx("span", { className: "mr-3 select-none", children: enumerator }), _jsx("span", { className: "heading-text", children: _jsx(MyST, { ast: node.children }) }), _jsx(HashLink, { id: id, kind: "Section", className: "px-2 font-normal", hover: true, hideInPopup: true })] }));
+    const textContent = (_jsxs(_Fragment, { children: [enumerator && _jsx("span", { className: "mr-3 select-none", children: enumerator }), _jsx("span", { className: "heading-text", children: _jsx(MyST, { ast: node.children }) }), _jsx(HashLink, { id: id, kind: "Section", className: "font-normal", hover: true, hideInPopup: true, noWidth: true })] }));
     // The `heading-text` class is picked up in the Outline to select without the enumerator and "#" link
     return e(`h${depth}`, {
         id,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "myst-to-react",
-  "version": "0.14.0",
+  "version": "0.14.2",
   "type": "module",
   "exports": "./dist/index.js",
   "types": "./dist/index.d.ts",
@@ -21,7 +21,7 @@
   },
   "dependencies": {
     "@heroicons/react": "^2.0.18",
-    "@myst-theme/providers": "^0.14.0",
+    "@myst-theme/providers": "^0.14.2",
     "@scienceicons/react": "^0.0.11",
     "@radix-ui/react-hover-card": "^1.0.6",
     "buffer": "^6.0.3",