@nopends-ui/checkbox-group
Version:
Checkbox Group is a component that allows users to select multiple options from a list of options.
306 lines (299 loc) • 10.1 kB
JavaScript
'use client';
;
var shared = require('@nopends-ui/shared');
var React = require('react');
function _interopNamespace(e) {
if (e && e.__esModule) return e;
var n = Object.create(null);
if (e) {
Object.keys(e).forEach(function (k) {
if (k !== 'default') {
var d = Object.getOwnPropertyDescriptor(e, k);
Object.defineProperty(n, k, d.get ? d : {
enumerable: true,
get: function () { return e[k]; }
});
}
});
}
n.default = e;
return Object.freeze(n);
}
var React__namespace = /*#__PURE__*/_interopNamespace(React);
var ROOT_NAME = "CheckboxGroupRoot";
var [CheckboxGroupProvider, useCheckboxGroup] = shared.createContext(ROOT_NAME);
var CheckboxGroupRoot = React__namespace.forwardRef((props, ref) => {
const {
value: valueProp,
defaultValue,
onValueChange,
onValidate,
disabled = false,
invalid = false,
readOnly = false,
required = false,
dir: dirProp,
orientation = "vertical",
name,
children,
...rootProps
} = props;
const [validationMessage, setValidationMessage] = React__namespace.useState();
const isInvalid = invalid || !!validationMessage;
const [value = [], setValue] = shared.useControllableState({
prop: valueProp,
defaultProp: defaultValue,
onChange: (newValue) => {
if (onValidate) {
const validationResult = onValidate(newValue);
if (typeof validationResult === "string" || Array.isArray(validationResult)) {
setValidationMessage(validationResult);
} else if (validationResult === true || validationResult == null) {
setValidationMessage(void 0);
}
}
onValueChange?.(newValue);
}
});
const id = shared.useId();
const labelId = shared.useId();
const descriptionId = shared.useId();
const messageId = shared.useId();
const dir = shared.useDirection(dirProp);
const onItemCheckedChange = React__namespace.useCallback(
(payload, checked) => {
if (readOnly) return;
const newValue = checked ? [...value, payload] : value.filter((v) => v !== payload);
setValue(newValue);
},
[setValue, value, readOnly]
);
const onReset = React__namespace.useCallback(() => {
setValue(defaultValue ?? []);
setValidationMessage(void 0);
}, [defaultValue, setValue]);
return /* @__PURE__ */ React__namespace.createElement(
CheckboxGroupProvider,
{
value,
onValueChange: setValue,
onItemCheckedChange,
onReset,
disabled,
required,
dir,
orientation,
isInvalid,
id,
labelId,
descriptionId,
messageId,
validationMessage,
readOnly
},
/* @__PURE__ */ React__namespace.createElement(
shared.Primitive.div,
{
role: "group",
"aria-labelledby": labelId,
"aria-describedby": `${descriptionId} ${isInvalid ? messageId : ""}`,
"aria-readonly": readOnly,
"aria-orientation": orientation,
"data-orientation": orientation,
"data-disabled": disabled ? "" : void 0,
"data-invalid": isInvalid ? "" : void 0,
dir,
...rootProps,
ref
},
children
)
);
});
CheckboxGroupRoot.displayName = ROOT_NAME;
var Root = CheckboxGroupRoot;
var LABEL_NAME = "CheckboxGroupLabel";
var CheckboxGroupLabel = React__namespace.forwardRef((props, ref) => {
const context = useCheckboxGroup(LABEL_NAME);
return /* @__PURE__ */ React__namespace.createElement(
shared.Primitive.label,
{
"data-disabled": context.disabled ? "" : void 0,
id: context.labelId,
...props,
ref
}
);
});
CheckboxGroupLabel.displayName = LABEL_NAME;
var Label = CheckboxGroupLabel;
var LIST_NAME = "CheckboxGroupList";
var CheckboxGroupList = React__namespace.forwardRef((props, ref) => {
const context = useCheckboxGroup(LIST_NAME);
const id = shared.useId();
return /* @__PURE__ */ React__namespace.createElement(
shared.Primitive.div,
{
role: "group",
id,
"data-orientation": context.orientation,
"data-invalid": context.isInvalid ? "" : void 0,
...props,
ref
}
);
});
CheckboxGroupList.displayName = LIST_NAME;
var List = CheckboxGroupList;
var ITEM_NAME = "CheckboxGroupItem";
var [CheckboxGroupItemProvider, useCheckboxGroupItem] = shared.createContext(ITEM_NAME);
var CheckboxGroupItem = React__namespace.forwardRef((props, ref) => {
const { value, disabled, required = false, name, ...itemProps } = props;
const context = useCheckboxGroup(ITEM_NAME);
const id = shared.useId();
const isDisabled = disabled || context.disabled || false;
const isChecked = context.value.includes(value);
const isRequired = context.required && context.value.length === 0 || required && !isChecked;
const { isFormControl, trigger, onTriggerChange } = shared.useFormControl();
const composedRef = shared.useComposedRefs(ref, (node) => onTriggerChange(node));
const lastClickTimeRef = React__namespace.useRef(0);
const hasConsumerStoppedPropagationRef = React__namespace.useRef(false);
return /* @__PURE__ */ React__namespace.createElement(
CheckboxGroupItemProvider,
{
value,
checked: isChecked,
disabled: isDisabled
},
/* @__PURE__ */ React__namespace.createElement(
shared.Primitive.button,
{
type: "button",
role: "checkbox",
"aria-checked": isChecked,
"aria-disabled": isDisabled,
"aria-invalid": context.isInvalid,
"data-state": getDataState(isChecked),
"data-orientation": context.orientation,
"data-disabled": isDisabled ? "" : void 0,
"data-invalid": context.isInvalid ? "" : void 0,
disabled: isDisabled,
id,
...itemProps,
ref: composedRef,
onClick: shared.composeEventHandlers(props.onClick, (event) => {
const now = Date.now();
if (now - lastClickTimeRef.current < 50) {
event.stopPropagation();
return;
}
lastClickTimeRef.current = now;
context.onItemCheckedChange(value, !isChecked);
if (isFormControl) {
hasConsumerStoppedPropagationRef.current = event.isPropagationStopped();
if (!hasConsumerStoppedPropagationRef.current)
event.stopPropagation();
}
}),
onKeyDown: shared.composeEventHandlers(props.onKeyDown, (event) => {
if (event.key === "Enter") event.preventDefault();
})
}
),
isFormControl && /* @__PURE__ */ React__namespace.createElement(
shared.VisuallyHiddenInput,
{
type: "checkbox",
control: trigger,
bubbles: !hasConsumerStoppedPropagationRef.current,
name,
value,
checked: isChecked,
disabled: isDisabled,
readOnly: context.readOnly,
required: isRequired,
onReset: () => context.onReset()
}
)
);
});
function getDataState(checked) {
return checked ? "checked" : "unchecked";
}
CheckboxGroupItem.displayName = ITEM_NAME;
var Item = CheckboxGroupItem;
var INDICATOR_NAME = "CheckboxGroupIndicator";
var CheckboxGroupIndicator = React__namespace.forwardRef((props, ref) => {
const { forceMount = false, ...indicatorProps } = props;
const itemContext = useCheckboxGroupItem(INDICATOR_NAME);
return /* @__PURE__ */ React__namespace.createElement(shared.Presence, { present: forceMount || itemContext.checked }, /* @__PURE__ */ React__namespace.createElement(
shared.Primitive.span,
{
"data-state": getDataState(itemContext.checked),
"data-disabled": itemContext.disabled ? "" : void 0,
...indicatorProps,
ref
}
));
});
CheckboxGroupIndicator.displayName = INDICATOR_NAME;
var Indicator = CheckboxGroupIndicator;
var DESCRIPTION_NAME = "CheckboxGroupDescription";
var CheckboxGroupDescription = React__namespace.forwardRef((props, ref) => {
const { announce = false, hideOnError = false, ...descriptionProps } = props;
const context = useCheckboxGroup(DESCRIPTION_NAME);
if (hideOnError && context.isInvalid) {
return null;
}
return /* @__PURE__ */ React__namespace.createElement(
shared.Primitive.div,
{
id: context.descriptionId,
"aria-live": announce ? "polite" : "off",
"aria-describedby": context.labelId,
"aria-invalid": context.isInvalid,
"data-disabled": context.disabled ? "" : void 0,
"data-invalid": context.isInvalid ? "" : void 0,
...descriptionProps,
ref
}
);
});
CheckboxGroupDescription.displayName = DESCRIPTION_NAME;
var Description = CheckboxGroupDescription;
var MESSAGE_NAME = "CheckboxGroupMessage";
var CheckboxGroupMessage = React__namespace.forwardRef((props, ref) => {
const { announce = false, children, ...messageProps } = props;
const context = useCheckboxGroup(MESSAGE_NAME);
if (!context.isInvalid) return null;
const message = context.validationMessage || children;
const messageContent = Array.isArray(message) ? message.join(" ") : message;
return /* @__PURE__ */ React__namespace.createElement(
shared.Primitive.div,
{
id: context.messageId,
"aria-live": announce ? "polite" : "off",
"data-disabled": context.disabled ? "" : void 0,
"data-invalid": context.isInvalid ? "" : void 0,
...messageProps,
ref
},
messageContent
);
});
CheckboxGroupMessage.displayName = MESSAGE_NAME;
var Message = CheckboxGroupMessage;
exports.CheckboxGroupDescription = CheckboxGroupDescription;
exports.CheckboxGroupIndicator = CheckboxGroupIndicator;
exports.CheckboxGroupItem = CheckboxGroupItem;
exports.CheckboxGroupLabel = CheckboxGroupLabel;
exports.CheckboxGroupList = CheckboxGroupList;
exports.CheckboxGroupMessage = CheckboxGroupMessage;
exports.CheckboxGroupRoot = CheckboxGroupRoot;
exports.Description = Description;
exports.Indicator = Indicator;
exports.Item = Item;
exports.Label = Label;
exports.List = List;
exports.Message = Message;
exports.Root = Root;