@nex-ui/react
Version:
🎉 A beautiful, modern, and reliable React component library.
137 lines (134 loc) • 4.33 kB
JavaScript
"use client";
import { jsxs, jsx } from 'react/jsx-runtime';
import { useMemo, useId } from 'react';
import { useControlledState } from '@nex-ui/hooks';
import { isString } from '@nex-ui/utils';
import { CheckboxGroupProvider } from './CheckboxGroupContext.mjs';
import { useDefaultProps } from '../utils/useDefaultProps.mjs';
import { useSlotClasses } from '../utils/useSlotClasses.mjs';
import { useStyles } from '../utils/useStyles.mjs';
import { useSlot } from '../utils/useSlot.mjs';
import { checkboxGroupRecipe } from '../../theme/recipes/checkbox.mjs';
const slots = [
'root',
'label',
'wrapper'
];
const useSlotAriaProps = (ownerState)=>{
const id = useId();
const { slotProps, label, role = 'group', 'aria-labelledby': labelledBy } = ownerState;
const stringLabel = isString(label);
const labelId = slotProps?.label?.id || (stringLabel ? id : undefined);
return useMemo(()=>({
root: {
role,
'aria-labelledby': labelledBy ?? labelId
},
label: {
id: labelId
}
}), [
role,
labelledBy,
labelId
]);
};
const CheckboxGroup = (inProps)=>{
const props = useDefaultProps({
name: 'CheckboxGroup',
props: inProps
});
const { name, children, disabled, slotProps, onValueChange, color, radius, value, label, size, classNames, orientation = 'horizontal', defaultValue = [], ...remainingProps } = props;
const [values, setValues] = useControlledState(value, defaultValue, onValueChange);
const ownerState = {
...props,
orientation,
value: values
};
const slotClasses = useSlotClasses({
name: 'CheckboxGroup',
slots,
classNames
});
const slotAriaProps = useSlotAriaProps(ownerState);
const styles = useStyles({
name: 'CheckboxGroup',
ownerState,
recipe: checkboxGroupRecipe
});
const [CheckboxGroupRoot, getCheckboxGroupRootProps] = useSlot({
elementType: 'div',
style: styles.root,
classNames: slotClasses.root,
externalForwardedProps: remainingProps,
a11y: slotAriaProps.root,
dataAttrs: {
orientation
}
});
const [CheckboxGroupLabel, getCheckboxGroupLabelProps] = useSlot({
elementType: 'h3',
classNames: slotClasses.label,
style: styles.label,
externalSlotProps: slotProps?.label,
a11y: slotAriaProps.label
});
const [CheckboxGroupWrapper, getCheckboxGroupWrapperProps] = useSlot({
elementType: 'div',
classNames: slotClasses.wrapper,
style: styles.wrapper,
externalSlotProps: slotProps?.wrapper
});
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 !== undefined ? values.includes(value) : false;
}
}), [
color,
disabled,
name,
radius,
setValues,
size,
values
]);
return /*#__PURE__*/ jsxs(CheckboxGroupRoot, {
...getCheckboxGroupRootProps(),
children: [
label ? /*#__PURE__*/ jsx(CheckboxGroupLabel, {
...getCheckboxGroupLabelProps(),
children: label
}) : null,
/*#__PURE__*/ jsx(CheckboxGroupWrapper, {
...getCheckboxGroupWrapperProps(),
children: /*#__PURE__*/ jsx(CheckboxGroupProvider, {
value: ctx,
children: children
})
})
]
});
};
CheckboxGroup.displayName = 'CheckboxGroup';
export { CheckboxGroup };