@lmb-it/kitsconcerto-native 0.1.264 → 0.1.265

package/apps/mobile/src/Core/Dropdown/index.cjs

@@ -66,6 +66,7 @@ require('../../../../../packages/types/src/Theme/defaultTheme.cjs');
 require('../../../../../packages/types/src/Theme/alphaColors.cjs');
 require('../../Factory/helpers/cssVarMap.cjs');
 var useKeyboardHeight = require('../../Factory/helpers/useKeyboardHeight.cjs');
+var readerEdge = require('../../Factory/helpers/readerEdge.cjs');
 require('i18next');
 require('react-i18next');
 require('../AutoComplete/index.cjs');
@@ -85,7 +86,6 @@ require('../RadioButton/index.cjs');
 require('../Input/index.cjs');
 require('../Input/Field.cjs');
 require('../Input/Slot.cjs');
-var readerEdge = require('../../Factory/helpers/readerEdge.cjs');
 var panelGeometry = require('./panelGeometry.cjs');
 
 const getLabel = (item, optionLabel) => {

package/apps/mobile/src/Core/Dropdown/index.js

@@ -62,6 +62,7 @@ import '../../../../../packages/types/src/Theme/defaultTheme.js';
 import '../../../../../packages/types/src/Theme/alphaColors.js';
 import '../../Factory/helpers/cssVarMap.js';
 import { useKeyboardHeight } from '../../Factory/helpers/useKeyboardHeight.js';
+import { readerEdge } from '../../Factory/helpers/readerEdge.js';
 import 'i18next';
 import 'react-i18next';
 import '../AutoComplete/index.js';
@@ -81,7 +82,6 @@ import '../RadioButton/index.js';
 import '../Input/index.js';
 import '../Input/Field.js';
 import '../Input/Slot.js';
-import { readerEdge } from '../../Factory/helpers/readerEdge.js';
 import { computePanelGeometry } from './panelGeometry.js';
 
 const getLabel = (item, optionLabel) => {

package/form/selects/helpers/SelectPopupOverlay.cjs

@@ -65,6 +65,7 @@ require('../../../packages/types/src/Theme/alphaColors.cjs');
 require('../../../apps/mobile/src/Factory/helpers/cssVarMap.cjs');
 require('../../../apps/mobile/src/Factory/DimensionsContext.cjs');
 var useKeyboardHeight = require('../../../apps/mobile/src/Factory/helpers/useKeyboardHeight.cjs');
+var readerEdge = require('../../../apps/mobile/src/Factory/helpers/readerEdge.cjs');
 require('i18next');
 require('react-i18next');
 require('../../../apps/mobile/src/Core/AutoComplete/index.cjs');
@@ -96,6 +97,7 @@ const SHEET_MIN_HEIGHT = 240;
 const SelectPopupOverlay = ({ visible, onClose, title, children }) => {
   const { resolveToken } = KitsThemeProvider_native.useKitsTheme();
   const { isRTL } = locale.useLanguage();
+  const edge = readerEdge.readerEdge(isRTL);
   const insets = reactNativeSafeAreaContext.useSafeAreaInsets();
   const { height: windowHeight } = reactNative.useWindowDimensions();
   const headingFont = useThemedFont.default("heading");
@@ -135,9 +137,17 @@ const SelectPopupOverlay = ({ visible, onClose, title, children }) => {
               style: [
                 styles.header,
                 { borderBottomColor: borderColor },
-                // The header mirrors with the reader, like every
-                // other row this library draws.
-                isRTL ? styles.headerRtl : styles.headerLtr
+                /* ⛔ THE PHYSICAL EDGE IS COMPUTED, NEVER NAMED.
+                   React Native mirrors `flexDirection: 'row'`
+                   and `textAlign` when the process is RTL — the
+                   App calls `I18nManager.forceRTL` — so naming
+                   the RTL edge for an RTL reader asks for it
+                   twice and lands on the LTR one. That is why
+                   this header drew its title LEFT and its ✕
+                   RIGHT in Arabic while the option rows below
+                   it, which already went through `readerEdge`,
+                   were correct. See `readerEdge`. */
+                { flexDirection: edge.flexDirection }
               ],
               children: [
                 /* @__PURE__ */ jsxRuntime.jsx(
@@ -147,7 +157,13 @@ const SelectPopupOverlay = ({ visible, onClose, title, children }) => {
                     style: [
                       styles.title,
                       { color: textColor, fontFamily: headingFont },
-                      isRTL ? styles.titleRtl : styles.titleLtr
+                      {
+                        textAlign: edge.textAlign,
+                        /* `writingDirection` is NOT mirrored — it
+                           orders glyphs inside the line, so it
+                           takes the reader's own direction. */
+                        writingDirection: isRTL ? "rtl" : "ltr"
+                      }
                     ],
                     children: title
                   }
@@ -182,15 +198,11 @@ const styles = reactNative.StyleSheet.create({
     borderBottomWidth: 1,
     gap: 12
   },
-  headerLtr: { flexDirection: "row" },
-  headerRtl: { flexDirection: "row-reverse" },
   title: {
     flex: 1,
     fontSize: 17,
     fontWeight: "700"
   },
-  titleLtr: { textAlign: "left", writingDirection: "ltr" },
-  titleRtl: { textAlign: "right", writingDirection: "rtl" },
   close: {
     fontSize: 18
   }

package/form/selects/helpers/SelectPopupOverlay.cjs.map

@@ -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;;;;"}
+{"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 {readerEdge, 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    /* Physical edges to write so the header lands where the reader starts. */\n    const edge = readerEdge(isRTL);\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 PHYSICAL EDGE IS COMPUTED, NEVER NAMED.\n                                   React Native mirrors `flexDirection: 'row'`\n                                   and `textAlign` when the process is RTL — the\n                                   App calls `I18nManager.forceRTL` — so naming\n                                   the RTL edge for an RTL reader asks for it\n                                   twice and lands on the LTR one. That is why\n                                   this header drew its title LEFT and its ✕\n                                   RIGHT in Arabic while the option rows below\n                                   it, which already went through `readerEdge`,\n                                   were correct. See `readerEdge`. */\n                                {flexDirection: edge.flexDirection},\n                            ]}>\n                            <Text\n                                numberOfLines={1}\n                                style={[\n                                    styles.title,\n                                    {color: textColor, fontFamily: headingFont},\n                                    {\n                                        textAlign: edge.textAlign,\n                                        /* `writingDirection` is NOT mirrored — it\n                                           orders glyphs inside the line, so it\n                                           takes the reader's own direction. */\n                                        writingDirection: isRTL ? ('rtl' as const) : ('ltr' as const),\n                                    },\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    title: {\n        flex: 1,\n        fontSize: 17,\n        fontWeight: '700',\n    },\n    close: {\n        fontSize: 18,\n    },\n});\n\nexport default SelectPopupOverlay;\n"],"names":["useKitsTheme","useLanguage","readerEdge","useSafeAreaInsets","useWindowDimensions","useThemedFont","useKeyboardHeight","jsx","KitsDialogControlled","jsxs","View","Text","Pressable","StyleSheet"],"mappings":"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"}

package/form/selects/helpers/SelectPopupOverlay.js

@@ -61,6 +61,7 @@ import '../../../packages/types/src/Theme/alphaColors.js';
 import '../../../apps/mobile/src/Factory/helpers/cssVarMap.js';
 import '../../../apps/mobile/src/Factory/DimensionsContext.js';
 import { useKeyboardHeight } from '../../../apps/mobile/src/Factory/helpers/useKeyboardHeight.js';
+import { readerEdge } from '../../../apps/mobile/src/Factory/helpers/readerEdge.js';
 import 'i18next';
 import 'react-i18next';
 import '../../../apps/mobile/src/Core/AutoComplete/index.js';
@@ -92,6 +93,7 @@ const SHEET_MIN_HEIGHT = 240;
 const SelectPopupOverlay = ({ visible, onClose, title, children }) => {
   const { resolveToken } = useKitsTheme();
   const { isRTL } = useLanguage();
+  const edge = readerEdge(isRTL);
   const insets = useSafeAreaInsets();
   const { height: windowHeight } = useWindowDimensions();
   const headingFont = useThemedFont("heading");
@@ -131,9 +133,17 @@ const SelectPopupOverlay = ({ visible, onClose, title, children }) => {
               style: [
                 styles.header,
                 { borderBottomColor: borderColor },
-                // The header mirrors with the reader, like every
-                // other row this library draws.
-                isRTL ? styles.headerRtl : styles.headerLtr
+                /* ⛔ THE PHYSICAL EDGE IS COMPUTED, NEVER NAMED.
+                   React Native mirrors `flexDirection: 'row'`
+                   and `textAlign` when the process is RTL — the
+                   App calls `I18nManager.forceRTL` — so naming
+                   the RTL edge for an RTL reader asks for it
+                   twice and lands on the LTR one. That is why
+                   this header drew its title LEFT and its ✕
+                   RIGHT in Arabic while the option rows below
+                   it, which already went through `readerEdge`,
+                   were correct. See `readerEdge`. */
+                { flexDirection: edge.flexDirection }
               ],
               children: [
                 /* @__PURE__ */ jsx(
@@ -143,7 +153,13 @@ const SelectPopupOverlay = ({ visible, onClose, title, children }) => {
                     style: [
                       styles.title,
                       { color: textColor, fontFamily: headingFont },
-                      isRTL ? styles.titleRtl : styles.titleLtr
+                      {
+                        textAlign: edge.textAlign,
+                        /* `writingDirection` is NOT mirrored — it
+                           orders glyphs inside the line, so it
+                           takes the reader's own direction. */
+                        writingDirection: isRTL ? "rtl" : "ltr"
+                      }
                     ],
                     children: title
                   }
@@ -178,15 +194,11 @@ const styles = StyleSheet.create({
     borderBottomWidth: 1,
     gap: 12
   },
-  headerLtr: { flexDirection: "row" },
-  headerRtl: { flexDirection: "row-reverse" },
   title: {
     flex: 1,
     fontSize: 17,
     fontWeight: "700"
   },
-  titleLtr: { textAlign: "left", writingDirection: "ltr" },
-  titleRtl: { textAlign: "right", writingDirection: "rtl" },
   close: {
     fontSize: 18
   }

package/form/selects/helpers/SelectPopupOverlay.js.map

@@ -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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"}
+{"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 {readerEdge, 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    /* Physical edges to write so the header lands where the reader starts. */\n    const edge = readerEdge(isRTL);\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 PHYSICAL EDGE IS COMPUTED, NEVER NAMED.\n                                   React Native mirrors `flexDirection: 'row'`\n                                   and `textAlign` when the process is RTL — the\n                                   App calls `I18nManager.forceRTL` — so naming\n                                   the RTL edge for an RTL reader asks for it\n                                   twice and lands on the LTR one. That is why\n                                   this header drew its title LEFT and its ✕\n                                   RIGHT in Arabic while the option rows below\n                                   it, which already went through `readerEdge`,\n                                   were correct. See `readerEdge`. */\n                                {flexDirection: edge.flexDirection},\n                            ]}>\n                            <Text\n                                numberOfLines={1}\n                                style={[\n                                    styles.title,\n                                    {color: textColor, fontFamily: headingFont},\n                                    {\n                                        textAlign: edge.textAlign,\n                                        /* `writingDirection` is NOT mirrored — it\n                                           orders glyphs inside the line, so it\n                                           takes the reader's own direction. */\n                                        writingDirection: isRTL ? ('rtl' as const) : ('ltr' as const),\n                                    },\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    title: {\n        flex: 1,\n        fontSize: 17,\n        fontWeight: '700',\n    },\n    close: {\n        fontSize: 18,\n    },\n});\n\nexport default SelectPopupOverlay;\n"],"names":[],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lmb-it/kitsconcerto-native",
-  "version": "0.1.264",
+  "version": "0.1.265",
   "description": "KitsConcerto — Native (React Native) UI components",
   "main": "index.cjs",
   "module": "index.js",