period-ui 0.3.0 → 0.3.2
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/base-input/base-input.d.ts +8 -0
- package/dist/components/atoms/base-input/base-input.d.ts.map +1 -0
- package/dist/components/atoms/base-input/base-input.js +26 -0
- package/dist/components/atoms/base-input/base-input.js.map +1 -0
- package/dist/components/atoms/base-input/index.d.ts +2 -0
- package/dist/components/atoms/base-input/index.d.ts.map +1 -0
- package/dist/components/atoms/base-input/index.js +18 -0
- package/dist/components/atoms/base-input/index.js.map +1 -0
- package/dist/components/index.d.ts +1 -0
- package/dist/components/index.d.ts.map +1 -1
- package/dist/components/index.js +1 -0
- package/dist/components/index.js.map +1 -1
- package/dist/components/molecules/form/form-select/form-select.d.ts +2 -1
- package/dist/components/molecules/form/form-select/form-select.d.ts.map +1 -1
- package/dist/components/molecules/form/form-select/form-select.js +26 -21
- package/dist/components/molecules/form/form-select/form-select.js.map +1 -1
- package/dist/components/molecules/form/form-story-stubs.d.ts +11 -1
- package/dist/components/molecules/form/form-story-stubs.d.ts.map +1 -1
- package/dist/components/molecules/form/form-story-stubs.js +77 -0
- package/dist/components/molecules/form/form-story-stubs.js.map +1 -1
- package/dist/components/molecules/form/form-text-field/form-text-field.d.ts.map +1 -1
- package/dist/components/molecules/form/form-text-field/form-text-field.js +1 -1
- package/dist/components/molecules/form/form-text-field/form-text-field.js.map +1 -1
- package/dist/components/molecules/select/components/select-input.d.ts +3 -2
- package/dist/components/molecules/select/components/select-input.d.ts.map +1 -1
- package/dist/components/molecules/select/components/select-input.js +3 -17
- package/dist/components/molecules/select/components/select-input.js.map +1 -1
- package/dist/components/molecules/select/select.d.ts +1 -3
- package/dist/components/molecules/select/select.d.ts.map +1 -1
- package/dist/components/molecules/select/select.js +16 -20
- package/dist/components/molecules/select/select.js.map +1 -1
- package/dist/components/molecules/select/use-select.d.ts +14 -16
- package/dist/components/molecules/select/use-select.d.ts.map +1 -1
- package/dist/components/molecules/select/use-select.js +104 -139
- package/dist/components/molecules/select/use-select.js.map +1 -1
- package/dist/components/molecules/text-field/components/text-field-input.d.ts +1 -1
- package/dist/components/molecules/text-field/components/text-field-input.d.ts.map +1 -1
- package/dist/components/molecules/text-field/components/text-field-input.js +4 -17
- package/dist/components/molecules/text-field/components/text-field-input.js.map +1 -1
- package/dist/components/molecules/text-field/text-field.d.ts +3 -1
- package/dist/components/molecules/text-field/text-field.d.ts.map +1 -1
- package/dist/components/molecules/text-field/text-field.js +2 -2
- package/dist/components/molecules/text-field/text-field.js.map +1 -1
- package/package.json +1 -1
- package/dist/components/molecules/select/use-select-input-focus.d.ts +0 -5
- package/dist/components/molecules/select/use-select-input-focus.d.ts.map +0 -1
- package/dist/components/molecules/select/use-select-input-focus.js +0 -11
- package/dist/components/molecules/select/use-select-input-focus.js.map +0 -1
- package/dist/components/molecules/select/use-select-search.d.ts +0 -8
- package/dist/components/molecules/select/use-select-search.d.ts.map +0 -1
- package/dist/components/molecules/select/use-select-search.js +0 -14
- package/dist/components/molecules/select/use-select-search.js.map +0 -1
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
import { ChangeEvent, ComponentProps } from 'react';
|
|
2
|
+
export type BaseInputProps = Omit<ComponentProps<'input'>, 'onChange'> & {
|
|
3
|
+
mask?: string;
|
|
4
|
+
onValueChange?: (value: string) => void;
|
|
5
|
+
onChange?: (event: ChangeEvent<HTMLInputElement>) => void;
|
|
6
|
+
};
|
|
7
|
+
export declare const BaseInput: import("react").ForwardRefExoticComponent<Omit<BaseInputProps, "ref"> & import("react").RefAttributes<HTMLInputElement>>;
|
|
8
|
+
//# sourceMappingURL=base-input.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"base-input.d.ts","sourceRoot":"","sources":["../../../../src/components/atoms/base-input/base-input.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,cAAc,EAA4B,MAAM,OAAO,CAAC;AAG9E,MAAM,MAAM,cAAc,GAAG,IAAI,CAAC,cAAc,CAAC,OAAO,CAAC,EAAE,UAAU,CAAC,GAAG;IACvE,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,WAAW,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;CAC3D,CAAC;AAEF,eAAO,MAAM,SAAS,0HAyCpB,CAAC"}
|
|
@@ -0,0 +1,26 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
+
exports.BaseInput = void 0;
|
|
4
|
+
const jsx_runtime_1 = require("react/jsx-runtime");
|
|
5
|
+
const react_1 = require("react");
|
|
6
|
+
const react_imask_1 = require("react-imask");
|
|
7
|
+
exports.BaseInput = (0, react_1.forwardRef)(function BaseInput({ mask, onValueChange, onChange, value = '', name, ...rest }, ref) {
|
|
8
|
+
if (mask) {
|
|
9
|
+
return ((0, jsx_runtime_1.jsx)(react_imask_1.IMaskInput, { ...rest, inputRef: ref, mask: mask, name: name, value: String(value), autoComplete: "off", onAccept: (acceptedValue) => {
|
|
10
|
+
if (acceptedValue === String(value))
|
|
11
|
+
return;
|
|
12
|
+
onValueChange?.(acceptedValue);
|
|
13
|
+
onChange?.({
|
|
14
|
+
target: { value: acceptedValue, name },
|
|
15
|
+
});
|
|
16
|
+
} }));
|
|
17
|
+
}
|
|
18
|
+
return ((0, jsx_runtime_1.jsx)("input", { ...rest, ref: ref, name: name, value: value, autoComplete: "off", onChange: (event) => {
|
|
19
|
+
const capturedValue = event.target.value;
|
|
20
|
+
onValueChange?.(capturedValue);
|
|
21
|
+
onChange?.({
|
|
22
|
+
target: { value: capturedValue, name },
|
|
23
|
+
});
|
|
24
|
+
} }));
|
|
25
|
+
});
|
|
26
|
+
//# sourceMappingURL=base-input.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"base-input.js","sourceRoot":"","sources":["../../../../src/components/atoms/base-input/base-input.tsx"],"names":[],"mappings":";;;;AAAA,iCAA8E;AAC9E,6CAAyC;AAQ5B,QAAA,SAAS,GAAG,IAAA,kBAAU,EAAC,SAAS,SAAS,CACpD,EAAE,IAAI,EAAE,aAAa,EAAE,QAAQ,EAAE,KAAK,GAAG,EAAE,EAAE,IAAI,EAAE,GAAG,IAAI,EAAkB,EAC5E,GAAmC;IAEnC,IAAI,IAAI,EAAE,CAAC;QACT,OAAO,CACL,uBAAC,wBAAU,OACL,IAAI,EACR,QAAQ,EAAE,GAAG,EACb,IAAI,EAAE,IAAI,EACV,IAAI,EAAE,IAAI,EACV,KAAK,EAAE,MAAM,CAAC,KAAK,CAAC,EACpB,YAAY,EAAC,KAAK,EAClB,QAAQ,EAAE,CAAC,aAAqB,EAAE,EAAE;gBAClC,IAAI,aAAa,KAAK,MAAM,CAAC,KAAK,CAAC;oBAAE,OAAO;gBAC5C,aAAa,EAAE,CAAC,aAAa,CAAC,CAAC;gBAC/B,QAAQ,EAAE,CAAC;oBACT,MAAM,EAAE,EAAE,KAAK,EAAE,aAAa,EAAE,IAAI,EAAoC;iBACxC,CAAC,CAAC;YACtC,CAAC,GACD,CACH,CAAC;IACJ,CAAC;IAED,OAAO,CACL,qCACM,IAAI,EACR,GAAG,EAAE,GAAG,EACR,IAAI,EAAE,IAAI,EACV,KAAK,EAAE,KAAK,EACZ,YAAY,EAAC,KAAK,EAClB,QAAQ,EAAE,CAAC,KAAK,EAAE,EAAE;YAClB,MAAM,aAAa,GAAG,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC;YAEzC,aAAa,EAAE,CAAC,aAAa,CAAC,CAAC;YAC/B,QAAQ,EAAE,CAAC;gBACT,MAAM,EAAE,EAAE,KAAK,EAAE,aAAa,EAAE,IAAI,EAAoC;aACxC,CAAC,CAAC;QACtC,CAAC,GACD,CACH,CAAC;AACJ,CAAC,CAAC,CAAC"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/atoms/base-input/index.ts"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAC"}
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
|
|
3
|
+
if (k2 === undefined) k2 = k;
|
|
4
|
+
var desc = Object.getOwnPropertyDescriptor(m, k);
|
|
5
|
+
if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
|
|
6
|
+
desc = { enumerable: true, get: function() { return m[k]; } };
|
|
7
|
+
}
|
|
8
|
+
Object.defineProperty(o, k2, desc);
|
|
9
|
+
}) : (function(o, m, k, k2) {
|
|
10
|
+
if (k2 === undefined) k2 = k;
|
|
11
|
+
o[k2] = m[k];
|
|
12
|
+
}));
|
|
13
|
+
var __exportStar = (this && this.__exportStar) || function(m, exports) {
|
|
14
|
+
for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
|
|
15
|
+
};
|
|
16
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
17
|
+
__exportStar(require("./base-input"), exports);
|
|
18
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/atoms/base-input/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAAA,+CAA6B"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/components/index.ts"],"names":[],"mappings":"AACA,cAAc,oBAAoB,CAAC;AACnC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,mBAAmB,CAAC;AAClC,cAAc,sBAAsB,CAAC;AACrC,cAAc,mBAAmB,CAAC;AAClC,cAAc,yBAAyB,CAAC;AACxC,cAAc,wBAAwB,CAAC;AACvC,cAAc,mCAAmC,CAAC;AAClD,cAAc,qBAAqB,CAAC;AACpC,cAAc,cAAc,CAAC;AAC7B,cAAc,qBAAqB,CAAC;AACpC,cAAc,4BAA4B,CAAC;AAC3C,cAAc,iBAAiB,CAAC;AAChC,cAAc,qBAAqB,CAAC;AAGpC,cAAc,kBAAkB,CAAC;AACjC,cAAc,mBAAmB,CAAC;AAClC,cAAc,oBAAoB,CAAC;AACnC,cAAc,8BAA8B,CAAC;AAC7C,cAAc,kCAAkC,CAAC;AACjD,cAAc,gCAAgC,CAAC;AAC/C,cAAc,oCAAoC,CAAC;AACnD,cAAc,mCAAmC,CAAC;AAClD,cAAc,oBAAoB,CAAC;AACnC,cAAc,6BAA6B,CAAC;AAC5C,cAAc,wBAAwB,CAAC;AACvC,cAAc,qBAAqB,CAAC;AACpC,cAAc,uBAAuB,CAAC;AACtC,cAAc,wBAAwB,CAAC;AACvC,cAAc,sBAAsB,CAAC;AAGrC,cAAc,sBAAsB,CAAC;AACrC,cAAc,0BAA0B,CAAC"}
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/components/index.ts"],"names":[],"mappings":"AACA,cAAc,oBAAoB,CAAC;AACnC,cAAc,oBAAoB,CAAC;AACnC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,mBAAmB,CAAC;AAClC,cAAc,sBAAsB,CAAC;AACrC,cAAc,mBAAmB,CAAC;AAClC,cAAc,yBAAyB,CAAC;AACxC,cAAc,wBAAwB,CAAC;AACvC,cAAc,mCAAmC,CAAC;AAClD,cAAc,qBAAqB,CAAC;AACpC,cAAc,cAAc,CAAC;AAC7B,cAAc,qBAAqB,CAAC;AACpC,cAAc,4BAA4B,CAAC;AAC3C,cAAc,iBAAiB,CAAC;AAChC,cAAc,qBAAqB,CAAC;AAGpC,cAAc,kBAAkB,CAAC;AACjC,cAAc,mBAAmB,CAAC;AAClC,cAAc,oBAAoB,CAAC;AACnC,cAAc,8BAA8B,CAAC;AAC7C,cAAc,kCAAkC,CAAC;AACjD,cAAc,gCAAgC,CAAC;AAC/C,cAAc,oCAAoC,CAAC;AACnD,cAAc,mCAAmC,CAAC;AAClD,cAAc,oBAAoB,CAAC;AACnC,cAAc,6BAA6B,CAAC;AAC5C,cAAc,wBAAwB,CAAC;AACvC,cAAc,qBAAqB,CAAC;AACpC,cAAc,uBAAuB,CAAC;AACtC,cAAc,wBAAwB,CAAC;AACvC,cAAc,sBAAsB,CAAC;AAGrC,cAAc,sBAAsB,CAAC;AACrC,cAAc,0BAA0B,CAAC"}
|
package/dist/components/index.js
CHANGED
|
@@ -14,6 +14,7 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
|
|
|
14
14
|
for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
|
|
15
15
|
};
|
|
16
16
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
17
|
+
__exportStar(require("./atoms/base-input"), exports);
|
|
17
18
|
__exportStar(require("./atoms/billo-icon"), exports);
|
|
18
19
|
__exportStar(require("./atoms/button"), exports);
|
|
19
20
|
__exportStar(require("./atoms/check-box"), exports);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/components/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;AACA,qDAAmC;AACnC,iDAA+B;AAC/B,oDAAkC;AAClC,uDAAqC;AACrC,oDAAkC;AAClC,0DAAwC;AACxC,yDAAuC;AACvC,oEAAkD;AAClD,sDAAoC;AACpC,+CAA6B;AAC7B,sDAAoC;AACpC,6DAA2C;AAC3C,kDAAgC;AAChC,sDAAoC;AAGpC,mDAAiC;AACjC,oDAAkC;AAClC,qDAAmC;AACnC,+DAA6C;AAC7C,mEAAiD;AACjD,iEAA+C;AAC/C,qEAAmD;AACnD,oEAAkD;AAClD,qDAAmC;AACnC,8DAA4C;AAC5C,yDAAuC;AACvC,sDAAoC;AACpC,wDAAsC;AACtC,yDAAuC;AACvC,uDAAqC;AAGrC,uDAAqC;AACrC,2DAAyC"}
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/components/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;AACA,qDAAmC;AACnC,qDAAmC;AACnC,iDAA+B;AAC/B,oDAAkC;AAClC,uDAAqC;AACrC,oDAAkC;AAClC,0DAAwC;AACxC,yDAAuC;AACvC,oEAAkD;AAClD,sDAAoC;AACpC,+CAA6B;AAC7B,sDAAoC;AACpC,6DAA2C;AAC3C,kDAAgC;AAChC,sDAAoC;AAGpC,mDAAiC;AACjC,oDAAkC;AAClC,qDAAmC;AACnC,+DAA6C;AAC7C,mEAAiD;AACjD,iEAA+C;AAC/C,qEAAmD;AACnD,oEAAkD;AAClD,qDAAmC;AACnC,8DAA4C;AAC5C,yDAAuC;AACvC,sDAAoC;AACpC,wDAAsC;AACtC,yDAAuC;AACvC,uDAAqC;AAGrC,uDAAqC;AACrC,2DAAyC"}
|
|
@@ -2,6 +2,7 @@ import { SelectProps } from '../../../../components';
|
|
|
2
2
|
import { FormControlProps } from '../../../../containers';
|
|
3
3
|
export type FormSelectProps = FormControlProps & SelectProps & {
|
|
4
4
|
formControlClassName?: string;
|
|
5
|
+
syncTypingToField?: boolean;
|
|
5
6
|
};
|
|
6
|
-
export declare function FormSelect({ formControlClassName, ...props }: FormSelectProps): import("react/jsx-runtime").JSX.Element;
|
|
7
|
+
export declare function FormSelect({ formControlClassName, syncTypingToField, ...props }: FormSelectProps): import("react/jsx-runtime").JSX.Element;
|
|
7
8
|
//# sourceMappingURL=form-select.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"form-select.d.ts","sourceRoot":"","sources":["../../../../../src/components/molecules/form/form-select/form-select.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"form-select.d.ts","sourceRoot":"","sources":["../../../../../src/components/molecules/form/form-select/form-select.tsx"],"names":[],"mappings":"AACA,OAAO,EAAU,WAAW,EAAE,MAAM,wBAAwB,CAAC;AAC7D,OAAO,EAAe,gBAAgB,EAAkB,MAAM,wBAAwB,CAAC;AAEvF,MAAM,MAAM,eAAe,GAAG,gBAAgB,GAC5C,WAAW,GAAG;IACZ,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B,iBAAiB,CAAC,EAAE,OAAO,CAAC;CAC7B,CAAC;AAEJ,wBAAgB,UAAU,CAAC,EACzB,oBAAoB,EACpB,iBAAyB,EACzB,GAAG,KAAK,EACT,EAAE,eAAe,2CAkEjB"}
|
|
@@ -4,36 +4,41 @@ exports.FormSelect = FormSelect;
|
|
|
4
4
|
const jsx_runtime_1 = require("react/jsx-runtime");
|
|
5
5
|
const components_1 = require("../../../../components");
|
|
6
6
|
const containers_1 = require("../../../../containers");
|
|
7
|
-
function FormSelect({ formControlClassName, ...props }) {
|
|
8
|
-
async function handleValueChange(
|
|
9
|
-
const { formProps, formName,
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
}
|
|
13
|
-
if (!isWritable) {
|
|
7
|
+
function FormSelect({ formControlClassName, syncTypingToField = false, ...props }) {
|
|
8
|
+
async function handleValueChange(typedText) {
|
|
9
|
+
const { formProps, formName, onChangeText } = props;
|
|
10
|
+
onChangeText?.(typedText);
|
|
11
|
+
if (!syncTypingToField)
|
|
14
12
|
return;
|
|
15
|
-
}
|
|
16
|
-
await formProps?.setFieldValue(formName, value || '');
|
|
13
|
+
await formProps?.setFieldValue(formName, { value: undefined, label: typedText });
|
|
17
14
|
}
|
|
18
15
|
async function handleChange(selectedValues) {
|
|
19
|
-
const { formProps, formName, onOptionChange, options } = props;
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
16
|
+
const { formProps, formName, onOptionChange, options, isMultiSelect } = props;
|
|
17
|
+
if (isMultiSelect) {
|
|
18
|
+
const selectedOptions = options
|
|
19
|
+
.filter((option) => selectedValues.includes(option.value))
|
|
20
|
+
.map((option) => ({ value: option.value, label: option.label }));
|
|
21
|
+
await formProps?.setFieldValue(formName, selectedOptions);
|
|
24
22
|
}
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
23
|
+
else {
|
|
24
|
+
const [firstValue] = selectedValues;
|
|
25
|
+
const matched = options.find((option) => option.value === firstValue);
|
|
26
|
+
if (!matched) {
|
|
27
|
+
return;
|
|
28
|
+
}
|
|
29
|
+
await formProps?.setFieldValue(formName, { value: matched.value, label: matched.label });
|
|
28
30
|
}
|
|
31
|
+
onOptionChange?.(selectedValues);
|
|
29
32
|
}
|
|
30
33
|
async function handleOnBlur() {
|
|
31
34
|
const { onBlur, formProps, formName } = props;
|
|
32
35
|
await formProps?.setFieldTouched(formName ?? '', true, true);
|
|
33
|
-
|
|
34
|
-
onBlur();
|
|
35
|
-
}
|
|
36
|
+
onBlur?.();
|
|
36
37
|
}
|
|
37
|
-
|
|
38
|
+
const rawFormError = props.formProps?.errors[props.formName];
|
|
39
|
+
const formError = rawFormError?.value || rawFormError?.label;
|
|
40
|
+
return ((0, jsx_runtime_1.jsx)(containers_1.FormControl, { ...props, errorText: props.errorText ||
|
|
41
|
+
formError ||
|
|
42
|
+
props.formProps?.errors[props.formName], inputWidth: props.isMultiSelect ? containers_1.FormInputWidth.FOUR_COLUMN : props.inputWidth, className: formControlClassName, children: ({ isErrorVisible }) => ((0, jsx_runtime_1.jsx)(components_1.Select, { ...props, isErrorVisible: isErrorVisible, onOptionChange: handleChange, onChangeText: handleValueChange, onBlur: handleOnBlur })) }));
|
|
38
43
|
}
|
|
39
44
|
//# sourceMappingURL=form-select.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"form-select.js","sourceRoot":"","sources":["../../../../../src/components/molecules/form/form-select/form-select.tsx"],"names":[],"mappings":";;
|
|
1
|
+
{"version":3,"file":"form-select.js","sourceRoot":"","sources":["../../../../../src/components/molecules/form/form-select/form-select.tsx"],"names":[],"mappings":";;AAUA,gCAsEC;;AA/ED,uDAA6D;AAC7D,uDAAuF;AAQvF,SAAgB,UAAU,CAAC,EACzB,oBAAoB,EACpB,iBAAiB,GAAG,KAAK,EACzB,GAAG,KAAK,EACQ;IAChB,KAAK,UAAU,iBAAiB,CAAC,SAAiB;QAChD,MAAM,EAAE,SAAS,EAAE,QAAQ,EAAE,YAAY,EAAE,GAAG,KAAK,CAAC;QAEpD,YAAY,EAAE,CAAC,SAAS,CAAC,CAAC;QAE1B,IAAI,CAAC,iBAAiB;YAAE,OAAO;QAE/B,MAAM,SAAS,EAAE,aAAa,CAAC,QAAS,EAAE,EAAE,KAAK,EAAE,SAAS,EAAE,KAAK,EAAE,SAAS,EAAE,CAAC,CAAC;IACpF,CAAC;IAED,KAAK,UAAU,YAAY,CAAC,cAAwB;QAClD,MAAM,EAAE,SAAS,EAAE,QAAQ,EAAE,cAAc,EAAE,OAAO,EAAE,aAAa,EAAE,GAAG,KAAK,CAAC;QAE9E,IAAI,aAAa,EAAE,CAAC;YAClB,MAAM,eAAe,GAAmB,OAAO;iBAC5C,MAAM,CAAC,CAAC,MAAM,EAAE,EAAE,CAAC,cAAc,CAAC,QAAQ,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;iBACzD,GAAG,CAAC,CAAC,MAAM,EAAE,EAAE,CAAC,CAAC,EAAE,KAAK,EAAE,MAAM,CAAC,KAAK,EAAE,KAAK,EAAE,MAAM,CAAC,KAAK,EAAE,CAAC,CAAC,CAAC;YAEnE,MAAM,SAAS,EAAE,aAAa,CAAC,QAAS,EAAE,eAAe,CAAC,CAAC;QAC7D,CAAC;aAAM,CAAC;YACN,MAAM,CAAC,UAAU,CAAC,GAAG,cAAc,CAAC;YACpC,MAAM,OAAO,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC,MAAM,EAAE,EAAE,CAAC,MAAM,CAAC,KAAK,KAAK,UAAU,CAAC,CAAC;YAEtE,IAAI,CAAC,OAAO,EAAE,CAAC;gBACb,OAAO;YACT,CAAC;YAED,MAAM,SAAS,EAAE,aAAa,CAAC,QAAS,EAAE,EAAE,KAAK,EAAE,OAAO,CAAC,KAAK,EAAE,KAAK,EAAE,OAAO,CAAC,KAAK,EAAE,CAAC,CAAC;QAC5F,CAAC;QAED,cAAc,EAAE,CAAC,cAAc,CAAC,CAAC;IACnC,CAAC;IAED,KAAK,UAAU,YAAY;QACzB,MAAM,EAAE,MAAM,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,KAAK,CAAC;QAE9C,MAAM,SAAS,EAAE,eAAe,CAAC,QAAQ,IAAI,EAAE,EAAE,IAAI,EAAE,IAAI,CAAC,CAAC;QAC7D,MAAM,EAAE,EAAE,CAAC;IACb,CAAC;IAED,MAAM,YAAY,GAAG,KAAK,CAAC,SAAS,EAAE,MAAM,CAAC,KAAK,CAAC,QAAS,CAAiB,CAAC;IAC9E,MAAM,SAAS,GAAG,YAAY,EAAE,KAAK,IAAI,YAAY,EAAE,KAAK,CAAC;IAE7D,OAAO,CACL,uBAAC,wBAAW,OACN,KAAK,EACT,SAAS,EACP,KAAK,CAAC,SAAS;YACf,SAAS;YACR,KAAK,CAAC,SAAS,EAAE,MAAM,CAAC,KAAK,CAAC,QAAS,CAAwB,EAElE,UAAU,EAAE,KAAK,CAAC,aAAa,CAAC,CAAC,CAAC,2BAAc,CAAC,WAAW,CAAC,CAAC,CAAC,KAAK,CAAC,UAAU,EAC/E,SAAS,EAAE,oBAAoB,YAE9B,CAAC,EAAE,cAAc,EAAE,EAAE,EAAE,CAAC,CACvB,uBAAC,mBAAM,OACD,KAAK,EACT,cAAc,EAAE,cAAc,EAC9B,cAAc,EAAE,YAAY,EAC5B,YAAY,EAAE,iBAAiB,EAC/B,MAAM,EAAE,YAAY,GACpB,CACH,GACW,CACf,CAAC;AACJ,CAAC"}
|
|
@@ -1,11 +1,21 @@
|
|
|
1
|
-
import { FormikValues } from 'formik';
|
|
1
|
+
import { FormikErrors, FormikTouched, FormikValues } from 'formik';
|
|
2
|
+
import { ObjectSchema } from 'yup';
|
|
2
3
|
import { FormHelpers, FormRenderProps } from './form-types';
|
|
3
4
|
export type TestFormValues = {
|
|
4
5
|
test: string;
|
|
5
6
|
};
|
|
7
|
+
type StoryFormConfig<FormValuesType extends FormikValues> = {
|
|
8
|
+
initialValues: FormValuesType;
|
|
9
|
+
validationSchema?: ObjectSchema<any>;
|
|
10
|
+
initialTouched?: FormikTouched<FormValuesType>;
|
|
11
|
+
initialErrors?: FormikErrors<FormValuesType>;
|
|
12
|
+
onSubmit?: (values: FormValuesType) => void;
|
|
13
|
+
};
|
|
14
|
+
export declare function useReactiveFormikProps<FormValuesType extends FormikValues>(config: StoryFormConfig<FormValuesType>): FormRenderProps<FormValuesType>;
|
|
6
15
|
export type FormConfig<FormValuesType> = {
|
|
7
16
|
initialValues: FormValuesType;
|
|
8
17
|
onSubmit: (values: FormValuesType, helpers?: FormHelpers<FormValuesType>) => void;
|
|
9
18
|
};
|
|
10
19
|
export declare function createMockFormikProps<T extends FormikValues>(config: FormConfig<T>): FormRenderProps<T>;
|
|
20
|
+
export {};
|
|
11
21
|
//# sourceMappingURL=form-story-stubs.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"form-story-stubs.d.ts","sourceRoot":"","sources":["../../../../src/components/molecules/form/form-story-stubs.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"form-story-stubs.d.ts","sourceRoot":"","sources":["../../../../src/components/molecules/form/form-story-stubs.ts"],"names":[],"mappings":"AAGA,OAAO,EAIL,YAAY,EAEZ,aAAa,EACb,YAAY,EACb,MAAM,QAAQ,CAAC;AAChB,OAAO,EAAE,YAAY,EAAmB,MAAM,KAAK,CAAC;AACpD,OAAO,EAAE,WAAW,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC;AAE5D,MAAM,MAAM,cAAc,GAAG;IAC3B,IAAI,EAAE,MAAM,CAAC;CACd,CAAC;AAEF,KAAK,eAAe,CAAC,cAAc,SAAS,YAAY,IAAI;IAC1D,aAAa,EAAE,cAAc,CAAC;IAC9B,gBAAgB,CAAC,EAAE,YAAY,CAAC,GAAG,CAAC,CAAC;IACrC,cAAc,CAAC,EAAE,aAAa,CAAC,cAAc,CAAC,CAAC;IAC/C,aAAa,CAAC,EAAE,YAAY,CAAC,cAAc,CAAC,CAAC;IAC7C,QAAQ,CAAC,EAAE,CAAC,MAAM,EAAE,cAAc,KAAK,IAAI,CAAC;CAC7C,CAAC;AAyDF,wBAAgB,sBAAsB,CAAC,cAAc,SAAS,YAAY,EACxE,MAAM,EAAE,eAAe,CAAC,cAAc,CAAC,GACtC,eAAe,CAAC,cAAc,CAAC,CA8DjC;AAED,MAAM,MAAM,UAAU,CAAC,cAAc,IAAI;IACvC,aAAa,EAAE,cAAc,CAAC;IAC9B,QAAQ,EAAE,CAAC,MAAM,EAAE,cAAc,EAAE,OAAO,CAAC,EAAE,WAAW,CAAC,cAAc,CAAC,KAAK,IAAI,CAAC;CACnF,CAAC;AAEF,wBAAgB,qBAAqB,CAAC,CAAC,SAAS,YAAY,EAC1D,MAAM,EAAE,UAAU,CAAC,CAAC,CAAC,GACpB,eAAe,CAAC,CAAC,CAAC,CAuFpB"}
|
|
@@ -1,6 +1,83 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
+
exports.useReactiveFormikProps = useReactiveFormikProps;
|
|
3
4
|
exports.createMockFormikProps = createMockFormikProps;
|
|
5
|
+
const react_1 = require("react");
|
|
6
|
+
const yup_1 = require("yup");
|
|
7
|
+
function buildErrorsFromValidationError(validationError) {
|
|
8
|
+
const errors = {};
|
|
9
|
+
const errorsToProcess = validationError.inner.length > 0
|
|
10
|
+
? validationError.inner
|
|
11
|
+
: [validationError];
|
|
12
|
+
for (const singleError of errorsToProcess) {
|
|
13
|
+
if (!singleError.path)
|
|
14
|
+
continue;
|
|
15
|
+
const pathParts = singleError.path.split('.');
|
|
16
|
+
if (pathParts.length === 1) {
|
|
17
|
+
errors[pathParts[0]] = singleError.message;
|
|
18
|
+
}
|
|
19
|
+
else {
|
|
20
|
+
const [fieldName, subfieldName] = pathParts;
|
|
21
|
+
if (!errors[fieldName] || typeof errors[fieldName] === 'string') {
|
|
22
|
+
errors[fieldName] = {};
|
|
23
|
+
}
|
|
24
|
+
errors[fieldName][subfieldName] = singleError.message;
|
|
25
|
+
}
|
|
26
|
+
}
|
|
27
|
+
return errors;
|
|
28
|
+
}
|
|
29
|
+
function useReactiveFormikProps(config) {
|
|
30
|
+
const [values, setValuesState] = (0, react_1.useState)(config.initialValues);
|
|
31
|
+
const [errors, setErrors] = (0, react_1.useState)(config.initialErrors ?? {});
|
|
32
|
+
const [touched, setTouchedState] = (0, react_1.useState)(config.initialTouched ?? {});
|
|
33
|
+
const latestValuesRef = (0, react_1.useRef)(values);
|
|
34
|
+
latestValuesRef.current = values;
|
|
35
|
+
async function runValidation(currentValues) {
|
|
36
|
+
if (!config.validationSchema)
|
|
37
|
+
return;
|
|
38
|
+
try {
|
|
39
|
+
await config.validationSchema.validate(currentValues, { abortEarly: false });
|
|
40
|
+
setErrors({});
|
|
41
|
+
}
|
|
42
|
+
catch (error) {
|
|
43
|
+
if (error instanceof yup_1.ValidationError) {
|
|
44
|
+
setErrors(buildErrorsFromValidationError(error));
|
|
45
|
+
}
|
|
46
|
+
}
|
|
47
|
+
}
|
|
48
|
+
const base = createMockFormikProps({
|
|
49
|
+
initialValues: config.initialValues,
|
|
50
|
+
onSubmit: config.onSubmit ?? (() => { }),
|
|
51
|
+
});
|
|
52
|
+
return {
|
|
53
|
+
...base,
|
|
54
|
+
values,
|
|
55
|
+
errors,
|
|
56
|
+
touched,
|
|
57
|
+
isValid: Object.keys(errors).length === 0,
|
|
58
|
+
setFieldValue: async (field, value, shouldValidate) => {
|
|
59
|
+
const nextValues = { ...latestValuesRef.current, [field]: value };
|
|
60
|
+
setValuesState(nextValues);
|
|
61
|
+
latestValuesRef.current = nextValues;
|
|
62
|
+
if (shouldValidate !== false) {
|
|
63
|
+
await runValidation(nextValues);
|
|
64
|
+
}
|
|
65
|
+
},
|
|
66
|
+
setFieldTouched: async (field, isTouched = true, shouldValidate) => {
|
|
67
|
+
setTouchedState((previousTouched) => ({
|
|
68
|
+
...previousTouched,
|
|
69
|
+
[field]: isTouched,
|
|
70
|
+
}));
|
|
71
|
+
if (shouldValidate !== false) {
|
|
72
|
+
await runValidation(latestValuesRef.current);
|
|
73
|
+
}
|
|
74
|
+
},
|
|
75
|
+
handleSubmit: (event) => {
|
|
76
|
+
event?.preventDefault?.();
|
|
77
|
+
config.onSubmit?.(latestValuesRef.current);
|
|
78
|
+
},
|
|
79
|
+
};
|
|
80
|
+
}
|
|
4
81
|
function createMockFormikProps(config) {
|
|
5
82
|
const { initialValues, onSubmit } = config;
|
|
6
83
|
return {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"form-story-stubs.js","sourceRoot":"","sources":["../../../../src/components/molecules/form/form-story-stubs.ts"],"names":[],"mappings":";;
|
|
1
|
+
{"version":3,"file":"form-story-stubs.js","sourceRoot":"","sources":["../../../../src/components/molecules/form/form-story-stubs.ts"],"names":[],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"form-text-field.d.ts","sourceRoot":"","sources":["../../../../../src/components/molecules/form/form-text-field/form-text-field.tsx"],"names":[],"mappings":"AACA,OAAO,EAAa,cAAc,EAAE,MAAM,wBAAwB,CAAC;AACnE,OAAO,EAAe,gBAAgB,EAAkB,MAAM,wBAAwB,CAAC;AAEvF,MAAM,MAAM,kBAAkB,GAAG,gBAAgB,GAC/C,cAAc,GAAG;IACf,oBAAoB,CAAC,EAAE,MAAM,CAAC;CAC/B,CAAC;AAEJ,wBAAgB,aAAa,CAAC,EAAE,oBAAoB,EAAE,GAAG,KAAK,EAAE,EAAE,kBAAkB,
|
|
1
|
+
{"version":3,"file":"form-text-field.d.ts","sourceRoot":"","sources":["../../../../../src/components/molecules/form/form-text-field/form-text-field.tsx"],"names":[],"mappings":"AACA,OAAO,EAAa,cAAc,EAAE,MAAM,wBAAwB,CAAC;AACnE,OAAO,EAAe,gBAAgB,EAAkB,MAAM,wBAAwB,CAAC;AAEvF,MAAM,MAAM,kBAAkB,GAAG,gBAAgB,GAC/C,cAAc,GAAG;IACf,oBAAoB,CAAC,EAAE,MAAM,CAAC;CAC/B,CAAC;AAEJ,wBAAgB,aAAa,CAAC,EAAE,oBAAoB,EAAE,GAAG,KAAK,EAAE,EAAE,kBAAkB,2CAmCnF"}
|
|
@@ -15,6 +15,6 @@ function FormTextField({ formControlClassName, ...props }) {
|
|
|
15
15
|
await formProps?.setFieldTouched(formName ?? '', true, true);
|
|
16
16
|
onBlur?.();
|
|
17
17
|
}
|
|
18
|
-
return ((0, jsx_runtime_1.jsx)(containers_1.FormControl, { ...props, errorText: props.errorText || props?.formProps?.errors[props.formName], inputWidth: props.width ?? props.inputWidth, className: formControlClassName, children: () => ((0, jsx_runtime_1.jsx)(components_1.TextField, { ...props, value: props.value ?? props.formProps?.values[props.formName], onBlur: handleOnBlur, onChange: handleChange })) }));
|
|
18
|
+
return ((0, jsx_runtime_1.jsx)(containers_1.FormControl, { ...props, errorText: props.errorText || props?.formProps?.errors[props.formName], inputWidth: props.width ?? props.inputWidth, className: formControlClassName, children: ({ isErrorVisible }) => ((0, jsx_runtime_1.jsx)(components_1.TextField, { ...props, isErrorVisible: isErrorVisible, value: props.value ?? props.formProps?.values[props.formName], onBlur: handleOnBlur, onChange: handleChange })) }));
|
|
19
19
|
}
|
|
20
20
|
//# sourceMappingURL=form-text-field.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"form-text-field.js","sourceRoot":"","sources":["../../../../../src/components/molecules/form/form-text-field/form-text-field.tsx"],"names":[],"mappings":";;AASA,
|
|
1
|
+
{"version":3,"file":"form-text-field.js","sourceRoot":"","sources":["../../../../../src/components/molecules/form/form-text-field/form-text-field.tsx"],"names":[],"mappings":";;AASA,sCAmCC;;AA3CD,uDAAmE;AACnE,uDAAuF;AAOvF,SAAgB,aAAa,CAAC,EAAE,oBAAoB,EAAE,GAAG,KAAK,EAAsB;IAClF,KAAK,UAAU,YAAY,CAAC,KAAoC;QAC9D,MAAM,EAAE,QAAQ,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,KAAK,CAAC;QAEhD,MAAM,SAAS,EAAE,aAAa,CAAC,QAAS,EAAE,KAAK,CAAC,MAAM,CAAC,KAAK,IAAI,EAAE,CAAC,CAAC;QACpE,QAAQ,EAAE,CAAC,KAAK,CAAC,CAAC;IACpB,CAAC;IAED,KAAK,UAAU,YAAY;QACzB,MAAM,EAAE,MAAM,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,KAAK,CAAC;QAE9C,MAAM,SAAS,EAAE,eAAe,CAAC,QAAQ,IAAI,EAAE,EAAE,IAAI,EAAE,IAAI,CAAC,CAAC;QAC7D,MAAM,EAAE,EAAE,CAAC;IACb,CAAC;IAED,OAAO,CACL,uBAAC,wBAAW,OACN,KAAK,EACT,SAAS,EACP,KAAK,CAAC,SAAS,IAAK,KAAK,EAAE,SAAS,EAAE,MAAM,CAAC,KAAK,CAAC,QAAS,CAAwB,EAEtF,UAAU,EAAG,KAAK,CAAC,KAAwB,IAAI,KAAK,CAAC,UAAU,EAC/D,SAAS,EAAE,oBAAoB,YAE9B,CAAC,EAAE,cAAc,EAAE,EAAE,EAAE,CAAC,CACvB,uBAAC,sBAAS,OACJ,KAAK,EACT,cAAc,EAAE,cAAc,EAC9B,KAAK,EAAE,KAAK,CAAC,KAAK,IAAI,KAAK,CAAC,SAAS,EAAE,MAAM,CAAC,KAAK,CAAC,QAAS,CAAC,EAC9D,MAAM,EAAE,YAAY,EACpB,QAAQ,EAAE,YAAY,GACtB,CACH,GACW,CACf,CAAC;AACJ,CAAC"}
|
|
@@ -1,10 +1,11 @@
|
|
|
1
|
+
import { FocusEvent } from 'react';
|
|
1
2
|
export type SelectInputProps = {
|
|
2
3
|
mask?: string;
|
|
3
4
|
isDisabled?: boolean;
|
|
4
5
|
className?: string;
|
|
5
6
|
inputValue: string;
|
|
6
|
-
onBlur?: () => void;
|
|
7
|
-
|
|
7
|
+
onBlur?: (event?: FocusEvent<HTMLInputElement>) => void;
|
|
8
|
+
onInputChange: (value: string) => void;
|
|
8
9
|
};
|
|
9
10
|
export declare const SelectInput: import("react").ForwardRefExoticComponent<SelectInputProps & import("react").RefAttributes<HTMLInputElement>>;
|
|
10
11
|
//# sourceMappingURL=select-input.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"select-input.d.ts","sourceRoot":"","sources":["../../../../../src/components/molecules/select/components/select-input.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"select-input.d.ts","sourceRoot":"","sources":["../../../../../src/components/molecules/select/components/select-input.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAA4B,MAAM,OAAO,CAAC;AAK7D,MAAM,MAAM,gBAAgB,GAAG;IAC7B,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,UAAU,EAAE,MAAM,CAAC;IACnB,MAAM,CAAC,EAAE,CAAC,KAAK,CAAC,EAAE,UAAU,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;IACxD,aAAa,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACxC,CAAC;AAEF,eAAO,MAAM,WAAW,+GAqBtB,CAAC"}
|
|
@@ -2,25 +2,11 @@
|
|
|
2
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
3
|
exports.SelectInput = void 0;
|
|
4
4
|
const jsx_runtime_1 = require("react/jsx-runtime");
|
|
5
|
-
const react_imask_1 = require("react-imask");
|
|
6
5
|
const react_1 = require("react");
|
|
7
6
|
const components_1 = require("../../../../components");
|
|
7
|
+
const components_2 = require("../../../../components");
|
|
8
8
|
const tailwind_utils_1 = require("../../../../utils/tailwind-utils");
|
|
9
|
-
function
|
|
10
|
-
return (0, tailwind_utils_1.tailwind)('w-full bg-transparent outline-none cursor-pointer', 'text-gray-01', 'disabled:text-gray-03 disabled:cursor-not-allowed',
|
|
11
|
-
}
|
|
12
|
-
const MaskedSelectInput = (0, react_1.forwardRef)(function MaskedSelectInput({ mask, className, inputValue = '', isDisabled = false, onBlur, handleInputChange }, ref) {
|
|
13
|
-
return ((0, jsx_runtime_1.jsx)(react_imask_1.IMaskInput, { inputRef: ref, mask: mask, disabled: isDisabled, value: inputValue, autoComplete: "off", className: getSelectInputClassName(className), onBlur: onBlur, onAccept: (value) => {
|
|
14
|
-
if (value === inputValue) {
|
|
15
|
-
return;
|
|
16
|
-
}
|
|
17
|
-
handleInputChange(value);
|
|
18
|
-
} }));
|
|
19
|
-
});
|
|
20
|
-
const PlainSelectInput = (0, react_1.forwardRef)(function PlainSelectInput({ className, inputValue = '', isDisabled = false, onBlur, handleInputChange, }, ref) {
|
|
21
|
-
return ((0, jsx_runtime_1.jsx)("input", { ref: ref, disabled: isDisabled, value: inputValue, autoComplete: "off", className: getSelectInputClassName(className), onBlur: onBlur, onChange: (e) => handleInputChange(e.target.value) }));
|
|
22
|
-
});
|
|
23
|
-
exports.SelectInput = (0, react_1.forwardRef)(function SelectInput(props, ref) {
|
|
24
|
-
return props.mask ? ((0, jsx_runtime_1.jsx)(MaskedSelectInput, { ...props, ref: ref })) : ((0, jsx_runtime_1.jsx)(PlainSelectInput, { ...props, ref: ref }));
|
|
9
|
+
exports.SelectInput = (0, react_1.forwardRef)(function SelectInput({ mask, className, inputValue = '', isDisabled = false, onBlur, onInputChange }, ref) {
|
|
10
|
+
return ((0, jsx_runtime_1.jsx)(components_1.BaseInput, { ref: ref, mask: mask, value: inputValue, disabled: isDisabled, onBlur: onBlur, className: (0, tailwind_utils_1.tailwind)('w-full bg-transparent outline-none cursor-pointer', 'text-gray-01', 'disabled:text-gray-03 disabled:cursor-not-allowed', components_2.TextStyle[components_2.TextVariant.BODY], className), onValueChange: onInputChange }));
|
|
25
11
|
});
|
|
26
12
|
//# sourceMappingURL=select-input.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"select-input.js","sourceRoot":"","sources":["../../../../../src/components/molecules/select/components/select-input.tsx"],"names":[],"mappings":";;;;AAAA,
|
|
1
|
+
{"version":3,"file":"select-input.js","sourceRoot":"","sources":["../../../../../src/components/molecules/select/components/select-input.tsx"],"names":[],"mappings":";;;;AAAA,iCAA6D;AAC7D,uDAAmD;AACnD,uDAAgE;AAChE,qEAA4D;AAW/C,QAAA,WAAW,GAAG,IAAA,kBAAU,EAAC,SAAS,WAAW,CACxD,EAAE,IAAI,EAAE,SAAS,EAAE,UAAU,GAAG,EAAE,EAAE,UAAU,GAAG,KAAK,EAAE,MAAM,EAAE,aAAa,EAAoB,EACjG,GAAmC;IAEnC,OAAO,CACL,uBAAC,sBAAS,IACR,GAAG,EAAE,GAAG,EACR,IAAI,EAAE,IAAI,EACV,KAAK,EAAE,UAAU,EACjB,QAAQ,EAAE,UAAU,EACpB,MAAM,EAAE,MAAM,EACd,SAAS,EAAE,IAAA,yBAAQ,EACjB,mDAAmD,EACnD,cAAc,EACd,mDAAmD,EACnD,sBAAS,CAAC,wBAAW,CAAC,IAAI,CAAC,EAC3B,SAAS,CACV,EACD,aAAa,EAAE,aAAa,GAC5B,CACH,CAAC;AACJ,CAAC,CAAC,CAAC"}
|
|
@@ -3,10 +3,8 @@ import { DropDownMenuOptionProps } from '../../../components';
|
|
|
3
3
|
export type SelectProps = {
|
|
4
4
|
mask?: string;
|
|
5
5
|
isFixed?: boolean;
|
|
6
|
-
isWritable?: boolean;
|
|
7
6
|
isDisabled?: boolean;
|
|
8
7
|
isMultiSelect?: boolean;
|
|
9
|
-
removeOnSelect?: boolean;
|
|
10
8
|
isErrorVisible?: boolean;
|
|
11
9
|
className?: string;
|
|
12
10
|
emptyLabel?: ReactElement | string;
|
|
@@ -19,5 +17,5 @@ export type SelectProps = {
|
|
|
19
17
|
onChangeText?: (value: string) => void;
|
|
20
18
|
onOptionChange?: (options: string[]) => void;
|
|
21
19
|
};
|
|
22
|
-
export declare function Select({ mask, isFixed,
|
|
20
|
+
export declare function Select({ mask, isFixed, isDisabled, isMultiSelect, isErrorVisible, className, emptyLabel, initialInputValue, initialValues, debounceDelay, options, onBlur, onChangeText, onOptionChange, onClick, }: SelectProps): import("react/jsx-runtime").JSX.Element;
|
|
23
21
|
//# 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,
|
|
1
|
+
{"version":3,"file":"select.d.ts","sourceRoot":"","sources":["../../../../src/components/molecules/select/select.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAc,YAAY,EAAE,MAAM,OAAO,CAAC;AACjD,OAAO,EAIL,uBAAuB,EAMxB,MAAM,qBAAqB,CAAC;AAK7B,MAAM,MAAM,WAAW,GAAG;IACxB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,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,IAAI,EACJ,OAAc,EACd,UAAkB,EAClB,aAAqB,EACrB,cAAc,EACd,SAAS,EACT,UAAU,EACV,iBAAiB,EACjB,aAAa,EACb,aAAa,EACb,OAAO,EACP,MAAM,EACN,YAAY,EACZ,cAAc,EACd,OAAO,GACR,EAAE,WAAW,2CAgHb"}
|
|
@@ -6,32 +6,28 @@ 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
|
|
10
|
-
const {
|
|
11
|
-
return ((0, jsx_runtime_1.jsxs)("div", { role: "button", "data-testid": "select-trigger", tabIndex: 0, onClick: (e) => {
|
|
12
|
-
const target = e.target;
|
|
13
|
-
const isClickInsideChip = target.closest('[data-chip]');
|
|
14
|
-
if (isClickInsideChip || isDisabled) {
|
|
15
|
-
return;
|
|
16
|
-
}
|
|
17
|
-
onClick();
|
|
18
|
-
}, 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
|
|
19
|
-
? 'outline-none'
|
|
20
|
-
: '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, { mask: mask, 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, { mask: mask, 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') })] }));
|
|
21
|
-
}
|
|
22
|
-
function Select({ mask, isFixed = true, isWritable = false, isDisabled = false, isMultiSelect = false, removeOnSelect = false, isErrorVisible, className, emptyLabel, initialInputValue, initialValues, debounceDelay, options, onBlur, onChangeText, onOptionChange, onClick = () => { }, }) {
|
|
23
|
-
const selectHook = (0, use_select_1.useSelect)({
|
|
9
|
+
function Select({ mask, isFixed = true, isDisabled = false, isMultiSelect = false, isErrorVisible, className, emptyLabel, initialInputValue, initialValues, debounceDelay, options, onBlur, onChangeText, onOptionChange, onClick, }) {
|
|
10
|
+
const { isOpen, inputValue, selectedValues, chipsData, filteredOptions, inputRef, handleSearchChange, setIsOpen, } = (0, use_select_1.useSelect)({
|
|
24
11
|
options,
|
|
25
|
-
isWritable,
|
|
26
|
-
initialValues,
|
|
27
12
|
isMultiSelect,
|
|
28
|
-
|
|
13
|
+
initialValues,
|
|
29
14
|
initialInputValue,
|
|
30
15
|
debounceDelay,
|
|
31
16
|
onChangeText,
|
|
32
17
|
onOptionChange,
|
|
33
18
|
});
|
|
34
|
-
|
|
35
|
-
|
|
19
|
+
function handleTriggerClick(event) {
|
|
20
|
+
if (isDisabled) {
|
|
21
|
+
return;
|
|
22
|
+
}
|
|
23
|
+
if (event.target.closest('[data-chip]')) {
|
|
24
|
+
return;
|
|
25
|
+
}
|
|
26
|
+
onClick?.();
|
|
27
|
+
}
|
|
28
|
+
const trigger = ((0, jsx_runtime_1.jsxs)("div", { role: "button", "data-testid": "select-trigger", tabIndex: isDisabled ? -1 : 0, onClick: handleTriggerClick, 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
|
+
? 'outline-none cursor-not-allowed bg-gray-05 border-gray-04 hover:border-gray-04'
|
|
30
|
+
: 'focus-visible:border-none focus-visible:outline-2 focus-visible:outline-blue-01', isErrorVisible && 'border-red-01', isMultiSelect && 'p-0 pr-4 pl-2 py-2', className), children: [isMultiSelect ? ((0, jsx_runtime_1.jsx)(components_1.ChipList, { data: chipsData, className: "mr-1 w-full max-h-[138px] overflow-y-auto md:overflow-y-auto", 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, { mask: mask, ref: inputRef, onBlur: onBlur, isDisabled: isDisabled, inputValue: inputValue, className: "h-fit md:h-10 w-full", onInputChange: handleSearchChange }) }) })) : ((0, jsx_runtime_1.jsx)(select_input_1.SelectInput, { mask: mask, ref: inputRef, onBlur: onBlur, isDisabled: isDisabled, className: "h-fit md:h-6 w-full", inputValue: inputValue, onInputChange: handleSearchChange })), (0, jsx_runtime_1.jsx)(components_1.BilloIcon, { icon: isOpen ? 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: "ml-2" })] }));
|
|
31
|
+
return ((0, jsx_runtime_1.jsx)(components_1.DropDownMenu, { isFixed: isFixed, isDisabled: isDisabled, onClose: setIsOpen, isOpen: isOpen, selectedIDs: selectedValues, options: filteredOptions, emptyElement: typeof emptyLabel === 'string' ? ((0, jsx_runtime_1.jsx)(components_1.Text, { variant: components_1.TextVariant.BODY, className: "flex whitespace-normal bg-white py-2 px-4", children: emptyLabel })) : (emptyLabel), dropDownClassName: "left-0", className: "w-full", children: trigger }));
|
|
36
32
|
}
|
|
37
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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"}
|
|
@@ -1,24 +1,22 @@
|
|
|
1
1
|
import { ChipOptionsProps, DropDownMenuOptionProps } from '../../../components';
|
|
2
|
-
export type UseSelectHook = {
|
|
3
|
-
openDropdownMenu: boolean;
|
|
4
|
-
inputValue: string;
|
|
5
|
-
selectedValues: string[];
|
|
6
|
-
chipsData: ChipOptionsProps[];
|
|
7
|
-
searchedOptions: DropDownMenuOptionProps[];
|
|
8
|
-
inputRef: React.RefObject<HTMLInputElement>;
|
|
9
|
-
handleInputChange: (value: string) => void;
|
|
10
|
-
setOpenDropdownMenu: (value: boolean) => void;
|
|
11
|
-
};
|
|
12
2
|
export type UseSelectProps = {
|
|
13
|
-
isMultiSelect: boolean;
|
|
14
|
-
isWritable: boolean;
|
|
15
|
-
removeOnSelect: boolean;
|
|
16
|
-
initialInputValue?: string;
|
|
17
3
|
options: DropDownMenuOptionProps[];
|
|
4
|
+
isMultiSelect: boolean;
|
|
18
5
|
initialValues?: string[] | string;
|
|
6
|
+
initialInputValue?: string;
|
|
19
7
|
debounceDelay?: number;
|
|
20
8
|
onChangeText?: (value: string) => void;
|
|
21
|
-
onOptionChange?: (
|
|
9
|
+
onOptionChange?: (values: string[]) => void;
|
|
10
|
+
};
|
|
11
|
+
export type UseSelectResult = {
|
|
12
|
+
isOpen: boolean;
|
|
13
|
+
inputValue: string;
|
|
14
|
+
selectedValues: string[];
|
|
15
|
+
chipsData: ChipOptionsProps[];
|
|
16
|
+
filteredOptions: DropDownMenuOptionProps[];
|
|
17
|
+
inputRef: React.RefObject<HTMLInputElement>;
|
|
18
|
+
handleSearchChange: (text: string) => void;
|
|
19
|
+
setIsOpen: (open: boolean) => void;
|
|
22
20
|
};
|
|
23
|
-
export declare function useSelect({
|
|
21
|
+
export declare function useSelect({ options, isMultiSelect, initialValues, initialInputValue, debounceDelay, onChangeText, onOptionChange, }: UseSelectProps): UseSelectResult;
|
|
24
22
|
//# 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;AAM1F,MAAM,MAAM,cAAc,GAAG;IAC3B,OAAO,EAAE,uBAAuB,EAAE,CAAC;IACnC,aAAa,EAAE,OAAO,CAAC;IACvB,aAAa,CAAC,EAAE,MAAM,EAAE,GAAG,MAAM,CAAC;IAClC,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACvC,cAAc,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;CAC7C,CAAC;AAEF,MAAM,MAAM,eAAe,GAAG;IAC5B,MAAM,EAAE,OAAO,CAAC;IAChB,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,kBAAkB,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IAC3C,SAAS,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;CACpC,CAAC;AAEF,wBAAgB,SAAS,CAAC,EACxB,OAAO,EACP,aAAa,EACb,aAAa,EACb,iBAAiB,EACjB,aAAiB,EACjB,YAAY,EACZ,cAAc,GACf,EAAE,cAAc,GAAG,eAAe,CA0KlC"}
|
|
@@ -3,170 +3,135 @@ Object.defineProperty(exports, "__esModule", { value: true });
|
|
|
3
3
|
exports.useSelect = useSelect;
|
|
4
4
|
const react_1 = require("react");
|
|
5
5
|
const components_1 = require("../../../components");
|
|
6
|
+
const use_debounce_1 = require("../../../utils/use-debounce");
|
|
7
|
+
const use_focus_on_open_1 = require("../../../utils/use-focus-on-open");
|
|
6
8
|
const string_utils_1 = require("../../../utils/string-utils/string-utils");
|
|
7
|
-
|
|
8
|
-
const use_select_search_1 = require("./use-select-search");
|
|
9
|
-
function useSelect({ isMultiSelect, isWritable, removeOnSelect, initialInputValue, options, initialValues, debounceDelay, onChangeText = () => { }, onOptionChange = () => { }, }) {
|
|
9
|
+
function useSelect({ options, isMultiSelect, initialValues, initialInputValue, debounceDelay = 0, onChangeText, onOptionChange, }) {
|
|
10
10
|
const { normalize } = (0, string_utils_1.useStringUtils)();
|
|
11
|
-
const
|
|
12
|
-
const [
|
|
13
|
-
const [
|
|
14
|
-
const [
|
|
15
|
-
const [
|
|
16
|
-
const
|
|
17
|
-
|
|
18
|
-
const
|
|
19
|
-
|
|
20
|
-
(0, react_1.useEffect)(() => {
|
|
21
|
-
const dropDownMenuOption = handleMapOptions();
|
|
22
|
-
const removedOptions = removeOnSelect
|
|
23
|
-
? dropDownMenuOption.filter((option) => !selectedValues.includes(option.value))
|
|
24
|
-
: dropDownMenuOption;
|
|
25
|
-
const normalizedValue = normalize(debouncedSearch).toLowerCase();
|
|
26
|
-
const filteredOptions = removedOptions.filter((currentOption) => {
|
|
27
|
-
const hasMatchingHelper = currentOption.helperLabel &&
|
|
28
|
-
normalize(currentOption.helperLabel).toLowerCase().includes(normalizedValue);
|
|
29
|
-
const hasMatchingValue = normalize(currentOption.label)
|
|
30
|
-
.toLowerCase()
|
|
31
|
-
.includes(normalizedValue);
|
|
32
|
-
return (hasMatchingValue || hasMatchingHelper || currentOption.variant !== components_1.MenuItemVariant.DEFAULT);
|
|
33
|
-
});
|
|
34
|
-
setSearchedOptions(filteredOptions);
|
|
35
|
-
}, [debouncedSearch, removeOnSelect, selectedValues, options]);
|
|
36
|
-
(0, react_1.useEffect)(() => {
|
|
37
|
-
if (openDropdownMenu || isWritable) {
|
|
11
|
+
const inputRef = (0, react_1.useRef)(null);
|
|
12
|
+
const [isOpen, setIsOpenState] = (0, react_1.useState)(false);
|
|
13
|
+
const [searchText, setSearchText] = (0, react_1.useState)('');
|
|
14
|
+
const [selected, setSelected] = (0, react_1.useState)([]);
|
|
15
|
+
const [prefilledText, setPrefilledText] = (0, react_1.useState)(initialInputValue ?? '');
|
|
16
|
+
const debouncedSearch = (0, use_debounce_1.useDebounce)(searchText, debounceDelay);
|
|
17
|
+
(0, use_focus_on_open_1.useFocusOnOpen)(inputRef, isOpen);
|
|
18
|
+
const handleOptionSelect = (0, react_1.useCallback)((option) => {
|
|
19
|
+
if (option.variant !== components_1.MenuItemVariant.DEFAULT)
|
|
38
20
|
return;
|
|
39
|
-
}
|
|
40
|
-
if (
|
|
41
|
-
|
|
21
|
+
const newOption = { value: option.value, label: option.label };
|
|
22
|
+
if (isMultiSelect) {
|
|
23
|
+
if (selected.some((s) => s.value === option.value))
|
|
24
|
+
return;
|
|
25
|
+
const newSelected = [...selected, newOption];
|
|
26
|
+
setSelected(newSelected);
|
|
27
|
+
setSearchText('');
|
|
28
|
+
onChangeText?.('');
|
|
29
|
+
onOptionChange?.(newSelected.map((s) => s.value));
|
|
42
30
|
}
|
|
43
31
|
else {
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
const filteredOptions = mappedOptions.filter((option) => {
|
|
51
|
-
return !selectedValues.includes(option.value) || option.value === optionValue;
|
|
52
|
-
});
|
|
53
|
-
setSearchedOptions(filteredOptions);
|
|
54
|
-
setSelectedValues((current) => current.filter((value) => value !== optionValue));
|
|
55
|
-
setChipsData((current) => current.filter((chip) => chip.value !== optionValue));
|
|
56
|
-
}
|
|
57
|
-
function handleMapChipsData(option) {
|
|
58
|
-
if (!isMultiSelect) {
|
|
59
|
-
return;
|
|
60
|
-
}
|
|
61
|
-
const newChip = {
|
|
62
|
-
label: option.label,
|
|
63
|
-
value: option.value,
|
|
64
|
-
onClear: () => handleUnSelect(option.value),
|
|
65
|
-
};
|
|
66
|
-
setChipsData((current) => [...current, { ...newChip }]);
|
|
67
|
-
}
|
|
68
|
-
async function handleGetSelectedValues(newSelected) {
|
|
69
|
-
if (!isMultiSelect) {
|
|
70
|
-
const label = newSelected?.label ?? '';
|
|
71
|
-
onChangeText(label);
|
|
72
|
-
setInputValue(label);
|
|
73
|
-
resetSearch();
|
|
74
|
-
setLastCommittedLabel(label);
|
|
75
|
-
return [newSelected.value];
|
|
76
|
-
}
|
|
77
|
-
setInputValue('');
|
|
78
|
-
onChangeText('');
|
|
79
|
-
resetSearch();
|
|
80
|
-
handleMapChipsData(newSelected);
|
|
81
|
-
return [...(selectedValues || []), newSelected.value];
|
|
82
|
-
}
|
|
83
|
-
async function handleSelectOption(selectedValues) {
|
|
84
|
-
if (selectedValues.variant !== components_1.MenuItemVariant.DEFAULT) {
|
|
85
|
-
return;
|
|
32
|
+
setSelected([newOption]);
|
|
33
|
+
setSearchText('');
|
|
34
|
+
setIsOpenState(false);
|
|
35
|
+
setPrefilledText('');
|
|
36
|
+
onChangeText?.(option.label);
|
|
37
|
+
onOptionChange?.([option.value]);
|
|
86
38
|
}
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
39
|
+
}, [isMultiSelect, selected, onChangeText, onOptionChange]);
|
|
40
|
+
const handleDeselect = (0, react_1.useCallback)((value) => {
|
|
41
|
+
const newSelected = selected.filter((s) => s.value !== value);
|
|
42
|
+
setSelected(newSelected);
|
|
43
|
+
onOptionChange?.(newSelected.map((s) => s.value));
|
|
44
|
+
}, [selected, onOptionChange]);
|
|
45
|
+
const handleSearchChange = (0, react_1.useCallback)((text) => {
|
|
46
|
+
setSearchText(text);
|
|
47
|
+
onChangeText?.(text);
|
|
48
|
+
}, [onChangeText]);
|
|
49
|
+
const setIsOpen = (0, react_1.useCallback)((open) => {
|
|
50
|
+
if (!open) {
|
|
51
|
+
setSearchText('');
|
|
94
52
|
}
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
53
|
+
setIsOpenState(open);
|
|
54
|
+
}, []);
|
|
55
|
+
const chipsData = (0, react_1.useMemo)(() => selected.map((opt) => ({
|
|
56
|
+
label: opt.label,
|
|
57
|
+
value: opt.value,
|
|
58
|
+
onClear: () => handleDeselect(opt.value),
|
|
59
|
+
})), [selected, handleDeselect]);
|
|
60
|
+
const filteredOptions = (0, react_1.useMemo)(() => {
|
|
61
|
+
const selectedSet = new Set(selected.map((select) => select.value));
|
|
62
|
+
const searchQuery = normalize(debouncedSearch).toLowerCase();
|
|
63
|
+
return options
|
|
64
|
+
.filter((option) => !isMultiSelect || !selectedSet.has(option.value))
|
|
65
|
+
.filter((option) => {
|
|
66
|
+
if (!searchQuery) {
|
|
67
|
+
return true;
|
|
68
|
+
}
|
|
69
|
+
if (option.variant && option.variant !== components_1.MenuItemVariant.DEFAULT) {
|
|
70
|
+
return true;
|
|
71
|
+
}
|
|
72
|
+
const labelMatch = normalize(option.label).toLowerCase().includes(searchQuery);
|
|
73
|
+
const helperMatch = option.helperLabel
|
|
74
|
+
? normalize(option.helperLabel).toLowerCase().includes(searchQuery)
|
|
75
|
+
: false;
|
|
76
|
+
return labelMatch || helperMatch;
|
|
77
|
+
})
|
|
78
|
+
.map((option) => {
|
|
79
|
+
const withDefaults = { ...option, variant: option.variant ?? components_1.MenuItemVariant.DEFAULT };
|
|
100
80
|
return {
|
|
101
|
-
...
|
|
81
|
+
...withDefaults,
|
|
102
82
|
onClick: () => {
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
}
|
|
106
|
-
handleSelectOption(newOption);
|
|
83
|
+
option.onClick?.();
|
|
84
|
+
handleOptionSelect(withDefaults);
|
|
107
85
|
},
|
|
108
86
|
};
|
|
109
87
|
});
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
88
|
+
}, [options, selected, isMultiSelect, debouncedSearch, handleOptionSelect]);
|
|
89
|
+
const inputValue = (0, react_1.useMemo)(() => {
|
|
90
|
+
if (isOpen) {
|
|
91
|
+
return searchText;
|
|
92
|
+
}
|
|
93
|
+
if (isMultiSelect) {
|
|
94
|
+
return '';
|
|
95
|
+
}
|
|
96
|
+
return selected[0]?.label ?? prefilledText;
|
|
97
|
+
}, [isOpen, searchText, isMultiSelect, selected, prefilledText]);
|
|
98
|
+
const selectedValues = (0, react_1.useMemo)(() => selected.map((s) => s.value), [selected]);
|
|
99
|
+
(0, react_1.useEffect)(() => {
|
|
100
|
+
if (initialValues === undefined || initialValues === null) {
|
|
101
|
+
return;
|
|
102
|
+
}
|
|
118
103
|
const values = Array.isArray(initialValues) ? initialValues : [initialValues];
|
|
119
|
-
const
|
|
120
|
-
.filter((option) => values.includes(option.value))
|
|
121
|
-
.map((option) => ({
|
|
122
|
-
label: option.label,
|
|
123
|
-
value: option.value,
|
|
124
|
-
onClear: () => handleUnSelect(option.value),
|
|
125
|
-
}));
|
|
126
|
-
const initialSelectValues = options
|
|
127
|
-
.filter((option) => values.includes(option.value))
|
|
128
|
-
.map((option) => option.value);
|
|
129
|
-
const [initial] = options
|
|
104
|
+
const matched = options
|
|
130
105
|
.filter((option) => values.includes(option.value))
|
|
131
|
-
.map((option) => option.label);
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
setInputValue(!isMultiSelect ? initial : '');
|
|
135
|
-
setLastCommittedLabel(!isMultiSelect ? (initial ?? '') : '');
|
|
136
|
-
}
|
|
137
|
-
(0, react_1.useEffect)(() => {
|
|
138
|
-
initializeValues();
|
|
139
|
-
}, [memoOptions, initialValues]);
|
|
140
|
-
(0, react_1.useEffect)(() => {
|
|
141
|
-
const dropDownMenuOption = handleMapOptions();
|
|
142
|
-
const removedOptions = removeOnSelect
|
|
143
|
-
? dropDownMenuOption.filter((option) => !selectedValues.includes(option.value))
|
|
144
|
-
: dropDownMenuOption;
|
|
145
|
-
setSearchedOptions(removedOptions);
|
|
146
|
-
}, [memoOptions, selectedValues]);
|
|
106
|
+
.map((option) => ({ value: option.value, label: option.label }));
|
|
107
|
+
setSelected(matched);
|
|
108
|
+
}, [options, initialValues]);
|
|
147
109
|
(0, react_1.useEffect)(() => {
|
|
148
110
|
if (initialInputValue === undefined) {
|
|
149
111
|
return;
|
|
150
112
|
}
|
|
151
|
-
|
|
152
|
-
if (!selectedOption) {
|
|
153
|
-
setInputValue(initialInputValue ?? '');
|
|
113
|
+
if (initialValues !== undefined && initialValues !== null) {
|
|
154
114
|
return;
|
|
155
115
|
}
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
116
|
+
const matched = options.find((option) => option.label === initialInputValue || option.value === initialInputValue);
|
|
117
|
+
if (matched) {
|
|
118
|
+
setSelected([{ value: matched.value, label: matched.label }]);
|
|
119
|
+
setPrefilledText('');
|
|
120
|
+
}
|
|
121
|
+
else {
|
|
122
|
+
setPrefilledText(initialInputValue);
|
|
123
|
+
setSelected([]);
|
|
124
|
+
}
|
|
125
|
+
}, [initialInputValue, options, initialValues]);
|
|
161
126
|
return {
|
|
162
|
-
|
|
127
|
+
isOpen,
|
|
163
128
|
inputValue,
|
|
164
129
|
selectedValues,
|
|
165
130
|
chipsData,
|
|
166
|
-
|
|
131
|
+
filteredOptions,
|
|
167
132
|
inputRef,
|
|
168
|
-
|
|
169
|
-
|
|
133
|
+
handleSearchChange,
|
|
134
|
+
setIsOpen,
|
|
170
135
|
};
|
|
171
136
|
}
|
|
172
137
|
//# sourceMappingURL=use-select.js.map
|
|
@@ -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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"}
|
|
@@ -5,7 +5,7 @@ export type TextFieldInputProps = Omit<ComponentProps<'input'>, 'disabled' | 're
|
|
|
5
5
|
isDisabled?: boolean;
|
|
6
6
|
onBlur?: (event?: FocusEvent<HTMLInputElement>) => void;
|
|
7
7
|
};
|
|
8
|
-
export declare const TextFieldInput: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "ref" | "
|
|
8
|
+
export declare const TextFieldInput: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "ref" | "disabled" | "required" | "onBlur"> & {
|
|
9
9
|
mask?: string;
|
|
10
10
|
isRequired?: boolean;
|
|
11
11
|
isDisabled?: boolean;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"text-field-input.d.ts","sourceRoot":"","sources":["../../../../../src/components/molecules/text-field/components/text-field-input.tsx"],"names":[],"mappings":"AAAA,OAAO,
|
|
1
|
+
{"version":3,"file":"text-field-input.d.ts","sourceRoot":"","sources":["../../../../../src/components/molecules/text-field/components/text-field-input.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,UAAU,EAA4B,MAAM,OAAO,CAAC;AAK7E,MAAM,MAAM,mBAAmB,GAAG,IAAI,CACpC,cAAc,CAAC,OAAO,CAAC,EACvB,UAAU,GAAG,UAAU,GAAG,KAAK,GAAG,QAAQ,CAC3C,GAAG;IACF,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,MAAM,CAAC,EAAE,CAAC,KAAK,CAAC,EAAE,UAAU,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;CACzD,CAAC;AAEF,eAAO,MAAM,cAAc;WANlB,MAAM;iBACA,OAAO;iBACP,OAAO;aACX,CAAC,KAAK,CAAC,EAAE,UAAU,CAAC,gBAAgB,CAAC,KAAK,IAAI;oDAuBvD,CAAC"}
|
|
@@ -3,23 +3,10 @@ Object.defineProperty(exports, "__esModule", { value: true });
|
|
|
3
3
|
exports.TextFieldInput = void 0;
|
|
4
4
|
const jsx_runtime_1 = require("react/jsx-runtime");
|
|
5
5
|
const react_1 = require("react");
|
|
6
|
-
const react_imask_1 = require("react-imask");
|
|
7
|
-
const tailwind_utils_1 = require("../../../../utils/tailwind-utils");
|
|
8
6
|
const components_1 = require("../../../../components");
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
}
|
|
12
|
-
|
|
13
|
-
return ((0, jsx_runtime_1.jsx)(react_imask_1.IMaskInput, { inputRef: ref, mask: mask, required: isRequired, disabled: isDisabled, name: name, value: String(value), autoComplete: "off", className: getTextFieldInputClassName(className), onAccept: (maskedValue) => {
|
|
14
|
-
onChange?.({ target: { name, value: maskedValue } });
|
|
15
|
-
}, ...rest }));
|
|
16
|
-
});
|
|
17
|
-
const PlainTextFieldInput = (0, react_1.forwardRef)(function PlainTextFieldInput({ isRequired, isDisabled, className, name, value = '', onChange, ...rest }, ref) {
|
|
18
|
-
return ((0, jsx_runtime_1.jsx)("input", { ref: ref, required: isRequired, disabled: isDisabled, name: name, value: value, className: getTextFieldInputClassName(className), onChange: (event) => {
|
|
19
|
-
onChange?.({ target: { name, value: event.target.value } });
|
|
20
|
-
}, ...rest }));
|
|
21
|
-
});
|
|
22
|
-
exports.TextFieldInput = (0, react_1.forwardRef)(function TextFieldInput(props, ref) {
|
|
23
|
-
return props.mask ? ((0, jsx_runtime_1.jsx)(MaskedTextFieldInput, { ...props, ref: ref })) : ((0, jsx_runtime_1.jsx)(PlainTextFieldInput, { ...props, ref: ref }));
|
|
7
|
+
const tailwind_utils_1 = require("../../../../utils/tailwind-utils");
|
|
8
|
+
const components_2 = require("../../../../components");
|
|
9
|
+
exports.TextFieldInput = (0, react_1.forwardRef)(function TextFieldInput({ mask, isRequired, isDisabled, className, onBlur, ...rest }, ref) {
|
|
10
|
+
return ((0, jsx_runtime_1.jsx)(components_1.BaseInput, { ref: ref, mask: mask, required: isRequired, disabled: isDisabled, className: (0, tailwind_utils_1.tailwind)('flex-grow py-4 px-4 bg-transparent text-gray-01', 'focus:outline-none', components_2.TextStyle[components_2.TextVariant.BODY], className), onBlur: onBlur, ...rest }));
|
|
24
11
|
});
|
|
25
12
|
//# sourceMappingURL=text-field-input.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"text-field-input.js","sourceRoot":"","sources":["../../../../../src/components/molecules/text-field/components/text-field-input.tsx"],"names":[],"mappings":";;;;AAAA,
|
|
1
|
+
{"version":3,"file":"text-field-input.js","sourceRoot":"","sources":["../../../../../src/components/molecules/text-field/components/text-field-input.tsx"],"names":[],"mappings":";;;;AAAA,iCAA6E;AAC7E,uDAAmD;AACnD,qEAA4D;AAC5D,uDAAgE;AAYnD,QAAA,cAAc,GAAG,IAAA,kBAAU,EAAC,SAAS,cAAc,CAC9D,EAAE,IAAI,EAAE,UAAU,EAAE,UAAU,EAAE,SAAS,EAAE,MAAM,EAAE,GAAG,IAAI,EAAuB,EACjF,GAAmC;IAEnC,OAAO,CACL,uBAAC,sBAAS,IACR,GAAG,EAAE,GAAG,EACR,IAAI,EAAE,IAAI,EACV,QAAQ,EAAE,UAAU,EACpB,QAAQ,EAAE,UAAU,EACpB,SAAS,EAAE,IAAA,yBAAQ,EACjB,iDAAiD,EACjD,oBAAoB,EACpB,sBAAS,CAAC,wBAAW,CAAC,IAAI,CAAC,EAC3B,SAAS,CACV,EACD,MAAM,EAAE,MAA2C,KAC/C,IAAI,GACR,CACH,CAAC;AACJ,CAAC,CAAC,CAAC"}
|
|
@@ -2,6 +2,7 @@ import { ComponentProps, FocusEvent, ReactNode } from 'react';
|
|
|
2
2
|
type Props = Omit<ComponentProps<'input'>, 'disabled' | 'required' | 'ref' | 'className' | 'onBlur'> & {
|
|
3
3
|
isRequired?: boolean;
|
|
4
4
|
isDisabled?: boolean;
|
|
5
|
+
isErrorVisible?: boolean;
|
|
5
6
|
mask?: string;
|
|
6
7
|
leadingElement?: ReactNode;
|
|
7
8
|
trailingElement?: ReactNode;
|
|
@@ -9,9 +10,10 @@ type Props = Omit<ComponentProps<'input'>, 'disabled' | 'required' | 'ref' | 'cl
|
|
|
9
10
|
inputClassName?: string;
|
|
10
11
|
onBlur?: (event?: FocusEvent<HTMLInputElement>) => void;
|
|
11
12
|
};
|
|
12
|
-
export declare const TextField: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "
|
|
13
|
+
export declare const TextField: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "ref" | "disabled" | "required" | "className" | "onBlur"> & {
|
|
13
14
|
isRequired?: boolean;
|
|
14
15
|
isDisabled?: boolean;
|
|
16
|
+
isErrorVisible?: boolean;
|
|
15
17
|
mask?: string;
|
|
16
18
|
leadingElement?: ReactNode;
|
|
17
19
|
trailingElement?: ReactNode;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"text-field.d.ts","sourceRoot":"","sources":["../../../../src/components/molecules/text-field/text-field.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,UAAU,EAA4B,SAAS,EAAE,MAAM,OAAO,CAAC;AAIxF,KAAK,KAAK,GAAG,IAAI,CACf,cAAc,CAAC,OAAO,CAAC,EACvB,UAAU,GAAG,UAAU,GAAG,KAAK,GAAG,WAAW,GAAG,QAAQ,CACzD,GAAG;IACF,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,cAAc,CAAC,EAAE,SAAS,CAAC;IAC3B,eAAe,CAAC,EAAE,SAAS,CAAC;IAC5B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,cAAc,CAAC,EAAE,MAAM,CAAC;IAGxB,MAAM,CAAC,EAAE,CAAC,KAAK,CAAC,EAAE,UAAU,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;CACzD,CAAC;AAEF,eAAO,MAAM,SAAS;
|
|
1
|
+
{"version":3,"file":"text-field.d.ts","sourceRoot":"","sources":["../../../../src/components/molecules/text-field/text-field.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,UAAU,EAA4B,SAAS,EAAE,MAAM,OAAO,CAAC;AAIxF,KAAK,KAAK,GAAG,IAAI,CACf,cAAc,CAAC,OAAO,CAAC,EACvB,UAAU,GAAG,UAAU,GAAG,KAAK,GAAG,WAAW,GAAG,QAAQ,CACzD,GAAG;IACF,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,cAAc,CAAC,EAAE,SAAS,CAAC;IAC3B,eAAe,CAAC,EAAE,SAAS,CAAC;IAC5B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,cAAc,CAAC,EAAE,MAAM,CAAC;IAGxB,MAAM,CAAC,EAAE,CAAC,KAAK,CAAC,EAAE,UAAU,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;CACzD,CAAC;AAEF,eAAO,MAAM,SAAS;iBAbP,OAAO;iBACP,OAAO;qBACH,OAAO;WACjB,MAAM;qBACI,SAAS;sBACR,SAAS;gBACf,MAAM;qBACD,MAAM;aAGd,CAAC,KAAK,CAAC,EAAE,UAAU,CAAC,gBAAgB,CAAC,KAAK,IAAI;oDA0CvD,CAAC;AAEH,YAAY,EAAE,KAAK,IAAI,cAAc,EAAE,CAAC"}
|
|
@@ -5,7 +5,7 @@ const jsx_runtime_1 = require("react/jsx-runtime");
|
|
|
5
5
|
const react_1 = require("react");
|
|
6
6
|
const tailwind_utils_1 = require("../../../utils/tailwind-utils");
|
|
7
7
|
const text_field_input_1 = require("./components/text-field-input");
|
|
8
|
-
exports.TextField = (0, react_1.forwardRef)(function TextField({ isRequired, isDisabled, mask, leadingElement, trailingElement, className, inputClassName, ...rest }, ref) {
|
|
9
|
-
return ((0, jsx_runtime_1.jsxs)("div", { className: (0, tailwind_utils_1.tailwind)('flex items-center w-full', 'border border-gray-04 rounded-lg bg-white', 'hover:border-blue-02 focus-within:border-blue-01 focus-within:hover:border-blue-01', 'focus-within:ring-1 focus-within:ring-blue-01', className), children: [leadingElement && (0, jsx_runtime_1.jsx)("div", { className: "flex-shrink-0 pl-4 text-gray-01", children: leadingElement }), (0, jsx_runtime_1.jsx)(text_field_input_1.TextFieldInput, { ref: ref, mask: mask, isRequired: isRequired, isDisabled: isDisabled, className: (0, tailwind_utils_1.tailwind)(leadingElement ? 'px-2' : 'px-4', inputClassName), ...rest }), trailingElement && (0, jsx_runtime_1.jsx)("div", { className: "flex-shrink-0 pr-4 text-gray-01", children: trailingElement })] }));
|
|
8
|
+
exports.TextField = (0, react_1.forwardRef)(function TextField({ isRequired, isDisabled, isErrorVisible, mask, leadingElement, trailingElement, className, inputClassName, ...rest }, ref) {
|
|
9
|
+
return ((0, jsx_runtime_1.jsxs)("div", { className: (0, tailwind_utils_1.tailwind)('flex items-center w-full', 'border border-gray-04 rounded-lg bg-white', 'hover:border-blue-02 focus-within:border-blue-01 focus-within:hover:border-blue-01', 'focus-within:ring-1 focus-within:ring-blue-01', isErrorVisible && 'border-red-01 focus-within:ring-red-01', className), children: [leadingElement && (0, jsx_runtime_1.jsx)("div", { className: "flex-shrink-0 pl-4 text-gray-01", children: leadingElement }), (0, jsx_runtime_1.jsx)(text_field_input_1.TextFieldInput, { ref: ref, mask: mask, isRequired: isRequired, isDisabled: isDisabled, className: (0, tailwind_utils_1.tailwind)(leadingElement ? 'px-2' : 'px-4', inputClassName), ...rest }), trailingElement && (0, jsx_runtime_1.jsx)("div", { className: "flex-shrink-0 pr-4 text-gray-01", children: trailingElement })] }));
|
|
10
10
|
});
|
|
11
11
|
//# sourceMappingURL=text-field.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"text-field.js","sourceRoot":"","sources":["../../../../src/components/molecules/text-field/text-field.tsx"],"names":[],"mappings":";;;;AAAA,iCAAwF;AACxF,kEAAyD;AACzD,oEAA+D;
|
|
1
|
+
{"version":3,"file":"text-field.js","sourceRoot":"","sources":["../../../../src/components/molecules/text-field/text-field.tsx"],"names":[],"mappings":";;;;AAAA,iCAAwF;AACxF,kEAAyD;AACzD,oEAA+D;AAmBlD,QAAA,SAAS,GAAG,IAAA,kBAAU,EAAC,SAAS,SAAS,CACpD,EACE,UAAU,EACV,UAAU,EACV,cAAc,EACd,IAAI,EACJ,cAAc,EACd,eAAe,EACf,SAAS,EACT,cAAc,EACd,GAAG,IAAI,EACD,EACR,GAAmC;IAEnC,OAAO,CACL,iCACE,SAAS,EAAE,IAAA,yBAAQ,EACjB,0BAA0B,EAC1B,2CAA2C,EAC3C,oFAAoF,EACpF,+CAA+C,EAC/C,cAAc,IAAI,wCAAwC,EAC1D,SAAS,CACV,aAEA,cAAc,IAAI,gCAAK,SAAS,EAAC,iCAAiC,YAAE,cAAc,GAAO,EAE1F,uBAAC,iCAAc,IACb,GAAG,EAAE,GAAG,EACR,IAAI,EAAE,IAAI,EACV,UAAU,EAAE,UAAU,EACtB,UAAU,EAAE,UAAU,EACtB,SAAS,EAAE,IAAA,yBAAQ,EAAC,cAAc,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM,EAAE,cAAc,CAAC,KACjE,IAAI,GACR,EAED,eAAe,IAAI,gCAAK,SAAS,EAAC,iCAAiC,YAAE,eAAe,GAAO,IACxF,CACP,CAAC;AACJ,CAAC,CAAC,CAAC"}
|
package/package.json
CHANGED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"use-select-input-focus.d.ts","sourceRoot":"","sources":["../../../../src/components/molecules/select/use-select-input-focus.ts"],"names":[],"mappings":"AAGA,MAAM,MAAM,uBAAuB,GAAG;IACpC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC,gBAAgB,CAAC,CAAC;CAC7C,CAAC;AAEF,wBAAgB,mBAAmB,CAAC,gBAAgB,EAAE,OAAO,GAAG,uBAAuB,CAMtF"}
|
|
@@ -1,11 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
-
exports.useSelectInputFocus = useSelectInputFocus;
|
|
4
|
-
const react_1 = require("react");
|
|
5
|
-
const use_focus_on_open_1 = require("../../../utils/use-focus-on-open");
|
|
6
|
-
function useSelectInputFocus(openDropdownMenu) {
|
|
7
|
-
const inputRef = (0, react_1.useRef)(null);
|
|
8
|
-
(0, use_focus_on_open_1.useFocusOnOpen)(inputRef, openDropdownMenu);
|
|
9
|
-
return { inputRef };
|
|
10
|
-
}
|
|
11
|
-
//# sourceMappingURL=use-select-input-focus.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"use-select-input-focus.js","sourceRoot":"","sources":["../../../../src/components/molecules/select/use-select-input-focus.ts"],"names":[],"mappings":";;AAOA,kDAMC;AAbD,iCAA+B;AAC/B,iEAA2D;AAM3D,SAAgB,mBAAmB,CAAC,gBAAyB;IAC3D,MAAM,QAAQ,GAAG,IAAA,cAAM,EAAmB,IAAI,CAAC,CAAC;IAEhD,IAAA,kCAAc,EAAC,QAAQ,EAAE,gBAAgB,CAAC,CAAC;IAE3C,OAAO,EAAE,QAAQ,EAAE,CAAC;AACtB,CAAC"}
|
|
@@ -1,8 +0,0 @@
|
|
|
1
|
-
export type UseSelectSearchHook = {
|
|
2
|
-
searchValue: string;
|
|
3
|
-
debouncedSearch: string;
|
|
4
|
-
setSearchValue: (value: string) => void;
|
|
5
|
-
resetSearch: () => void;
|
|
6
|
-
};
|
|
7
|
-
export declare function useSelectSearch(debounceDelay?: number): UseSelectSearchHook;
|
|
8
|
-
//# sourceMappingURL=use-select-search.d.ts.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"use-select-search.d.ts","sourceRoot":"","sources":["../../../../src/components/molecules/select/use-select-search.ts"],"names":[],"mappings":"AAGA,MAAM,MAAM,mBAAmB,GAAG;IAChC,WAAW,EAAE,MAAM,CAAC;IACpB,eAAe,EAAE,MAAM,CAAC;IACxB,cAAc,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC,WAAW,EAAE,MAAM,IAAI,CAAC;CACzB,CAAC;AAEF,wBAAgB,eAAe,CAAC,aAAa,CAAC,EAAE,MAAM,GAAG,mBAAmB,CAS3E"}
|
|
@@ -1,14 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
-
exports.useSelectSearch = useSelectSearch;
|
|
4
|
-
const react_1 = require("react");
|
|
5
|
-
const use_debounce_1 = require("../../../utils/use-debounce");
|
|
6
|
-
function useSelectSearch(debounceDelay) {
|
|
7
|
-
const [searchValue, setSearchValue] = (0, react_1.useState)('');
|
|
8
|
-
const debouncedSearch = (0, use_debounce_1.useDebounce)(searchValue, debounceDelay ?? 0);
|
|
9
|
-
function resetSearch() {
|
|
10
|
-
setSearchValue('');
|
|
11
|
-
}
|
|
12
|
-
return { searchValue, debouncedSearch, setSearchValue, resetSearch };
|
|
13
|
-
}
|
|
14
|
-
//# sourceMappingURL=use-select-search.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"use-select-search.js","sourceRoot":"","sources":["../../../../src/components/molecules/select/use-select-search.ts"],"names":[],"mappings":";;AAUA,0CASC;AAnBD,iCAAiC;AACjC,uDAAmD;AASnD,SAAgB,eAAe,CAAC,aAAsB;IACpD,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,IAAA,gBAAQ,EAAS,EAAE,CAAC,CAAC;IAC3D,MAAM,eAAe,GAAG,IAAA,0BAAW,EAAC,WAAW,EAAE,aAAa,IAAI,CAAC,CAAC,CAAC;IAErE,SAAS,WAAW;QAClB,cAAc,CAAC,EAAE,CAAC,CAAC;IACrB,CAAC;IAED,OAAO,EAAE,WAAW,EAAE,eAAe,EAAE,cAAc,EAAE,WAAW,EAAE,CAAC;AACvE,CAAC"}
|