onekijs-ui 0.19.4 → 0.19.6

package/dist/index.js

@@ -1495,11 +1495,12 @@ const TooltipContent = ({ code, fields }) => {
     if (code <= onekijsFramework.ValidationCode.Error) {
         return (React.createElement(React.Fragment, null,
             React.createElement("div", null,
-                "Some fields are in ",
+                "Some fields are ",
                 code === onekijsFramework.ValidationCode.Error ? 'in error' : 'loading'),
             Object.keys(fields).map((fieldName, index) => (React.createElement("div", { key: `error-${index}` },
-                React.createElement("b", null, fieldName),
-                ": ",
+                fieldName !== onekijsFramework.FORM_GLOBAL_VALIDATION_KEY ? React.createElement(React.Fragment, null,
+                    React.createElement("b", null, "fieldName"),
+                    ":") : '',
                 fields[fieldName])))));
     }
     return null;
@@ -1508,19 +1509,26 @@ const SubmitButton = React.memo((opts) => {
     const { submitting, code, fields } = onekijsFramework.useSubmit();
     const { showErrors, type = 'submit', ...props } = opts;
     let disabled = props.disabled || false;
+    let loading = false;
+    let kind = props.kind || 'primary';
     let errors = [];
     if (code <= onekijsFramework.ValidationCode.Error) {
         disabled = true;
         if (showErrors) {
             errors = Object.keys(fields);
         }
+        kind = 'danger';
+    }
+    if (code === onekijsFramework.ValidationCode.Loading) {
+        loading = true;
+        kind = 'dark';
     }
     // eslint-disable-next-line react/prop-types
-    if (submitting) {
+    if (submitting || loading) {
         disabled = true;
     }
-    return (React.createElement(Tooltip, { content: errors.length > 0 ? React.createElement(TooltipContent, { code: code, fields: fields }) : undefined, placement: "top", kind: "danger", delayHide: 0 },
-        React.createElement(Button, { ...props, disabled: disabled, type: type, loading: submitting }, props.children ? props.children : 'Submit')));
+    return (React.createElement(Tooltip, { content: errors.length > 0 && !loading ? React.createElement(TooltipContent, { code: code, fields: fields }) : undefined, placement: "top", kind: kind, delayHide: 0 },
+        React.createElement(Button, { ...props, kind: kind, disabled: disabled, type: type, loading: submitting || loading }, props.children ? props.children : 'Submit')));
 });
 SubmitButton.displayName = 'SubmitButton';
 
@@ -1673,7 +1681,7 @@ const FormCardDisplayer = styled(FormCardDisplayerComponent) `
   ${formCardDisplayerStyle}
 `;
 
-const FormCard = ({ name, disabled, visible, ...cardProps }) => {
+const FormCard = ({ name, ...cardProps }) => {
     const decorator = onekijsFramework.useFormDecorator(name, {
         Displayer: (displayerProps) => {
             return React.createElement(FormCardDisplayer, { ...displayerProps, name: typeof cardProps.title === 'string' ? cardProps.title : titlelize(name) });
@@ -1686,8 +1694,10 @@ const FormCard = ({ name, disabled, visible, ...cardProps }) => {
     });
     const { hide, show, disable, enable } = fieldContainer;
     React.useEffect(() => {
-        if (!metadata.visible) {
-            if (metadata.disabled) {
+        const visible = metadata.visible ?? true;
+        const disabled = metadata.disabled ?? false;
+        if (!visible) {
+            if (disabled) {
                 disable();
             }
             else {
@@ -1697,7 +1707,7 @@ const FormCard = ({ name, disabled, visible, ...cardProps }) => {
         }
         else {
             show();
-            if (metadata.disabled) {
+            if (disabled) {
                 disable();
             }
             else {
@@ -2273,7 +2283,7 @@ const extractFieldLayoutProps = (props) => {
     ];
     const fieldOptionsKeys = [
         'defaultValue',
-        'touchedOn',
+        'touchOn',
         'disabled',
         'visible',
         'editable',
@@ -6348,18 +6358,17 @@ SelectTokenComponent.displayName = 'SelectTokenComponent';
 var SelectTokenComponent$1 = React.memo(SelectTokenComponent);
 
 const SelectTokensComponent = ({ tokens, onRemove, maxDisplayTokens, }) => {
-    const widthRef = React.useRef();
     const onExiting = (node) => {
         node.style.width = '0';
         node.style.opacity = '0';
     };
     const onEntering = (node) => {
-        widthRef.current = node.getBoundingClientRect().width;
+        const width = node.getBoundingClientRect().width;
         node.style.width = '0px';
         node.style.opacity = '0';
         node.style.transition = 'all 150ms';
         setTimeout(() => {
-            node.style.width = `${widthRef.current}px`;
+            node.style.width = `${width}px`;
             node.style.opacity = '1';
         }, 0);
     };
@@ -10366,9 +10375,6 @@ const DefaultFormCellDisplayer = (props) => {
         if (props.column) {
             const name = props.column.id ? `${props.rowName}.${props.column.id}` : `${props.rowName}`;
             const field = form.fields[name];
-            if (props.column.id === 'value') {
-                console.log(field);
-            }
             if (field && field.Displayer) {
                 const Component = field.Displayer;
                 return React.createElement(Component, { name: name, label: props.column.id ? props.column.title : '', Displayer: field.Displayer, children: {}, index: 0, first: true, last: true, format: props.format });
@@ -11292,7 +11298,7 @@ const Step = ({ title, active = false, disabled = false, visible = true, closabl
             children)));
 };
 
-const FormStep = ({ name, disabled, visible, ...stepProps }) => {
+const FormStep = ({ name, disabled = false, visible = true, ...stepProps }) => {
     const decorator = onekijsFramework.useFormDecorator(name, {
         Displayer: (displayerProps) => {
             const total = Object.values(displayerProps.children ?? {}).length;