From 7af7d56d8a42eafdca143855a8a473bf0091a33e Mon Sep 17 00:00:00 2001 From: Melloware Date: Sat, 2 Dec 2023 07:42:18 -0500 Subject: [PATCH] Fix #5492: Listbox passthrough fixes (#5503) --- components/doc/listbox/theming/tailwinddoc.js | 26 +++++++------------ components/lib/listbox/ListBoxItem.js | 14 +++++++++- components/lib/listbox/listbox.d.ts | 11 +++++--- components/lib/passthrough/tailwind/index.js | 8 +++--- 4 files changed, 35 insertions(+), 24 deletions(-) diff --git a/components/doc/listbox/theming/tailwinddoc.js b/components/doc/listbox/theming/tailwinddoc.js index d45b29ba23..b3b7186761 100644 --- a/components/doc/listbox/theming/tailwinddoc.js +++ b/components/doc/listbox/theming/tailwinddoc.js @@ -13,27 +13,21 @@ const Tailwind = { wrapper: 'overflow-auto', list: 'py-3 list-none m-0', item: ({ context }) => ({ - className: classNames( - 'cursor-pointer font-normal overflow-hidden relative whitespace-nowrap', - 'm-0 p-3 border-0 transition-shadow duration-200 rounded-none', - 'dark:text-white/80 dark:hover:bg-gray-800', - 'hover:text-gray-700 hover:bg-gray-200', - { - 'text-gray-700': !context.focused && !context.selected, - 'bg-gray-300 text-gray-700 dark:text-white/80 dark:bg-gray-800/90': context.focused && !context.selected, - 'bg-blue-400 text-blue-700 dark:bg-blue-400 dark:text-white/80': context.focused && context.selected, - 'bg-blue-50 text-blue-700 dark:bg-blue-300 dark:text-white/80': !context.focused && context.selected - } - ) + className: classNames('cursor-pointer font-normal overflow-hidden relative whitespace-nowrap', 'm-0 p-3 border-0 transition-shadow duration-200 rounded-none', { + 'text-gray-700 hover:text-gray-700 hover:bg-gray-200 dark:text-white/80 dark:hover:bg-gray-800': !context.focused && !context.selected, + 'bg-gray-300 text-gray-700 dark:text-white/80 dark:bg-gray-800/90 hover:text-gray-700 hover:bg-gray-200 dark:text-white/80 dark:hover:bg-gray-800': context.focused && !context.selected, + 'bg-blue-100 text-blue-700 dark:bg-blue-400 dark:text-white/80': context.focused && context.selected, + 'bg-blue-50 text-blue-700 dark:bg-blue-300 dark:text-white/80': !context.focused && context.selected + }) }), - itemgroup: { + itemGroup: { className: classNames('m-0 p-3 text-gray-800 bg-white font-bold', 'dark:bg-gray-900 dark:text-white/80', 'cursor-auto') }, header: { className: classNames('p-3 border-b border-gray-300 text-gray-700 bg-gray-100 mt-0 rounded-tl-lg rounded-tr-lg', 'dark:bg-gray-800 dark:text-white/80 dark:border-blue-900/40') }, - filtercontainer: 'relative', - filterinput: { + filterContainer: 'relative', + filterInput: { root: { className: classNames( 'pr-7 -mr-7', @@ -44,7 +38,7 @@ const Tailwind = { ) } }, - filtericon: '-mt-2 absolute top-1/2' + filterIcon: '-mt-2 absolute top-1/2' } } ` diff --git a/components/lib/listbox/ListBoxItem.js b/components/lib/listbox/ListBoxItem.js index da2f667340..c2fd3f98d8 100644 --- a/components/lib/listbox/ListBoxItem.js +++ b/components/lib/listbox/ListBoxItem.js @@ -3,6 +3,7 @@ import { Ripple } from '../ripple/Ripple'; import { DomHandler, mergeProps, ObjectUtils } from '../utils/Utils'; export const ListBoxItem = React.memo((props) => { + const [focused, setFocused] = React.useState(false); const { ptCallbacks: { ptm, cx } } = props; @@ -12,11 +13,20 @@ export const ListBoxItem = React.memo((props) => { hostName: props.hostName, context: { selected: props.selected, - disabled: props.disabled + disabled: props.disabled, + focused: focused } }); }; + const onFocus = (event) => { + setFocused(true); + }; + + const onBlur = (event) => { + setFocused(false); + }; + const onClick = (event) => { if (props.onClick) { props.onClick({ @@ -91,6 +101,8 @@ export const ListBoxItem = React.memo((props) => { onClick: onClick, onTouchEnd: onTouchEnd, onKeyDown: onKeyDown, + onFocus: onFocus, + onBlur: onBlur, tabIndex: '-1', 'aria-label': props.label, key: props.label, diff --git a/components/lib/listbox/listbox.d.ts b/components/lib/listbox/listbox.d.ts index ed1d16e4dd..bdc0e0010c 100755 --- a/components/lib/listbox/listbox.d.ts +++ b/components/lib/listbox/listbox.d.ts @@ -8,14 +8,14 @@ * */ import * as React from 'react'; +import { ComponentHooks } from '../componentbase/componentbase'; +import { InputTextPassThroughOptions } from '../inputtext/inputtext'; +import { PassThroughOptions } from '../passthrough'; import { SelectItemOptionsType } from '../selectitem/selectitem'; import { TooltipPassThroughOptions } from '../tooltip/tooltip'; import { TooltipOptions } from '../tooltip/tooltipoptions'; import { IconType, PassThroughType } from '../utils/utils'; import { VirtualScroller, VirtualScrollerPassThroughOptions, VirtualScrollerProps } from '../virtualscroller'; -import { InputTextPassThroughOptions } from '../inputtext/inputtext'; -import { PassThroughOptions } from '../passthrough'; -import { ComponentHooks } from '../componentbase/componentbase'; export declare type ListBoxPassThroughType = PassThroughType; @@ -109,6 +109,11 @@ export interface ListBoxContext { * @defaultValue false */ selected: boolean; + /** + * Current focused state of the item as a boolean. + * @defaultValue false + */ + focused: boolean; /** * Current disabled state of the item as a boolean. * @defaultValue false diff --git a/components/lib/passthrough/tailwind/index.js b/components/lib/passthrough/tailwind/index.js index 97fc12906b..51d35499bb 100644 --- a/components/lib/passthrough/tailwind/index.js +++ b/components/lib/passthrough/tailwind/index.js @@ -1257,14 +1257,14 @@ const Tailwind = { 'bg-blue-50 text-blue-700 dark:bg-blue-300 dark:text-white/80': !context.focused && context.selected }) }), - itemgroup: { + itemGroup: { className: classNames('m-0 p-3 text-gray-800 bg-white font-bold', 'dark:bg-gray-900 dark:text-white/80', 'cursor-auto') }, header: { className: classNames('p-3 border-b border-gray-300 text-gray-700 bg-gray-100 mt-0 rounded-tl-lg rounded-tr-lg', 'dark:bg-gray-800 dark:text-white/80 dark:border-blue-900/40') }, - filtercontainer: 'relative', - filterinput: { + filterContainer: 'relative', + filterInput: { root: { className: classNames( 'pr-7 -mr-7', @@ -1275,7 +1275,7 @@ const Tailwind = { ) } }, - filtericon: '-mt-2 absolute top-1/2' + filterIcon: '-mt-2 absolute top-1/2' }, mention: { root: 'relative',