@arch-ui/controls - npm Package Compare versions

Comparing version 0.1.6 to 0.1.7

CHANGELOG.md

 # @arch-ui/controls
 
+## 0.1.7
+
+### Patch Changes
+
+- [`81822d67`](https://github.com/keystonejs/keystone/commit/81822d67822bdc77b360b709f2e824cc43d88f15) [#2731](https://github.com/keystonejs/keystone/pull/2731) Thanks [@Vultraz](https://github.com/Vultraz)! - Cleaned up Control component implementation.
+
 ## 0.1.6
@@ -77,3 +83,3 @@
 
-- Updated dependencies [7689753c](https://github.com/keystonejs/keystone-5/commit/7689753c):
+- Updated dependencies [7689753c](https://github.com/keystonejs/keystone/commit/7689753c):
   - @arch-ui/input@0.1.0
@@ -85,7 +91,7 @@
 
-- [42c3fbc9](https://github.com/keystonejs/keystone-5/commit/42c3fbc9): Upgrade emotion to 10.0.14
+- [42c3fbc9](https://github.com/keystonejs/keystone/commit/42c3fbc9): Upgrade emotion to 10.0.14
 
 ## 0.0.8
 
-- Updated dependencies [91fffa1e](https://github.com/keystonejs/keystone-5/commit/91fffa1e):
+- Updated dependencies [91fffa1e](https://github.com/keystonejs/keystone/commit/91fffa1e):
   - @arch-ui/input@0.0.8
@@ -97,3 +103,3 @@
 
-- [19fe6c1b](https://github.com/keystonejs/keystone-5/commit/19fe6c1b):
+- [19fe6c1b](https://github.com/keystonejs/keystone/commit/19fe6c1b):
 
@@ -104,3 +110,3 @@ Move frontmatter in docs into comments
 
-- Updated dependencies [d580c298](https://github.com/keystonejs/keystone-5/commit/d580c298):
+- Updated dependencies [d580c298](https://github.com/keystonejs/keystone/commit/d580c298):
   - @arch-ui/input@0.0.6
@@ -112,7 +118,7 @@
 
-- [81dc0be5](https://github.com/keystonejs/keystone-5/commit/81dc0be5):
+- [81dc0be5](https://github.com/keystonejs/keystone/commit/81dc0be5):
 
   - Update dependencies
 
-* Updated dependencies [81b481d0](https://github.com/keystonejs/keystone-5/commit/81b481d0):
+* Updated dependencies [81b481d0](https://github.com/keystonejs/keystone/commit/81b481d0):
   - @arch-ui/input@0.0.5
@@ -122,3 +128,3 @@
 
-- [patch][e75c105c](https://github.com/keystonejs/keystone-5/commit/e75c105c):
+- [patch][e75c105c](https://github.com/keystonejs/keystone/commit/e75c105c):
 
@@ -129,3 +135,3 @@ - admin revamp
 
-- [patch][7417ea3a](https://github.com/keystonejs/keystone-5/commit/7417ea3a):
+- [patch][7417ea3a](https://github.com/keystonejs/keystone/commit/7417ea3a):
 
@@ -132,0 +138,0 @@ - Update patch-level dependencies

dist/controls.cjs.dev.js

@@ -11,5 +11,4 @@ 'use strict';
 var reactRadios = require('react-radios');
+var _defineProperty = _interopDefault(require('@babel/runtime/helpers/defineProperty'));
 var _objectWithoutProperties = _interopDefault(require('@babel/runtime/helpers/objectWithoutProperties'));
-var _defineProperty = _interopDefault(require('@babel/runtime/helpers/defineProperty'));
-var memoize = _interopDefault(require('memoize-one'));
 var reactPseudoState = require('react-pseudo-state');
@@ -100,142 +99,132 @@ var styled = _interopDefault(require('@emotion/styled'));
 };
-class Control extends React.Component {
-  constructor(...args) {
-    super(...args);
+const Control = (_ref) => {
+  let {
+    checked = false,
+    children,
+    components: propComponents = {},
+    isDisabled = false,
+    isRequired,
+    name,
+    onChange,
+    icon: IconContent,
+    tabIndex,
+    type,
+    value,
+    id
+  } = _ref,
+      wrapperProps = _objectWithoutProperties(_ref, ["checked", "children", "components", "isDisabled", "isRequired", "name", "onChange", "icon", "tabIndex", "type", "value", "id"]);
 
-    _defineProperty(this, "cacheComponents", memoize(components => _objectSpread({}, defaultComponents, {}, components)));
-
-    _defineProperty(this, "getRef", ref => {
-      this.control = ref;
-    });
-  }
-
-  focus() {
-    if (this.control) this.control.focus();
-  }
-
-  blur() {
-    if (this.control) this.control.blur();
-  }
-
-  render() {
-    const _this$props = this.props,
-          {
-      checked,
-      children,
-      isDisabled,
-      isRequired,
-      name,
-      onChange,
-      svg,
-      tabIndex,
-      type,
-      value,
-      id
-    } = _this$props,
-          wrapperProps = _objectWithoutProperties(_this$props, ["checked", "children", "isDisabled", "isRequired", "name", "onChange", "svg", "tabIndex", "type", "value", "id"]);
-
-    const components = this.cacheComponents(this.props.components);
-    return React__default.createElement(components.Wrapper, wrapperProps, React__default.createElement(reactPseudoState.PseudoState, null, ({
-      onBlur,
-      onFocus,
-      onKeyDown,
-      onKeyUp,
+  const components = React.useMemo(() => _objectSpread({}, defaultComponents, {}, propComponents), [propComponents]);
+  return React__default.createElement(components.Wrapper, wrapperProps, React__default.createElement(reactPseudoState.PseudoState, null, ({
+    onBlur,
+    onFocus,
+    onKeyDown,
+    onKeyUp,
+    onMouseDown,
+    onMouseEnter,
+    onMouseLeave,
+    onMouseUp,
+    onTouchEnd,
+    onTouchStart
+  }, snapshot) => {
+    const labelHandlers = {
       onMouseDown,
+      onMouseUp,
       onMouseEnter,
       onMouseLeave,
-      onMouseUp,
       onTouchEnd,
       onTouchStart
-    }, snapshot) => {
-      const labelHandlers = {
-        onMouseDown,
-        onMouseUp,
-        onMouseEnter,
-        onMouseLeave,
-        onTouchEnd,
-        onTouchStart
-      };
-      const inputHandlers = {
-        onBlur,
-        onChange,
-        onFocus,
-        onKeyDown,
-        onKeyUp
-      };
+    };
+    const inputHandlers = {
+      onBlur,
+      onChange,
+      onFocus,
+      onKeyDown,
+      onKeyUp
+    };
 
-      const iconProps = _objectSpread({}, snapshot, {
-        checked,
-        isDisabled
-      });
+    const iconProps = _objectSpread({}, snapshot, {
+      checked,
+      isDisabled
+    });
 
-      return React__default.createElement(components.Label, _extends({
-        isChecked: checked,
-        isDisabled: isDisabled
-      }, labelHandlers), React__default.createElement(input.HiddenInput, _extends({}, inputHandlers, {
-        checked: checked,
-        disabled: isDisabled,
-        innerRef: this.getRef,
-        name: name,
-        required: isRequired,
-        tabIndex: tabIndex,
-        type: type,
-        value: value,
-        id: id
-      })), React__default.createElement(Icon, iconProps, React__default.createElement(Svg, {
-        html: svg
-      })), children ? React__default.createElement(components.Text, null, children) : null);
-    }));
-  }
-
-}
-
-_defineProperty(Control, "defaultProps", {
-  checked: false,
-  components: {},
-  isDisabled: false
-});
-
-const Svg = (_ref) => {
-  let {
-    html
-  } = _ref,
-      props = _objectWithoutProperties(_ref, ["html"]);
-
-  return React__default.createElement("svg", _extends({
-    dangerouslySetInnerHTML: {
-      __html: html
-    },
-    focusable: "false",
-    height: "24",
-    role: "presentation",
-    viewBox: "0 0 24 24",
-    width: "24"
-  }, props));
+    return React__default.createElement(components.Label, _extends({
+      isChecked: checked,
+      isDisabled: isDisabled
+    }, labelHandlers), React__default.createElement(input.HiddenInput, _extends({}, inputHandlers, {
+      checked: checked,
+      disabled: isDisabled,
+      name: name,
+      required: isRequired,
+      tabIndex: tabIndex,
+      type: type,
+      value: value,
+      id: id
+    })), React__default.createElement(Icon, iconProps, React__default.createElement(IconContent, null)), children ? React__default.createElement(components.Text, null, children) : null);
+  }));
 };
 
-const CheckboxPrimitive = (_ref) => {
-  let {
-    innerRef
-  } = _ref,
-      props = _objectWithoutProperties(_ref, ["innerRef"]);
+const CheckboxIcon = React.memo(props => React.createElement("svg", _extends({
+  focusable: "false",
+  height: "24",
+  role: "presentation",
+  viewBox: "0 0 24 24",
+  width: "24"
+}, props), React.createElement("g", {
+  fillRule: "evenodd"
+}, React.createElement("rect", {
+  className: "outer-stroke",
+  fill: "transparent",
+  x: "6",
+  y: "6",
+  width: "12",
+  height: "12",
+  rx: "2"
+}), React.createElement("rect", {
+  className: "inner-stroke",
+  fill: "currentColor",
+  x: "6",
+  y: "6",
+  width: "12",
+  height: "12",
+  rx: "2"
+}), React.createElement("path", {
+  d: "M9.707 11.293a1 1 0 1 0-1.414 1.414l2 2a1 1 0 0 0 1.414 0l4-4a1 1 0 1 0-1.414-1.414L11 12.586l-1.293-1.293z",
+  fill: "inherit"
+}))));
+const RadioIcon = React.memo(props => React.createElement("svg", _extends({
+  focusable: "false",
+  height: "24",
+  role: "presentation",
+  viewBox: "0 0 24 24",
+  width: "24"
+}, props), React.createElement("g", {
+  fillRule: "evenodd"
+}, React.createElement("circle", {
+  className: "outer-stroke",
+  fill: "transparent",
+  cx: "12",
+  cy: "12",
+  r: "7"
+}), React.createElement("circle", {
+  className: "inner-stroke",
+  fill: "currentColor",
+  cx: "12",
+  cy: "12",
+  r: "7"
+}), React.createElement("circle", {
+  fill: "inherit",
+  cx: "12",
+  cy: "12",
+  r: "2"
+}))));
+const CheckboxPrimitive = props => React.createElement(Control, _extends({
+  icon: CheckboxIcon,
+  type: "checkbox"
+}, props));
+const RadioPrimitive = props => React.createElement(Control, _extends({
+  icon: RadioIcon,
+  type: "radio"
+}, props));
 
-  return React.createElement(Control, _extends({
-    ref: innerRef,
-    svg: "<g fillRule=\"evenodd\">\n      <rect class=\"outer-stroke\" fill=\"transparent\" x=\"6\" y=\"6\" width=\"12\" height=\"12\" rx=\"2\" />\n      <rect class=\"inner-stroke\" fill=\"currentColor\" x=\"6\" y=\"6\" width=\"12\" height=\"12\" rx=\"2\" />\n      <path\n        d=\"M9.707 11.293a1 1 0 1 0-1.414 1.414l2 2a1 1 0 0 0 1.414 0l4-4a1 1 0 1 0-1.414-1.414L11 12.586l-1.293-1.293z\"\n        fill=\"inherit\"\n      />\n    </g>",
-    type: "checkbox"
-  }, props));
-};
-const RadioPrimitive = (_ref2) => {
-  let {
-    innerRef
-  } = _ref2,
-      props = _objectWithoutProperties(_ref2, ["innerRef"]);
-
-  return React.createElement(Control, _extends({
-    ref: innerRef,
-    svg: "<g fillRule=\"evenodd\">\n    <circle class=\"outer-stroke\" fill=\"transparent\" cx=\"12\" cy=\"12\" r=\"7\" />\n    <circle class=\"inner-stroke\" fill=\"currentColor\" cx=\"12\" cy=\"12\" r=\"7\" />\n    <circle fill=\"inherit\" cx=\"12\" cy=\"12\" r=\"2\" />\n  </g>",
-    type: "radio"
-  }, props));
-};
-
 const Checkbox = props => React__default.createElement(reactRadios.Checkbox, _extends({
@@ -242,0 +231,0 @@ component: CheckboxPrimitive

dist/controls.cjs.prod.js

@@ -11,3 +11,3 @@ "use strict";
 
-var _extends = _interopDefault(require("@babel/runtime/helpers/extends")), React = require("react"), React__default = _interopDefault(React), reactRadios = require("react-radios"), _objectWithoutProperties = _interopDefault(require("@babel/runtime/helpers/objectWithoutProperties")), _defineProperty = _interopDefault(require("@babel/runtime/helpers/defineProperty")), memoize = _interopDefault(require("memoize-one")), reactPseudoState = require("react-pseudo-state"), styled = _interopDefault(require("@emotion/styled")), theme = require("@arch-ui/theme"), input = require("@arch-ui/input");
+var _extends = _interopDefault(require("@babel/runtime/helpers/extends")), React = require("react"), React__default = _interopDefault(React), reactRadios = require("react-radios"), _defineProperty = _interopDefault(require("@babel/runtime/helpers/defineProperty")), _objectWithoutProperties = _interopDefault(require("@babel/runtime/helpers/objectWithoutProperties")), reactPseudoState = require("react-pseudo-state"), styled = _interopDefault(require("@emotion/styled")), theme = require("@arch-ui/theme"), input = require("@arch-ui/input");
 
@@ -72,90 +72,96 @@ function ownKeys(object, enumerableOnly) {
   Text: Text
-};
-
-class Control extends React.Component {
-  constructor(...args) {
-    super(...args), _defineProperty(this, "cacheComponents", memoize(components => _objectSpread({}, defaultComponents, {}, components))), 
-    _defineProperty(this, "getRef", ref => {
-      this.control = ref;
+}, Control = _ref => {
+  let {checked: checked = !1, children: children, components: propComponents = {}, isDisabled: isDisabled = !1, isRequired: isRequired, name: name, onChange: onChange, icon: IconContent, tabIndex: tabIndex, type: type, value: value, id: id} = _ref, wrapperProps = _objectWithoutProperties(_ref, [ "checked", "children", "components", "isDisabled", "isRequired", "name", "onChange", "icon", "tabIndex", "type", "value", "id" ]);
+  const components = React.useMemo(() => _objectSpread({}, defaultComponents, {}, propComponents), [ propComponents ]);
+  return React__default.createElement(components.Wrapper, wrapperProps, React__default.createElement(reactPseudoState.PseudoState, null, ({onBlur: onBlur, onFocus: onFocus, onKeyDown: onKeyDown, onKeyUp: onKeyUp, onMouseDown: onMouseDown, onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave, onMouseUp: onMouseUp, onTouchEnd: onTouchEnd, onTouchStart: onTouchStart}, snapshot) => {
+    const labelHandlers = {
+      onMouseDown: onMouseDown,
+      onMouseUp: onMouseUp,
+      onMouseEnter: onMouseEnter,
+      onMouseLeave: onMouseLeave,
+      onTouchEnd: onTouchEnd,
+      onTouchStart: onTouchStart
+    }, inputHandlers = {
+      onBlur: onBlur,
+      onChange: onChange,
+      onFocus: onFocus,
+      onKeyDown: onKeyDown,
+      onKeyUp: onKeyUp
+    }, iconProps = _objectSpread({}, snapshot, {
+      checked: checked,
+      isDisabled: isDisabled
     });
-  }
-  focus() {
-    this.control && this.control.focus();
-  }
-  blur() {
-    this.control && this.control.blur();
-  }
-  render() {
-    const _this$props = this.props, {checked: checked, children: children, isDisabled: isDisabled, isRequired: isRequired, name: name, onChange: onChange, svg: svg, tabIndex: tabIndex, type: type, value: value, id: id} = _this$props, wrapperProps = _objectWithoutProperties(_this$props, [ "checked", "children", "isDisabled", "isRequired", "name", "onChange", "svg", "tabIndex", "type", "value", "id" ]), components = this.cacheComponents(this.props.components);
-    return React__default.createElement(components.Wrapper, wrapperProps, React__default.createElement(reactPseudoState.PseudoState, null, ({onBlur: onBlur, onFocus: onFocus, onKeyDown: onKeyDown, onKeyUp: onKeyUp, onMouseDown: onMouseDown, onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave, onMouseUp: onMouseUp, onTouchEnd: onTouchEnd, onTouchStart: onTouchStart}, snapshot) => {
-      const labelHandlers = {
-        onMouseDown: onMouseDown,
-        onMouseUp: onMouseUp,
-        onMouseEnter: onMouseEnter,
-        onMouseLeave: onMouseLeave,
-        onTouchEnd: onTouchEnd,
-        onTouchStart: onTouchStart
-      }, inputHandlers = {
-        onBlur: onBlur,
-        onChange: onChange,
-        onFocus: onFocus,
-        onKeyDown: onKeyDown,
-        onKeyUp: onKeyUp
-      }, iconProps = _objectSpread({}, snapshot, {
-        checked: checked,
-        isDisabled: isDisabled
-      });
-      return React__default.createElement(components.Label, _extends({
-        isChecked: checked,
-        isDisabled: isDisabled
-      }, labelHandlers), React__default.createElement(input.HiddenInput, _extends({}, inputHandlers, {
-        checked: checked,
-        disabled: isDisabled,
-        innerRef: this.getRef,
-        name: name,
-        required: isRequired,
-        tabIndex: tabIndex,
-        type: type,
-        value: value,
-        id: id
-      })), React__default.createElement(Icon, iconProps, React__default.createElement(Svg, {
-        html: svg
-      })), children ? React__default.createElement(components.Text, null, children) : null);
-    }));
-  }
-}
-
-_defineProperty(Control, "defaultProps", {
-  checked: !1,
-  components: {},
-  isDisabled: !1
-});
-
-const Svg = _ref => {
-  let {html: html} = _ref, props = _objectWithoutProperties(_ref, [ "html" ]);
-  return React__default.createElement("svg", _extends({
-    dangerouslySetInnerHTML: {
-      __html: html
-    },
-    focusable: "false",
-    height: "24",
-    role: "presentation",
-    viewBox: "0 0 24 24",
-    width: "24"
-  }, props));
-}, CheckboxPrimitive = _ref => {
-  let {innerRef: innerRef} = _ref, props = _objectWithoutProperties(_ref, [ "innerRef" ]);
-  return React.createElement(Control, _extends({
-    ref: innerRef,
-    svg: '<g fillRule="evenodd">\n      <rect class="outer-stroke" fill="transparent" x="6" y="6" width="12" height="12" rx="2" />\n      <rect class="inner-stroke" fill="currentColor" x="6" y="6" width="12" height="12" rx="2" />\n      <path\n        d="M9.707 11.293a1 1 0 1 0-1.414 1.414l2 2a1 1 0 0 0 1.414 0l4-4a1 1 0 1 0-1.414-1.414L11 12.586l-1.293-1.293z"\n        fill="inherit"\n      />\n    </g>',
-    type: "checkbox"
-  }, props));
-}, RadioPrimitive = _ref2 => {
-  let {innerRef: innerRef} = _ref2, props = _objectWithoutProperties(_ref2, [ "innerRef" ]);
-  return React.createElement(Control, _extends({
-    ref: innerRef,
-    svg: '<g fillRule="evenodd">\n    <circle class="outer-stroke" fill="transparent" cx="12" cy="12" r="7" />\n    <circle class="inner-stroke" fill="currentColor" cx="12" cy="12" r="7" />\n    <circle fill="inherit" cx="12" cy="12" r="2" />\n  </g>',
-    type: "radio"
-  }, props));
-}, Checkbox = props => React__default.createElement(reactRadios.Checkbox, _extends({
+    return React__default.createElement(components.Label, _extends({
+      isChecked: checked,
+      isDisabled: isDisabled
+    }, labelHandlers), React__default.createElement(input.HiddenInput, _extends({}, inputHandlers, {
+      checked: checked,
+      disabled: isDisabled,
+      name: name,
+      required: isRequired,
+      tabIndex: tabIndex,
+      type: type,
+      value: value,
+      id: id
+    })), React__default.createElement(Icon, iconProps, React__default.createElement(IconContent, null)), children ? React__default.createElement(components.Text, null, children) : null);
+  }));
+}, CheckboxIcon = React.memo(props => React.createElement("svg", _extends({
+  focusable: "false",
+  height: "24",
+  role: "presentation",
+  viewBox: "0 0 24 24",
+  width: "24"
+}, props), React.createElement("g", {
+  fillRule: "evenodd"
+}, React.createElement("rect", {
+  className: "outer-stroke",
+  fill: "transparent",
+  x: "6",
+  y: "6",
+  width: "12",
+  height: "12",
+  rx: "2"
+}), React.createElement("rect", {
+  className: "inner-stroke",
+  fill: "currentColor",
+  x: "6",
+  y: "6",
+  width: "12",
+  height: "12",
+  rx: "2"
+}), React.createElement("path", {
+  d: "M9.707 11.293a1 1 0 1 0-1.414 1.414l2 2a1 1 0 0 0 1.414 0l4-4a1 1 0 1 0-1.414-1.414L11 12.586l-1.293-1.293z",
+  fill: "inherit"
+})))), RadioIcon = React.memo(props => React.createElement("svg", _extends({
+  focusable: "false",
+  height: "24",
+  role: "presentation",
+  viewBox: "0 0 24 24",
+  width: "24"
+}, props), React.createElement("g", {
+  fillRule: "evenodd"
+}, React.createElement("circle", {
+  className: "outer-stroke",
+  fill: "transparent",
+  cx: "12",
+  cy: "12",
+  r: "7"
+}), React.createElement("circle", {
+  className: "inner-stroke",
+  fill: "currentColor",
+  cx: "12",
+  cy: "12",
+  r: "7"
+}), React.createElement("circle", {
+  fill: "inherit",
+  cx: "12",
+  cy: "12",
+  r: "2"
+})))), CheckboxPrimitive = props => React.createElement(Control, _extends({
+  icon: CheckboxIcon,
+  type: "checkbox"
+}, props)), RadioPrimitive = props => React.createElement(Control, _extends({
+  icon: RadioIcon,
+  type: "radio"
+}, props)), Checkbox = props => React__default.createElement(reactRadios.Checkbox, _extends({
   component: CheckboxPrimitive
@@ -162,0 +168,0 @@ }, props)), CheckboxGroup = props => React__default.createElement(reactRadios.CheckboxGroup, props), Radio = props => React__default.createElement(reactRadios.Radio, _extends({

dist/controls.esm.js

 import _extends from '@babel/runtime/helpers/esm/extends';
-import React__default, { Component, createElement } from 'react';
+import React__default, { useMemo, memo, createElement } from 'react';
 import { Checkbox as Checkbox$1, CheckboxGroup as CheckboxGroup$1, Radio as Radio$1, RadioGroup as RadioGroup$1 } from 'react-radios';
+import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
 import _objectWithoutProperties from '@babel/runtime/helpers/esm/objectWithoutProperties';
-import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
-import memoize from 'memoize-one';
 import { PseudoState } from 'react-pseudo-state';
@@ -92,142 +91,132 @@ import styled from '@emotion/styled';
 };
-class Control extends Component {
-  constructor(...args) {
-    super(...args);
+const Control = (_ref) => {
+  let {
+    checked = false,
+    children,
+    components: propComponents = {},
+    isDisabled = false,
+    isRequired,
+    name,
+    onChange,
+    icon: IconContent,
+    tabIndex,
+    type,
+    value,
+    id
+  } = _ref,
+      wrapperProps = _objectWithoutProperties(_ref, ["checked", "children", "components", "isDisabled", "isRequired", "name", "onChange", "icon", "tabIndex", "type", "value", "id"]);
 
-    _defineProperty(this, "cacheComponents", memoize(components => _objectSpread({}, defaultComponents, {}, components)));
-
-    _defineProperty(this, "getRef", ref => {
-      this.control = ref;
-    });
-  }
-
-  focus() {
-    if (this.control) this.control.focus();
-  }
-
-  blur() {
-    if (this.control) this.control.blur();
-  }
-
-  render() {
-    const _this$props = this.props,
-          {
-      checked,
-      children,
-      isDisabled,
-      isRequired,
-      name,
-      onChange,
-      svg,
-      tabIndex,
-      type,
-      value,
-      id
-    } = _this$props,
-          wrapperProps = _objectWithoutProperties(_this$props, ["checked", "children", "isDisabled", "isRequired", "name", "onChange", "svg", "tabIndex", "type", "value", "id"]);
-
-    const components = this.cacheComponents(this.props.components);
-    return React__default.createElement(components.Wrapper, wrapperProps, React__default.createElement(PseudoState, null, ({
-      onBlur,
-      onFocus,
-      onKeyDown,
-      onKeyUp,
+  const components = useMemo(() => _objectSpread({}, defaultComponents, {}, propComponents), [propComponents]);
+  return React__default.createElement(components.Wrapper, wrapperProps, React__default.createElement(PseudoState, null, ({
+    onBlur,
+    onFocus,
+    onKeyDown,
+    onKeyUp,
+    onMouseDown,
+    onMouseEnter,
+    onMouseLeave,
+    onMouseUp,
+    onTouchEnd,
+    onTouchStart
+  }, snapshot) => {
+    const labelHandlers = {
       onMouseDown,
+      onMouseUp,
       onMouseEnter,
       onMouseLeave,
-      onMouseUp,
       onTouchEnd,
       onTouchStart
-    }, snapshot) => {
-      const labelHandlers = {
-        onMouseDown,
-        onMouseUp,
-        onMouseEnter,
-        onMouseLeave,
-        onTouchEnd,
-        onTouchStart
-      };
-      const inputHandlers = {
-        onBlur,
-        onChange,
-        onFocus,
-        onKeyDown,
-        onKeyUp
-      };
+    };
+    const inputHandlers = {
+      onBlur,
+      onChange,
+      onFocus,
+      onKeyDown,
+      onKeyUp
+    };
 
-      const iconProps = _objectSpread({}, snapshot, {
-        checked,
-        isDisabled
-      });
+    const iconProps = _objectSpread({}, snapshot, {
+      checked,
+      isDisabled
+    });
 
-      return React__default.createElement(components.Label, _extends({
-        isChecked: checked,
-        isDisabled: isDisabled
-      }, labelHandlers), React__default.createElement(HiddenInput, _extends({}, inputHandlers, {
-        checked: checked,
-        disabled: isDisabled,
-        innerRef: this.getRef,
-        name: name,
-        required: isRequired,
-        tabIndex: tabIndex,
-        type: type,
-        value: value,
-        id: id
-      })), React__default.createElement(Icon, iconProps, React__default.createElement(Svg, {
-        html: svg
-      })), children ? React__default.createElement(components.Text, null, children) : null);
-    }));
-  }
-
-}
-
-_defineProperty(Control, "defaultProps", {
-  checked: false,
-  components: {},
-  isDisabled: false
-});
-
-const Svg = (_ref) => {
-  let {
-    html
-  } = _ref,
-      props = _objectWithoutProperties(_ref, ["html"]);
-
-  return React__default.createElement("svg", _extends({
-    dangerouslySetInnerHTML: {
-      __html: html
-    },
-    focusable: "false",
-    height: "24",
-    role: "presentation",
-    viewBox: "0 0 24 24",
-    width: "24"
-  }, props));
+    return React__default.createElement(components.Label, _extends({
+      isChecked: checked,
+      isDisabled: isDisabled
+    }, labelHandlers), React__default.createElement(HiddenInput, _extends({}, inputHandlers, {
+      checked: checked,
+      disabled: isDisabled,
+      name: name,
+      required: isRequired,
+      tabIndex: tabIndex,
+      type: type,
+      value: value,
+      id: id
+    })), React__default.createElement(Icon, iconProps, React__default.createElement(IconContent, null)), children ? React__default.createElement(components.Text, null, children) : null);
+  }));
 };
 
-const CheckboxPrimitive = (_ref) => {
-  let {
-    innerRef
-  } = _ref,
-      props = _objectWithoutProperties(_ref, ["innerRef"]);
+const CheckboxIcon = memo(props => createElement("svg", _extends({
+  focusable: "false",
+  height: "24",
+  role: "presentation",
+  viewBox: "0 0 24 24",
+  width: "24"
+}, props), createElement("g", {
+  fillRule: "evenodd"
+}, createElement("rect", {
+  className: "outer-stroke",
+  fill: "transparent",
+  x: "6",
+  y: "6",
+  width: "12",
+  height: "12",
+  rx: "2"
+}), createElement("rect", {
+  className: "inner-stroke",
+  fill: "currentColor",
+  x: "6",
+  y: "6",
+  width: "12",
+  height: "12",
+  rx: "2"
+}), createElement("path", {
+  d: "M9.707 11.293a1 1 0 1 0-1.414 1.414l2 2a1 1 0 0 0 1.414 0l4-4a1 1 0 1 0-1.414-1.414L11 12.586l-1.293-1.293z",
+  fill: "inherit"
+}))));
+const RadioIcon = memo(props => createElement("svg", _extends({
+  focusable: "false",
+  height: "24",
+  role: "presentation",
+  viewBox: "0 0 24 24",
+  width: "24"
+}, props), createElement("g", {
+  fillRule: "evenodd"
+}, createElement("circle", {
+  className: "outer-stroke",
+  fill: "transparent",
+  cx: "12",
+  cy: "12",
+  r: "7"
+}), createElement("circle", {
+  className: "inner-stroke",
+  fill: "currentColor",
+  cx: "12",
+  cy: "12",
+  r: "7"
+}), createElement("circle", {
+  fill: "inherit",
+  cx: "12",
+  cy: "12",
+  r: "2"
+}))));
+const CheckboxPrimitive = props => createElement(Control, _extends({
+  icon: CheckboxIcon,
+  type: "checkbox"
+}, props));
+const RadioPrimitive = props => createElement(Control, _extends({
+  icon: RadioIcon,
+  type: "radio"
+}, props));
 
-  return createElement(Control, _extends({
-    ref: innerRef,
-    svg: "<g fillRule=\"evenodd\">\n      <rect class=\"outer-stroke\" fill=\"transparent\" x=\"6\" y=\"6\" width=\"12\" height=\"12\" rx=\"2\" />\n      <rect class=\"inner-stroke\" fill=\"currentColor\" x=\"6\" y=\"6\" width=\"12\" height=\"12\" rx=\"2\" />\n      <path\n        d=\"M9.707 11.293a1 1 0 1 0-1.414 1.414l2 2a1 1 0 0 0 1.414 0l4-4a1 1 0 1 0-1.414-1.414L11 12.586l-1.293-1.293z\"\n        fill=\"inherit\"\n      />\n    </g>",
-    type: "checkbox"
-  }, props));
-};
-const RadioPrimitive = (_ref2) => {
-  let {
-    innerRef
-  } = _ref2,
-      props = _objectWithoutProperties(_ref2, ["innerRef"]);
-
-  return createElement(Control, _extends({
-    ref: innerRef,
-    svg: "<g fillRule=\"evenodd\">\n    <circle class=\"outer-stroke\" fill=\"transparent\" cx=\"12\" cy=\"12\" r=\"7\" />\n    <circle class=\"inner-stroke\" fill=\"currentColor\" cx=\"12\" cy=\"12\" r=\"7\" />\n    <circle fill=\"inherit\" cx=\"12\" cy=\"12\" r=\"2\" />\n  </g>",
-    type: "radio"
-  }, props));
-};
-
 const Checkbox = props => React__default.createElement(Checkbox$1, _extends({
@@ -234,0 +223,0 @@ component: CheckboxPrimitive

package.json

 {
   "name": "@arch-ui/controls",
   "description": "Form Controls as used in @keystonejs Admin UI.",
-  "version": "0.1.6",
+  "version": "0.1.7",
   "author": "Jed Watson",
@@ -20,3 +20,2 @@ "license": "MIT",
     "@emotion/styled": "^10.0.27",
-    "memoize-one": "^5.1.1",
     "react-pseudo-state": "^2.2.2",
@@ -23,0 +22,0 @@ "react-radios": "^1.1.0"

src/control.js

@@ -1,3 +0,2 @@
-import React, { Component } from 'react';
-import memoize from 'memoize-one';
+import React, { useMemo } from 'react';
 import { PseudoState } from 'react-pseudo-state';
@@ -13,2 +12,3 @@ import styled from '@emotion/styled';
 });
+
 const Label = styled.label({
@@ -19,2 +19,3 @@ alignItems: 'center',
 });
+
 const Text = 'span';
@@ -78,106 +79,77 @@
 
-export class Control extends Component {
-  static defaultProps = {
-    checked: false,
-    components: {},
-    isDisabled: false,
-  };
-  cacheComponents = memoize(components => ({
-    ...defaultComponents,
-    ...components,
-  }));
+export const Control = ({
+  checked = false,
+  children,
+  components: propComponents = {},
+  isDisabled = false,
+  isRequired,
+  name,
+  onChange,
+  icon: IconContent,
+  tabIndex,
+  type,
+  value,
+  id,
+  ...wrapperProps
+}) => {
+  const components = useMemo(
+    () => ({
+      ...defaultComponents,
+      ...propComponents,
+    }),
+    [propComponents]
+  );
 
-  focus() {
-    if (this.control) this.control.focus();
-  }
-  blur() {
-    if (this.control) this.control.blur();
-  }
-  getRef = ref => {
-    this.control = ref;
-  };
+  return (
+    <components.Wrapper {...wrapperProps}>
+      <PseudoState>
+        {(
+          {
+            onBlur,
+            onFocus,
+            onKeyDown,
+            onKeyUp,
+            onMouseDown,
+            onMouseEnter,
+            onMouseLeave,
+            onMouseUp,
+            onTouchEnd,
+            onTouchStart,
+          },
+          snapshot
+        ) => {
+          const labelHandlers = {
+            onMouseDown,
+            onMouseUp,
+            onMouseEnter,
+            onMouseLeave,
+            onTouchEnd,
+            onTouchStart,
+          };
+          const inputHandlers = { onBlur, onChange, onFocus, onKeyDown, onKeyUp };
+          const iconProps = { ...snapshot, checked, isDisabled };
 
-  render() {
-    const {
-      checked,
-      children,
-      isDisabled,
-      isRequired,
-      name,
-      onChange,
-      svg,
-      tabIndex,
-      type,
-      value,
-      id,
-      ...wrapperProps
-    } = this.props;
-    const components = this.cacheComponents(this.props.components);
-
-    return (
-      <components.Wrapper {...wrapperProps}>
-        <PseudoState>
-          {(
-            {
-              onBlur,
-              onFocus,
-              onKeyDown,
-              onKeyUp,
-              onMouseDown,
-              onMouseEnter,
-              onMouseLeave,
-              onMouseUp,
-              onTouchEnd,
-              onTouchStart,
-            },
-            snapshot
-          ) => {
-            const labelHandlers = {
-              onMouseDown,
-              onMouseUp,
-              onMouseEnter,
-              onMouseLeave,
-              onTouchEnd,
-              onTouchStart,
-            };
-            const inputHandlers = { onBlur, onChange, onFocus, onKeyDown, onKeyUp };
-            const iconProps = { ...snapshot, checked, isDisabled };
-
-            return (
-              <components.Label isChecked={checked} isDisabled={isDisabled} {...labelHandlers}>
-                <HiddenInput
-                  {...inputHandlers}
-                  checked={checked}
-                  disabled={isDisabled}
-                  innerRef={this.getRef}
-                  name={name}
-                  required={isRequired}
-                  tabIndex={tabIndex}
-                  type={type}
-                  value={value}
-                  id={id}
-                />
-                <Icon {...iconProps}>
-                  <Svg html={svg} />
-                </Icon>
-                {children ? <components.Text>{children}</components.Text> : null}
-              </components.Label>
-            );
-          }}
-        </PseudoState>
-      </components.Wrapper>
-    );
-  }
-}
-
-const Svg = ({ html, ...props }) => (
-  <svg
-    dangerouslySetInnerHTML={{ __html: html }}
-    focusable="false"
-    height="24"
-    role="presentation"
-    viewBox="0 0 24 24"
-    width="24"
-    {...props}
-  />
-);
+          return (
+            <components.Label isChecked={checked} isDisabled={isDisabled} {...labelHandlers}>
+              <HiddenInput
+                {...inputHandlers}
+                checked={checked}
+                disabled={isDisabled}
+                name={name}
+                required={isRequired}
+                tabIndex={tabIndex}
+                type={type}
+                value={value}
+                id={id}
+              />
+              <Icon {...iconProps}>
+                <IconContent />
+              </Icon>
+              {children ? <components.Text>{children}</components.Text> : null}
+            </components.Label>
+          );
+        }}
+      </PseudoState>
+    </components.Wrapper>
+  );
+};

src/primitives.js

 import * as React from 'react';
 import { Control } from './control';
 
-export const CheckboxPrimitive = ({ innerRef, ...props }) => (
-  <Control
-    ref={innerRef}
-    svg={`<g fillRule="evenodd">
-      <rect class="outer-stroke" fill="transparent" x="6" y="6" width="12" height="12" rx="2" />
-      <rect class="inner-stroke" fill="currentColor" x="6" y="6" width="12" height="12" rx="2" />
+const CheckboxIcon = React.memo(props => (
+  <svg focusable="false" height="24" role="presentation" viewBox="0 0 24 24" width="24" {...props}>
+    <g fillRule="evenodd">
+      <rect className="outer-stroke" fill="transparent" x="6" y="6" width="12" height="12" rx="2" />
+      <rect
+        className="inner-stroke"
+        fill="currentColor"
+        x="6"
+        y="6"
+        width="12"
+        height="12"
+        rx="2"
+      />
       <path
@@ -14,19 +21,20 @@ d="M9.707 11.293a1 1 0 1 0-1.414 1.414l2 2a1 1 0 0 0 1.414 0l4-4a1 1 0 1 0-1.414-1.414L11 12.586l-1.293-1.293z"
       />
-    </g>`}
-    type="checkbox"
-    {...props}
-  />
+    </g>
+  </svg>
+));
+
+const RadioIcon = React.memo(props => (
+  <svg focusable="false" height="24" role="presentation" viewBox="0 0 24 24" width="24" {...props}>
+    <g fillRule="evenodd">
+      <circle className="outer-stroke" fill="transparent" cx="12" cy="12" r="7" />
+      <circle className="inner-stroke" fill="currentColor" cx="12" cy="12" r="7" />
+      <circle fill="inherit" cx="12" cy="12" r="2" />
+    </g>
+  </svg>
+));
+
+export const CheckboxPrimitive = props => (
+  <Control icon={CheckboxIcon} type="checkbox" {...props} />
 );
 
-export const RadioPrimitive = ({ innerRef, ...props }) => (
-  <Control
-    ref={innerRef}
-    svg={`<g fillRule="evenodd">
-    <circle class="outer-stroke" fill="transparent" cx="12" cy="12" r="7" />
-    <circle class="inner-stroke" fill="currentColor" cx="12" cy="12" r="7" />
-    <circle fill="inherit" cx="12" cy="12" r="2" />
-  </g>`}
-    type="radio"
-    {...props}
-  />
-);
+export const RadioPrimitive = props => <Control icon={RadioIcon} type="radio" {...props} />;

No alert changes

Improved metrics

Dependency count

8

-11.11%

Worsened metrics

Total package byte prevSize

33099

-5.95%

Lines of code

796

-1.97%

Dependency changes

• + Added

  @babel/parser@7.27.1
  (transitive)

• + Added

  @babel/template@7.27.1
  (transitive)

• - Removed

  memoize-one@^5.1.1

• - Removed

  @babel/parser@7.27.2
  (transitive)

• - Removed

  @babel/template@7.27.2
  (transitive)

• - Removed

  memoize-one@5.2.1
  (transitive)