@kenos-ui/react-select 0.2.1 → 0.2.3

package/CHANGELOG.md

@@ -1,5 +1,53 @@
 # @kenos-ui/react-select
 
+## 0.2.3
+
+### Patch Changes
+
+- Updated dependencies [9c9de3d]
+- Updated dependencies [f2ea00f]
+  - @kenos-ui/utils@1.0.0
+
+## 0.2.2
+
+### Minor Changes
+
+- **Kenos UI Select — feature release** (`@kenos-ui/react-select@0.2.2`)
+
+  Headless, accessible, composable Select primitive for React 19+, fully unstyled.
+
+  **Compound API**
+
+  - Parts: `Root`, `Label`, `Trigger`, `Value`, `Icon`, `Content`, `List`, `Item`, `ItemText`, `ItemIndicator`
+  - `Group`, `GroupLabel`, `HiddenSelect`, `Portal`, `Positioner`, `Backdrop`, `ClearTrigger`
+  - `ScrollUpButton`, `ScrollDownButton` for long lists
+
+  **Selection & forms**
+
+  - Single and multiple selection (`multiple` on Root)
+  - `items` prop for value→label maps without mounting every `Item`
+  - `isItemEqualToValue` for custom equality
+  - `HiddenSelect` for native form submission (`name`, `required`, `disabled`, `readOnly`)
+  - `onValueChange`, `onOpenChange`, `onOpenChangeComplete`
+
+  **Popup policy (interop-first)**
+
+  - Defaults: `modal={false}`, `portal={false}` — safe inside Dialogs
+  - Opt-in `modal={true}` with `Backdrop` + focus trap
+  - `portal` + `container` on Content; Floating UI positioning (`side`, `align`, `sameWidth`)
+  - `lazyMount` / `unmountOnExit`; focus restore on close
+  - Escape `stopPropagation` — dismisses Select without closing parent Dialog
+
+  **Keyboard & a11y**
+
+  - List navigation (↑↓, Home, End), typeahead, Enter/Space select
+  - Store-based item registry; `role="combobox"` / `role="listbox"` / `role="option"`
+  - Test suite: ARIA, keyboard nav, forms, portal, presence, dialog interop, axe
+
+  **Packaging**
+
+  - Add `license: MIT` to `package.json` (fixes npm registry showing "no license")
+
 ## 0.2.1
 
 ### Patch Changes

package/README.md

@@ -11,7 +11,7 @@ pnpm add @kenos-ui/react-select
 ## Usage
 
 ```tsx
-import { Select } from '@kenos-ui/react-select';
+import { Select } from "@kenos-ui/react-select";
 
 <Select.Root name="framework" onValueChange={setValue}>
   <Select.Label>Framework</Select.Label>
@@ -32,26 +32,26 @@ import { Select } from '@kenos-ui/react-select';
     </Select.List>
   </Select.Content>
   <Select.HiddenSelect />
-</Select.Root>
+</Select.Root>;
 ```
 
 ## API
 
-| Part | Description |
-|------|-------------|
-| `Root` | Context + state provider |
-| `Label` | Associated `<label>` |
-| `Trigger` | Button that opens the listbox |
-| `Value` | Displays the selected label or placeholder |
-| `Icon` | Chevron slot |
-| `Content` | Listbox container (floating, lazyMount) |
-| `List` | `role="listbox"` wrapper |
-| `Item` | `role="option"` — registers value/label |
-| `ItemText` | Option label slot |
-| `ItemIndicator` | Shown when the option is selected |
-| `Group` | Groups options (`role="group"`) |
-| `GroupLabel` | Label for a group |
-| `HiddenSelect` | Native `<select>` for form submission |
+| Part            | Description                                |
+| --------------- | ------------------------------------------ |
+| `Root`          | Context + state provider                   |
+| `Label`         | Associated `<label>`                       |
+| `Trigger`       | Button that opens the listbox              |
+| `Value`         | Displays the selected label or placeholder |
+| `Icon`          | Chevron slot                               |
+| `Content`       | Listbox container (floating, lazyMount)    |
+| `List`          | `role="listbox"` wrapper                   |
+| `Item`          | `role="option"` — registers value/label    |
+| `ItemText`      | Option label slot                          |
+| `ItemIndicator` | Shown when the option is selected          |
+| `Group`         | Groups options (`role="group"`)            |
+| `GroupLabel`    | Label for a group                          |
+| `HiddenSelect`  | Native `<select>` for form submission      |
 
 ## Popup defaults (interop-first)
 

package/dist/index.cjs

@@ -165,17 +165,18 @@ function extractItemTextLabel(children) {
   let label = null;
   react.Children.forEach(children, (child) => {
     if (label != null || !react.isValidElement(child)) return;
-    const type = child.type;
+    const element = child;
+    const type = element.type;
     const isItemText = type?.displayName === "Select.ItemText" || type?.name === "ItemText";
     if (isItemText) {
-      const content = child.props.children;
+      const content = element.props.children;
       if (typeof content === "string" || typeof content === "number") {
         label = String(content);
       }
       return;
     }
-    if (child.props?.children != null) {
-      label = extractItemTextLabel(child.props.children);
+    if (element.props.children != null) {
+      label = extractItemTextLabel(element.props.children);
     }
   });
   return label;
@@ -189,15 +190,16 @@ function extractItemsFromChildren(children) {
   const walk = (node) => {
     react.Children.forEach(node, (child) => {
       if (!react.isValidElement(child)) return;
-      if (isSelectItemElement(child)) {
-        const value = child.props.value;
-        const label = extractItemTextLabel(child.props.children) ?? value;
+      const element = child;
+      if (isSelectItemElement(element)) {
+        const value = element.props.value;
+        const label = extractItemTextLabel(element.props.children) ?? value;
         if (value != null && label != null) {
           items[value] = label;
         }
       }
-      if (child.props?.children != null) {
-        walk(child.props.children);
+      if (element.props.children != null) {
+        walk(element.props.children);
       }
     });
   };
@@ -366,10 +368,7 @@ function Root(props) {
     [store]
   );
   const discoveredItems = react.useMemo(() => extractItemsFromChildren(children), [children]);
-  const mergedItems = react.useMemo(
-    () => ({ ...discoveredItems, ...items }),
-    [discoveredItems, items]
-  );
+  const mergedItems = react.useMemo(() => ({ ...discoveredItems, ...items }), [discoveredItems, items]);
   const config = react.useMemo(
     () => ({
       disabled,
@@ -382,7 +381,17 @@ function Root(props) {
       isItemEqualToValue,
       openOnFocus
     }),
-    [disabled, required, readOnly, modal, name, multiple, mergedItems, isItemEqualToValue, openOnFocus]
+    [
+      disabled,
+      required,
+      readOnly,
+      modal,
+      name,
+      multiple,
+      mergedItems,
+      isItemEqualToValue,
+      openOnFocus
+    ]
   );
   const ctx = react.useMemo(
     () => ({
@@ -901,7 +910,7 @@ function Item({
   const isDisabled = disabled || config.disabled || config.readOnly;
   react.useLayoutEffect(() => {
     const el = liRef.current;
-    const label = textValue ?? (el?.textContent ?? value);
+    const label = textValue ?? el?.textContent ?? value;
     store.registerItem({
       value,
       label,