@salt-ds/core 1.72.0 → 1.74.0

package/dist-types/menu/MenuGroup.d.ts

@@ -1,12 +1,34 @@
-import { type ComponentPropsWithoutRef, type ReactNode } from "react";
-export interface MenuGroupProps extends ComponentPropsWithoutRef<"div"> {
+import { type ComponentPropsWithoutRef, type ReactNode, type SyntheticEvent } from "react";
+interface BaseMenuGroupProps extends ComponentPropsWithoutRef<"div"> {
+    /**
+     * Menus to be rendered inside the menu group.
+     */
+    children?: ReactNode;
     /**
      * The label of the menu group.
      */
     label?: string;
     /**
-     * Menus to be rendered inside the menu group.
+     * Selection variant of the menu group. If "single", the menu items inside behave like radio buttons. If "multiple", they behave like checkboxes. Each selectable menu item needs a `value`. When omitted, the menu items are not selectable.
      */
-    children?: ReactNode;
+    selectionVariant?: "single" | "multiple";
+}
+interface SelectableMenuGroupProps extends BaseMenuGroupProps {
+    /**
+     * Callback fired when the selection changes.
+     * @param event
+     * @param newSelected The new selected values.
+     */
+    onSelectionChange?: (event: SyntheticEvent, newSelected: string[]) => void;
+    /**
+     * The values of the selected menu items. Required when `selectionVariant` is "single" or "multiple". The menu's content unmounts when it closes, so keep the selection in state and update it in `onSelectionChange`.
+     */
+    selected: string[];
+    selectionVariant: "single" | "multiple";
+}
+interface NonSelectableMenuGroupProps extends BaseMenuGroupProps {
+    selectionVariant?: undefined;
 }
+export type MenuGroupProps = SelectableMenuGroupProps | NonSelectableMenuGroupProps;
 export declare const MenuGroup: import("react").ForwardRefExoticComponent<MenuGroupProps & import("react").RefAttributes<HTMLDivElement>>;
+export {};

package/dist-types/menu/MenuGroupContext.d.ts

@@ -0,0 +1,10 @@
+import { type SyntheticEvent } from "react";
+import type { MenuGroupProps } from "./MenuGroup";
+export interface MenuGroupContextValue {
+    isSelected: (value: string) => boolean;
+    select: (event: SyntheticEvent, value: string) => void;
+    selectionVariant?: MenuGroupProps["selectionVariant"];
+}
+export declare const defaultMenuGroupContextValue: MenuGroupContextValue;
+export declare const MenuGroupContext: import("react").Context<MenuGroupContextValue>;
+export declare function useMenuGroup(): MenuGroupContextValue;

package/dist-types/menu/MenuItem.d.ts

@@ -4,5 +4,9 @@ export interface MenuItemProps extends ComponentPropsWithoutRef<"div"> {
      * If `true`, the item will be disabled.
      */
     disabled?: boolean;
+    /**
+     * The value of the item. Identifies the item inside a `MenuGroup` whose `selectionVariant` is "single" or "multiple".
+     */
+    value?: string;
 }
 export declare const MenuItem: import("react").ForwardRefExoticComponent<MenuItemProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist-types/menu/MenuPanelContext.d.ts

@@ -1,5 +1,7 @@
 import type { MenuContextValue } from "./MenuContext";
 export interface MenuPanelContextValue extends Pick<MenuContextValue, "getItemProps" | "activeIndex" | "setFocusInside"> {
+    hasSelectionIcon: boolean;
+    registerPanelSelectionIcon: () => () => void;
 }
 export declare const MenuPanelContext: import("react").Context<MenuPanelContextValue>;
 export declare function useMenuPanelContext(): MenuPanelContextValue;

package/dist-types/on-solid-button/OnSolidButton.d.ts

@@ -0,0 +1,12 @@
+import { type ComponentPropsWithoutRef } from "react";
+export interface OnSolidButtonProps extends ComponentPropsWithoutRef<"button"> {
+    /**
+     * If `true`, the button will be disabled.
+     */
+    disabled?: boolean;
+    /**
+     * If `true`, the button will be focusable when disabled.
+     */
+    focusableWhenDisabled?: boolean;
+}
+export declare const OnSolidButton: import("react").ForwardRefExoticComponent<OnSolidButtonProps & import("react").RefAttributes<HTMLButtonElement>>;

package/dist-types/on-solid-button/index.d.ts

@@ -0,0 +1 @@
+export * from "./OnSolidButton";

package/dist-types/pill/PillCheckIcon.d.ts

@@ -1,7 +1,8 @@
+import type { ReactElement } from "react";
 export interface PillCheckIconProps {
     checked?: boolean;
     className?: string;
     disabled?: boolean;
     active?: boolean;
 }
-export declare const PillCheckIcon: ({ className, checked, disabled, active, }: PillCheckIconProps) => JSX.Element;
+export declare const PillCheckIcon: ({ className, checked, disabled, active, }: PillCheckIconProps) => ReactElement;

package/dist-types/registerClassNameInjection.d.ts

@@ -15,5 +15,3 @@ declare module "@salt-ds/styles" {
         saltTooltip: TooltipProps;
     }
 }
-declare const _default: {};
-export default _default;

package/dist-types/salt-provider/SaltProvider.d.ts

@@ -23,7 +23,7 @@ export interface ThemeContextProps {
     /** @deprecated since 1.32.0. Use `actionFont`. */
     UNSTABLE_actionFont: ActionFont;
 }
-export declare const DensityContext: import("react").Context<"touch" | "high" | "low" | "medium" | "mobile">;
+export declare const DensityContext: import("react").Context<"high" | "low" | "touch" | "medium" | "mobile">;
 export declare const ThemeContext: import("react").Context<ThemeContextProps>;
 export declare const BreakpointContext: import("react").Context<Breakpoints>;
 type ThemeNextOnlyAttributes = "accent" | "corner" | "actionFont" | "headingFont";

package/dist-types/side-panel/internal/useIsScrollable.d.ts

@@ -1,2 +1,2 @@
 import { type RefObject } from "react";
-export declare function useIsScrollable(ref: RefObject<HTMLElement>): boolean;
+export declare function useIsScrollable(ref: RefObject<HTMLElement | null>): boolean;

package/dist-types/skip-link/internal/useManageFocusOnTarget.d.ts

@@ -3,7 +3,7 @@ interface ManageFocusOnTargetProps {
     onBlur?: FocusEventHandler;
     onClick?: MouseEventHandler;
     onKeyUp?: KeyboardEventHandler;
-    targetRef: RefObject<HTMLElement> | undefined;
+    targetRef: RefObject<HTMLElement | null> | undefined;
     targetClass: string;
 }
 interface ManageFocusOnTargetResult {

package/dist-types/slider/internal/SliderThumb.d.ts

@@ -1,4 +1,4 @@
-import { type ChangeEvent, type ComponentPropsWithoutRef, type RefObject } from "react";
+import { type ChangeEvent, type ComponentPropsWithoutRef, type Ref } from "react";
 interface SliderThumbProps extends Omit<ComponentPropsWithoutRef<"input">, "onChange" | "defaultValue" | "min" | "max"> {
     accessibleMaxText?: string;
     accessibleMinText?: string;
@@ -8,7 +8,7 @@ interface SliderThumbProps extends Omit<ComponentPropsWithoutRef<"input">, "onCh
     handleKeydownOnThumb: (event: React.KeyboardEvent) => void;
     handlePointerDown: (event: React.PointerEvent<HTMLDivElement>) => void;
     index?: number;
-    inputRef?: RefObject<HTMLInputElement>;
+    inputRef?: Ref<HTMLInputElement>;
     isFocusVisible: boolean;
     max: number;
     maxLabel?: string;

package/dist-types/slider/internal/SliderTrack.d.ts

@@ -1,4 +1,4 @@
-import { type HTMLAttributes, type RefObject } from "react";
+import { type HTMLAttributes, type Ref } from "react";
 interface SliderTrackProps extends Omit<HTMLAttributes<HTMLDivElement>, "onChange" | "defaultValue"> {
     children: React.ReactNode;
     constrainLabelPosition?: boolean;
@@ -18,7 +18,7 @@ interface SliderTrackProps extends Omit<HTMLAttributes<HTMLDivElement>, "onChang
     minLabel?: number | string;
     progressPercentage?: number;
     progressPercentageRange?: [number, number];
-    sliderRef: RefObject<HTMLDivElement>;
+    sliderRef: Ref<HTMLDivElement>;
 }
 export declare const SliderTrack: import("react").ForwardRefExoticComponent<SliderTrackProps & import("react").RefAttributes<HTMLDivElement>>;
 export {};

package/dist-types/slider/internal/useRangeSliderThumb.d.ts

@@ -3,7 +3,7 @@ import type { SliderProps } from "../Slider";
 type UseRangeSliderThumbProps = Pick<SliderProps, "min" | "max" | "step"> & {
     decimalPlaces: number;
     handleInputChange: (event: ChangeEvent<HTMLInputElement>, thumbIndex: number) => void;
-    inputRefs: RefObject<HTMLInputElement>[];
+    inputRefs: RefObject<HTMLInputElement | null>[];
     marks?: {
         label: string;
         value: number;

package/dist-types/slider/internal/useSliderThumb.d.ts

@@ -3,7 +3,7 @@ import type { SliderProps } from "../Slider";
 type UseSliderThumbProps = Pick<SliderProps, "min" | "max" | "step"> & {
     decimalPlaces: number;
     handleInputChange: (event: ChangeEvent<HTMLInputElement>) => void;
-    inputRef: RefObject<HTMLInputElement>;
+    inputRef: RefObject<HTMLInputElement | null>;
     marks?: {
         label: string;
         value: number;

package/dist-types/slider/internal/utils.d.ts

@@ -10,7 +10,7 @@ export declare const clampRange: (range: [number, number], max: number, min: num
     value: number;
     label: string;
 }[], restrictToMarks?: boolean) => [number, number];
-export declare const getClickedPosition: (sliderRef: RefObject<HTMLDivElement>, clientX: number, max: number, min: number, step: number, decimalPlaces: number, marks?: {
+export declare const getClickedPosition: (sliderRef: RefObject<HTMLDivElement | null>, clientX: number, max: number, min: number, step: number, decimalPlaces: number, marks?: {
     label: string;
     value: number;
 }[], restrictToMarks?: boolean) => number | undefined;

package/dist-types/tabs/internal/overflow/useOverflow.d.ts

@@ -1,10 +1,10 @@
 import { type RefObject } from "react";
 import type { RenderedTab } from "../contexts/TabsContext";
 interface UseOverflowProps {
-    container: RefObject<HTMLElement>;
+    container: RefObject<HTMLElement | null>;
     selected?: string;
     tabs: RenderedTab[];
-    overflowButton: RefObject<HTMLButtonElement>;
+    overflowButton: RefObject<HTMLButtonElement | null>;
     menuOpen: boolean;
 }
 export declare function useOverflow({ container, overflowButton, tabs, selected, menuOpen, }: UseOverflowProps): readonly [string[], string[], boolean];

package/dist-types/tabs/internal/overflow/useRenderedTabWidth.d.ts

@@ -3,7 +3,7 @@ import type { TabsContextValue, TabsRenderMode } from "../contexts/TabsContext";
 interface UseRenderedTabWidthProps {
     hostElement: HTMLDivElement | null;
     renderMode: TabsRenderMode;
-    tabRootRef: RefObject<HTMLDivElement>;
+    tabRootRef: RefObject<HTMLDivElement | null>;
     targetWindow: Window | null | undefined;
     updateRenderedTab: TabsContextValue["updateRenderedTab"];
     value: string;

package/dist-types/text/Editorial.d.ts

@@ -0,0 +1,7 @@
+import { type TextProps } from "./Text";
+export declare const Editorial1: import("react").ForwardRefExoticComponent<Omit<Omit<TextProps<"span">, "as">, "ref"> & import("react").RefAttributes<HTMLSpanElement>>;
+export declare const Editorial2: import("react").ForwardRefExoticComponent<Omit<Omit<TextProps<"span">, "as">, "ref"> & import("react").RefAttributes<HTMLSpanElement>>;
+export declare const Editorial3: import("react").ForwardRefExoticComponent<Omit<Omit<TextProps<"span">, "as">, "ref"> & import("react").RefAttributes<HTMLSpanElement>>;
+export declare const Editorial4: import("react").ForwardRefExoticComponent<Omit<Omit<TextProps<"span">, "as">, "ref"> & import("react").RefAttributes<HTMLSpanElement>>;
+export declare const Editorial5: import("react").ForwardRefExoticComponent<Omit<Omit<TextProps<"span">, "as">, "ref"> & import("react").RefAttributes<HTMLSpanElement>>;
+export declare const Editorial6: import("react").ForwardRefExoticComponent<Omit<Omit<TextProps<"span">, "as">, "ref"> & import("react").RefAttributes<HTMLSpanElement>>;

package/dist-types/text/Eyebrow.d.ts

@@ -0,0 +1,2 @@
+import { type TextProps } from "./Text";
+export declare const Eyebrow: import("react").ForwardRefExoticComponent<Omit<Omit<TextProps<"span">, "as">, "ref"> & import("react").RefAttributes<HTMLSpanElement>>;

package/dist-types/text/Text.d.ts

@@ -6,14 +6,21 @@ export type TextProps<T extends ElementType> = PolymorphicComponentPropWithRef<T
      * Applies disabled styling when true
      */
     disabled?: boolean;
+    /**
+     * Adjust the font weight using the theme's weights for the current text style.
+     * This is a visual change only and isn't conveyed to assistive technologies; use `<strong>` or `<em>` to convey importance or stress.
+     */
+    fontWeight?: "lighter" | "bolder";
     /**
      * Apply text truncation by mentioning number of rows to be displayed
      */
     maxRows?: number;
     /**
-     * Match styling to another text component's style
+     * Match styling to another text component's style.
+     * Use `inherit` to inherit the font and color from the parent element.
+     * The `lighter` and `bolder` weights then come from the closest `Text`-based ancestor.
      */
-    styleAs?: "h1" | "h2" | "h3" | "h4" | "label" | "display1" | "display2" | "display3" | "display4" | "notation" | "action" | "code";
+    styleAs?: "h1" | "h2" | "h3" | "h4" | "label" | "label2" | "body2" | "eyebrow" | "display1" | "display2" | "display3" | "display4" | "editorial1" | "editorial2" | "editorial3" | "editorial4" | "editorial5" | "editorial6" | "notation" | "action" | "code" | "inherit";
     /**
      * Change text color palette
      * @deprecated since 1.27.1. Use `color` instead.

package/dist-types/text/index.d.ts

@@ -1,5 +1,7 @@
 export * from "./Code";
 export * from "./Display";
+export * from "./Editorial";
+export * from "./Eyebrow";
 export * from "./Headings";
 export * from "./Label";
 export * from "./Text";

package/dist-types/toggle-button/ToggleButton.d.ts

@@ -1,6 +1,6 @@
 import { type ComponentPropsWithoutRef, type MouseEvent } from "react";
 import type { ButtonAppearance, ButtonSentiment } from "../button";
-export interface ToggleButtonProps extends ComponentPropsWithoutRef<"button"> {
+export interface ToggleButtonProps extends Omit<ComponentPropsWithoutRef<"button">, "onChange"> {
     /**
      * The appearance of the toggle button when `selected` is true.
      * @default solid

package/dist-types/tooltip/useTooltip.d.ts

@@ -1,5 +1,6 @@
-import { type HTMLProps } from "react";
-import { type UseFloatingUIProps } from "../utils";
+import { type FloatingContext, type Strategy } from "@floating-ui/react";
+import { type HTMLProps, type MutableRefObject } from "react";
+import { type UseFloatingUIProps, type UseFloatingUIReturn } from "../utils";
 export interface UseTooltipProps extends Partial<Pick<UseFloatingUIProps, "onOpenChange" | "open" | "placement">> {
     /**
      * When `true`, the tooltip will be disabled.
@@ -24,38 +25,23 @@ export interface UseTooltipProps extends Partial<Pick<UseFloatingUIProps, "onOpe
      */
     leaveDelay?: number;
 }
-export declare function useTooltip(props?: UseTooltipProps): {
+interface UseTooltipReturn {
     arrowProps: {
-        ref: import("react").MutableRefObject<SVGSVGElement | null>;
-        context: {
-            x: number;
-            y: number;
-            placement: import("@floating-ui/utils").Placement;
-            strategy: import("@floating-ui/utils").Strategy;
-            middlewareData: import("@floating-ui/core").MiddlewareData;
-            isPositioned: boolean;
-            update: () => void;
-            floatingStyles: React.CSSProperties;
-            open: boolean;
-            onOpenChange: (open: boolean, event?: Event, reason?: import("@floating-ui/react").OpenChangeReason) => void;
-            events: import("@floating-ui/react").FloatingEvents;
-            dataRef: React.MutableRefObject<import("@floating-ui/react").ContextData>;
-            nodeId: string | undefined;
-            floatingId: string | undefined;
-            refs: import("@floating-ui/react").ExtendedRefs<import("@floating-ui/react").ReferenceType>;
-            elements: import("@floating-ui/react").ExtendedElements<import("@floating-ui/react").ReferenceType>;
-        };
+        ref: MutableRefObject<SVGSVGElement | null>;
+        context: FloatingContext;
     };
     open: boolean;
-    floating: ((node: HTMLElement | null) => void) & ((node: HTMLElement | null) => void);
-    reference: ((node: import("@floating-ui/react-dom").ReferenceType | null) => void) & ((node: import("@floating-ui/react").ReferenceType | null) => void);
+    floating: UseFloatingUIReturn["floating"];
+    reference: UseFloatingUIReturn["reference"];
     getTooltipProps: () => HTMLProps<HTMLDivElement>;
     getTriggerProps: () => Record<string, unknown>;
     getTooltipPosition: () => {
         top: number;
         left: number;
-        position: import("@floating-ui/utils").Strategy;
+        position: Strategy;
         width: number | undefined;
         height: number | undefined;
     };
-};
+}
+export declare function useTooltip(props?: UseTooltipProps): UseTooltipReturn;
+export {};

package/dist-types/tree/TreeContext.d.ts

@@ -63,7 +63,7 @@ export interface TreeNodeContextValue {
     /** Node id for the li element */
     id: string;
     /** Ref for the li element rendered by TreeNodeTrigger */
-    nodeRef: RefObject<HTMLLIElement>;
+    nodeRef: RefObject<HTMLLIElement | null>;
     /** Callback ref that connects TreeNode's forwarded ref to the li element */
     setNodeRef: Ref<HTMLLIElement> | null;
     /** Whether node is selected */

package/dist-types/utils/forkRef.d.ts

@@ -0,0 +1,11 @@
+import type { Ref, RefCallback } from "react";
+/**
+ * Merges two refs into a callback ref. Components and hooks should use
+ * `useForkRef`, so the merged ref only changes when one of the refs changes.
+ * This is for places that can't call a hook, such as a props getter.
+ *
+ * The returned ref never returns a cleanup itself, so every React version
+ * detaches it by calling it with `null`; that is when the cleanups collected
+ * from refA and refB are run.
+ */
+export declare function forkRef<Instance>(refA: Ref<Instance> | null | undefined, refB: Ref<Instance> | null | undefined): RefCallback<Instance>;

package/dist-types/utils/inferElementType.d.ts

@@ -1,2 +1 @@
-import type { AnchorHTMLAttributes, DetailedHTMLProps } from "react";
-export type inferElementType<T> = T extends keyof JSX.IntrinsicElements ? JSX.IntrinsicElements[T] extends DetailedHTMLProps<AnchorHTMLAttributes<any>, infer Elem> ? Elem : never : HTMLElement;
+export type inferElementType<T> = T extends keyof HTMLElementTagNameMap ? HTMLElementTagNameMap[T] : T extends keyof SVGElementTagNameMap ? SVGElementTagNameMap[T] : HTMLElement;

package/dist-types/utils/marginMiddleware.d.ts

@@ -1,2 +1,2 @@
-import type { Middleware } from "@floating-ui/core";
+import type { Middleware } from "@floating-ui/react";
 export declare const margin: (value?: number) => Middleware;

package/dist-types/utils/setRef.d.ts

@@ -1,2 +1,6 @@
 import type { MutableRefObject } from "react";
+/**
+ * @deprecated since 1.73.0. Use `useForkRef` to merge refs instead, which also
+ * runs the cleanup functions that callback refs can return from React 19.
+ */
 export declare function setRef<T>(ref: MutableRefObject<T | null> | ((instance: T | null) => void) | null | undefined, value: T | null): void;

package/dist-types/utils/useFloatingUI/useFloatingUI.d.ts

@@ -55,11 +55,7 @@ export interface FloatingPlatformProviderProps {
 }
 export declare function FloatingPlatformProvider(props: FloatingPlatformProviderProps): import("react").JSX.Element;
 export declare function useFloatingPlatform(): FloatingPlatformContextType;
-export declare const DEFAULT_FLOATING_UI_MIDDLEWARE: {
-    name: string;
-    options?: any;
-    fn: (state: import("@floating-ui/dom").MiddlewareState) => import("@floating-ui/core").MiddlewareReturn | Promise<import("@floating-ui/core").MiddlewareReturn>;
-}[];
+export declare const DEFAULT_FLOATING_UI_MIDDLEWARE: Middleware[];
 type UseFloatingRefs = ReturnType<typeof useFloating>["refs"];
 export interface UseFloatingUIReturn extends ReturnType<typeof useFloating> {
     reference: UseFloatingRefs["setReference"];

package/dist-types/utils/useResizeObserver.d.ts

@@ -1,6 +1,6 @@
 import { type RefObject } from "react";
 export interface UseResizeObserverProps {
-    ref: RefObject<HTMLElement>;
+    ref: RefObject<HTMLElement | null>;
     onResize: () => void;
 }
 export declare function useResizeObserver({ ref, onResize }: UseResizeObserverProps): void;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@salt-ds/core",
-  "version": "1.72.0",
+  "version": "1.74.0",
   "license": "Apache-2.0",
   "repository": {
     "type": "git",
@@ -19,12 +19,12 @@
   ],
   "devDependencies": {
     "@types/react-window": "^1.8.2",
-    "react-window": "^1.8.6"
+    "react-window": "^1.8.11"
   },
   "dependencies": {
     "@floating-ui/react": "^0.27.19",
-    "@salt-ds/icons": "^1.18.3",
-    "@salt-ds/styles": "0.4.1",
+    "@salt-ds/icons": "^1.18.4",
+    "@salt-ds/styles": "0.4.2",
     "@salt-ds/window": "0.1.2",
     "clsx": "^2.0.0",
     "compute-scroll-into-view": "^3.0.0",