@prokodo/ui 0.1.11 → 0.1.13

package/dist/components/rich-text/RichText.module.css

@@ -213,7 +213,6 @@ html[data-theme=dark] .prokodo-RichText__pre {
 .prokodo-RichText__ul, .prokodo-RichText__ol {
   padding: 0;
   list-style-type: none;
-  color: var(--color-grey-500);
 }
 .prokodo-RichText__li {
   display: flex;

package/dist/components/select/Select.client.js

@@ -1,8 +1,9 @@
 "use client";
 var __defProp = Object.defineProperty;
 var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
-import { jsx } from "react/jsx-runtime";
-import { memo, useRef, useState, useEffect, useCallback } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { memo, useRef, useState, useEffect, useCallback, useMemo } from "react";
+import { createPortal } from "react-dom";
 import { SelectView } from "./Select.view.js";
 function isMulti(v) {
   return Array.isArray(v);
@@ -30,18 +31,106 @@ function SelectClient({
   const btnRef = useRef(null);
   const listRef = useRef(null);
   const [open, setOpen] = useState(false);
+  const [activeIndex, setActiveIndex] = useState(-1);
   const [val, setVal] = useState(
     extValue ?? (Boolean(multiple) ? [] : "")
   );
+  const [popupStyle, setPopupStyle] = useState({});
+  const [popupReady, setPopupReady] = useState(false);
+  const hasPlaceholder = !Boolean(required) && !Boolean(multiple);
+  const optionCount = (hasPlaceholder ? 1 : 0) + items.length;
   useEffect(() => {
     setVal(extValue ?? (Boolean(multiple) ? [] : ""));
   }, [extValue, multiple]);
+  const clampIndex = useCallback(
+    (i) => {
+      if (optionCount <= 0) return -1;
+      if (i < 0) return optionCount - 1;
+      if (i >= optionCount) return 0;
+      return i;
+    },
+    [optionCount]
+  );
+  const indexToValue = useCallback(
+    (i) => {
+      var _a, _b;
+      if (hasPlaceholder) {
+        if (i === 0) return null;
+        return (_a = items[i - 1]) == null ? void 0 : _a.value;
+      }
+      return (_b = items[i]) == null ? void 0 : _b.value;
+    },
+    [hasPlaceholder, items]
+  );
+  const valueToIndex = useCallback(() => {
+    if (!Boolean(multiple)) {
+      const current = String(val ?? "");
+      if (hasPlaceholder && current === "") return 0;
+      const idx = items.findIndex((x) => String(x.value) === current);
+      if (idx >= 0) return idx + (hasPlaceholder ? 1 : 0);
+    } else {
+      const arr = Array.isArray(val) ? val : [];
+      const idx = items.findIndex((x) => arr.includes(x.value));
+      if (idx >= 0) return idx + (hasPlaceholder ? 1 : 0);
+    }
+    return optionCount > 0 ? 0 : -1;
+  }, [val, multiple, hasPlaceholder, items, optionCount]);
   const close = useCallback(() => {
     var _a;
     setOpen(false);
+    setPopupReady(false);
     (_a = btnRef == null ? void 0 : btnRef.current) == null ? void 0 : _a.focus();
   }, []);
-  const toggle = useCallback(() => setOpen((o) => !o), []);
+  const updatePopupPosition = useCallback(() => {
+    const btn = btnRef.current;
+    if (!btn) return false;
+    const r = btn.getBoundingClientRect();
+    setPopupStyle({
+      position: "fixed",
+      left: r.left,
+      top: r.bottom,
+      width: r.width,
+      zIndex: 2147483647
+    });
+    return true;
+  }, []);
+  useEffect(() => {
+    if (!open || !popupReady) return;
+    setActiveIndex(valueToIndex());
+    requestAnimationFrame(() => {
+      var _a;
+      (_a = listRef.current) == null ? void 0 : _a.focus();
+    });
+  }, [open, popupReady, valueToIndex]);
+  const openWithPosition = useCallback(() => {
+    if (Boolean(disabled)) return;
+    const ok = updatePopupPosition();
+    if (ok) setPopupReady(true);
+    setOpen(true);
+  }, [disabled, updatePopupPosition]);
+  const toggle = useCallback(() => {
+    setOpen((prev) => {
+      if (prev) {
+        setPopupReady(false);
+        return false;
+      }
+      openWithPosition();
+      return true;
+    });
+  }, [openWithPosition]);
+  useEffect(() => {
+    if (!open) return;
+    updatePopupPosition();
+    setPopupReady(true);
+    const onResize = /* @__PURE__ */ __name(() => updatePopupPosition(), "onResize");
+    const onScroll = /* @__PURE__ */ __name(() => updatePopupPosition(), "onScroll");
+    window.addEventListener("resize", onResize);
+    window.addEventListener("scroll", onScroll, true);
+    return () => {
+      window.removeEventListener("resize", onResize);
+      window.removeEventListener("scroll", onScroll, true);
+    };
+  }, [open, updatePopupPosition]);
   useEffect(() => {
     if (!open) return;
     const handleOutside = /* @__PURE__ */ __name((e) => {
@@ -54,23 +143,40 @@ function SelectClient({
     return () => window.removeEventListener("click", handleOutside);
   }, [open, close]);
   const handleKey = /* @__PURE__ */ __name((e) => {
+    var _a, _b;
     if (Boolean(disabled)) return;
     if (e.key === "Escape") {
       e.preventDefault();
       close();
+      return;
+    }
+    if (e.key === "ArrowDown") {
+      e.preventDefault();
+      if (!open) {
+        openWithPosition();
+        return;
+      }
+      setActiveIndex((i) => clampIndex((i < 0 ? valueToIndex() : i) + 1));
+      (_a = listRef.current) == null ? void 0 : _a.focus();
+      return;
     }
-    if (e.key === "ArrowDown" && !open) {
+    if (e.key === "ArrowUp") {
       e.preventDefault();
-      setOpen(true);
+      if (!open) {
+        openWithPosition();
+        return;
+      }
+      setActiveIndex((i) => clampIndex((i < 0 ? valueToIndex() : i) - 1));
+      (_b = listRef.current) == null ? void 0 : _b.focus();
     }
   }, "handleKey");
-  const dataset = (() => {
+  const dataset = useMemo(() => {
     const d = {};
     for (const [k, v] of Object.entries(rest)) {
       if (k.startsWith("data-")) d[toDatasetKey(k.slice(5))] = v;
     }
     return d;
-  })();
+  }, [rest]);
   const clickOption = /* @__PURE__ */ __name((opt) => {
     const newVal = opt === null ? Boolean(multiple) ? [] : "" : mergeValue(val, opt, multiple);
     const syntheticEvt = { target: { dataset } };
@@ -78,6 +184,12 @@ function SelectClient({
     onChange == null ? void 0 : onChange(syntheticEvt, newVal);
     if (!Boolean(multiple)) close();
   }, "clickOption");
+  const onOptionKeyDown = /* @__PURE__ */ __name((e, v) => {
+    if (e.key === "Enter" || e.key === " ") {
+      e.preventDefault();
+      clickOption(v);
+    }
+  }, "onOptionKeyDown");
   return /* @__PURE__ */ jsx(
     SelectView,
     {
@@ -94,7 +206,117 @@ function SelectClient({
         listRef,
         onButtonClick: toggle,
         onButtonKey: handleKey,
-        onOptionClick: clickOption
+        onOptionClick: clickOption,
+        renderListbox: /* @__PURE__ */ __name((args) => {
+          if (!args.open) return null;
+          if (!popupReady) return null;
+          if (typeof document === "undefined") return null;
+          const onListKeyDown = /* @__PURE__ */ __name((e) => {
+            if (e.key === "Escape") {
+              e.preventDefault();
+              close();
+              return;
+            }
+            if (e.key === "ArrowDown") {
+              e.preventDefault();
+              setActiveIndex((i) => clampIndex((i < 0 ? valueToIndex() : i) + 1));
+              return;
+            }
+            if (e.key === "ArrowUp") {
+              e.preventDefault();
+              setActiveIndex((i) => clampIndex((i < 0 ? valueToIndex() : i) - 1));
+              return;
+            }
+            if (e.key === "Home") {
+              e.preventDefault();
+              setActiveIndex(optionCount > 0 ? 0 : -1);
+              return;
+            }
+            if (e.key === "End") {
+              e.preventDefault();
+              setActiveIndex(optionCount > 0 ? optionCount - 1 : -1);
+              return;
+            }
+            if (e.key === "Enter" || e.key === " ") {
+              e.preventDefault();
+              const v = indexToValue(activeIndex);
+              clickOption(v);
+            }
+          }, "onListKeyDown");
+          const listbox = /* @__PURE__ */ jsxs(
+            "ul",
+            {
+              ref: listRef,
+              "aria-multiselectable": Boolean(args.multiple) || void 0,
+              className: args.className,
+              id: args.id,
+              role: "listbox",
+              style: popupStyle,
+              tabIndex: 0,
+              "aria-activedescendant": activeIndex >= 0 ? `${args.id}-opt-${activeIndex}` : void 0,
+              onKeyDown: onListKeyDown,
+              children: [
+                !Boolean(args.required) && !Boolean(args.multiple) && /* @__PURE__ */ jsx(
+                  "li",
+                  {
+                    id: `${args.id}-opt-0`,
+                    role: "option",
+                    tabIndex: -1,
+                    "aria-selected": Array.isArray(args.value) ? args.value.length === 0 : String(args.value ?? "") === "",
+                    className: args.bemItem({
+                      selected: Array.isArray(args.value) ? args.value.length === 0 : String(args.value ?? "") === "",
+                      active: activeIndex === 0
+                    }),
+                    onClick: /* @__PURE__ */ __name(() => args.onOptionClick(null), "onClick"),
+                    onKeyDown: /* @__PURE__ */ __name((e) => onOptionKeyDown(e, null), "onKeyDown"),
+                    onMouseMove: /* @__PURE__ */ __name(() => setActiveIndex(0), "onMouseMove"),
+                    children: args.placeholder
+                  },
+                  "placeholder"
+                ),
+                args.items.map((opt) => {
+                  var _a;
+                  const hasPh = !Boolean(args.required) && !Boolean(args.multiple);
+                  const idx = args.items.findIndex((x) => x.value === opt.value);
+                  const index = idx + (hasPh ? 1 : 0);
+                  const selected = Array.isArray(args.value) ? args.value.includes(opt.value) : opt.value === args.value;
+                  return /* @__PURE__ */ jsxs(
+                    "li",
+                    {
+                      "aria-selected": selected,
+                      id: `${args.id}-opt-${index}`,
+                      role: "option",
+                      tabIndex: -1,
+                      className: args.bemItem({
+                        selected,
+                        active: activeIndex === index
+                      }),
+                      onClick: /* @__PURE__ */ __name(() => args.onOptionClick(opt.value), "onClick"),
+                      onKeyDown: /* @__PURE__ */ __name((e) => onOptionKeyDown(e, opt.value), "onKeyDown"),
+                      onMouseMove: /* @__PURE__ */ __name(() => setActiveIndex(index), "onMouseMove"),
+                      children: [
+                        Boolean(args.multiple) && /* @__PURE__ */ jsx(
+                          "input",
+                          {
+                            readOnly: true,
+                            "aria-hidden": "true",
+                            className: args.bemCheckbox({ checked: selected }),
+                            defaultChecked: selected,
+                            type: "checkbox"
+                          }
+                        ),
+                        Boolean(args.iconVisible) && ((_a = opt.icon) == null ? void 0 : _a.call(opt)),
+                        opt.label
+                      ]
+                    },
+                    `${args.id}-${opt.value}`
+                  );
+                })
+              ]
+            }
+          );
+          return createPortal(listbox, document.body);
+        }, "renderListbox")
       }
     }
   );

package/dist/components/select/Select.css

@@ -127,22 +127,19 @@
  */
 /* fade-in / out for the popup ------------------------------------------------ */
 @keyframes fade-in {
-  0% {
+  from {
     opacity: 0;
-    transform: scale(0.95, 0.8);
   }
-  100% {
+  to {
     opacity: 1;
   }
 }
 @keyframes fade-out {
-  0% {
+  from {
     opacity: 1;
-    transform: scale(1, 1);
   }
-  100% {
+  to {
     opacity: 0;
-    transform: scale(0.95, 0.8);
   }
 }
 .prokodo-Select {
@@ -180,6 +177,9 @@
     -webkit-box-orient: vertical;
     overflow: hidden;
   }
+  html[data-theme=dark] .prokodo-Select__label {
+    background-color: rgb(16, 19, 27);
+  }
 }
 .prokodo-Select__field {
   position: relative;
@@ -189,6 +189,7 @@
 }
 .prokodo-Select__field--expanded {
   box-shadow: none;
+  z-index: 100;
 }
 .prokodo-Select__button {
   box-sizing: border-box;
@@ -219,7 +220,7 @@
   background: var(--gradient-border-4);
 }
 .prokodo-Select__button:disabled {
-  color: var(--color-grey-300);
+  color: var(--color-grey-700);
   cursor: default;
   background: var(--gradient-border-8);
 }
@@ -251,9 +252,8 @@
   align-items: center;
   padding: 0.875rem 1rem;
   margin: 2px;
-  background: var(--color-white);
-  border-radius: 1.5rem;
   background-color: var(--color-white);
+  border-radius: 1.5rem;
   font-weight: 400;
   font-size: 1.125rem;
   font-family: var(--font-secondary), -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
@@ -274,6 +274,9 @@
     font-size: 1rem;
   }
 }
+html[data-theme=dark] .prokodo-Select__button__inner {
+  background-color: rgb(16, 19, 27);
+}
 .prokodo-Select__button__inner {
   font-size: 1rem;
 }
@@ -287,10 +290,9 @@
   color: var(--color-grey-500);
 }
 .prokodo-Select__button__inner--is-placeholder--disabled {
-  color: var(--color-grey-300);
+  color: var(--color-grey-500);
 }
 .prokodo-Select__listbox {
-  position: absolute;
   box-sizing: border-box;
   padding: 2px;
   margin: -2px 0 0 0;
@@ -304,7 +306,7 @@
   background: var(--gradient-border-4);
   box-shadow: var(--elevation-3);
   scrollbar-width: none;
-  z-index: 10;
+  z-index: 2147483647;
   /* animation – your JS toggles .is-open / .is-closed */
 }
 .prokodo-Select__listbox--is-open {
@@ -335,6 +337,8 @@
   text-decoration: none;
   /* hover / focus */
   /* selected */
+  /* keyboard "active" option (aria-activedescendant) */
+  /* if both selected + active, keep it clearly active */
   /* disabled (if you add aria-disabled) */
 }
 @media screen and (min-width: 480px) {
@@ -347,6 +351,9 @@
     font-size: 1rem;
   }
 }
+html[data-theme=dark] .prokodo-Select__item {
+  background: rgb(16, 19, 27);
+}
 .prokodo-Select__item {
   font-size: 1rem;
 }
@@ -355,14 +362,35 @@
   border-bottom-right-radius: 1.5625rem;
 }
 .prokodo-Select__item:hover {
-  background-color: var(--color-grey-50);
+  background: var(--color-primary-50);
+}
+html[data-theme=dark] .prokodo-Select__item:hover {
+  background: var(--color-primary-50);
 }
 .prokodo-Select__item:focus-visible {
   outline: 0;
-  background: var(--color-primary-100);
+  background: var(--color-primary-50);
+}
+html[data-theme=dark] .prokodo-Select__item:focus-visible {
+  background: var(--color-primary-50);
 }
 .prokodo-Select__item--selected {
-  background-color: var(--color-primary-50);
+  background: var(--color-primary-100);
+}
+html[data-theme=dark] .prokodo-Select__item--selected {
+  background: var(--color-primary-100);
+}
+.prokodo-Select__item--active {
+  background: var(--color-primary-100);
+}
+html[data-theme=dark] .prokodo-Select__item--active {
+  background: var(--color-primary-100);
+}
+.prokodo-Select__item--selected--active {
+  background: var(--color-primary-100);
+}
+html[data-theme=dark] .prokodo-Select__item--selected--active {
+  background: var(--color-primary-100);
 }
 .prokodo-Select__item[aria-disabled=true] {
   color: var(--color-grey-400);
@@ -392,6 +420,9 @@
   inset: 2px;
   background: var(--color-white);
 }
+html[data-theme=dark] .prokodo-Select__checkbox:before {
+  background-color: rgb(16, 19, 27);
+}
 .prokodo-Select__checkbox--checked { /* gradient + tick mark */
   background: var(--gradient-border-4);
 }

package/dist/components/select/Select.module.css

@@ -127,22 +127,19 @@
  */
 /* fade-in / out for the popup ------------------------------------------------ */
 @keyframes fade-in {
-  0% {
+  from {
     opacity: 0;
-    transform: scale(0.95, 0.8);
   }
-  100% {
+  to {
     opacity: 1;
   }
 }
 @keyframes fade-out {
-  0% {
+  from {
     opacity: 1;
-    transform: scale(1, 1);
   }
-  100% {
+  to {
     opacity: 0;
-    transform: scale(0.95, 0.8);
   }
 }
 .prokodo-Select {
@@ -180,6 +177,9 @@
     -webkit-box-orient: vertical;
     overflow: hidden;
   }
+  html[data-theme=dark] .prokodo-Select__label {
+    background-color: rgb(16, 19, 27);
+  }
 }
 .prokodo-Select__field {
   position: relative;
@@ -189,6 +189,7 @@
 }
 .prokodo-Select__field--expanded {
   box-shadow: none;
+  z-index: 100;
 }
 .prokodo-Select__button {
   box-sizing: border-box;
@@ -219,7 +220,7 @@
   background: var(--gradient-border-4);
 }
 .prokodo-Select__button:disabled {
-  color: var(--color-grey-300);
+  color: var(--color-grey-700);
   cursor: default;
   background: var(--gradient-border-8);
 }
@@ -251,9 +252,8 @@
   align-items: center;
   padding: 0.875rem 1rem;
   margin: 2px;
-  background: var(--color-white);
-  border-radius: 1.5rem;
   background-color: var(--color-white);
+  border-radius: 1.5rem;
   font-weight: 400;
   font-size: 1.125rem;
   font-family: var(--font-secondary), -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
@@ -274,6 +274,9 @@
     font-size: 1rem;
   }
 }
+html[data-theme=dark] .prokodo-Select__button__inner {
+  background-color: rgb(16, 19, 27);
+}
 .prokodo-Select__button__inner {
   font-size: 1rem;
 }
@@ -287,10 +290,9 @@
   color: var(--color-grey-500);
 }
 .prokodo-Select__button__inner--is-placeholder--disabled {
-  color: var(--color-grey-300);
+  color: var(--color-grey-500);
 }
 .prokodo-Select__listbox {
-  position: absolute;
   box-sizing: border-box;
   padding: 2px;
   margin: -2px 0 0 0;
@@ -304,7 +306,7 @@
   background: var(--gradient-border-4);
   box-shadow: var(--elevation-3);
   scrollbar-width: none;
-  z-index: 10;
+  z-index: 2147483647;
   /* animation – your JS toggles .is-open / .is-closed */
 }
 .prokodo-Select__listbox--is-open {
@@ -335,6 +337,8 @@
   text-decoration: none;
   /* hover / focus */
   /* selected */
+  /* keyboard "active" option (aria-activedescendant) */
+  /* if both selected + active, keep it clearly active */
   /* disabled (if you add aria-disabled) */
 }
 @media screen and (min-width: 480px) {
@@ -347,6 +351,9 @@
     font-size: 1rem;
   }
 }
+html[data-theme=dark] .prokodo-Select__item {
+  background: rgb(16, 19, 27);
+}
 .prokodo-Select__item {
   font-size: 1rem;
 }
@@ -355,14 +362,35 @@
   border-bottom-right-radius: 1.5625rem;
 }
 .prokodo-Select__item:hover {
-  background-color: var(--color-grey-50);
+  background: var(--color-primary-50);
+}
+html[data-theme=dark] .prokodo-Select__item:hover {
+  background: var(--color-primary-50);
 }
 .prokodo-Select__item:focus-visible {
   outline: 0;
-  background: var(--color-primary-100);
+  background: var(--color-primary-50);
+}
+html[data-theme=dark] .prokodo-Select__item:focus-visible {
+  background: var(--color-primary-50);
 }
 .prokodo-Select__item--selected {
-  background-color: var(--color-primary-50);
+  background: var(--color-primary-100);
+}
+html[data-theme=dark] .prokodo-Select__item--selected {
+  background: var(--color-primary-100);
+}
+.prokodo-Select__item--active {
+  background: var(--color-primary-100);
+}
+html[data-theme=dark] .prokodo-Select__item--active {
+  background: var(--color-primary-100);
+}
+.prokodo-Select__item--selected--active {
+  background: var(--color-primary-100);
+}
+html[data-theme=dark] .prokodo-Select__item--selected--active {
+  background: var(--color-primary-100);
 }
 .prokodo-Select__item[aria-disabled=true] {
   color: var(--color-grey-400);
@@ -392,6 +420,9 @@
   inset: 2px;
   background: var(--color-white);
 }
+html[data-theme=dark] .prokodo-Select__checkbox:before {
+  background-color: rgb(16, 19, 27);
+}
 .prokodo-Select__checkbox--checked { /* gradient + tick mark */
   background: var(--gradient-border-4);
 }

package/dist/components/select/Select.module.scss.js

@@ -19,6 +19,8 @@ const styles = {
   "fade-out": "fade-out",
   "prokodo-Select__item": "prokodo-Select__item",
   "prokodo-Select__item--selected": "prokodo-Select__item--selected",
+  "prokodo-Select__item--active": "prokodo-Select__item--active",
+  "prokodo-Select__item--selected--active": "prokodo-Select__item--selected--active",
   "prokodo-Select__checkbox": "prokodo-Select__checkbox",
   "prokodo-Select__checkbox--checked": "prokodo-Select__checkbox--checked",
   "prokodo-Select__helperText": "prokodo-Select__helperText",