@tecsinapse/react-native-kit 1.18.2 → 1.18.5

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 (6) hide show
  1. package/CHANGELOG.md +27 -0
  2. package/dist/components/molecules/Select/Select.d.ts +2 -1
  3. package/dist/components/molecules/Select/Select.js +2 -0
  4. package/dist/components/molecules/Select/Select.js.map +1 -1
  5. package/package.json +3 -3
  6. package/src/components/molecules/Select/Select.tsx +17 -9
package/CHANGELOG.md CHANGED
@@ -3,6 +3,33 @@
3
3
  All notable changes to this project will be documented in this file.
4
4
  See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
5
5
 
6
+ ## [1.18.5](https://github.com/tecsinapse/design-system/compare/@tecsinapse/react-native-kit@1.18.4...@tecsinapse/react-native-kit@1.18.5) (2022-08-18)
7
+
8
+ **Note:** Version bump only for package @tecsinapse/react-native-kit
9
+
10
+
11
+
12
+
13
+
14
+ ## [1.18.4](https://github.com/tecsinapse/design-system/compare/@tecsinapse/react-native-kit@1.18.3...@tecsinapse/react-native-kit@1.18.4) (2022-08-12)
15
+
16
+
17
+ ### Bug Fixes
18
+
19
+ * add numberOfLines into react-native-kit Select component as an optional prop ([a9b7b85](https://github.com/tecsinapse/design-system/commit/a9b7b8575a60f73020b394f8afb03901fe62efb1))
20
+
21
+
22
+
23
+
24
+
25
+ ## [1.18.3](https://github.com/tecsinapse/design-system/compare/@tecsinapse/react-native-kit@1.18.2...@tecsinapse/react-native-kit@1.18.3) (2022-08-03)
26
+
27
+ **Note:** Version bump only for package @tecsinapse/react-native-kit
28
+
29
+
30
+
31
+
32
+
6
33
  ## [1.18.2](https://github.com/tecsinapse/design-system/compare/@tecsinapse/react-native-kit@1.18.1...@tecsinapse/react-native-kit@1.18.2) (2022-08-02)
7
34
 
8
35
  **Note:** Version bump only for package @tecsinapse/react-native-kit
package/dist/components/molecules/Select/Select.d.ts CHANGED
@@ -18,6 +18,7 @@ export interface SelectNativeProps<Data, Type extends 'single' | 'multi'> extend
18
18
  selectModalTitleComponent?: JSX.Element;
19
19
  closeOnPick?: boolean;
20
20
  controlComponent?: (onPress: () => void, displayValue?: string) => JSX.Element;
21
+ numberOfLines?: number;
21
22
  }
22
- declare function Select<Data, Type extends 'single' | 'multi'>({ value, options, keyExtractor, groupKeyExtractor, onSelect, type, labelExtractor, placeholder, onFocus, onBlur, disabled, onSearch, selectModalTitle, selectModalTitleComponent, searchBarPlaceholder, hideSearchBar, confirmButtonText, rightComponent, variant, hintComponent, hint, style, controlComponent, closeOnPick, label, ...rest }: SelectNativeProps<Data, Type>): JSX.Element;
23
+ declare function Select<Data, Type extends 'single' | 'multi'>({ value, options, keyExtractor, groupKeyExtractor, onSelect, type, labelExtractor, placeholder, onFocus, onBlur, disabled, onSearch, selectModalTitle, selectModalTitleComponent, searchBarPlaceholder, hideSearchBar, confirmButtonText, rightComponent, variant, hintComponent, hint, style, controlComponent, closeOnPick, label, numberOfLines, ...rest }: SelectNativeProps<Data, Type>): JSX.Element;
23
24
  export default Select;
package/dist/components/molecules/Select/Select.js CHANGED
@@ -47,6 +47,7 @@ function Select({
47
47
  controlComponent,
48
48
  closeOnPick = type === 'single',
49
49
  label,
50
+ numberOfLines,
50
51
  ...rest
51
52
  }) {
52
53
  const {
@@ -167,6 +168,7 @@ function Select({
167
168
  size: "centi"
168
169
  }), rightComponent)
169
170
  }, rest), React.createElement(_styled.StyledSelectionText, {
171
+ numberOfLines: numberOfLines,
170
172
  fontWeight: "bold",
171
173
  disabled: disabled
172
174
  }, getDisplayValue() || ' ')));
package/dist/components/molecules/Select/Select.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["../../../../src/components/molecules/Select/Select.tsx"],"names":["Select","value","options","keyExtractor","groupKeyExtractor","onSelect","type","labelExtractor","placeholder","onFocus","onBlur","disabled","onSearch","selectModalTitle","selectModalTitleComponent","searchBarPlaceholder","hideSearchBar","confirmButtonText","rightComponent","variant","hintComponent","hint","style","controlComponent","closeOnPick","label","rest","focused","handleBlur","handleFocus","selectOptions","setSelectOptions","modal","loading","setLoading","onlyLabel","hasValue","length","_placeholder","_label","undefined","handleLazyFocus","React","useCallback","result","find","v","e","handleOnSearch","searchInput","selectedValues","filter","current","requestUpdate","getDisplayValue","Array","isArray","reduce","acc","option","index","key","slice","selectedOption","sync","handlePressInput","show","Text"],"mappings":"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","sourcesContent":["import {\n HintInputContainer,\n InputContainerProps,\n useInputFocus\n} from '@tecsinapse/react-core';\nimport * as React from 'react';\nimport { useEffect, useState } from 'react';\nimport { useLazyModalManager } from '../../atoms/Modal';\nimport { Text } from '../../atoms/Text';\nimport { Modal } from './Modal';\nimport { SelectIcon, StyledSelectionText } from './styled';\n\nexport interface SelectNativeProps<Data, Type extends 'single' | 'multi'>\n extends Omit<InputContainerProps, 'value' | 'onChange' | 'onChangeText'> {\n options: ((searchInput?: string) => Promise<Data[]>) | Data[];\n onSelect: (\n option: Type extends 'single' ? Data | undefined : Data[]\n ) => never | void;\n value: Type extends 'single' ? Data | null | undefined : Data[];\n type: Type;\n\n keyExtractor: (t: Data, index?: number) => string;\n labelExtractor: (t: Data) => string;\n groupKeyExtractor?: (t: Data) => string;\n\n hideSearchBar?: boolean;\n placeholder?: string;\n onFocus?: () => void | never;\n onBlur?: () => void | never;\n onSearch?:\n | ((searchArg: string) => void)\n | ((searchInput?: string) => Promise<Data[]>)\n | never;\n searchBarPlaceholder?: string;\n confirmButtonText?: string;\n selectModalTitle?: string;\n selectModalTitleComponent?: JSX.Element;\n closeOnPick?: boolean;\n controlComponent?: (\n onPress: () => void,\n displayValue?: string\n ) => JSX.Element;\n}\n\nfunction Select<Data, Type extends 'single' | 'multi'>({\n /** Select props */\n value,\n options,\n keyExtractor,\n groupKeyExtractor,\n onSelect,\n type,\n labelExtractor,\n placeholder,\n onFocus,\n onBlur,\n disabled,\n onSearch,\n selectModalTitle,\n selectModalTitleComponent,\n searchBarPlaceholder,\n hideSearchBar,\n confirmButtonText,\n rightComponent,\n variant = 'default',\n hintComponent,\n hint,\n style,\n controlComponent,\n closeOnPick = type === 'single',\n label,\n ...rest\n}: SelectNativeProps<Data, Type>): JSX.Element {\n const { focused, handleBlur, handleFocus } = useInputFocus(\n onFocus,\n onBlur,\n !disabled\n );\n\n const [selectOptions, setSelectOptions] = useState<Data[]>([]);\n const modal = useLazyModalManager();\n\n // TODO: Add Skeleton to modal height when loading is true\n const [loading, setLoading] = useState<boolean>(false);\n \n const onlyLabel = label && !placeholder;\n const hasValue = type === 'single' ? !!value : ((value || []) as []).length > 0\n const _placeholder = onlyLabel ? label : placeholder\n const _label = hasValue ? label : undefined\n\n useEffect(() => {\n if (typeof options !== 'function') {\n setSelectOptions(options);\n }\n }, [options]);\n\n const handleLazyFocus = React.useCallback(async () => {\n if (typeof options === 'function') {\n setLoading(true);\n try {\n const result = await options();\n if (result) {\n if (\n value &&\n !result.find(v => keyExtractor(value as Data) === keyExtractor(v))\n ) {\n setSelectOptions([value as Data, ...result]);\n } else setSelectOptions(result);\n }\n } catch (e) {\n // TODO: Catch error\n } finally {\n setLoading(false);\n }\n }\n }, [options, value, setSelectOptions])\n\n const handleOnSearch = React.useCallback(\n async (searchInput: string | undefined) => {\n if (searchInput !== undefined && onSearch) {\n setLoading(true);\n try {\n const result = await onSearch(searchInput);\n if (result) {\n if (type === 'single') {\n if (\n value &&\n !result.find(\n v => keyExtractor(value as Data) === keyExtractor(v)\n )\n ) {\n setSelectOptions([value as Data, ...result]);\n } else setSelectOptions(result);\n } else {\n if ((value as Data[]).length > 0) {\n const selectedValues =\n (value as Data[]).filter(\n v =>\n !result.find(\n current =>\n keyExtractor(v as Data) === keyExtractor(current)\n )\n ) || [];\n setSelectOptions([...selectedValues, ...result]);\n } else {\n setSelectOptions(result);\n }\n }\n }\n } catch (e) {\n // TODO: Catch error\n } finally {\n modal.requestUpdate();\n setLoading(false);\n }\n }\n },\n [options, value, keyExtractor]\n );\n\n const getDisplayValue = React.useCallback(() => {\n if (Array.isArray(value)) {\n if (value.length === 0) return _placeholder;\n else {\n let options = selectOptions.length > 0 ? selectOptions : value as Data[]\n return options\n ?.reduce(\n (acc, option, index) =>\n value.find(\n key => keyExtractor(option, index) == keyExtractor(key, index)\n )\n ? acc + labelExtractor(option) + ', '\n : acc,\n ''\n )\n .slice(0, -2);\n }\n } else {\n if (value === undefined) return _placeholder;\n const selectedOption = selectOptions?.find(\n (option, index) =>\n keyExtractor(option, index) == keyExtractor(value as Data, index)\n );\n return labelExtractor(selectedOption ?? value as Data)\n }\n }, [_placeholder, value, selectOptions]);\n\n modal.sync(\n <Modal\n options={selectOptions || []}\n focused={true}\n keyExtractor={keyExtractor}\n labelExtractor={labelExtractor}\n groupKeyExtractor={groupKeyExtractor}\n searchBarPlaceholder={searchBarPlaceholder}\n type={type}\n onSelect={onSelect}\n value={value}\n hideSearchBar={hideSearchBar}\n onSearch={handleOnSearch}\n selectModalTitle={selectModalTitle}\n selectModalTitleComponent={selectModalTitleComponent}\n confirmButtonText={confirmButtonText}\n loading={loading}\n onClose={handleBlur}\n closeOnPick={closeOnPick}\n />\n );\n\n const handlePressInput = async () => {\n modal.show();\n handleFocus();\n await handleLazyFocus();\n };\n\n return (\n <>\n {controlComponent ? (\n controlComponent(handlePressInput, getDisplayValue() || '')\n ) : (\n <HintInputContainer\n viewStyle={style}\n onPress={handlePressInput}\n focused={focused}\n disabled={disabled}\n LabelComponent={Text}\n variant={variant}\n hint={hint}\n hintComponent={hintComponent}\n label={_label}\n rightComponent={\n <>\n <SelectIcon name=\"chevron-down\" type=\"ionicon\" size=\"centi\" />\n {rightComponent}\n </>\n }\n {...rest}\n >\n <StyledSelectionText fontWeight=\"bold\" disabled={disabled}>\n {getDisplayValue() || ' '}\n </StyledSelectionText>\n </HintInputContainer>\n )}\n </>\n );\n}\n\nexport default Select;\n"],"file":"Select.js"}
1
+ {"version":3,"sources":["../../../../src/components/molecules/Select/Select.tsx"],"names":["Select","value","options","keyExtractor","groupKeyExtractor","onSelect","type","labelExtractor","placeholder","onFocus","onBlur","disabled","onSearch","selectModalTitle","selectModalTitleComponent","searchBarPlaceholder","hideSearchBar","confirmButtonText","rightComponent","variant","hintComponent","hint","style","controlComponent","closeOnPick","label","numberOfLines","rest","focused","handleBlur","handleFocus","selectOptions","setSelectOptions","modal","loading","setLoading","onlyLabel","hasValue","length","_placeholder","_label","undefined","handleLazyFocus","React","useCallback","result","find","v","e","handleOnSearch","searchInput","selectedValues","filter","current","requestUpdate","getDisplayValue","Array","isArray","reduce","acc","option","index","key","slice","selectedOption","sync","handlePressInput","show","Text"],"mappings":"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","sourcesContent":["import {\n HintInputContainer,\n InputContainerProps,\n useInputFocus,\n} from '@tecsinapse/react-core';\nimport * as React from 'react';\nimport { useEffect, useState } from 'react';\nimport { useLazyModalManager } from '../../atoms/Modal';\nimport { Text } from '../../atoms/Text';\nimport { Modal } from './Modal';\nimport { SelectIcon, StyledSelectionText } from './styled';\n\nexport interface SelectNativeProps<Data, Type extends 'single' | 'multi'>\n extends Omit<InputContainerProps, 'value' | 'onChange' | 'onChangeText'> {\n options: ((searchInput?: string) => Promise<Data[]>) | Data[];\n onSelect: (\n option: Type extends 'single' ? Data | undefined : Data[]\n ) => never | void;\n value: Type extends 'single' ? Data | null | undefined : Data[];\n type: Type;\n\n keyExtractor: (t: Data, index?: number) => string;\n labelExtractor: (t: Data) => string;\n groupKeyExtractor?: (t: Data) => string;\n\n hideSearchBar?: boolean;\n placeholder?: string;\n onFocus?: () => void | never;\n onBlur?: () => void | never;\n onSearch?:\n | ((searchArg: string) => void)\n | ((searchInput?: string) => Promise<Data[]>)\n | never;\n searchBarPlaceholder?: string;\n confirmButtonText?: string;\n selectModalTitle?: string;\n selectModalTitleComponent?: JSX.Element;\n closeOnPick?: boolean;\n controlComponent?: (\n onPress: () => void,\n displayValue?: string\n ) => JSX.Element;\n numberOfLines?: number;\n}\n\nfunction Select<Data, Type extends 'single' | 'multi'>({\n /** Select props */\n value,\n options,\n keyExtractor,\n groupKeyExtractor,\n onSelect,\n type,\n labelExtractor,\n placeholder,\n onFocus,\n onBlur,\n disabled,\n onSearch,\n selectModalTitle,\n selectModalTitleComponent,\n searchBarPlaceholder,\n hideSearchBar,\n confirmButtonText,\n rightComponent,\n variant = 'default',\n hintComponent,\n hint,\n style,\n controlComponent,\n closeOnPick = type === 'single',\n label,\n numberOfLines,\n ...rest\n}: SelectNativeProps<Data, Type>): JSX.Element {\n const { focused, handleBlur, handleFocus } = useInputFocus(\n onFocus,\n onBlur,\n !disabled\n );\n\n const [selectOptions, setSelectOptions] = useState<Data[]>([]);\n const modal = useLazyModalManager();\n\n // TODO: Add Skeleton to modal height when loading is true\n const [loading, setLoading] = useState<boolean>(false);\n\n const onlyLabel = label && !placeholder;\n const hasValue =\n type === 'single' ? !!value : ((value || []) as []).length > 0;\n const _placeholder = onlyLabel ? label : placeholder;\n const _label = hasValue ? label : undefined;\n\n useEffect(() => {\n if (typeof options !== 'function') {\n setSelectOptions(options);\n }\n }, [options]);\n\n const handleLazyFocus = React.useCallback(async () => {\n if (typeof options === 'function') {\n setLoading(true);\n try {\n const result = await options();\n if (result) {\n if (\n value &&\n !result.find(v => keyExtractor(value as Data) === keyExtractor(v))\n ) {\n setSelectOptions([value as Data, ...result]);\n } else setSelectOptions(result);\n }\n } catch (e) {\n // TODO: Catch error\n } finally {\n setLoading(false);\n }\n }\n }, [options, value, setSelectOptions]);\n\n const handleOnSearch = React.useCallback(\n async (searchInput: string | undefined) => {\n if (searchInput !== undefined && onSearch) {\n setLoading(true);\n try {\n const result = await onSearch(searchInput);\n if (result) {\n if (type === 'single') {\n if (\n value &&\n !result.find(\n v => keyExtractor(value as Data) === keyExtractor(v)\n )\n ) {\n setSelectOptions([value as Data, ...result]);\n } else setSelectOptions(result);\n } else {\n if ((value as Data[]).length > 0) {\n const selectedValues =\n (value as Data[]).filter(\n v =>\n !result.find(\n current =>\n keyExtractor(v as Data) === keyExtractor(current)\n )\n ) || [];\n setSelectOptions([...selectedValues, ...result]);\n } else {\n setSelectOptions(result);\n }\n }\n }\n } catch (e) {\n // TODO: Catch error\n } finally {\n modal.requestUpdate();\n setLoading(false);\n }\n }\n },\n [options, value, keyExtractor]\n );\n\n const getDisplayValue = React.useCallback(() => {\n if (Array.isArray(value)) {\n if (value.length === 0) return _placeholder;\n else {\n let options =\n selectOptions.length > 0 ? selectOptions : (value as Data[]);\n return options\n ?.reduce(\n (acc, option, index) =>\n value.find(\n key => keyExtractor(option, index) == keyExtractor(key, index)\n )\n ? acc + labelExtractor(option) + ', '\n : acc,\n ''\n )\n .slice(0, -2);\n }\n } else {\n if (value === undefined) return _placeholder;\n const selectedOption = selectOptions?.find(\n (option, index) =>\n keyExtractor(option, index) == keyExtractor(value as Data, index)\n );\n return labelExtractor(selectedOption ?? (value as Data));\n }\n }, [_placeholder, value, selectOptions]);\n\n modal.sync(\n <Modal\n options={selectOptions || []}\n focused={true}\n keyExtractor={keyExtractor}\n labelExtractor={labelExtractor}\n groupKeyExtractor={groupKeyExtractor}\n searchBarPlaceholder={searchBarPlaceholder}\n type={type}\n onSelect={onSelect}\n value={value}\n hideSearchBar={hideSearchBar}\n onSearch={handleOnSearch}\n selectModalTitle={selectModalTitle}\n selectModalTitleComponent={selectModalTitleComponent}\n confirmButtonText={confirmButtonText}\n loading={loading}\n onClose={handleBlur}\n closeOnPick={closeOnPick}\n />\n );\n\n const handlePressInput = async () => {\n modal.show();\n handleFocus();\n await handleLazyFocus();\n };\n\n return (\n <>\n {controlComponent ? (\n controlComponent(handlePressInput, getDisplayValue() || '')\n ) : (\n <HintInputContainer\n viewStyle={style}\n onPress={handlePressInput}\n focused={focused}\n disabled={disabled}\n LabelComponent={Text}\n variant={variant}\n hint={hint}\n hintComponent={hintComponent}\n label={_label}\n rightComponent={\n <>\n <SelectIcon name=\"chevron-down\" type=\"ionicon\" size=\"centi\" />\n {rightComponent}\n </>\n }\n {...rest}\n >\n <StyledSelectionText\n numberOfLines={numberOfLines}\n fontWeight=\"bold\"\n disabled={disabled}\n >\n {getDisplayValue() || ' '}\n </StyledSelectionText>\n </HintInputContainer>\n )}\n </>\n );\n}\n\nexport default Select;\n"],"file":"Select.js"}
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@tecsinapse/react-native-kit",
3
3
  "description": "TecSinapse React Native components",
4
- "version": "1.18.2",
4
+ "version": "1.18.5",
5
5
  "main": "dist/index.js",
6
6
  "types": "dist/index.d.ts",
7
7
  "license": "MIT",
@@ -16,7 +16,7 @@
16
16
  "dependencies": {
17
17
  "@emotion/native": "^11.0.0",
18
18
  "@emotion/react": "^11.4.1",
19
- "@tecsinapse/react-core": "^1.17.2",
19
+ "@tecsinapse/react-core": "^1.17.4",
20
20
  "react-native-linear-gradient": "^2.5.6"
21
21
  },
22
22
  "repository": {
@@ -39,5 +39,5 @@
39
39
  "devDependencies": {
40
40
  "@types/uuid": "^8.3.3"
41
41
  },
42
- "gitHead": "077c192810529eb555031e7e35ef90477f8f830d"
42
+ "gitHead": "03c2dd15a8e489f803bcb0aab01ec83a3cd7f277"
43
43
  }
package/src/components/molecules/Select/Select.tsx CHANGED
@@ -1,7 +1,7 @@
1
1
  import {
2
2
  HintInputContainer,
3
3
  InputContainerProps,
4
- useInputFocus
4
+ useInputFocus,
5
5
  } from '@tecsinapse/react-core';
6
6
  import * as React from 'react';
7
7
  import { useEffect, useState } from 'react';
@@ -40,6 +40,7 @@ export interface SelectNativeProps<Data, Type extends 'single' | 'multi'>
40
40
  onPress: () => void,
41
41
  displayValue?: string
42
42
  ) => JSX.Element;
43
+ numberOfLines?: number;
43
44
  }
44
45
 
45
46
  function Select<Data, Type extends 'single' | 'multi'>({
@@ -69,6 +70,7 @@ function Select<Data, Type extends 'single' | 'multi'>({
69
70
  controlComponent,
70
71
  closeOnPick = type === 'single',
71
72
  label,
73
+ numberOfLines,
72
74
  ...rest
73
75
  }: SelectNativeProps<Data, Type>): JSX.Element {
74
76
  const { focused, handleBlur, handleFocus } = useInputFocus(
@@ -82,11 +84,12 @@ function Select<Data, Type extends 'single' | 'multi'>({
82
84
 
83
85
  // TODO: Add Skeleton to modal height when loading is true
84
86
  const [loading, setLoading] = useState<boolean>(false);
85
-
87
+
86
88
  const onlyLabel = label && !placeholder;
87
- const hasValue = type === 'single' ? !!value : ((value || []) as []).length > 0
88
- const _placeholder = onlyLabel ? label : placeholder
89
- const _label = hasValue ? label : undefined
89
+ const hasValue =
90
+ type === 'single' ? !!value : ((value || []) as []).length > 0;
91
+ const _placeholder = onlyLabel ? label : placeholder;
92
+ const _label = hasValue ? label : undefined;
90
93
 
91
94
  useEffect(() => {
92
95
  if (typeof options !== 'function') {
@@ -113,7 +116,7 @@ function Select<Data, Type extends 'single' | 'multi'>({
113
116
  setLoading(false);
114
117
  }
115
118
  }
116
- }, [options, value, setSelectOptions])
119
+ }, [options, value, setSelectOptions]);
117
120
 
118
121
  const handleOnSearch = React.useCallback(
119
122
  async (searchInput: string | undefined) => {
@@ -162,7 +165,8 @@ function Select<Data, Type extends 'single' | 'multi'>({
162
165
  if (Array.isArray(value)) {
163
166
  if (value.length === 0) return _placeholder;
164
167
  else {
165
- let options = selectOptions.length > 0 ? selectOptions : value as Data[]
168
+ let options =
169
+ selectOptions.length > 0 ? selectOptions : (value as Data[]);
166
170
  return options
167
171
  ?.reduce(
168
172
  (acc, option, index) =>
@@ -181,7 +185,7 @@ function Select<Data, Type extends 'single' | 'multi'>({
181
185
  (option, index) =>
182
186
  keyExtractor(option, index) == keyExtractor(value as Data, index)
183
187
  );
184
- return labelExtractor(selectedOption ?? value as Data)
188
+ return labelExtractor(selectedOption ?? (value as Data));
185
189
  }
186
190
  }, [_placeholder, value, selectOptions]);
187
191
 
@@ -236,7 +240,11 @@ function Select<Data, Type extends 'single' | 'multi'>({
236
240
  }
237
241
  {...rest}
238
242
  >
239
- <StyledSelectionText fontWeight="bold" disabled={disabled}>
243
+ <StyledSelectionText
244
+ numberOfLines={numberOfLines}
245
+ fontWeight="bold"
246
+ disabled={disabled}
247
+ >
240
248
  {getDisplayValue() || ' '}
241
249
  </StyledSelectionText>
242
250
  </HintInputContainer>