@snack-uikit/toggles 0.13.27 → 0.13.28-preview-4e8bfebd.0
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.
- package/dist/cjs/components/Checkbox/Checkbox.js +13 -9
- package/dist/cjs/components/Favorite/Favorite.js +7 -7
- package/dist/cjs/components/Radio/Radio.js +2 -4
- package/dist/cjs/components/Switch/Switch.js +6 -7
- package/dist/cjs/components/ToggleGroup/ToggleGroup.js +14 -10
- package/dist/cjs/components/ToggleGroup/hooks.js +5 -8
- package/dist/cjs/components/TogglePrivate/TogglePrivate.js +29 -18
- package/dist/cjs/utils.js +6 -2
- package/package.json +3 -3
|
@@ -1,5 +1,7 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
|
|
3
|
+
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
4
|
+
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/slicedToArray"));
|
|
3
5
|
var __rest = void 0 && (void 0).__rest || function (s, e) {
|
|
4
6
|
var t = {};
|
|
5
7
|
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
|
|
@@ -27,18 +29,20 @@ const utils_1 = require("../../utils");
|
|
|
27
29
|
const TogglePrivate_1 = require("../TogglePrivate");
|
|
28
30
|
const styles_module_scss_1 = __importDefault(require('./styles.module.css'));
|
|
29
31
|
function Checkbox(_a) {
|
|
30
|
-
var
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
} = _a,
|
|
32
|
+
var inputRef = _a.inputRef,
|
|
33
|
+
indeterminateProp = _a.indeterminate,
|
|
34
|
+
indeterminateDefault = _a.indeterminateDefault,
|
|
35
|
+
onChangeProp = _a.onChange,
|
|
36
|
+
dataTestId = _a['data-test-id'],
|
|
37
|
+
_a$size = _a.size,
|
|
38
|
+
size = _a$size === void 0 ? constants_1.SIZE.M : _a$size,
|
|
38
39
|
restProps = __rest(_a, ["inputRef", "indeterminate", "indeterminateDefault", "onChange", 'data-test-id', "size"]);
|
|
39
40
|
const localRef = (0, react_1.useRef)(null);
|
|
40
41
|
const ref = (0, merge_refs_1.default)(localRef, inputRef);
|
|
41
|
-
const
|
|
42
|
+
const _ref = (0, uncontrollable_1.useUncontrolledProp)(indeterminateProp, indeterminateDefault),
|
|
43
|
+
_ref2 = (0, _slicedToArray2.default)(_ref, 2),
|
|
44
|
+
indeterminate = _ref2[0],
|
|
45
|
+
setIndeterminate = _ref2[1];
|
|
42
46
|
const onChange = (0, react_1.useCallback)(checked => {
|
|
43
47
|
onChangeProp === null || onChangeProp === void 0 ? void 0 : onChangeProp(checked);
|
|
44
48
|
setIndeterminate(false);
|
|
@@ -33,13 +33,13 @@ const UNCHECKED_ICONS = {
|
|
|
33
33
|
[constants_1.FAVORITE_ICON.Heart]: icons_1.HeartSVG
|
|
34
34
|
};
|
|
35
35
|
function Favorite(_a) {
|
|
36
|
-
var
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
36
|
+
var inputRef = _a.inputRef,
|
|
37
|
+
dataTestId = _a['data-test-id'],
|
|
38
|
+
_a$size = _a.size,
|
|
39
|
+
size = _a$size === void 0 ? constants_1.SIZE.M : _a$size,
|
|
40
|
+
_a$icon = _a.icon,
|
|
41
|
+
icon = _a$icon === void 0 ? constants_1.FAVORITE_ICON.Heart : _a$icon,
|
|
42
|
+
onKeyUp = _a.onKeyUp,
|
|
43
43
|
restProps = __rest(_a, ["inputRef", 'data-test-id', "size", "icon", "onKeyUp"]);
|
|
44
44
|
const iconSize = (0, react_1.useMemo)(() => (0, utils_1.getIconSize)(size), [size]);
|
|
45
45
|
return (0, jsx_runtime_1.jsx)(TogglePrivate_1.TogglePrivate, Object.assign({}, restProps, {
|
|
@@ -23,10 +23,8 @@ const utils_1 = require("../../utils");
|
|
|
23
23
|
const TogglePrivate_1 = require("../TogglePrivate");
|
|
24
24
|
const styles_module_scss_1 = __importDefault(require('./styles.module.css'));
|
|
25
25
|
function Radio(_a) {
|
|
26
|
-
var
|
|
27
|
-
|
|
28
|
-
'data-test-id': dataTestId
|
|
29
|
-
} = _a,
|
|
26
|
+
var inputRef = _a.inputRef,
|
|
27
|
+
dataTestId = _a['data-test-id'],
|
|
30
28
|
restProps = __rest(_a, ["inputRef", 'data-test-id']);
|
|
31
29
|
return (0, jsx_runtime_1.jsx)(TogglePrivate_1.TogglePrivate, Object.assign({}, restProps, {
|
|
32
30
|
"data-test-id": dataTestId,
|
|
@@ -25,13 +25,12 @@ const utils_1 = require("../../utils");
|
|
|
25
25
|
const TogglePrivate_1 = require("../TogglePrivate");
|
|
26
26
|
const styles_module_scss_1 = __importDefault(require('./styles.module.css'));
|
|
27
27
|
function Switch(_a) {
|
|
28
|
-
var
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
} = _a,
|
|
28
|
+
var inputRef = _a.inputRef,
|
|
29
|
+
dataTestId = _a['data-test-id'],
|
|
30
|
+
showIcon = _a.showIcon,
|
|
31
|
+
loading = _a.loading,
|
|
32
|
+
_a$size = _a.size,
|
|
33
|
+
size = _a$size === void 0 ? constants_1.SIZE.M : _a$size,
|
|
35
34
|
restProps = __rest(_a, ["inputRef", 'data-test-id', "showIcon", "loading", "size"]);
|
|
36
35
|
return (0, jsx_runtime_1.jsx)(TogglePrivate_1.TogglePrivate, Object.assign({}, restProps, {
|
|
37
36
|
size: size,
|
|
@@ -1,5 +1,7 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
|
|
3
|
+
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
4
|
+
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/slicedToArray"));
|
|
3
5
|
Object.defineProperty(exports, "__esModule", {
|
|
4
6
|
value: true
|
|
5
7
|
});
|
|
@@ -10,16 +12,18 @@ const uncontrollable_1 = require("uncontrollable");
|
|
|
10
12
|
const constants_1 = require("../../constants");
|
|
11
13
|
const context_1 = require("../../context");
|
|
12
14
|
function ToggleGroup(_ref) {
|
|
13
|
-
let
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
selectionMode = constants_1.SELECTION_MODE.Single,
|
|
18
|
-
defaultValue
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
15
|
+
let children = _ref.children,
|
|
16
|
+
valueProp = _ref.value,
|
|
17
|
+
onChangeProp = _ref.onChange,
|
|
18
|
+
_ref$selectionMode = _ref.selectionMode,
|
|
19
|
+
selectionMode = _ref$selectionMode === void 0 ? constants_1.SELECTION_MODE.Single : _ref$selectionMode,
|
|
20
|
+
defaultValue = _ref.defaultValue;
|
|
21
|
+
const _ref2 = (0, uncontrollable_1.useUncontrolledProp)(valueProp, defaultValue, cb => {
|
|
22
|
+
onChangeProp === null || onChangeProp === void 0 ? void 0 : onChangeProp(cb(value));
|
|
23
|
+
}),
|
|
24
|
+
_ref3 = (0, _slicedToArray2.default)(_ref2, 2),
|
|
25
|
+
value = _ref3[0],
|
|
26
|
+
setValue = _ref3[1];
|
|
23
27
|
const onChange = (0, react_1.useCallback)(newValue => {
|
|
24
28
|
if (selectionMode === constants_1.SELECTION_MODE.Single) {
|
|
25
29
|
return setValue(oldValue => {
|
|
@@ -8,14 +8,11 @@ const react_1 = require("react");
|
|
|
8
8
|
const constants_1 = require("../../constants");
|
|
9
9
|
const context_1 = require("../../context");
|
|
10
10
|
function useToggleGroup(_ref) {
|
|
11
|
-
let
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
onChange,
|
|
17
|
-
selectionMode
|
|
18
|
-
} = (0, context_1.useToggleGroupContext)();
|
|
11
|
+
let itemValue = _ref.value;
|
|
12
|
+
const _ref2 = (0, context_1.useToggleGroupContext)(),
|
|
13
|
+
value = _ref2.value,
|
|
14
|
+
onChange = _ref2.onChange,
|
|
15
|
+
selectionMode = _ref2.selectionMode;
|
|
19
16
|
const isChecked = (0, react_1.useMemo)(() => {
|
|
20
17
|
if (typeof value === 'string') {
|
|
21
18
|
return value === itemValue;
|
|
@@ -1,5 +1,7 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
|
|
3
|
+
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
4
|
+
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/slicedToArray"));
|
|
3
5
|
var __rest = void 0 && (void 0).__rest || function (s, e) {
|
|
4
6
|
var t = {};
|
|
5
7
|
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
|
|
@@ -25,24 +27,33 @@ const constants_1 = require("../../constants");
|
|
|
25
27
|
const utils_1 = require("../../utils");
|
|
26
28
|
const styles_module_scss_1 = __importDefault(require('./styles.module.css'));
|
|
27
29
|
exports.TogglePrivate = (0, react_1.forwardRef)(function TogglePrivate(_a, ref) {
|
|
28
|
-
var
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
30
|
+
var render = _a.render,
|
|
31
|
+
checkedProp = _a.checked,
|
|
32
|
+
defaultChecked = _a.defaultChecked,
|
|
33
|
+
onChange = _a.onChange,
|
|
34
|
+
onBlur = _a.onBlur,
|
|
35
|
+
onFocus = _a.onFocus,
|
|
36
|
+
disabled = _a.disabled,
|
|
37
|
+
className = _a.className,
|
|
38
|
+
_a$size = _a.size,
|
|
39
|
+
size = _a$size === void 0 ? constants_1.SIZE.M : _a$size,
|
|
40
|
+
_a$mode = _a.mode,
|
|
41
|
+
mode = _a$mode === void 0 ? constants_1.MODE.Checkbox : _a$mode,
|
|
42
|
+
onKeyUp = _a.onKeyUp,
|
|
43
|
+
testId = _a['data-test-id'],
|
|
42
44
|
otherProps = __rest(_a, ["render", "checked", "defaultChecked", "onChange", "onBlur", "onFocus", "disabled", "className", "size", "mode", "onKeyUp", 'data-test-id']);
|
|
43
|
-
const
|
|
44
|
-
|
|
45
|
-
|
|
45
|
+
const _ref = (0, uncontrollable_1.useUncontrolledProp)(checkedProp, Boolean(defaultChecked), onChange),
|
|
46
|
+
_ref2 = (0, _slicedToArray2.default)(_ref, 2),
|
|
47
|
+
checked = _ref2[0],
|
|
48
|
+
setChecked = _ref2[1];
|
|
49
|
+
const _ref3 = (0, react_1.useState)(false),
|
|
50
|
+
_ref4 = (0, _slicedToArray2.default)(_ref3, 2),
|
|
51
|
+
focusVisible = _ref4[0],
|
|
52
|
+
setFocusVisible = _ref4[1];
|
|
53
|
+
const _ref5 = (0, react_1.useState)(false),
|
|
54
|
+
_ref6 = (0, _slicedToArray2.default)(_ref5, 2),
|
|
55
|
+
hover = _ref6[0],
|
|
56
|
+
setHover = _ref6[1];
|
|
46
57
|
const visualState = {
|
|
47
58
|
disabled: Boolean(disabled),
|
|
48
59
|
focusVisible,
|
|
@@ -60,7 +71,7 @@ exports.TogglePrivate = (0, react_1.forwardRef)(function TogglePrivate(_a, ref)
|
|
|
60
71
|
onKeyUp: onKeyUp
|
|
61
72
|
}, (0, utils_1.getVisualStateAttributes)(visualState), {
|
|
62
73
|
children: [render(visualState), (0, jsx_runtime_1.jsx)("input", Object.assign({}, otherProps, {
|
|
63
|
-
"data-test-id":
|
|
74
|
+
"data-test-id": "".concat(testId, "-native-input"),
|
|
64
75
|
ref: ref,
|
|
65
76
|
type: mode,
|
|
66
77
|
className: styles_module_scss_1.default.togglePrivate,
|
package/dist/cjs/utils.js
CHANGED
|
@@ -1,5 +1,7 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
|
|
3
|
+
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
4
|
+
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/slicedToArray"));
|
|
3
5
|
Object.defineProperty(exports, "__esModule", {
|
|
4
6
|
value: true
|
|
5
7
|
});
|
|
@@ -8,8 +10,10 @@ exports.getIconSize = getIconSize;
|
|
|
8
10
|
const constants_1 = require("./constants");
|
|
9
11
|
function getVisualStateAttributes(state) {
|
|
10
12
|
return Object.entries(state).reduce(function (result, _ref) {
|
|
11
|
-
let
|
|
12
|
-
|
|
13
|
+
let _ref2 = (0, _slicedToArray2.default)(_ref, 2),
|
|
14
|
+
name = _ref2[0],
|
|
15
|
+
value = _ref2[1];
|
|
16
|
+
result["data-".concat(name.toLowerCase())] = value;
|
|
13
17
|
return result;
|
|
14
18
|
}, {});
|
|
15
19
|
}
|
package/package.json
CHANGED
|
@@ -4,7 +4,7 @@
|
|
|
4
4
|
"access": "public"
|
|
5
5
|
},
|
|
6
6
|
"title": "Toggles",
|
|
7
|
-
"version": "0.13.
|
|
7
|
+
"version": "0.13.28-preview-4e8bfebd.0",
|
|
8
8
|
"sideEffects": [
|
|
9
9
|
"*.css",
|
|
10
10
|
"*.woff",
|
|
@@ -36,11 +36,11 @@
|
|
|
36
36
|
"license": "Apache-2.0",
|
|
37
37
|
"scripts": {},
|
|
38
38
|
"dependencies": {
|
|
39
|
-
"@snack-uikit/icons": "0.27.
|
|
39
|
+
"@snack-uikit/icons": "0.27.8-preview-4e8bfebd.0",
|
|
40
40
|
"@snack-uikit/utils": "4.0.2",
|
|
41
41
|
"classnames": "2.5.1",
|
|
42
42
|
"merge-refs": "1.3.0",
|
|
43
43
|
"uncontrollable": "8.0.4"
|
|
44
44
|
},
|
|
45
|
-
"gitHead": "
|
|
45
|
+
"gitHead": "d52534cac02c3b621615686607bfba56762150ac"
|
|
46
46
|
}
|