@atlaskit/tag-group/dist/es2019/TagGroup/index.js

A tag group controls the layout and alignment for a collection of tags.

/* index.tsx generated by @compiled/babel-plugin v3.0.4 */
import "./index.compiled.css";
import * as React from 'react';
import { ax, ix } from "@compiled/react/runtime";
import { Children, forwardRef, isValidElement } from 'react';
import ExitingPersistence from '@atlaskit/motion/exiting-persistence';
import { fg } from '@atlaskit/platform-feature-flags/fg';
const tagMotionCapability = Symbol.for('@atlaskit/tag/motion-capable');
const isMotionCapableTag = child => {
  if (! /*#__PURE__*/isValidElement(child)) {
    return false;
  }
  const childType = child.type;
  return (typeof childType === 'function' || typeof childType === 'object' && childType !== null) && Reflect.get(childType, tagMotionCapability) === true;
};
const baseStyles = null;
const justifyStartStyles = null;
const justifyEndStyles = null;

/**
 * __Tag group__
 *
 * A tag group controls the layout and alignment for a collection of tags.
 *
 * - [Examples](https://atlassian.design/components/tag-group/examples)
 * - [Code](https://atlassian.design/components/tag-group/code)
 * - [Usage](https://atlassian.design/components/tag-group/usage)
 */
const TagGroup = /*#__PURE__*/forwardRef(({
  alignment = 'start',
  titleId,
  label,
  children
}, ref) => {
  const isTagMotionEnabled = fg('platform-dst-motion-uplift-labels');
  const shouldProvideMotionBoundary = isTagMotionEnabled && Children.toArray(children).every(isMotionCapableTag);
  return /*#__PURE__*/React.createElement("div", {
    role: "group",
    ref: ref,
    "aria-label": label,
    "aria-labelledby": titleId,
    className: ax(["_1e0c1txw _1bsb1osq _1n261g80", alignment === 'start' && "_1bah1y6m", alignment === 'end' && "_1bahesu3"])
  }, shouldProvideMotionBoundary ? /*#__PURE__*/React.createElement(ExitingPersistence, null, children) : children);
});
export default TagGroup;