UNPKG

@yamada-ui/react

Version:

React UI components of the Yamada, by the Yamada, for the Yamada built with React and Emotion

1 lines 7.67 kB
{"version":3,"file":"use-checkbox.cjs","names":["useCheckboxGroupContext","useFieldProps","useControllableEventState","getRootProps: PropGetter<\"label\">","props","getInputProps: PropGetter<\"input\">","ariaDescribedby","visuallyHiddenAttributes","mergeRefs"],"sources":["../../../../src/components/checkbox/use-checkbox.ts"],"sourcesContent":["\"use client\"\n\nimport type { ChangeEvent, ChangeEventHandler, FocusEventHandler } from \"react\"\nimport type { HTMLProps, HTMLRefAttributes, PropGetter } from \"../../core\"\nimport type { FieldProps } from \"../field\"\nimport { useCallback, useId } from \"react\"\nimport { useControllableEventState } from \"../../hooks/use-controllable-state\"\nimport {\n ariaAttr,\n cx,\n dataAttr,\n handlerAll,\n isNumber,\n isUndefined,\n mergeRefs,\n visuallyHiddenAttributes,\n} from \"../../utils\"\nimport { useFieldProps } from \"../field\"\nimport { useCheckboxGroupContext } from \"./use-checkbox-group\"\n\nexport interface UseCheckboxProps<Y extends string = string>\n extends Omit<HTMLProps<\"label\">, \"onBlur\" | \"onChange\" | \"onFocus\" | \"ref\">,\n HTMLRefAttributes<\"input\">,\n FieldProps {\n /**\n * id assigned to input.\n */\n id?: string\n /**\n * The name of the input field in a checkbox.\n */\n name?: string\n /**\n * If `true`, the checkbox will be checked.\n */\n checked?: boolean\n /**\n * If `true`, the checkbox will be initially checked.\n *\n * @default false\n */\n defaultChecked?: boolean\n /**\n * If `true`, the checkbox will be indeterminate.\n *\n * @default false\n */\n indeterminate?: boolean\n /**\n * The value of the checkbox.\n */\n value?: Y\n /**\n * The callback invoked when the checkbox is blurred.\n */\n onBlur?: FocusEventHandler<HTMLInputElement>\n /**\n * The callback invoked when the checked state changes.\n */\n onChange?: ChangeEventHandler<HTMLInputElement>\n /**\n * The callback invoked when the checkbox is focused.\n */\n onFocus?: FocusEventHandler<HTMLInputElement>\n}\n\nexport const useCheckbox = <Y extends string = string>({\n \"aria-describedby\": ariaDescribedbyProp,\n ...props\n}: UseCheckboxProps<Y> = {}) => {\n const group = useCheckboxGroupContext()\n const {\n max,\n value: groupValue,\n getInputProps: getGroupInputProps,\n getLabelProps,\n } = group ?? {}\n const uuid = useId()\n const {\n props: {\n id,\n ref,\n name,\n checked: checkedProp,\n defaultChecked = false,\n disabled,\n indeterminate = false,\n readOnly,\n required,\n value,\n onChange: onChangeProp,\n ...rest\n },\n ariaProps: { \"aria-describedby\": ariaDescribedby, ...ariaProps },\n dataProps,\n eventProps,\n } = useFieldProps({\n id: group ? uuid : undefined,\n ...props,\n notSupportReadOnly: true,\n })\n const resolvedAriaDescribedby = group ? ariaDescribedbyProp : ariaDescribedby\n const resolvedChecked =\n !isUndefined(groupValue) && !isUndefined(value)\n ? groupValue.includes(value)\n : checkedProp\n const [checked, setChecked] = useControllableEventState({\n defaultValue: defaultChecked,\n value: resolvedChecked,\n onChange: onChangeProp,\n })\n const trulyDisabled =\n !checked && isNumber(max) && group && group.value.length >= max\n const interactive = !(readOnly || trulyDisabled)\n\n const onChange = useCallback(\n (ev: ChangeEvent<HTMLInputElement>) => {\n if (!interactive) return (ev.defaultPrevented = true)\n\n if (indeterminate) ev.target.checked = true\n\n setChecked(ev)\n },\n [interactive, indeterminate, setChecked],\n )\n\n const getRootProps: PropGetter<\"label\"> = useCallback(\n (props = {}) => {\n const sharedProps = {\n ...dataProps,\n \"data-checked\": dataAttr(checked),\n \"data-indeterminate\": dataAttr(indeterminate),\n ...rest,\n ...props,\n }\n\n return getLabelProps?.(sharedProps) ?? sharedProps\n },\n [dataProps, checked, indeterminate, rest, getLabelProps],\n )\n\n const getInputProps: PropGetter<\"input\"> = useCallback(\n ({ \"aria-describedby\": ariaDescribedby, ...props } = {}) => {\n const sharedProps = {\n ...dataProps,\n ...ariaProps,\n id,\n type: \"checkbox\",\n name,\n style: visuallyHiddenAttributes.style,\n \"aria-checked\": indeterminate ? (\"mixed\" as const) : checked,\n \"aria-describedby\": cx(resolvedAriaDescribedby, ariaDescribedby),\n \"aria-disabled\": ariaAttr(!interactive),\n \"data-checked\": dataAttr(checked),\n \"data-indeterminate\": dataAttr(indeterminate),\n checked,\n disabled,\n readOnly,\n required,\n value,\n ...props,\n ref: mergeRefs(props.ref, ref),\n onBlur: handlerAll(props.onBlur, eventProps.onBlur),\n onChange: handlerAll(props.onChange, onChange),\n onFocus: handlerAll(props.onFocus, eventProps.onFocus),\n }\n\n return getGroupInputProps?.(sharedProps) ?? sharedProps\n },\n [\n dataProps,\n ariaProps,\n id,\n name,\n indeterminate,\n checked,\n resolvedAriaDescribedby,\n interactive,\n disabled,\n readOnly,\n required,\n value,\n ref,\n eventProps,\n onChange,\n getGroupInputProps,\n ],\n )\n\n const getIndicatorProps: PropGetter = useCallback(\n (props = {}) => ({\n ...dataProps,\n \"aria-hidden\": \"true\",\n \"data-checked\": dataAttr(checked),\n \"data-indeterminate\": dataAttr(indeterminate),\n ...props,\n }),\n [dataProps, checked, indeterminate],\n )\n\n return {\n checked,\n indeterminate,\n getIndicatorProps,\n getInputProps,\n getRootProps,\n onChange,\n }\n}\n\nexport type UseCheckboxReturn = ReturnType<typeof useCheckbox>\n"],"mappings":";;;;;;;;;;;;;;AAkEA,MAAa,eAA0C,EACrD,oBAAoB,oBACpB,GAAG,UACoB,EAAE,KAAK;CAC9B,MAAM,QAAQA,oDAAyB;CACvC,MAAM,EACJ,KACA,OAAO,YACP,eAAe,oBACf,kBACE,SAAS,EAAE;CACf,MAAM,yBAAc;CACpB,MAAM,EACJ,OAAO,EACL,IACA,KACA,MACA,SAAS,aACT,iBAAiB,OACjB,UACA,gBAAgB,OAChB,UACA,UACA,OACA,UAAU,aACV,GAAG,QAEL,WAAW,EAAE,oBAAoB,gBAAiB,GAAG,aACrD,WACA,eACEC,sCAAc;EAChB,IAAI,QAAQ,OAAO;EACnB,GAAG;EACH,oBAAoB;EACrB,CAAC;CACF,MAAM,0BAA0B,QAAQ,sBAAsB;CAK9D,MAAM,CAAC,SAAS,cAAcC,qEAA0B;EACtD,cAAc;EACd,OALA,oDAAa,WAAW,IAAI,oDAAa,MAAM,GAC3C,WAAW,SAAS,MAAM,GAC1B;EAIJ,UAAU;EACX,CAAC;CACF,MAAM,gBACJ,CAAC,2DAAoB,IAAI,IAAI,SAAS,MAAM,MAAM,UAAU;CAC9D,MAAM,cAAc,EAAE,YAAY;CAElC,MAAM,mCACH,OAAsC;AACrC,MAAI,CAAC,YAAa,QAAQ,GAAG,mBAAmB;AAEhD,MAAI,cAAe,IAAG,OAAO,UAAU;AAEvC,aAAW,GAAG;IAEhB;EAAC;EAAa;EAAe;EAAW,CACzC;CAED,MAAMC,uCACH,UAAQ,EAAE,KAAK;EACd,MAAM,cAAc;GAClB,GAAG;GACH,gEAAyB,QAAQ;GACjC,sEAA+B,cAAc;GAC7C,GAAG;GACH,GAAGC;GACJ;AAED,SAAO,gBAAgB,YAAY,IAAI;IAEzC;EAAC;EAAW;EAAS;EAAe;EAAM;EAAc,CACzD;CAED,MAAMC,wCACH,EAAE,oBAAoBC,kBAAiB,GAAGF,YAAU,EAAE,KAAK;EAC1D,MAAM,cAAc;GAClB,GAAG;GACH,GAAG;GACH;GACA,MAAM;GACN;GACA,OAAOG,qCAAyB;GAChC,gBAAgB,gBAAiB,UAAoB;GACrD,8DAAuB,yBAAyBD,kBAAgB;GAChE,iEAA0B,CAAC,YAAY;GACvC,gEAAyB,QAAQ;GACjC,sEAA+B,cAAc;GAC7C;GACA;GACA;GACA;GACA;GACA,GAAGF;GACH,KAAKI,sBAAUJ,QAAM,KAAK,IAAI;GAC9B,0DAAmBA,QAAM,QAAQ,WAAW,OAAO;GACnD,4DAAqBA,QAAM,UAAU,SAAS;GAC9C,2DAAoBA,QAAM,SAAS,WAAW,QAAQ;GACvD;AAED,SAAO,qBAAqB,YAAY,IAAI;IAE9C;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD,CACF;AAaD,QAAO;EACL;EACA;EACA,2CAbC,UAAQ,EAAE,MAAM;GACf,GAAG;GACH,eAAe;GACf,gEAAyB,QAAQ;GACjC,sEAA+B,cAAc;GAC7C,GAAGA;GACJ,GACD;GAAC;GAAW;GAAS;GAAc,CACpC;EAMC;EACA;EACA;EACD"}