opentiny 6.9.8 → 6.9.10

package/themes/silver/theme.js

@@ -14390,13 +14390,43 @@
       tag: 'div',
       classes: ['tox-form__group'].concat(extraClasses)
     });
-    const renderLabel$3 = (label, providersBackstage) => FormField.parts.label({
-      dom: {
-        tag: 'label',
-        classes: ['tox-label']
-      },
-      components: [text$2(providersBackstage.translate(label))]
-    });
+    const renderLabel$3 = (label, tooltip, providersBackstage) => {
+      const labelElement = {
+        dom: {
+          tag: 'label',
+          classes: ['tox-label']
+        },
+        components: [text$2(providersBackstage.translate(label))]
+      };
+      if (tooltip.trim() === '') {
+        return FormField.parts.label(labelElement);
+      }
+      const makeIcon = iconName => render$3(iconName, {
+        tag: 'span',
+        classes: [
+          'tox-icon',
+          'tox-label-tooltip-icon'
+        ]
+      }, providersBackstage.icons);
+      const labelTooltip = {
+        dom: {
+          tag: 'div',
+          classes: ['tox-label-tooltip']
+        },
+        components: [makeIcon('tooltip')],
+        behaviours: derive$1([Tooltipping.config(providersBackstage.tooltips.getConfig({ tooltipText: providersBackstage.translate(tooltip) }))])
+      };
+      return FormField.parts.label({
+        dom: {
+          tag: 'div',
+          classes: ['tox-form__label-container']
+        },
+        components: [
+          labelElement,
+          labelTooltip
+        ]
+      });
+    };
 
     const formChangeEvent = generate$6('form-component-change');
     const formCloseEvent = generate$6('form-close');
@@ -14409,7 +14439,7 @@
     const formResizeEvent = generate$6('form-resize');
 
     const renderCollection = (spec, providersBackstage, initialData) => {
-      const pLabel = spec.label.map(label => renderLabel$3(label, providersBackstage));
+      const pLabel = spec.label.map(label => renderLabel$3(label, spec.tooltip.getOr(''), providersBackstage));
       const icons = providersBackstage.icons();
       const getIcon = icon => {
         var _a;
@@ -14763,7 +14793,7 @@
         ]),
         selectOnFocus: false
       });
-      const pLabel = spec.label.map(label => renderLabel$3(label, sharedBackstage.providers));
+      const pLabel = spec.label.map(label => renderLabel$3(label, spec.tooltip.getOr(''), sharedBackstage.providers));
       const emitSwatchChange = (colorBit, value) => {
         emitWith(colorBit, colorSwatchChangeEvent, { value });
       };
@@ -16437,7 +16467,7 @@
             ]
           }]
       });
-      const pLabel = spec.label.map(label => renderLabel$3(label, providersBackstage));
+      const pLabel = spec.label.map(label => renderLabel$3(label, spec.tooltip.getOr(''), providersBackstage));
       const pField = FormField.parts.field({ factory: { sketch: renderField } });
       return renderFormFieldWith(pLabel, pField, ['tox-form__group--stretched'], []);
     };
@@ -16658,7 +16688,7 @@
         ...spec.sandboxed ? { sandbox: 'allow-scripts allow-same-origin' } : {}
       };
       const sourcing = getDynamicSource(initialData, spec.streamContent);
-      const pLabel = spec.label.map(label => renderLabel$3(label, providersBackstage));
+      const pLabel = spec.label.map(label => renderLabel$3(label, spec.tooltip.getOr(''), providersBackstage));
       const factory = newSpec => craft(Optional.from(containerBorderedClass), {
         uid: newSpec.uid,
         dom: {
@@ -16819,6 +16849,34 @@
         },
         components: [text$2(backstageShared.providers.translate(spec.label))]
       };
+      if (!spec.tooltip || spec.tooltip.getOr('') === '') {
+        return label;
+      }
+      const makeIcon = iconName => render$3(iconName, {
+        tag: 'span',
+        classes: [
+          'tox-icon',
+          'tox-label-tooltip-icon'
+        ]
+      }, backstageShared.providers.icons);
+      const labelTooltip = {
+        dom: {
+          tag: 'div',
+          classes: ['tox-label-tooltip']
+        },
+        components: [makeIcon('tooltip')],
+        behaviours: derive$1([Tooltipping.config(backstageShared.providers.tooltips.getConfig({ tooltipText: backstageShared.providers.translate(spec.tooltip.getOr('')) }))])
+      };
+      const labelContainer = {
+        dom: {
+          tag: 'div',
+          classes: ['tox-form__label-container']
+        },
+        components: [
+          label,
+          labelTooltip
+        ]
+      };
       const comps = map$2(spec.items, backstageShared.interpreter);
       return {
         dom: {
@@ -16826,7 +16884,7 @@
           classes: ['tox-form__group']
         },
         components: [
-          label,
+          labelContainer,
           ...comps
         ],
         behaviours: derive$1([
@@ -17150,7 +17208,7 @@
     const renderListBox = (spec, backstage, initialData) => {
       const providersBackstage = backstage.shared.providers;
       const initialItem = initialData.bind(value => findItemByValue(spec.items, value)).orThunk(() => head(spec.items).filter(isSingleListItem));
-      const pLabel = spec.label.map(label => renderLabel$3(label, providersBackstage));
+      const pLabel = spec.label.map(label => renderLabel$3(label, spec.tooltip.getOr(''), providersBackstage));
       const pField = FormField.parts.field({
         dom: {},
         factory: {
@@ -17281,7 +17339,7 @@
         text: providersBackstage.translate(item.text),
         value: item.value
       }));
-      const pLabel = spec.label.map(label => renderLabel$3(label, providersBackstage));
+      const pLabel = spec.label.map(label => renderLabel$3(label, spec.tooltip.getOr(''), providersBackstage));
       const pField = FormField.parts.field({
         dom: {},
         ...initialData.map(data => ({ data })).getOr({}),
@@ -17735,7 +17793,7 @@
     };
 
     const renderTextField = (spec, providersBackstage) => {
-      const pLabel = spec.label.map(label => renderLabel$3(label, providersBackstage));
+      const pLabel = spec.label.map(label => renderLabel$3(label, spec.tooltip.getOr(''), providersBackstage));
       const baseInputBehaviours = [
         Disabling.config({ disabled: () => spec.disabled || providersBackstage.isDisabled() }),
         receivingConfig(),
@@ -17817,6 +17875,7 @@
       name: spec.name,
       multiline: false,
       label: spec.label,
+      tooltip: spec.tooltip,
       inputMode: spec.inputMode,
       placeholder: spec.placeholder,
       flex: false,
@@ -17830,6 +17889,7 @@
       name: spec.name,
       multiline: true,
       label: spec.label,
+      tooltip: spec.tooltip,
       inputMode: Optional.none(),
       placeholder: spec.placeholder,
       flex: true,
@@ -19292,7 +19352,7 @@
         ...typeaheadSpec,
         factory: Typeahead
       });
-      const pLabel = spec.label.map(label => renderLabel$3(label, providersBackstage));
+      const pLabel = spec.label.map(label => renderLabel$3(label, spec.tooltip.getOr(''), providersBackstage));
       const makeIcon = (name, errId, icon = name, label = name) => render$3(icon, {
         tag: 'div',
         classes: [
@@ -28775,7 +28835,10 @@
       type,
       name$1
     ];
-    const formComponentWithLabelFields = formComponentFields.concat([optionalLabel]);
+    const formComponentWithLabelFields = formComponentFields.concat([
+      optionalLabel,
+      optionalTooltip
+    ]);
 
     const checkboxFields = formComponentFields.concat([
       label,
@@ -28868,7 +28931,8 @@
         'start',
         'center',
         'end'
-      ])
+      ]),
+      optionalTooltip
     ];
 
     const listBoxSingleItemFields = [