@procore/core-react 11.24.4 → 11.25.1

package/dist/Form/Form.js

@@ -1,7 +1,7 @@
 var _excluded = ["initialValues", "onSubmit", "disabled", "enableConfirmNavigation", "variant", "validationSchema", "view"],
   _excluded2 = ["children", "className", "onKeyDown", "style"],
   _excluded3 = ["item", "i18nScope"],
-  _excluded4 = ["as", "children", "colStart", "colWidth", "disabled", "error", "label", "name", "required", "tooltip", "validate", "view"],
+  _excluded4 = ["as", "children", "colStart", "colWidth", "disabled", "description", "error", "label", "name", "required", "tooltip", "validate", "view", "inlineLabel", "inlineDescription"],
   _excluded5 = ["as", "children", "colWidth", "disabled", "error", "label", "name", "required", "tooltip", "validate", "view"],
   _excluded6 = ["children"],
   _excluded7 = ["children"],
@@ -13,8 +13,8 @@ var _excluded = ["initialValues", "onSubmit", "disabled", "enableConfirmNavigati
   _excluded13 = ["currencyIsoCode", "currencyDisplay", "decimalScale", "suffix", "prefix"],
   _excluded14 = ["onChange", "field"],
   _excluded15 = ["onChange", "field"],
-  _excluded16 = ["field", "i18nScope", "onBlur", "onChange"],
-  _excluded17 = ["field", "i18nScope"],
+  _excluded16 = ["field", "i18nScope", "tooltip", "hasRequiredMark", "inlineLabel", "onBlur", "onChange"],
+  _excluded17 = ["field", "tooltip", "inlineLabel", "i18nScope", "hasRequiredMark"],
   _excluded18 = ["field", "onBlur", "onChange"],
   _excluded19 = ["field"],
   _excluded20 = ["onChange", "field"],
@@ -79,14 +79,14 @@ import { TextArea } from '../TextArea';
 import { TextEditor } from '../TextEditor';
 import { TextEditorOutput } from '../TextEditorOutput';
 import { TieredSelect } from '../TieredSelect';
-import { Tooltip } from '../Tooltip';
 import { Typography } from '../Typography';
 import { useDateTime } from '../_hooks/DateTime';
 import { useI18nContext } from '../_hooks/I18n';
 import { addSubcomponents } from '../_utils/addSubcomponents';
 import { formatMachineDate, toDate } from '../_utils/dateTime';
 import { useCloseWithConfirmContext } from './closeWithConfirm';
-import { StyledForm, StyledFormFieldBanner, StyledFormFieldErrorIcon, StyledFormFieldHeader, StyledFormFieldMain, StyledFormFieldRequiredMark, StyledFormFieldTooltipIcon, StyledFormikForm, StyledFormOutputFiledset, StyledFormOutputTextArea, StyledFormRow, StyledLabel, StyledTraditionalFormColumn, StyledTraditionalFormLabel } from './Form.styles';
+import { StyledCheckboxInlineDescription, StyledDescription, StyledForm, StyledFormFieldBanner, StyledFormFieldErrorIcon, StyledFormFieldHeader, StyledFormFieldMain, StyledFormFieldRequiredMark, StyledFormikForm, StyledFormOutputFiledset, StyledFormOutputTextArea, StyledFormRow, StyledLabel, StyledTraditionalFormColumn, StyledTraditionalFormLabel } from './Form.styles';
+import { FormFieldTooltip } from './FormFieldTooltip';
 var emptyObject = {};
 var emptyArray = [];
 function noop() {}
@@ -364,6 +364,7 @@ export function WXPField(_ref5) {
     _ref5$colWidth = _ref5.colWidth,
     colWidth = _ref5$colWidth === void 0 ? 6 : _ref5$colWidth,
     disabled = _ref5.disabled,
+    description = _ref5.description,
     error = _ref5.error,
     label = _ref5.label,
     name = _ref5.name,
@@ -371,6 +372,8 @@ export function WXPField(_ref5) {
     tooltip = _ref5.tooltip,
     validate = _ref5.validate,
     view = _ref5.view,
+    singleCheckboxInlineLabel = _ref5.inlineLabel,
+    singleCheckboxInlineDescription = _ref5.inlineDescription,
     props = _objectWithoutProperties(_ref5, _excluded4);
   var i18n = useI18nContext();
   var field = useField({
@@ -385,11 +388,32 @@ export function WXPField(_ref5) {
   var ValueComponent = getValueComponent(field.meta.view, AsComponent);
   var labelId = useId();
   var fieldErrorId = useId();
+  var descriptionId = useId();
+  var inlineDescriptionId = useId();
   var hasRequiredMark = field.meta.required && (field.meta.view === 'create' || field.meta.view === 'update');
+  var errorDescribedBy = field.meta.error && field.messages.error ? fieldErrorId : undefined;
+  var descriptionDescribedBy = description ? descriptionId : undefined;
+  var inlineDescriptionDescribedBy = singleCheckboxInlineDescription ? inlineDescriptionId : undefined;
   var valueComponentAriaProps = {
     'aria-invalid': field.meta.error ? true : undefined,
     'aria-labelledby': label ? labelId : undefined,
-    'aria-describedby': field.meta.error && field.messages.error ? fieldErrorId : undefined
+    'aria-describedby': [errorDescribedBy, descriptionDescribedBy, inlineDescriptionDescribedBy].filter(function (value) {
+      return value;
+    }).join(' ') || undefined
+  };
+
+  // Below variables is needed only for SingleCheckbox
+  // only SingleCheckbox has inlineLabel
+  // at least one label must be present
+  // but if not we want to render requiredMark and tooltip at FieldHeader
+  var hasLabelOrDoesntHaveBoth = label || !label && !singleCheckboxInlineLabel;
+  var hasInlineLabelAndDoesntHaveLabel = singleCheckboxInlineLabel && !label;
+  var singleCheckboxComponentProps = hasInlineLabelAndDoesntHaveLabel ? {
+    tooltip: tooltip,
+    hasRequiredMark: hasRequiredMark,
+    inlineLabel: singleCheckboxInlineLabel
+  } : {
+    inlineLabel: singleCheckboxInlineLabel
   };
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(StyledFormFieldHeader, {
     $colIeSpan: colWidth,
@@ -398,23 +422,21 @@ export function WXPField(_ref5) {
   }, label && /*#__PURE__*/React.createElement(StyledLabel, {
     id: labelId,
     htmlFor: name
-  }, label), hasRequiredMark && /*#__PURE__*/React.createElement(StyledFormFieldRequiredMark, null), tooltip && /*#__PURE__*/React.createElement(Tooltip, {
-    role: "tooltip",
-    overlay: tooltip,
-    trigger: ['hover', 'focus']
-  }, /*#__PURE__*/React.createElement(StyledFormFieldTooltipIcon, {
-    "aria-label": i18n.t('core.form.field.tooltipHelp'),
-    "aria-hidden": false,
-    size: "sm",
-    tabIndex: 0
-  }))), /*#__PURE__*/React.createElement(StyledFormFieldMain, {
+  }, label), hasLabelOrDoesntHaveBoth && /*#__PURE__*/React.createElement(React.Fragment, null, hasRequiredMark && /*#__PURE__*/React.createElement(StyledFormFieldRequiredMark, null), tooltip && /*#__PURE__*/React.createElement(FormFieldTooltip, {
+    overlay: tooltip
+  })), description && /*#__PURE__*/React.createElement(StyledDescription, {
+    id: descriptionId
+  }, description)), /*#__PURE__*/React.createElement(StyledFormFieldMain, {
     $colIeSpan: colWidth,
     $colStart: colStart,
     $colEnd: colStart + colWidth,
     $read: field.meta.view === 'read'
-  }, children ? isFunction(children) ? children(field) : children : /*#__PURE__*/React.createElement(ValueComponent, _extends({}, valueComponentAriaProps, props, {
+  }, children ? isFunction(children) ? children(field) : children : /*#__PURE__*/React.createElement(ValueComponent, _extends({}, valueComponentAriaProps, props, singleCheckboxComponentProps, {
     field: field
-  })), /*#__PURE__*/React.createElement(StyledFormFieldBanner, null, field.meta.error && /*#__PURE__*/React.createElement(Box, {
+  })), singleCheckboxInlineDescription && /*#__PURE__*/React.createElement(StyledCheckboxInlineDescription, {
+    id: inlineDescriptionId,
+    $read: field.meta.view === 'read'
+  }, singleCheckboxInlineDescription), /*#__PURE__*/React.createElement(StyledFormFieldBanner, null, field.meta.error && /*#__PURE__*/React.createElement(Box, {
     marginRight: "xs"
   }, /*#__PURE__*/React.createElement(StyledFormFieldErrorIcon, {
     size: "sm"
@@ -462,17 +484,10 @@ export function TraditionalField(_ref6) {
   }, /*#__PURE__*/React.createElement("label", {
     id: labelId,
     htmlFor: name
-  }, label, ":")), (field.meta.view === 'create' || field.meta.view === 'update') && field.meta.required && /*#__PURE__*/React.createElement(StyledFormFieldRequiredMark, null), tooltip && /*#__PURE__*/React.createElement(Tooltip, {
-    role: "tooltip",
+  }, label, ":")), (field.meta.view === 'create' || field.meta.view === 'update') && field.meta.required && /*#__PURE__*/React.createElement(StyledFormFieldRequiredMark, null), tooltip && /*#__PURE__*/React.createElement(FormFieldTooltip, {
     overlay: tooltip,
-    placement: "right",
-    trigger: ['hover', 'focus']
-  }, /*#__PURE__*/React.createElement(StyledFormFieldTooltipIcon, {
-    "aria-label": i18n.t('core.form.field.tooltipHelp'),
-    "aria-hidden": false,
-    size: "sm",
-    tabIndex: 0
-  })))), /*#__PURE__*/React.createElement(StyledTraditionalFormColumn, {
+    placement: "right"
+  }))), /*#__PURE__*/React.createElement(StyledTraditionalFormColumn, {
     $fullWidth: colWidth === 12,
     $output: field.meta.view === 'read'
   }, children ? isFunction(children) ? children(field) : children : /*#__PURE__*/React.createElement(ValueComponent, _extends({}, valueComponentAriaProps, props, {
@@ -773,6 +788,9 @@ var FieldDateSelect = makeField(DateInput, DateOutput);
 export var CheckboxInput = /*#__PURE__*/React.forwardRef(function CheckboxInput(_ref17, ref) {
   var field = _ref17.field,
     i18nScope = _ref17.i18nScope,
+    tooltip = _ref17.tooltip,
+    hasRequiredMark = _ref17.hasRequiredMark,
+    inlineLabel = _ref17.inlineLabel,
     _onBlur = _ref17.onBlur,
     _onChange = _ref17.onChange,
     props = _objectWithoutProperties(_ref17, _excluded16);
@@ -794,24 +812,38 @@ export var CheckboxInput = /*#__PURE__*/React.forwardRef(function CheckboxInput(
     onChange: onChange,
     name: field.input.name,
     ref: ref,
-    value: String(value)
-  }, props));
+    value: String(value),
+    requiredMark: hasRequiredMark,
+    tooltip: tooltip
+  }, props), inlineLabel);
 });
 export var CheckboxOutput = /*#__PURE__*/React.forwardRef(function CheckboxOutput(_ref18, ref) {
   var field = _ref18.field,
+    tooltip = _ref18.tooltip,
+    inlineLabel = _ref18.inlineLabel,
     _ref18$i18nScope = _ref18.i18nScope,
     i18nScope = _ref18$i18nScope === void 0 ? 'core.form.checkbox' : _ref18$i18nScope,
+    hasRequiredMark = _ref18.hasRequiredMark,
     props = _objectWithoutProperties(_ref18, _excluded17);
   var i18n = useI18nContext();
-  var yes = i18n.t('yes', {
-    scope: i18nScope
+  var yes = i18n.t('selected', {
+    scope: i18nScope,
+    // old default supports new key addition and backwards i18nScope support. changed 11.x
+    defaultValue: i18n.t('yes', {
+      scope: i18nScope
+    })
   });
-  var no = i18n.t('no', {
-    scope: i18nScope
+  var no = i18n.t('deselected', {
+    scope: i18nScope,
+    defaultValue: i18n.t('no', {
+      scope: i18nScope
+    })
   });
   return /*#__PURE__*/React.createElement("span", _extends({
     ref: ref
-  }, props), field.input.value ? yes : no);
+  }, props), field.input.value ? yes : no, inlineLabel && /*#__PURE__*/React.createElement(React.Fragment, null, ' - ', inlineLabel), tooltip && /*#__PURE__*/React.createElement(FormFieldTooltip, {
+    overlay: tooltip
+  }));
 });
 var FieldCheckbox = makeField(CheckboxInput, CheckboxOutput, {
   emptyState: false