@monolith-forensics/monolith-ui 1.3.112-dev.1 → 1.3.112-dev.2

package/dist/SegmentedControl/SegmentedControl.d.ts

@@ -0,0 +1,3 @@
+import { SegmentedControlProps } from "./SegmentedControl.types";
+export type { SegmentedControlDataItem, SegmentedControlProps, SegmentedControlVariant, } from "./SegmentedControl.types";
+export declare const SegmentedControl: React.FC<SegmentedControlProps>;

package/dist/SegmentedControl/SegmentedControl.js

@@ -0,0 +1,67 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useUncontrolled } from "@mantine/hooks";
+import { useEffect, useMemo, useRef } from "react";
+import { getFirstEnabledIndex, normalizeSegmentedData } from "./SegmentedControl.utils";
+import { StyledIndicator, StyledRoot, StyledSegmentButton, } from "./SegmentedControl.styles";
+import { useSegmentedKeyboardNav } from "./useSegmentedKeyboardNav";
+export const SegmentedControl = (_a) => {
+    var { data, value, defaultValue, onChange, size = "sm", fullWidth = false, disabled = false, variant = "outlined", activeColor, name, className, style, onKeyDown } = _a, other = __rest(_a, ["data", "value", "defaultValue", "onChange", "size", "fullWidth", "disabled", "variant", "activeColor", "name", "className", "style", "onKeyDown"]);
+    const normalizedData = useMemo(() => normalizeSegmentedData(data), [data]);
+    const firstEnabledValue = useMemo(() => { var _a, _b; return (_b = (_a = normalizedData.find((item) => !item.disabled)) === null || _a === void 0 ? void 0 : _a.value) !== null && _b !== void 0 ? _b : ""; }, [normalizedData]);
+    const [_value, handleChange] = useUncontrolled({
+        value,
+        defaultValue,
+        finalValue: firstEnabledValue,
+        onChange,
+    });
+    const activeIndex = normalizedData.findIndex((item) => item.value === _value);
+    const selectedItem = normalizedData[activeIndex];
+    const buttonRefs = useRef([]);
+    useEffect(() => {
+        if (normalizedData.length === 0)
+            return;
+        if (selectedItem && !selectedItem.disabled)
+            return;
+        const firstEnabled = normalizedData.find((item) => !item.disabled);
+        if (!firstEnabled)
+            return;
+        if (_value !== firstEnabled.value) {
+            handleChange(firstEnabled.value);
+        }
+    }, [normalizedData, selectedItem, _value, handleChange]);
+    const handleSelect = (item) => {
+        if (disabled || item.disabled)
+            return;
+        handleChange(item.value);
+    };
+    const handleKeyDown = useSegmentedKeyboardNav({
+        disabled,
+        data: normalizedData,
+        activeIndex,
+        onChange: handleChange,
+        buttonRefs,
+        onKeyDown,
+    });
+    const columnCount = Math.max(normalizedData.length, 1);
+    const firstEnabledIndex = getFirstEnabledIndex(normalizedData);
+    return (_jsxs(StyledRoot, Object.assign({ role: "radiogroup", "aria-disabled": disabled, className: className, style: Object.assign({ gridTemplateColumns: `repeat(${columnCount}, minmax(0, 1fr))` }, style), "$fullWidth": fullWidth, "$disabled": disabled, onKeyDown: handleKeyDown }, other, { children: [name && _jsx("input", { type: "hidden", name: name, value: _value || "" }), activeIndex >= 0 && !(selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.disabled) && (_jsx(StyledIndicator, { "$index": activeIndex, "$count": columnCount, "$variant": variant, "$activeColor": activeColor })), normalizedData.map((item, index) => {
+                const isActive = item.value === _value && !item.disabled;
+                const isSegmentDisabled = disabled || item.disabled;
+                return (_jsx(StyledSegmentButton, { ref: (node) => {
+                        buttonRefs.current[index] = node;
+                    }, type: "button", role: "radio", "aria-checked": isActive, disabled: isSegmentDisabled, tabIndex: isActive || (activeIndex < 0 && index === firstEnabledIndex)
+                        ? 0
+                        : -1, "$size": size, "$active": isActive, "$variant": variant, "$activeColor": activeColor, onClick: () => handleSelect(item), children: item.label }, item.value));
+            })] })));
+};

package/dist/SegmentedControl/SegmentedControl.styles.d.ts

@@ -0,0 +1,18 @@
+import { Size } from "../core";
+import { SegmentedControlVariant } from "./SegmentedControl.types";
+export declare const StyledRoot: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
+    $fullWidth: boolean;
+    $disabled: boolean;
+}>> & string;
+export declare const StyledIndicator: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
+    $index: number;
+    $count: number;
+    $variant: SegmentedControlVariant;
+    $activeColor?: string;
+}>> & string;
+export declare const StyledSegmentButton: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, {
+    $size?: Size;
+    $active: boolean;
+    $variant: SegmentedControlVariant;
+    $activeColor?: string;
+}>> & string;

package/dist/SegmentedControl/SegmentedControl.styles.js

@@ -0,0 +1,77 @@
+import styled from "styled-components";
+import { getSegmentFontSize, getSegmentHeight, resolveActiveColor, } from "./SegmentedControl.utils";
+export const StyledRoot = styled.div `
+  user-select: none;
+  position: relative;
+  display: grid;
+  align-items: center;
+  width: ${({ $fullWidth }) => ($fullWidth ? "100%" : "fit-content")};
+  min-width: ${({ $fullWidth }) => ($fullWidth ? "0" : "200px")};
+  padding: 3px;
+  border-radius: 8px;
+  border: 1px solid ${({ theme }) => theme.palette.action.hover};
+  background: ${({ theme }) => theme.palette.background.secondary};
+  opacity: ${({ $disabled }) => ($disabled ? 0.6 : 1)};
+  pointer-events: ${({ $disabled }) => ($disabled ? "none" : "auto")};
+`;
+export const StyledIndicator = styled.div `
+  position: absolute;
+  top: 3px;
+  left: 3px;
+  z-index: 1;
+  height: calc(100% - 6px);
+  width: ${({ $count }) => `calc((100% - 6px) / ${$count})`};
+  border-radius: 6px;
+  border: 1px solid
+    ${({ theme, $variant, $activeColor }) => {
+    const resolved = resolveActiveColor(theme, $activeColor);
+    return $variant === "contained" ? resolved.main : resolved.main;
+}};
+  background: ${({ theme, $variant, $activeColor }) => {
+    const resolved = resolveActiveColor(theme, $activeColor);
+    return $variant === "contained"
+        ? resolved.main
+        : theme.palette.background.paper;
+}};
+  transform: translateX(${({ $index }) => `${$index * 100}%`});
+  transition: transform 160ms ease;
+`;
+export const StyledSegmentButton = styled.button `
+  position: relative;
+  z-index: 2;
+  border: none;
+  outline: none;
+  padding: 0 12px;
+  margin: 0;
+  border-radius: 6px;
+  background: transparent;
+  color: ${({ theme, $active, $variant, $activeColor }) => {
+    const resolved = resolveActiveColor(theme, $activeColor);
+    if (!$active)
+        return theme.palette.text.secondary;
+    return $variant === "contained" ? resolved.contrastText : resolved.main;
+}};
+  font-size: ${({ $size }) => getSegmentFontSize($size)};
+  font-weight: 500;
+  line-height: 1;
+  height: ${({ $size }) => `${getSegmentHeight($size)}px`};
+  white-space: nowrap;
+  cursor: pointer;
+  transition:
+    color 160ms ease,
+    background-color 160ms ease;
+
+  &:hover {
+    background: ${({ theme, $active }) => $active ? "transparent" : theme.palette.action.hover};
+  }
+
+  &:focus-visible {
+    box-shadow: inset 0 0 0 1px ${({ theme }) => theme.palette.primary.main};
+  }
+
+  &:disabled {
+    cursor: not-allowed;
+    color: ${({ theme }) => theme.palette.text.disabled};
+    background: transparent;
+  }
+`;

package/dist/SegmentedControl/SegmentedControl.types.d.ts

@@ -0,0 +1,25 @@
+import { HTMLAttributes, ReactNode } from "react";
+import { Size } from "../core";
+export type NormalizedSegmentedItem = {
+    label: ReactNode;
+    value: string;
+    disabled: boolean;
+};
+export type SegmentedControlDataItem = string | {
+    label: ReactNode;
+    value: string;
+    disabled?: boolean;
+};
+export type SegmentedControlVariant = "outlined" | "contained";
+export interface SegmentedControlProps extends Omit<HTMLAttributes<HTMLDivElement>, "defaultValue" | "onChange"> {
+    data: SegmentedControlDataItem[];
+    value?: string;
+    defaultValue?: string;
+    onChange?: (value: string) => void;
+    size?: Size;
+    fullWidth?: boolean;
+    disabled?: boolean;
+    name?: string;
+    variant?: SegmentedControlVariant;
+    activeColor?: string;
+}

package/dist/SegmentedControl/SegmentedControl.types.js

@@ -0,0 +1 @@
+export {};

package/dist/SegmentedControl/SegmentedControl.utils.d.ts

@@ -0,0 +1,11 @@
+import { Size } from "../core";
+import { NormalizedSegmentedItem, SegmentedControlDataItem } from "./SegmentedControl.types";
+export declare const resolveActiveColor: (theme: any, activeColor?: string) => {
+    main: any;
+    contrastText: any;
+};
+export declare const getSegmentHeight: (size?: Size) => 32 | 38 | 22 | 26 | 46 | 56;
+export declare const getSegmentFontSize: (size?: Size) => "11px" | "12px" | "14px" | "16px" | "18px" | "20px";
+export declare const normalizeSegmentedData: (data: SegmentedControlDataItem[]) => NormalizedSegmentedItem[];
+export declare const getFirstEnabledIndex: (data: NormalizedSegmentedItem[]) => number;
+export declare const getNextEnabledIndex: (data: NormalizedSegmentedItem[], startIndex: number, direction: 1 | -1) => number;

package/dist/SegmentedControl/SegmentedControl.utils.js

@@ -0,0 +1,84 @@
+export const resolveActiveColor = (theme, activeColor) => {
+    var _a;
+    const fallback = {
+        main: theme.palette.primary.main,
+        contrastText: theme.palette.primary.contrastText,
+    };
+    if (!activeColor)
+        return fallback;
+    const paletteCandidate = (_a = theme.palette) === null || _a === void 0 ? void 0 : _a[activeColor];
+    if (paletteCandidate &&
+        typeof paletteCandidate === "object" &&
+        "main" in paletteCandidate) {
+        return {
+            main: paletteCandidate.main,
+            contrastText: paletteCandidate.contrastText || fallback.contrastText,
+        };
+    }
+    return {
+        main: activeColor,
+        contrastText: fallback.contrastText,
+    };
+};
+export const getSegmentHeight = (size) => {
+    switch (size) {
+        case "xxs":
+            return 22;
+        case "xs":
+            return 26;
+        case "md":
+            return 38;
+        case "lg":
+            return 46;
+        case "xl":
+            return 56;
+        case "sm":
+        default:
+            return 32;
+    }
+};
+export const getSegmentFontSize = (size) => {
+    switch (size) {
+        case "xxs":
+            return "11px";
+        case "xs":
+            return "12px";
+        case "md":
+            return "16px";
+        case "lg":
+            return "18px";
+        case "xl":
+            return "20px";
+        case "sm":
+        default:
+            return "14px";
+    }
+};
+export const normalizeSegmentedData = (data) => data.map((item) => {
+    var _a;
+    return typeof item === "string"
+        ? {
+            label: item,
+            value: item,
+            disabled: false,
+        }
+        : {
+            label: item.label,
+            value: item.value,
+            disabled: (_a = item.disabled) !== null && _a !== void 0 ? _a : false,
+        };
+});
+export const getFirstEnabledIndex = (data) => data.findIndex((item) => item.disabled === false);
+export const getNextEnabledIndex = (data, startIndex, direction) => {
+    var _a;
+    if (data.length === 0)
+        return -1;
+    let index = startIndex;
+    for (let i = 0; i < data.length; i += 1) {
+        index = (index + direction + data.length) % data.length;
+        if (!((_a = data[index]) === null || _a === void 0 ? void 0 : _a.disabled)) {
+            return index;
+        }
+    }
+    return -1;
+};

package/dist/SegmentedControl/index.d.ts

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

package/dist/SegmentedControl/index.js

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

package/dist/SegmentedControl/useSegmentedKeyboardNav.d.ts

@@ -0,0 +1,12 @@
+import { KeyboardEvent, KeyboardEventHandler, MutableRefObject } from "react";
+import { NormalizedSegmentedItem } from "./SegmentedControl.types";
+type UseSegmentedKeyboardNavProps = {
+    disabled: boolean;
+    data: NormalizedSegmentedItem[];
+    activeIndex: number;
+    onChange: (value: string) => void;
+    buttonRefs: MutableRefObject<Array<HTMLButtonElement | null>>;
+    onKeyDown?: KeyboardEventHandler<HTMLDivElement>;
+};
+export declare const useSegmentedKeyboardNav: ({ disabled, data, activeIndex, onChange, buttonRefs, onKeyDown, }: UseSegmentedKeyboardNavProps) => (event: KeyboardEvent<HTMLDivElement>) => void;
+export {};

package/dist/SegmentedControl/useSegmentedKeyboardNav.js

@@ -0,0 +1,53 @@
+import { useCallback, } from "react";
+import { getFirstEnabledIndex, getNextEnabledIndex } from "./SegmentedControl.utils";
+const getLastEnabledIndex = (data) => {
+    const reverseIndex = [...data].reverse().findIndex((item) => !item.disabled);
+    return reverseIndex < 0 ? -1 : data.length - 1 - reverseIndex;
+};
+export const useSegmentedKeyboardNav = ({ disabled, data, activeIndex, onChange, buttonRefs, onKeyDown, }) => {
+    return useCallback((event) => {
+        var _a, _b, _c;
+        onKeyDown === null || onKeyDown === void 0 ? void 0 : onKeyDown(event);
+        if (event.defaultPrevented || disabled || data.length === 0)
+            return;
+        const firstEnabledIndex = getFirstEnabledIndex(data);
+        if (firstEnabledIndex < 0)
+            return;
+        if (event.key === "Home") {
+            event.preventDefault();
+            const target = data[firstEnabledIndex];
+            if (target) {
+                onChange(target.value);
+                (_a = buttonRefs.current[firstEnabledIndex]) === null || _a === void 0 ? void 0 : _a.focus();
+            }
+            return;
+        }
+        if (event.key === "End") {
+            event.preventDefault();
+            const lastEnabledIndex = getLastEnabledIndex(data);
+            const target = data[lastEnabledIndex];
+            if (target) {
+                onChange(target.value);
+                (_b = buttonRefs.current[lastEnabledIndex]) === null || _b === void 0 ? void 0 : _b.focus();
+            }
+            return;
+        }
+        const directionKeys = {
+            ArrowRight: 1,
+            ArrowDown: 1,
+            ArrowLeft: -1,
+            ArrowUp: -1,
+        };
+        const direction = directionKeys[event.key];
+        if (!direction)
+            return;
+        event.preventDefault();
+        const startIndex = activeIndex >= 0 ? activeIndex : firstEnabledIndex;
+        const nextIndex = getNextEnabledIndex(data, startIndex, direction);
+        const target = data[nextIndex];
+        if (target) {
+            onChange(target.value);
+            (_c = buttonRefs.current[nextIndex]) === null || _c === void 0 ? void 0 : _c.focus();
+        }
+    }, [activeIndex, buttonRefs, data, disabled, onChange, onKeyDown]);
+};

package/dist/index.d.ts

@@ -41,3 +41,4 @@ export * from "./Table";
 export type { ColumnProps, TableProps } from "./Table";
 export * from "./Tabs";
 export * from "./Divider";
+export * from "./SegmentedControl";

package/dist/index.js

@@ -33,3 +33,4 @@ export * from "./FileViewer";
 export * from "./Table";
 export * from "./Tabs";
 export * from "./Divider";
+export * from "./SegmentedControl";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@monolith-forensics/monolith-ui",
-  "version": "1.3.112-dev.1",
+  "version": "1.3.112-dev.2",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
   "author": "Matt Danner (Monolith Forensics LLC)",