Skip to content

Commit

Permalink
Fix #5499: Autocomplete PT fixes (#5506)
Browse files Browse the repository at this point in the history
  • Loading branch information
@melloware
melloware authored Dec 2, 2023
1 parent fc0aa22 commit cf88e9c
Show file tree
Hide file tree
Showing 7 changed files with 39 additions and 37 deletions.
35 changes: 16 additions & 19 deletions components/doc/autocomplete/theming/tailwinddoc.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,10 +7,13 @@ export function TailwindDoc(props) {
basic: `
const TRANSITIONS = {
overlay: {
enterFromClass: 'opacity-0 scale-75',
enterActiveClass: 'transition-transform transition-opacity duration-150 ease-in',
leaveActiveClass: 'transition-opacity duration-150 ease-linear',
leaveToClass: 'opacity-0'
timeout: 150,
classNames: {
enter: 'opacity-0 scale-75',
enterActive: 'opacity-100 !scale-100 transition-transform transition-opacity duration-150 ease-in',
exit: 'opacity-100',
exitActive: '!opacity-0 transition-opacity duration-150 ease-linear'
}
}
};
Expand All @@ -33,7 +36,7 @@ const Tailwind = {
'focus:outline-offset-0 focus:shadow-[0_0_0_0.2rem_rgba(191,219,254,1)] hover:border-blue-500 focus:outline-none dark:focus:shadow-[0_0_0_0.2rem_rgba(147,197,253,0.5)]'
)
},
inputtoken: {
inputToken: {
className: classNames('py-0.375rem px-0', 'flex-1 inline-flex')
},
input: ({ props }) => ({
Expand All @@ -53,28 +56,22 @@ const Tailwind = {
token: {
className: classNames('py-1 px-2 mr-2 bg-gray-300 dark:bg-gray-700 text-gray-700 dark:text-white/80 rounded-full', 'cursor-default inline-flex items-center')
},
dropdownbutton: {
dropdownButton: {
root: 'rounded-tl-none rounded-bl-none'
},
panel: {
className: classNames('bg-white text-gray-700 border-0 rounded-md shadow-lg', 'max-h-[200px] overflow-auto', 'dark:bg-gray-900 dark:text-white/80')
},
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-500 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.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.selected,
'bg-blue-50 text-blue-700 dark:bg-blue-300 dark:text-white/80': 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')
},
transition: TRANSITIONS.overlay
Expand Down
2 changes: 1 addition & 1 deletion components/doc/chips/theming/tailwinddoc.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@ const Tailwind = {
'hover:border-blue-500 focus:outline-none focus:outline-offset-0 focus:shadow-[0_0_0_0.2rem_rgba(191,219,254,1)] dark:focus:shadow-[0_0_0_0.2rem_rgba(147,197,253,0.5)]'
)
},
inputtoken: {
inputToken: {
className: classNames('py-1.5 px-0', 'flex flex-1 inline-flex')
},
input: {
Expand Down
5 changes: 3 additions & 2 deletions components/lib/autocomplete/AutoCompletePanel.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,8 @@ export const AutoCompletePanel = React.memo(
const getPTOptions = (item, key) => {
return _ptm(key, {
context: {
selected: props.selectedItem.current === item
selected: props.selectedItem.current === item,
disabled: item.disabled
}
});
};
Expand Down Expand Up @@ -107,7 +108,7 @@ export const AutoCompletePanel = React.memo(
className: cx('item', { suggestion }),
style,
onClick: (e) => props.onItemClick(e, suggestion),
'aria-selected': props.selectedItem === suggestion,
'aria-selected': props.selectedItem.current === suggestion,
'data-p-disabled': suggestion.disabled
},
getPTOptions(suggestion, 'item')
Expand Down
5 changes: 5 additions & 0 deletions components/lib/autocomplete/autocomplete.d.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -216,6 +216,11 @@ export interface AutoCompleteContext {
* @defaultValue false
*/
selected: boolean;
/**
* Current disabled state of the item as a boolean.
* @defaultValue false
*/
disabled: boolean;
}

/**
Expand Down
8 changes: 4 additions & 4 deletions components/lib/listbox/ListBoxItem.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +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 [focusedState, setFocusedState] = React.useState(false);
const {
ptCallbacks: { ptm, cx }
} = props;
Expand All @@ -14,17 +14,17 @@ export const ListBoxItem = React.memo((props) => {
context: {
selected: props.selected,
disabled: props.disabled,
focused: focused
focused: focusedState
}
});
};

const onFocus = (event) => {
setFocused(true);
setFocusedState(true);
};

const onBlur = (event) => {
setFocused(false);
setFocusedState(false);
};

const onClick = (event) => {
Expand Down
8 changes: 4 additions & 4 deletions components/lib/multiselect/MultiSelectItem.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ import { Ripple } from '../ripple/Ripple';
import { IconUtils, ObjectUtils, classNames, mergeProps } from '../utils/Utils';

export const MultiSelectItem = React.memo((props) => {
const [focused, setFocused] = React.useState(false);
const [focusedState, setFocusedState] = React.useState(false);
const { ptm, cx } = props;

const getPTOptions = (key) => {
Expand All @@ -13,7 +13,7 @@ export const MultiSelectItem = React.memo((props) => {
context: {
selected: props.selected,
disabled: props.disabled,
focused: focused
focused: focusedState
}
});
};
Expand All @@ -40,11 +40,11 @@ export const MultiSelectItem = React.memo((props) => {
};

const onFocus = (event) => {
setFocused(true);
setFocusedState(true);
};

const onBlur = (event) => {
setFocused(false);
setFocusedState(false);
};

const checkboxIconProps = mergeProps(
Expand Down
13 changes: 6 additions & 7 deletions components/lib/passthrough/tailwind/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1456,7 +1456,7 @@ const Tailwind = {
'focus:outline-offset-0 focus:shadow-[0_0_0_0.2rem_rgba(191,219,254,1)] hover:border-blue-500 focus:outline-none dark:focus:shadow-[0_0_0_0.2rem_rgba(147,197,253,0.5)]'
)
},
inputtoken: {
inputToken: {
className: classNames('py-0.375rem px-0', 'flex-1 inline-flex')
},
input: ({ props }) => ({
Expand Down Expand Up @@ -1485,13 +1485,13 @@ const Tailwind = {
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', {
'text-gray-700 hover:text-gray-700 hover:bg-gray-200 dark:text-white/80 dark:hover:bg-gray-800': !context.focused && !context.selected,
'text-gray-700 hover:text-gray-700 hover:bg-gray-200 dark:text-white/80 dark:hover:bg-gray-800': !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
'bg-blue-100 text-blue-700 dark:bg-blue-400 dark:text-white/80': context.selected,
'bg-blue-50 text-blue-700 dark:bg-blue-300 dark:text-white/80': 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')
},
transition: TRANSITIONS.overlay
Expand All @@ -1510,8 +1510,7 @@ const Tailwind = {
'hover:border-blue-500 focus:outline-none focus:outline-offset-0 focus:shadow-[0_0_0_0.2rem_rgba(191,219,254,1)] dark:focus:shadow-[0_0_0_0.2rem_rgba(147,197,253,0.5)]'
)
},

inputtoken: {
inputToken: {
className: classNames('py-1.5 px-0', 'flex flex-1 inline-flex')
},
input: {
Expand Down

0 comments on commit cf88e9c

Please sign in to comment.