@salt-ds/lab 1.0.0-alpha.15 → 1.0.0-alpha.16

package/dist-es/navigation-item/NavigationItem.css.js

@@ -0,0 +1,4 @@
+var css_248z = "/* Vars applied to root NavigationItem component */\n.saltNavigationItem {\n  --navigationItem-color: var(--salt-text-secondary-foreground);\n  --navigationItem-fill: var(--salt-text-secondary-foreground);\n  --navigationItem-bar-inset: var(--salt-spacing-25);\n  --navigationItem-bar-size: calc(var(--salt-size-bar) / 2);\n  --navigationItem-indicator-background: var(--salt-navigable-indicator-active);\n  --navigationItem-gap: var(--salt-spacing-100);\n}\n\n/* Vars applied to NavigationItem component when active or selected */\n.saltNavigationItem-active,\n.saltNavigationItem-blurSelected {\n  --navigationItem-color: var(--salt-text-primary-foreground);\n  --navigationItem-fill: var(--salt-text-primary-foreground);\n}\n\n/* Styles applied to NavigationItem wrapper */\n.saltNavigationItem-wrapper {\n  display: flex;\n  align-items: center;\n  position: relative;\n  gap: var(--navigationItem-gap);\n  font-weight: var(--salt-text-fontWeight-strong);\n  text-decoration: none;\n  /* Hover off animation */\n  transition: all var(--salt-duration-instant) ease-in-out;\n}\n\n/* Styles applied to NavigationItem link */\n.saltNavigationItem-wrapper.saltLink {\n  --link-textDecoration: none;\n}\n\n/* Styles applied to NavigationItem icon */\n.saltNavigationItem-wrapper .saltIcon {\n  fill: var(--navigationItem-fill);\n}\n\n/* Styles applied to NavigationItem Badge */\n.saltNavigationItem-label .saltBadge {\n  margin-left: auto;\n}\n\n/* Styles applied to root NavigationItem component */\n.saltNavigationItem {\n  margin: 0 var(--navigationItem-gap);\n}\n\n/* Styles applied when orientation = \"horizontal\" */\n.saltNavigationItem-wrapper.saltNavigationItem-horizontal {\n  min-height: calc(var(--salt-size-base) + var(--navigationItem-gap) + var(--navigationItem-gap));\n  padding: calc(var(--navigationItem-gap) + var(--navigationItem-bar-inset)) 0 var(--navigationItem-gap) 0;\n  width: fit-content;\n}\n\n/* Styles applied when orientation = \"vertical\" */\n.saltNavigationItem-wrapper.saltNavigationItem-vertical {\n  min-height: calc(var(--salt-size-base));\n  padding-left: calc(var(--navigationItem-gap) + var(--navigationItem-bar-inset));\n  padding-right: var(--navigationItem-gap);\n  margin: var(--salt-spacing-50) 0;\n}\n\n/* Styles applied to NavigationItem label */\n.saltNavigationItem-wrapper .saltNavigationItem-label {\n  --link-color-visited: var(--navigationItem-color);\n  --link-color-hover: var(--navigationItem-color);\n\n  color: var(--navigationItem-color);\n  line-height: var(--salt-text-lineHeight);\n  font-family: var(--salt-text-fontFamily);\n  padding-left: calc(var(--saltNavigationItem-level, 0) * var(--navigationItem-gap));\n  flex: 1;\n  text-align: left;\n  display: flex;\n  align-items: center;\n  gap: var(--navigationItem-gap);\n}\n\n/* Styles applied when level is not 0 */\n.saltNavigationItem-wrapper.saltNavigationItem-nested {\n  font-weight: var(--salt-text-fontWeight);\n  padding-left: calc(var(--salt-spacing-250) + (var(--saltNavigationItem-level, 0) * var(--navigationItem-gap)));\n}\n\n/* Styles applied to expand button */\n.saltNavigationItem-wrapper.saltNavigationItem-expandButton {\n  --saltButton-background-hover: none;\n  --saltButton-background-active: none;\n  --saltButton-textTransform: none;\n  --saltButton-width: 100%;\n  --saltButton-letterSpacing: none;\n\n  gap: var(--navigationItem-gap);\n  /* Required to match link's outline offset */\n  outline-offset: var(--salt-size-border);\n}\n\n/* Styles applied to expand icon */\n.saltNavigationItem-wrapper .saltNavigationItem-expandIcon {\n  --saltIcon-color: var(--navigationItem-fill);\n}\n\n/* Styles applied to NavigationItem when focus is visible */\n.saltNavigationItem-wrapper:focus-visible {\n  outline: var(--salt-focused-outline);\n}\n\n/* Styles applied to NavigationItem when when orientation = \"horizontal\" and focus is visible */\n.saltNavigationItem-horizontal:focus-visible {\n  border-right: var(--navigationItem-gap) solid transparent;\n  border-left: var(--navigationItem-gap) solid transparent;\n  margin: 0 calc(var(--navigationItem-gap) * -1);\n}\n\n/* Styles applied to NavigationItem for non-keyboard focus */\n.saltNavigationItem-wrapper:focus:not(:focus-visible) {\n  outline: 0;\n}\n\n/* Styles applied to activation line */\n.saltNavigationItem-wrapper::after {\n  content: \"\";\n  position: absolute;\n  top: 0;\n  left: 0;\n  display: block;\n}\n\n/* Styles applied to activation line when orientation = \"horizontal\" */\n.saltNavigationItem-horizontal::after {\n  width: 100%;\n  height: var(--navigationItem-bar-size);\n  top: var(--navigationItem-bar-inset);\n}\n\n/* Styles applied to activation line when orientation = \"vertical\" */\n.saltNavigationItem-vertical::after {\n  width: var(--navigationItem-bar-size);\n  left: var(--navigationItem-bar-inset);\n  top: var(--navigationItem-bar-inset);\n  height: calc(100% - var(--salt-spacing-50));\n}\n\n/* Styles applied to activation line on hover and on focus */\n.saltNavigationItem-wrapper:hover::after,\n.saltNavigationItem-wrapper:focus::after {\n  background: var(--salt-navigable-indicator-hover);\n  /* Hover on animation */\n  transition: all var(--salt-duration-perceptible) ease-in-out;\n}\n\n/* Styles applied to activation line when item has active children */\n.saltNavigationItem-wrapper.saltNavigationItem-blurSelected::after,\n.saltNavigationItem-wrapper.saltNavigationItem-blurSelected:hover::after,\n.saltNavigationItem-wrapper.saltNavigationItem-blurSelected:focus::after {\n  --navigationItem-indicator-background: none;\n}\n\n/* Styles applied to activation line when item is active */\n.saltNavigationItem-wrapper.saltNavigationItem-active::after,\n.saltNavigationItem-wrapper.saltNavigationItem-active:hover::after,\n.saltNavigationItem-wrapper.saltNavigationItem-active:focus::after {\n  background: var(--navigationItem-indicator-background);\n  /* Hover on animation */\n  transition: all var(--salt-duration-perceptible) ease-in-out;\n}\n";
+
+export { css_248z as default };
+//# sourceMappingURL=NavigationItem.css.js.map

package/dist-es/navigation-item/NavigationItem.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"NavigationItem.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}

package/dist-es/navigation-item/NavigationItem.js

@@ -0,0 +1,92 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import { makePrefixer, Button, Link } from '@salt-ds/core';
+import { clsx } from 'clsx';
+import { ExpansionIcon } from './ExpansionIcon.js';
+import css_248z from './NavigationItem.css.js';
+import { useWindow } from '@salt-ds/window';
+import { useComponentCssInjection } from '@salt-ds/styles';
+
+const withBaseName = makePrefixer("saltNavigationItem");
+const NavigationItem = forwardRef(
+  function NavigationItem2(props, ref) {
+    const {
+      active,
+      blurSelected,
+      children,
+      className,
+      expanded = false,
+      orientation = "horizontal",
+      parent,
+      level = 0,
+      onExpand,
+      href,
+      style: styleProp,
+      ...rest
+    } = props;
+    const targetWindow = useWindow();
+    useComponentCssInjection({
+      testId: "salt-navigation-item",
+      css: css_248z,
+      window: targetWindow
+    });
+    const style = {
+      ...styleProp,
+      "--saltNavigationItem-level": `${level}`
+    };
+    const handleExpand = (event) => {
+      event.stopPropagation();
+      onExpand == null ? void 0 : onExpand(event);
+    };
+    const ConditionalWrapper = ({
+      children: children2,
+      className: className2,
+      ...rest2
+    }) => parent ? /* @__PURE__ */ jsx(Button, {
+      "aria-label": "expand",
+      variant: "secondary",
+      "aria-expanded": expanded,
+      className: clsx(withBaseName("expandButton"), className2),
+      onClick: handleExpand,
+      ...rest2,
+      children: children2
+    }) : /* @__PURE__ */ jsx(Link, {
+      "aria-current": active ? "page" : void 0,
+      href,
+      className: className2,
+      ...rest2,
+      children: children2
+    });
+    return /* @__PURE__ */ jsx("div", {
+      ref,
+      style,
+      className: clsx(withBaseName(), className),
+      ...rest,
+      children: /* @__PURE__ */ jsxs(ConditionalWrapper, {
+        className: clsx(
+          withBaseName("wrapper"),
+          {
+            [withBaseName("active")]: active,
+            [withBaseName("blurSelected")]: blurSelected,
+            [withBaseName("nested")]: level !== 0
+          },
+          withBaseName(orientation)
+        ),
+        children: [
+          /* @__PURE__ */ jsx("span", {
+            className: withBaseName("label"),
+            children
+          }),
+          parent && /* @__PURE__ */ jsx(ExpansionIcon, {
+            expanded,
+            orientation,
+            className: withBaseName("expandIcon")
+          })
+        ]
+      })
+    });
+  }
+);
+
+export { NavigationItem };
+//# sourceMappingURL=NavigationItem.js.map

package/dist-es/navigation-item/NavigationItem.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"NavigationItem.js","sources":["../src/navigation-item/NavigationItem.tsx"],"sourcesContent":["import {\n  ComponentPropsWithoutRef,\n  forwardRef,\n  MouseEventHandler,\n  MouseEvent,\n  ReactNode,\n} from \"react\";\nimport { makePrefixer, Link, Button } from \"@salt-ds/core\";\nimport { clsx } from \"clsx\";\nimport { ExpansionIcon } from \"./ExpansionIcon\";\n\nimport navigationItemCss from \"./NavigationItem.css\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\n\nexport interface NavigationItemProps extends ComponentPropsWithoutRef<\"div\"> {\n  /**\n   * Whether the navigation item is active.\n   */\n  active?: boolean;\n  /**\n   * Whether the parent navigation item has active nested items.\n   */\n  blurSelected?: boolean;\n  /**\n   * Whether the navigation item is expanded.\n   */\n  expanded?: boolean;\n  /**\n   * Level of nesting.\n   */\n  level?: number;\n  /**\n   * The orientation of the navigation item.\n   */\n  orientation?: \"horizontal\" | \"vertical\";\n  /**\n   * Whether the navigation item is a parent with nested items.\n   */\n  parent?: boolean;\n  /**\n   * Action to be triggered when the navigation item is expanded.\n   */\n  onExpand?: MouseEventHandler<HTMLButtonElement>;\n  /**\n   * Href to be passed to the Link element.\n   */\n  href?: string;\n}\n\nconst withBaseName = makePrefixer(\"saltNavigationItem\");\n\ntype ConditionalWrapper = {\n  children: ReactNode;\n  className: string;\n};\n\nexport const NavigationItem = forwardRef<HTMLDivElement, NavigationItemProps>(\n  function NavigationItem(props, ref) {\n    const {\n      active,\n      blurSelected,\n      children,\n      className,\n      expanded = false,\n      orientation = \"horizontal\",\n      parent,\n      level = 0,\n      onExpand,\n      href,\n      style: styleProp,\n      ...rest\n    } = props;\n\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"salt-navigation-item\",\n      css: navigationItemCss,\n      window: targetWindow,\n    });\n\n    const style = {\n      ...styleProp,\n      \"--saltNavigationItem-level\": `${level}`,\n    };\n\n    const handleExpand = (event: MouseEvent<HTMLButtonElement>) => {\n      event.stopPropagation();\n      onExpand?.(event);\n    };\n\n    const ConditionalWrapper = ({\n      children,\n      className,\n      ...rest\n    }: ConditionalWrapper) =>\n      parent ? (\n        <Button\n          aria-label=\"expand\"\n          variant=\"secondary\"\n          aria-expanded={expanded}\n          className={clsx(withBaseName(\"expandButton\"), className)}\n          onClick={handleExpand}\n          {...rest}\n        >\n          {children}\n        </Button>\n      ) : (\n        <Link\n          aria-current={active ? \"page\" : undefined}\n          href={href}\n          className={className}\n          {...rest}\n        >\n          {children}\n        </Link>\n      );\n\n    return (\n      <div\n        ref={ref}\n        style={style}\n        className={clsx(withBaseName(), className)}\n        {...rest}\n      >\n        <ConditionalWrapper\n          className={clsx(\n            withBaseName(\"wrapper\"),\n            {\n              [withBaseName(\"active\")]: active,\n              [withBaseName(\"blurSelected\")]: blurSelected,\n              [withBaseName(\"nested\")]: level !== 0,\n            },\n            withBaseName(orientation)\n          )}\n        >\n          <span className={withBaseName(\"label\")}>{children}</span>\n          {parent && (\n            <ExpansionIcon\n              expanded={expanded}\n              orientation={orientation}\n              className={withBaseName(\"expandIcon\")}\n            />\n          )}\n        </ConditionalWrapper>\n      </div>\n    );\n  }\n);\n"],"names":["NavigationItem","navigationItemCss","children","className","rest"],"mappings":"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"}

package/dist-types/combo-box-next/ComboBoxNext.d.ts

@@ -0,0 +1,70 @@
+import { ComponentPropsWithoutRef, FocusEvent, KeyboardEvent, ReactElement, Ref, SyntheticEvent } from "react";
+import { InputProps } from "@salt-ds/core";
+import { ListNextProps } from "../list-next";
+import { ComboBoxItemProps } from "./utils";
+import { UseComboBoxPortalProps } from "./useComboboxPortal";
+export interface ComboBoxNextProps<T> extends Omit<ComponentPropsWithoutRef<"input">, "onChange"> {
+    /**
+     * Additional props for the input component.
+     */
+    InputProps?: InputProps;
+    /**
+     * Additional props for the list component.
+     */
+    ListProps?: ListNextProps;
+    /**
+     * Additional props for the portal.
+     */
+    PortalProps?: UseComboBoxPortalProps;
+    /**
+     * If `true`, the component will be disabled.
+     */
+    disabled: boolean;
+    highlightedItem?: string;
+    selected?: string;
+    defaultSelected?: string;
+    /**
+     * The source of combobox items.
+     */
+    source: T[];
+    /**
+     * Callback for blur event
+     */
+    onBlur?: (event: FocusEvent<HTMLInputElement>) => void;
+    /**
+     * Callback for focus event
+     */
+    onFocus?: (event: FocusEvent<HTMLInputElement>) => void;
+    /**
+     * Callback for keyDown event
+     */
+    onKeyDown?: (event: KeyboardEvent<HTMLInputElement>) => void;
+    /**
+     * Callback for mouse over event
+     */
+    onMouseOver?: (event: SyntheticEvent) => void;
+    /**
+     * Optional ref for the input component
+     */
+    inputRef?: Ref<HTMLInputElement>;
+    /**
+     * Optional ref for the list component
+     */
+    listRef?: Ref<HTMLUListElement>;
+    /**
+     * The component used for item instead of the default.
+     */
+    ListItem: (props: ComboBoxItemProps<T>) => ReactElement<ComboBoxItemProps<T>>;
+    /**
+     * Function to be used as filter.
+     */
+    itemFilter?: (source: T[], filterValue?: string) => T[];
+    onChange?: (event: SyntheticEvent, data: {
+        value: string;
+    }) => void;
+    /**
+     * Styling variant. Defaults to "primary".
+     */
+    variant?: "primary" | "secondary";
+}
+export declare const ComboBoxNext: import("react").ForwardRefExoticComponent<ComboBoxNextProps<unknown> & import("react").RefAttributes<HTMLInputElement>>;

package/dist-types/combo-box-next/index.d.ts

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

package/dist-types/combo-box-next/useComboBox.d.ts

@@ -0,0 +1,34 @@
+import { FocusEvent, KeyboardEvent, SyntheticEvent } from "react";
+import { UseListProps } from "../list-next/useList";
+import { UseComboBoxPortalProps } from "./useComboboxPortal";
+interface UseComboBoxProps {
+    onBlur?: (event: FocusEvent<HTMLInputElement>) => void;
+    onFocus?: (event: FocusEvent<HTMLInputElement>) => void;
+    onMouseOver?: (event: SyntheticEvent) => void;
+    onKeyDown?: (event: KeyboardEvent<HTMLInputElement>) => void;
+    PortalProps?: UseComboBoxPortalProps;
+    listProps: UseListProps;
+}
+export declare const useComboBox: ({ onFocus, onBlur, onMouseOver, onKeyDown, PortalProps, listProps, }: UseComboBoxProps) => {
+    portalProps: {
+        open: boolean;
+        setOpen: import("react").Dispatch<import("react").SetStateAction<boolean>>;
+        floating: (node: HTMLElement | null) => void;
+        reference: (node: import("@floating-ui/react").ReferenceType | null) => void;
+        getTriggerProps: () => Record<string, unknown>;
+        getPortalProps: () => import("react").HTMLProps<HTMLDivElement>;
+    };
+    inputValue: string | undefined;
+    setInputValue: import("react").Dispatch<import("react").SetStateAction<string | undefined>>;
+    selectedItem: string | undefined;
+    setSelectedItem: import("react").Dispatch<import("react").SetStateAction<string | undefined>>;
+    highlightedItem: string | undefined;
+    setHighlightedItem: import("react").Dispatch<import("react").SetStateAction<string | undefined>>;
+    activeDescendant: string | undefined;
+    focusVisibleRef: import("react").Ref<HTMLElement>;
+    keyDownHandler: (event: KeyboardEvent<HTMLInputElement>) => void;
+    focusHandler: (event: FocusEvent<HTMLInputElement>) => void;
+    blurHandler: (event: FocusEvent<HTMLInputElement>) => void;
+    mouseOverHandler: (event: SyntheticEvent<HTMLElement>) => void;
+};
+export {};

package/dist-types/combo-box-next/useComboboxPortal.d.ts

@@ -0,0 +1,15 @@
+import { Placement } from "@floating-ui/react";
+import { HTMLProps } from "react";
+export interface UseComboBoxPortalProps {
+    open?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    placement?: Placement;
+}
+export declare function useComboboxPortal(props?: UseComboBoxPortalProps): {
+    open: boolean;
+    setOpen: import("react").Dispatch<import("react").SetStateAction<boolean>>;
+    floating: (node: HTMLElement | null) => void;
+    reference: (node: import("@floating-ui/react").ReferenceType | null) => void;
+    getPortalProps: () => HTMLProps<HTMLDivElement>;
+    getTriggerProps: () => Record<string, unknown>;
+};

package/dist-types/combo-box-next/utils.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+import { ListItemNextProps } from "../list-next";
+export declare const defaultFilter: (source: string[], filterValue?: string | undefined) => string[];
+export interface ComboBoxItemProps<T> extends Omit<ListItemNextProps, "value"> {
+    value: T;
+    matchPattern?: RegExp | string;
+}
+export declare const DefaultListItem: ({ value, matchPattern, onMouseDown, ...rest }: ComboBoxItemProps<string>) => JSX.Element;

package/dist-types/dialog/Dialog.d.ts

@@ -1,18 +1,23 @@
+import { HTMLAttributes, ComponentProps } from "react";
+import { FloatingFocusManager } from "@floating-ui/react";
 import { ValidationStatus } from "@salt-ds/core";
-import { HTMLAttributes } from "react";
-import { ScrimProps } from "../scrim";
 export interface DialogProps extends HTMLAttributes<HTMLDivElement> {
-    autoFocusRef?: ScrimProps["autoFocusRef"];
-    height?: string | number;
-    onClose?: () => void;
+    /**
+     * Display or hide the component.
+     */
     open?: boolean;
+    /**
+     * Callback function triggered when open state changes.
+     */
+    onOpenChange?: (open: boolean) => void;
+    /**
+     * Status indicator
+     * */
     status?: ValidationStatus;
-    width?: string | number;
-    enableBackdropClick?: boolean;
-    disablePortal?: boolean;
+    /**
+     * Which element to initially focus. Can be either a number (tabbable index as specified by the order) or a ref.
+     * Default value is 0 (first tabbable element).
+     * */
+    initialFocus?: ComponentProps<typeof FloatingFocusManager>["initialFocus"];
 }
-/**
- * The Dialog is a window that contains text and interactive components.
- * By default, Dialog is non-modal, but supports modal behaviour as well.
- */
 export declare const Dialog: import("react").ForwardRefExoticComponent<DialogProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist-types/dialog/DialogActions.d.ts

@@ -1,4 +1,2 @@
 import { HTMLAttributes } from "react";
-export interface DialogActionsProps extends HTMLAttributes<HTMLDivElement> {
-}
-export declare const DialogActions: import("react").ForwardRefExoticComponent<DialogActionsProps & import("react").RefAttributes<HTMLDivElement>>;
+export declare const DialogActions: import("react").ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>;

package/dist-types/dialog/DialogCloseButton.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import { ButtonProps } from "@salt-ds/core";
+export declare const DialogCloseButton: import("react").ForwardRefExoticComponent<ButtonProps & import("react").RefAttributes<HTMLButtonElement>>;

package/dist-types/dialog/DialogContent.d.ts

@@ -1,4 +1,2 @@
 import { HTMLAttributes } from "react";
-export interface DialogContentProps extends HTMLAttributes<HTMLDivElement> {
-}
-export declare const DialogContent: import("react").ForwardRefExoticComponent<DialogContentProps & import("react").RefAttributes<HTMLDivElement>>;
+export declare const DialogContent: import("react").ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>;

package/dist-types/dialog/{internal/DialogContext.d.ts → DialogContext.d.ts}

@@ -1,6 +1,9 @@
 /// <reference types="react" />
 export declare const DialogContext: import("react").Context<{
-    status?: "error" | "warning" | "success" | "info" | undefined;
     dialogId?: string | undefined;
-    setContentElement?: ((node: HTMLDivElement) => void) | undefined;
+    status?: "error" | "warning" | "success" | "info" | undefined;
 }>;
+export declare const useDialogContext: () => {
+    dialogId?: string | undefined;
+    status?: "error" | "warning" | "success" | "info" | undefined;
+};

package/dist-types/dialog/DialogTitle.d.ts

@@ -1,9 +1,8 @@
-import { HTMLAttributes, SyntheticEvent } from "react";
-export interface DialogTitleProps extends HTMLAttributes<HTMLDivElement> {
-    /**
-     * Disable the built-in ARIA heading attributes.
-     */
-    disableAria?: boolean;
-    onClose?: (event: SyntheticEvent) => void;
+import { ComponentPropsWithoutRef } from "react";
+import { ValidationStatus } from "@salt-ds/core";
+interface DialogTitleProps extends ComponentPropsWithoutRef<"h2"> {
+    status?: ValidationStatus;
+    accent?: boolean;
 }
-export declare const DialogTitle: import("react").ForwardRefExoticComponent<DialogTitleProps & import("react").RefAttributes<HTMLDivElement>>;
+export declare const DialogTitle: ({ children, className, accent, status: statusProp, ...rest }: DialogTitleProps) => JSX.Element;
+export {};

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

@@ -1,4 +1,6 @@
+export * from "./Dialog";
+export * from "./DialogTitle";
 export * from "./DialogActions";
 export * from "./DialogContent";
-export * from "./DialogTitle";
-export * from "./Dialog";
+export * from "./DialogContext";
+export * from "./DialogCloseButton";

package/dist-types/dialog/useDialog.d.ts

@@ -0,0 +1,27 @@
+/// <reference types="react" />
+import { UseFloatingUIProps } from "@salt-ds/core";
+export declare type UseDialogProps = Partial<Pick<UseFloatingUIProps, "onOpenChange" | "open">>;
+export declare function useDialog(props: UseDialogProps): {
+    getFloatingProps: (userProps?: import("react").HTMLProps<HTMLElement> | undefined) => Record<string, unknown>;
+    getReferenceProps: (userProps?: import("react").HTMLProps<Element> | undefined) => Record<string, unknown>;
+    floating: (node: HTMLElement | null) => void;
+    context: {
+        x: number | null;
+        y: number | null;
+        placement: import("@floating-ui/react").Placement;
+        strategy: import("@floating-ui/react").Strategy;
+        middlewareData: import("@floating-ui/react").MiddlewareData;
+        update: () => void;
+        reference: (node: import("@floating-ui/react").ReferenceType | null) => void;
+        floating: (node: HTMLElement | null) => void;
+        isPositioned: boolean;
+        open: boolean;
+        onOpenChange: (open: boolean) => void;
+        events: import("@floating-ui/react").FloatingEvents;
+        dataRef: import("react").MutableRefObject<import("@floating-ui/react").ContextData>;
+        nodeId: string | undefined;
+        floatingId: string;
+        refs: import("@floating-ui/react").ExtendedRefs<import("@floating-ui/react").ReferenceType>;
+        elements: import("@floating-ui/react").ExtendedElements<import("@floating-ui/react").ReferenceType>;
+    };
+};

package/dist-types/dropdown-next/DropdownNext.d.ts

@@ -0,0 +1,42 @@
+import { ListNextProps } from "../list-next";
+import { UseFloatingUIProps } from "@salt-ds/core";
+import { HTMLAttributes, Ref } from "react";
+import { Placement } from "@floating-ui/react";
+export interface DropdownNextProps extends Pick<UseFloatingUIProps, "open" | "onOpenChange" | "placement">, HTMLAttributes<HTMLButtonElement> {
+    /**
+     * If `true`, dropdown will be disabled.
+     */
+    disabled?: boolean;
+    /**
+     * Initially selected value for the dropdown, for use only in uncontrolled component.
+     */
+    defaultSelected?: string;
+    /**
+     * List of options when using a dropdown.
+     */
+    source: string[];
+    /**
+     * If `true`, dropdown is read only.
+     */
+    readOnly?: boolean;
+    /**
+     * Background styling variant. Defaults to `primary` .
+     */
+    variant?: "primary" | "secondary";
+    /**
+     * Placement of dropdown list. Defaults to `bottom` .
+     */
+    placement?: Placement;
+    /**
+     * Optional ref for the list component.
+     */
+    listRef?: Ref<HTMLUListElement>;
+    /**
+     * Additional props for dropdown list.
+     */
+    ListProps?: ListNextProps;
+    open?: boolean;
+    selected?: string;
+    highlightedItem?: string;
+}
+export declare const DropdownNext: import("react").ForwardRefExoticComponent<DropdownNextProps & import("react").RefAttributes<HTMLButtonElement>>;

package/dist-types/dropdown-next/index.d.ts

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

package/dist-types/dropdown-next/useDropdownNext.d.ts

@@ -0,0 +1,31 @@
+import { UseFloatingUIProps } from "@salt-ds/core";
+import { HTMLProps, KeyboardEvent, FocusEvent } from "react";
+import { UseListProps } from "../list-next/useList";
+interface UseDropdownNextProps extends Partial<Pick<UseFloatingUIProps, "onOpenChange" | "open" | "placement">> {
+    listProps: UseListProps;
+    openControlProp?: boolean;
+}
+export declare const useDropdownNext: ({ listProps, openControlProp, onOpenChange: onOpenChangeProp, placement: placementProp, }: UseDropdownNextProps) => {
+    handlers: {
+        focusHandler: (event: FocusEvent<HTMLElement>) => void;
+        keyDownHandler: (event: KeyboardEvent<HTMLElement>) => void;
+        blurHandler: () => void;
+        mouseOverHandler: () => void;
+        mouseDownHandler: () => void;
+    };
+    activeDescendant: string | undefined;
+    selectedItem: string | undefined;
+    setSelectedItem: import("react").Dispatch<import("react").SetStateAction<string | undefined>>;
+    highlightedItem: string | undefined;
+    setHighlightedItem: import("react").Dispatch<import("react").SetStateAction<string | undefined>>;
+    focusVisibleRef: import("react").Ref<HTMLElement>;
+    getListItems: (source: string[]) => JSX.Element[] | undefined;
+    portalProps: {
+        open: boolean;
+        setOpen: import("react").Dispatch<import("react").SetStateAction<boolean>>;
+        floating: (node: HTMLElement | null) => void;
+        reference: (node: import("@floating-ui/react").ReferenceType | null) => void;
+        getDropdownNextProps: () => HTMLProps<HTMLDivElement>;
+    };
+};
+export {};

package/dist-types/index.d.ts

@@ -10,6 +10,7 @@ export * from "./carousel";
 export * from "./cascading-menu";
 export * from "./color-chooser";
 export * from "./combo-box";
+export * from "./combo-box-next";
 export * from "./combo-box-deprecated";
 export * from "./contact-details";
 export * from "./content-status";
@@ -18,6 +19,7 @@ export * from "./deck-layout";
 export * from "./dialog";
 export * from "./drawer";
 export * from "./dropdown";
+export * from "./dropdown-next";
 export * from "./editable-label";
 export * from "./file-drop-zone";
 export { FormFieldLegacy as FormField, type FormFieldLegacyProps as FormFieldProps, FormLabel, } from "./form-field-legacy";
@@ -31,7 +33,7 @@ export * from "./list-next";
 export * from "./logo";
 export * from "./menu-button";
 export * from "./metric";
-export * from "./nav-item";
+export * from "./navigation-item";
 export * from "./overlay";
 export * from "./pagination";
 export * from "./parent-child-item";

package/dist-types/list-next/useList.d.ts

@@ -1,5 +1,5 @@
 import { FocusEvent, KeyboardEvent, RefObject, SyntheticEvent } from "react";
-interface UseListProps {
+export interface UseListProps {
     /**
      * If true, all items in list will be disabled.
      */
@@ -14,7 +14,7 @@ interface UseListProps {
     ref: RefObject<HTMLUListElement>;
 }
 export declare const useList: ({ disabled, highlightedItem: highLightedItemProp, selected: selectedProp, defaultSelected, onChange, id, ref, }: UseListProps) => {
-    focusHandler: (event: FocusEvent<HTMLUListElement>) => void;
+    focusHandler: (event: FocusEvent<HTMLUListElement | HTMLElement>) => void;
     keyDownHandler: (event: KeyboardEvent<HTMLElement>) => void;
     blurHandler: () => void;
     mouseOverHandler: () => void;
@@ -34,4 +34,3 @@ export declare const useList: ({ disabled, highlightedItem: highLightedItemProp,
     };
     focusVisibleRef: import("react").Ref<HTMLElement>;
 };
-export {};

package/dist-types/navigation-item/ExpansionIcon.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import { NavigationItemProps } from "./NavigationItem";
+export declare function ExpansionIcon({ expanded, orientation, className, }: Pick<NavigationItemProps, "expanded" | "orientation" | "className">): JSX.Element;

package/dist-types/navigation-item/NavigationItem.d.ts

@@ -0,0 +1,36 @@
+import { ComponentPropsWithoutRef, MouseEventHandler } from "react";
+export interface NavigationItemProps extends ComponentPropsWithoutRef<"div"> {
+    /**
+     * Whether the navigation item is active.
+     */
+    active?: boolean;
+    /**
+     * Whether the parent navigation item has active nested items.
+     */
+    blurSelected?: boolean;
+    /**
+     * Whether the navigation item is expanded.
+     */
+    expanded?: boolean;
+    /**
+     * Level of nesting.
+     */
+    level?: number;
+    /**
+     * The orientation of the navigation item.
+     */
+    orientation?: "horizontal" | "vertical";
+    /**
+     * Whether the navigation item is a parent with nested items.
+     */
+    parent?: boolean;
+    /**
+     * Action to be triggered when the navigation item is expanded.
+     */
+    onExpand?: MouseEventHandler<HTMLButtonElement>;
+    /**
+     * Href to be passed to the Link element.
+     */
+    href?: string;
+}
+export declare const NavigationItem: import("react").ForwardRefExoticComponent<NavigationItemProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist-types/navigation-item/index.d.ts

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@salt-ds/lab",
-  "version": "1.0.0-alpha.15",
+  "version": "1.0.0-alpha.16",
   "license": "Apache-2.0",
   "main": "dist-cjs/index.js",
   "sideEffects": false,
@@ -21,7 +21,7 @@
   "module": "dist-es/index.js",
   "typings": "dist-types/index.d.ts",
   "dependencies": {
-    "@salt-ds/core": "^1.8.0",
+    "@salt-ds/core": "^1.8.1",
     "clsx": "^2.0.0",
     "react-window": "^1.8.6",
     "compute-scroll-into-view": "^3.0.0",
@@ -34,10 +34,10 @@
     "react-color": "^2.19.3",
     "deepmerge": "^4.2.2",
     "clipboard-copy": "^4.0.1",
-    "aria-hidden": "^1.1.1",
-    "no-scroll": "^2.1.1",
     "attr-accept": "^2.0.0",
     "rifm": "^0.12.0",
+    "aria-hidden": "^1.1.1",
+    "no-scroll": "^2.1.1",
     "@fluentui/react-overflow": "^9.0.19"
   },
   "files": [

package/dist-cjs/dialog/internal/DialogContext.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"DialogContext.js","sources":["../src/dialog/internal/DialogContext.ts"],"sourcesContent":["import { createContext } from \"react\";\nimport { ValidationStatus } from \"@salt-ds/core\";\n\nexport const DialogContext = createContext<{\n  status?: ValidationStatus;\n  dialogId?: string;\n  setContentElement?: (node: HTMLDivElement) => void;\n}>({});\n"],"names":["createContext"],"mappings":";;;;;;AAGa,MAAA,aAAA,GAAgBA,mBAI1B,CAAA,EAAE;;;;"}

package/dist-cjs/nav-item/ExpansionButton.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"ExpansionButton.js","sources":["../src/nav-item/ExpansionButton.tsx"],"sourcesContent":["import { ChevronDownIcon, ChevronRightIcon } from \"@salt-ds/icons\";\nimport { ComponentPropsWithoutRef } from \"react\";\nimport { Button } from \"@salt-ds/core\";\nimport { NavItemProps } from \"./NavItem\";\n\nconst iconExpansionMap = {\n  vertical: {\n    expanded: ChevronDownIcon,\n    collapsed: ChevronRightIcon,\n  },\n  horizontal: {\n    expanded: ChevronDownIcon,\n    collapsed: ChevronDownIcon,\n  },\n};\n\nexport function ExpansionButton({\n  expanded = false,\n  orientation = \"horizontal\",\n  ...rest\n}: Pick<NavItemProps, \"expanded\" | \"orientation\"> &\n  ComponentPropsWithoutRef<\"button\">) {\n  const Icon =\n    iconExpansionMap[orientation][expanded ? \"expanded\" : \"collapsed\"];\n  return (\n    <Button aria-label=\"expand\" variant=\"secondary\" {...rest}>\n      <Icon aria-hidden=\"true\" />\n    </Button>\n  );\n}\n"],"names":["ChevronDownIcon","ChevronRightIcon","jsx","Button"],"mappings":";;;;;;;;AAKA,MAAM,gBAAmB,GAAA;AAAA,EACvB,QAAU,EAAA;AAAA,IACR,QAAU,EAAAA,qBAAA;AAAA,IACV,SAAW,EAAAC,sBAAA;AAAA,GACb;AAAA,EACA,UAAY,EAAA;AAAA,IACV,QAAU,EAAAD,qBAAA;AAAA,IACV,SAAW,EAAAA,qBAAA;AAAA,GACb;AACF,CAAA,CAAA;AAEO,SAAS,eAAgB,CAAA;AAAA,EAC9B,QAAW,GAAA,KAAA;AAAA,EACX,WAAc,GAAA,YAAA;AAAA,EACX,GAAA,IAAA;AACL,CACsC,EAAA;AACpC,EAAA,MAAM,IACJ,GAAA,gBAAA,CAAiB,WAAa,CAAA,CAAA,QAAA,GAAW,UAAa,GAAA,WAAA,CAAA,CAAA;AACxD,EAAA,uBACGE,cAAA,CAAAC,WAAA,EAAA;AAAA,IAAO,YAAW,EAAA,QAAA;AAAA,IAAS,OAAQ,EAAA,WAAA;AAAA,IAAa,GAAG,IAAA;AAAA,IAClD,QAAC,kBAAAD,cAAA,CAAA,IAAA,EAAA;AAAA,MAAK,aAAY,EAAA,MAAA;AAAA,KAAO,CAAA;AAAA,GAC3B,CAAA,CAAA;AAEJ;;;;"}

package/dist-cjs/nav-item/NavItem.css.js

@@ -1,6 +0,0 @@
-'use strict';
-
-var css_248z = "/* Vars applied to root NavItem component */\n.saltNavItem {\n  --navItem-color: var(--salt-text-secondary-foreground);\n  --navItem-fill: var(--salt-text-secondary-foreground);\n  --navItem-bar-inset: var(--salt-spacing-25);\n  --navItem-bar-size: calc(var(--salt-size-bar) / 2);\n  --navItem-indicator-background: var(--salt-navigable-indicator-active);\n}\n\n/* Vars applied to NavItem component when active or selected */\n.saltNavItem-active,\n.saltNavItem-blurSelected {\n  --navItem-color: var(--salt-text-primary-foreground);\n  --navItem-fill: var(--salt-text-primary-foreground);\n}\n\n/* Styles applied to root NavItem component */\n.saltNavItem {\n  display: flex;\n  align-items: center;\n  position: relative;\n  gap: var(--salt-spacing-100);\n  font-weight: var(--salt-text-fontWeight-strong);\n  /* Hover off animation */\n  transition: all var(--salt-duration-instant) ease-in-out;\n}\n\n/* Styles applied to NavItem icon */\n.saltNavItem .saltNavItem-icon {\n  fill: var(--navItem-fill);\n}\n\n/* Styles applied when orientation = \"horizontal\" */\n.saltNavItem-horizontal {\n  min-height: calc(var(--salt-size-base) + var(--salt-spacing-100) + var(--salt-spacing-100));\n  padding: calc(var(--salt-spacing-100) + var(--navItem-bar-inset)) 0 var(--salt-spacing-100) 0;\n  margin: 0 var(--salt-spacing-100);\n}\n\n/* Styles applied when orientation = \"vertical\" */\n.saltNavItem-vertical {\n  min-height: calc(var(--salt-size-base));\n  padding-left: calc(var(--salt-spacing-100) + var(--navItem-bar-inset));\n  margin: var(--salt-spacing-50) 0;\n}\n\n/* Styles applied to NavItem label */\n.saltNavItem .saltNavItem-label {\n  --link-color-visited: var(--navItem-color);\n  --link-color-hover: var(--navItem-color);\n\n  text-decoration: none;\n  color: var(--navItem-color);\n  line-height: var(--salt-text-lineHeight);\n  font-family: var(--salt-text-fontFamily);\n  padding-left: calc(var(--saltNavItem-level, 0) * var(--salt-spacing-100));\n  flex: 1;\n}\n\n/* Styles applied when level is not 0 */\n.saltNavItem-nested {\n  padding-left: calc(var(--salt-spacing-250) + (var(--saltNavItem-level, 0) * var(--salt-spacing-100)));\n}\n\n/* Styles applied to expand button icon */\n.saltNavItem .saltNavItem-expandButton {\n  --saltIcon-color: var(--navItem-fill);\n  --saltButton-background-hover: none;\n  --saltButton-background-active: none;\n}\n\n/* Styles applied to NavItem when focus is visible */\n.saltNavItem:focus-visible {\n  outline: var(--salt-focused-outline);\n}\n\n/* Styles applied to activation line */\n.saltNavItem::after {\n  content: \"\";\n  position: absolute;\n  top: 0;\n  left: 0;\n  display: block;\n}\n\n/* Styles applied to activation line when orientation = \"horizontal\" */\n.saltNavItem-horizontal::after {\n  width: 100%;\n  height: var(--navItem-bar-size);\n  top: var(--navItem-bar-inset);\n}\n\n/* Styles applied to activation line when orientation = \"vertical\" */\n.saltNavItem-vertical::after {\n  width: var(--navItem-bar-size);\n  height: 100%;\n  left: var(--navItem-bar-inset);\n}\n\n/* Styles applied to activation line on hover and on focus */\n.saltNavItem:hover::after,\n.saltNavItem:focus::after {\n  background: var(--salt-navigable-indicator-hover);\n  /* Hover on animation */\n  transition: all var(--salt-duration-perceptible) ease-in-out;\n}\n\n/* Styles applied to activation line when item has active children */\n.saltNavItem.saltNavItem-blurSelected::after,\n.saltNavItem.saltNavItem-blurSelected:hover::after,\n.saltNavItem.saltNavItem-blurSelected:focus::after {\n  --navItem-indicator-background: none;\n}\n\n/* Styles applied to activation line when item is active */\n.saltNavItem.saltNavItem-active::after,\n.saltNavItem.saltNavItem-active:hover::after,\n.saltNavItem.saltNavItem-active:focus::after {\n  background: var(--navItem-indicator-background);\n  /* Hover on animation */\n  transition: all var(--salt-duration-perceptible) ease-in-out;\n}\n";
-
-module.exports = css_248z;
-//# sourceMappingURL=NavItem.css.js.map

package/dist-cjs/nav-item/NavItem.css.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"NavItem.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;"}