@pushwoosh/dumb-components 2.9.4 → 2.9.6

package/Badge/types.d.ts

@@ -1,4 +1,4 @@
-import type { Ref, ReactNode } from 'react';
+import type { JSX, Ref, ReactNode } from 'react';
 /** Color of a {@link Badge}. */
 export type BadgeColor = 'gray' | 'green' | 'orange' | 'red' | 'purple' | 'sky' | 'locked' | 'black';
 /** Props of {@link Badge} — all `<div>` attributes plus the badge-specific ones. */

package/Calendar/CalendarSuperForm/components/CalendarRangePicker/CalendarRangePicker.js

@@ -18,7 +18,7 @@ export const CalendarRangePicker = ({
   firstDayOfWeek,
   initialVisibleMonth
 }) => {
-  const startMonthRef = useRef();
+  const startMonthRef = useRef(undefined);
   if (!startMonthRef.current) {
     const d = new Date();
     startMonthRef.current = initialVisibleMonth ?? value[0] ?? {

package/Drawer/components/Drawer/Drawer.js

@@ -28,7 +28,7 @@ export function Drawer({
   withoutLockScreen = false,
   closeOnClickOutside = true
 }) {
-  const ref = useRef();
+  const ref = useRef(undefined);
   const [element] = useState(createDivElement);
   const {
     zIndex: resolvedZIndex

package/Link/Link.d.ts

@@ -1,4 +1,4 @@
-import { type ReactElement } from 'react';
+import { type JSX, type ReactElement } from 'react';
 import type { LinkPropsWithoutAs, LinkPropsWithAsTag, LinkPropsWithAsComponent } from './types';
 /**
  * Styled hyperlink. Renders a native `<a>` by default.

package/Link/types.d.ts

@@ -1,4 +1,4 @@
-import type { Ref, ReactNode, ComponentType } from 'react';
+import type { JSX, Ref, ReactNode, ComponentType } from 'react';
 /** Default {@link Link} props — renders a styled `<a>` (requires `title` and `href`). */
 export type LinkPropsWithoutAs = Omit<JSX.IntrinsicElements['a'], 'ref'> & {
     /** Ref to the `<a>` element. */

package/Modal/components/Modal/Modal.js

@@ -26,7 +26,7 @@ export function Modal(props) {
     onClose,
     children
   } = props;
-  const ref = useRef();
+  const ref = useRef(undefined);
   const [element] = useState(createDivElement);
   const {
     zIndex: resolvedZIndex

package/NotificationInbox/NotificationInbox.js

@@ -155,7 +155,9 @@ export function NotificationInbox({
                 children: notification.title
               }), notification.description && _jsx(NotificationDescription, {
                 as: "div",
-                ref: element => descriptionRefs.current[notification.id] = element || null,
+                ref: element => {
+                  descriptionRefs.current[notification.id] = element || null;
+                },
                 "$variant": "standard",
                 "$color": Color.MAIN,
                 "$visibleLines": VISIBLE_LINES,

package/Pagination/types.d.ts

@@ -1,4 +1,4 @@
-import type { Ref } from 'react';
+import type { JSX, Ref } from 'react';
 /** Props of {@link Pagination} — all `<div>` attributes plus the pagination-specific ones. */
 export type PaginationProps = Omit<JSX.IntrinsicElements['div'], 'ref'> & {
     /** Ref to the container `<div>`. */

package/SortButton/types.d.ts

@@ -1,4 +1,4 @@
-import type { Ref } from 'react';
+import type { JSX, Ref } from 'react';
 /** Current sort order of a column: ascending, descending, or unsorted (`null`). */
 export type SortButtonOrder = 'asc' | 'desc' | null;
 /** Arrow icon state shown by a {@link SortButton}. */

package/Tabs/components/Tab/types.d.ts

@@ -1,4 +1,4 @@
-import type { ReactNode } from 'react';
+import type { JSX, ReactNode } from 'react';
 import type { TabCode } from '../../types';
 /** Props of {@link Tab} — all `<div>` attributes plus the tab-specific ones. */
 export type TabProps = Omit<JSX.IntrinsicElements['div'], 'ref' | 'onClick'> & Readonly<{

package/Tabs/components/TabBar/types.d.ts

@@ -1,4 +1,4 @@
-import type { ReactNode } from 'react';
+import type { JSX, ReactNode } from 'react';
 /** How a {@link TabBar} lays out its tabs. */
 export type TabBarLayout = 
 /** Tabs take their content width; overflowing tabs scroll behind arrows. */

package/Tabs/components/TabBarScrollableFrame/types.d.ts

@@ -1 +1,2 @@
+import type { JSX } from 'react';
 export type TabsListSlideFrameProps = Omit<JSX.IntrinsicElements['div'], 'ref'>;

package/Tabs/components/TabBase/types.d.ts

@@ -1,4 +1,4 @@
-import type { ReactNode } from 'react';
+import type { JSX, ReactNode } from 'react';
 export type TabBaseProps = Omit<JSX.IntrinsicElements['div'], 'ref'> & Readonly<{
     isActive?: boolean;
     isDisabled?: boolean;

package/hooks/useElementWidth.d.ts

@@ -8,5 +8,5 @@ type ElementWidth = number | null;
  * @returns a tuple of the current width (`null` before first measure) and a
  *   `forceUpdate` callback to re-measure on demand
  */
-export declare function useElementWidth(ref: RefObject<HTMLElement>): [ElementWidth, ForceUpdate];
+export declare function useElementWidth(ref: RefObject<HTMLElement | null>): [ElementWidth, ForceUpdate];
 export {};

package/hooks/useThemeName.d.ts

@@ -3,4 +3,4 @@ import { type ThemeName } from '@pushwoosh/kit-constants';
 /** Current theme as a value, for widgets that cannot read `var(--pw-color-*)` — canvas, shadow DOM.
  * @param ref - element inside the theme scope, so a light island wins over the document theme
  * @param isEnabled - pass `false` when the caller already knows the theme and needs no observer */
-export declare function useThemeName(ref?: RefObject<Element>, isEnabled?: boolean): ThemeName;
+export declare function useThemeName(ref?: RefObject<Element | null>, isEnabled?: boolean): ThemeName;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pushwoosh/dumb-components",
-  "version": "2.9.4",
+  "version": "2.9.6",
   "description": "React components to build Pushwoosh products",
   "main": "index.js",
   "module": "index.js",
@@ -43,7 +43,7 @@
     "@pushwoosh/kit-constants": "^2.1.0",
     "@pushwoosh/kit-helpers": "^4.12.7",
     "@pushwoosh/kit-icons": "^2.3.3",
-    "@pushwoosh/kit-typography": "^1.8.6",
+    "@pushwoosh/kit-typography": "^1.8.7",
     "@tippyjs/react": "^4.2.6",
     "@uiw/codemirror-themes": "^4.23.8",
     "@uiw/react-codemirror": "^4.23.8",

package/shared/dropdownField/shared.d.ts

@@ -10,5 +10,5 @@ export declare function defaultLabelFilter<T>(item: T, query: string, getLabel:
  * Mousedown handler for the field shell: refocuses the input and opens the dropdown,
  * while letting clicks on the input itself or on inner buttons through.
  */
-export declare function useShellMouseDown(inputRef: RefObject<HTMLInputElement>, isOpen: boolean, open: () => void): (event: MouseEvent<HTMLDivElement>) => void;
-export declare function useToggleOpen(inputRef: RefObject<HTMLInputElement>, isOpen: boolean, open: () => void, close: () => void): () => void;
+export declare function useShellMouseDown(inputRef: RefObject<HTMLInputElement | null>, isOpen: boolean, open: () => void): (event: MouseEvent<HTMLDivElement>) => void;
+export declare function useToggleOpen(inputRef: RefObject<HTMLInputElement | null>, isOpen: boolean, open: () => void, close: () => void): () => void;

package/shared/dropdownField/useFieldOpenEffects.d.ts

@@ -5,7 +5,7 @@ type Args = {
     onClose?: () => void;
     autoFocus?: boolean;
     disabled?: boolean;
-    inputRef: RefObject<HTMLInputElement>;
+    inputRef: RefObject<HTMLInputElement | null>;
 };
 /**
  * Side effects tied to a Combobox field's open state: optional autofocus on mount