@razorpay/blade/build/lib/web/production/components/Chip/ChipGroup.js

The Design System that powers Razorpay

import _defineProperty from '@babel/runtime/helpers/defineProperty';
import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
import React__default from 'react';
import { chipGroupLabelSizeTokens, chipGroupGapTokens } from './chipTokens.js';
import { ChipGroupProvider } from './ChipGroupContext.js';
import { useChipGroup } from './useChipGroup.js';
import '../Box/BaseBox/index.js';
import '../Form/index.js';
import { SelectorGroupField } from '../Form/Selector/SelectorGroupField.js';
import '../Box/styledProps/index.js';
import '../VisuallyHidden/index.web.js';
import '../Typography/index.js';
import '../../utils/logger/index.js';
import '../../utils/makeAnalyticsAttribute/index.js';
import { jsx, jsxs } from 'react/jsx-runtime';
import { throwBladeError } from '../../utils/logger/logger.js';
import { BaseBox } from '../Box/BaseBox/BaseBox.web.js';
import { getStyledProps } from '../Box/styledProps/getStyledProps.js';
import { makeAnalyticsAttribute } from '../../utils/makeAnalyticsAttribute/makeAnalyticsAttribute.js';
import { FormLabel } from '../Form/FormLabel.js';
import { VisuallyHidden } from '../VisuallyHidden/VisuallyHidden.web.js';
import { Text } from '../Typography/Text/Text.js';
import { FormHint } from '../Form/FormHint.js';

var _excluded = ["accessibilityLabel", "label", "labelPosition", "necessityIndicator", "validationState", "errorText", "helpText", "isRequired", "children", "isDisabled", "name", "defaultValue", "onChange", "value", "size", "color", "testID", "selectionType"];
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
var _ChipGroup = function _ChipGroup(_ref, ref) {
  var accessibilityLabel = _ref.accessibilityLabel,
    label = _ref.label,
    _ref$labelPosition = _ref.labelPosition,
    labelPosition = _ref$labelPosition === void 0 ? 'top' : _ref$labelPosition,
    _ref$necessityIndicat = _ref.necessityIndicator,
    necessityIndicator = _ref$necessityIndicat === void 0 ? 'none' : _ref$necessityIndicat,
    _ref$validationState = _ref.validationState,
    validationState = _ref$validationState === void 0 ? 'none' : _ref$validationState,
    errorText = _ref.errorText,
    helpText = _ref.helpText,
    _ref$isRequired = _ref.isRequired,
    isRequired = _ref$isRequired === void 0 ? false : _ref$isRequired,
    children = _ref.children,
    _ref$isDisabled = _ref.isDisabled,
    isDisabled = _ref$isDisabled === void 0 ? false : _ref$isDisabled,
    name = _ref.name,
    defaultValue = _ref.defaultValue,
    onChange = _ref.onChange,
    value = _ref.value,
    _ref$size = _ref.size,
    size = _ref$size === void 0 ? 'small' : _ref$size,
    _ref$color = _ref.color,
    color = _ref$color === void 0 ? 'primary' : _ref$color,
    testID = _ref.testID,
    _ref$selectionType = _ref.selectionType,
    selectionType = _ref$selectionType === void 0 ? 'single' : _ref$selectionType,
    rest = _objectWithoutProperties(_ref, _excluded);
  var _useChipGroup = useChipGroup({
      defaultValue: defaultValue,
      onChange: onChange,
      value: value,
      isDisabled: isDisabled,
      name: name,
      size: size,
      color: color,
      selectionType: selectionType,
      isRequired: isRequired,
      validationState: validationState,
      necessityIndicator: necessityIndicator
    }),
    contextValue = _useChipGroup.contextValue,
    ids = _useChipGroup.ids;
  var showError = validationState === 'error' && errorText;
  var showHelpText = !showError && helpText;
  var accessibilityText = "".concat(showError ? errorText : '', " ").concat(showHelpText ? helpText : '').trim();
  if (false) {
    if (selectionType === 'single' && Array.isArray(defaultValue)) {
      throwBladeError({
        moduleName: 'ChipGroup',
        message: "When \"selectionType\" is \"single\", the \"defaultValue\" prop must be a string value, but an array was provided."
      });
    }
    if (selectionType === 'single' && Array.isArray(value)) {
      throwBladeError({
        moduleName: 'ChipGroup',
        message: "When \"selectionType\" is \"single\", the \"value\" prop must be a string value, but an array was provided."
      });
    }
  }
  return /*#__PURE__*/jsx(ChipGroupProvider, {
    value: contextValue,
    children: /*#__PURE__*/jsx(BaseBox, _objectSpread(_objectSpread({
      ref: ref
    }, getStyledProps(rest)), {}, {
      children: /*#__PURE__*/jsxs(SelectorGroupField, _objectSpread(_objectSpread({
        position: labelPosition,
        accessibilityRole: selectionType === 'single' ? 'radiogroup' : 'group',
        labelledBy: ids.labelId,
        componentName: "chip-group",
        testID: testID
      }, makeAnalyticsAttribute(rest)), {}, {
        children: [label ? /*#__PURE__*/jsx(FormLabel, {
          as: "span",
          necessityIndicator: necessityIndicator,
          position: labelPosition,
          id: ids.labelId,
          accessibilityText: accessibilityText && ",".concat(accessibilityText),
          size: chipGroupLabelSizeTokens[size],
          children: label
        }) : null, /*#__PURE__*/jsxs(BaseBox, {
          children: [/*#__PURE__*/jsx(VisuallyHidden, {
            children: /*#__PURE__*/jsx(Text, {
              children: accessibilityLabel
            })
          }), /*#__PURE__*/jsx(BaseBox, {
            display: "flex",
            flexDirection: "row",
            flexWrap: "wrap",
            rowGap: chipGroupGapTokens[size].bottom,
            columnGap: chipGroupGapTokens[size].right,
            marginBottom: chipGroupGapTokens[size].bottom,
            children: children
          }), /*#__PURE__*/jsx(FormHint, {
            size: chipGroupLabelSizeTokens[size],
            type: validationState === 'error' ? 'error' : 'help',
            errorText: errorText,
            helpText: helpText
          })]
        })]
      }))
    }))
  });
};
var ChipGroup = /*#__PURE__*/React__default.forwardRef(_ChipGroup);

export { ChipGroup };
//# sourceMappingURL=ChipGroup.js.map