@king-design/react 2.0.0-beta.0

package/components/radio/index.spec.js

@@ -0,0 +1,192 @@
+import _inheritsLoose from "@babel/runtime-corejs3/helpers/inheritsLoose";
+import _asyncToGenerator from "@babel/runtime-corejs3/helpers/asyncToGenerator";
+import _concatInstanceProperty from "@babel/runtime-corejs3/core-js/instance/concat";
+import _regeneratorRuntime from "@babel/runtime-corejs3/regenerator";
+import GroupDemo from '~/components/radio/demos/group';
+import ValueDemo from '~/components/radio/demos/value';
+import BasicDemo from '~/components/radio/demos/basic';
+import { mount, unmount, dispatchEvent, wait } from '../../test/utils';
+import { Component } from 'intact-react';
+import { Radio } from './';
+describe('Radio', function () {
+  afterEach(function () {
+    unmount();
+  });
+  it('should get value correctly of group radios', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
+    var _mount, instance, element, _element$querySelecto, first, second;
+
+    return _regeneratorRuntime.wrap(function _callee$(_context) {
+      while (1) {
+        switch (_context.prev = _context.next) {
+          case 0:
+            _mount = mount(GroupDemo), instance = _mount[0], element = _mount[1];
+            _element$querySelecto = element.querySelectorAll('.k-radio'), first = _element$querySelecto[0], second = _element$querySelecto[1];
+            first.click();
+            _context.next = 5;
+            return wait();
+
+          case 5:
+            expect(instance.get('language')).be.eql('Javascript');
+            second.click();
+            _context.next = 9;
+            return wait();
+
+          case 9:
+            expect(instance.get('language')).be.eql('C++');
+            first.click();
+            _context.next = 13;
+            return wait();
+
+          case 13:
+            expect(instance.get('language')).be.eql('Javascript');
+
+          case 14:
+          case "end":
+            return _context.stop();
+        }
+      }
+    }, _callee);
+  })));
+  it('should get value correctly which set trueValue', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee2() {
+    var _mount2, instance, element, _element$querySelecto2, first, second, third;
+
+    return _regeneratorRuntime.wrap(function _callee2$(_context2) {
+      while (1) {
+        switch (_context2.prev = _context2.next) {
+          case 0:
+            _mount2 = mount(ValueDemo), instance = _mount2[0], element = _mount2[1];
+            _element$querySelecto2 = element.querySelectorAll('.k-radio'), first = _element$querySelecto2[0], second = _element$querySelecto2[1], third = _element$querySelecto2[2];
+            first.click();
+            _context2.next = 5;
+            return wait();
+
+          case 5:
+            expect(instance.get('value1')).be.true;
+            second.click();
+            _context2.next = 9;
+            return wait();
+
+          case 9:
+            expect(instance.get('value2')).eql('checked');
+            third.click();
+            _context2.next = 13;
+            return wait();
+
+          case 13:
+            expect(instance.get('value3')).eql(instance.get('checkedValue'));
+
+          case 14:
+          case "end":
+            return _context2.stop();
+        }
+      }
+    }, _callee2);
+  })));
+  it('should check when press enter key for enabled radio', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee3() {
+    var _mount3, instance, element, _element$querySelecto3, first, second;
+
+    return _regeneratorRuntime.wrap(function _callee3$(_context3) {
+      while (1) {
+        switch (_context3.prev = _context3.next) {
+          case 0:
+            _mount3 = mount(BasicDemo), instance = _mount3[0], element = _mount3[1];
+            _element$querySelecto3 = element.querySelectorAll('.k-radio'), first = _element$querySelecto3[0], second = _element$querySelecto3[1];
+            dispatchEvent(first, 'keypress', {
+              keyCode: 13
+            });
+            _context3.next = 5;
+            return wait();
+
+          case 5:
+            expect(first.className).include('k-checked');
+            dispatchEvent(second, 'keypress', {
+              keyCode: 13
+            });
+            _context3.next = 9;
+            return wait();
+
+          case 9:
+            expect(second.className).not.include('k-checked');
+
+          case 10:
+          case "end":
+            return _context3.stop();
+        }
+      }
+    }, _callee3);
+  })));
+  it('should only trigger change event once', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee4() {
+    var spy, Demo, _mount4, instance, element, _element$querySelecto4, radio1, radio2, radio3;
+
+    return _regeneratorRuntime.wrap(function _callee4$(_context5) {
+      while (1) {
+        switch (_context5.prev = _context5.next) {
+          case 0:
+            spy = sinon.spy();
+
+            Demo = /*#__PURE__*/function (_Component) {
+              _inheritsLoose(Demo, _Component);
+
+              function Demo() {
+                var _context4;
+
+                var _this;
+
+                for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+                  args[_key] = arguments[_key];
+                }
+
+                _this = _Component.call.apply(_Component, _concatInstanceProperty(_context4 = [this]).call(_context4, args)) || this;
+                _this.Radio = Radio;
+
+                _this.onChange = function (v) {
+                  _this.set('value', v);
+
+                  spy(v);
+                };
+
+                return _this;
+              }
+
+              Demo.defaults = function defaults() {
+                return {
+                  value: 1
+                };
+              };
+
+              return Demo;
+            }(Component);
+
+            Demo.template = "\n                const {Radio} = this;\n                <div>\n                    <Radio v-for={[1, 2, 3]} \n                        trueValue={$value} \n                        name=\"name\"\n                        value={this.get('value')} \n                        ev-change={this.onChange}\n                        disabled={$value === 3}\n                    />\n                </div>\n            ";
+            _mount4 = mount(Demo), instance = _mount4[0], element = _mount4[1];
+            _element$querySelecto4 = element.querySelectorAll('.k-radio'), radio1 = _element$querySelecto4[0], radio2 = _element$querySelecto4[1], radio3 = _element$querySelecto4[2];
+            radio2.click();
+            _context5.next = 8;
+            return wait();
+
+          case 8:
+            expect(spy.callCount).to.eql(1);
+            expect(spy.calledWith(2)).to.eql(true);
+            radio2.click();
+            _context5.next = 13;
+            return wait();
+
+          case 13:
+            expect(spy.callCount).to.eql(1);
+            radio3.click();
+            _context5.next = 17;
+            return wait();
+
+          case 17:
+            expect(spy.callCount).to.eql(1);
+
+          case 18:
+          case "end":
+            return _context5.stop();
+        }
+      }
+    }, _callee4);
+  })));
+});
+
+export {normalize} from 'intact-react';

package/components/radio/index.vdt.js

@@ -0,0 +1,66 @@
+import _extends from "@babel/runtime-corejs3/helpers/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime-corejs3/helpers/objectWithoutPropertiesLoose";
+var _excluded = ["className", "disabled", "trueValue", "style", "children", "value", "ref", "key", "title"];
+import { createVNode as _$cv, className as _$cn, createElementVNode as _$ce } from 'intact-react';
+import { getRestProps } from '../utils';
+import { makeStyles } from './styles';
+export default function ($props, $blocks, $__proto__) {
+  var _classNameObj;
+
+  $blocks || ($blocks = {});
+  $props || ($props = {});
+  var $this = this;
+
+  var _this$get = this.get(),
+      className = _this$get.className,
+      disabled = _this$get.disabled,
+      trueValue = _this$get.trueValue,
+      style = _this$get.style,
+      children = _this$get.children,
+      value = _this$get.value,
+      ref = _this$get.ref,
+      key = _this$get.key,
+      title = _this$get.title,
+      rest = _objectWithoutPropertiesLoose(_this$get, _excluded);
+
+  var isChecked = value === trueValue;
+  var classNameObj = (_classNameObj = {
+    'k-radio': true,
+    'k-disabled': disabled,
+    'k-checked': isChecked
+  }, _classNameObj[className] = className, _classNameObj[makeStyles()] = true, _classNameObj); // let evClick;
+
+  var events = ['ev-click', 'ev-change', 'ev-mouseenter', 'ev-mouseleave'].reduce(function (memo, name) {
+    if (rest[name]) {
+      if (name === 'ev-click' || name === 'ev-change') {// don't bind click to label, otherwise it will trigger click event twice
+        // don't bind change to input, use click instead of, #448
+        // evClick = rest[name];
+      } else {
+        memo[name] = rest[name];
+      }
+
+      delete rest[name];
+    }
+
+    return memo;
+  }, {});
+  return _$cv('label', _extends({}, events, {
+    'className': _$cn(classNameObj),
+    'style': style,
+    'title': title,
+    'tabindex': disabled ? "-1" : "0",
+    'ev-keypress': this.onKeypress,
+    'ev-click': this.fixClick
+  }), [_$ce(2, 'span', _$cv('input', _extends({}, getRestProps(this, rest), {
+    'type': 'radio',
+    'disabled': disabled,
+    'value': trueValue,
+    'tabindex': '-1',
+    'ref': this.elementRef,
+    'checked': isChecked,
+    'ev-click': this.onClick
+  })), 2, 'k-radio-wrapper'), children ? _$ce(2, 'span', children, 0, 'k-radio-text') : undefined]);
+}
+;
+
+export {normalize} from 'intact-react';

package/components/radio/styles.d.ts

@@ -0,0 +1,5 @@
+import '../../styles/global';
+export declare function makeStyles(): string;
+
+
+export {normalize} from 'intact-react';

package/components/radio/styles.js

@@ -0,0 +1,49 @@
+import { css } from '@emotion/css';
+import { deepDefaults } from '../../styles/utils';
+import { theme, setDefault } from '../../styles/theme';
+import '../../styles/global';
+var defaults = {
+  width: '14px',
+
+  get borderColor() {
+    return theme.color.darkBorder;
+  },
+
+  bgColor: '#fff',
+  textGap: '8px',
+  innerWidth: '8px',
+
+  get checkedColor() {
+    return theme.color.primary;
+  },
+
+  disabled: {
+    get color() {
+      return theme.color.disabled;
+    },
+
+    get borderColor() {
+      return theme.color.disabledBorder;
+    },
+
+    get bgColor() {
+      return theme.color.disabledBg;
+    },
+
+    get innerColor() {
+      return theme.color.disabledBorder;
+    }
+
+  }
+};
+var radio;
+setDefault(function () {
+  radio = deepDefaults(theme, {
+    radio: defaults
+  }).radio;
+});
+export function makeStyles() {
+  return /*#__PURE__*/css("display:inline-flex;align-items:center;cursor:pointer;vertical-align:middle;.k-radio-wrapper{display:inline-block;width:", radio.width, ";height:", radio.width, ";vertical-align:middle;border:1px solid ", radio.borderColor, ";border-radius:50%;transition:all ", theme.transition, ";position:relative;background:", radio.bgColor, ";flex:0 0 auto;&:before{content:\"\";display:block;position:absolute;width:", radio.innerWidth, ";height:", radio.innerWidth, ";top:50%;left:50%;margin-left:calc(-", radio.innerWidth, " / 2);margin-top:calc(-", radio.innerWidth, " / 2);border-radius:50%;background-color:", radio.checkedColor, ";transform:scale(0);transition:all ", theme.transition, ";}}input{width:100%;height:100%;opacity:0;cursor:pointer;position:absolute;}.k-radio-text{vertical-align:middle;display:inline-block;margin-left:", radio.textGap, ";flex:0 1 auto;}&.k-checked{.k-radio-wrapper{border-color:", radio.checkedColor, ";&:before{transform:scale(1);}}}&:focus{outline:none;.k-radio-wrapper{border-color:", radio.checkedColor, ";}}&.k-disabled{color:", radio.disabled.color, ";cursor:not-allowed;.k-radio-wrapper{border-color:", radio.disabled.borderColor, ";background:", radio.disabled.bgColor, ";&:before{background:", radio.disabled.innerColor, ";}}input{cursor:not-allowed;}}");
+}
+
+export {normalize} from 'intact-react';

package/components/rate/index.d.ts

@@ -0,0 +1,25 @@
+import { Component, TypeDefs } from 'intact-react';
+import type { Events } from '../types';
+export interface RateProps {
+    value?: number;
+    count?: number;
+    disabled?: boolean;
+    half?: boolean;
+    clearable?: boolean;
+}
+export interface RateEvents {
+    mouseleave: [MouseEvent];
+}
+export interface RateBlocks {
+    icon: null;
+}
+export declare class Rate extends Component<RateProps, RateEvents, RateBlocks> {
+    static template: string | import("intact").Template<any>;
+    static typeDefs: Required<TypeDefs<RateProps>>;
+    static defaults: () => Partial<RateProps>;
+    static events: Events<RateEvents>;
+    private activeValue;
+}
+
+
+export {normalize} from 'intact-react';

package/components/rate/index.js

@@ -0,0 +1,48 @@
+import _inheritsLoose from "@babel/runtime-corejs3/helpers/inheritsLoose";
+import _concatInstanceProperty from "@babel/runtime-corejs3/core-js/instance/concat";
+import { Component } from 'intact-react';
+import template from './index.vdt';
+import { useActiveValue } from './useActiveValue';
+var typeDefs = {
+  value: Number,
+  count: Number,
+  disabled: Boolean,
+  half: Boolean,
+  clearable: Boolean
+};
+
+var defaults = function defaults() {
+  return {
+    value: 0,
+    count: 5
+  };
+};
+
+var events = {
+  mouseleave: true
+};
+export var Rate = /*#__PURE__*/function (_Component) {
+  _inheritsLoose(Rate, _Component);
+
+  function Rate() {
+    var _context;
+
+    var _this;
+
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+
+    _this = _Component.call.apply(_Component, _concatInstanceProperty(_context = [this]).call(_context, args)) || this;
+    _this.activeValue = useActiveValue();
+    return _this;
+  }
+
+  return Rate;
+}(Component);
+Rate.template = template;
+Rate.typeDefs = typeDefs;
+Rate.defaults = defaults;
+Rate.events = events;
+
+export {normalize} from 'intact-react';

package/components/rate/index.spec.d.ts

@@ -0,0 +1,4 @@
+export {};
+
+
+export {normalize} from 'intact-react';

package/components/rate/index.spec.js

@@ -0,0 +1,112 @@
+import _asyncToGenerator from "@babel/runtime-corejs3/helpers/asyncToGenerator";
+import _regeneratorRuntime from "@babel/runtime-corejs3/regenerator";
+import ClearableDemo from '~/components/rate/demos/clearable';
+import BasicDemo from '~/components/rate/demos/basic';
+import DisabledDemo from '~/components/rate/demos/disabled';
+import { mount, unmount, dispatchEvent, wait } from '../../test/utils';
+describe('Rate', function () {
+  afterEach(function () {
+    return unmount();
+  });
+  it('should change value on click', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
+    var _mount, instance, element, _element$querySelecto, rate1, rate2, _rate1$querySelectorA, first1, second1, _rate2$querySelectorA, first2, second2, first;
+
+    return _regeneratorRuntime.wrap(function _callee$(_context) {
+      while (1) {
+        switch (_context.prev = _context.next) {
+          case 0:
+            _mount = mount(BasicDemo), instance = _mount[0], element = _mount[1];
+            _element$querySelecto = element.querySelectorAll('.k-rate'), rate1 = _element$querySelecto[0], rate2 = _element$querySelecto[1];
+            _rate1$querySelectorA = rate1.querySelectorAll('.k-rate-item:nth-child(4) > div'), first1 = _rate1$querySelectorA[0], second1 = _rate1$querySelectorA[1];
+            first1.click();
+            expect(instance.get('value1')).to.eql(4);
+            second1.click();
+            expect(instance.get('value1')).to.eql(4); // should fix value
+
+            instance.set('value1', 3.5);
+            _context.next = 10;
+            return wait();
+
+          case 10:
+            expect(instance.get('value1')).to.eql(4); // half
+
+            _rate2$querySelectorA = rate2.querySelectorAll('.k-rate-item:nth-child(4) > div'), first2 = _rate2$querySelectorA[0], second2 = _rate2$querySelectorA[1];
+            first2.click();
+            expect(instance.get('value2')).to.eql(3.5);
+            second2.click();
+            expect(instance.get('value2')).to.eql(4); // enter
+
+            first = rate1.querySelector('.k-rate-first');
+            dispatchEvent(first, 'mouseenter');
+            _context.next = 20;
+            return wait();
+
+          case 20:
+            expect(rate1.querySelectorAll('.k-full')).to.have.lengthOf(1);
+            expect(rate1.innerHTML).to.matchSnapshot(); // leave
+
+            dispatchEvent(rate1, 'mouseleave');
+            _context.next = 25;
+            return wait();
+
+          case 25:
+            expect(rate1.querySelectorAll('.k-full')).to.have.lengthOf(4);
+            expect(rate1.innerHTML).to.matchSnapshot();
+
+          case 27:
+          case "end":
+            return _context.stop();
+        }
+      }
+    }, _callee);
+  })));
+  it('should clear value when click again on the clearable component', function () {
+    var _mount2 = mount(ClearableDemo),
+        instance = _mount2[0],
+        element = _mount2[1];
+
+    var first = element.querySelector('.k-rate-first');
+    first.click();
+    expect(instance.get('value')).to.eql(1);
+    first.click();
+    expect(instance.get('value')).to.eql(0);
+  });
+  it('disabled', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee2() {
+    var _mount3, instance, element, first;
+
+    return _regeneratorRuntime.wrap(function _callee2$(_context2) {
+      while (1) {
+        switch (_context2.prev = _context2.next) {
+          case 0:
+            _mount3 = mount(DisabledDemo), instance = _mount3[0], element = _mount3[1];
+            first = element.querySelector('.k-rate-first');
+            first.click();
+            _context2.next = 5;
+            return wait();
+
+          case 5:
+            expect(element.querySelectorAll('.k-full')).to.have.lengthOf(2);
+            dispatchEvent(first, 'mouseenter');
+            _context2.next = 9;
+            return wait();
+
+          case 9:
+            expect(element.querySelectorAll('.k-full')).to.have.lengthOf(2); // leave
+
+            dispatchEvent(element, 'mouseleave');
+            _context2.next = 13;
+            return wait();
+
+          case 13:
+            expect(element.querySelectorAll('.k-full')).to.have.lengthOf(2);
+
+          case 14:
+          case "end":
+            return _context2.stop();
+        }
+      }
+    }, _callee2);
+  })));
+});
+
+export {normalize} from 'intact-react';

package/components/rate/index.vdt.js

@@ -0,0 +1,76 @@
+import _extends from "@babel/runtime-corejs3/helpers/extends";
+import { createUnknownComponentVNode as _$cc, noop as _$no, createElementVNode as _$ce, className as _$cn, createTextVNode as _$ct, createVNode as _$cv } from 'intact-react';
+import { linkEvent } from 'intact';
+import { getRestProps } from '../utils';
+import { makeStyles } from './styles';
+import { Icon } from '../icon';
+var _$tmp0 = {
+  'className': 'ion-android-star'
+};
+export default function ($props, $blocks, $__proto__) {
+  var _classNameObj;
+
+  $blocks || ($blocks = {});
+  $props || ($props = {});
+  var $this = this;
+  var _$blocks = {};
+  var __$blocks = {};
+
+  var _this$get = this.get(),
+      className = _this$get.className,
+      count = _this$get.count,
+      disabled = _this$get.disabled,
+      half = _this$get.half;
+
+  var _this$activeValue = this.activeValue,
+      activeValue = _this$activeValue.activeValue,
+      onClick = _this$activeValue.onClick,
+      onMouseEnter = _this$activeValue.onMouseEnter,
+      onMouseLeaveComponent = _this$activeValue.onMouseLeaveComponent;
+  var classNameObj = (_classNameObj = {
+    'k-rate': true,
+    'k-disabled': disabled
+  }, _classNameObj[className] = className, _classNameObj[makeStyles()] = true, _classNameObj);
+  var icon = (_$blocks['icon'] = function ($super) {
+    return _$cc(Icon, _$tmp0);
+  }, __$blocks['icon'] = function ($super, data) {
+    var block = $blocks['icon'];
+
+    var callBlock = function callBlock() {
+      return _$blocks['icon'].call($this, $super, data);
+    };
+
+    return block ? block.call($this, callBlock, data) : callBlock();
+  }, __$blocks['icon'](_$no));
+
+  var rateIcon = function rateIcon(className, step) {
+    return _$ce(2, 'div', icon, 0, _$cn(className), {
+      'ev-click': linkEvent(step, onClick),
+      'ev-mouseenter': linkEvent(step, onMouseEnter)
+    });
+  };
+
+  var items = [];
+
+  for (var i = 0; i < count; i++) {
+    var _$cn2;
+
+    var _className = activeValue.value >= i + 1 ? 'k-full' : activeValue.value === i + 0.5 ? 'k-half' : null;
+
+    var halfStep = half ? i + 0.5 : i + 1;
+
+    var item = _$ce(2, 'div', [rateIcon("k-rate-first", halfStep), _$ct('\n            '), rateIcon("k-rate-second", i + 1)], 0, _$cn((_$cn2 = {
+      "k-rate-item": true
+    }, _$cn2[_className] = _className, _$cn2)));
+
+    items.push(item);
+  }
+
+  return _$cv('div', _extends({}, getRestProps(this), {
+    'className': _$cn(classNameObj),
+    'ev-mouseleave': onMouseLeaveComponent
+  }), items);
+}
+;
+
+export {normalize} from 'intact-react';

package/components/rate/styles.d.ts

@@ -0,0 +1,5 @@
+import '../../styles/global';
+export declare function makeStyles(): string;
+
+
+export {normalize} from 'intact-react';

package/components/rate/styles.js

@@ -0,0 +1,28 @@
+import { css } from '@emotion/css';
+import { theme, setDefault } from '../../styles/theme';
+import { deepDefaults } from '../../styles/utils';
+import '../../styles/global';
+var defaults = {
+  color: '#ccc',
+
+  get activeColor() {
+    return theme.color.warning;
+  },
+
+  iconFontSize: '24px',
+  item: {
+    gap: '8px',
+    hoverTransform: 'scale(1.1)'
+  }
+};
+var rate;
+setDefault(function () {
+  rate = deepDefaults(theme, {
+    rate: defaults
+  }).rate;
+});
+export function makeStyles() {
+  return /*#__PURE__*/css("display:inline-block;.k-rate-item{display:inline-block;margin-right:", rate.item.gap, ";cursor:pointer;position:relative;color:", rate.color, ";transition:all ", theme.transition, ";&:hover{transform:", rate.item.hoverTransform, ";}&.k-full{color:", rate.activeColor, ";}&.k-half{.k-rate-first{color:", rate.activeColor, ";}}}.k-rate-first{position:absolute;top:0;left:0;width:50%;height:100%;overflow:hidden;}.k-icon{font-size:", rate.iconFontSize, ";}&.k-disabled{.k-rate-item{cursor:default;&:hover{transform:none;}}}");
+}
+
+export {normalize} from 'intact-react';

package/components/rate/useActiveValue.d.ts

@@ -0,0 +1,9 @@
+export declare function useActiveValue(): {
+    activeValue: import("../../hooks/useState").State<number>;
+    onClick: (value: number) => void;
+    onMouseEnter: (value: number) => void;
+    onMouseLeaveComponent: (e: MouseEvent) => void;
+};
+
+
+export {normalize} from 'intact-react';

package/components/rate/useActiveValue.js

@@ -0,0 +1,42 @@
+import { useInstance } from 'intact-react';
+import { useState } from '../../hooks/useState';
+export function useActiveValue() {
+  var instance = useInstance();
+  var activeValue = useState(0);
+  instance.on('$receive:value', function (v) {
+    if (!instance.get('half')) v = Math.round(v);
+    instance.set('value', v);
+    activeValue.set(v);
+  });
+
+  function onClick(value) {
+    if (instance.get('disabled')) return; // clear the value when click again on the clearable component
+
+    if (instance.get('clearable') && instance.get('value') === value) {
+      value = 0;
+    }
+
+    instance.set('value', value);
+    activeValue.set(value);
+  }
+
+  function onMouseEnter(value) {
+    if (instance.get('disabled')) return;
+    activeValue.set(value);
+  }
+
+  function onMouseLeaveComponent(e) {
+    instance.trigger('mouseleave', e);
+    if (instance.get('disabled')) return;
+    activeValue.set(instance.get('value'));
+  }
+
+  return {
+    activeValue: activeValue,
+    onClick: onClick,
+    onMouseEnter: onMouseEnter,
+    onMouseLeaveComponent: onMouseLeaveComponent
+  };
+}
+
+export {normalize} from 'intact-react';