@occmundial/occ-atomic 3.0.0-beta.11 → 3.0.0-beta.12

Sign up to get free protection for your applications and to get access to all the features.
package/CHANGELOG.md CHANGED
@@ -1,3 +1,10 @@
1
+ # [3.0.0-beta.12](https://github.com/occmundial/occ-atomic/compare/v3.0.0-beta.11...v3.0.0-beta.12) (2024-06-07)
2
+
3
+
4
+ ### Bug Fixes
5
+
6
+ * Add form nav behavior to checkbox ([6b2c664](https://github.com/occmundial/occ-atomic/commit/6b2c664e165bb4617dc53874be69bb9d8c8e6bc3))
7
+
1
8
  # [3.0.0-beta.11](https://github.com/occmundial/occ-atomic/compare/v3.0.0-beta.10...v3.0.0-beta.11) (2024-06-07)
2
9
 
3
10
 
@@ -81,9 +81,19 @@ var Checkbox = /*#__PURE__*/function (_React$Component) {
81
81
  if (onChange) onChange(value, id);
82
82
  }
83
83
  }
84
+ }, {
85
+ key: "handleKeyDown",
86
+ value: function handleKeyDown(e) {
87
+ if (e.keyCode == 13 || e.keyCode == 32) {
88
+ e.preventDefault();
89
+ this.toggle();
90
+ }
91
+ }
84
92
  }, {
85
93
  key: "render",
86
94
  value: function render() {
95
+ var _this2 = this;
96
+
87
97
  var _this$state = this.state,
88
98
  value = _this$state.value,
89
99
  undetermined = _this$state.undetermined;
@@ -96,12 +106,16 @@ var Checkbox = /*#__PURE__*/function (_React$Component) {
96
106
  id = _this$props2.id,
97
107
  className = _this$props2.className,
98
108
  style = _this$props2.style,
109
+ alignLeft = _this$props2.alignLeft,
99
110
  trk = _this$props2.trk,
100
111
  testId = _this$props2.testId;
101
112
  var iconClass = undetermined ? " ".concat(classes.undetermined) : value ? " ".concat(classes.active) : '';
102
113
  return /*#__PURE__*/_react["default"].createElement("div", _extends({
103
114
  id: id,
104
- tabIndex: -1,
115
+ tabIndex: disabled ? -1 : 0,
116
+ onKeyDown: function onKeyDown(e) {
117
+ return _this2.handleKeyDown(e);
118
+ },
105
119
  className: "".concat(classes.cont).concat(iconClass).concat(disabled ? " ".concat(classes.disabled) : '').concat(className ? " ".concat(className) : ''),
106
120
  onClick: this.toggle,
107
121
  style: style,
@@ -113,7 +127,7 @@ var Checkbox = /*#__PURE__*/function (_React$Component) {
113
127
  id: trk
114
128
  }), label && /*#__PURE__*/_react["default"].createElement(_Text["default"], {
115
129
  tag: "label",
116
- className: "".concat(classes.label).concat(textOverflow ? " ".concat(classes.overflow) : '')
130
+ className: "".concat(classes.label).concat(textOverflow ? " ".concat(classes.overflow) : '').concat(alignLeft ? " ".concat(classes.alignLeft) : '')
117
131
  }, label), right && /*#__PURE__*/_react["default"].createElement(_Text["default"], {
118
132
  tag: "label",
119
133
  mid: true,
@@ -149,6 +163,9 @@ Checkbox.propTypes = {
149
163
  /** Use this prop to overflow the text of the label, adding '...' and the end. */
150
164
  textOverflow: _propTypes["default"].bool,
151
165
 
166
+ /** Align the content to the left */
167
+ alignLeft: _propTypes["default"].bool,
168
+
152
169
  /** Id for catching selected element for tracking. */
153
170
  trk: _propTypes["default"].string,
154
171
  id: _propTypes["default"].string,
@@ -13,6 +13,9 @@ Object {
13
13
  "borderColor": "rgba(255,255,255,0.2)",
14
14
  },
15
15
  },
16
+ "alignLeft": Object {
17
+ "flex": "none",
18
+ },
16
19
  "check": Object {
17
20
  "&:after": Object {
18
21
  "background": "transparent",
@@ -38,6 +41,7 @@ Object {
38
41
  "position": "absolute",
39
42
  "top": "50%",
40
43
  "transform": "translate(-50%, -50%)",
44
+ "transition": "0.3s all",
41
45
  "width": 20,
42
46
  },
43
47
  "height": "24px",
@@ -110,6 +114,7 @@ Object {
110
114
  "right": Object {
111
115
  "float": "right",
112
116
  "marginLeft": "8px",
117
+ "pointerEvents": "none",
113
118
  },
114
119
  "undetermined": Object {
115
120
  "& $check:after": Object {
@@ -66,7 +66,8 @@ var _default = {
66
66
  left: '50%',
67
67
  transform: 'translate(-50%, -50%)',
68
68
  border: "1px solid ".concat(checkbox['unselected']['border']['default']),
69
- background: checkbox['unselected']['bg']['default']
69
+ background: checkbox['unselected']['bg']['default'],
70
+ transition: '0.3s all'
70
71
  },
71
72
  '&:after': {
72
73
  content: '""',
@@ -130,12 +131,16 @@ var _default = {
130
131
  },
131
132
  right: {
132
133
  marginLeft: _spacing["default"]['size-2'],
133
- "float": 'right'
134
+ "float": 'right',
135
+ pointerEvents: 'none'
134
136
  },
135
137
  overflow: {
136
138
  overflow: 'hidden',
137
139
  textOverflow: 'ellipsis',
138
140
  whiteSpace: 'nowrap'
141
+ },
142
+ alignLeft: {
143
+ flex: 'none'
139
144
  }
140
145
  };
141
146
  exports["default"] = _default;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@occmundial/occ-atomic",
3
- "version": "3.0.0-beta.11",
3
+ "version": "3.0.0-beta.12",
4
4
  "description": "Collection of shareable styled React components for OCC applications.",
5
5
  "homepage": "http://occmundial.github.io/occ-atomic",
6
6
  "main": "build/index.js",