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

package/dist-es/packages/lab/src/list-deprecated/useList.js

@@ -1,432 +0,0 @@
-import { useForkRef, useId, useIsFocusVisible, useControlled, ownerDocument } from '@salt-ds/core';
-import { useRef, useCallback, useState, useEffect } from 'react';
-
-function useList(props = {}) {
-  validateProps(props);
-  const generatedId = useId(props.id);
-  const {
-    id = generatedId,
-    source = [],
-    itemCount = source.length,
-    getItemId = (index) => `${id}-item-${index}`,
-    getItemAtIndex: getItemAtIndexProp,
-    getItemIndex: getItemIndexProp,
-    displayedItemCount = 10,
-    initialSelectedItem,
-    selectionVariant,
-    disabled = false,
-    onBlur,
-    onChange,
-    onFocus,
-    onKeyDown,
-    onMouseDown,
-    onMouseLeave,
-    onSelect,
-    disableMouseDown,
-    restoreLastFocus,
-    highlightedIndex: highlightedIndexProp,
-    selectedItem: selectedItemProp,
-    tabToSelect,
-    ...restProps
-  } = props;
-  const {
-    isFocusVisibleRef,
-    onFocus: handleFocusVisible,
-    onBlur: handleBlurVisible,
-    ref: focusVisibleRef
-  } = useIsFocusVisible();
-  const { current: isDeselectable } = useRef(
-    selectionVariant === "deselectable"
-  );
-  const { current: isMultiSelect } = useRef(
-    selectionVariant === "multiple" || selectionVariant === "extended" || Array.isArray(initialSelectedItem) || Array.isArray(selectedItemProp)
-  );
-  const { current: isExtendedSelect } = useRef(selectionVariant === "extended");
-  let getItemIndex = useCallback(
-    (item) => source.indexOf(item),
-    [source]
-  );
-  let getItemAtIndex = useCallback((index) => source[index], [source]);
-  const indexComparator = useCallback(
-    (a, b) => getItemIndex(a) - getItemIndex(b),
-    [getItemIndex]
-  );
-  if (typeof getItemIndexProp === "function" && typeof getItemAtIndexProp === "function") {
-    getItemIndex = getItemIndexProp;
-    getItemAtIndex = getItemAtIndexProp;
-  }
-  const rootRef = useRef();
-  const [focusVisible, setFocusVisible] = useState(false);
-  const [lastFocusedIndex, setLastFocusedIndex] = useState(-1);
-  const [selectedItem, setSelectedItem] = useControlled({
-    controlled: selectedItemProp,
-    default: initialSelectedItem != null ? initialSelectedItem : isMultiSelect ? [] : null,
-    name: "useList",
-    state: "selectedItem"
-  });
-  const [highlightedIndex, setHighlightedIndex] = useControlled({
-    controlled: highlightedIndexProp,
-    default: void 0,
-    name: "useList",
-    state: "highlightedIndex"
-  });
-  const handleSingleSelect = useCallback(
-    (event, index, item) => {
-      const isSelected = item === selectedItem;
-      let nextItem;
-      if (isSelected && !isDeselectable) {
-        return;
-      }
-      if (!isSelected) {
-        nextItem = item;
-        setHighlightedIndex(index);
-      } else {
-        nextItem = null;
-      }
-      setSelectedItem(
-        nextItem
-      );
-      if (onChange) {
-        onChange(
-          event,
-          nextItem
-        );
-      }
-    },
-    [
-      isDeselectable,
-      onChange,
-      selectedItem,
-      setHighlightedIndex,
-      setSelectedItem
-    ]
-  );
-  const handleMultiSelect = useCallback(
-    (event, index, item) => {
-      const isSelected = selectedItem.indexOf(item) !== -1;
-      let nextItems = selectedItem;
-      if (!isSelected) {
-        nextItems = nextItems.concat([item]).sort(indexComparator);
-        setHighlightedIndex(index);
-      } else {
-        nextItems = nextItems.filter((selected) => selected !== item);
-      }
-      setSelectedItem(
-        nextItems
-      );
-      if (onChange) {
-        onChange(
-          event,
-          nextItems
-        );
-      }
-    },
-    [
-      indexComparator,
-      onChange,
-      selectedItem,
-      setHighlightedIndex,
-      setSelectedItem
-    ]
-  );
-  const handleRangeSelect = useCallback(
-    (event, index) => {
-      var _a;
-      const currentSelection = event.ctrlKey || event.metaKey ? selectedItem : [];
-      const lastSelectedItemIndex = selectedItem.length > 0 ? getItemIndex(
-        selectedItem[selectedItem.length - 1]
-      ) : 0;
-      const startRegion = Math.min(
-        index != null ? index : lastSelectedItemIndex,
-        lastSelectedItemIndex
-      );
-      const endRegion = Math.max(
-        index != null ? index : lastSelectedItemIndex,
-        lastSelectedItemIndex
-      );
-      const rangeSelection = source.slice(startRegion, endRegion + 1);
-      const nextItems = [
-        .../* @__PURE__ */ new Set([...currentSelection, ...rangeSelection])
-      ];
-      (_a = ownerDocument(event.currentTarget).getSelection()) == null ? void 0 : _a.removeAllRanges();
-      setSelectedItem(
-        nextItems
-      );
-      if (onChange) {
-        onChange(
-          event,
-          nextItems
-        );
-      }
-    },
-    [getItemIndex, onChange, selectedItem, setSelectedItem, source]
-  );
-  const handleExtendedSelect = useCallback(
-    (event, index, item) => {
-      let nextItems = selectedItem;
-      if (event.shiftKey) {
-        handleRangeSelect(event, index);
-      } else if (selectedItem.length === 0 || event.ctrlKey || event.metaKey) {
-        console.log("handleMulti");
-        handleMultiSelect(event, index, item);
-      } else {
-        nextItems = [item];
-        setSelectedItem(
-          nextItems
-        );
-        if (onChange) {
-          onChange(
-            event,
-            nextItems
-          );
-        }
-      }
-    },
-    [
-      handleMultiSelect,
-      handleRangeSelect,
-      onChange,
-      selectedItem,
-      setSelectedItem
-    ]
-  );
-  const handleSelect = useCallback(
-    (event, index, item) => {
-      if (item == null || item.disabled) {
-        return;
-      }
-      if (onSelect) {
-        console.log("onSelect");
-        onSelect(event, item);
-      }
-      if (isExtendedSelect) {
-        handleExtendedSelect(event, index, item);
-      } else if (isMultiSelect) {
-        handleMultiSelect(event, index, item);
-      } else {
-        handleSingleSelect(event, index, item);
-      }
-    },
-    [
-      handleExtendedSelect,
-      handleMultiSelect,
-      handleSingleSelect,
-      isExtendedSelect,
-      isMultiSelect,
-      onSelect
-    ]
-  );
-  const saveFocusedIndex = (index) => {
-    setLastFocusedIndex(index);
-    return index;
-  };
-  const keyDownHandlers = {
-    ArrowUp: (event) => {
-      event.preventDefault();
-      setHighlightedIndex(
-        (prevHighlightedIndex) => saveFocusedIndex(Math.max(0, (prevHighlightedIndex != null ? prevHighlightedIndex : itemCount) - 1))
-      );
-    },
-    ArrowDown: (event) => {
-      event.preventDefault();
-      setHighlightedIndex(
-        (prevHighlightedIndex) => saveFocusedIndex(
-          Math.min(itemCount - 1, (prevHighlightedIndex != null ? prevHighlightedIndex : -1) + 1)
-        )
-      );
-    },
-    PageUp: (event) => {
-      event.preventDefault();
-      setHighlightedIndex(
-        (prevHighlightedIndex) => saveFocusedIndex(
-          Math.max(
-            0,
-            (prevHighlightedIndex != null ? prevHighlightedIndex : displayedItemCount) - displayedItemCount
-          )
-        )
-      );
-    },
-    PageDown: (event) => {
-      event.preventDefault();
-      setHighlightedIndex(
-        (prevHighlightedIndex) => saveFocusedIndex(
-          Math.min(
-            itemCount - 1,
-            (prevHighlightedIndex != null ? prevHighlightedIndex : 0) + displayedItemCount
-          )
-        )
-      );
-    },
-    Home: (event) => {
-      event.preventDefault();
-      setHighlightedIndex(saveFocusedIndex(0));
-    },
-    End: (event) => {
-      event.preventDefault();
-      setHighlightedIndex(saveFocusedIndex(itemCount - 1));
-    },
-    Enter: (event) => {
-      event.preventDefault();
-      handleSelect(
-        event,
-        highlightedIndex,
-        highlightedIndex != null && highlightedIndex > -1 ? getItemAtIndex(highlightedIndex) : null
-      );
-    },
-    " ": (event) => {
-      event.preventDefault();
-      handleSelect(
-        event,
-        highlightedIndex,
-        highlightedIndex != null && highlightedIndex > -1 ? getItemAtIndex(highlightedIndex) : null
-      );
-    },
-    Tab: (event) => {
-      if (tabToSelect) {
-        handleSelect(
-          event,
-          highlightedIndex,
-          highlightedIndex != null && highlightedIndex > -1 ? getItemAtIndex(highlightedIndex) : null
-        );
-      } else {
-        setHighlightedIndex(void 0);
-      }
-    }
-  };
-  const handleKeyDown = (event) => {
-    if (isFocusVisibleRef.current) {
-      setFocusVisible(true);
-    }
-    const handler = keyDownHandlers[event.key];
-    if (handler) {
-      handler(event);
-    }
-    if (onKeyDown) {
-      onKeyDown(event);
-    }
-  };
-  const handleFocus = (event) => {
-    handleFocusVisible(event);
-    if (isFocusVisibleRef.current) {
-      setFocusVisible(true);
-    }
-    if (highlightedIndex === void 0) {
-      const firstSelectedItem = isMultiSelect ? selectedItem[0] : selectedItem;
-      setHighlightedIndex(
-        Math.max(
-          restoreLastFocus ? lastFocusedIndex : firstSelectedItem ? getItemIndex(firstSelectedItem) : -1,
-          0
-        )
-      );
-    }
-    if (onFocus) {
-      onFocus(event);
-    }
-  };
-  const handleBlur = (event) => {
-    setHighlightedIndex(void 0);
-    handleBlurVisible();
-    if (!isFocusVisibleRef.current) {
-      setFocusVisible(false);
-    }
-    if (onBlur) {
-      onBlur(event);
-    }
-  };
-  const handleMouseDown = (event) => {
-    if (disableMouseDown) {
-      event.preventDefault();
-    } else if (onMouseDown) {
-      onMouseDown(event);
-    }
-  };
-  const handleMouseLeave = (event) => {
-    if (focusVisible && id) {
-      const rootNode = (rootRef.current || ownerDocument(event.currentTarget)).getRootNode();
-      const listNode = rootNode.getElementById(id);
-      if (listNode == null ? void 0 : listNode.contains(event.target)) {
-        setHighlightedIndex(void 0);
-      }
-    } else {
-      setHighlightedIndex(void 0);
-    }
-    if (onMouseLeave) {
-      onMouseLeave(event);
-    }
-  };
-  const eventHandlers = {
-    onFocus: handleFocus,
-    onBlur: handleBlur,
-    onKeyDown: handleKeyDown,
-    onMouseDown: handleMouseDown,
-    onMouseLeave: handleMouseLeave
-  };
-  const ariaProps = {
-    role: "listbox",
-    "aria-activedescendant": highlightedIndex !== void 0 && highlightedIndex >= 0 ? getItemId(highlightedIndex) : void 0
-  };
-  if (isMultiSelect) {
-    ariaProps["aria-multiselectable"] = true;
-  }
-  return {
-    focusedRef: useForkRef(rootRef, focusVisibleRef),
-    state: {
-      id,
-      focusVisible,
-      selectedItem,
-      highlightedIndex,
-      isDeselectable,
-      isMultiSelect,
-      isDisabled: disabled
-    },
-    helpers: {
-      setFocusVisible,
-      setSelectedItem,
-      setHighlightedIndex,
-      keyDownHandlers,
-      handleSelect
-    },
-    listProps: {
-      id,
-      source,
-      itemCount,
-      disableMouseDown,
-      displayedItemCount,
-      getItemAtIndex,
-      getItemIndex,
-      getItemId,
-      disabled,
-      ...ariaProps,
-      ...restProps,
-      ...disabled ? {} : eventHandlers
-    }
-  };
-}
-const validateProps = (props) => {
-  if (process.env.NODE_ENV !== "production") {
-    const { source, itemCount, getItemIndex, getItemAtIndex } = props;
-    const hasIndexer = typeof getItemIndex === "function" && typeof getItemAtIndex === "function";
-    const hasNoIndexer = getItemIndex === void 0 && getItemAtIndex === void 0;
-    const sourceNotArray = !Array.isArray(source);
-    useEffect(() => {
-      if (sourceNotArray) {
-        console.error("`source` for useList must be an array.");
-      }
-    }, [sourceNotArray]);
-    useEffect(() => {
-      if (!hasNoIndexer && !hasIndexer) {
-        console.error(
-          "useList needs to have both `getItemIndex` and `getItemAtIndex`."
-        );
-      }
-      if (!hasNoIndexer && itemCount === void 0) {
-        console.error(
-          "useList needs to have `itemCount` if an indexer is used."
-        );
-      }
-    }, [hasIndexer, hasNoIndexer, itemCount]);
-  }
-};
-
-export { useList };
-//# sourceMappingURL=useList.js.map

package/dist-es/packages/lab/src/list-deprecated/useTypeSelect.js

@@ -1,83 +0,0 @@
-import { useCallback, useRef } from 'react';
-import { escapeRegExp } from '../utils/escapeRegExp.js';
-import '@salt-ds/core';
-import '../utils/useFloatingUI.js';
-import { itemToString } from './itemToString.js';
-
-const TYPE_SELECT_TIMEOUT = 1500;
-function useTypeSelect(options) {
-  const {
-    getItemAtIndex,
-    highlightedIndex,
-    itemCount,
-    itemToString: itemToString$1 = itemToString,
-    onTypeSelect,
-    setFocusVisible,
-    setHighlightedIndex
-  } = options;
-  const getItemIndexForSearch = useCallback(
-    (searchTerm, fromIndex) => {
-      if (itemCount === 0) {
-        return null;
-      }
-      let index = fromIndex || 0;
-      while (index < itemCount) {
-        const item = getItemAtIndex(index);
-        const textValue = itemToString$1 ? itemToString$1(item) : item;
-        if (textValue && textValue.match(new RegExp(`^${escapeRegExp(searchTerm)}`, "i"))) {
-          return index;
-        }
-        index = index + 1;
-      }
-      return null;
-    },
-    [itemCount, itemToString$1, getItemAtIndex]
-  );
-  const state = useRef({
-    search: "",
-    timeout: null
-  }).current;
-  const onKeyDownCapture = (event) => {
-    const character = getStringForKey(event.key);
-    if (!character || event.ctrlKey || event.metaKey) {
-      return;
-    }
-    if (character !== " " || state.search.trim().length > 0) {
-      event.preventDefault();
-      event.stopPropagation();
-    }
-    if (character !== state.search) {
-      state.search += character;
-    }
-    let index = getItemIndexForSearch(
-      state.search,
-      state.search.length > 1 ? highlightedIndex : highlightedIndex + 1
-    );
-    if (index == null) {
-      index = getItemIndexForSearch(state.search);
-    }
-    if (index != null) {
-      setFocusVisible(true);
-      setHighlightedIndex(index);
-      if (onTypeSelect) {
-        onTypeSelect(index);
-      }
-    }
-    clearTimeout(state.timeout);
-    state.timeout = setTimeout(() => {
-      state.search = "";
-    }, TYPE_SELECT_TIMEOUT);
-  };
-  return {
-    onKeyDownCapture
-  };
-}
-function getStringForKey(key) {
-  if (key.length === 1 || !/^[A-Z]/i.test(key)) {
-    return key;
-  }
-  return "";
-}
-
-export { useTypeSelect };
-//# sourceMappingURL=useTypeSelect.js.map

package/dist-es/packages/lab/src/list-deprecated/useTypeSelect.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"useTypeSelect.js","sources":["../src/list-deprecated/useTypeSelect.js"],"sourcesContent":["import { useCallback, useRef } from \"react\";\nimport { escapeRegExp } from \"../utils\";\n\nimport { itemToString as defaultItemToString } from \"./itemToString\";\n\nconst TYPE_SELECT_TIMEOUT = 1500;\n\nexport function useTypeSelect(options) {\n  const {\n    getItemAtIndex,\n    highlightedIndex,\n    itemCount,\n    itemToString = defaultItemToString,\n    onTypeSelect,\n    setFocusVisible,\n    setHighlightedIndex,\n  } = options;\n\n  const getItemIndexForSearch = useCallback(\n    (searchTerm, fromIndex) => {\n      if (itemCount === 0) {\n        return null;\n      }\n\n      let index = fromIndex || 0;\n      while (index < itemCount) {\n        const item = getItemAtIndex(index);\n        const textValue = itemToString ? itemToString(item) : item;\n        if (\n          textValue &&\n          textValue.match(new RegExp(`^${escapeRegExp(searchTerm)}`, \"i\"))\n        ) {\n          return index;\n        }\n\n        index = index + 1;\n      }\n\n      return null;\n    },\n    [itemCount, itemToString, getItemAtIndex]\n  );\n\n  const state = useRef({\n    search: \"\",\n    timeout: null,\n  }).current;\n\n  // eslint-disable-next-line complexity\n  const onKeyDownCapture = (event) => {\n    const character = getStringForKey(event.key);\n    if (!character || event.ctrlKey || event.metaKey) {\n      return;\n    }\n\n    // Do not propagate the Spacebar event if it's meant to be part of the search.\n    // When we time out, the search term becomes empty, hence the check on length.\n    // Trimming is to account for the case of pressing the Spacebar more than once,\n    // which should cycle through the selection/deselection of the focused item.\n    if (character !== \" \" || state.search.trim().length > 0) {\n      event.preventDefault();\n      event.stopPropagation();\n    }\n\n    // When typing same character sebsequently and *quickly*, we treat it as cyling through items\n    // starting with that char instead of seaching for double character, because in most cases\n    // there won't be any option having same characters at the beginning. This should be only\n    // impacting beginning of the words because length of `character` would be 1.\n    if (character !== state.search) {\n      state.search += character;\n    }\n\n    // Prioritize items after the currently focused item, falling back to searching the whole list.\n    // We want to cycle through choices when keep typing the same first character, hence the +1\n    // condition. All subsequent characters should stay at the current item otherwise it will\n    // always jumping around.\n    let index = getItemIndexForSearch(\n      state.search,\n      state.search.length > 1 ? highlightedIndex : highlightedIndex + 1\n    );\n\n    // If no key found, search from the top.\n    if (index == null) {\n      index = getItemIndexForSearch(state.search);\n    }\n\n    if (index != null) {\n      setFocusVisible(true);\n      // TODO: Maybe we can repurpose this setHighlightedIndex so that the user controls it's meant to set\n      // hightlighted index when expanded v.s. selected item when collapsed\n      setHighlightedIndex(index);\n      if (onTypeSelect) {\n        onTypeSelect(index);\n      }\n    }\n\n    clearTimeout(state.timeout);\n    state.timeout = setTimeout(() => {\n      state.search = \"\";\n    }, TYPE_SELECT_TIMEOUT);\n  };\n\n  return {\n    // Using a capturing listener to catch the keydown event before\n    // other hooks in order to handle the Spacebar event.\n    onKeyDownCapture,\n  };\n}\n\nfunction getStringForKey(key) {\n  // If the key is of length 1, it is an ASCII value.\n  // Otherwise, if there are no ASCII characters in the key name,\n  // it is a Unicode character.\n  // See https://www.w3.org/TR/uievents-key/\n  if (key.length === 1 || !/^[A-Z]/i.test(key)) {\n    return key;\n  }\n\n  return \"\";\n}\n"],"names":["itemToString","defaultItemToString"],"mappings":"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"}

package/dist-es/packages/lab/src/logo/Logo.css.js

@@ -1,7 +0,0 @@
-import styleInject from '../../../../node_modules/style-inject/dist/style-inject.es.js';
-
-var css_248z = ".salt-density-high {\n  --logo-height: var(--saltLogo-logo-height, 14px);\n}\n.salt-density-medium {\n  --logo-height: var(--saltLogo-logo-height, 20px);\n}\n.salt-density-low {\n  --logo-height: var(--saltLogo-logo-height, 26px);\n}\n.salt-density-touch {\n  --logo-height: var(--saltLogo-logo-height, 32px);\n}\n\n.saltLogo {\n  --logo-color: var(--saltLogo-color, var(--salt-palette-neutral-secondary-foreground));\n  --logo-divider-color: var(--saltLogo-pipe-color, var(--salt-separable-secondary-borderColor));\n  --logo-divider-height: var(--saltLogo-title-height, var(--salt-size-divider-height));\n  --logo-divider-margin: 0 calc(var(--salt-size-unit) * 2);\n  --logo-fontSize: var(--salt-text-fontSize);\n  --logo-lineHeight: var(--salt-text-lineHeight);\n}\n\n.saltLogo-compact {\n  --logo-pipe-margin: 0 calc(var(--salt-size-unit) * 1.5);\n}\n\n.saltLogo {\n  display: inline-flex;\n  position: relative;\n  align-items: center;\n  justify-content: center;\n  height: var(--logo-height);\n}\n\n.saltLogo img {\n  max-height: 100%;\n}\n\n.saltLogo-wrapper {\n  display: inline-flex;\n  position: relative;\n  height: var(--logo-height);\n}\n\n.saltLogo-logo {\n  fill: var(--logo-color);\n  margin: auto;\n  stroke: none !important;\n  text-align: center;\n  font-size: var(--logo-fontSize);\n  line-height: var(--logo-lineHeight);\n}\n\n.saltLogo-appTitle {\n  align-self: center;\n  color: var(--logo-color);\n  position: relative;\n}\n\n.saltLogo-titlePipe {\n  border-right: 1px solid var(--logo-divider-color);\n  margin: var(--logo-divider-margin);\n  height: var(--logo-divider-height);\n}\n";
-styleInject(css_248z);
-
-export { css_248z as default };
-//# sourceMappingURL=Logo.css.js.map

package/dist-es/packages/lab/src/logo/Logo.css.js.map

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

package/dist-es/packages/lab/src/logo/Logo.js

@@ -1,50 +0,0 @@
-import { jsxs, jsx } from 'react/jsx-runtime';
-import { forwardRef } from 'react';
-import { clsx } from 'clsx';
-import { makePrefixer } from '@salt-ds/core';
-import { LogoTitle } from './internal/LogoTitle.js';
-import './Logo.css.js';
-
-const withBaseName = makePrefixer("saltLogo");
-const Logo = forwardRef(function Logo2(props, ref) {
-  const {
-    appTitle,
-    className,
-    compact,
-    src,
-    ImageProps,
-    LogoImageComponent = "img",
-    TitleProps,
-    ...rest
-  } = props;
-  return /* @__PURE__ */ jsxs("span", {
-    className: clsx(withBaseName(), className, {
-      [withBaseName("compact")]: compact
-    }),
-    ref,
-    ...rest,
-    children: [
-      /* @__PURE__ */ jsx("span", {
-        className: withBaseName("wrapper"),
-        children: /* @__PURE__ */ jsx(LogoImageComponent, {
-          ...ImageProps,
-          className: clsx(withBaseName("logo"), ImageProps == null ? void 0 : ImageProps.className),
-          src,
-          alt: (ImageProps == null ? void 0 : ImageProps.alt) || "Logo"
-        })
-      }),
-      /* @__PURE__ */ jsx(LogoTitle, {
-        ...TitleProps,
-        className: clsx(withBaseName("appTitle"), TitleProps == null ? void 0 : TitleProps.className),
-        label: appTitle,
-        separatorClassname: clsx(
-          withBaseName("titlePipe"),
-          TitleProps == null ? void 0 : TitleProps.separatorClassname
-        )
-      })
-    ]
-  });
-});
-
-export { Logo };
-//# sourceMappingURL=Logo.js.map

package/dist-es/packages/lab/src/logo/Logo.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"Logo.js","sources":["../src/logo/Logo.tsx"],"sourcesContent":["import { ComponentType, forwardRef, ComponentPropsWithoutRef } from \"react\";\nimport { clsx } from \"clsx\";\nimport { makePrefixer } from \"@salt-ds/core\";\n\nimport { LogoTitle, LogoTitleProps } from \"./internal/LogoTitle\";\nimport \"./Logo.css\";\n\nexport interface LogoProps extends ComponentPropsWithoutRef<\"span\"> {\n  /**\n   * Used to provide application title\n   */\n  appTitle?: string;\n  /**\n   * If `true`, the logo will be compact;\n   */\n  compact?: boolean;\n  /**\n   * Props passed to the Logo.\n   */\n  ImageProps?: Partial<ComponentPropsWithoutRef<\"img\">>;\n  /**\n   * Custom Component to render the logo image.\n   * e.g. if a custom renderer instead of static image using `src` prop.\n   */\n  LogoImageComponent?: ComponentType<Partial<ComponentPropsWithoutRef<\"img\">>>;\n  /**\n   * Image src for logo.\n   */\n  src?: string;\n  /**\n   * Props passed to the Application Title if used.\n   * If using a custom image then ImageProps.alt should be set to include a screen reader alternative text.\n   */\n  TitleProps?: Omit<Partial<LogoTitleProps>, \"label\">;\n}\n\nconst withBaseName = makePrefixer(\"saltLogo\");\n\nexport const Logo = forwardRef<HTMLSpanElement, LogoProps>(function Logo(\n  props,\n  ref\n) {\n  const {\n    appTitle,\n    className,\n    compact,\n    src,\n    ImageProps,\n    LogoImageComponent = \"img\",\n    TitleProps,\n    ...rest\n  } = props;\n\n  // TODO check if we need ImageProps and TitleProps classNames interface.\n  return (\n    <span\n      className={clsx(withBaseName(), className, {\n        [withBaseName(\"compact\")]: compact,\n      })}\n      ref={ref}\n      {...rest}\n    >\n      <span className={withBaseName(\"wrapper\")}>\n        <LogoImageComponent\n          {...ImageProps}\n          className={clsx(withBaseName(\"logo\"), ImageProps?.className)}\n          src={src}\n          alt={ImageProps?.alt || \"Logo\"}\n        />\n      </span>\n      <LogoTitle\n        {...TitleProps}\n        className={clsx(withBaseName(\"appTitle\"), TitleProps?.className)}\n        label={appTitle}\n        separatorClassname={clsx(\n          withBaseName(\"titlePipe\"),\n          TitleProps?.separatorClassname\n        )}\n      />\n    </span>\n  );\n});\n"],"names":["Logo"],"mappings":";;;;;;;AAoCA,MAAM,YAAA,GAAe,aAAa,UAAU,CAAA,CAAA;AAErC,MAAM,IAAO,GAAA,UAAA,CAAuC,SAASA,KAAAA,CAClE,OACA,GACA,EAAA;AACA,EAAM,MAAA;AAAA,IACJ,QAAA;AAAA,IACA,SAAA;AAAA,IACA,OAAA;AAAA,IACA,GAAA;AAAA,IACA,UAAA;AAAA,IACA,kBAAqB,GAAA,KAAA;AAAA,IACrB,UAAA;AAAA,IACG,GAAA,IAAA;AAAA,GACD,GAAA,KAAA,CAAA;AAGJ,EAAA,uBACG,IAAA,CAAA,MAAA,EAAA;AAAA,IACC,SAAW,EAAA,IAAA,CAAK,YAAa,EAAA,EAAG,SAAW,EAAA;AAAA,MACzC,CAAC,YAAa,CAAA,SAAS,CAAI,GAAA,OAAA;AAAA,KAC5B,CAAA;AAAA,IACD,GAAA;AAAA,IACC,GAAG,IAAA;AAAA,IAEJ,QAAA,EAAA;AAAA,sBAAC,GAAA,CAAA,MAAA,EAAA;AAAA,QAAK,SAAA,EAAW,aAAa,SAAS,CAAA;AAAA,QACrC,QAAC,kBAAA,GAAA,CAAA,kBAAA,EAAA;AAAA,UACE,GAAG,UAAA;AAAA,UACJ,WAAW,IAAK,CAAA,YAAA,CAAa,MAAM,CAAA,EAAG,yCAAY,SAAS,CAAA;AAAA,UAC3D,GAAA;AAAA,UACA,GAAA,EAAA,CAAK,yCAAY,GAAO,KAAA,MAAA;AAAA,SAC1B,CAAA;AAAA,OACF,CAAA;AAAA,sBACC,GAAA,CAAA,SAAA,EAAA;AAAA,QACE,GAAG,UAAA;AAAA,QACJ,WAAW,IAAK,CAAA,YAAA,CAAa,UAAU,CAAA,EAAG,yCAAY,SAAS,CAAA;AAAA,QAC/D,KAAO,EAAA,QAAA;AAAA,QACP,kBAAoB,EAAA,IAAA;AAAA,UAClB,aAAa,WAAW,CAAA;AAAA,UACxB,UAAY,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,UAAA,CAAA,kBAAA;AAAA,SACd;AAAA,OACF,CAAA;AAAA,KAAA;AAAA,GACF,CAAA,CAAA;AAEJ,CAAC;;;;"}

package/dist-es/packages/lab/src/logo/internal/LogoTitle.js

@@ -1,24 +0,0 @@
-import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
-import { forwardRef } from 'react';
-
-const LogoTitle = forwardRef(
-  function LogoTitle2({ label, separatorClassname, ...rest }, ref) {
-    return label ? /* @__PURE__ */ jsxs(Fragment, {
-      children: [
-        /* @__PURE__ */ jsx("span", {
-          className: separatorClassname
-        }),
-        /* @__PURE__ */ jsx("span", {
-          ref,
-          ...rest,
-          children: /* @__PURE__ */ jsx("span", {
-            children: label
-          })
-        })
-      ]
-    }) : null;
-  }
-);
-
-export { LogoTitle };
-//# sourceMappingURL=LogoTitle.js.map

package/dist-es/packages/lab/src/logo/internal/LogoTitle.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"LogoTitle.js","sources":["../src/logo/internal/LogoTitle.tsx"],"sourcesContent":["import { ComponentPropsWithoutRef, forwardRef } from \"react\";\n\nexport interface LogoTitleProps extends ComponentPropsWithoutRef<\"span\"> {\n  label?: string;\n  separatorClassname?: string;\n}\n\nexport const LogoTitle = forwardRef<HTMLSpanElement, LogoTitleProps>(\n  function LogoTitle({ label, separatorClassname, ...rest }, ref) {\n    return label ? (\n      <>\n        <span className={separatorClassname} />\n        <span ref={ref} {...rest}>\n          <span>{label}</span>\n        </span>\n      </>\n    ) : null;\n  }\n);\n"],"names":["LogoTitle"],"mappings":";;;AAOO,MAAM,SAAY,GAAA,UAAA;AAAA,EACvB,SAASA,UAAU,CAAA,EAAE,OAAO,kBAAuB,EAAA,GAAA,IAAA,IAAQ,GAAK,EAAA;AAC9D,IAAA,OAAO,KACL,mBAAA,IAAA,CAAA,QAAA,EAAA;AAAA,MACE,QAAA,EAAA;AAAA,wBAAC,GAAA,CAAA,MAAA,EAAA;AAAA,UAAK,SAAW,EAAA,kBAAA;AAAA,SAAoB,CAAA;AAAA,wBACpC,GAAA,CAAA,MAAA,EAAA;AAAA,UAAK,GAAA;AAAA,UAAW,GAAG,IAAA;AAAA,UAClB,QAAC,kBAAA,GAAA,CAAA,MAAA,EAAA;AAAA,YAAM,QAAA,EAAA,KAAA;AAAA,WAAM,CAAA;AAAA,SACf,CAAA;AAAA,OAAA;AAAA,KACF,CACE,GAAA,IAAA,CAAA;AAAA,GACN;AACF;;;;"}

package/dist-es/packages/lab/src/menu-button/MenuButton.js

@@ -1,42 +0,0 @@
-import { jsx } from 'react/jsx-runtime';
-import { forwardRef, useState, useCallback } from 'react';
-import { CascadingMenu } from '../cascading-menu/CascadingMenu.js';
-import { MenuButtonTrigger } from './MenuButtonTrigger.js';
-
-const MenuButton = forwardRef(
-  function MenuButton2({ variant = "secondary", CascadingMenuProps: CascadingMenuProps2 = {}, children, ...restProps }, ref) {
-    const {
-      initialSource = { menuItems: [] },
-      onOpen,
-      onClose,
-      ...restMenuProps
-    } = CascadingMenuProps2;
-    const [isMenuOpen, setMenuOpen] = useState(false);
-    const handleOpen = useCallback(() => {
-      setMenuOpen(true);
-      onOpen && onOpen();
-    }, [onOpen]);
-    const handleClose = useCallback(() => {
-      setMenuOpen(false);
-      onClose && onClose();
-    }, [onClose]);
-    return /* @__PURE__ */ jsx(CascadingMenu, {
-      initialSource,
-      onClose: handleClose,
-      onOpen: handleOpen,
-      ...restMenuProps,
-      children: /* @__PURE__ */ jsx(MenuButtonTrigger, {
-        "aria-expanded": isMenuOpen,
-        "aria-haspopup": true,
-        isMenuOpen,
-        ref,
-        variant,
-        ...restProps,
-        children
-      })
-    });
-  }
-);
-
-export { MenuButton };
-//# sourceMappingURL=MenuButton.js.map

package/dist-es/packages/lab/src/menu-button/MenuButton.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"MenuButton.js","sources":["../src/menu-button/MenuButton.tsx"],"sourcesContent":["import { forwardRef, ReactNode, useCallback, useState } from \"react\";\nimport { ButtonProps } from \"@salt-ds/core\";\nimport { CascadingMenu, CascadingMenuProps } from \"../cascading-menu\";\nimport { MenuButtonTrigger } from \"./MenuButtonTrigger\";\n\nexport interface MenuButtonProps extends ButtonProps {\n  CascadingMenuProps: CascadingMenuProps;\n  children: ReactNode;\n  className?: string;\n  hideCaret?: boolean;\n}\n\nexport const MenuButton = forwardRef<HTMLButtonElement, MenuButtonProps>(\n  function MenuButton(\n    { variant = \"secondary\", CascadingMenuProps = {}, children, ...restProps },\n    ref\n  ) {\n    const {\n      initialSource = { menuItems: [] },\n      onOpen,\n      onClose,\n      ...restMenuProps\n    } = CascadingMenuProps;\n\n    const [isMenuOpen, setMenuOpen] = useState(false);\n\n    const handleOpen = useCallback(() => {\n      setMenuOpen(true);\n      onOpen && onOpen();\n    }, [onOpen]);\n\n    const handleClose = useCallback(() => {\n      setMenuOpen(false);\n      onClose && onClose();\n    }, [onClose]);\n\n    return (\n      <CascadingMenu\n        initialSource={initialSource}\n        onClose={handleClose}\n        onOpen={handleOpen}\n        {...restMenuProps}\n      >\n        <MenuButtonTrigger\n          aria-expanded={isMenuOpen}\n          aria-haspopup\n          isMenuOpen={isMenuOpen}\n          ref={ref}\n          variant={variant}\n          {...restProps}\n        >\n          {children}\n        </MenuButtonTrigger>\n      </CascadingMenu>\n    );\n  }\n);\n"],"names":["MenuButton","CascadingMenuProps"],"mappings":";;;;;AAYO,MAAM,UAAa,GAAA,UAAA;AAAA,EACxB,SAASA,WAAAA,CACP,EAAE,OAAA,GAAU,WAAa,EAAA,kBAAA,EAAAC,mBAAqB,GAAA,EAAI,EAAA,QAAA,EAAA,GAAa,SAAU,EAAA,EACzE,GACA,EAAA;AACA,IAAM,MAAA;AAAA,MACJ,aAAgB,GAAA,EAAE,SAAW,EAAA,EAAG,EAAA;AAAA,MAChC,MAAA;AAAA,MACA,OAAA;AAAA,MACG,GAAA,aAAA;AAAA,KACDA,GAAAA,mBAAAA,CAAAA;AAEJ,IAAA,MAAM,CAAC,UAAA,EAAY,WAAW,CAAA,GAAI,SAAS,KAAK,CAAA,CAAA;AAEhD,IAAM,MAAA,UAAA,GAAa,YAAY,MAAM;AACnC,MAAA,WAAA,CAAY,IAAI,CAAA,CAAA;AAChB,MAAA,MAAA,IAAU,MAAO,EAAA,CAAA;AAAA,KACnB,EAAG,CAAC,MAAM,CAAC,CAAA,CAAA;AAEX,IAAM,MAAA,WAAA,GAAc,YAAY,MAAM;AACpC,MAAA,WAAA,CAAY,KAAK,CAAA,CAAA;AACjB,MAAA,OAAA,IAAW,OAAQ,EAAA,CAAA;AAAA,KACrB,EAAG,CAAC,OAAO,CAAC,CAAA,CAAA;AAEZ,IAAA,uBACG,GAAA,CAAA,aAAA,EAAA;AAAA,MACC,aAAA;AAAA,MACA,OAAS,EAAA,WAAA;AAAA,MACT,MAAQ,EAAA,UAAA;AAAA,MACP,GAAG,aAAA;AAAA,MAEJ,QAAC,kBAAA,GAAA,CAAA,iBAAA,EAAA;AAAA,QACC,eAAe,EAAA,UAAA;AAAA,QACf,eAAa,EAAA,IAAA;AAAA,QACb,UAAA;AAAA,QACA,GAAA;AAAA,QACA,OAAA;AAAA,QACC,GAAG,SAAA;AAAA,QAEH,QAAA;AAAA,OACH,CAAA;AAAA,KACF,CAAA,CAAA;AAAA,GAEJ;AACF;;;;"}