@zohodesk/components 1.4.9 → 1.4.10-exp-0
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.
- package/.cli/propValidation_report.html +1 -1
- package/README.md +16 -0
- package/es/MultiSelect/MultiSelect.js +10 -0
- package/es/MultiSelect/Suggestions.js +169 -100
- package/es/MultiSelect/props/defaultProps.js +2 -0
- package/es/MultiSelect/props/propTypes.js +3 -0
- package/es/Select/Select.js +13 -3
- package/es/Select/SelectWithIcon.js +1 -1
- package/es/Select/__tests__/Select.spec.js +16 -8
- package/es/Select/__tests__/__snapshots__/Select.spec.js.snap +281 -0
- package/es/Select/props/defaultProps.js +1 -0
- package/es/Select/props/propTypes.js +1 -0
- package/es/utils/Common.js +3 -2
- package/es/utils/dropDownUtils.js +3 -1
- package/lib/MultiSelect/MultiSelect.js +11 -0
- package/lib/MultiSelect/Suggestions.js +172 -104
- package/lib/MultiSelect/props/defaultProps.js +2 -0
- package/lib/MultiSelect/props/propTypes.js +3 -0
- package/lib/Select/Select.js +13 -2
- package/lib/Select/SelectWithIcon.js +1 -1
- package/lib/Select/__tests__/Select.spec.js +165 -155
- package/lib/Select/__tests__/__snapshots__/Select.spec.js.snap +281 -0
- package/lib/Select/props/defaultProps.js +1 -0
- package/lib/Select/props/propTypes.js +1 -0
- package/lib/utils/Common.js +5 -3
- package/lib/utils/dropDownUtils.js +3 -1
- package/package.json +3 -3
|
@@ -1926,6 +1926,287 @@ exports[`Select - Should render the only options matching search value 1`] = `
|
|
|
1926
1926
|
</DocumentFragment>
|
|
1927
1927
|
`;
|
|
1928
1928
|
|
|
1929
|
+
exports[`Select - Should render the only options matching search value even with additional spaces before and after 1`] = `
|
|
1930
|
+
<DocumentFragment>
|
|
1931
|
+
<div
|
|
1932
|
+
class="container box_medium "
|
|
1933
|
+
data-selector-id="select"
|
|
1934
|
+
>
|
|
1935
|
+
<div
|
|
1936
|
+
class=""
|
|
1937
|
+
data-id="selectComponent"
|
|
1938
|
+
data-test-id="selectComponent"
|
|
1939
|
+
>
|
|
1940
|
+
<div
|
|
1941
|
+
class="container effect effectFocused input flex rowdir"
|
|
1942
|
+
data-id="containerComponent"
|
|
1943
|
+
data-selector-id="textBoxIcon"
|
|
1944
|
+
data-test-id="containerComponent"
|
|
1945
|
+
>
|
|
1946
|
+
<div
|
|
1947
|
+
class="grow basis shrinkOff"
|
|
1948
|
+
data-id="boxComponent"
|
|
1949
|
+
data-selector-id="box"
|
|
1950
|
+
data-test-id="boxComponent"
|
|
1951
|
+
>
|
|
1952
|
+
<input
|
|
1953
|
+
aria-activedescendant="1"
|
|
1954
|
+
aria-controls="1"
|
|
1955
|
+
aria-expanded="true"
|
|
1956
|
+
aria-haspopup="true"
|
|
1957
|
+
aria-label="click to select options"
|
|
1958
|
+
aria-owns="1"
|
|
1959
|
+
aria-readonly="true"
|
|
1960
|
+
autocomplete="off"
|
|
1961
|
+
class=" pointer container medium default effect focus borderColor_default inputDotted "
|
|
1962
|
+
data-id="selectComponent_textBox"
|
|
1963
|
+
data-selector-id="textBoxIcon"
|
|
1964
|
+
data-test-id="selectComponent_textBox"
|
|
1965
|
+
data-title="Option 1"
|
|
1966
|
+
maxlength="250"
|
|
1967
|
+
placeholder=""
|
|
1968
|
+
readonly=""
|
|
1969
|
+
role="Menuitem"
|
|
1970
|
+
type="text"
|
|
1971
|
+
value="Option 1"
|
|
1972
|
+
/>
|
|
1973
|
+
</div>
|
|
1974
|
+
<div
|
|
1975
|
+
class="iconContainer shrinkOff"
|
|
1976
|
+
data-id="boxComponent"
|
|
1977
|
+
data-selector-id="box"
|
|
1978
|
+
data-test-id="boxComponent"
|
|
1979
|
+
>
|
|
1980
|
+
<div
|
|
1981
|
+
class="flex cover rowdir"
|
|
1982
|
+
data-id="containerComponent"
|
|
1983
|
+
data-selector-id="container"
|
|
1984
|
+
data-test-id="containerComponent"
|
|
1985
|
+
>
|
|
1986
|
+
<div
|
|
1987
|
+
class="icon rotated shrinkOff"
|
|
1988
|
+
data-id="boxComponent"
|
|
1989
|
+
data-selector-id="box"
|
|
1990
|
+
data-test-id="boxComponent"
|
|
1991
|
+
>
|
|
1992
|
+
<div
|
|
1993
|
+
class="rightPlaceholder inflex rowdir both"
|
|
1994
|
+
data-id="containerComponent"
|
|
1995
|
+
data-selector-id="container"
|
|
1996
|
+
data-test-id="containerComponent"
|
|
1997
|
+
>
|
|
1998
|
+
<div
|
|
1999
|
+
aria-hidden="true"
|
|
2000
|
+
class="arrowIcon flex cover coldir both"
|
|
2001
|
+
data-id="selectComponent_downIcon"
|
|
2002
|
+
data-selector-id="container"
|
|
2003
|
+
data-test-id="selectComponent_downIcon"
|
|
2004
|
+
>
|
|
2005
|
+
<i
|
|
2006
|
+
aria-hidden="true"
|
|
2007
|
+
class="zd_font_icons basic icon-down "
|
|
2008
|
+
data-id="fontIcon"
|
|
2009
|
+
data-selector-id="fontIcon"
|
|
2010
|
+
data-test-id="fontIcon"
|
|
2011
|
+
style="--zd-iconfont-size: var(--zd_font_size7);"
|
|
2012
|
+
/>
|
|
2013
|
+
</div>
|
|
2014
|
+
</div>
|
|
2015
|
+
</div>
|
|
2016
|
+
</div>
|
|
2017
|
+
</div>
|
|
2018
|
+
<div
|
|
2019
|
+
class="line borderColor_default "
|
|
2020
|
+
/>
|
|
2021
|
+
</div>
|
|
2022
|
+
</div>
|
|
2023
|
+
<div
|
|
2024
|
+
class="main container bottomMid default"
|
|
2025
|
+
data-a11y-focus-main-area="true"
|
|
2026
|
+
data-arrow-position="mid"
|
|
2027
|
+
data-box-direction="bottom"
|
|
2028
|
+
data-id="selectComponent_suggestions"
|
|
2029
|
+
data-position="bottomMid"
|
|
2030
|
+
data-selector-id="dropBox"
|
|
2031
|
+
data-test-id="selectComponent_suggestions"
|
|
2032
|
+
dot-ui-element="dropbox"
|
|
2033
|
+
style="z-index: 4;"
|
|
2034
|
+
>
|
|
2035
|
+
<div
|
|
2036
|
+
class="subContainer shadow radius bounce defaultPalette"
|
|
2037
|
+
data-id="selectComponent_suggestions_subcontainer"
|
|
2038
|
+
data-selector-id="dropBox_subcontainer"
|
|
2039
|
+
data-test-id="selectComponent_suggestions_subcontainer"
|
|
2040
|
+
tabindex="-1"
|
|
2041
|
+
>
|
|
2042
|
+
<div
|
|
2043
|
+
class="flex rowdir"
|
|
2044
|
+
data-id="containerComponent"
|
|
2045
|
+
data-selector-id="container"
|
|
2046
|
+
data-test-id="containerComponent"
|
|
2047
|
+
>
|
|
2048
|
+
<div
|
|
2049
|
+
class="grow basis shrinkOff"
|
|
2050
|
+
data-id="boxComponent"
|
|
2051
|
+
data-selector-id="box"
|
|
2052
|
+
data-test-id="boxComponent"
|
|
2053
|
+
>
|
|
2054
|
+
<div
|
|
2055
|
+
class="flex cover coldir"
|
|
2056
|
+
data-id="containerComponent"
|
|
2057
|
+
data-selector-id="container"
|
|
2058
|
+
data-test-id="containerComponent"
|
|
2059
|
+
>
|
|
2060
|
+
<div
|
|
2061
|
+
class="notScroll shrinkOff"
|
|
2062
|
+
data-id="CardHeader"
|
|
2063
|
+
data-selector-id="cardHeader"
|
|
2064
|
+
data-test-id="CardHeader"
|
|
2065
|
+
>
|
|
2066
|
+
<div
|
|
2067
|
+
class="search medium"
|
|
2068
|
+
>
|
|
2069
|
+
<div
|
|
2070
|
+
class="container effect effectFocused flex rowdir"
|
|
2071
|
+
data-id="containerComponent"
|
|
2072
|
+
data-selector-id="textBoxIcon"
|
|
2073
|
+
data-test-id="containerComponent"
|
|
2074
|
+
>
|
|
2075
|
+
<div
|
|
2076
|
+
class="grow basis shrinkOff"
|
|
2077
|
+
data-id="boxComponent"
|
|
2078
|
+
data-selector-id="box"
|
|
2079
|
+
data-test-id="boxComponent"
|
|
2080
|
+
>
|
|
2081
|
+
<input
|
|
2082
|
+
aria-autocomplete="list"
|
|
2083
|
+
aria-controls="1"
|
|
2084
|
+
aria-describedby="2"
|
|
2085
|
+
autocomplete="off"
|
|
2086
|
+
class=" container small default effect borderColor_default "
|
|
2087
|
+
data-id="selectComponent_search"
|
|
2088
|
+
data-selector-id="textBoxIcon"
|
|
2089
|
+
data-test-id="selectComponent_search"
|
|
2090
|
+
maxlength="250"
|
|
2091
|
+
placeholder="Search"
|
|
2092
|
+
type="text"
|
|
2093
|
+
value=" 2 "
|
|
2094
|
+
/>
|
|
2095
|
+
</div>
|
|
2096
|
+
<div
|
|
2097
|
+
class="iconContainer shrinkOff"
|
|
2098
|
+
data-id="boxComponent"
|
|
2099
|
+
data-selector-id="box"
|
|
2100
|
+
data-test-id="boxComponent"
|
|
2101
|
+
>
|
|
2102
|
+
<div
|
|
2103
|
+
class="flex cover rowdir"
|
|
2104
|
+
data-id="containerComponent"
|
|
2105
|
+
data-selector-id="container"
|
|
2106
|
+
data-test-id="containerComponent"
|
|
2107
|
+
>
|
|
2108
|
+
<button
|
|
2109
|
+
class="buttonReset icon shrinkOff"
|
|
2110
|
+
data-id="selectComponent_search_ClearIcon"
|
|
2111
|
+
data-selector-id="box"
|
|
2112
|
+
data-test-id="selectComponent_search_ClearIcon"
|
|
2113
|
+
data-title="Clear"
|
|
2114
|
+
>
|
|
2115
|
+
<div
|
|
2116
|
+
aria-hidden="true"
|
|
2117
|
+
class="flex cover coldir both"
|
|
2118
|
+
data-id="containerComponent"
|
|
2119
|
+
data-selector-id="container"
|
|
2120
|
+
data-test-id="containerComponent"
|
|
2121
|
+
>
|
|
2122
|
+
<i
|
|
2123
|
+
aria-hidden="true"
|
|
2124
|
+
class="zd_font_icons basic icon-delete rtl "
|
|
2125
|
+
data-id="fontIcon"
|
|
2126
|
+
data-selector-id="fontIcon"
|
|
2127
|
+
data-test-id="fontIcon"
|
|
2128
|
+
style="--zd-iconfont-size: var(--zd_font_size14);"
|
|
2129
|
+
/>
|
|
2130
|
+
</div>
|
|
2131
|
+
</button>
|
|
2132
|
+
</div>
|
|
2133
|
+
</div>
|
|
2134
|
+
<div
|
|
2135
|
+
class="line borderColor_default "
|
|
2136
|
+
/>
|
|
2137
|
+
</div>
|
|
2138
|
+
</div>
|
|
2139
|
+
</div>
|
|
2140
|
+
<div
|
|
2141
|
+
class="small grow basis shrinkOn scrolly"
|
|
2142
|
+
data-id="CardContent"
|
|
2143
|
+
data-selector-id="cardContent"
|
|
2144
|
+
data-test-id="CardContent"
|
|
2145
|
+
>
|
|
2146
|
+
<div
|
|
2147
|
+
class="flex coldir"
|
|
2148
|
+
data-id="containerComponent"
|
|
2149
|
+
data-selector-id="container"
|
|
2150
|
+
data-test-id="containerComponent"
|
|
2151
|
+
id="1"
|
|
2152
|
+
role="listbox"
|
|
2153
|
+
tabindex="0"
|
|
2154
|
+
>
|
|
2155
|
+
<div
|
|
2156
|
+
class="listItemContainer shrinkOff"
|
|
2157
|
+
data-id="selectComponent_Options"
|
|
2158
|
+
data-selector-id="box"
|
|
2159
|
+
data-test-id="selectComponent_Options"
|
|
2160
|
+
>
|
|
2161
|
+
<li
|
|
2162
|
+
aria-label="Option 2"
|
|
2163
|
+
aria-selected="false"
|
|
2164
|
+
ariaparentrole="listbox"
|
|
2165
|
+
class="list medium default defaultHover mediumwithTick flex rowdir vCenter"
|
|
2166
|
+
data-a11y-inset-focus="true"
|
|
2167
|
+
data-a11y-list-active="true"
|
|
2168
|
+
data-id="Option 2"
|
|
2169
|
+
data-selector-id="listItem"
|
|
2170
|
+
data-test-id="Option 2"
|
|
2171
|
+
data-title="Option 2"
|
|
2172
|
+
role="option"
|
|
2173
|
+
tabindex="0"
|
|
2174
|
+
>
|
|
2175
|
+
<div
|
|
2176
|
+
class="leftBox grow basis shrinkOff"
|
|
2177
|
+
data-id="boxComponent"
|
|
2178
|
+
data-selector-id="box"
|
|
2179
|
+
data-test-id="boxComponent"
|
|
2180
|
+
>
|
|
2181
|
+
<div
|
|
2182
|
+
class="titleBox shrinkOff"
|
|
2183
|
+
data-id="boxComponent"
|
|
2184
|
+
data-selector-id="box"
|
|
2185
|
+
data-test-id="boxComponent"
|
|
2186
|
+
>
|
|
2187
|
+
<div
|
|
2188
|
+
class="value basisAuto shrinkOn"
|
|
2189
|
+
data-id="boxComponent"
|
|
2190
|
+
data-selector-id="box"
|
|
2191
|
+
data-test-id="boxComponent"
|
|
2192
|
+
>
|
|
2193
|
+
Option 2
|
|
2194
|
+
</div>
|
|
2195
|
+
</div>
|
|
2196
|
+
</div>
|
|
2197
|
+
</li>
|
|
2198
|
+
</div>
|
|
2199
|
+
</div>
|
|
2200
|
+
</div>
|
|
2201
|
+
</div>
|
|
2202
|
+
</div>
|
|
2203
|
+
</div>
|
|
2204
|
+
</div>
|
|
2205
|
+
</div>
|
|
2206
|
+
</div>
|
|
2207
|
+
</DocumentFragment>
|
|
2208
|
+
`;
|
|
2209
|
+
|
|
1929
2210
|
exports[`Select - Should render the placeholder when there is no default value 1`] = `
|
|
1930
2211
|
<DocumentFragment>
|
|
1931
2212
|
<div
|
|
@@ -28,6 +28,7 @@ var Select_propTypes = {
|
|
|
28
28
|
defaultDropBoxPosition: _propTypes["default"].string,
|
|
29
29
|
dropBoxSize: _propTypes["default"].oneOf(['small', 'medium', 'large']),
|
|
30
30
|
emptyMessage: _propTypes["default"].string,
|
|
31
|
+
isVirtualizerEnabled: _propTypes["default"].bool,
|
|
31
32
|
excludeOptions: _propTypes["default"].array,
|
|
32
33
|
getChildren: _propTypes["default"].func,
|
|
33
34
|
getContainerRef: _propTypes["default"].func,
|
package/lib/utils/Common.js
CHANGED
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
Object.defineProperty(exports, "__esModule", {
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
|
-
exports.DUMMY_OBJECT = void 0;
|
|
6
|
+
exports.DUMMY_OBJECT = exports.DUMMY_ARRAY = void 0;
|
|
7
7
|
exports.bind = bind;
|
|
8
8
|
exports.bytesToSize = bytesToSize;
|
|
9
9
|
exports.cancelBubblingEffect = cancelBubblingEffect;
|
|
@@ -475,7 +475,7 @@ function getElementSpace(elementRef) {
|
|
|
475
475
|
|
|
476
476
|
function getSearchString() {
|
|
477
477
|
var charachers = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
|
|
478
|
-
return (charachers || '').toString().toLowerCase(); //.replace(/\s+/g, '');
|
|
478
|
+
return (charachers || '').toString().toLowerCase().trim(); //.replace(/\s+/g, '');
|
|
479
479
|
}
|
|
480
480
|
|
|
481
481
|
function findScrollEnd(element) {
|
|
@@ -516,4 +516,6 @@ function isTextSelected() {
|
|
|
516
516
|
}
|
|
517
517
|
|
|
518
518
|
var DUMMY_OBJECT = {};
|
|
519
|
-
exports.DUMMY_OBJECT = DUMMY_OBJECT;
|
|
519
|
+
exports.DUMMY_OBJECT = DUMMY_OBJECT;
|
|
520
|
+
var DUMMY_ARRAY = [];
|
|
521
|
+
exports.DUMMY_ARRAY = DUMMY_ARRAY;
|
|
@@ -152,8 +152,10 @@ var getListItemProps = function getListItemProps(props) {
|
|
|
152
152
|
return props.listItemProps || '';
|
|
153
153
|
};
|
|
154
154
|
|
|
155
|
+
var defaultSearchFields = ['value'];
|
|
156
|
+
|
|
155
157
|
var getSearchFields = function getSearchFields(props) {
|
|
156
|
-
return props.searchFields ||
|
|
158
|
+
return props.searchFields || defaultSearchFields;
|
|
157
159
|
}; // const isObjectContainsSearchString = (searchFields = [], searchStr = '', obj) => {
|
|
158
160
|
// const matchedFields = searchFields.filter(element => {
|
|
159
161
|
// return getSearchString(obj[element]).indexOf(searchStr) !== -1
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@zohodesk/components",
|
|
3
|
-
"version": "1.4.
|
|
3
|
+
"version": "1.4.10-exp-0",
|
|
4
4
|
"main": "es/index.js",
|
|
5
5
|
"module": "es/index.js",
|
|
6
6
|
"private": false,
|
|
@@ -39,7 +39,7 @@
|
|
|
39
39
|
"build:css:umd": "npm run clean && npm run init && react-cli build:css:umd",
|
|
40
40
|
"coverage": "react-cli coverage",
|
|
41
41
|
"prepare": "npm run init && npm run css:build ",
|
|
42
|
-
"prepublishOnly": "node prePublish.js && npm run test-clean && npm run
|
|
42
|
+
"prepublishOnly": "node prePublish.js && npm run test-clean && npm run download && npm run css:review && npm run review:props ",
|
|
43
43
|
"postpublish": "node postPublish.js",
|
|
44
44
|
"report": "react-cli publish:report",
|
|
45
45
|
"test": "react-cli test",
|
|
@@ -48,7 +48,7 @@
|
|
|
48
48
|
"snap-update": "npm run test-clean && npm run test -- -u",
|
|
49
49
|
"sstest": "npm run init && react-cli sstest",
|
|
50
50
|
"build:external": "npm run clean && npm run init && npm run docsjs:build && npm run build:externalDocCopy && react-cli build:component:umd && npm run externalDocHTMLChange",
|
|
51
|
-
"download": "react-cli clean ./node_modules ./package-lock.json && npm install
|
|
51
|
+
"download": "react-cli clean ./node_modules ./package-lock.json && npm install ",
|
|
52
52
|
"expublish": "npm publish --tag experimental-version",
|
|
53
53
|
"css:lineheight:validate": "node ./node_modules/@zohodesk-private/node-plugins/es/lineheight_automation/lineHeightErrorCheck.js ./src/",
|
|
54
54
|
"cssVariableConvert": "react-cli variableConverter ./lib ./lib && react-cli variableConverter ./es ./es",
|