@startlibs/form 1.1.1 → 1.1.3

package/lib/useDraftConfirmation.mjs

@@ -40,7 +40,7 @@ const useDraftConfirmation = (submit, discard, meta) => {
   const Dialog = startlibs.dialogs[dialog.isOpen];
   if (process.env.NODE_ENV !== 'production') {
     if (dialog.isOpen && !Dialog) {
-      console.log("Dialog [".concat(dialogType, "] not registered in startlibs.dialogs"));
+      console.log("Dialog [".concat(dialog.isOpen, "] not registered in startlibs.dialogs"));
     }
   }
   const feedback = dialog.isOpen ? /*#__PURE__*/React.createElement(Dialog, _extends({

package/lib/useDraftConfirmation.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"useDraftConfirmation.mjs","sources":["../src/useDraftConfirmation.jsx"],"sourcesContent":["import React, {useContext} from 'react'\nimport {useToggle, useRefToggle, StartlibsContext, useRefState} from '@startlibs/core'\nimport {callIfFunction} from '@startlibs/utils'\n\nexport const useDraftConfirmation = (submit, discard, meta) => {\n  const loading = useToggle()\n  const dialog = useToggle()\n  const draft = useRefToggle()\n  const promiseResolver = useRefState()\n  const startlibs = useContext(StartlibsContext)\n\n  const confirmation = (dialogType = 'submit-draft', callback) => {\n    if (callIfFunction(draft.isOpen)) {\n      dialog.openWith(dialogType)\n      return new Promise((res) =>\n        promiseResolver.set(() => (r) => {\n          dialog.close()\n          callIfFunction(callback,r)\n          res(r)\n        }))\n    } else {\n      return Promise.resolve()\n    }\n  }\n\n\n  const submitAndResolve = async () => {\n    loading.open()\n     try {\n      await submit()\n      callIfFunction(promiseResolver.get())\n    } catch (e) { } finally {\n      dialog.close()\n      loading.close()\n    }\n  }\n\n  const discardAndResolve = () => {\n    callIfFunction(discard)\n    callIfFunction(promiseResolver.get())\n  }\n\n  const Dialog = startlibs.dialogs[dialog.isOpen]\n  if (process.env.NODE_ENV !== 'production') {\n    if (dialog.isOpen && !Dialog) { console.log(`Dialog [${dialogType}] not registered in startlibs.dialogs`) }\n  }\n\n  const feedback =\n    dialog.isOpen\n    ? <Dialog\n      submit={submitAndResolve}\n      discard={discardAndResolve}\n      isLoading={loading.isOpen}\n      cancel={dialog.close}\n      {...meta}\n    />\n    : null\n\n  return [feedback, draft, confirmation]\n}"],"names":["useDraftConfirmation","submit","discard","meta","loading","useToggle","dialog","draft","useRefToggle","promiseResolver","useRefState","startlibs","useContext","StartlibsContext","confirmation","dialogType","arguments","length","undefined","callback","callIfFunction","isOpen","openWith","Promise","res","set","r","close","resolve","submitAndResolve","open","get","e","discardAndResolve","Dialog","dialogs","process","env","NODE_ENV","console","log","concat","feedback","React","createElement","_extends","isLoading","cancel"],"mappings":"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"}
+{"version":3,"file":"useDraftConfirmation.mjs","sources":["../src/useDraftConfirmation.jsx"],"sourcesContent":["import React, {useContext} from 'react'\nimport {useToggle, useRefToggle, StartlibsContext, useRefState} from '@startlibs/core'\nimport {callIfFunction} from '@startlibs/utils'\n\nexport const useDraftConfirmation = (submit, discard, meta) => {\n  const loading = useToggle()\n  const dialog = useToggle()\n  const draft = useRefToggle()\n  const promiseResolver = useRefState()\n  const startlibs = useContext(StartlibsContext)\n\n  const confirmation = (dialogType = 'submit-draft', callback) => {\n    if (callIfFunction(draft.isOpen)) {\n      dialog.openWith(dialogType)\n      return new Promise((res) =>\n        promiseResolver.set(() => (r) => {\n          dialog.close()\n          callIfFunction(callback,r)\n          res(r)\n        }))\n    } else {\n      return Promise.resolve()\n    }\n  }\n\n\n  const submitAndResolve = async () => {\n    loading.open()\n     try {\n      await submit()\n      callIfFunction(promiseResolver.get())\n    } catch (e) { } finally {\n      dialog.close()\n      loading.close()\n    }\n  }\n\n  const discardAndResolve = () => {\n    callIfFunction(discard)\n    callIfFunction(promiseResolver.get())\n  }\n\n  const Dialog = startlibs.dialogs[dialog.isOpen]\n  if (process.env.NODE_ENV !== 'production') {\n    if (dialog.isOpen && !Dialog) { console.log(`Dialog [${dialog.isOpen}] not registered in startlibs.dialogs`) }\n  }\n\n  const feedback =\n    dialog.isOpen\n    ? <Dialog\n      submit={submitAndResolve}\n      discard={discardAndResolve}\n      isLoading={loading.isOpen}\n      cancel={dialog.close}\n      {...meta}\n    />\n    : null\n\n  return [feedback, draft, confirmation]\n}"],"names":["useDraftConfirmation","submit","discard","meta","loading","useToggle","dialog","draft","useRefToggle","promiseResolver","useRefState","startlibs","useContext","StartlibsContext","confirmation","dialogType","arguments","length","undefined","callback","callIfFunction","isOpen","openWith","Promise","res","set","r","close","resolve","submitAndResolve","open","get","e","discardAndResolve","Dialog","dialogs","process","env","NODE_ENV","console","log","concat","feedback","React","createElement","_extends","isLoading","cancel"],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@startlibs/form",
-  "version": "1.1.1",
+  "version": "1.1.3",
   "description": "Startlibs Form",
   "main": "lib/index.cjs",
   "exports": {

package/src/AutoComplete.jsx

@@ -1,5 +1,5 @@
 import React, {useEffect, useRef, useState} from 'react'
-import ContentEditable from 'react-contenteditable'
+import ContentEditableModule from 'react-contenteditable'
 import {useRefState, useToggle, useEnsureRef} from '@startlibs/core'
 import {ContextMenu, Li, Loading, Icon} from '@startlibs/components'
 import {Errors, useProvideErrors} from './Errors'
@@ -10,6 +10,9 @@ import {callIfFunction, stopPropagation, constrainEvent, getColor, media, custom
 import styled, {css} from 'styled-components'
 import {darken} from 'polished'
 
+// Node/esbuild interop em .mjs devolve module.exports; Rollup devolve o default. Cobre os dois.
+const ContentEditable = ContentEditableModule.default || ContentEditableModule
+
 const ua = navigator.userAgent.toLowerCase();
 const isSafari = ua.indexOf('safari') >= 0 && ua.indexOf('chrome') < 0
 
@@ -608,15 +611,24 @@ export class AutoCompleteTextbox extends React.Component {
     return nextProps.value !== cleanText(this.el.innerText) || !!Object.keys(nextProps).find((k) => nextProps[k] !== this.props[k])
   }
 
-  componentDidUpdate(oldProps) {
+  // Only a programmatic change (not the user typing) should move the caret to the end
+  getSnapshotBeforeUpdate() {
+    return this.props.value !== cleanText(this.el.innerText)
+  }
+
+  componentDidUpdate(oldProps, prevState, changedOutside) {
+    let rewritten = false
     if (this.props.value.slice(-1) === ' ' && /\S/.test(this.el.textContent.slice(-1))) { // does not have blank space as last
       this.el.innerHTML = this.props.value.replace(/\s/, '&nbsp;')
+      rewritten = true
     }
-    if (this.props.value !== oldProps.value && document.activeElement === this.el) {
+    if (this.props.value !== oldProps.value && (changedOutside || rewritten) && document.activeElement === this.el) {
       setSelectionRange(this.el.firstChild || this.el, this.el.textContent.length + 1)
     }
   }
 
+  setEl = ref => this.el = ref
+
   onPaste = (ev) => {
     ev.preventDefault()
     const text = ev.clipboardData.getData('text')
@@ -628,7 +640,8 @@ export class AutoCompleteTextbox extends React.Component {
     const valueOrBlank = /*android fix, not needed? value || */ _.isString(value) && value ? value : '\u200b'
 
     const props = {
-      innerRef: ref => this.el = ref,
+      // stable ref: a new function each render makes ContentEditable re-render and jump the caret to the end
+      innerRef: this.setEl,
       onKeyDown: this.onKeyDown,
       onPaste: this.onPaste,
       value: value,

package/src/RichText.jsx

@@ -1,6 +1,6 @@
 import React, {useContext, useEffect, useRef, useState} from 'react'
 import styled, {css} from 'styled-components'
-import ContentEditable from 'react-contenteditable'
+import ContentEditableModule from 'react-contenteditable'
 import {darken} from 'polished'
 import _ from 'lodash/fp'
 import {getColor, linkRegex, stopPropagation} from '@startlibs/utils'
@@ -12,6 +12,9 @@ import {TextInput} from './TextInput'
 import {useInput} from './enhanceInput'
 import {Button, Icon} from '@startlibs/components'
 
+// Node/esbuild interop em .mjs devolve module.exports; Rollup devolve o default. Cobre os dois.
+const ContentEditable = ContentEditableModule.default || ContentEditableModule
+
 const InputIcon = styled(Icon)`
   position: absolute;
   outline: none;

package/src/useDraftConfirmation.jsx

@@ -42,7 +42,7 @@ export const useDraftConfirmation = (submit, discard, meta) => {
 
   const Dialog = startlibs.dialogs[dialog.isOpen]
   if (process.env.NODE_ENV !== 'production') {
-    if (dialog.isOpen && !Dialog) { console.log(`Dialog [${dialogType}] not registered in startlibs.dialogs`) }
+    if (dialog.isOpen && !Dialog) { console.log(`Dialog [${dialog.isOpen}] not registered in startlibs.dialogs`) }
   }
 
   const feedback =