venice-ui 3.0.49 → 3.0.52

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 (10) hide show
  1. package/dist/cjs/components/Dropdown/Dropdown.js +1 -1
  2. package/dist/cjs/components/Dropdown/Dropdown.styles.js +1 -1
  3. package/dist/cjs/components/Icon/Icon.js +17 -15
  4. package/dist/cjs/components/Toggle/Toggle.styles.js +5 -4
  5. package/dist/esm/components/Dropdown/Dropdown.js +1 -1
  6. package/dist/esm/components/Dropdown/Dropdown.styles.js +1 -1
  7. package/dist/esm/components/Icon/Icon.js +17 -15
  8. package/dist/esm/components/Toggle/Toggle.styles.js +5 -4
  9. package/dist/types/components/Dropdown/Dropdown.styles.d.ts +1 -0
  10. package/package.json +1 -1
package/dist/cjs/components/Dropdown/Dropdown.js CHANGED
@@ -119,7 +119,7 @@ const Dropdown = ({ label, labelPosition = 'top', value, name, size = 'md', widt
119
119
  }, [open, handleFieldBlur]);
120
120
  return (react_1.default.createElement(react_1.default.Fragment, null,
121
121
  react_1.default.createElement(ComponentRoot_1.ComponentRoot, { labelPosition: labelPosition, size: size, width: width, disabled: disabled, error: error, readOnly: readOnly, required: required, optional: optional, optionalLabel: optionalLabel, helperText: helperText, themeVariant: themeVariant, theme: resolvedTheme, componentConfig: dropdonwConfig, label: label, isActive: open, noBreakLabel: noBreakLabel, componentWidth: componentWidth },
122
- react_1.default.createElement(Dropdown_styles_1.TrigerWrapper, { ref: triggerRef, isDisabled: disabled, config: dropdonwConfig, onClick: handleToggleOpen },
122
+ react_1.default.createElement(Dropdown_styles_1.TrigerWrapper, { ref: triggerRef, isDisabled: disabled, readOnly: readOnly, config: dropdonwConfig, onClick: handleToggleOpen },
123
123
  prefixIcon && !readOnly && (react_1.default.createElement(Icon_1.Icon, { name: prefixIcon, size: dropdonwConfig.size[size].iconSize, background: "transparent", hoverBackground: "transparent", isDisabled: disabled || readOnly, onClick: onPrefixIconClick })),
124
124
  prefix && !readOnly && (react_1.default.createElement(Input_styles_1.PrefixWrapper, { inputSize: size, theme: resolvedTheme, inputConfig: dropdonwConfig, error: error, disabled: disabled, readOnly: readOnly }, prefix)),
125
125
  react_1.default.createElement(Dropdown_styles_1.DropdownValue, { config: dropdonwConfig, inputSize: size, onClick: handleToggleOpen, disabled: disabled, theme: resolvedTheme }, value ? getLabelForValue(value) : !readOnly && placeholder),
package/dist/cjs/components/Dropdown/Dropdown.styles.js CHANGED
@@ -36,7 +36,7 @@ exports.TrigerWrapper = styled_components_1.default.div `
36
36
  align-items: center;
37
37
  width: 100%;
38
38
  min-width: 0;
39
- cursor: ${({ isDisabled }) => (isDisabled ? 'not-allowed' : 'pointer')};
39
+ cursor: ${({ isDisabled, readOnly }) => (isDisabled ? 'not-allowed' : readOnly ? 'default' : 'pointer')};
40
40
  background: ${({ config, isDisabled }) => isDisabled ? config.color.disabled.bg : 'transparent'};
41
41
  `;
42
42
  exports.DropdownMenuPanel = styled_components_1.default.div `
package/dist/cjs/components/Icon/Icon.js CHANGED
@@ -55,20 +55,22 @@ const Icon = ({ name = 'person', size = 'lg', isDisabled = false, isActive = fal
55
55
  onClick(event);
56
56
  }
57
57
  };
58
- return (react_1.default.createElement(styled_components_1.ThemeProvider, { theme: resolvedTheme },
59
- react_1.default.createElement(Tooltip_1.Tooltip, { content: tooltip, disabled: !tooltip },
60
- react_1.default.createElement(Icon_styles_1.IconElement, { ref: iconRef, config: componentsConfig, onClick: handleClick, isDisabled: isDisabled, isError: isError, isActive: isActive, color: color, background: background, hoverColor: hoverColor, hoverBackground: hoverBackground, resolvedSize: resolvedSize,
61
- // onMouseEnter={() => setShowTooltip(true)}
62
- // onMouseLeave={() => setShowTooltip(false)}
63
- isInteraction: typeof onClick === 'function' },
64
- react_1.default.createElement("svg", { width: resolvedSize.svg, height: resolvedSize.svg, viewBox: '0 0 24 24', preserveAspectRatio: "xMidYMid meet", x: "0", y: "0", name: name },
65
- react_1.default.createElement("path", { d: IconsPath_1.iconsPath[name], fill: color ??
66
- (isDisabled
67
- ? iconConfig.color.disabled
68
- : isError
69
- ? iconConfig.color.error
70
- : isActive
71
- ? iconConfig.color.active
72
- : iconConfig.color.default) }))))));
58
+ const IconElementComponent = () => {
59
+ return (react_1.default.createElement(Icon_styles_1.IconElement, { ref: iconRef, config: componentsConfig, onClick: handleClick, isDisabled: isDisabled, isError: isError, isActive: isActive, color: color, background: background, hoverColor: hoverColor, hoverBackground: hoverBackground, resolvedSize: resolvedSize,
60
+ // onMouseEnter={() => setShowTooltip(true)}
61
+ // onMouseLeave={() => setShowTooltip(false)}
62
+ isInteraction: typeof onClick === 'function' },
63
+ react_1.default.createElement("svg", { width: resolvedSize.svg, height: resolvedSize.svg, viewBox: '0 0 24 24', preserveAspectRatio: "xMidYMid meet", x: "0", y: "0", name: name },
64
+ react_1.default.createElement("path", { d: IconsPath_1.iconsPath[name], fill: color ??
65
+ (isDisabled
66
+ ? iconConfig.color.disabled
67
+ : isError
68
+ ? iconConfig.color.error
69
+ : isActive
70
+ ? iconConfig.color.active
71
+ : iconConfig.color.default) }))));
72
+ };
73
+ return (react_1.default.createElement(styled_components_1.ThemeProvider, { theme: resolvedTheme }, tooltip ? (react_1.default.createElement(Tooltip_1.Tooltip, { content: tooltip, disabled: !tooltip },
74
+ react_1.default.createElement(IconElementComponent, null))) : (react_1.default.createElement(IconElementComponent, null))));
73
75
  };
74
76
  exports.Icon = Icon;
package/dist/cjs/components/Toggle/Toggle.styles.js CHANGED
@@ -7,7 +7,7 @@ exports.ToggleRoot = exports.TrackThumb = exports.ToggleTrack = void 0;
7
7
  const styled_components_1 = __importDefault(require("styled-components"));
8
8
  exports.ToggleTrack = styled_components_1.default.div `
9
9
  display: inline-block;
10
- box-sizing: border-box;
10
+ box-sizing: content-box;
11
11
  width: ${({ theme, config, size }) => config.size[size].width}px;
12
12
  height: ${({ theme, config, size }) => config.size[size].height}px;
13
13
  box-shadow: ${({ theme, config }) => config.shadow.track};
@@ -21,9 +21,9 @@ exports.ToggleTrack = styled_components_1.default.div `
21
21
  `;
22
22
  exports.TrackThumb = styled_components_1.default.div `
23
23
  position: relative;
24
-
25
- width: ${({ theme, config, size }) => config.size[size].sizeThumb}px;
26
- height: ${({ theme, config, size }) => config.size[size].sizeThumb}px;
24
+ box-sizing: content-box;
25
+ width: ${({ theme, config, size }) => `${config.size[size].sizeThumb}px`};
26
+ height: ${({ theme, config, size }) => `${config.size[size].sizeThumb}px`};
27
27
  background: ${({ theme, config }) => config.color.default.thumbBackground};
28
28
  border: 1px solid ${({ theme, config }) => config.color.default.thumbBorder};
29
29
  border-radius: 50%;
@@ -45,5 +45,6 @@ exports.ToggleRoot = styled_components_1.default.div `
45
45
  justify-content: center;
46
46
  width: 100%;
47
47
  height: 100%;
48
+ box-sizing: content-box;
48
49
  cursor: ${({ isDisabled }) => (isDisabled ? 'not-allowed' : 'pointer')};
49
50
  `;
package/dist/esm/components/Dropdown/Dropdown.js CHANGED
@@ -83,7 +83,7 @@ export const Dropdown = ({ label, labelPosition = 'top', value, name, size = 'md
83
83
  }, [open, handleFieldBlur]);
84
84
  return (React.createElement(React.Fragment, null,
85
85
  React.createElement(ComponentRoot, { labelPosition: labelPosition, size: size, width: width, disabled: disabled, error: error, readOnly: readOnly, required: required, optional: optional, optionalLabel: optionalLabel, helperText: helperText, themeVariant: themeVariant, theme: resolvedTheme, componentConfig: dropdonwConfig, label: label, isActive: open, noBreakLabel: noBreakLabel, componentWidth: componentWidth },
86
- React.createElement(TrigerWrapper, { ref: triggerRef, isDisabled: disabled, config: dropdonwConfig, onClick: handleToggleOpen },
86
+ React.createElement(TrigerWrapper, { ref: triggerRef, isDisabled: disabled, readOnly: readOnly, config: dropdonwConfig, onClick: handleToggleOpen },
87
87
  prefixIcon && !readOnly && (React.createElement(Icon, { name: prefixIcon, size: dropdonwConfig.size[size].iconSize, background: "transparent", hoverBackground: "transparent", isDisabled: disabled || readOnly, onClick: onPrefixIconClick })),
88
88
  prefix && !readOnly && (React.createElement(PrefixWrapper, { inputSize: size, theme: resolvedTheme, inputConfig: dropdonwConfig, error: error, disabled: disabled, readOnly: readOnly }, prefix)),
89
89
  React.createElement(DropdownValue, { config: dropdonwConfig, inputSize: size, onClick: handleToggleOpen, disabled: disabled, theme: resolvedTheme }, value ? getLabelForValue(value) : !readOnly && placeholder),
package/dist/esm/components/Dropdown/Dropdown.styles.js CHANGED
@@ -30,7 +30,7 @@ export const TrigerWrapper = styled.div `
30
30
  align-items: center;
31
31
  width: 100%;
32
32
  min-width: 0;
33
- cursor: ${({ isDisabled }) => (isDisabled ? 'not-allowed' : 'pointer')};
33
+ cursor: ${({ isDisabled, readOnly }) => (isDisabled ? 'not-allowed' : readOnly ? 'default' : 'pointer')};
34
34
  background: ${({ config, isDisabled }) => isDisabled ? config.color.disabled.bg : 'transparent'};
35
35
  `;
36
36
  export const DropdownMenuPanel = styled.div `
package/dist/esm/components/Icon/Icon.js CHANGED
@@ -19,19 +19,21 @@ export const Icon = ({ name = 'person', size = 'lg', isDisabled = false, isActiv
19
19
  onClick(event);
20
20
  }
21
21
  };
22
- return (React.createElement(ThemeProvider, { theme: resolvedTheme },
23
- React.createElement(Tooltip, { content: tooltip, disabled: !tooltip },
24
- React.createElement(IconElement, { ref: iconRef, config: componentsConfig, onClick: handleClick, isDisabled: isDisabled, isError: isError, isActive: isActive, color: color, background: background, hoverColor: hoverColor, hoverBackground: hoverBackground, resolvedSize: resolvedSize,
25
- // onMouseEnter={() => setShowTooltip(true)}
26
- // onMouseLeave={() => setShowTooltip(false)}
27
- isInteraction: typeof onClick === 'function' },
28
- React.createElement("svg", { width: resolvedSize.svg, height: resolvedSize.svg, viewBox: '0 0 24 24', preserveAspectRatio: "xMidYMid meet", x: "0", y: "0", name: name },
29
- React.createElement("path", { d: iconsPath[name], fill: color ??
30
- (isDisabled
31
- ? iconConfig.color.disabled
32
- : isError
33
- ? iconConfig.color.error
34
- : isActive
35
- ? iconConfig.color.active
36
- : iconConfig.color.default) }))))));
22
+ const IconElementComponent = () => {
23
+ return (React.createElement(IconElement, { ref: iconRef, config: componentsConfig, onClick: handleClick, isDisabled: isDisabled, isError: isError, isActive: isActive, color: color, background: background, hoverColor: hoverColor, hoverBackground: hoverBackground, resolvedSize: resolvedSize,
24
+ // onMouseEnter={() => setShowTooltip(true)}
25
+ // onMouseLeave={() => setShowTooltip(false)}
26
+ isInteraction: typeof onClick === 'function' },
27
+ React.createElement("svg", { width: resolvedSize.svg, height: resolvedSize.svg, viewBox: '0 0 24 24', preserveAspectRatio: "xMidYMid meet", x: "0", y: "0", name: name },
28
+ React.createElement("path", { d: iconsPath[name], fill: color ??
29
+ (isDisabled
30
+ ? iconConfig.color.disabled
31
+ : isError
32
+ ? iconConfig.color.error
33
+ : isActive
34
+ ? iconConfig.color.active
35
+ : iconConfig.color.default) }))));
36
+ };
37
+ return (React.createElement(ThemeProvider, { theme: resolvedTheme }, tooltip ? (React.createElement(Tooltip, { content: tooltip, disabled: !tooltip },
38
+ React.createElement(IconElementComponent, null))) : (React.createElement(IconElementComponent, null))));
37
39
  };
package/dist/esm/components/Toggle/Toggle.styles.js CHANGED
@@ -1,7 +1,7 @@
1
1
  import styled from 'styled-components';
2
2
  export const ToggleTrack = styled.div `
3
3
  display: inline-block;
4
- box-sizing: border-box;
4
+ box-sizing: content-box;
5
5
  width: ${({ theme, config, size }) => config.size[size].width}px;
6
6
  height: ${({ theme, config, size }) => config.size[size].height}px;
7
7
  box-shadow: ${({ theme, config }) => config.shadow.track};
@@ -15,9 +15,9 @@ export const ToggleTrack = styled.div `
15
15
  `;
16
16
  export const TrackThumb = styled.div `
17
17
  position: relative;
18
-
19
- width: ${({ theme, config, size }) => config.size[size].sizeThumb}px;
20
- height: ${({ theme, config, size }) => config.size[size].sizeThumb}px;
18
+ box-sizing: content-box;
19
+ width: ${({ theme, config, size }) => `${config.size[size].sizeThumb}px`};
20
+ height: ${({ theme, config, size }) => `${config.size[size].sizeThumb}px`};
21
21
  background: ${({ theme, config }) => config.color.default.thumbBackground};
22
22
  border: 1px solid ${({ theme, config }) => config.color.default.thumbBorder};
23
23
  border-radius: 50%;
@@ -39,5 +39,6 @@ export const ToggleRoot = styled.div `
39
39
  justify-content: center;
40
40
  width: 100%;
41
41
  height: 100%;
42
+ box-sizing: content-box;
42
43
  cursor: ${({ isDisabled }) => (isDisabled ? 'not-allowed' : 'pointer')};
43
44
  `;
package/dist/types/components/Dropdown/Dropdown.styles.d.ts CHANGED
@@ -12,6 +12,7 @@ interface IDropdownValueProps {
12
12
  export declare const DropdownValue: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, IDropdownValueProps, never>;
13
13
  interface ITrigerWrapperProps {
14
14
  isDisabled?: boolean;
15
+ readOnly?: boolean;
15
16
  config: any;
16
17
  }
17
18
  export declare const TrigerWrapper: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, ITrigerWrapperProps, never>;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "venice-ui",
3
- "version": "3.0.49",
3
+ "version": "3.0.52",
4
4
  "description": "Component library",
5
5
  "main": "index.js",
6
6
  "module": "./dist/esm/index.js",