pixelize-design-library 2.4.2-beta.5 → 2.4.2-beta.50

package/dist/esm/Components/SegmentedControl/SegmentedControl.js

@@ -0,0 +1,107 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { Box, Flex } from "@chakra-ui/react";
+import { useCustomTheme } from "../../Theme/useCustomTheme.js";
+import { resolveFilledSurface } from "../../Theme/tokens/builders/filledSurface.js";
+import { CONTROL_SIZES } from "../../Theme/tokens/primitives/controlSizes.js";
+import { transitionFor } from "../../Theme/tokens/primitives/motion.js";
+import { FOCUS_VISIBLE_OVER_STATE } from "../../Theme/chakra/focusRing.styles.js";
+import { reducedMotionSx } from "../../Theme/chakra/motion.js";
+import { AA_NORMAL_TEXT } from "../../Theme/tokens/builders/accentText.js";
+import { liftToContrast } from "../../Theme/tokens/builders/outlineRung.js";
+import Tag from "../Tag/Tag.js";
+import { useSlidingPill } from "./useSlidingPill.js";
+import { segmentedFocusShadow, segmentedPlateEdge, segmentedRestInk, segmentedTrackSurface, } from "./segmentedInk.js";
+const TRACK_PADDING = "0.125rem";
+const UNDERLINE_WIDTH = "0.0625rem";
+const SLIDE = transitionFor(["transform", "width"], "base");
+const MAX_COUNT = 99;
+const COUNT_TAG_SIZE = { sm: "xs", md: "sm", lg: "md" };
+const formatCount = (count) => (count > MAX_COUNT ? `${MAX_COUNT}+` : `${count}`);
+/** Renders role="radiogroup" of role="radio" buttons with roving tabindex, not a native form radio group; shares variant with Toggle/TableToggle (see MODULE.md). */
+export default function SegmentedControl({ options, value, onChange, size = "sm", isFullWidth = false, variant = "default", surface, "aria-label": ariaLabel, }) {
+    const { colors, radii } = useCustomTheme();
+    const control = CONTROL_SIZES[size];
+    const isBrandSlide = variant === "brandSlide";
+    const isUnderlineSlide = variant === "underlineSlide";
+    const hasIndicator = isBrandSlide || isUnderlineSlide;
+    const brandFill = resolveFilledSurface(colors.primary, colors);
+    const trackSurface = segmentedTrackSurface(variant, colors, surface);
+    const restInk = segmentedRestInk(colors, trackSurface);
+    const selectedInk = liftToContrast(colors.accentText, trackSurface, AA_NORMAL_TEXT);
+    const hoverInk = liftToContrast(colors.text[900], trackSurface, AA_NORMAL_TEXT);
+    const segmentH = `calc(${control.height} - ${isUnderlineSlide ? UNDERLINE_WIDTH : `2 * ${TRACK_PADDING}`})`;
+    // Concentric: an inset child keeping the parent's radius bulges at the corners.
+    const innerRadius = isUnderlineSlide ? "none" : `calc(${radii.lg} - ${TRACK_PADDING})`;
+    const focusShadow = segmentedFocusShadow(colors, trackSurface);
+    // Inset, never a border: a border consumes the content box and the absolute pill stops centring.
+    const plateEdge = isBrandSlide
+        ? `inset 0 0 0 1px ${segmentedPlateEdge(colors, surface)}`
+        : undefined;
+    // The transparent outline replaces the UA ring and is what Windows high-contrast repaints.
+    const segmentFocus = {
+        outline: "2px solid transparent",
+        outlineOffset: "2px",
+        // underlineSlide has no track chrome to carry the indicator, so there the segment wears it.
+        ...(isUnderlineSlide ? { boxShadow: focusShadow } : {}),
+    };
+    const [showFocus, setShowFocus] = useState(false);
+    const selectedIndex = options.findIndex((o) => o.value === value);
+    const enabled = options.reduce((acc, o, i) => (o.isDisabled ? acc : [...acc, i]), []);
+    // WAI-APG: with nothing selected, the first enabled segment owns the tab stop.
+    const tabIndex = selectedIndex >= 0 ? selectedIndex : enabled[0];
+    const { trackRef, itemRefs: refs, pill } = useSlidingPill(hasIndicator, selectedIndex, [
+        options,
+        isFullWidth,
+        size,
+    ]);
+    const selectAt = (index) => {
+        var _a;
+        (_a = refs.current[index]) === null || _a === void 0 ? void 0 : _a.focus();
+        onChange(options[index].value);
+    };
+    const handleKeyDown = (event) => {
+        if (enabled.length === 0)
+            return;
+        const step = (delta) => {
+            const position = enabled.indexOf(tabIndex);
+            selectAt(enabled[(position + delta + enabled.length) % enabled.length]);
+        };
+        if (event.key === "ArrowRight" || event.key === "ArrowDown") {
+            event.preventDefault();
+            step(1);
+        }
+        else if (event.key === "ArrowLeft" || event.key === "ArrowUp") {
+            event.preventDefault();
+            step(-1);
+        }
+        else if (event.key === "Home") {
+            event.preventDefault();
+            selectAt(enabled[0]);
+        }
+        else if (event.key === "End") {
+            event.preventDefault();
+            selectAt(enabled[enabled.length - 1]);
+        }
+    };
+    return (_jsxs(Flex, { ref: trackRef, role: "radiogroup", "aria-label": ariaLabel, onKeyDown: handleKeyDown, onFocus: (event) => setShowFocus(event.target.matches(":focus-visible")), onBlur: () => setShowFocus(false), boxShadow: showFocus && !isUnderlineSlide ? focusShadow : plateEdge, position: "relative", display: "inline-flex", align: "center", gap: isUnderlineSlide ? "0" : TRACK_PADDING, p: isUnderlineSlide ? "0" : TRACK_PADDING, h: control.height, boxSizing: "border-box", borderRadius: isUnderlineSlide ? "none" : "lg", borderBottom: isUnderlineSlide ? `${UNDERLINE_WIDTH} solid ${colors.boxborder[200]}` : undefined, bg: isUnderlineSlide ? "transparent" : trackSurface, w: isFullWidth ? "100%" : "fit-content", minW: "max-content", children: [isBrandSlide && pill && (_jsx(Box, { "aria-hidden": "true", position: "absolute", top: TRACK_PADDING, left: 0, h: segmentH, w: `${pill.width}px`, borderRadius: innerRadius, bg: brandFill.fill, boxShadow: `0 0.125rem 0.5rem ${colors.boxShadow.primary}`, transform: `translateX(${pill.left}px)`, transition: SLIDE, sx: reducedMotionSx() })), isUnderlineSlide && pill && (_jsx(Box, { "aria-hidden": "true", position: "absolute", bottom: "-0.0625rem", left: 0, h: "0.125rem", w: `${pill.width}px`, borderRadius: "full", bg: colors.primary[500], transform: `translateX(${pill.left}px)`, transition: SLIDE, sx: reducedMotionSx() })), options.map((option, index) => {
+                const isSelected = option.value === value;
+                return (_jsxs(Box, { as: "button", type: "button", ref: (node) => {
+                        refs.current[index] = node;
+                    }, role: "radio", "aria-checked": isSelected, disabled: option.isDisabled, tabIndex: index === tabIndex ? 0 : -1, onClick: () => onChange(option.value), position: "relative", zIndex: 1, display: "inline-flex", alignItems: "center", justifyContent: "center", gap: "0.375rem", flex: isFullWidth ? "1" : undefined, h: segmentH, px: control.paddingX, borderRadius: innerRadius, borderWidth: "1px", borderStyle: "solid", borderColor: hasIndicator
+                        ? "transparent"
+                        : isSelected
+                            ? colors.primary.opacity[32]
+                            : "transparent", bg: hasIndicator ? "transparent" : isSelected ? colors.backgroundColor.light : "transparent", boxShadow: hasIndicator ? "none" : isSelected ? "sm" : "none", color: isBrandSlide
+                        ? isSelected
+                            ? brandFill.color
+                            : restInk
+                        : isSelected
+                            ? selectedInk
+                            : restInk, fontSize: control.fontSize, fontWeight: isSelected ? 600 : 500, whiteSpace: "nowrap", opacity: option.isDisabled ? 0.5 : 1, cursor: option.isDisabled ? "not-allowed" : "pointer", transition: transitionFor(["color"]), _hover: option.isDisabled || isSelected ? undefined : { color: hoverInk }, sx: {
+                        _focusVisible: segmentFocus,
+                        [FOCUS_VISIBLE_OVER_STATE]: segmentFocus,
+                        ...reducedMotionSx(),
+                    }, children: [option.icon, option.label, option.count != null && (_jsx(Tag, { label: formatCount(option.count), size: COUNT_TAG_SIZE[size], variant: "subtle", colorScheme: "gray" }))] }, option.value));
+            })] }));
+}

package/dist/esm/Components/SegmentedControl/SegmentedControlProps.js

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

package/dist/esm/Components/SegmentedControl/segmentedInk.js

@@ -0,0 +1,20 @@
+import { focusGlowShadow } from "../../Theme/chakra/focusRing.styles.js";
+import { AA_NON_TEXT, liftToContrast } from "../../Theme/tokens/builders/outlineRung.js";
+import { AA_NORMAL_TEXT } from "../../Theme/tokens/builders/accentText.js";
+/** The surface a segment's label really sits on. */
+export const segmentedTrackSurface = (variant, colors, surface) => {
+    if (variant === "underlineSlide")
+        return surface !== null && surface !== void 0 ? surface : colors.backgroundColor.main;
+    // brandSlide paints an opaque plate on every backdrop: a tint composites into an unknown
+    // parent, so its ink was derived from a canvas the control was not actually on.
+    if (variant === "brandSlide")
+        return colors.surfaceRaised;
+    return colors.background[600];
+};
+/** Unselected label ink, lifted to AA against the track it is drawn on. */
+export const segmentedRestInk = (colors, trackSurface) => liftToContrast(colors.text[600], trackSurface, AA_NORMAL_TEXT);
+/** A radiogroup is one tab stop, so the group wears the ring: a brand hairline plus the field bloom. */
+export const segmentedFocusShadow = (colors, trackSurface) => `inset 0 0 0 1px ${liftToContrast(colors.primary[500], trackSurface, AA_NON_TEXT)}, ${focusGlowShadow(colors)}`;
+/** The plate can match its backdrop's lightness, so its edge carries the boundary.
+ * Drawn inset by the caller: a real border consumes the content box and decentres the sliding pill. */
+export const segmentedPlateEdge = (colors, surface) => liftToContrast(colors.boxborder[500], surface !== null && surface !== void 0 ? surface : colors.backgroundColor.main, AA_NON_TEXT);

package/dist/esm/Components/SegmentedControl/useSlidingPill.js

@@ -0,0 +1,22 @@
+import { useLayoutEffect, useRef, useState } from "react";
+/** Measures the selected item's DOM rect for a sliding pill/underline; shared by SegmentedControl and TableToggle. */
+export function useSlidingPill(enabled, selectedIndex, extraDeps) {
+    const trackRef = useRef(null);
+    const itemRefs = useRef([]);
+    const [pill, setPill] = useState(null);
+    useLayoutEffect(() => {
+        if (!enabled)
+            return;
+        const track = trackRef.current;
+        const node = itemRefs.current[selectedIndex];
+        if (!track || !node) {
+            setPill(null);
+            return;
+        }
+        const trackRect = track.getBoundingClientRect();
+        const nodeRect = node.getBoundingClientRect();
+        setPill({ left: nodeRect.left - trackRect.left, width: nodeRect.width });
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [enabled, selectedIndex, ...extraDeps]);
+    return { trackRef, itemRefs, pill };
+}

package/dist/esm/Components/Select/Select.js

@@ -1,24 +1,68 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useCallback } from "react";
-import { Select as ChakraSelect, FormControl } from "@chakra-ui/react";
-import { getTextInputIconSizePx } from "../Input/textInputIconSize.js";
-import { TextLabel } from "../Common/FormLabel.js";
-import ErrorMessage from "../Common/ErrorMessage.js";
-import HelperText from "../Common/HelperText.js";
-export default function Select({ placeholder = "Select Option", size = "md", variant = "outline", icon, onChange, onBlur, onFocus, errorBorderColor, isDisabled, isReadOnly, isRequired = false, value = "", colorScheme, label, error, errorMessage, helperText, options = [], height, formControlStyle, isInformation = false, informationMessage, selectStyle, }) {
-    const sizeKey = typeof size === "string" ? size : "md";
-    const iconSizePx = getTextInputIconSizePx(sizeKey);
-    const getOptionsList = useCallback(() => {
-        if (!options.length)
-            return _jsx("option", { value: "", children: "No Options" });
-        return options.map((option) => (_jsx("option", { value: option.id, children: option.label }, option.id)));
-    }, [options]);
-    const handleOnChange = (event) => {
-        const selectedValue = event.target.value;
-        const selectedOption = options.find((option) => option.id.toString() === selectedValue.toString());
-        if (selectedOption && onChange) {
-            onChange(selectedOption);
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import SelectNative from "./SelectNative.js";
+import SelectPopup from "./SelectPopup.js";
+const NATIVE_INERT_PROPS = [
+    "isSearchable",
+    "searchValue",
+    "defaultSearchValue",
+    "onSearchChange",
+    "searchDebounceMs",
+    "isClearable",
+    "onClear",
+    "isLoading",
+    "loadingText",
+    "onLoadMore",
+    "renderOption",
+    "renderValue",
+    "onCreate",
+    "createLabel",
+    "maxMenuHeight",
+    "defaultOpen",
+    "virtualizeAfter",
+];
+const warnInertNativeProps = (props) => {
+    const passed = NATIVE_INERT_PROPS.filter((key) => props[key] !== undefined);
+    if (!passed.length)
+        return;
+    console.warn(`Select: ${passed.join(", ")} ${passed.length > 1 ? "are" : "is"} inert while native is true (the default) — pass native={false} to use them.`);
+};
+const POPUP_INERT_NATIVE_PROPS = [
+    "height",
+    "variant",
+    "colorScheme",
+    "icon",
+    "bg",
+    "borderColor",
+    "color",
+    "errorBorderColor",
+    "selectStyle",
+];
+const warnInertPopupProps = (props) => {
+    const passed = POPUP_INERT_NATIVE_PROPS.filter((key) => props[key] !== undefined);
+    if (!passed.length)
+        return;
+    console.warn(`Select: ${passed.join(", ")} ${passed.length > 1 ? "are" : "is"} inert while native is false — pass native={true} (or omit native) to use them.`);
+};
+/** The library's one picker: a native `<select>` by default, or a themed popup via `native={false}`. */
+const Select = forwardRef(function Select(props, ref) {
+    var _a;
+    const isMulti = props.isMulti === true;
+    const requestedNative = (_a = props.native) !== null && _a !== void 0 ? _a : true;
+    const isNative = isMulti ? false : requestedNative;
+    if (process.env.NODE_ENV !== "production") {
+        if (isMulti && requestedNative) {
+            console.warn("Select: isMulti requires native={false}; rendering the popup regardless of the native prop.");
         }
-    };
-    return (_jsxs(FormControl, { isInvalid: error, style: formControlStyle, size: size, children: [label && (_jsx(TextLabel, { label: label, isRequired: isRequired, isInformation: isInformation, informationMessage: informationMessage })), _jsx(ChakraSelect, { placeholder: placeholder, size: size, variant: variant, icon: icon, iconSize: `${iconSizePx}px`, isInvalid: error, value: value, onChange: handleOnChange, onBlur: onBlur, onFocus: onFocus, isDisabled: isDisabled, isReadOnly: isReadOnly, colorScheme: colorScheme, errorBorderColor: errorBorderColor, style: selectStyle, ...(height != null && height !== "" ? { minH: height, h: height } : {}), children: getOptionsList() }), error && _jsx(ErrorMessage, { errorMessage: errorMessage }), helperText && !error && _jsx(HelperText, { helperText: helperText })] }));
-}
+        if (isNative)
+            warnInertNativeProps(props);
+        else
+            warnInertPopupProps(props);
+    }
+    if (isNative) {
+        // Safe: isMulti is verified false above, so `props` structurally matches SelectSingleProps.
+        return _jsx(SelectNative, { ref: ref, ...props });
+    }
+    return _jsx(SelectPopup, { ref: ref, ...props });
+});
+export default Select;

package/dist/esm/Components/Select/Select.styles.js

@@ -1,22 +1,20 @@
+import { placeholderInk } from "../../Theme/tokens/builders/placeholderInk.js";
+import { CONTROL_SIZE_NAMES } from "../../Theme/tokens/primitives/controlSizes.js";
+import { controlSizeStyles, fieldControlStyles } from "../Common/fieldStyles.js";
+const sizeField = (size) => {
+    const { h, minH, fontSize, px } = controlSizeStyles(size);
+    return { field: { h, minH, fontSize, ps: px, pe: "2rem", py: 0 } };
+};
 export const Select = {
     baseStyle: ({ theme }) => ({
         field: {
-            // Chakra's stock Select sets `--select-bg: colors.white` and swaps it to gray.700 behind
-            // `.chakra-ui-dark`/`[data-theme="dark"]` — selectors that NEVER match here, because dark
-            // mode swaps the palette instead of flipping Chakra's colour mode. The variable therefore
-            // stayed `#fff`, painting the native `<option>` list white-on-white in dark. `background[50]`
-            // is the canvas-following equivalent: byte-identical `#ffffff` in light, dark in dark.
+            // NOTE: Chakra's own --select-bg dark swap never matches here; this keeps native options dark-aware.
             "--select-bg": theme.colors.background[50],
-            fontWeight: 500,
-            fontSize: "0.875rem",
-            letterSpacing: "0.044rem",
-            borderRadius: "lg",
-            transition: "border-color 0.2s, box-shadow 0.2s",
-            minWidth: "0", // allow shrinking inside flex
-            width: "100%", // full container width
+            minWidth: "0",
+            width: "100%",
             maxWidth: "100%",
             _placeholder: {
-                fontStyle: "italic",
+                color: placeholderInk(theme.colors),
                 whiteSpace: "nowrap",
                 overflow: "hidden",
                 textOverflow: "ellipsis",
@@ -27,78 +25,12 @@ export const Select = {
             height: "1.25rem",
         },
     }),
-    sizes: {
-        sm: {
-            field: {
-                h: "2.125rem",
-                fontSize: "0.8125rem",
-                px: "0.5rem",
-                py: "0.5rem",
-            },
-        },
-        md: {
-            field: {
-                h: "2.375rem",
-                fontSize: "0.875rem",
-                px: "0.75rem",
-                py: "0.5rem",
-            },
-        },
-        lg: {
-            field: {
-                h: "2.75rem",
-                fontSize: "0.9375rem",
-                px: "1rem",
-                py: "0.5rem",
-            },
-        },
-    },
+    sizes: Object.fromEntries(CONTROL_SIZE_NAMES.map((size) => [size, sizeField(size)])),
     variants: {
-        outline: (props) => {
-            const { theme } = props;
-            const errorColor = theme.colors.semanticText.error;
-            // [800], not [500]/[700]: WCAG 1.4.11 needs >=3.0 for a control boundary, measured
-            // against the parent surface — up to `muted` (lightest). [700] fails there (2.41-2.72);
-            // [800] clears all named surfaces with margin (3.44-3.90).
-            const borderColor = theme.colors.boxborder[500];
-            const shadowPrimary = theme.colors.boxShadow.primary;
-            const shadowError = theme.colors.boxShadow.error;
-            const primary = theme.colors.primary[500];
-            return {
-                field: {
-                    bg: theme.colors.gray[50],
-                    border: "0.063rem solid",
-                    borderColor,
-                    _hover: {
-                        borderColor: primary,
-                        boxShadow: `0 0 0 0.125rem ${shadowPrimary}`,
-                    },
-                    _focus: {
-                        borderColor: primary,
-                        boxShadow: `0 0 0 0.125rem ${shadowPrimary}`,
-                    },
-                    _disabled: {
-                        opacity: 0.4,
-                        cursor: "not-allowed",
-                    },
-                    _invalid: {
-                        borderColor: errorColor,
-                        boxShadow: `0 0 0 0.125rem ${shadowError}`,
-                        _hover: {
-                            borderColor: errorColor,
-                            boxShadow: `0 0 0 0.125rem ${shadowError}`,
-                        },
-                        _focus: {
-                            borderColor: errorColor,
-                            boxShadow: `0 0 0 0.125rem ${shadowError}`,
-                        },
-                    },
-                },
-            };
-        },
+        outline: ({ theme }) => ({ field: fieldControlStyles(theme.colors) }),
     },
     defaultProps: {
         variant: "outline",
-        size: "md",
+        size: "sm",
     },
 };

package/dist/esm/Components/Select/SelectNative.js

@@ -0,0 +1,44 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef, useCallback } from "react";
+import { Select as ChakraSelect, FormControl } from "@chakra-ui/react";
+import { CONTROL_SIZES, DEFAULT_CONTROL_SIZE } from "../../Theme/tokens/primitives/controlSizes.js";
+import { TextLabel } from "../Common/FormLabel.js";
+import FieldMessage from "../Common/FieldMessage.js";
+import { useFieldIds } from "../Common/useFieldIds.js";
+const optionGroups = (options) => {
+    const segments = [];
+    options.forEach((option) => {
+        const last = segments[segments.length - 1];
+        if (last && last.group === option.group) {
+            last.options.push(option);
+        }
+        else {
+            segments.push({ group: option.group, options: [option] });
+        }
+    });
+    return segments;
+};
+/** Native `<select>` renderer — today's `Select`, unchanged, plus optgroup/disabled from `option.group`/`isDisabled`. */
+const SelectNative = forwardRef(function SelectNative({ placeholder = "Select Option", size = DEFAULT_CONTROL_SIZE, variant = "outline", icon, onChange, onBlur, onFocus, errorBorderColor, isDisabled, isReadOnly, isRequired = false, value = "", colorScheme, label, id, name, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, error = false, errorMessage, helperText, options = [], width, height, formControlStyle, isInformation = false, informationMessage, selectStyle, noOptionsMessage, }, ref) {
+    const ids = useFieldIds(id, { error, errorMessage, helperText });
+    const getOptionsList = useCallback(() => {
+        if (!options.length) {
+            return _jsx("option", { value: "", children: String(noOptionsMessage !== null && noOptionsMessage !== void 0 ? noOptionsMessage : "No Options") });
+        }
+        return optionGroups(options).map((segment, index) => {
+            const rows = segment.options.map((option) => (_jsx("option", { value: option.id, disabled: option.isDisabled, children: option.label }, option.id)));
+            if (!segment.group)
+                return rows;
+            return (_jsx("optgroup", { label: segment.group, children: rows }, `${segment.group}-${index}`));
+        });
+    }, [options, noOptionsMessage]);
+    const handleOnChange = (event) => {
+        if (isReadOnly)
+            return;
+        const selectedOption = options.find((option) => option.id.toString() === event.target.value.toString());
+        if (selectedOption)
+            onChange(selectedOption);
+    };
+    return (_jsxs(FormControl, { isInvalid: error, style: formControlStyle, width: width, children: [label && (_jsx(TextLabel, { label: label, id: ids.inputId, isRequired: isRequired, isInformation: isInformation, informationMessage: informationMessage })), _jsx(ChakraSelect, { ref: ref, ...ids.controlProps, name: name, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, placeholder: placeholder, size: size, variant: variant, icon: icon, iconSize: `${CONTROL_SIZES[size].iconSize}px`, isInvalid: error, isRequired: isRequired, value: value, onChange: handleOnChange, onBlur: onBlur, onFocus: onFocus, isDisabled: isDisabled, isReadOnly: isReadOnly, colorScheme: colorScheme, errorBorderColor: errorBorderColor, style: selectStyle, ...(height != null && height !== "" ? { minH: height, h: height } : {}), children: getOptionsList() }), _jsx(FieldMessage, { error: error, errorMessage: errorMessage, helperText: helperText, helperId: ids.helperId, errorId: ids.errorId })] }));
+});
+export default SelectNative;