@lmb-it/kitsconcerto-native 0.1.258 → 0.1.259

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.
Files changed (30) hide show
  1. package/apps/mobile/src/Core/Dropdown/index.cjs +71 -92
  2. package/apps/mobile/src/Core/Dropdown/index.cjs.map +1 -1
  3. package/apps/mobile/src/Core/Dropdown/index.js +74 -95
  4. package/apps/mobile/src/Core/Dropdown/index.js.map +1 -1
  5. package/apps/mobile/src/Core/MultiSelect/index.cjs +13 -3
  6. package/apps/mobile/src/Core/MultiSelect/index.cjs.map +1 -1
  7. package/apps/mobile/src/Core/MultiSelect/index.js +13 -3
  8. package/apps/mobile/src/Core/MultiSelect/index.js.map +1 -1
  9. package/apps/mobile/src/Factory/helpers/useKeyboardHeight.cjs +24 -0
  10. package/apps/mobile/src/Factory/helpers/useKeyboardHeight.cjs.map +1 -0
  11. package/apps/mobile/src/Factory/helpers/useKeyboardHeight.js +22 -0
  12. package/apps/mobile/src/Factory/helpers/useKeyboardHeight.js.map +1 -0
  13. package/form/selects/Dropdown/index.cjs +6 -1
  14. package/form/selects/Dropdown/index.cjs.map +1 -1
  15. package/form/selects/Dropdown/index.js +6 -1
  16. package/form/selects/Dropdown/index.js.map +1 -1
  17. package/form/selects/MultiSelect/index.cjs +6 -1
  18. package/form/selects/MultiSelect/index.cjs.map +1 -1
  19. package/form/selects/MultiSelect/index.js +6 -1
  20. package/form/selects/MultiSelect/index.js.map +1 -1
  21. package/form/selects/helpers/SelectPopupOverlay.cjs +200 -0
  22. package/form/selects/helpers/SelectPopupOverlay.cjs.map +1 -0
  23. package/form/selects/helpers/SelectPopupOverlay.js +196 -0
  24. package/form/selects/helpers/SelectPopupOverlay.js.map +1 -0
  25. package/form-renderer/components/fields/Select/index.cjs +2 -0
  26. package/form-renderer/components/fields/Select/index.cjs.map +1 -1
  27. package/form-renderer/components/fields/Select/index.js +2 -0
  28. package/form-renderer/components/fields/Select/index.js.map +1 -1
  29. package/index.d.ts +13 -0
  30. package/package.json +1 -1
package/form/selects/helpers/SelectPopupOverlay.cjs ADDED
@@ -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
package/form/selects/helpers/SelectPopupOverlay.cjs.map ADDED
@@ -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;;;;"}
package/form/selects/helpers/SelectPopupOverlay.js ADDED
@@ -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
package/form/selects/helpers/SelectPopupOverlay.js.map ADDED
@@ -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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"}
package/form-renderer/components/fields/Select/index.cjs CHANGED
@@ -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,
package/form-renderer/components/fields/Select/index.cjs.map CHANGED
@@ -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;;;;;"}
package/form-renderer/components/fields/Select/index.js CHANGED
@@ -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,
package/form-renderer/components/fields/Select/index.js.map CHANGED
@@ -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
@@ -5446,6 +5446,19 @@ export interface ISelectCore<TStyle = any, TLocalProps = any> extends IFormSingl
5446
5446
  filterBy?: string;
5447
5447
  virtualScroll?: boolean | any;
5448
5448
  emptyFilterMessage?: ReactNode;
5449
+ /**
5450
+ * Open the options in a popup that owns the screen instead of a panel
5451
+ * anchored to the trigger.
5452
+ *
5453
+ * ⛔ NATIVE ONLY, BY DESIGN. On web the options render in PrimeReact's own
5454
+ * overlay, which is not boxed in by an on-screen keyboard — there is no
5455
+ * fault there to escape. The prop is accepted and ignored on web so a
5456
+ * shared element array stays valid on both surfaces, rather than a
5457
+ * consumer having to branch on platform.
5458
+ *
5459
+ * Default false: every existing consumer keeps the anchored panel.
5460
+ */
5461
+ popup?: boolean;
5449
5462
  showClear?: boolean;
5450
5463
  itemTemplate?: (item: any) => ReactNode;
5451
5464
  className?: string;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@lmb-it/kitsconcerto-native",
3
- "version": "0.1.258",
3
+ "version": "0.1.259",
4
4
  "description": "KitsConcerto — Native (React Native) UI components",
5
5
  "main": "index.cjs",
6
6
  "module": "index.js",