se-design 1.0.84 → 1.0.85-dev.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/Button/index.d.ts +5 -0
- package/dist/index16.js +27 -27
- package/dist/index16.js.map +1 -1
- package/dist/index19.js +121 -128
- package/dist/index19.js.map +1 -1
- package/dist/index25.js +191 -175
- package/dist/index25.js.map +1 -1
- package/dist/index4.js +66 -57
- package/dist/index4.js.map +1 -1
- package/dist/index67.js +39 -30
- package/dist/index67.js.map +1 -1
- package/package.json +1 -1
package/dist/index67.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index67.js","sources":["../src/utils/a11y/useAccessiblePress.ts"],"sourcesContent":["import * as React from 'react';\nimport { isVirtualClick } from '../virtualClick';\n\n/**\n * Hook for accessible press interactions (pointer vs keyboard vs virtual click).\n *\n * Handles:\n * - Pointer intent tracking (mouse/touch)\n * - Virtual click detection (NVDA browse mode, etc.)\n * - Routing to appropriate handler (onClick vs onKeyboardActivate)\n * - For non-native elements: Enter/Space → activation\n * - Optional stopPropagation and preventDefault\n *\n * @example\n * // Native button (isNative=true, the default)\n * const { pressProps } = useAccessiblePress({ onClick, disabled });\n * <button {...pressProps}>Click me</button>\n *\n * @example\n * // Non-native element (div acting as button)\n * const { pressProps, role, tabIndex } = useAccessiblePress({ onClick, isNative: false });\n * <div role={role} tabIndex={tabIndex} {...pressProps}>Click me</div>\n *\n * @example\n * // Element nested inside clickable parent (prevent event bubbling)\n * const { pressProps, tabIndex } = useAccessiblePress({ \n * onClick, \n * isNative: false, \n * stopPropagation: true \n * });\n * <div role=\"button\" tabIndex={tabIndex} {...pressProps}>Click me</div>\n */\n\ntype InputKind = 'pointer' | 'keyboard' | 'virtual';\n\nexport type UseAccessiblePressOptions = {\n /**\n * Whether the element is disabled\n */\n disabled?: boolean;\n\n /**\n * Whether the element is in a loading state (will also disable)\n */\n loading?: boolean;\n\n /**\n * Handler for pointer/touch activations (or all activations if onKeyboardActivate is not provided)\n */\n onClick?: (e: React.MouseEvent<HTMLElement>) => void;\n\n /**\n * Handler for keyboard + assistive tech virtual activation.\n * If omitted, onClick is used for all activations.\n */\n onKeyboardActivate?: (e: React.MouseEvent<HTMLElement>) => void;\n\n /**\n * If true, this is a native <button> (or other native pressable) and we MUST NOT add Enter/Space handling.\n * Default: true\n */\n isNative?: boolean;\n\n /**\n * Only for non-native elements (div/span). Defaults to 'button'.\n */\n role?: string;\n\n /**\n * Only for non-native elements. Defaults to 0.\n */\n tabIndex?: number;\n\n /**\n * If true, calls e.stopPropagation() before invoking onClick handler.\n * Useful when element is nested inside another clickable element.\n * Default: false\n */\n stopPropagation?: boolean;\n\n /**\n * If true, calls e.preventDefault() before invoking onClick handler.\n * Note: For non-native elements, preventDefault is already called on Space/Enter keys.\n * Default: false\n */\n preventDefault?: boolean;\n\n /**\n * Toggle/pressed state. When true or false, sets aria-pressed on the element (e.g. selected color swatch).\n * Omit for non-toggle buttons.\n */\n pressed?: boolean;\n};\n\nexport type UseAccessiblePressReturn = {\n /**\n * Props to spread onto the element. Includes event handlers and ARIA attributes.\n * Does NOT include role/tabIndex — apply those separately.\n */\n pressProps: React.HTMLAttributes<HTMLElement> & {\n 'aria-disabled'?: 'true';\n 'aria-busy'?: 'true';\n 'aria-pressed'?: boolean;\n };\n\n /**\n * Combined disabled state (disabled || loading)\n */\n isDisabled: boolean;\n\n /**\n * Role for non-native elements (e.g., 'button', 'menuitem').\n * Only returned when isNative=false.\n */\n role?: string;\n\n /**\n * TabIndex for non-native elements.\n * Returns -1 when disabled, otherwise the provided tabIndex (default 0).\n * Only returned when isNative=false.\n */\n tabIndex?: number;\n};\n\nexport function useAccessiblePress({\n disabled = false,\n loading = false,\n onClick,\n onKeyboardActivate,\n isNative = true,\n role = 'button',\n tabIndex = 0,\n stopPropagation = false,\n preventDefault = false,\n pressed\n}: UseAccessiblePressOptions = {}): UseAccessiblePressReturn {\n const isDisabled = disabled || loading;\n const lastWasPointerRef = React.useRef(false);\n\n const markPointer = React.useCallback(() => {\n lastWasPointerRef.current = true;\n }, []);\n\n const handleClick = React.useCallback(\n (e: React.MouseEvent<HTMLElement>) => {\n if (isDisabled) return;\n\n // Handle event control flags\n if (stopPropagation) e.stopPropagation();\n if (preventDefault) e.preventDefault();\n\n const virtual = isVirtualClick(e.nativeEvent as any);\n const isPointer = lastWasPointerRef.current;\n lastWasPointerRef.current = false;\n\n const input: InputKind = virtual ? 'virtual' : isPointer ? 'pointer' : 'keyboard';\n\n // If we have a keyboard handler, route keyboard + virtual clicks there.\n if ((input === 'keyboard' || input === 'virtual') && onKeyboardActivate) {\n onKeyboardActivate(e);\n return;\n }\n\n onClick?.(e);\n },\n [isDisabled, onClick, onKeyboardActivate, stopPropagation, preventDefault]\n );\n\n // Only used for non-native elements: Enter/Space should trigger click(), reusing the same click routing.\n const handleKeyDown = React.useCallback(\n (e: React.KeyboardEvent<HTMLElement>) => {\n if (isDisabled) return;\n\n if (e.key === 'Enter' || e.key === ' ') {\n e.preventDefault();\n // Trigger native click event so all routing goes through handleClick\n (e.currentTarget as HTMLElement).click();\n }\n },\n [isDisabled]\n );\n\n const pressProps: UseAccessiblePressReturn['pressProps'] = {\n onPointerDown: markPointer,\n onMouseDown: markPointer,\n onTouchStart: markPointer,\n onClick: handleClick,\n 'aria-disabled': isDisabled ? 'true' : undefined,\n 'aria-busy': loading ? 'true' : undefined,\n 'aria-pressed': pressed\n };\n\n // For non-native elements, add Enter/Space handling\n if (!isNative) {\n pressProps.onKeyDown = handleKeyDown;\n }\n\n // Return role/tabIndex separately (only for non-native elements)\n const result: UseAccessiblePressReturn = { pressProps, isDisabled };\n\n if (!isNative) {\n result.role = role;\n result.tabIndex = isDisabled ? -1 : tabIndex;\n }\n\n return result;\n}\n\n"],"names":["React","isVirtualClick","useAccessiblePress","disabled","loading","onClick","onKeyboardActivate","isNative","role","tabIndex","stopPropagation","preventDefault","pressed","isDisabled","lastWasPointerRef","useRef","markPointer","useCallback","current","handleClick","e","virtual","nativeEvent","isPointer","input","handleKeyDown","key","currentTarget","click","pressProps","
|
|
1
|
+
{"version":3,"file":"index67.js","sources":["../src/utils/a11y/useAccessiblePress.ts"],"sourcesContent":["import * as React from 'react';\nimport { isVirtualClick } from '../virtualClick';\n\n/**\n * Hook for accessible press interactions (pointer vs keyboard vs virtual click).\n *\n * Handles:\n * - Pointer intent tracking (mouse/touch)\n * - Virtual click detection (NVDA browse mode, etc.)\n * - Routing to appropriate handler (onClick vs onKeyboardActivate)\n * - For non-native elements: Enter/Space → activation\n * - Optional stopPropagation and preventDefault\n *\n * @example\n * // Native button (isNative=true, the default)\n * const { pressProps } = useAccessiblePress({ onClick, disabled });\n * <button {...pressProps}>Click me</button>\n *\n * @example\n * // Non-native element (div acting as button)\n * const { pressProps, role, tabIndex } = useAccessiblePress({ onClick, isNative: false });\n * <div role={role} tabIndex={tabIndex} {...pressProps}>Click me</div>\n *\n * @example\n * // Element nested inside clickable parent (prevent event bubbling)\n * const { pressProps, tabIndex } = useAccessiblePress({ \n * onClick, \n * isNative: false, \n * stopPropagation: true \n * });\n * <div role=\"button\" tabIndex={tabIndex} {...pressProps}>Click me</div>\n */\n\ntype InputKind = 'pointer' | 'keyboard' | 'virtual';\n\nexport type UseAccessiblePressOptions = {\n /**\n * Whether the element is disabled\n */\n disabled?: boolean;\n\n /**\n * Whether the element is in a loading state (will also disable)\n */\n loading?: boolean;\n\n /**\n * Handler for pointer/touch activations (or all activations if onKeyboardActivate is not provided)\n */\n onClick?: (e: React.MouseEvent<HTMLElement>) => void;\n\n /**\n * Handler for keyboard + assistive tech virtual activation.\n * If omitted, onClick is used for all activations.\n */\n onKeyboardActivate?: (e: React.MouseEvent<HTMLElement>) => void;\n\n /**\n * If true, this is a native <button> (or other native pressable) and we MUST NOT add Enter/Space handling.\n * Default: true\n */\n isNative?: boolean;\n\n /**\n * Only for non-native elements (div/span). Defaults to 'button'.\n */\n role?: string;\n\n /**\n * Only for non-native elements. Defaults to 0.\n */\n tabIndex?: number;\n\n /**\n * If true, calls e.stopPropagation() before invoking onClick handler.\n * Useful when element is nested inside another clickable element.\n * Default: false\n */\n stopPropagation?: boolean;\n\n /**\n * If true, calls e.preventDefault() before invoking onClick handler.\n * Note: For non-native elements, preventDefault is already called on Space/Enter keys.\n * Default: false\n */\n preventDefault?: boolean;\n\n /**\n * Toggle/pressed state. When true or false, sets aria-pressed on the element (e.g. selected color swatch).\n * Omit for non-toggle buttons.\n */\n pressed?: boolean;\n\n /**\n * User-provided pointer/mouse/touch handlers. When provided, they are chained\n * after the internal pointer-intent tracking handler (markPointer), so both run.\n */\n onPointerDown?: (e: React.PointerEvent<HTMLElement>) => void;\n onMouseDown?: (e: React.MouseEvent<HTMLElement>) => void;\n onTouchStart?: (e: React.TouchEvent<HTMLElement>) => void;\n};\n\nexport type UseAccessiblePressReturn = {\n /**\n * Props to spread onto the element. Includes event handlers and ARIA attributes.\n * Does NOT include role/tabIndex — apply those separately.\n */\n pressProps: React.HTMLAttributes<HTMLElement> & {\n 'aria-disabled'?: 'true';\n 'aria-busy'?: 'true';\n 'aria-pressed'?: boolean;\n };\n\n /**\n * Combined disabled state (disabled || loading)\n */\n isDisabled: boolean;\n\n /**\n * Role for non-native elements (e.g., 'button', 'menuitem').\n * Only returned when isNative=false.\n */\n role?: string;\n\n /**\n * TabIndex for non-native elements.\n * Returns -1 when disabled, otherwise the provided tabIndex (default 0).\n * Only returned when isNative=false.\n */\n tabIndex?: number;\n};\n\nexport function useAccessiblePress({\n disabled = false,\n loading = false,\n onClick,\n onKeyboardActivate,\n isNative = true,\n role = 'button',\n tabIndex = 0,\n stopPropagation = false,\n preventDefault = false,\n pressed,\n onPointerDown,\n onMouseDown,\n onTouchStart\n}: UseAccessiblePressOptions = {}): UseAccessiblePressReturn {\n const isDisabled = disabled || loading;\n const lastWasPointerRef = React.useRef(false);\n\n const markPointer = React.useCallback(() => {\n lastWasPointerRef.current = true;\n }, []);\n\n const handleClick = React.useCallback(\n (e: React.MouseEvent<HTMLElement>) => {\n if (isDisabled) return;\n\n // Handle event control flags\n if (stopPropagation) e.stopPropagation();\n if (preventDefault) e.preventDefault();\n\n const virtual = isVirtualClick(e.nativeEvent as any);\n const isPointer = lastWasPointerRef.current;\n lastWasPointerRef.current = false;\n\n const input: InputKind = virtual ? 'virtual' : isPointer ? 'pointer' : 'keyboard';\n\n // If we have a keyboard handler, route keyboard + virtual clicks there.\n if ((input === 'keyboard' || input === 'virtual') && onKeyboardActivate) {\n onKeyboardActivate(e);\n return;\n }\n\n onClick?.(e);\n },\n [isDisabled, onClick, onKeyboardActivate, stopPropagation, preventDefault]\n );\n\n // Only used for non-native elements: Enter/Space should trigger click(), reusing the same click routing.\n const handleKeyDown = React.useCallback(\n (e: React.KeyboardEvent<HTMLElement>) => {\n if (isDisabled) return;\n\n if (e.key === 'Enter' || e.key === ' ') {\n e.preventDefault();\n // Trigger native click event so all routing goes through handleClick\n (e.currentTarget as HTMLElement).click();\n }\n },\n [isDisabled]\n );\n\n const pressProps: UseAccessiblePressReturn['pressProps'] = {\n onPointerDown: onPointerDown\n ? (e: React.PointerEvent<HTMLElement>) => { markPointer(); onPointerDown(e); }\n : markPointer,\n onMouseDown: onMouseDown\n ? (e: React.MouseEvent<HTMLElement>) => { markPointer(); onMouseDown(e); }\n : markPointer,\n onTouchStart: onTouchStart\n ? (e: React.TouchEvent<HTMLElement>) => { markPointer(); onTouchStart(e); }\n : markPointer,\n onClick: handleClick,\n 'aria-disabled': isDisabled ? 'true' : undefined,\n 'aria-busy': loading ? 'true' : undefined,\n 'aria-pressed': pressed\n };\n\n // For non-native elements, add Enter/Space handling\n if (!isNative) {\n pressProps.onKeyDown = handleKeyDown;\n }\n\n // Return role/tabIndex separately (only for non-native elements)\n const result: UseAccessiblePressReturn = { pressProps, isDisabled };\n\n if (!isNative) {\n result.role = role;\n result.tabIndex = isDisabled ? -1 : tabIndex;\n }\n\n return result;\n}\n\n"],"names":["React","isVirtualClick","useAccessiblePress","disabled","loading","onClick","onKeyboardActivate","isNative","role","tabIndex","stopPropagation","preventDefault","pressed","onPointerDown","onMouseDown","onTouchStart","isDisabled","lastWasPointerRef","useRef","markPointer","useCallback","current","handleClick","e","virtual","nativeEvent","isPointer","input","handleKeyDown","key","currentTarget","click","pressProps","undefined","onKeyDown","result"],"mappings":"AAoIO,YAAAA,OAAA;AAAA,SAAA,kBAAAC,SAAA;AAAA,SAASC,EAAmB;AAAA,EACjCC,UAAAA,IAAW;AAAA,EACXC,SAAAA,IAAU;AAAA,EACVC,SAAAA;AAAAA,EACAC,oBAAAA;AAAAA,EACAC,UAAAA,IAAW;AAAA,EACXC,MAAAA,IAAO;AAAA,EACPC,UAAAA,IAAW;AAAA,EACXC,iBAAAA,IAAkB;AAAA,EAClBC,gBAAAA,IAAiB;AAAA,EACjBC,SAAAA;AAAAA,EACAC,eAAAA;AAAAA,EACAC,aAAAA;AAAAA,EACAC,cAAAA;AACyB,IAAI,IAA8B;AAC3D,QAAMC,IAAab,KAAYC,GACzBa,IAAoBjB,EAAMkB,OAAO,EAAK,GAEtCC,IAAcnB,EAAMoB,YAAY,MAAM;AAC1CH,IAAAA,EAAkBI,UAAU;AAAA,EAC9B,GAAG,CAAA,CAAE,GAECC,IAActB,EAAMoB,YACxB,CAACG,MAAqC;AACpC,QAAIP,EAAY;AAGhB,IAAIN,OAAmBA,gBAAAA,GACnBC,OAAkBA,eAAAA;AAEtB,UAAMa,IAAUvB,EAAesB,EAAEE,WAAkB,GAC7CC,IAAYT,EAAkBI;AACpCJ,IAAAA,EAAkBI,UAAU;AAE5B,UAAMM,IAAmBH,IAAU,YAAYE,IAAY,YAAY;AAGvE,SAAKC,MAAU,cAAcA,MAAU,cAAcrB,GAAoB;AACvEA,MAAAA,EAAmBiB,CAAC;AACpB;AAAA,IACF;AAEAlB,IAAAA,IAAUkB,CAAC;AAAA,EACb,GACA,CAACP,GAAYX,GAASC,GAAoBI,GAAiBC,CAAc,CAC3E,GAGMiB,IAAgB5B,EAAMoB,YAC1B,CAACG,MAAwC;AACvC,IAAIP,MAEAO,EAAEM,QAAQ,WAAWN,EAAEM,QAAQ,SACjCN,EAAEZ,eAAAA,GAEDY,EAAEO,cAA8BC,MAAAA;AAAAA,EAErC,GACA,CAACf,CAAU,CACb,GAEMgB,IAAqD;AAAA,IACzDnB,eAAeA,IACX,CAACU,MAAuC;AAAEJ,MAAAA,EAAAA,GAAeN,EAAcU,CAAC;AAAA,IAAG,IAC3EJ;AAAAA,IACJL,aAAaA,IACT,CAACS,MAAqC;AAAEJ,MAAAA,EAAAA,GAAeL,EAAYS,CAAC;AAAA,IAAG,IACvEJ;AAAAA,IACJJ,cAAcA,IACV,CAACQ,MAAqC;AAAEJ,MAAAA,EAAAA,GAAeJ,EAAaQ,CAAC;AAAA,IAAG,IACxEJ;AAAAA,IACJd,SAASiB;AAAAA,IACT,iBAAiBN,IAAa,SAASiB;AAAAA,IACvC,aAAa7B,IAAU,SAAS6B;AAAAA,IAChC,gBAAgBrB;AAAAA,EAAAA;AAIlB,EAAKL,MACHyB,EAAWE,YAAYN;AAIzB,QAAMO,IAAmC;AAAA,IAAEH,YAAAA;AAAAA,IAAYhB,YAAAA;AAAAA,EAAAA;AAEvD,SAAKT,MACH4B,EAAO3B,OAAOA,GACd2B,EAAO1B,WAAWO,IAAa,KAAKP,IAG/B0B;AACT;"}
|