@pelcro/react-pelcro-js 3.0.0-beta.10 → 3.0.0-beta.11

package/dist/index.cjs.js

@@ -3808,7 +3808,7 @@ var gift$1 = {
 		lastName: "Last name",
 		email: "Email",
 		startDate: "Gift date",
-		giftMessage: "Gift message (200 characters max)",
+		giftMessage: "Gift message ({{count}} characters remaining)",
 		required: "required",
 		firstNamePlaceholder: "First name",
 		lastNamePlaceholder: "Last name",
@@ -3904,7 +3904,7 @@ var gift = {
 		lastName: "Nom de famille",
 		email: "Adresse courriel",
 		startDate: "Date de début",
-		giftMessage: "Message du cadeau (200 caractères max)",
+		giftMessage: "Message du cadeau ({{count}} caractères restants)",
 		required: "Champs obligatoires",
 		firstNamePlaceholder: "Prénom",
 		lastNamePlaceholder: "Nom de famille",
@@ -19553,6 +19553,8 @@ function TextArea({
  */
 
 function GiftCreateMessage(props) {
+  var _ref, _state$giftMessage;
+
   const {
     t
   } = useTranslation("register");
@@ -19560,6 +19562,8 @@ function GiftCreateMessage(props) {
     dispatch,
     state
   } = React.useContext(store$6);
+  const MAX_CHARS_COUNT = 200;
+  const remainingCharsCount = (_ref = MAX_CHARS_COUNT - ((_state$giftMessage = state.giftMessage) === null || _state$giftMessage === void 0 ? void 0 : _state$giftMessage.length)) !== null && _ref !== void 0 ? _ref : 0;
 
   const handleInputChange = value => {
     dispatch({
@@ -19577,6 +19581,9 @@ function GiftCreateMessage(props) {
     value: state.giftMessage,
     maxLength: "200",
     rows: 3,
+    label: t("gift.labels.giftMessage", {
+      count: remainingCharsCount
+    }),
     tooltipText: t("gift.messages.giftMessageInfo")
   }, props));
 }
@@ -19626,8 +19633,7 @@ const GiftCreateView = props => {
   }, /*#__PURE__*/React__default['default'].createElement(GiftCreateMessage, {
     autoComplete: "gift-message",
     id: "pelcro-input-gift-message",
-    errorId: "pelcro-input-gift-message-error",
-    label: t("gift.labels.giftMessage")
+    errorId: "pelcro-input-gift-message-error"
   })), /*#__PURE__*/React__default['default'].createElement("p", {
     className: "plc-text-gray-900 pelcro-footnote"
   }, "* ", t("gift.labels.required")), /*#__PURE__*/React__default['default'].createElement(GiftCreateSubmitButton, {

package/dist/index.esm.js

@@ -3778,7 +3778,7 @@ var gift$1 = {
 		lastName: "Last name",
 		email: "Email",
 		startDate: "Gift date",
-		giftMessage: "Gift message (200 characters max)",
+		giftMessage: "Gift message ({{count}} characters remaining)",
 		required: "required",
 		firstNamePlaceholder: "First name",
 		lastNamePlaceholder: "Last name",
@@ -3874,7 +3874,7 @@ var gift = {
 		lastName: "Nom de famille",
 		email: "Adresse courriel",
 		startDate: "Date de début",
-		giftMessage: "Message du cadeau (200 caractères max)",
+		giftMessage: "Message du cadeau ({{count}} caractères restants)",
 		required: "Champs obligatoires",
 		firstNamePlaceholder: "Prénom",
 		lastNamePlaceholder: "Nom de famille",
@@ -19523,6 +19523,8 @@ function TextArea({
  */
 
 function GiftCreateMessage(props) {
+  var _ref, _state$giftMessage;
+
   const {
     t
   } = useTranslation("register");
@@ -19530,6 +19532,8 @@ function GiftCreateMessage(props) {
     dispatch,
     state
   } = useContext(store$6);
+  const MAX_CHARS_COUNT = 200;
+  const remainingCharsCount = (_ref = MAX_CHARS_COUNT - ((_state$giftMessage = state.giftMessage) === null || _state$giftMessage === void 0 ? void 0 : _state$giftMessage.length)) !== null && _ref !== void 0 ? _ref : 0;
 
   const handleInputChange = value => {
     dispatch({
@@ -19547,6 +19551,9 @@ function GiftCreateMessage(props) {
     value: state.giftMessage,
     maxLength: "200",
     rows: 3,
+    label: t("gift.labels.giftMessage", {
+      count: remainingCharsCount
+    }),
     tooltipText: t("gift.messages.giftMessageInfo")
   }, props));
 }
@@ -19596,8 +19603,7 @@ const GiftCreateView = props => {
   }, /*#__PURE__*/React__default.createElement(GiftCreateMessage, {
     autoComplete: "gift-message",
     id: "pelcro-input-gift-message",
-    errorId: "pelcro-input-gift-message-error",
-    label: t("gift.labels.giftMessage")
+    errorId: "pelcro-input-gift-message-error"
   })), /*#__PURE__*/React__default.createElement("p", {
     className: "plc-text-gray-900 pelcro-footnote"
   }, "* ", t("gift.labels.required")), /*#__PURE__*/React__default.createElement(GiftCreateSubmitButton, {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@pelcro/react-pelcro-js",
   "description": "Pelcro's React UI Elements",
-  "version": "3.0.0-beta.10",
+  "version": "3.0.0-beta.11",
   "license": "MIT",
   "private": false,
   "main": "dist/index.cjs.js",