@cwellt_software/cwellt-reactjs-lib 1.0.3 → 1.0.4

package/dist/index.d.ts

@@ -194,6 +194,7 @@ interface CwGenericTooltipProps {
     children: ReactNode;
     content?: ReactNode;
     dissapearsWhenHover?: boolean;
+    hide?: boolean;
     position?: TooltipPosition;
     overlayStyle?: CSSProperties;
     showDelay?: number;
@@ -255,7 +256,7 @@ declare class CwModalIframe extends React$1.Component<CwModalIframeProps, State$
     render(): react_jsx_runtime.JSX.Element;
 }
 
-interface CwReportModalProps$1 {
+interface CwReportModalFunctionalProps {
     content: string;
     name: string;
     title: string;
@@ -267,7 +268,7 @@ interface CwReportModalProps$1 {
     isModal?: boolean;
     onCloseModal: () => void;
 }
-declare const CwModalReportFunctional: FC<CwReportModalProps$1>;
+declare const CwModalReportFunctional: FC<CwReportModalFunctionalProps>;
 
 interface CwReportModalProps {
     url: File;
@@ -321,8 +322,8 @@ interface CwDialogProps extends Omit<HTMLProps<PropsWithChildren<HTMLDialogEleme
     customHeader?: Array<ReactElement>;
     headline?: string;
     dialogSize?: {
-        width: number;
-        height: number;
+        width: number | string;
+        height: number | string;
     };
     zIndex?: number;
     scrim?: boolean;
@@ -376,7 +377,7 @@ interface CwTableProps {
     classNameContainer?: string;
     className?: string;
     classNameHeader?: string;
-    classNameTr_row?: string;
+    classNameRow?: string;
     style?: React__default.CSSProperties;
     id?: string;
     textNoData?: string;
@@ -469,7 +470,7 @@ interface CwTableProps {
  * />
  * @returns React component
  */
-declare function CwTable({ columns, data, pagination, itemsPerPage, expandedRowRender, onExpand, className, classNameHeader, classNameTr_row, style, classNameContainer, id, textNoData }: CwTableProps): react_jsx_runtime.JSX.Element;
+declare function CwTable({ columns, data, pagination, itemsPerPage, expandedRowRender, onExpand, className, classNameHeader, classNameRow, style, classNameContainer, id, textNoData }: CwTableProps): react_jsx_runtime.JSX.Element;
 
 interface Tab {
     key: string;
@@ -482,10 +483,11 @@ interface CwTabsProps {
     id?: string;
     onTabClick?: any;
     defaultActiveKey?: string;
-    classname?: string;
+    className?: string;
     style?: React__default.CSSProperties;
     tabs: Tab[];
     tabsPosition?: 'top' | 'left';
+    tabsListWidth?: string;
 }
 /**
  *
@@ -639,11 +641,12 @@ interface CwInputProps {
 }
 declare function CwInput(CwInputProps: React__default.PropsWithChildren<CwInputProps>): react_jsx_runtime.JSX.Element;
 
-interface CwButtonProps extends Omit<React.HTMLAttributes<HTMLButtonElement>, "className"> {
+interface CwButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
     text?: string;
+    variant?: 'solid' | 'outline';
     ref?: React.LegacyRef<HTMLButtonElement>;
 }
-declare function CwButton(props: CwButtonProps): react_jsx_runtime.JSX.Element;
+declare function CwButton({ text, variant, className, children, ...buttonProps }: CwButtonProps): react_jsx_runtime.JSX.Element;
 
 interface CwDigitProps extends Omit<HTMLProps<HTMLInputElement>, "className" | "type"> {
     /** Props to define alignment and size; undefined == column
@@ -1051,9 +1054,6 @@ interface CwCheckboxProps {
 declare function CwCheckbox(CwCheckboxProps: React__default.PropsWithChildren<CwCheckboxProps>): react_jsx_runtime.JSX.Element;
 
 interface CwToggleProps extends Omit<React__default.DetailedHTMLProps<React__default.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "className" | "type"> {
-    /** Props to define alignment and size; undefined == column
-     * @example alignProps={{_direction:"row"}} */
-    alignProps?: CwAlignProps;
     /** Props of the button; undefined == no button
      * @example buttonProps={{children:"Ok"}} */
     buttonProps?: CwButtonProps;
@@ -1136,7 +1136,7 @@ interface CwOptionProps extends Omit<HTMLProps<PropsWithChildren<HTMLOptionEleme
  */
 declare function CwOption(props: CwOptionProps): react_jsx_runtime.JSX.Element;
 
-interface CwDropdownProps {
+interface CwDropdownProps extends HTMLProps<HTMLDivElement> {
     selectList: Array<CwSelectList>;
     labelName: string;
     labelPosition?: string;
@@ -1322,8 +1322,20 @@ interface CwMultiFilterProps {
     style?: React__default.CSSProperties;
 }
 /**
- * A multiple filter selector, a MULTI-SELECT even.
+ * A multiple filter selector, a MULTI-SELECT even. Allows users to select and filter items based on tags.
  * @remark
+ * The CwMultiFilter component provides a user interface for selecting multiple filter options
+ * organized by categories. Each filter option is represented as a clickable tag with customizable
+ * colors. The component manages the selection state internally but reports changes via a callback.
+ *
+ * Filter tags should include the following properties:
+ * - `Name`: Display name of the filter
+ * - `Value`: Actual value used for filtering logic
+ * - `Category`: Group the filter belongs to
+ * - `ID`: Unique identifier for the filter
+ * - `PrimaryColor`: Background color of the tag
+ * - `OnPrimaryColor`: Text color of the tag
+ *
  * ```
  * ╭───────────────────────────────────────────────────────────────╮
  * │ ╭──────────╮ ╭──────────╮ ╭──────────╮                        │
@@ -1338,39 +1350,116 @@ interface CwMultiFilterProps {
  *  ╰─────────────────────────────────────────────────────────────╯
  * ```
     * @example
- * ```
- * /// Use setSelectedTags to set the initial selected tags or to add/remove them after an action.
- * const [selectedTags, setSelectedTags] = useState(new Set<CwMultiFilterTagProps>());
- * const [selectedCategory, setSelectedCategory] = useState("");
+ * ```tsx
+ * import { CwMultiFilter, type CwMultiFilterTagProps, type ICwMultiFilterTag } from "cwellt-reactjs-lib";
+ * import { useCallback, useState } from "react";
+ * import { hexToRGB } from "../common/functions/color";
+ *
+ * function FilterExample() {
+ *   // State to track selected filter tags
+ *   const [selectedTags, setSelectedTags] = useState(new Set<CwMultiFilterTagProps>());
+ *
+ *   // Sample data to filter
+ *   const [users, setUsers] = useState([
+ *     { id: 1, name: "John", role: "admin", department: "IT" },
+ *     { id: 2, name: "Sarah", role: "user", department: "HR" },
+ *     // More users...
+ *   ]);
+ *
+ *   // Filtered users based on selected tags
+ *   const [filteredUsers, setFilteredUsers] = useState(users);
+ *
+ *   // Define filter options
+ *   const filterOptions = new Set([
+ *     {
+ *       Name: "Admin",
+ *       Value: "admin",
+ *       Category: "Roles",
+ *       ID: "Roles_admin",
+ *       OnPrimaryColor: hexToRGB("#2050a8"),
+ *       PrimaryColor: hexToRGB("#cedcff")
+ *     },
+ *     {
+ *       Name: "User",
+ *       Value: "user",
+ *       Category: "Roles",
+ *       ID: "Roles_user",
+ *       OnPrimaryColor: hexToRGB("#2050a8"),
+ *       PrimaryColor: hexToRGB("#cedcff")
+ *     },
+ *     {
+ *       Name: "IT",
+ *       Value: "IT",
+ *       Category: "Departments",
+ *       ID: "Departments_IT",
+ *       OnPrimaryColor: hexToRGB("#a82037"),
+ *       PrimaryColor: hexToRGB("#ffceda")
+ *     },
+ *     {
+ *       Name: "HR",
+ *       Value: "HR",
+ *       Category: "Departments",
+ *       ID: "Departments_HR",
+ *       OnPrimaryColor: hexToRGB("#a82037"),
+ *       PrimaryColor: hexToRGB("#ffceda")
+ *     }
+ *   ]);
+ *
+ *   // Handle filter changes
+ *   const onChangeFilters = useCallback((tags: Set<ICwMultiFilterTag>) => {
+ *     setSelectedTags(tags);
+ *     const tagsArray = Array.from(tags);
  *
- * <CwMultiFilter
- *  id="multifilter"
- *  onChange={tags => { // Collection of currently active tags
- *    console.log("This will get called every time the selected filters change");
- *  }}
- *  selectedTags={selectedTags} // Selected filters, in case you want to modify them manually
- *  selectedCategory={selectedCategory}
- *  onChangeCategory={setSelectedCategory}
- *  allTags={
- *    new Set([
- *      {
- *        Name: "DEF", // The text displayed on the tag/filter/chip
- *        Value: "DEF", // Working value, used for whatever you need, it might be the CrewmemberID or the same as Name
- *        Category: "Crewmembers", // Category it belongs to (you don't need to define categories elsewhere)
- *        ID: "Crewmembers_DEF", // make sure each ID is unique
- *        OnPrimaryColor: hexToRGB("#2050a8"), // color for text and outline of the tag/filter/chip
- *        PrimaryColor: hexToRGB("#cedcff"), // background color for the tag/filter/chip
- *      },
- *      {
- *        Name: "ABC",
- *        Value: "ABC",
- *        Category: "Crewmembers",
- *        ID: "Crewmembers_ABC",
- *        OnPrimaryColor: hexToRGB("#2050a8"), // you can also do { r: 255, g: 128, b: 64 }
- *        PrimaryColor: hexToRGB("#cedcff")
- *      }
- *    ])
- *  }
+ *     // Get values for each category
+ *     const roleValues = tagsArray
+ *       .filter(tag => tag.Category === "Roles")
+ *       .map(tag => tag.Value);
+ *
+ *     const departmentValues = tagsArray
+ *       .filter(tag => tag.Category === "Departments")
+ *       .map(tag => tag.Value);
+ *
+ *     // Apply filters
+ *     if (tagsArray.length === 0) {
+ *       // No filters applied
+ *       setFilteredUsers(users);
+ *     } else {
+ *       let filtered = users;
+ *
+ *       if (roleValues.length > 0) {
+ *         filtered = filtered.filter(user => roleValues.includes(user.role));
+ *       }
+ *
+ *       if (departmentValues.length > 0) {
+ *         filtered = filtered.filter(user => departmentValues.includes(user.department));
+ *       }
+ *
+ *       setFilteredUsers(filtered);
+ *     }
+ *   }, [users]);
+ *
+ *   return (
+ *     <div>
+ *       <h2>Filter Users</h2>
+ *       <div style={{ width: "50%" }}>
+ *         <CwMultiFilter
+ *           id="user-filter"
+ *           allTags={filterOptions}
+ *           onChangeSelectedTags={onChangeFilters}
+ *           selectedTags={selectedTags}
+ *         />
+ *       </div>
+ *       <div style={{ marginTop: "20px" }}>
+ *         <h3>Filtered Results ({filteredUsers.length})</h3>
+ *         <ul>
+ *           {filteredUsers.map(user => (
+ *             <li key={user.id}>{user.name} - {user.role} ({user.department})</li>
+ *           ))}
+ *         </ul>
+ *       </div>
+ *     </div>
+ *   );
+ * }
  * ```
  * @param {CwMultiFilterProps} props
  * @returns Set the `onChange` callback to a function to check for changes in the selected filters
@@ -1379,7 +1468,7 @@ declare const CwMultiFilter: FC<CwMultiFilterProps>;
 
 interface CwSearchInputProps extends HTMLProps<HTMLDivElement> {
     selectList: Array<CwSelectList>;
-    labelName: string;
+    labelName?: string;
     labelPosition?: string;
     labelClassName?: string;
     handleChange?: (value: any) => void;
@@ -1393,6 +1482,10 @@ declare function CwSearchInput(optionsProps: React__default.PropsWithChildren<Cw
 
 interface ContextMenuProps extends React__default.PropsWithChildren {
     options: string[];
+    offset?: {
+        x: number;
+        y: number;
+    };
     onSelect: (option: string) => void;
 }
 /**
@@ -1436,18 +1529,12 @@ declare function CwContextualMenu(CwelltRightClickProps: React$1.PropsWithChildr
  * @dependencies #CwScheduler #CwSchedulerActive #cwelltContentDuty #cwelltContentDutyActive
  */
 declare function CwFloatingButton(): react_jsx_runtime.JSX.Element;
-declare function CwButtonExpandAndCollapse(): react_jsx_runtime.JSX.Element;
 interface cwButtonsDescProps {
     cw_btn_desc: string;
     cw_btnOnclick: any;
     cw_btn_disabled?: boolean;
 }
 declare function CwButtonDef({ cw_btn_desc, cw_btnOnclick, cw_btn_disabled }: cwButtonsDescProps): react_jsx_runtime.JSX.Element;
-declare function CwButtonDefOutline({ cw_btn_desc, cw_btnOnclick, cw_btn_disabled }: cwButtonsDescProps): react_jsx_runtime.JSX.Element;
-declare function CwButtonSec({ cw_btn_desc, cw_btnOnclick, cw_btn_disabled }: cwButtonsDescProps): react_jsx_runtime.JSX.Element;
-declare function CwButtonSecOutline({ cw_btn_desc, cw_btnOnclick, cw_btn_disabled }: cwButtonsDescProps): react_jsx_runtime.JSX.Element;
-declare function CwButtonDanger({ cw_btn_desc, cw_btnOnclick, cw_btn_disabled }: cwButtonsDescProps): react_jsx_runtime.JSX.Element;
-declare function CwButtonDangerOutline({ cw_btn_desc, cw_btnOnclick, cw_btn_disabled }: cwButtonsDescProps): react_jsx_runtime.JSX.Element;
 interface cw_btnProps {
     cw_btnOnclick: any;
     cw_btn_disabled?: boolean;
@@ -1470,7 +1557,6 @@ declare function CwBtnWarning({ cw_btnOnclick, cw_btn_disabled }: cw_btnProps):
 declare function CwBtnShare({ cw_btnOnclick, cw_btn_disabled }: cw_btnProps): react_jsx_runtime.JSX.Element;
 declare function CwBtnFiles({ cw_btnOnclick, cw_btn_disabled }: cw_btnProps): react_jsx_runtime.JSX.Element;
 declare function CwBtnAirport({ cw_btnOnclick, cw_btn_disabled }: cw_btnProps): react_jsx_runtime.JSX.Element;
-declare function CwBtnUserFolder({ cw_btnOnclick, cw_btn_disabled }: cw_btnProps): react_jsx_runtime.JSX.Element;
 declare function CwBtnDownLoadAllInfo({ cw_btnOnclick, cw_btn_disabled }: cw_btnProps): react_jsx_runtime.JSX.Element;
 declare function CwBtnPropertyFolder({ cw_btnOnclick, cw_btn_disabled }: cw_btnProps): react_jsx_runtime.JSX.Element;
 declare function CwBtnAddFolder({ cw_btnOnclick, cw_btn_disabled }: cw_btnProps): react_jsx_runtime.JSX.Element;
@@ -1881,7 +1967,6 @@ declare const SchedulerEvent: FC<SchedulerEventState<SchedulerEventDm>>;
 
 interface BackgroundEventDm extends SchedulerEventDm {
     isVisible: boolean;
-    isVerticalText?: boolean;
 }
 
 interface RowHeaderDm {
@@ -2106,4 +2191,4 @@ declare class OnClickContextMenu implements UiEvent {
     constructor(id: string, clickedMenu: string);
 }
 
-export { type BackgroundEventDm, CblDragAndDrop$1 as CblDragAndDrop, type Column, CwAccordionContainer, CwAlign, type CwAlignProps, CwBtnAdd, CwBtnAddFolder, CwBtnAirport, CwBtnAlert, CwBtnApprove, CwBtnArchive, CwBtnArchiveRestore, CwBtnBookMark, CwBtnBookMarkLinkPage, CwBtnBulkDuty, CwBtnCancel, CwBtnCrewPlanning, CwBtnDelay, CwBtnDelete, CwBtnDownLoadAllInfo, CwBtnDownload, CwBtnDropDownMenu, CwBtnEdit, CwBtnEditFolder, CwBtnFiles, CwBtnGeneratePairing, CwBtnGoBackFolder, CwBtnHide, CwBtnImportRequests, CwBtnInfo, CwBtnMVT, CwBtnNavFirstItemView, CwBtnNavLastItemView, CwBtnNavNextDay, CwBtnNavPreviewItem, CwBtnPairing, CwBtnPrint, CwBtnPropertyFolder, CwBtnPublish, CwBtnRefresh, CwBtnReleasePeriod, CwBtnSave, CwBtnSearch, CwBtnSelect, CwBtnSelectedFolder, CwBtnShare, CwBtnStatistic, CwBtnUploadFiles, CwBtnUserFolder, CwBtnVacations, CwBtnView, CwBtnWarning, CwButton, CwButtonDanger, CwButtonDangerOutline, CwButtonDef, CwButtonDefOutline, CwButtonExpandAndCollapse, CwButtonSec, CwButtonSecOutline, CwCheckbox, CwContextMenu, CwContextualMenu, CwDialog, CwDialogManager, type CwDialogProps, CwDigit, CwDisplayMessage, CwDropdown, CwDropdownContainer, CwDropdownFilter, CwDropdownNavigation, CwExpandable, type CwExpandableProps, CwFileUpload, type CwFilterTabProps, CwFindAirport, CwFloatingButton, CwGenericTooltip, CwHeadFilter, CwHeadingMain, CwHeadingSecond, CwIcon, CwImageArea, type CwImageAreaMethods, type CwImageAreaProps, CwInput, CwInputDate, CwInputDatePicker, type CwInputDatePickerProps, type CwInputDateProps, CwInputDateText, type CwInputDateTextProps, CwInputDatetime, type CwInputDatetimeProps, CwInputImage, type CwInputImageProps, CwInputNumber, type CwInputNumberProps, CwInputPhone, type CwInputPhoneProps, CwInputText, type CwInputTextProps, type CwInputTimeProps, CwLabel, type CwLabelProps, CwLoading, CwLoadingSmall, CwMessage, CwMessageManager, type CwMessageProps, CwMessageType, CwModal, CwModalConfirm, CwModalHover, type CwModalHoverProps, CwModalIframe, CwModalReportFunctional, CwMultiFilter, type CwMultiFilterProps, CwMultiFilterTag, type CwMultiFilterTagProps, CwMultiselect, CwOption, CwOptionList, CwReportModal, type CwReportModalProps$1 as CwReportModalProps, CwScheduler, CwScheduler2, CwSearchInput, CwSelect, CwSelectList, CwSelectListItems, type CwSelectListProps, CwSuperScheduler, CwTable, CwTableGrouped, type CwTableGroupedData, type CwTableGroupedData_Group, type CwTableGroupedData_Row, type CwTableGroupedProps, CwTabs, CwTag, CwTextArea, type CwTextAreaProps, CwTime, CwToggle, CwTooltip, CwWeekdaySelector, type DataItem, DefaultRowHeader, type ICwMultiFilterTag, MultiSelect, OnClearPinned, OnClickContextMenu, OnClickEvent, OnClickRowEvent, OnClickRowHeader, OnClickUtc, OnDoubleClickEvent, OnDoubleClickRowEvent, OnDragEvent, OnDropCtrlEvent, OnDropEvent, OnEndClickHeaderEvent, type OnEvent, OnLeftDragStart, OnMultiClickEvent, OnPinRow, OnRangeClickEvent, OnRightClickEvent, OnRightClickRow, OnRightDragStart, OnStartClickHeaderEvent, OnUnpinRow, PinRowHeader, type PinRowHeaderProps, Resource, type RowHeaderDm, type RowHeaderProps, Scheduler, SchedulerEvent, type SchedulerEventDm, type SchedulerEventState, type SchedulerRowProps, type SchedulerState, SuperScheduler, type SuperSchedulerProps, UiEvent, type Weekday, Weekdays, cblEvent, type cblEventCompProps, eventIsVisible, getDefaultDivisions, getEventSizes, itemsToMultiFilterTags, type resourceCompProps2, useCwMessage };
+export { type BackgroundEventDm, CblDragAndDrop$1 as CblDragAndDrop, type Column, CwAccordionContainer, CwAlign, type CwAlignProps, CwBtnAdd, CwBtnAddFolder, CwBtnAirport, CwBtnAlert, CwBtnApprove, CwBtnArchive, CwBtnArchiveRestore, CwBtnBookMark, CwBtnBookMarkLinkPage, CwBtnBulkDuty, CwBtnCancel, CwBtnCrewPlanning, CwBtnDelay, CwBtnDelete, CwBtnDownLoadAllInfo, CwBtnDownload, CwBtnDropDownMenu, CwBtnEdit, CwBtnEditFolder, CwBtnFiles, CwBtnGeneratePairing, CwBtnGoBackFolder, CwBtnHide, CwBtnImportRequests, CwBtnInfo, CwBtnMVT, CwBtnNavFirstItemView, CwBtnNavLastItemView, CwBtnNavNextDay, CwBtnNavPreviewItem, CwBtnPairing, CwBtnPrint, CwBtnPropertyFolder, CwBtnPublish, CwBtnRefresh, CwBtnReleasePeriod, CwBtnSave, CwBtnSearch, CwBtnSelect, CwBtnSelectedFolder, CwBtnShare, CwBtnStatistic, CwBtnUploadFiles, CwBtnVacations, CwBtnView, CwBtnWarning, CwButton, CwButtonDef, CwCheckbox, CwContextMenu, CwContextualMenu, CwDialog, CwDialogManager, type CwDialogProps, CwDigit, CwDisplayMessage, CwDropdown, CwDropdownContainer, CwDropdownFilter, CwDropdownNavigation, CwExpandable, type CwExpandableProps, CwFileUpload, type CwFilterTabProps, CwFindAirport, CwFloatingButton, CwGenericTooltip, CwHeadFilter, CwHeadingMain, CwHeadingSecond, CwIcon, CwImageArea, type CwImageAreaMethods, type CwImageAreaProps, CwInput, CwInputDate, CwInputDatePicker, type CwInputDatePickerProps, type CwInputDateProps, CwInputDateText, type CwInputDateTextProps, CwInputDatetime, type CwInputDatetimeProps, CwInputImage, type CwInputImageProps, CwInputNumber, type CwInputNumberProps, CwInputPhone, type CwInputPhoneProps, CwInputText, type CwInputTextProps, type CwInputTimeProps, CwLabel, type CwLabelProps, CwLoading, CwLoadingSmall, CwMessage, CwMessageManager, type CwMessageProps, CwMessageType, CwModal, CwModalConfirm, CwModalHover, type CwModalHoverProps, CwModalIframe, CwModalReportFunctional, CwMultiFilter, type CwMultiFilterProps, CwMultiFilterTag, type CwMultiFilterTagProps, CwMultiselect, CwOption, CwOptionList, CwReportModal, type CwReportModalFunctionalProps, CwScheduler, CwScheduler2, CwSearchInput, CwSelect, CwSelectList, CwSelectListItems, type CwSelectListProps, CwSuperScheduler, CwTable, CwTableGrouped, type CwTableGroupedData, type CwTableGroupedData_Group, type CwTableGroupedData_Row, type CwTableGroupedProps, CwTabs, CwTag, CwTextArea, type CwTextAreaProps, CwTime, CwToggle, CwTooltip, CwWeekdaySelector, type DataItem, DefaultRowHeader, type ICwMultiFilterTag, MultiSelect, OnClearPinned, OnClickContextMenu, OnClickEvent, OnClickRowEvent, OnClickRowHeader, OnClickUtc, OnDoubleClickEvent, OnDoubleClickRowEvent, OnDragEvent, OnDropCtrlEvent, OnDropEvent, OnEndClickHeaderEvent, type OnEvent, OnLeftDragStart, OnMultiClickEvent, OnPinRow, OnRangeClickEvent, OnRightClickEvent, OnRightClickRow, OnRightDragStart, OnStartClickHeaderEvent, OnUnpinRow, PinRowHeader, type PinRowHeaderProps, Resource, type RowHeaderDm, type RowHeaderProps, Scheduler, SchedulerEvent, type SchedulerEventDm, type SchedulerEventState, type SchedulerRowProps, type SchedulerState, SuperScheduler, type SuperSchedulerProps, UiEvent, type Weekday, Weekdays, cblEvent, type cblEventCompProps, eventIsVisible, getDefaultDivisions, getEventSizes, itemsToMultiFilterTags, type resourceCompProps2, useCwMessage };