@hanzogui/checkbox-headless 2.0.0

package/package.json

@@ -0,0 +1,60 @@
+{
+  "name": "@hanzogui/checkbox-headless",
+  "version": "2.0.0",
+  "gitHead": "a49cc7ea6b93ba384e77a4880ae48ac4a5635c14",
+  "source": "src/index.ts",
+  "files": [
+    "src",
+    "types",
+    "dist"
+  ],
+  "type": "module",
+  "sideEffects": [
+    "*.css"
+  ],
+  "main": "dist/cjs",
+  "module": "dist/esm",
+  "types": "./types/index.d.ts",
+  "exports": {
+    "./package.json": "./package.json",
+    ".": {
+      "types": "./types/index.d.ts",
+      "react-native": "./dist/esm/index.native.js",
+      "browser": "./dist/esm/index.mjs",
+      "module": "./dist/esm/index.mjs",
+      "import": "./dist/esm/index.mjs",
+      "require": "./dist/cjs/index.cjs",
+      "default": "./dist/esm/index.mjs"
+    }
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "build": "hanzo-gui-build",
+    "watch": "hanzo-gui-build --watch",
+    "clean": "hanzo-gui-build clean",
+    "clean:build": "hanzo-gui-build clean:build"
+  },
+  "dependencies": {
+    "@hanzogui/compose-refs": "2.0.0-rc.29",
+    "@hanzogui/constants": "2.0.0-rc.29",
+    "@hanzogui/create-context": "2.0.0-rc.29",
+    "@hanzogui/focusable": "2.0.0",
+    "@hanzogui/helpers": "2.0.0-rc.29",
+    "@hanzogui/label": "2.0.0",
+    "@hanzogui/use-controllable-state": "2.0.0-rc.29",
+    "@hanzogui/use-previous": "2.0.0-rc.29",
+    "@hanzogui/web": "2.0.0-rc.29"
+  },
+  "devDependencies": {
+    "@hanzogui/build": "2.0.0-rc.29",
+    "react": ">=19",
+    "react-native": "0.83.2"
+  },
+  "peerDependencies": {
+    "react": ">=19",
+    "react-native": "*"
+  },
+  "module:jsx": "dist/jsx"
+}

package/src/BubbleInput.tsx

@@ -0,0 +1,64 @@
+import { usePrevious } from '@hanzogui/use-previous'
+import * as React from 'react'
+
+import type { CheckedState } from './useCheckbox'
+import { isIndeterminate } from './utils'
+
+export interface BubbleInputProps extends Omit<React.ComponentProps<'input'>, 'checked'> {
+  checked: CheckedState
+  control: HTMLElement | null
+  bubbles: boolean
+
+  isHidden?: boolean
+}
+
+export const BubbleInput = (props: BubbleInputProps) => {
+  const { checked, bubbles = true, control, isHidden, ...inputProps } = props
+  const ref = React.useRef<HTMLInputElement>(null)
+  const prevChecked = usePrevious(checked)
+  //   const controlSize = useSize(control)
+  // Bubble checked change to parents (e.g form change event)
+  React.useEffect(() => {
+    const input = ref.current!
+    const inputProto = window.HTMLInputElement.prototype
+    const descriptor = Object.getOwnPropertyDescriptor(
+      inputProto,
+      'checked'
+    ) as PropertyDescriptor
+    const setChecked = descriptor.set
+
+    if (prevChecked !== checked && setChecked) {
+      const event = new Event('click', { bubbles })
+      input.indeterminate = isIndeterminate(checked)
+      setChecked.call(input, isIndeterminate(checked) ? false : checked)
+      input.dispatchEvent(event)
+    }
+  }, [prevChecked, checked, bubbles])
+
+  return (
+    <input
+      type="checkbox"
+      defaultChecked={isIndeterminate(checked) ? false : checked}
+      {...inputProps}
+      tabIndex={-1}
+      ref={ref}
+      aria-hidden={isHidden}
+      style={{
+        ...(isHidden
+          ? {
+              // ...controlSize,
+              position: 'absolute',
+              pointerEvents: 'none',
+              opacity: 0,
+              margin: 0,
+            }
+          : {
+              appearance: 'auto',
+              accentColor: 'var(--color6)',
+            }),
+
+        ...props.style,
+      }}
+    />
+  )
+}

package/src/index.ts

@@ -0,0 +1,2 @@
+export * from './useCheckbox'
+export * from './utils'

package/src/useCheckbox.tsx

@@ -0,0 +1,119 @@
+import { useComposedRefs } from '@hanzogui/compose-refs'
+import { isWeb } from '@hanzogui/constants'
+import type { GestureReponderEvent } from '@hanzogui/web'
+import { composeEventHandlers } from '@hanzogui/helpers'
+import { useLabelContext } from '@hanzogui/label'
+import React, { useMemo } from 'react'
+import type { PressableProps, View, ViewProps } from 'react-native'
+
+import { BubbleInput } from './BubbleInput'
+import { getState, isIndeterminate } from './utils'
+
+export type CheckedState = boolean | 'indeterminate'
+
+type CheckboxBaseProps = Omit<ViewProps, 'onFocus' | 'onBlur'> &
+  Pick<PressableProps, 'onPress'>
+
+export type CheckboxExtraProps = {
+  children?: React.ReactNode
+  id?: string
+  disabled?: boolean
+  checked?: CheckedState
+  defaultChecked?: CheckedState
+  required?: boolean
+  /**
+   *
+   * @param checked Either boolean or "indeterminate" which is meant to allow for a third state that means "neither", usually indicated by a minus sign.
+   */
+  onCheckedChange?(checked: CheckedState): void
+  labelledBy?: string
+  name?: string
+  value?: string
+}
+
+export type CheckboxProps = CheckboxBaseProps & CheckboxExtraProps
+
+export function useCheckbox<R extends View, P extends CheckboxProps>(
+  props: P,
+  [checked, setChecked]: [
+    CheckedState,
+    React.Dispatch<React.SetStateAction<CheckedState>>,
+  ],
+  ref: React.Ref<R>
+) {
+  const {
+    labelledBy: ariaLabelledby,
+    name,
+    required,
+    disabled,
+    value = 'on',
+    onCheckedChange,
+    ...checkboxProps
+  } = props
+  const [button, setButton] = React.useState<HTMLButtonElement | null>(null)
+  const composedRefs = useComposedRefs(ref, setButton as any)
+  const hasConsumerStoppedPropagationRef = React.useRef(false)
+  // We set this to true by default so that events bubble to forms without JS (SSR)
+  const isFormControl = isWeb ? (button ? Boolean(button.closest('form')) : true) : false
+
+  const labelId = useLabelContext(button)
+  const labelledBy = ariaLabelledby || labelId
+
+  const parentKeyDown = (props as React.HTMLProps<HTMLButtonElement>).onKeyDown
+
+  const handleKeyDown = useMemo(
+    () =>
+      composeEventHandlers(parentKeyDown, (event) => {
+        // According to WAI ARIA, Checkboxes don't activate on enter keypress
+        if (event.key === 'Enter') event.preventDefault()
+      }),
+    [parentKeyDown]
+  )
+
+  const handlePress = useMemo(
+    () =>
+      composeEventHandlers(props.onPress as any, (event: GestureReponderEvent) => {
+        setChecked((prevChecked) => (isIndeterminate(prevChecked) ? true : !prevChecked))
+        if (isFormControl && 'isPropagationStopped' in event) {
+          hasConsumerStoppedPropagationRef.current = event.isPropagationStopped()
+          // if checkbox is in a form, stop propagation from the button so that we only propagate
+          // one click event (from the input). We propagate changes from an input so that native
+          // form validation works and form events reflect checkbox updates.
+          if (!hasConsumerStoppedPropagationRef.current) event.stopPropagation()
+        }
+      }),
+    [isFormControl]
+  )
+
+  return {
+    bubbleInput:
+      isWeb && isFormControl ? (
+        <BubbleInput
+          isHidden
+          control={button}
+          bubbles={!hasConsumerStoppedPropagationRef.current}
+          name={name}
+          value={value}
+          checked={checked}
+          required={required}
+          disabled={disabled}
+        />
+      ) : null,
+    checkboxRef: composedRefs,
+    checkboxProps: {
+      role: 'checkbox',
+      'aria-labelledby': labelledBy,
+      'aria-checked': isIndeterminate(checked) ? 'mixed' : checked,
+      ...checkboxProps,
+      ...(isWeb && {
+        type: 'button',
+        value,
+        'data-state': getState(checked),
+        'data-disabled': disabled ? '' : undefined,
+        disabled: disabled,
+        onKeyDown: disabled ? undefined : handleKeyDown,
+      }),
+      onPress: disabled ? undefined : handlePress,
+    },
+  }
+}

package/src/utils.tsx

@@ -0,0 +1,9 @@
+import type { CheckedState } from './useCheckbox'
+
+export function isIndeterminate(checked?: CheckedState): checked is 'indeterminate' {
+  return checked === 'indeterminate'
+}
+
+export function getState(checked: CheckedState) {
+  return isIndeterminate(checked) ? 'indeterminate' : checked ? 'checked' : 'unchecked'
+}

package/types/BubbleInput.d.ts

@@ -0,0 +1,10 @@
+import * as React from 'react';
+import type { CheckedState } from './useCheckbox';
+export interface BubbleInputProps extends Omit<React.ComponentProps<'input'>, 'checked'> {
+    checked: CheckedState;
+    control: HTMLElement | null;
+    bubbles: boolean;
+    isHidden?: boolean;
+}
+export declare const BubbleInput: (props: BubbleInputProps) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=BubbleInput.d.ts.map

package/types/index.d.ts

@@ -0,0 +1,3 @@
+export * from './useCheckbox';
+export * from './utils';
+//# sourceMappingURL=index.d.ts.map

package/types/useCheckbox.d.ts

@@ -0,0 +1,43 @@
+import React from 'react';
+import type { PressableProps, View, ViewProps } from 'react-native';
+export type CheckedState = boolean | 'indeterminate';
+type CheckboxBaseProps = Omit<ViewProps, 'onFocus' | 'onBlur'> & Pick<PressableProps, 'onPress'>;
+export type CheckboxExtraProps = {
+    children?: React.ReactNode;
+    id?: string;
+    disabled?: boolean;
+    checked?: CheckedState;
+    defaultChecked?: CheckedState;
+    required?: boolean;
+    /**
+     *
+     * @param checked Either boolean or "indeterminate" which is meant to allow for a third state that means "neither", usually indicated by a minus sign.
+     */
+    onCheckedChange?(checked: CheckedState): void;
+    labelledBy?: string;
+    name?: string;
+    value?: string;
+};
+export type CheckboxProps = CheckboxBaseProps & CheckboxExtraProps;
+export declare function useCheckbox<R extends View, P extends CheckboxProps>(props: P, [checked, setChecked]: [
+    CheckedState,
+    React.Dispatch<React.SetStateAction<CheckedState>>
+], ref: React.Ref<R>): {
+    bubbleInput: import("react/jsx-runtime").JSX.Element | null;
+    checkboxRef: (node: R | null) => void;
+    checkboxProps: {
+        role: string;
+        'aria-labelledby': string | undefined;
+        'aria-checked': string | boolean;
+    } & Omit<P, "disabled" | "labelledBy" | "name" | "required" | "value" | "onCheckedChange"> & {
+        onPress: import("@gui/web").EventHandler<import("react-native").GestureResponderEvent> | undefined;
+        type?: string | undefined;
+        value?: string | undefined;
+        'data-state'?: string | undefined;
+        'data-disabled'?: string | undefined;
+        disabled?: boolean | undefined;
+        onKeyDown?: import("@gui/web").EventHandler<React.KeyboardEvent<HTMLButtonElement>> | undefined;
+    };
+};
+export {};
+//# sourceMappingURL=useCheckbox.d.ts.map

package/types/utils.d.ts

@@ -0,0 +1,4 @@
+import type { CheckedState } from './useCheckbox';
+export declare function isIndeterminate(checked?: CheckedState): checked is 'indeterminate';
+export declare function getState(checked: CheckedState): "indeterminate" | "checked" | "unchecked";
+//# sourceMappingURL=utils.d.ts.map