@react-native-aria/checkbox 0.2.3 → 0.2.4-alpha.0

package/lib/commonjs/useCheckbox.js

@@ -29,12 +29,10 @@ function useCheckbox(props, state, inputRef) {
   } = props;
   return {
     inputProps: (0, _utils.mergeProps)(inputProps, {
-      checked: isSelected,
-      accessibilityRole: 'checkbox',
-      accessibilityState: {
-        checked: isIndeterminate ? 'mixed' : isSelected,
-        disabled: props.isDisabled
-      }
+      'checked': isSelected,
+      'role': 'checkbox',
+      'aria-checked': isIndeterminate ? 'mixed' : isSelected,
+      'aria-disabled': props.isDisabled
     })
   };
 }

package/lib/commonjs/useCheckbox.js.map

@@ -1 +1 @@
-{"version":3,"sources":["useCheckbox.ts"],"names":["useCheckbox","props","state","inputRef","inputProps","isSelected","isIndeterminate","checked","accessibilityRole","accessibilityState","disabled","isDisabled"],"mappings":";;;;;;;AAEA;;AACA;;AAQA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACO,SAASA,WAAT,CACLC,KADK,EAELC,KAFK,EAGLC,QAHK,EAIS;AACd,MAAI;AAAEC,IAAAA;AAAF,MAAiB,uBAAUH,KAAV,EAAiBC,KAAjB,EAAwBC,QAAxB,CAArB;AACA,MAAI;AAAEE,IAAAA;AAAF,MAAiBH,KAArB;AAEA,MAAI;AAAEI,IAAAA;AAAF,MAAsBL,KAA1B;AAEA,SAAO;AACLG,IAAAA,UAAU,EAAE,uBAAWA,UAAX,EAAuB;AACjCG,MAAAA,OAAO,EAAEF,UADwB;AAEjCG,MAAAA,iBAAiB,EAAE,UAFc;AAGjCC,MAAAA,kBAAkB,EAAE;AAClBF,QAAAA,OAAO,EAAED,eAAe,GAAG,OAAH,GAAaD,UADnB;AAElBK,QAAAA,QAAQ,EAAET,KAAK,CAACU;AAFE;AAHa,KAAvB;AADP,GAAP;AAUD","sourcesContent":["import type { RefObject } from 'react';\nimport type { ToggleState } from '@react-stately/toggle';\nimport { mergeProps } from '@react-aria/utils';\nimport { useToggle } from '@react-native-aria/toggle';\nimport { AriaCheckboxProps } from '@react-types/checkbox';\n\nexport interface CheckboxAria {\n  /** Props for the input or Pressable/Touchable element. */\n  inputProps: any;\n}\n\n/**\n * Provides the behavior and accessibility implementation for a checkbox component.\n * Checkboxes allow users to select multiple items from a list of individual items, or\n * to mark one individual item as selected.\n * @param props - Props for the checkbox.\n * @param state - State for the checkbox, as returned by `useToggleState`.\n * @param inputRef - A ref for the HTML input element.\n */\nexport function useCheckbox(\n  props: AriaCheckboxProps,\n  state: ToggleState,\n  inputRef: RefObject<HTMLInputElement>\n): CheckboxAria {\n  let { inputProps } = useToggle(props, state, inputRef);\n  let { isSelected } = state;\n\n  let { isIndeterminate } = props;\n\n  return {\n    inputProps: mergeProps(inputProps, {\n      checked: isSelected,\n      accessibilityRole: 'checkbox',\n      accessibilityState: {\n        checked: isIndeterminate ? 'mixed' : isSelected,\n        disabled: props.isDisabled,\n      },\n    }),\n  };\n}\n"]}
+{"version":3,"sources":["useCheckbox.ts"],"names":["useCheckbox","props","state","inputRef","inputProps","isSelected","isIndeterminate","isDisabled"],"mappings":";;;;;;;AAEA;;AACA;;AAQA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACO,SAASA,WAAT,CACLC,KADK,EAELC,KAFK,EAGLC,QAHK,EAIS;AACd,MAAI;AAAEC,IAAAA;AAAF,MAAiB,uBAAUH,KAAV,EAAiBC,KAAjB,EAAwBC,QAAxB,CAArB;AACA,MAAI;AAAEE,IAAAA;AAAF,MAAiBH,KAArB;AAEA,MAAI;AAAEI,IAAAA;AAAF,MAAsBL,KAA1B;AAEA,SAAO;AACLG,IAAAA,UAAU,EAAE,uBAAWA,UAAX,EAAuB;AACjC,iBAAWC,UADsB;AAEjC,cAAQ,UAFyB;AAGjC,sBAAgBC,eAAe,GAAG,OAAH,GAAaD,UAHX;AAIjC,uBAAiBJ,KAAK,CAACM;AAJU,KAAvB;AADP,GAAP;AAQD","sourcesContent":["import type { RefObject } from 'react';\nimport type { ToggleState } from '@react-stately/toggle';\nimport { mergeProps } from '@react-aria/utils';\nimport { useToggle } from '@react-native-aria/toggle';\nimport { AriaCheckboxProps } from '@react-types/checkbox';\n\nexport interface CheckboxAria {\n  /** Props for the input or Pressable/Touchable element. */\n  inputProps: any;\n}\n\n/**\n * Provides the behavior and accessibility implementation for a checkbox component.\n * Checkboxes allow users to select multiple items from a list of individual items, or\n * to mark one individual item as selected.\n * @param props - Props for the checkbox.\n * @param state - State for the checkbox, as returned by `useToggleState`.\n * @param inputRef - A ref for the HTML input element.\n */\nexport function useCheckbox(\n  props: AriaCheckboxProps,\n  state: ToggleState,\n  inputRef: RefObject<HTMLInputElement>\n): CheckboxAria {\n  let { inputProps } = useToggle(props, state, inputRef);\n  let { isSelected } = state;\n\n  let { isIndeterminate } = props;\n\n  return {\n    inputProps: mergeProps(inputProps, {\n      'checked': isSelected,\n      'role': 'checkbox',\n      'aria-checked': isIndeterminate ? 'mixed' : isSelected,\n      'aria-disabled': props.isDisabled,\n    }),\n  };\n}\n"]}

package/lib/commonjs/useCheckboxGroup.js

@@ -24,10 +24,8 @@ function useCheckboxGroup(props, _state) {
   });
   return {
     groupProps: (0, _utils.mergeProps)(domProps, {
-      accessibilityState: {
-        disabled: isDisabled
-      },
-      accessibilityLabel: (0, _utils2.getLabel)(props)
+      ' aria-disabled': isDisabled,
+      'aria-label': (0, _utils2.getLabel)(props)
     }),
     labelProps: {}
   };

package/lib/commonjs/useCheckboxGroup.js.map

@@ -1 +1 @@
-{"version":3,"sources":["useCheckboxGroup.ts"],"names":["useCheckboxGroup","props","_state","isDisabled","domProps","labelable","groupProps","accessibilityState","disabled","accessibilityLabel","labelProps"],"mappings":";;;;;;;AACA;;AACA;;AAUA;AACA;AACA;AACA;AACA;AACA;AACO,SAASA,gBAAT,CACLC,KADK,EAELC,MAFK,EAGc;AACnB,MAAI;AAAEC,IAAAA;AAAF,MAAiBF,KAArB;AAEA,MAAIG,QAAQ,GAAG,2BAAeH,KAAf,EAAsB;AAAEI,IAAAA,SAAS,EAAE;AAAb,GAAtB,CAAf;AAEA,SAAO;AACLC,IAAAA,UAAU,EAAE,uBAAWF,QAAX,EAAqB;AAC/BG,MAAAA,kBAAkB,EAAE;AAClBC,QAAAA,QAAQ,EAAEL;AADQ,OADW;AAI/BM,MAAAA,kBAAkB,EAAE,sBAASR,KAAT;AAJW,KAArB,CADP;AAOLS,IAAAA,UAAU,EAAE;AAPP,GAAP;AASD","sourcesContent":["import type { CheckboxGroupState } from '@react-stately/checkbox';\nimport { mergeProps, filterDOMProps } from '@react-aria/utils';\nimport { getLabel } from '@react-native-aria/utils';\nimport { AriaCheckboxGroupProps } from '@react-types/checkbox';\n\ninterface CheckboxGroupAria {\n  /** Props for the checkbox group wrapper element. */\n  groupProps: any;\n  /** Props for the checkbox group's visible label (if any). */\n  labelProps: any;\n}\n\n/**\n * Provides the behavior and accessibility implementation for a checkbox group component.\n * Checkbox groups allow users to select multiple items from a list of options.\n * @param props - Props for the checkbox group.\n * @param state - State for the checkbox group, as returned by `useCheckboxGroupState`.\n */\nexport function useCheckboxGroup(\n  props: AriaCheckboxGroupProps,\n  _state: CheckboxGroupState\n): CheckboxGroupAria {\n  let { isDisabled } = props;\n\n  let domProps = filterDOMProps(props, { labelable: true });\n\n  return {\n    groupProps: mergeProps(domProps, {\n      accessibilityState: {\n        disabled: isDisabled,\n      },\n      accessibilityLabel: getLabel(props),\n    }),\n    labelProps: {},\n  };\n}\n"]}
+{"version":3,"sources":["useCheckboxGroup.ts"],"names":["useCheckboxGroup","props","_state","isDisabled","domProps","labelable","groupProps","labelProps"],"mappings":";;;;;;;AACA;;AACA;;AAUA;AACA;AACA;AACA;AACA;AACA;AACO,SAASA,gBAAT,CACLC,KADK,EAELC,MAFK,EAGc;AACnB,MAAI;AAAEC,IAAAA;AAAF,MAAiBF,KAArB;AAEA,MAAIG,QAAQ,GAAG,2BAAeH,KAAf,EAAsB;AAAEI,IAAAA,SAAS,EAAE;AAAb,GAAtB,CAAf;AAEA,SAAO;AACLC,IAAAA,UAAU,EAAE,uBAAWF,QAAX,EAAqB;AAC/B,wBAAkBD,UADa;AAE/B,oBAAc,sBAASF,KAAT;AAFiB,KAArB,CADP;AAKLM,IAAAA,UAAU,EAAE;AALP,GAAP;AAOD","sourcesContent":["import type { CheckboxGroupState } from '@react-stately/checkbox';\nimport { mergeProps, filterDOMProps } from '@react-aria/utils';\nimport { getLabel } from '@react-native-aria/utils';\nimport { AriaCheckboxGroupProps } from '@react-types/checkbox';\n\ninterface CheckboxGroupAria {\n  /** Props for the checkbox group wrapper element. */\n  groupProps: any;\n  /** Props for the checkbox group's visible label (if any). */\n  labelProps: any;\n}\n\n/**\n * Provides the behavior and accessibility implementation for a checkbox group component.\n * Checkbox groups allow users to select multiple items from a list of options.\n * @param props - Props for the checkbox group.\n * @param state - State for the checkbox group, as returned by `useCheckboxGroupState`.\n */\nexport function useCheckboxGroup(\n  props: AriaCheckboxGroupProps,\n  _state: CheckboxGroupState\n): CheckboxGroupAria {\n  let { isDisabled } = props;\n\n  let domProps = filterDOMProps(props, { labelable: true });\n\n  return {\n    groupProps: mergeProps(domProps, {\n      ' aria-disabled': isDisabled,\n      'aria-label': getLabel(props),\n    }),\n    labelProps: {},\n  };\n}\n"]}

package/lib/module/useCheckbox.js

@@ -21,12 +21,10 @@ export function useCheckbox(props, state, inputRef) {
   } = props;
   return {
     inputProps: mergeProps(inputProps, {
-      checked: isSelected,
-      accessibilityRole: 'checkbox',
-      accessibilityState: {
-        checked: isIndeterminate ? 'mixed' : isSelected,
-        disabled: props.isDisabled
-      }
+      'checked': isSelected,
+      'role': 'checkbox',
+      'aria-checked': isIndeterminate ? 'mixed' : isSelected,
+      'aria-disabled': props.isDisabled
     })
   };
 }

package/lib/module/useCheckbox.js.map

@@ -1 +1 @@
-{"version":3,"sources":["useCheckbox.ts"],"names":["mergeProps","useToggle","useCheckbox","props","state","inputRef","inputProps","isSelected","isIndeterminate","checked","accessibilityRole","accessibilityState","disabled","isDisabled"],"mappings":"AAEA,SAASA,UAAT,QAA2B,mBAA3B;AACA,SAASC,SAAT,QAA0B,2BAA1B;;AAQA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,SAASC,WAAT,CACLC,KADK,EAELC,KAFK,EAGLC,QAHK,EAIS;AACd,MAAI;AAAEC,IAAAA;AAAF,MAAiBL,SAAS,CAACE,KAAD,EAAQC,KAAR,EAAeC,QAAf,CAA9B;AACA,MAAI;AAAEE,IAAAA;AAAF,MAAiBH,KAArB;AAEA,MAAI;AAAEI,IAAAA;AAAF,MAAsBL,KAA1B;AAEA,SAAO;AACLG,IAAAA,UAAU,EAAEN,UAAU,CAACM,UAAD,EAAa;AACjCG,MAAAA,OAAO,EAAEF,UADwB;AAEjCG,MAAAA,iBAAiB,EAAE,UAFc;AAGjCC,MAAAA,kBAAkB,EAAE;AAClBF,QAAAA,OAAO,EAAED,eAAe,GAAG,OAAH,GAAaD,UADnB;AAElBK,QAAAA,QAAQ,EAAET,KAAK,CAACU;AAFE;AAHa,KAAb;AADjB,GAAP;AAUD","sourcesContent":["import type { RefObject } from 'react';\nimport type { ToggleState } from '@react-stately/toggle';\nimport { mergeProps } from '@react-aria/utils';\nimport { useToggle } from '@react-native-aria/toggle';\nimport { AriaCheckboxProps } from '@react-types/checkbox';\n\nexport interface CheckboxAria {\n  /** Props for the input or Pressable/Touchable element. */\n  inputProps: any;\n}\n\n/**\n * Provides the behavior and accessibility implementation for a checkbox component.\n * Checkboxes allow users to select multiple items from a list of individual items, or\n * to mark one individual item as selected.\n * @param props - Props for the checkbox.\n * @param state - State for the checkbox, as returned by `useToggleState`.\n * @param inputRef - A ref for the HTML input element.\n */\nexport function useCheckbox(\n  props: AriaCheckboxProps,\n  state: ToggleState,\n  inputRef: RefObject<HTMLInputElement>\n): CheckboxAria {\n  let { inputProps } = useToggle(props, state, inputRef);\n  let { isSelected } = state;\n\n  let { isIndeterminate } = props;\n\n  return {\n    inputProps: mergeProps(inputProps, {\n      checked: isSelected,\n      accessibilityRole: 'checkbox',\n      accessibilityState: {\n        checked: isIndeterminate ? 'mixed' : isSelected,\n        disabled: props.isDisabled,\n      },\n    }),\n  };\n}\n"]}
+{"version":3,"sources":["useCheckbox.ts"],"names":["mergeProps","useToggle","useCheckbox","props","state","inputRef","inputProps","isSelected","isIndeterminate","isDisabled"],"mappings":"AAEA,SAASA,UAAT,QAA2B,mBAA3B;AACA,SAASC,SAAT,QAA0B,2BAA1B;;AAQA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,SAASC,WAAT,CACLC,KADK,EAELC,KAFK,EAGLC,QAHK,EAIS;AACd,MAAI;AAAEC,IAAAA;AAAF,MAAiBL,SAAS,CAACE,KAAD,EAAQC,KAAR,EAAeC,QAAf,CAA9B;AACA,MAAI;AAAEE,IAAAA;AAAF,MAAiBH,KAArB;AAEA,MAAI;AAAEI,IAAAA;AAAF,MAAsBL,KAA1B;AAEA,SAAO;AACLG,IAAAA,UAAU,EAAEN,UAAU,CAACM,UAAD,EAAa;AACjC,iBAAWC,UADsB;AAEjC,cAAQ,UAFyB;AAGjC,sBAAgBC,eAAe,GAAG,OAAH,GAAaD,UAHX;AAIjC,uBAAiBJ,KAAK,CAACM;AAJU,KAAb;AADjB,GAAP;AAQD","sourcesContent":["import type { RefObject } from 'react';\nimport type { ToggleState } from '@react-stately/toggle';\nimport { mergeProps } from '@react-aria/utils';\nimport { useToggle } from '@react-native-aria/toggle';\nimport { AriaCheckboxProps } from '@react-types/checkbox';\n\nexport interface CheckboxAria {\n  /** Props for the input or Pressable/Touchable element. */\n  inputProps: any;\n}\n\n/**\n * Provides the behavior and accessibility implementation for a checkbox component.\n * Checkboxes allow users to select multiple items from a list of individual items, or\n * to mark one individual item as selected.\n * @param props - Props for the checkbox.\n * @param state - State for the checkbox, as returned by `useToggleState`.\n * @param inputRef - A ref for the HTML input element.\n */\nexport function useCheckbox(\n  props: AriaCheckboxProps,\n  state: ToggleState,\n  inputRef: RefObject<HTMLInputElement>\n): CheckboxAria {\n  let { inputProps } = useToggle(props, state, inputRef);\n  let { isSelected } = state;\n\n  let { isIndeterminate } = props;\n\n  return {\n    inputProps: mergeProps(inputProps, {\n      'checked': isSelected,\n      'role': 'checkbox',\n      'aria-checked': isIndeterminate ? 'mixed' : isSelected,\n      'aria-disabled': props.isDisabled,\n    }),\n  };\n}\n"]}

package/lib/module/useCheckboxGroup.js

@@ -16,10 +16,8 @@ export function useCheckboxGroup(props, _state) {
   });
   return {
     groupProps: mergeProps(domProps, {
-      accessibilityState: {
-        disabled: isDisabled
-      },
-      accessibilityLabel: getLabel(props)
+      ' aria-disabled': isDisabled,
+      'aria-label': getLabel(props)
     }),
     labelProps: {}
   };

package/lib/module/useCheckboxGroup.js.map

@@ -1 +1 @@
-{"version":3,"sources":["useCheckboxGroup.ts"],"names":["mergeProps","filterDOMProps","getLabel","useCheckboxGroup","props","_state","isDisabled","domProps","labelable","groupProps","accessibilityState","disabled","accessibilityLabel","labelProps"],"mappings":"AACA,SAASA,UAAT,EAAqBC,cAArB,QAA2C,mBAA3C;AACA,SAASC,QAAT,QAAyB,0BAAzB;;AAUA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,SAASC,gBAAT,CACLC,KADK,EAELC,MAFK,EAGc;AACnB,MAAI;AAAEC,IAAAA;AAAF,MAAiBF,KAArB;AAEA,MAAIG,QAAQ,GAAGN,cAAc,CAACG,KAAD,EAAQ;AAAEI,IAAAA,SAAS,EAAE;AAAb,GAAR,CAA7B;AAEA,SAAO;AACLC,IAAAA,UAAU,EAAET,UAAU,CAACO,QAAD,EAAW;AAC/BG,MAAAA,kBAAkB,EAAE;AAClBC,QAAAA,QAAQ,EAAEL;AADQ,OADW;AAI/BM,MAAAA,kBAAkB,EAAEV,QAAQ,CAACE,KAAD;AAJG,KAAX,CADjB;AAOLS,IAAAA,UAAU,EAAE;AAPP,GAAP;AASD","sourcesContent":["import type { CheckboxGroupState } from '@react-stately/checkbox';\nimport { mergeProps, filterDOMProps } from '@react-aria/utils';\nimport { getLabel } from '@react-native-aria/utils';\nimport { AriaCheckboxGroupProps } from '@react-types/checkbox';\n\ninterface CheckboxGroupAria {\n  /** Props for the checkbox group wrapper element. */\n  groupProps: any;\n  /** Props for the checkbox group's visible label (if any). */\n  labelProps: any;\n}\n\n/**\n * Provides the behavior and accessibility implementation for a checkbox group component.\n * Checkbox groups allow users to select multiple items from a list of options.\n * @param props - Props for the checkbox group.\n * @param state - State for the checkbox group, as returned by `useCheckboxGroupState`.\n */\nexport function useCheckboxGroup(\n  props: AriaCheckboxGroupProps,\n  _state: CheckboxGroupState\n): CheckboxGroupAria {\n  let { isDisabled } = props;\n\n  let domProps = filterDOMProps(props, { labelable: true });\n\n  return {\n    groupProps: mergeProps(domProps, {\n      accessibilityState: {\n        disabled: isDisabled,\n      },\n      accessibilityLabel: getLabel(props),\n    }),\n    labelProps: {},\n  };\n}\n"]}
+{"version":3,"sources":["useCheckboxGroup.ts"],"names":["mergeProps","filterDOMProps","getLabel","useCheckboxGroup","props","_state","isDisabled","domProps","labelable","groupProps","labelProps"],"mappings":"AACA,SAASA,UAAT,EAAqBC,cAArB,QAA2C,mBAA3C;AACA,SAASC,QAAT,QAAyB,0BAAzB;;AAUA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,SAASC,gBAAT,CACLC,KADK,EAELC,MAFK,EAGc;AACnB,MAAI;AAAEC,IAAAA;AAAF,MAAiBF,KAArB;AAEA,MAAIG,QAAQ,GAAGN,cAAc,CAACG,KAAD,EAAQ;AAAEI,IAAAA,SAAS,EAAE;AAAb,GAAR,CAA7B;AAEA,SAAO;AACLC,IAAAA,UAAU,EAAET,UAAU,CAACO,QAAD,EAAW;AAC/B,wBAAkBD,UADa;AAE/B,oBAAcJ,QAAQ,CAACE,KAAD;AAFS,KAAX,CADjB;AAKLM,IAAAA,UAAU,EAAE;AALP,GAAP;AAOD","sourcesContent":["import type { CheckboxGroupState } from '@react-stately/checkbox';\nimport { mergeProps, filterDOMProps } from '@react-aria/utils';\nimport { getLabel } from '@react-native-aria/utils';\nimport { AriaCheckboxGroupProps } from '@react-types/checkbox';\n\ninterface CheckboxGroupAria {\n  /** Props for the checkbox group wrapper element. */\n  groupProps: any;\n  /** Props for the checkbox group's visible label (if any). */\n  labelProps: any;\n}\n\n/**\n * Provides the behavior and accessibility implementation for a checkbox group component.\n * Checkbox groups allow users to select multiple items from a list of options.\n * @param props - Props for the checkbox group.\n * @param state - State for the checkbox group, as returned by `useCheckboxGroupState`.\n */\nexport function useCheckboxGroup(\n  props: AriaCheckboxGroupProps,\n  _state: CheckboxGroupState\n): CheckboxGroupAria {\n  let { isDisabled } = props;\n\n  let domProps = filterDOMProps(props, { labelable: true });\n\n  return {\n    groupProps: mergeProps(domProps, {\n      ' aria-disabled': isDisabled,\n      'aria-label': getLabel(props),\n    }),\n    labelProps: {},\n  };\n}\n"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@react-native-aria/checkbox",
-  "version": "0.2.3",
+  "version": "0.2.4-alpha.0",
   "description": "mono repo setup with bob",
   "main": "lib/commonjs/index",
   "module": "lib/module/index",

package/src/useCheckbox.ts

@@ -29,12 +29,10 @@ export function useCheckbox(
 
   return {
     inputProps: mergeProps(inputProps, {
-      checked: isSelected,
-      accessibilityRole: 'checkbox',
-      accessibilityState: {
-        checked: isIndeterminate ? 'mixed' : isSelected,
-        disabled: props.isDisabled,
-      },
+      'checked': isSelected,
+      'role': 'checkbox',
+      'aria-checked': isIndeterminate ? 'mixed' : isSelected,
+      'aria-disabled': props.isDisabled,
     }),
   };
 }

package/src/useCheckboxGroup.ts

@@ -26,10 +26,8 @@ export function useCheckboxGroup(
 
   return {
     groupProps: mergeProps(domProps, {
-      accessibilityState: {
-        disabled: isDisabled,
-      },
-      accessibilityLabel: getLabel(props),
+      ' aria-disabled': isDisabled,
+      'aria-label': getLabel(props),
     }),
     labelProps: {},
   };