diff --git a/components/doc/button/theming/tailwinddoc.js b/components/doc/button/theming/tailwinddoc.js index 1a6cd357d2..9882fcc5fc 100644 --- a/components/doc/button/theming/tailwinddoc.js +++ b/components/doc/button/theming/tailwinddoc.js @@ -5,7 +5,7 @@ import Link from 'next/link'; export function TailwindDoc(props) { const code = { basic: ` -const Tailwind = { +const Tailwind = { button: { root: ({ props, context }) => ({ className: classNames( @@ -51,7 +51,7 @@ const Tailwind = { { 'bg-transparent border-transparent': props.text && !props.plain, 'text-blue-500 dark:text-blue-400 hover:bg-blue-300/20': props.text && (props.severity === null || props.severity === 'info') && !props.plain, - 'text-gray-500 dark:text-grayy-400 hover:bg-gray-300/20': props.text && props.severity === 'secondary' && !props.plain, + 'text-gray-500 dark:text-gray-400 hover:bg-gray-300/20': props.text && props.severity === 'secondary' && !props.plain, 'text-green-500 dark:text-green-400 hover:bg-green-300/20': props.text && props.severity === 'success' && !props.plain, 'text-orange-500 dark:text-orange-400 hover:bg-orange-300/20': props.text && props.severity === 'warning' && !props.plain, 'text-purple-500 dark:text-purple-400 hover:bg-purple-300/20': props.text && props.severity === 'help' && !props.plain, @@ -114,7 +114,7 @@ const Tailwind = { const code2 = { javascript: ` -import React from 'react'; +import React from 'react'; import { Button } from 'primereact/button'; export default function UnstyledDemo() { diff --git a/components/doc/common/apidoc/index.json b/components/doc/common/apidoc/index.json index d424cfd01b..fcf97a26f1 100644 --- a/components/doc/common/apidoc/index.json +++ b/components/doc/common/apidoc/index.json @@ -1270,6 +1270,13 @@ "type": "InputNumberPassThroughOptions", "description": "Custom passthrough(pt) options for InputNumber." }, + { + "name": "inputotp", + "optional": true, + "readonly": false, + "type": "InputOtpPassThroughOptions", + "description": "Custom passthrough(pt) options for InputOtp." + }, { "name": "inputswitch", "optional": true, @@ -23141,6 +23148,14 @@ "default": "", "description": "Icon of the dropdown." }, + { + "name": "collapseIcon", + "optional": true, + "readonly": false, + "type": "IconType", + "default": "", + "description": "Icon of collapse action." + }, { "name": "dataKey", "optional": true, @@ -31588,7 +31603,7 @@ "name": "input", "optional": true, "readonly": false, - "type": "InputTextPassThroughOptions", + "type": "InputOtpPassThroughType>", "description": "Uses to pass attributes to the Tooltip component." }, { @@ -55977,6 +55992,27 @@ "type": "TreeTablePassThroughType>", "description": "Uses to pass attributes to the hidden input's DOM element." }, + { + "name": "row", + "optional": true, + "readonly": false, + "type": "RowPassThroughOptions", + "description": "Used to pass attributes to the Row helper components." + }, + { + "name": "column", + "optional": true, + "readonly": false, + "type": "ColumnPassThroughOptions", + "description": "Used to pass attributes to the Column helper components." + }, + { + "name": "tooltip", + "optional": true, + "readonly": false, + "type": "TooltipPassThroughOptions", + "description": "Uses to pass attributes tooltip's DOM element." + }, { "name": "hooks", "optional": true, diff --git a/components/doc/iconfield/basicdoc.js b/components/doc/iconfield/basicdoc.js index 95ea6f9162..956c9dce97 100644 --- a/components/doc/iconfield/basicdoc.js +++ b/components/doc/iconfield/basicdoc.js @@ -10,12 +10,12 @@ export function BasicDoc(props) { basic: ` - + - + `, javascript: ` @@ -29,12 +29,12 @@ export default function BasicDemo() {
- + - +
) @@ -51,12 +51,12 @@ export default function BasicDemo() {
- + - +
) @@ -75,12 +75,12 @@ export default function BasicDemo() {
- + - +
diff --git a/components/doc/iconfield/templatedoc.js b/components/doc/iconfield/templatedoc.js index 566a8ecbf5..27c26d0fee 100644 --- a/components/doc/iconfield/templatedoc.js +++ b/components/doc/iconfield/templatedoc.js @@ -36,7 +36,7 @@ export function TemplateDoc(props) { - + `, javascript: ` @@ -75,7 +75,7 @@ export default function TemplateDemo() { - + ) } @@ -116,7 +116,7 @@ export default function TemplateDemo() { - + ) } @@ -159,7 +159,7 @@ export default function TemplateDemo() { - + diff --git a/components/doc/inputotp/theming/tailwinddoc.js b/components/doc/inputotp/theming/tailwinddoc.js new file mode 100644 index 0000000000..84fc669f2c --- /dev/null +++ b/components/doc/inputotp/theming/tailwinddoc.js @@ -0,0 +1,55 @@ +import { DocSectionCode } from '@/components/doc/common/docsectioncode'; +import { DocSectionText } from '@/components/doc/common/docsectiontext'; +import Link from 'next/link'; + +export function TailwindDoc(props) { + const code = { + basic: ` +const Tailwind = { + inputotp: { + root: { className: 'flex items-center gap-2' }, + input: { + root: { + className: classNames( + 'box-border text-center w-10 h-11 p-3 text-slate-900 border border-gray-300 rounded-lg transition-all duration-200', + 'hover:border-cyan-500', + 'focus:border-cyan-500 focus:shadow-[0_0_0_0.2rem_#a5f3fc] focus:outline-0 focus:outline-offset-0' + ) + } + } + } +} + ` + }; + + const code2 = { + javascript: ` +import React, { useState } from 'react'; +import { InputOtp } from 'primereact/inputotp'; + +export default function BasicDemo() { + const [token, setTokens] = useState(); + + return ( +
+ setTokens(e.value)}/> +
+ ); +} + ` + }; + + return ( + <> + +

+ PrimeReact offers a built-in Tailwind theme to get you started quickly. The default values related to the component are displayed below. The component can easily be styled with your own design based on Tailwind utilities, see the{' '} + Tailwind Customization section for an example. +

+ +

A playground sample with the pre-built Tailwind theme.

+ + + + ); +} diff --git a/components/doc/messages/severitydoc.js b/components/doc/messages/severitydoc.js index 019043d374..f4db4d3e09 100644 --- a/components/doc/messages/severitydoc.js +++ b/components/doc/messages/severitydoc.js @@ -27,8 +27,8 @@ msgs.current.show([ {sticky: true, severity: 'info', summary: 'Info', detail: 'Message Content', closable: false}, {sticky: true, severity: 'success', summary: 'Success', detail: 'Message Content', closable: false}, {sticky: true, severity: 'warn', summary: 'Warning', detail: 'Message Content', closable: false}, - {sticky: true, severity: 'error', summary: 'Error', detail: 'Message Content', closable: false} - {sticky: true, severity: 'secondary', summary: 'Secondary', detail: 'Message Content', closable: false} + {sticky: true, severity: 'error', summary: 'Error', detail: 'Message Content', closable: false}, + {sticky: true, severity: 'secondary', summary: 'Secondary', detail: 'Message Content', closable: false}, {sticky: true, severity: 'contrast', summary: 'Contrast', detail: 'Message Content', closable: false} ]); `, @@ -47,8 +47,8 @@ export default function SeverityDemo() { { sticky: true, severity: 'info', summary: 'Info', detail: 'Message Content', closable: false }, { sticky: true, severity: 'success', summary: 'Success', detail: 'Message Content', closable: false }, { sticky: true, severity: 'warn', summary: 'Warning', detail: 'Message Content', closable: false }, - { sticky: true, severity: 'error', summary: 'Error', detail: 'Message Content', closable: false } - { sticky: true, severity: 'secondary', summary: 'Secondary', detail: 'Message Content', closable: false } + { sticky: true, severity: 'error', summary: 'Error', detail: 'Message Content', closable: false }, + { sticky: true, severity: 'secondary', summary: 'Secondary', detail: 'Message Content', closable: false }, { sticky: true, severity: 'contrast', summary: 'Contrast', detail: 'Message Content', closable: false } ]); } @@ -73,8 +73,8 @@ export default function SeverityDemo() { {sticky: true, severity: 'info', summary: 'Info', detail: 'Message Content'}, {sticky: true, severity: 'success', summary: 'Success', detail: 'Message Content'}, {sticky: true, severity: 'warn', summary: 'Warning', detail: 'Message Content'}, - {sticky: true, severity: 'error', summary: 'Error', detail: 'Message Content'} - {sticky: true, severity: 'secondary', summary: 'Secondary', detail: 'Message Content'} + {sticky: true, severity: 'error', summary: 'Error', detail: 'Message Content'}, + {sticky: true, severity: 'secondary', summary: 'Secondary', detail: 'Message Content'}, {sticky: true, severity: 'contrast', summary: 'Contrast', detail: 'Message Content'} ]); }); diff --git a/components/doc/radiobutton/theming/tailwinddoc.js b/components/doc/radiobutton/theming/tailwinddoc.js index dff43339c5..1649789142 100644 --- a/components/doc/radiobutton/theming/tailwinddoc.js +++ b/components/doc/radiobutton/theming/tailwinddoc.js @@ -10,7 +10,12 @@ const Tailwind = { root: { className: classNames('relative inline-flex cursor-pointer select-none align-bottom', 'w-6 h-6') }, - input: ({ props }) => ({ + input: { + className: classNames( + 'absolute appearance-none top-0 left-0 size-full p-0 m-0 opacity-0 z-10 outline-none cursor-pointer' + ), + }, + box: ({ props }) => ({ className: classNames( 'flex justify-center items-center', 'border-2 w-6 h-6 text-gray-700 rounded-full transition duration-200 ease-in-out', diff --git a/components/doc/tabview/theming/tailwinddoc.js b/components/doc/tabview/theming/tailwinddoc.js index 6251d2e739..89d629a777 100644 --- a/components/doc/tabview/theming/tailwinddoc.js +++ b/components/doc/tabview/theming/tailwinddoc.js @@ -5,7 +5,7 @@ import Link from 'next/link'; export function TailwindDoc(props) { const code = { basic: ` -const Tailwind = { +const Tailwind = { tabview: { navContainer: ({ props }) => ({ className: classNames( @@ -23,30 +23,30 @@ const Tailwind = { nav: { className: classNames('flex flex-1 list-none m-0 p-0', 'bg-transparent border border-gray-300 border-0 border-b-2', 'dark:bg-gray-900 dark:border-blue-900/40 dark:text-white/80 ') // Flex, list, margin, padding, and border styles. }, - 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. - }), - headerAction: ({ parent, context }) => ({ - className: classNames( - 'items-center cursor-pointer flex overflow-hidden relative select-none text-decoration-none user-select-none', // Flex and overflow styles. - 'border-b-2 p-5 font-bold rounded-t-md transition-shadow duration-200 m-0', // Border, padding, font, and transition styles. - 'transition-colors duration-200', // Transition duration style. - '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)]', // Focus styles. - { - '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': - parent.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': parent.state.activeIndex === context.index // Condition-based active styles. - } - ), - style: { marginBottom: '-2px' } // Negative margin style. - }), - headerTitle: { - className: classNames('leading-none whitespace-nowrap') // Leading and whitespace styles. - }, - content: { - className: classNames('bg-white p-5 border-0 text-gray-700 rounded-bl-md rounded-br-md', 'dark:bg-gray-900 dark:border-blue-900/40 dark:text-white/80') // Background, padding, border, and text styles. - } + }, + 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. + }), + headerAction: ({ parent, context }) => ({ + className: classNames( + 'items-center cursor-pointer flex overflow-hidden relative select-none text-decoration-none user-select-none', // Flex and overflow styles. + 'border-b-2 p-5 font-bold rounded-t-md transition-shadow duration-200 m-0', // Border, padding, font, and transition styles. + 'transition-colors duration-200', // Transition duration style. + '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)]', // Focus styles. + { + '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': + parent.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': parent.state.activeIndex === context.index // Condition-based active styles. + } + ), + style: { marginBottom: '-2px' } // Negative margin style. + }), + headerTitle: { + className: classNames('leading-none whitespace-nowrap') // Leading and whitespace styles. + }, + content: { + className: classNames('bg-white p-5 border-0 text-gray-700 rounded-bl-md rounded-br-md', 'dark:bg-gray-900 dark:border-blue-900/40 dark:text-white/80') // Background, padding, border, and text styles. } } } @@ -55,7 +55,7 @@ const Tailwind = { const code2 = { javascript: ` -import React from 'react'; +import React from 'react'; import { TabView, TabPanel } from 'primereact/tabview'; export default function UnstyledDemo() { @@ -64,25 +64,25 @@ export default function UnstyledDemo() {

- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. + Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo - consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. + consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

- Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, + Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo - enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui + enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Consectetur, adipisci velit, sed quia non numquam eius modi.

- At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti + At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in - culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. + culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus.

diff --git a/components/lib/api/api.d.ts b/components/lib/api/api.d.ts index 3929d14b57..1204923e72 100644 --- a/components/lib/api/api.d.ts +++ b/components/lib/api/api.d.ts @@ -42,6 +42,7 @@ import { GalleriaPassThroughOptions } from '../galleria/galleria'; import { ImagePassThroughOptions } from '../image/image'; import { InplacePassThroughOptions } from '../inplace/inplace'; import { InputNumberPassThroughOptions } from '../inputnumber/inputnumber'; +import { InputOtpPassThroughOptions } from '../inputotp/inputotp'; import { InputSwitchPassThroughOptions } from '../inputswitch/inputswitch'; import { InputTextPassThroughOptions } from '../inputtext/inputtext'; import { InputTextareaPassThroughOptions } from '../inputtextarea/inputtextarea'; @@ -447,6 +448,10 @@ export interface PrimeReactPTOptions { * Custom passthrough(pt) options for InputNumber. */ inputnumber?: InputNumberPassThroughOptions; + /** + * Custom passthrough(pt) options for InputOtp. + */ + inputotp?: InputOtpPassThroughOptions; /** * Custom passthrough(pt) options for InputSwitch. */ diff --git a/components/lib/datatable/HeaderCell.js b/components/lib/datatable/HeaderCell.js index 7587b1fefb..56f384bf6e 100644 --- a/components/lib/datatable/HeaderCell.js +++ b/components/lib/datatable/HeaderCell.js @@ -304,7 +304,9 @@ export const HeaderCell = React.memo((props) => { if (props.showSelectAll && getColumnProp('selectionMode') === 'multiple' && props.filterDisplay !== 'row') { const allRowsSelected = props.allRowsSelected(props.value); - return ; + return ( + + ); } return null; diff --git a/components/lib/datatable/TableBody.js b/components/lib/datatable/TableBody.js index 368d38effd..2a86b36dff 100644 --- a/components/lib/datatable/TableBody.js +++ b/components/lib/datatable/TableBody.js @@ -592,15 +592,12 @@ export const TableBody = React.memo( const onRowMouseDown = (e) => { const { originalEvent: event } = e; - if (!isUnstyled() && DomHandler.hasClass(event.target, 'p-datatable-reorderablerow-handle')) { - event.currentTarget.draggable = true; - event.target.draggable = false; - } else if (isUnstyled() && DomHandler.getAttribute(event.target, 'data-pc-section') === 'rowreordericon') { - event.currentTarget.draggable = true; - event.target.draggable = false; - } else { - event.currentTarget.draggable = false; - } + const isDraggableHandle = isUnstyled() + ? DomHandler.getAttribute(event.target, 'data-pc-section') === 'rowreordericon' || event.target.closest('[data-pc-section="rowreordericon"]') + : DomHandler.hasClass(event.target, 'p-datatable-reorderablerow-handle') || event.target.closest('.p-datatable-reorderablerow-handle'); + + event.currentTarget.draggable = isDraggableHandle; + event.target.draggable = !isDraggableHandle; if (allowRowDrag(e)) { enableDragSelection(event, 'row'); diff --git a/components/lib/datatable/TableHeader.js b/components/lib/datatable/TableHeader.js index 3216aaedeb..ddac9f50ac 100644 --- a/components/lib/datatable/TableHeader.js +++ b/components/lib/datatable/TableHeader.js @@ -168,11 +168,11 @@ export const TableHeader = React.memo((props) => { }); }; - const createCheckbox = (selectionMode) => { + const createCheckbox = (column, selectionMode) => { if (props.showSelectAll && selectionMode === 'multiple') { const allRowsSelected = props.allRowsSelected(props.value); - return ; + return ; } return null; @@ -209,7 +209,7 @@ export const TableHeader = React.memo((props) => { const { filterHeaderStyle, style, filterHeaderClassName, className, frozen, columnKey, field, selectionMode, filter } = ColumnBase.getCProps(col); const colStyle = { ...(filterHeaderStyle || {}), ...(style || {}) }; const colKey = columnKey || field || i; - const checkbox = createCheckbox(selectionMode); + const checkbox = createCheckbox(col, selectionMode); const filterRow = createFilter(col, filter); const headerCellProps = mergeProps( { diff --git a/components/lib/dropdown/Dropdown.js b/components/lib/dropdown/Dropdown.js index ea4baf02cb..d1140816fb 100644 --- a/components/lib/dropdown/Dropdown.js +++ b/components/lib/dropdown/Dropdown.js @@ -3,6 +3,7 @@ import PrimeReact, { FilterService, PrimeReactContext, localeOption } from '../a import { useHandleStyle } from '../componentbase/ComponentBase'; import { useMergeProps, useMountEffect, useOverlayListener, useUnmountEffect, useUpdateEffect } from '../hooks/Hooks'; import { ChevronDownIcon } from '../icons/chevrondown'; +import { ChevronUpIcon } from '../icons/chevronup'; import { SpinnerIcon } from '../icons/spinner'; import { TimesIcon } from '../icons/times'; import { OverlayService } from '../overlayservice/OverlayService'; @@ -30,7 +31,6 @@ export const Dropdown = React.memo( const virtualScrollerRef = React.useRef(null); const searchTimeout = React.useRef(null); const searchValue = React.useRef(null); - const currentSearchChar = React.useRef(null); const isLazy = props.virtualScrollerOptions && props.virtualScrollerOptions.lazy; const hasFilter = ObjectUtils.isNotEmpty(filterState); const appendTo = props.appendTo || (context && context.appendTo) || PrimeReact.appendTo; @@ -582,80 +582,6 @@ export const Dropdown = React.memo( return isOptionDisabled(option) ? findPrevOption(i) : option; }; - const search = (event) => { - if (searchTimeout.current) { - clearTimeout(searchTimeout.current); - } - - if (event.ctrlKey || event.metaKey || event.altKey) { - // ignore meta combinations like CTRL+F for browser search - return; - } - - const char = event.key; - - if (char.length !== 1 || props.editable) { - // only single character keys matter for searching - return; - } - - if (currentSearchChar.current === char) { - searchValue.current = char; - } else { - searchValue.current = searchValue.current ? searchValue.current + char : char; - } - - currentSearchChar.current = char; - - if (searchValue.current) { - const searchIndex = getSelectedOptionIndex(); - - setFocusedOptionIndex(props.optionGroupLabel ? searchIndex : searchIndex + 1); - } - - searchTimeout.current = setTimeout(() => { - searchValue.current = null; - }, 250); - }; - - const searchOptionInGroup = (index) => { - const searchIndex = index === -1 ? { group: 0, option: -1 } : index; - - for (let i = searchIndex.group; i < visibleOptions.length; i++) { - let groupOptions = getOptionGroupChildren(visibleOptions[i]); - - for (let j = searchIndex.group === i ? searchIndex.option + 1 : 0; j < groupOptions.length; j++) { - if (matchesSearchValue(groupOptions[j])) { - return groupOptions[j]; - } - } - } - - for (let i = 0; i <= searchIndex.group; i++) { - let groupOptions = getOptionGroupChildren(visibleOptions[i]); - - for (let j = 0; j < (searchIndex.group === i ? searchIndex.option : groupOptions.length); j++) { - if (matchesSearchValue(groupOptions[j])) { - return groupOptions[j]; - } - } - } - - return null; - }; - - const matchesSearchValue = (option) => { - let label = getOptionLabel(option); - - if (!label) { - return false; - } - - label = label.toLocaleLowerCase(props.filterLocale); - - return label.startsWith(searchValue.current.toLocaleLowerCase(props.filterLocale)); - }; - const onEditableInputChange = (event) => { !overlayVisibleState && show(); let searchIndex = null; @@ -1197,7 +1123,7 @@ export const Dropdown = React.memo( }, ptm('dropdownIcon') ); - const icon = props.dropdownIcon || ; + const icon = !overlayVisibleState ? props.dropdownIcon || : props.collapseIcon || ; const dropdownIcon = IconUtils.getJSXIcon(icon, { ...dropdownIconProps }, { props }); const ariaLabel = props.placeholder || props.ariaLabel; diff --git a/components/lib/dropdown/DropdownBase.js b/components/lib/dropdown/DropdownBase.js index da0b19a2b3..88ac1e1563 100644 --- a/components/lib/dropdown/DropdownBase.js +++ b/components/lib/dropdown/DropdownBase.js @@ -170,6 +170,7 @@ export const DropdownBase = ComponentBase.extend({ dataKey: null, disabled: false, dropdownIcon: null, + collapseIcon: null, editable: false, emptyFilterMessage: null, highlightOnSelect: true, diff --git a/components/lib/dropdown/dropdown.d.ts b/components/lib/dropdown/dropdown.d.ts index 5c2fd1a2af..de11f4e693 100644 --- a/components/lib/dropdown/dropdown.d.ts +++ b/components/lib/dropdown/dropdown.d.ts @@ -281,6 +281,10 @@ export interface DropdownProps extends Omit | undefined; + /** + * Icon of collapse action. + */ + collapseIcon?: IconType | undefined; /** * When present, custom value instead of predefined options can be entered using the editable input field. * @defaultValue false diff --git a/components/lib/inputotp/inputotp.d.ts b/components/lib/inputotp/inputotp.d.ts index 8229844be0..9466a9a12a 100644 --- a/components/lib/inputotp/inputotp.d.ts +++ b/components/lib/inputotp/inputotp.d.ts @@ -9,9 +9,7 @@ */ import * as React from 'react'; import { ComponentHooks } from '../componentbase/componentbase'; -import { InputTextPassThroughOptions } from '../inputtext/inputtext'; import { PassThroughOptions } from '../passthrough'; -import { TooltipPassThroughOptions } from '../tooltip/tooltip'; import { PassThroughType, TemplateType } from '../utils/utils'; export declare type InputOtpPassThroughType = PassThroughType; @@ -35,9 +33,8 @@ export interface InputOtpPassThroughOptions { root?: InputOtpPassThroughType>; /** * Uses to pass attributes to the Tooltip component. - * @see {@link TooltipPassThroughOptions} */ - input?: InputTextPassThroughOptions; + input?: InputOtpPassThroughType>; /** * Used to manage all lifecycle hooks * @see {@link ComponentHooks} diff --git a/components/lib/passthrough/tailwind/index.js b/components/lib/passthrough/tailwind/index.js index bccd4f616c..051c4f1e04 100644 --- a/components/lib/passthrough/tailwind/index.js +++ b/components/lib/passthrough/tailwind/index.js @@ -250,31 +250,30 @@ const Tailwind = { }, nav: { className: classNames('flex flex-1 list-none m-0 p-0', 'bg-transparent border border-gray-300 border-0 border-b-2', 'dark:bg-gray-900 dark:border-blue-900/40 dark:text-white/80 ') // Flex, list, margin, padding, and border styles. + } + }, + 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. + }), + headerAction: ({ parent, context }) => ({ + className: classNames( + 'items-center cursor-pointer flex overflow-hidden relative select-none text-decoration-none user-select-none', // Flex and overflow styles. + 'border-b-2 p-5 font-bold rounded-t-md transition-shadow duration-200 m-0', // Border, padding, font, and transition styles. + 'transition-colors duration-200', // Transition duration style. + '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)]', // Focus styles. + { + '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': parent.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': parent.state.activeIndex === context.index // Condition-based active styles. + } + ), + style: { marginBottom: '-2px' } // Negative margin style. + }), + headerTitle: { + className: classNames('leading-none whitespace-nowrap') // Leading and whitespace styles. }, - 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. - }), - headerAction: ({ parent, context }) => ({ - className: classNames( - 'items-center cursor-pointer flex overflow-hidden relative select-none text-decoration-none user-select-none', // Flex and overflow styles. - 'border-b-2 p-5 font-bold rounded-t-md transition-shadow duration-200 m-0', // Border, padding, font, and transition styles. - 'transition-colors duration-200', // Transition duration style. - '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)]', // Focus styles. - { - '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': - parent.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': parent.state.activeIndex === context.index // Condition-based active styles. - } - ), - style: { marginBottom: '-2px' } // Negative margin style. - }), - headerTitle: { - className: classNames('leading-none whitespace-nowrap') // Leading and whitespace styles. - }, - content: { - className: classNames('bg-white p-5 border-0 text-gray-700 rounded-bl-md rounded-br-md', 'dark:bg-gray-900 dark:border-blue-900/40 dark:text-white/80') // Background, padding, border, and text styles. - } + content: { + className: classNames('bg-white p-5 border-0 text-gray-700 rounded-bl-md rounded-br-md', 'dark:bg-gray-900 dark:border-blue-900/40 dark:text-white/80') // Background, padding, border, and text styles. } }, splitter: { @@ -669,7 +668,7 @@ const Tailwind = { { 'bg-transparent border-transparent': props.text && !props.plain, 'text-blue-500 dark:text-blue-400 hover:bg-blue-300/20': props.text && (props.severity === null || props.severity === 'info') && !props.plain, - 'text-gray-500 dark:text-grayy-400 hover:bg-gray-300/20': props.text && props.severity === 'secondary' && !props.plain, + 'text-gray-500 dark:text-gray-400 hover:bg-gray-300/20': props.text && props.severity === 'secondary' && !props.plain, 'text-green-500 dark:text-green-400 hover:bg-green-300/20': props.text && props.severity === 'success' && !props.plain, 'text-orange-500 dark:text-orange-400 hover:bg-orange-300/20': props.text && props.severity === 'warning' && !props.plain, 'text-purple-500 dark:text-purple-400 hover:bg-purple-300/20': props.text && props.severity === 'help' && !props.plain, @@ -891,6 +890,18 @@ const Tailwind = { inputmask: { root: 'font-sans text-base text-gray-700 dark:text-white/80 bg-white dark:bg-gray-900 py-3 px-3 border border-gray-300 dark:border-blue-900/40 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)] transition duration-200 ease-in-out appearance-none rounded-md' }, + inputotp: { + root: { className: 'flex items-center gap-2' }, + input: { + root: { + className: classNames( + 'box-border text-center w-10 h-11 p-3 text-slate-900 border border-gray-300 rounded-lg transition-all duration-200', + 'hover:border-cyan-500', + 'focus:border-cyan-500 focus:shadow-[0_0_0_0.2rem_#a5f3fc] focus:outline-0 focus:outline-offset-0' + ) + } + } + }, rating: { root: ({ props }) => ({ className: classNames('relative flex items-center', 'gap-2', { @@ -1078,7 +1089,10 @@ const Tailwind = { root: { className: classNames('relative inline-flex cursor-pointer select-none align-bottom', 'w-6 h-6') }, - input: ({ props }) => ({ + input: { + className: classNames('absolute appearance-none top-0 left-0 size-full p-0 m-0 opacity-0 z-10 outline-none cursor-pointer') + }, + box: ({ props }) => ({ className: classNames( 'flex justify-center items-center', 'border-2 w-6 h-6 text-gray-700 rounded-full transition duration-200 ease-in-out', diff --git a/components/lib/treetable/treetable.d.ts b/components/lib/treetable/treetable.d.ts index 4e28640577..560965101d 100644 --- a/components/lib/treetable/treetable.d.ts +++ b/components/lib/treetable/treetable.d.ts @@ -9,11 +9,13 @@ */ import * as React from 'react'; import { CSSProperties } from 'react'; -import { Column } from '../column'; +import { Column, ColumnPassThroughOptions } from '../column'; import { ComponentHooks } from '../componentbase/componentbase'; import { InputTextPassThroughOptions } from '../inputtext/inputtext'; import { PaginatorPassThroughOptions, PaginatorTemplate } from '../paginator'; import { PassThroughOptions } from '../passthrough'; +import { RowPassThroughOptions } from '../row/row'; +import { TooltipPassThroughOptions } from '../tooltip/tooltip'; import { TreeNode } from '../treenode'; import { IconType, PassThroughType } from '../utils/utils'; @@ -211,6 +213,19 @@ export interface TreeTablePassThroughOptions { * Uses to pass attributes to the hidden input's DOM element. */ hiddenInput?: TreeTablePassThroughType>; + /** + * Used to pass attributes to the Row helper components. + */ + row?: RowPassThroughOptions; + /** + * Used to pass attributes to the Column helper components. + */ + column?: ColumnPassThroughOptions; + /** + * Uses to pass attributes tooltip's DOM element. + * @type {TooltipPassThroughOptions} + */ + tooltip?: TooltipPassThroughOptions; /** * Used to manage all lifecycle hooks * @see {@link ComponentHooks} diff --git a/pages/inputotp/index.js b/pages/inputotp/index.js index dd0dcda853..95c5c2ff85 100644 --- a/pages/inputotp/index.js +++ b/pages/inputotp/index.js @@ -1,14 +1,15 @@ -import { ImportDoc } from '@/components/doc/inputotp/importdoc'; +import DocApiTable from '@/components/doc/common/docapitable'; +import { DocComponent } from '@/components/doc/common/doccomponent'; +import { AccessibilityDoc } from '@/components/doc/inputotp/accessibilitydoc'; import { BasicDoc } from '@/components/doc/inputotp/basicdoc'; -import { MaskDoc } from '@/components/doc/inputotp/maskdoc'; +import { ImportDoc } from '@/components/doc/inputotp/importdoc'; import { IntegerOnlyDoc } from '@/components/doc/inputotp/integeronlydoc'; -import { TemplateDoc } from '@/components/doc/inputotp/templatedoc'; -import { SampleDoc } from '@/components/doc/inputotp/sampledoc'; -import { AccessibilityDoc } from '@/components/doc/inputotp/accessibilitydoc'; +import { MaskDoc } from '@/components/doc/inputotp/maskdoc'; import { Wireframe } from '@/components/doc/inputotp/pt/wireframe'; +import { SampleDoc } from '@/components/doc/inputotp/sampledoc'; +import { TemplateDoc } from '@/components/doc/inputotp/templatedoc'; import { StyledDoc } from '@/components/doc/inputotp/theming/styleddoc'; -import DocApiTable from '@/components/doc/common/docapitable'; -import { DocComponent } from '@/components/doc/common/doccomponent'; +import { TailwindDoc } from '@/components/doc/inputotp/theming/tailwinddoc'; const InputOtpDemo = () => { const docs = [ @@ -72,6 +73,18 @@ const InputOtpDemo = () => { id: 'styled', label: 'Styled', component: StyledDoc + }, + { + id: 'unstyled', + label: 'Unstyled', + description: 'Theming is implemented with the pass through properties in unstyled mode.', + children: [ + { + id: 'tailwind', + label: 'Tailwind', + component: TailwindDoc + } + ] } ]; diff --git a/pages/tabview/index.js b/pages/tabview/index.js index c4b0e808ae..81ccd49b21 100644 --- a/pages/tabview/index.js +++ b/pages/tabview/index.js @@ -101,7 +101,18 @@ const TabViewDemo = () => { } ]; - return ; + return ( + + ); }; export default TabViewDemo;