@salt-ds/core 1.4.0 → 1.5.0

package/dist-types/checkbox/internal/useCheckboxGroup.d.ts

@@ -0,0 +1,2 @@
+import { CheckboxGroupState } from "./CheckboxGroupContext";
+export declare function useCheckboxGroup(): CheckboxGroupState;

package/dist-types/index.d.ts

@@ -5,6 +5,7 @@ export * from "./border-layout";
 export * from "./breakpoints";
 export * from "./button";
 export * from "./card";
+export * from "./checkbox";
 export * from "./flex-item";
 export * from "./flex-layout";
 export * from "./flow-layout";
@@ -12,6 +13,7 @@ export * from "./grid-item";
 export * from "./grid-layout";
 export * from "./link";
 export * from "./panel";
+export * from "./radio-button";
 export * from "./spinner";
 export * from "./stack-layout";
 export * from "./status-indicator";

package/dist-types/link/Link.d.ts

@@ -9,6 +9,6 @@ import "./Link.css";
  * <LinkExample to="#link">Action</LinkExample>
  */
 export interface LinkProps extends Omit<TextProps<"a">, "as" | "disabled"> {
-    IconComponent?: ComponentType<IconProps>;
+    IconComponent?: ComponentType<IconProps> | null;
 }
 export declare const Link: import("react").ForwardRefExoticComponent<Omit<LinkProps, "ref"> & import("react").RefAttributes<HTMLAnchorElement>>;

package/dist-types/radio-button/RadioButton.d.ts

@@ -0,0 +1,45 @@
+import { ChangeEventHandler, FocusEventHandler, HTMLAttributes, InputHTMLAttributes, ReactNode } from "react";
+import "./RadioButton.css";
+export interface RadioButtonProps extends Omit<HTMLAttributes<HTMLLabelElement>, "onChange" | "onBlur" | "onFocus"> {
+    /**
+     * Set the default selected radio button in the group
+     */
+    checked?: boolean;
+    /**
+     * Set the disabled state
+     */
+    disabled?: boolean;
+    /**
+     * Set the error state
+     */
+    error?: boolean;
+    /**
+     * Props to be passed to the radio input
+     */
+    inputProps?: Partial<InputHTMLAttributes<HTMLInputElement>>;
+    /**
+     * The label to be shown next to the radio icon
+     */
+    label?: ReactNode;
+    /**
+     * Name of the radio group
+     */
+    name?: string;
+    /**
+     * Callback for blur event
+     */
+    onBlur?: FocusEventHandler<HTMLInputElement>;
+    /**
+     * Callback for change event
+     */
+    onChange?: ChangeEventHandler<HTMLInputElement>;
+    /**
+     * Callback for focus event
+     */
+    onFocus?: FocusEventHandler<HTMLInputElement>;
+    /**
+     * Value of radio button
+     */
+    value?: string;
+}
+export declare const RadioButton: import("react").ForwardRefExoticComponent<RadioButtonProps & import("react").RefAttributes<HTMLLabelElement>>;

package/dist-types/radio-button/RadioButtonGroup.d.ts

@@ -0,0 +1,29 @@
+import { ChangeEventHandler, ComponentPropsWithoutRef } from "react";
+import "./RadioButtonGroup.css";
+export interface RadioButtonGroupProps extends Omit<ComponentPropsWithoutRef<"fieldset">, "onChange"> {
+    /**
+     * Set the selected value when initialized.
+     */
+    defaultValue?: string;
+    /**
+     * Set the group direction.
+     */
+    direction?: "horizontal" | "vertical";
+    /**
+     * Only for horizontal direction. When `true` the text in radio button label will wrap to fit within the container. Otherwise the radio buttons will wrap onto the next line.
+     */
+    wrap?: boolean;
+    /**
+     * The name to be set on each radio button within the group. If not set, then one will be generated for you.
+     */
+    name?: string;
+    /**
+     * Callback for change event.
+     */
+    onChange?: ChangeEventHandler<HTMLInputElement>;
+    /**
+     * The value of the radio group, required for a controlled component.
+     */
+    value?: string;
+}
+export declare const RadioButtonGroup: import("react").ForwardRefExoticComponent<RadioButtonGroupProps & import("react").RefAttributes<HTMLFieldSetElement>>;

package/dist-types/radio-button/RadioButtonIcon.d.ts

@@ -0,0 +1,11 @@
+/// <reference types="react" />
+import "./RadioButtonIcon.css";
+export interface RadioButtonIconProps {
+    checked?: boolean;
+    error?: boolean;
+    disabled?: boolean;
+}
+/**
+ * Default radio icon
+ */
+export declare const RadioButtonIcon: ({ checked, error, disabled, }: RadioButtonIconProps) => JSX.Element;

package/dist-types/radio-button/index.d.ts

@@ -0,0 +1,3 @@
+export * from "./RadioButton";
+export * from "./RadioButtonGroup";
+export * from "./RadioButtonIcon";

package/dist-types/radio-button/internal/RadioGroupContext.d.ts

@@ -0,0 +1,7 @@
+import { ChangeEventHandler } from "react";
+export interface RadioGroupContextValue {
+    name?: string;
+    value?: string;
+    onChange?: ChangeEventHandler<HTMLElement>;
+}
+export declare const RadioGroupContext: import("react").Context<RadioGroupContextValue>;

package/dist-types/radio-button/internal/useRadioGroup.d.ts

@@ -0,0 +1 @@
+export declare function useRadioGroup(): import("./RadioGroupContext").RadioGroupContextValue;

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

@@ -4,43 +4,43 @@ import { UseFloatingUIProps } from "../utils";
 import "./Tooltip.css";
 export interface TooltipProps extends HTMLAttributes<HTMLDivElement>, Pick<UseFloatingUIProps, "open" | "onOpenChange" | "placement"> {
     /**
-     * The children will be the tooltip's trigger.
+     * The children will be the Tooltip's trigger.
      */
     children: ReactNode;
     /**
-     * Whether to hide the tooltip arrow. Defaults to `false`.
+     * Whether to hide the Tooltip arrow. Defaults to `false`.
      */
     hideArrow?: boolean;
     /**
-     * Whether to hide the state icon within the tooltip. Defaults to `false`.
+     * Whether to hide the status icon within the Tooltip. Defaults to `false`.
      */
     hideIcon?: boolean;
     /**
-     * Content displayed inside the tooltip. Can be a string or a React component.
+     * Content displayed inside the Tooltip. Can be a string or a React component.
      */
     content: ReactNode;
     /**
-     * A string to determine the current status of the tooltip. Defaults to 'info'.
+     * A string to determine the status of the Tooltip. Defaults to `info`.
      */
     status?: ValidationStatus;
     /**
-     * Delay in milliseconds before the tooltip is shown
+     * Delay in milliseconds before the Tooltip is shown.
      */
     enterDelay?: number;
     /**
-     * Delay in milliseconds before the tooltip is hidden
+     * Delay in milliseconds before the Tooltip is hidden.
      */
     leaveDelay?: number;
     /**
-     * Option to not display the tooltip. Can be used in conditional situations like text truncation.
+     * Option to not display the Tooltip. Can be used in conditional situations like text truncation.
      */
     disabled?: boolean;
     /**
-     * Option to remove the hover listener
+     * Option to remove the hover listener.
      */
     disableHoverListener?: boolean;
     /**
-     * Option to remove the focus listener
+     * Option to remove the focus listener.
      */
     disableFocusListener?: boolean;
 }

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

@@ -22,7 +22,25 @@ export interface UseTooltipProps extends Partial<Pick<UseFloatingUIProps, "onOpe
 }
 export declare function useTooltip(props?: UseTooltipProps): {
     arrowProps: {
-        ref: import("react").MutableRefObject<HTMLDivElement | null>;
+        ref: import("react").MutableRefObject<SVGSVGElement | null>;
+        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;
+            refs: import("@floating-ui/react").ExtendedRefs<import("@floating-ui/react").ReferenceType>;
+            elements: import("@floating-ui/react").ExtendedElements<import("@floating-ui/react").ReferenceType>;
+        };
         style: {
             left: string;
             top: string;

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

@@ -0,0 +1 @@
+export declare function capitalize(value: string): string;

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

@@ -1,3 +1,4 @@
+export * from "./capitalize";
 export * from "./createChainedFunction";
 export * from "./createContext";
 export * from "./debounce";

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

@@ -2,17 +2,17 @@ import type { Middleware, Placement, Strategy } from "@floating-ui/react";
 import { useFloating } from "@floating-ui/react";
 export declare type UseFloatingUIProps = {
     /**
-     * Set position relative to trigger
+     * Sets position relative to trigger.
      */
     placement?: Placement;
     strategy?: Strategy;
     middleware?: Middleware[];
     /**
-     * Set visible state. Defaults to false
+     * Sets visible state.
      */
     open?: boolean;
     /**
-     * Callback function triggered when open state changes
+     * Callback function triggered when open state changes.
      */
     onOpenChange?: (open: boolean) => void;
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@salt-ds/core",
-  "version": "1.4.0",
+  "version": "1.5.0",
   "license": "Apache-2.0",
   "main": "dist-cjs/packages/core/src/index.js",
   "sideEffects": [
@@ -25,7 +25,7 @@
   "dependencies": {
     "@floating-ui/react": "^0.20.0",
     "clsx": "^1.2.1",
-    "@salt-ds/icons": "1.1.0"
+    "@salt-ds/icons": "1.2.0"
   },
   "files": [
     "dist-cjs",

package/dist-cjs/packages/core/src/avatar/internal/useLoaded.js

@@ -1,30 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var React = require('react');
-
-function useLoaded({ src }) {
-  const [loaded, setLoaded] = React.useState(false);
-  React.useEffect(() => {
-    if (!src) {
-      return void 0;
-    }
-    setLoaded(false);
-    let active = true;
-    const image = new Image();
-    const onLoad = () => active && setLoaded("loaded");
-    const onError = () => active && setLoaded("error");
-    image.addEventListener("load", onLoad, { once: true });
-    image.addEventListener("error", onError, { once: true });
-    return () => {
-      image.removeEventListener("load", onLoad);
-      image.removeEventListener("load", onError);
-      active = false;
-    };
-  }, [src]);
-  return loaded;
-}
-
-exports.useLoaded = useLoaded;
-//# sourceMappingURL=useLoaded.js.map

package/dist-cjs/packages/core/src/avatar/internal/useLoaded.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"useLoaded.js","sources":["../src/avatar/internal/useLoaded.ts"],"sourcesContent":["import { ImgHTMLAttributes, useEffect, useState } from \"react\";\n\nexport function useLoaded({ src }: ImgHTMLAttributes<HTMLImageElement>) {\n  const [loaded, setLoaded] = useState<false | \"loaded\" | \"error\">(false);\n\n  useEffect(() => {\n    if (!src) {\n      return undefined;\n    }\n\n    setLoaded(false);\n\n    let active = true;\n    const image = new Image();\n    const onLoad = () => active && setLoaded(\"loaded\");\n    const onError = () => active && setLoaded(\"error\");\n\n    image.addEventListener(\"load\", onLoad, { once: true });\n    image.addEventListener(\"error\", onError, { once: true });\n\n    return () => {\n      image.removeEventListener(\"load\", onLoad);\n      image.removeEventListener(\"load\", onError);\n      active = false;\n    };\n  }, [src]);\n\n  return loaded;\n}\n"],"names":["useState","useEffect"],"mappings":";;;;;;AAEgB,SAAA,SAAA,CAAU,EAAE,GAAA,EAA4C,EAAA;AACtE,EAAA,MAAM,CAAC,MAAA,EAAQ,SAAS,CAAA,GAAIA,eAAqC,KAAK,CAAA,CAAA;AAEtE,EAAAC,eAAA,CAAU,MAAM;AACd,IAAA,IAAI,CAAC,GAAK,EAAA;AACR,MAAO,OAAA,KAAA,CAAA,CAAA;AAAA,KACT;AAEA,IAAA,SAAA,CAAU,KAAK,CAAA,CAAA;AAEf,IAAA,IAAI,MAAS,GAAA,IAAA,CAAA;AACb,IAAM,MAAA,KAAA,GAAQ,IAAI,KAAM,EAAA,CAAA;AACxB,IAAA,MAAM,MAAS,GAAA,MAAM,MAAU,IAAA,SAAA,CAAU,QAAQ,CAAA,CAAA;AACjD,IAAA,MAAM,OAAU,GAAA,MAAM,MAAU,IAAA,SAAA,CAAU,OAAO,CAAA,CAAA;AAEjD,IAAA,KAAA,CAAM,iBAAiB,MAAQ,EAAA,MAAA,EAAQ,EAAE,IAAA,EAAM,MAAM,CAAA,CAAA;AACrD,IAAA,KAAA,CAAM,iBAAiB,OAAS,EAAA,OAAA,EAAS,EAAE,IAAA,EAAM,MAAM,CAAA,CAAA;AAEvD,IAAA,OAAO,MAAM;AACX,MAAM,KAAA,CAAA,mBAAA,CAAoB,QAAQ,MAAM,CAAA,CAAA;AACxC,MAAM,KAAA,CAAA,mBAAA,CAAoB,QAAQ,OAAO,CAAA,CAAA;AACzC,MAAS,MAAA,GAAA,KAAA,CAAA;AAAA,KACX,CAAA;AAAA,GACF,EAAG,CAAC,GAAG,CAAC,CAAA,CAAA;AAER,EAAO,OAAA,MAAA,CAAA;AACT;;;;"}

package/dist-es/packages/core/src/avatar/internal/useLoaded.js

@@ -1,26 +0,0 @@
-import { useState, useEffect } from 'react';
-
-function useLoaded({ src }) {
-  const [loaded, setLoaded] = useState(false);
-  useEffect(() => {
-    if (!src) {
-      return void 0;
-    }
-    setLoaded(false);
-    let active = true;
-    const image = new Image();
-    const onLoad = () => active && setLoaded("loaded");
-    const onError = () => active && setLoaded("error");
-    image.addEventListener("load", onLoad, { once: true });
-    image.addEventListener("error", onError, { once: true });
-    return () => {
-      image.removeEventListener("load", onLoad);
-      image.removeEventListener("load", onError);
-      active = false;
-    };
-  }, [src]);
-  return loaded;
-}
-
-export { useLoaded };
-//# sourceMappingURL=useLoaded.js.map

package/dist-es/packages/core/src/avatar/internal/useLoaded.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"useLoaded.js","sources":["../src/avatar/internal/useLoaded.ts"],"sourcesContent":["import { ImgHTMLAttributes, useEffect, useState } from \"react\";\n\nexport function useLoaded({ src }: ImgHTMLAttributes<HTMLImageElement>) {\n  const [loaded, setLoaded] = useState<false | \"loaded\" | \"error\">(false);\n\n  useEffect(() => {\n    if (!src) {\n      return undefined;\n    }\n\n    setLoaded(false);\n\n    let active = true;\n    const image = new Image();\n    const onLoad = () => active && setLoaded(\"loaded\");\n    const onError = () => active && setLoaded(\"error\");\n\n    image.addEventListener(\"load\", onLoad, { once: true });\n    image.addEventListener(\"error\", onError, { once: true });\n\n    return () => {\n      image.removeEventListener(\"load\", onLoad);\n      image.removeEventListener(\"load\", onError);\n      active = false;\n    };\n  }, [src]);\n\n  return loaded;\n}\n"],"names":[],"mappings":";;AAEgB,SAAA,SAAA,CAAU,EAAE,GAAA,EAA4C,EAAA;AACtE,EAAA,MAAM,CAAC,MAAA,EAAQ,SAAS,CAAA,GAAI,SAAqC,KAAK,CAAA,CAAA;AAEtE,EAAA,SAAA,CAAU,MAAM;AACd,IAAA,IAAI,CAAC,GAAK,EAAA;AACR,MAAO,OAAA,KAAA,CAAA,CAAA;AAAA,KACT;AAEA,IAAA,SAAA,CAAU,KAAK,CAAA,CAAA;AAEf,IAAA,IAAI,MAAS,GAAA,IAAA,CAAA;AACb,IAAM,MAAA,KAAA,GAAQ,IAAI,KAAM,EAAA,CAAA;AACxB,IAAA,MAAM,MAAS,GAAA,MAAM,MAAU,IAAA,SAAA,CAAU,QAAQ,CAAA,CAAA;AACjD,IAAA,MAAM,OAAU,GAAA,MAAM,MAAU,IAAA,SAAA,CAAU,OAAO,CAAA,CAAA;AAEjD,IAAA,KAAA,CAAM,iBAAiB,MAAQ,EAAA,MAAA,EAAQ,EAAE,IAAA,EAAM,MAAM,CAAA,CAAA;AACrD,IAAA,KAAA,CAAM,iBAAiB,OAAS,EAAA,OAAA,EAAS,EAAE,IAAA,EAAM,MAAM,CAAA,CAAA;AAEvD,IAAA,OAAO,MAAM;AACX,MAAM,KAAA,CAAA,mBAAA,CAAoB,QAAQ,MAAM,CAAA,CAAA;AACxC,MAAM,KAAA,CAAA,mBAAA,CAAoB,QAAQ,OAAO,CAAA,CAAA;AACzC,MAAS,MAAA,GAAA,KAAA,CAAA;AAAA,KACX,CAAA;AAAA,GACF,EAAG,CAAC,GAAG,CAAC,CAAA,CAAA;AAER,EAAO,OAAA,MAAA,CAAA;AACT;;;;"}

package/dist-types/avatar/internal/useLoaded.d.ts

@@ -1,2 +0,0 @@
-import { ImgHTMLAttributes } from "react";
-export declare function useLoaded({ src }: ImgHTMLAttributes<HTMLImageElement>): false | "error" | "loaded";