@workday/canvas-kit-react 9.0.0-alpha.368-next.6 → 9.0.0-alpha.382-next.2

package/dist/es6/popup/lib/hooks/useReturnFocus.js

@@ -6,7 +6,7 @@ function getScrollParent(element) {
     if (element === document.body || !element.parentElement) {
         return element;
     }
-    var styles = getComputedStyle(element);
+    const styles = getComputedStyle(element);
     if (styles.overflowY === 'scroll' || styles.overflowY === 'auto') {
         return element;
     }
@@ -31,14 +31,14 @@ function getFocusableElement(element) {
  *
  * This should be used on popup elements that use `useInitialFocus`.
  */
-export var useReturnFocus = createElemPropsHook(usePopupModel)(function (model) {
-    var visible = model.state.visibility !== 'hidden';
-    var elementRef = React.useRef(null);
+export const useReturnFocus = createElemPropsHook(usePopupModel)(model => {
+    const visible = model.state.visibility !== 'hidden';
+    const elementRef = React.useRef(null);
     // This boolean tracks keyboard-driven focus changes. This is required for `useFocusRedirect` as
     // focus redirection needs synchronous focus management and everything else needs asynchronous
     // focus management.
-    var requiresFocusChangeRef = React.useRef(false);
-    var onKeyDown = React.useCallback(function (event) {
+    const requiresFocusChangeRef = React.useRef(false);
+    const onKeyDown = React.useCallback((event) => {
         // The tab key changes focus
         if (event.key === 'Tab') {
             requiresFocusChangeRef.current = true;
@@ -46,7 +46,7 @@ export var useReturnFocus = createElemPropsHook(usePopupModel)(function (model)
     }, []);
     // track mousedown events to determine if the mouse target is a focusable element. If it is, we
     // should not return focus
-    var onMouseDown = React.useCallback(function (event) {
+    const onMouseDown = React.useCallback((event) => {
         if (model.state.stackRef.current && event.target instanceof HTMLElement) {
             if (!PopupStack.contains(model.state.stackRef.current, event.target)) {
                 elementRef.current = event.target;
@@ -68,24 +68,24 @@ export var useReturnFocus = createElemPropsHook(usePopupModel)(function (model)
     // focus itself. If we don't short-circuit return focus, the user will intend to click on an
     // `input` element only to get focus changed back. This is annoying to users and unintuitive. Instead,
     // we'll use `mousedown` and `mouseup` to determine if we're closing because of a mouse click.
-    React.useLayoutEffect(function () {
+    React.useLayoutEffect(() => {
         if (!visible) {
             return;
         }
         // capture the element here. The refs will be null by the time the cleanup function is called
-        var element = (model.state.returnFocusRef || model.state.targetRef)
+        const element = (model.state.returnFocusRef || model.state.targetRef)
             .current;
         document.addEventListener('mousedown', onMouseDown, true);
         document.addEventListener('keydown', onKeyDown, true);
-        return function () {
+        return () => {
             document.removeEventListener('mousedown', onMouseDown, true);
             document.removeEventListener('keydown', onKeyDown, true);
             if (!element) {
                 return;
             }
-            var scrollParent = getScrollParent(element);
-            var scrollParentRect = scrollParent.getBoundingClientRect();
-            var elementRect = element.getBoundingClientRect();
+            const scrollParent = getScrollParent(element);
+            const scrollParentRect = scrollParent.getBoundingClientRect();
+            const elementRect = element.getBoundingClientRect();
             // Don't change focus if user focused on a different element like a `input` or the target
             // element isn't on at least halfway rendered on the screen.
             if ((elementRef.current && getFocusableElement(elementRef.current)) || // did the user click on a focusable element?
@@ -98,7 +98,7 @@ export var useReturnFocus = createElemPropsHook(usePopupModel)(function (model)
                 elementRef.current = null;
                 return;
             }
-            var activeElementOutsidePopupStack = document.activeElement !== document.body &&
+            const activeElementOutsidePopupStack = document.activeElement !== document.body &&
                 model.state.stackRef.current &&
                 document.activeElement instanceof HTMLElement &&
                 !PopupStack.contains(model.state.stackRef.current, document.activeElement);
@@ -111,7 +111,7 @@ export var useReturnFocus = createElemPropsHook(usePopupModel)(function (model)
             else {
                 // We wait a frame for the current event to process, allowing the browser to fire default
                 // actions. This delay allows the focus change to trigger a `focus` event on `element`.
-                requestAnimationFrame(function () {
+                requestAnimationFrame(() => {
                     changeFocus(element);
                 });
             }

package/dist/es6/popup/lib/hooks/useTransferOnFullscreenEnter.js

@@ -11,8 +11,8 @@ import { usePopupModel } from './usePopupModel';
  * Don't use this in conjunction with a hook that will close the popup when entering fullscreen.
  * Doing so would open the popup when the intention was to close it.
  */
-export var useTransferOnFullscreenEnter = createElemPropsHook(usePopupModel)(function (model) {
-    var handler = React.useCallback(function (event) {
+export const useTransferOnFullscreenEnter = createElemPropsHook(usePopupModel)(model => {
+    const handler = React.useCallback((event) => {
         if (screenfull.isFullscreen && model.state.stackRef.current) {
             PopupStack.transferToCurrentContext({
                 element: model.state.stackRef.current,
@@ -20,14 +20,14 @@ export var useTransferOnFullscreenEnter = createElemPropsHook(usePopupModel)(fun
             });
         }
     }, [model.state.stackRef, model.state.targetRef]);
-    var visible = model.state.visibility !== 'hidden';
-    React.useEffect(function () {
+    const visible = model.state.visibility !== 'hidden';
+    React.useEffect(() => {
         if (!visible) {
             return;
         }
         if (screenfull.isEnabled) {
             screenfull.on('change', handler);
-            return function () {
+            return () => {
                 screenfull.off('change', handler);
             };
         }

package/dist/es6/popup/lib/hooks/useTransferOnFullscreenExit.js

@@ -10,8 +10,8 @@ import { usePopupModel } from './usePopupModel';
  * Don't use this in conjunction with a hook that will close the popup when exiting fullscreen.
  * Doing so would open the popup when the intention was to close it.
  */
-export var useTransferOnFullscreenExit = createElemPropsHook(usePopupModel)(function (model) {
-    var handler = React.useCallback(function (event) {
+export const useTransferOnFullscreenExit = createElemPropsHook(usePopupModel)(model => {
+    const handler = React.useCallback((event) => {
         if (!screenfull.isFullscreen && model.state.stackRef.current) {
             PopupStack.transferToCurrentContext({
                 element: model.state.stackRef.current,
@@ -19,14 +19,14 @@ export var useTransferOnFullscreenExit = createElemPropsHook(usePopupModel)(func
             });
         }
     }, [model.state.stackRef, model.state.targetRef]);
-    var visible = model.state.visibility !== 'hidden';
-    React.useEffect(function () {
+    const visible = model.state.visibility !== 'hidden';
+    React.useEffect(() => {
         if (!visible) {
             return;
         }
         if (screenfull.isEnabled) {
             screenfull.on('change', handler);
-            return function () {
+            return () => {
                 screenfull.off('change', handler);
             };
         }

package/dist/es6/radio/lib/Radio.js

@@ -1,38 +1,16 @@
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
 import * as React from 'react';
 import { createComponent, focusRing, mouseFocusBehavior, styled, useUniqueId, } from '@workday/canvas-kit-react/common';
 import { borderRadius, colors, inputColors, spaceNumbers } from '@workday/canvas-kit-react/tokens';
 import { LabelText } from '@workday/canvas-kit-react/text';
-var radioBorderRadius = 9;
-var radioDot = 8;
-var radioHeight = 18;
-var radioTapArea = spaceNumbers.m;
-var radioContainerHeight = radioTapArea;
-var radioLabelDistance = spaceNumbers.xs;
-var radioWidth = 18;
-var rippleRadius = (spaceNumbers.l - radioWidth) / 2;
-var RadioContainer = styled('div')({
+const radioBorderRadius = 9;
+const radioDot = 8;
+const radioHeight = 18;
+const radioTapArea = spaceNumbers.m;
+const radioContainerHeight = radioTapArea;
+const radioLabelDistance = spaceNumbers.xs;
+const radioWidth = 18;
+const rippleRadius = (spaceNumbers.l - radioWidth) / 2;
+const RadioContainer = styled('div')({
     display: 'flex',
     alignItems: 'center',
     minHeight: radioContainerHeight,
@@ -43,26 +21,23 @@ var RadioContainer = styled('div')({
  * :hover on the radio when you hover on it's corresponding label.
  * This stops the ripple from showing when you hover on the label.
  */
-var RadioInputWrapper = styled('div')({
+const RadioInputWrapper = styled('div')({
     display: 'flex',
     height: radioHeight,
     width: radioWidth,
 });
-var RadioRipple = styled('span')({
+const RadioRipple = styled('span')({
     borderRadius: borderRadius.circle,
-    boxShadow: "0 0 0 0 " + colors.soap200,
+    boxShadow: `0 0 0 0 ${colors.soap200}`,
     height: radioHeight,
     transition: 'box-shadow 150ms ease-out',
     width: radioWidth,
     position: 'absolute',
     pointerEvents: 'none', // This is a decorative element we don't want it to block clicks to input
-}, function (_a) {
-    var variant = _a.variant;
-    return ({
-        opacity: variant === 'inverse' ? '0.4' : '1',
-    });
-});
-var RadioInput = styled('input')({
+}, ({ variant }) => ({
+    opacity: variant === 'inverse' ? '0.4' : '1',
+}));
+const RadioInput = styled('input')({
     borderRadius: radioBorderRadius,
     width: radioTapArea,
     height: radioTapArea,
@@ -74,64 +49,79 @@ var RadioInput = styled('input')({
     '&:focus, &:active': {
         outline: 'none',
     },
-}, function (_a) {
-    var checked = _a.checked, disabled = _a.disabled, variant = _a.variant, _b = _a.theme.canvas.palette, themePrimary = _b.primary, themeFocusOutline = _b.common.focusOutline;
-    return (__assign({ cursor: disabled ? undefined : 'pointer', 
-        /**
-         * These selectors are targetting various sibling elements (~) here because
-         * their styles need to be connected to changes around the input's state
-         * (e.g. hover, focus, etc.).
-         *
-         * We are choosing not to use component selectors from Emotion in this case.
-         * The Babel transforms have been problematic in the past.
-         */
-        // `span:first-of-type` refers to `RadioRipple`, the light grey
-        // element that animates around the component on hover
-        '&:hover ~ span:first-of-type': {
-            boxShadow: disabled ? undefined : "0 0 0 " + rippleRadius + "px " + colors.soap200,
-        }, 
-        // `div:first-of-type` refers to the `RadioBackground`, the visual facade of the
-        // input (which is visually hidden)
-        '&:hover ~ div:first-of-type': {
-            backgroundColor: checked
-                ? variant === 'inverse'
-                    ? colors.frenchVanilla100
-                    : themePrimary.main
-                : disabled
-                    ? inputColors.disabled.background
-                    : 'white',
-            borderColor: checked
-                ? variant === 'inverse'
+}, ({ checked, disabled, variant, theme: { canvas: { palette: { primary: themePrimary, common: { focusOutline: themeFocusOutline }, }, }, }, }) => ({
+    cursor: disabled ? undefined : 'pointer',
+    /**
+     * These selectors are targetting various sibling elements (~) here because
+     * their styles need to be connected to changes around the input's state
+     * (e.g. hover, focus, etc.).
+     *
+     * We are choosing not to use component selectors from Emotion in this case.
+     * The Babel transforms have been problematic in the past.
+     */
+    // `span:first-of-type` refers to `RadioRipple`, the light grey
+    // element that animates around the component on hover
+    '&:hover ~ span:first-of-type': {
+        boxShadow: disabled ? undefined : `0 0 0 ${rippleRadius}px ${colors.soap200}`,
+    },
+    // `div:first-of-type` refers to the `RadioBackground`, the visual facade of the
+    // input (which is visually hidden)
+    '&:hover ~ div:first-of-type': {
+        backgroundColor: checked
+            ? variant === 'inverse'
+                ? colors.frenchVanilla100
+                : themePrimary.main
+            : disabled
+                ? inputColors.disabled.background
+                : 'white',
+        borderColor: checked
+            ? variant === 'inverse'
+                ? colors.soap300
+                : themePrimary.main
+            : disabled
+                ? inputColors.disabled.border
+                : variant === 'inverse'
                     ? colors.soap300
-                    : themePrimary.main
-                : disabled
-                    ? inputColors.disabled.border
-                    : variant === 'inverse'
-                        ? colors.soap300
-                        : inputColors.hoverBorder,
-            borderWidth: '1px',
-        }, '&:focus, &focus:hover': {
-            '& ~ div:first-of-type': __assign({ borderWidth: '2px', borderColor: variant === 'inverse' ? colors.blackPepper400 : themeFocusOutline, boxShadow: 'none' }, focusRing({
+                    : inputColors.hoverBorder,
+        borderWidth: '1px',
+    },
+    '&:focus, &focus:hover': {
+        '& ~ div:first-of-type': {
+            borderWidth: '2px',
+            borderColor: variant === 'inverse' ? colors.blackPepper400 : themeFocusOutline,
+            boxShadow: 'none',
+            ...focusRing({
                 width: variant === 'inverse' ? 2 : 0,
                 separation: 0,
                 animate: false,
                 innerColor: variant === 'inverse' ? colors.blackPepper400 : undefined,
                 outerColor: variant === 'inverse' ? colors.frenchVanilla100 : undefined,
-            })),
-        }, '&:checked:focus ~ div:first-of-type': __assign(__assign({}, focusRing({
+            }),
+        },
+    },
+    '&:checked:focus ~ div:first-of-type': {
+        ...focusRing({
             separation: 2,
             width: 2,
             innerColor: variant === 'inverse' ? colors.blackPepper400 : undefined,
             outerColor: variant === 'inverse' ? colors.frenchVanilla100 : themeFocusOutline,
-        })), { borderColor: variant === 'inverse' ? colors.frenchVanilla100 : themePrimary.main, borderWidth: '2px' }) }, mouseFocusBehavior({
-        '&:focus ~ div:first-of-type': __assign(__assign({}, focusRing({
-            width: 0,
-            outerColor: variant === 'inverse' ? colors.frenchVanilla100 : themeFocusOutline,
-        })), { borderWidth: '1px', borderColor: checked
+        }),
+        borderColor: variant === 'inverse' ? colors.frenchVanilla100 : themePrimary.main,
+        borderWidth: '2px',
+    },
+    ...mouseFocusBehavior({
+        '&:focus ~ div:first-of-type': {
+            ...focusRing({
+                width: 0,
+                outerColor: variant === 'inverse' ? colors.frenchVanilla100 : themeFocusOutline,
+            }),
+            borderWidth: '1px',
+            borderColor: checked
                 ? variant === 'inverse'
                     ? colors.soap300
                     : themePrimary.main
-                : inputColors.border }),
+                : inputColors.border,
+        },
         '&:focus:hover ~ div:first-of-type, &:focus:active ~ div:first-of-type': {
             borderColor: checked
                 ? variant === 'inverse'
@@ -141,9 +131,9 @@ var RadioInput = styled('input')({
                     ? colors.soap300
                     : inputColors.hoverBorder,
         },
-    })));
-});
-var RadioBackground = styled('div')({
+    }),
+}));
+const RadioBackground = styled('div')({
     alignItems: 'center',
     backgroundColor: colors.frenchVanilla100,
     borderRadius: radioBorderRadius,
@@ -158,29 +148,26 @@ var RadioBackground = styled('div')({
     position: 'absolute',
     transition: 'border 200ms ease, background 200ms',
     width: radioWidth,
-}, function (_a) {
-    var checked = _a.checked, disabled = _a.disabled, variant = _a.variant, themePrimary = _a.theme.canvas.palette.primary;
-    return ({
-        borderColor: checked
-            ? variant === 'inverse'
+}, ({ checked, disabled, variant, theme: { canvas: { palette: { primary: themePrimary }, }, }, }) => ({
+    borderColor: checked
+        ? variant === 'inverse'
+            ? colors.soap300
+            : themePrimary.main
+        : disabled
+            ? inputColors.disabled.border
+            : variant === 'inverse'
                 ? colors.soap300
-                : themePrimary.main
-            : disabled
-                ? inputColors.disabled.border
-                : variant === 'inverse'
-                    ? colors.soap300
-                    : inputColors.border,
-        backgroundColor: checked
-            ? variant === 'inverse'
-                ? colors.frenchVanilla100
-                : themePrimary.main
-            : disabled
-                ? inputColors.disabled.background
-                : 'white',
-        opacity: disabled && variant === 'inverse' ? '.4' : '1',
-    });
-});
-var RadioCheck = styled('div')({
+                : inputColors.border,
+    backgroundColor: checked
+        ? variant === 'inverse'
+            ? colors.frenchVanilla100
+            : themePrimary.main
+        : disabled
+            ? inputColors.disabled.background
+            : 'white',
+    opacity: disabled && variant === 'inverse' ? '.4' : '1',
+}));
+const RadioCheck = styled('div')({
     borderRadius: radioBorderRadius,
     display: 'flex',
     flexDirection: 'column',
@@ -188,28 +175,21 @@ var RadioCheck = styled('div')({
     pointerEvents: 'none',
     transition: 'transform 200ms ease, opacity 200ms ease',
     width: radioDot,
-}, function (_a) {
-    var theme = _a.theme, variant = _a.variant;
-    return ({
-        backgroundColor: variant === 'inverse'
-            ? theme.canvas.palette.primary.main
-            : theme.canvas.palette.primary.contrast,
-    });
-}, function (_a) {
-    var checked = _a.checked;
-    return ({
-        opacity: checked ? 1 : 0,
-        transform: checked ? 'scale(1)' : 'scale(0.5)',
-    });
-});
-export var Radio = createComponent('input')({
+}, ({ theme, variant }) => ({
+    backgroundColor: variant === 'inverse'
+        ? theme.canvas.palette.primary.main
+        : theme.canvas.palette.primary.contrast,
+}), ({ checked }) => ({
+    opacity: checked ? 1 : 0,
+    transform: checked ? 'scale(1)' : 'scale(0.5)',
+}));
+export const Radio = createComponent('input')({
     displayName: 'Radio',
-    Component: function (_a, ref, Element) {
-        var _b = _a.checked, checked = _b === void 0 ? false : _b, id = _a.id, _c = _a.label, label = _c === void 0 ? '' : _c, disabled = _a.disabled, name = _a.name, onChange = _a.onChange, value = _a.value, variant = _a.variant, elemProps = __rest(_a, ["checked", "id", "label", "disabled", "name", "onChange", "value", "variant"]);
-        var inputId = useUniqueId(id);
+    Component: ({ checked = false, id, label = '', disabled, name, onChange, value, variant, ...elemProps }, ref, Element) => {
+        const inputId = useUniqueId(id);
         return (React.createElement(RadioContainer, null,
             React.createElement(RadioInputWrapper, { disabled: disabled },
-                React.createElement(RadioInput, __assign({ as: Element, checked: checked, disabled: disabled, id: inputId, ref: ref, name: name, onChange: onChange, type: "radio", value: value, "aria-checked": checked, variant: variant }, elemProps)),
+                React.createElement(RadioInput, Object.assign({ as: Element, checked: checked, disabled: disabled, id: inputId, ref: ref, name: name, onChange: onChange, type: "radio", value: value, "aria-checked": checked, variant: variant }, elemProps)),
                 React.createElement(RadioRipple, { variant: variant }),
                 React.createElement(RadioBackground, { checked: checked, disabled: disabled, variant: variant },
                     React.createElement(RadioCheck, { checked: checked, variant: variant }))),

package/dist/es6/radio/lib/RadioGroup.js

@@ -1,52 +1,15 @@
-var __extends = (this && this.__extends) || (function () {
-    var extendStatics = function (d, b) {
-        extendStatics = Object.setPrototypeOf ||
-            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
-            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
-        return extendStatics(d, b);
-    };
-    return function (d, b) {
-        if (typeof b !== "function" && b !== null)
-            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
-        extendStatics(d, b);
-        function __() { this.constructor = d; }
-        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
-    };
-})();
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
 import * as React from 'react';
 import { Radio } from './Radio';
 import { borderRadius, space } from '@workday/canvas-kit-react/tokens';
 import { ErrorType, getErrorColors, styled, } from '@workday/canvas-kit-react/common';
-var Container = styled('div')({
+const Container = styled('div')({
     display: 'inline-block',
     boxSizing: 'border-box',
     borderRadius: borderRadius.m,
-    padding: space.xxxs + " " + space.xs,
-    margin: "-" + space.xxxs + " -" + space.xs,
+    padding: `${space.xxxs} ${space.xs}`,
+    margin: `-${space.xxxs} -${space.xs}`,
     '& > div': {
-        margin: space.xxs + " " + space.zero,
+        margin: `${space.xxs} ${space.zero}`,
         alignItems: 'flex-start',
         '> div': {
             flex: '0 0 auto',
@@ -58,59 +21,50 @@ var Container = styled('div')({
             marginBottom: space.xxxs,
         },
     },
-}, function (_a) {
-    var grow = _a.grow;
-    return grow && { width: '100%' };
-}, function (_a) {
-    var error = _a.error, theme = _a.theme;
-    var errorColors = getErrorColors(error, theme);
+}, ({ grow }) => grow && { width: '100%' }, ({ error, theme }) => {
+    const errorColors = getErrorColors(error, theme);
     return {
         transition: '100ms box-shadow',
         boxShadow: errorColors.outer !== errorColors.inner
-            ? "inset 0 0 0 1px " + errorColors.outer + ", inset 0 0 0 3px " + errorColors.inner
-            : "inset 0 0 0 2px " + errorColors.inner,
+            ? `inset 0 0 0 1px ${errorColors.outer}, inset 0 0 0 3px ${errorColors.inner}`
+            : `inset 0 0 0 2px ${errorColors.inner}`,
     };
 });
-var RadioGroup = /** @class */ (function (_super) {
-    __extends(RadioGroup, _super);
-    function RadioGroup() {
-        var _this = _super !== null && _super.apply(this, arguments) || this;
-        _this.renderChild = function (child, index, value) {
+export class RadioGroup extends React.Component {
+    constructor() {
+        super(...arguments);
+        this.renderChild = (child, index, value) => {
             if (typeof child.type === typeof Radio) {
-                var childProps = child.props;
-                var checked = typeof value === 'number' ? index === value : childProps.value === value;
-                var name_1 = _this.props.name ? _this.props.name : childProps.name;
+                const childProps = child.props;
+                const checked = typeof value === 'number' ? index === value : childProps.value === value;
+                const name = this.props.name ? this.props.name : childProps.name;
                 return React.cloneElement(child, {
-                    checked: checked,
-                    name: name_1,
-                    onChange: _this.onRadioChange.bind(_this, childProps.onChange, index),
+                    checked,
+                    name,
+                    onChange: this.onRadioChange.bind(this, childProps.onChange, index),
                 });
             }
             return child;
         };
-        _this.onRadioChange = function (existingOnChange, index, event) {
+        this.onRadioChange = (existingOnChange, index, event) => {
             if (existingOnChange) {
                 existingOnChange(event);
             }
-            var target = event.currentTarget;
-            if (target && _this.props.onChange) {
+            const target = event.currentTarget;
+            if (target && this.props.onChange) {
                 if (target.value) {
-                    _this.props.onChange(target.value);
+                    this.props.onChange(target.value);
                 }
                 else {
-                    _this.props.onChange(index);
+                    this.props.onChange(index);
                 }
             }
         };
-        return _this;
     }
-    RadioGroup.prototype.render = function () {
-        var _this = this;
-        var _a = this.props, _b = _a.value, value = _b === void 0 ? 0 : _b, children = _a.children, error = _a.error, onChange = _a.onChange, grow = _a.grow, elemProps = __rest(_a, ["value", "children", "error", "onChange", "grow"]);
-        return (React.createElement(Container, __assign({ error: error, grow: grow }, elemProps), React.Children.map(children, function (child, index) { return _this.renderChild(child, index, value); })));
-    };
-    RadioGroup.ErrorType = ErrorType;
-    return RadioGroup;
-}(React.Component));
-export { RadioGroup };
+    render() {
+        const { value = 0, children, error, onChange, grow, ...elemProps } = this.props;
+        return (React.createElement(Container, Object.assign({ error: error, grow: grow }, elemProps), React.Children.map(children, (child, index) => this.renderChild(child, index, value))));
+    }
+}
+RadioGroup.ErrorType = ErrorType;
 RadioGroup.ErrorType = ErrorType;