@cwellt_software/cwellt-reactjs-lib 1.4.0 → 1.4.2

package/dist/index.d.ts

@@ -936,6 +936,7 @@ interface CwTableServerSideProps<T = any> {
     totalItems: number;
     pagination?: boolean;
     pageSizeOptions?: number[];
+    pageLabel?: string;
     expandedRowRender?: (record: T) => React__default.ReactNode;
     onExpand?: (record: T) => void;
     classNameContainer?: string;
@@ -1011,7 +1012,7 @@ interface CwTableServerSideProps<T = any> {
  *
  * @returns React component
  */
-declare function CwTableServerSide<T = any>({ columns, data, totalItems, pagination, pageSizeOptions, expandedRowRender, onExpand, className, classNameRow, style, classNameContainer, id, testId, textNoData, rowKey, loading, scrollHeight, stickyHeader, rowSelection, onChange, serverState, }: Readonly<CwTableServerSideProps<T>>): react_jsx_runtime.JSX.Element;
+declare function CwTableServerSide<T = any>({ columns, data, totalItems, pagination, pageSizeOptions, pageLabel, expandedRowRender, onExpand, className, classNameRow, style, classNameContainer, id, testId, textNoData, rowKey, loading, scrollHeight, stickyHeader, rowSelection, onChange, serverState, }: Readonly<CwTableServerSideProps<T>>): react_jsx_runtime.JSX.Element;
 
 interface Tab {
     key: string;
@@ -2025,8 +2026,61 @@ interface CwSelectProps extends DetailedHTMLProps<SelectHTMLAttributes<HTMLSelec
  */
 declare function CwSelect(props: CwSelectProps): react_jsx_runtime.JSX.Element;
 
+/** A single selectable option in a {@link CwDropdown}. */
+interface CwDropdownOption {
+    /** Unique option identifier passed to `onChange`. */
+    value: string | number;
+    /** Display text shown in the trigger and option list. */
+    label: string;
+    /** Optional background color (any valid CSS value). Shown as a small dot next to the label. */
+    color?: string;
+    /** When `true` the option is rendered but cannot be selected. */
+    disabled?: boolean;
+}
+/** Props for {@link CwDropdown}. */
+interface CwDropdownProps extends Omit<React__default.HTMLAttributes<HTMLDivElement>, "onChange"> {
+    /** Array of options to display */
+    options: CwDropdownOption[];
+    /** Current selected value */
+    value?: string | number;
+    /** Callback when value changes */
+    onChange?: (value: string | number | undefined) => void;
+    /** Props for label component */
+    labelProps?: CwLabelProps;
+    /** Props for alignment */
+    alignProps?: CwAlignProps;
+    /** Placeholder text */
+    placeholder?: string;
+    /** Show search input (optional) */
+    allowSearch?: boolean;
+    /** Is disabled */
+    disabled?: boolean;
+    /** Is required */
+    required?: boolean;
+    /** Feedback messages */
+    feedback?: CwInputFeedback | CwInputFeedback[];
+}
+/**
+ * Custom dropdown component with colour-coded options, optional search filter, and full
+ * keyboard navigation (↑ ↓ Enter Esc Tab).
+ *
+ * Use `CwDropdown` instead of the native `<select>` when options need colour indicators or
+ * when inline search filtering is required.
+ *
+ * @example
+ * <CwDropdown
+ *   options={[{ value: 'a', label: 'Option A', color: '#1976D2' }]}
+ *   value={selected}
+ *   onChange={setSelected}
+ *   labelProps={{ text: 'My Label' }}
+ * />
+ */
+declare function CwDropdown({ options, value, onChange, labelProps, alignProps, placeholder, allowSearch, disabled, required, feedback, className, style, ...otherProps }: CwDropdownProps): react_jsx_runtime.JSX.Element;
+
 interface CwOptionProps extends Omit<HTMLProps<PropsWithChildren<HTMLOptionElement>>, "className"> {
     text?: string;
+    /** Background color for the option (hex or CSS color). Renders as a colored bar on the left of the option text. */
+    color?: string;
 }
 /**
  * Option to display in the CwSelect
@@ -2035,7 +2089,7 @@ interface CwOptionProps extends Omit<HTMLProps<PropsWithChildren<HTMLOptionEleme
  * @example
  * <CwSelect>
  *   <CwOption>A</CwOption>
- *   <CwOption>B</CwOption>
+ *   <CwOption color="#4a90d9">Blue option</CwOption>
  *   <CwOption>C</CwOption>
  * </CwSelect>
  */
@@ -2291,6 +2345,69 @@ interface CwMultiFilterProps {
  */
 declare const CwMultiFilter: FC<CwMultiFilterProps>;
 
+interface CwTagSelectorOption {
+    /** Unique value identifying this option */
+    value: string;
+    /** Display text */
+    label: string;
+    /** Background color for the chip tag (any valid CSS color) */
+    color?: string;
+    /** Tooltip text shown on hover */
+    tooltip?: string;
+}
+interface CwTagSelectorProps {
+    /** HTML id */
+    id?: string;
+    /** All available options */
+    options: CwTagSelectorOption[];
+    /** Currently selected values */
+    value: string[];
+    /** Called when selection changes */
+    onChange: (selectedValues: string[]) => void;
+    /** Label */
+    labelProps?: CwLabelProps;
+    /** Icon */
+    iconProps?: CwIconProps;
+    /** Layout */
+    alignProps?: CwAlignProps;
+    /** Placeholder when nothing is selected */
+    placeholder?: string;
+    /** Disabled state */
+    disabled?: boolean;
+    /** Show a "Select all" toggle at the top of the dropdown */
+    showSelectAll?: boolean;
+    /** Feedback messages */
+    feedback?: CwInputFeedback | CwInputFeedback[];
+    /** Additional CSS class */
+    className?: string;
+    /** Inline styles */
+    style?: React__default.CSSProperties;
+}
+/**
+ * Multi-select input with chip tags and searchable dropdown.
+ * Works like a Kendo MultiSelect: selected items appear as removable chips
+ * inside the input area, and a filtered dropdown lets the user pick more.
+ *
+ * @example
+ * ```tsx
+ * const options = [
+ *   { value: "1", label: "Alpha" },
+ *   { value: "2", label: "Bravo" },
+ *   { value: "3", label: "Charlie" },
+ * ];
+ * const [selected, setSelected] = useState<string[]>([]);
+ *
+ * <CwTagSelector
+ *   labelProps={{ text: "Tags" }}
+ *   options={options}
+ *   value={selected}
+ *   onChange={setSelected}
+ *   placeholder="Select items…"
+ * />
+ * ```
+ */
+declare function CwTagSelector({ id, options, value, onChange, labelProps, iconProps, alignProps, placeholder, disabled, showSelectAll, feedback, className, style, }: CwTagSelectorProps): react_jsx_runtime.JSX.Element;
+
 type CwTreeNode<T> = {
     id: string | number;
     label: string;
@@ -2305,19 +2422,41 @@ type TreeViewProps<T> = {
 };
 declare function CwTreeView<T>({ data, onSelect, allowParentSelection, selectedId: initialSelectedId }: TreeViewProps<T>): react_jsx_runtime.JSX.Element;
 
+/** Props for {@link CwSearchInput}. */
 interface CwSearchInputProps extends HTMLProps<HTMLDivElement> {
+    /** List of items to search through. Each item must be a `CwSelectList` instance. */
     selectList: Array<CwSelectList>;
+    /** Props forwarded to the internal `CwLabel`. */
     labelProps?: CwLabelProps;
+    /** Props forwarded to the optional leading icon. */
     iconProps?: CwIconProps;
+    /** Props forwarded to the `CwAlign` layout wrapper. */
     alignProps?: CwAlignProps;
+    /** Called with the `id` of the selected `CwSelectList` item. */
     handleChange?: (value: any) => void;
+    /** Input placeholder text. Defaults to `"Search…"`. */
     placeholder?: string;
     className?: string;
     style?: React__default.CSSProperties;
+    /** Disables the input when `true`. */
     disabled?: boolean;
+    /** Renders the input in error state when `true`. */
     error?: boolean;
+    /** Custom renderer for each suggestion item. Receives the matching `CwSelectList` entry. */
     renderOption?: (option: CwSelectList) => React__default.ReactNode;
 }
+/**
+ * Text input with a live-filtered suggestion dropdown backed by a local `CwSelectList` array.
+ * Use `CwFindAirport` or `CwFindCrewmember` for API-backed search inputs.
+ *
+ * @example
+ * <CwSearchInput
+ *   selectList={myItems}
+ *   handleChange={(id) => console.log('selected', id)}
+ *   labelProps={{ text: 'Employee' }}
+ *   placeholder="Search by name…"
+ * />
+ */
 declare function CwSearchInput(optionsProps: React__default.PropsWithChildren<CwSearchInputProps>): react_jsx_runtime.JSX.Element;
 
 type Placement = 'bottom' | 'top' | 'left' | 'right';
@@ -3072,36 +3211,97 @@ declare class OnClearPinned implements UiEvent {
 }
 
 type DisplayMode = "default" | "icao-only" | "iata-only" | "full-text";
+/** Props for {@link CwFindAirport}. */
 interface CwFindAirportProps {
+    /** Called with the selected airport's `AptKey` when a result is chosen. */
     handleChange: (value: number) => void;
+    /** API search mode passed to the WinOps backend. Defaults to `"OnlyDatabase"`. */
     searchType?: string;
+    /** Input placeholder text. Defaults to `"Search airport…"`. */
     placeHolder?: string;
+    /** Marks the field as required (visual indicator only). */
     required?: boolean;
+    /** Base URL of the WinOps backend, e.g. `"https://localhost:44300"`. */
     cblConfig: string;
     className?: string;
+    /** Pre-select an airport by its `AptKey`. Triggers an initial fetch to resolve the display text. */
     value?: number;
     disabled?: boolean;
-    displayMode?: DisplayMode;
+    /**
+     * Controls what part of the airport name is shown in the input after selection.
+     * - `"default"` — short `ICAO(IATA)` code format
+     * - `"icao-only"` — only the 4-letter ICAO code
+     * - `"iata-only"` — only the 3-letter IATA code
+     * - `"full-text"` — full `DisplayAirportText` from the API
+     */
+    displayMode?: DisplayMode; /** Fixed CSS width for the input wrapper, e.g. `"400px"`. */
     width?: string;
+    /** Text shown in the input on first render before any API data is loaded. */
     initialDisplayText?: string;
+    /** Props forwarded to the internal `CwLabel`. */
     labelProps?: CwLabelProps;
+    /** Props forwarded to the `CwAlign` layout wrapper. */
     alignProps?: CwAlignProps;
 }
+/**
+ * API-backed airport search input for WinOps.
+ *
+ * Fetches matching airports from the WinOps backend as the user types (debounced).
+ * Renders results in a shared `cw-choice-dropdown` styled panel with keyboard navigation.
+ * Supports pre-selecting an airport by `value` (AptKey) and customising the displayed text
+ * format via `displayMode`.
+ *
+ * Requires a running WinOps backend — set `cblConfig` to its base URL.
+ *
+ * @example
+ * <CwFindAirport
+ *   cblConfig="https://localhost:44300"
+ *   handleChange={(key) => setAirportKey(key)}
+ *   labelProps={{ text: 'Departure Airport' }}
+ *   displayMode="iata-only"
+ * />
+ */
 declare const CwFindAirport: React__default.FC<CwFindAirportProps>;
 
+/** Props for {@link CwFindCrewmember}. */
 interface CwFindCrewmemberProps {
+    /** Called with the selected crewmember's numeric ID when a result is chosen. */
     handleChange: (value: number) => void;
+    /** Input placeholder text. Defaults to `"Search crew…"`. */
     placeHolder?: string;
+    /** Marks the field as required (visual indicator only). */
     required?: boolean;
+    /** Base URL of the WinOps backend, e.g. `"https://localhost:44300"`. */
     cblConfig: string;
     className?: string;
+    /** Pre-select a crewmember by their numeric ID. Triggers an initial fetch to resolve the display text. */
     value?: number;
     disabled?: boolean;
+    /** Fixed CSS width for the input wrapper, e.g. `"400px"`. */
     width?: string;
+    /** Text shown in the input on first render before any API data is loaded. */
     initialDisplayText?: string;
+    /** Props forwarded to the internal `CwLabel`. */
     labelProps?: CwLabelProps;
+    /** Props forwarded to the `CwAlign` layout wrapper. */
     alignProps?: CwAlignProps;
 }
+/**
+ * API-backed crewmember search input for WinOps.
+ *
+ * Fetches matching crewmembers from the WinOps backend as the user types (debounced).
+ * Renders results in a shared `cw-choice-dropdown` styled panel with keyboard navigation.
+ * Supports pre-selecting a crewmember by numeric `value` (ID).
+ *
+ * Requires a running WinOps backend — set `cblConfig` to its base URL.
+ *
+ * @example
+ * <CwFindCrewmember
+ *   cblConfig="https://localhost:44300"
+ *   handleChange={(id) => setCrewId(id)}
+ *   labelProps={{ text: 'Crew Member' }}
+ * />
+ */
 declare const CwFindCrewmember: React__default.FC<CwFindCrewmemberProps>;
 
 declare class OnClickEvent implements UiEvent {
@@ -3181,5 +3381,5 @@ declare class OnClickContextMenu implements UiEvent {
     constructor(id: string, clickedMenu: string);
 }
 
-export { CblDragAndDrop$1 as CblDragAndDrop, CwAccordionContainer, CwAlign, CwAnchoredMenu, CwBtnDelete, CwBtnEdit, CwBtnSave, CwButton, CwCard, CwCardList, CwCheck, CwCheckbox, CwCheckboxGroup, CwChip, CwColorPicker, CwConfirmationPopup, CwContextMenu, CwDatePicker, CwDateRangePicker, CwDateTimePicker, CwDateTimePickerCompact, CwDialog, CwDialogManager, CwDigit, CwDisplayMessage, CwDropdownFilter, CwExpandable, CwFileUpload, CwFileUploadMultiple, CwFindAirport, CwFindCrewmember, CwGenericTooltip, CwHeadingMain, CwHeadingSecond, CwIcon, CwImageArea, CwImageGallery, CwImageZoom, CwInput, CwInputColor, CwInputDate, CwInputDatePicker, CwInputDateText, CwInputDatetime, CwInputImage, CwInputNumber, CwInputPhone, CwInputText, CwKeyValueList, CwLabel, CwLoading, CwLoadingSmall, CwMasterDetail, CwMessage, CwMessageManager, CwMessageType, CwModal, CwModalHover, CwModalReportFunctional, CwMultiFilter, CwMultiFilterTag, CwNote, CwOption, CwPopoverButton, CwReportModal, CwScheduler, CwSearchInput, CwSelect, CwSelectList, CwSelectListItems, CwSortableList, CwSortableTable, CwSuperScheduler, CwTable, CwTableGrouped, CwTableServerSide, CwTabs, CwTextArea, CwTime, CwTimePicker, CwToggle, CwTooltipManager, CwTooltipNew, CwTreeView, CwWeekdaySelector, DefaultRowHeader, OnClearPinned, OnClickContextMenu, OnClickEvent, OnClickRowEvent, OnClickRowHeader, OnClickUtc, OnDoubleClickEvent, OnDoubleClickRowEvent, OnDragEvent, OnDropCtrlEvent, OnDropEvent, OnEndClickHeaderEvent, OnLeftDragStart, OnMultiClickEvent, OnPinRow, OnRangeClickEvent, OnRightClickEvent, OnRightClickRow, OnRightDragStart, OnStartClickHeaderEvent, OnUnpinRow, PinRowHeader, Resource, Scheduler, SchedulerEvent, SuperScheduler, UiEvent, Weekdays, cblEvent, eventIsVisible, filterVisibleEvents, getDefaultDivisions, getEventSizes, itemsToMultiFilterTags, useCwMessage, useSortableList, useSortableTable };
-export type { BackgroundEventDm, CardChip, ChipColorScheme, ChipVariant, Column$1 as Column, ConfirmationPopupProps, CwAlignProps, CwCardListProps, CwCardProps, CwChipProps, CwDialogProps, CwExpandableProps, CwImageAreaMethods, CwImageAreaProps, CwInputDatePickerProps, CwInputDateProps, CwInputDateTextProps, CwInputDatetimeProps, CwInputImageProps, CwInputNumberProps, CwInputPhoneProps, CwInputTextProps, CwInputTimeProps, CwKeyValueListProps, CwLabelProps, CwMasterDetailItem, CwMasterDetailProps, CwMessageProps, CwModalHoverProps, CwMultiFilterProps, CwMultiFilterTagProps, CwNoteProps, CwPopoverButtonProps, CwReportModalFunctionalProps, CwSelectListProps, CwSortableListProps, CwSortableTableProps, CwTableGroupedData, CwTableGroupedData_Group, CwTableGroupedData_Row, CwTableGroupedProps, CwTextAreaProps, CwTreeNode, DataItem, DateRangeValue, ICwMultiFilterTag, ImageItem, IndicatorRowDm, MenuOption, OnEvent, PinRowHeaderProps, RowHeaderDm, RowHeaderProps, SchedulerEventDm, SchedulerEventState, SchedulerRowProps, SchedulerState, ServerSideTableState, SortableColumn, SortableTableDragState, SuperSchedulerProps, Tab, UseSortableTableReturn, Weekday, ZoomImageItem, cblEventCompProps, resourceCompProps2 };
+export { CblDragAndDrop$1 as CblDragAndDrop, CwAccordionContainer, CwAlign, CwAnchoredMenu, CwBtnDelete, CwBtnEdit, CwBtnSave, CwButton, CwCard, CwCardList, CwCheck, CwCheckbox, CwCheckboxGroup, CwChip, CwColorPicker, CwConfirmationPopup, CwContextMenu, CwDatePicker, CwDateRangePicker, CwDateTimePicker, CwDateTimePickerCompact, CwDialog, CwDialogManager, CwDigit, CwDisplayMessage, CwDropdown, CwDropdownFilter, CwExpandable, CwFileUpload, CwFileUploadMultiple, CwFindAirport, CwFindCrewmember, CwGenericTooltip, CwHeadingMain, CwHeadingSecond, CwIcon, CwImageArea, CwImageGallery, CwImageZoom, CwInput, CwInputColor, CwInputDate, CwInputDatePicker, CwInputDateText, CwInputDatetime, CwInputImage, CwInputNumber, CwInputPhone, CwInputText, CwKeyValueList, CwLabel, CwLoading, CwLoadingSmall, CwMasterDetail, CwMessage, CwMessageManager, CwMessageType, CwModal, CwModalHover, CwModalReportFunctional, CwMultiFilter, CwMultiFilterTag, CwNote, CwOption, CwPopoverButton, CwReportModal, CwScheduler, CwSearchInput, CwSelect, CwSelectList, CwSelectListItems, CwSortableList, CwSortableTable, CwSuperScheduler, CwTable, CwTableGrouped, CwTableServerSide, CwTabs, CwTagSelector, CwTextArea, CwTime, CwTimePicker, CwToggle, CwTooltipManager, CwTooltipNew, CwTreeView, CwWeekdaySelector, DefaultRowHeader, OnClearPinned, OnClickContextMenu, OnClickEvent, OnClickRowEvent, OnClickRowHeader, OnClickUtc, OnDoubleClickEvent, OnDoubleClickRowEvent, OnDragEvent, OnDropCtrlEvent, OnDropEvent, OnEndClickHeaderEvent, OnLeftDragStart, OnMultiClickEvent, OnPinRow, OnRangeClickEvent, OnRightClickEvent, OnRightClickRow, OnRightDragStart, OnStartClickHeaderEvent, OnUnpinRow, PinRowHeader, Resource, Scheduler, SchedulerEvent, SuperScheduler, UiEvent, Weekdays, cblEvent, eventIsVisible, filterVisibleEvents, getDefaultDivisions, getEventSizes, itemsToMultiFilterTags, useCwMessage, useSortableList, useSortableTable };
+export type { BackgroundEventDm, CardChip, ChipColorScheme, ChipVariant, Column$1 as Column, ConfirmationPopupProps, CwAlignProps, CwCardListProps, CwCardProps, CwChipProps, CwDialogProps, CwDropdownOption, CwDropdownProps, CwExpandableProps, CwImageAreaMethods, CwImageAreaProps, CwInputDatePickerProps, CwInputDateProps, CwInputDateTextProps, CwInputDatetimeProps, CwInputImageProps, CwInputNumberProps, CwInputPhoneProps, CwInputTextProps, CwInputTimeProps, CwKeyValueListProps, CwLabelProps, CwMasterDetailItem, CwMasterDetailProps, CwMessageProps, CwModalHoverProps, CwMultiFilterProps, CwMultiFilterTagProps, CwNoteProps, CwPopoverButtonProps, CwReportModalFunctionalProps, CwSelectListProps, CwSortableListProps, CwSortableTableProps, CwTableGroupedData, CwTableGroupedData_Group, CwTableGroupedData_Row, CwTableGroupedProps, CwTagSelectorOption, CwTagSelectorProps, CwTextAreaProps, CwTreeNode, DataItem, DateRangeValue, ICwMultiFilterTag, ImageItem, IndicatorRowDm, MenuOption, OnEvent, PinRowHeaderProps, RowHeaderDm, RowHeaderProps, SchedulerEventDm, SchedulerEventState, SchedulerRowProps, SchedulerState, ServerSideTableState, SortableColumn, SortableTableDragState, SuperSchedulerProps, Tab, UseSortableTableReturn, Weekday, ZoomImageItem, cblEventCompProps, resourceCompProps2 };