Fix #5479: CascadeSelect PT fixes

primefaces · Dec 2, 2023 · 4c4d5a6 · 4c4d5a6
1 parent ad94ff5
commit 4c4d5a6
Show file tree

Hide file tree

Showing 3 changed files with 41 additions and 6 deletions.
diff --git a/components/lib/cascadeselect/CascadeSelect.js b/components/lib/cascadeselect/CascadeSelect.js
@@ -23,6 +23,9 @@ export const CascadeSelect = React.memo(
                 focused: focusedState,
                 overlayVisible: overlayVisibleState,
                 attributeSelector: attributeSelectorState
+            },
+            context: {
+                ...context
             }
         });
 
@@ -338,7 +341,7 @@ export const CascadeSelect = React.memo(
                     ref: labelRef,
                     className: cx('label', { label })
                 },
-                ptm('label')
+                ptm('label', { context: { label, ...context } })
             );
 
             return <span {...labelProps}>{label}</span>;

diff --git a/components/lib/cascadeselect/CascadeSelectSub.js b/components/lib/cascadeselect/CascadeSelectSub.js
@@ -10,9 +10,10 @@ export const CascadeSelectSub = React.memo((props) => {
     const context = React.useContext(PrimeReactContext);
     const { ptm, cx } = props;
 
-    const getPTOptions = (key) => {
+    const getPTOptions = (key, options) => {
         return ptm(key, {
-            hostName: props.hostName
+            hostName: props.hostName,
+            state: { ...options }
         });
     };
 
@@ -238,15 +239,17 @@ export const CascadeSelectSub = React.memo((props) => {
             getPTOptions('content')
         );
 
+        const isActive = activeOptionState === option;
+        const isGroup = isOptionGroup(option);
         const itemProps = mergeProps(
             {
                 className: classNames(option.className, cx('item', { option, isOptionGroup, activeOptionState })),
                 style: option.style,
                 role: 'none',
-                'data-p-item-group': isOptionGroup(option),
-                'data-p-highlight': activeOptionState === option
+                'data-p-item-group': isGroup,
+                'data-p-highlight': isActive
             },
-            getPTOptions('item')
+            getPTOptions('item', { active: isActive, group: isGroup })
         );
 
         return (

diff --git a/components/lib/cascadeselect/cascadeselect.d.ts b/components/lib/cascadeselect/cascadeselect.d.ts
@@ -9,6 +9,7 @@
  */
 import * as React from 'react';
 import { CSSTransitionProps as ReactCSSTransitionProps } from 'react-transition-group/CSSTransition';
+import { APIOptions } from '../api/api';
 import { ComponentHooks } from '../componentbase/componentbase';
 import { CSSTransitionProps } from '../csstransition';
 import { PassThroughOptions } from '../passthrough';
@@ -24,6 +25,7 @@ export declare type CascadeSelectPassThroughTransitionType = ReactCSSTransitionP
 export interface CascadeSelectPassThroughMethodOptions {
     props: CascadeSelectProps;
     state: CascadeSelectState;
+    context: CascadeSelectContext;
 }
 
 /**
@@ -44,6 +46,33 @@ export interface CascadeSelectState {
      * Current overlay attributeSelector state as a string.
      */
     attributeSelector: string;
+    /**
+     * For items, this is the state of the item.
+     */
+    active?: boolean;
+    /**
+     * For items, this is whether it is a group item or not.
+     */
+    grouped?: boolean;
+}
+
+/**
+ * Defines current inline context in CascadeSelect component.
+ */
+export interface CascadeSelectContext extends APIOptions {
+    /**
+     * Label of the currently selected item
+     */
+    label?: string;
+    /**
+     * Current overlay visible state as a boolean.
+     * @defaultValue false
+     */
+    overlayVisible: boolean;
+    /**
+     * Current overlay attributeSelector state as a string.
+     */
+    attributeSelector: string;
 }
 
 /**