jfs-components 0.0.73 → 0.0.74

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

@@ -0,0 +1,214 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Dropdown = Dropdown;
+exports.DropdownItem = DropdownItem;
+exports.default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+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 _Icon = _interopRequireDefault(require("../../icons/Icon"));
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+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); }
+const IS_WEB = _reactNative.Platform.OS === 'web';
+
+// ---------------------------------------------------------------------------
+// DropdownItem
+// ---------------------------------------------------------------------------
+
+function useDropdownItemTokens(modes) {
+  return (0, _react.useMemo)(() => {
+    // The `dropdownItem/background` token aliases through the
+    // `Dropdown Item State` collection (Idle | Selected), so we resolve
+    // both possibilities up-front and pick at render time.
+    const idleBackground = (0, _figmaVariablesResolver.getVariableByName)('dropdownItem/background', {
+      ...modes,
+      'Dropdown Item State': 'Idle'
+    }) || '#ffffff';
+    const selectedBackground = (0, _figmaVariablesResolver.getVariableByName)('dropdownItem/background', {
+      ...modes,
+      'Dropdown Item State': 'Selected'
+    }) || '#f5f5f5';
+    const foreground = (0, _figmaVariablesResolver.getVariableByName)('dropdownItem/foreground', modes) || '#000000';
+    const fontFamily = (0, _figmaVariablesResolver.getVariableByName)('dropdownItem/fontFamily', modes) || 'JioType Var';
+    const fontSize = parseInt((0, _figmaVariablesResolver.getVariableByName)('dropdownItem/fontSize', modes), 10) || 16;
+    const fontWeight = (0, _figmaVariablesResolver.getVariableByName)('dropdownItem/fontWeight', modes) || '400';
+    const lineHeight = parseInt((0, _figmaVariablesResolver.getVariableByName)('dropdownItem/lineHeight', modes), 10) || 19;
+    const gap = parseInt((0, _figmaVariablesResolver.getVariableByName)('dropdownItem/gap', modes), 10) || 8;
+    const paddingHorizontal = parseInt((0, _figmaVariablesResolver.getVariableByName)('dropdownItem/padding/horizontal', modes), 10) || 12;
+    const paddingVertical = parseInt((0, _figmaVariablesResolver.getVariableByName)('dropdownItem/padding/vertical', modes), 10) || 12;
+    return {
+      idleBackground,
+      selectedBackground,
+      foreground,
+      fontFamily,
+      fontSize,
+      fontWeight,
+      lineHeight,
+      gap,
+      paddingHorizontal,
+      paddingVertical
+    };
+  }, [modes]);
+}
+function DropdownItem({
+  label,
+  value = null,
+  selected = false,
+  disabled = false,
+  leading,
+  trailing,
+  onPress,
+  children,
+  modes: propModes = _reactUtils.EMPTY_MODES,
+  style,
+  labelStyle,
+  accessibilityLabel,
+  accessibilityHint
+}) {
+  const {
+    modes: globalModes
+  } = (0, _JFSThemeProvider.useTokens)();
+  const modes = (0, _react.useMemo)(() => ({
+    ...globalModes,
+    ...propModes
+  }), [globalModes, propModes]);
+  const tokens = useDropdownItemTokens(modes);
+  const [isHovered, setIsHovered] = (0, _react.useState)(false);
+  const handlePress = (0, _react.useCallback)(() => {
+    if (disabled) return;
+    onPress?.(value);
+  }, [disabled, onPress, value]);
+  const containerStyle = (0, _react.useCallback)(({
+    pressed
+  }) => {
+    const showSelected = pressed || isHovered && IS_WEB || selected;
+    const base = {
+      flexDirection: 'row',
+      alignItems: 'center',
+      gap: tokens.gap,
+      paddingHorizontal: tokens.paddingHorizontal,
+      paddingVertical: tokens.paddingVertical,
+      backgroundColor: showSelected ? tokens.selectedBackground : tokens.idleBackground,
+      opacity: disabled ? 0.4 : 1,
+      width: '100%'
+    };
+    return [base, style];
+  }, [tokens.gap, tokens.paddingHorizontal, tokens.paddingVertical, tokens.idleBackground, tokens.selectedBackground, isHovered, selected, disabled, style]);
+  const textStyle = {
+    color: tokens.foreground,
+    fontFamily: tokens.fontFamily,
+    fontSize: tokens.fontSize,
+    fontWeight: tokens.fontWeight,
+    lineHeight: tokens.lineHeight,
+    flexShrink: 1
+  };
+  const processedLeading = leading ? (0, _reactUtils.cloneChildrenWithModes)(_react.default.Children.toArray(leading), modes) : null;
+  const customTrailing = trailing ? (0, _reactUtils.cloneChildrenWithModes)(_react.default.Children.toArray(trailing), modes) : null;
+  const showDefaultCheck = !trailing && selected;
+  const fallbackA11yLabel = accessibilityLabel || (typeof label === 'string' ? label : 'Dropdown item');
+  const a11yProps = {
+    accessibilityRole: 'menuitem',
+    accessibilityLabel: fallbackA11yLabel,
+    accessibilityState: {
+      selected,
+      disabled
+    }
+  };
+  if (accessibilityHint) {
+    a11yProps.accessibilityHint = accessibilityHint;
+  }
+  const handleHoverIn = (0, _react.useCallback)(() => {
+    if (IS_WEB && !disabled) setIsHovered(true);
+  }, [disabled]);
+  const handleHoverOut = (0, _react.useCallback)(() => {
+    if (IS_WEB) setIsHovered(false);
+  }, []);
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.Pressable, {
+    onPress: handlePress,
+    disabled: disabled,
+    onHoverIn: handleHoverIn,
+    onHoverOut: handleHoverOut,
+    style: containerStyle,
+    ...a11yProps,
+    children: [processedLeading, children != null ? children : /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+      style: [textStyle, labelStyle],
+      numberOfLines: 1,
+      children: label
+    }), customTrailing, showDefaultCheck && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.default, {
+      name: "ic_confirm",
+      size: 16,
+      color: tokens.foreground
+    })]
+  });
+}
+
+// ---------------------------------------------------------------------------
+// Dropdown (popup surface)
+// ---------------------------------------------------------------------------
+
+/**
+ * `Dropdown` is the visual surface (popup) that contains a list of
+ * `DropdownItem`s. It is responsible for the background, rounded corners,
+ * elevation/shadow, and clipping. Use it standalone for menu UIs, or rely on
+ * `DropdownInput` which composes it into a form-field experience.
+ */
+function Dropdown({
+  children,
+  maxHeight,
+  modes: propModes = _reactUtils.EMPTY_MODES,
+  style,
+  accessibilityLabel
+}) {
+  const {
+    modes: globalModes
+  } = (0, _JFSThemeProvider.useTokens)();
+  const modes = (0, _react.useMemo)(() => ({
+    ...globalModes,
+    ...propModes
+  }), [globalModes, propModes]);
+  const radius = parseInt((0, _figmaVariablesResolver.getVariableByName)('dropdown/radius', modes), 10) || 8;
+  const background = (0, _figmaVariablesResolver.getVariableByName)('dropdown/background', modes) || '#ffffff';
+  const shadowColor = (0, _figmaVariablesResolver.getVariableByName)('dropdown/shadow/color', modes) || 'rgba(0, 0, 0, 0.08)';
+  const shadowOffsetX = parseInt((0, _figmaVariablesResolver.getVariableByName)('dropdown/shadow/offsetX', modes), 10) || 0;
+  const shadowOffsetY = parseInt((0, _figmaVariablesResolver.getVariableByName)('dropdown/shadow/offsetY', modes), 10) || 4;
+  const shadowBlur = parseInt((0, _figmaVariablesResolver.getVariableByName)('dropdown/shadow/blur', modes), 10) || 16;
+  const containerStyle = {
+    backgroundColor: background,
+    borderRadius: radius,
+    overflow: 'hidden',
+    shadowColor,
+    shadowOffset: {
+      width: shadowOffsetX,
+      height: shadowOffsetY
+    },
+    shadowOpacity: 1,
+    shadowRadius: shadowBlur / 2,
+    elevation: 4
+  };
+  const content = /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+    style: {
+      flexDirection: 'column'
+    },
+    children: (0, _reactUtils.cloneChildrenWithModes)(children, modes)
+  });
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+    style: [containerStyle, style],
+    accessibilityRole: "menu",
+    accessibilityLabel: accessibilityLabel || 'Dropdown menu',
+    children: maxHeight != null ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.ScrollView, {
+      style: {
+        maxHeight
+      },
+      showsVerticalScrollIndicator: true,
+      keyboardShouldPersistTaps: "handled",
+      children: content
+    }) : content
+  });
+}
+var _default = exports.default = Dropdown;