@strapi/design-system 1.9.0 → 1.10.0-alpha.0

package/dist/JSONInput/JSONInput.js

@@ -1,72 +1,120 @@
-import { jsx as i, jsxs as J } from "react/jsx-runtime";
-import { forwardRef as j, useRef as d, useImperativeHandle as y } from "react";
-import { json as L, jsonParseLinter as $ } from "@codemirror/lang-json";
-import { useCodeMirror as V } from "@uiw/react-codemirror";
-import v from "styled-components";
-import { markField as z, addMarks as A, lineHighlightMark as B, filterMarks as q } from "./utils/decorationExtension.js";
-import { useComposedRefs as G } from "../hooks/useComposeRefs.js";
-import { Field as P } from "../Field/Field.js";
-import { Flex as g } from "../Flex/Flex.js";
-import { FieldLabel as D } from "../Field/FieldLabel.js";
-import { FieldError as K } from "../Field/FieldError.js";
-import { FieldHint as Q } from "../Field/FieldHint.js";
-import { inputFocusStyle as T } from "../themes/utils.js";
-const lr = j(({ label: t, error: c, hint: p, labelAction: b, value: S = "", required: E = !1, disabled: m = !1, onChange: k = () => null, ...F }, w) => {
-  const u = d(), s = d(), l = d(), C = !!c, I = (r) => {
-    const e = s.current?.doc;
-    if (e) {
-      const { text: a, to: n } = e.line(r), f = n - a.trimStart().length;
-      n > f && l.current?.dispatch({
-        effects: A.of([B.range(f, n)])
-      });
-    }
-  }, x = () => {
-    const r = s.current?.doc;
-    if (r) {
-      const e = r.length || 0;
-      l.current?.dispatch({
-        effects: q.of((a, n) => n <= 0 || a >= e)
-      });
-    }
-  }, h = ({ state: r, view: e }) => {
-    l.current = e, s.current = r, x();
-    const n = $()(e);
-    n.length && I(r.doc.lineAt(n[0].from).number);
-  }, H = (r, e) => {
-    h(e), k(r);
-  }, M = (r, e) => {
-    l.current = r, s.current = e, h({ view: r, state: e });
-  }, { setContainer: N, view: o } = V({
-    value: S,
-    onCreateEditor: M,
-    container: u.current,
-    editable: !m,
-    extensions: [L(), z],
-    onChange: H,
-    theme: "dark",
-    basicSetup: {
-      lineNumbers: !0,
-      bracketMatching: !0,
-      closeBrackets: !0,
-      indentOnInput: !0,
-      syntaxHighlighting: !0,
-      highlightSelectionMatches: !0,
-      tabSize: 2
-    }
-  }), O = () => {
-    !m && o && o.focus();
-  }, R = G(u, N);
-  return y(w, () => ({
-    ...o?.dom,
-    focus() {
-      o && o.focus();
-    },
-    scrollIntoView(r) {
-      o && o.dom.scrollIntoView(r);
-    }
-  }), [o]), i(P, { error: c, hint: p, required: E, children: J(g, { direction: "column", alignItems: "stretch", gap: 1, children: [t && i(D, { onClick: O, action: b, children: t }), i(U, { ref: R, hasError: C, alignItems: "stretch", fontSize: 2, hasRadius: !0, ...F }), i(K, {}), i(Q, {})] }) });
-}), U = v(g)`
-  line-height: ${({ theme: t }) => t.lineHeights[2]};
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const jsxRuntime = require('react/jsx-runtime');
+const React = require('react');
+const langJson = require('@codemirror/lang-json');
+const reactCodemirror = require('@uiw/react-codemirror');
+const styled = require('styled-components');
+const decorationExtension = require('./utils/decorationExtension.js');
+const useComposeRefs = require('../hooks/useComposeRefs.js');
+const Field = require('../Field/Field.js');
+const Flex = require('../Flex/Flex.js');
+const FieldLabel = require('../Field/FieldLabel.js');
+const FieldError = require('../Field/FieldError.js');
+const FieldHint = require('../Field/FieldHint.js');
+const utils = require('../themes/utils.js');
+
+const _interopDefault = e => e && e.__esModule ? e : { default: e };
+
+const styled__default = /*#__PURE__*/_interopDefault(styled);
+
+const JSONInput = React.forwardRef(({ label, error, hint, labelAction, value = '', required = false, disabled = false, onChange = () => null, ...boxProps }, forwardedRef) => {
+    const editor = React.useRef();
+    const editorState = React.useRef();
+    const editorView = React.useRef();
+    const hasError = Boolean(error);
+    /**
+     * Determines the line to highlight when lintJSON finds an error via jsonParseLinter()
+     */
+    const highglightErrorAtLine = (lineNumber) => {
+        const doc = editorState.current?.doc;
+        if (doc) {
+            const { text, to: lineEnd } = doc.line(lineNumber);
+            const lineStart = lineEnd - text.trimStart().length;
+            if (lineEnd > lineStart) {
+                editorView.current?.dispatch({
+                    effects: decorationExtension.addMarks.of([decorationExtension.lineHighlightMark.range(lineStart, lineEnd)]),
+                });
+            }
+        }
+    };
+    const clearErrorHighlight = () => {
+        const doc = editorState.current?.doc;
+        if (doc) {
+            const docEnd = doc.length || 0;
+            editorView.current?.dispatch({
+                effects: decorationExtension.filterMarks.of((from, to) => to <= 0 || from >= docEnd),
+            });
+        }
+    };
+    /**
+     * Checks code editor for valid json input and then highlights any errors
+     */
+    const lintJSON = ({ state, view }) => {
+        editorView.current = view;
+        editorState.current = state;
+        clearErrorHighlight();
+        // Function calls json.parse and returns error message + position
+        const lintJSONForErrrors = langJson.jsonParseLinter();
+        const lintErrors = lintJSONForErrrors(view);
+        if (lintErrors.length) {
+            highglightErrorAtLine(state.doc.lineAt(lintErrors[0].from).number);
+        }
+    };
+    const onCodeMirrorChange = (currentValue, viewUpdate) => {
+        lintJSON(viewUpdate);
+        // Call the parent's onChange handler
+        onChange(currentValue);
+    };
+    const onCreateEditor = (view, state) => {
+        editorView.current = view;
+        editorState.current = state;
+        // Lint the JSON in case the initial value is invalid
+        lintJSON({ view, state });
+    };
+    const { setContainer, view } = reactCodemirror.useCodeMirror({
+        value,
+        onCreateEditor,
+        container: editor.current,
+        editable: !disabled,
+        extensions: [langJson.json(), decorationExtension.markField],
+        onChange: onCodeMirrorChange,
+        theme: 'dark',
+        basicSetup: {
+            lineNumbers: true,
+            bracketMatching: true,
+            closeBrackets: true,
+            indentOnInput: true,
+            syntaxHighlighting: true,
+            highlightSelectionMatches: true,
+            tabSize: 2,
+        },
+    });
+    const focusInput = () => {
+        if (!disabled && view) {
+            view.focus();
+        }
+    };
+    const composedRefs = useComposeRefs.useComposedRefs(editor, setContainer);
+    React.useImperativeHandle(forwardedRef, () => ({
+        ...view?.dom,
+        focus() {
+            if (view) {
+                view.focus();
+            }
+        },
+        scrollIntoView(args) {
+            if (view) {
+                view.dom.scrollIntoView(args);
+            }
+        },
+    }), [view]);
+    return (jsxRuntime.jsx(Field.Field, { error: error, hint: hint, required: required, children: jsxRuntime.jsxs(Flex.Flex, { direction: "column", alignItems: "stretch", gap: 1, children: [label && (jsxRuntime.jsx(FieldLabel.FieldLabel, { onClick: focusInput, action: labelAction, children: label })), jsxRuntime.jsx(JSONInputContainer, { ref: composedRefs, hasError: hasError, alignItems: "stretch", fontSize: 2, hasRadius: true, ...boxProps }), jsxRuntime.jsx(FieldError.FieldError, {}), jsxRuntime.jsx(FieldHint.FieldHint, {})] }) }));
+});
+const JSONInputContainer = styled__default.default(Flex.Flex) `
+  line-height: ${({ theme }) => theme.lineHeights[2]};
 
   .cm-editor {
     /** 
@@ -79,14 +127,14 @@ const lr = j(({ label: t, error: c, hint: p, labelAction: b, value: S = "", requ
   }
 
   .cm-scroller {
-    border: 1px solid ${({ theme: t, hasError: c }) => c ? t.colors.danger600 : t.colors.neutral200};
+    border: 1px solid ${({ theme, hasError }) => (hasError ? theme.colors.danger600 : theme.colors.neutral200)};
     /* inputFocusStyle will receive hasError prop */
-    ${T()}
+    ${utils.inputFocusStyle()}
   }
 
   .cm-editor,
   .cm-scroller {
-    border-radius: ${({ theme: t }) => t.borderRadius};
+    border-radius: ${({ theme }) => theme.borderRadius};
   }
 
   .cm-gutters,
@@ -98,6 +146,5 @@ const lr = j(({ label: t, error: c, hint: p, labelAction: b, value: S = "", requ
     background-color: #4a4a6a;
   }
 `;
-export {
-  lr as JSONInput
-};
+
+exports.JSONInput = JSONInput;

package/dist/JSONInput/JSONInput.mjs

@@ -0,0 +1,142 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { forwardRef, useRef, useImperativeHandle } from 'react';
+import { json, jsonParseLinter } from '@codemirror/lang-json';
+import { useCodeMirror } from '@uiw/react-codemirror';
+import styled from 'styled-components';
+import { markField, addMarks, lineHighlightMark, filterMarks } from './utils/decorationExtension.mjs';
+import { useComposedRefs } from '../hooks/useComposeRefs.mjs';
+import { Field } from '../Field/Field.mjs';
+import { Flex } from '../Flex/Flex.mjs';
+import { FieldLabel } from '../Field/FieldLabel.mjs';
+import { FieldError } from '../Field/FieldError.mjs';
+import { FieldHint } from '../Field/FieldHint.mjs';
+import { inputFocusStyle } from '../themes/utils.mjs';
+
+const JSONInput = forwardRef(({ label, error, hint, labelAction, value = '', required = false, disabled = false, onChange = () => null, ...boxProps }, forwardedRef) => {
+    const editor = useRef();
+    const editorState = useRef();
+    const editorView = useRef();
+    const hasError = Boolean(error);
+    /**
+     * Determines the line to highlight when lintJSON finds an error via jsonParseLinter()
+     */
+    const highglightErrorAtLine = (lineNumber) => {
+        const doc = editorState.current?.doc;
+        if (doc) {
+            const { text, to: lineEnd } = doc.line(lineNumber);
+            const lineStart = lineEnd - text.trimStart().length;
+            if (lineEnd > lineStart) {
+                editorView.current?.dispatch({
+                    effects: addMarks.of([lineHighlightMark.range(lineStart, lineEnd)]),
+                });
+            }
+        }
+    };
+    const clearErrorHighlight = () => {
+        const doc = editorState.current?.doc;
+        if (doc) {
+            const docEnd = doc.length || 0;
+            editorView.current?.dispatch({
+                effects: filterMarks.of((from, to) => to <= 0 || from >= docEnd),
+            });
+        }
+    };
+    /**
+     * Checks code editor for valid json input and then highlights any errors
+     */
+    const lintJSON = ({ state, view }) => {
+        editorView.current = view;
+        editorState.current = state;
+        clearErrorHighlight();
+        // Function calls json.parse and returns error message + position
+        const lintJSONForErrrors = jsonParseLinter();
+        const lintErrors = lintJSONForErrrors(view);
+        if (lintErrors.length) {
+            highglightErrorAtLine(state.doc.lineAt(lintErrors[0].from).number);
+        }
+    };
+    const onCodeMirrorChange = (currentValue, viewUpdate) => {
+        lintJSON(viewUpdate);
+        // Call the parent's onChange handler
+        onChange(currentValue);
+    };
+    const onCreateEditor = (view, state) => {
+        editorView.current = view;
+        editorState.current = state;
+        // Lint the JSON in case the initial value is invalid
+        lintJSON({ view, state });
+    };
+    const { setContainer, view } = useCodeMirror({
+        value,
+        onCreateEditor,
+        container: editor.current,
+        editable: !disabled,
+        extensions: [json(), markField],
+        onChange: onCodeMirrorChange,
+        theme: 'dark',
+        basicSetup: {
+            lineNumbers: true,
+            bracketMatching: true,
+            closeBrackets: true,
+            indentOnInput: true,
+            syntaxHighlighting: true,
+            highlightSelectionMatches: true,
+            tabSize: 2,
+        },
+    });
+    const focusInput = () => {
+        if (!disabled && view) {
+            view.focus();
+        }
+    };
+    const composedRefs = useComposedRefs(editor, setContainer);
+    useImperativeHandle(forwardedRef, () => ({
+        ...view?.dom,
+        focus() {
+            if (view) {
+                view.focus();
+            }
+        },
+        scrollIntoView(args) {
+            if (view) {
+                view.dom.scrollIntoView(args);
+            }
+        },
+    }), [view]);
+    return (jsx(Field, { error: error, hint: hint, required: required, children: jsxs(Flex, { direction: "column", alignItems: "stretch", gap: 1, children: [label && (jsx(FieldLabel, { onClick: focusInput, action: labelAction, children: label })), jsx(JSONInputContainer, { ref: composedRefs, hasError: hasError, alignItems: "stretch", fontSize: 2, hasRadius: true, ...boxProps }), jsx(FieldError, {}), jsx(FieldHint, {})] }) }));
+});
+const JSONInputContainer = styled(Flex) `
+  line-height: ${({ theme }) => theme.lineHeights[2]};
+
+  .cm-editor {
+    /** 
+     * Hard coded since the color is the same between themes,
+     * theme.colors.neutral800 changes between themes 
+     */
+    background-color: #32324d;
+    width: 100%;
+    outline: none;
+  }
+
+  .cm-scroller {
+    border: 1px solid ${({ theme, hasError }) => (hasError ? theme.colors.danger600 : theme.colors.neutral200)};
+    /* inputFocusStyle will receive hasError prop */
+    ${inputFocusStyle()}
+  }
+
+  .cm-editor,
+  .cm-scroller {
+    border-radius: ${({ theme }) => theme.borderRadius};
+  }
+
+  .cm-gutters,
+  .cm-activeLineGutter {
+    /** 
+     * Hard coded since the color is the same between themes,
+     * theme.colors.neutral700 changes between themes 
+     */
+    background-color: #4a4a6a;
+  }
+`;
+
+export { JSONInput };

package/dist/JSONInput/index.js

@@ -1,4 +1,9 @@
-import { JSONInput as r } from "./JSONInput.js";
-export {
-  r as JSONInput
-};
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const JSONInput = require('./JSONInput.js');
+
+
+
+exports.JSONInput = JSONInput.JSONInput;

package/dist/JSONInput/index.mjs

@@ -0,0 +1 @@
+export { JSONInput } from './JSONInput.mjs';

package/dist/JSONInput/utils/decorationExtension.js

@@ -1,27 +1,43 @@
-import { StateEffect as o, StateField as d } from "@codemirror/state";
-import { Decoration as i, EditorView as a } from "@codemirror/view";
-const n = o.define(), s = o.define(), l = i.mark({
-  attributes: { style: "background-color: yellow; color: black" }
-}), m = d.define({
-  // Start with an empty set of decorations
-  create() {
-    return i.none;
-  },
-  // This is called whenever the editor updates it computes the new set
-  update(r, t) {
-    return r = r.map(t.changes), t.effects.forEach((e) => {
-      e.is(n) ? r = r.update({
-        add: e.value,
-        sort: !0
-      }) : e.is(s) && (r = r.update({ filter: e.value }));
-    }), r;
-  },
-  // Indicate that this field provides a set of decorations
-  provide: (r) => a.decorations.from(r)
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const state = require('@codemirror/state');
+const view = require('@codemirror/view');
+
+// Effects can be attached to transactions to communicate with the extension
+const addMarks = state.StateEffect.define();
+const filterMarks = state.StateEffect.define();
+const lineHighlightMark = view.Decoration.mark({
+    attributes: { style: 'background-color: yellow; color: black' },
 });
-export {
-  n as addMarks,
-  s as filterMarks,
-  l as lineHighlightMark,
-  m as markField
-};
+const markField = state.StateField.define({
+    // Start with an empty set of decorations
+    create() {
+        return view.Decoration.none;
+    },
+    // This is called whenever the editor updates it computes the new set
+    update(value, transaction) {
+        // Move the decorations to account for document changes
+        value = value.map(transaction.changes);
+        transaction.effects.forEach((effect) => {
+            if (effect.is(addMarks)) {
+                value = value.update({
+                    add: effect.value,
+                    sort: true,
+                });
+            }
+            else if (effect.is(filterMarks)) {
+                value = value.update({ filter: effect.value });
+            }
+        });
+        return value;
+    },
+    // Indicate that this field provides a set of decorations
+    provide: (f) => view.EditorView.decorations.from(f),
+});
+
+exports.addMarks = addMarks;
+exports.filterMarks = filterMarks;
+exports.lineHighlightMark = lineHighlightMark;
+exports.markField = markField;

package/dist/JSONInput/utils/decorationExtension.mjs

@@ -0,0 +1,36 @@
+import { StateEffect, StateField } from '@codemirror/state';
+import { Decoration, EditorView } from '@codemirror/view';
+
+// Effects can be attached to transactions to communicate with the extension
+const addMarks = StateEffect.define();
+const filterMarks = StateEffect.define();
+const lineHighlightMark = Decoration.mark({
+    attributes: { style: 'background-color: yellow; color: black' },
+});
+const markField = StateField.define({
+    // Start with an empty set of decorations
+    create() {
+        return Decoration.none;
+    },
+    // This is called whenever the editor updates it computes the new set
+    update(value, transaction) {
+        // Move the decorations to account for document changes
+        value = value.map(transaction.changes);
+        transaction.effects.forEach((effect) => {
+            if (effect.is(addMarks)) {
+                value = value.update({
+                    add: effect.value,
+                    sort: true,
+                });
+            }
+            else if (effect.is(filterMarks)) {
+                value = value.update({ filter: effect.value });
+            }
+        });
+        return value;
+    },
+    // Indicate that this field provides a set of decorations
+    provide: (f) => EditorView.decorations.from(f),
+});
+
+export { addMarks, filterMarks, lineHighlightMark, markField };

package/dist/KeyboardNavigable/KeyboardNavigable.js

@@ -1,46 +1,75 @@
-import { jsx as m } from "react/jsx-runtime";
-import { KeyboardKeys as o } from "../helpers/keyboardKeys.js";
-import { Box as i } from "../Box/Box.js";
-const v = ({ tagName: s, attributeName: a = "", ...d }) => {
-  const r = () => {
-    const e = document.activeElement;
-    return e ? s ? e.tagName.toLowerCase() === s : e.hasAttribute(a) : !1;
-  }, l = (e) => s ? e.querySelectorAll(s) : e.querySelectorAll(`[${a}]`);
-  return m(i, { onKeyDown: (e) => {
-    switch (e.key) {
-      case o.RIGHT:
-      case o.DOWN: {
-        if (r()) {
-          e.preventDefault();
-          const n = document.activeElement, t = [...l(e.currentTarget)], c = t.findIndex((f) => f === n), u = c + 1 < t.length ? c + 1 : 0;
-          t[u].focus();
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const jsxRuntime = require('react/jsx-runtime');
+const keyboardKeys = require('../helpers/keyboardKeys.js');
+const Box = require('../Box/Box.js');
+
+const KeyboardNavigable = ({ tagName, attributeName = '', ...props }) => {
+    const isValidFocusedElement = () => {
+        const focused = document.activeElement;
+        if (!focused) {
+            return false;
         }
-        break;
-      }
-      case o.LEFT:
-      case o.UP: {
-        if (r()) {
-          e.preventDefault();
-          const n = document.activeElement, t = [...l(e.currentTarget)], c = t.findIndex((f) => f === n), u = c - 1 > -1 ? c - 1 : t.length - 1;
-          t[u].focus();
+        if (tagName) {
+            return focused.tagName.toLowerCase() === tagName;
         }
-        break;
-      }
-      case o.HOME: {
-        r() && (e.preventDefault(), l(e.currentTarget).item(0).focus());
-        break;
-      }
-      case o.END: {
-        if (r()) {
-          e.preventDefault();
-          const n = l(e.currentTarget);
-          n.item(n.length - 1).focus();
+        return focused.hasAttribute(attributeName);
+    };
+    const queryElement = (parentEl) => {
+        if (tagName) {
+            return parentEl.querySelectorAll(tagName);
         }
-        break;
-      }
-    }
-  }, ...d });
-};
-export {
-  v as KeyboardNavigable
+        return parentEl.querySelectorAll(`[${attributeName}]`);
+    };
+    const handleKeyDown = (e) => {
+        switch (e.key) {
+            case keyboardKeys.KeyboardKeys.RIGHT:
+            case keyboardKeys.KeyboardKeys.DOWN: {
+                if (isValidFocusedElement()) {
+                    e.preventDefault();
+                    const focused = document.activeElement;
+                    const allElements = [...queryElement(e.currentTarget)];
+                    const focusedIndex = allElements.findIndex((node) => node === focused);
+                    const nextIndex = focusedIndex + 1 < allElements.length ? focusedIndex + 1 : 0;
+                    allElements[nextIndex].focus();
+                }
+                break;
+            }
+            case keyboardKeys.KeyboardKeys.LEFT:
+            case keyboardKeys.KeyboardKeys.UP: {
+                if (isValidFocusedElement()) {
+                    e.preventDefault();
+                    const focused = document.activeElement;
+                    const allElements = [...queryElement(e.currentTarget)];
+                    const focusedIndex = allElements.findIndex((node) => node === focused);
+                    const nextIndex = focusedIndex - 1 > -1 ? focusedIndex - 1 : allElements.length - 1;
+                    allElements[nextIndex].focus();
+                }
+                break;
+            }
+            case keyboardKeys.KeyboardKeys.HOME: {
+                if (isValidFocusedElement()) {
+                    e.preventDefault();
+                    const allElements = queryElement(e.currentTarget);
+                    const focusElement = allElements.item(0);
+                    focusElement.focus();
+                }
+                break;
+            }
+            case keyboardKeys.KeyboardKeys.END: {
+                if (isValidFocusedElement()) {
+                    e.preventDefault();
+                    const allElements = queryElement(e.currentTarget);
+                    const focusElement = allElements.item(allElements.length - 1);
+                    focusElement.focus();
+                }
+                break;
+            }
+        }
+    };
+    return jsxRuntime.jsx(Box.Box, { onKeyDown: handleKeyDown, ...props });
 };
+
+exports.KeyboardNavigable = KeyboardNavigable;