karsten-design-system 1.1.72 → 1.1.73
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.js +47 -45
- package/dist/index.js.map +1 -1
- package/package.json +1 -1
package/dist/index.js
CHANGED
|
@@ -346,11 +346,12 @@ function CalendarInput({ error, placeholder = 'Selecione uma data', label, disab
|
|
|
346
346
|
return (jsx("div", { className: "relative flex flex-col w-full min-w-full", children: jsxs("div", { onClick: handleInputClick, children: [jsx(FloatingLabel, { value: props?.value ? props.value.toString() : '', label: label, disabled: disabled, error: error }), jsxs("div", { className: "relative w-full min-w-full", children: [jsx(Calendar, { ...props, disabled: disabled, placeholder: placeholder, ref: calendarRef, panelStyle: { width: '530px', height: '500px' }, className: clsx('w-full min-w-full focus:shadow-none border-none z-0 font-roboto border rounded-md', hasError
|
|
347
347
|
? 'border-redError placeholder:!text-redError p-invalid'
|
|
348
348
|
: 'border-gray focus:border-primary', disabled && 'border-stoneDark text-disabled', error && 'border-redError text-redError p-invalid', !error && 'border-gray p-custom'), dateFormat: "dd/mm/yy", inputStyle: {
|
|
349
|
-
border: `
|
|
349
|
+
border: `0.3px solid ${error && !props.value ? '#EC4A54' : '#A0A4B3'}`,
|
|
350
350
|
boxShadow: 'none',
|
|
351
351
|
color: hasError ? '#EC4A54' : '',
|
|
352
|
-
|
|
352
|
+
borderRadius: '6px',
|
|
353
353
|
fontSize: '16px',
|
|
354
|
+
height: '42px',
|
|
354
355
|
}, hideOnDateTimeSelect: true, hideOnRangeSelection: true, todayButtonClassName: "bg-primary text-background", dateTemplate: dateTemplate, invalid: hasError, locale: "pt-BR" }), jsx(InputIcon, { className: clsx(`pi pi-calendar text-gray cursor-pointer absolute right-3 top-1/2 transform -translate-y-1/2`, disabled && 'text-disabled', hasError && 'text-redError') })] }), hasError && (jsx("div", { className: "mb-4", children: jsx("span", { className: "absolute text-redError text-xs px-2", children: error }) }))] }) }));
|
|
355
356
|
}
|
|
356
357
|
|
|
@@ -773,49 +774,49 @@ function MultiSelect(props) {
|
|
|
773
774
|
setVisibleText(`${count} itens selecionados`);
|
|
774
775
|
}
|
|
775
776
|
}, [props.value]);
|
|
776
|
-
return (
|
|
777
|
-
|
|
778
|
-
|
|
779
|
-
|
|
780
|
-
|
|
781
|
-
|
|
782
|
-
|
|
783
|
-
|
|
784
|
-
|
|
785
|
-
|
|
786
|
-
|
|
787
|
-
|
|
788
|
-
|
|
789
|
-
|
|
790
|
-
|
|
791
|
-
|
|
792
|
-
|
|
793
|
-
|
|
794
|
-
|
|
795
|
-
|
|
796
|
-
|
|
797
|
-
|
|
798
|
-
|
|
799
|
-
|
|
800
|
-
|
|
801
|
-
|
|
802
|
-
}
|
|
803
|
-
}
|
|
804
|
-
if (e.key === 'Escape') {
|
|
805
|
-
e.preventDefault();
|
|
806
|
-
setIsOpen(false);
|
|
807
|
-
setSearchText('');
|
|
808
|
-
setHighlightedIndex(-1);
|
|
777
|
+
return (jsxs("div", { ref: containerRef, className: "relative flex flex-col w-100", children: [jsxs("div", { className: "relative w-full cursor-pointer", onClick: toggleDropdown, children: [jsx(FloatingLabel, { value: selectedText(), label: label, disabled: isInputDisabled, error: error }), jsxs(IconField, { className: "w-full", children: [jsx(InputText, { placeholder: placeholder, type: "text", value: isLoading
|
|
778
|
+
? 'Carregando...'
|
|
779
|
+
: isOpen && !isReadOnly
|
|
780
|
+
? searchText
|
|
781
|
+
: visibleText, onChange: (e) => {
|
|
782
|
+
setSearchText(e.target.value);
|
|
783
|
+
props.onInputChange?.(e.target.value);
|
|
784
|
+
if (!isOpen)
|
|
785
|
+
setIsOpen(true);
|
|
786
|
+
setHighlightedIndex(-1);
|
|
787
|
+
}, onKeyDown: (e) => {
|
|
788
|
+
if (!isOpen)
|
|
789
|
+
return;
|
|
790
|
+
if (e.key === 'ArrowDown') {
|
|
791
|
+
e.preventDefault();
|
|
792
|
+
setHighlightedIndex((prev) => prev < filteredOptions.length - 1 ? prev + 1 : 0);
|
|
793
|
+
}
|
|
794
|
+
if (e.key === 'ArrowUp') {
|
|
795
|
+
e.preventDefault();
|
|
796
|
+
setHighlightedIndex((prev) => prev > 0 ? prev - 1 : filteredOptions.length - 1);
|
|
797
|
+
}
|
|
798
|
+
if (e.key === 'Enter') {
|
|
799
|
+
e.preventDefault();
|
|
800
|
+
if (highlightedIndex >= 0 &&
|
|
801
|
+
highlightedIndex < filteredOptions.length) {
|
|
802
|
+
handleSelect(filteredOptions[highlightedIndex]);
|
|
809
803
|
}
|
|
810
|
-
}
|
|
811
|
-
|
|
812
|
-
|
|
813
|
-
|
|
814
|
-
|
|
815
|
-
|
|
816
|
-
|
|
817
|
-
|
|
818
|
-
|
|
804
|
+
}
|
|
805
|
+
if (e.key === 'Escape') {
|
|
806
|
+
e.preventDefault();
|
|
807
|
+
setIsOpen(false);
|
|
808
|
+
setSearchText('');
|
|
809
|
+
setHighlightedIndex(-1);
|
|
810
|
+
}
|
|
811
|
+
}, onClick: toggleDropdown, className: clsx('focus:shadow-none text-base w-100 font-roboto border !p-2 rounded-md', hasError
|
|
812
|
+
? 'border-redError placeholder:text-redError'
|
|
813
|
+
: 'border-gray focus:border-primary', isInputDisabled && 'border-stoneDark text-disabled', error && 'border-redError text-redError', !error && 'border-gray placeholder:text-gray', isLoading && 'text-gray', 'truncate'), invalid: hasError, readOnly: !isOpen || isReadOnly, style: { height: '42px', fontSize: '16px' }, disabled: isInputDisabled, "aria-label": ariaLabel }), jsx(InputIcon, { className: clsx(isLoading
|
|
814
|
+
? 'pi pi-spinner pi-spin'
|
|
815
|
+
: isOpen
|
|
816
|
+
? 'pi pi-angle-up'
|
|
817
|
+
: 'pi pi-angle-down', 'text-gray px-2 flex items-center cursor-pointer', isInputDisabled && 'text-disabled', error && 'text-redError'), onClick: toggleDropdown })] })] }), isOpen && !isLoading && (jsx("div", { className: clsx('absolute w-full bg-background border shadow-md z-40 rounded-md -bottom-1 translate-y-full', error ? 'border-redError' : 'border-gray'), children: props.onInputChange && searchText.length === 0 ? (jsx("div", { className: "p-4 text-center text-gray", children: "Digite para pesquisar" })) : (jsx("ul", { className: "max-h-60 overflow-y-auto", children: filteredOptions.length > 0 ? (filteredOptions.map((option, index) => (jsxs("li", { onClick: () => handleSelect(option), className: clsx('p-2 flex justify-between items-center cursor-pointer', 'hover:bg-stoneBackground hover:font-bold', index === highlightedIndex &&
|
|
818
|
+
'bg-stoneBackground font-bold'), title: option.label, children: [jsx("span", { className: "truncate max-w-[calc(100%-20px)]", children: option.label }), jsx("input", { type: 'checkbox', checked: Array.isArray(props.value) &&
|
|
819
|
+
props.value.some((v) => v.value === option.value), onChange: () => handleSelect(option), className: clsx('appearance-none w-2 h-2 ring-1 ring-offset-2 ring-offset-background ring-gray checked:bg-primary cursor-pointer rounded-md') })] }, option.value)))) : (jsx("div", { className: "p-4 text-center text-gray", children: "Nenhum resultado encontrado" })) })) })), hasError && jsx("span", { className: "text-redError text-xs px-2", children: error })] }));
|
|
819
820
|
}
|
|
820
821
|
|
|
821
822
|
function FilterIcon({ color }) {
|
|
@@ -4228,7 +4229,8 @@ function Select(props) {
|
|
|
4228
4229
|
? 'pi pi-spinner pi-spin'
|
|
4229
4230
|
: isOpen
|
|
4230
4231
|
? 'pi pi-angle-up'
|
|
4231
|
-
: 'pi pi-angle-down', 'text-gray px-2 flex items-center cursor-pointer', isInputDisabled && 'text-disabled', error && 'text-redError'), onClick: toggleDropdown })] })] }), isOpen && !isLoading && (jsx("div", { className: clsx('absolute w-full bg-background border shadow-md z-40 rounded-md p-2 -bottom-1 translate-y-full', error ? 'border-redError' : 'border-gray'), children: jsx("ul", { className: "max-h-60 overflow-y-auto", children: filteredOptions.map((option, index) => (jsxs("li", { onClick: () => handleSelect(option), className: clsx('p-2 flex justify-between items-center cursor-pointer', 'hover:bg-stoneBackground hover:font-bold', index === highlightedIndex &&
|
|
4232
|
+
: 'pi pi-angle-down', 'text-gray px-2 flex items-center cursor-pointer', isInputDisabled && 'text-disabled', error && 'text-redError'), onClick: toggleDropdown })] })] }), isOpen && !isLoading && (jsx("div", { className: clsx('absolute w-full bg-background border shadow-md z-40 rounded-md p-2 -bottom-1 translate-y-full', error ? 'border-redError' : 'border-gray'), children: props.onInputChange && searchText.length === 0 ? (jsx("div", { className: "p-4 text-center text-gray", children: "Digite para pesquisar" })) : (jsx("ul", { className: "max-h-60 overflow-y-auto", children: filteredOptions.length > 0 ? (filteredOptions.map((option, index) => (jsxs("li", { onClick: () => handleSelect(option), className: clsx('p-2 flex justify-between items-center cursor-pointer', 'hover:bg-stoneBackground hover:font-bold', index === highlightedIndex &&
|
|
4233
|
+
'bg-stoneBackground font-bold'), children: [jsx("span", { className: "truncate max-w-[calc(100%-20px)]", children: option.label }), jsx("input", { type: 'radio', checked: props.value?.value === option.value, onChange: () => handleSelect(option), className: clsx('appearance-none w-2 h-2 rounded-full ring-1 ring-offset-2 ring-offset-background ring-gray checked:bg-primary cursor-pointer') })] }, option.value)))) : (jsx("div", { className: "p-4 text-center text-gray", children: "Nenhum resultado encontrado" })) })) })), hasError && jsx("span", { className: "text-redError text-xs px-2", children: error })] }));
|
|
4232
4234
|
}
|
|
4233
4235
|
|
|
4234
4236
|
function Skeleton({ shape = 'rectangle', width = '100%', height = '1rem', borderRadius, animation = 'wave', size, className, }) {
|