@vuu-ui/vuu-ui-controls 0.13.2 → 0.13.4

package/esm/context-panel-provider/ContextPanelProvider.js

@@ -0,0 +1,51 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { createContext, useState, useCallback, useContext } from 'react';
+import { useLayoutOperation, isUnconfiguredProperty, layoutFromJson } from '@vuu-ui/vuu-layout';
+import { Dialog, DialogContent } from '@salt-ds/core';
+
+const ContextPanelContext = createContext({
+  showContextPanel: () => {
+    console.warn(
+      "[ContextPanelContext] no implementation for showContextPanel, you need to add a ContextPanelProvider"
+    );
+  }
+});
+const ContextPanelProvider = ({
+  children,
+  showContextPanel: showContextPanelProp
+}) => {
+  const { showComponentInContextPanel } = useLayoutOperation();
+  const [dialog, setDialog] = useState(null);
+  const showContextPanel = useCallback(
+    (componentType, title, props) => {
+      if (showContextPanelProp) {
+        console.log(`show context panel will use method from prop`);
+      } else if (!isUnconfiguredProperty(showComponentInContextPanel)) {
+        showComponentInContextPanel(
+          { type: componentType, props },
+          title
+        );
+      } else {
+        const component = layoutFromJson(
+          { type: componentType, props },
+          ""
+        );
+        setDialog(
+          /* @__PURE__ */ jsx(Dialog, { open: true, children: /* @__PURE__ */ jsx(DialogContent, { children: component }) })
+        );
+      }
+    },
+    [showComponentInContextPanel, showContextPanelProp]
+  );
+  return /* @__PURE__ */ jsxs(ContextPanelContext.Provider, { value: { showContextPanel }, children: [
+    children,
+    dialog
+  ] });
+};
+function useContextPanel() {
+  const { showContextPanel } = useContext(ContextPanelContext);
+  return showContextPanel;
+}
+
+export { ContextPanelContext, ContextPanelProvider, useContextPanel };
+//# sourceMappingURL=ContextPanelProvider.js.map

package/esm/context-panel-provider/ContextPanelProvider.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ContextPanelProvider.js","sources":["../../src/context-panel-provider/ContextPanelProvider.tsx"],"sourcesContent":["import {\n  createContext,\n  ReactElement,\n  ReactNode,\n  useCallback,\n  useContext,\n  useState,\n} from \"react\";\nimport {\n  isUnconfiguredProperty,\n  layoutFromJson,\n  useLayoutOperation,\n} from \"@vuu-ui/vuu-layout\";\nimport { LayoutJSON } from \"@vuu-ui/vuu-utils\";\nimport { Dialog, DialogContent } from \"@salt-ds/core\";\n\nexport type ShowContextPanel = (\n  componentType: string,\n  title: string,\n  componentProps: unknown,\n) => void;\n\nexport interface ContextPanelProps {\n  showContextPanel: ShowContextPanel;\n}\n\nexport const ContextPanelContext = createContext<ContextPanelProps>({\n  showContextPanel: () => {\n    console.warn(\n      \"[ContextPanelContext] no implementation for showContextPanel, you need to add a ContextPanelProvider\",\n    );\n  },\n});\n\nexport const ContextPanelProvider = ({\n  children,\n  showContextPanel: showContextPanelProp,\n}: Partial<ContextPanelProps> & {\n  children: ReactNode;\n}) => {\n  const { showComponentInContextPanel } = useLayoutOperation();\n  const [dialog, setDialog] = useState<ReactElement | null>(null);\n\n  const showContextPanel = useCallback<ShowContextPanel>(\n    (componentType, title, props) => {\n      if (showContextPanelProp) {\n        console.log(`show context panel will use method from prop`);\n      } else if (!isUnconfiguredProperty(showComponentInContextPanel)) {\n        showComponentInContextPanel(\n          { type: componentType, props } as LayoutJSON,\n          title,\n        );\n      } else {\n        const component = layoutFromJson(\n          { type: componentType, props } as LayoutJSON,\n          \"\",\n        );\n        setDialog(\n          <Dialog open={true}>\n            <DialogContent>{component}</DialogContent>\n          </Dialog>,\n        );\n      }\n    },\n    [showComponentInContextPanel, showContextPanelProp],\n  );\n\n  return (\n    <ContextPanelContext.Provider value={{ showContextPanel }}>\n      {children}\n      {dialog}\n    </ContextPanelContext.Provider>\n  );\n};\n\nexport function useContextPanel() {\n  const { showContextPanel } = useContext(ContextPanelContext);\n  return showContextPanel;\n}\n"],"names":[],"mappings":";;;;;AA0BO,MAAM,sBAAsB,aAAiC,CAAA;AAAA,EAClE,kBAAkB,MAAM;AACtB,IAAQ,OAAA,CAAA,IAAA;AAAA,MACN;AAAA,KACF;AAAA;AAEJ,CAAC;AAEM,MAAM,uBAAuB,CAAC;AAAA,EACnC,QAAA;AAAA,EACA,gBAAkB,EAAA;AACpB,CAEM,KAAA;AACJ,EAAM,MAAA,EAAE,2BAA4B,EAAA,GAAI,kBAAmB,EAAA;AAC3D,EAAA,MAAM,CAAC,MAAA,EAAQ,SAAS,CAAA,GAAI,SAA8B,IAAI,CAAA;AAE9D,EAAA,MAAM,gBAAmB,GAAA,WAAA;AAAA,IACvB,CAAC,aAAe,EAAA,KAAA,EAAO,KAAU,KAAA;AAC/B,MAAA,IAAI,oBAAsB,EAAA;AACxB,QAAA,OAAA,CAAQ,IAAI,CAA8C,4CAAA,CAAA,CAAA;AAAA,OACjD,MAAA,IAAA,CAAC,sBAAuB,CAAA,2BAA2B,CAAG,EAAA;AAC/D,QAAA,2BAAA;AAAA,UACE,EAAE,IAAM,EAAA,aAAA,EAAe,KAAM,EAAA;AAAA,UAC7B;AAAA,SACF;AAAA,OACK,MAAA;AACL,QAAA,MAAM,SAAY,GAAA,cAAA;AAAA,UAChB,EAAE,IAAM,EAAA,aAAA,EAAe,KAAM,EAAA;AAAA,UAC7B;AAAA,SACF;AACA,QAAA,SAAA;AAAA,8BACG,MAAO,EAAA,EAAA,IAAA,EAAM,MACZ,QAAC,kBAAA,GAAA,CAAA,aAAA,EAAA,EAAe,qBAAU,CAC5B,EAAA;AAAA,SACF;AAAA;AACF,KACF;AAAA,IACA,CAAC,6BAA6B,oBAAoB;AAAA,GACpD;AAEA,EAAA,4BACG,mBAAoB,CAAA,QAAA,EAApB,EAA6B,KAAO,EAAA,EAAE,kBACpC,EAAA,QAAA,EAAA;AAAA,IAAA,QAAA;AAAA,IACA;AAAA,GACH,EAAA,CAAA;AAEJ;AAEO,SAAS,eAAkB,GAAA;AAChC,EAAA,MAAM,EAAE,gBAAA,EAAqB,GAAA,UAAA,CAAW,mBAAmB,CAAA;AAC3D,EAAO,OAAA,gBAAA;AACT;;;;"}

package/esm/index.js

@@ -4,9 +4,6 @@ export { useCalendar } from './calendar/useCalendar.js';
 export { isRangeOrOffsetSelectionValue, isRangeOrOffsetSelectionWithStartDate, useSelectionCalendar, useSelectionDay } from './calendar/useSelection.js';
 export { ColumnPicker } from './column-picker/ColumnPicker.js';
 export { ColumnSearch } from './column-picker/ColumnSearch.js';
-export { CollectionContext, CollectionProvider, useCollection } from './common-hooks/collectionProvider.js';
-export { itemToString } from './common-hooks/itemToString.js';
-export { useCollectionItems } from './common-hooks/useCollectionItems.js';
 export { useControlled } from './common-hooks/useControlled.js';
 export { HeightOnly, WidthHeight, WidthOnly, useResizeObserver } from './common-hooks/use-resize-observer.js';
 export { allowMultipleSelection, deselectionIsAllowed, getFirstSelectedItem, hasSelection, isMultiSelection, isSingleSelection, selectionIsDisallowed } from './common-hooks/selectionTypes.js';
@@ -27,24 +24,6 @@ export { IconButton } from './icon-button/IconButton.js';
 export { ToggleIconButton } from './icon-button/ToggleIconButton.js';
 export { TablePicker } from './instrument-picker/TablePicker.js';
 export { TableSearch } from './table-search/TableSearch.js';
-export { ArrowDown, ArrowLeft, ArrowRight, ArrowUp, End, Enter, Escape, Home, PageDown, PageUp, Space, isCharacterKey, isNavigationKey } from './list/common-hooks/keyUtils.js';
-export { useCollapsibleGroups } from './list/common-hooks/useCollapsibleGroups.js';
-export { closestListItemId, closestListItemIndex, listItemElement, listItemId, listItemIndex } from './list/common-hooks/list-dom-utils.js';
-export { useImperativeScrollingAPI } from './list/common-hooks/useImperativeScrollingAPI.js';
-export { LIST_FOCUS_VISIBLE, useKeyboardNavigation } from './list/common-hooks/useKeyboardNavigation.js';
-export { CHECKBOX, GROUP_SELECTION_CASCADE, GROUP_SELECTION_NONE, GROUP_SELECTION_SINGLE, groupSelectionEnabled, useSelection } from './common-hooks/useSelection.js';
-export { useTypeahead } from './list/common-hooks/useTypeahead.js';
-export { useViewportTracking } from './list/common-hooks/useViewportTracking.js';
-export { childIsGroup, childItems, countChildItems, getChildLabel, getChildNodes, isDisabled, isFocusable, isGroupNode, isHeader, isParentPath, replaceCollectionItem, sourceItemHasProp, sourceItems } from './list/common-hooks/utils/collection-item-utils.js';
-export { getDefaultFilter, getDefaultFilterRegex } from './list/common-hooks/utils/filter-utils.js';
-export { isSelected } from './list/common-hooks/utils/isSelected.js';
-export { Highlighter } from './list/Highlighter.js';
-export { ListItem, ListItemProxy } from './list/ListItem.js';
-export { List } from './list/List.js';
-export { ListItemHeader } from './list/ListItemHeader.js';
-export { ListItemGroup } from './list/ListItemGroup.js';
-export { useList } from './list/useList.js';
-export { RadioIcon } from './list/RadioIcon.js';
 export { MeasuredContainer } from './measured-container/MeasuredContainer.js';
 export { reduceSizeHeight, useMeasuredContainer } from './measured-container/useMeasuredContainer.js';
 export { OverflowContainer } from './overflow-container/OverflowContainer.js';
@@ -70,4 +49,6 @@ export { forwardCallbackProps } from './utils/forwardCallbackProps.js';
 export { VuuDatePicker } from './vuu-date-picker/VuuDatePicker.js';
 export { VuuInput } from './vuu-input/VuuInput.js';
 export { VuuTypeaheadInput } from './vuu-typeahead-input/VuuTypeaheadInput.js';
+export { ContextPanelProvider, useContextPanel } from './context-panel-provider/ContextPanelProvider.js';
+export { SortableList, SortableOption } from './sortable-list/SortableList.js';
 //# sourceMappingURL=index.js.map

package/esm/index.js.map

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

package/esm/sortable-list/SortableList.js

@@ -0,0 +1,35 @@
+import { jsx } from 'react/jsx-runtime';
+import { Option, ListBox } from '@salt-ds/core';
+import { useSortable } from '@dnd-kit/react/sortable';
+import { DragDropProvider } from '@dnd-kit/react';
+import { useRef, useCallback } from 'react';
+
+const SortableOption = ({
+  id,
+  index,
+  value,
+  ...optionProps
+}) => {
+  const { ref } = useSortable({ id, index });
+  return /* @__PURE__ */ jsx(Option, { ...optionProps, id, ref, value });
+};
+const SortableList = ({
+  children,
+  onReorderListItems,
+  ...listBoxProps
+}) => {
+  const listRef = useRef(null);
+  const handleDragEnd = useCallback(() => {
+    setTimeout(() => {
+      const listItems = listRef.current?.querySelectorAll(".saltOption");
+      if (listItems) {
+        const items = Array.from(listItems).map(({ id }) => id);
+        onReorderListItems?.(items);
+      }
+    }, 300);
+  }, [onReorderListItems]);
+  return /* @__PURE__ */ jsx(DragDropProvider, { onDragEnd: handleDragEnd, children: /* @__PURE__ */ jsx(ListBox, { ...listBoxProps, ref: listRef, children }) });
+};
+
+export { SortableList, SortableOption };
+//# sourceMappingURL=SortableList.js.map

package/esm/sortable-list/SortableList.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SortableList.js","sources":["../../src/sortable-list/SortableList.tsx"],"sourcesContent":["import { ListBox, ListBoxProps, Option, OptionProps } from \"@salt-ds/core\";\nimport { useSortable } from \"@dnd-kit/react/sortable\";\nimport { DragDropProvider } from \"@dnd-kit/react\";\nimport { useCallback, useRef } from \"react\";\n\nexport const SortableOption = ({\n  id,\n  index,\n  value,\n  ...optionProps\n}: OptionProps & { id: string; index: number }) => {\n  const { ref } = useSortable({ id, index });\n  return <Option {...optionProps} id={id} ref={ref} value={value} />;\n};\n\nexport const SortableList = ({\n  children,\n  onReorderListItems,\n  ...listBoxProps\n}: ListBoxProps & {\n  onReorderListItems?: (listItems: unknown[]) => void;\n}) => {\n  const listRef = useRef<HTMLDivElement>(null);\n  const handleDragEnd = useCallback(() => {\n    setTimeout(() => {\n      const listItems = listRef.current?.querySelectorAll(\".saltOption\");\n      if (listItems) {\n        const items = Array.from(listItems).map(({ id }) => id);\n        onReorderListItems?.(items);\n      }\n    }, 300);\n  }, [onReorderListItems]);\n\n  return (\n    <DragDropProvider onDragEnd={handleDragEnd}>\n      <ListBox {...listBoxProps} ref={listRef}>\n        {children}\n      </ListBox>\n    </DragDropProvider>\n  );\n};\n"],"names":[],"mappings":";;;;;;AAKO,MAAM,iBAAiB,CAAC;AAAA,EAC7B,EAAA;AAAA,EACA,KAAA;AAAA,EACA,KAAA;AAAA,EACA,GAAG;AACL,CAAmD,KAAA;AACjD,EAAA,MAAM,EAAE,GAAI,EAAA,GAAI,YAAY,EAAE,EAAA,EAAI,OAAO,CAAA;AACzC,EAAA,2BAAQ,MAAQ,EAAA,EAAA,GAAG,WAAa,EAAA,EAAA,EAAQ,KAAU,KAAc,EAAA,CAAA;AAClE;AAEO,MAAM,eAAe,CAAC;AAAA,EAC3B,QAAA;AAAA,EACA,kBAAA;AAAA,EACA,GAAG;AACL,CAEM,KAAA;AACJ,EAAM,MAAA,OAAA,GAAU,OAAuB,IAAI,CAAA;AAC3C,EAAM,MAAA,aAAA,GAAgB,YAAY,MAAM;AACtC,IAAA,UAAA,CAAW,MAAM;AACf,MAAA,MAAM,SAAY,GAAA,OAAA,CAAQ,OAAS,EAAA,gBAAA,CAAiB,aAAa,CAAA;AACjE,MAAA,IAAI,SAAW,EAAA;AACb,QAAM,MAAA,KAAA,GAAQ,KAAM,CAAA,IAAA,CAAK,SAAS,CAAA,CAAE,IAAI,CAAC,EAAE,EAAG,EAAA,KAAM,EAAE,CAAA;AACtD,QAAA,kBAAA,GAAqB,KAAK,CAAA;AAAA;AAC5B,OACC,GAAG,CAAA;AAAA,GACR,EAAG,CAAC,kBAAkB,CAAC,CAAA;AAEvB,EACE,uBAAA,GAAA,CAAC,gBAAiB,EAAA,EAAA,SAAA,EAAW,aAC3B,EAAA,QAAA,kBAAA,GAAA,CAAC,OAAS,EAAA,EAAA,GAAG,YAAc,EAAA,GAAA,EAAK,OAC7B,EAAA,QAAA,EACH,CACF,EAAA,CAAA;AAEJ;;;;"}

package/esm/toolbar/Toolbar.js.map

@@ -1 +1 @@
-{"version":3,"file":"Toolbar.js","sources":["../../src/toolbar/Toolbar.tsx"],"sourcesContent":["import { asReactElements, useId } from \"@vuu-ui/vuu-utils\";\nimport cx from \"clsx\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport React, { useMemo, useRef } from \"react\";\nimport {\n  OverflowContainer,\n  OverflowContainerProps,\n} from \"../overflow-container\";\nimport { useToolbar } from \"./useToolbar\";\nimport { forwardCallbackProps } from \"../utils\";\n\nimport toolbarCss from \"./Toolbar.css\";\nimport {\n  SelectionStrategy,\n  SpecialKeyMultipleSelection,\n} from \"../common-hooks\";\n\nconst classBase = \"vuuToolbar\";\n\nexport type ActiveItemChangeHandler = (itemIndex: number[]) => void;\n\nexport type NavigationOutOfBoundsHandler = (direction: \"start\" | \"end\") => void;\nexport interface ToolbarProps extends OverflowContainerProps {\n  activeItemIndex?: number[];\n  alignItems?: \"start\" | \"center\" | \"end\";\n  defaultActiveItemIndex?: number[];\n  onActiveChange?: ActiveItemChangeHandler;\n  /**\n   * Indicates that user has used Arrow key navigation to move beyond the\n   * last or before the first item. A higher level component may want to\n   * use this to implement a seamless navigation across components.\n   */\n  onNavigateOutOfBounds?: NavigationOutOfBoundsHandler;\n  selectionStrategy?: SelectionStrategy | SpecialKeyMultipleSelection;\n  showSeparators?: boolean;\n}\n\nexport const Toolbar = ({\n  activeItemIndex: activeItemIndexProp,\n  alignItems = \"start\",\n  defaultActiveItemIndex,\n  children,\n  className,\n  id: idProp,\n  onActiveChange,\n  onNavigateOutOfBounds,\n  orientation = \"horizontal\",\n  selectionStrategy = \"none\",\n  showSeparators = false,\n  ...props\n}: ToolbarProps) => {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"vuu-toolbar\",\n    css: toolbarCss,\n    window: targetWindow,\n  });\n\n  const rootRef = useRef<HTMLDivElement>(null);\n  const {\n    activeItemIndex,\n    focusableIdx,\n    focusVisible,\n    itemProps,\n    ...toolbarHook\n  } = useToolbar({\n    activeItemIndex: activeItemIndexProp,\n    defaultActiveItemIndex,\n    containerRef: rootRef,\n    onActiveChange,\n    onNavigateOutOfBounds,\n    orientation,\n    selectionStrategy,\n  });\n\n  const id = useId(idProp);\n\n  const items = useMemo(\n    () =>\n      asReactElements(children).map((child, index) => {\n        const {\n          id: itemId = `${id}-tab-${index}`,\n          className: itemClassName,\n          ...ownProps\n        } = child.props as any;\n        const selected = activeItemIndex.includes(index);\n        return React.cloneElement(child, {\n          ...forwardCallbackProps(ownProps, itemProps),\n          className: cx(\"vuuToolbarItem\", itemClassName),\n          \"data-overflow-priority\": selected ? \"1\" : undefined,\n          id: itemId,\n          key: index,\n          \"aria-selected\": selected,\n          tabIndex: focusableIdx === index ? 0 : -1,\n        });\n      }),\n    [activeItemIndex, children, focusableIdx, id, itemProps],\n  );\n\n  return (\n    <OverflowContainer\n      {...props}\n      {...toolbarHook.containerProps}\n      className={cx(className, classBase, `${classBase}-${orientation}`, {\n        [`${classBase}-alignCenter`]: alignItems === \"center\",\n        [`${classBase}-alignEnd`]: alignItems === \"end\",\n        [`${classBase}-withSeparators`]: showSeparators,\n      })}\n      {...props}\n      ref={rootRef}\n    >\n      {items}\n    </OverflowContainer>\n  );\n};\n"],"names":[],"mappings":";;;;;;;;;;;AAkBA,MAAM,SAAY,GAAA,YAAA;AAoBX,MAAM,UAAU,CAAC;AAAA,EACtB,eAAiB,EAAA,mBAAA;AAAA,EACjB,UAAa,GAAA,OAAA;AAAA,EACb,sBAAA;AAAA,EACA,QAAA;AAAA,EACA,SAAA;AAAA,EACA,EAAI,EAAA,MAAA;AAAA,EACJ,cAAA;AAAA,EACA,qBAAA;AAAA,EACA,WAAc,GAAA,YAAA;AAAA,EACd,iBAAoB,GAAA,MAAA;AAAA,EACpB,cAAiB,GAAA,KAAA;AAAA,EACjB,GAAG;AACL,CAAoB,KAAA;AAClB,EAAA,MAAM,eAAe,SAAU,EAAA;AAC/B,EAAyB,wBAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,aAAA;AAAA,IACR,GAAK,EAAA,UAAA;AAAA,IACL,MAAQ,EAAA;AAAA,GACT,CAAA;AAED,EAAM,MAAA,OAAA,GAAU,OAAuB,IAAI,CAAA;AAC3C,EAAM,MAAA;AAAA,IACJ,eAAA;AAAA,IACA,YAAA;AAAA,IACA,YAAA;AAAA,IACA,SAAA;AAAA,IACA,GAAG;AAAA,MACD,UAAW,CAAA;AAAA,IACb,eAAiB,EAAA,mBAAA;AAAA,IACjB,sBAAA;AAAA,IACA,YAAc,EAAA,OAAA;AAAA,IACd,cAAA;AAAA,IACA,qBAAA;AAAA,IACA,WAAA;AAAA,IACA;AAAA,GACD,CAAA;AAED,EAAM,MAAA,EAAA,GAAK,MAAM,MAAM,CAAA;AAEvB,EAAA,MAAM,KAAQ,GAAA,OAAA;AAAA,IACZ,MACE,eAAgB,CAAA,QAAQ,EAAE,GAAI,CAAA,CAAC,OAAO,KAAU,KAAA;AAC9C,MAAM,MAAA;AAAA,QACJ,EAAI,EAAA,MAAA,GAAS,CAAG,EAAA,EAAE,QAAQ,KAAK,CAAA,CAAA;AAAA,QAC/B,SAAW,EAAA,aAAA;AAAA,QACX,GAAG;AAAA,UACD,KAAM,CAAA,KAAA;AACV,MAAM,MAAA,QAAA,GAAW,eAAgB,CAAA,QAAA,CAAS,KAAK,CAAA;AAC/C,MAAO,OAAA,KAAA,CAAM,aAAa,KAAO,EAAA;AAAA,QAC/B,GAAG,oBAAqB,CAAA,QAAA,EAAU,SAAS,CAAA;AAAA,QAC3C,SAAA,EAAW,EAAG,CAAA,gBAAA,EAAkB,aAAa,CAAA;AAAA,QAC7C,wBAAA,EAA0B,WAAW,GAAM,GAAA,KAAA,CAAA;AAAA,QAC3C,EAAI,EAAA,MAAA;AAAA,QACJ,GAAK,EAAA,KAAA;AAAA,QACL,eAAiB,EAAA,QAAA;AAAA,QACjB,QAAA,EAAU,YAAiB,KAAA,KAAA,GAAQ,CAAI,GAAA,CAAA;AAAA,OACxC,CAAA;AAAA,KACF,CAAA;AAAA,IACH,CAAC,eAAA,EAAiB,QAAU,EAAA,YAAA,EAAc,IAAI,SAAS;AAAA,GACzD;AAEA,EACE,uBAAA,GAAA;AAAA,IAAC,iBAAA;AAAA,IAAA;AAAA,MACE,GAAG,KAAA;AAAA,MACH,GAAG,WAAY,CAAA,cAAA;AAAA,MAChB,SAAA,EAAW,GAAG,SAAW,EAAA,SAAA,EAAW,GAAG,SAAS,CAAA,CAAA,EAAI,WAAW,CAAI,CAAA,EAAA;AAAA,QACjE,CAAC,CAAA,EAAG,SAAS,CAAA,YAAA,CAAc,GAAG,UAAe,KAAA,QAAA;AAAA,QAC7C,CAAC,CAAA,EAAG,SAAS,CAAA,SAAA,CAAW,GAAG,UAAe,KAAA,KAAA;AAAA,QAC1C,CAAC,CAAA,EAAG,SAAS,CAAA,eAAA,CAAiB,GAAG;AAAA,OAClC,CAAA;AAAA,MACA,GAAG,KAAA;AAAA,MACJ,GAAK,EAAA,OAAA;AAAA,MAEJ,QAAA,EAAA;AAAA;AAAA,GACH;AAEJ;;;;"}
+{"version":3,"file":"Toolbar.js","sources":["../../src/toolbar/Toolbar.tsx"],"sourcesContent":["import { asReactElements, useId } from \"@vuu-ui/vuu-utils\";\nimport cx from \"clsx\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport React, { useMemo, useRef } from \"react\";\nimport {\n  OverflowContainer,\n  OverflowContainerProps,\n} from \"../overflow-container\";\nimport { useToolbar } from \"./useToolbar\";\nimport { forwardCallbackProps } from \"../utils\";\nimport {\n  SelectionStrategy,\n  SpecialKeyMultipleSelection,\n} from \"../common-hooks\";\n\nimport toolbarCss from \"./Toolbar.css\";\n\nconst classBase = \"vuuToolbar\";\n\nexport type ActiveItemChangeHandler = (itemIndex: number[]) => void;\n\nexport type NavigationOutOfBoundsHandler = (direction: \"start\" | \"end\") => void;\nexport interface ToolbarProps extends OverflowContainerProps {\n  activeItemIndex?: number[];\n  alignItems?: \"start\" | \"center\" | \"end\";\n  defaultActiveItemIndex?: number[];\n  onActiveChange?: ActiveItemChangeHandler;\n  /**\n   * Indicates that user has used Arrow key navigation to move beyond the\n   * last or before the first item. A higher level component may want to\n   * use this to implement a seamless navigation across components.\n   */\n  onNavigateOutOfBounds?: NavigationOutOfBoundsHandler;\n  selectionStrategy?: SelectionStrategy | SpecialKeyMultipleSelection;\n  showSeparators?: boolean;\n}\n\nexport const Toolbar = ({\n  activeItemIndex: activeItemIndexProp,\n  alignItems = \"start\",\n  defaultActiveItemIndex,\n  children,\n  className,\n  id: idProp,\n  onActiveChange,\n  onNavigateOutOfBounds,\n  orientation = \"horizontal\",\n  selectionStrategy = \"none\",\n  showSeparators = false,\n  ...props\n}: ToolbarProps) => {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"vuu-toolbar\",\n    css: toolbarCss,\n    window: targetWindow,\n  });\n\n  const rootRef = useRef<HTMLDivElement>(null);\n  const {\n    activeItemIndex,\n    focusableIdx,\n    focusVisible,\n    itemProps,\n    ...toolbarHook\n  } = useToolbar({\n    activeItemIndex: activeItemIndexProp,\n    defaultActiveItemIndex,\n    containerRef: rootRef,\n    onActiveChange,\n    onNavigateOutOfBounds,\n    orientation,\n    selectionStrategy,\n  });\n\n  const id = useId(idProp);\n\n  const items = useMemo(\n    () =>\n      asReactElements(children).map((child, index) => {\n        const {\n          id: itemId = `${id}-tab-${index}`,\n          className: itemClassName,\n          ...ownProps\n        } = child.props as any;\n        const selected = activeItemIndex.includes(index);\n        return React.cloneElement(child, {\n          ...forwardCallbackProps(ownProps, itemProps),\n          className: cx(\"vuuToolbarItem\", itemClassName),\n          \"data-overflow-priority\": selected ? \"1\" : undefined,\n          id: itemId,\n          key: index,\n          \"aria-selected\": selected,\n          tabIndex: focusableIdx === index ? 0 : -1,\n        });\n      }),\n    [activeItemIndex, children, focusableIdx, id, itemProps],\n  );\n\n  return (\n    <OverflowContainer\n      {...props}\n      {...toolbarHook.containerProps}\n      className={cx(className, classBase, `${classBase}-${orientation}`, {\n        [`${classBase}-alignCenter`]: alignItems === \"center\",\n        [`${classBase}-alignEnd`]: alignItems === \"end\",\n        [`${classBase}-withSeparators`]: showSeparators,\n      })}\n      {...props}\n      ref={rootRef}\n    >\n      {items}\n    </OverflowContainer>\n  );\n};\n"],"names":[],"mappings":";;;;;;;;;;;AAkBA,MAAM,SAAY,GAAA,YAAA;AAoBX,MAAM,UAAU,CAAC;AAAA,EACtB,eAAiB,EAAA,mBAAA;AAAA,EACjB,UAAa,GAAA,OAAA;AAAA,EACb,sBAAA;AAAA,EACA,QAAA;AAAA,EACA,SAAA;AAAA,EACA,EAAI,EAAA,MAAA;AAAA,EACJ,cAAA;AAAA,EACA,qBAAA;AAAA,EACA,WAAc,GAAA,YAAA;AAAA,EACd,iBAAoB,GAAA,MAAA;AAAA,EACpB,cAAiB,GAAA,KAAA;AAAA,EACjB,GAAG;AACL,CAAoB,KAAA;AAClB,EAAA,MAAM,eAAe,SAAU,EAAA;AAC/B,EAAyB,wBAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,aAAA;AAAA,IACR,GAAK,EAAA,UAAA;AAAA,IACL,MAAQ,EAAA;AAAA,GACT,CAAA;AAED,EAAM,MAAA,OAAA,GAAU,OAAuB,IAAI,CAAA;AAC3C,EAAM,MAAA;AAAA,IACJ,eAAA;AAAA,IACA,YAAA;AAAA,IACA,YAAA;AAAA,IACA,SAAA;AAAA,IACA,GAAG;AAAA,MACD,UAAW,CAAA;AAAA,IACb,eAAiB,EAAA,mBAAA;AAAA,IACjB,sBAAA;AAAA,IACA,YAAc,EAAA,OAAA;AAAA,IACd,cAAA;AAAA,IACA,qBAAA;AAAA,IACA,WAAA;AAAA,IACA;AAAA,GACD,CAAA;AAED,EAAM,MAAA,EAAA,GAAK,MAAM,MAAM,CAAA;AAEvB,EAAA,MAAM,KAAQ,GAAA,OAAA;AAAA,IACZ,MACE,eAAgB,CAAA,QAAQ,EAAE,GAAI,CAAA,CAAC,OAAO,KAAU,KAAA;AAC9C,MAAM,MAAA;AAAA,QACJ,EAAI,EAAA,MAAA,GAAS,CAAG,EAAA,EAAE,QAAQ,KAAK,CAAA,CAAA;AAAA,QAC/B,SAAW,EAAA,aAAA;AAAA,QACX,GAAG;AAAA,UACD,KAAM,CAAA,KAAA;AACV,MAAM,MAAA,QAAA,GAAW,eAAgB,CAAA,QAAA,CAAS,KAAK,CAAA;AAC/C,MAAO,OAAA,KAAA,CAAM,aAAa,KAAO,EAAA;AAAA,QAC/B,GAAG,oBAAqB,CAAA,QAAA,EAAU,SAAS,CAAA;AAAA,QAC3C,SAAA,EAAW,EAAG,CAAA,gBAAA,EAAkB,aAAa,CAAA;AAAA,QAC7C,wBAAA,EAA0B,WAAW,GAAM,GAAA,KAAA,CAAA;AAAA,QAC3C,EAAI,EAAA,MAAA;AAAA,QACJ,GAAK,EAAA,KAAA;AAAA,QACL,eAAiB,EAAA,QAAA;AAAA,QACjB,QAAA,EAAU,YAAiB,KAAA,KAAA,GAAQ,CAAI,GAAA,CAAA;AAAA,OACxC,CAAA;AAAA,KACF,CAAA;AAAA,IACH,CAAC,eAAA,EAAiB,QAAU,EAAA,YAAA,EAAc,IAAI,SAAS;AAAA,GACzD;AAEA,EACE,uBAAA,GAAA;AAAA,IAAC,iBAAA;AAAA,IAAA;AAAA,MACE,GAAG,KAAA;AAAA,MACH,GAAG,WAAY,CAAA,cAAA;AAAA,MAChB,SAAA,EAAW,GAAG,SAAW,EAAA,SAAA,EAAW,GAAG,SAAS,CAAA,CAAA,EAAI,WAAW,CAAI,CAAA,EAAA;AAAA,QACjE,CAAC,CAAA,EAAG,SAAS,CAAA,YAAA,CAAc,GAAG,UAAe,KAAA,QAAA;AAAA,QAC7C,CAAC,CAAA,EAAG,SAAS,CAAA,SAAA,CAAW,GAAG,UAAe,KAAA,KAAA;AAAA,QAC1C,CAAC,CAAA,EAAG,SAAS,CAAA,eAAA,CAAiB,GAAG;AAAA,OAClC,CAAA;AAAA,MACA,GAAG,KAAA;AAAA,MACJ,GAAK,EAAA,OAAA;AAAA,MAEJ,QAAA,EAAA;AAAA;AAAA,GACH;AAEJ;;;;"}

package/esm/toolbar/useSelection.js

@@ -1,5 +1,4 @@
 import { useCallback } from 'react';
-import '../common-hooks/collectionProvider.js';
 import '../common-hooks/use-resize-observer.js';
 import { allowMultipleSelection, deselectionIsAllowed, selectionIsDisallowed } from '../common-hooks/selectionTypes.js';
 import { useControlled } from '@salt-ds/core';

package/esm/toolbar/useSelection.js.map

@@ -1 +1 @@
-{"version":3,"file":"useSelection.js","sources":["../../src/toolbar/useSelection.ts"],"sourcesContent":["import { KeyboardEvent, MouseEvent, RefObject, useCallback } from \"react\";\nimport {\n  SelectionStrategy,\n  SpecialKeyMultipleSelection,\n  allowMultipleSelection,\n  deselectionIsAllowed,\n  selectionIsDisallowed,\n} from \"../common-hooks\";\nimport { useControlled } from \"@salt-ds/core\";\nimport { getClosestIndexItem, isSelectableElement } from \"@vuu-ui/vuu-utils\";\n\nconst defaultSelectionKeys = [\"Enter\", \" \"];\n\nexport interface SelectionHookProps {\n  containerRef: RefObject<HTMLElement | null>;\n  defaultSelected?: number[];\n  highlightedIdx: number;\n  itemQuery: string;\n  onSelectionChange?: (selectedIndices: number[]) => void;\n  selected?: number[];\n  selectionStrategy: SelectionStrategy | SpecialKeyMultipleSelection;\n}\n\nexport interface ItemHandlers {\n  onClick?: (e: MouseEvent, itemIndex: number) => void;\n  onKeyDown?: (event: React.KeyboardEvent) => void;\n}\n\nconst NO_SELECTION_HANDLERS: ItemHandlers = {};\n\nexport interface SelectionHookResult {\n  activateItem: (tabIndex: number) => void;\n  itemHandlers: ItemHandlers;\n  isControlled: boolean;\n  selected: number[];\n}\n\n// TODO use SelectionProps\nexport const useSelection = ({\n  defaultSelected,\n  highlightedIdx,\n  onSelectionChange,\n  selected: selectedProp,\n  selectionStrategy,\n}: SelectionHookProps): SelectionHookResult => {\n  const [selected, setSelected, isControlled] = useControlled({\n    controlled: selectedProp,\n    default: defaultSelected ?? [],\n    name: \"useSelection\",\n    state: \"selected\",\n  });\n\n  // const isSelectableElement = useMemo(\n  //   () =>\n  //     (el: HTMLElement): boolean =>\n  //       el && el.matches(`[class*=\"${itemQuery} \"]`),\n  //   [itemQuery]\n  // );\n\n  const isSelectionEvent = useCallback(\n    (evt: KeyboardEvent) => defaultSelectionKeys.includes(evt.key),\n    [],\n  );\n\n  const selectItem = useCallback(\n    (itemIndex: number, specialKey = false) => {\n      const newSelected = allowMultipleSelection(selectionStrategy, specialKey)\n        ? selected.concat(itemIndex)\n        : [itemIndex];\n\n      setSelected(newSelected);\n      onSelectionChange?.(newSelected);\n    },\n    [onSelectionChange, selected, selectionStrategy, setSelected],\n  );\n\n  const deselectItem = useCallback(\n    (itemIndex: number, specialKey = false) => {\n      const newSelected =\n        selectionStrategy === \"deselectable\" ||\n        (selectionStrategy === \"multiple-special-key\" && !specialKey)\n          ? []\n          : selected.filter((index) => index !== itemIndex);\n      setSelected(newSelected);\n      onSelectionChange?.(newSelected);\n    },\n    [onSelectionChange, selected, selectionStrategy, setSelected],\n  );\n\n  const handleKeyDown = useCallback(\n    (e: KeyboardEvent) => {\n      if (isSelectionEvent(e) && isSelectableElement(e.target as HTMLElement)) {\n        if (!selected.includes(highlightedIdx)) {\n          e.stopPropagation();\n          e.preventDefault();\n          selectItem(highlightedIdx, e.shiftKey);\n        } else if (deselectionIsAllowed(selectionStrategy)) {\n          e.stopPropagation();\n          e.preventDefault();\n          deselectItem(highlightedIdx, e.shiftKey);\n        }\n      }\n    },\n    [\n      isSelectionEvent,\n      selected,\n      highlightedIdx,\n      selectionStrategy,\n      selectItem,\n      deselectItem,\n    ],\n  );\n\n  const handleClick = useCallback(\n    (e: MouseEvent, itemIndex: number) => {\n      const element = getClosestIndexItem(e.target as HTMLElement);\n      if (isSelectableElement(element)) {\n        if (!selected.includes(itemIndex)) {\n          selectItem(itemIndex, e.shiftKey);\n        } else if (deselectionIsAllowed(selectionStrategy)) {\n          deselectItem(itemIndex, e.shiftKey);\n        }\n      }\n    },\n    [deselectItem, selectItem, selected, selectionStrategy],\n  );\n\n  const itemHandlers = selectionIsDisallowed(selectionStrategy)\n    ? NO_SELECTION_HANDLERS\n    : {\n        onClick: handleClick,\n        onKeyDown: handleKeyDown,\n      };\n\n  return {\n    activateItem: selectItem,\n    itemHandlers,\n    isControlled,\n    selected,\n  };\n};\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"useSelection.js","sources":["../../src/toolbar/useSelection.ts"],"sourcesContent":["import { KeyboardEvent, MouseEvent, RefObject, useCallback } from \"react\";\nimport {\n  SelectionStrategy,\n  SpecialKeyMultipleSelection,\n  allowMultipleSelection,\n  deselectionIsAllowed,\n  selectionIsDisallowed,\n} from \"../common-hooks\";\nimport { useControlled } from \"@salt-ds/core\";\nimport { getClosestIndexItem, isSelectableElement } from \"@vuu-ui/vuu-utils\";\n\nconst defaultSelectionKeys = [\"Enter\", \" \"];\n\nexport interface SelectionHookProps {\n  containerRef: RefObject<HTMLElement | null>;\n  defaultSelected?: number[];\n  highlightedIdx: number;\n  itemQuery: string;\n  onSelectionChange?: (selectedIndices: number[]) => void;\n  selected?: number[];\n  selectionStrategy: SelectionStrategy | SpecialKeyMultipleSelection;\n}\n\nexport interface ItemHandlers {\n  onClick?: (e: MouseEvent, itemIndex: number) => void;\n  onKeyDown?: (event: React.KeyboardEvent) => void;\n}\n\nconst NO_SELECTION_HANDLERS: ItemHandlers = {};\n\nexport interface SelectionHookResult {\n  activateItem: (tabIndex: number) => void;\n  itemHandlers: ItemHandlers;\n  isControlled: boolean;\n  selected: number[];\n}\n\n// TODO use SelectionProps\nexport const useSelection = ({\n  defaultSelected,\n  highlightedIdx,\n  onSelectionChange,\n  selected: selectedProp,\n  selectionStrategy,\n}: SelectionHookProps): SelectionHookResult => {\n  const [selected, setSelected, isControlled] = useControlled({\n    controlled: selectedProp,\n    default: defaultSelected ?? [],\n    name: \"useSelection\",\n    state: \"selected\",\n  });\n\n  // const isSelectableElement = useMemo(\n  //   () =>\n  //     (el: HTMLElement): boolean =>\n  //       el && el.matches(`[class*=\"${itemQuery} \"]`),\n  //   [itemQuery]\n  // );\n\n  const isSelectionEvent = useCallback(\n    (evt: KeyboardEvent) => defaultSelectionKeys.includes(evt.key),\n    [],\n  );\n\n  const selectItem = useCallback(\n    (itemIndex: number, specialKey = false) => {\n      const newSelected = allowMultipleSelection(selectionStrategy, specialKey)\n        ? selected.concat(itemIndex)\n        : [itemIndex];\n\n      setSelected(newSelected);\n      onSelectionChange?.(newSelected);\n    },\n    [onSelectionChange, selected, selectionStrategy, setSelected],\n  );\n\n  const deselectItem = useCallback(\n    (itemIndex: number, specialKey = false) => {\n      const newSelected =\n        selectionStrategy === \"deselectable\" ||\n        (selectionStrategy === \"multiple-special-key\" && !specialKey)\n          ? []\n          : selected.filter((index) => index !== itemIndex);\n      setSelected(newSelected);\n      onSelectionChange?.(newSelected);\n    },\n    [onSelectionChange, selected, selectionStrategy, setSelected],\n  );\n\n  const handleKeyDown = useCallback(\n    (e: KeyboardEvent) => {\n      if (isSelectionEvent(e) && isSelectableElement(e.target as HTMLElement)) {\n        if (!selected.includes(highlightedIdx)) {\n          e.stopPropagation();\n          e.preventDefault();\n          selectItem(highlightedIdx, e.shiftKey);\n        } else if (deselectionIsAllowed(selectionStrategy)) {\n          e.stopPropagation();\n          e.preventDefault();\n          deselectItem(highlightedIdx, e.shiftKey);\n        }\n      }\n    },\n    [\n      isSelectionEvent,\n      selected,\n      highlightedIdx,\n      selectionStrategy,\n      selectItem,\n      deselectItem,\n    ],\n  );\n\n  const handleClick = useCallback(\n    (e: MouseEvent, itemIndex: number) => {\n      const element = getClosestIndexItem(e.target as HTMLElement);\n      if (isSelectableElement(element)) {\n        if (!selected.includes(itemIndex)) {\n          selectItem(itemIndex, e.shiftKey);\n        } else if (deselectionIsAllowed(selectionStrategy)) {\n          deselectItem(itemIndex, e.shiftKey);\n        }\n      }\n    },\n    [deselectItem, selectItem, selected, selectionStrategy],\n  );\n\n  const itemHandlers = selectionIsDisallowed(selectionStrategy)\n    ? NO_SELECTION_HANDLERS\n    : {\n        onClick: handleClick,\n        onKeyDown: handleKeyDown,\n      };\n\n  return {\n    activateItem: selectItem,\n    itemHandlers,\n    isControlled,\n    selected,\n  };\n};\n"],"names":[],"mappings":";;;;;;AAWA,MAAM,oBAAA,GAAuB,CAAC,OAAA,EAAS,GAAG,CAAA;AAiB1C,MAAM,wBAAsC,EAAC;AAUtC,MAAM,eAAe,CAAC;AAAA,EAC3B,eAAA;AAAA,EACA,cAAA;AAAA,EACA,iBAAA;AAAA,EACA,QAAU,EAAA,YAAA;AAAA,EACV;AACF,CAA+C,KAAA;AAC7C,EAAA,MAAM,CAAC,QAAA,EAAU,WAAa,EAAA,YAAY,IAAI,aAAc,CAAA;AAAA,IAC1D,UAAY,EAAA,YAAA;AAAA,IACZ,OAAA,EAAS,mBAAmB,EAAC;AAAA,IAC7B,IAAM,EAAA,cAAA;AAAA,IACN,KAAO,EAAA;AAAA,GACR,CAAA;AASD,EAAA,MAAM,gBAAmB,GAAA,WAAA;AAAA,IACvB,CAAC,GAAA,KAAuB,oBAAqB,CAAA,QAAA,CAAS,IAAI,GAAG,CAAA;AAAA,IAC7D;AAAC,GACH;AAEA,EAAA,MAAM,UAAa,GAAA,WAAA;AAAA,IACjB,CAAC,SAAmB,EAAA,UAAA,GAAa,KAAU,KAAA;AACzC,MAAM,MAAA,WAAA,GAAc,sBAAuB,CAAA,iBAAA,EAAmB,UAAU,CAAA,GACpE,SAAS,MAAO,CAAA,SAAS,CACzB,GAAA,CAAC,SAAS,CAAA;AAEd,MAAA,WAAA,CAAY,WAAW,CAAA;AACvB,MAAA,iBAAA,GAAoB,WAAW,CAAA;AAAA,KACjC;AAAA,IACA,CAAC,iBAAA,EAAmB,QAAU,EAAA,iBAAA,EAAmB,WAAW;AAAA,GAC9D;AAEA,EAAA,MAAM,YAAe,GAAA,WAAA;AAAA,IACnB,CAAC,SAAmB,EAAA,UAAA,GAAa,KAAU,KAAA;AACzC,MAAA,MAAM,WACJ,GAAA,iBAAA,KAAsB,cACrB,IAAA,iBAAA,KAAsB,0BAA0B,CAAC,UAAA,GAC9C,EAAC,GACD,QAAS,CAAA,MAAA,CAAO,CAAC,KAAA,KAAU,UAAU,SAAS,CAAA;AACpD,MAAA,WAAA,CAAY,WAAW,CAAA;AACvB,MAAA,iBAAA,GAAoB,WAAW,CAAA;AAAA,KACjC;AAAA,IACA,CAAC,iBAAA,EAAmB,QAAU,EAAA,iBAAA,EAAmB,WAAW;AAAA,GAC9D;AAEA,EAAA,MAAM,aAAgB,GAAA,WAAA;AAAA,IACpB,CAAC,CAAqB,KAAA;AACpB,MAAA,IAAI,iBAAiB,CAAC,CAAA,IAAK,mBAAoB,CAAA,CAAA,CAAE,MAAqB,CAAG,EAAA;AACvE,QAAA,IAAI,CAAC,QAAA,CAAS,QAAS,CAAA,cAAc,CAAG,EAAA;AACtC,UAAA,CAAA,CAAE,eAAgB,EAAA;AAClB,UAAA,CAAA,CAAE,cAAe,EAAA;AACjB,UAAW,UAAA,CAAA,cAAA,EAAgB,EAAE,QAAQ,CAAA;AAAA,SACvC,MAAA,IAAW,oBAAqB,CAAA,iBAAiB,CAAG,EAAA;AAClD,UAAA,CAAA,CAAE,eAAgB,EAAA;AAClB,UAAA,CAAA,CAAE,cAAe,EAAA;AACjB,UAAa,YAAA,CAAA,cAAA,EAAgB,EAAE,QAAQ,CAAA;AAAA;AACzC;AACF,KACF;AAAA,IACA;AAAA,MACE,gBAAA;AAAA,MACA,QAAA;AAAA,MACA,cAAA;AAAA,MACA,iBAAA;AAAA,MACA,UAAA;AAAA,MACA;AAAA;AACF,GACF;AAEA,EAAA,MAAM,WAAc,GAAA,WAAA;AAAA,IAClB,CAAC,GAAe,SAAsB,KAAA;AACpC,MAAM,MAAA,OAAA,GAAU,mBAAoB,CAAA,CAAA,CAAE,MAAqB,CAAA;AAC3D,MAAI,IAAA,mBAAA,CAAoB,OAAO,CAAG,EAAA;AAChC,QAAA,IAAI,CAAC,QAAA,CAAS,QAAS,CAAA,SAAS,CAAG,EAAA;AACjC,UAAW,UAAA,CAAA,SAAA,EAAW,EAAE,QAAQ,CAAA;AAAA,SAClC,MAAA,IAAW,oBAAqB,CAAA,iBAAiB,CAAG,EAAA;AAClD,UAAa,YAAA,CAAA,SAAA,EAAW,EAAE,QAAQ,CAAA;AAAA;AACpC;AACF,KACF;AAAA,IACA,CAAC,YAAA,EAAc,UAAY,EAAA,QAAA,EAAU,iBAAiB;AAAA,GACxD;AAEA,EAAA,MAAM,YAAe,GAAA,qBAAA,CAAsB,iBAAiB,CAAA,GACxD,qBACA,GAAA;AAAA,IACE,OAAS,EAAA,WAAA;AAAA,IACT,SAAW,EAAA;AAAA,GACb;AAEJ,EAAO,OAAA;AAAA,IACL,YAAc,EAAA,UAAA;AAAA,IACd,YAAA;AAAA,IACA,YAAA;AAAA,IACA;AAAA,GACF;AACF;;;;"}

package/package.json

@@ -1,21 +1,20 @@
 {
-  "version": "0.13.2",
+  "version": "0.13.4",
   "description": "VUU UI Controls",
   "author": "heswell",
   "license": "Apache-2.0",
   "devDependencies": {
-    "@vuu-ui/vuu-data-types": "0.13.2",
-    "@vuu-ui/vuu-protocol-types": "0.13.2",
-    "@vuu-ui/vuu-table-types": "0.13.2"
+    "@vuu-ui/vuu-data-types": "0.13.4",
+    "@vuu-ui/vuu-protocol-types": "0.13.4",
+    "@vuu-ui/vuu-table-types": "0.13.4"
   },
   "dependencies": {
-    "@vuu-ui/vuu-context-menu": "0.13.2",
-    "@vuu-ui/vuu-data-react": "0.13.2",
-    "@vuu-ui/vuu-layout": "0.13.2",
-    "@vuu-ui/vuu-popups": "0.13.2",
-    "@vuu-ui/vuu-table": "0.13.2",
-    "@vuu-ui/vuu-utils": "0.13.2",
-    "@floating-ui/react": "^0.26.28",
+    "@vuu-ui/vuu-context-menu": "0.13.4",
+    "@vuu-ui/vuu-data-react": "0.13.4",
+    "@vuu-ui/vuu-layout": "0.13.4",
+    "@vuu-ui/vuu-popups": "0.13.4",
+    "@vuu-ui/vuu-table": "0.13.4",
+    "@vuu-ui/vuu-utils": "0.13.4",
     "@salt-ds/core": "1.43.0",
     "@salt-ds/icons": "1.13.2",
     "@salt-ds/styles": "0.2.1",
@@ -24,6 +23,8 @@
   },
   "peerDependencies": {
     "@internationalized/date": "^3.0.0",
+    "@dnd-kit/react": "^0.1.19",
+    "@floating-ui/react": "^0.26.28",
     "clsx": "^2.0.0",
     "react": "^19.1.0",
     "react-dom": "^19.1.0"
@@ -33,18 +34,15 @@
   "files": [
     "README.md",
     "esm",
-    "cjs",
-    "/types"
+    "cjs"
   ],
   "exports": {
     ".": {
       "require": "./cjs/index.js",
-      "import": "./esm/index.js",
-      "types": "./types/index.d.ts"
+      "import": "./esm/index.js"
     }
   },
   "main": "cjs/index.js",
   "module": "esm/index.js",
-  "name": "@vuu-ui/vuu-ui-controls",
-  "types": "types/index.d.ts"
+  "name": "@vuu-ui/vuu-ui-controls"
 }

package/cjs/common-hooks/collectionProvider.js

@@ -1,24 +0,0 @@
-'use strict';
-
-var jsxRuntime = require('react/jsx-runtime');
-var React = require('react');
-
-const CollectionContext = React.createContext(void 0);
-function CollectionProvider({
-  children,
-  collectionHook,
-  ...props
-}) {
-  return /* @__PURE__ */ jsxRuntime.jsx(CollectionContext.Provider, { value: collectionHook, children: Object.keys(props).length > 0 ? React.cloneElement(children, props) : children });
-}
-function useCollection() {
-  const collection = React.useContext(CollectionContext);
-  if (collection) {
-    return collection;
-  }
-}
-
-exports.CollectionContext = CollectionContext;
-exports.CollectionProvider = CollectionProvider;
-exports.useCollection = useCollection;
-//# sourceMappingURL=collectionProvider.js.map

package/cjs/common-hooks/collectionProvider.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"collectionProvider.js","sources":["../../src/common-hooks/collectionProvider.tsx"],"sourcesContent":["import { cloneElement, createContext, ReactElement, useContext } from \"react\";\nimport { CollectionHookResult } from \"./collectionTypes\";\n\nexport interface collectionContext<T> {\n  collection: CollectionHookResult<T>;\n}\n\nexport const CollectionContext = createContext<\n  CollectionHookResult<any> | undefined\n>(undefined);\n\ninterface ContextProviderProps<Item> {\n  children: ReactElement;\n  collectionHook: CollectionHookResult<Item>;\n}\n\nexport function CollectionProvider<Item>({\n  children,\n  collectionHook,\n  ...props\n}: ContextProviderProps<Item>) {\n  return (\n    <CollectionContext.Provider value={collectionHook}>\n      {Object.keys(props).length > 0 ? cloneElement(children, props) : children}\n    </CollectionContext.Provider>\n  );\n}\n\nexport function useCollection<Item>(): CollectionHookResult<Item> | undefined {\n  const collection = useContext(CollectionContext);\n  if (collection) {\n    return collection as CollectionHookResult<Item>;\n  }\n}\n"],"names":["createContext","cloneElement","useContext"],"mappings":";;;;;AAOa,MAAA,iBAAA,GAAoBA,oBAE/B,KAAS,CAAA;AAOJ,SAAS,kBAAyB,CAAA;AAAA,EACvC,QAAA;AAAA,EACA,cAAA;AAAA,EACA,GAAG;AACL,CAA+B,EAAA;AAC7B,EAAA,sCACG,iBAAkB,CAAA,QAAA,EAAlB,EAA2B,KAAA,EAAO,gBAChC,QAAO,EAAA,MAAA,CAAA,IAAA,CAAK,KAAK,CAAA,CAAE,SAAS,CAAI,GAAAC,kBAAA,CAAa,QAAU,EAAA,KAAK,IAAI,QACnE,EAAA,CAAA;AAEJ;AAEO,SAAS,aAA8D,GAAA;AAC5E,EAAM,MAAA,UAAA,GAAaC,iBAAW,iBAAiB,CAAA;AAC/C,EAAA,IAAI,UAAY,EAAA;AACd,IAAO,OAAA,UAAA;AAAA;AAEX;;;;;;"}

package/cjs/common-hooks/isPlainObject.js

@@ -1,6 +0,0 @@
-'use strict';
-
-const isPlainObject = (obj) => Object.prototype.toString.call(obj) === "[object Object]";
-
-exports.isPlainObject = isPlainObject;
-//# sourceMappingURL=isPlainObject.js.map

package/cjs/common-hooks/isPlainObject.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"isPlainObject.js","sources":["../../src/common-hooks/isPlainObject.ts"],"sourcesContent":["export const isPlainObject = (obj: unknown) =>\n  Object.prototype.toString.call(obj) === \"[object Object]\";\n"],"names":[],"mappings":";;AAAa,MAAA,aAAA,GAAgB,CAAC,GAC5B,KAAA,MAAA,CAAO,UAAU,QAAS,CAAA,IAAA,CAAK,GAAG,CAAM,KAAA;;;;"}

package/cjs/common-hooks/itemToString.js

@@ -1,24 +0,0 @@
-'use strict';
-
-var isPlainObject = require('./isPlainObject.js');
-
-function itemToString(item) {
-  if (typeof item === "string") {
-    return item;
-  } else if (!isPlainObject.isPlainObject(item)) {
-    return String(item);
-  }
-  if (Object.prototype.hasOwnProperty.call(item, "label")) {
-    return String(item.label);
-  }
-  console.warn(
-    [
-      "itemToString: you've likely forgotten to set the label prop on the item object.",
-      "You can also provide your own `itemToString` implementation."
-    ].join("\n")
-  );
-  return "";
-}
-
-exports.itemToString = itemToString;
-//# sourceMappingURL=itemToString.js.map

package/cjs/common-hooks/itemToString.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"itemToString.js","sources":["../../src/common-hooks/itemToString.ts"],"sourcesContent":["import { isPlainObject } from \"./isPlainObject\";\n\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\nexport type ItemToStringFunction = (item: any) => string;\n\nexport function itemToString(item: unknown): string {\n  if (typeof item === \"string\") {\n    return item;\n  } else if (!isPlainObject(item)) {\n    return String(item);\n  }\n\n  if (Object.prototype.hasOwnProperty.call(item, \"label\")) {\n    return String((item as { label?: string }).label);\n  }\n\n  console.warn(\n    [\n      \"itemToString: you've likely forgotten to set the label prop on the item object.\",\n      \"You can also provide your own `itemToString` implementation.\",\n    ].join(\"\\n\")\n  );\n\n  return \"\";\n}\n"],"names":["isPlainObject"],"mappings":";;;;AAKO,SAAS,aAAa,IAAuB,EAAA;AAClD,EAAI,IAAA,OAAO,SAAS,QAAU,EAAA;AAC5B,IAAO,OAAA,IAAA;AAAA,GACE,MAAA,IAAA,CAACA,2BAAc,CAAA,IAAI,CAAG,EAAA;AAC/B,IAAA,OAAO,OAAO,IAAI,CAAA;AAAA;AAGpB,EAAA,IAAI,OAAO,SAAU,CAAA,cAAA,CAAe,IAAK,CAAA,IAAA,EAAM,OAAO,CAAG,EAAA;AACvD,IAAO,OAAA,MAAA,CAAQ,KAA4B,KAAK,CAAA;AAAA;AAGlD,EAAQ,OAAA,CAAA,IAAA;AAAA,IACN;AAAA,MACE,iFAAA;AAAA,MACA;AAAA,KACF,CAAE,KAAK,IAAI;AAAA,GACb;AAEA,EAAO,OAAA,EAAA;AACT;;;;"}