@lmb-it/kitsconcerto-native 0.1.258 → 0.1.260
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/apps/mobile/src/Core/Dropdown/index.cjs +71 -92
- package/apps/mobile/src/Core/Dropdown/index.cjs.map +1 -1
- package/apps/mobile/src/Core/Dropdown/index.js +74 -95
- package/apps/mobile/src/Core/Dropdown/index.js.map +1 -1
- package/apps/mobile/src/Core/MultiSelect/index.cjs +13 -3
- package/apps/mobile/src/Core/MultiSelect/index.cjs.map +1 -1
- package/apps/mobile/src/Core/MultiSelect/index.js +13 -3
- package/apps/mobile/src/Core/MultiSelect/index.js.map +1 -1
- package/apps/mobile/src/Factory/helpers/useKeyboardHeight.cjs +24 -0
- package/apps/mobile/src/Factory/helpers/useKeyboardHeight.cjs.map +1 -0
- package/apps/mobile/src/Factory/helpers/useKeyboardHeight.js +22 -0
- package/apps/mobile/src/Factory/helpers/useKeyboardHeight.js.map +1 -0
- package/form/selects/Dropdown/index.cjs +6 -1
- package/form/selects/Dropdown/index.cjs.map +1 -1
- package/form/selects/Dropdown/index.js +6 -1
- package/form/selects/Dropdown/index.js.map +1 -1
- package/form/selects/MultiSelect/index.cjs +6 -1
- package/form/selects/MultiSelect/index.cjs.map +1 -1
- package/form/selects/MultiSelect/index.js +6 -1
- package/form/selects/MultiSelect/index.js.map +1 -1
- package/form/selects/helpers/SelectPopupOverlay.cjs +200 -0
- package/form/selects/helpers/SelectPopupOverlay.cjs.map +1 -0
- package/form/selects/helpers/SelectPopupOverlay.js +196 -0
- package/form/selects/helpers/SelectPopupOverlay.js.map +1 -0
- package/form-renderer/components/fields/Select/index.cjs +2 -0
- package/form-renderer/components/fields/Select/index.cjs.map +1 -1
- package/form-renderer/components/fields/Select/index.js +2 -0
- package/form-renderer/components/fields/Select/index.js.map +1 -1
- package/index.d.ts +45 -0
- package/package.json +1 -1
|
@@ -0,0 +1,200 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
|
+
|
|
5
|
+
var jsxRuntime = require('react/jsx-runtime');
|
|
6
|
+
var reactNative = require('react-native');
|
|
7
|
+
var reactNativeSafeAreaContext = require('react-native-safe-area-context');
|
|
8
|
+
require('../../../apps/mobile/src/ui/accordion/index.cjs');
|
|
9
|
+
require('../../../apps/mobile/src/ui/actionsheet/index.cjs');
|
|
10
|
+
require('../../../apps/mobile/src/ui/alert/index.cjs');
|
|
11
|
+
require('../../../apps/mobile/src/ui/alert-dialog/index.cjs');
|
|
12
|
+
require('../../../apps/mobile/src/ui/avatar/index.cjs');
|
|
13
|
+
require('../../../apps/mobile/src/ui/badge/index.cjs');
|
|
14
|
+
require('../../../apps/mobile/src/ui/bottomsheet/index.cjs');
|
|
15
|
+
require('../../../apps/mobile/src/ui/box/index.cjs');
|
|
16
|
+
require('../../../apps/mobile/src/ui/button/index.cjs');
|
|
17
|
+
require('../../../apps/mobile/src/ui/card/index.cjs');
|
|
18
|
+
require('../../../apps/mobile/src/ui/center/index.cjs');
|
|
19
|
+
require('../../../apps/mobile/src/ui/checkbox/index.cjs');
|
|
20
|
+
require('../../../apps/mobile/src/ui/divider/index.cjs');
|
|
21
|
+
require('../../../apps/mobile/src/ui/drawer/index.cjs');
|
|
22
|
+
require('../../../apps/mobile/src/ui/fab/index.cjs');
|
|
23
|
+
require('../../../apps/mobile/src/ui/form-control/index.cjs');
|
|
24
|
+
require('react');
|
|
25
|
+
require('../../../apps/mobile/src/ui/gluestack-ui-provider/config.cjs');
|
|
26
|
+
require('@gluestack-ui/core/overlay/creator');
|
|
27
|
+
require('@gluestack-ui/core/toast/creator');
|
|
28
|
+
require('nativewind');
|
|
29
|
+
require('../../../apps/mobile/src/ui/grid/index.cjs');
|
|
30
|
+
require('../../../apps/mobile/src/ui/heading/index.cjs');
|
|
31
|
+
require('../../../apps/mobile/src/ui/hstack/index.cjs');
|
|
32
|
+
require('../../../apps/mobile/src/ui/icon/index.cjs');
|
|
33
|
+
require('../../../apps/mobile/src/ui/image/index.cjs');
|
|
34
|
+
require('../../../apps/mobile/src/ui/image-background/index.cjs');
|
|
35
|
+
require('../../../apps/mobile/src/ui/input/index.cjs');
|
|
36
|
+
require('../../../apps/mobile/src/ui/link/index.cjs');
|
|
37
|
+
require('../../../apps/mobile/src/ui/menu/index.cjs');
|
|
38
|
+
require('../../../apps/mobile/src/ui/modal/index.cjs');
|
|
39
|
+
require('../../../apps/mobile/src/ui/popover/index.cjs');
|
|
40
|
+
require('../../../apps/mobile/src/ui/portal/index.cjs');
|
|
41
|
+
require('../../../apps/mobile/src/ui/pressable/index.cjs');
|
|
42
|
+
require('../../../apps/mobile/src/ui/progress/index.cjs');
|
|
43
|
+
require('../../../apps/mobile/src/ui/radio/index.cjs');
|
|
44
|
+
require('../../../apps/mobile/src/ui/select/index.cjs');
|
|
45
|
+
require('../../../apps/mobile/src/ui/skeleton/index.cjs');
|
|
46
|
+
require('../../../apps/mobile/src/ui/slider/index.cjs');
|
|
47
|
+
require('../../../apps/mobile/src/ui/spinner/index.cjs');
|
|
48
|
+
require('../../../apps/mobile/src/ui/switch/index.cjs');
|
|
49
|
+
require('../../../apps/mobile/src/ui/table/index.cjs');
|
|
50
|
+
require('../../../apps/mobile/src/ui/text/index.cjs');
|
|
51
|
+
require('../../../apps/mobile/src/ui/textarea/index.cjs');
|
|
52
|
+
require('../../../apps/mobile/src/ui/toast/index.cjs');
|
|
53
|
+
require('../../../apps/mobile/src/ui/tooltip/index.cjs');
|
|
54
|
+
require('../../../apps/mobile/src/ui/vstack/index.cjs');
|
|
55
|
+
require('react-native-reanimated');
|
|
56
|
+
require('react-icons/fa');
|
|
57
|
+
require('react-icons/ai');
|
|
58
|
+
require('react-icons/io');
|
|
59
|
+
require('../../../packages/types/src/Components/Molecules/Form/FilePicker/types/filesTypes.cjs');
|
|
60
|
+
require('yup');
|
|
61
|
+
require('../../../packages/types/src/Css/map/index.cjs');
|
|
62
|
+
require('../../../packages/types/src/Theme/shadows.cjs');
|
|
63
|
+
require('../../../packages/types/src/Theme/defaultTheme.cjs');
|
|
64
|
+
require('../../../packages/types/src/Theme/alphaColors.cjs');
|
|
65
|
+
require('../../../apps/mobile/src/Factory/helpers/cssVarMap.cjs');
|
|
66
|
+
require('../../../apps/mobile/src/Factory/DimensionsContext.cjs');
|
|
67
|
+
var useKeyboardHeight = require('../../../apps/mobile/src/Factory/helpers/useKeyboardHeight.cjs');
|
|
68
|
+
require('i18next');
|
|
69
|
+
require('react-i18next');
|
|
70
|
+
require('../../../apps/mobile/src/Core/AutoComplete/index.cjs');
|
|
71
|
+
require('../../../apps/mobile/src/Core/Dropdown/index.cjs');
|
|
72
|
+
require('../../../apps/mobile/src/Core/MultiSelect/index.cjs');
|
|
73
|
+
require('../../../apps/mobile/src/Core/Trees/components/CoreTree.cjs');
|
|
74
|
+
require('../../../apps/mobile/src/Core/Trees/components/CoreTreeSelect.cjs');
|
|
75
|
+
require('../../../apps/mobile/src/Core/Trees/components/CoreToolbar.cjs');
|
|
76
|
+
require('../../../apps/mobile/src/Core/Paginator/index.cjs');
|
|
77
|
+
require('lucide-react-native');
|
|
78
|
+
require('../../../apps/mobile/src/Core/SelectButton/index.cjs');
|
|
79
|
+
require('../../../apps/mobile/src/Core/DataTable/DataTable.cjs');
|
|
80
|
+
require('../../../apps/mobile/src/Core/Tag/index.cjs');
|
|
81
|
+
require('../../../apps/mobile/src/Core/Badge/index.cjs');
|
|
82
|
+
require('../../../apps/mobile/src/Core/ProgressBar/index.cjs');
|
|
83
|
+
require('../../../apps/mobile/src/Core/Checkbox/index.cjs');
|
|
84
|
+
require('../../../apps/mobile/src/Core/RadioButton/index.cjs');
|
|
85
|
+
require('../../../apps/mobile/src/Core/Input/index.cjs');
|
|
86
|
+
require('../../../apps/mobile/src/Core/Input/Field.cjs');
|
|
87
|
+
require('../../../apps/mobile/src/Core/Input/Slot.cjs');
|
|
88
|
+
var index_native = require('../../../components/overlay/Dialog/index.cjs');
|
|
89
|
+
var locale = require('../../../hooks/locale.cjs');
|
|
90
|
+
require('../../../contexts/DialogContext.cjs');
|
|
91
|
+
var useThemedFont = require('../../../hooks/useThemedFont.cjs');
|
|
92
|
+
var KitsThemeProvider_native = require('../../../contexts/Theme/KitsThemeProvider.cjs');
|
|
93
|
+
|
|
94
|
+
const SHEET_HEIGHT_RATIO = 0.75;
|
|
95
|
+
const SHEET_MIN_HEIGHT = 240;
|
|
96
|
+
const SelectPopupOverlay = ({ visible, onClose, title, children }) => {
|
|
97
|
+
const { resolveToken } = KitsThemeProvider_native.useKitsTheme();
|
|
98
|
+
const { isRTL } = locale.useLanguage();
|
|
99
|
+
const insets = reactNativeSafeAreaContext.useSafeAreaInsets();
|
|
100
|
+
const { height: windowHeight } = reactNative.useWindowDimensions();
|
|
101
|
+
const headingFont = useThemedFont.default("heading");
|
|
102
|
+
const keyboardHeight = useKeyboardHeight.useKeyboardHeight();
|
|
103
|
+
const visibleHeight = windowHeight - Math.max(insets.bottom, keyboardHeight) - insets.top;
|
|
104
|
+
const sheetHeight = Math.max(
|
|
105
|
+
Math.min(SHEET_MIN_HEIGHT, visibleHeight),
|
|
106
|
+
Math.min(Math.round(windowHeight * SHEET_HEIGHT_RATIO), visibleHeight)
|
|
107
|
+
);
|
|
108
|
+
const textColor = resolveToken("text");
|
|
109
|
+
const borderColor = resolveToken("border");
|
|
110
|
+
const grabberColor = resolveToken("gray.300");
|
|
111
|
+
const subtextColor = resolveToken("gray.500");
|
|
112
|
+
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
113
|
+
index_native.default,
|
|
114
|
+
{
|
|
115
|
+
onHide: onClose,
|
|
116
|
+
state: {
|
|
117
|
+
visible,
|
|
118
|
+
position: "bottom",
|
|
119
|
+
// Tap-outside dismiss. `onRequestClose` inside the Dialog gives
|
|
120
|
+
// Android's back button the same route.
|
|
121
|
+
dismissableMask: true,
|
|
122
|
+
onClose,
|
|
123
|
+
style: {
|
|
124
|
+
height: sheetHeight,
|
|
125
|
+
// The keyboard already clears the home indicator, so the
|
|
126
|
+
// inset is only owed when the keyboard is down.
|
|
127
|
+
paddingBottom: keyboardHeight > 0 ? 0 : insets.bottom,
|
|
128
|
+
marginBottom: keyboardHeight
|
|
129
|
+
},
|
|
130
|
+
content: ({ hide }) => /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: styles.root, children: [
|
|
131
|
+
/* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: [styles.grabber, { backgroundColor: grabberColor }] }),
|
|
132
|
+
/* @__PURE__ */ jsxRuntime.jsxs(
|
|
133
|
+
reactNative.View,
|
|
134
|
+
{
|
|
135
|
+
style: [
|
|
136
|
+
styles.header,
|
|
137
|
+
{ borderBottomColor: borderColor },
|
|
138
|
+
// The header mirrors with the reader, like every
|
|
139
|
+
// other row this library draws.
|
|
140
|
+
isRTL ? styles.headerRtl : styles.headerLtr
|
|
141
|
+
],
|
|
142
|
+
children: [
|
|
143
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
144
|
+
reactNative.Text,
|
|
145
|
+
{
|
|
146
|
+
numberOfLines: 1,
|
|
147
|
+
style: [
|
|
148
|
+
styles.title,
|
|
149
|
+
{ color: textColor, fontFamily: headingFont },
|
|
150
|
+
isRTL ? styles.titleRtl : styles.titleLtr
|
|
151
|
+
],
|
|
152
|
+
children: title
|
|
153
|
+
}
|
|
154
|
+
),
|
|
155
|
+
/* @__PURE__ */ jsxRuntime.jsx(reactNative.Pressable, { onPress: hide, hitSlop: 12, accessibilityRole: "button", children: /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: [styles.close, { color: subtextColor }], children: "\u2715" }) })
|
|
156
|
+
]
|
|
157
|
+
}
|
|
158
|
+
),
|
|
159
|
+
children
|
|
160
|
+
] })
|
|
161
|
+
}
|
|
162
|
+
}
|
|
163
|
+
);
|
|
164
|
+
};
|
|
165
|
+
const styles = reactNative.StyleSheet.create({
|
|
166
|
+
root: {
|
|
167
|
+
flex: 1,
|
|
168
|
+
minHeight: 0
|
|
169
|
+
},
|
|
170
|
+
grabber: {
|
|
171
|
+
width: 40,
|
|
172
|
+
height: 4,
|
|
173
|
+
borderRadius: 2,
|
|
174
|
+
alignSelf: "center",
|
|
175
|
+
marginTop: 8,
|
|
176
|
+
marginBottom: 4
|
|
177
|
+
},
|
|
178
|
+
header: {
|
|
179
|
+
alignItems: "center",
|
|
180
|
+
paddingHorizontal: 16,
|
|
181
|
+
paddingVertical: 12,
|
|
182
|
+
borderBottomWidth: 1,
|
|
183
|
+
gap: 12
|
|
184
|
+
},
|
|
185
|
+
headerLtr: { flexDirection: "row" },
|
|
186
|
+
headerRtl: { flexDirection: "row-reverse" },
|
|
187
|
+
title: {
|
|
188
|
+
flex: 1,
|
|
189
|
+
fontSize: 17,
|
|
190
|
+
fontWeight: "700"
|
|
191
|
+
},
|
|
192
|
+
titleLtr: { textAlign: "left", writingDirection: "ltr" },
|
|
193
|
+
titleRtl: { textAlign: "right", writingDirection: "rtl" },
|
|
194
|
+
close: {
|
|
195
|
+
fontSize: 18
|
|
196
|
+
}
|
|
197
|
+
});
|
|
198
|
+
|
|
199
|
+
exports.default = SelectPopupOverlay;
|
|
200
|
+
//# sourceMappingURL=SelectPopupOverlay.cjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"SelectPopupOverlay.cjs","sources":["../../../../../src/form/selects/helpers/SelectPopupOverlay.native.tsx"],"sourcesContent":["import React from 'react';\nimport {Pressable, StyleSheet, Text, View, useWindowDimensions} from 'react-native';\nimport {useSafeAreaInsets} from 'react-native-safe-area-context';\nimport {useKeyboardHeight} from '@lmb-it/kitsconcertomobile';\nimport KitsDialogControlled from '../../../components/overlay/Dialog';\nimport {useKitsTheme} from '../../../contexts/Theme';\nimport {useLanguage} from '../../../hooks';\nimport useThemedFont from '../../../hooks/useThemedFont';\n\n/**\n * The container a select's options live in when `popup` is on.\n *\n * ⛔ THIS IS NOT A SECOND OVERLAY MECHANISM. It is the library's own\n * `KitsDialogControlled` in bottom-sheet position, so the scrim, the slide\n * animation, the safe-area insets, `dismissableMask` and Android's hardware\n * back all come from the one place that already owns them. The only thing\n * this file adds is the header row and the sizing a picker needs.\n *\n * ⛔ IT USES `content` MODE ON PURPOSE. The Dialog's default template puts its\n * children inside a ScrollView with `maxHeight: 400`. A FlatList inside a\n * ScrollView scrolls badly and warns, and a 400pt cap is the very thing the\n * popup exists to escape. `content` replaces the whole header/body/footer\n * template, so the caller's search field can be pinned and its list can own\n * the remaining height.\n *\n * WHY A FIXED FRACTION OF THE SCREEN. The popup's whole purpose is that its\n * height does not depend on where the trigger happens to sit or on whether the\n * keyboard is up. It takes a fixed share of the window, the search field sits\n * at the top of it, and the list takes the rest.\n */\n\nexport interface ISelectPopupOverlayProps {\n /** Open state. */\n visible: boolean;\n /** Called for every dismissal route — the ✕, the scrim, Android back. */\n onClose: () => void;\n /** Title shown beside the close control. Falls back to the field's label. */\n title?: React.ReactNode;\n /** The search field and the list. */\n children: React.ReactNode;\n}\n\n/** Share of the window height the sheet occupies when the keyboard is down. */\nconst SHEET_HEIGHT_RATIO = 0.75;\n/** Never shorter than this, even on a small screen with the keyboard up. */\nconst SHEET_MIN_HEIGHT = 240;\n\nconst SelectPopupOverlay = ({visible, onClose, title, children}: ISelectPopupOverlayProps) => {\n const {resolveToken} = useKitsTheme();\n const {isRTL} = useLanguage();\n const insets = useSafeAreaInsets();\n const {height: windowHeight} = useWindowDimensions();\n /* Raw RN <Text> does not inherit `fontFamily` through View parents, so a\n consumer that swaps the theme font would see it everywhere except here.\n See useThemedFont's own note. */\n const headingFont = useThemedFont('heading');\n const keyboardHeight = useKeyboardHeight();\n\n /*\n * ⛔ \"OWNS THE SCREEN\" MEANS ABOVE THE KEYBOARD, NOT BEHIND IT. A sheet\n * pinned to the bottom at a fixed 75% still has its lower half under the\n * keyboard the moment the search field takes focus, and the list is back to\n * competing for the gap — the exact fault the popup exists to escape, one\n * layer along. The sheet is capped to what is actually visible.\n *\n * The keyboard replaces the bottom inset rather than adding to it: it\n * covers the home indicator.\n */\n const visibleHeight = windowHeight - Math.max(insets.bottom, keyboardHeight) - insets.top;\n const sheetHeight = Math.max(\n Math.min(SHEET_MIN_HEIGHT, visibleHeight),\n Math.min(Math.round(windowHeight * SHEET_HEIGHT_RATIO), visibleHeight),\n );\n\n const textColor = resolveToken('text');\n const borderColor = resolveToken('border');\n const grabberColor = resolveToken('gray.300');\n const subtextColor = resolveToken('gray.500');\n\n return (\n <KitsDialogControlled\n onHide={onClose}\n state={{\n visible,\n position: 'bottom',\n // Tap-outside dismiss. `onRequestClose` inside the Dialog gives\n // Android's back button the same route.\n dismissableMask: true,\n onClose,\n style: {\n height: sheetHeight,\n // The keyboard already clears the home indicator, so the\n // inset is only owed when the keyboard is down.\n paddingBottom: keyboardHeight > 0 ? 0 : insets.bottom,\n marginBottom: keyboardHeight,\n },\n content: ({hide}: {hide: () => void}) => (\n <View style={styles.root}>\n <View style={[styles.grabber, {backgroundColor: grabberColor}]} />\n <View\n style={[\n styles.header,\n {borderBottomColor: borderColor},\n // The header mirrors with the reader, like every\n // other row this library draws.\n isRTL ? styles.headerRtl : styles.headerLtr,\n ]}>\n <Text\n numberOfLines={1}\n style={[\n styles.title,\n {color: textColor, fontFamily: headingFont},\n isRTL ? styles.titleRtl : styles.titleLtr,\n ]}>\n {title}\n </Text>\n <Pressable onPress={hide} hitSlop={12} accessibilityRole=\"button\">\n <Text style={[styles.close, {color: subtextColor}]}>✕</Text>\n </Pressable>\n </View>\n {children}\n </View>\n ),\n }}\n />\n );\n};\n\nconst styles = StyleSheet.create({\n root: {\n flex: 1,\n minHeight: 0,\n },\n grabber: {\n width: 40,\n height: 4,\n borderRadius: 2,\n alignSelf: 'center',\n marginTop: 8,\n marginBottom: 4,\n },\n header: {\n alignItems: 'center',\n paddingHorizontal: 16,\n paddingVertical: 12,\n borderBottomWidth: 1,\n gap: 12,\n },\n headerLtr: {flexDirection: 'row'},\n headerRtl: {flexDirection: 'row-reverse'},\n title: {\n flex: 1,\n fontSize: 17,\n fontWeight: '700',\n },\n titleLtr: {textAlign: 'left', writingDirection: 'ltr'},\n titleRtl: {textAlign: 'right', writingDirection: 'rtl'},\n close: {\n fontSize: 18,\n },\n});\n\nexport default SelectPopupOverlay;\n"],"names":["useKitsTheme","useLanguage","useSafeAreaInsets","useWindowDimensions","useThemedFont","useKeyboardHeight","jsx","KitsDialogControlled","jsxs","View","Text","Pressable","StyleSheet"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA2CA,MAAM,kBAAA,GAAqB,IAAA;AAE3B,MAAM,gBAAA,GAAmB,GAAA;AAEzB,MAAM,qBAAqB,CAAC,EAAC,SAAS,OAAA,EAAS,KAAA,EAAO,UAAQ,KAAgC;AAC1F,EAAA,MAAM,EAAC,YAAA,EAAY,GAAIA,qCAAA,EAAa;AACpC,EAAA,MAAM,EAAC,KAAA,EAAK,GAAIC,kBAAA,EAAY;AAC5B,EAAA,MAAM,SAASC,4CAAA,EAAkB;AACjC,EAAA,MAAM,EAAC,MAAA,EAAQ,YAAA,EAAY,GAAIC,+BAAA,EAAoB;AAInD,EAAA,MAAM,WAAA,GAAcC,sBAAc,SAAS,CAAA;AAC3C,EAAA,MAAM,iBAAiBC,mCAAA,EAAkB;AAYzC,EAAA,MAAM,aAAA,GAAgB,eAAe,IAAA,CAAK,GAAA,CAAI,OAAO,MAAA,EAAQ,cAAc,IAAI,MAAA,CAAO,GAAA;AACtF,EAAA,MAAM,cAAc,IAAA,CAAK,GAAA;AAAA,IACrB,IAAA,CAAK,GAAA,CAAI,gBAAA,EAAkB,aAAa,CAAA;AAAA,IACxC,KAAK,GAAA,CAAI,IAAA,CAAK,MAAM,YAAA,GAAe,kBAAkB,GAAG,aAAa;AAAA,GACzE;AAEA,EAAA,MAAM,SAAA,GAAY,aAAa,MAAM,CAAA;AACrC,EAAA,MAAM,WAAA,GAAc,aAAa,QAAQ,CAAA;AACzC,EAAA,MAAM,YAAA,GAAe,aAAa,UAAU,CAAA;AAC5C,EAAA,MAAM,YAAA,GAAe,aAAa,UAAU,CAAA;AAE5C,EAAA,uBACIC,cAAA;AAAA,IAACC,oBAAA;AAAA,IAAA;AAAA,MACG,MAAA,EAAQ,OAAA;AAAA,MACR,KAAA,EAAO;AAAA,QACH,OAAA;AAAA,QACA,QAAA,EAAU,QAAA;AAAA;AAAA;AAAA,QAGV,eAAA,EAAiB,IAAA;AAAA,QACjB,OAAA;AAAA,QACA,KAAA,EAAO;AAAA,UACH,MAAA,EAAQ,WAAA;AAAA;AAAA;AAAA,UAGR,aAAA,EAAe,cAAA,GAAiB,CAAA,GAAI,CAAA,GAAI,MAAA,CAAO,MAAA;AAAA,UAC/C,YAAA,EAAc;AAAA,SAClB;AAAA,QACA,OAAA,EAAS,CAAC,EAAC,IAAA,uBACPC,eAAA,CAACC,gBAAA,EAAA,EAAK,KAAA,EAAO,MAAA,CAAO,IAAA,EAChB,QAAA,EAAA;AAAA,0BAAAH,cAAA,CAACG,gBAAA,EAAA,EAAK,OAAO,CAAC,MAAA,CAAO,SAAS,EAAC,eAAA,EAAiB,YAAA,EAAa,CAAA,EAAG,CAAA;AAAA,0BAChED,eAAA;AAAA,YAACC,gBAAA;AAAA,YAAA;AAAA,cACG,KAAA,EAAO;AAAA,gBACH,MAAA,CAAO,MAAA;AAAA,gBACP,EAAC,mBAAmB,WAAA,EAAW;AAAA;AAAA;AAAA,gBAG/B,KAAA,GAAQ,MAAA,CAAO,SAAA,GAAY,MAAA,CAAO;AAAA,eACtC;AAAA,cACA,QAAA,EAAA;AAAA,gCAAAH,cAAA;AAAA,kBAACI,gBAAA;AAAA,kBAAA;AAAA,oBACG,aAAA,EAAe,CAAA;AAAA,oBACf,KAAA,EAAO;AAAA,sBACH,MAAA,CAAO,KAAA;AAAA,sBACP,EAAC,KAAA,EAAO,SAAA,EAAW,UAAA,EAAY,WAAA,EAAW;AAAA,sBAC1C,KAAA,GAAQ,MAAA,CAAO,QAAA,GAAW,MAAA,CAAO;AAAA,qBACrC;AAAA,oBACC,QAAA,EAAA;AAAA;AAAA,iBACL;AAAA,gCACAJ,cAAA,CAACK,yBAAU,OAAA,EAAS,IAAA,EAAM,SAAS,EAAA,EAAI,iBAAA,EAAkB,UACrD,QAAA,kBAAAL,cAAA,CAACI,gBAAA,EAAA,EAAK,OAAO,CAAC,MAAA,CAAO,OAAO,EAAC,KAAA,EAAO,cAAa,CAAA,EAAG,oBAAC,CAAA,EACzD;AAAA;AAAA;AAAA,WACJ;AAAA,UACC;AAAA,SAAA,EACL;AAAA;AAER;AAAA,GACJ;AAER;AAEA,MAAM,MAAA,GAASE,uBAAW,MAAA,CAAO;AAAA,EAC7B,IAAA,EAAM;AAAA,IACF,IAAA,EAAM,CAAA;AAAA,IACN,SAAA,EAAW;AAAA,GACf;AAAA,EACA,OAAA,EAAS;AAAA,IACL,KAAA,EAAO,EAAA;AAAA,IACP,MAAA,EAAQ,CAAA;AAAA,IACR,YAAA,EAAc,CAAA;AAAA,IACd,SAAA,EAAW,QAAA;AAAA,IACX,SAAA,EAAW,CAAA;AAAA,IACX,YAAA,EAAc;AAAA,GAClB;AAAA,EACA,MAAA,EAAQ;AAAA,IACJ,UAAA,EAAY,QAAA;AAAA,IACZ,iBAAA,EAAmB,EAAA;AAAA,IACnB,eAAA,EAAiB,EAAA;AAAA,IACjB,iBAAA,EAAmB,CAAA;AAAA,IACnB,GAAA,EAAK;AAAA,GACT;AAAA,EACA,SAAA,EAAW,EAAC,aAAA,EAAe,KAAA,EAAK;AAAA,EAChC,SAAA,EAAW,EAAC,aAAA,EAAe,aAAA,EAAa;AAAA,EACxC,KAAA,EAAO;AAAA,IACH,IAAA,EAAM,CAAA;AAAA,IACN,QAAA,EAAU,EAAA;AAAA,IACV,UAAA,EAAY;AAAA,GAChB;AAAA,EACA,QAAA,EAAU,EAAC,SAAA,EAAW,MAAA,EAAQ,kBAAkB,KAAA,EAAK;AAAA,EACrD,QAAA,EAAU,EAAC,SAAA,EAAW,OAAA,EAAS,kBAAkB,KAAA,EAAK;AAAA,EACtD,KAAA,EAAO;AAAA,IACH,QAAA,EAAU;AAAA;AAElB,CAAC,CAAA;;;;"}
|
|
@@ -0,0 +1,196 @@
|
|
|
1
|
+
import { jsx, jsxs } from 'react/jsx-runtime';
|
|
2
|
+
import { useWindowDimensions, View, Text, Pressable, StyleSheet } from 'react-native';
|
|
3
|
+
import { useSafeAreaInsets } from 'react-native-safe-area-context';
|
|
4
|
+
import '../../../apps/mobile/src/ui/accordion/index.js';
|
|
5
|
+
import '../../../apps/mobile/src/ui/actionsheet/index.js';
|
|
6
|
+
import '../../../apps/mobile/src/ui/alert/index.js';
|
|
7
|
+
import '../../../apps/mobile/src/ui/alert-dialog/index.js';
|
|
8
|
+
import '../../../apps/mobile/src/ui/avatar/index.js';
|
|
9
|
+
import '../../../apps/mobile/src/ui/badge/index.js';
|
|
10
|
+
import '../../../apps/mobile/src/ui/bottomsheet/index.js';
|
|
11
|
+
import '../../../apps/mobile/src/ui/box/index.js';
|
|
12
|
+
import '../../../apps/mobile/src/ui/button/index.js';
|
|
13
|
+
import '../../../apps/mobile/src/ui/card/index.js';
|
|
14
|
+
import '../../../apps/mobile/src/ui/center/index.js';
|
|
15
|
+
import '../../../apps/mobile/src/ui/checkbox/index.js';
|
|
16
|
+
import '../../../apps/mobile/src/ui/divider/index.js';
|
|
17
|
+
import '../../../apps/mobile/src/ui/drawer/index.js';
|
|
18
|
+
import '../../../apps/mobile/src/ui/fab/index.js';
|
|
19
|
+
import '../../../apps/mobile/src/ui/form-control/index.js';
|
|
20
|
+
import 'react';
|
|
21
|
+
import '../../../apps/mobile/src/ui/gluestack-ui-provider/config.js';
|
|
22
|
+
import '@gluestack-ui/core/overlay/creator';
|
|
23
|
+
import '@gluestack-ui/core/toast/creator';
|
|
24
|
+
import 'nativewind';
|
|
25
|
+
import '../../../apps/mobile/src/ui/grid/index.js';
|
|
26
|
+
import '../../../apps/mobile/src/ui/heading/index.js';
|
|
27
|
+
import '../../../apps/mobile/src/ui/hstack/index.js';
|
|
28
|
+
import '../../../apps/mobile/src/ui/icon/index.js';
|
|
29
|
+
import '../../../apps/mobile/src/ui/image/index.js';
|
|
30
|
+
import '../../../apps/mobile/src/ui/image-background/index.js';
|
|
31
|
+
import '../../../apps/mobile/src/ui/input/index.js';
|
|
32
|
+
import '../../../apps/mobile/src/ui/link/index.js';
|
|
33
|
+
import '../../../apps/mobile/src/ui/menu/index.js';
|
|
34
|
+
import '../../../apps/mobile/src/ui/modal/index.js';
|
|
35
|
+
import '../../../apps/mobile/src/ui/popover/index.js';
|
|
36
|
+
import '../../../apps/mobile/src/ui/portal/index.js';
|
|
37
|
+
import '../../../apps/mobile/src/ui/pressable/index.js';
|
|
38
|
+
import '../../../apps/mobile/src/ui/progress/index.js';
|
|
39
|
+
import '../../../apps/mobile/src/ui/radio/index.js';
|
|
40
|
+
import '../../../apps/mobile/src/ui/select/index.js';
|
|
41
|
+
import '../../../apps/mobile/src/ui/skeleton/index.js';
|
|
42
|
+
import '../../../apps/mobile/src/ui/slider/index.js';
|
|
43
|
+
import '../../../apps/mobile/src/ui/spinner/index.js';
|
|
44
|
+
import '../../../apps/mobile/src/ui/switch/index.js';
|
|
45
|
+
import '../../../apps/mobile/src/ui/table/index.js';
|
|
46
|
+
import '../../../apps/mobile/src/ui/text/index.js';
|
|
47
|
+
import '../../../apps/mobile/src/ui/textarea/index.js';
|
|
48
|
+
import '../../../apps/mobile/src/ui/toast/index.js';
|
|
49
|
+
import '../../../apps/mobile/src/ui/tooltip/index.js';
|
|
50
|
+
import '../../../apps/mobile/src/ui/vstack/index.js';
|
|
51
|
+
import 'react-native-reanimated';
|
|
52
|
+
import 'react-icons/fa';
|
|
53
|
+
import 'react-icons/ai';
|
|
54
|
+
import 'react-icons/io';
|
|
55
|
+
import '../../../packages/types/src/Components/Molecules/Form/FilePicker/types/filesTypes.js';
|
|
56
|
+
import 'yup';
|
|
57
|
+
import '../../../packages/types/src/Css/map/index.js';
|
|
58
|
+
import '../../../packages/types/src/Theme/shadows.js';
|
|
59
|
+
import '../../../packages/types/src/Theme/defaultTheme.js';
|
|
60
|
+
import '../../../packages/types/src/Theme/alphaColors.js';
|
|
61
|
+
import '../../../apps/mobile/src/Factory/helpers/cssVarMap.js';
|
|
62
|
+
import '../../../apps/mobile/src/Factory/DimensionsContext.js';
|
|
63
|
+
import { useKeyboardHeight } from '../../../apps/mobile/src/Factory/helpers/useKeyboardHeight.js';
|
|
64
|
+
import 'i18next';
|
|
65
|
+
import 'react-i18next';
|
|
66
|
+
import '../../../apps/mobile/src/Core/AutoComplete/index.js';
|
|
67
|
+
import '../../../apps/mobile/src/Core/Dropdown/index.js';
|
|
68
|
+
import '../../../apps/mobile/src/Core/MultiSelect/index.js';
|
|
69
|
+
import '../../../apps/mobile/src/Core/Trees/components/CoreTree.js';
|
|
70
|
+
import '../../../apps/mobile/src/Core/Trees/components/CoreTreeSelect.js';
|
|
71
|
+
import '../../../apps/mobile/src/Core/Trees/components/CoreToolbar.js';
|
|
72
|
+
import '../../../apps/mobile/src/Core/Paginator/index.js';
|
|
73
|
+
import 'lucide-react-native';
|
|
74
|
+
import '../../../apps/mobile/src/Core/SelectButton/index.js';
|
|
75
|
+
import '../../../apps/mobile/src/Core/DataTable/DataTable.js';
|
|
76
|
+
import '../../../apps/mobile/src/Core/Tag/index.js';
|
|
77
|
+
import '../../../apps/mobile/src/Core/Badge/index.js';
|
|
78
|
+
import '../../../apps/mobile/src/Core/ProgressBar/index.js';
|
|
79
|
+
import '../../../apps/mobile/src/Core/Checkbox/index.js';
|
|
80
|
+
import '../../../apps/mobile/src/Core/RadioButton/index.js';
|
|
81
|
+
import '../../../apps/mobile/src/Core/Input/index.js';
|
|
82
|
+
import '../../../apps/mobile/src/Core/Input/Field.js';
|
|
83
|
+
import '../../../apps/mobile/src/Core/Input/Slot.js';
|
|
84
|
+
import KitsDialogControlled from '../../../components/overlay/Dialog/index.js';
|
|
85
|
+
import { useLanguage } from '../../../hooks/locale.js';
|
|
86
|
+
import '../../../contexts/DialogContext.js';
|
|
87
|
+
import useThemedFont from '../../../hooks/useThemedFont.js';
|
|
88
|
+
import { useKitsTheme } from '../../../contexts/Theme/KitsThemeProvider.js';
|
|
89
|
+
|
|
90
|
+
const SHEET_HEIGHT_RATIO = 0.75;
|
|
91
|
+
const SHEET_MIN_HEIGHT = 240;
|
|
92
|
+
const SelectPopupOverlay = ({ visible, onClose, title, children }) => {
|
|
93
|
+
const { resolveToken } = useKitsTheme();
|
|
94
|
+
const { isRTL } = useLanguage();
|
|
95
|
+
const insets = useSafeAreaInsets();
|
|
96
|
+
const { height: windowHeight } = useWindowDimensions();
|
|
97
|
+
const headingFont = useThemedFont("heading");
|
|
98
|
+
const keyboardHeight = useKeyboardHeight();
|
|
99
|
+
const visibleHeight = windowHeight - Math.max(insets.bottom, keyboardHeight) - insets.top;
|
|
100
|
+
const sheetHeight = Math.max(
|
|
101
|
+
Math.min(SHEET_MIN_HEIGHT, visibleHeight),
|
|
102
|
+
Math.min(Math.round(windowHeight * SHEET_HEIGHT_RATIO), visibleHeight)
|
|
103
|
+
);
|
|
104
|
+
const textColor = resolveToken("text");
|
|
105
|
+
const borderColor = resolveToken("border");
|
|
106
|
+
const grabberColor = resolveToken("gray.300");
|
|
107
|
+
const subtextColor = resolveToken("gray.500");
|
|
108
|
+
return /* @__PURE__ */ jsx(
|
|
109
|
+
KitsDialogControlled,
|
|
110
|
+
{
|
|
111
|
+
onHide: onClose,
|
|
112
|
+
state: {
|
|
113
|
+
visible,
|
|
114
|
+
position: "bottom",
|
|
115
|
+
// Tap-outside dismiss. `onRequestClose` inside the Dialog gives
|
|
116
|
+
// Android's back button the same route.
|
|
117
|
+
dismissableMask: true,
|
|
118
|
+
onClose,
|
|
119
|
+
style: {
|
|
120
|
+
height: sheetHeight,
|
|
121
|
+
// The keyboard already clears the home indicator, so the
|
|
122
|
+
// inset is only owed when the keyboard is down.
|
|
123
|
+
paddingBottom: keyboardHeight > 0 ? 0 : insets.bottom,
|
|
124
|
+
marginBottom: keyboardHeight
|
|
125
|
+
},
|
|
126
|
+
content: ({ hide }) => /* @__PURE__ */ jsxs(View, { style: styles.root, children: [
|
|
127
|
+
/* @__PURE__ */ jsx(View, { style: [styles.grabber, { backgroundColor: grabberColor }] }),
|
|
128
|
+
/* @__PURE__ */ jsxs(
|
|
129
|
+
View,
|
|
130
|
+
{
|
|
131
|
+
style: [
|
|
132
|
+
styles.header,
|
|
133
|
+
{ borderBottomColor: borderColor },
|
|
134
|
+
// The header mirrors with the reader, like every
|
|
135
|
+
// other row this library draws.
|
|
136
|
+
isRTL ? styles.headerRtl : styles.headerLtr
|
|
137
|
+
],
|
|
138
|
+
children: [
|
|
139
|
+
/* @__PURE__ */ jsx(
|
|
140
|
+
Text,
|
|
141
|
+
{
|
|
142
|
+
numberOfLines: 1,
|
|
143
|
+
style: [
|
|
144
|
+
styles.title,
|
|
145
|
+
{ color: textColor, fontFamily: headingFont },
|
|
146
|
+
isRTL ? styles.titleRtl : styles.titleLtr
|
|
147
|
+
],
|
|
148
|
+
children: title
|
|
149
|
+
}
|
|
150
|
+
),
|
|
151
|
+
/* @__PURE__ */ jsx(Pressable, { onPress: hide, hitSlop: 12, accessibilityRole: "button", children: /* @__PURE__ */ jsx(Text, { style: [styles.close, { color: subtextColor }], children: "\u2715" }) })
|
|
152
|
+
]
|
|
153
|
+
}
|
|
154
|
+
),
|
|
155
|
+
children
|
|
156
|
+
] })
|
|
157
|
+
}
|
|
158
|
+
}
|
|
159
|
+
);
|
|
160
|
+
};
|
|
161
|
+
const styles = StyleSheet.create({
|
|
162
|
+
root: {
|
|
163
|
+
flex: 1,
|
|
164
|
+
minHeight: 0
|
|
165
|
+
},
|
|
166
|
+
grabber: {
|
|
167
|
+
width: 40,
|
|
168
|
+
height: 4,
|
|
169
|
+
borderRadius: 2,
|
|
170
|
+
alignSelf: "center",
|
|
171
|
+
marginTop: 8,
|
|
172
|
+
marginBottom: 4
|
|
173
|
+
},
|
|
174
|
+
header: {
|
|
175
|
+
alignItems: "center",
|
|
176
|
+
paddingHorizontal: 16,
|
|
177
|
+
paddingVertical: 12,
|
|
178
|
+
borderBottomWidth: 1,
|
|
179
|
+
gap: 12
|
|
180
|
+
},
|
|
181
|
+
headerLtr: { flexDirection: "row" },
|
|
182
|
+
headerRtl: { flexDirection: "row-reverse" },
|
|
183
|
+
title: {
|
|
184
|
+
flex: 1,
|
|
185
|
+
fontSize: 17,
|
|
186
|
+
fontWeight: "700"
|
|
187
|
+
},
|
|
188
|
+
titleLtr: { textAlign: "left", writingDirection: "ltr" },
|
|
189
|
+
titleRtl: { textAlign: "right", writingDirection: "rtl" },
|
|
190
|
+
close: {
|
|
191
|
+
fontSize: 18
|
|
192
|
+
}
|
|
193
|
+
});
|
|
194
|
+
|
|
195
|
+
export { SelectPopupOverlay as default };
|
|
196
|
+
//# sourceMappingURL=SelectPopupOverlay.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"SelectPopupOverlay.js","sources":["../../../../../src/form/selects/helpers/SelectPopupOverlay.native.tsx"],"sourcesContent":["import React from 'react';\nimport {Pressable, StyleSheet, Text, View, useWindowDimensions} from 'react-native';\nimport {useSafeAreaInsets} from 'react-native-safe-area-context';\nimport {useKeyboardHeight} from '@lmb-it/kitsconcertomobile';\nimport KitsDialogControlled from '../../../components/overlay/Dialog';\nimport {useKitsTheme} from '../../../contexts/Theme';\nimport {useLanguage} from '../../../hooks';\nimport useThemedFont from '../../../hooks/useThemedFont';\n\n/**\n * The container a select's options live in when `popup` is on.\n *\n * ⛔ THIS IS NOT A SECOND OVERLAY MECHANISM. It is the library's own\n * `KitsDialogControlled` in bottom-sheet position, so the scrim, the slide\n * animation, the safe-area insets, `dismissableMask` and Android's hardware\n * back all come from the one place that already owns them. The only thing\n * this file adds is the header row and the sizing a picker needs.\n *\n * ⛔ IT USES `content` MODE ON PURPOSE. The Dialog's default template puts its\n * children inside a ScrollView with `maxHeight: 400`. A FlatList inside a\n * ScrollView scrolls badly and warns, and a 400pt cap is the very thing the\n * popup exists to escape. `content` replaces the whole header/body/footer\n * template, so the caller's search field can be pinned and its list can own\n * the remaining height.\n *\n * WHY A FIXED FRACTION OF THE SCREEN. The popup's whole purpose is that its\n * height does not depend on where the trigger happens to sit or on whether the\n * keyboard is up. It takes a fixed share of the window, the search field sits\n * at the top of it, and the list takes the rest.\n */\n\nexport interface ISelectPopupOverlayProps {\n /** Open state. */\n visible: boolean;\n /** Called for every dismissal route — the ✕, the scrim, Android back. */\n onClose: () => void;\n /** Title shown beside the close control. Falls back to the field's label. */\n title?: React.ReactNode;\n /** The search field and the list. */\n children: React.ReactNode;\n}\n\n/** Share of the window height the sheet occupies when the keyboard is down. */\nconst SHEET_HEIGHT_RATIO = 0.75;\n/** Never shorter than this, even on a small screen with the keyboard up. */\nconst SHEET_MIN_HEIGHT = 240;\n\nconst SelectPopupOverlay = ({visible, onClose, title, children}: ISelectPopupOverlayProps) => {\n const {resolveToken} = useKitsTheme();\n const {isRTL} = useLanguage();\n const insets = useSafeAreaInsets();\n const {height: windowHeight} = useWindowDimensions();\n /* Raw RN <Text> does not inherit `fontFamily` through View parents, so a\n consumer that swaps the theme font would see it everywhere except here.\n See useThemedFont's own note. */\n const headingFont = useThemedFont('heading');\n const keyboardHeight = useKeyboardHeight();\n\n /*\n * ⛔ \"OWNS THE SCREEN\" MEANS ABOVE THE KEYBOARD, NOT BEHIND IT. A sheet\n * pinned to the bottom at a fixed 75% still has its lower half under the\n * keyboard the moment the search field takes focus, and the list is back to\n * competing for the gap — the exact fault the popup exists to escape, one\n * layer along. The sheet is capped to what is actually visible.\n *\n * The keyboard replaces the bottom inset rather than adding to it: it\n * covers the home indicator.\n */\n const visibleHeight = windowHeight - Math.max(insets.bottom, keyboardHeight) - insets.top;\n const sheetHeight = Math.max(\n Math.min(SHEET_MIN_HEIGHT, visibleHeight),\n Math.min(Math.round(windowHeight * SHEET_HEIGHT_RATIO), visibleHeight),\n );\n\n const textColor = resolveToken('text');\n const borderColor = resolveToken('border');\n const grabberColor = resolveToken('gray.300');\n const subtextColor = resolveToken('gray.500');\n\n return (\n <KitsDialogControlled\n onHide={onClose}\n state={{\n visible,\n position: 'bottom',\n // Tap-outside dismiss. `onRequestClose` inside the Dialog gives\n // Android's back button the same route.\n dismissableMask: true,\n onClose,\n style: {\n height: sheetHeight,\n // The keyboard already clears the home indicator, so the\n // inset is only owed when the keyboard is down.\n paddingBottom: keyboardHeight > 0 ? 0 : insets.bottom,\n marginBottom: keyboardHeight,\n },\n content: ({hide}: {hide: () => void}) => (\n <View style={styles.root}>\n <View style={[styles.grabber, {backgroundColor: grabberColor}]} />\n <View\n style={[\n styles.header,\n {borderBottomColor: borderColor},\n // The header mirrors with the reader, like every\n // other row this library draws.\n isRTL ? styles.headerRtl : styles.headerLtr,\n ]}>\n <Text\n numberOfLines={1}\n style={[\n styles.title,\n {color: textColor, fontFamily: headingFont},\n isRTL ? styles.titleRtl : styles.titleLtr,\n ]}>\n {title}\n </Text>\n <Pressable onPress={hide} hitSlop={12} accessibilityRole=\"button\">\n <Text style={[styles.close, {color: subtextColor}]}>✕</Text>\n </Pressable>\n </View>\n {children}\n </View>\n ),\n }}\n />\n );\n};\n\nconst styles = StyleSheet.create({\n root: {\n flex: 1,\n minHeight: 0,\n },\n grabber: {\n width: 40,\n height: 4,\n borderRadius: 2,\n alignSelf: 'center',\n marginTop: 8,\n marginBottom: 4,\n },\n header: {\n alignItems: 'center',\n paddingHorizontal: 16,\n paddingVertical: 12,\n borderBottomWidth: 1,\n gap: 12,\n },\n headerLtr: {flexDirection: 'row'},\n headerRtl: {flexDirection: 'row-reverse'},\n title: {\n flex: 1,\n fontSize: 17,\n fontWeight: '700',\n },\n titleLtr: {textAlign: 'left', writingDirection: 'ltr'},\n titleRtl: {textAlign: 'right', writingDirection: 'rtl'},\n close: {\n fontSize: 18,\n },\n});\n\nexport default SelectPopupOverlay;\n"],"names":[],"mappings":"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"}
|
|
@@ -46,6 +46,7 @@ const Select = ({
|
|
|
46
46
|
filterBy,
|
|
47
47
|
virtualScroll,
|
|
48
48
|
showClear,
|
|
49
|
+
popup,
|
|
49
50
|
// Specific
|
|
50
51
|
withArrow,
|
|
51
52
|
isMultiple,
|
|
@@ -85,6 +86,7 @@ const Select = ({
|
|
|
85
86
|
filterBy,
|
|
86
87
|
virtualScroll,
|
|
87
88
|
showClear,
|
|
89
|
+
popup,
|
|
88
90
|
withArrow,
|
|
89
91
|
isMultiple,
|
|
90
92
|
forceSelection,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.cjs","sources":["../../../../../../src/form-renderer/components/fields/Select/index.tsx"],"sourcesContent":["import React from 'react';\nimport type {FieldValues} from 'react-hook-form';\nimport type {Shapes, UseFieldLogicElementProps} from \"@lmb-it/kitsconcerto-types\";\nimport {FormSelect} from \"../../../../_compat\";\nimport type {IListItem} from \"@lmb-it/kitsconcerto-types\";\n\nexport const Select = <T extends FieldValues>({\n element,\n control,\n getValues,\n fieldLogic,\n }: UseFieldLogicElementProps<T>) => {\n\n const {\n field,\n fieldState,\n label,\n placeholder,\n isDisabled,\n isRequired,\n helperText,\n watchedValues,\n list,\n attached,\n style: elementStyle,\n slots,\n } = fieldLogic;\n\n // Map form element type → FormSelect shape\n const shapeMap: Record<string, Shapes> = {\n Select: 'dropdown',\n Multiselect: 'multiselect',\n Tags: 'autocomplete',\n ListBox: 'listBox',\n TreeSelect: 'treeSelect',\n };\n\n const shape: Shapes = shapeMap[element.type as keyof typeof shapeMap] || 'dropdown';\n\n const {\n // Common\n labelKey,\n valueKey,\n outputValueKey,\n childrenKey,\n withFilter,\n filterBy,\n virtualScroll,\n showClear,\n // Specific\n withArrow,\n isMultiple,\n forceSelection,\n completeMethod,\n valueMode,\n selectionLimit,\n hideError,\n // TreeSelect specific\n onlyParentsWithChildren,\n isStructured,\n } = element as any;\n\n // No key regeneration needed here.\n // SelectContext already handles list changes reactively via its own useEffect([list]).\n // All underlying components (Dropdown, AutoComplete, etc.) react to prop changes natively.\n // A key change would force a full remount — destroying focus state and any user interaction.\n\n return (\n <FormSelect\n {...field}\n id={field.name}\n shape={shape}\n label={label}\n placeholder={placeholder}\n disabled={isDisabled}\n required={isRequired}\n invalid={fieldState.invalid}\n errors={fieldState.error?.message}\n helperText={helperText}\n list={list as IListItem[]}\n hideError={hideError}\n attached={attached}\n style={elementStyle?.input}\n containerStyle={elementStyle?.container}\n slots={slots}\n labelKey={labelKey}\n valueKey={valueKey}\n outputValueKey={outputValueKey}\n childrenKey={childrenKey}\n withFilter={withFilter}\n filterBy={filterBy}\n virtualScroll={virtualScroll}\n showClear={showClear}\n withArrow={withArrow}\n isMultiple={isMultiple}\n forceSelection={forceSelection}\n completeMethod={completeMethod}\n valueMode={valueMode}\n selectionLimit={selectionLimit}\n onlyParentsWithChildren={onlyParentsWithChildren}\n isStructured={isStructured}\n />\n );\n};\n\nexport default Select;\n"],"names":["jsx","FormSelect"],"mappings":";;;;;;;;;;AAMO,MAAM,SAAS,CAAwB;AAAA,EACI,OAAA;AAAA,EACA,OAAA;AAAA,EACA,SAAA;AAAA,EACA;AACJ,CAAA,KAAoC;AAE9E,EAAA,MAAM;AAAA,IACF,KAAA;AAAA,IACA,UAAA;AAAA,IACA,KAAA;AAAA,IACA,WAAA;AAAA,IACA,UAAA;AAAA,IACA,UAAA;AAAA,IACA,UAAA;AAAA,IACA,aAAA;AAAA,IACA,IAAA;AAAA,IACA,QAAA;AAAA,IACA,KAAA,EAAO,YAAA;AAAA,IACP;AAAA,GACJ,GAAI,UAAA;AAGJ,EAAA,MAAM,QAAA,GAAmC;AAAA,IACrC,MAAA,EAAQ,UAAA;AAAA,IACR,WAAA,EAAa,aAAA;AAAA,IACb,IAAA,EAAM,cAAA;AAAA,IACN,OAAA,EAAS,SAAA;AAAA,IACT,UAAA,EAAY;AAAA,GAChB;AAEA,EAAA,MAAM,KAAA,GAAgB,QAAA,CAAS,OAAA,CAAQ,IAA6B,CAAA,IAAK,UAAA;AAEzE,EAAA,MAAM;AAAA;AAAA,IAEF,QAAA;AAAA,IACA,QAAA;AAAA,IACA,cAAA;AAAA,IACA,WAAA;AAAA,IACA,UAAA;AAAA,IACA,QAAA;AAAA,IACA,aAAA;AAAA,IACA,SAAA;AAAA;AAAA,IAEA,SAAA;AAAA,IACA,UAAA;AAAA,IACA,cAAA;AAAA,IACA,cAAA;AAAA,IACA,SAAA;AAAA,IACA,cAAA;AAAA,IACA,SAAA;AAAA;AAAA,IAEA,uBAAA;AAAA,IACA;AAAA,GACJ,GAAI,OAAA;AAOJ,EAAA,uBACIA,cAAA;AAAA,IAACC,qBAAA;AAAA,IAAA;AAAA,MACI,GAAG,KAAA;AAAA,MACJ,IAAI,KAAA,CAAM,IAAA;AAAA,MACV,KAAA;AAAA,MACA,KAAA;AAAA,MACA,WAAA;AAAA,MACA,QAAA,EAAU,UAAA;AAAA,MACV,QAAA,EAAU,UAAA;AAAA,MACV,SAAS,UAAA,CAAW,OAAA;AAAA,MACpB,MAAA,EAAQ,WAAW,KAAA,EAAO,OAAA;AAAA,MAC1B,UAAA;AAAA,MACA,IAAA;AAAA,MACA,SAAA;AAAA,MACA,QAAA;AAAA,MACA,OAAO,YAAA,EAAc,KAAA;AAAA,MACrB,gBAAgB,YAAA,EAAc,SAAA;AAAA,MAC9B,KAAA;AAAA,MACA,QAAA;AAAA,MACA,QAAA;AAAA,MACA,cAAA;AAAA,MACA,WAAA;AAAA,MACA,UAAA;AAAA,MACA,QAAA;AAAA,MACA,aAAA;AAAA,MACA,SAAA;AAAA,MACA,SAAA;AAAA,MACA,UAAA;AAAA,MACA,cAAA;AAAA,MACA,cAAA;AAAA,MACA,SAAA;AAAA,MACA,cAAA;AAAA,MACA,uBAAA;AAAA,MACA;AAAA;AAAA,GACJ;AAER;;;;;"}
|
|
1
|
+
{"version":3,"file":"index.cjs","sources":["../../../../../../src/form-renderer/components/fields/Select/index.tsx"],"sourcesContent":["import React from 'react';\nimport type {FieldValues} from 'react-hook-form';\nimport type {Shapes, UseFieldLogicElementProps} from \"@lmb-it/kitsconcerto-types\";\nimport {FormSelect} from \"../../../../_compat\";\nimport type {IListItem} from \"@lmb-it/kitsconcerto-types\";\n\nexport const Select = <T extends FieldValues>({\n element,\n control,\n getValues,\n fieldLogic,\n }: UseFieldLogicElementProps<T>) => {\n\n const {\n field,\n fieldState,\n label,\n placeholder,\n isDisabled,\n isRequired,\n helperText,\n watchedValues,\n list,\n attached,\n style: elementStyle,\n slots,\n } = fieldLogic;\n\n // Map form element type → FormSelect shape\n const shapeMap: Record<string, Shapes> = {\n Select: 'dropdown',\n Multiselect: 'multiselect',\n Tags: 'autocomplete',\n ListBox: 'listBox',\n TreeSelect: 'treeSelect',\n };\n\n const shape: Shapes = shapeMap[element.type as keyof typeof shapeMap] || 'dropdown';\n\n const {\n // Common\n labelKey,\n valueKey,\n outputValueKey,\n childrenKey,\n withFilter,\n filterBy,\n virtualScroll,\n showClear,\n popup,\n // Specific\n withArrow,\n isMultiple,\n forceSelection,\n completeMethod,\n valueMode,\n selectionLimit,\n hideError,\n // TreeSelect specific\n onlyParentsWithChildren,\n isStructured,\n } = element as any;\n\n // No key regeneration needed here.\n // SelectContext already handles list changes reactively via its own useEffect([list]).\n // All underlying components (Dropdown, AutoComplete, etc.) react to prop changes natively.\n // A key change would force a full remount — destroying focus state and any user interaction.\n\n return (\n <FormSelect\n {...field}\n id={field.name}\n shape={shape}\n label={label}\n placeholder={placeholder}\n disabled={isDisabled}\n required={isRequired}\n invalid={fieldState.invalid}\n errors={fieldState.error?.message}\n helperText={helperText}\n list={list as IListItem[]}\n hideError={hideError}\n attached={attached}\n style={elementStyle?.input}\n containerStyle={elementStyle?.container}\n slots={slots}\n labelKey={labelKey}\n valueKey={valueKey}\n outputValueKey={outputValueKey}\n childrenKey={childrenKey}\n withFilter={withFilter}\n filterBy={filterBy}\n virtualScroll={virtualScroll}\n showClear={showClear}\n /* ⛔ A PROP IS ONLY AS GOOD AS ITS NARROWEST GATE. This renderer\n forwards a NAMED list, not a spread, so a select prop that is not\n listed here never reaches the component however correct the rest\n of the chain is. `popup` was added to the type, the wrapper and\n the native component and still did nothing, because of this line's\n absence. */\n popup={popup}\n withArrow={withArrow}\n isMultiple={isMultiple}\n forceSelection={forceSelection}\n completeMethod={completeMethod}\n valueMode={valueMode}\n selectionLimit={selectionLimit}\n onlyParentsWithChildren={onlyParentsWithChildren}\n isStructured={isStructured}\n />\n );\n};\n\nexport default Select;\n"],"names":["jsx","FormSelect"],"mappings":";;;;;;;;;;AAMO,MAAM,SAAS,CAAwB;AAAA,EACI,OAAA;AAAA,EACA,OAAA;AAAA,EACA,SAAA;AAAA,EACA;AACJ,CAAA,KAAoC;AAE9E,EAAA,MAAM;AAAA,IACF,KAAA;AAAA,IACA,UAAA;AAAA,IACA,KAAA;AAAA,IACA,WAAA;AAAA,IACA,UAAA;AAAA,IACA,UAAA;AAAA,IACA,UAAA;AAAA,IACA,aAAA;AAAA,IACA,IAAA;AAAA,IACA,QAAA;AAAA,IACA,KAAA,EAAO,YAAA;AAAA,IACP;AAAA,GACJ,GAAI,UAAA;AAGJ,EAAA,MAAM,QAAA,GAAmC;AAAA,IACrC,MAAA,EAAQ,UAAA;AAAA,IACR,WAAA,EAAa,aAAA;AAAA,IACb,IAAA,EAAM,cAAA;AAAA,IACN,OAAA,EAAS,SAAA;AAAA,IACT,UAAA,EAAY;AAAA,GAChB;AAEA,EAAA,MAAM,KAAA,GAAgB,QAAA,CAAS,OAAA,CAAQ,IAA6B,CAAA,IAAK,UAAA;AAEzE,EAAA,MAAM;AAAA;AAAA,IAEF,QAAA;AAAA,IACA,QAAA;AAAA,IACA,cAAA;AAAA,IACA,WAAA;AAAA,IACA,UAAA;AAAA,IACA,QAAA;AAAA,IACA,aAAA;AAAA,IACA,SAAA;AAAA,IACA,KAAA;AAAA;AAAA,IAEA,SAAA;AAAA,IACA,UAAA;AAAA,IACA,cAAA;AAAA,IACA,cAAA;AAAA,IACA,SAAA;AAAA,IACA,cAAA;AAAA,IACA,SAAA;AAAA;AAAA,IAEA,uBAAA;AAAA,IACA;AAAA,GACJ,GAAI,OAAA;AAOJ,EAAA,uBACIA,cAAA;AAAA,IAACC,qBAAA;AAAA,IAAA;AAAA,MACI,GAAG,KAAA;AAAA,MACJ,IAAI,KAAA,CAAM,IAAA;AAAA,MACV,KAAA;AAAA,MACA,KAAA;AAAA,MACA,WAAA;AAAA,MACA,QAAA,EAAU,UAAA;AAAA,MACV,QAAA,EAAU,UAAA;AAAA,MACV,SAAS,UAAA,CAAW,OAAA;AAAA,MACpB,MAAA,EAAQ,WAAW,KAAA,EAAO,OAAA;AAAA,MAC1B,UAAA;AAAA,MACA,IAAA;AAAA,MACA,SAAA;AAAA,MACA,QAAA;AAAA,MACA,OAAO,YAAA,EAAc,KAAA;AAAA,MACrB,gBAAgB,YAAA,EAAc,SAAA;AAAA,MAC9B,KAAA;AAAA,MACA,QAAA;AAAA,MACA,QAAA;AAAA,MACA,cAAA;AAAA,MACA,WAAA;AAAA,MACA,UAAA;AAAA,MACA,QAAA;AAAA,MACA,aAAA;AAAA,MACA,SAAA;AAAA,MAOA,KAAA;AAAA,MACA,SAAA;AAAA,MACA,UAAA;AAAA,MACA,cAAA;AAAA,MACA,cAAA;AAAA,MACA,SAAA;AAAA,MACA,cAAA;AAAA,MACA,uBAAA;AAAA,MACA;AAAA;AAAA,GACJ;AAER;;;;;"}
|
|
@@ -42,6 +42,7 @@ const Select = ({
|
|
|
42
42
|
filterBy,
|
|
43
43
|
virtualScroll,
|
|
44
44
|
showClear,
|
|
45
|
+
popup,
|
|
45
46
|
// Specific
|
|
46
47
|
withArrow,
|
|
47
48
|
isMultiple,
|
|
@@ -81,6 +82,7 @@ const Select = ({
|
|
|
81
82
|
filterBy,
|
|
82
83
|
virtualScroll,
|
|
83
84
|
showClear,
|
|
85
|
+
popup,
|
|
84
86
|
withArrow,
|
|
85
87
|
isMultiple,
|
|
86
88
|
forceSelection,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":["../../../../../../src/form-renderer/components/fields/Select/index.tsx"],"sourcesContent":["import React from 'react';\nimport type {FieldValues} from 'react-hook-form';\nimport type {Shapes, UseFieldLogicElementProps} from \"@lmb-it/kitsconcerto-types\";\nimport {FormSelect} from \"../../../../_compat\";\nimport type {IListItem} from \"@lmb-it/kitsconcerto-types\";\n\nexport const Select = <T extends FieldValues>({\n element,\n control,\n getValues,\n fieldLogic,\n }: UseFieldLogicElementProps<T>) => {\n\n const {\n field,\n fieldState,\n label,\n placeholder,\n isDisabled,\n isRequired,\n helperText,\n watchedValues,\n list,\n attached,\n style: elementStyle,\n slots,\n } = fieldLogic;\n\n // Map form element type → FormSelect shape\n const shapeMap: Record<string, Shapes> = {\n Select: 'dropdown',\n Multiselect: 'multiselect',\n Tags: 'autocomplete',\n ListBox: 'listBox',\n TreeSelect: 'treeSelect',\n };\n\n const shape: Shapes = shapeMap[element.type as keyof typeof shapeMap] || 'dropdown';\n\n const {\n // Common\n labelKey,\n valueKey,\n outputValueKey,\n childrenKey,\n withFilter,\n filterBy,\n virtualScroll,\n showClear,\n // Specific\n withArrow,\n isMultiple,\n forceSelection,\n completeMethod,\n valueMode,\n selectionLimit,\n hideError,\n // TreeSelect specific\n onlyParentsWithChildren,\n isStructured,\n } = element as any;\n\n // No key regeneration needed here.\n // SelectContext already handles list changes reactively via its own useEffect([list]).\n // All underlying components (Dropdown, AutoComplete, etc.) react to prop changes natively.\n // A key change would force a full remount — destroying focus state and any user interaction.\n\n return (\n <FormSelect\n {...field}\n id={field.name}\n shape={shape}\n label={label}\n placeholder={placeholder}\n disabled={isDisabled}\n required={isRequired}\n invalid={fieldState.invalid}\n errors={fieldState.error?.message}\n helperText={helperText}\n list={list as IListItem[]}\n hideError={hideError}\n attached={attached}\n style={elementStyle?.input}\n containerStyle={elementStyle?.container}\n slots={slots}\n labelKey={labelKey}\n valueKey={valueKey}\n outputValueKey={outputValueKey}\n childrenKey={childrenKey}\n withFilter={withFilter}\n filterBy={filterBy}\n virtualScroll={virtualScroll}\n showClear={showClear}\n withArrow={withArrow}\n isMultiple={isMultiple}\n forceSelection={forceSelection}\n completeMethod={completeMethod}\n valueMode={valueMode}\n selectionLimit={selectionLimit}\n onlyParentsWithChildren={onlyParentsWithChildren}\n isStructured={isStructured}\n />\n );\n};\n\nexport default Select;\n"],"names":[],"mappings":";;;;;;AAMO,MAAM,SAAS,CAAwB;AAAA,EACI,OAAA;AAAA,EACA,OAAA;AAAA,EACA,SAAA;AAAA,EACA;AACJ,CAAA,KAAoC;AAE9E,EAAA,MAAM;AAAA,IACF,KAAA;AAAA,IACA,UAAA;AAAA,IACA,KAAA;AAAA,IACA,WAAA;AAAA,IACA,UAAA;AAAA,IACA,UAAA;AAAA,IACA,UAAA;AAAA,IACA,aAAA;AAAA,IACA,IAAA;AAAA,IACA,QAAA;AAAA,IACA,KAAA,EAAO,YAAA;AAAA,IACP;AAAA,GACJ,GAAI,UAAA;AAGJ,EAAA,MAAM,QAAA,GAAmC;AAAA,IACrC,MAAA,EAAQ,UAAA;AAAA,IACR,WAAA,EAAa,aAAA;AAAA,IACb,IAAA,EAAM,cAAA;AAAA,IACN,OAAA,EAAS,SAAA;AAAA,IACT,UAAA,EAAY;AAAA,GAChB;AAEA,EAAA,MAAM,KAAA,GAAgB,QAAA,CAAS,OAAA,CAAQ,IAA6B,CAAA,IAAK,UAAA;AAEzE,EAAA,MAAM;AAAA;AAAA,IAEF,QAAA;AAAA,IACA,QAAA;AAAA,IACA,cAAA;AAAA,IACA,WAAA;AAAA,IACA,UAAA;AAAA,IACA,QAAA;AAAA,IACA,aAAA;AAAA,IACA,SAAA;AAAA;AAAA,IAEA,SAAA;AAAA,IACA,UAAA;AAAA,IACA,cAAA;AAAA,IACA,cAAA;AAAA,IACA,SAAA;AAAA,IACA,cAAA;AAAA,IACA,SAAA;AAAA;AAAA,IAEA,uBAAA;AAAA,IACA;AAAA,GACJ,GAAI,OAAA;AAOJ,EAAA,uBACI,GAAA;AAAA,IAAC,UAAA;AAAA,IAAA;AAAA,MACI,GAAG,KAAA;AAAA,MACJ,IAAI,KAAA,CAAM,IAAA;AAAA,MACV,KAAA;AAAA,MACA,KAAA;AAAA,MACA,WAAA;AAAA,MACA,QAAA,EAAU,UAAA;AAAA,MACV,QAAA,EAAU,UAAA;AAAA,MACV,SAAS,UAAA,CAAW,OAAA;AAAA,MACpB,MAAA,EAAQ,WAAW,KAAA,EAAO,OAAA;AAAA,MAC1B,UAAA;AAAA,MACA,IAAA;AAAA,MACA,SAAA;AAAA,MACA,QAAA;AAAA,MACA,OAAO,YAAA,EAAc,KAAA;AAAA,MACrB,gBAAgB,YAAA,EAAc,SAAA;AAAA,MAC9B,KAAA;AAAA,MACA,QAAA;AAAA,MACA,QAAA;AAAA,MACA,cAAA;AAAA,MACA,WAAA;AAAA,MACA,UAAA;AAAA,MACA,QAAA;AAAA,MACA,aAAA;AAAA,MACA,SAAA;AAAA,MACA,SAAA;AAAA,MACA,UAAA;AAAA,MACA,cAAA;AAAA,MACA,cAAA;AAAA,MACA,SAAA;AAAA,MACA,cAAA;AAAA,MACA,uBAAA;AAAA,MACA;AAAA;AAAA,GACJ;AAER;;;;"}
|
|
1
|
+
{"version":3,"file":"index.js","sources":["../../../../../../src/form-renderer/components/fields/Select/index.tsx"],"sourcesContent":["import React from 'react';\nimport type {FieldValues} from 'react-hook-form';\nimport type {Shapes, UseFieldLogicElementProps} from \"@lmb-it/kitsconcerto-types\";\nimport {FormSelect} from \"../../../../_compat\";\nimport type {IListItem} from \"@lmb-it/kitsconcerto-types\";\n\nexport const Select = <T extends FieldValues>({\n element,\n control,\n getValues,\n fieldLogic,\n }: UseFieldLogicElementProps<T>) => {\n\n const {\n field,\n fieldState,\n label,\n placeholder,\n isDisabled,\n isRequired,\n helperText,\n watchedValues,\n list,\n attached,\n style: elementStyle,\n slots,\n } = fieldLogic;\n\n // Map form element type → FormSelect shape\n const shapeMap: Record<string, Shapes> = {\n Select: 'dropdown',\n Multiselect: 'multiselect',\n Tags: 'autocomplete',\n ListBox: 'listBox',\n TreeSelect: 'treeSelect',\n };\n\n const shape: Shapes = shapeMap[element.type as keyof typeof shapeMap] || 'dropdown';\n\n const {\n // Common\n labelKey,\n valueKey,\n outputValueKey,\n childrenKey,\n withFilter,\n filterBy,\n virtualScroll,\n showClear,\n popup,\n // Specific\n withArrow,\n isMultiple,\n forceSelection,\n completeMethod,\n valueMode,\n selectionLimit,\n hideError,\n // TreeSelect specific\n onlyParentsWithChildren,\n isStructured,\n } = element as any;\n\n // No key regeneration needed here.\n // SelectContext already handles list changes reactively via its own useEffect([list]).\n // All underlying components (Dropdown, AutoComplete, etc.) react to prop changes natively.\n // A key change would force a full remount — destroying focus state and any user interaction.\n\n return (\n <FormSelect\n {...field}\n id={field.name}\n shape={shape}\n label={label}\n placeholder={placeholder}\n disabled={isDisabled}\n required={isRequired}\n invalid={fieldState.invalid}\n errors={fieldState.error?.message}\n helperText={helperText}\n list={list as IListItem[]}\n hideError={hideError}\n attached={attached}\n style={elementStyle?.input}\n containerStyle={elementStyle?.container}\n slots={slots}\n labelKey={labelKey}\n valueKey={valueKey}\n outputValueKey={outputValueKey}\n childrenKey={childrenKey}\n withFilter={withFilter}\n filterBy={filterBy}\n virtualScroll={virtualScroll}\n showClear={showClear}\n /* ⛔ A PROP IS ONLY AS GOOD AS ITS NARROWEST GATE. This renderer\n forwards a NAMED list, not a spread, so a select prop that is not\n listed here never reaches the component however correct the rest\n of the chain is. `popup` was added to the type, the wrapper and\n the native component and still did nothing, because of this line's\n absence. */\n popup={popup}\n withArrow={withArrow}\n isMultiple={isMultiple}\n forceSelection={forceSelection}\n completeMethod={completeMethod}\n valueMode={valueMode}\n selectionLimit={selectionLimit}\n onlyParentsWithChildren={onlyParentsWithChildren}\n isStructured={isStructured}\n />\n );\n};\n\nexport default Select;\n"],"names":[],"mappings":";;;;;;AAMO,MAAM,SAAS,CAAwB;AAAA,EACI,OAAA;AAAA,EACA,OAAA;AAAA,EACA,SAAA;AAAA,EACA;AACJ,CAAA,KAAoC;AAE9E,EAAA,MAAM;AAAA,IACF,KAAA;AAAA,IACA,UAAA;AAAA,IACA,KAAA;AAAA,IACA,WAAA;AAAA,IACA,UAAA;AAAA,IACA,UAAA;AAAA,IACA,UAAA;AAAA,IACA,aAAA;AAAA,IACA,IAAA;AAAA,IACA,QAAA;AAAA,IACA,KAAA,EAAO,YAAA;AAAA,IACP;AAAA,GACJ,GAAI,UAAA;AAGJ,EAAA,MAAM,QAAA,GAAmC;AAAA,IACrC,MAAA,EAAQ,UAAA;AAAA,IACR,WAAA,EAAa,aAAA;AAAA,IACb,IAAA,EAAM,cAAA;AAAA,IACN,OAAA,EAAS,SAAA;AAAA,IACT,UAAA,EAAY;AAAA,GAChB;AAEA,EAAA,MAAM,KAAA,GAAgB,QAAA,CAAS,OAAA,CAAQ,IAA6B,CAAA,IAAK,UAAA;AAEzE,EAAA,MAAM;AAAA;AAAA,IAEF,QAAA;AAAA,IACA,QAAA;AAAA,IACA,cAAA;AAAA,IACA,WAAA;AAAA,IACA,UAAA;AAAA,IACA,QAAA;AAAA,IACA,aAAA;AAAA,IACA,SAAA;AAAA,IACA,KAAA;AAAA;AAAA,IAEA,SAAA;AAAA,IACA,UAAA;AAAA,IACA,cAAA;AAAA,IACA,cAAA;AAAA,IACA,SAAA;AAAA,IACA,cAAA;AAAA,IACA,SAAA;AAAA;AAAA,IAEA,uBAAA;AAAA,IACA;AAAA,GACJ,GAAI,OAAA;AAOJ,EAAA,uBACI,GAAA;AAAA,IAAC,UAAA;AAAA,IAAA;AAAA,MACI,GAAG,KAAA;AAAA,MACJ,IAAI,KAAA,CAAM,IAAA;AAAA,MACV,KAAA;AAAA,MACA,KAAA;AAAA,MACA,WAAA;AAAA,MACA,QAAA,EAAU,UAAA;AAAA,MACV,QAAA,EAAU,UAAA;AAAA,MACV,SAAS,UAAA,CAAW,OAAA;AAAA,MACpB,MAAA,EAAQ,WAAW,KAAA,EAAO,OAAA;AAAA,MAC1B,UAAA;AAAA,MACA,IAAA;AAAA,MACA,SAAA;AAAA,MACA,QAAA;AAAA,MACA,OAAO,YAAA,EAAc,KAAA;AAAA,MACrB,gBAAgB,YAAA,EAAc,SAAA;AAAA,MAC9B,KAAA;AAAA,MACA,QAAA;AAAA,MACA,QAAA;AAAA,MACA,cAAA;AAAA,MACA,WAAA;AAAA,MACA,UAAA;AAAA,MACA,QAAA;AAAA,MACA,aAAA;AAAA,MACA,SAAA;AAAA,MAOA,KAAA;AAAA,MACA,SAAA;AAAA,MACA,UAAA;AAAA,MACA,cAAA;AAAA,MACA,cAAA;AAAA,MACA,SAAA;AAAA,MACA,cAAA;AAAA,MACA,uBAAA;AAAA,MACA;AAAA;AAAA,GACJ;AAER;;;;"}
|
package/index.d.ts
CHANGED
|
@@ -1785,6 +1785,38 @@ export interface ISelectBase<T extends FieldValues = any> extends IElementBase<T
|
|
|
1785
1785
|
filterBy?: string;
|
|
1786
1786
|
emptyFilterMessage?: ReactNode;
|
|
1787
1787
|
virtualScroll?: boolean;
|
|
1788
|
+
/**
|
|
1789
|
+
* Open the options in a popup that owns the screen instead of a panel
|
|
1790
|
+
* anchored to the trigger.
|
|
1791
|
+
*
|
|
1792
|
+
* ⛔ IT LIVES HERE, ON THE ELEMENT BASE, AND FOR ONE RELEASE IT DID NOT.
|
|
1793
|
+
* 0.1.259 declared it on `ISelectCore` — the select COMPONENT's props — and
|
|
1794
|
+
* shipped. The runtime was right end to end: `form-renderer`'s Select field
|
|
1795
|
+
* pulls `popup` off the element and hands it to the select. But every select
|
|
1796
|
+
* in a consumer's form is a form ELEMENT, and an element reads THIS
|
|
1797
|
+
* interface, so `popup: true` in a form config was TS2353 and nobody could
|
|
1798
|
+
* turn the feature on. AlphaMatch tried it on six pickers, took six errors,
|
|
1799
|
+
* and reverted the lot.
|
|
1800
|
+
*
|
|
1801
|
+
* ⚠️ THE TWO BASES MUST STAY IN STEP. `ISelectCore` is the component side of
|
|
1802
|
+
* this same decision and carries `popup` for every shape; this is its
|
|
1803
|
+
* element-side mirror. A prop on one and not the other is what a consumer
|
|
1804
|
+
* meets as "the feature exists and I cannot use it".
|
|
1805
|
+
*
|
|
1806
|
+
* ── WHAT THE RUNTIME HONOURS ───────────────────────────────────────────
|
|
1807
|
+
* The NATIVE Dropdown and the NATIVE MultiSelect, through
|
|
1808
|
+
* `form/selects/helpers/SelectPopupOverlay.native.tsx`. ⚠️ Tags, ListBox,
|
|
1809
|
+
* TreeSelect and CascadeSelect accept it and draw nothing, and so does every
|
|
1810
|
+
* web build — on web the options render in PrimeReact's own overlay, which
|
|
1811
|
+
* is not boxed in by an on-screen keyboard, so there is no fault to escape.
|
|
1812
|
+
*
|
|
1813
|
+
* ⚠️ ACCEPTED-AND-INERT IS DELIBERATE, NOT AN OVERSIGHT: a shared element
|
|
1814
|
+
* array stays valid on both surfaces rather than making a consumer branch on
|
|
1815
|
+
* platform. Same contract, same wording, as `ISelectCore`.
|
|
1816
|
+
*
|
|
1817
|
+
* Default false: every existing consumer keeps the anchored panel.
|
|
1818
|
+
*/
|
|
1819
|
+
popup?: boolean;
|
|
1788
1820
|
}
|
|
1789
1821
|
export interface IFormSelect<T extends FieldValues = any> extends ISelectBase<T> {
|
|
1790
1822
|
type: 'Select';
|
|
@@ -5446,6 +5478,19 @@ export interface ISelectCore<TStyle = any, TLocalProps = any> extends IFormSingl
|
|
|
5446
5478
|
filterBy?: string;
|
|
5447
5479
|
virtualScroll?: boolean | any;
|
|
5448
5480
|
emptyFilterMessage?: ReactNode;
|
|
5481
|
+
/**
|
|
5482
|
+
* Open the options in a popup that owns the screen instead of a panel
|
|
5483
|
+
* anchored to the trigger.
|
|
5484
|
+
*
|
|
5485
|
+
* ⛔ NATIVE ONLY, BY DESIGN. On web the options render in PrimeReact's own
|
|
5486
|
+
* overlay, which is not boxed in by an on-screen keyboard — there is no
|
|
5487
|
+
* fault there to escape. The prop is accepted and ignored on web so a
|
|
5488
|
+
* shared element array stays valid on both surfaces, rather than a
|
|
5489
|
+
* consumer having to branch on platform.
|
|
5490
|
+
*
|
|
5491
|
+
* Default false: every existing consumer keeps the anchored panel.
|
|
5492
|
+
*/
|
|
5493
|
+
popup?: boolean;
|
|
5449
5494
|
showClear?: boolean;
|
|
5450
5495
|
itemTemplate?: (item: any) => ReactNode;
|
|
5451
5496
|
className?: string;
|