json-edit-react 1.30.2 → 2.0.0-beta.1

package/build/style.css

@@ -0,0 +1,500 @@
+:root,
+:host {
+  --jer-select-border: #b6b6b6;
+  --jer-select-focus: #777;
+  --jer-select-arrow: #777;
+  --jer-form-border: 1px solid #ededf0;
+  --jer-form-border-focus: 1px solid #e2e2e2;
+  /* The selection-highlight and copy-pulse colours mirror the default theme, so
+     these static rules degrade to sensible colours when a theme doesn't supply
+     the matching variable inline on the container — e.g. a dynamic `iconCopy`
+     style function, which can't collapse to one container-level value. */
+  --jer-highlight-color: #b3d8ff;
+  --jer-icon-copy-color: #268bd2;
+}
+
+.jer-visible {
+  opacity: 1;
+}
+
+.jer-hidden {
+  opacity: 0;
+}
+
+/* Select styled as per:
+https://moderncss.dev/custom-select-styles-with-pure-css/
+*/
+
+.jer-select select {
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+  background-color: transparent;
+  border: none;
+  padding: 0 1em 0 0;
+  margin: 0;
+  /* width: 100%; */
+  font-family: inherit;
+  font-size: 0.8em;
+  color: black;
+  cursor: inherit;
+  line-height: inherit;
+  z-index: 1;
+  outline: none;
+}
+select::-ms-expand {
+  display: none;
+}
+
+.jer-select {
+  display: grid;
+  grid-template-areas: 'select';
+  align-items: center;
+  position: relative;
+  min-width: 12ch;
+  max-width: 15ch;
+  border: 1px solid var(--jer-select-border);
+  border-radius: 0.25em;
+  padding: 0.25em 0.5em;
+  cursor: pointer;
+  line-height: 1.1;
+  background-color: #fff;
+  background-image: linear-gradient(to top, #f9f9f9, #fff 33%);
+}
+.jer-select select,
+.jer-select::after {
+  grid-area: select;
+}
+.jer-select:not(.jer-select--multiple)::after {
+  content: '';
+  justify-self: end;
+  width: 0.8em;
+  height: 0.5em;
+  background-color: var(--jer-select-arrow);
+  clip-path: polygon(100% 0%, 0 0%, 50% 100%);
+}
+
+select:focus + .focus {
+  position: absolute;
+  top: -1px;
+  left: -1px;
+  right: -1px;
+  bottom: -1px;
+  border: 1px solid var(--jer-select-focus);
+  border-radius: inherit;
+}
+
+.jer-select-inner {
+  width: 100%;
+  text-overflow: ellipsis;
+}
+
+.jer-editor-container {
+  position: relative;
+  font-size: 16px;
+  line-height: 1;
+  padding: 1em;
+  padding-left: 2em;
+  /* margin-top: 1em; */
+  /* margin-bottom: 1em; */
+  border-radius: 0.5em;
+  text-align: left;
+  /* border: 1px solid green; */
+}
+
+.jer-editor-container textarea {
+  color: var(--jer-input-color);
+  border: var(--jer-form-border);
+  border-radius: 0.3em;
+  outline: none;
+}
+
+.jer-editor-container textarea:focus {
+  border: var(--jer-form-border-focus);
+}
+
+.jer-editor-container input {
+  border: var(--jer-form-border);
+  border-radius: 0.3em;
+  outline: none;
+  font-family: inherit;
+}
+
+.jer-editor-container input:focus {
+  border: var(--jer-form-border-focus);
+}
+
+/* Input highlighted text */
+.jer-editor-container ::selection {
+  background-color: var(--jer-highlight-color);
+}
+
+/* .jer-editor-container select {
+  color: red;
+} */
+
+/* .jer-component {
+} */
+
+/* .jer-collection-element {
+  min-height: 1.7em;
+} */
+
+.jer-collection-header-row,
+.jer-value-main-row {
+  display: flex;
+  min-height: 1.7em;
+  gap: 0.3em;
+  align-items: center;
+}
+
+.jer-collection-header-row {
+  flex-wrap: wrap;
+}
+
+.jer-value-main-row {
+  gap: 0;
+}
+
+/* .jer-brackets {
+} */
+
+/* The closing bracket sits at the same column as the opening line (the key),
+   matching how JSON pretty-printers align a close bracket under the start of
+   the line that opened it. Its container shares the header row's left edge, so
+   no offset is needed — and the alignment is deliberately independent of
+   `indent`. */
+.jer-bracket-outside {
+  padding-left: 0;
+}
+
+/* Hidden by `display: none` (not `opacity: 0` alone) so a hidden count
+   collapses its flex gap and leaves no space between the brackets. The
+   `allow-discrete` transition-behavior is set inline alongside the transition
+   (so the `all` transition includes `display`), and `@starting-style` below
+   gives the fade-in a frame to animate from — together they fade the count
+   in/out on collapse instead of popping. `jer-visible`/`jer-hidden` (shared,
+   opacity-only) drive the fade; this class only toggles `display`. */
+.jer-collection-item-count {
+  display: none;
+}
+
+.jer-collection-item-count.jer-visible {
+  display: block;
+}
+
+@starting-style {
+  .jer-collection-item-count.jer-visible {
+    opacity: 0;
+  }
+}
+
+.jer-collapse-icon {
+  position: absolute;
+  left: -1.2em;
+  /* Centre vertically on the row (its positioning context) independent of row
+     height: top:50% is mid-row, translateY(-50%) pulls back by half the icon's
+     own height. Survives row min-height and per-theme icon-scale changes. */
+  top: 50%;
+  transform: translateY(-50%);
+}
+
+/* The collapse animation rotates the icon via `.jer-rotate-90`, which sets the
+   same `transform` property, so the centring translate is re-stated here or
+   it'd be lost when collapsed. The icon box is square → translate + rotate
+   compose cleanly. */
+.jer-collapse-icon.jer-rotate-90 {
+  transform: translateY(-50%) rotate(-90deg);
+}
+
+.jer-collection-inner {
+  position: relative;
+}
+
+.jer-collection-text-edit,
+.jer-collection-text-edit-custom {
+  display: flex;
+  flex-direction: column;
+  gap: 0.3em;
+  align-items: flex-start;
+  line-height: 1.1em;
+}
+
+/* Default <textarea> only: Keep OK/Cancel buttons bound by the text area width
+*/
+.jer-collection-text-edit {
+  width: fit-content;
+}
+
+.jer-collection-text-area {
+  /* `box-sizing` and `line-height` are pinned (not just inherited) so the
+     AutogrowTextArea's real <textarea> and its hidden measuring <span> can't
+     drift apart when a host rule targets `textarea`/`input` or applies a global
+     `* { box-sizing: border-box }` reset. content-box is the model the sizing
+     was designed against, so consumers without a reset see no change. */
+  box-sizing: content-box;
+  resize: both;
+  padding-top: 0.2em;
+  padding-left: 0.5em;
+  padding-right: 0.5em;
+  padding-bottom: 0;
+  overflow: hidden;
+  max-height: 40em;
+  line-height: 1.25em;
+  font-family: inherit;
+  font-size: 0.85em;
+}
+
+.jer-collection-input-button-row {
+  display: flex;
+  justify-content: flex-end;
+  width: 100%;
+  font-size: 150%;
+  margin-top: 0.4em;
+}
+
+/* .jer-collection-error-row {
+} */
+
+.jer-collection-error-row-edit {
+  position: absolute;
+  bottom: 0.5em;
+}
+
+.jer-error-slug {
+  margin-left: 1em;
+}
+
+.jer-value-component {
+  position: relative;
+}
+
+.jer-value-and-buttons {
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+  padding-left: 0.5em;
+}
+
+.jer-value-error-row {
+  position: absolute;
+}
+
+.jer-value-string {
+  line-height: 1.3em;
+  white-space: pre-wrap;
+  overflow-wrap: anywhere;
+  word-break: break-word;
+}
+
+.jer-string-expansion {
+  cursor: pointer;
+  opacity: 0.6;
+  filter: saturate(50%);
+}
+
+.jer-show-less {
+  font-size: 80%;
+}
+
+.jer-hyperlink {
+  text-decoration: underline;
+}
+
+.jer-input-text {
+  /* See `.jer-collection-text-area` — pinned so the autogrow <textarea> and its
+     measuring <span> stay in sync under a host CSS reset. */
+  box-sizing: content-box;
+  resize: none;
+  margin: 0;
+  height: 1.4em;
+  padding-left: 0.5em;
+  padding-right: 0.5em;
+  padding-top: 0.25em;
+  padding-bottom: 0.2em;
+  min-width: 6em;
+  overflow: hidden;
+  line-height: 1.2em;
+  font-family: inherit;
+  font-size: 0.9em;
+}
+
+/* .jer-value-number {
+} */
+
+/* .jer-value-boolean {
+} */
+
+.jer-input-boolean {
+  transform: scale(1.5);
+  margin-left: 0.3em;
+  margin-right: 0.3em;
+}
+
+/* .jer-value-null {
+} */
+
+/* .jer-value-object {
+} */
+
+.jer-key-text {
+  word-break: break-word;
+  line-height: 1.1em;
+  white-space: pre-wrap;
+}
+
+.jer-key-edit {
+  padding: 0 0.3em;
+  font-size: inherit;
+  font-size: 0.9em;
+}
+
+/* .jer-value-array {
+} */
+
+.jer-value-invalid {
+  opacity: 0.5;
+  font-style: italic;
+}
+
+.jer-input-number {
+  min-width: 3em;
+  font-size: 90%;
+}
+
+/* .jer-input-component {
+} */
+
+.jer-edit-buttons,
+.jer-confirm-buttons {
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+  height: 1em;
+  margin-right: 0.2em;
+}
+
+/* The icon controls are real <button>s for accessibility. This neutralises the
+   user-agent button chrome so they render identically to surrounding elements.
+   Only properties a <button> won't otherwise take from context are listed:
+   background/border/margin/padding/appearance don't inherit, and form controls
+   are UA-special-cased so `font`/`color` must be re-asserted (`font: inherit`
+   is load-bearing — the icons are sized in `em`). `cursor` inherits from the
+   wrapper rule above, whose flexbox also centres the button, so neither is
+   needed here. Scoped with `>` so it never leaks into custom-button content. */
+.jer-edit-buttons > button,
+.jer-confirm-buttons > button {
+  appearance: none;
+  background: none;
+  border: none;
+  margin: 0;
+  padding: 0;
+  font: inherit;
+  color: inherit;
+}
+
+.jer-input-buttons {
+  gap: 0.4em;
+}
+
+.jer-edit-buttons {
+  gap: 0.4em;
+  margin-left: 0.5em;
+  opacity: 0;
+}
+
+.jer-confirm-buttons {
+  gap: 0.2em;
+  margin-left: 0.4em;
+}
+
+.jer-edit-buttons:hover {
+  opacity: 1;
+  position: relative;
+}
+
+.jer-collection-header-row:hover > .jer-edit-buttons {
+  opacity: 1;
+}
+
+.jer-value-main-row:hover > .jer-edit-buttons {
+  opacity: 1;
+}
+
+.jer-value-and-buttons:hover > .jer-edit-buttons {
+  opacity: 1;
+}
+
+/* .jer-input-buttons {
+} */
+
+.jer-copy-pulse {
+  position: relative;
+  transition: 0.3s;
+}
+
+.jer-copy-pulse:hover {
+  opacity: 0.85;
+  transition: 0.3s;
+  transform: scale(1.2);
+}
+
+.jer-copy-pulse:after {
+  content: '';
+  display: block;
+  position: absolute;
+  border-radius: 50%;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  opacity: 0;
+  transition: all 0.5s;
+  box-shadow: 0 0 15px 5px var(--jer-icon-copy-color);
+}
+
+.jer-copy-pulse:active:after {
+  box-shadow: 0 0 0 0 var(--jer-icon-copy-color);
+  position: absolute;
+  border-radius: 4em;
+  left: 0;
+  top: 0;
+  opacity: 1;
+  transition: 0s;
+}
+
+.jer-copy-pulse:active {
+  top: 0.07em;
+}
+
+.jer-accordion-icon {
+  /* font-size: '2em'; */
+}
+
+.jer-icon:hover {
+  opacity: 0.85;
+  transition: 0.3s;
+  transform: scale(1.2);
+}
+
+/* For displaying keys that are purely <empty string> "" */
+.jer-empty-string {
+  font-style: italic;
+  font-size: 90%;
+}
+
+.jer-drag-n-drop-padding {
+  height: 0.5em;
+  border: 1px dashed #b4b4b4;
+  border-radius: 0.3em;
+}
+
+/* Region to left of Collection node contents that is clickable to
+collapse/expand node*/
+.jer-clickzone {
+  position: absolute;
+  left: -1em;
+  top: 1.2em;
+  /* border: 1px solid red; */
+  height: calc(100% - 0.8em);
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "json-edit-react",
-  "version": "1.30.2",
+  "version": "2.0.0-beta.1",
   "description": "React component for editing or viewing JSON/object data",
   "main": "build/index.cjs.js",
   "module": "build/index.esm.js",
@@ -12,7 +12,8 @@
       "import": "./build/index.esm.js",
       "require": "./build/index.cjs.js",
       "default": "./build/index.esm.js"
-    }
+    },
+    "./style.css": "./build/style.css"
   },
   "files": [
     "build/**/*"
@@ -21,57 +22,8 @@
   "author": "Carl Smith <5456533+CarlosNZ@users.noreply.github.com>",
   "license": "MIT",
   "homepage": "https://carlosnz.github.io/json-edit-react",
-  "scripts": {
-    "setup": "yarn install && cd demo && yarn install",
-    "test": "jest",
-    "dev": "cd demo && yarn && yarn dev",
-    "demo": "cd demo && yarn && yarn start",
-    "demo:package": "yarn build-package && cd demo && yarn && yarn start:package",
-    "prebuild": "yarn lint",
-    "build": "rollup -c && rm -R build/dts",
-    "postbuild": "node ./scripts/cleanBuildTypes.cjs",
-    "build-package": "yarn build && yarn pack --filename package.tgz && tar -xzf package.tgz && mv package build_package && rm package.tgz",
-    "lint": "eslint",
-    "prepareReadme": "python3 scripts/build_npm_readme.py",
-    "prepublishOnly": "yarn build && yarn prepareReadme && python3 scripts/use_npm_readme.py prepare",
-    "postpublish": "python3 scripts/use_npm_readme.py restore && node scripts/installLatestPackage.mjs pause &",
-    "compile": "tsc --noEmit && ts-prune",
-    "release": "yarn publish",
-    "release-demo": "cd demo && yarn deploy"
-  },
   "peerDependencies": {
-    "react": ">=16.0.0"
-  },
-  "dependencies": {},
-  "devDependencies": {
-    "@eslint/js": "^9.24.0",
-    "@rollup/plugin-node-resolve": "^16.0.0",
-    "@rollup/plugin-terser": "^0.4.4",
-    "@rollup/plugin-typescript": "^11.1.6",
-    "@types/jest": "^29.5.14",
-    "@types/node": "^20.11.17",
-    "@types/react": ">=16.0.0",
-    "eslint": "^9.24.0",
-    "eslint-plugin-react": "^7.37.5",
-    "eslint-plugin-react-hooks": "^5.2.0",
-    "fs-extra": "^11.2.0",
-    "globals": "^16.0.0",
-    "jest": "^29.7.0",
-    "react": "^19.1.0",
-    "react-dom": "^19.1.0",
-    "rollup": "^4.10.0",
-    "rollup-plugin-bundle-size": "^1.0.3",
-    "rollup-plugin-delete": "^3.0.1",
-    "rollup-plugin-dts": "^6.1.0",
-    "rollup-plugin-peer-deps-external": "^2.2.4",
-    "rollup-plugin-sizes": "^1.0.6",
-    "rollup-plugin-styles": "^4.0.0",
-    "ts-jest": "^29.2.5",
-    "ts-node": "^10.9.2",
-    "ts-prune": "^0.10.3",
-    "tslib": "^2.6.2",
-    "typescript": "^5.3.3",
-    "typescript-eslint": "^8.29.1"
+    "react": ">=18.0.0"
   },
   "keywords": [
     "react",
@@ -100,4 +52,4 @@
     "treeview",
     "react-json-view"
   ]
-}
+}