@ceed/ads 1.33.0 → 1.35.0

package/dist/components/SearchBar/SearchBar.d.ts

@@ -0,0 +1,20 @@
+import * as React from 'react';
+export type SearchBarSlot = 'root';
+export interface SearchBarOption {
+    label: string;
+    value: string;
+    placeholder?: string;
+}
+export interface SearchBarProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange'> {
+    hideSelect?: boolean;
+    options?: SearchBarOption[];
+    value: string;
+    onChange: (value: string) => void;
+    onSearch?: (params: {
+        selectValue?: string;
+        inputValue: string;
+    }) => void;
+}
+export interface SearchBarOwnerState extends Required<Pick<SearchBarProps, 'hideSelect'>> {
+}
+export declare const SearchBar: React.ForwardRefExoticComponent<SearchBarProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/SearchBar/index.d.ts

@@ -0,0 +1,2 @@
+export { SearchBar } from './SearchBar';
+export type { SearchBarOption, SearchBarOwnerState, SearchBarProps, SearchBarSlot } from './SearchBar';

package/dist/components/ThemeProvider/ThemeProvider.d.ts

@@ -8,6 +8,7 @@ import { DateRangePickerProps } from '../DateRangePicker';
 import { MonthPickerProps } from '../MonthPicker';
 import { MonthRangePickerProps } from '../MonthRangePicker';
 import { PercentageInputProps } from '../PercentageInput';
+import type { SearchBarOwnerState, SearchBarProps, SearchBarSlot } from '../SearchBar/SearchBar';
 declare module '@mui/joy/styles' {
     interface Components {
         Calendar?: {
@@ -38,6 +39,10 @@ declare module '@mui/joy/styles' {
             defaultProps?: Partial<PercentageInputProps>;
             styleOverrides?: StyleOverrides<'root', {}, Theme>;
         };
+        SearchBar?: {
+            defaultProps?: Partial<SearchBarProps>;
+            styleOverrides?: StyleOverrides<SearchBarSlot, SearchBarOwnerState, Theme>;
+        };
     }
 }
 declare module '@mui/joy/Avatar' {

package/dist/components/data-display/Markdown.md

@@ -205,6 +205,68 @@ Full demonstration of all GFM features.
 />
 ````
 
+## External Link Target
+
+Override the built-in anchor renderer via `markdownOptions.components.a` to detect external links by origin comparison, open them in a new tab, and prepend an `OpenInNew` icon so users can tell external links apart at a glance. Internal links keep `defaultLinkAction` behavior and render without the icon.
+
+```tsx
+<Markdown {...args} markdownOptions={{
+  components: {
+    a: ({
+      href,
+      children
+    }) => {
+      const isExternal = (() => {
+        if (!href || typeof window === 'undefined') return false;
+        try {
+          return new URL(href, window.location.href).origin !== window.location.origin;
+        } catch {
+          return false;
+        }
+      })();
+      return <Link href={href} target={isExternal ? '_blank' : '_self'} rel={isExternal ? 'noopener noreferrer' : undefined} startDecorator={isExternal ? <OpenInNew sx={{
+        fontSize: '1em'
+      }} /> : undefined}>
+      {children}
+    </Link>;
+  }
+}
+}} />
+```
+
+```tsx
+import OpenInNew from '@mui/icons-material/OpenInNew';
+import { Markdown, Link } from '@ceed/ads';
+
+<Markdown
+  content={content}
+  markdownOptions={{
+    components: {
+      a: ({ href, children }) => {
+        const isExternal = (() => {
+          if (!href || typeof window === 'undefined') return false;
+          try {
+            return new URL(href, window.location.href).origin !== window.location.origin;
+          } catch {
+            return false;
+          }
+        })();
+        return (
+          <Link
+            href={href}
+            target={isExternal ? '_blank' : '_self'}
+            rel={isExternal ? 'noopener noreferrer' : undefined}
+            startDecorator={isExternal ? <OpenInNew sx={{ fontSize: '1em' }} /> : undefined}
+          >
+            {children}
+          </Link>
+        );
+      },
+    },
+  }}
+/>
+```
+
 ## When to Use
 
 ### ✅ Good Use Cases

package/dist/components/index.d.ts

@@ -49,6 +49,8 @@ export { ProfileMenu } from './ProfileMenu';
 export { Radio, RadioGroup } from './Radio';
 export { RadioTileGroup } from './RadioTileGroup';
 export { RadioList } from './RadioList';
+export { SearchBar } from './SearchBar';
+export type { SearchBarOption, SearchBarOwnerState, SearchBarProps, SearchBarSlot } from './SearchBar';
 export { Select, Option } from './Select';
 export { Sheet } from './Sheet';
 export { Stack } from './Stack';

package/dist/components/inputs/SearchBar.md

@@ -0,0 +1,103 @@
+# SearchBar
+
+## Introduction
+
+A search input component that optionally includes a category Select for filtering search by keyword type.
+
+> 💡 **Placeholder guidance**
+>
+> When `options` are provided, each option can include a `placeholder` field to hint at the expected input format for that category. This helps users understand what value to enter.
+>
+> - Account #: `e.g. 1234567`
+> - Jira Issue #: `e.g. PROC-1234`
+
+```tsx
+<SearchBar options={SAMPLE_OPTIONS} value={value} onChange={setValue} />
+```
+
+| Field      | Description | Default |
+| ---------- | ----------- | ------- |
+| hideSelect | —           | —       |
+| options    | —           | —       |
+| value      | —           | —       |
+| onChange   | —           | —       |
+| onSearch   | —           | —       |
+
+## Usage
+
+```tsx
+import { SearchBar } from '@ceed/ads';
+
+<SearchBar
+  value={query}
+  onChange={setQuery}
+  options={[
+    { label: 'Account #', value: 'account', placeholder: 'e.g. 1234567' },
+    { label: 'Jira Issue #', value: 'jira', placeholder: 'e.g. PROC-1234' },
+  ]}
+  onSearch={({ selectValue, inputValue }) => console.log(selectValue, inputValue)}
+/>
+```
+
+## Without Select
+
+Use `hideSelect` to hide the category Select and render a narrower input-only layout.
+
+```tsx
+<SearchBar hideSelect options={SAMPLE_OPTIONS} value={value} onChange={setValue} />
+```
+
+## onSearch
+
+`onSearch` fires when the search button is clicked or the Enter key is pressed. It receives both the active `selectValue` (omitted when `hideSelect` is `true`) and the current `inputValue`.
+
+```tsx
+<Stack gap={2}>
+  <SearchBar options={SAMPLE_OPTIONS} value={value} onChange={setValue} onSearch={setLastSearch} />
+  <Typography level="body-sm">value: "{value}"</Typography>
+  {lastSearch && <Typography level="body-sm">
+  onSearch: [{lastSearch.selectValue}] "{lastSearch.inputValue}"
+</Typography>}
+</Stack>
+```
+
+## Props and Customization
+
+| Prop         | Type                                                             | Default | Description                                                                                                                                                                                            |
+| ------------ | ---------------------------------------------------------------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| `value`      | `string`                                                         | —       | Current text input value                                                                                                                                                                               |
+| `onChange`   | `(value: string) => void`                                        | —       | Called when the text input value changes                                                                                                                                                               |
+| `onSearch`   | `(params: { selectValue?: string; inputValue: string }) => void` | —       | Called on search button click or Enter key                                                                                                                                                             |
+| `hideSelect` | `boolean`                                                        | `false` | Hide the category Select and show a narrower input-only layout                                                                                                                                         |
+| `options`    | `SearchBarOption[]`                                              | —       | List of selectable categories rendered in the category Select. Each item may include a `placeholder` hint shown in the text input when that category is active. Required when `hideSelect` is `false`. |
+
+> **Note**: Also accepts all standard HTML `div` attributes (`className`, `style`, `sx`, etc.).
+
+### SearchBarOption
+
+Each element of the `options` array has the following shape:
+
+| Field         | Type     | Required | Description                                                                                 |
+| ------------- | -------- | -------- | ------------------------------------------------------------------------------------------- |
+| `label`       | `string` | ✓        | Display text shown in the Select dropdown                                                   |
+| `value`       | `string` | ✓        | Internal identifier passed as `selectValue` in the `onSearch` callback                      |
+| `placeholder` | `string` | —        | Hint text shown in the text input while this category is selected (e.g. `"e.g. PROC-1234"`) |
+
+### CSS Custom Properties
+
+| Variable                 | Default                               | Description                                     |
+| ------------------------ | ------------------------------------- | ----------------------------------------------- |
+| `--ceed-SearchBar-width` | `300px` / `220px` (when `hideSelect`) | Component width; override per instance via `sx` |
+
+Override example: `<SearchBar sx={{ '--ceed-SearchBar-width': '400px' }} … />`
+
+## Best Practices
+
+- Always provide meaningful `label` values in `options` — they are the primary affordance for selecting a search category.
+- Use `placeholder` on each option to show the expected format for that category rather than a generic hint.
+- Prefer `onSearch` over reacting to every `onChange` keystroke for server-side search to reduce unnecessary requests.
+
+## Accessibility
+
+- The search button has `aria-label="Search"` and the clear button has `aria-label="Clear"`.
+- The text input is a native `<input>` element and supports keyboard navigation; pressing Enter triggers `onSearch`.

package/dist/components/inputs/llms.txt

@@ -21,6 +21,7 @@
 - [Radio](./RadioButton.md)
 - [RadioList](./RadioList.md)
 - [RadioTileGroup](./RadioTileGroup.md)
+- [SearchBar](./SearchBar.md)
 - [Select](./Select.md)
 - [Slider](./Slider.md)
 - [Switch](./Switch.md)