@harborclient/sdk 1.0.16 → 1.0.18

package/dist/components/SegmentedTabs/SegmentedTabsVisibilityMenu.d.ts

@@ -0,0 +1,24 @@
+import type { JSX } from 'react';
+import type { TabItem } from './types.js';
+interface Props<T extends string> {
+    /**
+     * Tabs that can be shown or hidden via the menu.
+     */
+    tabs: TabItem<T>[];
+    /**
+     * Tab values currently shown in the tab strip.
+     */
+    visibleTabValues: T[];
+    /**
+     * Called when the user toggles a tab's visibility in the menu.
+     *
+     * @param tabValue - Tab value to toggle.
+     */
+    onToggle: (tabValue: T) => void;
+}
+/**
+ * Caret-triggered menu for toggling which segmented tabs are visible.
+ */
+export declare function SegmentedTabsVisibilityMenu<T extends string>({ tabs, visibleTabValues, onToggle }: Props<T>): JSX.Element;
+export {};
+//# sourceMappingURL=SegmentedTabsVisibilityMenu.d.ts.map

package/dist/components/SegmentedTabs/SegmentedTabsVisibilityMenu.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SegmentedTabsVisibilityMenu.d.ts","sourceRoot":"","sources":["../../../src/components/SegmentedTabs/SegmentedTabsVisibilityMenu.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,GAAG,EAA4B,MAAM,OAAO,CAAC;AAK3D,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,YAAY,CAAC;AAE1C,UAAU,KAAK,CAAC,CAAC,SAAS,MAAM;IAC9B;;OAEG;IACH,IAAI,EAAE,OAAO,CAAC,CAAC,CAAC,EAAE,CAAC;IAEnB;;OAEG;IACH,gBAAgB,EAAE,CAAC,EAAE,CAAC;IAEtB;;;;OAIG;IACH,QAAQ,EAAE,CAAC,QAAQ,EAAE,CAAC,KAAK,IAAI,CAAC;CACjC;AAQD;;GAEG;AACH,wBAAgB,2BAA2B,CAAC,CAAC,SAAS,MAAM,EAAE,EAC5D,IAAI,EACJ,gBAAgB,EAChB,QAAQ,EACT,EAAE,KAAK,CAAC,CAAC,CAAC,GAAG,GAAG,CAAC,OAAO,CAwLxB"}

package/dist/components/SegmentedTabs/SegmentedTabsVisibilityMenu.js

@@ -0,0 +1,155 @@
+import { jsx as _jsx, jsxs as _jsxs } from "@harborclient/sdk/jsx-runtime";
+import { useCallback, useEffect, useId, useRef, useState } from '@harborclient/sdk/react';
+import { faCaretDown, faCheck } from '@fortawesome/free-solid-svg-icons';
+import { Button } from '../Button/index.js';
+import { FaIcon } from '../FaIcon/index.js';
+import { resolveTabListKeyAction } from '../utils.js';
+const menuItemClass = 'flex w-full cursor-pointer items-center gap-2 border-none bg-transparent px-3.5 py-1.5 text-left text-[14px] text-text hover:bg-selection app-no-drag';
+const triggerClassName = '!rounded-full hover:!bg-[rgba(0,122,255,0.18)] dark:hover:!bg-[rgba(10,132,255,0.22)]';
+/**
+ * Caret-triggered menu for toggling which segmented tabs are visible.
+ */
+export function SegmentedTabsVisibilityMenu({ tabs, visibleTabValues, onToggle }) {
+    const menuId = useId();
+    const menuElementId = `${menuId}-menu`;
+    const rootRef = useRef(null);
+    const triggerRef = useRef(null);
+    const itemRefs = useRef([]);
+    const wasOpenRef = useRef(false);
+    const [isOpen, setIsOpen] = useState(false);
+    const [focusedIndex, setFocusedIndex] = useState(0);
+    const visibleSet = new Set(visibleTabValues);
+    /**
+     * Closes the menu and returns focus to the trigger button.
+     */
+    const closeMenu = useCallback(() => {
+        setIsOpen(false);
+        requestAnimationFrame(() => {
+            triggerRef.current?.focus();
+        });
+    }, []);
+    /**
+     * Opens the menu and focuses the first or last item.
+     *
+     * @param focusLast - When true, focus the last item instead of the first.
+     */
+    const openMenu = useCallback((focusLast = false) => {
+        if (tabs.length === 0)
+            return;
+        setFocusedIndex(focusLast ? tabs.length - 1 : 0);
+        setIsOpen(true);
+    }, [tabs.length]);
+    /**
+     * Focuses a menu item by index and updates roving tabindex state.
+     *
+     * @param index - Index of the menu item to focus.
+     */
+    const focusItem = useCallback((index) => {
+        setFocusedIndex(index);
+        requestAnimationFrame(() => {
+            itemRefs.current[index]?.focus();
+        });
+    }, []);
+    /**
+     * Moves focus into the menu after it opens and item refs are mounted.
+     */
+    useEffect(() => {
+        if (isOpen && !wasOpenRef.current) {
+            requestAnimationFrame(() => {
+                itemRefs.current[focusedIndex]?.focus();
+            });
+        }
+        wasOpenRef.current = isOpen;
+    }, [focusedIndex, isOpen]);
+    /**
+     * Resets item refs when the menu closes.
+     */
+    useEffect(() => {
+        if (!isOpen) {
+            itemRefs.current = [];
+            setFocusedIndex(0);
+        }
+    }, [isOpen]);
+    /**
+     * Closes the menu on outside click or Escape while it is open.
+     */
+    useEffect(() => {
+        if (!isOpen)
+            return;
+        const handleMouseDown = (e) => {
+            if (rootRef.current && !rootRef.current.contains(e.target)) {
+                closeMenu();
+            }
+        };
+        const handleKeyDown = (e) => {
+            if (e.key === 'Escape') {
+                e.preventDefault();
+                closeMenu();
+            }
+        };
+        document.addEventListener('mousedown', handleMouseDown);
+        document.addEventListener('keydown', handleKeyDown);
+        return () => {
+            document.removeEventListener('mousedown', handleMouseDown);
+            document.removeEventListener('keydown', handleKeyDown);
+        };
+    }, [closeMenu, isOpen]);
+    /**
+     * Handles keyboard interaction on the menu trigger when closed.
+     *
+     * @param event - Keyboard event from the trigger button.
+     */
+    const handleTriggerKeyDown = (event) => {
+        if (isOpen)
+            return;
+        if (event.key === 'ArrowDown' || event.key === 'Enter' || event.key === ' ') {
+            event.preventDefault();
+            openMenu(false);
+            return;
+        }
+        if (event.key === 'ArrowUp') {
+            event.preventDefault();
+            openMenu(true);
+        }
+    };
+    /**
+     * Handles keyboard navigation within the open menu.
+     *
+     * @param event - Keyboard event from the menu container.
+     */
+    const handleMenuKeyDown = (event) => {
+        if (tabs.length === 0)
+            return;
+        if (event.key === 'Tab') {
+            closeMenu();
+            return;
+        }
+        const arrowIndex = resolveTabListKeyAction(event.key, focusedIndex, tabs.length);
+        if (arrowIndex !== null) {
+            event.preventDefault();
+            focusItem(arrowIndex);
+        }
+    };
+    return (_jsxs("div", { ref: rootRef, className: "hc-segmented-tabs-visibility-menu relative shrink-0", children: [_jsx(Button, { innerRef: triggerRef, type: "button", variant: "icon", className: triggerClassName, "aria-label": "Customize visible tabs", "aria-haspopup": "menu", "aria-expanded": isOpen, "aria-controls": isOpen ? menuElementId : undefined, onClick: () => {
+                    if (isOpen) {
+                        closeMenu();
+                    }
+                    else {
+                        openMenu(false);
+                    }
+                }, onKeyDown: handleTriggerKeyDown, children: _jsx(FaIcon, { icon: faCaretDown, className: "h-3.5 w-3.5" }) }), isOpen && (_jsx("div", { id: menuElementId, role: "menu", className: "absolute right-0 top-full z-10 mt-0.5 min-w-[140px] rounded-md border border-separator bg-surface py-1 shadow-md app-no-drag", onKeyDown: handleMenuKeyDown, children: tabs.map((tab, index) => {
+                    const checked = visibleSet.has(tab.value);
+                    return (_jsx(MenuCheckboxItem, { ref: (element) => {
+                            itemRefs.current[index] = element;
+                        }, checked: checked, tabIndex: index === focusedIndex ? 0 : -1, label: tab.label, onSelect: () => onToggle(tab.value) }, tab.value));
+                }) }))] }));
+}
+/**
+ * Single checkbox-style row in the tab visibility menu.
+ */
+function MenuCheckboxItem({ checked, label, tabIndex, onSelect, ref }) {
+    return (_jsxs("button", { ref: ref, type: "button", role: "menuitemcheckbox", "aria-checked": checked, tabIndex: tabIndex, className: menuItemClass, onClick: (e) => {
+            e.stopPropagation();
+            onSelect();
+        }, children: [_jsx("span", { className: "inline-flex w-4 shrink-0 justify-center", "aria-hidden": true, children: checked ? _jsx(FaIcon, { icon: faCheck, className: "h-3 w-3" }) : null }), _jsx("span", { className: "min-w-0", children: label })] }));
+}

package/dist/components/SegmentedTabs/index.d.ts

@@ -19,6 +19,26 @@ interface Props<T extends string> {
      * @param value - Newly selected tab value.
      */
     onChange?: (value: T) => void;
+    /**
+     * When true, shows a menu for toggling tab visibility.
+     */
+    editable?: boolean;
+    /**
+     * Controlled set of tab values shown in the tab strip. Used with
+     * `onVisibleTabValuesChange` when tab visibility is persisted.
+     */
+    visibleTabValues?: T[];
+    /**
+     * Initial visible tab values for uncontrolled visibility. Defaults to all
+     * non-`hidden` tabs. Keep a copy in the parent to reset saved preferences.
+     */
+    defaultVisibleTabValues?: T[];
+    /**
+     * Called when the user toggles tab visibility in the edit menu.
+     *
+     * @param visibleTabValues - Updated visible tab values.
+     */
+    onVisibleTabValuesChange?: (visibleTabValues: T[]) => void;
     /**
      * When true, the group and each tab stretch to full width.
      */
@@ -41,5 +61,5 @@ interface Props<T extends string> {
 /**
  * macOS-style segmented tab control with WAI-ARIA tabs or radiogroup semantics.
  */
-export declare function SegmentedTabs<T extends string>({ tabs, value: valueProp, onChange: onChangeProp, fullWidth, className, pattern, ariaLabel: ariaLabelProp }: Props<T>): JSX.Element;
+export declare function SegmentedTabs<T extends string>({ tabs, value: valueProp, onChange: onChangeProp, editable, visibleTabValues: visibleTabValuesProp, defaultVisibleTabValues, onVisibleTabValuesChange, fullWidth, className, pattern, ariaLabel: ariaLabelProp }: Props<T>): JSX.Element;
 //# sourceMappingURL=index.d.ts.map

package/dist/components/SegmentedTabs/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/SegmentedTabs/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,GAAG,EAAiB,MAAM,OAAO,CAAC;AAIhD,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,YAAY,CAAC;AAE1C,OAAO,EAAE,kBAAkB,EAAE,MAAM,yBAAyB,CAAC;AAC7D,OAAO,EAAE,iBAAiB,EAAE,MAAM,wBAAwB,CAAC;AAC3D,YAAY,EAAE,OAAO,EAAE,MAAM,YAAY,CAAC;AAE1C,UAAU,KAAK,CAAC,CAAC,SAAS,MAAM;IAC9B;;OAEG;IACH,IAAI,EAAE,OAAO,CAAC,CAAC,CAAC,EAAE,CAAC;IAEnB;;OAEG;IACH,KAAK,CAAC,EAAE,CAAC,CAAC;IAEV;;;;;OAKG;IACH,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,CAAC,KAAK,IAAI,CAAC;IAE9B;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;;OAGG;IACH,OAAO,CAAC,EAAE,MAAM,GAAG,YAAY,CAAC;IAEhC;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;GAEG;AACH,wBAAgB,aAAa,CAAC,CAAC,SAAS,MAAM,EAAE,EAC9C,IAAI,EACJ,KAAK,EAAE,SAAS,EAChB,QAAQ,EAAE,YAAY,EACtB,SAAiB,EACjB,SAAS,EACT,OAAgB,EAChB,SAAS,EAAE,aAAa,EACzB,EAAE,KAAK,CAAC,CAAC,CAAC,GAAG,GAAG,CAAC,OAAO,CA+GxB"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/SegmentedTabs/index.tsx"],"names":[],"mappings":"AASA,OAAO,KAAK,EAAE,GAAG,EAAiB,MAAM,OAAO,CAAC;AAKhD,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,YAAY,CAAC;AAE1C,OAAO,EAAE,kBAAkB,EAAE,MAAM,yBAAyB,CAAC;AAC7D,OAAO,EAAE,iBAAiB,EAAE,MAAM,wBAAwB,CAAC;AAC3D,YAAY,EAAE,OAAO,EAAE,MAAM,YAAY,CAAC;AAE1C,UAAU,KAAK,CAAC,CAAC,SAAS,MAAM;IAC9B;;OAEG;IACH,IAAI,EAAE,OAAO,CAAC,CAAC,CAAC,EAAE,CAAC;IAEnB;;OAEG;IACH,KAAK,CAAC,EAAE,CAAC,CAAC;IAEV;;;;;OAKG;IACH,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,CAAC,KAAK,IAAI,CAAC;IAE9B;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB;;;OAGG;IACH,gBAAgB,CAAC,EAAE,CAAC,EAAE,CAAC;IAEvB;;;OAGG;IACH,uBAAuB,CAAC,EAAE,CAAC,EAAE,CAAC;IAE9B;;;;OAIG;IACH,wBAAwB,CAAC,EAAE,CAAC,gBAAgB,EAAE,CAAC,EAAE,KAAK,IAAI,CAAC;IAE3D;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;;OAGG;IACH,OAAO,CAAC,EAAE,MAAM,GAAG,YAAY,CAAC;IAEhC;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;GAEG;AACH,wBAAgB,aAAa,CAAC,CAAC,SAAS,MAAM,EAAE,EAC9C,IAAI,EACJ,KAAK,EAAE,SAAS,EAChB,QAAQ,EAAE,YAAY,EACtB,QAAe,EACf,gBAAgB,EAAE,oBAAoB,EACtC,uBAAuB,EACvB,wBAAwB,EACxB,SAAiB,EACjB,SAAS,EACT,OAAgB,EAChB,SAAS,EAAE,aAAa,EACzB,EAAE,KAAK,CAAC,CAAC,CAAC,GAAG,GAAG,CAAC,OAAO,CAuNxB"}

package/dist/components/SegmentedTabs/index.js

@@ -1,14 +1,15 @@
 import { jsx as _jsx, jsxs as _jsxs } from "@harborclient/sdk/jsx-runtime";
-import { useCallback, useContext, useId, useMemo, useRef } from '@harborclient/sdk/react';
+import { useCallback, useContext, useEffect, useId, useMemo, useRef, useState } from '@harborclient/sdk/react';
 import { resolveTabListKeyAction } from '../utils.js';
 import { segment, segmentGroup } from '../classes.js';
 import { SegmentedTabsContext } from './SegmentedTabsContext.js';
+import { SegmentedTabsVisibilityMenu } from './SegmentedTabsVisibilityMenu.js';
 export { SegmentedTabsGroup } from './SegmentedTabsGroup.js';
 export { SegmentedTabPanel } from './SegmentedTabPanel.js';
 /**
  * macOS-style segmented tab control with WAI-ARIA tabs or radiogroup semantics.
  */
-export function SegmentedTabs({ tabs, value: valueProp, onChange: onChangeProp, fullWidth = false, className, pattern = 'tabs', ariaLabel: ariaLabelProp }) {
+export function SegmentedTabs({ tabs, value: valueProp, onChange: onChangeProp, editable = true, visibleTabValues: visibleTabValuesProp, defaultVisibleTabValues, onVisibleTabValuesChange, fullWidth = false, className, pattern = 'tabs', ariaLabel: ariaLabelProp }) {
     const context = useContext(SegmentedTabsContext);
     const standaloneId = useId();
     const tabRefs = useRef(new Map());
@@ -32,8 +33,84 @@ export function SegmentedTabs({ tabs, value: valueProp, onChange: onChangeProp,
     const getPanelId = context
         ? (tabValue) => context.getPanelId(tabValue)
         : (tabValue) => `${standaloneId}-panel-${tabValue}`;
-    const visibleTabs = tabs.filter((tab) => !tab.hidden);
-    const groupClassName = ['hc-segmented-tabs', segmentGroup, fullWidth ? 'w-full' : '', className]
+    const editableTabs = useMemo(() => tabs.filter((tab) => !tab.hidden), [tabs]);
+    const defaultVisible = useMemo(() => defaultVisibleTabValues ?? editableTabs.map((tab) => tab.value), [defaultVisibleTabValues, editableTabs]);
+    const [internalVisibleTabValues, setInternalVisibleTabValues] = useState(defaultVisible);
+    const visibleTabValues = visibleTabValuesProp ?? internalVisibleTabValues;
+    const visibleSet = useMemo(() => new Set(visibleTabValues), [visibleTabValues]);
+    const visibleTabs = editable
+        ? editableTabs.filter((tab) => visibleSet.has(tab.value))
+        : editableTabs;
+    /**
+     * Updates visible tab values and notifies the parent when controlled props
+     * are used for persistence.
+     *
+     * @param nextVisibleTabValues - New visible tab values.
+     */
+    const updateVisibleTabValues = useCallback((nextVisibleTabValues) => {
+        if (visibleTabValuesProp === undefined) {
+            setInternalVisibleTabValues(nextVisibleTabValues);
+        }
+        onVisibleTabValuesChange?.(nextVisibleTabValues);
+    }, [onVisibleTabValuesChange, visibleTabValuesProp]);
+    /**
+     * Toggles a tab's visibility in the edit menu, keeping at least one tab
+     * visible and moving selection when the active tab is hidden.
+     *
+     * @param tabValue - Tab value to show or hide.
+     */
+    const handleVisibilityToggle = useCallback((tabValue) => {
+        const isVisible = visibleSet.has(tabValue);
+        if (isVisible && visibleTabs.length <= 1)
+            return;
+        const nextVisibleSet = new Set(visibleTabValues);
+        if (isVisible) {
+            nextVisibleSet.delete(tabValue);
+        }
+        else {
+            nextVisibleSet.add(tabValue);
+        }
+        const nextVisibleTabValues = editableTabs
+            .filter((tab) => nextVisibleSet.has(tab.value))
+            .map((tab) => tab.value);
+        updateVisibleTabValues(nextVisibleTabValues);
+        if (isVisible && tabValue === value) {
+            const nextSelectedTab = editableTabs.find((tab) => nextVisibleSet.has(tab.value));
+            if (nextSelectedTab) {
+                onChange(nextSelectedTab.value);
+            }
+        }
+    }, [
+        editableTabs,
+        onChange,
+        updateVisibleTabValues,
+        value,
+        visibleSet,
+        visibleTabValues,
+        visibleTabs.length
+    ]);
+    /**
+     * When visibility changes externally, select the first visible tab if the
+     * current selection is hidden.
+     */
+    useEffect(() => {
+        if (!editable || visibleSet.has(value))
+            return;
+        const nextSelectedTab = visibleTabs[0];
+        if (nextSelectedTab) {
+            onChange(nextSelectedTab.value);
+        }
+    }, [editable, onChange, value, visibleSet, visibleTabs]);
+    const outerClassName = [
+        'hc-segmented-tabs',
+        segmentGroup,
+        'items-center gap-1',
+        fullWidth ? 'flex-1 min-w-0' : '',
+        className
+    ]
+        .filter(Boolean)
+        .join(' ');
+    const tabListClassName = ['inline-flex min-w-0 flex-1 items-center', fullWidth ? 'w-full' : '']
         .filter(Boolean)
         .join(' ');
     /**
@@ -62,21 +139,21 @@ export function SegmentedTabs({ tabs, value: valueProp, onChange: onChangeProp,
         });
     }, [visibleTabs, value, onChange]);
     const isRadiogroup = pattern === 'radiogroup';
-    return (_jsx("div", { className: groupClassName, role: isRadiogroup ? 'radiogroup' : 'tablist', "aria-label": ariaLabel, ...(!isRadiogroup ? { 'aria-orientation': 'horizontal' } : {}), onKeyDown: handleKeyDown, children: visibleTabs.map((tab) => {
-            const selected = value === tab.value;
-            const tabClassName = `${segment(selected)}${fullWidth ? ' flex-1' : ''}`;
-            return (_jsx("button", { ref: (element) => {
-                    if (element)
-                        tabRefs.current.set(tab.value, element);
-                    else
-                        tabRefs.current.delete(tab.value);
-                }, type: "button", className: tabClassName, disabled: tab.disabled, tabIndex: selected ? 0 : -1, onClick: () => onChange(tab.value), ...(isRadiogroup
-                    ? { role: 'radio', 'aria-checked': selected }
-                    : {
-                        role: 'tab',
-                        id: getTabId(tab.value),
-                        'aria-selected': selected,
-                        ...(context ? { 'aria-controls': getPanelId(tab.value) } : {})
-                    }), children: _jsxs("span", { className: "inline-flex items-center gap-1.5", children: [tab.label, tab.indicator && _jsx("span", { className: "h-1.5 w-1.5 rounded-full bg-accent", "aria-hidden": true })] }) }, tab.value));
-        }) }));
+    return (_jsxs("div", { className: outerClassName, children: [_jsx("div", { className: tabListClassName, role: isRadiogroup ? 'radiogroup' : 'tablist', "aria-label": ariaLabel, ...(!isRadiogroup ? { 'aria-orientation': 'horizontal' } : {}), onKeyDown: handleKeyDown, children: visibleTabs.map((tab) => {
+                    const selected = value === tab.value;
+                    const tabClassName = `${segment(selected)}${fullWidth ? ' flex-1' : ''}`;
+                    return (_jsx("button", { ref: (element) => {
+                            if (element)
+                                tabRefs.current.set(tab.value, element);
+                            else
+                                tabRefs.current.delete(tab.value);
+                        }, type: "button", className: tabClassName, disabled: tab.disabled, tabIndex: selected ? 0 : -1, onClick: () => onChange(tab.value), ...(isRadiogroup
+                            ? { role: 'radio', 'aria-checked': selected }
+                            : {
+                                role: 'tab',
+                                id: getTabId(tab.value),
+                                'aria-selected': selected,
+                                ...(context ? { 'aria-controls': getPanelId(tab.value) } : {})
+                            }), children: _jsxs("span", { className: "inline-flex items-center gap-1.5", children: [tab.label, tab.indicator && (_jsx("span", { className: "h-1.5 w-1.5 rounded-full bg-accent", "aria-hidden": true }))] }) }, tab.value));
+                }) }), editable && (_jsx(SegmentedTabsVisibilityMenu, { tabs: editableTabs, visibleTabValues: visibleTabValues, onToggle: handleVisibilityToggle }))] }));
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@harborclient/sdk",
-  "version": "1.0.16",
+  "version": "1.0.18",
   "description": "TypeScript SDK for HarborClient plugin development.",
   "keywords": [
     "harborclient",