@rh-support/components 2.1.8 → 2.1.9

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (13) hide show
  1. package/lib/cjs/MarkdownEditor/MarkdownEditor.d.ts.map +1 -1
  2. package/lib/cjs/MarkdownEditor/MarkdownEditor.js +4 -3
  3. package/lib/cjs/MarkdownEditor/markdownEditor.css +4 -0
  4. package/lib/cjs/PhoneInput/PhoneInput.d.ts +2 -0
  5. package/lib/cjs/PhoneInput/PhoneInput.d.ts.map +1 -1
  6. package/lib/cjs/PhoneInput/PhoneInput.js +35 -21
  7. package/lib/esm/MarkdownEditor/MarkdownEditor.d.ts.map +1 -1
  8. package/lib/esm/MarkdownEditor/MarkdownEditor.js +4 -3
  9. package/lib/esm/MarkdownEditor/markdownEditor.css +4 -0
  10. package/lib/esm/PhoneInput/PhoneInput.d.ts +2 -0
  11. package/lib/esm/PhoneInput/PhoneInput.d.ts.map +1 -1
  12. package/lib/esm/PhoneInput/PhoneInput.js +35 -21
  13. package/package.json +4 -4
package/lib/cjs/MarkdownEditor/MarkdownEditor.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"MarkdownEditor.d.ts","sourceRoot":"","sources":["../../../src/MarkdownEditor/MarkdownEditor.tsx"],"names":[],"mappings":"AAAA,OAAO,sBAAsB,CAAC;AAE9B,OAAO,EAAE,WAAW,EAAE,MAAM,2CAA2C,CAAC;AACxE,OAAO,EAAE,gBAAgB,EAAwB,MAAM,qBAAqB,CAAC;AA0B7E,OAAO,KAAK,EAAE,EAAE,SAAS,EAA+B,MAAM,OAAO,CAAC;AAKtE,oBAAY,UAAU;IAClB,KAAK,cAAc;IACnB,QAAQ,aAAa;CACxB;AAED,UAAU,kBAAkB;IACxB,yBAAyB,EAAE,OAAO,CAAC;IACnC,SAAS,EAAE,OAAO,CAAC,WAAW,CAAC,EAAE,CAAC;IAClC,YAAY,EAAE,CAAC,IAAI,EAAE,OAAO,CAAC,WAAW,CAAC,KAAK,IAAI,CAAC;IACnD,YAAY,EAAE,CAAC,IAAI,EAAE,OAAO,CAAC,WAAW,CAAC,KAAK,IAAI,CAAC;IACnD,gBAAgB,EAAE,CAAC,IAAI,KAAA,KAAK,IAAI,CAAC;IACjC,eAAe,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,OAAO,CAAC;IAChD,aAAa,EAAE,KAAK,CAAC,SAAS,CAAC;IAC/B,eAAe,EAAE,OAAO,CAAC;CAC5B;AAED,MAAM,WAAW,cAAe,SAAQ,IAAI,CAAC,SAAS,CAAC,mBAAmB,CAAC,EAAE,UAAU,GAAG,OAAO,GAAG,KAAK,CAAC;IACtG,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,IAAI,CAAC,EAAE,UAAU,KAAK,IAAI,CAAC;IACrD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,YAAY,CAAC,EAAE,CAAC,GAAG,EAAE,mBAAmB,KAAK,IAAI,CAAC;IAClD,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,gBAAgB,CAAC,EAAE,gBAAgB,CAAC;IACpC,2BAA2B,CAAC,EAAE,OAAO,CAAC;IACtC,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,yBAAyB,EAAE,CAAC,GAAG,EAAE,OAAO,KAAK,IAAI,CAAC;IAClD,iBAAiB,CAAC,EAAE,OAAO,CAAC,kBAAkB,CAAC,CAAC;CACnD;AAuBD,iBAAS,cAAc,CAAC,KAAK,EAAE,cAAc,eAimB5C;kBAjmBQ,cAAc;;;AAqmBvB,OAAO,EAAE,cAAc,EAAE,CAAC"}
1
+ {"version":3,"file":"MarkdownEditor.d.ts","sourceRoot":"","sources":["../../../src/MarkdownEditor/MarkdownEditor.tsx"],"names":[],"mappings":"AAAA,OAAO,sBAAsB,CAAC;AAE9B,OAAO,EAAE,WAAW,EAAE,MAAM,2CAA2C,CAAC;AACxE,OAAO,EAAE,gBAAgB,EAAwB,MAAM,qBAAqB,CAAC;AA2B7E,OAAO,KAAK,EAAE,EAAE,SAAS,EAA+B,MAAM,OAAO,CAAC;AAKtE,oBAAY,UAAU;IAClB,KAAK,cAAc;IACnB,QAAQ,aAAa;CACxB;AAED,UAAU,kBAAkB;IACxB,yBAAyB,EAAE,OAAO,CAAC;IACnC,SAAS,EAAE,OAAO,CAAC,WAAW,CAAC,EAAE,CAAC;IAClC,YAAY,EAAE,CAAC,IAAI,EAAE,OAAO,CAAC,WAAW,CAAC,KAAK,IAAI,CAAC;IACnD,YAAY,EAAE,CAAC,IAAI,EAAE,OAAO,CAAC,WAAW,CAAC,KAAK,IAAI,CAAC;IACnD,gBAAgB,EAAE,CAAC,IAAI,KAAA,KAAK,IAAI,CAAC;IACjC,eAAe,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,OAAO,CAAC;IAChD,aAAa,EAAE,KAAK,CAAC,SAAS,CAAC;IAC/B,eAAe,EAAE,OAAO,CAAC;CAC5B;AAED,MAAM,WAAW,cAAe,SAAQ,IAAI,CAAC,SAAS,CAAC,mBAAmB,CAAC,EAAE,UAAU,GAAG,OAAO,GAAG,KAAK,CAAC;IACtG,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,IAAI,CAAC,EAAE,UAAU,KAAK,IAAI,CAAC;IACrD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,YAAY,CAAC,EAAE,CAAC,GAAG,EAAE,mBAAmB,KAAK,IAAI,CAAC;IAClD,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,gBAAgB,CAAC,EAAE,gBAAgB,CAAC;IACpC,2BAA2B,CAAC,EAAE,OAAO,CAAC;IACtC,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,yBAAyB,EAAE,CAAC,GAAG,EAAE,OAAO,KAAK,IAAI,CAAC;IAClD,iBAAiB,CAAC,EAAE,OAAO,CAAC,kBAAkB,CAAC,CAAC;CACnD;AAuBD,iBAAS,cAAc,CAAC,KAAK,EAAE,cAAc,eAmmB5C;kBAnmBQ,cAAc;;;AAumBvB,OAAO,EAAE,cAAc,EAAE,CAAC"}
package/lib/cjs/MarkdownEditor/MarkdownEditor.js CHANGED
@@ -45,6 +45,7 @@ const quote_right_icon_1 = __importDefault(require("@patternfly/react-icons/dist
45
45
  const trash_icon_1 = __importDefault(require("@patternfly/react-icons/dist/js/icons/trash-icon"));
46
46
  const utils_1 = require("@rh-support/utils");
47
47
  const classnames_1 = __importDefault(require("classnames"));
48
+ const dompurify_1 = __importDefault(require("dompurify"));
48
49
  const isEmpty_1 = __importDefault(require("lodash/isEmpty"));
49
50
  const react_1 = __importStar(require("react"));
50
51
  const react_i18next_1 = require("react-i18next");
@@ -384,7 +385,7 @@ function MarkdownEditor(props) {
384
385
  props.disabled && isPreview && setIsPreview(false);
385
386
  const disablePreviewButton = mdValue === '';
386
387
  return (react_1.default.createElement("div", { className: `markdown-editor-container ${props.className}`, id: props.id, "data-tracking-id": "md-editor-container", onDrop: onDrop, onPaste: onPaste },
387
- !isPlainModeEnabled && (react_1.default.createElement(react_core_1.Toolbar, { className: "pf-l-flex border-bottom" },
388
+ react_1.default.createElement("div", { className: "toolbar-container border-bottom" }, !isPlainModeEnabled && (react_1.default.createElement(react_core_1.Toolbar, { className: "pf-l-flex" },
388
389
  react_1.default.createElement(react_core_1.ToolbarGroup, { "data-tracking-id": "md-editor-toolbar", className: "markdown-toolbar-left-section pf-m-wrap" },
389
390
  react_1.default.createElement(react_core_1.Button, { variant: react_core_1.ButtonVariant.plain, tabIndex: -1, isDisabled: props.disabled || isPreview, onClick: bold, "data-tracking-id": "md-editor-toolbar-b", title: "Bold" }, "B"),
390
391
  react_1.default.createElement(react_core_1.Button, { variant: react_core_1.ButtonVariant.plain, tabIndex: -1, isDisabled: props.disabled || isPreview, onClick: italic, "data-tracking-id": "md-editor-toolbar-i", title: "Italic" }, "I"),
@@ -407,10 +408,10 @@ function MarkdownEditor(props) {
407
408
  react_1.default.createElement(image_icon_1.default, null)), dropdownItems: getFileSelectorList(), tabIndex: -1, isPlain: true, menuAppendTo: document.body, isOpen: isFileSelectorOpen, "data-tracking-id": "md-editor-toolbar-file-selector" }))),
408
409
  react_1.default.createElement(react_core_1.ToolbarItem, null,
409
410
  react_1.default.createElement("a", { className: "pf-c-button pf-m-link pf-m-inline markdown-guidance", rel: "noopener noreferrer", target: "_blank", href: "/articles/4729621", "data-tracking-id": "md-guidance" },
410
- react_1.default.createElement(react_i18next_1.Trans, null, "Markdown guidance"))))),
411
+ react_1.default.createElement(react_i18next_1.Trans, null, "Markdown guidance")))))),
411
412
  react_1.default.createElement("div", { className: "markdown-content" }, !isPreview ? (react_1.default.createElement("textarea", Object.assign({}, textAreaProps, { onKeyDown: keydown, placeholder: isPlainModeEnabled ? t(props.plainTextPlaceholder) : t(props.mdPlaceholder), ref: bindTextAreaRef, className: classnames_1.default('form-control', 'markdown-text-area', props.textAreaClassName, 'textArea'), value: mdValue, onChange: textChanged, rows: props.rows || contentRows }))) : (react_1.default.createElement("div", { className: "markdown-preview", style: { maxHeight: mdValue ? 310 : 100 } },
412
413
  react_1.default.createElement("div", { dangerouslySetInnerHTML: {
413
- __html: previewMDText(mdValue),
414
+ __html: dompurify_1.default.sanitize(previewMDText(mdValue)),
414
415
  } })))),
415
416
  react_1.default.createElement("div", null, props.showMarkdownPlainTextToggle && (react_1.default.createElement("div", { className: `markdown-toggle-toolbar pf-l-flex` },
416
417
  react_1.default.createElement("span", { className: "markdown-toolbar-left-section" },
package/lib/cjs/MarkdownEditor/markdownEditor.css CHANGED
@@ -96,3 +96,7 @@ button[data-link*='/attachments/']::before {
96
96
  -webkit-font-smoothing: antialiased;
97
97
  content: '📎';
98
98
  }
99
+
100
+ .toolbar-container {
101
+ height: 50px;
102
+ }
package/lib/cjs/PhoneInput/PhoneInput.d.ts CHANGED
@@ -9,6 +9,8 @@ interface IProps {
9
9
  setInvalid?: (boolean: any) => void;
10
10
  isLoading?: boolean;
11
11
  isDisabled?: boolean;
12
+ phoneLength?: number;
13
+ setPhoneLength?: (number: any) => void;
12
14
  }
13
15
  export declare const getPhoneObj: (phoneNumber: string) => {
14
16
  countryCode: string;
package/lib/cjs/PhoneInput/PhoneInput.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"PhoneInput.d.ts","sourceRoot":"","sources":["../../../src/PhoneInput/PhoneInput.tsx"],"names":[],"mappings":"AAAA,OAAO,mBAAmB,CAAC;AAU3B,UAAU,MAAM;IACZ,UAAU,EAAE,MAAM,CAAC;IACnB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,kBAAkB,EAAE,CAAC,MAAM,KAAA,KAAK,IAAI,CAAC;IACrC,WAAW,CAAC,EAAE,SAAS,GAAG,SAAS,GAAG,SAAS,GAAG,OAAO,GAAG,SAAS,CAAC;IACtE,mBAAmB,CAAC,EAAE,CAAC,MAAM,KAAA,KAAK,IAAI,CAAC;IACvC,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,UAAU,CAAC,EAAE,CAAC,OAAO,KAAA,KAAK,IAAI,CAAC;IAC/B,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,UAAU,CAAC,EAAE,OAAO,CAAC;CACxB;AA2DD,eAAO,MAAM,WAAW,gBAAiB,MAAM;;;CAqB9C,CAAC;AAEF,wBAAgB,UAAU,CAAC,KAAK,EAAE,MAAM,eAiPvC"}
1
+ {"version":3,"file":"PhoneInput.d.ts","sourceRoot":"","sources":["../../../src/PhoneInput/PhoneInput.tsx"],"names":[],"mappings":"AAAA,OAAO,mBAAmB,CAAC;AAU3B,UAAU,MAAM;IACZ,UAAU,EAAE,MAAM,CAAC;IACnB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,kBAAkB,EAAE,CAAC,MAAM,KAAA,KAAK,IAAI,CAAC;IACrC,WAAW,CAAC,EAAE,SAAS,GAAG,SAAS,GAAG,SAAS,GAAG,OAAO,GAAG,SAAS,CAAC;IACtE,mBAAmB,CAAC,EAAE,CAAC,MAAM,KAAA,KAAK,IAAI,CAAC;IACvC,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,UAAU,CAAC,EAAE,CAAC,OAAO,KAAA,KAAK,IAAI,CAAC;IAC/B,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,cAAc,CAAC,EAAE,CAAC,MAAM,KAAA,KAAK,IAAI,CAAC;CACrC;AAuED,eAAO,MAAM,WAAW,gBAAiB,MAAM;;;CAqB9C,CAAC;AAEF,wBAAgB,UAAU,CAAC,KAAK,EAAE,MAAM,eA4PvC"}
package/lib/cjs/PhoneInput/PhoneInput.js CHANGED
@@ -33,6 +33,17 @@ const CountryData_1 = require("./CountryData");
33
33
  const PREFIX = '+';
34
34
  const DEFAULT_MASK = '... ... ... ... ..';
35
35
  const ALWAYS_DEFAULT_MASK = false;
36
+ const initializedCountryObject = {
37
+ name: '',
38
+ regions: [''],
39
+ iso2: '',
40
+ countryCode: '',
41
+ dialCode: '',
42
+ format: '',
43
+ priority: 0,
44
+ areaCode: [''],
45
+ isHavingDefaultFormat: false,
46
+ };
36
47
  // Getting Country phone format
37
48
  function getMask(prefix, dialCode, predefinedMask, defaultMask, alwaysDefaultMask) {
38
49
  if (!predefinedMask || alwaysDefaultMask) {
@@ -52,6 +63,7 @@ const initializedCountries = CountryData_1.COUNTRY_DATA.map((country) => {
52
63
  format: getMask(PREFIX, country[3], country[4], DEFAULT_MASK, ALWAYS_DEFAULT_MASK),
53
64
  priority: country[5] || 0,
54
65
  areaCode: country[6] || [],
66
+ isHavingDefaultFormat: country[4] ? true : false,
55
67
  };
56
68
  return countryItem;
57
69
  });
@@ -102,22 +114,13 @@ const getPhoneObj = (phoneNumber) => {
102
114
  };
103
115
  exports.getPhoneObj = getPhoneObj;
104
116
  function PhoneInput(props) {
105
- const { phoneValue, countryCode, onCountryCodeChange, onPhoneValueChange, validations, setInvalid } = props;
117
+ const { phoneValue, countryCode, onCountryCodeChange, onPhoneValueChange, validations, setInvalid, setPhoneLength, } = props;
106
118
  const { t } = react_i18next_1.useTranslation();
107
119
  const [isOpen, setIsOpen] = react_1.useState(false);
108
120
  const [iso2, setIso2] = react_1.useState('');
109
121
  const [formattedNumber, setFormattedNumber] = react_1.useState('');
110
122
  const [format, setFormat] = react_1.useState('');
111
- const [countryObj, setCountryObj] = react_1.useState({
112
- name: '',
113
- regions: [''],
114
- iso2: '',
115
- countryCode: '',
116
- dialCode: '',
117
- format: '',
118
- priority: 0,
119
- areaCode: [''], // Area codes of a country
120
- });
123
+ const [countryObj, setCountryObj] = react_1.useState(initializedCountryObject);
121
124
  const setLocalFormat = (phoneNumber) => {
122
125
  let localPhone = phoneNumber.replace(PREFIX, '').trim();
123
126
  localPhone = localPhone.replace('(', '').trim();
@@ -125,6 +128,9 @@ function PhoneInput(props) {
125
128
  // if the user selects a value from the dropdown and the country code is the same as prev, iso2 values shouldn't override
126
129
  if (!isEmpty_1.default(countryObj) && isEqual_1.default(localPhone, countryObj.dialCode)) {
127
130
  onCountryCodeChange && onCountryCodeChange(PREFIX + countryObj.countryCode);
131
+ if (setPhoneLength) {
132
+ countryObj.isHavingDefaultFormat ? setPhoneLength(countryObj.format.length) : setPhoneLength(8);
133
+ }
128
134
  return countryObj.format;
129
135
  }
130
136
  let localFormat;
@@ -140,36 +146,50 @@ function PhoneInput(props) {
140
146
  localFormat = canadaCountryObj[0].format.toString();
141
147
  onCountryCodeChange && onCountryCodeChange(PREFIX + canadaCountryObj[0].dialCode.toString());
142
148
  setFormat(localFormat);
149
+ setPhoneLength && setPhoneLength(localFormat.length);
143
150
  }
144
151
  else if (!isEmpty_1.default(exactCountry)) {
145
152
  const localExactCountry = exactCountry.filter((country) => isEqual_1.default(country.priority, 0));
146
153
  if (isEqual_1.default(localExactCountry[0].dialCode.toString(), countryObj.dialCode)) {
147
154
  setIso2(countryObj.iso2);
148
155
  onCountryCodeChange && onCountryCodeChange(PREFIX + countryObj.countryCode);
156
+ if (setPhoneLength) {
157
+ countryObj.isHavingDefaultFormat ? setPhoneLength(countryObj.format.length) : setPhoneLength(8);
158
+ }
149
159
  return countryObj.format;
150
160
  }
151
161
  setIso2(localExactCountry[0].iso2.toString());
152
162
  localFormat = localExactCountry[0].format.toString();
153
163
  onCountryCodeChange && onCountryCodeChange(PREFIX + localExactCountry[0].dialCode.toString());
154
164
  setFormat(localFormat);
165
+ if (setPhoneLength) {
166
+ localExactCountry[0].isHavingDefaultFormat ? setPhoneLength(localFormat.length) : setPhoneLength(8);
167
+ }
155
168
  }
156
169
  else if (!isEmpty_1.default(possibleCountries)) {
157
170
  const localPossibleCountry = possibleCountries.filter((country) => isEqual_1.default(country.priority, 0));
158
171
  if (isEqual_1.default(localPossibleCountry[0].dialCode.toString(), countryObj.dialCode)) {
159
172
  setIso2(countryObj.iso2);
160
173
  onCountryCodeChange && onCountryCodeChange(PREFIX + countryObj.countryCode);
174
+ if (setPhoneLength) {
175
+ countryObj.isHavingDefaultFormat ? setPhoneLength(countryObj.format.length) : setPhoneLength(8);
176
+ }
161
177
  return countryObj.format;
162
178
  }
163
179
  setIso2(localPossibleCountry[0].iso2.toString());
164
180
  localFormat = localPossibleCountry[0].format.toString();
165
181
  onCountryCodeChange && onCountryCodeChange(PREFIX + localPossibleCountry[0].dialCode.toString());
166
182
  setFormat(localFormat);
183
+ if (setPhoneLength) {
184
+ localPossibleCountry[0].isHavingDefaultFormat ? setPhoneLength(localFormat.length) : setPhoneLength(8);
185
+ }
167
186
  }
168
187
  else {
169
188
  // if the exact and possible are not the
170
189
  setIso2('');
171
190
  localFormat = format;
172
191
  onCountryCodeChange && onCountryCodeChange('');
192
+ setPhoneLength && setPhoneLength(0);
173
193
  }
174
194
  return localFormat;
175
195
  };
@@ -178,6 +198,7 @@ function PhoneInput(props) {
178
198
  setFormattedNumber('');
179
199
  onPhoneValueChange('');
180
200
  setInvalid && setInvalid(false);
201
+ setPhoneLength && setPhoneLength(0);
181
202
  }
182
203
  const regex = /^[\d ()+-]+$/;
183
204
  if (setInvalid)
@@ -225,6 +246,7 @@ function PhoneInput(props) {
225
246
  react_1.useEffect(() => {
226
247
  if (isEmpty_1.default(phoneValue)) {
227
248
  setInvalid && setInvalid(false);
249
+ setPhoneLength && setPhoneLength(0);
228
250
  return;
229
251
  }
230
252
  if (isEmpty_1.default(iso2)) {
@@ -251,19 +273,11 @@ function PhoneInput(props) {
251
273
  return;
252
274
  }
253
275
  if (isEmpty_1.default(phoneValue) && isEmpty_1.default(iso2)) {
254
- setCountryObj({
255
- name: '',
256
- regions: [''],
257
- iso2: '',
258
- countryCode: '',
259
- dialCode: '',
260
- format: '',
261
- priority: 0,
262
- areaCode: [''],
263
- });
276
+ setCountryObj(initializedCountryObject);
264
277
  }
265
278
  if (isEmpty_1.default(phoneValue)) {
266
279
  setIso2('');
280
+ setPhoneLength && setPhoneLength(0);
267
281
  setInvalid && setInvalid(false);
268
282
  setFormattedNumber('');
269
283
  onPhoneValueChange('');
package/lib/esm/MarkdownEditor/MarkdownEditor.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"MarkdownEditor.d.ts","sourceRoot":"","sources":["../../../src/MarkdownEditor/MarkdownEditor.tsx"],"names":[],"mappings":"AAAA,OAAO,sBAAsB,CAAC;AAE9B,OAAO,EAAE,WAAW,EAAE,MAAM,2CAA2C,CAAC;AACxE,OAAO,EAAE,gBAAgB,EAAwB,MAAM,qBAAqB,CAAC;AA0B7E,OAAO,KAAK,EAAE,EAAE,SAAS,EAA+B,MAAM,OAAO,CAAC;AAKtE,oBAAY,UAAU;IAClB,KAAK,cAAc;IACnB,QAAQ,aAAa;CACxB;AAED,UAAU,kBAAkB;IACxB,yBAAyB,EAAE,OAAO,CAAC;IACnC,SAAS,EAAE,OAAO,CAAC,WAAW,CAAC,EAAE,CAAC;IAClC,YAAY,EAAE,CAAC,IAAI,EAAE,OAAO,CAAC,WAAW,CAAC,KAAK,IAAI,CAAC;IACnD,YAAY,EAAE,CAAC,IAAI,EAAE,OAAO,CAAC,WAAW,CAAC,KAAK,IAAI,CAAC;IACnD,gBAAgB,EAAE,CAAC,IAAI,KAAA,KAAK,IAAI,CAAC;IACjC,eAAe,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,OAAO,CAAC;IAChD,aAAa,EAAE,KAAK,CAAC,SAAS,CAAC;IAC/B,eAAe,EAAE,OAAO,CAAC;CAC5B;AAED,MAAM,WAAW,cAAe,SAAQ,IAAI,CAAC,SAAS,CAAC,mBAAmB,CAAC,EAAE,UAAU,GAAG,OAAO,GAAG,KAAK,CAAC;IACtG,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,IAAI,CAAC,EAAE,UAAU,KAAK,IAAI,CAAC;IACrD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,YAAY,CAAC,EAAE,CAAC,GAAG,EAAE,mBAAmB,KAAK,IAAI,CAAC;IAClD,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,gBAAgB,CAAC,EAAE,gBAAgB,CAAC;IACpC,2BAA2B,CAAC,EAAE,OAAO,CAAC;IACtC,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,yBAAyB,EAAE,CAAC,GAAG,EAAE,OAAO,KAAK,IAAI,CAAC;IAClD,iBAAiB,CAAC,EAAE,OAAO,CAAC,kBAAkB,CAAC,CAAC;CACnD;AAuBD,iBAAS,cAAc,CAAC,KAAK,EAAE,cAAc,eAimB5C;kBAjmBQ,cAAc;;;AAqmBvB,OAAO,EAAE,cAAc,EAAE,CAAC"}
1
+ {"version":3,"file":"MarkdownEditor.d.ts","sourceRoot":"","sources":["../../../src/MarkdownEditor/MarkdownEditor.tsx"],"names":[],"mappings":"AAAA,OAAO,sBAAsB,CAAC;AAE9B,OAAO,EAAE,WAAW,EAAE,MAAM,2CAA2C,CAAC;AACxE,OAAO,EAAE,gBAAgB,EAAwB,MAAM,qBAAqB,CAAC;AA2B7E,OAAO,KAAK,EAAE,EAAE,SAAS,EAA+B,MAAM,OAAO,CAAC;AAKtE,oBAAY,UAAU;IAClB,KAAK,cAAc;IACnB,QAAQ,aAAa;CACxB;AAED,UAAU,kBAAkB;IACxB,yBAAyB,EAAE,OAAO,CAAC;IACnC,SAAS,EAAE,OAAO,CAAC,WAAW,CAAC,EAAE,CAAC;IAClC,YAAY,EAAE,CAAC,IAAI,EAAE,OAAO,CAAC,WAAW,CAAC,KAAK,IAAI,CAAC;IACnD,YAAY,EAAE,CAAC,IAAI,EAAE,OAAO,CAAC,WAAW,CAAC,KAAK,IAAI,CAAC;IACnD,gBAAgB,EAAE,CAAC,IAAI,KAAA,KAAK,IAAI,CAAC;IACjC,eAAe,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,OAAO,CAAC;IAChD,aAAa,EAAE,KAAK,CAAC,SAAS,CAAC;IAC/B,eAAe,EAAE,OAAO,CAAC;CAC5B;AAED,MAAM,WAAW,cAAe,SAAQ,IAAI,CAAC,SAAS,CAAC,mBAAmB,CAAC,EAAE,UAAU,GAAG,OAAO,GAAG,KAAK,CAAC;IACtG,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,IAAI,CAAC,EAAE,UAAU,KAAK,IAAI,CAAC;IACrD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,YAAY,CAAC,EAAE,CAAC,GAAG,EAAE,mBAAmB,KAAK,IAAI,CAAC;IAClD,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,gBAAgB,CAAC,EAAE,gBAAgB,CAAC;IACpC,2BAA2B,CAAC,EAAE,OAAO,CAAC;IACtC,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,yBAAyB,EAAE,CAAC,GAAG,EAAE,OAAO,KAAK,IAAI,CAAC;IAClD,iBAAiB,CAAC,EAAE,OAAO,CAAC,kBAAkB,CAAC,CAAC;CACnD;AAuBD,iBAAS,cAAc,CAAC,KAAK,EAAE,cAAc,eAmmB5C;kBAnmBQ,cAAc;;;AAumBvB,OAAO,EAAE,cAAc,EAAE,CAAC"}
package/lib/esm/MarkdownEditor/MarkdownEditor.js CHANGED
@@ -20,6 +20,7 @@ import QuoteRightIcon from '@patternfly/react-icons/dist/js/icons/quote-right-ic
20
20
  import TrashIcon from '@patternfly/react-icons/dist/js/icons/trash-icon';
21
21
  import { emojiPattern, haltEvent, isEmojiPattern, isImageFile } from '@rh-support/utils';
22
22
  import cx from 'classnames';
23
+ import DOMPurify from 'dompurify';
23
24
  import isEmpty from 'lodash/isEmpty';
24
25
  import React, { useEffect, useRef, useState } from 'react';
25
26
  import { Trans, useTranslation } from 'react-i18next';
@@ -359,7 +360,7 @@ function MarkdownEditor(props) {
359
360
  props.disabled && isPreview && setIsPreview(false);
360
361
  const disablePreviewButton = mdValue === '';
361
362
  return (React.createElement("div", { className: `markdown-editor-container ${props.className}`, id: props.id, "data-tracking-id": "md-editor-container", onDrop: onDrop, onPaste: onPaste },
362
- !isPlainModeEnabled && (React.createElement(Toolbar, { className: "pf-l-flex border-bottom" },
363
+ React.createElement("div", { className: "toolbar-container border-bottom" }, !isPlainModeEnabled && (React.createElement(Toolbar, { className: "pf-l-flex" },
363
364
  React.createElement(ToolbarGroup, { "data-tracking-id": "md-editor-toolbar", className: "markdown-toolbar-left-section pf-m-wrap" },
364
365
  React.createElement(Button, { variant: ButtonVariant.plain, tabIndex: -1, isDisabled: props.disabled || isPreview, onClick: bold, "data-tracking-id": "md-editor-toolbar-b", title: "Bold" }, "B"),
365
366
  React.createElement(Button, { variant: ButtonVariant.plain, tabIndex: -1, isDisabled: props.disabled || isPreview, onClick: italic, "data-tracking-id": "md-editor-toolbar-i", title: "Italic" }, "I"),
@@ -382,10 +383,10 @@ function MarkdownEditor(props) {
382
383
  React.createElement(ImageIcon, null)), dropdownItems: getFileSelectorList(), tabIndex: -1, isPlain: true, menuAppendTo: document.body, isOpen: isFileSelectorOpen, "data-tracking-id": "md-editor-toolbar-file-selector" }))),
383
384
  React.createElement(ToolbarItem, null,
384
385
  React.createElement("a", { className: "pf-c-button pf-m-link pf-m-inline markdown-guidance", rel: "noopener noreferrer", target: "_blank", href: "/articles/4729621", "data-tracking-id": "md-guidance" },
385
- React.createElement(Trans, null, "Markdown guidance"))))),
386
+ React.createElement(Trans, null, "Markdown guidance")))))),
386
387
  React.createElement("div", { className: "markdown-content" }, !isPreview ? (React.createElement("textarea", Object.assign({}, textAreaProps, { onKeyDown: keydown, placeholder: isPlainModeEnabled ? t(props.plainTextPlaceholder) : t(props.mdPlaceholder), ref: bindTextAreaRef, className: cx('form-control', 'markdown-text-area', props.textAreaClassName, 'textArea'), value: mdValue, onChange: textChanged, rows: props.rows || contentRows }))) : (React.createElement("div", { className: "markdown-preview", style: { maxHeight: mdValue ? 310 : 100 } },
387
388
  React.createElement("div", { dangerouslySetInnerHTML: {
388
- __html: previewMDText(mdValue),
389
+ __html: DOMPurify.sanitize(previewMDText(mdValue)),
389
390
  } })))),
390
391
  React.createElement("div", null, props.showMarkdownPlainTextToggle && (React.createElement("div", { className: `markdown-toggle-toolbar pf-l-flex` },
391
392
  React.createElement("span", { className: "markdown-toolbar-left-section" },
package/lib/esm/MarkdownEditor/markdownEditor.css CHANGED
@@ -96,3 +96,7 @@ button[data-link*='/attachments/']::before {
96
96
  -webkit-font-smoothing: antialiased;
97
97
  content: '📎';
98
98
  }
99
+
100
+ .toolbar-container {
101
+ height: 50px;
102
+ }
package/lib/esm/PhoneInput/PhoneInput.d.ts CHANGED
@@ -9,6 +9,8 @@ interface IProps {
9
9
  setInvalid?: (boolean: any) => void;
10
10
  isLoading?: boolean;
11
11
  isDisabled?: boolean;
12
+ phoneLength?: number;
13
+ setPhoneLength?: (number: any) => void;
12
14
  }
13
15
  export declare const getPhoneObj: (phoneNumber: string) => {
14
16
  countryCode: string;
package/lib/esm/PhoneInput/PhoneInput.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"PhoneInput.d.ts","sourceRoot":"","sources":["../../../src/PhoneInput/PhoneInput.tsx"],"names":[],"mappings":"AAAA,OAAO,mBAAmB,CAAC;AAU3B,UAAU,MAAM;IACZ,UAAU,EAAE,MAAM,CAAC;IACnB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,kBAAkB,EAAE,CAAC,MAAM,KAAA,KAAK,IAAI,CAAC;IACrC,WAAW,CAAC,EAAE,SAAS,GAAG,SAAS,GAAG,SAAS,GAAG,OAAO,GAAG,SAAS,CAAC;IACtE,mBAAmB,CAAC,EAAE,CAAC,MAAM,KAAA,KAAK,IAAI,CAAC;IACvC,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,UAAU,CAAC,EAAE,CAAC,OAAO,KAAA,KAAK,IAAI,CAAC;IAC/B,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,UAAU,CAAC,EAAE,OAAO,CAAC;CACxB;AA2DD,eAAO,MAAM,WAAW,gBAAiB,MAAM;;;CAqB9C,CAAC;AAEF,wBAAgB,UAAU,CAAC,KAAK,EAAE,MAAM,eAiPvC"}
1
+ {"version":3,"file":"PhoneInput.d.ts","sourceRoot":"","sources":["../../../src/PhoneInput/PhoneInput.tsx"],"names":[],"mappings":"AAAA,OAAO,mBAAmB,CAAC;AAU3B,UAAU,MAAM;IACZ,UAAU,EAAE,MAAM,CAAC;IACnB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,kBAAkB,EAAE,CAAC,MAAM,KAAA,KAAK,IAAI,CAAC;IACrC,WAAW,CAAC,EAAE,SAAS,GAAG,SAAS,GAAG,SAAS,GAAG,OAAO,GAAG,SAAS,CAAC;IACtE,mBAAmB,CAAC,EAAE,CAAC,MAAM,KAAA,KAAK,IAAI,CAAC;IACvC,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,UAAU,CAAC,EAAE,CAAC,OAAO,KAAA,KAAK,IAAI,CAAC;IAC/B,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,cAAc,CAAC,EAAE,CAAC,MAAM,KAAA,KAAK,IAAI,CAAC;CACrC;AAuED,eAAO,MAAM,WAAW,gBAAiB,MAAM;;;CAqB9C,CAAC;AAEF,wBAAgB,UAAU,CAAC,KAAK,EAAE,MAAM,eA4PvC"}
package/lib/esm/PhoneInput/PhoneInput.js CHANGED
@@ -8,6 +8,17 @@ import { canadaAreaCodes, COUNTRY_DATA } from './CountryData';
8
8
  const PREFIX = '+';
9
9
  const DEFAULT_MASK = '... ... ... ... ..';
10
10
  const ALWAYS_DEFAULT_MASK = false;
11
+ const initializedCountryObject = {
12
+ name: '',
13
+ regions: [''],
14
+ iso2: '',
15
+ countryCode: '',
16
+ dialCode: '',
17
+ format: '',
18
+ priority: 0,
19
+ areaCode: [''],
20
+ isHavingDefaultFormat: false,
21
+ };
11
22
  // Getting Country phone format
12
23
  function getMask(prefix, dialCode, predefinedMask, defaultMask, alwaysDefaultMask) {
13
24
  if (!predefinedMask || alwaysDefaultMask) {
@@ -27,6 +38,7 @@ const initializedCountries = COUNTRY_DATA.map((country) => {
27
38
  format: getMask(PREFIX, country[3], country[4], DEFAULT_MASK, ALWAYS_DEFAULT_MASK),
28
39
  priority: country[5] || 0,
29
40
  areaCode: country[6] || [],
41
+ isHavingDefaultFormat: country[4] ? true : false,
30
42
  };
31
43
  return countryItem;
32
44
  });
@@ -76,22 +88,13 @@ export const getPhoneObj = (phoneNumber) => {
76
88
  };
77
89
  };
78
90
  export function PhoneInput(props) {
79
- const { phoneValue, countryCode, onCountryCodeChange, onPhoneValueChange, validations, setInvalid } = props;
91
+ const { phoneValue, countryCode, onCountryCodeChange, onPhoneValueChange, validations, setInvalid, setPhoneLength, } = props;
80
92
  const { t } = useTranslation();
81
93
  const [isOpen, setIsOpen] = useState(false);
82
94
  const [iso2, setIso2] = useState('');
83
95
  const [formattedNumber, setFormattedNumber] = useState('');
84
96
  const [format, setFormat] = useState('');
85
- const [countryObj, setCountryObj] = useState({
86
- name: '',
87
- regions: [''],
88
- iso2: '',
89
- countryCode: '',
90
- dialCode: '',
91
- format: '',
92
- priority: 0,
93
- areaCode: [''], // Area codes of a country
94
- });
97
+ const [countryObj, setCountryObj] = useState(initializedCountryObject);
95
98
  const setLocalFormat = (phoneNumber) => {
96
99
  let localPhone = phoneNumber.replace(PREFIX, '').trim();
97
100
  localPhone = localPhone.replace('(', '').trim();
@@ -99,6 +102,9 @@ export function PhoneInput(props) {
99
102
  // if the user selects a value from the dropdown and the country code is the same as prev, iso2 values shouldn't override
100
103
  if (!isEmpty(countryObj) && isEqual(localPhone, countryObj.dialCode)) {
101
104
  onCountryCodeChange && onCountryCodeChange(PREFIX + countryObj.countryCode);
105
+ if (setPhoneLength) {
106
+ countryObj.isHavingDefaultFormat ? setPhoneLength(countryObj.format.length) : setPhoneLength(8);
107
+ }
102
108
  return countryObj.format;
103
109
  }
104
110
  let localFormat;
@@ -114,36 +120,50 @@ export function PhoneInput(props) {
114
120
  localFormat = canadaCountryObj[0].format.toString();
115
121
  onCountryCodeChange && onCountryCodeChange(PREFIX + canadaCountryObj[0].dialCode.toString());
116
122
  setFormat(localFormat);
123
+ setPhoneLength && setPhoneLength(localFormat.length);
117
124
  }
118
125
  else if (!isEmpty(exactCountry)) {
119
126
  const localExactCountry = exactCountry.filter((country) => isEqual(country.priority, 0));
120
127
  if (isEqual(localExactCountry[0].dialCode.toString(), countryObj.dialCode)) {
121
128
  setIso2(countryObj.iso2);
122
129
  onCountryCodeChange && onCountryCodeChange(PREFIX + countryObj.countryCode);
130
+ if (setPhoneLength) {
131
+ countryObj.isHavingDefaultFormat ? setPhoneLength(countryObj.format.length) : setPhoneLength(8);
132
+ }
123
133
  return countryObj.format;
124
134
  }
125
135
  setIso2(localExactCountry[0].iso2.toString());
126
136
  localFormat = localExactCountry[0].format.toString();
127
137
  onCountryCodeChange && onCountryCodeChange(PREFIX + localExactCountry[0].dialCode.toString());
128
138
  setFormat(localFormat);
139
+ if (setPhoneLength) {
140
+ localExactCountry[0].isHavingDefaultFormat ? setPhoneLength(localFormat.length) : setPhoneLength(8);
141
+ }
129
142
  }
130
143
  else if (!isEmpty(possibleCountries)) {
131
144
  const localPossibleCountry = possibleCountries.filter((country) => isEqual(country.priority, 0));
132
145
  if (isEqual(localPossibleCountry[0].dialCode.toString(), countryObj.dialCode)) {
133
146
  setIso2(countryObj.iso2);
134
147
  onCountryCodeChange && onCountryCodeChange(PREFIX + countryObj.countryCode);
148
+ if (setPhoneLength) {
149
+ countryObj.isHavingDefaultFormat ? setPhoneLength(countryObj.format.length) : setPhoneLength(8);
150
+ }
135
151
  return countryObj.format;
136
152
  }
137
153
  setIso2(localPossibleCountry[0].iso2.toString());
138
154
  localFormat = localPossibleCountry[0].format.toString();
139
155
  onCountryCodeChange && onCountryCodeChange(PREFIX + localPossibleCountry[0].dialCode.toString());
140
156
  setFormat(localFormat);
157
+ if (setPhoneLength) {
158
+ localPossibleCountry[0].isHavingDefaultFormat ? setPhoneLength(localFormat.length) : setPhoneLength(8);
159
+ }
141
160
  }
142
161
  else {
143
162
  // if the exact and possible are not the
144
163
  setIso2('');
145
164
  localFormat = format;
146
165
  onCountryCodeChange && onCountryCodeChange('');
166
+ setPhoneLength && setPhoneLength(0);
147
167
  }
148
168
  return localFormat;
149
169
  };
@@ -152,6 +172,7 @@ export function PhoneInput(props) {
152
172
  setFormattedNumber('');
153
173
  onPhoneValueChange('');
154
174
  setInvalid && setInvalid(false);
175
+ setPhoneLength && setPhoneLength(0);
155
176
  }
156
177
  const regex = /^[\d ()+-]+$/;
157
178
  if (setInvalid)
@@ -199,6 +220,7 @@ export function PhoneInput(props) {
199
220
  useEffect(() => {
200
221
  if (isEmpty(phoneValue)) {
201
222
  setInvalid && setInvalid(false);
223
+ setPhoneLength && setPhoneLength(0);
202
224
  return;
203
225
  }
204
226
  if (isEmpty(iso2)) {
@@ -225,19 +247,11 @@ export function PhoneInput(props) {
225
247
  return;
226
248
  }
227
249
  if (isEmpty(phoneValue) && isEmpty(iso2)) {
228
- setCountryObj({
229
- name: '',
230
- regions: [''],
231
- iso2: '',
232
- countryCode: '',
233
- dialCode: '',
234
- format: '',
235
- priority: 0,
236
- areaCode: [''],
237
- });
250
+ setCountryObj(initializedCountryObject);
238
251
  }
239
252
  if (isEmpty(phoneValue)) {
240
253
  setIso2('');
254
+ setPhoneLength && setPhoneLength(0);
241
255
  setInvalid && setInvalid(false);
242
256
  setFormattedNumber('');
243
257
  onPhoneValueChange('');
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@rh-support/components",
3
- "version": "2.1.8",
3
+ "version": "2.1.9",
4
4
  "description": "Contains all reusabel components for support app",
5
5
  "author": "Vikas Rathee <vrathee@redhat.com>",
6
6
  "license": "ISC",
@@ -80,8 +80,8 @@
80
80
  "@patternfly/react-core": "4.264.0",
81
81
  "@patternfly/react-table": "4.111.33",
82
82
  "@rh-support/types": "2.0.2",
83
- "@rh-support/user-permissions": "2.1.3",
84
- "@rh-support/utils": "2.1.1",
83
+ "@rh-support/user-permissions": "2.1.4",
84
+ "@rh-support/utils": "2.1.2",
85
85
  "dompurify": "^2.2.6",
86
86
  "downshift": "^6.0.5",
87
87
  "js-worker-search": "^1.4.1",
@@ -117,5 +117,5 @@
117
117
  "defaults and supports es6-module",
118
118
  "maintained node versions"
119
119
  ],
120
- "gitHead": "a47ffbcfff1c99bef15fb811497e6c756845e9e8"
120
+ "gitHead": "8f7f0aee0461c78e8a5cc0e16777371c4ae1305d"
121
121
  }