@rh-support/components 2.0.12-beta.0 → 2.0.13

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 (39) hide show
  1. package/lib/cjs/DropDownList/SearchableList.d.ts +1 -0
  2. package/lib/cjs/DropDownList/SearchableList.d.ts.map +1 -1
  3. package/lib/cjs/DropDownList/SearchableList.js +4 -2
  4. package/lib/cjs/DropDownList/dropdownList.css +1 -1
  5. package/lib/cjs/DropDownList/types.d.ts +1 -0
  6. package/lib/cjs/DropDownList/types.d.ts.map +1 -1
  7. package/lib/cjs/InlineEdit/InlineEdit.d.ts +1 -0
  8. package/lib/cjs/InlineEdit/InlineEdit.d.ts.map +1 -1
  9. package/lib/cjs/InlineEdit/InlineEdit.js +2 -2
  10. package/lib/cjs/InlineEdit/NewInlineEdit.d.ts +1 -0
  11. package/lib/cjs/InlineEdit/NewInlineEdit.d.ts.map +1 -1
  12. package/lib/cjs/InlineEdit/NewInlineEdit.js +2 -2
  13. package/lib/cjs/InlineEdit/inlineEdit.css +4 -0
  14. package/lib/cjs/InlineEdit/newInlineEdit.css +4 -0
  15. package/lib/cjs/LoadingDots/LoadingDots.js +1 -1
  16. package/lib/cjs/PhoneInput/PhoneInput.d.ts +5 -3
  17. package/lib/cjs/PhoneInput/PhoneInput.d.ts.map +1 -1
  18. package/lib/cjs/PhoneInput/PhoneInput.js +82 -77
  19. package/lib/cjs/PhoneInput/PhoneInput.scss +13 -0
  20. package/lib/esm/DropDownList/SearchableList.d.ts +1 -0
  21. package/lib/esm/DropDownList/SearchableList.d.ts.map +1 -1
  22. package/lib/esm/DropDownList/SearchableList.js +4 -2
  23. package/lib/esm/DropDownList/dropdownList.css +1 -1
  24. package/lib/esm/DropDownList/types.d.ts +1 -0
  25. package/lib/esm/DropDownList/types.d.ts.map +1 -1
  26. package/lib/esm/InlineEdit/InlineEdit.d.ts +1 -0
  27. package/lib/esm/InlineEdit/InlineEdit.d.ts.map +1 -1
  28. package/lib/esm/InlineEdit/InlineEdit.js +2 -2
  29. package/lib/esm/InlineEdit/NewInlineEdit.d.ts +1 -0
  30. package/lib/esm/InlineEdit/NewInlineEdit.d.ts.map +1 -1
  31. package/lib/esm/InlineEdit/NewInlineEdit.js +2 -2
  32. package/lib/esm/InlineEdit/inlineEdit.css +4 -0
  33. package/lib/esm/InlineEdit/newInlineEdit.css +4 -0
  34. package/lib/esm/LoadingDots/LoadingDots.js +1 -1
  35. package/lib/esm/PhoneInput/PhoneInput.d.ts +5 -3
  36. package/lib/esm/PhoneInput/PhoneInput.d.ts.map +1 -1
  37. package/lib/esm/PhoneInput/PhoneInput.js +83 -78
  38. package/lib/esm/PhoneInput/PhoneInput.scss +13 -0
  39. package/package.json +6 -6
@@ -7,6 +7,7 @@ interface IProps<T> extends Omit<IDropdownListProps<T>, 'onChange' | 'onInputCha
7
7
  onChange: (changes: UseComboboxStateChange<IOption<T>>) => void;
8
8
  itemsList: IOption<T>[];
9
9
  onInputChange?: (items: IOption<T>[], inputValue: string) => void;
10
+ isPDFExporting?: boolean;
10
11
  }
11
12
  export default function SearchableList<T>(props: IProps<T>): JSX.Element;
12
13
  export {};
@@ -1 +1 @@
1
- {"version":3,"file":"SearchableList.d.ts","sourceRoot":"","sources":["../../../src/DropDownList/SearchableList.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,OAAO,EAAE,MAAM,0BAA0B,CAAC;AACnD,OAAO,EAEH,sBAAsB,EAEtB,sBAAsB,EAEzB,MAAM,WAAW,CAAC;AAGnB,OAAO,KAAK,MAAM,OAAO,CAAC;AAK1B,OAAO,EAAE,kBAAkB,EAAE,MAAM,SAAS,CAAC;AAE7C,UAAU,MAAM,CAAC,CAAC,CAAE,SAAQ,IAAI,CAAC,kBAAkB,CAAC,CAAC,CAAC,EAAE,UAAU,GAAG,eAAe,CAAC;IACjF,eAAe,EAAE,CAAC,SAAS,EAAE,sBAAsB,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,KAAK,KAAK,CAAC,SAAS,EAAE,CAAC;IACtF,QAAQ,EAAE,CAAC,OAAO,EAAE,sBAAsB,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,KAAK,IAAI,CAAC;IAChE,SAAS,EAAE,OAAO,CAAC,CAAC,CAAC,EAAE,CAAC;IACxB,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,CAAC,CAAC,CAAC,EAAE,EAAE,UAAU,EAAE,MAAM,KAAK,IAAI,CAAC;CACrE;AAED,MAAM,CAAC,OAAO,UAAU,cAAc,CAAC,CAAC,EAAE,KAAK,EAAE,MAAM,CAAC,CAAC,CAAC,eA6IzD"}
1
+ {"version":3,"file":"SearchableList.d.ts","sourceRoot":"","sources":["../../../src/DropDownList/SearchableList.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,OAAO,EAAE,MAAM,0BAA0B,CAAC;AACnD,OAAO,EAEH,sBAAsB,EAEtB,sBAAsB,EAEzB,MAAM,WAAW,CAAC;AAGnB,OAAO,KAAK,MAAM,OAAO,CAAC;AAK1B,OAAO,EAAE,kBAAkB,EAAE,MAAM,SAAS,CAAC;AAE7C,UAAU,MAAM,CAAC,CAAC,CAAE,SAAQ,IAAI,CAAC,kBAAkB,CAAC,CAAC,CAAC,EAAE,UAAU,GAAG,eAAe,CAAC;IACjF,eAAe,EAAE,CAAC,SAAS,EAAE,sBAAsB,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,KAAK,KAAK,CAAC,SAAS,EAAE,CAAC;IACtF,QAAQ,EAAE,CAAC,OAAO,EAAE,sBAAsB,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,KAAK,IAAI,CAAC;IAChE,SAAS,EAAE,OAAO,CAAC,CAAC,CAAC,EAAE,CAAC;IACxB,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,CAAC,CAAC,CAAC,EAAE,EAAE,UAAU,EAAE,MAAM,KAAK,IAAI,CAAC;IAClE,cAAc,CAAC,EAAE,OAAO,CAAC;CAC5B;AAED,MAAM,CAAC,OAAO,UAAU,cAAc,CAAC,CAAC,EAAE,KAAK,EAAE,MAAM,CAAC,CAAC,CAAC,eA+IzD"}
@@ -88,8 +88,10 @@ function SearchableList(props) {
88
88
  onBlur: onInputBlur(),
89
89
  })))),
90
90
  react_1.default.createElement(LoadingIndicator_1.LoadingIndicator, { isInline: true, show: props.isLoadingList }),
91
- !isEmpty_1.default(downshift.inputValue) && !props.isLoadingList && (react_1.default.createElement("button", { className: "pf-c-button pf-m-plain pf-c-select__toggle-clear", onClick: clearSelection(), "aria-label": "clear selection", type: "button", title: "Clear selection", disabled: props.disabled, "data-tracking-id": `${props['data-tracking-id']}-clear` },
92
- react_1.default.createElement(times_circle_icon_1.default, null))),
91
+ !isEmpty_1.default(downshift.inputValue) &&
92
+ !props.isLoadingList &&
93
+ (!props.isExportingPDF ? (react_1.default.createElement("button", { className: "pf-c-button pf-m-plain pf-c-select__toggle-clear", onClick: clearSelection(), "aria-label": "clear selection", type: "button", title: "Clear selection", disabled: props.disabled, "data-tracking-id": `${props['data-tracking-id']}-clear` },
94
+ react_1.default.createElement(times_circle_icon_1.default, null))) : null),
93
95
  !props.hideToggleButton && (react_1.default.createElement("button", Object.assign({ type: "button" }, getToggleButtonProps({
94
96
  disabled: props.disabled || props.isLoadingList,
95
97
  className: 'pf-c-button pf-c-select__toggle-button pf-m-plain',
@@ -42,7 +42,7 @@
42
42
 
43
43
  .downshift .downshift-menu.open {
44
44
  visibility: visible;
45
- z-index: 200;
45
+ z-index: 89;
46
46
  }
47
47
 
48
48
  .downshift .downshift-menu {
@@ -31,6 +31,7 @@ export interface IDropdownListProps<T> extends IDClassNameProps {
31
31
  hasTwoColumns?: boolean;
32
32
  chipGroupComponent?: React.ReactNode;
33
33
  hideToggleButton?: boolean;
34
+ isExportingPDF?: boolean;
34
35
  }
35
36
  export declare type IMultiSelectOnlyProps<T> = {
36
37
  selectedItems?: Array<IOption<T>>;
@@ -1 +1 @@
1
- {"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/DropDownList/types.ts"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/DropDownList/types.ts"],"names":[],"mappings":"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"}
@@ -27,6 +27,7 @@ interface IProps {
27
27
  hideLabel?: boolean;
28
28
  isSpaceAllowed?: boolean;
29
29
  inputValue?: string;
30
+ isExportingPDF?: boolean;
30
31
  }
31
32
  declare function InlineEdit(props: IProps): JSX.Element;
32
33
  declare namespace InlineEdit {
@@ -1 +1 @@
1
- {"version":3,"file":"InlineEdit.d.ts","sourceRoot":"","sources":["../../../src/InlineEdit/InlineEdit.tsx"],"names":[],"mappings":"AAAA,OAAO,kBAAkB,CAAC;AAI1B,OAAc,EAAE,SAAS,EAAY,MAAM,OAAO,CAAC;AAGnD,UAAU,MAAM;IACZ,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,QAAQ,EAAE,GAAG,CAAC,OAAO,GAAG,GAAG,CAAC,OAAO,EAAE,CAAC;IACtC,UAAU,EAAE,SAAS,CAAC,gBAAgB,CAAC,CAAC;IACxC,YAAY,EAAE,GAAG,CAAC,OAAO,GAAG,GAAG,CAAC,OAAO,EAAE,CAAC;IAC1C,aAAa,CAAC,EAAE,GAAG,CAAC,OAAO,GAAG,GAAG,CAAC,OAAO,EAAE,CAAC;IAC5C,gBAAgB,EAAE,GAAG,CAAC,OAAO,GAAG,MAAM,CAAC;IACvC,OAAO,CAAC,EAAE,MAAM,GAAG,GAAG,CAAC,OAAO,CAAC;IAC/B,eAAe,EAAE,OAAO,CAAC;IACzB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,kBAAkB,EAAE,OAAO,CAAC;IAC5B,cAAc,EAAE,OAAO,CAAC;IACxB,WAAW,EAAE,GAAG,CAAC,OAAO,GAAG,MAAM,CAAC;IAClC,SAAS,EAAE,GAAG,CAAC,OAAO,GAAG,MAAM,CAAC;IAChC,MAAM,EAAE,GAAG,CAAC;IACZ,QAAQ,EAAE,GAAG,CAAC;IACd,cAAc,CAAC,EAAE,OAAO,CAAC;IAGzB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,YAAY,CAAC,EAAE,OAAO,CAAC;IAEvB,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,UAAU,CAAC,EAAE,MAAM,CAAC;CACvB;AAsBD,iBAAS,UAAU,CAAC,KAAK,EAAE,MAAM,eAoKhC;kBApKQ,UAAU;;;AAuKnB,OAAO,EAAE,UAAU,EAAE,CAAC"}
1
+ {"version":3,"file":"InlineEdit.d.ts","sourceRoot":"","sources":["../../../src/InlineEdit/InlineEdit.tsx"],"names":[],"mappings":"AAAA,OAAO,kBAAkB,CAAC;AAI1B,OAAc,EAAE,SAAS,EAAY,MAAM,OAAO,CAAC;AAGnD,UAAU,MAAM;IACZ,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,QAAQ,EAAE,GAAG,CAAC,OAAO,GAAG,GAAG,CAAC,OAAO,EAAE,CAAC;IACtC,UAAU,EAAE,SAAS,CAAC,gBAAgB,CAAC,CAAC;IACxC,YAAY,EAAE,GAAG,CAAC,OAAO,GAAG,GAAG,CAAC,OAAO,EAAE,CAAC;IAC1C,aAAa,CAAC,EAAE,GAAG,CAAC,OAAO,GAAG,GAAG,CAAC,OAAO,EAAE,CAAC;IAC5C,gBAAgB,EAAE,GAAG,CAAC,OAAO,GAAG,MAAM,CAAC;IACvC,OAAO,CAAC,EAAE,MAAM,GAAG,GAAG,CAAC,OAAO,CAAC;IAC/B,eAAe,EAAE,OAAO,CAAC;IACzB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,kBAAkB,EAAE,OAAO,CAAC;IAC5B,cAAc,EAAE,OAAO,CAAC;IACxB,WAAW,EAAE,GAAG,CAAC,OAAO,GAAG,MAAM,CAAC;IAClC,SAAS,EAAE,GAAG,CAAC,OAAO,GAAG,MAAM,CAAC;IAChC,MAAM,EAAE,GAAG,CAAC;IACZ,QAAQ,EAAE,GAAG,CAAC;IACd,cAAc,CAAC,EAAE,OAAO,CAAC;IAGzB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,YAAY,CAAC,EAAE,OAAO,CAAC;IAEvB,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,cAAc,CAAC,EAAE,OAAO,CAAC;CAC5B;AAsBD,iBAAS,UAAU,CAAC,KAAK,EAAE,MAAM,eAwKhC;kBAxKQ,UAAU;;;AA2KnB,OAAO,EAAE,UAAU,EAAE,CAAC"}
@@ -73,7 +73,7 @@ function InlineEdit(props) {
73
73
  if (!props.allowInlineEdit) {
74
74
  return null;
75
75
  }
76
- return (react_1.default.createElement("button", { className: "btn btn-link btn-app btn-edit", "aria-label": "Edit", onClick: onEditClicked },
76
+ return (react_1.default.createElement("button", { className: `btn btn-link btn-app btn-edit ${props.isExportingPDF ? 'hide-in-pdf' : ''}`, "aria-label": "Edit", onClick: onEditClicked },
77
77
  react_1.default.createElement(pencil_alt_icon_1.default, null)));
78
78
  };
79
79
  const onBlurChild = () => {
@@ -130,7 +130,7 @@ function InlineEdit(props) {
130
130
  !props.hideLabel && (react_1.default.createElement(react_1.default.Fragment, null,
131
131
  react_1.default.createElement("label", Object.assign({}, props.labelProps),
132
132
  react_1.default.createElement("span", { className: "label-edit" }, props.labelContent),
133
- props.helperContent,
133
+ react_1.default.createElement("span", { className: `${props.isExportingPDF ? 'hide-in-pdf' : ''}` }, props.helperContent),
134
134
  renderEditButton()))),
135
135
  renderSaveCancel(),
136
136
  canShowContent && !props.usePreformattedTag && (react_1.default.createElement(react_1.default.Fragment, null,
@@ -31,6 +31,7 @@ interface IProps {
31
31
  hideLabel?: boolean;
32
32
  isSpaceAllowed?: boolean;
33
33
  inputValue?: string;
34
+ isExportingPDF?: boolean;
34
35
  }
35
36
  declare function NewInlineEdit(props: IProps): JSX.Element;
36
37
  declare namespace NewInlineEdit {
@@ -1 +1 @@
1
- {"version":3,"file":"NewInlineEdit.d.ts","sourceRoot":"","sources":["../../../src/InlineEdit/NewInlineEdit.tsx"],"names":[],"mappings":"AAAA,OAAO,qBAAqB,CAAC;AAI7B,OAAc,EAAE,SAAS,EAAuB,MAAM,OAAO,CAAC;AAG9D,UAAU,MAAM;IACZ,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,QAAQ,EAAE,GAAG,CAAC,OAAO,GAAG,GAAG,CAAC,OAAO,EAAE,CAAC;IACtC,UAAU,EAAE,SAAS,CAAC,gBAAgB,CAAC,CAAC;IACxC,YAAY,EAAE,GAAG,CAAC,OAAO,GAAG,GAAG,CAAC,OAAO,EAAE,CAAC;IAC1C,aAAa,CAAC,EAAE,GAAG,CAAC,OAAO,GAAG,GAAG,CAAC,OAAO,EAAE,CAAC;IAC5C,gBAAgB,EAAE,GAAG,CAAC,OAAO,GAAG,MAAM,CAAC;IACvC,OAAO,CAAC,EAAE,MAAM,GAAG,GAAG,CAAC,OAAO,CAAC;IAC/B,eAAe,EAAE,OAAO,CAAC;IACzB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,kBAAkB,EAAE,OAAO,CAAC;IAC5B,cAAc,EAAE,OAAO,CAAC;IACxB,WAAW,EAAE,GAAG,CAAC,OAAO,GAAG,MAAM,CAAC;IAClC,SAAS,EAAE,GAAG,CAAC,OAAO,GAAG,MAAM,CAAC;IAChC,MAAM,EAAE,GAAG,CAAC;IACZ,QAAQ,EAAE,GAAG,CAAC;IACd,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,SAAS,EAAE,MAAM,CAAC;IAClB,SAAS,EAAE,MAAM,CAAC;IAClB,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,eAAe,CAAC,EAAE,OAAO,CAAC;IAG1B,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,YAAY,CAAC,EAAE,OAAO,CAAC;IAEvB,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,UAAU,CAAC,EAAE,MAAM,CAAC;CACvB;AAsBD,iBAAS,aAAa,CAAC,KAAK,EAAE,MAAM,eAqLnC;kBArLQ,aAAa;;;AAwLtB,OAAO,EAAE,aAAa,EAAE,CAAC"}
1
+ {"version":3,"file":"NewInlineEdit.d.ts","sourceRoot":"","sources":["../../../src/InlineEdit/NewInlineEdit.tsx"],"names":[],"mappings":"AAAA,OAAO,qBAAqB,CAAC;AAI7B,OAAc,EAAE,SAAS,EAAuB,MAAM,OAAO,CAAC;AAG9D,UAAU,MAAM;IACZ,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,QAAQ,EAAE,GAAG,CAAC,OAAO,GAAG,GAAG,CAAC,OAAO,EAAE,CAAC;IACtC,UAAU,EAAE,SAAS,CAAC,gBAAgB,CAAC,CAAC;IACxC,YAAY,EAAE,GAAG,CAAC,OAAO,GAAG,GAAG,CAAC,OAAO,EAAE,CAAC;IAC1C,aAAa,CAAC,EAAE,GAAG,CAAC,OAAO,GAAG,GAAG,CAAC,OAAO,EAAE,CAAC;IAC5C,gBAAgB,EAAE,GAAG,CAAC,OAAO,GAAG,MAAM,CAAC;IACvC,OAAO,CAAC,EAAE,MAAM,GAAG,GAAG,CAAC,OAAO,CAAC;IAC/B,eAAe,EAAE,OAAO,CAAC;IACzB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,kBAAkB,EAAE,OAAO,CAAC;IAC5B,cAAc,EAAE,OAAO,CAAC;IACxB,WAAW,EAAE,GAAG,CAAC,OAAO,GAAG,MAAM,CAAC;IAClC,SAAS,EAAE,GAAG,CAAC,OAAO,GAAG,MAAM,CAAC;IAChC,MAAM,EAAE,GAAG,CAAC;IACZ,QAAQ,EAAE,GAAG,CAAC;IACd,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,SAAS,EAAE,MAAM,CAAC;IAClB,SAAS,EAAE,MAAM,CAAC;IAClB,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,eAAe,CAAC,EAAE,OAAO,CAAC;IAG1B,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,YAAY,CAAC,EAAE,OAAO,CAAC;IAEvB,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,cAAc,CAAC,EAAE,OAAO,CAAC;CAC5B;AAsBD,iBAAS,aAAa,CAAC,KAAK,EAAE,MAAM,eAyLnC;kBAzLQ,aAAa;;;AA4LtB,OAAO,EAAE,aAAa,EAAE,CAAC"}
@@ -79,7 +79,7 @@ function NewInlineEdit(props) {
79
79
  if (!props.allowInlineEdit) {
80
80
  return null;
81
81
  }
82
- return (react_1.default.createElement("button", { className: "btn btn-link btn-app btn-edit", "aria-label": "Edit", onClick: onEditClicked },
82
+ return (react_1.default.createElement("button", { className: `btn btn-link btn-app btn-edit ${props.isExportingPDF ? 'hide-in-pdf' : ''}`, "aria-label": "Edit", onClick: onEditClicked },
83
83
  react_1.default.createElement(pencil_alt_icon_1.default, null)));
84
84
  };
85
85
  const onBlurChild = () => {
@@ -137,7 +137,7 @@ function NewInlineEdit(props) {
137
137
  !props.hideLabel && (react_1.default.createElement(react_1.default.Fragment, null,
138
138
  react_1.default.createElement("label", Object.assign({}, props.labelProps),
139
139
  react_1.default.createElement("span", { className: "label-edit" }, props.labelContent),
140
- props.helperContent,
140
+ react_1.default.createElement("span", { className: `${props.isExportingPDF ? 'hide-in-pdf' : ''}` }, props.helperContent),
141
141
  !props.content && !isEditing ? renderEditButton() : null))),
142
142
  renderSaveCancel(),
143
143
  props.hideSaveCancel && isEditing && (react_1.default.createElement("span", { className: `
@@ -23,3 +23,7 @@
23
23
  .case-overview .edit-question .loading-indicator {
24
24
  margin-left: 0px;
25
25
  }
26
+
27
+ .hide-in-pdf {
28
+ display: none !important;
29
+ }
@@ -16,6 +16,10 @@
16
16
  float: right;
17
17
  }
18
18
 
19
+ .hide-in-pdf {
20
+ display: none !important;
21
+ }
22
+
19
23
  .edit-question .loading-indicator {
20
24
  margin-left: 10px;
21
25
  }
@@ -19,7 +19,7 @@ function LoadingDots(props) {
19
19
  react_1.default.createElement("span", null, ".")),
20
20
  react_1.default.createElement("p", { className: "sr-only" },
21
21
  react_1.default.createElement(react_i18next_1.Trans, null, "Loading...")))),
22
- props.message && props.show && react_1.default.createElement("p", { className: "pf-u-text-align-center pf-u-my-md" }, props.message)));
22
+ props.message && props.show && react_1.default.createElement("span", { className: "spinner-message" }, props.message)));
23
23
  }
24
24
  exports.LoadingDots = LoadingDots;
25
25
  LoadingDots.defaultProps = defaultProps;
@@ -3,11 +3,13 @@ import './PhoneInput.scss';
3
3
  interface IProps {
4
4
  phoneValue: string;
5
5
  countryCode?: string;
6
- onPhoneValue?: (string: any) => void;
6
+ onPhoneValueChange: (string: any) => void;
7
7
  validations?: 'default' | 'success' | 'warning' | 'error' | undefined;
8
- onCountryCode?: (string: any) => void;
8
+ onCountryCodeChange?: (string: any) => void;
9
9
  invalid?: boolean;
10
- setInvalid: (boolean: any) => void;
10
+ setInvalid?: (boolean: any) => void;
11
+ isLoading?: boolean;
12
+ isDisabled?: boolean;
11
13
  }
12
14
  export declare function PhoneInput(props: IProps): JSX.Element;
13
15
  export {};
@@ -1 +1 @@
1
- {"version":3,"file":"PhoneInput.d.ts","sourceRoot":"","sources":["../../../src/PhoneInput/PhoneInput.tsx"],"names":[],"mappings":";AAAA,OAAO,mBAAmB,CAAC;AAS3B,UAAU,MAAM;IACZ,UAAU,EAAE,MAAM,CAAC;IACnB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,YAAY,CAAC,EAAE,CAAC,MAAM,KAAA,KAAK,IAAI,CAAC;IAChC,WAAW,CAAC,EAAE,SAAS,GAAG,SAAS,GAAG,SAAS,GAAG,OAAO,GAAG,SAAS,CAAC;IACtE,aAAa,CAAC,EAAE,CAAC,MAAM,KAAA,KAAK,IAAI,CAAC;IACjC,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,UAAU,EAAE,CAAC,OAAO,KAAA,KAAK,IAAI,CAAC;CACjC;AAED,wBAAgB,UAAU,CAAC,KAAK,EAAE,MAAM,eAyNvC"}
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;AAED,wBAAgB,UAAU,CAAC,KAAK,EAAE,MAAM,eAsOvC"}
@@ -28,9 +28,10 @@ const react_core_1 = require("@patternfly/react-core");
28
28
  const lodash_1 = require("lodash");
29
29
  const react_1 = __importStar(require("react"));
30
30
  const react_i18next_1 = require("react-i18next");
31
+ // import { usePrevious } from '../hooks/usePrevious';
31
32
  const CountryData_1 = __importDefault(require("./CountryData"));
32
33
  function PhoneInput(props) {
33
- const { phoneValue, countryCode, onCountryCode, onPhoneValue, validations, setInvalid } = props;
34
+ const { phoneValue, countryCode, onCountryCodeChange, onPhoneValueChange, validations, setInvalid } = props;
34
35
  const { t } = react_i18next_1.useTranslation();
35
36
  const [isOpen, setIsOpen] = react_1.useState(false);
36
37
  const [iso2, setIso2] = react_1.useState('');
@@ -39,7 +40,7 @@ function PhoneInput(props) {
39
40
  const prefix = '+';
40
41
  const defaultMask = '... ... ... ... ..';
41
42
  const alwaysDefaultMask = false;
42
- const [selected, setSelected] = react_1.useState({
43
+ const [countryObj, setCountryObj] = react_1.useState({
43
44
  name: '',
44
45
  regions: [''],
45
46
  iso2: '',
@@ -47,33 +48,6 @@ function PhoneInput(props) {
47
48
  dialCode: '',
48
49
  format: '', // Number Format (For US, '(...) ...-....' )
49
50
  });
50
- react_1.useEffect(() => {
51
- if (lodash_1.isEmpty(iso2) && !lodash_1.isEmpty(phoneValue)) {
52
- let localCountryCode = countryCode === null || countryCode === void 0 ? void 0 : countryCode.replace(prefix, '');
53
- const exactCountry = initializedCountries.filter((country) => country.dialCode.toString() === localCountryCode);
54
- let localFormat = exactCountry[0].format.toString();
55
- setFormat(localFormat);
56
- formatNumber(countryCode + phoneValue);
57
- }
58
- // eslint-disable-next-line react-hooks/exhaustive-deps
59
- }, []);
60
- react_1.useEffect(() => {
61
- if (!lodash_1.isEmpty(selected.iso2) && `${prefix}${selected.dialCode}` !== countryCode) {
62
- setIso2(selected.iso2);
63
- setFormat(selected.format);
64
- onPhoneValue && onPhoneValue(`${prefix}${selected.dialCode}`);
65
- setFormattedNumber(`${prefix}${selected.dialCode}`);
66
- }
67
- // eslint-disable-next-line react-hooks/exhaustive-deps
68
- }, [selected]);
69
- react_1.useEffect(() => {
70
- if (lodash_1.isEmpty(phoneValue)) {
71
- setIso2('');
72
- setInvalid(false);
73
- setFormattedNumber('');
74
- }
75
- // eslint-disable-next-line react-hooks/exhaustive-deps
76
- }, [phoneValue]);
77
51
  // Getting Country phone format
78
52
  function getMask(prefix, dialCode, predefinedMask, defaultMask, alwaysDefaultMask) {
79
53
  if (!predefinedMask || alwaysDefaultMask) {
@@ -95,25 +69,55 @@ function PhoneInput(props) {
95
69
  };
96
70
  return countryItem;
97
71
  });
98
- const onChange = (phone) => {
99
- if (lodash_1.isEmpty(phone)) {
72
+ const setLocalFormat = (phoneNumber) => {
73
+ let localPhone = phoneNumber.replace(prefix, '');
74
+ // Guessing countries according to user input
75
+ const possibleCountries = initializedCountries.filter((country) => localPhone === null || localPhone === void 0 ? void 0 : localPhone.startsWith(country.dialCode.toString()));
76
+ const exactCountry = initializedCountries.filter((country) => country.dialCode.toString() === localPhone);
77
+ let localFormat;
78
+ if (!lodash_1.isEmpty(exactCountry)) {
79
+ setIso2(exactCountry[0].iso2.toString());
80
+ localFormat = exactCountry[0].format.toString();
81
+ onCountryCodeChange && onCountryCodeChange(prefix + exactCountry[0].dialCode.toString());
82
+ setFormat(localFormat);
83
+ }
84
+ else if (!lodash_1.isEmpty(possibleCountries)) {
85
+ setIso2(possibleCountries[0].iso2.toString());
86
+ localFormat = possibleCountries[0].format.toString();
87
+ onCountryCodeChange && onCountryCodeChange(prefix + possibleCountries[0].dialCode.toString());
88
+ setFormat(localFormat);
89
+ }
90
+ else {
91
+ // if the exact and possible are not the
92
+ setIso2('');
93
+ localFormat = format;
94
+ onCountryCodeChange && onCountryCodeChange('');
95
+ }
96
+ return localFormat;
97
+ };
98
+ const onPhoneChange = (phone) => {
99
+ if (lodash_1.isEmpty(phone.replace(prefix, ''))) {
100
100
  setFormattedNumber('');
101
+ onPhoneValueChange('');
101
102
  }
102
103
  const regex = /^[\d ()+-]+$/;
103
- regex.test(phone) ? setInvalid(false) : setInvalid(true);
104
- formatNumber(phone);
104
+ if (setInvalid)
105
+ regex.test(phone) ? setInvalid(false) : setInvalid(true);
106
+ const localFormat = setLocalFormat(phone);
107
+ const _formattedNumber = formatNumber(phone, localFormat);
108
+ setFormattedNumber(_formattedNumber);
105
109
  if (!phoneValue.startsWith(prefix) && regex.test(phone) && !lodash_1.isEqual(phone, '-')) {
106
- onPhoneValue && onPhoneValue(prefix + phone);
110
+ onPhoneValueChange(prefix + phone);
107
111
  }
108
- else if (phone.length <= formattedNumber.length) {
109
- onPhoneValue && onPhoneValue(phone);
112
+ else if (phone.length <= _formattedNumber.length) {
113
+ onPhoneValueChange(phone);
110
114
  }
111
115
  };
112
116
  const onToggle = (isOpen) => {
113
117
  setIsOpen(isOpen);
114
118
  };
115
- const onSelect = (event, selection) => {
116
- setSelected(selection);
119
+ const onCountrySelect = (event, selection) => {
120
+ setCountryObj(selection);
117
121
  setIsOpen(!isOpen);
118
122
  };
119
123
  const getOptions = (options) => {
@@ -133,42 +137,16 @@ function PhoneInput(props) {
133
137
  return getOptions(newOptions);
134
138
  };
135
139
  // Formatting phone numbers according to country
136
- const formatNumber = (phoneNumber) => {
137
- if (lodash_1.isEmpty(phoneNumber)) {
138
- return;
139
- }
140
- let localPhone = phoneNumber.replace(prefix, '');
141
- if (lodash_1.isEmpty(localPhone)) {
142
- setFormattedNumber('');
143
- return;
144
- }
145
- // Guessing countries according to user input
146
- const possibleCountries = initializedCountries.filter((country) => localPhone.startsWith(country.dialCode.toString()));
147
- const exactCountry = initializedCountries.filter((country) => country.dialCode.toString() === localPhone);
148
- let localFormat;
149
- if (!lodash_1.isEmpty(exactCountry)) {
150
- setIso2(exactCountry[0].iso2.toString());
151
- localFormat = exactCountry[0].format.toString();
152
- setFormat(localFormat);
153
- onCountryCode && onCountryCode(prefix + exactCountry[0].dialCode.toString());
154
- }
155
- else if (!lodash_1.isEmpty(possibleCountries)) {
156
- setIso2(possibleCountries[0].iso2.toString());
157
- localFormat = possibleCountries[0].format.toString();
158
- setFormat(localFormat);
159
- onCountryCode && onCountryCode(prefix + possibleCountries[0].dialCode.toString());
160
- }
161
- else {
162
- setIso2('');
163
- localFormat = format;
164
- }
165
- if (lodash_1.isEmpty(localFormat)) {
166
- setFormattedNumber('');
167
- return;
140
+ const formatNumber = (fullPhoneNumber, localFormat) => {
141
+ if (lodash_1.isEmpty(fullPhoneNumber)) {
142
+ return '';
168
143
  }
144
+ let localPhone = fullPhoneNumber.replace(prefix, '');
145
+ if (lodash_1.isEmpty(localPhone))
146
+ return '';
169
147
  // Formatting inputted number
170
148
  let phone = '';
171
- [...phoneNumber].forEach((ele) => {
149
+ [...fullPhoneNumber].forEach((ele) => {
172
150
  if (ele >= '0' && ele <= '9') {
173
151
  phone = phone.concat(ele);
174
152
  }
@@ -184,16 +162,43 @@ function PhoneInput(props) {
184
162
  pattern += localFormat[j];
185
163
  }
186
164
  }
187
- setFormattedNumber(pattern);
165
+ return pattern;
188
166
  };
189
167
  const placeholder = (react_1.default.createElement("div", { className: "phone-number-select-placeholder" },
190
168
  react_1.default.createElement("div", { className: "pf-u-display-inline-flex" },
191
169
  react_1.default.createElement("div", { className: `flag ${iso2}`, style: { marginRight: '5px' } }),
192
170
  iso2.toUpperCase())));
193
- return (react_1.default.createElement(react_1.default.Fragment, null,
194
- react_1.default.createElement(react_core_1.InputGroup, { className: "phone-number-input" },
195
- react_1.default.createElement("div", null,
196
- react_1.default.createElement(react_core_1.Select, { variant: react_core_1.SelectVariant.single, "data-tracking-id": "case-phone-number-country-code", className: "phone-number-select", onToggle: onToggle, onSelect: onSelect, isOpen: isOpen, placeholderText: iso2 && phoneValue !== '' ? placeholder : 'Country Code', onFilter: onFilter, hasInlineFilter: true, inlineFilterPlaceholderText: t('Search') }, getOptions(initializedCountries))),
197
- react_1.default.createElement(react_core_1.TextInput, { id: "case-phone-number", "data-tracking-id": "case-phone-number", placeholder: "55-555-5555", value: formattedNumber ? formattedNumber : phoneValue, onChange: onChange, validated: validations }))));
171
+ react_1.useEffect(() => {
172
+ if (lodash_1.isEmpty(phoneValue))
173
+ return;
174
+ if (lodash_1.isEmpty(iso2)) {
175
+ const localFormat = setLocalFormat(phoneValue);
176
+ const _formattedNumber = formatNumber(phoneValue, localFormat);
177
+ setFormattedNumber(_formattedNumber);
178
+ }
179
+ // eslint-disable-next-line react-hooks/exhaustive-deps
180
+ }, []);
181
+ react_1.useEffect(() => {
182
+ if (!lodash_1.isEmpty(countryObj.iso2) && `${prefix}${countryObj.dialCode}` !== countryCode) {
183
+ setIso2(countryObj.iso2);
184
+ setFormat(countryObj.format);
185
+ onPhoneValueChange(`${prefix}${countryObj.dialCode}`);
186
+ setFormattedNumber(`${prefix}${countryObj.dialCode}`);
187
+ }
188
+ // eslint-disable-next-line react-hooks/exhaustive-deps
189
+ }, [countryObj]);
190
+ react_1.useEffect(() => {
191
+ if (lodash_1.isEmpty(phoneValue)) {
192
+ setIso2('');
193
+ setInvalid && setInvalid(false);
194
+ setFormattedNumber('');
195
+ }
196
+ // eslint-disable-next-line react-hooks/exhaustive-deps
197
+ }, [phoneValue]);
198
+ return (react_1.default.createElement(react_core_1.InputGroup, { className: "phone-number-input" },
199
+ react_1.default.createElement("div", null,
200
+ react_1.default.createElement(react_core_1.Select, { variant: react_core_1.SelectVariant.single, "data-tracking-id": "case-phone-number-country-code", className: "phone-number-select", onToggle: onToggle, onSelect: onCountrySelect, isOpen: isOpen, placeholderText: iso2 && phoneValue !== '' ? placeholder : 'Country Code', onFilter: onFilter, hasInlineFilter: true, inlineFilterPlaceholderText: t('Search'), isDisabled: props.isDisabled }, getOptions(initializedCountries))),
201
+ react_1.default.createElement(react_core_1.TextInput, { id: "case-phone-number", "data-tracking-id": "case-phone-number", placeholder: "55-555-5555", value: formattedNumber ? formattedNumber : phoneValue, onChange: onPhoneChange, validated: validations, isDisabled: props.isDisabled }),
202
+ props.isLoading && react_1.default.createElement(react_core_1.Spinner, { isSVG: true, size: "lg", className: "pf-u-ml-2xl pf-u-mr-xl phone-spinner" })));
198
203
  }
199
204
  exports.PhoneInput = PhoneInput;
@@ -742,3 +742,16 @@
742
742
  div.pf-c-input-group.phone-number-input {
743
743
  margin: -5px;
744
744
  }
745
+
746
+ .phone-number-input {
747
+ position: relative;
748
+ .phone-number-select button {
749
+ min-height: 36px;
750
+ }
751
+ }
752
+
753
+ .phone-spinner {
754
+ position: absolute;
755
+ right: -20px;
756
+ top: 5px;
757
+ }
@@ -7,6 +7,7 @@ interface IProps<T> extends Omit<IDropdownListProps<T>, 'onChange' | 'onInputCha
7
7
  onChange: (changes: UseComboboxStateChange<IOption<T>>) => void;
8
8
  itemsList: IOption<T>[];
9
9
  onInputChange?: (items: IOption<T>[], inputValue: string) => void;
10
+ isPDFExporting?: boolean;
10
11
  }
11
12
  export default function SearchableList<T>(props: IProps<T>): JSX.Element;
12
13
  export {};
@@ -1 +1 @@
1
- {"version":3,"file":"SearchableList.d.ts","sourceRoot":"","sources":["../../../src/DropDownList/SearchableList.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,OAAO,EAAE,MAAM,0BAA0B,CAAC;AACnD,OAAO,EAEH,sBAAsB,EAEtB,sBAAsB,EAEzB,MAAM,WAAW,CAAC;AAGnB,OAAO,KAAK,MAAM,OAAO,CAAC;AAK1B,OAAO,EAAE,kBAAkB,EAAE,MAAM,SAAS,CAAC;AAE7C,UAAU,MAAM,CAAC,CAAC,CAAE,SAAQ,IAAI,CAAC,kBAAkB,CAAC,CAAC,CAAC,EAAE,UAAU,GAAG,eAAe,CAAC;IACjF,eAAe,EAAE,CAAC,SAAS,EAAE,sBAAsB,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,KAAK,KAAK,CAAC,SAAS,EAAE,CAAC;IACtF,QAAQ,EAAE,CAAC,OAAO,EAAE,sBAAsB,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,KAAK,IAAI,CAAC;IAChE,SAAS,EAAE,OAAO,CAAC,CAAC,CAAC,EAAE,CAAC;IACxB,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,CAAC,CAAC,CAAC,EAAE,EAAE,UAAU,EAAE,MAAM,KAAK,IAAI,CAAC;CACrE;AAED,MAAM,CAAC,OAAO,UAAU,cAAc,CAAC,CAAC,EAAE,KAAK,EAAE,MAAM,CAAC,CAAC,CAAC,eA6IzD"}
1
+ {"version":3,"file":"SearchableList.d.ts","sourceRoot":"","sources":["../../../src/DropDownList/SearchableList.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,OAAO,EAAE,MAAM,0BAA0B,CAAC;AACnD,OAAO,EAEH,sBAAsB,EAEtB,sBAAsB,EAEzB,MAAM,WAAW,CAAC;AAGnB,OAAO,KAAK,MAAM,OAAO,CAAC;AAK1B,OAAO,EAAE,kBAAkB,EAAE,MAAM,SAAS,CAAC;AAE7C,UAAU,MAAM,CAAC,CAAC,CAAE,SAAQ,IAAI,CAAC,kBAAkB,CAAC,CAAC,CAAC,EAAE,UAAU,GAAG,eAAe,CAAC;IACjF,eAAe,EAAE,CAAC,SAAS,EAAE,sBAAsB,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,KAAK,KAAK,CAAC,SAAS,EAAE,CAAC;IACtF,QAAQ,EAAE,CAAC,OAAO,EAAE,sBAAsB,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,KAAK,IAAI,CAAC;IAChE,SAAS,EAAE,OAAO,CAAC,CAAC,CAAC,EAAE,CAAC;IACxB,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,CAAC,CAAC,CAAC,EAAE,EAAE,UAAU,EAAE,MAAM,KAAK,IAAI,CAAC;IAClE,cAAc,CAAC,EAAE,OAAO,CAAC;CAC5B;AAED,MAAM,CAAC,OAAO,UAAU,cAAc,CAAC,CAAC,EAAE,KAAK,EAAE,MAAM,CAAC,CAAC,CAAC,eA+IzD"}
@@ -83,8 +83,10 @@ export default function SearchableList(props) {
83
83
  onBlur: onInputBlur(),
84
84
  })))),
85
85
  React.createElement(LoadingIndicator, { isInline: true, show: props.isLoadingList }),
86
- !isEmpty(downshift.inputValue) && !props.isLoadingList && (React.createElement("button", { className: "pf-c-button pf-m-plain pf-c-select__toggle-clear", onClick: clearSelection(), "aria-label": "clear selection", type: "button", title: "Clear selection", disabled: props.disabled, "data-tracking-id": `${props['data-tracking-id']}-clear` },
87
- React.createElement(TimesCircleIcon, null))),
86
+ !isEmpty(downshift.inputValue) &&
87
+ !props.isLoadingList &&
88
+ (!props.isExportingPDF ? (React.createElement("button", { className: "pf-c-button pf-m-plain pf-c-select__toggle-clear", onClick: clearSelection(), "aria-label": "clear selection", type: "button", title: "Clear selection", disabled: props.disabled, "data-tracking-id": `${props['data-tracking-id']}-clear` },
89
+ React.createElement(TimesCircleIcon, null))) : null),
88
90
  !props.hideToggleButton && (React.createElement("button", Object.assign({ type: "button" }, getToggleButtonProps({
89
91
  disabled: props.disabled || props.isLoadingList,
90
92
  className: 'pf-c-button pf-c-select__toggle-button pf-m-plain',
@@ -42,7 +42,7 @@
42
42
 
43
43
  .downshift .downshift-menu.open {
44
44
  visibility: visible;
45
- z-index: 200;
45
+ z-index: 89;
46
46
  }
47
47
 
48
48
  .downshift .downshift-menu {
@@ -31,6 +31,7 @@ export interface IDropdownListProps<T> extends IDClassNameProps {
31
31
  hasTwoColumns?: boolean;
32
32
  chipGroupComponent?: React.ReactNode;
33
33
  hideToggleButton?: boolean;
34
+ isExportingPDF?: boolean;
34
35
  }
35
36
  export declare type IMultiSelectOnlyProps<T> = {
36
37
  selectedItems?: Array<IOption<T>>;
@@ -1 +1 @@
1
- {"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/DropDownList/types.ts"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/DropDownList/types.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,gBAAgB,EAAE,OAAO,EAAE,MAAM,0BAA0B,CAAC;AAIrE,MAAM,WAAW,kBAAkB,CAAC,CAAC,CAAE,SAAQ,gBAAgB;IAC3D,IAAI,EAAE,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,CAAC;IACxB,YAAY,EAAE,OAAO,CAAC,CAAC,CAAC,CAAC;IACzB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,YAAY,CAAC,EAAE,CAAC,YAAY,EAAE,OAAO,CAAC,CAAC,CAAC,KAAK,IAAI,CAAC;IAClD,gBAAgB,CAAC,EAAE,MAAM,IAAI,CAAC;IAC9B,QAAQ,EAAE,CAAC,SAAS,EAAE,OAAO,CAAC,CAAC,CAAC,KAAK,GAAG,CAAC;IACzC,YAAY,CAAC,EAAE,MAAM,IAAI,CAAC;IAC1B,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAC/B,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,UAAU,CAAC,EAAE,CAAC,WAAW,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,EAAE,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC,iBAAiB,EAAE,UAAU,CAAC,KAAK,IAAI,CAAC;IACjH,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,WAAW,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;IAC9D,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,cAAc,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,CAAC,CAAC,CAAC,KAAK,OAAO,CAAC;IAC/C,KAAK,CAAC,EAAE,MAAM,GAAG,KAAK,CAAC,SAAS,CAAC;IACjC,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,kBAAkB,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACrC,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,cAAc,CAAC,EAAE,OAAO,CAAC;CAC5B;AAED,oBAAY,qBAAqB,CAAC,CAAC,IAAI;IACnC,aAAa,CAAC,EAAE,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,CAAC;IAClC,QAAQ,EAAE,CAAC,aAAa,EAAE,OAAO,CAAC,CAAC,CAAC,EAAE,KAAK,GAAG,CAAC;IAC/C,YAAY,CAAC,EAAE,CAAC,aAAa,EAAE,OAAO,CAAC,CAAC,CAAC,EAAE,KAAK,GAAG,CAAC;CACvD,CAAC;AAEF,oBAAY,oCAAoC,CAAC,CAAC,IAAI,IAAI,CACtD,kBAAkB,CAAC,CAAC,CAAC,EACrB,UAAU,GAAG,cAAc,GAAG,aAAa,GAAG,cAAc,GAAG,gBAAgB,GAAG,eAAe,CACpG,CAAC;AAEF,oBAAY,wBAAwB,CAAC,CAAC,IAAI,oCAAoC,CAAC,CAAC,CAAC,GAAG,qBAAqB,CAAC,CAAC,CAAC,CAAC;AAE7G,oBAAY,eAAe,CAAC,CAAC,IAAI;IAC7B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,EAAE,CAAC,MAAM,KAAA,KAAK,IAAI,CAAC;IAC3B,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,cAAc,CAAC,EAAE,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,CAAC;CACtC,CAAC;AAEF,oBAAY,8BAA8B,CAAC,CAAC,IACtC,IAAI,CAAC,kBAAkB,CAAC,CAAC,CAAC,EAAE,eAAe,GAAG,YAAY,GAAG,aAAa,CAAC,GAC3E,wBAAwB,CAAC,CAAC,CAAC,CAAC;AAElC,oBAAY,kBAAkB,CAAC,CAAC,IAAI,IAAI,CAAC,kBAAkB,CAAC,CAAC,CAAC,EAAE,eAAe,GAAG,YAAY,GAAG,aAAa,CAAC,GAC3G,eAAe,CAAC,CAAC,CAAC,CAAC"}
@@ -27,6 +27,7 @@ interface IProps {
27
27
  hideLabel?: boolean;
28
28
  isSpaceAllowed?: boolean;
29
29
  inputValue?: string;
30
+ isExportingPDF?: boolean;
30
31
  }
31
32
  declare function InlineEdit(props: IProps): JSX.Element;
32
33
  declare namespace InlineEdit {
@@ -1 +1 @@
1
- {"version":3,"file":"InlineEdit.d.ts","sourceRoot":"","sources":["../../../src/InlineEdit/InlineEdit.tsx"],"names":[],"mappings":"AAAA,OAAO,kBAAkB,CAAC;AAI1B,OAAc,EAAE,SAAS,EAAY,MAAM,OAAO,CAAC;AAGnD,UAAU,MAAM;IACZ,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,QAAQ,EAAE,GAAG,CAAC,OAAO,GAAG,GAAG,CAAC,OAAO,EAAE,CAAC;IACtC,UAAU,EAAE,SAAS,CAAC,gBAAgB,CAAC,CAAC;IACxC,YAAY,EAAE,GAAG,CAAC,OAAO,GAAG,GAAG,CAAC,OAAO,EAAE,CAAC;IAC1C,aAAa,CAAC,EAAE,GAAG,CAAC,OAAO,GAAG,GAAG,CAAC,OAAO,EAAE,CAAC;IAC5C,gBAAgB,EAAE,GAAG,CAAC,OAAO,GAAG,MAAM,CAAC;IACvC,OAAO,CAAC,EAAE,MAAM,GAAG,GAAG,CAAC,OAAO,CAAC;IAC/B,eAAe,EAAE,OAAO,CAAC;IACzB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,kBAAkB,EAAE,OAAO,CAAC;IAC5B,cAAc,EAAE,OAAO,CAAC;IACxB,WAAW,EAAE,GAAG,CAAC,OAAO,GAAG,MAAM,CAAC;IAClC,SAAS,EAAE,GAAG,CAAC,OAAO,GAAG,MAAM,CAAC;IAChC,MAAM,EAAE,GAAG,CAAC;IACZ,QAAQ,EAAE,GAAG,CAAC;IACd,cAAc,CAAC,EAAE,OAAO,CAAC;IAGzB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,YAAY,CAAC,EAAE,OAAO,CAAC;IAEvB,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,UAAU,CAAC,EAAE,MAAM,CAAC;CACvB;AAsBD,iBAAS,UAAU,CAAC,KAAK,EAAE,MAAM,eAoKhC;kBApKQ,UAAU;;;AAuKnB,OAAO,EAAE,UAAU,EAAE,CAAC"}
1
+ {"version":3,"file":"InlineEdit.d.ts","sourceRoot":"","sources":["../../../src/InlineEdit/InlineEdit.tsx"],"names":[],"mappings":"AAAA,OAAO,kBAAkB,CAAC;AAI1B,OAAc,EAAE,SAAS,EAAY,MAAM,OAAO,CAAC;AAGnD,UAAU,MAAM;IACZ,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,QAAQ,EAAE,GAAG,CAAC,OAAO,GAAG,GAAG,CAAC,OAAO,EAAE,CAAC;IACtC,UAAU,EAAE,SAAS,CAAC,gBAAgB,CAAC,CAAC;IACxC,YAAY,EAAE,GAAG,CAAC,OAAO,GAAG,GAAG,CAAC,OAAO,EAAE,CAAC;IAC1C,aAAa,CAAC,EAAE,GAAG,CAAC,OAAO,GAAG,GAAG,CAAC,OAAO,EAAE,CAAC;IAC5C,gBAAgB,EAAE,GAAG,CAAC,OAAO,GAAG,MAAM,CAAC;IACvC,OAAO,CAAC,EAAE,MAAM,GAAG,GAAG,CAAC,OAAO,CAAC;IAC/B,eAAe,EAAE,OAAO,CAAC;IACzB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,kBAAkB,EAAE,OAAO,CAAC;IAC5B,cAAc,EAAE,OAAO,CAAC;IACxB,WAAW,EAAE,GAAG,CAAC,OAAO,GAAG,MAAM,CAAC;IAClC,SAAS,EAAE,GAAG,CAAC,OAAO,GAAG,MAAM,CAAC;IAChC,MAAM,EAAE,GAAG,CAAC;IACZ,QAAQ,EAAE,GAAG,CAAC;IACd,cAAc,CAAC,EAAE,OAAO,CAAC;IAGzB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,YAAY,CAAC,EAAE,OAAO,CAAC;IAEvB,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,cAAc,CAAC,EAAE,OAAO,CAAC;CAC5B;AAsBD,iBAAS,UAAU,CAAC,KAAK,EAAE,MAAM,eAwKhC;kBAxKQ,UAAU;;;AA2KnB,OAAO,EAAE,UAAU,EAAE,CAAC"}
@@ -48,7 +48,7 @@ function InlineEdit(props) {
48
48
  if (!props.allowInlineEdit) {
49
49
  return null;
50
50
  }
51
- return (React.createElement("button", { className: "btn btn-link btn-app btn-edit", "aria-label": "Edit", onClick: onEditClicked },
51
+ return (React.createElement("button", { className: `btn btn-link btn-app btn-edit ${props.isExportingPDF ? 'hide-in-pdf' : ''}`, "aria-label": "Edit", onClick: onEditClicked },
52
52
  React.createElement(PencilAltIcon, null)));
53
53
  };
54
54
  const onBlurChild = () => {
@@ -105,7 +105,7 @@ function InlineEdit(props) {
105
105
  !props.hideLabel && (React.createElement(React.Fragment, null,
106
106
  React.createElement("label", Object.assign({}, props.labelProps),
107
107
  React.createElement("span", { className: "label-edit" }, props.labelContent),
108
- props.helperContent,
108
+ React.createElement("span", { className: `${props.isExportingPDF ? 'hide-in-pdf' : ''}` }, props.helperContent),
109
109
  renderEditButton()))),
110
110
  renderSaveCancel(),
111
111
  canShowContent && !props.usePreformattedTag && (React.createElement(React.Fragment, null,
@@ -31,6 +31,7 @@ interface IProps {
31
31
  hideLabel?: boolean;
32
32
  isSpaceAllowed?: boolean;
33
33
  inputValue?: string;
34
+ isExportingPDF?: boolean;
34
35
  }
35
36
  declare function NewInlineEdit(props: IProps): JSX.Element;
36
37
  declare namespace NewInlineEdit {
@@ -1 +1 @@
1
- {"version":3,"file":"NewInlineEdit.d.ts","sourceRoot":"","sources":["../../../src/InlineEdit/NewInlineEdit.tsx"],"names":[],"mappings":"AAAA,OAAO,qBAAqB,CAAC;AAI7B,OAAc,EAAE,SAAS,EAAuB,MAAM,OAAO,CAAC;AAG9D,UAAU,MAAM;IACZ,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,QAAQ,EAAE,GAAG,CAAC,OAAO,GAAG,GAAG,CAAC,OAAO,EAAE,CAAC;IACtC,UAAU,EAAE,SAAS,CAAC,gBAAgB,CAAC,CAAC;IACxC,YAAY,EAAE,GAAG,CAAC,OAAO,GAAG,GAAG,CAAC,OAAO,EAAE,CAAC;IAC1C,aAAa,CAAC,EAAE,GAAG,CAAC,OAAO,GAAG,GAAG,CAAC,OAAO,EAAE,CAAC;IAC5C,gBAAgB,EAAE,GAAG,CAAC,OAAO,GAAG,MAAM,CAAC;IACvC,OAAO,CAAC,EAAE,MAAM,GAAG,GAAG,CAAC,OAAO,CAAC;IAC/B,eAAe,EAAE,OAAO,CAAC;IACzB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,kBAAkB,EAAE,OAAO,CAAC;IAC5B,cAAc,EAAE,OAAO,CAAC;IACxB,WAAW,EAAE,GAAG,CAAC,OAAO,GAAG,MAAM,CAAC;IAClC,SAAS,EAAE,GAAG,CAAC,OAAO,GAAG,MAAM,CAAC;IAChC,MAAM,EAAE,GAAG,CAAC;IACZ,QAAQ,EAAE,GAAG,CAAC;IACd,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,SAAS,EAAE,MAAM,CAAC;IAClB,SAAS,EAAE,MAAM,CAAC;IAClB,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,eAAe,CAAC,EAAE,OAAO,CAAC;IAG1B,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,YAAY,CAAC,EAAE,OAAO,CAAC;IAEvB,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,UAAU,CAAC,EAAE,MAAM,CAAC;CACvB;AAsBD,iBAAS,aAAa,CAAC,KAAK,EAAE,MAAM,eAqLnC;kBArLQ,aAAa;;;AAwLtB,OAAO,EAAE,aAAa,EAAE,CAAC"}
1
+ {"version":3,"file":"NewInlineEdit.d.ts","sourceRoot":"","sources":["../../../src/InlineEdit/NewInlineEdit.tsx"],"names":[],"mappings":"AAAA,OAAO,qBAAqB,CAAC;AAI7B,OAAc,EAAE,SAAS,EAAuB,MAAM,OAAO,CAAC;AAG9D,UAAU,MAAM;IACZ,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,QAAQ,EAAE,GAAG,CAAC,OAAO,GAAG,GAAG,CAAC,OAAO,EAAE,CAAC;IACtC,UAAU,EAAE,SAAS,CAAC,gBAAgB,CAAC,CAAC;IACxC,YAAY,EAAE,GAAG,CAAC,OAAO,GAAG,GAAG,CAAC,OAAO,EAAE,CAAC;IAC1C,aAAa,CAAC,EAAE,GAAG,CAAC,OAAO,GAAG,GAAG,CAAC,OAAO,EAAE,CAAC;IAC5C,gBAAgB,EAAE,GAAG,CAAC,OAAO,GAAG,MAAM,CAAC;IACvC,OAAO,CAAC,EAAE,MAAM,GAAG,GAAG,CAAC,OAAO,CAAC;IAC/B,eAAe,EAAE,OAAO,CAAC;IACzB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,kBAAkB,EAAE,OAAO,CAAC;IAC5B,cAAc,EAAE,OAAO,CAAC;IACxB,WAAW,EAAE,GAAG,CAAC,OAAO,GAAG,MAAM,CAAC;IAClC,SAAS,EAAE,GAAG,CAAC,OAAO,GAAG,MAAM,CAAC;IAChC,MAAM,EAAE,GAAG,CAAC;IACZ,QAAQ,EAAE,GAAG,CAAC;IACd,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,SAAS,EAAE,MAAM,CAAC;IAClB,SAAS,EAAE,MAAM,CAAC;IAClB,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,eAAe,CAAC,EAAE,OAAO,CAAC;IAG1B,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,YAAY,CAAC,EAAE,OAAO,CAAC;IAEvB,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,cAAc,CAAC,EAAE,OAAO,CAAC;CAC5B;AAsBD,iBAAS,aAAa,CAAC,KAAK,EAAE,MAAM,eAyLnC;kBAzLQ,aAAa;;;AA4LtB,OAAO,EAAE,aAAa,EAAE,CAAC"}
@@ -54,7 +54,7 @@ function NewInlineEdit(props) {
54
54
  if (!props.allowInlineEdit) {
55
55
  return null;
56
56
  }
57
- return (React.createElement("button", { className: "btn btn-link btn-app btn-edit", "aria-label": "Edit", onClick: onEditClicked },
57
+ return (React.createElement("button", { className: `btn btn-link btn-app btn-edit ${props.isExportingPDF ? 'hide-in-pdf' : ''}`, "aria-label": "Edit", onClick: onEditClicked },
58
58
  React.createElement(PencilAltIcon, null)));
59
59
  };
60
60
  const onBlurChild = () => {
@@ -112,7 +112,7 @@ function NewInlineEdit(props) {
112
112
  !props.hideLabel && (React.createElement(React.Fragment, null,
113
113
  React.createElement("label", Object.assign({}, props.labelProps),
114
114
  React.createElement("span", { className: "label-edit" }, props.labelContent),
115
- props.helperContent,
115
+ React.createElement("span", { className: `${props.isExportingPDF ? 'hide-in-pdf' : ''}` }, props.helperContent),
116
116
  !props.content && !isEditing ? renderEditButton() : null))),
117
117
  renderSaveCancel(),
118
118
  props.hideSaveCancel && isEditing && (React.createElement("span", { className: `
@@ -23,3 +23,7 @@
23
23
  .case-overview .edit-question .loading-indicator {
24
24
  margin-left: 0px;
25
25
  }
26
+
27
+ .hide-in-pdf {
28
+ display: none !important;
29
+ }
@@ -16,6 +16,10 @@
16
16
  float: right;
17
17
  }
18
18
 
19
+ .hide-in-pdf {
20
+ display: none !important;
21
+ }
22
+
19
23
  .edit-question .loading-indicator {
20
24
  margin-left: 10px;
21
25
  }
@@ -13,7 +13,7 @@ function LoadingDots(props) {
13
13
  React.createElement("span", null, ".")),
14
14
  React.createElement("p", { className: "sr-only" },
15
15
  React.createElement(Trans, null, "Loading...")))),
16
- props.message && props.show && React.createElement("p", { className: "pf-u-text-align-center pf-u-my-md" }, props.message)));
16
+ props.message && props.show && React.createElement("span", { className: "spinner-message" }, props.message)));
17
17
  }
18
18
  LoadingDots.defaultProps = defaultProps;
19
19
  export { LoadingDots };
@@ -3,11 +3,13 @@ import './PhoneInput.scss';
3
3
  interface IProps {
4
4
  phoneValue: string;
5
5
  countryCode?: string;
6
- onPhoneValue?: (string: any) => void;
6
+ onPhoneValueChange: (string: any) => void;
7
7
  validations?: 'default' | 'success' | 'warning' | 'error' | undefined;
8
- onCountryCode?: (string: any) => void;
8
+ onCountryCodeChange?: (string: any) => void;
9
9
  invalid?: boolean;
10
- setInvalid: (boolean: any) => void;
10
+ setInvalid?: (boolean: any) => void;
11
+ isLoading?: boolean;
12
+ isDisabled?: boolean;
11
13
  }
12
14
  export declare function PhoneInput(props: IProps): JSX.Element;
13
15
  export {};
@@ -1 +1 @@
1
- {"version":3,"file":"PhoneInput.d.ts","sourceRoot":"","sources":["../../../src/PhoneInput/PhoneInput.tsx"],"names":[],"mappings":";AAAA,OAAO,mBAAmB,CAAC;AAS3B,UAAU,MAAM;IACZ,UAAU,EAAE,MAAM,CAAC;IACnB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,YAAY,CAAC,EAAE,CAAC,MAAM,KAAA,KAAK,IAAI,CAAC;IAChC,WAAW,CAAC,EAAE,SAAS,GAAG,SAAS,GAAG,SAAS,GAAG,OAAO,GAAG,SAAS,CAAC;IACtE,aAAa,CAAC,EAAE,CAAC,MAAM,KAAA,KAAK,IAAI,CAAC;IACjC,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,UAAU,EAAE,CAAC,OAAO,KAAA,KAAK,IAAI,CAAC;CACjC;AAED,wBAAgB,UAAU,CAAC,KAAK,EAAE,MAAM,eAyNvC"}
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;AAED,wBAAgB,UAAU,CAAC,KAAK,EAAE,MAAM,eAsOvC"}
@@ -1,11 +1,12 @@
1
1
  import './PhoneInput.scss';
2
- import { InputGroup, Select, SelectOption, SelectVariant, TextInput } from '@patternfly/react-core';
2
+ import { InputGroup, Select, SelectOption, SelectVariant, Spinner, TextInput } from '@patternfly/react-core';
3
3
  import { isEmpty, isEqual } from 'lodash';
4
4
  import React, { useEffect, useState } from 'react';
5
5
  import { useTranslation } from 'react-i18next';
6
+ // import { usePrevious } from '../hooks/usePrevious';
6
7
  import CountryData from './CountryData';
7
8
  export function PhoneInput(props) {
8
- const { phoneValue, countryCode, onCountryCode, onPhoneValue, validations, setInvalid } = props;
9
+ const { phoneValue, countryCode, onCountryCodeChange, onPhoneValueChange, validations, setInvalid } = props;
9
10
  const { t } = useTranslation();
10
11
  const [isOpen, setIsOpen] = useState(false);
11
12
  const [iso2, setIso2] = useState('');
@@ -14,7 +15,7 @@ export function PhoneInput(props) {
14
15
  const prefix = '+';
15
16
  const defaultMask = '... ... ... ... ..';
16
17
  const alwaysDefaultMask = false;
17
- const [selected, setSelected] = useState({
18
+ const [countryObj, setCountryObj] = useState({
18
19
  name: '',
19
20
  regions: [''],
20
21
  iso2: '',
@@ -22,33 +23,6 @@ export function PhoneInput(props) {
22
23
  dialCode: '',
23
24
  format: '', // Number Format (For US, '(...) ...-....' )
24
25
  });
25
- useEffect(() => {
26
- if (isEmpty(iso2) && !isEmpty(phoneValue)) {
27
- let localCountryCode = countryCode === null || countryCode === void 0 ? void 0 : countryCode.replace(prefix, '');
28
- const exactCountry = initializedCountries.filter((country) => country.dialCode.toString() === localCountryCode);
29
- let localFormat = exactCountry[0].format.toString();
30
- setFormat(localFormat);
31
- formatNumber(countryCode + phoneValue);
32
- }
33
- // eslint-disable-next-line react-hooks/exhaustive-deps
34
- }, []);
35
- useEffect(() => {
36
- if (!isEmpty(selected.iso2) && `${prefix}${selected.dialCode}` !== countryCode) {
37
- setIso2(selected.iso2);
38
- setFormat(selected.format);
39
- onPhoneValue && onPhoneValue(`${prefix}${selected.dialCode}`);
40
- setFormattedNumber(`${prefix}${selected.dialCode}`);
41
- }
42
- // eslint-disable-next-line react-hooks/exhaustive-deps
43
- }, [selected]);
44
- useEffect(() => {
45
- if (isEmpty(phoneValue)) {
46
- setIso2('');
47
- setInvalid(false);
48
- setFormattedNumber('');
49
- }
50
- // eslint-disable-next-line react-hooks/exhaustive-deps
51
- }, [phoneValue]);
52
26
  // Getting Country phone format
53
27
  function getMask(prefix, dialCode, predefinedMask, defaultMask, alwaysDefaultMask) {
54
28
  if (!predefinedMask || alwaysDefaultMask) {
@@ -70,25 +44,55 @@ export function PhoneInput(props) {
70
44
  };
71
45
  return countryItem;
72
46
  });
73
- const onChange = (phone) => {
74
- if (isEmpty(phone)) {
47
+ const setLocalFormat = (phoneNumber) => {
48
+ let localPhone = phoneNumber.replace(prefix, '');
49
+ // Guessing countries according to user input
50
+ const possibleCountries = initializedCountries.filter((country) => localPhone === null || localPhone === void 0 ? void 0 : localPhone.startsWith(country.dialCode.toString()));
51
+ const exactCountry = initializedCountries.filter((country) => country.dialCode.toString() === localPhone);
52
+ let localFormat;
53
+ if (!isEmpty(exactCountry)) {
54
+ setIso2(exactCountry[0].iso2.toString());
55
+ localFormat = exactCountry[0].format.toString();
56
+ onCountryCodeChange && onCountryCodeChange(prefix + exactCountry[0].dialCode.toString());
57
+ setFormat(localFormat);
58
+ }
59
+ else if (!isEmpty(possibleCountries)) {
60
+ setIso2(possibleCountries[0].iso2.toString());
61
+ localFormat = possibleCountries[0].format.toString();
62
+ onCountryCodeChange && onCountryCodeChange(prefix + possibleCountries[0].dialCode.toString());
63
+ setFormat(localFormat);
64
+ }
65
+ else {
66
+ // if the exact and possible are not the
67
+ setIso2('');
68
+ localFormat = format;
69
+ onCountryCodeChange && onCountryCodeChange('');
70
+ }
71
+ return localFormat;
72
+ };
73
+ const onPhoneChange = (phone) => {
74
+ if (isEmpty(phone.replace(prefix, ''))) {
75
75
  setFormattedNumber('');
76
+ onPhoneValueChange('');
76
77
  }
77
78
  const regex = /^[\d ()+-]+$/;
78
- regex.test(phone) ? setInvalid(false) : setInvalid(true);
79
- formatNumber(phone);
79
+ if (setInvalid)
80
+ regex.test(phone) ? setInvalid(false) : setInvalid(true);
81
+ const localFormat = setLocalFormat(phone);
82
+ const _formattedNumber = formatNumber(phone, localFormat);
83
+ setFormattedNumber(_formattedNumber);
80
84
  if (!phoneValue.startsWith(prefix) && regex.test(phone) && !isEqual(phone, '-')) {
81
- onPhoneValue && onPhoneValue(prefix + phone);
85
+ onPhoneValueChange(prefix + phone);
82
86
  }
83
- else if (phone.length <= formattedNumber.length) {
84
- onPhoneValue && onPhoneValue(phone);
87
+ else if (phone.length <= _formattedNumber.length) {
88
+ onPhoneValueChange(phone);
85
89
  }
86
90
  };
87
91
  const onToggle = (isOpen) => {
88
92
  setIsOpen(isOpen);
89
93
  };
90
- const onSelect = (event, selection) => {
91
- setSelected(selection);
94
+ const onCountrySelect = (event, selection) => {
95
+ setCountryObj(selection);
92
96
  setIsOpen(!isOpen);
93
97
  };
94
98
  const getOptions = (options) => {
@@ -108,42 +112,16 @@ export function PhoneInput(props) {
108
112
  return getOptions(newOptions);
109
113
  };
110
114
  // Formatting phone numbers according to country
111
- const formatNumber = (phoneNumber) => {
112
- if (isEmpty(phoneNumber)) {
113
- return;
114
- }
115
- let localPhone = phoneNumber.replace(prefix, '');
116
- if (isEmpty(localPhone)) {
117
- setFormattedNumber('');
118
- return;
119
- }
120
- // Guessing countries according to user input
121
- const possibleCountries = initializedCountries.filter((country) => localPhone.startsWith(country.dialCode.toString()));
122
- const exactCountry = initializedCountries.filter((country) => country.dialCode.toString() === localPhone);
123
- let localFormat;
124
- if (!isEmpty(exactCountry)) {
125
- setIso2(exactCountry[0].iso2.toString());
126
- localFormat = exactCountry[0].format.toString();
127
- setFormat(localFormat);
128
- onCountryCode && onCountryCode(prefix + exactCountry[0].dialCode.toString());
129
- }
130
- else if (!isEmpty(possibleCountries)) {
131
- setIso2(possibleCountries[0].iso2.toString());
132
- localFormat = possibleCountries[0].format.toString();
133
- setFormat(localFormat);
134
- onCountryCode && onCountryCode(prefix + possibleCountries[0].dialCode.toString());
135
- }
136
- else {
137
- setIso2('');
138
- localFormat = format;
139
- }
140
- if (isEmpty(localFormat)) {
141
- setFormattedNumber('');
142
- return;
115
+ const formatNumber = (fullPhoneNumber, localFormat) => {
116
+ if (isEmpty(fullPhoneNumber)) {
117
+ return '';
143
118
  }
119
+ let localPhone = fullPhoneNumber.replace(prefix, '');
120
+ if (isEmpty(localPhone))
121
+ return '';
144
122
  // Formatting inputted number
145
123
  let phone = '';
146
- [...phoneNumber].forEach((ele) => {
124
+ [...fullPhoneNumber].forEach((ele) => {
147
125
  if (ele >= '0' && ele <= '9') {
148
126
  phone = phone.concat(ele);
149
127
  }
@@ -159,15 +137,42 @@ export function PhoneInput(props) {
159
137
  pattern += localFormat[j];
160
138
  }
161
139
  }
162
- setFormattedNumber(pattern);
140
+ return pattern;
163
141
  };
164
142
  const placeholder = (React.createElement("div", { className: "phone-number-select-placeholder" },
165
143
  React.createElement("div", { className: "pf-u-display-inline-flex" },
166
144
  React.createElement("div", { className: `flag ${iso2}`, style: { marginRight: '5px' } }),
167
145
  iso2.toUpperCase())));
168
- return (React.createElement(React.Fragment, null,
169
- React.createElement(InputGroup, { className: "phone-number-input" },
170
- React.createElement("div", null,
171
- React.createElement(Select, { variant: SelectVariant.single, "data-tracking-id": "case-phone-number-country-code", className: "phone-number-select", onToggle: onToggle, onSelect: onSelect, isOpen: isOpen, placeholderText: iso2 && phoneValue !== '' ? placeholder : 'Country Code', onFilter: onFilter, hasInlineFilter: true, inlineFilterPlaceholderText: t('Search') }, getOptions(initializedCountries))),
172
- React.createElement(TextInput, { id: "case-phone-number", "data-tracking-id": "case-phone-number", placeholder: "55-555-5555", value: formattedNumber ? formattedNumber : phoneValue, onChange: onChange, validated: validations }))));
146
+ useEffect(() => {
147
+ if (isEmpty(phoneValue))
148
+ return;
149
+ if (isEmpty(iso2)) {
150
+ const localFormat = setLocalFormat(phoneValue);
151
+ const _formattedNumber = formatNumber(phoneValue, localFormat);
152
+ setFormattedNumber(_formattedNumber);
153
+ }
154
+ // eslint-disable-next-line react-hooks/exhaustive-deps
155
+ }, []);
156
+ useEffect(() => {
157
+ if (!isEmpty(countryObj.iso2) && `${prefix}${countryObj.dialCode}` !== countryCode) {
158
+ setIso2(countryObj.iso2);
159
+ setFormat(countryObj.format);
160
+ onPhoneValueChange(`${prefix}${countryObj.dialCode}`);
161
+ setFormattedNumber(`${prefix}${countryObj.dialCode}`);
162
+ }
163
+ // eslint-disable-next-line react-hooks/exhaustive-deps
164
+ }, [countryObj]);
165
+ useEffect(() => {
166
+ if (isEmpty(phoneValue)) {
167
+ setIso2('');
168
+ setInvalid && setInvalid(false);
169
+ setFormattedNumber('');
170
+ }
171
+ // eslint-disable-next-line react-hooks/exhaustive-deps
172
+ }, [phoneValue]);
173
+ return (React.createElement(InputGroup, { className: "phone-number-input" },
174
+ React.createElement("div", null,
175
+ React.createElement(Select, { variant: SelectVariant.single, "data-tracking-id": "case-phone-number-country-code", className: "phone-number-select", onToggle: onToggle, onSelect: onCountrySelect, isOpen: isOpen, placeholderText: iso2 && phoneValue !== '' ? placeholder : 'Country Code', onFilter: onFilter, hasInlineFilter: true, inlineFilterPlaceholderText: t('Search'), isDisabled: props.isDisabled }, getOptions(initializedCountries))),
176
+ React.createElement(TextInput, { id: "case-phone-number", "data-tracking-id": "case-phone-number", placeholder: "55-555-5555", value: formattedNumber ? formattedNumber : phoneValue, onChange: onPhoneChange, validated: validations, isDisabled: props.isDisabled }),
177
+ props.isLoading && React.createElement(Spinner, { isSVG: true, size: "lg", className: "pf-u-ml-2xl pf-u-mr-xl phone-spinner" })));
173
178
  }
@@ -742,3 +742,16 @@
742
742
  div.pf-c-input-group.phone-number-input {
743
743
  margin: -5px;
744
744
  }
745
+
746
+ .phone-number-input {
747
+ position: relative;
748
+ .phone-number-select button {
749
+ min-height: 36px;
750
+ }
751
+ }
752
+
753
+ .phone-spinner {
754
+ position: absolute;
755
+ right: -20px;
756
+ top: 5px;
757
+ }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@rh-support/components",
3
- "version": "2.0.12-beta.0",
3
+ "version": "2.0.13",
4
4
  "description": "Contains all reusabel components for support app",
5
5
  "author": "Vikas Rathee <vrathee@redhat.com>",
6
6
  "license": "ISC",
@@ -55,7 +55,7 @@
55
55
  "copy:img:cjs": "../../node_modules/.bin/copyfiles -V -u 1 -a 'src/**/*.png' 'src/**/*.jpg' 'src/**/*.gif' lib/cjs"
56
56
  },
57
57
  "peerDependencies": {
58
- "@cee-eng/hydrajs": "4.15.84",
58
+ "@cee-eng/hydrajs": "4.15.82",
59
59
  "@cee-eng/ui-toolkit": "1.1.6",
60
60
  "@patternfly/patternfly": "4.196.7",
61
61
  "@patternfly/react-core": "4.264.0",
@@ -74,14 +74,14 @@
74
74
  "use-deep-compare-effect": "^1.6.1"
75
75
  },
76
76
  "dependencies": {
77
- "@cee-eng/hydrajs": "4.15.84",
77
+ "@cee-eng/hydrajs": "4.15.82",
78
78
  "@cee-eng/ui-toolkit": "1.1.6",
79
79
  "@patternfly/patternfly": "4.196.7",
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.0.11-beta.0",
84
- "@rh-support/utils": "2.0.11-beta.0",
83
+ "@rh-support/user-permissions": "2.0.11",
84
+ "@rh-support/utils": "2.0.11",
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": "d2f8df79dfae0ffc697fcf847d85ec6f2f892403"
120
+ "gitHead": "85c2e3c4430046b6e7e7b5efbee6ed47d7941feb"
121
121
  }