@webority/mobile-ui 0.0.38 → 0.1.0

package/lib/module/components/InlineSelect/InlineSelect.js

@@ -1,186 +1 @@
-"use strict";
-
-/**
- * InlineSelect — a compact, borderless select trigger for inside other fields.
- *
- * Renders just the selected label + chevron (no FieldBase box) and opens the
- * shared OptionSheet picker. Designed to live in Input's `leftIcon` /
- * `rightIcon` slots — currency prefix on an amount field, country code on a
- * phone field, unit suffix on a measurement — but works anywhere a bare
- * dropdown trigger is needed (toolbars, list headers).
- *
- * Single-select only by design: a multi-select crammed into a field affix has
- * no sane closed-state rendering. Reach for Select when you need multi.
- *
- * ```tsx
- * <Input
- *   placeholder="Amount"
- *   textAlign="right"
- *   keyboardType="number-pad"
- *   leftIcon={
- *     <InlineSelect options={currencies} value={currency} onChange={setCurrency} />
- *   }
- * />
- * ```
- */
-
-import React, { forwardRef, useCallback, useMemo, useState } from 'react';
-import { Pressable, StyleSheet, Text, View } from 'react-native';
-import { fontFor, useTheme } from "../../theme/index.js";
-import { resolveHaptic, triggerHaptic } from "../../utils/index.js";
-import { Chevron } from "../FieldBase/Chevron.js";
-import { FieldLabel, resolveFieldSize } from "../FieldBase/FieldBase.js";
-import { OptionSheet } from "../OptionSheet/OptionSheet.js";
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-// `unknown` keeps the forwardRef signature non-generic — same pattern as Select.
-const InlineSelect = /*#__PURE__*/forwardRef((props, ref) => {
-  const {
-    options,
-    getOptionLabel,
-    getOptionValue,
-    getOptionDisabled,
-    getOptionDescription,
-    getOptionIcon,
-    value,
-    onChange,
-    placeholder,
-    label,
-    title,
-    searchable = false,
-    haptic,
-    disabled = false,
-    size = 'md',
-    color,
-    chevronColor,
-    chevronSize,
-    textStyle,
-    style,
-    optionStyle,
-    selectedOptionStyle,
-    optionTextStyle,
-    selectedOptionTextStyle,
-    accessibilityLabel,
-    testID
-  } = props;
-  const theme = useTheme();
-  const styles = useMemo(() => buildStyles(theme), [theme]);
-  const sizeTokens = resolveFieldSize(theme, size);
-  const labelOf = useCallback(o => getOptionLabel ? getOptionLabel(o) : o.label ?? '', [getOptionLabel]);
-  const valueOf = useCallback(o => getOptionValue ? getOptionValue(o) : o.value, [getOptionValue]);
-  const disabledOf = useCallback(o => getOptionDisabled ? getOptionDisabled(o) : o.disabled === true, [getOptionDisabled]);
-  const descriptionOf = useCallback(o => getOptionDescription ? getOptionDescription(o) : o.description, [getOptionDescription]);
-  const iconOf = useCallback(o => getOptionIcon ? getOptionIcon(o) : o.icon, [getOptionIcon]);
-  const [open, setOpen] = useState(false);
-  const selectedOption = useMemo(() => {
-    if (value === undefined || value === null) {
-      return undefined;
-    }
-    return options.find(o => valueOf(o) === value);
-  }, [options, value, valueOf]);
-  const isSelected = useCallback(optValue => value === optValue, [value]);
-  const handleOpen = useCallback(() => {
-    if (disabled) {
-      return;
-    }
-    const h = resolveHaptic(haptic, 'selection');
-    if (h) {
-      triggerHaptic(h);
-    }
-    setOpen(true);
-  }, [disabled, haptic]);
-  const handleClose = useCallback(() => {
-    setOpen(false);
-  }, []);
-  const handleSelect = useCallback(option => {
-    if (disabledOf(option)) {
-      return;
-    }
-    const h = resolveHaptic(haptic, 'selection');
-    if (h) {
-      triggerHaptic(h);
-    }
-    onChange(valueOf(option));
-    handleClose();
-  }, [disabledOf, valueOf, onChange, handleClose, haptic]);
-  const triggerColor = disabled ? theme.colors.text.disabled : color ?? theme.components.inlineSelect?.color ?? theme.colors.primary;
-  const displayText = selectedOption !== undefined ? labelOf(selectedOption) : placeholder ?? 'Select';
-  const a11ySummary = selectedOption !== undefined ? `Selected: ${labelOf(selectedOption)}` : placeholder ?? 'No selection';
-  const a11yLabel = accessibilityLabel ?? `${label ?? title ?? 'Select'}. ${a11ySummary}`;
-  const trigger = /*#__PURE__*/_jsxs(Pressable, {
-    ref: ref,
-    onPress: handleOpen,
-    disabled: disabled,
-    hitSlop: 8,
-    accessibilityRole: "button",
-    accessibilityLabel: a11yLabel,
-    accessibilityState: {
-      disabled,
-      expanded: open
-    },
-    testID: testID,
-    style: ({
-      pressed
-    }) => [styles.trigger, {
-      columnGap: theme.spacing.xs,
-      opacity: pressed && !disabled ? 0.6 : 1
-    }, style],
-    children: [/*#__PURE__*/_jsx(Text, {
-      style: [styles.triggerText, {
-        color: triggerColor,
-        fontSize: sizeTokens.fontSize,
-        ...fontFor(theme, 'medium')
-      }, textStyle],
-      numberOfLines: 1,
-      children: displayText
-    }), /*#__PURE__*/_jsx(Chevron, {
-      color: chevronColor ?? triggerColor,
-      size: chevronSize ?? sizeTokens.iconSize,
-      open: open
-    })]
-  });
-  return /*#__PURE__*/_jsxs(_Fragment, {
-    children: [label ? /*#__PURE__*/_jsxs(View, {
-      style: styles.labelled,
-      children: [/*#__PURE__*/_jsx(FieldLabel, {
-        size: size,
-        children: label
-      }), trigger]
-    }) : trigger, /*#__PURE__*/_jsx(OptionSheet, {
-      open: open,
-      onClose: handleClose,
-      title: title,
-      accessibilityLabel: label ?? title ?? placeholder ?? 'Options',
-      options: options,
-      labelOf: labelOf,
-      getValue: valueOf,
-      disabledOf: disabledOf,
-      descriptionOf: descriptionOf,
-      iconOf: iconOf,
-      isSelected: isSelected,
-      onSelect: handleSelect,
-      searchable: searchable,
-      optionStyle: optionStyle,
-      selectedOptionStyle: selectedOptionStyle,
-      optionTextStyle: optionTextStyle,
-      selectedOptionTextStyle: selectedOptionTextStyle
-    })]
-  });
-});
-InlineSelect.displayName = 'InlineSelect';
-const buildStyles = _theme => StyleSheet.create({
-  // Only wraps the trigger when a label is drawn, so a trigger inside an
-  // Input slot keeps its original tree and alignment.
-  labelled: {
-    alignItems: 'flex-start'
-  },
-  trigger: {
-    flexDirection: 'row',
-    alignItems: 'center'
-  },
-  triggerText: {
-    includeFontPadding: false
-  }
-});
-export { InlineSelect };
-export default InlineSelect;
-//# sourceMappingURL=InlineSelect.js.map
+import e,{forwardRef as t,useCallback as i,useMemo as o,useState as l}from"react";import{Pressable as n,StyleSheet as s,Text as r,View as c}from"react-native";import{fontFor as a,useTheme as d}from"../../theme/index.js";import{resolveHaptic as p,triggerHaptic as m}from"../../utils/index.js";import{Chevron as b}from"../FieldBase/Chevron.js";import{FieldLabel as S,resolveFieldSize as f}from"../FieldBase/FieldBase.js";import{OptionSheet as y}from"../OptionSheet/OptionSheet.js";import{jsx as g,jsxs as x,Fragment as h}from"react/jsx-runtime";const u=t((e,t)=>{const{options:s,getOptionLabel:u,getOptionValue:O,getOptionDisabled:j,getOptionDescription:v,getOptionIcon:z,value:I,onChange:T,placeholder:D,label:F,title:L,searchable:C=!1,haptic:B,disabled:$=!1,size:N="md",color:P,chevronColor:V,chevronSize:w,textStyle:G,style:R,optionStyle:k,selectedOptionStyle:q,optionTextStyle:A,selectedOptionTextStyle:E,accessibilityLabel:H,testID:J}=e,K=d(),M=o(()=>buildStyles(K),[K]),Q=f(K,N),U=i(e=>u?u(e):e.label??"",[u]),W=i(e=>O?O(e):e.value,[O]),X=i(e=>j?j(e):!0===e.disabled,[j]),Y=i(e=>v?v(e):e.description,[v]),Z=i(e=>z?z(e):e.icon,[z]),[_,ee]=l(!1),te=o(()=>{if(null!=I)return s.find(e=>W(e)===I)},[s,I,W]),ie=i(e=>I===e,[I]),oe=i(()=>{if($)return;const e=p(B,"selection");e&&m(e),ee(!0)},[$,B]),le=i(()=>{ee(!1)},[]),ne=i(e=>{if(X(e))return;const t=p(B,"selection");t&&m(t),T(W(e)),le()},[X,W,T,le,B]),se=$?K.colors.text.disabled:P??K.components.inlineSelect?.color??K.colors.primary,re=void 0!==te?U(te):D??"Select",ce=void 0!==te?`Selected: ${U(te)}`:D??"No selection",ae=x(n,{ref:t,onPress:oe,disabled:$,hitSlop:8,accessibilityRole:"button",accessibilityLabel:H??`${F??L??"Select"}. ${ce}`,accessibilityState:{disabled:$,expanded:_},testID:J,style:({pressed:e})=>[M.trigger,{columnGap:K.spacing.xs,opacity:e&&!$?.6:1},R],children:[g(r,{style:[M.triggerText,{color:se,fontSize:Q.fontSize,...a(K,"medium")},G],numberOfLines:1,children:re}),g(b,{color:V??se,size:w??Q.iconSize,open:_})]});return x(h,{children:[F?x(c,{style:M.labelled,children:[g(S,{size:N,children:F}),ae]}):ae,g(y,{open:_,onClose:le,title:L,accessibilityLabel:F??L??D??"Options",options:s,labelOf:U,getValue:W,disabledOf:X,descriptionOf:Y,iconOf:Z,isSelected:ie,onSelect:ne,searchable:C,optionStyle:k,selectedOptionStyle:q,optionTextStyle:A,selectedOptionTextStyle:E})]})});u.displayName="InlineSelect";const buildStyles=e=>s.create({labelled:{alignItems:"flex-start"},trigger:{flexDirection:"row",alignItems:"center"},triggerText:{includeFontPadding:!1}});export{u as InlineSelect};export default u;

package/lib/module/components/InlineSelect/index.js

@@ -1,4 +1 @@
-"use strict";
-
-export { default, InlineSelect } from "./InlineSelect.js";
-//# sourceMappingURL=index.js.map
+export{default,InlineSelect}from"./InlineSelect.js";