Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

@hypothesis/frontend-shared

Package Overview
Dependencies
Maintainers
5
Versions
122
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@hypothesis/frontend-shared - npm Package Compare versions

Comparing version 1.13.0 to 2.0.0

lib/components/Checkbox.d.ts

11

CHANGELOG.md

@@ -8,2 +8,13 @@ # Changelog

## [v2.0.0] - 2021-05-13
### Breaking changes:
- Set default `type` property of buttons to "button" [#62](https://github.com/hypothesis/frontend-shared/pull/62)
### Added:
- Add Checkbox component and patterns [#43](https://github.com/hypothesis/frontend-shared/pull/43)
- Add `Panel` component and adjust icon registration [#60](https://github.com/hypothesis/frontend-shared/pull/60)
## [v1.13.0] - 2021-04-28

@@ -10,0 +21,0 @@

357

lib/components/buttons.d.ts

@@ -10,15 +10,13 @@ /**

*
* @param {ButtonProps} props
* @param {ButtonBaseProps} props
*/
export function LabeledButton({ children, className, ...restProps }: ButtonProps): any;
export function LabeledButton({ children, className, ...restProps }: ButtonBaseProps): any;
/**
* A button styled to appear as an HTML link (<a>)
*
* @param {ButtonProps} props
* @param {ButtonBaseProps} props
*/
export function LinkButton(props: ButtonProps): any;
export function LinkButton(props: ButtonBaseProps): any;
export type ButtonProps = {
buttonRef?: import('preact').Ref<HTMLButtonElement>;
children?: import("preact").ComponentChildren;
className?: string;
/**

@@ -33,3 +31,2 @@ * - Name of `SvgIcon` to render in the button

iconPosition?: 'left' | 'right';
disabled?: boolean;
/**

@@ -41,2 +38,6 @@ * - Is the element associated with this button

/**
* - Use `expanded` prop instead
*/
"aria-expanded"?: never;
/**
* - Is this button currently "active?" (set

@@ -46,4 +47,7 @@ * `aria-pressed`)

pressed?: boolean;
onClick?: (event: Event) => void;
/**
* - Use `pressed` prop instead
*/
"aria-pressed"?: never;
/**
* - Relative button size:

@@ -54,6 +58,2 @@ * affects padding

/**
* - Optional inline styles
*/
style?: any;
/**
* - Button title; used for `aria-label` attribute

@@ -63,2 +63,6 @@ */

/**
* - Use `title` prop instead
*/
"aria-label"?: never;
/**
* - For styling: element variant

@@ -68,2 +72,329 @@ */

};
/**
* Fold in HTML button prop definitions into ButtonProps, but ignore `size` because it's inherited
* from HTMLElement and conflicts with the _ButtonProps.size prop above.
*/
export type HTMLButtonElementProps = {
max?: string | number;
required?: boolean;
default?: boolean;
high?: number;
low?: number;
disabled?: boolean;
start?: number;
open?: boolean;
media?: string;
loading?: "eager" | "lazy";
hidden?: boolean;
data?: string;
dir?: NotificationDirection;
form?: string;
label?: string;
slot?: string;
span?: number;
style?: string | import("preact").JSX.CSSProperties;
summary?: string;
title?: string;
pattern?: string;
async?: boolean;
readonly?: boolean;
defer?: boolean;
manifest?: string;
content?: string;
height?: string | number;
width?: string | number;
target?: string;
type?: string;
key?: any;
headers?: string;
onToggle?: import("preact").JSX.GenericEventHandler<HTMLButtonElement>;
accept?: string;
acceptCharset?: string;
accessKey?: string;
action?: string;
allowFullScreen?: boolean;
allowTransparency?: boolean;
alt?: string;
as?: string;
autocomplete?: string;
autoComplete?: string;
autocorrect?: string;
autoCorrect?: string;
autofocus?: boolean;
autoFocus?: boolean;
autoPlay?: boolean;
capture?: string | boolean;
cellPadding?: string | number;
cellSpacing?: string | number;
charSet?: string;
challenge?: string;
checked?: boolean;
class?: string;
className?: string;
cols?: number;
colSpan?: number;
contentEditable?: boolean;
contextMenu?: string;
controls?: boolean;
controlsList?: string;
coords?: string;
crossOrigin?: string;
dateTime?: string;
disableRemotePlayback?: boolean;
download?: any;
draggable?: boolean;
encType?: string;
formAction?: string;
formEncType?: string;
formMethod?: string;
formNoValidate?: boolean;
formTarget?: string;
frameBorder?: string | number;
href?: string;
hrefLang?: string;
for?: string;
htmlFor?: string;
httpEquiv?: string;
icon?: string;
id?: string;
inputMode?: string;
integrity?: string;
is?: string;
keyParams?: string;
keyType?: string;
kind?: string;
lang?: string;
list?: string;
loop?: boolean;
marginHeight?: number;
marginWidth?: number;
maxLength?: number;
mediaGroup?: string;
method?: string;
min?: string | number;
minLength?: number;
multiple?: boolean;
muted?: boolean;
name?: string;
nonce?: string;
noValidate?: boolean;
optimum?: number;
placeholder?: string;
playsInline?: boolean;
poster?: string;
preload?: string;
radioGroup?: string;
readOnly?: boolean;
rel?: string;
role?: string;
rows?: number;
rowSpan?: number;
sandbox?: string;
scope?: string;
scoped?: boolean;
scrolling?: string;
seamless?: boolean;
selected?: boolean;
shape?: string;
sizes?: string;
spellcheck?: boolean;
src?: string;
srcset?: string;
srcDoc?: string;
srcLang?: string;
srcSet?: string;
step?: string | number;
tabIndex?: number;
useMap?: string;
value?: string | number | string[];
volume?: string | number;
wmode?: string;
wrap?: string;
about?: string;
datatype?: string;
inlist?: any;
prefix?: string;
property?: string;
resource?: string;
typeof?: string;
vocab?: string;
itemProp?: string;
itemScope?: boolean;
itemType?: string;
itemID?: string;
itemRef?: string;
ref?: import("preact").Ref<HTMLButtonElement>;
jsx?: boolean;
onLoad?: import("preact").JSX.GenericEventHandler<HTMLButtonElement>;
onLoadCapture?: import("preact").JSX.GenericEventHandler<HTMLButtonElement>;
onError?: import("preact").JSX.GenericEventHandler<HTMLButtonElement>;
onErrorCapture?: import("preact").JSX.GenericEventHandler<HTMLButtonElement>;
onCopy?: import("preact").JSX.ClipboardEventHandler<HTMLButtonElement>;
onCopyCapture?: import("preact").JSX.ClipboardEventHandler<HTMLButtonElement>;
onCut?: import("preact").JSX.ClipboardEventHandler<HTMLButtonElement>;
onCutCapture?: import("preact").JSX.ClipboardEventHandler<HTMLButtonElement>;
onPaste?: import("preact").JSX.ClipboardEventHandler<HTMLButtonElement>;
onPasteCapture?: import("preact").JSX.ClipboardEventHandler<HTMLButtonElement>;
onCompositionEnd?: import("preact").JSX.CompositionEventHandler<HTMLButtonElement>;
onCompositionEndCapture?: import("preact").JSX.CompositionEventHandler<HTMLButtonElement>;
onCompositionStart?: import("preact").JSX.CompositionEventHandler<HTMLButtonElement>;
onCompositionStartCapture?: import("preact").JSX.CompositionEventHandler<HTMLButtonElement>;
onCompositionUpdate?: import("preact").JSX.CompositionEventHandler<HTMLButtonElement>;
onCompositionUpdateCapture?: import("preact").JSX.CompositionEventHandler<HTMLButtonElement>;
onFocus?: import("preact").JSX.FocusEventHandler<HTMLButtonElement>;
onFocusCapture?: import("preact").JSX.FocusEventHandler<HTMLButtonElement>;
onBlur?: import("preact").JSX.FocusEventHandler<HTMLButtonElement>;
onBlurCapture?: import("preact").JSX.FocusEventHandler<HTMLButtonElement>;
onChange?: import("preact").JSX.GenericEventHandler<HTMLButtonElement>;
onChangeCapture?: import("preact").JSX.GenericEventHandler<HTMLButtonElement>;
onInput?: import("preact").JSX.GenericEventHandler<HTMLButtonElement>;
onInputCapture?: import("preact").JSX.GenericEventHandler<HTMLButtonElement>;
onSearch?: import("preact").JSX.GenericEventHandler<HTMLButtonElement>;
onSearchCapture?: import("preact").JSX.GenericEventHandler<HTMLButtonElement>;
onSubmit?: import("preact").JSX.GenericEventHandler<HTMLButtonElement>;
onSubmitCapture?: import("preact").JSX.GenericEventHandler<HTMLButtonElement>;
onInvalid?: import("preact").JSX.GenericEventHandler<HTMLButtonElement>;
onInvalidCapture?: import("preact").JSX.GenericEventHandler<HTMLButtonElement>;
onReset?: import("preact").JSX.GenericEventHandler<HTMLButtonElement>;
onResetCapture?: import("preact").JSX.GenericEventHandler<HTMLButtonElement>;
onFormData?: import("preact").JSX.GenericEventHandler<HTMLButtonElement>;
onFormDataCapture?: import("preact").JSX.GenericEventHandler<HTMLButtonElement>;
onKeyDown?: import("preact").JSX.KeyboardEventHandler<HTMLButtonElement>;
onKeyDownCapture?: import("preact").JSX.KeyboardEventHandler<HTMLButtonElement>;
onKeyPress?: import("preact").JSX.KeyboardEventHandler<HTMLButtonElement>;
onKeyPressCapture?: import("preact").JSX.KeyboardEventHandler<HTMLButtonElement>;
onKeyUp?: import("preact").JSX.KeyboardEventHandler<HTMLButtonElement>;
onKeyUpCapture?: import("preact").JSX.KeyboardEventHandler<HTMLButtonElement>;
onAbort?: import("preact").JSX.GenericEventHandler<HTMLButtonElement>;
onAbortCapture?: import("preact").JSX.GenericEventHandler<HTMLButtonElement>;
onCanPlay?: import("preact").JSX.GenericEventHandler<HTMLButtonElement>;
onCanPlayCapture?: import("preact").JSX.GenericEventHandler<HTMLButtonElement>;
onCanPlayThrough?: import("preact").JSX.GenericEventHandler<HTMLButtonElement>;
onCanPlayThroughCapture?: import("preact").JSX.GenericEventHandler<HTMLButtonElement>;
onDurationChange?: import("preact").JSX.GenericEventHandler<HTMLButtonElement>;
onDurationChangeCapture?: import("preact").JSX.GenericEventHandler<HTMLButtonElement>;
onEmptied?: import("preact").JSX.GenericEventHandler<HTMLButtonElement>;
onEmptiedCapture?: import("preact").JSX.GenericEventHandler<HTMLButtonElement>;
onEncrypted?: import("preact").JSX.GenericEventHandler<HTMLButtonElement>;
onEncryptedCapture?: import("preact").JSX.GenericEventHandler<HTMLButtonElement>;
onEnded?: import("preact").JSX.GenericEventHandler<HTMLButtonElement>;
onEndedCapture?: import("preact").JSX.GenericEventHandler<HTMLButtonElement>;
onLoadedData?: import("preact").JSX.GenericEventHandler<HTMLButtonElement>;
onLoadedDataCapture?: import("preact").JSX.GenericEventHandler<HTMLButtonElement>;
onLoadedMetadata?: import("preact").JSX.GenericEventHandler<HTMLButtonElement>;
onLoadedMetadataCapture?: import("preact").JSX.GenericEventHandler<HTMLButtonElement>;
onLoadStart?: import("preact").JSX.GenericEventHandler<HTMLButtonElement>;
onLoadStartCapture?: import("preact").JSX.GenericEventHandler<HTMLButtonElement>;
onPause?: import("preact").JSX.GenericEventHandler<HTMLButtonElement>;
onPauseCapture?: import("preact").JSX.GenericEventHandler<HTMLButtonElement>;
onPlay?: import("preact").JSX.GenericEventHandler<HTMLButtonElement>;
onPlayCapture?: import("preact").JSX.GenericEventHandler<HTMLButtonElement>;
onPlaying?: import("preact").JSX.GenericEventHandler<HTMLButtonElement>;
onPlayingCapture?: import("preact").JSX.GenericEventHandler<HTMLButtonElement>;
onProgress?: import("preact").JSX.GenericEventHandler<HTMLButtonElement>;
onProgressCapture?: import("preact").JSX.GenericEventHandler<HTMLButtonElement>;
onRateChange?: import("preact").JSX.GenericEventHandler<HTMLButtonElement>;
onRateChangeCapture?: import("preact").JSX.GenericEventHandler<HTMLButtonElement>;
onSeeked?: import("preact").JSX.GenericEventHandler<HTMLButtonElement>;
onSeekedCapture?: import("preact").JSX.GenericEventHandler<HTMLButtonElement>;
onSeeking?: import("preact").JSX.GenericEventHandler<HTMLButtonElement>;
onSeekingCapture?: import("preact").JSX.GenericEventHandler<HTMLButtonElement>;
onStalled?: import("preact").JSX.GenericEventHandler<HTMLButtonElement>;
onStalledCapture?: import("preact").JSX.GenericEventHandler<HTMLButtonElement>;
onSuspend?: import("preact").JSX.GenericEventHandler<HTMLButtonElement>;
onSuspendCapture?: import("preact").JSX.GenericEventHandler<HTMLButtonElement>;
onTimeUpdate?: import("preact").JSX.GenericEventHandler<HTMLButtonElement>;
onTimeUpdateCapture?: import("preact").JSX.GenericEventHandler<HTMLButtonElement>;
onVolumeChange?: import("preact").JSX.GenericEventHandler<HTMLButtonElement>;
onVolumeChangeCapture?: import("preact").JSX.GenericEventHandler<HTMLButtonElement>;
onWaiting?: import("preact").JSX.GenericEventHandler<HTMLButtonElement>;
onWaitingCapture?: import("preact").JSX.GenericEventHandler<HTMLButtonElement>;
onClick?: import("preact").JSX.MouseEventHandler<HTMLButtonElement>;
onClickCapture?: import("preact").JSX.MouseEventHandler<HTMLButtonElement>;
onContextMenu?: import("preact").JSX.MouseEventHandler<HTMLButtonElement>;
onContextMenuCapture?: import("preact").JSX.MouseEventHandler<HTMLButtonElement>;
onDblClick?: import("preact").JSX.MouseEventHandler<HTMLButtonElement>;
onDblClickCapture?: import("preact").JSX.MouseEventHandler<HTMLButtonElement>;
onDrag?: import("preact").JSX.DragEventHandler<HTMLButtonElement>;
onDragCapture?: import("preact").JSX.DragEventHandler<HTMLButtonElement>;
onDragEnd?: import("preact").JSX.DragEventHandler<HTMLButtonElement>;
onDragEndCapture?: import("preact").JSX.DragEventHandler<HTMLButtonElement>;
onDragEnter?: import("preact").JSX.DragEventHandler<HTMLButtonElement>;
onDragEnterCapture?: import("preact").JSX.DragEventHandler<HTMLButtonElement>;
onDragExit?: import("preact").JSX.DragEventHandler<HTMLButtonElement>;
onDragExitCapture?: import("preact").JSX.DragEventHandler<HTMLButtonElement>;
onDragLeave?: import("preact").JSX.DragEventHandler<HTMLButtonElement>;
onDragLeaveCapture?: import("preact").JSX.DragEventHandler<HTMLButtonElement>;
onDragOver?: import("preact").JSX.DragEventHandler<HTMLButtonElement>;
onDragOverCapture?: import("preact").JSX.DragEventHandler<HTMLButtonElement>;
onDragStart?: import("preact").JSX.DragEventHandler<HTMLButtonElement>;
onDragStartCapture?: import("preact").JSX.DragEventHandler<HTMLButtonElement>;
onDrop?: import("preact").JSX.DragEventHandler<HTMLButtonElement>;
onDropCapture?: import("preact").JSX.DragEventHandler<HTMLButtonElement>;
onMouseDown?: import("preact").JSX.MouseEventHandler<HTMLButtonElement>;
onMouseDownCapture?: import("preact").JSX.MouseEventHandler<HTMLButtonElement>;
onMouseEnter?: import("preact").JSX.MouseEventHandler<HTMLButtonElement>;
onMouseEnterCapture?: import("preact").JSX.MouseEventHandler<HTMLButtonElement>;
onMouseLeave?: import("preact").JSX.MouseEventHandler<HTMLButtonElement>;
onMouseLeaveCapture?: import("preact").JSX.MouseEventHandler<HTMLButtonElement>;
onMouseMove?: import("preact").JSX.MouseEventHandler<HTMLButtonElement>;
onMouseMoveCapture?: import("preact").JSX.MouseEventHandler<HTMLButtonElement>;
onMouseOut?: import("preact").JSX.MouseEventHandler<HTMLButtonElement>;
onMouseOutCapture?: import("preact").JSX.MouseEventHandler<HTMLButtonElement>;
onMouseOver?: import("preact").JSX.MouseEventHandler<HTMLButtonElement>;
onMouseOverCapture?: import("preact").JSX.MouseEventHandler<HTMLButtonElement>;
onMouseUp?: import("preact").JSX.MouseEventHandler<HTMLButtonElement>;
onMouseUpCapture?: import("preact").JSX.MouseEventHandler<HTMLButtonElement>;
onSelect?: import("preact").JSX.GenericEventHandler<HTMLButtonElement>;
onSelectCapture?: import("preact").JSX.GenericEventHandler<HTMLButtonElement>;
onTouchCancel?: import("preact").JSX.TouchEventHandler<HTMLButtonElement>;
onTouchCancelCapture?: import("preact").JSX.TouchEventHandler<HTMLButtonElement>;
onTouchEnd?: import("preact").JSX.TouchEventHandler<HTMLButtonElement>;
onTouchEndCapture?: import("preact").JSX.TouchEventHandler<HTMLButtonElement>;
onTouchMove?: import("preact").JSX.TouchEventHandler<HTMLButtonElement>;
onTouchMoveCapture?: import("preact").JSX.TouchEventHandler<HTMLButtonElement>;
onTouchStart?: import("preact").JSX.TouchEventHandler<HTMLButtonElement>;
onTouchStartCapture?: import("preact").JSX.TouchEventHandler<HTMLButtonElement>;
onPointerOver?: import("preact").JSX.PointerEventHandler<HTMLButtonElement>;
onPointerOverCapture?: import("preact").JSX.PointerEventHandler<HTMLButtonElement>;
onPointerEnter?: import("preact").JSX.PointerEventHandler<HTMLButtonElement>;
onPointerEnterCapture?: import("preact").JSX.PointerEventHandler<HTMLButtonElement>;
onPointerDown?: import("preact").JSX.PointerEventHandler<HTMLButtonElement>;
onPointerDownCapture?: import("preact").JSX.PointerEventHandler<HTMLButtonElement>;
onPointerMove?: import("preact").JSX.PointerEventHandler<HTMLButtonElement>;
onPointerMoveCapture?: import("preact").JSX.PointerEventHandler<HTMLButtonElement>;
onPointerUp?: import("preact").JSX.PointerEventHandler<HTMLButtonElement>;
onPointerUpCapture?: import("preact").JSX.PointerEventHandler<HTMLButtonElement>;
onPointerCancel?: import("preact").JSX.PointerEventHandler<HTMLButtonElement>;
onPointerCancelCapture?: import("preact").JSX.PointerEventHandler<HTMLButtonElement>;
onPointerOut?: import("preact").JSX.PointerEventHandler<HTMLButtonElement>;
onPointerOutCapture?: import("preact").JSX.PointerEventHandler<HTMLButtonElement>;
onPointerLeave?: import("preact").JSX.PointerEventHandler<HTMLButtonElement>;
onPointerLeaveCapture?: import("preact").JSX.PointerEventHandler<HTMLButtonElement>;
onGotPointerCapture?: import("preact").JSX.PointerEventHandler<HTMLButtonElement>;
onGotPointerCaptureCapture?: import("preact").JSX.PointerEventHandler<HTMLButtonElement>;
onLostPointerCapture?: import("preact").JSX.PointerEventHandler<HTMLButtonElement>;
onLostPointerCaptureCapture?: import("preact").JSX.PointerEventHandler<HTMLButtonElement>;
onScroll?: import("preact").JSX.UIEventHandler<HTMLButtonElement>;
onScrollCapture?: import("preact").JSX.UIEventHandler<HTMLButtonElement>;
onWheel?: import("preact").JSX.WheelEventHandler<HTMLButtonElement>;
onWheelCapture?: import("preact").JSX.WheelEventHandler<HTMLButtonElement>;
onAnimationStart?: import("preact").JSX.AnimationEventHandler<HTMLButtonElement>;
onAnimationStartCapture?: import("preact").JSX.AnimationEventHandler<HTMLButtonElement>;
onAnimationEnd?: import("preact").JSX.AnimationEventHandler<HTMLButtonElement>;
onAnimationEndCapture?: import("preact").JSX.AnimationEventHandler<HTMLButtonElement>;
onAnimationIteration?: import("preact").JSX.AnimationEventHandler<HTMLButtonElement>;
onAnimationIterationCapture?: import("preact").JSX.AnimationEventHandler<HTMLButtonElement>;
onTransitionEnd?: import("preact").JSX.TransitionEventHandler<HTMLButtonElement>;
onTransitionEndCapture?: import("preact").JSX.TransitionEventHandler<HTMLButtonElement>;
children?: import("preact").ComponentChildren;
dangerouslySetInnerHTML?: {
__html: string;
};
};
/**
* Fold in HTML button prop definitions into ButtonProps, but ignore `size` because it's inherited
* from HTMLElement and conflicts with the _ButtonProps.size prop above.
*/
export type ButtonBaseProps = ButtonProps & Pick<import("preact").JSX.HTMLAttributes<HTMLButtonElement>, "max" | "required" | "default" | "high" | "low" | "disabled" | "start" | "open" | "media" | "loading" | "hidden" | "data" | "dir" | "form" | "label" | "slot" | "span" | "style" | "summary" | "title" | "pattern" | "async" | "readonly" | "defer" | "manifest" | "content" | "height" | "width" | "target" | "type" | "key" | "headers" | "onToggle" | "accept" | "acceptCharset" | "accessKey" | "action" | "allowFullScreen" | "allowTransparency" | "alt" | "as" | "autocomplete" | "autoComplete" | "autocorrect" | "autoCorrect" | "autofocus" | "autoFocus" | "autoPlay" | "capture" | "cellPadding" | "cellSpacing" | "charSet" | "challenge" | "checked" | "class" | "className" | "cols" | "colSpan" | "contentEditable" | "contextMenu" | "controls" | "controlsList" | "coords" | "crossOrigin" | "dateTime" | "disableRemotePlayback" | "download" | "draggable" | "encType" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "frameBorder" | "href" | "hrefLang" | "for" | "htmlFor" | "httpEquiv" | "icon" | "id" | "inputMode" | "integrity" | "is" | "keyParams" | "keyType" | "kind" | "lang" | "list" | "loop" | "marginHeight" | "marginWidth" | "maxLength" | "mediaGroup" | "method" | "min" | "minLength" | "multiple" | "muted" | "name" | "nonce" | "noValidate" | "optimum" | "placeholder" | "playsInline" | "poster" | "preload" | "radioGroup" | "readOnly" | "rel" | "role" | "rows" | "rowSpan" | "sandbox" | "scope" | "scoped" | "scrolling" | "seamless" | "selected" | "shape" | "sizes" | "spellcheck" | "src" | "srcset" | "srcDoc" | "srcLang" | "srcSet" | "step" | "tabIndex" | "useMap" | "value" | "volume" | "wmode" | "wrap" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "ref" | "jsx" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onInput" | "onInputCapture" | "onSearch" | "onSearchCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onReset" | "onResetCapture" | "onFormData" | "onFormDataCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDblClick" | "onDblClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseEnterCapture" | "onMouseLeave" | "onMouseLeaveCapture" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerOut" | "onPointerOutCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "children" | "dangerouslySetInnerHTML">;
export type IconButtonBaseProps = {

@@ -83,2 +414,2 @@ /**

};
export type IconButtonProps = ButtonProps & IconButtonBaseProps;
export type IconButtonProps = ButtonProps & Pick<import("preact").JSX.HTMLAttributes<HTMLButtonElement>, "max" | "required" | "default" | "high" | "low" | "disabled" | "start" | "open" | "media" | "loading" | "hidden" | "data" | "dir" | "form" | "label" | "slot" | "span" | "style" | "summary" | "title" | "pattern" | "async" | "readonly" | "defer" | "manifest" | "content" | "height" | "width" | "target" | "type" | "key" | "headers" | "onToggle" | "accept" | "acceptCharset" | "accessKey" | "action" | "allowFullScreen" | "allowTransparency" | "alt" | "as" | "autocomplete" | "autoComplete" | "autocorrect" | "autoCorrect" | "autofocus" | "autoFocus" | "autoPlay" | "capture" | "cellPadding" | "cellSpacing" | "charSet" | "challenge" | "checked" | "class" | "className" | "cols" | "colSpan" | "contentEditable" | "contextMenu" | "controls" | "controlsList" | "coords" | "crossOrigin" | "dateTime" | "disableRemotePlayback" | "download" | "draggable" | "encType" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "frameBorder" | "href" | "hrefLang" | "for" | "htmlFor" | "httpEquiv" | "icon" | "id" | "inputMode" | "integrity" | "is" | "keyParams" | "keyType" | "kind" | "lang" | "list" | "loop" | "marginHeight" | "marginWidth" | "maxLength" | "mediaGroup" | "method" | "min" | "minLength" | "multiple" | "muted" | "name" | "nonce" | "noValidate" | "optimum" | "placeholder" | "playsInline" | "poster" | "preload" | "radioGroup" | "readOnly" | "rel" | "role" | "rows" | "rowSpan" | "sandbox" | "scope" | "scoped" | "scrolling" | "seamless" | "selected" | "shape" | "sizes" | "spellcheck" | "src" | "srcset" | "srcDoc" | "srcLang" | "srcSet" | "step" | "tabIndex" | "useMap" | "value" | "volume" | "wmode" | "wrap" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "ref" | "jsx" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onInput" | "onInputCapture" | "onSearch" | "onSearchCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onReset" | "onResetCapture" | "onFormData" | "onFormDataCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDblClick" | "onDblClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseEnterCapture" | "onMouseLeave" | "onMouseLeaveCapture" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerOut" | "onPointerOutCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "children" | "dangerouslySetInnerHTML"> & IconButtonBaseProps;

60

lib/components/buttons.js

@@ -33,17 +33,15 @@ "use strict";

* @prop {import('preact').Ref<HTMLButtonElement>} [buttonRef]
* @prop {import("preact").ComponentChildren} [children]
* @prop {string} [className]
* @prop {string} [icon] - Name of `SvgIcon` to render in the button
* @prop {'left'|'right'} [iconPosition] - Icon positioned to left or to
* right of button text
* @prop {boolean} [disabled]
* @prop {boolean} [expanded] - Is the element associated with this button
* expanded (set `aria-expanded`)
* @prop {never} [aria-expanded] - Use `expanded` prop instead
* @prop {boolean} [pressed] - Is this button currently "active?" (set
* `aria-pressed`)
* @prop {(event: Event) => void} [onClick]
* @prop {never} [aria-pressed] - Use `pressed` prop instead
* @prop {'small'|'medium'|'large'} [size='medium'] - Relative button size:
* affects padding
* @prop {Object} [style] - Optional inline styles
* @prop {string} [title] - Button title; used for `aria-label` attribute
* @prop {never} [aria-label] - Use `title` prop instead
* @prop {'normal'|'primary'|'light'|'dark'} [variant='normal'] - For styling: element variant

@@ -53,2 +51,10 @@ */

/**
* Fold in HTML button prop definitions into ButtonProps, but ignore `size` because it's inherited
* from HTMLElement and conflicts with the _ButtonProps.size prop above.
*
* @typedef {Omit<import('preact').JSX.HTMLAttributes<HTMLButtonElement>, 'size'> } HTMLButtonElementProps
* @typedef {ButtonProps & HTMLButtonElementProps} ButtonBaseProps
*/
/**
* @typedef IconButtonBaseProps

@@ -61,10 +67,11 @@ * @prop {string} icon - Icon is required for icon buttons

/**
* @typedef {ButtonProps & IconButtonBaseProps} IconButtonProps
* @typedef {ButtonBaseProps & IconButtonBaseProps} IconButtonProps
*/
/**
* @param {ButtonProps} props
* @param {ButtonBaseProps} props
*/
function ButtonBase(_ref) {
let {
// Custom props.
buttonRef,

@@ -77,17 +84,22 @@ className,

expanded,
pressed
pressed,
// Standard <button> props.
type = 'button'
} = _ref,
restProps = _objectWithoutProperties(_ref, ["buttonRef", "className", "icon", "iconPosition", "size", "variant", "expanded", "pressed"]);
restProps = _objectWithoutProperties(_ref, ["buttonRef", "className", "icon", "iconPosition", "size", "variant", "expanded", "pressed", "type"]);
restProps['aria-expanded'] = expanded;
restProps['aria-pressed'] = pressed;
restProps['aria-label'] = restProps.title;
return (0, _jsxDevRuntime.jsxDEV)("button", _objectSpread({
const ariaProps = {
'aria-expanded': expanded,
'aria-pressed': pressed,
'aria-label': restProps.title
};
return (0, _jsxDevRuntime.jsxDEV)("button", _objectSpread(_objectSpread({
ref: buttonRef,
className: (0, _classnames.default)(className, `${className}--${size}`, `${className}--${variant}`, {
[`${className}--icon-${iconPosition}`]: icon
})
}, restProps), void 0, false, {
}),
type: type
}, ariaProps), restProps), void 0, false, {
fileName: _jsxFileName,
lineNumber: 56,
lineNumber: 68,
columnNumber: 5

@@ -119,3 +131,3 @@ }, this);

fileName: _jsxFileName,
lineNumber: 80,
lineNumber: 94,
columnNumber: 7

@@ -125,3 +137,3 @@ }, this)

fileName: _jsxFileName,
lineNumber: 79,
lineNumber: 93,
columnNumber: 5

@@ -133,3 +145,3 @@ }, this);

*
* @param {ButtonProps} props
* @param {ButtonBaseProps} props
*/

@@ -156,3 +168,3 @@

fileName: _jsxFileName,
lineNumber: 98,
lineNumber: 112,
columnNumber: 43

@@ -163,3 +175,3 @@ }, this), children, icon && iconPosition === 'right' && (0, _jsxDevRuntime.jsxDEV)(_SvgIcon.SvgIcon, {

fileName: _jsxFileName,
lineNumber: 100,
lineNumber: 114,
columnNumber: 44

@@ -169,3 +181,3 @@ }, this)]

fileName: _jsxFileName,
lineNumber: 97,
lineNumber: 111,
columnNumber: 5

@@ -177,3 +189,3 @@ }, this);

*
* @param {ButtonProps} props
* @param {ButtonBaseProps} props
*/

@@ -187,3 +199,3 @@

fileName: _jsxFileName,
lineNumber: 111,
lineNumber: 125,
columnNumber: 10

@@ -190,0 +202,0 @@ }, this);

@@ -0,4 +1,6 @@

export { Panel } from "./components/Panel";
export { useElementShouldClose } from "./hooks/use-element-should-close";
export { normalizeKeyName } from "./browser-compatibility-utils";
export { LabeledCheckbox, Checkbox } from "./components/Checkbox";
export { IconButton, LabeledButton, LinkButton } from "./components/buttons";
export { SvgIcon, registerIcons } from "./components/SvgIcon";

@@ -6,2 +6,14 @@ "use strict";

});
Object.defineProperty(exports, "LabeledCheckbox", {
enumerable: true,
get: function () {
return _Checkbox.LabeledCheckbox;
}
});
Object.defineProperty(exports, "Checkbox", {
enumerable: true,
get: function () {
return _Checkbox.Checkbox;
}
});
Object.defineProperty(exports, "IconButton", {

@@ -25,2 +37,8 @@ enumerable: true,

});
Object.defineProperty(exports, "Panel", {
enumerable: true,
get: function () {
return _Panel.Panel;
}
});
Object.defineProperty(exports, "SvgIcon", {

@@ -51,4 +69,8 @@ enumerable: true,

var _Checkbox = require("./components/Checkbox");
var _buttons = require("./components/buttons");
var _Panel = require("./components/Panel");
var _SvgIcon = require("./components/SvgIcon");

@@ -55,0 +77,0 @@

@@ -10,4 +10,12 @@ "use strict";

var _SharedMoleculePatterns = _interopRequireDefault(require("./patterns/SharedMoleculePatterns"));
var _SharedOrganismPatterns = _interopRequireDefault(require("./patterns/SharedOrganismPatterns"));
var _SharedButtonPatterns = _interopRequireDefault(require("./patterns/SharedButtonPatterns"));
var _SharedFormPatterns = _interopRequireDefault(require("./patterns/SharedFormPatterns"));
var _SharedPanelPatterns = _interopRequireDefault(require("./patterns/SharedPanelPatterns"));
var _router = require("../router");

@@ -36,3 +44,3 @@

fileName: _jsxFileName,
lineNumber: 19,
lineNumber: 26,
columnNumber: 7

@@ -43,3 +51,3 @@ }, this), (0, _jsxDevRuntime.jsxDEV)("p", {

fileName: _jsxFileName,
lineNumber: 20,
lineNumber: 27,
columnNumber: 7

@@ -49,15 +57,39 @@ }, this)]

}
/** @type {PlaygroundRoute[]} */
/** @type {PlaygroundRoute} */
const routes = [{
const homeRoute = {
route: /^\/?$/,
title: 'Home',
component: HomeRoute
};
/** @type {PlaygroundRoute[]} */
const patternRoutes = [{
route: '/shared-molecules',
title: 'Molecules',
component: _SharedMoleculePatterns.default
}, {
route: '/shared-organisms',
title: 'Organisms',
component: _SharedOrganismPatterns.default
}];
/** @type {PlaygroundRoute[]} */
const componentRoutes = [{
route: '/shared-buttons',
title: 'Buttons',
component: _SharedButtonPatterns.default
}, {
route: '/shared-forms',
title: 'Forms',
component: _SharedFormPatterns.default
}, {
route: '/shared-panel',
title: 'Panel',
component: _SharedPanelPatterns.default
}];
const demoRoutes = routes.filter(r => r.component !== HomeRoute);
/** @type {PlaygroundRoute[]} */
const routes = [homeRoute, ...patternRoutes, ...componentRoutes];
/**

@@ -86,3 +118,3 @@ * @typedef PlaygroundAppProps

fileName: _jsxFileName,
lineNumber: 62,
lineNumber: 96,
columnNumber: 5

@@ -95,3 +127,3 @@ }, this) : (0, _jsxDevRuntime.jsxDEV)(_jsxDevRuntime.Fragment, {

fileName: _jsxFileName,
lineNumber: 65,
lineNumber: 99,
columnNumber: 7

@@ -102,3 +134,3 @@ }, this), (0, _jsxDevRuntime.jsxDEV)("p", {

fileName: _jsxFileName,
lineNumber: 66,
lineNumber: 100,
columnNumber: 7

@@ -120,3 +152,3 @@ }, this)]

fileName: _jsxFileName,
lineNumber: 75,
lineNumber: 109,
columnNumber: 13

@@ -126,3 +158,3 @@ }, this)

fileName: _jsxFileName,
lineNumber: 74,
lineNumber: 108,
columnNumber: 11

@@ -132,3 +164,3 @@ }, this)

fileName: _jsxFileName,
lineNumber: 73,
lineNumber: 107,
columnNumber: 9

@@ -139,21 +171,23 @@ }, this), (0, _jsxDevRuntime.jsxDEV)("h2", {

fileName: _jsxFileName,
lineNumber: 78,
lineNumber: 112,
columnNumber: 9
}, this), (0, _jsxDevRuntime.jsxDEV)("ul", {
children: demoRoutes.map(c => (0, _jsxDevRuntime.jsxDEV)("li", {
className: "PlaygroundApp__nav-list",
children: patternRoutes.map(({
route,
title
}) => (0, _jsxDevRuntime.jsxDEV)("li", {
className: "PlaygroundApp__nav-item",
children: (0, _jsxDevRuntime.jsxDEV)("a", {
className: "PlaygroundApp__nav-link",
href:
/** @type string */
c.route,
onClick: e => navigate(e, c.route),
children: c.title
}, c.route, false, {
href: `${route}`,
onClick: e => navigate(e, route),
children: title
}, route, false, {
fileName: _jsxFileName,
lineNumber: 82,
lineNumber: 116,
columnNumber: 15
}, this)
}, c.route, false, {
}, route, false, {
fileName: _jsxFileName,
lineNumber: 81,
lineNumber: 115,
columnNumber: 13

@@ -163,4 +197,35 @@ }, this))

fileName: _jsxFileName,
lineNumber: 79,
lineNumber: 113,
columnNumber: 9
}, this), (0, _jsxDevRuntime.jsxDEV)("h2", {
children: "Common Components"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 126,
columnNumber: 9
}, this), (0, _jsxDevRuntime.jsxDEV)("ul", {
className: "PlaygroundApp__nav-list",
children: componentRoutes.map(({
route,
title
}) => (0, _jsxDevRuntime.jsxDEV)("li", {
className: "PlaygroundApp__nav-item",
children: (0, _jsxDevRuntime.jsxDEV)("a", {
href: `${route}`,
onClick: e => navigate(e, route),
children: title
}, route, false, {
fileName: _jsxFileName,
lineNumber: 130,
columnNumber: 15
}, this)
}, route, false, {
fileName: _jsxFileName,
lineNumber: 129,
columnNumber: 13
}, this))
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 127,
columnNumber: 9
}, this), extraRoutes.length > 0 && (0, _jsxDevRuntime.jsxDEV)(_jsxDevRuntime.Fragment, {

@@ -171,21 +236,23 @@ children: [(0, _jsxDevRuntime.jsxDEV)("h2", {

fileName: _jsxFileName,
lineNumber: 95,
lineNumber: 142,
columnNumber: 13
}, this), (0, _jsxDevRuntime.jsxDEV)("ul", {
children: extraRoutes.map(c => (0, _jsxDevRuntime.jsxDEV)("li", {
className: "PlaygroundApp__nav-list",
children: extraRoutes.map(({
route,
title
}) => (0, _jsxDevRuntime.jsxDEV)("li", {
className: "PlaygroundApp__nav-item",
children: (0, _jsxDevRuntime.jsxDEV)("a", {
className: "PlaygroundApp__nav-link",
href:
/** @type string */
c.route,
onClick: e => navigate(e, c.route),
children: c.title
}, c.route, false, {
href: `${route}`,
onClick: e => navigate(e, route),
children: title
}, route, false, {
fileName: _jsxFileName,
lineNumber: 99,
lineNumber: 146,
columnNumber: 19
}, this)
}, c.route, false, {
}, route, false, {
fileName: _jsxFileName,
lineNumber: 98,
lineNumber: 145,
columnNumber: 17

@@ -195,3 +262,3 @@ }, this))

fileName: _jsxFileName,
lineNumber: 96,
lineNumber: 143,
columnNumber: 13

@@ -202,3 +269,3 @@ }, this)]

fileName: _jsxFileName,
lineNumber: 72,
lineNumber: 106,
columnNumber: 7

@@ -210,3 +277,3 @@ }, this), (0, _jsxDevRuntime.jsxDEV)("div", {

fileName: _jsxFileName,
lineNumber: 113,
lineNumber: 159,
columnNumber: 7

@@ -216,3 +283,3 @@ }, this)]

fileName: _jsxFileName,
lineNumber: 71,
lineNumber: 105,
columnNumber: 5

@@ -219,0 +286,0 @@ }, this);

@@ -12,3 +12,3 @@ "use strict";

var _icons = _interopRequireDefault(require("./icons"));
var _icons = _interopRequireDefault(require("../icons"));

@@ -15,0 +15,0 @@ var _PlaygroundApp = _interopRequireDefault(require("./components/PlaygroundApp"));

{
"name": "@hypothesis/frontend-shared",
"version": "1.13.0",
"version": "2.0.0",
"description": "Shared components, styles and utilities for Hypothesis projects",

@@ -25,3 +25,3 @@ "license": "BSD-2-Clause",

"eslint": "^7.3.1",
"eslint-config-hypothesis": "^2.4.0",
"eslint-config-hypothesis": "^2.5.0",
"eslint-plugin-jsx-a11y": "^6.2.3",

@@ -28,0 +28,0 @@ "eslint-plugin-mocha": "^8.0.0",

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc