From 8c95949913f36f71c8188e6b4b785aa16c33d18c Mon Sep 17 00:00:00 2001
From: Melloware <mellowaredev@gmail.com>
Date: Tue, 9 Jan 2024 12:01:59 -0500
Subject: [PATCH] Port fixes3 (#5711)
* Fix #5384: TreeTable support hidden columns
* fix:#5553:TreeTable: need to be converted to data- lookups instead of className lookups
* TreeTable
* Fix #5597: TreeTable body align
* Fix #5393: Tree propagate icons to leaf nodes
* Fix #5233: Cell editor ColumnEditorOptions param fix
* Fix #5398: Slider with min value rendered incorrectly
* Fix #5340: MutliSelect emptyMessage don't add to DOM
* Fix #4190: Chip aria fixes
* Fix #5414: p-disabled for svg icons
* Fix #5424: CascadeSelect use data instead of CSS selector
* Fix #5425: CascadeSelect fix for StrictMode
* Fix #5440: InputText only print className once
---
.../__snapshots__/BlockUI.spec.js.snap | 8 +
components/lib/cascadeselect/CascadeSelect.js | 3 +-
.../lib/cascadeselect/CascadeSelectSub.js | 4 +-
components/lib/chip/Chip.js | 1 +
.../lib/chip/__snapshots__/Chip.spec.js.snap | 48 +++-
components/lib/chips/Chips.js | 3 +-
components/lib/componentbase/ComponentBase.js | 3 +-
components/lib/datatable/BodyCell.js | 2 +
components/lib/datatable/datatable.d.ts | 3 +-
.../__snapshots__/Divider.spec.js.snap | 9 +
.../__snapshots__/Fieldset.spec.js.snap | 213 +-----------------
components/lib/inputtext/InputText.js | 4 +-
components/lib/inputtext/InputText.spec.js | 12 +
components/lib/inputtext/InputTextBase.js | 9 +-
.../__snapshots__/InputText.spec.js.snap | 10 +
.../__snapshots__/Message.spec.js.snap | 8 +
components/lib/multiselect/MultiSelectBase.js | 1 +
.../panel/__snapshots__/Panel.spec.js.snap | 20 +-
components/lib/passthrough/tailwind/index.js | 20 +-
.../__snapshots__/ProgressBar.spec.js.snap | 2 +
.../ProgressSpinner.spec.js.snap | 8 +-
.../__snapshots__/Skeleton.spec.js.snap | 9 +
components/lib/slider/Slider.js | 2 +-
.../__snapshots__/Splitter.spec.js.snap | 21 ++
components/lib/tree/Tree.js | 52 ++---
components/lib/tree/UITreeNode.js | 53 +++--
components/lib/treetable/TreeTable.js | 56 ++---
components/lib/treetable/TreeTableBase.js | 5 +-
components/lib/treetable/TreeTableBody.js | 4 +-
components/lib/treetable/TreeTableBodyCell.js | 3 +-
components/lib/treetable/TreeTableHeader.js | 31 ++-
components/lib/treetable/TreeTableRow.js | 4 +
.../lib/treetable/TreeTableScrollableView.js | 2 +-
components/lib/treetable/treetable.d.ts | 4 +-
.../useAnimatedFeatures.js | 23 +-
35 files changed, 317 insertions(+), 343 deletions(-)
diff --git a/components/lib/blockui/__snapshots__/BlockUI.spec.js.snap b/components/lib/blockui/__snapshots__/BlockUI.spec.js.snap
index 872861fc93..cf60a1da34 100644
--- a/components/lib/blockui/__snapshots__/BlockUI.spec.js.snap
+++ b/components/lib/blockui/__snapshots__/BlockUI.spec.js.snap
@@ -7,6 +7,7 @@ exports[`BlockUI block and unblock fullscreen events: blocked-event-fullscreen 1
>
<div>
<div
+ aria-busy="false"
class="p-blockui-container"
data-pc-name="blockui"
data-pc-section="root"
@@ -27,6 +28,7 @@ exports[`BlockUI block and unblock fullscreen events: unblocked-event-fullscreen
>
<div>
<div
+ aria-busy="false"
class="p-blockui-container"
data-pc-name="blockui"
data-pc-section="root"
@@ -43,6 +45,7 @@ exports[`BlockUI block and unblock fullscreen events: unblocked-event-fullscreen
exports[`BlockUI block and unblock panel events: blocked-event 1`] = `
<div>
<div
+ aria-busy="false"
class="p-blockui-container"
data-pc-name="blockui"
data-pc-section="root"
@@ -81,6 +84,7 @@ exports[`BlockUI block and unblock panel events: blocked-event 1`] = `
exports[`BlockUI block and unblock panel events: unblocked-event 1`] = `
<div>
<div
+ aria-busy="false"
class="p-blockui-container"
data-pc-name="blockui"
data-pc-section="root"
@@ -123,6 +127,7 @@ exports[`BlockUI block fullscreen 1`] = `
>
<div>
<div
+ aria-busy="true"
class="p-blockui-container"
data-pc-name="blockui"
data-pc-section="root"
@@ -143,6 +148,7 @@ exports[`BlockUI block panel 1`] = `
>
<div>
<div
+ aria-busy="true"
class="p-blockui-container"
data-pc-name="blockui"
data-pc-section="root"
@@ -186,6 +192,7 @@ exports[`BlockUI container style and className 1`] = `
>
<div>
<div
+ aria-busy="true"
class="p-blockui-container container-jest"
data-pc-name="blockui"
data-pc-section="root"
@@ -230,6 +237,7 @@ exports[`BlockUI unblock panel 1`] = `
>
<div>
<div
+ aria-busy="false"
class="p-blockui-container"
data-pc-name="blockui"
data-pc-section="root"
diff --git a/components/lib/cascadeselect/CascadeSelect.js b/components/lib/cascadeselect/CascadeSelect.js
index 96d58f5a65..37663fd207 100644
--- a/components/lib/cascadeselect/CascadeSelect.js
+++ b/components/lib/cascadeselect/CascadeSelect.js
@@ -142,7 +142,7 @@ export const CascadeSelect = React.memo(
//down
case 40:
if (overlayVisibleState) {
- DomHandler.findSingle(overlayRef.current, '.p-cascadeselect-item').children[0].focus();
+ DomHandler.findSingle(overlayRef.current, '[data-pc-section="item"]').children[0].focus();
} else if (event.altKey && props.options && props.options.length) {
show();
}
@@ -423,6 +423,7 @@ export const CascadeSelect = React.memo(
optionGroupIcon={props.optionGroupIcon}
optionLabel={props.optionLabel}
optionValue={props.optionValue}
+ parentActive={props.value != null}
level={0}
optionGroupLabel={props.optionGroupLabel}
optionGroupChildren={props.optionGroupChildren}
diff --git a/components/lib/cascadeselect/CascadeSelectSub.js b/components/lib/cascadeselect/CascadeSelectSub.js
index 803e691cdf..1dd9bf87fa 100644
--- a/components/lib/cascadeselect/CascadeSelectSub.js
+++ b/components/lib/cascadeselect/CascadeSelectSub.js
@@ -173,7 +173,9 @@ export const CascadeSelectSub = React.memo((props) => {
});
useUpdateEffect(() => {
- setActiveOptionState(null);
+ if (!props.parentActive) {
+ setActiveOptionState(null);
+ }
}, [props.parentActive]);
const createSubmenu = (option) => {
diff --git a/components/lib/chip/Chip.js b/components/lib/chip/Chip.js
index e5d487a880..d7c0e935e6 100644
--- a/components/lib/chip/Chip.js
+++ b/components/lib/chip/Chip.js
@@ -37,6 +37,7 @@ export const Chip = React.memo(
const removeIconProps = mergeProps(
{
key: 'removeIcon',
+ role: 'button',
tabIndex: 0,
className: cx('removeIcon'),
onClick: close,
diff --git a/components/lib/chip/__snapshots__/Chip.spec.js.snap b/components/lib/chip/__snapshots__/Chip.spec.js.snap
index 663370bfab..b3f9745027 100644
--- a/components/lib/chip/__snapshots__/Chip.spec.js.snap
+++ b/components/lib/chip/__snapshots__/Chip.spec.js.snap
@@ -60,6 +60,7 @@ exports[`Chip image and alt 1`] = `
exports[`Chip label 1`] = `
<div>
<div
+ aria-label="jest"
class="p-chip p-component"
data-pc-name="chip"
data-pc-section="root"
@@ -74,7 +75,50 @@ exports[`Chip label 1`] = `
</div>
`;
-exports[`Chip when removable is true it returns with remove icon: after remove 1`] = `<div />`;
+exports[`Chip when removable is true it returns with remove icon: after remove 1`] = `
+<div>
+ <div
+ class="p-chip p-component"
+ data-pc-name="chip"
+ data-pc-section="root"
+ >
+ <svg
+ aria-hidden="true"
+ class="p-icon p-chip-remove-icon"
+ data-pc-section="removeicon"
+ fill="none"
+ height="14"
+ role="button"
+ tabindex="0"
+ viewBox="0 0 14 14"
+ width="14"
+ xmlns="http://www.w3.org/2000/svg"
+ >
+ <g
+ clip-path="url(#pr_icon_clip_1)"
+ >
+ <path
+ clip-rule="evenodd"
+ d="M7 14C5.61553 14 4.26215 13.5895 3.11101 12.8203C1.95987 12.0511 1.06266 10.9579 0.532846 9.67879C0.00303296 8.3997 -0.13559 6.99224 0.134506 5.63437C0.404603 4.2765 1.07129 3.02922 2.05026 2.05026C3.02922 1.07129 4.2765 0.404603 5.63437 0.134506C6.99224 -0.13559 8.3997 0.00303296 9.67879 0.532846C10.9579 1.06266 12.0511 1.95987 12.8203 3.11101C13.5895 4.26215 14 5.61553 14 7C14 8.85652 13.2625 10.637 11.9497 11.9497C10.637 13.2625 8.85652 14 7 14ZM7 1.16667C5.84628 1.16667 4.71846 1.50879 3.75918 2.14976C2.79989 2.79074 2.05222 3.70178 1.61071 4.76768C1.16919 5.83358 1.05367 7.00647 1.27876 8.13803C1.50384 9.26958 2.05941 10.309 2.87521 11.1248C3.69102 11.9406 4.73042 12.4962 5.86198 12.7212C6.99353 12.9463 8.16642 12.8308 9.23232 12.3893C10.2982 11.9478 11.2093 11.2001 11.8502 10.2408C12.4912 9.28154 12.8333 8.15373 12.8333 7C12.8333 5.45291 12.2188 3.96918 11.1248 2.87521C10.0308 1.78125 8.5471 1.16667 7 1.16667ZM4.66662 9.91668C4.58998 9.91704 4.51404 9.90209 4.44325 9.87271C4.37246 9.84333 4.30826 9.8001 4.2544 9.74557C4.14516 9.6362 4.0838 9.48793 4.0838 9.33335C4.0838 9.17876 4.14516 9.0305 4.2544 8.92113L6.17553 7L4.25443 5.07891C4.15139 4.96832 4.09529 4.82207 4.09796 4.67094C4.10063 4.51982 4.16185 4.37563 4.26872 4.26876C4.3756 4.16188 4.51979 4.10066 4.67091 4.09799C4.82204 4.09532 4.96829 4.15142 5.07887 4.25446L6.99997 6.17556L8.92106 4.25446C9.03164 4.15142 9.1779 4.09532 9.32903 4.09799C9.48015 4.10066 9.62434 4.16188 9.73121 4.26876C9.83809 4.37563 9.89931 4.51982 9.90198 4.67094C9.90464 4.82207 9.84855 4.96832 9.74551 5.07891L7.82441 7L9.74554 8.92113C9.85478 9.0305 9.91614 9.17876 9.91614 9.33335C9.91614 9.48793 9.85478 9.6362 9.74554 9.74557C9.69168 9.8001 9.62748 9.84333 9.55669 9.87271C9.4859 9.90209 9.40996 9.91704 9.33332 9.91668C9.25668 9.91704 9.18073 9.90209 9.10995 9.87271C9.03916 9.84333 8.97495 9.8001 8.9211 9.74557L6.99997 7.82444L5.07884 9.74557C5.02499 9.8001 4.96078 9.84333 4.88999 9.87271C4.81921 9.90209 4.74326 9.91704 4.66662 9.91668Z"
+ fill="currentColor"
+ fill-rule="evenodd"
+ />
+ </g>
+ <defs>
+ <clippath
+ id="pr_icon_clip_1"
+ >
+ <rect
+ fill="white"
+ height="14"
+ width="14"
+ />
+ </clippath>
+ </defs>
+ </svg>
+ </div>
+</div>
+`;
exports[`Chip when removable is true it returns with remove icon: before remove 1`] = `
<div>
@@ -89,6 +133,7 @@ exports[`Chip when removable is true it returns with remove icon: before remove
data-pc-section="removeicon"
fill="none"
height="14"
+ role="button"
tabindex="0"
viewBox="0 0 14 14"
width="14"
@@ -135,6 +180,7 @@ exports[`Chip when removable is true the chip is removed when ENTER is pressed:
data-pc-section="removeicon"
fill="none"
height="14"
+ role="button"
tabindex="0"
viewBox="0 0 14 14"
width="14"
diff --git a/components/lib/chips/Chips.js b/components/lib/chips/Chips.js
index fe5d0690dd..5b8c8fd2bc 100644
--- a/components/lib/chips/Chips.js
+++ b/components/lib/chips/Chips.js
@@ -230,7 +230,8 @@ export const Chips = React.memo(
const iconProps = mergeProps(
{
className: cx('removeTokenIcon'),
- onClick: (event) => removeItem(event, index)
+ onClick: (event) => removeItem(event, index),
+ 'aria-hidden': 'true'
},
ptm('removeTokenIcon')
);
diff --git a/components/lib/componentbase/ComponentBase.js b/components/lib/componentbase/ComponentBase.js
index 6af640ddd4..8960da8bcd 100644
--- a/components/lib/componentbase/ComponentBase.js
+++ b/components/lib/componentbase/ComponentBase.js
@@ -265,7 +265,8 @@ svg.p-icon {
pointer-events: auto;
}
-svg.p-icon g {
+svg.p-icon g,
+.p-disabled svg.p-icon {
pointer-events: none;
}
diff --git a/components/lib/datatable/BodyCell.js b/components/lib/datatable/BodyCell.js
index 9bcb81c38d..0b3f3ca351 100644
--- a/components/lib/datatable/BodyCell.js
+++ b/components/lib/datatable/BodyCell.js
@@ -186,6 +186,8 @@ export const BodyCell = React.memo((props) => {
} else {
event.preventDefault();
}
+
+ return newRowData;
});
};
diff --git a/components/lib/datatable/datatable.d.ts b/components/lib/datatable/datatable.d.ts
index 762f8129ad..ffb149f1da 100644
--- a/components/lib/datatable/datatable.d.ts
+++ b/components/lib/datatable/datatable.d.ts
@@ -1082,8 +1082,9 @@ interface DataTableBaseProps<TValue extends DataTableValueArray> extends Omit<Re
editingRows?: DataTableValueArray | DataTableEditingRows | undefined;
/**
* Text to display when there is no data.
+ * @defaultValue No results found
*/
- emptyMessage?: React.ReactNode | ((frozen: boolean) => React.ReactNode);
+ emptyMessage?: string | React.ReactNode | ((frozen: boolean) => React.ReactNode) | undefined;
/**
* Makes row groups toggleable, default is false.
* @defaultValue false
diff --git a/components/lib/divider/__snapshots__/Divider.spec.js.snap b/components/lib/divider/__snapshots__/Divider.spec.js.snap
index b7c655b792..f0191ed4ac 100644
--- a/components/lib/divider/__snapshots__/Divider.spec.js.snap
+++ b/components/lib/divider/__snapshots__/Divider.spec.js.snap
@@ -3,6 +3,7 @@
exports[`Divider default 1`] = `
<div>
<div
+ aria-orientation="horizontal"
class="p-divider p-component p-divider-horizontal p-divider-solid p-divider-left"
data-pc-name="divider"
data-pc-section="root"
@@ -20,6 +21,7 @@ exports[`Divider default 1`] = `
exports[`Divider horizontal center 1`] = `
<div>
<div
+ aria-orientation="horizontal"
class="p-divider p-component p-divider-horizontal p-divider-solid p-divider-center"
data-pc-name="divider"
data-pc-section="root"
@@ -37,6 +39,7 @@ exports[`Divider horizontal center 1`] = `
exports[`Divider horizontal left 1`] = `
<div>
<div
+ aria-orientation="horizontal"
class="p-divider p-component p-divider-horizontal p-divider-solid p-divider-left"
data-pc-name="divider"
data-pc-section="root"
@@ -54,6 +57,7 @@ exports[`Divider horizontal left 1`] = `
exports[`Divider horizontal right 1`] = `
<div>
<div
+ aria-orientation="horizontal"
class="p-divider p-component p-divider-horizontal p-divider-solid p-divider-right"
data-pc-name="divider"
data-pc-section="root"
@@ -71,6 +75,7 @@ exports[`Divider horizontal right 1`] = `
exports[`Divider type dashed 1`] = `
<div>
<div
+ aria-orientation="horizontal"
class="p-divider p-component p-divider-horizontal p-divider-dashed p-divider-left"
data-pc-name="divider"
data-pc-section="root"
@@ -88,6 +93,7 @@ exports[`Divider type dashed 1`] = `
exports[`Divider type dotted 1`] = `
<div>
<div
+ aria-orientation="horizontal"
class="p-divider p-component p-divider-horizontal p-divider-dotted p-divider-left"
data-pc-name="divider"
data-pc-section="root"
@@ -105,6 +111,7 @@ exports[`Divider type dotted 1`] = `
exports[`Divider vertical bottom 1`] = `
<div>
<div
+ aria-orientation="vertical"
class="p-divider p-component p-divider-vertical p-divider-solid p-divider-bottom"
data-pc-name="divider"
data-pc-section="root"
@@ -122,6 +129,7 @@ exports[`Divider vertical bottom 1`] = `
exports[`Divider vertical center 1`] = `
<div>
<div
+ aria-orientation="vertical"
class="p-divider p-component p-divider-vertical p-divider-solid p-divider-center"
data-pc-name="divider"
data-pc-section="root"
@@ -139,6 +147,7 @@ exports[`Divider vertical center 1`] = `
exports[`Divider vertical top 1`] = `
<div>
<div
+ aria-orientation="vertical"
class="p-divider p-component p-divider-vertical p-divider-solid p-divider-top"
data-pc-name="divider"
data-pc-section="root"
diff --git a/components/lib/fieldset/__snapshots__/Fieldset.spec.js.snap b/components/lib/fieldset/__snapshots__/Fieldset.spec.js.snap
index 2284c11c95..7be0efdfee 100644
--- a/components/lib/fieldset/__snapshots__/Fieldset.spec.js.snap
+++ b/components/lib/fieldset/__snapshots__/Fieldset.spec.js.snap
@@ -9,7 +9,6 @@ exports[`Fieldset default 1`] = `
id="pr_id_1"
>
<div
- aria-hidden="false"
aria-labelledby="pr_id_1_header"
class="p-toggleable-content"
data-pc-section="toggleablecontent"
@@ -46,7 +45,6 @@ exports[`Fieldset legend 1`] = `
</span>
</legend>
<div
- aria-hidden="false"
aria-labelledby="fieldset_header"
class="p-toggleable-content"
data-pc-section="toggleablecontent"
@@ -64,84 +62,6 @@ exports[`Fieldset legend 1`] = `
</div>
`;
-exports[`Fieldset when Fieldset is toggleable it must expand and collapse: expandable-closed 1`] = `
-<div>
- <fieldset
- class="p-fieldset p-component p-fieldset-toggleable"
- data-pc-name="fieldset"
- data-pc-section="root"
- id="pr_id_3"
- >
- <legend
- class="p-fieldset-legend p-unselectable-text"
- data-pc-section="legend"
- >
- <a
- aria-controls="pr_id_3_content"
- aria-expanded="false"
- data-pc-section="toggler"
- href="#pr_id_3_content"
- id="pr_id_3_header"
- >
- <svg
- aria-hidden="true"
- class="p-icon p-fieldset-toggler"
- data-pc-section="togglericon"
- fill="none"
- height="14"
- viewBox="0 0 14 14"
- width="14"
- xmlns="http://www.w3.org/2000/svg"
- >
- <g
- clip-path="url(#pr_icon_clip_4)"
- >
- <path
- d="M7.67742 6.32258V0.677419C7.67742 0.497757 7.60605 0.325452 7.47901 0.198411C7.35197 0.0713707 7.17966 0 7 0C6.82034 0 6.64803 0.0713707 6.52099 0.198411C6.39395 0.325452 6.32258 0.497757 6.32258 0.677419V6.32258H0.677419C0.497757 6.32258 0.325452 6.39395 0.198411 6.52099C0.0713707 6.64803 0 6.82034 0 7C0 7.17966 0.0713707 7.35197 0.198411 7.47901C0.325452 7.60605 0.497757 7.67742 0.677419 7.67742H6.32258V13.3226C6.32492 13.5015 6.39704 13.6725 6.52358 13.799C6.65012 13.9255 6.82106 13.9977 7 14C7.17966 14 7.35197 13.9286 7.47901 13.8016C7.60605 13.6745 7.67742 13.5022 7.67742 13.3226V7.67742H13.3226C13.5022 7.67742 13.6745 7.60605 13.8016 7.47901C13.9286 7.35197 14 7.17966 14 7C13.9977 6.82106 13.9255 6.65012 13.799 6.52358C13.6725 6.39704 13.5015 6.32492 13.3226 6.32258H7.67742Z"
- fill="currentColor"
- />
- </g>
- <defs>
- <clippath
- id="pr_icon_clip_4"
- >
- <rect
- fill="white"
- height="14"
- width="14"
- />
- </clippath>
- </defs>
- </svg>
- <span
- class="p-fieldset-legend-text"
- data-pc-section="legendtitle"
- >
- Expand/Collapse
- </span>
- </a>
- </legend>
- <div
- aria-hidden="true"
- aria-labelledby="pr_id_3_header"
- class="p-toggleable-content p-toggleable-content-exit p-toggleable-content-exit-active"
- data-pc-section="toggleablecontent"
- id="pr_id_3_content"
- role="region"
- >
- <div
- class="p-fieldset-content"
- data-pc-section="content"
- >
- <p>
- Lorem ipsum dolor sit amet
- </p>
- </div>
- </div>
- </fieldset>
-</div>
-`;
-
exports[`Fieldset when Fieldset is toggleable it must expand and collapse: expandable-open 1`] = `
<div>
<fieldset
@@ -157,9 +77,11 @@ exports[`Fieldset when Fieldset is toggleable it must expand and collapse: expan
<a
aria-controls="pr_id_3_content"
aria-expanded="true"
+ aria-label="Expand/Collapse"
data-pc-section="toggler"
- href="#pr_id_3_content"
id="pr_id_3_header"
+ role="button"
+ tabindex="0"
>
<svg
aria-hidden="true"
@@ -204,131 +126,6 @@ exports[`Fieldset when Fieldset is toggleable it must expand and collapse: expan
</div>
`;
-exports[`Fieldset when Fieldset is toggleable it must expand and collapse: expandable-open 2`] = `
-<div>
- <fieldset
- class="p-fieldset p-component p-fieldset-toggleable"
- data-pc-name="fieldset"
- data-pc-section="root"
- id="pr_id_3"
- >
- <legend
- class="p-fieldset-legend p-unselectable-text"
- data-pc-section="legend"
- >
- <a
- aria-controls="pr_id_3_content"
- aria-expanded="true"
- data-pc-section="toggler"
- href="#pr_id_3_content"
- id="pr_id_3_header"
- >
- <svg
- aria-hidden="true"
- class="p-icon p-fieldset-toggler"
- data-pc-section="togglericon"
- fill="none"
- height="14"
- viewBox="0 0 14 14"
- width="14"
- xmlns="http://www.w3.org/2000/svg"
- >
- <path
- d="M13.2222 7.77778H0.777778C0.571498 7.77778 0.373667 7.69584 0.227806 7.54998C0.0819442 7.40412 0 7.20629 0 7.00001C0 6.79373 0.0819442 6.5959 0.227806 6.45003C0.373667 6.30417 0.571498 6.22223 0.777778 6.22223H13.2222C13.4285 6.22223 13.6263 6.30417 13.7722 6.45003C13.9181 6.5959 14 6.79373 14 7.00001C14 7.20629 13.9181 7.40412 13.7722 7.54998C13.6263 7.69584 13.4285 7.77778 13.2222 7.77778Z"
- fill="currentColor"
- />
- </svg>
- <span
- class="p-fieldset-legend-text"
- data-pc-section="legendtitle"
- >
- Expand/Collapse
- </span>
- </a>
- </legend>
- <div
- aria-hidden="false"
- aria-labelledby="pr_id_3_header"
- class="p-toggleable-content p-toggleable-content-enter p-toggleable-content-enter-active"
- data-pc-section="toggleablecontent"
- id="pr_id_3_content"
- role="region"
- >
- <div
- class="p-fieldset-content"
- data-pc-section="content"
- >
- <p>
- Lorem ipsum dolor sit amet
- </p>
- </div>
- </div>
- </fieldset>
-</div>
-`;
-
-exports[`Fieldset when Fieldset is toggleable it will toggle when clicked: toggleable-closed 1`] = `
-<div>
- <fieldset
- class="p-fieldset p-component p-fieldset-toggleable"
- data-pc-name="fieldset"
- data-pc-section="root"
- id="pr_id_2"
- >
- <legend
- class="p-fieldset-legend p-unselectable-text"
- data-pc-section="legend"
- >
- <a
- aria-controls="pr_id_2_content"
- aria-expanded="true"
- data-pc-section="toggler"
- href="#pr_id_2_content"
- id="pr_id_2_header"
- >
- <svg
- aria-hidden="true"
- class="p-icon p-fieldset-toggler"
- data-pc-section="togglericon"
- fill="none"
- height="14"
- viewBox="0 0 14 14"
- width="14"
- xmlns="http://www.w3.org/2000/svg"
- >
- <path
- d="M13.2222 7.77778H0.777778C0.571498 7.77778 0.373667 7.69584 0.227806 7.54998C0.0819442 7.40412 0 7.20629 0 7.00001C0 6.79373 0.0819442 6.5959 0.227806 6.45003C0.373667 6.30417 0.571498 6.22223 0.777778 6.22223H13.2222C13.4285 6.22223 13.6263 6.30417 13.7722 6.45003C13.9181 6.5959 14 6.79373 14 7.00001C14 7.20629 13.9181 7.40412 13.7722 7.54998C13.6263 7.69584 13.4285 7.77778 13.2222 7.77778Z"
- fill="currentColor"
- />
- </svg>
- <span
- class="p-fieldset-legend-text"
- data-pc-section="legendtitle"
- >
- Toggleable
- </span>
- </a>
- </legend>
- <div
- aria-labelledby="pr_id_2_header"
- class="p-toggleable-content"
- data-pc-section="toggleablecontent"
- id="pr_id_2_content"
- role="region"
- >
- <div
- class="p-fieldset-content"
- data-pc-section="content"
- >
- <p>
- Lorem ipsum dolor sit amet
- </p>
- </div>
- </div>
- </fieldset>
-</div>
-`;
-
exports[`Fieldset when Fieldset is toggleable it will toggle when clicked: toggleable-open 1`] = `
<div>
<fieldset
@@ -344,9 +141,11 @@ exports[`Fieldset when Fieldset is toggleable it will toggle when clicked: toggl
<a
aria-controls="pr_id_2_content"
aria-expanded="true"
+ aria-label="Toggleable"
data-pc-section="toggler"
- href="#pr_id_2_content"
id="pr_id_2_header"
+ role="button"
+ tabindex="0"
>
<svg
aria-hidden="true"
diff --git a/components/lib/inputtext/InputText.js b/components/lib/inputtext/InputText.js
index f571759ba6..2456ca7dd3 100644
--- a/components/lib/inputtext/InputText.js
+++ b/components/lib/inputtext/InputText.js
@@ -3,7 +3,7 @@ import { PrimeReactContext } from '../api/Api';
import { useHandleStyle } from '../componentbase/ComponentBase';
import { KeyFilter } from '../keyfilter/KeyFilter';
import { Tooltip } from '../tooltip/Tooltip';
-import { DomHandler, ObjectUtils, mergeProps } from '../utils/Utils';
+import { DomHandler, ObjectUtils, classNames, mergeProps } from '../utils/Utils';
import { InputTextBase } from './InputTextBase';
export const InputText = React.memo(
@@ -69,7 +69,7 @@ export const InputText = React.memo(
const rootProps = mergeProps(
{
- className: cx('root', { isFilled }),
+ className: classNames(props.className, cx('root', { isFilled })),
onBeforeInput: onBeforeInput,
onInput: onInput,
onKeyDown: onKeyDown,
diff --git a/components/lib/inputtext/InputText.spec.js b/components/lib/inputtext/InputText.spec.js
index 2ca9ef6006..033d609c5c 100644
--- a/components/lib/inputtext/InputText.spec.js
+++ b/components/lib/inputtext/InputText.spec.js
@@ -31,6 +31,18 @@ describe('InputText', () => {
expect(input).toHaveValue('');
expect(container).toMatchSnapshot();
});
+ test('when input has className only 1 className is printed', () => {
+ // Arrange
+ const { container } = render(<InputText className="jest" />);
+ const input = container.getElementsByTagName('input')[0];
+
+ // Act
+ fireEvent.input(input, { target: { value: 'jest' } });
+
+ // Act
+ expect(container).toMatchSnapshot();
+ expect(input).toHaveValue('jest');
+ });
test('when input is is set for validation only', () => {
// Arrange
const { container } = render(<InputText validateOnly keyfilter={`alpha`} />);
diff --git a/components/lib/inputtext/InputTextBase.js b/components/lib/inputtext/InputTextBase.js
index 258079b8db..75f78201c8 100644
--- a/components/lib/inputtext/InputTextBase.js
+++ b/components/lib/inputtext/InputTextBase.js
@@ -17,15 +17,16 @@ export const InputTextBase = ComponentBase.extend({
defaultProps: {
__TYPE: 'InputText',
__parentMetadata: null,
+ children: undefined,
+ className: null,
keyfilter: null,
- validateOnly: false,
- tooltip: null,
- tooltipOptions: null,
onBeforeInput: null,
onInput: null,
onKeyDown: null,
onPaste: null,
- children: undefined
+ tooltip: null,
+ tooltipOptions: null,
+ validateOnly: false
},
css: {
diff --git a/components/lib/inputtext/__snapshots__/InputText.spec.js.snap b/components/lib/inputtext/__snapshots__/InputText.spec.js.snap
index 8e69616d65..ebd3d0795b 100644
--- a/components/lib/inputtext/__snapshots__/InputText.spec.js.snap
+++ b/components/lib/inputtext/__snapshots__/InputText.spec.js.snap
@@ -1,5 +1,15 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
+exports[`InputText when input has className only 1 className is printed 1`] = `
+<div>
+ <input
+ class="jest p-inputtext p-component p-filled"
+ data-pc-name="inputtext"
+ data-pc-section="root"
+ />
+</div>
+`;
+
exports[`InputText when input is blank it should not have filled state 1`] = `
<div>
<input
diff --git a/components/lib/message/__snapshots__/Message.spec.js.snap b/components/lib/message/__snapshots__/Message.spec.js.snap
index 295f6a0579..b339879d77 100644
--- a/components/lib/message/__snapshots__/Message.spec.js.snap
+++ b/components/lib/message/__snapshots__/Message.spec.js.snap
@@ -3,6 +3,7 @@
exports[`Message content 1`] = `
<div>
<div
+ aria-atomic="true"
aria-live="polite"
class="p-inline-message p-component p-inline-message-info p-inline-message-icon-only"
data-pc-name="message"
@@ -19,6 +20,7 @@ exports[`Message content 1`] = `
exports[`Message default 1`] = `
<div>
<div
+ aria-atomic="true"
aria-live="polite"
class="p-inline-message p-component p-inline-message-info p-inline-message-icon-only"
data-pc-name="message"
@@ -68,6 +70,7 @@ exports[`Message default 1`] = `
exports[`Message icon 1`] = `
<div>
<div
+ aria-atomic="true"
aria-live="polite"
class="p-inline-message p-component p-inline-message-info p-inline-message-icon-only"
data-pc-name="message"
@@ -89,6 +92,7 @@ exports[`Message icon 1`] = `
exports[`Message severity error 1`] = `
<div>
<div
+ aria-atomic="true"
aria-live="polite"
class="p-inline-message p-component p-inline-message-error"
data-pc-name="message"
@@ -140,6 +144,7 @@ exports[`Message severity error 1`] = `
exports[`Message severity info 1`] = `
<div>
<div
+ aria-atomic="true"
aria-live="polite"
class="p-inline-message p-component p-inline-message-info"
data-pc-name="message"
@@ -191,6 +196,7 @@ exports[`Message severity info 1`] = `
exports[`Message severity success 1`] = `
<div>
<div
+ aria-atomic="true"
aria-live="polite"
class="p-inline-message p-component p-inline-message-success"
data-pc-name="message"
@@ -225,6 +231,7 @@ exports[`Message severity success 1`] = `
exports[`Message severity warn 1`] = `
<div>
<div
+ aria-atomic="true"
aria-live="polite"
class="p-inline-message p-component p-inline-message-warn"
data-pc-name="message"
@@ -282,6 +289,7 @@ exports[`Message severity warn 1`] = `
exports[`Message templating 1`] = `
<div>
<div
+ aria-atomic="true"
aria-live="polite"
class="p-inline-message p-component p-inline-message-info p-inline-message-icon-only"
data-pc-name="message"
diff --git a/components/lib/multiselect/MultiSelectBase.js b/components/lib/multiselect/MultiSelectBase.js
index 46bbbcb783..2e5397fded 100644
--- a/components/lib/multiselect/MultiSelectBase.js
+++ b/components/lib/multiselect/MultiSelectBase.js
@@ -215,6 +215,7 @@ export const MultiSelectBase = ComponentBase.extend({
display: 'comma',
dropdownIcon: null,
emptyFilterMessage: null,
+ emptyMessage: null,
filter: false,
filterBy: null,
filterInputAutoFocus: true,
diff --git a/components/lib/panel/__snapshots__/Panel.spec.js.snap b/components/lib/panel/__snapshots__/Panel.spec.js.snap
index 067cf0aec4..62cc9d4d01 100644
--- a/components/lib/panel/__snapshots__/Panel.spec.js.snap
+++ b/components/lib/panel/__snapshots__/Panel.spec.js.snap
@@ -136,10 +136,12 @@ exports[`Panel when Panel is toggleable it must expand and collapse: expandable-
<button
aria-controls="pr_id_4_content"
aria-expanded="false"
+ aria-label="Expand/Collapse"
class="p-panel-header-icon p-panel-toggler p-link"
data-pc-section="toggler"
id="pr_id_4_label"
- role="tab"
+ role="button"
+ type="button"
>
<svg
aria-hidden="true"
@@ -221,10 +223,12 @@ exports[`Panel when Panel is toggleable it must expand and collapse: expandable-
<button
aria-controls="pr_id_4_content"
aria-expanded="true"
+ aria-label="Expand/Collapse"
class="p-panel-header-icon p-panel-toggler p-link"
data-pc-section="toggler"
id="pr_id_4_label"
- role="tab"
+ role="button"
+ type="button"
>
<svg
aria-hidden="true"
@@ -290,10 +294,12 @@ exports[`Panel when Panel is toggleable it must expand and collapse: expandable-
<button
aria-controls="pr_id_4_content"
aria-expanded="true"
+ aria-label="Expand/Collapse"
class="p-panel-header-icon p-panel-toggler p-link"
data-pc-section="toggler"
id="pr_id_4_label"
- role="tab"
+ role="button"
+ type="button"
>
<svg
aria-hidden="true"
@@ -360,10 +366,12 @@ exports[`Panel when Panel is toggleable it will toggle when clicked: toggleable-
<button
aria-controls="pr_id_3_content"
aria-expanded="true"
+ aria-label="Toggleable"
class="p-panel-header-icon p-panel-toggler p-link"
data-pc-section="toggler"
id="pr_id_3_label"
- role="tab"
+ role="button"
+ type="button"
>
<svg
aria-hidden="true"
@@ -429,10 +437,12 @@ exports[`Panel when Panel is toggleable it will toggle when clicked: toggleable-
<button
aria-controls="pr_id_3_content"
aria-expanded="true"
+ aria-label="Toggleable"
class="p-panel-header-icon p-panel-toggler p-link"
data-pc-section="toggler"
id="pr_id_3_label"
- role="tab"
+ role="button"
+ type="button"
>
<svg
aria-hidden="true"
diff --git a/components/lib/passthrough/tailwind/index.js b/components/lib/passthrough/tailwind/index.js
index 96608b2016..858a44872f 100644
--- a/components/lib/passthrough/tailwind/index.js
+++ b/components/lib/passthrough/tailwind/index.js
@@ -2634,8 +2634,8 @@ const Tailwind = {
})
},
picklist: {
- root: 'flex',
- controls: 'flex flex-col justify-center p-5',
+ root: 'flex flex-col xl:flex-row',
+ controls: 'flex flex-row xl:flex-col justify-center p-5',
moveUpButton: {
root: {
className: classNames(
@@ -2643,7 +2643,7 @@ const Tailwind = {
'text-white bg-blue-500 border border-blue-500 rounded-md',
'transition duration-200 ease-in-out',
'justify-center px-0 py-3', // icon only
- 'mb-2', // orderlist button
+ 'mr-2 xl:mb-2', // orderlist button
'dark:bg-sky-300 dark:border-sky-300 dark:text-gray-900' //Dark Mode
)
},
@@ -2656,7 +2656,7 @@ const Tailwind = {
'text-white bg-blue-500 border border-blue-500 rounded-md',
'transition duration-200 ease-in-out',
'justify-center px-0 py-3', // icon only
- 'mb-2', // orderlist button
+ 'mr-2 xl:mb-2', // orderlist button
'dark:bg-sky-300 dark:border-sky-300 dark:text-gray-900' //Dark Mode
)
},
@@ -2669,7 +2669,7 @@ const Tailwind = {
'text-white bg-blue-500 border border-blue-500 rounded-md',
'transition duration-200 ease-in-out',
'justify-center px-0 py-3', // icon only
- 'mb-2', // orderlist button
+ 'mr-2 xl:mb-2', // orderlist button
'dark:bg-sky-300 dark:border-sky-300 dark:text-gray-900' //Dark Mode
)
},
@@ -2682,7 +2682,7 @@ const Tailwind = {
'text-white bg-blue-500 border border-blue-500 rounded-md',
'transition duration-200 ease-in-out',
'justify-center px-0 py-3', // icon only
- 'mb-2', // orderlist button
+ 'mr-2 xl:mb-2', // orderlist button
'dark:bg-sky-300 dark:border-sky-300 dark:text-gray-900' //Dark Mode
)
},
@@ -2708,7 +2708,7 @@ const Tailwind = {
'text-gray-600 dark:bg-blue-900/40': !context.selected
})
}),
- buttons: 'flex flex-col justify-center p-5',
+ buttons: 'flex flex-row xl:flex-col justify-center p-5',
movetotargetbutton: {
root: {
className: classNames(
@@ -2729,7 +2729,7 @@ const Tailwind = {
'text-white bg-blue-500 border border-blue-500 rounded-md',
'transition duration-200 ease-in-out',
'justify-center px-0 py-3', // icon only
- 'mb-2', // orderlist button
+ 'mr-2 xl:mb-2', // orderlist button
'dark:bg-sky-300 dark:border-sky-300 dark:text-gray-900' //Dark Mode
)
},
@@ -2742,7 +2742,7 @@ const Tailwind = {
'text-white bg-blue-500 border border-blue-500 rounded-md',
'transition duration-200 ease-in-out',
'justify-center px-0 py-3', // icon only
- 'mb-2', // orderlist button
+ 'mr-2 xl:mb-2', // orderlist button
'dark:bg-sky-300 dark:border-sky-300 dark:text-gray-900' //Dark Mode
)
},
@@ -2755,7 +2755,7 @@ const Tailwind = {
'text-white bg-blue-500 border border-blue-500 rounded-md',
'transition duration-200 ease-in-out',
'justify-center px-0 py-3', // icon only
- 'mb-2', // orderlist button
+ 'mr-2 xl:mb-2', // orderlist button
'dark:bg-sky-300 dark:border-sky-300 dark:text-gray-900' //Dark Mode
)
},
diff --git a/components/lib/progressbar/__snapshots__/ProgressBar.spec.js.snap b/components/lib/progressbar/__snapshots__/ProgressBar.spec.js.snap
index 61016bf4d4..e8a866222b 100644
--- a/components/lib/progressbar/__snapshots__/ProgressBar.spec.js.snap
+++ b/components/lib/progressbar/__snapshots__/ProgressBar.spec.js.snap
@@ -69,6 +69,8 @@ exports[`ProgressBar mode determinate 1`] = `
exports[`ProgressBar mode indeterminate 1`] = `
<div>
<div
+ aria-valuemax="100"
+ aria-valuemin="0"
class="p-progressbar p-component p-progressbar-indeterminate"
data-pc-name="progressbar"
data-pc-section="root"
diff --git a/components/lib/progressspinner/__snapshots__/ProgressSpinner.spec.js.snap b/components/lib/progressspinner/__snapshots__/ProgressSpinner.spec.js.snap
index 56614a106d..52c19862cb 100644
--- a/components/lib/progressspinner/__snapshots__/ProgressSpinner.spec.js.snap
+++ b/components/lib/progressspinner/__snapshots__/ProgressSpinner.spec.js.snap
@@ -7,7 +7,7 @@ exports[`ProgressSpinner animationDuration 1`] = `
class="p-progress-spinner"
data-pc-name="progressspinner"
data-pc-section="root"
- role="alert"
+ role="progressbar"
>
<svg
class="p-progress-spinner-svg"
@@ -37,7 +37,7 @@ exports[`ProgressSpinner default 1`] = `
class="p-progress-spinner"
data-pc-name="progressspinner"
data-pc-section="root"
- role="alert"
+ role="progressbar"
>
<svg
class="p-progress-spinner-svg"
@@ -67,7 +67,7 @@ exports[`ProgressSpinner fill 1`] = `
class="p-progress-spinner"
data-pc-name="progressspinner"
data-pc-section="root"
- role="alert"
+ role="progressbar"
>
<svg
class="p-progress-spinner-svg"
@@ -97,7 +97,7 @@ exports[`ProgressSpinner strokeWidth 1`] = `
class="p-progress-spinner"
data-pc-name="progressspinner"
data-pc-section="root"
- role="alert"
+ role="progressbar"
>
<svg
class="p-progress-spinner-svg"
diff --git a/components/lib/skeleton/__snapshots__/Skeleton.spec.js.snap b/components/lib/skeleton/__snapshots__/Skeleton.spec.js.snap
index e353a4512c..5659797671 100644
--- a/components/lib/skeleton/__snapshots__/Skeleton.spec.js.snap
+++ b/components/lib/skeleton/__snapshots__/Skeleton.spec.js.snap
@@ -3,6 +3,7 @@
exports[`Skeleton animation none 1`] = `
<div>
<div
+ aria-hidden="true"
class="p-skeleton p-component p-skeleton-none"
data-pc-name="skeleton"
data-pc-section="root"
@@ -14,6 +15,7 @@ exports[`Skeleton animation none 1`] = `
exports[`Skeleton animation wave 1`] = `
<div>
<div
+ aria-hidden="true"
class="p-skeleton p-component"
data-pc-name="skeleton"
data-pc-section="root"
@@ -25,6 +27,7 @@ exports[`Skeleton animation wave 1`] = `
exports[`Skeleton border radius 1`] = `
<div>
<div
+ aria-hidden="true"
class="p-skeleton p-component"
data-pc-name="skeleton"
data-pc-section="root"
@@ -36,6 +39,7 @@ exports[`Skeleton border radius 1`] = `
exports[`Skeleton border radius 2`] = `
<div>
<div
+ aria-hidden="true"
class="p-skeleton p-component"
data-pc-name="skeleton"
data-pc-section="root"
@@ -47,6 +51,7 @@ exports[`Skeleton border radius 2`] = `
exports[`Skeleton default 1`] = `
<div>
<div
+ aria-hidden="true"
class="p-skeleton p-component"
data-pc-name="skeleton"
data-pc-section="root"
@@ -58,6 +63,7 @@ exports[`Skeleton default 1`] = `
exports[`Skeleton shape circle 1`] = `
<div>
<div
+ aria-hidden="true"
class="p-skeleton p-component p-skeleton-circle"
data-pc-name="skeleton"
data-pc-section="root"
@@ -69,6 +75,7 @@ exports[`Skeleton shape circle 1`] = `
exports[`Skeleton shape rectangle 1`] = `
<div>
<div
+ aria-hidden="true"
class="p-skeleton p-component"
data-pc-name="skeleton"
data-pc-section="root"
@@ -80,6 +87,7 @@ exports[`Skeleton shape rectangle 1`] = `
exports[`Skeleton size in pixels 1`] = `
<div>
<div
+ aria-hidden="true"
class="p-skeleton p-component"
data-pc-name="skeleton"
data-pc-section="root"
@@ -91,6 +99,7 @@ exports[`Skeleton size in pixels 1`] = `
exports[`Skeleton size width and height 1`] = `
<div>
<div
+ aria-hidden="true"
class="p-skeleton p-component"
data-pc-name="skeleton"
data-pc-section="root"
diff --git a/components/lib/slider/Slider.js b/components/lib/slider/Slider.js
index 5b207471f9..ea5506d0bc 100644
--- a/components/lib/slider/Slider.js
+++ b/components/lib/slider/Slider.js
@@ -18,7 +18,7 @@ export const Slider = React.memo(
const initY = React.useRef(0);
const barWidth = React.useRef(0);
const barHeight = React.useRef(0);
- const value = props.range ? props.value || [props.min, props.max] : props.value || 0;
+ const value = props.range ? props.value || [props.min, props.max] : props.value || props.min || 0;
const horizontal = props.orientation === 'horizontal';
const vertical = props.orientation === 'vertical';
diff --git a/components/lib/splitter/__snapshots__/Splitter.spec.js.snap b/components/lib/splitter/__snapshots__/Splitter.spec.js.snap
index 5546cc388f..44920578f0 100644
--- a/components/lib/splitter/__snapshots__/Splitter.spec.js.snap
+++ b/components/lib/splitter/__snapshots__/Splitter.spec.js.snap
@@ -25,8 +25,11 @@ exports[`Splitter Nested 1`] = `
style="width: 4px;"
>
<div
+ aria-orientation="horizontal"
+ aria-valuenow="20"
class="p-splitter-gutter-handle"
data-pc-section="gutterhandler"
+ tabindex="0"
/>
</div>
<div
@@ -58,8 +61,11 @@ exports[`Splitter Nested 1`] = `
style="height: 4px;"
>
<div
+ aria-orientation="vertical"
+ aria-valuenow="15"
class="p-splitter-gutter-handle"
data-pc-section="gutterhandler"
+ tabindex="0"
/>
</div>
<div
@@ -91,8 +97,11 @@ exports[`Splitter Nested 1`] = `
style="width: 4px;"
>
<div
+ aria-orientation="horizontal"
+ aria-valuenow="20"
class="p-splitter-gutter-handle"
data-pc-section="gutterhandler"
+ tabindex="0"
/>
</div>
<div
@@ -137,8 +146,11 @@ exports[`Splitter Single Panel with size 1`] = `
style="height: 4px;"
>
<div
+ aria-orientation="vertical"
+ aria-valuenow="5"
class="p-splitter-gutter-handle"
data-pc-section="gutterhandler"
+ tabindex="0"
/>
</div>
</div>
@@ -170,8 +182,11 @@ exports[`Splitter Single Panel without size 1`] = `
style="height: 4px;"
>
<div
+ aria-orientation="vertical"
+ aria-valuenow="100"
class="p-splitter-gutter-handle"
data-pc-section="gutterhandler"
+ tabindex="0"
/>
</div>
</div>
@@ -203,8 +218,11 @@ exports[`Splitter Splitter requires two SplitterPanel components to wrap. 1`] =
style="width: 4px;"
>
<div
+ aria-orientation="horizontal"
+ aria-valuenow="50"
class="p-splitter-gutter-handle"
data-pc-section="gutterhandler"
+ tabindex="0"
/>
</div>
<div
@@ -245,8 +263,11 @@ exports[`Splitter Vertical layout 1`] = `
style="height: 4px;"
>
<div
+ aria-orientation="vertical"
+ aria-valuenow="50"
class="p-splitter-gutter-handle"
data-pc-section="gutterhandler"
+ tabindex="0"
/>
</div>
<div
diff --git a/components/lib/tree/Tree.js b/components/lib/tree/Tree.js
index 33335bfe93..3b60814ef8 100644
--- a/components/lib/tree/Tree.js
+++ b/components/lib/tree/Tree.js
@@ -341,41 +341,41 @@ export const Tree = React.memo(
hostName="Tree"
key={node.key || node.label}
node={node}
- originalOptions={props.value}
- index={index}
- last={last}
- path={String(index)}
checkboxIcon={props.checkboxIcon}
- expandIcon={props.expandIcon}
collapseIcon={props.collapseIcon}
- disabled={props.disabled}
- selectionMode={props.selectionMode}
- selectionKeys={props.selectionKeys}
- onSelectionChange={props.onSelectionChange}
- metaKeySelection={props.metaKeySelection}
contextMenuSelectionKey={props.contextMenuSelectionKey}
- onContextMenuSelectionChange={props.onContextMenuSelectionChange}
- onContextMenu={props.onContextMenu}
- propagateSelectionDown={props.propagateSelectionDown}
- propagateSelectionUp={props.propagateSelectionUp}
- onExpand={props.onExpand}
- onCollapse={props.onCollapse}
- onSelect={props.onSelect}
- onUnselect={props.onUnselect}
+ cx={cx}
+ disabled={props.disabled}
+ dragdropScope={props.dragdropScope}
+ expandIcon={props.expandIcon}
expandedKeys={expandedKeys}
- onToggle={onToggle}
- nodeTemplate={props.nodeTemplate}
- togglerTemplate={props.togglerTemplate}
+ index={index}
isNodeLeaf={isNodeLeaf}
- dragdropScope={props.dragdropScope}
- onDragStart={onDragStart}
+ last={last}
+ metaKeySelection={props.metaKeySelection}
+ nodeTemplate={props.nodeTemplate}
+ onClick={props.onNodeClick}
+ onCollapse={props.onCollapse}
+ onContextMenu={props.onContextMenu}
+ onContextMenuSelectionChange={props.onContextMenuSelectionChange}
+ onDoubleClick={props.onNodeDoubleClick}
onDragEnd={onDragEnd}
+ onDragStart={onDragStart}
onDrop={onDrop}
onDropPoint={onDropPoint}
- onClick={props.onNodeClick}
- onDoubleClick={props.onNodeDoubleClick}
+ onExpand={props.onExpand}
+ onSelect={props.onSelect}
+ onSelectionChange={props.onSelectionChange}
+ onToggle={onToggle}
+ onUnselect={props.onUnselect}
+ originalOptions={props.value}
+ path={String(index)}
+ propagateSelectionDown={props.propagateSelectionDown}
+ propagateSelectionUp={props.propagateSelectionUp}
ptm={ptm}
- cx={cx}
+ selectionKeys={props.selectionKeys}
+ selectionMode={props.selectionMode}
+ togglerTemplate={props.togglerTemplate}
/>
);
};
diff --git a/components/lib/tree/UITreeNode.js b/components/lib/tree/UITreeNode.js
index 12abbac305..2926b40c73 100644
--- a/components/lib/tree/UITreeNode.js
+++ b/components/lib/tree/UITreeNode.js
@@ -743,40 +743,43 @@ export const UITreeNode = React.memo((props) => {
<UITreeNode
key={childNode.key || childNode.label}
node={childNode}
- originalOptions={props.originalOptions}
- parent={props.node}
+ checkboxIcon={props.checkboxIcon}
+ collapseIcon={props.collapseIcon}
+ contextMenuSelectionKey={props.contextMenuSelectionKey}
+ cx={cx}
+ disabled={props.disabled}
+ dragdropScope={props.dragdropScope}
+ expandIcon={props.expandIcon}
+ expandedKeys={props.expandedKeys}
index={index}
+ isNodeLeaf={props.isNodeLeaf}
last={index === props.node.children.length - 1}
- path={props.path + '-' + index}
- disabled={props.disabled}
- selectionMode={props.selectionMode}
- selectionKeys={props.selectionKeys}
- onSelectionChange={props.onSelectionChange}
metaKeySelection={props.metaKeySelection}
- propagateSelectionDown={props.propagateSelectionDown}
- propagateSelectionUp={props.propagateSelectionUp}
- contextMenuSelectionKey={props.contextMenuSelectionKey}
- onContextMenuSelectionChange={props.onContextMenuSelectionChange}
- onContextMenu={props.onContextMenu}
- onExpand={props.onExpand}
- onCollapse={props.onCollapse}
- onSelect={props.onSelect}
- onUnselect={props.onUnselect}
+ nodeTemplate={props.nodeTemplate}
onClick={props.onClick}
+ onCollapse={props.onCollapse}
+ onContextMenu={props.onContextMenu}
+ onContextMenuSelectionChange={props.onContextMenuSelectionChange}
onDoubleClick={props.onDoubleClick}
- expandedKeys={props.expandedKeys}
- onToggle={props.onToggle}
- onPropagateUp={propagateUp}
- nodeTemplate={props.nodeTemplate}
- togglerTemplate={props.togglerTemplate}
- isNodeLeaf={props.isNodeLeaf}
- dragdropScope={props.dragdropScope}
- onDragStart={props.onDragStart}
onDragEnd={props.onDragEnd}
+ onDragStart={props.onDragStart}
onDrop={props.onDrop}
onDropPoint={props.onDropPoint}
+ onExpand={props.onExpand}
+ onPropagateUp={propagateUp}
+ onSelect={props.onSelect}
+ onSelectionChange={props.onSelectionChange}
+ onToggle={props.onToggle}
+ onUnselect={props.onUnselect}
+ originalOptions={props.originalOptions}
+ parent={props.node}
+ path={props.path + '-' + index}
+ propagateSelectionDown={props.propagateSelectionDown}
+ propagateSelectionUp={props.propagateSelectionUp}
ptm={ptm}
- cx={cx}
+ selectionKeys={props.selectionKeys}
+ selectionMode={props.selectionMode}
+ togglerTemplate={props.togglerTemplate}
/>
);
})}
diff --git a/components/lib/treetable/TreeTable.js b/components/lib/treetable/TreeTable.js
index 8278d44150..0ceadb882f 100644
--- a/components/lib/treetable/TreeTable.js
+++ b/components/lib/treetable/TreeTable.js
@@ -213,7 +213,7 @@ export const TreeTable = React.forwardRef((inProps, ref) => {
const sortNodes = (data) => {
let value = [...data];
- if (columnSortable.current && columnSortable.current === 'custom' && columnSortFunction.current) {
+ if (columnSortable.current && columnSortFunction.current) {
value = columnSortFunction.current({
data,
field: getSortField(),
@@ -369,9 +369,9 @@ export const TreeTable = React.forwardRef((inProps, ref) => {
if (newColumnWidth > 15 && nextColumnWidth > 15) {
if (props.scrollable) {
let scrollableView = findParentScrollableView(resizeColumn.current);
- let scrollableBodyTable = DomHandler.findSingle(scrollableView, 'table.p-treetable-scrollable-body-table');
- let scrollableHeaderTable = DomHandler.findSingle(scrollableView, 'table.p-treetable-scrollable-header-table');
- let scrollableFooterTable = DomHandler.findSingle(scrollableView, 'table.p-treetable-scrollable-footer-table');
+ let scrollableBodyTable = DomHandler.findSingle(scrollableView, 'table[data-pc-section="scrollablebodytable"]');
+ let scrollableHeaderTable = DomHandler.findSingle(scrollableView, 'table[data-pc-section="scrollableheadertable"]');
+ let scrollableFooterTable = DomHandler.findSingle(scrollableView, 'table[data-pc-section="scrollablefootertable"]');
let resizeColumnIndex = DomHandler.index(resizeColumn.current);
resizeColGroup(scrollableHeaderTable, resizeColumnIndex, newColumnWidth, nextColumnWidth);
@@ -388,9 +388,9 @@ export const TreeTable = React.forwardRef((inProps, ref) => {
} else if (props.columnResizeMode === 'expand') {
if (props.scrollable) {
let scrollableView = findParentScrollableView(resizeColumn.current);
- let scrollableBodyTable = DomHandler.findSingle(scrollableView, 'table.p-treetable-scrollable-body-table');
- let scrollableHeaderTable = DomHandler.findSingle(scrollableView, 'table.p-treetable-scrollable-header-table');
- let scrollableFooterTable = DomHandler.findSingle(scrollableView, 'table.p-treetable-scrollable-footer-table');
+ let scrollableBodyTable = DomHandler.findSingle(scrollableView, 'table[data-pc-section="scrollablebodytable"]');
+ let scrollableHeaderTable = DomHandler.findSingle(scrollableView, 'table[data-pc-section="scrollableheadertable"]');
+ let scrollableFooterTable = DomHandler.findSingle(scrollableView, 'table[data-pc-section="scrollablefootertable"]');
scrollableBodyTable.style.width = scrollableBodyTable.offsetWidth + delta + 'px';
scrollableHeaderTable.style.width = scrollableHeaderTable.offsetWidth + delta + 'px';
@@ -912,39 +912,39 @@ export const TreeTable = React.forwardRef((inProps, ref) => {
return (
<TreeTableBody
hostName="TreeTable"
- value={value}
- originalOptions={props.value}
checkboxIcon={props.checkboxIcon}
columns={columns}
+ contextMenuSelectionKey={props.contextMenuSelectionKey}
+ emptyMessage={props.emptyMessage}
expandedKeys={getExpandedKeys()}
- selectOnEdit={props.selectOnEdit}
- onToggle={onToggle}
- togglerTemplate={props.togglerTemplate}
- onExpand={props.onExpand}
- onCollapse={props.onCollapse}
- paginator={props.paginator}
first={getFirst()}
- rows={getRows()}
- selectionMode={props.selectionMode}
- selectionKeys={props.selectionKeys}
- onSelectionChange={props.onSelectionChange}
+ lazy={props.lazy}
+ loading={props.loading}
+ metaData={metaData}
metaKeySelection={props.metaKeySelection}
+ onCollapse={props.onCollapse}
+ onContextMenu={props.onContextMenu}
+ onContextMenuSelectionChange={props.onContextMenuSelectionChange}
+ onExpand={props.onExpand}
onRowClick={props.onRowClick}
onRowMouseEnter={props.onRowMouseEnter}
onRowMouseLeave={props.onRowMouseLeave}
onSelect={props.onSelect}
+ onSelectionChange={props.onSelectionChange}
+ onToggle={onToggle}
onUnselect={props.onUnselect}
- propagateSelectionUp={props.propagateSelectionUp}
+ originalOptions={props.value}
+ paginator={props.paginator}
propagateSelectionDown={props.propagateSelectionDown}
- lazy={props.lazy}
- rowClassName={props.rowClassName}
- emptyMessage={props.emptyMessage}
- loading={props.loading}
- contextMenuSelectionKey={props.contextMenuSelectionKey}
- onContextMenuSelectionChange={props.onContextMenuSelectionChange}
- onContextMenu={props.onContextMenu}
+ propagateSelectionUp={props.propagateSelectionUp}
ptCallbacks={ptCallbacks}
- metaData={metaData}
+ rowClassName={props.rowClassName}
+ rows={getRows()}
+ selectOnEdit={props.selectOnEdit}
+ selectionKeys={props.selectionKeys}
+ selectionMode={props.selectionMode}
+ togglerTemplate={props.togglerTemplate}
+ value={value}
/>
);
};
diff --git a/components/lib/treetable/TreeTableBase.js b/components/lib/treetable/TreeTableBase.js
index 80c9eec8e4..da135bdf9e 100644
--- a/components/lib/treetable/TreeTableBase.js
+++ b/components/lib/treetable/TreeTableBase.js
@@ -165,10 +165,11 @@ const classes = {
tbody: 'p-treetable-tbody',
tfoot: 'p-treetable-tfoot',
emptyMessage: 'p-treetable-emptymessage',
- bodyCell: ({ bodyProps: props, editingState }) =>
+ bodyCell: ({ bodyProps: props, editingState, align }) =>
classNames({
'p-editable-column': props.editor,
- 'p-cell-editing': props.editor ? editingState : false
+ 'p-cell-editing': props.editor ? editingState : false,
+ [`p-align-${align}`]: !!align
}),
sortBadge: 'p-sortable-column-badge',
headerTitle: 'p-column-title',
diff --git a/components/lib/treetable/TreeTableBody.js b/components/lib/treetable/TreeTableBody.js
index 0d7ee7fc2b..aa59e93380 100644
--- a/components/lib/treetable/TreeTableBody.js
+++ b/components/lib/treetable/TreeTableBody.js
@@ -1,6 +1,6 @@
import * as React from 'react';
import { localeOption } from '../api/Api';
-import { DomHandler, mergeProps } from '../utils/Utils';
+import { DomHandler, mergeProps, ObjectUtils } from '../utils/Utils';
import { TreeTableRow } from './TreeTableRow';
export const TreeTableBody = React.memo((props) => {
@@ -230,7 +230,7 @@ export const TreeTableBody = React.memo((props) => {
return null;
} else {
const colSpan = props.columns ? props.columns.length : null;
- const content = props.emptyMessage || localeOption('emptyMessage');
+ const content = ObjectUtils.getJSXElement(props.emptyMessage, { props: props.tableProps }) || localeOption('emptyMessage');
const emptyMessageProps = mergeProps(
{
className: cx('emptyMessage')
diff --git a/components/lib/treetable/TreeTableBodyCell.js b/components/lib/treetable/TreeTableBodyCell.js
index 964ec9abfd..da69fa285c 100644
--- a/components/lib/treetable/TreeTableBodyCell.js
+++ b/components/lib/treetable/TreeTableBodyCell.js
@@ -226,10 +226,11 @@ export const TreeTableBodyCell = (props) => {
<span {...editorKeyHelperLabelProps}></span>
</a>
);
+ const align = getColumnProp('align');
/* eslint-enable */
const bodyCellProps = mergeProps(
{
- className: classNames(bodyClassName || props.className, cx('bodyCell', { bodyProps: props, editingState })),
+ className: classNames(bodyClassName || props.className, cx('bodyCell', { bodyProps: props, editingState, align })),
style,
onClick: (e) => onClick(e),
onKeyDown: (e) => onKeyDown(e)
diff --git a/components/lib/treetable/TreeTableHeader.js b/components/lib/treetable/TreeTableHeader.js
index 379ed4f274..e415b6e4ec 100644
--- a/components/lib/treetable/TreeTableHeader.js
+++ b/components/lib/treetable/TreeTableHeader.js
@@ -39,7 +39,8 @@ export const TreeTableHeader = React.memo((props) => {
DomHandler.getAttribute(targetNode, 'data-p-sortable-column') === true ||
DomHandler.getAttribute(targetNode, 'data-pc-section') === 'headertitle' ||
DomHandler.getAttribute(targetNode, 'data-pc-section') === 'sorticon' ||
- DomHandler.getAttribute(targetNode.parentElement, 'data-pc-section') === 'sorticon'
+ DomHandler.getAttribute(targetNode.parentElement, 'data-pc-section') === 'sorticon' ||
+ (targetNode.closest('[data-p-sortable-column="true"]') && !targetNode.closest('[data-pc-section="filtermenubutton"]'))
) {
props.onSort({
originalEvent: event,
@@ -233,6 +234,10 @@ export const TreeTableHeader = React.memo((props) => {
const createHeaderCell = (column, options) => {
let filterElement;
+ if (getColumnProp(column, 'hidden')) {
+ return null;
+ }
+
if (getColumnProp(column, 'filter') && options.renderFilter) {
filterElement = getColumnProp(column, 'filterElement') || (
<InputText
@@ -279,6 +284,7 @@ export const TreeTableHeader = React.memo((props) => {
const multipleSorted = multiSortMetaData !== null;
const sorted = getColumnProp(column, 'sortable') && (singleSorted || multipleSorted);
const frozen = getColumnProp(column, 'frozen');
+ const align = getColumnProp(column, 'alignHeader');
let sortOrder = 0;
if (singleSorted) sortOrder = props.sortOrder;
@@ -294,7 +300,7 @@ export const TreeTableHeader = React.memo((props) => {
const resizer = createResizer(column);
const headerCellProps = mergeProps(
{
- className: classNames(getColumnProp(column, 'headerClassName') || getColumnProp(column, 'className'), cx('headerCell', { headerProps: props, frozen, column, options, getColumnProp, sorted })),
+ className: classNames(getColumnProp(column, 'headerClassName') || getColumnProp(column, 'className'), cx('headerCell', { headerProps: props, frozen, column, options, getColumnProp, sorted, align })),
style: getColumnProp(column, 'headerStyle') || getColumnProp(column, 'style'),
tabIndex: getColumnProp(column, 'sortable') ? props.tabIndex : null,
onClick: (e) => onHeaderClick(e, column),
@@ -322,14 +328,27 @@ export const TreeTableHeader = React.memo((props) => {
})
);
+ const headerContentProps = mergeProps(
+ {
+ className: cx('headerContent')
+ },
+ getColumnPTOptions(column, 'headerContent')
+ );
+
+ const header = (
+ <div {...headerContentProps}>
+ {title}
+ {sortIconElement}
+ {sortBadge}
+ {filterElement}
+ </div>
+ );
+
return (
<React.Fragment key={column.columnKey || column.field || options.index}>
<th ref={headerCellRef} {...headerCellProps}>
{resizer}
- {title}
- {sortIconElement}
- {sortBadge}
- {filterElement}
+ {header}
</th>
{hasTooltip && <Tooltip target={headerCellRef} content={headerTooltip} {...getColumnProp(column, 'headerTooltipOptions')} unstyled={props.unstyled} />}
</React.Fragment>
diff --git a/components/lib/treetable/TreeTableRow.js b/components/lib/treetable/TreeTableRow.js
index 96abd840d1..9daab4ad94 100644
--- a/components/lib/treetable/TreeTableRow.js
+++ b/components/lib/treetable/TreeTableRow.js
@@ -456,6 +456,10 @@ export const TreeTableRow = React.memo((props) => {
const createCell = (column, index) => {
let toggler, checkbox;
+ if (getColumnProp(column, 'hidden')) {
+ return null;
+ }
+
if (getColumnProp(column, 'expander')) {
toggler = createToggler(column);
checkbox = createCheckbox(column);
diff --git a/components/lib/treetable/TreeTableScrollableView.js b/components/lib/treetable/TreeTableScrollableView.js
index 93a5f7dd2f..9c2efd8cc9 100644
--- a/components/lib/treetable/TreeTableScrollableView.js
+++ b/components/lib/treetable/TreeTableScrollableView.js
@@ -63,7 +63,7 @@ export const TreeTableScrollableView = React.memo((props) => {
let frozenScrollBody;
if (frozenView) {
- frozenScrollBody = DomHandler.findSingle(frozenView, '.p-treetable-scrollable-body');
+ frozenScrollBody = DomHandler.findSingle(frozenView, '[data-pc-section="scrollablebody"]');
}
scrollHeaderBoxRef.current.style.transform = `translateX(-${scrollBodyRef.current.scrollLeft}px)`;
diff --git a/components/lib/treetable/treetable.d.ts b/components/lib/treetable/treetable.d.ts
index 46466297a4..99da8e44dd 100644
--- a/components/lib/treetable/treetable.d.ts
+++ b/components/lib/treetable/treetable.d.ts
@@ -620,9 +620,9 @@ export interface TreeTableProps extends Omit<React.DetailedHTMLProps<React.Input
defaultSortOrder?: 1 | 0 | -1 | undefined | null;
/**
* Text to display when there is no data.
- * @defaultValue No records found
+ * @defaultValue No results found
*/
- emptyMessage?: string | undefined;
+ emptyMessage?: string | React.ReactNode | ((props: TreeTableProps) => React.ReactNode) | undefined;
/**
* An array of keys to represent the state of the tree expansion state in controlled mode.
*/
diff --git a/components/templates/templateFeaturesAnimation/useAnimatedFeatures.js b/components/templates/templateFeaturesAnimation/useAnimatedFeatures.js
index dc16fddd00..3a3ac17f79 100644
--- a/components/templates/templateFeaturesAnimation/useAnimatedFeatures.js
+++ b/components/templates/templateFeaturesAnimation/useAnimatedFeatures.js
@@ -1,6 +1,6 @@
// useAnimatedFeatures.js
-import React, { useEffect, useState } from "react";
-import useVisible from "./useVisible";
+import { useEffect, useState } from 'react';
+import useVisible from './useVisible';
const useAnimatedFeatures = (animationRef, arrayLength, seconds = 5000) => {
const [selectedID, setSelectedID] = useState(1);
@@ -9,34 +9,35 @@ const useAnimatedFeatures = (animationRef, arrayLength, seconds = 5000) => {
const clearAllIntervals = () => {
if (intervalIds.length <= 0) return;
- intervalIds.forEach(intervalId => window.clearInterval(intervalId));
+ intervalIds.forEach((intervalId) => window.clearInterval(intervalId));
setIntervalIds([]);
};
const createInterval = () => {
const interval = setInterval(() => {
- setSelectedID(prev => (prev === arrayLength ? 1 : prev + 1));
+ setSelectedID((prev) => (prev === arrayLength ? 1 : prev + 1));
}, seconds);
- setIntervalIds(prev => [...prev, interval]);
- }
+ setIntervalIds((prev) => [...prev, interval]);
+ };
- const handleClick = cardId => {
+ const handleClick = (cardId) => {
clearAllIntervals();
setSelectedID(cardId);
- createInterval()
+ createInterval();
};
useEffect(() => {
clearAllIntervals();
if (isVisible) {
- createInterval()
+ createInterval();
} else {
clearAllIntervals();
- setSelectedID(1)
+ setSelectedID(1);
}
- }, [animationRef, isVisible]);
+ // eslint-disable-next-line react-hooks/exhaustive-deps
+ }, [isVisible]);
return { selectedID, handleClick };
};