@codefast-ui/checkbox-group
Version:
Accessible checkbox group component built with React and Radix UI
151 lines (150 loc) • 6.66 kB
JavaScript
;
var __webpack_require__ = {};
(()=>{
__webpack_require__.d = (exports1, definition)=>{
for(var key in definition)if (__webpack_require__.o(definition, key) && !__webpack_require__.o(exports1, key)) Object.defineProperty(exports1, key, {
enumerable: true,
get: definition[key]
});
};
})();
(()=>{
__webpack_require__.o = (obj, prop)=>Object.prototype.hasOwnProperty.call(obj, prop);
})();
(()=>{
__webpack_require__.r = (exports1)=>{
if ('undefined' != typeof Symbol && Symbol.toStringTag) Object.defineProperty(exports1, Symbol.toStringTag, {
value: 'Module'
});
Object.defineProperty(exports1, '__esModule', {
value: true
});
};
})();
var __webpack_exports__ = {};
__webpack_require__.r(__webpack_exports__);
__webpack_require__.d(__webpack_exports__, {
Indicator: ()=>CheckboxGroupIndicator,
Item: ()=>CheckboxGroupItem,
Root: ()=>CheckboxGroup,
createCheckboxGroupScope: ()=>createCheckboxGroupScope,
CheckboxGroup: ()=>CheckboxGroup,
CheckboxGroupIndicator: ()=>CheckboxGroupIndicator,
CheckboxGroupItem: ()=>CheckboxGroupItem
});
const jsx_runtime_namespaceObject = require("react/jsx-runtime");
const external_react_namespaceObject = require("react");
const react_checkbox_namespaceObject = require("@radix-ui/react-checkbox");
const react_context_namespaceObject = require("@radix-ui/react-context");
const react_direction_namespaceObject = require("@radix-ui/react-direction");
const react_roving_focus_namespaceObject = require("@radix-ui/react-roving-focus");
const react_use_controllable_state_namespaceObject = require("@radix-ui/react-use-controllable-state");
const CHECKBOX_GROUP_NAME = "CheckboxGroup";
const [createCheckboxGroupContext, createCheckboxGroupScope] = (0, react_context_namespaceObject.createContextScope)(CHECKBOX_GROUP_NAME, [
react_roving_focus_namespaceObject.createRovingFocusGroupScope,
react_checkbox_namespaceObject.createCheckboxScope
]);
const useRovingFocusGroupScope = (0, react_roving_focus_namespaceObject.createRovingFocusGroupScope)();
const useCheckboxScope = (0, react_checkbox_namespaceObject.createCheckboxScope)();
const [CheckboxGroupContextProvider, useCheckboxGroupContext] = createCheckboxGroupContext(CHECKBOX_GROUP_NAME);
function CheckboxGroup({ __scopeCheckboxGroup, defaultValue, dir, disabled = false, loop = true, name, onValueChange, orientation, required = false, value: valueProperty, ...props }) {
const rovingFocusGroupScope = useRovingFocusGroupScope(__scopeCheckboxGroup);
const direction = (0, react_direction_namespaceObject.useDirection)(dir);
const [value = [], setValue] = (0, react_use_controllable_state_namespaceObject.useControllableState)({
defaultProp: defaultValue,
onChange: onValueChange,
prop: valueProperty
});
const handleItemCheck = (0, external_react_namespaceObject.useCallback)((itemValue)=>{
setValue((previousValue = [])=>[
...previousValue,
itemValue
]);
}, [
setValue
]);
const handleItemUncheck = (0, external_react_namespaceObject.useCallback)((itemValue)=>{
setValue((previousValue = [])=>{
if (required && 1 === previousValue.length && previousValue[0] === itemValue) return previousValue;
return previousValue.filter((inputValue)=>inputValue !== itemValue);
});
}, [
setValue,
required
]);
return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(CheckboxGroupContextProvider, {
disabled: disabled,
name: name,
required: required,
scope: __scopeCheckboxGroup,
value: value,
onItemCheck: handleItemCheck,
onItemUncheck: handleItemUncheck,
children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(react_roving_focus_namespaceObject.Root, {
asChild: true,
...rovingFocusGroupScope,
dir: direction,
loop: loop,
orientation: orientation,
children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
"data-disabled": disabled ? "" : void 0,
dir: direction,
role: "group",
...props
})
})
});
}
const ITEM_NAME = "CheckboxGroupItem";
function CheckboxGroupItem({ __scopeCheckboxGroup, disabled, ...props }) {
const context = useCheckboxGroupContext(ITEM_NAME, __scopeCheckboxGroup);
const isDisabled = context.disabled || disabled;
const rovingFocusGroupScope = useRovingFocusGroupScope(__scopeCheckboxGroup);
const checkboxScope = useCheckboxScope(__scopeCheckboxGroup);
const checked = context.value?.includes(props.value);
return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(react_roving_focus_namespaceObject.Item, {
asChild: true,
...rovingFocusGroupScope,
active: checked,
focusable: !isDisabled,
children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(react_checkbox_namespaceObject.Root, {
"aria-label": props.value,
checked: checked,
disabled: isDisabled,
name: context.name,
required: context.required,
...checkboxScope,
...props,
onCheckedChange: (checkedState)=>{
if (checkedState) context.onItemCheck(props.value);
else context.onItemUncheck(props.value);
}
})
});
}
function CheckboxGroupIndicator({ __scopeCheckboxGroup, ...props }) {
const checkboxScope = useCheckboxScope(__scopeCheckboxGroup);
return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(react_checkbox_namespaceObject.Indicator, {
...checkboxScope,
...props
});
}
exports.CheckboxGroup = __webpack_exports__.CheckboxGroup;
exports.CheckboxGroupIndicator = __webpack_exports__.CheckboxGroupIndicator;
exports.CheckboxGroupItem = __webpack_exports__.CheckboxGroupItem;
exports.Indicator = __webpack_exports__.Indicator;
exports.Item = __webpack_exports__.Item;
exports.Root = __webpack_exports__.Root;
exports.createCheckboxGroupScope = __webpack_exports__.createCheckboxGroupScope;
for(var __webpack_i__ in __webpack_exports__)if (-1 === [
"CheckboxGroup",
"CheckboxGroupIndicator",
"CheckboxGroupItem",
"Indicator",
"Item",
"Root",
"createCheckboxGroupScope"
].indexOf(__webpack_i__)) exports[__webpack_i__] = __webpack_exports__[__webpack_i__];
Object.defineProperty(exports, '__esModule', {
value: true
});