@yamada-ui/react
Version:
React UI components of the Yamada, by the Yamada, for the Yamada built with React and Emotion
1 lines • 6.33 kB
Source Map (JSON)
{"version":3,"file":"use-checkbox-group.cjs","names":["createContext","useFieldProps","useControllableState","getRootProps: PropGetter","props","mergeRefs","visuallyHiddenAttributes"],"sources":["../../../../src/components/checkbox/use-checkbox-group.ts"],"sourcesContent":["\"use client\"\n\nimport type { ChangeEvent } from \"react\"\nimport type { HTMLProps, PropGetter } from \"../../core\"\nimport type { FieldProps } from \"../field\"\nimport { useCallback } from \"react\"\nimport { useControllableState } from \"../../hooks/use-controllable-state\"\nimport {\n ariaAttr,\n createContext,\n cx,\n dataAttr,\n handlerAll,\n isNumber,\n isObject,\n isString,\n isUndefined,\n mergeRefs,\n visuallyHiddenAttributes,\n} from \"../../utils\"\nimport { useFieldProps } from \"../field\"\n\ninterface CheckboxGroupContext\n extends Omit<UseCheckboxGroupReturn, \"getRootProps\"> {}\n\nconst [CheckboxGroupContext, useCheckboxGroupContext] =\n createContext<CheckboxGroupContext>({\n name: \"CheckboxGroupContext\",\n strict: false,\n })\n\nexport { CheckboxGroupContext, useCheckboxGroupContext }\n\nexport interface UseCheckboxGroupProps<Y extends string = string>\n extends Omit<HTMLProps, \"defaultValue\" | \"onChange\" | \"value\">,\n FieldProps {\n /**\n * The initial value of the checkbox group.\n *\n * @default []\n */\n defaultValue?: Y[]\n /**\n * The maximum number of checkboxes that can be checked.\n */\n max?: number\n /**\n * The value of the checkbox group.\n */\n value?: Y[]\n /**\n * The callback fired when any children checkbox is checked or unchecked.\n */\n onChange?: (value: Y[]) => void\n}\n\nexport const useCheckboxGroup = <Y extends string = string>(\n props: UseCheckboxGroupProps<Y> = {},\n) => {\n const {\n context: { labelId } = {},\n props: {\n defaultValue = [],\n disabled,\n max,\n readOnly,\n required,\n value: valueProp,\n onChange: onChangeProp,\n ...rest\n },\n ariaProps: { \"aria-describedby\": ariaDescribedbyProp, ...ariaProps },\n dataProps,\n eventProps,\n } = useFieldProps(props)\n const interactive = !(readOnly || disabled)\n const [value, setValue] = useControllableState({\n defaultValue,\n value: valueProp,\n onChange: onChangeProp,\n })\n\n const onChange = useCallback(\n (valueOrEv: ChangeEvent<HTMLInputElement> | Y) => {\n if (!interactive) return\n\n if (isObject(valueOrEv)) valueOrEv = valueOrEv.target.value as Y\n\n setValue((prev) => {\n if (prev.includes(valueOrEv)) {\n return prev.filter((prevValue) => prevValue !== valueOrEv)\n } else if (!isNumber(max) || prev.length < max) {\n return [...prev, valueOrEv]\n } else {\n return prev\n }\n })\n },\n [interactive, max, setValue],\n )\n\n const getRootProps: PropGetter = useCallback(\n ({\n ref,\n \"aria-describedby\": ariaDescribedby,\n \"aria-labelledby\": ariaLabelledby,\n ...props\n } = {}) => ({\n ...dataProps,\n \"aria-describedby\": cx(ariaDescribedbyProp, ariaDescribedby),\n \"aria-labelledby\": cx(labelId, ariaLabelledby),\n role: \"group\",\n ...rest,\n ...props,\n ref: mergeRefs(ref, rest.ref),\n }),\n [ariaDescribedbyProp, dataProps, labelId, rest],\n )\n\n const getInputProps: PropGetter<\"input\"> = useCallback(\n (props = {}) => {\n const checked =\n !isUndefined(value) &&\n (isString(props.value) || isNumber(props.value)) &&\n value.includes(props.value as Y)\n const trulyDisabled = !checked && isNumber(max) && value.length >= max\n\n return {\n ...dataProps,\n ...ariaProps,\n type: \"checkbox\",\n style: visuallyHiddenAttributes.style,\n \"aria-checked\": checked,\n \"aria-disabled\": ariaAttr(trulyDisabled),\n \"data-checked\": dataAttr(checked),\n \"data-disabled\": dataAttr(trulyDisabled),\n checked,\n disabled: trulyDisabled,\n readOnly,\n required,\n ...props,\n onBlur: handlerAll(props.onBlur, eventProps.onBlur),\n onChange: handlerAll(props.onChange, onChange),\n onFocus: handlerAll(props.onFocus, eventProps.onFocus),\n }\n },\n [\n ariaProps,\n dataProps,\n eventProps,\n max,\n onChange,\n readOnly,\n required,\n value,\n ],\n )\n\n const getLabelProps: PropGetter<\"label\"> = useCallback(\n (props) => ({\n ...dataProps,\n ...props,\n }),\n [dataProps],\n )\n\n return {\n max,\n value,\n getInputProps,\n getLabelProps,\n getRootProps,\n onChange,\n }\n}\n\nexport type UseCheckboxGroupReturn = ReturnType<typeof useCheckboxGroup>\n"],"mappings":";;;;;;;;;;;;;;AAyBA,MAAM,CAAC,sBAAsB,2BAC3BA,8BAAoC;CAClC,MAAM;CACN,QAAQ;CACT,CAAC;AA2BJ,MAAa,oBACX,QAAkC,EAAE,KACjC;CACH,MAAM,EACJ,SAAS,EAAE,YAAY,EAAE,EACzB,OAAO,EACL,eAAe,EAAE,EACjB,UACA,KACA,UACA,UACA,OAAO,WACP,UAAU,aACV,GAAG,QAEL,WAAW,EAAE,oBAAoB,oBAAqB,GAAG,aACzD,WACA,eACEC,sCAAc,MAAM;CACxB,MAAM,cAAc,EAAE,YAAY;CAClC,MAAM,CAAC,OAAO,YAAYC,gEAAqB;EAC7C;EACA,OAAO;EACP,UAAU;EACX,CAAC;CAEF,MAAM,mCACH,cAAiD;AAChD,MAAI,CAAC,YAAa;AAElB,sDAAa,UAAU,CAAE,aAAY,UAAU,OAAO;AAEtD,YAAU,SAAS;AACjB,OAAI,KAAK,SAAS,UAAU,CAC1B,QAAO,KAAK,QAAQ,cAAc,cAAc,UAAU;YACjD,iDAAU,IAAI,IAAI,KAAK,SAAS,IACzC,QAAO,CAAC,GAAG,MAAM,UAAU;OAE3B,QAAO;IAET;IAEJ;EAAC;EAAa;EAAK;EAAS,CAC7B;CAED,MAAMC,uCACH,EACC,KACA,oBAAoB,iBACpB,mBAAmB,eACnB,GAAGC,YACD,EAAE,MAAM;EACV,GAAG;EACH,8DAAuB,qBAAqB,gBAAgB;EAC5D,6DAAsB,SAAS,eAAe;EAC9C,MAAM;EACN,GAAG;EACH,GAAGA;EACH,KAAKC,sBAAU,KAAK,KAAK,IAAI;EAC9B,GACD;EAAC;EAAqB;EAAW;EAAS;EAAK,CAChD;AAiDD,QAAO;EACL;EACA;EACA,uCAjDC,UAAQ,EAAE,KAAK;GACd,MAAM,UACJ,oDAAa,MAAM,qDACTD,QAAM,MAAM,oDAAaA,QAAM,MAAM,KAC/C,MAAM,SAASA,QAAM,MAAW;GAClC,MAAM,gBAAgB,CAAC,2DAAoB,IAAI,IAAI,MAAM,UAAU;AAEnE,UAAO;IACL,GAAG;IACH,GAAG;IACH,MAAM;IACN,OAAOE,qCAAyB;IAChC,gBAAgB;IAChB,iEAA0B,cAAc;IACxC,gEAAyB,QAAQ;IACjC,iEAA0B,cAAc;IACxC;IACA,UAAU;IACV;IACA;IACA,GAAGF;IACH,0DAAmBA,QAAM,QAAQ,WAAW,OAAO;IACnD,4DAAqBA,QAAM,UAAU,SAAS;IAC9C,2DAAoBA,QAAM,SAAS,WAAW,QAAQ;IACvD;KAEH;GACE;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACD,CACF;EAcC,uCAXC,aAAW;GACV,GAAG;GACH,GAAGA;GACJ,GACD,CAAC,UAAU,CACZ;EAOC;EACA;EACD"}