@plexui/ui 0.19.1 → 0.20.1

package/dist/es/components/FloatingLabelSelect/FloatingLabelSelect.js

@@ -2,10 +2,9 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import clsx from "clsx";
 import { forwardRef, useCallback, useId } from "react";
-import { FieldError } from "../FieldError";
-import { Button } from "../Button";
-import { Dropdown, X } from "../Icon";
-import s from "./FloatingLabelSelect.module.css";
+import { Button } from "../Button/index.js";
+import { Dropdown, X } from "../Icon/index.js";
+import s from "@plexui/styles/components/FloatingLabelSelect/FloatingLabelSelect.module.css";
 export const FloatingLabelSelect = forwardRef(function FloatingLabelSelect(props, ref) {
     const { label, selected = false, errorMessage, "invalid": invalidProp, disabled = false, open = false, onInteract, onClearClick, children, className, "aria-describedby": ariaDescribedByProp, onKeyDown, ...restProps } = props;
     const generatedId = useId();
@@ -21,16 +20,33 @@ export const FloatingLabelSelect = forwardRef(function FloatingLabelSelect(props
         onInteract?.();
     }, [disabled, onInteract]);
     const handleKeyDown = useCallback((evt) => {
+        // Enter and Space on a nested control (the clear button) activate that
+        // control: neither this handler nor a wrapping trigger's may take them
+        if (evt.target !== evt.currentTarget && (evt.key === " " || evt.key === "Enter"))
+            return;
         onKeyDown?.(evt);
-        if (disabled)
+        // A handler that prevented the default (the caller's, or a wrapping
+        // Menu.Trigger's that opened its menu) cancels the built-in handling
+        if (disabled || evt.defaultPrevented)
             return;
         switch (evt.key) {
             case "ArrowDown":
             case "ArrowUp":
             case " ":
+            case "Enter":
+                // Enter activates the field only without onInteract, as it
+                // would the button a wrapping trigger usually renders
+                if (evt.key === "Enter" && onInteract)
+                    break;
                 evt.stopPropagation();
                 evt.preventDefault();
-                onInteract?.();
+                if (onInteract) {
+                    onInteract();
+                }
+                else {
+                    // A wrapping trigger (Select's `trigger`, a Popover.Trigger) opens on click
+                    evt.currentTarget.click();
+                }
                 break;
         }
     }, [disabled, onInteract, onKeyDown]);
@@ -42,9 +58,13 @@ export const FloatingLabelSelect = forwardRef(function FloatingLabelSelect(props
         evt.preventDefault();
         onClearClick?.();
     }, [onClearClick]);
-    return (_jsxs("div", { className: clsx(s.Root, className), ref: ref, children: [_jsxs("div", { className: clsx(s.FieldFootprint, {
+    return (_jsxs("div", { className: clsx(s.Root, className), children: [_jsxs("div", { 
+                // The ref is the focusable field: a wrapping trigger returns focus to it and anchors to it
+                ref: ref, className: clsx(s.FieldFootprint, {
                     [s.HasValue]: selected,
-                }), role: "button", tabIndex: disabled ? -1 : 0, "data-open": open ? "" : undefined, "data-invalid": invalid ? "" : undefined, "data-disabled": disabled ? "" : undefined, "aria-expanded": open, "aria-haspopup": "listbox", "aria-invalid": invalid ? true : undefined, "aria-describedby": ariaDescribedBy, "aria-disabled": disabled || undefined, onPointerDown: handlePointerDown, onKeyDown: handleKeyDown, ...restProps, children: [_jsx("div", { className: s.TypeableLabel, children: _jsx("div", { className: s.LabelPositioner, children: _jsx("div", { className: s.LabelText, children: label }) }) }), _jsx("span", { className: s.Content, children: selected ? children : null }), _jsxs("div", { className: s.IndicatorWrapper, children: [showClearButton && (_jsx(Button, { "aria-label": "Clear selection", className: s.Clear, onPointerDown: handleClearPointerDown, onClick: handleClearClick, color: "secondary", variant: "ghost", size: "3xs", uniform: true, pill: true, children: _jsx(X, {}) })), _jsx(Dropdown, { className: s.DropdownIcon })] })] }), errorMessage && (_jsx(FieldError, { id: errorId, className: s.ErrorMessage, children: errorMessage }))] }));
+                }), role: "button", tabIndex: disabled ? -1 : 0, "data-open": open ? "" : undefined, "data-invalid": invalid ? "" : undefined, "data-disabled": disabled ? "" : undefined, "aria-expanded": open, "aria-haspopup": "listbox", "aria-invalid": invalid ? true : undefined, "aria-describedby": ariaDescribedBy, "aria-disabled": disabled || undefined, onPointerDown: handlePointerDown, onKeyDown: handleKeyDown, ...restProps, children: [_jsx("div", { className: s.TypeableLabel, children: _jsx("div", { className: s.LabelPositioner, children: _jsx("div", { className: s.LabelText, children: label }) }) }), _jsx("span", { className: s.Content, children: selected ? children : null }), _jsxs("div", { className: s.IndicatorWrapper, children: [showClearButton && (_jsx(Button, { "aria-label": "Clear selection", className: s.Clear, onPointerDown: handleClearPointerDown, onClick: handleClearClick, color: "secondary", variant: "ghost", size: "3xs", uniform: true, pill: true, children: _jsx(X, {}) })), _jsx(Dropdown, { className: s.DropdownIcon })] })] }), errorMessage && (
+            // Same plain line as FloatingLabelInput, so the two read alike on one form
+            _jsx("div", { id: errorId, className: s.ErrorMessage, role: "alert", children: errorMessage }))] }));
 });
 FloatingLabelSelect.displayName = "FloatingLabelSelect";
 //# sourceMappingURL=FloatingLabelSelect.js.map

package/dist/es/components/FloatingLabelSelect/FloatingLabelSelect.js.map

@@ -1 +1 @@
-{"version":3,"file":"FloatingLabelSelect.js","sourceRoot":"","sources":["../../../../src/components/FloatingLabelSelect/FloatingLabelSelect.tsx"],"names":[],"mappings":"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","sourcesContent":["\"use client\"\n\nimport clsx from \"clsx\"\nimport { forwardRef, useCallback, useId } from \"react\"\n\nimport { FieldError } from \"../FieldError\"\nimport { Button } from \"../Button\"\nimport { Dropdown, X } from \"../Icon\"\n\nimport s from \"./FloatingLabelSelect.module.css\"\n\nexport type FloatingLabelSelectProps = {\n  label: string\n  selected?: boolean\n  errorMessage?: string\n  invalid?: boolean\n  disabled?: boolean\n  open?: boolean\n  onInteract?: () => void\n  onClearClick?: () => void\n  children?: React.ReactNode\n  className?: string\n  \"aria-describedby\"?: string\n} & Omit<\n  React.HTMLAttributes<HTMLDivElement>,\n  \"children\" | \"role\" | \"tabIndex\" | \"aria-describedby\"\n>\n\nexport const FloatingLabelSelect = forwardRef<HTMLDivElement, FloatingLabelSelectProps>(\n  function FloatingLabelSelect(props, ref) {\n    const {\n      label,\n      selected = false,\n      errorMessage,\n      \"invalid\": invalidProp,\n      disabled = false,\n      open = false,\n      onInteract,\n      onClearClick,\n      children,\n      className,\n      \"aria-describedby\": ariaDescribedByProp,\n      onKeyDown,\n      ...restProps\n    } = props\n\n    const generatedId = useId()\n    const errorId = `floating-label-select-${generatedId}-error`\n\n    const invalid = invalidProp ?? !!errorMessage\n\n    const showClearButton = !!onClearClick && selected && !disabled\n\n    const ariaDescribedBy =\n      [ariaDescribedByProp, errorMessage ? errorId : undefined].filter(Boolean).join(\" \") ||\n      undefined\n\n    const handlePointerDown = useCallback(\n      (evt: React.PointerEvent<HTMLDivElement>) => {\n        if (evt.button === 2 || disabled) return\n        evt.preventDefault()\n        onInteract?.()\n      },\n      [disabled, onInteract],\n    )\n\n    const handleKeyDown = useCallback(\n      (evt: React.KeyboardEvent<HTMLDivElement>) => {\n        onKeyDown?.(evt)\n        if (disabled) return\n\n        switch (evt.key) {\n          case \"ArrowDown\":\n          case \"ArrowUp\":\n          case \" \":\n            evt.stopPropagation()\n            evt.preventDefault()\n            onInteract?.()\n            break\n        }\n      },\n      [disabled, onInteract, onKeyDown],\n    )\n\n    const handleClearPointerDown = useCallback((evt: React.PointerEvent<HTMLButtonElement>) => {\n      evt.stopPropagation()\n    }, [])\n\n    const handleClearClick = useCallback(\n      (evt: React.MouseEvent<HTMLButtonElement>) => {\n        evt.stopPropagation()\n        evt.preventDefault()\n        onClearClick?.()\n      },\n      [onClearClick],\n    )\n\n    return (\n      <div className={clsx(s.Root, className)} ref={ref}>\n        <div\n          className={clsx(s.FieldFootprint, {\n            [s.HasValue]: selected,\n          })}\n          role=\"button\"\n          tabIndex={disabled ? -1 : 0}\n          data-open={open ? \"\" : undefined}\n          data-invalid={invalid ? \"\" : undefined}\n          data-disabled={disabled ? \"\" : undefined}\n          aria-expanded={open}\n          aria-haspopup=\"listbox\"\n          aria-invalid={invalid ? true : undefined}\n          aria-describedby={ariaDescribedBy}\n          aria-disabled={disabled || undefined}\n          onPointerDown={handlePointerDown}\n          onKeyDown={handleKeyDown}\n          {...restProps}\n        >\n          <div className={s.TypeableLabel}>\n            <div className={s.LabelPositioner}>\n              <div className={s.LabelText}>{label}</div>\n            </div>\n          </div>\n          <span className={s.Content}>{selected ? children : null}</span>\n          <div className={s.IndicatorWrapper}>\n            {showClearButton && (\n              <Button\n                aria-label=\"Clear selection\"\n                className={s.Clear}\n                onPointerDown={handleClearPointerDown}\n                onClick={handleClearClick}\n                color=\"secondary\"\n                variant=\"ghost\"\n                size=\"3xs\"\n                uniform\n                pill\n              >\n                <X />\n              </Button>\n            )}\n            <Dropdown className={s.DropdownIcon} />\n          </div>\n        </div>\n        {errorMessage && (\n          <FieldError id={errorId} className={s.ErrorMessage}>\n            {errorMessage}\n          </FieldError>\n        )}\n      </div>\n    )\n  },\n)\n\nFloatingLabelSelect.displayName = \"FloatingLabelSelect\"\n"]}
+{"version":3,"file":"FloatingLabelSelect.js","sourceRoot":"","sources":["../../../../src/components/FloatingLabelSelect/FloatingLabelSelect.tsx"],"names":[],"mappings":"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","sourcesContent":["\"use client\"\n\nimport clsx from \"clsx\"\nimport { forwardRef, useCallback, useId } from \"react\"\n\nimport { Button } from \"../Button\"\nimport { Dropdown, X } from \"../Icon\"\n\nimport s from \"@plexui/styles/components/FloatingLabelSelect/FloatingLabelSelect.module.css\"\n\nexport type FloatingLabelSelectProps = {\n  label: string\n  selected?: boolean\n  errorMessage?: string\n  invalid?: boolean\n  disabled?: boolean\n  open?: boolean\n  onInteract?: () => void\n  onClearClick?: () => void\n  children?: React.ReactNode\n  className?: string\n  \"aria-describedby\"?: string\n} & Omit<\n  React.HTMLAttributes<HTMLDivElement>,\n  \"children\" | \"role\" | \"tabIndex\" | \"aria-describedby\"\n>\n\nexport const FloatingLabelSelect = forwardRef<HTMLDivElement, FloatingLabelSelectProps>(\n  function FloatingLabelSelect(props, ref) {\n    const {\n      label,\n      selected = false,\n      errorMessage,\n      \"invalid\": invalidProp,\n      disabled = false,\n      open = false,\n      onInteract,\n      onClearClick,\n      children,\n      className,\n      \"aria-describedby\": ariaDescribedByProp,\n      onKeyDown,\n      ...restProps\n    } = props\n\n    const generatedId = useId()\n    const errorId = `floating-label-select-${generatedId}-error`\n\n    const invalid = invalidProp ?? !!errorMessage\n\n    const showClearButton = !!onClearClick && selected && !disabled\n\n    const ariaDescribedBy =\n      [ariaDescribedByProp, errorMessage ? errorId : undefined].filter(Boolean).join(\" \") ||\n      undefined\n\n    const handlePointerDown = useCallback(\n      (evt: React.PointerEvent<HTMLDivElement>) => {\n        if (evt.button === 2 || disabled) return\n        evt.preventDefault()\n        onInteract?.()\n      },\n      [disabled, onInteract],\n    )\n\n    const handleKeyDown = useCallback(\n      (evt: React.KeyboardEvent<HTMLDivElement>) => {\n        // Enter and Space on a nested control (the clear button) activate that\n        // control: neither this handler nor a wrapping trigger's may take them\n        if (evt.target !== evt.currentTarget && (evt.key === \" \" || evt.key === \"Enter\")) return\n        onKeyDown?.(evt)\n        // A handler that prevented the default (the caller's, or a wrapping\n        // Menu.Trigger's that opened its menu) cancels the built-in handling\n        if (disabled || evt.defaultPrevented) return\n\n        switch (evt.key) {\n          case \"ArrowDown\":\n          case \"ArrowUp\":\n          case \" \":\n          case \"Enter\":\n            // Enter activates the field only without onInteract, as it\n            // would the button a wrapping trigger usually renders\n            if (evt.key === \"Enter\" && onInteract) break\n            evt.stopPropagation()\n            evt.preventDefault()\n            if (onInteract) {\n              onInteract()\n            } else {\n              // A wrapping trigger (Select's `trigger`, a Popover.Trigger) opens on click\n              evt.currentTarget.click()\n            }\n            break\n        }\n      },\n      [disabled, onInteract, onKeyDown],\n    )\n\n    const handleClearPointerDown = useCallback((evt: React.PointerEvent<HTMLButtonElement>) => {\n      evt.stopPropagation()\n    }, [])\n\n    const handleClearClick = useCallback(\n      (evt: React.MouseEvent<HTMLButtonElement>) => {\n        evt.stopPropagation()\n        evt.preventDefault()\n        onClearClick?.()\n      },\n      [onClearClick],\n    )\n\n    return (\n      <div className={clsx(s.Root, className)}>\n        <div\n          // The ref is the focusable field: a wrapping trigger returns focus to it and anchors to it\n          ref={ref}\n          className={clsx(s.FieldFootprint, {\n            [s.HasValue]: selected,\n          })}\n          role=\"button\"\n          tabIndex={disabled ? -1 : 0}\n          data-open={open ? \"\" : undefined}\n          data-invalid={invalid ? \"\" : undefined}\n          data-disabled={disabled ? \"\" : undefined}\n          aria-expanded={open}\n          aria-haspopup=\"listbox\"\n          aria-invalid={invalid ? true : undefined}\n          aria-describedby={ariaDescribedBy}\n          aria-disabled={disabled || undefined}\n          onPointerDown={handlePointerDown}\n          onKeyDown={handleKeyDown}\n          {...restProps}\n        >\n          <div className={s.TypeableLabel}>\n            <div className={s.LabelPositioner}>\n              <div className={s.LabelText}>{label}</div>\n            </div>\n          </div>\n          <span className={s.Content}>{selected ? children : null}</span>\n          <div className={s.IndicatorWrapper}>\n            {showClearButton && (\n              <Button\n                aria-label=\"Clear selection\"\n                className={s.Clear}\n                onPointerDown={handleClearPointerDown}\n                onClick={handleClearClick}\n                color=\"secondary\"\n                variant=\"ghost\"\n                size=\"3xs\"\n                uniform\n                pill\n              >\n                <X />\n              </Button>\n            )}\n            <Dropdown className={s.DropdownIcon} />\n          </div>\n        </div>\n        {errorMessage && (\n          // Same plain line as FloatingLabelInput, so the two read alike on one form\n          <div id={errorId} className={s.ErrorMessage} role=\"alert\">\n            {errorMessage}\n          </div>\n        )}\n      </div>\n    )\n  },\n)\n\nFloatingLabelSelect.displayName = \"FloatingLabelSelect\"\n"]}

package/dist/es/components/FloatingLabelSelect/index.js

@@ -1,2 +1,2 @@
-export { FloatingLabelSelect } from "./FloatingLabelSelect";
+export { FloatingLabelSelect } from "./FloatingLabelSelect.js";
 //# sourceMappingURL=index.js.map

package/dist/es/components/Icon/aliases.js

@@ -1,25 +1,25 @@
 // Icon aliases for backward compatibility
 // Maps old icon names to new icon names
-export { default as ArrowRight } from "./svg/ArrowRightSm";
-export { default as ArrowUpRight } from "./svg/ArrowTopRightSm";
-export { default as ArrowUp } from "./svg/ArrowUpSm";
-export { default as CalendarAlt } from "./svg/Calendar";
-export { default as Check } from "./svg/CheckMd";
-export { default as ChevronDownVector } from "./svg/ChevronDown";
-export { default as ChevronLeft } from "./svg/ChevronLeftMd";
-export { default as ChevronRight } from "./svg/ChevronRightMd";
-export { default as DropdownVector } from "./svg/Dropdown";
-export { default as Documentation } from "./svg/FileDocument";
-export { default as Delete } from "./svg/RemoveTrash";
-export { default as Clear } from "./svg/X";
-export { default as Explore } from "./svg/AllProductsExplore";
-export { default as Workspace } from "./svg/BuildingWorkspace";
-export { default as Mail } from "./svg/Email";
-export { default as Functions } from "./svg/Function";
-export { default as History } from "./svg/HistoryOn";
-export { default as Info } from "./svg/InfoCircle";
-export { default as Wave } from "./svg/PhoneWaves";
-export { default as Trash } from "./svg/RemoveTrash";
+export { default as ArrowRight } from "./svg/ArrowRightSm.js";
+export { default as ArrowUpRight } from "./svg/ArrowTopRightSm.js";
+export { default as ArrowUp } from "./svg/ArrowUpSm.js";
+export { default as CalendarAlt } from "./svg/Calendar.js";
+export { default as Check } from "./svg/CheckMd.js";
+export { default as ChevronDownVector } from "./svg/ChevronDown.js";
+export { default as ChevronLeft } from "./svg/ChevronLeftMd.js";
+export { default as ChevronRight } from "./svg/ChevronRightMd.js";
+export { default as DropdownVector } from "./svg/Dropdown.js";
+export { default as Documentation } from "./svg/FileDocument.js";
+export { default as Delete } from "./svg/RemoveTrash.js";
+export { default as Clear } from "./svg/X.js";
+export { default as Explore } from "./svg/AllProductsExplore.js";
+export { default as Workspace } from "./svg/BuildingWorkspace.js";
+export { default as Mail } from "./svg/Email.js";
+export { default as Functions } from "./svg/Function.js";
+export { default as History } from "./svg/HistoryOn.js";
+export { default as Info } from "./svg/InfoCircle.js";
+export { default as Wave } from "./svg/PhoneWaves.js";
+export { default as Trash } from "./svg/RemoveTrash.js";
 // Note: Beta icon is not available in new set - uses need to be replaced manually
 // IconName is a TypeScript type, not an actual icon export
 //# sourceMappingURL=aliases.js.map