@hypothesis/frontend-shared - npm Package Compare versions

Comparing version 6.9.0 to 6.9.1

lib/components/input/SelectNext.d.ts

@@ -27,6 +27,8 @@ import type { ComponentChildren } from 'preact';
     buttonId?: string;
+    'aria-label'?: string;
+    'aria-labelledby'?: string;
     /** @deprecated Use buttonContent instead */
     label?: ComponentChildren;
 };
-declare function SelectMain<T>({ buttonContent, label, value, onChange, children, disabled, elementRef, classes, buttonId, }: SelectProps<T>): import("preact").JSX.Element;
+declare function SelectMain<T>({ buttonContent, label, value, onChange, children, disabled, elementRef, classes, buttonId, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy, }: SelectProps<T>): import("preact").JSX.Element;
 declare namespace SelectMain {
@@ -33,0 +35,0 @@ var displayName: string;

lib/components/input/SelectNext.js

@@ -9,4 +9,4 @@ var _jsxFileName = "/home/runner/work/frontend-shared/frontend-shared/src/components/input/SelectNext.tsx";
 import { useSyncedRef } from '../../hooks/use-synced-ref';
+import { downcastRef } from '../../util/typing';
 import { MenuCollapseIcon, MenuExpandIcon } from '../icons';
-import Button from './Button';
 import { inputGroupStyles } from './InputGroup';
@@ -114,3 +114,5 @@ import SelectContext from './SelectContext';
   classes,
-  buttonId
+  buttonId,
+  'aria-label': ariaLabel,
+  'aria-labelledby': ariaLabelledBy
 }) {
@@ -153,6 +155,5 @@ const [listboxOpen, setListboxOpen] = useState(false);
     ref: wrapperRef,
-    children: [_jsxDEV(Button, {
+    children: [_jsxDEV("button", {
       id: buttonId !== null && buttonId !== void 0 ? buttonId : defaultButtonId,
-      variant: "custom",
-      classes: classnames('w-full flex justify-between', 'bg-grey-0 disabled:bg-grey-1 disabled:text-grey-6',
+      className: classnames('focus-visible-ring transition-colors whitespace-nowrap', 'w-full flex items-center justify-between gap-x-2 p-2', 'bg-grey-0 disabled:bg-grey-1 disabled:text-grey-6',
       // Add inherited rounded corners so that the toggle is consistent with
@@ -163,7 +164,11 @@ // the wrapper, which is the element rendering borders.
       'rounded-[inherit]', classes),
-      expanded: listboxOpen,
+      type: "button",
+      role: "combobox",
       disabled: disabled,
+      "aria-expanded": listboxOpen,
       "aria-haspopup": "listbox",
       "aria-controls": listboxId,
-      elementRef: buttonRef,
+      "aria-label": ariaLabel,
+      "aria-labelledby": ariaLabelledBy,
+      ref: downcastRef(buttonRef),
       onClick: () => setListboxOpen(prev => !prev),
@@ -182,3 +187,3 @@ onKeyDown: e => {
         fileName: _jsxFileName,
-        lineNumber: 242,
+        lineNumber: 251,
         columnNumber: 9
@@ -189,7 +194,7 @@ }, this), _jsxDEV("div", {
           fileName: _jsxFileName,
-          lineNumber: 244,
+          lineNumber: 253,
           columnNumber: 26
         }, this) : _jsxDEV(MenuExpandIcon, {}, void 0, false, {
           fileName: _jsxFileName,
-          lineNumber: 244,
+          lineNumber: 253,
           columnNumber: 49
@@ -199,3 +204,3 @@ }, this)
         fileName: _jsxFileName,
-        lineNumber: 243,
+        lineNumber: 252,
         columnNumber: 9
@@ -205,3 +210,3 @@ }, this)]
       fileName: _jsxFileName,
-      lineNumber: 215,
+      lineNumber: 220,
       columnNumber: 7
@@ -231,3 +236,3 @@ }, this), _jsxDEV(SelectContext.Provider, {
         fileName: _jsxFileName,
-        lineNumber: 248,
+        lineNumber: 257,
         columnNumber: 9
@@ -237,3 +242,3 @@ }, this)
       fileName: _jsxFileName,
-      lineNumber: 247,
+      lineNumber: 256,
       columnNumber: 7
@@ -243,3 +248,3 @@ }, this)]
     fileName: _jsxFileName,
-    lineNumber: 211,
+    lineNumber: 216,
     columnNumber: 5
@@ -246,0 +251,0 @@ }, this);

lib/pattern-library/components/Library.d.ts

@@ -54,3 +54,3 @@ import type { ComponentChildren, JSX } from 'preact';
     style?: JSX.CSSProperties;
-    title?: string;
+    title?: ComponentChildren;
     /**
@@ -57,0 +57,0 @@ * Should the demo also render the source? When true, a "Source" tab will be

lib/pattern-library/components/patterns/prototype/SelectNextPage.js

 var _jsxFileName = "/home/runner/work/frontend-shared/frontend-shared/src/pattern-library/components/patterns/prototype/SelectNextPage.tsx";
 import classnames from 'classnames';
-import { useCallback, useMemo, useState } from 'preact/hooks';
+import { useCallback, useId, useMemo, useState } from 'preact/hooks';
 import { ArrowLeftIcon, ArrowRightIcon } from '../../../../components/icons';
@@ -29,73 +29,84 @@ import { IconButton, InputGroup } from '../../../../components/input';
   textOnly,
-  classes,
-  items = defaultItems
+  items = defaultItems,
+  ...rest
 }) {
   const [value, setValue] = useState();
-  return _jsxDEV(SelectNext, {
-    value: value,
-    onChange: setValue,
-    classes: classes,
-    disabled: disabled,
-    buttonContent: value ? _jsxDEV(_Fragment, {
-      children: [textOnly && value.name, !textOnly && _jsxDEV("div", {
-        className: "flex",
-        children: [_jsxDEV("div", {
-          className: "truncate",
-          children: value.name
-        }, void 0, false, {
+  const buttonId = useId();
+  return _jsxDEV(_Fragment, {
+    children: [!rest['aria-label'] && !rest['aria-labelledby'] && _jsxDEV("label", {
+      htmlFor: buttonId,
+      children: "Select a person"
+    }, void 0, false, {
+      fileName: _jsxFileName,
+      lineNumber: 42,
+      columnNumber: 9
+    }, this), _jsxDEV(SelectNext, {
+      ...rest,
+      buttonId: buttonId,
+      value: value,
+      onChange: setValue,
+      disabled: disabled,
+      buttonContent: value ? _jsxDEV(_Fragment, {
+        children: [textOnly && value.name, !textOnly && _jsxDEV("div", {
+          className: "flex",
+          children: [_jsxDEV("div", {
+            className: "truncate",
+            children: value.name
+          }, void 0, false, {
+            fileName: _jsxFileName,
+            lineNumber: 56,
+            columnNumber: 19
+          }, this), _jsxDEV("div", {
+            className: "rounded px-2 ml-2 bg-grey-7 text-white",
+            children: value.id
+          }, void 0, false, {
+            fileName: _jsxFileName,
+            lineNumber: 57,
+            columnNumber: 19
+          }, this)]
+        }, void 0, true, {
           fileName: _jsxFileName,
-          lineNumber: 48,
+          lineNumber: 55,
           columnNumber: 17
-        }, this), _jsxDEV("div", {
-          className: "rounded px-2 ml-2 bg-grey-7 text-white",
-          children: value.id
-        }, void 0, false, {
-          fileName: _jsxFileName,
-          lineNumber: 49,
-          columnNumber: 17
         }, this)]
-      }, void 0, true, {
+      }, void 0, true) : disabled ? _jsxDEV(_Fragment, {
+        children: "This is disabled"
+      }, void 0, false) : _jsxDEV(_Fragment, {
+        children: "Select one\u2026"
+      }, void 0, false),
+      children: items.map(item => _jsxDEV(SelectNext.Option, {
+        value: item,
+        disabled: item.disabled,
+        children: ({
+          disabled
+        }) => textOnly ? item.name : _jsxDEV(_Fragment, {
+          children: [item.name, _jsxDEV("div", {
+            className: "grow"
+          }, void 0, false, {
+            fileName: _jsxFileName,
+            lineNumber: 82,
+            columnNumber: 19
+          }, this), _jsxDEV("div", {
+            className: classnames('rounded px-2 ml-2 text-white', {
+              'bg-grey-7': !disabled,
+              'bg-grey-4': disabled
+            }),
+            children: item.id
+          }, void 0, false, {
+            fileName: _jsxFileName,
+            lineNumber: 83,
+            columnNumber: 19
+          }, this)]
+        }, void 0, true)
+      }, item.id, false, {
         fileName: _jsxFileName,
-        lineNumber: 47,
-        columnNumber: 15
-      }, this)]
-    }, void 0, true) : disabled ? _jsxDEV(_Fragment, {
-      children: "This is disabled"
-    }, void 0, false) : _jsxDEV(_Fragment, {
-      children: "Select one..."
-    }, void 0, false),
-    children: items.map(item => _jsxDEV(SelectNext.Option, {
-      value: item,
-      disabled: item.disabled,
-      children: ({
-        disabled
-      }) => textOnly ? item.name : _jsxDEV(_Fragment, {
-        children: [item.name, _jsxDEV("div", {
-          className: "grow"
-        }, void 0, false, {
-          fileName: _jsxFileName,
-          lineNumber: 70,
-          columnNumber: 17
-        }, this), _jsxDEV("div", {
-          className: classnames('rounded px-2 ml-2 text-white', {
-            'bg-grey-7': !disabled,
-            'bg-grey-4': disabled
-          }),
-          children: item.id
-        }, void 0, false, {
-          fileName: _jsxFileName,
-          lineNumber: 71,
-          columnNumber: 17
-        }, this)]
-      }, void 0, true)
-    }, item.id, false, {
+        lineNumber: 71,
+        columnNumber: 11
+      }, this))
+    }, void 0, false, {
       fileName: _jsxFileName,
-      lineNumber: 63,
-      columnNumber: 9
-    }, this))
-  }, void 0, false, {
-    fileName: _jsxFileName,
-    lineNumber: 37,
-    columnNumber: 5
-  }, this);
+      lineNumber: 44,
+      columnNumber: 7
+    }, this)]
+  }, void 0, true);
 }
@@ -117,82 +128,93 @@ function InputGroupSelectExample({
   }, [selected, selectedIndex]);
-  return _jsxDEV(InputGroup, {
-    children: [_jsxDEV(IconButton, {
-      icon: ArrowLeftIcon,
-      title: "Previous student",
-      variant: "dark",
-      onClick: previous,
-      disabled: selectedIndex <= 0
+  const buttonId = useId();
+  return _jsxDEV(_Fragment, {
+    children: [_jsxDEV("label", {
+      htmlFor: buttonId,
+      children: "Select a person"
     }, void 0, false, {
       fileName: _jsxFileName,
-      lineNumber: 105,
+      lineNumber: 119,
       columnNumber: 7
-    }, this), _jsxDEV(SelectNext, {
-      value: selected,
-      onChange: setSelected,
-      classes: classes,
-      buttonContent: selected ? _jsxDEV("div", {
-        className: "flex",
-        children: [_jsxDEV("div", {
-          className: "truncate",
-          children: selected.name
-        }, void 0, false, {
+    }, this), _jsxDEV(InputGroup, {
+      children: [_jsxDEV(IconButton, {
+        icon: ArrowLeftIcon,
+        title: "Previous student",
+        variant: "dark",
+        onClick: previous,
+        disabled: selectedIndex <= 0
+      }, void 0, false, {
+        fileName: _jsxFileName,
+        lineNumber: 121,
+        columnNumber: 9
+      }, this), _jsxDEV(SelectNext, {
+        buttonId: buttonId,
+        value: selected,
+        onChange: setSelected,
+        classes: classes,
+        buttonContent: selected ? _jsxDEV("div", {
+          className: "flex",
+          children: [_jsxDEV("div", {
+            className: "truncate",
+            children: selected.name
+          }, void 0, false, {
+            fileName: _jsxFileName,
+            lineNumber: 136,
+            columnNumber: 17
+          }, this), _jsxDEV("div", {
+            className: "rounded px-2 ml-2 bg-grey-7 text-white",
+            children: selected.id
+          }, void 0, false, {
+            fileName: _jsxFileName,
+            lineNumber: 137,
+            columnNumber: 17
+          }, this)]
+        }, void 0, true, {
           fileName: _jsxFileName,
-          lineNumber: 119,
+          lineNumber: 135,
           columnNumber: 15
-        }, this), _jsxDEV("div", {
-          className: "rounded px-2 ml-2 bg-grey-7 text-white",
-          children: selected.id
-        }, void 0, false, {
+        }, this) : _jsxDEV(_Fragment, {
+          children: "Select one\u2026"
+        }, void 0, false),
+        children: defaultItems.map(item => _jsxDEV(SelectNext.Option, {
+          value: item,
+          children: [item.name, _jsxDEV("div", {
+            className: "grow"
+          }, void 0, false, {
+            fileName: _jsxFileName,
+            lineNumber: 149,
+            columnNumber: 15
+          }, this), _jsxDEV("div", {
+            className: classnames('rounded px-2 ml-2 text-white bg-grey-7'),
+            children: item.id
+          }, void 0, false, {
+            fileName: _jsxFileName,
+            lineNumber: 150,
+            columnNumber: 15
+          }, this)]
+        }, item.id, true, {
           fileName: _jsxFileName,
-          lineNumber: 120,
-          columnNumber: 15
-        }, this)]
-      }, void 0, true, {
-        fileName: _jsxFileName,
-        lineNumber: 118,
-        columnNumber: 13
-      }, this) : _jsxDEV(_Fragment, {
-        children: "Select one..."
-      }, void 0, false),
-      children: defaultItems.map(item => _jsxDEV(SelectNext.Option, {
-        value: item,
-        children: [item.name, _jsxDEV("div", {
-          className: "grow"
-        }, void 0, false, {
-          fileName: _jsxFileName,
-          lineNumber: 132,
+          lineNumber: 147,
           columnNumber: 13
-        }, this), _jsxDEV("div", {
-          className: classnames('rounded px-2 ml-2 text-white bg-grey-7'),
-          children: item.id
-        }, void 0, false, {
-          fileName: _jsxFileName,
-          lineNumber: 133,
-          columnNumber: 13
-        }, this)]
-      }, item.id, true, {
+        }, this))
+      }, void 0, false, {
         fileName: _jsxFileName,
-        lineNumber: 130,
-        columnNumber: 11
-      }, this))
-    }, void 0, false, {
+        lineNumber: 128,
+        columnNumber: 9
+      }, this), _jsxDEV(IconButton, {
+        icon: ArrowRightIcon,
+        title: "Next student",
+        variant: "dark",
+        onClick: next,
+        disabled: selectedIndex >= defaultItems.length - 1
+      }, void 0, false, {
+        fileName: _jsxFileName,
+        lineNumber: 158,
+        columnNumber: 9
+      }, this)]
+    }, void 0, true, {
       fileName: _jsxFileName,
-      lineNumber: 112,
+      lineNumber: 120,
       columnNumber: 7
-    }, this), _jsxDEV(IconButton, {
-      icon: ArrowRightIcon,
-      title: "Next student",
-      variant: "dark",
-      onClick: next,
-      disabled: selectedIndex >= defaultItems.length - 1
-    }, void 0, false, {
-      fileName: _jsxFileName,
-      lineNumber: 141,
-      columnNumber: 7
     }, this)]
-  }, void 0, true, {
-    fileName: _jsxFileName,
-    lineNumber: 104,
-    columnNumber: 5
-  }, this);
+  }, void 0, true);
 }
@@ -207,3 +229,3 @@ export default function SelectNextPage() {
         fileName: _jsxFileName,
-        lineNumber: 158,
+        lineNumber: 176,
         columnNumber: 11
@@ -214,3 +236,3 @@ }, this), " is a presentational component which behaves like the native ", _jsxDEV("code", {
         fileName: _jsxFileName,
-        lineNumber: 159,
+        lineNumber: 177,
         columnNumber: 27
@@ -220,3 +242,3 @@ }, this), " element."]
       fileName: _jsxFileName,
-      lineNumber: 157,
+      lineNumber: 175,
       columnNumber: 9
@@ -230,3 +252,3 @@ }, this),
           fileName: _jsxFileName,
-          lineNumber: 165,
+          lineNumber: 183,
           columnNumber: 11
@@ -242,3 +264,3 @@ }, this), _jsxDEV(Library.Example, {
                 fileName: _jsxFileName,
-                lineNumber: 170,
+                lineNumber: 188,
                 columnNumber: 17
@@ -248,3 +270,3 @@ }, this)
               fileName: _jsxFileName,
-              lineNumber: 169,
+              lineNumber: 187,
               columnNumber: 15
@@ -254,3 +276,3 @@ }, this)
             fileName: _jsxFileName,
-            lineNumber: 168,
+            lineNumber: 186,
             columnNumber: 13
@@ -260,3 +282,3 @@ }, this)
           fileName: _jsxFileName,
-          lineNumber: 167,
+          lineNumber: 185,
           columnNumber: 11
@@ -266,3 +288,3 @@ }, this)]
         fileName: _jsxFileName,
-        lineNumber: 164,
+        lineNumber: 182,
         columnNumber: 9
@@ -276,3 +298,3 @@ }, this), _jsxDEV(Library.Pattern, {
             fileName: _jsxFileName,
-            lineNumber: 178,
+            lineNumber: 196,
             columnNumber: 13
@@ -283,3 +305,3 @@ }, this), " toggles a listbox where ", _jsxDEV("code", {
             fileName: _jsxFileName,
-            lineNumber: 178,
+            lineNumber: 196,
             columnNumber: 61
@@ -289,3 +311,3 @@ }, this), "'", " UI can be customized and values can be objects."]
           fileName: _jsxFileName,
-          lineNumber: 177,
+          lineNumber: 195,
           columnNumber: 11
@@ -300,3 +322,3 @@ }, this), _jsxDEV(Library.Example, {
                 fileName: _jsxFileName,
-                lineNumber: 185,
+                lineNumber: 203,
                 columnNumber: 17
@@ -306,3 +328,3 @@ }, this)
               fileName: _jsxFileName,
-              lineNumber: 184,
+              lineNumber: 202,
               columnNumber: 15
@@ -312,3 +334,3 @@ }, this)
             fileName: _jsxFileName,
-            lineNumber: 183,
+            lineNumber: 201,
             columnNumber: 13
@@ -321,3 +343,3 @@ }, this), _jsxDEV(Library.Demo, {
                 fileName: _jsxFileName,
-                lineNumber: 191,
+                lineNumber: 209,
                 columnNumber: 17
@@ -327,3 +349,3 @@ }, this)
               fileName: _jsxFileName,
-              lineNumber: 190,
+              lineNumber: 208,
               columnNumber: 15
@@ -333,3 +355,3 @@ }, this)
             fileName: _jsxFileName,
-            lineNumber: 189,
+            lineNumber: 207,
             columnNumber: 13
@@ -339,3 +361,3 @@ }, this)]
           fileName: _jsxFileName,
-          lineNumber: 182,
+          lineNumber: 200,
           columnNumber: 11
@@ -388,3 +410,3 @@ }, this), _jsxDEV(Library.Example, {
                 fileName: _jsxFileName,
-                lineNumber: 199,
+                lineNumber: 217,
                 columnNumber: 17
@@ -394,3 +416,3 @@ }, this)
               fileName: _jsxFileName,
-              lineNumber: 198,
+              lineNumber: 216,
               columnNumber: 15
@@ -400,3 +422,3 @@ }, this)
             fileName: _jsxFileName,
-            lineNumber: 197,
+            lineNumber: 215,
             columnNumber: 13
@@ -406,5 +428,103 @@ }, this)
           fileName: _jsxFileName,
-          lineNumber: 196,
+          lineNumber: 214,
           columnNumber: 11
         }, this), _jsxDEV(Library.Example, {
+          title: "Labeling SelectNext",
+          children: [_jsxDEV("p", {
+            children: ["There are three ways to label a ", _jsxDEV("code", {
+              children: "SelectNext"
+            }, void 0, false, {
+              fileName: _jsxFileName,
+              lineNumber: 251,
+              columnNumber: 47
+            }, this), ". Make sure you always use one of them."]
+          }, void 0, true, {
+            fileName: _jsxFileName,
+            lineNumber: 250,
+            columnNumber: 13
+          }, this), _jsxDEV(Library.Demo, {
+            title: _jsxDEV(_Fragment, {
+              children: ["Via", ' ', _jsxDEV("code", {
+                children: ['<', "label ", '/>']
+              }, void 0, true, {
+                fileName: _jsxFileName,
+                lineNumber: 259,
+                columnNumber: 19
+              }, this), ' ', "linked to ", _jsxDEV("code", {
+                children: "buttonId"
+              }, void 0, false, {
+                fileName: _jsxFileName,
+                lineNumber: 262,
+                columnNumber: 29
+              }, this)]
+            }, void 0, true),
+            children: _jsxDEV("div", {
+              className: "w-96 mx-auto",
+              children: _jsxDEV(SelectExample, {}, void 0, false, {
+                fileName: _jsxFileName,
+                lineNumber: 267,
+                columnNumber: 17
+              }, this)
+            }, void 0, false, {
+              fileName: _jsxFileName,
+              lineNumber: 266,
+              columnNumber: 15
+            }, this)
+          }, void 0, false, {
+            fileName: _jsxFileName,
+            lineNumber: 255,
+            columnNumber: 13
+          }, this), _jsxDEV(Library.Demo, {
+            title: "Via aria-label",
+            children: _jsxDEV("div", {
+              className: "w-96 mx-auto",
+              children: _jsxDEV(SelectExample, {
+                "aria-label": "Select a person with aria label"
+              }, void 0, false, {
+                fileName: _jsxFileName,
+                lineNumber: 273,
+                columnNumber: 17
+              }, this)
+            }, void 0, false, {
+              fileName: _jsxFileName,
+              lineNumber: 272,
+              columnNumber: 15
+            }, this)
+          }, void 0, false, {
+            fileName: _jsxFileName,
+            lineNumber: 271,
+            columnNumber: 13
+          }, this), _jsxDEV(Library.Demo, {
+            title: "Via aria-labelledby",
+            children: _jsxDEV("div", {
+              className: "w-96 mx-auto",
+              children: [_jsxDEV("p", {
+                id: "select-next-meta-label",
+                children: "Select a person with aria labelledby"
+              }, void 0, false, {
+                fileName: _jsxFileName,
+                lineNumber: 279,
+                columnNumber: 17
+              }, this), _jsxDEV(SelectExample, {
+                "aria-labelledby": "select-next-meta-label"
+              }, void 0, false, {
+                fileName: _jsxFileName,
+                lineNumber: 282,
+                columnNumber: 17
+              }, this)]
+            }, void 0, true, {
+              fileName: _jsxFileName,
+              lineNumber: 278,
+              columnNumber: 15
+            }, this)
+          }, void 0, false, {
+            fileName: _jsxFileName,
+            lineNumber: 277,
+            columnNumber: 13
+          }, this)]
+        }, void 0, true, {
+          fileName: _jsxFileName,
+          lineNumber: 249,
+          columnNumber: 11
+        }, this), _jsxDEV(Library.Example, {
           title: "Select with long content",
@@ -416,3 +536,3 @@ children: [_jsxDEV("p", {
               fileName: _jsxFileName,
-              lineNumber: 233,
+              lineNumber: 289,
               columnNumber: 15
@@ -423,3 +543,3 @@ }, this), " makes sure the button content never overflows, and applies ", _jsxDEV("code", {
               fileName: _jsxFileName,
-              lineNumber: 234,
+              lineNumber: 290,
               columnNumber: 38
@@ -429,3 +549,3 @@ }, this), "."]
             fileName: _jsxFileName,
-            lineNumber: 232,
+            lineNumber: 288,
             columnNumber: 13
@@ -437,3 +557,3 @@ }, this), _jsxDEV("p", {
               fileName: _jsxFileName,
-              lineNumber: 237,
+              lineNumber: 293,
               columnNumber: 55
@@ -443,3 +563,3 @@ }, this), ", and the default hidden overflow logic does not work for your use case, it is up to you to handle the overflow logic in your components."]
             fileName: _jsxFileName,
-            lineNumber: 236,
+            lineNumber: 292,
             columnNumber: 13
@@ -450,3 +570,3 @@ }, this), _jsxDEV("p", {
             fileName: _jsxFileName,
-            lineNumber: 242,
+            lineNumber: 298,
             columnNumber: 13
@@ -462,3 +582,3 @@ }, this), _jsxDEV(Library.Demo, {
                 fileName: _jsxFileName,
-                lineNumber: 249,
+                lineNumber: 305,
                 columnNumber: 17
@@ -468,3 +588,3 @@ }, this)
               fileName: _jsxFileName,
-              lineNumber: 248,
+              lineNumber: 304,
               columnNumber: 15
@@ -474,3 +594,3 @@ }, this)
             fileName: _jsxFileName,
-            lineNumber: 247,
+            lineNumber: 303,
             columnNumber: 13
@@ -485,3 +605,3 @@ }, this), _jsxDEV(Library.Demo, {
                 fileName: _jsxFileName,
-                lineNumber: 255,
+                lineNumber: 311,
                 columnNumber: 17
@@ -491,3 +611,3 @@ }, this)
               fileName: _jsxFileName,
-              lineNumber: 254,
+              lineNumber: 310,
               columnNumber: 15
@@ -497,3 +617,3 @@ }, this)
             fileName: _jsxFileName,
-            lineNumber: 253,
+            lineNumber: 309,
             columnNumber: 13
@@ -508,3 +628,3 @@ }, this), _jsxDEV(Library.Demo, {
                 fileName: _jsxFileName,
-                lineNumber: 261,
+                lineNumber: 317,
                 columnNumber: 17
@@ -514,3 +634,3 @@ }, this)
               fileName: _jsxFileName,
-              lineNumber: 260,
+              lineNumber: 316,
               columnNumber: 15
@@ -520,3 +640,3 @@ }, this)
             fileName: _jsxFileName,
-            lineNumber: 259,
+            lineNumber: 315,
             columnNumber: 13
@@ -526,3 +646,3 @@ }, this)]
           fileName: _jsxFileName,
-          lineNumber: 231,
+          lineNumber: 287,
           columnNumber: 11
@@ -532,3 +652,3 @@ }, this)]
         fileName: _jsxFileName,
-        lineNumber: 176,
+        lineNumber: 194,
         columnNumber: 9
@@ -541,3 +661,3 @@ }, this), _jsxDEV(Library.Pattern, {
           fileName: _jsxFileName,
-          lineNumber: 268,
+          lineNumber: 324,
           columnNumber: 11
@@ -549,3 +669,3 @@ }, this), " accepts all standard", ' ', _jsxDEV(Library.Link, {
           fileName: _jsxFileName,
-          lineNumber: 269,
+          lineNumber: 325,
           columnNumber: 11
@@ -560,3 +680,3 @@ }, this), _jsxDEV(Library.Example, {
               fileName: _jsxFileName,
-              lineNumber: 274,
+              lineNumber: 330,
               columnNumber: 15
@@ -569,3 +689,3 @@ }, this), _jsxDEV(Library.InfoItem, {
                 fileName: _jsxFileName,
-                lineNumber: 278,
+                lineNumber: 334,
                 columnNumber: 17
@@ -575,3 +695,3 @@ }, this)
               fileName: _jsxFileName,
-              lineNumber: 277,
+              lineNumber: 333,
               columnNumber: 15
@@ -581,3 +701,3 @@ }, this)]
             fileName: _jsxFileName,
-            lineNumber: 273,
+            lineNumber: 329,
             columnNumber: 13
@@ -587,3 +707,3 @@ }, this)
           fileName: _jsxFileName,
-          lineNumber: 272,
+          lineNumber: 328,
           columnNumber: 11
@@ -598,3 +718,3 @@ }, this), _jsxDEV(Library.Example, {
               fileName: _jsxFileName,
-              lineNumber: 284,
+              lineNumber: 340,
               columnNumber: 15
@@ -607,3 +727,3 @@ }, this), _jsxDEV(Library.InfoItem, {
                 fileName: _jsxFileName,
-                lineNumber: 288,
+                lineNumber: 344,
                 columnNumber: 17
@@ -613,3 +733,3 @@ }, this)
               fileName: _jsxFileName,
-              lineNumber: 287,
+              lineNumber: 343,
               columnNumber: 15
@@ -619,3 +739,3 @@ }, this)]
             fileName: _jsxFileName,
-            lineNumber: 283,
+            lineNumber: 339,
             columnNumber: 13
@@ -625,3 +745,3 @@ }, this)
           fileName: _jsxFileName,
-          lineNumber: 282,
+          lineNumber: 338,
           columnNumber: 11
@@ -636,3 +756,3 @@ }, this), _jsxDEV(Library.Example, {
               fileName: _jsxFileName,
-              lineNumber: 294,
+              lineNumber: 350,
               columnNumber: 15
@@ -645,3 +765,3 @@ }, this), _jsxDEV(Library.InfoItem, {
                 fileName: _jsxFileName,
-                lineNumber: 298,
+                lineNumber: 354,
                 columnNumber: 17
@@ -651,3 +771,3 @@ }, this)
               fileName: _jsxFileName,
-              lineNumber: 297,
+              lineNumber: 353,
               columnNumber: 15
@@ -657,3 +777,3 @@ }, this)]
             fileName: _jsxFileName,
-            lineNumber: 293,
+            lineNumber: 349,
             columnNumber: 13
@@ -663,3 +783,3 @@ }, this)
           fileName: _jsxFileName,
-          lineNumber: 292,
+          lineNumber: 348,
           columnNumber: 11
@@ -675,3 +795,3 @@ }, this), _jsxDEV(Library.Example, {
                 fileName: _jsxFileName,
-                lineNumber: 305,
+                lineNumber: 361,
                 columnNumber: 41
@@ -681,3 +801,3 @@ }, this), "."]
               fileName: _jsxFileName,
-              lineNumber: 304,
+              lineNumber: 360,
               columnNumber: 15
@@ -690,3 +810,3 @@ }, this), _jsxDEV(Library.InfoItem, {
                 fileName: _jsxFileName,
-                lineNumber: 308,
+                lineNumber: 364,
                 columnNumber: 17
@@ -696,3 +816,3 @@ }, this)
               fileName: _jsxFileName,
-              lineNumber: 307,
+              lineNumber: 363,
               columnNumber: 15
@@ -705,3 +825,3 @@ }, this), _jsxDEV(Library.InfoItem, {
                 fileName: _jsxFileName,
-                lineNumber: 311,
+                lineNumber: 367,
                 columnNumber: 17
@@ -711,3 +831,3 @@ }, this)
               fileName: _jsxFileName,
-              lineNumber: 310,
+              lineNumber: 366,
               columnNumber: 15
@@ -717,3 +837,3 @@ }, this)]
             fileName: _jsxFileName,
-            lineNumber: 303,
+            lineNumber: 359,
             columnNumber: 13
@@ -723,3 +843,3 @@ }, this)
           fileName: _jsxFileName,
-          lineNumber: 302,
+          lineNumber: 358,
           columnNumber: 11
@@ -734,3 +854,3 @@ }, this), _jsxDEV(Library.Example, {
               fileName: _jsxFileName,
-              lineNumber: 317,
+              lineNumber: 373,
               columnNumber: 15
@@ -743,3 +863,3 @@ }, this), _jsxDEV(Library.InfoItem, {
                 fileName: _jsxFileName,
-                lineNumber: 321,
+                lineNumber: 377,
                 columnNumber: 17
@@ -749,3 +869,3 @@ }, this)
               fileName: _jsxFileName,
-              lineNumber: 320,
+              lineNumber: 376,
               columnNumber: 15
@@ -758,3 +878,3 @@ }, this), _jsxDEV(Library.InfoItem, {
                 fileName: _jsxFileName,
-                lineNumber: 324,
+                lineNumber: 380,
                 columnNumber: 17
@@ -764,3 +884,3 @@ }, this)
               fileName: _jsxFileName,
-              lineNumber: 323,
+              lineNumber: 379,
               columnNumber: 15
@@ -770,3 +890,3 @@ }, this)]
             fileName: _jsxFileName,
-            lineNumber: 316,
+            lineNumber: 372,
             columnNumber: 13
@@ -781,3 +901,3 @@ }, this), _jsxDEV(Library.Demo, {
                 fileName: _jsxFileName,
-                lineNumber: 329,
+                lineNumber: 385,
                 columnNumber: 17
@@ -787,3 +907,3 @@ }, this)
               fileName: _jsxFileName,
-              lineNumber: 328,
+              lineNumber: 384,
               columnNumber: 15
@@ -793,3 +913,3 @@ }, this)
             fileName: _jsxFileName,
-            lineNumber: 327,
+            lineNumber: 383,
             columnNumber: 13
@@ -799,3 +919,3 @@ }, this)]
           fileName: _jsxFileName,
-          lineNumber: 315,
+          lineNumber: 371,
           columnNumber: 11
@@ -805,3 +925,3 @@ }, this)]
         fileName: _jsxFileName,
-        lineNumber: 267,
+        lineNumber: 323,
         columnNumber: 9
@@ -819,3 +939,3 @@ }, this), _jsxDEV(Library.Pattern, {
                 fileName: _jsxFileName,
-                lineNumber: 340,
+                lineNumber: 396,
                 columnNumber: 32
@@ -826,3 +946,3 @@ }, this), " and ", _jsxDEV("code", {
                 fileName: _jsxFileName,
-                lineNumber: 340,
+                lineNumber: 396,
                 columnNumber: 58
@@ -832,3 +952,3 @@ }, this), ")."]
               fileName: _jsxFileName,
-              lineNumber: 338,
+              lineNumber: 394,
               columnNumber: 15
@@ -841,3 +961,3 @@ }, this), _jsxDEV(Library.InfoItem, {
                 fileName: _jsxFileName,
-                lineNumber: 343,
+                lineNumber: 399,
                 columnNumber: 17
@@ -847,3 +967,3 @@ }, this)
               fileName: _jsxFileName,
-              lineNumber: 342,
+              lineNumber: 398,
               columnNumber: 15
@@ -853,3 +973,3 @@ }, this)]
             fileName: _jsxFileName,
-            lineNumber: 337,
+            lineNumber: 393,
             columnNumber: 13
@@ -859,3 +979,3 @@ }, this)
           fileName: _jsxFileName,
-          lineNumber: 336,
+          lineNumber: 392,
           columnNumber: 11
@@ -870,3 +990,3 @@ }, this), _jsxDEV(Library.Example, {
               fileName: _jsxFileName,
-              lineNumber: 352,
+              lineNumber: 408,
               columnNumber: 15
@@ -879,3 +999,3 @@ }, this), _jsxDEV(Library.InfoItem, {
                 fileName: _jsxFileName,
-                lineNumber: 356,
+                lineNumber: 412,
                 columnNumber: 17
@@ -885,3 +1005,3 @@ }, this)
               fileName: _jsxFileName,
-              lineNumber: 355,
+              lineNumber: 411,
               columnNumber: 15
@@ -891,3 +1011,3 @@ }, this)]
             fileName: _jsxFileName,
-            lineNumber: 351,
+            lineNumber: 407,
             columnNumber: 13
@@ -897,3 +1017,3 @@ }, this)
           fileName: _jsxFileName,
-          lineNumber: 350,
+          lineNumber: 406,
           columnNumber: 11
@@ -908,3 +1028,3 @@ }, this), _jsxDEV(Library.Example, {
               fileName: _jsxFileName,
-              lineNumber: 362,
+              lineNumber: 418,
               columnNumber: 15
@@ -917,3 +1037,3 @@ }, this), _jsxDEV(Library.InfoItem, {
                 fileName: _jsxFileName,
-                lineNumber: 366,
+                lineNumber: 422,
                 columnNumber: 17
@@ -923,3 +1043,3 @@ }, this)
               fileName: _jsxFileName,
-              lineNumber: 365,
+              lineNumber: 421,
               columnNumber: 15
@@ -932,3 +1052,3 @@ }, this), _jsxDEV(Library.InfoItem, {
                 fileName: _jsxFileName,
-                lineNumber: 369,
+                lineNumber: 425,
                 columnNumber: 17
@@ -938,3 +1058,3 @@ }, this)
               fileName: _jsxFileName,
-              lineNumber: 368,
+              lineNumber: 424,
               columnNumber: 15
@@ -944,3 +1064,3 @@ }, this)]
             fileName: _jsxFileName,
-            lineNumber: 361,
+            lineNumber: 417,
             columnNumber: 13
@@ -958,3 +1078,3 @@ }, this), _jsxDEV(Library.Demo, {
                 fileName: _jsxFileName,
-                lineNumber: 374,
+                lineNumber: 430,
                 columnNumber: 17
@@ -964,3 +1084,3 @@ }, this)
               fileName: _jsxFileName,
-              lineNumber: 373,
+              lineNumber: 429,
               columnNumber: 15
@@ -970,3 +1090,3 @@ }, this)
             fileName: _jsxFileName,
-            lineNumber: 372,
+            lineNumber: 428,
             columnNumber: 13
@@ -976,3 +1096,3 @@ }, this)]
           fileName: _jsxFileName,
-          lineNumber: 360,
+          lineNumber: 416,
           columnNumber: 11
@@ -982,3 +1102,3 @@ }, this)]
         fileName: _jsxFileName,
-        lineNumber: 335,
+        lineNumber: 391,
         columnNumber: 9
@@ -992,3 +1112,3 @@ }, this), _jsxDEV(Library.Pattern, {
             fileName: _jsxFileName,
-            lineNumber: 386,
+            lineNumber: 442,
             columnNumber: 13
@@ -998,3 +1118,3 @@ }, this), " is meant to be used as a controlled component."]
           fileName: _jsxFileName,
-          lineNumber: 385,
+          lineNumber: 441,
           columnNumber: 11
@@ -1017,3 +1137,3 @@ }, this), _jsxDEV(Library.Code, {
         ) : (
-          <>Select one...</>
+          <>Select one…</>
         )
@@ -1040,3 +1160,3 @@ }
           fileName: _jsxFileName,
-          lineNumber: 390,
+          lineNumber: 446,
           columnNumber: 11
@@ -1046,3 +1166,3 @@ }, this)]
         fileName: _jsxFileName,
-        lineNumber: 384,
+        lineNumber: 440,
         columnNumber: 9
@@ -1052,3 +1172,3 @@ }, this)]
       fileName: _jsxFileName,
-      lineNumber: 163,
+      lineNumber: 181,
       columnNumber: 7
@@ -1058,3 +1178,3 @@ }, this)
     fileName: _jsxFileName,
-    lineNumber: 154,
+    lineNumber: 172,
     columnNumber: 5
@@ -1061,0 +1181,0 @@ }, this);

lib/util/typing.d.ts

@@ -0,6 +1,3 @@
+import type { Ref } from 'preact';
 /**
- * @template T
- * @typedef {import('preact').Ref<T>} Ref
- */
-/**
  * Helper for downcasting a ref to a more specific type, where that is safe
@@ -12,9 +9,3 @@ * to do.
  * Since Preact only writes to the `ref` prop, such a cast is safe.
- *
- * @template T
- * @template {T} U
- * @param {Ref<T>|undefined} ref
- * @return {Ref<U>|undefined}
  */
-export function downcastRef<T, U extends T>(ref: import("preact").Ref<T> | undefined): import("preact").Ref<U> | undefined;
-export type Ref<T> = import('preact').Ref<T>;
+export declare function downcastRef<T, U extends T>(ref: Ref<T> | undefined): Ref<U> | undefined;

lib/util/typing.js

 /**
- * @template T
- * @typedef {import('preact').Ref<T>} Ref
- */
-
-/**
  * Helper for downcasting a ref to a more specific type, where that is safe
@@ -13,12 +8,6 @@ * to do.
  * Since Preact only writes to the `ref` prop, such a cast is safe.
- *
- * @template T
- * @template {T} U
- * @param {Ref<T>|undefined} ref
- * @return {Ref<U>|undefined}
  */
 export function downcastRef(ref) {
-  return (/** @type {Ref<U>|undefined} */ref
-  );
+  return ref;
 }
 //# sourceMappingURL=typing.js.map

package.json

 {
   "name": "@hypothesis/frontend-shared",
-  "version": "6.9.0",
+  "version": "6.9.1",
   "description": "Shared components, styles and utilities for Hypothesis projects",
@@ -56,3 +56,3 @@ "license": "BSD-2-Clause",
     "sass": "^1.43.2",
-    "sinon": "^16.0.0",
+    "sinon": "^17.0.0",
     "svgo": "^3.0.0",
@@ -59,0 +59,0 @@ "tailwindcss": "3.3.3",

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

3152175

increased by0.29%

Lines of code

41068

increased by0.26%

No dependency changes