@pareto-engineering/design-system 4.0.0-alpha.56 → 4.0.0-alpha.58

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.
@@ -23,7 +23,7 @@ const ToggleSwitch = _ref => {
23
23
  id,
24
24
  className: userClassName,
25
25
  style,
26
- handleOnClick,
26
+ handleOnChange,
27
27
  checked,
28
28
  size
29
29
  // ...otherProps
@@ -38,13 +38,13 @@ const ToggleSwitch = _ref => {
38
38
  '--size': size,
39
39
  ...style
40
40
  },
41
- onClick: handleOnClick,
42
41
  type: "button"
43
42
  // {...otherProps}
44
43
  }, /*#__PURE__*/React.createElement("input", {
45
44
  type: "checkbox",
46
45
  id: "switch",
47
- checked: checked
46
+ checked: checked,
47
+ onChange: handleOnChange
48
48
  }), /*#__PURE__*/React.createElement("label", {
49
49
  htmlFor: "switch"
50
50
  }));
@@ -65,7 +65,7 @@ ToggleSwitch.propTypes = {
65
65
  /**
66
66
  * The onClick handler for this element
67
67
  */
68
- handleOnClick: _propTypes.default.func,
68
+ handleOnChange: _propTypes.default.func,
69
69
  /**
70
70
  * The checked state of this element
71
71
  */
@@ -45,7 +45,7 @@ const ThemeSelector = _ref => {
45
45
  className: "c-x x-paragraph"
46
46
  }, userTheme && userTheme[0].toUpperCase() + userTheme.slice(1), ' ', "Theme"), /*#__PURE__*/React.createElement(_a.ToggleSwitch, {
47
47
  checked: userTheme === 'dark',
48
- handleOnClick: loopThemes
48
+ handleOnChange: loopThemes
49
49
  }));
50
50
  };
51
51
  ThemeSelector.propTypes = {
@@ -16,7 +16,7 @@ const ToggleSwitch = ({
16
16
  id,
17
17
  className: userClassName,
18
18
  style,
19
- handleOnClick,
19
+ handleOnChange,
20
20
  checked,
21
21
  size
22
22
  // ...otherProps
@@ -31,13 +31,13 @@ const ToggleSwitch = ({
31
31
  '--size': size,
32
32
  ...style
33
33
  },
34
- onClick: handleOnClick,
35
34
  type: "button"
36
35
  // {...otherProps}
37
36
  }, /*#__PURE__*/React.createElement("input", {
38
37
  type: "checkbox",
39
38
  id: "switch",
40
- checked: checked
39
+ checked: checked,
40
+ onChange: handleOnChange
41
41
  }), /*#__PURE__*/React.createElement("label", {
42
42
  htmlFor: "switch"
43
43
  }));
@@ -58,7 +58,7 @@ ToggleSwitch.propTypes = {
58
58
  /**
59
59
  * The onClick handler for this element
60
60
  */
61
- handleOnClick: PropTypes.func,
61
+ handleOnChange: PropTypes.func,
62
62
  /**
63
63
  * The checked state of this element
64
64
  */
@@ -38,7 +38,7 @@ const ThemeSelector = ({
38
38
  className: "c-x x-paragraph"
39
39
  }, userTheme && userTheme[0].toUpperCase() + userTheme.slice(1), ' ', "Theme"), /*#__PURE__*/React.createElement(ToggleSwitch, {
40
40
  checked: userTheme === 'dark',
41
- handleOnClick: loopThemes
41
+ handleOnChange: loopThemes
42
42
  }));
43
43
  };
44
44
  ThemeSelector.propTypes = {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@pareto-engineering/design-system",
3
- "version": "4.0.0-alpha.56",
3
+ "version": "4.0.0-alpha.58",
4
4
  "description": "",
5
5
  "main": "dist/cjs/index.js",
6
6
  "module": "dist/es/index.js",
@@ -53,7 +53,7 @@
53
53
  "@lexical/react": "^0.11.3",
54
54
  "@pareto-engineering/assets": "^4.0.0-alpha.54",
55
55
  "@pareto-engineering/bem": "^4.0.0-alpha.20",
56
- "@pareto-engineering/styles": "^4.0.0-alpha.55",
56
+ "@pareto-engineering/styles": "^4.0.0-alpha.57",
57
57
  "@pareto-engineering/utils": "^4.0.0-alpha.46",
58
58
  "date-fns": "^2.29.3",
59
59
  "downshift": "^6.1.12",
@@ -70,5 +70,5 @@
70
70
  "relay-test-utils": "^15.0.0"
71
71
  },
72
72
  "browserslist": "> 2%",
73
- "gitHead": "b6da07b4268743142591d63580db20da7581ee8b"
73
+ "gitHead": "dcccc8b3170d8f1f27d4fbbe653aebdf4b5f829b"
74
74
  }
@@ -20,7 +20,7 @@ const ToggleSwitch = ({
20
20
  id,
21
21
  className:userClassName,
22
22
  style,
23
- handleOnClick,
23
+ handleOnChange,
24
24
  checked,
25
25
  size,
26
26
  // ...otherProps
@@ -45,11 +45,15 @@ const ToggleSwitch = ({
45
45
  '--size':size,
46
46
  ...style,
47
47
  }}
48
- onClick={handleOnClick}
49
48
  type="button"
50
49
  // {...otherProps}
51
50
  >
52
- <input type="checkbox" id="switch" checked={checked} />
51
+ <input
52
+ type="checkbox"
53
+ id="switch"
54
+ checked={checked}
55
+ onChange={handleOnChange}
56
+ />
53
57
  {/* eslint-disable-next-line jsx-a11y/label-has-associated-control */}
54
58
  <label htmlFor="switch" />
55
59
  </button>
@@ -75,7 +79,7 @@ ToggleSwitch.propTypes = {
75
79
  /**
76
80
  * The onClick handler for this element
77
81
  */
78
- handleOnClick:PropTypes.func,
82
+ handleOnChange:PropTypes.func,
79
83
 
80
84
  /**
81
85
  * The checked state of this element
@@ -53,7 +53,7 @@ const ThemeSelector = ({
53
53
  {' '}
54
54
  Theme
55
55
  </span>
56
- <ToggleSwitch checked={userTheme === 'dark'} handleOnClick={loopThemes} />
56
+ <ToggleSwitch checked={userTheme === 'dark'} handleOnChange={loopThemes} />
57
57
  </div>
58
58
  )
59
59
  }