diff --git a/components/doc/button/pt/ptdoc.js b/components/doc/button/pt/ptdoc.js index f606206e90..6e605a0c18 100644 --- a/components/doc/button/pt/ptdoc.js +++ b/components/doc/button/pt/ptdoc.js @@ -1,6 +1,6 @@ -import { DocSectionText } from '../../common/docsectiontext'; -import { DocSectionCode } from '../../common/docsectioncode'; import { Button } from '../../../lib/button/Button'; +import { DocSectionCode } from '../../common/docsectioncode'; +import { DocSectionText } from '../../common/docsectiontext'; export function PTDoc(props) { const code = { diff --git a/components/doc/common/apidoc/index.json b/components/doc/common/apidoc/index.json index 6a9afee1b4..964f385455 100644 --- a/components/doc/common/apidoc/index.json +++ b/components/doc/common/apidoc/index.json @@ -4096,6 +4096,13 @@ "readonly": false, "type": "ButtonPassThroughType>", "description": "Uses to pass attributes to the badge's DOM element." + }, + { + "name": "tooltip", + "optional": true, + "readonly": false, + "type": "TooltipPassThroughOptions", + "description": "Uses to pass attributes to the Tooltip component." } ], "callbacks": [] @@ -8641,6 +8648,14 @@ "default": "", "description": "Used to get the child elements of the component." }, + { + "name": "pt", + "optional": true, + "readonly": false, + "type": "ColumnPassThroughOptions", + "default": "", + "description": "Uses to pass attributes to DOM elements inside the component." + }, { "name": "className", "optional": true, @@ -9544,6 +9559,492 @@ "interfaces": { "description": "Defines the custom interfaces used by the module.", "values": { + "ColumnPassThroughMethodOptions": { + "description": "Custom passthrough(pt) option method.", + "relatedProp": "", + "props": [ + { + "name": "props", + "optional": false, + "readonly": false, + "type": "ColumnProps" + }, + { + "name": "state", + "optional": false, + "readonly": false, + "type": "ColumnState" + }, + { + "name": "context", + "optional": false, + "readonly": false, + "type": "ColumnContext" + }, + { + "name": "parent", + "optional": false, + "readonly": false, + "type": "DataTablePassThroughOptions" + } + ], + "callbacks": [] + }, + "ColumnContext": { + "description": "Defines current options in Column component.", + "relatedProp": "", + "props": [ + { + "name": "checked", + "optional": false, + "readonly": false, + "type": "boolean", + "description": "Current checked state of row as a boolean." + }, + { + "name": "disabled", + "optional": false, + "readonly": false, + "type": "boolean", + "description": "Current disabled state of row as a boolean." + } + ], + "callbacks": [] + }, + "ColumnState": { + "description": "Defines current inline state in Column component.", + "relatedProp": "", + "props": [ + { + "name": "editing", + "optional": false, + "readonly": false, + "type": "boolean", + "description": "Current editing state of the body cell." + }, + { + "name": "editingRowData", + "optional": false, + "readonly": false, + "type": "any", + "description": "Current editing row data of the body cell." + }, + { + "name": "styleObject", + "optional": false, + "readonly": false, + "type": "object", + "description": "Current style of the body cell." + }, + { + "name": "focused", + "optional": false, + "readonly": false, + "type": "boolean", + "description": "Current focused state as a boolean." + }, + { + "name": "rowGroupHeaderStyleObject", + "optional": false, + "readonly": false, + "type": "object", + "description": "Current style of the rowgroup header." + }, + { + "name": "sortableDisabledFields", + "optional": false, + "readonly": false, + "type": "any[]", + "description": "Current sortable disabled fields of the table header." + }, + { + "name": "allSortableDisabled", + "optional": false, + "readonly": false, + "type": "boolean", + "description": "Current style of the table header." + } + ], + "callbacks": [] + }, + "ColumnPassThroughOptions": { + "description": "Custom passthrough(pt) options.", + "relatedProp": "pt", + "props": [ + { + "name": "root", + "optional": true, + "readonly": false, + "type": "ColumnPassThroughType>", + "description": "Uses to pass attributes to the root's DOM element." + }, + { + "name": "headerCell", + "optional": true, + "readonly": false, + "type": "ColumnPassThroughType>", + "description": "Uses to pass attributes to the header cell's DOM element." + }, + { + "name": "columnResizer", + "optional": true, + "readonly": false, + "type": "ColumnPassThroughType>", + "description": "Uses to pass attributes to the column resizer's DOM element." + }, + { + "name": "headerContent", + "optional": true, + "readonly": false, + "type": "ColumnPassThroughType>", + "description": "Uses to pass attributes to the header content's DOM element." + }, + { + "name": "headerTitle", + "optional": true, + "readonly": false, + "type": "ColumnPassThroughType>", + "description": "Uses to pass attributes to the header title's DOM element." + }, + { + "name": "sort", + "optional": true, + "readonly": false, + "type": "ColumnPassThroughType>", + "description": "Uses to pass attributes to the sort's DOM element." + }, + { + "name": "sortIcon", + "optional": true, + "readonly": false, + "type": "ColumnPassThroughType | SVGProps>", + "description": "Uses to pass attributes to the sort's DOM element." + }, + { + "name": "sortBadge", + "optional": true, + "readonly": false, + "type": "ColumnPassThroughType>", + "description": "Uses to pass attributes to the sort badge's DOM element." + }, + { + "name": "headerCheckboxWrapper", + "optional": true, + "readonly": false, + "type": "ColumnPassThroughType>", + "description": "Uses to pass attributes to the checkbox wrapper's DOM element." + }, + { + "name": "headerCheckbox", + "optional": true, + "readonly": false, + "type": "ColumnPassThroughType>", + "description": "Uses to pass attributes to the header checkbox's DOM element." + }, + { + "name": "headerCheckboxIcon", + "optional": true, + "readonly": false, + "type": "ColumnPassThroughType | SVGProps>", + "description": "Uses to pass attributes to the header checkbox icon's DOM element." + }, + { + "name": "columnFilter", + "optional": true, + "readonly": false, + "type": "ColumnPassThroughType>", + "description": "Uses to pass attributes to the column filter's DOM element." + }, + { + "name": "filterInput", + "optional": true, + "readonly": false, + "type": "ColumnPassThroughType>", + "description": "Uses to pass attributes to the filter input's DOM element." + }, + { + "name": "filterMenuButton", + "optional": true, + "readonly": false, + "type": "ColumnPassThroughType>", + "description": "Uses to pass attributes to the filter menu button's DOM element." + }, + { + "name": "headerFilterClearButton", + "optional": true, + "readonly": false, + "type": "ColumnPassThroughType>", + "description": "Uses to pass attributes to the header filter clear button's DOM element." + }, + { + "name": "filterClearIcon", + "optional": true, + "readonly": false, + "type": "ColumnPassThroughType | SVGProps>", + "description": "Uses to pass attributes to the filter clear icon's DOM element." + }, + { + "name": "filterOverlay", + "optional": true, + "readonly": false, + "type": "ColumnPassThroughType>", + "description": "Uses to pass attributes to the filter overlay's DOM element." + }, + { + "name": "filterRowItems", + "optional": true, + "readonly": false, + "type": "ColumnPassThroughType>", + "description": "Uses to pass attributes to the filter row items' DOM element." + }, + { + "name": "filterRowItem", + "optional": true, + "readonly": false, + "type": "ColumnPassThroughType>", + "description": "Uses to pass attributes to the filter row item's DOM element." + }, + { + "name": "filterSeparator", + "optional": true, + "readonly": false, + "type": "ColumnPassThroughType>", + "description": "Uses to pass attributes to the filter separator's DOM element." + }, + { + "name": "filterOperator", + "optional": true, + "readonly": false, + "type": "ColumnPassThroughType>", + "description": "Uses to pass attributes to the filter operator's DOM element." + }, + { + "name": "filterOperatorDropdown", + "optional": true, + "readonly": false, + "type": "DropdownPassThroughOptions", + "description": "Uses to pass attributes to the Dropdown component." + }, + { + "name": "filterConstraints", + "optional": true, + "readonly": false, + "type": "ColumnPassThroughType>", + "description": "Uses to pass attributes to the filter constraints' DOM element." + }, + { + "name": "filterConstraint", + "optional": true, + "readonly": false, + "type": "ColumnPassThroughType>", + "description": "Uses to pass attributes to the filter constraint's DOM element." + }, + { + "name": "filterMatchModeDropdown", + "optional": true, + "readonly": false, + "type": "DropdownPassThroughOptions", + "description": "Uses to pass attributes to the Dropdown component." + }, + { + "name": "filterRemove", + "optional": true, + "readonly": false, + "type": "ColumnPassThroughType>", + "description": "Uses to pass attributes to the filter remove button container's DOM element." + }, + { + "name": "filterRemoveButton", + "optional": true, + "readonly": false, + "type": "DropdownPassThroughOptions", + "description": "Uses to pass attributes to the Button component." + }, + { + "name": "filterAddRule", + "optional": true, + "readonly": false, + "type": "ColumnPassThroughType>", + "description": "Uses to pass attributes to the filter add rule's DOM element." + }, + { + "name": "filterAddRuleButton", + "optional": true, + "readonly": false, + "type": "DropdownPassThroughOptions", + "description": "Uses to pass attributes to the Button component." + }, + { + "name": "filterButtonbar", + "optional": true, + "readonly": false, + "type": "ColumnPassThroughType>", + "description": "Uses to pass attributes to the filter buttonbar's DOM element." + }, + { + "name": "filterClearButton", + "optional": true, + "readonly": false, + "type": "ButtonPassThroughOptions", + "description": "Uses to pass attributes to the Button component." + }, + { + "name": "filterApplyButton", + "optional": true, + "readonly": false, + "type": "ButtonPassThroughOptions", + "description": "Uses to pass attributes to the Button component." + }, + { + "name": "bodyCell", + "optional": true, + "readonly": false, + "type": "ColumnPassThroughType>", + "description": "Uses to pass attributes to the body cell's DOM element." + }, + { + "name": "rowGroupToggler", + "optional": true, + "readonly": false, + "type": "ColumnPassThroughType>", + "description": "Uses to pass attributes to the rowgroup toggler's DOM element." + }, + { + "name": "rowGroupTogglerIcon", + "optional": true, + "readonly": false, + "type": "ColumnPassThroughType>", + "description": "Uses to pass attributes to the rowgroup toggler icon's DOM element." + }, + { + "name": "columnTitle", + "optional": true, + "readonly": false, + "type": "ColumnPassThroughType>", + "description": "Uses to pass attributes to the column title's DOM element." + }, + { + "name": "radiobuttonWrapper", + "optional": true, + "readonly": false, + "type": "ColumnPassThroughType>", + "description": "Uses to pass attributes to the radiobutton wrapper's DOM element." + }, + { + "name": "radiobutton", + "optional": true, + "readonly": false, + "type": "ColumnPassThroughType>", + "description": "Uses to pass attributes to the radiobutton's DOM element." + }, + { + "name": "radiobuttonIcon", + "optional": true, + "readonly": false, + "type": "ColumnPassThroughType>", + "description": "Uses to pass attributes to the radiobutton icon's DOM element." + }, + { + "name": "checkboxWrapper", + "optional": true, + "readonly": false, + "type": "ColumnPassThroughType>", + "description": "Uses to pass attributes to the checkbox wrapper's DOM element." + }, + { + "name": "checkbox", + "optional": true, + "readonly": false, + "type": "ColumnPassThroughType>", + "description": "Uses to pass attributes to the checkbox's DOM element." + }, + { + "name": "checkboxIcon", + "optional": true, + "readonly": false, + "type": "ColumnPassThroughType | SVGProps>", + "description": "Uses to pass attributes to the checkbox icon's DOM element." + }, + { + "name": "rowToggler", + "optional": true, + "readonly": false, + "type": "ColumnPassThroughType>", + "description": "Uses to pass attributes to the rowtoggler's DOM element." + }, + { + "name": "rowTogglerIcon", + "optional": true, + "readonly": false, + "type": "ColumnPassThroughType | SVGProps>", + "description": "Uses to pass attributes to the rowtoggler icon's DOM element." + }, + { + "name": "rowEditorInitButton", + "optional": true, + "readonly": false, + "type": "ColumnPassThroughType>", + "description": "Uses to pass attributes to the row editor init button's DOM element." + }, + { + "name": "rowEditorInitIcon", + "optional": true, + "readonly": false, + "type": "ColumnPassThroughType | SVGProps>", + "description": "Uses to pass attributes to the row editor init icon's DOM element." + }, + { + "name": "rowEditorEditButton", + "optional": true, + "readonly": false, + "type": "ColumnPassThroughType>", + "description": "Uses to pass attributes to the row editor edit button's DOM element." + }, + { + "name": "rowEditorEditIcon", + "optional": true, + "readonly": false, + "type": "ColumnPassThroughType | SVGProps>", + "description": "Uses to pass attributes to the row editor edit icon's DOM element." + }, + { + "name": "rowEditorCancelButton", + "optional": true, + "readonly": false, + "type": "ColumnPassThroughType>", + "description": "Uses to pass attributes to the row editor cancel button's DOM element." + }, + { + "name": "rowEditorCancelIcon", + "optional": true, + "readonly": false, + "type": "ColumnPassThroughType | SVGProps>", + "description": "Uses to pass attributes to the row editor cancel icon's DOM element." + }, + { + "name": "hiddenHeaderInputWrapper", + "optional": true, + "readonly": false, + "type": "ColumnPassThroughType>", + "description": "Uses to pass attributes to the hidden input wrapper's DOM element." + }, + { + "name": "hiddenInputWrapper", + "optional": true, + "readonly": false, + "type": "ColumnPassThroughType>", + "description": "Uses to pass attributes to the hidden input wrapper's DOM element." + }, + { + "name": "hiddenInput", + "optional": true, + "readonly": false, + "type": "ColumnPassThroughType>", + "description": "Uses to pass attributes to the hidden input's DOM element." + } + ], + "callbacks": [] + }, "ColumnHeaderOptions": { "relatedProp": "", "props": [ @@ -10170,6 +10671,14 @@ "callbacks": [] } } + }, + "types": { + "description": "Defines the custom types used by the module.", + "values": { + "ColumnPassThroughType": { + "values": "PassThroughType" + } + } } }, "columngroup": { @@ -10191,6 +10700,14 @@ "type": "ReactNode", "default": "", "description": "Used to get the child elements of the component." + }, + { + "name": "pt", + "optional": true, + "readonly": false, + "type": "ColumnGroupPassThroughOptions", + "default": "", + "description": "Uses to pass attributes to DOM elements inside the component." } ] }, @@ -10199,6 +10716,52 @@ "values": [] } } + }, + "interfaces": { + "description": "Defines the custom interfaces used by the module.", + "values": { + "ColumnGroupPassThroughMethodOptions": { + "description": "Custom passthrough(pt) option method.", + "relatedProp": "", + "props": [ + { + "name": "props", + "optional": false, + "readonly": false, + "type": "ColumnGroupProps" + }, + { + "name": "parent", + "optional": false, + "readonly": false, + "type": "DataTablePassThroughOptions" + } + ], + "callbacks": [] + }, + "ColumnGroupPassThroughOptions": { + "description": "Custom passthrough(pt) options.", + "relatedProp": "pt", + "props": [ + { + "name": "root", + "optional": true, + "readonly": false, + "type": "ColumnGroupPassThroughType>", + "description": "Uses to pass attributes to the root's DOM element." + } + ], + "callbacks": [] + } + } + }, + "types": { + "description": "Defines the custom types used by the module.", + "values": { + "ColumnGroupPassThroughType": { + "values": "PassThroughType" + } + } } }, "confirmdialog": { @@ -12006,7 +12569,7 @@ }, { "name": "mode", - "type": "\"endsWith\" | \"startsWith\" | \"custom\" | \"contains\" | \"in\" | \"equals\" | \"notEquals\" | \"lt\" | \"lte\" | \"gt\" | \"gte\" | \"notContains\" | \"between\" | \"dateIs\" | \"dateIsNot\" | \"dateBefore\" | \"dateAfter\"", + "type": "\"endsWith\" | \"startsWith\" | \"custom\" | \"contains\" | \"in\" | \"equals\" | \"notEquals\" | \"notContains\" | \"lt\" | \"lte\" | \"gt\" | \"gte\" | \"between\" | \"dateIs\" | \"dateIsNot\" | \"dateBefore\" | \"dateAfter\"", "description": "Filter match mode" }, { @@ -14160,7 +14723,7 @@ "name": "matchMode", "optional": false, "readonly": false, - "type": "undefined | \"endsWith\" | \"startsWith\" | \"custom\" | \"contains\" | \"in\" | \"equals\" | \"notEquals\" | \"lt\" | \"lte\" | \"gt\" | \"gte\" | \"notContains\" | \"between\" | \"dateIs\" | \"dateIsNot\" | \"dateBefore\" | \"dateAfter\"", + "type": "undefined | \"endsWith\" | \"startsWith\" | \"custom\" | \"contains\" | \"in\" | \"equals\" | \"notEquals\" | \"notContains\" | \"lt\" | \"lte\" | \"gt\" | \"gte\" | \"between\" | \"dateIs\" | \"dateIsNot\" | \"dateBefore\" | \"dateAfter\"", "description": "Type of filter match." } ], @@ -14641,7 +15204,7 @@ "name": "loadingIcon", "optional": true, "readonly": false, - "type": "DataTablePassThroughType>", + "type": "DataTablePassThroughType | SVGProps>", "description": "Uses to pass attributes to the loading icon's DOM element." }, { @@ -14651,6 +15214,13 @@ "type": "DataTablePassThroughType>", "description": "Uses to pass attributes to the header's DOM element." }, + { + "name": "paginator", + "optional": true, + "readonly": false, + "type": "PaginatorPassThroughOptions", + "description": "Uses to pass attributes to the Paginator component." + }, { "name": "wrapper", "optional": true, @@ -14669,14 +15239,14 @@ "name": "table", "optional": true, "readonly": false, - "type": "DataTablePassThroughType>", + "type": "DataTablePassThroughType>", "description": "Uses to pass attributes to the table's DOM element." }, { "name": "virtualScrollerSpacer", "optional": true, "readonly": false, - "type": "DataTablePassThroughType>", + "type": "DataTablePassThroughType>", "description": "Uses to pass attributes to the virtual scroller spacer's DOM element." }, { @@ -14690,77 +15260,84 @@ "name": "thead", "optional": true, "readonly": false, - "type": "DataTablePassThroughType>", + "type": "DataTablePassThroughType>", "description": "Uses to pass attributes to the thead's DOM element." }, { "name": "headerRow", "optional": true, "readonly": false, - "type": "DataTablePassThroughType>", + "type": "DataTablePassThroughType>", "description": "Uses to pass attributes to the header row's DOM element." }, { "name": "tbody", "optional": true, "readonly": false, - "type": "DataTablePassThroughType>", + "type": "DataTablePassThroughType>", "description": "Uses to pass attributes to the tbody's DOM element." }, { "name": "rowgroupHeader", "optional": true, "readonly": false, - "type": "DataTablePassThroughType>", + "type": "DataTablePassThroughType>", "description": "Uses to pass attributes to the rowgroup header's DOM element." }, + { + "name": "rowgroupHeaderName", + "optional": true, + "readonly": false, + "type": "DataTablePassThroughType>", + "description": "Uses to pass attributes to the rowgroup header name's DOM element." + }, { "name": "row", "optional": true, "readonly": false, - "type": "DataTablePassThroughType>", + "type": "DataTablePassThroughType>", "description": "Uses to pass attributes to the row's DOM element." }, { "name": "rowExpansion", "optional": true, "readonly": false, - "type": "DataTablePassThroughType>", + "type": "DataTablePassThroughType>", "description": "Uses to pass attributes to the row expansion's DOM element." }, { "name": "rowgroupFooter", "optional": true, "readonly": false, - "type": "DataTablePassThroughType>", + "type": "DataTablePassThroughType>", "description": "Uses to pass attributes to the rowgroup footer's DOM element." }, { "name": "emptyMessage", "optional": true, "readonly": false, - "type": "DataTablePassThroughType>", + "type": "DataTablePassThroughType>", "description": "Uses to pass attributes to the empty message's DOM element." }, { "name": "tfoot", "optional": true, "readonly": false, - "type": "DataTablePassThroughType>", + "type": "DataTablePassThroughType>", "description": "Uses to pass attributes to the tfoot's DOM element." }, { "name": "footerRow", "optional": true, "readonly": false, - "type": "DataTablePassThroughType>", + "type": "DataTablePassThroughType>", "description": "Uses to pass attributes to the footerr ow's DOM element." }, { "name": "footerCell", "optional": true, "readonly": false, - "type": "DataTablePassThroughType>", + "type": "DataTablePassThroughType>", "description": "Uses to pass attributes to the footer cell's DOM element." }, { @@ -14774,16 +15351,30 @@ "name": "reorderIndicatorUp", "optional": true, "readonly": false, - "type": "DataTablePassThroughType>", + "type": "DataTablePassThroughType>", "description": "Uses to pass attributes to the reorder indicator up's DOM element." }, + { + "name": "reorderIndicatorUpIcon", + "optional": true, + "readonly": false, + "type": "DataTablePassThroughType | SVGProps>", + "description": "Uses to pass attributes to the reorder indicator up icon's DOM element." + }, { "name": "reorderIndicatorDown", "optional": true, "readonly": false, - "type": "DataTablePassThroughType>", + "type": "DataTablePassThroughType>", "description": "Uses to pass attributes to the reorder indicator down's DOM element." }, + { + "name": "reorderIndicatorDownIcon", + "optional": true, + "readonly": false, + "type": "DataTablePassThroughType | SVGProps>", + "description": "Uses to pass attributes to the reorder indicator down icon's DOM element." + }, { "name": "tooltip", "optional": true, @@ -15147,6 +15738,171 @@ "interfaces": { "description": "Defines the custom interfaces used by the module.", "values": { + "DataViewPassThroughMethodOptions": { + "description": "Custom passthrough(pt) option method.", + "relatedProp": "", + "props": [ + { + "name": "props", + "optional": false, + "readonly": false, + "type": "DataViewProps" + }, + { + "name": "state", + "optional": false, + "readonly": false, + "type": "DataViewState" + } + ], + "callbacks": [] + }, + "DataViewLayoutOptionsPassThroughMethodOptions": { + "description": "Custom passthrough(pt) option method.", + "relatedProp": "", + "props": [ + { + "name": "props", + "optional": false, + "readonly": false, + "type": "DataViewLayoutOptionsProps" + } + ], + "callbacks": [] + }, + "DataViewPassThroughOptions": { + "description": "Custom passthrough(pt) options.", + "relatedProp": "DataViewProps.pt", + "props": [ + { + "name": "root", + "optional": true, + "readonly": false, + "type": "DataViewPassThroughType>", + "description": "Uses to pass attributes to the root's DOM element." + }, + { + "name": "header", + "optional": true, + "readonly": false, + "type": "DataViewPassThroughType>", + "description": "Uses to pass attributes to the header's DOM element." + }, + { + "name": "paginator", + "optional": true, + "readonly": false, + "type": "PaginatorPassThroughOptions", + "description": "Uses to pass attributes to the Paginator component." + }, + { + "name": "content", + "optional": true, + "readonly": false, + "type": "DataViewPassThroughType>", + "description": "Uses to pass attributes to the content's DOM element." + }, + { + "name": "emptyMessage", + "optional": true, + "readonly": false, + "type": "DataViewPassThroughType>", + "description": "Uses to pass attributes to the empty message's DOM element." + }, + { + "name": "footer", + "optional": true, + "readonly": false, + "type": "DataViewPassThroughType>", + "description": "Uses to pass attributes to the footer's DOM element." + }, + { + "name": "loadingOverlay", + "optional": true, + "readonly": false, + "type": "DataViewPassThroughType>", + "description": "Uses to pass attributes to the loading overlay's DOM element." + }, + { + "name": "loadingIcon", + "optional": true, + "readonly": false, + "type": "DataViewPassThroughType | SVGProps>", + "description": "Uses to pass attributes to the loading icon's DOM element." + }, + { + "name": "grid", + "optional": true, + "readonly": false, + "type": "DataViewPassThroughType>", + "description": "Uses to pass attributes to the grid's DOM element." + } + ], + "callbacks": [] + }, + "DataViewState": { + "description": "Defines current inline state in DataView component.", + "relatedProp": "", + "props": [ + { + "name": "first", + "optional": false, + "readonly": false, + "type": "number", + "description": "Current index of first record as a number." + }, + { + "name": "rows", + "optional": false, + "readonly": false, + "type": "number", + "description": "Current number of rows to display in new page as a number." + } + ], + "callbacks": [] + }, + "DataViewLayoutOptionsPassThroughOptions": { + "description": "Custom passthrough(pt) options.", + "relatedProp": "DataViewLayoutOptionsProps.pt", + "props": [ + { + "name": "root", + "optional": true, + "readonly": false, + "type": "DataViewLayoutOptionsPassThroughType>", + "description": "Uses to pass attributes to the root's DOM element." + }, + { + "name": "listButton", + "optional": true, + "readonly": false, + "type": "DataViewLayoutOptionsPassThroughType>", + "description": "Uses to pass attributes to the list button's DOM element." + }, + { + "name": "listIcon", + "optional": true, + "readonly": false, + "type": "DataViewLayoutOptionsPassThroughType | SVGProps>", + "description": "Uses to pass attributes to the list icon's DOM element." + }, + { + "name": "gridButton", + "optional": true, + "readonly": false, + "type": "DataViewLayoutOptionsPassThroughType>", + "description": "Uses to pass attributes to the grid button's DOM element." + }, + { + "name": "gridIcon", + "optional": true, + "readonly": false, + "type": "DataViewLayoutOptionsPassThroughType | SVGProps>", + "description": "Uses to pass attributes to the grid icon's DOM element." + } + ], + "callbacks": [] + }, "DataViewLayoutOptionsChangeEvent": { "description": "Custom data view layout options event.", "relatedProp": "", @@ -15239,6 +15995,17 @@ ] } } + }, + "types": { + "description": "Defines the custom types used by the module.", + "values": { + "DataViewPassThroughType": { + "values": "PassThroughType" + }, + "DataViewLayoutOptionsPassThroughType": { + "values": "PassThroughType" + } + } } }, "deferredcontent": { @@ -17180,6 +17947,13 @@ "readonly": false, "type": "DropdownPassThroughType>", "description": "Uses to pass attributes to the option's DOM element." + }, + { + "name": "tooltip", + "optional": true, + "readonly": false, + "type": "TooltipPassThroughOptions", + "description": "Uses to pass attributes tooltip's DOM element." } ], "callbacks": [] @@ -23712,6 +24486,13 @@ "readonly": false, "type": "InputNumberPassThroughType>", "description": "Uses to pass attributes to the decrement button's DOM element." + }, + { + "name": "tooltip", + "optional": true, + "readonly": false, + "type": "TooltipPassThroughOptions", + "description": "Uses to pass attributes tooltip's DOM element." } ], "callbacks": [] @@ -34136,6 +34917,14 @@ "type": "ReactNode", "default": "", "description": "Used to get the child elements of the component." + }, + { + "name": "pt", + "optional": true, + "readonly": false, + "type": "RowPassThroughOptions", + "default": "", + "description": "Uses to pass attributes to DOM elements inside the component." } ] }, @@ -34144,6 +34933,52 @@ "values": [] } } + }, + "interfaces": { + "description": "Defines the custom interfaces used by the module.", + "values": { + "RowPassThroughMethodOptions": { + "description": "Custom passthrough(pt) option method.", + "relatedProp": "", + "props": [ + { + "name": "props", + "optional": false, + "readonly": false, + "type": "RowProps" + }, + { + "name": "parent", + "optional": false, + "readonly": false, + "type": "ColumnGroupPassThroughOptions" + } + ], + "callbacks": [] + }, + "RowPassThroughOptions": { + "description": "Custom passthrough(pt) options.", + "relatedProp": "pt", + "props": [ + { + "name": "root", + "optional": true, + "readonly": false, + "type": "RowPassThroughType>", + "description": "Uses to pass attributes to the root's DOM element." + } + ], + "callbacks": [] + } + } + }, + "types": { + "description": "Defines the custom types used by the module.", + "values": { + "RowPassThroughType": { + "values": "PassThroughType" + } + } } }, "scrollpanel": { @@ -42978,7 +43813,7 @@ "name": "globalFilterMatchMode", "optional": true, "readonly": false, - "type": "\"endsWith\" | \"startsWith\" | \"custom\" | \"contains\" | \"in\" | \"equals\" | \"notEquals\" | \"lt\" | \"lte\" | \"gt\" | \"gte\" | \"notContains\" | \"between\" | \"dateIs\" | \"dateIsNot\" | \"dateBefore\" | \"dateAfter\"", + "type": "\"endsWith\" | \"startsWith\" | \"custom\" | \"contains\" | \"in\" | \"equals\" | \"notEquals\" | \"notContains\" | \"lt\" | \"lte\" | \"gt\" | \"gte\" | \"between\" | \"dateIs\" | \"dateIsNot\" | \"dateBefore\" | \"dateAfter\"", "default": "contains", "description": "Defines filterMatchMode; \"startsWith\", \"contains\", \"endsWith\", \"equals\", \"notEquals\", \"in\", \"lt\", \"lte\", \"gt\", \"gte\" and \"custom\"." }, diff --git a/components/doc/datatable/pt/ptdoc.js b/components/doc/datatable/pt/ptdoc.js new file mode 100644 index 0000000000..c90e079df9 --- /dev/null +++ b/components/doc/datatable/pt/ptdoc.js @@ -0,0 +1,268 @@ +import { useEffect, useState } from 'react'; +import { ProductService } from '../../../../service/ProductService'; +import { Column } from '../../../lib/column/Column'; +import { DataTable } from '../../../lib/datatable/DataTable'; +import { DocSectionCode } from '../../common/docsectioncode'; +import { DocSectionText } from '../../common/docsectiontext'; + +export function PTDoc(props) { + const [products, setProducts] = useState([]); + + useEffect(() => { + ProductService.getProductsMini().then((data) => setProducts(data)); + }, []); // eslint-disable-line react-hooks/exhaustive-deps + + const code = { + basic: ` + + + + + + + `, + javascript: ` +import React, { useState, useEffect } from 'react'; +import { DataTable } from 'primereact/datatable'; +import { Column } from 'primereact/column'; +import { ProductService } from './service/ProductService'; + +export default function PTDemo() { + const [products, setProducts] = useState([]); + + useEffect(() => { + ProductService.getProductsMini().then(data => setProducts(data)); + }, []); + + return ( + + + + + + + + ); +} + `, + typescript: ` +import React, { useState, useEffect } from 'react'; +import { DataTable } from 'primereact/datatable'; +import { Column } from 'primereact/column'; +import { ProductService } from './service/ProductService'; + +interface Product { + id: string; + code: string; + name: string; + description: string; + image: string; + price: number; + category: string; + quantity: number; + inventoryStatus: string; + rating: number; +} + +export default function PTDemo() { + const [products, setProducts] = useState([]); + + useEffect(() => { + ProductService.getProductsMini().then(data => setProducts(data)); + }, []); + + return ( + + + + + + + + ); +} + `, + data: ` +{ + id: '1000', + code: 'f230fh0g3', + name: 'Bamboo Watch', + description: 'Product Description', + image: 'bamboo-watch.jpg', + price: 65, + category: 'Accessories', + quantity: 24, + inventoryStatus: 'INSTOCK', + rating: 5 +}, +... + ` + }; + + return ( + <> + +
+ + + + + + +
+ + + ); +} diff --git a/components/doc/datatable/pt/wireframe.js b/components/doc/datatable/pt/wireframe.js new file mode 100644 index 0000000000..2d96e8bc3d --- /dev/null +++ b/components/doc/datatable/pt/wireframe.js @@ -0,0 +1,13 @@ +import React from 'react'; +import { DocSectionText } from '../../common/docsectiontext'; + +export const Wireframe = (props) => { + return ( + <> + +
+ datatable +
+ + ); +}; diff --git a/components/doc/dataview/pt/ptdoc.js b/components/doc/dataview/pt/ptdoc.js new file mode 100644 index 0000000000..b1b13d15bf --- /dev/null +++ b/components/doc/dataview/pt/ptdoc.js @@ -0,0 +1,417 @@ +import React, { useEffect, useState } from 'react'; +import { ProductService } from '../../../../service/ProductService'; +import { Button } from '../../../lib/button/Button'; +import { DataView } from '../../../lib/dataview/DataView'; +import { Rating } from '../../../lib/rating/Rating'; +import { Tag } from '../../../lib/tag/Tag'; +import { DocSectionCode } from '../../common/docsectioncode'; +import { DocSectionText } from '../../common/docsectiontext'; +import { DataViewLayoutOptions } from '../../../lib/dataview/DataView'; + +export function PTDoc(props) { + const [products, setProducts] = useState([]); + const [layout, setLayout] = useState('grid'); + + useEffect(() => { + ProductService.getProducts().then((data) => setProducts(data.slice(0, 6))); + }, []); // eslint-disable-line react-hooks/exhaustive-deps + + const getSeverity = (product) => { + switch (product.inventoryStatus) { + case 'INSTOCK': + return 'success'; + + case 'LOWSTOCK': + return 'warning'; + + case 'OUTOFSTOCK': + return 'danger'; + + default: + return null; + } + }; + + const listItem = (product) => { + return ( +
+
+ {product.name} +
+
+
{product.name}
+ +
+ + + {product.category} + + +
+
+
+ ${product.price} + +
+
+
+
+ ); + }; + + const gridItem = (product) => { + return ( +
+
+
+
+ + {product.category} +
+ +
+
+ {product.name} +
{product.name}
+ +
+
+ ${product.price} + +
+
+
+ ); + }; + + const itemTemplate = (product, layout) => { + if (!product) { + return; + } + + if (layout === 'list') return listItem(product); + else if (layout === 'grid') return gridItem(product); + }; + + const header = () => { + return ( +
+ setLayout(e.value)} + pt={{ + listButton: ({ props }) => ({ className: props.layout === 'list' ? 'bg-teal-400 border-teal-400' : 'undefined' }), + gridButton: ({ props }) => ({ className: props.layout === 'grid' ? 'bg-teal-400 border-teal-400' : 'undefined' }) + }} + /> +
+ ); + }; + + const code = { + basic: ` + + `, + javascript: ` +import React, { useState, useEffect } from 'react'; +import { ProductService } from './service/ProductService'; +import { Button } from 'primereact/button'; +import { DataView, DataViewLayoutOptions } from 'primereact/dataview'; +import { Rating } from 'primereact/rating'; +import { Tag } from 'primereact/tag'; + +export default function BasicDemo() { + const [products, setProducts] = useState([]); + const [layout, setLayout] = useState('grid'); + + useEffect(() => { + ProductService.getProducts().then((data) => setProducts(data.slice(0, 12))); + }, []); + + const getSeverity = (product) => { + switch (product.inventoryStatus) { + case 'INSTOCK': + return 'success'; + + case 'LOWSTOCK': + return 'warning'; + + case 'OUTOFSTOCK': + return 'danger'; + + default: + return null; + } + }; + + const listItem = (product) => { + return ( +
+
+ {product.name} +
+
+
{product.name}
+ +
+ + + {product.category} + + +
+
+
+ \${product.price} + +
+
+
+
+ ); + }; + + const gridItem = (product) => { + return ( +
+
+
+
+ + {product.category} +
+ +
+
+ {product.name} +
{product.name}
+ +
+
+ \${product.price} + +
+
+
+ ); + }; + + const itemTemplate = (product, layout) => { + if (!product) { + return; + } + + if (layout === 'list') return listItem(product); + else if (layout === 'grid') return gridItem(product); + }; + + const header = () => { + return ( +
+ setLayout(e.value)} + pt={{ + listButton: ({ props }) => ({ className: props.layout === 'list' ? 'bg-teal-400 border-teal-400' : 'undefined' }), + gridButton: ({ props }) => ({ className: props.layout === 'grid' ? 'bg-teal-400 border-teal-400' : 'undefined' }) + }} + /> +
+ ); + }; + + return ( +
+ +
+ ) +} + `, + typescript: ` +import React, { useState, useEffect } from 'react'; +import { ProductService } from './service/ProductService'; +import { Button } from 'primereact/button'; +import { DataView, DataViewLayoutOptions } from 'primereact/dataview'; +import { Rating } from 'primereact/rating'; +import { Tag } from 'primereact/tag'; + +interface Product { + id: string; + code: string; + name: string; + description: string; + image: string; + price: number; + category: string; + quantity: number; + inventoryStatus: string; + rating: number; +} + +export default function BasicDemo() { + const [products, setProducts] = useState([]); + const [layout, setLayout] = useState('grid'); + + useEffect(() => { + ProductService.getProducts().then((data) => setProducts(data.slice(0, 12))); + }, []); + + const getSeverity = (product) => { + switch (product.inventoryStatus) { + case 'INSTOCK': + return 'success'; + + case 'LOWSTOCK': + return 'warning'; + + case 'OUTOFSTOCK': + return 'danger'; + + default: + return null; + } + }; + + const listItem = (product: Product) => { + return ( +
+
+ {product.name} +
+
+
{product.name}
+ +
+ + + {product.category} + + +
+
+
+ \${product.price} + +
+
+
+
+ ); + }; + + const gridItem = (product: Product) => { + return ( +
+
+
+
+ + {product.category} +
+ +
+
+ {product.name} +
{product.name}
+ +
+
+ \${product.price} + +
+
+
+ ); + }; + + const itemTemplate = (product: Product, layout: string) => { + if (!product) { + return; + } + + if (layout === 'list') return listItem(product); + else if (layout === 'grid') return gridItem(product); + }; + + const header = () => { + return ( +
+ setLayout(e.value)} + pt={{ + listButton: ({ props }) => ({ className: props.layout === 'list' ? 'bg-teal-400 border-teal-400' : 'undefined' }), + gridButton: ({ props }) => ({ className: props.layout === 'grid' ? 'bg-teal-400 border-teal-400' : 'undefined' }) + }} + /> +
+ ); + }; + + return ( +
+ +
+ ) +} + `, + data: ` +/* ProductService */ +{ + id: '1000', + code: 'f230fh0g3', + name: 'Bamboo Watch', + description: 'Product Description', + image: 'bamboo-watch.jpg', + price: 65, + category: 'Accessories', + quantity: 24, + inventoryStatus: 'INSTOCK', + rating: 5 +}, +... + ` + }; + + return ( + <> + +
+ +
+ + + ); +} diff --git a/components/doc/dataview/pt/wireframe.js b/components/doc/dataview/pt/wireframe.js new file mode 100644 index 0000000000..822aa05e4a --- /dev/null +++ b/components/doc/dataview/pt/wireframe.js @@ -0,0 +1,13 @@ +import React from 'react'; +import { DocSectionText } from '../../common/docsectiontext'; + +export const Wireframe = (props) => { + return ( + <> + +
+ dataview +
+ + ); +}; diff --git a/components/doc/dropdown/pt/ptdoc.js b/components/doc/dropdown/pt/ptdoc.js index e89fabf513..b832dfa381 100644 --- a/components/doc/dropdown/pt/ptdoc.js +++ b/components/doc/dropdown/pt/ptdoc.js @@ -21,7 +21,6 @@ export function PTDoc(props) { options={cities} optionLabel="name" placeholder="Select a City" - className="w-full md:w-14rem" pt={{ root: { className: 'w-full md:w-14rem' }, item: ({ context }) => ({ @@ -52,7 +51,6 @@ export default function PTDemo() { options={cities} optionLabel="name" placeholder="Select a City" - className="w-full md:w-14rem" pt={{ root: { className: 'w-full md:w-14rem' }, item: ({ context }) => ({ @@ -91,7 +89,6 @@ export default function PTDemo() { options={cities} optionLabel="name" placeholder="Select a City" - className="w-full md:w-14rem" pt={{ root: { className: 'w-full md:w-14rem' }, item: ({ context }) => ({ @@ -115,7 +112,6 @@ export default function PTDemo() { options={cities} optionLabel="name" placeholder="Select a City" - className="w-full md:w-14rem" pt={{ root: { className: 'w-full md:w-14rem' }, item: ({ context }) => ({ diff --git a/components/doc/theming/primeflexdoc.js b/components/doc/theming/primeflexdoc.js index 1ea7e72096..c8832c2766 100644 --- a/components/doc/theming/primeflexdoc.js +++ b/components/doc/theming/primeflexdoc.js @@ -17,10 +17,9 @@ export function PrimeFlexDoc(props) { <>

- PrimeFlex is a lightweight responsive CSS utility library to accompany Prime UI libraries and static webpages as well. PrimeReact can be used with any CSS utility library like - bootstrap and tailwind however PrimeFlex has benefits like integration with PrimeReact themes usign CSS variables so that colors classes e.g. bg-blue-500 receive the color code from the PrimeReact theme being used. - PrimeReact follows the CSS utility approach of PrimeFlex and currently does not provide an extended style property like sx. Same approach is also utilized in{' '} - PrimeBlocks for PrimeReact project as well. + PrimeFlex is a lightweight responsive CSS utility library to accompany Prime UI libraries and static webpages as well. PrimeReact can be used with any CSS utility library like bootstrap and + tailwind however PrimeFlex has benefits like integration with PrimeReact themes usign CSS variables so that colors classes e.g. bg-blue-500 receive the color code from the PrimeReact theme being used. PrimeReact follows the + CSS utility approach of PrimeFlex and currently does not provide an extended style property like sx. Same approach is also utilized in PrimeBlocks for PrimeReact project as well.

Here is an example to demonstrate how to align 3 buttons horizontally on bigger screens and display them as stacked on smaller ones.

diff --git a/components/layout/menu.json b/components/layout/menu.json index c19ac42d4e..58fa2e3d80 100644 --- a/components/layout/menu.json +++ b/components/layout/menu.json @@ -597,7 +597,7 @@ { "name": "PrimeFlex CSS", "icon": "pi pi-table", - "href": "https://www.primefaces.org/primeflex" + "href": "https://primeflex.org" }, { "name": "Support", diff --git a/components/lib/button/Button.js b/components/lib/button/Button.js index cf0813928e..aa5e69d7b7 100644 --- a/components/lib/button/Button.js +++ b/components/lib/button/Button.js @@ -132,7 +132,7 @@ export const Button = React.memo( {badge} - {hasTooltip && } + {hasTooltip && } ); }) diff --git a/components/lib/button/button.d.ts b/components/lib/button/button.d.ts index a96678b1b4..ec9f0a099e 100644 --- a/components/lib/button/button.d.ts +++ b/components/lib/button/button.d.ts @@ -8,6 +8,7 @@ * */ import * as React from 'react'; +import { TooltipPassThroughOptions } from '../tooltip/tooltip'; import { TooltipOptions } from '../tooltip/tooltipoptions'; import { IconType, PassThroughType } from '../utils'; @@ -45,6 +46,11 @@ export interface ButtonPassThroughOptions { * Uses to pass attributes to the badge's DOM element. */ badge?: ButtonPassThroughType>; + /** + * Uses to pass attributes to the Tooltip component. + * @see {@link TooltipPassThroughOptions} + */ + tooltip?: TooltipPassThroughOptions; } /** diff --git a/components/lib/column/Column.js b/components/lib/column/Column.js index eb1ff7407f..0c8d1256f0 100644 --- a/components/lib/column/Column.js +++ b/components/lib/column/Column.js @@ -1,3 +1,4 @@ export const Column = () => {}; +//@todo Pass Parent MetaData Column.displayName = 'Column'; diff --git a/components/lib/column/ColumnBase.js b/components/lib/column/ColumnBase.js index 0924ff27df..3290702847 100644 --- a/components/lib/column/ColumnBase.js +++ b/components/lib/column/ColumnBase.js @@ -1,6 +1,7 @@ +import { ComponentBase } from '../componentbase/ComponentBase'; import { ObjectUtils } from '../utils/Utils'; -export const ColumnBase = { +export const ColumnBase = ComponentBase.extend({ defaultProps: { __TYPE: 'Column', align: null, @@ -84,4 +85,4 @@ export const ColumnBase = { getCProp: (column, name) => ObjectUtils.getComponentProp(column, name, ColumnBase.defaultProps), getCProps: (column) => ObjectUtils.getComponentProps(column, ColumnBase.defaultProps), getCOtherProps: (column) => ObjectUtils.getComponentDiffProps(column, ColumnBase.defaultProps) -}; +}); diff --git a/components/lib/column/column.d.ts b/components/lib/column/column.d.ts index 664fd32567..bd2ac02436 100644 --- a/components/lib/column/column.d.ts +++ b/components/lib/column/column.d.ts @@ -10,7 +10,299 @@ */ import * as React from 'react'; import { TooltipOptions } from '../tooltip/tooltipoptions'; -import { IconType } from '../utils/utils'; +import { IconType, PassThroughType } from '../utils/utils'; +import { DataTablePassThroughOptions } from '../datatable/datatable'; +import { DropdownPassThroughOptions } from '../dropdown/dropdown'; +import { ButtonPassThroughOptions } from '../button/button'; + +export declare type ColumnPassThroughType = PassThroughType; + +/** + * Custom passthrough(pt) option method. + */ +export interface ColumnPassThroughMethodOptions { + props: ColumnProps; + state: ColumnState; + context: ColumnContext; + parent: DataTablePassThroughOptions; +} + +/** + * Defines current options in Column component. + */ +export interface ColumnContext { + /** + * Current checked state of row as a boolean. + * @defaultValue false + */ + checked: boolean; + /** + * Current disabled state of row as a boolean. + * @defaultValue false + */ + disabled: boolean; +} + +/** + * Defines current inline state in Column component. + */ +export interface ColumnState { + /** + * Current editing state of the body cell. + */ + editing: boolean; + /** + * Current editing row data of the body cell. + */ + editingRowData: any; + /** + * Current style of the body cell. + */ + styleObject: object; + /** + * Current focused state as a boolean. + * @defaultValue false + */ + focused: boolean; + /** + * Current style of the rowgroup header. + */ + rowGroupHeaderStyleObject: object; + /** + * Current sortable disabled fields of the table header. + */ + sortableDisabledFields: any[]; + /** + * Current style of the table header. + * @defaultValue false + */ + allSortableDisabled: boolean; +} + +/** + * Custom passthrough(pt) options. + * @see {@link ColumnProps.pt} + */ +export interface ColumnPassThroughOptions { + /** + * Uses to pass attributes to the root's DOM element. + */ + root?: ColumnPassThroughType>; + /** + * Uses to pass attributes to the header cell's DOM element. + */ + headerCell?: ColumnPassThroughType>; + /** + * Uses to pass attributes to the column resizer's DOM element. + */ + columnResizer?: ColumnPassThroughType>; + /** + * Uses to pass attributes to the header content's DOM element. + */ + headerContent?: ColumnPassThroughType>; + /** + * Uses to pass attributes to the header title's DOM element. + */ + headerTitle?: ColumnPassThroughType>; + /** + * Uses to pass attributes to the sort's DOM element. + */ + sort?: ColumnPassThroughType>; + /** + * Uses to pass attributes to the sort's DOM element. + */ + sortIcon?: ColumnPassThroughType | React.HTMLAttributes>; + /** + * Uses to pass attributes to the sort badge's DOM element. + */ + sortBadge?: ColumnPassThroughType>; + /** + * Uses to pass attributes to the checkbox wrapper's DOM element. + */ + headerCheckboxWrapper?: ColumnPassThroughType>; + /** + * Uses to pass attributes to the header checkbox's DOM element. + */ + headerCheckbox?: ColumnPassThroughType>; + /** + * Uses to pass attributes to the header checkbox icon's DOM element. + */ + headerCheckboxIcon?: ColumnPassThroughType | React.HTMLAttributes>; + /** + * Uses to pass attributes to the column filter's DOM element. + */ + columnFilter?: ColumnPassThroughType>; + /** + * Uses to pass attributes to the filter input's DOM element. + */ + filterInput?: ColumnPassThroughType>; + /** + * Uses to pass attributes to the filter menu button's DOM element. + */ + filterMenuButton?: ColumnPassThroughType>; + /** + * Uses to pass attributes to the header filter clear button's DOM element. + */ + headerFilterClearButton?: ColumnPassThroughType>; + /** + * Uses to pass attributes to the filter clear icon's DOM element. + */ + filterClearIcon?: ColumnPassThroughType | React.HTMLAttributes>; + /** + * Uses to pass attributes to the filter overlay's DOM element. + */ + filterOverlay?: ColumnPassThroughType>; + /** + * Uses to pass attributes to the filter row items' DOM element. + */ + filterRowItems?: ColumnPassThroughType>; + /** + * Uses to pass attributes to the filter row item's DOM element. + */ + filterRowItem?: ColumnPassThroughType>; + /** + * Uses to pass attributes to the filter separator's DOM element. + */ + filterSeparator?: ColumnPassThroughType>; + /** + * Uses to pass attributes to the filter operator's DOM element. + */ + filterOperator?: ColumnPassThroughType>; + /** + * Uses to pass attributes to the Dropdown component. + * @see {@link DropdownPassThroughOptions} + */ + filterOperatorDropdown?: DropdownPassThroughOptions; + /** + * Uses to pass attributes to the filter constraints' DOM element. + */ + filterConstraints?: ColumnPassThroughType>; + /** + * Uses to pass attributes to the filter constraint's DOM element. + */ + filterConstraint?: ColumnPassThroughType>; + /** + * Uses to pass attributes to the Dropdown component. + * @see {@link DropdownPassThroughOptions} + */ + filterMatchModeDropdown?: DropdownPassThroughOptions; + /** + * Uses to pass attributes to the filter remove button container's DOM element. + */ + filterRemove?: ColumnPassThroughType>; + /** + * Uses to pass attributes to the Button component. + * @see {@link DropdownPassThroughOptions} + */ + filterRemoveButton?: DropdownPassThroughOptions; + /** + * Uses to pass attributes to the filter add rule's DOM element. + */ + filterAddRule?: ColumnPassThroughType>; + /** + * Uses to pass attributes to the Button component. + * @see {@link DropdownPassThroughOptions} + */ + filterAddRuleButton?: DropdownPassThroughOptions; + /** + * Uses to pass attributes to the filter buttonbar's DOM element. + */ + filterButtonbar?: ColumnPassThroughType>; + /** + * Uses to pass attributes to the Button component. + * @see {@link ButtonPassThroughOptions} + */ + filterClearButton?: ButtonPassThroughOptions; + /** + * Uses to pass attributes to the Button component. + * @see {@link ButtonPassThroughOptions} + */ + filterApplyButton?: ButtonPassThroughOptions; + /** + * Uses to pass attributes to the body cell's DOM element. + */ + bodyCell?: ColumnPassThroughType>; + /** + * Uses to pass attributes to the rowgroup toggler's DOM element. + */ + rowGroupToggler?: ColumnPassThroughType>; + /** + * Uses to pass attributes to the rowgroup toggler icon's DOM element. + */ + rowGroupTogglerIcon?: ColumnPassThroughType>; + /** + * Uses to pass attributes to the column title's DOM element. + */ + columnTitle?: ColumnPassThroughType>; + /** + * Uses to pass attributes to the radiobutton wrapper's DOM element. + */ + radiobuttonWrapper?: ColumnPassThroughType>; + /** + * Uses to pass attributes to the radiobutton's DOM element. + */ + radiobutton?: ColumnPassThroughType>; + /** + * Uses to pass attributes to the radiobutton icon's DOM element. + */ + radiobuttonIcon?: ColumnPassThroughType>; + /** + * Uses to pass attributes to the checkbox wrapper's DOM element. + */ + checkboxWrapper?: ColumnPassThroughType>; + /** + * Uses to pass attributes to the checkbox's DOM element. + */ + checkbox?: ColumnPassThroughType>; + /** + * Uses to pass attributes to the checkbox icon's DOM element. + */ + checkboxIcon?: ColumnPassThroughType | React.HTMLAttributes>; + /** + * Uses to pass attributes to the rowtoggler's DOM element. + */ + rowToggler?: ColumnPassThroughType>; + /** + * Uses to pass attributes to the rowtoggler icon's DOM element. + */ + rowTogglerIcon?: ColumnPassThroughType | React.HTMLAttributes>; + /** + * Uses to pass attributes to the row editor init button's DOM element. + */ + rowEditorInitButton?: ColumnPassThroughType>; + /** + * Uses to pass attributes to the row editor init icon's DOM element. + */ + rowEditorInitIcon?: ColumnPassThroughType | React.HTMLAttributes>; + /** + * Uses to pass attributes to the row editor edit button's DOM element. + */ + rowEditorEditButton?: ColumnPassThroughType>; + /** + * Uses to pass attributes to the row editor edit icon's DOM element. + */ + rowEditorEditIcon?: ColumnPassThroughType | React.HTMLAttributes>; + /** + * Uses to pass attributes to the row editor cancel button's DOM element. + */ + rowEditorCancelButton?: ColumnPassThroughType>; + /** + * Uses to pass attributes to the row editor cancel icon's DOM element. + */ + rowEditorCancelIcon?: ColumnPassThroughType | React.HTMLAttributes>; + /** + * Uses to pass attributes to the hidden input wrapper's DOM element. + */ + hiddenHeaderInputWrapper?: ColumnPassThroughType>; + /** + * Uses to pass attributes to the hidden input wrapper's DOM element. + */ + hiddenInputWrapper?: ColumnPassThroughType>; + /** + * Uses to pass attributes to the hidden input's DOM element. + */ + hiddenInput?: ColumnPassThroughType>; +} interface ColumnHeaderOptions { /** @@ -507,6 +799,11 @@ export interface ColumnProps { * @readonly */ children?: React.ReactNode | undefined; + /** + * Uses to pass attributes to DOM elements inside the component. + * @type {ColumnPassThroughOptions} + */ + pt?: ColumnPassThroughOptions; /** * Style class of the component. */ diff --git a/components/lib/columngroup/ColumnGroupBase.js b/components/lib/columngroup/ColumnGroupBase.js index 54cc9787c8..0e6ea614bc 100644 --- a/components/lib/columngroup/ColumnGroupBase.js +++ b/components/lib/columngroup/ColumnGroupBase.js @@ -1,10 +1,11 @@ +import { ComponentBase } from '../componentbase/ComponentBase'; import { ObjectUtils } from '../utils/Utils'; -export const ColumnGroupBase = { +export const ColumnGroupBase = ComponentBase.extend({ defaultProps: { __TYPE: 'ColumnGroup', children: undefined }, getCProp: (group, name) => ObjectUtils.getComponentProp(group, name, ColumnGroupBase.defaultProps), getCProps: (group) => ObjectUtils.getComponentProps(group, ColumnGroupBase.defaultProps) -}; +}); diff --git a/components/lib/columngroup/columngroup.d.ts b/components/lib/columngroup/columngroup.d.ts index 229e24e44c..a425842663 100644 --- a/components/lib/columngroup/columngroup.d.ts +++ b/components/lib/columngroup/columngroup.d.ts @@ -9,6 +9,29 @@ * */ import * as React from 'react'; +import { DataTablePassThroughOptions } from '../datatable/datatable'; +import { PassThroughType } from '../utils/utils'; + +export declare type ColumnGroupPassThroughType = PassThroughType; + +/** + * Custom passthrough(pt) option method. + */ +export interface ColumnGroupPassThroughMethodOptions { + props: ColumnGroupProps; + parent: DataTablePassThroughOptions; +} + +/** + * Custom passthrough(pt) options. + * @see {@link ColumnGroupProps.pt} + */ +export interface ColumnGroupPassThroughOptions { + /** + * Uses to pass attributes to the root's DOM element. + */ + root?: ColumnGroupPassThroughType>; +} /** * Defines valid properties in ColumnGroup component. @@ -21,6 +44,11 @@ export interface ColumnGroupProps { * @readonly */ children?: React.ReactNode | undefined; + /** + * Uses to pass attributes to DOM elements inside the component. + * @type {ColumnGroupPassThroughOptions} + */ + pt?: ColumnGroupPassThroughOptions; } /** diff --git a/components/lib/datatable/BodyCell.js b/components/lib/datatable/BodyCell.js index 5e86b72ed9..f1a2351478 100644 --- a/components/lib/datatable/BodyCell.js +++ b/components/lib/datatable/BodyCell.js @@ -10,7 +10,7 @@ import { PencilIcon } from '../icons/pencil'; import { TimesIcon } from '../icons/times'; import { OverlayService } from '../overlayservice/OverlayService'; import { Ripple } from '../ripple/Ripple'; -import { DomHandler, IconUtils, ObjectUtils, classNames } from '../utils/Utils'; +import { DomHandler, IconUtils, ObjectUtils, classNames, mergeProps } from '../utils/Utils'; import { RowCheckbox } from './RowCheckbox'; import { RowRadioButton } from './RowRadioButton'; @@ -26,6 +26,22 @@ export const BodyCell = React.memo((props) => { const initFocusTimeout = React.useRef(null); const getColumnProp = (name) => ColumnBase.getCProp(props.column, name); + const getColumnProps = (column) => ColumnBase.getCProps(column); + + const getColumnPTOptions = (key) => { + const cProps = getColumnProps(props.column); + + return props.ptCallbacks.ptmo(getColumnProp('pt'), key, { + props: cProps, + parent: props.metaData, + state: { + styleObject: styleObjectState, + editing: editingState, + editingRowData: editingRowDataState + } + }); + }; + const field = getColumnProp('field') || `field_${props.index}`; const editingKey = props.dataKey ? (props.rowData && props.rowData[props.dataKey]) || props.rowIndex : props.rowIndex; @@ -517,8 +533,9 @@ export const BodyCell = React.memo((props) => { field: field }); const content = ObjectUtils.getJSXElement(getVirtualScrollerOption('loadingTemplate'), options); + const bodyCellProps = mergeProps(getColumnPTOptions('bodyCell')); - return {content}; + return {content}; }; const createElement = () => { @@ -549,7 +566,14 @@ export const BodyCell = React.memo((props) => { [`p-align-${align}`]: !!align }); const style = getStyle(); - const title = props.responsiveLayout === 'stack' && {ObjectUtils.getJSXElement(header, { props: props.tableProps })}; + const columnTitleProps = mergeProps( + { + className: 'p-column-title' + }, + getColumnProp('columnTitle') + ); + + const title = props.responsiveLayout === 'stack' && {ObjectUtils.getJSXElement(header, { props: props.tableProps })}; if (selectionMode) { const showSelection = props.showSelectionElement ? props.showSelectionElement(props.rowData, { rowIndex: props.rowIndex, props: props.tableProps }) : true; @@ -564,20 +588,36 @@ export const BodyCell = React.memo((props) => { content = showSelection && ( <> - {selectionMode === 'single' && } - {selectionMode === 'multiple' && } + {selectionMode === 'single' && ( + + )} + {selectionMode === 'multiple' && ( + + )} ); } else if (rowReorder) { const showReorder = props.showRowReorderElement ? props.showRowReorderElement(props.rowData, { rowIndex: props.rowIndex, props: props.tableProps }) : true; const rowReorderIconClassName = 'p-datatable-reorderablerow-handle'; - const rowReorderIcon = getColumnProp('rowReorderIcon') || ; + const rowReorderIconProps = mergeProps( + { + className: rowReorderIconClassName + }, + getColumnProp('rowReorderIcon') + ); + const rowReorderIcon = getColumnProp('rowReorderIcon') || ; - content = showReorder && IconUtils.getJSXIcon(rowReorderIcon, { className: rowReorderIconClassName }, { props }); + content = showReorder && IconUtils.getJSXIcon(rowReorderIcon, { ...rowReorderIconProps }, { props }); } else if (expander) { - const iconProps = { className: 'p-row-toggler-icon', 'aria-hidden': true }; - const icon = props.expanded ? props.expandedRowIcon || : props.collapsedRowIcon || ; - const togglerIcon = IconUtils.getJSXIcon(icon, { ...iconProps }, { props }); + const rowTogglerIconProps = mergeProps( + { + className: 'p-row-toggler-icon', + 'aria-hidden': true + }, + getColumnProp('rowTogglerIcon') + ); + const icon = props.expanded ? props.expandedRowIcon || : props.collapsedRowIcon || ; + const togglerIcon = IconUtils.getJSXIcon(icon, { ...rowTogglerIconProps }, { props }); const ariaControls = `${props.tableSelector}_content_${props.rowIndex}_expanded`; const ariaLabelField = props.selectionAriaLabel || props.tableProps.dataKey; const ariaLabelText = ObjectUtils.resolveFieldData(props.rowData, ariaLabelField); @@ -586,9 +626,20 @@ export const BodyCell = React.memo((props) => { onClick: onRowToggle, className: 'p-row-toggler p-link' }; + const rowTogglerProps = mergeProps( + { + ...expanderProps, + type: 'button', + 'aria-expanded': props.expanded, + 'aria-controls': ariaControls, + tabIndex: props.tabIndex, + 'aria-label': label + }, + getColumnPTOptions('rowToggler') + ); content = ( - @@ -603,9 +654,12 @@ export const BodyCell = React.memo((props) => { let rowEditorSaveIconClassName = 'p-row-editor-save-icon', rowEditorCancelIconClassName = 'p-row-editor-cancel-icon', rowEditorInitIconClassName = 'p-row-editor-init-icon'; - const rowEditorSaveIcon = IconUtils.getJSXIcon(props.rowEditorSaveIcon || , { className: rowEditorSaveIconClassName }, { props }); - const rowEditorCancelIcon = IconUtils.getJSXIcon(props.rowEditorCancelIcon || , { className: rowEditorCancelIconClassName }, { props }); - const rowEditorInitIcon = IconUtils.getJSXIcon(props.rowEditorInitIcon || , { className: rowEditorInitIconClassName }, { props }); + const rowEditorSaveIconProps = mergeProps({ className: rowEditorSaveIconClassName }, getColumnProp('rowEditorSaveIconProps')); + const rowEditorCancelIconProps = mergeProps({ className: rowEditorCancelIconClassName }, getColumnProp('rowEditorCancelIconProps')); + const rowEditorInitIconProps = mergeProps({ className: rowEditorInitIconClassName }, getColumnProp('rowEditorInitIconProps')); + const rowEditorSaveIcon = IconUtils.getJSXIcon(props.rowEditorSaveIcon || , { ...rowEditorSaveIconProps }, { props }); + const rowEditorCancelIcon = IconUtils.getJSXIcon(props.rowEditorCancelIcon || , { ...rowEditorCancelIconProps }, { props }); + const rowEditorInitIcon = IconUtils.getJSXIcon(props.rowEditorInitIcon || , { ...rowEditorInitIconProps }, { props }); if (editingState) { rowEditorProps = { @@ -616,13 +670,35 @@ export const BodyCell = React.memo((props) => { cancelClassName: 'p-row-editor-cancel p-link' }; + const rowEditorEditButtonProps = mergeProps( + { + type: 'button', + name: 'row-save', + onClick: rowEditorProps.onSaveClick, + className: rowEditorProps.saveClassName, + tabIndex: props.tabIndex + }, + getColumnPTOptions('rowEditorSaveButtonProps') + ); + + const rowEditorCancelButtonProps = mergeProps( + { + type: 'button', + name: 'row-cancel', + onClick: rowEditorProps.onCancelClick, + className: rowEditorProps.cancelClassName, + tabIndex: props.tabIndex + }, + getColumnPTOptions('rowEditorCancelButtonProps') + ); + content = ( <> - - @@ -635,8 +711,19 @@ export const BodyCell = React.memo((props) => { initClassName: 'p-row-editor-init p-link' }; + const rowEditorInitButtonProps = mergeProps( + { + type: 'button', + name: 'row-edit', + onClick: rowEditorProps.onInitClick, + className: rowEditorProps.initClassName, + tabIndex: props.tabIndex + }, + getColumnPTOptions('rowEditorInitButtonProps') + ); + content = ( - @@ -667,17 +754,46 @@ export const BodyCell = React.memo((props) => { content = typeof content == 'boolean' ? content.toString() : content; if (!isRowEditor && editor) { + const editorKeyHelperProps = mergeProps( + { + tabIndex: '0', + ref: keyHelperRef, + className: 'p-cell-editor-key-helper p-hidden-accessible', + onFocus: (e) => onEditorFocus(e) + }, + getColumnPTOptions('editorKeyHelperLabel') + ); + + const editorKeyHelperLabelProps = mergeProps(getColumnPTOptions('editorKeyHelper')); /* eslint-disable */ editorKeyHelper = ( - - + + ); /* eslint-enable */ } + const bodyCellProps = mergeProps( + { + ref: elementRef, + style, + className, + rowSpan: props.rowSpan, + tabIndex, + role: 'cell', + onClick: (e) => onClick(e), + onKeyDown: (e) => onKeyDown(e), + onBlur: (e) => onBlur(e), + onMouseDown: (e) => onMouseDown(e), + onMouseUp: (e) => onMouseUp(e) + }, + getColumnPTOptions('bodyCell'), + getColumnPTOptions('root') + ); + return ( - + {editorKeyHelper} {title} {content} diff --git a/components/lib/datatable/BodyRow.js b/components/lib/datatable/BodyRow.js index e3dde1f664..21062b4e13 100644 --- a/components/lib/datatable/BodyRow.js +++ b/components/lib/datatable/BodyRow.js @@ -1,11 +1,24 @@ import * as React from 'react'; import { ColumnBase } from '../column/ColumnBase'; -import { classNames, DomHandler, ObjectUtils } from '../utils/Utils'; +import { classNames, DomHandler, mergeProps, ObjectUtils } from '../utils/Utils'; import { BodyCell } from './BodyCell'; export const BodyRow = React.memo((props) => { const [editingState, setEditingState] = React.useState(false); const editing = props.onRowEditChange ? props.editing : editingState; + const getColumnProps = (column) => ColumnBase.getCProps(column); + + const getColumnPTOptions = (key) => { + const cProps = getColumnProps(props.column); + + return props.ptCallbacks.ptmo(cProps, key, { + props: cProps, + parent: props.metaData, + state: { + editing: editingState + } + }); + }; const getColumnProp = (column, name) => ColumnBase.getCProp(column, name); @@ -347,6 +360,8 @@ export const BodyRow = React.memo((props) => { tableSelector={props.tableSelector} value={props.value} virtualScrollerOptions={props.virtualScrollerOptions} + ptCallbacks={props.ptCallbacks} + metaData={props.metaData} /> ); } @@ -365,31 +380,31 @@ export const BodyRow = React.memo((props) => { const style = { height: props.virtualScrollerOptions ? props.virtualScrollerOptions.itemSize : undefined }; const content = createContent(); const tabIndex = getTabIndex(); - - return ( - - {content} - + const rowProps = mergeProps( + { + role: 'row', + tabIndex: tabIndex, + className: className, + style: style, + onMouseDown: (e) => onMouseDown(e), + onMouseUp: (e) => onMouseUp(e), + onMouseEnter: (e) => onMouseEnter(e), + onMouseLeave: (e) => onMouseLeave(e), + onClick: (e) => onClick(e), + onDoubleClick: (e) => onDoubleClick(e), + onContextMenu: (e) => onRightClick(e), + onTouchEnd: (e) => onTouchEnd(e), + onKeyDown: (e) => onKeyDown(e), + onDragStart: (e) => onDragStart(e), + onDragOver: (e) => onDragOver(e), + onDragLeave: (e) => onDragLeave(e), + onDragEnd: (e) => onDragEnd(e), + onDrop: (e) => onDrop(e) + }, + getColumnPTOptions('row') ); + + return {content}; }); BodyRow.displayName = 'BodyRow'; diff --git a/components/lib/datatable/ColumnFilter.js b/components/lib/datatable/ColumnFilter.js index ac391c0154..aa1e52e87b 100644 --- a/components/lib/datatable/ColumnFilter.js +++ b/components/lib/datatable/ColumnFilter.js @@ -21,16 +21,15 @@ export const ColumnFilter = React.memo((props) => { const iconRef = React.useRef(null); const selfClick = React.useRef(false); const overlayEventListener = React.useRef(null); - const ptm = props.ptm; const getColumnProp = (name) => ColumnBase.getCProp(props.column, name); const getColumnProps = () => ColumnBase.getCProps(props.column); const getColumnPTOptions = (key) => { - return props.ptmo(getColumnProps(), key, { - props, - parent: { - props: this.$props, - state: this.$data + return props.ptCallbacks.ptmo(getColumnProps(), key, { + props: getColumnProps(), + parent: props.metaData, + state: { + overlayVisible: overlayVisibleState } }); }; @@ -505,7 +504,7 @@ export const ColumnFilter = React.memo((props) => { { 'aria-hidden': true }, - ptm('filterIcon') + getColumnPTOptions('filterIcon') ); const icon = props.filterIcon || ; const columnFilterIcon = IconUtils.getJSXIcon(icon, { ...filterIconProps }, { props }); @@ -526,7 +525,7 @@ export const ColumnFilter = React.memo((props) => { onKeyDown: (e) => onToggleButtonKeyDown(e), 'aria-label': label }, - ptm('filterMenuButton') + getColumnPTOptions('filterMenuButton') ); return ( @@ -545,7 +544,7 @@ export const ColumnFilter = React.memo((props) => { { 'aria-hidden': true }, - ptm('filterClearIcon') + getColumnPTOptions('filterClearIcon') ); const icon = props.filterClearIcon || ; const filterClearIcon = IconUtils.getJSXIcon(icon, { ...filterClearIconProps }, { props }); @@ -555,18 +554,18 @@ export const ColumnFilter = React.memo((props) => { 'p-hidden-space': !hasRowFilter() }); const clearLabel = clearButtonLabel(); - const filterMenuButtonProps = mergeProps( + const headerFilterClearButtonProps = mergeProps( { className, type: 'button', onClick: (e) => clearFilter(e), 'aria-label': clearLabel }, - ptm('filterClearButton') + getColumnPTOptions('headerFilterClearButton') ); return ( - @@ -584,7 +583,7 @@ export const ColumnFilter = React.memo((props) => { { className: 'p-column-filter-separator' }, - ptm('filterSeparator') + getColumnPTOptions('filterSeparator') ); const filterRowItemProps = mergeProps( @@ -593,14 +592,14 @@ export const ColumnFilter = React.memo((props) => { onClick: (e) => clearFilter(e), onKeyDown: (e) => onRowMatchModeKeyDown(e, null, true) }, - ptm('filterRowItem') + getColumnPTOptions('filterRowItem') ); const filterRowItemsProps = mergeProps( { className: 'p-column-filter-row-items' }, - ptm('filterRowItems') + getColumnPTOptions('filterRowItems') ); return ( @@ -616,7 +615,7 @@ export const ColumnFilter = React.memo((props) => { onKeyDown: (e) => onRowMatchModeKeyDown(e, matchMode), tabIndex }, - ptm('filterRowItem') + getColumnPTOptions('filterRowItem') ); return ( @@ -642,12 +641,12 @@ export const ColumnFilter = React.memo((props) => { { className: 'p-column-filter-operator' }, - ptm('filterOperator') + getColumnPTOptions('filterOperator') ); return (
- +
); } @@ -659,7 +658,7 @@ export const ColumnFilter = React.memo((props) => { if (isShowMatchModes()) { const options = matchModes(); - return onMenuMatchModeChange(e.value, index)} className="p-column-filter-matchmode-dropdown" pt={ptm('filterMatchModeDropdown')} />; + return onMenuMatchModeChange(e.value, index)} className="p-column-filter-matchmode-dropdown" pt={getColumnPTOptions('filterMatchModeDropdown')} />; } return null; @@ -676,7 +675,7 @@ export const ColumnFilter = React.memo((props) => { className="p-column-filter-remove-button p-button-text p-button-danger p-button-sm" onClick={() => removeConstraint(index)} label={removeRuleLabel} - pt={ptm('filterRemoveButton')} + pt={getColumnPTOptions('filterRemoveButton')} /> ); } @@ -690,14 +689,14 @@ export const ColumnFilter = React.memo((props) => { { className: 'p-column-filter-constraints' }, - ptm('filterConstraints') + getColumnPTOptions('filterConstraints') ); const filterConstraintProps = mergeProps( { className: 'p-column-filter-constraint' }, - ptm('filterConstraint') + getColumnPTOptions('filterConstraint') ); return ( @@ -706,12 +705,13 @@ export const ColumnFilter = React.memo((props) => { const matchModeDropdown = createMatchModeDropdown(fieldConstraint, i); const menuFilterElement = createMenuFilterElement(fieldConstraint, i); const removeButton = createRemoveButton(i); + const filterRemoveProps = mergeProps(getColumnPTOptions('filterRemove')); return (
{matchModeDropdown} {menuFilterElement} -
{removeButton}
+
{removeButton}
); })} @@ -722,10 +722,16 @@ export const ColumnFilter = React.memo((props) => { const createAddRule = () => { if (isShowAddConstraint()) { const addRuleLabel = addRuleButtonLabel(); + const filterAddRuleProps = mergeProps( + { + className: 'p-column-filter-add-rule' + }, + getColumnPTOptions('filterAddRule') + ); return ( -
-
); } @@ -738,7 +744,7 @@ export const ColumnFilter = React.memo((props) => { if (!getColumnProp('filterClear')) { const clearLabel = clearButtonLabel(); - return diff --git a/components/lib/datatable/TableBody.js b/components/lib/datatable/TableBody.js index d16d69dc33..cfba0d75d0 100644 --- a/components/lib/datatable/TableBody.js +++ b/components/lib/datatable/TableBody.js @@ -2,13 +2,27 @@ import * as React from 'react'; import { localeOption } from '../api/Api'; import { ColumnBase } from '../column/ColumnBase'; import { useUnmountEffect, useUpdateEffect } from '../hooks/Hooks'; -import { DomHandler, ObjectUtils } from '../utils/Utils'; +import { DomHandler, ObjectUtils, mergeProps } from '../utils/Utils'; import { BodyRow } from './BodyRow'; import { RowTogglerButton } from './RowTogglerButton'; export const TableBody = React.memo( React.forwardRef((props, ref) => { const [rowGroupHeaderStyleObjectState, setRowGroupHeaderStyleObjectState] = React.useState({}); + const getColumnProps = (column) => ColumnBase.getCProps(column); + + const getColumnPTOptions = (key) => { + const cProps = getColumnProps(props.column); + + return props.ptCallbacks.ptmo(cProps, key, { + props: cProps, + parent: props.metaData, + state: { + rowGroupHeaderStyleObject: rowGroupHeaderStyleObjectState + } + }); + }; + const elementRef = React.useRef(null); const refCallback = React.useCallback( (el) => { @@ -804,12 +818,26 @@ export const TableBody = React.memo( if (!props.loading) { const colSpan = getColumnsLength(); const content = ObjectUtils.getJSXElement(props.emptyMessage, { props: props.tableProps, frozen: props.frozenRow }) || localeOption('emptyMessage'); + const emptyMessageProps = mergeProps( + { + className: 'p-datatable-emptymessage', + role: 'row' + }, + getColumnPTOptions('emptyMessage') + ); + + const bodyCellProps = mergeProps( + { + colSpan, + role: 'cell' + }, + getColumnPTOptions('bodyCell'), + getColumnPTOptions('root') + ); return ( - - - {content} - + + {content} ); } @@ -820,25 +848,47 @@ export const TableBody = React.memo( const createGroupHeader = (rowData, rowIndex, expanded, colSpan) => { if (isSubheaderGrouping && shouldRenderRowGroupHeader(props.value, rowData, rowIndex - props.first)) { const style = rowGroupHeaderStyle(); - const toggler = props.expandableRowGroups && ; + const toggler = props.expandableRowGroups && ( + + ); const options = { index: rowIndex, props: props.tableProps, customRendering: false }; let content = ObjectUtils.getJSXElement(props.rowGroupHeaderTemplate, rowData, options); // check if the user wants complete control of the rendering if (!options.customRendering) { + const bodyCellProps = mergeProps( + { + colSpan + }, + getColumnPTOptions('bodyCell'), + getColumnPTOptions('root') + ); + + const rowgroupHeaderNameProps = mergeProps( + { + className: 'p-rowgroup-header-name' + }, + getColumnPTOptions('rowgroupHeaderName') + ); + content = ( - + {toggler} - {content} + {content} ); } - return ( - - {content} - + const rowgroupHeaderProps = mergeProps( + { + className: 'p-rowgroup-header', + style, + role: 'row' + }, + getColumnPTOptions('rowgroupHeader') ); + + return {content}; } return null; @@ -919,6 +969,8 @@ export const TableBody = React.memo( tableSelector={props.tableSelector} value={props.value} virtualScrollerOptions={props.virtualScrollerOptions} + ptCallbacks={props.ptCallbacks} + metaData={props.metaData} /> ); } @@ -932,18 +984,28 @@ export const TableBody = React.memo( // check if the user wants complete control of the rendering if (!options.customRendering) { - content = ( - - {content} - + const bodyCellProps = mergeProps( + { + colSpan, + role: 'cell' + }, + getColumnPTOptions('bodyCell'), + getColumnPTOptions('root') ); + + content = {content}; } - return ( - - {content} - + const rowExpansionProps = mergeProps( + { + id, + className: 'p-datatable-row-expansion', + role: 'row' + }, + getColumnPTOptions('rowExpansion') ); + + return {content}; } return null; @@ -952,12 +1014,15 @@ export const TableBody = React.memo( const createGroupFooter = (rowData, rowIndex, expanded, colSpan) => { if (isSubheaderGrouping && shouldRenderRowGroupFooter(props.value, rowData, rowIndex - props.first, expanded)) { const content = ObjectUtils.getJSXElement(props.rowGroupFooterTemplate, rowData, { index: rowIndex, colSpan, props: props.tableProps }); - - return ( - - {content} - + const rowgroupFooterProps = mergeProps( + { + className: 'p-rowgroup-footer', + role: 'row' + }, + getColumnPTOptions('rowgroupFooter') ); + + return {content}; } return null; @@ -990,12 +1055,17 @@ export const TableBody = React.memo( }; const content = props.empty ? createEmptyContent() : createContent(); - - return ( - - {content} - + const ptKey = props.className === 'p-datatable-virtualscroller-spacer' ? 'virtualScrollerSpacer' : 'tbody'; + const tbodyProps = mergeProps( + { + ref: refCallback, + style: props.style, + className: props.className + }, + getColumnPTOptions(ptKey) ); + + return {content}; }) ); diff --git a/components/lib/datatable/TableFooter.js b/components/lib/datatable/TableFooter.js index 6a7c96b570..c77315725b 100644 --- a/components/lib/datatable/TableFooter.js +++ b/components/lib/datatable/TableFooter.js @@ -3,8 +3,35 @@ import { ColumnBase } from '../column/ColumnBase'; import { ColumnGroupBase } from '../columngroup/ColumnGroupBase'; import { RowBase } from '../row/RowBase'; import { FooterCell } from './FooterCell'; +import { mergeProps } from '../utils/Utils'; export const TableFooter = React.memo((props) => { + const getRowProps = (row) => ColumnGroupBase.getCProps(row); + + const getColumnGroupProps = () => { + return props.footerColumnGroup ? props.ptCallbacks.ptmo(ColumnGroupBase.getCProps(props.footerColumnGroup)) : undefined; + }; + + const getRowPTOptions = (row, key) => { + const rProps = getRowProps(row); + + return props.ptCallbacks.ptmo(ColumnGroupBase.getCProp(row, 'pt'), key, { + props: rProps, + parent: props.metaData + }); + }; + + const getColumnGroupPTOptions = (key) => { + return ( + props.ptCallbacks.ptmo(ColumnGroupBase.getCProp(props.footerColumnGroup, 'pt')), + key, + { + props: getColumnGroupProps(), + parent: props.metaData + } + ); + }; + const hasFooter = () => { return props.footerColumnGroup ? true : props.columns ? props.columns.some((col) => col && getColumnProp(col, 'footer')) : false; }; @@ -24,7 +51,7 @@ export const TableFooter = React.memo((props) => { const isVisible = col ? !getColumnProp(col, 'hidden') : true; const key = col ? getColumnProp(col, 'columnKey') || getColumnProp(col, 'field') || i : i; - return isVisible && ; + return isVisible && ; }); }; @@ -32,20 +59,43 @@ export const TableFooter = React.memo((props) => { if (props.footerColumnGroup) { const rows = React.Children.toArray(ColumnGroupBase.getCProp(props.footerColumnGroup, 'children')); - return rows.map((row, i) => ( - - {createGroupFooterCells(row)} - - )); + return rows.map((row, i) => { + const rootProps = mergeProps( + { + role: 'row' + }, + getRowPTOptions(row, 'root') + ); + + return ( + + {createGroupFooterCells(row)} + + ); + }); } - return {createFooterCells(props.columns)}; + const footerRowProps = mergeProps( + { + role: 'row' + }, + props.ptCallbacks.ptm('footerRow') + ); + + return {createFooterCells(props.columns)}; }; if (hasFooter()) { const content = createContent(); + const tfootProps = mergeProps( + { + className: 'p-datatable-tfoot' + }, + props.ptCallbacks.ptm('tfoot'), + getColumnGroupPTOptions('root') + ); - return {content}; + return {content}; } return null; diff --git a/components/lib/datatable/TableHeader.js b/components/lib/datatable/TableHeader.js index ffab950b83..f25ec889fc 100644 --- a/components/lib/datatable/TableHeader.js +++ b/components/lib/datatable/TableHeader.js @@ -16,18 +16,41 @@ export const TableHeader = React.memo((props) => { const isAllSortableDisabled = isSingleSort && allSortableDisabledState; const getColumnProp = (column, name) => { - return ColumnBase.getCProps(column, name); + return ColumnBase.getCProp(column, name); }; const getColumnProps = (column) => ColumnBase.getCProps(column); const getRowProps = (row) => ColumnGroupBase.getCProps(row); + const getColumnGroupProps = () => { + return props.headerColumnGroup ? props.ptCallbacks.ptmo(ColumnGroupBase.getCProps(props.headerColumnGroup)) : undefined; //@todo + }; + + const getColumnGroupPTOptions = (key) => { + return ( + props.ptCallbacks.ptmo(ColumnGroupBase.getCProp(props.headerColumnGroup, 'pt')), + key, + { + props: getColumnGroupProps(), + parent: props.metaData, + state: { + sortableDisabledFields: sortableDisabledFieldsState, + allSortableDisabled: allSortableDisabledState + } + } + ); + }; + const getColumnPTOptions = (column, key) => { const cProps = getColumnProps(column); return props.ptCallbacks.ptmo(cProps, key, { props: cProps, - parent: props.metaData + parent: props.metaData, + state: { + sortableDisabledFields: sortableDisabledFieldsState, + allSortableDisabled: allSortableDisabledState + } }); }; @@ -140,7 +163,7 @@ export const TableHeader = React.memo((props) => { if (props.showSelectAll && selectionMode === 'multiple') { const allRowsSelected = props.allRowsSelected(props.value); - return ; + return ; } return null; @@ -148,7 +171,18 @@ export const TableHeader = React.memo((props) => { const createFilter = (column, filter) => { if (filter) { - return ; + return ( + + ); } return null; @@ -170,11 +204,12 @@ export const TableHeader = React.memo((props) => { style: colStyle, className: colClassName }, - getColumnPTOptions(col, 'headerCell') + getColumnPTOptions(col, 'headerCell'), + getColumnPTOptions(col, 'root') ); return ( - + {checkbox} {filterRow} @@ -194,7 +229,7 @@ export const TableHeader = React.memo((props) => { { role: 'row' }, - getRowPTOptions(row, 'headerRow') + getRowPTOptions(row, 'root') ); return ( @@ -223,14 +258,15 @@ export const TableHeader = React.memo((props) => { }; const content = createContent(); - const threadProps = mergeProps( + const theadProps = mergeProps( { className: 'p-datatable-thead' }, - props.ptCallbacks.ptm('thead') + props.ptCallbacks.ptm('thead'), + getColumnGroupPTOptions('root') ); - return {content}; + return {content}; }); TableHeader.displayName = 'TableHeader'; diff --git a/components/lib/datatable/datatable.d.ts b/components/lib/datatable/datatable.d.ts index 3e3e4e8ddd..c1256c86ed 100644 --- a/components/lib/datatable/datatable.d.ts +++ b/components/lib/datatable/datatable.d.ts @@ -9,7 +9,7 @@ */ import * as React from 'react'; import { Column, ColumnProps } from '../column'; -import { PaginatorTemplate } from '../paginator'; +import { PaginatorPassThroughOptions, PaginatorTemplate } from '../paginator'; import { IconType, PassThroughType } from '../utils/utils'; import { VirtualScroller, VirtualScrollerPassThroughOptions, VirtualScrollerProps } from '../virtualscroller/virtualscroller'; import { TooltipPassThroughOptions } from '../tooltip/tooltip'; @@ -777,16 +777,16 @@ export interface DataTablePassThroughOptions { /** * Uses to pass attributes to the loading icon's DOM element. */ - loadingIcon?: DataTablePassThroughType>; + loadingIcon?: DataTablePassThroughType | React.HTMLAttributes>; /** * Uses to pass attributes to the header's DOM element. */ header?: DataTablePassThroughType>; - // /** - // * Uses to pass attributes to the Paginator component. - // * @see {@link PaginatorPassThroughOptions} - // */ - // paginator?: PaginatorPassThroughOptions; + /** + * Uses to pass attributes to the Paginator component. + * @see {@link PaginatorPassThroughOptions} + */ + paginator?: PaginatorPassThroughOptions; /** * Uses to pass attributes to the wrapper's DOM element. */ @@ -799,11 +799,11 @@ export interface DataTablePassThroughOptions { /** * Uses to pass attributes to the table's DOM element. */ - table?: DataTablePassThroughType>; + table?: DataTablePassThroughType>; /** * Uses to pass attributes to the virtual scroller spacer's DOM element. */ - virtualScrollerSpacer?: DataTablePassThroughType>; + virtualScrollerSpacer?: DataTablePassThroughType>; /** * Uses to pass attributes to the footer's DOM element. */ @@ -811,47 +811,51 @@ export interface DataTablePassThroughOptions { /** * Uses to pass attributes to the thead's DOM element. */ - thead?: DataTablePassThroughType>; + thead?: DataTablePassThroughType>; /** * Uses to pass attributes to the header row's DOM element. */ - headerRow?: DataTablePassThroughType>; + headerRow?: DataTablePassThroughType>; /** * Uses to pass attributes to the tbody's DOM element. */ - tbody?: DataTablePassThroughType>; + tbody?: DataTablePassThroughType>; /** * Uses to pass attributes to the rowgroup header's DOM element. */ - rowgroupHeader?: DataTablePassThroughType>; + rowgroupHeader?: DataTablePassThroughType>; + /** + * Uses to pass attributes to the rowgroup header name's DOM element. + */ + rowgroupHeaderName?: DataTablePassThroughType>; /** * Uses to pass attributes to the row's DOM element. */ - row?: DataTablePassThroughType>; + row?: DataTablePassThroughType>; /** * Uses to pass attributes to the row expansion's DOM element. */ - rowExpansion?: DataTablePassThroughType>; + rowExpansion?: DataTablePassThroughType>; /** * Uses to pass attributes to the rowgroup footer's DOM element. */ - rowgroupFooter?: DataTablePassThroughType>; + rowgroupFooter?: DataTablePassThroughType>; /** * Uses to pass attributes to the empty message's DOM element. */ - emptyMessage?: DataTablePassThroughType>; + emptyMessage?: DataTablePassThroughType>; /** * Uses to pass attributes to the tfoot's DOM element. */ - tfoot?: DataTablePassThroughType>; + tfoot?: DataTablePassThroughType>; /** * Uses to pass attributes to the footerr ow's DOM element. */ - footerRow?: DataTablePassThroughType>; + footerRow?: DataTablePassThroughType>; /** * Uses to pass attributes to the footer cell's DOM element. */ - footerCell?: DataTablePassThroughType>; + footerCell?: DataTablePassThroughType>; /** * Uses to pass attributes to the resize helper's DOM element. */ @@ -859,11 +863,19 @@ export interface DataTablePassThroughOptions { /** * Uses to pass attributes to the reorder indicator up's DOM element. */ - reorderIndicatorUp?: DataTablePassThroughType>; + reorderIndicatorUp?: DataTablePassThroughType>; + /** + * Uses to pass attributes to the reorder indicator up icon's DOM element. + */ + reorderIndicatorUpIcon?: DataTablePassThroughType | React.HTMLAttributes>; /** * Uses to pass attributes to the reorder indicator down's DOM element. */ - reorderIndicatorDown?: DataTablePassThroughType>; + reorderIndicatorDown?: DataTablePassThroughType>; + /** + * Uses to pass attributes to the reorder indicator down icon's DOM element. + */ + reorderIndicatorDownIcon?: DataTablePassThroughType | React.HTMLAttributes>; /** * Uses to pass attributes tooltip's DOM element. * @type {TooltipPassThroughOptions} diff --git a/components/lib/dataview/DataView.js b/components/lib/dataview/DataView.js index e886ba9ea4..050ae68e6c 100644 --- a/components/lib/dataview/DataView.js +++ b/components/lib/dataview/DataView.js @@ -2,7 +2,7 @@ import * as React from 'react'; import PrimeReact, { localeOption } from '../api/Api'; import { Paginator } from '../paginator/Paginator'; import { Ripple } from '../ripple/Ripple'; -import { classNames, IconUtils, ObjectUtils } from '../utils/Utils'; +import { classNames, IconUtils, mergeProps, ObjectUtils } from '../utils/Utils'; import { DataViewBase, DataViewLayoutOptionsBase } from './DataViewBase'; import { BarsIcon } from '../icons/bars'; import { ThLargeIcon } from '../icons/thlarge'; @@ -10,6 +10,9 @@ import { SpinnerIcon } from '../icons/spinner'; export const DataViewLayoutOptions = React.memo((inProps) => { const props = DataViewLayoutOptionsBase.getProps(inProps); + const { ptm } = DataViewLayoutOptionsBase.setMetaData({ + props + }); const changeLayout = (event, layoutMode) => { props.onChange({ @@ -19,20 +22,48 @@ export const DataViewLayoutOptions = React.memo((inProps) => { event.preventDefault(); }; - const otherProps = DataViewLayoutOptionsBase.getOtherProps(props); const className = classNames('p-dataview-layout-options p-selectbutton p-buttonset', props.className); const buttonListClass = classNames('p-button p-button-icon-only', { 'p-highlight': props.layout === 'list' }); const buttonGridClass = classNames('p-button p-button-icon-only', { 'p-highlight': props.layout === 'grid' }); - const listIcon = IconUtils.getJSXIcon(props.listIcon || , undefined, { props }); - const gridIcon = IconUtils.getJSXIcon(props.gridIcon || , undefined, { props }); + const listIconProps = mergeProps(ptm('list')); + const gridIconProps = mergeProps(ptm('grid')); + const listIcon = IconUtils.getJSXIcon(props.listIcon || , { ...listIconProps }, { props }); + const gridIcon = IconUtils.getJSXIcon(props.gridIcon || , { ...gridIconProps }, { props }); + const rootProps = mergeProps( + { + id: props.id, + style: props.style, + className + }, + DataViewLayoutOptionsBase.getOtherProps(props), + ptm('root') + ); + + const listButtonProps = mergeProps( + { + type: 'button', + className: buttonListClass, + onClick: (event) => changeLayout(event, 'list') + }, + ptm('listButton') + ); + + const gridButtonProps = mergeProps( + { + type: 'button', + className: buttonGridClass, + onClick: (event) => changeLayout(event, 'grid') + }, + ptm('gridButton') + ); return ( -
- - @@ -47,9 +78,15 @@ export const DataViewItem = React.memo((props) => { export const DataView = React.memo( React.forwardRef((inProps, ref) => { const props = DataViewBase.getProps(inProps); - const [firstState, setFirstState] = React.useState(props.first); const [rowsState, setRowsState] = React.useState(props.rows); + const { ptm } = DataViewBase.setMetaData({ + props, + state: { + first: firstState, + rows: rowsState + } + }); const elementRef = React.useRef(null); const first = props.onPage ? props.first : firstState; const rows = props.onPage ? props.rows : rowsState; @@ -81,6 +118,7 @@ export const DataView = React.memo( rightContent={props.paginatorRight} alwaysShow={props.alwaysShowPaginator} dropdownAppendTo={props.paginatorDropdownAppendTo} + ptm={ptm('paginator')} /> ); }; @@ -113,11 +151,23 @@ export const DataView = React.memo( const createLoader = () => { if (props.loading) { - let iconClassName = 'p-dataview-loading-icon'; - let icon = props.loadingIcon || ; - const loadingIcon = IconUtils.getJSXIcon(icon, { className: iconClassName }, { props }); - - return
{loadingIcon}
; + const iconClassName = 'p-dataview-loading-icon'; + const loadingIconProps = mergeProps( + { + className: iconClassName + }, + ptm('loadingIcon') + ); + const icon = props.loadingIcon || ; + const loadingIcon = IconUtils.getJSXIcon(icon, { ...loadingIconProps }, { props }); + const loadingOverlayProps = mergeProps( + { + className: 'p-dataview-loading-overlay p-component-overlay' + }, + ptm('loadingOverlay') + ); + + return
{loadingIcon}
; } return null; @@ -142,8 +192,14 @@ export const DataView = React.memo( const createEmptyMessage = () => { if (!props.loading) { const content = props.emptyMessage || localeOption('emptyMessage'); - - return
{content}
; + const emptyMessageProps = mergeProps( + { + className: 'p-col-12 col-12 p-dataview-emptymessage' + }, + ptm('emptyMessage') + ); + + return
{content}
; } return null; @@ -151,7 +207,14 @@ export const DataView = React.memo( const createHeader = () => { if (props.header) { - return
{props.header}
; + const headerProps = mergeProps( + { + className: 'p-dataview-header' + }, + ptm('header') + ); + + return
{props.header}
; } return null; @@ -159,7 +222,14 @@ export const DataView = React.memo( const createFooter = () => { if (props.footer) { - return
{props.footer}
; + const footerProps = mergeProps( + { + className: 'p-dataview-footer' + }, + ptm('footer') + ); + + return
{props.footer}
; } return null; @@ -196,9 +266,23 @@ export const DataView = React.memo( 'p-nogutter grid-nogutter': !props.gutter }); + const gridProps = mergeProps( + { + className: gridClassName + }, + ptm('grid') + ); + + const contentProps = mergeProps( + { + className: 'p-dataview-content' + }, + ptm('content') + ); + return ( -
-
{items}
+
+
{items}
); }; @@ -220,7 +304,6 @@ export const DataView = React.memo( const data = processData(); - const otherProps = DataViewBase.getOtherProps(props); const className = classNames( 'p-dataview p-component', { @@ -235,9 +318,19 @@ export const DataView = React.memo( const header = createHeader(); const footer = createFooter(); const content = createContent(data); + const rootProps = mergeProps( + { + id: props.id, + ref: elementRef, + style: props.style, + className + }, + DataViewBase.getOtherProps(props), + ptm('root') + ); return ( -
+
{loader} {header} {topPaginator} diff --git a/components/lib/dataview/DataViewBase.js b/components/lib/dataview/DataViewBase.js index 42778cb95e..febb21c337 100644 --- a/components/lib/dataview/DataViewBase.js +++ b/components/lib/dataview/DataViewBase.js @@ -1,6 +1,6 @@ -import { ObjectUtils } from '../utils/Utils'; +import { ComponentBase } from '../componentbase/ComponentBase'; -export const DataViewBase = { +export const DataViewBase = ComponentBase.extend({ defaultProps: { __TYPE: 'DataView', id: null, @@ -35,12 +35,10 @@ export const DataViewBase = { itemTemplate: null, onPage: null, children: undefined - }, - getProps: (props) => ObjectUtils.getMergedProps(props, DataViewBase.defaultProps), - getOtherProps: (props) => ObjectUtils.getDiffProps(props, DataViewBase.defaultProps) -}; + } +}); -export const DataViewLayoutOptionsBase = { +export const DataViewLayoutOptionsBase = ComponentBase.extend({ defaultProps: { __TYPE: 'DataViewLayoutOptions', id: null, @@ -51,7 +49,5 @@ export const DataViewLayoutOptionsBase = { gridIcon: null, onChange: null, children: undefined - }, - getProps: (props) => ObjectUtils.getMergedProps(props, DataViewLayoutOptionsBase.defaultProps), - getOtherProps: (props) => ObjectUtils.getDiffProps(props, DataViewLayoutOptionsBase.defaultProps) -}; + } +}); diff --git a/components/lib/dataview/dataview.d.ts b/components/lib/dataview/dataview.d.ts index f016852e92..b98498dab5 100755 --- a/components/lib/dataview/dataview.d.ts +++ b/components/lib/dataview/dataview.d.ts @@ -8,8 +8,111 @@ * */ import * as React from 'react'; -import { PaginatorTemplate } from '../paginator'; -import { IconType } from '../utils/utils'; +import { PaginatorPassThroughOptions, PaginatorTemplate } from '../paginator'; +import { IconType, PassThroughType } from '../utils/utils'; + +export declare type DataViewPassThroughType = PassThroughType; +export declare type DataViewLayoutOptionsPassThroughType = PassThroughType; + +/** + * Custom passthrough(pt) option method. + */ +export interface DataViewPassThroughMethodOptions { + props: DataViewProps; + state: DataViewState; +} + +/** + * Custom passthrough(pt) option method. + */ +export interface DataViewLayoutOptionsPassThroughMethodOptions { + props: DataViewLayoutOptionsProps; +} + +/** + * Custom passthrough(pt) options. + * @see {@link DataViewProps.pt} + */ +export interface DataViewPassThroughOptions { + /** + * Uses to pass attributes to the root's DOM element. + */ + root?: DataViewPassThroughType>; + /** + * Uses to pass attributes to the header's DOM element. + */ + header?: DataViewPassThroughType>; + /** + * Uses to pass attributes to the Paginator component. + * @see {@link PaginatorPassThroughOptions} + */ + paginator?: PaginatorPassThroughOptions; + /** + * Uses to pass attributes to the content's DOM element. + */ + content?: DataViewPassThroughType>; + /** + * Uses to pass attributes to the empty message's DOM element. + */ + emptyMessage?: DataViewPassThroughType>; + /** + * Uses to pass attributes to the footer's DOM element. + */ + footer?: DataViewPassThroughType>; + /** + * Uses to pass attributes to the loading overlay's DOM element. + */ + loadingOverlay?: DataViewPassThroughType>; + /** + * Uses to pass attributes to the loading icon's DOM element. + */ + loadingIcon?: DataViewPassThroughType | React.HTMLAttributes>; + /** + * Uses to pass attributes to the grid's DOM element. + */ + grid?: DataViewPassThroughType>; +} + +/** + * Defines current inline state in DataView component. + */ +export interface DataViewState { + /** + * Current index of first record as a number. + */ + first: number; + /** + * Current number of rows to display in new page as a number. + */ + rows: number; +} + +/** + * Custom passthrough(pt) options. + * @see {@link DataViewLayoutOptionsProps.pt} + */ +export interface DataViewLayoutOptionsPassThroughOptions { + /** + * Uses to pass attributes to the root's DOM element. + */ + root?: DataViewLayoutOptionsPassThroughType>; + /** + * Uses to pass attributes to the list button's DOM element. + */ + listButton?: DataViewLayoutOptionsPassThroughType>; + /** + * Uses to pass attributes to the list icon's DOM element. + */ + listIcon?: DataViewLayoutOptionsPassThroughType | React.HTMLAttributes>; + /** + * Uses to pass attributes to the grid button's DOM element. + */ + gridButton?: DataViewLayoutOptionsPassThroughType>; + /** + * Uses to pass attributes to the grid icon's DOM element. + */ + gridIcon?: DataViewLayoutOptionsPassThroughType | React.HTMLAttributes>; +} /** * Custom page event. diff --git a/components/lib/dropdown/DropdownBase.js b/components/lib/dropdown/DropdownBase.js index d10305dc9d..4c31078ca7 100644 --- a/components/lib/dropdown/DropdownBase.js +++ b/components/lib/dropdown/DropdownBase.js @@ -1,5 +1,4 @@ import { ComponentBase } from '../componentbase/ComponentBase'; -import { ObjectUtils } from '../utils/Utils'; export const DropdownBase = ComponentBase.extend({ defaultProps: { diff --git a/components/lib/dropdown/dropdown.d.ts b/components/lib/dropdown/dropdown.d.ts index c1da2b14d1..ed53664044 100644 --- a/components/lib/dropdown/dropdown.d.ts +++ b/components/lib/dropdown/dropdown.d.ts @@ -10,6 +10,7 @@ import * as React from 'react'; import { CSSTransitionProps } from '../csstransition'; import { SelectItemOptionsType } from '../selectitem/selectitem'; +import { TooltipPassThroughOptions } from '../tooltip/tooltip'; import { TooltipOptions } from '../tooltip/tooltipoptions'; import { FormEvent } from '../ts-helpers'; import { IconType, PassThroughType } from '../utils'; @@ -108,6 +109,11 @@ export interface DropdownPassThroughOptions { * Uses to pass attributes to the option's DOM element. */ option?: DropdownPassThroughType>; + /** + * Uses to pass attributes tooltip's DOM element. + * @type {TooltipPassThroughOptions} + */ + tooltip?: TooltipPassThroughOptions; } /** diff --git a/components/lib/inputnumber/InputNumber.js b/components/lib/inputnumber/InputNumber.js index 092a52d8f4..ffe5405c87 100644 --- a/components/lib/inputnumber/InputNumber.js +++ b/components/lib/inputnumber/InputNumber.js @@ -1174,7 +1174,7 @@ export const InputNumber = React.memo( {inputElement} {buttonGroup} - {hasTooltip && } + {hasTooltip && } ); }) diff --git a/components/lib/inputnumber/inputnumber.d.ts b/components/lib/inputnumber/inputnumber.d.ts index 50dd9dda1f..82c03cc02f 100644 --- a/components/lib/inputnumber/inputnumber.d.ts +++ b/components/lib/inputnumber/inputnumber.d.ts @@ -9,6 +9,7 @@ */ import * as React from 'react'; import { InputText, InputTextPassThroughOptions } from '../inputtext/inputtext'; +import { TooltipPassThroughOptions } from '../tooltip/tooltip'; import { TooltipOptions } from '../tooltip/tooltipoptions'; import { FormEvent } from '../ts-helpers'; import { PassThroughType } from '../utils/utils'; @@ -49,6 +50,11 @@ export interface InputNumberPassThroughOptions { * Uses to pass attributes to the decrement button's DOM element. */ decrementButton?: InputNumberPassThroughType>; + /** + * Uses to pass attributes tooltip's DOM element. + * @type {TooltipPassThroughOptions} + */ + tooltip?: TooltipPassThroughOptions; } /** diff --git a/components/lib/rating/Rating.js b/components/lib/rating/Rating.js index 39adc8902c..ddb1f696db 100644 --- a/components/lib/rating/Rating.js +++ b/components/lib/rating/Rating.js @@ -100,7 +100,7 @@ export const Rating = React.memo( getPTOptions(props.value, 'offIcon') ); const icon = active ? { type: props.onIcon || } : { type: props.offIcon || }; - const content = IconUtils.getJSXIcon(icon.type, { ...icon.props }, { props }); + const content = IconUtils.getJSXIcon(icon.type, active ? { ...onIconProps } : { ...offIconProps }, { props }); const itemProps = mergeProps( { diff --git a/components/lib/row/Row.js b/components/lib/row/Row.js index dc8e6f523a..037f334d0f 100644 --- a/components/lib/row/Row.js +++ b/components/lib/row/Row.js @@ -1,15 +1,24 @@ import * as React from 'react'; import { RowBase } from './RowBase'; +import { mergeProps } from '../utils/Utils'; export const Row = (inProps) => { const props = RowBase.getProps(inProps); - const otherProps = RowBase.getOtherProps(props); + //@todo Pass Parent MetaData + const { ptm } = RowBase.setMetaData({ + props: props + }); - return ( - - {props.children} - + const rootProps = mergeProps( + { + className: props.className, + style: props.style + }, + RowBase.getOtherProps(props), + ptm('root') ); + + return {props.children}; }; Row.displayName = 'Row'; diff --git a/components/lib/row/RowBase.js b/components/lib/row/RowBase.js index 210657d2e2..a72dc453ca 100644 --- a/components/lib/row/RowBase.js +++ b/components/lib/row/RowBase.js @@ -1,13 +1,12 @@ +import { ComponentBase } from '../componentbase/ComponentBase'; import { ObjectUtils } from '../utils/Utils'; -export const RowBase = { +export const RowBase = ComponentBase.extend({ defaultProps: { __TYPE: 'Row', style: null, className: null, children: undefined }, - getProps: (props) => ObjectUtils.getMergedProps(props, RowBase.defaultProps), - getOtherProps: (props) => ObjectUtils.getDiffProps(props, RowBase.defaultProps), getCProp: (row, name) => ObjectUtils.getComponentProp(row, name, RowBase.defaultProps) -}; +}); diff --git a/components/lib/row/row.d.ts b/components/lib/row/row.d.ts index 3053459c45..69eeab78b7 100644 --- a/components/lib/row/row.d.ts +++ b/components/lib/row/row.d.ts @@ -8,6 +8,29 @@ * */ import * as React from 'react'; +import { ColumnGroupPassThroughOptions } from '../columngroup/columngroup'; +import { PassThroughType } from '../utils/utils'; + +export declare type RowPassThroughType = PassThroughType; + +/** + * Custom passthrough(pt) option method. + */ +export interface RowPassThroughMethodOptions { + props: RowProps; + parent: ColumnGroupPassThroughOptions; +} + +/** + * Custom passthrough(pt) options. + * @see {@link RowProps.pt} + */ +export interface RowPassThroughOptions { + /** + * Uses to pass attributes to the root's DOM element. + */ + root?: RowPassThroughType>; +} /** * Defines valid properties in Row component. @@ -27,6 +50,11 @@ export interface RowProps { * @readonly */ children?: React.ReactNode | undefined; + /** + * Uses to pass attributes to DOM elements inside the component. + * @type {RowPassThroughOptions} + */ + pt?: RowPassThroughOptions; } /** diff --git a/components/lib/treetable/TreeTableBase.js b/components/lib/treetable/TreeTableBase.js index 1f2479968e..8eb6e5026d 100644 --- a/components/lib/treetable/TreeTableBase.js +++ b/components/lib/treetable/TreeTableBase.js @@ -1,7 +1,7 @@ import { FilterMatchMode } from '../api/Api'; -import { ObjectUtils } from '../utils/Utils'; +import { ComponentBase } from '../componentbase/ComponentBase'; -export const TreeTableBase = { +export const TreeTableBase = ComponentBase.extend({ defaultProps: { __TYPE: 'TreeTable', alwaysShowPaginator: true, @@ -84,7 +84,5 @@ export const TreeTableBase = { totalRecords: null, value: null, children: undefined - }, - getProps: (props) => ObjectUtils.getMergedProps(props, TreeTableBase.defaultProps), - getOtherProps: (props) => ObjectUtils.getDiffProps(props, TreeTableBase.defaultProps) -}; + } +}); diff --git a/data/news.json b/data/news.json index 321f078fa4..a932663763 100644 --- a/data/news.json +++ b/data/news.json @@ -1,8 +1,8 @@ { - "id": 33, - "content": "v9.5.0 is out with new Pass Through feature!", - "linkText": "Learn More", - "linkHref": "https://github.com/primefaces/primereact/blob/master/CHANGELOG.md", + "id": 35, + "content": "Summer Sale - Up to 50% Off at PrimeStore", + "linkText": "Buy Now", + "linkHref": "https://www.primefaces.org/store", "backgroundStyle": "background-color:#07c4e8", "textStyle": "color:#191919;font-weight:500", "linkStyle": "color:#191919;font-weight:700", diff --git a/package-lock.json b/package-lock.json index 34ed0ccfc8..de9ec00df7 100644 --- a/package-lock.json +++ b/package-lock.json @@ -15,7 +15,7 @@ "formik": "^2.2.9", "fs-extra": "^10.1.0", "jspdf": "2.5.1", - "jspdf-autotable": "3.5.28", + "jspdf-autotable": "3.5.29", "next": "12.3.4", "path": "^0.12.7", "primeflex": "^3.3.0", @@ -43,13 +43,13 @@ "@testing-library/jest-dom": "^5.16.5", "@testing-library/react": "^13.4.0", "@testing-library/user-event": "^14.4.3", - "@types/node": "^18.16.3", - "@types/react": "^18.2.0", - "@types/react-dom": "^18.2.1", - "@types/react-transition-group": "^4.4.5", - "@typescript-eslint/eslint-plugin": "^5.59.2", - "eslint": "8.39.0", - "eslint-config-next": "13.3.4", + "@types/node": "^20.2.5", + "@types/react": "^18.2.8", + "@types/react-dom": "^18.2.4", + "@types/react-transition-group": "^4.4.6", + "@typescript-eslint/eslint-plugin": "^5.59.8", + "eslint": "8.41.0", + "eslint-config-next": "13.4.4", "eslint-config-prettier": "^8.8.0", "eslint-plugin-jest-dom": "^4.0.3", "gulp": "^4.0.2", @@ -65,8 +65,8 @@ "rollup-plugin-postcss": "^4.0.2", "rollup-plugin-terser": "^7.0.2", "sass": "^1.62.1", - "typedoc": "^0.24.6", - "typescript": "^4.9.4" + "typedoc": "^0.24.7", + "typescript": "^5.0.4" }, "engines": { "node": ">=16" @@ -2096,14 +2096,14 @@ } }, "node_modules/@eslint/eslintrc": { - "version": "2.0.2", - "resolved": "https://registry.npmjs.org/@eslint/eslintrc/-/eslintrc-2.0.2.tgz", - "integrity": "sha512-3W4f5tDUra+pA+FzgugqL2pRimUTDJWKr7BINqOpkZrC0uYI0NIc0/JFgBROCU07HR6GieA5m3/rsPIhDmCXTQ==", + "version": "2.0.3", + "resolved": "https://registry.npmjs.org/@eslint/eslintrc/-/eslintrc-2.0.3.tgz", + "integrity": "sha512-+5gy6OQfk+xx3q0d6jGZZC3f3KzAkXc/IanVxd1is/VIIziRqqt3ongQz0FiTUXqTk0c7aDB3OaFuKnuSoJicQ==", "dev": true, "dependencies": { "ajv": "^6.12.4", "debug": "^4.3.2", - "espree": "^9.5.1", + "espree": "^9.5.2", "globals": "^13.19.0", "ignore": "^5.2.0", "import-fresh": "^3.2.1", @@ -2146,9 +2146,9 @@ } }, "node_modules/@eslint/js": { - "version": "8.39.0", - "resolved": "https://registry.npmjs.org/@eslint/js/-/js-8.39.0.tgz", - "integrity": "sha512-kf9RB0Fg7NZfap83B3QOqOGg9QmD9yBudqQXzzOtn3i4y7ZUXe5ONeW34Gwi+TxhH4mvj72R1Zc300KUMa9Bng==", + "version": "8.41.0", + "resolved": "https://registry.npmjs.org/@eslint/js/-/js-8.41.0.tgz", + "integrity": "sha512-LxcyMGxwmTh2lY9FwHPGWOHmYFCZvbrFCBZL4FzSSsxsRPuhrYUg/49/0KDfW8tnIEaEHtfmn6+NPN+1DqaNmA==", "dev": true, "engines": { "node": "^12.22.0 || ^14.17.0 || >=16.0.0" @@ -3117,9 +3117,9 @@ "integrity": "sha512-H/69Lc5Q02dq3o+dxxy5O/oNxFsZpdL6WREtOOtOM1B/weonIwDXkekr1KV5DPVPr12IHFPrMrcJQ6bgPMfn7A==" }, "node_modules/@next/eslint-plugin-next": { - "version": "13.3.4", - "resolved": "https://registry.npmjs.org/@next/eslint-plugin-next/-/eslint-plugin-next-13.3.4.tgz", - "integrity": "sha512-mvS+HafOPy31oJbAi920WJXMdjbyb4v5FAMr9PeGZfRIdEcsLkA3mU/ZvmwzovJgP3nAWw2e2yM8iIFW8VpvIA==", + "version": "13.4.4", + "resolved": "https://registry.npmjs.org/@next/eslint-plugin-next/-/eslint-plugin-next-13.4.4.tgz", + "integrity": "sha512-5jnh7q6I15efnjR/rR+/TGTc9hn53g3JTbEjAMjmeQiExKqEUgIXqrHI5zlTNlNyzCPkBB860/ctxXheZaF2Vw==", "dev": true, "dependencies": { "glob": "7.1.7" @@ -4333,9 +4333,9 @@ } }, "node_modules/@types/json-schema": { - "version": "7.0.11", - "resolved": "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.11.tgz", - "integrity": "sha512-wOuvG1SN4Us4rez+tylwwwCV1psiNVOkJeM3AUWUNWg/jDQY2+HE/444y5gc+jBmRqASOm2Oeh5c1axHobwRKQ==", + "version": "7.0.12", + "resolved": "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.12.tgz", + "integrity": "sha512-Hr5Jfhc9eYOQNPYO5WLDq/n4jqijdHNlDXjuAQkkt+mWdQR+XJToOHrsD4cPaMXpn6KO7y2+wM8AZEs8VpBLVA==", "dev": true }, "node_modules/@types/json5": { @@ -4345,9 +4345,9 @@ "dev": true }, "node_modules/@types/node": { - "version": "18.16.3", - "resolved": "https://registry.npmjs.org/@types/node/-/node-18.16.3.tgz", - "integrity": "sha512-OPs5WnnT1xkCBiuQrZA4+YAV4HEJejmHneyraIaxsbev5yCEr6KMwINNFP9wQeFIw8FWcoTqF3vQsa5CDaI+8Q==", + "version": "20.2.5", + "resolved": "https://registry.npmjs.org/@types/node/-/node-20.2.5.tgz", + "integrity": "sha512-JJulVEQXmiY9Px5axXHeYGLSjhkZEnD+MDPDGbCbIAbMslkKwmygtZFy1X6s/075Yo94sf8GuSlFfPzysQrWZQ==", "dev": true }, "node_modules/@types/parse-json": { @@ -4375,9 +4375,9 @@ "optional": true }, "node_modules/@types/react": { - "version": "18.2.0", - "resolved": "https://registry.npmjs.org/@types/react/-/react-18.2.0.tgz", - "integrity": "sha512-0FLj93y5USLHdnhIhABk83rm8XEGA7kH3cr+YUlvxoUGp1xNt/DINUMvqPxLyOQMzLmZe8i4RTHbvb8MC7NmrA==", + "version": "18.2.8", + "resolved": "https://registry.npmjs.org/@types/react/-/react-18.2.8.tgz", + "integrity": "sha512-lTyWUNrd8ntVkqycEEplasWy2OxNlShj3zqS0LuB1ENUGis5HodmhM7DtCoUGbxj3VW/WsGA0DUhpG6XrM7gPA==", "devOptional": true, "dependencies": { "@types/prop-types": "*", @@ -4386,18 +4386,18 @@ } }, "node_modules/@types/react-dom": { - "version": "18.2.1", - "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-18.2.1.tgz", - "integrity": "sha512-8QZEV9+Kwy7tXFmjJrp3XUKQSs9LTnE0KnoUb0YCguWBiNW0Yfb2iBMYZ08WPg35IR6P3Z0s00B15SwZnO26+w==", + "version": "18.2.4", + "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-18.2.4.tgz", + "integrity": "sha512-G2mHoTMTL4yoydITgOGwWdWMVd8sNgyEP85xVmMKAPUBwQWm9wBPQUmvbeF4V3WBY1P7mmL4BkjQ0SqUpf1snw==", "dev": true, "dependencies": { "@types/react": "*" } }, "node_modules/@types/react-transition-group": { - "version": "4.4.5", - "resolved": "https://registry.npmjs.org/@types/react-transition-group/-/react-transition-group-4.4.5.tgz", - "integrity": "sha512-juKD/eiSM3/xZYzjuzH6ZwpP+/lejltmiS3QEzV/vmb/Q8+HfDmxu+Baga8UEMGBqV88Nbg4l2hY/K2DkyaLLA==", + "version": "4.4.6", + "resolved": "https://registry.npmjs.org/@types/react-transition-group/-/react-transition-group-4.4.6.tgz", + "integrity": "sha512-VnCdSxfcm08KjsJVQcfBmhEQAPnLB8G08hAxn39azX1qYBQ/5RVQuoHuKIcfKOdncuaUvEpFKFzEvbtIMsfVew==", "dev": true, "dependencies": { "@types/react": "*" @@ -4419,9 +4419,9 @@ "devOptional": true }, "node_modules/@types/semver": { - "version": "7.3.13", - "resolved": "https://registry.npmjs.org/@types/semver/-/semver-7.3.13.tgz", - "integrity": "sha512-21cFJr9z3g5dW8B0CVI9g2O9beqaThGQ6ZFBqHfwhzLDKUxaqTIy3vnfah/UPkfOiF2pLq+tGz+W8RyCskuslw==", + "version": "7.5.0", + "resolved": "https://registry.npmjs.org/@types/semver/-/semver-7.5.0.tgz", + "integrity": "sha512-G8hZ6XJiHnuhQKR7ZmysCeJWE08o8T0AXtk5darsCaTVsYZhhgUrq53jizaR2FvsoeCwJhlmwTjkXBY5Pn/ZHw==", "dev": true }, "node_modules/@types/stack-utils": { @@ -4461,15 +4461,15 @@ "dev": true }, "node_modules/@typescript-eslint/eslint-plugin": { - "version": "5.59.2", - "resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-5.59.2.tgz", - "integrity": "sha512-yVrXupeHjRxLDcPKL10sGQ/QlVrA8J5IYOEWVqk0lJaSZP7X5DfnP7Ns3cc74/blmbipQ1htFNVGsHX6wsYm0A==", + "version": "5.59.8", + "resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-5.59.8.tgz", + "integrity": "sha512-JDMOmhXteJ4WVKOiHXGCoB96ADWg9q7efPWHRViT/f09bA8XOMLAVHHju3l0MkZnG1izaWXYmgvQcUjTRcpShQ==", "dev": true, "dependencies": { "@eslint-community/regexpp": "^4.4.0", - "@typescript-eslint/scope-manager": "5.59.2", - "@typescript-eslint/type-utils": "5.59.2", - "@typescript-eslint/utils": "5.59.2", + "@typescript-eslint/scope-manager": "5.59.8", + "@typescript-eslint/type-utils": "5.59.8", + "@typescript-eslint/utils": "5.59.8", "debug": "^4.3.4", "grapheme-splitter": "^1.0.4", "ignore": "^5.2.0", @@ -4495,13 +4495,13 @@ } }, "node_modules/@typescript-eslint/eslint-plugin/node_modules/@typescript-eslint/scope-manager": { - "version": "5.59.2", - "resolved": "https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-5.59.2.tgz", - "integrity": "sha512-dB1v7ROySwQWKqQ8rEWcdbTsFjh2G0vn8KUyvTXdPoyzSL6lLGkiXEV5CvpJsEe9xIdKV+8Zqb7wif2issoOFA==", + "version": "5.59.8", + "resolved": "https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-5.59.8.tgz", + "integrity": "sha512-/w08ndCYI8gxGf+9zKf1vtx/16y8MHrZs5/tnjHhMLNSixuNcJavSX4wAiPf4aS5x41Es9YPCn44MIe4cxIlig==", "dev": true, "dependencies": { - "@typescript-eslint/types": "5.59.2", - "@typescript-eslint/visitor-keys": "5.59.2" + "@typescript-eslint/types": "5.59.8", + "@typescript-eslint/visitor-keys": "5.59.8" }, "engines": { "node": "^12.22.0 || ^14.17.0 || >=16.0.0" @@ -4512,9 +4512,9 @@ } }, "node_modules/@typescript-eslint/eslint-plugin/node_modules/@typescript-eslint/types": { - "version": "5.59.2", - "resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-5.59.2.tgz", - "integrity": "sha512-LbJ/HqoVs2XTGq5shkiKaNTuVv5tTejdHgfdjqRUGdYhjW1crm/M7og2jhVskMt8/4wS3T1+PfFvL1K3wqYj4w==", + "version": "5.59.8", + "resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-5.59.8.tgz", + "integrity": "sha512-+uWuOhBTj/L6awoWIg0BlWy0u9TyFpCHrAuQ5bNfxDaZ1Ppb3mx6tUigc74LHcbHpOHuOTOJrBoAnhdHdaea1w==", "dev": true, "engines": { "node": "^12.22.0 || ^14.17.0 || >=16.0.0" @@ -4525,12 +4525,12 @@ } }, "node_modules/@typescript-eslint/eslint-plugin/node_modules/@typescript-eslint/visitor-keys": { - "version": "5.59.2", - "resolved": "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-5.59.2.tgz", - "integrity": "sha512-EEpsO8m3RASrKAHI9jpavNv9NlEUebV4qmF1OWxSTtKSFBpC1NCmWazDQHFivRf0O1DV11BA645yrLEVQ0/Lig==", + "version": "5.59.8", + "resolved": "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-5.59.8.tgz", + "integrity": "sha512-pJhi2ms0x0xgloT7xYabil3SGGlojNNKjK/q6dB3Ey0uJLMjK2UDGJvHieiyJVW/7C3KI+Z4Q3pEHkm4ejA+xQ==", "dev": true, "dependencies": { - "@typescript-eslint/types": "5.59.2", + "@typescript-eslint/types": "5.59.8", "eslint-visitor-keys": "^3.3.0" }, "engines": { @@ -4619,13 +4619,13 @@ } }, "node_modules/@typescript-eslint/type-utils": { - "version": "5.59.2", - "resolved": "https://registry.npmjs.org/@typescript-eslint/type-utils/-/type-utils-5.59.2.tgz", - "integrity": "sha512-b1LS2phBOsEy/T381bxkkywfQXkV1dWda/z0PhnIy3bC5+rQWQDS7fk9CSpcXBccPY27Z6vBEuaPBCKCgYezyQ==", + "version": "5.59.8", + "resolved": "https://registry.npmjs.org/@typescript-eslint/type-utils/-/type-utils-5.59.8.tgz", + "integrity": "sha512-+5M518uEIHFBy3FnyqZUF3BMP+AXnYn4oyH8RF012+e7/msMY98FhGL5SrN29NQ9xDgvqCgYnsOiKp1VjZ/fpA==", "dev": true, "dependencies": { - "@typescript-eslint/typescript-estree": "5.59.2", - "@typescript-eslint/utils": "5.59.2", + "@typescript-eslint/typescript-estree": "5.59.8", + "@typescript-eslint/utils": "5.59.8", "debug": "^4.3.4", "tsutils": "^3.21.0" }, @@ -4646,9 +4646,9 @@ } }, "node_modules/@typescript-eslint/type-utils/node_modules/@typescript-eslint/types": { - "version": "5.59.2", - "resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-5.59.2.tgz", - "integrity": "sha512-LbJ/HqoVs2XTGq5shkiKaNTuVv5tTejdHgfdjqRUGdYhjW1crm/M7og2jhVskMt8/4wS3T1+PfFvL1K3wqYj4w==", + "version": "5.59.8", + "resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-5.59.8.tgz", + "integrity": "sha512-+uWuOhBTj/L6awoWIg0BlWy0u9TyFpCHrAuQ5bNfxDaZ1Ppb3mx6tUigc74LHcbHpOHuOTOJrBoAnhdHdaea1w==", "dev": true, "engines": { "node": "^12.22.0 || ^14.17.0 || >=16.0.0" @@ -4659,13 +4659,13 @@ } }, "node_modules/@typescript-eslint/type-utils/node_modules/@typescript-eslint/typescript-estree": { - "version": "5.59.2", - "resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-5.59.2.tgz", - "integrity": "sha512-+j4SmbwVmZsQ9jEyBMgpuBD0rKwi9RxRpjX71Brr73RsYnEr3Lt5QZ624Bxphp8HUkSKfqGnPJp1kA5nl0Sh7Q==", + "version": "5.59.8", + "resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-5.59.8.tgz", + "integrity": "sha512-Jy/lPSDJGNow14vYu6IrW790p7HIf/SOV1Bb6lZ7NUkLc2iB2Z9elESmsaUtLw8kVqogSbtLH9tut5GCX1RLDg==", "dev": true, "dependencies": { - "@typescript-eslint/types": "5.59.2", - "@typescript-eslint/visitor-keys": "5.59.2", + "@typescript-eslint/types": "5.59.8", + "@typescript-eslint/visitor-keys": "5.59.8", "debug": "^4.3.4", "globby": "^11.1.0", "is-glob": "^4.0.3", @@ -4686,12 +4686,12 @@ } }, "node_modules/@typescript-eslint/type-utils/node_modules/@typescript-eslint/visitor-keys": { - "version": "5.59.2", - "resolved": "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-5.59.2.tgz", - "integrity": "sha512-EEpsO8m3RASrKAHI9jpavNv9NlEUebV4qmF1OWxSTtKSFBpC1NCmWazDQHFivRf0O1DV11BA645yrLEVQ0/Lig==", + "version": "5.59.8", + "resolved": "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-5.59.8.tgz", + "integrity": "sha512-pJhi2ms0x0xgloT7xYabil3SGGlojNNKjK/q6dB3Ey0uJLMjK2UDGJvHieiyJVW/7C3KI+Z4Q3pEHkm4ejA+xQ==", "dev": true, "dependencies": { - "@typescript-eslint/types": "5.59.2", + "@typescript-eslint/types": "5.59.8", "eslint-visitor-keys": "^3.3.0" }, "engines": { @@ -4715,9 +4715,9 @@ } }, "node_modules/@typescript-eslint/type-utils/node_modules/semver": { - "version": "7.5.0", - "resolved": "https://registry.npmjs.org/semver/-/semver-7.5.0.tgz", - "integrity": "sha512-+XC0AD/R7Q2mPSRuy2Id0+CGTZ98+8f+KvwirxOKIEyid+XSx6HbC63p+O4IndTHuX5Z+JxQ0TghCkO5Cg/2HA==", + "version": "7.5.1", + "resolved": "https://registry.npmjs.org/semver/-/semver-7.5.1.tgz", + "integrity": "sha512-Wvss5ivl8TMRZXXESstBA4uR5iXgEN/VC5/sOcuXdVLzcdkz4HWetIoRfG5gb5X+ij/G9rw9YoGn3QoQ8OCSpw==", "dev": true, "dependencies": { "lru-cache": "^6.0.0" @@ -4809,17 +4809,17 @@ "dev": true }, "node_modules/@typescript-eslint/utils": { - "version": "5.59.2", - "resolved": "https://registry.npmjs.org/@typescript-eslint/utils/-/utils-5.59.2.tgz", - "integrity": "sha512-kSuF6/77TZzyGPhGO4uVp+f0SBoYxCDf+lW3GKhtKru/L8k/Hd7NFQxyWUeY7Z/KGB2C6Fe3yf2vVi4V9TsCSQ==", + "version": "5.59.8", + "resolved": "https://registry.npmjs.org/@typescript-eslint/utils/-/utils-5.59.8.tgz", + "integrity": "sha512-Tr65630KysnNn9f9G7ROF3w1b5/7f6QVCJ+WK9nhIocWmx9F+TmCAcglF26Vm7z8KCTwoKcNEBZrhlklla3CKg==", "dev": true, "dependencies": { "@eslint-community/eslint-utils": "^4.2.0", "@types/json-schema": "^7.0.9", "@types/semver": "^7.3.12", - "@typescript-eslint/scope-manager": "5.59.2", - "@typescript-eslint/types": "5.59.2", - "@typescript-eslint/typescript-estree": "5.59.2", + "@typescript-eslint/scope-manager": "5.59.8", + "@typescript-eslint/types": "5.59.8", + "@typescript-eslint/typescript-estree": "5.59.8", "eslint-scope": "^5.1.1", "semver": "^7.3.7" }, @@ -4835,13 +4835,13 @@ } }, "node_modules/@typescript-eslint/utils/node_modules/@typescript-eslint/scope-manager": { - "version": "5.59.2", - "resolved": "https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-5.59.2.tgz", - "integrity": "sha512-dB1v7ROySwQWKqQ8rEWcdbTsFjh2G0vn8KUyvTXdPoyzSL6lLGkiXEV5CvpJsEe9xIdKV+8Zqb7wif2issoOFA==", + "version": "5.59.8", + "resolved": "https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-5.59.8.tgz", + "integrity": "sha512-/w08ndCYI8gxGf+9zKf1vtx/16y8MHrZs5/tnjHhMLNSixuNcJavSX4wAiPf4aS5x41Es9YPCn44MIe4cxIlig==", "dev": true, "dependencies": { - "@typescript-eslint/types": "5.59.2", - "@typescript-eslint/visitor-keys": "5.59.2" + "@typescript-eslint/types": "5.59.8", + "@typescript-eslint/visitor-keys": "5.59.8" }, "engines": { "node": "^12.22.0 || ^14.17.0 || >=16.0.0" @@ -4852,9 +4852,9 @@ } }, "node_modules/@typescript-eslint/utils/node_modules/@typescript-eslint/types": { - "version": "5.59.2", - "resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-5.59.2.tgz", - "integrity": "sha512-LbJ/HqoVs2XTGq5shkiKaNTuVv5tTejdHgfdjqRUGdYhjW1crm/M7og2jhVskMt8/4wS3T1+PfFvL1K3wqYj4w==", + "version": "5.59.8", + "resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-5.59.8.tgz", + "integrity": "sha512-+uWuOhBTj/L6awoWIg0BlWy0u9TyFpCHrAuQ5bNfxDaZ1Ppb3mx6tUigc74LHcbHpOHuOTOJrBoAnhdHdaea1w==", "dev": true, "engines": { "node": "^12.22.0 || ^14.17.0 || >=16.0.0" @@ -4865,13 +4865,13 @@ } }, "node_modules/@typescript-eslint/utils/node_modules/@typescript-eslint/typescript-estree": { - "version": "5.59.2", - "resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-5.59.2.tgz", - "integrity": "sha512-+j4SmbwVmZsQ9jEyBMgpuBD0rKwi9RxRpjX71Brr73RsYnEr3Lt5QZ624Bxphp8HUkSKfqGnPJp1kA5nl0Sh7Q==", + "version": "5.59.8", + "resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-5.59.8.tgz", + "integrity": "sha512-Jy/lPSDJGNow14vYu6IrW790p7HIf/SOV1Bb6lZ7NUkLc2iB2Z9elESmsaUtLw8kVqogSbtLH9tut5GCX1RLDg==", "dev": true, "dependencies": { - "@typescript-eslint/types": "5.59.2", - "@typescript-eslint/visitor-keys": "5.59.2", + "@typescript-eslint/types": "5.59.8", + "@typescript-eslint/visitor-keys": "5.59.8", "debug": "^4.3.4", "globby": "^11.1.0", "is-glob": "^4.0.3", @@ -4892,12 +4892,12 @@ } }, "node_modules/@typescript-eslint/utils/node_modules/@typescript-eslint/visitor-keys": { - "version": "5.59.2", - "resolved": "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-5.59.2.tgz", - "integrity": "sha512-EEpsO8m3RASrKAHI9jpavNv9NlEUebV4qmF1OWxSTtKSFBpC1NCmWazDQHFivRf0O1DV11BA645yrLEVQ0/Lig==", + "version": "5.59.8", + "resolved": "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-5.59.8.tgz", + "integrity": "sha512-pJhi2ms0x0xgloT7xYabil3SGGlojNNKjK/q6dB3Ey0uJLMjK2UDGJvHieiyJVW/7C3KI+Z4Q3pEHkm4ejA+xQ==", "dev": true, "dependencies": { - "@typescript-eslint/types": "5.59.2", + "@typescript-eslint/types": "5.59.8", "eslint-visitor-keys": "^3.3.0" }, "engines": { @@ -4921,9 +4921,9 @@ } }, "node_modules/@typescript-eslint/utils/node_modules/semver": { - "version": "7.5.0", - "resolved": "https://registry.npmjs.org/semver/-/semver-7.5.0.tgz", - "integrity": "sha512-+XC0AD/R7Q2mPSRuy2Id0+CGTZ98+8f+KvwirxOKIEyid+XSx6HbC63p+O4IndTHuX5Z+JxQ0TghCkO5Cg/2HA==", + "version": "7.5.1", + "resolved": "https://registry.npmjs.org/semver/-/semver-7.5.1.tgz", + "integrity": "sha512-Wvss5ivl8TMRZXXESstBA4uR5iXgEN/VC5/sOcuXdVLzcdkz4HWetIoRfG5gb5X+ij/G9rw9YoGn3QoQ8OCSpw==", "dev": true, "dependencies": { "lru-cache": "^6.0.0" @@ -7530,15 +7530,15 @@ } }, "node_modules/eslint": { - "version": "8.39.0", - "resolved": "https://registry.npmjs.org/eslint/-/eslint-8.39.0.tgz", - "integrity": "sha512-mwiok6cy7KTW7rBpo05k6+p4YVZByLNjAZ/ACB9DRCu4YDRwjXI01tWHp6KAUWelsBetTxKK/2sHB0vdS8Z2Og==", + "version": "8.41.0", + "resolved": "https://registry.npmjs.org/eslint/-/eslint-8.41.0.tgz", + "integrity": "sha512-WQDQpzGBOP5IrXPo4Hc0814r4/v2rrIsB0rhT7jtunIalgg6gYXWhRMOejVO8yH21T/FGaxjmFjBMNqcIlmH1Q==", "dev": true, "dependencies": { "@eslint-community/eslint-utils": "^4.2.0", "@eslint-community/regexpp": "^4.4.0", - "@eslint/eslintrc": "^2.0.2", - "@eslint/js": "8.39.0", + "@eslint/eslintrc": "^2.0.3", + "@eslint/js": "8.41.0", "@humanwhocodes/config-array": "^0.11.8", "@humanwhocodes/module-importer": "^1.0.1", "@nodelib/fs.walk": "^1.2.8", @@ -7549,8 +7549,8 @@ "doctrine": "^3.0.0", "escape-string-regexp": "^4.0.0", "eslint-scope": "^7.2.0", - "eslint-visitor-keys": "^3.4.0", - "espree": "^9.5.1", + "eslint-visitor-keys": "^3.4.1", + "espree": "^9.5.2", "esquery": "^1.4.2", "esutils": "^2.0.2", "fast-deep-equal": "^3.1.3", @@ -7558,13 +7558,12 @@ "find-up": "^5.0.0", "glob-parent": "^6.0.2", "globals": "^13.19.0", - "grapheme-splitter": "^1.0.4", + "graphemer": "^1.4.0", "ignore": "^5.2.0", "import-fresh": "^3.0.0", "imurmurhash": "^0.1.4", "is-glob": "^4.0.0", "is-path-inside": "^3.0.3", - "js-sdsl": "^4.1.4", "js-yaml": "^4.1.0", "json-stable-stringify-without-jsonify": "^1.0.1", "levn": "^0.4.1", @@ -7587,12 +7586,12 @@ } }, "node_modules/eslint-config-next": { - "version": "13.3.4", - "resolved": "https://registry.npmjs.org/eslint-config-next/-/eslint-config-next-13.3.4.tgz", - "integrity": "sha512-TknEcP+EdTqLvJ2zMY1KnWqcx8ZHl1C2Tjjbq3qmtWcHRU5oxe1PAsz3vrKG3NOzonSaPcB2SpCSfYqcgj6nfA==", + "version": "13.4.4", + "resolved": "https://registry.npmjs.org/eslint-config-next/-/eslint-config-next-13.4.4.tgz", + "integrity": "sha512-z/PMbm6L0iC/fwISULxe8IVy4DtNqZk2wQY711o35klenq70O6ns82A8yuMVCFjHC0DIyB2lyugesRtuk9u8dQ==", "dev": true, "dependencies": { - "@next/eslint-plugin-next": "13.3.4", + "@next/eslint-plugin-next": "13.4.4", "@rushstack/eslint-patch": "^1.1.3", "@typescript-eslint/parser": "^5.42.0", "eslint-import-resolver-node": "^0.3.6", @@ -7995,9 +7994,9 @@ } }, "node_modules/eslint-visitor-keys": { - "version": "3.4.0", - "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-3.4.0.tgz", - "integrity": "sha512-HPpKPUBQcAsZOsHAFwTtIKcYlCje62XB7SEAcxjtmW6TD1WVpkS6i6/hOVtTZIl4zGj/mBqpFVGvaDneik+VoQ==", + "version": "3.4.1", + "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-3.4.1.tgz", + "integrity": "sha512-pZnmmLwYzf+kWaM/Qgrvpen51upAktaaiI01nsJD/Yr3lMOdNtq0cxkrrg16w64VtisN6okbs7Q8AfGqj4c9fA==", "dev": true, "engines": { "node": "^12.22.0 || ^14.17.0 || >=16.0.0" @@ -8132,14 +8131,14 @@ } }, "node_modules/espree": { - "version": "9.5.1", - "resolved": "https://registry.npmjs.org/espree/-/espree-9.5.1.tgz", - "integrity": "sha512-5yxtHSZXRSW5pvv3hAlXM5+/Oswi1AUFqBmbibKb5s6bp3rGIDkyXU6xCoyuuLhijr4SFwPrXRoZjz0AZDN9tg==", + "version": "9.5.2", + "resolved": "https://registry.npmjs.org/espree/-/espree-9.5.2.tgz", + "integrity": "sha512-7OASN1Wma5fum5SrNhFMAMJxOUAbhyfQ8dQ//PJaJbNw0URTPWqIghHWt1MmAANKhHZIYOHruW4Kw4ruUWOdGw==", "dev": true, "dependencies": { "acorn": "^8.8.0", "acorn-jsx": "^5.3.2", - "eslint-visitor-keys": "^3.4.0" + "eslint-visitor-keys": "^3.4.1" }, "engines": { "node": "^12.22.0 || ^14.17.0 || >=16.0.0" @@ -9320,6 +9319,12 @@ "integrity": "sha512-bzh50DW9kTPM00T8y4o8vQg89Di9oLJVLW/KaOGIXJWP/iqCN6WKYkbNOF04vFLJhwcpYUh9ydh/+5vpOqV4YQ==", "dev": true }, + "node_modules/graphemer": { + "version": "1.4.0", + "resolved": "https://registry.npmjs.org/graphemer/-/graphemer-1.4.0.tgz", + "integrity": "sha512-EtKwoO6kxCL9WO5xipiHTZlSzBm7WLT627TqC/uVRd0HKmq8NXyebnNYxDoBi7wt8eTWrUrKXCOVaFq9x1kgag==", + "dev": true + }, "node_modules/gulp": { "version": "4.0.2", "resolved": "https://registry.npmjs.org/gulp/-/gulp-4.0.2.tgz", @@ -12743,16 +12748,6 @@ "url": "https://github.com/chalk/supports-color?sponsor=1" } }, - "node_modules/js-sdsl": { - "version": "4.3.0", - "resolved": "https://registry.npmjs.org/js-sdsl/-/js-sdsl-4.3.0.tgz", - "integrity": "sha512-mifzlm2+5nZ+lEcLJMoBK0/IH/bDg8XnJfd/Wq6IP+xoCjLZsTOnV2QpxlVbX9bMnkl5PdEjNtBJ9Cj1NjifhQ==", - "dev": true, - "funding": { - "type": "opencollective", - "url": "https://opencollective.com/js-sdsl" - } - }, "node_modules/js-tokens": { "version": "4.0.0", "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz", @@ -12892,9 +12887,9 @@ } }, "node_modules/jspdf-autotable": { - "version": "3.5.28", - "resolved": "https://registry.npmjs.org/jspdf-autotable/-/jspdf-autotable-3.5.28.tgz", - "integrity": "sha512-eNYt5mUxCGa1Y0bmOhGXU+Va/P2jNkgOgUPGIpZp2rbZUauU34s0q3S59Jps5zi2u90nQy7DmD/D+sdesJLIEA==", + "version": "3.5.29", + "resolved": "https://registry.npmjs.org/jspdf-autotable/-/jspdf-autotable-3.5.29.tgz", + "integrity": "sha512-LCQ/FwlJJj2U9IEfjSXLmPk0pXizjJPBd46UpS8JysmU8nK8GnKRvbhct3bL9F014OO9wrssqSsRvuprRDd0WA==", "peerDependencies": { "jspdf": "^2.5.1" } @@ -18064,9 +18059,9 @@ "dev": true }, "node_modules/typedoc": { - "version": "0.24.6", - "resolved": "https://registry.npmjs.org/typedoc/-/typedoc-0.24.6.tgz", - "integrity": "sha512-c3y3h45xJv3qYwKDAwU6Cl+26CjT0ZvblHzfHJ+SjQDM4p1mZxtgHky4lhmG0+nNarRht8kADfZlbspJWdZarQ==", + "version": "0.24.7", + "resolved": "https://registry.npmjs.org/typedoc/-/typedoc-0.24.7.tgz", + "integrity": "sha512-zzfKDFIZADA+XRIp2rMzLe9xZ6pt12yQOhCr7cD7/PBTjhPmMyMvGrkZ2lPNJitg3Hj1SeiYFNzCsSDrlpxpKw==", "dev": true, "dependencies": { "lunr": "^2.3.9", @@ -18109,16 +18104,16 @@ } }, "node_modules/typescript": { - "version": "4.9.5", - "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.9.5.tgz", - "integrity": "sha512-1FXk9E2Hm+QzZQ7z+McJiHL4NW1F2EzMu9Nq9i3zAaGqibafqYwCVU6WyWAuyQRRzOlxou8xZSyXLEN8oKj24g==", + "version": "5.0.4", + "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.0.4.tgz", + "integrity": "sha512-cW9T5W9xY37cc+jfEnaUvX91foxtHkza3Nw3wkoF4sSlKn0MONdkdEndig/qPBWXNkmplh3NzayQzCiHM4/hqw==", "dev": true, "bin": { "tsc": "bin/tsc", "tsserver": "bin/tsserver" }, "engines": { - "node": ">=4.2.0" + "node": ">=12.20" } }, "node_modules/uglify-js": { diff --git a/package.json b/package.json index 19ea7c8ccd..59a7fdb5be 100644 --- a/package.json +++ b/package.json @@ -28,7 +28,7 @@ "formik": "^2.2.9", "fs-extra": "^10.1.0", "jspdf": "2.5.1", - "jspdf-autotable": "3.5.28", + "jspdf-autotable": "3.5.29", "next": "12.3.4", "path": "^0.12.7", "primeflex": "^3.3.0", @@ -56,13 +56,13 @@ "@testing-library/jest-dom": "^5.16.5", "@testing-library/react": "^13.4.0", "@testing-library/user-event": "^14.4.3", - "@types/node": "^18.16.3", - "@types/react": "^18.2.0", - "@types/react-dom": "^18.2.1", - "@types/react-transition-group": "^4.4.5", - "@typescript-eslint/eslint-plugin": "^5.59.2", - "eslint": "8.39.0", - "eslint-config-next": "13.3.4", + "@types/node": "^20.2.5", + "@types/react": "^18.2.8", + "@types/react-dom": "^18.2.4", + "@types/react-transition-group": "^4.4.6", + "@typescript-eslint/eslint-plugin": "^5.59.8", + "eslint": "8.41.0", + "eslint-config-next": "13.4.4", "eslint-config-prettier": "^8.8.0", "eslint-plugin-jest-dom": "^4.0.3", "gulp": "^4.0.2", @@ -78,8 +78,8 @@ "rollup-plugin-postcss": "^4.0.2", "rollup-plugin-terser": "^7.0.2", "sass": "^1.62.1", - "typedoc": "^0.24.6", - "typescript": "^4.9.4" + "typedoc": "^0.24.7", + "typescript": "^5.0.4" }, "engines": { "node": ">=16" diff --git a/pages/datatable/index.js b/pages/datatable/index.js index 71f3d7b37d..e27ec19e6f 100644 --- a/pages/datatable/index.js +++ b/pages/datatable/index.js @@ -1,3 +1,6 @@ +import DocApiTable from '../../components/doc/common/docapitable'; +import { PTDoc } from '../../components/doc/datatable/pt/ptdoc'; +import { Wireframe } from '../../components/doc/datatable/pt/wireframe'; import { DocComponent } from '../../components/doc/common/doccomponent'; import { AccessibilityDoc } from '../../components/doc/datatable/accessibilitydoc'; import { BasicDoc } from '../../components/doc/datatable/basicdoc'; @@ -381,8 +384,40 @@ const DataTableDemo = () => { component: AccessibilityDoc } ]; + const ptDocs = [ + { + id: 'pt.wireframe', + label: 'Wireframe', + component: Wireframe + }, + { + id: 'pt.datatable.options', + label: 'DataTable PT Options', + component: DocApiTable + }, + { + id: 'pt.column.options', + label: 'Column PT Options', + component: DocApiTable + }, + { + id: 'pt.columngroup.options', + label: 'ColumnGroup PT Options', + component: DocApiTable + }, + { + id: 'pt.row.options', + label: 'Row PT Options', + component: DocApiTable + }, + { + id: 'pt.demo', + label: 'Example', + component: PTDoc + } + ]; - return ; + return ; }; export default DataTableDemo; diff --git a/pages/dataview/index.js b/pages/dataview/index.js index 11b5918592..df00ded8fb 100644 --- a/pages/dataview/index.js +++ b/pages/dataview/index.js @@ -1,3 +1,6 @@ +import DocApiTable from '../../components/doc/common/docapitable'; +import { PTDoc } from '../../components/doc/dataview/pt/ptdoc'; +import { Wireframe } from '../../components/doc/dataview/pt/wireframe'; import { DocComponent } from '../../components/doc/common/doccomponent'; import { AccessibilityDoc } from '../../components/doc/dataview/accessibilitydoc'; import { BasicDoc } from '../../components/doc/dataview/basicdoc'; @@ -57,8 +60,40 @@ const DataViewDemo = () => { component: AccessibilityDoc } ]; + const ptDocs = [ + { + id: 'pt.wireframe', + label: 'Wireframe', + component: Wireframe + }, + { + id: 'pt.dataview.options', + label: 'DataView PT Options', + component: DocApiTable + }, + { + id: 'pt.dataviewlayoutoptions.options', + label: 'DataViewLayoutOptions PT Options', + component: DocApiTable + }, + { + id: 'pt.demo', + label: 'Example', + component: PTDoc + } + ]; - return ; + return ( + + ); }; export default DataViewDemo; diff --git a/pages/landing/herosection.js b/pages/landing/herosection.js index 02ba633938..7671a871c6 100644 --- a/pages/landing/herosection.js +++ b/pages/landing/herosection.js @@ -55,7 +55,7 @@ const HeroSection = () => {
-
(window.location.href = 'https://www.primefaces.org/primeflex')}> +
(window.location.href = 'https://primeflex.org')}>
primereact icons
diff --git a/pages/uikit/index.js b/pages/uikit/index.js index 74c0100a62..e30d7b0180 100644 --- a/pages/uikit/index.js +++ b/pages/uikit/index.js @@ -134,7 +134,8 @@ const UIKitPage = (props) => {
For individual designers
- $99 + $99 + $49
    @@ -174,7 +175,8 @@ const UIKitPage = (props) => {
    For small teams
    - $249 + $249 + $149