@chayns-components/core 5.5.27 → 5.5.28
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/AGENTS.md +874 -64
- package/package.json +4 -4
package/AGENTS.md
CHANGED
|
@@ -478,7 +478,40 @@ import { Accordion } from '@chayns-components/core';
|
|
|
478
478
|
|
|
479
479
|
### Props
|
|
480
480
|
|
|
481
|
-
|
|
481
|
+
| name | type | required | description |
|
|
482
|
+
| --- | --- | --- | --- |
|
|
483
|
+
| `bodyMaxHeight` | `number \| undefined` | no | Maximum height of the accordion body element. This automatically makes the content of the<br />body element scrollable. |
|
|
484
|
+
| `children` | `ReactNode` | yes | The content of the accordion body |
|
|
485
|
+
| `colors` | `AccordionColors \| undefined` | no | Provide custom colors to the Accordion Component |
|
|
486
|
+
| `icon` | `string \| undefined` | no | The icon that is displayed in front of the title |
|
|
487
|
+
| `isDefaultOpen` | `boolean \| undefined` | no | This can be used to automatically expand the Accordion during the first render. |
|
|
488
|
+
| `isDisabled` | `boolean \| undefined` | no | This will disable the Accordion so that it cannot be opened and will gray out the title. Does not work with isOpened. |
|
|
489
|
+
| `isFixed` | `boolean \| undefined` | no | This can be used so that the Accordion cannot be opened or closed.<br />In addition, in this case the icon is exchanged to mark the Accordions. |
|
|
490
|
+
| `isOpened` | `boolean \| undefined` | no | This can be used to open the Accordion from the outside |
|
|
491
|
+
| `isTitleGreyed` | `boolean \| undefined` | no | This will gray out the title of the Accordion to indicate hidden content, for example. |
|
|
492
|
+
| `onBodyAnimationComplete` | `VoidFunction \| undefined` | no | Function that is executed when the accordion body is animated |
|
|
493
|
+
| `onBodyScroll` | `((event: UIEvent<HTMLDivElement, UIEvent>) => void) \| undefined` | no | Function that is executed when the accordion body will be scrolled |
|
|
494
|
+
| `onClose` | `VoidFunction \| undefined` | no | Function that is executed when the accordion will be closed. |
|
|
495
|
+
| `onHoverEnd` | `MouseEventHandler<HTMLDivElement> \| undefined` | no | Function to be executed when the accordion is no longer hovered. |
|
|
496
|
+
| `onHoverStart` | `MouseEventHandler<HTMLDivElement> \| undefined` | no | Function to be executed when the accordion is hovered. |
|
|
497
|
+
| `onOpen` | `VoidFunction \| undefined` | no | Function that is executed when the accordion will be opened. |
|
|
498
|
+
| `onSearchChange` | `ChangeEventHandler<HTMLInputElement> \| undefined` | no | Function that is executed when the text of the search in the accordion<br />head changes. When this function is given, the search field is displayed<br />in the Accordion Head. |
|
|
499
|
+
| `onTitleInputChange` | `ChangeEventHandler<HTMLInputElement> \| undefined` | no | Function that is executed when the text of the search in the accordion<br />title changes. When this function is given, the search field is displayed<br />as the Accordion title. |
|
|
500
|
+
| `rightElement` | `ReactNode` | no | Content to be displayed on the right side in the head of the Accordion |
|
|
501
|
+
| `searchPlaceholder` | `string \| undefined` | no | The placeholder to be used for the search |
|
|
502
|
+
| `searchValue` | `string \| undefined` | no | The value that is displayed inside the search |
|
|
503
|
+
| `shouldEnableKeyboardHighlighting` | `boolean \| undefined` | no | Enables keyboard-only focus highlighting. The highlighting is only visible while the<br />user navigates with the keyboard and is reset on mouse movement or click. |
|
|
504
|
+
| `shouldForceBackground` | `boolean \| undefined` | no | This will force the background color of the accordion to be used even if it is closed and not hovered. |
|
|
505
|
+
| `shouldForceBottomLine` | `boolean \| undefined` | no | Whether the bottom line should always be shown, regardless of other line-related props. |
|
|
506
|
+
| `shouldHideBackground` | `boolean \| undefined` | no | This will hide the background color of the accordion |
|
|
507
|
+
| `shouldHideBottomLine` | `boolean \| undefined` | no | Whether the bottom line should be hidden. |
|
|
508
|
+
| `shouldIndex` | `boolean \| undefined` | no | Whether the accordion should be indexed. |
|
|
509
|
+
| `shouldRenderClosed` | `boolean \| undefined` | no | This will render the Accordion closed on the first render. |
|
|
510
|
+
| `shouldRotateIcon` | `boolean \| undefined` | no | Whether the icon should be rotating. |
|
|
511
|
+
| `shouldSkipAnimation` | `boolean \| undefined` | no | Whether the animation should be skipped.<br />If 'isDefaultOpen' is true the initial animation will be skipped even this prop is false |
|
|
512
|
+
| `title` | `string \| undefined` | no | Title of the Accordion displayed in the head |
|
|
513
|
+
| `titleElement` | `ReactNode` | no | Additional elements to be displayed in the header next to the title. |
|
|
514
|
+
| `titleInputProps` | `InputProps \| undefined` | no | The props of the title Input. |
|
|
482
515
|
|
|
483
516
|
### Types
|
|
484
517
|
|
|
@@ -488,10 +521,12 @@ No additional exported types documented.
|
|
|
488
521
|
|
|
489
522
|
- Import `Accordion` directly from `@chayns-components/core` instead of internal source paths.
|
|
490
523
|
- Start with one of the documented Storybook examples and adapt the props incrementally for your use case.
|
|
524
|
+
- Pay special attention to required props: `children`.
|
|
491
525
|
|
|
492
526
|
### Anti Patterns
|
|
493
527
|
|
|
494
528
|
- Avoid imports from internal paths such as `@chayns-components/core/src/...`; always use the public package export.
|
|
529
|
+
- Avoid incomplete prop objects; follow the documented prop types and required fields.
|
|
495
530
|
## AmountControl
|
|
496
531
|
|
|
497
532
|
`AmountControl` is exported by `@chayns-components/core` and should be imported from the public package entry point.
|
|
@@ -534,7 +569,22 @@ import { AmountControl } from '@chayns-components/core';
|
|
|
534
569
|
|
|
535
570
|
### Props
|
|
536
571
|
|
|
537
|
-
|
|
572
|
+
| name | type | required | description |
|
|
573
|
+
| --- | --- | --- | --- |
|
|
574
|
+
| `amount` | `number \| undefined` | no | The amount that should be displayed. |
|
|
575
|
+
| `icon` | `string \| undefined` | no | The icon that should be displayed if no amount is selected. |
|
|
576
|
+
| `iconColor` | `string \| undefined` | no | The color of the icon. |
|
|
577
|
+
| `isDisabled` | `boolean \| undefined` | no | Whether the control should be disabled |
|
|
578
|
+
| `label` | `string \| undefined` | no | A Text that should be displayed if no amount is selected; |
|
|
579
|
+
| `maxAmount` | `number \| undefined` | no | The maximum allowed amount. If the maxAmount is reached, a check icon is displayed on the left side. |
|
|
580
|
+
| `minAmount` | `number \| undefined` | no | The minimum allowed amount. |
|
|
581
|
+
| `onChange` | `((amount: number) => void) \| undefined` | no | A Function that is executed when the amount is changed |
|
|
582
|
+
| `shouldEnableKeyboardHighlighting` | `boolean \| undefined` | no | Enables keyboard-only focus highlighting. The highlighting is only visible while the<br />user navigates with the keyboard and is reset on mouse movement or click. |
|
|
583
|
+
| `shouldForceLabel` | `boolean \| undefined` | no | Whether the label should be displayed even if an amount is selected. |
|
|
584
|
+
| `shouldShowAddIconOnMinAmount` | `boolean \| undefined` | no | Whether the "add"-icon should be displayed if the minAmount is reached. |
|
|
585
|
+
| `shouldShowIcon` | `boolean \| undefined` | no | Whether the icon should be displayed if no amount is selected |
|
|
586
|
+
| `shouldShowWideInput` | `boolean \| undefined` | no | Whether the input should be wider |
|
|
587
|
+
| `step` | `number \| undefined` | no | Defines the amount that will change when adjusted |
|
|
538
588
|
|
|
539
589
|
### Types
|
|
540
590
|
|
|
@@ -548,6 +598,7 @@ No additional exported types documented.
|
|
|
548
598
|
### Anti Patterns
|
|
549
599
|
|
|
550
600
|
- Avoid imports from internal paths such as `@chayns-components/core/src/...`; always use the public package export.
|
|
601
|
+
- Avoid incomplete prop objects; follow the documented prop types and required fields.
|
|
551
602
|
## AnimatedNumber
|
|
552
603
|
|
|
553
604
|
`AnimatedNumber` is exported by `@chayns-components/core` and should be imported from the public package entry point.
|
|
@@ -570,7 +621,17 @@ import { AnimatedNumber } from '@chayns-components/core';
|
|
|
570
621
|
|
|
571
622
|
### Props
|
|
572
623
|
|
|
573
|
-
|
|
624
|
+
| name | type | required | description |
|
|
625
|
+
| --- | --- | --- | --- |
|
|
626
|
+
| `delay` | `number \| undefined` | no | Start delay of the animation in seconds. |
|
|
627
|
+
| `duration` | `number \| undefined` | no | Total duration of the animation in seconds. |
|
|
628
|
+
| `ease` | `Ease \| undefined` | no | Easing curve of the animation (e.g., cubic-bezier like [0.16, 1, 0.3, 1] or predefined easings).<br />Controls how the animation accelerates/decelerates. |
|
|
629
|
+
| `format` | `((n: number) => string) \| undefined` | no | Custom formatter for the displayed value.<br />If provided, it overrides locale/toLocaleString and round.<br />Example: (n) => `${Math.round(n)} points` |
|
|
630
|
+
| `locale` | `string \| undefined` | no | Locale used by toLocaleString when no custom formatter is provided. |
|
|
631
|
+
| `onComplete` | `(() => void) \| undefined` | no | Callback invoked when the animation completes. |
|
|
632
|
+
| `round` | `((n: number) => number) \| undefined` | no | Custom rounding function when no custom formatter is provided.<br />Default: Math.round |
|
|
633
|
+
| `startFrom` | `number \| undefined` | no | Starting value for the animation.<br />Default: 0 |
|
|
634
|
+
| `value` | `number` | yes | Target value to animate to. |
|
|
574
635
|
|
|
575
636
|
### Types
|
|
576
637
|
|
|
@@ -580,10 +641,12 @@ No additional exported types documented.
|
|
|
580
641
|
|
|
581
642
|
- Import `AnimatedNumber` directly from `@chayns-components/core` instead of internal source paths.
|
|
582
643
|
- Start with one of the documented Storybook examples and adapt the props incrementally for your use case.
|
|
644
|
+
- Pay special attention to required props: `value`.
|
|
583
645
|
|
|
584
646
|
### Anti Patterns
|
|
585
647
|
|
|
586
648
|
- Avoid imports from internal paths such as `@chayns-components/core/src/...`; always use the public package export.
|
|
649
|
+
- Avoid incomplete prop objects; follow the documented prop types and required fields.
|
|
587
650
|
## Badge
|
|
588
651
|
|
|
589
652
|
`Badge` is exported by `@chayns-components/core` and should be imported from the public package entry point.
|
|
@@ -635,11 +698,30 @@ import { Badge } from '@chayns-components/core';
|
|
|
635
698
|
|
|
636
699
|
### Props
|
|
637
700
|
|
|
638
|
-
|
|
701
|
+
| name | type | required | description |
|
|
702
|
+
| --- | --- | --- | --- |
|
|
703
|
+
| `backgroundColor` | `BackgroundColor \| undefined` | no | The background color of the badge. |
|
|
704
|
+
| `children` | `ReactNode` | no | The content of the badge. |
|
|
705
|
+
| `className` | `string \| undefined` | no | Additional class names for the badge element. |
|
|
706
|
+
| `design` | `BadgeDesign \| undefined` | no | The design of the Badge. |
|
|
707
|
+
| `fontColor` | `Color \| undefined` | no | The font color of the badge. |
|
|
708
|
+
| `onClick` | `MouseEventHandler \| undefined` | no | Function to be executed when the badge is clicked. |
|
|
709
|
+
| `size` | `BadgeSize \| undefined` | no | The size of the badge. |
|
|
639
710
|
|
|
640
711
|
### Types
|
|
641
712
|
|
|
642
|
-
|
|
713
|
+
- `BadgeDesign` -> `enum BadgeDesign {
|
|
714
|
+
/** Default design with background color and no border */
|
|
715
|
+
DEFAULT = 'default',
|
|
716
|
+
/** Design with border only, no background color */
|
|
717
|
+
BORDER = 'border',
|
|
718
|
+
}`
|
|
719
|
+
- `BadgeSize` -> `enum BadgeSize {
|
|
720
|
+
/** Small size */
|
|
721
|
+
SMALL = 'small',
|
|
722
|
+
/** Default size */
|
|
723
|
+
DEFAULT = 'default',
|
|
724
|
+
}`
|
|
643
725
|
|
|
644
726
|
### Usage Notes
|
|
645
727
|
|
|
@@ -649,6 +731,7 @@ No additional exported types documented.
|
|
|
649
731
|
### Anti Patterns
|
|
650
732
|
|
|
651
733
|
- Avoid imports from internal paths such as `@chayns-components/core/src/...`; always use the public package export.
|
|
734
|
+
- Avoid incomplete prop objects; follow the documented prop types and required fields.
|
|
652
735
|
## Button
|
|
653
736
|
|
|
654
737
|
`Button` is exported by `@chayns-components/core` and should be imported from the public package entry point.
|
|
@@ -699,7 +782,21 @@ import { Button } from '@chayns-components/core';
|
|
|
699
782
|
|
|
700
783
|
### Props
|
|
701
784
|
|
|
702
|
-
|
|
785
|
+
| name | type | required | description |
|
|
786
|
+
| --- | --- | --- | --- |
|
|
787
|
+
| `buttonDesign` | `number \| undefined` | no | Optional button design override. |
|
|
788
|
+
| `children` | `ReactNode` | no | The label of the button. |
|
|
789
|
+
| `className` | `string \| undefined` | no | Additional class names for the button element. |
|
|
790
|
+
| `icon` | `string \| undefined` | no | An icon that is displayed on the left-hand side of the button text. |
|
|
791
|
+
| `isDisabled` | `boolean \| undefined` | no | Whether the button is disabled and cannot be clicked anymore. |
|
|
792
|
+
| `isSecondary` | `boolean \| undefined` | no | Displays the button in the secondary style. |
|
|
793
|
+
| `onClick` | `MouseEventHandler<HTMLButtonElement>` | yes | Function to be executed when the button is clicked. |
|
|
794
|
+
| `shouldEnableKeyboardHighlighting` | `boolean \| undefined` | no | Enables keyboard-only focus highlighting. |
|
|
795
|
+
| `shouldShowAsSelectButton` | `boolean \| undefined` | no | Whether the button should be displayed as a selectButton. |
|
|
796
|
+
| `shouldShowTextAsRobotoMedium` | `boolean \| undefined` | no | Whether the text should be 'Roboto Medium'. |
|
|
797
|
+
| `shouldShowWaitCursor` | `boolean \| undefined` | no | Shows a wait cursor instead of button text. |
|
|
798
|
+
| `shouldStopPropagation` | `boolean \| undefined` | no | Stops event propagation on click. |
|
|
799
|
+
| `tapDuration` | `number \| undefined` | no | Duration in seconds for the tap animation. |
|
|
703
800
|
|
|
704
801
|
### Types
|
|
705
802
|
|
|
@@ -709,10 +806,12 @@ No additional exported types documented.
|
|
|
709
806
|
|
|
710
807
|
- Import `Button` directly from `@chayns-components/core` instead of internal source paths.
|
|
711
808
|
- Start with one of the documented Storybook examples and adapt the props incrementally for your use case.
|
|
809
|
+
- Pay special attention to required props: `onClick`.
|
|
712
810
|
|
|
713
811
|
### Anti Patterns
|
|
714
812
|
|
|
715
813
|
- Avoid imports from internal paths such as `@chayns-components/core/src/...`; always use the public package export.
|
|
814
|
+
- Avoid incomplete prop objects; follow the documented prop types and required fields.
|
|
716
815
|
## Checkbox
|
|
717
816
|
|
|
718
817
|
`Checkbox` is exported by `@chayns-components/core` and should be imported from the public package entry point.
|
|
@@ -735,7 +834,19 @@ import { Checkbox } from '@chayns-components/core';
|
|
|
735
834
|
|
|
736
835
|
### Props
|
|
737
836
|
|
|
738
|
-
|
|
837
|
+
| name | type | required | description |
|
|
838
|
+
| --- | --- | --- | --- |
|
|
839
|
+
| `borderRadius` | `BorderRadius<string \| number> \| undefined` | no | Border radius for the checkbox or switch indicator. |
|
|
840
|
+
| `children` | `string \| ReactElement<any, string \| JSXElementConstructor<any>> \| undefined` | no | Text for checkbox or switch |
|
|
841
|
+
| `colors` | `CheckboxColors \| undefined` | no | No description available. |
|
|
842
|
+
| `isChecked` | `boolean \| undefined` | no | Indicates whether the checkbox or switch is selected |
|
|
843
|
+
| `isDisabled` | `boolean \| undefined` | no | Disables the checkbox or switch so it cannot be toggled |
|
|
844
|
+
| `labelClassName` | `string \| undefined` | no | Classname for the label |
|
|
845
|
+
| `onChange` | `ChangeEventHandler<HTMLInputElement> \| undefined` | no | Function to be executed if the checked value changes |
|
|
846
|
+
| `shouldChangeOnLabelClick` | `boolean \| undefined` | no | Whether the label should change the state of the checkbox |
|
|
847
|
+
| `shouldEnableKeyboardHighlighting` | `boolean \| undefined` | no | Enables keyboard-only focus highlighting. |
|
|
848
|
+
| `shouldShowAsSwitch` | `boolean \| undefined` | no | Changes the design to use switch instead of checkbox |
|
|
849
|
+
| `shouldShowCentered` | `boolean \| undefined` | no | Whether the Checkbox should be displayed centered to the label or at the top |
|
|
739
850
|
|
|
740
851
|
### Types
|
|
741
852
|
|
|
@@ -749,6 +860,7 @@ No additional exported types documented.
|
|
|
749
860
|
### Anti Patterns
|
|
750
861
|
|
|
751
862
|
- Avoid imports from internal paths such as `@chayns-components/core/src/...`; always use the public package export.
|
|
863
|
+
- Avoid incomplete prop objects; follow the documented prop types and required fields.
|
|
752
864
|
## ComboBox
|
|
753
865
|
|
|
754
866
|
`ComboBox` is exported by `@chayns-components/core` and should be imported from the public package entry point.
|
|
@@ -1278,20 +1390,69 @@ import { ComboBox } from '@chayns-components/core';
|
|
|
1278
1390
|
|
|
1279
1391
|
### Props
|
|
1280
1392
|
|
|
1281
|
-
|
|
1393
|
+
| name | type | required | description |
|
|
1394
|
+
| --- | --- | --- | --- |
|
|
1395
|
+
| `bodyWidth` | `number \| undefined` | no | The width of the body. |
|
|
1396
|
+
| `container` | `Element \| undefined` | no | The element where the content of the `ComboBox` should be rendered via React Portal. |
|
|
1397
|
+
| `direction` | `DropdownDirection \| undefined` | no | The direction in which the combobox should open. |
|
|
1398
|
+
| `inputValue` | `string \| undefined` | no | The value of the optional input. |
|
|
1399
|
+
| `isDisabled` | `boolean \| undefined` | no | Whether the combobox should be disabled. |
|
|
1400
|
+
| `lists` | `IComboBoxItems[]` | yes | The list of the items that should be displayed. |
|
|
1401
|
+
| `maxHeight` | `number \| undefined` | no | The maximum height of the combobox content. |
|
|
1402
|
+
| `onHide` | `(() => void) \| undefined` | no | Function to be executed when the content of the `ComboBox` is hidden. |
|
|
1403
|
+
| `onInputBlur` | `FocusEventHandler<HTMLInputElement> \| undefined` | no | Function to be executed when the optional input lost its focus. |
|
|
1404
|
+
| `onInputChange` | `ChangeEventHandler<HTMLInputElement> \| undefined` | no | Function to be executed when the value of the optional input is changed. |
|
|
1405
|
+
| `onInputFocus` | `FocusEventHandler<HTMLInputElement> \| undefined` | no | Function to be executed when the optional input gets its focus. |
|
|
1406
|
+
| `onSelect` | `((comboboxItem?: IComboBoxItem \| undefined) => boolean \| void \| Promise<boolean>) \| undefined` | no | Function that should be executed when an item is selected. If the function returns false, the item will not be selected. |
|
|
1407
|
+
| `onShow` | `(() => void) \| undefined` | no | Function to be executed when the content of the `ComboBox` is shown. |
|
|
1408
|
+
| `placeholder` | `string` | yes | A text that should be displayed when no item is selected. |
|
|
1409
|
+
| `prefix` | `string \| undefined` | no | A prefix that should be displayed before the placeholder. |
|
|
1410
|
+
| `prefixMinWidth` | `number \| undefined` | no | Optional min width for the prefix element. |
|
|
1411
|
+
| `selectedItem` | `IComboBoxItem \| undefined` | no | An item that should be preselected. |
|
|
1412
|
+
| `shouldCaptureEvents` | `boolean \| undefined` | no | Whether the outside events should be captured. |
|
|
1413
|
+
| `shouldDropDownUseMaxItemWidth` | `boolean \| undefined` | no | If true, the dropdown will use the maximum width of the items. |
|
|
1414
|
+
| `shouldEnableKeyboardHighlighting` | `boolean \| undefined` | no | Enables the shared keyboard-only focus ring for the combobox header. |
|
|
1415
|
+
| `shouldShowBigImage` | `boolean \| undefined` | no | If true, the images of the items are displayed in a bigger shape. This prop will automatically be set to true if the subtext of an item is given. |
|
|
1416
|
+
| `shouldShowClearIcon` | `boolean \| undefined` | no | If true, a clear icon is displayed at the end of the combo box if an item is selected. |
|
|
1417
|
+
| `shouldShowRoundImage` | `boolean \| undefined` | no | If true, the images of the items are displayed in a round shape. |
|
|
1418
|
+
| `shouldShowTransparentBackground` | `boolean \| undefined` | no | Whether the background should be transparent. |
|
|
1419
|
+
| `shouldUseCurrentItemWidth` | `boolean \| undefined` | no | Whether the width of the ComboBox should be the width of the current item. |
|
|
1420
|
+
| `shouldUseFullWidth` | `boolean \| undefined` | no | Whether the width of the 'ComboBox' should be the width of the parent or of the widest item. |
|
|
1421
|
+
| `size` | `ComboBoxSize \| undefined` | no | The size of the ComboBox. |
|
|
1282
1422
|
|
|
1283
1423
|
### Types
|
|
1284
1424
|
|
|
1285
|
-
|
|
1425
|
+
- `ComboBoxSize` -> `enum ComboBoxSize {
|
|
1426
|
+
/**
|
|
1427
|
+
* Standard height and spacing.
|
|
1428
|
+
*/
|
|
1429
|
+
NORMAL = 'normal',
|
|
1430
|
+
/**
|
|
1431
|
+
* Compact height and spacing.
|
|
1432
|
+
*/
|
|
1433
|
+
SMALL = 'small',
|
|
1434
|
+
}`
|
|
1435
|
+
- `DropdownDirection` -> `enum DropdownDirection {
|
|
1436
|
+
BOTTOM,
|
|
1437
|
+
TOP,
|
|
1438
|
+
BOTTOM_LEFT,
|
|
1439
|
+
BOTTOM_RIGHT,
|
|
1440
|
+
TOP_LEFT,
|
|
1441
|
+
TOP_RIGHT,
|
|
1442
|
+
LEFT,
|
|
1443
|
+
RIGHT,
|
|
1444
|
+
}`
|
|
1286
1445
|
|
|
1287
1446
|
### Usage Notes
|
|
1288
1447
|
|
|
1289
1448
|
- Import `ComboBox` directly from `@chayns-components/core` instead of internal source paths.
|
|
1290
1449
|
- Start with one of the documented Storybook examples and adapt the props incrementally for your use case.
|
|
1450
|
+
- Pay special attention to required props: `lists`, `placeholder`.
|
|
1291
1451
|
|
|
1292
1452
|
### Anti Patterns
|
|
1293
1453
|
|
|
1294
1454
|
- Avoid imports from internal paths such as `@chayns-components/core/src/...`; always use the public package export.
|
|
1455
|
+
- Avoid incomplete prop objects; follow the documented prop types and required fields.
|
|
1295
1456
|
## ContentCard
|
|
1296
1457
|
|
|
1297
1458
|
`ContentCard` is exported by `@chayns-components/core` and should be imported from the public package entry point.
|
|
@@ -1336,11 +1497,21 @@ import { ContentCard } from '@chayns-components/core';
|
|
|
1336
1497
|
|
|
1337
1498
|
### Props
|
|
1338
1499
|
|
|
1339
|
-
|
|
1500
|
+
| name | type | required | description |
|
|
1501
|
+
| --- | --- | --- | --- |
|
|
1502
|
+
| `children` | `ReactNode` | no | The content of the content card |
|
|
1503
|
+
| `onClick` | `(() => void) \| undefined` | no | The onClick event handler |
|
|
1504
|
+
| `type` | `ContentCardType \| undefined` | no | The type of the content card |
|
|
1340
1505
|
|
|
1341
1506
|
### Types
|
|
1342
1507
|
|
|
1343
|
-
|
|
1508
|
+
- `ContentCardType` -> `enum ContentCardType {
|
|
1509
|
+
Default = 'default',
|
|
1510
|
+
Error = 'error',
|
|
1511
|
+
Success = 'success',
|
|
1512
|
+
Warning = 'warning',
|
|
1513
|
+
SiteColor = 'siteColor',
|
|
1514
|
+
}`
|
|
1344
1515
|
|
|
1345
1516
|
### Usage Notes
|
|
1346
1517
|
|
|
@@ -1350,6 +1521,7 @@ No additional exported types documented.
|
|
|
1350
1521
|
### Anti Patterns
|
|
1351
1522
|
|
|
1352
1523
|
- Avoid imports from internal paths such as `@chayns-components/core/src/...`; always use the public package export.
|
|
1524
|
+
- Avoid incomplete prop objects; follow the documented prop types and required fields.
|
|
1353
1525
|
## ContextMenu
|
|
1354
1526
|
|
|
1355
1527
|
`ContextMenu` is exported by `@chayns-components/core` and should be imported from the public package entry point.
|
|
@@ -1451,20 +1623,69 @@ import { ContextMenu } from '@chayns-components/core';
|
|
|
1451
1623
|
|
|
1452
1624
|
### Props
|
|
1453
1625
|
|
|
1454
|
-
|
|
1626
|
+
| name | type | required | description |
|
|
1627
|
+
| --- | --- | --- | --- |
|
|
1628
|
+
| `alignment` | `ContextMenuAlignment \| undefined` | no | Context menu alignment |
|
|
1629
|
+
| `children` | `ReactNode` | no | Children element |
|
|
1630
|
+
| `className` | `string \| undefined` | no | Additional class name applied to the trigger wrapper. |
|
|
1631
|
+
| `container` | `Element \| undefined` | no | Container element |
|
|
1632
|
+
| `coordinates` | `ContextMenuCoordinates \| undefined` | no | Custom coordinates |
|
|
1633
|
+
| `dialogText` | `string \| undefined` | no | Optional text for the select dialog. |
|
|
1634
|
+
| `headline` | `string \| undefined` | no | Context menu headline |
|
|
1635
|
+
| `items` | `ContextMenuItem[]` | yes | Menu items |
|
|
1636
|
+
| `onHide` | `VoidFunction \| undefined` | no | Hide callback function |
|
|
1637
|
+
| `onShow` | `VoidFunction \| undefined` | no | Show callback function |
|
|
1638
|
+
| `shouldCloseOnPopupClick` | `boolean \| undefined` | no | Close on popup click flag |
|
|
1639
|
+
| `shouldDisableClick` | `boolean \| undefined` | no | Disable click flag |
|
|
1640
|
+
| `shouldEnableKeyboardHighlighting` | `boolean \| undefined` | no | Enables keyboard-only focus highlighting for the trigger. |
|
|
1641
|
+
| `shouldHidePopupArrow` | `boolean \| undefined` | no | Hide popup arrow flag |
|
|
1642
|
+
| `shouldShowHoverEffect` | `boolean \| undefined` | no | Show hover effect flag |
|
|
1643
|
+
| `shouldUseDefaultTriggerStyles` | `boolean \| undefined` | no | Whether the default trigger padding/background styles should be applied. |
|
|
1644
|
+
| `style` | `CSSProperties \| undefined` | no | Inline styles applied to the trigger wrapper. |
|
|
1645
|
+
| `yOffset` | `number \| undefined` | no | Vertical offset between the trigger element and the context menu. |
|
|
1646
|
+
| `zIndex` | `number \| undefined` | no | Z-index value |
|
|
1455
1647
|
|
|
1456
1648
|
### Types
|
|
1457
1649
|
|
|
1458
|
-
|
|
1650
|
+
- `ContextMenuAlignment` -> `enum ContextMenuAlignment {
|
|
1651
|
+
TopLeft,
|
|
1652
|
+
BottomLeft,
|
|
1653
|
+
TopRight,
|
|
1654
|
+
BottomRight,
|
|
1655
|
+
TopCenter,
|
|
1656
|
+
BottomCenter,
|
|
1657
|
+
}`
|
|
1658
|
+
- `ContextMenuCoordinates` -> `type ContextMenuCoordinates = {
|
|
1659
|
+
/** The x-coordinate. */
|
|
1660
|
+
x: number;
|
|
1661
|
+
/** The y-coordinate. */
|
|
1662
|
+
y: number;
|
|
1663
|
+
};`
|
|
1664
|
+
- `ContextMenuItem` -> `type ContextMenuItem = {
|
|
1665
|
+
/** Optional icons for the item. Can be strings or React nodes. */
|
|
1666
|
+
icons?: string[] | ReactNode;
|
|
1667
|
+
/** Whether the item is selected. */
|
|
1668
|
+
isSelected?: boolean;
|
|
1669
|
+
/** Unique key for the item. */
|
|
1670
|
+
key: string;
|
|
1671
|
+
/** Function called when the item is clicked. */
|
|
1672
|
+
onClick: (event?: MouseEvent<HTMLDivElement>) => Promise<void> | void;
|
|
1673
|
+
/** Whether to show a spacer after the item. */
|
|
1674
|
+
shouldShowSpacer?: boolean;
|
|
1675
|
+
/** The text displayed for the item. */
|
|
1676
|
+
text: string;
|
|
1677
|
+
};`
|
|
1459
1678
|
|
|
1460
1679
|
### Usage Notes
|
|
1461
1680
|
|
|
1462
1681
|
- Import `ContextMenu` directly from `@chayns-components/core` instead of internal source paths.
|
|
1463
1682
|
- Start with one of the documented Storybook examples and adapt the props incrementally for your use case.
|
|
1683
|
+
- Pay special attention to required props: `items`.
|
|
1464
1684
|
|
|
1465
1685
|
### Anti Patterns
|
|
1466
1686
|
|
|
1467
1687
|
- Avoid imports from internal paths such as `@chayns-components/core/src/...`; always use the public package export.
|
|
1688
|
+
- Avoid incomplete prop objects; follow the documented prop types and required fields.
|
|
1468
1689
|
## CopyableContent
|
|
1469
1690
|
|
|
1470
1691
|
`CopyableContent` is exported by `@chayns-components/core` and should be imported from the public package entry point.
|
|
@@ -1603,7 +1824,13 @@ import { CopyableContent } from '@chayns-components/core';
|
|
|
1603
1824
|
|
|
1604
1825
|
### Props
|
|
1605
1826
|
|
|
1606
|
-
|
|
1827
|
+
| name | type | required | description |
|
|
1828
|
+
| --- | --- | --- | --- |
|
|
1829
|
+
| `appearance` | `CopyableContentAppearance \| undefined` | no | Controls the visual surface of the content block. |
|
|
1830
|
+
| `children` | `ReactNode` | no | Replaces only the visible rendered content and never the copied source. |
|
|
1831
|
+
| `collapsedHeight` | `number \| undefined` | no | The height of the content in its collapsed state. |
|
|
1832
|
+
| `content` | `string` | yes | Markdown source used for rendering and clipboard data. |
|
|
1833
|
+
| `copyFailedMessage` | `string \| undefined` | no | Replaces the localized error message shown when copying fails. |
|
|
1607
1834
|
|
|
1608
1835
|
### Types
|
|
1609
1836
|
|
|
@@ -1613,10 +1840,12 @@ No additional exported types documented.
|
|
|
1613
1840
|
|
|
1614
1841
|
- Import `CopyableContent` directly from `@chayns-components/core` instead of internal source paths.
|
|
1615
1842
|
- Start with one of the documented Storybook examples and adapt the props incrementally for your use case.
|
|
1843
|
+
- Pay special attention to required props: `content`.
|
|
1616
1844
|
|
|
1617
1845
|
### Anti Patterns
|
|
1618
1846
|
|
|
1619
1847
|
- Avoid imports from internal paths such as `@chayns-components/core/src/...`; always use the public package export.
|
|
1848
|
+
- Avoid incomplete prop objects; follow the documented prop types and required fields.
|
|
1620
1849
|
## ExpandableContent
|
|
1621
1850
|
|
|
1622
1851
|
`ExpandableContent` is exported by `@chayns-components/core` and should be imported from the public package entry point.
|
|
@@ -1643,7 +1872,11 @@ import { ExpandableContent } from '@chayns-components/core';
|
|
|
1643
1872
|
|
|
1644
1873
|
### Props
|
|
1645
1874
|
|
|
1646
|
-
|
|
1875
|
+
| name | type | required | description |
|
|
1876
|
+
| --- | --- | --- | --- |
|
|
1877
|
+
| `children` | `ReactNode` | yes | The children that should be animated. |
|
|
1878
|
+
| `isOpen` | `boolean` | yes | Whether the content is expanded. |
|
|
1879
|
+
| `startDelay` | `number \| undefined` | no | An optional start delay. |
|
|
1647
1880
|
|
|
1648
1881
|
### Types
|
|
1649
1882
|
|
|
@@ -1653,10 +1886,12 @@ No additional exported types documented.
|
|
|
1653
1886
|
|
|
1654
1887
|
- Import `ExpandableContent` directly from `@chayns-components/core` instead of internal source paths.
|
|
1655
1888
|
- Start with one of the documented Storybook examples and adapt the props incrementally for your use case.
|
|
1889
|
+
- Pay special attention to required props: `children`, `isOpen`.
|
|
1656
1890
|
|
|
1657
1891
|
### Anti Patterns
|
|
1658
1892
|
|
|
1659
1893
|
- Avoid imports from internal paths such as `@chayns-components/core/src/...`; always use the public package export.
|
|
1894
|
+
- Avoid incomplete prop objects; follow the documented prop types and required fields.
|
|
1660
1895
|
## FileInput
|
|
1661
1896
|
|
|
1662
1897
|
`FileInput` is exported by `@chayns-components/core` and should be imported from the public package entry point.
|
|
@@ -1706,7 +1941,23 @@ import { FileInput } from '@chayns-components/core';
|
|
|
1706
1941
|
|
|
1707
1942
|
### Props
|
|
1708
1943
|
|
|
1709
|
-
|
|
1944
|
+
| name | type | required | description |
|
|
1945
|
+
| --- | --- | --- | --- |
|
|
1946
|
+
| `files` | `IFileItem[] \| undefined` | no | Already uploaded files to display. |
|
|
1947
|
+
| `fileSelectionIcons` | `string[] \| undefined` | no | An array of icons that should be displayed inside the FileInput |
|
|
1948
|
+
| `fileSelectionPlaceholder` | `string \| undefined` | no | The text that should be displayed inside the FileInput. |
|
|
1949
|
+
| `fileTypes` | `string \| undefined` | no | The filetypes that could be selected. Example for multiple types: 'image/*, video/*'. |
|
|
1950
|
+
| `imageSelectIcons` | `string[] \| undefined` | no | The icon of the image selection. |
|
|
1951
|
+
| `imageSelectPlaceholder` | `string \| undefined` | no | If set, pictures can be select via Pixabay. |
|
|
1952
|
+
| `isDisabled` | `boolean \| undefined` | no | Whether the FileInput is disabled. |
|
|
1953
|
+
| `maxFiles` | `number \| undefined` | no | The maximum amount of Files that can be uploaded. |
|
|
1954
|
+
| `maxFileSizeInMB` | `number \| undefined` | no | The maximum size of a file in MB. |
|
|
1955
|
+
| `onAdd` | `((files: File[] \| UploadedFile[]) => void) \| undefined` | no | A function to be executed when files are added. |
|
|
1956
|
+
| `onMaxFilesReached` | `(() => void) \| undefined` | no | Function to be executed when the maximum amount of Files are reached. |
|
|
1957
|
+
| `onRemove` | `((file: IFileItem \| File \| UploadedFile) => void) \| undefined` | no | A function to be executed when a file is removed. |
|
|
1958
|
+
| `shouldAllowDownload` | `boolean \| undefined` | no | Whether to show a download icon for files that have a `source` set. |
|
|
1959
|
+
| `shouldEnableKeyboardHighlighting` | `boolean \| undefined` | no | Enables keyboard-only focus highlighting for the file selection trigger. |
|
|
1960
|
+
| `shouldPreventImageUpload` | `boolean \| undefined` | no | Whether the image upload should be prevented. |
|
|
1710
1961
|
|
|
1711
1962
|
### Types
|
|
1712
1963
|
|
|
@@ -1720,6 +1971,7 @@ No additional exported types documented.
|
|
|
1720
1971
|
### Anti Patterns
|
|
1721
1972
|
|
|
1722
1973
|
- Avoid imports from internal paths such as `@chayns-components/core/src/...`; always use the public package export.
|
|
1974
|
+
- Avoid incomplete prop objects; follow the documented prop types and required fields.
|
|
1723
1975
|
## FileList
|
|
1724
1976
|
|
|
1725
1977
|
`FileList` is exported by `@chayns-components/core` and should be imported from the public package entry point.
|
|
@@ -1747,7 +1999,11 @@ import { FileList } from '@chayns-components/core';
|
|
|
1747
1999
|
|
|
1748
2000
|
### Props
|
|
1749
2001
|
|
|
1750
|
-
|
|
2002
|
+
| name | type | required | description |
|
|
2003
|
+
| --- | --- | --- | --- |
|
|
2004
|
+
| `files` | `IFileItem[] \| undefined` | no | Already uploaded files to display. |
|
|
2005
|
+
| `onRemove` | `((id: string) => void) \| undefined` | no | A function to be executed when a file is removed. |
|
|
2006
|
+
| `shouldAllowDownload` | `boolean \| undefined` | no | Whether to show a download icon for files that have a `source` set. |
|
|
1751
2007
|
|
|
1752
2008
|
### Types
|
|
1753
2009
|
|
|
@@ -1761,6 +2017,7 @@ No additional exported types documented.
|
|
|
1761
2017
|
### Anti Patterns
|
|
1762
2018
|
|
|
1763
2019
|
- Avoid imports from internal paths such as `@chayns-components/core/src/...`; always use the public package export.
|
|
2020
|
+
- Avoid incomplete prop objects; follow the documented prop types and required fields.
|
|
1764
2021
|
## FileSelect
|
|
1765
2022
|
|
|
1766
2023
|
`FileSelect` is exported by `@chayns-components/core` and should be imported from the public package entry point.
|
|
@@ -1781,7 +2038,19 @@ import { FileSelect } from '@chayns-components/core';
|
|
|
1781
2038
|
|
|
1782
2039
|
### Props
|
|
1783
2040
|
|
|
1784
|
-
|
|
2041
|
+
| name | type | required | description |
|
|
2042
|
+
| --- | --- | --- | --- |
|
|
2043
|
+
| `fileSelectionIcons` | `string[] \| undefined` | no | An array of icons that should be displayed inside the FileInput |
|
|
2044
|
+
| `fileSelectionPlaceholder` | `string \| undefined` | no | The text that should be displayed inside the FileInput. |
|
|
2045
|
+
| `fileTypes` | `string \| undefined` | no | The filetypes that could be selected. Example for multiple types: 'image/*, video/*'. |
|
|
2046
|
+
| `imageSelectIcons` | `string[] \| undefined` | no | The icon of the image selection. |
|
|
2047
|
+
| `imageSelectPlaceholder` | `string \| undefined` | no | If set, pictures can be select via Pixabay. |
|
|
2048
|
+
| `isDisabled` | `boolean \| undefined` | no | Whether the FileInput is disabled. |
|
|
2049
|
+
| `maxFiles` | `number \| undefined` | no | The maximum amount of Files that can be uploaded. |
|
|
2050
|
+
| `maxFileSizeInMB` | `number \| undefined` | no | The maximum size of a file in MB. |
|
|
2051
|
+
| `onAdd` | `((files: File[] \| UploadedFile[]) => void) \| undefined` | no | A function to be executed when files are added. |
|
|
2052
|
+
| `shouldEnableKeyboardHighlighting` | `boolean \| undefined` | no | Enables keyboard-only focus highlighting for selection triggers. |
|
|
2053
|
+
| `shouldPreventImageUpload` | `boolean \| undefined` | no | Whether the image upload should be prevented. |
|
|
1785
2054
|
|
|
1786
2055
|
### Types
|
|
1787
2056
|
|
|
@@ -1795,6 +2064,7 @@ No additional exported types documented.
|
|
|
1795
2064
|
### Anti Patterns
|
|
1796
2065
|
|
|
1797
2066
|
- Avoid imports from internal paths such as `@chayns-components/core/src/...`; always use the public package export.
|
|
2067
|
+
- Avoid incomplete prop objects; follow the documented prop types and required fields.
|
|
1798
2068
|
## Filter
|
|
1799
2069
|
|
|
1800
2070
|
`Filter` is exported by `@chayns-components/core` and should be imported from the public package entry point.
|
|
@@ -2007,20 +2277,61 @@ import { Filter } from '@chayns-components/core';
|
|
|
2007
2277
|
|
|
2008
2278
|
### Props
|
|
2009
2279
|
|
|
2010
|
-
|
|
2280
|
+
| name | type | required | description |
|
|
2281
|
+
| --- | --- | --- | --- |
|
|
2282
|
+
| `checkboxConfig` | `CheckboxProps \| undefined` | no | No description available. |
|
|
2283
|
+
| `comboboxConfig` | `ComboboxConfig \| undefined` | no | No description available. |
|
|
2284
|
+
| `filterButtonConfig` | `FilterButtonsProps \| undefined` | no | No description available. |
|
|
2285
|
+
| `headline` | `ReactNode` | yes | No description available. |
|
|
2286
|
+
| `onActiveChange` | `((isActive: boolean) => void) \| undefined` | no | No description available. |
|
|
2287
|
+
| `rightIcons` | `FilterRightIcon[] \| undefined` | no | No description available. |
|
|
2288
|
+
| `searchConfig` | `SearchConfig \| undefined` | no | No description available. |
|
|
2289
|
+
| `shouldAutoFocus` | `boolean \| undefined` | no | No description available. |
|
|
2290
|
+
| `shouldEnableKeyboardHighlighting` | `boolean \| undefined` | no | No description available. |
|
|
2291
|
+
| `shouldShowRoundedHoverEffect` | `boolean \| undefined` | no | No description available. |
|
|
2292
|
+
| `sortConfig` | `SortConfig \| undefined` | no | No description available. |
|
|
2011
2293
|
|
|
2012
2294
|
### Types
|
|
2013
2295
|
|
|
2014
|
-
|
|
2296
|
+
- `FilterRightIcon` -> `interface FilterRightIcon {
|
|
2297
|
+
icons: string[];
|
|
2298
|
+
onClick: VoidFunction;
|
|
2299
|
+
}`
|
|
2300
|
+
- `SearchConfig` -> `interface SearchConfig {
|
|
2301
|
+
/**
|
|
2302
|
+
* Callback invoked whenever the search input changes.
|
|
2303
|
+
*/
|
|
2304
|
+
onSearchChange: (search: string) => void;
|
|
2305
|
+
/**
|
|
2306
|
+
* Current search value.
|
|
2307
|
+
*/
|
|
2308
|
+
searchValue: string;
|
|
2309
|
+
}`
|
|
2310
|
+
- `SortConfig` -> `interface SortConfig {
|
|
2311
|
+
/**
|
|
2312
|
+
* Callback invoked when a sort item is selected.
|
|
2313
|
+
*/
|
|
2314
|
+
onSortChange: (item: SortItem) => void;
|
|
2315
|
+
/**
|
|
2316
|
+
* Currently selected sort item.
|
|
2317
|
+
*/
|
|
2318
|
+
selectedItem: SortItem;
|
|
2319
|
+
/**
|
|
2320
|
+
* Available sort items.
|
|
2321
|
+
*/
|
|
2322
|
+
items: SortItem[];
|
|
2323
|
+
}`
|
|
2015
2324
|
|
|
2016
2325
|
### Usage Notes
|
|
2017
2326
|
|
|
2018
2327
|
- Import `Filter` directly from `@chayns-components/core` instead of internal source paths.
|
|
2019
2328
|
- Start with one of the documented Storybook examples and adapt the props incrementally for your use case.
|
|
2329
|
+
- Pay special attention to required props: `headline`.
|
|
2020
2330
|
|
|
2021
2331
|
### Anti Patterns
|
|
2022
2332
|
|
|
2023
2333
|
- Avoid imports from internal paths such as `@chayns-components/core/src/...`; always use the public package export.
|
|
2334
|
+
- Avoid incomplete prop objects; follow the documented prop types and required fields.
|
|
2024
2335
|
## FilterButtons
|
|
2025
2336
|
|
|
2026
2337
|
`FilterButtons` is exported by `@chayns-components/core` and should be imported from the public package entry point.
|
|
@@ -2151,20 +2462,33 @@ import { FilterButtons } from '@chayns-components/core';
|
|
|
2151
2462
|
|
|
2152
2463
|
### Props
|
|
2153
2464
|
|
|
2154
|
-
|
|
2465
|
+
| name | type | required | description |
|
|
2466
|
+
| --- | --- | --- | --- |
|
|
2467
|
+
| `allCount` | `number \| undefined` | no | The number that should be displayed as count in the "all" button. |
|
|
2468
|
+
| `items` | `IFilterButtonItem[]` | yes | The items that should be displayed. |
|
|
2469
|
+
| `onSelect` | `((keys: string[]) => void) \| undefined` | no | A function that should be executed when an item is selected. |
|
|
2470
|
+
| `selectedItemIds` | `string[] \| undefined` | no | The keys of items that should be selected. |
|
|
2471
|
+
| `shouldCalcCountForAll` | `boolean \| undefined` | no | If true, the count of all items will be shown in the "all" button. |
|
|
2472
|
+
| `shouldEnableKeyboardHighlighting` | `boolean \| undefined` | no | Enables keyboard-only focus highlighting for filter buttons. |
|
|
2473
|
+
| `size` | `FilterButtonSize \| undefined` | no | The size auf the filter buttons. Use the FilterButtonSize enum. |
|
|
2155
2474
|
|
|
2156
2475
|
### Types
|
|
2157
2476
|
|
|
2158
|
-
|
|
2477
|
+
- `FilterButtonSize` -> `enum FilterButtonSize {
|
|
2478
|
+
Small,
|
|
2479
|
+
Normal,
|
|
2480
|
+
}`
|
|
2159
2481
|
|
|
2160
2482
|
### Usage Notes
|
|
2161
2483
|
|
|
2162
2484
|
- Import `FilterButtons` directly from `@chayns-components/core` instead of internal source paths.
|
|
2163
2485
|
- Start with one of the documented Storybook examples and adapt the props incrementally for your use case.
|
|
2486
|
+
- Pay special attention to required props: `items`.
|
|
2164
2487
|
|
|
2165
2488
|
### Anti Patterns
|
|
2166
2489
|
|
|
2167
2490
|
- Avoid imports from internal paths such as `@chayns-components/core/src/...`; always use the public package export.
|
|
2491
|
+
- Avoid incomplete prop objects; follow the documented prop types and required fields.
|
|
2168
2492
|
## GridImage
|
|
2169
2493
|
|
|
2170
2494
|
`GridImage` is exported by `@chayns-components/core` and should be imported from the public package entry point.
|
|
@@ -2193,7 +2517,14 @@ import { GridImage } from '@chayns-components/core';
|
|
|
2193
2517
|
|
|
2194
2518
|
### Props
|
|
2195
2519
|
|
|
2196
|
-
|
|
2520
|
+
| name | type | required | description |
|
|
2521
|
+
| --- | --- | --- | --- |
|
|
2522
|
+
| `background` | `Background<string \| number> \| undefined` | no | The background color of the image. |
|
|
2523
|
+
| `images` | `string[]` | yes | The images to be displayed in the `GridImage`. Only the first three images are displayed. |
|
|
2524
|
+
| `onClick` | `MouseEventHandler<HTMLDivElement> \| undefined` | no | Function to be executed when the images are clicked. |
|
|
2525
|
+
| `shouldEnableKeyboardHighlighting` | `boolean \| undefined` | no | Enables keyboard-only focus highlighting for clickable GridImage instances. |
|
|
2526
|
+
| `shouldShowRoundImage` | `boolean \| undefined` | no | Images of users should always be displayed in a round shape. Therefore, this property can be set to true. |
|
|
2527
|
+
| `size` | `number` | yes | The size of the `GridImage` in pixels, which is set as both width and height. |
|
|
2197
2528
|
|
|
2198
2529
|
### Types
|
|
2199
2530
|
|
|
@@ -2203,10 +2534,12 @@ No additional exported types documented.
|
|
|
2203
2534
|
|
|
2204
2535
|
- Import `GridImage` directly from `@chayns-components/core` instead of internal source paths.
|
|
2205
2536
|
- Start with one of the documented Storybook examples and adapt the props incrementally for your use case.
|
|
2537
|
+
- Pay special attention to required props: `images`, `size`.
|
|
2206
2538
|
|
|
2207
2539
|
### Anti Patterns
|
|
2208
2540
|
|
|
2209
2541
|
- Avoid imports from internal paths such as `@chayns-components/core/src/...`; always use the public package export.
|
|
2542
|
+
- Avoid incomplete prop objects; follow the documented prop types and required fields.
|
|
2210
2543
|
## GroupedImage
|
|
2211
2544
|
|
|
2212
2545
|
`GroupedImage` is exported by `@chayns-components/core` and should be imported from the public package entry point.
|
|
@@ -2262,7 +2595,18 @@ import { GroupedImage } from '@chayns-components/core';
|
|
|
2262
2595
|
|
|
2263
2596
|
### Props
|
|
2264
2597
|
|
|
2265
|
-
|
|
2598
|
+
| name | type | required | description |
|
|
2599
|
+
| --- | --- | --- | --- |
|
|
2600
|
+
| `cornerElement` | `ReactNode` | no | Optional Element to display in the right corner of the image |
|
|
2601
|
+
| `cornerImage` | `string \| undefined` | no | Optional image to display in the bottom right corner of the grouped image. |
|
|
2602
|
+
| `height` | `number \| undefined` | no | Height of the grouped image container. |
|
|
2603
|
+
| `imageBackground` | `Background<string \| number> \| undefined` | no | Background for the single images. |
|
|
2604
|
+
| `images` | `string[]` | yes | Array of image URLs to display in the grouped image. If only one image is provided, it will be displayed as a full image. |
|
|
2605
|
+
| `onClick` | `MouseEventHandler<HTMLDivElement> \| undefined` | no | Optional click handler for the grouped image. |
|
|
2606
|
+
| `onImageError` | `((event: SyntheticEvent<HTMLImageElement, Event>, index: number) => void) \| undefined` | no | Optional handler for image load errors. |
|
|
2607
|
+
| `shouldEnableKeyboardHighlighting` | `boolean \| undefined` | no | Enables keyboard-only focus highlighting for clickable grouped images. |
|
|
2608
|
+
| `shouldPreventBackground` | `boolean \| undefined` | no | Whether to prevent the background of the images from being set. |
|
|
2609
|
+
| `shouldShowRoundImage` | `boolean \| undefined` | no | Whether to show the images in a round shape. |
|
|
2266
2610
|
|
|
2267
2611
|
### Types
|
|
2268
2612
|
|
|
@@ -2272,10 +2616,12 @@ No additional exported types documented.
|
|
|
2272
2616
|
|
|
2273
2617
|
- Import `GroupedImage` directly from `@chayns-components/core` instead of internal source paths.
|
|
2274
2618
|
- Start with one of the documented Storybook examples and adapt the props incrementally for your use case.
|
|
2619
|
+
- Pay special attention to required props: `images`.
|
|
2275
2620
|
|
|
2276
2621
|
### Anti Patterns
|
|
2277
2622
|
|
|
2278
2623
|
- Avoid imports from internal paths such as `@chayns-components/core/src/...`; always use the public package export.
|
|
2624
|
+
- Avoid incomplete prop objects; follow the documented prop types and required fields.
|
|
2279
2625
|
## HighlightSlider
|
|
2280
2626
|
|
|
2281
2627
|
`HighlightSlider` is exported by `@chayns-components/core` and should be imported from the public package entry point.
|
|
@@ -2298,7 +2644,14 @@ import { HighlightSlider } from '@chayns-components/core';
|
|
|
2298
2644
|
|
|
2299
2645
|
### Props
|
|
2300
2646
|
|
|
2301
|
-
|
|
2647
|
+
| name | type | required | description |
|
|
2648
|
+
| --- | --- | --- | --- |
|
|
2649
|
+
| `colors` | `HighlightSliderItemColors \| undefined` | no | The Colors of the slider. |
|
|
2650
|
+
| `count` | `number` | yes | The total number of sections, that should be displayed. |
|
|
2651
|
+
| `currentIndex` | `number` | yes | The current index. |
|
|
2652
|
+
| `duration` | `number \| undefined` | no | The duration of the animation of a single item in seconds. |
|
|
2653
|
+
| `onIndexChange` | `((index: number) => void) \| undefined` | no | Function to be executed if the index has changed. |
|
|
2654
|
+
| `shouldEnableKeyboardHighlighting` | `boolean \| undefined` | no | Enables keyboard-only focus highlighting for interactive slider items. |
|
|
2302
2655
|
|
|
2303
2656
|
### Types
|
|
2304
2657
|
|
|
@@ -2308,10 +2661,12 @@ No additional exported types documented.
|
|
|
2308
2661
|
|
|
2309
2662
|
- Import `HighlightSlider` directly from `@chayns-components/core` instead of internal source paths.
|
|
2310
2663
|
- Start with one of the documented Storybook examples and adapt the props incrementally for your use case.
|
|
2664
|
+
- Pay special attention to required props: `count`, `currentIndex`.
|
|
2311
2665
|
|
|
2312
2666
|
### Anti Patterns
|
|
2313
2667
|
|
|
2314
2668
|
- Avoid imports from internal paths such as `@chayns-components/core/src/...`; always use the public package export.
|
|
2669
|
+
- Avoid incomplete prop objects; follow the documented prop types and required fields.
|
|
2315
2670
|
## Icon
|
|
2316
2671
|
|
|
2317
2672
|
`Icon` is exported by `@chayns-components/core` and should be imported from the public package entry point.
|
|
@@ -2348,7 +2703,19 @@ import { Icon } from '@chayns-components/core';
|
|
|
2348
2703
|
|
|
2349
2704
|
### Props
|
|
2350
2705
|
|
|
2351
|
-
|
|
2706
|
+
| name | type | required | description |
|
|
2707
|
+
| --- | --- | --- | --- |
|
|
2708
|
+
| `className` | `string \| undefined` | no | Additional class name for the icon wrapper element. |
|
|
2709
|
+
| `color` | `string \| undefined` | no | The color of the icon. |
|
|
2710
|
+
| `icons` | `string[]` | yes | The icon(s) to be displayed. |
|
|
2711
|
+
| `isDisabled` | `boolean \| undefined` | no | Whether the icon should be disabled. |
|
|
2712
|
+
| `onClick` | `MouseEventHandler<HTMLSpanElement> \| undefined` | no | Function to be executed when the icon is clicked. |
|
|
2713
|
+
| `onDoubleClick` | `MouseEventHandler<HTMLSpanElement> \| undefined` | no | Function to be executed when the icon is double-clicked. |
|
|
2714
|
+
| `onMouseDown` | `MouseEventHandler<HTMLSpanElement> \| undefined` | no | Function to be executed when the icon is pressed. |
|
|
2715
|
+
| `shouldEnableKeyboardHighlighting` | `boolean \| undefined` | no | Enables keyboard-only focus highlighting for clickable icons. |
|
|
2716
|
+
| `shouldStopPropagation` | `boolean \| undefined` | no | Stops event propagation on click. |
|
|
2717
|
+
| `size` | `number \| undefined` | no | The size of the icon. |
|
|
2718
|
+
| `tabIndex` | `number \| undefined` | no | Optional tab index for the icon. |
|
|
2352
2719
|
|
|
2353
2720
|
### Types
|
|
2354
2721
|
|
|
@@ -2358,10 +2725,12 @@ No additional exported types documented.
|
|
|
2358
2725
|
|
|
2359
2726
|
- Import `Icon` directly from `@chayns-components/core` instead of internal source paths.
|
|
2360
2727
|
- Start with one of the documented Storybook examples and adapt the props incrementally for your use case.
|
|
2728
|
+
- Pay special attention to required props: `icons`.
|
|
2361
2729
|
|
|
2362
2730
|
### Anti Patterns
|
|
2363
2731
|
|
|
2364
2732
|
- Avoid imports from internal paths such as `@chayns-components/core/src/...`; always use the public package export.
|
|
2733
|
+
- Avoid incomplete prop objects; follow the documented prop types and required fields.
|
|
2365
2734
|
## Input
|
|
2366
2735
|
|
|
2367
2736
|
`Input` is exported by `@chayns-components/core` and should be imported from the public package entry point.
|
|
@@ -2419,11 +2788,41 @@ import { Input } from '@chayns-components/core';
|
|
|
2419
2788
|
|
|
2420
2789
|
### Props
|
|
2421
2790
|
|
|
2422
|
-
|
|
2791
|
+
| name | type | required | description |
|
|
2792
|
+
| --- | --- | --- | --- |
|
|
2793
|
+
| `autoComplete` | `AutoComplete` | no | Defines the auto Complete of the input |
|
|
2794
|
+
| `color` | `Color \| undefined` | no | Colors for different parts of the input. You can set the color of the placeholder and the border color. |
|
|
2795
|
+
| `disabledHint` | `string \| undefined` | no | If set and the input is disabled, the input will display a tooltip with this message. |
|
|
2796
|
+
| `id` | `string \| undefined` | no | The id of the input |
|
|
2797
|
+
| `inputMode` | `InputMode` | no | Defines the input mode of the input |
|
|
2798
|
+
| `isDisabled` | `boolean \| undefined` | no | Disables the input so that it cannot be changed anymore |
|
|
2799
|
+
| `isInvalid` | `boolean \| undefined` | no | If true, the input field is marked as invalid |
|
|
2800
|
+
| `leftElement` | `ReactNode` | no | An element to be displayed on the left side of the input field |
|
|
2801
|
+
| `onBlur` | `FocusEventHandler<HTMLInputElement> \| undefined` | no | Function that is executed when the input field loses focus |
|
|
2802
|
+
| `onChange` | `ChangeEventHandler<HTMLInputElement> \| undefined` | no | Function that is executed when the text of the input changes |
|
|
2803
|
+
| `onFocus` | `FocusEventHandler<HTMLInputElement> \| undefined` | no | Function that is executed when the input field is focused |
|
|
2804
|
+
| `onKeyDown` | `KeyboardEventHandler<HTMLInputElement> \| undefined` | no | Function that is executed when a letter is pressed |
|
|
2805
|
+
| `onPaste` | `((event: ClipboardEvent<HTMLInputElement>) => void) \| undefined` | no | Function that is executed when content is pasted into the input field |
|
|
2806
|
+
| `placeholder` | `ReactNode` | no | Placeholder for the input field |
|
|
2807
|
+
| `rightElement` | `ReactElement<any, string \| JSXElementConstructor<any>> \| undefined` | no | An element that should be displayed on the right side of the Input. |
|
|
2808
|
+
| `shouldEnableKeyboardHighlighting` | `boolean \| undefined` | no | Enables keyboard-only focus highlighting. |
|
|
2809
|
+
| `shouldPreventPlaceholderAnimation` | `boolean \| undefined` | no | Whether the placeholder animation should be prevented. |
|
|
2810
|
+
| `shouldRemainPlaceholder` | `boolean \| undefined` | no | Whether the placeholder should remain at its position if a value is typed. |
|
|
2811
|
+
| `shouldShowCenteredContent` | `boolean \| undefined` | no | Whether the content should be displayed centered inside the input. |
|
|
2812
|
+
| `shouldShowClearIcon` | `boolean \| undefined` | no | If true, a clear icon is displayed at the end of the input field |
|
|
2813
|
+
| `shouldShowOnlyBottomBorder` | `boolean \| undefined` | no | Whether only the bottom border should be displayed |
|
|
2814
|
+
| `shouldShowTransparentBackground` | `boolean \| undefined` | no | Whether the background should be transparent. |
|
|
2815
|
+
| `shouldUseAutoFocus` | `boolean \| undefined` | no | If true, the input field is focused when the component is mounted |
|
|
2816
|
+
| `size` | `InputSize \| undefined` | no | The size of the input field |
|
|
2817
|
+
| `type` | `HTMLInputTypeAttribute \| undefined` | no | Input type set for an input element (e.g. 'text', 'number' or 'password') |
|
|
2818
|
+
| `value` | `string \| undefined` | no | Value if the input field should be controlled |
|
|
2423
2819
|
|
|
2424
2820
|
### Types
|
|
2425
2821
|
|
|
2426
|
-
|
|
2822
|
+
- `InputSize` -> `enum InputSize {
|
|
2823
|
+
Small = 'small',
|
|
2824
|
+
Medium = 'medium',
|
|
2825
|
+
}`
|
|
2427
2826
|
|
|
2428
2827
|
### Usage Notes
|
|
2429
2828
|
|
|
@@ -2433,6 +2832,7 @@ No additional exported types documented.
|
|
|
2433
2832
|
### Anti Patterns
|
|
2434
2833
|
|
|
2435
2834
|
- Avoid imports from internal paths such as `@chayns-components/core/src/...`; always use the public package export.
|
|
2835
|
+
- Avoid incomplete prop objects; follow the documented prop types and required fields.
|
|
2436
2836
|
## List
|
|
2437
2837
|
|
|
2438
2838
|
`List` is exported by `@chayns-components/core` and should be imported from the public package entry point.
|
|
@@ -3153,7 +3553,11 @@ import { List, ListItem } from '@chayns-components/core';
|
|
|
3153
3553
|
|
|
3154
3554
|
### Props
|
|
3155
3555
|
|
|
3156
|
-
|
|
3556
|
+
| name | type | required | description |
|
|
3557
|
+
| --- | --- | --- | --- |
|
|
3558
|
+
| `children` | `ReactNode` | yes | The items of the list |
|
|
3559
|
+
| `isWrapped` | `boolean \| undefined` | no | This value must be set for nested AccordionGroup components. This adjusts the style of<br />the head and the padding of the content accordions. |
|
|
3560
|
+
| `shouldEnableKeyboardHighlighting` | `boolean \| undefined` | no | Enables keyboard-only focus highlighting and arrow-key navigation within the list. |
|
|
3157
3561
|
|
|
3158
3562
|
### Types
|
|
3159
3563
|
|
|
@@ -3163,10 +3567,12 @@ No additional exported types documented.
|
|
|
3163
3567
|
|
|
3164
3568
|
- Import `List` directly from `@chayns-components/core` instead of internal source paths.
|
|
3165
3569
|
- Start with one of the documented Storybook examples and adapt the props incrementally for your use case.
|
|
3570
|
+
- Pay special attention to required props: `children`.
|
|
3166
3571
|
|
|
3167
3572
|
### Anti Patterns
|
|
3168
3573
|
|
|
3169
3574
|
- Avoid imports from internal paths such as `@chayns-components/core/src/...`; always use the public package export.
|
|
3575
|
+
- Avoid incomplete prop objects; follow the documented prop types and required fields.
|
|
3170
3576
|
## Masonry
|
|
3171
3577
|
|
|
3172
3578
|
`Masonry` is exported by `@chayns-components/core` and should be imported from the public package entry point.
|
|
@@ -3358,20 +3764,40 @@ import { MentionFinder } from '@chayns-components/core';
|
|
|
3358
3764
|
|
|
3359
3765
|
### Props
|
|
3360
3766
|
|
|
3361
|
-
|
|
3767
|
+
| name | type | required | description |
|
|
3768
|
+
| --- | --- | --- | --- |
|
|
3769
|
+
| `dragCloseThresholdInPx` | `number \| undefined` | no | Threshold in pixels to drag to close the popup |
|
|
3770
|
+
| `enableDragHandle` | `boolean \| undefined` | no | Enables the optional drag handle inside the popup |
|
|
3771
|
+
| `inputValue` | `string` | yes | The text from the input field |
|
|
3772
|
+
| `members` | `MentionMember[]` | yes | Members that can be selected |
|
|
3773
|
+
| `onSelect` | `({ fullMatch, member }: { fullMatch: string; member: MentionMember; }) => void` | yes | Function to be executed when a member is selected |
|
|
3774
|
+
| `overlayContainerSelector` | `string \| undefined` | no | Selector for the container to render the overlay into (defaults to closest dialog, thread, page provider or tapp) |
|
|
3775
|
+
| `popupAlignment` | `MentionFinderPopupAlignment` | yes | Alignment of the popup |
|
|
3362
3776
|
|
|
3363
3777
|
### Types
|
|
3364
3778
|
|
|
3365
|
-
|
|
3779
|
+
- `MentionFinderPopupAlignment` -> `enum MentionFinderPopupAlignment {
|
|
3780
|
+
Top,
|
|
3781
|
+
Bottom,
|
|
3782
|
+
}`
|
|
3783
|
+
- `MentionMember` -> `type MentionMember = {
|
|
3784
|
+
id: string;
|
|
3785
|
+
info?: string;
|
|
3786
|
+
imageUrl: string;
|
|
3787
|
+
name: string;
|
|
3788
|
+
shouldShowRoundImage?: boolean;
|
|
3789
|
+
};`
|
|
3366
3790
|
|
|
3367
3791
|
### Usage Notes
|
|
3368
3792
|
|
|
3369
3793
|
- Import `MentionFinder` directly from `@chayns-components/core` instead of internal source paths.
|
|
3370
3794
|
- Start with one of the documented Storybook examples and adapt the props incrementally for your use case.
|
|
3795
|
+
- Pay special attention to required props: `inputValue`, `members`, `onSelect`, `popupAlignment`.
|
|
3371
3796
|
|
|
3372
3797
|
### Anti Patterns
|
|
3373
3798
|
|
|
3374
3799
|
- Avoid imports from internal paths such as `@chayns-components/core/src/...`; always use the public package export.
|
|
3800
|
+
- Avoid incomplete prop objects; follow the documented prop types and required fields.
|
|
3375
3801
|
## MultiActionButton
|
|
3376
3802
|
|
|
3377
3803
|
`MultiActionButton` is exported by `@chayns-components/core` and should be imported from the public package entry point.
|
|
@@ -3700,20 +4126,90 @@ import { MultiActionButton } from '@chayns-components/core';
|
|
|
3700
4126
|
|
|
3701
4127
|
### Props
|
|
3702
4128
|
|
|
3703
|
-
|
|
4129
|
+
| name | type | required | description |
|
|
4130
|
+
| --- | --- | --- | --- |
|
|
4131
|
+
| `backgroundColor` | `string \| undefined` | no | Optional background color for both actions. |
|
|
4132
|
+
| `className` | `string \| undefined` | no | Additional class name for the wrapper element. |
|
|
4133
|
+
| `extendedTimeoutMs` | `number \| undefined` | no | Timeout in ms before the secondary action collapses after a click. |
|
|
4134
|
+
| `gapColor` | `string \| undefined` | no | Optional color for the 1px separator line between actions. |
|
|
4135
|
+
| `height` | `number \| undefined` | no | Height of the button. |
|
|
4136
|
+
| `isCollapsed` | `boolean \| undefined` | no | Whether the button is collapsed to a single icon. |
|
|
4137
|
+
| `isDisabled` | `boolean \| undefined` | no | Whether the whole control is disabled. |
|
|
4138
|
+
| `primaryAction` | `MultiActionButtonAction` | yes | Primary action configuration. |
|
|
4139
|
+
| `secondaryAction` | `MultiActionButtonAction \| undefined` | no | Secondary action configuration. |
|
|
4140
|
+
| `secondaryContextMenu` | `MultiActionButtonSecondaryContextMenu \| undefined` | no | Context menu rendered as the secondary action. |
|
|
4141
|
+
| `shouldAutoCollapse` | `boolean \| undefined` | no | Whether the button should collapse automatically based on the available width. |
|
|
4142
|
+
| `shouldEnableKeyboardHighlighting` | `boolean \| undefined` | no | Enables keyboard-only focus highlighting for interactive action buttons. |
|
|
4143
|
+
| `shouldUseFullWidth` | `boolean \| undefined` | no | Whether the button should take the full width of its parent. |
|
|
4144
|
+
| `width` | `number \| MotionValue<number> \| undefined` | no | Optional width override for the whole button. |
|
|
3704
4145
|
|
|
3705
4146
|
### Types
|
|
3706
4147
|
|
|
3707
|
-
|
|
4148
|
+
- `MultiActionButtonAction` -> `type MultiActionButtonAction = {
|
|
4149
|
+
/**
|
|
4150
|
+
* Optional background color for this action.
|
|
4151
|
+
* @description Overrides the component-level background color for this specific action.
|
|
4152
|
+
* If omitted, `MultiActionButton.backgroundColor` is used as fallback.
|
|
4153
|
+
* @optional
|
|
4154
|
+
*/
|
|
4155
|
+
backgroundColor?: string;
|
|
4156
|
+
/**
|
|
4157
|
+
* Optional color for the icon and label.
|
|
4158
|
+
* @description Overrides the default text/icon color. If omitted, the current theme text color is used.
|
|
4159
|
+
* @optional
|
|
4160
|
+
*/
|
|
4161
|
+
color?: string;
|
|
4162
|
+
/**
|
|
4163
|
+
* The icon for the action.
|
|
4164
|
+
* @description Can be a FontAwesome class string (e.g., 'fa fa-microphone') or a custom React element.
|
|
4165
|
+
* The icon is always rendered inside a fixed-size slot to keep alignment stable.
|
|
4166
|
+
*/
|
|
4167
|
+
icon: string | ReactElement;
|
|
4168
|
+
/**
|
|
4169
|
+
* Whether the action is disabled.
|
|
4170
|
+
* @description Disabled actions do not respond to hover or click and are visually dimmed.
|
|
4171
|
+
* @optional
|
|
4172
|
+
*/
|
|
4173
|
+
isDisabled?: boolean;
|
|
4174
|
+
/**
|
|
4175
|
+
* Optional reason shown in a tooltip when the action is disabled.
|
|
4176
|
+
* @description Use this to explain why the action is currently unavailable.
|
|
4177
|
+
* @optional
|
|
4178
|
+
*/
|
|
4179
|
+
disabledReason?: string;
|
|
4180
|
+
/**
|
|
4181
|
+
* The optional label for the action.
|
|
4182
|
+
* @description The label is shown next to the icon and will be truncated with ellipsis when
|
|
4183
|
+
* there is not enough horizontal space.
|
|
4184
|
+
* @optional
|
|
4185
|
+
*/
|
|
4186
|
+
label: ReactNode;
|
|
4187
|
+
/**
|
|
4188
|
+
* Click handler for the action.
|
|
4189
|
+
* @description Receives a payload that includes the action type, extension state, and device info.
|
|
4190
|
+
* This allows external logic to decide whether the click should trigger an action immediately.
|
|
4191
|
+
* @optional
|
|
4192
|
+
*/
|
|
4193
|
+
onClick?: (info: MultiActionButtonActionEvent) => void;
|
|
4194
|
+
/**
|
|
4195
|
+
* Status effect configuration for the action.
|
|
4196
|
+
* @description Controls optional visual emphasis like pulsing, without changing layout or sizing.
|
|
4197
|
+
* @optional
|
|
4198
|
+
*/
|
|
4199
|
+
status?: MultiActionButtonActionStatus;
|
|
4200
|
+
};`
|
|
4201
|
+
- `MultiActionButtonSecondaryContextMenu` -> `type MultiActionButtonSecondaryContextMenu = ContextMenuItem[];`
|
|
3708
4202
|
|
|
3709
4203
|
### Usage Notes
|
|
3710
4204
|
|
|
3711
4205
|
- Import `MultiActionButton` directly from `@chayns-components/core` instead of internal source paths.
|
|
3712
4206
|
- Start with one of the documented Storybook examples and adapt the props incrementally for your use case.
|
|
4207
|
+
- Pay special attention to required props: `primaryAction`.
|
|
3713
4208
|
|
|
3714
4209
|
### Anti Patterns
|
|
3715
4210
|
|
|
3716
4211
|
- Avoid imports from internal paths such as `@chayns-components/core/src/...`; always use the public package export.
|
|
4212
|
+
- Avoid incomplete prop objects; follow the documented prop types and required fields.
|
|
3717
4213
|
## NumberInput
|
|
3718
4214
|
|
|
3719
4215
|
`NumberInput` is exported by `@chayns-components/core` and should be imported from the public package entry point.
|
|
@@ -3734,7 +4230,22 @@ import { NumberInput } from '@chayns-components/core';
|
|
|
3734
4230
|
|
|
3735
4231
|
### Props
|
|
3736
4232
|
|
|
3737
|
-
|
|
4233
|
+
| name | type | required | description |
|
|
4234
|
+
| --- | --- | --- | --- |
|
|
4235
|
+
| `isDecimalInput` | `boolean \| undefined` | no | Applies rules for decimal input.<br />Enables the user to input one zero as number before the comma |
|
|
4236
|
+
| `isDisabled` | `boolean \| undefined` | no | Whether the input is disabled |
|
|
4237
|
+
| `isInvalid` | `boolean \| undefined` | no | Whether the value is invalid. |
|
|
4238
|
+
| `isMoneyInput` | `boolean \| undefined` | no | Applies rules for money input.<br />Rules: only two decimal places, one zero before the comma |
|
|
4239
|
+
| `isTimeInput` | `boolean \| undefined` | no | Whether the value should be formatted as a time. |
|
|
4240
|
+
| `maxNumber` | `number \| undefined` | no | Limits the number to this value |
|
|
4241
|
+
| `minNumber` | `number \| undefined` | no | Limits the number to this value |
|
|
4242
|
+
| `onBlur` | `((newNumber: string \| number \| null, isInvalid: boolean) => void) \| undefined` | no | Callback function that is called when the input gets out of focus |
|
|
4243
|
+
| `onChange` | `((newValue: string) => void) \| undefined` | no | Callback function that is called when the input changes<br />It will pass the text from the input |
|
|
4244
|
+
| `placeholder` | `string \| undefined` | no | Placeholder for the input field |
|
|
4245
|
+
| `shouldEnableKeyboardHighlighting` | `boolean \| undefined` | no | Enables keyboard-only focus highlighting. |
|
|
4246
|
+
| `shouldShowOnlyBottomBorder` | `boolean \| undefined` | no | Whether only the bottom border should be displayed |
|
|
4247
|
+
| `shouldTriggerChangeOnFormat` | `boolean \| undefined` | no | Whether the onChange function should be triggert when the value is formatted on the focus or blur |
|
|
4248
|
+
| `value` | `string \| undefined` | no | The value, that should be displayed in the input, when it is in focus.<br />You can also pass a stringified number as default value.<br />NOTE: If you pass a stringified number, it will be formatted to the selected format |
|
|
3738
4249
|
|
|
3739
4250
|
### Types
|
|
3740
4251
|
|
|
@@ -3748,6 +4259,7 @@ No additional exported types documented.
|
|
|
3748
4259
|
### Anti Patterns
|
|
3749
4260
|
|
|
3750
4261
|
- Avoid imports from internal paths such as `@chayns-components/core/src/...`; always use the public package export.
|
|
4262
|
+
- Avoid incomplete prop objects; follow the documented prop types and required fields.
|
|
3751
4263
|
## Popup
|
|
3752
4264
|
|
|
3753
4265
|
`Popup` is exported by `@chayns-components/core` and should be imported from the public package entry point.
|
|
@@ -3816,20 +4328,44 @@ import { Popup } from '@chayns-components/core';
|
|
|
3816
4328
|
|
|
3817
4329
|
### Props
|
|
3818
4330
|
|
|
3819
|
-
|
|
4331
|
+
| name | type | required | description |
|
|
4332
|
+
| --- | --- | --- | --- |
|
|
4333
|
+
| `alignment` | `PopupAlignment \| undefined` | no | The preferred alignment of the popup relative to its trigger element. |
|
|
4334
|
+
| `children` | `ReactNode` | no | The trigger element that the popup is attached to. |
|
|
4335
|
+
| `container` | `Element \| undefined` | no | The DOM element that should receive the popup portal. |
|
|
4336
|
+
| `content` | `ReactNode` | yes | The content rendered inside the popup. |
|
|
4337
|
+
| `isOpen` | `boolean \| undefined` | no | Fully controls whether the popup is visible. |
|
|
4338
|
+
| `onHide` | `VoidFunction \| undefined` | no | Callback that is called after the popup becomes hidden. |
|
|
4339
|
+
| `onShow` | `VoidFunction \| undefined` | no | Callback that is called after the popup becomes visible. |
|
|
4340
|
+
| `shouldBeOpen` | `boolean \| undefined` | no | Requests that the popup should be opened from outside. |
|
|
4341
|
+
| `shouldHideOnChildrenLeave` | `boolean \| undefined` | no | Hides the popup when the pointer leaves the trigger element. |
|
|
4342
|
+
| `shouldScrollWithContent` | `boolean \| undefined` | no | Keeps the popup aligned within the scrolling content container. |
|
|
4343
|
+
| `shouldShowOnHover` | `boolean \| undefined` | no | Opens the popup when the trigger element is hovered instead of clicked. |
|
|
4344
|
+
| `shouldUseChildrenWidth` | `boolean \| undefined` | no | Uses the trigger element width as the popup width reference. |
|
|
4345
|
+
| `shouldUseFullWidth` | `boolean \| undefined` | no | Stretches the trigger element to the full available width. |
|
|
4346
|
+
| `yOffset` | `number \| undefined` | no | Vertical offset between the trigger element and the popup. |
|
|
3820
4347
|
|
|
3821
4348
|
### Types
|
|
3822
4349
|
|
|
3823
|
-
|
|
4350
|
+
- `PopupAlignment` -> `enum PopupAlignment {
|
|
4351
|
+
TopLeft,
|
|
4352
|
+
TopCenter,
|
|
4353
|
+
TopRight,
|
|
4354
|
+
BottomLeft,
|
|
4355
|
+
BottomCenter,
|
|
4356
|
+
BottomRight,
|
|
4357
|
+
}`
|
|
3824
4358
|
|
|
3825
4359
|
### Usage Notes
|
|
3826
4360
|
|
|
3827
4361
|
- Import `Popup` directly from `@chayns-components/core` instead of internal source paths.
|
|
3828
4362
|
- Start with one of the documented Storybook examples and adapt the props incrementally for your use case.
|
|
4363
|
+
- Pay special attention to required props: `content`.
|
|
3829
4364
|
|
|
3830
4365
|
### Anti Patterns
|
|
3831
4366
|
|
|
3832
4367
|
- Avoid imports from internal paths such as `@chayns-components/core/src/...`; always use the public package export.
|
|
4368
|
+
- Avoid incomplete prop objects; follow the documented prop types and required fields.
|
|
3833
4369
|
## ProgressBar
|
|
3834
4370
|
|
|
3835
4371
|
`ProgressBar` is exported by `@chayns-components/core` and should be imported from the public package entry point.
|
|
@@ -3893,7 +4429,17 @@ import { ProgressBar } from '@chayns-components/core';
|
|
|
3893
4429
|
|
|
3894
4430
|
### Props
|
|
3895
4431
|
|
|
3896
|
-
|
|
4432
|
+
| name | type | required | description |
|
|
4433
|
+
| --- | --- | --- | --- |
|
|
4434
|
+
| `colors` | `Colors \| undefined` | no | The colors of the ProgressBar. |
|
|
4435
|
+
| `height` | `number \| undefined` | no | The height of the progress bar in pixels. If not provided, it will be 10px if shouldShowLabelInline is false and 20px if shouldShowLabelInline is true. |
|
|
4436
|
+
| `label` | `string \| undefined` | no | The label that should be displayed under the progressbar. |
|
|
4437
|
+
| `percentage` | `0 \| 2 \| 1 \| 4 \| 56 \| 38 \| 20 \| 3 \| 10 \| 6 \| 5 \| 7 \| 8 \| 9 \| 11 \| 12 \| 13 \| 14 \| 15 \| 16 \| 17 \| 18 \| 19 \| 21 \| 22 \| 23 \| 24 \| 25 \| 26 \| 27 \| 28 \| 29 \| 30 \| 31 \| 32 \| 33 \| 34 \| 35 \| 36 \| 37 \| 39 \| 40 \| 41 \| 42 \| 43 \| 44 \| 45 \| 46 \| 47 \| 48 \| 49 \| 50 \| 51 \| 52 \| 53 \| 54 \| 55 \| 57 \| 58 \| 59 \| 60 \| 61 \| 62 \| 63 \| 64 \| 65 \| 66 \| 67 \| 68 \| 69 \| 70 \| 71 \| 72 \| 73 \| 74 \| 75 \| 76 \| 77 \| 78 \| 79 \| 80 \| 81 \| 82 \| 83 \| 84 \| 85 \| 86 \| 87 \| 88 \| 89 \| 90 \| 91 \| 92 \| 93 \| 94 \| 95 \| 96 \| 97 \| 98 \| 99 \| 100 \| undefined` | no | The percentage of the progress. Number between 0 and 100. |
|
|
4438
|
+
| `shouldHideProgress` | `boolean \| undefined` | no | Whether the progress should be hide and just display the label. |
|
|
4439
|
+
| `shouldShowLabelInline` | `boolean \| undefined` | no | Whether the label should be displayed inside the ProgressBar. |
|
|
4440
|
+
| `showShine` | `boolean \| undefined` | no | Whether a shine animation should be shown on the progress bar. The amount of shine is based on the percentage value. |
|
|
4441
|
+
| `steps` | `(0 \| 2 \| 1 \| 4 \| 56 \| 38 \| 20 \| 3 \| 10 \| 6 \| 5 \| 7 \| 8 \| 9 \| 11 \| 12 \| 13 \| 14 \| 15 \| 16 \| 17 \| 18 \| 19 \| 21 \| 22 \| 23 \| 24 \| 25 \| 26 \| 27 \| 28 \| 29 \| 30 \| 31 \| 32 \| 33 \| 34 \| 35 \| 36 \| 37 \| 39 \| 40 \| 41 \| 42 \| 43 \| 44 \| 45 \| 46 \| 47 \| 48 \| 49 \| 50 \| 51 \| 52 \| 53 \| 54 \| 55 \| 57 \| 58 \| 59 \| 60 \| 61 \| 62 \| 63 \| 64 \| 65 \| 66 \| 67 \| 68 \| 69 \| 70 \| 71 \| 72 \| 73 \| 74 \| 75 \| 76 \| 77 \| 78 \| 79 \| 80 \| 81 \| 82 \| 83 \| 84 \| 85 \| 86 \| 87 \| 88 \| 89 \| 90 \| 91 \| 92 \| 93 \| 94 \| 95 \| 96 \| 97 \| 98 \| 99 \| 100)[] \| undefined` | no | Visual marked steps. |
|
|
4442
|
+
| `thumbLabel` | `ReactNode` | no | The label that should be displayed on the thumb of the progress bar. |
|
|
3897
4443
|
|
|
3898
4444
|
### Types
|
|
3899
4445
|
|
|
@@ -3907,6 +4453,7 @@ No additional exported types documented.
|
|
|
3907
4453
|
### Anti Patterns
|
|
3908
4454
|
|
|
3909
4455
|
- Avoid imports from internal paths such as `@chayns-components/core/src/...`; always use the public package export.
|
|
4456
|
+
- Avoid incomplete prop objects; follow the documented prop types and required fields.
|
|
3910
4457
|
## RadioButton
|
|
3911
4458
|
|
|
3912
4459
|
`RadioButton` is exported by `@chayns-components/core` and should be imported from the public package entry point.
|
|
@@ -3976,7 +4523,16 @@ import { RadioButton } from '@chayns-components/core';
|
|
|
3976
4523
|
|
|
3977
4524
|
### Props
|
|
3978
4525
|
|
|
3979
|
-
|
|
4526
|
+
| name | type | required | description |
|
|
4527
|
+
| --- | --- | --- | --- |
|
|
4528
|
+
| `children` | `ReactNode` | no | The children that should be displayed after the RadioButton is checked. |
|
|
4529
|
+
| `id` | `string \| number` | yes | The id of the radio button. |
|
|
4530
|
+
| `isDisabled` | `boolean \| undefined` | no | whether the RadioButton should be shown. |
|
|
4531
|
+
| `label` | `ReactNode` | no | The label that should be displayed next to the radio button. |
|
|
4532
|
+
| `rightElement` | `ReactNode` | no | An element that should be displayed on the right side of the label. |
|
|
4533
|
+
| `shouldEnableKeyboardHighlighting` | `boolean \| undefined` | no | Enables keyboard-only focus highlighting. |
|
|
4534
|
+
| `shouldShowCentered` | `boolean \| undefined` | no | Whether the RadioButton should be displayed centered to the label or at the top |
|
|
4535
|
+
| `shouldShowRightElementOnlyOnChecked` | `boolean \| undefined` | no | Whether the rightElement should only be displayed when the RadioButton is checked |
|
|
3980
4536
|
|
|
3981
4537
|
### Types
|
|
3982
4538
|
|
|
@@ -3986,10 +4542,12 @@ No additional exported types documented.
|
|
|
3986
4542
|
|
|
3987
4543
|
- Import `RadioButton` directly from `@chayns-components/core` instead of internal source paths.
|
|
3988
4544
|
- Start with one of the documented Storybook examples and adapt the props incrementally for your use case.
|
|
4545
|
+
- Pay special attention to required props: `id`.
|
|
3989
4546
|
|
|
3990
4547
|
### Anti Patterns
|
|
3991
4548
|
|
|
3992
4549
|
- Avoid imports from internal paths such as `@chayns-components/core/src/...`; always use the public package export.
|
|
4550
|
+
- Avoid incomplete prop objects; follow the documented prop types and required fields.
|
|
3993
4551
|
## ScrollView
|
|
3994
4552
|
|
|
3995
4553
|
`ScrollView` is exported by `@chayns-components/core` and should be imported from the public package entry point.
|
|
@@ -4010,7 +4568,15 @@ import { ScrollView } from '@chayns-components/core';
|
|
|
4010
4568
|
|
|
4011
4569
|
### Props
|
|
4012
4570
|
|
|
4013
|
-
|
|
4571
|
+
| name | type | required | description |
|
|
4572
|
+
| --- | --- | --- | --- |
|
|
4573
|
+
| `children` | `ReactNode` | yes | The elements that should be shown inside the scrollview |
|
|
4574
|
+
| `height` | `Height<string \| number> \| undefined` | no | The height of the scroll view. |
|
|
4575
|
+
| `maxHeight` | `Height<string \| number> \| null \| undefined` | no | The maximum height of the scroll view. |
|
|
4576
|
+
| `maxWidth` | `Width<string \| number> \| undefined` | no | The maximum width of the scroll view. |
|
|
4577
|
+
| `overflowX` | `"scroll" \| "auto" \| undefined` | no | The overflow-x style of the scroll view. |
|
|
4578
|
+
| `overflowY` | `"scroll" \| "auto" \| undefined` | no | The overflow-y style of the scroll view. |
|
|
4579
|
+
| `width` | `Width<string \| number> \| undefined` | no | The width of the scroll view. |
|
|
4014
4580
|
|
|
4015
4581
|
### Types
|
|
4016
4582
|
|
|
@@ -4020,10 +4586,12 @@ No additional exported types documented.
|
|
|
4020
4586
|
|
|
4021
4587
|
- Import `ScrollView` directly from `@chayns-components/core` instead of internal source paths.
|
|
4022
4588
|
- Start with one of the documented Storybook examples and adapt the props incrementally for your use case.
|
|
4589
|
+
- Pay special attention to required props: `children`.
|
|
4023
4590
|
|
|
4024
4591
|
### Anti Patterns
|
|
4025
4592
|
|
|
4026
4593
|
- Avoid imports from internal paths such as `@chayns-components/core/src/...`; always use the public package export.
|
|
4594
|
+
- Avoid incomplete prop objects; follow the documented prop types and required fields.
|
|
4027
4595
|
## SearchBox
|
|
4028
4596
|
|
|
4029
4597
|
`SearchBox` is exported by `@chayns-components/core` and should be imported from the public package entry point.
|
|
@@ -4148,20 +4716,58 @@ import { SearchBox } from '@chayns-components/core';
|
|
|
4148
4716
|
|
|
4149
4717
|
### Props
|
|
4150
4718
|
|
|
4151
|
-
|
|
4719
|
+
| name | type | required | description |
|
|
4720
|
+
| --- | --- | --- | --- |
|
|
4721
|
+
| `container` | `Element \| undefined` | no | The element where the content of the `ComboBox` should be rendered via React Portal. |
|
|
4722
|
+
| `customFilter` | `((item: ISearchBoxItem) => boolean) \| undefined` | no | An optional callback function to filter the elements to be displayed |
|
|
4723
|
+
| `dropdownDirection` | `DropdownDirection \| undefined` | no | The direction in which the dropdown should be displayed. By default, it is displayed below the input. |
|
|
4724
|
+
| `hintText` | `string \| undefined` | no | A text that should be displayed if no results are found. |
|
|
4725
|
+
| `inputProps` | `InputProps \| undefined` | no | Props that are passed to the underlying Input component. |
|
|
4726
|
+
| `isInvalid` | `boolean \| undefined` | no | If true, the input field is marked as invalid |
|
|
4727
|
+
| `leftIcons` | `string[] \| undefined` | no | An optional icon that is displayed inside the left side of the input. |
|
|
4728
|
+
| `lists` | `ISearchBoxItems[]` | yes | List of groups with items that can be searched. It is possible to give only one list; if multiple lists are provided, the 'group name' parameter becomes mandatory. |
|
|
4729
|
+
| `maxHeight` | `number \| undefined` | no | The maximum height of the dropdown body in pixels. |
|
|
4730
|
+
| `onBlur` | `FocusEventHandler<HTMLInputElement> \| undefined` | no | Function to be executed when the input lost focus. |
|
|
4731
|
+
| `onChange` | `ChangeEventHandler<HTMLInputElement> \| undefined` | no | Function to be executed when the input is changed. |
|
|
4732
|
+
| `onKeyDown` | `KeyboardEventHandler<HTMLInputElement> \| undefined` | no | Function that is executed when a letter is pressed |
|
|
4733
|
+
| `onSelect` | `((item: ISearchBoxItem) => void) \| undefined` | no | Function to be executed when an item is selected. |
|
|
4734
|
+
| `placeholder` | `string \| undefined` | no | The placeholder that should be displayed. |
|
|
4735
|
+
| `presetValue` | `string \| undefined` | no | Set an input for the search box - it is not an item of a list, just a string. |
|
|
4736
|
+
| `selectedId` | `string \| undefined` | no | Control the selected item. If you use this prop, make sure to update it when the user selects an item. |
|
|
4737
|
+
| `shouldAddInputToList` | `boolean` | yes | If true, the value in the Input is displayed in the list. |
|
|
4738
|
+
| `shouldEnableKeyboardHighlighting` | `boolean \| undefined` | no | Enables keyboard-only focus highlighting. |
|
|
4739
|
+
| `shouldHideFilterButtons` | `boolean \| undefined` | no | If true, the filter buttons are hidden. |
|
|
4740
|
+
| `shouldKeepSelectedItemPosition` | `boolean \| undefined` | no | If true, the selected item keeps its original position in the dropdown list. |
|
|
4741
|
+
| `shouldShowContentOnEmptyInput` | `boolean \| undefined` | no | Whether the full list of items should be displayed if the input is empty. |
|
|
4742
|
+
| `shouldShowRoundImage` | `boolean \| undefined` | no | If true, the images of the items are displayed in a round shape. |
|
|
4743
|
+
| `shouldShowSmallItems` | `boolean \| undefined` | no | If true, the dropdown items are displayed more compactly. |
|
|
4744
|
+
| `shouldShowToggleIcon` | `boolean \| undefined` | no | Whether the icon to open and close the list should be displayed. |
|
|
4745
|
+
| `shouldUseCustomFilterOnly` | `boolean \| undefined` | no | If true, the custom filter replaces the built-in text search instead of narrowing its results. |
|
|
4746
|
+
| `tagInputSettings` | `TagInputSettings \| undefined` | no | Settings for the TagInput. |
|
|
4152
4747
|
|
|
4153
4748
|
### Types
|
|
4154
4749
|
|
|
4155
|
-
|
|
4750
|
+
- `DropdownDirection` -> `enum DropdownDirection {
|
|
4751
|
+
BOTTOM,
|
|
4752
|
+
TOP,
|
|
4753
|
+
BOTTOM_LEFT,
|
|
4754
|
+
BOTTOM_RIGHT,
|
|
4755
|
+
TOP_LEFT,
|
|
4756
|
+
TOP_RIGHT,
|
|
4757
|
+
LEFT,
|
|
4758
|
+
RIGHT,
|
|
4759
|
+
}`
|
|
4156
4760
|
|
|
4157
4761
|
### Usage Notes
|
|
4158
4762
|
|
|
4159
4763
|
- Import `SearchBox` directly from `@chayns-components/core` instead of internal source paths.
|
|
4160
4764
|
- Start with one of the documented Storybook examples and adapt the props incrementally for your use case.
|
|
4765
|
+
- Pay special attention to required props: `lists`, `shouldAddInputToList`.
|
|
4161
4766
|
|
|
4162
4767
|
### Anti Patterns
|
|
4163
4768
|
|
|
4164
4769
|
- Avoid imports from internal paths such as `@chayns-components/core/src/...`; always use the public package export.
|
|
4770
|
+
- Avoid incomplete prop objects; follow the documented prop types and required fields.
|
|
4165
4771
|
## SearchInput
|
|
4166
4772
|
|
|
4167
4773
|
`SearchInput` is exported by `@chayns-components/core` and should be imported from the public package entry point.
|
|
@@ -4184,20 +4790,37 @@ import { SearchInput } from '@chayns-components/core';
|
|
|
4184
4790
|
|
|
4185
4791
|
### Props
|
|
4186
4792
|
|
|
4187
|
-
|
|
4793
|
+
| name | type | required | description |
|
|
4794
|
+
| --- | --- | --- | --- |
|
|
4795
|
+
| `iconColor` | `Color \| undefined` | no | Color of the icon |
|
|
4796
|
+
| `isActive` | `boolean \| undefined` | no | Force the active state of the input and override the internal state |
|
|
4797
|
+
| `onActiveChange` | `((isActive: boolean) => void) \| undefined` | no | Function that is executed when the active state of the input changes |
|
|
4798
|
+
| `onChange` | `ChangeEventHandler<HTMLInputElement>` | yes | Function that is executed when the text of the input changes |
|
|
4799
|
+
| `onKeyDown` | `((event: KeyboardEvent<HTMLInputElement>) => void) \| undefined` | no | Function that is executed when a key is pressed |
|
|
4800
|
+
| `placeholder` | `string \| undefined` | no | Placeholder for the input field |
|
|
4801
|
+
| `shouldEnableKeyboardHighlighting` | `boolean \| undefined` | no | Enables keyboard-only focus highlighting. |
|
|
4802
|
+
| `shouldUseAbsolutePositioning` | `boolean \| undefined` | no | Whether the SearchInput should be positioned absolute. |
|
|
4803
|
+
| `size` | `InputSize \| undefined` | no | The size of the input field |
|
|
4804
|
+
| `value` | `string \| undefined` | no | Value if the input field should be controlled |
|
|
4805
|
+
| `width` | `number \| undefined` | no | The width of the parent. |
|
|
4188
4806
|
|
|
4189
4807
|
### Types
|
|
4190
4808
|
|
|
4191
|
-
|
|
4809
|
+
- `InputSize` -> `enum InputSize {
|
|
4810
|
+
Small = 'small',
|
|
4811
|
+
Medium = 'medium',
|
|
4812
|
+
}`
|
|
4192
4813
|
|
|
4193
4814
|
### Usage Notes
|
|
4194
4815
|
|
|
4195
4816
|
- Import `SearchInput` directly from `@chayns-components/core` instead of internal source paths.
|
|
4196
4817
|
- Start with one of the documented Storybook examples and adapt the props incrementally for your use case.
|
|
4818
|
+
- Pay special attention to required props: `onChange`.
|
|
4197
4819
|
|
|
4198
4820
|
### Anti Patterns
|
|
4199
4821
|
|
|
4200
4822
|
- Avoid imports from internal paths such as `@chayns-components/core/src/...`; always use the public package export.
|
|
4823
|
+
- Avoid incomplete prop objects; follow the documented prop types and required fields.
|
|
4201
4824
|
## SelectButton
|
|
4202
4825
|
|
|
4203
4826
|
`SelectButton` is exported by `@chayns-components/core` and should be imported from the public package entry point.
|
|
@@ -4226,20 +4849,39 @@ import { SelectButton } from '@chayns-components/core';
|
|
|
4226
4849
|
|
|
4227
4850
|
### Props
|
|
4228
4851
|
|
|
4229
|
-
|
|
4852
|
+
| name | type | required | description |
|
|
4853
|
+
| --- | --- | --- | --- |
|
|
4854
|
+
| `additionalText` | `string \| undefined` | no | Text used when there are more selected items than maxDisplayedItems. '##count##' will be displayed with the additional count. |
|
|
4855
|
+
| `buttonText` | `string` | yes | The text that should be displayed inside the button. |
|
|
4856
|
+
| `isDisabled` | `boolean \| undefined` | no | Whether the button should be disabled. |
|
|
4857
|
+
| `list` | `SelectButtonItem[]` | yes | A list of item that could be selected. |
|
|
4858
|
+
| `maxDisplayedItems` | `number \| undefined` | no | The maximum number of items displayed in the button text. |
|
|
4859
|
+
| `onSelect` | `((ids: (string \| number)[]) => void) \| undefined` | no | Function to be executed after an item is selected. |
|
|
4860
|
+
| `selectAllText` | `string \| undefined` | no | If a string is given and `shouldAllowMultiSelect` is true, the dialog displays a checkbox to select all items at once. |
|
|
4861
|
+
| `selectedItemIds` | `(string \| number)[] \| undefined` | no | The id of an item that should be preselected. |
|
|
4862
|
+
| `shouldAllowMultiSelect` | `boolean \| undefined` | no | Whether more than one item should be selectable. |
|
|
4863
|
+
| `shouldEnableKeyboardHighlighting` | `boolean \| undefined` | no | Enables keyboard-only focus highlighting. |
|
|
4864
|
+
| `shouldShowButtonTextWithSelection` | `boolean \| undefined` | no | Whether the button text should be displayed also if items are selected. |
|
|
4865
|
+
| `shouldShowSearch` | `boolean \| undefined` | no | Whether the search should be displayed inside the dialog. |
|
|
4866
|
+
| `title` | `string \| undefined` | no | The title of the dialog. |
|
|
4230
4867
|
|
|
4231
4868
|
### Types
|
|
4232
4869
|
|
|
4233
|
-
|
|
4870
|
+
- `SelectButtonItem` -> `interface SelectButtonItem {
|
|
4871
|
+
text: string;
|
|
4872
|
+
id: number | string;
|
|
4873
|
+
}`
|
|
4234
4874
|
|
|
4235
4875
|
### Usage Notes
|
|
4236
4876
|
|
|
4237
4877
|
- Import `SelectButton` directly from `@chayns-components/core` instead of internal source paths.
|
|
4238
4878
|
- Start with one of the documented Storybook examples and adapt the props incrementally for your use case.
|
|
4879
|
+
- Pay special attention to required props: `buttonText`, `list`.
|
|
4239
4880
|
|
|
4240
4881
|
### Anti Patterns
|
|
4241
4882
|
|
|
4242
4883
|
- Avoid imports from internal paths such as `@chayns-components/core/src/...`; always use the public package export.
|
|
4884
|
+
- Avoid incomplete prop objects; follow the documented prop types and required fields.
|
|
4243
4885
|
## SetupWizard
|
|
4244
4886
|
|
|
4245
4887
|
`SetupWizard` is exported by `@chayns-components/core` and should be imported from the public package entry point.
|
|
@@ -4266,7 +4908,11 @@ import { SetupWizard } from '@chayns-components/core';
|
|
|
4266
4908
|
|
|
4267
4909
|
### Props
|
|
4268
4910
|
|
|
4269
|
-
|
|
4911
|
+
| name | type | required | description |
|
|
4912
|
+
| --- | --- | --- | --- |
|
|
4913
|
+
| `children` | `ReactElement<SetupWizardItemProps, string \| JSXElementConstructor<any>> \| ReactElement<SetupWizardItemProps, string \| JSXElementConstructor<any>>[]` | yes | The steps of the setup. Use the SetupWizardItem component. |
|
|
4914
|
+
| `isWrapped` | `boolean \| undefined` | no | This value must be set if the SetupWizard is inside an Accordion. |
|
|
4915
|
+
| `shouldEnableKeyboardHighlighting` | `boolean \| undefined` | no | Enables keyboard-only focus highlighting for setup wizard items. |
|
|
4270
4916
|
|
|
4271
4917
|
### Types
|
|
4272
4918
|
|
|
@@ -4276,10 +4922,12 @@ No additional exported types documented.
|
|
|
4276
4922
|
|
|
4277
4923
|
- Import `SetupWizard` directly from `@chayns-components/core` instead of internal source paths.
|
|
4278
4924
|
- Start with one of the documented Storybook examples and adapt the props incrementally for your use case.
|
|
4925
|
+
- Pay special attention to required props: `children`.
|
|
4279
4926
|
|
|
4280
4927
|
### Anti Patterns
|
|
4281
4928
|
|
|
4282
4929
|
- Avoid imports from internal paths such as `@chayns-components/core/src/...`; always use the public package export.
|
|
4930
|
+
- Avoid incomplete prop objects; follow the documented prop types and required fields.
|
|
4283
4931
|
## SetupWizardItem
|
|
4284
4932
|
|
|
4285
4933
|
`SetupWizardItem` is exported by `@chayns-components/core` and should be imported from the public package entry point.
|
|
@@ -4319,7 +4967,12 @@ import { Input, RadioButton, RadioButtonGroup, SetupWizardItem } from '@chayns-c
|
|
|
4319
4967
|
|
|
4320
4968
|
### Props
|
|
4321
4969
|
|
|
4322
|
-
|
|
4970
|
+
| name | type | required | description |
|
|
4971
|
+
| --- | --- | --- | --- |
|
|
4972
|
+
| `children` | `ReactNode` | yes | The content that should be displayed inside the item. |
|
|
4973
|
+
| `id` | `number` | yes | The id of the item. |
|
|
4974
|
+
| `step` | `number` | yes | The step of the item. |
|
|
4975
|
+
| `title` | `string` | yes | The title of the item. |
|
|
4323
4976
|
|
|
4324
4977
|
### Types
|
|
4325
4978
|
|
|
@@ -4329,10 +4982,12 @@ No additional exported types documented.
|
|
|
4329
4982
|
|
|
4330
4983
|
- Import `SetupWizardItem` directly from `@chayns-components/core` instead of internal source paths.
|
|
4331
4984
|
- Start with one of the documented Storybook examples and adapt the props incrementally for your use case.
|
|
4985
|
+
- Pay special attention to required props: `children`, `id`, `step`, `title`.
|
|
4332
4986
|
|
|
4333
4987
|
### Anti Patterns
|
|
4334
4988
|
|
|
4335
4989
|
- Avoid imports from internal paths such as `@chayns-components/core/src/...`; always use the public package export.
|
|
4990
|
+
- Avoid incomplete prop objects; follow the documented prop types and required fields.
|
|
4336
4991
|
## SharingBar
|
|
4337
4992
|
|
|
4338
4993
|
`SharingBar` is exported by `@chayns-components/core` and should be imported from the public package entry point.
|
|
@@ -4357,20 +5012,35 @@ import { SharingBar } from '@chayns-components/core';
|
|
|
4357
5012
|
|
|
4358
5013
|
### Props
|
|
4359
5014
|
|
|
4360
|
-
|
|
5015
|
+
| name | type | required | description |
|
|
5016
|
+
| --- | --- | --- | --- |
|
|
5017
|
+
| `container` | `Element \| undefined` | no | The element where the content of the `SharingBar` should be rendered via React Portal. |
|
|
5018
|
+
| `label` | `string` | yes | The label that should be displayed. |
|
|
5019
|
+
| `link` | `string` | yes | The link that should be shared. |
|
|
5020
|
+
| `popupAlignment` | `ContextMenuAlignment` | yes | The alignment of the sharing options. |
|
|
5021
|
+
| `shouldEnableKeyboardHighlighting` | `boolean \| undefined` | no | Enables keyboard-only focus highlighting and keyboard interaction. |
|
|
4361
5022
|
|
|
4362
5023
|
### Types
|
|
4363
5024
|
|
|
4364
|
-
|
|
5025
|
+
- `ContextMenuAlignment` -> `enum ContextMenuAlignment {
|
|
5026
|
+
TopLeft,
|
|
5027
|
+
BottomLeft,
|
|
5028
|
+
TopRight,
|
|
5029
|
+
BottomRight,
|
|
5030
|
+
TopCenter,
|
|
5031
|
+
BottomCenter,
|
|
5032
|
+
}`
|
|
4365
5033
|
|
|
4366
5034
|
### Usage Notes
|
|
4367
5035
|
|
|
4368
5036
|
- Import `SharingBar` directly from `@chayns-components/core` instead of internal source paths.
|
|
4369
5037
|
- Start with one of the documented Storybook examples and adapt the props incrementally for your use case.
|
|
5038
|
+
- Pay special attention to required props: `label`, `link`, `popupAlignment`.
|
|
4370
5039
|
|
|
4371
5040
|
### Anti Patterns
|
|
4372
5041
|
|
|
4373
5042
|
- Avoid imports from internal paths such as `@chayns-components/core/src/...`; always use the public package export.
|
|
5043
|
+
- Avoid incomplete prop objects; follow the documented prop types and required fields.
|
|
4374
5044
|
## SharingButton
|
|
4375
5045
|
|
|
4376
5046
|
`SharingButton` is exported by `@chayns-components/core` and should be imported from the public package entry point.
|
|
@@ -4441,20 +5111,36 @@ import { SharingButton } from '@chayns-components/core';
|
|
|
4441
5111
|
|
|
4442
5112
|
### Props
|
|
4443
5113
|
|
|
4444
|
-
|
|
5114
|
+
| name | type | required | description |
|
|
5115
|
+
| --- | --- | --- | --- |
|
|
5116
|
+
| `alignment` | `ContextMenuAlignment \| undefined` | no | Context menu alignment |
|
|
5117
|
+
| `children` | `ReactNode` | no | No description available. |
|
|
5118
|
+
| `container` | `Element \| undefined` | no | Container element |
|
|
5119
|
+
| `isDisabled` | `boolean \| undefined` | no | Whether the button is disabled and cannot be clicked anymore. |
|
|
5120
|
+
| `link` | `string` | yes | The link that should be shared. |
|
|
5121
|
+
| `shouldEnableKeyboardHighlighting` | `boolean \| undefined` | no | Enables keyboard-only focus highlighting. |
|
|
4445
5122
|
|
|
4446
5123
|
### Types
|
|
4447
5124
|
|
|
4448
|
-
|
|
5125
|
+
- `ContextMenuAlignment` -> `enum ContextMenuAlignment {
|
|
5126
|
+
TopLeft,
|
|
5127
|
+
BottomLeft,
|
|
5128
|
+
TopRight,
|
|
5129
|
+
BottomRight,
|
|
5130
|
+
TopCenter,
|
|
5131
|
+
BottomCenter,
|
|
5132
|
+
}`
|
|
4449
5133
|
|
|
4450
5134
|
### Usage Notes
|
|
4451
5135
|
|
|
4452
5136
|
- Import `SharingButton` directly from `@chayns-components/core` instead of internal source paths.
|
|
4453
5137
|
- Start with one of the documented Storybook examples and adapt the props incrementally for your use case.
|
|
5138
|
+
- Pay special attention to required props: `link`.
|
|
4454
5139
|
|
|
4455
5140
|
### Anti Patterns
|
|
4456
5141
|
|
|
4457
5142
|
- Avoid imports from internal paths such as `@chayns-components/core/src/...`; always use the public package export.
|
|
5143
|
+
- Avoid incomplete prop objects; follow the documented prop types and required fields.
|
|
4458
5144
|
## Signature
|
|
4459
5145
|
|
|
4460
5146
|
`Signature` is exported by `@chayns-components/core` and should be imported from the public package entry point.
|
|
@@ -4477,7 +5163,15 @@ import { Signature } from '@chayns-components/core';
|
|
|
4477
5163
|
|
|
4478
5164
|
### Props
|
|
4479
5165
|
|
|
4480
|
-
|
|
5166
|
+
| name | type | required | description |
|
|
5167
|
+
| --- | --- | --- | --- |
|
|
5168
|
+
| `buttonText` | `string` | yes | The text that should be displayed inside the button. |
|
|
5169
|
+
| `isDisabled` | `boolean \| undefined` | no | Whether the button is disabled. |
|
|
5170
|
+
| `onEdit` | `((signatureUrl: string) => void) \| undefined` | no | Function to be executed when the signature is edited. |
|
|
5171
|
+
| `onRemove` | `(() => void) \| undefined` | no | Function to be executed when the user deletes the signature. |
|
|
5172
|
+
| `onSubscribe` | `((signatureUrl: string) => void) \| undefined` | no | Function to be executed when the user subscribes. |
|
|
5173
|
+
| `onUnsubscribe` | `(() => void) \| undefined` | no | Function to be executed when the user unsubscribes. |
|
|
5174
|
+
| `shouldEnableKeyboardHighlighting` | `boolean \| undefined` | no | Enables keyboard-only focus highlighting for interactive controls. |
|
|
4481
5175
|
|
|
4482
5176
|
### Types
|
|
4483
5177
|
|
|
@@ -4487,10 +5181,12 @@ No additional exported types documented.
|
|
|
4487
5181
|
|
|
4488
5182
|
- Import `Signature` directly from `@chayns-components/core` instead of internal source paths.
|
|
4489
5183
|
- Start with one of the documented Storybook examples and adapt the props incrementally for your use case.
|
|
5184
|
+
- Pay special attention to required props: `buttonText`.
|
|
4490
5185
|
|
|
4491
5186
|
### Anti Patterns
|
|
4492
5187
|
|
|
4493
5188
|
- Avoid imports from internal paths such as `@chayns-components/core/src/...`; always use the public package export.
|
|
5189
|
+
- Avoid incomplete prop objects; follow the documented prop types and required fields.
|
|
4494
5190
|
## Skeleton
|
|
4495
5191
|
|
|
4496
5192
|
`Skeleton` is exported by `@chayns-components/core` and should be imported from the public package entry point.
|
|
@@ -4677,7 +5373,22 @@ import { Slider } from '@chayns-components/core';
|
|
|
4677
5373
|
|
|
4678
5374
|
### Props
|
|
4679
5375
|
|
|
4680
|
-
|
|
5376
|
+
| name | type | required | description |
|
|
5377
|
+
| --- | --- | --- | --- |
|
|
5378
|
+
| `interval` | `SliderInterval \| undefined` | no | The current interval of the slider. |
|
|
5379
|
+
| `isDisabled` | `boolean \| undefined` | no | Disables the slider, preventing user interaction. |
|
|
5380
|
+
| `maxEnabledValue` | `number \| undefined` | no | The maximum enabled value of the slider. |
|
|
5381
|
+
| `maxValue` | `number` | yes | The maximum value of the slider. |
|
|
5382
|
+
| `minEnabledValue` | `number \| undefined` | no | The minimum enabled value of the slider. |
|
|
5383
|
+
| `minValue` | `number` | yes | The minimum value of the slider. |
|
|
5384
|
+
| `onChange` | `((value?: number \| undefined, interval?: SliderInterval \| undefined) => void) \| undefined` | no | Callback function that is called when the slider value changes. |
|
|
5385
|
+
| `onSelect` | `((value?: number \| undefined, interval?: SliderInterval \| undefined) => void) \| undefined` | no | Callback function that is called when the slider selection is finalized. |
|
|
5386
|
+
| `shouldEnableKeyboardHighlighting` | `boolean \| undefined` | no | Enables keyboard-only focus highlighting. |
|
|
5387
|
+
| `shouldHighlightSteps` | `boolean \| undefined` | no | Indicates whether the slider should highlight steps. |
|
|
5388
|
+
| `shouldShowThumbLabel` | `boolean \| undefined` | no | Indicates whether the slider should show a label on the thumb. |
|
|
5389
|
+
| `step` | `number \| undefined` | no | The step size for the slider. |
|
|
5390
|
+
| `thumbLabelFormatter` | `((value: number, isMeasuring?: boolean \| undefined) => string) \| undefined` | no | A function to format the thumb label. |
|
|
5391
|
+
| `value` | `number \| undefined` | no | The current value of the slider. |
|
|
4681
5392
|
|
|
4682
5393
|
### Types
|
|
4683
5394
|
|
|
@@ -4687,10 +5398,12 @@ No additional exported types documented.
|
|
|
4687
5398
|
|
|
4688
5399
|
- Import `Slider` directly from `@chayns-components/core` instead of internal source paths.
|
|
4689
5400
|
- Start with one of the documented Storybook examples and adapt the props incrementally for your use case.
|
|
5401
|
+
- Pay special attention to required props: `maxValue`, `minValue`.
|
|
4690
5402
|
|
|
4691
5403
|
### Anti Patterns
|
|
4692
5404
|
|
|
4693
5405
|
- Avoid imports from internal paths such as `@chayns-components/core/src/...`; always use the public package export.
|
|
5406
|
+
- Avoid incomplete prop objects; follow the documented prop types and required fields.
|
|
4694
5407
|
## SliderButton
|
|
4695
5408
|
|
|
4696
5409
|
`SliderButton` is exported by `@chayns-components/core` and should be imported from the public package entry point.
|
|
@@ -4749,20 +5462,33 @@ import { SliderButton } from '@chayns-components/core';
|
|
|
4749
5462
|
|
|
4750
5463
|
### Props
|
|
4751
5464
|
|
|
4752
|
-
|
|
5465
|
+
| name | type | required | description |
|
|
5466
|
+
| --- | --- | --- | --- |
|
|
5467
|
+
| `isDisabled` | `boolean \| undefined` | no | Whether the button is disabled and cannot be clicked anymore. |
|
|
5468
|
+
| `isRounded` | `boolean \| undefined` | no | No description available. |
|
|
5469
|
+
| `isSecondary` | `boolean \| undefined` | no | Displays the button in the secondary style. |
|
|
5470
|
+
| `items` | `SliderButtonItem[]` | yes | The items that should be displayed in the slider button. |
|
|
5471
|
+
| `onChange` | `((id: string) => void) \| undefined` | no | Function to be executed when a button is selected. The id of the selected button is passed as an argument. |
|
|
5472
|
+
| `selectedButtonId` | `string \| undefined` | no | The id of the button that should be selected. |
|
|
5473
|
+
| `shouldEnableKeyboardHighlighting` | `boolean \| undefined` | no | Enables keyboard-only focus highlighting. |
|
|
4753
5474
|
|
|
4754
5475
|
### Types
|
|
4755
5476
|
|
|
4756
|
-
|
|
5477
|
+
- `SliderButtonItem` -> `interface SliderButtonItem {
|
|
5478
|
+
id: string;
|
|
5479
|
+
text: string;
|
|
5480
|
+
}`
|
|
4757
5481
|
|
|
4758
5482
|
### Usage Notes
|
|
4759
5483
|
|
|
4760
5484
|
- Import `SliderButton` directly from `@chayns-components/core` instead of internal source paths.
|
|
4761
5485
|
- Start with one of the documented Storybook examples and adapt the props incrementally for your use case.
|
|
5486
|
+
- Pay special attention to required props: `items`.
|
|
4762
5487
|
|
|
4763
5488
|
### Anti Patterns
|
|
4764
5489
|
|
|
4765
5490
|
- Avoid imports from internal paths such as `@chayns-components/core/src/...`; always use the public package export.
|
|
5491
|
+
- Avoid incomplete prop objects; follow the documented prop types and required fields.
|
|
4766
5492
|
## SmallWaitCursor
|
|
4767
5493
|
|
|
4768
5494
|
`SmallWaitCursor` is exported by `@chayns-components/core` and should be imported from the public package entry point.
|
|
@@ -4786,11 +5512,21 @@ import { SmallWaitCursor } from '@chayns-components/core';
|
|
|
4786
5512
|
|
|
4787
5513
|
### Props
|
|
4788
5514
|
|
|
4789
|
-
|
|
5515
|
+
| name | type | required | description |
|
|
5516
|
+
| --- | --- | --- | --- |
|
|
5517
|
+
| `color` | `string \| undefined` | no | No description available. |
|
|
5518
|
+
| `shouldHideBackground` | `boolean \| undefined` | no | No description available. |
|
|
5519
|
+
| `shouldHideWaitCursor` | `boolean \| undefined` | no | No description available. |
|
|
5520
|
+
| `size` | `number \| undefined` | no | No description available. |
|
|
5521
|
+
| `speed` | `SmallWaitCursorSpeed \| undefined` | no | No description available. |
|
|
4790
5522
|
|
|
4791
5523
|
### Types
|
|
4792
5524
|
|
|
4793
|
-
|
|
5525
|
+
- `SmallWaitCursorSpeed` -> `enum SmallWaitCursorSpeed {
|
|
5526
|
+
Slow = 1.5,
|
|
5527
|
+
Medium = 1,
|
|
5528
|
+
Fast = 0.5,
|
|
5529
|
+
}`
|
|
4794
5530
|
|
|
4795
5531
|
### Usage Notes
|
|
4796
5532
|
|
|
@@ -4800,6 +5536,7 @@ No additional exported types documented.
|
|
|
4800
5536
|
### Anti Patterns
|
|
4801
5537
|
|
|
4802
5538
|
- Avoid imports from internal paths such as `@chayns-components/core/src/...`; always use the public package export.
|
|
5539
|
+
- Avoid incomplete prop objects; follow the documented prop types and required fields.
|
|
4803
5540
|
## TagInput
|
|
4804
5541
|
|
|
4805
5542
|
`TagInput` is exported by `@chayns-components/core` and should be imported from the public package entry point.
|
|
@@ -4849,11 +5586,32 @@ import { TagInput } from '@chayns-components/core';
|
|
|
4849
5586
|
|
|
4850
5587
|
### Props
|
|
4851
5588
|
|
|
4852
|
-
|
|
5589
|
+
| name | type | required | description |
|
|
5590
|
+
| --- | --- | --- | --- |
|
|
5591
|
+
| `leftElement` | `ReactNode` | no | An element that should be displayed on the left side of the input. |
|
|
5592
|
+
| `onAdd` | `((tag: Tag) => boolean \| void \| Promise<boolean>) \| undefined` | no | Function to be executed when a tag is added. |
|
|
5593
|
+
| `onBlur` | `FocusEventHandler \| undefined` | no | Function to be executed when the input is blurred. |
|
|
5594
|
+
| `onChange` | `ChangeEventHandler<HTMLInputElement> \| undefined` | no | Function to be executed when the value of the input is changed. |
|
|
5595
|
+
| `onFocus` | `FocusEventHandler \| undefined` | no | Function to be executed when the input is focused. |
|
|
5596
|
+
| `onRemove` | `((id: string) => void) \| undefined` | no | Function to be executed when a tag is removed. |
|
|
5597
|
+
| `placeholder` | `string \| undefined` | no | The placeholder that should be displayed. |
|
|
5598
|
+
| `shouldAllowMultiple` | `boolean \| undefined` | no | Whether multiple tags should be allowed. |
|
|
5599
|
+
| `shouldEnableKeyboardHighlighting` | `boolean \| undefined` | no | Enables keyboard-only focus highlighting. |
|
|
5600
|
+
| `shouldPreventEnter` | `boolean \| undefined` | no | Whether the enter key should be prevented. |
|
|
5601
|
+
| `size` | `InputSize \| undefined` | no | The size of the input field. |
|
|
5602
|
+
| `tags` | `Tag[] \| undefined` | no | The tags that should be displayed. |
|
|
4853
5603
|
|
|
4854
5604
|
### Types
|
|
4855
5605
|
|
|
4856
|
-
|
|
5606
|
+
- `InputSize` -> `enum InputSize {
|
|
5607
|
+
Small = 'small',
|
|
5608
|
+
Medium = 'medium',
|
|
5609
|
+
}`
|
|
5610
|
+
- `Tag` -> `interface Tag {
|
|
5611
|
+
id: string;
|
|
5612
|
+
text: string;
|
|
5613
|
+
rightElement?: ReactNode;
|
|
5614
|
+
}`
|
|
4857
5615
|
|
|
4858
5616
|
### Usage Notes
|
|
4859
5617
|
|
|
@@ -4863,6 +5621,7 @@ No additional exported types documented.
|
|
|
4863
5621
|
### Anti Patterns
|
|
4864
5622
|
|
|
4865
5623
|
- Avoid imports from internal paths such as `@chayns-components/core/src/...`; always use the public package export.
|
|
5624
|
+
- Avoid incomplete prop objects; follow the documented prop types and required fields.
|
|
4866
5625
|
## TextArea
|
|
4867
5626
|
|
|
4868
5627
|
`TextArea` is exported by `@chayns-components/core` and should be imported from the public package entry point.
|
|
@@ -4931,7 +5690,21 @@ import { TextArea } from '@chayns-components/core';
|
|
|
4931
5690
|
|
|
4932
5691
|
### Props
|
|
4933
5692
|
|
|
4934
|
-
|
|
5693
|
+
| name | type | required | description |
|
|
5694
|
+
| --- | --- | --- | --- |
|
|
5695
|
+
| `colors` | `TextAreaColors \| undefined` | no | Provide custom colors to the TextArea Component |
|
|
5696
|
+
| `isDisabled` | `boolean \| undefined` | no | Disables the text area so that it cannot be changed. |
|
|
5697
|
+
| `isInvalid` | `boolean \| undefined` | no | If true, the text area is marked as invalid |
|
|
5698
|
+
| `maxHeight` | `MaxHeight<string \| number> \| undefined` | no | The maximum height of the text area. |
|
|
5699
|
+
| `minHeight` | `MinHeight<string \| number> \| undefined` | no | The minimum height of the text area. |
|
|
5700
|
+
| `onBlur` | `FocusEventHandler<HTMLTextAreaElement> \| undefined` | no | Function that is executed when the text area loses focus. |
|
|
5701
|
+
| `onChange` | `ChangeEventHandler<HTMLTextAreaElement> \| undefined` | no | Function that is executed when the text of the text area changes. |
|
|
5702
|
+
| `onFocus` | `FocusEventHandler<HTMLTextAreaElement> \| undefined` | no | Function that is executed when the input field is focused |
|
|
5703
|
+
| `onKeyDown` | `KeyboardEventHandler<HTMLTextAreaElement> \| undefined` | no | Function that is executed when a letter is pressed |
|
|
5704
|
+
| `placeholder` | `string \| ReactElement<any, string \| JSXElementConstructor<any>> \| undefined` | no | Placeholder for the text area field. |
|
|
5705
|
+
| `rightElement` | `ReactElement<any, string \| JSXElementConstructor<any>> \| undefined` | no | An element that should be displayed on the right side of the Input. |
|
|
5706
|
+
| `shouldEnableKeyboardHighlighting` | `boolean \| undefined` | no | Enables keyboard-only focus highlighting. |
|
|
5707
|
+
| `value` | `string \| undefined` | no | Value if the text area should be controlled. |
|
|
4935
5708
|
|
|
4936
5709
|
### Types
|
|
4937
5710
|
|
|
@@ -4945,6 +5718,7 @@ No additional exported types documented.
|
|
|
4945
5718
|
### Anti Patterns
|
|
4946
5719
|
|
|
4947
5720
|
- Avoid imports from internal paths such as `@chayns-components/core/src/...`; always use the public package export.
|
|
5721
|
+
- Avoid incomplete prop objects; follow the documented prop types and required fields.
|
|
4948
5722
|
## Tooltip
|
|
4949
5723
|
|
|
4950
5724
|
`Tooltip` is exported by `@chayns-components/core` and should be imported from the public package entry point.
|
|
@@ -5010,20 +5784,41 @@ import { Tooltip } from '@chayns-components/core';
|
|
|
5010
5784
|
|
|
5011
5785
|
### Props
|
|
5012
5786
|
|
|
5013
|
-
|
|
5787
|
+
| name | type | required | description |
|
|
5788
|
+
| --- | --- | --- | --- |
|
|
5789
|
+
| `alignment` | `PopupAlignment \| undefined` | no | The alignment of the tooltip. By default, the tooltip will calculate the best alignment. |
|
|
5790
|
+
| `children` | `ReactNode` | yes | The elements that the tooltip should surround. |
|
|
5791
|
+
| `container` | `Element \| undefined` | no | The element where the content of the `Tooltip` should be rendered via React Portal. |
|
|
5792
|
+
| `isDisabled` | `boolean \| undefined` | no | whether the tooltip should be shown. |
|
|
5793
|
+
| `item` | `ReactNode \| ITooltipItem` | yes | The content that should be displayed. |
|
|
5794
|
+
| `itemWidth` | `Width<string \| number> \| undefined` | no | The width of an item. |
|
|
5795
|
+
| `maxItemWidth` | `number \| undefined` | no | The max width of the Tooltip. |
|
|
5796
|
+
| `shouldHideOnChildrenLeave` | `boolean \| undefined` | no | Whether the tooltip should be hidden after the children is not hovered. |
|
|
5797
|
+
| `shouldUseChildrenWidth` | `boolean \| undefined` | no | Whether the width of the children should be used. |
|
|
5798
|
+
| `shouldUseFullWidth` | `boolean \| undefined` | no | Whether the tooltip children should use the full width. |
|
|
5799
|
+
| `yOffset` | `number \| undefined` | no | The Y offset of the tooltip to the children. |
|
|
5014
5800
|
|
|
5015
5801
|
### Types
|
|
5016
5802
|
|
|
5017
|
-
|
|
5803
|
+
- `PopupAlignment` -> `enum PopupAlignment {
|
|
5804
|
+
TopLeft,
|
|
5805
|
+
TopCenter,
|
|
5806
|
+
TopRight,
|
|
5807
|
+
BottomLeft,
|
|
5808
|
+
BottomCenter,
|
|
5809
|
+
BottomRight,
|
|
5810
|
+
}`
|
|
5018
5811
|
|
|
5019
5812
|
### Usage Notes
|
|
5020
5813
|
|
|
5021
5814
|
- Import `Tooltip` directly from `@chayns-components/core` instead of internal source paths.
|
|
5022
5815
|
- Start with one of the documented Storybook examples and adapt the props incrementally for your use case.
|
|
5816
|
+
- Pay special attention to required props: `children`, `item`.
|
|
5023
5817
|
|
|
5024
5818
|
### Anti Patterns
|
|
5025
5819
|
|
|
5026
5820
|
- Avoid imports from internal paths such as `@chayns-components/core/src/...`; always use the public package export.
|
|
5821
|
+
- Avoid incomplete prop objects; follow the documented prop types and required fields.
|
|
5027
5822
|
## Truncation
|
|
5028
5823
|
|
|
5029
5824
|
`Truncation` is exported by `@chayns-components/core` and should be imported from the public package entry point.
|
|
@@ -5221,20 +6016,35 @@ import { Button, Truncation } from '@chayns-components/core';
|
|
|
5221
6016
|
|
|
5222
6017
|
### Props
|
|
5223
6018
|
|
|
5224
|
-
|
|
6019
|
+
| name | type | required | description |
|
|
6020
|
+
| --- | --- | --- | --- |
|
|
6021
|
+
| `children` | `ReactElement<any, string \| JSXElementConstructor<any>>` | yes | The elements that should be expanding or collapsing. |
|
|
6022
|
+
| `clampPosition` | `ClampPosition \| undefined` | no | The position of the clamp. |
|
|
6023
|
+
| `collapsedHeight` | `number \| undefined` | no | The height of the children element in its collapsed state. |
|
|
6024
|
+
| `isOpen` | `boolean \| undefined` | no | If set to true, the content is exposed. |
|
|
6025
|
+
| `lessLabel` | `string \| undefined` | no | A text that should be displayed if the content is expanded. |
|
|
6026
|
+
| `moreLabel` | `string \| undefined` | no | A text that should be displayed if the content is collapsed. |
|
|
6027
|
+
| `onChange` | `((event: MouseEvent<HTMLAnchorElement, MouseEvent>, isOpen: boolean) => void) \| undefined` | no | Function to be executed when the component is expanding or collapsing. |
|
|
6028
|
+
| `shouldEnableKeyboardHighlighting` | `boolean \| undefined` | no | Enables keyboard-only focus highlighting. |
|
|
5225
6029
|
|
|
5226
6030
|
### Types
|
|
5227
6031
|
|
|
5228
|
-
|
|
6032
|
+
- `ClampPosition` -> `enum ClampPosition {
|
|
6033
|
+
Right,
|
|
6034
|
+
Middle,
|
|
6035
|
+
Left,
|
|
6036
|
+
}`
|
|
5229
6037
|
|
|
5230
6038
|
### Usage Notes
|
|
5231
6039
|
|
|
5232
6040
|
- Import `Truncation` directly from `@chayns-components/core` instead of internal source paths.
|
|
5233
6041
|
- Start with one of the documented Storybook examples and adapt the props incrementally for your use case.
|
|
6042
|
+
- Pay special attention to required props: `children`.
|
|
5234
6043
|
|
|
5235
6044
|
### Anti Patterns
|
|
5236
6045
|
|
|
5237
6046
|
- Avoid imports from internal paths such as `@chayns-components/core/src/...`; always use the public package export.
|
|
6047
|
+
- Avoid incomplete prop objects; follow the documented prop types and required fields.
|
|
5238
6048
|
## VerificationBadge
|
|
5239
6049
|
|
|
5240
6050
|
`VerificationBadge` is exported by `@chayns-components/core` and should be imported from the public package entry point.
|