@vuu-ui/vuu-ui-controls 0.0.26

package/esm/drag-drop/useGlobalDragDrop.js

@@ -0,0 +1,87 @@
+import { boxContainsPoint, dispatchCustomEvent } from '@vuu-ui/vuu-utils';
+import { useRef, useCallback } from 'react';
+
+const useGlobalDragDrop = ({
+  onDragOverDropTarget,
+  onDrop
+}) => {
+  const dropTargetRef = useRef();
+  const measuredDropTargetsRef = useRef();
+  const dragDropStateRef = useRef(null);
+  const mousePosRef = useRef({ x: 0, y: 0 });
+  const overDropTarget = useCallback((x, y) => {
+    const { current: dropTargets } = measuredDropTargetsRef;
+    if (dropTargets) {
+      for (const [id, measuredTarget] of Object.entries(dropTargets)) {
+        if (boxContainsPoint(measuredTarget, x, y)) {
+          return id;
+        }
+      }
+    }
+    return void 0;
+  }, []);
+  const dragMouseMoveHandler = useCallback(
+    (evt) => {
+      const { clientX, clientY } = evt;
+      const { current: dragDropState } = dragDropStateRef;
+      mousePosRef.current.x = clientX;
+      mousePosRef.current.y = clientY;
+      if (dragDropState?.draggableElement) {
+        const { draggableElement, mouseOffset } = dragDropState;
+        const dragPosX = mousePosRef.current.x - mouseOffset.x;
+        const dragPosY = mousePosRef.current.y - mouseOffset.y;
+        draggableElement.style.top = `${dragPosY}px`;
+        draggableElement.style.left = `${dragPosX}px`;
+        const dropTargetId = overDropTarget(dragPosX, dragPosY);
+        if (dropTargetId) {
+          const dropTargetWillResumeDrag = onDragOverDropTarget(
+            dropTargetId,
+            dragDropState
+          );
+          if (dropTargetWillResumeDrag) {
+            document.removeEventListener("mousemove", dragMouseMoveHandler, false);
+            document.removeEventListener("mouseup", dragMouseUpHandler, false);
+            dragDropStateRef.current = null;
+            dropTargetRef.current = void 0;
+          } else {
+            dropTargetRef.current = dropTargetId;
+          }
+        } else {
+          dropTargetRef.current = void 0;
+        }
+      }
+    },
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    []
+  );
+  const dragMouseUpHandler = useCallback(() => {
+    document.removeEventListener("mousemove", dragMouseMoveHandler, false);
+    document.removeEventListener("mouseup", dragMouseUpHandler, false);
+    const { current: dragDropState } = dragDropStateRef;
+    if (dragDropState) {
+      dragDropStateRef.current = null;
+      if (dropTargetRef.current) {
+        onDrop(dropTargetRef.current, dragDropState);
+      }
+      if (dragDropState.draggableElement) {
+        dispatchCustomEvent(dragDropState.draggableElement, "vuu-dropped");
+      }
+    }
+  }, [dragMouseMoveHandler, onDrop]);
+  const resumeDrag = useCallback(
+    (dragDropState) => {
+      dragDropStateRef.current = dragDropState;
+      document.addEventListener("mousemove", dragMouseMoveHandler, false);
+      document.addEventListener("mouseup", dragMouseUpHandler, false);
+      return true;
+    },
+    [dragMouseMoveHandler, dragMouseUpHandler]
+  );
+  return {
+    measuredDropTargetsRef,
+    resumeDrag
+  };
+};
+
+export { useGlobalDragDrop };
+//# sourceMappingURL=useGlobalDragDrop.js.map

package/esm/drag-drop/useGlobalDragDrop.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useGlobalDragDrop.js","sources":["../../src/drag-drop/useGlobalDragDrop.ts"],"sourcesContent":["import { boxContainsPoint, dispatchCustomEvent } from \"@vuu-ui/vuu-utils\";\nimport { useCallback, useRef } from \"react\";\nimport { MeasuredTarget } from \"./DragDropProvider\";\nimport { DragDropState } from \"./DragDropState\";\nimport { MouseOffset } from \"./dragDropTypes\";\n\nexport type ResumeDragHandler = (dragDropState: DragDropState) => boolean;\nexport type GlobalDropHandler = (dragDropState: DragDropState) => void;\n\nexport const useGlobalDragDrop = ({\n  onDragOverDropTarget,\n  onDrop,\n}: {\n  onDragOverDropTarget: (\n    dropTargetId: string,\n    dragDropState: DragDropState\n  ) => boolean;\n  onDrop: (dropTargetId: string, dragDropState: DragDropState) => void;\n}) => {\n  const dropTargetRef = useRef<string>();\n  const measuredDropTargetsRef = useRef<Record<string, MeasuredTarget>>();\n\n  const dragDropStateRef = useRef<DragDropState | null>(null);\n  /** current mouse position */\n  const mousePosRef = useRef<MouseOffset>({ x: 0, y: 0 });\n\n  const overDropTarget = useCallback((x: number, y: number) => {\n    const { current: dropTargets } = measuredDropTargetsRef;\n    if (dropTargets) {\n      for (const [id, measuredTarget] of Object.entries(dropTargets)) {\n        if (boxContainsPoint(measuredTarget, x, y)) {\n          return id;\n        }\n      }\n    }\n    return undefined;\n  }, []);\n\n  const dragMouseMoveHandler = useCallback(\n    (evt: MouseEvent) => {\n      const { clientX, clientY } = evt;\n      const { current: dragDropState } = dragDropStateRef;\n\n      mousePosRef.current.x = clientX;\n      mousePosRef.current.y = clientY;\n\n      if (dragDropState?.draggableElement) {\n        const { draggableElement, mouseOffset } = dragDropState;\n\n        const dragPosX = mousePosRef.current.x - mouseOffset.x;\n        const dragPosY = mousePosRef.current.y - mouseOffset.y;\n        draggableElement.style.top = `${dragPosY}px`;\n        draggableElement.style.left = `${dragPosX}px`;\n\n        const dropTargetId = overDropTarget(dragPosX, dragPosY);\n        if (dropTargetId) {\n          const dropTargetWillResumeDrag = onDragOverDropTarget(\n            dropTargetId,\n            dragDropState\n          );\n          if (dropTargetWillResumeDrag) {\n            // prettier-ignore\n            document.removeEventListener(\"mousemove\", dragMouseMoveHandler, false);\n            document.removeEventListener(\"mouseup\", dragMouseUpHandler, false);\n            dragDropStateRef.current = null;\n            dropTargetRef.current = undefined;\n          } else {\n            dropTargetRef.current = dropTargetId;\n          }\n        } else {\n          dropTargetRef.current = undefined;\n        }\n      }\n    },\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n    []\n  );\n\n  const dragMouseUpHandler = useCallback(() => {\n    document.removeEventListener(\"mousemove\", dragMouseMoveHandler, false);\n    document.removeEventListener(\"mouseup\", dragMouseUpHandler, false);\n    const { current: dragDropState } = dragDropStateRef;\n    if (dragDropState) {\n      dragDropStateRef.current = null;\n      if (dropTargetRef.current) {\n        onDrop(dropTargetRef.current, dragDropState);\n      }\n      if (dragDropState.draggableElement) {\n        dispatchCustomEvent(dragDropState.draggableElement, \"vuu-dropped\");\n      }\n    }\n  }, [dragMouseMoveHandler, onDrop]);\n\n  const resumeDrag = useCallback<ResumeDragHandler>(\n    (dragDropState) => {\n      dragDropStateRef.current = dragDropState;\n      document.addEventListener(\"mousemove\", dragMouseMoveHandler, false);\n      document.addEventListener(\"mouseup\", dragMouseUpHandler, false);\n\n      return true;\n    },\n    [dragMouseMoveHandler, dragMouseUpHandler]\n  );\n\n  return {\n    measuredDropTargetsRef,\n    resumeDrag,\n  };\n};\n"],"names":[],"mappings":"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"}

package/esm/dropdown/Dropdown.css.js

@@ -0,0 +1,4 @@
+var dropdownBaseCss = ".vuuDropdown {\n  --saltIcon-margin: 2px 0 0 8px;\n  --saltButton-height: var(--vuuDropdown-height);\n  --saltButton-width : var(--vuuDropdown-width);\n\n  line-height: 0;\n  position: relative;\n\n}\n\n.vuuDropdownButton.saltButton-secondary {\n  --saltButton-background: var(--salt-editable-background);\n  --saltButton-color: var(--salt-editable-foreground);\n  --saltButton-borderStyle: solid;\n  --saltButton-borderColor: var(--salt-editable-borderColor);\n  --saltButton-borderWidth: 1px;\n}\n\n.vuuDropdown-fullWidth {\n  width: 100%;\n}\n\n.vuuDropdown-popup {\n  background: var(--salt-container-primary-background);\n  z-index: calc(var(--salt-zIndex-flyover) - 1);\n}\n\n.vuuDropdown-popup-component {\n  --vuuList-borderStyle: none;\n}\n";
+
+export { dropdownBaseCss as default };
+//# sourceMappingURL=Dropdown.css.js.map

package/esm/dropdown/Dropdown.css.js.map

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

package/esm/dropdown/Dropdown.js

@@ -0,0 +1,148 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { useForkRef } from '@salt-ds/core';
+import { forwardRef, useRef, useCallback, cloneElement } from 'react';
+import { useId } from '@vuu-ui/vuu-utils';
+import { CollectionProvider } from '../common-hooks/collectionProvider.js';
+import { itemToString } from '../common-hooks/itemToString.js';
+import { useCollectionItems } from '../common-hooks/useCollectionItems.js';
+import '../common-hooks/use-resize-observer.js';
+import '../list/common-hooks/keyUtils.js';
+import { forwardCallbackProps } from '../utils/forwardCallbackProps.js';
+import '../list/Highlighter.js';
+import '../list/ListItem.js';
+import { List } from '../list/List.js';
+import '../drag-drop/DragDropProvider.js';
+import '../drag-drop/Draggable.js';
+import 'clsx';
+import '@salt-ds/styles';
+import '@salt-ds/window';
+import { DropdownBase } from './DropdownBase.js';
+import { DropdownButton } from './DropdownButton.js';
+import { useDropdown } from './useDropdown.js';
+
+const Dropdown = forwardRef(function Dropdown2({
+  "aria-label": ariaLabel,
+  children,
+  defaultIsOpen,
+  defaultSelected,
+  id: idProp,
+  isOpen: isOpenProp,
+  itemToString: itemToString$1 = itemToString,
+  onOpenChange,
+  onSelectionChange,
+  onSelect,
+  selected: selectedProp,
+  selectionStrategy,
+  source,
+  triggerComponent,
+  ListItem,
+  ListProps: ListProps2,
+  width = 180,
+  ...props
+}, forwardedRef) {
+  const id = useId(idProp);
+  const rootRef = useRef(null);
+  const listRef = useRef(null);
+  const forkedRef = useForkRef(rootRef, forwardedRef);
+  const collectionHook = useCollectionItems({
+    id,
+    source,
+    children,
+    options: {
+      itemToString: itemToString$1
+    }
+  });
+  const {
+    highlightedIndex,
+    triggerLabel,
+    listHandlers,
+    listControlProps,
+    selected,
+    setContainerRef,
+    ...dropdownListHook
+  } = useDropdown({
+    collectionHook,
+    defaultHighlightedIndex: ListProps2?.defaultHighlightedIndex,
+    defaultIsOpen,
+    defaultSelected: collectionHook.itemToCollectionItemId(defaultSelected),
+    highlightedIndex: ListProps2?.highlightedIndex,
+    isOpen: isOpenProp,
+    itemToString: itemToString$1,
+    listRef,
+    onHighlight: ListProps2?.onHighlight,
+    onOpenChange,
+    onSelectionChange,
+    onSelect,
+    selected: collectionHook.itemToCollectionItemId(selectedProp),
+    selectionStrategy
+  });
+  const itemIdToItem = useCallback(
+    (itemId) => {
+      if (Array.isArray(itemId)) {
+        const items = itemId.map((id2) => collectionHook.itemById(id2));
+        return items;
+      } else {
+        return collectionHook.itemById(itemId);
+      }
+    },
+    [collectionHook]
+  );
+  const getTriggerComponent = () => {
+    const ariaProps = {
+      "aria-activedescendant": dropdownListHook.isOpen ? listControlProps?.["aria-activedescendant"] : void 0,
+      "aria-label": ariaLabel
+    };
+    if (triggerComponent) {
+      const ownProps = triggerComponent.props;
+      return cloneElement(
+        triggerComponent,
+        forwardCallbackProps(ownProps, {
+          ...dropdownListHook.isOpen ? listControlProps : {},
+          ...ariaProps
+        })
+      );
+    } else {
+      return /* @__PURE__ */ jsx(
+        DropdownButton,
+        {
+          label: triggerLabel,
+          ...dropdownListHook.isOpen ? listControlProps : {},
+          ...ariaProps
+        }
+      );
+    }
+  };
+  return /* @__PURE__ */ jsx(CollectionProvider, { collectionHook, children: /* @__PURE__ */ jsxs(
+    DropdownBase,
+    {
+      ...props,
+      id,
+      isOpen: dropdownListHook.isOpen,
+      onOpenChange: dropdownListHook.onOpenChange,
+      placement: ListProps2?.width === void 0 ? "below-full-width" : "below",
+      ref: forkedRef,
+      width,
+      children: [
+        getTriggerComponent(),
+        /* @__PURE__ */ jsx(
+          List,
+          {
+            ListItem,
+            itemToString: itemToString$1,
+            ...ListProps2,
+            highlightedIndex,
+            listHandlers,
+            onSelectionChange,
+            onSelect,
+            ref: setContainerRef,
+            selected: selected === void 0 ? void 0 : itemIdToItem(selected),
+            selectionStrategy
+          }
+        )
+      ]
+    }
+  ) });
+});
+
+export { Dropdown };
+//# sourceMappingURL=Dropdown.js.map

package/esm/dropdown/Dropdown.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Dropdown.js","sources":["../../src/dropdown/Dropdown.tsx"],"sourcesContent":["import { useForkRef } from \"@salt-ds/core\";\nimport {\n  cloneElement,\n  ForwardedRef,\n  forwardRef,\n  ReactElement,\n  useCallback,\n  useRef,\n} from \"react\";\n\nimport { useId } from \"@vuu-ui/vuu-utils\";\nimport {\n  CollectionProvider,\n  itemToString as defaultItemToString,\n  SelectionStrategy,\n  SelectionType,\n  useCollectionItems,\n} from \"../common-hooks\";\nimport { List, ListProps } from \"../list\";\nimport { forwardCallbackProps } from \"../utils\";\nimport { DropdownBase, MaybeChildProps } from \"./DropdownBase\";\nimport { DropdownButton } from \"./DropdownButton\";\nimport { DropdownBaseProps } from \"./dropdownTypes\";\nimport { useDropdown } from \"./useDropdown\";\n\nexport interface DropdownProps<\n  Item = string,\n  S extends SelectionStrategy = \"default\"\n> extends DropdownBaseProps,\n    Pick<\n      ListProps<Item, S>,\n      | \"ListItem\"\n      | \"defaultSelected\"\n      | \"itemToString\"\n      | \"onSelect\"\n      | \"onSelectionChange\"\n      | \"selected\"\n      | \"selectionStrategy\"\n      | \"source\"\n      | \"width\"\n    > {\n  // TODO There is overlap here between ListProps and top level List props\n  ListProps?: Omit<ListProps<Item, S>, \"ListItem\" | \"itemToString\" | \"source\">;\n}\n\nexport const Dropdown = forwardRef(function Dropdown<\n  Item = string,\n  S extends SelectionStrategy = \"default\"\n>(\n  {\n    \"aria-label\": ariaLabel,\n    children,\n    defaultIsOpen,\n    defaultSelected,\n    id: idProp,\n    isOpen: isOpenProp,\n    itemToString = defaultItemToString,\n    onOpenChange,\n    onSelectionChange,\n    onSelect,\n    selected: selectedProp,\n    selectionStrategy,\n    source,\n    triggerComponent,\n    ListItem,\n    ListProps,\n    width = 180,\n    ...props\n  }: DropdownProps<Item, S>,\n  forwardedRef: ForwardedRef<HTMLDivElement>\n) {\n  const id = useId(idProp);\n  const rootRef = useRef<HTMLDivElement>(null);\n  const listRef = useRef<HTMLDivElement>(null);\n  const forkedRef = useForkRef<HTMLDivElement>(rootRef, forwardedRef);\n\n  const collectionHook = useCollectionItems<Item>({\n    id,\n    source,\n    children,\n    options: {\n      itemToString,\n    },\n  });\n\n  const {\n    highlightedIndex,\n    triggerLabel,\n    listHandlers,\n    listControlProps,\n    selected,\n    setContainerRef,\n    ...dropdownListHook\n  } = useDropdown<Item, S>({\n    collectionHook,\n    defaultHighlightedIndex: ListProps?.defaultHighlightedIndex,\n    defaultIsOpen,\n    defaultSelected: collectionHook.itemToCollectionItemId(defaultSelected),\n    highlightedIndex: ListProps?.highlightedIndex,\n    isOpen: isOpenProp,\n    itemToString,\n    listRef,\n    onHighlight: ListProps?.onHighlight,\n    onOpenChange,\n    onSelectionChange,\n    onSelect,\n    selected: collectionHook.itemToCollectionItemId(selectedProp as any),\n    selectionStrategy,\n  });\n\n  const itemIdToItem = useCallback(\n    (itemId: string | string[]) => {\n      if (Array.isArray(itemId)) {\n        const items = itemId.map((id) => collectionHook.itemById(id));\n        return items as SelectionType<Item, S>;\n      } else {\n        return collectionHook.itemById(itemId) as SelectionType<Item, S>;\n      }\n    },\n    [collectionHook]\n  );\n\n  const getTriggerComponent = () => {\n    const ariaProps = {\n      \"aria-activedescendant\": dropdownListHook.isOpen\n        ? listControlProps?.[\"aria-activedescendant\"]\n        : undefined,\n      \"aria-label\": ariaLabel,\n    };\n    if (triggerComponent) {\n      const ownProps = triggerComponent.props as MaybeChildProps;\n      return cloneElement(\n        triggerComponent,\n        forwardCallbackProps(ownProps, {\n          ...(dropdownListHook.isOpen ? listControlProps : {}),\n          ...ariaProps,\n        })\n      );\n    } else {\n      return (\n        <DropdownButton\n          label={triggerLabel}\n          {...(dropdownListHook.isOpen ? listControlProps : {})}\n          {...ariaProps}\n        />\n      );\n    }\n  };\n  return (\n    <CollectionProvider<Item> collectionHook={collectionHook}>\n      <DropdownBase\n        {...props}\n        id={id}\n        isOpen={dropdownListHook.isOpen}\n        onOpenChange={dropdownListHook.onOpenChange}\n        placement={\n          ListProps?.width === undefined ? \"below-full-width\" : \"below\"\n        }\n        ref={forkedRef}\n        width={width}\n      >\n        {getTriggerComponent()}\n        <List<Item, S>\n          ListItem={ListItem}\n          itemToString={itemToString}\n          {...ListProps}\n          highlightedIndex={highlightedIndex}\n          listHandlers={listHandlers}\n          onSelectionChange={onSelectionChange}\n          onSelect={onSelect}\n          ref={setContainerRef}\n          selected={selected === undefined ? undefined : itemIdToItem(selected)}\n          selectionStrategy={selectionStrategy}\n        />\n      </DropdownBase>\n    </CollectionProvider>\n  );\n}) as <Item, S extends SelectionStrategy = \"default\">(\n  props: DropdownProps<Item, S> & {\n    ref?: ForwardedRef<HTMLDivElement>;\n  }\n) => ReactElement<DropdownProps<Item>>;\n"],"names":["Dropdown","itemToString","defaultItemToString","ListProps","id"],"mappings":"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"}

package/esm/dropdown/DropdownBase.js

@@ -0,0 +1,119 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { Portal, PopupComponent } from '@vuu-ui/vuu-popups';
+import { useId } from '@vuu-ui/vuu-utils';
+import { useForkRef } from '@salt-ds/core';
+import cx from 'clsx';
+import { useComponentCssInjection } from '@salt-ds/styles';
+import { useWindow } from '@salt-ds/window';
+import { forwardRef, useRef, Children, cloneElement } from 'react';
+import { forwardCallbackProps } from '../utils/forwardCallbackProps.js';
+import { useDropdownBase } from './useDropdownBase.js';
+import dropdownBaseCss from './Dropdown.css.js';
+
+const classBase = "vuuDropdown";
+const DropdownBase = forwardRef(
+  function Dropdown({
+    PopupProps,
+    "aria-labelledby": ariaLabelledByProp,
+    children,
+    className: classNameProp,
+    defaultIsOpen,
+    disabled,
+    fullWidth,
+    id: idProp,
+    isOpen: isOpenProp,
+    onKeyDown,
+    onOpenChange,
+    openKeys,
+    openOnFocus,
+    placement = "below-full-width",
+    popupWidth,
+    width,
+    ...htmlAttributes
+  }, forwardedRef) {
+    const targetWindow = useWindow();
+    useComponentCssInjection({
+      testId: "vuu-dropdown-base",
+      css: dropdownBaseCss,
+      window: targetWindow
+    });
+    const rootRef = useRef(null);
+    const className = cx(classBase, classNameProp, {
+      [`${classBase}-fullWidth`]: fullWidth,
+      [`${classBase}-disabled`]: disabled
+    });
+    const [trigger, popupComponent] = Children.toArray(
+      children
+    );
+    const id = useId(idProp);
+    const { componentProps, isOpen, popupComponentRef, triggerProps } = useDropdownBase({
+      ariaLabelledBy: ariaLabelledByProp,
+      defaultIsOpen,
+      disabled,
+      fullWidth,
+      id,
+      isOpen: isOpenProp,
+      onOpenChange,
+      onKeyDown,
+      openKeys,
+      openOnFocus,
+      popupComponent,
+      popupWidth,
+      rootRef,
+      width
+    });
+    const getTriggerComponent = () => {
+      const {
+        id: defaultId,
+        role: defaultRole,
+        ...restTriggerProps
+      } = triggerProps;
+      const {
+        id: id2 = defaultId,
+        role = defaultRole,
+        ...ownProps
+      } = trigger.props;
+      return cloneElement(
+        trigger,
+        forwardCallbackProps(ownProps, {
+          ...restTriggerProps,
+          id: id2,
+          role
+        })
+      );
+    };
+    const getPopupComponent = () => {
+      const { id: defaultId, width: width2, ...restComponentProps } = componentProps;
+      const {
+        className: className2,
+        id: id2 = defaultId,
+        width: ownWidth,
+        ...ownProps
+      } = popupComponent.props;
+      return cloneElement(popupComponent, {
+        ...ownProps,
+        ...restComponentProps,
+        className: cx(className2, `${classBase}-popup-component`),
+        id: id2,
+        ref: popupComponentRef,
+        width: placement.endsWith("full-width") ? "auto" : ownWidth ?? width2
+      });
+    };
+    const ref = useForkRef(rootRef, forwardedRef);
+    return /* @__PURE__ */ jsxs("div", { ...htmlAttributes, className, id: idProp, ref, children: [
+      getTriggerComponent(),
+      isOpen && /* @__PURE__ */ jsx(Portal, { children: /* @__PURE__ */ jsx(
+        PopupComponent,
+        {
+          ...PopupProps,
+          anchorElement: rootRef,
+          placement,
+          children: getPopupComponent()
+        }
+      ) })
+    ] });
+  }
+);
+
+export { DropdownBase };
+//# sourceMappingURL=DropdownBase.js.map

package/esm/dropdown/DropdownBase.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DropdownBase.js","sources":["../../src/dropdown/DropdownBase.tsx"],"sourcesContent":["import { PopupComponent as Popup, Portal } from \"@vuu-ui/vuu-popups\";\nimport { useId } from \"@vuu-ui/vuu-utils\";\nimport { useForkRef } from \"@salt-ds/core\";\nimport cx from \"clsx\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { Children, cloneElement, forwardRef, useRef } from \"react\";\nimport { forwardCallbackProps } from \"../utils\";\nimport { DropdownBaseProps } from \"./dropdownTypes\";\nimport { useDropdownBase } from \"./useDropdownBase\";\n\nimport dropdownBaseCss from \"./Dropdown.css\";\n\n// Any component may be passed as our trigger or popup component.\n// Define the common props that we will act on, if present,\n// so we can type them.\nexport type MaybeChildProps = {\n  className?: string;\n  id?: string;\n  role?: string;\n  width: number | string;\n};\n\nconst classBase = \"vuuDropdown\";\n\nexport const DropdownBase = forwardRef<HTMLDivElement, DropdownBaseProps>(\n  function Dropdown(\n    {\n      PopupProps,\n      \"aria-labelledby\": ariaLabelledByProp,\n      children,\n      className: classNameProp,\n      defaultIsOpen,\n      disabled,\n      fullWidth,\n      id: idProp,\n      isOpen: isOpenProp,\n      onKeyDown,\n      onOpenChange,\n      openKeys,\n      openOnFocus,\n      placement = \"below-full-width\",\n      popupWidth,\n      width,\n      ...htmlAttributes\n    },\n    forwardedRef\n  ) {\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"vuu-dropdown-base\",\n      css: dropdownBaseCss,\n      window: targetWindow,\n    });\n\n    const rootRef = useRef<HTMLDivElement>(null);\n    const className = cx(classBase, classNameProp, {\n      [`${classBase}-fullWidth`]: fullWidth,\n      [`${classBase}-disabled`]: disabled,\n    });\n    const [trigger, popupComponent] = Children.toArray(\n      children\n    ) as JSX.Element[];\n    const id = useId(idProp);\n\n    const { componentProps, isOpen, popupComponentRef, triggerProps } =\n      useDropdownBase({\n        ariaLabelledBy: ariaLabelledByProp,\n        defaultIsOpen,\n        disabled,\n        fullWidth,\n        id,\n        isOpen: isOpenProp,\n        onOpenChange,\n        onKeyDown,\n        openKeys,\n        openOnFocus,\n        popupComponent,\n        popupWidth,\n        rootRef,\n        width,\n      });\n\n    const getTriggerComponent = () => {\n      const {\n        id: defaultId,\n        role: defaultRole,\n        ...restTriggerProps\n      } = triggerProps;\n\n      const {\n        id = defaultId,\n        role = defaultRole,\n        ...ownProps\n      } = trigger.props as MaybeChildProps;\n\n      return cloneElement(\n        trigger,\n        forwardCallbackProps(ownProps, {\n          ...restTriggerProps,\n          id,\n          role,\n        })\n      );\n    };\n\n    const getPopupComponent = () => {\n      const { id: defaultId, width, ...restComponentProps } = componentProps;\n      const {\n        className,\n        id = defaultId,\n        width: ownWidth,\n        ...ownProps\n      } = popupComponent.props as MaybeChildProps;\n\n      return cloneElement(popupComponent, {\n        ...ownProps,\n        ...restComponentProps,\n        className: cx(className, `${classBase}-popup-component`),\n        id,\n        ref: popupComponentRef,\n        width: placement.endsWith(\"full-width\") ? \"auto\" : ownWidth ?? width,\n      });\n    };\n\n    const ref = useForkRef(rootRef, forwardedRef);\n\n    return (\n      <div {...htmlAttributes} className={className} id={idProp} ref={ref}>\n        {getTriggerComponent()}\n        {isOpen && (\n          <Portal>\n            <Popup\n              {...PopupProps}\n              anchorElement={rootRef}\n              placement={placement}\n            >\n              {getPopupComponent()}\n            </Popup>\n          </Portal>\n        )}\n      </div>\n    );\n  }\n);\n"],"names":["id","width","className","Popup"],"mappings":"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"}

package/esm/dropdown/DropdownButton.css.js

@@ -0,0 +1,4 @@
+var dropdownButtonCss = ".vuuDropdownButton {\n  --saltButton-background-hover: var(--salt-actionable-secondary-background);\n  --saltButton-background-active: var(--salt-actionable-secondary-background);\n  --saltButton-fontWeight: var(--salt-text-fontWeight-strong); /* TODO: Check with design */\n  --saltButton-textAlign: left;\n  --saltButton-textTransform: none;\n  --saltButton-width: 100%;\n\n  --vuu-icon-size: 16px;\n}\n\n.vuuDropdownButton:active {\n  --saltIcon-color: var(--salt-actionable-secondary-foreground);\n  --saltButton-text-color-active: var(--salt-actionable-secondary-foreground);\n}\n\n.vuuDropdownButton-fullwidth {\n  width: 100%;\n}\n\n.vuuDropdownButton-content {\n  align-items: center;\n  flex: 1;\n  width: 100%;\n  display: flex;\n  white-space: nowrap;\n}\n\n.vuuDropdownButton-buttonLabel {\n  display: inline-block;\n  letter-spacing: 0;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  width: 100%;\n}\n\n.vuuDropdownButton-formField.saltButton:focus,\n.vuuDropdownButton-formField.saltButton:focus-visible {\n  outline: none;\n}\n";
+
+export { dropdownButtonCss as default };
+//# sourceMappingURL=DropdownButton.css.js.map

package/esm/dropdown/DropdownButton.css.js.map

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

package/esm/dropdown/DropdownButton.js

@@ -0,0 +1,70 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { Button } from '@salt-ds/core';
+import { useComponentCssInjection } from '@salt-ds/styles';
+import { useWindow } from '@salt-ds/window';
+import cx from 'clsx';
+import { forwardRef } from 'react';
+import dropdownButtonCss from './DropdownButton.css.js';
+
+const classBase = "vuuDropdownButton";
+const DropdownButton = forwardRef(function DropdownButton2({
+  ariaHideOptionRole,
+  className,
+  disabled,
+  icon = "chevron-down",
+  isOpen,
+  label,
+  labelId,
+  fullWidth,
+  posInSet,
+  setSize,
+  labelAriaAttributes,
+  ...rest
+}, ref) {
+  const targetWindow = useWindow();
+  useComponentCssInjection({
+    testId: "vuu-dropdown-button",
+    css: dropdownButtonCss,
+    window: targetWindow
+  });
+  return /* @__PURE__ */ jsx(
+    Button,
+    {
+      className: cx(
+        classBase,
+        {
+          [`${classBase}-fullWidth`]: fullWidth
+        },
+        className
+      ),
+      disabled,
+      variant: "secondary",
+      ...rest,
+      ref,
+      children: /* @__PURE__ */ jsxs("div", { className: `${classBase}-content`, children: [
+        /* @__PURE__ */ jsx(
+          "span",
+          {
+            "aria-hidden": ariaHideOptionRole ? "true" : void 0,
+            ...labelAriaAttributes,
+            className: `${classBase}-buttonLabel`,
+            id: labelId,
+            role: "option",
+            children: label
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "span",
+          {
+            className: `${classBase}-buttonIcon`,
+            "data-icon": icon,
+            "aria-hidden": "true"
+          }
+        )
+      ] })
+    }
+  );
+});
+
+export { DropdownButton };
+//# sourceMappingURL=DropdownButton.js.map

package/esm/dropdown/DropdownButton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DropdownButton.js","sources":["../../src/dropdown/DropdownButton.tsx"],"sourcesContent":["import { Button, ButtonProps } from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport cx from \"clsx\";\nimport { AriaAttributes, ForwardedRef, forwardRef } from \"react\";\n\nimport dropdownButtonCss from \"./DropdownButton.css\";\n\nexport interface DropdownButtonProps extends ButtonProps {\n  /**\n   * Replace the default Icon component\n   */\n  icon?: string;\n  /**\n   * Whether the dropdown button should hide role='option' via 'aria-hidden'\n   */\n  ariaHideOptionRole?: boolean;\n  /**\n   * If, `true`, the Dropdown button will occupy the full width of it's container\n   */\n  fullWidth?: boolean;\n  /**\n   * Is the dropdown list open\n   */\n  isOpen?: boolean;\n  /**\n   * Label for the dropdown button\n   */\n  label?: string;\n  /**\n   * Id for the label. This is needed for ARIA attributes.\n   */\n  labelId?: string;\n  /**\n   * When the dropdown is collapsed this value is set as aria-posinset on the span containing the selected value\n   * **/\n  posInSet?: number;\n  /**\n   * When the dropdown is collapsed this value is set as aria-setsize on the span containing the selected value\n   * **/\n  setSize?: number;\n  /**\n   *\n   * **/\n  labelAriaAttributes?: Pick<\n    AriaAttributes,\n    \"aria-posinset\" | \"aria-setsize\" | \"aria-selected\"\n  >;\n}\n\nconst classBase = \"vuuDropdownButton\";\n\nexport const DropdownButton = forwardRef(function DropdownButton(\n  {\n    ariaHideOptionRole,\n    className,\n    disabled,\n    icon = \"chevron-down\",\n    isOpen,\n    label,\n    labelId,\n    fullWidth,\n    posInSet,\n    setSize,\n    labelAriaAttributes,\n    ...rest\n  }: DropdownButtonProps,\n  ref: ForwardedRef<HTMLButtonElement>\n) {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"vuu-dropdown-button\",\n    css: dropdownButtonCss,\n    window: targetWindow,\n  });\n\n  // FIXME: use polymorphic button\n  // We don't want the 'button' tag to be shown in the DOM to trigger some accessibility testing\n  // tool's false alarm on role of 'listbox'\n  return (\n    <Button\n      className={cx(\n        classBase,\n        {\n          [`${classBase}-fullWidth`]: fullWidth,\n        },\n        className\n      )}\n      disabled={disabled}\n      variant=\"secondary\"\n      {...rest}\n      ref={ref}\n    >\n      <div className={`${classBase}-content`}>\n        <span\n          // 'hidden' so that screen reader won't be confused the additional 'option' which is just a label\n          aria-hidden={ariaHideOptionRole ? \"true\" : undefined}\n          {...labelAriaAttributes}\n          className={`${classBase}-buttonLabel`}\n          id={labelId}\n          // 'option' role here is to suppress accessibility testing tool warning about 'listbox' missing children role.\n          role=\"option\"\n        >\n          {label}\n        </span>\n        <span\n          className={`${classBase}-buttonIcon`}\n          data-icon={icon}\n          aria-hidden=\"true\"\n        />\n      </div>\n    </Button>\n  );\n});\n"],"names":["DropdownButton"],"mappings":";;;;;;;;AAkDA,MAAM,SAAY,GAAA,mBAAA,CAAA;AAEL,MAAA,cAAA,GAAiB,UAAW,CAAA,SAASA,eAChD,CAAA;AAAA,EACE,kBAAA;AAAA,EACA,SAAA;AAAA,EACA,QAAA;AAAA,EACA,IAAO,GAAA,cAAA;AAAA,EACP,MAAA;AAAA,EACA,KAAA;AAAA,EACA,OAAA;AAAA,EACA,SAAA;AAAA,EACA,QAAA;AAAA,EACA,OAAA;AAAA,EACA,mBAAA;AAAA,EACA,GAAG,IAAA;AACL,CAAA,EACA,GACA,EAAA;AACA,EAAA,MAAM,eAAe,SAAU,EAAA,CAAA;AAC/B,EAAyB,wBAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,qBAAA;AAAA,IACR,GAAK,EAAA,iBAAA;AAAA,IACL,MAAQ,EAAA,YAAA;AAAA,GACT,CAAA,CAAA;AAKD,EACE,uBAAA,GAAA;AAAA,IAAC,MAAA;AAAA,IAAA;AAAA,MACC,SAAW,EAAA,EAAA;AAAA,QACT,SAAA;AAAA,QACA;AAAA,UACE,CAAC,CAAA,EAAG,SAAS,CAAA,UAAA,CAAY,GAAG,SAAA;AAAA,SAC9B;AAAA,QACA,SAAA;AAAA,OACF;AAAA,MACA,QAAA;AAAA,MACA,OAAQ,EAAA,WAAA;AAAA,MACP,GAAG,IAAA;AAAA,MACJ,GAAA;AAAA,MAEA,QAAC,kBAAA,IAAA,CAAA,KAAA,EAAA,EAAI,SAAW,EAAA,CAAA,EAAG,SAAS,CAC1B,QAAA,CAAA,EAAA,QAAA,EAAA;AAAA,wBAAA,GAAA;AAAA,UAAC,MAAA;AAAA,UAAA;AAAA,YAEC,aAAA,EAAa,qBAAqB,MAAS,GAAA,KAAA,CAAA;AAAA,YAC1C,GAAG,mBAAA;AAAA,YACJ,SAAA,EAAW,GAAG,SAAS,CAAA,YAAA,CAAA;AAAA,YACvB,EAAI,EAAA,OAAA;AAAA,YAEJ,IAAK,EAAA,QAAA;AAAA,YAEJ,QAAA,EAAA,KAAA;AAAA,WAAA;AAAA,SACH;AAAA,wBACA,GAAA;AAAA,UAAC,MAAA;AAAA,UAAA;AAAA,YACC,SAAA,EAAW,GAAG,SAAS,CAAA,WAAA,CAAA;AAAA,YACvB,WAAW,EAAA,IAAA;AAAA,YACX,aAAY,EAAA,MAAA;AAAA,WAAA;AAAA,SACd;AAAA,OACF,EAAA,CAAA;AAAA,KAAA;AAAA,GACF,CAAA;AAEJ,CAAC;;;;"}

package/esm/dropdown/useClickAway.js

@@ -0,0 +1,64 @@
+import { queryClosest } from '@vuu-ui/vuu-utils';
+import { useRef, useEffect } from 'react';
+
+const NO_HANDLERS = [];
+const targetWithinSubPopup = (source, target) => {
+  if (source === null) {
+    return false;
+  }
+  const sourcePortal = queryClosest(source, ".vuuPortal");
+  const targetPortal = queryClosest(target, ".vuuPortal");
+  if (sourcePortal && targetPortal) {
+    const targetWithId = targetPortal.querySelector("[id]");
+    const targetOwner = sourcePortal.querySelector(
+      `[aria-owns="${targetWithId?.id}"]`
+    );
+    return targetOwner !== null;
+  }
+  return false;
+};
+const useClickAway = ({
+  popperRef,
+  rootRef,
+  isOpen,
+  onClose
+}) => {
+  const openRef = useRef(isOpen);
+  useEffect(() => {
+    openRef.current = isOpen;
+  }, [isOpen]);
+  useEffect(() => {
+    const [clickHandler, escapeKeyHandler] = isOpen ? [
+      (evt) => {
+        console.log("click away");
+        const targetElement = evt.target;
+        if (!popperRef.current?.contains(targetElement) && !rootRef.current?.contains(targetElement)) {
+          if (!targetWithinSubPopup(popperRef.current, targetElement)) {
+            onClose("click-away");
+          }
+        }
+      },
+      (e) => {
+        if (e.key === "Escape") {
+          if (openRef.current) {
+            onClose("Escape");
+            e.stopPropagation();
+          }
+        }
+      }
+    ] : NO_HANDLERS;
+    if (clickHandler && escapeKeyHandler) {
+      document.body.addEventListener("mousedown", clickHandler, true);
+      document.body.addEventListener("keydown", escapeKeyHandler, true);
+    }
+    return () => {
+      if (clickHandler && escapeKeyHandler) {
+        document.body.removeEventListener("mousedown", clickHandler, true);
+        document.body.removeEventListener("keydown", escapeKeyHandler, true);
+      }
+    };
+  }, [isOpen, onClose, popperRef, rootRef]);
+};
+
+export { targetWithinSubPopup, useClickAway };
+//# sourceMappingURL=useClickAway.js.map

package/esm/dropdown/useClickAway.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useClickAway.js","sources":["../../src/dropdown/useClickAway.ts"],"sourcesContent":["import { queryClosest } from \"@vuu-ui/vuu-utils\";\nimport { RefObject, useEffect, useRef } from \"react\";\nimport { CloseReason } from \"./dropdownTypes\";\n\nexport type ClickawayHook = (props: {\n  popperRef: RefObject<HTMLElement>;\n  rootRef: RefObject<HTMLElement>;\n  isOpen: boolean;\n  onClose: (reason: CloseReason) => void;\n}) => void;\n\ntype MouseEventHandler = (e: MouseEvent) => void;\ntype KeyboardEventHandler = (e: KeyboardEvent) => void;\n\nconst NO_HANDLERS: [MouseEventHandler?, KeyboardEventHandler?] = [];\n\nexport const targetWithinSubPopup = (\n  source: HTMLElement | null,\n  target: HTMLElement\n) => {\n  if (source === null) {\n    return false;\n  }\n\n  const sourcePortal = queryClosest(source, \".vuuPortal\");\n  const targetPortal = queryClosest(target, \".vuuPortal\");\n\n  if (sourcePortal && targetPortal) {\n    // If we have two portals, this can only be a popup launched from a popup.\n    // There will be a relationship, described by aria attributes.\n    const targetWithId = targetPortal.querySelector(\"[id]\");\n    const targetOwner = sourcePortal.querySelector(\n      `[aria-owns=\"${targetWithId?.id}\"]`\n    );\n    return targetOwner !== null;\n  }\n\n  return false;\n};\n\nexport const useClickAway: ClickawayHook = ({\n  popperRef,\n  rootRef,\n  isOpen,\n  onClose,\n}) => {\n  //TODO usePropBackedRef\n  const openRef = useRef(isOpen);\n  useEffect(() => {\n    openRef.current = isOpen;\n  }, [isOpen]);\n\n  useEffect(() => {\n    const [clickHandler, escapeKeyHandler] = isOpen\n      ? [\n          (evt: MouseEvent) => {\n            console.log(\"click away\");\n            const targetElement = evt.target as HTMLElement;\n            if (\n              !popperRef.current?.contains(targetElement) &&\n              !rootRef.current?.contains(targetElement)\n            ) {\n              if (!targetWithinSubPopup(popperRef.current, targetElement)) {\n                onClose(\"click-away\");\n              }\n            }\n          },\n          (e: KeyboardEvent) => {\n            if (e.key === \"Escape\") {\n              if (openRef.current) {\n                onClose(\"Escape\");\n                e.stopPropagation();\n              }\n            }\n          },\n        ]\n      : NO_HANDLERS;\n\n    if (clickHandler && escapeKeyHandler) {\n      document.body.addEventListener(\"mousedown\", clickHandler, true);\n      document.body.addEventListener(\"keydown\", escapeKeyHandler, true);\n    }\n\n    return () => {\n      if (clickHandler && escapeKeyHandler) {\n        document.body.removeEventListener(\"mousedown\", clickHandler, true);\n        document.body.removeEventListener(\"keydown\", escapeKeyHandler, true);\n      }\n    };\n  }, [isOpen, onClose, popperRef, rootRef]);\n};\n"],"names":[],"mappings":";;;AAcA,MAAM,cAA2D,EAAC,CAAA;AAErD,MAAA,oBAAA,GAAuB,CAClC,MAAA,EACA,MACG,KAAA;AACH,EAAA,IAAI,WAAW,IAAM,EAAA;AACnB,IAAO,OAAA,KAAA,CAAA;AAAA,GACT;AAEA,EAAM,MAAA,YAAA,GAAe,YAAa,CAAA,MAAA,EAAQ,YAAY,CAAA,CAAA;AACtD,EAAM,MAAA,YAAA,GAAe,YAAa,CAAA,MAAA,EAAQ,YAAY,CAAA,CAAA;AAEtD,EAAA,IAAI,gBAAgB,YAAc,EAAA;AAGhC,IAAM,MAAA,YAAA,GAAe,YAAa,CAAA,aAAA,CAAc,MAAM,CAAA,CAAA;AACtD,IAAA,MAAM,cAAc,YAAa,CAAA,aAAA;AAAA,MAC/B,CAAA,YAAA,EAAe,cAAc,EAAE,CAAA,EAAA,CAAA;AAAA,KACjC,CAAA;AACA,IAAA,OAAO,WAAgB,KAAA,IAAA,CAAA;AAAA,GACzB;AAEA,EAAO,OAAA,KAAA,CAAA;AACT,EAAA;AAEO,MAAM,eAA8B,CAAC;AAAA,EAC1C,SAAA;AAAA,EACA,OAAA;AAAA,EACA,MAAA;AAAA,EACA,OAAA;AACF,CAAM,KAAA;AAEJ,EAAM,MAAA,OAAA,GAAU,OAAO,MAAM,CAAA,CAAA;AAC7B,EAAA,SAAA,CAAU,MAAM;AACd,IAAA,OAAA,CAAQ,OAAU,GAAA,MAAA,CAAA;AAAA,GACpB,EAAG,CAAC,MAAM,CAAC,CAAA,CAAA;AAEX,EAAA,SAAA,CAAU,MAAM;AACd,IAAA,MAAM,CAAC,YAAA,EAAc,gBAAgB,CAAA,GAAI,MACrC,GAAA;AAAA,MACE,CAAC,GAAoB,KAAA;AACnB,QAAA,OAAA,CAAQ,IAAI,YAAY,CAAA,CAAA;AACxB,QAAA,MAAM,gBAAgB,GAAI,CAAA,MAAA,CAAA;AAC1B,QACE,IAAA,CAAC,SAAU,CAAA,OAAA,EAAS,QAAS,CAAA,aAAa,CAC1C,IAAA,CAAC,OAAQ,CAAA,OAAA,EAAS,QAAS,CAAA,aAAa,CACxC,EAAA;AACA,UAAA,IAAI,CAAC,oBAAA,CAAqB,SAAU,CAAA,OAAA,EAAS,aAAa,CAAG,EAAA;AAC3D,YAAA,OAAA,CAAQ,YAAY,CAAA,CAAA;AAAA,WACtB;AAAA,SACF;AAAA,OACF;AAAA,MACA,CAAC,CAAqB,KAAA;AACpB,QAAI,IAAA,CAAA,CAAE,QAAQ,QAAU,EAAA;AACtB,UAAA,IAAI,QAAQ,OAAS,EAAA;AACnB,YAAA,OAAA,CAAQ,QAAQ,CAAA,CAAA;AAChB,YAAA,CAAA,CAAE,eAAgB,EAAA,CAAA;AAAA,WACpB;AAAA,SACF;AAAA,OACF;AAAA,KAEF,GAAA,WAAA,CAAA;AAEJ,IAAA,IAAI,gBAAgB,gBAAkB,EAAA;AACpC,MAAA,QAAA,CAAS,IAAK,CAAA,gBAAA,CAAiB,WAAa,EAAA,YAAA,EAAc,IAAI,CAAA,CAAA;AAC9D,MAAA,QAAA,CAAS,IAAK,CAAA,gBAAA,CAAiB,SAAW,EAAA,gBAAA,EAAkB,IAAI,CAAA,CAAA;AAAA,KAClE;AAEA,IAAA,OAAO,MAAM;AACX,MAAA,IAAI,gBAAgB,gBAAkB,EAAA;AACpC,QAAA,QAAA,CAAS,IAAK,CAAA,mBAAA,CAAoB,WAAa,EAAA,YAAA,EAAc,IAAI,CAAA,CAAA;AACjE,QAAA,QAAA,CAAS,IAAK,CAAA,mBAAA,CAAoB,SAAW,EAAA,gBAAA,EAAkB,IAAI,CAAA,CAAA;AAAA,OACrE;AAAA,KACF,CAAA;AAAA,KACC,CAAC,MAAA,EAAQ,OAAS,EAAA,SAAA,EAAW,OAAO,CAAC,CAAA,CAAA;AAC1C;;;;"}