@citygross/components 0.16.7 → 0.16.8

package/build/@types/components/RadioListItem/RadioListItem.d.ts

@@ -12,5 +12,9 @@ export declare type TRadioListItemProps = styles.TBaseRadioItemInputWrapper & {
     wrapMobile?: boolean;
     children?: JSX.Element;
     additionalInfo?: JSX.Element;
+    tabIndex?: number;
+    onFocus?: React.FocusEventHandler<HTMLDivElement>;
+    onBlur?: React.FocusEventHandler<HTMLDivElement>;
+    onKeyDown?: React.KeyboardEventHandler<HTMLDivElement>;
 };
-export declare function RadioListItem({ onClick, selected, flexGrow, isDisabled, transparent, noPadding, label, value, wrapMobile, additionalInfo, children }: TRadioListItemProps): React.JSX.Element;
+export declare function RadioListItem({ onClick, selected, flexGrow, isDisabled, transparent, noPadding, label, value, wrapMobile, additionalInfo, children, tabIndex, onFocus, onBlur, onKeyDown }: TRadioListItemProps): React.JSX.Element;

package/build/cjs/components/src/components/RadioListItem/RadioListItem.js

@@ -4,19 +4,16 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
 var RadioListItem_styles = require('./RadioListItem.styles.js');
+var utils = require('@citygross/utils');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
 function RadioListItem(_a) {
-    var onClick = _a.onClick, selected = _a.selected, _b = _a.flexGrow, flexGrow = _b === void 0 ? 1 : _b, isDisabled = _a.isDisabled, transparent = _a.transparent, noPadding = _a.noPadding, label = _a.label, value = _a.value, wrapMobile = _a.wrapMobile, additionalInfo = _a.additionalInfo, children = _a.children;
-    return (React__default["default"].createElement(RadioListItem_styles.BaseRadioListItemContainer, { tabIndex: isDisabled ? -1 : 0, role: "radio", "aria-checked": selected, "aria-disabled": isDisabled, "aria-live": "polite", transparent: transparent, isDisabled: isDisabled, noPadding: noPadding, selected: selected, onClick: isDisabled ? function () { } : function () { return onClick(value); }, onKeyDown: function (event) {
-            if ((event.key === 'Enter' || event.key === ' ') && !isDisabled) {
-                event.preventDefault();
-                onClick(value);
-            }
-        } },
+    var onClick = _a.onClick, selected = _a.selected, _b = _a.flexGrow, flexGrow = _b === void 0 ? 1 : _b, isDisabled = _a.isDisabled, transparent = _a.transparent, noPadding = _a.noPadding, label = _a.label, value = _a.value, wrapMobile = _a.wrapMobile, additionalInfo = _a.additionalInfo, children = _a.children, tabIndex = _a.tabIndex, onFocus = _a.onFocus, onBlur = _a.onBlur, onKeyDown = _a.onKeyDown;
+    var defaultTabIndex = isDisabled ? -1 : selected ? 0 : -1;
+    return (React__default["default"].createElement(RadioListItem_styles.BaseRadioListItemContainer, { tabIndex: tabIndex !== null && tabIndex !== void 0 ? tabIndex : defaultTabIndex, role: "radio", "aria-checked": selected, "aria-disabled": isDisabled, "aria-live": "polite", transparent: transparent, isDisabled: isDisabled, noPadding: noPadding, selected: selected, onClick: isDisabled ? function () { } : function () { return onClick(value); }, onFocus: onFocus, onBlur: onBlur, onKeyDown: function (event) { return utils.selectKeyboardEventHandler({ event: event, isDisabled: isDisabled, onClick: onClick, value: value, onKeyDown: onKeyDown }); } },
         React__default["default"].createElement(RadioListItem_styles.RadioFlex, { wrapMobile: wrapMobile },
             React__default["default"].createElement(RadioListItem_styles.BaseRadioItemLeftWrapper, { isDisabled: isDisabled, flexGrow: flexGrow },
                 React__default["default"].createElement(RadioListItem_styles.LabelContentWrapper, null,

package/build/cjs/components/src/components/RadioListItem/RadioListItem.js.map

@@ -1 +1 @@
-{"version":3,"file":"RadioListItem.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"RadioListItem.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/build/es/components/src/components/RadioListItem/RadioListItem.js

@@ -1,14 +1,11 @@
 import React from 'react';
 import { BaseRadioListItemContainer, RadioFlex, BaseRadioItemLeftWrapper, LabelContentWrapper, StyledH3, RadioRightWrapper } from './RadioListItem.styles.js';
+import { selectKeyboardEventHandler } from '@citygross/utils';
 
 function RadioListItem(_a) {
-    var onClick = _a.onClick, selected = _a.selected, _b = _a.flexGrow, flexGrow = _b === void 0 ? 1 : _b, isDisabled = _a.isDisabled, transparent = _a.transparent, noPadding = _a.noPadding, label = _a.label, value = _a.value, wrapMobile = _a.wrapMobile, additionalInfo = _a.additionalInfo, children = _a.children;
-    return (React.createElement(BaseRadioListItemContainer, { tabIndex: isDisabled ? -1 : 0, role: "radio", "aria-checked": selected, "aria-disabled": isDisabled, "aria-live": "polite", transparent: transparent, isDisabled: isDisabled, noPadding: noPadding, selected: selected, onClick: isDisabled ? function () { } : function () { return onClick(value); }, onKeyDown: function (event) {
-            if ((event.key === 'Enter' || event.key === ' ') && !isDisabled) {
-                event.preventDefault();
-                onClick(value);
-            }
-        } },
+    var onClick = _a.onClick, selected = _a.selected, _b = _a.flexGrow, flexGrow = _b === void 0 ? 1 : _b, isDisabled = _a.isDisabled, transparent = _a.transparent, noPadding = _a.noPadding, label = _a.label, value = _a.value, wrapMobile = _a.wrapMobile, additionalInfo = _a.additionalInfo, children = _a.children, tabIndex = _a.tabIndex, onFocus = _a.onFocus, onBlur = _a.onBlur, onKeyDown = _a.onKeyDown;
+    var defaultTabIndex = isDisabled ? -1 : selected ? 0 : -1;
+    return (React.createElement(BaseRadioListItemContainer, { tabIndex: tabIndex !== null && tabIndex !== void 0 ? tabIndex : defaultTabIndex, role: "radio", "aria-checked": selected, "aria-disabled": isDisabled, "aria-live": "polite", transparent: transparent, isDisabled: isDisabled, noPadding: noPadding, selected: selected, onClick: isDisabled ? function () { } : function () { return onClick(value); }, onFocus: onFocus, onBlur: onBlur, onKeyDown: function (event) { return selectKeyboardEventHandler({ event: event, isDisabled: isDisabled, onClick: onClick, value: value, onKeyDown: onKeyDown }); } },
         React.createElement(RadioFlex, { wrapMobile: wrapMobile },
             React.createElement(BaseRadioItemLeftWrapper, { isDisabled: isDisabled, flexGrow: flexGrow },
                 React.createElement(LabelContentWrapper, null,

package/build/es/components/src/components/RadioListItem/RadioListItem.js.map

@@ -1 +1 @@
-{"version":3,"file":"RadioListItem.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"RadioListItem.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@citygross/components",
-  "version": "0.16.7",
+  "version": "0.16.8",
   "license": "ISC",
   "sideEffects": false,
   "main": "./build/cjs/components/src/index.js",
@@ -75,5 +75,5 @@
     "react-slick": "^0.30.1",
     "slick-carousel": "^1.8.1"
   },
-  "gitHead": "200eb003d414b0f0b7d7da53c2742a4dbc98f78f"
+  "gitHead": "faaea20047ace6894dd4b9d3d5b56e5e867e7696"
 }