@scripso-homepad/ui 0.4.6 → 0.4.7

package/dist/index.d.cts

@@ -70,6 +70,8 @@ interface SelectBaseProps {
     labelClassName?: string;
     errorClassName?: string;
     hintClassName?: string;
+    /** Shorter option rows for compact filter-style dropdowns. */
+    compact?: boolean;
 }
 interface SingleSelectProps extends SelectBaseProps {
     multiple?: false;
@@ -82,7 +84,7 @@ interface MultipleSelectProps extends SelectBaseProps {
     onValueChange?: (value: string[]) => void;
 }
 type SelectProps = SingleSelectProps | MultipleSelectProps;
-declare function Select({ label, placeholder, value, onValueChange, options, leftIcon, multiple, disabled, error, invalid, hint, containerStyle, fieldStyle, className, fieldClassName, menuClassName, labelClassName, errorClassName, hintClassName, }: SelectProps): react.JSX.Element;
+declare function Select({ label, placeholder, value, onValueChange, options, leftIcon, multiple, disabled, error, invalid, hint, containerStyle, fieldStyle, className, fieldClassName, menuClassName, labelClassName, errorClassName, hintClassName, compact, }: SelectProps): react.JSX.Element;
 
 interface PhoneInputProps extends Omit<TextInputProps, "style"> {
     label?: string;
@@ -441,13 +443,13 @@ declare const labelTypography: {
     readonly lineHeight: 12;
     readonly letterSpacing: 0;
 };
-/** Button label typography — SemiBold; line-height slightly above 100% for RN clipping. */
+/** Button label typography — SemiBold. */
 declare const buttonTypography: {
     readonly lg: {
         readonly fontFamily: "Noto Sans Armenian";
         readonly fontSize: 14;
         readonly fontWeight: "600";
-        readonly lineHeight: 18;
+        readonly lineHeight: 19;
         readonly letterSpacing: 0;
     };
     readonly sm: {

package/dist/index.d.ts

@@ -70,6 +70,8 @@ interface SelectBaseProps {
     labelClassName?: string;
     errorClassName?: string;
     hintClassName?: string;
+    /** Shorter option rows for compact filter-style dropdowns. */
+    compact?: boolean;
 }
 interface SingleSelectProps extends SelectBaseProps {
     multiple?: false;
@@ -82,7 +84,7 @@ interface MultipleSelectProps extends SelectBaseProps {
     onValueChange?: (value: string[]) => void;
 }
 type SelectProps = SingleSelectProps | MultipleSelectProps;
-declare function Select({ label, placeholder, value, onValueChange, options, leftIcon, multiple, disabled, error, invalid, hint, containerStyle, fieldStyle, className, fieldClassName, menuClassName, labelClassName, errorClassName, hintClassName, }: SelectProps): react.JSX.Element;
+declare function Select({ label, placeholder, value, onValueChange, options, leftIcon, multiple, disabled, error, invalid, hint, containerStyle, fieldStyle, className, fieldClassName, menuClassName, labelClassName, errorClassName, hintClassName, compact, }: SelectProps): react.JSX.Element;
 
 interface PhoneInputProps extends Omit<TextInputProps, "style"> {
     label?: string;
@@ -441,13 +443,13 @@ declare const labelTypography: {
     readonly lineHeight: 12;
     readonly letterSpacing: 0;
 };
-/** Button label typography — SemiBold; line-height slightly above 100% for RN clipping. */
+/** Button label typography — SemiBold. */
 declare const buttonTypography: {
     readonly lg: {
         readonly fontFamily: "Noto Sans Armenian";
         readonly fontSize: 14;
         readonly fontWeight: "600";
-        readonly lineHeight: 18;
+        readonly lineHeight: 19;
         readonly letterSpacing: 0;
     };
     readonly sm: {

package/dist/index.js

@@ -1,6 +1,6 @@
-import { colors, buttonTypography, spacing, fontSize, fontWeight, fonts, radii, INPUT_ICON_GAP, useApplyWebClassName, resolveInputVisualState, Label, getInputFieldStyles, inputFieldMetrics } from './chunk-Y7I7LA2K.js';
-export { Input, Label, brand, buttonTypography, colors, emeraldGreen, fontSize, fontWeight, fonts, labelTypography, navy, radii, rubyRed, shadows, spacing, stormGray } from './chunk-Y7I7LA2K.js';
-import { createContext, useRef, useState, useEffect, useMemo, useLayoutEffect, useContext, isValidElement, cloneElement } from 'react';
+import { colors, buttonTypography, spacing, fontSize, fontWeight, fonts, radii, INPUT_ICON_GAP, useApplyWebClassName, resolveInputVisualState, Label, getInputFieldStyles, inputFieldMetrics } from './chunk-7KLVMNDM.js';
+export { Input, Label, brand, buttonTypography, colors, emeraldGreen, fontSize, fontWeight, fonts, labelTypography, navy, radii, rubyRed, shadows, spacing, stormGray } from './chunk-7KLVMNDM.js';
+import { createContext, useRef, useState, useMemo, useEffect, useLayoutEffect, useContext, isValidElement, cloneElement } from 'react';
 import { StyleSheet, Platform, TouchableOpacity, Text, View, Animated, Easing, Pressable, Modal, ScrollView, TextInput, Dimensions } from 'react-native';
 import Svg3, { Path } from 'react-native-svg';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
@@ -229,10 +229,12 @@ var SELECT_DROPDOWN_GAP = spacing.sm;
 var SELECT_DROPDOWN_PADDING = spacing.sm;
 var SELECT_DROPDOWN_MAX_HEIGHT = 317;
 var SELECT_OPTION_HEIGHT = 43;
+var SELECT_OPTION_HEIGHT_COMPACT = 36;
 var SELECT_OPTION_GAP = spacing.sm;
 var SELECT_CHEVRON_SIZE = 20;
 var SELECT_CHEVRON_COLOR = colors.stormGray150;
 var SELECT_CHEVRON_ROTATION_MS = 200;
+var SELECT_TEXT_LINE_HEIGHT = 19;
 var selectLabelTypography = {
   fontFamily: fonts.sans,
   fontSize: fontSize.sm,
@@ -245,7 +247,7 @@ var selectValueTypography = {
   fontFamily: fonts.sans,
   fontSize: fontSize.md,
   fontWeight: fontWeight.regular,
-  lineHeight: fontSize.md,
+  lineHeight: SELECT_TEXT_LINE_HEIGHT,
   letterSpacing: 0,
   textAlign: "left"
 };
@@ -386,7 +388,7 @@ var selectDropdownMetrics = StyleSheet.create({
     fontFamily: fonts.sans,
     fontSize: fontSize.md,
     fontWeight: fontWeight.regular,
-    lineHeight: fontSize.md,
+    lineHeight: SELECT_TEXT_LINE_HEIGHT,
     letterSpacing: 0,
     textAlign: "left",
     color: colors.slateBlue,
@@ -409,10 +411,13 @@ var selectDropdownMetrics = StyleSheet.create({
     backgroundColor: colors.stormGray0
   }
 });
-function resolveSelectDropdownHeight(optionCount) {
-  const contentHeight = optionCount * SELECT_OPTION_HEIGHT + Math.max(0, optionCount - 1) * SELECT_OPTION_GAP + SELECT_DROPDOWN_PADDING * 2;
+function resolveSelectDropdownHeight(optionCount, optionHeight = SELECT_OPTION_HEIGHT) {
+  const contentHeight = optionCount * optionHeight + Math.max(0, optionCount - 1) * SELECT_OPTION_GAP + SELECT_DROPDOWN_PADDING * 2;
   return Math.min(contentHeight, SELECT_DROPDOWN_MAX_HEIGHT);
 }
+function resolveSelectDropdownContentHeight(optionCount, optionHeight = SELECT_OPTION_HEIGHT) {
+  return optionCount * optionHeight + Math.max(0, optionCount - 1) * SELECT_OPTION_GAP;
+}
 function resolveSelectDropdownTop(anchor, dropdownHeight) {
   const windowHeight = Dimensions.get("window").height;
   const spaceBelow = windowHeight - (anchor.y + anchor.height + SELECT_DROPDOWN_GAP);
@@ -583,7 +588,8 @@ function Select({
   menuClassName,
   labelClassName,
   errorClassName,
-  hintClassName
+  hintClassName,
+  compact = false
 }) {
   const wrapperRef = useRef(null);
   const triggerRef = useRef(null);
@@ -595,10 +601,15 @@ function Select({
   const [anchor, setAnchor] = useState(null);
   const [highlightedIndex, setHighlightedIndex] = useState(-1);
   const [valueContainerWidth, setValueContainerWidth] = useState(0);
+  const optionHeight = compact ? SELECT_OPTION_HEIGHT_COMPACT : SELECT_OPTION_HEIGHT;
+  const needsScroll = useMemo(
+    () => resolveSelectDropdownContentHeight(options.length, optionHeight) > SELECT_DROPDOWN_MAX_HEIGHT - SELECT_DROPDOWN_PADDING * 2,
+    [compact, optionHeight, options.length]
+  );
   useApplyWebClassName(wrapperRef, className);
   useApplyWebClassName(triggerRef, fieldClassName);
   useApplyWebClassName(menuRef, menuClassName);
-  useApplyWebClassName(scrollRef, SELECT_DROPDOWN_SCROLL_CLASS, open && Boolean(anchor));
+  useApplyWebClassName(scrollRef, SELECT_DROPDOWN_SCROLL_CLASS, open && Boolean(anchor) && needsScroll);
   useApplyWebClassName(helperRef, error ? errorClassName : hintClassName);
   useIsomorphicLayoutEffect(() => {
     ensureSelectDropdownScrollStyles();
@@ -654,7 +665,7 @@ function Select({
     return formatMultiSelectDisplay(selectedLabels, valueContainerWidth);
   }, [multiple, placeholder, selectedLabels, valueContainerWidth]);
   const isPlaceholder = selectedLabels.length === 0;
-  const dropdownHeight = resolveSelectDropdownHeight(options.length);
+  const dropdownHeight = resolveSelectDropdownHeight(options.length, optionHeight);
   const helperMessage = error ?? hint;
   function closeMenu() {
     setOpen(false);
@@ -706,7 +717,10 @@ function Select({
         },
         style: [
           selectDropdownMetrics.option,
+          compact && styles2.optionCompact,
+          { height: optionHeight, minHeight: optionHeight, maxHeight: optionHeight },
           isSelected && selectDropdownMetrics.optionSelected,
+          compact && isSelected && styles2.optionSelectedCompact,
           isHighlighted && !isSelected && !option.disabled ? selectDropdownMetrics.optionHighlighted : null,
           !isLast && styles2.optionSpacing,
           option.disabled && styles2.optionDisabled
@@ -793,7 +807,7 @@ function Select({
             height: dropdownHeight
           }
         ],
-        children: /* @__PURE__ */ jsx(
+        children: needsScroll ? /* @__PURE__ */ jsx(
           ScrollView,
           {
             ref: scrollRef,
@@ -805,7 +819,7 @@ function Select({
             nestedScrollEnabled: true,
             children: optionList
           }
-        )
+        ) : /* @__PURE__ */ jsx(View, { style: styles2.dropdownContent, children: optionList })
       }
     ) : null }) })
   ] });
@@ -846,6 +860,14 @@ var styles2 = StyleSheet.create({
   optionSpacing: {
     marginBottom: SELECT_OPTION_GAP
   },
+  optionCompact: {
+    paddingTop: 8,
+    paddingBottom: 8
+  },
+  optionSelectedCompact: {
+    paddingTop: 8,
+    paddingBottom: 8
+  },
   optionDisabled: {
     opacity: 0.5
   },