Skip to content

Commit

Permalink
Fix #5492: Listbox passthrough fixes (#5503)
Browse files Browse the repository at this point in the history
  • Loading branch information
@melloware
melloware authored Dec 2, 2023
1 parent 3d08272 commit 7af7d56
Show file tree
Hide file tree
Showing 4 changed files with 35 additions and 24 deletions.
26 changes: 10 additions & 16 deletions components/doc/listbox/theming/tailwinddoc.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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',
Expand All @@ -44,7 +38,7 @@ const Tailwind = {
)
}
},
filtericon: '-mt-2 absolute top-1/2'
filterIcon: '-mt-2 absolute top-1/2'
}
}
`
Expand Down
14 changes: 13 additions & 1 deletion components/lib/listbox/ListBoxItem.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand All @@ -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({
Expand Down Expand Up @@ -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,
Expand Down
11 changes: 8 additions & 3 deletions components/lib/listbox/listbox.d.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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<T> = PassThroughType<T, ListBoxPassThroughMethodOptions>;

Expand Down Expand Up @@ -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
Expand Down
8 changes: 4 additions & 4 deletions components/lib/passthrough/tailwind/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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',
Expand All @@ -1275,7 +1275,7 @@ const Tailwind = {
)
}
},
filtericon: '-mt-2 absolute top-1/2'
filterIcon: '-mt-2 absolute top-1/2'
},
mention: {
root: 'relative',
Expand Down

0 comments on commit 7af7d56

Please sign in to comment.