Skip to content

Commit 46e1931

Browse files
pedroanudapedroanuda
committed
docs: update Select and Menus
1 parent 47b261d commit 46e1931

File tree

3 files changed

+90
-17
lines changed

3 files changed

+90
-17
lines changed

‎apps/docs/content/components/menus.md‎

Lines changed: 24 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -8,8 +8,28 @@ description: Menus display a list of choices on a temporary surface
88
<usage></usage>
99

1010
## Props
11+
### MenuButton
1112

12-
| Name | Type | Description | Default |
13-
| ----------- | -------------- | ------------------------------------ | ------- |
14-
| `label` | `string` | The text to show on the menu button. | `null` |
15-
| `activator` | `render props` | activator component of the menu. | `null` |
13+
| Name | Type | Description | Default |
14+
| ------------------- | ------------------- | --------------------------------------------------------------------------- | ------- |
15+
| `label` | `React.ReactNode` | The text to show on the menu button. | — |
16+
| `popoverProps` | `PopoverProps` | Props that allow changing the popover placement, flip behavior, style etc. | — |
17+
18+
### MenuItem
19+
20+
| Name | Type | Description | Default |
21+
| ------------------- | --------------------- | --------------------------------------------------------------------------------- | ------- |
22+
| `textValue` | `string` | A string representation of the item's contents, used for features like typeahead. | — |
23+
| `isDisabled` | `boolean` | Whether the item is disabled. | `false` |
24+
| `className` | `string` | — | — |
25+
| `style` | `React.CSSProperties` | — | — |
26+
27+
## Events
28+
### MenuItem
29+
30+
| Name | Type | Description |
31+
| ----------------- | --------------------------------- | -------------------------------------------------------- |
32+
| `onAction` | `() => void` | Handler that is called when the item is selected. |
33+
| `onHoverChange` | `(isHovering: boolean) => void` | Handler that is called when the hover state changes. |
34+
| `onHoverStart` | `(e: HoverEvent) => void` | Handler that is called when a hover interaction starts. |
35+
| `onHoverEnd` | `(e: HoverEvent) => void` | Handler that is called when a hover interaction ends. |

‎apps/docs/content/components/select.md‎

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,3 +6,31 @@ description: Select fields components are used for collecting user provided info
66
## Usage
77

88
<usage></usage>
9+
10+
## Props
11+
12+
| Name | Type | Default | Description |
13+
| --------------------- | --------------------- | -------------- | ------------------------------------------------------------------------------------------------------------- |
14+
| `label` | `React.ReactNode` | — | The content to display as the label. |
15+
| `selectedKey` | `Key` | — | The currently selected key in the collection (controlled). |
16+
| `disabledKeys` | `Iterable<Key>` | — | The item keys that are disabled. These items cannot be selected, focused, or otherwise interacted with. |
17+
| `isOpen` | `boolean` | `false` | Sets the open state of the menu. |
18+
| `isDisabled` | `boolean` | `false` | Whether the input is disabled. |
19+
| `isRequired` | `boolean` | `false` | Whether user input is required on the input before form submission. |
20+
| `isInvalid` | `boolean` | `false` | Whether the input value is invalid. |
21+
| `validationBehavior` | `aria` `native` | `aria` | Whether to use native HTML form validation to prevent form submission when the value is missing or invalid, or mark the field as required or invalid via ARIA. |
22+
| `validate` | `(value: Key) => ValidationError` `true` | — | A function that returns an error message if a given value is invalid. Validation errors are displayed to the user when the form is submitted if validationBehavior="native". For realtime validation, use the isInvalid prop instead. |
23+
| `variant` | `filled` `outlined` | `filled` | The type of the Select. |
24+
| `popoverProps` | `PopoverProps` | — | Props that allow changing the popover placement, flip behavior, style etc. |
25+
| `className` | `string` | — | — |
26+
| `style` | `React.CSSProperties` | — | — |
27+
28+
## Events
29+
30+
| Name | Type | Description |
31+
| ------------------- | ------------------------------- | ----------------------------------------------------------------- |
32+
| `onSelectionChange` | `(key: Key) => void` | Handler that is called when the selection changes. |
33+
| `onBlur` | `(e: React.FocusEvent) => void` | Handler that is called when the element loses focus. |
34+
| `onFocus` | `(e: React.FocusEvent) => void` | Handler that is called when the element receives focus. |
35+
| `onFocusChange` | `(isFocused: boolean) => void` | Handler that is called when the element's focus status changes. |
36+
| `onOpenChange` | `(isOpened: boolean) => void` | Method that is called when the open state of the menu changes. |

‎apps/docs/src/usages/select.tsx‎

Lines changed: 38 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -3,20 +3,45 @@ import { Select, SelectOption } from 'actify'
33
import React from 'react'
44

55
export default () => {
6+
const [selectedKey, setSelectedKey] = React.useState("");
7+
8+
const options = [
9+
{id: "actify", value: "Actify"},
10+
{id: "ngroker", value: "Ngroker"},
11+
{id: "taildoor", value: "Taildoor"},
12+
{id: "hugola", value: "Hugola"}
13+
];
14+
615
return (
7-
<div className="max-sm:flex-wrap flex gap-4">
8-
<Select label="Select Project">
9-
<SelectOption>Actify</SelectOption>
10-
<SelectOption>Ngroker</SelectOption>
11-
<SelectOption>Taildoor</SelectOption>
12-
<SelectOption>Hugola</SelectOption>
13-
</Select>
14-
<Select variant="outlined" label="Select Project">
15-
<SelectOption>Actify</SelectOption>
16-
<SelectOption>Ngroker</SelectOption>
17-
<SelectOption>Taildoor</SelectOption>
18-
<SelectOption>Hugola</SelectOption>
19-
</Select>
16+
<div className="flex flex-col gap-5">
17+
<div className="max-sm:flex-wrap flex gap-4">
18+
<Select label="Select Project">
19+
<SelectOption>Actify</SelectOption>
20+
<SelectOption>Ngroker</SelectOption>
21+
<SelectOption>Taildoor</SelectOption>
22+
<SelectOption>Hugola</SelectOption>
23+
</Select>
24+
<Select variant="outlined" label="Select Project">
25+
<SelectOption>Actify</SelectOption>
26+
<SelectOption>Ngroker</SelectOption>
27+
<SelectOption>Taildoor</SelectOption>
28+
<SelectOption>Hugola</SelectOption>
29+
</Select>
30+
</div>
31+
<div>
32+
<h6 className='mb-3 font-semibold'>Controlled Example:</h6>
33+
<Select variant="outlined" label="Controlled Select" selectedKey={selectedKey}
34+
onSelectionChange={key => setSelectedKey(key.toString())}>
35+
<>
36+
{options.map((option) => (
37+
<SelectOption key={option.id}>
38+
{option.value}
39+
</SelectOption>
40+
))}
41+
</>
42+
</Select>
43+
<p className='mt-1'>Selected key: {selectedKey}</p>
44+
</div>
2045
</div>
2146
)
2247
}

0 commit comments

Comments
 (0)