New Case Study:See how Anthropic automated 95% of dependency reviews with Socket.Learn More →
Socket
Sign inDemoInstall
Socket
Sign inDemoInstall

@accessible/radio

Package Overview
Dependencies
Maintainers
1
Versions
9
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@accessible/radio - npm Package Compare versions

Comparing version 3.0.1 to 4.0.0

CHANGELOG.md
dist/esm/index.dev.mjs
dist/esm/index.dev.mjs.map
dist/esm/index.mjs.map
dist/umd/radio.dev.js
dist/umd/radio.dev.js.map
dist/umd/radio.js
dist/umd/radio.js.map

352

dist/main/index.js

@@ -1,249 +0,169 @@

'use strict'
"use strict";
exports.__esModule = true
exports.Mark = exports.Unchecked = exports.Checked = exports.useControls = exports.useDisabled = exports.useFocused = exports.useChecked = exports.useRadio = exports.RadioContext = exports.Radio = exports.RadioGroup = exports.useRadioGroup = exports.RadioGroupContext = void 0
exports.__esModule = true;
exports.RadioGroup = RadioGroup;
exports.Checked = Checked;
exports.Unchecked = Unchecked;
exports.Mark = Mark;
exports.useRadio = exports.Radio = exports.useRadioGroup = void 0;
var React = /*#__PURE__*/ _interopRequireWildcard(
/*#__PURE__*/ require('react')
)
var React = /*#__PURE__*/_interopRequireWildcard( /*#__PURE__*/require("react"));
var _visuallyHidden = /*#__PURE__*/ _interopRequireDefault(
/*#__PURE__*/ require('@accessible/visually-hidden')
)
var _visuallyHidden = /*#__PURE__*/require("@accessible/visually-hidden");
var _clsx = /*#__PURE__*/ _interopRequireDefault(/*#__PURE__*/ require('clsx'))
var _change = /*#__PURE__*/_interopRequireDefault( /*#__PURE__*/require("@react-hook/change"));
function _interopRequireDefault(obj) {
return obj && obj.__esModule ? obj : {default: obj}
}
var _clsx = /*#__PURE__*/_interopRequireDefault( /*#__PURE__*/require("clsx"));
function _getRequireWildcardCache() {
if (typeof WeakMap !== 'function') return null
var cache = new WeakMap()
_getRequireWildcardCache = function () {
return cache
}
return cache
}
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
function _interopRequireWildcard(obj) {
if (obj && obj.__esModule) {
return obj
}
if (obj === null || (typeof obj !== 'object' && typeof obj !== 'function')) {
return {default: obj}
}
var cache = _getRequireWildcardCache()
if (cache && cache.has(obj)) {
return cache.get(obj)
}
var newObj = {}
var hasPropertyDescriptor =
Object.defineProperty && Object.getOwnPropertyDescriptor
for (var key in obj) {
if (Object.prototype.hasOwnProperty.call(obj, key)) {
var desc = hasPropertyDescriptor
? Object.getOwnPropertyDescriptor(obj, key)
: null
if (desc && (desc.get || desc.set)) {
Object.defineProperty(newObj, key, desc)
} else {
newObj[key] = obj[key]
}
}
}
newObj.default = obj
if (cache) {
cache.set(obj, newObj)
}
return newObj
}
function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function () { return cache; }; return cache; }
const __reactCreateElement__ = React.createElement
function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
const noop = () => {}
const RadioGroupContext = /*#__PURE__*/ React.createContext({
const __reactCreateElement__ = React.createElement;
const RadioGroupContext = /*#__PURE__*/React.createContext({
name: '',
value: void 0,
setValue: noop,
})
exports.RadioGroupContext = RadioGroupContext
setValue: noop
});
const useRadioGroup = () => React.useContext(RadioGroupContext)
const useRadioGroup = () => React.useContext(RadioGroupContext);
exports.useRadioGroup = useRadioGroup
exports.useRadioGroup = useRadioGroup;
const RadioGroup = ({name, value, defaultValue, onChange, children}) => {
const [checkedValue, setValue] = React.useState(
value === void 0 ? defaultValue : value
)
const nextValue = value === void 0 ? checkedValue : value
const context = React.useMemo(
() => ({
name,
value: nextValue,
setValue,
}),
[name, nextValue]
)
const storedOnChange = React.useRef(onChange)
storedOnChange.current = onChange
const prevChecked = React.useRef(nextValue)
React.useEffect(() => {
var _storedOnChange$curre
prevChecked.current !== checkedValue &&
((_storedOnChange$curre = storedOnChange.current) === null ||
_storedOnChange$curre === void 0
? void 0
: _storedOnChange$curre.call(storedOnChange, checkedValue))
prevChecked.current = checkedValue
}, [checkedValue])
return /*#__PURE__*/ __reactCreateElement__(RadioGroupContext.Provider, {
value: context,
children: children,
})
function RadioGroup({
name,
value,
defaultValue,
onChange = noop,
children
}) {
const [checkedValue, setValue] = React.useState(value !== null && value !== void 0 ? value : defaultValue);
const nextValue = value !== null && value !== void 0 ? value : checkedValue;
const context = React.useMemo(() => ({
name,
value: nextValue,
setValue
}), [name, nextValue]);
(0, _change.default)(checkedValue, onChange);
return /*#__PURE__*/__reactCreateElement__(RadioGroupContext.Provider, {
value: context
}, children);
}
exports.RadioGroup = RadioGroup
const Radio = /*#__PURE__*/ React.forwardRef(
(
{value, disabled = false, onChange, onFocus, onBlur, children, ...props},
ref
) => {
const {name, value: checkedValue, setValue} = useRadioGroup()
const [focused, setFocused] = React.useState(false)
const checked = value === checkedValue
const storedOnChange = React.useRef(onChange)
storedOnChange.current = onChange
const Radio = /*#__PURE__*/React.forwardRef(({
value,
disabled = false,
onChange = noop,
onFocus,
onBlur,
children,
...props
}, ref) => {
const {
name,
value: checkedValue,
setValue
} = useRadioGroup();
const [focused, setFocused] = React.useState(false);
const checked = value === checkedValue;
function _ref() {
return !disabled && setValue(value)
}
function _ref() {
return !disabled && setValue(value);
}
function _ref2(current) {
return current === value ? void 0 : current
}
function _ref2(current) {
return current === value ? void 0 : current;
}
function _ref3() {
return !disabled && setValue(_ref2)
}
const context = React.useMemo(
() => ({
checked,
check: _ref,
uncheck: _ref3,
focused,
disabled,
}),
[checked, focused, disabled, setValue, value]
) // @ts-ignore
children = typeof children === 'function' ? children(context) : children
return /*#__PURE__*/ __reactCreateElement__(
RadioContext.Provider,
{
value: context,
},
/*#__PURE__*/ __reactCreateElement__(
_visuallyHidden.default,
null,
/*#__PURE__*/ __reactCreateElement__('input', {
type: 'radio',
disabled: disabled,
onChange: ({target: {checked}}) => {
if (checked) setValue(value)
onChange === null || onChange === void 0
? void 0
: onChange(checked)
},
onFocus: (e) => {
setFocused(true)
onFocus === null || onFocus === void 0 ? void 0 : onFocus(e)
},
onBlur: (e) => {
setFocused(false)
onBlur === null || onBlur === void 0 ? void 0 : onBlur(e)
},
ref: ref,
...props,
name: name,
value: value,
checked: checked,
defaultChecked: void 0,
})
),
children
)
function _ref3() {
return !disabled && setValue(_ref2);
}
)
exports.Radio = Radio
const RadioContext = /*#__PURE__*/ React.createContext({
checked: false,
check: noop,
uncheck: noop,
focused: false,
disabled: false,
}),
useRadio = () => React.useContext(RadioContext),
useChecked = () => useRadio().checked,
useFocused = () => useRadio().focused,
useDisabled = () => useRadio().disabled,
useControls = () => {
const {check, uncheck} = useRadio()
return {
check,
uncheck,
}
} // @ts-ignore
const context = React.useMemo(() => ({
checked,
check: _ref,
uncheck: _ref3,
focused,
disabled
}), [checked, focused, disabled, setValue, value]);
(0, _change.default)(checked, onChange);
return /*#__PURE__*/__reactCreateElement__(RadioContext.Provider, {
value: context
}, /*#__PURE__*/__reactCreateElement__(_visuallyHidden.VisuallyHidden, null, /*#__PURE__*/__reactCreateElement__("input", {
type: "radio",
disabled: disabled,
onChange: ({
target: {
checked
}
}) => {
if (checked) setValue(value);
onChange === null || onChange === void 0 ? void 0 : onChange(checked);
},
onFocus: e => {
setFocused(true);
onFocus === null || onFocus === void 0 ? void 0 : onFocus(e);
},
onBlur: e => {
setFocused(false);
onBlur === null || onBlur === void 0 ? void 0 : onBlur(e);
},
ref: ref,
...props,
name: name,
value: value,
checked: checked,
defaultChecked: void 0
})), children);
});
exports.Radio = Radio;
const RadioContext = /*#__PURE__*/React.createContext({
checked: false,
check: noop,
uncheck: noop,
focused: false,
disabled: false
});
exports.useControls = useControls
exports.useDisabled = useDisabled
exports.useFocused = useFocused
exports.useChecked = useChecked
exports.useRadio = useRadio
exports.RadioContext = RadioContext
const useRadio = () => React.useContext(RadioContext);
const Checked = ({children}) => (useChecked() ? children : null) // @ts-ignore
exports.useRadio = useRadio;
exports.Checked = Checked
function Checked({
children
}) {
return useRadio().checked ? /*#__PURE__*/__reactCreateElement__(React.Fragment, null, children) : null;
}
const Unchecked = ({children}) => (!useChecked() ? children : null)
function Unchecked({
children
}) {
return !useRadio().checked ? /*#__PURE__*/__reactCreateElement__(React.Fragment, null, children) : null;
}
exports.Unchecked = Unchecked
const Mark = ({
function Mark({
children,
checkedClass = 'radio--checked',
checkedClass,
uncheckedClass,
checkedStyle,
uncheckedStyle,
}) => {
const checked = useChecked()
return /*#__PURE__*/ React.cloneElement(children, {
className:
(0, _clsx.default)(
children.props.className,
checked ? checkedClass : uncheckedClass
) || void 0,
style: Object.assign(
{},
children.props.style,
checked ? checkedStyle : uncheckedStyle
),
})
uncheckedStyle
}) {
const checked = useRadio().checked;
return /*#__PURE__*/React.cloneElement(children, {
className: (0, _clsx.default)(children.props.className, checked ? checkedClass : uncheckedClass) || void 0,
style: Object.assign({}, children.props.style, checked ? checkedStyle : uncheckedStyle)
});
}
/* istanbul ignore next */
exports.Mark = Mark
function noop() {}
/* istanbul ignore next */
if (typeof process !== 'undefined' && process.env.NODE_ENV !== 'production') {
RadioGroup.displayName = 'RadioGroup'
Radio.displayName = 'Radio'
Mark.displayName = 'Mark'
Checked.displayName = 'Checked'
Unchecked.displayName = 'Unchecked'
}
RadioGroup.displayName = 'RadioGroup';
Radio.displayName = 'Radio';
Mark.displayName = 'Mark';
Checked.displayName = 'Checked';
Unchecked.displayName = 'Unchecked';
}

276

dist/module/index.js

@@ -1,166 +0,138 @@

import * as React from 'react'
const __reactCreateElement__ = React.createElement
import VisuallyHidden from '@accessible/visually-hidden'
import clsx from 'clsx'
const noop = () => {}
export const RadioGroupContext = /*#__PURE__*/ React.createContext({
import * as React from 'react';
const __reactCreateElement__ = React.createElement;
import { VisuallyHidden } from '@accessible/visually-hidden';
import useChange from '@react-hook/change';
import clsx from 'clsx';
const RadioGroupContext = /*#__PURE__*/React.createContext({
name: '',
value: void 0,
setValue: noop,
})
export const useRadioGroup = () => React.useContext(RadioGroupContext)
export const RadioGroup = ({name, value, defaultValue, onChange, children}) => {
const [checkedValue, setValue] = React.useState(
value === void 0 ? defaultValue : value
)
const nextValue = value === void 0 ? checkedValue : value
const context = React.useMemo(
() => ({
name,
value: nextValue,
setValue,
}),
[name, nextValue]
)
const storedOnChange = React.useRef(onChange)
storedOnChange.current = onChange
const prevChecked = React.useRef(nextValue)
React.useEffect(() => {
var _storedOnChange$curre
prevChecked.current !== checkedValue &&
((_storedOnChange$curre = storedOnChange.current) === null ||
_storedOnChange$curre === void 0
? void 0
: _storedOnChange$curre.call(storedOnChange, checkedValue))
prevChecked.current = checkedValue
}, [checkedValue])
return /*#__PURE__*/ __reactCreateElement__(RadioGroupContext.Provider, {
value: context,
children: children,
})
setValue: noop
});
export const useRadioGroup = () => React.useContext(RadioGroupContext);
export function RadioGroup({
name,
value,
defaultValue,
onChange = noop,
children
}) {
const [checkedValue, setValue] = React.useState(value !== null && value !== void 0 ? value : defaultValue);
const nextValue = value !== null && value !== void 0 ? value : checkedValue;
const context = React.useMemo(() => ({
name,
value: nextValue,
setValue
}), [name, nextValue]);
useChange(checkedValue, onChange);
return /*#__PURE__*/__reactCreateElement__(RadioGroupContext.Provider, {
value: context
}, children);
}
export const Radio = /*#__PURE__*/ React.forwardRef(
(
{value, disabled = false, onChange, onFocus, onBlur, children, ...props},
ref
) => {
const {name, value: checkedValue, setValue} = useRadioGroup()
const [focused, setFocused] = React.useState(false)
const checked = value === checkedValue
const storedOnChange = React.useRef(onChange)
storedOnChange.current = onChange
export const Radio = /*#__PURE__*/React.forwardRef(({
value,
disabled = false,
onChange = noop,
onFocus,
onBlur,
children,
...props
}, ref) => {
const {
name,
value: checkedValue,
setValue
} = useRadioGroup();
const [focused, setFocused] = React.useState(false);
const checked = value === checkedValue;
function _ref() {
return !disabled && setValue(value)
}
function _ref() {
return !disabled && setValue(value);
}
function _ref2(current) {
return current === value ? void 0 : current
}
function _ref2(current) {
return current === value ? void 0 : current;
}
function _ref3() {
return !disabled && setValue(_ref2)
}
const context = React.useMemo(
() => ({
checked,
check: _ref,
uncheck: _ref3,
focused,
disabled,
}),
[checked, focused, disabled, setValue, value]
) // @ts-ignore
children = typeof children === 'function' ? children(context) : children
return /*#__PURE__*/ __reactCreateElement__(
RadioContext.Provider,
{
value: context,
},
/*#__PURE__*/ __reactCreateElement__(
VisuallyHidden,
null,
/*#__PURE__*/ __reactCreateElement__('input', {
type: 'radio',
disabled: disabled,
onChange: ({target: {checked}}) => {
if (checked) setValue(value)
onChange === null || onChange === void 0
? void 0
: onChange(checked)
},
onFocus: (e) => {
setFocused(true)
onFocus === null || onFocus === void 0 ? void 0 : onFocus(e)
},
onBlur: (e) => {
setFocused(false)
onBlur === null || onBlur === void 0 ? void 0 : onBlur(e)
},
ref: ref,
...props,
name: name,
value: value,
checked: checked,
defaultChecked: void 0,
})
),
children
)
function _ref3() {
return !disabled && setValue(_ref2);
}
)
export const RadioContext = /*#__PURE__*/ React.createContext({
checked: false,
check: noop,
uncheck: noop,
focused: false,
disabled: false,
}),
useRadio = () => React.useContext(RadioContext),
useChecked = () => useRadio().checked,
useFocused = () => useRadio().focused,
useDisabled = () => useRadio().disabled,
useControls = () => {
const {check, uncheck} = useRadio()
return {
check,
uncheck,
}
} // @ts-ignore
export const Checked = ({children}) => (useChecked() ? children : null) // @ts-ignore
export const Unchecked = ({children}) => (!useChecked() ? children : null)
export const Mark = ({
const context = React.useMemo(() => ({
checked,
check: _ref,
uncheck: _ref3,
focused,
disabled
}), [checked, focused, disabled, setValue, value]);
useChange(checked, onChange);
return /*#__PURE__*/__reactCreateElement__(RadioContext.Provider, {
value: context
}, /*#__PURE__*/__reactCreateElement__(VisuallyHidden, null, /*#__PURE__*/__reactCreateElement__("input", {
type: "radio",
disabled: disabled,
onChange: ({
target: {
checked
}
}) => {
if (checked) setValue(value);
onChange === null || onChange === void 0 ? void 0 : onChange(checked);
},
onFocus: e => {
setFocused(true);
onFocus === null || onFocus === void 0 ? void 0 : onFocus(e);
},
onBlur: e => {
setFocused(false);
onBlur === null || onBlur === void 0 ? void 0 : onBlur(e);
},
ref: ref,
...props,
name: name,
value: value,
checked: checked,
defaultChecked: void 0
})), children);
});
const RadioContext = /*#__PURE__*/React.createContext({
checked: false,
check: noop,
uncheck: noop,
focused: false,
disabled: false
});
export const useRadio = () => React.useContext(RadioContext);
export function Checked({
children
}) {
return useRadio().checked ? /*#__PURE__*/__reactCreateElement__(React.Fragment, null, children) : null;
}
export function Unchecked({
children
}) {
return !useRadio().checked ? /*#__PURE__*/__reactCreateElement__(React.Fragment, null, children) : null;
}
export function Mark({
children,
checkedClass = 'radio--checked',
checkedClass,
uncheckedClass,
checkedStyle,
uncheckedStyle,
}) => {
const checked = useChecked()
return /*#__PURE__*/ React.cloneElement(children, {
className:
clsx(children.props.className, checked ? checkedClass : uncheckedClass) ||
void 0,
style: Object.assign(
{},
children.props.style,
checked ? checkedStyle : uncheckedStyle
),
})
uncheckedStyle
}) {
const checked = useRadio().checked;
return /*#__PURE__*/React.cloneElement(children, {
className: clsx(children.props.className, checked ? checkedClass : uncheckedClass) || void 0,
style: Object.assign({}, children.props.style, checked ? checkedStyle : uncheckedStyle)
});
}
function noop() {}
/* istanbul ignore next */
if (typeof process !== 'undefined' && process.env.NODE_ENV !== 'production') {
RadioGroup.displayName = 'RadioGroup'
Radio.displayName = 'Radio'
Mark.displayName = 'Mark'
Checked.displayName = 'Checked'
Unchecked.displayName = 'Unchecked'
}
RadioGroup.displayName = 'RadioGroup';
Radio.displayName = 'Radio';
Mark.displayName = 'Mark';
Checked.displayName = 'Checked';
Unchecked.displayName = 'Unchecked';
}

115

package.json
{
"name": "@accessible/radio",
"version": "3.0.1",
"version": "4.0.0",
"homepage": "https://github.com/accessible-ui/radio#readme",

@@ -9,3 +9,3 @@ "repository": "github:accessible-ui/radio",

"license": "MIT",
"description": "An accessible and versatile radio component for React",
"description": "🅰 An accessible and versatile radio component for React",
"keywords": [

@@ -25,9 +25,5 @@ "react",

"module": "dist/module/index.js",
"unpkg": "dist/umd/radio.js",
"source": "src/index.tsx",
"types": "types/index.d.ts",
"files": [
"/dist",
"/src",
"/types"
],
"exports": {

@@ -38,2 +34,3 @@ ".": {

"require": "./dist/main/index.js",
"umd": "./dist/umd/radio.js",
"source": "./src/index.tsx",

@@ -46,20 +43,24 @@ "types": "./types/index.d.ts",

},
"files": [
"/dist",
"/src",
"/types"
],
"sideEffects": false,
"scripts": {
"build": "npm run build-esm && npm run build-main && npm run build-module && npm run build-types",
"build-esm": "npm run compile -- -d dist/esm --env-name esm --out-file-extension .mjs",
"build-main": "npm run compile -- -d dist/main --env-name main",
"build-module": "npm run compile -- -d dist/module --env-name module",
"build-types": "tsc -p tsconfig.json -d --outDir types --emitDeclarationOnly",
"check-types": "tsc --noEmit -p tsconfig.json",
"compile": "babel src -x .ts,.tsx --ignore \"**/*.test.ts\",\"**/*.test.tsx\" --delete-dir-on-start",
"format": "prettier --write \"**/*.{ts,tsx,js,jsx,md,yml,json,eslintrc,prettierrc}\"",
"build": "lundle build",
"check-types": "lundle check-types",
"dev": "lundle build -f module,cjs -w",
"format": "prettier --write \"{,!(node_modules|dist|coverage)/**/}*.{ts,tsx,js,jsx,md,yml,json}\"",
"lint": "eslint . --ext .ts,.tsx",
"prepublishOnly": "npm run lint && npm run test && npm run build && npm run format",
"prepublishOnly": "cli-confirm \"Did you run 'yarn release' first? (y/N)\"",
"prerelease": "npm run validate && npm run build",
"release": "git add . && standard-version -a",
"test": "jest",
"validate": "npm run check-types && npm run lint && npm run test -- --coverage"
"validate": "lundle check-types && npm run lint && jest --coverage"
},
"husky": {
"hooks": {
"pre-commit": "npm run build-types && git add types && lint-staged"
"pre-commit": "lundle check-types && lint-staged",
"commit-msg": "commitlint -E HUSKY_GIT_PARAMS"
}

@@ -69,12 +70,61 @@ },

"**/*.{ts,tsx,js,jsx}": [
"eslint",
"eslint --fix",
"prettier --write"
],
"**/*.{md,yml,json,eslintrc,prettierrc}": [
"**/*.{md,yml,json}": [
"prettier --write"
]
},
"commitlint": {
"extends": [
"@commitlint/config-conventional"
]
},
"config": {
"commitizen": {
"path": "./node_modules/cz-conventional-changelog"
}
},
"eslintConfig": {
"extends": [
"lunde"
]
},
"eslintIgnore": [
"node_modules",
"coverage",
"dist",
"/types",
"test",
"*.config.js"
],
"jest": {
"moduleDirectories": [
"node_modules",
"src",
"test"
],
"testMatch": [
"<rootDir>/src/**/?(*.)test.{ts,tsx}"
],
"collectCoverageFrom": [
"**/src/**/*.{ts,tsx}"
],
"setupFilesAfterEnv": [
"./test/setup.js"
],
"snapshotResolver": "./test/resolve-snapshot.js",
"globals": {
"__DEV__": true
}
},
"prettier": {
"semi": false,
"singleQuote": true,
"jsxSingleQuote": true,
"bracketSpacing": false
},
"devDependencies": {
"@babel/preset-react": "latest",
"@lunde/babel-preset-es": "latest",
"@commitlint/cli": "latest",
"@commitlint/config-conventional": "latest",
"@testing-library/jest-dom": "latest",

@@ -87,14 +137,11 @@ "@testing-library/react": "latest",

"@types/react-dom": "latest",
"@typescript-eslint/eslint-plugin": "latest",
"@typescript-eslint/parser": "latest",
"babel-plugin-annotate-pure-calls": "latest",
"babel-plugin-optimize-react": "latest",
"babel-jest": "latest",
"cli-confirm": "latest",
"cz-conventional-changelog": "latest",
"eslint": "latest",
"eslint-import-resolver-jest": "latest",
"eslint-plugin-jest": "latest",
"eslint-plugin-react": "latest",
"eslint-plugin-react-hooks": "latest",
"eslint-config-lunde": "latest",
"husky": "latest",
"jest": "latest",
"lint-staged": "latest",
"lundle": "latest",
"prettier": "latest",

@@ -104,13 +151,13 @@ "react": "latest",

"react-test-renderer": "latest",
"ts-jest": "latest",
"standard-version": "latest",
"typescript": "latest"
},
"dependencies": {
"@accessible/visually-hidden": "^1.1.0",
"@accessible/visually-hidden": "^2.0.0",
"@react-hook/change": "^1.0.0",
"clsx": "^1.1.1"
},
"peerDependencies": {
"react": ">=16.8",
"react-dom": ">=16.8"
"react": ">=16.8"
}
}

101

README.md

@@ -38,3 +38,3 @@ <hr>

[Check out the example on CodeSandbox](https://codesandbox.io/s/accessibleradio-examples-olksf)
[Check out the example on **CodeSandbox**](https://codesandbox.io/s/accessibleradio-examples-olksf)

@@ -45,10 +45,10 @@ ```jsx harmony

const MyRadio = () => (
<RadioGroup name="favorite_food" defaultValue="pizza">
<RadioGroup name='favorite_food' defaultValue='pizza'>
<h2>What is your favorite food?</h2>
<label>
<Radio value="pizza">
<span className="my-radio">
<Mark checkedClass="checked" uncheckedClass="unchecked">
<span className="mark" />
<Radio value='pizza'>
<span className='my-radio'>
<Mark checkedClass='checked' uncheckedClass='unchecked'>
<span className='mark' />
</Mark>

@@ -61,6 +61,6 @@ </span>

<label>
<Radio value="tacos">
<span className="my-radio">
<Mark checkedClass="checked" uncheckedClass="unchecked">
<span className="mark" />
<Radio value='tacos'>
<span className='my-radio'>
<Mark checkedClass='checked' uncheckedClass='unchecked'>
<span className='mark' />
</Mark>

@@ -77,3 +77,3 @@ </span>

### `<RadioGroup>`
### &lt;RadioGroup&gt;

@@ -85,15 +85,15 @@ Creates context that controls the child [`<Radio>`](#radio) components. This is also where you set

| Prop | Type | Default | Required? | Description |
| ------------ | ------------------------------------------------------------------------------------------------ | ----------- | --------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| name | `string` | `undefined` | Yes | The name of the checkbox group (applied to each child [`<Radio>`](#radio) input) |
| value | <code>value: string &#0124; number &#0124; string[] &#0124; undefined</code> | `undefined` | No | Makes the radio group a controlled component which can no longer be updated with the `setValue` control or any [`<Radio>`](#radio) controls. It should be the same as one of the values in the child [`<Radio>`](#radio) inputs. |
| defaultValue | <code>value: string &#0124; number &#0124; string[] &#0124; undefined</code> | `undefined` | No | This sets the default radio group value. It should be the same as one of the values in the child [`<Radio>`](#radio) inputs. |
| onChange | <code>(value: string &#0124; number &#0124; string[] &#0124; undefined) => any</code> | `undefined` | No | This callback fires each time the checked value changes |
| children | <code>React.ReactNode &#0124; React.ReactNode[] &#0124; JSX.Element[] &#0124; JSX.Element</code> |
| Prop | Type | Default | Required? | Description |
| ------------ | ------------------------------------------------------------------------------------- | ----------- | --------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| name | `string` | `undefined` | Yes | The name of the checkbox group (applied to each child [`<Radio>`](#radio) input) |
| value | <code>value: string &#0124; number &#0124; string[] &#0124; undefined</code> | `undefined` | No | Makes the radio group a controlled component which can no longer be updated with the `setValue` control or any [`<Radio>`](#radio) controls. It should be the same as one of the values in the child [`<Radio>`](#radio) inputs. |
| defaultValue | <code>value: string &#0124; number &#0124; string[] &#0124; undefined</code> | `undefined` | No | This sets the default radio group value. It should be the same as one of the values in the child [`<Radio>`](#radio) inputs. |
| onChange | <code>(value: string &#0124; number &#0124; string[] &#0124; undefined) => any</code> | `undefined` | No | This callback fires each time the checked value changes |
| children | `React.ReactNode` | `undefined` | No | Any React nodes, including your [`Radio`](#radio) inputs |
### `useRadioGroup()`
### useRadioGroup()
A React hook that returns the [`RadioGroupContextValue`](#radiogroupcontextvalue) for the nearest `<RadioGroup>` parent.
### `RadioGroupContextValue`
### RadioGroupContextValue

@@ -117,3 +117,3 @@ ```typescript

### `<Radio>`
### &lt;Radio&gt;

@@ -127,9 +127,9 @@ Creates a visually hidden radio input that is focusable and accessible via keyboard navigation.

| Prop | Type | Default | Required? | Description |
| -------- | -------------------------------------------------------------------------------------------------------------- | ----------- | --------- | ------------------------------------------------------------ |
| disabled | `boolean` | `false` | No | Disables this radio option |
| onChange | `(checked: boolean) => any` | `undefined` | No | Called each time the `checked` state of this option changes. |
| children | <code>React.ReactNode &#124; React.ReactNode[] &#124; ((context: RadioContextValue) => React.ReactNode)</code> | `undefined` | No | Your custom styled radio. |
| Prop | Type | Default | Required? | Description |
| -------- | --------------------------- | ----------- | --------- | ------------------------------------------------------------ |
| disabled | `boolean` | `false` | No | Disables this radio option |
| onChange | `(checked: boolean) => any` | `undefined` | No | Called each time the `checked` state of this option changes. |
| children | `React.ReactNode` | `undefined` | No | Your custom styled radio. |
### `<Mark>`
### &lt;Mark&gt;

@@ -140,11 +140,11 @@ A convenient component for conditionally adding class names and styles when the `<Radio>` component is checked/unchecked. It must be a child of a `<Radio>`.

| Prop | Type | Default | Required? | Description |
| -------------- | --------------------- | ------------------ | --------- | ----------------------------------------------------------------------------------- |
| uncheckedClass | `string` | `undefined` | No | This class name will be applied to the child element when the radio is `unchecked`. |
| checkedClass | `string` | `"radio--checked"` | No | This class name will be applied to the child element when the radio is `checked`. |
| uncheckedStyle | `React.CSSProperties` | `undefined` | No | These styles will be applied to the child element when the radio is `unchecked`. |
| checkedStyle | `React.CSSProperties` | `undefined` | No | These styles name will be applied to the child element when the radio is `checked`. |
| children | `React.ReactNode` | `undefined` | Yes | The child you wish to render when the radio is checked. |
| Prop | Type | Default | Required? | Description |
| -------------- | --------------------- | ----------- | --------- | ----------------------------------------------------------------------------------- |
| uncheckedClass | `string` | `undefined` | No | This class name will be applied to the child element when the radio is `unchecked`. |
| checkedClass | `string` | `undefined` | No | This class name will be applied to the child element when the radio is `checked`. |
| uncheckedStyle | `React.CSSProperties` | `undefined` | No | These styles will be applied to the child element when the radio is `unchecked`. |
| checkedStyle | `React.CSSProperties` | `undefined` | No | These styles name will be applied to the child element when the radio is `checked`. |
| children | `React.ReactNode` | `undefined` | Yes | The child you wish to render when the radio is checked. |
### `<Checked>`
### &lt;Checked&gt;

@@ -160,3 +160,3 @@ The child of this component will only render when the `<Radio>` is in

### `<Unchecked>`
### &lt;Unchecked&gt;

@@ -172,7 +172,7 @@ The child of this component will only render when the `<Radio>` is in

### `useRadio()`
### useRadio()
A React hook that returns the [`RadioContextValue`](#radiocontextvalue) for the nearest `<Radio>` parent.
### `RadioContextValue`
### RadioContextValue

@@ -194,29 +194,4 @@ ```typescript

### `useChecked()`
Returns `true` when the `<Radio>` is checked, otherwise `false`
### `useFocused()`
Returns `true` when the `<Radio>` is focused, otherwise `false`
### `useDisabled()`
Returns `true` when the `<Radio>` is disabled, otherwise `false`
### `useControls()`
This hook provides access to the `<Radio>`'s `check` and `uncheck` functions
#### Example
```jsx harmony
const Component = () => {
const {check} = useControls()
return <button onClick={check}>Check me</button>
}
```
## LICENSE
MIT

109

types/index.d.ts

@@ -1,75 +0,60 @@

import * as React from 'react'
export declare const RadioGroupContext: React.Context<RadioGroupContextValue>
export declare const useRadioGroup: () => RadioGroupContextValue
export declare const RadioGroup: React.FC<RadioGroupProps>
import * as React from 'react';
export declare const useRadioGroup: () => RadioGroupContextValue;
export declare function RadioGroup({ name, value, defaultValue, onChange, children, }: RadioGroupProps): JSX.Element;
export declare namespace RadioGroup {
var displayName: string;
}
export declare const Radio: React.ForwardRefExoticComponent<RadioProps & React.RefAttributes<HTMLInputElement>>;
export declare const useRadio: () => RadioContextValue;
export declare function Checked({ children }: CheckedProps): JSX.Element | null;
export declare namespace Checked {
var displayName: string;
}
export declare function Unchecked({ children }: UncheckedProps): JSX.Element | null;
export declare namespace Unchecked {
var displayName: string;
}
export declare function Mark({ children, checkedClass, uncheckedClass, checkedStyle, uncheckedStyle, }: MarkProps): React.ReactElement<any, string | ((props: any) => React.ReactElement<any, string | any | (new (props: any) => React.Component<any, any, any>)> | null) | (new (props: any) => React.Component<any, any, any>)>;
export declare namespace Mark {
var displayName: string;
}
export interface RadioContextValue {
checked: boolean
check: () => void
uncheck: () => void
focused: boolean
disabled: boolean
checked: boolean;
check: () => void;
uncheck: () => void;
focused: boolean;
disabled: boolean;
}
export interface RadioProps {
name?: never
checked?: never
defaultChecked?: never
value: string | number | string[] | undefined
disabled?: boolean
onChange?: (checked: boolean) => any
onFocus?: (event: React.FocusEvent) => any
onBlur?: (event: React.FocusEvent) => any
children?:
| React.ReactNode
| React.ReactNode[]
| ((context: RadioContextValue) => React.ReactNode)
[property: string]: any
export interface RadioProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'onChange' | 'name' | 'checked' | 'defaultChecked'> {
value: string | number | string[] | undefined;
disabled?: boolean;
onChange?: (checked: boolean) => any;
onFocus?: (event: React.FocusEvent) => any;
onBlur?: (event: React.FocusEvent) => any;
children?: React.ReactNode;
}
export declare const Radio: React.ForwardRefExoticComponent<
Pick<RadioProps, string | number> & React.RefAttributes<HTMLInputElement>
>
export declare const RadioContext: React.Context<RadioContextValue>,
useRadio: () => RadioContextValue,
useChecked: () => boolean,
useFocused: () => boolean,
useDisabled: () => boolean,
useControls: () => {
check: () => void
uncheck: () => void
}
export declare const Checked: React.FC<CheckedProps>
export declare const Unchecked: React.FC<UncheckedProps>
export interface UncheckedProps {
children: React.ReactNode
children: React.ReactNode;
}
export interface CheckedProps {
children: React.ReactNode
children: React.ReactNode;
}
export interface RadioGroupContextValue {
name: string
value: string | number | string[] | undefined
setValue: (
value:
| string
| number
| string[]
| undefined
| ((
current: string | number | string[] | undefined
) => string | number | string[] | undefined)
) => void
name: string;
value: string | number | string[] | undefined;
setValue: (value: string | number | string[] | undefined | ((current: string | number | string[] | undefined) => string | number | string[] | undefined)) => void;
}
export interface RadioGroupProps {
name: string
value?: string | number | string[] | undefined
defaultValue?: string | number | string[] | undefined
onChange?: (value: string | number | string[] | undefined) => any
children: React.ReactNode | React.ReactNode[] | JSX.Element[] | JSX.Element
name: string;
value?: string | number | string[] | undefined;
defaultValue?: string | number | string[] | undefined;
onChange?: (value: string | number | string[] | undefined) => any;
children: React.ReactNode;
}
export interface MarkProps {
checkedClass?: string
uncheckedClass?: string
checkedStyle?: React.CSSProperties
uncheckedStyle?: React.CSSProperties
children: JSX.Element | React.ReactElement
checkedClass?: string;
uncheckedClass?: string;
checkedStyle?: React.CSSProperties;
uncheckedStyle?: React.CSSProperties;
children: JSX.Element | React.ReactElement;
}
export declare const Mark: React.FC<MarkProps>
dist/esm/index.mjs

Sorry, the diff of this file is not supported yet

src/__snapshots__/index.test.tsx.snap

Sorry, the diff of this file is not supported yet

src/index.test.tsx

Sorry, the diff of this file is not supported yet

src/index.tsx

Sorry, the diff of this file is not supported yet

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

About

Packages

npm

Go

Maven

PyPI

Rubygems

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc