@procore/core-react
Version:
React library of Procore Design Guidelines
1,120 lines (1,091 loc) • 68.2 kB
JavaScript
var _excluded = ["initialValues", "onSubmit", "disabled", "enableConfirmNavigation", "variant", "validationSchema", "view"],
_excluded2 = ["children", "className", "onKeyDown", "style"],
_excluded3 = ["item", "i18nScope"],
_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"],
_excluded8 = ["onBlur", "onChange", "field"],
_excluded9 = ["field"],
_excluded0 = ["onBlur", "onChange", "field"],
_excluded1 = ["decimalScale", "defaultValue", "field", "fillDecimalScale", "locale", "onChange", "prefix", "suffix"],
_excluded10 = ["onBlur", "onChange", "field"],
_excluded11 = ["currencyIsoCode", "currencyDisplay", "decimalScale", "suffix", "prefix"],
_excluded12 = ["onChange", "field"],
_excluded13 = ["onChange", "field"],
_excluded14 = ["field", "i18nScope", "tooltip", "hasRequiredMark", "inlineLabel", "onBlur", "onChange"],
_excluded15 = ["field", "tooltip", "inlineLabel", "i18nScope", "hasRequiredMark"],
_excluded16 = ["field", "onBlur", "onChange"],
_excluded17 = ["field"],
_excluded18 = ["onChange", "field", "textEditorComponent"],
_excluded19 = ["field", "textEditorComponent", "onBlur", "onChange", "onClick", "onContextMenu", "onCopy", "onCompositionEnd", "onCompositionStart", "onCompositionUpdate", "onCut", "onDrag", "onDragDrop", "onDragEnd", "onDragGesture", "onDragOver", "onDrop", "onFocus", "onInput", "onKeyDown", "onKeyPress", "onMouseDown", "onMouseEnter", "onMouseLeave", "onMouseMove", "onMouseOut", "onMouseOver", "onMouseUp", "onPaste", "onReset", "onSubmit"],
_excluded20 = ["field", "getId", "getLabel", "isDisabledOption", "options"],
_excluded21 = ["field", "getId", "getLabel", "options"],
_excluded22 = ["field", "getId", "getLabel", "isDisabledOption", "isIndeterminateOption", "options"],
_excluded23 = ["field", "getId", "getLabel", "isDisabledOption", "isIndeterminateOption", "options"],
_excluded24 = ["getId", "getLabel"],
_excluded25 = ["afterHide", "field", "getGroup", "getId", "getLabel", "groupGetId", "groupGetLabel", "groupRenderer", "groupHeaderRenderer", "isSuggestedOption", "onClear", "onSearch", "onSelect", "searchComparator", "options", "optgroups", "optionRenderer"],
_excluded26 = ["afterHide", "afterShow", "beforeHide", "beforeShow", "field", "footer", "getId", "getGroup", "getLabel", "groupGetId", "groupGetLabel", "groupHeaderRenderer", "groupRenderer", "i18nScope", "isSuggestedOption", "options", "optgroups", "optionRenderer", "searchComparator", "onBlur", "onClear", "onSearch", "onSelect"],
_excluded27 = ["field", "onBlur", "onClear", "onSelect", "getId", "getLabel"],
_excluded28 = ["afterHide", "afterShow", "beforeHide", "beforeShow", "color", "field", "footer", "getColor", "getGroup", "getLabel", "getSuggested", "groupGetId", "groupGetLabel", "i18nScope", "onClear", "onSearch", "onSelect", "options", "optgroups"],
_excluded29 = ["field", "onBlur", "onChange", "getId", "getLabel"],
_excluded30 = ["afterHide", "afterShow", "beforeHide", "beforeShow", "emptyMessage", "field", "getGroup", "getId", "getLabel", "groupHeaderRenderer", "groupRenderer", "isOptionDisabled", "onChange", "onSearch", "onScrollBottom", "options", "optgroups", "optionRenderer", "placement", "placeholder", "tokenRenderer", "qa"],
_excluded31 = ["field", "onBlur", "onChange", "getId", "getLabel"],
_excluded32 = ["afterHide", "afterShow", "beforeHide", "beforeShow", "emptyMessage", "field", "getGroup", "getId", "getLabel", "getOptGroup", "groupRenderer", "groups", "isOptionDisabled", "placeholder", "placement", "onChange", "onScrollBottom", "onSearch", "optgroups", "options", "optionRenderer", "optGroupRenderer", "tokenRenderer", "qa"],
_excluded33 = ["field", "onBlur", "onChange", "onClear", "getId", "getLabel"],
_excluded34 = ["afterHide", "afterShow", "beforeHide", "beforeShow", "field", "getId", "getLabel", "getGroupId", "getNextGroupId", "getValueString", "i18nScope", "isLeaf", "isTierDisabled", "loadingMore", "onChange", "onClear", "onNavigate", "onScrollBottom", "onSearch", "onQuickCreate", "options", "selectableTiers"];
function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }
function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
import { Ban, Check } from '@procore/core-icons';
import { useId } from '@react-aria/utils';
import conditionalStrings from 'classnames';
import { Formik, FormikContext, useField as useFormikField, useFormikContext } from 'formik';
import { either, identity, is, isEmpty, prop, startsWith, toLower } from 'ramda';
import React from 'react';
import { Banner, ErrorBanner } from '../Banner';
import { Box } from '../Box';
import { Checkbox } from '../Checkbox';
import { DateSelect } from '../DateSelect';
import { GroupSelect } from '../GroupSelect';
import { Input } from '../Input';
import { MultiSelect } from '../MultiSelect';
import { CurrencyInput as BaseCurrencyInput, NumberInput as BaseNumberInput } from '../NumberInput';
import { getCurrencyProps } from '../NumberInput/NumberInput';
import { defaultCurrencyDecimalScale, defaultCurrencyFillDecimalScale, defaultCurrencyInputPrefix } from '../NumberInput/NumberInput.constants';
import { useNumberFormat } from '../NumberInput/NumberInput.hooks';
import { defaultLocale } from '../NumberInput/NumberInput.utils';
import { Pill } from '../Pill';
import { defaultGetColor, PillSelect } from '../PillSelect/PillSelect';
import { RadioButton } from '../RadioButton';
import { Select } from '../Select';
import { SettingsPage } from '../SettingsPage';
import { TextArea } from '../TextArea';
import { TextEditor } from '../TextEditor';
import { TextEditorOutput } from '../TextEditorOutput';
import { TieredSelect } from '../TieredSelect';
import { Typography } from '../Typography';
import { useDateTime } from '../_hooks/DateTime';
import { useI18nContext } from '../_hooks/I18n';
import { addSubcomponents } from '../_utils/addSubcomponents';
import { useCloseWithConfirmContext } from '../_utils/closeWithConfirm';
import { formatMachineDate, toDate } from '../_utils/dateTime';
import { StyledCheckboxInlineDescription, StyledDescription, StyledForm, StyledFormFieldBanner, StyledFormFieldErrorIcon, StyledFormFieldHeader, StyledFormFieldMain, StyledFormFieldRequiredMark, StyledFormOutputFiledset, StyledFormOutputTextArea, StyledFormRow, StyledLabel, StyledTraditionalFormColumn } from './Form.styles';
import { FormFieldTooltip } from './FormFieldTooltip';
import { StyledFormikForm, StyledTraditionalFormLabel } from './StyledFormikForm.styles';
var emptyObject = {};
var emptyArray = [];
function noop() {}
var isFunction = function isFunction(obj) {
return typeof obj === 'function';
};
function getValueComponent(view, asComponent) {
return asComponent[view] || asComponent || TextInput;
}
var SharedPropsContext = /*#__PURE__*/React.createContext(emptyObject);
export var FormContext = /*#__PURE__*/React.createContext({
different: false,
disabled: false,
enableReinitialize: false,
setFieldDifferent: function setFieldDifferent(k, d) {},
variant: 'wxp',
view: 'create'
});
export function useFormContext() {
var formik = useFormikContext();
var formulaire = React.useContext(FormContext);
return _objectSpread(_objectSpread({}, formik), formulaire);
}
export function getPrimitiveValue(value) {
var getId = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : defaultGetId;
if (value === null || value === undefined) {
return '';
}
if (value instanceof Date) {
return value.toISOString();
}
if (is(Array, value)) {
return value.map(getId).join();
}
if (is(Object, value)) {
if (isEmpty(value)) {
return '';
}
return getId(value);
}
return value;
}
export function useField() {
var _ref = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : emptyObject,
_disabled = _ref.disabled,
_ref$error = _ref.error,
_error = _ref$error === void 0 ? false : _ref$error,
getId = _ref.getId,
_ref$required = _ref.required,
_required = _ref$required === void 0 ? false : _ref$required,
name = _ref.name,
validate = _ref.validate,
_view = _ref.view;
var _useFormikField = useFormikField({
name: name,
validate: validate
}),
_useFormikField2 = _slicedToArray(_useFormikField, 3),
input = _useFormikField2[0],
meta = _useFormikField2[1],
helpers = _useFormikField2[2];
var _React$useContext = React.useContext(FormContext),
disabled = _React$useContext.disabled,
setFieldDifferent = _React$useContext.setFieldDifferent,
validationSchema = _React$useContext.validationSchema,
view = _React$useContext.view;
var _useFormikContext = useFormikContext(),
validateOnBlur = _useFormikContext.validateOnBlur,
validateOnChange = _useFormikContext.validateOnChange;
var requiredInSchema = React.useMemo(function () {
var fieldSchema = validationSchema === null || validationSchema === void 0 ? void 0 : validationSchema.describe().fields[name];
return (fieldSchema === null || fieldSchema === void 0 ? void 0 : fieldSchema.tests.findIndex(function (test) {
return test.name === 'required';
})) > -1;
}, [validationSchema, name]);
var initialPrimitiveValue = React.useMemo(function () {
return getPrimitiveValue(meta.initialValue, getId);
}, [meta.initialValue, getId]);
var onChange = React.useCallback(function (event) {
setFieldDifferent(name, initialPrimitiveValue !== getPrimitiveValue(event.target.value, getId));
input.onChange(event);
}, [initialPrimitiveValue, input.onChange, getPrimitiveValue, getId, setFieldDifferent]);
var setValue = React.useCallback(function (value, shouldValidate) {
var shouldMarkDifferent = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : true;
if (shouldMarkDifferent) {
setFieldDifferent(name, initialPrimitiveValue !== getPrimitiveValue(value, getId));
}
helpers.setValue(value, shouldValidate);
}, [initialPrimitiveValue, helpers.setValue, getPrimitiveValue, getId, setFieldDifferent]);
return {
input: _objectSpread(_objectSpread({}, input), {}, {
onChange: onChange
}),
helpers: _objectSpread(_objectSpread({}, helpers), {}, {
setValue: setValue
}),
messages: {
error: typeof _error === 'string' ? _error : meta.error
},
meta: _objectSpread(_objectSpread({}, meta), {}, {
error: validateOnBlur || validateOnChange ? meta.error && meta.touched || Boolean(_error) : Boolean(meta.error) || Boolean(_error),
disabled: _disabled !== null && _disabled !== void 0 ? _disabled : disabled,
required: requiredInSchema || _required,
view: _view || view
})
};
}
var onBeforeUnload = function onBeforeUnload(e) {
// https://developer.mozilla.org/en-US/docs/Web/API/WindowEventHandlers/onbeforeunload
e.preventDefault();
e.returnValue = '';
};
var useDifferent = function useDifferent() {
var _React$useState = React.useState(emptyObject),
_React$useState2 = _slicedToArray(_React$useState, 2),
differentObject = _React$useState2[0],
setDifferentObject = _React$useState2[1];
var setFieldDifferent = function setFieldDifferent(name, isDiff) {
if (isDiff !== differentObject[name]) {
// HACK: Do not change. setTimeout seemingly allows fields to update their
// state before causing context re-render. This is specific to TinyMCE behavior.
setTimeout(function () {
return setDifferentObject(function (prev) {
return _objectSpread(_objectSpread({}, prev), {}, _defineProperty({}, name, isDiff));
});
});
}
};
var resetDifferent = function resetDifferent() {
return setDifferentObject(emptyObject);
};
var different = React.useMemo(function () {
return Object.values(differentObject).some(identity);
}, [differentObject]);
return {
different: different,
resetDifferent: resetDifferent,
setFieldDifferent: setFieldDifferent
};
};
function Form_(_ref2) {
var _ref2$initialValues = _ref2.initialValues,
initialValues = _ref2$initialValues === void 0 ? emptyObject : _ref2$initialValues,
_ref2$onSubmit = _ref2.onSubmit,
_onSubmit = _ref2$onSubmit === void 0 ? noop : _ref2$onSubmit,
_ref2$disabled = _ref2.disabled,
disabled = _ref2$disabled === void 0 ? false : _ref2$disabled,
_ref2$enableConfirmNa = _ref2.enableConfirmNavigation,
enableConfirmNavigation = _ref2$enableConfirmNa === void 0 ? false : _ref2$enableConfirmNa,
_ref2$variant = _ref2.variant,
variant = _ref2$variant === void 0 ? 'wxp' : _ref2$variant,
validationSchema = _ref2.validationSchema,
_ref2$view = _ref2.view,
view = _ref2$view === void 0 ? 'create' : _ref2$view,
props = _objectWithoutProperties(_ref2, _excluded);
var _useDifferent = useDifferent(),
different = _useDifferent.different,
resetDifferent = _useDifferent.resetDifferent,
setFieldDifferent = _useDifferent.setFieldDifferent;
var _useCloseWithConfirmC = useCloseWithConfirmContext(),
setFormIsDifferent = _useCloseWithConfirmC.setFormIsDifferent;
React.useEffect(function () {
if (enableConfirmNavigation) {
if (different && (view === 'create' || view === 'update')) {
window.onbeforeunload = onBeforeUnload;
setFormIsDifferent(true);
} else if (!different && (view === 'create' || view === 'update')) {
window.onbeforeunload = null;
setFormIsDifferent(false);
}
}
}, [enableConfirmNavigation, different, view]);
var reset = function reset() {
if (enableConfirmNavigation) {
window.onbeforeunload = null;
}
resetDifferent();
};
var onSubmit = function onSubmit(values, actions) {
var promiseOrUndefined = _onSubmit(values, actions);
if (promiseOrUndefined === undefined) {
return;
}
return promiseOrUndefined.then(function (result) {
reset();
return result;
})["catch"](function (result) {
return result;
});
};
return /*#__PURE__*/React.createElement(FormContext.Provider, {
value: {
different: different,
disabled: disabled,
setFieldDifferent: setFieldDifferent,
validationSchema: validationSchema,
variant: variant,
view: view,
enableReinitialize: props.enableReinitialize
}
}, /*#__PURE__*/React.createElement(Formik, _objectSpread({
initialValues: initialValues,
onSubmit: onSubmit,
validationSchema: validationSchema,
validateOnBlur: false,
validateOnChange: false
}, props), isFunction(props.children) ? props.children : /*#__PURE__*/React.createElement(React.Fragment, null, props.children)));
}
export function FormForm(_ref3) {
var children = _ref3.children,
className = _ref3.className,
onKeyDown = _ref3.onKeyDown,
style = _ref3.style,
props = _objectWithoutProperties(_ref3, _excluded2);
var _React$useContext2 = React.useContext(FormContext),
view = _React$useContext2.view;
if (view === 'create' || view === 'update') {
var preventFormSubmission = function preventFormSubmission(e) {
if (e.key === 'Enter' && e.target instanceof Element && (e.target.tagName === 'INPUT' || e.target.tagName === 'DIV' || e.target.tagName === 'SPAN')) {
e.stopPropagation();
e.preventDefault();
}
onKeyDown && onKeyDown(e);
};
return /*#__PURE__*/React.createElement(StyledFormikForm, _extends({
children: children,
className: className,
onKeyDown: preventFormSubmission,
style: style
}, props));
}
return /*#__PURE__*/React.createElement(StyledForm, {
children: children,
className: className,
style: style
});
}
export function FormErrorBanner(_ref4) {
var item = _ref4.item,
_ref4$i18nScope = _ref4.i18nScope,
i18nScope = _ref4$i18nScope === void 0 ? 'core.form.errorBanner' : _ref4$i18nScope,
rest = _objectWithoutProperties(_ref4, _excluded3);
var context = useFormContext();
var I18n = useI18nContext();
var errors = context.errors,
touched = context.touched;
var someErrorsTouched = context.validateOnBlur || context.validateOnChange ? Object.keys(errors).some(function (errorField) {
return touched[errorField];
}) : true;
if ((context.view === 'create' || context.view === 'update') && !isEmpty(errors) && someErrorsTouched) {
return /*#__PURE__*/React.createElement(ErrorBanner, _extends({
role: "alert"
}, rest), /*#__PURE__*/React.createElement(Banner.Content, null, /*#__PURE__*/React.createElement(Banner.Title, null, context.view === 'create' ? I18n.t('couldNotCreateItem', {
item: item,
scope: i18nScope
}) : I18n.t('couldNotUpdateItem', {
item: item,
scope: i18nScope
})), /*#__PURE__*/React.createElement(Banner.Body, null, context.view === 'create' ? I18n.t('fixErrorsToCreate', {
scope: i18nScope
}) : I18n.t('fixErrorsToUpdate', {
scope: i18nScope
}))));
}
return null;
}
export function isFormFieldEmpty(val) {
return val === undefined || val === null || val.length === 0 || is(Object, val) && isEmpty(val);
}
export function WXPField(_ref5) {
var AsComponent = _ref5.as,
children = _ref5.children,
_ref5$colStart = _ref5.colStart,
colStart = _ref5$colStart === void 0 ? 1 : _ref5$colStart,
_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,
required = _ref5.required,
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({
disabled: disabled,
error: error,
getId: props.getId,
name: name,
required: required,
validate: validate,
view: view
});
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 = field.meta.view === 'read' ? {} : {
'aria-invalid': field.meta.error ? true : undefined,
'aria-labelledby': label ? labelId : 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 = {};
if (hasInlineLabelAndDoesntHaveLabel) {
singleCheckboxComponentProps = {
tooltip: tooltip,
hasRequiredMark: hasRequiredMark,
inlineLabel: singleCheckboxInlineLabel
};
} else if (singleCheckboxInlineLabel) {
singleCheckboxComponentProps = {
inlineLabel: singleCheckboxInlineLabel
};
}
return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(StyledFormFieldHeader, {
$colIeSpan: colWidth,
$colStart: colStart,
$colEnd: colStart + colWidth
}, label && /*#__PURE__*/React.createElement(StyledLabel, {
id: labelId,
htmlFor: name
}, 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, singleCheckboxComponentProps, {
field: field
})), 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"
})), field.meta.error && field.messages.error && /*#__PURE__*/React.createElement(Typography, {
id: fieldErrorId,
color: "red50",
intent: "small",
style: {
alignSelf: 'center'
}
}, field.messages.error))));
}
/** @deprecated The traditional field layout is deprecated */
export function TraditionalField(_ref6) {
var AsComponent = _ref6.as,
children = _ref6.children,
_ref6$colWidth = _ref6.colWidth,
colWidth = _ref6$colWidth === void 0 ? 6 : _ref6$colWidth,
disabled = _ref6.disabled,
error = _ref6.error,
label = _ref6.label,
name = _ref6.name,
required = _ref6.required,
tooltip = _ref6.tooltip,
validate = _ref6.validate,
view = _ref6.view,
props = _objectWithoutProperties(_ref6, _excluded5);
var field = useField({
disabled: disabled,
error: error,
getId: props.getId,
name: name,
required: required,
validate: validate,
view: view
});
var ValueComponent = getValueComponent(field.meta.view, AsComponent);
var labelId = useId();
var i18n = useI18nContext();
var valueComponentAriaProps = {
'aria-invalid': field.meta.error ? true : undefined,
'aria-labelledby': label ? labelId : undefined
};
return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(StyledTraditionalFormColumn, null, label && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(StyledTraditionalFormLabel, {
$view: field.meta.view
}, /*#__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(FormFieldTooltip, {
overlay: tooltip,
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, {
field: field
}))));
}
export function Row(_ref7) {
var children = _ref7.children,
props = _objectWithoutProperties(_ref7, _excluded6);
var _React$useContext3 = React.useContext(FormContext),
variant = _React$useContext3.variant,
view = _React$useContext3.view;
return /*#__PURE__*/React.createElement(StyledFormRow, _extends({
$traditional: variant === 'traditional',
$read: view === 'read'
}, props), children);
}
export function BaseField(props) {
var _React$useContext4 = React.useContext(FormContext),
variant = _React$useContext4.variant;
if (variant === 'traditional') {
return /*#__PURE__*/React.createElement(TraditionalField, props);
} else {
return /*#__PURE__*/React.createElement(WXPField, props);
}
}
// MAKE
function makeSharedField(viewAs) {
return function Field(_ref8) {
var children = _ref8.children,
props = _objectWithoutProperties(_ref8, _excluded7);
if (children) {
return /*#__PURE__*/React.createElement(SharedPropsContext.Provider, {
value: props
}, children);
}
return /*#__PURE__*/React.createElement(BaseField, _extends({
as: viewAs
}, props), children);
};
}
function makeViewField(viewAs, when) {
return function FieldView(props) {
var _React$useContext5 = React.useContext(FormContext),
view = _React$useContext5.view;
var commonProps = React.useContext(SharedPropsContext);
if (when === view) {
return /*#__PURE__*/React.createElement(BaseField, _extends({
as: viewAs
}, commonProps, props));
}
return null;
};
}
export function makeField(editComponent, showComponent, options) {
var views = {
create: editComponent,
read: options && !options.emptyState ? showComponent : withDefaultEmptyState(showComponent),
update: editComponent
};
// @ts-ignore
var Field = makeSharedField(views);
var Create = makeViewField(
// @ts-ignore
views, 'create');
var Read = makeViewField(
// @ts-ignore
views, 'read');
var Update = makeViewField(
// @ts-ignore
views, 'update');
return addSubcomponents({
Create: Create,
Read: Read,
Update: Update
}, Field);
}
/// FIELD TYPES
// @ts-ignore
var defaultGetLabel = either(prop('label'), prop('name'));
var defaultGetId = prop('id');
var defaultGetGroup = prop('groupId');
// EMPTY STATE
var EmptyState = function EmptyState(props) {
return /*#__PURE__*/React.createElement(Typography, {
"aria-describedby": props['aria-describedby'],
"aria-labelledby": props['aria-labelledby'],
intent: "body",
color: "gray45",
"data-qa": conditionalStrings(_defineProperty({}, "".concat(props['data-qa']), props['data-qa']), "core-form-field-empty")
}, "--");
};
export function withDefaultEmptyState(OutputComponent) {
var WithDefaultEmptyState = /*#__PURE__*/React.forwardRef(function (props, ref) {
if (isFormFieldEmpty(props.field.input.value)) {
return /*#__PURE__*/React.createElement(EmptyState, props);
}
// ComponentWithFieldProp's third type of generic function raises an issue with the component possibly being 'undefined'
// @ts-ignore
return /*#__PURE__*/React.createElement(OutputComponent, _extends({
ref: ref
}, props));
});
// @ts-ignore
WithDefaultEmptyState.displayName = "FieldWithEmptyState";
return WithDefaultEmptyState;
}
// TEXT
export var TextInput = /*#__PURE__*/React.forwardRef(function TextInput(_ref9, ref) {
var _onBlur = _ref9.onBlur,
_onChange = _ref9.onChange,
field = _ref9.field,
props = _objectWithoutProperties(_ref9, _excluded8);
var onBlur = function onBlur(e) {
field.input.onBlur(e);
_onBlur && _onBlur(e);
};
var onChange = function onChange(e) {
field.input.onChange(e);
_onChange && _onChange(e);
};
return /*#__PURE__*/React.createElement(Input, _extends({
"aria-required": field.meta.required,
disabled: field.meta.disabled,
error: field.meta.error,
name: field.input.name,
onBlur: onBlur,
onChange: onChange,
ref: ref,
value: field.input.value || ''
}, props));
});
/**
* @deprecated This component was for `Form` internal usage only.
* Try using the supported APIs like `Form.Text view="read"` or
* `Form.Text.Read` which renders this. Or duplicate the source
* `<span ref={ref} {...props}>{field.input.value}</span>`.
* @deprecatedSince 12.21.0
*/
export var TextOutput = /*#__PURE__*/React.forwardRef(function TextOutput(_ref0, ref) {
var field = _ref0.field,
props = _objectWithoutProperties(_ref0, _excluded9);
return /*#__PURE__*/React.createElement("span", _extends({
ref: ref
}, props), field.input.value);
});
var FieldText = makeField(TextInput, TextOutput);
// NUMBER
export var NumberInput = /*#__PURE__*/React.forwardRef(function NumberInput(_ref1, ref) {
var onBlur_ = _ref1.onBlur,
onChange_ = _ref1.onChange,
field = _ref1.field,
props = _objectWithoutProperties(_ref1, _excluded0);
var onBlur = function onBlur(e) {
field.input.onBlur(e);
onBlur_ === null || onBlur_ === void 0 ? void 0 : onBlur_(e);
};
var onChange = React.useCallback(function (valueChange) {
// field.helpers.setValue always updates. Using field.input.onChange instead.
// setValue causes infinite loop with NumberInput changing locale logic
// helpers difference reference each update https://github.com/formium/formik/issues/2268
field.input.onChange({
target: {
name: field.input.name,
value: valueChange.parsedNumber
}
});
onChange_ === null || onChange_ === void 0 ? void 0 : onChange_(valueChange);
}, [onChange_, field.input.onChange]);
return /*#__PURE__*/React.createElement(BaseNumberInput, _extends({
"aria-required": field.meta.required,
disabled: field.meta.disabled,
error: field.meta.error,
name: field.input.name,
onBlur: onBlur,
onChange: onChange,
ref: ref,
value: field.input.value
}, props));
});
export var NumberOutput = /*#__PURE__*/React.forwardRef(function NumberOutput(_ref10, ref) {
var decimalScale = _ref10.decimalScale,
defaultValue = _ref10.defaultValue,
field = _ref10.field,
fillDecimalScale = _ref10.fillDecimalScale,
_locale = _ref10.locale,
onChange = _ref10.onChange,
prefix = _ref10.prefix,
suffix = _ref10.suffix,
props = _objectWithoutProperties(_ref10, _excluded1);
var I18n = useI18nContext();
var locale = _locale || I18n.locale || defaultLocale;
var _useNumberFormat = useNumberFormat({
decimalScale: decimalScale,
fillDecimalScale: fillDecimalScale === 'always' || fillDecimalScale === 'onBlur' ? 'always' : 'none',
locale: locale
}),
formatValue = _useNumberFormat.formatValue;
var value = formatValue(field.input.value);
return /*#__PURE__*/React.createElement("span", _extends({
ref: ref
}, props), value && prefix ? prefix : null, " ", value, ' ', value && suffix ? suffix : null);
});
var FieldNumber = makeField(NumberInput, NumberOutput);
// CURRENCY
export var CurrencyInput = /*#__PURE__*/React.forwardRef(function CurrencyInput(_ref11, ref) {
var onBlur_ = _ref11.onBlur,
onChange_ = _ref11.onChange,
field = _ref11.field,
props = _objectWithoutProperties(_ref11, _excluded10);
var onBlur = function onBlur(e) {
field.input.onBlur(e);
onBlur_ === null || onBlur_ === void 0 ? void 0 : onBlur_(e);
};
var onChange = React.useCallback(function (valueChange) {
// field.helpers.setValue always updates. Using field.input.onChange instead.
// setValue causes infinite loop with NumberInput changing locale logic
field.input.onChange({
target: {
name: field.input.name,
value: valueChange.parsedNumber
}
});
onChange_ === null || onChange_ === void 0 ? void 0 : onChange_(valueChange);
}, [onChange_, field.input.onChange]);
return /*#__PURE__*/React.createElement(BaseCurrencyInput, _extends({
"aria-required": field.meta.required,
disabled: field.meta.disabled,
error: field.meta.error,
name: field.input.name,
onBlur: onBlur,
onChange: onChange,
ref: ref,
value: field.input.value
}, props));
});
export var CurrencyOutput = /*#__PURE__*/React.forwardRef(function CurrencyOutput(_ref12, ref) {
var currencyIsoCode = _ref12.currencyIsoCode,
currencyDisplay = _ref12.currencyDisplay,
_ref12$decimalScale = _ref12.decimalScale,
decimalScale = _ref12$decimalScale === void 0 ? defaultCurrencyDecimalScale : _ref12$decimalScale,
suffix = _ref12.suffix,
_ref12$prefix = _ref12.prefix,
prefix = _ref12$prefix === void 0 ? defaultCurrencyInputPrefix : _ref12$prefix,
props = _objectWithoutProperties(_ref12, _excluded11);
var i18n = useI18nContext();
var locale = props.locale || i18n.locale || defaultLocale;
var numberProps = getCurrencyProps(locale, decimalScale, prefix || suffix, currencyIsoCode, currencyDisplay);
return /*#__PURE__*/React.createElement(NumberOutput, _extends({
fillDecimalScale: defaultCurrencyFillDecimalScale,
ref: ref
}, props, numberProps));
});
var FieldCurrency = makeField(CurrencyInput, CurrencyOutput);
// DATE
export var DateInput = /*#__PURE__*/React.forwardRef(function DateInput(_ref13, ref) {
var _onChange = _ref13.onChange,
field = _ref13.field,
props = _objectWithoutProperties(_ref13, _excluded12);
var value = field.input.value ? toDate(field.input.value, 'Form.DateSelect Create or Update Input') : undefined;
var onChange = function onChange(value) {
field.helpers.setValue(value);
field.helpers.setTouched(true);
_onChange && _onChange(value);
};
return /*#__PURE__*/React.createElement(DateSelect, _extends({
disabled: field.meta.disabled,
error: field.meta.error,
onChange: onChange,
ref: ref,
value: value
}, props));
});
export var DateOutput = /*#__PURE__*/React.forwardRef(function DateOutput(_ref14, ref) {
var onChange = _ref14.onChange,
field = _ref14.field,
props = _objectWithoutProperties(_ref14, _excluded13);
var dateTime = useDateTime();
var value = field.input.value ? dateTime.format(toDate(field.input.value, 'Form.DateSelect Read Output'), 'numeric-date') : undefined;
var machineValue = field.input.value ? formatMachineDate(dateTime.shiftUtcToZonedTime(toDate(field.input.value))) : undefined;
return /*#__PURE__*/React.createElement("span", _extends({
ref: ref
}, props), value && /*#__PURE__*/React.createElement("time", {
dateTime: machineValue
}, value));
});
var FieldDateSelect = makeField(DateInput, DateOutput);
// CHECKBOX
export var CheckboxInput = /*#__PURE__*/React.forwardRef(function CheckboxInput(_ref15, ref) {
var field = _ref15.field,
i18nScope = _ref15.i18nScope,
tooltip = _ref15.tooltip,
hasRequiredMark = _ref15.hasRequiredMark,
inlineLabel = _ref15.inlineLabel,
_onBlur = _ref15.onBlur,
_onChange = _ref15.onChange,
props = _objectWithoutProperties(_ref15, _excluded14);
var value = field.input.value || false;
var onBlur = function onBlur(e) {
field.input.onBlur(e);
_onBlur && _onBlur(e);
};
var onChange = function onChange(e) {
field.helpers.setValue(!value);
_onChange && _onChange(e);
};
return /*#__PURE__*/React.createElement(Checkbox, _extends({
"aria-required": field.meta.required,
checked: value,
disabled: field.meta.disabled,
error: field.meta.error,
onBlur: onBlur,
onChange: onChange,
name: field.input.name,
ref: ref,
value: String(value),
requiredMark: hasRequiredMark,
tooltip: tooltip
}, props), inlineLabel);
});
export var CheckboxOutput = /*#__PURE__*/React.forwardRef(function CheckboxOutput(_ref16, ref) {
var field = _ref16.field,
tooltip = _ref16.tooltip,
inlineLabel = _ref16.inlineLabel,
_ref16$i18nScope = _ref16.i18nScope,
i18nScope = _ref16$i18nScope === void 0 ? 'core.form.checkbox' : _ref16$i18nScope,
hasRequiredMark = _ref16.hasRequiredMark,
props = _objectWithoutProperties(_ref16, _excluded15);
var i18n = useI18nContext();
var yes = /*#__PURE__*/React.createElement("span", {
style: {
verticalAlign: 'middle'
}
}, /*#__PURE__*/React.createElement(Check, {
size: "sm",
"aria-label": i18n.t('checked', {
scope: i18nScope,
// old default supports new key addition and backwards i18nScope support. changed 11.x
defaultValue: i18n.t('yes', {
scope: i18nScope
})
}),
"aria-hidden": false,
role: "img"
}));
var no = /*#__PURE__*/React.createElement("span", {
style: {
verticalAlign: 'middle'
}
}, /*#__PURE__*/React.createElement(Ban, {
size: "sm",
"aria-label": i18n.t('unchecked', {
scope: i18nScope,
defaultValue: i18n.t('no', {
scope: i18nScope
})
}),
"aria-hidden": false,
role: "img"
}));
return /*#__PURE__*/React.createElement("span", _extends({
ref: ref
}, props), field.input.value ? yes : no, inlineLabel && /*#__PURE__*/React.createElement(React.Fragment, null, "\xA0", inlineLabel), tooltip && /*#__PURE__*/React.createElement(FormFieldTooltip, {
overlay: tooltip
}));
});
var FieldCheckbox = makeField(CheckboxInput, CheckboxOutput, {
emptyState: false
});
// TEXTAREA
export var TextAreaInput = /*#__PURE__*/React.forwardRef(function TextAreaInput(_ref17, ref) {
var field = _ref17.field,
_onBlur = _ref17.onBlur,
_onChange = _ref17.onChange,
props = _objectWithoutProperties(_ref17, _excluded16);
var onBlur = function onBlur(e) {
field.input.onBlur(e);
_onBlur && _onBlur(e);
};
var onChange = function onChange(e) {
field.input.onChange(e);
_onChange && _onChange(e);
};
return /*#__PURE__*/React.createElement(TextArea, _extends({
"aria-required": field.meta.required,
disabled: field.meta.disabled,
error: field.meta.error,
name: field.input.name,
onBlur: onBlur,
onChange: onChange,
ref: ref,
value: field.input.value
}, props));
});
export var TextAreaOutput = /*#__PURE__*/React.forwardRef(function TextAreaOutput(_ref18, ref) {
var field = _ref18.field,
props = _objectWithoutProperties(_ref18, _excluded17);
return /*#__PURE__*/React.createElement(StyledFormOutputTextArea, _extends({
ref: ref
}, props), field.input.value);
});
var FieldTextArea = makeField(TextAreaInput, TextAreaOutput);
// RICHTEXT
export var RichTextInput = /*#__PURE__*/React.forwardRef(function RichTextInput(_ref19, ref) {
var _onChange = _ref19.onChange,
field = _ref19.field,
_ref19$textEditorComp = _ref19.textEditorComponent,
TextEditorComponent = _ref19$textEditorComp === void 0 ? TextEditor : _ref19$textEditorComp,
props = _objectWithoutProperties(_ref19, _excluded18);
var onChange = function onChange(value, isDirty) {
field.helpers.setValue(value, false, isDirty);
if (isDirty) {
field.helpers.setTouched(true);
}
_onChange === null || _onChange === void 0 ? void 0 : _onChange(value, isDirty);
};
return /*#__PURE__*/React.createElement(TextEditorComponent, _extends({
disabled: field.meta.disabled,
error: field.meta.error,
value: field.input.value,
onChange: onChange
}, props));
});
export var RichTextOutput = /*#__PURE__*/React.forwardRef(function RichTextOutput(_ref20, ref) {
var field = _ref20.field,
_ref20$textEditorComp = _ref20.textEditorComponent,
TextEditorComponent = _ref20$textEditorComp === void 0 ? TextEditorOutput : _ref20$textEditorComp,
onBlur = _ref20.onBlur,
onChange = _ref20.onChange,
onClick = _ref20.onClick,
onContextMenu = _ref20.onContextMenu,
onCopy = _ref20.onCopy,
onCompositionEnd = _ref20.onCompositionEnd,
onCompositionStart = _ref20.onCompositionStart,
onCompositionUpdate = _ref20.onCompositionUpdate,
onCut = _ref20.onCut,
onDrag = _ref20.onDrag,
onDragDrop = _ref20.onDragDrop,
onDragEnd = _ref20.onDragEnd,
onDragGesture = _ref20.onDragGesture,
onDragOver = _ref20.onDragOver,
onDrop = _ref20.onDrop,
onFocus = _ref20.onFocus,
onInput = _ref20.onInput,
onKeyDown = _ref20.onKeyDown,
onKeyPress = _ref20.onKeyPress,
onMouseDown = _ref20.onMouseDown,
onMouseEnter = _ref20.onMouseEnter,
onMouseLeave = _ref20.onMouseLeave,
onMouseMove = _ref20.onMouseMove,
onMouseOut = _ref20.onMouseOut,
onMouseOver = _ref20.onMouseOver,
onMouseUp = _ref20.onMouseUp,
onPaste = _ref20.onPaste,
onReset = _ref20.onReset,
onSubmit = _ref20.onSubmit,
props = _objectWithoutProperties(_ref20, _excluded19);
return /*#__PURE__*/React.createElement(TextEditorComponent, _extends({
value: field.input.value,
ref: ref,
readOnly: true
}, props));
});
var FieldRichText = makeField(RichTextInput, RichTextOutput);
// RADIO BUTTONS
export var RadioButtonsInput = /*#__PURE__*/React.forwardRef(function RadioButtonsInput(_ref21, ref) {
var field = _ref21.field,
_ref21$getId = _ref21.getId,
getId = _ref21$getId === void 0 ? defaultGetId : _ref21$getId,
_ref21$getLabel = _ref21.getLabel,
getLabel = _ref21$getLabel === void 0 ? defaultGetLabel : _ref21$getLabel,
isDisabledOption = _ref21.isDisabledOption,
options = _ref21.options,
props = _objectWithoutProperties(_ref21, _excluded20);
if (!options || options.length === 0) return null;
var onSelect = function onSelect(option) {
return function () {
field.helpers.setValue(option);
};
};
return /*#__PURE__*/React.createElement(StyledFormOutputFiledset, _extends({
ref: ref,
disabled: field.meta.disabled
}, props), options.map(function (option) {
return /*#__PURE__*/React.createElement(RadioButton, {
checked: getId(option) === getId(field.input.value),
disabled: isDisabledOption && isDisabledOption(option),
error: field.meta.error,
key: getId(option),
name: field.input.name,
onChange: onSelect(option),
value: getId(option)
}, getLabel(option));
}));
});
export var RadioButtonsOutput = /*#__PURE__*/React.forwardRef(function RadioButtonsOutput(_ref22, ref) {
var field = _ref22.field,
getId = _ref22.getId,
_ref22$getLabel = _ref22.getLabel,
getLabel = _ref22$getLabel === void 0 ? defaultGetLabel : _ref22$getLabel,
options = _ref22.options,
props = _objectWithoutProperties(_ref22, _excluded21);
return /*#__PURE__*/React.createElement("span", _extends({
ref: ref
}, props), getLabel(field.input.value));
});
var FieldRadioButtons = makeField(RadioButtonsInput, RadioButtonsOutput);
// CHECKBOXES
export var CheckboxesInput = /*#__PURE__*/React.forwardRef(function CheckboxesInput(_ref23, ref) {
var field = _ref23.field,
_ref23$getId = _ref23.getId,
getId = _ref23$getId === void 0 ? defaultGetId : _ref23$getId,
_ref23$getLabel = _ref23.getLabel,
getLabel = _ref23$getLabel === void 0 ? defaultGetLabel : _ref23$getLabel,
isDisabledOption = _ref23.isDisabledOption,
isIndeterminateOption = _ref23.isIndeterminateOption,
options = _ref23.options,
props = _objectWithoutProperties(_ref23, _excluded22);
if (!options || options.length === 0) return null;
var selectedIds = (field.input.value || emptyArray).map(getId);
var onSelect = function onSelect(changedOption) {
return function () {
if (selectedIds.includes(getId(changedOption))) {
field.helpers.setValue(field.input.value.filter(function (entry) {
return getId(entry) !== getId(changedOption);
}));
} else {
field.helpers.setValue((field.input.value || emptyArray).concat(changedOption));
}
};
};
return /*#__PURE__*/React.createElement(StyledFormOutputFiledset, _extends({
ref: ref,
disabled: field.meta.disabled
}, props), options.map(function (option) {
return /*#__PURE__*/React.createElement(Checkbox, {
checked: selectedIds.includes(getId(option)),
disabled: isDisabledOption && isDisabledOption(option),
error: field.meta.error,
indeterminate: isIndeterminateOption && isIndeterminateOption(option),
key: getId(option),
name: field.input.name,
onChange: onSelect(option),
value: getId(option)
}, getLabel(option));
}));
});
export var CheckboxesOutput = /*#__PURE__*/React.forwardRef(function CheckboxesOutput(_ref24, ref) {
var field = _ref24.field,
getId = _ref24.getId,
_ref24$getLabel = _ref24.getLabel,
getLabel = _ref24$getLabel === void 0 ? defaultGetLabel : _ref24$getLabel,
isDisabledOption = _ref24.isDisabledOption,
isIndeterminateOption = _ref24.isIndeterminateOption,
options = _ref24.options,
props = _objectWithoutProperties(_ref24, _excluded23);
return /*#__PURE__*/React.createElement("span", _extends({
ref: ref
}, props), field.input.value && field.input.value.map(getLabel).join(', '));
});
var FieldCheckboxes = makeField(CheckboxesInput, CheckboxesOutput);
// SELECT
var lowerStartsWith = function lowerStartsWith(query) {
var value = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '';
return startsWith(toLower(query), toLower(value));
};
export function useOptions(_ref25) {
var value = _ref25.value,
optgroups = _ref25.optgroups,
_ref25$options = _ref25.options,
options = _ref25$options === void 0 ? emptyArray : _ref25$options,
getLabel = _ref25.getLabel,
getId = _ref25.getId,
groupGetId = _ref25.groupGetId,
_ref25$getGroup = _ref25.getGroup,
getGroup = _ref25$getGroup === void 0 ? defaultGetGroup : _ref25$getGroup,
_ref25$comparator = _ref25.comparator,
comparator = _ref25$comparator === void 0 ? lowerStartsWith : _ref25$comparator;
var _React$useState3 = React.useState(''),
_React$useState4 = _slicedToArray(_React$useState3, 2),
query = _React$useState4[0],
setQuery = _React$useState4[1];
var search = function search(e) {
return setQuery(e.target.value);
};
var filteredOptions = React.useMemo(function () {
if (!query) {
return options;
}
return options.filter(function (option) {
return comparator(query, getLabel(option));
});
}, [comparator, query, options, getLabel]);
var groupedOptions = React.useMemo(function () {
if (!optgroups || !optgroups.length) {
return filteredOptions;
}
var optionsByGroup = optgrou