@7shifts/sous-chef 3.51.1 → 3.52.0-beta.1

package/dist/index.modern.js

@@ -5721,6 +5721,9 @@ var DataTable = {
 	emptyStateTitle: "No results found",
 	emptyStateCaption: "Try adding a new item to the list or adjust your search terms."
 };
+var PhoneField = {
+	malformedPhoneNumber: "Malformed phone number. Please enter a valid phone number."
+};
 var en = {
 	PaginationControls: PaginationControls,
 	AsyncSelectField: AsyncSelectField,
@@ -5728,7 +5731,8 @@ var en = {
 	HintModal: HintModal,
 	Calendar: Calendar,
 	Card: Card,
-	DataTable: DataTable
+	DataTable: DataTable,
+	PhoneField: PhoneField
 };
 
 var initialValue = {
@@ -5898,15 +5902,33 @@ var ToastContainer = function ToastContainer(_ref2) {
   });
 };
 
+var initialValue$1 = {
+  country: 'US'
+};
+var ProviderConfigContext = createContext(initialValue$1);
+var useProviderConfig = function useProviderConfig() {
+  var context = useContext(ProviderConfigContext);
+  if (!context) {
+    throw Error('The `<SousChefProvider>` is not set. Please wrap your application with `<SousChefProvider>`');
+  }
+  return context;
+};
+
 var SousChefProvider = function SousChefProvider(_ref) {
   var children = _ref.children,
     _ref$i18n = _ref.i18n,
-    i18n = _ref$i18n === void 0 ? en : _ref$i18n;
-  return React__default.createElement(TranslationsContext.Provider, {
+    i18n = _ref$i18n === void 0 ? en : _ref$i18n,
+    _ref$country = _ref.country,
+    country = _ref$country === void 0 ? 'US' : _ref$country;
+  return React__default.createElement(ProviderConfigContext.Provider, {
+    value: {
+      country: country
+    }
+  }, React__default.createElement(TranslationsContext.Provider, {
     value: {
       i18n: i18n
     }
-  }, React__default.createElement(ToastContainer, null), children);
+  }, React__default.createElement(ToastContainer, null), children));
 };
 
 var styles$a = {"data-table-header":"_1vpCK","data-table-header__item":"_dJWps","data-table-header__item--sortable":"_14AEw","data-table-header__itemfocus":"_2JSFR","data-table-header__item--action":"_29TM7","data-table-header__item-content":"_2Zpt5","data-table-header__item-content--right-align":"_3WtwH","data-table-header__sort-icon":"_3codU"};
@@ -6115,12 +6137,12 @@ var DATA_TABLE_SCROLL_STATES = {
 };
 var AMOUNT_OF_SKELETON_ROWS = 10;
 
-var initialValue$1 = {
+var initialValue$2 = {
   columns: [],
   numberOfRows: 0,
   state: DATA_TABLE_STATES.SKELETON_LOADING
 };
-var Context = createContext(initialValue$1);
+var Context = createContext(initialValue$2);
 var useDataTableContext = function useDataTableContext() {
   var context = useContext(Context);
   if (!context) {
@@ -12101,16 +12123,57 @@ var usePhoneFieldControllers = function usePhoneFieldControllers(_ref) {
     _onChange = _ref.onChange,
     _onBlur = _ref.onBlur,
     error = _ref.error,
-    onMenuInputFocus = _ref.onMenuInputFocus;
+    onMenuInputFocus = _ref.onMenuInputFocus,
+    defaultCountry = _ref.defaultCountry;
+  var __ = useTranslation('PhoneField');
+  var errorMessage = __('malformedPhoneNumber');
   var _useFormContext = useFormContext(),
     formik = _useFormContext.formik;
   var id = useFieldId({
     name: name,
     id: inputId
   });
+  var formikState = getFormikState(name, formik);
+  var phoneFieldValue = formik && formikState && !value ? formikState.value : value;
+  var _useProviderConfig = useProviderConfig(),
+    country = _useProviderConfig.country;
+  var parseMeta = function parseMeta(value) {
+    if (value === '') {
+      return {
+        country: defaultCountry || country,
+        phone: ''
+      };
+    }
+    try {
+      var phone = parsePhoneNumber(value);
+      var formatedPhone = new AsYouType(phone.country).input(value.replace('+' + phone.countryCallingCode, ''));
+      if (!phone.country) {
+        return {
+          country: defaultCountry || country,
+          phone: formatedPhone,
+          parsingError: errorMessage
+        };
+      }
+      return {
+        country: phone.country,
+        phone: formatedPhone
+      };
+    } catch (error) {
+      return {
+        country: defaultCountry || country,
+        phone: value,
+        parsingError: errorMessage
+      };
+    }
+  };
+  var _useState = useState(function () {
+      return parseMeta(phoneFieldValue || '');
+    }),
+    meta = _useState[0],
+    setMeta = _useState[1];
   var controllers = {
     id: id,
-    error: error,
+    error: error || meta.parsingError,
     value: value,
     onChange: function onChange(option) {
       if (_onChange) {
@@ -12129,10 +12192,9 @@ var usePhoneFieldControllers = function usePhoneFieldControllers(_ref) {
       }
     }
   };
-  var formikState = getFormikState(name, formik);
   if (formik && formikState) {
     controllers = _extends({}, controllers, {
-      error: error ? controllers.error : formikState.error,
+      error: error || meta.parsingError ? controllers.error : formikState.error,
       value: value ? controllers.value : formikState.value,
       onChange: function onChange(option) {
         if (_onChange) {
@@ -12154,11 +12216,14 @@ var usePhoneFieldControllers = function usePhoneFieldControllers(_ref) {
       }
     });
   }
-  return controllers;
+  return _extends({}, controllers, {
+    metaData: meta,
+    changeMeta: setMeta
+  });
 };
 
 var usePhoneField = function usePhoneField(_ref) {
-  var _classnames, _controllers$value;
+  var _classnames;
   var autoFocus = _ref.autoFocus,
     disabled = _ref.disabled,
     error = _ref.error,
@@ -12172,14 +12237,16 @@ var usePhoneField = function usePhoneField(_ref) {
     placeholder = _ref.placeholder,
     value = _ref.value,
     ref = _ref.ref,
-    testId = _ref.testId;
+    testId = _ref.testId,
+    defaultCountry = _ref.defaultCountry;
   var controllers = usePhoneFieldControllers({
     error: error,
     id: id,
     name: name,
     onChange: onChange,
     onBlur: onBlur,
-    value: value
+    value: value,
+    defaultCountry: defaultCountry
   });
   var hasError = !!controllers.error;
   var inputProps = {
@@ -12198,7 +12265,7 @@ var usePhoneField = function usePhoneField(_ref) {
     ref: ref,
     size: 1,
     type: 'text',
-    value: (_controllers$value = controllers.value) === null || _controllers$value === void 0 ? void 0 : _controllers$value.phone
+    value: controllers.metaData.phone
   };
   var fieldProps = {
     caption: caption,
@@ -12210,7 +12277,9 @@ var usePhoneField = function usePhoneField(_ref) {
   return {
     inputProps: inputProps,
     fieldProps: fieldProps,
-    fieldValue: controllers.value
+    fieldValue: controllers.value,
+    metaData: controllers.metaData,
+    changeMeta: controllers.changeMeta
   };
 };
 
@@ -12995,7 +13064,7 @@ var CountrySelector = function CountrySelector(_ref) {
 };
 
 var _excluded$2M = ["disabledCountry"];
-var PhoneField = function PhoneField(_ref) {
+var PhoneField$1 = function PhoneField(_ref) {
   var _classNames;
   var _ref$disabledCountry = _ref.disabledCountry,
     disabledCountry = _ref$disabledCountry === void 0 ? false : _ref$disabledCountry,
@@ -13006,14 +13075,15 @@ var PhoneField = function PhoneField(_ref) {
     })),
     inputProps = _usePhoneField.inputProps,
     fieldProps = _usePhoneField.fieldProps,
-    fieldValue = _usePhoneField.fieldValue;
-  var selectedCountry = fieldValue === null || fieldValue === void 0 ? void 0 : fieldValue.country;
+    metaData = _usePhoneField.metaData,
+    changeMeta = _usePhoneField.changeMeta;
+  var selectedCountry = metaData.country;
   var handleCountryChange = function handleCountryChange(countryCode) {
-    inputProps.onChange({
+    changeMeta({
       country: countryCode,
-      phone: '',
-      internationalPhone: ''
+      phone: ''
     });
+    inputProps.onChange('');
     if (inputRef.current) {
       inputRef.current.focus();
     }
@@ -13021,11 +13091,22 @@ var PhoneField = function PhoneField(_ref) {
   var handlePhoneChange = function handlePhoneChange(e) {
     var formatedPhone = new AsYouType(selectedCountry).input(e.target.value);
     e.target.value = formatedPhone;
-    inputProps.onChange({
+    var internationalPhone = '';
+    var parseError = null;
+    try {
+      var phoneNumber = parsePhoneNumber(e.target.value, selectedCountry);
+      internationalPhone = phoneNumber.number;
+    } catch (error) {
+      parseError = error;
+    }
+    if (parseError && parseError.message === 'TOO_LONG') {
+      return;
+    }
+    changeMeta({
       country: selectedCountry,
-      phone: formatedPhone,
-      internationalPhone: ''
+      phone: formatedPhone
     });
+    inputProps.onChange(internationalPhone);
   };
   var handlePhoneBlur = function handlePhoneBlur(e) {
     var internationalPhone = '';
@@ -13035,31 +13116,9 @@ var PhoneField = function PhoneField(_ref) {
     } catch (error) {
       console.warn("PhoneField: " + error);
     }
-    var value = {
-      country: selectedCountry,
-      phone: e.target.value,
-      internationalPhone: internationalPhone
-    };
-    inputProps.onChange(value);
-    inputProps.onBlur(value);
+    inputProps.onChange(internationalPhone);
+    inputProps.onBlur(internationalPhone);
   };
-  useEffect(function () {
-    if (Boolean(fieldValue === null || fieldValue === void 0 ? void 0 : fieldValue.internationalPhone) && (fieldValue === null || fieldValue === void 0 ? void 0 : fieldValue.phone) === '') {
-      var formatedPhone = '';
-      try {
-        var phoneNumber = parsePhoneNumber(fieldValue === null || fieldValue === void 0 ? void 0 : fieldValue.internationalPhone);
-        formatedPhone = new AsYouType(selectedCountry).input(phoneNumber.nationalNumber);
-      } catch (error) {
-        console.warn("PhoneField: " + error);
-      }
-      var value = {
-        country: selectedCountry,
-        phone: formatedPhone,
-        internationalPhone: fieldValue === null || fieldValue === void 0 ? void 0 : fieldValue.internationalPhone
-      };
-      inputProps.onChange(value);
-    }
-  }, [fieldValue === null || fieldValue === void 0 ? void 0 : fieldValue.internationalPhone]);
   return React__default.createElement(Field, _extends({}, fieldProps), React__default.createElement("div", {
     className: styles$1c['phone-field']
   }, !disabledCountry && React__default.createElement(CountrySelector, {
@@ -13416,5 +13475,5 @@ var EmptyState = function EmptyState(props) {
   return emptyStateContainer;
 };
 
-export { Accordion, ActionList, ActionListItem, AsyncSelectField$1 as AsyncSelectField, Avatar, Badge, Bold, BreadcrumbItem, Breadcrumbs, Button, COLORS, Calendar$1 as Calendar, CalloutCard, Card$1 as Card, CheckboxField, Chip, CircularProgress, CurrencyField, DataTable$1 as DataTable, DataTableCell, DataTableEditableCell, DataTableRow, DateField, DateFilter, DateRangeField, Dropdown, DropdownList, DropdownListDivider, DropdownListItem, EmptyState, Form, FormFeedback, FormFooter, FormRow, FormSection, HintModal$1 as HintModal, IconAnalytics, IconArrowDown, IconArrowDownWideShort, IconArrowLeft, IconArrowRight, IconArrowToTop, IconArrowTurnDownRight, IconArrowUp, IconAward, IconAwful, IconAwfulMonochromatic, IconBad, IconBadMonochromatic, IconBalanceScale, IconBalanceScaleLeft, IconBan, IconBarsH, IconBarsV, IconBell, IconBirthdayCake, IconBold, IconBolt, IconBook, IconBriefcase, IconBullseyeArrow, IconCalculator, IconCalendar, IconCalendarAlt, IconCalendarCheck, IconCalendarDay, IconCalendarExclamation, IconCalendarStar, IconCalendarTomorrow, IconCamera, IconCameraSlash, IconCashRegister, IconChartBar, IconCheck, IconCheckCircleIncomplete, IconChevronDown, IconChevronLeft, IconChevronRight, IconChevronUp, IconClipboardList, IconClock, IconCog, IconComment, IconCommentLines, IconCopy, IconCreditCard, IconCreditCardPlus, IconDecent, IconDecentMonochromatic, IconDownload, IconEdit, IconEllipsisV, IconEnvelope, IconEnvelopeOpenDollar, IconExclaimation, IconExclaimationTriangle, IconExpand, IconExternalLink, IconEye, IconEyeSlash, IconFile, IconFilePdf, IconFlag, IconFourDotsCircle, IconFourSquares, IconGavel, IconGif, IconGift, IconGood, IconGoodMonochromatic, IconGreat, IconGreatMonochromatic, IconGrinBeam, IconGripVertical, IconHandshake, IconHatChef, IconImage, IconInfoCircle, IconIslandTropical, IconItalic, IconLaptopSearch, IconLink, IconList, IconListOI as IconListOi, IconLock, IconMagicSolid, IconMapMarker, IconMegaphone, IconMessages, IconMinus, IconMinusCircle, IconMoneyBill, IconMugSaucerSolid, IconNotesMedical, IconOvertime, IconPaperPlane, IconPaperPlaneClock, IconPaperclip, IconPencil, IconPercentage, IconPhone, IconPlateUtensils, IconPlug, IconPlus, IconPrint, IconQuestionCircle, IconRepeat, IconReply, IconRocket, IconSearch, IconSignOut, IconSitemap, IconSlidersH, IconSort, IconStar, IconStarSolid, IconStickyNoteLines, IconStopwatch, IconStrikethrough, IconSync, IconSyncExclaimation, IconTable, IconTachometer, IconTimes, IconTimesOctagon, IconTrash, IconUnderline, IconUndo, IconUniversity, IconUnlock, IconUserComputer, IconUserFriends, IconUserLight, IconUserPlus, IconUserSearch, IconUserSlash, IconUserSolid, IconUserTag, IconUserTie, IconUsers, IconVideo, IconVolume, IconVolumeMute, IconWrench, Inline, InlineBanner, Italic, Link, Modal, ModalBody, ModalFooter, MultiSelectField, Page, PaginationControls$1 as PaginationControls, PasswordField, Paywall, PercentageField, PersistentBanner, PhoneField, Pill, PillSelectField, ProgressBar, RadioGroupBoxOption, RadioGroupField, RadioGroupOption, SIZE_25_PERCENT, SIZE_33_PERCENT, SIZE_50_PERCENT, SIZE_66_PERCENT, SIZE_75_PERCENT, SegmentedControl, SelectField$1 as SelectField, Skeleton, SousChefProvider, Spinner, Stack, Text, TextAreaField, TextField, TimeField, TimeRangeField, Toggle, ToolbarSelect, Tooltip, Underline, WeekField, ZINDEX, toast, useDataTableContext };
+export { Accordion, ActionList, ActionListItem, AsyncSelectField$1 as AsyncSelectField, Avatar, Badge, Bold, BreadcrumbItem, Breadcrumbs, Button, COLORS, Calendar$1 as Calendar, CalloutCard, Card$1 as Card, CheckboxField, Chip, CircularProgress, CurrencyField, DataTable$1 as DataTable, DataTableCell, DataTableEditableCell, DataTableRow, DateField, DateFilter, DateRangeField, Dropdown, DropdownList, DropdownListDivider, DropdownListItem, EmptyState, Form, FormFeedback, FormFooter, FormRow, FormSection, HintModal$1 as HintModal, IconAnalytics, IconArrowDown, IconArrowDownWideShort, IconArrowLeft, IconArrowRight, IconArrowToTop, IconArrowTurnDownRight, IconArrowUp, IconAward, IconAwful, IconAwfulMonochromatic, IconBad, IconBadMonochromatic, IconBalanceScale, IconBalanceScaleLeft, IconBan, IconBarsH, IconBarsV, IconBell, IconBirthdayCake, IconBold, IconBolt, IconBook, IconBriefcase, IconBullseyeArrow, IconCalculator, IconCalendar, IconCalendarAlt, IconCalendarCheck, IconCalendarDay, IconCalendarExclamation, IconCalendarStar, IconCalendarTomorrow, IconCamera, IconCameraSlash, IconCashRegister, IconChartBar, IconCheck, IconCheckCircleIncomplete, IconChevronDown, IconChevronLeft, IconChevronRight, IconChevronUp, IconClipboardList, IconClock, IconCog, IconComment, IconCommentLines, IconCopy, IconCreditCard, IconCreditCardPlus, IconDecent, IconDecentMonochromatic, IconDownload, IconEdit, IconEllipsisV, IconEnvelope, IconEnvelopeOpenDollar, IconExclaimation, IconExclaimationTriangle, IconExpand, IconExternalLink, IconEye, IconEyeSlash, IconFile, IconFilePdf, IconFlag, IconFourDotsCircle, IconFourSquares, IconGavel, IconGif, IconGift, IconGood, IconGoodMonochromatic, IconGreat, IconGreatMonochromatic, IconGrinBeam, IconGripVertical, IconHandshake, IconHatChef, IconImage, IconInfoCircle, IconIslandTropical, IconItalic, IconLaptopSearch, IconLink, IconList, IconListOI as IconListOi, IconLock, IconMagicSolid, IconMapMarker, IconMegaphone, IconMessages, IconMinus, IconMinusCircle, IconMoneyBill, IconMugSaucerSolid, IconNotesMedical, IconOvertime, IconPaperPlane, IconPaperPlaneClock, IconPaperclip, IconPencil, IconPercentage, IconPhone, IconPlateUtensils, IconPlug, IconPlus, IconPrint, IconQuestionCircle, IconRepeat, IconReply, IconRocket, IconSearch, IconSignOut, IconSitemap, IconSlidersH, IconSort, IconStar, IconStarSolid, IconStickyNoteLines, IconStopwatch, IconStrikethrough, IconSync, IconSyncExclaimation, IconTable, IconTachometer, IconTimes, IconTimesOctagon, IconTrash, IconUnderline, IconUndo, IconUniversity, IconUnlock, IconUserComputer, IconUserFriends, IconUserLight, IconUserPlus, IconUserSearch, IconUserSlash, IconUserSolid, IconUserTag, IconUserTie, IconUsers, IconVideo, IconVolume, IconVolumeMute, IconWrench, Inline, InlineBanner, Italic, Link, Modal, ModalBody, ModalFooter, MultiSelectField, Page, PaginationControls$1 as PaginationControls, PasswordField, Paywall, PercentageField, PersistentBanner, PhoneField$1 as PhoneField, Pill, PillSelectField, ProgressBar, RadioGroupBoxOption, RadioGroupField, RadioGroupOption, SIZE_25_PERCENT, SIZE_33_PERCENT, SIZE_50_PERCENT, SIZE_66_PERCENT, SIZE_75_PERCENT, SegmentedControl, SelectField$1 as SelectField, Skeleton, SousChefProvider, Spinner, Stack, Text, TextAreaField, TextField, TimeField, TimeRangeField, Toggle, ToolbarSelect, Tooltip, Underline, WeekField, ZINDEX, toast, useDataTableContext };
 //# sourceMappingURL=index.modern.js.map