goblin-magic 1.0.3 → 1.0.7

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "goblin-magic",
-  "version": "1.0.3",
+  "version": "1.0.7",
   "description": "goblin-magic",
   "author": "",
   "license": "MIT",
@@ -30,7 +30,7 @@
     "react": "^17.0.1",
     "react-dom": "^17.0.1",
     "react-splitter-layout": "^4.0.0",
-    "xcraft-core-converters": "^4.5.0",
+    "xcraft-core-converters": "^4.6.0",
     "xcraft-core-utils": "^4.14.2",
     "xcraft-dev-fontawesome": "^0.1.2",
     "xcraft-dev-prettier": "^2.0.0",

package/widgets/magic-color-field/widget.js

@@ -15,7 +15,7 @@ class MagicColorFieldButtonNC extends Widget {
   }
 
   render() {
-    const {value, onChange, className = '', ...props} = this.props;
+    const {value, onChange, disabled, className = '', ...props} = this.props;
 
     return (
       <MagicButton disabled>
@@ -31,6 +31,7 @@ class MagicColorFieldButtonNC extends Widget {
             type="color"
             value={value || ''}
             onChange={(event) => onChange?.(event.target.value)}
+            disabled={disabled}
           />
         </label>
       </MagicButton>
@@ -50,14 +51,19 @@ class MagicColorFieldNC extends Widget {
   }
 
   render() {
-    const {className = '', ...props} = this.props;
+    const {className = '', disabled, ...props} = this.props;
     return (
       <InputGroup>
         <MagicTextField
           {...props}
           className={this.styles.classNames.colorField + ' ' + className}
+          disabled={disabled}
+        />
+        <MagicColorFieldButton
+          value={props.value}
+          onChange={props.onChange}
+          disabled={disabled}
         />
-        <MagicColorFieldButton value={props.value} onChange={props.onChange} />
       </InputGroup>
     );
   }

package/widgets/magic-datetime-field/widget.js

@@ -8,7 +8,7 @@ import {
   nowZonedDateTimeISO,
   parseZonedDateTime,
   zonedDateTimeFromParts,
-} from 'xcraft-core-utils/lib/calendar.js';
+} from 'xcraft-core-converters/lib/calendar.js';
 
 class MagicDatetimeFieldNC extends Widget {
   constructor() {

package/widgets/magic-table/styles.js

@@ -96,6 +96,10 @@ export default function styles() {
         backgroundColor:
           'color-mix(in srgb, var(--accent-color), transparent 90%)',
       },
+      ':active > *:not(dialog)': {
+        backgroundColor:
+          'color-mix(in srgb, var(--accent-color), transparent 85%)',
+      },
     },
 
     '& > :first-child:last-child': {

package/widgets/magic-table/widget.js

@@ -1,6 +1,6 @@
 import * as styles from './styles.js';
 import React from 'react';
-import debounce from 'lodash/debounce.js';
+import throttle from 'lodash/throttle.js';
 import Widget from 'goblin-laboratory/widgets/widget';
 import withC from 'goblin-laboratory/widgets/connect-helpers/with-c';
 import {faSquare, faCheckSquare} from '@fortawesome/free-regular-svg-icons';
@@ -348,7 +348,7 @@ let MagicTable = class extends Widget {
         columns: this.props.columns,
       });
     }
-    this.onUpdate = debounce(this.onUpdate, 1000);
+    this.onUpdate = throttle(this.onUpdate, 500);
   }
 
   componentDidUpdate() {

package/widgets/magic-zen/widget.js

@@ -17,7 +17,10 @@ export default class MagicZen extends Widget {
       return this.props.children;
     }
 
-    const {className = ''} = this.props;
+    const {
+      className = '',
+      background: Background = MagicBackground,
+    } = this.props;
 
     return createPortal(
       <Dialog
@@ -26,7 +29,7 @@ export default class MagicZen extends Widget {
         open
         onClose={this.props.onClose}
       >
-        <MagicBackground>
+        <Background>
           <div className={this.styles.classNames.notice}>
             Appuyez sur <span className={this.styles.classNames.key}>ESC</span>{' '}
             pour quitter le mode zen
@@ -34,7 +37,7 @@ export default class MagicZen extends Widget {
           <MagicDiv className={this.styles.classNames.zen + ' ' + className}>
             {this.props.children}
           </MagicDiv>
-        </MagicBackground>
+        </Background>
       </Dialog>,
       document.getElementById('root')
     );