@salt-ds/lab 1.0.0-alpha.11 → 1.0.0-alpha.13

package/dist-es/toggle-button-group/ToggleButtonGroup.js

@@ -1,107 +0,0 @@
-import { jsx } from 'react/jsx-runtime';
-import { forwardRef, useRef, useState, useCallback, useMemo } from 'react';
-import { makePrefixer, useForkRef, useControlled } from '@salt-ds/core';
-import { clsx } from 'clsx';
-import { useWindow } from '@salt-ds/window';
-import { useComponentCssInjection } from '@salt-ds/styles';
-import { ToggleButtonGroupContext } from './ToggleButtonGroupContext.js';
-import css_248z from './ToggleButtonGroup.css.js';
-
-const withBaseName = makePrefixer("saltToggleButtonGroup");
-const ToggleButtonGroup = forwardRef(function ToggleButtonGroup2(props, ref) {
-  const {
-    children,
-    className,
-    value: valueProp,
-    defaultValue,
-    disabled,
-    onChange,
-    onKeyDown,
-    orientation = "horizontal",
-    ...rest
-  } = props;
-  const targetWindow = useWindow();
-  useComponentCssInjection({
-    testId: "salt-toggle-button-group",
-    css: css_248z,
-    window: targetWindow
-  });
-  const groupRef = useRef(null);
-  const handleRef = useForkRef(ref, groupRef);
-  const [value, setValue] = useControlled({
-    default: defaultValue,
-    controlled: valueProp,
-    name: "ToggleButtonGroup",
-    state: "value"
-  });
-  const [focused, setFocused] = useState(value);
-  const select = useCallback(
-    (event) => {
-      const newValue = event.currentTarget.value;
-      setValue(newValue);
-      if (value !== newValue) {
-        onChange == null ? void 0 : onChange(event);
-      }
-    },
-    [onChange, value, setValue]
-  );
-  const isSelected = useCallback(
-    (id) => {
-      return value === id;
-    },
-    [value]
-  );
-  const focus = (id) => {
-    setFocused(id);
-  };
-  const isFocused = useCallback(
-    (id) => {
-      return focused === id || !focused;
-    },
-    [focused]
-  );
-  const contextValue = useMemo(
-    () => ({
-      select,
-      isSelected,
-      focus,
-      isFocused,
-      disabled
-    }),
-    [select, isSelected, isFocused, disabled]
-  );
-  const handleKeyDown = (event) => {
-    var _a, _b, _c, _d;
-    const elements = Array.from(
-      (_b = (_a = groupRef.current) == null ? void 0 : _a.querySelectorAll("button:not([disabled])")) != null ? _b : []
-    );
-    const currentIndex = elements.findIndex(
-      (element) => element === document.activeElement
-    );
-    switch (event.key) {
-      case "ArrowDown":
-      case "ArrowRight":
-        (_c = elements[(currentIndex + 1) % elements.length]) == null ? void 0 : _c.focus();
-        break;
-      case "ArrowUp":
-      case "ArrowLeft":
-        (_d = elements[(currentIndex - 1 + elements.length) % elements.length]) == null ? void 0 : _d.focus();
-        break;
-    }
-    onKeyDown == null ? void 0 : onKeyDown(event);
-  };
-  return /* @__PURE__ */ jsx(ToggleButtonGroupContext.Provider, {
-    value: contextValue,
-    children: /* @__PURE__ */ jsx("div", {
-      className: clsx(withBaseName(), withBaseName(orientation), className),
-      role: "radiogroup",
-      ref: handleRef,
-      onKeyDown: handleKeyDown,
-      ...rest,
-      children
-    })
-  });
-});
-
-export { ToggleButtonGroup };
-//# sourceMappingURL=ToggleButtonGroup.js.map

package/dist-es/toggle-button-group/ToggleButtonGroup.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"ToggleButtonGroup.js","sources":["../src/toggle-button-group/ToggleButtonGroup.tsx"],"sourcesContent":["import {\n  ComponentPropsWithoutRef,\n  forwardRef,\n  KeyboardEvent,\n  SyntheticEvent,\n  useCallback,\n  useMemo,\n  useRef,\n  useState,\n} from \"react\";\nimport { makePrefixer, useControlled, useForkRef } from \"@salt-ds/core\";\nimport { clsx } from \"clsx\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\n\nimport { ToggleButtonGroupContext } from \"./ToggleButtonGroupContext\";\nimport toggleButtonGroupCss from \"./ToggleButtonGroup.css\";\n\nexport interface ToggleButtonGroupProps\n  extends Omit<ComponentPropsWithoutRef<\"div\">, \"onChange\"> {\n  /**\n   * The default value. Use when the component is not controlled.\n   */\n  defaultValue?: string | ReadonlyArray<string> | number | undefined;\n  /**\n   * If `true`, the Toggle Button Group will be disabled.\n   */\n  disabled?: boolean;\n  /**\n   * The value. Use when the component is controlled.\n   */\n  value?: string | ReadonlyArray<string> | number | undefined;\n  /**\n   * Callback fired when the selection changes.\n   * @param event\n   */\n  onChange?: (event: SyntheticEvent<HTMLButtonElement>) => void;\n  /**\n   * The orientation of the toggle buttons.\n   */\n  orientation?: \"horizontal\" | \"vertical\";\n}\n\nconst withBaseName = makePrefixer(\"saltToggleButtonGroup\");\n\nexport const ToggleButtonGroup = forwardRef<\n  HTMLDivElement,\n  ToggleButtonGroupProps\n>(function ToggleButtonGroup(props, ref) {\n  const {\n    children,\n    className,\n    value: valueProp,\n    defaultValue,\n    disabled,\n    onChange,\n    onKeyDown,\n    orientation = \"horizontal\",\n    ...rest\n  } = props;\n\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"salt-toggle-button-group\",\n    css: toggleButtonGroupCss,\n    window: targetWindow,\n  });\n\n  const groupRef = useRef<HTMLDivElement>(null);\n  const handleRef = useForkRef(ref, groupRef);\n\n  const [value, setValue] = useControlled({\n    default: defaultValue,\n    controlled: valueProp,\n    name: \"ToggleButtonGroup\",\n    state: \"value\",\n  });\n  const [focused, setFocused] = useState<\n    string | ReadonlyArray<string> | number | undefined\n  >(value);\n\n  const select = useCallback(\n    (event: SyntheticEvent<HTMLButtonElement>) => {\n      const newValue = event.currentTarget.value;\n      setValue(newValue);\n      if (value !== newValue) {\n        onChange?.(event);\n      }\n    },\n    [onChange, value, setValue]\n  );\n\n  const isSelected = useCallback(\n    (id: string | ReadonlyArray<string> | number | undefined) => {\n      return value === id;\n    },\n    [value]\n  );\n\n  const focus = (id: string | ReadonlyArray<string> | number | undefined) => {\n    setFocused(id);\n  };\n\n  const isFocused = useCallback(\n    (id: string | ReadonlyArray<string> | number | undefined) => {\n      return focused === id || !focused;\n    },\n    [focused]\n  );\n\n  const contextValue = useMemo(\n    () => ({\n      select,\n      isSelected,\n      focus,\n      isFocused,\n      disabled,\n    }),\n    [select, isSelected, isFocused, disabled]\n  );\n\n  const handleKeyDown = (event: KeyboardEvent<HTMLDivElement>) => {\n    const elements: HTMLElement[] = Array.from(\n      groupRef.current?.querySelectorAll(\"button:not([disabled])\") ?? []\n    );\n    const currentIndex = elements.findIndex(\n      (element) => element === document.activeElement\n    );\n    switch (event.key) {\n      case \"ArrowDown\":\n      case \"ArrowRight\":\n        elements[(currentIndex + 1) % elements.length]?.focus();\n        break;\n      case \"ArrowUp\":\n      case \"ArrowLeft\":\n        elements[\n          (currentIndex - 1 + elements.length) % elements.length\n        ]?.focus();\n        break;\n    }\n\n    onKeyDown?.(event);\n  };\n\n  return (\n    <ToggleButtonGroupContext.Provider value={contextValue}>\n      <div\n        className={clsx(withBaseName(), withBaseName(orientation), className)}\n        role=\"radiogroup\"\n        ref={handleRef}\n        onKeyDown={handleKeyDown}\n        {...rest}\n      >\n        {children}\n      </div>\n    </ToggleButtonGroupContext.Provider>\n  );\n});\n"],"names":["ToggleButtonGroup","toggleButtonGroupCss"],"mappings":"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"}

package/dist-es/toggle-button-group/ToggleButtonGroupContext.js

@@ -1,10 +0,0 @@
-import { createContext } from '@salt-ds/core';
-import { useContext } from 'react';
-
-const ToggleButtonGroupContext = createContext("ToggleButtonGroupContext", void 0);
-function useToggleButtonGroup() {
-  return useContext(ToggleButtonGroupContext);
-}
-
-export { ToggleButtonGroupContext, useToggleButtonGroup };
-//# sourceMappingURL=ToggleButtonGroupContext.js.map

package/dist-es/toggle-button-group/ToggleButtonGroupContext.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"ToggleButtonGroupContext.js","sources":["../src/toggle-button-group/ToggleButtonGroupContext.ts"],"sourcesContent":["import { createContext } from \"@salt-ds/core\";\nimport { SyntheticEvent, useContext } from \"react\";\n\nexport interface ToggleButtonGroupContextValue {\n  disabled?: boolean;\n  select: (event: SyntheticEvent<HTMLButtonElement>) => void;\n  isSelected: (\n    id: string | ReadonlyArray<string> | number | undefined\n  ) => boolean;\n  focus: (id: string | ReadonlyArray<string> | number | undefined) => void;\n  isFocused: (\n    id: string | ReadonlyArray<string> | number | undefined\n  ) => boolean;\n}\n\nexport const ToggleButtonGroupContext = createContext<\n  ToggleButtonGroupContextValue | undefined\n>(\"ToggleButtonGroupContext\", undefined);\n\nexport function useToggleButtonGroup() {\n  return useContext(ToggleButtonGroupContext);\n}\n"],"names":[],"mappings":";;;AAea,MAAA,wBAAA,GAA2B,aAEtC,CAAA,0BAAA,EAA4B,KAAS,CAAA,EAAA;AAEhC,SAAS,oBAAuB,GAAA;AACrC,EAAA,OAAO,WAAW,wBAAwB,CAAA,CAAA;AAC5C;;;;"}

package/dist-types/accordion/Accordion.d.ts

@@ -1,9 +0,0 @@
-import { HTMLAttributes } from "react";
-export interface AccordionProps extends Omit<HTMLAttributes<HTMLDivElement>, "onChange"> {
-    disabled?: boolean;
-    maxExpandedItems?: number;
-    expandedSectionIds?: string[];
-    defaultExpandedSectionIds?: string[];
-    onChange?: (expandedSectionIds: string[] | null) => void;
-}
-export declare const Accordion: import("react").ForwardRefExoticComponent<AccordionProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist-types/accordion/AccordionContext.d.ts

@@ -1,10 +0,0 @@
-/// <reference types="react" />
-export interface AccordionContext {
-    isExpanded: (id: string) => boolean;
-    disabled: boolean;
-    registerSection: (id: string, isExpanded: boolean) => void;
-    unregisterSection: (id: string) => void;
-    onChange: (id: string, isExpanded: boolean) => void;
-}
-export declare const AccordionContext: import("react").Context<AccordionContext | undefined>;
-export declare const useAccordionContext: () => AccordionContext;

package/dist-types/accordion/AccordionDetails.d.ts

@@ -1,8 +0,0 @@
-import { HTMLAttributes } from "react";
-export interface AccordionDetailsProps extends HTMLAttributes<HTMLDivElement> {
-    /**
-     * Render children even if the component is collapsed. Prevents unmounting of children components.
-     * */
-    preventUnmountOnCollapse?: boolean;
-}
-export declare const AccordionDetails: import("react").ForwardRefExoticComponent<AccordionDetailsProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist-types/accordion/AccordionSection.d.ts

@@ -1,9 +0,0 @@
-import { HTMLAttributes } from "react";
-export interface AccordionSectionProps extends Omit<HTMLAttributes<HTMLDivElement>, "onChange"> {
-    defaultExpanded?: boolean;
-    disabled?: boolean;
-    expanded?: boolean;
-    onChange?: (isExpanded: boolean) => void;
-    className?: string;
-}
-export declare const AccordionSection: import("react").ForwardRefExoticComponent<AccordionSectionProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist-types/accordion/AccordionSectionContext.d.ts

@@ -1,8 +0,0 @@
-/// <reference types="react" />
-export interface AccordionSectionContext {
-    isDisabled?: boolean;
-    isExpanded: boolean;
-    onToggle: () => void;
-}
-export declare const AccordionSectionContext: import("react").Context<AccordionSectionContext | undefined>;
-export declare const useAccordionSectionContext: () => AccordionSectionContext;

package/dist-types/accordion/AccordionSummary.d.ts

@@ -1,5 +0,0 @@
-import { HTMLAttributes, ReactNode } from "react";
-export interface AccordionSummaryProps extends HTMLAttributes<HTMLDivElement> {
-    icon?: ReactNode;
-}
-export declare const AccordionSummary: import("react").ForwardRefExoticComponent<AccordionSummaryProps & import("react").RefAttributes<HTMLDivElement>>;

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

@@ -1,5 +0,0 @@
-export * from "./AccordionSection";
-export * from "./AccordionSectionContext";
-export * from "./Accordion";
-export * from "./AccordionSummary";
-export * from "./AccordionDetails";

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

@@ -1 +0,0 @@
-export declare const isNotProduction: () => boolean;

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

@@ -1,7 +0,0 @@
-import { ComponentProps, MouseEvent } from "react";
-export interface ToggleButtonProps extends ComponentProps<"button"> {
-    selected?: boolean;
-    onChange?: (event: MouseEvent<HTMLButtonElement>) => void;
-    value: string | ReadonlyArray<string> | number | undefined;
-}
-export declare const ToggleButton: import("react").ForwardRefExoticComponent<Omit<ToggleButtonProps, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;

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

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

package/dist-types/toggle-button-group/ToggleButtonGroup.d.ts

@@ -1,25 +0,0 @@
-import { ComponentPropsWithoutRef, SyntheticEvent } from "react";
-export interface ToggleButtonGroupProps extends Omit<ComponentPropsWithoutRef<"div">, "onChange"> {
-    /**
-     * The default value. Use when the component is not controlled.
-     */
-    defaultValue?: string | ReadonlyArray<string> | number | undefined;
-    /**
-     * If `true`, the Toggle Button Group will be disabled.
-     */
-    disabled?: boolean;
-    /**
-     * The value. Use when the component is controlled.
-     */
-    value?: string | ReadonlyArray<string> | number | undefined;
-    /**
-     * Callback fired when the selection changes.
-     * @param event
-     */
-    onChange?: (event: SyntheticEvent<HTMLButtonElement>) => void;
-    /**
-     * The orientation of the toggle buttons.
-     */
-    orientation?: "horizontal" | "vertical";
-}
-export declare const ToggleButtonGroup: import("react").ForwardRefExoticComponent<ToggleButtonGroupProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist-types/toggle-button-group/ToggleButtonGroupContext.d.ts

@@ -1,10 +0,0 @@
-import { SyntheticEvent } from "react";
-export interface ToggleButtonGroupContextValue {
-    disabled?: boolean;
-    select: (event: SyntheticEvent<HTMLButtonElement>) => void;
-    isSelected: (id: string | ReadonlyArray<string> | number | undefined) => boolean;
-    focus: (id: string | ReadonlyArray<string> | number | undefined) => void;
-    isFocused: (id: string | ReadonlyArray<string> | number | undefined) => boolean;
-}
-export declare const ToggleButtonGroupContext: import("react").Context<ToggleButtonGroupContextValue | undefined>;
-export declare function useToggleButtonGroup(): ToggleButtonGroupContextValue | undefined;

package/dist-types/toggle-button-group/index.d.ts

@@ -1,2 +0,0 @@
-export * from "./ToggleButtonGroup";
-export { useToggleButtonGroup } from "./ToggleButtonGroupContext";