From b6258a57dd7721e26fdb54c7d38b45aa44aebf4c Mon Sep 17 00:00:00 2001 From: melloware Date: Thu, 30 Nov 2023 07:45:10 -0500 Subject: [PATCH] Fix #5457: TabMenu fix tailwind styling --- components/doc/tabmenu/theming/tailwinddoc.js | 6 +-- components/lib/passthrough/tailwind/index.js | 44 +++++++++---------- components/lib/tabmenu/TabMenu.js | 7 ++- 3 files changed, 31 insertions(+), 26 deletions(-) diff --git a/components/doc/tabmenu/theming/tailwinddoc.js b/components/doc/tabmenu/theming/tailwinddoc.js index 4c6cf8d1bc..c3f02614fc 100644 --- a/components/doc/tabmenu/theming/tailwinddoc.js +++ b/components/doc/tabmenu/theming/tailwinddoc.js @@ -6,20 +6,20 @@ export function TailwindDoc(props) { const code = { basic: ` const Tailwind = { - tabmenu: { + tabmenu: { root: 'overflow-x-auto', menu: { className: classNames('flex m-0 p-0 list-none flex-nowrap', 'bg-white border-solid border-gray-300 border-b-2', 'outline-none no-underline text-base list-none') }, menuitem: 'mr-0', - action: ({ context, state }) => ({ + action: ({ context, parent }) => ({ className: classNames( 'cursor-pointer select-none flex items-center relative no-underline overflow-hidden', 'border-b-2 p-5 font-bold rounded-t-lg ', 'focus:outline-none focus:outline-offset-0 focus:shadow-[inset_0_0_0_0.2rem_rgba(191,219,254,1)] dark:focus:shadow-[inset_0_0_0_0.2rem_rgba(147,197,253,0.5)]', { 'border-gray-300 bg-white text-gray-700 hover:bg-white hover:border-gray-400 hover:text-gray-600 dark:bg-gray-900 dark:border-blue-900/40 dark:text-white/80 dark:hover:bg-gray-800/80': state.activeIndex !== context.index, // Condition-based hover styles. - 'bg-white border-blue-500 text-blue-500 dark:bg-gray-900 dark:border-blue-300 dark:text-blue-300': state.activeIndex === context.index // Condition-based active styles. + 'bg-white border-blue-500 text-blue-500 dark:bg-gray-900 dark:border-blue-300 dark:text-blue-300': parent.state.activeIndex === context.index // Condition-based active styles. } ), style: { top: '2px' } diff --git a/components/lib/passthrough/tailwind/index.js b/components/lib/passthrough/tailwind/index.js index edcde0e4b5..41fcbe629f 100644 --- a/components/lib/passthrough/tailwind/index.js +++ b/components/lib/passthrough/tailwind/index.js @@ -253,7 +253,7 @@ const Tailwind = { }, tabpanel: { header: ({ props }) => ({ - className: classNames('mr-0', { 'cursor-default pointer-events-none select-none user-select-none opacity-60': props?.disabled }) // Margin and condition-based styles. + className: classNames('mr-0', { 'cursor-default pointer-events-none select-none user-select-none opacity-60': props.disabled }) // Margin and condition-based styles. }), headerAction: ({ parent, context }) => ({ className: classNames( @@ -675,7 +675,7 @@ const Tailwind = { }, { 'px-4 py-3 text-base': props.size === null, 'text-xs py-2 px-3': props.size === 'small', 'text-xl py-3 px-4': props.size === 'large' }, { 'flex-column': props.iconPos == 'top' || props.iconPos == 'bottom' }, - { 'opacity-60 pointer-events-none cursor-default': context?.disabled } + { 'opacity-60 pointer-events-none cursor-default': context.disabled } ) }), label: ({ props }) => ({ @@ -981,9 +981,9 @@ const Tailwind = { className: classNames( 'transition-width duration-1000 ease-in-out h-full', { - 'bg-red-500': state.meter?.strength == 'weak', - 'bg-orange-500': state.meter?.strength == 'medium', - 'bg-green-500': state.meter?.strength == 'strong' + 'bg-red-500': state.meter.strength == 'weak', + 'bg-orange-500': state.meter.strength == 'medium', + 'bg-green-500': state.meter.strength == 'strong' }, { 'pr-[2.5rem] ': props.toggleMask } ) @@ -1306,7 +1306,7 @@ const Tailwind = { multiselect: { root: ({ props }) => ({ className: classNames('inline-flex cursor-pointer select-none', 'bg-white dark:bg-gray-900 border border-gray-400 dark:border-blue-900/40 transition-colors duration-200 ease-in-out rounded-md', 'w-full md:w-80', { - 'opacity-60 select-none pointer-events-none cursor-default': props?.disabled + 'opacity-60 select-none pointer-events-none cursor-default': props.disabled }) }), labelContainer: 'overflow-hidden flex flex-auto cursor-pointer', @@ -1338,8 +1338,8 @@ const Tailwind = { 'border-2 w-6 h-6 text-gray-600 dark:text-white/70 rounded-lg transition-colors duration-200', '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)]', { - 'border-gray-300 dark:border-blue-900/40 bg-white dark:bg-gray-900': !context?.selected, - 'border-blue-500 bg-blue-500': context?.selected + 'border-gray-300 dark:border-blue-900/40 bg-white dark:bg-gray-900': !context.selected, + 'border-blue-500 bg-blue-500': context.selected } ) }), @@ -1374,8 +1374,8 @@ const Tailwind = { 'border-2 w-6 h-6 text-gray-600 dark:text-white/80 rounded-lg transition-colors duration-200', '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)]', { - 'border-gray-300 dark:border-blue-900/40 bg-white dark:bg-gray-900': !context?.selected, - 'border-blue-500 bg-blue-500': context?.selected + 'border-gray-300 dark:border-blue-900/40 bg-white dark:bg-gray-900': !context.selected, + 'border-blue-500 bg-blue-500': context.selected } ) }), @@ -1429,7 +1429,7 @@ const Tailwind = { treeselect: { root: ({ props }) => ({ className: classNames('inline-flex cursor-pointer select-none', 'bg-white dark:bg-gray-900 border border-gray-400 dark:border-blue-900/40 transition-colors duration-200 ease-in-out rounded-md', 'w-full md:w-80', { - 'opacity-60 select-none pointer-events-none cursor-default': props?.disabled + 'opacity-60 select-none pointer-events-none cursor-default': props.disabled }) }), labelContainer: { @@ -1866,8 +1866,8 @@ const Tailwind = { 'flex-col top-full left-0', 'absolute py-1 bg-white dark:bg-gray-900 border-0 shadow-md w-full', { - 'hidden ': !state?.mobileActive, - 'flex ': state?.mobileActive + 'hidden ': !state.mobileActive, + 'flex ': state.mobileActive } ) }), @@ -2068,14 +2068,14 @@ const Tailwind = { className: classNames('flex m-0 p-0 list-none flex-nowrap', 'bg-white border-solid border-gray-300 border-b-2', 'outline-none no-underline text-base list-none') }, menuitem: 'mr-0', - action: ({ context, state }) => ({ + action: ({ context, parent }) => ({ className: classNames( 'cursor-pointer select-none flex items-center relative no-underline overflow-hidden', 'border-b-2 p-5 font-bold rounded-t-lg ', 'focus:outline-none focus:outline-offset-0 focus:shadow-[inset_0_0_0_0.2rem_rgba(191,219,254,1)] dark:focus:shadow-[inset_0_0_0_0.2rem_rgba(147,197,253,0.5)]', { 'border-gray-300 bg-white text-gray-700 hover:bg-white hover:border-gray-400 hover:text-gray-600 dark:bg-gray-900 dark:border-blue-900/40 dark:text-white/80 dark:hover:bg-gray-800/80': state.activeIndex !== context.index, // Condition-based hover styles. - 'bg-white border-blue-500 text-blue-500 dark:bg-gray-900 dark:border-blue-300 dark:text-blue-300': state.activeIndex === context.index // Condition-based active styles. + 'bg-white border-blue-500 text-blue-500 dark:bg-gray-900 dark:border-blue-300 dark:text-blue-300': parent.state.activeIndex === context.index // Condition-based active styles. } ), style: { top: '2px' } @@ -2343,7 +2343,7 @@ const Tailwind = { tree: { root: ({ props }) => ({ className: classNames('max-w-[30rem] md:w-full', 'bg-white dark:bg-gray-900 text-gray-700 dark:text-white/80 p-5', { - 'border border-solid border-gray-300 dark:border-blue-900/40 rounded-md': props.__parentMetadata?.parent.props.__TYPE !== 'TreeSelect' + 'border border-solid border-gray-300 dark:border-blue-900/40 rounded-md': props.__parentMetadata.parent.props.__TYPE !== 'TreeSelect' }) }), wrapper: 'overflow-auto', @@ -3170,12 +3170,12 @@ const Tailwind = { className: classNames( 'text-left border-0 border-b border-solid border-gray-300 dark:border-blue-900/40 font-bold', 'transition duration-200', - context?.size === 'small' ? 'p-2' : context?.size === 'large' ? 'p-5' : 'p-4', // Size + context.size === 'small' ? 'p-2' : context.size === 'large' ? 'p-5' : 'p-4', // Size context.sorted ? 'bg-blue-50 text-blue-700' : 'bg-slate-50 text-slate-700', // Sort context.sorted ? 'dark:text-white/80 dark:bg-blue-300' : 'dark:text-white/80 dark:bg-gray-900', // Dark Mode { 'sticky z-[1]': props.frozen || props.frozen === '', // Frozen Columns - 'border-x border-y': context?.showGridlines, + 'border-x border-y': context.showGridlines, 'overflow-hidden space-nowrap border-y relative bg-clip-padding': context.resizable // Resizable } ) @@ -3184,10 +3184,10 @@ const Tailwind = { bodycell: ({ props, context }) => ({ className: classNames( 'text-left border-0 border-b border-solid border-gray-300', - context?.size === 'small' ? 'p-2' : context?.size === 'large' ? 'p-5' : 'p-4', // Size + context.size === 'small' ? 'p-2' : context.size === 'large' ? 'p-5' : 'p-4', // Size 'dark:text-white/80 dark:border-blue-900/40', // Dark Mode { - 'sticky bg-inherit': props?.frozen || props?.frozen === '', // Frozen Columns + 'sticky bg-inherit': props.frozen || props.frozen === '', // Frozen Columns 'border-x border-y': context.showGridlines } ) @@ -3197,7 +3197,7 @@ const Tailwind = { 'text-left border-0 border-b border-solid border-gray-300 font-bold', 'bg-slate-50 text-slate-700', 'transition duration-200', - context?.size === 'small' ? 'p-2' : context?.size === 'large' ? 'p-5' : 'p-4', // Size + context.size === 'small' ? 'p-2' : context.size === 'large' ? 'p-5' : 'p-4', // Size 'dark:text-white/80 dark:bg-gray-900 dark:border-blue-900/40', // Dark Mode { 'border-x border-y': context.showGridlines @@ -3230,7 +3230,7 @@ const Tailwind = { className: classNames( 'm-0 py-3 px-5 bg-transparent', 'transition duration-200', - context?.highlighted ? 'text-blue-700 bg-blue-100 dark:text-white/80 dark:bg-blue-300' : 'text-gray-600 bg-transparent dark:text-white/80 dark:bg-transparent' + context.highlighted ? 'text-blue-700 bg-blue-100 dark:text-white/80 dark:bg-blue-300' : 'text-gray-600 bg-transparent dark:text-white/80 dark:bg-transparent' ) }), filteroperator: { diff --git a/components/lib/tabmenu/TabMenu.js b/components/lib/tabmenu/TabMenu.js index a44f10a702..6321523965 100644 --- a/components/lib/tabmenu/TabMenu.js +++ b/components/lib/tabmenu/TabMenu.js @@ -19,16 +19,21 @@ export const TabMenu = React.memo( const tabsRef = React.useRef({}); const activeIndex = props.onTabChange ? props.activeIndex : activeIndexState; - const { ptm, cx, isUnstyled } = TabMenuBase.setMetaData({ + const metaData = { props, state: { id: idState, activeIndex: activeIndexState } + }; + + const { ptm, cx, isUnstyled } = TabMenuBase.setMetaData({ + ...metaData }); const getPTOptions = (key, item, index) => { return ptm(key, { + parent: metaData, context: { item, index