react-restyle-components 0.3.40 → 0.3.42
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/lib/src/core-components/index.d.ts +1 -0
- package/lib/src/core-components/index.d.ts.map +1 -1
- package/lib/src/core-components/index.js +1 -0
- package/lib/src/core-components/src/atoms/text-input-dropdown/text-input-dropdown.component.d.ts +2 -2
- package/lib/src/core-components/src/atoms/text-input-dropdown/text-input-dropdown.component.d.ts.map +1 -1
- package/lib/src/core-components/src/atoms/text-input-dropdown/text-input-dropdown.component.js +6 -6
- package/package.json +1 -1
|
@@ -18,6 +18,7 @@ export * from './src/atoms/pdf/pdf-table.components';
|
|
|
18
18
|
export * from './src/atoms/pdf/pdf-typography.components';
|
|
19
19
|
export * from './src/atoms/pdf/pdf-wrapped-view.components';
|
|
20
20
|
export * from './src/atoms/collapsible/collapsible.component';
|
|
21
|
+
export * from './src/atoms/text-input-dropdown/text-input-dropdown.component';
|
|
21
22
|
export * from './src/molecules/css-multiline-input/css-multiline-input.component';
|
|
22
23
|
export * from './src/molecules/auto-complete-filter-multiple-select-multiple-fields-display/auto-complete-filter-multiple-select-multiple-fields-display.component';
|
|
23
24
|
export * from './src/molecules/auto-complete-filter-single-select-multiple-fields-display/auto-complete-filter-single-select-multiple-fields-display.component';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/core-components/index.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,IAAI,MAAM,iCAAiC,CAAC;AACxD,cAAc,qCAAqC,CAAC;AACpD,cAAc,sDAAsD,CAAC;AACrE,cAAc,0CAA0C,CAAC;AACzD,cAAc,+CAA+C,CAAC;AAC9D,cAAc,uCAAuC,CAAC;AACtD,cAAc,uCAAuC,CAAC;AACtD,cAAc,qDAAqD,CAAC;AACpE,cAAc,qCAAqC,CAAC;AACpD,cAAc,mCAAmC,CAAC;AAClD,cAAc,uCAAuC,CAAC;AACtD,cAAc,mCAAmC,CAAC;AAClD,cAAc,uCAAuC,CAAC;AACtD,cAAc,mCAAmC,CAAC;AAClD,cAAc,iCAAiC,CAAC;AAChD,cAAc,uCAAuC,CAAC;AACtD,cAAc,sCAAsC,CAAC;AACrD,cAAc,2CAA2C,CAAC;AAC1D,cAAc,6CAA6C,CAAC;AAC5D,cAAc,+CAA+C,CAAC;
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/core-components/index.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,IAAI,MAAM,iCAAiC,CAAC;AACxD,cAAc,qCAAqC,CAAC;AACpD,cAAc,sDAAsD,CAAC;AACrE,cAAc,0CAA0C,CAAC;AACzD,cAAc,+CAA+C,CAAC;AAC9D,cAAc,uCAAuC,CAAC;AACtD,cAAc,uCAAuC,CAAC;AACtD,cAAc,qDAAqD,CAAC;AACpE,cAAc,qCAAqC,CAAC;AACpD,cAAc,mCAAmC,CAAC;AAClD,cAAc,uCAAuC,CAAC;AACtD,cAAc,mCAAmC,CAAC;AAClD,cAAc,uCAAuC,CAAC;AACtD,cAAc,mCAAmC,CAAC;AAClD,cAAc,iCAAiC,CAAC;AAChD,cAAc,uCAAuC,CAAC;AACtD,cAAc,sCAAsC,CAAC;AACrD,cAAc,2CAA2C,CAAC;AAC1D,cAAc,6CAA6C,CAAC;AAC5D,cAAc,+CAA+C,CAAC;AAC9D,cAAc,+DAA+D,CAAC;AAE9E,cAAc,mEAAmE,CAAC;AAClF,cAAc,qJAAqJ,CAAC;AACpK,cAAc,iJAAiJ,CAAC;AAChK,cAAc,qDAAqD,CAAC;AACpE,cAAc,2EAA2E,CAAC;AAC1F,cAAc,uCAAuC,CAAC;AACtD,cAAc,uDAAuD,CAAC;AACtE,cAAc,2CAA2C,CAAC;AAC1D,cAAc,yEAAyE,CAAC;AACxF,cAAc,qDAAqD,CAAC;AACpE,cAAc,iEAAiE,CAAC;AAChF,cAAc,iGAAiG,CAAC;AAChH,cAAc,yIAAyI,CAAC;AACxJ,cAAc,6JAA6J,CAAC;AAC5K,cAAc,uDAAuD,CAAC;AACtE,cAAc,uKAAuK,CAAC;AAEtL,OAAO,EAAC,IAAI,EAAC,CAAC"}
|
|
@@ -18,6 +18,7 @@ export * from './src/atoms/pdf/pdf-table.components';
|
|
|
18
18
|
export * from './src/atoms/pdf/pdf-typography.components';
|
|
19
19
|
export * from './src/atoms/pdf/pdf-wrapped-view.components';
|
|
20
20
|
export * from './src/atoms/collapsible/collapsible.component';
|
|
21
|
+
export * from './src/atoms/text-input-dropdown/text-input-dropdown.component';
|
|
21
22
|
export * from './src/molecules/css-multiline-input/css-multiline-input.component';
|
|
22
23
|
export * from './src/molecules/auto-complete-filter-multiple-select-multiple-fields-display/auto-complete-filter-multiple-select-multiple-fields-display.component';
|
|
23
24
|
export * from './src/molecules/auto-complete-filter-single-select-multiple-fields-display/auto-complete-filter-single-select-multiple-fields-display.component';
|
package/lib/src/core-components/src/atoms/text-input-dropdown/text-input-dropdown.component.d.ts
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
interface TextInputDropdownProps {
|
|
3
|
-
|
|
3
|
+
placeholder: string;
|
|
4
4
|
items: Array<string>;
|
|
5
5
|
hasError?: boolean;
|
|
6
6
|
className?: string;
|
|
@@ -11,6 +11,6 @@ interface TextInputDropdownProps {
|
|
|
11
11
|
disabled?: boolean;
|
|
12
12
|
allowCustomInput?: boolean;
|
|
13
13
|
}
|
|
14
|
-
export declare const TextInputDropdown: ({ items, className, hasError,
|
|
14
|
+
export declare const TextInputDropdown: ({ items, className, hasError, placeholder, value: controlledValue, defaultValue, onChange, onBlur, disabled, allowCustomInput, }: TextInputDropdownProps) => import("react/jsx-runtime").JSX.Element;
|
|
15
15
|
export {};
|
|
16
16
|
//# sourceMappingURL=text-input-dropdown.component.d.ts.map
|
package/lib/src/core-components/src/atoms/text-input-dropdown/text-input-dropdown.component.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"text-input-dropdown.component.d.ts","sourceRoot":"","sources":["../../../../../../src/core-components/src/atoms/text-input-dropdown/text-input-dropdown.component.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAoC,MAAM,OAAO,CAAC;AAKzD,UAAU,sBAAsB;IAC9B,
|
|
1
|
+
{"version":3,"file":"text-input-dropdown.component.d.ts","sourceRoot":"","sources":["../../../../../../src/core-components/src/atoms/text-input-dropdown/text-input-dropdown.component.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAoC,MAAM,OAAO,CAAC;AAKzD,UAAU,sBAAsB;IAC9B,WAAW,EAAE,MAAM,CAAC;IACpB,KAAK,EAAE,KAAK,CAAC,MAAM,CAAC,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;IAC7D,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,gBAAgB,CAAC,EAAE,OAAO,CAAC;CAC5B;AAED,eAAO,MAAM,iBAAiB,qIAW3B,sBAAsB,4CA8PxB,CAAC"}
|
package/lib/src/core-components/src/atoms/text-input-dropdown/text-input-dropdown.component.js
CHANGED
|
@@ -3,7 +3,7 @@ import { useState, useEffect, useRef } from 'react';
|
|
|
3
3
|
import s from '../../tc.module.css';
|
|
4
4
|
import { cn } from '../../utils';
|
|
5
5
|
import { Icon } from '../icons/icons.component';
|
|
6
|
-
export const TextInputDropdown = ({ items, className, hasError,
|
|
6
|
+
export const TextInputDropdown = ({ items, className, hasError, placeholder = 'Select an option', value: controlledValue, defaultValue = '', onChange, onBlur, disabled = false, allowCustomInput = true, }) => {
|
|
7
7
|
const [isOpen, setIsOpen] = useState(false);
|
|
8
8
|
const [internalValue, setInternalValue] = useState(defaultValue);
|
|
9
9
|
const [filteredItems, setFilteredItems] = useState(items);
|
|
@@ -77,13 +77,13 @@ export const TextInputDropdown = ({ items, className, hasError, title, value: co
|
|
|
77
77
|
};
|
|
78
78
|
const wrapperRef = useRef(null);
|
|
79
79
|
useOutsideAlerter(wrapperRef);
|
|
80
|
-
return (_jsxs("div", { className: cn(className, s['relative']), children: [_jsxs("div", { className: cn(s['flex'], s['flex-row'], s['items-center'], s['
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
80
|
+
return (_jsxs("div", { className: cn(className, s['relative']), children: [_jsxs("div", { className: cn(s['flex'], s['flex-row'], s['items-center'], s['leading-4'], s['p-2'], s['dark:bg-boxdark'], s['focus:outline-none'], s['focus:ring'], s['block'], s['w-full'], s['shadow-sm'], s['sm:text-base'], s['border'], s['rounded-md'], {
|
|
81
|
+
[s['border-red']]: hasError,
|
|
82
|
+
[s['border-gray-300']]: !hasError,
|
|
83
|
+
}), children: [_jsx("input", { type: "text", name: "name", placeholder: placeholder, value: value, disabled: disabled, className: cn(s['w-full'], s['bg-transparent'], s['border-0'], s['appearance-none'], s['focus:outline-none'], s['focus:ring-0'], s['font-arimaRegular'], s['text-md'], disabled && s['cursor-not-allowed'], disabled && s['opacity-50']), onClick: handleInputClick, onChange: allowCustomInput ? handleInputChange : undefined, onFocus: handleInputFocus, onBlur: handleInputBlur, readOnly: !allowCustomInput }), !disabled && (_jsx(Icon, { nameIcon: isOpen ? 'MdKeyboardArrowUp' : 'MdKeyboardArrowDown', propsIcon: { size: '24', color: '#000000' }, onClick: handleInputClick }))] }), isOpen && !disabled && (_jsx("div", { className: cn(s['z-10'], s['w-full'], s['absolute'], s['text-base'], s['list-none'], s['bg-white'], s['rounded'], s['divide-y'], s['divide-gray-100'], s['shadow'], s['dark:bg-gray-700'], s['max-h-60'], s['overflow-y-auto']), ref: wrapperRef, children: _jsxs("ul", { className: s['py-1'], children: [filteredItems.length > 0 ? (filteredItems.map((item, index) => (_jsx("li", { className: cn(s['block'], s['py-2'], s['px-4'], s['text-md'], s['hover:bg-gray-100'], s['dark:hover:bg-gray-600'], s['dark:text-gray-200'], s['font-arimaRegular'], s['cursor-pointer'],
|
|
84
84
|
// Highlight if this item matches current value
|
|
85
85
|
value === item && s['bg-blue-50'], value === item && s['text-blue-700']), onClick: () => handleItemSelect(item), children: item }, index)))) : (_jsx("li", { className: cn(s['block'], s['py-2'], s['px-4'], s['text-md'], s['text-gray-500'], s['font-arimaRegular']), children: allowCustomInput ? 'No matches found' : 'No options available' })), allowCustomInput &&
|
|
86
86
|
value &&
|
|
87
87
|
!items.includes(value) &&
|
|
88
|
-
isEditing && (_jsx("li", { className: cn(s['block'], s['py-2'], s['px-4'], s['text-md'], s['hover:bg-gray-100'], s['dark:hover:bg-gray-600'], s['dark:text-gray-200'], s['font-arimaRegular'], s['cursor-pointer'], s['border-t'], s['border-gray-200'], s['bg-green-50'], s['text-green-700']), onClick: () => handleItemSelect(value), children: _jsxs("span", { className: cn(s.flex, s['ml-2'], s['items-center'], s['gap-1']), children: [_jsx(Icon, { nameIcon: "MdAdd", propsIcon: { size: '16', color: '#059669' } }), "\"", value, "\""] }) }))] }) }))
|
|
88
|
+
isEditing && (_jsx("li", { className: cn(s['block'], s['py-2'], s['px-4'], s['text-md'], s['hover:bg-gray-100'], s['dark:hover:bg-gray-600'], s['dark:text-gray-200'], s['font-arimaRegular'], s['cursor-pointer'], s['border-t'], s['border-gray-200'], s['bg-green-50'], s['text-green-700']), onClick: () => handleItemSelect(value), children: _jsxs("span", { className: cn(s.flex, s['ml-2'], s['items-center'], s['gap-1']), children: [_jsx(Icon, { nameIcon: "MdAdd", propsIcon: { size: '16', color: '#059669' } }), "\"", value, "\""] }) }))] }) }))] }));
|
|
89
89
|
};
|