@conveyorhq/arrow-ds 1.48.0 → 1.51.0

package/package.json

@@ -2,7 +2,7 @@
   "name": "@conveyorhq/arrow-ds",
   "author": "Conveyor",
   "license": "MIT",
-  "version": "1.48.0",
+  "version": "1.51.0",
   "description": "Arrow Design System",
   "repository": "https://github.com/conveyor/arrow-ds",
   "publishConfig": {
@@ -45,6 +45,7 @@
     "react-remove-scroll": "^2.2.0",
     "react-select": "^4.0.2",
     "react-spring": "^8.0.27",
+    "remark-breaks": "^2.0.2",
     "toasted-notes": "^3.2.0"
   },
   "scripts": {

package/public/components/Markdown/Markdown.js

@@ -7,6 +7,7 @@ exports.Markdown = void 0;
 const react_1 = __importDefault(require("react"));
 const classnames_1 = __importDefault(require("classnames"));
 const react_markdown_1 = __importDefault(require("react-markdown"));
+const remark_breaks_1 = __importDefault(require("remark-breaks"));
 const bem_1 = require("../../utilities/bem");
 const Text_1 = require("../Text");
 const cn = "Markdown";
@@ -19,6 +20,6 @@ const Markdown = ({ children, className, escapeHtml = true, skipHtml = false, re
             emphasis: TextRenderer("span"),
         }
         : undefined;
-    return (react_1.default.createElement(react_markdown_1.default, Object.assign({ className: classnames_1.default(bem_1.bem(cn), className), source: children, escapeHtml: escapeHtml, skipHtml: skipHtml, renderers: { ...plainTextRenderers, ...renderers } }, rest)));
+    return (react_1.default.createElement(react_markdown_1.default, Object.assign({ className: classnames_1.default(bem_1.bem(cn), className), source: children, escapeHtml: escapeHtml, skipHtml: skipHtml, renderers: { ...plainTextRenderers, ...renderers }, plugins: [remark_breaks_1.default] }, rest)));
 };
 exports.Markdown = Markdown;

package/public/components/ScrollSpy/ScrollSpy.d.ts

@@ -1,4 +1,4 @@
-import React, { ReactNode, MutableRefObject, Dispatch, HTMLAttributes, ReactElement, AnchorHTMLAttributes, MouseEvent, ChangeEvent, InputHTMLAttributes } from "react";
+import React, { ReactNode, Dispatch, HTMLAttributes, ReactElement, AnchorHTMLAttributes, MouseEvent, ChangeEvent, InputHTMLAttributes } from "react";
 import { ScrollSpyState, ScrollSpyAction } from "./types";
 export declare const ScrollSpyStateContext: React.Context<{
     state: ScrollSpyState;
@@ -11,7 +11,6 @@ export declare function useScrollSpyStateContext(): {
 declare type ScrollSpyContextType = {
     id: string;
     itemCount: number;
-    refList: MutableRefObject<HTMLElement[]>;
     defaultIndex: number;
     updateCurrentRef(index: number, refItem: HTMLElement): void;
     scrollToRef(refToScrollTo: HTMLElement): void;
@@ -71,8 +70,9 @@ export declare type ScrollSpyRootProps = {
     children: ReactNode;
     itemCount: number;
     defaultIndex?: number;
+    id?: string;
 };
-export declare const ScrollSpyRoot: React.MemoExoticComponent<({ children, itemCount, defaultIndex }: ScrollSpyRootProps) => JSX.Element>;
+export declare const ScrollSpyRoot: React.MemoExoticComponent<({ children, itemCount, defaultIndex, id, }: ScrollSpyRootProps) => JSX.Element>;
 export declare const ScrollSpyStateProvider: ({ children, }: {
     children: ReactNode;
 }) => JSX.Element;

package/public/components/ScrollSpy/ScrollSpy.js

@@ -25,7 +25,6 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.ScrollSpyActions = exports.ScrollSpySelectors = exports.ScrollSpyReducers = exports.ScrollSpyStateProvider = exports.ScrollSpyRoot = exports.ScrollSpyAnchor = exports.useScrollSpyAnchorProps = exports.ScrollSpyPage = exports.useScrollSpyPageProps = exports.ScrollSpyInput = exports.useScrollSpyInputProps = exports.useScrollSpyContext = exports.ScrollSpyContext = exports.useScrollSpyStateContext = exports.ScrollSpyStateContext = void 0;
 const react_1 = __importStar(require("react"));
 const react_merge_refs_1 = __importDefault(require("react-merge-refs"));
-const auto_id_1 = require("@reach/auto-id");
 const classnames_1 = __importDefault(require("classnames"));
 const utilities_1 = require("../../utilities");
 const hooks_1 = require("../../hooks");
@@ -33,6 +32,7 @@ const reducers_1 = require("./reducers");
 const selectors_1 = require("./selectors");
 const actions_1 = require("./actions");
 const cn = utilities_1.bemHOF("ScrollSpy");
+const DEFAULT_ID = "scroll-spy-1";
 const initialContextState = {
     state: reducers_1.scrollSpyInitialState,
     dispatch: () => { },
@@ -46,9 +46,8 @@ function useScrollSpyStateContext() {
 }
 exports.useScrollSpyStateContext = useScrollSpyStateContext;
 const defaultRootContext = {
-    id: "scroll-spy-1",
+    id: DEFAULT_ID,
     itemCount: 1,
-    refList: { current: [] },
     defaultIndex: 0,
     updateCurrentRef: () => { },
     scrollToRef: () => { },
@@ -161,9 +160,8 @@ exports.ScrollSpyAnchor = react_1.memo(react_1.forwardRef(({ id, children, onCli
     });
     return (react_1.default.createElement("a", Object.assign({ ref: forwardedRef }, anchorProps, rest), children));
 }));
-exports.ScrollSpyRoot = react_1.memo(({ children, itemCount, defaultIndex = 0 }) => {
+exports.ScrollSpyRoot = react_1.memo(({ children, itemCount, defaultIndex = 0, id = DEFAULT_ID, }) => {
     const refList = react_1.useRef([]);
-    const id = `scroll-spy-${auto_id_1.useId()}`;
     const prefersReducedMotion = hooks_1.usePrefersReducedMotion();
     const scrollBehavior = prefersReducedMotion ? "auto" : "smooth";
     react_1.useEffect(() => {
@@ -197,18 +195,19 @@ exports.ScrollSpyRoot = react_1.memo(({ children, itemCount, defaultIndex = 0 })
             skipToPage(defaultIndex + 1);
         }
     }, [defaultIndex, itemCount]);
-    const context = {
-        id,
-        itemCount,
-        refList,
-        defaultIndex,
-        updateCurrentRef,
-        scrollToRef,
-        scrollToFirst,
-        scrollToLast,
-        scrollToPage,
-        skipToPage,
-    };
+    const context = react_1.useMemo(() => {
+        return {
+            id,
+            itemCount,
+            defaultIndex,
+            updateCurrentRef,
+            scrollToRef,
+            scrollToFirst,
+            scrollToLast,
+            scrollToPage,
+            skipToPage,
+        };
+    }, [id, itemCount, defaultIndex]);
     return (react_1.default.createElement(exports.ScrollSpyContext.Provider, { value: context }, children));
 });
 const ScrollSpyStateProvider = ({ children, }) => {

package/src/components/Markdown/Markdown.tsx

@@ -1,6 +1,7 @@
 import React, { ReactNode } from "react";
 import classNames from "classnames";
 import ReactMarkdown, { ReactMarkdownProps } from "react-markdown";
+import remarkBreaks from "remark-breaks";
 import { bem } from "../../utilities/bem";
 import { Text } from "../Text";
 
@@ -44,6 +45,7 @@ export const Markdown = ({
       escapeHtml={escapeHtml}
       skipHtml={skipHtml}
       renderers={{ ...plainTextRenderers, ...renderers }}
+      plugins={[remarkBreaks]}
       {...rest}
     />
   );

package/src/components/ScrollSpy/ScrollSpy.tsx

@@ -3,7 +3,6 @@ import React, {
   useRef,
   useEffect,
   createContext,
-  MutableRefObject,
   useContext,
   Dispatch,
   HTMLAttributes,
@@ -20,7 +19,6 @@ import React, {
   useReducer,
 } from "react";
 import mergeRefs from "react-merge-refs";
-import { useId } from "@reach/auto-id";
 import classNames from "classnames";
 import { bemHOF } from "../../utilities";
 import { useIntersection, usePrefersReducedMotion } from "../../hooks";
@@ -30,6 +28,7 @@ import { selectCurrentIndex, selectCurrentPage } from "./selectors";
 import { updateIndex } from "./actions";
 
 const cn = bemHOF("ScrollSpy");
+const DEFAULT_ID = "scroll-spy-1";
 
 // ------------------------------------------------------------------
 // ScrollSpy.StateContext
@@ -58,7 +57,6 @@ export function useScrollSpyStateContext() {
 type ScrollSpyContextType = {
   id: string;
   itemCount: number;
-  refList: MutableRefObject<HTMLElement[]>;
   defaultIndex: number;
   updateCurrentRef(index: number, refItem: HTMLElement): void;
   scrollToRef(refToScrollTo: HTMLElement): void;
@@ -69,9 +67,8 @@ type ScrollSpyContextType = {
 };
 
 const defaultRootContext: ScrollSpyContextType = {
-  id: "scroll-spy-1",
+  id: DEFAULT_ID,
   itemCount: 1,
-  refList: { current: [] },
   defaultIndex: 0,
   updateCurrentRef: () => {},
   scrollToRef: () => {},
@@ -287,12 +284,17 @@ export type ScrollSpyRootProps = {
   children: ReactNode;
   itemCount: number;
   defaultIndex?: number;
+  id?: string;
 };
 
 export const ScrollSpyRoot = memo(
-  ({ children, itemCount, defaultIndex = 0 }: ScrollSpyRootProps) => {
+  ({
+    children,
+    itemCount,
+    defaultIndex = 0,
+    id = DEFAULT_ID,
+  }: ScrollSpyRootProps) => {
     const refList = useRef<HTMLElement[]>([]);
-    const id = `scroll-spy-${useId()}`;
     const prefersReducedMotion = usePrefersReducedMotion();
     const scrollBehavior = prefersReducedMotion ? "auto" : "smooth";
 
@@ -339,18 +341,20 @@ export const ScrollSpyRoot = memo(
       // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [defaultIndex, itemCount]);
 
-    const context = {
-      id,
-      itemCount,
-      refList,
-      defaultIndex,
-      updateCurrentRef,
-      scrollToRef,
-      scrollToFirst,
-      scrollToLast,
-      scrollToPage,
-      skipToPage,
-    };
+    const context = useMemo(() => {
+      return {
+        id,
+        itemCount,
+        defaultIndex,
+        updateCurrentRef,
+        scrollToRef,
+        scrollToFirst,
+        scrollToLast,
+        scrollToPage,
+        skipToPage,
+      };
+      // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [id, itemCount, defaultIndex]);
 
     return (
       <ScrollSpyContext.Provider value={context}>