@symply.io/basic-components 1.0.0-beta.10 → 1.0.0-beta.12

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 (14) hide show
  1. package/Autocomplete/index.d.ts +1 -1
  2. package/Autocomplete/index.js +4 -3
  3. package/Autocomplete/types.d.ts +5 -4
  4. package/AutocompleteWithFilter/index.d.ts +1 -1
  5. package/AutocompleteWithFilter/index.js +3 -3
  6. package/AutocompleteWithFilter/types.d.ts +5 -4
  7. package/BasicTable/TableBodyRow.js +3 -2
  8. package/BasicTable/TableFooter.js +3 -2
  9. package/BasicTable/TableHeader.js +3 -2
  10. package/BasicTable/types.d.ts +1 -0
  11. package/BasicTable/useTable.d.ts +3 -0
  12. package/FormRadioGroup/index.js +1 -1
  13. package/README.md +5 -4
  14. package/package.json +1 -1
package/Autocomplete/index.d.ts CHANGED
@@ -1,4 +1,4 @@
1
1
  import { AutocompleteProps } from "./types";
2
- declare function CustomAutocomplete<T, multiple extends boolean | undefined>(props: AutocompleteProps<T, multiple>): JSX.Element;
2
+ declare function CustomAutocomplete<T, multiple extends boolean | undefined = false>(props: AutocompleteProps<T, multiple>): JSX.Element;
3
3
  export default CustomAutocomplete;
4
4
  export * from "./types";
package/Autocomplete/index.js CHANGED
@@ -30,9 +30,10 @@ function CustomAutocomplete(props) {
30
30
  var size = props.size, value = props.value, options = props.options, multiple = props.multiple, primaryColor = props.primaryColor, secondaryColor = props.secondaryColor, onChange = props.onChange, rest = __rest(props, ["size", "value", "options", "multiple", "primaryColor", "secondaryColor", "onChange"]);
31
31
  var theme = useCustomTheme({ primaryColor: primaryColor, secondaryColor: secondaryColor });
32
32
  var _a = useInteractions(), inputValue = _a.inputValue, onInputChange = _a.onInputChange;
33
- return (_jsx(ThemeProvider, __assign({ theme: theme }, { children: _jsx(Autocomplete, { size: size, fullWidth: true, options: options, multiple: multiple, onChange: function (_, value) {
34
- onChange(value);
35
- }, inputValue: inputValue, onInputChange: onInputChange, renderInput: function (params) { return _jsx(TextField, __assign({}, params, rest, { size: size })); } }) })));
33
+ return (_jsx(ThemeProvider, __assign({ theme: theme }, { children: _jsx(Autocomplete, { size: size, fullWidth: true, options: options, multiple: multiple, onChange: function (_, val) {
34
+ console.log({ val: val });
35
+ onChange(val);
36
+ }, isOptionEqualToValue: function (opt, val) { return opt.label === val.label; }, value: value, inputValue: inputValue, onInputChange: onInputChange, renderInput: function (params) { return _jsx(TextField, __assign({}, params, rest, { size: size })); } }) })));
36
37
  }
37
38
  export default CustomAutocomplete;
38
39
  export * from "./types";
package/Autocomplete/types.d.ts CHANGED
@@ -3,12 +3,13 @@ import { TextFieldProps } from "@mui/material/TextField";
3
3
  export declare type AutocompleteOptionType<T> = T & {
4
4
  label: string;
5
5
  };
6
- export declare type AutocompleteValueType<T, multiple> = multiple extends false | undefined ? AutocompleteOptionType<T> | null : Array<AutocompleteOptionType<T>> | null;
7
- export interface AutocompleteProps<T, multiple> extends Omit<TextFieldProps, "onChange"> {
6
+ export declare type AutocompleteValueNonNullableType<T, multiple extends boolean | undefined> = multiple extends false | undefined ? AutocompleteOptionType<T> : Array<AutocompleteOptionType<T>>;
7
+ export declare type AutocompleteValueNullableType<T, multiple extends boolean | undefined> = multiple extends false | undefined ? AutocompleteOptionType<T> | null : Array<AutocompleteOptionType<T>> | null;
8
+ export interface AutocompleteProps<T, multiple extends boolean | undefined> extends Omit<TextFieldProps, "onChange"> {
8
9
  multiple?: multiple;
9
10
  options: Array<AutocompleteOptionType<T>>;
10
- value: AutocompleteValueType<T, multiple>;
11
+ value?: AutocompleteValueNonNullableType<T, multiple>;
11
12
  primaryColor?: CSSProperties["color"];
12
13
  secondaryColor?: CSSProperties["color"];
13
- onChange: (value: AutocompleteValueType<T, multiple>) => void;
14
+ onChange: (value: AutocompleteValueNullableType<T, multiple>) => void;
14
15
  }
package/AutocompleteWithFilter/index.d.ts CHANGED
@@ -1,4 +1,4 @@
1
1
  import { AutocompleteWithFilterProps } from "./types";
2
- declare function AutocompleteWithFilter<T, multiple extends boolean | undefined>(props: AutocompleteWithFilterProps<T, multiple>): JSX.Element;
2
+ declare function AutocompleteWithFilter<T, multiple extends boolean | undefined = false>(props: AutocompleteWithFilterProps<T, multiple>): JSX.Element;
3
3
  export default AutocompleteWithFilter;
4
4
  export * from "./types";
package/AutocompleteWithFilter/index.js CHANGED
@@ -39,9 +39,9 @@ function AutocompleteWithFilter(props) {
39
39
  stringify: function (option) { return option.label; }
40
40
  });
41
41
  var theme = useCustomTheme({ primaryColor: primaryColor, secondaryColor: secondaryColor });
42
- return (_jsx(ThemeProvider, __assign({ theme: theme }, { children: _jsx(Autocomplete, { size: size, fullWidth: true, limitTags: 1, options: options, multiple: multiple, filterOptions: filter, onChange: function (_, value) {
43
- onChange(value);
44
- }, disableCloseOnSelect: disableCloseOnSelect || multiple, getOptionLabel: function (option) {
42
+ return (_jsx(ThemeProvider, __assign({ theme: theme }, { children: _jsx(Autocomplete, { size: size, fullWidth: true, limitTags: 1, options: options, multiple: multiple, filterOptions: filter, onChange: function (_, val) {
43
+ onChange(val);
44
+ }, value: value, disableCloseOnSelect: disableCloseOnSelect || multiple, getOptionLabel: function (option) {
45
45
  return option.label || "";
46
46
  }, renderOption: function (props, option, _a) {
47
47
  var selected = _a.selected;
package/AutocompleteWithFilter/types.d.ts CHANGED
@@ -3,13 +3,14 @@ import { TextFieldProps } from "@mui/material/TextField";
3
3
  export declare type AutocompleteWithFilterOptionType<T> = T & {
4
4
  label: string;
5
5
  };
6
- export declare type AutocompleteWithFilterValueType<T, multiple> = multiple extends false | undefined ? AutocompleteWithFilterOptionType<T> | null : Array<AutocompleteWithFilterOptionType<T>> | null;
7
- export interface AutocompleteWithFilterProps<T, multiple> extends Omit<TextFieldProps, "onChange"> {
8
- value: AutocompleteWithFilterValueType<T, multiple>;
6
+ export declare type AutocompleteWithFilterlNonNullableValueType<T, multiple extends boolean | undefined> = multiple extends false | undefined ? AutocompleteWithFilterOptionType<T> : Array<AutocompleteWithFilterOptionType<T>>;
7
+ export declare type AutocompleteWithFilterlNullableValueType<T, multiple extends boolean | undefined> = multiple extends false | undefined ? AutocompleteWithFilterOptionType<T> | null : Array<AutocompleteWithFilterOptionType<T>> | null;
8
+ export interface AutocompleteWithFilterProps<T, multiple extends boolean | undefined> extends Omit<TextFieldProps, "onChange"> {
9
+ value: AutocompleteWithFilterlNonNullableValueType<T, multiple>;
9
10
  options: Array<AutocompleteWithFilterOptionType<T>>;
10
11
  disableCloseOnSelect?: boolean;
11
12
  multiple?: multiple;
12
13
  primaryColor?: CSSProperties["color"];
13
14
  secondaryColor?: CSSProperties["color"];
14
- onChange: (value: AutocompleteWithFilterValueType<T, multiple>) => void;
15
+ onChange: (value: AutocompleteWithFilterlNullableValueType<T, multiple>) => void;
15
16
  }
package/BasicTable/TableBodyRow.js CHANGED
@@ -31,9 +31,10 @@ function BasicTableBodyRow(props) {
31
31
  fontWeight: 600
32
32
  }
33
33
  } }, { children: columns.map(function (col) {
34
- var accessor = col.accessor, Cell = col.Cell, _a = col.minWidth, minWidth = _a === void 0 ? "120px!important" : _a, _b = col.align, align = _b === void 0 ? "center" : _b;
35
- return (_jsx(Grid, __assign({ item: true, xs: 4, md: 3, lg: 2, textAlign: align, sx: {
34
+ var accessor = col.accessor, Cell = col.Cell, _a = col.minWidth, minWidth = _a === void 0 ? "120px!important" : _a, width = col.width, _b = col.align, align = _b === void 0 ? "center" : _b;
35
+ return (_jsx(Grid, __assign({ item: true, textAlign: align, sx: {
36
36
  minWidth: minWidth,
37
+ width: width,
37
38
  paddingLeft: theme.spacing(0.625),
38
39
  paddingRight: theme.spacing(0.625)
39
40
  } }, { children: cloneElement(Cell, { column: col, rows: rows, row: row }) }), accessor));
package/BasicTable/TableFooter.js CHANGED
@@ -29,9 +29,10 @@ function BasicTableFooter(props) {
29
29
  fontWeight: 600
30
30
  }
31
31
  } }, { children: footers.map(function (footer) {
32
- var accessor = footer.accessor, Cell = footer.Cell, _a = footer.minWidth, minWidth = _a === void 0 ? "120px!important" : _a, _b = footer.align, align = _b === void 0 ? "center" : _b;
33
- return (_jsx(Grid, __assign({ item: true, xs: 4, md: 3, lg: 2, textAlign: align, sx: {
32
+ var accessor = footer.accessor, Cell = footer.Cell, _a = footer.minWidth, minWidth = _a === void 0 ? "120px!important" : _a, width = footer.width, _b = footer.align, align = _b === void 0 ? "center" : _b;
33
+ return (_jsx(Grid, __assign({ item: true, textAlign: align, sx: {
34
34
  minWidth: minWidth,
35
+ width: width,
35
36
  paddingLeft: theme.spacing(0.625),
36
37
  paddingRight: theme.spacing(0.625),
37
38
  whiteSpace: "nowrap",
package/BasicTable/TableHeader.js CHANGED
@@ -29,9 +29,10 @@ function BasicTableHeader(props) {
29
29
  fontWeight: 600
30
30
  }
31
31
  } }, { children: headers.map(function (header) {
32
- var accessor = header.accessor, Cell = header.Cell, _a = header.align, align = _a === void 0 ? "center" : _a, _b = header.minWidth, minWidth = _b === void 0 ? "120px!important" : _b, title = header.title, onSort = header.onSort, _c = header.canSort, canSort = _c === void 0 ? false : _c;
33
- return (_jsx(Grid, __assign({ item: true, xs: 4, md: 3, lg: 2, title: title, textAlign: align, sx: {
32
+ var accessor = header.accessor, Cell = header.Cell, _a = header.align, align = _a === void 0 ? "center" : _a, _b = header.minWidth, minWidth = _b === void 0 ? "120px!important" : _b, width = header.width, title = header.title, onSort = header.onSort, _c = header.canSort, canSort = _c === void 0 ? false : _c;
33
+ return (_jsx(Grid, __assign({ item: true, title: title, textAlign: align, sx: {
34
34
  minWidth: minWidth,
35
+ width: width,
35
36
  paddingLeft: theme.spacing(0.625),
36
37
  paddingRight: theme.spacing(0.625),
37
38
  whiteSpace: "nowrap",
package/BasicTable/types.d.ts CHANGED
@@ -16,6 +16,7 @@ export interface IColumn {
16
16
  canSort?: boolean;
17
17
  canBeFrozen?: boolean;
18
18
  minWidth?: number;
19
+ width?: number;
19
20
  [name: string]: unknown;
20
21
  }
21
22
  interface IHeader extends IColumn {
package/BasicTable/useTable.d.ts CHANGED
@@ -11,6 +11,7 @@ declare function useTable(props: UseTableProps): {
11
11
  canSort: boolean | undefined;
12
12
  canBeFrozen?: boolean | undefined;
13
13
  minWidth?: number | undefined;
14
+ width?: number | undefined;
14
15
  Cell: JSX.Element;
15
16
  title: string;
16
17
  onSort: ({ field }: Pick<SortingProps, "field">) => void;
@@ -25,6 +26,7 @@ declare function useTable(props: UseTableProps): {
25
26
  canSort?: boolean | undefined;
26
27
  canBeFrozen?: boolean | undefined;
27
28
  minWidth?: number | undefined;
29
+ width?: number | undefined;
28
30
  Cell: import("react").FunctionComponentElement<any>;
29
31
  }[];
30
32
  columns: {
@@ -37,6 +39,7 @@ declare function useTable(props: UseTableProps): {
37
39
  canSort?: boolean | undefined;
38
40
  canBeFrozen?: boolean | undefined;
39
41
  minWidth?: number | undefined;
42
+ width?: number | undefined;
40
43
  Cell: import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
41
44
  }[];
42
45
  rows: import("./types").IRow[];
package/FormRadioGroup/index.js CHANGED
@@ -26,7 +26,7 @@ function FormRadioGroup(props) {
26
26
  onChange(event.target.value);
27
27
  }, sx: {
28
28
  my: 1,
29
- "& label span:first-child span:first-child": {
29
+ "& label span:first-of-type span:first-of-type": {
30
30
  margin: "-5px 0 -5px 0"
31
31
  }
32
32
  } }, { children: options.map(function (opt) {
package/README.md CHANGED
@@ -216,9 +216,9 @@ import BasicTable, { useTable } from '@symply.io/basic-components/BasicTable';
216
216
 
217
217
  <h5>Column Props (IColumn)</h5>
218
218
 
219
- | accessor | string | | true | The key of the column, it should be unique. |
220
- | ----------- | --------------------------- | ------- | -------- | ----------------------------------------------------- |
221
219
  | Name | Type | Default | Required | Description |
220
+ | ----------- | --------------------------- | ------- | -------- | ----------------------------------------------------- |
221
+ | accessor | string | | true | The key of the column, it should be unique. |
222
222
  | align | "left" \|"center" \|"right" | | false | The alignment of the column. |
223
223
  | Body | ReactElement | | true | The component to render the column body cell. |
224
224
  | canBeFrozen | bool | | false | If true, the column can be frozen |
@@ -227,12 +227,13 @@ import BasicTable, { useTable } from '@symply.io/basic-components/BasicTable';
227
227
  | headerTip | string | | false | The tip title text when the mouse is over the header. |
228
228
  | Footer | ReactElement | | false | The component to render the column footer cell. |
229
229
  | minWidth | number | 120 | false | The minimum width of cells. |
230
+ | width | number | | false | The fixed width of cells. |
230
231
 
231
232
  <h5>Hook Props</h5>
232
233
 
233
- | columns | Array\<IColumn\> | | true | table columns |
234
- | ------------- | -------------------------- | ------- | -------- | ------------------------------------------- |
235
234
  | Name | Type | Default | Required | Description |
235
+ | ------------- | -------------------------- | ------- | -------- | ------------------------------------------- |
236
+ | columns | Array\<IColumn\> | | true | table columns |
236
237
  | data | Array<{ [name]: unknown }> | | true | table data/rows |
237
238
  | disableSortBy | bool | | false | If true, the whole table can't be sortable. |
238
239
  | initialState | { sortBy?: SortByProps } | | false | Set the initial states |
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@symply.io/basic-components",
3
- "version": "1.0.0-beta.10",
3
+ "version": "1.0.0-beta.12",
4
4
  "description": "Basic and reusable components for all frontend of Symply apps",
5
5
  "keywords": [
6
6
  "react",