@webority/mobile-ui 0.0.38 → 0.1.0

package/lib/commonjs/components/InlineSelect/InlineSelect.js

@@ -1,190 +1 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = exports.InlineSelect = void 0;
-var _react = _interopRequireWildcard(require("react"));
-var _reactNative = require("react-native");
-var _index = require("../../theme/index.js");
-var _index2 = require("../../utils/index.js");
-var _Chevron = require("../FieldBase/Chevron.js");
-var _FieldBase = require("../FieldBase/FieldBase.js");
-var _OptionSheet = require("../OptionSheet/OptionSheet.js");
-var _jsxRuntime = require("react/jsx-runtime");
-function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
-/**
- * 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} />
- *   }
- * />
- * ```
- */
-
-// `unknown` keeps the forwardRef signature non-generic — same pattern as Select.
-const InlineSelect = exports.InlineSelect = /*#__PURE__*/(0, _react.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 = (0, _index.useTheme)();
-  const styles = (0, _react.useMemo)(() => buildStyles(theme), [theme]);
-  const sizeTokens = (0, _FieldBase.resolveFieldSize)(theme, size);
-  const labelOf = (0, _react.useCallback)(o => getOptionLabel ? getOptionLabel(o) : o.label ?? '', [getOptionLabel]);
-  const valueOf = (0, _react.useCallback)(o => getOptionValue ? getOptionValue(o) : o.value, [getOptionValue]);
-  const disabledOf = (0, _react.useCallback)(o => getOptionDisabled ? getOptionDisabled(o) : o.disabled === true, [getOptionDisabled]);
-  const descriptionOf = (0, _react.useCallback)(o => getOptionDescription ? getOptionDescription(o) : o.description, [getOptionDescription]);
-  const iconOf = (0, _react.useCallback)(o => getOptionIcon ? getOptionIcon(o) : o.icon, [getOptionIcon]);
-  const [open, setOpen] = (0, _react.useState)(false);
-  const selectedOption = (0, _react.useMemo)(() => {
-    if (value === undefined || value === null) {
-      return undefined;
-    }
-    return options.find(o => valueOf(o) === value);
-  }, [options, value, valueOf]);
-  const isSelected = (0, _react.useCallback)(optValue => value === optValue, [value]);
-  const handleOpen = (0, _react.useCallback)(() => {
-    if (disabled) {
-      return;
-    }
-    const h = (0, _index2.resolveHaptic)(haptic, 'selection');
-    if (h) {
-      (0, _index2.triggerHaptic)(h);
-    }
-    setOpen(true);
-  }, [disabled, haptic]);
-  const handleClose = (0, _react.useCallback)(() => {
-    setOpen(false);
-  }, []);
-  const handleSelect = (0, _react.useCallback)(option => {
-    if (disabledOf(option)) {
-      return;
-    }
-    const h = (0, _index2.resolveHaptic)(haptic, 'selection');
-    if (h) {
-      (0, _index2.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__*/(0, _jsxRuntime.jsxs)(_reactNative.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__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-      style: [styles.triggerText, {
-        color: triggerColor,
-        fontSize: sizeTokens.fontSize,
-        ...(0, _index.fontFor)(theme, 'medium')
-      }, textStyle],
-      numberOfLines: 1,
-      children: displayText
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Chevron.Chevron, {
-      color: chevronColor ?? triggerColor,
-      size: chevronSize ?? sizeTokens.iconSize,
-      open: open
-    })]
-  });
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
-    children: [label ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-      style: styles.labelled,
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_FieldBase.FieldLabel, {
-        size: size,
-        children: label
-      }), trigger]
-    }) : trigger, /*#__PURE__*/(0, _jsxRuntime.jsx)(_OptionSheet.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 => _reactNative.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
-  }
-});
-var _default = exports.default = InlineSelect;
-//# sourceMappingURL=InlineSelect.js.map
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.default=exports.InlineSelect=void 0;var _react=_interopRequireWildcard(require("react")),_reactNative=require("react-native"),_index=require("../../theme/index.js"),_index2=require("../../utils/index.js"),_Chevron=require("../FieldBase/Chevron.js"),_FieldBase=require("../FieldBase/FieldBase.js"),_OptionSheet=require("../OptionSheet/OptionSheet.js"),_jsxRuntime=require("react/jsx-runtime");function _interopRequireWildcard(e,t){if("function"==typeof WeakMap)var i=new WeakMap,l=new WeakMap;return(_interopRequireWildcard=function(e,t){if(!t&&e&&e.__esModule)return e;var r,n,s={__proto__:null,default:e};if(null===e||"object"!=typeof e&&"function"!=typeof e)return s;if(r=t?l:i){if(r.has(e))return r.get(e);r.set(e,s)}for(const t in e)"default"!==t&&{}.hasOwnProperty.call(e,t)&&((n=(r=Object.defineProperty)&&Object.getOwnPropertyDescriptor(e,t))&&(n.get||n.set)?r(s,t,n):s[t]=e[t]);return s})(e,t)}const InlineSelect=exports.InlineSelect=(0,_react.forwardRef)((e,t)=>{const{options:i,getOptionLabel:l,getOptionValue:r,getOptionDisabled:n,getOptionDescription:s,getOptionIcon:a,value:o,onChange:c,placeholder:d,label:u,title:p,searchable:_=!1,haptic:x,disabled:b=!1,size:S="md",color:f,chevronColor:y,chevronSize:g,textStyle:h,style:j,optionStyle:m,selectedOptionStyle:v,optionTextStyle:O,selectedOptionTextStyle:C,accessibilityLabel:R,testID:k}=e,q=(0,_index.useTheme)(),F=(0,_react.useMemo)(()=>buildStyles(q),[q]),I=(0,_FieldBase.resolveFieldSize)(q,S),z=(0,_react.useCallback)(e=>l?l(e):e.label??"",[l]),T=(0,_react.useCallback)(e=>r?r(e):e.value,[r]),w=(0,_react.useCallback)(e=>n?n(e):!0===e.disabled,[n]),M=(0,_react.useCallback)(e=>s?s(e):e.description,[s]),N=(0,_react.useCallback)(e=>a?a(e):e.icon,[a]),[P,B]=(0,_react.useState)(!1),D=(0,_react.useMemo)(()=>{if(null!=o)return i.find(e=>T(e)===o)},[i,o,T]),L=(0,_react.useCallback)(e=>o===e,[o]),W=(0,_react.useCallback)(()=>{if(b)return;const e=(0,_index2.resolveHaptic)(x,"selection");e&&(0,_index2.triggerHaptic)(e),B(!0)},[b,x]),H=(0,_react.useCallback)(()=>{B(!1)},[]),V=(0,_react.useCallback)(e=>{if(w(e))return;const t=(0,_index2.resolveHaptic)(x,"selection");t&&(0,_index2.triggerHaptic)(t),c(T(e)),H()},[w,T,c,H,x]),$=b?q.colors.text.disabled:f??q.components.inlineSelect?.color??q.colors.primary,G=void 0!==D?z(D):d??"Select",A=void 0!==D?`Selected: ${z(D)}`:d??"No selection",E=R??`${u??p??"Select"}. ${A}`,J=(0,_jsxRuntime.jsxs)(_reactNative.Pressable,{ref:t,onPress:W,disabled:b,hitSlop:8,accessibilityRole:"button",accessibilityLabel:E,accessibilityState:{disabled:b,expanded:P},testID:k,style:({pressed:e})=>[F.trigger,{columnGap:q.spacing.xs,opacity:e&&!b?.6:1},j],children:[(0,_jsxRuntime.jsx)(_reactNative.Text,{style:[F.triggerText,{color:$,fontSize:I.fontSize,...(0,_index.fontFor)(q,"medium")},h],numberOfLines:1,children:G}),(0,_jsxRuntime.jsx)(_Chevron.Chevron,{color:y??$,size:g??I.iconSize,open:P})]});return(0,_jsxRuntime.jsxs)(_jsxRuntime.Fragment,{children:[u?(0,_jsxRuntime.jsxs)(_reactNative.View,{style:F.labelled,children:[(0,_jsxRuntime.jsx)(_FieldBase.FieldLabel,{size:S,children:u}),J]}):J,(0,_jsxRuntime.jsx)(_OptionSheet.OptionSheet,{open:P,onClose:H,title:p,accessibilityLabel:u??p??d??"Options",options:i,labelOf:z,getValue:T,disabledOf:w,descriptionOf:M,iconOf:N,isSelected:L,onSelect:V,searchable:_,optionStyle:m,selectedOptionStyle:v,optionTextStyle:O,selectedOptionTextStyle:C})]})});InlineSelect.displayName="InlineSelect";const buildStyles=e=>_reactNative.StyleSheet.create({labelled:{alignItems:"flex-start"},trigger:{flexDirection:"row",alignItems:"center"},triggerText:{includeFontPadding:!1}});var _default=exports.default=InlineSelect;

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

@@ -1,20 +1 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-Object.defineProperty(exports, "InlineSelect", {
-  enumerable: true,
-  get: function () {
-    return _InlineSelect.InlineSelect;
-  }
-});
-Object.defineProperty(exports, "default", {
-  enumerable: true,
-  get: function () {
-    return _InlineSelect.default;
-  }
-});
-var _InlineSelect = _interopRequireWildcard(require("./InlineSelect.js"));
-function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
-//# sourceMappingURL=index.js.map
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),Object.defineProperty(exports,"InlineSelect",{enumerable:!0,get:function(){return _InlineSelect.InlineSelect}}),Object.defineProperty(exports,"default",{enumerable:!0,get:function(){return _InlineSelect.default}});var _InlineSelect=_interopRequireWildcard(require("./InlineSelect.js"));function _interopRequireWildcard(e,t){if("function"==typeof WeakMap)var r=new WeakMap,n=new WeakMap;return(_interopRequireWildcard=function(e,t){if(!t&&e&&e.__esModule)return e;var i,l,o={__proto__:null,default:e};if(null===e||"object"!=typeof e&&"function"!=typeof e)return o;if(i=t?n:r){if(i.has(e))return i.get(e);i.set(e,o)}for(const t in e)"default"!==t&&{}.hasOwnProperty.call(e,t)&&((l=(i=Object.defineProperty)&&Object.getOwnPropertyDescriptor(e,t))&&(l.get||l.set)?i(o,t,l):o[t]=e[t]);return o})(e,t)}