npm - @salt-ds/lab - Versions diffs - 1.0.0-alpha.2 → 1.0.0-alpha.20 - Mend

@salt-ds/lab 1.0.0-alpha.2 → 1.0.0-alpha.20

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (3223) hide show

package/dist-es/window/ElectronWindow.js ADDED Viewed

@@ -0,0 +1,107 @@
+import { jsx } from 'react/jsx-runtime';
+import { useForkRef, useIsomorphicLayoutEffect, SaltProvider } from '@salt-ds/core';
+import { forwardRef, useState, useRef, useCallback, useEffect } from 'react';
+import ReactDOM from 'react-dom';
+import { isDesktop, Window as Window$1 } from './WindowContext.js';
+import { useWindowParentContext, WindowParentContext } from './desktop-utils.js';
+import { useWindow } from '@salt-ds/window';
+import { useComponentCssInjection } from '@salt-ds/styles';
+import css_248z from './ElectronWindow.css.js';
+const Window = forwardRef(function ElectronWindow2({ className, children, id = "dialog", open = true, style = {}, ...rest }, forwardedRef) {
+  const { top, left, position, ...styleRest } = style;
+  const targetWindow = useWindow();
+  useComponentCssInjection({
+    testId: "salt-electron-window",
+    css: css_248z,
+    window: targetWindow
+  });
+  const [mountNode, setMountNode] = useState(null);
+  const [windowRef, setWindowRef] = useState(null);
+  const windowRoot = useRef(null);
+  const forkedRef = useForkRef(forwardedRef, windowRoot);
+  if (!mountNode) {
+    const win = window.open("", id);
+    win.document.write(
+      `<html lang="en"><head><title>${id}</title><base href="${location.origin}"><style>body {margin: 0;}</style></head><body></body></html>`
+    );
+    document.head.querySelectorAll("style").forEach((htmlElement) => {
+      win.document.head.appendChild(htmlElement.cloneNode(true));
+    });
+    const bodyElement = win.document.body;
+    setMountNode(bodyElement);
+    setWindowRef(win);
+  }
+  const parentWindow = useWindowParentContext();
+  const closeWindow = useCallback(() => {
+    const { ipcRenderer } = global;
+    if (ipcRenderer) {
+      ipcRenderer.send("window-close", { id });
+    }
+  }, [id]);
+  useEffect(() => {
+    setTimeout(() => {
+      if (windowRoot.current) {
+        const { scrollHeight: height, scrollWidth: width } = windowRoot.current;
+        const { ipcRenderer } = global;
+        if (ipcRenderer) {
+          ipcRenderer.send("window-size", {
+            id,
+            height: Math.ceil(height + 1),
+            width: Math.ceil(width + 1)
+          });
+        }
+      }
+    }, 80);
+  });
+  useEffect(() => {
+    const { ipcRenderer } = global;
+    if (ipcRenderer) {
+      setTimeout(() => {
+        ipcRenderer.send("window-ready", { id });
+      }, 100);
+    }
+    return () => {
+      closeWindow();
+    };
+  }, [closeWindow, windowRef, id]);
+  useIsomorphicLayoutEffect(() => {
+    setTimeout(() => {
+      const { ipcRenderer } = global;
+      if (ipcRenderer) {
+        ipcRenderer.send("window-position", {
+          id,
+          parentWindowID: parentWindow.id,
+          left: style.left,
+          top: style.top
+        });
+      }
+    }, 90);
+  }, [style]);
+  return mountNode ? ReactDOM.createPortal(
+    /* @__PURE__ */ jsx(SaltProvider, {
+      children: /* @__PURE__ */ jsx(WindowParentContext.Provider, {
+        value: {
+          top: style.top + parentWindow.top,
+          left: style.left + parentWindow.left,
+          id
+        },
+        children: /* @__PURE__ */ jsx("div", {
+          className: "saltWindow",
+          ref: forkedRef,
+          children: /* @__PURE__ */ jsx("div", {
+            className,
+            style: { ...styleRest },
+            ...rest,
+            children
+          })
+        })
+      })
+    }),
+    mountNode
+  ) : null;
+});
+const ElectronWindow = isDesktop ? Window : Window$1;
+export { ElectronWindow };
+//# sourceMappingURL=ElectronWindow.js.map

package/dist-es/window/ElectronWindow.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"ElectronWindow.js","sources":["../src/window/ElectronWindow.tsx"],"sourcesContent":["import {\n SaltProvider,\n useForkRef,\n useIsomorphicLayoutEffect,\n} from \"@salt-ds/core\";\nimport { forwardRef, useCallback, useEffect, useRef, useState } from \"react\";\nimport ReactDOM from \"react-dom\";\nimport { isDesktop, Window as SaltWindow, WindowProps } from \"../window\";\n\nimport { useWindowParentContext, WindowParentContext } from \"./desktop-utils\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport electronWindowCss from \"./ElectronWindow.css\";\n\nconst Window = forwardRef<HTMLDivElement, WindowProps>(function ElectronWindow(\n { className, children, id = \"dialog\", open = true, style = {}, ...rest },\n forwardedRef\n): JSX.Element | null {\n const { top, left, position, ...styleRest } = style;\n\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-electron-window\",\n css: electronWindowCss,\n window: targetWindow,\n });\n\n const [mountNode, setMountNode] = useState<Element | null>(null);\n const [windowRef, setWindowRef] = useState<Window | null>(null);\n const windowRoot = useRef<HTMLDivElement>(null);\n\n const forkedRef = useForkRef(forwardedRef, windowRoot);\n\n if (!mountNode) {\n const win = window.open(\"\", id);\n (win as Window).document.write(\n // eslint-disable-next-line no-restricted-globals\n `<html lang=\"en\"><head><title>${id}</title><base href=\"${location.origin}\"><style>body {margin: 0;}</style></head><body></body></html>`\n );\n document.head.querySelectorAll(\"style\").forEach((htmlElement) => {\n (win as Window).document.head.appendChild(htmlElement.cloneNode(true));\n });\n const bodyElement = (win as Window).document.body;\n setMountNode(bodyElement);\n setWindowRef(win);\n }\n\n const parentWindow = useWindowParentContext();\n\n const closeWindow = useCallback(() => {\n // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment\n const { ipcRenderer } = global as any;\n if (ipcRenderer) {\n // eslint-disable-next-line @typescript-eslint/no-unsafe-call,@typescript-eslint/no-unsafe-member-access\n ipcRenderer.send(\"window-close\", { id: id });\n }\n }, [id]);\n\n // The timeout is required to give the Dialog component time to report the correct height\n // otherwise the window will be smaller than expected\n useEffect(() => {\n setTimeout(() => {\n if (windowRoot.current) {\n // @ts-ignore\n const { scrollHeight: height, scrollWidth: width } = windowRoot.current;\n // @ts-ignore\n // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment\n const { ipcRenderer } = global as any;\n if (ipcRenderer) {\n // eslint-disable-next-line @typescript-eslint/no-unsafe-call,@typescript-eslint/no-unsafe-member-access\n ipcRenderer.send(\"window-size\", {\n id: id,\n height: Math.ceil(height + 1),\n width: Math.ceil(width + 1),\n });\n }\n }\n }, 80);\n });\n\n // The timeout is required to allow the window time to be moved into position and scaled\n // before being shown to the user,\n useEffect(() => {\n // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment\n const { ipcRenderer } = global as any;\n if (ipcRenderer) {\n setTimeout(() => {\n // eslint-disable-next-line @typescript-eslint/no-unsafe-call,@typescript-eslint/no-unsafe-member-access\n ipcRenderer.send(\"window-ready\", { id: id });\n }, 100);\n }\n\n return () => {\n closeWindow();\n };\n }, [closeWindow, windowRef, id]);\n\n // The timeout is required to give the Dialog component time to report the correct height\n // otherwise the window will be smaller than expected\n useIsomorphicLayoutEffect(() => {\n setTimeout(() => {\n // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment\n const { ipcRenderer } = global as any;\n if (ipcRenderer) {\n // eslint-disable-next-line @typescript-eslint/no-unsafe-call,@typescript-eslint/no-unsafe-member-access\n ipcRenderer.send(\"window-position\", {\n id: id,\n parentWindowID: parentWindow.id,\n left: style.left,\n top: style.top,\n });\n }\n }, 90);\n }, [style]);\n\n return mountNode\n ? ReactDOM.createPortal(\n <SaltProvider>\n <WindowParentContext.Provider\n value={{\n top: (style.top as number) + parentWindow.top,\n left: (style.left as number) + parentWindow.left,\n id: id,\n }}\n >\n <div className=\"saltWindow\" ref={forkedRef}>\n <div className={className} style={{ ...styleRest }} {...rest}>\n {children}\n </div>\n </div>\n </WindowParentContext.Provider>\n </SaltProvider>,\n mountNode\n )\n : null;\n});\n\nexport const ElectronWindow = isDesktop ? Window : SaltWindow;\n"],"names":["ElectronWindow","electronWindowCss","SaltWindow"],"mappings":"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"}

package/dist-types/app-header/AppHeader.d.ts CHANGED Viewed

@@ -1,4 +1,3 @@
-import "./AppHeader.css";
 import { HTMLAttributes } from "react";
 export declare type AppHeaderProps = HTMLAttributes<HTMLDivElement>;
 export declare const AppHeader: import("react").ForwardRefExoticComponent<AppHeaderProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist-types/badge/Badge.d.ts CHANGED Viewed

@@ -1,25 +1,13 @@
-import { HTMLAttributes, ReactElement, ReactText } from "react";
-import "./Badge.css";
-/**
- * @example overriding density prop to fit a smaller denser space otherwise handled through context provider
- * <Badge density={'high'} />
- *
- * NOTE: Badge component no longer has AccessibleText prop
- *
- */
+import { HTMLAttributes, ReactNode } from "react";
 export interface BadgeProps extends HTMLAttributes<HTMLSpanElement> {
     /**
-     * The number to display on the badge.
+     * The number to display on the badge
      */
-    badgeContent?: string | number;
+    value: number | string;
     /**
-     * The badge will be added relative to this node. Renders the "message" icon by default.
+     * If a child is provided the Badge will render top right. By defualt renders inline.
      */
-    children?: ReactElement<HTMLAttributes<HTMLElement>> | ReactText;
-    /**
-     * The className(s) of the component.
-     */
-    className?: string;
+    children?: ReactNode;
     /**
      * The max number to display on the badge.
      */

package/dist-types/breadcrumbs/Breadcrumb.d.ts CHANGED Viewed

@@ -1,7 +1,6 @@
 import { TooltipProps } from "@salt-ds/core";
 import { IconProps } from "@salt-ds/icons";
 import { HTMLAttributes, ReactNode } from "react";
-import "./Breadcrumb.css";
 export interface BreadcrumbProps {
     children?: ReactNode;
     ContainerProps?: HTMLAttributes<HTMLLIElement>;

package/dist-types/breadcrumbs/Breadcrumbs.d.ts CHANGED Viewed

@@ -1,6 +1,5 @@
 import { IconProps } from "@salt-ds/icons";
 import React, { HTMLAttributes, ReactNode } from "react";
-import "./Breadcrumbs.css";
 export interface BreadcrumbsProps extends HTMLAttributes<HTMLElement> {
     Menu?: any;
     SeparatorProps?: IconProps;

package/dist-types/breadcrumbs/internal/BreadcrumbsContext.d.ts CHANGED Viewed

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 export interface BreadcrumbsContext {
     wrap?: boolean;
     itemsMaxWidth?: number | string;

package/dist-types/breadcrumbs/internal/BreadcrumbsSeparator.d.ts CHANGED Viewed

@@ -1,3 +1,2 @@
-/// <reference types="react" />
 import { IconProps } from "@salt-ds/icons";
 export declare const BreadcrumbsSeparator: (props: IconProps) => JSX.Element;

package/dist-types/breadcrumbs/internal/useFocusMenuRemount.d.ts CHANGED Viewed

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 export declare function useFocusMenuRemount<T extends HTMLElement>(key: string): {
     ref: import("react").RefObject<T>;
     shouldFocusOnMount: import("react").MutableRefObject<boolean>;

package/dist-types/button-bar/ButtonBar.d.ts CHANGED Viewed

@@ -1,6 +1,5 @@
 import { HTMLAttributes, ReactNode } from "react";
 import { ButtonVariant } from "@salt-ds/core";
-import "./ButtonBar.css";
 export declare type PartialRecord<K extends keyof any, T> = Partial<Record<K, T>>;
 declare type ButtonBarOrderKey = "order" | "alignLeftOrder" | "stackOrder";
 export declare type ButtonBarSortOrder = "asc" | "desc";

package/dist-types/button-bar/OrderedButton.d.ts CHANGED Viewed

@@ -1,6 +1,4 @@
-/// <reference types="react" />
 import { ButtonProps } from "@salt-ds/core";
-import "./OrderedButton.css";
 export interface OrderedButtonProps extends ButtonProps {
     /**
      * Aligns the button (and any buttons before/after) it on the left/right

package/dist-types/button-bar/internal/ButtonBarContext.d.ts CHANGED Viewed

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 export interface ButtonBarContextValue {
     matches: boolean;
     alignedIndex?: number;

package/dist-types/calendar/Calendar.d.ts CHANGED Viewed

@@ -1,8 +1,6 @@
-/// <reference types="react" />
 import { CalendarNavigationProps } from "./internal/CalendarNavigation";
 import { CalendarCarouselProps } from "./internal/CalendarCarousel";
 import { useCalendarProps } from "./useCalendar";
-import "./Calendar.css";
 export declare type CalendarProps = useCalendarProps & {
     className?: string;
     renderDayContents?: CalendarCarouselProps["renderDayContents"];

package/dist-types/calendar/internal/CalendarCarousel.d.ts CHANGED Viewed

@@ -1,5 +1,3 @@
-/// <reference types="react" />
 import { CalendarMonthProps } from "./CalendarMonth";
-import "./CalendarCarousel.css";
 export declare type CalendarCarouselProps = Omit<CalendarMonthProps, "date">;
 export declare const CalendarCarousel: import("react").ForwardRefExoticComponent<Omit<CalendarCarouselProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;

package/dist-types/calendar/internal/CalendarContext.d.ts CHANGED Viewed

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { useCalendar } from "../useCalendar";
 declare type CalendarState = {
     state: ReturnType<typeof useCalendar>["state"];

package/dist-types/calendar/internal/CalendarDay.d.ts CHANGED Viewed

@@ -2,7 +2,6 @@ import { TooltipProps } from "@salt-ds/core";
 import { ComponentPropsWithRef, ReactElement } from "react";
 import { DateValue } from "@internationalized/date";
 import { DayStatus } from "../useCalendarDay";
-import "./CalendarDay.css";
 export declare type DateFormatter = (day: Date) => string | undefined;
 export interface CalendarDayProps extends Omit<ComponentPropsWithRef<"button">, "children"> {
     day: DateValue;

package/dist-types/calendar/internal/CalendarMonth.d.ts CHANGED Viewed

@@ -1,7 +1,6 @@
 import { ComponentPropsWithRef } from "react";
 import { DateValue } from "@internationalized/date";
 import { CalendarDayProps } from "./CalendarDay";
-import "./CalendarMonth.css";
 export interface CalendarMonthProps extends ComponentPropsWithRef<"div"> {
     date: DateValue;
     hideOutOfRangeDates?: boolean;

package/dist-types/calendar/internal/CalendarNavigation.d.ts CHANGED Viewed

@@ -1,7 +1,6 @@
 import { ButtonProps } from "@salt-ds/core";
 import { ComponentPropsWithRef } from "react";
 import { DropdownProps } from "../../dropdown";
-import "./CalendarNavigation.css";
 import { DateValue } from "@internationalized/date";
 declare type DropdownItem = {
     value: DateValue;

package/dist-types/calendar/internal/CalendarWeekHeader.d.ts CHANGED Viewed

@@ -1,5 +1,4 @@
 import { ComponentPropsWithRef } from "react";
-import "./CalendarWeekHeader.css";
 export declare type CalendarWeekHeaderProps = ComponentPropsWithRef<"div">;
 export declare const CalendarWeekHeader: import("react").ForwardRefExoticComponent<Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
     ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;

package/dist-types/carousel/Carousel.d.ts CHANGED Viewed

@@ -1,5 +1,4 @@
 import { HTMLAttributes, ReactElement } from "react";
-import "./Carousel.css";
 import { CarouselSlideProps } from "./CarouselSlide";
 export interface CarouselProps extends HTMLAttributes<HTMLDivElement> {
     /**

package/dist-types/cascading-menu/CascadingMenu.d.ts CHANGED Viewed

@@ -1,3 +1,2 @@
-/// <reference types="react" />
 import { CascadingMenuProps } from "./CascadingMenuProps";
 export declare const CascadingMenu: import("react").ForwardRefExoticComponent<CascadingMenuProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist-types/cascading-menu/CascadingMenuItem.d.ts CHANGED Viewed

@@ -1,7 +1,6 @@
 import { KeyboardEvent, MouseEvent } from "react";
 import { ListItemProps } from "../list-deprecated";
 import { MenuDescriptor } from "./CascadingMenuProps";
-import "./CascadingMenuItem.css";
 export interface MenuItemProps extends ListItemProps<MenuDescriptor> {
     blurSelected: boolean;
     className?: string;

package/dist-types/cascading-menu/CascadingMenuList.d.ts CHANGED Viewed

@@ -1,11 +1,9 @@
-/// <reference types="react" />
 import { UseFloatingUIProps } from "@salt-ds/core";
 import { ListProps } from "../list-deprecated";
 import { MenuItemProps } from "./CascadingMenuItem";
 import { screenBounds } from "./internal/menuPositioning";
 import { menuState } from "./internal/stateUtils";
 import { refsManager } from "./internal/useRefsManager";
-import "./CascadingMenuList.css";
 export interface CascadingMenuListProps {
     className?: string;
     data: menuState;

package/dist-types/cascading-menu/internal/useMountedRef.d.ts CHANGED Viewed

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 /**
  * Used to know if the component is mounted or not
  */

package/dist-types/color-chooser/AlphaInputField.d.ts CHANGED Viewed

@@ -1,5 +1,3 @@
-/// <reference types="react" />
-import "./RGBAInput.css";
 interface AlphaInputProps {
     alphaValue: number;
     showAsOpacity?: boolean;

package/dist-types/color-chooser/Color.d.ts CHANGED Viewed

@@ -8,6 +8,8 @@ export declare class Color {
     private color;
     get hex(): string;
     get rgba(): RGBAValue;
+    /** E.g. Orange800 */
+    get colorName(): string | undefined;
     static makeColorFromHex(hexValue: string | undefined): Color | undefined;
     static makeColorFromRGB(r: number, g: number, b: number, a?: number): Color;
     setAlpha(alpha: number): Color;

package/dist-types/color-chooser/ColorChooser.d.ts CHANGED Viewed

@@ -1,7 +1,6 @@
 import { ChangeEvent } from "react";
 import { ButtonProps } from "@salt-ds/core";
 import { Color } from "./Color";
-import "./ColorChooser.css";
 export interface ColorChooserProps {
     color: Color | undefined;
     defaultAlpha?: number;

package/dist-types/color-chooser/ColorHelpers.d.ts CHANGED Viewed

@@ -1,4 +1,6 @@
-export declare function getColorNameByHexValue(hexValue: string | undefined, disableAlpha?: boolean, saltColorOverrides?: Record<string, string>): string | undefined;
+export declare function getColorNameByHexValue(hexValue: string | undefined, disableAlpha?: boolean, saltColorOverrides?: Record<string, string>,
+/** When disabled, color names not recognized will be undefined instead of hex values */
+disableFallBackToHex?: boolean): string | undefined;
 export declare function hexValueWithoutAlpha(hexValue: string | undefined): string | undefined;
 export declare function getHexValue(hexValue: string | undefined, disableAlpha: boolean): string | undefined;
 export declare const isValidHex: (hex: string | undefined) => boolean;

package/dist-types/color-chooser/ColorPicker.d.ts CHANGED Viewed

@@ -1,6 +1,5 @@
 import { ChangeEvent } from "react";
 import { Color } from "./Color";
-import "./ColorPicker.css";
 export interface ColorPickerProps {
     disableAlphaChooser: boolean;
     color?: Color;

package/dist-types/color-chooser/DictTabs.d.ts CHANGED Viewed

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { TabstripProps } from "../tabs";
 import { ColorPicker, ColorPickerProps } from "./ColorPicker";
 import { Swatches, SwatchesTabProps } from "./Swatches";

package/dist-types/color-chooser/HexInput.d.ts CHANGED Viewed

@@ -1,5 +1,3 @@
-/// <reference types="react" />
-import "./HexInput.css";
 interface HexInputProps {
     hexValue: string | undefined;
     disableAlphaChooser: boolean;

package/dist-types/color-chooser/HexInputField.d.ts CHANGED Viewed

@@ -1,5 +1,3 @@
-/// <reference types="react" />
-import "./ColorPicker.css";
 interface HexInputProps {
     hexValue: string | undefined;
     disableAlphaChooser: boolean;

package/dist-types/color-chooser/RGBAInput.d.ts CHANGED Viewed

@@ -1,6 +1,5 @@
 import { ChangeEvent } from "react";
 import { RGBAValue } from "./Color";
-import "./RGBAInput.css";
 interface RGBAInputProps {
     disableAlphaChooser: boolean;
     rgbaText: string;

package/dist-types/color-chooser/RGBAInputField.d.ts CHANGED Viewed

@@ -1,6 +1,4 @@
-/// <reference types="react" />
 import { RGBAValue } from "./Color";
-import "./RGBAInput.css";
 interface RGBInputProps {
     rgbaValue: RGBAValue;
     value: "r" | "g" | "b";

package/dist-types/color-chooser/Swatches.d.ts CHANGED Viewed

@@ -1,6 +1,4 @@
-/// <reference types="react" />
 import { Color } from "./Color";
-import "./Swatches.css";
 export interface SwatchesTabProps {
     allColors: string[][];
     color: Color | undefined;

package/dist-types/color-chooser/SwatchesPicker.d.ts CHANGED Viewed

@@ -1,6 +1,4 @@
-/// <reference types="react" />
 import { Color } from "./Color";
-import "./Swatch.css";
 interface SwatchesPickerProps {
     allColors: string[][];
     color: Color | undefined;

package/dist-types/combo-box/ComboBox.d.ts CHANGED Viewed

@@ -1,7 +1,7 @@
 import { ForwardedRef, ReactElement } from "react";
 import { DropdownBaseProps } from "../dropdown";
 import { ListProps } from "../list";
-import { InputProps } from "../input";
+import { InputLegacyProps as InputProps } from "../input-legacy";
 import { SelectionProps, SelectionStrategy } from "../common-hooks";
 export interface ComboBoxProps<Item = string, Selection extends SelectionStrategy = "default"> extends Omit<DropdownBaseProps, "triggerComponent" | "onBlur" | "onChange" | "onFocus">, Pick<InputProps, "onBlur" | "onChange" | "onFocus" | "onSelect">, Pick<ListProps<Item, Selection>, "ListItem" | "itemToString" | "source" | "width">, Pick<SelectionProps<Item, Selection>, "onSelectionChange" | "selectionStrategy"> {
     InputProps?: InputProps;

package/dist-types/combo-box/useCombobox.d.ts CHANGED Viewed

@@ -1,7 +1,7 @@
 import { ListHookProps, ListHookResult } from "../list";
 import { DropdownHookResult, DropdownHookProps } from "../dropdown";
 import { SelectionStrategy } from "../common-hooks";
-import { InputProps } from "../input";
+import { InputLegacyProps as InputProps } from "../input-legacy";
 export interface ComboboxHookProps<Item, Strategy extends SelectionStrategy> extends Partial<Omit<DropdownHookProps, "id" | "onKeyDown">>, Pick<InputProps, "onBlur" | "onChange" | "onFocus" | "onSelect">, Omit<ListHookProps<Item, Strategy>, "containerRef" | "defaultSelected" | "selected" | "onSelect"> {
     InputProps?: InputProps;
     allowFreeText?: boolean;

package/dist-types/combo-box-deprecated/ComboBoxDeprecated.d.ts CHANGED Viewed

@@ -1,7 +1,6 @@
 import { Ref } from "react";
 import { DefaultComboBoxProps } from "./internal/DefaultComboBox";
 import { MultiSelectComboBoxProps } from "./internal/MultiSelectComboBox";
-import "./ComboBox.css";
 export declare type ComboBoxDeprecatedProps = Omit<DefaultComboBoxProps<any> | MultiSelectComboBoxProps<any>, "rootRef"> & {
     rootRef?: Ref<HTMLElement>;
     delimiter?: string | string[];

package/dist-types/combo-box-deprecated/internal/DefaultComboBox.d.ts CHANGED Viewed

@@ -2,7 +2,7 @@ import { ComponentType, HTMLAttributes, ReactNode, Ref, RefObject } from "react"
 import { IndexedListItemProps, ListProps, ListSelectionVariant } from "../../list-deprecated";
 import { GetFilterRegex } from "../filterHelpers";
 import { WindowProps } from "../../window";
-import { InputProps } from "../../input";
+import { InputLegacyProps as InputProps } from "../../input-legacy";
 export declare type BaseComboBoxProps<Item, Variant extends ListSelectionVariant = "default"> = Omit<HTMLAttributes<HTMLDivElement>, "children" | "onChange" | "onSelect" | "onFocus" | "onBlur" | "onClick"> & Pick<ListProps<Item, Variant>, "displayedItemCount" | "itemToString" | "listRef" | "onChange" | "onSelect" | "overscanCount" | "virtualized" | "width"> & {
     ListItem?: ComponentType<IndexedListItemProps<Item>>;
     ListProps?: Partial<ListProps<Item, Variant>>;

package/dist-types/combo-box-deprecated/internal/MultiSelectComboBox.d.ts CHANGED Viewed

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { TokenizedInputProps } from "../../tokenized-input";
 import { BaseComboBoxProps } from "./DefaultComboBox";
 export declare type MultiSelectComboBoxProps<Item> = BaseComboBoxProps<Item, "multiple"> & Pick<TokenizedInputProps<Item>, "onFocus" | "onBlur" | "onInputFocus" | "onInputBlur" | "onInputChange" | "onInputSelect" | "stringToItem"> & {

package/dist-types/combo-box-deprecated/internal/useComboBox.d.ts CHANGED Viewed

@@ -1,6 +1,6 @@
 import { MouseEvent } from "react";
 import { DefaultComboBoxProps } from "./DefaultComboBox";
-import { InputProps } from "../../input";
+import { InputLegacyProps as InputProps } from "../../input-legacy";
 export declare type UseComboBoxProps<Item> = Omit<DefaultComboBoxProps<Item>, "ListItem" | "Tooltip" | "tooltipEnterDelay" | "tooltipLeaveDelay" | "tooltipPlacement" | "rootRef" | "listRef" | "inputRef" | "rootWidth" | "listWidth">;
 export declare const useComboBox: <Item>(props: UseComboBoxProps<Item>) => {
     inputRef: import("react").Ref<any>;
@@ -59,7 +59,7 @@ export declare const useComboBox: <Item>(props: UseComboBoxProps<Item>) => {
         role: (import("react").AriaRole | undefined) & string;
         tabIndex?: number | undefined;
         'aria-atomic'?: (boolean | "true" | "false") | undefined;
-        'aria-autocomplete'?: "list" | "none" | "inline" | "both" | undefined;
+        'aria-autocomplete'?: "list" | "none" | "both" | "inline" | undefined;
         'aria-busy'?: (boolean | "true" | "false") | undefined;
         'aria-checked'?: boolean | "true" | "false" | "mixed" | undefined;
         'aria-colcount'?: number | undefined;
@@ -70,7 +70,7 @@ export declare const useComboBox: <Item>(props: UseComboBoxProps<Item>) => {
         'aria-describedby'?: string | undefined;
         'aria-details'?: string | undefined;
         'aria-disabled'?: (boolean | "true" | "false") | undefined;
-        'aria-dropeffect'?: "link" | "none" | "copy" | "execute" | "move" | "popup" | undefined;
+        'aria-dropeffect'?: "link" | "none" | "copy" | "move" | "execute" | "popup" | undefined;
         'aria-errormessage'?: string | undefined;
         'aria-expanded'?: (boolean | "true" | "false") | undefined;
         'aria-flowto'?: string | undefined;

package/dist-types/combo-box-deprecated/internal/useMultiSelectComboBox.d.ts CHANGED Viewed

@@ -100,7 +100,7 @@ export declare const useMultiSelectComboBox: <Item>(props: Omit<UseMultiSelectCo
                 is?: string | undefined;
                 'aria-activedescendant'?: string | undefined;
                 'aria-atomic'?: (boolean | "true" | "false") | undefined;
-                'aria-autocomplete'?: "list" | "none" | "inline" | "both" | undefined;
+                'aria-autocomplete'?: "list" | "none" | "both" | "inline" | undefined;
                 'aria-busy'?: (boolean | "true" | "false") | undefined;
                 'aria-checked'?: boolean | "true" | "false" | "mixed" | undefined;
                 'aria-colcount'?: number | undefined;
@@ -111,7 +111,7 @@ export declare const useMultiSelectComboBox: <Item>(props: Omit<UseMultiSelectCo
                 'aria-describedby'?: string | undefined;
                 'aria-details'?: string | undefined;
                 'aria-disabled'?: (boolean | "true" | "false") | undefined;
-                'aria-dropeffect'?: "link" | "none" | "copy" | "execute" | "move" | "popup" | undefined;
+                'aria-dropeffect'?: "link" | "none" | "copy" | "move" | "execute" | "popup" | undefined;
                 'aria-errormessage'?: string | undefined;
                 'aria-expanded'?: (boolean | "true" | "false") | undefined;
                 'aria-flowto'?: string | undefined;
@@ -324,7 +324,7 @@ export declare const useMultiSelectComboBox: <Item>(props: Omit<UseMultiSelectCo
         tabIndex?: number | undefined;
         'aria-activedescendant'?: string | undefined;
         'aria-atomic'?: (boolean | "true" | "false") | undefined;
-        'aria-autocomplete'?: "list" | "none" | "inline" | "both" | undefined;
+        'aria-autocomplete'?: "list" | "none" | "both" | "inline" | undefined;
         'aria-busy'?: (boolean | "true" | "false") | undefined;
         'aria-checked'?: boolean | "true" | "false" | "mixed" | undefined;
         'aria-colcount'?: number | undefined;
@@ -335,7 +335,7 @@ export declare const useMultiSelectComboBox: <Item>(props: Omit<UseMultiSelectCo
         'aria-describedby'?: string | undefined;
         'aria-details'?: string | undefined;
         'aria-disabled'?: (boolean | "true" | "false") | undefined;
-        'aria-dropeffect'?: "link" | "none" | "copy" | "execute" | "move" | "popup" | undefined;
+        'aria-dropeffect'?: "link" | "none" | "copy" | "move" | "execute" | "popup" | undefined;
         'aria-errormessage'?: string | undefined;
         'aria-expanded'?: (boolean | "true" | "false") | undefined;
         'aria-flowto'?: string | undefined;
@@ -571,12 +571,12 @@ export declare const useMultiSelectComboBox: <Item>(props: Omit<UseMultiSelectCo
         inputMode?: "text" | "none" | "search" | "tel" | "url" | "email" | "numeric" | "decimal" | undefined;
         is?: string | undefined;
         disabled?: boolean | undefined;
-        focused?: boolean | undefined;
         expanded?: boolean | undefined;
+        focused?: boolean | undefined;
+        inputRef?: import("react").Ref<HTMLInputElement> | undefined;
         itemToString?: import("../../tokenized-input").ItemToString<Item> | undefined;
         highlightedIndex?: number | undefined;
         onClear?: import("react").ReactEventHandler<Element> | undefined;
-        inputRef?: import("react").Ref<HTMLInputElement> | undefined;
         onInputFocus?: import("react").FocusEventHandler<HTMLInputElement> | undefined;
         onInputBlur?: import("react").FocusEventHandler<HTMLInputElement> | undefined;
         onInputChange?: import("react").ChangeEventHandler<HTMLInputElement> | undefined;
@@ -633,7 +633,7 @@ export declare const useMultiSelectComboBox: <Item>(props: Omit<UseMultiSelectCo
         role: (import("react").AriaRole | undefined) & string;
         tabIndex?: number | undefined;
         'aria-atomic'?: (boolean | "true" | "false") | undefined;
-        'aria-autocomplete'?: "list" | "none" | "inline" | "both" | undefined;
+        'aria-autocomplete'?: "list" | "none" | "both" | "inline" | undefined;
         'aria-busy'?: (boolean | "true" | "false") | undefined;
         'aria-checked'?: boolean | "true" | "false" | "mixed" | undefined;
         'aria-colcount'?: number | undefined;
@@ -644,7 +644,7 @@ export declare const useMultiSelectComboBox: <Item>(props: Omit<UseMultiSelectCo
         'aria-describedby'?: string | undefined;
         'aria-details'?: string | undefined;
         'aria-disabled'?: (boolean | "true" | "false") | undefined;
-        'aria-dropeffect'?: "link" | "none" | "copy" | "execute" | "move" | "popup" | undefined;
+        'aria-dropeffect'?: "link" | "none" | "copy" | "move" | "execute" | "popup" | undefined;
         'aria-errormessage'?: string | undefined;
         'aria-expanded'?: (boolean | "true" | "false") | undefined;
         'aria-flowto'?: string | undefined;