@nubitio/react-admin 0.5.26 → 0.5.27

package/dist/style.css

@@ -3655,10 +3655,10 @@ html[data-density=compact] .nb-drawer__footer {
   outline: 0;
   transition: background var(--transition-fast), box-shadow var(--transition-fast);
 }
-.nb-datagrid--zebra .nb-datagrid__row:nth-child(even) td {
+.nb-datagrid--zebra .nb-datagrid__row:nth-child(even) td:not(.nb-datagrid__cell--dirty):not(.nb-datagrid__cell--active) {
   background: var(--grid-row-alt-bg);
 }
-.nb-datagrid__row:hover td {
+.nb-datagrid__row:hover td:not(.nb-datagrid__cell--dirty):not(.nb-datagrid__cell--active):not(.nb-datagrid__edit-cell) {
   background: var(--grid-row-hover-bg, var(--surface-2));
 }
 .nb-datagrid__row:focus-visible {
@@ -4953,10 +4953,11 @@ html[data-density=compact] .nb-datagrid .nb-badge {
   }
 }
 .nb-datagrid__row--editing {
-  background: color-mix(in srgb, var(--accent) 6%, var(--surface-0));
+  background: color-mix(in srgb, var(--accent-color, var(--accent)) 5%, var(--surface-0));
 }
-.nb-datagrid__row--editing td {
-  cursor: default;
+
+.nb-datagrid__row--dirty .nb-datagrid__cell--dirty {
+  background: color-mix(in srgb, #4caf50 34%, var(--surface-1, #fff));
 }
 
 .nb-datagrid__row--saving {
@@ -4964,42 +4965,142 @@ html[data-density=compact] .nb-datagrid .nb-badge {
   pointer-events: none;
 }
 
+.nb-datagrid__data-cell {
+  cursor: default;
+}
+
+.nb-datagrid__cell--editable {
+  cursor: cell;
+}
+.nb-datagrid__cell--editable:hover:not(.nb-datagrid__cell--dirty):not(.nb-datagrid__cell--active) {
+  background: color-mix(in srgb, var(--accent) 4%, var(--surface-0));
+}
+
+.nb-datagrid__table td.nb-datagrid__cell--dirty {
+  background: color-mix(in srgb, #4caf50 34%, var(--surface-1, #fff));
+  box-shadow: inset 0 0 0 1px color-mix(in srgb, #4caf50 72%, transparent);
+}
+
+.nb-datagrid--zebra .nb-datagrid__row:nth-child(even) td.nb-datagrid__cell--dirty,
+.nb-datagrid__row:hover td.nb-datagrid__cell--dirty,
+.nb-datagrid__row--selected td.nb-datagrid__cell--dirty {
+  background: color-mix(in srgb, #4caf50 34%, var(--surface-1, #fff));
+  box-shadow: inset 0 0 0 1px color-mix(in srgb, #4caf50 72%, transparent);
+}
+
+.nb-datagrid__table td.nb-datagrid__cell--active {
+  background: color-mix(in srgb, #4caf50 42%, var(--surface-1, #fff));
+  box-shadow: inset 0 0 0 2px color-mix(in srgb, #4caf50 78%, transparent);
+}
+
+.nb-datagrid--zebra .nb-datagrid__row:nth-child(even) td.nb-datagrid__cell--active,
+.nb-datagrid__row:hover td.nb-datagrid__cell--active,
+.nb-datagrid__row--selected td.nb-datagrid__cell--active {
+  background: color-mix(in srgb, #4caf50 42%, var(--surface-1, #fff));
+  box-shadow: inset 0 0 0 2px color-mix(in srgb, #4caf50 78%, transparent);
+}
+
 .nb-datagrid__edit-cell {
-  padding: 3px 4px;
+  padding: 2px 4px;
   vertical-align: middle;
 }
 
 .nb-inline-cell {
   width: 100%;
+  min-width: 0;
 }
 .nb-inline-cell .nb-inline-control,
 .nb-inline-cell .nb-inline-control input,
 .nb-inline-cell .nb-inline-control select,
-.nb-inline-cell .nb-inline-control textarea {
+.nb-inline-cell .nb-inline-control textarea,
+.nb-inline-cell .nb-form__control,
+.nb-inline-cell .nb-form__control input,
+.nb-inline-cell .nb-form__control select,
+.nb-inline-cell .nb-form__control textarea {
   font-size: 13px;
-  height: 30px;
-  min-height: 30px;
-  padding: 0 6px;
+  line-height: 1.3;
+  height: 28px;
+  min-height: 28px;
+  padding: 0 8px;
+  border: 1px solid color-mix(in srgb, var(--border-color) 85%, var(--accent));
   border-radius: var(--radius-sm);
   box-sizing: border-box;
   width: 100%;
+  background: var(--surface-0);
+  color: var(--text-primary);
+  box-shadow: none;
+  transition: border-color 0.12s, box-shadow 0.12s;
+}
+.nb-inline-cell .nb-inline-control:focus,
+.nb-inline-cell .nb-inline-control input:focus,
+.nb-inline-cell .nb-inline-control select:focus,
+.nb-inline-cell .nb-inline-control textarea:focus,
+.nb-inline-cell .nb-form__control:focus,
+.nb-inline-cell .nb-form__control input:focus,
+.nb-inline-cell .nb-form__control select:focus,
+.nb-inline-cell .nb-form__control textarea:focus {
+  outline: none;
+  border-color: var(--accent);
+  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 22%, transparent);
 }
-.nb-inline-cell .nb-inline-control textarea {
-  height: 56px;
-  padding: 4px 6px;
-  resize: none;
+.nb-datagrid__cell--dirty .nb-inline-cell .nb-inline-control:focus, .nb-datagrid__cell--active .nb-inline-cell .nb-inline-control:focus, .nb-datagrid__cell--dirty .nb-inline-cell .nb-form__control:focus, .nb-datagrid__cell--active .nb-inline-cell .nb-form__control:focus {
+  border-color: color-mix(in srgb, #4caf50 70%, var(--accent-color, var(--accent)));
+  box-shadow: 0 0 0 2px color-mix(in srgb, #4caf50 28%, transparent);
+}
+.nb-inline-cell .nb-inline-control textarea,
+.nb-inline-cell .nb-form__control textarea {
+  height: 52px;
+  padding: 4px 8px;
+  resize: vertical;
 }
 .nb-inline-cell .nb-form-switch,
 .nb-inline-cell .nb-form-checkbox {
   margin: 0;
 }
-.nb-inline-cell .nb-lookup__trigger {
-  height: 30px;
+.nb-inline-cell .nb-dropdown {
+  width: 100%;
+}
+.nb-inline-cell .nb-dropdown__trigger {
+  height: 28px;
+  min-height: 28px;
+  font-size: 13px;
+  padding: 0 8px;
+  border-radius: var(--radius-sm);
+}
+.nb-inline-cell .nb-date-picker {
+  width: 100%;
+}
+.nb-inline-cell .nb-date-picker__trigger {
+  height: 28px;
+  min-height: 28px;
+  border-radius: var(--radius-sm);
+  border: 1px solid color-mix(in srgb, var(--border-color) 85%, var(--accent));
+  background: var(--surface-0);
+}
+.nb-inline-cell .nb-date-picker__input {
+  font-size: 13px;
+  padding: 0 4px;
+}
+.nb-inline-cell .nb-form__lookup {
+  width: 100%;
+}
+.nb-inline-cell .nb-form__lookup .nb-form__control,
+.nb-inline-cell .nb-form__lookup.has-value .nb-form__control {
+  height: 28px;
+  min-height: 28px;
   font-size: 13px;
+  padding-right: 52px;
+}
+.nb-inline-cell .nb-form__lookup-toggle,
+.nb-inline-cell .nb-form__lookup-clear {
+  width: 24px;
+  height: 24px;
 }
 .nb-inline-cell.nb-inline-cell--error .nb-inline-control,
 .nb-inline-cell.nb-inline-cell--error .nb-inline-control input,
-.nb-inline-cell.nb-inline-cell--error .nb-inline-control select {
+.nb-inline-cell.nb-inline-cell--error .nb-inline-control select,
+.nb-inline-cell.nb-inline-cell--error .nb-form__control,
+.nb-inline-cell.nb-inline-cell--error .nb-date-picker__trigger {
   border-color: var(--color-danger);
 }
 
@@ -5043,15 +5144,33 @@ html[data-density=compact] .nb-datagrid .nb-badge {
   color: var(--text-primary);
 }
 
+.nb-datagrid__toolbar-icon-action--save {
+  color: var(--accent);
+}
+.nb-datagrid__toolbar-icon-action--save:hover {
+  background: color-mix(in srgb, var(--accent) 12%, transparent);
+}
+
+.nb-datagrid__toolbar-icon-action--revert {
+  color: var(--text-secondary);
+}
+.nb-datagrid__toolbar-icon-action--revert:hover {
+  background: var(--surface-2);
+  color: var(--text-primary);
+}
+
 .nb-datagrid__batch-bar {
   display: flex;
   align-items: center;
   gap: var(--space-3);
   padding: 8px 14px;
-  background: color-mix(in srgb, var(--accent) 10%, var(--surface-0));
-  border-bottom: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
+  background: color-mix(in srgb, #4caf50 10%, var(--surface-0));
+  border-bottom: 1px solid color-mix(in srgb, #4caf50 24%, transparent);
   font-size: 13px;
 }
+.nb-datagrid__batch-bar--compact {
+  padding-block: 6px;
+}
 
 .nb-datagrid__batch-bar-label {
   flex: 1;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nubitio/react-admin",
-  "version": "0.5.26",
+  "version": "0.5.27",
   "type": "module",
   "description": "Batteries-included admin stack: core runtime, CRUD, Hydra adapter, and AdminShell.",
   "license": "MIT",
@@ -50,12 +50,12 @@
     "access": "public"
   },
   "dependencies": {
-    "@nubitio/admin": "^0.5.26",
-    "@nubitio/core": "^0.5.26",
-    "@nubitio/hydra": "^0.5.26",
-    "@nubitio/crud": "^0.5.26",
-    "@nubitio/dashboard": "^0.5.26",
-    "@nubitio/ui": "^0.5.26"
+    "@nubitio/admin": "^0.5.27",
+    "@nubitio/core": "^0.5.27",
+    "@nubitio/crud": "^0.5.27",
+    "@nubitio/ui": "^0.5.27",
+    "@nubitio/hydra": "^0.5.27",
+    "@nubitio/dashboard": "^0.5.27"
   },
   "peerDependencies": {
     "@tanstack/react-query": "^5.0.0",