period-ui 0.1.71 → 0.1.72
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/components/atoms/drop-down-menu/drop-down-menu.d.ts +2 -1
- package/dist/components/atoms/drop-down-menu/drop-down-menu.d.ts.map +1 -1
- package/dist/components/atoms/drop-down-menu/drop-down-menu.js +18 -16
- package/dist/components/atoms/drop-down-menu/drop-down-menu.js.map +1 -1
- package/dist/components/molecules/form/form-select/form-select.js +1 -1
- package/dist/components/molecules/select/select.d.ts +2 -1
- package/dist/components/molecules/select/select.d.ts.map +1 -1
- package/dist/components/molecules/select/select.js +3 -2
- package/dist/components/molecules/select/select.js.map +1 -1
- package/dist/components/molecules/select/use-select.d.ts +2 -1
- package/dist/components/molecules/select/use-select.d.ts.map +1 -1
- package/dist/components/molecules/select/use-select.js +64 -19
- package/dist/components/molecules/select/use-select.js.map +1 -1
- package/dist/utils/use-debounce.d.ts +2 -0
- package/dist/utils/use-debounce.d.ts.map +1 -0
- package/dist/utils/use-debounce.js +17 -0
- package/dist/utils/use-debounce.js.map +1 -0
- package/package.json +9 -8
|
@@ -7,7 +7,8 @@ type Props = {
|
|
|
7
7
|
variant?: MenuItemVariant;
|
|
8
8
|
emptyElement?: ReactElement;
|
|
9
9
|
options: DropDownMenuOptionProps[];
|
|
10
|
+
rowHeight?: number;
|
|
10
11
|
};
|
|
11
|
-
export declare function DropDownMenu({ options, className, emptyElement, selectedIDs, variant, }: Props): JSX.Element;
|
|
12
|
+
export declare function DropDownMenu({ options, className, emptyElement, selectedIDs, variant, rowHeight }: Props): JSX.Element;
|
|
12
13
|
export {};
|
|
13
14
|
//# sourceMappingURL=drop-down-menu.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"drop-down-menu.d.ts","sourceRoot":"","sources":["../../../../src/components/atoms/drop-down-menu/drop-down-menu.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"drop-down-menu.d.ts","sourceRoot":"","sources":["../../../../src/components/atoms/drop-down-menu/drop-down-menu.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AACrC,OAAO,EAAE,uBAAuB,EAAE,MAAM,qBAAqB,CAAC;AAE9D,OAAO,EAAY,eAAe,EAAE,MAAM,cAAc,CAAC;AAEzD,KAAK,KAAK,GAAG;IACX,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,WAAW,EAAE,MAAM,EAAE,CAAC;IACtB,OAAO,CAAC,EAAE,eAAe,CAAC;IAC1B,YAAY,CAAC,EAAE,YAAY,CAAC;IAC5B,OAAO,EAAE,uBAAuB,EAAE,CAAC;IACnC,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAuCF,wBAAgB,YAAY,CAAC,EACE,OAAO,EACP,SAAS,EACT,YAAY,EACZ,WAAgB,EAChB,OAAiC,EACjC,SAAuB,EACxB,EAAE,KAAK,GAAG,GAAG,CAAC,OAAO,CA6BlD"}
|
|
@@ -2,24 +2,26 @@
|
|
|
2
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
3
|
exports.DropDownMenu = DropDownMenu;
|
|
4
4
|
const jsx_runtime_1 = require("react/jsx-runtime");
|
|
5
|
-
const
|
|
5
|
+
const react_window_1 = require("react-window");
|
|
6
6
|
const tailwind_utils_1 = require("../../../utils/tailwind-utils");
|
|
7
7
|
const components_1 = require("./components");
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
8
|
+
const ITEM_HEIGHT = 56;
|
|
9
|
+
const MAX_VISIBLE_ITEMS = 5.5;
|
|
10
|
+
function DropDownMenuRow({ index, style, uniqueOptions, variant, selectedIDs, }) {
|
|
11
|
+
const option = uniqueOptions[index];
|
|
12
|
+
const isFirst = index === 0;
|
|
13
|
+
const isLast = index === uniqueOptions.length - 1;
|
|
14
|
+
const isSelected = selectedIDs.includes(option.value);
|
|
15
|
+
return ((0, jsx_runtime_1.jsx)("div", { style: style, children: (0, jsx_runtime_1.jsx)(components_1.MenuItem, { ...option, id: option.value, variant: option.variant ?? variant, isSelected: isSelected, className: (0, tailwind_utils_1.tailwind)({
|
|
16
|
+
'rounded-b-lg': isLast,
|
|
17
|
+
'rounded-t-lg': isFirst,
|
|
18
|
+
'border-t': !isFirst,
|
|
19
|
+
}) }) }));
|
|
20
|
+
}
|
|
21
|
+
function DropDownMenu({ options, className, emptyElement, selectedIDs = [], variant = components_1.MenuItemVariant.DEFAULT, rowHeight = ITEM_HEIGHT }) {
|
|
12
22
|
const uniqueOptions = options?.filter((_option, index, self) => self.findIndex((option) => option.value === _option.value) === index);
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
const isFistItem = key === 0;
|
|
17
|
-
return ((0, react_1.createElement)(components_1.MenuItem, { ...option, variant: option.variant ?? variant, key: option.value, id: option.value, className: (0, tailwind_utils_1.tailwind)({
|
|
18
|
-
'rounded-b-lg': isLastItem,
|
|
19
|
-
'rounded-t-lg': isFistItem,
|
|
20
|
-
'border-t': !isFistItem,
|
|
21
|
-
}), isSelected: handleIsSelected(option.value) }));
|
|
22
|
-
})
|
|
23
|
-
: emptyElement }));
|
|
23
|
+
const effectiveRowHeight = rowHeight ?? ITEM_HEIGHT;
|
|
24
|
+
const maxHeight = effectiveRowHeight * MAX_VISIBLE_ITEMS;
|
|
25
|
+
return ((0, jsx_runtime_1.jsx)("div", { className: (0, tailwind_utils_1.tailwind)('absolute z-30 mt-2 shadow-white-tree rounded-lg w-fit', 'overflow-y-auto overflow-x-hidden h-fit', className), children: uniqueOptions && uniqueOptions.length > 0 ? ((0, jsx_runtime_1.jsx)(react_window_1.List, { rowComponent: DropDownMenuRow, rowHeight: effectiveRowHeight, rowCount: uniqueOptions.length, rowProps: { uniqueOptions, variant, selectedIDs }, style: { maxHeight: maxHeight, width: '100%' } })) : (emptyElement) }));
|
|
24
26
|
}
|
|
25
27
|
//# sourceMappingURL=drop-down-menu.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"drop-down-menu.js","sourceRoot":"","sources":["../../../../src/components/atoms/drop-down-menu/drop-down-menu.tsx"],"names":[],"mappings":";;
|
|
1
|
+
{"version":3,"file":"drop-down-menu.js","sourceRoot":"","sources":["../../../../src/components/atoms/drop-down-menu/drop-down-menu.tsx"],"names":[],"mappings":";;AAqDA,oCAoCC;;AAzFD,+CAAuD;AAIvD,kEAAyD;AACzD,6CAAyD;AAWzD,MAAM,WAAW,GAAG,EAAE,CAAC;AACvB,MAAM,iBAAiB,GAAG,GAAG,CAAC;AAG9B,SAAS,eAAe,CAAC,EACE,KAAK,EACL,KAAK,EACL,aAAa,EACb,OAAO,EACP,WAAW,GAKpC;IACA,MAAM,MAAM,GAAG,aAAa,CAAC,KAAK,CAAC,CAAC;IACpC,MAAM,OAAO,GAAG,KAAK,KAAK,CAAC,CAAC;IAC5B,MAAM,MAAM,GAAG,KAAK,KAAK,aAAa,CAAC,MAAM,GAAG,CAAC,CAAC;IAClD,MAAM,UAAU,GAAG,WAAW,CAAC,QAAQ,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;IAEtD,OAAO,CACL,gCAAK,KAAK,EAAE,KAAK,YACf,uBAAC,qBAAQ,OACH,MAAM,EACV,EAAE,EAAE,MAAM,CAAC,KAAK,EAChB,OAAO,EAAE,MAAM,CAAC,OAAO,IAAI,OAAO,EAClC,UAAU,EAAE,UAAU,EACtB,SAAS,EAAE,IAAA,yBAAQ,EAAC;gBAClB,cAAc,EAAE,MAAM;gBACtB,cAAc,EAAE,OAAO;gBACvB,UAAU,EAAE,CAAC,OAAO;aACrB,CAAC,GACF,GACE,CACP,CAAC;AACJ,CAAC;AAED,SAAgB,YAAY,CAAC,EACE,OAAO,EACP,SAAS,EACT,YAAY,EACZ,WAAW,GAAG,EAAE,EAChB,OAAO,GAAG,4BAAe,CAAC,OAAO,EACjC,SAAS,GAAG,WAAW,EACjB;IACnC,MAAM,aAAa,GAAG,OAAO,EAAE,MAAM,CACnC,CAAC,OAAO,EAAE,KAAK,EAAE,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC,MAAM,EAAE,EAAE,CAAC,MAAM,CAAC,KAAK,KAAK,OAAO,CAAC,KAAK,CAAC,KAAK,KAAK,CAC/F,CAAC;IAEF,MAAM,kBAAkB,GAAG,SAAS,IAAI,WAAW,CAAC;IACpD,MAAM,SAAS,GAAG,kBAAkB,GAAG,iBAAiB,CAAC;IAEzD,OAAO,CACL,gCACE,SAAS,EAAE,IAAA,yBAAQ,EACjB,uDAAuD,EACvD,yCAAyC,EACzC,SAAS,CACV,YAEA,aAAa,IAAI,aAAa,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,CAC3C,uBAAC,mBAAI,IACH,YAAY,EAAE,eAAe,EAC7B,SAAS,EAAE,kBAAkB,EAC7B,QAAQ,EAAE,aAAa,CAAC,MAAM,EAC9B,QAAQ,EAAE,EAAE,aAAa,EAAE,OAAO,EAAE,WAAW,EAAE,EACjD,KAAK,EAAE,EAAE,SAAS,EAAE,SAAS,EAAE,KAAK,EAAE,MAAM,EAAE,GAC9C,CACH,CAAC,CAAC,CAAC,CACF,YAAY,CACb,GACG,CACP,CAAC;AACJ,CAAC"}
|
|
@@ -19,7 +19,7 @@ function FormSelect({ formControlClassName, ...props }) {
|
|
|
19
19
|
if (!newOption) {
|
|
20
20
|
return;
|
|
21
21
|
}
|
|
22
|
-
await formProps?.setFieldValue(formName, newOption.
|
|
22
|
+
await formProps?.setFieldValue(formName, newOption.value || '');
|
|
23
23
|
if (onOptionChange) {
|
|
24
24
|
onOptionChange(selectedValues);
|
|
25
25
|
}
|
|
@@ -9,11 +9,12 @@ export type SelectProps = {
|
|
|
9
9
|
emptyLabel?: ReactElement | string;
|
|
10
10
|
initialInputValue?: string;
|
|
11
11
|
initialValues?: string[] | string;
|
|
12
|
+
debounceDelay?: number;
|
|
12
13
|
options: DropDownMenuOptionProps[];
|
|
13
14
|
onBlur?: () => void;
|
|
14
15
|
onClick?: () => void;
|
|
15
16
|
onChangeText?: (value: string) => void;
|
|
16
17
|
onOptionChange?: (options: string[]) => void;
|
|
17
18
|
};
|
|
18
|
-
export declare function Select({ isDisabled, isMultiSelect, removeOnSelect, isErrorVisible, className, emptyLabel, initialInputValue, initialValues, options, onBlur, onChangeText, onOptionChange, onClick, }: SelectProps): import("react/jsx-runtime").JSX.Element;
|
|
19
|
+
export declare function Select({ isDisabled, isMultiSelect, removeOnSelect, isErrorVisible, className, emptyLabel, initialInputValue, initialValues, debounceDelay, options, onBlur, onChangeText, onOptionChange, onClick, }: SelectProps): import("react/jsx-runtime").JSX.Element;
|
|
19
20
|
//# sourceMappingURL=select.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"select.d.ts","sourceRoot":"","sources":["../../../../src/components/molecules/select/select.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AACrC,OAAO,EAIL,uBAAuB,EAMxB,MAAM,qBAAqB,CAAC;AAK7B,MAAM,MAAM,WAAW,GAAG;IACxB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,UAAU,CAAC,EAAE,YAAY,GAAG,MAAM,CAAC;IACnC,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,aAAa,CAAC,EAAE,MAAM,EAAE,GAAG,MAAM,CAAC;IAClC,OAAO,EAAE,uBAAuB,EAAE,CAAC;IAEnC,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACvC,cAAc,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;CAC9C,CAAC;AAEF,wBAAgB,MAAM,CAAC,EACrB,UAAkB,EAClB,aAAqB,EACrB,cAAsB,EACtB,cAAc,EACd,SAAS,EACT,UAAU,EACV,iBAAiB,EACjB,aAAa,EACb,OAAO,EACP,MAAM,EACN,YAAY,EACZ,cAAc,EACd,OAAkB,GACnB,EAAE,WAAW,
|
|
1
|
+
{"version":3,"file":"select.d.ts","sourceRoot":"","sources":["../../../../src/components/molecules/select/select.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AACrC,OAAO,EAIL,uBAAuB,EAMxB,MAAM,qBAAqB,CAAC;AAK7B,MAAM,MAAM,WAAW,GAAG;IACxB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,UAAU,CAAC,EAAE,YAAY,GAAG,MAAM,CAAC;IACnC,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,aAAa,CAAC,EAAE,MAAM,EAAE,GAAG,MAAM,CAAC;IAClC,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,OAAO,EAAE,uBAAuB,EAAE,CAAC;IAEnC,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACvC,cAAc,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;CAC9C,CAAC;AAEF,wBAAgB,MAAM,CAAC,EACrB,UAAkB,EAClB,aAAqB,EACrB,cAAsB,EACtB,cAAc,EACd,SAAS,EACT,UAAU,EACV,iBAAiB,EACjB,aAAa,EACb,aAAa,EACb,OAAO,EACP,MAAM,EACN,YAAY,EACZ,cAAc,EACd,OAAkB,GACnB,EAAE,WAAW,2CA6Gb"}
|
|
@@ -6,13 +6,14 @@ const components_1 = require("../../../components");
|
|
|
6
6
|
const tailwind_utils_1 = require("../../../utils/tailwind-utils");
|
|
7
7
|
const select_input_1 = require("./components/select-input");
|
|
8
8
|
const use_select_1 = require("./use-select");
|
|
9
|
-
function Select({ isDisabled = false, isMultiSelect = false, removeOnSelect = false, isErrorVisible, className, emptyLabel, initialInputValue, initialValues, options, onBlur, onChangeText, onOptionChange, onClick = () => { }, }) {
|
|
9
|
+
function Select({ isDisabled = false, isMultiSelect = false, removeOnSelect = false, isErrorVisible, className, emptyLabel, initialInputValue, initialValues, debounceDelay, options, onBlur, onChangeText, onOptionChange, onClick = () => { }, }) {
|
|
10
10
|
const { openDropdownMenu, inputValue, selectedValues: selectedIDs, chipsData, searchedOptions, inputRef, containerRef, handleInputChange, handleDropdownMenu, } = (0, use_select_1.useSelect)({
|
|
11
11
|
options,
|
|
12
12
|
initialValues,
|
|
13
13
|
isMultiSelect,
|
|
14
14
|
removeOnSelect,
|
|
15
15
|
initialInputValue,
|
|
16
|
+
debounceDelay,
|
|
16
17
|
onBlur,
|
|
17
18
|
onChangeText,
|
|
18
19
|
onOptionChange,
|
|
@@ -27,6 +28,6 @@ function Select({ isDisabled = false, isMultiSelect = false, removeOnSelect = fa
|
|
|
27
28
|
handleDropdownMenu();
|
|
28
29
|
}, className: (0, tailwind_utils_1.tailwind)('flex flex-none w-full p-4 justify-start items-center rounded-lg', 'border border-gray-04 bg-white', 'overflow-hidden cursor-pointer', 'hover:border-blue-02', isDisabled
|
|
29
30
|
? 'outline-none'
|
|
30
|
-
: 'focus-visible:border-none focus-visible:outline-2 focus-visible:outline-blue-01', { 'cursor-not-allowed bg-gray-05 border-gray-04 hover:border-gray-04': isDisabled }, { 'border-red-01': isErrorVisible }, { 'p-0 pr-4 pl-2 py-2': isMultiSelect }, className), children: [isMultiSelect ? ((0, jsx_runtime_1.jsx)(components_1.ChipList, { data: chipsData, className: "mr-1 w-full max-h-[138px]", lasItemComponent: (0, jsx_runtime_1.jsx)("div", { className: "flex-grow min-w-[20px] basis-[150px]", children: (0, jsx_runtime_1.jsx)(select_input_1.SelectInput, { ref: inputRef, onBlur: onBlur, isDisabled: isDisabled, inputValue: inputValue, className: "h-fit md:h-10 w-full", handleInputChange: handleInputChange }) }) })) : ((0, jsx_runtime_1.jsx)(select_input_1.SelectInput, { ref: inputRef, onBlur: onBlur, isDisabled: isDisabled, className: (0, tailwind_utils_1.tailwind)('h-fit md:h-6 w-full'), inputValue: inputValue, handleInputChange: handleInputChange })), (0, jsx_runtime_1.jsx)(components_1.BilloIcon, { icon: openDropdownMenu ? components_1.IconSymbol.CARET_UP : components_1.IconSymbol.CARET_DOWN, size: components_1.IconSize.SM, color: isDisabled ? components_1.IconColor.BLUE_03 : components_1.IconColor.BLUE_01, className: (0, tailwind_utils_1.tailwind)('ml-2') })] }), (0, jsx_runtime_1.jsx)(components_1.DropDownMenu, { selectedIDs: selectedIDs, options: searchedOptions, emptyElement: typeof emptyLabel === 'string' ? ((0, jsx_runtime_1.jsx)(components_1.Text, { variant: components_1.TextVariant.BODY, className: (0, tailwind_utils_1.tailwind)('flex whitespace-normal bg-white py-2 px-4'), children: emptyLabel })) : (emptyLabel), className: (0, tailwind_utils_1.tailwind)('
|
|
31
|
+
: 'focus-visible:border-none focus-visible:outline-2 focus-visible:outline-blue-01', { 'cursor-not-allowed bg-gray-05 border-gray-04 hover:border-gray-04': isDisabled }, { 'border-red-01': isErrorVisible }, { 'p-0 pr-4 pl-2 py-2': isMultiSelect }, className), children: [isMultiSelect ? ((0, jsx_runtime_1.jsx)(components_1.ChipList, { data: chipsData, className: "mr-1 w-full max-h-[138px]", lasItemComponent: (0, jsx_runtime_1.jsx)("div", { className: "flex-grow min-w-[20px] basis-[150px]", children: (0, jsx_runtime_1.jsx)(select_input_1.SelectInput, { ref: inputRef, onBlur: onBlur, isDisabled: isDisabled, inputValue: inputValue, className: "h-fit md:h-10 w-full", handleInputChange: handleInputChange }) }) })) : ((0, jsx_runtime_1.jsx)(select_input_1.SelectInput, { ref: inputRef, onBlur: onBlur, isDisabled: isDisabled, className: (0, tailwind_utils_1.tailwind)('h-fit md:h-6 w-full'), inputValue: inputValue, handleInputChange: handleInputChange })), (0, jsx_runtime_1.jsx)(components_1.BilloIcon, { icon: openDropdownMenu ? components_1.IconSymbol.CARET_UP : components_1.IconSymbol.CARET_DOWN, size: components_1.IconSize.SM, color: isDisabled ? components_1.IconColor.BLUE_03 : components_1.IconColor.BLUE_01, className: (0, tailwind_utils_1.tailwind)('ml-2') })] }), (0, jsx_runtime_1.jsx)(components_1.DropDownMenu, { selectedIDs: selectedIDs, options: searchedOptions, emptyElement: typeof emptyLabel === 'string' ? ((0, jsx_runtime_1.jsx)(components_1.Text, { variant: components_1.TextVariant.BODY, className: (0, tailwind_utils_1.tailwind)('flex whitespace-normal bg-white py-2 px-4'), children: emptyLabel })) : (emptyLabel), className: (0, tailwind_utils_1.tailwind)('w-full', { hidden: !openDropdownMenu }) })] }));
|
|
31
32
|
}
|
|
32
33
|
//# sourceMappingURL=select.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"select.js","sourceRoot":"","sources":["../../../../src/components/molecules/select/select.tsx"],"names":[],"mappings":";;
|
|
1
|
+
{"version":3,"file":"select.js","sourceRoot":"","sources":["../../../../src/components/molecules/select/select.tsx"],"names":[],"mappings":"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"}
|
|
@@ -16,9 +16,10 @@ export type UseSelectProps = {
|
|
|
16
16
|
initialInputValue?: string;
|
|
17
17
|
options: DropDownMenuOptionProps[];
|
|
18
18
|
initialValues?: string[] | string;
|
|
19
|
+
debounceDelay?: number;
|
|
19
20
|
onBlur?: () => void;
|
|
20
21
|
onChangeText?: (value: string) => void;
|
|
21
22
|
onOptionChange?: (options: string[]) => void;
|
|
22
23
|
};
|
|
23
|
-
export declare function useSelect({ isMultiSelect, removeOnSelect, initialInputValue, options, initialValues, onBlur, onChangeText, onOptionChange, }: UseSelectProps): UseSelectHook;
|
|
24
|
+
export declare function useSelect({ isMultiSelect, removeOnSelect, initialInputValue, options, initialValues, debounceDelay, onBlur, onChangeText, onOptionChange, }: UseSelectProps): UseSelectHook;
|
|
24
25
|
//# sourceMappingURL=use-select.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"use-select.d.ts","sourceRoot":"","sources":["../../../../src/components/molecules/select/use-select.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,gBAAgB,EAAE,uBAAuB,EAAmB,MAAM,cAAc,CAAC;
|
|
1
|
+
{"version":3,"file":"use-select.d.ts","sourceRoot":"","sources":["../../../../src/components/molecules/select/use-select.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,gBAAgB,EAAE,uBAAuB,EAAmB,MAAM,cAAc,CAAC;AAI1F,MAAM,MAAM,aAAa,GAAG;IAC1B,gBAAgB,EAAE,OAAO,CAAC;IAC1B,UAAU,EAAE,MAAM,CAAC;IACnB,cAAc,EAAE,MAAM,EAAE,CAAC;IACzB,SAAS,EAAE,gBAAgB,EAAE,CAAC;IAC9B,eAAe,EAAE,uBAAuB,EAAE,CAAC;IAC3C,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC,gBAAgB,CAAC,CAAC;IAC5C,YAAY,EAAE,KAAK,CAAC,SAAS,CAAC,gBAAgB,CAAC,CAAC;IAChD,kBAAkB,EAAE,MAAM,IAAI,CAAC;IAC/B,iBAAiB,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CAC5C,CAAC;AAEF,MAAM,MAAM,cAAc,GAAG;IAC3B,aAAa,EAAE,OAAO,CAAC;IACvB,cAAc,EAAE,OAAO,CAAC;IACxB,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,OAAO,EAAE,uBAAuB,EAAE,CAAC;IACnC,aAAa,CAAC,EAAE,MAAM,EAAE,GAAG,MAAM,CAAC;IAClC,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACvC,cAAc,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;CAC9C,CAAC;AAEF,wBAAgB,SAAS,CAAC,EACxB,aAAa,EACb,cAAc,EACd,iBAAiB,EACjB,OAAO,EACP,aAAa,EACb,aAAa,EACb,MAAiB,EACjB,YAAuB,EACvB,cAAyB,GAC1B,EAAE,cAAc,GAAG,aAAa,CAkShC"}
|
|
@@ -4,17 +4,50 @@ exports.useSelect = useSelect;
|
|
|
4
4
|
const react_1 = require("react");
|
|
5
5
|
const components_1 = require("../../../components");
|
|
6
6
|
const string_utils_1 = require("../../../utils/string-utils/string-utils");
|
|
7
|
-
|
|
7
|
+
const use_debounce_1 = require("../../../utils/use-debounce");
|
|
8
|
+
function useSelect({ isMultiSelect, removeOnSelect, initialInputValue, options, initialValues, debounceDelay, onBlur = () => { }, onChangeText = () => { }, onOptionChange = () => { }, }) {
|
|
8
9
|
const { normalize } = (0, string_utils_1.useStringUtils)();
|
|
9
10
|
const [chipsData, setChipsData] = (0, react_1.useState)([]);
|
|
10
11
|
const [openDropdownMenu, setOpenDropdownMenu] = (0, react_1.useState)(false);
|
|
11
12
|
const [searchedOptions, setSearchedOptions] = (0, react_1.useState)([]);
|
|
12
13
|
const [selectedValues, setSelectedValues] = (0, react_1.useState)([]);
|
|
13
|
-
const [inputValue, setInputValue] = (0, react_1.useState)('');
|
|
14
14
|
const [firstRender, setFirstRender] = (0, react_1.useState)(false);
|
|
15
|
+
const [inputValue, setInputValue] = (0, react_1.useState)('');
|
|
16
|
+
const [searchValue, setSearchValue] = (0, react_1.useState)('');
|
|
17
|
+
const [lastCommittedLabel, setLastCommittedLabel] = (0, react_1.useState)('');
|
|
18
|
+
const debouncedSearch = (0, use_debounce_1.useDebounce)(searchValue, debounceDelay ?? 0);
|
|
15
19
|
const inputRef = (0, react_1.useRef)(null);
|
|
16
20
|
const containerRef = (0, react_1.useRef)(null);
|
|
17
21
|
const memoOptions = (0, react_1.useMemo)(() => options || [], [options]);
|
|
22
|
+
(0, react_1.useEffect)(() => {
|
|
23
|
+
const dropDownMenuOption = handleMapOptions();
|
|
24
|
+
const removedOptions = removeOnSelect
|
|
25
|
+
? dropDownMenuOption.filter((option) => !selectedValues.includes(option.value))
|
|
26
|
+
: dropDownMenuOption;
|
|
27
|
+
const normalizedValue = normalize(debouncedSearch).toLowerCase();
|
|
28
|
+
const filteredOptions = removedOptions.filter((currentOption) => {
|
|
29
|
+
const hasMatchingHelper = currentOption.helperLabel &&
|
|
30
|
+
normalize(currentOption.helperLabel).toLowerCase().includes(normalizedValue);
|
|
31
|
+
const hasMatchingValue = normalize(currentOption.label)
|
|
32
|
+
.toLowerCase()
|
|
33
|
+
.includes(normalizedValue);
|
|
34
|
+
return (hasMatchingValue ||
|
|
35
|
+
hasMatchingHelper ||
|
|
36
|
+
currentOption.variant !== components_1.MenuItemVariant.DEFAULT);
|
|
37
|
+
});
|
|
38
|
+
setSearchedOptions(filteredOptions);
|
|
39
|
+
}, [debouncedSearch, removeOnSelect, selectedValues, options]);
|
|
40
|
+
(0, react_1.useEffect)(() => {
|
|
41
|
+
if (!openDropdownMenu) {
|
|
42
|
+
if (!isMultiSelect) {
|
|
43
|
+
setInputValue(lastCommittedLabel ?? '');
|
|
44
|
+
}
|
|
45
|
+
else {
|
|
46
|
+
setInputValue('');
|
|
47
|
+
}
|
|
48
|
+
setSearchValue('');
|
|
49
|
+
}
|
|
50
|
+
}, [openDropdownMenu, isMultiSelect, lastCommittedLabel]);
|
|
18
51
|
function handleDropdownMenu() {
|
|
19
52
|
setOpenDropdownMenu((current) => !current);
|
|
20
53
|
}
|
|
@@ -40,10 +73,16 @@ function useSelect({ isMultiSelect, removeOnSelect, initialInputValue, options,
|
|
|
40
73
|
}
|
|
41
74
|
async function handleGetSelectedValues(newSelected) {
|
|
42
75
|
if (!isMultiSelect) {
|
|
43
|
-
|
|
76
|
+
const label = newSelected?.label ?? '';
|
|
77
|
+
onChangeText(label);
|
|
78
|
+
setInputValue(label);
|
|
79
|
+
setSearchValue('');
|
|
80
|
+
setLastCommittedLabel(label);
|
|
44
81
|
return [newSelected.value];
|
|
45
82
|
}
|
|
46
83
|
setInputValue('');
|
|
84
|
+
onChangeText('');
|
|
85
|
+
setSearchValue('');
|
|
47
86
|
handleMapChipsData(newSelected);
|
|
48
87
|
return [...(selectedValues || []), newSelected.value];
|
|
49
88
|
}
|
|
@@ -57,6 +96,9 @@ function useSelect({ isMultiSelect, removeOnSelect, initialInputValue, options,
|
|
|
57
96
|
onOptionChange?.(newSelectedValues);
|
|
58
97
|
}
|
|
59
98
|
function handleMapOptions() {
|
|
99
|
+
if (!options) {
|
|
100
|
+
return [];
|
|
101
|
+
}
|
|
60
102
|
const mapOptions = options.map((option) => {
|
|
61
103
|
const newOption = {
|
|
62
104
|
...option,
|
|
@@ -77,20 +119,7 @@ function useSelect({ isMultiSelect, removeOnSelect, initialInputValue, options,
|
|
|
77
119
|
function handleInputChange(value) {
|
|
78
120
|
onChangeText(value);
|
|
79
121
|
setInputValue(value);
|
|
80
|
-
|
|
81
|
-
const removedOptions = removeOnSelect
|
|
82
|
-
? dropDownMenuOption.filter((option) => !selectedValues.includes(option.value))
|
|
83
|
-
: dropDownMenuOption;
|
|
84
|
-
const filteredOptions = removedOptions.filter((currentOption) => {
|
|
85
|
-
const normalizedValue = normalize(value).toLowerCase();
|
|
86
|
-
const hasMatchingHelper = currentOption.helperLabel &&
|
|
87
|
-
normalize(currentOption.helperLabel).toLowerCase().includes(normalizedValue);
|
|
88
|
-
const hasMatchingValue = normalize(currentOption.label)
|
|
89
|
-
.toLowerCase()
|
|
90
|
-
.includes(normalizedValue);
|
|
91
|
-
return (hasMatchingValue || hasMatchingHelper || currentOption.variant !== components_1.MenuItemVariant.DEFAULT);
|
|
92
|
-
});
|
|
93
|
-
setSearchedOptions(filteredOptions);
|
|
122
|
+
setSearchValue(value);
|
|
94
123
|
}
|
|
95
124
|
function initializeValues() {
|
|
96
125
|
const values = Array.isArray(initialValues) ? initialValues : [initialValues];
|
|
@@ -110,6 +139,7 @@ function useSelect({ isMultiSelect, removeOnSelect, initialInputValue, options,
|
|
|
110
139
|
setChipsData(chipInitialValue);
|
|
111
140
|
setSelectedValues(initialSelectValues);
|
|
112
141
|
setInputValue(!isMultiSelect ? initial : '');
|
|
142
|
+
setLastCommittedLabel(!isMultiSelect ? (initial ?? '') : '');
|
|
113
143
|
}
|
|
114
144
|
(0, react_1.useEffect)(() => {
|
|
115
145
|
if (firstRender) {
|
|
@@ -139,17 +169,31 @@ function useSelect({ isMultiSelect, removeOnSelect, initialInputValue, options,
|
|
|
139
169
|
inputRef.current.blur();
|
|
140
170
|
}, [openDropdownMenu]);
|
|
141
171
|
(0, react_1.useEffect)(() => {
|
|
172
|
+
function handleCloseWithoutSaving() {
|
|
173
|
+
if (!openDropdownMenu) {
|
|
174
|
+
return;
|
|
175
|
+
}
|
|
176
|
+
onBlur();
|
|
177
|
+
setOpenDropdownMenu(false);
|
|
178
|
+
}
|
|
142
179
|
function handleClickOutside(event) {
|
|
143
180
|
if (openDropdownMenu &&
|
|
144
181
|
containerRef.current &&
|
|
145
182
|
!containerRef.current.contains(event.target)) {
|
|
146
|
-
|
|
147
|
-
|
|
183
|
+
handleCloseWithoutSaving();
|
|
184
|
+
}
|
|
185
|
+
}
|
|
186
|
+
function onKeyDown(e) {
|
|
187
|
+
if (openDropdownMenu && e.key === 'Escape') {
|
|
188
|
+
e.stopPropagation();
|
|
189
|
+
handleCloseWithoutSaving();
|
|
148
190
|
}
|
|
149
191
|
}
|
|
150
192
|
document.addEventListener('mousedown', handleClickOutside);
|
|
193
|
+
document.addEventListener('keydown', onKeyDown);
|
|
151
194
|
return () => {
|
|
152
195
|
document.removeEventListener('mousedown', handleClickOutside);
|
|
196
|
+
document.removeEventListener('keydown', onKeyDown);
|
|
153
197
|
};
|
|
154
198
|
}, [openDropdownMenu]);
|
|
155
199
|
(0, react_1.useEffect)(() => {
|
|
@@ -164,6 +208,7 @@ function useSelect({ isMultiSelect, removeOnSelect, initialInputValue, options,
|
|
|
164
208
|
setSelectedValues([selectedOption.value]);
|
|
165
209
|
setSearchedOptions([selectedOption]);
|
|
166
210
|
setInputValue(initialInputValue ?? '');
|
|
211
|
+
setLastCommittedLabel(initialInputValue ?? '');
|
|
167
212
|
}, [initialInputValue]);
|
|
168
213
|
return {
|
|
169
214
|
openDropdownMenu,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"use-select.js","sourceRoot":"","sources":["../../../../src/components/molecules/select/use-select.ts"],"names":[],"mappings":";;
|
|
1
|
+
{"version":3,"file":"use-select.js","sourceRoot":"","sources":["../../../../src/components/molecules/select/use-select.ts"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"use-debounce.d.ts","sourceRoot":"","sources":["../../src/utils/use-debounce.ts"],"names":[],"mappings":"AAEA,wBAAgB,WAAW,CAAC,CAAC,EAAE,KAAK,EAAE,CAAC,EAAE,KAAK,GAAE,MAAY,GAAG,CAAC,CAa/D"}
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
+
exports.useDebounce = useDebounce;
|
|
4
|
+
const react_1 = require("react");
|
|
5
|
+
function useDebounce(value, delay = 500) {
|
|
6
|
+
const [debouncedValue, setDebouncedValue] = (0, react_1.useState)(value);
|
|
7
|
+
(0, react_1.useEffect)(() => {
|
|
8
|
+
const handler = setTimeout(() => {
|
|
9
|
+
setDebouncedValue(value);
|
|
10
|
+
}, delay);
|
|
11
|
+
return () => {
|
|
12
|
+
clearTimeout(handler);
|
|
13
|
+
};
|
|
14
|
+
}, [value, delay]);
|
|
15
|
+
return debouncedValue;
|
|
16
|
+
}
|
|
17
|
+
//# sourceMappingURL=use-debounce.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"use-debounce.js","sourceRoot":"","sources":["../../src/utils/use-debounce.ts"],"names":[],"mappings":";;AAEA,kCAaC;AAfD,iCAA4C;AAE5C,SAAgB,WAAW,CAAI,KAAQ,EAAE,QAAgB,GAAG;IAC1D,MAAM,CAAC,cAAc,EAAE,iBAAiB,CAAC,GAAG,IAAA,gBAAQ,EAAI,KAAK,CAAC,CAAC;IAC/D,IAAA,iBAAS,EAAC,GAAG,EAAE;QACb,MAAM,OAAO,GAAG,UAAU,CAAC,GAAG,EAAE;YAC9B,iBAAiB,CAAC,KAAK,CAAC,CAAC;QAC3B,CAAC,EAAE,KAAK,CAAC,CAAC;QAEV,OAAO,GAAG,EAAE;YACV,YAAY,CAAC,OAAO,CAAC,CAAC;QACxB,CAAC,CAAC;IACJ,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,CAAC,CAAC;IAEnB,OAAO,cAAc,CAAC;AACxB,CAAC"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "period-ui",
|
|
3
|
-
"version": "0.1.
|
|
3
|
+
"version": "0.1.72",
|
|
4
4
|
"main": "dist/index.js",
|
|
5
5
|
"types": "dist/index.d.ts",
|
|
6
6
|
"style": "dist/index.css",
|
|
@@ -30,11 +30,12 @@
|
|
|
30
30
|
"access": "public"
|
|
31
31
|
},
|
|
32
32
|
"dependencies": {
|
|
33
|
-
"@headlessui/react": "
|
|
33
|
+
"@headlessui/react": "1.7.17",
|
|
34
34
|
"class-variance-authority": "0.7.1",
|
|
35
35
|
"clsx": "2.1.1",
|
|
36
36
|
"formik": "2.4.4",
|
|
37
37
|
"identity-obj-proxy": "3.0.0",
|
|
38
|
+
"react-window": "2.2.0",
|
|
38
39
|
"sass": "1.87.0",
|
|
39
40
|
"tailwind-merge": "2.6.0",
|
|
40
41
|
"ts-node": "10.9.2",
|
|
@@ -51,13 +52,13 @@
|
|
|
51
52
|
"@storybook/react": "8.4.7",
|
|
52
53
|
"@storybook/react-vite": "8.4.7",
|
|
53
54
|
"@storybook/test": "8.4.7",
|
|
54
|
-
"@testing-library/jest-dom": "6.
|
|
55
|
-
"@testing-library/react": "16.
|
|
56
|
-
"@testing-library/user-event": "14.
|
|
55
|
+
"@testing-library/jest-dom": "6.9.1",
|
|
56
|
+
"@testing-library/react": "16.3.0",
|
|
57
|
+
"@testing-library/user-event": "14.6.1",
|
|
57
58
|
"@types/node": "22.13.13",
|
|
58
59
|
"@types/react": "18.3.18",
|
|
59
60
|
"@types/react-dom": "18.3.5",
|
|
60
|
-
"@vitejs/plugin-react": "4.
|
|
61
|
+
"@vitejs/plugin-react": "4.7.0",
|
|
61
62
|
"autoprefixer": "10.4.20",
|
|
62
63
|
"eslint": "9.17.0",
|
|
63
64
|
"eslint-plugin-react-hooks": "5.0.0",
|
|
@@ -76,9 +77,9 @@
|
|
|
76
77
|
"tsc-alias": "^1.8.16",
|
|
77
78
|
"typescript": "5.6.2",
|
|
78
79
|
"typescript-eslint": "8.18.2",
|
|
79
|
-
"vite": "6.3.
|
|
80
|
+
"vite": "6.3.6",
|
|
80
81
|
"vite-tsconfig-paths": "5.1.4",
|
|
81
|
-
"vitest": "3.0.
|
|
82
|
+
"vitest": "3.0.8"
|
|
82
83
|
},
|
|
83
84
|
"peerDependencies": {
|
|
84
85
|
"react": "^17.0.0 || ^18.0.0",
|