@uiw/react-json-view 1.12.0 → 2.0.0-alpha.0

package/cjs/types/Date.d.ts

@@ -0,0 +1,5 @@
+import { type TagType, type TypesElement } from '../store/Types';
+export declare const Date: {
+    (props: TypesElement<TagType>): null;
+    displayName: string;
+};

package/cjs/types/Date.js

@@ -0,0 +1,17 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Date = void 0;
+var _Types = require("../store/Types");
+var _useRender = require("../utils/useRender");
+var Date = function Date(props) {
+  var _useTypesStore = (0, _Types.useTypesStore)(),
+    _useTypesStore$Date = _useTypesStore.Date,
+    Comp = _useTypesStore$Date === void 0 ? {} : _useTypesStore$Date;
+  (0, _useRender.useTypesRender)(Comp, props, 'Date');
+  return null;
+};
+exports.Date = Date;
+Date.displayName = 'JVR.Date';

package/cjs/types/False.d.ts

@@ -0,0 +1,5 @@
+import { type TagType, type TypesElement } from '../store/Types';
+export declare const False: {
+    (props: TypesElement<TagType>): null;
+    displayName: string;
+};

package/cjs/types/False.js

@@ -0,0 +1,17 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.False = void 0;
+var _Types = require("../store/Types");
+var _useRender = require("../utils/useRender");
+var False = function False(props) {
+  var _useTypesStore = (0, _Types.useTypesStore)(),
+    _useTypesStore$False = _useTypesStore.False,
+    Comp = _useTypesStore$False === void 0 ? {} : _useTypesStore$False;
+  (0, _useRender.useTypesRender)(Comp, props, 'False');
+  return null;
+};
+exports.False = False;
+False.displayName = 'JVR.False';

package/cjs/types/Float.d.ts

@@ -0,0 +1,5 @@
+import { type TagType, type TypesElement } from '../store/Types';
+export declare const Float: {
+    (props: TypesElement<TagType>): null;
+    displayName: string;
+};

package/cjs/types/Float.js

@@ -0,0 +1,17 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Float = void 0;
+var _Types = require("../store/Types");
+var _useRender = require("../utils/useRender");
+var Float = function Float(props) {
+  var _useTypesStore = (0, _Types.useTypesStore)(),
+    _useTypesStore$Float = _useTypesStore.Float,
+    Comp = _useTypesStore$Float === void 0 ? {} : _useTypesStore$Float;
+  (0, _useRender.useTypesRender)(Comp, props, 'Float');
+  return null;
+};
+exports.Float = Float;
+Float.displayName = 'JVR.Float';

package/cjs/types/Int.d.ts

@@ -0,0 +1,5 @@
+import { type TagType, type TypesElement } from '../store/Types';
+export declare const Int: {
+    (props: TypesElement<TagType>): null;
+    displayName: string;
+};

package/cjs/types/Int.js

@@ -0,0 +1,17 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Int = void 0;
+var _Types = require("../store/Types");
+var _useRender = require("../utils/useRender");
+var Int = function Int(props) {
+  var _useTypesStore = (0, _Types.useTypesStore)(),
+    _useTypesStore$Int = _useTypesStore.Int,
+    Comp = _useTypesStore$Int === void 0 ? {} : _useTypesStore$Int;
+  (0, _useRender.useTypesRender)(Comp, props, 'Int');
+  return null;
+};
+exports.Int = Int;
+Int.displayName = 'JVR.Int';

package/cjs/types/Map.d.ts

@@ -0,0 +1,5 @@
+import { type TagType, type TypesElement } from '../store/Types';
+export declare const Map: {
+    (props: TypesElement<TagType>): null;
+    displayName: string;
+};

package/cjs/types/Map.js

@@ -0,0 +1,17 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Map = void 0;
+var _Types = require("../store/Types");
+var _useRender = require("../utils/useRender");
+var Map = function Map(props) {
+  var _useTypesStore = (0, _Types.useTypesStore)(),
+    _useTypesStore$Map = _useTypesStore.Map,
+    Comp = _useTypesStore$Map === void 0 ? {} : _useTypesStore$Map;
+  (0, _useRender.useTypesRender)(Comp, props, 'Map');
+  return null;
+};
+exports.Map = Map;
+Map.displayName = 'JVR.Map';

package/cjs/types/Nan.d.ts

@@ -0,0 +1,5 @@
+import { type TagType, type TypesElement } from '../store/Types';
+export declare const Nan: {
+    (props: TypesElement<TagType>): null;
+    displayName: string;
+};

package/cjs/types/Nan.js

@@ -0,0 +1,17 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Nan = void 0;
+var _Types = require("../store/Types");
+var _useRender = require("../utils/useRender");
+var Nan = function Nan(props) {
+  var _useTypesStore = (0, _Types.useTypesStore)(),
+    _useTypesStore$Nan = _useTypesStore.Nan,
+    Comp = _useTypesStore$Nan === void 0 ? {} : _useTypesStore$Nan;
+  (0, _useRender.useTypesRender)(Comp, props, 'Nan');
+  return null;
+};
+exports.Nan = Nan;
+Nan.displayName = 'JVR.Nan';

package/cjs/types/Null.d.ts

@@ -0,0 +1,5 @@
+import { type TagType, type TypesElement } from '../store/Types';
+export declare const Null: {
+    (props: TypesElement<TagType>): null;
+    displayName: string;
+};

package/cjs/types/Null.js

@@ -0,0 +1,17 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Null = void 0;
+var _Types = require("../store/Types");
+var _useRender = require("../utils/useRender");
+var Null = function Null(props) {
+  var _useTypesStore = (0, _Types.useTypesStore)(),
+    _useTypesStore$Null = _useTypesStore.Null,
+    Comp = _useTypesStore$Null === void 0 ? {} : _useTypesStore$Null;
+  (0, _useRender.useTypesRender)(Comp, props, 'Null');
+  return null;
+};
+exports.Null = Null;
+Null.displayName = 'JVR.Null';

package/cjs/types/Set.d.ts

@@ -0,0 +1,5 @@
+import { type TagType, type TypesElement } from '../store/Types';
+export declare const Set: {
+    (props: TypesElement<TagType>): null;
+    displayName: string;
+};

package/cjs/types/Set.js

@@ -0,0 +1,17 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Set = void 0;
+var _Types = require("../store/Types");
+var _useRender = require("../utils/useRender");
+var Set = function Set(props) {
+  var _useTypesStore = (0, _Types.useTypesStore)(),
+    _useTypesStore$Set = _useTypesStore.Set,
+    Comp = _useTypesStore$Set === void 0 ? {} : _useTypesStore$Set;
+  (0, _useRender.useTypesRender)(Comp, props, 'Set');
+  return null;
+};
+exports.Set = Set;
+Set.displayName = 'JVR.Set';

package/cjs/types/String.d.ts

@@ -0,0 +1,5 @@
+import { type TagType, type TypesElement } from '../store/Types';
+export declare const StringText: {
+    (props: TypesElement<TagType>): null;
+    displayName: string;
+};

package/cjs/types/String.js

@@ -0,0 +1,17 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.StringText = void 0;
+var _Types = require("../store/Types");
+var _useRender = require("../utils/useRender");
+var StringText = function StringText(props) {
+  var _useTypesStore = (0, _Types.useTypesStore)(),
+    _useTypesStore$Str = _useTypesStore.Str,
+    Comp = _useTypesStore$Str === void 0 ? {} : _useTypesStore$Str;
+  (0, _useRender.useTypesRender)(Comp, props, 'Str');
+  return null;
+};
+exports.StringText = StringText;
+StringText.displayName = 'JVR.StringText';

package/cjs/types/True.d.ts

@@ -0,0 +1,5 @@
+import { type TagType, type TypesElement } from '../store/Types';
+export declare const True: {
+    (props: TypesElement<TagType>): null;
+    displayName: string;
+};

package/cjs/types/True.js

@@ -0,0 +1,17 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.True = void 0;
+var _Types = require("../store/Types");
+var _useRender = require("../utils/useRender");
+var True = function True(props) {
+  var _useTypesStore = (0, _Types.useTypesStore)(),
+    _useTypesStore$True = _useTypesStore.True,
+    Comp = _useTypesStore$True === void 0 ? {} : _useTypesStore$True;
+  (0, _useRender.useTypesRender)(Comp, props, 'True');
+  return null;
+};
+exports.True = True;
+True.displayName = 'JVR.True';

package/cjs/types/Undefined.d.ts

@@ -0,0 +1,5 @@
+import { type TagType, type TypesElement } from '../store/Types';
+export declare const Undefined: {
+    (props: TypesElement<TagType>): null;
+    displayName: string;
+};

package/cjs/types/Undefined.js

@@ -0,0 +1,17 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Undefined = void 0;
+var _Types = require("../store/Types");
+var _useRender = require("../utils/useRender");
+var Undefined = function Undefined(props) {
+  var _useTypesStore = (0, _Types.useTypesStore)(),
+    _useTypesStore$Undefi = _useTypesStore.Undefined,
+    Comp = _useTypesStore$Undefi === void 0 ? {} : _useTypesStore$Undefi;
+  (0, _useRender.useTypesRender)(Comp, props, 'Undefined');
+  return null;
+};
+exports.Undefined = Undefined;
+Undefined.displayName = 'JVR.Undefined';

package/cjs/types/Url.d.ts

@@ -0,0 +1,5 @@
+import { type TagType, type TypesElement } from '../store/Types';
+export declare const Url: {
+    (props: TypesElement<TagType>): null;
+    displayName: string;
+};

package/cjs/types/Url.js

@@ -0,0 +1,17 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Url = void 0;
+var _Types = require("../store/Types");
+var _useRender = require("../utils/useRender");
+var Url = function Url(props) {
+  var _useTypesStore = (0, _Types.useTypesStore)(),
+    _useTypesStore$Url = _useTypesStore.Url,
+    Comp = _useTypesStore$Url === void 0 ? {} : _useTypesStore$Url;
+  (0, _useRender.useTypesRender)(Comp, props, 'Url');
+  return null;
+};
+exports.Url = Url;
+Url.displayName = 'JVR.Url';

package/cjs/utils/useHighlight.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+export declare function usePrevious<T>(value: T): T | undefined;
+interface UseHighlight {
+    value: any;
+    highlightUpdates?: boolean;
+    highlightContainer: React.MutableRefObject<HTMLSpanElement | null>;
+}
+export declare function useHighlight({ value, highlightUpdates, highlightContainer }: UseHighlight): void;
+export {};

package/cjs/utils/useHighlight.js

@@ -0,0 +1,62 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault")["default"];
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useHighlight = useHighlight;
+exports.usePrevious = usePrevious;
+var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
+var _react = require("react");
+function usePrevious(value) {
+  var ref = (0, _react.useRef)();
+  (0, _react.useEffect)(function () {
+    ref.current = value;
+  });
+  return ref.current;
+}
+function useHighlight(_ref) {
+  var value = _ref.value,
+    highlightUpdates = _ref.highlightUpdates,
+    highlightContainer = _ref.highlightContainer;
+  var prevValue = usePrevious(value);
+  var isHighlight = (0, _react.useMemo)(function () {
+    if (!highlightUpdates || prevValue === undefined) return false;
+    // highlight if value type changed
+    if ((0, _typeof2["default"])(value) !== (0, _typeof2["default"])(prevValue)) {
+      return true;
+    }
+    if (typeof value === 'number') {
+      // notice: NaN !== NaN
+      if (isNaN(value) && isNaN(prevValue)) return false;
+      return value !== prevValue;
+    }
+    // highlight if isArray changed
+    if (Array.isArray(value) !== Array.isArray(prevValue)) {
+      return true;
+    }
+    // not highlight object/function
+    // deep compare they will be slow
+    if ((0, _typeof2["default"])(value) === 'object' || typeof value === 'function') {
+      return false;
+    }
+
+    // highlight if not equal
+    if (value !== prevValue) {
+      return true;
+    }
+    return false;
+  }, [highlightUpdates, value]);
+  (0, _react.useEffect)(function () {
+    if (highlightContainer && highlightContainer.current && isHighlight && 'animate' in highlightContainer.current) {
+      highlightContainer.current.animate([{
+        backgroundColor: 'var(--w-rjv-update-color, #ebcb8b)'
+      }, {
+        backgroundColor: ''
+      }], {
+        duration: 1000,
+        easing: 'ease-in'
+      });
+    }
+  }, [isHighlight, value, highlightContainer]);
+}

package/cjs/utils/useRender.d.ts

@@ -0,0 +1,6 @@
+import { type SymbolsElement } from '../store/Symbols';
+import { type TagType, type TypesElement } from '../store/Types';
+import { type SectionElement } from '../store/Section';
+export declare function useSymbolsRender(currentProps: SymbolsElement<TagType>, props: SymbolsElement<TagType>, key: string): void;
+export declare function useTypesRender<K extends TagType>(currentProps: TypesElement<TagType>, props: TypesElement<K>, key: string): void;
+export declare function useSectionRender<K extends TagType>(currentProps: SectionElement<TagType>, props: SectionElement<K>, key: string): void;

package/cjs/utils/useRender.js

@@ -0,0 +1,51 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault")["default"];
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useSectionRender = useSectionRender;
+exports.useSymbolsRender = useSymbolsRender;
+exports.useTypesRender = useTypesRender;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
+var _react = require("react");
+var _Symbols = require("../store/Symbols");
+var _Types = require("../store/Types");
+var _Section = require("../store/Section");
+function useSymbolsRender(currentProps, props, key) {
+  var dispatch = (0, _Symbols.useSymbolsDispatch)();
+  var cls = [currentProps.className, props.className].filter(Boolean).join(' ');
+  var reset = (0, _objectSpread2["default"])((0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, currentProps), props), {}, {
+    className: cls,
+    style: (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, currentProps.style), props.style),
+    children: props.children || currentProps.children
+  });
+  (0, _react.useEffect)(function () {
+    return dispatch((0, _defineProperty2["default"])({}, key, reset));
+  }, [props]);
+}
+function useTypesRender(currentProps, props, key) {
+  var dispatch = (0, _Types.useTypesDispatch)();
+  var cls = [currentProps.className, props.className].filter(Boolean).join(' ');
+  var reset = (0, _objectSpread2["default"])((0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, currentProps), props), {}, {
+    className: cls,
+    style: (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, currentProps.style), props.style),
+    children: props.children || currentProps.children
+  });
+  (0, _react.useEffect)(function () {
+    return dispatch((0, _defineProperty2["default"])({}, key, reset));
+  }, [props]);
+}
+function useSectionRender(currentProps, props, key) {
+  var dispatch = (0, _Section.useSectionDispatch)();
+  var cls = [currentProps.className, props.className].filter(Boolean).join(' ');
+  var reset = (0, _objectSpread2["default"])((0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, currentProps), props), {}, {
+    className: cls,
+    style: (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, currentProps.style), props.style),
+    children: props.children || currentProps.children
+  });
+  (0, _react.useEffect)(function () {
+    return dispatch((0, _defineProperty2["default"])({}, key, reset));
+  }, [props]);
+}

package/esm/Container.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+export interface ContainerProps<T extends object> extends React.HTMLAttributes<HTMLDivElement> {
+    keyName?: string | number;
+    keyid?: string;
+    parentValue?: T;
+    level?: number;
+    value?: T;
+    initialValue?: T;
+}
+export declare const Container: React.ForwardRefExoticComponent<ContainerProps<object> & React.RefAttributes<HTMLDivElement>>;

package/esm/Container.js

@@ -0,0 +1,53 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
+var _excluded = ["className", "children", "parentValue", "keyid", "level", "value", "initialValue", "keyName"];
+import React, { forwardRef, useId, useImperativeHandle, useRef } from 'react';
+import { NestedClose } from './comps/NestedClose';
+import { NestedOpen } from './comps/NestedOpen';
+import { KeyValues } from './comps/KeyValues';
+import { useShowToolsDispatch } from './store/ShowTools';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+export var Container = /*#__PURE__*/forwardRef((props, ref) => {
+  var {
+      className = '',
+      level = 1,
+      value,
+      initialValue,
+      keyName
+    } = props,
+    elmProps = _objectWithoutPropertiesLoose(props, _excluded);
+  var $ref = useRef(null);
+  var dispatch = useShowToolsDispatch();
+  useImperativeHandle(ref, () => $ref.current, [$ref]);
+  var subkeyid = useId();
+  var defaultClassNames = "w-rjv-inner " + className;
+  var reset = {
+    onMouseEnter: () => dispatch({
+      [subkeyid]: true
+    }),
+    onMouseLeave: () => dispatch({
+      [subkeyid]: false
+    })
+  };
+  return /*#__PURE__*/_jsxs("div", _extends({
+    className: defaultClassNames
+  }, elmProps, reset, {
+    children: [/*#__PURE__*/_jsx(NestedOpen, {
+      expandKey: subkeyid,
+      value: value,
+      level: level,
+      keyName: keyName,
+      initialValue: initialValue
+    }), /*#__PURE__*/_jsx(KeyValues, {
+      expandKey: subkeyid,
+      value: value,
+      level: level
+    }), /*#__PURE__*/_jsx(NestedClose, {
+      expandKey: subkeyid,
+      value: value,
+      level: level
+    })]
+  }));
+});
+Container.displayName = 'JVR.Container';

package/esm/arrow/TriangleArrow.js

@@ -11,7 +11,9 @@ export function TriangleArrow(props) {
   var defaultStyle = _extends({
     cursor: 'pointer',
     height: '1em',
-    width: '1em'
+    width: '1em',
+    userSelect: 'none',
+    display: 'flex'
   }, style);
   return /*#__PURE__*/_jsx("svg", _extends({
     viewBox: "0 0 24 24",

package/esm/arrow/TriangleSolidArrow.js

@@ -11,15 +11,19 @@ export function TriangleSolidArrow(props) {
   var defaultStyle = _extends({
     cursor: 'pointer',
     height: '1em',
-    width: '1em'
+    width: '1em',
+    userSelect: 'none',
+    display: 'flex'
   }, style);
   return /*#__PURE__*/_jsx("svg", _extends({
-    viewBox: "0 0 15 15",
+    viewBox: "0 0 30 30",
     fill: "var(--w-rjv-arrow-color, currentColor)",
+    height: "1em",
+    width: "1em",
     style: defaultStyle
   }, reset, {
     children: /*#__PURE__*/_jsx("path", {
-      d: "M0 5l6 6 6-6z"
+      d: "M14.1758636,22.5690012 C14.3620957,22.8394807 14.6694712,23.001033 14.9978636,23.001033 C15.326256,23.001033 15.6336315,22.8394807 15.8198636,22.5690012 L24.8198636,9.56900125 C25.0322035,9.2633716 25.0570548,8.86504616 24.8843497,8.5353938 C24.7116447,8.20574144 24.3700159,7.99941506 23.9978636,8 L5.9978636,8 C5.62665,8.00153457 5.28670307,8.20817107 5.11443241,8.53699428 C4.94216175,8.86581748 4.96580065,9.26293681 5.1758636,9.56900125 L14.1758636,22.5690012 Z"
     })
   }));
 }

package/esm/comps/Copied.d.ts

@@ -0,0 +1,16 @@
+/// <reference types="react" />
+import { type TagType } from '../store/Types';
+export type CopiedOption<T extends object> = {
+    value?: T;
+    copied: boolean;
+    setCopied: React.Dispatch<React.SetStateAction<boolean>>;
+};
+export interface CopiedProps<T extends object> extends React.SVGProps<SVGSVGElement> {
+    value?: T;
+    keyName: string | number;
+    expandKey: string;
+}
+export declare const Copied: {
+    <T extends object, K extends TagType>(props: CopiedProps<T>): string | number | true | Iterable<import("react").ReactNode> | import("react/jsx-runtime").JSX.Element | null;
+    displayName: string;
+};