fis-component 0.0.51 → 0.0.53
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/cjs/index.js +313 -214
- package/dist/cjs/index.js.map +1 -1
- package/dist/cjs/types/src/assets/icons/LineArrowsDown.d.ts +2 -0
- package/dist/cjs/types/src/assets/icons/LineArrowsUp.d.ts +3 -0
- package/dist/cjs/types/src/assets/icons/PositiveIcon.d.ts +3 -0
- package/dist/cjs/types/src/assets/icons/SortTableIcon.d.ts +3 -0
- package/dist/cjs/types/src/assets/icons/index.d.ts +4 -0
- package/dist/cjs/types/src/components/Input/InputField/index.d.ts +2 -0
- package/dist/cjs/types/src/components/Input/InputField/styles.d.ts +3 -1
- package/dist/cjs/types/src/components/MenuSelect/types.d.ts +2 -0
- package/dist/cjs/types/src/components/Pagination/styles.d.ts +18 -6
- package/dist/cjs/types/src/components/Select/Select.stories.d.ts +10 -4
- package/dist/cjs/types/src/components/Select/types.d.ts +20 -17
- package/dist/cjs/types/src/components/Table/Sorter/FISSorter.d.ts +1 -2
- package/dist/esm/index.js +313 -214
- package/dist/esm/index.js.map +1 -1
- package/dist/esm/types/src/assets/icons/LineArrowsDown.d.ts +2 -0
- package/dist/esm/types/src/assets/icons/LineArrowsUp.d.ts +3 -0
- package/dist/esm/types/src/assets/icons/PositiveIcon.d.ts +3 -0
- package/dist/esm/types/src/assets/icons/SortTableIcon.d.ts +3 -0
- package/dist/esm/types/src/assets/icons/index.d.ts +4 -0
- package/dist/esm/types/src/components/Input/InputField/index.d.ts +2 -0
- package/dist/esm/types/src/components/Input/InputField/styles.d.ts +3 -1
- package/dist/esm/types/src/components/MenuSelect/types.d.ts +2 -0
- package/dist/esm/types/src/components/Pagination/styles.d.ts +18 -6
- package/dist/esm/types/src/components/Select/Select.stories.d.ts +10 -4
- package/dist/esm/types/src/components/Select/types.d.ts +20 -17
- package/dist/esm/types/src/components/Table/Sorter/FISSorter.d.ts +1 -2
- package/dist/index.d.ts +27 -22
- package/package.json +1 -1
package/dist/esm/index.js
CHANGED
|
@@ -12140,9 +12140,9 @@ var CheckCircleFilled = function CheckCircleFilled(props, ref) {
|
|
|
12140
12140
|
};
|
|
12141
12141
|
|
|
12142
12142
|
/** */
|
|
12143
|
-
var RefIcon$
|
|
12143
|
+
var RefIcon$r = /*#__PURE__*/React.forwardRef(CheckCircleFilled);
|
|
12144
12144
|
if (process.env.NODE_ENV !== 'production') {
|
|
12145
|
-
RefIcon$
|
|
12145
|
+
RefIcon$r.displayName = 'CheckCircleFilled';
|
|
12146
12146
|
}
|
|
12147
12147
|
|
|
12148
12148
|
// This icon file is generated automatically.
|
|
@@ -12156,9 +12156,9 @@ var CloseCircleFilled = function CloseCircleFilled(props, ref) {
|
|
|
12156
12156
|
};
|
|
12157
12157
|
|
|
12158
12158
|
/** */
|
|
12159
|
-
var RefIcon$
|
|
12159
|
+
var RefIcon$q = /*#__PURE__*/React.forwardRef(CloseCircleFilled);
|
|
12160
12160
|
if (process.env.NODE_ENV !== 'production') {
|
|
12161
|
-
RefIcon$
|
|
12161
|
+
RefIcon$q.displayName = 'CloseCircleFilled';
|
|
12162
12162
|
}
|
|
12163
12163
|
|
|
12164
12164
|
// This icon file is generated automatically.
|
|
@@ -12172,9 +12172,9 @@ var CloseOutlined = function CloseOutlined(props, ref) {
|
|
|
12172
12172
|
};
|
|
12173
12173
|
|
|
12174
12174
|
/** */
|
|
12175
|
-
var RefIcon$
|
|
12175
|
+
var RefIcon$p = /*#__PURE__*/React.forwardRef(CloseOutlined);
|
|
12176
12176
|
if (process.env.NODE_ENV !== 'production') {
|
|
12177
|
-
RefIcon$
|
|
12177
|
+
RefIcon$p.displayName = 'CloseOutlined';
|
|
12178
12178
|
}
|
|
12179
12179
|
|
|
12180
12180
|
// This icon file is generated automatically.
|
|
@@ -12188,9 +12188,9 @@ var ExclamationCircleFilled = function ExclamationCircleFilled(props, ref) {
|
|
|
12188
12188
|
};
|
|
12189
12189
|
|
|
12190
12190
|
/** */
|
|
12191
|
-
var RefIcon$
|
|
12191
|
+
var RefIcon$o = /*#__PURE__*/React.forwardRef(ExclamationCircleFilled);
|
|
12192
12192
|
if (process.env.NODE_ENV !== 'production') {
|
|
12193
|
-
RefIcon$
|
|
12193
|
+
RefIcon$o.displayName = 'ExclamationCircleFilled';
|
|
12194
12194
|
}
|
|
12195
12195
|
|
|
12196
12196
|
// This icon file is generated automatically.
|
|
@@ -12204,9 +12204,9 @@ var InfoCircleFilled = function InfoCircleFilled(props, ref) {
|
|
|
12204
12204
|
};
|
|
12205
12205
|
|
|
12206
12206
|
/** */
|
|
12207
|
-
var RefIcon$
|
|
12207
|
+
var RefIcon$n = /*#__PURE__*/React.forwardRef(InfoCircleFilled);
|
|
12208
12208
|
if (process.env.NODE_ENV !== 'production') {
|
|
12209
|
-
RefIcon$
|
|
12209
|
+
RefIcon$n.displayName = 'InfoCircleFilled';
|
|
12210
12210
|
}
|
|
12211
12211
|
|
|
12212
12212
|
var attributes = "accept acceptCharset accessKey action allowFullScreen allowTransparency\n alt async autoComplete autoFocus autoPlay capture cellPadding cellSpacing challenge\n charSet checked classID className colSpan cols content contentEditable contextMenu\n controls coords crossOrigin data dateTime default defer dir disabled download draggable\n encType form formAction formEncType formMethod formNoValidate formTarget frameBorder\n headers height hidden high href hrefLang htmlFor httpEquiv icon id inputMode integrity\n is keyParams keyType kind label lang list loop low manifest marginHeight marginWidth max maxLength media\n mediaGroup method min minLength multiple muted name noValidate nonce open\n optimum pattern placeholder poster preload radioGroup readOnly rel required\n reversed role rowSpan rows sandbox scope scoped scrolling seamless selected\n shape size sizes span spellCheck src srcDoc srcLang srcSet start step style\n summary tabIndex target title type useMap value width wmode wrap";
|
|
@@ -13125,9 +13125,9 @@ var LoadingOutlined = function LoadingOutlined(props, ref) {
|
|
|
13125
13125
|
};
|
|
13126
13126
|
|
|
13127
13127
|
/** */
|
|
13128
|
-
var RefIcon$
|
|
13128
|
+
var RefIcon$m = /*#__PURE__*/React.forwardRef(LoadingOutlined);
|
|
13129
13129
|
if (process.env.NODE_ENV !== 'production') {
|
|
13130
|
-
RefIcon$
|
|
13130
|
+
RefIcon$m.displayName = 'LoadingOutlined';
|
|
13131
13131
|
}
|
|
13132
13132
|
|
|
13133
13133
|
const zIndexContext = /*#__PURE__*/React__default.createContext(undefined);
|
|
@@ -14314,7 +14314,7 @@ const InnerLoadingIcon = /*#__PURE__*/forwardRef((props, ref) => {
|
|
|
14314
14314
|
className: mergedIconCls,
|
|
14315
14315
|
style: style,
|
|
14316
14316
|
ref: ref
|
|
14317
|
-
}, /*#__PURE__*/React__default.createElement(RefIcon$
|
|
14317
|
+
}, /*#__PURE__*/React__default.createElement(RefIcon$m, {
|
|
14318
14318
|
className: iconClassName
|
|
14319
14319
|
}));
|
|
14320
14320
|
});
|
|
@@ -15182,9 +15182,9 @@ var RightOutlined = function RightOutlined(props, ref) {
|
|
|
15182
15182
|
};
|
|
15183
15183
|
|
|
15184
15184
|
/** */
|
|
15185
|
-
var RefIcon$
|
|
15185
|
+
var RefIcon$l = /*#__PURE__*/React.forwardRef(RightOutlined);
|
|
15186
15186
|
if (process.env.NODE_ENV !== 'production') {
|
|
15187
|
-
RefIcon$
|
|
15187
|
+
RefIcon$l.displayName = 'RightOutlined';
|
|
15188
15188
|
}
|
|
15189
15189
|
|
|
15190
15190
|
var PanelContent = /*#__PURE__*/React__default.forwardRef(function (props, ref) {
|
|
@@ -16360,7 +16360,7 @@ const Collapse = /*#__PURE__*/React.forwardRef((props, ref) => {
|
|
|
16360
16360
|
const mergedExpandIcon = expandIcon !== null && expandIcon !== void 0 ? expandIcon : contextExpandIcon;
|
|
16361
16361
|
const renderExpandIcon = React.useCallback(function () {
|
|
16362
16362
|
let panelProps = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
|
|
16363
|
-
const icon = typeof mergedExpandIcon === 'function' ? mergedExpandIcon(panelProps) : (/*#__PURE__*/React.createElement(RefIcon$
|
|
16363
|
+
const icon = typeof mergedExpandIcon === 'function' ? mergedExpandIcon(panelProps) : (/*#__PURE__*/React.createElement(RefIcon$l, {
|
|
16364
16364
|
rotate: panelProps.isActive ? direction === 'rtl' ? -90 : 90 : undefined,
|
|
16365
16365
|
"aria-label": panelProps.isActive ? 'expanded' : 'collapsed'
|
|
16366
16366
|
}));
|
|
@@ -21852,15 +21852,15 @@ function getCloseIcon(prefixCls, closeIcon) {
|
|
|
21852
21852
|
if (closeIcon === null || closeIcon === false) {
|
|
21853
21853
|
return null;
|
|
21854
21854
|
}
|
|
21855
|
-
return closeIcon || /*#__PURE__*/React.createElement(RefIcon$
|
|
21855
|
+
return closeIcon || /*#__PURE__*/React.createElement(RefIcon$p, {
|
|
21856
21856
|
className: `${prefixCls}-close-icon`
|
|
21857
21857
|
});
|
|
21858
21858
|
}
|
|
21859
21859
|
const typeToIcon = {
|
|
21860
|
-
success: RefIcon$
|
|
21861
|
-
info: RefIcon$
|
|
21862
|
-
error: RefIcon$
|
|
21863
|
-
warning: RefIcon$
|
|
21860
|
+
success: RefIcon$r,
|
|
21861
|
+
info: RefIcon$n,
|
|
21862
|
+
error: RefIcon$q,
|
|
21863
|
+
warning: RefIcon$o
|
|
21864
21864
|
};
|
|
21865
21865
|
const PureContent = props => {
|
|
21866
21866
|
const {
|
|
@@ -30175,9 +30175,9 @@ var CheckOutlined = function CheckOutlined(props, ref) {
|
|
|
30175
30175
|
};
|
|
30176
30176
|
|
|
30177
30177
|
/** */
|
|
30178
|
-
var RefIcon$
|
|
30178
|
+
var RefIcon$k = /*#__PURE__*/React.forwardRef(CheckOutlined);
|
|
30179
30179
|
if (process.env.NODE_ENV !== 'production') {
|
|
30180
|
-
RefIcon$
|
|
30180
|
+
RefIcon$k.displayName = 'CheckOutlined';
|
|
30181
30181
|
}
|
|
30182
30182
|
|
|
30183
30183
|
// This icon file is generated automatically.
|
|
@@ -30191,9 +30191,9 @@ var DownOutlined = function DownOutlined(props, ref) {
|
|
|
30191
30191
|
};
|
|
30192
30192
|
|
|
30193
30193
|
/** */
|
|
30194
|
-
var RefIcon$
|
|
30194
|
+
var RefIcon$j = /*#__PURE__*/React.forwardRef(DownOutlined);
|
|
30195
30195
|
if (process.env.NODE_ENV !== 'production') {
|
|
30196
|
-
RefIcon$
|
|
30196
|
+
RefIcon$j.displayName = 'DownOutlined';
|
|
30197
30197
|
}
|
|
30198
30198
|
|
|
30199
30199
|
// This icon file is generated automatically.
|
|
@@ -30207,9 +30207,9 @@ var SearchOutlined = function SearchOutlined(props, ref) {
|
|
|
30207
30207
|
};
|
|
30208
30208
|
|
|
30209
30209
|
/** */
|
|
30210
|
-
var RefIcon$
|
|
30210
|
+
var RefIcon$i = /*#__PURE__*/React.forwardRef(SearchOutlined);
|
|
30211
30211
|
if (process.env.NODE_ENV !== 'production') {
|
|
30212
|
-
RefIcon$
|
|
30212
|
+
RefIcon$i.displayName = 'SearchOutlined';
|
|
30213
30213
|
}
|
|
30214
30214
|
|
|
30215
30215
|
function useIcons$1(_ref) {
|
|
@@ -30232,7 +30232,7 @@ function useIcons$1(_ref) {
|
|
|
30232
30232
|
warning.deprecated(!clearIcon, 'clearIcon', 'allowClear={{ clearIcon: React.ReactNode }}');
|
|
30233
30233
|
}
|
|
30234
30234
|
// Clear Icon
|
|
30235
|
-
const mergedClearIcon = clearIcon !== null && clearIcon !== void 0 ? clearIcon : /*#__PURE__*/React.createElement(RefIcon$
|
|
30235
|
+
const mergedClearIcon = clearIcon !== null && clearIcon !== void 0 ? clearIcon : /*#__PURE__*/React.createElement(RefIcon$q, null);
|
|
30236
30236
|
// Validation Feedback Icon
|
|
30237
30237
|
const getSuffixIconNode = arrowIcon => {
|
|
30238
30238
|
if (suffixIcon === null && !hasFeedback && !showArrow) {
|
|
@@ -30245,7 +30245,7 @@ function useIcons$1(_ref) {
|
|
|
30245
30245
|
if (suffixIcon !== undefined) {
|
|
30246
30246
|
mergedSuffixIcon = getSuffixIconNode(suffixIcon);
|
|
30247
30247
|
} else if (loading) {
|
|
30248
|
-
mergedSuffixIcon = getSuffixIconNode(/*#__PURE__*/React.createElement(RefIcon$
|
|
30248
|
+
mergedSuffixIcon = getSuffixIconNode(/*#__PURE__*/React.createElement(RefIcon$m, {
|
|
30249
30249
|
spin: true
|
|
30250
30250
|
}));
|
|
30251
30251
|
} else {
|
|
@@ -30256,11 +30256,11 @@ function useIcons$1(_ref) {
|
|
|
30256
30256
|
showSearch
|
|
30257
30257
|
} = _ref2;
|
|
30258
30258
|
if (open && showSearch) {
|
|
30259
|
-
return getSuffixIconNode(/*#__PURE__*/React.createElement(RefIcon$
|
|
30259
|
+
return getSuffixIconNode(/*#__PURE__*/React.createElement(RefIcon$i, {
|
|
30260
30260
|
className: iconCls
|
|
30261
30261
|
}));
|
|
30262
30262
|
}
|
|
30263
|
-
return getSuffixIconNode(/*#__PURE__*/React.createElement(RefIcon$
|
|
30263
|
+
return getSuffixIconNode(/*#__PURE__*/React.createElement(RefIcon$j, {
|
|
30264
30264
|
className: iconCls
|
|
30265
30265
|
}));
|
|
30266
30266
|
};
|
|
@@ -30270,7 +30270,7 @@ function useIcons$1(_ref) {
|
|
|
30270
30270
|
if (menuItemSelectedIcon !== undefined) {
|
|
30271
30271
|
mergedItemIcon = menuItemSelectedIcon;
|
|
30272
30272
|
} else if (multiple) {
|
|
30273
|
-
mergedItemIcon = /*#__PURE__*/React.createElement(RefIcon$
|
|
30273
|
+
mergedItemIcon = /*#__PURE__*/React.createElement(RefIcon$k, null);
|
|
30274
30274
|
} else {
|
|
30275
30275
|
mergedItemIcon = null;
|
|
30276
30276
|
}
|
|
@@ -30278,7 +30278,7 @@ function useIcons$1(_ref) {
|
|
|
30278
30278
|
if (removeIcon !== undefined) {
|
|
30279
30279
|
mergedRemoveIcon = removeIcon;
|
|
30280
30280
|
} else {
|
|
30281
|
-
mergedRemoveIcon = /*#__PURE__*/React.createElement(RefIcon$
|
|
30281
|
+
mergedRemoveIcon = /*#__PURE__*/React.createElement(RefIcon$p, null);
|
|
30282
30282
|
}
|
|
30283
30283
|
return {
|
|
30284
30284
|
clearIcon: mergedClearIcon,
|
|
@@ -31599,9 +31599,9 @@ var LeftOutlined = function LeftOutlined(props, ref) {
|
|
|
31599
31599
|
};
|
|
31600
31600
|
|
|
31601
31601
|
/** */
|
|
31602
|
-
var RefIcon$
|
|
31602
|
+
var RefIcon$h = /*#__PURE__*/React.forwardRef(LeftOutlined);
|
|
31603
31603
|
if (process.env.NODE_ENV !== 'production') {
|
|
31604
|
-
RefIcon$
|
|
31604
|
+
RefIcon$h.displayName = 'LeftOutlined';
|
|
31605
31605
|
}
|
|
31606
31606
|
|
|
31607
31607
|
var ESC$1 = KeyCode.ESC,
|
|
@@ -33799,9 +33799,9 @@ var BarsOutlined = function BarsOutlined(props, ref) {
|
|
|
33799
33799
|
};
|
|
33800
33800
|
|
|
33801
33801
|
/** */
|
|
33802
|
-
var RefIcon$
|
|
33802
|
+
var RefIcon$g = /*#__PURE__*/React.forwardRef(BarsOutlined);
|
|
33803
33803
|
if (process.env.NODE_ENV !== 'production') {
|
|
33804
|
-
RefIcon$
|
|
33804
|
+
RefIcon$g.displayName = 'BarsOutlined';
|
|
33805
33805
|
}
|
|
33806
33806
|
|
|
33807
33807
|
const LayoutContext = /*#__PURE__*/React.createContext({
|
|
@@ -34155,11 +34155,11 @@ const Sider = /*#__PURE__*/React.forwardRef((props, ref) => {
|
|
|
34155
34155
|
onClick: toggle,
|
|
34156
34156
|
className: classNames(`${prefixCls}-zero-width-trigger`, `${prefixCls}-zero-width-trigger-${reverseArrow ? 'right' : 'left'}`),
|
|
34157
34157
|
style: zeroWidthTriggerStyle
|
|
34158
|
-
}, trigger || /*#__PURE__*/React.createElement(RefIcon$
|
|
34158
|
+
}, trigger || /*#__PURE__*/React.createElement(RefIcon$g, null))) : null;
|
|
34159
34159
|
const reverseIcon = direction === 'rtl' === !reverseArrow;
|
|
34160
34160
|
const iconObj = {
|
|
34161
|
-
expanded: reverseIcon ? /*#__PURE__*/React.createElement(RefIcon$
|
|
34162
|
-
collapsed: reverseIcon ? /*#__PURE__*/React.createElement(RefIcon$
|
|
34161
|
+
expanded: reverseIcon ? /*#__PURE__*/React.createElement(RefIcon$l, null) : /*#__PURE__*/React.createElement(RefIcon$h, null),
|
|
34162
|
+
collapsed: reverseIcon ? /*#__PURE__*/React.createElement(RefIcon$h, null) : /*#__PURE__*/React.createElement(RefIcon$l, null)
|
|
34163
34163
|
};
|
|
34164
34164
|
const status = collapsed ? 'collapsed' : 'expanded';
|
|
34165
34165
|
const defaultTrigger = iconObj[status];
|
|
@@ -34211,9 +34211,9 @@ var EllipsisOutlined = function EllipsisOutlined(props, ref) {
|
|
|
34211
34211
|
};
|
|
34212
34212
|
|
|
34213
34213
|
/** */
|
|
34214
|
-
var RefIcon$
|
|
34214
|
+
var RefIcon$f = /*#__PURE__*/React.forwardRef(EllipsisOutlined);
|
|
34215
34215
|
if (process.env.NODE_ENV !== 'production') {
|
|
34216
|
-
RefIcon$
|
|
34216
|
+
RefIcon$f.displayName = 'EllipsisOutlined';
|
|
34217
34217
|
}
|
|
34218
34218
|
|
|
34219
34219
|
const MenuContext = /*#__PURE__*/createContext$1({
|
|
@@ -35534,7 +35534,7 @@ const InternalMenu = /*#__PURE__*/forwardRef((props, ref) => {
|
|
|
35534
35534
|
value: contextValue
|
|
35535
35535
|
}, /*#__PURE__*/React.createElement(ExportMenu, Object.assign({
|
|
35536
35536
|
getPopupContainer: getPopupContainer,
|
|
35537
|
-
overflowedIndicator: /*#__PURE__*/React.createElement(RefIcon$
|
|
35537
|
+
overflowedIndicator: /*#__PURE__*/React.createElement(RefIcon$f, null),
|
|
35538
35538
|
overflowedIndicatorPopupClassName: classNames(prefixCls, `${prefixCls}-${theme}`, overflowedIndicatorPopupClassName),
|
|
35539
35539
|
mode: mergedMode,
|
|
35540
35540
|
selectable: mergedSelectable,
|
|
@@ -36024,9 +36024,9 @@ const Dropdown$1 = props => {
|
|
|
36024
36024
|
rootClassName: classNames(cssVarCls, rootCls),
|
|
36025
36025
|
expandIcon: /*#__PURE__*/React.createElement("span", {
|
|
36026
36026
|
className: `${prefixCls}-menu-submenu-arrow`
|
|
36027
|
-
}, direction === 'rtl' ? (/*#__PURE__*/React.createElement(RefIcon$
|
|
36027
|
+
}, direction === 'rtl' ? (/*#__PURE__*/React.createElement(RefIcon$h, {
|
|
36028
36028
|
className: `${prefixCls}-menu-submenu-arrow-icon`
|
|
36029
|
-
})) : (/*#__PURE__*/React.createElement(RefIcon$
|
|
36029
|
+
})) : (/*#__PURE__*/React.createElement(RefIcon$l, {
|
|
36030
36030
|
className: `${prefixCls}-menu-submenu-arrow-icon`
|
|
36031
36031
|
}))),
|
|
36032
36032
|
mode: "vertical",
|
|
@@ -46639,22 +46639,6 @@ if (process.env.NODE_ENV !== 'production') {
|
|
|
46639
46639
|
Checkbox.displayName = 'Checkbox';
|
|
46640
46640
|
}
|
|
46641
46641
|
|
|
46642
|
-
// This icon file is generated automatically.
|
|
46643
|
-
var UpOutlined$1 = { "icon": { "tag": "svg", "attrs": { "viewBox": "64 64 896 896", "focusable": "false" }, "children": [{ "tag": "path", "attrs": { "d": "M890.5 755.3L537.9 269.2c-12.8-17.6-39-17.6-51.7 0L133.5 755.3A8 8 0 00140 768h75c5.1 0 9.9-2.5 12.9-6.6L512 369.8l284.1 391.6c3 4.1 7.8 6.6 12.9 6.6h75c6.5 0 10.3-7.4 6.5-12.7z" } }] }, "name": "up", "theme": "outlined" };
|
|
46644
|
-
|
|
46645
|
-
var UpOutlined = function UpOutlined(props, ref) {
|
|
46646
|
-
return /*#__PURE__*/React.createElement(Icon$2, _extends({}, props, {
|
|
46647
|
-
ref: ref,
|
|
46648
|
-
icon: UpOutlined$1
|
|
46649
|
-
}));
|
|
46650
|
-
};
|
|
46651
|
-
|
|
46652
|
-
/** */
|
|
46653
|
-
var RefIcon$f = /*#__PURE__*/React.forwardRef(UpOutlined);
|
|
46654
|
-
if (process.env.NODE_ENV !== 'production') {
|
|
46655
|
-
RefIcon$f.displayName = 'UpOutlined';
|
|
46656
|
-
}
|
|
46657
|
-
|
|
46658
46642
|
function hasAddon(props) {
|
|
46659
46643
|
return !!(props.addonBefore || props.addonAfter);
|
|
46660
46644
|
}
|
|
@@ -47119,7 +47103,7 @@ const getAllowClear = allowClear => {
|
|
|
47119
47103
|
mergedAllowClear = allowClear;
|
|
47120
47104
|
} else if (allowClear) {
|
|
47121
47105
|
mergedAllowClear = {
|
|
47122
|
-
clearIcon: /*#__PURE__*/React__default.createElement(RefIcon$
|
|
47106
|
+
clearIcon: /*#__PURE__*/React__default.createElement(RefIcon$q, null)
|
|
47123
47107
|
};
|
|
47124
47108
|
}
|
|
47125
47109
|
return mergedAllowClear;
|
|
@@ -47942,7 +47926,7 @@ const DropdownButton = props => {
|
|
|
47942
47926
|
placement,
|
|
47943
47927
|
getPopupContainer,
|
|
47944
47928
|
href,
|
|
47945
|
-
icon = /*#__PURE__*/React.createElement(RefIcon$
|
|
47929
|
+
icon = /*#__PURE__*/React.createElement(RefIcon$f, null),
|
|
47946
47930
|
title,
|
|
47947
47931
|
buttonsRender = buttons => buttons,
|
|
47948
47932
|
mouseEnterDelay,
|
|
@@ -49396,12 +49380,12 @@ const Pagination = props => {
|
|
|
49396
49380
|
className: `${prefixCls}-item-link`,
|
|
49397
49381
|
type: "button",
|
|
49398
49382
|
tabIndex: -1
|
|
49399
|
-
}, direction === 'rtl' ? /*#__PURE__*/React.createElement(RefIcon$
|
|
49383
|
+
}, direction === 'rtl' ? /*#__PURE__*/React.createElement(RefIcon$l, null) : /*#__PURE__*/React.createElement(RefIcon$h, null));
|
|
49400
49384
|
const nextIcon = /*#__PURE__*/React.createElement("button", {
|
|
49401
49385
|
className: `${prefixCls}-item-link`,
|
|
49402
49386
|
type: "button",
|
|
49403
49387
|
tabIndex: -1
|
|
49404
|
-
}, direction === 'rtl' ? /*#__PURE__*/React.createElement(RefIcon$
|
|
49388
|
+
}, direction === 'rtl' ? /*#__PURE__*/React.createElement(RefIcon$h, null) : /*#__PURE__*/React.createElement(RefIcon$l, null));
|
|
49405
49389
|
const jumpPrevIcon =
|
|
49406
49390
|
/*#__PURE__*/
|
|
49407
49391
|
// biome-ignore lint/a11y/useValidAnchor: it is hard to refactor
|
|
@@ -54593,7 +54577,7 @@ const useSelection = (config, rowSelection) => {
|
|
|
54593
54577
|
}, /*#__PURE__*/React.createElement(Dropdown, {
|
|
54594
54578
|
menu: menu,
|
|
54595
54579
|
getPopupContainer: getPopupContainer
|
|
54596
|
-
}, /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement(RefIcon$
|
|
54580
|
+
}, /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement(RefIcon$j, null))));
|
|
54597
54581
|
}
|
|
54598
54582
|
const allDisabledData = flattedData.map((record, index) => {
|
|
54599
54583
|
const key = getRowKey(record, index);
|
|
@@ -57046,7 +57030,7 @@ const SwitcherIconCom = props => {
|
|
|
57046
57030
|
if (/*#__PURE__*/React.isValidElement(switcherLoadingIcon)) {
|
|
57047
57031
|
return switcherLoadingIcon;
|
|
57048
57032
|
}
|
|
57049
|
-
return /*#__PURE__*/React.createElement(RefIcon$
|
|
57033
|
+
return /*#__PURE__*/React.createElement(RefIcon$m, {
|
|
57050
57034
|
className: `${prefixCls}-switcher-loading-icon`
|
|
57051
57035
|
});
|
|
57052
57036
|
}
|
|
@@ -57439,7 +57423,7 @@ const FilterSearch = props => {
|
|
|
57439
57423
|
return /*#__PURE__*/React.createElement("div", {
|
|
57440
57424
|
className: `${tablePrefixCls}-filter-dropdown-search`
|
|
57441
57425
|
}, /*#__PURE__*/React.createElement(Input, {
|
|
57442
|
-
prefix: /*#__PURE__*/React.createElement(RefIcon$
|
|
57426
|
+
prefix: /*#__PURE__*/React.createElement(RefIcon$i, null),
|
|
57443
57427
|
placeholder: locale.filterSearchPlaceholder,
|
|
57444
57428
|
onChange: onChange,
|
|
57445
57429
|
value: value,
|
|
@@ -61548,7 +61532,7 @@ function ExitIcon(props) {
|
|
|
61548
61532
|
}
|
|
61549
61533
|
|
|
61550
61534
|
function InfoIcon(props) {
|
|
61551
|
-
return (
|
|
61535
|
+
return (jsx("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: jsx("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M7.99996 0.666626C3.94987 0.666626 0.666626 3.94987 0.666626 7.99996C0.666626 12.05 3.94987 15.3333 7.99996 15.3333C12.05 15.3333 15.3333 12.05 15.3333 7.99996C15.3333 3.94987 12.05 0.666626 7.99996 0.666626ZM7.99996 4.66663C7.63177 4.66663 7.33329 4.9651 7.33329 5.33329C7.33329 5.70148 7.63177 5.99996 7.99996 5.99996H8.00663C8.37482 5.99996 8.67329 5.70148 8.67329 5.33329C8.67329 4.9651 8.37482 4.66663 8.00663 4.66663H7.99996ZM8.66663 7.99996C8.66663 7.63177 8.36815 7.33329 7.99996 7.33329C7.63177 7.33329 7.33329 7.63177 7.33329 7.99996V10.6666C7.33329 11.0348 7.63177 11.3333 7.99996 11.3333C8.36815 11.3333 8.66663 11.0348 8.66663 10.6666V7.99996Z", fill: "#0055C2" }) }));
|
|
61552
61536
|
}
|
|
61553
61537
|
|
|
61554
61538
|
function CheckIcon(props) {
|
|
@@ -61558,12 +61542,17 @@ function CheckIcon(props) {
|
|
|
61558
61542
|
|
|
61559
61543
|
function WarningIcon(props) {
|
|
61560
61544
|
const { width = 16, height = 16, ...rest } = props;
|
|
61561
|
-
return (jsx("svg", { width: width, height: height, viewBox: "0 0
|
|
61545
|
+
return (jsx("svg", { width: width, height: height, viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...rest, children: jsx("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M7.99996 0.666626C3.94987 0.666626 0.666626 3.94987 0.666626 7.99996C0.666626 12.05 3.94987 15.3333 7.99996 15.3333C12.05 15.3333 15.3333 12.05 15.3333 7.99996C15.3333 3.94987 12.05 0.666626 7.99996 0.666626ZM8.66663 5.33329C8.66663 4.9651 8.36815 4.66663 7.99996 4.66663C7.63177 4.66663 7.33329 4.9651 7.33329 5.33329V7.99996C7.33329 8.36815 7.63177 8.66663 7.99996 8.66663C8.36815 8.66663 8.66663 8.36815 8.66663 7.99996V5.33329ZM7.99996 9.99996C7.63177 9.99996 7.33329 10.2984 7.33329 10.6666C7.33329 11.0348 7.63177 11.3333 7.99996 11.3333H8.00663C8.37482 11.3333 8.67329 11.0348 8.67329 10.6666C8.67329 10.2984 8.37482 9.99996 8.00663 9.99996H7.99996Z", fill: "#893700" }) }));
|
|
61562
61546
|
}
|
|
61563
61547
|
|
|
61564
61548
|
function ErrorIcon(props) {
|
|
61565
61549
|
const { width = 16, height = 16, ...rest } = props;
|
|
61566
|
-
return (jsx("svg", { width:
|
|
61550
|
+
return (jsx("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: jsx("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M7.99996 0.666626C3.94987 0.666626 0.666626 3.94987 0.666626 7.99996C0.666626 12.05 3.94987 15.3333 7.99996 15.3333C12.05 15.3333 15.3333 12.05 15.3333 7.99996C15.3333 3.94987 12.05 0.666626 7.99996 0.666626ZM8.66663 5.33329C8.66663 4.9651 8.36815 4.66663 7.99996 4.66663C7.63177 4.66663 7.33329 4.9651 7.33329 5.33329V7.99996C7.33329 8.36815 7.63177 8.66663 7.99996 8.66663C8.36815 8.66663 8.66663 8.36815 8.66663 7.99996V5.33329ZM7.99996 9.99996C7.63177 9.99996 7.33329 10.2984 7.33329 10.6666C7.33329 11.0348 7.63177 11.3333 7.99996 11.3333H8.00663C8.37482 11.3333 8.67329 11.0348 8.67329 10.6666C8.67329 10.2984 8.37482 9.99996 8.00663 9.99996H7.99996Z", fill: "#A80A12" }) }));
|
|
61551
|
+
}
|
|
61552
|
+
|
|
61553
|
+
function PositiveIcon(props) {
|
|
61554
|
+
const { width = 16, height = 16, ...rest } = props;
|
|
61555
|
+
return (jsx("svg", { width: width, height: height, viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: jsx("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M7.99996 0.666626C3.94987 0.666626 0.666626 3.94987 0.666626 7.99996C0.666626 12.05 3.94987 15.3333 7.99996 15.3333C12.05 15.3333 15.3333 12.05 15.3333 7.99996C15.3333 3.94987 12.05 0.666626 7.99996 0.666626ZM11.4714 6.47136C11.7317 6.21101 11.7317 5.7889 11.4714 5.52855C11.211 5.26821 10.7889 5.26821 10.5286 5.52855L6.99996 9.05715L5.47136 7.52855C5.21101 7.2682 4.7889 7.2682 4.52855 7.52855C4.26821 7.7889 4.26821 8.21101 4.52855 8.47136L6.52855 10.4714C6.7889 10.7317 7.21101 10.7317 7.47136 10.4714L11.4714 6.47136Z", fill: "#00652A" }) }));
|
|
61567
61556
|
}
|
|
61568
61557
|
|
|
61569
61558
|
function ArrowDownIcon(props) {
|
|
@@ -61630,6 +61619,12 @@ function ChevronRightIcon(props) {
|
|
|
61630
61619
|
return (jsx("svg", { width: width, height: height, viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...rest, children: jsx("path", { d: "M6 12L10 8L6 4", stroke: "currentColor", "stroke-linecap": "round", "stroke-linejoin": "round" }) }));
|
|
61631
61620
|
}
|
|
61632
61621
|
|
|
61622
|
+
const SortTableIcon = (props) => (jsx("svg", { width: 16, height: 16, viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props, children: jsx("path", { d: "M4.66666 9.99996L7.99999 13.3333L11.3333 9.99996M4.66666 5.99996L7.99999 2.66663L11.3333 5.99996", stroke: "#505A5F", strokeLinecap: "round", strokeLinejoin: "round" }) }));
|
|
61623
|
+
|
|
61624
|
+
const LineArrowsDown = (props) => (jsx("svg", { width: 16, height: 16, viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props, children: jsx("path", { d: "M11.3333 2.66663V9.99996M11.3333 9.99996L8.66667 7.33329M11.3333 9.99996L14 7.33329M4.66667 2.66663V13.3333M4.66667 13.3333L2 10.6666M4.66667 13.3333L7.33333 10.6666", stroke: "#505A5F", strokeLinecap: "round", strokeLinejoin: "round" }) }));
|
|
61625
|
+
|
|
61626
|
+
const LineArrowsUp = (props) => (jsx("svg", { width: 16, height: 16, viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props, children: jsx("path", { d: "M4.66667 13.3333V2.66663M4.66667 2.66663L2 5.33329M4.66667 2.66663L7.33333 5.33329M11.3333 13.3333V5.99996M11.3333 5.99996L8.66667 8.66663M11.3333 5.99996L14 8.66663", stroke: "#505A5F", strokeLinecap: "round", strokeLinejoin: "round" }) }));
|
|
61627
|
+
|
|
61633
61628
|
const renderSystemNotification = ({ title, description, imgUrl, okText = "ok", cancelText = "Dismiss", moreOption, onMoreClick, onOk, onCancel, onClose, }) => {
|
|
61634
61629
|
return (jsxs(DivNotificationSystemWrapperSC, { children: [jsx(ImgNotificationSystemSC, { src: imgUrl }), jsxs(DivNotificationSystemContainerSC, { children: [jsxs(DivNotificationContentWrapperSC, { children: [jsxs(DivNotificationContentSC, { children: [jsxs(DivNotificationHeaderSC, { children: [jsx(DivNotificationTitleSC, { children: title }), moreOption && (jsx(DivIconActionSC, { children: jsx(FISIconButton, { variant: "tertiary-invisible", size: "xs", icon: jsx(MoreIcon, {}), onClick: onMoreClick }) }))] }), jsx(DivNotificationDescriptionSC, { children: description })] }), jsxs(DivNotificationActionsSC, { children: [jsx(FISLinkButton, { size: "xs", variant: "hight-priority", onClick: onOk, children: okText }), jsx(FISLinkButton, { size: "xs", onClick: onCancel, children: cancelText })] })] }), jsx(DivIconActionSC, { children: jsx(FISIconButton, { icon: jsx(CloseIcon, {}), size: "xs", variant: "tertiary-invisible", onClick: onClose }) })] })] }));
|
|
61635
61630
|
};
|
|
@@ -62513,7 +62508,7 @@ const FISDivider = (props) => {
|
|
|
62513
62508
|
|
|
62514
62509
|
const themeIcons = {
|
|
62515
62510
|
info: jsx(InfoIcon, {}),
|
|
62516
|
-
positive: jsx(
|
|
62511
|
+
positive: jsx(PositiveIcon, {}),
|
|
62517
62512
|
caution: jsx(WarningIcon, {}),
|
|
62518
62513
|
negative: jsx(ErrorIcon, {}),
|
|
62519
62514
|
};
|
|
@@ -64210,6 +64205,7 @@ const InputSC$2 = styled.input `
|
|
|
64210
64205
|
border: none;
|
|
64211
64206
|
background: transparent;
|
|
64212
64207
|
outline: none;
|
|
64208
|
+
cursor: ${(props) => (props.$isPointer ? "pointer" : "text")};
|
|
64213
64209
|
padding-right: calc(
|
|
64214
64210
|
${getTheme("com/input/field/size-md/label/sub-spacing")} +
|
|
64215
64211
|
${getTheme("com/input/field/right-padding")}
|
|
@@ -64566,32 +64562,41 @@ const DivContainerSC$7 = styled.div `
|
|
|
64566
64562
|
pointer-events: auto;
|
|
64567
64563
|
}
|
|
64568
64564
|
|
|
64569
|
-
&:has(${InputSC$2}:disabled)
|
|
64570
|
-
&:has(${InputSC$2}:read-only) {
|
|
64565
|
+
&:has(${InputSC$2}:disabled) {
|
|
64571
64566
|
outline-color: ${getTheme("com/input/field/disable/stroke-color")};
|
|
64572
64567
|
background-color: ${getTheme("com/input/field/disable/background-color")};
|
|
64573
64568
|
cursor: not-allowed;
|
|
64574
64569
|
|
|
64570
|
+
${InputSC$2} {
|
|
64571
|
+
cursor: not-allowed;
|
|
64572
|
+
}
|
|
64573
|
+
|
|
64575
64574
|
${DivIconSC$2} {
|
|
64576
64575
|
color: ${getTheme("com/input/field/disable/icon-color")};
|
|
64576
|
+
cursor: not-allowed;
|
|
64577
64577
|
}
|
|
64578
64578
|
${DivIconSuffixSC$1} {
|
|
64579
64579
|
color: ${getTheme("com/input/field/disable/icon-color")};
|
|
64580
|
+
cursor: not-allowed;
|
|
64580
64581
|
}
|
|
64581
64582
|
${DivIconPrefixSC$1} {
|
|
64582
64583
|
color: ${getTheme("com/input/field/disable/icon-color")};
|
|
64584
|
+
cursor: not-allowed;
|
|
64583
64585
|
}
|
|
64584
64586
|
|
|
64585
64587
|
.icon-suffix {
|
|
64586
64588
|
pointer-events: none;
|
|
64587
64589
|
color: ${getTheme("com/button/disable/icon-color")};
|
|
64590
|
+
cursor: not-allowed;
|
|
64588
64591
|
}
|
|
64589
64592
|
|
|
64590
64593
|
${SpanTextPrefixSC} {
|
|
64591
64594
|
color: ${getTheme("com/input/field/disable/label-color")};
|
|
64595
|
+
cursor: not-allowed;
|
|
64592
64596
|
}
|
|
64593
64597
|
${SpanTextSuffixSC} {
|
|
64594
64598
|
color: ${getTheme("com/input/field/disable/label-color")};
|
|
64599
|
+
cursor: not-allowed;
|
|
64595
64600
|
}
|
|
64596
64601
|
|
|
64597
64602
|
&::placeholder {
|
|
@@ -64599,11 +64604,49 @@ const DivContainerSC$7 = styled.div `
|
|
|
64599
64604
|
}
|
|
64600
64605
|
}
|
|
64601
64606
|
|
|
64602
|
-
&:has(${InputSC$2}:read-only) {
|
|
64607
|
+
&:has(${InputSC$2}:read-only):not(:has(${InputSC$2}:disabled)) {
|
|
64603
64608
|
cursor: default;
|
|
64609
|
+
outline-color: ${getTheme("com/input/field/disable/stroke-color")};
|
|
64610
|
+
background-color: ${getTheme("com/input/field/disable/background-color")};
|
|
64611
|
+
|
|
64612
|
+
${InputSC$2} {
|
|
64613
|
+
cursor: default;
|
|
64614
|
+
}
|
|
64615
|
+
|
|
64616
|
+
${DivIconSC$2} {
|
|
64617
|
+
color: ${getTheme("com/input/field/disable/icon-color")};
|
|
64618
|
+
cursor: default;
|
|
64619
|
+
}
|
|
64620
|
+
${DivIconSuffixSC$1} {
|
|
64621
|
+
color: ${getTheme("com/input/field/disable/icon-color")};
|
|
64622
|
+
cursor: default;
|
|
64623
|
+
}
|
|
64624
|
+
${DivIconPrefixSC$1} {
|
|
64625
|
+
color: ${getTheme("com/input/field/disable/icon-color")};
|
|
64626
|
+
cursor: default;
|
|
64627
|
+
}
|
|
64628
|
+
|
|
64629
|
+
.icon-suffix {
|
|
64630
|
+
pointer-events: none;
|
|
64631
|
+
color: ${getTheme("com/button/disable/icon-color")};
|
|
64632
|
+
cursor: default;
|
|
64633
|
+
}
|
|
64634
|
+
|
|
64635
|
+
${SpanTextPrefixSC} {
|
|
64636
|
+
color: ${getTheme("com/input/field/disable/label-color")};
|
|
64637
|
+
cursor: default;
|
|
64638
|
+
}
|
|
64639
|
+
${SpanTextSuffixSC} {
|
|
64640
|
+
color: ${getTheme("com/input/field/disable/label-color")};
|
|
64641
|
+
cursor: default;
|
|
64642
|
+
}
|
|
64643
|
+
|
|
64644
|
+
&::placeholder {
|
|
64645
|
+
color: ${getTheme("com/input/field/disable/label-color")};
|
|
64646
|
+
}
|
|
64604
64647
|
}
|
|
64605
64648
|
|
|
64606
|
-
&:hover:not(
|
|
64649
|
+
&:hover:not(:has(${InputSC$2}:disabled)):not(:has(.icon-suffix:hover)) {
|
|
64607
64650
|
outline-color: ${getTheme("com/input/field/default/border/hover")};
|
|
64608
64651
|
background-color: ${getTheme("com/input/field/default/background/hover")};
|
|
64609
64652
|
|
|
@@ -64673,7 +64716,7 @@ const FISInputField = forwardRef(({ onClickSuffix, onClickPrefix, ...props }, re
|
|
|
64673
64716
|
"active-dropdown": activeDropdown,
|
|
64674
64717
|
disabled: disabled,
|
|
64675
64718
|
"input-text-lg": sizeInput === "lg",
|
|
64676
|
-
}), onClick: onClickPrefix, children: [iconPrefix && jsx(DivIconDropSC, { children: iconPrefix }), labelPrefix && jsx(SpanTextDropSC, { children: labelPrefix }), jsx(DivIconPrefixSC$1, { children: jsx(DropdownIcon, {}) })] })), jsx(InputSC$2, { ...rest, ref: ref, disabled: disabled, className: classNames({
|
|
64719
|
+
}), onClick: onClickPrefix, children: [iconPrefix && jsx(DivIconDropSC, { children: iconPrefix }), labelPrefix && jsx(SpanTextDropSC, { children: labelPrefix }), jsx(DivIconPrefixSC$1, { children: jsx(DropdownIcon, {}) })] })), jsx(InputSC$2, { ...rest, ref: ref, disabled: disabled, "$isPointer": props.$isPointer, className: classNames({
|
|
64677
64720
|
negative: negative,
|
|
64678
64721
|
"input-text-lg": sizeInput === "lg",
|
|
64679
64722
|
prefix: iconPrefix,
|
|
@@ -66294,7 +66337,7 @@ const PTitleSC$2 = styled.p `
|
|
|
66294
66337
|
${getTheme("Paragraph/Sm")}
|
|
66295
66338
|
color: ${getTheme("com/menu/item/action/label/color-text/default")};
|
|
66296
66339
|
`;
|
|
66297
|
-
styled.div `
|
|
66340
|
+
const DivWrapperMenuSC = styled.div `
|
|
66298
66341
|
display: flex;
|
|
66299
66342
|
flex-direction: column;
|
|
66300
66343
|
height: 100%;
|
|
@@ -67324,62 +67367,64 @@ const FISMenuSection = ({ label, withAction = false, actionText, actionLabel = f
|
|
|
67324
67367
|
};
|
|
67325
67368
|
FISMenuSection.displayName = "FISMenuSection";
|
|
67326
67369
|
|
|
67327
|
-
const FISMenuSelect = ({ placeholder, groups, size = "md", multi = false, selectedValues = [], onChangeSelected, loading = false, noData = false, noResult = false, combobox, className, onClickMenu, loadingText = "Data loading...", noDataText = "No data", noResultText = "No result", removeSelectedText = "Remove selected", selectedGroupLabel = "Selected", }) => {
|
|
67328
|
-
const [
|
|
67329
|
-
|
|
67330
|
-
|
|
67331
|
-
|
|
67332
|
-
|
|
67333
|
-
|
|
67334
|
-
|
|
67335
|
-
|
|
67336
|
-
|
|
67337
|
-
|
|
67338
|
-
|
|
67339
|
-
|
|
67340
|
-
|
|
67341
|
-
|
|
67342
|
-
|
|
67343
|
-
item
|
|
67344
|
-
|
|
67345
|
-
|
|
67346
|
-
|
|
67347
|
-
|
|
67348
|
-
|
|
67349
|
-
|
|
67350
|
-
|
|
67351
|
-
|
|
67352
|
-
|
|
67353
|
-
|
|
67354
|
-
|
|
67355
|
-
|
|
67356
|
-
value: "__remove_selected__",
|
|
67357
|
-
},
|
|
67358
|
-
],
|
|
67359
|
-
}
|
|
67360
|
-
: null;
|
|
67370
|
+
const FISMenuSelect = ({ placeholder, groups, size = "md", multi = false, selectedValues = [], onChangeSelected, searchValue = "", onSearchChange, loading = false, noData = false, noResult = false, combobox, className, onClickMenu, loadingText = "Data loading...", noDataText = "No data", noResultText = "No result", removeSelectedText = "Remove selected", selectedGroupLabel = "Selected", }) => {
|
|
67371
|
+
const [localSearch, setLocalSearch] = useState(searchValue);
|
|
67372
|
+
useEffect(() => {
|
|
67373
|
+
setLocalSearch(searchValue);
|
|
67374
|
+
}, [searchValue]);
|
|
67375
|
+
const search = localSearch;
|
|
67376
|
+
const filteredGroups = useMemo$1(() => {
|
|
67377
|
+
let filteredItems = groups.map((group) => ({
|
|
67378
|
+
groupLabel: group.groupLabel,
|
|
67379
|
+
items: multi
|
|
67380
|
+
? group.items.filter((item) => !selectedValues.includes(item.value))
|
|
67381
|
+
: group.items,
|
|
67382
|
+
}));
|
|
67383
|
+
if (search.trim()) {
|
|
67384
|
+
filteredItems = filteredItems.map((group) => ({
|
|
67385
|
+
...group,
|
|
67386
|
+
items: group.items.filter((item) => item.label.toLowerCase().includes(search.toLowerCase())),
|
|
67387
|
+
}));
|
|
67388
|
+
}
|
|
67389
|
+
return filteredItems.filter((group) => group.items.length > 0);
|
|
67390
|
+
}, [groups, multi, selectedValues, search]);
|
|
67391
|
+
const selectedItemsGroup = useMemo$1(() => {
|
|
67392
|
+
if (!multi)
|
|
67393
|
+
return null;
|
|
67394
|
+
const selectedItems = groups
|
|
67395
|
+
.flatMap((g) => g.items)
|
|
67396
|
+
.filter((item) => selectedValues.includes(item.value));
|
|
67397
|
+
if (selectedItems.length === 0)
|
|
67398
|
+
return null;
|
|
67361
67399
|
return {
|
|
67362
|
-
|
|
67363
|
-
|
|
67364
|
-
otherGroups,
|
|
67365
|
-
filteredGroups,
|
|
67366
|
-
removeSelectedGroup,
|
|
67400
|
+
groupLabel: selectedGroupLabel,
|
|
67401
|
+
items: selectedItems,
|
|
67367
67402
|
};
|
|
67368
|
-
}, [
|
|
67369
|
-
|
|
67370
|
-
|
|
67371
|
-
|
|
67372
|
-
|
|
67373
|
-
|
|
67374
|
-
|
|
67375
|
-
|
|
67403
|
+
}, [groups, multi, selectedValues, selectedGroupLabel]);
|
|
67404
|
+
const groupsToRender = selectedItemsGroup
|
|
67405
|
+
? [selectedItemsGroup, ...filteredGroups]
|
|
67406
|
+
: filteredGroups;
|
|
67407
|
+
const removeSelectedGroup = multi && selectedValues.length > 0
|
|
67408
|
+
? {
|
|
67409
|
+
groupLabel: "",
|
|
67410
|
+
items: [
|
|
67411
|
+
{
|
|
67412
|
+
label: removeSelectedText,
|
|
67413
|
+
description: "",
|
|
67414
|
+
value: "__remove_selected__",
|
|
67415
|
+
},
|
|
67416
|
+
],
|
|
67417
|
+
}
|
|
67418
|
+
: null;
|
|
67376
67419
|
const totalItems = groups.reduce((acc, group) => acc + group.items.length, 0);
|
|
67377
|
-
const showInput = totalItems >= 7;
|
|
67378
67420
|
const hasSearch = search.trim() !== "";
|
|
67379
|
-
const
|
|
67421
|
+
const showInput = totalItems >= 7 || hasSearch;
|
|
67422
|
+
const hasFilteredResult = groupsToRender.length > 0;
|
|
67380
67423
|
const shouldShowNoResult = hasSearch && !hasFilteredResult;
|
|
67381
67424
|
const handleSearchChange = (e) => {
|
|
67382
|
-
|
|
67425
|
+
const value = e.target.value;
|
|
67426
|
+
setLocalSearch(value);
|
|
67427
|
+
onSearchChange?.(value);
|
|
67383
67428
|
};
|
|
67384
67429
|
const handleItemClick = (item) => {
|
|
67385
67430
|
if (multi) {
|
|
@@ -67388,22 +67433,22 @@ const FISMenuSelect = ({ placeholder, groups, size = "md", multi = false, select
|
|
|
67388
67433
|
return;
|
|
67389
67434
|
}
|
|
67390
67435
|
let newValues;
|
|
67391
|
-
if (selectedValues
|
|
67436
|
+
if (selectedValues.includes(item.value)) {
|
|
67392
67437
|
newValues = selectedValues.filter((v) => v !== item.value);
|
|
67393
67438
|
}
|
|
67394
67439
|
else {
|
|
67395
|
-
newValues = [...
|
|
67440
|
+
newValues = [...selectedValues, item.value];
|
|
67396
67441
|
}
|
|
67397
67442
|
onChangeSelected?.(newValues);
|
|
67398
67443
|
return;
|
|
67399
67444
|
}
|
|
67400
67445
|
else {
|
|
67401
|
-
const newValues = selectedValues
|
|
67446
|
+
const newValues = selectedValues[0] === item.value ? [] : [item.value];
|
|
67402
67447
|
onChangeSelected?.(newValues);
|
|
67403
67448
|
onClickMenu?.();
|
|
67404
67449
|
}
|
|
67405
67450
|
};
|
|
67406
|
-
return (
|
|
67451
|
+
return (jsx(DivContainerSC$4, { className: className, children: jsxs(DivWrapperMenuSC, { children: [showInput && !combobox && (jsx(DivSearchSC, { children: jsx(FISInputText, { iconPrefix: jsx(SearchIcon, {}), placeholder: placeholder, value: search, onChange: handleSearchChange }) })), (shouldShowNoResult || noResult) && (jsxs(DivLoaderSC, { children: [jsx(DivIconDataSC, { children: jsx(NoResultIcon, {}) }), jsx(PTitleSC$2, { children: noResultText })] })), noData && (jsxs(DivLoaderSC, { children: [jsx(DivIconDataSC, { children: jsx(NoDataIcon, {}) }), jsx(PTitleSC$2, { children: noDataText })] })), loading && (jsxs(DivLoaderSC, { children: [jsx(FISProgressCircular, { size: size, variant: "indeterminate" }), jsx(PTitleSC$2, { children: loadingText })] })), !shouldShowNoResult && !noData && !loading && (jsxs(Fragment, { children: [jsx(MenuContent, { "$removeSelectedGroup": !!removeSelectedGroup, children: groupsToRender.map((group, index) => (jsxs(DivWrapperSC$4, { children: [index !== 0 && jsx(FISMenuSection, { withDivider: true }), jsx(FISMenuSection, { label: group?.groupLabel }), group.items.map((item, idx) => (jsx(FISMenuItem, { title: item.label, description: item.description, size: size, onClickMenu: () => handleItemClick(item), selected: selectedValues.includes(item.value), type: "select" }, idx)))] }, index))) }), removeSelectedGroup && (jsx(FixedBottomSection, { children: jsx(DivWrapperSC$4, { children: removeSelectedGroup.items.map((item, idx) => (jsx(FISMenuItem, { title: item.label, description: item.description, size: size, onClickMenu: () => onChangeSelected?.([]), type: "select", iconPrefix: jsx(RemoveIcon, {}), negative: true }, idx))) }) }))] }))] }) }));
|
|
67407
67452
|
};
|
|
67408
67453
|
FISMenuSelect.displayName = "FISMenuSelect";
|
|
67409
67454
|
|
|
@@ -70804,7 +70849,7 @@ const FISCombobox = forwardRef(({ className, options, value, disabled = false, t
|
|
|
70804
70849
|
}, [filteredOptions, searchValue]);
|
|
70805
70850
|
return (jsxs(DivWrapperSC$3, { className: className, children: [(textLabel || iconLabel) && (jsx(FISInputLabel, { textLabel: textLabel, required: required, iconLabel: iconLabel, onClickIconLabel: onClickIconLabel })), jsx(DivInputWrapperSC$2, { ref: setReferenceElement, onClick: handleToggle, children: jsx(FISInputField, { ...restProps, ref: ref, iconSuffix: isOpen ? jsx(ArrowUpIcon, {}) : jsx(ArrowDownIcon, {}), value: isOpen && searchValue !== undefined
|
|
70806
70851
|
? searchValue
|
|
70807
|
-
: computedDisplayValue, disabled: disabled, onClickSuffix: handleToggle, onChange: handleInputChange, onKeyDown: handleInputKeyDown }) }), message && (jsx(SpanHintSC$3, { className: classNames({ disabled, negative, positive }), children: message })), multi && value.length > 0 && (jsx(SelectedTagsWrapper$1, { children: jsx(MultipleValue, { options: selectedOptions, onRemove: handleOptionRemove }) })), isOpen && (jsx(Portal, { children: jsx(DivDropdownMenuSC$1, { ref: setPopperElement, style: { ...styles.popper, width: referenceElement?.offsetWidth }, ...attributes.popper, children: jsx(FISMenuSelect, { groups: filteredOptions, placeholder: placeholderSearch, loading: loading, multi: multi, combobox: true, noResult: hasNoResults, noResultText: noResultText, selectedValues: multi ? value : value ? [value] : [], onChangeSelected: (values) => {
|
|
70852
|
+
: computedDisplayValue, disabled: disabled, onClickSuffix: handleToggle, onChange: handleInputChange, onKeyDown: handleInputKeyDown, "$isPointer": true }) }), message && (jsx(SpanHintSC$3, { className: classNames({ disabled, negative, positive }), children: message })), multi && value.length > 0 && (jsx(SelectedTagsWrapper$1, { children: jsx(MultipleValue, { options: selectedOptions, onRemove: handleOptionRemove }) })), isOpen && (jsx(Portal, { children: jsx(DivDropdownMenuSC$1, { ref: setPopperElement, style: { ...styles.popper, width: referenceElement?.offsetWidth }, ...attributes.popper, children: jsx(FISMenuSelect, { groups: filteredOptions, placeholder: placeholderSearch, loading: loading, multi: multi, combobox: true, noResult: hasNoResults, noResultText: noResultText, selectedValues: multi ? value : value ? [value] : [], onChangeSelected: (values) => {
|
|
70808
70853
|
if (multi) {
|
|
70809
70854
|
onChange(values);
|
|
70810
70855
|
}
|
|
@@ -71235,13 +71280,10 @@ const DivHeaderCellContainerSC = styled.div `
|
|
|
71235
71280
|
|
|
71236
71281
|
.right-component-father {
|
|
71237
71282
|
display: flex;
|
|
71283
|
+
align-items: center;
|
|
71238
71284
|
justify-content: center;
|
|
71239
71285
|
width: ${getTheme("com/button/size-xs/icon/size-icon")};
|
|
71240
71286
|
height: ${getTheme("com/button/size-xs/icon/size-icon")};
|
|
71241
|
-
.right-component-child {
|
|
71242
|
-
flex-shrink: 0;
|
|
71243
|
-
align-self: center;
|
|
71244
|
-
}
|
|
71245
71287
|
}
|
|
71246
71288
|
|
|
71247
71289
|
${(props) => {
|
|
@@ -71268,7 +71310,7 @@ const DivHeaderCellContainerSC = styled.div `
|
|
|
71268
71310
|
`;
|
|
71269
71311
|
|
|
71270
71312
|
const FISTableHeaderCell = forwardRef(({ className, label, description, rightComponent, disabled, hasRightDivider = true, hasTruncateLabel = false, onlyIcon = false, textAlign = "left", ...rest }, ref) => {
|
|
71271
|
-
return (jsx(DivHeaderCellContainerSC, { ref: ref, className: classNames("header-cell-container", className), "$textAlign": textAlign, "$disabled": disabled, "$hasTruncateLabel": hasTruncateLabel, "$hasRightDivider": hasRightDivider, "$onlyIcon": onlyIcon, ...rest, children: jsxs("div", { className: "header-cell-content", children: [jsxs("div", { className: "cell-content title", children: [label && jsx("div", { className: "label", children: label }), rightComponent && (jsx("div", { className: "right-component-father", children:
|
|
71313
|
+
return (jsx(DivHeaderCellContainerSC, { ref: ref, className: classNames("header-cell-container", className), "$textAlign": textAlign, "$disabled": disabled, "$hasTruncateLabel": hasTruncateLabel, "$hasRightDivider": hasRightDivider, "$onlyIcon": onlyIcon, ...rest, children: jsxs("div", { className: "header-cell-content", children: [jsxs("div", { className: "cell-content title", children: [label && jsx("div", { className: "label", children: label }), rightComponent && (jsx("div", { className: "right-component-father", children: rightComponent }))] }), description && (jsx("div", { className: "cell-content", children: jsx("div", { className: "description", children: description }) }))] }) }));
|
|
71272
71314
|
});
|
|
71273
71315
|
FISTableHeaderCell.displayName = "FISTableHeaderCell";
|
|
71274
71316
|
|
|
@@ -71578,20 +71620,7 @@ const SORT_ORDERS = {
|
|
|
71578
71620
|
DESCEND: "descend",
|
|
71579
71621
|
NONE: null,
|
|
71580
71622
|
};
|
|
71581
|
-
const
|
|
71582
|
-
margin-top: -2px;
|
|
71583
|
-
.sort-icon {
|
|
71584
|
-
display: flex;
|
|
71585
|
-
flex-direction: column;
|
|
71586
|
-
align-items: center;
|
|
71587
|
-
|
|
71588
|
-
span {
|
|
71589
|
-
width: 6px;
|
|
71590
|
-
height: 5px;
|
|
71591
|
-
}
|
|
71592
|
-
}
|
|
71593
|
-
`;
|
|
71594
|
-
const FISSorter = ({ columnKey, onSort, sortedInfo, colorActive = "#2489e1", UpIcon = RefIcon$f, DownIcon = RefIcon$k, }) => {
|
|
71623
|
+
const FISSorter = ({ columnKey, onSort, sortedInfo, UpIcon = LineArrowsUp, DownIcon = LineArrowsDown, }) => {
|
|
71595
71624
|
const currentOrder = sortedInfo.columnKey === columnKey ? sortedInfo.order : SORT_ORDERS.NONE;
|
|
71596
71625
|
const handleSort = () => {
|
|
71597
71626
|
const newOrder = currentOrder === SORT_ORDERS.ASCEND
|
|
@@ -71601,11 +71630,16 @@ const FISSorter = ({ columnKey, onSort, sortedInfo, colorActive = "#2489e1", UpI
|
|
|
71601
71630
|
: SORT_ORDERS.ASCEND;
|
|
71602
71631
|
onSort(columnKey, newOrder);
|
|
71603
71632
|
};
|
|
71604
|
-
|
|
71605
|
-
|
|
71606
|
-
|
|
71607
|
-
|
|
71608
|
-
|
|
71633
|
+
const renderSortIcon = () => {
|
|
71634
|
+
if (currentOrder === SORT_ORDERS.ASCEND) {
|
|
71635
|
+
return jsx(UpIcon, {});
|
|
71636
|
+
}
|
|
71637
|
+
if (currentOrder === SORT_ORDERS.DESCEND) {
|
|
71638
|
+
return jsx(DownIcon, {});
|
|
71639
|
+
}
|
|
71640
|
+
return jsx(SortTableIcon, {});
|
|
71641
|
+
};
|
|
71642
|
+
return (jsx(FISIconButton, { onClick: handleSort, variant: "tertiary-invisible", size: "xs", icon: renderSortIcon() }));
|
|
71609
71643
|
};
|
|
71610
71644
|
|
|
71611
71645
|
const DivDateRangeContainerSC = styled.div `
|
|
@@ -73002,7 +73036,7 @@ const DivInputWrapperSC = styled.div `
|
|
|
73002
73036
|
width: 100%;
|
|
73003
73037
|
`;
|
|
73004
73038
|
const DivDropdownMenuSC = styled.div `
|
|
73005
|
-
margin-top: ${getTheme("com/select/vertical-gap")};
|
|
73039
|
+
/* margin-top: ${getTheme("com/select/vertical-gap")}; */
|
|
73006
73040
|
`;
|
|
73007
73041
|
const SelectedTagsWrapper = styled.div `
|
|
73008
73042
|
display: flex;
|
|
@@ -73017,6 +73051,7 @@ const SelectedTagsWrapper = styled.div `
|
|
|
73017
73051
|
|
|
73018
73052
|
const InputSC = styled.input `
|
|
73019
73053
|
width: 100%;
|
|
73054
|
+
cursor: pointer;
|
|
73020
73055
|
color: ${getTheme("com/select/field/default/label/color-text/inputed")};
|
|
73021
73056
|
caret-color: ${getTheme("com/typing-cursor/default")};
|
|
73022
73057
|
border: none;
|
|
@@ -73200,12 +73235,17 @@ const DivContainerSC = styled.div `
|
|
|
73200
73235
|
`;
|
|
73201
73236
|
}
|
|
73202
73237
|
}}
|
|
73238
|
+
&:has(${InputSC}:read-only) {
|
|
73239
|
+
cursor: default;
|
|
73240
|
+
}
|
|
73241
|
+
&:has(${InputSC}:disabled) {
|
|
73242
|
+
cursor: not-allowed;
|
|
73243
|
+
}
|
|
73203
73244
|
|
|
73204
73245
|
&:has(${InputSC}:disabled),
|
|
73205
73246
|
&:has(${InputSC}:read-only) {
|
|
73206
73247
|
outline-color: ${getTheme("com/select/field/disable/stroke-color")};
|
|
73207
73248
|
background-color: ${getTheme("com/select/field/disable/background-color")};
|
|
73208
|
-
cursor: not-allowed;
|
|
73209
73249
|
|
|
73210
73250
|
${DivIconPrefixSC} {
|
|
73211
73251
|
color: ${getTheme("com/select/field/disable/color-icon")};
|
|
@@ -73219,11 +73259,7 @@ const DivContainerSC = styled.div `
|
|
|
73219
73259
|
}
|
|
73220
73260
|
}
|
|
73221
73261
|
|
|
73222
|
-
&:has(${InputSC}:
|
|
73223
|
-
cursor: default;
|
|
73224
|
-
}
|
|
73225
|
-
|
|
73226
|
-
&:hover:not(:has(.icon-suffix:hover)) {
|
|
73262
|
+
&:hover:not(:has(.icon-suffix:hover)):not(:has(${InputSC}:disabled)) {
|
|
73227
73263
|
outline-color: ${getTheme("com/select/field/default/border/hover")};
|
|
73228
73264
|
background-color: ${getTheme("com/select/field/default/background/hover")};
|
|
73229
73265
|
|
|
@@ -73255,80 +73291,143 @@ function isMenuSize(value) {
|
|
|
73255
73291
|
return value === "sm" || value === "md";
|
|
73256
73292
|
}
|
|
73257
73293
|
|
|
73258
|
-
const FISSelect = forwardRef(({ className, size = "md", options, value, disabled = false, textLabel = "", iconLabel, required, negative, message, positive, multi, placeholderSearch, loading, onChange, renderOption, onClickIconLabel, displayValue, multiDisplayText, portal, ...restProps }, ref) => {
|
|
73294
|
+
const FISSelect = forwardRef(({ className, size = "md", options, value, disabled = false, textLabel = "", iconLabel, required, negative, message, positive, multi, placeholderSearch, loading, onChange, renderOption, onClickIconLabel, displayValue, multiDisplayText, searchValue, onSearchChange, portal, ...restProps }, ref) => {
|
|
73259
73295
|
const [isOpen, setIsOpen] = useState(false);
|
|
73260
73296
|
const [referenceElement, setReferenceElement] = useState(null);
|
|
73261
73297
|
const [popperElement, setPopperElement] = useState(null);
|
|
73262
|
-
const
|
|
73298
|
+
const popperOptions = useMemo$1(() => ({
|
|
73263
73299
|
modifiers: [
|
|
73264
73300
|
{ name: "preventOverflow", options: { padding: 0, altAxis: true } },
|
|
73301
|
+
{
|
|
73302
|
+
name: "offset",
|
|
73303
|
+
options: {
|
|
73304
|
+
offset: [0, 4],
|
|
73305
|
+
},
|
|
73306
|
+
},
|
|
73265
73307
|
],
|
|
73266
73308
|
placement: "bottom-start",
|
|
73267
73309
|
strategy: "fixed",
|
|
73268
|
-
});
|
|
73269
|
-
const
|
|
73270
|
-
|
|
73271
|
-
setIsOpen((prev) => !prev);
|
|
73272
|
-
}, [disabled]);
|
|
73310
|
+
}), []);
|
|
73311
|
+
const { styles, attributes } = usePopper(referenceElement, popperElement, popperOptions);
|
|
73312
|
+
const originalOptionsRef = useRef(options);
|
|
73273
73313
|
useEffect(() => {
|
|
73274
|
-
|
|
73275
|
-
|
|
73276
|
-
|
|
73277
|
-
|
|
73278
|
-
|
|
73279
|
-
|
|
73280
|
-
}
|
|
73281
|
-
};
|
|
73282
|
-
|
|
73283
|
-
|
|
73284
|
-
|
|
73285
|
-
|
|
73314
|
+
// Keep track of all items including selected ones
|
|
73315
|
+
const allItems = new Map();
|
|
73316
|
+
// Add items from current options
|
|
73317
|
+
options.forEach((group) => {
|
|
73318
|
+
group.items.forEach((item) => {
|
|
73319
|
+
allItems.set(item.value, item);
|
|
73320
|
+
});
|
|
73321
|
+
});
|
|
73322
|
+
// Add selected items that might not be in current options
|
|
73323
|
+
if (multi && Array.isArray(value)) {
|
|
73324
|
+
const selectedItems = originalOptionsRef.current
|
|
73325
|
+
.flatMap((group) => group.items)
|
|
73326
|
+
.filter((item) => value.includes(item.value));
|
|
73327
|
+
selectedItems.forEach((item) => {
|
|
73328
|
+
allItems.set(item.value, item);
|
|
73329
|
+
});
|
|
73330
|
+
}
|
|
73331
|
+
// Update originalOptionsRef with all items
|
|
73332
|
+
originalOptionsRef.current = [
|
|
73333
|
+
{
|
|
73334
|
+
items: Array.from(allItems.values()),
|
|
73335
|
+
},
|
|
73336
|
+
];
|
|
73337
|
+
}, [options, value, multi]);
|
|
73338
|
+
const selectedItems = useMemo$1(() => {
|
|
73339
|
+
const allItems = originalOptionsRef.current.flatMap((group) => group.items);
|
|
73340
|
+
if (multi) {
|
|
73341
|
+
return allItems.filter((item) => value.includes(item.value));
|
|
73342
|
+
}
|
|
73343
|
+
else {
|
|
73344
|
+
const found = allItems.find((item) => item.value === value);
|
|
73345
|
+
return found ? [found] : [];
|
|
73346
|
+
}
|
|
73347
|
+
}, [value, multi]);
|
|
73286
73348
|
const computedDisplayValue = useMemo$1(() => {
|
|
73287
73349
|
if (multi) {
|
|
73288
|
-
const
|
|
73289
|
-
const count = selected.length;
|
|
73350
|
+
const count = value.length;
|
|
73290
73351
|
return multiDisplayText
|
|
73291
73352
|
? multiDisplayText(count)
|
|
73292
73353
|
: `Selected ${count.toString().padStart(2, "0")} option${count !== 1 ? "s" : ""}`;
|
|
73293
73354
|
}
|
|
73294
73355
|
else {
|
|
73295
|
-
|
|
73296
|
-
if (!selected)
|
|
73356
|
+
if (!selectedItems[0])
|
|
73297
73357
|
return "";
|
|
73298
|
-
return displayValue?.(
|
|
73358
|
+
return (displayValue?.(selectedItems[0]) || selectedItems[0].label);
|
|
73299
73359
|
}
|
|
73300
|
-
}, [value,
|
|
73301
|
-
const
|
|
73302
|
-
if (
|
|
73303
|
-
|
|
73304
|
-
|
|
73305
|
-
.map((item) => ({ label: item.label, value: item.value }));
|
|
73306
|
-
}
|
|
73307
|
-
return value
|
|
73308
|
-
? flatItems
|
|
73309
|
-
.filter((item) => item.value === value)
|
|
73310
|
-
.map((item) => ({ label: item.label, value: item.value }))
|
|
73311
|
-
: [];
|
|
73312
|
-
}, [flatItems, value, multi]);
|
|
73360
|
+
}, [value, multi, displayValue, multiDisplayText, selectedItems]);
|
|
73361
|
+
const handleToggle = useCallback(() => {
|
|
73362
|
+
if (!disabled)
|
|
73363
|
+
setIsOpen((prev) => !prev);
|
|
73364
|
+
}, [disabled]);
|
|
73313
73365
|
const handleOptionRemove = useCallback((option) => {
|
|
73314
73366
|
if (multi) {
|
|
73315
73367
|
const newValues = value.filter((v) => v !== option.value);
|
|
73316
73368
|
onChange(newValues);
|
|
73317
73369
|
}
|
|
73318
73370
|
}, [multi, onChange, value]);
|
|
73319
|
-
|
|
73320
|
-
|
|
73321
|
-
|
|
73322
|
-
|
|
73323
|
-
|
|
73324
|
-
|
|
73325
|
-
|
|
73326
|
-
|
|
73327
|
-
|
|
73328
|
-
|
|
73329
|
-
|
|
73330
|
-
|
|
73331
|
-
|
|
73371
|
+
const handleMenuChange = useCallback((values) => {
|
|
73372
|
+
if (multi) {
|
|
73373
|
+
onChange(values);
|
|
73374
|
+
}
|
|
73375
|
+
else {
|
|
73376
|
+
onChange(values[0]);
|
|
73377
|
+
setIsOpen(false);
|
|
73378
|
+
}
|
|
73379
|
+
}, [multi, onChange]);
|
|
73380
|
+
const handleMenuClick = useCallback(() => {
|
|
73381
|
+
if (!multi) {
|
|
73382
|
+
setIsOpen(false);
|
|
73383
|
+
}
|
|
73384
|
+
}, [multi]);
|
|
73385
|
+
const menuProps = useMemo$1(() => ({
|
|
73386
|
+
groups: options,
|
|
73387
|
+
placeholder: placeholderSearch,
|
|
73388
|
+
loading,
|
|
73389
|
+
multi,
|
|
73390
|
+
size: isMenuSize(size) ? size : "md",
|
|
73391
|
+
selectedValues: multi
|
|
73392
|
+
? value
|
|
73393
|
+
: value
|
|
73394
|
+
? [value]
|
|
73395
|
+
: [],
|
|
73396
|
+
onChangeSelected: handleMenuChange,
|
|
73397
|
+
onClickMenu: handleMenuClick,
|
|
73398
|
+
searchValue,
|
|
73399
|
+
onSearchChange,
|
|
73400
|
+
...restProps,
|
|
73401
|
+
}), [
|
|
73402
|
+
options,
|
|
73403
|
+
placeholderSearch,
|
|
73404
|
+
loading,
|
|
73405
|
+
multi,
|
|
73406
|
+
size,
|
|
73407
|
+
value,
|
|
73408
|
+
handleMenuChange,
|
|
73409
|
+
handleMenuClick,
|
|
73410
|
+
searchValue,
|
|
73411
|
+
onSearchChange,
|
|
73412
|
+
restProps,
|
|
73413
|
+
]);
|
|
73414
|
+
useEffect(() => {
|
|
73415
|
+
const handleClickOutside = (event) => {
|
|
73416
|
+
if (referenceElement &&
|
|
73417
|
+
!referenceElement.contains(event.target) &&
|
|
73418
|
+
popperElement &&
|
|
73419
|
+
!popperElement.contains(event.target)) {
|
|
73420
|
+
setIsOpen(false);
|
|
73421
|
+
}
|
|
73422
|
+
};
|
|
73423
|
+
document.addEventListener("mousedown", handleClickOutside);
|
|
73424
|
+
return () => document.removeEventListener("mousedown", handleClickOutside);
|
|
73425
|
+
}, [referenceElement, popperElement]);
|
|
73426
|
+
return (jsxs(DivWrapperSC$1, { className: className, children: [(textLabel || iconLabel) && (jsx(FISInputLabel, { textLabel: textLabel, required: required, iconLabel: iconLabel, onClickIconLabel: onClickIconLabel })), jsx(DivInputWrapperSC, { ref: setReferenceElement, onClick: handleToggle, children: jsx(FISSelectItem, { ...restProps, ref: ref, size: size, iconSuffix: isOpen ? jsx(ArrowUpIcon, {}) : jsx(ArrowDownIcon, {}), value: computedDisplayValue, disabled: disabled, activeDropdown: isOpen }) }), message && (jsx(SpanHintSC$3, { className: classNames({ disabled, negative, positive }), children: message })), multi && value.length > 0 && (jsx(SelectedTagsWrapper, { children: jsx(MultipleValue, { options: selectedItems, onRemove: handleOptionRemove }) })), isOpen && (jsx(Portal, { portal: portal, children: jsx(DivDropdownMenuSC, { ref: setPopperElement, style: {
|
|
73427
|
+
...styles.popper,
|
|
73428
|
+
width: referenceElement?.offsetWidth,
|
|
73429
|
+
zIndex: 9999,
|
|
73430
|
+
}, ...attributes.popper, children: jsx(FISMenuSelect, { ...menuProps }) }) }))] }));
|
|
73332
73431
|
});
|
|
73333
73432
|
FISSelect.displayName = "FISSelect";
|
|
73334
73433
|
|