react-aria/dist/private/toggle/useToggle.mjs.map

Spectrum UI components in React

{"mappings":";;;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;;;;;AAkEM,SAAS,0CACd,KAAsB,EACtB,KAAkB,EAClB,GAAuC;IAEvC,IAAI,cACF,aAAa,mBACb,aAAa,cACb,KAAK,QACL,IAAI,QACJ,IAAI,YACJ,QAAQ,cACR,UAAU,sBACV,qBAAqB,QACrB,cAAc,SAAS,EACvB,mBAAmB,cAAc,EACjC,oBAAoB,eAAe,gBACnC,YAAY,cACZ,UAAU,iBACV,aAAa,WACb,OAAO,aACP,SAAS,WACT,OAAO,EACR,GAAG;IAEJ,+FAA+F;IAC/F,IAAI,kBAAkB,CAAA,GAAA,6BAAqB,EAAE;QAAC,GAAG,KAAK;QAAE,OAAO,MAAM,UAAU;IAAA;IAC/E,IAAI,aAAC,SAAS,oBAAE,gBAAgB,qBAAE,iBAAiB,EAAC,GAAG,gBAAgB,iBAAiB;IAExF,CAAA,GAAA,yCAAgB,EAAE,OAAO,iBAAiB;IAE1C,IAAI,WAAiD,CAAA;QACnD,iFAAiF;QACjF,wEAAwE;QACxE,EAAE,eAAe;QACjB,MAAM,WAAW,CAAC,CAAA,GAAA,yCAAa,EAAE,GAAG,OAAO;IAC7C;IAEA,IAAI,cAAc,YAAY;IAC9B,IAAI,eAAe,aAAa,QAAQ,kBAAkB;IAC1D,IAAI,CAAC,eAAe,CAAC,gBAAgB,QAAQ,GAAG,CAAC,QAAQ,KAAK,cAC5D,QAAQ,IAAI,CACV;IAIJ,uFAAuF;IACvF,IAAI,cAAC,UAAU,aAAE,SAAS,EAAC,GAAG,CAAA,GAAA,yCAAO,EAAE;sBACrC;oBACA;uBACA;iBACA;mBACA;iBACA;oBACA;IACF;IAEA,mCAAmC;IACnC,IAAI,CAAC,gBAAgB,gBAAgB,GAAG,CAAA,GAAA,eAAO,EAAE;IACjD,IAAI,EAAC,YAAY,UAAU,EAAC,GAAG,CAAA,GAAA,yCAAO,EAAE;QACtC,cAAa,CAAC;YACZ,2DAA2D;YAC3D,IAAI,EAAE,WAAW,KAAK,cAAc,EAAE,WAAW,KAAK,WAAW;gBAC/D,EAAE,mBAAmB;gBACrB;YACF;YAEA,eAAe;YACf,gBAAgB;YAChB,gBAAgB;QAClB;QACA,YAAW,CAAC;YACV,2DAA2D;YAC3D,IAAI,EAAE,WAAW,KAAK,cAAc,EAAE,WAAW,KAAK,WAAW;gBAC/D,EAAE,mBAAmB;gBACrB;YACF;YAEA,aAAa;YACb,gBAAgB;YAChB,gBAAgB;QAClB;QACA,WAAU,CAAC;YACT,IAAI,EAAE,WAAW,KAAK,cAAc,EAAE,WAAW,KAAK,WAAW;gBAC/D,EAAE,mBAAmB;gBACrB;YACF;YAEA,YAAY;QACd;iBACA;QACA,SAAQ,CAAC;YACP,IAAI,EAAE,WAAW,KAAK,cAAc,EAAE,WAAW,KAAK,WAAW;gBAC/D,EAAE,mBAAmB;gBACrB;YACF;YAEA,UAAU;YACV,MAAM,MAAM;YACZ,IAAI,OAAO,EAAE;YAEb,mBAAmB;YACnB,IAAI,EAAC,CAAC,CAAA,GAAA,iCAAyB,EAAE,EAAE,oBAAoB,EAAC,GAAG;YAE3D,IAAI,oBAAC,gBAAgB,EAAC,GAAG,uBAAuB,uBAAuB;YAEvE;QACF;QACA,YAAY,cAAc;IAC5B;IAEA,IAAI,kBAAC,cAAc,EAAC,GAAG,CAAA,GAAA,yCAAW,EAAE,OAAO;IAC3C,IAAI,eAAe,CAAA,GAAA,yCAAS,EAAE,YAAY;IAC1C,IAAI,WAAW,CAAA,GAAA,yCAAa,EAAE,OAAO;QAAC,WAAW;IAAI;IAErD,CAAA,GAAA,yCAAW,EAAE,KAAK,MAAM,eAAe,EAAE,MAAM,WAAW;IAE1D,+EAA+E;IAC/E,IAAI,mBAAmB,CAAA,GAAA,yCAAS;IAChC,IAAI,oBAAoB,CAAA,GAAA,yCAAS;IAEjC,OAAO;QACL,YAAY,CAAA,GAAA,yCAAS,EAAE,YAAY;YAAC,SAAS,CAAA,IAAK,EAAE,cAAc;QAAE;QACpE,YAAY,CAAA,GAAA,yCAAS,EAAE,UAAU;YAC/B,SAAS,MAAM,UAAU;YACzB,iBAAiB,AAAC,cAAc,uBAAuB,UAAW;YAClE,UAAU,cAAc,uBAAuB;YAC/C,gBAAgB,aAAa,MAAM,eAAe,KAAK,aAAa;YACpE,qBAAqB,KAAK,CAAC,oBAAoB;YAC/C,iBAAiB,KAAK,CAAC,gBAAgB;YACvC,iBAAiB,cAAc;YAC/B,oBACE;gBAAC,iBAAiB,EAAE;gBAAE,kBAAkB,EAAE;gBAAE;aAAgB,CAAC,MAAM,CAAC,SAAS,IAAI,CAAC,QAClF;sBACF;YACA,UAAU;YACV,GAAI,SAAS,OAAO,CAAC,IAAI;uBAAC;YAAK,CAAC;kBAChC;kBACA;YACA,MAAM;YACN,GAAG,YAAY;QACjB;0BACA;2BACA;QACA,YAAY,MAAM,UAAU;QAC5B,WAAW,aAAa;oBACxB;oBACA;QACA,WAAW,aAAa,MAAM,eAAe,KAAK;0BAClD;2BACA;IACF;AACF","sources":["packages/react-aria/src/toggle/useToggle.ts"],"sourcesContent":["/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {\n  AriaLabelingProps,\n  AriaValidationProps,\n  DOMAttributesWithRef,\n  FocusableDOMProps,\n  InputDOMProps,\n  PressEvents,\n  RefObject,\n  ValidationResult\n} from '@react-types/shared';\nimport {ChangeEventHandler, InputHTMLAttributes, LabelHTMLAttributes, useState} from 'react';\nimport {filterDOMProps} from '../utils/filterDOMProps';\nimport {getEventTarget} from '../utils/shadowdom/DOMFunctions';\nimport {mergeProps} from '../utils/mergeProps';\nimport {\n  privateValidationStateProp,\n  useFormValidationState\n} from 'react-stately/private/form/useFormValidationState';\nimport {ToggleProps, ToggleState} from 'react-stately/useToggleState';\nimport {useFocusable} from '../interactions/useFocusable';\nimport {useFormReset} from '../utils/useFormReset';\nimport {useFormValidation} from '../form/useFormValidation';\nimport {usePress} from '../interactions/usePress';\nimport {useSlotId2} from '../utils/useSlot';\n\nexport interface AriaToggleProps\n  extends\n    ToggleProps,\n    FocusableDOMProps,\n    AriaLabelingProps,\n    AriaValidationProps,\n    InputDOMProps,\n    PressEvents {\n  /**\n   * Identifies the element (or elements) whose contents or presence are controlled by the current\n   * element.\n   */\n  'aria-controls'?: string;\n}\n\nexport interface ToggleAria extends ValidationResult {\n  /** Props to be spread on the label element. */\n  labelProps: LabelHTMLAttributes<HTMLLabelElement>;\n  /** Props to be spread on the input element. */\n  inputProps: InputHTMLAttributes<HTMLInputElement>;\n  /** Props for the checkbox description element, if any. */\n  descriptionProps: DOMAttributesWithRef<HTMLElement>;\n  /** Props for the checkbox error message element, if any. */\n  errorMessageProps: DOMAttributesWithRef<HTMLElement>;\n  /** Whether the toggle is selected. */\n  isSelected: boolean;\n  /** Whether the toggle is in a pressed state. */\n  isPressed: boolean;\n  /** Whether the toggle is disabled. */\n  isDisabled: boolean;\n  /** Whether the toggle is read only. */\n  isReadOnly: boolean;\n  /** Whether the toggle is invalid. */\n  isInvalid: boolean;\n}\n\n/**\n * Handles interactions for toggle elements, e.g. Checkboxes and Switches.\n */\nexport function useToggle(\n  props: AriaToggleProps,\n  state: ToggleState,\n  ref: RefObject<HTMLInputElement | null>\n): ToggleAria {\n  let {\n    isDisabled = false,\n    isReadOnly = false,\n    value,\n    name,\n    form,\n    children,\n    isRequired,\n    validationBehavior = 'aria',\n    'aria-label': ariaLabel,\n    'aria-labelledby': ariaLabelledby,\n    'aria-describedby': ariaDescribedby,\n    onPressStart,\n    onPressEnd,\n    onPressChange,\n    onPress,\n    onPressUp,\n    onClick\n  } = props;\n\n  // Create validation state here because it doesn't make sense to add to general useToggleState.\n  let validationState = useFormValidationState({...props, value: state.isSelected});\n  let {isInvalid, validationErrors, validationDetails} = validationState.displayValidation;\n\n  useFormValidation(props, validationState, ref);\n\n  let onChange: ChangeEventHandler<HTMLInputElement> = e => {\n    // since we spread props on label, onChange will end up there as well as in here.\n    // so we have to stop propagation at the lowest level that we care about\n    e.stopPropagation();\n    state.setSelected(getEventTarget(e).checked);\n  };\n\n  let hasChildren = children != null;\n  let hasAriaLabel = ariaLabel != null || ariaLabelledby != null;\n  if (!hasChildren && !hasAriaLabel && process.env.NODE_ENV !== 'production') {\n    console.warn(\n      'If you do not provide children, you must specify an aria-label for accessibility'\n    );\n  }\n\n  // Handle press state for keyboard interactions and cases where labelProps is not used.\n  let {pressProps, isPressed} = usePress({\n    onPressStart,\n    onPressEnd,\n    onPressChange,\n    onPress,\n    onPressUp,\n    onClick,\n    isDisabled\n  });\n\n  // Handle press state on the label.\n  let [isLabelPressed, setLabelPressed] = useState(false);\n  let {pressProps: labelProps} = usePress({\n    onPressStart(e) {\n      // Keyboard interactions are handled directly on the input.\n      if (e.pointerType === 'keyboard' || e.pointerType === 'virtual') {\n        e.continuePropagation();\n        return;\n      }\n\n      onPressStart?.(e);\n      onPressChange?.(true);\n      setLabelPressed(true);\n    },\n    onPressEnd(e) {\n      // Keyboard interactions are handled directly on the input.\n      if (e.pointerType === 'keyboard' || e.pointerType === 'virtual') {\n        e.continuePropagation();\n        return;\n      }\n\n      onPressEnd?.(e);\n      onPressChange?.(false);\n      setLabelPressed(false);\n    },\n    onPressUp(e) {\n      if (e.pointerType === 'keyboard' || e.pointerType === 'virtual') {\n        e.continuePropagation();\n        return;\n      }\n\n      onPressUp?.(e);\n    },\n    onClick,\n    onPress(e) {\n      if (e.pointerType === 'keyboard' || e.pointerType === 'virtual') {\n        e.continuePropagation();\n        return;\n      }\n\n      onPress?.(e);\n      state.toggle();\n      ref.current?.focus();\n\n      // @ts-expect-error\n      let {[privateValidationStateProp]: groupValidationState} = props;\n\n      let {commitValidation} = groupValidationState ? groupValidationState : validationState;\n\n      commitValidation();\n    },\n    isDisabled: isDisabled || isReadOnly\n  });\n\n  let {focusableProps} = useFocusable(props, ref);\n  let interactions = mergeProps(pressProps, focusableProps);\n  let domProps = filterDOMProps(props, {labelable: true});\n\n  useFormReset(ref, state.defaultSelected, state.setSelected);\n\n  // Copied from useField because we don't want the label behavior that provides.\n  let descriptionProps = useSlotId2();\n  let errorMessageProps = useSlotId2();\n\n  return {\n    labelProps: mergeProps(labelProps, {onClick: e => e.preventDefault()}),\n    inputProps: mergeProps(domProps, {\n      checked: state.isSelected,\n      'aria-required': (isRequired && validationBehavior === 'aria') || undefined,\n      required: isRequired && validationBehavior === 'native',\n      'aria-invalid': isInvalid || props.validationState === 'invalid' || undefined,\n      'aria-errormessage': props['aria-errormessage'],\n      'aria-controls': props['aria-controls'],\n      'aria-readonly': isReadOnly || undefined,\n      'aria-describedby':\n        [descriptionProps.id, errorMessageProps.id, ariaDescribedby].filter(Boolean).join(' ') ||\n        undefined,\n      onChange,\n      disabled: isDisabled,\n      ...(value == null ? {} : {value}),\n      name,\n      form,\n      type: 'checkbox',\n      ...interactions\n    }),\n    descriptionProps,\n    errorMessageProps,\n    isSelected: state.isSelected,\n    isPressed: isPressed || isLabelPressed,\n    isDisabled,\n    isReadOnly,\n    isInvalid: isInvalid || props.validationState === 'invalid',\n    validationErrors,\n    validationDetails\n  };\n}\n"],"names":[],"version":3,"file":"useToggle.mjs.map"}