@nex-ui/react
Version:
🎉 A beautiful, modern, and reliable React component library.
104 lines (101 loc) • 3.21 kB
JavaScript
"use client";
import { jsx } from 'react/jsx-runtime';
import { useMemo } from 'react';
import { useControlledState } from '@nex-ui/hooks';
import { CheckboxGroupProvider } from './CheckboxGroupContext.mjs';
import { useDefaultProps } from '../utils/useDefaultProps.mjs';
import { useStyles } from '../utils/useStyles.mjs';
import { useSlot } from '../utils/useSlot.mjs';
import { useNexUI } from '../provider/Context.mjs';
import { composeClasses } from '../utils/composeClasses.mjs';
import { checkboxGroupRecipe } from '../../theme/recipes/checkbox.mjs';
import { getUtilityClass } from '../utils/getUtilityClass.mjs';
const useSlotClasses = (ownerState)=>{
const { prefix } = useNexUI();
const { orientation } = ownerState;
return useMemo(()=>{
const dividerRoot = `${prefix}-checkbox-group`;
const slots = {
root: [
'root',
orientation
]
};
return composeClasses(slots, getUtilityClass(dividerRoot));
}, [
prefix,
orientation
]);
};
const CheckboxGroup = (inProps)=>{
const props = useDefaultProps({
name: 'CheckboxGroup',
props: inProps
});
const { name, children, disabled, onValueChange, size, color, radius, value, role = 'group', orientation = 'horizontal', defaultValue = [], ...remainingProps } = props;
const [values, setValues] = useControlledState(value, defaultValue, onValueChange);
const ownerState = {
...props,
orientation,
value: values
};
const classes = useSlotClasses(ownerState);
const styles = useStyles({
name: 'CheckboxGroup',
ownerState,
recipe: checkboxGroupRecipe
});
const [CheckboxGroupRoot, getCheckboxGroupRootProps] = useSlot({
ownerState,
elementType: 'div',
style: styles,
classNames: classes.root,
externalForwardedProps: remainingProps,
a11y: {
role
}
});
const ctx = useMemo(()=>({
disabled,
name,
size,
color,
radius,
toggleValue: (value)=>{
// istanbul ignore next
if (disabled) {
return;
}
let newValues;
if (values.includes(value)) {
newValues = values.filter((existingValue)=>existingValue !== value);
} else {
newValues = [
...values,
value
];
}
setValues(newValues);
},
isChecked: (value)=>{
return value ? values.includes(value) : false;
}
}), [
color,
disabled,
name,
radius,
setValues,
size,
values
]);
return /*#__PURE__*/ jsx(CheckboxGroupRoot, {
...getCheckboxGroupRootProps(),
children: /*#__PURE__*/ jsx(CheckboxGroupProvider, {
value: ctx,
children: children
})
});
};
CheckboxGroup.displayName = 'CheckboxGroup';
export { CheckboxGroup };