@gitlab/ui 137.3.1 → 138.1.0

package/src/utils/confetti/constants.js

@@ -0,0 +1,42 @@
+export const DEFAULT_COUNT = 168;
+export const MIN_AUTO_COUNT = 36;
+export const AREA_EXPONENT = 0.4;
+export const DEFAULT_DURATION = 3000;
+export const FADE_OUT_DURATION = 600;
+export const CANVAS_Z_INDEX = 9999;
+export const MAX_FRAME_DELTA = 50;
+
+export const EDGE_ANGLE = (54 * Math.PI) / 180;
+export const POINT_ANGLE = Math.PI / 2;
+export const POINT_POWER = 0.8;
+export const MIN_REACH = 0.04;
+export const REACH_HEADROOM = 1.3;
+
+export const BAYER = [
+  [0, 8, 2, 10],
+  [12, 4, 14, 6],
+  [3, 11, 1, 9],
+  [15, 7, 13, 5],
+];
+
+export const CONFIG = {
+  burstWindow: 220,
+  edgeSpread: 46,
+  pointSpread: 75,
+  aimJitter: 5,
+  drag: 0.0022,
+  gravity: 0.0005,
+  cell: 10,
+  fringeCells: 2,
+  blobCells: 1.4,
+  blobCellRange: 2,
+  stretch: 1.6,
+  stretchRange: 1.4,
+  peak: 0.55,
+  peakRange: 0.45,
+  falloff: 1.3,
+  decayMin: 0.45,
+  pixelFloor: 0.5,
+  pixelFade: 0.6,
+  pixelMin: 2,
+};

package/src/utils/confetti/field.js

@@ -0,0 +1,134 @@
+import { CONFIG, BAYER } from './constants';
+import { FRINGE_KEYS } from './palette';
+
+const SPAN = BAYER.length;
+const LEVELS = SPAN * SPAN;
+
+export const createField = ({ ramp, duration }) => {
+  const last = ramp.length - 1;
+
+  let columns = 0;
+  let rows = 0;
+  let coverage = new Float32Array(0);
+  let sizes = new Float32Array(0);
+  let fromColumn = 0;
+  let toColumn = -1;
+  let fromRow = 0;
+  let toRow = -1;
+
+  const valueAt = (column, row) =>
+    column < 0 || column >= columns ? 0 : coverage[row * columns + column];
+
+  const thresholdAt = (column, row) => BAYER[row % SPAN][column % SPAN] / LEVELS;
+
+  const fringeKey = (column, row, threshold) =>
+    (valueAt(column - CONFIG.fringeCells, row) > threshold ? 1 : 0) +
+    (valueAt(column, row) > threshold ? 2 : 0) +
+    (valueAt(column + CONFIG.fringeCells, row) > threshold ? 4 : 0);
+
+  const fringeColor = (column, row, threshold) => {
+    const index = FRINGE_KEYS[fringeKey(column, row, threshold)];
+
+    return index === null ? null : ramp[Math.min(last, index)];
+  };
+
+  const coverageColor = (value) => ramp[Math.min(last, Math.floor(value * ramp.length))];
+
+  const pixelSize = (index) => Math.max(CONFIG.pixelMin, Math.round(CONFIG.cell * sizes[index]));
+
+  const resize = (stage) => {
+    const nextColumns = Math.ceil(stage.width / CONFIG.cell) + 1;
+    const nextRows = Math.ceil(stage.height / CONFIG.cell) + 1;
+
+    if (nextColumns !== columns || nextRows !== rows) {
+      columns = nextColumns;
+      rows = nextRows;
+      coverage = new Float32Array(columns * rows);
+      sizes = new Float32Array(columns * rows);
+    } else {
+      coverage.fill(0);
+    }
+
+    fromColumn = columns;
+    toColumn = -1;
+    fromRow = rows;
+    toRow = -1;
+  };
+
+  const stamp = (piece, elapsed) => {
+    const age = (elapsed - piece.delay) / (duration * piece.decayFrom);
+    const strength = piece.peak * Math.max(0, 1 - age);
+
+    if (strength <= 0) {
+      return;
+    }
+
+    const fade = 1 - CONFIG.pixelFade * age;
+    const near = CONFIG.pixelFloor + piece.depth * (1 - CONFIG.pixelFloor);
+    const size = near * fade;
+    const radius = piece.radius * fade;
+    const { stretch } = piece;
+    const centerX = piece.x / CONFIG.cell;
+    const centerY = piece.y / CONFIG.cell;
+    const speed = Math.hypot(piece.velocityX, piece.velocityY) || 1;
+    const alongX = piece.velocityX / speed;
+    const alongY = piece.velocityY / speed;
+    const reach = radius * stretch;
+    const fromX = Math.max(0, Math.ceil(centerX - reach));
+    const toX = Math.min(columns - 1, Math.floor(centerX + reach));
+    const fromY = Math.max(0, Math.ceil(centerY - reach));
+    const toY = Math.min(rows - 1, Math.floor(centerY + reach));
+
+    fromColumn = Math.min(fromColumn, fromX);
+    toColumn = Math.max(toColumn, toX);
+    fromRow = Math.min(fromRow, fromY);
+    toRow = Math.max(toRow, toY);
+
+    for (let row = fromY; row <= toY; row += 1) {
+      const deltaY = row - centerY;
+
+      for (let column = fromX; column <= toX; column += 1) {
+        const deltaX = column - centerX;
+        const along = (deltaX * alongX + deltaY * alongY) / stretch;
+        const across = deltaX * alongY - deltaY * alongX;
+        const distance = Math.hypot(along, across) / radius;
+
+        if (distance < 1) {
+          const index = row * columns + column;
+          const value = strength * (1 - distance) ** CONFIG.falloff;
+
+          if (value > coverage[index]) {
+            coverage[index] = value;
+            sizes[index] = size;
+          }
+        }
+      }
+    }
+  };
+
+  const paint = (drawBlock) => {
+    for (let row = fromRow; row <= toRow; row += 1) {
+      for (let column = fromColumn; column <= toColumn; column += 1) {
+        const index = row * columns + column;
+        const threshold = thresholdAt(column, row);
+        const value = coverage[index];
+
+        if (value <= threshold) {
+          continue;
+        }
+
+        const size = pixelSize(index);
+        const inset = Math.round((CONFIG.cell - size) / 2);
+
+        drawBlock({
+          x: column * CONFIG.cell + inset,
+          y: row * CONFIG.cell + inset,
+          size,
+          color: fringeColor(column, row, threshold) ?? coverageColor(value),
+        });
+      }
+    }
+  };
+
+  return { resize, stamp, paint };
+};

package/src/utils/confetti/palette.js

@@ -0,0 +1,15 @@
+import {
+  GL_COLOR_BRAND_PURPLE_02P,
+  GL_COLOR_RED_500,
+  GL_COLOR_BRAND_ORANGE_02P,
+  GL_COLOR_BRAND_ORANGE_01P,
+} from '../../tokens/build/js/tokens';
+
+export const COVERAGE_RAMP = [
+  GL_COLOR_BRAND_PURPLE_02P,
+  GL_COLOR_RED_500,
+  GL_COLOR_BRAND_ORANGE_02P,
+  GL_COLOR_BRAND_ORANGE_01P,
+];
+
+export const FRINGE_KEYS = [null, null, 0, 1, null, 2, 3, null];

package/src/utils/confetti/particles.js

@@ -0,0 +1,98 @@
+import {
+  CONFIG,
+  DEFAULT_COUNT,
+  MIN_AUTO_COUNT,
+  AREA_EXPONENT,
+  EDGE_ANGLE,
+  POINT_ANGLE,
+  POINT_POWER,
+  MIN_REACH,
+  REACH_HEADROOM,
+} from './constants';
+
+const randomBetween = (min, max) => min + Math.random() * (max - min);
+
+const degrees = (value) => (value * Math.PI) / 180;
+
+const aimJitter = () => randomBetween(-degrees(CONFIG.aimJitter), degrees(CONFIG.aimJitter));
+
+const countFor = (stage) => {
+  const share = (stage.width * stage.height) / (window.innerWidth * window.innerHeight);
+
+  return Math.round(Math.max(MIN_AUTO_COUNT, DEFAULT_COUNT * share ** AREA_EXPONENT));
+};
+
+const launchFromEdges = (stage, index) => {
+  const fromLeft = index % 2 === 0;
+
+  return {
+    x: fromLeft ? -10 : stage.width + 10,
+    y: stage.height + 10,
+    aim: Math.max(EDGE_ANGLE, Math.atan2(stage.height, stage.width)),
+    spread: degrees(CONFIG.edgeSpread),
+    direction: fromLeft ? 1 : -1,
+    power: 1,
+  };
+};
+
+const launchFromPoint = (origin) => ({
+  x: origin.x,
+  y: origin.y,
+  aim: POINT_ANGLE,
+  spread: degrees(CONFIG.pointSpread),
+  direction: 1,
+  power: POINT_POWER,
+});
+
+const createPiece = ({ stage, origin, index, jitter, maxSpeed }) => {
+  const launch = origin ? launchFromPoint(origin) : launchFromEdges(stage, index);
+  const depth = Math.random();
+  const reach = Math.sqrt(randomBetween(MIN_REACH, 1));
+  const speed = maxSpeed * launch.power * reach * (0.85 + depth * 0.2);
+  const angle = launch.aim + jitter + randomBetween(-launch.spread, launch.spread);
+
+  return {
+    depth,
+    x: launch.x,
+    y: launch.y,
+    delay: randomBetween(0, CONFIG.burstWindow),
+    radius: CONFIG.blobCells + depth * CONFIG.blobCellRange,
+    stretch: CONFIG.stretch + Math.random() * CONFIG.stretchRange,
+    peak: CONFIG.peak + depth * CONFIG.peakRange,
+    decayFrom: randomBetween(CONFIG.decayMin, 1),
+    velocityX: Math.cos(angle) * speed * launch.direction,
+    velocityY: -Math.sin(angle) * speed,
+    swayAmplitude: randomBetween(0.02, 0.08) * (1.3 - depth * 0.5),
+    swayFrequency: randomBetween(0.001, 0.003),
+    swayPhase: Math.random() * Math.PI * 2,
+  };
+};
+
+export const createPieces = ({ stage, origin, count }) => {
+  const travel = Math.max(Math.hypot(stage.width, stage.height), stage.height * REACH_HEADROOM);
+  const maxSpeed = travel * CONFIG.drag;
+  const jitter = aimJitter();
+
+  return Array.from({ length: count ?? countFor(stage) }, (value, index) =>
+    createPiece({ stage, origin, index, jitter, maxSpeed }),
+  );
+};
+
+export const advancePiece = (piece, { elapsed, delta }) => {
+  if (elapsed < piece.delay) {
+    return piece;
+  }
+
+  const drag = Math.exp(-CONFIG.drag * delta);
+  const velocityX = piece.velocityX * drag;
+  const velocityY = (piece.velocityY + CONFIG.gravity * delta) * drag;
+  const sway = Math.sin(piece.swayPhase + elapsed * piece.swayFrequency) * piece.swayAmplitude;
+
+  return {
+    ...piece,
+    velocityX,
+    velocityY,
+    x: piece.x + (velocityX + sway) * delta,
+    y: piece.y + velocityY * delta,
+  };
+};

package/src/utils/matrix/columns.js

@@ -0,0 +1,53 @@
+import { GLYPHS, CONFIG } from './constants';
+
+const randomBetween = (min, max) => min + Math.random() * (max - min);
+
+const sample = (values) => values[Math.floor(Math.random() * values.length)];
+
+export const glyph = () => sample(GLYPHS);
+
+export const measureGrid = ({ width, height }) => ({
+  across: Math.ceil(width / CONFIG.cell),
+  rows: Math.ceil(height / CONFIG.cell),
+});
+
+export const createColumns = (stage, colors) => {
+  const { across, rows } = measureGrid(stage);
+
+  return Array.from({ length: across }, (value, column) => ({
+    column,
+    rows,
+    row: -randomBetween(0, CONFIG.startSpread),
+    speed: randomBetween(CONFIG.minSpeed, CONFIG.maxSpeed),
+    color: sample(colors),
+    head: null,
+    steps: [],
+  })).filter(() => Math.random() < CONFIG.columnShare);
+};
+
+export const advanceColumn = (column, delta) => {
+  if (column.row > column.rows + CONFIG.restartAfter) {
+    return {
+      ...column,
+      row: -randomBetween(0, CONFIG.restartSpread),
+      head: null,
+      steps: [],
+    };
+  }
+
+  const row = column.row + column.speed * delta;
+  const from = Math.max(0, Math.ceil(column.row));
+  const to = Math.min(column.rows, Math.floor(row));
+  const steps = [];
+
+  for (let step = from; step <= to; step += 1) {
+    steps.push(step);
+  }
+
+  return {
+    ...column,
+    row,
+    head: steps.length ? steps.at(-1) : column.head,
+    steps,
+  };
+};

package/src/utils/matrix/constants.js

@@ -0,0 +1,19 @@
+export const GLYPHS = ['G', 'L'];
+export const FONT = 'ui-monospace, SFMono-Regular, Menlo, monospace';
+
+export const DEFAULT_DURATION = 6000;
+export const FADE_OUT_DURATION = 900;
+export const CANVAS_Z_INDEX = 9999;
+export const MAX_FRAME_DELTA = 50;
+export const RUNNING_ATTRIBUTE = 'data-matrix';
+
+export const CONFIG = {
+  cell: 16,
+  trail: 0.0016,
+  minSpeed: 0.004,
+  maxSpeed: 0.014,
+  columnShare: 0.72,
+  startSpread: 30,
+  restartSpread: 10,
+  restartAfter: 3,
+};

package/src/utils/matrix/matrix.js

@@ -0,0 +1,185 @@
+import { resolveColors } from './palette';
+import { createColumns, advanceColumn, glyph, measureGrid } from './columns';
+import {
+  CONFIG,
+  FONT,
+  DEFAULT_DURATION,
+  FADE_OUT_DURATION,
+  CANVAS_Z_INDEX,
+  MAX_FRAME_DELTA,
+  RUNNING_ATTRIBUTE,
+} from './constants';
+
+const noop = () => {};
+
+const measureStage = (boundary) => {
+  const rect =
+    boundary instanceof Element
+      ? boundary.getBoundingClientRect()
+      : { left: 0, top: 0, width: window.innerWidth, height: window.innerHeight };
+
+  return { x: rect.left, y: rect.top, width: rect.width, height: rect.height };
+};
+
+const createCanvas = () => {
+  const canvas = document.createElement('canvas');
+
+  canvas.setAttribute('aria-hidden', 'true');
+  canvas.setAttribute(RUNNING_ATTRIBUTE, '');
+  Object.assign(canvas.style, {
+    position: 'fixed',
+    inset: '0',
+    width: '100%',
+    height: '100%',
+    pointerEvents: 'none',
+    zIndex: String(CANVAS_Z_INDEX),
+  });
+
+  return canvas;
+};
+
+/**
+ * Rains `G` and `L` glyphs down the screen, then cleans up after itself.
+ *
+ * Every option has a default, so `matrix()` on its own rains over the whole viewport. Pass
+ * `boundary` to keep the rain inside an element. Each column falls at its own speed in one color
+ * from the brand ramp, with a head glyph in the default text color and a trail that fades behind it.
+ *
+ * Only one run happens at a time: a call made while another is still on screen does nothing and
+ * returns a no-op.
+ *
+ * Does nothing when the user prefers reduced motion, or outside a browser.
+ *
+ * The canvas is `aria-hidden`, so nobody using a screen reader will know it ran. When the rain is
+ * the only sign that something happened, the caller has to convey that in the accessibility tree
+ * as well.
+ *
+ * @param {Object} [options]
+ * @param {Number} [options.duration=6000] How long the rain runs, in milliseconds.
+ * @param {String[]} [options.colors] CSS colors for the columns, picked at random one per column.
+ * Defaults to the brand orange and purple and the red color tokens. The head glyph's text color
+ * resolves against `boundary` when given, so a `.gl-dark-scope` ancestor is honored.
+ * @param {Element} [options.boundary] Element to confine the rain to. Defaults to the viewport.
+ * @example
+ * const stop = matrix({ boundary: terminal, duration: 4000 });
+ * @returns {Function} Stops the rain and removes the canvas early.
+ */
+export const matrix = ({ duration = DEFAULT_DURATION, colors, boundary } = {}) => {
+  if (
+    typeof window === 'undefined' ||
+    window.matchMedia?.('(prefers-reduced-motion: reduce)').matches ||
+    document.querySelector(`[${RUNNING_ATTRIBUTE}]`)
+  ) {
+    return noop;
+  }
+
+  const canvas = createCanvas();
+  const context = canvas.getContext('2d');
+
+  if (!context) {
+    return noop;
+  }
+
+  const stage = measureStage(boundary);
+
+  const resize = () => {
+    const ratio = window.devicePixelRatio || 1;
+
+    canvas.width = window.innerWidth * ratio;
+    canvas.height = window.innerHeight * ratio;
+    context.setTransform(ratio, 0, 0, ratio, 0, 0);
+  };
+
+  const { head, rain } = resolveColors(
+    colors,
+    boundary instanceof Element ? boundary : document.documentElement,
+  );
+  let columns = createColumns(stage, rain);
+
+  const erase = (delta) => {
+    context.globalCompositeOperation = 'destination-out';
+    context.fillStyle = `rgba(0, 0, 0, ${1 - Math.exp(-CONFIG.trail * delta)})`;
+    context.fillRect(0, 0, stage.width, stage.height);
+    context.globalCompositeOperation = 'source-over';
+  };
+
+  const paintColumn = (column, previousHead) => {
+    const x = column.column * CONFIG.cell;
+
+    if (previousHead !== null) {
+      context.fillStyle = column.color;
+      context.fillText(glyph(), x, previousHead * CONFIG.cell);
+    }
+
+    column.steps.forEach((row, index) => {
+      context.fillStyle = index === column.steps.length - 1 ? head : column.color;
+      context.fillText(glyph(), x, row * CONFIG.cell);
+    });
+  };
+
+  let frame = null;
+  let startedAt = null;
+  let previousAt = null;
+
+  const stop = () => {
+    if (frame !== null) {
+      window.cancelAnimationFrame(frame);
+      frame = null;
+    }
+    window.removeEventListener('resize', resize);
+    canvas.remove();
+  };
+
+  const render = (now) => {
+    startedAt ??= now;
+    const elapsed = now - startedAt;
+    const delta = Math.min(now - (previousAt ?? now), MAX_FRAME_DELTA);
+    previousAt = now;
+
+    if (elapsed >= duration) {
+      stop();
+      return;
+    }
+
+    const grid = measureGrid(stage);
+    Object.assign(stage, measureStage(boundary));
+    const nextGrid = measureGrid(stage);
+
+    if (nextGrid.across !== grid.across || nextGrid.rows !== grid.rows) {
+      columns = createColumns(stage, rain);
+    }
+
+    canvas.style.opacity = String(Math.min(1, (duration - elapsed) / FADE_OUT_DURATION));
+
+    context.save();
+    context.beginPath();
+    context.rect(stage.x, stage.y, stage.width, stage.height);
+    context.clip();
+    context.translate(stage.x, stage.y);
+
+    erase(delta);
+    context.font = `${CONFIG.cell}px ${FONT}`;
+    context.textBaseline = 'top';
+
+    columns = columns.map((column) => {
+      const next = advanceColumn(column, delta);
+
+      if (next.steps.length) {
+        paintColumn(next, column.head);
+      }
+
+      return next;
+    });
+
+    context.restore();
+
+    frame = window.requestAnimationFrame(render);
+  };
+
+  resize();
+  window.addEventListener('resize', resize);
+  document.body.append(canvas);
+  frame = window.requestAnimationFrame(render);
+
+  return stop;
+};

package/src/utils/matrix/palette.js

@@ -0,0 +1,18 @@
+import {
+  GL_COLOR_BRAND_ORANGE_01P,
+  GL_COLOR_BRAND_ORANGE_02P,
+  GL_COLOR_BRAND_PURPLE_01P,
+  GL_COLOR_RED_500,
+} from '../../tokens/build/js/tokens';
+
+const MATRIX_COLORS = [
+  GL_COLOR_BRAND_ORANGE_02P,
+  GL_COLOR_BRAND_ORANGE_01P,
+  GL_COLOR_RED_500,
+  GL_COLOR_BRAND_PURPLE_01P,
+];
+
+export const resolveColors = (colors, element) => ({
+  head: window.getComputedStyle(element).getPropertyValue('--gl-text-color-default').trim(),
+  rain: colors?.length ? colors : MATRIX_COLORS,
+});

package/src/utils.js

@@ -2,3 +2,5 @@ export { GlBreakpointInstance, breakpoints } from './utils/breakpoints';
 
 export * as formValidators from './components/base/form/form_fields/validators';
 export * as formMappers from './components/base/form/form_fields/mappers';
+export { matrix } from './utils/matrix/matrix';
+export { confetti } from './utils/confetti/confetti';

package/src/vendor/bootstrap-vue/src/components/popover/helpers/bv-popover-template.js

@@ -46,11 +46,16 @@ export const BVPopoverTemplate = /*#__PURE__*/ extend({
                   domProps: titleDomProps,
                   attrs: { role: 'presentation' }
                 },
-                [$title]
+                // `innerHTML` overrides children, so avoid passing both — Vue 3 warns otherwise
+                titleDomProps.innerHTML ? [] : [$title]
               ),
           isUndefinedOrNull($content) || $content === ''
             ? /* istanbul ignore next */ h()
-            : h('div', { staticClass: 'popover-body', domProps: contentDomProps }, [$content])
+            : h(
+                'div',
+                { staticClass: 'popover-body', domProps: contentDomProps },
+                contentDomProps.innerHTML ? [] : [$content]
+              )
         ]
       )
     }

package/src/vendor/bootstrap-vue/src/components/tooltip/helpers/bv-tooltip-template.js

@@ -130,7 +130,8 @@ export const BVTooltipTemplate = /*#__PURE__*/ extend({
               staticClass: 'tooltip-inner',
               domProps
             },
-            [$title]
+            // `innerHTML` overrides children, so avoid passing both — Vue 3 warns otherwise
+            domProps.innerHTML ? [] : [$title]
           )
         ]
       )

package/src/vendor/bootstrap-vue/src/constants/components.js

@@ -14,9 +14,6 @@ export const NAME_FORM = 'BForm'
 export const NAME_FORM_GROUP = 'BFormGroup'
 export const NAME_FORM_INVALID_FEEDBACK = 'BFormInvalidFeedback'
 export const NAME_FORM_ROW = 'BFormRow'
-export const NAME_FORM_SELECT = 'BFormSelect'
-export const NAME_FORM_SELECT_OPTION = 'BFormSelectOption'
-export const NAME_FORM_SELECT_OPTION_GROUP = 'BFormSelectOptionGroup'
 export const NAME_FORM_TEXT = 'BFormText'
 export const NAME_FORM_VALID_FEEDBACK = 'BFormValidFeedback'
 export const NAME_LINK = 'BLink'

package/translations.js

@@ -1,4 +1,4 @@
-/* eslint-disable import/no-default-export */
+/* eslint-disable import-x/no-default-export */
 export default {
   'ClearIconButton.title': 'Clear',
   'ClipboardButton.copied': 'Copied',

package/dist/vendor/bootstrap-vue/src/components/form-select/form-select-option-group.js

@@ -1,51 +0,0 @@
-import { extend } from '../../vue';
-import { NAME_FORM_SELECT_OPTION_GROUP } from '../../constants/components';
-import { SLOT_NAME_FIRST } from '../../constants/slots';
-import { htmlOrText } from '../../utils/html';
-import { sortKeys } from '../../utils/object';
-import { props as props$1, formOptionsMixin } from '../../mixins/form-options';
-import { normalizeSlotMixin } from '../../mixins/normalize-slot';
-import { BFormSelectOption } from './form-select-option';
-
-// --- Props ---
-
-const props = sortKeys({
-  ...props$1,
-  label: {
-    type: String,
-    required: true
-  }
-});
-
-// --- Main component ---
-
-// @vue/component
-const BFormSelectOptionGroup = /*#__PURE__*/extend({
-  name: NAME_FORM_SELECT_OPTION_GROUP,
-  mixins: [normalizeSlotMixin, formOptionsMixin],
-  props,
-  render(h) {
-    const label = this.label;
-    const $options = this.formOptions.map((option, index) => {
-      const value = option.value,
-        text = option.text,
-        html = option.html,
-        disabled = option.disabled;
-      return h(BFormSelectOption, {
-        attrs: {
-          value,
-          disabled
-        },
-        domProps: htmlOrText(html, text),
-        key: `option_${index}`
-      });
-    });
-    return h('optgroup', {
-      attrs: {
-        label
-      }
-    }, [this.normalizeSlot(SLOT_NAME_FIRST), $options, this.normalizeSlot()]);
-  }
-});
-
-export { BFormSelectOptionGroup, props };