From 25ca61d769e8015370b8bfac161c953cc2963dc2 Mon Sep 17 00:00:00 2001
From: mertsincan <sincan.mert@gmail.com>
Date: Sun, 10 Jan 2021 14:15:24 +0300
Subject: [PATCH] Fixed #1749 - Locale API

---
 exports/api.d.ts                              |  6 +-
 exports/api.js                                |  4 ++
 exports/utils.d.ts                            |  2 -
 exports/utils.js                              |  3 -
 src/App.js                                    |  2 +-
 src/components/api/Locale.js                  | 65 +++++++++++++++++++
 src/components/{utils => api}/PrimeReact.js   |  2 +
 src/components/calendar/Calendar.js           | 53 ++++++++-------
 src/components/confirmdialog/ConfirmDialog.js | 17 +++--
 src/components/confirmpopup/ConfirmPopup.js   | 17 +++--
 src/components/fileupload/FileUpload.js       | 28 ++++++--
 src/components/password/Password.js           | 35 +++++++---
 src/components/ripple/Ripple.js               |  2 +-
 src/showcase/calendar/CalendarDemo.js         | 25 +++----
 src/showcase/ripple/RippleDoc.js              |  8 +--
 src/showcase/setup/SetupPage.js               |  2 +-
 16 files changed, 195 insertions(+), 76 deletions(-)
 create mode 100644 exports/api.js
 delete mode 100644 exports/utils.d.ts
 delete mode 100644 exports/utils.js
 create mode 100644 src/components/api/Locale.js
 rename src/components/{utils => api}/PrimeReact.js (70%)

diff --git a/exports/api.d.ts b/exports/api.d.ts
index cec0fa8876..a6c3d0c1ff 100644
--- a/exports/api.d.ts
+++ b/exports/api.d.ts
@@ -1,3 +1,7 @@
+import PrimeReact from './components/api/PrimeReact';
+
+export default PrimeReact;
+export * from './components/api/Locale';
 export * from './components/menuitem/MenuItem';
 export * from './components/selectitem/SelectItem';
-export * from './components/treenode/TreeNode';
\ No newline at end of file
+export * from './components/treenode/TreeNode';
diff --git a/exports/api.js b/exports/api.js
new file mode 100644
index 0000000000..bd0d863a76
--- /dev/null
+++ b/exports/api.js
@@ -0,0 +1,4 @@
+'use strict';
+
+module.exports = require('./components/api/PrimeReact');
+module.exports = require('./components/api/Locale');
diff --git a/exports/utils.d.ts b/exports/utils.d.ts
deleted file mode 100644
index 5de547fa57..0000000000
--- a/exports/utils.d.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-import PrimeReact from './components/utils/PrimeReact';
-export default PrimeReact;
diff --git a/exports/utils.js b/exports/utils.js
deleted file mode 100644
index ec61a644d2..0000000000
--- a/exports/utils.js
+++ /dev/null
@@ -1,3 +0,0 @@
-'use strict';
-
-module.exports = require('./components/utils/PrimeReact');
\ No newline at end of file
diff --git a/src/App.js b/src/App.js
index b8f9cc642e..10377596a5 100644
--- a/src/App.js
+++ b/src/App.js
@@ -21,7 +21,7 @@ import AppConfig from './AppConfig';
 
 import AppContentContext from './AppContentContext';
 import { Toast } from './components/toast/Toast';
-import PrimeReact from './components/utils/PrimeReact';
+import PrimeReact from './components/api/PrimeReact';
 import { AppChangelogDialog } from './AppChangelogDialog';
 
 export class App extends Component {
diff --git a/src/components/api/Locale.js b/src/components/api/Locale.js
new file mode 100644
index 0000000000..6ef832b5a8
--- /dev/null
+++ b/src/components/api/Locale.js
@@ -0,0 +1,65 @@
+import PrimeReact from './PrimeReact';
+
+let locales = {
+    'en': {
+        accept: 'Yes',
+        reject: 'No',
+        choose: 'Choose',
+        upload: 'Upload',
+        cancel: 'Cancel',
+        dayNames: ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'],
+        dayNamesShort: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
+        dayNamesMin: ['Su','Mo','Tu','We','Th','Fr','Sa'],
+        monthNames: ['January','February','March','April','May','June','July','August','September','October','November','December'],
+        monthNamesShort: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun','Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
+        today: 'Today',
+        clear: 'Clear',
+        weekHeader: 'Wk',
+        firstDayOfWeek: 0,
+        dateFormat: 'mm/dd/yy',
+        weak: 'Weak',
+        medium: 'Medium',
+        strong: 'Strong',
+        passwordPrompt: 'Enter a password'
+    }
+};
+
+function locale(locale) {
+    if (locale) {
+        PrimeReact.locale = locale;
+    }
+
+    return {
+        locale: PrimeReact.locale,
+        options: locales[PrimeReact.locale]
+    }
+}
+
+function addLocale(locale, options) {
+    locales[locale] = { ...locales['en'], ...options };
+}
+
+function updateLocaleOption(key, value, locale) {
+    localeOptions(locale)[key] = value;
+}
+
+function updateLocaleOptions(options, locale) {
+    const _locale = locale || PrimeReact.locale;
+    locales[_locale] = { ...locales[_locale], ...options };
+}
+
+function localeOption(key, locale) {
+    try {
+        return localeOptions(locale)[key];
+    }
+    catch(error) {
+        throw new Error(`The ${key} option is not found in the current locale('${locale || PrimeReact.locale}').`);
+    }
+}
+
+function localeOptions(locale) {
+    const _locale = locale || PrimeReact.locale;
+    return locales[_locale];
+}
+
+export { locale, addLocale, updateLocaleOption, updateLocaleOptions, localeOption, localeOptions };
diff --git a/src/components/utils/PrimeReact.js b/src/components/api/PrimeReact.js
similarity index 70%
rename from src/components/utils/PrimeReact.js
rename to src/components/api/PrimeReact.js
index f8d4783b63..13656dd0f1 100644
--- a/src/components/utils/PrimeReact.js
+++ b/src/components/api/PrimeReact.js
@@ -1,4 +1,6 @@
 export default class PrimeReact {
 
     static ripple = false;
+
+    static locale = 'en';
 }
diff --git a/src/components/calendar/Calendar.js b/src/components/calendar/Calendar.js
index 77b0129ae0..29af5c98de 100644
--- a/src/components/calendar/Calendar.js
+++ b/src/components/calendar/Calendar.js
@@ -11,6 +11,7 @@ import { CSSTransition } from 'react-transition-group';
 import { Ripple } from '../ripple/Ripple';
 import UniqueComponentId from '../utils/UniqueComponentId';
 import ConnectedOverlayScrollHandler from '../utils/ConnectedOverlayScrollHandler';
+import { localeOption, localeOptions } from '../api/Locale';
 
 export class Calendar extends Component {
 
@@ -50,17 +51,7 @@ export class Calendar extends Component {
         shortYearCutoff: '+10',
         hideOnDateTimeSelect: false,
         showWeek: false,
-        locale: {
-            firstDayOfWeek: 0,
-            dayNames: ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"],
-            dayNamesShort: ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"],
-            dayNamesMin: ["Su","Mo","Tu","We","Th","Fr","Sa"],
-            monthNames: [ "January","February","March","April","May","June","July","August","September","October","November","December" ],
-            monthNamesShort: [ "Jan", "Feb", "Mar", "Apr", "May", "Jun","Jul", "Aug", "Sep", "Oct", "Nov", "Dec" ],
-            today: 'Today',
-            clear: 'Clear',
-            weekHeader: 'Wk'
-        },
+        locale: null,
         dateFormat: 'mm/dd/yy',
         panelStyle: null,
         panelClassName: null,
@@ -131,7 +122,7 @@ export class Calendar extends Component {
         shortYearCutoff: PropTypes.string,
         hideOnDateTimeSelect: PropTypes.bool,
         showWeek: PropTypes.bool,
-        locale: PropTypes.object,
+        locale: PropTypes.string,
         dateFormat: PropTypes.string,
         panelStyle: PropTypes.object,
         panelClassName: PropTypes.string,
@@ -1668,14 +1659,15 @@ export class Calendar extends Component {
     }
 
     getSundayIndex() {
-        return this.props.locale.firstDayOfWeek > 0 ? 7 - this.props.locale.firstDayOfWeek : 0;
+        const firstDayOfWeek = localeOption('firstDayOfWeek', this.props.locale);
+        return firstDayOfWeek > 0 ? 7 - firstDayOfWeek : 0;
     }
 
     createWeekDays() {
         let weekDays = [];
-        let dayIndex = this.props.locale.firstDayOfWeek;
+        let { firstDayOfWeek: dayIndex, dayNamesMin } = localeOptions(this.props.locale);
         for(let i = 0; i < 7; i++) {
-            weekDays.push(this.props.locale.dayNamesMin[dayIndex]);
+            weekDays.push(dayNamesMin[dayIndex]);
             dayIndex = (dayIndex === 6) ? 0 : ++dayIndex;
         }
 
@@ -2052,6 +2044,7 @@ export class Calendar extends Component {
             };
         let output = '';
         let literal = false;
+        const { dayNamesShort, dayNames, monthNamesShort, monthNames } = localeOptions(this.props.locale);
 
         if (date) {
             for (iFormat = 0; iFormat < format.length; iFormat++) {
@@ -2067,7 +2060,7 @@ export class Calendar extends Component {
                             output += formatNumber('d', date.getDate(), 2);
                             break;
                         case 'D':
-                            output += formatName('D', date.getDay(), this.props.locale.dayNamesShort, this.props.locale.dayNames);
+                            output += formatName('D', date.getDay(), dayNamesShort, dayNames);
                             break;
                         case 'o':
                             output += formatNumber('o',
@@ -2079,7 +2072,7 @@ export class Calendar extends Component {
                             output += formatNumber('m', date.getMonth() + 1, 2);
                             break;
                         case 'M':
-                            output += formatName('M',date.getMonth(), this.props.locale.monthNamesShort, this.props.locale.monthNames);
+                            output += formatName('M',date.getMonth(), monthNamesShort, monthNames);
                             break;
                         case 'y':
                             output += lookAhead('y') ? date.getFullYear() : (date.getFullYear() % 100 < 10 ? '0' : '') + (date.getFullYear() % 100);
@@ -2317,6 +2310,8 @@ export class Calendar extends Component {
             day = 1;
         }
 
+        const { dayNamesShort, dayNames, monthNamesShort, monthNames } = localeOptions(this.props.locale);
+
         for (iFormat = 0; iFormat < format.length; iFormat++) {
             if(literal) {
                 if(format.charAt(iFormat) === "'" && !lookAhead("'")) {
@@ -2330,7 +2325,7 @@ export class Calendar extends Component {
                         day = getNumber("d");
                         break;
                     case "D":
-                        getName("D", this.props.locale.dayNamesShort, this.props.locale.dayNames);
+                        getName("D", dayNamesShort, dayNames);
                         break;
                     case "o":
                         doy = getNumber("o");
@@ -2339,7 +2334,7 @@ export class Calendar extends Component {
                         month = getNumber("m");
                         break;
                     case "M":
-                        month = getName("M", this.props.locale.monthNamesShort, this.props.locale.monthNames);
+                        month = getName("M", monthNamesShort, monthNames);
                         break;
                     case "y":
                         year = getNumber("y");
@@ -2433,14 +2428,16 @@ export class Calendar extends Component {
     }
 
     renderTitleMonthElement(month) {
+        const monthNames = localeOption('monthNames', this.props.locale);
+
         if (this.props.monthNavigator && this.props.view !== 'month') {
-            let viewDate = this.getViewDate();
-            let viewMonth = viewDate.getMonth();
+            const viewDate = this.getViewDate();
+            const viewMonth = viewDate.getMonth();
 
             return (
                 <select className="p-datepicker-month" onChange={this.onMonthDropdownChange} value={viewMonth}>
                     {
-                        this.props.locale.monthNames.map((month, index) => {
+                        monthNames.map((month, index) => {
                             if ((!this.isInMinYear(viewDate) || index >= this.props.minDate.getMonth()) && (!this.isInMaxYear(viewDate) || index <= this.props.maxDate.getMonth())) {
                                 return <option key={month} value={index}>{month}</option>
                             }
@@ -2452,7 +2449,7 @@ export class Calendar extends Component {
         }
         else {
             return (
-                <span className="p-datepicker-month">{this.props.locale.monthNames[month]}</span>
+                <span className="p-datepicker-month">{monthNames[month]}</span>
             );
         }
     }
@@ -2515,7 +2512,7 @@ export class Calendar extends Component {
         if (this.props.showWeek) {
             const weekHeader = (
                 <th scope="col" key={'wn'} className="p-datepicker-weekheader p-disabled">
-                    <span>{this.props.locale['weekHeader']}</span>
+                    <span>{localeOption('weekHeader', this.props.locale)}</span>
                 </th>
             );
 
@@ -2644,7 +2641,8 @@ export class Calendar extends Component {
 
     renderMonthViewMonth(index) {
         const className = classNames('p-monthpicker-month', {'p-highlight': this.isMonthSelected(index)});
-        const monthName = this.props.locale.monthNamesShort[index];
+        const monthNamesShort = localeOption('monthNamesShort', this.props.locale);
+        const monthName = monthNamesShort[index];
 
         return (
             <span key={monthName} className={className} onClick={event => this.onMonthSelect(event, index)} onKeyDown={event => this.onMonthCellKeydown(event, index)}>
@@ -2882,11 +2880,12 @@ export class Calendar extends Component {
         if (this.props.showButtonBar) {
             const todayClassName = classNames('p-button-text', this.props.todayButtonClassName);
             const clearClassName = classNames('p-button-text', this.props.clearButtonClassName);
+            const { today, clear } = localeOptions(this.props.locale);
 
             return (
                 <div className="p-datepicker-buttonbar">
-                    <Button type="button" label={this.props.locale.today} onClick={this.onTodayButtonClick} onKeyDown={e => this.onContainerButtonKeydown(e)} className={todayClassName} />
-                    <Button type="button" label={this.props.locale.clear} onClick={this.onClearButtonClick} onKeyDown={e => this.onContainerButtonKeydown(e)} className={clearClassName} />
+                    <Button type="button" label={today} onClick={this.onTodayButtonClick} onKeyDown={e => this.onContainerButtonKeydown(e)} className={todayClassName} />
+                    <Button type="button" label={clear} onClick={this.onClearButtonClick} onKeyDown={e => this.onContainerButtonKeydown(e)} className={clearClassName} />
                 </div>
             );
         }
diff --git a/src/components/confirmdialog/ConfirmDialog.js b/src/components/confirmdialog/ConfirmDialog.js
index 82e1be90db..ec3a3fdeec 100644
--- a/src/components/confirmdialog/ConfirmDialog.js
+++ b/src/components/confirmdialog/ConfirmDialog.js
@@ -6,6 +6,7 @@ import { Dialog } from '../dialog/Dialog';
 import { Button } from '../button/Button';
 import DomHandler from '../utils/DomHandler';
 import ObjectUtils from '../utils/ObjectUtils';
+import { localeOption } from '../api/Locale';
 
 export function confirmDialog(props) {
     let appendTo = props.appendTo || document.body;
@@ -46,8 +47,8 @@ export class ConfirmDialog extends Component {
     static defaultProps = {
         visible: false,
         message: null,
-        rejectLabel: 'No',
-        acceptLabel: 'Yes',
+        rejectLabel: null,
+        acceptLabel: null,
         icon: null,
         rejectIcon: null,
         acceptIcon: null,
@@ -89,6 +90,14 @@ export class ConfirmDialog extends Component {
         this.hide = this.hide.bind(this);
     }
 
+    acceptLabel() {
+        return this.props.acceptLabel || localeOption('accept');
+    }
+
+    rejectLabel() {
+        return this.props.rejectLabel || localeOption('reject');
+    }
+
     accept() {
         if (this.props.accept) {
             this.props.accept();
@@ -131,8 +140,8 @@ export class ConfirmDialog extends Component {
 
         return this.props.footer ? ObjectUtils.getJSXElement(this.props.footer, this.props) : (
             <>
-                <Button label={this.props.rejectLabel} icon={this.props.rejectIcon} className={rejectClassName} onClick={this.reject} />
-                <Button label={this.props.acceptLabel} icon={this.props.acceptIcon} className={acceptClassName} onClick={this.accept} autoFocus />
+                <Button label={this.rejectLabel()} icon={this.props.rejectIcon} className={rejectClassName} onClick={this.reject} />
+                <Button label={this.acceptLabel()} icon={this.props.acceptIcon} className={acceptClassName} onClick={this.accept} autoFocus />
             </>
         )
     }
diff --git a/src/components/confirmpopup/ConfirmPopup.js b/src/components/confirmpopup/ConfirmPopup.js
index 52325efb3e..302f29c552 100644
--- a/src/components/confirmpopup/ConfirmPopup.js
+++ b/src/components/confirmpopup/ConfirmPopup.js
@@ -8,6 +8,7 @@ import UniqueComponentId from '../utils/UniqueComponentId';
 import ConnectedOverlayScrollHandler from '../utils/ConnectedOverlayScrollHandler';
 import DomHandler from '../utils/DomHandler';
 import ObjectUtils from '../utils/ObjectUtils';
+import { localeOption } from '../api/Locale';
 
 export function confirmPopup(props) {
     let appendTo = props.appendTo || document.body;
@@ -49,8 +50,8 @@ export class ConfirmPopup extends Component {
         target: null,
         visible: false,
         message: null,
-        rejectLabel: 'No',
-        acceptLabel: 'Yes',
+        rejectLabel: null,
+        acceptLabel: null,
         icon: null,
         rejectIcon: null,
         acceptIcon: null,
@@ -104,6 +105,14 @@ export class ConfirmPopup extends Component {
         this.id = this.props.id || UniqueComponentId();
     }
 
+    acceptLabel() {
+        return this.props.acceptLabel || localeOption('accept');
+    }
+
+    rejectLabel() {
+        return this.props.rejectLabel || localeOption('reject');
+    }
+
     bindDocumentClickListener() {
         if(!this.documentClickListener && this.props.dismissable) {
             this.documentClickListener = (event) => {
@@ -284,8 +293,8 @@ export class ConfirmPopup extends Component {
 
         const content = this.props.footer ? ObjectUtils.getJSXElement(this.props.footer, this.props) : (
             <>
-                <Button label={this.props.rejectLabel} icon={this.props.rejectIcon} className={rejectClassName} onClick={this.reject} />
-                <Button label={this.props.acceptLabel} icon={this.props.acceptIcon} className={acceptClassName} onClick={this.accept} autoFocus />
+                <Button label={this.rejectLabel()} icon={this.props.rejectIcon} className={rejectClassName} onClick={this.reject} />
+                <Button label={this.acceptLabel()} icon={this.props.acceptIcon} className={acceptClassName} onClick={this.accept} autoFocus />
             </>
         )
 
diff --git a/src/components/fileupload/FileUpload.js b/src/components/fileupload/FileUpload.js
index 5ff1fb7b74..b2b90eb4c1 100644
--- a/src/components/fileupload/FileUpload.js
+++ b/src/components/fileupload/FileUpload.js
@@ -7,6 +7,7 @@ import DomHandler from '../utils/DomHandler';
 import { classNames } from '../utils/ClassNames';
 import { Ripple } from '../ripple/Ripple';
 import ObjectUtils from '../utils/ObjectUtils';
+import { localeOption } from '../api/Locale';
 
 export class FileUpload extends Component {
 
@@ -26,9 +27,9 @@ export class FileUpload extends Component {
         className: null,
         widthCredentials: false,
         previewWidth: 50,
-        chooseLabel: 'Choose',
-        uploadLabel: 'Upload',
-        cancelLabel: 'Cancel',
+        chooseLabel: null,
+        uploadLabel: null,
+        cancelLabel: null,
         customUpload: false,
         emptyTemplate: null,
         onBeforeUpload: null,
@@ -120,6 +121,18 @@ export class FileUpload extends Component {
         return this.props.disabled || !this.hasFiles();
     }
 
+    chooseButtonLabel() {
+        return this.props.chooseLabel || localeOption('choose');
+    }
+
+    uploadButtonLabel() {
+        return this.props.uploadLabel || localeOption('upload');
+    }
+
+    cancelButtonLabel() {
+        return this.props.cancelLabel || localeOption('cancel');
+    }
+
     remove(event, index) {
         this.clearInputElement();
         let currentFiles = [...this.state.files];
@@ -398,7 +411,7 @@ export class FileUpload extends Component {
                 <input ref={(el) => this.fileInput = el} type="file" onChange={this.onFileSelect}
                     multiple={this.props.multiple} accept={this.props.accept} disabled={this.chooseDisabled()} />
                 <span className="p-button-icon p-button-icon-left p-clickable pi pi-fw pi-plus"></span>
-                <span className="p-button-label p-clickable">{this.props.chooseLabel}</span>
+                <span className="p-button-label p-clickable">{this.chooseButtonLabel()}</span>
                 <Ripple />
             </span>
         );
@@ -441,8 +454,8 @@ export class FileUpload extends Component {
         const emptyContent = this.renderEmptyContent();
 
         if (!this.props.auto) {
-            uploadButton = <Button type="button" label={this.props.uploadLabel} icon="pi pi-upload" onClick={this.upload} disabled={this.uploadDisabled()} />;
-            cancelButton = <Button type="button" label={this.props.cancelLabel} icon="pi pi-times" onClick={this.clear} disabled={this.cancelDisabled()} />;
+            uploadButton = <Button type="button" label={this.uploadButtonLabel()} icon="pi pi-upload" onClick={this.upload} disabled={this.uploadDisabled()} />;
+            cancelButton = <Button type="button" label={this.cancelButtonLabel()} icon="pi pi-times" onClick={this.clear} disabled={this.cancelDisabled()} />;
         }
 
         if (this.hasFiles()) {
@@ -472,7 +485,8 @@ export class FileUpload extends Component {
         const className = classNames('p-fileupload p-fileupload-basic p-component', this.props.className);
         const buttonClassName = classNames('p-button p-component p-fileupload-choose', { 'p-fileupload-choose-selected': this.hasFiles(), 'p-disabled': this.props.disabled, 'p-focus': this.state.focused });
         const iconClassName = classNames('p-button-icon p-button-icon-left pi', { 'pi-plus': !this.hasFiles() || this.props.auto, 'pi-upload': this.hasFiles() && !this.props.auto });
-        const label = this.props.auto ? this.props.chooseLabel : this.hasFiles() ? this.state.files[0].name : this.props.chooseLabel;
+        const chooseLabel = this.chooseButtonLabel();
+        const label = this.props.auto ? chooseLabel : this.hasFiles() ? this.state.files[0].name : chooseLabel;
 
         return (
             <div className={className}>
diff --git a/src/components/password/Password.js b/src/components/password/Password.js
index 29b9308174..4f039e0867 100644
--- a/src/components/password/Password.js
+++ b/src/components/password/Password.js
@@ -9,15 +9,16 @@ import UniqueComponentId from '../utils/UniqueComponentId';
 import { CSSTransition } from 'react-transition-group';
 import { classNames } from '../utils/ClassNames';
 import ConnectedOverlayScrollHandler from '../utils/ConnectedOverlayScrollHandler';
+import { localeOption } from '../api/Locale';
 
 export class Password extends Component {
 
     static defaultProps = {
         id: null,
-        promptLabel: 'Enter a password',
-        weakLabel: 'Weak',
-        mediumLabel: 'Medium',
-        strongLabel: 'Strong',
+        promptLabel: null,
+        weakLabel: null,
+        mediumLabel: null,
+        strongLabel: null,
         mediumRegex: '^(((?=.*[a-z])(?=.*[A-Z]))|((?=.*[a-z])(?=.*[0-9]))|((?=.*[A-Z])(?=.*[0-9])))(?=.{6,})',
         strongRegex: '^(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.{8,})',
         feedback: true,
@@ -48,7 +49,7 @@ export class Password extends Component {
         this.state = {
             overlayVisible: false,
             meter: null,
-            infoText: props.promptLabel
+            infoText: this.promptLabel()
         };
 
         this.onFocus = this.onFocus.bind(this);
@@ -63,6 +64,22 @@ export class Password extends Component {
         this.strongCheckRegExp = new RegExp(this.props.strongRegex);
     }
 
+    promptLabel() {
+        return this.props.promptLabel || localeOption('passwordPrompt');
+    }
+
+    weakLabel() {
+        return this.props.weakLabel || localeOption('weak');
+    }
+
+    mediumLabel() {
+        return this.props.mediumLabel || localeOption('medium');
+    }
+
+    strongLabel() {
+        return this.props.strongLabel || localeOption('strong');
+    }
+
     showOverlay() {
         this.setState({ overlayVisible: true });
     }
@@ -115,7 +132,7 @@ export class Password extends Component {
 
             switch (this.testStrength(value)) {
                 case 1:
-                    label = this.props.weakLabel;
+                    label = this.weakLabel();
                     meter = {
                         strength: 'weak',
                         width: '33.33%'
@@ -123,7 +140,7 @@ export class Password extends Component {
                     break;
 
                 case 2:
-                    label = this.props.mediumLabel;
+                    label = this.mediumLabel();
                     meter = {
                         strength: 'medium',
                         width: '66.66%'
@@ -131,7 +148,7 @@ export class Password extends Component {
                     break;
 
                 case 3:
-                    label = this.props.strongLabel;
+                    label = this.strongLabel();
                     meter = {
                         strength: 'strong',
                         width: '100%'
@@ -139,7 +156,7 @@ export class Password extends Component {
                     break;
 
                 default:
-                    label = this.props.promptLabel;
+                    label = this.promptLabel();
                     meter = null;
                     break;
             }
diff --git a/src/components/ripple/Ripple.js b/src/components/ripple/Ripple.js
index fe6c03c6eb..345a21bb42 100644
--- a/src/components/ripple/Ripple.js
+++ b/src/components/ripple/Ripple.js
@@ -1,6 +1,6 @@
 import React, { Component } from 'react';
 import DomHandler from '../utils/DomHandler';
-import PrimeReact from '../utils/PrimeReact';
+import PrimeReact from '../api/PrimeReact';
 
 export class Ripple extends Component {
 
diff --git a/src/showcase/calendar/CalendarDemo.js b/src/showcase/calendar/CalendarDemo.js
index 2a62eba119..6841058629 100644
--- a/src/showcase/calendar/CalendarDemo.js
+++ b/src/showcase/calendar/CalendarDemo.js
@@ -2,6 +2,7 @@ import React, { Component } from 'react';
 import { Calendar } from '../../components/calendar/Calendar';
 import { CalendarDoc } from './CalendarDoc';
 import { AppInlineHeader } from '../../AppInlineHeader';
+import { addLocale } from '../../components/api/Locale';
 
 export class CalendarDemo extends Component {
 
@@ -46,6 +47,17 @@ export class CalendarDemo extends Component {
         this.invalidDates = [today];
 
         this.dateTemplate = this.dateTemplate.bind(this);
+
+        addLocale('es', {
+            firstDayOfWeek: 1,
+            dayNames: ['domingo', 'lunes', 'martes', 'miércoles', 'jueves', 'viernes', 'sábado'],
+            dayNamesShort: ['dom', 'lun', 'mar', 'mié', 'jue', 'vie', 'sáb'],
+            dayNamesMin: ['D', 'L', 'M', 'X', 'J', 'V', 'S'],
+            monthNames: ['enero', 'febrero', 'marzo', 'abril', 'mayo', 'junio', 'julio', 'agosto', 'septiembre', 'octubre', 'noviembre', 'diciembre'],
+            monthNamesShort: ['ene', 'feb', 'mar', 'abr', 'may', 'jun', 'jul', 'ago', 'sep', 'oct', 'nov', 'dic'],
+            today: 'Hoy',
+            clear: 'Claro'
+        });
     }
 
     dateTemplate(date) {
@@ -59,17 +71,6 @@ export class CalendarDemo extends Component {
     }
 
     render() {
-        const es = {
-            firstDayOfWeek: 1,
-            dayNames: ["domingo", "lunes", "martes", "miércoles", "jueves", "viernes", "sábado"],
-            dayNamesShort: ["dom", "lun", "mar", "mié", "jue", "vie", "sáb"],
-            dayNamesMin: ["D", "L", "M", "X", "J", "V", "S"],
-            monthNames: ["enero", "febrero", "marzo", "abril", "mayo", "junio", "julio", "agosto", "septiembre", "octubre", "noviembre", "diciembre"],
-            monthNamesShort: ["ene", "feb", "mar", "abr", "may", "jun", "jul", "ago", "sep", "oct", "nov", "dic"],
-            today: "Hoy",
-            clear: "Claro"
-        };
-
         return (
             <div>
                 <div className="content-section introduction">
@@ -93,7 +94,7 @@ export class CalendarDemo extends Component {
                             </div>
                             <div className="p-field p-col-12 p-md-4">
                                 <label htmlFor="spanish">Spanish</label>
-                                <Calendar id="spanish" value={this.state.date3} onChange={(e) => this.setState({ date3: e.value })} locale={es} dateFormat="dd/mm/yy" />
+                                <Calendar id="spanish" value={this.state.date3} onChange={(e) => this.setState({ date3: e.value })} locale="es" dateFormat="dd/mm/yy" />
                             </div>
                             <div className="p-field p-col-12 p-md-4">
                                 <label htmlFor="minmax">MinMax</label>
diff --git a/src/showcase/ripple/RippleDoc.js b/src/showcase/ripple/RippleDoc.js
index 66fda15043..57e6d7f35e 100644
--- a/src/showcase/ripple/RippleDoc.js
+++ b/src/showcase/ripple/RippleDoc.js
@@ -13,7 +13,7 @@ export class RippleDoc extends Component {
                 tabName: 'Class Source',
                 content: `
 import React, { Component } from 'react';
-import PrimeReact from 'primereact/utils';
+import PrimeReact from 'primereact/api';
 import { Ripple } from 'primereact/ripple';
 import './RippleDemo.css';
 
@@ -56,7 +56,7 @@ export class RippleDemo extends Component {
                 tabName: 'Hooks Source',
                 content: `
 import React from 'react';
-import PrimeReact from 'primereact/utils';
+import PrimeReact from 'primereact/api';
 import { Ripple } from 'primereact/ripple';
 import './RippleDemo.css';
 
@@ -92,7 +92,7 @@ const RippleDemo = () => {
                 tabName: 'TS Source',
                 content: `
 import React from 'react';
-import PrimeReact from 'primereact/utils';
+import PrimeReact from 'primereact/api';
 import { Ripple } from 'primereact/ripple';
 import './RippleDemo.css';
 
@@ -178,7 +178,7 @@ const RippleDemo = () => {
                         <h5>Import</h5>
 <CodeHighlight lang="js">
 {`
-import PrimeReact from 'primereact/utils';
+import PrimeReact from 'primereact/api';
 import { Ripple } from 'primereact/ripple';
 `}
 </CodeHighlight>
diff --git a/src/showcase/setup/SetupPage.js b/src/showcase/setup/SetupPage.js
index f0650e8406..b86f5aa2ee 100644
--- a/src/showcase/setup/SetupPage.js
+++ b/src/showcase/setup/SetupPage.js
@@ -157,7 +157,7 @@ primereact/resources/themes/rhea/theme.css
                     </p>
 <CodeHighlight lang="js">
 {`
-import PrimeReact from 'primereact/utils';
+import PrimeReact from 'primereact/api';
 
 PrimeReact.ripple = true;
 `}