@etsoo/materialui 1.1.61 → 1.1.63

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 (4) hide show
  1. package/lib/SearchBar.d.ts +4 -0
  2. package/lib/SearchBar.js +7 -4
  3. package/package.json +1 -1
  4. package/src/SearchBar.tsx +11 -4
package/lib/SearchBar.d.ts CHANGED
@@ -7,6 +7,10 @@ export interface SearchBarProps {
7
7
  * Style class name
8
8
  */
9
9
  className?: string;
10
+ /**
11
+ * Item max width
12
+ */
13
+ itemMaxWidth?: number;
10
14
  /**
11
15
  * Fields
12
16
  */
package/lib/SearchBar.js CHANGED
@@ -52,7 +52,7 @@ const setChildState = (child, enabled) => {
52
52
  */
53
53
  export function SearchBar(props) {
54
54
  // Destruct
55
- const { className, fields, onSubmit } = props;
55
+ const { className, fields, onSubmit, itemMaxWidth = 160 } = props;
56
56
  // Labels
57
57
  const labels = Labels.CommonPage;
58
58
  // Spacing
@@ -223,18 +223,21 @@ export function SearchBar(props) {
223
223
  if (form)
224
224
  state.form = form;
225
225
  } },
226
- React.createElement(Stack, { ref: dimensions[0][0], justifyContent: "center", alignItems: "center", direction: "row", spacing: 1, width: "100%", overflow: "hidden", sx: {
226
+ React.createElement(Stack, { ref: dimensions[0][0], justifyContent: "center", alignItems: "center", direction: "row", spacing: 1, width: "100%", sx: {
227
+ overflowX: "hidden",
227
228
  "& > :not(style)": {
228
229
  flexBasis: "auto",
229
230
  flexGrow: 0,
230
231
  flexShrink: 0,
231
- maxWidth: "180px"
232
+ maxWidth: `${itemMaxWidth}px`,
233
+ visibility: "hidden"
232
234
  },
233
235
  "& > .hiddenChild": {
234
236
  display: "none"
235
237
  },
236
238
  "& > .showChild": {
237
- display: "block"
239
+ display: "block",
240
+ visibility: "visible"
238
241
  }
239
242
  } },
240
243
  fields.map((item, index) => (React.createElement(React.Fragment, { key: index }, item))),
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@etsoo/materialui",
3
- "version": "1.1.61",
3
+ "version": "1.1.63",
4
4
  "description": "TypeScript Material-UI Implementation",
5
5
  "main": "lib/index.js",
6
6
  "types": "lib/index.d.ts",
package/src/SearchBar.tsx CHANGED
@@ -14,6 +14,11 @@ export interface SearchBarProps {
14
14
  */
15
15
  className?: string;
16
16
 
17
+ /**
18
+ * Item max width
19
+ */
20
+ itemMaxWidth?: number;
21
+
17
22
  /**
18
23
  * Fields
19
24
  */
@@ -77,7 +82,7 @@ const setChildState = (child: Element, enabled: boolean) => {
77
82
  */
78
83
  export function SearchBar(props: SearchBarProps) {
79
84
  // Destruct
80
- const { className, fields, onSubmit } = props;
85
+ const { className, fields, onSubmit, itemMaxWidth = 160 } = props;
81
86
 
82
87
  // Labels
83
88
  const labels = Labels.CommonPage;
@@ -306,19 +311,21 @@ export function SearchBar(props: SearchBarProps) {
306
311
  direction="row"
307
312
  spacing={1}
308
313
  width="100%"
309
- overflow="hidden"
310
314
  sx={{
315
+ overflowX: "hidden",
311
316
  "& > :not(style)": {
312
317
  flexBasis: "auto",
313
318
  flexGrow: 0,
314
319
  flexShrink: 0,
315
- maxWidth: "180px"
320
+ maxWidth: `${itemMaxWidth}px`,
321
+ visibility: "hidden"
316
322
  },
317
323
  "& > .hiddenChild": {
318
324
  display: "none"
319
325
  },
320
326
  "& > .showChild": {
321
- display: "block"
327
+ display: "block",
328
+ visibility: "visible"
322
329
  }
323
330
  }}
324
331
  >