jfs-components 0.1.2 → 0.1.12

package/lib/commonjs/components/DonutChart/DonutChart.js

@@ -133,7 +133,8 @@ function DonutChart({
   style,
   valueStyle,
   labelStyle,
-  accessibilityLabel
+  accessibilityLabel,
+  disableTruncation
 }) {
   const {
     modes: globalModes
@@ -231,7 +232,7 @@ function DonutChart({
           fontWeight: valueFontWeight,
           textAlign: 'center'
         }, valueStyle],
-        numberOfLines: 1,
+        ...(0, _reactUtils.resolveTruncation)(disableTruncation, 1),
         children: value
       }) : null, showLabel ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
         style: [{
@@ -242,7 +243,7 @@ function DonutChart({
           fontWeight: labelFontWeight,
           textAlign: 'center'
         }, labelStyle],
-        numberOfLines: 1,
+        ...(0, _reactUtils.resolveTruncation)(disableTruncation, 1),
         children: label
       }) : null]
     }) : null]

package/lib/commonjs/components/Dropdown/Dropdown.js

@@ -69,7 +69,8 @@ function DropdownItem({
   style,
   labelStyle,
   accessibilityLabel,
-  accessibilityHint
+  accessibilityHint,
+  disableTruncation
 }) {
   const {
     modes: globalModes
@@ -138,7 +139,7 @@ function DropdownItem({
     ...a11yProps,
     children: [processedLeading, children != null ? children : /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
       style: [textStyle, labelStyle],
-      numberOfLines: 1,
+      ...(0, _reactUtils.resolveTruncation)(disableTruncation, 1),
       children: label
     }), customTrailing, showDefaultCheck && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.default, {
       name: "ic_confirm",

package/lib/commonjs/components/DropdownInput/DropdownInput.js

@@ -22,6 +22,12 @@ const IS_WEB = _reactNative.Platform.OS === 'web';
 // Types
 // ---------------------------------------------------------------------------
 
+/**
+ * Imperative handle exposed via `ref`. Lets the consumer drive the dropdown
+ * from outside — e.g. close it when an Android hardware/system button is
+ * pressed, or open it programmatically from a sibling control.
+ */
+
 // ---------------------------------------------------------------------------
 // Token resolution
 // ---------------------------------------------------------------------------
@@ -125,7 +131,7 @@ function collectOptionsFromChildren(children) {
 // Component
 // ---------------------------------------------------------------------------
 
-function DropdownInput({
+const DropdownInput = /*#__PURE__*/(0, _react.forwardRef)(function DropdownInput({
   label,
   placeholder = 'Select an option',
   items,
@@ -155,8 +161,9 @@ function DropdownInput({
   accessibilityLabel,
   accessibilityHint,
   onFocus,
-  onBlur
-}) {
+  onBlur,
+  disableTruncation
+}, ref) {
   // ---------------- Modes ----------------
   const {
     modes: globalModes
@@ -270,6 +277,32 @@ function DropdownInput({
     measure();
   }, [measure]);
 
+  // ---------------- Imperative handle ----------------
+  (0, _react.useImperativeHandle)(ref, () => ({
+    open: () => {
+      if (isDisabled || isReadOnly) return;
+      measure();
+      setOpenState(true);
+    },
+    close: closeMenu,
+    toggle: () => {
+      if (isDisabled || isReadOnly) return;
+      measure();
+      toggleMenu();
+    },
+    focus: () => {
+      ;
+      triggerRef.current?.focus?.();
+    },
+    blur: () => {
+      ;
+      triggerRef.current?.blur?.();
+    },
+    measureInWindow: callback => {
+      triggerRef.current?.measureInWindow(callback);
+    }
+  }), [isDisabled, isReadOnly, measure, setOpenState, closeMenu, toggleMenu]);
+
   // ---------------- Popup positioning ----------------
   const [menuSize, setMenuSize] = (0, _react.useState)(null);
   const handleMenuLayout = (0, _react.useCallback)(e => {
@@ -516,7 +549,7 @@ function DropdownInput({
         style: [valueTextStyle, !hasValue && {
           color: placeholderColor
         }],
-        numberOfLines: 1,
+        ...(0, _reactUtils.resolveTruncation)(disableTruncation, 1),
         children: displayLabel
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
         accessibilityElementsHidden: true,
@@ -564,7 +597,7 @@ function DropdownInput({
       })
     })]
   });
-}
+});
 const webNoOutline = {
   outlineStyle: 'none',
   outlineWidth: 0,

package/lib/commonjs/components/ExpandableCheckbox/ExpandableCheckbox.js

@@ -64,6 +64,7 @@ function ExpandableCheckbox({
   readMoreLabel = 'Read more',
   readLessLabel = 'Read less',
   collapsedLines = 1,
+  disableTruncation = false,
   modes = _reactUtils.EMPTY_MODES,
   style,
   labelStyle,
@@ -136,7 +137,7 @@ function ExpandableCheckbox({
   }), [modes]);
   const a11yLabel = accessibilityLabel ?? (typeof label === 'string' ? label : undefined);
   const buttonLabel = isExpanded ? readLessLabel : readMoreLabel;
-  const labelNumberOfLinesProps = !isExpanded && collapsedLines > 0 ? {
+  const labelNumberOfLinesProps = !disableTruncation && !isExpanded && collapsedLines > 0 ? {
     numberOfLines: collapsedLines,
     ellipsizeMode: 'tail'
   } : null;

package/lib/commonjs/components/FormField/FormField.js

@@ -9,6 +9,7 @@ var _reactNative = require("react-native");
 var _figmaVariablesResolver = require("../../design-tokens/figma-variables-resolver");
 var _JFSThemeProvider = require("../../design-tokens/JFSThemeProvider");
 var _reactUtils = require("../../utils/react-utils");
+var _webPlatformUtils = require("../../utils/web-platform-utils");
 var _SupportText = _interopRequireDefault(require("../SupportText/SupportText"));
 var _Icon = _interopRequireDefault(require("../../icons/Icon"));
 var _Form = require("../Form/Form");
@@ -162,7 +163,7 @@ function firstError(error) {
 // Component
 // ---------------------------------------------------------------------------
 
-function FormField({
+const FormField = /*#__PURE__*/(0, _react.forwardRef)(function FormField({
   label,
   placeholder,
   value,
@@ -190,7 +191,7 @@ function FormField({
   accessibilityLabel,
   accessibilityHint,
   testID
-}) {
+}, ref) {
   // -- Form context integration -------------------------------------------
   const formCtx = (0, _Form.useFormContext)();
   const formError = name && formCtx ? firstError(formCtx.validationErrors[name]) : undefined;
@@ -208,6 +209,21 @@ function FormField({
   const [isFocused, setIsFocused] = (0, _react.useState)(false);
   const interactive = !isDisabled && !isReadOnly;
 
+  // Internal handles so we can (a) imperatively blur the input and (b) detect
+  // outside presses. The forwarded `ref` is merged in below, so the public
+  // ref API (focus/blur/clear/isFocused) is unchanged for consumers.
+  const inputRef = (0, _react.useRef)(null);
+  const rootRef = (0, _react.useRef)(null);
+  // Stable merged ref so React doesn't detach/reattach (and momentarily null
+  // `inputRef.current`) on every render.
+  const mergedInputRef = (0, _react.useMemo)(() => (0, _reactUtils.mergeRefs)(inputRef, ref), [ref]);
+
+  // Web: pressing an INTERACTIVE element outside the field (Button, link,
+  // another pressable) often does not move DOM focus, so the native `blur`
+  // never fires and the field stays visually "Active". Force a blur on any
+  // outside pointer press while focused. No-op on native.
+  (0, _webPlatformUtils.useWebOutsidePress)(rootRef, (0, _react.useCallback)(() => inputRef.current?.blur(), []), isFocused);
+
   // FormField States cascade — error > read only/disabled > active (focused) > idle.
   // Disabled maps to "Read Only" since there is no dedicated disabled mode and
   // the visual treatment is closest. This is only the DEFAULT — an explicit
@@ -290,7 +306,30 @@ function FormField({
     color: tokens.inputTextColor,
     fontFamily: tokens.inputFontFamily,
     fontSize: tokens.inputFontSize,
-    lineHeight: tokens.inputLineHeight,
+    // ⚠️ DO NOT change to an unconditional `lineHeight: tokens.inputLineHeight`.
+    // This has regressed twice — read this before "simplifying" it.
+    //
+    // `inputLineHeight` comes from the Figma token `formField/input/label`
+    // ("16/45"), which is a 16px font inside a 45px ROW, i.e. it is the row
+    // HEIGHT, not the text leading. The row height is already applied via
+    // `inputRowStyle.minHeight` + `alignItems: 'center'`, so the text never
+    // needs this value as its own `lineHeight`.
+    //
+    // Passing a `lineHeight` (45) that is much larger than `fontSize` (16)
+    // onto a single-line RNTextInput breaks ONLY iOS: iOS puts ALL the extra
+    // vertical space ABOVE the glyphs, so the text/placeholder sinks to the
+    // bottom of the box instead of centering. Android and Web distribute the
+    // space evenly and look correct. This is a long-standing iOS native
+    // font-metrics bug in UITextField — see facebook/react-native#39145 and
+    // #28012; the documented workaround is exactly "drop lineHeight on the
+    // single-line input and let a wrapper center it". A single-line UITextField
+    // with no lineHeight centers its text natively (see react-native#56774).
+    //
+    // So: omit lineHeight on iOS (native centering via the row), and keep the
+    // token value on Android/Web where it already renders correctly.
+    ...(_reactNative.Platform.OS === 'ios' ? null : {
+      lineHeight: tokens.inputLineHeight
+    }),
     fontWeight: tokens.inputFontWeight,
     padding: 0,
     margin: 0,
@@ -327,6 +366,7 @@ function FormField({
   // -- Accessibility ------------------------------------------------------
   const resolvedA11yLabel = accessibilityLabel || label || placeholder || 'Form field';
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+    ref: rootRef,
     style: [wrapperStyle, style],
     pointerEvents: isDisabled ? 'none' : 'auto',
     testID: testID,
@@ -347,6 +387,7 @@ function FormField({
         importantForAccessibility: "no",
         children: processedLeading
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TextInput, {
+        ref: mergedInputRef,
         style: [inputTextStyles, inputTextStyle],
         value: value ?? '',
         onChangeText: handleChangeText,
@@ -376,5 +417,5 @@ function FormField({
       modes: modes
     })]
   });
-}
+});
 var _default = exports.default = FormField;

package/lib/commonjs/components/Gauge/Gauge.js

@@ -41,7 +41,7 @@ const toFontWeight = (value, fallback) => {
 };
 const getStrokeColor = (style, fallback) => {
   const flattened = _reactNative.StyleSheet.flatten(style);
-  return typeof flattened.backgroundColor === 'string' ? flattened.backgroundColor : fallback;
+  return flattened && typeof flattened.backgroundColor === 'string' ? flattened.backgroundColor : fallback;
 };
 function Gauge({
   value = 84,

package/lib/commonjs/components/HoldingsCard/HoldingsCard.js

@@ -39,7 +39,8 @@ function HoldingsCard({
   onPress,
   modes = _reactUtils.EMPTY_MODES,
   style,
-  testID
+  testID,
+  disableTruncation
 }) {
   // ---- Container tokens ----
   const containerFill = (0, _figmaVariablesResolver.getVariableByName)('holdingsCard/container/fill', modes) || '#fef4e5';
@@ -191,7 +192,7 @@ function HoldingsCard({
               lineHeight: detailValueLineHeight,
               fontWeight: detailValueFontWeight
             },
-            numberOfLines: 1,
+            ...(0, _reactUtils.resolveTruncation)(disableTruncation, 1),
             children: item.value
           })]
         }, `${rowIndex}-${colIndex}`)), row.length < GRID_COLUMNS && Array.from({

package/lib/commonjs/components/InputSearch/InputSearch.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = InputSearch;
+exports.default = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _reactNative = require("react-native");
 var _figmaVariablesResolver = require("../../design-tokens/figma-variables-resolver");
@@ -54,7 +54,7 @@ function SupportText({
     })]
   });
 }
-function InputSearch({
+const InputSearch = /*#__PURE__*/(0, _react.forwardRef)(function InputSearch({
   supportText = true,
   supportTextLabel = "Support Text",
   supportTextIcon = "ic_info",
@@ -69,7 +69,7 @@ function InputSearch({
   trailing,
   inputStyle,
   ...rest
-}) {
+}, ref) {
   const [isFocused, setIsFocused] = (0, _react.useState)(false);
 
   // Hardcode InputState based on the state prop, ignoring any external InputState passed in modes
@@ -124,6 +124,7 @@ function InputSearch({
       gap: formFieldGap
     }, containerStyle],
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_TextInput.default, {
+      ref: ref,
       placeholder: placeholder,
       value: value || '',
       onChangeText: onChangeText || (() => {}),
@@ -143,4 +144,5 @@ function InputSearch({
       modes: componentModes
     })]
   });
-}
+});
+var _default = exports.default = InputSearch;

package/lib/commonjs/components/InstitutionBadge/InstitutionBadge.js

@@ -88,6 +88,7 @@ function InstitutionBadge({
   style,
   labelStyle,
   accessibilityLabel,
+  disableTruncation,
   ...rest
 }) {
   const {
@@ -124,7 +125,7 @@ function InstitutionBadge({
       })
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
       style: [tokens.labelStyle, labelStyle],
-      numberOfLines: 1,
+      ...(0, _reactUtils.resolveTruncation)(disableTruncation, 1),
       children: label
     })]
   });

package/lib/commonjs/components/ListGroup/ListGroup.js

@@ -48,6 +48,7 @@ function ListGroup({
   style,
   accessibilityLabel,
   accessibilityHint,
+  disableTruncation,
   ...rest
 }) {
   // Resolve container tokens
@@ -100,7 +101,7 @@ function ListGroup({
       style: [labelStyle, processedSlot && {
         marginBottom: gap
       }],
-      numberOfLines: 1,
+      ...(0, _reactUtils.resolveTruncation)(disableTruncation, 1),
       accessibilityElementsHidden: true,
       importantForAccessibility: "no",
       children: label

package/lib/commonjs/components/ListItem/ListItem.js

@@ -191,6 +191,7 @@ function ListItemImpl({
   accessibilityHint,
   accessibilityState,
   webAccessibilityProps,
+  disableTruncation,
   ...rest
 }) {
   const tokens = (0, _react.useMemo)(() => resolveListItemTokens(modes), [modes]);
@@ -245,7 +246,7 @@ function ListItemImpl({
     const displayText = layout === 'Vertical' ? supportText.replace(/ /g, '\n') : supportText;
     return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
       style: layout === 'Vertical' ? [tokens.supportTextStyle, verticalSupportTextOverride] : tokens.supportTextStyle,
-      numberOfLines: layout === 'Horizontal' ? 2 : undefined,
+      ...(0, _reactUtils.resolveTruncation)(disableTruncation, layout === 'Horizontal' ? 2 : undefined),
       children: displayText
     });
   };
@@ -278,7 +279,7 @@ function ListItemImpl({
         },
         children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
           style: tokens.titleTextStyle,
-          numberOfLines: 1,
+          ...(0, _reactUtils.resolveTruncation)(disableTruncation, 1),
           children: title
         }), showSupportText && renderSupportContent()]
       }), processedTrailing ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {

package/lib/commonjs/components/MediaCard/MediaCard.js

@@ -14,7 +14,7 @@ var _react = _interopRequireWildcard(require("react"));
 var _reactNative = require("react-native");
 var _figmaVariablesResolver = require("../../design-tokens/figma-variables-resolver");
 var _Image = _interopRequireDefault(require("../Image/Image"));
-var _GlassFill = _interopRequireDefault(require("./GlassFill"));
+var _GlassFill = _interopRequireDefault(require("../../utils/GlassFill/GlassFill"));
 var _reactUtils = require("../../utils/react-utils");
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
@@ -198,7 +198,9 @@ function Footer({
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_GlassFill.default, {
       tint: tint,
       intensity: intensity,
-      overlayColor: glassBgColor
+      overlayColor: glassBgColor,
+      webBlurScale: 0.3,
+      webBlurMaxPx: 30
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
       style: {
         flexDirection: 'row',

package/lib/commonjs/components/MetricLegendItem/MetricLegendItem.js

@@ -27,7 +27,8 @@ function MetricLegendItem({
   style,
   indicatorStyle,
   labelStyle,
-  valueStyle
+  valueStyle,
+  disableTruncation
 }) {
   const gap = (0, _figmaVariablesResolver.getVariableByName)('metricLegendItem/gap', modes) ?? 4;
   const textWrapGap = (0, _figmaVariablesResolver.getVariableByName)('metricLegendItem/textWrap/gap', modes) ?? 4;
@@ -92,7 +93,7 @@ function MetricLegendItem({
           lineHeight: valueLineHeight,
           fontWeight: valueFontWeight
         }, valueStyle],
-        numberOfLines: 1,
+        ...(0, _reactUtils.resolveTruncation)(disableTruncation, 1),
         children: value
       })]
     })]

package/lib/commonjs/components/MonthlyStatusGrid/MonthlyStatusGrid.js

@@ -81,7 +81,8 @@ function CalendarGlyph({
   modes: propModes = _reactUtils.EMPTY_MODES,
   style,
   labelStyle,
-  accessibilityLabel
+  accessibilityLabel,
+  disableTruncation
 }) {
   const {
     modes: globalModes
@@ -126,7 +127,7 @@ function CalendarGlyph({
       gap
     }, style],
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-      numberOfLines: 1,
+      ...(0, _reactUtils.resolveTruncation)(disableTruncation, 1),
       style: [{
         color: foreground,
         fontFamily,
@@ -188,7 +189,8 @@ function MonthlyStatusGrid({
   glyphStyle,
   labelStyle,
   legendStyle,
-  accessibilityLabel
+  accessibilityLabel,
+  disableTruncation
 }) {
   const {
     modes: globalModes
@@ -245,6 +247,7 @@ function MonthlyStatusGrid({
             label: label,
             status: month.status,
             modes: glyphModes,
+            disableTruncation: disableTruncation,
             ...(glyphStyle !== undefined ? {
               style: glyphStyle
             } : {}),

package/lib/commonjs/components/NoteInput/NoteInput.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = NoteInput;
+exports.default = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _reactNative = require("react-native");
 var _figmaVariablesResolver = require("../../design-tokens/figma-variables-resolver");
@@ -14,7 +14,7 @@ function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r
  * NoteInput component representing an interactive "Add note" badge style field.
  * Allows the user to click, clears the placeholder text, and shows a blinking cursor when focused.
  */
-function NoteInput({
+const NoteInput = /*#__PURE__*/(0, _react.forwardRef)(function NoteInput({
   value = '',
   placeholder = 'Add note',
   onChangeText,
@@ -25,7 +25,7 @@ function NoteInput({
   onFocus,
   onBlur,
   ...rest
-}) {
+}, ref) {
   const [internalFocused, setInternalFocused] = (0, _react.useState)(false);
   const inputRef = (0, _react.useRef)(null);
 
@@ -97,7 +97,7 @@ function NoteInput({
         importantForAccessibility: "no",
         children: internalFocused ? value || ' ' : value || placeholder
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TextInput, {
-        ref: inputRef,
+        ref: (0, _reactUtils.mergeRefs)(inputRef, ref),
         value: value,
         onChangeText: onChangeText,
         placeholder: internalFocused ? '' : placeholder,
@@ -117,4 +117,5 @@ function NoteInput({
       })]
     })
   });
-}
+});
+var _default = exports.default = NoteInput;