@hypothesis/frontend-shared - npm Package Compare versions

Comparing version 8.4.3 to 8.5.0

lib/components/icons/index.d.ts

@@ -49,2 +49,3 @@ export { default as AnnotateIcon } from './Annotate';
 export { default as FilterIcon } from './Filter';
+export { default as FilterClearIcon } from './FilterClear';
 export { default as FlagIcon } from './Flag';
@@ -51,0 +52,0 @@ export { default as FlagFilledIcon } from './FlagFilled';

lib/components/icons/index.js

@@ -50,2 +50,3 @@ // This file was auto-generated using scripts/generate-icons.js
 export { default as FilterIcon } from './Filter';
+export { default as FilterClearIcon } from './FilterClear';
 export { default as FlagIcon } from './Flag';
@@ -52,0 +53,0 @@ export { default as FlagFilledIcon } from './FlagFilled';

lib/components/input/Checkbox.d.ts

@@ -1,2 +0,2 @@
-import type { JSX } from 'preact';
+import type { JSX, Ref } from 'preact';
 import type { CompositeProps, IconComponent } from '../../types';
@@ -17,2 +17,6 @@ type ComponentProps = {
     type?: never;
+    /** Optional extra CSS classes appended to the container's className */
+    containerClasses?: string | string[];
+    /** Ref associated with the component's container */
+    containerRef?: Ref<HTMLLabelElement | undefined>;
 };
@@ -19,0 +23,0 @@ export type CheckboxProps = CompositeProps & ComponentProps & Omit<JSX.HTMLAttributes<HTMLInputElement>, 'size' | 'icon'>;

lib/components/input/Checkbox.js

@@ -39,3 +39,3 @@ var _jsxFileName = "/home/runner/work/frontend-shared/frontend-shared/src/components/input/Checkbox.tsx";
     fileName: _jsxFileName,
-    lineNumber: 60,
+    lineNumber: 65,
     columnNumber: 5
@@ -42,0 +42,0 @@ }, this);

lib/components/input/RadioButton.d.ts

@@ -1,2 +0,2 @@
-import type { JSX } from 'preact';
+import type { JSX, Ref } from 'preact';
 import type { CompositeProps, IconComponent } from '../../types';
@@ -11,2 +11,6 @@ type ComponentProps = {
     type?: never;
+    /** Optional extra CSS classes appended to the container's className */
+    containerClasses?: string | string[];
+    /** Ref associated with the component's container */
+    containerRef?: Ref<HTMLLabelElement | undefined>;
 };
@@ -13,0 +17,0 @@ export type RadioButtonProps = CompositeProps & ComponentProps & Omit<JSX.HTMLAttributes<HTMLInputElement>, 'size' | 'icon'>;

lib/components/input/RadioButton.js

@@ -27,3 +27,3 @@ var _jsxFileName = "/home/runner/work/frontend-shared/frontend-shared/src/components/input/RadioButton.tsx";
     fileName: _jsxFileName,
-    lineNumber: 38,
+    lineNumber: 43,
     columnNumber: 5
@@ -30,0 +30,0 @@ }, this);

lib/components/input/Select.js

@@ -30,3 +30,5 @@ var _jsxFileName = "/home/runner/work/frontend-shared/frontend-shared/src/components/input/Select.tsx";
   const checkboxRef = useRef(null);
+  const checkboxContainerRef = useRef(null);
   const optionRef = useSyncedRef(elementRef);
+  const eventTriggeredInCheckbox = e => e.target === checkboxRef.current || e.target === checkboxContainerRef.current;
   const selectContext = useContext(SelectContext);
@@ -97,5 +99,6 @@ if (!selectContext) {
     onClick: e => {
-      // Do not invoke callback if clicked element is the checkbox, as it has
-      // its own event handler.
-      if (!disabled && e.target !== checkboxRef.current) {
+      if (!disabled &&
+      // Do not invoke callback if clicked element is the checkbox or its
+      // container, as it has its own event handler.
+      !eventTriggeredInCheckbox(e)) {
         selectOneValue();
@@ -109,5 +112,5 @@ }
       if (['Enter', ' '].includes(e.key) &&
-      // Do not invoke callback if event triggers in checkbox, as it has its
-      // own event handler.
-      e.target !== checkboxRef.current) {
+      // Do not invoke callback if event triggered in the checkbox or its
+      // container, as it has its own event handler.
+      !eventTriggeredInCheckbox(e)) {
         e.preventDefault();
@@ -128,45 +131,61 @@ selectOneValue();
     children: _jsxDEV("div", {
-      className: classnames('w-full flex justify-between items-center gap-3', 'rounded py-2 px-3', {
+      className: classnames(
+      // Make items stretch so that all have the same height. This is
+      // important for multi-selects, where the checkbox actionable surface
+      // should span to the very edges of the option containing it.
+      'flex justify-between items-stretch', 'w-full rounded', {
         'hover:bg-grey-1 group-focus-visible:ring': !disabled,
         'bg-grey-1 hover:bg-grey-2': selected
       }),
-      children: [optionChildren(children, {
-        selected,
-        disabled
-      }), !multiple && _jsxDEV(CheckIcon, {
-        className: classnames('text-grey-6 scale-125', {
-          // Make the icon visible/invisible, instead of conditionally
-          // rendering it, to ensure consistent spacing among selected and
-          // non-selected options
-          'opacity-0': !selected
+      children: [_jsxDEV("div", {
+        className: "flex items-center py-2 pl-3",
+        children: optionChildren(children, {
+          selected,
+          disabled
         })
       }, void 0, false, {
         fileName: _jsxFileName,
-        lineNumber: 196,
+        lineNumber: 204,
+        columnNumber: 9
+      }, this), !multiple && _jsxDEV("div", {
+        className: "flex items-center py-2 px-3",
+        children: _jsxDEV(CheckIcon, {
+          className: classnames('text-grey-6 scale-125', {
+            // Make the icon visible/invisible, instead of conditionally
+            // rendering it, to ensure consistent spacing among selected and
+            // non-selected options
+            'opacity-0': !selected
+          })
+        }, void 0, false, {
+          fileName: _jsxFileName,
+          lineNumber: 209,
+          columnNumber: 13
+        }, this)
+      }, void 0, false, {
+        fileName: _jsxFileName,
+        lineNumber: 208,
         columnNumber: 11
-      }, this), multiple && _jsxDEV("div", {
-        className: classnames('scale-125', {
+      }, this), multiple && _jsxDEV(Checkbox, {
+        containerClasses: classnames('flex items-center py-2 px-3',
+        // The checkbox is sized based on the container's font size. Make
+        // it a bit larger.
+        'text-lg', {
           'text-grey-6': selected,
           'text-grey-3 hover:text-grey-6': !selected
         }),
-        children: _jsxDEV(Checkbox, {
-          checked: selected,
-          checkedIcon: CheckboxCheckedFilledIcon,
-          elementRef: checkboxRef,
-          onChange: toggleValue,
-          onKeyDown: e => {
-            if (e.key === 'ArrowLeft') {
-              var _optionRef$current;
-              e.preventDefault();
-              (_optionRef$current = optionRef.current) === null || _optionRef$current === void 0 || _optionRef$current.focus();
-            }
+        checked: selected,
+        checkedIcon: CheckboxCheckedFilledIcon,
+        elementRef: checkboxRef,
+        containerRef: checkboxContainerRef,
+        onChange: toggleValue,
+        onKeyDown: e => {
+          if (e.key === 'ArrowLeft') {
+            var _optionRef$current;
+            e.preventDefault();
+            (_optionRef$current = optionRef.current) === null || _optionRef$current === void 0 || _optionRef$current.focus();
           }
-        }, void 0, false, {
-          fileName: _jsxFileName,
-          lineNumber: 212,
-          columnNumber: 13
-        }, this)
+        }
       }, void 0, false, {
         fileName: _jsxFileName,
-        lineNumber: 206,
+        lineNumber: 220,
         columnNumber: 11
@@ -176,3 +195,3 @@ }, this)]
       fileName: _jsxFileName,
-      lineNumber: 184,
+      lineNumber: 191,
       columnNumber: 7
@@ -182,3 +201,3 @@ }, this)
     fileName: _jsxFileName,
-    lineNumber: 142,
+    lineNumber: 146,
     columnNumber: 5
@@ -370,3 +389,3 @@ }, this);
         fileName: _jsxFileName,
-        lineNumber: 523,
+        lineNumber: 541,
         columnNumber: 9
@@ -377,7 +396,7 @@ }, this), _jsxDEV("div", {
           fileName: _jsxFileName,
-          lineNumber: 525,
+          lineNumber: 543,
           columnNumber: 26
         }, this) : _jsxDEV(MenuExpandIcon, {}, void 0, false, {
           fileName: _jsxFileName,
-          lineNumber: 525,
+          lineNumber: 543,
           columnNumber: 49
@@ -387,3 +406,3 @@ }, this)
         fileName: _jsxFileName,
-        lineNumber: 524,
+        lineNumber: 542,
         columnNumber: 9
@@ -393,3 +412,3 @@ }, this)]
       fileName: _jsxFileName,
-      lineNumber: 492,
+      lineNumber: 510,
       columnNumber: 7
@@ -429,3 +448,3 @@ }, this), _jsxDEV(SelectContext.Provider, {
         fileName: _jsxFileName,
-        lineNumber: 537,
+        lineNumber: 555,
         columnNumber: 9
@@ -435,3 +454,3 @@ }, this)
       fileName: _jsxFileName,
-      lineNumber: 529,
+      lineNumber: 547,
       columnNumber: 7
@@ -441,3 +460,3 @@ }, this)]
     fileName: _jsxFileName,
-    lineNumber: 483,
+    lineNumber: 501,
     columnNumber: 5
@@ -444,0 +463,0 @@ }, this);

lib/components/input/ToggleInput.d.ts

@@ -1,2 +0,2 @@
-import type { JSX } from 'preact';
+import type { JSX, Ref } from 'preact';
 import type { CompositeProps, IconComponent } from '../../types';
@@ -10,2 +10,6 @@ type ComponentProps = {
     type: 'checkbox' | 'radio';
+    /** Optional extra CSS classes appended to the container's className */
+    containerClasses?: string | string[];
+    /** Ref associated with the component's container */
+    containerRef?: Ref<HTMLLabelElement | undefined>;
 };
@@ -18,3 +22,3 @@ export type ToggleInputProps = CompositeProps & ComponentProps & Omit<JSX.HTMLAttributes<HTMLInputElement>, 'size' | 'icon'>;
  */
-export default function ToggleInput({ children, elementRef, checked, icon: UncheckedIcon, checkedIcon: CheckedIcon, disabled, onChange, id, type, ...htmlAttributes }: ToggleInputProps): JSX.Element;
+export default function ToggleInput({ children, elementRef, containerRef, checked, icon: UncheckedIcon, checkedIcon: CheckedIcon, disabled, onChange, id, type, containerClasses, ...htmlAttributes }: ToggleInputProps): JSX.Element;
 export {};

lib/components/input/ToggleInput.js

@@ -13,2 +13,3 @@ var _jsxFileName = "/home/runner/work/frontend-shared/frontend-shared/src/components/input/ToggleInput.tsx";
   elementRef,
+  containerRef,
   checked,
@@ -21,2 +22,3 @@ icon: UncheckedIcon,
   type,
+  containerClasses,
   ...htmlAttributes
@@ -29,5 +31,6 @@ }) {
       'opacity-70': disabled
-    }),
+    }, containerClasses),
     htmlFor: id,
     "data-composite-component": type === 'checkbox' ? 'Checkbox' : 'RadioButton',
+    ref: downcastRef(containerRef),
     children: [_jsxDEV("input", {
@@ -54,3 +57,3 @@ ...htmlAttributes,
       fileName: _jsxFileName,
-      lineNumber: 54,
+      lineNumber: 66,
       columnNumber: 7
@@ -65,3 +68,3 @@ }, this), _jsxDEV(Icon, {
       fileName: _jsxFileName,
-      lineNumber: 76,
+      lineNumber: 88,
       columnNumber: 7
@@ -71,3 +74,3 @@ }, this), children]
     fileName: _jsxFileName,
-    lineNumber: 44,
+    lineNumber: 51,
     columnNumber: 5
@@ -74,0 +77,0 @@ }, this);

package.json

 {
   "name": "@hypothesis/frontend-shared",
-  "version": "8.4.3",
+  "version": "8.5.0",
   "description": "Shared components, styles and utilities for Hypothesis projects",
@@ -5,0 +5,0 @@ "license": "BSD-2-Clause",

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

3415738

increased by0.26%

Number of package files

915

increased by0.44%

Lines of code

44255

increased by0.18%

No dependency changes