@pingux/astro 2.145.0 → 2.145.1-alpha.0

package/lib/cjs/components/Modal/Modal.stories.js

@@ -178,13 +178,13 @@ var WithInputField = function WithInputField() {
     value = _useState2[0],
     setValue = _useState2[1];
   var items = [{
-    id: 'apple',
+    key: 'apple',
     name: 'Apple'
   }, {
-    id: 'banana',
+    key: 'banana',
     name: 'Banana'
   }, {
-    id: 'blueberry',
+    key: 'blueberry',
     name: 'Blueberry'
   }];
   return (0, _react2.jsx)(_index.OverlayProvider, null, (0, _react2.jsx)(_index.Button, {
@@ -230,7 +230,7 @@ var WithInputField = function WithInputField() {
     }
   }, function (item) {
     return (0, _react2.jsx)(_index.Item, {
-      key: item.id,
+      key: item.key,
       textValue: item.name
     }, item.name);
   }), (0, _react2.jsx)(_index.Box, {

package/lib/cjs/components/SearchField/SearchField.stories.js

@@ -187,13 +187,13 @@ var ControlledWithPopover = function ControlledWithPopover() {
     value = _useState6[0],
     setValue = _useState6[1];
   var items = [{
-    id: 'apple',
+    key: 'apple',
     name: 'Apple'
   }, {
-    id: 'banana',
+    key: 'banana',
     name: 'Banana'
   }, {
-    id: 'blueberry',
+    key: 'blueberry',
     name: 'Blueberry'
   }];
   return (0, _react2.jsx)(_index.Box, null, (0, _react2.jsx)(_index.SearchField, {
@@ -213,7 +213,7 @@ var ControlledWithPopover = function ControlledWithPopover() {
     }
   }, function (item) {
     return (0, _react2.jsx)(_index.Item, {
-      key: item.id,
+      key: item.key,
       textValue: item.name
     }, item.name);
   }), (0, _react2.jsx)(_index.Text, {

package/lib/cjs/types/searchField.d.ts

@@ -1,10 +1,11 @@
-/// <reference types="react" />
+import React, { Key, ReactNode } from 'react';
 import type { CollectionChildren } from '@react-types/shared';
 import { ThemeUICSSObject } from 'theme-ui';
 import { ControlProps } from '../hooks/useField/useField';
 import { StyleProps } from './shared';
 import { HelpHintProps, IconProps, IconTypeExtended, LabelProps } from '.';
-export interface SearchFieldProps<T extends object> extends StyleProps {
+type Mode = 'default' | 'autocomplete';
+interface SearchFieldCommonProps extends StyleProps {
     /**
        * @ignore
        * Identifies the currently active element when DOM focus is on a composite widget, textbox,
@@ -55,7 +56,7 @@ export interface SearchFieldProps<T extends object> extends StyleProps {
      * Handler that is called when the SearchField is submitted.
      * (value: string) => void
      */
-    onSubmit?: (value?: unknown) => void;
+    onSubmit?: (value?: string) => void;
     /**
      * Handler that is called when the clear button is pressed.
      * () => void
@@ -170,13 +171,20 @@ export interface SearchFieldProps<T extends object> extends StyleProps {
     labelProps?: LabelProps;
     size?: string;
     sx?: ThemeUICSSObject;
-    mode?: 'default' | 'autocomplete';
+    mode?: Mode;
+}
+interface SearchAutoCompleteProps<T> extends SearchFieldCommonProps {
+    mode: Exclude<Mode, 'default'>;
     defaultItems?: Iterable<T>;
     children?: CollectionChildren<T>;
+    onSelectionChange?: (key: Key) => void;
 }
+export type SearchFieldProps<T> = SearchFieldCommonProps | SearchAutoCompleteProps<T>;
 export interface SearchItem extends StyleProps {
-    id: string;
-    text?: string;
+    key?: Key;
     name?: string;
-    [key: string]: unknown;
+    href?: string;
+    title?: ReactNode | string;
+    'aria-label'?: string;
 }
+export {};

package/lib/components/Modal/Modal.stories.js

@@ -162,13 +162,13 @@ export var WithInputField = function WithInputField() {
     value = _useState2[0],
     setValue = _useState2[1];
   var items = [{
-    id: 'apple',
+    key: 'apple',
     name: 'Apple'
   }, {
-    id: 'banana',
+    key: 'banana',
     name: 'Banana'
   }, {
-    id: 'blueberry',
+    key: 'blueberry',
     name: 'Blueberry'
   }];
   return ___EmotionJSX(OverlayProvider, null, ___EmotionJSX(Button, {
@@ -214,7 +214,7 @@ export var WithInputField = function WithInputField() {
     }
   }, function (item) {
     return ___EmotionJSX(Item, {
-      key: item.id,
+      key: item.key,
       textValue: item.name
     }, item.name);
   }), ___EmotionJSX(Box, {

package/lib/components/SearchField/SearchField.stories.js

@@ -172,13 +172,13 @@ export var ControlledWithPopover = function ControlledWithPopover() {
     value = _useState6[0],
     setValue = _useState6[1];
   var items = [{
-    id: 'apple',
+    key: 'apple',
     name: 'Apple'
   }, {
-    id: 'banana',
+    key: 'banana',
     name: 'Banana'
   }, {
-    id: 'blueberry',
+    key: 'blueberry',
     name: 'Blueberry'
   }];
   return ___EmotionJSX(Box, null, ___EmotionJSX(SearchField, {
@@ -198,7 +198,7 @@ export var ControlledWithPopover = function ControlledWithPopover() {
     }
   }, function (item) {
     return ___EmotionJSX(Item, {
-      key: item.id,
+      key: item.key,
       textValue: item.name
     }, item.name);
   }), ___EmotionJSX(Text, {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pingux/astro",
-  "version": "2.145.0",
+  "version": "2.145.1-alpha.0",
   "description": "React component library for Ping Identity's design system",
   "repository": {
     "type": "git",